通讯保障

src/api/globalMap/spatialAnalysis.ts

@@ -251,7 +251,7 @@ export const getBuildingProjectDetails = (id: string) => {
   });
 };
 
-//储罐详情
+//储罐详
 export const getChemicalWarehouseDetails = (id: string) => {
   return request({
     url: '/api/gateway/v2/get_point_info_chemical_warehouse',

src/views/globalMap/RightMenu/CommunicationSupport.vue

@@ -0,0 +1,522 @@
+<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">
+      <div class="left-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"
+            placeholder="全部"
+            popper-class="custom-select-popper"
+            :teleported="false"
+          >
+            <el-option v-for="level in options" :key="level.value" :label="level.name" :value="level.value"></el-option>
+          </el-select>
+          <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>
+        <div class="tree-container">
+          <div class="tree-box">
+            <div style="overflow-y: auto; height: 100%">
+              <el-tree :data="treeData" accordion @node-click="handleNodeClick" />
+            </div>
+          </div>
+          <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 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>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="select-box2">
+        <div class="select-header">
+          <div class="left-item">
+            <div>已选择：</div>
+            <div class="text">{{ selectList.length }}</div>
+            <div>人</div>
+          </div>
+          <div class="clear-btn" @click="clearSelect">清空</div>
+        </div>
+        <div class="select-content">
+          <div v-for="(item, index) in selectList" :key="index" class="box-item">
+            <div class="line">
+              <div class="text1">{{ item.name }}</div>
+              <div class="text2">{{ item.duty }}</div>
+            </div>
+            <div class="line" style="margin-top: 20px">
+              <div class="text2">{{ item.dept }}</div>
+            </div>
+            <div class="close-btn" @click="deleteItem(item)"></div>
+          </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>
+</template>
+
+<script lang="ts" setup>
+import { Search } from '@element-plus/icons-vue';
+
+let activeIndex = ref(0);
+const options = ref([{ name: '全部', value: '全部' }]);
+const queryParams = ref({
+  value1: '',
+  keyword: ''
+});
+const menu = ref([{ name: '视频会商' }, { name: '无人机' }, { name: '单兵设备' }]);
+const treeData = ref([
+  {
+    label: '茂名市',
+    children: [
+      {
+        label: '茂名市委',
+        children: [
+          {
+            label: '茂名市纪委监委',
+            isLeaf: true
+          },
+          {
+            label: '茂名市委办公室',
+            isLeaf: true
+          },
+          {
+            label: '茂名市委组织部',
+            isLeaf: true
+          }
+        ]
+      },
+      {
+        label: '茂名市人大',
+        children: [
+          {
+            label: '茂名市人大常委会秘书长、副秘书长',
+            isLeaf: true
+          },
+          {
+            label: '茂名市人大常委会办公室',
+            isLeaf: true
+          },
+          {
+            label: '茂名市人大常委会研究室',
+            isLeaf: true
+          }
+        ]
+      }
+    ]
+  }
+]);
+const userList = ref([]);
+const selectList = computed(() => {
+  const data = [];
+  userList.value.forEach((item) => {
+    if (item.checked) {
+      data.push(item);
+    }
+  });
+  return data;
+});
+const getCheckedClass = () => {
+  let res = 'common-checked';
+  const len = userList.value.length;
+  const len2 = selectList.value.length;
+  if (len2 > 0 && len2 === len) {
+    res = 'common-checked-active';
+  } else if (len2 > 0) {
+    res = 'common-checked-half';
+  }
+  return res;
+};
+const handleNodeClick = (item) => {
+  if (item.isLeaf) {
+    const data = [
+      {
+        id: 1,
+        name: '李莉莉',
+        duty: '副主任',
+        dept: '茂名市/茂名市政府/茂名应急管理局'
+      },
+      {
+        id: 2,
+        name: '何里',
+        duty: '副主任',
+        dept: '茂名市/茂名市政府/茂名应急管理局'
+      },
+      {
+        id: 3,
+        name: '张三',
+        duty: '副主任',
+        dept: '茂名市/茂名市政府/茂名应急管理局'
+      },
+      {
+        id: 4,
+        name: '张三',
+        duty: '副主任',
+        dept: '茂名市/茂名市政府/茂名应急管理局'
+      },
+      {
+        id: 5,
+        name: '张三',
+        duty: '副主任',
+        dept: '茂名市/茂名市政府/茂名应急管理局'
+      },
+      {
+        id: 6,
+        name: '张三',
+        duty: '副主任',
+        dept: '茂名市/茂名市政府/茂名应急管理局'
+      }
+    ];
+    data.forEach((item) => {
+      item.checked = false;
+    });
+    userList.value = data;
+  }
+};
+// 全选、全取消
+const handleChecked = () => {
+  const checkedClass = getCheckedClass();
+  let flag = true;
+  if (checkedClass === 'common-checked-active') {
+    flag = false;
+  }
+  userList.value.forEach((item) => {
+    item.checked = flag;
+  });
+};
+// 单个选中、取消选中
+const handleChecked2 = (item) => {
+  item.checked = !item.checked;
+};
+// 清空
+const clearSelect = () => {
+  userList.value.forEach((item) => {
+    if (item.checked) {
+      item.checked = false;
+    }
+  });
+};
+// 清空指定项
+const deleteItem = (item) => {
+  for (let i = 0; i < userList.value.length; i++) {
+    if (item.id === userList.value[i].id) {
+      userList.value[i].checked = false;
+      break;
+    }
+  }
+};
+</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 {
+      .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;
+          }
+        }
+      }
+    }
+    .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: 488px;
+        height: 354px;
+        background: url('@/assets/images/emergencyCommandMap/communication/treeBg.png') no-repeat;
+        background-size: 100% 100%;
+        .user-table {
+          padding: 15px 8px;
+          display: flex;
+          flex-direction: column;
+          font-size: 38px;
+          color: #fbffff;
+          .tr {
+            background-color: #102e76;
+          }
+          .tr,
+          .tr2 {
+            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;
+          }
+          .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;
+        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';
+          }
+        }
+        .clear-btn {
+          color: #00e8ff;
+          cursor: pointer;
+        }
+      }
+      .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;
+          }
+        }
+      }
+    }
+    .btn-box {
+      flex: 1;
+      height: 421px;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      .btn {
+        width: 361px;
+        height: 136px;
+        background: url('@/assets/images/emergencyCommandMap/communication/btn.png') no-repeat;
+        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 {
+          color: #fff;
+          font-size: 38px;
+        }
+      }
+    }
+  }
+}
+
+.title {
+  position: absolute;
+  top: 6px;
+  left: 141px;
+  font-size: 60px;
+}
+</style>

src/views/globalMap/RightMenu/index.vue

@@ -57,11 +57,8 @@
           v-if="menuState.showMenu && menuState.menuData[menuState.activeIndex]?.name === '易涝隐患点'"
           @handle-menu="handleMenu"
         />
-        <!--物资与装备-->
-        <MaterialsEquipment
-          v-if="menuState.showMenu && menuState.menuData[menuState.activeIndex]?.name === '物资与装备'"
-          @handle-menu="handleMenu"
-        />
+        <!--通讯保障-->
+        <CommunicationSupport v-if="menuState.showMenu && menuState.menuData[menuState.activeIndex]?.name === '通讯保障'" @handle-menu="handleMenu" />
       </div>
     </div>
   </div>
@@ -84,6 +81,7 @@ import Fireproofing from './Fireproofing.vue';
 import Mitigation from './Mitigation.vue';
 import PotentialFloodHazard from './PotentialFloodHazard.vue';
 import TowerStatus from './TowerStatus.vue';
+import CommunicationSupport from './CommunicationSupport.vue';
 
 interface Props {
   pointType: PointType[];

src/views/globalMap/index.vue

@@ -119,7 +119,7 @@ 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' } }
       );
     }
   }