无人机、监控列表

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%;