feat(controlPanel): 添加主机库状态显示并优化样式

src/components/MMCFlightControlCenter/components/hangar/components/controlPanel/components/controlLeft/components/airwayList/components/leapFrogFligh/index.vue

 <template>
   <div class="stl-timed-task">
+    <div class="cf m5 f12">
+      主机库状态：<span
+        :class="apronInfo.masterStatus ? 'green' : ' red'"
+        >{{ apronInfo.masterStatus ? '正常' : apronInfo.descText }}</span
+      >
+    </div>
     <div class="timed-task-header">
       <div class="header__column flex2">序号</div>
       <div class="header__column flex2">机库名称</div>
+      
       <div class="header__column status">状态</div>
       <div class="header__column flex2">距离(km)</div>
     </div>
-    <div class="timed-task-main" v-loading="loading" element-loading-background="rgba(0, 0, 0, 0.8)">
-      <div class="row" :class="{ single: i % 2 != 0 }" v-for="(item, i) in skipList" :key="i">
+    <div
+      class="timed-task-main"
+      v-loading="loading"
+      element-loading-background="rgba(0, 0, 0, 0.8)"
+    >
+      <div
+        class="row"
+        :class="{ single: i % 2 != 0 }"
+        v-for="(item, i) in skipList"
+        :key="i"
+      >
         <div class="row__column flex2">
           <span class="f12">
             <span class="mr10">
-              <el-checkbox @change="changeFn(item)" v-model="item.active" :label="item.i"
-                :disabled="!item.slaveStatus"></el-checkbox> </span>{{ i + 1 }}
+              <el-checkbox
+                @change="changeFn(item)"
+                v-model="item.active"
+                :label="item.i"
+                :disabled="!item.slaveStatus"
+              ></el-checkbox> </span
+            >{{ i + 1 }}
           </span>
         </div>
         <div class="row__column flex2">
-          <el-tooltip class="item" effect="dark" :content="item.name" placement="top-start">
+          <el-tooltip
+            class="item"
+            effect="dark"
+            :content="item.name"
+            placement="top-start"
+          >
             <span class="f12">{{ item.name }}</span>
           </el-tooltip>
         </div>
         <div class="row__column flex2">
           <el-tooltip class="item" effect="dark" placement="top-start">
-            <span class="f12" :class="{
-              'text-red': !item.slaveStatus,
-              'text-green': item.slaveStatus,
-            }">{{ item.slaveStatus ? "空闲" : "忙碌" }}</span>
+            <span
+              class="f12"
+              :class="{
+                'text-red': !item.slaveStatus,
+                'text-green': item.slaveStatus,
+              }"
+              >{{ item.slaveStatus ? "空闲" : "忙碌" }}</span
+            >
           </el-tooltip>
         </div>
         <div class="row__column status" style="color: rgb(255, 189, 54)">
-          <el-tooltip class="item" effect="dark" :content="String(item.targetDistance / 1000)" placement="top-start">
-            <span class="f12">{{ (item.targetDistance / 1000)?.toFixed(2) }}</span>
+          <el-tooltip
+            class="item"
+            effect="dark"
+            :content="String(item.targetDistance / 1000)"
+            placement="top-start"
+          >
+            <span class="f12">{{
+              (item.targetDistance / 1000)?.toFixed(2)
+            }}</span>
           </el-tooltip>
         </div>
       </div>
@@ -54,14 +91,21 @@
             <div class="dib">
               {{ uav.uav && uav.uav.name }} --- {{ activeItem.name }}
             </div>
-            <span style="color: #3388ff" class="ml56 cp pr130" @click="showLine">预览</span>
+            <span style="color: #3388ff" class="ml56 cp pr130" @click="showLine"
+              >预览</span
+            >
           </div>
         </div>
         <div class="stl-timed-task-ht mt16 cf">
           <div class="lh34 f12">飞行高度设置：</div>
           <div class="bg">
-            <el-input @blur="isEditing.height = false" size="mini" v-if="isEditing.height" v-model="flightHeight"
-              type="number" />
+            <el-input
+              @blur="isEditing.height = false"
+              size="mini"
+              v-if="isEditing.height"
+              v-model="flightHeight"
+              type="number"
+            />
             <span v-else class="indent">{{ flightHeight }} m</span>
           </div>
           <div class="text ml10 cp lh34" @click="toggleEdit('height')">
@@ -71,17 +115,26 @@
         <div class="stl-timed-task-ht mt16">
           <div class="lh34 f12">飞行速度设置：</div>
           <div class="bg">
-            <el-input @blur="isEditing.speed = false" size="mini" v-if="isEditing.speed" v-model="flightSpeed"
-              type="number" />
+            <el-input
+              @blur="isEditing.speed = false"
+              size="mini"
+              v-if="isEditing.speed"
+              v-model="flightSpeed"
+              type="number"
+            />
             <span class="indent" v-else>{{ flightSpeed }} m/s</span>
           </div>
           <div class="text ml10 cp lh34" @click="toggleEdit('speed')">编辑</div>
         </div>
-        <div class="mt16">飞行总距离：{{ activeItem.targetDistance?.toFixed(2) }}公里</div>
+        <div class="mt16">
+          飞行总距离：{{ activeItem.targetDistance?.toFixed(2) }}公里
+        </div>
       </div>
       <div class="tc mt50">
         <el-button size="mini" @click="handleClose">取消</el-button>
-        <el-button type="primary" size="mini" @click="handleConfirm">确定</el-button>
+        <el-button type="primary" size="mini" @click="handleConfirm"
+          >确定</el-button
+        >
       </div>
     </div>
 
@@ -98,7 +151,11 @@
         <span>30s</span><span class="cred ml15"> 前往>></span>
       </div>
     </leapFrogFlighDialog> -->
-    <leapFrogDialog title="蛙跳飞行" :visible.sync="leapFrogDialogVisible" @confirm="handleConfirm"></leapFrogDialog>
+    <leapFrogDialog
+      title="蛙跳飞行"
+      :visible.sync="leapFrogDialogVisible"
+      @confirm="handleConfirm"
+    ></leapFrogDialog>
   </div>
 </template>
 
@@ -124,16 +181,15 @@ export default {
     return {
       dialogVisible: false,
       // 当前选中要跳转的机
-      activeItem: {
-      },
+      activeItem: {},
       descCodeList: {
-        0: 'ok!',
-        4401: '降落点位置未设置！',
-        4402: '目标机库有无人机在舱内！',
-        4403: '主跳转机库无人机不在舱内！',
-        4404: '当前正在执行流程，非可跳跃状态！',
-        4405: '天气不宜飞行！',
-        4406: '电量不足已飞至目标机库！'
+        0: "ok!",
+        4401: "降落点位置未设置！",
+        4402: "目标机库有无人机在舱内！",
+        4403: "主跳转机库无人机不在舱内！",
+        4404: "当前正在执行流程，非可跳跃状态！",
+        4405: "天气不宜飞行！",
+        4406: "电量不足已飞至目标机库！",
       },
       apronInfo: {
         // chargeRemaining: 0,
@@ -198,20 +254,22 @@ export default {
     };
   },
   watch: {
-    'uavRealTimeData.isFlying': {
+    "uavRealTimeData.isFlying": {
       handler: function (newVal, oldVal) {
         if (oldVal === false && newVal === true) {
           console.log("飞行状态");
-
         }
       },
       deep: true,
       immediate: true,
-
     },
   },
   computed: {
-    ...mapState("MMCFlightControlCenter", ["uav", "uavRealTimeData", "airwayEntities"]),
+    ...mapState("MMCFlightControlCenter", [
+      "uav",
+      "uavRealTimeData",
+      "airwayEntities",
+    ]),
     ...mapState("MMCFlightControlCenter/hangar", [
       "hangarRealTimeData",
       "hangar",
@@ -231,9 +289,12 @@ export default {
         this.$message.warning("请先接管设备");
         return;
       }
+      if(!this.apronInfo.masterStatus){
+        return this.$message.warning( this.apronInfo.descText);
+      }
       // 执行前先校验主机库状态 0 未正常
       if (this.apronInfo && this.apronInfo.descCode != 0) {
-        let { descCode } = this.apronInfo
+        let { descCode } = this.apronInfo;
         return this.$message.warning(this.descCodeList[descCode]);
       }
       // 选择了调点再执行
@@ -264,20 +325,27 @@ export default {
     },
     showLine() {
       let { height, latitude, longitude, name } = this.activeItem;
-      let apronPosition = Cesium.Cartesian3.fromDegrees(this.apronInfo.longitude, this.apronInfo.latitude, this.apronInfo.height)
+      let apronPosition = Cesium.Cartesian3.fromDegrees(
+        this.apronInfo.longitude,
+        this.apronInfo.latitude,
+        this.apronInfo.height
+      );
       // 创建一个带有图片的实体
       const apronEntity = window.$mmc_stl.viewer.entities.add({
         position: apronPosition, // 设置图片的位置（经纬度和高度）
         label: {
           text: this.apronInfo.name,
-          font: '14pt monospace',
+          font: "14pt monospace",
           style: Cesium.LabelStyle.FILL_AND_OUTLINE,
           outlineWidth: 2,
           verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
           pixelOffset: new Cesium.Cartesian3(0.0, 32, 0.0),
-          distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0.0, 5000),
+          distanceDisplayCondition: new Cesium.DistanceDisplayCondition(
+            0.0,
+            5000
+          ),
           disableDepthTestDistance: Number.POSITIVE_INFINITY,
-          zIndex: 5000
+          zIndex: 5000,
         },
         billboard: {
           image: require("../../assets/images/无人机库.png"), // 图片资源路径
@@ -285,23 +353,30 @@ export default {
           height: 60, // 图片高度（可选，单位为像素）
           eyeOffset: new Cesium.Cartesian3(0, 0, -10), // 图片与位置坐标的偏移量（可选）
           scale: 1, // 图片缩放比例（可选）
-        }
+        },
       });
       EntityList.push(apronEntity);
-      let imageEntityPosition = Cesium.Cartesian3.fromDegrees(longitude, latitude, height)
+      let imageEntityPosition = Cesium.Cartesian3.fromDegrees(
+        longitude,
+        latitude,
+        height
+      );
       // 创建一个带有图片的实体
       const imageEntity = window.$mmc_stl.viewer.entities.add({
         position: imageEntityPosition, // 设置图片的位置（经纬度和高度）
         label: {
           text: name,
-          font: '14pt monospace',
+          font: "14pt monospace",
           style: Cesium.LabelStyle.FILL_AND_OUTLINE,
           outlineWidth: 2,
           verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
           pixelOffset: new Cesium.Cartesian3(0.0, 32, 0.0),
-          distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0.0, 10000),
+          distanceDisplayCondition: new Cesium.DistanceDisplayCondition(
+            0.0,
+            10000
+          ),
           disableDepthTestDistance: Number.POSITIVE_INFINITY,
-          zIndex: 5000
+          zIndex: 5000,
         },
         polyline: new Cesium.PolylineGraphics({
           positions: [apronPosition, imageEntityPosition],
@@ -316,30 +391,32 @@ export default {
           height: 60, // 图片高度（可选，单位为像素）
           eyeOffset: new Cesium.Cartesian3(0, 0, -10), // 图片与位置坐标的偏移量（可选）
           scale: 1, // 图片缩放比例（可选）
-        }
+        },
       });
       EntityList.push(imageEntity);
-      const polyCenter = Cesium.BoundingSphere.fromPoints([apronPosition, imageEntityPosition]).center;
+      const polyCenter = Cesium.BoundingSphere.fromPoints([
+        apronPosition,
+        imageEntityPosition,
+      ]).center;
       console.log("PolyCenter:", polyCenter); // 调试信息
       let entityLabel = window.$mmc_stl.viewer.entities.add({
         position: polyCenter,
         label: {
-          text: this.activeItem.targetDistance + 'km',
-          font: '14pt monospace',
+          text: this.activeItem.targetDistance + "km",
+          font: "14pt monospace",
           style: Cesium.LabelStyle.FILL_AND_OUTLINE,
           outlineWidth: 4,
           eyeOffset: new Cesium.Cartesian3(0.0, 0.0, -10),
           verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
-          pixelOffset: new Cesium.Cartesian2(0, 0)
+          pixelOffset: new Cesium.Cartesian2(0, 0),
         },
-
       });
       EntityList.push(entityLabel);
 
       // 飞入到该实体位置
       window.$mmc_stl.viewer.camera.flyTo({
         destination: Cesium.Cartesian3.fromDegrees(longitude, latitude, 20000), // 设置相机目标位置
-        duration: 2 // 飞行动画持续时间（秒）
+        duration: 2, // 飞行动画持续时间（秒）
       });
     },
     changeFn(item) {
@@ -384,21 +461,21 @@ export default {
       let data = this.skipList.filter((item) => item.active);
       if (data.length > 0) {
         this.activeItem = data[0];
-        this.changeflyLogStatus(true)
+        this.changeflyLogStatus(true);
         this.dialogVisible = true;
       } else {
         this.$message.warning("请选择跳点");
       }
     },
     handleConfirm() {
-      this.clearEntity()
+      this.clearEntity();
       this.dialogVisible = false;
     },
     handleClose() {
       this.dialogVisible = false;
-      this.flightHeight = 100
-      this.flightSpeed = 5
-      this.clearEntity()
+      this.flightHeight = 100;
+      this.flightSpeed = 5;
+      this.clearEntity();
     },
     clearEntity() {
       if (EntityList.length > 0) {
@@ -406,7 +483,7 @@ export default {
           window.$mmc_stl.viewer.entities.remove(item);
         });
       }
-    }
+    },
   },
   created() {
     this.intervalId = setInterval(() => {
@@ -415,7 +492,7 @@ export default {
   },
   beforeDestroy() {
     clearInterval(this.intervalId); // 清除定时器
-    this.clearEntity()
+    this.clearEntity();
   },
 };
 </script>
@@ -429,7 +506,12 @@ export default {
   gap: 0px;
   box-sizing: border-box;
   position: relative;
-
+  .green {
+    color: green;
+  }
+  .red {
+    color: red;
+  }
   .overlay {
     position: fixed;
     top: 20%;
@@ -453,12 +535,14 @@ export default {
         color: #14faff;
         line-height: 40px;
         text-shadow: 0px 1px 1px rgba(2, 32, 56, 0.2);
-        background: linear-gradient(135deg,
-            #e3aa77 0%,
-            #f5cda9 38%,
-            #f9ecd3 58%,
-            #fcdbb1 79%,
-            #edb07a 100%);
+        background: linear-gradient(
+          135deg,
+          #e3aa77 0%,
+          #f5cda9 38%,
+          #f9ecd3 58%,
+          #fcdbb1 79%,
+          #edb07a 100%
+        );
         -webkit-background-clip: text;
         -webkit-text-fill-color: transparent;
       }