智能化衣柜

src/views/index.vue

@@ -1,13 +1,13 @@
 <template>
-  <div style="padding: 16px;min-height: calc(100vh - 84px);display: flex; justify-content: center;align-items: center;">
+  <div v-loading="loading" style="padding: 16px;min-height: calc(100vh - 84px);display: flex; justify-content: center;align-items: center;">
     <div class="div-box">
       <div class="div-box-title"> 智能化衣柜 </div>
       <div class="div-ul">
         <div class="div-li">
           <div>
-            <span>温度：</span>{{ deviceInfo.temperature }}℃
+            <span>温度：</span>{{ deviceInfo.temperature || '-'}}℃
           </div>
-          <div> <span>湿度：</span>{{ deviceInfo.humidity }}%
+          <div> <span>湿度：</span>{{ deviceInfo.humidity || '-' }}%
           </div>
         </div>
         <!--   ON：开启 OFF：关闭 -->
@@ -15,18 +15,18 @@
           <div>
             <span>除湿：</span>
             <el-switch active-value="1" inactive-value="0" v-model="deviceInfo.dehumidification" active-color="#13ce66"
-              inactive-color="#ff4949" @change="handleDehumidification">
+              inactive-color="#ff4949" @change="handleCommand">
             </el-switch>
           </div>
           <div>
             <span>杀菌：</span>
             <el-switch active-value="1" inactive-value="0" v-model="deviceInfo.light" active-color="#13ce66"
-              inactive-color="#ff4949" @change="handleLight">
+              inactive-color="#ff4949" @change="handleCommand1">
             </el-switch>
           </div>
         </div>
       </div>
-      <div class="div-tips"><span>标签序列号：</span>{{ deviceInfo.serialNumber }} </div>
+      <div class="div-tips"><span>标签序列号：</span>{{ deviceInfo.serialNumber || '-' }} </div>
     </div>
 
   </div>
@@ -63,23 +63,29 @@ export default {
   },
   methods: {
     // 除湿开关
-    handleDehumidification() {
+    handleCommand() {
+      let commandParams = { humi: this.deviceInfo.dehumidification  }; // 0 关闭 1 开启,
+      console.log('commandParams',commandParams);
+      
       sendCommand({
-        "commandId": "447173913707264", // 除湿,
-        "commandParams": this.deviceInfo.dehumidification, // 0 关闭 1 开启,
+        "commandId": "447242774207232", // 命令ID, 
+        "commandParams": JSON.stringify(commandParams), // 命令参数,
         "deviceId":  this.deviceId
       }).then(res => {
-        this.getDeviceList(res.data.id) // 根据项目id查找设备列表
+        this.getAttributes(this.deviceId) // 根据项目id查找设备列表
       });
     },
-    // 杀菌灯开关
-    handleLight(){
+    // 杀菌开关
+    handleCommand1() {
+      let commandParams = { uvligt: this.deviceInfo.light }; // 0 关闭 1 开启,
+      console.log('commandParams',commandParams);
+      
       sendCommand({
-        "commandId": "447173913707264", // 除湿,
-        "commandParams": this.deviceInfo.dehumidification, // 0 关闭 1 开启,
+        "commandId": "447242774207232", // 命令ID, 
+        "commandParams": JSON.stringify(commandParams), // 命令参数,
         "deviceId":  this.deviceId
       }).then(res => {
-        this.getDeviceList(res.data.id) // 根据项目id查找设备列表
+        this.getAttributes(this.deviceId) // 根据项目id查找设备列表
       });
     },
     // 阈值设定弹窗
@@ -114,10 +120,10 @@ export default {
     getAttributes(_id) {
       attributes({
         deviceId: _id,
-      }).then(({ data: { deviceAttributeRecordList: records } }) => {
+      }).then(({ data: { deviceAttributesList: records } }) => {
         this.loading = false;
         // 过滤出指定id的数据
-        const findAttr = (id, defaultValue = '-') =>
+        const findAttr = (id, defaultValue) =>
           records.find(row => row.id === id)?.attributeValue || defaultValue;
         // 赋值
         this.deviceInfo = {
@@ -127,6 +133,8 @@ export default {
           light: findAttr(447173913707265, '0'),  // 杀菌灯(默认关闭)
           dehumidification: findAttr(447173913707264, '0'), // 除湿(默认关闭)
         };
+      console.log(this.deviceInfo);
+      
       });
     },
     /** 下发属性 */