实时数据status加入了3s请求

src/assets/css/main.css

@@ -1717,10 +1717,29 @@
   margin: 10px 8px 0 !important;
 }
 
+.realTime .page-content .status-view .status-view-content .status-true .status-fan > div > span {
+  margin-left: 5px;
+}
+
 .realTime .page-content .status-view .status-view-content .status-true .status-fan > div > img {
   width: 16px;
   height: 16px;
-  margin-right: 5px;
+  margin-right: 0px;
+}
+
+.realTime .page-content .status-view .status-view-content .status-true .status-fan > div > img.fan-img {
+  animation: rotate 5s linear infinite;
+  /* 持续时间为 5 秒，线性缓动，无限循环 */
+  /* 定义旋转动画 */
+}
+
+@keyframes rotate {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
 }
 
 .realTime .page-content .status-view .status-view-content .status-true .status-true-sel {

src/assets/css/main.scss

@@ -1814,10 +1814,25 @@
                             font-size: 14px;
                             height: 30px;
                             margin: 10px 8px 0 !important;
+                            >span{
+                                margin-left: 5px;
+                            }
                             >img{
                                 width: 16px;
                                 height:16px;
-                                margin-right: 5px;
+                                margin-right: 0px;
+                                &.fan-img{
+                                    animation: rotate 5s linear infinite; /* 持续时间为 5 秒，线性缓动，无限循环 */
+                                    /* 定义旋转动画 */
+                                }
+                                @keyframes rotate {
+                                    from {
+                                      transform: rotate(0deg);
+                                    }
+                                    to {
+                                      transform: rotate(360deg);
+                                    }
+                                  }
                             }
                         }
                     }

src/views/page/realTime.vue

@@ -107,25 +107,25 @@
                             </div>
                             <div class="status-fan">
                                 <div class="btn" :class="fanStatus.status[0] == 1 ? 'blue' : 'off'">
-                                    <img v-if="fanStatus.status[0] == 1" src="../../assets/img/fan-on.png" alt="">
+                                    <img class="fan-img" v-if="fanStatus.status[0] == 1" src="../../assets/img/fan-on.png" alt="">
                                     <img v-else src="../../assets/img/fan-off.png" alt="">
-                                    1#风机
+                                    <span>1#风机</span>
                                 </div>
                                 <div class="btn" :class="fanStatus.status[1] == 1 ? 'blue' : 'off'">
-                                    <img v-if="fanStatus.status[1] == 1" src="../../assets/img/fan-on.png" alt="">
+                                    <img class="fan-img" v-if="fanStatus.status[1] == 1" src="../../assets/img/fan-on.png" alt="">
-                                    <img v-else src="../../assets/img/fan-off.png" alt=""> 2#风机
+                                    <img v-else src="../../assets/img/fan-off.png" alt=""> <span>2#风机</span>
                                 </div>
                                 <div class="btn" :class="fanStatus.status[2] == 1 ? 'blue' : 'off'">
-                                    <img v-if="fanStatus.status[2] == 1" src="../../assets/img/fan-on.png" alt="">
+                                    <img class="fan-img" v-if="fanStatus.status[2] == 1" src="../../assets/img/fan-on.png" alt="">
-                                    <img v-else src="../../assets/img/fan-off.png" alt=""> 3#风机
+                                    <img v-else src="../../assets/img/fan-off.png" alt=""> <span>3#风机</span>
                                 </div>
                                 <div class="btn" :class="fanStatus.status[3] == 1 ? 'blue' : 'off'">
-                                    <img v-if="fanStatus.status[3] == 1" src="../../assets/img/fan-on.png" alt="">
+                                    <img class="fan-img" v-if="fanStatus.status[3] == 1" src="../../assets/img/fan-on.png" alt="">
-                                    <img v-else src="../../assets/img/fan-off.png" alt=""> 4#风机
+                                    <img v-else src="../../assets/img/fan-off.png" alt=""> <span>4#风机</span>
                                 </div>
                                 <div class="btn" :class="fanStatus.status[4] == 1 ? 'blue' : 'off'">
-                                    <img v-if="fanStatus.status[4] == 1" src="../../assets/img/fan-on.png" alt="">
+                                    <img class="fan-img" v-if="fanStatus.status[4] == 1" src="../../assets/img/fan-on.png" alt="">
-                                    <img v-else src="../../assets/img/fan-off.png" alt=""> 5#风机
+                                    <img v-else src="../../assets/img/fan-off.png" alt=""> <span>5#风机</span>
                                 </div>
                             </div>
                         </div>
@@ -243,6 +243,8 @@ export default {
             timer: null,
             deviceName: 1,
             controlList: [],
+            statusInterval:null,//status状态的Interval
+            statusTime:3,//status状态的秒数
         }
     },
     watch: {
@@ -251,6 +253,7 @@ export default {
             const store = this.$store.state
             this.indexs = this.$route.query.index ? this.$route.query.index : store.equipmentIndex;
             this.deviceName = store.equipmentList[this.indexs - 1].deviceName
+            clearInterval(this.statusInterval)&&this.statusInterval
             setTimeout(() => {
 
                 if (this.player) {
@@ -289,6 +292,7 @@ export default {
             this.player.destroy()
             this.player = null
         }
+        clearInterval(this.statusInterval)&&this.statusInterval
         that.timer && clearInterval(that.timer)
         this.$bus.$off('refreshTime')
     },
@@ -541,39 +545,13 @@ export default {
                     // console.log(this.controlList);
                 })
 
-                var TargetValue = {
+                this.getStatus()
-                    deviceId: store.equipmentList[this.indexs - 1].deviceId
+                clearInterval(this.statusInterval)&&this.statusInterval
+              this.statusInterval =  setInterval(() => {
+                    if(this.deviceName==10){
+                        this.getStatus()
                     }
-                this.api.getControlGetState(TargetValue).then(res => {
+                }, this.statusTime*1000);
-                    if (res.data.code == 200) {
-                        console.log(res.data.data, 123123);
-                        this.fanStatus.open = res.data.data['1023']
-                        this.fanStatus.status = []
-                        var num = res.data.data['1024']
-                        var num1 = this.padString(num.toString(2), 5)
-                        var openListNew = []
-                        openListNew = num1.split("")
-                        this.fanStatus.status = openListNew.reverse()
-                        this.statusList = []
-                        for (var i = 0; i < 4; i++) {
-                            var statusData = { name: `顶卷膜${i + 1}`, open: res.data.data[(1025 + (i * 3))], progress: res.data.data[(1027 + (i * 3))], index: res.data.data[(1026 + (i * 3))] }
-                            this.statusList.push(statusData)
-                   
-
-                        }
-                        this.$forceUpdate();
-                      setTimeout(() => {
-                        this.statusList.forEach((el,index)=>{
-                            if(el.open!=0){
-                                statusCharts(`statusCharts${index}`,el.progress)
-                            }
-                        })
-                      }, 10);
-
-                    } else {
-                        // this.$message.error(res.data.msg);
-                    }
-                })
                 var data1 = store.equipmentList[this.indexs - 1].deviceId
 
                 this.api.getControlFsdata(data1).then(res => {
@@ -607,6 +585,41 @@ export default {
             }
 
         },
+        getStatus(){
+            var store = this.$store.state
+            var TargetValue = {
+                    deviceId: store.equipmentList[this.indexs - 1].deviceId
+                }
+                this.api.getControlGetState(TargetValue).then(res => {
+                    if (res.data.code == 200) {
+                        this.fanStatus.open = res.data.data['1023']
+                        this.fanStatus.status = []
+                        var num = res.data.data['1024']
+                        var num1 = this.padString(num.toString(2), 5)
+                        var openListNew = []
+                        openListNew = num1.split("")
+                        this.fanStatus.status = openListNew.reverse()
+                        this.statusList = []
+                        for (var i = 0; i < 4; i++) {
+                            var statusData = { name: `顶卷膜${i + 1}`, open: res.data.data[(1025 + (i * 3))], progress: res.data.data[(1027 + (i * 3))], index: res.data.data[(1026 + (i * 3))] }
+                            this.statusList.push(statusData)
+                   
+
+                        }
+                        this.$forceUpdate();
+                      setTimeout(() => {
+                        this.statusList.forEach((el,index)=>{
+                            if(el.open!=0){
+                                statusCharts(`statusCharts${index}`,el.progress)
+                            }
+                        })
+                      }, 10);
+
+                    } else {
+                        // this.$message.error(res.data.msg);
+                    }
+                })
+        },
         getTime() {
             this.time = getnowtime()
             const that = this