无人机、监控列表

src/views/business/alarm/monitor.vue

@@ -1,16 +1,18 @@
 <template>
-  <div class="monitor-container">
+  <div class="monitor-container" @mousedown="drag">
     <div class="tab">
         <div v-for="(item,index) in tabs"
             :key="index"
             :class="['tab-item',active === index ? 'active' : '']"
             @click="handle(index)">{{item}}</div>
     </div>
+    <div class="resize" :style="{ resize: 'both', overflow: 'auto' }"></div>
     <!-- <div class="flv-container"><FlvPlayerComponent :url="uavDialog.url"/></div> -->
   </div>
 </template>
 <script setup>
 import { ref } from 'vue'
+import { dragEvent, resizeEvent } from '@/utils/common'
 import FlvPlayerComponent from '@/components/FlvPlayer/index.vue'
 import { getAssetsFile } from '@/utils/common'
 const tabs = [
@@ -20,6 +22,26 @@ const active = ref(0)
 
 const handle = (index) => {
     active.value = index
+}
+/**
+ * 拖拽事件
+ * @param e
+ *
+ */
+ const drag = (e) => {
+  if(e.target.className === 'resize') {
+resizeEvent(e, 'resize', (i) => {
+  document.querySelector('.monitor-container').style.height = i.height + 'px'
+  document.querySelector('.monitor-container').style.width = i.width + 'px'
+    })
+  }else{
+dragEvent(e, 'monitor-container', () => {
+    })
+  }
+
+}
+const resize = (e) => {
+
 }
 </script>
 <style scoped lang="scss">
@@ -28,6 +50,7 @@ const handle = (index) => {
   position: fixed;
   right: 40px;
   bottom: 46px;
+
 //   display: flex;
 //   flex-direction: column;
 //   gap: 20px;
@@ -38,6 +61,13 @@ const handle = (index) => {
   border: 1px solid;
   border-image: linear-gradient(270deg, rgba(42, 159, 255, 0.2), rgba(42, 159, 255, 0.8)) 1 1;
   padding: 20px;
+  .line{
+    position: absolute;
+    top: 0 !important;
+    left: 0 !important;
+    width: 100%;
+    height: 20px;
+  }
   .tab{
     display: flex;
     .tab-item{
@@ -64,5 +94,12 @@ const handle = (index) => {
     width: 100%;
     margin-top: 10px;
   }
+  .resize{
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    width: 524px;
+  height: 386px;
+  }
 }
 </style>

src/views/business/identification/index.vue

@@ -1,44 +1,24 @@
 <template>
   <!-- 识别记录页面 -->
-  <DialogComponent @mousedown="drag" :style="{ resize: 'both', overflow: 'auto' }" title="识别记录" width="1800" :draggable="true" :modal="false" @close="close">
-     <AlarmCom ref="alarm"/>
+  <DialogComponent :style="{ resize: 'both', overflow: 'auto' }" v-if="type === 'alarm'" title="识别记录" width="1800" :draggable="true" :modal="false" @close="close">
+     <AlarmCom/>
   </DialogComponent>
 </template>
 <script setup>
-import { computed, ref } from 'vue'
+import { computed } from 'vue'
 import DialogComponent from '@/components/Dialog/screen.vue'
 import AlarmCom from './alarm/index.vue'
 import { useRouter } from 'vue-router'
 import useMapStore from '@/store/modules/map'
-import { dragEvent, resizeEvent } from '@/utils/common'
 
 const mapStore = useMapStore()
 const router = useRouter()
-const alarm = ref(null)
+const type = computed(() => mapStore.dialog.type)
+
 const close = () => {
   mapStore.updateDialog(false)
 }
-/**
- * 拖拽事件
- * @param e
- *
- */
- const drag = (e) => {
-  if(e.target.className.includes('el-dialog-title')) {
-     dragEvent(e, 'el-dialog-title', () => {
-      if(alarm.value.appPlayer) {
-        alarm.value.appPlayer[0].onResize(false)
-      }
-    })
-  }else{
-    resizeEvent(e, 'el-dialog', () => {
-      if(alarm.value?.appPlayer) {
-        alarm.value.appPlayer[0].onResize()
-      }
-    })
-  }
 
-}
 </script>
 <style scoped lang="scss">
 .el-tabs {

src/views/business/wall/tree.vue

@@ -17,6 +17,7 @@
 
 <script setup>
 import { ref, reactive, onMounted } from 'vue'
+import { videoCameraFindPage, findUavPage, findEnvPage, dsVideoList } from '@/api/device.js'
 
 const emit = defineEmits([ 'handle' ])
 
@@ -26,31 +27,75 @@ const treeType = ref('')
 const refresh = (type) => {
     treeType.value = type
     if(type === 'CCTV') {
-        tableData.value = [
-            { videoName: '温州鹿城屯前江润大楼', children: [ { videoName: '浙江-温州-江润大楼-球机1', videoCode: 'fd3b45e1429a4e47bba873af602a9bed' },
-                { videoName: '浙江-温州-江润大楼-球机2', videoCode: 'b7f9fff8e3504e419cb2f5fad5b2845c' },
-                { videoName: '浙江-温州-江润大楼-球机3', videoCode: '15a73f6bfa6f46c5bad965f0ead70059' },
-                { videoName: '浙江-温州-江润大楼-球机4', videoCode: '55dafd6aef164fd6a3af331419058c56' } ]
-            },
-            { videoName: '永嘉桥下坦头南', children: [ { videoName: '浙江-温州-永嘉桥下坦头南-球机1', videoCode: '5bedb9f9f6c94d30821b6cca1428bd1a' },
-                { videoName: '浙江-温州-永嘉桥下坦头南-球机2', videoCode: 'd93a735382c74a4c9e8ba3ed25a3b1ed' },
-                { videoName: '浙江-温州-永嘉桥下坦头南-球机3', videoCode: '1ce2a9c72f704fc09da9d77426b58775' },
-                { videoName: '浙江-温州-永嘉桥下坦头南-球机4', videoCode: '43cf81a75dea47b688bc9586db63cc04' } ]
+      const params = {
+        pageNo: 1,
+        pageSize: 9999
+      }
+      videoCameraFindPage(params).then(res => {
+       if (res.success) {
+        const data = res.result.records
+        const groupedData = {}
+        data.forEach(item => {
+          const belong = item.videoBelong
+          if (!groupedData[belong]) {
+            groupedData[belong] = []
+          }
+          groupedData[belong].push(item)
+        })
+        // 转换为树形结构
+        const result = Object.keys(groupedData).map(belong => {
+          const children = groupedData[belong]
+          if (children.length === 1) {
+            // 只有一个子元素，直接返回该子元素
+            return children[0]
+          }
+            // 有多个子元素，返回分组节点
+            return {
+              videoName: belong,
+              longitude: children[0].longitude,
+              latitude: children[0].latitude,
+              children: children
             }
-        ]
+
+        })
+        tableData.value = result
+       }
+      })
     }else if(type === 'UAV') {
-        tableData.value = [
-            { videoName: '鹿城山福临江工业区南', children: [ { videoName: '浙江-温州-鹿城山福临江工业区南-无人机1', videoCode: 'fd3b45e1429a4e47bba873af602a9bed', status: 'offline' },
-                { videoName: '浙江-温州-鹿城山福临江工业区南-无人机2', videoCode: 'b7f9fff8e3504e419cb2f5fad5b2845c', status: 'online' },
-                { videoName: '浙江-温州-鹿城山福临江工业区南-无人机3', videoCode: '15a73f6bfa6f46c5bad965f0ead70059', status: 'online' },
-                { videoName: '浙江-温州-鹿城山福临江工业区南-无人机4', videoCode: '55dafd6aef164fd6a3af331419058c56', status: 'online' } ]
-            },
-            { videoName: '永嘉梅岙镇', children: [ { videoName: '浙江-温州-永嘉梅岙镇-无人机-球机1', videoCode: '5bedb9f9f6c94d30821b6cca1428bd1a', status: 'online' },
-                { videoName: '浙江-温州-永嘉梅岙镇-无人机-球机2', videoCode: 'd93a735382c74a4c9e8ba3ed25a3b1ed', status: 'online' },
-                { videoName: '浙江-温州-永嘉梅岙镇-无人机-球机3', videoCode: '1ce2a9c72f704fc09da9d77426b58775', status: 'online' },
-                { videoName: '浙江-温州-永嘉梅岙镇-无人机-球机4', videoCode: '43cf81a75dea47b688bc9586db63cc04', status: 'offline' } ]
+      const params = {
+        pageNo: 1,
+        pageSize: 9999
+      }
+      findUavPage(params).then(res => {
+       if (res.success) {
+        const data = res.result.records
+        const groupedData = {}
+        data.forEach(item => {
+          const belong = item.videoBelong
+          if (!groupedData[belong]) {
+            groupedData[belong] = []
+          }
+          groupedData[belong].push(item)
+        })
+        // 转换为树形结构
+        const result = Object.keys(groupedData).map(belong => {
+          const children = groupedData[belong]
+          if (children.length === 1) {
+            // 只有一个子元素，直接返回该子元素
+            return children[0]
+          }
+            // 有多个子元素，返回分组节点
+            return {
+              videoName: belong,
+              longitude: children[0].longitude,
+              latitude: children[0].latitude,
+              children: children
             }
-        ]
+
+        })
+        tableData.value = result
+       }
+      })
     }
 
 }
@@ -73,6 +118,8 @@ defineExpose({
   width: 25%;
   .el-tree{
         background: transparent;
+        height: -webkit-fill-available;
+    overflow: auto;
       }
       :deep(.el-tree-node){
         width: 100%;