NEZ-3004 feat： dashboard 页面 时间选择器组件增加 时间范围锁定功能

nezha-fronted/src/assets/css/common.scss

@@ -98,6 +98,9 @@
 .colorffa416 {
   color: #ffa416;
 }
+.colorfa901c {
+  color: $--color-primary;
+}
 .colorec7f66 {
   color: #ec7f66;
 }

nezha-fronted/src/assets/css/components/common/timePicker.scss

@@ -171,8 +171,8 @@
   background: $--background-color-empty;
   box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
   position: absolute;
-  right: 4%;
+  right: 80px;
-  top: 50px;
+  top: 40px;
   z-index: 1;
 
   .date-range-panel-content-left {

nezha-fronted/src/components/common/bottomBox/bottomBox.vue

@@ -161,6 +161,33 @@ export default {
     obj: {
       immediate: true,
       handler (n) {
+        if (this.from === this.fromRoute.asset) {
+          const hasSub = this.obj && this.obj.childrenNum
+          const hasProcess = this.obj && this.obj.clientState == '1'
+          const hasVays = this.obj && this.obj.model && this.obj.model.tsgAppliance == '1'
+          if (this.targetTab === 'assetSubTab' && !hasSub) {
+            this.$nextTick(() => {
+              this.changeTab('dashboardTab')
+            })
+          }
+          if (this.targetTab === 'process' && !hasProcess) {
+            this.$nextTick(() => {
+              this.changeTab('dashboardTab')
+            })
+          }
+          if (this.targetTab === 'vsys' && !hasVays) {
+            this.$nextTick(() => {
+              this.changeTab('dashboardTab')
+            })
+          }
+        }
+        if (this.from === this.fromRoute.endpoint) {
+          const config = this.obj.configs.find(c => c.type === 'logs')
+          const hasLog = config && config.enable === 1
+          if (this.targetTab === 'log' && !hasLog) {
+            this.changeTab('dashboardTab')
+          }
+        }
       }
     }
   },
@@ -309,11 +336,12 @@ export default {
       return config && config.enable === 1
     },
     assetTabs () {
+      const id = this.obj.id
       const hasSub = this.obj && this.obj.childrenNum
       const hasProcess = this.obj && this.obj.clientState == '1'
       const hasVays = this.obj && this.obj.model && this.obj.model.tsgAppliance == '1'
       const tabs = [
-        { prop: 'dashboardTab', name: this.$t('overall.dashboard') },
+        { prop: 'dashboardTab', name: this.$t('overall.dashboard'), id: id },
         { prop: 'alertMessageTab', name: this.$t('overall.alert') },
         { prop: 'endpointTab', name: this.$t('asset.endpoint') },
         { prop: 'log', name: this.$t('dashboard.dashboard.chartForm.typeVal.log.label') }
@@ -331,10 +359,11 @@ export default {
       return tabs
     },
     endpointTabs () {
+      const id = this.obj.id
       const config = this.obj.configs.find(c => c.type === 'logs')
       const hasLog = config && config.enable === 1
       const tabs = [
-        { prop: 'dashboardTab', name: this.$t('overall.dashboard') },
+        { prop: 'dashboardTab', name: this.$t('overall.dashboard'), id: id },
         { prop: 'endpointAlertMessage', name: this.$t('overall.alert') },
         { prop: 'Metrics', name: this.$t('overall.metric') }
       ]

nezha-fronted/src/components/common/bottomBox/tabs/dashboardTab.vue

@@ -15,7 +15,7 @@
       <template v-slot:top-tool-right>
         <!-- asset -->
         <div v-if="from === fromRoute.asset" style="display: flex">
-          <pick-time ref="pickTime" v-model="searchTime" :refresh-data-func="dateChange" :use-chart-unit="false" :sign="'dashboard' + obj.id"></pick-time>
+          <pick-time ref="pickTime" v-model="searchTime" :refresh-data-func="dateChange" :show-locked="true" :use-chart-unit="false" :sign="'dashboard' + obj.id"></pick-time>
           <button id="panel-add-chart" v-has="'main_add'" :title="$t('overall.createChart')" class="top-tool-btn margin-r-10" type="button" @click="addChartBefore">
             <i class="nz-icon-create-square nz-icon"></i>
           </button>
@@ -176,6 +176,12 @@ export default {
     },
     panelLock () {
       return this.$store.getters.getPanelLock
+    },
+    timePickerLocked () {
+      return this.$store.getters.getTimePickerLocked
+    },
+    timePickerRange () {
+      return this.$store.getters.getTimePickerRange
     }
   },
   data () {
@@ -574,6 +580,10 @@ export default {
           time: this.searchTime,
           nowTimeType: this.nowTimeType
         })
+        this.$store.dispatch('dispatchTimePickerRange', {
+          time: this.searchTime,
+          nowTimeType: this.nowTimeType
+        })
       }
     },
     /* 时间条件查询--end */
@@ -851,7 +861,20 @@ export default {
           time: this.searchTime,
           nowTimeType: this.nowTimeType
         })
+        this.$store.dispatch('dispatchTimePickerRange', {
+          time: this.searchTime,
+          nowTimeType: this.nowTimeType
         })
+      })
+    },
+    setTimePickerRange () {
+      if (!this.timePickerRange.nowTimeType) {
+        this.setDefaultTimeRange()
+      }
+      const nowTimeType = this.nowTimeType = this.timePickerRange.nowTimeType
+      this.searchTime = this.timePickerRange.time
+      this.$refs.pickTime.$refs.timePicker.setTimeRange(this.nowTimeType, this.searchTime)
+      this.setSearchTime(nowTimeType.type, nowTimeType.value, nowTimeType)
     },
     // 设置默认刷新
     setDefaultRefresh () {
@@ -895,7 +918,11 @@ export default {
     showPanel: {
       handler () {
         if (this.from !== this.fromRoute.dashboardTemp) {
+          if (this.timePickerLocked && this.timePickerRange && this.timePickerRange.nowTimeType) {
+            this.setTimePickerRange()
+          } else {
             this.setDefaultTimeRange()
+          }
           this.setDefaultRefresh()
         }
       }

nezha-fronted/src/components/common/pickTime.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="interval-refresh margin-r-10">
+  <div class="interval-refresh margin-r-10" style="position: relative">
-    <time-picker v-if="showTimePicker" ref="timePicker" v-model="searchTime" :default-pick="defaultPick" :show-empty="showEmpty" class="time-picker margin-r-10" size="small" @change="dateChange" :sign="sign"></time-picker>
+    <time-picker v-if="showTimePicker" :showLocked="showLocked" ref="timePicker" v-model="searchTime" :default-pick="defaultPick" :show-empty="showEmpty" class="time-picker margin-r-10" size="small" @change="dateChange" :sign="sign"></time-picker>
     <multipleTime v-if="showMultiple" ref="multipleTime" :stepSearchTime="searchTime" class="multiple-time margin-r-10" @change="dateChange(searchTime)"/>
     <chart-unit v-if="useChartUnit" v-model="unit" ref="chartUnit" class="margin-r-10"></chart-unit>
     <div v-show="useRefresh" class="top-tool-btn-group">
@@ -71,7 +71,8 @@ export default {
     showEmpty: { type: Boolean, default: false },
     id: String,
     sign: [Number, String],
-    from: String
+    from: String,
+    showLocked: { type: Boolean, default: false },
   },
   data () {
     return {

nezha-fronted/src/components/common/table/nzDataList.vue

@@ -266,7 +266,9 @@ export default {
     },
     showBottomBox (targetTab, row) {
       this.sign = row.id
+      if (!this.bottomBox.showSubList) {
         this.bottomBox.targetTab = targetTab
+      }
       this.bottomBox.object = JSON.parse(JSON.stringify(row))
       this.bottomBox.showSubList = true
     },

nezha-fronted/src/components/common/timePicker.vue

@@ -5,7 +5,7 @@
     class="calendar"
     v-clickoutside="changeDropdownFlag"
   >
-    <div @click="showDropdown(true)" class="date-range-text">
+    <div @click="showDropdown(!dropdownFlag)" class="date-range-text">
       <div class="calendar-popover-text">
         <i class="nz-icon nz-icon-time"></i>
       </div>
@@ -26,6 +26,7 @@
         <!-- <div class="time-no-data">{{ showTime.text }}</div> -->
       </div>
       <div class="calendar-popover-text">
+        <i class="nz-icon" v-if="showLocked" @click.stop="changeLocked" :class="timePickerLocked ? 'nz-icon-push-pin-line colorfa901c' : 'nz-icon-push-pin-line'" style="margin-right: 5px;cursor: pointer"/>
         <i class="el-icon-arrow-down"></i>
       </div>
     </div>
@@ -151,10 +152,12 @@ export default {
     size: {
       type: String
     },
-    sign: [Number, String]
+    sign: [Number, String],
+    showLocked: { type: Boolean, default: false },
   },
   data () {
     return {
+      timePickerLocked: false, // 该参数只用于图标状态的切换 实际时间的控制 由原页面控制
       whoChoose: '',
       searchTimeValue: '',
       rangeHistory: [],
@@ -210,6 +213,7 @@ export default {
     }
   },
   mounted () {
+    this.timePickerLocked = localStorage.getItem('nz-time-picker-locked') ? JSON.parse(localStorage.getItem('nz-time-picker-locked')) : false
     this.timeShowData = JSON.parse(JSON.stringify(this.timeData))
     this.timeShowData.shift()
     this.getItem()
@@ -326,6 +330,11 @@ export default {
       this.oldSearchTimeError[1] = false
       this.dropdownFlag = value
     },
+    changeLocked () {
+      this.timePickerLocked = !this.timePickerLocked
+      localStorage.setItem('nz-time-picker-locked', JSON.stringify(this.timePickerLocked))
+      this.$store.dispatch('dispatchTimePickerLocked', this.timePickerLocked)
+    },
     dateInputChange (type, v) {
       const timeFormatMain = localStorage.getItem('nz-default-dateFormat') ? localStorage.getItem('nz-default-dateFormat') : 'YYYY-MM-DD HH:mm:ss'
       if (type == 'start') {
@@ -462,12 +471,12 @@ export default {
         }
       }
     },
-    setTimeRange (nowTimeType) {
+    setTimeRange (nowTimeType, time) {
       this.isCustom = false
       this.nowTimeType = nowTimeType
       this.$set(this.showTime, 'id', nowTimeType.id)
       this.$set(this.showTime, 'text', nowTimeType.text)
-      this.setSearchTime(nowTimeType.type, nowTimeType.value)
+      this.setSearchTime(nowTimeType.type, nowTimeType.value, time)
       const timeTemp = this.$lodash.cloneDeep(this.searchTime)
       this.oldSearchTime[0] = timeTemp[0]
       this.oldSearchTime[1] = timeTemp[1]
@@ -529,6 +538,7 @@ export default {
         this.$set(this.searchTime, 1, endTime)
         this.$set(this.searchTime, 2, val + 'd')
       } else {
+        this.isCustom = true
         this.$set(this.searchTime, 0, time[0])
         this.$set(this.searchTime, 1, time[1])
       }

nezha-fronted/src/components/layout/leftMenu.vue

@@ -103,6 +103,7 @@ export default {
       this.$store.commit('isShrink')
     },
     jump (route) {
+      this.$store.commit('setTimePickerRange', []) // 切换路由时清空已选择的时间
       if (route === this.route) {
         this.refresh()
       }

nezha-fronted/src/components/page/dashboard/dashboard.vue

@@ -51,7 +51,7 @@
               <!-- 仪表盘轮播 -->
               <playlist v-if="playListControls" :playlistObj="playlistObj" :panelData="panelData" @stopPlaylist="stopPlaylist" @changePlay="panelChange"></playlist>
 
-              <pick-time id="panel" ref="pickTime" v-model="searchTime" :refresh-data-func="dateChange" :use-chart-unit="false" class="margin-r-10" :sign="showPanel.id" :from="fromRoute.dashboard"></pick-time>
+              <pick-time id="panel" ref="pickTime" v-model="searchTime" :refresh-data-func="dateChange" :use-chart-unit="false" :show-locked="true"  class="margin-r-10" :sign="showPanel.id" :from="fromRoute.dashboard"></pick-time>
 
               <template v-if="!playListControls">
                 <!-- 切换查看模式 -->
@@ -378,6 +378,12 @@ export default {
     },
     panelLock () {
       return this.$store.getters.getPanelLock
+    },
+    timePickerLocked () {
+      return this.$store.getters.getTimePickerLocked
+    },
+    timePickerRange () {
+      return this.$store.getters.getTimePickerRange
     }
   },
   methods: {
@@ -802,6 +808,10 @@ export default {
         time: this.searchTime,
         nowTimeType: this.nowTimeType
       })
+      this.$store.dispatch('dispatchTimePickerRange', {
+        time: this.searchTime,
+        nowTimeType: this.nowTimeType
+      })
       // 选择时间范围时更新路由
       if (route) {
         const param = { ...this.$route.query }
@@ -1140,7 +1150,20 @@ export default {
           time: this.searchTime,
           nowTimeType: this.nowTimeType
         })
+        this.$store.dispatch('dispatchTimePickerRange', {
+          time: this.searchTime,
+          nowTimeType: this.nowTimeType
         })
+      })
+    },
+    setTimePickerRange () {
+      if (!this.timePickerRange.nowTimeType) {
+        this.setDefaultTimeRange()
+      }
+      const nowTimeType = this.nowTimeType = this.timePickerRange.nowTimeType
+      this.searchTime = this.timePickerRange.time
+      this.$refs.pickTime.$refs.timePicker.setTimeRange(this.nowTimeType, this.searchTime)
+      this.setSearchTime(nowTimeType.type, nowTimeType.value, nowTimeType)
     },
     // 设置默认刷新
     setDefaultRefresh () {
@@ -1199,7 +1222,11 @@ export default {
   watch: {
     showPanel: {
       handler () {
+        if (this.timePickerLocked && this.timePickerRange && this.timePickerRange.nowTimeType) {
+          this.setTimePickerRange()
+        } else {
           this.setDefaultTimeRange()
+        }
         this.setDefaultRefresh()
       }
     },

nezha-fronted/src/store/index.js

@@ -2,6 +2,7 @@ import Vue from 'vue'
 import Vuex from 'vuex'
 import user from './user'
 import panel from './panel'
+import timePicker from './timePicker'
 import terminalFile from './terminalFile'
 import meta2dStore from '@/components/common/project/meta2d/js/meta2dStore'
 // import topology from './topology'
@@ -12,7 +13,8 @@ const store = new Vuex.Store({
     user,
     panel,
     terminalFile,
-    meta2dStore
+    meta2dStore,
+    timePicker
   },
   state: {
     /* 监听对象变化，用于顶部菜单与底部内容的同步 */

nezha-fronted/src/store/timePicker.js

@@ -0,0 +1,31 @@
+const timePicker = {
+  state: {
+    timePickerLocked: localStorage.getItem('nz-time-picker-locked') ? JSON.parse(localStorage.getItem('nz-time-picker-locked')) : false,
+    timePickerRange: {}
+  },
+  mutations: {
+    setTimePickerLocked (state, flag) {
+      state.timePickerLocked = flag
+    },
+    setTimePickerRange (state, range) {
+      state.timePickerRange = range
+    }
+  },
+  getters: {
+    getTimePickerLocked (state) {
+      return state.timePickerLocked
+    },
+    getTimePickerRange (state) {
+      return state.timePickerRange
+    }
+  },
+  actions: {
+    dispatchTimePickerLocked (store, flag) {
+      store.commit('setTimePickerLocked', flag)
+    },
+    dispatchTimePickerRange (store, range) {
+      store.commit('setTimePickerRange', range)
+    }
+  }
+}
+export default timePicker