feat(uav列表): 实现无人机和机库列表的实时更新功能

添加WebSocket监听和事件处理机制，支持根据场景(scene)参数更新不同列表
保留原有列表项的折叠和选中状态，优化数据更新逻辑
移除重复的事件监听，避免内存泄漏

src/components/MMCFlightControlCenter/components/hangar/components/list/index.vue

@@ -52,6 +52,7 @@ export default {
   name: "List",
   props: {},
   components: { Item },
+  inject: ["bus"],
   data() {
     return {
       list: /* mock */[],
@@ -101,6 +102,7 @@ export default {
   mounted() {
     this.getList();
     this.bus.$on("uas-device-getTree-message", this.initList);
+    this.bus.$on("update-hangar-list", this.updateHangarList);
     // this.timeHandle = setInterval(() => {
     //   this.getList();
     // }, 10000);
@@ -122,6 +124,44 @@ export default {
     onUavSearch() {
       this.getList();
     },
+    /**
+     * 更新机库列表数据
+     */
+    updateHangarList(data) {
+      console.log('接收到hangar列表更新数据:', data);
+      
+      // 保留原有的isCheck和collapse状态
+      const oldList = this.list;
+      const newList = JSON.parse(JSON.stringify(data)).map(newItem => {
+        const oldItem = oldList.find(old => old.id === newItem.id);
+        if (oldItem) {
+          if (oldItem.isCheck !== undefined) {
+            newItem.isCheck = oldItem.isCheck;
+          }
+          if (oldItem.collapse !== undefined) {
+            newItem.collapse = oldItem.collapse;
+          }
+        }
+        // 如果有子设备，也需要保留子设备的isCheck和collapse状态
+        if (newItem.children && oldItem && oldItem.children) {
+          newItem.children = newItem.children.map(newChild => {
+            const oldChild = oldItem.children.find(old => old.id === newChild.id);
+            if (oldChild) {
+              if (oldChild.isCheck !== undefined) {
+                newChild.isCheck = oldChild.isCheck;
+              }
+              if (oldChild.collapse !== undefined) {
+                newChild.collapse = oldChild.collapse;
+              }
+            }
+            return newChild;
+          });
+        }
+        return newItem;
+      });
+      
+      this.list = newList;
+    },
   },
 };
 </script>

src/components/MMCFlightControlCenter/components/uavApplications/components/uavList/components/list/components/item/index.vue

@@ -3,7 +3,7 @@
     <div class="uav-item-box">
       <div
         class="uav-item-inner"
-        @click="$set(data, 'collapse', !data.collapse)"
+       @click="$set(data, 'collapse', !data.collapse)"
       >
         <div class="title-box">
           <span
@@ -91,7 +91,8 @@
                 </div>
               </template>-->
               <template>
-                <div class="uav_version status-icon cp">
+                <div class="uav_versioncp">
+                  <!-- status-icon -->
                   <!-- <img src="./assets/images/I.svg" />
                   <img src="./assets/images/I.svg" />-->
                   {{ device.modelName }}

src/components/MMCFlightControlCenter/components/uavApplications/components/uavList/components/list/index.vue

@@ -39,13 +39,63 @@ export default {
   },
   watch: {
     list: {
+      immediate: true,
+      deep: true,
       handler(val) {
+        if (!val || !Array.isArray(val)) {
+          this.wsList = [];
+          return;
+        }
+        
+        // 保留原有的状态（collapse 和 isCheck）
+        if (this.wsList && this.wsList.length > 0) {
+          const preserveStates = (newItems, oldItems) => {
+            newItems.forEach(newItem => {
+              const oldItem = oldItems.find(old => old.deptId === newItem.deptId);
+              if (oldItem) {
+                // 保留 collapse 状态
+                if (oldItem.hasOwnProperty('collapse')) {
+                  this.$set(newItem, 'collapse', oldItem.collapse);
+                } else {
+                  // 如果旧数据没有 collapse 属性，设置默认值为 false（收起状态）
+                  this.$set(newItem, 'collapse', false);
+                }
+                // 保留 isCheck 状态
+                if (oldItem.hasOwnProperty('isCheck')) {
+                  this.$set(newItem, 'isCheck', oldItem.isCheck);
+                }
+              } else {
+                // 如果是新项目，设置默认的 collapse 状态
+                this.$set(newItem, 'collapse', false);
+              }
+              // 处理子项
+              if (newItem.child && oldItem && oldItem.child) {
+                preserveStates(newItem.child, oldItem.child);
+              }
+            });
+          };
+          preserveStates(val, this.wsList);
+        } else {
+          // 初始化时确保每个项目都有 collapse 状态
+          const initializeStates = (items) => {
+            items.forEach(item => {
+              if (!item.hasOwnProperty('collapse')) {
+                this.$set(item, 'collapse', false);
+              }
+              // 处理子项
+              if (item.child && Array.isArray(item.child)) {
+                initializeStates(item.child);
+              }
+            });
+          };
+          initializeStates(val);
+        }
         this.wsList = val;
       },
     },
   },
   mounted() {
-    this.wsList = this.list;
+    // watcher with immediate: true will handle initialization
   },
   methods: {
   },

src/components/MMCFlightControlCenter/index.vue

@@ -91,9 +91,10 @@ export default {
   },
   data() {
     return {
+      time:null,
       bus: new Vue(),
       ws: null,
-      uavWs:null
+      uavWs: null
     };
   },
   provide() {
@@ -103,14 +104,6 @@ export default {
     };
   },
   watch: {
-    'scene': {
-      handler(newVal) {
-        if (newVal) {
-          this.reset()
-        }
-
-      },
-    },
     userInfo: {
       immediate: true,
       handler() {
@@ -200,6 +193,7 @@ export default {
 
   },
   beforeCreate() {
+    clearInterval(this.time)
     crashMonitor({
       alert: this.$alert,
     });
@@ -228,6 +222,7 @@ export default {
       window.$mmc_stl.viewer = this.cesiumViewer;
     }
 
+
     // 连接ws监听接管请求数据
     let url = this.url.wsUrl
     let token = this.$store.state.MMCFlightControlCenter.token
@@ -286,11 +281,6 @@ export default {
         // 接管申请同意
         case "uas-device-take-agree-message":
           console.log('同意接管')
-          this.bus.$emit("uas-device-take-agree-message", {
-            type,
-            content,
-            msg,
-          });
           break;
 
         // 接管申请拒绝
@@ -308,7 +298,7 @@ export default {
             title: "接管消息",
             message: msg,
             duration: 30000,
-            offset:40
+            offset: 40
           });
           break;
 
@@ -318,12 +308,34 @@ export default {
             title: "接管消息",
             message: msg,
             duration: 30000,
-            offset:40
+            offset: 40
           });
           break;
       }
     };
-    uavSocket.onopen = function () {
+   
+    
+    uavSocket.onopen = () => {
+      let user = JSON.parse(localStorage.getItem('tmj'))
+      console.log(this.$router,'xxx');
+      
+      if(user){
+        clearInterval(this.time)
+  this.time=  setInterval(() => {
+         const scene = this.getQueryParam('scene');
+        uavSocket.send(JSON.stringify({
+          type: "uas-device-getTree-message",
+          content:JSON.stringify( {
+           text:JSON.stringify({
+             deviceType:scene,
+             serchKey: this.getCurrentSearchKey(),
+           }),
+            toUserId:user.user.userId,
+          },)
+        }));
+      }, 6000);
+      }
+
     };
     uavSocket.onmessage = (event) => {
       let data = JSON.parse(event.data || "{}");
@@ -332,17 +344,22 @@ export default {
       const msg = content.message;
       switch (type) {
         case "uas-device-take-message":
-        console.log(msg,'msg');
-        break;
+          break;
         // 刷新无人机列表
         case "uas-device-getTree-message":
-          this.bus.$emit("uas-device-getTree-message", {
-            type,
-            content,
-            msg,
-          });
-          break;
+       let res =  JSON.parse(data.content)
+         const scene = this.getQueryParam('scene');
+        // 根据scene值决定更新哪个组件的数据
+        if (scene == 1) {
+          // scene为1时，更新uavList组件的数据
+          this.bus.$emit("update-uav-list", res.text);
+        } else if (scene == 2) {
+          // scene为2时，更新hangar list组件的数据
+          this.bus.$emit("update-hangar-list", res.text);
+        }
         
+          break;
+
       }
     };
   },
@@ -351,6 +368,49 @@ export default {
     this.uavWs.close();
   },
   methods: {
+    // 获取当前搜索关键字
+    getCurrentSearchKey() {
+      const scene = this.getQueryParam('scene');
+      if (scene == 1) {
+        // 无人机场景，获取 uavList 组件的搜索内容
+        const uavListComponent = this.$children.find(child => child.$options.name === 'UavApplications');
+        if (uavListComponent) {
+          const uavList = uavListComponent.$children.find(child => child.$options.name === 'UavList' || child.uavSearchContent !== undefined);
+          return uavList ? uavList.uavSearchContent || '' : '';
+        }
+      } else if (scene == 2) {
+        // 机库场景，获取 hangar 组件的搜索内容
+        const hangarComponent = this.$children.find(child => child.$options.name === 'Hangar');
+        if (hangarComponent) {
+          const hangarList = hangarComponent.$children.find(child => child.$options.name === 'List' || child.searchContent !== undefined);
+          return hangarList ? hangarList.searchContent || '' : '';
+        }
+      }
+      
+      return '';
+    },
+     // 处理搜索变化事件
+
+     getQueryParam(paramName) {
+  // 获取当前页面的完整 URL
+  const url = window.location.href;
+
+  // 检查 URL 中是否包含 hash 部分
+  const hashIndex = url.indexOf('#');
+  if (hashIndex !== -1) {
+    // 如果有 hash 部分，提取 hash 部分
+    const hash = url.substring(hashIndex + 1); // 去掉 '#' 符号
+    const hashParams = new URLSearchParams(hash.split('?')[1]); // 提取 hash 中的查询参数部分
+    const value = hashParams.get(paramName);
+    if (value !== null) {
+      return value; // 如果在 hash 中找到参数，直接返回
+    }
+  }
+
+  // 如果在 hash 中没有找到，检查普通的查询参数
+  const searchParams = new URLSearchParams(window.location.search);
+  return searchParams.get(paramName); // 返回普通查询参数中的值
+},
     reset() {
       let cesiumEl = document.querySelector(".cesium-viewer");