定时刷新

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

@@ -1,7 +1,7 @@
 
 <template>
     <div v-loading="loading">
-      <div class="yl-item-container" :class="{'yl-warn-item-container':item.workMode !== '0'}" v-for="(item,index) in list" :key="index+'ylLise'">
+      <div class="yl-item-container" :class="{'yl-warn-item-container':item.workMode !== '0','yl-normal-item-container':item.workMode === '0'}" v-for="(item,index) in list" :key="index+'ylLise'">
         <div class="header">
           <div class="header-title">{{item.systemName}}</div>
           <div>工作模式：<span class="header-values">{{$store.state.ems.workModeOptions[item.workMode]}}</span></div>
@@ -21,9 +21,10 @@
 <script>
 import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
 import {getCoolingDataList} from '@/api/ems/dzjk'
+import intervalUpdate from "@/mixins/ems/intervalUpdate";
 export default {
   name:'DzjkSbjkYl',
-  mixins:[getQuerySiteId],
+  mixins:[getQuerySiteId,intervalUpdate],
   data() {
     return {
       loading:false,
@@ -40,11 +41,15 @@ export default {
     }
   },
   methods:{
-    init(){
+    updateData(){
       this.loading = true
       getCoolingDataList(this.siteId).then(response => {
         this.list =  JSON.parse(JSON.stringify(response?.data || []));
       }).finally(() => {this.loading = false})
+    },
+    init(){
+      this.updateData()
+      this.updateInterval(this.updateData)
     }
   },
   mounted(){
@@ -56,7 +61,6 @@ export default {
 <style scoped lang="scss">
 .yl-item-container{
   border-radius: 5px;
-  background-color: #EBF6F6;
   &:not(:last-child){
     margin-bottom: 25px;
   }
@@ -73,11 +77,9 @@ export default {
       width: 120px;
       height: 40px;
       font-size: 16px;
-      background-color: #05AEA3;
       text-align: center;
     }
     .header-values{
-      color: #05AEA3;
       font-weight: 500;
     }
   }
@@ -113,5 +115,16 @@ export default {
     }
   }
 }
+.yl-normal-item-container{
+  background-color: #EBF6F6;
+  .header{
+    .header-title{
+      background-color: #05AEA3;
+    }
+    .header-values{
+      color: #05AEA3;
+    }
+  }
+}
 
 </style>