add:增加全局loading

hx-ai-intelligent/src/view/equipmentControl/airConditionControlSystem/device.vue

@@ -9,29 +9,29 @@
               device.regionName + ' > ' + device.deviceGroupName
             }}</span></div
           >
-          <button class="right-button">{{
-            record?.runStatus?.label ? record.runStatus.label : '--'
+          <button class="right-button" :class="getClass(record)">{{
+            record.runStatus.value != 0 ? record.runStatus.label : record.switchStatus.label
           }}</button>
         </div>
         <div class="light-tag-box">
           <div class="tag-box-item">
             <img src="/asset/image//bulbLogo/22496.png" alt="" />
-            <span class="title">控制模式</span>
+            <span class="title-text">控制模式</span>
             <span class="result">{{ record.autoStatus.label }}</span>
           </div>
           <div class="tag-box-item">
             <img src="/asset/image//bulbLogo/22496.png" alt="" />
-            <span class="title">温度</span>
+            <span class="title-text">温度</span>
             <span class="result">{{ record.temp + record.tempUnit }}</span>
           </div>
           <div class="tag-box-item">
             <img src="/asset/image//bulbLogo/22496.png" alt="" />
-            <span class="title">控制场景</span>
+            <span class="title-text">控制场景</span>
             <span class="result">{{ device.scene.label }}</span>
           </div>
           <div class="tag-box-item">
             <img src="/asset/image//bulbLogo/22496.png" alt="" />
-            <span class="title">风速</span>
+            <span class="title-text">风速</span>
             <span class="result">{{ record.windSpeed + record.windSpeedUnit }}</span>
           </div>
         </div>
@@ -75,6 +75,23 @@
   const device = computed(() => props.device);
   // 设备信息
   const record = computed(() => props.device.record);
+
+  const getClass = (data: any) => {
+    let state = data.runStatus.value;
+    let isOpen = data.switchStatus.value;
+    // 故障
+    if (state == 1) {
+      return 'button-fault';
+    } else if (state == 2) {
+      return 'button-repair';
+    } else if (state == 3) {
+      return 'button-alarm';
+    } else if (state == 0 && isOpen == 1) {
+      return 'button-on';
+    } else if (state == 0 && isOpen == 0) {
+      return 'button-off';
+    }
+  };
 </script>
 <style lang="less" scoped>
   .icon-box {
@@ -116,9 +133,29 @@
         width: 5em;
         height: 26px;
         background: rgba(57, 215, 187, 0.1);
-        border: 1px solid rgba(57, 215, 187, 1);
+        border-width: 1px;
+        border-style: solid;
         font-size: 12px;
-        color: rgba(57, 215, 187, 1);
+      }
+      .button-on {
+        color: #0dffa4;
+        border-color: #0dffa4;
+      }
+      .button-off {
+        color: #bfcde2;
+        border-color: #bfcde2;
+      }
+      .button-repair {
+        color: #ffbc46;
+        border-color: #ffbc46;
+      }
+      .button-alarm {
+        color: #f36163;
+        border-color: #f36163;
+      }
+      .button-fault {
+        color: #ff7636;
+        border-color: #ff7636;
       }
     }
   }
@@ -140,9 +177,9 @@
         vertical-align: middle;
       }
 
-      .title {
+      .title-text {
         position: absolute;
-        left: 60px;
+        left: 53px;
         top: 13px;
         color: rgba(64, 255, 252, 1);
       }