feat:状态控制

src/pages/environment/index.vue

@@ -18,7 +18,7 @@
           </view>
           <view class="detail-value-container">
             <text class="detail-value">{{ temperature }}°C</text>
-            <view class="detail-status" :class="temperature > 0 ? 'active' : 'inactive'"></view>
+            <view class="detail-status" :class="wdisConnected === 1 ? 'active' : (wdisConnected === 2 ? 'warning' : 'inactive')"></view>
           </view>
         </view>
         <view class="detail-progress-bar">
@@ -38,7 +38,7 @@
           </view>
           <view class="detail-value-container">
             <text class="detail-value">{{ humidity }}%</text>
-            <view class="detail-status" :class="humidity > 0 ? 'active' : 'inactive'"></view>
+            <view class="detail-status" :class="sdisConnected === 1 ? 'active' : (sdisConnected === 2 ? 'warning' : 'inactive')"></view>
           </view>
         </view>
         <view class="detail-progress-bar">
@@ -58,7 +58,7 @@
           </view>
           <view class="detail-value-container">
             <text class="detail-value">{{ cleanliness > 0 ? cleanliness + 'μg/m³' : '-μg/m³' }}</text>
-            <view class="detail-status" :class="cleanliness > 0 ? 'active' : 'inactive'"></view>
+            <view class="detail-status" :class="pmisConnected === 1 ? 'active' : (pmisConnected === 2 ? 'warning' : 'inactive')"></view>
           </view>
         </view>
         <view class="detail-progress-bar">
@@ -265,7 +265,7 @@
 <script>
 import mqttDataManager from '@/utils/mqttDataManager.js'
 import { manualReconnect, sendMqttData } from '@/utils/sendMqtt.js'
-import { thDataApi, alertApi, eventApi, wsdApi } from '@/utils/api.js'
+import { thDataApi, alertApi, eventApi, wsdApi, statusApi } from '@/utils/api.js'
 
 export default {
   data() {
@@ -293,6 +293,10 @@ export default {
         min: 0,
         max: 0
       },
+      // 连接状态（用于控制卡片状态小圆点颜色） 0未连接 1连接成功 2异常
+      wdisConnected: 0,
+      sdisConnected: 0,
+      pmisConnected: 0,
       connectionStatus: {
         isConnected: false,
         lastUpdate: null
@@ -343,6 +347,7 @@ export default {
   onShow() {
     console.log('📱 环境参数页面显示，触发页面更新');
     this.init();
+    this.getStatus();
     // 重新启动定时器
     this.startDataFetching();
     // // 只有在非首次显示时才重新获取最新空调温度
@@ -593,6 +598,18 @@ export default {
       }
     },
 
+    async getStatus() {
+      // const res = await statusApi.getStatus('HDYDCJ_01_UP');
+      const res = await statusApi.getConnectionStatus();
+      console.log('📊 接口返回数据:', res)
+      if (res && typeof res.connected === 'boolean') {
+        const val = res.connected ? 1 : 0
+        this.wdisConnected = val
+        this.sdisConnected = val
+        this.pmisConnected = val
+      }
+    },
+    
     // 启动定时获取环境数据
     startDataFetching() {
       // 清除已存在的定时器
@@ -726,6 +743,7 @@ export default {
               actionTime: currentTime,
               deviceId: "WSD_001"
             }
+            this.wdisConnected = 2;
             this.logAlert(alert)
           }
         }
@@ -745,6 +763,7 @@ export default {
               actionTime: currentTime,
               deviceId: "AC_001"
             }
+            this.wdisConnected = 2;
             this.logAlert(alert)
           }
         }
@@ -768,6 +787,7 @@ export default {
               actionTime: currentTime,
               deviceId: "WSD_001"
             }
+            this.sdisConnected = 2;
             this.logAlert(alert)
           }
         }
@@ -787,6 +807,7 @@ export default {
               actionTime: currentTime,
               deviceId: "AC_001"
             }
+            this.sdisConnected = 2;
             this.logAlert(alert)
           }
         }
@@ -1566,6 +1587,10 @@ export default {
   background: #bdc3c7;
 }
 
+.detail-status.warning {
+  background: #f1c40f;
+}
+
 .detail-progress-bar {
   height: 16rpx;
   background: #ecf0f1;

src/utils/api.js

@@ -90,4 +90,14 @@ export const wsdApi = {
   }
 }
 
+export const statusApi = {
+  getStatus(topic) {
+    return httpService.get('/api/mqtt/subscription/status?topic=HDYDCJ_01_UP')
+  },
+
+  getConnectionStatus() {
+    return httpService.get('/api/mqtt/connection/status')
+  }
+}
+
 export default {}