无人机页面

src/api/emergencyCommandMap/Drone.ts

@@ -0,0 +1,9 @@
+import request from '@/utils/request';
+// 无人机-部门树
+export function getDroneTree(params) {
+  return request({
+    url: '/api/system/user/avcon/deptTree',
+    method: 'get',
+    params: params
+  });
+}

src/views/emergencyCommandMap/LeftSection/Communication.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="communication-container">
     <div class="tabs">
-      <div v-for="(item, index) in menu" :key="index" :class="activeIndex === index ? 'tab tab_active' : 'tab'">
+      <div v-for="(item, index) in menu" :key="index" :class="activeIndex === index ? 'tab tab_active' : 'tab'" @click="activeIndex = index">
         {{ item.name }}
       </div>
     </div>
@@ -97,6 +97,8 @@
         </div>
       </div>
     </div>
+    <Drone v-show="activeIndex === 1"></Drone>
+    <IndividualEquipment v-show="activeIndex === 1"></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">
@@ -111,6 +113,8 @@
 import { Search } from '@element-plus/icons-vue';
 import { getAvconDeptList, getAvconDeptTree, getStartMiniParam, getStartMiniWithNoParam } from '@/api/emergencyCommandMap/communication';
 import { deepClone } from '@/utils';
+import Drone from './Drone.vue';
+import IndividualEquipment from './IndividualEquipment.vue';
 
 const proxy = getCurrentInstance()?.proxy;
 

src/views/emergencyCommandMap/LeftSection/Drone.vue

@@ -0,0 +1,113 @@
+<template>
+  <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">
+          <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="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) => {
+};
+const getCheckedClass = () => {
+};
+const handleChecked = () => {
+};
+const handleChecked2 = (item) => {
+};
+</script>
+
+<style scoped lang="scss">
+.content {
+  display: flex;
+  align-items: center;
+  //height: 100%;
+  .left-content {
+    flex: 1;
+    margin-right: 20px;
+
+    .search-box {
+      display: flex;
+
+      .custom-input {
+        width: 305px;
+      }
+    }
+  }
+  .right-content {
+    flex-grow: 1;
+    flex: 1;
+  }
+}
+</style>

src/views/emergencyCommandMap/LeftSection/IndividualEquipment.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+
+</template>
+
+<style scoped lang="scss">
+
+</style>