单兵设备

src/views/emergencyCommandMap/LeftSection/Communication.vue

@@ -98,7 +98,7 @@
       </div>
     </div>
     <Drone v-show="activeIndex === 1"></Drone>
-    <IndividualEquipment v-show="activeIndex === 1"></IndividualEquipment>
+    <IndividualEquipment v-show="activeIndex === 2"></IndividualEquipment>
     <Dialog v-if="showJoinMeeting" customShow type="xs" height="500px" title="加入会议" @confirm="handleJoinMeeting" @close="closeDialog">
       <el-form ref="formRef" :model="meetingForm" :rules="rules">
         <el-form-item label="会议号" label-width="200px" prop="roomcode">

src/views/emergencyCommandMap/LeftSection/Drone.vue

@@ -2,7 +2,7 @@
   <div class="content">
     <div class="left-content">
       <div class="search-box">
-        <el-input v-model="queryParams.equipment" class="custom-input" placeholder="搜索设备" style="width: 487px" @keyup.enter="getTree">
+        <el-input v-model="queryParams.equipment" class="custom-input" placeholder="搜索设备" @keyup.enter="getTree">
           <template #prefix>
             <el-icon class="el-input__icon"><search /></el-icon>
           </template>
@@ -14,29 +14,6 @@
             <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="right-content video-list">
@@ -91,9 +68,9 @@ const handleChecked2 = (item) => {
 <style scoped lang="scss">
 .content {
   display: flex;
-  align-items: center;
-  //height: 100%;
+  height: 430px;
   .left-content {
+    height: 100%;
     flex: 1;
     margin-right: 20px;
 
@@ -101,11 +78,32 @@ const handleChecked2 = (item) => {
       display: flex;
 
       .custom-input {
-        width: 305px;
+        width: 100%;
+      }
+    }
+    :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;
       }
     }
   }
   .right-content {
+    height: 100%;
     flex-grow: 1;
     flex: 1;
   }

src/views/emergencyCommandMap/LeftSection/IndividualEquipment.vue

@@ -1,11 +1,105 @@
+<template>
+  <div class="content">
+    <div class="left-content">
+      <div class="search-box">
+        <el-input v-model="queryParams.equipment" class="custom-input" placeholder="搜索设备" @keyup.enter="getTree">
+          <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>
+    </div>
+    <div class="right-content video-list">
+      <HKVideo :dot_data="data" autoplay />
+    </div>
+  </div>
+</template>
+
 <script setup lang="ts">
+import { Search } from '@element-plus/icons-vue';
+import { getAvconDeptTree } from '@/api/emergencyCommandMap/communication';
+import { getDroneTree } from '@/api/emergencyCommandMap/Drone';
+interface QueryParams {
+  equipment: string;
+}
+const queryParams = reactive<QueryParams>({
+  equipment: ''
+});
+// const queryParams2 = reactify({});
+const options = ref([]);
+const treeData = ref([]);
+let data = ref({
+  'name': '东镇街道长塘居委会大湴村边2',
+  'invideoIds': true,
+  'area': '茂名市视频数据共享管理平台/茂名市应急管理局/信宜市应急管理局/信宜防溺水监控/东镇街道防溺水（移动）/长塘村',
+  'ip': '级联',
+  'status': '在线',
+  'status_lifetime': '68天23.79小时',
+  'record_status': '--',
+  'inspection_datetime': '2024-07-15 16:24:09',
+  'video_code_int': '44098301581314000465',
+  'video_code': '44098301581314000465',
+  'longitude': 110.908867,
+  'latitude': 22.357185
+});
 
+const getTree = () => {
+  getDroneTree(queryParams).then((res) => {
+    treeData.value = res.data;
+  });
+};
+const handleNodeClick = (data) => {
+};
 </script>
 
-<template>
-
-</template>
-
 <style scoped lang="scss">
+.content {
+  display: flex;
+  height: 430px;
+  .left-content {
+    height: 100%;
+    flex: 1;
+    margin-right: 20px;
+
+    .search-box {
+      display: flex;
 
+      .custom-input {
+        width: 100%;
+      }
+    }
+    :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;
+      }
+    }
+  }
+  .right-content {
+    height: 100%;
+    flex-grow: 1;
+    flex: 1;
+  }
+}
 </style>