fix：修改line的时间显示不正确的问题以及全屏添加时间选择器

2021-12-22 16:57:50 +08:00
parent 6dcc1906d5
commit 3cfd072150
13 changed files with 275 additions and 5394 deletions
--- a/nezha-fronted/src/assets/css/components/chart/chart.scss
+++ b/nezha-fronted/src/assets/css/components/chart/chart.scss
@@ -83,6 +83,86 @@
        }
      }
    }
+    .chart-header-error{
+      position: absolute;
+      left: 0;
+      top: -1px;
+    }
+  }
+  .chart-screen-header {
+    display: flex;
+    justify-content:space-between;
+    align-items:center;
+    padding: 0 10px;
+    height: 39px;
+    font-size: 14px;
+    line-height: 40px;
+    color: $--color-text-primary;
+    transition: all 0.2s;
+    width: 100%;
+    box-sizing: border-box;
+    &.chart-header--float {
+      position: absolute;
+      width: 100%;
+      z-index: 100;
+      box-sizing: border-box;
+      height: 10px;
+      opacity: 0;
+      transition: all linear .2s;
+
+      &:hover {
+        height: 39px;
+        opacity: 1;
+      }
+    }
+    .chart-header__title {
+      max-width: calc(100% - 100px);
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
+    }
+    .chart-header__tools {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+
+      .chart-header__tool {
+        margin-left: 20px;
+        cursor: pointer;
+
+        .tool__icon {
+          visibility: hidden;
+          font-size: 14px;
+          color: $--color-text-primary;
+        }
+        .nz-chart-dropdown {
+          position: absolute;
+          top: 44px;
+          right: 0;
+          left: unset;
+          transform-origin: center top;
+          z-index: 1000;
+          width: 180px;
+          li {
+            padding-left: 15px !important;
+            padding-right: 0 !important;
+            width: calc(100% - 15px);
+            text-align: left;
+            i {
+              margin-right: 10px;
+            }
+            &:hover i {
+              color: $--color-primary;
+            }
+          }
+        }
+      }
+    }
+    .chart-header-error{
+      position: absolute;
+      left: 0;
+      top: -1px;
+    }
  }
  .nz-panel-chart {
    height: 100%;
@@ -314,9 +394,19 @@
    }
  }
 }
-.chart-fullscreen {
+.chart-fullscreen.nz-dialog {
+  .el-dialog__header{
+    display: none;
+  }
  .el-dialog__body {
    height: 100%;
+    padding: 0;
+  }
+  .panel-chart--fullscreen {
+    display: flex;
+    .nz-chart{
+      padding: 0 20px 30px 20px;
+    }
  }
 }
 .chart-stat{
--- a/nezha-fronted/src/components/chart/ChartScreenHeader.vue
+++ b/nezha-fronted/src/components/chart/ChartScreenHeader.vue
@@ -0,0 +1,137 @@
+<template>
+  <div :class="{'chart-header--float': !chartInfo.param.showHeader}" class="chart-screen-header">
+    <span v-if="isError" class="chart-header-error">
+     <el-popover
+       placement="top-start"
+       :close-delay=10
+       trigger="hover"
+       popper-class="chart-error-popper">
+            <div >{{errorText}}</div>
+            <span slot="reference" class="panel-info-corner panel-info-corner--error">
+              <i class="nz-icon nz-icon-warning fa"></i>
+              <span class="panel-info-corner-inner"></span>
+           </span>
+          </el-popover>
+    </span>
+    <div class="chart-header__title">{{chartInfo.name}}</div>
+    <div class="chart-header__tools">
+      <span v-if="chartInfo.remark" class="chart-header__tool">
+        <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>
+      <span class="chart-header__tool" @click="closeDialog">
+        <i class="nz-icon nz-icon-close" style="font-size: 16px;"></i>
+      </span>
+    </div>
+  </div>
+</template>
+
+<script>
+import bus from '@/libs/bus'
+import lodash from 'lodash'
+export default {
+  name: 'ChartScreenHeader',
+  props: {
+    chartInfo: Object,
+    from: String,
+    isGroup: {
+      type: Boolean,
+      default: false
+    },
+    error: {
+      type: String,
+      default: ''
+    },
+    isError: {
+      type: Boolean,
+      default: false
+    },
+    chartData: {}
+  },
+  computed: {
+    timeRange () {
+      return this.$store.getters.getTimeRange
+    },
+    fatherNowTimeType () {
+      return this.$store.getters.getNowTimeType
+    }
+  },
+  data () {
+    return {
+      dropdownMenuShow: false,
+      errorText: '',
+      searchTime: [],
+      nowType: {},
+      filter: {}
+    }
+  },
+  methods: {
+    dateChange () {
+      const nowTimeType = this.$refs.pickTime.$refs.timePicker.nowTimeType
+      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')
+      this.filter.value = this.searchTime[2]
+      this.filter.id = this.$refs.pickTime.$refs.timePicker.showTime.id
+      this.$emit('dateChange', this.filter)
+    },
+    closeDialog () {
+      this.$emit('close')
+    },
+    setSearchTime (type, val, nowTimeType) { // 设置searchTime
+      if (type === 'minute') {
+        const startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setMinutes(new Date(bus.computeTimezone(new Date().getTime())).getMinutes() - val), 'yyyy-MM-dd hh:mm:ss')
+        const endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())), 'yyyy-MM-dd hh:mm:ss')
+        this.$set(this.searchTime, 0, startTime)
+        this.$set(this.searchTime, 1, endTime)
+        this.$set(this.searchTime, 2, val + 'm')
+      } else if (type === 'hour') {
+        const startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setHours(new Date(bus.computeTimezone(new Date().getTime())).getHours() - val), 'yyyy-MM-dd hh:mm:ss')
+        const endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())), 'yyyy-MM-dd hh:mm:ss')
+        this.$set(this.searchTime, 0, startTime)
+        this.$set(this.searchTime, 1, endTime)
+        this.$set(this.searchTime, 2, val + 'h')
+      } else if (type === 'date') {
+        const startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setDate(new Date(bus.computeTimezone(new Date().getTime())).getDate() - val), 'yyyy-MM-dd hh:mm:ss')
+        const endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())), 'yyyy-MM-dd hh:mm:ss')
+        this.$set(this.searchTime, 0, startTime)
+        this.$set(this.searchTime, 1, endTime)
+        this.$set(this.searchTime, 2, val + 'd')
+      }
+      this.$refs.pickTime.$refs.timePicker.searchTime = this.searchTime
+    }
+  },
+  watch: {
+    isError: {
+      immediate: true,
+      handler (n) {
+        if (n) {
+          this.errorText = this.chartData.filter(item => item.error).map(item => item.error).join('\n')
+        }
+      }
+    },
+    timeRange: {
+      immediate: true,
+      handler (n) {
+        this.searchTime = lodash.cloneDeep(n)
+      }
+    },
+    fatherNowTimeType: {
+      immediate: true,
+      handler (n) {
+        this.nowType = lodash.cloneDeep(n)
+      }
+    }
+  },
+  mounted () {
+    if (this.$refs.pickTime) {
+      this.$refs.pickTime.$refs.multipleTime.showDropdown = false
+      this.$refs.pickTime.$refs.timePicker.setCustomTime(this.nowType)
+    }
+  }
+}
+</script>
--- a/nezha-fronted/src/components/chart/chart-list-grid.vue
+++ b/nezha-fronted/src/components/chart/chart-list-grid.vue
--- a/nezha-fronted/src/components/chart/chart-list-group-grid.vue
+++ b/nezha-fronted/src/components/chart/chart-list-group-grid.vue
--- a/nezha-fronted/src/components/chart/chart-list-group.vue
+++ b/nezha-fronted/src/components/chart/chart-list-group.vue
--- a/nezha-fronted/src/components/chart/chart/chartGauge.vue
+++ b/nezha-fronted/src/components/chart/chart/chartGauge.vue
@@ -223,7 +223,6 @@ export default {
    this.chartOption.color || (this.chartOption.color = initColor(20))
    this.colorList = this.chartOption.color
    this.chartInfo.loaded && this.initChart()
-    console.log(this.isFullscreen , 'isFullscreen')
  },
  beforeDestroy () {
    this.chartInstances.forEach(item => {
--- a/nezha-fronted/src/components/chart/chart/chartPie.vue
+++ b/nezha-fronted/src/components/chart/chart/chartPie.vue
@@ -78,7 +78,6 @@ export default {
  },
  methods: {
    initChart (chartOption = this.chartOption) {
-      console.log(123123,chartOption,this.chartOption)
      this.legends = []
      chartOption.series = this.initPieData(this.chartInfo, chartOption.series[0], this.chartData) // 生成series和legends
      if (this.isNoData) {
@@ -97,7 +96,6 @@ export default {
    initPieData (chartInfo, seriesTemplate, originalDatas) {
      let colorIndex = 0
      const s = lodash.cloneDeep(seriesTemplate)
-      console.log(s)
      s.data = []
      originalDatas.forEach((originalData, expressionIndex) => {
        originalData.forEach((data, dataIndex) => {
--- a/nezha-fronted/src/components/chart/chart/chartTable.vue
+++ b/nezha-fronted/src/components/chart/chart/chartTable.vue
@@ -102,7 +102,6 @@ export default {
        originalData.forEach((data, dataIndex) => {
          this.isNoData = false
          data.$labels = data.metric
-          console.log(data.values)
          const value = getMetricTypeValue(data.values, chartInfo.param.statistics || 'last')
          const showValue = chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(value, null, -1, 2)
          // const mapping = this.selectTableMapping(value, chartInfo.param.valueMapping)
--- a/nezha-fronted/src/components/chart/chart/chartTimeSeries.vue
+++ b/nezha-fronted/src/components/chart/chart/chartTimeSeries.vue
@@ -71,7 +71,7 @@ export default {
        return
      }
      const { minTime, maxTime, minValue, maxValue } = this.getMinMaxFromData(this.chartData) // 此处时间是秒
-      chartOption.xAxis.axisLabel.formatter = this.xAxisLabelFormatter(minTime * 1000, maxTime * 1000) // 需转为毫秒
+      chartOption.xAxis.axisLabel.formatter = this.xAxisLabelFormatter(minTime, maxTime)// 需转为毫秒
      chartOption.tooltip.formatter = this.tooltipFormatter(this.chartInfo.param.stack)
      chartOption.tooltip.position = this.tooltipPosition
      chartOption.yAxis.axisLabel.formatter = this.yAxisLabelFormatter(minValue, maxValue)
@@ -112,7 +112,9 @@ export default {
      return { minTime, maxTime, minValue, maxValue }
    },
    xAxisLabelFormatter (minTime, maxTime) {
-      return function (value, index) {
+      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)
@@ -139,6 +141,33 @@ 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) {
@@ -146,7 +175,6 @@ export default {
        let sum = 0
        params.forEach((item, i) => {
          if (i === 0) {
-            console.log(item.data[0])
            const value = bus.computeTimezone(item.data[0] * 1000)
            const tData = new Date(value)
            str += '<div style="margin-bottom: 5px">'
--- a/nezha-fronted/src/components/chart/chartHeader.vue
+++ b/nezha-fronted/src/components/chart/chartHeader.vue
@@ -1,6 +1,6 @@
 <template>
  <div :class="{'chart-header--float': !chartInfo.param.showHeader}" class="chart-header">
-    <span v-if="isError">
+    <span v-if="isError" class="chart-header-error">
     <el-popover
       placement="top-start"
       :close-delay=10
--- a/nezha-fronted/src/components/chart/chartList.vue
+++ b/nezha-fronted/src/components/chart/chartList.vue
@@ -63,9 +63,9 @@
    <!-- 全屏查看 -->
    <el-dialog
      v-if="fullscreen.visible"
-      :title="fullscreen.chartInfo.name"
      :visible.sync="fullscreen.visible"
      append-to-body
+      :show-close="false"
      class="nz-dialog chart-fullscreen"
      destroy-on-close
      fullscreen
@@ -390,8 +390,6 @@ export default {
      deep: true,
      handler (n) {
        if (this.isGroup) {
-          console.log(123123)
-          console.log(n)
          bus.$emit('groupMove', n, this.groupInfo)
        }
      }
--- a/nezha-fronted/src/components/chart/panelChart.vue
+++ b/nezha-fronted/src/components/chart/panelChart.vue
@@ -13,6 +13,16 @@
      @groupShow="groupShow"
      @showFullscreen="showFullscreen"
    ></chart-header>
+<!--    全屏的header-->
+    <chart-screen-header
+      v-if="isFullscreen"
+      :is-group="isGroup(chartInfo.type)"
+      :isError="isError"
+      :chartData="chartData"
+      :chart-info="chartInfo"
+      @refresh="refresh"
+      @close="showFullscreen"
+    ></chart-screen-header>
    <!-- chart -->
    <!-- 数据查询后传入chart组件，chart组件内不查询，只根据接传递的数据来渲染 -->
    <chart
@@ -32,6 +42,7 @@

 <script>
 import chartHeader from '@/components/chart/chartHeader'
+import ChartScreenHeader from '@/components/chart/ChartScreenHeader'
 import chart from '@/components/chart/chart'
 import { isChartPie, isTimeSeries, getGroupHeight, isGroup } from './chart/tools'
 import { chartType, fromRoute } from '@/components/common/js/constants'
@@ -45,7 +56,8 @@ export default {
  name: 'panelChart',
  components: {
    chartHeader,
-    chart
+    chart,
+    ChartScreenHeader
  },
  props: {
    chartInfo: Object, // 其中的param json串已转化为对象
@@ -75,7 +87,6 @@ export default {
    isGroup,
    // 参数 isRefresh 标识是否是刷新操作
    getChartData (isRefresh) {
-      console.log(123)
      this.loading = true
      // TODO assetInfo、endpointInfo、echarts等进行不同的处理
      let startTime = ''
@@ -195,7 +206,6 @@ export default {
            setTimeout(() => {
              this.loading = false
            })
-            console.log(123123)
            if (this.chartInfo.type === 'hexagon') {
              this.getHexagonFigureData().then(res => {
                this.chartData = res
@@ -293,7 +303,7 @@ export default {
      this.groupInit()
      bus.$emit('groupMove', '', '', true)
      this.$emit('groupShow', this.chartInfo)
-    }
+    },
  },
  watch: {
    timeRange: {
@@ -306,8 +316,6 @@ export default {
      immediate: true,
      deep: true,
      handler (n) {
-        console.log(n)
-        console.log(this.chartInfo.type)
      }
    }
  },
--- a/nezha-fronted/src/components/common/mixin/routerPathParams.js
+++ b/nezha-fronted/src/components/common/mixin/routerPathParams.js
@@ -6,7 +6,6 @@ export default {
      const q = this.$route.query
      lodash.forIn(searchKeys, (val, key) => {
        let qv = lodash.get(q, key)
-        console.log(qv, q, key, val)
        if (qv && val.type == 'number') {
          qv = lodash.toNumber(qv)
        }