feat(uav列表项): 添加MQTT连接检查并优化面板显示逻辑

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

 <template>
   <div class="cpt-app-uav-list">
     <div class="uav-item-box">
-      <div class="uav-item-inner" @click="$set(data, 'collapse', !data.collapse)">
+      <div
+        class="uav-item-inner"
+        @click="$set(data, 'collapse', !data.collapse)"
+      >
         <div class="title-box">
-          <span class="el-icon-caret-right" :class="{ collapse: data.collapse }"></span>
-          <img class="level-icon" src="./assets/images/uav_item1_1.png" v-if="level === 1" />
-          <img class="level-icon" src="./assets/images/uav_item2.svg" v-if="level === 2" />
-          <img class="level-icon" src="./assets/images/uav_item3.svg" v-if="level === 3" />
+          <span
+            class="el-icon-caret-right"
+            :class="{ collapse: data.collapse }"
+          ></span>
+          <img
+            class="level-icon"
+            src="./assets/images/uav_item1_1.png"
+            v-if="level === 1"
+          />
+          <img
+            class="level-icon"
+            src="./assets/images/uav_item2.svg"
+            v-if="level === 2"
+          />
+          <img
+            class="level-icon"
+            src="./assets/images/uav_item3.svg"
+            v-if="level === 3"
+          />
           <div class="org-name" :title="data.name">{{ data.name }}</div>
-          <i class="refresh-icon el-icon-refresh-right" v-if="level === 1" @click.stop="$emit('refresh')" />
+          <i
+            class="refresh-icon el-icon-refresh-right"
+            v-if="level === 1"
+            @click.stop="$emit('refresh')"
+          />
         </div>
         <div class="online-info">
           （共 {{ data.onLineCount + data.offLineCount }} 架
-          <span class="ml10" :class="{ online: data.onLineCount }">{{ data.onLineCount }} 在线</span>
+          <span class="ml10" :class="{ online: data.onLineCount }"
+            >{{ data.onLineCount }} 在线</span
+          >
           /
           {{ data.offLineCount }} 离线）
         </div>
       </div>
       <div class="uav-item-child-box" :class="{ collapse: data.collapse }">
-        <Item v-for="child in data.child" :key="child.deptId" :data="child" :level="level + 1"
-          @refresh="$emit('refresh')" />
-        <div class="device-item-box" :class="{ online: device.isOnline }" v-for="device in data.deviceDOList"
-          :key="`device_${device.deviceId}`">
+        <Item
+          v-for="child in data.child"
+          :key="child.deptId"
+          :data="child"
+          :level="level + 1"
+          @refresh="$emit('refresh')"
+        />
+        <div
+          class="device-item-box"
+          :class="{ online: device.isOnline }"
+          v-for="device in data.deviceDOList"
+          :key="`device_${device.deviceId}`"
+        >
           <div class="device-name">
             <!-- <span
               style="margin-right:10px"
               :class="device.status==1&&device.currentOperator==1? 'blue' : device.status==1&&device.currentOperator!=1 ?'yellow':'' "
               :title="device.name"
             >{{device.name}}</span>-->
-            <span class="device-name-text" style="margin-right:10px" :class="'blue'" :title="device.name">{{ device.name }}</span>
-            <span style="color:#31DB24 " class="dib" v-if="device.isOnline">(在线)</span>
+            <span
+              class="device-name-text"
+              style="margin-right: 10px"
+              :class="'blue'"
+              :title="device.name"
+              >{{ device.name }}</span
+            >
+            <span style="color: #31db24" class="dib" v-if="device.isOnline"
+              >(在线)</span
+            >
             <span v-else class="dib">(离线)</span>
             <div class="symbol-icon-box">
               <!-- <template v-if="device.modelName && device.modelName.includes('入云龙1')">
@@ -58,27 +99,67 @@
             </div>
           </div>
           <div class="device-fns">
-            <div v-if="showVideoPanel" class="iconfont icon-luxiang_xianxing"
-              :class="{ active: uav && device.deviceId === uav.deviceId && uav.showPlayer }" title="视频"
-              @click="onShowPlayer(device)" v-hover></div>
-            <div class="iconfont icon-kongzhi_xianxing"
-              :class="{ active: uav && device.deviceId === uav.deviceId && uav.showPanel }" title="控制面板"
-              @click="onShowPanel(device)" v-hover></div>
-            <div class="takeover" title="接管" @click="onTakeOver(device, data.name)" v-hover>
-              <img src="./assets/images/jieguan_active.svg" v-if="device.currentOperator === userInfo.id" />
+            <div
+              v-if="showVideoPanel"
+              class="iconfont icon-luxiang_xianxing"
+              :class="{
+                active:
+                  uav && device.deviceId === uav.deviceId && uav.showPlayer,
+              }"
+              title="视频"
+              @click="onShowPlayer(device)"
+              v-hover
+            ></div>
+            <div
+              class="iconfont icon-kongzhi_xianxing"
+              :class="{
+                active:
+                  uav && device.deviceId === uav.deviceId && uav.showPanel,
+              }"
+              title="控制面板"
+              @click="onShowPanel(device)"
+              v-hover
+            ></div>
+            <div
+              class="takeover"
+              title="接管"
+              @click="onTakeOver(device, data.name)"
+              v-hover
+            >
+              <img
+                src="./assets/images/jieguan_active.svg"
+                v-if="device.currentOperator === userInfo.id"
+              />
               <img src="./assets/images/jieguan.svg" v-else />
             </div>
           </div>
         </div>
       </div>
     </div>
-    <el-dialog title="接管确认" :visible.sync="takeOverVisible" width="20%" :modal-append-to-body="false"
-      :append-to-body="false" :close-on-click-modal="false" @close="takeLoading = false">
+    <el-dialog
+      title="接管确认"
+      :visible.sync="takeOverVisible"
+      width="20%"
+      :modal-append-to-body="false"
+      :append-to-body="false"
+      :close-on-click-modal="false"
+      @close="takeLoading = false"
+    >
       <span>是否请求接管 {{ departmentName }} 下的 {{ takeDevice.name }}</span>
       <span slot="footer" class="dialog-footer">
         <el-button @click="takeOverVisible = false">取 消</el-button>
-        <el-button @click="onForceTakeOver" type="danger" :loading="forceTakeLoading">强制接管</el-button>
-        <el-button type="primary" @click="onApplyTakeOver" :loading="takeLoading">确 认</el-button>
+        <el-button
+          @click="onForceTakeOver"
+          type="danger"
+          :loading="forceTakeLoading"
+          >强制接管</el-button
+        >
+        <el-button
+          type="primary"
+          @click="onApplyTakeOver"
+          :loading="takeLoading"
+          >确 认</el-button
+        >
       </span>
     </el-dialog>
   </div>
@@ -124,8 +205,14 @@ export default {
       "userInfo",
       "showAirwayEdit",
       "deptId",
-      'showVideoPanel',
+      "showVideoPanel",
     ]),
+    mqttUrl() {
+      return this.$store.state.MMCFlightControlCenter.mqttUrl;
+    },
+    mqttToken() {
+      return this.$store.state.MMCFlightControlCenter.mqttToken;
+    },
   },
   watch: {
     showAirwayEdit(newVal) {
@@ -160,7 +247,7 @@ export default {
           title: "接管消息",
           message: msg,
           duration: 30000,
-          offset:40
+          offset: 40,
         });
         this.$emit("refresh");
         this.takeOverVisible = false;
@@ -169,7 +256,7 @@ export default {
           title: "接管消息",
           message: msg,
           duration: 30000,
-          offset:40
+          offset: 40,
         });
         this.$message.warning("申请接管拒绝");
       }
@@ -196,7 +283,7 @@ export default {
       setTimeout(() => {
         if (this.takeLoading) {
           this.$message.error(`接管失败，申请单位未同意`);
-          this.takeLoading = false
+          this.takeLoading = false;
         }
       }, 5500);
     },
@@ -214,7 +301,7 @@ export default {
           this.takeOverVisible = false;
           this.$emit("refresh");
         }
-      } catch (e) { }
+      } catch (e) {}
 
       this.forceTakeLoading = false;
     },
@@ -256,7 +343,7 @@ export default {
             this.$message.success(`已退出接管${uav.name}`);
             this.$emit("refresh");
           }
-        } catch (e) { }
+        } catch (e) {}
       } else {
         // 已被接管且接管人不是自已的情况下, 需要申请接管
         this.takeDevice = uav;
@@ -264,9 +351,30 @@ export default {
       }
     },
     /**
-     * 显示面板
+     * 显示面板 点击面板时判断mqtt是否连接
      */
     async onShowPanel(item) {
+      let client = this.$store.state.MMCMQTT.client;
+      console.log("client", client);
+      if (!client || !client.connected) {
+        try {
+          this.$store
+            .dispatch("MMCMQTT/init", {
+              url: this.mqttUrl,
+              password: this.mqttToken,
+            })
+            .then(() => {
+              console.log("mqtt连接成功");
+            });
+        } catch (e) {
+          console.log("mqtt失败", e);
+        }
+        // setTimeout(() => {
+        //   this.onShowPanel(item);
+        // }, 200);
+        // return;
+      }
+
       // 选中与取消选中
       if (this.uav?.deviceId === item.deviceId) {
         // 已打开播放器的情况下只需要展示数据面板
@@ -523,12 +631,12 @@ export default {
           width: calc(100% - 90px);
           white-space: nowrap;
           font-size: 13px;
-          .device-name-text{
+          .device-name-text {
             display: inline-block;
             max-width: 100%;
             white-space: nowrap;
             text-overflow: ellipsis;
-            overflow: hidden
+            overflow: hidden;
           }
         }
 
@@ -634,4 +742,4 @@ export default {
     height: 8px;
   }
 }
-</style>
+</style>
\ No newline at end of file