From 41242a56cff388bf5c1085e1fabc72610e31131b Mon Sep 17 00:00:00 2001
From: Fuyuu <1805498209@qq.com>
Date: Fri, 12 Jan 2024 18:07:30 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E5=9C=B0=E5=9B=BE=E5=85=83?=
 =?UTF-8?q?=E7=B4=A0=E6=98=BE=E9=9A=90=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/earthMap/AISInfoWindow.vue     |  22 ++-
 src/components/earthMap/ShowHideControl.vue   | 158 ++++++++++++++++++
 src/components/earthMap/Toolbar.vue           |  29 +++-
 .../earthMap/toolbar/AddRadarCom.vue          |   9 +-
 .../earthMap/toolbar/AddWaveCom.vue           |  13 +-
 src/utils/earthMap/earthObj.ts                |   1 +
 6 files changed, 215 insertions(+), 17 deletions(-)
 create mode 100644 src/components/earthMap/ShowHideControl.vue

diff --git a/src/components/earthMap/AISInfoWindow.vue b/src/components/earthMap/AISInfoWindow.vue
index 50fdc23..9b5112f 100644
--- a/src/components/earthMap/AISInfoWindow.vue
+++ b/src/components/earthMap/AISInfoWindow.vue
@@ -2,7 +2,7 @@
  * @Author: Fuyuu 1805498209@qq.com
  * @Date: 2024-01-05 14:18:33
  * @LastEditors: Fuyuu 1805498209@qq.com
- * @LastEditTime: 2024-01-09 11:14:45
+ * @LastEditTime: 2024-01-12 17:55:17
  * @FilePath: \dt-admin-pc-v2\src\components\earthMap\AISInfoWindow.vue
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 -->
@@ -105,6 +105,7 @@
   import { defineComponent, getCurrentInstance, ref, watch } from 'vue';
   import Window from '@/components/earthMap/components/Window.vue';
   import { useEarthMapStore } from '/@/store/modules/earthMap';
+  import $mitt from '@/utils/earthMap/mitt';
   // 暂存store
   const store = useEarthMapStore();
   export default defineComponent({
@@ -138,9 +139,10 @@
       // 监听船只guid变化，更新信息
       watch(
         () => proxy.ship_guid,
-        (newVal, oldVal) => {
+        (newVal, _oldVal) => {
           console.log(newVal);
-        },{immediate : true}
+        },
+        { immediate: true }
       );
 
       // 关闭弹窗
@@ -152,8 +154,22 @@
         checked.value = e;
         // 使用show字段控制轨迹显隐
         trackData.show = e;
+        // 发送轨迹线消息
+        $mitt.emit('trackShowChange', e);
       }
 
+      $mitt.on('trackAllChange', (e: boolean) => {
+        // 当前船只轨迹线状态
+        checked.value = e;
+      });
+
+      $mitt.on('shipAllChange', (e: boolean) => {
+        // 当前船只模型状态
+        if (!e) {
+          cancel()
+        }
+      })
+
       return {
         checked,
         cancel,
diff --git a/src/components/earthMap/ShowHideControl.vue b/src/components/earthMap/ShowHideControl.vue
new file mode 100644
index 0000000..775a72c
--- /dev/null
+++ b/src/components/earthMap/ShowHideControl.vue
@@ -0,0 +1,158 @@
+<template>
+  <div class="showhideControl">
+    <a-dropdown :trigger="['click']">
+      <template #overlay>
+        <a-menu>
+          <a-menu-item key="1">
+            <label for="ship-switch" style="margin-top: 2px">船只模型：</label>
+            <a-switch id="ship-switch" v-model:checked="shipShow" @change="changeShipShow" checked-children="显示" un-checked-children="隐藏" />
+          </a-menu-item>
+          <a-menu-item key="1">
+            <label for="track-switch" style="margin-top: 2px">船只轨迹：</label>
+            <a-switch id="track-switch" v-model:checked="trackShow" @change="changeTrackShow" checked-children="显示" un-checked-children="隐藏" />
+          </a-menu-item>
+        </a-menu>
+      </template>
+      <a-button> 地图元素显隐 <CaretUpOutlined /></a-button>
+    </a-dropdown>
+  </div>
+</template>
+<script lang="ts">
+  import { defineComponent, ref, nextTick, watch } from 'vue';
+  import { CaretUpOutlined } from '@ant-design/icons-vue';
+  import $mitt from '@/utils/earthMap/mitt';
+  export default defineComponent({
+    setup() {
+      // 船只显隐
+      const shipShow = ref<boolean>(true);
+      // 轨迹显隐
+      const trackShow = ref<boolean>(true);
+      // 船只列表
+      const shipList = ref([]);
+      // 轨迹列表
+      const trackList = ref([]);
+      // 获取船只信息
+      function getShipInfo() {
+        // 地图所有场景元素
+        let earthMapElements = window.$earth.getAllObjects();
+        // 获取地图上船只信息
+        let earthMapShips = earthMapElements.filter((item) => item.name && item.name.includes('船'));
+        if (earthMapShips.length > 0) {
+          // 判断每个船只的显隐状态   初始化按钮状态
+          shipShow.value = earthMapShips.every((item) => item.show === true);
+          // 赋值船只列表
+          shipList.value = earthMapShips;
+        } else {
+          console.log('当前场景没有船只');
+        }
+      }
+      // 获取轨迹线信息
+      function getTrackInfo() {
+        // 地图所有场景元素
+        let earthMapElements = window.$earth.getAllObjects();
+        // 获取地图上轨迹信息
+        let earthMapTracks = earthMapElements.filter((item) => item.name && item.name.includes('轨迹线'));
+        if (earthMapTracks.length > 0) {
+          // 判断每条轨迹的显隐状态   初始化按钮状态
+          trackShow.value = earthMapTracks.every((item) => item.show === true);
+          // 赋值船只列表
+          trackList.value = earthMapTracks;
+        } else {
+          console.log('当前场景没有轨迹线');
+        }
+      }
+      // 显隐所有船的模型
+      function changeShipShow(e) {
+        if (shipList.value.length > 0) {
+          if (!e) {
+            // 改变状态
+            trackShow.value = false;
+            // 控制显隐
+            trackList.value.forEach((item: any) => {
+              item.show = false;
+            });
+          }
+          // 改变状态
+          shipShow.value = e;
+          shipList.value.forEach((item: any) => {
+            // 控制显隐
+            item.show = e;
+          });
+        } else {
+          console.log('当前场景没有船只');
+        }
+      }
+      // 显隐所有轨迹线
+      function changeTrackShow(e) {
+        if (trackList.value.length > 0) {
+          if (shipShow.value) {
+            // 改变状态
+            trackShow.value = e;
+            trackList.value.forEach((item: any) => {
+              // 控制显隐
+              item.show = e;
+            });
+          } else {
+            trackShow.value = false;
+            console.log('请先打开显示船只模型');
+          }
+        } else {
+          console.log('当前场景没有船只');
+        }
+      }
+
+      // 监听轨迹线按钮状态
+      watch(trackShow, (newValue, _oldValue) => {
+        // 发送轨迹线按钮状态
+        $mitt.emit('trackAllChange', newValue);
+      });
+
+      // 监听船只模型按钮状态
+      watch(shipShow, (newValue, _oldValue) => {
+        // 发送轨迹线按钮状态
+        $mitt.emit('shipAllChange', newValue);
+      });
+
+      // 监听mqtt消息
+      $mitt.on('deviceCmd', () => {
+        nextTick(() => {
+          // 获取船只信息
+          getShipInfo();
+          // 获取轨迹线信息
+          getTrackInfo();
+        });
+      });
+      // 监听轨迹线响应
+      $mitt.on('trackShowChange', (e: boolean) => {
+        if (!e) {
+          // 改变按钮状态
+          trackShow.value = e;
+        } else {
+          // 判断每条轨迹的显隐状态   更改按钮状态
+          trackShow.value = window.$earth
+            .getAllObjects()
+            .filter((item) => item.name && item.name.includes('轨迹线'))
+            .every((item) => item.show === true);
+        }
+      });
+
+      return {
+        shipShow,
+        trackShow,
+        changeShipShow,
+        changeTrackShow,
+      };
+    },
+    components: {
+      CaretUpOutlined,
+    },
+  });
+</script>
+<style lang="less" scoped>
+  .showhideControl {
+    position: absolute;
+    left: 0;
+    bottom: 30px;
+    z-index: 99999;
+  }
+</style>
diff --git a/src/components/earthMap/Toolbar.vue b/src/components/earthMap/Toolbar.vue
index ed8462f..0573558 100644
--- a/src/components/earthMap/Toolbar.vue
+++ b/src/components/earthMap/Toolbar.vue
@@ -71,12 +71,12 @@
     <div id="addPopModal" class="popModal" style="top: 355px">
       <ul>
         <p @click="openCreateModel('addModelWin')">添加模型</p>
-        <p @click="openCreateModel('roamPathList')">路径巡检</p>
-        <p @click="openCreateModel('keyControlAreaList')">管控区域</p>
         <p @click="addArea()">添加区域</p>
+        <p @click="addRadar()">添加雷达</p>
         <p @click="addMonitorPoint()">添加监控点</p>
         <p @click="addWave()">添加微波探测</p>
-        <p @click="addRadar()">添加雷达</p>
+        <p @click="openCreateModel('roamPathList')">路径巡检</p>
+        <p @click="openCreateModel('keyControlAreaList')">管控区域</p>
       </ul>
     </div>
     <div class="mapBox">
@@ -1090,12 +1090,14 @@
       function addArea() {
         $mitt.emit('drawShapeShow', { show: true, title: '区域创建工具', from: 'addArea' });
         $mitt.on('addAreaFinished', (t: any) => {
-          console.log('addAreaFinished', t);
+          // console.log('addAreaFinished', t);
           //t 为drawShape传过来的临时图形
           t.creating = true;
+
           // 监控t数据，完成创建后调用后续方法
           window.XE.MVVM.watch(t, 'creating', (n: any) => {
-            console.log('creating', n);
+            // console.log('n', n);
+
             if (n == false) {
               //面
               let positions: any = [];
@@ -1108,6 +1110,7 @@
               } else {
                 positions = t.positions;
               }
+
               //销毁临时图形
               t.destroy();
               /**
@@ -1118,14 +1121,21 @@
               nextTick(() => {
                 addPolyline(positions);
               });
+            } else {
             }
           });
+
+          window.XE.MVVM.watch(t, 'positions', (n: any) => {
+            console.log('positions', n);
+          });
         });
       }
       /**
        * @params 需要调用 addArea 方法进行绘图，获取坐标点position
        */
       function addPolyline(positions: any = null) {
+        // console.log('positions', positions);
+
         // 关闭此窗体
         // cancel();
         // 创建区域
@@ -1136,7 +1146,7 @@
         };
         // 插入数据
         currentModel.xbsjFromJSON(objConfig);
-        console.log('currentModel', currentModel);
+        // console.log('currentModel', currentModel);
         // 获取地图ui对象
         const earthUI = window.$uia;
         // 打开一个区域编辑ui窗体
@@ -1158,6 +1168,8 @@
           const cancelBtn = el.children[3].children[0];
           // 确认按钮元素
           const okBtn = el.children[3].children[1];
+          // 右上角关闭按钮元素
+          const xBtn = el.children[1].children[1];
           // 设置确认按钮点击事件
           okBtn.onclick = function () {
             $mitt.emit('windowCancel');
@@ -1303,12 +1315,15 @@
               });
           };
           // 取消按钮
-          cancelBtn.onclick = function () {
+          cancelBtn.onclick = xBtn.onclick = function () {
             $mitt.off('windowCancel');
             // 消耗当前窗体的dom节点
             el.remove();
             // 消耗当前创建的对象
             currentModel.destroy();
+            //组件销毁前 关闭mitt
+            $mitt.emit('drawShapeShow', { show: false });
+            $mitt.off('addAreaFinished');
           };
         });
         return currentModel;
diff --git a/src/components/earthMap/toolbar/AddRadarCom.vue b/src/components/earthMap/toolbar/AddRadarCom.vue
index 3311a50..cf377a1 100644
--- a/src/components/earthMap/toolbar/AddRadarCom.vue
+++ b/src/components/earthMap/toolbar/AddRadarCom.vue
@@ -2,7 +2,7 @@
  * @Author: Fuyuu 1805498209@qq.com
  * @Date: 2024-01-10 15:19:50
  * @LastEditors: Fuyuu 1805498209@qq.com
- * @LastEditTime: 2024-01-11 15:50:45
+ * @LastEditTime: 2024-01-11 18:26:24
  * @FilePath: \dt-admin-pc-v2\src\components\earthMap\toolbar\AddWaveCom.vue
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 -->
@@ -180,7 +180,7 @@
       // 设备编码
       let selectDeviceNum = ref(null);
       // 上传图片文件
-      let uploadFile:any = ref(null);
+      let uploadFile: any = ref(null);
       // 上传图片路径
       let previewImgUrl = ref('');
       // 设置上传次数
@@ -317,8 +317,8 @@
         // 设置为不可见
         show.value = false;
         // 刷新窗体
-        modelState('creating');
-
+        // modelState('creating');
+        // modelState('creating');
         return pin;
       }
       // 绑定模型属性
@@ -535,6 +535,7 @@
             currentModel.value = addPin();
           });
         });
+        console.log('1111', currentModel.value);
       });
 
       return {
diff --git a/src/components/earthMap/toolbar/AddWaveCom.vue b/src/components/earthMap/toolbar/AddWaveCom.vue
index b479e4a..c4ba614 100644
--- a/src/components/earthMap/toolbar/AddWaveCom.vue
+++ b/src/components/earthMap/toolbar/AddWaveCom.vue
@@ -2,7 +2,7 @@
  * @Author: Fuyuu 1805498209@qq.com
  * @Date: 2024-01-10 15:19:50
  * @LastEditors: Fuyuu 1805498209@qq.com
- * @LastEditTime: 2024-01-11 15:49:37
+ * @LastEditTime: 2024-01-11 18:24:28
  * @FilePath: \dt-admin-pc-v2\src\components\earthMap\toolbar\AddWaveCom.vue
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 -->
@@ -267,13 +267,20 @@
         pin.pinBuilder.extTextPixelOffset = [30, -20];
         pin.pinBuilder.fillColor = [1, 1, 1, 0.9];
         pin.pinBuilder.outlineColor = [0, 0, 0, 0.9];
+        //移入移出事件
+        pin.onmouseover = () => {
+          window.$earth.czm.viewer._container.style.cursor = 'pointer';
+        };
+        pin.onmouseout = () => {
+          window.$earth.czm.viewer._container.style.cursor = 'default';
+        };
         // 绑定属性
         bindPinProps(pin);
         // 设置为不可见
         show.value = false;
         // 刷新窗体
-        modelState('creating');
-        modelState('creating');
+        // modelState('creating');
+        // modelState('creating');
         return pin;
       }
       // 绑定模型属性
diff --git a/src/utils/earthMap/earthObj.ts b/src/utils/earthMap/earthObj.ts
index 5f1b5d3..439536d 100644
--- a/src/utils/earthMap/earthObj.ts
+++ b/src/utils/earthMap/earthObj.ts
@@ -377,6 +377,7 @@ export const addShipTrack = (positions: number[][]) => {
   const shipTrack = new window.XE.Obj.Polyline(window.$earth);
   const objConfig = {
     width: 3.0,
+    name: '轨迹线',
     positions,
     material: {
       type: 'XbsjODLineMaterial',