重构

src/views/ems/dzjk/sbjk/dh/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-loading="loading">
+  <div>
     <el-card
         v-for="(item,index) in list"
         :key="index+'ylLise'"
@@ -26,9 +26,11 @@
         <el-col v-for="(tempDataItem,tempDataIndex) in tempData" :key="tempDataIndex+'hdTempData'" :span="12"
                 class="device-info-col">
             <span class="pointer" @click="showChart(tempDataItem.title,item.deviceId)">
-              <span class="left">{{ tempDataItem.title }}</span> <span
-                class="right">{{ item[tempDataItem.attr] || '-' }}<span
-                v-html="tempDataItem.unit"></span></span>
+              <span class="left">{{ tempDataItem.title }}</span>
+              <span class="right">
+                <i v-if="isPointLoading(item[tempDataItem.attr])" class="el-icon-loading point-loading-icon"></i>
+                <span v-else>{{ displayValue(item[tempDataItem.attr]) }}<span v-html="tempDataItem.unit"></span></span>
+              </span>
             </span>
         </el-col>
       </el-row>
@@ -62,6 +64,12 @@ export default {
     }
   },
   methods: {
+    displayValue(value) {
+      return value === undefined || value === null || value === "" ? "-" : value;
+    },
+    isPointLoading(value) {
+      return this.loading && (value === undefined || value === null || value === "" || value === "-");
+    },
     // 查看设备电位表格
     pointDetail(row, dataType) {
       const {deviceId} = row
@@ -117,4 +125,16 @@ export default {
     }
   }
 }
+
+.point-loading-icon {
+  color: #409eff;
+  display: inline-block;
+  transform-origin: center;
+  animation: pointLoadingSpinPulse 1.1s linear infinite;
+}
+@keyframes pointLoadingSpinPulse {
+  0% { opacity: 0.45; transform: rotate(0deg) scale(0.9); }
+  50% { opacity: 1; transform: rotate(180deg) scale(1.08); }
+  100% { opacity: 0.45; transform: rotate(360deg) scale(0.9); }
+}
 </style>