增加定时刷新

src/store/getters.js

@@ -14,6 +14,7 @@ const getters = {
   setting: state => state.user.setting,
   permission_routers: state => state.permission.routers,
   addRouters: state => state.permission.addRouters,
-  errorLogs: state => state.errorLog.logs
+  errorLogs: state => state.errorLog.logs,
+  timer: state => state.timer.switchBool
 }
 export default getters

src/store/index.js

@@ -5,6 +5,7 @@ import errorLog from './modules/errorLog'
 import permission from './modules/permission'
 import tagsView from './modules/tagsView'
 import user from './modules/user'
+import timer from './modules/timer'
 import getters from './getters'
 
 Vue.use(Vuex)
@@ -15,7 +16,8 @@ const store = new Vuex.Store({
     errorLog,
     permission,
     tagsView,
-    user
+    user,
+    timer
   },
   getters
 })

src/store/modules/timer.js

+
+const timer = {
+  state: {
+    switchBool: true
+  },
+
+  mutations: {
+    SET_SWITCH: (state, switchBool) => {
+      state.switchBool = switchBool
+    }
+  },
+
+  actions: {
+    changeSwitch({ commit }, flag) {
+      commit('SET_SWITCH', flag)
+    }
+  }
+}
+
+export default timer

src/views/docker/envDetail.vue

 <template>
   <div>
-    <div class="shadow-content">
+    <div style="padding:10px 20px" >
+      <div style="float:right">
+        <span style="font-size:13px">自动刷新</span>
+        <el-switch v-model="timer" @change="refreshInterval"/>
+      </div>
+    </div>
+
+    <div class="shadow-content" >
       <div class="warn-content">
         <svg-icon icon-class="service"/>
         基础服务
-        <div style="float: right;min-width: 300px;overflow: hidden">
+        <div style="float: right;">
           <el-button type="warning" size="mini" round @click="getRepository('base')">新增服务</el-button>
-          <el-button type="warning" size="mini" round @click="refresh">刷新状态</el-button>
+          <el-button type="success" size="mini" round @click="refresh">刷新状态</el-button>
           <el-dropdown>
-            <el-button type="warning" size="mini" round>
+            <el-button type="primary" size="mini" round>
               更多操作
             </el-button>
             <el-dropdown-menu slot="dropdown">
@@ -83,7 +90,7 @@
         {{ item._id }}服务
         <div style="float: right">
           <el-button type="warning" size="mini" round @click="getRepository(item._id)">新增服务</el-button>
-          <el-button type="warning" size="mini" round @click="refresh">刷新状态</el-button>
+          <el-button type="success" size="mini" round @click="refresh">刷新状态</el-button>
         </div>
       </div>
       <el-table
@@ -350,7 +357,9 @@ export default {
           { required: true, message: '请输入更新的域名信息', trigger: 'blur' }
         ]
       },
-      dialogHost: false
+      dialogHost: false,
+      timer: this.$store.getters.timer,
+      timerFunction: null
     }
   },
   created() {
@@ -358,22 +367,41 @@ export default {
       this.typeList = res.data
     })
     this.namespace = this.$route.params.name
-    this.getServicelist()
+    clearInterval(this.timerFunction)
+    this.timerFunction = null
+    if (this.timer) {
+      this.refreshInterval(this.timer)
+    } else {
+      this.getServicelist()
+    }
+  },
+  destroyed() {
+    // 每次离开当前界面时，清除定时器
+    clearInterval(this.timerFunction)
+    this.timerFunction = null
   },
   methods: {
     getServicelist() {
       fetchK8sdetail({ 'namespace': this.namespace }).then(res => {
         const servicelist = res.data.services
         this.array2Object(servicelist)
-        // this.$message({
-        //   message: '服务状态已拉取',
-        //   type: 'success'
-        // })
       })
     },
+
     refresh() {
       this.getServicelist()
     },
+
+    refreshInterval(value) {
+      this.$store.dispatch('changeSwitch', value)
+      if (value) {
+        this.getServicelist()
+        this.timerFunction = setInterval(this.getServicelist, 5000)
+      } else {
+        clearInterval(this.timerFunction)
+      }
+    },
+
     getRepository(label) {
       this.label = label
       this.reponame = ''