From b3da99a09df6c80afa89d050546ca8af67e93c58 Mon Sep 17 00:00:00 2001 From: helloxujingliang <3225043@qq.com> Date: Tue, 6 May 2025 16:52:20 +0800 Subject: [PATCH 1/4] =?UTF-8?q?=E5=9B=BE=E6=96=91=E7=BC=96=E8=BE=91?= =?UTF-8?q?=E5=92=8C=E6=B7=BB=E5=8A=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/application/layer.ts | 14 + src/views/demo/layer/LayerTree.vue | 13 +- src/views/demo/layer/data.ts | 2 +- src/views/demo/layer/geometryHandler.ts | 215 +++++++++++-- src/views/demo/layer/index.vue | 295 +++++++++++++++++- .../remote/create/src/output/Preview.vue | 1 + 6 files changed, 493 insertions(+), 47 deletions(-) diff --git a/src/api/application/layer.ts b/src/api/application/layer.ts index 28ba5e2..7a9d808 100644 --- a/src/api/application/layer.ts +++ b/src/api/application/layer.ts @@ -13,6 +13,8 @@ enum Api { TempeleteByTableName = '/api/Layer/TempeleteByTableName', // 更新单条数据 UpdateTableData = '/api/Layer/UpdateTableData', + // 添加单条数据 + AddTableData = '/api/Layer/AddTableData', // 上传样式 UploadSldStyle = '/api/Layer/UploadSldStyle', } @@ -23,6 +25,7 @@ export function tableDataByTableName(params: TableDataByTableNameParams) { return defHttp.get({ url: Api.TableDataByTableName, params }); } + /** * @description: 编辑打卡点 */ @@ -32,6 +35,17 @@ export function updateTableData(params: any) { params, }); } + +/** + * @description: 编辑图斑 + */ + export function addTableData(params: any) { + return defHttp.post({ + url: Api.AddTableData, + params, + }); +} + /** * @description: 下载模板 */ diff --git a/src/views/demo/layer/LayerTree.vue b/src/views/demo/layer/LayerTree.vue index 30f3604..cd5ebc2 100644 --- a/src/views/demo/layer/LayerTree.vue +++ b/src/views/demo/layer/LayerTree.vue @@ -15,6 +15,7 @@ :clickRowToExpand="false" :checkable="true" @check="handleCheck" + @change="handleChange" :treeData="treeData" :fieldNames="{ key: 'id', title: 'applicationName', children: 'child' }" :defaultExpandAll="true" @@ -33,7 +34,7 @@ import { deleteLayer } from '@/api/sys/layerManagement'; const { createMessage, createConfirm } = useMessage(); - const emit = defineEmits(['select', 'edit', 'add', 'remove']); + const emit = defineEmits(['select', 'edit', 'add', 'remove','checked']); defineOptions({ name: 'DeptTree' }); const treeData = ref([]); @@ -48,6 +49,8 @@ }); }); }, 500); + + // 展开全部 nextTick(() => { unref(asyncExpandTreeRef)?.expandAll(true); @@ -60,7 +63,15 @@ selectItem.value = item; } function handleCheck(checkedKeys, e) { + console.log('onChecked', checkedKeys, e); + + emit("checked",checkedKeys); + + } + + function handleChange(key,e){ + console.log(key,e); } /** * 根据id值或某个属性的值从树结构中查询数据 diff --git a/src/views/demo/layer/data.ts b/src/views/demo/layer/data.ts index 771fe65..73294e4 100644 --- a/src/views/demo/layer/data.ts +++ b/src/views/demo/layer/data.ts @@ -64,7 +64,7 @@ export const formSchema: FormSchema[] = [ }, }, { - field: 'serverId', + field: 'tablename', component: 'ApiSelect', label: '空间数据表', required: true, diff --git a/src/views/demo/layer/geometryHandler.ts b/src/views/demo/layer/geometryHandler.ts index 12159dd..d10f05a 100644 --- a/src/views/demo/layer/geometryHandler.ts +++ b/src/views/demo/layer/geometryHandler.ts @@ -106,6 +106,179 @@ const EditDrawingGeometry = (map,geometry) => { flyTo: true }) + map.addLayer(drawingGraphicLayer) + + // 绑定菜单 + geometryBindMenu(); +} + +// 添加图斑 +const AddDrawingGeometry = (map,type) => { + + // 加载图层 + if(drawingGraphicLayer){ + drawingGraphicLayer.clear(); + map.removeLayer(drawingGraphicLayer); + drawingGraphicLayer = null; + } + + let geojson = { + "type": "FeatureCollection", + "features": [] + } + + drawingGraphicLayer = new mars3d.layer.GeoJsonLayer({ + name: "编辑图层", + data:geojson, + isAutoEditing:true, + symbol: { + styleOptions: { + color: "#0d3685", + outlineColor: "#0d3685", + opacity: 0.8, + clampToGround:true, + "color": "#2f00b0", + "pixelSize": 10, + "opacity": 1, + "outline": true, + "outlineColor": "#ffffff", + "outlineOpacity": 0.6, + "outlineWidth": 2, + "scaleByDistance_far": 1000000, + "scaleByDistance_farValue": 0.1, + "scaleByDistance_near": 1000, + "scaleByDistance_nearValue": 1, + "distanceDisplayCondition_far": 10000, + "visibleDepth": true + } + }, + popup: [], + popupOptions: { + showNull: true + }, + flyTo: true + }) + + map.addLayer(drawingGraphicLayer); + + // 开始绘制 + switch(type){ + case "point": + drawingGraphicLayer.startDraw({ + type: "pointP", + style: { + pixelSize: 12, + color: "#3388ff", + label: { + // 不需要文字时，去掉label配置即可 + text: "", + font_size: 20, + color: "#ffffff", + outline: true, + outlineColor: "#000000", + pixelOffsetY: -20 + } + } + }) + break; + + case "polygon": + // 贴地面 + drawingGraphicLayer.startDraw({ + type: "polygonP", + style: { + color: "#3388ff", + opacity: 0.5, + outline: true, + outlineColor: "#ffffff", + outlineWidth: 2.0, + clampToGround:true + } + }) + break; + + case "polyline": + drawingGraphicLayer.startDraw({ + type: "polylineP", + style: { + color:"#3388ff", + width: 3, + clampToGround:true + } + }) + break; + } + + + geometryBindMenu(); + +} + +// 查看图斑 +const PreviewDrawingGeometry = (map,geometry) => { + // 获取geojson + let geojson = null; + + if(typeof geometry == 'string'){ + let jsonData = WktToGeojson(geometry) + + geojson = { + "type": "FeatureCollection", + "features": [ + { + "type": "Feature", + "geometry": jsonData + } + ] + } + } + + if(drawingGraphicLayer){ + drawingGraphicLayer.clear(); + map.removeLayer(drawingGraphicLayer); + drawingGraphicLayer = null; + } + + // 加载图层 + drawingGraphicLayer = new mars3d.layer.GeoJsonLayer({ + name: "编辑图层", + data:geojson, + isAutoEditing:true, + symbol: { + styleOptions: { + color: "#0d3685", + outlineColor: "#0d3685", + opacity: 0.8, + clampToGround:true, + "color": "#2f00b0", + "pixelSize": 10, + "opacity": 1, + "outline": true, + "outlineColor": "#ffffff", + "outlineOpacity": 0.6, + "outlineWidth": 2, + "scaleByDistance_far": 1000000, + "scaleByDistance_farValue": 0.1, + "scaleByDistance_near": 1000, + "scaleByDistance_nearValue": 1, + "distanceDisplayCondition_far": 10000, + "visibleDepth": true + } + }, + popup: [], + popupOptions: { + showNull: true + }, + flyTo: true + }) + + map.addLayer(drawingGraphicLayer) + +} + +// 图斑菜单 +const geometryBindMenu = () => { + // 绑定菜单 drawingGraphicLayer.bindContextMenu([ { text: "开始编辑对象", @@ -206,8 +379,7 @@ const EditDrawingGeometry = (map,geometry) => { } } ]) - map.addLayer(drawingGraphicLayer) - + // 获取编辑结果 drawingGraphicLayer.on(mars3d.EventType.editStop, function (e) { let resultGeojson = e.graphic.toGeoJSON({standard:true,noAlt:true}) @@ -216,34 +388,21 @@ const EditDrawingGeometry = (map,geometry) => { EventBus.emit("editLayerEnd",resultWkt) }) - // -} + // 绘制完成 + drawingGraphicLayer.on(mars3d.EventType.drawCreated, function (e) { -// 添加图斑 -const AddDrawingGeometry = (map) => { - -} - -// 查看图斑 -const DetailDrawingGeometryy = (map,geometry) => { - // 获取geojson - let geojson = null; - - if(typeof geometry == 'string'){ - let jsonData = WktToGeojson(geometry) - - geojson = { - "type": "FeatureCollection", - "features": [ - { - "type": "Feature", - "geometry": jsonData - } - ] + + let resultGeojson = e.graphic.toGeoJSON({standard:true,noAlt:true}) + + if(resultGeojson.geometry.type == "Polygon"){ + resultGeojson.geometry.coordinates [0].push(resultGeojson.geometry.coordinates [0][0]) } - } + console.log("resultGeoJson",resultGeojson); - + let resultWkt = GeojsonToWkt(resultGeojson.geometry) + + EventBus.emit("editLayerEnd",resultWkt) + }) } // 结束停止编辑 @@ -252,4 +411,4 @@ const DrawingEnd = () => { } -export {WktToGeojson,GeojsonToWkt,GetGeometryCenter,EditDrawingGeometry,AddDrawingGeometry,DrawingEnd} \ No newline at end of file +export {WktToGeojson,GeojsonToWkt,GetGeometryCenter,EditDrawingGeometry,AddDrawingGeometry,PreviewDrawingGeometry,DrawingEnd} \ No newline at end of file diff --git a/src/views/demo/layer/index.vue b/src/views/demo/layer/index.vue index 35b6b68..dbc0fec 100644 --- a/src/views/demo/layer/index.vue +++ b/src/views/demo/layer/index.vue @@ -6,6 +6,7 @@ @select="handleSelect" @edit="editLayer" @add="addLayer" + @checked="checkedLayer" @remove="tableVisible = false" />
@@ -24,6 +25,30 @@ style="width: 200px; margin-right: 10px" /> 查询 + + + + + 添加 + + + + 导出模版
-
+
{ globalMap = map; } - + EventBus.on("editLayerEnd",function(e){ - formState.value.geom = e; - - console.log("formState",formState.value); }) + // 加载图层 + const handlerLoadLayer = (record) => { + + // + let layer = globalMap.getLayerById(record.id); + + if(layer){ + layer.show = !layer.show + }else{ + + let tileLayer = new mars3d.layer.WmsLayer({ + name: "合肥WMS", + url: "http://192.168.10.163:8080/geoserver/my_workspace/wms", + layers: "my_workspace:fm_waterresourcetest", + parameters: { + transparent: true, + format: "image/png" + }, + getFeatureInfoParameters: { + feature_count: 10 + }, + // 单击高亮及其样式 + highlight: { + type: "wallP", + diffHeight: 100, + materialType: mars3d.MaterialType.LineFlow, + materialOptions: { + image: "https://data.mars3d.cn/img/textures/fence.png", + color: "#ffff00", + speed: 10, // 速度，建议取值范围1-100 + axisY: true + } + }, + popup: "all", + flyTo: true + }) + globalMap.addLayer(tileLayer); + let drawingGraphicLayer = new mars3d.layer.GeoJsonLayer({ + id:record.id, + name: "编辑图层", + data:{ + "type": "FeatureCollection", + "features": [ + { + "type": "Feature", + "id": "fm_fireproofbarracks.4", + "geometry": { + "type": "Point", + "coordinates": [118.037111, 35.402398] + }, + "geometry_name": "geom", + "properties": { + "Name": "4号防火驿站", + "Info": null, + "Lng": null, + "Lat": null, + "State": "1", + "UpdateTime": null + } + }, + { + "type": "Feature", + "id": "fm_fireproofbarracks.5", + "geometry": { + "type": "Point", + "coordinates": [118.032671, 35.406068] + }, + "geometry_name": "geom", + "properties": { + "Name": "5号防火驿站", + "Info": null, + "Lng": null, + "Lat": null, + "State": "1", + "UpdateTime": null + } + }, + { + "type": "Feature", + "id": "fm_fireproofbarracks.2", + "geometry": { + "type": "Point", + "coordinates": [118.044773, 35.398101] + }, + "geometry_name": "geom", + "properties": { + "Name": "2号防火驿站", + "Info": null, + "Lng": null, + "Lat": null, + "State": "1", + "UpdateTime": null + } + }, + { + "type": "Feature", + "id": "fm_fireproofbarracks.1", + "geometry": { + "type": "Point", + "coordinates": [118.046801, 35.397552] + }, + "geometry_name": "geom", + "properties": { + "Name": "1号防火驿站", + "Info": null, + "Lng": null, + "Lat": null, + "State": "1", + "UpdateTime": null + } + }, + { + "type": "Feature", + "id": "fm_fireproofbarracks.3", + "geometry": { + "type": "Polygon", + "coordinates": [ + [ + [118.196381, 35.356013], + [118.196421, 35.356022], + [118.196433, 35.355985], + [118.196331, 35.35596], + [118.196339, 35.355921], + [118.19644, 35.355946], + [118.196449, 35.355921], + [118.196347, 35.355897], + [118.196355, 35.355847], + [118.196409, 35.355859], + [118.19646, 35.355871], + [118.196468, 35.355842], + [118.196365, 35.355819], + [118.196316, 35.355808], + [118.196307, 35.355846], + [118.196294, 35.355908], + [118.196277, 35.355979], + [118.196381, 35.356013] + ] + ] + }, + "geometry_name": "geom", + "properties": { + "Name": "3号防火驿站", + "Info": null, + "Lng": null, + "Lat": null, + "State": "1", + "UpdateTime": null + } + } + ], + "totalFeatures": 5, + "numberMatched": 5, + "numberReturned": 5, + "timeStamp": "2025-04-29T03:03:26.650Z", + "crs": { + "type": "name", + "properties": { + "name": "urn:ogc:def:crs:EPSG::404000" + } + } + }, + isAutoEditing:true, + symbol: { + styleOptions: { + color: "#0d3685", + outlineColor: "#0d3685", + opacity: 0.8, + clampToGround:true, + "color": "#2f00b0", + "pixelSize": 10, + "opacity": 1, + "outline": true, + "outlineColor": "#ffffff", + "outlineOpacity": 0.6, + "outlineWidth": 2, + "scaleByDistance_far": 1000000, + "scaleByDistance_farValue": 0.1, + "scaleByDistance_near": 1000, + "scaleByDistance_nearValue": 1, + "distanceDisplayCondition_far": 10000, + "visibleDepth": true + } + }, + popup: [], + popupOptions: { + showNull: true + }, + flyTo: true + }) + // globalMap.addLayer(drawingGraphicLayer); + } + + + } + const { VITE_GLOB_API_URL } = getAppEnvConfig(); const { createConfirm, createMessage } = useMessage(); const showTable = ref(''); @@ -270,22 +487,51 @@ tableName: tableName.value, list: [], }; + + for (const key in formState.value) { params.list.push({ name: key, value: formState.value[key], }); } - updateTableData(params).then((res) => { - console.log('res', res); - if (res) { - createMessage.success('编辑成功!'); - DrawingEnd(); - showTable.value = ''; - } else { - createMessage.error('编辑失败!'); - } - }); + + + if(showTable.value == 'edit'){ + updateTableData(params).then((res) => { + console.log('res', res); + if (res) { + createMessage.success('编辑成功!'); + DrawingEnd(); + showTable.value = ''; + } else { + createMessage.error('编辑失败!'); + } + }); + }else if(showTable.value == 'add'){ + + params.list = []; + + headData.value?.forEach((item,index)=>{ + params.list.push({ + name: item, + value: formState.value[item] ? formState.value[item] : null, + }); + }) + console.log("params",params.list); + + addTableData(params).then((res) => { + console.log('res', res); + if (res) { + createMessage.success('添加成功!'); + DrawingEnd(); + showTable.value = ''; + } else { + createMessage.error('添加失败!'); + } + }); + } + }) .catch((error: ValidateErrorEntity) => { console.log('error', error); @@ -297,6 +543,8 @@ }; const handleSelect = (record) => { + + tableName.value = record.serverId; tableVisible.value = true; keyWord.value = null; @@ -316,9 +564,21 @@ isUpdate: false, }); }; + const checkedLayer = (e) => { + console.log("e",e); + handlerLoadLayer(e); + } + + const hanlerLoadLayer = () => { + + } const handleSuccess = () => { treeRef.value.fetch(); }; + const addData = (type) => { + AddDrawingGeometry(globalMap,type); + showTable.value = 'add'; + } const editData = (record) => { selectVal.value = record; formState.value = record; @@ -328,6 +588,7 @@ }; const viewData = (record) => { console.log('record', record); + PreviewDrawingGeometry(globalMap,record.geom); selectVal.value = record; formState.value = record; showTable.value = 'detail'; diff --git a/src/views/project/remote/create/src/output/Preview.vue b/src/views/project/remote/create/src/output/Preview.vue index 105598a..2c1a94e 100644 --- a/src/views/project/remote/create/src/output/Preview.vue +++ b/src/views/project/remote/create/src/output/Preview.vue @@ -329,6 +329,7 @@ function reload() { sandbox.contentWindow?.location.reload() } + defineExpose({ reload }) From 2a5e9e48b045cef3aa47b3c5233cbd308cea7d45 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=BB=95=E5=B5=A9?= <17854119262@163.com> Date: Wed, 7 May 2025 11:15:36 +0800 Subject: [PATCH 2/4] =?UTF-8?q?=E8=A7=86=E9=A2=91=E7=BB=84=E4=BB=B6-?= =?UTF-8?q?=E8=A7=A3=E5=86=B3=E5=85=B6=E4=BB=96=E8=A7=86=E9=A2=91=E6=BA=90?= =?UTF-8?q?=E5=85=A8=E5=B1=8F=E5=90=8E=EF=BC=8C=E6=B5=B7=E5=BA=B7=E7=BB=84?= =?UTF-8?q?=E4=BB=B6=E8=BF=98=E6=98=AF=E6=98=BE=E7=A4=BA=E7=9A=84bug?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Zhigan/ZhiGan_SheXiangTouModal/index.vue | 44 ++++++++++++++++++- .../video/monitorHK.vue | 16 +++++++ .../video/monitorLC.vue | 24 +++++++++- .../video/monitorQX.vue | 21 ++++++++- .../video/monitorTX.vue | 20 ++++++++- .../ZhiGan_WuRenJiShiShiHuaMian/index.vue | 32 ++++++++++++++ .../video/monitorHK.vue | 16 +++++++ .../video/monitorLC.vue | 20 ++++++++- .../video/monitorQX.vue | 20 +++++++++ .../video/monitorTX.vue | 35 +++++++++++---- 10 files changed, 233 insertions(+), 15 deletions(-) diff --git a/src/packages/components/Zhigan/Zhigan/ZhiGan_SheXiangTouModal/index.vue b/src/packages/components/Zhigan/Zhigan/ZhiGan_SheXiangTouModal/index.vue index a299760..cc5efb4 100644 --- a/src/packages/components/Zhigan/Zhigan/ZhiGan_SheXiangTouModal/index.vue +++ b/src/packages/components/Zhigan/Zhigan/ZhiGan_SheXiangTouModal/index.vue @@ -105,6 +105,7 @@ preview-disabled />
@@ -345,8 +352,18 @@ // 隐藏弹窗 function hideModal() { - option.videoList = [{}]; option.status.hide = true; + switch (option.dataStyle.nowType) { + case '1': + option.videoList = [{}]; + break; + case '4': + option.videoList = [{}, {}, {}, {}]; + break; + case '9': + option.videoList = [{}, {}, {}, {}, {}, {}, {}, {}, {}]; + break; + } } // 修改视频 @@ -393,6 +410,31 @@ } } + // 其他视频组件全屏，隐藏海康视频组件 + const monitorRefs: any = ref([]); + let monitorHKList: any = []; + function setMonitorRef(el, index) { + monitorHKList.push(index); + monitorHKList = [...new Set(monitorHKList)]; + monitorRefs.value[index] = el; + } + // 隐藏海康视频组件 + function hideHKVideo() { + monitorHKList.forEach((index) => { + if (monitorRefs.value[index]?.hideHkVideo) { + monitorRefs.value[index].hideHkVideo(); + } + }); + } + // 展示被隐藏的海康视频组件 + function showHKVideo() { + monitorHKList.forEach((index) => { + if (monitorRefs.value[index]?.hideHkVideo) { + monitorRefs.value[index].showHkVideo(); + } + }); + } + // 初始化视频控件 onMounted(() => { // 用于规避视频id重复 diff --git a/src/packages/components/Zhigan/Zhigan/ZhiGan_SheXiangTouModal/video/monitorHK.vue b/src/packages/components/Zhigan/Zhigan/ZhiGan_SheXiangTouModal/video/monitorHK.vue index bdae559..cd48ed5 100644 --- a/src/packages/components/Zhigan/Zhigan/ZhiGan_SheXiangTouModal/video/monitorHK.vue +++ b/src/packages/components/Zhigan/Zhigan/ZhiGan_SheXiangTouModal/video/monitorHK.vue @@ -183,6 +183,20 @@ } } + // 标签显示 + function showHkVideo() { + if (oWebControl != null) { + oWebControl.JS_ShowWnd(); + } + } + + // 标签隐藏 + function hideHkVideo() { + if (oWebControl != null) { + oWebControl.JS_HideWnd(); + } + } + // 重定大小 function reSizeVideo() { // 实际宽高 @@ -278,6 +292,8 @@ initPlugin, init, closeHkVideo, + showHkVideo, + hideHkVideo, }); diff --git a/src/packages/components/Zhigan/Zhigan/ZhiGan_SheXiangTouModal/video/monitorLC.vue b/src/packages/components/Zhigan/Zhigan/ZhiGan_SheXiangTouModal/video/monitorLC.vue index 0017bd5..2ae6a61 100644 --- a/src/packages/components/Zhigan/Zhigan/ZhiGan_SheXiangTouModal/video/monitorLC.vue +++ b/src/packages/components/Zhigan/Zhigan/ZhiGan_SheXiangTouModal/video/monitorLC.vue @@ -32,7 +32,11 @@
-
+
@@ -118,7 +122,7 @@ 'timestamp', 'dataStyle', ]); - const emit = defineEmits(['changeThisVideo', 'closeThisVideo']); + const emit = defineEmits(['changeThisVideo', 'closeThisVideo', 'hideHKVideo', 'showHKVideo']); let clPlayer: any = null; @@ -161,6 +165,22 @@ // 全屏 function fullScreenClick() { clPlayer.fullScreen(); + // 隐藏海康视频 + emit('hideHKVideo'); + // 开始检查宽度，全屏继续检查，非全屏后展示隐藏的海康视频 + setTimeout(checkSize, 1000); + } + + // 开始检查宽度，全屏继续检查，非全屏展示隐藏的海康视频 + function checkSize() { + const element = document.querySelector('.LCPlayer-video-contaiiner'); + const currentWidth = element.offsetWidth; + // 设置下一次检查 + if (currentWidth > props.width) { + setTimeout(checkSize, 1000); + } else { + emit('showHKVideo'); + } } // 获取kitToken diff --git a/src/packages/components/Zhigan/Zhigan/ZhiGan_SheXiangTouModal/video/monitorQX.vue b/src/packages/components/Zhigan/Zhigan/ZhiGan_SheXiangTouModal/video/monitorQX.vue index 721069f..80ef3b7 100644 --- a/src/packages/components/Zhigan/Zhigan/ZhiGan_SheXiangTouModal/video/monitorQX.vue +++ b/src/packages/components/Zhigan/Zhigan/ZhiGan_SheXiangTouModal/video/monitorQX.vue @@ -48,9 +48,10 @@