小窗口自动关闭

src/views/components/subComponent.vue

@@ -96,7 +96,7 @@
           <p>温度范围：{{newData.temperatureValue}}℃</p>
           <p>湿度范围：{{newData.humidityValue}}%RH</p>
         </div>
-        <p class="off-button" @click="showInfo">关闭</p>
+        <p class="off-button" @click="offShowInfo">关闭{{showType?'('+showTime+')':''}}</p>
       </div>
     </div>
     <!--报警-->
@@ -190,6 +190,8 @@
           alarmType: false
         },
         showType: false,
+        showTime:0,
+        showTimer:null,
         videoList: [],
         videoData: {},
         videoShow:false,
@@ -248,9 +250,34 @@
       //显示详情
       showInfo() {
         this.$set(this,'checkVideoIndex',0);
+        if(!this.showType){
+          this.showTimerFunction();
+        }
         this.$set(this, 'showType', !this.showType)
         this.$parent.setSubInfoType()
       },
+      //关闭窗口
+      offShowInfo(){
+        clearInterval(this.showTimer);
+        this.$set(this,'checkVideoIndex',0);
+        this.$set(this, 'showType', false)
+        this.$parent.setSubInfoType()
+      },
+      //关闭窗口定时器
+      showTimerFunction(){
+        let self = this;
+        this.$set(this,'showTime',30);
+        self.showTimer = window.setInterval(() => {
+          showUpdates();
+        }, 1000);
+        async function showUpdates() {
+          if(self.showTime>0){
+            self.$set(self,'showTime',self.showTime - 1);
+          }else{
+            self.offShowInfo();
+          }
+        }
+      },
       //切换视频
       checkVideo(index){
         let self = this;
@@ -295,6 +322,14 @@
         this.$set(this,'alarmType',false);
         this.$set(this.newData,'alarmType',false);
       },
+      beforeDestroy() {
+        //清除定时器
+        clearInterval(this.showTimer);
+      },
+      destroyed() {
+        //清除定时器
+        clearInterval(this.showTimer);
+      }
     }
   }
 </script>