feat: chart全屏添加时间选择器

2021-12-22 18:40:46 +08:00
parent 3cfd072150
commit f483ae00c4
7 changed files with 61 additions and 39 deletions
--- a/nezha-fronted/src/assets/css/components/chart/chart.scss
+++ b/nezha-fronted/src/assets/css/components/chart/chart.scss
@@ -89,11 +89,14 @@
      top: -1px;
    }
  }
+  .chart-screen-header.list-page{
+    background: $--background-color-empty;
+  }
  .chart-screen-header {
    display: flex;
    justify-content:space-between;
    align-items:center;
-    padding: 0 10px;
+    padding: 0 20px 0 20px;
    height: 39px;
    font-size: 14px;
    line-height: 40px;
@@ -101,6 +104,7 @@
    transition: all 0.2s;
    width: 100%;
    box-sizing: border-box;
+    margin-top: 15px;
    &.chart-header--float {
      position: absolute;
      width: 100%;
@@ -120,6 +124,9 @@
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
+      font-size: 18px;
+      color: #333;
+      font-weight: 700;
    }
    .chart-header__tools {
      display: flex;
--- a/nezha-fronted/src/assets/css/themes/theme-light.scss
+++ b/nezha-fronted/src/assets/css/themes/theme-light.scss
@@ -5,7 +5,7 @@ $--color-primary: #FA901C;

 /* 2.背景色 */
 // 空白背景色
-$--background-color-empty: #FFFFFE;
+$--background-color-empty: #fffffe;
 // 基础背景色(覆盖element-ui内置变量)
 $--background-color-base: #F6F6F6;
 // 背景色1
--- a/nezha-fronted/src/components/chart/ChartScreenHeader.vue
+++ b/nezha-fronted/src/components/chart/ChartScreenHeader.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :class="{'chart-header--float': !chartInfo.param.showHeader}" class="chart-screen-header">
+  <div :class="{'chart-header--float': !chartInfo.param.showHeader}" class="chart-screen-header list-page">
    <span v-if="isError" class="chart-header-error">
     <el-popover
       placement="top-start"
@@ -15,13 +15,13 @@
    </span>
    <div class="chart-header__title">{{chartInfo.name}}</div>
    <div class="chart-header__tools">
-      <span v-if="chartInfo.remark" class="chart-header__tool">
+      <span v-if="chartInfo.remark" class="chart-header__tool top-tool-btn-group">
        <el-tooltip :content="chartInfo.remark" effect="light" placement="top">
           <i class="nz-icon nz-icon-info-normal tool__icon"></i>
        </el-tooltip>
      </span>
-      <span class="chart-header__tool">
-        <pick-time :refresh-data-func="dateChange" v-model="searchTime" :use-chart-unit="false" :showMultiple="true" ref="pickTime" style="height: 28px;" id="line-chart"></pick-time>
+      <span class="chart-header__tool" v-if="showTime(chartInfo.type)">
+        <pick-time :refresh-data-func="dateChange" v-model="searchTime" :use-chart-unit="false" :showMultiple="showMultiple(chartInfo.type)" ref="pickTime" style="height: 28px;" id="line-chart"></pick-time>
      </span>
      <span class="chart-header__tool" @click="closeDialog">
        <i class="nz-icon nz-icon-close" style="font-size: 16px;"></i>
@@ -75,9 +75,12 @@ export default {
      this.setSearchTime(nowTimeType.type, nowTimeType.value, nowTimeType)
      this.filter.start_time = bus.timeFormate(this.searchTime[0], 'yyyy-MM-dd hh:mm:ss')
      this.filter.end_time = bus.timeFormate(this.searchTime[1], 'yyyy-MM-dd hh:mm:ss')
+      console.log(this.filter)
      this.filter.value = this.searchTime[2]
      this.filter.id = this.$refs.pickTime.$refs.timePicker.showTime.id
-      this.$emit('dateChange', this.filter)
+      setTimeout(() => {
+        this.$emit('dateChange', this.filter, this.$refs.pickTime.$refs.multipleTime.searchTime)
+      }, 100)
    },
    closeDialog () {
      this.$emit('close')
@@ -103,6 +106,31 @@ export default {
        this.$set(this.searchTime, 2, val + 'd')
      }
      this.$refs.pickTime.$refs.timePicker.searchTime = this.searchTime
+    },
+    showTime (type) {
+      switch (type) {
+        case 'line' :
+        case 'area' :
+        case 'point' :
+        case 'bar' :
+        case 'table' :
+        case 'stat' :
+        case 'guage' :
+        case 'pie' :
+        case 'treemap' :
+        case 'log' :
+          return true
+        default: return false
+      }
+    },
+    showMultiple (type) {
+      switch (type) {
+        case 'line' :
+        case 'area' :
+        case 'point' :
+          return true
+        default: return false
+      }
    }
  },
  watch: {
@@ -131,6 +159,9 @@ export default {
    if (this.$refs.pickTime) {
      this.$refs.pickTime.$refs.multipleTime.showDropdown = false
      this.$refs.pickTime.$refs.timePicker.setCustomTime(this.nowType)
+      this.setSearchTime(this.nowType.type, this.nowType.value, this.nowType)
+      this.searchTime[0] = bus.timeFormate(this.timeRange[0], 'yyyy-MM-dd hh:mm:ss')
+      this.searchTime[1] = bus.timeFormate(this.timeRange[1], 'yyyy-MM-dd hh:mm:ss')
    }
  }
 }
--- a/nezha-fronted/src/components/chart/chart/chartTimeSeries.vue
+++ b/nezha-fronted/src/components/chart/chart/chartTimeSeries.vue
@@ -114,7 +114,6 @@ export default {
    xAxisLabelFormatter (minTime, maxTime) {
      return function (val, index) {
        const value = val * 1000
-        console.log(value, minTime, maxTime)
        let offset = localStorage.getItem('nz-sys-timezone')
        offset = moment.tz(offset).format('Z')
        offset = Number.parseInt(offset)
@@ -141,33 +140,6 @@ export default {
        }
      }
    },
-    xAxisLabelFormatter2 (value, minTime, maxTime) {
-      console.log(value, minTime, maxTime)
-      let offset = localStorage.getItem('nz-sys-timezone')
-      offset = moment.tz(offset).format('Z')
-      offset = Number.parseInt(offset)
-      const localOffset = new Date().getTimezoneOffset() * 60 * 1000 * -1 // 默认 一分钟显示时区偏移的结果
-      const tData = new Date(value - localOffset + offset * 60 * 60 * 1000)
-      let hour = tData.getHours()
-      hour = hour > 9 ? hour : '0' + hour // 加0补充为两位数字
-      let minute = tData.getMinutes()
-      minute = minute > 9 ? minute : '0' + minute // 如果分钟小于10,则在前面加0补充为两位数字
-      if (minTime !== null && maxTime !== null) {
-        const diffSec = (maxTime - minTime) / 1000
-        const secOneDay = 24 * 60 * 60// 1天的秒数
-        const secOneMonth = secOneDay * 30// 30天的秒数
-        if (diffSec <= secOneDay) { // 同一天
-          return [hour, minute].join(':')
-        } else if (diffSec < secOneMonth) { // 大于1天，小于30天
-          return [tData.getMonth() + 1, tData.getDate()].join('/') + ' ' + [hour, minute].join(':')
-        } else { // 大于等于30天
-          return [tData.getMonth() + 1, tData.getDate()].join('/')
-        }
-      } else {
-        return [tData.getFullYear(), tData.getMonth() + 1, tData.getDate()].join('/') + '\n' +
-          [hour, minute].join(':')
-      }
-    },
    tooltipFormatter (hasTotal) { // 堆叠图需要total数据
      const self = this
      return function (params) {
--- a/nezha-fronted/src/components/chart/chart/options/chartTimeSeries.js
+++ b/nezha-fronted/src/components/chart/chart/options/chartTimeSeries.js
@@ -34,7 +34,7 @@ export const chartTimeSeriesLineOption = {
  tooltip: {
    trigger: 'axis',
    confine: false,
-    extraCssText: 'z-index:1000;',
+    extraCssText: 'z-index:99999999;',
    z: 9,
    animation: false,
    appendToBody: true
--- a/nezha-fronted/src/components/chart/chartList.vue
+++ b/nezha-fronted/src/components/chart/chartList.vue
@@ -64,11 +64,11 @@
    <el-dialog
      v-if="fullscreen.visible"
      :visible.sync="fullscreen.visible"
-      append-to-body
      :show-close="false"
      class="nz-dialog chart-fullscreen"
      destroy-on-close
      fullscreen
+      :modal-append-to-body="false"
    >
      <panel-chart
        :ref="'chart-fullscreen' + fullscreen.chartInfo.id"
--- a/nezha-fronted/src/components/chart/panelChart.vue
+++ b/nezha-fronted/src/components/chart/panelChart.vue
@@ -21,6 +21,7 @@
      :chartData="chartData"
      :chart-info="chartInfo"
      @refresh="refresh"
+      @dateChange="dateChange"
      @close="showFullscreen"
    ></chart-screen-header>
    <!-- chart -->
@@ -85,6 +86,18 @@ export default {
  },
  methods: {
    isGroup,
+    dateChange (filter, isMultipleTime) {
+      console.log(filter, isMultipleTime)
+      this.loading = true
+      // TODO assetInfo、endpointInfo、echarts等进行不同的处理
+      let startTime = filter.start_time
+      let endTime = filter.end_time
+      const step = bus.getStep(startTime, endTime)
+      startTime = this.$stringTimeParseToUnix(startTime)
+      endTime = this.$stringTimeParseToUnix(endTime)
+      const elements = this.chartInfo.elements || []
+      this.chartInfo.loaded && this.query(elements, startTime, endTime, step)
+    },
    // 参数 isRefresh 标识是否是刷新操作
    getChartData (isRefresh) {
      this.loading = true
@@ -109,7 +122,6 @@ export default {
      const step = bus.getStep(startTime, endTime)
      startTime = this.$stringTimeParseToUnix(startTime)
      endTime = this.$stringTimeParseToUnix(endTime)
-
      const elements = this.chartInfo.elements || []
      this.chartInfo.loaded && this.query(elements, startTime, endTime, step)
    },
@@ -303,7 +315,7 @@ export default {
      this.groupInit()
      bus.$emit('groupMove', '', '', true)
      this.$emit('groupShow', this.chartInfo)
-    },
+    }
  },
  watch: {
    timeRange: {