大屏数据实时

src/views/homeIndex/components/DeviceOverview.vue

@@ -3,20 +3,20 @@
         <div class="deviceOvery">
             <div class="alarm">
                 <div class="deviceIMG">
-                    <div class="deviceNum">{{DataOverview.totalDevices || '0'}} <span>个</span></div>
+                    <div class="deviceNum">{{ DataOverview.totalDevices || '0' }} <span>个</span></div>
                 </div>
                 <div class="deviceText">设备总数</div>
             </div>
 
             <div class="alarm">
                 <div class="deviceIMG">
-                    <div class="deviceNum">{{DataOverview.onlineDevices || '0'}} <span>个</span></div>
+                    <div class="deviceNum">{{ DataOverview.onlineDevices || '0' }} <span>个</span></div>
                 </div>
                 <div class="deviceText">在线数量</div>
             </div>
             <div class="alarm">
                 <div class="deviceIMG">
-                    <div class="deviceNum">{{DataOverview.deviceTypes || '0'}} <span>种</span></div>
+                    <div class="deviceNum">{{ DataOverview.deviceTypes || '0' }} <span>种</span></div>
                 </div>
                 <div class="deviceText">设备型号</div>
             </div>
@@ -26,15 +26,24 @@
 <script setup lang="ts">
 import { getDeviceOverview } from '@/api/homeIndex'
 const DataOverview = ref<any>({})
+const getData = () => {
+    getDeviceOverview({}).then((res) => {
+        if (res.code == 200) {
+            DataOverview.value = res.data
+        }
+
+    })
+}
 onMounted(() => {
-  getDeviceOverview({}).then((res) => {
-    if (res.code==200) {
-         DataOverview.value = res.data
-    }
-   
-  })
+    getData();
 })
 
+const timerAlarm = setInterval(() => {
+    getData();
+}, 300000);
+onUnmounted(() => {
+    clearInterval(timerAlarm);
+});
 </script>
 <style scoped lang="scss">
 .deviceOvery {
@@ -44,7 +53,7 @@ onMounted(() => {
     align-items: center;
     margin-top: 7.5vh;
     text-align: center;
-    font-size:0.7vw;
+    font-size: 0.7vw;
     color: #DEEFFF;
     padding: 1.5vw;
 }
@@ -57,14 +66,15 @@ onMounted(() => {
     position: relative;
 
 }
-.deviceText{
+
+.deviceText {
     padding-top: 1.5vh;
 }
 
-.deviceNum{
+.deviceNum {
     line-height: 12vh;
     display: inline-block;
-    position: relative; 
+    position: relative;
     background: radial-gradient(circle at center, #00FCFF 0%, #FFFFFF 49%);
     /* 兼容写法 */
     -webkit-background-clip: text;
@@ -75,7 +85,8 @@ onMounted(() => {
     font-size: 1.3vw;
     font-weight: 600;
 }
-.deviceNum span{
+
+.deviceNum span {
     font-size: 0.6vw;
 }
 </style>