From a4acaeed2f3be28a21f072f70985e34d3e4721a2 Mon Sep 17 00:00:00 2001 From: Fuyuu <1805498209@qq.com> Date: Thu, 11 Jan 2024 15:56:39 +0800 Subject: [PATCH] =?UTF-8?q?=E5=B0=86EarthComp=E7=BB=84=E4=BB=B6=E4=B8=AD?= =?UTF-8?q?=EF=BC=8C=E6=B7=BB=E5=8A=A0=E6=A8=A1=E5=9E=8B=E9=80=89=E9=A1=B9?= =?UTF-8?q?=E4=B8=AD=E7=9A=84=E5=9B=9B=E7=A7=8D=E7=B1=BB=E5=9E=8B=EF=BC=88?= =?UTF-8?q?=E5=8C=BA=E5=9F=9F=E3=80=81=E7=9B=91=E6=8E=A7=E7=82=B9=E3=80=81?= =?UTF-8?q?=E5=BE=AE=E6=B3=A2=E3=80=81=E9=9B=B7=E8=BE=BE=EF=BC=89=E5=8D=95?= =?UTF-8?q?=E7=8B=AC=E6=8A=BD=E7=A6=BB=E5=87=BA=E6=9D=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/earthMap/Toolbar.vue | 287 +- .../earthMap/toolbar/AddModelWin.vue | 2714 +++++++++-------- .../earthMap/toolbar/AddMonitorPointCom.vue | 521 ++++ .../earthMap/toolbar/AddRadarCom.vue | 638 ++++ .../earthMap/toolbar/AddWaveCom.vue | 542 ++++ src/utils/earthMap/earthObj.ts | 1 + src/views/earthMap/edit/EarthComp.vue | 7 +- 7 files changed, 3359 insertions(+), 1351 deletions(-) create mode 100644 src/components/earthMap/toolbar/AddMonitorPointCom.vue create mode 100644 src/components/earthMap/toolbar/AddRadarCom.vue create mode 100644 src/components/earthMap/toolbar/AddWaveCom.vue diff --git a/src/components/earthMap/Toolbar.vue b/src/components/earthMap/Toolbar.vue index bf6e818..ed8462f 100644 --- a/src/components/earthMap/Toolbar.vue +++ b/src/components/earthMap/Toolbar.vue @@ -44,7 +44,6 @@

-
@@ -74,6 +73,10 @@

添加模型

路径巡检

管控区域

+

添加区域

+

添加监控点

+

添加微波探测

+

添加雷达

@@ -86,6 +89,12 @@
+ + + + + + @@ -123,6 +132,9 @@ import drawShapeIMG from '@/assets/earthMap/toolbar/drawShapeIMG.png'; import drawShapeMilitaryIMG from '@/assets/earthMap/toolbar/drawShapeMilitaryIMG.png'; + import AddMonitorPointCom from '@/components/earthMap/toolbar/AddMonitorPointCom.vue'; + import AddWaveCom from '@/components/earthMap/toolbar/AddWaveCom.vue'; + import AddRadarCom from '@/components/earthMap/toolbar/AddRadarCom.vue'; // import mitt from '/@/utils/mitt'; import $mitt from '@/utils/earthMap/mitt'; import { defHttp } from '/@/utils/http/axios'; @@ -146,6 +158,9 @@ DrawShape, DrawShapeMilitary, KeyControlAreaList, + AddMonitorPointCom, + AddWaveCom, + AddRadarCom, }, setup(props) { const { proxy }: any = getCurrentInstance(); @@ -181,6 +196,12 @@ const drawShapePackage: any = ref(null); const drawShapeMilitaryShow = ref(false); + // 监控点弹窗 + const addMonitorPointComShow = ref(false); + // 微波弹窗 + const addWaveComShow = ref(false); + // 雷达弹窗 + const addRadarComShow = ref(false); //计算属性 const title = computed(() => { return ''; @@ -234,9 +255,9 @@ warnInfoMan(); }); //调用绘画组件，res.show为展示状态,res为传递数据 - $mitt.on('drawShapeShow', function (res:any) { + $mitt.on('drawShapeShow', function (res: any) { drawShapeShow.value = res.show; - drawShapePackage.value = res + drawShapePackage.value = res; }); } //数据绑定 @@ -946,17 +967,19 @@ //绘画图形 function drawShape() { //基本绘图没有被使用中，则关闭 - if(drawShapeMilitaryShow.value && store.shapeUsing == false) - {drawShapeMilitaryShow.value = false} + if (drawShapeMilitaryShow.value && store.shapeUsing == false) { + drawShapeMilitaryShow.value = false; + } //清空数据 - drawShapePackage.value = null + drawShapePackage.value = null; drawShapeShow.value = !drawShapeShow.value; } //绘画图形-军事态势 function drawShapeMilitary() { //基本绘图没有被使用中，则关闭 - if(drawShapeShow.value && store.shapeUsing == false) - {drawShapeShow.value = false} + if (drawShapeShow.value && store.shapeUsing == false) { + drawShapeShow.value = false; + } drawShapeMilitaryShow.value = !drawShapeMilitaryShow.value; } @@ -1051,6 +1074,246 @@ // ) } + // 添加监控点 + function addMonitorPoint() { + addMonitorPointComShow.value = true; + } + // 添加微波 + function addWave() { + addWaveComShow.value = true; + } + // 添加雷达 + function addRadar() { + addRadarComShow.value = true; + } + // 添加区域 + function addArea() { + $mitt.emit('drawShapeShow', { show: true, title: '区域创建工具', from: 'addArea' }); + $mitt.on('addAreaFinished', (t: any) => { + console.log('addAreaFinished', t); + //t 为drawShape传过来的临时图形 + t.creating = true; + // 监控t数据，完成创建后调用后续方法 + window.XE.MVVM.watch(t, 'creating', (n: any) => { + console.log('creating', n); + if (n == false) { + //面 + let positions: any = []; + if (t._polygon) { + positions = t._polygon._polyline.positions; + } + //线 + else if (t._polyline) { + positions = t._polyline.positions; + } else { + positions = t.positions; + } + //销毁临时图形 + t.destroy(); + /** + * 控制时序，处理完数据再调用方法 addPolyline + * 否则会出现在数据滞后在图形创建时，导致数据错误 + * + */ + nextTick(() => { + addPolyline(positions); + }); + } + }); + }); + } + /** + * @params 需要调用 addArea 方法进行绘图，获取坐标点position + */ + function addPolyline(positions: any = null) { + // 关闭此窗体 + // cancel(); + // 创建区域 + const currentModel = new window.XE.Obj.Polyline(window.$earth); + // 设置配置参数 + const objConfig = { + positions: positions, + }; + // 插入数据 + currentModel.xbsjFromJSON(objConfig); + console.log('currentModel', currentModel); + // 获取地图ui对象 + const earthUI = window.$uia; + // 打开一个区域编辑ui窗体 + earthUI.showPropertyWindow(currentModel); + nextTick(() => { + // 主要ui窗口 + const mainUI = earthUI._vm.$refs.mainUI; + // 所有打开的ui窗口Ref值 + const windowsAttrList = Object.keys(mainUI.$refs); + // 寻找当前窗体的工具对象 + const modelToolKey = windowsAttrList.filter((f) => f.indexOf(currentModel.guid) > -1)[0]; + const modelTool = mainUI.$refs[modelToolKey][0]; + // 当前窗体的元素 + const el = modelTool.$el; + //样式 + el.children[2].style.padding = '0px'; + el.children[2].style.transition = 'none'; + // 取消按钮元素 + const cancelBtn = el.children[3].children[0]; + // 确认按钮元素 + const okBtn = el.children[3].children[1]; + // 设置确认按钮点击事件 + okBtn.onclick = function () { + $mitt.emit('windowCancel'); + // 提交对象 + const submitData: any = {}; + // 路径为空，无法提交 + const poistions = currentModel.positions; + if (poistions.length <= 0) { + createMessage.warning('路径为空，无法创建', 2); + return; + } + // 模型名称 + submitData.name = currentModel.name; + // 线段编码 + submitData.lineCode = currentModel.guid; + // 首尾相连属性 + submitData.isLoop = Number(currentModel.loop); + // 深度检查 + submitData.isDepthCheck = Number(currentModel.depthTest); + // 宽度 + submitData.width = currentModel.width; + // 插值方式 + submitData.interpolation = currentModel.arcType; + // 路径数组 + submitData.positions = JSON.stringify(poistions); + // 材质类型 + switch (currentModel.material.type) { + // 实线 + case 'XbsjColorMaterial': + // 实线材质0 + submitData.materialType = 0; + // 线段颜色 + submitData.color = JSON.stringify(currentModel.material.XbsjColorMaterial.color); + // 以下为没有属性，所以赋予默认值 + submitData.intervalColor = null; + submitData.dashLength = 0; + submitData.dashStyle = 0; + break; + // 虚线 + case 'XbsjPolylineDashMaterial': + // 虚线材质1 + submitData.materialType = 1; + // 线段颜色 + submitData.color = JSON.stringify(currentModel.material.XbsjPolylineDashMaterial.color); + // 间隔颜色 + submitData.intervalColor = JSON.stringify(currentModel.material.XbsjPolylineDashMaterial.gapColor); + // 虚线长度 + submitData.dashLength = currentModel.material.XbsjPolylineDashMaterial.dashLength; + // 虚线样式 + submitData.dashStyle = currentModel.material.XbsjPolylineDashMaterial.dashPattern; + break; + // 箭头线 + case 'XbsjPolylineArrowMaterial': + // 箭头线2 + submitData.materialType = 2; + // 线段颜色 + submitData.color = JSON.stringify(currentModel.material.XbsjPolylineArrowMaterial.color); + // 以下为没有的属性 + submitData.intervalColor = null; + submitData.dashLength = 0; + submitData.dashStyle = 0; + break; + // 轨迹线 + case 'XbsjODLineMaterial': + // 轨迹线 + submitData.materialType = 3; + // 线段颜色 + submitData.color = JSON.stringify(currentModel.material.XbsjODLineMaterial.color); + // 没有的属性 + submitData.intervalColor = null; + submitData.dashLength = 0; + submitData.dashStyle = 0; + // 循环周期 + submitData.cycleFrame = currentModel.material.XbsjODLineMaterial.totoalFrameCount; + break; + } + // 提交区域数据 + defHttp + .post({ url: '/military/msMapLine/add', params: submitData }, { isTransformResponse: false }) + .then((response) => { + // 成功后挂载节点到树中 + if (response.success) { + // 生成叶子节点 + const leaf = new window.XE.SceneTree.Leaf(currentModel); + // 设置叶子节点标识 + leaf.ref = response.result; + // 挂载上树 + window.$earth.sceneTree.root.children.push(leaf); + // 隐藏叶子节点的dom节点 + nextTick(() => { + $('#earthContainer>div>div>div:nth-child(5)') + .children('div') + .eq(1) + .children() + .eq(0) + .children() + .eq(0) + .children() + .each((index, element) => { + if (index <= 1) { + return; + } + const paddingLeft = $(element).children().eq(0).css('padding-left'); + if (paddingLeft === '10px') { + $(element).css('display', 'none'); + } + }); + }); + // 生成显示在树上的节点，此为虚假的节点，关联关系为ref一个为 node_ref 一个为ref + const node = { + ref: 'node_' + response.result, + title: currentModel.name, + expand: false, + children: [ + { + expand: false, + title: '监控点位', + ref: 'monitor_' + window.guid(), + children: [], + }, + { + expand: false, + title: '雷达点位', + ref: 'ldList_' + window.guid(), + children: [], + }, + { + expand: false, + title: '微波点位', + ref: 'wbList_' + window.guid(), + children: [], + }, + ], + }; + // 挂载并显示到树上 + window.$earth.sceneTree.$refs.areas.children.push(node); + } else { + throw '新增区域数据出错'; + } + }) + .catch((e) => { + createMessage.error('新增区域数据出错', 2); + }); + }; + // 取消按钮 + cancelBtn.onclick = function () { + $mitt.off('windowCancel'); + // 消耗当前窗体的dom节点 + el.remove(); + // 消耗当前创建的对象 + currentModel.destroy(); + }; + }); + return currentModel; + } + onBeforeUnmount(() => { // vue程序销毁时，需要清理相关资源 proxy._disposers.forEach((d) => d()); @@ -1061,7 +1324,6 @@ $mitt.off('warnInfoMan'); }); - return { show, title, @@ -1121,7 +1383,14 @@ openCreateModel, drawShape, drawShapeMilitary, + addMonitorPoint, + addWave, + addRadar, + addArea, addModelWinShow, + addMonitorPointComShow, + addWaveComShow, + addRadarComShow, roamPathListShow, keyControlAreaListShow, notificationModelShow, diff --git a/src/components/earthMap/toolbar/AddModelWin.vue b/src/components/earthMap/toolbar/AddModelWin.vue index 54c10f2..d74f4da 100644 --- a/src/components/earthMap/toolbar/AddModelWin.vue +++ b/src/components/earthMap/toolbar/AddModelWin.vue @@ -1,7 +1,19 @@ diff --git a/src/components/earthMap/toolbar/AddMonitorPointCom.vue b/src/components/earthMap/toolbar/AddMonitorPointCom.vue new file mode 100644 index 0000000..c0a1014 --- /dev/null +++ b/src/components/earthMap/toolbar/AddMonitorPointCom.vue @@ -0,0 +1,521 @@ + + + + + diff --git a/src/components/earthMap/toolbar/AddRadarCom.vue b/src/components/earthMap/toolbar/AddRadarCom.vue new file mode 100644 index 0000000..3311a50 --- /dev/null +++ b/src/components/earthMap/toolbar/AddRadarCom.vue @@ -0,0 +1,638 @@ + + + + diff --git a/src/components/earthMap/toolbar/AddWaveCom.vue b/src/components/earthMap/toolbar/AddWaveCom.vue new file mode 100644 index 0000000..b479e4a --- /dev/null +++ b/src/components/earthMap/toolbar/AddWaveCom.vue @@ -0,0 +1,542 @@ + + + + diff --git a/src/utils/earthMap/earthObj.ts b/src/utils/earthMap/earthObj.ts index 18faf80..5f1b5d3 100644 --- a/src/utils/earthMap/earthObj.ts +++ b/src/utils/earthMap/earthObj.ts @@ -764,6 +764,7 @@ export const addPin = (name, url, options) => { if (options.far) { objConfig.far = options.far; } + pin.xbsjFromJSON(objConfig); return pin; diff --git a/src/views/earthMap/edit/EarthComp.vue b/src/views/earthMap/edit/EarthComp.vue index 83d302d..7029300 100644 --- a/src/views/earthMap/edit/EarthComp.vue +++ b/src/views/earthMap/edit/EarthComp.vue @@ -1979,7 +1979,7 @@ } let pickedFeature = this._viewer.scene.pick(click.position); - console.log('点击的船只:', pickedFeature); + // console.log('点击的船只:', pickedFeature); if (pickedFeature && pickedFeature.id) { // 三维模型 @@ -2052,16 +2052,19 @@ JSON.parse(pickedFeature.id._xbsjOwner.customProp).labelAttr == '4' ) { let labelCode = JSON.parse(pickedFeature.id._xbsjOwner.customProp).labelCode; - console.log(pickedFeature.id._xbsjOwner); + console.log('点击雷达：', pickedFeature.id._xbsjOwner); if (pickedFeature.id._xbsjOwner.addViewShedReturn) { //显示/不显示雷达扫码效果 // pickedFeature.id._xbsjOwner.addViewShedReturn.show = !pickedFeature.id._xbsjOwner.addViewShedReturn.show; // console.log("pickedFeature.id._xbsjOwner.addViewShedReturn",pickedFeature.id._xbsjOwner.addViewShedReturn); //清空当前雷达，并将该方法指向undefined(清空) + console.log('关闭扫描'); + pickedFeature.id._xbsjOwner.addViewShedReturn.clear(); pickedFeature.id._xbsjOwner.addViewShedReturn = undefined; } else { + console.log('打开扫描'); defHttp.get({ url: this.url.radarList, params: { radarCode: labelCode } }, { isTransformResponse: false }).then((res) => { if (res.success) { if (res.result.records.length > 0) {