perf：删除没有用到的代码

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

@@ -29,7 +29,16 @@
   margin-top: 0;
   transform: translate(-50%, -50%);
 }
-
+.export-pdf-mask {
+  .el-loading-spinner {
+    .el-loading-text{
+      white-space: nowrap;
+      margin-left: 54px;
+      margin-top: 10px;
+      color: #f8f8f8;
+    }
+  }
+}
 /* 自定义的dropdown */
 .nz-dropdown {
   width: 90px;

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

@@ -119,8 +119,8 @@
 </template>
 
 <script>
-import bus from '../../libs/bus'
+import bus from '../../../libs/bus'
-import chartDataFormat from './chartDataFormat'
+import chartDataFormat from '../chartDataFormat'
 import chartDataList from '@/components/common/mixin/chartDataList'
 
 export default {

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

@@ -25,7 +25,7 @@ import { chartLegendPlacement } from '@/components/common/js/constants'
 import * as echarts from 'echarts'
 import { getChart, setChart } from '@/components/common/js/common'
 import { formatScientificNotation, getMetricTypeValue } from '@/components/common/js/tools'
-import chartDataFormat from '@/components/charts/chartDataFormat'
+import chartDataFormat from '@/components/chart/chartDataFormat'
 import { initColor } from '@/components/chart/chart/tools'
 import lodash from 'lodash'
 

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

@@ -23,7 +23,7 @@
 import chartMixin from '@/components/chart/chartMixin'
 import chartFormat from '@/components/chart/chartFormat'
 import { getMetricTypeValue } from '@/components/common/js/tools'
-import chartDataFormat from '@/components/charts/chartDataFormat'
+import chartDataFormat from '@/components/chart/chartDataFormat'
 import * as echarts from 'echarts'
 import lodash from 'lodash'
 import { getChart } from '@/components/common/js/common'

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

@@ -22,7 +22,7 @@ import chartFormat from '@/components/chart/chartFormat'
 import { initColor } from '@/components/chart/chart/tools'
 import '@svgdotjs/svg.panzoom.js'
 import { getMetricTypeValue } from '@/components/common/js/tools'
-import chartDataFormat from '@/components/charts/chartDataFormat'
+import chartDataFormat from '@/components/chart/chartDataFormat'
 export default {
   name: 'chartHexagonD3',
   mixins: [chartMixin, chartFormat],

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

@@ -93,7 +93,7 @@ import { chartLegendPlacement } from '@/components/common/js/constants'
 import * as echarts from 'echarts'
 import { getChart, setChart } from '@/components/common/js/common'
 import { dealLegendAlias, formatScientificNotation, getMetricTypeValue } from '@/components/common/js/tools'
-import chartDataFormat from '@/components/charts/chartDataFormat'
+import chartDataFormat from '@/components/chart/chartDataFormat'
 import { initColor } from '@/components/chart/chart/tools'
 import lodash from 'lodash'
 import axios from 'axios'

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

@@ -24,7 +24,7 @@ import { chartLegendPlacement } from '@/components/common/js/constants'
 import * as echarts from 'echarts'
 import { getChart, setChart } from '@/components/common/js/common'
 import { formatScientificNotation, getMetricTypeValue } from '@/components/common/js/tools'
-import chartDataFormat from '@/components/charts/chartDataFormat'
+import chartDataFormat from '@/components/chart/chartDataFormat'
 import { initColor } from '@/components/chart/chart/tools'
 import lodash from 'lodash'
 

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

@@ -50,7 +50,7 @@
 import chartMixin from '@/components/chart/chartMixin'
 import chartFormat from '@/components/chart/chartFormat'
 import { getMetricTypeValue } from '@/components/common/js/tools'
-import chartDataFormat from '@/components/charts/chartDataFormat'
+import chartDataFormat from '@/components/chart/chartDataFormat'
 import { randomcolor } from '@/components/common/js/radomcolor/randomcolor'
 import { initColor } from '@/components/chart/chart/tools'
 // import fontWidth from '@/components/chart/chart/options/fontWidth'

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

@@ -45,7 +45,7 @@
 import chartMixin from '@/components/chart/chartMixin'
 import chartFormat from '@/components/chart/chartFormat'
 import { getMetricTypeValue } from '@/components/common/js/tools'
-import chartDataFormat from '@/components/charts/chartDataFormat'
+import chartDataFormat from '@/components/chart/chartDataFormat'
 import lodash from 'lodash'
 export default {
   name: 'chart-table',

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

@@ -23,7 +23,7 @@ import * as echarts from 'echarts'
 import moment from 'moment-timezone'
 import bus from '@/libs/bus'
 import { formatScientificNotation } from '@/components/common/js/tools'
-import chartDataFormat from '@/components/charts/chartDataFormat'
+import chartDataFormat from '@/components/chart/chartDataFormat'
 import { randomcolor } from '@/components/common/js/radomcolor/randomcolor'
 import { chartLegendPlacement } from '@/components/common/js/constants'
 import { getChart, setChart } from '@/components/common/js/common'

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

@@ -25,7 +25,7 @@ import { chartLegendPlacement } from '@/components/common/js/constants'
 import * as echarts from 'echarts'
 import { getChart, setChart } from '@/components/common/js/common'
 import { formatScientificNotation, getMetricTypeValue } from '@/components/common/js/tools'
-import chartDataFormat from '@/components/charts/chartDataFormat'
+import chartDataFormat from '@/components/chart/chartDataFormat'
 import { initColor } from '@/components/chart/chart/tools'
 import lodash from 'lodash'
 

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

@@ -42,7 +42,7 @@
 <script>
 import lodash from 'lodash'
 import { getChart } from '@/components/common/js/common'
-import chartDataFormat from '@/components/charts/chartDataFormat'
+import chartDataFormat from '@/components/chart/chartDataFormat'
 import { statisticsList } from '@/components/common/js/constants'
 export default {
   name: 'chartLegend',

nezha-fronted/src/components/chart/chart/line-chart-block.vue

@@ -200,13 +200,13 @@
 <script>
 import axios from 'axios'
 import * as echarts from 'echarts'
-import bus from '../../libs/bus'
+import bus from '../../../libs/bus'
-import loading from '../common/loading'
+import loading from '../../common/loading'
-import chartDataFormat from './chartDataFormat'
+import chartDataFormat from '../chartDataFormat'
-import { randomcolor } from '../common/js/radomcolor/randomcolor.js'
+import { randomcolor } from '../../common/js/radomcolor/randomcolor.js'
-import chartConfig from '../page/dashboard/overview/chartConfig'
+import chartConfig from '../../page/dashboard/overview/chartConfig'
-import { getChart, setChart, lineChartMove, getMousePoint } from '../common/js/common'
+import { getChart, setChart, lineChartMove, getMousePoint } from '../../common/js/common'
-import { getMetricTypeValue, chartResizeTool, formatScientificNotation, dealLegendAlias } from '../common/js/tools'
+import { getMetricTypeValue, chartResizeTool, formatScientificNotation, dealLegendAlias } from '../../common/js/tools'
 import moment from 'moment-timezone'
 import chartDataList from '@/components/common/mixin/chartDataList'
 

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

@@ -65,7 +65,7 @@ import { isChartPie, isTimeSeries, getGroupHeight, isGroup } from './chart/tools
 import { chartType, fromRoute } from '@/components/common/js/constants'
 import bus from '@/libs/bus'
 import axios from 'axios'
-import chartTempData from '@/components/charts/chartTempData'
+import chartTempData from '@/components/chart/chartTempData'
 import logsData from '@/components/chart/logsData'
 import lodash from 'lodash'
 

nezha-fronted/src/components/charts/charLlist和chart-list-group的区别.md

@@ -1,10 +0,0 @@
-
-``` bash
-# list
-向下传递 index
-
-# groupList
-是 chart type=’group‘ 的子组件
-向下传递的是处理过后的 chartIndex
-```
-

nezha-fronted/src/components/charts/chart-bar-statistics.vue

@@ -1,807 +0,0 @@
-<template>
-  <div class="nz-chart-resize">
-    <div class="resize-shadow" ref="resizeShadow"></div>
-    <div class="resize-box resize-box-echarts" ref="resizeBox">
-      <div class="chart-single-stat"  :id="'chartPieChart'+chartIndex" @mouseenter="caretShow=true" @mouseleave="caretShow=false">
-        <loading  :ref="'localLoading'+chartIndex"></loading>
-        <div class="clearfix chartTitle" :class="{'dragTitle':dragTitleShow}" :id="'chartTitle'+chartIndex">
-          <el-popover
-            v-if="isError"
-            :close-delay=10
-            placement="top-start"
-            trigger="hover"
-            popper-class="chart-error-popper">
-            <div >{{errorContent}}</div>
-            <span slot="reference" style="" 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>
-          <el-dropdown trigger="click" class="nz-chart-top" :key="'chartDropdown'+chartIndex"  v-clickoutside="clickos" :class="{'move-able':!isLock}">
-            <el-dropdown-menu style="display: none"></el-dropdown-menu>
-            <span class="el-dropdown-link chart-title">
-<!--              <span class="chart-title-text">{{chartData.name}}</span>-->
-              <span class="chart-title-text" v-on:mouseover="changeActive()" v-on:mouseout="removeActive()">{{chartData.name}}</span>
-              <transition  name="el-fade-in-linear">
-                <span v-show="chartDataList" class="chart-title-pit" >{{chartData.name}}</span>
-              </transition>
-              <span class="chart-title-icon"  :class="{'visible':caretShow,'hidden':!caretShow}">
-                <span v-if="chartData.remark">
-                  <el-tooltip :content="chartData.remark" placement="top" effect="light">
-                     <i class="nz-icon nz-icon-info-normal"></i>
-                  </el-tooltip>
-                </span>
-                <span  v-has="'main_edit'" :title="$t('dashboard.refresh')" class="" @click="refreshChart">
-                  <i class="nz-icon nz-icon-replay"></i>
-                </span>
-                 <span  @click="showAllScreen"  v-if="from !== 'chartTemp'" class="" :title="$t('dashboard.screen')">
-                  <i class="nz-icon nz-icon-maxview"></i>
-                 </span>
-                <span><i class="el-icon-more" @click.stop="dropdownMenuShow=!dropdownMenuShow"></i></span>
-              </span>
-            </span>
-            <ul slot="dropdown" v-show="dropdownMenuShow"  :id="'dropdownUl'+chartIndex"  class="el-dropdown-menu nz-chart-dropdown"  style="" >
-              <li  @click="editChart" class="el-dropdown-menu__item">
-                <i class="nz-icon nz-icon-edit" style="font-size: 16px;"></i><span>{{$t('dashboard.edit')}}</span></li>
-              <li  v-has="'main_delete'" class="el-dropdown-menu__item" @click="removeChart">
-                <i class="nz-icon nz-icon-delete" style="font-size: 16px;"></i>{{$t('dashboard.delete')}}</li>
-              <li  v-has="'main_add'" class="el-dropdown-menu__item" @click="duplicate">
-                <i class="el-icon-copy-document" style="font-size: 16px;"></i>{{$t('dashboard.duplicate')}}</li>
-              <li  v-has="'main_edit'"  v-if="from !== 'chartTemp'&&chartData.pid" class="el-dropdown-menu__item" @click="$emit('sync')">
-                <i class="nz-icon nz-icon-sync" style="font-size: 16px;"></i>{{$t('overall.syncChart')}}</li>
-            </ul>
-          </el-dropdown>
-        </div>
-        <div :id="'pie-chart-local-'+chartIndex" ref="pieChartLocal" style="display: flex;justify-content: center"></div>
-        <div class="chart-no-data" v-show="noData">No Data</div>
-        <div class='legend-container' ref="legendArea" v-show="firstShow">
-          <div v-for="(item, index) in legend" :title="item.alias?item.alias:item.name"  @click="clickLegend(item.name,index)" class="legend-item" :class="{'ft-gr':isGrey[index]}" :key="'legend_' + item.name+'_'+index">
-            <span class="legend-shape" :style="{background:(isGrey[index]?'#D3D3D3':item.color)}"></span><span class="legend-container__span">{{item.alias?item.alias:item.name}}</span>
-          </div>
-        </div>
-        <!--全屏-->
-        <el-dialog class="nz-dialog table-chart-dialog" :title="$t('dashboard.panel.view')" @opened="initChart('screen')"
-                   :visible.sync="screenModal"
-                   width="96%"  @close="screenModal = false" :modal-append-to-body="false">
-          <div slot="title">
-            <span class="nz-dialog-title">{{data.name}}</span>
-            <div class="float-right panel-calendar dialog-tool">
-              <pick-time :refresh-data-func="dateChange" v-model="searchTime" :use-chart-unit="false" ref="pickTime" style="height: 28px;" id="single-chart"></pick-time>
-            </div>
-          </div>
-          <div class="single-stat-screen-container"  >
-            <div :id="'pie-chart-screen-'+chartIndex" ref="pieChartScreen" style="width: 100%;height: 100%;"></div>
-            <div :id="'screenLegendArea'+chartIndex"   class="legend-container legend-container-screen">
-              <div v-for="(item, index) in legendScreen" :title="item.alias?item.alias:item.name"  @click="clickScreenLegend(item.name,index)" class="legend-item" :class="{'ft-gr':isGreyScreen[index]}"  :key="'legend_' + item.name+'_'+index">
-                <span class="legend-shape" :style="{background:(isGreyScreen[index]?'#D3D3D3':item.color)}"></span><span class="legend-container__span">{{item.alias?item.alias:item.name}}</span>
-                <br/><!--bgColorList[index]-->
-              </div>
-            </div>
-          </div>
-          <loading  :ref="'localLoadingScreen'+chartIndex"></loading>
-        </el-dialog>
-      </div>
-      <span class="vue-resizable-handle" @mousedown="startResize" v-if="!isLock"></span>
-    </div>
-  </div>
-</template>
-
-<script>
-import chartDataFormat from './chartDataFormat'
-import loading from '../common/loading'
-import * as echarts from 'echarts'
-import { getChart, setChart, getMousePoint } from '../common/js/common'
-import chartConfig from '../page/dashboard/overview/chartConfig'
-import { randomcolor } from '../common/js/radomcolor/randomcolor'
-import { chartResizeTool, formatScientificNotation } from '@/components/common/js/tools'
-import chartDataList from '@/components/common/mixin/chartDataList'
-export default {
-  name: 'pieChart', // 饼图 或者 柱状图的统计
-  components: {
-    loading: loading
-  },
-  props: {
-    tempDom: Object,
-    chartData: {
-      type: Object
-    },
-    // 看板id
-    panelId: {
-      type: Number,
-      default: 0
-    },
-    editChartId: {
-      type: String,
-      default: 'editChartId'
-    },
-    chartIndex: {
-      type: Number,
-      default: 0
-    },
-    from: { type: String },
-    isLock: { type: Boolean, default: false }
-  },
-  mixins: [chartDataList],
-  data () {
-    return {
-      data: {}, // 该图表信息,chartItem
-      noData: false,
-      unit: {},
-      isError: false,
-      errorContent: '',
-      seriesItem: [], // 保存信息
-      seriesItemScreen: [], // 全屏数据
-      pieData: [],
-      mapping: '', // 满足valueMapping时 mapping的值
-      images: '',
-      loading: Object,
-      items: {
-        metric_name: [], // 每条数据列名称
-        xAxis: [],
-        theData: [] // series数据组
-      },
-      panelIdInner: '', // 看板id=panelId,原写作chart,由set_data获取
-      firstLoad: false, // 是否第一次加载
-      screenModal: false,
-      // 查询数据使用
-      filter: {
-        start_time: '',
-        end_time: ''
-      },
-      firstShow: false, // 默认不显示操作按钮,
-      caretShow: false,
-      dragTitleShow: false,
-      dropdownMenuShow: false,
-      divFirstShow: false,
-      searchTime: [new Date().setHours(new Date().getHours() - 1), new Date()], // 全屏显示的时间
-      oldSearchTime: [],
-      legend: [],
-      legendScreen: [],
-      isGrey: [],
-      isGreyScreen: [],
-      echart: null,
-      echartScreen: null,
-      bgColorList: [],
-      stableFilter: {},
-      option: {
-        title: {
-          show: false
-        },
-        legend: {
-          show: false
-        },
-        grid: {
-          top: 30,
-          left: 10,
-          right: 30,
-          containLabel: true,
-          bottom: 20// 156
-        },
-        tooltip: {
-          trigger: 'item',
-          backgroundColor: 'rgba(221,228,237,1)',
-          borderColor: 'rgba(255,255,255,0)',
-          textStyle: {
-            color: '#000'
-          },
-          axisPointer: {
-            snap: false,
-            animation: false
-          },
-          extraCssText: 'z-index:1000;'
-        },
-        series: null,
-        stepWidth: null,
-        chartDot: 2
-      }
-    }
-  },
-  created () {
-  },
-  computed: {},
-  watch: {
-    dropdownMenuShow (n) {
-      this.$emit('dropmenu-change', n)
-    }
-  },
-  methods: {
-    startResize (e) {
-      const vm = this
-      this.$chartResizeTool.start(vm, this.data, e, this.chartIndex)
-    },
-    startLoading (area) {
-      if (area === 'screen') {
-        this.$refs['localLoadingScreen' + this.chartIndex].startLoading()
-      } else {
-        // this.showLoading = true;
-        this.$refs['localLoading' + this.chartIndex].startLoading()
-      }
-    },
-    endLoading (area) {
-      if (area === 'screen') {
-        // this.showLoadingScreen = false;
-        this.$refs['localLoadingScreen' + this.chartIndex].endLoading()
-      } else {
-        // this.showLoading = false;
-        this.$refs['localLoading' + this.chartIndex] && this.$refs['localLoading' + this.chartIndex].endLoading()
-      }
-    },
-    showLoad (chartItem) {
-      this.$nextTick(() => {
-        const chartBox = document.getElementById('chartPieChart' + this.chartIndex)
-        let height = Math.floor(chartItem.height / this.$chartResizeTool.stepHeight) * this.$chartResizeTool.stepHeight// 图表高度四舍五入
-        if (height < this.$chartResizeTool.minHeight) {
-          height = this.$chartResizeTool.minHeight
-        }
-        chartBox.style.height = `${height - this.$chartResizeTool.chartBlankHeight}px`
-      })
-      this.clearData()
-      this.firstShow = false
-      this.$refs['localLoading' + this.chartIndex].startLoading()
-      this.divFirstShow = true
-    },
-    clearData () {
-      if (getChart(this.chartIndex)) {
-        getChart(this.chartIndex).clear()
-        // getChart(this.chartIndex).dispose();//关闭销毁实例 不再占用内存
-      }
-    },
-    screenRefreshChart () {
-      this.$refs.calendarPanel.timeChange(this.$refs.calendarPanel.nowTimeType, 'chart')
-    },
-    // 重新请求数据 刷新操作-local
-    refreshChart () {
-      this.dropdownMenuShow = false
-      const id = this.data.id
-      this.clearChart()
-      this.$refs['localLoading' + this.chartIndex].startLoading()
-      this.firstShow = false
-      this.$emit('on-refresh-data', id)
-    },
-    // 编辑图表
-    editChart () {
-      this.dropdownMenuShow = false
-      this.$emit('on-edit-chart-block', this.data.id)
-    },
-    // 删除该图表
-    removeChart () {
-      this.dropdownMenuShow = false
-      this.$emit('on-remove-chart-block', this.data.id)
-    },
-    // 全屏时间条件查询
-    dateChange (time) {
-      this.seriesItemScreen = []
-      this.seriePieChart = ''
-      this.startLoading('screen')
-      this.$emit('on-search-data', this.data.id, this.searchTime)
-    },
-    clickos () {
-      this.dropdownMenuShow = false
-    },
-    clearChart () {
-      this.data = {}
-    },
-    duplicate () {
-      this.dropdownMenuShow = false
-      this.$emit('on-duplicate-chart-block', this.data.id)
-    },
-    // 全屏查看
-    showAllScreen () {
-      this.dropdownMenuShow = false
-      this.searchTime = []
-      this.$set(this.searchTime, 0, this.oldSearchTime[0])
-      this.$set(this.searchTime, 1, this.oldSearchTime[1])
-      this.$refs.pickTime.$refs.timePicker.setCustomTime(this.stableFilter)
-      this.screenModal = true
-    },
-    resize (chartItem) {
-      if (getChart(this.chartIndex)) {
-        const divHeight = this.$refs.legendArea.offsetHeight
-        getChart(this.chartIndex).resize({ height: (this.data.height * this.stepWidth - divHeight - chartResizeTool.titleHeight - chartResizeTool.chartBlankHeight) })
-      }
-    },
-    // 设置数据, filter区分
-    setData (chartItem, seriesItem, panelId, filter, legend, area, errorMsg) {
-      this.data = chartItem
-      if (chartItem.type === 'bar') {
-        this.option.xAxis = {
-          type: 'category',
-          axisLine: {
-            show: false
-          },
-          axisTick: {
-            show: false
-          },
-          showAllSymbol: false,
-          axisPointer: { // y轴上显示指针对应的值
-            show: false
-          },
-          axisLabel: {
-            margin: 8,
-            formatter (params) {
-              const dataLength = seriesItem.length || 1
-              const chartWidth = (document.getElementById('chart-' + chartItem.id).offsetWidth - 80) / dataLength// 容器宽 - padding - 空余
-              const length = Math.ceil((chartWidth) / 16)
-              let val = ''
-              if (params.length > length) {
-                val = params.substr(0, length) + '...'
-                return val
-              } else {
-                return params
-              }
-            }
-          }
-        }
-        const maxValueCopies = this.getMaxValue(seriesItem, chartItem)
-        let dot = this.chartDot = maxValueCopies.dot || 2
-        const maxValue = maxValueCopies.maxValue
-        const copies = maxValueCopies.copies
-        const unit = maxValueCopies.unit
-        this.option.yAxis = {
-          type: 'value',
-          // maxInterval:{},
-          // 去掉y轴--start
-          minInterval: chartDataFormat.Interval(maxValue, copies, unit.type, 'min'),
-          maxInterval: chartDataFormat.Interval(maxValue, copies, unit.type, 'max') * Math.ceil(seriesItem.length / 5),
-          // 去掉y轴--end
-          axisLabel: {
-            show: true,
-            fontSize: 10,
-            formatter (val, index) {
-              const value = formatScientificNotation(val, 2)
-              // const flag = JSON.stringify(value).length > JSON.stringify(chartDataFormat.Interval(maxValue, copies, unit.type)).length
-              if (chartDataFormat.Interval(maxValue, copies, unit.type, 'min') < 1 && dot < 2) {
-                dot = 2
-              }
-              if (dot == 0) {
-                dot = 1
-              }
-              return unit.compute(value, index, -1, dot)
-            }
-          }
-          // boundaryGap:[0,0.2]
-        }
-        const nweSeriesItem = []
-        seriesItem[0].data.forEach((item, index) => {
-          const obj = { ...seriesItem[0] }
-          const legendShow = legend[index].alias ? legend[index].alias : legend[index].name
-          obj.name = legend[index].name
-          obj.data = [[legendShow, item.value]]
-          obj.stack = true
-          if (chartItem.param.threshold) {
-            obj.markLine = {
-              silent: true,
-              symbol: ['circle', 'circle'],
-              label: {
-                distance: this.computeDistance(chartDataFormat.getUnit(chartItem.unit ? chartItem.unit : 2).compute(chartItem.param.threshold)),
-                formatter (params) {
-                  return chartDataFormat.getUnit(chartItem.unit ? chartItem.unit : 2).compute(params.value)
-                }
-              },
-              lineStyle: {
-                color: '#d64f40',
-                width: 2,
-                type: 'dotted'
-              },
-              data: [{
-                yAxis: Number(chartItem.param.threshold)
-              }]
-            }
-          }
-          nweSeriesItem.push(obj)
-        })
-        seriesItem = nweSeriesItem
-      }
-      if (filter) {
-        this.stableFilter = filter
-      }
-      if (errorMsg && errorMsg !== '') {
-        this.isError = true
-        this.errorContent = errorMsg
-      } else {
-        this.isError = false
-        this.errorContent = ''
-      }
-      if (seriesItem || seriesItem.data.length < 1) { // 0 为false
-        this.noData = false
-      } else {
-        this.noData = true
-      }
-      this.legend = legend
-      this.legendScreen = legend
-      legend && this.setColor(legend.length)
-      legend && legend.forEach((t, i) => { t.color = this.bgColorList[i] })
-
-      this.$set(this.option, 'color', this.bgColorList)
-      this.pieData = seriesItem
-      if (area === 'showFullScreen') { // 全屏按时间查询
-        this.data = chartItem
-        this.unit = chartDataFormat.getUnit(this.data.unit)
-        this.initChart('screen')
-        this.searchTime[0] = filter.start_time// 将列表的查询时间复制给全屏的查询时间
-        this.searchTime[1] = filter.end_time
-        this.endLoading('screen')
-      } else {
-        this.divFirstShow = true
-
-        this.firstShow = true // 展示操作按键
-
-        this.panelIdInner = panelId
-        this.data = chartItem
-        this.unit = chartDataFormat.getUnit(this.data.unit)
-        this.initChart('local')
-        if (filter) { // 保存数据,用于同步时间
-          this.searchTime[0] = filter.start_time// 将列表的查询时间复制给全屏的查询时间
-          this.searchTime[1] = filter.end_time
-          this.oldSearchTime[0] = this.searchTime[0]
-          this.oldSearchTime[1] = this.searchTime[1]
-        }
-        this.endLoading()
-      }
-    },
-    computeDistance (str) {
-      const span = document.querySelector('.temp-dom')
-      span.textContent = str
-      const txtWidth = parseFloat(window.getComputedStyle(span).width)
-      return Number('-' + (txtWidth + 5))
-    },
-    formatLegend (chartWidth, name) {
-      if (!name) {
-        return ''
-      }
-      // 计算宽度
-      const span = document.querySelector('.temp-dom')
-      span.textContent = name
-      const txtWidth = parseFloat(window.getComputedStyle(span).width) - this.tempDom.width
-      if (txtWidth < chartWidth) {
-        return name
-      } else {
-        const charNum = `${(chartWidth - 100) / (txtWidth / name.length)}`
-        return name.slice(0, charNum) + '...'
-      }
-    },
-    initChart (type) {
-      this.option.series = this.pieData
-      this.stepWidth = document.getElementById('listContainer').offsetWidth / 12
-      if (type == 'local') {
-        this.initLocal()
-      } else {
-        this.initScreen()
-      }
-    },
-    initLocal () {
-      const self = this
-      const dom = document.getElementById('pie-chart-local-' + this.chartIndex)
-      if (!this.echart) {
-        this.echart = echarts.init(dom)
-        setChart(this.chartIndex, this.echart)
-      }
-      if (this.legend) {
-        this.isGrey = []
-        this.legend.map((item, i) => {
-          const legend = {
-            name: item.name,
-            alias: item.alias,
-            color: item.color,
-            showText: this.formatLegend(dom.clientWidth, item.name)
-          }
-          self.isGrey.push(false)
-          return legend
-        })
-      }
-
-      this.$nextTick(() => {
-        const vm = this
-        setTimeout(function () {
-          const divHeight = self.$refs.legendArea ? self.$refs.legendArea.offsetHeight : 20
-          if (!self.chartData.height) {
-            getChart(self.chartIndex).resize({ height: (400 - divHeight - self.$chartResizeTool.titleHeight - self.$chartResizeTool.chartBlankHeight) })
-          } else {
-            getChart(self.chartIndex).resize({ height: (self.chartData.height * vm.stepWidth - divHeight - self.$chartResizeTool.titleHeight - self.$chartResizeTool.chartBlankHeight) })
-          }
-          self.$set(self.option.tooltip, 'formatter', self.formatterFunc)
-          self.$set(self.option.tooltip, 'position', function (point, params, dom, rect, size) {
-            dom.style.transform = 'translateZ(0)'
-            const windowWidth = window.innerWidth// 窗口宽度
-            const windowHeight = window.innerHeight// 窗口高度
-            const windowMouse = getMousePoint()
-            // 提示框位置
-            let x = 0
-            let y = 0
-            // 当前鼠标位置
-            const pointX = point[0]
-            const pointY = point[1]
-            // 外层div大小
-            const viewWidth = size.viewSize[0]
-            // const viewHeight = size.viewSize[1]
-            // 提示框大小
-            const boxWidth = size.contentSize[0]
-            const boxHeight = size.contentSize[1]
-            if (!self.screenModal) { // 本地显示
-              const chartDom = document.getElementById(self.chartData.name + '_' + self.chartData.id)
-              if (chartDom) {
-                // const parTop = document.getElementById(self.chartData.title + '_' + self.chartData.id).offsetTop
-                const parleft = document.getElementById(self.chartData.name + '_' + self.chartData.id).offsetLeft
-
-                const parent = document.getElementById('tableList')
-                // const parClientHeight = parent.clientHeight// 可视高度
-                const parClientWidth = parent.clientWidth// 可视宽度
-                // const parScrollTop = parent.scrollTop
-                if ((parClientWidth - pointX - parleft - 20) >= boxWidth) { // 说明鼠标在左边放不下提示框
-                  x = pointX + 10
-                } else {
-                  x = pointX - boxWidth
-                }
-                if (windowMouse.y + 50 + boxHeight < windowHeight) { // 说明鼠标上面放不下提示框
-                  y = pointY + 15
-                } else {
-                  y = pointY - boxHeight - 10
-                }
-                return [x, y]
-              } else { // preview page
-                if (windowMouse.x < (windowWidth / 2)) { // 说明鼠标在左边放不下提示框
-                  x = pointX + 15
-                } else {
-                  x = pointX - boxWidth - 15
-                }
-                if (windowMouse.y + 50 + boxHeight < windowHeight) { // 说明鼠标上面放不下提示框
-                  y = pointY + 15
-                } else {
-                  y = pointY - boxHeight - 10
-                }
-                return [x, y]
-              }
-            } else {
-              if (pointX < (viewWidth / 2)) { // 说明鼠标在左边放不下提示框
-                x = pointX + 10
-              } else {
-                x = pointX - boxWidth
-              }
-              if (windowMouse.y + 50 + boxHeight < windowHeight) { // 说明鼠标上面放不下提示框
-                y = pointY + 15
-              } else {
-                y = pointY - boxHeight - 10
-              }
-              return [x, y]
-            }
-          })
-          if (self.pieData[0]) {
-            if (self.pieData[0].data.length > 0) {
-              getChart(self.chartIndex).clear()
-              getChart(self.chartIndex) && getChart(self.chartIndex).setOption(self.option)// 创建图表
-              self.noData = false
-            } else {
-              self.noData = true
-              self.option = chartConfig.getOption('noData')
-              getChart(self.chartIndex).clear()
-              getChart(self.chartIndex) && getChart(self.chartIndex).setOption(self.option)// 创建图表
-            }
-          }
-          self.$refs['localLoading' + self.chartIndex] && self.$refs['localLoading' + self.chartIndex].endLoading()
-          self.firstShow = true // 展示操作按键
-        }, 100)
-      })
-    },
-    initScreen () {
-      const self = this
-      const dom = document.getElementById('pie-chart-screen-' + this.chartIndex)
-      if (!this.echartScreen) {
-        this.echartScreen = echarts.init(dom)
-      }
-      if (this.legendScreen) {
-        this.isGreyScreen = []
-        this.legendScreen = this.legendScreen.map((item, i) => {
-          const legend = {
-            name: item.name,
-            alias: item.alias,
-            color: item.color,
-            showText: this.formatLegend(dom.clientWidth, item.name)
-          }
-          self.isGreyScreen.push(false)
-          return legend
-        })
-      }
-      if (self.echartScreen) {
-        self.echartScreen.clear()
-        self.showLegend = true
-        self.$refs['localLoadingScreen' + self.chartIndex].endLoading()
-      }
-      this.$nextTick(() => {
-        const legendDiv = document.getElementById('screenLegendArea' + self.chartIndex)
-        const divHeight = legendDiv.offsetHeight
-        const screenHeight = document.documentElement.clientHeight || document.body.clientHeight
-        const sumHeight = Math.floor(screenHeight * 0.99 * 0.8)// margin-top:1vh; dailog:80%
-        self.$refs.pieChartScreen.style.height = `${sumHeight - divHeight - 58}px`
-        self.echartScreen.resize({ height: (sumHeight - divHeight - 58) })// 图表的高度
-        setTimeout(function () {
-          self.$set(self.option.tooltip, 'formatter', self.formatterFunc)
-          if (self.pieData[0].data.length > 0) {
-            self.echartScreen && self.echartScreen.setOption(self.option)// 显示全屏界面
-            self.noData = false
-          } else {
-            self.noData = true
-            self.option = chartConfig.getOption('noData')
-            self.echartScreen && self.echartScreen.setOption(self.option)// 显示全屏界面
-          }
-          self.echartScreen.on('finished', function () {
-            const legendDiv = document.getElementById('screenLegendArea' + self.chartIndex)
-            const divHeight = legendDiv.offsetHeight
-            const screenHeight = document.documentElement.clientHeight || document.body.clientHeight
-            const sumHeight = Math.floor(screenHeight * 0.99 * 0.8)// margin-top:1vh; dailog:80%
-            self.$refs.pieChartScreen.style.height = `${sumHeight - divHeight - 58}px`
-            self.echartScreen.resize({ height: (sumHeight - divHeight - 58) })// 图表的高度
-            self.echartScreen.off('finished')
-          })
-        }, 100)
-      })
-    },
-    clickLegend (legendName, index) {
-      /* 点击legend
-          * 1.当前如果是全高亮状态，则全部置灰，只留被点击的legend高亮
-          * 2.如果点击的是唯一高亮的legend，则变为全高亮状态
-          * 3.否则只改变被点击的legend状态
-          * */
-      let highlightNum = 0 // 高亮数量
-      this.isGrey.forEach(g => {
-        if (!g) {
-          highlightNum++
-        }
-      })
-      const hasGrey = highlightNum < this.isGrey.length // 是否有置灰的
-      const curIsGrey = this.isGrey[index] // 当前legend的状态
-      const currentIsTheOnlyOneHighlight = !curIsGrey && highlightNum === 1 // 当前legend是否是目前唯一高亮的
-
-      const echart = getChart(this.chartIndex)
-      if (echart) {
-        if (!hasGrey) { // 1.除当前legend外全置灰
-          echart.dispatchAction({
-            type: 'legendInverseSelect'
-          })
-          echart.dispatchAction({
-            type: 'legendSelect',
-            name: legendName
-          })
-          this.isGrey = this.isGrey.map((g, i) => i !== index)
-        } else if (currentIsTheOnlyOneHighlight) { // 2.全高亮
-          echart.dispatchAction({
-            type: 'legendAllSelect'
-          })
-          this.isGrey = this.isGrey.map(() => false)
-        } else {
-          const type = curIsGrey ? 'legendSelect' : 'legendUnSelect'
-          echart.dispatchAction({
-            type: type,
-            name: legendName
-          })
-          this.$set(this.isGrey, index, !this.isGrey[index])
-        }
-      }
-    },
-    clickScreenLegend (legendName, index) {
-      /* 点击legend
-          * 1.当前如果是全高亮状态，则全部置灰，只留被点击的legend高亮
-          * 2.如果点击的是唯一高亮的legend，则变为全高亮状态
-          * 3.否则只改变被点击的legend状态
-          * */
-      let highlightNum = 0 // 高亮数量
-      this.isGreyScreen.forEach(g => {
-        if (!g) {
-          highlightNum++
-        }
-      })
-      const hasGrey = highlightNum < this.isGreyScreen.length // 是否有置灰的
-      const curIsGrey = this.isGreyScreen[index] // 当前legend的状态
-      const currentIsTheOnlyOneHighlight = !curIsGrey && highlightNum === 1 // 当前legend是否是目前唯一高亮的
-
-      const echart = this.echartScreen
-      if (echart) {
-        if (!hasGrey) { // 1.除当前legend外全置灰
-          echart.dispatchAction({
-            type: 'legendInverseSelect'
-          })
-          echart.dispatchAction({
-            type: 'legendSelect',
-            name: legendName
-          })
-          this.isGreyScreen = this.isGreyScreen.map((g, i) => i !== index)
-        } else if (currentIsTheOnlyOneHighlight) { // 2.全高亮
-          echart.dispatchAction({
-            type: 'legendAllSelect'
-          })
-          this.isGreyScreen = this.isGreyScreen.map(() => false)
-        } else {
-          const type = curIsGrey ? 'legendSelect' : 'legendUnSelect'
-          echart.dispatchAction({
-            type: type,
-            name: legendName
-          })
-          this.$set(this.isGreyScreen, index, !this.isGreyScreen[index])
-        }
-      }
-    },
-    setColor (colorNum) {
-      this.bgColorList = [
-        '#FF5200', '#3685FF', '#FF8D00', '#00DCA2',
-        '#954Eff', '#FFCB01', '#f65A96', '#00BFD0',
-        '#FF8BEA', '#4D7693', '#72577C', '#99D750',
-        '#DD8270', '#C475EE', '#7E83FB', '#7EB090',
-        '#FF9094', '#00CCF5', '#CF6684', '#4E55FF'
-      ]
-      for (let i = 0; i < colorNum - 19; i++) {
-        this.bgColorList.push(randomcolor())
-      }
-    },
-    formatterFunc (params, ticket, callback) {
-      const chartInfo = this.chartData
-      return `
-                <div>
-                    <div style="white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;  min-width: 150px; max-width: 600px; line-height: 18px; font-size: 14px;">
-                        <div style="max-width: 500px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom: 5px">${this.legend[params.seriesIndex].alias}</div>
-                        <div style="font-size:12px;display:flex;justify-content: space-between;">
-                            <div>value</div>
-                            <div>${chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(params.value[1], null, -1, this.chartDot ? this.chartDot : 2)}</div>
-                        </div>
-                    </div>
-                </div>
-               `
-    },
-    getMaxValue (dataArg, chartInfo) {
-      let maxValue = 0
-      let minValue = 0
-      if (chartInfo.unit && dataArg.length > 0) {
-        maxValue = 0
-        minValue = 0
-        for (let j = 0; j < dataArg.length; j++) {
-          for (let i = 0; i < dataArg[j].data.length; i++) {
-            if (!isNaN(dataArg[j].data[i].value)) {
-              maxValue = (maxValue < Number(dataArg[j].data[i].value) ? Number(dataArg[j].data[i].value) : maxValue)
-              minValue = (minValue > Number(dataArg[j].data[i].value) ? Number(dataArg[j].data[i].value) : minValue)
-            }
-          }
-        }
-      }
-      const chartUnit = chartInfo.unit ? chartInfo.unit : 2
-      const unit = chartDataFormat.getUnit(chartUnit)
-      minValue = minValue > 0 ? 0 : minValue
-      maxValue = maxValue - minValue
-      maxValue = chartDataFormat.formatDatas(maxValue, unit.type, 'ceil', unit.ascii)
-      let oldValue = maxValue
-      let dot = 0
-      if (maxValue == 1) {
-        dot++
-      }
-      if (oldValue > 10) {
-        while (oldValue > 10) {
-          oldValue = oldValue / 10
-        }
-      } else if (oldValue < 1 && maxValue !== 0) {
-        while (oldValue < 1 && oldValue > 0) {
-          oldValue = oldValue * 10
-          dot++
-        }
-        maxValue = Math.floor(oldValue) / Math.pow(10, dot)
-        dot++
-      }
-      const copies = chartDataFormat.copies(oldValue, unit.type)
-      let oldDot = 2
-      if (maxValue <= 1) {
-        oldDot = dot > 6 ? 6 : dot
-      }
-      return {
-        maxValue,
-        dot,
-        copies,
-        minValue,
-        unit,
-        oldDot
-      }
-    }
-  },
-  mounted () {
-    this.firstLoad = false
-  },
-  beforeDestroy () {
-    this.clearChart()
-  }
-}
-</script>

nezha-fronted/src/components/charts/chart-detail.vue

@@ -1,562 +0,0 @@
-<template>
-  <div class="nz-chart-resize">
-    <div class="resize-shadow" ref="resizeShadow"></div>
-    <div class="resize-box" ref="resizeBox">
-      <div class="chart-container chart-detail" :id="'chartContainerDiv' + chartIndex" @mouseenter="caretShow = true" @mouseleave="caretShow = false">
-        <loading :ref="'localLoading' + chartIndex"></loading>
-        <div class="clearfix chartTitle" :class="{'drag-disabled': !data.draggable,}" :id="'chartTitle' + chartIndex">
-          <el-popover
-            v-if="isError"
-            :close-delay="10"
-            placement="top-start"
-            trigger="hover"
-            popper-class="chart-error-popper">
-            <div>{{errorContent}}</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 :class="{'move-able':!isLock}"><span class="el-dropdown-link chart-title-text chart-title" @click="dropdownMenuShow = !dropdownMenuShow">{{data.name}}</span></span>
-
-        </div>
-        <div ref="chartInfo" class="chart-info" :id="'chartInfoDiv' + chartIndex" v-cloak>
-          <div ref="scrollbar" style="height: 100%;width:100%; overflow: auto;">
-            <div v-for="(item, index) in detail" :key="index" class="chart-sub">
-              <template v-if="isNotEmptyTab(item)">
-                <div class="chart-sub-title" @click="hideElement(index)">
-                  <span v-if="data.from !== fromRoute.endpoint"><i :class="{'nz-icon nz-icon-caret-right': show.indexOf(index) === -1,'nz-icon nz-icon-caret-bottom': show.indexOf(index) > -1}"></i></span>
-                  <span>{{item.title}}</span>
-                </div>
-                <el-collapse-transition>
-                  <div v-show="show.indexOf(index) > -1" class="chart-sub-content">
-                    <template v-for="(value, key, i) in item.data">
-                      <!-- endpoint-detail、asset、model的assetInfo的asset详情-->
-                      <div v-if="(data.from === fromRoute.endpoint || data.from === fromRoute.asset || data.from === fromRoute.model) && data.type === 'assetInfo' && item.type === 'basic' && assetKey[key]" :key="i" class="content-item">
-                        <div :id="`key-${index}-${i}`" class="content-item-key item-tip">
-                          <span class="content-text">{{assetKey[key]}}</span>
-                          <div :class="itemTip(`key-${index}`, key, i, ready)" class="item-tip-hide item-tip-key el-popover">{{assetKey[key]}}</div>
-                        </div>
-                        <div :id="`value-${index}-${i}`" class="content-item-value item-tip">
-                          <span v-if="key === 'name'">{{value}}</span>
-                          <span v-else-if="key === 'type'">{{value}}</span>
-                          <span v-else-if="key === 'state'">{{value}}</span>
-                          <span v-else-if="key === 'brand'">{{value}}</span>
-                          <span v-else-if="key === 'alert'" class="as-button"><i :class=" value > 0 ? 'red' : 'green'" class="nz-icon nz-icon-overview-alert"></i>&nbsp;{{value}}</span>
-                          <span v-else-if="key === 'endpoint'" class="as-button"><i class="nz-icon nz-icon-overview-endpoint monitorColor"></i>&nbsp;{{value}}</span>
-                          <div v-else-if="key === 'tags'" class="no-overflow" style="padding-bottom: 5px;">
-                            <template v-if="value && value.length > 0">
-                              <nz-alert-tag v-for="(tagItem, tagIndex) in value" :key="tagItem.id" :cursor-point="false"
-                                            :label="tagItem.name"
-                                            style="margin: 5px 5px 0 0; vertical-align: middle;"
-                                            type="normal">
-                                <div :id="`tag-${index}-${tagIndex}`" class="tag-value">
-                                  <span class="content-text">{{tagItem.value.join(',')}}</span>
-                                </div>
-                              </nz-alert-tag>
-                            </template>
-                            <template v-else>-</template>
-                          </div>
-                          <template v-else-if="key === 'cabinet'">
-                            <span v-if="value&&item.data.cabinetStart&&item.data.cabinetEnd">{{value + '['+item.data.cabinetStart+'-'+item.data.cabinetEnd+']'}}</span>
-                            <span v-else-if="value&&!(item.data.cabinetStart||item.data.cabinetEnd)">{{value}}</span>
-                            <span v-else></span>
-                          </template>
-                          <template v-else-if="key === 'pingRtt'">
-                            <div :class="{'green-bg': item.data.pingStatus == 1, 'red-bg': item.data.pingStatus == 1 != 1}" class="active-icon"></div>
-                            <span>{{value ? value + 'ms' : ''}}</span>
-                          </template>
-                          <template v-else-if="assetKey[key]">
-                            <span v-if="key!=='pingLastReply'" class="content-text">{{value ? value : "&nbsp;"}}</span>
-                            <span v-else class="content-text">{{value ? timeFormat(value): "&nbsp;"}}</span>
-                            <div :class="itemTip(`value-${index}`, key, i, ready)" class="item-tip-hide item-tip-value el-popover">{{value}}</div>
-                          </template>
-                        </div>
-                      </div>
-                      <!-- endpoint-detail、asset、model的assetInfo的feature-->
-                      <div v-if="(data.from === fromRoute.endpoint || data.from === fromRoute.asset || data.from === fromRoute.model) && data.type === 'assetInfo' && item.type === 'attribute'" :key="i" class="content-item">
-                        <div :id="`key-${index}-${i}`" class="content-item-key item-tip">
-                          <span class="content-text">{{key}}</span>
-                          <div :class="itemTip(`key-${index}`, key, i, ready)" class="item-tip-hide item-tip-key el-popover">{{key}}</div>
-                        </div>
-
-                        <div :id="`value-${index}-${i}`" :class="{'content-item-value-muti': Array.isArray(value) && value.length > 0}" class="content-item-value item-tip">
-                          <template v-if="Array.isArray(value) && value.length>0">
-                            <template v-if="typeof value[0] == 'string'">
-                              <div v-for="(_item, _index) in value" :key="_index" class="item-value-sub">{{_item}}</div>
-                            </template>
-                            <template v-else>
-                              <el-table
-                                ref="dataTable"
-                                :data="value"
-                                class="nz-table asset-info-table"
-                                height="100%"
-                                tooltip-effect="light"
-                              >
-                                <el-table-column
-                                  v-for="(_item, _index) in setLabels(value)"
-                                  v-if="_item.show"
-                                  :key="`col-${_index}`"
-                                  :label="_item.label"
-                                  :resizable="true"
-                                >
-                                  <template slot-scope="scope" :column="_item">
-                                    <template >
-                                      <span v-html="scope.row[_item.prop]"></span>
-                                    </template>
-                                  </template>
-                                </el-table-column>
-                              </el-table>
-                            </template>
-
-                          </template>
-                          <template v-else-if="key">
-                            <span class="content-text">{{value ? value : "&nbsp;"}}</span>
-                            <div :class="itemTip(`value-${index}`, key, i, ready)" class="item-tip-hide item-tip-value el-popover">{{value}}</div>
-                          </template>
-                        </div>
-                      </div>
-
-                      <!-- endpoint-detail的endpointInfo的endpoint详情-->
-                      <div v-else-if="data.from === fromRoute.endpoint && data.type === 'endpointInfo'" :key="i" class="content-item">
-                        <div :id="`key-${index}-${i}`" class="content-item-key item-tip">
-                          <span class="content-text">{{endpointKey[key]}}</span>
-                          <div :class="itemTip(`key-${index}`, key, i, ready)" class="item-tip-hide item-tip-key el-popover">{{endpointKey[key]}}</div>
-                        </div>
-                        <div :id="`value-${index}-${i}`" class="content-item-value item-tip">
-                          <span v-if="key === 'alert'"><i :class=" value > 0 ? 'red' : 'green'" class="nz-icon nz-icon-overview-alert"></i>&nbsp;{{value}}</span>
-                          <span v-else-if="key === 'asset'"><i class="nz-icon nz-icon-overview-project monitorColor color23BF9A"/>&nbsp;{{value}}</span>
-                          <span v-else-if="key === 'module'"><i style="cursor: pointer" class="nz-icon nz-icon-overview-module monitorColor"/>&nbsp;&nbsp;{{value}}</span>
-                          <span v-else-if="key === 'state'">
-                            <span style="width: auto">
-                              <span class="endpoint-cell-left"><i class="nz-icon nz-icon-Metrics colorFA901C" /> {{$t('project.endpoint.metrics')}} </span>
-                              <span v-if="value[0].state === 0">
-                                <span class="active-icon red-bg inline-block"></span>
-                              </span>
-                              <span v-else-if="value[0].state === 1">
-                                <span class="active-icon green-bg inline-block"></span>
-                              </span>
-                              <span v-else-if="value[0].state">
-                                <span class="active-icon gray-bg inline-block"></span>
-                              </span>
-                            </span>
-                            <span style="width: auto">
-                              <span class="endpoint-cell-left" style="margin-left: 10px"><i class="nz-icon nz-icon-logs colorFA901C" /> {{$t('project.endpoint.logs')}} </span>
-                              <span v-if="value[1].state === 0">
-                                <span class="active-icon red-bg inline-block"></span>
-                              </span>
-                              <span v-else-if="value[1].state === 1">
-                                <span class="active-icon green-bg inline-block"></span>
-                              </span>
-                              <span v-else-if="value[1].state">
-                                <span class="active-icon gray-bg inline-block"></span>
-                              </span>
-                            </span>
-                          </span>
-                          <template v-else-if="endpointKey[key]">
-                            <span class="content-text">{{value || value === 0 ? value : "&nbsp;"}}</span>
-                            <div :class="itemTip(`value-${index}`, key, i, ready)" class="item-tip-hide item-tip-value el-popover">{{value}}</div>
-                          </template>
-                        </div>
-                      </div>
-
-                      <!-- alertRule-detail的详情-->
-                      <div v-else-if="data.from == fromRoute.rule && data.type == 'alertRuleInfo' && key != '_module_'" :key="i" class="content-item" @click="showDeep(`deep-${index}-${i}`)">
-                        <div :id="`key-${index}-${i}`" class="content-item-key item-tip">
-                        <span class="content-text">
-                          <span><i v-if="item.data._module_[key]" :class="{'nz-icon nz-icon-caret-right': deepShow.indexOf(`deep-${index}-${i}`) == -1,'nz-icon nz-icon-caret-bottom': deepShow.indexOf(`deep-${index}-${i}`) > -1}"></i></span>
-                          <span>{{key}}</span>
-                          <!--<span v-if="item.data._module_[key]">{{Object.keys(item.data._module_[key]).length-1}}个module</span>-->
-                        </span>
-                          <div :class="itemTip(`key-${index}`, key, i, ready)" class="item-tip-hide item-tip-key el-popover">{{key}}</div>
-                        </div>
-                        <div :id="`value-${index}-${i}`" class="content-item-value item-tip">
-                          <span class="content-text">{{value ? value : "&nbsp;"}}</span>
-                        </div>
-                        <!-- module -->
-                        <el-collapse-transition>
-                          <div v-show="deepShow.indexOf(`deep-${index}-${i}`) > -1" class="chart-third-content">
-                            <template v-for="(module, mProjectName, ti) in item.data._module_" v-if="mProjectName == key">
-                              <div v-for="(moduleNum, moduleName, fi) in module" v-if="moduleName != '_endpoint_'" :key="fi" class="content-item" @click.stop="showDeep(`deep-${index}-${i}-${ti}-${fi}`)">
-                                <div :id="`key-${index}-${i}-${ti}-${fi}`" class="content-item-key item-tip deep">
-                                <span class="content-text">
-                                  <span><i v-if="module._endpoint_[moduleName]" :class="{'nz-icon nz-icon-caret-right': deepShow.indexOf(`deep-${index}-${i}-${ti}-${fi}`) == -1,'nz-icon nz-icon-caret-bottom': deepShow.indexOf(`deep-${index}-${i}-${ti}-${fi}`) > -1}"></i></span>
-                                  <span>{{moduleName}}</span>
-                                  <!--<span v-if="module._endpoint_[moduleName]">{{Object.keys(module._endpoint_[moduleName]).length-1}}个endpoint</span>-->
-                                </span>
-                                  <div :class="itemTip(`key-${index}-${i}-${ti}`, moduleName, fi, ready)" class="item-tip-hide item-tip-key el-popover">{{moduleName}}</div>
-                                </div>
-                                <div :id="`value-${index}-${i}-${ti}-${fi}`" class="content-item-value item-tip deep">
-                                  <span class="content-text">{{moduleNum ? moduleNum : "&nbsp;"}}</span>
-                                </div>
-                                <!-- endpoint -->
-                                <el-collapse-transition>
-                                  <div v-show="deepShow.indexOf(`deep-${index}-${i}-${ti}-${fi}`) > -1" class="chart-forth-content">
-                                    <template v-for="(endpoint, eModuleName, si) in module._endpoint_" v-if="eModuleName == moduleName">
-                                      <div v-for="(endpointNum, endpointName, ei) in endpoint" :key="ei" class="content-item" @click.stop>
-                                        <div :id="`key-${index}-${i}-${ti}-${fi}-${si}-${ei}`" class="content-item-key item-tip deepp">
-                                        <span class="content-text">
-                                          <span>{{endpointName}}</span>
-                                        </span>
-                                          <div :class="itemTip(`key-${index}-${i}-${ti}-${fi}-${si}`, endpointName, ei, ready)" class="item-tip-hide item-tip-key el-popover">{{endpointName}}</div>
-                                        </div>
-                                        <div :id="`value-${index}-${i}-${ti}-${fi}-${si}-${ei}`" class="content-item-value item-tip deepp">
-                                          <span class="content-text">{{endpointNum ? endpointNum : "&nbsp;"}}</span>
-                                        </div>
-                                      </div>
-                                    </template>
-                                  </div>
-                                </el-collapse-transition>
-                              </div>
-                            </template>
-                          </div>
-                        </el-collapse-transition>
-                      </div>
-                    </template>
-                  </div>
-                </el-collapse-transition>
-              </template>
-            </div>
-          </div>
-        </div>
-      </div>
-      <span v-if="data.resizable&&!isLock" class="vue-resizable-handle" @mousedown="startResize"></span>
-    </div>
-    <!--preview -->
-    <chart-preview :panelId="panelId" ref="chartsPreview" ></chart-preview>
-  </div>
-</template>
-
-<script>
-import loading from '../common/loading'
-import chartPreview from './chartPreview'
-import * as echarts from 'echarts'
-import nzAlertTag from '../page/alert/nzAlertTag'
-import bus from '../../libs/bus'
-import { fromRoute } from '@/components/common/js/constants'
-export default {
-  name: 'chartDetail',
-  components: {
-    loading: loading,
-    'chart-preview': chartPreview,
-    'nz-alert-tag': nzAlertTag
-  },
-  props: {
-    // 看板id
-    panelId: {
-      type: Number,
-      default: 0
-    },
-    editChartId: {
-      type: String,
-      default: 'editChartId'
-    },
-    chartIndex: {
-      type: Number,
-      default: 0
-    },
-    isLock: { type: Boolean, default: false }
-  },
-  data () {
-    return {
-      fromRoute,
-      ready: false,
-      data: {}, // 该图表信息,chartItem
-      detail: [], // 展示的详情
-      unit: {},
-      show: [0], // 控制展开/隐藏
-      deepShow: [], // 控制二级/三级的展开/隐藏
-      isError: false,
-      errorContent: '',
-      loading: Object,
-      panelIdInner: '', // 看板id=panelId,原写作chart,由set_data获取
-      firstLoad: false, // 是否第一次加载
-      screenModal: false,
-      // 查询数据使用
-      filter: {
-        start_time: '',
-        end_time: ''
-      },
-      firstShow: false, // 默认不显示操作按钮,
-      caretShow: false,
-      dropdownMenuShow: false,
-      divFirstShow: false,
-      searchTime: [new Date().setHours(new Date().getHours() - 1), new Date()], // 全屏显示的时间
-      oldSearchTime: [],
-
-      assetKey: {
-        // host: this.$t('asset.host'),
-        id: 'Id',
-        name: this.$t('overall.name'),
-        manageIp: this.$t('overall.manageIp'),
-        type: this.$t('overall.type'),
-        // assetType: this.$t('asset.assetType'),
-        // sn: this.$t('asset.device'),
-        state: this.$t('asset.assetState'),
-        pingRtt: this.$t('asset.assetPing'),
-        dataCenter: this.$t('asset.dataCenter'),
-        cabinet: this.$t('asset.cabinet'),
-        brand: this.$t('asset.brand'),
-        model: this.$t('asset.model'),
-        tags: this.$t('overall.labels'),
-        alert: this.$t('asset.alerts'),
-        endpoint: this.$t('asset.modules')
-        // vendor: this.$t('asset.vendor'),
-        // purchaseDate: this.$t('asset.procurementDate'),
-        // principal: this.$t('asset.principal'),
-        // tel: this.$t('asset.principalTel'),
-        // pingStatus: this.$t('asset.assetPing'),
-        // pingLastReply: this.$t('asset.lastReply'),
-
-      },
-      projectKey: {
-        id: 'ID',
-        name: this.$t('overall.name'),
-        remark: this.$t('overall.remark'),
-        alertStat: this.$t('project.chart.alertStat')
-      },
-      moduleKey: {
-        id: 'ID',
-        name: this.$t('overall.name'),
-        type: this.$t('overall.type'),
-        remark: this.$t('overall.remark'),
-        endpointStat: this.$t('project.chart.endpointStat'),
-        alertStat: this.$t('project.chart.alertStat')
-      },
-      endpointKey: {
-        id: 'ID',
-        name: this.$t('overall.name'),
-        // type: this.$t('overall.type'),
-        project: this.$t('overall.project'),
-        module: this.$t('project.module.module'),
-        asset: this.$t('overall.asset'),
-        alert: this.$t('project.endpoint.alerts'),
-        state: this.$t('project.endpoint.state')
-      }
-    }
-  },
-  computed: {
-    itemTip () {
-      return function (type, content, index, ready) {
-        const className = 'item-tip-show'
-        this.$nextTick(() => {
-          if (ready) {
-            const cellDom = document.querySelector(`#${type}-${index}`)
-            const spanDom = document.querySelector(`#${type}-${index} .content-text`)
-            if (cellDom.offsetWidth - 16 <= spanDom.offsetWidth) {
-              document.querySelector(`#${type}-${index}>.el-popover`).classList.add(className)
-            } else {
-              document.querySelector(`#${type}-${index}>.el-popover`).classList.remove(className)
-            }
-          }
-        })
-        return ''
-      }
-    },
-    isNotEmptyTab () {
-      return function (item) {
-        return item.data && Object.keys(item.data).length > 0
-      }
-    }
-  },
-  methods: {
-    startResize (e) {
-      const vm = this
-      this.$chartResizeTool.start(vm, this.data, e)
-    },
-    setLabels: function (source) {
-      let labels = Object.keys(source[0])
-      labels = labels.map(item => {
-        return {
-          label: this.replaceSplit(item),
-          prop: item,
-          show: true
-        }
-      })
-      return labels
-    },
-    replaceSplit (key) {
-      if (key) {
-        return key.replace(/\$_\$/g, ' ')
-      }
-    },
-    hideElement (index) {
-      if (this.data.from === fromRoute.endpoint) {
-        return
-      }
-      if (this.show.indexOf(index) > -1) {
-        this.show.splice(this.show.indexOf(index), 1)
-      } else {
-        this.show.push(index)
-      }
-    },
-    showDeep (index) {
-      if (this.deepShow.indexOf(index) > -1) {
-        this.deepShow.splice(this.deepShow.indexOf(index), 1)
-      } else {
-        this.deepShow.push(index)
-      }
-    },
-    startLoading (area) {
-      this.$refs['localLoading' + this.chartIndex].startLoading()
-    },
-    endLoading (area) {
-      this.$refs['localLoading' + this.chartIndex] && this.$refs['localLoading' + this.chartIndex].endLoading()
-    },
-    preview () {
-      this.$refs.chartsPreview.show(this.data)
-    },
-    resize () {
-      const container = document.querySelector('#chartInfoDiv' + this.chartIndex)
-      container.style.height = `calc(100% - ${this.$chartResizeTool.titleHeight + this.$chartResizeTool.chartTableBlankHeight}px)`
-    },
-    showLoad (chartItem) {
-      this.$nextTick(() => {
-        this.resize()
-      })
-      this.startLoading()
-      this.divFirstShow = true
-    },
-    // 重新请求数据 刷新操作-local
-    refreshChart () {
-      this.dropdownMenuShow = false
-      this.startLoading()
-      this.firstShow = false
-      this.$emit('on-refresh-data', this.data.id)
-    },
-    // 编辑图表
-    editChart () {
-      this.dropdownMenuShow = false
-      this.$emit('on-edit-chart-block', this.data.id)
-    },
-    // 删除该图表
-    removeChart () {
-      this.dropdownMenuShow = false
-      this.$emit('on-remove-chart-block', this.data.id)
-    },
-    clearChart () {
-      this.data = {}
-    },
-
-    // 设置数据, filter区分
-    setData (chartItem, detail, panelId, filter, area, errorMsg) {
-      if (errorMsg && errorMsg !== '') {
-        this.isError = true
-        this.errorContent = errorMsg
-      } else {
-        this.isError = false
-        this.errorContent = ''
-      }
-      this.divFirstShow = true
-
-      this.firstShow = true // 展示操作按键
-
-      this.panelIdInner = panelId
-      this.data = chartItem
-      this.detail = detail
-      // console.info(this.data, this.detail)
-      /* if (this.detail[0] && this.detail[0].type && this.detail[0].type == 'endpointInfo') { // endpointInfo的小图表
-        this.$nextTick(() => {
-          this.initChart(this.detail[0].data.stateSeries)
-        })
-      } */
-      this.endLoading()
-    },
-    initChart (series) {
-      series.forEach((item) => {
-        item.areaStyle = {
-          color: {
-            type: 'linear',
-            x: 0,
-            y: 0,
-            x2: 0,
-            y2: 1,
-            colorStops: [{
-              offset: 0, color: 'rgb(35,191,154)' // 0% 处的颜色
-            }, {
-              offset: 1, color: 'rgb(255, 255, 255)' // 100% 处的颜色
-            }],
-            global: false
-          }
-        }
-      })
-      const option = {
-        title: { show: false },
-        grid: { top: 20, bottom: 20 },
-        tooltip: {
-          show: true,
-          trigger: 'axis',
-          extraCssText: 'z-index:3100;',
-          position: [100, 1],
-          textStyle: {
-            fontSize: 12
-          },
-          padding: 3,
-          formatter: function (param) {
-            let time = param[0].data[0]
-            time = bus.computeTimezone(time)
-            const date = new Date(time)
-            let hour = date.getHours()
-            hour = hour > 9 ? hour : '0' + hour // 加0补充为两位数字
-            let minute = date.getMinutes()
-            minute = minute > 9 ? minute : '0' + minute // 如果分钟小于10,则在前面加0补充为两位数字
-
-            let value = param[0].data[1]
-            if (value == '1') {
-              value = 'up'
-            } else {
-              value = 'down'
-            }
-            return [date.getFullYear(), date.getMonth() + 1, date.getDate()].join('/') + ' ' + [hour, minute].join(':') + '\n' + value
-          }
-        },
-        legend: { show: false },
-        xAxis: {
-          show: false,
-          type: 'time'
-        },
-        yAxis: {
-          type: 'value',
-          show: false
-        },
-        useUTC: false, // 使用本地时间
-        visualMap: {
-          show: false,
-          pieces: [{
-            gt: -0.5,
-            lt: 0.5,
-            color: '#d64f40'
-          }, {
-            gt: 0.6,
-            lt: 1.5,
-            color: '#50d050'
-          }]
-        },
-        series: series
-      }
-      const chart = echarts.init(document.querySelector('#littleChart'))
-      chart && chart.setOption(option)// 创建图表
-    },
-    timeFormat (val) {
-      return this.utcTimeToTimezoneStr(val)
-    }
-  },
-  mounted () {
-    this.firstLoad = false
-    setTimeout(() => {
-      this.ready = true
-    }, 300)
-  },
-  beforeDestroy () {
-    this.clearChart()
-  }
-}
-</script>
-<style>
-.colorFA901C{
-  color: #fa901c;
-}
-.endpoint-cell-left{
-  margin-right: 5px;
-}
-</style>

nezha-fronted/src/components/charts/chart-group.vue

@@ -1,313 +0,0 @@
-<template>
-  <div class="nz-chart-resize">
-    <div class="resize-shadow" ref="resizeShadow"></div>
-    <div class="resize-box resize-box-group" ref="resizeBox">
-      <div class="chart-url" :id="'chartUrlDiv'+chartIndex" @mouseenter="caretShow=true" @mouseleave="caretShow=false" >
-        <loading  :ref="'localLoading'+chartIndex"></loading>
-        <div class="clearfix chartTitle" :class="{'dragTitle':dragTitleShow}" :id="'chartTitle'+chartIndex">
-          <el-dropdown trigger="click" class="nz-chart-top" :key="'chartDropdown'+chartIndex"  v-clickoutside="clickos" :class="{'move-able':!isLock}">
-            <el-dropdown-menu style="display: none"></el-dropdown-menu>
-            <span class="el-dropdown-link chart-title">
-              <span class="chart-title-text">
-                <span @click="showListChange">
-                  <i class="nz-icon nz-icon-arrow-down" :class="showList?'':'is-active'"/>
-                </span>
-                {{chartData.name}}
-                <span v-show="!showList" class="collapse-content">({{chartData.children.length}} charts)</span>
-              </span>
-              <span class="chart-title-icon"    :class="{'visible':caretShow,'hidden':!caretShow}">
-                <span v-if="chartData.remark">
-                  <el-tooltip :content="chartData.remark" placement="top" effect="light">
-                     <i class="nz-icon nz-icon-info-normal"></i>
-                  </el-tooltip>
-                </span>
-                <span  v-has="'main_edit'" :title="$t('dashboard.panel.createChartTitle')" class="" @click="addGroupItemChart">
-                  <i class="nz-icon nz-icon-plus"></i>
-                </span>
-<!--                 <span  @click="showAllScreen" class="" :title="$t('dashboard.screen')">-->
-<!--                  <i class="nz-icon nz-icon-maxview"></i>-->
-<!--                 </span>-->
-                <span><i class="el-icon-more" @click.stop="dropdownMenuShow=!dropdownMenuShow"></i></span>
-
-              </span>
-<!--              <span class="chart-title-icon"  :class="{'visible':caretShow,'hidden':!caretShow}">-->
-<!--                <span  v-has="'main_edit'" :title="$t('dashboard.panel.createChartTitle')" class="" @click="addGroupItemChart">-->
-<!--                  <i class="nz-icon nz-icon-plus"></i>-->
-<!--                </span>-->
-<!--              </span>-->
-            </span>
-            <ul slot="dropdown" v-show="dropdownMenuShow"  :id="'dropdownUl'+chartIndex"  class="el-dropdown-menu nz-chart-dropdown"  style="" >
-              <li  @click="editChart" class="el-dropdown-menu__item">
-                <i class="nz-icon nz-icon-edit" style="font-size: 16px;"></i><span>{{$t('dashboard.edit')}}</span></li>
-              <li  v-has="'main_delete'" v-if="from !== 'chartTemp'" class="el-dropdown-menu__item" @click="removeChart">
-                <i class="nz-icon nz-icon-delete" style="font-size: 16px;"></i>{{$t('dashboard.delete')}}</li>
-              <li  v-has="'main_edit'"  v-if="from !== 'chartTemp'&&chartData.pid" class="el-dropdown-menu__item" @click="$emit('sync')">
-                <i class="nz-icon nz-icon-sync" style="font-size: 16px;"></i>{{$t('overall.syncChart')}}</li>
-<!--              <li  @click="duplicate" class="el-dropdown-menu__item" v-has="`${from}_chart_duplicate`">-->
-<!--                <i class="el-icon-copy-document" style="font-size: 16px;"></i>{{$t('dashboard.duplicate')}}</li>-->
-            </ul>
-          </el-dropdown>
-
-        </div>
-        <el-collapse-transition>
-          <div :id="'chartUrl'+chartIndex" class="mt-10 url-container" v-show="showList">
-            <chart-list-group :groupList.sync="chartData.children" :panel-lock="panelLock" :filterParent="filter"  :hasGroup="false" :from="from" ref="listGroup" :panelId="panelId" @on-edit-group-chart="editGroupItem" @on-duplicate-group-chart="duplicateGroupItem" @on-remove-chart="removeChartGroup" @moveGroupItem="moveGroupItem" @on-remove-group-chart="removeGroupItem" :groupId="chartData.id"></chart-list-group>
-          </div>
-        </el-collapse-transition>
-        <div style="position: absolute;width: 100%; top:calc(50% - 50px);text-align: center;" v-if="showStatic">
-          <div  :id="'staticContainer'+chartIndex" class="center-content"></div>
-        </div>
-      </div>
-<!--      <span class="vue-resizable-handle" @mousedown="startResize" v-if="!isLock"></span>-->
-    </div>
-  </div>
-</template>
-
-<script>
-import loading from '../common/loading'
-import chartListGroup from './chart-list-group'
-export default {
-  name: 'chartGroup',
-  components: {
-    loading: loading,
-    chartListGroup
-  },
-  props: {
-    chartData: {
-      type: Object
-    },
-    // 看板id
-    panelId: {
-      type: Number,
-      default: 0
-    },
-    editChartId: {
-      type: String,
-      default: 'editChartId'
-    },
-    chartIndex: {
-      type: Number,
-      default: 0
-    },
-    from: { type: String },
-    isLock: { type: Boolean, default: false },
-    filter: {},
-    panelLock: { type: Boolean, default: false },
-    dataList: {}
-  },
-  data () {
-    return {
-      data: {}, // 该图表信息,chartItem
-      unit: {},
-
-      images: '',
-      loading: Object,
-      panelIdInner: '', // 看板id=panelId,原写作chart,由set_data获取
-      firstLoad: false, // 是否第一次加载
-      screenModal: false,
-      firstShow: false, // 默认不显示操作按钮,
-      caretShow: false,
-      dragTitleShow: false,
-      dropdownMenuShow: false,
-      minHeight: 200,
-      chartSpaceHeight: 5, // top-border: 1,bottom-border: 1,padding-bottome:3
-      titleHeight: 38, // title-height:28,magrin-bottom:10
-      paddingBottom: 6,
-      divFirstShow: false,
-      showStatic: false,
-      showList: true
-    }
-  },
-  methods: {
-    startResize (e) {
-      const vm = this
-      this.$chartResizeTool.start(vm, this.chartData, e)
-    },
-    resize (chartItem) {
-      const chartBox = document.getElementById('chartUrlDiv' + this.chartIndex)
-      chartBox.querySelector('.url-container').style.height = `calc(100% - ${this.$chartResizeTool.titleHeight}px)`
-    },
-    setData (chartItem) {
-      this.data = chartItem
-    },
-    showLoad (chartItem) {
-      this.data = chartItem
-      this.panelIdInner = this.panelId
-      // 设置高度
-      this.$nextTick(() => {
-        this.resize(chartItem)
-      })
-      this.divFirstShow = true
-    },
-    setStaticContent: function () {
-      const that = this
-      this.$nextTick(() => {
-        const staticDiv = document.querySelector('#staticContainer' + this.chartIndex)
-        staticDiv.innerHTML = `<div class="content-static-url">${that.data.param.url}</div><div class="content-static-tip">${that.$t('dashboard.panel.chartForm.typeVal.url.staticTip')}</div>`
-        that.firstShow = true
-        that.endLoading()
-      })
-    },
-    setLoadFrame () {
-      const that = this
-      this.$nextTick(() => {
-        const iframe = document.querySelector('#urlContainer' + this.chartIndex)
-        // 处理兼容行问题
-        if (iframe.attachEvent) {
-          iframe.attachEvent('onload', function () {
-            // iframe加载完毕以后执行操作
-            that.firstShow = true
-            // console.log('iframe已加载完毕');
-            that.endLoading()
-          })
-        } else {
-          iframe.onload = function () {
-            // iframe加载完毕以后执行操作
-            that.firstShow = true
-            // console.log('iframe已加载完毕');
-            that.endLoading()
-          }
-        }
-        iframe.src = that.data.param.url
-      })
-    },
-    initDialog () {
-      this.startLoading('screen')
-      if (/\{\{.*?\}\}/g.test(this.data.param.url)) {
-        this.showStatic = true
-        this.setStaticContentFull()
-      } else {
-        this.showStatic = false
-        this.setLoadFrameFull()
-      }
-    },
-    startLoading (area) {
-      if (area === 'screen') {
-        this.$refs['localLoadingScreen' + this.chartIndex].startLoading()
-      } else {
-        this.$refs['localLoading' + this.chartIndex].startLoading()
-      }
-    },
-    endLoading (area) {
-      if (area === 'screen') {
-        this.$refs['localLoadingScreen' + this.chartIndex].endLoading()
-      } else {
-        this.$refs['localLoading' + this.chartIndex] && this.$refs['localLoading' + this.chartIndex].endLoading()
-      }
-    },
-    clearChart () {
-      this.data = {}
-    },
-    screenRefreshChart () {
-      ('urlContainerFull' + this.chartIndex).window.location.reload()
-    },
-    // 重新请求数据 刷新操作-local
-    refreshChart () {
-      this.dropdownMenuShow = false
-      // this.startLoading()
-      this.firstShow = false
-      this.$refs.listGroup.refresh()
-    },
-    // 编辑图表
-    editChart () {
-      this.dropdownMenuShow = false
-      this.$emit('on-edit-chart-block', this.data.id)
-    },
-    editGroupItem (chart) {
-      chart.isGroup = true
-      this.$emit('on-edit-group-chart', chart)
-    },
-    duplicateGroupItem (chart) {
-      chart.isGroup = true
-      this.$emit('on-duplicate-group-chart', chart)
-    },
-    // 删除该图表
-    removeChart () {
-      this.dropdownMenuShow = false
-      this.$emit('on-remove-chart-block', this.data.id)
-    },
-    removeGroupItem (chart) {
-      this.dropdownMenuShow = false
-      this.$emit('on-remove-group-chart', chart)
-    },
-    // 删除group 下的该图表
-    removeChartGroup (chart) {
-      this.$emit('on-remove-group-chart', chart)
-    },
-    addGroupItemChart () {
-      this.$emit('on-add-group-item-chart', this.data.id)
-    },
-    clickos () {
-      this.dropdownMenuShow = false
-    },
-    // 全屏查看
-    showAllScreen () {
-      this.dropdownMenuShow = false
-      this.screenModal = true
-    },
-    duplicate () {
-      this.dropdownMenuShow = false
-      this.$emit('on-duplicate-chart-block', this.data.id)
-    },
-    moveGroupItem (groupList) {
-      this.$emit('moveGroupItem', { groupId: this.data.id, children: groupList })
-    },
-    setLoadFrameFull () {
-      const that = this
-      this.$nextTick(() => {
-        const iframe = document.querySelector('#urlContainerFull' + this.chartIndex)
-
-        // 处理兼容行问题
-        if (iframe.attachEvent) {
-          iframe.attachEvent('onload', function () {
-            // iframe加载完毕以后执行操作
-            that.firstShow = true
-            that.endLoading('screen')
-          })
-        } else {
-          iframe.onload = function () {
-            // iframe加载完毕以后执行操作
-            that.firstShow = true
-            that.endLoading('screen')
-          }
-        }
-
-        iframe.src = this.data.param.url
-      })
-    },
-    setStaticContentFull: function () {
-      const that = this
-      this.$nextTick(() => {
-        const staticDiv = document.querySelector('#staticContainerFull' + this.chartIndex)
-        staticDiv.innerHTML = `<div class="content-static-url">${that.data.param.url}</div><div class="content-static-tip">${that.$t('dashboard.panel.chartForm.typeVal.url.staticTip')}</div>`
-        that.firstShow = true
-        that.endLoading('screen')
-      })
-    },
-    showListChange () {
-      this.showList = !this.showList
-      if (this.showList) {
-        this.$nextTick(() => {
-          this.$refs.listGroup.resize()
-        })
-      }
-      const scrollbarWrap = document.getElementById('dashboardScrollbar')
-      this.$emit('loadChartData', scrollbarWrap.scrollTop)
-    }
-  },
-  watch: {
-    dropdownMenuShow (n) {
-      this.$emit('dropmenu-change', n)
-    }
-  },
-  mounted () {
-    this.firstLoad = false
-    if (this.chartData.param) {
-      this.showList = !this.chartData.param.collapse
-    }
-  },
-  beforeDestroy () {
-    this.clearChart()
-  }
-}
-</script>

nezha-fronted/src/components/charts/chart-pie.vue

@@ -1,658 +0,0 @@
-<template>
-  <div class="nz-chart-resize">
-    <div class="resize-shadow" ref="resizeShadow"></div>
-    <div class="resize-box resize-box-echarts" ref="resizeBox">
-      <div class="chart-single-stat"  :id="'chartPieChart'+chartIndex" @mouseenter="caretShow=true" @mouseleave="caretShow=false">
-        <loading  :ref="'localLoading'+chartIndex"></loading>
-        <div class="clearfix chartTitle" :class="{'dragTitle':dragTitleShow}" :id="'chartTitle'+chartIndex">
-          <el-popover
-            v-if="isError"
-            :close-delay=10
-            placement="top-start"
-            trigger="hover"
-            popper-class="chart-error-popper">
-            <div >{{errorContent}}</div>
-            <span slot="reference" style="" 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>
-          <el-dropdown trigger="click" class="nz-chart-top" :key="'chartDropdown'+chartIndex"  v-clickoutside="clickos" :class="{'move-able':!isLock}">
-            <el-dropdown-menu style="display: none"></el-dropdown-menu>
-            <span class="el-dropdown-link chart-title">
-<!--              <span class="chart-title-text">{{chartData.name}}</span>-->
-              <span class="chart-title-text" v-on:mouseover="changeActive()" v-on:mouseout="removeActive()">{{chartData.name}}</span>
-              <transition  name="el-fade-in-linear">
-                <span v-show="chartDataList" class="chart-title-pit" >{{chartData.name}}</span>
-              </transition>
-              <span class="chart-title-icon"  :class="{'visible':caretShow,'hidden':!caretShow}">
-                <span v-if="chartData.remark">
-                  <el-tooltip :content="chartData.remark" placement="top" effect="light">
-                     <i class="nz-icon nz-icon-info-normal"></i>
-                  </el-tooltip>
-                </span>
-                <span  v-has="'main_edit'" :title="$t('dashboard.refresh')" class="" @click="refreshChart">
-                  <i class="nz-icon nz-icon-replay"></i>
-                </span>
-                 <span  @click="showAllScreen"  v-if="from !== 'chartTemp'" class="" :title="$t('dashboard.screen')">
-                  <i class="nz-icon nz-icon-maxview"></i>
-                 </span>
-                <span><i class="el-icon-more" @click.stop="dropdownMenuShow=!dropdownMenuShow"></i></span>
-              </span>
-            </span>
-            <ul slot="dropdown" v-show="dropdownMenuShow"  :id="'dropdownUl'+chartIndex"  class="el-dropdown-menu nz-chart-dropdown"  style="" >
-              <li  @click="editChart" class="el-dropdown-menu__item">
-                <i class="nz-icon nz-icon-edit" style="font-size: 16px;"></i><span>{{$t('dashboard.edit')}}</span></li>
-              <li  v-has="'main_delete'" class="el-dropdown-menu__item" @click="removeChart">
-                <i class="nz-icon nz-icon-delete" style="font-size: 16px;"></i>{{$t('dashboard.delete')}}</li>
-              <li  v-has="'main_add'" class="el-dropdown-menu__item" @click="duplicate">
-                <i class="el-icon-copy-document" style="font-size: 16px;"></i>{{$t('dashboard.duplicate')}}</li>
-              <li  v-has="'main_edit'"  v-if="from !== 'chartTemp'&&chartData.pid" class="el-dropdown-menu__item" @click="$emit('sync')">
-                <i class="nz-icon nz-icon-sync" style="font-size: 16px;"></i>{{$t('overall.syncChart')}}</li>
-            </ul>
-          </el-dropdown>
-        </div>
-        <div :id="'pie-chart-local-'+chartIndex" ref="pieChartLocal" style="display: flex;justify-content: center"></div>
-        <div class="chart-no-data" v-show="noData">No Data</div>
-        <div class='legend-container' ref="legendArea" v-show="firstShow">
-          <div v-for="(item, index) in legend" :title="item.alias?item.alias:item.name"  @click="clickLegend(item.name,index)" class="legend-item" :class="{'ft-gr':isGrey[index]}" :key="'legend_' + item.name+'_'+index">
-            <span class="legend-shape" :style="{background:(isGrey[index]?'#D3D3D3':item.color)}"></span><span class="legend-container__span">{{item.alias?item.alias:item.name}}</span>
-          </div>
-        </div>
-        <!--全屏-->
-        <el-dialog class="nz-dialog table-chart-dialog" :title="$t('dashboard.panel.view')" @opened="initChart('screen')"
-                   :visible.sync="screenModal"
-                   width="96%"  @close="screenModal = false" :modal-append-to-body="false">
-          <div slot="title">
-            <span class="nz-dialog-title">{{data.name}}</span>
-            <div class="float-right panel-calendar dialog-tool">
-              <pick-time :refresh-data-func="dateChange" v-model="searchTime" :use-chart-unit="false" ref="pickTime" style="height: 28px;" id="single-chart"></pick-time>
-            </div>
-          </div>
-          <div class="single-stat-screen-container"  >
-            <div :id="'pie-chart-screen-'+chartIndex" ref="pieChartScreen" style="width: 100%;height: 100%;"></div>
-            <div :id="'screenLegendArea'+chartIndex"   class="legend-container legend-container-screen">
-              <div v-for="(item, index) in legendScreen" :title="item.alias?item.alias:item.name"  @click="clickScreenLegend(item.name,index)" class="legend-item" :class="{'ft-gr':isGreyScreen[index]}"  :key="'legend_' + item.name+'_'+index">
-                <span class="legend-shape" :style="{background:(isGreyScreen[index]?'#D3D3D3':item.color)}"></span><span class="legend-container__span">{{item.alias?item.alias:item.name}}</span>
-                <br/><!--bgColorList[index]-->
-              </div>
-            </div>
-          </div>
-          <loading  :ref="'localLoadingScreen'+chartIndex"></loading>
-        </el-dialog>
-      </div>
-      <span class="vue-resizable-handle" @mousedown="startResize" v-if="!isLock"></span>
-    </div>
-  </div>
-</template>
-
-<script>
-import chartDataFormat from './chartDataFormat'
-import loading from '../common/loading'
-import * as echarts from 'echarts'
-import { getChart, setChart, getMousePoint } from '../common/js/common'
-import chartConfig from '../page/dashboard/overview/chartConfig'
-import { randomcolor } from '../common/js/radomcolor/randomcolor'
-import chartDataList from '@/components/common/mixin/chartDataList'
-import { chartResizeTool } from '@/components/common/js/tools'
-export default {
-  name: 'pieChart',
-  components: {
-    loading: loading
-  },
-  props: {
-    tempDom: Object,
-    chartData: {
-      type: Object
-    },
-    // 看板id
-    panelId: {
-      type: Number,
-      default: 0
-    },
-    editChartId: {
-      type: String,
-      default: 'editChartId'
-    },
-    chartIndex: {
-      type: Number,
-      default: 0
-    },
-    from: { type: String },
-    isLock: { type: Boolean, default: false }
-  },
-  mixins: [chartDataList],
-  data () {
-    return {
-      data: {}, // 该图表信息,chartItem
-      noData: false,
-      unit: {},
-      isError: false,
-      errorContent: '',
-      seriesItem: [], // 保存信息
-      seriesItemScreen: [], // 全屏数据
-      pieData: [],
-      mapping: '', // 满足valueMapping时 mapping的值
-      images: '',
-      loading: Object,
-      items: {
-        metric_name: [], // 每条数据列名称
-        xAxis: [],
-        theData: [] // series数据组
-      },
-      panelIdInner: '', // 看板id=panelId,原写作chart,由set_data获取
-      firstLoad: false, // 是否第一次加载
-      screenModal: false,
-      // 查询数据使用
-      filter: {
-        start_time: '',
-        end_time: ''
-      },
-      firstShow: false, // 默认不显示操作按钮,
-      caretShow: false,
-      dragTitleShow: false,
-      dropdownMenuShow: false,
-      divFirstShow: false,
-      searchTime: [new Date().setHours(new Date().getHours() - 1), new Date()], // 全屏显示的时间
-      oldSearchTime: [],
-      legend: [],
-      legendScreen: [],
-      isGrey: [],
-      isGreyScreen: [],
-      echart: null,
-      echartScreen: null,
-      bgColorList: [],
-      stableFilter: {},
-      option: {
-        title: {
-          show: false
-        },
-        legend: {
-          show: false
-        },
-        grid: {
-          left: 'center',
-          top: 'middle'
-        },
-        tooltip: {
-          trigger: 'item',
-          backgroundColor: 'rgba(221,228,237,1)',
-          borderColor: 'rgba(255,255,255,0)',
-          textStyle: {
-            color: '#000'
-          },
-          axisPointer: {
-            snap: false,
-            animation: false
-          },
-          extraCssText: 'z-index:1000;'
-        },
-        series: null,
-        stepWidth: null
-      }
-    }
-  },
-  created () {
-  },
-  computed: {},
-  watch: {
-    dropdownMenuShow (n) {
-      this.$emit('dropmenu-change', n)
-    }
-  },
-  methods: {
-    startResize (e) {
-      const vm = this
-      this.$chartResizeTool.start(vm, this.data, e, this.chartIndex)
-    },
-    startLoading (area) {
-      if (area === 'screen') {
-        this.$refs['localLoadingScreen' + this.chartIndex].startLoading()
-      } else {
-        // this.showLoading = true;
-        this.$refs['localLoading' + this.chartIndex].startLoading()
-      }
-    },
-    endLoading (area) {
-      if (area === 'screen') {
-        // this.showLoadingScreen = false;
-        this.$refs['localLoadingScreen' + this.chartIndex].endLoading()
-      } else {
-        // this.showLoading = false;
-        this.$refs['localLoading' + this.chartIndex] && this.$refs['localLoading' + this.chartIndex].endLoading()
-      }
-    },
-    showLoad (chartItem) {
-      this.$nextTick(() => {
-        const chartBox = document.getElementById('chartPieChart' + this.chartIndex)
-        let height = Math.floor(chartItem.height / this.$chartResizeTool.stepHeight) * this.$chartResizeTool.stepHeight// 图表高度四舍五入
-        if (height < this.$chartResizeTool.minHeight) {
-          height = this.$chartResizeTool.minHeight
-        }
-        chartBox.style.height = `${height - this.$chartResizeTool.chartBlankHeight}px`
-      })
-      this.clearData()
-      this.firstShow = false
-      this.$refs['localLoading' + this.chartIndex].startLoading()
-      this.divFirstShow = true
-    },
-    clearData () {
-      if (getChart(this.chartIndex)) {
-        getChart(this.chartIndex).clear()
-        // getChart(this.chartIndex).dispose();//关闭销毁实例 不再占用内存
-      }
-    },
-    screenRefreshChart () {
-      this.$refs.calendarPanel.timeChange(this.$refs.calendarPanel.nowTimeType, 'chart')
-    },
-    // 重新请求数据 刷新操作-local
-    refreshChart () {
-      this.dropdownMenuShow = false
-      const id = this.data.id
-      this.clearChart()
-      this.$refs['localLoading' + this.chartIndex].startLoading()
-      this.firstShow = false
-      this.$emit('on-refresh-data', id)
-    },
-    // 编辑图表
-    editChart () {
-      this.dropdownMenuShow = false
-      this.$emit('on-edit-chart-block', this.data.id)
-    },
-    // 删除该图表
-    removeChart () {
-      this.dropdownMenuShow = false
-      this.$emit('on-remove-chart-block', this.data.id)
-    },
-    // 全屏时间条件查询
-    dateChange (time) {
-      this.seriesItemScreen = []
-      this.seriePieChart = ''
-      this.startLoading('screen')
-      this.$emit('on-search-data', this.data.id, this.searchTime)
-    },
-    clickos () {
-      this.dropdownMenuShow = false
-    },
-    clearChart () {
-      this.data = {}
-    },
-    duplicate () {
-      this.dropdownMenuShow = false
-      this.$emit('on-duplicate-chart-block', this.data.id)
-    },
-    // 全屏查看
-    showAllScreen () {
-      this.dropdownMenuShow = false
-      this.searchTime = []
-      this.$set(this.searchTime, 0, this.oldSearchTime[0])
-      this.$set(this.searchTime, 1, this.oldSearchTime[1])
-      this.$refs.pickTime.$refs.timePicker.setCustomTime(this.stableFilter)
-      this.screenModal = true
-    },
-    resize (chartItem) {
-      if (getChart(this.chartIndex)) {
-        const divHeight = this.$refs.legendArea.offsetHeight
-        getChart(this.chartIndex).resize({ height: (this.data.height * this.stepWidth - divHeight - chartResizeTool.titleHeight - chartResizeTool.chartBlankHeight) })
-      }
-    },
-    // 设置数据, filter区分
-    setData (chartItem, seriesItem, panelId, filter, legend, area, errorMsg) {
-      if (filter) {
-        this.stableFilter = filter
-      }
-      if (errorMsg && errorMsg !== '') {
-        this.isError = true
-        this.errorContent = errorMsg
-      } else {
-        this.isError = false
-        this.errorContent = ''
-      }
-      if (seriesItem || seriesItem.data.length < 1) { // 0 为false
-        this.noData = false
-      } else {
-        this.noData = true
-      }
-      this.legend = legend
-      this.legendScreen = legend
-      legend && this.setColor(legend.length)
-      legend && legend.forEach((t, i) => { t.color = this.bgColorList[i] })
-
-      this.$set(this.option, 'color', this.bgColorList)
-      this.pieData = seriesItem
-      if (area === 'showFullScreen') { // 全屏按时间查询
-        this.data = chartItem
-        this.unit = chartDataFormat.getUnit(this.data.unit)
-        this.initChart('screen')
-        this.searchTime[0] = filter.start_time// 将列表的查询时间复制给全屏的查询时间
-        this.searchTime[1] = filter.end_time
-        this.endLoading('screen')
-      } else {
-        this.divFirstShow = true
-
-        this.firstShow = true // 展示操作按键
-
-        this.panelIdInner = panelId
-        this.data = chartItem
-        this.unit = chartDataFormat.getUnit(this.data.unit)
-        this.initChart('local')
-        if (filter) { // 保存数据,用于同步时间
-          this.searchTime[0] = filter.start_time// 将列表的查询时间复制给全屏的查询时间
-          this.searchTime[1] = filter.end_time
-          this.oldSearchTime[0] = this.searchTime[0]
-          this.oldSearchTime[1] = this.searchTime[1]
-        }
-        this.endLoading()
-      }
-    },
-    formatLegend (chartWidth, name) {
-      if (!name) {
-        return ''
-      }
-      // 计算宽度
-      const span = document.querySelector('.temp-dom')
-      span.textContent = name
-      const txtWidth = parseFloat(window.getComputedStyle(span).width) - this.tempDom.width
-      if (txtWidth < chartWidth) {
-        return name
-      } else {
-        const charNum = `${(chartWidth - 100) / (txtWidth / name.length)}`
-        return name.slice(0, charNum) + '...'
-      }
-    },
-    initChart: function (type) {
-      this.option.series = this.pieData
-      this.stepWidth = document.getElementById('listContainer').offsetWidth / 12
-      if (type == 'local') {
-        this.initLocal()
-      } else {
-        this.initScreen()
-      }
-    },
-    initLocal: function () {
-      const self = this
-      const dom = document.getElementById('pie-chart-local-' + this.chartIndex)
-      if (!this.echart) {
-        this.echart = echarts.init(dom)
-        setChart(this.chartIndex, this.echart)
-      }
-      if (this.legend) {
-        this.isGrey = []
-        this.legend.map((item, i) => {
-          const legend = {
-            name: item.name,
-            alias: item.alias,
-            color: item.color,
-            showText: this.formatLegend(dom.clientWidth, item.name)
-          }
-          self.isGrey.push(false)
-          return legend
-        })
-      }
-
-      this.$nextTick(() => {
-        const vm = this
-        setTimeout(function () {
-          const divHeight = self.$refs.legendArea ? self.$refs.legendArea.offsetHeight : 20
-          if (!self.chartData.height) {
-            getChart(self.chartIndex).resize({ height: (400 - divHeight - self.$chartResizeTool.titleHeight - self.$chartResizeTool.chartBlankHeight) })
-          } else {
-            getChart(self.chartIndex).resize({ height: (self.chartData.height * vm.stepWidth - divHeight - self.$chartResizeTool.titleHeight - self.$chartResizeTool.chartBlankHeight) })
-          }
-          self.option.tooltip && self.$set(self.option.tooltip, 'formatter', self.formatterFunc)
-          self.option.tooltip && self.$set(self.option.tooltip, 'position', function (point, params, dom, rect, size) {
-            dom.style.transform = 'translateZ(0)'
-            const windowWidth = window.innerWidth// 窗口宽度
-            const windowHeight = window.innerHeight// 窗口高度
-            const windowMouse = getMousePoint()
-            // 提示框位置
-            let x = 0
-            let y = 0
-            // 当前鼠标位置
-            const pointX = point[0]
-            const pointY = point[1]
-            // 外层div大小
-            const viewWidth = size.viewSize[0]
-            // const viewHeight = size.viewSize[1]
-            // 提示框大小
-            const boxWidth = size.contentSize[0]
-            const boxHeight = size.contentSize[1]
-            if (!self.screenModal) { // 本地显示
-              const chartDom = document.getElementById(self.chartData.name + '_' + self.chartData.id)
-              if (chartDom) {
-                // const parTop = document.getElementById(self.chartData.title + '_' + self.chartData.id).offsetTop
-                const parleft = document.getElementById(self.chartData.name + '_' + self.chartData.id).offsetLeft
-
-                const parent = document.getElementById('tableList')
-                // const parClientHeight = parent.clientHeight// 可视高度
-                const parClientWidth = parent.clientWidth// 可视宽度
-                // const parScrollTop = parent.scrollTop
-                if ((parClientWidth - pointX - parleft - 20) >= boxWidth) { // 说明鼠标在左边放不下提示框
-                  x = pointX + 10
-                } else {
-                  x = pointX - boxWidth
-                }
-                if (windowMouse.y + 50 + boxHeight < windowHeight) { // 说明鼠标上面放不下提示框
-                  y = pointY + 15
-                } else {
-                  y = pointY - boxHeight - 10
-                }
-                return [x, y]
-              } else { // preview page
-                if (windowMouse.x < (windowWidth / 2)) { // 说明鼠标在左边放不下提示框
-                  x = pointX + 15
-                } else {
-                  x = pointX - boxWidth - 15
-                }
-                if (windowMouse.y + 50 + boxHeight < windowHeight) { // 说明鼠标上面放不下提示框
-                  y = pointY + 15
-                } else {
-                  y = pointY - boxHeight - 10
-                }
-                return [x, y]
-              }
-            } else {
-              if (pointX < (viewWidth / 2)) { // 说明鼠标在左边放不下提示框
-                x = pointX + 10
-              } else {
-                x = pointX - boxWidth
-              }
-              if (windowMouse.y + 50 + boxHeight < windowHeight) { // 说明鼠标上面放不下提示框
-                y = pointY + 15
-              } else {
-                y = pointY - boxHeight - 10
-              }
-              return [x, y]
-            }
-          })
-          if (self.pieData[0].data.length > 0) {
-            getChart(self.chartIndex).clear()
-            getChart(self.chartIndex) && getChart(self.chartIndex).setOption(self.option)// 创建图表
-            self.noData = false
-          } else {
-            self.noData = true
-            self.option = chartConfig.getOption('noData')
-            getChart(self.chartIndex).clear()
-            getChart(self.chartIndex) && getChart(self.chartIndex).setOption(self.option)// 创建图表
-          }
-
-          self.$refs['localLoading' + self.chartIndex] && self.$refs['localLoading' + self.chartIndex].endLoading()
-          self.firstShow = true // 展示操作按键
-        }, 100)
-      })
-    },
-    initScreen: function () {
-      const self = this
-      const dom = document.getElementById('pie-chart-screen-' + this.chartIndex)
-      if (!this.echartScreen) {
-        this.echartScreen = echarts.init(dom)
-      }
-      if (this.legendScreen) {
-        this.isGreyScreen = []
-        this.legendScreen = this.legendScreen.map((item, i) => {
-          const legend = {
-            name: item.name,
-            alias: item.alias,
-            color: item.color,
-            showText: this.formatLegend(dom.clientWidth, item.name)
-          }
-          self.isGreyScreen.push(false)
-          return legend
-        })
-      }
-      if (self.echartScreen) {
-        self.echartScreen.clear()
-        self.showLegend = true
-        self.$refs['localLoadingScreen' + self.chartIndex].endLoading()
-      }
-      this.$nextTick(() => {
-        const legendDiv = document.getElementById('screenLegendArea' + self.chartIndex)
-        const divHeight = legendDiv.offsetHeight
-        const screenHeight = document.documentElement.clientHeight || document.body.clientHeight
-        const sumHeight = Math.floor(screenHeight * 0.99 * 0.8)// margin-top:1vh; dailog:80%
-        self.$refs.pieChartScreen.style.height = `${sumHeight - divHeight - 58}px`
-        self.echartScreen.resize({ height: (sumHeight - divHeight - 58) })// 图表的高度
-        setTimeout(function () {
-          if (self.pieData[0].data.length > 0) {
-            self.echartScreen && self.echartScreen.setOption(self.option)// 显示全屏界面
-            self.noData = false
-          } else {
-            self.noData = true
-            self.option = chartConfig.getOption('noData')
-            self.echartScreen && self.echartScreen.setOption(self.option)// 显示全屏界面
-          }
-          self.echartScreen.on('finished', function () {
-            const legendDiv = document.getElementById('screenLegendArea' + self.chartIndex)
-            const divHeight = legendDiv.offsetHeight
-            const screenHeight = document.documentElement.clientHeight || document.body.clientHeight
-            const sumHeight = Math.floor(screenHeight * 0.99 * 0.8)// margin-top:1vh; dailog:80%
-            self.$refs.pieChartScreen.style.height = `${sumHeight - divHeight - 58}px`
-            self.echartScreen.resize({ height: (sumHeight - divHeight - 58) })// 图表的高度
-            self.echartScreen.off('finished')
-          })
-        }, 100)
-      })
-    },
-    clickLegend (legendName, index) {
-      /* 点击legend
-        * 1.当前如果是全高亮状态，则全部置灰，只留被点击的legend高亮
-        * 2.如果点击的是唯一高亮的legend，则变为全高亮状态
-        * 3.否则只改变被点击的legend状态
-        * */
-      let highlightNum = 0 // 高亮数量
-      this.isGrey.forEach(g => {
-        if (!g) {
-          highlightNum++
-        }
-      })
-      const hasGrey = highlightNum < this.isGrey.length // 是否有置灰的
-      const curIsGrey = this.isGrey[index] // 当前legend的状态
-      const currentIsTheOnlyOneHighlight = !curIsGrey && highlightNum === 1 // 当前legend是否是目前唯一高亮的
-
-      const echart = getChart(this.chartIndex)
-      if (echart) {
-        if (!hasGrey) { // 1.除当前legend外全置灰
-          echart.dispatchAction({
-            type: 'legendInverseSelect'
-          })
-          echart.dispatchAction({
-            type: 'legendSelect',
-            name: legendName
-          })
-          this.isGrey = this.isGrey.map((g, i) => i !== index)
-        } else if (currentIsTheOnlyOneHighlight) { // 2.全高亮
-          echart.dispatchAction({
-            type: 'legendAllSelect'
-          })
-          this.isGrey = this.isGrey.map(() => false)
-        } else {
-          const type = curIsGrey ? 'legendSelect' : 'legendUnSelect'
-          echart.dispatchAction({
-            type: type,
-            name: legendName
-          })
-          this.$set(this.isGrey, index, !this.isGrey[index])
-        }
-      }
-    },
-    clickScreenLegend (legendName, index) {
-      /* 点击legend
-        * 1.当前如果是全高亮状态，则全部置灰，只留被点击的legend高亮
-        * 2.如果点击的是唯一高亮的legend，则变为全高亮状态
-        * 3.否则只改变被点击的legend状态
-        * */
-      let highlightNum = 0 // 高亮数量
-      this.isGreyScreen.forEach(g => {
-        if (!g) {
-          highlightNum++
-        }
-      })
-      const hasGrey = highlightNum < this.isGreyScreen.length // 是否有置灰的
-      const curIsGrey = this.isGreyScreen[index] // 当前legend的状态
-      const currentIsTheOnlyOneHighlight = !curIsGrey && highlightNum === 1 // 当前legend是否是目前唯一高亮的
-
-      const echart = this.echartScreen
-      if (echart) {
-        if (!hasGrey) { // 1.除当前legend外全置灰
-          echart.dispatchAction({
-            type: 'legendInverseSelect'
-          })
-          echart.dispatchAction({
-            type: 'legendSelect',
-            name: legendName
-          })
-          this.isGreyScreen = this.isGreyScreen.map((g, i) => i !== index)
-        } else if (currentIsTheOnlyOneHighlight) { // 2.全高亮
-          echart.dispatchAction({
-            type: 'legendAllSelect'
-          })
-          this.isGreyScreen = this.isGreyScreen.map(() => false)
-        } else {
-          const type = curIsGrey ? 'legendSelect' : 'legendUnSelect'
-          echart.dispatchAction({
-            type: type,
-            name: legendName
-          })
-          this.$set(this.isGreyScreen, index, !this.isGreyScreen[index])
-        }
-      }
-    },
-    setColor (colorNum) {
-      this.bgColorList = [
-        '#FF5200', '#3685FF', '#FF8D00', '#00DCA2',
-        '#954Eff', '#FFCB01', '#f65A96', '#00BFD0',
-        '#FF8BEA', '#4D7693', '#72577C', '#99D750',
-        '#DD8270', '#C475EE', '#7E83FB', '#7EB090',
-        '#FF9094', '#00CCF5', '#CF6684', '#4E55FF'
-      ]
-      for (let i = 0; i < colorNum - 19; i++) {
-        this.bgColorList.push(randomcolor())
-      }
-    },
-    formatterFunc: function (params, ticket, callback) {
-      const chartInfo = this.chartData
-      return `
-                <div>
-                    <div style="white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;  min-width: 150px; max-width: 600px; line-height: 18px; font-size: 14px;">
-                        <div style="max-width: 500px;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;margin-bottom: 5px">${this.legend[params.dataIndex].alias}</div>
-                        <div style="font-size:12px;display:flex;justify-content: space-between;">
-                            <div>value</div>
-                            <div>${chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(params.value, null, -1, 2)}</div>
-                        </div>
-                        <div style="font-size:12px;display:flex;justify-content: space-between;">
-                            <div>percent</div>
-                            <div>${params.percent}%</div>
-                        </div>
-                    </div>
-                </div>
-               `
-    }
-  },
-  mounted () {
-    this.firstLoad = false
-  },
-  beforeDestroy () {
-    this.clearChart()
-  }
-}
-</script>

nezha-fronted/src/components/charts/chart-single-stat.vue

@@ -1,482 +0,0 @@
-<template>
-  <div class="nz-chart-resize">
-    <div class="resize-shadow" ref="resizeShadow"></div>
-    <div class="resize-box resize-box-single" ref="resizeBox">
-      <div class="chart-single-stat"  :id="'chartSingleStatDiv'+chartIndex" @mouseenter="caretShow=true" @mouseleave="caretShow=false">
-        <loading  :ref="'localLoading'+chartIndex"></loading>
-        <div class="clearfix chartTitle" :class="{'dragTitle':dragTitleShow}" :id="'chartTitle'+chartIndex">
-          <el-popover
-            v-if="isError"
-            :close-delay=10
-            placement="top-start"
-            trigger="hover"
-            popper-class="chart-error-popper">
-            <div >{{errorContent}}</div>
-            <span slot="reference" style="" 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>
-          <el-dropdown trigger="click" class="nz-chart-top" :key="'chartDropdown'+chartIndex"  v-clickoutside="clickos" :class="{'move-able':!isLock}">
-            <el-dropdown-menu style="display: none"></el-dropdown-menu>
-            <span class="el-dropdown-link chart-title">
-              <span class="chart-title-text" v-on:mouseover="changeActive()" v-on:mouseout="removeActive()">{{chartData.name}}</span>
-              <transition  name="el-fade-in-linear">
-                <span v-show="chartDataList" class="chart-title-pit" >{{chartData.name}}</span>
-              </transition>
-              <span class="chart-title-icon" :class="{'visible':caretShow,'hidden':!caretShow}">
-                <span v-if="chartData.remark">
-                  <el-tooltip :content="chartData.remark" placement="top" effect="light">
-                     <i class="nz-icon nz-icon-info-normal"></i>
-                  </el-tooltip>
-                </span>
-                <span  v-has="'main_edit'" :title="$t('dashboard.refresh')" class="" @click="refreshChart">
-                  <i class="nz-icon nz-icon-replay"></i>
-                </span>
-                 <span  @click="showAllScreen"  v-if="from !== 'chartTemp'" class="" :title="$t('dashboard.screen')">
-                  <i class="nz-icon nz-icon-maxview"></i>
-                 </span>
-                <span><i class="el-icon-more" @click.stop="dropdownMenuShow=!dropdownMenuShow"></i></span>
-              </span>
-            </span>
-            <ul slot="dropdown" v-show="dropdownMenuShow"  :id="'dropdownUl'+chartIndex"  class="el-dropdown-menu nz-chart-dropdown"  style="" >
-              <li  @click="editChart" class="el-dropdown-menu__item">
-                <i class="nz-icon nz-icon-edit" style="font-size: 16px;"></i><span>{{$t('dashboard.edit')}}</span></li>
-              <li  v-has="'main_delete'" class="el-dropdown-menu__item" @click="removeChart">
-                <i class="nz-icon nz-icon-delete" style="font-size: 16px;"></i>{{$t('dashboard.delete')}}</li>
-              <li  v-has="'main_add'" class="el-dropdown-menu__item" @click="duplicate">
-                <i class="el-icon-copy-document" style="font-size: 16px;"></i>{{$t('dashboard.duplicate')}}</li>
-              <li  v-has="'main_edit'"  v-if="from !== 'chartTemp'&&chartData.pid" class="el-dropdown-menu__item" @click="$emit('sync')">
-                <i class="nz-icon nz-icon-sync" style="font-size: 16px;"></i>{{$t('overall.syncChart')}}</li>
-            </ul>
-          </el-dropdown>
-        </div>
-        <div class="mt-10 single-stat-container" v-cloak  v-show="firstShow" >
-          <div :id="'chartContainer'+chartIndex"  ref="chartContainer" :style="{color:mapping?mapping.color.text:'',background:mapping?mapping.color.bac:''}" class="single-stat-content">
-            {{serieSingleStat}}
-            <div class="chart-no-data" v-show="noData">No Data</div>
-          </div>
-        </div>
-        <!--全屏-->
-        <el-dialog class="nz-dialog table-chart-dialog" :title="$t('dashboard.panel.view')"
-                   :visible.sync="screenModal"
-                   width="96%"  @close="screenModal = false" :modal-append-to-body="false">
-          <div slot="title">
-            <span class="nz-dialog-title">{{data.name}}</span>
-            <div class="float-right panel-calendar dialog-tool">
-              <pick-time :refresh-data-func="dateChange" v-model="searchTime" :use-chart-unit="false" ref="pickTime" style="height: 28px;" id="single-chart"></pick-time>
-            </div>
-          </div>
-          <div class="single-stat-screen-container"  >
-            <div id="chartScreenContainer"  ref="chartScreenContainer" :style="{color:mapping?mapping.color.text:'',background:mapping?mapping.color.bac:''}" class="single-stat-content">
-              {{serieSingleStat}}
-              <div class="chart-no-data" v-show="noData">No Data</div>
-            </div>
-          </div>
-          <loading  :ref="'localLoadingScreen'+chartIndex"></loading>
-        </el-dialog>
-      </div>
-      <span class="vue-resizable-handle" @mousedown="startResize" v-if="!isLock"></span>
-    </div>
-  </div>
-</template>
-
-<script>
-import chartDataFormat from './chartDataFormat'
-import chartDataList from '@/components/common/mixin/chartDataList'
-
-export default {
-  name: 'chartSingleStat',
-  mixins: [chartDataList, chartDataList],
-  props: {
-    chartData: {
-      type: Object
-    },
-    // 看板id
-    panelId: {
-      type: Number,
-      default: 0
-    },
-    editChartId: {
-      type: String,
-      default: 'editChartId'
-    },
-    chartIndex: {
-      type: Number,
-      default: 0
-    },
-    from: { type: String },
-    isLock: { type: Boolean, default: false }
-  },
-  data () {
-    return {
-      data: {}, // 该图表信息,chartItem
-      noData: false,
-      unit: {},
-      isError: false,
-      errorContent: '',
-      seriesItem: [], // 保存信息
-      seriesItemScreen: [], // 全屏数据
-      serieSingleStat: '',
-      mapping: '', // 满足valueMapping时 mapping的值
-      images: '',
-      loading: Object,
-      items: {
-        metric_name: [], // 每条数据列名称
-        xAxis: [],
-        theData: [] // series数据组
-      },
-      panelIdInner: '', // 看板id=panelId,原写作chart,由set_data获取
-      firstLoad: false, // 是否第一次加载
-      screenModal: false,
-      // 查询数据使用
-      filter: {
-        start_time: '',
-        end_time: ''
-      },
-      stableFilter: {},
-      firstShow: false, // 默认不显示操作按钮,
-      caretShow: false,
-      dragTitleShow: false,
-      dropdownMenuShow: false,
-      divFirstShow: false,
-      searchTime: [new Date().setHours(new Date().getHours() - 1), new Date()], // 全屏显示的时间
-      oldSearchTime: []
-    }
-  },
-  created () {
-  },
-  computed: {},
-  watch: {
-    dropdownMenuShow (n) {
-      this.$emit('dropmenu-change', n)
-    }
-  },
-  methods: {
-    startResize (e) {
-      const vm = this
-      this.$chartResizeTool.start(vm, this.data, e)
-    },
-    dragResize: function (e) {
-      const diffWidth = 20 // 界面的宽度空白的地方的宽度
-      const chartBoxPadding = 22
-      const targetDiv = document.getElementById('chartSingleStatDiv' + this.chartIndex) // e.target.parentNode.parentNode;.children[0]
-      const targetDivContainer = document.getElementById('listContainer') // e.target.parentNode.parentNode;.children[0]
-      const maxWidth = targetDivContainer.offsetWidth - diffWidth
-      const minWidth = maxWidth / 12
-      const stepWidth = maxWidth / 12
-      const stepHeight = 10
-
-      // 得到点击时该容器的宽高：
-      const targetDivHeight = targetDiv.offsetHeight
-      const targetDivWidth = targetDiv.offsetWidth
-      const startY = e.clientY
-      const startX = e.clientX
-      const _this = this
-
-      document.onmousemove = function (e) {
-        e.preventDefault()
-        // 得到鼠标拖动的宽高距离：取绝对值
-        const distY = Math.abs(e.clientY - startY)
-        const distX = Math.abs(e.clientX - startX)
-
-        // 往上方拖动：
-        if (e.clientY < startY) {
-          targetDiv.style.height = targetDivHeight - distY + 'px'
-          // heightTmp = targetDivHeight-distY;
-        }
-        if (e.clientX < startX) {
-          targetDiv.style.width = targetDivWidth - distX + 'px'
-          // widthTmp = targetDivWidth-distX;
-        }
-        // 往下方拖动：
-        if (e.clientY > startY) {
-          targetDiv.style.height = (targetDivHeight + distY) + 'px'
-          // heightTmp = targetDivHeight+distY;
-        }
-        if (e.clientX > startX) {
-          targetDiv.style.width = (targetDivWidth + distX) + 'px'
-          // widthTmp = targetDivWidth+distX;
-        }
-
-        if (parseInt(targetDiv.style.height) <= _this.minHeight) {
-          targetDiv.style.height = _this.minHeight + 'px'
-          // heightTmp = _this.minHeight;
-        }
-
-        if (parseInt(targetDiv.style.width) >= maxWidth) {
-          targetDiv.style.width = maxWidth + 'px'
-          // widthTmp = maxWidth;
-        }
-        if (parseInt(targetDiv.style.width) <= minWidth) {
-          targetDiv.style.width = minWidth + 'px'
-          // widthTmp = minWidth;
-        }
-        // 调整表格大小
-        const containerHeight = parseInt(targetDiv.style.height)
-        const containerWidth = parseInt(targetDiv.style.width)
-        const chartBox = document.getElementsByClassName('chartBox')
-        chartBox[_this.chartIndex].style.width = (containerWidth + chartBoxPadding) + 'px'
-        // chartBox[_this.chartIndex].style.height = `${containerHeight}px`;
-        // 表格的高度
-        const chartSingleStatBox = document.getElementById('chartContainer' + _this.chartIndex)
-        chartSingleStatBox.style.height = `${containerHeight - _this.titleHeight}px`// -75-32+25
-      }
-
-      document.onmouseup = function () {
-        const targetDivHeightNew = parseInt(targetDiv.style.height)
-        // let targetDivHeightNew = heightTmp
-        const targetDivWidthNew = parseInt(targetDiv.style.width)
-        // let targetDivWidthNew = widthTmp;
-
-        const diffHeight = Math.abs(targetDivHeight - targetDivHeightNew)
-        if (targetDivHeight > targetDivHeightNew) {
-          const finalDiffHeight = Math.floor(diffHeight / stepHeight) * stepHeight
-          // alert('oldWidth='+targetDivHeight+"===diffHeight+"+diffHeight+"==finalDiffHeight="+finalDiffHeight);
-          targetDiv.style.height = (targetDivHeight - finalDiffHeight) + 'px'
-        }
-        if (targetDivHeight < targetDivHeightNew) {
-          const finalDiffHeight = Math.ceil(diffHeight / stepHeight) * stepHeight
-          targetDiv.style.height = (targetDivHeight + finalDiffHeight) + 'px'
-        }
-
-        let span = _this.data.span
-        if (targetDivWidth > targetDivWidthNew) {
-          span = Math.floor((targetDivWidthNew * 12) / maxWidth)
-          const finalWidth = Math.floor((targetDivWidthNew * 12) / maxWidth) * stepWidth
-          if ((finalWidth) < minWidth) {
-            targetDiv.style.width = minWidth + 'px'
-            span = 1
-          } else {
-            targetDiv.style.width = finalWidth + 'px'
-          }
-        }
-        if (targetDivWidth < targetDivWidthNew) {
-          span = Math.ceil((targetDivWidthNew * 12) / maxWidth)
-          const spanUnit = Math.ceil((targetDivWidthNew * 12) / maxWidth)
-          const finalWidth = spanUnit * stepWidth
-          if (finalWidth > maxWidth || spanUnit === 12) {
-            targetDiv.style.width = maxWidth + 'px'
-            span = 12
-          } else {
-            targetDiv.style.width = finalWidth + 'px'
-          }
-        }
-        // 调整表格大小
-        const containerHeight = parseInt(targetDiv.style.height)
-        const containerWidth = parseInt(targetDiv.style.width)
-
-        const chartBox = document.getElementsByClassName('chartBox')
-        chartBox[_this.chartIndex].style.width = (containerWidth + chartBoxPadding) + 'px'
-        // chartBox[_this.chartIndex].style.height = `${containerHeight}px`;
-        // 表格的高度
-        const chartSingleStatBox = document.getElementById('chartContainer' + _this.chartIndex)
-        chartSingleStatBox.style.height = `${containerHeight - _this.titleHeight}px`
-
-        const modifyParams = {
-          id: _this.data.id,
-          span: span,
-          height: (containerHeight + _this.chartSpaceHeight),
-          prev: parseInt(_this.data.prev),
-          next: parseInt(_this.data.next)
-        }
-        targetDiv.style.height = (Math.floor((containerHeight + _this.chartSpaceHeight) / 10) * 10 - _this.chartSpaceHeight) + 'px'// 图表实际渲染高度，采用个位数字四舍五入
-        _this.$put('panel/' + _this.panelIdInner + '/charts/modify', modifyParams).then(response => {
-          if (response.code === 200) {
-            // 更新当前图表数据
-            _this.data.span = span
-            _this.data.height = containerHeight + _this.chartSpaceHeight
-            _this.$emit('on-drag-chart', _this.data)
-          } else {
-            if (response.msg) {
-              _this.$message.error(response.msg)
-            } else if (response.error) {
-              _this.$message.error(response.error)
-            } else {
-              _this.$message.error(response)
-            }
-          }
-        })
-        document.onmousemove = null
-        document.onmouseup = null
-      }
-    },
-    startLoading (area) {
-      if (area === 'screen') {
-        this.$refs['localLoadingScreen' + this.chartIndex].startLoading()
-      } else {
-        // this.showLoading = true;
-        this.$refs['localLoading' + this.chartIndex].startLoading()
-      }
-    },
-    endLoading (area) {
-      if (area === 'screen') {
-        // this.showLoadingScreen = false;
-        this.$refs['localLoadingScreen' + this.chartIndex].endLoading()
-      } else {
-        // this.showLoading = false;
-        this.$refs['localLoading' + this.chartIndex] && this.$refs['localLoading' + this.chartIndex].endLoading()
-      }
-    },
-    showLoad (chartItem) {
-      this.$nextTick(() => {
-        const chartBox = document.getElementById('chartSingleStatDiv' + this.chartIndex)
-        let height = Math.floor(chartItem.height / 10) * 10// 图表高度四舍五入
-        if (height < this.minHeight) {
-          height = this.minHeight
-        }
-        chartBox.style.height = `${height - this.chartSpaceHeight}px`
-        const singleStatBox = document.getElementById('chartContainer' + this.chartIndex)
-        singleStatBox.style.height = `${height - this.chartSpaceHeight - this.titleHeight}px`// -75-32
-      })
-      this.startLoading()
-      this.divFirstShow = true
-    },
-    screenRefreshChart () {
-      this.$refs.calendarPanel.timeChange(this.$refs.calendarPanel.nowTimeType, 'chart')
-    },
-    // 重新请求数据 刷新操作-local
-    refreshChart () {
-      this.dropdownMenuShow = false
-      this.startLoading()
-      this.firstShow = false
-      this.$emit('on-refresh-data', this.data.id)
-    },
-    // 编辑图表
-    editChart () {
-      this.dropdownMenuShow = false
-      this.$emit('on-edit-chart-block', this.data.id)
-    },
-    // 删除该图表
-    removeChart () {
-      this.dropdownMenuShow = false
-      this.$emit('on-remove-chart-block', this.data.id)
-    },
-    // 全屏时间条件查询
-    dateChange (time) {
-      this.seriesItemScreen = []
-      this.serieSingleStat = ''
-      this.startLoading('screen')
-      this.$emit('on-search-data', this.data.id, this.searchTime)
-    },
-    clickos () {
-      this.dropdownMenuShow = false
-    },
-    clearChart () {
-      this.data = {}
-    },
-    duplicate () {
-      this.dropdownMenuShow = false
-      this.$emit('on-duplicate-chart-block', this.data.id)
-    },
-    // 全屏查看
-    showAllScreen () {
-      this.dropdownMenuShow = false
-      this.searchTime = []
-      this.$set(this.searchTime, 0, this.oldSearchTime[0])
-      this.$set(this.searchTime, 1, this.oldSearchTime[1])
-      this.$refs.pickTime.$refs.timePicker.setCustomTime(this.stableFilter)
-
-      this.seriesItemScreen = this.seriesItem
-      this.screenModal = true
-    },
-    resize (chartItem) {
-      document.querySelector('#chartSingleStatDiv' + this.chartIndex + ' .single-stat-container').style.height = `calc(100% - ${this.$chartResizeTool.titleHeight}px)`
-    },
-    // 设置数据, filter区分
-    setData (chartItem, seriesItem, panelId, filter, area, errorMsg) {
-      if (filter) {
-        this.stableFilter = filter
-      }
-      if (errorMsg && errorMsg !== '') {
-        this.isError = true
-        this.errorContent = errorMsg
-      } else {
-        this.isError = false
-        this.errorContent = ''
-      }
-      if (seriesItem || (typeof seriesItem === 'number' && seriesItem == 0) || (typeof seriesItem === 'string' && seriesItem != '')) { // 0 为false
-        this.noData = false
-      } else {
-        this.noData = true
-      }
-
-      if (area === 'showFullScreen') { // 全屏按时间查询
-        this.data = chartItem
-        this.unit = chartDataFormat.getUnit(this.data.unit)
-        if (Number(seriesItem)) {
-          const singleStatTmp = parseFloat(Number(seriesItem).toFixed(2))// parseFloat ：如果没有小数点，或者小数点后都是零，parseFloat() 会返回整数。
-          if (chartItem.param.valueMapping && chartItem.param.valueMapping.type) {
-            const type = chartItem.param.valueMapping.type
-            const mappings = chartItem.param.valueMapping.mapping ? chartItem.param.valueMapping.mapping : []
-            let mapping
-            if (type == 'value') {
-              mapping = mappings.find(item => { return item.value == singleStatTmp })
-            } else {
-              mapping = mappings.find(item => { return item.from <= singleStatTmp && item.to >= singleStatTmp })
-            }
-            this.mapping = mapping
-            if (this.mapping && !this.mapping.color) {
-              this.mapping.color = { bac: '#fff', text: '#000' }
-            }
-            this.serieSingleStat = mapping ? mapping.text.replace('{{value}}', singleStatTmp).replace('{{name}}', chartItem.elements[0].legend) : chartDataFormat.getUnit(chartItem.unit ? chartItem.unit : 2).compute(singleStatTmp, null, 2)
-          } else {
-            this.serieSingleStat = chartDataFormat.getUnit(chartItem.unit ? chartItem.unit : 2).compute(singleStatTmp, null, 2)
-          }
-        } else {
-          this.serieSingleStat = seriesItem
-        }
-        this.searchTime[0] = filter.start_time// 将列表的查询时间复制给全屏的查询时间
-        this.searchTime[1] = filter.end_time
-        this.endLoading('screen')
-      } else {
-        this.$nextTick(() => {
-          this.resize(chartItem)
-        })
-        this.divFirstShow = true
-
-        this.firstShow = true // 展示操作按键
-
-        this.panelIdInner = panelId
-        this.data = chartItem
-        this.unit = chartDataFormat.getUnit(this.data.unit)
-        if (Number(seriesItem)) {
-          const singleStatTmp = parseFloat(Number(seriesItem).toFixed(2))// parseFloat ：如果没有小数点，或者小数点后都是零，parseFloat() 会返回整数。
-          if (chartItem.param.valueMapping && chartItem.param.valueMapping.type) {
-            const type = chartItem.param.valueMapping.type
-            const mappings = chartItem.param.valueMapping.mapping ? chartItem.param.valueMapping.mapping : []
-            let mapping
-            if (type == 'value') {
-              mapping = mappings.find(item => { return item.value == singleStatTmp })
-            } else {
-              mapping = mappings.find(item => { return item.from <= singleStatTmp && item.to >= singleStatTmp })
-            }
-            this.mapping = mapping
-            if (this.mapping && !this.mapping.color) {
-              this.mapping.color = { bac: '#fff', text: '#000' }
-            }
-            this.serieSingleStat = mapping ? mapping.text.replace('{{value}}', singleStatTmp).replace('{{name}}', chartItem.elements[0].legend) : chartDataFormat.getUnit(chartItem.unit ? chartItem.unit : 2).compute(singleStatTmp, null, 2)
-          } else {
-            this.serieSingleStat = chartDataFormat.getUnit(chartItem.unit ? chartItem.unit : 2).compute(singleStatTmp, null, 2)
-          }
-        } else {
-          this.serieSingleStat = seriesItem
-        }
-        if (filter) { // 保存数据,用于同步时间
-          this.searchTime[0] = filter.start_time// 将列表的查询时间复制给全屏的查询时间
-          this.searchTime[1] = filter.end_time
-          this.oldSearchTime[0] = this.searchTime[0]
-          this.oldSearchTime[1] = this.searchTime[1]
-        }
-        this.endLoading()
-      }
-    }
-  },
-  mounted () {
-    this.firstLoad = false
-  },
-  beforeDestroy () {
-    this.clearChart()
-  }
-}
-</script>

nezha-fronted/src/components/charts/chart-url.vue

@@ -1,290 +0,0 @@
-<template>
-  <div class="nz-chart-resize">
-    <div class="resize-shadow" ref="resizeShadow"></div>
-    <div class="resize-box resize-box-url" ref="resizeBox">
-      <div class="chart-url" :id="'chartUrlDiv'+chartIndex" @mouseenter="caretShow=true" @mouseleave="caretShow=false" >
-        <loading  :ref="'localLoading'+chartIndex"></loading>
-        <div class="clearfix chartTitle" :class="{'dragTitle':dragTitleShow}" :id="'chartTitle'+chartIndex">
-          <el-dropdown trigger="click" class="nz-chart-top" :key="'chartDropdown'+chartIndex"  v-clickoutside="clickos" :class="{'move-able':!isLock}">
-            <el-dropdown-menu style="display: none"></el-dropdown-menu>
-            <span class="el-dropdown-link chart-title">
-<!--              <span class="chart-title-text">{{chartData.name}}</span>-->
-              <span class="chart-title-text" v-on:mouseover="changeActive()" v-on:mouseout="removeActive()">{{chartData.name}}</span>
-              <transition  name="el-fade-in-linear">
-                <span v-show="chartDataList" class="chart-title-pit" >{{chartData.name}}</span>
-              </transition>
-              <span class="chart-title-icon"  :class="{'visible':caretShow,'hidden':!caretShow}">
-                <span v-if="chartData.remark">
-                  <el-tooltip :content="chartData.remark" placement="top" effect="light">
-                     <i class="nz-icon nz-icon-info-normal"></i>
-                  </el-tooltip>
-                </span>
-                <span  v-has="'main_edit'" :title="$t('dashboard.refresh')" class="" @click="refreshChart">
-                  <i class="nz-icon nz-icon-replay"></i>
-                </span>
-                 <span  @click="showAllScreen"  v-if="from !== 'chartTemp'" class="" :title="$t('dashboard.screen')">
-                  <i class="nz-icon nz-icon-maxview"></i>
-                 </span>
-                <span><i class="el-icon-more" @click.stop="dropdownMenuShow=!dropdownMenuShow"></i></span>
-              </span>
-            </span>
-            <ul slot="dropdown" v-show="dropdownMenuShow"  :id="'dropdownUl'+chartIndex"  class="el-dropdown-menu nz-chart-dropdown"  style="" >
-              <li  @click="editChart" class="el-dropdown-menu__item">
-                <i class="nz-icon nz-icon-edit" style="font-size: 16px;"></i><span>{{$t('dashboard.edit')}}</span></li>
-              <li  v-has="'main_delete'" class="el-dropdown-menu__item" @click="removeChart">
-                <i class="nz-icon nz-icon-delete" style="font-size: 16px;"></i>{{$t('dashboard.delete')}}</li>
-              <li  v-has="'main_add'" class="el-dropdown-menu__item" @click="duplicate">
-                <i class="el-icon-copy-document" style="font-size: 16px;"></i>{{$t('dashboard.duplicate')}}</li>
-              <li  v-has="'main_edit'"  v-if="from !== 'chartTemp'&&chartData.pid" class="el-dropdown-menu__item" @click="$emit('sync')">
-                <i class="nz-icon nz-icon-sync" style="font-size: 16px;"></i>{{$t('overall.syncChart')}}</li>
-            </ul>
-          </el-dropdown>
-
-        </div>
-        <div :id="'chartUrl'+chartIndex" class="mt-10 url-container"  v-show="firstShow" >
-          <iframe :id="'urlContainer'+chartIndex" frameborder="0" width="100%" height="100%" name="showHere" scrolling=auto v-if="!showStatic"
-                  style="z-index:5000;padding-bottom:6px;"
-          ></iframe>
-        </div>
-        <div style="position: absolute;width: 100%; top:calc(50% - 50px);text-align: center;" v-if="showStatic">
-          <div  :id="'staticContainer'+chartIndex" class="center-content"></div>
-        </div>
-        <!--全屏-->
-        <el-dialog class="nz-dialog table-chart-dialog" :title="$t('dashboard.panel.view')"  :visible.sync="screenModal" width="96%" @opened="initDialog"  @close="screenModal = false" >
-          <div slot="title">
-            <span class="nz-dialog-title">{{chartData.name}}</span>
-          </div>
-          <iframe :id="'urlContainerFull'+chartIndex"  frameborder="0" width="100%" height="100%" name="showHereFull" scrolling=auto v-if="!showStatic"
-                  style="z-index:5000;padding-bottom:6px;"
-          ></iframe>
-          <div style="position: absolute;width: 100%; top:calc(50% - 100px);text-align: center;" v-if="showStatic">
-            <div  :id="'staticContainerFull'+chartIndex" class="center-content"></div>
-          </div>
-          <loading  :ref="'localLoadingScreen'+chartIndex"></loading>
-        </el-dialog>
-      </div>
-      <span class="vue-resizable-handle" @mousedown="startResize" v-if="!isLock"></span>
-    </div>
-  </div>
-</template>
-
-<script>
-import loading from '../common/loading'
-import chartDataList from '@/components/common/mixin/chartDataList'
-
-export default {
-  name: 'chartUrl',
-  components: {
-    loading: loading
-  },
-  props: {
-    chartData: {
-      type: Object
-    },
-    // 看板id
-    panelId: {
-      type: Number,
-      default: 0
-    },
-    editChartId: {
-      type: String,
-      default: 'editChartId'
-    },
-    chartIndex: {
-      type: Number,
-      default: 0
-    },
-    from: { type: String },
-    isLock: { type: Boolean, default: false }
-  },
-  mixins: [chartDataList],
-  data () {
-    return {
-      data: {}, // 该图表信息,chartItem
-      unit: {},
-
-      images: '',
-      loading: Object,
-      panelIdInner: '', // 看板id=panelId,原写作chart,由set_data获取
-      firstLoad: false, // 是否第一次加载
-      screenModal: false,
-      firstShow: false, // 默认不显示操作按钮,
-      caretShow: false,
-      dragTitleShow: false,
-      dropdownMenuShow: false,
-      minHeight: 200,
-      chartSpaceHeight: 5, // top-border: 1,bottom-border: 1,padding-bottome:3
-      titleHeight: 38, // title-height:28,magrin-bottom:10
-      paddingBottom: 6,
-      divFirstShow: false,
-      showStatic: false
-    }
-  },
-  methods: {
-    startResize (e) {
-      const vm = this
-      this.$chartResizeTool.start(vm, this.chartData, e)
-    },
-    resize (chartItem) {
-      const chartBox = document.getElementById('chartUrlDiv' + this.chartIndex)
-      chartBox.querySelector('.url-container').style.height = `calc(100% - ${this.$chartResizeTool.titleHeight}px)`
-    },
-    showLoad (chartItem) {
-      this.data = chartItem
-      this.panelIdInner = this.panelId
-      // 设置高度
-      this.$nextTick(() => {
-        this.resize(chartItem)
-      })
-      this.startLoading()
-
-      if (/\{\{.*?\}\}/g.test(this.data.param.url)) {
-        this.showStatic = true
-        this.setStaticContent()
-      } else {
-        this.showStatic = false
-        this.setLoadFrame()
-      }
-      this.divFirstShow = true
-    },
-    setStaticContent: function () {
-      const that = this
-      this.$nextTick(() => {
-        const staticDiv = document.querySelector('#staticContainer' + this.chartIndex)
-        staticDiv.innerHTML = `<div class="content-static-url">${that.data.param.url}</div><div class="content-static-tip">${that.$t('dashboard.panel.chartForm.typeVal.url.staticTip')}</div>`
-        that.firstShow = true
-        that.endLoading()
-      })
-    },
-    setLoadFrame () {
-      const that = this
-      this.$nextTick(() => {
-        const iframe = document.querySelector('#urlContainer' + this.chartIndex)
-        // 处理兼容行问题
-        if (iframe.attachEvent) {
-          iframe.attachEvent('onload', function () {
-            // iframe加载完毕以后执行操作
-            that.firstShow = true
-            // console.log('iframe已加载完毕');
-            that.endLoading()
-          })
-        } else {
-          iframe.onload = function () {
-            // iframe加载完毕以后执行操作
-            that.firstShow = true
-            // console.log('iframe已加载完毕');
-            that.endLoading()
-          }
-        }
-        iframe.src = that.data.param.url
-      })
-    },
-    initDialog () {
-      this.startLoading('screen')
-      if (/\{\{.*?\}\}/g.test(this.data.param.url)) {
-        this.showStatic = true
-        this.setStaticContentFull()
-      } else {
-        this.showStatic = false
-        this.setLoadFrameFull()
-      }
-    },
-    startLoading (area) {
-      if (area === 'screen') {
-        this.$refs['localLoadingScreen' + this.chartIndex].startLoading()
-      } else {
-        this.$refs['localLoading' + this.chartIndex].startLoading()
-      }
-    },
-    endLoading (area) {
-      if (area === 'screen') {
-        this.$refs['localLoadingScreen' + this.chartIndex].endLoading()
-      } else {
-        this.$refs['localLoading' + this.chartIndex] && this.$refs['localLoading' + this.chartIndex].endLoading()
-      }
-    },
-    clearChart () {
-      this.data = {}
-    },
-    screenRefreshChart () {
-      ('urlContainerFull' + this.chartIndex).window.location.reload()
-    },
-    // 重新请求数据 刷新操作-local
-    refreshChart () {
-      this.dropdownMenuShow = false
-      this.startLoading()
-      this.firstShow = false
-      const iframe = document.querySelector('#urlContainer' + this.chartIndex)
-      iframe.src = ''
-      iframe.src = this.data.param.url
-    },
-    // 编辑图表
-    editChart () {
-      this.dropdownMenuShow = false
-      this.$emit('on-edit-chart-block', this.data.id)
-    },
-    // 删除该图表
-    removeChart () {
-      this.dropdownMenuShow = false
-      this.$emit('on-remove-chart-block', this.data.id)
-    },
-    clickos () {
-      this.dropdownMenuShow = false
-    },
-    // 全屏查看
-    showAllScreen () {
-      this.dropdownMenuShow = false
-      this.screenModal = true
-    },
-    duplicate () {
-      this.dropdownMenuShow = false
-      this.$emit('on-duplicate-chart-block', this.data.id)
-    },
-    setLoadFrameFull () {
-      const that = this
-      this.$nextTick(() => {
-        const iframe = document.querySelector('#urlContainerFull' + this.chartIndex)
-
-        // 处理兼容行问题
-        if (iframe.attachEvent) {
-          iframe.attachEvent('onload', function () {
-            // iframe加载完毕以后执行操作
-            that.firstShow = true
-            // console.log('iframe已加载完毕');
-            that.endLoading('screen')
-          })
-        } else {
-          iframe.onload = function () {
-            // iframe加载完毕以后执行操作
-            that.firstShow = true
-            // console.log('iframe已加载完毕');
-            that.endLoading('screen')
-          }
-        }
-
-        iframe.src = this.data.param.url
-      })
-    },
-    setStaticContentFull: function () {
-      const that = this
-      this.$nextTick(() => {
-        const staticDiv = document.querySelector('#staticContainerFull' + this.chartIndex)
-        staticDiv.innerHTML = `<div class="content-static-url">${that.data.param.url}</div><div class="content-static-tip">${that.$t('dashboard.panel.chartForm.typeVal.url.staticTip')}</div>`
-        that.firstShow = true
-        that.endLoading('screen')
-      })
-    }
-  },
-  watch: {
-    dropdownMenuShow (n) {
-      this.$emit('dropmenu-change', n)
-    }
-  },
-  mounted () {
-    this.firstLoad = false
-  },
-  beforeDestroy () {
-    this.clearChart()
-  }
-}
-</script>

nezha-fronted/src/components/charts/diagram-chart.vue

@@ -1,225 +0,0 @@
-<template>
-  <div class="nz-chart-resize">
-    <div class="resize-shadow" ref="resizeShadow"></div>
-    <div class="resize-box resize-box-single" ref="resizeBox">
-      <div class="chart-text"  :id="'chartSingleStatDiv'+chartIndex" @mouseenter="caretShow=true" @mouseleave="caretShow=false">
-        <loading  :ref="'localLoading'+chartIndex"></loading>
-        <div class="clearfix chartTitle" :class="{'dragTitle':dragTitleShow}" :id="'chartTitle'+chartIndex">
-          <el-dropdown trigger="click" class="nz-chart-top" :key="'chartDropdown'+chartIndex"  v-clickoutside="clickos" :class="{'move-able':!isLock}">
-            <el-dropdown-menu style="display: none"></el-dropdown-menu>
-            <span class="el-dropdown-link chart-title">
-<!--              <span class="chart-title-text">{{chartData.name}}</span>-->
-              <span class="chart-title-text" v-on:mouseover="changeActive()" v-on:mouseout="removeActive()">{{chartData.name}}</span>
-              <transition  name="el-fade-in-linear">
-                <span v-show="chartDataList" class="chart-title-pit" >{{chartData.name}}</span>
-              </transition>
-              <span class="chart-title-icon"  :class="{'visible':caretShow,'hidden':!caretShow}">
-                <span v-if="chartData.remark">
-                  <el-tooltip :content="chartData.remark" placement="top" effect="light">
-                     <i class="nz-icon nz-icon-info-normal"></i>
-                  </el-tooltip>
-                </span>
-                <span  v-has="'main_edit'" :title="$t('dashboard.refresh')" class="" @click="refreshChart">
-                  <i class="nz-icon nz-icon-replay"></i>
-                </span>
-                 <span  @click="showAllScreen"  v-if="from !== 'chartTemp'" class="" :title="$t('dashboard.screen')">
-                  <i class="nz-icon nz-icon-maxview"></i>
-                 </span>
-                <span><i class="el-icon-more" @click.stop="dropdownMenuShow=!dropdownMenuShow"></i></span>
-              </span>
-            </span>
-            <ul slot="dropdown" v-show="dropdownMenuShow"  :id="'dropdownUl'+chartIndex"  class="el-dropdown-menu nz-chart-dropdown"  style="" >
-              <li  @click="editChart" class="el-dropdown-menu__item">
-                <i class="nz-icon nz-icon-edit" style="font-size: 16px;"></i><span>{{$t('dashboard.edit')}}</span></li>
-              <li  v-has="'main_delete'" class="el-dropdown-menu__item" @click="removeChart">
-                <i class="nz-icon nz-icon-delete" style="font-size: 16px;"></i>{{$t('dashboard.delete')}}</li>
-              <li  v-has="'main_add'" class="el-dropdown-menu__item" @click="duplicate">
-                <i class="el-icon-copy-document" style="font-size: 16px;"></i>{{$t('dashboard.duplicate')}}</li>
-              <li  v-has="'main_edit'"  v-if="from !== 'chartTemp'&&chartData.pid" class="el-dropdown-menu__item" @click="$emit('sync')">
-                <i class="nz-icon nz-icon-sync" style="font-size: 16px;"></i>{{$t('overall.syncChart')}}</li>
-            </ul>
-          </el-dropdown>
-        </div>
-        <div class="mt-10 rich-text-container" v-cloak  v-show="firstShow" >
-          <div :id="'chartContainer'+chartIndex"  ref="chartContainer" class="text-content"  >
-            <diagram style="height: 100%;width: 100%" :topoData="data.param.topo" :fromChart="true" :topologyIndexF="chartData.id" :isPanel="true" ref="diagram" :chartInfo="chartData"/>
-          </div>
-        </div>
-        <!--全屏-->
-        <el-dialog class="nz-dialog table-chart-dialog" :title="$t('dashboard.panel.view')"
-                   :visible.sync="screenModal"
-                   width="96%"  @close="screenModal = false" :modal-append-to-body="false">
-          <div slot="title">
-            <span class="nz-dialog-title">{{data.name}}</span>
-          </div>
-          <div class="rich-text-screen-container"  >
-            <div id="chartScreenContainer"  ref="chartScreenContainer" class="text-content" >
-              <diagram :topoData="data.param.topo" :fromChart="true" :isScreen="true" :topologyIndexF="chartData.id + '-' + 'chartIndex'"/>
-            </div>
-          </div>
-          <loading  :ref="'localLoadingScreen'+chartIndex"></loading>
-        </el-dialog>
-      </div>
-      <span class="vue-resizable-handle" @mousedown="startResize" v-if="!isLock" :fromChart="true" :chartInfo="chartData"></span>
-    </div>
-  </div>
-</template>
-
-<script>
-import loading from '../common/loading'
-import 'quill/dist/quill.snow.css'
-import diagram from '@/components/common/ChartDiagram/diagram'
-import chartDataList from '@/components/common/mixin/chartDataList'
-export default {
-  name: 'diagram-chart',
-  components: {
-    loading: loading,
-    diagram
-  },
-  props: {
-    chartData: {
-      type: Object
-    },
-    // 看板id
-    panelId: {
-      type: Number,
-      default: 0
-    },
-    editChartId: {
-      type: String,
-      default: 'editChartId'
-    },
-    chartIndex: {
-      type: Number,
-      default: 0
-    },
-    from: { type: String },
-    isLock: { type: Boolean, default: false }
-  },
-  mixins: [chartDataList],
-  data () {
-    return {
-      data: {
-        param: {
-          topo: {}
-        }
-      }, // 该图表信息,chartItem
-      noData: false,
-      unit: {},
-      text: '', // 保存信息
-      screenText: '', // 全屏数据
-      loading: Object,
-      panelIdInner: '', // 看板id=panelId,原写作chart,由set_data获取
-      firstLoad: false, // 是否第一次加载
-      screenModal: false,
-      firstShow: false, // 默认不显示操作按钮,
-      caretShow: false,
-      dragTitleShow: false,
-      dropdownMenuShow: false,
-      divFirstShow: false
-    }
-  },
-  created () {
-  },
-  computed: {},
-  watch: {
-    dropdownMenuShow (n) {
-      this.$emit('dropmenu-change', n)
-    }
-  },
-  methods: {
-    startResize (e) {
-      const vm = this
-      this.$chartResizeTool.start(vm, this.data, e)
-    },
-    startLoading (area) {
-      if (area === 'screen') {
-        this.$refs['localLoadingScreen' + this.chartIndex].startLoading()
-      } else {
-        // this.showLoading = true;
-        this.$refs['localLoading' + this.chartIndex].startLoading()
-      }
-    },
-    endLoading (area) {
-      if (area === 'screen') {
-        // this.showLoadingScreen = false;
-        this.$refs['localLoadingScreen' + this.chartIndex].endLoading()
-      } else {
-        // this.showLoading = false;
-        this.$refs['localLoading' + this.chartIndex] && this.$refs['localLoading' + this.chartIndex].endLoading()
-      }
-    },
-    showLoad (chartItem) {
-      this.$nextTick(() => {
-        const chartBox = document.getElementById('chartSingleStatDiv' + this.chartIndex)
-        let height = Math.floor(chartItem.height / 10) * 10// 图表高度四舍五入
-        if (height < this.minHeight) {
-          height = this.minHeight
-        }
-        chartBox.style.height = `${height - this.chartSpaceHeight}px`
-        const singleStatBox = document.getElementById('chartContainer' + this.chartIndex)
-        singleStatBox.style.height = `${height - this.chartSpaceHeight - this.titleHeight}px`// -75-32
-      })
-      this.startLoading()
-      this.divFirstShow = true
-    },
-    // 重新请求数据 刷新操作-local
-    refreshChart () {
-      this.dropdownMenuShow = false
-      this.startLoading()
-      this.firstShow = false
-      this.$emit('on-refresh-data', this.data.id)
-    },
-    // 编辑图表
-    editChart () {
-      this.dropdownMenuShow = false
-      this.$emit('on-edit-chart-block', this.data.id)
-    },
-    // 删除该图表
-    removeChart () {
-      this.dropdownMenuShow = false
-      this.$emit('on-remove-chart-block', this.data.id)
-    },
-    clickos () {
-      this.dropdownMenuShow = false
-    },
-    clearChart () {
-      this.data = {}
-    },
-    duplicate () {
-      this.dropdownMenuShow = false
-      this.$emit('on-duplicate-chart-block', this.data.id)
-    },
-    // 全屏查看
-    showAllScreen () {
-      this.dropdownMenuShow = false
-      this.screenModal = true
-    },
-    resize (chartItem) {
-      document.querySelector('#chartSingleStatDiv' + this.chartIndex + ' .rich-text-container').style.height = `calc(100% - ${this.$chartResizeTool.titleHeight}px)`
-      this.$refs.diagram.winResize()
-    },
-    // 设置数据, filter区分
-    setData (chartItem, seriesItem, panelId, filter, area) {
-      this.$nextTick(() => {
-        this.resize(chartItem)
-      })
-      this.divFirstShow = true
-
-      this.firstShow = true // 展示操作按键
-
-      this.panelIdInner = panelId
-      this.data = chartItem
-      this.text = chartItem.param.text
-      this.screenText = chartItem.param.text
-      this.endLoading()
-    }
-  },
-  mounted () {
-    this.firstLoad = false
-  },
-  beforeDestroy () {
-    this.clearChart()
-  }
-}
-</script>

nezha-fronted/src/components/charts/logs.vue

@@ -1,731 +0,0 @@
-<template>
-  <div class="nz-chart-resize">
-    <div class="resize-shadow" ref="resizeShadow"></div>
-    <div class="resize-box resize-box-single" ref="resizeBox">
-      <div class="chart-text"  :id="'logsDiv'+chartIndex" @mouseenter="caretShow=true" @mouseleave="caretShow=false">
-        <loading  :ref="'localLoading'+chartIndex"></loading>
-        <div class="clearfix chartTitle" :class="{'dragTitle':dragTitleShow}" :id="'chartTitle'+chartIndex">
-          <el-popover
-            v-if="isError"
-            placement="top-start"
-            :close-delay=10
-            trigger="hover"
-            popper-class="chart-error-popper">
-            <div >{{errorContent}}</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>
-          <el-dropdown trigger="click" class="nz-chart-top" :key="'chartDropdown'+chartIndex"  v-clickoutside="clickos" :class="{'move-able':!isLock}">
-            <el-dropdown-menu style="display: none"></el-dropdown-menu>
-            <span class="el-dropdown-link chart-title">
-              <span class="chart-title-text">{{chartData.name}}</span>
-              <span class="chart-title-icon"  :class="{'visible':caretShow,'hidden':!caretShow}">
-                <span v-if="chartData.remark">
-                  <el-tooltip :content="chartData.remark" placement="top" effect="light">
-                     <i class="nz-icon nz-icon-info-normal"></i>
-                  </el-tooltip>
-                </span>
-                <span  v-has="'main_edit'" :title="$t('dashboard.refresh')" class="" @click="refreshChart">
-                  <i class="nz-icon nz-icon-replay"></i>
-                </span>
-                 <span  @click="showAllScreen"  v-if="from !== 'chartTemp'" class="" :title="$t('dashboard.screen')">
-                  <i class="nz-icon nz-icon-maxview"></i>
-                 </span>
-                <span><i class="el-icon-more" @click.stop="dropdownMenuShow=!dropdownMenuShow"></i></span>
-              </span>
-            </span>
-            <ul slot="dropdown" v-show="dropdownMenuShow"  :id="'dropdownUl'+chartIndex"  class="el-dropdown-menu nz-chart-dropdown"  style="" >
-              <li  @click="editChart" class="el-dropdown-menu__item">
-                <i class="nz-icon nz-icon-edit" style="font-size: 16px;"></i><span>{{$t('dashboard.edit')}}</span></li>
-              <li  v-has="'main_delete'" class="el-dropdown-menu__item" @click="removeChart">
-                <i class="nz-icon nz-icon-delete" style="font-size: 16px;"></i>{{$t('dashboard.delete')}}</li>
-              <li  v-has="'main_add'" class="el-dropdown-menu__item" @click="duplicate">
-                <i class="el-icon-copy-document" style="font-size: 16px;"></i>{{$t('dashboard.duplicate')}}</li>
-              <li  v-has="'main_edit'"  v-if="from !== 'chartTemp'&&chartData.pid" class="el-dropdown-menu__item" @click="$emit('sync')">
-                <i class="nz-icon nz-icon-sync" style="font-size: 16px;"></i>{{$t('overall.syncChart')}}</li>
-            </ul>
-          </el-dropdown>
-        </div>
-        <div class="mt-10 rich-text-container" v-cloak  v-show="firstShow" >
-          <div :id="'chartContainer'+chartIndex"  ref="chartContainer" class="logs-content" >
-            <div v-if="showTab.length==2" class="show-tab-icon">
-              <i class="nz-icon nz-icon-link-chart" :class="showTabActive == '1'?'is-active-icon':''" @click="showTabActive = '1'"/>
-              <i class="nz-icon nz-icon-logs" :class="showTabActive == '2'?'is-active-icon':''" @click="showTabActive = '2'"/>
-            </div>
-            <div v-show="showTab.indexOf('1') > -1 && showTabActive == '1'" name="1" title="Graph" style="height: 100%">
-              <div class="chart-room" style="height: 100%">
-                <chart ref="logChart" :unit="chartUnit"></chart>
-              </div>
-            </div>
-            <div v-show="showTab.indexOf('2') > -1 && showTabActive == '2'" name="2" title="Logs" class="logs-box">
-              <log-tab ref="logDetail" v-show="!noData" :log-data="logData" :showSwitch="false" :tab-index="tabIndex" @exportLog="exportLog" @limitChange="queryLogData"></log-tab>
-              <div class="chart-no-data" v-show="noData">No Data</div>
-            </div>
-          </div>
-        </div>
-        <!--全屏-->
-        <el-dialog class="nz-dialog table-chart-dialog"
-                   :title="$t('dashboard.panel.view')"
-                   :visible.sync="screenModal"
-                   width="90%"
-                   @close="screenModal = false;screenLegendListMore=[]"
-                   style="margin-top: 1vh !important;"
-                   @opened="initDialog"
-                   @closed="closeDialog"
-                   :modal-append-to-body="false"
-        >
-          <el-popover
-            v-if="isError"
-            placement="top-start"
-            :close-delay=10
-            trigger="hover"
-            popper-class="chart-error-popper">
-            <div >{{errorContent}}</div>
-            <span slot="reference"  class="panel-info-corner panel-info-corner--error">
-                <i class="nz-icon nz-icon-warning fa-model" ></i>
-                <span class="panel-info-corner-inner"></span>
-            </span>
-          </el-popover>
-          <div slot="title" >
-            <span class="nz-dialog-title">{{chartData.name}}</span>
-            <div class="float-right panel-calendar dialog-tool">
-              <pick-time :refresh-data-func="dateChange" v-model="searchTime" :use-chart-unit="false" ref="pickTime" style="height: 28px;" id="line-chart"></pick-time>
-            </div>
-          </div>
-          <div :id="'chartContainer'+chartIndex"  ref="chartContainer" class="logs-content"  >
-            <div v-if="showTabScreen.length==2" class="show-tab-icon">
-              <i class="nz-icon nz-icon-link-chart" :class="showTabScreenActive == '1'?'is-active-icon':''" @click="showTabScreenActive = '1'"/>
-              <i class="nz-icon nz-icon-logs" :class="showTabScreenActive == '2'?'is-active-icon':''" @click="showTabScreenActive = '2'"/>
-            </div>
-            <div v-show="showTabScreen.indexOf('1') > -1 && showTabScreenActive == '1'" name="1" title="Graph" style="height: 100%">
-              <div class="chart-room" style="height: 100%">
-                <chart ref="logChartScreen" :unit="chartUnit"></chart>
-              </div>
-            </div>
-            <div v-show="showTabScreen.indexOf('2') > -1 && showTabScreenActive == '2'" name="2" title="Logs" class="logs-box">
-              <log-tab ref="logDetailScreen" v-show="!noDataScreen" :log-data="logDataScreen" :showSwitch="false" :tab-index="tabIndex" @exportLog="exportLog" @limitChange="queryLogData"></log-tab>
-              <div class="chart-no-data" v-show="noDataScreen">No Data</div>
-            </div>
-          </div>
-          <loading  :ref="'localLoadingScreen'+chartIndex"></loading>
-        </el-dialog>
-      </div>
-      <span class="vue-resizable-handle" @mousedown="startResize" v-if="!isLock"></span>
-    </div>
-  </div>
-</template>
-
-<script>
-import loading from '../common/loading'
-import 'quill/dist/quill.snow.css'
-import axios from 'axios'
-import chart from '@/components/page/dashboard/overview/chart'
-import logTab from '@/components/page/dashboard/explore/logTab'
-import bus from '@/libs/bus'
-import logsTempData from '@/components/charts/logsTempData'
-import { fromRoute } from '@/components/common/js/constants'
-import { dealLegendAlias } from '@/components/common/js/tools'
-export default {
-  name: 'logs',
-  components: {
-    loading: loading,
-    chart,
-    logTab
-  },
-  props: {
-    chartData: {
-      type: Object
-    },
-    // 看板id
-    panelId: {
-      type: Number,
-      default: 0
-    },
-    editChartId: {
-      type: String,
-      default: 'editChartId'
-    },
-    chartIndex: {
-      type: Number,
-      default: 0
-    },
-    from: { type: String },
-    startTime: {},
-    endTime: {},
-    isLock: { type: Boolean, default: false }
-  },
-  data () {
-    return {
-      data: {}, // 该图表信息,chartItem
-      noData: false,
-      noDataScreen: false,
-      unit: {},
-      text: '', // 保存信息
-      screenText: '', // 全屏数据
-      loading: Object,
-      panelIdInner: '', // 看板id=panelId,原写作chart,由set_data获取
-      firstLoad: false, // 是否第一次加载
-      screenModal: false,
-      firstShow: false, // 默认不显示操作按钮,
-      caretShow: false,
-      dragTitleShow: false,
-      dropdownMenuShow: false,
-      divFirstShow: false,
-      showTab: ['1', '2'],
-      showTabActive: '1',
-      showTabScreen: ['1', '2'],
-      showTabScreenActive: '1',
-      chartUnit: 2,
-      logData: [],
-      logDataScreen: [],
-      tabIndex: 1,
-      isError: false,
-      errorContent: '',
-      seriesItem: '',
-      searchTime: [new Date().setHours(new Date().getHours() - 1), new Date()],
-      oldSearchTime: [new Date().setHours(new Date().getHours() - 1), new Date()],
-      filter: {},
-      stableFilter: {}
-    }
-  },
-  created () {
-  },
-  computed: {},
-  watch: {
-    dropdownMenuShow (n) {
-      this.$emit('dropmenu-change', n)
-    }
-  },
-  methods: {
-    startResize (e) {
-      const vm = this
-      this.$chartResizeTool.start(vm, this.data, e)
-    },
-    startLoading (area) {
-      if (area === 'screen') {
-        this.$refs['localLoadingScreen' + this.chartIndex].startLoading()
-      } else {
-        // this.showLoading = true;
-        this.$refs['localLoading' + this.chartIndex].startLoading()
-      }
-    },
-    endLoading (area) {
-      if (area === 'screen') {
-        // this.showLoadingScreen = false;
-        this.$refs['localLoadingScreen' + this.chartIndex].endLoading()
-      } else {
-        // this.showLoading = false;
-        this.$refs['localLoading' + this.chartIndex] && this.$refs['localLoading' + this.chartIndex].endLoading()
-      }
-    },
-    showLoad (chartItem) {
-      this.$nextTick(() => {
-        const chartBox = document.getElementById('logsDiv' + this.chartIndex)
-        let height = Math.floor(chartItem.height / 10) * 10// 图表高度四舍五入
-        if (height < this.minHeight) {
-          height = this.minHeight
-        }
-        chartBox.style.height = `${height - this.chartSpaceHeight}px`
-        const singleStatBox = document.getElementById('chartContainer' + this.chartIndex)
-        singleStatBox.style.height = `${height - this.chartSpaceHeight - this.titleHeight}px`// -75-32
-      })
-      this.startLoading()
-      this.divFirstShow = true
-    },
-    // 重新请求数据 刷新操作-local
-    refreshChart () {
-      this.dropdownMenuShow = false
-      this.startLoading()
-      this.firstShow = false
-      this.$emit('on-refresh-data', this.data.id)
-    },
-    // 编辑图表
-    editChart () {
-      this.dropdownMenuShow = false
-      this.$emit('on-edit-chart-block', this.data.id)
-    },
-    // 删除该图表
-    removeChart () {
-      this.dropdownMenuShow = false
-      this.$emit('on-remove-chart-block', this.data.id)
-    },
-    clickos () {
-      this.dropdownMenuShow = false
-    },
-    clearChart () {
-      this.data = {}
-    },
-    duplicate () {
-      this.dropdownMenuShow = false
-      this.$emit('on-duplicate-chart-block', this.data.id)
-    },
-    // 全屏查看
-    showAllScreen () {
-      this.dropdownMenuShow = false
-      // 初始化同步时间
-      this.filter.start_time = this.stableFilter.start_time
-      this.filter.end_time = this.stableFilter.end_time
-      // this.searchTime = this.oldSearchTime;
-      this.$set(this.searchTime, 0, this.oldSearchTime[0])
-      this.$set(this.searchTime, 1, this.oldSearchTime[1])
-      this.screenModal = true
-      this.isGreyScreen = []
-      this.$refs.pickTime.$refs.timePicker.setCustomTime(this.stableFilter)
-      this.seriesItemScreen = this.seriesItem
-      this.showTabScreenActive = '1'
-      this.screenModal = true
-    },
-    resize (chartItem) {
-      document.querySelector('#logsDiv' + this.chartIndex + ' .rich-text-container').style.height = `calc(100% - ${this.$chartResizeTool.titleHeight}px)`
-    },
-    // 设置数据, filter区分
-    setData (chartItem, seriesItem, panelId, filter, area) {
-      if (filter) { // 保存数据,用于同步时间
-        this.stableFilter = filter
-        this.searchTime[0] = filter.start_time
-        this.searchTime[1] = filter.end_time
-        this.oldSearchTime[0] = this.searchTime[0]
-        this.oldSearchTime[1] = this.searchTime[1]
-      }
-      this.$nextTick(() => {
-        this.resize(chartItem)
-      })
-      this.divFirstShow = true
-
-      this.firstShow = true // 展示操作按键
-
-      this.panelIdInner = panelId
-      this.data = chartItem
-      this.text = chartItem.param.text
-      this.screenText = chartItem.param.text
-      this.chartUnit = chartItem.unit
-      this.endLoading()
-      this.queryLogData(this.data.param.limit)
-    },
-    queryLogData (limit) { // log的chart和table是一个请求
-      if (!limit) {
-        limit = this.data.param.limit || 1000
-      }
-      this.expressions = this.chartData.elements.map(elements => elements.expression)
-      if (this.expressions.length > 0) {
-        const requestArr = []
-        this.expressions.forEach((item, index) => {
-          if (item != '' && this.from.trim() != fromRoute.chartTemp) {
-            requestArr.push(this.$get('/logs/loki/api/v1/query_range?format=1&query=' + encodeURIComponent(item) + '&start=' + this.$stringTimeParseToUnix(this.startTime) + '&end=' + this.$stringTimeParseToUnix(this.endTime) + '&limit=' + limit))
-          } else if (item != '' && this.from.trim() == fromRoute.chartTemp) {
-            requestArr.push(logsTempData[index % 2])
-          }
-        })
-        if (requestArr.length > 0) {
-          this.showIntroduce = false
-          this.saveDisabled = false
-        }
-        axios.all(requestArr).then(res => {
-          const errorRowIndex = []
-          res.forEach((r, i) => {
-            if (typeof r === 'string') {
-              errorRowIndex.push(i)
-            }
-          })
-          if (errorRowIndex.length > 0) {
-            this.$message.error(this.$t('tip.errorInRow') + ': ' + errorRowIndex.map(e => e + 1).join(' ,'))
-            res = res.filter((r, i) => errorRowIndex.indexOf(i) === -1)
-          }
-          if (res.length > 0) {
-            const logData = res.map(r => r.data)
-            const hasGraph = logData.some(d => d.resultType === 'matrix')
-            const hasLog = logData.some(d => d.resultType === 'streamsFormat')
-            const graphTabIndex = this.showTab.indexOf('1')
-            if (hasGraph) {
-              if (graphTabIndex === -1) {
-                this.showTab.push('1')
-              }
-            } else {
-              if (graphTabIndex > -1) {
-                this.showTab.splice(graphTabIndex, 1)
-              }
-            }
-            const logTabIndex = this.showTab.indexOf('2')
-            if (hasLog) {
-              if (logTabIndex === -1) {
-                this.showTab.push('2')
-              }
-              this.noData = true
-              logData.forEach(item => {
-                if (item.resultType === 'streamsFormat' && item.result.length > 0) {
-                  this.noData = false
-                }
-              })
-            } else {
-              if (logTabIndex > -1) {
-                this.showTab.splice(logTabIndex, 1)
-              }
-            }
-            this.showTabActive = this.showTab[0]
-            this.$nextTick(() => {
-              if (this.$refs.logDetail) {
-                this.$refs.logDetail.time = this.chartData.param.time
-                this.$refs.logDetail.wrapLines = this.chartData.param.wrapLines
-                this.$refs.logDetail.operations.descending = this.chartData.param.descending
-              }
-              logData.forEach((item, index) => {
-                item.result.forEach(result => {
-                  result.elements = this.chartData.elements[index]
-                })
-              })
-              this.logData = logData
-              this.logDataScreen = logData
-              hasGraph && this.loadLogGraph()
-            })
-          }
-        }).catch(e => {
-          this.isError = true
-          this.errorContent = this.$t('terminallog.statusItem.unknownError')
-          this.$message.error(this.$t('terminallog.statusItem.unknownError'))
-        })
-      }
-    },
-    queryLogDataScreen (limit) { // log的chart和table是一个请求
-      if (!limit) {
-        limit = this.data.param.limit || 1000
-      }
-      this.expressions = this.chartData.elements.map(elements => elements.expression)
-      if (this.expressions.length > 0) {
-        const requestArr = []
-        this.expressions.forEach((item, index) => {
-          if (item != '' && this.from.trim() != fromRoute.chartTemp) {
-            requestArr.push(this.$get('/logs/loki/api/v1/query_range?format=1&query=' + encodeURIComponent(item) + '&start=' + this.$stringTimeParseToUnix(this.searchTime[0]) + '&end=' + this.$stringTimeParseToUnix(this.searchTime[1]) + '&limit=' + limit))
-          } else if (item != '' && this.from.trim() == fromRoute.chartTemp) {
-            requestArr.push(logsTempData[index % 2])
-          }
-        })
-        if (requestArr.length > 0) {
-          this.showIntroduce = false
-          this.saveDisabled = false
-        }
-        axios.all(requestArr).then(res => {
-          this.$refs['localLoadingScreen' + this.chartIndex].endLoading()
-          const errorRowIndex = []
-          res.forEach((r, i) => {
-            if (typeof r === 'string') {
-              errorRowIndex.push(i)
-            }
-          })
-          if (errorRowIndex.length > 0) {
-            this.$message.error(this.$t('tip.errorInRow') + ': ' + errorRowIndex.map(e => e + 1).join(' ,'))
-            res = res.filter((r, i) => errorRowIndex.indexOf(i) === -1)
-          }
-          if (res.length > 0) {
-            const logData = res.map(r => r.data)
-            const hasGraph = logData.some(d => d.resultType === 'matrix')
-            const hasLog = logData.some(d => d.resultType === 'streamsFormat')
-            const graphTabIndex = this.showTabScreen.indexOf('1')
-            if (hasGraph) {
-              if (graphTabIndex === -1) {
-                this.showTabScreen.push('1')
-              }
-            } else {
-              if (graphTabIndex > -1) {
-                this.showTabScreen.splice(graphTabIndex, 1)
-              }
-            }
-            const logTabIndex = this.showTabScreen.indexOf('2')
-            if (hasLog) {
-              if (logTabIndex === -1) {
-                this.showTabScreen.push('2')
-              }
-              this.noDataScreen = true
-              logData.forEach(item => {
-                if (item.resultType === 'streamsFormat' && item.result.length > 0) {
-                  this.noDataScreen = false
-                }
-              })
-            } else {
-              if (logTabIndex > -1) {
-                this.showTabScreen.splice(logTabIndex, 1)
-              }
-            }
-            this.showTabScreenActive = this.showTabScreen[0]
-            this.$nextTick(() => {
-              if (this.$refs.logDetail) {
-                this.$refs.logDetail.time = this.chartData.param.time
-                this.$refs.logDetail.wrapLines = this.chartData.param.wrapLines
-                this.$refs.logDetail.operations.descending = this.chartData.param.descending
-              }
-              logData.forEach((item, index) => {
-                item.result.forEach(result => {
-                  result.elements = this.chartData.elements[index]
-                })
-              })
-              this.logDataScreen = logData
-              hasGraph && this.loadLogGraphScreen()
-            })
-          }
-        }).catch(e => {
-          this.isError = true
-          this.errorContent = this.$t('terminallog.statusItem.unknownError')
-          // this.$message.error(this.$t('terminallog.statusItem.unknownError'))
-        })
-      }
-    },
-    loadLogGraph () {
-      const graphData = this.logData.filter(l => l.resultType === 'matrix')
-      if (graphData && graphData.length > 0) {
-        this.$refs.logChart.startLoading()
-        const queryExpression = []
-        let series = []
-        const legend = []
-        this.expressions.forEach((item, index) => {
-          if (item !== '') {
-            queryExpression.push(item)
-          }
-        })
-        this.logData.forEach((response, index) => {
-          if (response.resultType === 'matrix') {
-            const data = response.result
-            if (!data || data.length < 1) {
-              return
-            }
-            data.forEach((result, i) => {
-              const seriesItem = {
-                name: '',
-                symbol: 'emptyCircle', // 去掉点
-                symbolSize: [2, 2],
-                showSymbol: false,
-                smooth: 0.2, // 曲线变平滑
-                data: [],
-                lineStyle: {
-                  width: 1,
-                  opacity: 0.9
-                },
-                type: 'line'
-              }
-              seriesItem.data = result.values.map((item) => {
-                return [item[0] * 1000, item[1]]
-              })
-              let host = ''// up,
-              let alias = ''
-              if (result.metric && Object.keys(result.metric).length > 0) {
-                const metric = Object.keys(result.metric)
-                if (metric.__name__) {
-                  host = `${metric.__name__}{`// up,
-                }
-                metric.forEach((tag, i) => {
-                  if (tag !== '__name__') {
-                    host += `${tag}="${result.metric[tag]}",`
-                  }
-                })
-                if (host.endsWith(',')) {
-                  host = host.substr(0, host.length - 1)
-                }
-                if (metric.__name__) {
-                  host += '}'
-                }
-                // 处理legend别名
-                alias = dealLegendAlias(host, this.chartData.elements[index].legend)
-                if (!alias || alias === '') {
-                  alias = host
-                }
-              } else {
-                alias = queryExpression[index]
-              }
-              seriesItem.name = alias + '-' + index
-              series.push(seriesItem)
-              legend.push({ name: seriesItem.name, alias: alias, isGray: false })
-            })
-          }
-        })
-        this.$refs.logChart.setLegend(legend)
-        this.$refs.logChart.setRandomColors(series.length)
-        if (!series.length) {
-          series = ''
-        }
-        this.$refs.logChart.setSeries(series)
-        this.defaultChartVisible = true
-        this.$nextTick(() => {
-          this.$refs.logChart.endLoading()
-        })
-      }
-    },
-    loadLogGraphScreen () {
-      const graphData = this.logDataScreen.filter(l => l.resultType === 'matrix')
-      if (graphData && graphData.length > 0) {
-        this.$refs.logChartScreen.startLoading()
-        const queryExpression = []
-        let series = []
-        const legend = []
-        this.expressions.forEach((item, index) => {
-          if (item !== '') {
-            queryExpression.push(item)
-          }
-        })
-        this.logDataScreen.forEach((response, index) => {
-          if (response.resultType === 'matrix') {
-            const data = response.result
-            if (!data || data.length < 1) {
-              return
-            }
-            data.forEach((result, i) => {
-              const seriesItem = {
-                name: '',
-                symbol: 'emptyCircle', // 去掉点
-                symbolSize: [2, 2],
-                showSymbol: false,
-                smooth: 0.2, // 曲线变平滑
-                data: [],
-                lineStyle: {
-                  width: 1,
-                  opacity: 0.9
-                },
-                type: 'line'
-              }
-              seriesItem.data = result.values.map((item) => {
-                return [item[0] * 1000, item[1]]
-              })
-              let host = ''// up,
-              let alias = ''
-              if (result.metric && Object.keys(result.metric).length > 0) {
-                const metric = Object.keys(result.metric)
-                if (metric.__name__) {
-                  host = `${metric.__name__}{`// up,
-                }
-                metric.forEach((tag, i) => {
-                  if (tag !== '__name__') {
-                    host += `${tag}="${result.metric[tag]}",`
-                  }
-                })
-                if (host.endsWith(',')) {
-                  host = host.substr(0, host.length - 1)
-                }
-                if (metric.__name__) {
-                  host += '}'
-                }
-                // 处理legend别名
-                alias = dealLegendAlias(host, this.chartData.elements[index].legend)
-                if (!alias || alias === '') {
-                  alias = host
-                }
-              } else {
-                alias = queryExpression[index]
-              }
-              seriesItem.name = alias + '-' + index
-              series.push(seriesItem)
-              legend.push({ name: seriesItem.name, alias: alias, isGray: false })
-            })
-          }
-        })
-        this.$refs.logChartScreen.setLegend(legend)
-        this.$refs.logChartScreen.setRandomColors(series.length)
-        if (!series.length) {
-          series = ''
-        }
-        this.$refs.logChartScreen.setSeries(series)
-        this.defaultChartVisible = true
-        this.$nextTick(() => {
-          this.$refs.logChartScreen.endLoading()
-          this.$refs.logChartScreen.resize()
-        })
-      }
-    },
-    chartUnitChange (unit) {
-      this.chartUnit = unit
-      this.$nextTick(() => {
-        this.expressionChange()
-      })
-    },
-    exportLog ({ limit, descending }) {
-      const params = {
-        logql: this.expressions,
-        start: this.$stringTimeParseToUnix(this.filterTime[0]),
-        end: this.$stringTimeParseToUnix(this.filterTime[1]),
-        direction: descending ? 'backward' : 'forward',
-        limit
-      }
-      axios.get('/logs/loki/export', { responseType: 'blob', params: params }).then(res => {
-        if (window.navigator.msSaveOrOpenBlob) {
-          // 兼容ie11
-          const blobObject = new Blob([res.data])
-          window.navigator.msSaveOrOpenBlob(blobObject, 'log')
-        } else {
-          const url = URL.createObjectURL(new Blob([res.data]))
-          const a = document.createElement('a')
-          document.body.appendChild(a) // 此处增加了将创建的添加到body当中
-          a.href = url
-          a.download = 'log'
-          a.target = '_blank'
-          a.click()
-          a.remove() // 将a标签移除
-        }
-      }, error => {
-        const $self = this
-        const reader = new FileReader()
-        reader.onload = function (event) {
-          const responseText = reader.result
-          const exception = JSON.parse(responseText)
-          if (exception.message) {
-            $self.$message.error(exception.message)
-          } else {
-            console.error(error)
-          }
-        }
-        reader.readAsText(error.response.data)
-      })
-    },
-    dateChange (time) {
-      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.echartModalStore.clear()
-      this.showLegend = false
-      this.$refs['localLoadingScreen' + this.chartIndex].startLoading()
-      this.queryLogDataScreen()
-    },
-    initDialog () {
-      this.queryLogDataScreen(this.data.param.limit)
-    },
-    closeDialog () {}
-  },
-  mounted () {
-    this.firstLoad = false
-  },
-  beforeDestroy () {
-    this.clearChart()
-  }
-}
-</script>
-<style scoped>
-  .chartTitle{
-    position: relative;
-    z-index: 1;
-  }
-  .logs-content{
-    width: calc(100% - 20px);
-    height: calc(100% - 20px);
-    padding: 10px;
-    position: relative;
-  }
-  .show-tab-icon{
-    position: absolute;
-    top: 0;
-    left: 10px;
-    display: block;
-    z-index: 10;
-  }
-  .show-tab-icon .nz-icon{
-    cursor: pointer;
-    padding: 0 5px;
-  }
-  .show-tab-icon .nz-icon.is-active-icon{
-    color: #BDE3FD;
-  }
-  .chart-no-data{
-    width: calc(100% - 30px);
-  }
-  .log-detail .log-table .nz-table2 {
-    padding: 0;
-  }
-  .logs-box{
-    overflow-y: auto;height: calc(100% - 15px);margin-top: 10px
-  }
-</style>

nezha-fronted/src/components/charts/text-chart.vue

@@ -1,222 +0,0 @@
-<template>
-  <div class="nz-chart-resize">
-    <div class="resize-shadow" ref="resizeShadow"></div>
-    <div class="resize-box resize-box-single" ref="resizeBox">
-      <div class="chart-text"  :id="'chartSingleStatDiv'+chartIndex" @mouseenter="caretShow=true" @mouseleave="caretShow=false">
-        <loading  :ref="'localLoading'+chartIndex"></loading>
-        <div class="clearfix chartTitle" :class="{'dragTitle':dragTitleShow}" :id="'chartTitle'+chartIndex">
-          <el-dropdown trigger="click" class="nz-chart-top" :key="'chartDropdown'+chartIndex"  v-clickoutside="clickos" :class="{'move-able':!isLock}">
-            <el-dropdown-menu style="display: none"></el-dropdown-menu>
-            <span class="el-dropdown-link chart-title">
-<!--              <span class="chart-title-text">{{chartData.name}}</span>-->
-              <span class="chart-title-text" v-on:mouseover="changeActive()" v-on:mouseout="removeActive()">{{chartData.name}}</span>
-              <transition  name="el-fade-in-linear">
-                <span v-show="chartDataList" class="chart-title-pit" >{{chartData.name}}</span>
-              </transition>
-              <span class="chart-title-icon"  :class="{'visible':caretShow,'hidden':!caretShow}">
-                <span v-if="chartData.remark">
-                  <el-tooltip :content="chartData.remark" placement="top" effect="light">
-                     <i class="nz-icon nz-icon-info-normal"></i>
-                  </el-tooltip>
-                </span>
-                <span  v-has="'main_edit'" :title="$t('dashboard.refresh')" class="" @click="refreshChart">
-                  <i class="nz-icon nz-icon-replay"></i>
-                </span>
-                 <span  @click="showAllScreen"  v-if="from !== 'chartTemp'" class="" :title="$t('dashboard.screen')">
-                  <i class="nz-icon nz-icon-maxview"></i>
-                 </span>
-                <span><i class="el-icon-more" @click.stop="dropdownMenuShow=!dropdownMenuShow"></i></span>
-              </span>
-            </span>
-            <ul slot="dropdown" v-show="dropdownMenuShow"  :id="'dropdownUl'+chartIndex"  class="el-dropdown-menu nz-chart-dropdown"  style="" >
-              <li  @click="editChart" class="el-dropdown-menu__item">
-                <i class="nz-icon nz-icon-edit" style="font-size: 16px;"></i><span>{{$t('dashboard.edit')}}</span></li>
-              <li  v-has="'main_delete'" class="el-dropdown-menu__item" @click="removeChart">
-                <i class="nz-icon nz-icon-delete" style="font-size: 16px;"></i>{{$t('dashboard.delete')}}</li>
-              <li  v-has="'main_add'" class="el-dropdown-menu__item" @click="duplicate">
-                <i class="el-icon-copy-document" style="font-size: 16px;"></i>{{$t('dashboard.duplicate')}}</li>
-              <li  v-has="'main_edit'"  v-if="from !== 'chartTemp'&&chartData.pid" class="el-dropdown-menu__item" @click="$emit('sync')">
-                <i class="nz-icon nz-icon-sync" style="font-size: 16px;"></i>{{$t('overall.syncChart')}}</li>
-            </ul>
-          </el-dropdown>
-        </div>
-        <div class="mt-10 rich-text-container" v-cloak  v-show="firstShow" >
-          <div :id="'chartContainer'+chartIndex"  ref="chartContainer" class="text-content"  >
-            <el-scrollbar style="height: 100%;" class="el-scrollbar-normal">
-              <div style="height: 100%;" v-html="text" ></div>
-            </el-scrollbar>
-          </div>
-        </div>
-        <!--全屏-->
-        <el-dialog class="nz-dialog table-chart-dialog" :title="$t('dashboard.panel.view')"
-                   :visible.sync="screenModal"
-                   width="96%"  @close="screenModal = false" :modal-append-to-body="false">
-          <div slot="title">
-            <span class="nz-dialog-title">{{data.name}}</span>
-          </div>
-          <div class="rich-text-screen-container"  >
-            <div id="chartScreenContainer"  ref="chartScreenContainer" class="text-content" >
-              <el-scrollbar style="height: 100%;" class="el-scrollbar-normal">
-                <div style="height: 100%;" v-html="screenText" ></div>
-              </el-scrollbar>
-            </div>
-          </div>
-          <loading  :ref="'localLoadingScreen'+chartIndex"></loading>
-        </el-dialog>
-      </div>
-      <span class="vue-resizable-handle" @mousedown="startResize" v-if="!isLock"></span>
-    </div>
-  </div>
-</template>
-
-<script>
-import loading from '../common/loading'
-import 'quill/dist/quill.snow.css'
-import chartDataList from '@/components/common/mixin/chartDataList'
-export default {
-  name: 'chartSingleStat',
-  components: {
-    loading: loading
-  },
-  props: {
-    chartData: {
-      type: Object
-    },
-    // 看板id
-    panelId: {
-      type: Number,
-      default: 0
-    },
-    editChartId: {
-      type: String,
-      default: 'editChartId'
-    },
-    chartIndex: {
-      type: Number,
-      default: 0
-    },
-    from: { type: String },
-    isLock: { type: Boolean, default: false }
-  },
-  mixins: [chartDataList],
-  data () {
-    return {
-      data: {}, // 该图表信息,chartItem
-      noData: false,
-      unit: {},
-      text: '', // 保存信息
-      screenText: '', // 全屏数据
-      loading: Object,
-      panelIdInner: '', // 看板id=panelId,原写作chart,由set_data获取
-      firstLoad: false, // 是否第一次加载
-      screenModal: false,
-      firstShow: false, // 默认不显示操作按钮,
-      caretShow: false,
-      dragTitleShow: false,
-      dropdownMenuShow: false,
-      divFirstShow: false
-    }
-  },
-  created () {
-  },
-  computed: {},
-  watch: {
-    dropdownMenuShow (n) {
-      this.$emit('dropmenu-change', n)
-    }
-  },
-  methods: {
-    startResize (e) {
-      const vm = this
-      this.$chartResizeTool.start(vm, this.data, e)
-    },
-    startLoading (area) {
-      if (area === 'screen') {
-        this.$refs['localLoadingScreen' + this.chartIndex].startLoading()
-      } else {
-        // this.showLoading = true;
-        this.$refs['localLoading' + this.chartIndex].startLoading()
-      }
-    },
-    endLoading (area) {
-      if (area === 'screen') {
-        // this.showLoadingScreen = false;
-        this.$refs['localLoadingScreen' + this.chartIndex].endLoading()
-      } else {
-        // this.showLoading = false;
-        this.$refs['localLoading' + this.chartIndex] && this.$refs['localLoading' + this.chartIndex].endLoading()
-      }
-    },
-    showLoad (chartItem) {
-      this.$nextTick(() => {
-        const chartBox = document.getElementById('chartSingleStatDiv' + this.chartIndex)
-        let height = Math.floor(chartItem.height / 10) * 10// 图表高度四舍五入
-        if (height < this.minHeight) {
-          height = this.minHeight
-        }
-        chartBox.style.height = `${height - this.chartSpaceHeight}px`
-        const singleStatBox = document.getElementById('chartContainer' + this.chartIndex)
-        singleStatBox.style.height = `${height - this.chartSpaceHeight - this.titleHeight}px`// -75-32
-      })
-      this.startLoading()
-      this.divFirstShow = true
-    },
-    // 重新请求数据 刷新操作-local
-    refreshChart () {
-      this.dropdownMenuShow = false
-      this.startLoading()
-      this.firstShow = false
-      this.$emit('on-refresh-data', this.data.id)
-    },
-    // 编辑图表
-    editChart () {
-      this.dropdownMenuShow = false
-      this.$emit('on-edit-chart-block', this.data.id)
-    },
-    // 删除该图表
-    removeChart () {
-      this.dropdownMenuShow = false
-      this.$emit('on-remove-chart-block', this.data.id)
-    },
-    clickos () {
-      this.dropdownMenuShow = false
-    },
-    clearChart () {
-      this.data = {}
-    },
-    duplicate () {
-      this.dropdownMenuShow = false
-      this.$emit('on-duplicate-chart-block', this.data.id)
-    },
-    // 全屏查看
-    showAllScreen () {
-      this.dropdownMenuShow = false
-      this.screenModal = true
-    },
-    resize (chartItem) {
-      document.querySelector('#chartSingleStatDiv' + this.chartIndex + ' .rich-text-container').style.height = `calc(100% - ${this.$chartResizeTool.titleHeight}px)`
-    },
-    // 设置数据, filter区分
-    setData (chartItem, seriesItem, panelId, filter, area) {
-      this.$nextTick(() => {
-        this.resize(chartItem)
-      })
-      this.divFirstShow = true
-
-      this.firstShow = true // 展示操作按键
-
-      this.panelIdInner = panelId
-      this.data = chartItem
-      this.text = chartItem.param.text
-      this.screenText = chartItem.param.text
-      this.endLoading()
-    }
-  },
-  mounted () {
-    this.firstLoad = false
-  },
-  beforeDestroy () {
-    this.clearChart()
-  }
-}
-</script>

nezha-fronted/src/components/common/alert/alertRuleInfo.vue

@@ -69,7 +69,7 @@
 </template>
 
 <script>
-import chartDataFormat from '../../charts/chartDataFormat'
+import chartDataFormat from '../../chart/chartDataFormat'
 import trendMixins from '@/components/common/alert/trendMixins'
 export default {
   name: 'alert-rule-info',

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

@@ -125,7 +125,7 @@ import nzBottomDataList from '@/components/common/bottomBox/nzBottomDataList'
 import axios from 'axios'
 import bus from '@/libs/bus'
 import alertMessageTable from '@/components/common/table/alert/alertMessageTable.vue'
-import chartDataFormat from '@/components/charts/chartDataFormat'
+import chartDataFormat from '@/components/chart/chartDataFormat'
 import chart from '@/components/page/dashboard/overview/chart'
 import { alertMessage as alertMessageConstant, fromRoute } from '@/components/common/js/constants'
 import alertSilenceBox from '@/components/common/rightBox/alertSilenceBox'

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

@@ -1,725 +0,0 @@
-<style scope>
-.plTableBox.nz-table /deep/  .el-table{
-  display: block !important;
-}
-.project-calendar{
-  margin-top: 2px;
-}
-.control-icon-unchecked {
-  color: #999999;
-  cursor: not-allowed;
-}
-</style>
-<style>
-  .endpoint-dialog .el-dialog__body{
-    height: calc(100% - 48px) !important;
-    padding-bottom: 0 !important;
-  }
-</style>
-<template>
-  <span style="z-index: 1999;position: relative">
-    <div class="sub-top-tools">
-      <div class="sub-list-tabs">
-        <div class="sub-list-tab-title">{{$t("project.endpoint.endpointId")}}: {{currentEndpoint ? currentEndpoint.id : ''}}</div><div
-        class="sub-list-tab" @click="changeTab('panel')" id="endpoint-query-changepanel">{{$t("overall.detail")}}</div>
-        <div class="sub-list-tab" @click="changeTab('alertMessage')" id="endpoint-query-alertMessage">{{$t("asset.alerts")}}</div>
-        <div class="sub-list-tab sub-list-tab-active">{{$t("overall.query")}}</div>
-      </div>
-      <div class="top-tool-right">
-        <div class="top-tool-search margin-r-20">
-          <el-input ref="elementQuery" @clear="clearInput" id="elementQuery" @focus="focusInput"  @blur="blurInput" v-model="queryExpression" class="query-input-inactive" size="mini" clearable  :placeholder="$t('project.endpoint.promExpr')" >
-            <i slot="suffix" class="el-input__icon nz-icon nz-icon-search" style="float:right" @click="focusInput"></i>
-          </el-input>
-        </div>
-        <div class="margin-r-20 nz-btn-group nz-btn-group-size-small nz-btn-group-light">
-          <button @click="changeTime(-10)" class="nz-btn nz-btn-size-normal nz-btn-style-light change-time-height nz-input-group-prepend" id="endpoint-query-changetime"><i class="el-icon-d-arrow-left"></i></button>
-          <my-date-picker
-            v-model="formatTime"
-            type="datetime"
-            size="mini"
-            class="project-calendar nz-input-group-middle"
-            clearable
-            :time-arrow-control="true"
-            placeholder="Moment"
-            :value-format="timeFormatStrToDatePickFormat(timeFormatMain)"
-            :format="timeFormatStrToDatePickFormat(timeFormatMain)"
-            @change="pickTime"
-        >
-          </my-date-picker>
-          <button @click="changeTime(10)" class="nz-btn nz-btn-size-normal nz-btn-style-light change-time-height nz-input-group-append"><i class="el-icon-d-arrow-right"></i></button>
-        </div>
-        <div class="nz-btn-group nz-btn-group-size-normal nz-btn-group-light" style="height: 24px;">
-          <button class="nz-btn nz-btn-size-normal nz-btn-style-light" @click="viewGraph">
-            <i class="nz-icon nz-icon-chart"  :class="{'control-icon-unchecked':selectedEndpoints.length<1,'control-icon-checked':selectedEndpoints.length>0}"></i>
-          </button><button @mouseenter="dropdownHandler(true)" @mouseleave="dropdownHandler(false)" class="nz-btn nz-btn-size-normal nz-btn-style-light export-dropdown-btn" id="browser-go">
-            <i class="nz-icon nz-icon-arrow-down"></i>
-            <transition name="el-zoom-in-top">
-              <div v-if="dropdownShow" class="endpoint-query-dropdown el-popover">
-                <span style="padding-top: 2px">{{$t('project.endpoint.hideSameLabels')}}</span>
-                <el-switch v-model="hideSameLabels" size="small"></el-switch>
-              </div>
-            </transition>
-          </button>
-        </div>
-      </div>
-    </div>
-    <div class="table-header-inner" @click="clearSelectedMetrics"><span><i style="font-size: 12px;margin-left: 2px;" class="nz-icon nz-icon-close " :class="{'control-icon-unchecked':selectedEndpoints.length<1,'control-icon-checked':selectedEndpoints.length>0}"></i></span></div>
-     <pl-table :row-height="28" use-virtual :datas="tableData" border :empty-text="$t('config.mib.noData')" :header-cell-class-name="cellClass" :style="{height: $tableHeight.noPagination}"
-               :pagination-show="false" class="nz-table endpoint-query-table" ref="endpointQueryTable" style="width: 100%;" v-loading="loading"
-               v-if="tableShow && plTableSHow" id="endpoint-list-table" :tooltip-effect="'light'" @selection-change="selectChange">
-      <pl-table-column
-        type="selection"
-        width="39"
-        align="center"
-        column-key="sel"
-        :selectable="selectable">
-      </pl-table-column>
-      <pl-table-column
-        prop="element"
-        :resizable="true"
-        :min-width="1000"
-        column-key="element"
-        :show-overflow-tooltip="true"
-        :label="$t('project.endpoint.element')">
-        <template v-slot="scope">
-          <el-popover trigger="hover" placement="right" v-if="typeof scope.row.metricTip != 'undefined' && scope.row.metricTip != null">
-            <div>
-              <ul>
-                <li><span class="metirc-tip-list">metric&nbsp;:&nbsp;</span><span>{{scope.row.metricTip.metric?scope.row.metricTip.metric:'&#45;&#45;'}}</span></li>
-                <li><span class="metirc-tip-list">type&nbsp;:&nbsp;</span><span>{{scope.row.metricTip.type?scope.row.metricTip.type:'unknown'}}</span></li>
-                <li><span class="metirc-tip-list">help&nbsp;:&nbsp;</span><span>{{scope.row.metricTip.help?scope.row.metricTip.help:'&#45;&#45;'}}</span></li>
-                <li><span class="metirc-tip-list">unit&nbsp;:&nbsp;</span><span>{{scope.row.metricTip.unit?scope.row.metricTip.unit:'&#45;&#45;'}}</span></li>
-              </ul>
-            </div>
-            <span slot="reference"><i class="nz-icon nz-icon-info-normal metric-tip-icon"></i></span>
-          </el-popover>
-          <span style="word-break: break-all;" v-html="hideSameLabels?scope.row.colorSimpleElement: scope.row.colorElement"></span>
-        </template>
-      </pl-table-column>
-      <pl-table-column
-        :resizable="false"
-        prop="value"
-        column-key="value"
-        :label="$t('project.endpoint.value')"
-        min-width="180">
-      </pl-table-column>
-    </pl-table>
-    <button :class="{'to-top-is-hover': tools.tableHover}" @click="toTop(scrollbarWrap)" class="to-top" v-show="tools.showTopBtn" id="endpoint-list-totop"><i class="nz-icon nz-icon-top"></i></button>
-
-    <el-dialog class="line-chart-block-modal nz-dialog endpoint-dialog"
-               :title="$t('project.endpoint.dialogTitle')"
-               :visible.sync="graphShow"
-               width="90%"
-               :modal-append-to-body="false"
-               @close="dialogClose">
-      <div slot="title">
-        {{$t("project.endpoint.dialogTitle")}}
-        <div class="float-right panel-calendar dialog-tool" style="display: flex">
-          <pick-time :refresh-data-func="queryChartDate" :use-refresh="false" v-model="searchTime" style="height: 28px;" @unitChange="chartUnitChange" id="endpoint-query-full-chart" :show-multiple="true" ref="pickTime"></pick-time>
-          <button id="endpoint-query-full-chart-save" v-has="'project_endpoint_query_chart_toAdd'" class="nz-btn nz-btn-size-large nz-btn-style-normal" @click="saveChart">{{$t('dashboard.metric.saveChart')}}</button>
-        </div>
-      </div>
-      <chart ref="endpointChart" :unit="chartUnit" :minusTime="minusTime"></chart>
-    </el-dialog>
-    <transition name="right-box">
-      <chart-box :chart="chart" :panel-data="panelData" :show-panel="{id: -1, name: '', type: 'endpointQuery'}" @close="rightBox.show = false" @on-create-success="createSuccess" @reload="getPanelData" @reloadOnlyPanel="getPanelData" box-class="save-chart-box" from="project_endpoint_query" ref="addChartModal" v-if="rightBox.show" style="z-index: 2900" :fromEndpoint="true"></chart-box>
-    </transition>
-  </span>
-</template>
-
-<script>
-import chartBox from '../../../page/dashboard/chartBox'
-import axios from 'axios'
-import bus from '../../../../libs/bus'
-import chart from '../../../page/dashboard/overview/chart'
-
-let timeout
-let internal
-export default {
-  name: 'endpointQueryTab',
-  components: {
-    'chart-box': chartBox,
-    chart: chart
-  },
-  props: {
-    obj: Object, // 关联的实体对象
-    from: String
-  },
-  data () {
-    return {
-      chart: {},
-      tableShow: true,
-      dropdownShow: false,
-      loading: false,
-      tools: {
-        showTopBtn: false, // 主列表top按钮
-        tableHover: false
-      },
-      currentEndpoint: {},
-      queryData: [], // endpoint 查询列表数据
-      tableData: [],
-      tableDataCopy: '',
-      queryExpression: '',
-      elementMetricDatas: [], // element 列提示信息列表
-      formatTime: '', // 查询endpoint的时间，
-      selectedEndpoints: [], // 选中的metric{label='value'}
-      chartDatas: [], // 从query_range查询到的数据
-      legend: [], // echart legend
-      graphShow: false,
-      searchTime: [new Date().setHours(new Date().getHours() - 1), new Date()],
-      panelData: [], // chart-box的panel下拉框数据,
-      hideSameLabels: true,
-      sameLabels: ['instance', 'module', 'project', 'asset', 'endpoint', 'datacenter'],
-      chartUnit: 5,
-      rightBox: { show: false },
-      plTableSHow: true,
-      scrollTop: 0,
-      scrollbarWrap: null,
-      minusTime: 0
-    }
-  },
-  methods: {
-    changeTab (tab) {
-      this.$emit('changeTab', tab)
-    },
-    saveChart () { // 新增chart
-      const chart = {
-        title: '',
-        type: 'line',
-        span: 12,
-        height: '400',
-        unit: this.chartUnit,
-        param: {
-          url: '',
-          threshold: ''
-        },
-        elements: [],
-        panel: '',
-        sync: 0
-      }
-      for (let i = 0; i < this.selectedEndpoints.length; i++) {
-        if (this.selectedEndpoints[i] && this.selectedEndpoints[i].element !== '') {
-          chart.elements.push({ chartId: '', expression: this.selectedEndpoints[i].element, type: 'expert' })
-        }
-      }
-      this.chart = chart
-      this.rightBox.show = true
-    },
-    dropdownHandler (show) {
-      if (show) {
-        clearTimeout(timeout)
-        this.dropdownShow = true
-      } else {
-        timeout = setTimeout(() => {
-          this.dropdownShow = false
-        }, 700)
-      }
-    },
-    createSuccess (type, response, param, panel) {
-      this.$confirm(this.$t('dashboard.metric.goPanelTip'), this.$t('tip.saveSuccess'), {
-        confirmButtonText: this.$t('tip.yes'),
-        cancelButtonText: this.$t('tip.no'),
-        type: 'success'
-      }).then(() => {
-        bus.$emit('menu-change', 'panel')
-        this.$store.state.showPanel.id = panel.id
-        this.$store.state.showPanel.name = panel.name
-        this.$router.push({
-          path: '/panel',
-          query: {
-            t: +new Date()
-          }
-        })
-      })
-    },
-    tableReload () {
-      const table = this.$refs.endpointQueryTable
-      internal = setInterval(() => {
-        if (!window.resizing) {
-          table.setHeight()
-          clearInterval(internal)
-        }
-      }, 200)
-    },
-    queryEndpoint () {
-      this.loading = true
-      this.queryElementTips()
-      this.queryData = []
-      this.tableData = []
-      this.tableDataCopy = ''
-      setTimeout(() => {
-        this.$get('/prom/api/v1/query?query=' + encodeURIComponent("{endpoint_id='" + this.currentEndpoint.id + "'}") + '&time=' + this.formatTime).then(response => {
-          this.loading = false
-          if (response.status === 'success') {
-            const results = response.data.result
-            this.queryData = JSON.parse(JSON.stringify(results))
-            this.tableData = this.handlerTableData(results)
-            this.tableDataCopy = JSON.stringify(this.tableData)
-            this.$nextTick(this.$refs.endpointQueryTable.doLayout())
-            if (!this.scrollbarWrap) {
-              this.$nextTick(() => {
-                this.scrollbarWrap = this.$refs.endpointQueryTable.$refs.singleTable.bodyWrapper
-                this.toTopBtnHandler(this.scrollbarWrap)
-              })
-            }
-          }
-        })
-      }, 450)
-    },
-    clearSelectedMetrics () {
-      this.$refs.endpointQueryTable.clearSelection()
-    },
-    changeTime (size, unit) {
-      this.formatTime = this.getTime(size, unit)
-      this.showEndpoint()
-    },
-    pickTime () {
-      this.showEndpoint()
-    },
-    getTime (size, unit) { // 计算时间
-      const now = !this.formatTime ? new Date(bus.computeTimezone(new Date().getTime())) : new Date(this.formatTime)
-      if (unit) {
-        switch (unit) {
-          case 'y':
-            now.setFullYear(now.getFullYear() + size)
-            break
-          case 'M':
-            now.setMonth(now.getMonth() + size)
-            break
-          case 'd':
-            now.setDate(now.getDate() + size)
-            break
-          case 'h':
-            now.setHours(now.getHours() + size)
-            break
-          case 'm':
-            now.setMinutes(now.getMinutes() + size)
-            break
-          case 's':
-            now.setSeconds(now.getSeconds() + size)
-            break
-          default:
-            console.error('unit error')
-        }
-      } else {
-        now.setSeconds(now.getSeconds() + size)
-      }
-      const year = now.getFullYear()
-      let month = now.getMonth() + 1
-      month = month < 10 ? '0' + month : month
-      let day = now.getDate()
-      day = day < 10 ? '0' + day : day
-      let hour = now.getHours()
-      hour = hour < 10 ? '0' + hour : hour
-      let minute = now.getMinutes()
-      minute = minute < 10 ? '0' + minute : minute
-      let second = now.getSeconds()
-      second = second < 10 ? '0' + second : second
-      return year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second
-    },
-    handlerTableData (results) {
-      const tableData = []
-      for (const result of results) {
-        const metricName = result.metric.__name__
-        let temp = metricName
-        let simpleTemp = metricName// 显示简略信息：隐藏same labels后的结果
-        const metricColor = ''
-        const bracketsColor = '#eb7b18'// #eb7b18
-        const labelColor = '#65bbd1'// #66d9ef
-        const valueColor = '#61c261'// #74e680
-        let colorTemp = `<span style="${metricColor}">${metricName}</span>`
-        let colorSimpleTemp = `<span>${metricName}</span>`
-        let metricTip = {}
-        const queryInfos = (this.elementMetricDatas.filter((item) => {
-          return item.metric === temp
-        }))
-        if (queryInfos && queryInfos.length > 0) {
-          metricTip = queryInfos[0]
-        } else {
-          metricTip.metric = temp
-        }
-        delete result.metric.__name__
-        temp += '{'
-        simpleTemp += '{'
-        colorTemp += `<span style="color: ${bracketsColor}">{</span>`
-        colorSimpleTemp += `<span style="color: ${bracketsColor}">{</span>`
-        const keys = Object.keys(result.metric)
-        for (const index in keys) {
-          const key = keys[index]
-          temp += key + "='" + result.metric[key] + "',"
-          colorTemp += `<span style="color: ${labelColor}">${key}</span>=<span style="color: ${valueColor}">'${result.metric[key]}'</span>,`
-          if (!this.sameLabels.some((i) => { return i == key })) {
-            simpleTemp += key + "='" + result.metric[key] + "',"
-            colorSimpleTemp += `<span style="color: ${labelColor}">${key}</span>=<span style="color: ${valueColor}">'${result.metric[key]}'</span>,`
-          }
-        }
-        if (temp.indexOf(',') !== -1) {
-          temp = temp.substr(0, temp.length - 1)
-        }
-        if (simpleTemp.indexOf(',') !== -1) {
-          simpleTemp = simpleTemp.substr(0, simpleTemp.length - 1)
-        }
-        if (colorTemp.indexOf(',') !== -1) {
-          colorTemp = colorTemp.substr(0, colorTemp.length - 1)
-        }
-        if (colorSimpleTemp.indexOf(',') !== -1) {
-          colorSimpleTemp = colorSimpleTemp.substr(0, colorSimpleTemp.length - 1)
-        }
-
-        temp += '}'
-        simpleTemp += '}'
-        colorTemp += `<span style="color: ${bracketsColor}">}</span>`
-        colorSimpleTemp += `<span style="color: ${bracketsColor}">}</span>`
-        if (!/.+\{.+\}/.test(simpleTemp)) {
-          simpleTemp = simpleTemp.substr(0, simpleTemp.length - 2)
-        }
-
-        if (!/.+\{<\/span><span.+?>.+?\}/.test(colorSimpleTemp)) {
-          const metricReg = new RegExp('<span.*?>' + metricName + '<\/span>')
-          colorSimpleTemp = metricReg.exec(colorSimpleTemp)[0]
-        }
-
-        const edpQueryData = { element: temp, simpleElement: simpleTemp, colorElement: colorTemp, colorSimpleElement: colorSimpleTemp, value: result.value[1], type: (result.metric.type ? result.metric.type : '2'), metricTip: metricTip }
-        // this.tableData.push(edpQueryData);
-        tableData.push(edpQueryData)
-      }
-      return tableData
-    },
-    selectChange (selection) { // selection 选中的row的数组
-      this.selectedEndpoints = selection
-    },
-    selectable (row, index) {
-      if (this.selectedEndpoints.length >= 20 && !this.selectedEndpoints.includes(row)) {
-        return false
-      } else {
-        return true
-      }
-    },
-    viewGraph () {
-      if (this.selectedEndpoints.length < 1) {
-        return
-      }
-
-      this.chartDatas = []
-      this.legend = []
-      this.graphShow = true
-      this.$refs.pickTime.$refs.multipleTime.searchTime = []
-      this.$refs.pickTime.$refs.multipleTime.showTime = {
-        id: 12,
-        text: this.$t('dashboard.panel.noDate')
-      }
-      this.$refs.pickTime.$refs.multipleTime.showDropdown = false
-      this.$nextTick(() => {
-        this.$refs.endpointChart.startLoading()
-        this.queryChartDate()
-      })
-    },
-    dialogClose () {
-      this.$refs.pickTime.$refs.multipleTime.searchTime = []
-      this.$refs.pickTime.$refs.multipleTime.showTime = {
-        id: 12,
-        text: this.$t('dashboard.panel.noDate')
-      }
-      this.$refs.pickTime.$refs.multipleTime.showDropdown = false
-      this.graphShow = false
-    },
-    chartUnitChange (unit) {
-      this.chartUnit = unit
-      this.$nextTick(() => {
-        this.queryChartDate()
-      })
-    },
-    queryChartDate () {
-      const start = this.searchTime[0] ? this.searchTime[0] : this.getTime(-1, 'h')
-      const end = this.searchTime[1] ? this.searchTime[1] : this.getTime(0, 'h')
-      this.searchTime = [start, end]
-      const timeDiff = (new Date(end).getTime() - new Date(start).getTime()) / 1000 / (24 * 60 * 60)
-      // end - start < 1 day : 15s
-      // end - start < 7 day : 5m
-      // end - start < 30 day : 10m
-      // end - start > 30 day : 30m
-      let step = '15s'
-      if (timeDiff < 1) {
-        step = '15s'
-      } else if (timeDiff < 7) {
-        step = '5m'
-      } else if (timeDiff < 30) {
-        step = '10m'
-      } else {
-        step = '30m'
-      }
-      const axiosArr = []
-      for (const endpoint of this.selectedEndpoints) {
-        axiosArr.push(axios.get('/prom/api/v1/query_range?query=' + encodeURIComponent(endpoint.element) + '&start=' + this.$stringTimeParseToUnix(start) + '&end=' + this.$stringTimeParseToUnix(end) + '&step=' + step))
-      }
-      if (this.$refs.pickTime && this.$refs.pickTime.$refs.multipleTime && this.$refs.pickTime.$refs.multipleTime.searchTime.length) { // 判断是否需要添加比较
-        const startTime = bus.timeFormate(this.$refs.pickTime.$refs.multipleTime.searchTime[0], 'YYYY-MM-DD HH:mm:ss')
-        const endTime = bus.timeFormate(this.$refs.pickTime.$refs.multipleTime.searchTime[1], 'YYYY-MM-DD HH:mm:ss')
-        for (const endpoint of this.selectedEndpoints) {
-          axiosArr.push(axios.get('/prom/api/v1/query_range?query=' + encodeURIComponent(endpoint.element) + '&start=' + this.$stringTimeParseToUnix(startTime) + '&end=' + this.$stringTimeParseToUnix(endTime) + '&step=' + step))
-        }
-      }
-      this.legend = []
-      this.chartDatas = []
-      axios.all(axiosArr).then(res => {
-        res.forEach((response, promIndex) => {
-          if (response.status == 200) {
-            if (response.data.status == 'success') {
-              const queryData = response.data.data.result[0]
-              if (queryData) {
-                const chartData = {
-                  type: 'line',
-                  symbol: 'none', // 去掉点
-                  smooth: 0.2,
-                  lineStyle: {
-                    width: 1,
-                    opacity: 0.9
-                  }
-                }
-                chartData.name = queryData.metric.__name__
-                let alias = queryData.metric.__name__
-                delete queryData.metric.__name__
-                chartData.name += '{'
-                alias += '{'
-                Object.keys(queryData.metric).forEach((item, index) => {
-                  const label = item
-                  const value = queryData.metric[label]
-                  chartData.name += label + "='" + value + "',"
-                  if (!this.sameLabels.some((i) => { return i == label })) {
-                    alias += label + "='" + value + "',"
-                  }
-                })
-                chartData.name = chartData.name.charAt(chartData.name.length - 1) === ',' ? chartData.name.substr(0, chartData.name.length - 1) : chartData.name
-                alias = alias.charAt(alias.length - 1) === ',' ? alias.substr(0, alias.length - 1) : alias
-                chartData.name += '}'
-                alias += '}'
-                if (!/.+\{.+\}/.test(alias)) {
-                  alias = alias.substr(0, alias.length - 2)
-                }
-                const legend = {
-                  name: chartData.name,
-                  alias: alias,
-                  // showText:this.formatLegend(chartData.name),
-                  isGray: false
-                }
-                if (promIndex >= this.selectedEndpoints.length) {
-                  legend.name = 'Previous ' + legend.name
-                  chartData.name = legend.name
-                  legend.alias = 'Previous ' + legend.alias
-                }
-                this.legend.push(legend)
-                chartData.data = queryData.values.map((dpsItem, dpsIndex) => {
-                  return [dpsItem[0] * 1000, Number(dpsItem[1])]
-                })
-                this.chartDatas.push(chartData)
-              }
-            } else {
-              this.$message.error(response.data.error)
-              console.error(response.data)
-            }
-          }
-        })
-
-        if (this.$refs.pickTime.$refs.multipleTime && this.$refs.pickTime.$refs.multipleTime.searchTime.length && res.length > this.selectedEndpoints.length) {
-          const minusTime = (new Date(this.searchTime[0]).getTime() - new Date(this.$refs.pickTime.$refs.multipleTime.searchTime[0]).getTime())
-          this.minusTime = minusTime
-          let cutPoint = 0
-          res.forEach((item, index) => {
-            if (index < res.length / 2) {
-              cutPoint += res[index].data.data.result.length
-            }
-          })
-          this.chartDatas.forEach((item, index) => {
-            if (index >= cutPoint) {
-              this.chartDatas[index].data.forEach((item1, index1) => {
-                item1[0] = item1[0] + minusTime
-              })
-            }
-          })
-        }
-        this.$nextTick(() => {
-          if (this.$refs.endpointChart) {
-            this.$refs.endpointChart.setRandomColors(this.chartDatas.length)
-            this.$refs.endpointChart.setLegend(this.legend)
-            this.$refs.endpointChart.modifyOption('tooltip', 'backgroundColor', 'rgba(221,228,237,1)')
-            this.$refs.endpointChart.modifyOption('tooltip', 'textStyle', { color: '#000' })
-            this.$refs.endpointChart.modifyOption('grid', 'top', 30)
-            this.$refs.endpointChart.modifyOption('grid', 'left', 0)
-            this.$refs.endpointChart.modifyOption('grid', 'right', 30)
-            this.$refs.endpointChart.modifyOption('grid', 'bottom', 8)
-            this.$refs.endpointChart.modifyOption('grid', 'containLabel', true)
-            this.$refs.endpointChart.setSeries(this.chartDatas)
-            this.$refs.endpointChart.endLoading()
-          }
-        })
-      })
-    },
-    cellClass (row) { // 给复选框那一列添加 类名为 ‘disabledCheck’
-      if (row.columnIndex === 0) {
-        return 'disabledCheck'
-      }
-    },
-    getPanelData () { // 获取panel数据
-      this.$get('panel?pageNo=1&pageSize=-1').then(response => {
-        if (response.code === 200) {
-          this.panelData = response.data.list
-        }
-      })
-    },
-    tableFilter () {
-      const temp = this
-      const tableDatas = JSON.parse(this.tableDataCopy)
-      this.tableData = tableDatas.filter((item) => {
-        const element = temp.hideSameLabels ? item.simpleElement : item.element
-        return element.indexOf(this.queryExpression) !== -1
-      })
-    },
-    tableFilterHistory (expression) {
-      let metric = ''
-      let labels = []
-      if (/\w*\{.*\}.*/i.test(expression)) {
-        metric = expression.substr(0, expression.indexOf('{'))
-        const labelStr = expression.substr(expression.indexOf('{') + 1, expression.indexOf('}') - expression.indexOf('{') - 1)
-        const labelArr = labelStr.split(',')
-
-        if (labelArr.length > 0) {
-          labels = labelArr.map((item, index) => {
-            const temp = item.split('=')
-            const label = temp[0] ? temp[0] : null
-            const value = temp[1] ? temp[1] : null
-            return label ? { label: label, value: value } : null
-          })
-        }
-      } else {
-        metric = expression
-      }
-      this.tableData = []
-      let sourceData = JSON.parse(JSON.stringify(this.queryData))
-      sourceData = sourceData.filter((item) => {
-        const metricName = item.metric.__name__
-        if (metricName.indexOf(metric) === -1) {
-          return false
-        }
-
-        if (labels.length > 0) {
-          for (const i in labels) {
-            const label = labels[i]
-            if (label && label.label) {
-              const value = item.metric[label.label]
-              let queryVal = label.value
-              if (/^'.+'$/.test(queryVal)) {
-                queryVal = queryVal.substr(1, queryVal.length - 2)
-              }
-              if (!value || value != queryVal) {
-                return false
-              }
-            } else {
-              return true
-            }
-          }
-        }
-
-        return true
-      })
-      for (const i in sourceData) {
-        const item = sourceData[i]
-        // {"metric":{"instance":"192.168.40.126:9100","__name__":"scrape_duration_seconds","module":"node_exporter","project":"kafka","asset":"192.168.40.126","job":"ed_1","dc":"dc5"},"value":[1580782176.522,"0.000560761"]}
-        const metricName = item.metric.__name__
-        let temp = metricName
-        delete item.metric.__name__
-        temp += '{'
-        const hasLabel = true
-        for (const key in item.metric) {
-          const label = key
-          const value = item.metric[label]
-          temp += label + "='" + value + "',"
-        }
-        temp = temp.charAt(temp.length - 1) == ',' ? temp.substr(0, temp.length - 1) : temp
-        temp += '}'
-        if (hasLabel) {
-          const edpQueryData = { element: temp, value: item.value[1], type: (item.metric.type ? item.metric.type : '2') }
-          this.tableData.push(edpQueryData)
-        }
-      }
-    },
-    focusInput () {
-      let classVal = document.getElementById('elementQuery').parentElement.getAttribute('class')
-      classVal = classVal.replace('query-input-inactive', 'query-input-active')
-      document.getElementById('elementQuery').parentElement.setAttribute('class', classVal)
-      this.$refs.elementQuery.focus()
-    },
-    blurInput () {
-      if (!this.queryExpression || this.queryExpression == '') {
-        setTimeout(function () {
-          let classVal = document.getElementById('elementQuery').parentElement.getAttribute('class')
-          classVal = classVal.replace('query-input-active', 'query-input-inactive')
-          document.getElementById('elementQuery').parentElement.setAttribute('class', classVal)
-        }, 100)
-      }
-    },
-    clearInput () {
-      this.$refs.elementQuery.focus()
-    },
-    queryElementTips: async function () {
-      this.elementMetricDatas = []
-      const response = await axios.get('/metric/metadata?endpointId=' + this.currentEndpoint.id)
-      if (response && response.status === 200) {
-        if (response.data.msg === 'success') {
-          this.elementMetricDatas = response.data.data.list
-        }
-      }
-    },
-    getStateContent (row) {
-      if (row) {
-        if (row.state == 1) {
-          return 'up' + '[' + this.formatUpdateTime(row.lastUpdate) + ']'
-        } else {
-          return 'down' + '[' + this.getStateErrorMsg(row) + ']'
-        }
-      }
-    },
-    formatUpdateTime (date) {
-      const time = new Date(date)
-      const hours = time.getHours() > 9 ? time.getHours() : '0' + time.getHours()
-      const minutes = time.getMinutes() > 9 ? time.getMinutes() : '0' + time.getMinutes()
-
-      return hours + ':' + minutes
-    },
-    getStateErrorMsg (row) {
-      const errCodes = [230009, 230010, 230011]
-      if (row) {
-        if (row.state == 0) {
-          if (errCodes.find((item) => { return row.stateInfo.code == item })) {
-            return this.$t('project.endpoint.stateInfo_' + row.stateInfo.code)
-          } else {
-            this.$message.error('state code error')
-            return row.stateInfo.msg
-          }
-        }
-      }
-    }
-  },
-  watch: {
-    obj: {
-      immediate: true,
-      deep: true,
-      handler (n) {
-        if (n) {
-          this.currentEndpoint = JSON.parse(JSON.stringify(n))
-          this.queryEndpoint()
-        }
-      }
-    },
-    queryExpression (n, o) {
-      const temp = this
-      setTimeout(function () {
-        temp.tableFilter()
-      }, 500)
-    }
-  },
-  mounted () {
-    this.getPanelData()
-    setTimeout(() => { this.$refs.endpointQueryTable.setHeight() }, 700)
-  }
-}
-</script>

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

@@ -735,6 +735,7 @@ export default {
     },
     htmlToPdf () {
       const dom = document.getElementsByClassName(this.pdfId)[0]
+      this.htmlTitle = this.obj.name || 'pdf'
       if (dom) {
         // dom = dom.getElementsByClassName('vue-grid-layout')[0]
         this.scrollbarWrap.scrollTop = this.scrollbarWrap.scrollHeight

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

@@ -22,7 +22,7 @@
 </template>
 
 <script>
-import chartDataFormat from '../charts/chartDataFormat'
+import chartDataFormat from '../chart/chartDataFormat'
 export default {
   name: 'chartUnit',
   model: {

nezha-fronted/src/components/common/globalSearch/searchItemInfo.vue

@@ -91,7 +91,7 @@
 
 <script>
 import lodash from 'lodash'
-import chartDataFormat from '@/components/charts/chartDataFormat'
+import chartDataFormat from '@/components/chart/chartDataFormat'
 import alertDaysInfo from '@/components/common/alert/alertDaysInfo'
 export default {
   name: 'searchItemInfo',

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

@@ -21,6 +21,7 @@ export default {
       }).then(function (canvas) {
         loading.close()
         document.body.style.height = '100%'
+        document.getElementsByClassName('left-menu')[0].style.height = '100%'
         document.getElementsByTagName('html')[0].style.overflow = 'hidden'
         const contentWidth = canvas.width
         const contentHeight = canvas.height
@@ -53,12 +54,13 @@ export default {
       if (flag) {
         loading = Loading.service({
           lock: true,
+          customClass: 'export-pdf-mask',
           text: this.$t('overall.downloadProgress') + 'pdf...',
-          background: 'rgba(0,500,200,.5)'
+          background: 'rgba(0,0,0,.3)'
         })
       } else {
         if (loading) {
-          loading.close()
+          // loading.close()
           document.body.style.height = '100%'
           document.getElementsByTagName('html')[0].style.overflow = 'hidden'
         }

nezha-fronted/src/components/common/project/L5/CanvasProps.vue

@@ -1093,7 +1093,7 @@
 <script>
 import { alignNodes, spaceBetween, layout } from '@topology/layout'
 import { getTopology, resetZIndex } from '../../js/common'
-import chartDataFormat from '../../../charts/chartDataFormat'
+import chartDataFormat from '../../../chart/chartDataFormat'
 import promqlInput from '../../../page/dashboard/explore/promqlInput'
 import nezhaColor from '../../nezhaColor'
 import promqlInputMixin from '@/components/common/mixin/promqlInput'

nezha-fronted/src/components/common/project/L5/topoTooltip.vue

@@ -32,14 +32,14 @@
 </template>
 
 <script>
-import lineChartBlock from '../../../charts/line-chart-block'
+import lineChartBlock from '@/components/chart/chart/line-chart-block'
-import chartTable from '../../../charts/chart-table'
+import chartTable from '@/components/chart/chart/chart-table'
 import bus from '../../../../libs/bus'
 import ExpressionInfo from '../popData/expressionInfo'
 import { fromRoute } from '@/components/common/js/constants'
-import chartTempData from '@/components/charts/chartTempData'
+import chartTempData from '@/components/chart/chartTempData'
 import axios from 'axios'
-import chartDataFormat from '@/components/charts/chartDataFormat'
+import chartDataFormat from '@/components/chart/chartDataFormat'
 import { dealLegendAlias } from '@/components/common/js/tools'
 export default {
   name: 'topoTooltip',

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

@@ -342,11 +342,11 @@
 </template>
 
 <script>
-import chartDataFormat from '../../charts/chartDataFormat'
+import chartDataFormat from '../../chart/chartDataFormat'
 import promqlInput from '../../page/dashboard/explore/promqlInput'
 import { noSpecialChar, nzNumber } from '../js/validate'
 import editRigthBox from '../mixin/editRigthBox'
-import richTextEditor from '@/components/charts/richTextEditor'
+import richTextEditor from '@/components/chart/richTextEditor'
 import promqlInputMixin from '@/components/common/mixin/promqlInput'
 export default {
   name: 'alertRuleBox',

nezha-fronted/src/components/common/rightBox/chart/otherChartConfig.vue

@@ -156,7 +156,7 @@
 import publicConfig from '@/components/common/rightBox/chart/publicConfig'
 import chartTypeShow from '@/components/common/rightBox/chart/chartTypeShow'
 import diagram from '@/components/common/ChartDiagram/diagram'
-import richTextEditor from '@/components/charts/richTextEditor'
+import richTextEditor from '@/components/chart/richTextEditor'
 export default {
   name: 'otherChartConfig',
   mixins: [publicConfig, chartTypeShow],

nezha-fronted/src/components/common/rightBox/chart/publicConfig.js

@@ -1,4 +1,4 @@
-import chartDataFormat from '@/components/charts/chartDataFormat'
+import chartDataFormat from '@/components/chart/chartDataFormat'
 import { getUUID, resetZIndex } from '@/components/common/js/common'
 import { randomcolor, ColorReverse } from '@/components/common/js/radomcolor/randomcolor'
 import { isStat } from '@/components/chart/chart/tools'

nezha-fronted/src/components/common/table/alert/alertMessageTable.vue

@@ -140,7 +140,7 @@ import bus from '../../../../libs/bus'
 import axios from 'axios'
 import table from '@/components/common/mixin/table'
 import nzAlertTag from '../../../page/alert/nzAlertTag'
-import chartDataFormat from '../../../charts/chartDataFormat'
+import chartDataFormat from '../../../chart/chartDataFormat'
 import alertRuleInfo from '../../alert/alertRuleInfo'
 import alertLabel from '../../alert/alertLabel'
 import { calcDurationByStringTimeB } from '../../js/tools'

nezha-fronted/src/components/common/table/alert/alertRuleTable.vue

@@ -158,7 +158,7 @@
 
 <script>
 import table from '@/components/common/mixin/table'
-import chartDataFormat from '@/components/charts/chartDataFormat'
+import chartDataFormat from '@/components/chart/chartDataFormat'
 export default {
   name: 'alertRuleTable',
   mixins: [table],

nezha-fronted/src/components/common/table/special/endpointQueryTab.vue

@@ -71,41 +71,10 @@
         @showFullscreen="showFullscreen"
       ></panel-chart>
     </el-dialog>
-<!--    <el-dialog class="line-chart-block-modal nz-dialog endpoint-dialog"-->
-<!--               :title="$t('project.endpoint.dialogTitle')"-->
-<!--               :visible.sync="graphShow"-->
-<!--               width="90%"-->
-<!--               height="80%"-->
-<!--               :modal-append-to-body="false"-->
-<!--               id="viewGraphDialog"-->
-<!--               @close="dialogClose">-->
-<!--      <div slot="title">-->
-<!--        {{$t("project.endpoint.dialogTitle")}}-->
-<!--        <div class="float-right panel-calendar dialog-tool" style="display: flex;margin-right: 30px">-->
-<!--          <pick-time :refresh-data-func="queryChartDate" :use-refresh="false" v-model="searchTime" style="height: 28px;" @unitChange="chartUnitChange" id="endpoint-query-full-chart" :show-multiple="true" ref="pickTime"></pick-time>-->
-<!--          <button id="endpoint-query-full-chart-save" v-has="'main_add'" class="nz-btn nz-btn-size-large nz-btn-style-normal" @click="saveChart">{{$t('dashboard.metric.saveChart')}}</button>-->
-<!--        </div>-->
-<!--      </div>-->
-<!--      <chart ref="endpointChart" :unit="chartUnit" :minusTime="minusTime" v-if="graphShow"></chart>-->
-<!--    </el-dialog>-->
     <transition name="right-box">
       <chart-box :chart="chart" :panel-data="panelData" :show-panel="{id: -1, name: '', type: 'endpointQuery'}" @close="rightBox.show = false" @on-create-success="createSuccess" @reload="getPanelData" @reloadOnlyPanel="getPanelData" box-class="save-chart-box" from="project_endpoint_query" ref="addChartModal" v-if="rightBox.show" style="z-index: 2900" :fromEndpoint="true"></chart-box>
     </transition>
     <transition name="right-box">
-      <!--      <chart-box-->
-      <!--        v-if="rightBox.chart.show"-->
-      <!--        ref="addChartModal"-->
-      <!--        :chart="chart"-->
-      <!--        :from="fromRoute.panel"-->
-      <!--        :panel-data="panelData"-->
-      <!--        :show-panel="showPanel"-->
-      <!--        @close="closeChartBox"-->
-      <!--        @reload="panelReload"-->
-      <!--        @reloadOnlyPanel="panelReloadOnlyPanel"-->
-      <!--        @delete-chart="delChart"-->
-      <!--        @on-create-success="createSuccess"-->
-      <!--        @on-delete-success="delChartOk"-->
-      <!--      ></chart-box>-->
       <chart-right-box
         v-if="chartRightBoxShow"
         v-loading="rightBox.loading"
@@ -122,9 +91,7 @@
 </template>
 
 <script>
-import chartBox from '@/components/page/dashboard/chartBox'
 import chartRightBox from '@/components/common/rightBox/chart/chartRightBox'
-import axios from 'axios'
 import bus from '../../../../libs/bus'
 import chart from '@/components/page/dashboard/overview/chart'
 import { sameLabels, fromRoute } from '@/components/common/js/constants'
@@ -135,7 +102,6 @@ import lineData from '@/components/chart/defaultLineData'
 export default {
   name: 'endpointQueryTab',
   components: {
-    chartBox,
     chart,
     metaData,
     panelChart,

nezha-fronted/src/components/page/alert/alertMessage.vue

@@ -151,7 +151,7 @@ import alertMessageTable from '@/components/common/table/alert/alertMessageTable
 import deleteButton from '@/components/common/deleteButton'
 import nzDataList from '@/components/common/table/nzDataList'
 import dataListMixin from '@/components/common/mixin/dataList'
-import chartDataFormat from '@/components/charts/chartDataFormat'
+import chartDataFormat from '@/components/chart/chartDataFormat'
 import chart from '@/components/page/dashboard/overview/chart'
 import { alertMessage as alertMessageConstant, fromRoute } from '@/components/common/js/constants'
 import alertSilenceBox from '@/components/common/rightBox/alertSilenceBox'

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

@@ -100,7 +100,6 @@
 
 <script>
 import exportXLSX from '@/components/common/exportXLSX'
-import chartBox from '@/components/page/dashboard/chartBox'
 import deleteButton from '@/components/common/deleteButton'
 import dataListMixin from '@/components/common/mixin/dataList'
 import chartTmplTable from '@/components/common/table/settings/chartTmplTable'
@@ -112,7 +111,6 @@ import { randomcolor } from '@/components/common/js/radomcolor/randomcolor'
 export default {
   name: 'chartTemp',
   components: {
-    chartBox,
     deleteButton,
     chartTmplTable,
     'export-excel': exportXLSX,

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

@@ -331,9 +331,8 @@ import bus from '../../../../libs/bus'
 import promqlInput from './promqlInput'
 import chart from '../overview/chart'
 import axios from 'axios'
-import chartBox from '../../../page/dashboard/chartBox'
 import { getUUID } from '../../../common/js/common'
-import chartDataFormat from '../../../charts/chartDataFormat'
+import chartDataFormat from '../../../chart/chartDataFormat'
 import logTab from './logTab'
 import promqlInputMixin from '@/components/common/mixin/promqlInput'
 import chartRightBox from '@/components/common/rightBox/chart/chartRightBox'
@@ -342,7 +341,6 @@ export default {
   name: 'exploreItem',
   components: {
     'promql-input': promqlInput,
-    'chart-box': chartBox,
     chartRightBox,
     chart,
     logTab

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

@@ -18,7 +18,7 @@
 
 <script>
 import * as echarts from 'echarts'
-import chartDataFormat from '../../../charts/chartDataFormat'
+import chartDataFormat from '../../../chart/chartDataFormat'
 import loading from '../../../common/loading'
 import chartConfig from './chartConfig'
 import bus from '../../../../libs/bus'

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

@@ -110,20 +110,6 @@
     <button :class="{'to-top-is-hover': tableHover}" @click="toTop(scrollbarWrap)" class="to-top" style="bottom: 0;" v-show="showTopBtn"><i class="nz-icon nz-icon-top"></i></button>
 
     <transition name="right-box">
-<!--      <chart-box-->
-<!--        v-if="rightBox.chart.show"-->
-<!--        ref="addChartModal"-->
-<!--        :chart="chart"-->
-<!--        :from="fromRoute.panel"-->
-<!--        :panel-data="panelData"-->
-<!--        :show-panel="showPanel"-->
-<!--        @close="closeChartBox"-->
-<!--        @reload="panelReload"-->
-<!--        @reloadOnlyPanel="panelReloadOnlyPanel"-->
-<!--        @delete-chart="delChart"-->
-<!--        @on-create-success="createSuccess"-->
-<!--        @on-delete-success="delChartOk"-->
-<!--      ></chart-box>-->
       <chart-right-box
         v-if="chartRightBoxShow"
         v-loading="rightBox.loading"
@@ -150,7 +136,6 @@
 </template>
 
 <script>
-import ChartBox from './chartBox'
 import chartRightBox from '@/components/common/rightBox/chart/chartRightBox'
 import bus from '../../../libs/bus'
 import pickTime from '../../common/pickTime'
@@ -285,7 +270,6 @@ export default {
     }
   },
   components: {
-    'chart-box': ChartBox,
     'pick-time': pickTime,
     'panel-box': panelBox,
     topToolMoreOptions,
@@ -835,6 +819,7 @@ export default {
       let dom = document.getElementsByClassName(this.pdfId)[0]
       if (dom) {
         // dom = dom.getElementsByClassName('vue-grid-layout')[0]
+        this.htmlTitle = this.panel.name
         this.scrollbarWrap.scrollTop = this.scrollbarWrap.scrollHeight
         this.$refs.chartList.onScroll(this.scrollbarWrap.scrollTop)
         let flag = true
@@ -855,6 +840,7 @@ export default {
             timer = null
             setTimeout(() => {
               document.body.style.height = 'auto'
+              document.getElementsByClassName('left-menu')[0].style.height = '100vh'
               // document.getElementsByTagName('html')[0].style.overflow = 'visible'
               const position = dom.getBoundingClientRect()
               console.log(position)