NEZ-1779 fix : 恢复和删除接口功能实现 Lint代码

nezha-fronted/package.json

@@ -13,8 +13,8 @@
   "dependencies": {
     "@johmun/vue-tags-input": "^2.1.0",
     "@riophae/vue-treeselect": "^0.4.0",
-    "@svgdotjs/svg.js": "^3.0.16",
+    "@svgdotjs/svg.js": "3.0.16",
-    "@svgdotjs/svg.panzoom.js": "^2.1.1",
+    "@svgdotjs/svg.panzoom.js": "2.1.1",
     "@topology/activity-diagram": "^0.3.0",
     "@topology/chart-diagram": "^0.3.0",
     "@topology/class-diagram": "^0.3.0",

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/assets/css/font/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "nz-icon"; /* Project id 2030432 */
-  src: url('iconfont.woff2?t=1647598587378') format('woff2'),
+  src: url('iconfont.woff2?t=1649732646689') format('woff2'),
-       url('iconfont.woff?t=1647598587378') format('woff'),
+       url('iconfont.woff?t=1649732646689') format('woff'),
-       url('iconfont.ttf?t=1647598587378') format('truetype');
+       url('iconfont.ttf?t=1649732646689') format('truetype');
 }
 
 .nz-icon {
@@ -13,6 +13,50 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.nz-icon-tool:before {
+  content: "\e76f";
+}
+
+.nz-icon-export-pdf:before {
+  content: "\e770";
+}
+
+.nz-icon-Router:before {
+  content: "\e766";
+}
+
+.nz-icon-Computer:before {
+  content: "\e767";
+}
+
+.nz-icon-a-Networkdevices:before {
+  content: "\e768";
+}
+
+.nz-icon-Other:before {
+  content: "\e769";
+}
+
+.nz-icon-a-Virtualmachine:before {
+  content: "\e76a";
+}
+
+.nz-icon-Switch:before {
+  content: "\e76b";
+}
+
+.nz-icon-Server:before {
+  content: "\e76c";
+}
+
+.nz-icon-ADC:before {
+  content: "\e76d";
+}
+
+.nz-icon-Firewall:before {
+  content: "\e76e";
+}
+
 .nz-icon-Topology:before {
   content: "\e763";
 }

nezha-fronted/src/assets/css/nzIcon.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "nz-icon"; /* Project id 2030432 */
-  src: url('./font/iconfont.woff2?t=1647598587378') format('woff2'),
+  src: url('./font/iconfont.woff2?t=1649732646689') format('woff2'),
-  url('./font/iconfont.woff?t=1647598587378') format('woff'),
+       url('./font/iconfont.woff?t=1649732646689') format('woff'),
-  url('./font/iconfont.ttf?t=1647598587378') format('truetype');
+       url('./font/iconfont.ttf?t=1649732646689') format('truetype');
 }
 
 .nz-icon {
@@ -13,6 +13,50 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.nz-icon-tool:before {
+  content: "\e76f";
+}
+
+.nz-icon-export-pdf:before {
+  content: "\e770";
+}
+
+.nz-icon-Router:before {
+  content: "\e766";
+}
+
+.nz-icon-Computer:before {
+  content: "\e767";
+}
+
+.nz-icon-a-Networkdevices:before {
+  content: "\e768";
+}
+
+.nz-icon-Other:before {
+  content: "\e769";
+}
+
+.nz-icon-a-Virtualmachine:before {
+  content: "\e76a";
+}
+
+.nz-icon-Switch:before {
+  content: "\e76b";
+}
+
+.nz-icon-Server:before {
+  content: "\e76c";
+}
+
+.nz-icon-ADC:before {
+  content: "\e76d";
+}
+
+.nz-icon-Firewall:before {
+  content: "\e76e";
+}
+
 .nz-icon-Topology:before {
   content: "\e763";
 }

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/chartMixin.js

@@ -297,4 +297,3 @@ export default {
     setChart(this.chartId, null)
   }
 }
- 

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'
 
@@ -99,7 +99,8 @@ export default {
       showAllData: false,
       allDataLength: 0,
       severityData: this.$store.getters.severityData,
-      severityDataWeight: this.$store.getters.severityDataWeight
+      severityDataWeight: this.$store.getters.severityDataWeight,
+      isExportData: false
     }
   },
   computed: {
@@ -161,6 +162,9 @@ export default {
     query (elements, startTime, endTime, step, params) {
       this.isError = false
       this.allDataLength = 0
+      if (this.isExportData) {
+        this.chartData = this.chartInfo.chartData
+      }
       try {
         switch (this.chartInfo.datasource) {
           case 'metrics':

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/alertMessageInfo.vue

@@ -56,10 +56,10 @@
 import ChartScreenHeader from '@/components/chart/ChartScreenHeader'
 import chart from '@/components/chart/chart'
 import { isChartPie, isTimeSeries, getGroupHeight, isGroup } from '@/components/chart/chart/tools'
-import {alertMessage as alertMessageConstant, chartType, fromRoute} from '@/components/common/js/constants'
+import { alertMessage as alertMessageConstant, 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'
 import alertMessageInfoTab from '@/components/common/alert/alertMessageInfoTab'

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

@@ -77,7 +77,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',
@@ -149,7 +149,6 @@ export default {
       })
     },
     returnColor (obj) {
-      console.log(obj,  this.severityDataWeight)
       let color = ''
       if (!obj) {
         color = '#23bf9a'

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

@@ -126,7 +126,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/panelTabNew.vue

@@ -41,6 +41,9 @@
               <el-dropdown-item v-has="'main_edit'">
                 <div id="chart-temp-sync" @click="chartBySync"><i class="nz-icon nz-icon-sync"></i>{{ $t('overall.syncChart') }}</div>
               </el-dropdown-item>
+              <el-dropdown-item v-has="'main_edit'">
+                <div id="chart-htmltopdf" @click="htmlToPdf"><i class="nz-icon nz-icon-download1"></i>{{ $t('overall.downloadToPdf') }}</div>
+              </el-dropdown-item>
             </template>
           </top-tool-more-options>
         </div>
@@ -72,6 +75,9 @@
               <el-dropdown-item v-has="'main_edit'">
                 <div id="chart-temp-sync" @click="chartBySync"><i class="nz-icon nz-icon-sync"></i>{{ $t('overall.syncChart') }}</div>
               </el-dropdown-item>
+              <el-dropdown-item v-has="'main_edit'">
+                <div id="chart-htmltopdf" @click="htmlToPdf"><i class="nz-icon nz-icon-download1"></i>{{ $t('overall.downloadToPdf') }}</div>
+              </el-dropdown-item>
             </template>
           </top-tool-more-options>
         </div>
@@ -146,9 +152,10 @@ import chartTempBox from '@/components/common/rightBox/chartTempBox'
 import topToolMoreOptions from '@/components/common/popBox/topToolMoreOptions'
 import detailViewRightMixin from '@/components/common/mixin/detailViewRightMixin'
 import { randomcolor } from '@/components/common/js/radomcolor/randomcolor'
+import htmlToPdfMixin from '@/components/common/mixin/htmlToPdfMixin'
 export default {
   name: 'panelTabNew',
-  mixins: [subDataListMixin, detailViewRightMixin],
+  mixins: [subDataListMixin, detailViewRightMixin, htmlToPdfMixin],
   props: {
     from: String,
     obj: Object,
@@ -172,6 +179,7 @@ export default {
   data () {
     return {
       fromRoute,
+      pdfId: 'pdfDom',
       panelTabLoading: false,
       showTopBtn: false, // top按钮
       visible: false,
@@ -724,6 +732,43 @@ export default {
       if (type === 'duplicate') {
         this.editChart(chartInfo, true)
       }
+    },
+    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
+        this.$refs.chartList.onScroll(this.scrollbarWrap.scrollTop)
+        let flag = true
+        this.showScreenLoading(true)
+        let timer = setInterval(() => {
+          flag = true
+          this.$refs.chartList.copyDataList.forEach(chart => {
+            if (chart.type !== 'group') {
+              flag = flag && chart.loaded
+            } else if (chart.collapse) {
+              chart.children.forEach(groupChart => {
+                flag = flag && groupChart.loaded
+              })
+            }
+          })
+          if (flag) {
+            clearInterval(timer)
+            timer = null
+            setTimeout(() => {
+              document.body.style.height = 'auto'
+              // document.getElementsByTagName('html')[0].style.overflow = 'visible'
+              const position = dom.getBoundingClientRect()
+              console.log(position)
+              this.getPdf(dom, -1 * position.left, -1 * position.top)
+              // this.getPdf(dom, 0, 0)
+            }, 2000)
+          }
+        }, 200)
+      } else {
+        this.showScreenLoading(false)
+      }
     }
   },
   mounted () {

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/detailView/list/endpoint/endpointDetail.vue

@@ -108,7 +108,7 @@ export default {
           label: this.$t('project.endpoint.state'),
           prop: 'state',
           show: true,
-          minWidth: 200,
+          minWidth: 200
         }
         // {
         //   label: this.$t('project.endpoint.status'),

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,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/js/validate.js

@@ -200,14 +200,12 @@ export function arrLength (rule, value, callback) { // 校验数组
   }
 }
 export function datePicker (rule, value, callback) { // 校验时间选择
-  if(value[0]&&value[1]){
+  if (value[0] && value[1]) {
     callback()
-  }else{
+  } else {
     callback(new Error(vm.$t('validate.required')))
   }
-   
+}
-  }
-
 
 export function sysObjectIdInput (rule, value, callback) {
   const sysId = /^(\d{1,9}\.){0,}[\d]+$/

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

@@ -5,7 +5,7 @@ export default {
       type: Array
     },
     targetTab: String,
-    from: String,
+    from: String
   },
   data () {
     return {

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/project/popData/assetTable.vue

@@ -114,7 +114,7 @@ export default {
           label: this.$t('asset.alertNum'),
           prop: 'alertNum',
           show: true,
-          width: 120,
+          width: 120
         }, {
           label: this.$t('asset.endpointNum2'),
           prop: 'endpointNum',

nezha-fronted/src/components/common/rightBox/administration/backupsBox.vue

@@ -169,88 +169,88 @@
 </template>
 
 <script>
-import bus from "@/libs/bus";
+import bus from '@/libs/bus'
-import { put } from "@/http";
+import { put } from '@/http'
-import { arrLength, datePicker } from "@/components/common/js/validate";
+import { arrLength, datePicker } from '@/components/common/js/validate'
-import moment from "moment-timezone";
+import moment from 'moment-timezone'
 
 export default {
-  name: "backupsBox",
+  name: 'backupsBox',
   props: {
     obj: {
-      type: Object,
+      type: Object
+    }
   },
-  },
+  data () {
-  data() {
     return {
       editBackup: {
-        status: "",
+        status: '',
         checkDays: [],
         checkDay: [],
-        timepicker: "",
+        timepicker: '',
-        datepicker: "",
+        datepicker: '',
-        retention: "",
+        retention: '',
-        state: "",
+        state: '',
         schedule: {
-          repeat: "",
+          repeat: '',
-          stime: "",
+          stime: '',
-          type: "",
+          type: '',
-          nums: [],
+          nums: []
+        }
       },
-      },
+      whoshow: '',
-      whoshow: "",
+      activeName: '',
-      activeName: "",
+      dateFormatStr: localStorage.getItem('nz-default-dateFormat')
-      dateFormatStr: localStorage.getItem("nz-default-dateFormat")
+        ? localStorage.getItem('nz-default-dateFormat')
-        ? localStorage.getItem("nz-default-dateFormat")
+        : 'YYYY-MM-DD HH:ss:mm',
-        : "YYYY-MM-DD HH:ss:mm",
       rules: {
         type: [
           {
             required: true,
-            message: this.$t("validate.required"),
+            message: this.$t('validate.required'),
-            trigger: "change",
+            trigger: 'change'
-          },
+          }
         ],
-        datepicker: [{ validator: datePicker, trigger: "blur" }],
+        datepicker: [{ validator: datePicker, trigger: 'blur' }],
         checkDays: [
           {
             required: true,
-            message: this.$t("validate.required"),
+            message: this.$t('validate.required'),
-            trigger: "change",
+            trigger: 'change'
           },
-          { validator: arrLength, trigger: "blur" },
+          { validator: arrLength, trigger: 'blur' }
         ],
         retention: [
           {
             required: true,
-            message: this.$t("validate.required"),
+            message: this.$t('validate.required'),
-            trigger: ["blur", "change"],
+            trigger: ['blur', 'change']
-          },
+          }
         ],
         Status: [
           {
             required: true,
-            message: this.$t("validate.required"),
+            message: this.$t('validate.required'),
-            trigger: "change",
+            trigger: 'change'
-          },
+          }
         ],
         repeat: [
           {
             required: true,
-            message: this.$t("validate.required"),
+            message: this.$t('validate.required'),
-            trigger: "blur",
+            trigger: 'blur'
-          },
+          }
         ],
-        checkDay: [{ validator: arrLength, trigger: "blur" }],
+        checkDay: [{ validator: arrLength, trigger: 'blur' }]
       },
       week: [
-        this.$t("week.Mon"),
+        this.$t('week.Mon'),
-        this.$t("week.Tue"),
+        this.$t('week.Tue'),
-        this.$t("week.Wed"),
+        this.$t('week.Wed'),
-        this.$t("week.Thu"),
+        this.$t('week.Thu'),
-        this.$t("week.Fri"),
+        this.$t('week.Fri'),
-        this.$t("week.Sat"),
+        this.$t('week.Sat'),
-        this.$t("week.Sun"),
+        this.$t('week.Sun')
       ],
       month: [
         1,
@@ -284,209 +284,207 @@ export default {
         29,
         30,
         31,
-        "Last",
+        'Last'
-      ],
+      ]
-    };
+    }
   },
 
   components: {},
 
   computed: {},
 
-  created() {
+  created () {
-    const dateFormatStr = localStorage.getItem("nz-default-dateFormat");
+    const dateFormatStr = localStorage.getItem('nz-default-dateFormat')
     if (dateFormatStr) {
-      this.dateFormatStr = dateFormatStr.split(" ")[0];
+      this.dateFormatStr = dateFormatStr.split(' ')[0]
     } else {
-      this.dateFormatStr = "YYYY-MM-DD";
+      this.dateFormatStr = 'YYYY-MM-DD'
     }
   },
 
-  beforeMount() {},
+  beforeMount () {},
 
-  mounted() {},
+  mounted () {},
 
   methods: {
-    changeCheck(item) {
+    changeCheck (item) {
       if (this.editBackup.type == 3) {
-        const nums = [];
+        const nums = []
-        this.editBackup.nums = [];
+        this.editBackup.nums = []
         for (const i in this.editBackup.checkDay) {
-          nums.push(Number(this.editBackup.checkDay[i]) + 1);
+          nums.push(Number(this.editBackup.checkDay[i]) + 1)
         }
-        this.editBackup.nums = nums;
+        this.editBackup.nums = nums
       } else if (this.editBackup.type == 4) {
-
+        const nums = []
-        const nums = [];
+        this.editBackup.nums = []
-        this.editBackup.nums = [];
         this.editBackup.checkDays.forEach((e, i) => {
           if (e === 31) {
-            nums.push(-1);
+            nums.push(-1)
           } else {
-            nums.push(Number(this.editBackup.checkDays[i]) + 1);
+            nums.push(Number(this.editBackup.checkDays[i]) + 1)
           }
-        });
+        })
-        this.editBackup.nums = nums;
+        this.editBackup.nums = nums
       }
-      this.$forceUpdate();
+      this.$forceUpdate()
     },
-    statusChange(item) {
+    statusChange (item) {
-      this.$forceUpdate();
+      this.$forceUpdate()
       if (item == true) {
-        this.editBackup.state = 1;
+        this.editBackup.state = 1
       } else {
-        this.editBackup.state = 0;
+        this.editBackup.state = 0
       }
     },
-    save() {
+    save () {
       this.$refs.backupsForm.validate((valid) => {
         if (valid) {
           this.editBackup.datepicker[0] = bus
             .timeFormate(this.editBackup.datepicker[0])
-            .split(" ")[0];
+            .split(' ')[0]
 
-          this.editBackup.stime = this.editBackup.datepicker.join(" ");
+          this.editBackup.stime = this.editBackup.datepicker.join(' ')
-          let offset = localStorage.getItem("nz-sys-timezone");
+          let offset = localStorage.getItem('nz-sys-timezone')
-          offset = moment.tz(offset).format("Z");
+          offset = moment.tz(offset).format('Z')
-          this.editBackup.stime = new Date(this.editBackup.stime).getTime();
+          this.editBackup.stime = new Date(this.editBackup.stime).getTime()
-          offset = Number.parseInt(offset);
+          offset = Number.parseInt(offset)
-          this.editBackup.stime -= offset * 60 * 60 * 1000;
+          this.editBackup.stime -= offset * 60 * 60 * 1000
 
-          put("/sys/backup", {
+          put('/sys/backup', {
             state: Number(this.editBackup.state),
             schedule: {
               type: Number(this.editBackup.type),
               stime: this.editBackup.stime,
               repeat: Number(this.editBackup.repeat),
-              nums: this.editBackup.nums,
+              nums: this.editBackup.nums
             },
-            retention: Number(this.editBackup.retention),
+            retention: Number(this.editBackup.retention)
           }).then((res) => {
             if (res.code === 200) {
-              this.esc(true);
+              this.esc(true)
             }
-          });
+          })
         }
-      });
+      })
     },
-    inputchange(n) {
+    inputchange (n) {
-      this.$forceUpdate();
+      this.$forceUpdate()
     },
-    datasourceChange(tab) {
+    datasourceChange (tab) {
       switch (tab.name) {
-        case "2":
+        case '2':
-          this.whoshow = 2;
+          this.whoshow = 2
-          break;
+          break
-        case "1":
+        case '1':
-          this.whoshow = 1;
+          this.whoshow = 1
-          break;
+          break
-        case "3":
+        case '3':
-          this.whoshow = 3;
+          this.whoshow = 3
-          break;
+          break
-        case "4":
+        case '4':
-          this.whoshow = 4;
+          this.whoshow = 4
-          break;
+          break
       }
-      this.$forceUpdate();
+      this.$forceUpdate()
     },
-    clickOutside() {
+    clickOutside () {
-      this.esc(false);
+      this.esc(false)
     },
     /* 关闭弹框 */
-    esc(refresh) {
+    esc (refresh) {
-      this.$emit("close", refresh);
+      this.$emit('close', refresh)
-    },
+    }
   },
 
   watch: {
     obj: {
       deep: true,
       immediate: true,
-      handler(n) {
+      handler (n) {
-        this.editBackup = JSON.parse(JSON.stringify(n));
+        this.editBackup = JSON.parse(JSON.stringify(n))
-        this.editBackup.checkDay = [];
+        this.editBackup.checkDay = []
-        this.editBackup.checkDays = [];
+        this.editBackup.checkDays = []
-        this.editBackup.type = this.editBackup.type + "";
+        this.editBackup.type = this.editBackup.type + ''
-        const stime1 = this.utcTimeToTimezoneStr(this.editBackup.stime);
+        const stime1 = this.utcTimeToTimezoneStr(this.editBackup.stime)
-        const stime = this.utcTimeToTimezone(this.editBackup.stime);
+        const stime = this.utcTimeToTimezone(this.editBackup.stime)
-        const time = stime1.split(" ");
+        const time = stime1.split(' ')
-        time[0] = stime;
+        time[0] = stime
-        this.$set(this.editBackup, "datepicker", time);
+        this.$set(this.editBackup, 'datepicker', time)
         if (this.editBackup.state == 1) {
-          this.editBackup.status = true;
+          this.editBackup.status = true
-          this.$emit("statechange", true);
+          this.$emit('statechange', true)
         } else {
-          this.editBackup.status = false;
+          this.editBackup.status = false
-          this.$emit("statechange", false);
+          this.$emit('statechange', false)
         }
         switch (this.editBackup.type) {
-          case "1":
+          case '1':
-            this.activeName = "1";
+            this.activeName = '1'
-            this.whoshow = 1;
+            this.whoshow = 1
-            break;
+            break
-          case "2":
+          case '2':
-            this.activeName = "2";
+            this.activeName = '2'
-            this.whoshow = 2;
+            this.whoshow = 2
-            break;
+            break
-          case "3":
+          case '3':
-            this.activeName = "3";
+            this.activeName = '3'
-            this.whoshow = 3;
+            this.whoshow = 3
-            break;
+            break
-          case "4":
+          case '4':
-            this.activeName = "4";
+            this.activeName = '4'
-            this.whoshow = 4;
+            this.whoshow = 4
-            break;
+            break
         }
-        const checkdays = [];
+        const checkdays = []
 
-        this.checkDay = [];
+        this.checkDay = []
         if (this.editBackup.type == 3) {
           this.editBackup.nums.forEach((e) => {
-              if (e == -1 ) {
+            if (e == -1) {
-                  checkdays.push(6);
+              checkdays.push(6)
-            }else{
+            } else {
-                checkdays.push(e - 1);
+              checkdays.push(e - 1)
-
             }
-          });
+          })
-          this.$set(this.editBackup, "checkDay", checkdays);
+          this.$set(this.editBackup, 'checkDay', checkdays)
         } else if (this.editBackup.type == 4) {
           this.editBackup.nums.forEach((e) => {
             if (e == -1) {
-              checkdays.push(31);
+              checkdays.push(31)
             } else {
-              checkdays.push(e - 1);
+              checkdays.push(e - 1)
             }
-          });
+          })
-          this.$set(this.editBackup, "checkDays", checkdays);
+          this.$set(this.editBackup, 'checkDays', checkdays)
+        }
+        this.$forceUpdate()
       }
-        this.$forceUpdate();
     },
-    },
+    'editBackup.status': {
-    "editBackup.status": {
       deep: true,
-      handler(n) {
+      handler (n) {
         if (n) {
-          this.editBackup.state = 1;
+          this.editBackup.state = 1
-          this.editBackup.status = n;
+          this.editBackup.status = n
-          this.$emit("statechange", true);
+          this.$emit('statechange', true)
         } else {
-          this.editBackup.state = 0;
+          this.editBackup.state = 0
-          this.editBackup.status = n;
+          this.editBackup.status = n
-          this.$emit("statechange", false);
+          this.$emit('statechange', false)
+        }
       }
     },
-    },
+    'editBackup.datepicker': {
-    "editBackup.datepicker": {
       deep: true,
-      handler(n) {
+      handler (n) {
         this.editBackup.datepicker[0] = bus
           .timeFormate(new Date(n[0]))
-          .split(" ")[0];
+          .split(' ')[0]
-      },
+      }
-    },
+    }
-  },
+  }
-};
+}
 </script>
 <style lang='' scoped>
 </style>

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',
@@ -642,7 +642,7 @@ export default {
       handler (n, o) {
         this.isEdit = true
         this.editAlertRule = JSON.parse(JSON.stringify(n))
-        console.log(this.editAlertRule);
+        console.log(this.editAlertRule)
         if (this.editAlertRule.id || this.editAlertRule.name) {
           this.expressions = [this.editAlertRule.expr]
           this.showTypeSelect = true // 当 edit 时禁用 type下拉框

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

@@ -93,7 +93,7 @@ export default {
         default: return false
       }
     },
-    isThresholdConfig(type) {
+    isThresholdConfig (type) {
       switch (type) {
         case 'line':
         case 'area':

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

@@ -139,7 +139,7 @@
 import bus from '../../../../libs/bus'
 import axios from 'axios'
 import table from '@/components/common/mixin/table'
-import chartDataFormat from '../../../charts/chartDataFormat'
+import chartDataFormat from '../../../chart/chartDataFormat'
 import alertRuleInfo from '../../alert/alertRuleInfo'
 import { calcDurationByStringTimeB } from '../../js/tools'
 import { alertMessage as alertMessageConstant } from '@/components/common/js/constants'
@@ -148,7 +148,7 @@ import alertMessageLabelMixin from '@/components/common/alert/alertMessageLabelM
 export default {
   name: 'alertMessageTable',
   components: {
-    alertRuleInfo: alertRuleInfo,
+    alertRuleInfo: alertRuleInfo
   },
   props: {
     nowTime: {

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/asset/assetTable.vue

@@ -300,7 +300,7 @@ export default {
     hideTableTooltip,
     tableDataSort (item) {
       let orderBy = ''
-      let str = item.prop
+      const str = item.prop
       if (str === 'dc') {
         orderBy = str
       }

nezha-fronted/src/components/common/table/settings/backupsTable.vue

@@ -65,11 +65,10 @@
 </template>
 
 <script>
-import {  post ,put} from '@/http'
+import { post, put } from '@/http'
 import lodash from 'lodash'
 import bus from '@/libs/bus'
 
-
 export default {
   name: 'backupsTable',
   mixins: [],
@@ -79,7 +78,7 @@ export default {
     customTableTitle: Array,
     isConfigurations: Boolean,
     tableData: Array,
-    tableData2: Array,
+    tableData2: Array
   },
   data () {
     return {
@@ -110,52 +109,46 @@ export default {
 
   computed: {},
 
-
-
   methods: {
-    changeType(item){
+    changeType (item) {
-      if(item == 1){
+      if (item == 1) {
         return this.$t('backup.only')
-      }else if(item ==2){
+      } else if (item == 2) {
         return this.$t('backup.Daily')
-
+      } else if (item == 3) {
-      }else if(item == 3 ){
         return this.$t('backup.Weekly')
-        
+      } else {
-      }else{
         return this.$t('backup.Monthly')
-
       }
     },
-      Restore(row){
+    Restore (row) {
-          put('/sys/backup/restore',{filename:row.fileName}).then(res=>{
+      put('/sys/backup/restore', { filename: row.fileName }).then(res => {
-            if(res.code == 200){
+        if (res.code == 200) {
-                this.$emit("getTableData",'recent')
+          this.$emit("getTableData", 'recent')
-            }else {
+        } else {
           this.$message.error(response.msg)
         }
       })
     },
-      del(row){
+    del (row) {
-          this.$delete('/sys/backup?filename='+row.fileName).then(res=>{
+      this.$delete('/sys/backup?filename=' + row.fileName).then(res => {
-            if(res.code == 200){
+        if (res.code == 200) {
-                this.$emit("getTableData",'recent')
+          this.$emit("getTableData", 'recent')
-            }else {
+        } else {
           this.$message.error(response.msg)
         }
       })
     },
-      changeDate(item){
+    changeDate (item) {
-          let time =Date.parse(item)
+      const time = Date.parse(item)
-          let time1 = this.timeFormate(time)
+      const time1 = this.timeFormate(time)
       return time1
     },
-      getNum(item){
+    getNum (item) {
       return bus.getNumStr(item)
     },
     backupNow (item) {
       post('/sys/backup').then((res) => {
-        // console.log(res)
       })
     },
     edit () {

nezha-fronted/src/components/common/table/settings/ipDetailsTable.vue

@@ -115,12 +115,12 @@ export default {
           label: 'MAC',
           prop: 'mac',
           show: true,
-          minWidth: 200,
+          minWidth: 200
         }, {
           label: this.$t('config.ipamip.asset'),
           prop: 'asset',
           show: true,
-          width: 200,
+          width: 200
         }, {
           label: this.$t('overall.state'),
           prop: 'state',

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-my-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/common/table/tool/pingTable.vue

@@ -23,6 +23,7 @@
       :resizable="true"
       :width="`${item.width}`"
       class="data-column"
+      :sortable="item.sortable"
     >
       <template slot="header">
         <span class="data-column__span">{{item.label}}</span>
@@ -30,8 +31,8 @@
       </template>
       <template slot-scope="scope" :column="item">
         <template v-if="item.prop === 'state'">
-          <div class="active-icon green-bg inline-block" v-if="scope.row.state"></div>
+          <div class="active-icon green-bg inline-block" v-if="scope.row.state===1"></div>
-          <div class="active-icon gray-bg inline-block" v-else></div>
+          <div class="active-icon red-bg inline-block" v-else></div>
         </template>
         <span v-else-if="item.prop === 'dc'&&scope.row[item.prop]!==undefined">{{scope.row[item.prop].name}}</span>
         <span v-else-if="item.prop === 'rate'&&scope.row[item.prop]!==undefined">{{scope.row[item.prop]}}%</span>
@@ -65,28 +66,36 @@ export default {
       tableTitle: [ // 原table列
         {
           label: this.$t('overall.dc'),
-          prop: 'dc'
+          prop: 'dc',
+          sortable: true
         }, {
           label: this.$t('ping.sourceIp'),
-          prop: 'source'
+          prop: 'source',
+          sortable: true
         }, {
           label: this.$t('ping.targetIp'),
-          prop: 'ip'
+          prop: 'ip',
+          sortable: true
         }, {
           label: this.$t('overall.state'),
-          prop: 'state'
+          prop: 'state',
+          sortable: true
         }, {
           label: this.$t('ping.packetLossRate'),
-          prop: 'rate'
+          prop: 'rate',
+          sortable: true
         }, {
           label: this.$t('ping.rttAverage'),
-          prop: 'avg'
+          prop: 'avg',
+          sortable: true
         }, {
           label: this.$t('ping.rttMinimum'),
-          prop: 'min'
+          prop: 'min',
+          sortable: true
         }, {
           label: this.$t('ping.rttMaximum'),
-          prop: 'max'
+          prop: 'max',
+          sortable: true
         }
       ]
     }

nezha-fronted/src/components/common/table/tool/traceTable.vue

@@ -23,6 +23,7 @@
       :resizable="true"
       :width="`${item.width}`"
       class="data-column"
+      :sortable="item.sortable"
     >
       <template slot="header">
         <span class="data-column__span">{{item.label}}</span>
@@ -30,12 +31,11 @@
       </template>
       <template slot-scope="scope" :column="item">
         <template v-if="item.prop === 'state'">
-          <div class="active-icon green-bg inline-block" v-if="scope.row.state"></div>
+          <div class="active-icon green-bg inline-block" v-if="scope.row.state===1"></div>
-          <div class="active-icon gray-bg inline-block" v-else></div>
+          <div class="active-icon red-bg inline-block" v-else></div>
         </template>
         <span v-else-if="item.prop === 'dc'&&scope.row[item.prop]!==undefined">{{scope.row[item.prop].name}}</span>
-        <span v-else-if="item.prop === 'rate'&&scope.row[item.prop]!==undefined">{{scope.row[item.prop]}}%</span>
+        <span v-else-if="item.prop === 'time'&&scope.row[item.prop]!==undefined">{{scope.row[item.prop]}}ms</span>
-        <span v-else-if="(item.prop === 'avg'||item.prop === 'min'||item.prop === 'max')&&scope.row[item.prop]!==undefined">{{scope.row[item.prop]}}ms</span>
         <span v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</span>
         <span v-else>-</span>
       </template>
@@ -65,28 +65,24 @@ export default {
       tableTitle: [ // 原table列
         {
           label: this.$t('overall.dc'),
-          prop: 'dc'
+          prop: 'dc',
+          sortable: true
         }, {
           label: this.$t('ping.sourceIp'),
-          prop: 'source'
+          prop: 'source',
+          sortable: true
         }, {
           label: this.$t('ping.targetIp'),
-          prop: 'ip'
+          prop: 'ip',
+          sortable: true
         }, {
           label: this.$t('overall.state'),
-          prop: 'state'
+          prop: 'state',
+          sortable: true
         }, {
-          label: this.$t('ping.packetLossRate'),
+          label: this.$t('trace.totalTime'),
-          prop: 'rate'
+          prop: 'time',
-        }, {
+          sortable: true
-          label: this.$t('ping.rttAverage'),
-          prop: 'avg'
-        }, {
-          label: this.$t('ping.rttMinimum'),
-          prop: 'min'
-        }, {
-          label: this.$t('ping.rttMaximum'),
-          prop: 'max'
         }
       ]
     }

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

@@ -35,7 +35,7 @@ export default {
   },
   data () {
     return {
-      containerShow: true,
+      containerShow: true
     }
   },
   methods: {

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

@@ -18,9 +18,15 @@
           <template v-for="(secondMenu, secondIndex) in menu.children">
             <el-submenu v-if="secondMenu.children && secondMenu.children.length > 0" :key="secondIndex" :index="`${index}-${secondIndex}`">
               <span slot="title" class="data-column__span">{{$t(secondMenu.i18n)}}</span>
-              <el-menu-item v-for="(thirdMenu, thirdIndex) in secondMenu.children" :key="`${index}-${secondIndex}-${thirdIndex}`" :index="thirdMenu.route">{{$t(thirdMenu.i18n)}}</el-menu-item>
+              <el-menu-item v-for="(thirdMenu, thirdIndex) in secondMenu.children" :key="`${index}-${secondIndex}-${thirdIndex}`" :index="thirdMenu.route">
+                <i :class="thirdMenu.icon"></i>
+                <span slot="title" class="data-column__span">{{$t(thirdMenu.i18n)}}</span>
+              </el-menu-item>
             </el-submenu>
-            <el-menu-item v-else :key="secondIndex" :index="secondMenu.route">{{$t(secondMenu.i18n)}}</el-menu-item>
+            <el-menu-item v-else :key="secondIndex" :index="secondMenu.route">
+              <i :class="secondMenu.icon"></i>
+              <span slot="title" class="data-column__span">{{$t(secondMenu.i18n)}}</span>
+            </el-menu-item>
           </template>
         </el-submenu>
         <el-menu-item v-else :key="index" :index="menu.route">

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/backups.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="system">
     <div class="system-config-form system-config-backup">
-      <div class="system-title">{{$t('backup.configurations')}}</div>
+      <div class="system-title">{{ $t("backup.configurations") }}</div>
       <nz-data-list
         ref="dataList"
         id="modelTable"
@@ -16,7 +16,6 @@
             :is-configurations="true"
             :table-data="tableData"
             @edit="edit"
-
           >
           </backups-table>
         </template>
@@ -24,7 +23,7 @@
     </div>
 
     <div class="system-config-form system-config-backup">
-      <div class="system-title">{{$t('backup.recent')}}</div>
+      <div class="system-title">{{ $t("backup.recent") }}</div>
       <nz-data-list
         ref="dataList"
         id="modelTable"
@@ -40,14 +39,18 @@
             key="backups2"
             :table-data2="tableData2"
             @getTableData="getTableData"
-
           >
           </backups-table>
         </template>
       </nz-data-list>
     </div>
     <transition name="right-box">
-      <backups-box v-if="rightBoxshow"  :obj="object" @close="closeRightBox" class="backup_box"></backups-box>
+      <backups-box
+        v-if="rightBoxshow"
+        :obj="object"
+        @close="closeRightBox"
+        class="backup_box"
+      ></backups-box>
     </transition>
   </div>
 </template>
@@ -109,13 +112,12 @@ export default {
   methods: {
 
     getTableData (item) {
-       console.log(item);
+      if (!item) {
-        if(!item){
         this.$get('/sys/backup').then((res) => {
           if (res.code === 200) {
             if (res.data) {
               this.tableData[0].retention = res.data.retention
-                  this.tableData[0].state = res.data.state == 1? true :false
+              this.tableData[0].state = res.data.state == 1
               for (const i in res.data.schedule) {
                 this.tableData[0].schedule[i] = res.data.schedule[i]
               }
@@ -126,39 +128,45 @@ export default {
           if (res.code === 200) {
             if (res.data) {
               this.tableData2 = res.data
-                    
             }
           }
         })
-        }else if(item == 'backup'){
+      } else if (item == 'backup') {
         this.$get('/sys/backup').then((res) => {
           if (res.code === 200) {
             if (res.data) {
               this.tableData[0].retention = res.data.retention
-                  this.tableData[0].state = res.data.state == 1? true :false
+              this.tableData[0].state = res.data.state == 1
               for (const i in res.data.schedule) {
                 this.tableData[0].schedule[i] = res.data.schedule[i]
               }
             }
           }
         })
-        }else if(item == 'recent'){
+
+        this.$post('/sys/backup/list').then((res) => {
+          if (res.code === 200) {
+            if (res.data) {
+              this.tableData2 = res.data
+            }
+          }
+        })
+      } else if (item == 'recent') {
         this.$post('/sys/backup/list').then((res) => {
           if (res.code === 200) {
             if (res.data) {
               this.tableData2 = res.data
-                    
             }
           }
         })
       }
-        console.log(this.tableData);
     },
     edit (row) {
-      this.object = { ...row ,
+      this.object = {
-      checkDay:'',
+        ...row,
-      checkDays:'',
+        checkDay: '',
-      datepicker:''
+        checkDays: '',
+        datepicker: ''
       }
       this.object.name = this.$t('backup.edit')
       if (this.object.schedule) {
@@ -173,7 +181,7 @@ export default {
         this.getTableData('backup')
       }
       this.rightBoxshow = false
-    },
+    }
   },
 
   watch: {}

nezha-fronted/src/components/page/config/roles.vue

@@ -82,7 +82,6 @@ export default {
   },
   methods: {
     edit (row, copyFlag) {
-      console.log(row,copyFlag);
       this.object = { ...row }
       if (copyFlag) {
         this.object.name = this.object.name + '-copy'

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

@@ -77,6 +77,9 @@
                   <el-dropdown-item v-has="'main_add'">
                     <div id="chart-htmltopdf" @click="htmlToPdf"><i class="nz-icon nz-icon-download1"></i>{{ $t('overall.downloadToPdf') }}</div>
                   </el-dropdown-item>
+                  <el-dropdown-item v-has="'main_add'">
+                    <div id="chart-htmltoData" @click="exportData"><i class="nz-icon nz-icon-download1"></i>{{ $t('overall.downloadToPdf') }}</div>
+                  </el-dropdown-item>
                 </template>
               </top-tool-more-options>
             </div>
@@ -110,20 +113,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-my-loading="rightBox.loading"
@@ -150,7 +139,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'
@@ -163,6 +151,7 @@ import { randomcolor } from '@/components/common/js/radomcolor/randomcolor'
 import { lineChartMove } from '@/components/common/js/common'
 import routerPathParams from '@/components/common/mixin/routerPathParams'
 import htmlToPdfMixin from '@/components/common/mixin/htmlToPdfMixin'
+import FileSaver from 'file-saver'
 // import chartData from './testData'
 
 export default {
@@ -285,7 +274,6 @@ export default {
     }
   },
   components: {
-    'chart-box': ChartBox,
     'pick-time': pickTime,
     'panel-box': panelBox,
     topToolMoreOptions,
@@ -832,9 +820,10 @@ export default {
       this.panelReloadOnlyPanel()
     },
     htmlToPdf () {
-      let dom = document.getElementsByClassName(this.pdfId)[0]
+      const 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,9 +844,9 @@ 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)
               this.getPdf(dom, -1 * position.left, -1 * position.top)
               // this.getPdf(dom, 0, 0)
             }, 2000)
@@ -866,6 +855,44 @@ export default {
       } else {
         this.showScreenLoading(false)
       }
+    },
+    exportData () {
+      this.scrollbarWrap.scrollTop = this.scrollbarWrap.scrollHeight
+      this.$refs.chartList.onScroll(this.scrollbarWrap.scrollTop)
+      let flag = true
+      let timer = setInterval(() => {
+        flag = true
+        this.$refs.chartList.copyDataList.forEach(chart => {
+          if (chart.type !== 'group') {
+            flag = flag && chart.loaded
+          } else if (chart.collapse) {
+            chart.children.forEach(groupChart => {
+              flag = flag && groupChart.loaded
+            })
+          }
+        })
+        if (flag) {
+          clearInterval(timer)
+          timer = null
+          setTimeout(() => {
+            this.dataList.forEach(item => {
+              if (item.type === 'group') {
+                item.chartData = [item.children]
+              }
+              if (item.type === 'group' && !item.param.collapse) {
+                item.children.forEach(child => {
+                  child.chartData = this.$refs.chartList.$refs['chart' + item.id][0].$refs.chart.$refs['chart' + item.id].$refs.chartList.$refs['chart' + child.id][0].chartData
+                })
+              } else {
+                item.chartData = this.$refs.chartList.$refs['chart' + item.id][0].chartData
+              }
+            })
+            const data = JSON.stringify(this.dataList)
+            const blob = new Blob([data], { type: '' })
+            FileSaver.saveAs(blob, 'ceshi.json')
+          }, 2000)
+        }
+      }, 200)
     }
   },
   created () {