展示页面修改为按钮刷新数据

src/main.js

@@ -19,5 +19,8 @@ import 'videojs-contrib-hls'; // 引入支持HLS的插件
 new Vue({
   router,
   store,
-  render: h => h(App)
+  render: h => h(App),
+  beforeCreate(){
+    Vue.prototype.$bus=this
+  },
 }).$mount('#app')

src/views/HomeView.vue

@@ -5,6 +5,7 @@
 
         <div>
           <div class="return-btn" @click="returnRouter()">返回</div>
+          <div class="return-btn" @click="refreshData()">数据刷新</div>
           <!-- <div class="router-list" @click="toRouter(item)" :class="routerAct == item.router ? 'active' : ''"
             v-for="item, index in routerList" :key="index">
             {{ item.name }}
@@ -14,6 +15,7 @@
       </div>
       <div class="header-center" v-if="deviceDetail">{{ deviceDetail.deviceTypeName }}</div>
       <div class="header-right">
+   
         <div class="time" v-if="time">
           {{ time.year.year }}-{{ time.year.month }}-{{ time.year.date }}<span>{{ time.time }}</span>
           <div>{{ time.week }}</div>
@@ -53,6 +55,10 @@ export default {
     }
   },
   methods: {
+    refreshData(){
+      this.getEqbyid()
+      this.$bus.$emit('refreshData')
+    },
     getEqbyid() {
             var store=this.$store.state
             var userInfo = JSON.parse(localStorage.getItem('userInfo'))
@@ -105,7 +111,22 @@ export default {
   background: url(../assets/image/background.jpg) no-repeat;
   background-size: 1920px 1080px;
   background-position: center top;
-
+  .return-btn {
+          width: 120px;
+          margin: 0 8px;
+          padding: 0 20px;
+          border-radius: 3px;
+          height: 40px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          font-size: 16px;
+          font-family: Microsoft YaHei;
+          font-weight: bold;
+          color: #FFFFFF;
+          cursor: pointer;
+          background: #00BB88;
+        }
   .header {
     display: flex;
     align-items: center;
@@ -124,25 +145,10 @@ export default {
         flex-shrink: 0;
         display: flex;
         align-items: center;
-        justify-content: space-between;
+        // justify-content: space-between;
         width: 500px;
 
-        .return-btn {
-          width: 120px;
-          margin: 0 8px;
-          padding: 0 20px;
-          border-radius: 3px;
-          height: 40px;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          font-size: 16px;
-          font-family: Microsoft YaHei;
-          font-weight: bold;
-          color: #FFFFFF;
-          cursor: pointer;
-          background: #00BB88;
-        }
+      
       }
 
       .router-list {

src/views/page/status.vue

@@ -281,23 +281,25 @@ export default {
     //清除监听
     beforeDestroy(){ 
         const that = this;
-         that.pageTimer&&clearInterval(that.pageTimer)
+        this.$bus.$off('refreshData')
+        //  that.pageTimer&&clearInterval(that.pageTimer)
     },
     mounted() {
         const that = this;
         if (localStorage.getItem('token')) {
-           
-        setTimeout(() => {
             that.getEqbyid();
-            that.pageTimer&&clearInterval(that.pageTimer)
-            that.pageTimer= setInterval(() => {
-            that.getEqbyid();
-           }, 5000);
-        }, 0);
+        // setTimeout(() => {
+        //     that.pageTimer&&clearInterval(that.pageTimer)
+        //     that.pageTimer= setInterval(() => {
+        //     that.getEqbyid();
+        //    }, 5000);
+        // }, 0);
         } else {
             //   this.$router.push({ name: 'login' })
-
         }
+        this.$bus.$on('refreshData',(res)=>{
+             that.getEqbyid();
+        })
     },
     methods: {
         //countType计算类型