游泳馆检测添加加载动画

src/views/index.vue

@@ -1,25 +1,26 @@
 <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 || '-'}}℃
+            {{ deviceInfo.temperature || '-' }}℃
           </div>
           <div> <span>湿度：</span>
-            {{ deviceInfo.humidity || '-'}}%</div>
+            {{ deviceInfo.humidity || '-' }}%</div>
         </div>
         <!--   ON：开启 OFF：关闭 -->
         <div class="div-li">
           <div>
             <span>TVOC：</span>
-            {{ deviceInfo.tvoc || '-'}}
+            {{ deviceInfo.tvoc || '-' }}
           </div>
           <div>
             <span>TDS：</span>
-            {{ deviceInfo.tds || '-'}}
+            {{ deviceInfo.tds || '-' }}
           </div>
         </div>
       </div>
@@ -95,7 +96,7 @@ export default {
         this.loading = false;
 
         const findAttr = (id, defaultValue = '0') =>
-          records.find(row => row.id === id)?.attributeValue ;
+          records.find(row => row.id === id)?.attributeValue;
         this.deviceInfo = {
           temperature: findAttr(447173913707267), // 温度
           humidity: findAttr(447173913707268),    // 湿度
@@ -108,7 +109,7 @@ export default {
     submitForm: function () {
       this.$refs["form"].validate(valid => {
         if (valid) {
-          let param = {"Wen":`#${this.form.threshold}`} // 阈值
+          let param = { "Wen": `#${this.form.threshold}` } // 阈值
           sendAttribute({
             "attributeParams": JSON.stringify(param), // 阈值JSON字符串
             "deviceId": this.deviceId // 设备id
@@ -155,15 +156,18 @@ export default {
     display: flex;
     justify-content: space-between;
     margin-bottom: 12px;
+
     div {
       flex: 1
     }
+
     span {
       color: #666;
     }
   }
+
   .div-li:last-child {
-      margin-bottom: 0;
-    }
+    margin-bottom: 0;
+  }
 }
 </style>