刘妍 2024-06-13 09:19:47 +08:00
commit 80e6e57d67
15 changed files with 1624 additions and 1424 deletions

View File

@ -25,6 +25,8 @@ enum Api {
Post_UpdateForm = '/api/FormModule/UpdateForm',
// 获取字典分类列表
Get_SysDataItemLoad = '/api/SysDataItem/Load',
// 判断数据表字段重复
Get_ExistFiled = '/api/FormModule/ExistFiled',
}
// 获取分页列表
@ -78,3 +80,11 @@ export function Get_SysDataItemLoad() {
url: Api.Get_SysDataItemLoad,
});
}
// 判断数据表字段重复
export function Get_Get_ExistFiled(params) {
return defHttp.get<responsesmodel>({
url: Api.Get_ExistFiled,
params,
});
}

View File

@ -31,6 +31,10 @@
* Delayed loading time
*/
lazyTime: { type: Number, default: 0 },
/**
* Title is Bold?
*/
isTitleBold: { type: Boolean, default: false },
};
export type CollapseContainerProps = ExtractPropTypes<typeof collapseContainerProps>;
@ -65,6 +69,7 @@
v-slots={{
title: slots.title,
action: slots.action,
isTitleBold: slots.isTitleBold,
}}
/>

View File

@ -6,6 +6,7 @@
const collapseHeaderProps = {
prefixCls: String,
title: String,
isTitleBold: Boolean,
show: Boolean,
canExpan: Boolean,
helpMessage: {
@ -24,21 +25,40 @@
setup(props, { slots, attrs, emit }) {
const { prefixCls } = useDesign('collapse-container');
const _prefixCls = computed(() => props.prefixCls || unref(prefixCls));
return () => (
<div class={[`${unref(_prefixCls)}__header px-2 py-5`, attrs.class]}>
<BasicTitle helpMessage={props.helpMessage} normal>
{slots.title?.() || props.title}
</BasicTitle>
// v-if="props.isTitleBold"
if (props.isTitleBold) {
return () => (
<div class={[`${unref(_prefixCls)}__header px-2 py-5`, attrs.class]}>
<BasicTitle helpMessage={props.helpMessage} normal>
<strong>{slots.title?.() || props.title}</strong>
</BasicTitle>
<div class={`${unref(_prefixCls)}__action`}>
{slots.action
? slots.action({ expand: props.show, onClick: () => emit('expand') })
: props.canExpan && (
<BasicArrow up expand={props.show} onClick={() => emit('expand')} />
)}
<div class={`${unref(_prefixCls)}__action`}>
{slots.action
? slots.action({ expand: props.show, onClick: () => emit('expand') })
: props.canExpan && (
<BasicArrow up expand={props.show} onClick={() => emit('expand')} />
)}
</div>
</div>
</div>
);
);
} else {
return () => (
<div class={[`${unref(_prefixCls)}__header px-2 py-5`, attrs.class]}>
<BasicTitle helpMessage={props.helpMessage} normal>
{slots.title?.() || props.title}
</BasicTitle>
<div class={`${unref(_prefixCls)}__action`}>
{slots.action
? slots.action({ expand: props.show, onClick: () => emit('expand') })
: props.canExpan && (
<BasicArrow up expand={props.show} onClick={() => emit('expand')} />
)}
</div>
</div>
);
}
},
});
</script>

File diff suppressed because it is too large Load Diff

View File

@ -1,7 +1,7 @@
<template>
<div class="map-container">
<div id="mapContainer" class="map-box"></div>
<!-- <div class="map-control">
<div class="map-container">
<div id="mapContainer" class="map-box"></div>
<!-- <div class="map-control">
<img
v-for="(item, index) in nextMapControl"
:key="index"
@ -11,238 +11,236 @@
/>
<img v-show="nextMapControl.length > 0" @click="handlerUnDraw" src="/del.png" title="清除" />
</div> -->
<LayerComponent
@changeOpenModal="changeOpenModal"
@changeOpenInsertShpModal="changeOpenInsertShpModal"
/>
<LayerControl @draw="handlerDrawPolygon" />
<UseModal v-model:openModal="openModal" @changeOpenModal="changeOpenModal" />
<LayerComponent
@changeOpenModal="changeOpenModal"
@changeOpenInsertShpModal="changeOpenInsertShpModal"
/>
<LayerControl @draw="handlerDrawPolygon" />
<UseModal v-model:openModal="openModal" @changeOpenModal="changeOpenModal" />
<InsertShp v-model:openModal="insertShpModal" />
<InsertShp v-model:openModal="insertShpModal" />
<!-- <AddLayer v-model:openModal="insertShpModal" /> -->
<DataListComponent />
<RightShowInfo v-model:openModal="openRightInfo" />
</div>
</template>
<script lang="ts" setup>
import { onMounted, onUnmounted, defineProps, reactive, ref,defineExpose } from 'vue';
import { useMessage } from '@/hooks/web/useMessage';
import mapboxgl, { Map, Popup } from 'mapbox-gl';
//
import MapboxDraw from '@mapbox/mapbox-gl-draw';
import U from 'mapbox-gl-utils';
import 'mapbox-gl/dist/mapbox-gl.css';
import './src/index.less';
import { MapboxConfig, MapboxDefaultStyle, MapControlConfig } from './src/config';
import { MP } from './src/MP';
import { DrawingType } from '@/enums/mapEnum';
import {
SnapPolygonMode,
SnapPointMode,
SnapLineMode,
SnapModeDrawStyles,
SnapDirectSelect,
} from 'mapbox-gl-draw-snap-mode';
import LayerComponent from './LayerComponent/index.vue';
import LayerControl from './LayerControl/index.vue';
import UseModal from './Modal/index.vue';
import InsertShp from './InsertShp/index.vue';
import AddLayer from './AddLayer/index.vue'
import DataListComponent from './DataListComponent/index.vue';
import RightShowInfo from './RightShowInfo/index.vue';
const openModal = ref(false);
const insertShpModal = ref(false);
const openRightInfo = ref(false);
const changeOpenModal = (value) => {
openModal.value = value;
};
const changeOpenInsertShpModal = (value) => {
insertShpModal.value = value;
};
// map
interface MapboxOptionsInterface {
mapOptions: mapboxgl.MapboxOptions;
control: DrawingType[];
}
const props = defineProps<MapboxOptionsInterface>();
let nextMapControl: Array<any> = reactive([]);
nextMapControl = props.control
? props.control.map((item) => {
console.log('item::: ', item);
return MapControlConfig[item];
})
: [];
console.log('nextMapControl::: ', nextMapControl);
//
let map: Map;
let popup: Popup;
let clickPoisition: Array<number> = [];
let selectFeature: Object = {};
let mp: any = null;
const { createConfirm, createMessage } = useMessage();
// emit
//
const emit = defineEmits(['mapOnLoad', 'mapDraw']);
onMounted(() => {
mapboxgl.accessToken = MapboxConfig.ACCESS_TOKEN;
map = initMap();
map.on('load', () => {
//mapbox-gl-utils
// U.init(map);
mp = new MP(map);
emit('mapOnLoad', map);
//
handlerInitDrawTool();
map.on('click', (e) => {
clickPoisition = e.lngLat;
});
map.on('draw.selectionchange', (e) => {
handlerCopyToTargetLayer(e);
});
window.handlerCopyFeature = handlerCopyFeature;
<!-- <AddLayer v-model:openModal="insertShpModal" /> -->
<DataListComponent />
<RightShowInfo v-model:openModal="openRightInfo" />
</div>
</template>
<script lang="ts" setup>
import { onMounted, onUnmounted, defineProps, reactive, ref, defineExpose } from 'vue';
import { useMessage } from '@/hooks/web/useMessage';
import mapboxgl, { Map, Popup } from 'mapbox-gl';
//
import MapboxDraw from '@mapbox/mapbox-gl-draw';
import U from 'mapbox-gl-utils';
import 'mapbox-gl/dist/mapbox-gl.css';
import './src/index.less';
import { MapboxConfig, MapboxDefaultStyle, MapControlConfig } from './src/config';
import { MP } from './src/MP';
import { DrawingType } from '@/enums/mapEnum';
import {
SnapPolygonMode,
SnapPointMode,
SnapLineMode,
SnapModeDrawStyles,
SnapDirectSelect,
} from 'mapbox-gl-draw-snap-mode';
import LayerComponent from './LayerComponent/index.vue';
import LayerControl from './LayerControl/index.vue';
import UseModal from './Modal/index.vue';
import InsertShp from './InsertShp/index.vue';
import AddLayer from './AddLayer/index.vue';
import DataListComponent from './DataListComponent/index.vue';
import RightShowInfo from './RightShowInfo/index.vue';
const openModal = ref(false);
const insertShpModal = ref(false);
const openRightInfo = ref(false);
const changeOpenModal = (value) => {
openModal.value = value;
};
const changeOpenInsertShpModal = (value) => {
insertShpModal.value = value;
};
// map
interface MapboxOptionsInterface {
mapOptions: mapboxgl.MapboxOptions;
control: DrawingType[];
}
const props = defineProps<MapboxOptionsInterface>();
let nextMapControl: Array<any> = reactive([]);
nextMapControl = props.control
? props.control.map((item) => {
console.log('item::: ', item);
return MapControlConfig[item];
})
: [];
console.log('nextMapControl::: ', nextMapControl);
//
let map: Map;
let popup: Popup;
let clickPoisition: Array<number> = [];
let selectFeature: Object = {};
let mp: any = null;
const { createConfirm, createMessage } = useMessage();
// emit
//
const emit = defineEmits(['mapOnLoad', 'mapDraw']);
onMounted(() => {
mapboxgl.accessToken = MapboxConfig.ACCESS_TOKEN;
map = initMap();
map.on('load', () => {
//mapbox-gl-utils
// U.init(map);
mp = new MP(map);
emit('mapOnLoad', map);
//
handlerInitDrawTool();
map.on('click', (e) => {
clickPoisition = e.lngLat;
});
map.on('draw.selectionchange', (e) => {
handlerCopyToTargetLayer(e);
});
window.handlerCopyFeature = handlerCopyFeature;
});
//
//
onUnmounted(() => {
map ? map.remove() : null;
});
//
//
onUnmounted(() => {
map ? map.remove() : null;
});
//
//
const initMap = () => {
return new mapboxgl.Map({
container: 'mapContainer',
language: 'zh-cmn',
projection: 'equirectangular', // wgs84
style: MapboxDefaultStyle,
maxZoom: 22,
minZoom: 6,
...props.mapOptions,
});
//
//
const initMap = () => {
return new mapboxgl.Map({
container: 'mapContainer',
language: 'zh-cmn',
projection: 'equirectangular', // wgs84
style: MapboxDefaultStyle,
maxZoom: 22,
minZoom: 6,
...props.mapOptions,
});
};
const handlerMapControlClick = (handler: string) => {
handler === 'handlerDrawPoint' && handlerDrawPoint();
handler === 'handlerDrawLineString' && handlerDrawLineString();
handler === 'handlerDrawPolygon' && handlerDrawPolygon();
};
//
const handlerDrawPoint = () => {
mp.draw('Point');
mp.on('Point', function (e) {
emit('mapDraw', 'Point', e);
});
};
//线
const handlerDrawLineString = () => {
mp.draw('LineString');
mp.on('LineString', function (e) {
emit('mapDraw', 'LineString', e);
});
};
//
const handlerDrawPolygon = () => {
mp.draw('Polygon');
mp.on('Polygon', function (e) {
emit('mapDraw', 'Polygon', e);
});
};
//
const handlerUnDraw = () => {
mp.deleteDraw();
emit('mapDraw', 'cancel');
};
//
const handlerInitDrawTool = () => {
let drawTool = new MapboxDraw({
modes: {
...MapboxDraw.modes,
draw_point: SnapPointMode,
draw_polygon: SnapPolygonMode,
draw_line_string: SnapLineMode,
direct_select: SnapDirectSelect,
},
// Styling guides
styles: SnapModeDrawStyles,
userProperties: true,
// Config snapping features
snap: true,
snapOptions: {
snapPx: 15, // defaults to 15
snapToMidPoints: true, // defaults to false
snapVertexPriorityDistance: 0.0025, // defaults to 1.25
},
guides: true,
});
map.addControl(drawTool, 'top-right');
};
//
const handlerCopyToTargetLayer = (e) => {
if (e.features.length > 0) {
if (popup) {
popup.remove();
popup = null;
}
selectFeature = e.features[0];
popup = new mapboxgl.Popup({
closeButton: false,
closeOnClick: false,
});
// popup
popup
.setLngLat(clickPoisition)
.setHTML(
`
<div style="color:#333;padding:3px 12px;cursor:pointer;" type="primary" icon="el-icon-search" onclick="handlerCopyFeature();">复制当前图斑</div>`,
)
.addTo(map);
} else {
};
const handlerMapControlClick = (handler: string) => {
handler === 'handlerDrawPoint' && handlerDrawPoint();
handler === 'handlerDrawLineString' && handlerDrawLineString();
handler === 'handlerDrawPolygon' && handlerDrawPolygon();
};
//
const handlerDrawPoint = () => {
mp.draw('Point');
mp.on('Point', function (e) {
emit('mapDraw', 'Point', e);
});
};
//线
const handlerDrawLineString = () => {
mp.draw('LineString');
mp.on('LineString', function (e) {
emit('mapDraw', 'LineString', e);
});
};
//
const handlerDrawPolygon = () => {
mp.draw('Polygon');
mp.on('Polygon', function (e) {
emit('mapDraw', 'Polygon', e);
});
};
//
const handlerUnDraw = () => {
mp.deleteDraw();
emit('mapDraw', 'cancel');
};
//
const handlerInitDrawTool = () => {
let drawTool = new MapboxDraw({
modes: {
...MapboxDraw.modes,
draw_point: SnapPointMode,
draw_polygon: SnapPolygonMode,
draw_line_string: SnapLineMode,
direct_select: SnapDirectSelect,
},
// Styling guides
styles: SnapModeDrawStyles,
userProperties: true,
// Config snapping features
snap: true,
snapOptions: {
snapPx: 15, // defaults to 15
snapToMidPoints: true, // defaults to false
snapVertexPriorityDistance: 0.0025, // defaults to 1.25
},
guides: true,
});
// map.addControl(drawTool, 'top-right');
};
//
const handlerCopyToTargetLayer = (e) => {
if (e.features.length > 0) {
if (popup) {
popup.remove();
popup = null;
}
};
const handlerCopyFeature = () => {
console.log(selectFeature);
selectFeature = e.features[0];
popup = new mapboxgl.Popup({
closeButton: false,
closeOnClick: false,
});
// popup
popup
.setLngLat(clickPoisition)
.setHTML(
`
<div style="color:#333;padding:3px 12px;cursor:pointer;" type="primary" icon="el-icon-search" onclick="handlerCopyFeature();">复制当前图斑</div>`,
)
.addTo(map);
} else {
popup.remove();
createMessage.success('复制成功!');
};
const handlerRenderLayer = (layer) => {
console.log("layerInfo",layer)
}
};
defineExpose({
handlerRenderLayer
});
const handlerCopyFeature = () => {
console.log(selectFeature);
popup.remove();
createMessage.success('复制成功!');
};
const handlerRenderLayer = (layer) => {
console.log('layerInfo', layer);
};
</script>
<style>
defineExpose({
handlerRenderLayer,
});
</script>
<style>
.layer-control-center p {
margin: 0px;
}
@ -286,7 +284,6 @@
}
.mapboxgl-ctrl-top-right {
}
.mapboxgl-ctrl-group button + button {
@ -338,5 +335,4 @@
width: 100px;
height: 100px;
}
</style>
</style>

View File

@ -1,231 +1,229 @@
let customDrawStyles = [{
"id": "gl-draw-polygon-fill-inactive",
"type": "fill",
"filter": ["all", ["==", "active", "false"],
["==", "$type", "Polygon"],
["!=", "mode", "static"]
],
"paint": {
"fill-color": "#3bb2d0",
"fill-outline-color": "#6495ed",
"fill-opacity": 0.5
}
}, {
"id": "gl-draw-polygon-fill-active",
"type": "fill",
"filter": ["all", ["==", "active", "true"],
["==", "$type", "Polygon"]
],
"paint": {
"fill-color": "#fbb03b",
"fill-outline-color": "#fbb03b",
"fill-opacity": 0.5
}
}, {
"id": "gl-draw-polygon-midpoint",
"type": "circle",
"filter": ["all", ["==", "$type", "Point"],
["==", "meta", "midpoint"]
],
"paint": {
"circle-radius": 3,
"circle-color": "#fbb03b"
}
}, {
"id": "gl-draw-polygon-stroke-inactive",
"type": "line",
"filter": ["all", ["==", "active", "false"],
["==", "$type", "Polygon"],
["!=", "mode", "static"]
],
"layout": {
"line-cap": "round",
"line-join": "round"
},
"paint": {
"line-color": "#3bb2d0",
"line-width": 2
}
}, {
"id": "gl-draw-polygon-stroke-active",
"type": "line",
"filter": ["all", ["==", "active", "true"],
["==", "$type", "Polygon"]
],
"layout": {
"line-cap": "round",
"line-join": "round"
},
"paint": {
"line-color": "#fbb03b",
"line-dasharray": [0.2, 2],
"line-width": 2
}
}, {
"id": "gl-draw-line-inactive",
"type": "line",
"filter": ["all", ["==", "active", "false"],
["==", "$type", "LineString"],
["!=", "mode", "static"],
["!=", "user_isSnapGuide", "true"]
],
"layout": {
"line-cap": "round",
"line-join": "round"
},
"paint": {
"line-color": "#3bb2d0",
"line-width": 2
}
}, {
"id": "gl-draw-line-active",
"type": "line",
"filter": ["all", ["==", "$type", "LineString"],
["==", "active", "true"]
],
"layout": {
"line-cap": "round",
"line-join": "round"
},
"paint": {
"line-color": "#fbb03b",
"line-dasharray": [0.2, 2],
"line-width": 2
}
}, {
"id": "gl-draw-polygon-and-line-vertex-stroke-inactive",
"type": "circle",
"filter": ["all", ["==", "meta", "vertex"],
["==", "$type", "Point"],
["!=", "mode", "static"]
],
"paint": {
"circle-radius": 5,
"circle-color": "#fff"
}
}, {
"id": "gl-draw-polygon-and-line-vertex-inactive",
"type": "circle",
"filter": ["all", ["==", "meta", "vertex"],
["==", "$type", "Point"],
["!=", "mode", "static"]
],
"paint": {
"circle-radius": 3,
"circle-color": "#fbb03b"
}
}, {
"id": "gl-draw-point-point-stroke-inactive",
"type": "circle",
"filter": ["all", ["==", "active", "false"],
["==", "$type", "Point"],
["==", "meta", "feature"],
["!=", "mode", "static"]
],
"paint": {
"circle-radius": 5,
"circle-opacity": 1,
"circle-color": "#fff"
}
}, {
"id": "gl-draw-point-inactive",
"type": "circle",
"filter": ["all", ["==", "active", "false"],
["==", "$type", "Point"],
["==", "meta", "feature"],
["!=", "mode", "static"]
],
"paint": {
"circle-radius": 3,
"circle-color": "#3bb2d0"
}
}, {
"id": "gl-draw-point-stroke-active",
"type": "circle",
"filter": ["all", ["==", "$type", "Point"],
["==", "active", "true"],
["!=", "meta", "midpoint"]
],
"paint": {
"circle-radius": 7,
"circle-color": "#fff"
}
}, {
"id": "gl-draw-point-active",
"type": "circle",
"filter": ["all", ["==", "$type", "Point"],
["!=", "meta", "midpoint"],
["==", "active", "true"]
],
"paint": {
"circle-radius": 5,
"circle-color": "#fbb03b"
}
}, {
"id": "gl-draw-polygon-fill-static",
"type": "fill",
"filter": ["all", ["==", "mode", "static"],
["==", "$type", "Polygon"]
],
"paint": {
"fill-color": "#404040",
"fill-outline-color": "#404040",
"fill-opacity": 0.1
}
}, {
"id": "gl-draw-polygon-stroke-static",
"type": "line",
"filter": ["all", ["==", "mode", "static"],
["==", "$type", "Polygon"]
],
"layout": {
"line-cap": "round",
"line-join": "round"
},
"paint": {
"line-color": "#404040",
"line-width": 2
}
}, {
"id": "gl-draw-line-static",
"type": "line",
"filter": ["all", ["==", "mode", "static"],
["==", "$type", "LineString"]
],
"layout": {
"line-cap": "round",
"line-join": "round"
},
"paint": {
"line-color": "#404040",
"line-width": 2
}
}, {
"id": "gl-draw-point-static",
"type": "circle",
"filter": ["all", ["==", "mode", "static"],
["==", "$type", "Point"]
],
"paint": {
"circle-radius": 5,
"circle-color": "#404040"
}
}, {
"id": "guide",
"type": "line",
"filter": ["all", ["==", "$type", "LineString"],
["==", "user_isSnapGuide", "true"]
],
"layout": {
"line-cap": "round",
"line-join": "round"
},
"paint": {
"line-color": "#c00c00",
"line-width": 1,
"line-dasharray": [5, 5]
}
}]
const customDrawStyles = [
{
id: 'gl-draw-polygon-fill-inactive',
type: 'fill',
filter: [
'all',
['==', 'active', 'false'],
['==', '$type', 'Polygon'],
['!=', 'mode', 'static'],
],
paint: {
'fill-color': '#3bb2d0',
'fill-outline-color': '#6495ed',
'fill-opacity': 0.5,
},
},
{
id: 'gl-draw-polygon-fill-active',
type: 'fill',
filter: ['all', ['==', 'active', 'true'], ['==', '$type', 'Polygon']],
paint: {
'fill-color': '#fbb03b',
'fill-outline-color': '#fbb03b',
'fill-opacity': 0.5,
},
},
{
id: 'gl-draw-polygon-midpoint',
type: 'circle',
filter: ['all', ['==', '$type', 'Point'], ['==', 'meta', 'midpoint']],
paint: {
'circle-radius': 3,
'circle-color': '#fbb03b',
},
},
{
id: 'gl-draw-polygon-stroke-inactive',
type: 'line',
filter: [
'all',
['==', 'active', 'false'],
['==', '$type', 'Polygon'],
['!=', 'mode', 'static'],
],
layout: {
'line-cap': 'round',
'line-join': 'round',
},
paint: {
'line-color': '#3bb2d0',
'line-width': 2,
},
},
{
id: 'gl-draw-polygon-stroke-active',
type: 'line',
filter: ['all', ['==', 'active', 'true'], ['==', '$type', 'Polygon']],
layout: {
'line-cap': 'round',
'line-join': 'round',
},
paint: {
'line-color': '#fbb03b',
'line-dasharray': [0.2, 2],
'line-width': 2,
},
},
{
id: 'gl-draw-line-inactive',
type: 'line',
filter: [
'all',
['==', 'active', 'false'],
['==', '$type', 'LineString'],
['!=', 'mode', 'static'],
['!=', 'user_isSnapGuide', 'true'],
],
layout: {
'line-cap': 'round',
'line-join': 'round',
},
paint: {
'line-color': '#3bb2d0',
'line-width': 2,
},
},
{
id: 'gl-draw-line-active',
type: 'line',
filter: ['all', ['==', '$type', 'LineString'], ['==', 'active', 'true']],
layout: {
'line-cap': 'round',
'line-join': 'round',
},
paint: {
'line-color': '#fbb03b',
'line-dasharray': [0.2, 2],
'line-width': 2,
},
},
{
id: 'gl-draw-polygon-and-line-vertex-stroke-inactive',
type: 'circle',
filter: ['all', ['==', 'meta', 'vertex'], ['==', '$type', 'Point'], ['!=', 'mode', 'static']],
paint: {
'circle-radius': 5,
'circle-color': '#fff',
},
},
{
id: 'gl-draw-polygon-and-line-vertex-inactive',
type: 'circle',
filter: ['all', ['==', 'meta', 'vertex'], ['==', '$type', 'Point'], ['!=', 'mode', 'static']],
paint: {
'circle-radius': 3,
'circle-color': '#fbb03b',
},
},
{
id: 'gl-draw-point-point-stroke-inactive',
type: 'circle',
filter: [
'all',
['==', 'active', 'false'],
['==', '$type', 'Point'],
['==', 'meta', 'feature'],
['!=', 'mode', 'static'],
],
paint: {
'circle-radius': 5,
'circle-opacity': 1,
'circle-color': '#fff',
},
},
{
id: 'gl-draw-point-inactive',
type: 'circle',
filter: [
'all',
['==', 'active', 'false'],
['==', '$type', 'Point'],
['==', 'meta', 'feature'],
['!=', 'mode', 'static'],
],
paint: {
'circle-radius': 3,
'circle-color': '#3bb2d0',
},
},
{
id: 'gl-draw-point-stroke-active',
type: 'circle',
filter: ['all', ['==', '$type', 'Point'], ['==', 'active', 'true'], ['!=', 'meta', 'midpoint']],
paint: {
'circle-radius': 7,
'circle-color': '#fff',
},
},
{
id: 'gl-draw-point-active',
type: 'circle',
filter: ['all', ['==', '$type', 'Point'], ['!=', 'meta', 'midpoint'], ['==', 'active', 'true']],
paint: {
'circle-radius': 5,
'circle-color': '#fbb03b',
},
},
{
id: 'gl-draw-polygon-fill-static',
type: 'fill',
filter: ['all', ['==', 'mode', 'static'], ['==', '$type', 'Polygon']],
paint: {
'fill-color': '#404040',
'fill-outline-color': '#404040',
'fill-opacity': 0.1,
},
},
{
id: 'gl-draw-polygon-stroke-static',
type: 'line',
filter: ['all', ['==', 'mode', 'static'], ['==', '$type', 'Polygon']],
layout: {
'line-cap': 'round',
'line-join': 'round',
},
paint: {
'line-color': '#404040',
'line-width': 2,
},
},
{
id: 'gl-draw-line-static',
type: 'line',
filter: ['all', ['==', 'mode', 'static'], ['==', '$type', 'LineString']],
layout: {
'line-cap': 'round',
'line-join': 'round',
},
paint: {
'line-color': '#404040',
'line-width': 2,
},
},
{
id: 'gl-draw-point-static',
type: 'circle',
filter: ['all', ['==', 'mode', 'static'], ['==', '$type', 'Point']],
paint: {
'circle-radius': 5,
'circle-color': '#404040',
},
},
{
id: 'guide',
type: 'line',
filter: ['all', ['==', '$type', 'LineString'], ['==', 'user_isSnapGuide', 'true']],
layout: {
'line-cap': 'round',
'line-join': 'round',
},
paint: {
'line-color': '#c00c00',
'line-width': 1,
'line-dasharray': [5, 5],
},
},
];
export {customDrawStyles}
export { customDrawStyles };

View File

@ -405,125 +405,134 @@
});
return result;
};
const getRFields = (dataList, rFieldList,fieldList) => {
dataList.forEach((element: { label?: string; field?: string; component: any; itemProps: any }) => {
if (['InputGuid'].includes(element.component)) {
rFieldList.push({
label: element.label,
// value:element.prop
value: element.field,
});
}
if(element.component === 'Tabs'){
element.componentProps.options.forEach(childElement => {
const {rFieldList:rField, fieldList:field} = getRFields(childElement.children,rFieldList,fieldList)
rFieldList = rField
fieldList = field
})
}else if (
![
'Divider',
'Grid',
'Card',
'CreateUser',
'CreateTime',
'ModifyUser',
'ModifyTime',
'CardGroup',
].includes(element.component) &&
!element.itemProps.hidden
) {
let obj: any = element;
obj.required = element.itemProps.required;
// obj.componentProps.disabled = false;
obj.disabled = true;
obj.ifShow = true;
obj.fieldName = element.componentProps.fieldName;
fieldList.push(obj);
} else if (['Grid'].includes(element.component) || element.type == 'subTable') {
console.log('gridtable');
fieldList.push({
field: `${element.field}_add`,
label: `${element.label || '表格'}-添加按钮`,
required: false,
disabled: true,
ifShow: false,
type: 'grid',
});
fieldList.push({
field: `${element.field}_remove`,
label: `${element.label || '表格'}-删除按钮`,
required: false,
disabled: true,
ifShow: false,
type: 'grid',
});
fieldList.push({
field: `${element.field}_required`,
label: `${element.label || '表格'}-数据`,
required: element.itemProps.required,
disabled: false,
ifShow: false,
type: 'gridrequired',
});
element.columns.forEach((child) => {
child.children.forEach((t) => {
fieldList.push({
gridprop: element.field,
field: t.field,
label: `${element.label || '表格'}-${t.label}`,
required: t.itemProps.required,
disabled: true,
ifShow: true,
fieldName: t.componentProps.fieldName,
...t,
});
});
});
} else if (['Card'].includes(element.component)) {
console.log(3);
element.columns.forEach((child) => {
child.children.forEach((t) => {
fieldList.push({
gridprop: element.field,
field: t.field,
required: t.itemProps.required,
disabled: true,
ifShow: true,
fieldName: t.componentProps.fieldName,
...t,
});
});
});
} else if (
['CreateUser', 'CreateTime', 'ModifyUser', 'ModifyTime'].includes(element.component) &&
element.display
) {
let obj: any = element;
obj.required = element.itemProps.required;
// obj.componentProps.disabled = false;
obj.disabled = true;
obj.ifShow = true;
obj.fieldName = element.componentProps.fieldName;
fieldList.push(obj);
} else if (['CardGroup'].includes(element.component)) {
let obj: any = element;
obj.required = element.itemProps.required;
// obj.componentProps.disabled = false;
obj.disabled = true;
obj.ifShow = true;
obj.fieldName = element.componentProps.fieldName;
obj.label = `卡片组-${element.label}`;
fieldList.push(obj);
fieldList = cardComponentChild(element.componentProps.options, fieldList);
}
},);
return {rFieldList,fieldList}
}
function loadFormScheme(strScheme, isChange) {
const scheme = JSON.parse(strScheme);
let fields: any[] = [];
const rfields: {
let rfields: {
label?: string;
value?: string;
}[] = [];
scheme.formInfo.tabList = cardNestStructure(scheme.formInfo.tabList);
console.log(scheme.formInfo.tabList);
scheme.formInfo.tabList.forEach((tabElement) => {
tabElement.schemas.forEach(
(element: { label?: string; field?: string; component: any; itemProps: any }) => {
if (['InputGuid'].includes(element.component)) {
rfields.push({
label: element.label,
// value:element.prop
value: element.field,
});
}
if (
![
'Divider',
'Grid',
'Card',
'CreateUser',
'CreateTime',
'ModifyUser',
'ModifyTime',
'CardGroup',
].includes(element.component) &&
!element.itemProps.hidden
) {
let obj: any = element;
obj.required = element.itemProps.required;
// obj.componentProps.disabled = false;
obj.disabled = true;
obj.ifShow = true;
obj.fieldName = element.componentProps.fieldName;
fields.push(obj);
} else if (['Grid'].includes(element.component) || element.type == 'subTable') {
console.log('gridtable');
fields.push({
field: `${element.field}_add`,
label: `${element.label || '表格'}-添加按钮`,
required: false,
disabled: true,
ifShow: false,
type: 'grid',
});
fields.push({
field: `${element.field}_remove`,
label: `${element.label || '表格'}-删除按钮`,
required: false,
disabled: true,
ifShow: false,
type: 'grid',
});
fields.push({
field: `${element.field}_required`,
label: `${element.label || '表格'}-数据`,
required: element.itemProps.required,
disabled: false,
ifShow: false,
type: 'gridrequired',
});
element.columns.forEach((child) => {
child.children.forEach((t) => {
fields.push({
gridprop: element.field,
field: t.field,
label: `${element.label || '表格'}-${t.label}`,
required: t.itemProps.required,
disabled: true,
ifShow: true,
fieldName: t.componentProps.fieldName,
...t,
});
});
});
} else if (['Card'].includes(element.component)) {
console.log(3);
element.columns.forEach((child) => {
child.children.forEach((t) => {
fields.push({
gridprop: element.field,
field: t.field,
required: t.itemProps.required,
disabled: true,
ifShow: true,
fieldName: t.componentProps.fieldName,
...t,
});
});
});
} else if (
['CreateUser', 'CreateTime', 'ModifyUser', 'ModifyTime'].includes(element.component) &&
element.display
) {
let obj: any = element;
obj.required = element.itemProps.required;
// obj.componentProps.disabled = false;
obj.disabled = true;
obj.ifShow = true;
obj.fieldName = element.componentProps.fieldName;
fields.push(obj);
} else if (['CardGroup'].includes(element.component)) {
let obj: any = element;
obj.required = element.itemProps.required;
// obj.componentProps.disabled = false;
obj.disabled = true;
obj.ifShow = true;
obj.fieldName = element.componentProps.fieldName;
obj.label = `卡片组-${element.label}`;
fields.push(obj);
fields = cardComponentChild(element.componentProps.options, fields);
}
},
);
const {rFieldList, fieldList} = getRFields(tabElement.schemas,rfields,fields)
rfields = rFieldList
fields = fieldList
});
data.formRelations = rfields;
if (isChange) {

View File

@ -95,19 +95,19 @@ let drawFeatures = [
const MapboxComponent = ref()
//
setTimeout(function(){
//
// MapboxComponent.value.handlerDraw()
//
MapboxComponent.value.handlerDraw(drawFeatures)
},3000)
// setTimeout(function(){
// //
// // MapboxComponent.value.handlerDraw()
// //
// MapboxComponent.value.handlerDraw(drawFeatures)
// },3000)
setTimeout(function(){
// MapboxComponent.value.handlerDraw()
},6000)
// setTimeout(function(){
// // MapboxComponent.value.handlerDraw()
// },6000)
//
// setTimeout(function(){

View File

@ -18,7 +18,7 @@
breakpoint="md"
>
<div class="collapseItem-box">
<CollapseContainer title="基础控件">
<CollapseContainer title="基础控件" isTitleBold="true">
<CollapseItem
:list="baseComponents"
:handleListPush="handleListPushDrag"
@ -26,7 +26,7 @@
@handle-list-push="handleListPush"
/>
</CollapseContainer>
<CollapseContainer title="自定义控件">
<CollapseContainer title="自定义控件" isTitleBold="true">
<CollapseItem
:list="customComponents"
@add-attrs="handleAddAttrs"
@ -34,7 +34,7 @@
@handle-list-push="handleListPush"
/>
</CollapseContainer>
<CollapseContainer title="布局控件">
<CollapseContainer title="布局控件" isTitleBold="true">
<CollapseItem
:list="layoutComponents"
:handleListPush="handleListPushDrag"
@ -451,4 +451,8 @@
height: calc(100vh - 55px);
overflow: auto;
}
.vben-basic-title {
font-weight: bold;
}
</style>

View File

@ -7,20 +7,25 @@
<!-- 操作左侧区域 start -->
<div class="left-btn-box" style="text-indent: 20px">
<Tooltip v-for="item in toolbarsConfigs" :title="item.title" :key="item.icon">
<a @click="$emit(item.event)" class="toolbar-text">
<Icon :icon="item.icon" :style="{ fontSize: '21px' }" />
</a>
<a-button @click="$emit(item.event)" id="button">
<template #icon>
<Icon :icon="item.icon" :style="{ fontSize: '16px' }" />
</template>
</a-button>
</Tooltip>
<Divider type="vertical" />
<Tooltip title="撤销">
<a :class="{ disabled: !canUndo }" :disabled="!canUndo" @click="undo">
<Icon icon="ant-design:undo-outlined" :style="{ fontSize: '21px' }" />
</a>
<a-button :class="{ disabled: !canUndo }" :disabled="!canUndo" @click="undo" id="button">
<template #icon>
<Icon icon="ant-design:undo-outlined" :style="{ fontSize: '16px' }" />
</template>
</a-button>
</Tooltip>
<Tooltip title="重做">
<a :class="{ disabled: !canRedo }" :disabled="!canRedo" @click="redo">
<Icon icon="ant-design:redo-outlined" :style="{ fontSize: '21px' }" />
</a>
<a-button :class="{ disabled: !canRedo }" @click="redo" id="button">
<template #icon>
<Icon icon="ant-design:redo-outlined" :style="{ fontSize: '16px' }" />
</template>
</a-button>
</Tooltip>
</div>
</div>
@ -30,7 +35,7 @@
import { defineComponent, inject, reactive, toRefs } from 'vue';
import { UseRefHistoryReturn } from '@vueuse/core';
import { IFormConfig } from '../../../typings/v-form-component';
import { Tooltip, Divider } from 'ant-design-vue';
import { Tooltip } from 'ant-design-vue';
import Icon from '@/components/Icon/Icon.vue';
interface IToolbarsConfig {
@ -45,7 +50,6 @@
components: {
Tooltip,
Icon,
Divider,
},
setup() {
const state = reactive<{
@ -56,7 +60,7 @@
title: '预览-支持布局',
type: 'preview',
event: 'handlePreview',
icon: 'ant-design:chrome-filled',
icon: 'bi:life-preserver',
},
// {
// title: '-',
@ -113,9 +117,10 @@
line-height: @operating-area-height;
text-align: left;
a {
#button {
margin: 0 5px;
color: #666;
width: 32px;
height: 32px;
&.disabled,
&.disabled:hover {
@ -127,7 +132,6 @@
}
> span {
padding-left: 2px;
font-size: 14px;
}
}

View File

@ -1,11 +1,14 @@
.draggable-box {
height: 100%;
overflow: auto;
background-color: @background-color;
:deep(.list-main) {
position: relative;
padding: 5px;
overflow: hidden;
border-radius: 4px;
.moving {
position: relative;
@ -21,7 +24,7 @@
top: 0;
right: 0;
width: 100%;
height: 5px;
height: 3px;
background-color: @primary-color;
}
}
@ -33,6 +36,7 @@
padding: 8px;
overflow: hidden;
transition: all 0.3s;
border-radius: 3px;
&:hover {
background-color: @primary-hover-bg-color;
@ -44,14 +48,16 @@
position: absolute;
top: 0;
right: -100%;
width: 100%;
height: 5px;
width: 0%;
height: 3px;
transition: all 0.3s;
outline: 3px solid @primary-color;
background-color: @primary-color;
}
&.active {
outline-offset: 0;
outline: 3px solid @primary-color;
// outline-offset: 0;
background-color: @primary-hover-bg-color;
&::before {
@ -84,7 +90,7 @@
.show-key-box {
// 显示key
position: absolute;
right: 5px;
right: 3px;
bottom: 2px;
// z-index: 999;
color: @primary-color;
@ -133,6 +139,12 @@
overflow: hidden;
transition: all 0.3s;
background-color: @layout-background-color;
border-radius: 3px;
// 鼠标划过
&:hover {
background-color: @layout-hover-bg-color;
}
.form-item-box {
position: relative;
@ -170,14 +182,15 @@
position: absolute;
top: 0;
right: -100%;
width: 100%;
height: 5px;
width: 0%;
height: 3px;
transition: all 0.3s;
background: transparent;
}
&.active {
outline-offset: 0;
outline: 3px solid @layout-color;
// outline-offset: 0;
background-color: @layout-hover-bg-color;
&::before {

View File

@ -1,11 +1,11 @@
// 表单设计器样式
@primary-color: #13c2c2;
@layout-color: #9867f7;
@background-color: #EBEDF1;
@primary-color: #1E5EFFFF;
@layout-color: #A91EFFFF;
@primary-background-color: fade(@primary-color, 6%);
@primary-hover-bg-color: fade(@primary-color, 20%);
@layout-background-color: fade(@layout-color, 12%);
@layout-hover-bg-color: fade(@layout-color, 24%);
@primary-hover-bg-color: #DFEAFC;
@layout-background-color: #E9E4F5;
@layout-hover-bg-color: #d7d2ff;
@title-text-color: #fff;
@border-color: #ccc;

View File

@ -453,7 +453,7 @@ export const baseComponents: IVFormComponent[] = [
{
component: 'Cascader',
label: '级联选择',
icon: 'ant-design:check-outlined',
icon: 'ant-design:block-outlined',
field: '',
colProps: { span: 24 },
componentProps: {

View File

@ -526,12 +526,7 @@
if (rows.length == 0) {
return createMessage.warn('请选择一条数据查看详情');
}
<<<<<<< HEAD
console.log("DetailsRow",formConfig,rows);
=======
console.log('DetailsRow', rows);
>>>>>>> 2d727b56b33f5b20ec09e72b777cfa6a88e157e9
let toProps = {
isDetail: true,
isUpdate: false,
@ -548,41 +543,12 @@
openShowFormModal.value = true;
// ids
<<<<<<< HEAD
try{
console.log("formConfig",formConfig);
handlerShowGeomtrys(formConfig,rows[0])
}catch(e){
createMessage.error("当前数据没有图斑!");
=======
try {
let getGeomPrams: GeomParams = {
TableName: 'drone_shp_data',
FieldName: 'geom',
// FieldValue:row[].split(","),
FiledValue: [1315, 1308],
};
getGeom(getGeomPrams).then((res) => {
let geoms = [];
if (res) {
if (res.items?.length > 0) {
res.items.forEach((item, index) => {
let geom = {
key: item.gid,
mapgeom: item.geom,
};
geoms.push(geom);
});
}
// MapboxComponent.value.handlerDraw(status,mapgemoList.value, false);
MapboxComponent.value.handlerDraw(status, geoms, false);
} else {
createMessage.error('当前数据没有图斑!');
}
});
} catch (e) {
createMessage.error('当前数据没有图斑!');
>>>>>>> 2d727b56b33f5b20ec09e72b777cfa6a88e157e9
}
} else {
openModal(true, toProps);
@ -597,7 +563,7 @@
}
};
<<<<<<< HEAD
async function handlerShowGeomtrys(currentNode,rows){
let info = currentNode.value.schemas?.find((item,index)=>{
@ -656,8 +622,6 @@
}
}
=======
>>>>>>> 2d727b56b33f5b20ec09e72b777cfa6a88e157e9
function handleSelect(selectedKeys: any, selected: any) {
const rel = selected.node.dataRef;
const obj: any = {};

View File

@ -74,9 +74,10 @@
import { useMessage } from '@/hooks/web/useMessage';
import { getMenuList } from '@/api/demo/system';
import { useI18n } from '@/hooks/web/useI18n';
import { FormInstance } from 'ant-design-vue';
import ModuleModal from './modalForm-Modal.vue';
import { functionGetSchemePageList, functionGetForm } from '@/api/demo/formScheme';
import { Get_Get_ExistFiled } from '@/api/demo/formModule';
// emit
const emit = defineEmits(['change-form-verisons', 'set-steps-current']);
@ -110,7 +111,7 @@
//
const [registerModal, { openModal }] = useModal();
// ref
const formModuleRef = ref<any>();
let formModuleRef: FormInstance | null = null;
// options
const formVerisons = ref([]);
// options
@ -134,12 +135,147 @@
});
//
let rules = {
code: [{ required: true, message: '请输入' }],
name: [{ required: true, message: '请输入' }],
icon: [{ component: 'IconPicker', required: true, message: '请输入' }],
formCodeName: [{ required: true, message: '请输入' }],
formVerison: [{ required: true, message: '请选择版本' }],
pmoduleId: [{ required: true, message: '请输入' }],
code: [
{
required: true,
asyncValidator: async (rule, value, callback) => {
//
if (value) {
try {
let filedsJson = {
Code: formData.value.code,
};
if (props.isEdit) {
//
let query: any = {
keyValue: props.editData.record.id,
tableName: 'form_module',
keyName: 'Id',
filedsJson: JSON.stringify(filedsJson),
};
await Get_Get_ExistFiled(query).then((res) => {
if (res) {
callback();
} else {
callback(new Error('编号重复'));
}
});
} else {
//
let query: any = {
tableName: 'form_module',
keyName: 'Id',
filedsJson: JSON.stringify(filedsJson),
};
await Get_Get_ExistFiled(query).then((res) => {
if (res) {
callback();
} else {
callback(new Error('编号重复'));
}
});
}
} catch (error) {
('验证出错');
}
} else {
callback(new Error('请输入编号'));
}
},
trigger: ['blur'],
},
],
name: [
{
required: true,
validator: (rule, value, callback) => {
try {
//
if (value) {
callback();
} else {
callback(new Error('请输入名称'));
}
} catch (error) {
console.log(error);
}
},
trigger: ['blur'],
},
],
icon: [
{
component: 'IconPicker',
required: true,
validator: (rule, value, callback) => {
try {
//
if (value) {
callback();
} else {
callback(new Error('请选择图标'));
}
} catch (error) {
console.log(error);
}
},
trigger: ['blur'],
},
],
formCodeName: [
{
required: true,
validator: (rule, value, callback) => {
try {
//
if (value) {
callback();
} else {
callback(new Error('请选择表单'));
}
} catch (error) {
console.log(error);
}
},
trigger: ['blur'],
},
],
formVerison: [
{
required: true,
validator: (rule, value, callback) => {
try {
//
if (value) {
callback();
} else {
callback(new Error('请选择表单版本'));
}
} catch (error) {
console.log(error);
}
},
trigger: ['blur'],
},
],
pmoduleId: [
{
required: true,
validator: (rule, value, callback) => {
try {
//
if (value) {
callback();
} else {
callback(new Error('请选择上级'));
}
} catch (error) {
console.log(error);
}
},
trigger: ['blur'],
},
],
enabledMark: [{ required: true }],
};
@ -159,21 +295,34 @@
// props
watch(
() => props.isNextSteps,
() => {
//
async () => {
if (props.isNextSteps) {
let checkdata = formData.value;
// if (formModuleRef) {
// try {
// await formModuleRef.validate();
// } catch (error) {
// console.log(error);
// }
// }
if (
checkdata.code === '' ||
checkdata.formCode === '' ||
checkdata.name === '' ||
checkdata.formVerison === '' ||
checkdata.pmoduleId === ''
formData.value.code === '' ||
formData.value.name === '' ||
formData.value.icon === '' ||
formData.value.formCode === '' ||
formData.value.formVerison === '' ||
formData.value.pmoduleId === ''
) {
createMessage.error(t('数据未填完整'));
createMessage.error(t('数据未填完整'));
emit('set-steps-current', false);
} else {
emit('set-steps-current', true);
//
let res = await checkExistFiled();
if (res) {
emit('set-steps-current', true);
} else {
createMessage.error(t('表单的编号值重复'));
emit('set-steps-current', false);
}
}
}
},
@ -238,6 +387,59 @@
getSchemeRow(result.info);
}
//
async function checkExistFiled() {
try {
let filedsJson = {
Code: formData.value.code,
};
let result = false;
if (props.isEdit) {
//
let query: any = {
keyValue: props.editData.record.id,
tableName: 'form_module',
keyName: 'Id',
filedsJson: JSON.stringify(filedsJson),
};
await Get_Get_ExistFiled(query)
.then((res) => {
if (res) {
result = true;
} else {
result = false;
}
})
.catch((error) => {
createMessage.error('验证出错' + error);
result = true;
});
} else {
//
let query: any = {
tableName: 'form_module',
keyName: 'Id',
filedsJson: JSON.stringify(filedsJson),
};
await Get_Get_ExistFiled(query)
.then((res) => {
if (res) {
result = true;
} else {
result = false;
}
})
.catch((error) => {
createMessage.error('验证出错' + error);
result = false;
});
}
return result;
} catch (error) {
('验证出错');
}
}
defineExpose({
formData,
});