NEZ-2725 feat：dashboard 编辑页面新增defaultTimeRange和Auto Refresh配置项

nezha-fronted/src/assets/css/components/common/rightBox/panelBox.scss

@@ -19,6 +19,7 @@
       font-size: 12px;
       color: $--color-text-secondary;
       padding-left: 5px;
+      line-height: 30px;
     }
   }
   .el-input--suffix.el-date-editor--datetime .el-input__inner{

nezha-fronted/src/assets/css/components/page/dashboard/panel.scss

@@ -136,7 +136,7 @@
   height: 100%;
   width: 100%;
   background: center center no-repeat $--background-color-empty;
-  z-index: 10;
+  z-index: 1010;
 }
 .show-panel-name{
   display: inline-block;

nezha-fronted/src/components/chart/chart/chartStat.vue

@@ -54,7 +54,7 @@
 
         <!-- comparison -->
         <template v-if="comparisonShow(item)">
-          <div :class="{'comparison-text-center':chartInfo.param.text==='none'}" class="comparison-text" :style="{fontSize:item.fontSize>=36?'16px':'12px'}">
+          <div :class="{'comparison-text-center':chartInfo.param.text==='none'}" class="comparison-text" :style="{fontSize:item.comparisonFont+'px'}">
             <span v-if="chartInfo.param.comparison==='hour'">{{$t('dashboard.hourComparison')}}</span>
             <span v-if="chartInfo.param.comparison==='day'">{{$t('dashboard.dayComparison')}}</span>
             <span v-if="chartInfo.param.comparison==='week'">{{$t('dashboard.weekComparison')}}</span>
@@ -357,6 +357,14 @@ export default {
         item.scale = scale < 1 ? 1 : parseFloat(scale)
         fontSize = fontSize > 12 ? fontSize : this.minFontSzie
         item.fontSize = fontSize
+
+        if (fontSize > 36) {
+          item.comparisonFont = 16
+        } else if (fontSize > 24) {
+          item.comparisonFont = 14
+        } else {
+          item.comparisonFont = 12
+        }
       })
       this.isInit = false
     },

nezha-fronted/src/components/chart/panelChart.vue

@@ -181,7 +181,7 @@ export default {
         } else {
           nowTimeType = JSON.parse(nowTimeType)
         }
-        if (numInterval >= 6 && nowTimeType.value !== -1) { // 大于1分钟，则start、end均往后移numInterval，否则时间不变
+        if (numInterval >= 60000 && nowTimeType.value !== -1) { // 大于1分钟，则start、end均往后移numInterval，否则时间不变
           startTime = bus.getNewTime(bus.formateTimeToTime(this.timeRange[0]), numInterval, 'YYYY-MM-DD HH:mm:ss')
           endTime = bus.timeFormate(now, 'YYYY-MM-DD HH:mm:ss')
         } else {

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

@@ -36,12 +36,6 @@
             @panelLockChange="panelLockChange"
           >
             <template v-slot:after>
-              <!-- <el-dropdown-item v-has="'main_add'">
-                <div id="chart-temp-add" @click="addChartByTemp"><i class="nz-icon nz-icon-add"></i>{{ $t('overall.AddByTemplate') }}</div>
-              </el-dropdown-item>
-              <el-dropdown-item v-has="'main_edit'">
-                <div id="chart-temp-sync" @click="chartBySync"><i class="nz-icon nz-icon-sync"></i>{{ $t('overall.syncChart') }}</div>
-              </el-dropdown-item> -->
               <el-dropdown-item v-has="'dashboard_view'">
                 <div id="chart-export-html" @click="exportType"><i class="nz-icon nz-icon-kuaizhao"></i>{{ $t('overall.snapshoot') }}</div>
               </el-dropdown-item>
@@ -71,27 +65,12 @@
             @panelLockChange="panelLockChange"
           >
             <template v-slot:after>
-              <!-- <el-dropdown-item v-has="'main_add'">
-                <div id="chart-temp-add" @click="addChartByTemp"><i class="nz-icon nz-icon-add"></i>{{ $t('overall.AddByTemplate') }}</div>
-              </el-dropdown-item>
-              <el-dropdown-item v-has="'main_edit'">
-                <div id="chart-temp-sync" @click="chartBySync"><i class="nz-icon nz-icon-sync"></i>{{ $t('overall.syncChart') }}</div>
-              </el-dropdown-item> -->
               <el-dropdown-item v-has="'dashboard_view'">
                 <div id="chart-export-html" @click="exportType"><i class="nz-icon nz-icon-kuaizhao"></i>{{ $t('overall.snapshoot') }}</div>
               </el-dropdown-item>
             </template>
           </top-tool-more-options>
         </div>
-        <!-- chartTemp -->
-        <!-- <div v-else-if="from === fromRoute.chartTemp">
-          <button id="panel-lock" :title='panelLock ? $t("overall.unlocked") : $t("overall.locked")'  class="top-tool-btn margin-r-10" @click="panelLockChange(!panelLock)" type="button">
-            <i :class="{'nz-icon nz-icon-lock':!panelLock,'nz-icon nz-icon-unlock':panelLock}"></i>
-          </button>
-          <button @click="chartBySync" id="chart-sync"  :title="$t('overall.syncChart')" class="top-tool-btn margin-r-10" type="button">
-            <i class="nz-icon nz-icon-sync"></i>
-          </button>
-        </div> -->
         <!-- dashboardTemp -->
         <div v-else-if="from === fromRoute.dashboardTemp">
           <button v-has="'main_add'" id="endpoint-create-chart" :title="$t('overall.createChart')" class="top-tool-btn margin-r-10" @click.stop="addChartBefore">
@@ -288,8 +267,7 @@ export default {
       filter: { // 过滤条件
         // productId: 0,
         dashboardId: 0,
-        start_time: '',
+        from: this.from
-        end_time: ''
       },
       showPanel: {
         name: '',
@@ -312,7 +290,28 @@ export default {
       chartDetailInfo: {},
       variables: [],
       variablesInit: false,
-      snapshotVisible: false
+      snapshotVisible: false,
+      timeData: [
+        { id: 1, text: this.$t('dashboard.dashboard.lastFiveMin'), type: 'minute', value: 5 },
+        { id: 2, text: this.$t('dashboard.dashboard.lastFifteenMin'), type: 'minute', value: 15 },
+        { id: 3, text: this.$t('dashboard.dashboard.lastThirtyMin'), type: 'minute', value: 30 },
+        { id: 4, text: this.$t('dashboard.dashboard.lastOneHour'), type: 'hour', value: 1 },
+        { id: 5, text: this.$t('dashboard.dashboard.lastThreeHour'), type: 'hour', value: 3 },
+        { id: 6, text: this.$t('dashboard.dashboard.lastSixHour'), type: 'hour', value: 6 },
+        { id: 7, text: this.$t('dashboard.dashboard.lastTwelveHour'), type: 'hour', value: 12 },
+        { id: 8, text: this.$t('dashboard.dashboard.lastTwentyFourHour'), type: 'hour', value: 24 },
+        { id: 9, text: this.$t('dashboard.dashboard.lastTwoDay'), type: 'date', value: 2 },
+        { id: 10, text: this.$t('dashboard.dashboard.lastSevenDay'), type: 'date', value: 7 },
+        { id: 11, text: this.$t('dashboard.dashboard.lastThirtyDay'), type: 'date', value: 30 }
+      ],
+      intervalList: [
+        { value: 0, label: this.$t('dashboard.dashboard.chartForm.lockList.off') },
+        { value: 30, label: '30s' },
+        { value: 60, label: '1m' },
+        { value: 300, label: '5m' },
+        { value: 900, label: '15m' },
+        { value: 1800, label: '30m' }
+      ]
     }
   },
   components: {
@@ -529,14 +528,6 @@ export default {
         return
       }
       this.chartListLoading = true
-      if (params.start_time === '' || params.end_time === '') {
-        const now = bus.getTimezontDateRange()
-        const endTimeTmp = bus.timeFormate(now[1].getTime(), 'YYYY-MM-DD HH:mm:ss')
-        const startTimeTmp = bus.timeFormate(now[0].getTime(), 'YYYY-MM-DD HH:mm:ss')
-        params.start_time = startTimeTmp
-        params.end_time = endTimeTmp
-        params.from = this.from
-      }
       if (this.from !== 'chartTemp') {
         this.$get('visual/dashboard/chart?dashboardId=' + params.dashboardId + '&groupId=0' + '&pageSize=-1').then(response => {
           if (response.code === 200) {
@@ -559,13 +550,10 @@ export default {
     /* 时间条件查询--start */
     // 选择日期变化
     dateChange (val) {
-      // this.searchTime = [...val];
       if (this.$refs.pickTime) {
         const nowTimeType = this.$refs.pickTime.$refs.timePicker.nowTimeType
         this.nowTimeType = this.$refs.pickTime.$refs.timePicker.nowTimeType
         this.setSearchTime(nowTimeType.type, nowTimeType.value)
-        this.filter.start_time = bus.timeFormate(this.searchTime[0])
-        this.filter.end_time = bus.timeFormate(this.searchTime[1])
         this.filter.dashboardId = this.showPanel.id
         this.getData(this.filter)
         this.$store.dispatch('dispatchPanelTime', {
@@ -603,28 +591,13 @@ export default {
       }
     },
     // 公用操作
-    getTableData (linkId) {
+    async getTableData (linkId) {
       if (this.from === this.fromRoute.alertRule) {
         this.getData(this.filter)
       } else {
-        if (this.from === this.fromRoute.chartTemp) {
+        if (this.from === this.fromRoute.dashboardTemp) {
-          if (this.obj.type === 'group') {
+          try {
-            this.$get('/visual/dashboard/chart', { ids: this.obj.id }).then(res => {
+            const response = await this.$get('visual/dashboard', { type: 'template', ids: this.obj.id })
-              this.panelDataList = res.data.list
-              if (this.panelDataList.length > 0) {
-                this.showPanel.id = this.filter.dashboardId = 0
-                this.getData(this.filter)
-              }
-            })
-            return
-          }
-          this.panelDataList = [this.obj]
-          if (this.panelDataList.length > 0) {
-            this.showPanel.id = this.filter.dashboardId = 0
-            this.getData(this.filter)
-          }
-        } else if (this.from === this.fromRoute.dashboardTemp) {
-          this.$get('visual/dashboard', { type: 'template', ids: this.obj.id }).then(response => {
             if (response.code === 200) {
               this.panelData = response.data.list
               if (this.panelData.length > 0) {
@@ -634,18 +607,18 @@ export default {
                 this.getData(this.filter)
               }
             }
-          }).catch((error) => {
+          } catch (error) {
             if (error) {
               console.error(error)
               this.$message.error(error.toString())
             }
-          })
+          }
         } else {
-          this.$get('visual/dashboard', { type: this.from, link: linkId || this.obj.id }).then(response => {
+          try {
+            const response = await this.$get('visual/dashboard', { type: this.from, link: linkId || this.obj.id })
             if (response.code === 200) {
               this.panelData = response.data.list
               if (this.panelData.length > 0) {
-                // this.showPanel.id = this.filter.dashboardId = this.panelData[0].id
                 this.filter.dashboardId = this.panelData[0].id
                 this.showPanel = this.$loadsh.cloneDeep(this.panelData[0])
                 this.variables = this.$loadsh.cloneDeep(this.$loadsh.get(this, 'showPanel.param.variables', []) || [])
@@ -666,12 +639,12 @@ export default {
                 this.$message.error(response)
               }
             }
-          }).catch((error) => {
+          } catch (error) {
             if (error) {
               console.error(error)
               this.$message.error(error.toString())
             }
-          })
+          }
         }
       }
     },
@@ -703,14 +676,6 @@ export default {
       // 刷新数据
       this.dateChange()
     },
-    pageNo (val) {
-      this.pageObj.pageNo = val
-      this.getTableData(this.obj.id)
-    },
-    pageSize (val) {
-      this.pageObj.pageSize = val
-      this.getTableData(this.obj.id)
-    },
     // 滚动事件触发下拉加载
     onScroll () {
       const _self = this
@@ -855,6 +820,35 @@ export default {
       this.$nextTick(() => {
         this.$refs.chartList.onScroll(this.scrollbarWrap.scrollTop)
       })
+    },
+    // 时间选择器设置默认时间范围
+    setDefaultTimeRange () {
+      this.$nextTick(() => {
+        let nowTimeType = this.$loadsh.cloneDeep(this.timeData[3])
+        const defaultTimeRange = this.$loadsh.get(this.showPanel, 'param.defaultTimeRange')
+        if (defaultTimeRange) {
+          nowTimeType = this.timeData.find(item => item.id == defaultTimeRange)
+        }
+        this.nowTimeType = this.$loadsh.cloneDeep(nowTimeType)
+        // 刷新时间范围
+        this.$refs.pickTime.$refs.timePicker.setTimeRange(this.nowTimeType)
+        this.setSearchTime(nowTimeType.type, nowTimeType.value, nowTimeType)
+        this.$store.dispatch('dispatchPanelTime', {
+          time: this.searchTime,
+          nowTimeType: this.nowTimeType
+        })
+      })
+    },
+    // 设置默认刷新
+    setDefaultRefresh () {
+      this.$nextTick(() => {
+        let refresh = this.$loadsh.cloneDeep(this.intervalList[0])
+        const defaultRefresh = this.$loadsh.get(this.showPanel, 'param.refresh')
+        if (defaultRefresh) {
+          refresh = this.intervalList.find(item => item.value == defaultRefresh)
+        }
+        this.$refs.pickTime.selectInterval(refresh)
+      })
     }
   },
   mounted () {
@@ -872,36 +866,22 @@ export default {
     obj: {
       immediate: true,
       handler (n, o) {
-        setTimeout(() => {
+        setTimeout(async () => {
           if (n && n.id) {
             this.searchLabel = {}
-            this.getTableData(n.id)
             if (this.from === fromRoute.asset) {
               this.searchLabel.assetIds = n.id
             }
+            this.getTableData(n.id)
           }
           this.chartDetailInfo = n
         }, 500)
       }
     },
-    chartRightBoxShow: {
+    showPanel: {
-      immediate: false,
+      handler () {
-      deep: true,
+        this.setDefaultTimeRange()
-      handler (n) {
+        this.setDefaultRefresh()
-        if (n) {
-          this.disposeChart()
-        } else {
-          this.$refs.addChartModal.isStable = 'instability'
-        }
-      }
-    },
-    delChartFlag: {
-      immediate: false,
-      deep: true,
-      handler (n) {
-        if (n) {
-          this.disposeChart()
-        }
       }
     },
     // 监听图表联动配置
@@ -928,6 +908,26 @@ export default {
           echarts.disconnect('timeSeriesGroup')
         }
       }
+    },
+    chartRightBoxShow: {
+      immediate: false,
+      deep: true,
+      handler (n) {
+        if (n) {
+          this.disposeChart()
+        } else {
+          this.$refs.addChartModal.isStable = 'instability'
+        }
+      }
+    },
+    delChartFlag: {
+      immediate: false,
+      deep: true,
+      handler (n) {
+        if (n) {
+          this.disposeChart()
+        }
+      }
     }
   },
   beforeDestroy () {

nezha-fronted/src/components/common/js/constants.js

@@ -361,7 +361,7 @@ export const chart = {
 }
 
 export const intervalList = [
-  { value: -1, label: i18n.t('dashboard.dashboard.chartForm.lockList.off') },
+  { value: 0, label: i18n.t('dashboard.dashboard.chartForm.lockList.off') },
   { value: 30, label: '30s' },
   { value: 60, label: '1m' },
   { value: 300, label: '5m' },

nezha-fronted/src/components/common/mixin/routerPathParams.js

@@ -53,7 +53,9 @@ export default {
         if (!from) {
           const detailType = this.detailType === 'list' ? 'dataList' : 'detailList'
           localStorage.setItem('detail-view-' + this.tableId, this.detailType)
+          if (this.detailType) {
             params.detailType = this.detailType
+          }
           if (this.detailType === 'list' && this.$refs[detailType]) {
             params.bottomBox = this.$refs[detailType].bottomBox.showSubList
             params.targetTab = this.$refs[detailType].bottomBox.targetTab

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

@@ -9,11 +9,11 @@
         <span><slot name="added-text"></slot></span>
       </button>
       <button id="browser-go" class="top-tool-btn top-tool-btn--dropdown" @click="dropdownHandler(dropdownShow)" :title="$t('el.datepicker.selectTime')">
-        <span class="select-refresh-time-label" v-if="interval !== -1">{{interLabel}}</span>
+        <span class="select-refresh-time-label" v-if="interval">{{interLabel}}</span>
         <i class="nz-icon nz-icon-arrow-down" style="font-size: 12px;"></i>
         <transition name="el-zoom-in-top">
           <ul v-show="dropdownShow" class="el-dropdown-menu el-popper el-dropdown-menu--mini nz-dropdown" v-clickoutside="dropdownHandler">
-            <li v-for="i in $CONSTANTS.intervalList" :key="i.value + i.label" :style="{color:interval === i.value || interval.value === i.value ? theme.themeColor : ''}" class="el-dropdown-menu__item dropdown-content" @click="selectInterval(i)">
+            <li v-for="i in $CONSTANTS.intervalList" :key="i.value + i.label" :style="{color:interval === i.value || interval.value === i.value ? theme.themeColor : ''}" class="el-dropdown-menu__item dropdown-content" @click="selectInterval(i,true)">
               {{$t(i.label)}}
             </li>
           </ul>
@@ -67,7 +67,8 @@ export default {
     defaultPick: Number,
     showEmpty: { type: Boolean, default: false },
     id: String,
-    sign: [Number, String]
+    sign: [Number, String],
+    from: String
   },
   data () {
     return {
@@ -89,19 +90,26 @@ export default {
     this.$emit('change', this.searchTime)
   },
   methods: {
-    selectInterval (val) {
+    selectInterval (val, route) {
       this.visible = false
       clearInterval(this.intervalTimer)
       this.interval = val.value
       this.interLabel = val.label
-      if (!this.showTimePicker && val && val.value != -1) {
+      if (!this.showTimePicker && val && val.value != 0) {
         this.intervalTimer = setInterval(() => {
           this.$emit('change', this.searchTime)
           this.refreshDataFunc()
         }, val.value * 1000)
         return
       }
-      if (val && val.value != -1) {
+      // refresh拼接到地址栏参数中
+      if (this.from === 'dashboard' && route) {
+        const newQuery = JSON.parse(JSON.stringify(this.$route.query))
+        if (val.label == newQuery.refresh) return
+        val.value ? newQuery.refresh = val.label : delete newQuery.refresh
+        this.$router.replace({ query: newQuery })
+      }
+      if (val && val.value != 0) {
         const start = new Date(this.searchTime[1])
         const now = bus.getOffsetTimezoneData()
         const interval = Math.floor((now - start.getTime()) / 1000) // 计算当前结束时间到现在的间隔（秒）
@@ -144,7 +152,7 @@ export default {
       this.searchTime = time
       setTimeout(() => {
         this.$emit('change', this.searchTime)
-        this.refreshDataFunc()
+        this.refreshDataFunc(true)
       }, 100)
     },
     antiShake () {

nezha-fronted/src/components/common/popBox/topToolMoreOptions.vue

@@ -753,7 +753,9 @@ export default {
                   },
                   receivers: []
                 },
-                chartShare: 'none'
+                chartShare: 'none',
+                defaultTimeRange: 4,
+                refresh: 0
               }
             }
           }

nezha-fronted/src/components/common/rightBox/panelBox.vue

@@ -13,7 +13,7 @@
     <!-- begin--表单-->
     <div class="right-box__container">
       <div class="container__form">
-        <el-form ref="form" :model="editPanel" :rules="rules" label-position = "top" label-width="120px" size="small">
+        <el-form ref="form" :model="editPanel" :rules="rules" label-position = "top" label-width="120px">
 
           <!-- name -->
           <el-form-item :label='$t("overall.name")' prop="name">
@@ -34,7 +34,8 @@
             <el-input
               v-model="editPanel.remark"
               maxlength="256"
-              size="small" :rows="2"
+              size="small"
+              :rows="2"
               show-word-limit
               type="textarea">
             </el-input>
@@ -42,7 +43,7 @@
 
           <!-- chartShare -->
           <el-form-item :label="$t('dashboard.dashboard.chartTooltip')" class="item-receivers" prop="chartShare">
-            <el-select v-model="editPanel.param.chartShare" placeholder="" popper-class="right-box-select-top prevent-clickoutside" size="small" value-key="chartType">
+            <el-select v-model="editPanel.param.chartShare" placeholder="" popper-class="right-box-select-top prevent-clickoutside" size="small">
               <el-option value="none" label="Default">
                 <span class="panel-dropdown-label-txt" >{{$t('config.assetLabel.default')}}</span>
               </el-option>
@@ -56,6 +57,34 @@
             <div class="item-receivers-text">{{$t('dashboard.dashboard.chartTooltipText')}}</div>
           </el-form-item>
 
+          <!-- defaultTimeRange -->
+          <el-form-item :label="$t('dashboard.defaultTimeRange')" class="item-receivers" prop="defaultTimeRange">
+            <el-select v-model="editPanel.param.defaultTimeRange" placeholder="" popper-class="right-box-select-top prevent-clickoutside" size="small">
+              <el-option
+                v-for="item in timeData"
+                :value="item.id"
+                :label="item.text"
+                :key="item.id"
+              >
+                <span class="panel-dropdown-label-txt">{{item.text}}</span>
+              </el-option>
+            </el-select>
+          </el-form-item>
+
+        <!-- Auto refresh -->
+          <el-form-item :label="$t('dashboard.autoRefresh')" class="item-receivers" prop="refresh">
+            <el-select v-model="editPanel.param.refresh" placeholder="" popper-class="right-box-select-top prevent-clickoutside" size="small">
+              <el-option
+                v-for="item in intervalList"
+                :value="item.value"
+                :label="item.label"
+                :key="item.value"
+              >
+                <span class="panel-dropdown-label-txt">{{item.label}}</span>
+              </el-option>
+            </el-select>
+          </el-form-item>
+
           <!-- variable -->
           <div
             class="variable-box"
@@ -471,6 +500,27 @@ export default {
         { name: this.$t('project.topology.none'), id: 0 },
         { name: this.$t('asset.asset'), id: 1 },
         { name: this.$t('asset.endpoint'), id: 2 }
+      ],
+      timeData: [
+        { id: 1, text: this.$t('dashboard.dashboard.lastFiveMin'), type: 'minute', value: 5 },
+        { id: 2, text: this.$t('dashboard.dashboard.lastFifteenMin'), type: 'minute', value: 15 },
+        { id: 3, text: this.$t('dashboard.dashboard.lastThirtyMin'), type: 'minute', value: 30 },
+        { id: 4, text: this.$t('dashboard.dashboard.lastOneHour'), type: 'hour', value: 1 },
+        { id: 5, text: this.$t('dashboard.dashboard.lastThreeHour'), type: 'hour', value: 3 },
+        { id: 6, text: this.$t('dashboard.dashboard.lastSixHour'), type: 'hour', value: 6 },
+        { id: 7, text: this.$t('dashboard.dashboard.lastTwelveHour'), type: 'hour', value: 12 },
+        { id: 8, text: this.$t('dashboard.dashboard.lastTwentyFourHour'), type: 'hour', value: 24 },
+        { id: 9, text: this.$t('dashboard.dashboard.lastTwoDay'), type: 'date', value: 2 },
+        { id: 10, text: this.$t('dashboard.dashboard.lastSevenDay'), type: 'date', value: 7 },
+        { id: 11, text: this.$t('dashboard.dashboard.lastThirtyDay'), type: 'date', value: 30 }
+      ],
+      intervalList: [
+        { value: 0, label: this.$t('dashboard.dashboard.chartForm.lockList.off') },
+        { value: 30, label: '30s' },
+        { value: 60, label: '1m' },
+        { value: 300, label: '5m' },
+        { value: 900, label: '15m' },
+        { value: 1800, label: '30m' }
       ]
     }
   },
@@ -596,6 +646,8 @@ export default {
             receivers: this.editPanel.param.report.receivers
           },
           chartShare: this.editPanel.param.chartShare,
+          defaultTimeRange: this.editPanel.param.defaultTimeRange,
+          refresh: this.editPanel.param.refresh,
           variables
         }
       }
@@ -689,6 +741,9 @@ export default {
             item.uid = getUUID()
           })
         }
+        if (!this.editPanel.param.chartShare) this.$set(this.editPanel.param, 'chartShare', 'none')
+        if (!this.editPanel.param.defaultTimeRange) this.$set(this.editPanel.param, 'defaultTimeRange', 4)
+        if (!this.editPanel.param.refresh) this.$set(this.editPanel.param, 'refresh', 0)
       }
     },
     'editPanel.param.report.schedule.stime': {

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

@@ -6,7 +6,7 @@
     v-clickoutside="changeDropdownFlag"
   >
 
-    <div @click="showDropdown" class="date-range-text">
+    <div @click="showDropdown(true)" class="date-range-text">
       <div class="calendar-popover-text">
         <i class="nz-icon nz-icon-time"></i>
       </div>
@@ -182,82 +182,19 @@ export default {
         text: this.$t('dashboard.dashboard.lastOneHour')
       },
       timeData: [
-        {
+        { id: 0, text: this.$t('dashboard.dashboard.customTimeRange'), value: -1 },
-          id: 0,
+        { id: 12, text: this.$t('dashboard.dashboard.noDate'), value: 0 },
-          text: this.$t('dashboard.dashboard.customTimeRange'),
+        { id: 1, text: this.$t('dashboard.dashboard.lastFiveMin'), type: 'minute', value: 5 },
-          value: -1
+        { id: 2, text: this.$t('dashboard.dashboard.lastFifteenMin'), type: 'minute', value: 15 },
-        },
+        { id: 3, text: this.$t('dashboard.dashboard.lastThirtyMin'), type: 'minute', value: 30 },
-        {
+        { id: 4, text: this.$t('dashboard.dashboard.lastOneHour'), type: 'hour', value: 1 },
-          id: 12,
+        { id: 5, text: this.$t('dashboard.dashboard.lastThreeHour'), type: 'hour', value: 3 },
-          text: this.$t('dashboard.dashboard.noDate'),
+        { id: 6, text: this.$t('dashboard.dashboard.lastSixHour'), type: 'hour', value: 6 },
-          value: 0
+        { id: 7, text: this.$t('dashboard.dashboard.lastTwelveHour'), type: 'hour', value: 12 },
-        },
+        { id: 8, text: this.$t('dashboard.dashboard.lastTwentyFourHour'), type: 'hour', value: 24 },
-        {
+        { id: 9, text: this.$t('dashboard.dashboard.lastTwoDay'), type: 'date', value: 2 },
-          id: 1,
+        { id: 10, text: this.$t('dashboard.dashboard.lastSevenDay'), type: 'date', value: 7 },
-          text: this.$t('dashboard.dashboard.lastFiveMin'),
+        { id: 11, text: this.$t('dashboard.dashboard.lastThirtyDay'), type: 'date', value: 30 }
-          type: 'minute',
-          value: 5
-        },
-        {
-          id: 2,
-          text: this.$t('dashboard.dashboard.lastFifteenMin'),
-          type: 'minute',
-          value: 15
-        },
-        {
-          id: 3,
-          text: this.$t('dashboard.dashboard.lastThirtyMin'),
-          type: 'minute',
-          value: 30
-        },
-        {
-          id: 4,
-          text: this.$t('dashboard.dashboard.lastOneHour'),
-          type: 'hour',
-          value: 1
-        },
-        {
-          id: 5,
-          text: this.$t('dashboard.dashboard.lastThreeHour'),
-          type: 'hour',
-          value: 3
-        },
-        {
-          id: 6,
-          text: this.$t('dashboard.dashboard.lastSixHour'),
-          type: 'hour',
-          value: 6
-        },
-        {
-          id: 7,
-          text: this.$t('dashboard.dashboard.lastTwelveHour'),
-          type: 'hour',
-          value: 12
-        },
-        {
-          id: 8,
-          text: this.$t('dashboard.dashboard.lastTwentyFourHour'),
-          type: 'hour',
-          value: 24
-        },
-        {
-          id: 9,
-          text: this.$t('dashboard.dashboard.lastTwoDay'),
-          type: 'date',
-          value: 2
-        },
-        {
-          id: 10,
-          text: this.$t('dashboard.dashboard.lastSevenDay'),
-          type: 'date',
-          value: 7
-        },
-        {
-          id: 11,
-          text: this.$t('dashboard.dashboard.lastThirtyDay'),
-          type: 'date',
-          value: 30
-        }
       ],
       timeShowData: [],
       nowTimeType: {
@@ -345,7 +282,7 @@ export default {
         text: this.searchTime[0] + ' ' + this.$t('dashboard.dashboard.to') + ' ' + this.searchTime[1],
         value: -1
       }
-      this.showDropdown()
+      this.showDropdown(false)
       this.setSearchTime('', '', this.searchTime)
       this.$emit('change', this.searchTime)
     },
@@ -377,20 +314,19 @@ export default {
         JSON.stringify(this.rangeHistory)
       )
 
-      console.log(this.sign)
       this.$set(this.searchTime, 2, '')
-      this.showDropdown()
+      this.showDropdown(false)
       this.getRangeHistoryArr()
       this.setSearchTime('', '', this.searchTime)
       this.$emit('change', this.searchTime)
     },
-    showDropdown () {
+    showDropdown (value) {
       const timeTemp = this.$loadsh.cloneDeep(this.searchTime)
       this.oldSearchTime[0] = timeTemp[0]
       this.oldSearchTime[1] = timeTemp[1]
       this.oldSearchTimeError[0] = false
       this.oldSearchTimeError[1] = false
-      this.dropdownFlag = !this.dropdownFlag
+      this.dropdownFlag = value
     },
     dateInputChange (type, v) {
       const timeFormatMain = localStorage.getItem('nz-default-dateFormat') ? localStorage.getItem('nz-default-dateFormat') : 'YYYY-MM-DD HH:mm:ss'
@@ -520,7 +456,7 @@ export default {
           }
         } else {
           this.isCustom = false
-          this.showDropdown()
+          this.showDropdown(false)
           if (this.showEmpty && id === 12) {
             this.searchTime = ['', '']
           }
@@ -528,6 +464,18 @@ export default {
         }
       }
     },
+    setTimeRange (nowTimeType) {
+      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)
+      const timeTemp = this.$loadsh.cloneDeep(this.searchTime)
+      this.oldSearchTime[0] = timeTemp[0]
+      this.oldSearchTime[1] = timeTemp[1]
+      this.oldSearchTimeError[0] = false
+      this.oldSearchTimeError[1] = false
+    },
     getCurrentTime () {
       return this.searchTime
       // let timeTypeId = this.showTime.id;
@@ -617,11 +565,14 @@ export default {
         }
       }
     },
-    sign (n) {
+    sign: {
+      handler (n, o) {
         if (n) {
           this.rangeHistory = localStorage.getItem('date-range-history' + this.sign)
             ? JSON.parse(localStorage.getItem('date-range-history' + this.sign))
             : []
+          this.getRangeHistoryArr()
+        }
       }
     }
   },

nezha-fronted/src/components/page/config/template/dashboardTemp.vue

@@ -158,7 +158,9 @@ export default {
               repeat: 1
             }
           },
-          chartShare: 'none'
+          chartShare: 'none',
+          defaultTimeRange: 4,
+          refresh: 0
         }
       }
     },
@@ -184,7 +186,9 @@ export default {
                   },
                   receivers: []
                 },
-                chartShare: 'none'
+                chartShare: 'none',
+                defaultTimeRange: 4,
+                refresh: 0
               }
             }
           }

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

@@ -7,7 +7,7 @@
         </transition>
       </div>
       <div class="main-container">
-        <div class="top-tools panel-top-tools" :class="showTopLine? 'panel-top-tools-bottom' : ''">
+        <div class="top-tools panel-top-tools" :class="showTopLine? 'panel-top-tools-bottom' : ''" style="z-index: 1001;">
           <div v-if="panelData.length === 0" class="top-tool-left" style="margin-left: 10px;">
             <button id="dashboard-add-panel" class="nz-btn nz-btn-style-light nz-btn-size-small" v-has="'main_add'" @click="toAdd"><i class="nz-icon nz-icon-create-square"></i>&nbsp;&nbsp;{{$t("overall.addDashboard")}}</button>
           </div>
@@ -44,7 +44,7 @@
 
             <div class="top-tool-right">
 
-              <pick-time id="panel" ref="pickTime" v-model="searchTime" :refresh-data-func="dateChange" :use-chart-unit="false" class="margin-r-10" :sign="showPanel.id"></pick-time>
+              <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>
 
               <!-- 切换查看模式 -->
               <button class="top-tool-btn view-mode" :title="$t('overall.viewMode')" @click="cycle">
@@ -313,10 +313,7 @@ export default {
       // ---图表相关参数--start
       dataList: [], // 数据列表
       filter: { // 过滤条件
-        dashboardId: 0,
+        dashboardId: 0
-        start_time: '',
-        end_time: '',
-        id: 4
       },
       dashboardId: 0,
       // ---图表相关参数--end
@@ -329,7 +326,28 @@ export default {
       variables: [],
       variablesInit: false, // 判断variables 是否加载完成
       snapshotVisible: false,
-      stableTime: null
+      stableTime: null,
+      timeData: [
+        { id: 1, text: this.$t('dashboard.dashboard.lastFiveMin'), type: 'minute', value: 5 },
+        { id: 2, text: this.$t('dashboard.dashboard.lastFifteenMin'), type: 'minute', value: 15 },
+        { id: 3, text: this.$t('dashboard.dashboard.lastThirtyMin'), type: 'minute', value: 30 },
+        { id: 4, text: this.$t('dashboard.dashboard.lastOneHour'), type: 'hour', value: 1 },
+        { id: 5, text: this.$t('dashboard.dashboard.lastThreeHour'), type: 'hour', value: 3 },
+        { id: 6, text: this.$t('dashboard.dashboard.lastSixHour'), type: 'hour', value: 6 },
+        { id: 7, text: this.$t('dashboard.dashboard.lastTwelveHour'), type: 'hour', value: 12 },
+        { id: 8, text: this.$t('dashboard.dashboard.lastTwentyFourHour'), type: 'hour', value: 24 },
+        { id: 9, text: this.$t('dashboard.dashboard.lastTwoDay'), type: 'date', value: 2 },
+        { id: 10, text: this.$t('dashboard.dashboard.lastSevenDay'), type: 'date', value: 7 },
+        { id: 11, text: this.$t('dashboard.dashboard.lastThirtyDay'), type: 'date', value: 30 }
+      ],
+      intervalList: [
+        { value: 0, label: this.$t('dashboard.dashboard.chartForm.lockList.off') },
+        { value: 30, label: '30s' },
+        { value: 60, label: '1m' },
+        { value: 300, label: '5m' },
+        { value: 900, label: '15m' },
+        { value: 1800, label: '30m' }
+      ]
     }
   },
   components: {
@@ -379,30 +397,6 @@ export default {
     refreshPanel () {
       this.getData(this.filter)
     },
-    // 面板相关操作
-    panelChange (val) {
-      if (!val) {
-        return false
-      }
-      this.variablesInit = false
-      this.showPanel = val
-      this.variables = this.$loadsh.cloneDeep(this.$loadsh.get(this, 'showPanel.param.variables', []) || [])
-      this.showPanel.type = 'dashboard'
-      this.filter.dashboardId = this.showPanel.id
-      this.dashboardId = this.showPanel.id
-      const param = {
-        dashboardId: this.dashboardId,
-        nowTimeType: JSON.stringify(this.nowTimeType),
-        searchTime: JSON.stringify(this.searchTime),
-        mode: this.mode
-      }
-      // this.getTableData()
-      // this.getData(this.filter)
-      const path = this.fromRoute.dashboard
-      this.updatePath(param, path)
-      this.dateChange()
-      this.$refs.chartList.cleanData()
-    },
 
     del (u) {
       this.$confirm(this.$t('tip.confirmDelete'), {
@@ -410,22 +404,22 @@ export default {
         cancelButtonText: this.$t('tip.no'),
         type: 'warning'
       }).then(() => {
-        this.$delete('visual/dashboard?ids=' + u.id).then(response => {
+        this.$delete('visual/dashboard?ids=' + u.id).then(async (response) => {
           if (response.code === 200) {
             this.$message({
               duration: 1000,
               type: 'success',
               message: this.$t('tip.deleteSuccess')
             })
-            const param = {
+            // 判断删除的是否是当前面板
-              dashboardId: 0,
+            if (this.showPanel.id == u.id) {
-              nowTimeType: JSON.stringify(this.nowTimeType),
+              const param = { t: +new Date() }
-              searchTime: JSON.stringify(this.searchTime),
-              mode: this.mode
-            }
               const path = this.fromRoute.dashboard
               this.updatePath(param, path)
               this.getTableData(true)
+            } else {
+              this.getTableData(false)
+            }
           } else {
             this.$message.error(response.msg)
             this.$store.dispatch('clearPanel')
@@ -457,7 +451,9 @@ export default {
                   },
                   receivers: []
                 },
-                chartShare: 'none'
+                chartShare: 'none',
+                defaultTimeRange: 4,
+                refresh: 0
               }
             }
           }
@@ -505,7 +501,9 @@ export default {
               repeat: 1
             }
           },
-          chartShare: 'none'
+          chartShare: 'none',
+          defaultTimeRange: 4,
+          refresh: 0
         }
       }
     },
@@ -685,13 +683,6 @@ export default {
       }
       this.dataList = []
       this.chartListLoading = true
-      if (params.start_time === '' || params.end_time === '') {
-        const now = bus.getTimezontDateRange()
-        const endTimeTmp = bus.timeFormate(now[1].getTime(), this.panelDateFormatTime)
-        const startTimeTmp = bus.timeFormate(now[0].getTime(), this.panelDateFormatTime)
-        params.start_time = startTimeTmp
-        params.end_time = endTimeTmp
-      }
       if (le5leData) {
         Object.keys(le5leData).forEach(key => {
           le5leData[key] = null
@@ -717,32 +708,51 @@ export default {
       })
     },
 
+    // 面板相关操作
+    panelChange (val) {
+      if (!val) {
+        return false
+      }
+      // 切换面板 重置参数
+      const param = {
+        dashboardId: val.id
+      }
+      this.mode = ''
+      this.$store.commit('setMode', this.mode)
+      const path = this.fromRoute.dashboard
+      this.updatePath(param, path)
+      setTimeout(() => {
+        this.variablesInit = false
+        this.showPanel = val
+        this.variables = this.$loadsh.cloneDeep(this.$loadsh.get(this, 'showPanel.param.variables', []) || [])
+        this.showPanel.type = 'dashboard'
+        this.filter.dashboardId = this.showPanel.id
+        this.dashboardId = this.showPanel.id
+        this.getData(this.filter)
+        this.$refs.chartList.cleanData()
+      })
+    },
+
     /* 图表相关操作--end */
     /* 时间条件查询--start */
     // 选择日期变化
-    dateChange (val) {
+    dateChange (route) {
       const nowTimeType = this.$refs.pickTime.$refs.timePicker.nowTimeType
       this.nowTimeType = this.$refs.pickTime.$refs.timePicker.nowTimeType
       this.setSearchTime(nowTimeType.type, nowTimeType.value, nowTimeType)
-      this.filter.start_time = bus.timeFormate(this.searchTime[0], this.panelDateFormatTime)
-      this.filter.end_time = bus.timeFormate(this.searchTime[1], this.panelDateFormatTime)
-      this.filter.end_time = bus.timeFormate(this.searchTime[1], this.panelDateFormatTime)
-      this.filter.value = this.searchTime[2]
-      this.filter.id = this.$refs.pickTime.$refs.timePicker.showTime.id
-      // this.getTableData()
       this.getData(this.filter)
-      const param = {
-        dashboardId: this.dashboardId,
-        nowTimeType: JSON.stringify(this.nowTimeType),
-        searchTime: JSON.stringify(this.searchTime),
-        mode: this.mode
-      }
-      const path = this.fromRoute.dashboard
-      this.updatePath(param, path)
       this.$store.dispatch('dispatchPanelTime', {
         time: this.searchTime,
         nowTimeType: this.nowTimeType
       })
+      // 选择时间范围时更新路由
+      if (route) {
+        const param = { ...this.$route.query }
+        param.nowTimeType = JSON.stringify(this.nowTimeType)
+        param.searchTime = JSON.stringify(this.searchTime)
+        const path = this.fromRoute.dashboard
+        this.updatePath(param, path)
+      }
     },
     setSearchTime (type, val, nowTimeType) { // 设置searchTime
       if (type === 'minute') {
@@ -794,9 +804,18 @@ export default {
       })
     },
 
-    getTableData (clearShowPanel) {
+    async getTableData (clearShowPanel) {
       const vm = this
-      this.$get('visual/dashboard?type=dashboard&pageSize=-1').then(response => {
+      let response
+      try {
+        response = await this.$get('visual/dashboard?type=dashboard&pageSize=-1')
+      } catch (error) {
+        // console.log('error................'+JSON.stringify(error));
+        if (error) {
+          console.error(error)
+          this.$message.error(error.toString())
+        }
+      }
       if (response.code === 200) {
         let isInitData = false
         this.panelData = JSON.parse(JSON.stringify(response.data.list))
@@ -839,13 +858,6 @@ export default {
         }
       }
       this.variables = this.$loadsh.get(this, 'showPanel.param.variables', []) || []
-      }).catch((error) => {
-        // console.log('error................'+JSON.stringify(error));
-        if (error) {
-          console.error(error)
-          this.$message.error(error.toString())
-        }
-      })
 
       function handler (panelData) {
         panelData.forEach(panel => {
@@ -887,14 +899,6 @@ export default {
       // 刷新数据
       this.dateChange()
     },
-    pageNo (val) {
-      this.pageObj.pageNo = val
-      this.getTableData()
-    },
-    pageSize (val) {
-      this.pageObj.pageSize = val
-      this.getTableData()
-    },
     // 滚动事件触发下拉加载
     onScroll () {
       const _self = this
@@ -1024,18 +1028,9 @@ export default {
         this.mode = ''
       }
       this.$store.commit('setMode', this.mode)
-      const param = {
+      const param = { ...this.$route.query, mode: this.mode }
-        dashboardId: this.dashboardId,
-        nowTimeType: JSON.stringify(this.nowTimeType),
-        searchTime: JSON.stringify(this.searchTime),
-        mode: this.mode
-      }
       const path = this.fromRoute.dashboard
       this.updatePath(param, path)
-      this.$store.dispatch('dispatchPanelTime', {
-        time: this.searchTime,
-        nowTimeType: this.nowTimeType
-      })
     },
     // 按ESC键退出查看模式
     escExit (e) {
@@ -1052,12 +1047,8 @@ export default {
         // 默认模式
         this.mode = ''
         this.$store.commit('setMode', this.mode)
-        const param = {
+        const param = { ...this.$route.query }
-          dashboardId: this.dashboardId,
+        delete param.mode
-          nowTimeType: JSON.stringify(this.nowTimeType),
-          searchTime: JSON.stringify(this.searchTime),
-          mode: this.mode
-        }
         const path = this.fromRoute.dashboard
         this.updatePath(param, path)
       }
@@ -1067,9 +1058,40 @@ export default {
       this.$nextTick(() => {
         this.$refs.chartList.onScroll(this.scrollbarWrap.scrollTop)
       })
+    },
+    // 时间选择器设置默认时间范围
+    setDefaultTimeRange () {
+      this.$nextTick(() => {
+        if (this.$route.query.searchTime) return
+        let nowTimeType = this.$loadsh.cloneDeep(this.timeData[3])
+        const defaultTimeRange = this.$loadsh.get(this.showPanel, 'param.defaultTimeRange')
+        if (defaultTimeRange) {
+          nowTimeType = this.timeData.find(item => item.id == defaultTimeRange)
+        }
+        this.nowTimeType = this.$loadsh.cloneDeep(nowTimeType)
+        // 刷新时间范围
+        this.$refs.pickTime.$refs.timePicker.setTimeRange(this.nowTimeType)
+        this.setSearchTime(nowTimeType.type, nowTimeType.value, nowTimeType)
+        this.$store.dispatch('dispatchPanelTime', {
+          time: this.searchTime,
+          nowTimeType: this.nowTimeType
+        })
+      })
+    },
+    // 设置默认刷新
+    setDefaultRefresh () {
+      this.$nextTick(() => {
+        if (this.$route.query.refresh) return
+        let refresh = this.$loadsh.cloneDeep(this.intervalList[0])
+        const defaultRefresh = this.$loadsh.get(this.showPanel, 'param.refresh')
+        if (defaultRefresh) {
+          refresh = this.intervalList.find(item => item.value == defaultRefresh)
+        }
+        this.$refs.pickTime.selectInterval(refresh)
+      })
     }
   },
-  created () {
+  async created () {
     const searchKeys = {
       // key: path 键
       // value: vue set 参数
@@ -1079,24 +1101,27 @@ export default {
       mode: { target: this, propertyName: 'mode', type: 'string' }
     }
     this.initQueryFromPath(searchKeys)
-    setTimeout(() => {
     this.showPanel.id = this.dashboardId
     this.filter.dashboardId = this.dashboardId
-    })
     // 设置查看模式
     this.$store.commit('setMode', this.mode)
+    await this.getTableData()
     if (this.nowTimeType.type) {
       this.setSearchTime(this.nowTimeType.type, this.nowTimeType.value, this.nowTimeType)
-      this.filter.start_time = bus.timeFormate(this.searchTime[0], this.panelDateFormatTime)
-      this.filter.end_time = bus.timeFormate(this.searchTime[1], this.panelDateFormatTime)
-      this.filter.end_time = bus.timeFormate(this.searchTime[1], this.panelDateFormatTime)
-      this.filter.value = this.searchTime[2]
     }
-    this.getTableData()
+    if (this.nowTimeType) {
+      this.nowTimeType.start_time = this.searchTime[0]
+      this.nowTimeType.end_time = this.searchTime[1]
+      this.$refs.pickTime.$refs.timePicker.setCustomTime(this.nowTimeType)
+    }
     this.$store.dispatch('dispatchPanelTime', {
       time: this.searchTime,
       nowTimeType: this.nowTimeType
     })
+    if (this.$route.query.refresh) {
+      const refresh = this.intervalList.find(item => item.label == this.$route.query.refresh)
+      this.$refs.pickTime.selectInterval(refresh)
+    }
   },
   mounted () {
     // 监听键盘ESC事件
@@ -1106,17 +1131,14 @@ export default {
     this.onScroll()
     document.querySelector('#tableList').addEventListener('mouseenter', this.tableListEnter)
     document.querySelector('#tableList').addEventListener('mouseleave', this.tableListLeave)
-    if (this.nowTimeType) {
-      this.nowTimeType.start_time = this.searchTime[0]
-      this.nowTimeType.end_time = this.searchTime[1]
-      setTimeout(() => {
-        if (this.$refs.pickTime && this.$refs.pickTime.$refs.timePicker) {
-          this.$refs.pickTime.$refs.timePicker.setCustomTime(this.nowTimeType)
-        }
-      }, 100)
-    }
   },
   watch: {
+    showPanel: {
+      handler () {
+        this.setDefaultTimeRange()
+        this.setDefaultRefresh()
+      }
+    },
     // 监听图表联动配置
     'showPanel.param.chartShare': {
       handler (value) {
@@ -1180,7 +1202,6 @@ export default {
         const add = this.$route.query.add
         this.$nextTick(() => {
           if (add) {
-            console.log(add)
             if (add === 'chart') {
               this.addChartBefore()
             }