江湖河库、前方通信

src/assets/styles/index.scss

@@ -250,3 +250,10 @@ aside {
   font-family: 'YouSheBiaoTiHei';
 }
 
+::-webkit-scrollbar-thumb {
+  background-color: #227dfe !important;
+}
+
+::-webkit-scrollbar-track {
+  background-color: transparent !important;
+}

src/components/HKVideo/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="dot-box" :style="{ width: width ? width + 'px' : '100%', height: height ? height + 'px' : '190px' }">
+  <div class="dot-box" :style="{ width: width ? width + 'px' : '100%', height: height ? height + 'px' : '100%' }">
     <div class="video-box" @click="play_now">
       <HikvisionPlayer
         v-if="isPlaying"

src/types/components.d.ts

@@ -63,6 +63,7 @@ declare module 'vue' {
     ElTimeline: typeof import('element-plus/es')['ElTimeline']
     ElTimelineItem: typeof import('element-plus/es')['ElTimelineItem']
     ElTooltip: typeof import('element-plus/es')['ElTooltip']
+    ElTree: typeof import('element-plus/es')['ElTree']
     ElUpload: typeof import('element-plus/es')['ElUpload']
     FileUpload: typeof import('./../components/FileUpload/index.vue')['default']
     FooterSection: typeof import('./../components/FooterSection/index.vue')['default']

src/views/emergencyCommandMap/LeftSection/Communication.vue

@@ -1,11 +1,350 @@
 <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">
+          <div class="input-box">
+            <input class="input" type="text" placeholder="组织架构搜索" />
+          </div>
+          <div class="select-box">全部</div>
+          <div class="input-box2">
+            <input class="input" type="text" placeholder="组织架构搜索" />
+          </div>
+        </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 ? 'checked-box-active' : 'checked-box'" @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>
+  </div>
 </template>
 
 <script lang="ts" setup>
+let activeIndex = ref(0);
+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 getCheckedClass = () => {
+  let res = 'checked-box';
+  let len = userList.value.length;
+  let checkedLen = 0;
+  userList.value.forEach((item) => {
+    if (item.checked) {
+      checkedLen++;
+    }
+  });
+  if (checkedLen > 0 && checkedLen === len) {
+    res = 'checked-box-active';
+  } else if (checkedLen > 0) {
+    res = 'checked-box-half';
+  }
+  return res;
+};
+const handleNodeClick = (item) => {
+  if (item.isLeaf) {
+    const data = [
+      {
+        name: '李莉莉',
+        duty: '副主任'
+      },
+      {
+        name: '何里',
+        duty: '副主任'
+      },
+      {
+        name: '张三',
+        duty: '副主任'
+      },
+      {
+        name: '张三',
+        duty: '副主任'
+      },
+      {
+        name: '张三',
+        duty: '副主任'
+      },
+      {
+        name: '张三',
+        duty: '副主任'
+      }
+    ];
+    data.forEach((item) => {
+      item.checked = false;
+    });
+    userList.value = data;
+  }
+};
+const handleChecked = () => {
+  const checkedClass = getCheckedClass();
+  let flag = true;
+  if (checkedClass === 'checked-box-active') {
+    flag = false;
+  }
+  userList.value.forEach((item) => {
+    item.checked = flag;
+  });
+};
+const handleChecked2 = (item) => {
+  item.checked = !item.checked;
+};
 </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;
+  .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 {
+    margin-top: 12px;
+    .left-content {
+      .search-box {
+        display: flex;
+        .input-box {
+          width: 487px;
+          height: 56px;
+          background: url('@/assets/images/emergencyCommandMap/communication/search1.png') no-repeat;
+          display: flex;
+          padding-left: 70px;
+        }
+        .input-box2 {
+          width: 270px;
+          height: 56px;
+          background: url('@/assets/images/emergencyCommandMap/communication/search2.png') no-repeat;
+          display: flex;
+          padding-left: 70px;
+        }
+        .select-box {
+          width: 176px;
+          height: 56px;
+          line-height: 56px;
+          padding-left: 20px;
+          background: url('@/assets/images/emergencyCommandMap/communication/selectBox.png') no-repeat;
+          margin: 0 10px;
+          color: #83a3be;
+          font-size: 32px;
+          cursor: pointer;
+        }
+        .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: 32px;
+          .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: 32px;
+          color: #fbffff;
+          .checked-box,
+          .checked-box-half,
+          .checked-box-active {
+            width: 32px;
+            height: 32px;
+            cursor: pointer;
+          }
+          .checked-box {
+            background: url('@/assets/images/emergencyCommandMap/communication/checkedBox.png') no-repeat;
+          }
+          .checked-box-half {
+            background: url('@/assets/images/emergencyCommandMap/communication/checkedBox2.png') no-repeat;
+          }
+          .checked-box-active {
+            background: url('@/assets/images/emergencyCommandMap/communication/checkedBox3.png') no-repeat;
+          }
+          .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;
+          }
+        }
+      }
+    }
+  }
+}
+
+.title {
+  position: absolute;
+  top: 6px;
+  left: 141px;
+  font-size: 60px;
+}
 </style>

src/views/emergencyCommandMap/index.vue

@@ -21,16 +21,16 @@ const containerRef = ref();
 let scale = ref({ scaleX: 1, scaleY: 1 });
 provide('containerScale', () => scale.value);
 onMounted(() => {
-  const a = autofit.init(
-    {
-      dw: 8960,
-      dh: 2520,
-      el: '#dashboard-container',
-      resize: false,
-      ignore: ['#aMap', '#YztMap']
-    },
-    false
-  );
+  // autofit.init(
+  //   {
+  //     dw: 8960,
+  //     dh: 2520,
+  //     el: '#dashboard-container',
+  //     resize: false,
+  //     ignore: ['#aMap', '#YztMap']
+  //   },
+  //   false
+  // );
   scale.value = getTransformScale(containerRef.value);
 });
 onUnmounted(() => {

src/views/globalMap/RightMenu/Dialog.vue

@@ -70,6 +70,8 @@ const closeDialog = () => {
     }
   }
   .dialog-content {
+    height: 1082px;
+    overflow-y: auto;
     padding: 10px 0;
   }
 }

src/views/globalMap/RightMenu/Reservoir.vue

@@ -1,37 +1,31 @@
 <template>
   <div class="container">
-    <div class="title">江湖河库</div>
+    <div class="gradient-text title">江湖河库</div>
     <div class="flex">
       <el-input v-model="queryParams.keyword" :prefix-icon="Search" size="large" clearable />
       <el-button type="primary" size="large" @click="initData" style="margin-left: 20px">搜索</el-button>
     </div>
-    <div>视频类型</div>
-    <el-table :data="listData" border style="width: 100%">
-      <el-table-column prop="area" show-overflow-tooltip align="center">
-        <template #header>
-          <el-select v-model="queryParams.area" placeholder="所有区县" size="large" clearable @change="initData">
-            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
-          </el-select>
-        </template>
-      </el-table-column>
-      <el-table-column prop="name" label="名称" show-overflow-tooltip align="center">
-        <template #default="scope">
-          <div style="color: #409eff; cursor: pointer" @click="handleShowDialog(scope.row)">
-            {{ scope.row.name }}
-          </div>
-        </template>
-      </el-table-column>
-    </el-table>
-    <pagination
-      v-show="total > queryParams.size"
-      v-model:page="queryParams.current"
-      v-model:limit="queryParams.size"
-      :total="total"
-      @pagination="initData"
-    />
+    <div class="gradient-text">视频类型</div>
+    <div class="custom-table">
+      <div class="th">
+        <div class="td">
+          所有区县
+<!--          <el-select v-model="queryParams.area" placeholder="所有区县" size="large" clearable @change="initData">-->
+<!--            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />-->
+<!--          </el-select>-->
+        </div>
+        <div class="td">名称</div>
+      </div>
+      <div class="table-content">
+        <div v-for="(item, index) in listData" :key="index" class="tr" @click="handleShowDialog(item)">
+          <div class="td">{{ item.area }}</div>
+          <div class="td">{{ item.name }}</div>
+        </div>
+      </div>
+    </div>
     <Dialog v-if="showDialog" v-model="showDialog" title="江湖河库" width="2500px" height="1200px">
-      <div style="width: 2500px; height: 1120px; display: flex; justify-content: center; align-items: center">
-        <HKVideo :dot_data="videoMonitorData" :width="2400" :height="1000" />
+      <div style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center">
+        <HKVideo :dot_data="videoMonitorData" />
       </div>
     </Dialog>
   </div>
@@ -39,7 +33,7 @@
 
 <script lang="ts" setup>
 import { Search } from '@element-plus/icons-vue';
-import Dialog from '@/components/Dialog/index.vue';
+import Dialog from './Dialog.vue';
 import { getWaterList2 } from '@/api/globalMap/reservoir';
 import { deepClone } from '@/utils';
 
@@ -101,5 +95,63 @@ initData();
 </script>
 
 <style lang="scss" scoped>
+.custom-table {
+  width: 1499px;
+  .table-content {
+    height: 880px;
+    overflow-y: auto;
+    overflow-x: hidden;
+  }
+  .th {
+    width: 1499px;
+    height: 151px;
+    background: url('@/assets/images/map/rightMenu/th.png') no-repeat;
+    display: flex;
+  }
+  .tr {
+
+    height: 139px;
+    background: url('@/assets/images/map/rightMenu/td.png') no-repeat;
+    //margin-left: -23px;
+    display: flex;
+    padding-right: 20px;
+    &:hover {
+      background: url('@/assets/images/map/rightMenu/td_checked.png') no-repeat;
+    }
+  }
+  .td {
+    flex: 1;
+    color: #edfaff;
+    font-size: 38px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+  }
+  .td-text {
+    /* 设置字体透明 */
+    color: transparent;
+    /* 使用 -webkit-background-clip 属性将背景剪裁至文本形状 */
+    -webkit-background-clip: text;
+    /* 非Webkit内核浏览器需要使用标准前缀 */
+    background-clip: text;
+    font-family: 'YouSheBiaoTiHei';
+    /* 设置线性渐变，从红色渐变到蓝色 */
+    background-image: linear-gradient(to bottom, #ffffff 50%, #3075d3 100%);
+    font-size: 48px;
+  }
+  .text-green {
+    background-image: linear-gradient(to bottom, #ffffff 50%, #40c75f 100%);
+  }
+  .text-danger {
+    background-image: linear-gradient(to bottom, #ffffff 50%, #ff2f3c 100%);
+  }
+}
 
+.title {
+  font-size: 60px;
+  position: absolute;
+  top: 12px;
+  left: 210px;
+}
 </style>

src/views/globalMap/RightMenu/index.vue

@@ -35,12 +35,7 @@
         <!--无人机-->
         <RiverMonitor v-if="menuState.showMenu && menuState.menuData[menuState.activeIndex]?.name === '河道监测'" />
         <!--实时标绘-->
-        <OnlinePlotting
-          v-if="menuState.showMenu && menuState.menuData[menuState.activeIndex]?.name === '实时标绘'"
-          :mouseToolState="mouseToolState"
-          :drawing="drawing"
-          @updateDrawing="updateDrawing"
-        />
+        <OnlinePlotting v-if="menuState.showMenu && menuState.menuData[menuState.activeIndex]?.name === '实时标绘'" />
       </div>
     </div>
   </div>
@@ -120,10 +115,6 @@ const updateMenu = (type, menu) => {
   }
 };
 
-const updateDrawing = (value: boolean) => {
-  emits('update:drawing', value);
-};
-
 defineExpose({ handleMenu, clickContractMenu, updateMenu });
 </script>