src/assets/css/main.css

@@ -1717,10 +1717,33 @@
   margin: 10px 8px 0 !important;
 }
 
+.realTime .page-content .status-view .status-view-content .status-true .status-fan > div.off span {
+  color: #00C0F7;
+}
+
+.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,30 @@
                             font-size: 14px;
                             height: 30px;
                             margin: 10px 8px 0 !important;
+                            &.off{
+                               span{
+                                color: #00C0F7;
+                               }
+                            }
+                            >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/largeScreen.vue

@@ -99,8 +99,8 @@
             <div class="swiper-container mySwiper_video" >
               <div class="swiper-wrapper">
                 <div class="swiper-slide swiper-slide_video" v-for="(item, index) in get_sel_eqbyid_list" :key="index">
-                  <div class="monitor" ref="monitor" id="monitor">
+                  <div class="monitor"  :id="'monitor'+item.number">
-                    <div ref="videoPlayer" class="video-js" id="video-js"></div>
+                    <div ref="videoPlayer" class="video-js" :id="'video-js'+item.number"></div>
                   </div>
                   <div class="c_bottom">{{ item.deviceTypeName }}</div>
                 </div>
@@ -335,12 +335,12 @@ export default {
     },
 
     // 获取摄像头得地址 Copy
-    getVideoData(cameraid, channelid) {
+    getVideoData(cameraid, channelid,index) {
       this.api.camera_gethls(cameraid, channelid).then(res => {
         // console.log('获取摄像头得地址 Copy',res);
         if (res.data.code == 200) {
           // this.url = res.data.data.ezopen 
-          // this.createVideoNew(res.data.data.accessToken)
+          this.createVideoNew(res.data.data.accesstoken,res.data.data.ezopen,index )
           // this.createVideo()
         }
       })
@@ -351,10 +351,11 @@ export default {
 
       this.api.sel_eqbyid(userId).then(res => {
         // console.log('根据用户id查询对应的设备数据 Copy',res);
-        res.data.data.forEach(item => {
+        res.data.data.forEach((item,index) => {
-          if (item.equipmentName == 10 && item.cameraSerialNumber != null) {
+          if ( item.cameraSerialNumber != null) {
-            this.get_sel_eqbyid_list.push(item)
+            this.get_sel_eqbyid_list.push({...item,number:index})
-            this.getVideoData(item.cameraSerialNumber, item.cameraChannelNumber)
+
+            this.getVideoData(item.cameraSerialNumber, item.cameraChannelNumber,index)
             // this.getVideoData("L18357958", "5")
           }
         })
@@ -393,14 +394,15 @@ export default {
       this.get_sel_eqbyid(userInfo.userid)
     },
 
-    createVideoNew(accessToken) {
+    createVideoNew(accessToken,url,index) {
+      console.log(accessToken,url,index,111);
       // divW和divH是获取了父级宽高 使播放容器能铺满div
-      let divW = this.$refs.monitor.clientWidth
+      let divW = document.getElementById('monitor'+index).clientWidth
-      let divH = this.$refs.monitor.clientHeight
+      let divH = document.getElementById('monitor'+index).clientHeight
       this.player = new EZUIKit.EZUIKitPlayer({
-        id: 'video-js', // 视频容器ID
+        id: 'video-js'+index, // 视频容器ID
         accessToken: accessToken,
-        url: this.url,
+        url: url,
         // 官方url例子：ezopen://open.ys7.com/G39444019/1.live 也可并非.live结尾 详见GitHub
         // 播放主题  simple-极简版; standard-标准版; security-安防版; voice-语音版; 自定义主题详见GitHub
         template: 'security',

src/views/page/realTime.vue

@@ -107,25 +107,30 @@
                             </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"
-                                    <img v-else src="../../assets/img/fan-off.png" alt=""> 2#风机
+                                        alt="">
+                                    <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"
-                                    <img v-else src="../../assets/img/fan-off.png" alt=""> 3#风机
+                                        alt="">
+                                    <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"
-                                    <img v-else src="../../assets/img/fan-off.png" alt=""> 4#风机
+                                        alt="">
+                                    <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"
-                                    <img v-else src="../../assets/img/fan-off.png" alt=""> 5#风机
+                                        alt="">
+                                    <img v-else src="../../assets/img/fan-off.png" alt=""> <span>5#风机</span>
                                 </div>
                             </div>
                         </div>
@@ -177,7 +182,7 @@
                                 <div :id="'statusCharts' + index"></div>
                             </div>
                             <div class="status-true-text">
-                                <div class="status-true-text-left">静止状态</div>
+                                <div class="status-true-text-left">{{ getNumberStatus(item.index) }}</div>
                                 <div class="status-true-text-right">{{ item.progress }}%</div>
                             </div>
                         </div>
@@ -243,6 +248,8 @@ export default {
             timer: null,
             deviceName: 1,
             controlList: [],
+            statusInterval: null,//status状态的Interval
+            statusTime: 3,//status状态的秒数
         }
     },
     watch: {
@@ -251,6 +258,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 +297,7 @@ export default {
             this.player.destroy()
             this.player = null
         }
+        clearInterval(this.statusInterval) && this.statusInterval
         that.timer && clearInterval(that.timer)
         this.$bus.$off('refreshTime')
     },
@@ -314,7 +323,19 @@ export default {
             })
             console.log(this.player);
         },
+        getNumberStatus(index) {
+            if (index == 0) {
+                return '静止状态'
+            } else if (index == 1) {
+                return '正向打开中'
+            } else if (index == 2) {
+                return '反向关闭中'
+            } else {
+                return ''
+            }
+        },
         createVideo() {
+
             // 创建视频播放器
             videojs.addLanguage('zh-CN', video_zhCN)
             this.player = videojs(this.$refs.videoPlayer, {
@@ -541,39 +562,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 +602,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
@@ -657,5 +687,4 @@ export default {
     border: 1px solid #dcdfe6;
     color: #606266;
     font-size: 14px;
-}
+}</style>
-</style>