通讯保障

src/components/Map/index.vue

@@ -89,88 +89,101 @@ let AMap, map, scale;
 // 鼠标绘制工具
 const drawTool = useDrawTool();
 // 初始化地图
-const { getAMap, getMap, switchMap, addMarker, addSearchMarker, clearMarker, getMarkers, getScale, showInfo, hideInfo, handleHover, creatMask, trackPlayback } =
-  useAMap({
-    key: '30d3d8448efd68cb0b284549fd41adcf', // 申请好的Web端开发者Key，首次调用 load 时必填
-    version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
-    pitch: mapState.isThreeDimensional ? 45 : 0,
-    zoom: mapState.zoom,
-    center: [mapState.center[0], mapState.center[1]],
-    dragEnable: true,
-    scrollWheel: true,
-    showScale: true,
-    enableMouseTool: true,
-    // 加载完成事件
-    onLoadCompleted: () => {
-      AMap = getAMap();
-      map = getMap();
-      scale = getScale();
-      if (!['logical', 'vectorgraph'].includes(props.activeMap)) {
-        switchMap(props.activeMap);
-      } else {
-        map.removeLayer();
-      }
-      map.on('zoomchange', zoomChangeHandler);
-      // 添加遮罩
+const {
+  getAMap,
+  getMap,
+  switchMap,
+  addMarker,
+  addSearchMarker,
+  clearMarker,
+  getMarkers,
+  getScale,
+  showInfo,
+  hideInfo,
+  handleHover,
+  creatMask,
+  trackPlayback
+} = useAMap({
+  key: '30d3d8448efd68cb0b284549fd41adcf', // 申请好的Web端开发者Key，首次调用 load 时必填
+  version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
+  pitch: mapState.isThreeDimensional ? 45 : 0,
+  zoom: mapState.zoom,
+  center: [mapState.center[0], mapState.center[1]],
+  dragEnable: true,
+  scrollWheel: true,
+  showScale: true,
+  enableMouseTool: true,
+  // 加载完成事件
+  onLoadCompleted: () => {
+    AMap = getAMap();
+    map = getMap();
+    scale = getScale();
+    if (!['logical', 'vectorgraph'].includes(props.activeMap)) {
+      switchMap(props.activeMap);
+    } else {
+      map.removeLayer();
+    }
+    map.on('zoomchange', zoomChangeHandler);
+    // 添加遮罩
     // , { strokeColor: '#ff0000',strokeWeight: 2, offset }
     //   { strokeColor: '#2a8797', strokeOpacity: 0.6,strokeWeight: 6, fillOpacity: 0},
-      creatMask([{ strokeWeight: 2 }]);
-      drawTool.initMouseTool({ container: 'aMap', map, AMap });
-      handleResize();
-    },
-    onMarkerClick: (data) => {
-      // 多点位
-      if (data.type === '1') {
-        let path = [];
-        props.pointType.forEach((item) => {
-          path.push(item.component);
-        });
-        getPointInfoList({
-          option: path.toString(),
-          longitude: data.longitude.toString(),
-          latitude: data.latitude.toString()
-        }).then((res) => {
-          const data2 = res.data.list;
-          let content = document.createElement('div');
-          // content.style.cssText = 'transform: scale(' + containerScale().scaleX + ');';
-          content.className = 'point-info';
-          let content2 = '';
-          content2 += '<div class="title-box"><div class="gradient-text">多点位信息</div></div>';
-          content2 += '<div class="icon1"></div>';
-          content2 += '<div class="icon2"></div>';
-          content2 += '<div class="icon3"></div>';
-          content2 += '<div class="icon4"></div>';
-          content.innerHTML = content2;
-          let tableBox = document.createElement('div');
-          tableBox.className = 'table-box';
-          let table = document.createElement('div');
-          table.className = 'table';
-          table.innerHTML = '<div class="point-item"><div class="td3">主题</div><div class="td3">名称</div></div>';
-          data2.forEach((item) => {
-            item.longitude = data.longitude;
-            item.latitude = data.latitude;
-            const div = document.createElement('div');
-            div.className = 'point-item point-item-hover';
-            div.innerHTML =
-              '<div class="td4">' + getDictLabel(point_type.value, item.dataType.toString()) + '</div><div class="td4">' + item.name + '</div>';
-            div.addEventListener('click', () => {
-              handlePointDetails(item);
-            });
-            table.appendChild(div);
+    creatMask([{ strokeWeight: 2 }]);
+    drawTool.initMouseTool({ container: 'aMap', map, AMap });
+    handleResize();
+  },
+  onMarkerClick: (data) => {
+    // 多点位
+    if (data.type === '1') {
+      let path = [];
+      props.pointType.forEach((item) => {
+        path.push(item.component);
+      });
+      getPointInfoList({
+        option: path.toString(),
+        longitude: data.longitude.toString(),
+        latitude: data.latitude.toString()
+      }).then((res) => {
+        const data2 = res.data.list;
+        let content = document.createElement('div');
+        // content.style.cssText = 'transform: scale(' + containerScale().scaleX + ');';
+        content.className = 'point-info';
+        let content2 = '';
+        content2 += '<div class="title-box"><div class="gradient-text">多点位信息</div></div>';
+        content2 += '<div class="icon1"></div>';
+        content2 += '<div class="icon2"></div>';
+        content2 += '<div class="icon3"></div>';
+        content2 += '<div class="icon4"></div>';
+        content.innerHTML = content2;
+        let tableBox = document.createElement('div');
+        tableBox.className = 'table-box';
+        let table = document.createElement('div');
+        table.className = 'table';
+        table.innerHTML = '<div class="point-item"><div class="td3">主题</div><div class="td3">名称</div></div>';
+        data2.forEach((item) => {
+          item.longitude = data.longitude;
+          item.latitude = data.latitude;
+          const div = document.createElement('div');
+          div.className = 'point-item point-item-hover';
+          div.innerHTML =
+            '<div class="td4">' + getDictLabel(point_type.value, item.dataType.toString()) + '</div><div class="td4">' + item.name + '</div>';
+          div.addEventListener('click', () => {
+            handlePointDetails(item);
           });
-          tableBox.appendChild(table);
-          content.appendChild(tableBox);
-          let closeBtn = document.createElement('div');
-          closeBtn.className = 'close';
-          closeBtn.onclick = hideInfo;
-          content.appendChild(closeBtn);
-          showInfo(content, [data.longitude, data.latitude], true);
+          table.appendChild(div);
         });
-      } else {
-        handlePointDetails(data);
-      }
+        tableBox.appendChild(table);
+        content.appendChild(tableBox);
+        let closeBtn = document.createElement('div');
+        closeBtn.className = 'close';
+        closeBtn.onclick = hideInfo;
+        content.appendChild(closeBtn);
+        showInfo(content, [data.longitude, data.latitude], true);
+      });
+    } else {
+      handlePointDetails(data);
     }
-  });
+  }
+});
 const handlePointDetails = (data) => {
   let methodList = {
     '1': getEmergencyExpertDetails,

src/views/globalMap/LeftMenu.vue

@@ -146,9 +146,38 @@ const initData = () => {
   });
 };
 
+const setMenuChange = (item, flag) => {
+  for (let i = 0; i < menuData.value.length; i++) {
+    if (item.meta.title === menuData.value[i].meta.title) {
+      menuData.value[i].checked = flag;
+      break;
+    } else if (!!menuData.value[i].children) {
+      const res = setChild(menuData.value[i].children, item, flag);
+      if (!!res) {
+        break;
+      }
+    }
+  }
+};
+const setChild = (data, item, flag) => {
+  let res = false;
+  for (let i = 0; i < data.length; i++) {
+    if (item.meta.title === data[i].meta.title) {
+      data[i].checked = flag;
+      break;
+    } else if (!!data[i].children) {
+      res = setChild(data[i].children, item, flag);
+      if (!!res) {
+        break;
+      }
+    }
+  }
+  return res;
+};
 onMounted(() => {
   initData();
 });
+defineExpose({ setMenuChange });
 </script>
 
 <style lang="scss" scoped>

src/views/globalMap/RightMenu/CommunicationSupport.vue

@@ -1,19 +1,20 @@
 <template>
-  <div class="communication-container">
-    <div class="tabs">
-      <div v-for="(item, index) in menu" :key="index" :class="activeIndex === index ? 'tab tab_active' : 'tab'">
-        {{ item.name }}
-      </div>
-    </div>
-    <!--视频会商-->
-    <div v-show="activeIndex === 0" class="content">
+  <Dialog custom-show type="lg" title="通讯保障" hide-footer @close="handleClose">
+    <div class="content">
       <div class="left-content">
+        <el-input v-model="queryParams.keyword" class="custom-input" placeholder="组织架构搜索">
+          <template #prefix>
+            <el-icon class="el-input__icon"><search /></el-icon>
+          </template>
+        </el-input>
+        <div class="tree-container">
+          <div class="tree-box">
+            <el-tree :data="treeData" accordion @node-click="handleNodeClick" />
+          </div>
+        </div>
+      </div>
+      <div class="middle-content">
         <div class="search-box">
-          <el-input v-model="queryParams.keyword" class="custom-input" placeholder="组织架构搜索" style="width: 487px">
-            <template #prefix>
-              <el-icon class="el-input__icon"><search /></el-icon>
-            </template>
-          </el-input>
           <el-select
             v-model="queryParams.value1"
             class="custom-select select-box"
@@ -29,31 +30,24 @@
             </template>
           </el-input>
         </div>
-        <div class="tree-container">
-          <div class="tree-box">
-            <div style="overflow-y: auto; height: 100%">
-              <el-tree :data="treeData" accordion @node-click="handleNodeClick" />
+        <div class="user-box">
+          <div class="user-table">
+            <div class="tr">
+              <div class="td2">
+                <div :class="getCheckedClass()" @click="handleChecked"></div>
+              </div>
+              <div class="td">姓名</div>
+              <div class="td3">职务</div>
             </div>
-          </div>
-          <div class="user-box">
-            <div class="user-table">
-              <div class="tr">
+            <div class="table-content">
+              <div v-for="(item, index) in userList" :key="index" class="tr2">
                 <div class="td2">
-                  <div :class="getCheckedClass()" @click="handleChecked"></div>
+                  <div :class="item.checked ? 'common-checked-active' : 'common-checked'" @click="handleChecked2(item)"></div>
                 </div>
-                <div class="td">姓名</div>
-                <div class="td3">职务</div>
-              </div>
-              <div class="table-content">
-                <div v-for="(item, index) in userList" :key="index" class="tr2">
-                  <div class="td2">
-                    <div :class="item.checked ? 'common-checked-active' : 'common-checked'" @click="handleChecked2(item)"></div>
-                  </div>
-                  <div class="td">{{ item.name }}</div>
-                  <div class="td3">
-                    {{ item.duty }}
-                    <div class="phone-icon"></div>
-                  </div>
+                <div class="td">{{ item.name }}</div>
+                <div class="td3">
+                  {{ item.duty }}
+                  <div class="phone-icon"></div>
                 </div>
               </div>
             </div>
@@ -82,27 +76,14 @@
           </div>
         </div>
       </div>
-      <div class="btn-box">
-        <div class="btn">
-          <div class="icon1"></div>
-          <div class="text">会议号入会</div>
-        </div>
-        <div class="btn">
-          <div class="icon2"></div>
-          <div class="text">电话呼叫</div>
-        </div>
-        <div class="btn">
-          <div class="icon3"></div>
-          <div class="text">发起会议</div>
-        </div>
-      </div>
     </div>
-  </div>
+  </Dialog>
 </template>
 
 <script lang="ts" setup>
 import { Search } from '@element-plus/icons-vue';
 
+const emits = defineEmits(['close']);
 let activeIndex = ref(0);
 const options = ref([{ name: '全部', value: '全部' }]);
 const queryParams = ref({
@@ -250,273 +231,198 @@ const deleteItem = (item) => {
     }
   }
 };
+
+// 弹窗关闭后
+const handleClose = () => {
+  emits('close');
+};
 </script>
 
 <style lang="scss" scoped>
-.communication-container {
-  width: 1963px;
-  height: 659px;
-  background: url('@/assets/images/emergencyCommandMap/communication/communicationBg.png') no-repeat;
-  position: relative;
-  padding-top: 100px;
-  padding-left: 60px;
-  animation-name: slideLeft;
-  animation-duration: 2s;
-  .tabs {
-    display: flex;
-    .tab {
-      font-size: 44px;
-      font-family: YouSheBiaoTiHei;
-      text-align: center;
-      color: #b6bbcc;
-      width: 317px;
-      height: 78px;
-      line-height: 85px;
-      background: url('@/assets/images/emergencyCommandMap/communication/tab.png') no-repeat;
-      cursor: pointer;
-      &:hover {
-        color: #ffffff;
-        background: url('@/assets/images/emergencyCommandMap/communication/tabActive.png') no-repeat;
-      }
-    }
-
-    .tab_active {
-      color: #ffffff;
-      background: url('@/assets/images/emergencyCommandMap/communication/tabActive.png') no-repeat;
-    }
+.content {
+  display: flex;
+  margin-top: 12px;
+  .left-content {
+    width: 910px;
+    padding-right: 30px;
+    border-right: 1px solid #2187ff;
   }
-  .content {
-    display: flex;
-    margin-top: 12px;
-    .left-content {
-      .search-box {
-        display: flex;
-        .custom-input {
-          width: 305px;
-        }
-        .select-box {
-          width: 176px !important;
-          height: 56px;
-          line-height: 56px;
-          margin: 0 10px;
-          color: #83a3be;
-          font-size: 32px;
-        }
-        .custom-select-popper {
-          .el-scrollbar {
-            .el-select-dropdown__item {
-              color: #b1cae0;
-              font-size: 32px;
-              height: 56px;
-              line-height: 56px;
-            }
-          }
-        }
-        .input {
-          background: transparent;
-          color: #83a3be;
-          font-size: 32px;
-          outline: none;
-          appearance: none;
-          height: 100%;
-          border: none;
-          &::placeholder {
-            color: #83a3be;
-          }
-        }
+  .middle-content {
+    width: 910px;
+    padding: 0 30px;
+    border-right: 1px solid #2187ff;
+    .search-box {
+      display: flex;
+      .select-box {
+        flex-shrink: 0;
+        width: 176px !important;
+        height: 56px;
+        line-height: 56px;
+        margin: 0 10px;
+        color: #83a3be;
+        font-size: 32px;
       }
     }
-    .tree-container {
-      margin-top: 15px;
-      display: flex;
-      .tree-box {
-        width: 488px;
-        height: 354px;
-        background: url('@/assets/images/emergencyCommandMap/communication/treeBg.png') no-repeat;
-        padding: 15px 8px;
-        overflow: hidden;
-        :deep(.el-tree) {
-          background-color: transparent;
-          color: #fbffff;
-          font-size: 38px;
-          .el-tree-node__content {
-            height: auto;
-            padding-top: 10px;
-            padding-bottom: 10px;
-            white-space: normal;
-            word-break: break-all;
-          }
-          .el-tree-node__expand-icon {
-            color: #297cfc;
-            font-size: 23px;
-          }
-          .el-tree-node:focus > .el-tree-node__content,
-          .el-tree-node__content:hover {
-            background-color: transparent !important;
-          }
+    .user-box {
+      margin-left: 10px;
+      width: 100%;
+      height: 100%;
+      .user-table {
+        padding: 15px 0;
+        display: flex;
+        flex-direction: column;
+        font-size: 38px;
+        color: #fbffff;
+        .tr {
+          background-color: #102e76;
         }
-      }
-      .user-box {
-        margin-left: 10px;
-        width: 488px;
-        height: 354px;
-        background: url('@/assets/images/emergencyCommandMap/communication/treeBg.png') no-repeat;
-        background-size: 100% 100%;
-        .user-table {
-          padding: 15px 8px;
+        .tr,
+        .tr2 {
           display: flex;
-          flex-direction: column;
-          font-size: 38px;
-          color: #fbffff;
-          .tr {
-            background-color: #102e76;
-          }
-          .tr,
-          .tr2 {
+          padding: 6px 0;
+          .td {
+            flex: 1;
             display: flex;
-            padding: 6px 0;
-            .td {
-              flex: 2;
-              display: flex;
-              align-items: center;
-            }
-            .td2 {
-              width: 65px;
-              display: flex;
-              align-items: center;
-              justify-content: center;
-            }
-            .td3 {
-              flex: 3;
-              display: flex;
-              align-items: center;
-              justify-content: center;
-            }
-          }
-          .table-content {
-            height: 275px;
-            overflow-y: auto;
+            align-items: center;
           }
-          .tr2 {
-            margin-top: 10px;
-            background-color: #122868;
+          .td2 {
+            width: 65px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
           }
-          .phone-icon {
-            width: 62px;
-            height: 63px;
-            background: url('@/assets/images/emergencyCommandMap/communication/phone.png');
-            cursor: pointer;
+          .td3 {
+            flex: 2;
+            display: flex;
+            align-items: center;
           }
         }
+        .table-content {
+          height: 858px;
+          overflow-y: auto;
+        }
+        .tr2 {
+          margin-top: 10px;
+          background-color: #122868;
+        }
+        .phone-icon {
+          width: 62px;
+          height: 63px;
+          background: url('@/assets/images/emergencyCommandMap/communication/phone.png');
+          cursor: pointer;
+        }
       }
     }
-    .select-box2 {
-      margin-left: 10px;
-      width: 579px;
-      height: 421px;
-      background: url('@/assets/images/emergencyCommandMap/communication/peopleBg.png') no-repeat;
-      background-size: 100% 100%;
-      .select-header {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        color: #fbffff;
+  }
+
+  .custom-select-popper {
+    .el-scrollbar {
+      .el-select-dropdown__item {
+        color: #b1cae0;
         font-size: 32px;
-        border-bottom: 1px solid #247dff;
-        padding: 20px;
-        .left-item {
-          display: flex;
-          align-items: center;
-          .text {
-            margin: 0 10px;
-            color: #00e8ff;
-            font-family: 'BEBAS-1';
-          }
+        height: 56px;
+        line-height: 56px;
+      }
+    }
+  }
+  .input {
+    background: transparent;
+    color: #83a3be;
+    font-size: 32px;
+    outline: none;
+    appearance: none;
+    height: 100%;
+    border: none;
+    &::placeholder {
+      color: #83a3be;
+    }
+  }
+  .tree-container {
+    margin-top: 15px;
+    display: flex;
+    .tree-box {
+      width: 100%;
+      height: 920px;
+      overflow-y: auto;
+      padding: 15px 8px;
+      :deep(.el-tree) {
+        height: 100%;
+        background-color: transparent;
+        color: #fbffff;
+        font-size: 38px;
+        .el-tree-node__content {
+          height: auto;
+          padding-top: 10px;
+          padding-bottom: 10px;
+          white-space: normal;
+          word-break: break-all;
         }
-        .clear-btn {
-          color: #00e8ff;
-          cursor: pointer;
+        .el-tree-node__expand-icon {
+          color: #297cfc;
+          font-size: 23px;
         }
-      }
-      .select-content {
-        height: 305px;
-        overflow-y: auto;
-        .box-item {
-          border-bottom: 1px solid #247dff;
-          padding: 20px;
-          position: relative;
-          .line {
-            color: #fff;
-            font-size: 38px;
-            display: flex;
-            .text1 {
-              margin-right: 35px;
-            }
-            .text2 {
-              color: #a7ccdf;
-            }
-          }
-          .close-btn {
-            position: absolute;
-            right: 10px;
-            top: 50px;
-            cursor: pointer;
-            width: 29px;
-            height: 29px;
-            background: url('@/assets/images/emergencyCommandMap/communication/close.png') no-repeat;
-          }
+        .el-tree-node:focus > .el-tree-node__content,
+        .el-tree-node__content:hover {
+          background-color: transparent !important;
         }
       }
     }
-    .btn-box {
-      flex: 1;
-      height: 421px;
+  }
+  .select-box2 {
+    margin-left: 30px;
+    width: 910px;
+    height: 100%;
+    .select-header {
       display: flex;
-      flex-direction: column;
-      justify-content: center;
+      justify-content: space-between;
       align-items: center;
-      .btn {
-        width: 361px;
-        height: 136px;
-        background: url('@/assets/images/emergencyCommandMap/communication/btn.png') no-repeat;
+      color: #fbffff;
+      font-size: 32px;
+      border-bottom: 1px solid #247dff;
+      padding: 20px;
+      .left-item {
         display: flex;
         align-items: center;
-        justify-content: center;
-        cursor: pointer;
-        .icon1,
-        .icon2,
-        .icon3 {
-          margin-right: 20px;
-          margin-top: 10px;
-        }
-        .icon1 {
-          width: 64px;
-          height: 67px;
-          background: url('@/assets/images/emergencyCommandMap/communication/icon1.png') no-repeat;
-        }
-        .icon2 {
-          width: 64px;
-          height: 65px;
-          background: url('@/assets/images/emergencyCommandMap/communication/icon2.png') no-repeat;
-        }
-        .icon3 {
-          width: 64px;
-          height: 63px;
-          background: url('@/assets/images/emergencyCommandMap/communication/icon3.png') no-repeat;
-        }
         .text {
+          margin: 0 10px;
+          color: #00e8ff;
+          font-family: 'BEBAS-1';
+        }
+      }
+      .clear-btn {
+        color: #00e8ff;
+        cursor: pointer;
+      }
+    }
+    .select-content {
+      height: 858px;
+      overflow-y: auto;
+      .box-item {
+        border-bottom: 1px solid #247dff;
+        padding: 20px;
+        position: relative;
+        .line {
           color: #fff;
           font-size: 38px;
+          display: flex;
+          .text1 {
+            margin-right: 35px;
+          }
+          .text2 {
+            color: #a7ccdf;
+          }
+        }
+        .close-btn {
+          position: absolute;
+          right: 10px;
+          top: 50px;
+          cursor: pointer;
+          width: 29px;
+          height: 29px;
+          background: url('@/assets/images/emergencyCommandMap/communication/close.png') no-repeat;
         }
       }
     }
   }
 }
-
-.title {
-  position: absolute;
-  top: 6px;
-  left: 141px;
-  font-size: 60px;
-}
 </style>

src/views/globalMap/SwitchMapTool.vue

@@ -29,9 +29,9 @@ const props = withDefaults(defineProps<Props>(), {});
 const emits = defineEmits(['switchMap']);
 const mapData = ref([
   // { name: '逻辑地图', key: 'logical' },
-  { name: '矢量地图', key: 'vectorgraph' },
   { name: '卫星地图', key: 'satellite' },
-  { name: '影像图', key: 'imageMap' },
+  { name: '矢量地图', key: 'vectorgraph' },
+  { name: '影像图', key: 'imageMap' }
   // { name: '粤政图2', key: 'satellite3' }
 ]);
 let open = ref(false);

src/views/globalMap/index.vue

@@ -3,10 +3,27 @@
     <div class="global-map">
       <MapLogical v-if="activeMap === 'logical'" :map-data="mapData" />
       <!--      <YMap v-else-if="['imageMap', 'satellite2', 'satellite3'].includes(activeMap)" :activeMap="activeMap" />-->
-      <YztMap v-else-if="['imageMap', 'satellite2', 'satellite3'].includes(activeMap)" ref="map2Ref" :active-map="activeMap" :point-type="pointType" />
-      <Map v-else ref="mapRef" :active-map="activeMap" :point-type="pointType" @handle-show-video="handleShowVideo" @handleShowWarehouse="handleShowWarehouse" />
+      <YztMap
+        v-else-if="['imageMap'].includes(activeMap)"
+        ref="map2Ref"
+        :active-map="activeMap"
+        :point-type="pointType"
+      />
+      <Map
+        v-else
+        ref="mapRef"
+        :active-map="activeMap"
+        :point-type="pointType"
+        @handle-show-video="handleShowVideo"
+        @handle-show-warehouse="handleShowWarehouse"
+      />
       <!--左侧菜单-->
-      <LeftMenu style="position: absolute; top: 20px; left: 20px" @click-menu="clickMenu" @select-search-marker="selectSearchMarker" />
+      <LeftMenu
+        ref="leftMenuRef"
+        style="position: absolute; top: 20px; left: 20px"
+        @click-menu="clickMenu"
+        @select-search-marker="selectSearchMarker"
+      />
       <!--右侧菜单-->
       <RightMenu ref="rightMenuRef" :point-type="pointType" />
       <!--更换地图类型-->
@@ -15,7 +32,8 @@
       <TimeAxis />
       <DrawTools v-if="showDrawTools" @handle-analysis-data="handleAnalysisData" />
       <NearbyVideos v-if="showNearbyVideos" v-model="showNearbyVideos" :location="location" />
-      <MaterialDetail v-if="showWarehouse" v-model="showWarehouse" :warehouseData="warehouseData" />
+      <MaterialDetail v-if="showWarehouse" v-model="showWarehouse" :warehouse-data="warehouseData" />
+      <CommunicationSupport v-if="communicationSupport.show" @close="handleHideCommunicationSupport" />
     </div>
   </div>
 </template>
@@ -34,13 +52,19 @@ import { getPointInfo } from '@/api/globalMap';
 import RightMenu from './RightMenu/index.vue';
 import { PointType } from '@/api/globalMap/type';
 import DrawTools from '@/views/globalMap/RightMenu/DrawTools.vue';
+import CommunicationSupport from '@/views/globalMap/RightMenu/CommunicationSupport.vue';
 
 const rightMenuRef = ref(null);
 const mapData = reactive(logicalData);
 let mapRef = ref(null);
 let map2Ref = ref(null);
-// logical vectorgraph satellite satellite2 satellite3
-let activeMap = ref('vectorgraph');
+let leftMenuRef = ref(null);
+//  vectorgraph satellite imageMap 废弃：logical satellite2 satellite3
+let activeMap = ref('satellite');
+const communicationSupport = reactive({
+  show: false,
+  data: {}
+})
 
 const switchMap = (key) => {
   activeMap.value = key;
@@ -119,11 +143,20 @@ const clickMenu = (item, dataList) => {
     if (item.checked || (!item.checked && index === 0)) {
       rightMenuRef.value.updateMenu(
         checked,
-        ['易涝隐患点', '无人机', '铁塔运行监测', '物资与装备', '通讯保障', '手机工作台'].includes(item.name) ? item : { name: '图层分析', meta: { icon: 'icon1' } }
+        ['易涝隐患点', '无人机', '铁塔运行监测', '物资与装备', '通讯保障', '手机工作台'].includes(item.name)
+          ? item
+          : { name: '图层分析', meta: { icon: 'icon1' } }
       );
     }
+  } else if (item.path === '3') {
+    communicationSupport.show = !communicationSupport.show;
+    communicationSupport.data = item;
   }
 };
+const handleHideCommunicationSupport = () => {
+  communicationSupport.show = false;
+  leftMenuRef.value.setMenuChange(communicationSupport.data, false);
+};
 const findChecked = (dataList, name) => {
   let index = 0;
   dataList.forEach((item) => {
@@ -193,7 +226,7 @@ const getMarkers = () => {
   return {};
 };
 const trackPlayback = (data) => {
-  if (['imageMap','satellite2', 'satellite3'].includes(activeMap.value)) {
+  if (['imageMap', 'satellite2', 'satellite3'].includes(activeMap.value)) {
     return map2Ref.value.trackPlayback(data);
   } else if (['vectorgraph', 'satellite'].includes(activeMap.value)) {
     return mapRef.value.trackPlayback(data);