提交修改面板刷新

src/views/weatherHome/components/stationStatistics.vue

@@ -25,7 +25,7 @@
             <div class="total-text">测站总数</div>
           </div>
           <div class="data-list">
-            <div v-for="(item, index) in StStatsData.StStatsData" :key="index" @click="tabSwitch(item,2)">
+            <div v-for="(item, index) in StStatsData.StStatsData" :key="index" @click="tabSwitch(item, 2)">
               <span>{{ item.type_name }}：</span><span>{{ item.all_num }}个</span>
             </div>
           </div>
@@ -54,11 +54,12 @@
           <div class="qx-table-box">
             <div v-for="(item, index) in itemList" :key="index" @click="openModal(item)">
               <div style="width: 30%"> {{ item.st_name }} </div>
-              <div style="width: 30%" :class="{ 'active-abnormal': item.state != 0 }"> {{ item.state == 0 ? '正常' : '异常' }} </div>
+              <div style="width: 30%" :class="{ 'active-abnormal': item.state != 0 }"> {{ item.state == 0 ? '正常' : '异常'
+                }} </div>
               <div style="width: 40%"> {{ item.time }} </div>
             </div>
           </div>
-          <div class="deviceBack" @click="tabSwitch('',1)">
+          <div class="deviceBack" @click="tabSwitch('', 1)">
             <img :src="doubleScreenBack" class="toolImage" />
           </div>
         </div>
@@ -75,7 +76,7 @@
               <div style="width: 50%"> {{ item }} </div>
             </div>
           </div>
-          <div class="deviceBack" @click="tabSwitch('',1)">
+          <div class="deviceBack" @click="tabSwitch('', 1)">
             <img :src="doubleScreenBack" class="toolImage" />
           </div>
         </div>
@@ -84,7 +85,7 @@
   </div>
 </template>
 <script lang="ts" setup>
-import { onMounted, ref, reactive } from 'vue';
+import { onMounted, ref, reactive, onUnmounted } from 'vue';
 import progressBar from '../../../components/progressBar/index.vue';
 import weatherTitle from '../../../components/Title/weatherTitle.vue';
 import doubleScreenBack from '/@/assets/images/doubleScreenBack.png';
@@ -95,16 +96,17 @@ import eventBus from '/@/utils/eventBus';
 import { useMapStore } from '/@/store/modules/map';
 
 const mapStore = useBasicStore();
-const mapStore2=useMapStore()
-const openModal=(item)=>{
+const mapStore2 = useMapStore()
+let setIntervalFn = null
+const openModal = (item) => {
   mapStore2.setstInfo(item)
 }
 let isSwitch = ref(1);
 // 列表数据获取开始
 let itemList = reactive([]);
-function tabSwitch(item,num) {
+function tabSwitch(item, num) {
   isSwitch.value = num;
-  console.log(item,907)
+  console.log(item, 907)
   if (item) {
     itemList = item.detail;
   }
@@ -116,20 +118,27 @@ const settab2 = (item) => {
 }
 // 刷新数据
 eventBus.on('statisRefreshName', () => {
-  isSwitch.value = 2;
-  getStStats().then((res) => {
-    StStatsData.StStatsData = res.data;
-    countNum(StStatsData.StStatsData);
-  });
-  // 获取实时数据统计
-  getRealDataNum().then((res) => {
-    realDataNum.month_num = res.data[1];
-    realDataNum.rt_num = res.data[0];
-  });
+  console.log(setIntervalFn)
+  // isSwitch.value = 2;
+  if (setIntervalFn) {
+    clearInterval(setIntervalFn)
+  }
+  setIntervalFn = setInterval(() => {
+    getStStats().then((res) => {
+      StStatsData.StStatsData = res.data;
+      countNum(StStatsData.StStatsData);
+    });
+    // 获取实时数据统计
+    getRealDataNum().then((res) => {
+      realDataNum.month_num = res.data[1];
+      realDataNum.rt_num = res.data[0];
+    });
+  }, 1200000)
+
 });
 // 列表数据获取结束
 function thousands(num) {
-  var str = num+''
+  var str = num + ''
   var reg = str.indexOf('.') > -1 ? /(\d)(?=(\d{3})+\.)/g : /(\d)(?=(?:\d{3})+$)/g;
   return str.replace(reg, '$1,');
 }
@@ -140,7 +149,24 @@ let realDataNum = reactive({
   month_num: {},
   rt_num: {},
 });
+onUnmounted(() => {
+  console.log(setIntervalFn)
+  if (setIntervalFn) {
+    clearInterval(setIntervalFn)
+  }
+})
 onMounted(() => {
+  setIntervalFn = setInterval(() => {
+    getStStats().then((res) => {
+      StStatsData.StStatsData = res.data;
+      countNum(StStatsData.StStatsData);
+    });
+    // 获取实时数据统计
+    getRealDataNum().then((res) => {
+      realDataNum.month_num = res.data[1];
+      realDataNum.rt_num = res.data[0];
+    });
+  }, 1200000)
   getStStats().then((res) => {
     StStatsData.StStatsData = res.data;
     countNum(StStatsData.StStatsData);
@@ -200,21 +226,25 @@ function isOkFn(type) {
   border-radius: 0px 30px 0px 30px;
   background-image: linear-gradient(200deg, rgba(40, 165, 255, 0.9) 9%, rgba(100, 255, 255, 0) 34%, rgba(40, 126, 255, 0) 66%, #28a5ff 100%);
 }
+
 .main_in {
   width: 100%;
   height: 100%;
   border-radius: 0px 30px 0px 30px;
   background: rgba(6, 37, 70, 0.9);
 }
+
 .data-box {
   display: flex;
-  & > div:nth-child(1) {
+
+  &>div:nth-child(1) {
     width: 116px;
     height: 128px;
     background: url('../../../assets/images/weatheHome/Group-bg.png') no-repeat;
     background-size: 100%;
     margin-left: 16px;
     text-align: center;
+
     .top-text {
       font-weight: bold;
       background: linear-gradient(181deg, #3df9ff 28%, #287eff 96%);
@@ -224,10 +254,12 @@ function isOkFn(type) {
       text-fill-color: transparent;
       font-size: 28px;
       font-family: Source Han Sans CN;
+
       span {
         font-size: 14px;
       }
     }
+
     .total-text {
       font-size: 14px;
       color: #ceecff;
@@ -236,13 +268,15 @@ function isOkFn(type) {
     }
   }
 }
+
 .data-list {
   cursor: pointer;
   display: flex;
   flex-wrap: wrap;
   margin-left: 30px;
   flex: 1;
-  & > div {
+
+  &>div {
     width: 50%;
     font-size: 14px;
     background: linear-gradient(181deg, #3ddfff 25%, #287eff 99%);
@@ -250,6 +284,7 @@ function isOkFn(type) {
     -webkit-text-fill-color: transparent;
     background-clip: text;
     text-fill-color: transparent;
+
     span:nth-child(1) {
       background: linear-gradient(181deg, #3ddfff 25%, #287eff 99%);
       -webkit-background-clip: text;
@@ -259,6 +294,7 @@ function isOkFn(type) {
       display: inline-block;
       min-width: 80px;
     }
+
     span {
       color: #fff;
       background: linear-gradient(181deg, #fff 28%, #fff 96%);
@@ -268,23 +304,27 @@ function isOkFn(type) {
     }
   }
 }
+
 .normal-abnormal {
   display: flex;
-  & > div {
+
+  &>div {
     width: 50%;
     padding: 20px;
     text-align: center;
     font-size: 14px;
     cursor: pointer;
   }
-  & > div:nth-child(1) {
+
+  &>div:nth-child(1) {
     background: linear-gradient(0deg, #00f7ff 0%, #007ff6 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
     text-fill-color: transparent;
   }
-  & > div:nth-child(2) {
+
+  &>div:nth-child(2) {
     background: linear-gradient(180deg, #fa1414 0%, #ff6200 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
@@ -292,6 +332,7 @@ function isOkFn(type) {
     text-fill-color: transparent;
   }
 }
+
 .normal-border {
   display: inline-block;
   width: 2px;
@@ -301,6 +342,7 @@ function isOkFn(type) {
   background: linear-gradient(270deg, rgba(88, 215, 250, 0) 0%, #58d7fa 51%, rgba(88, 215, 250, 0) 100%);
   margin: 0 10px;
 }
+
 .abnormal-border {
   display: inline-block;
   width: 2px;
@@ -310,6 +352,7 @@ function isOkFn(type) {
   background: linear-gradient(270deg, rgba(255, 98, 0, 0) 0%, #ff6200 51%, rgba(255, 98, 0, 0) 100%);
   margin: 0 10px;
 }
+
 .progress-inner {
   padding-top: 10px;
 }
@@ -318,14 +361,17 @@ function isOkFn(type) {
 .qx-table {
   height: 258px;
   padding-left: 20px;
+
   .qx-table-top {
     display: flex;
   }
+
   .qx-table-box {
     height: 194px;
     overflow: scroll;
     cursor: pointer;
-    & > div {
+
+    &>div {
       width: 100%;
       line-height: 33px;
       display: flex;
@@ -333,48 +379,59 @@ function isOkFn(type) {
       /* 面板线性渐变 */
       border: 0px solid;
       margin-top: 2px;
+
       // border-image: linear-gradient(261deg, rgba(40, 165, 255, 0.9) 20%, rgba(100, 255, 255, 0) 40%, rgba(40, 126, 255, 0) 66%, #28a5ff 89%) 1;
-      & > div:nth-child(1) {
+      &>div:nth-child(1) {
         padding-left: 10px;
       }
     }
-    & > div:nth-child(2n) {
+
+    &>div:nth-child(2n) {
       background-color: rgba(0, 170, 255, 0.08);
     }
-    & > div:hover {
+
+    &>div:hover {
       background: rgba(0, 238, 255, 0.15);
       color: #00d8f0;
     }
-    & > div:hover > div:nth-child(1) {
+
+    &>div:hover>div:nth-child(1) {
       padding-left: 10px;
       border-left: 4px solid #00eeff;
     }
   }
+
   .deviceBack {
     -webkit-transform: rotateY(180deg);
     padding-left: 10px;
   }
 }
+
 .height-0 {
   // height: 20vh;
   height: 258px;
 }
+
 .active-abnormal {
   color: #ff1515;
   border: 0px !important;
 }
+
 .statistics-data {
   display: flex;
-  & > div {
+
+  &>div {
     width: 50%;
     display: flex;
     cursor: pointer;
-    & > div:nth-child(2) {
-      & > div:nth-child(1) {
+
+    &>div:nth-child(2) {
+      &>div:nth-child(1) {
         color: #3adeff;
         font-size: 12px;
       }
-      & > div:nth-child(2) {
+
+      &>div:nth-child(2) {
         font-size: 20px;
         font-weight: 800;
         background: linear-gradient(2deg, #76fbff 6%, #ffffff 72%);
@@ -385,16 +442,20 @@ function isOkFn(type) {
       }
     }
   }
-  & > div:nth-child(1) {
+
+  &>div:nth-child(1) {
     padding-left: 30px;
+
     img {
       position: relative;
       top: -6px;
       margin-right: 10px;
     }
   }
-  & > div:nth-child(2) {
+
+  &>div:nth-child(2) {
     padding-left: 10px;
+
     img {
       position: relative;
       top: -14px;
@@ -402,26 +463,31 @@ function isOkFn(type) {
     }
   }
 }
+
 .new-normal-abnormal {
   display: flex;
   height: 50px;
   background: rgba(0, 175, 255, 0.14);
   margin: 10px 14px;
   line-height: 50px;
-  & > div {
+
+  &>div {
     cursor: pointer;
     width: 50%;
     text-align: center;
+
     span {
       display: inline-block;
       line-height: 50px;
     }
+
     span:nth-child(1) {
       color: #ceecff;
       font-weight: 500;
     }
   }
-  & > div:nth-child(1) {
+
+  &>div:nth-child(1) {
     span:nth-child(2) {
       background: linear-gradient(181deg, #3df9ff 27%, #287eff 98%);
       -webkit-background-clip: text;
@@ -432,6 +498,7 @@ function isOkFn(type) {
       font-weight: 500;
       font-size: 24px;
     }
+
     span:nth-child(3) {
       background: linear-gradient(181deg, #3df9ff 27%, #287eff 98%);
       -webkit-background-clip: text;
@@ -440,13 +507,16 @@ function isOkFn(type) {
       text-fill-color: transparent;
     }
   }
-  & > div:nth-child(2) {
+
+  &>div:nth-child(2) {
     position: relative;
+
     img {
       position: absolute;
       left: 0rpx;
       top: 10px;
     }
+
     span:nth-child(2) {
       background: linear-gradient(181deg, #ffbdb6 1%, #ff2020 98%);
       -webkit-background-clip: text;
@@ -457,6 +527,7 @@ function isOkFn(type) {
       font-weight: 500;
       font-size: 24px;
     }
+
     span:nth-child(3) {
       background: linear-gradient(181deg, #ffbdb6 1%, #ff2020 98%);
       -webkit-background-clip: text;