diff --git a/nezha-fronted/src/assets/css/common.scss b/nezha-fronted/src/assets/css/common.scss
index 8d31b38b5..790da0792 100644
--- a/nezha-fronted/src/assets/css/common.scss
+++ b/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;
diff --git a/nezha-fronted/src/components/charts/chart-table.vue b/nezha-fronted/src/components/chart/chart/chart-table.vue
similarity index 99%
rename from nezha-fronted/src/components/charts/chart-table.vue
rename to nezha-fronted/src/components/chart/chart/chart-table.vue
index 331ab727b..9292e70a0 100644
--- a/nezha-fronted/src/components/charts/chart-table.vue
+++ b/nezha-fronted/src/components/chart/chart/chart-table.vue
@@ -119,8 +119,8 @@
 </template>
 
 <script>
-import bus from '../../libs/bus'
-import chartDataFormat from './chartDataFormat'
+import bus from '../../../libs/bus'
+import chartDataFormat from '../chartDataFormat'
 import chartDataList from '@/components/common/mixin/chartDataList'
 
 export default {
diff --git a/nezha-fronted/src/components/chart/chart/chartBar.vue b/nezha-fronted/src/components/chart/chart/chartBar.vue
index 5bb551249..3f94ef31d 100644
--- a/nezha-fronted/src/components/chart/chart/chartBar.vue
+++ b/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'
 
diff --git a/nezha-fronted/src/components/chart/chart/chartGauge.vue b/nezha-fronted/src/components/chart/chart/chartGauge.vue
index cae35f378..a513d1fed 100644
--- a/nezha-fronted/src/components/chart/chart/chartGauge.vue
+++ b/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'
diff --git a/nezha-fronted/src/components/chart/chart/chartHexagonD3.vue b/nezha-fronted/src/components/chart/chart/chartHexagonD3.vue
index 66b4bf640..db5dee0c5 100644
--- a/nezha-fronted/src/components/chart/chart/chartHexagonD3.vue
+++ b/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],
diff --git a/nezha-fronted/src/components/chart/chart/chartLog.vue b/nezha-fronted/src/components/chart/chart/chartLog.vue
index b1d35d644..ecf06825d 100644
--- a/nezha-fronted/src/components/chart/chart/chartLog.vue
+++ b/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'
diff --git a/nezha-fronted/src/components/chart/chart/chartPie.vue b/nezha-fronted/src/components/chart/chart/chartPie.vue
index cd1a540f9..0c320d5fd 100644
--- a/nezha-fronted/src/components/chart/chart/chartPie.vue
+++ b/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'
 
diff --git a/nezha-fronted/src/components/chart/chart/chartStat.vue b/nezha-fronted/src/components/chart/chart/chartStat.vue
index ab8306346..69fa4d389 100644
--- a/nezha-fronted/src/components/chart/chart/chartStat.vue
+++ b/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'
diff --git a/nezha-fronted/src/components/chart/chart/chartTable.vue b/nezha-fronted/src/components/chart/chart/chartTable.vue
index 39a12a1d9..f165d4ec0 100644
--- a/nezha-fronted/src/components/chart/chart/chartTable.vue
+++ b/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',
diff --git a/nezha-fronted/src/components/chart/chart/chartTimeSeries.vue b/nezha-fronted/src/components/chart/chart/chartTimeSeries.vue
index fdca2067e..9aa74fb98 100644
--- a/nezha-fronted/src/components/chart/chart/chartTimeSeries.vue
+++ b/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'
diff --git a/nezha-fronted/src/components/chart/chart/chartTreemap.vue b/nezha-fronted/src/components/chart/chart/chartTreemap.vue
index db4da9d76..2f2525a49 100644
--- a/nezha-fronted/src/components/chart/chart/chartTreemap.vue
+++ b/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'
 
diff --git a/nezha-fronted/src/components/chart/chart/legend.vue b/nezha-fronted/src/components/chart/chart/legend.vue
index 5bd9f8ac3..b44254fa6 100644
--- a/nezha-fronted/src/components/chart/chart/legend.vue
+++ b/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',
diff --git a/nezha-fronted/src/components/charts/line-chart-block.vue b/nezha-fronted/src/components/chart/chart/line-chart-block.vue
similarity index 99%
rename from nezha-fronted/src/components/charts/line-chart-block.vue
rename to nezha-fronted/src/components/chart/chart/line-chart-block.vue
index 6f97eede6..2a338c70e 100644
--- a/nezha-fronted/src/components/charts/line-chart-block.vue
+++ b/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 loading from '../common/loading'
-import chartDataFormat from './chartDataFormat'
-import { randomcolor } from '../common/js/radomcolor/randomcolor.js'
-import chartConfig from '../page/dashboard/overview/chartConfig'
-import { getChart, setChart, lineChartMove, getMousePoint } from '../common/js/common'
-import { getMetricTypeValue, chartResizeTool, formatScientificNotation, dealLegendAlias } from '../common/js/tools'
+import bus from '../../../libs/bus'
+import loading from '../../common/loading'
+import chartDataFormat from '../chartDataFormat'
+import { randomcolor } from '../../common/js/radomcolor/randomcolor.js'
+import chartConfig from '../../page/dashboard/overview/chartConfig'
+import { getChart, setChart, lineChartMove, getMousePoint } from '../../common/js/common'
+import { getMetricTypeValue, chartResizeTool, formatScientificNotation, dealLegendAlias } from '../../common/js/tools'
 import moment from 'moment-timezone'
 import chartDataList from '@/components/common/mixin/chartDataList'
 
diff --git a/nezha-fronted/src/components/charts/chartDataFormat.js b/nezha-fronted/src/components/chart/chartDataFormat.js
similarity index 100%
rename from nezha-fronted/src/components/charts/chartDataFormat.js
rename to nezha-fronted/src/components/chart/chartDataFormat.js
diff --git a/nezha-fronted/src/components/charts/chartTempData.js b/nezha-fronted/src/components/chart/chartTempData.js
similarity index 100%
rename from nezha-fronted/src/components/charts/chartTempData.js
rename to nezha-fronted/src/components/chart/chartTempData.js
diff --git a/nezha-fronted/src/components/chart/panelChart.vue b/nezha-fronted/src/components/chart/panelChart.vue
index 1a8ccf353..ce9ef73fb 100644
--- a/nezha-fronted/src/components/chart/panelChart.vue
+++ b/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'
 
diff --git a/nezha-fronted/src/components/charts/richTextEditor.vue b/nezha-fronted/src/components/chart/richTextEditor.vue
similarity index 100%
rename from nezha-fronted/src/components/charts/richTextEditor.vue
rename to nezha-fronted/src/components/chart/richTextEditor.vue
diff --git a/nezha-fronted/src/components/charts/charLlist和chart-list-group的区别.md b/nezha-fronted/src/components/charts/charLlist和chart-list-group的区别.md
deleted file mode 100644
index a61c3b6af..000000000
--- a/nezha-fronted/src/components/charts/charLlist和chart-list-group的区别.md
+++ /dev/null
@@ -1,10 +0,0 @@
-
-``` bash
-# list
-向下传递 index
-
-# groupList
-是 chart type=’group‘ 的子组件
-向下传递的是处理过后的 chartIndex
-```
-
diff --git a/nezha-fronted/src/components/charts/chart-alert-list.vue b/nezha-fronted/src/components/charts/chart-alert-list.vue
deleted file mode 100644
index f9246417c..000000000
--- a/nezha-fronted/src/components/charts/chart-alert-list.vue
+++ /dev/null
@@ -1,1180 +0,0 @@
-<template>
-  <div class="nz-chart-resize" :id="id">
-    <div class="resize-shadow" ref="resizeShadow"></div>
-    <div class="resize-box resize-box-alert" ref="resizeBox">
-      <div class="chart-alert-info table-container" :id="'chartTableDiv'+chartIndex" @mouseenter="caretShow=true" @mouseleave="caretShow=false">
-        <loading :ref="'localLoading'+chartIndex"></loading>
-        <div v-if="showTitle" class="clearfix chartTitle" :class="{'dragTitle':dragTitleShow, 'drag-disabled': !data.draggable}" :id="'chartTitle'+chartIndex" v-show="!isPreview">
-          <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>
-          <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?chartData.name:'-'}}</span>-->
-              <span class="chart-title-text" v-on:mouseover="changeActive()" :mouseout="removeActive()">{{chartData?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&&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&&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 table-container nz-table2" v-cloak  v-show="firstShow || isPreview" :style="isPreview?'height:100%':''">
-          <alertMessageTable
-            :id="'tableContainer'+chartIndex"
-            :tableData="storedTableData"
-            :loading="loadingTable"
-            :height="'calc(100% - 46px)'"
-            :customTableTitle="tableTitle"
-            :tableId="''"
-            :detailList="false"
-            :projectAlertId="'tableContainer'+chartIndex"
-            @tableDataSort="tableDataSort"
-            @del="deleteMessage"
-            @showText="showText"
-            @addSilence="addSilence"
-            @messageDetail="messageDetail"
-            ref="alertListTable"
-            :form="'chartList'"
-            :fromPath="'/alertList'"
-            style="height: calc(100% - 50px)"
-            :showOption="showOption"
-            :showTopBtn="false"
-          ></alertMessageTable>
-          <Pagination :pageObj="pageObj" @pageNo='pageNo'  @pageSize='pageSize' ref="Pagination" :append-to-body="false" pop-class="out-popper-fix" style="margin-top: 15px;"></Pagination>
-        </div>
-        <!--全屏-->
-        <el-dialog class="nz-dialog table-chart-dialog" id="dialog-alert-massage viewGraphDialog" :title="$t('dashboard.panel.view')"  :visible.sync="screenModal" width="96%"  @close="screenDialogClose" :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" :show-time-picker="false" :use-chart-unit="false" ref="pickTime" style="height: 28px;" id="alert-chart"></pick-time>
-            </div>
-          </div>
-          <alertMessageTable
-            :id="'tableContainerScreen'+chartIndex"
-            :tableData="storedScreanTableData"
-            :detailList="false"
-            :loading="loadingTable"
-            :height="'calc(100% - 20px)'"
-            :customTableTitle="tableTitle"
-            :tableId="''"
-            :projectAlertId="'tableContainer'+chartIndex"
-            @tableDataSort="tableDataSort"
-            @del="deleteMessage"
-            @messageDetail="messageDetail"
-            ref="alertListScreenTable"
-            :form="'chartList'"
-            :fromPath="'/alertList'"
-            style="height: calc(100% - 50px)"
-            :showOption="false"
-            :chart-alert-list="true"
-          ></alertMessageTable>
-          <Pagination :pageObj="screenPageObj"  @pageNo='screenPageNo' @pageSize='screenPageSize' ref="screenPagination" ></Pagination>
-          <loading  :ref="'localLoadingScreen'+chartIndex"></loading>
-        </el-dialog>
-        <div class="export-xlsx">
-          <el-dialog :visible.sync="deleteBox.show" :title="$t('overall.delete')" :modal-append-to-body='false' :show-close="true" width="300px" @close="closeDialog" class="nz-message">
-            <div class="upload-body">
-              <el-input type="textarea" :placeholder="$t('overall.remark')" v-model="deleteBox.remark"></el-input>
-              <div style="text-align: right; margin-top: 10px;">
-                <button @click="closeDialog" class="el-button el-button--default el-button--small" >
-                  <span>{{$t('tip.no')}}</span>
-                </button>
-                <button @click="deleteMessage" class="el-button el-button--default el-button--small el-button--primary">
-                  <span>{{$t('tip.yes')}}</span>
-                </button>
-              </div>
-            </div>
-          </el-dialog>
-        </div>
-        <el-dialog class="line-chart-block-modal nz-dialog endpoint-dialog"
-                   :title="$t('overall.detail')"
-                   :visible.sync="graphShow"
-                   width="90%"
-                   :append-to-body="true"
-                   @close="dialogClose" :modal-append-to-body="false">
-          <div slot="title">
-            {{$t("project.endpoint.dialogTitle")}}
-            <div class="float-right panel-calendar dialog-tool" style="display: flex">
-              <pick-time :refresh-data-func="queryDate" :use-refresh="true" :use-chart-unit="false" v-model="searchTimeDialog" style="height: 28px;" id="alert-sub-chart"></pick-time>
-            </div>
-          </div>
-          <div style="width: 100%;height: 100%" v-loading="chartLoading">
-            <chart v-if="resultType === 'matrix'" ref="messageChart" :unit="chartUnit" name="alertMessageChart"></chart>
-            <log-tab v-if="resultType === 'streamsFormat'" ref="logDetailScreen" :log-data="logData" :showSwitch="false" :tab-index="tabIndex" @exportLog="exportLog" @limitChange="queryLogData"></log-tab>
-          </div>
-        </el-dialog>
-        <!--全屏-->
-        <el-dialog class="nz-dialog table-chart-dialog" :title="$t('alert.config.trbShot')"
-                   :visible.sync="dialogShowText"
-                   width="96%"  @close="dialogShowText = false" :modal-append-to-body="false">
-          <div slot="title">
-            <span class="nz-dialog-title">{{$t('alert.config.trbShot')}}</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="dialogText" ></div>
-              </el-scrollbar>
-            </div>
-          </div>
-        </el-dialog>
-      </div>
-      <span class="vue-resizable-handle" @mousedown="startResize" v-if="!isPreview && data.resizable&&!isLock"></span>
-    </div>
-    <transition name="right-box"><alert-silence-box v-if='silenceBoxShow' :alert-silence="objectSilence" @close="closeSilenceBox"></alert-silence-box></transition>
-  </div>
-</template>
-
-<script>
-import bus from '../../libs/bus'
-import chartDataFormat from './chartDataFormat'
-import loading from '../common/loading'
-import axios from 'axios'
-import pickTime from '../common/pickTime'
-import chart from '../page/dashboard/overview/chart'
-import alertMessageTable from '@/components/common/table/alert/alertMessageTable.vue'
-import chartDataList from '@/components/common/mixin/chartDataList'
-import alertSilenceBox from '@/components/common/rightBox/alertSilenceBox'
-export default {
-  name: 'chartTable',
-  components: {
-    loading: loading,
-    chart: chart,
-    'pick-time': pickTime,
-    alertMessageTable: alertMessageTable,
-    alertSilenceBox
-  },
-  props: {
-    // 看板id
-    panelId: {
-      type: Number,
-      default: 0
-    },
-    showTitle: {
-      type: Boolean,
-      default: true
-    },
-    editChartId: {
-      type: String,
-      default: 'editChartId'
-    },
-    chartIndex: {
-      type: Number,
-      default: 0
-    },
-    chartInfo: {},
-    chartData: {},
-    id: { type: String },
-    from: { type: String },
-    showOption: { type: Boolean, default: true },
-    isLock: { type: Boolean, default: false }
-  },
-  mixins: [chartDataList],
-  data () {
-    return {
-      currentMsg: null,
-      silenceBoxShow: false,
-      tableHeight: 0,
-      data: {}, // 该图表信息,chartItem
-      unit: {},
-      isError: false,
-      errorContent: '',
-      pageObj: {
-        pageNo: 1,
-        pageSize: this.$CONSTANTS.defaultPageSize,
-        total: 0
-      },
-      loadingTable: false, // 表格数据加载loading
-      screenPageObj: {
-        pageNo: 1,
-        pageSize: this.$CONSTANTS.defaultPageSize,
-        total: 0
-      },
-      storedTableData: [],
-      requestIndex: 0,
-      storedScreanTableData: [],
-      images: '',
-      // toolbox: false,
-      loading: Object,
-      panelIdInner: '', // 看板id=panelId,原写作chart,由set_data获取
-      firstLoad: false, // 是否第一次加载
-      // showLoading:true,
-      // showLoadingScreen:false,
-      // showTable:true,
-      chartType: 'alertLIst', // 图表类型
-      screenModal: false,
-      // 查询数据使用
-      filter: {
-        start_time: '',
-        end_time: ''
-      },
-      stableFilter: {}, // 保存数据使用,初始化起止时间,单图or多图等
-      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
-      pageHeight: 40,
-      divFirstShow: false,
-      searchTime: [new Date().setHours(new Date().getHours() - 1), new Date()], // 全屏显示的时间
-      oldSearchTime: [],
-      searchLabel: {},
-      tableTitle: [
-        {
-          label: 'ID',
-          prop: 'id',
-          show: true,
-          width: 160
-        }, {
-          label: this.$t('alert.alertName'),
-          prop: 'alertRule',
-          show: true
-        }, {
-          label: this.$t('alert.list.labels'),
-          prop: 'labels',
-          show: true,
-          NotSet: true,
-          minWidth: 250
-        }, {
-          label: this.$t('alert.severity'),
-          prop: 'severityId',
-          show: true,
-          width: 110
-        }, {
-          label: this.$t('alert.summary'),
-          prop: 'summary',
-          show: true,
-          minWidth: 200
-        }, {
-          label: this.$t('overall.remark'),
-          prop: 'description',
-          show: true,
-          minWidth: 200
-        }, {
-          label: this.$t('alert.list.state'),
-          prop: 'state',
-          show: true,
-          width: 100
-        }, {
-          label: this.$t('alert.startAt'),
-          prop: 'startAt',
-          show: true,
-          width: 150
-        }, {
-          label: this.$t('config.terminallog.duration'),
-          prop: 'duration',
-          show: true,
-          width: 150
-        }, {
-          label: this.$t('alert.endAt'),
-          prop: 'endAt',
-          show: true,
-          width: 160
-        }
-      ],
-      tablelable: [],
-      dropCol: [],
-      toTopBtnTop: this.$tableHeight.toTopBtnTop, // to-top按钮的top属性
-      tableHover: false, // 控制滚动条和top按钮同时出现
-      showTopBtn: false,
-      graphShow: false,
-      chartDatas: [],
-      searchTimeDialog: [],
-      chartUnit: 5,
-      deleteBox: { show: false, ids: '', remark: '', state: 2 },
-      isPreview: false,
-      ps: null,
-      resultType: '',
-      logData: [],
-      chartLoading: false,
-      dialogShowText: false,
-      dialogText: '',
-      blankSilenceObject: {
-        id: '',
-        startAt: '',
-        endAt: '',
-        ruleId: '',
-        type: 'asset',
-        linkId: '',
-        remark: '',
-        time: [],
-        matchers: [
-          { name: '', value: '', regex: 0 }
-        ],
-        name: ''
-      },
-      objectSilence: {}
-    }
-  },
-  computed: {
-    tagType () {
-      return (key) => {
-        if (key == 'asset' || key == 'module' || key == 'project' || key == 'datacenter' || key == 'endpoint') {
-          return 'normal'
-        } else {
-          return 'info'
-        }
-      }
-    },
-    tagValue () {
-      return (key, value) => {
-        if (key == 'type') {
-          if (value == 1) {
-            value = this.$t('project.project.projectName')
-          } else if (value == 2) {
-            value = this.$t('module.module.module')
-          } else if (value == 3) {
-            value = this.$t('asset.asset')
-          }
-        }
-        return key + '：' + value
-      }
-    }
-  },
-  watch: {
-    chartInfo: {
-      deep: true,
-      immediate: true,
-      handler (n, o) {
-        if (n.id) {
-          if (!n.param.state && n.param.state != Number) {
-            n.param.state = '1'
-          }
-          if (n.param.severity && n.param.severity != Number) {
-            n.param.severity = 1
-          }
-        }
-        this.data = Object.assign({}, n)
-      }
-    },
-    panelId: {
-      immediate: true,
-      handler (n, o) {
-        this.panelIdInner = n
-      }
-    },
-    dropdownMenuShow (n) {
-      this.$emit('dropmenu-change', n)
-    }
-  },
-  methods: {
-    startResize (e) {
-      const vm = this
-      this.$chartResizeTool.start(vm, this.data, e)
-    },
-    formatThreshold (value, unit) {
-      const unitMethod = chartDataFormat.getUnit(unit)
-      if (unitMethod && value) {
-        return unitMethod.compute(value, null, 2)
-      } else {
-        return value
-      }
-    },
-    computeDistance (str) {
-      let width = 0
-      const html = document.createElement('span')
-      html.innerText = str
-      html.className = 'getTextWidth'
-      document.querySelector('body').appendChild(html)
-      width = document.querySelector('.getTextWidth').offsetWidth
-      document.querySelector('.getTextWidth').remove()
-      return Number('-' + (width + 5))
-    },
-    returnMarkArea () {
-      if (this.currentMsg) {
-        if (this.currentMsg.alertRule.operator == '>' || this.currentMsg.alertRule.operator == '>=') {
-          return [{ yAxis: this.currentMsg.alertRule.threshold }, {}]
-        } else {
-          return [{}, { yAxis: this.currentMsg.alertRule.threshold }]
-        }
-      }
-    },
-    detail (obj) {
-      this.chartDatas = []
-      this.legend = []
-      this.graphShow = true
-      this.currentMsg = obj
-      this.chartUnit = obj.alertRule.unit ? obj.alertRule.unit : 5
-      this.$nextTick(() => {
-        this.queryDate()
-      })
-    },
-    dialogClose () {
-      this.graphShow = false
-    },
-    closeDialog () {
-      this.importBox.show = false
-      this.deleteBox.show = false
-    },
-    screenDialogClose () {
-      this.screenModal = false
-      this.deleteBox.ids = []
-      this.$refs.alertListScreenTable.$refs.dataTable.clearSelection()
-    },
-    selectChange (s) {
-      const ids = []
-      this.deleteBox.ids = ''
-      s.forEach(item => {
-        ids.push(item.id)
-      })
-      this.deleteBox.ids = ids.join(',')
-    },
-    deleteMessage (row) {
-      const self = this
-      this.$confirm(this.$t('tip.confirmDelete'), {
-        confirmButtonText: this.$t('tip.yes'),
-        cancelButtonText: this.$t('tip.no'),
-        type: 'warning'
-      }).then(() => {
-        this.$delete('alert/message' + '?ids=' + row.id + '&state=3').then(response => {
-          if (response.code === 200) {
-            self.delFlag = true
-            this.$message({ duration: 2000, type: 'success', message: this.$t('tip.deleteSuccess') })
-            self.getAlertList()
-          } else {
-            this.$message.error(response.msg)
-          }
-        })
-      })
-    },
-    chartUnitChange (unit) {
-      this.chartUnit = unit
-      this.$nextTick(() => {
-        this.queryDate()
-      })
-    },
-    messageDetail (row) {
-      if (row.alertRule.type == 3) {
-        return
-      }
-      this.$get('/alert/rule/' + row.alertRule.id).then(res => {
-        this.currentMsg = { ...row, alertRule: { ...res.data } }
-        this.graphShow = true
-        this.$nextTick(() => {
-          this.queryDate()
-        })
-      })
-    },
-    queryChartDate () {
-      const $temp = this
-      const start = this.searchTime[0] ? this.searchTime[0] : bus.computeTimezoneTime(new Date().getTime() - 1 * 60 * 60 * 1000)
-      const end = this.searchTime[1] ? this.searchTime[1] : bus.computeTimezoneTime(new Date().getTime())
-      this.searchTimeDialog = [start, end]
-      const timeDiff = (new Date(end).getTime() - new Date(start).getTime()) / 1000 / (24 * 60 * 60)
-      let step = '15s'
-      if (timeDiff < 1) {
-        step = '15s'
-      } else if (timeDiff < 7) {
-        step = '5m'
-      } else if (timeDiff < 30) {
-        step = '10m'
-      } else {
-        step = '30m'
-      }
-      if (this.$refs.messageChart) {
-        this.$refs.messageChart.startLoading()
-      }
-      const axiosArr = []
-      const paramStr = this.currentMsg ? JSON.stringify(this.promQueryParamConvert(this.currentMsg)) : null
-      if (paramStr && paramStr.trim() != '""') {
-        axiosArr.push(axios.get('/prom/api/v1/query_range?query=' + encodeURIComponent(this.currentMsg.alertRule.expr.replace(/\"/g, '\'').replace(/\r|\n+/g, '')) + '&start=' + this.$stringTimeParseToUnix(start) + '&end=' + this.$stringTimeParseToUnix(end) + '&step=' + step + '&filter=' + encodeURIComponent(decodeURIComponent(this.promQueryParamLabels(this.currentMsg.labels)))))
-        this.legend = []
-        this.chartDatas = []
-        axios.all(axiosArr).then(res => {
-          this.chartLoading = false
-          try {
-            res.forEach((response, promIndex) => {
-              if (response.status == 200) {
-                if (response.data.status == 'success') {
-                  const queryData = response.data.data.result[0]
-                  if (queryData) {
-                    const chartData = {
-                      type: 'line',
-                      symbol: 'none', // 去掉点
-                      smooth: 0.2, // 曲线变平滑
-                      name: '',
-                      lineStyle: {
-                        width: 1,
-                        opacity: 0.9
-                      },
-                      markLine: {
-                        silent: true,
-                        symbol: ['circle', 'circle'],
-                        label: {
-                          distance: this.computeDistance(chartDataFormat.getUnit(this.currentMsg.alertRule.unit ? this.currentMsg.alertRule.unit : 2).compute(this.currentMsg.alertRule.threshold)),
-                          formatter (params) {
-                            return chartDataFormat.getUnit($temp.currentMsg.alertRule.unit ? $temp.currentMsg.alertRule.unit : 2).compute(params.value)
-                          }
-                        },
-                        lineStyle: {
-                          color: '#d64f40',
-                          width: 2,
-                          type: 'dotted'
-                        },
-                        data: [{
-                          yAxis: Number(this.currentMsg.alertRule.threshold)
-                        }]
-                      },
-                      markArea: {
-                        itemStyle: {
-                          color: '#d64f40',
-                          opacity: 0.1
-                        },
-                        data: [
-                          this.returnMarkArea()
-                        ]
-                      }
-                    }
-                    chartData.name += '{'
-                    let alias = chartData.name
-                    alias += '{'
-                    Object.keys(queryData.metric).forEach((item, index) => {
-                      const label = item
-                      const value = queryData.metric[label]
-                      chartData.name += label + "='" + value + "',"
-                    })
-                    chartData.name = chartData.name.charAt(chartData.name.length - 1) == ',' ? chartData.name.substr(0, chartData.name.length - 1) : chartData.name
-                    chartData.name += '}'
-                    const legend = {
-                      name: chartData.name,
-                      alias: alias,
-                      isGray: false
-                    }
-                    this.legend.push(legend)
-                    chartData.data = queryData.values.map((dpsItem, dpsIndex) => {
-                      return [bus.computeTimezone(dpsItem[0]) * 1000, parseFloat(dpsItem[1]).toFixed(2)]
-                    })
-                    this.chartDatas.push(chartData)
-                  }
-                } else {
-                  this.$message.error(response.data.error)
-                  console.error(response.data)
-                }
-              }
-            })
-            this.$nextTick(() => {
-              this.$refs.messageChart.setRandomColors(this.chartDatas.length)
-              this.$refs.messageChart.setLegend(this.legend)
-              this.$refs.messageChart.setSeries(this.chartDatas)
-              this.$refs.messageChart.endLoading()
-            })
-          } catch (err) {
-            this.$message.error(err)
-            this.$refs.messageChart.endLoading()
-          }
-        })
-      }
-    },
-    getAlertList (filterType, isPreview = false, chartInfo) {
-      this.resize()
-      this.loadingTable = true
-      this.isPreview = isPreview
-      const queryParam = {
-        pageSize: this.pageObj.pageSize,
-        pageNo: this.pageObj.pageNo
-      }
-      let chart
-      if (chartInfo) {
-        chart = Object.assign({}, chartInfo)
-      } else {
-        chart = Object.assign({}, this.chartInfo)
-      }
-      if (chart && chart.param) { // 按照粒度，project>module>endpoint  查询只传最细粒度
-        const param = chart.param
-        if (param.endpointId) {
-          queryParam.endpointIds = param.endpointId
-        } else {
-          if (param.moduleId) {
-            queryParam.moduleIds = param.moduleId
-          } else {
-            if (param.projectId) {
-              queryParam.projectIds = param.projectId
-            }
-          }
-        }
-
-        if (param.ruleId) {
-          queryParam.ruleIds = param.ruleId
-        }
-        if (param.severity) {
-          queryParam.severityIds = param.severity
-        }
-        if (param.state) {
-          queryParam.state = param.state
-        }
-      }
-      if (this.searchLabel.orderBy) {
-        queryParam.orderBy = this.searchLabel.orderBy
-      }
-      // this.startLoading(filterType);
-      this.$get('/alert/message', queryParam).then(response => {
-        if (response.code === 200) {
-          this.storedTableData = response.data.list
-          this.storedScreanTableData = JSON.parse(JSON.stringify(response.data.list))
-          this.pageObj.total = response.data.total
-          this.isError = false
-          this.errorContent = ''
-          this.divFirstShow = true
-
-          this.firstShow = true // 展示操作按键
-          this.loadingTable = false
-          this.endLoading(filterType)
-        } else {
-          this.isError = true
-          this.errorContent = response.msg
-        }
-      })
-    },
-    getAlerScreetList (filterType, isPreview = false, chartInfo) {
-      this.resize()
-      this.loadingTable = true
-      this.isPreview = isPreview
-      const queryParam = {
-        pageSize: this.screenPageObj.pageSize,
-        pageNo: this.screenPageObj.pageNo
-      }
-      let chart
-      if (chartInfo) {
-        chart = Object.assign({}, chartInfo)
-      } else {
-        chart = Object.assign({}, this.chartInfo)
-      }
-      if (chart && chart.param) { // 按照粒度，project>module>endpoint  查询只传最细粒度
-        const param = chart.param
-        if (param.endpointId && param.endpointId != '') {
-          queryParam.endpointIds = param.endpointId
-        } else {
-          if (param.moduleId && param.moduleId != '') {
-            queryParam.moduleIds = param.moduleId
-          } else {
-            if (param.projectId && param.projectId != '') {
-              queryParam.projectIds = param.projectId
-            }
-          }
-        }
-
-        if (param.ruleId && param.ruleId != '') {
-          queryParam.ruleIds = param.ruleId
-        }
-        if (param.severity && param.severity != '') {
-          queryParam.severityIds = param.severity
-        }
-        if (param.state && param.state != '') {
-          queryParam.state = param.state
-        }
-      }
-      if (this.searchLabel.orderBy) {
-        queryParam.orderBy = this.searchLabel.orderBy
-      }
-      this.startLoading(filterType)
-      this.$get('/alert/message', queryParam).then(response => {
-        if (response.code == 200) {
-          this.storedTableData = response.data.list
-          this.storedScreanTableData = JSON.parse(JSON.stringify(response.data.list))
-          const axiosAll = []
-          this.$nextTick(() => {
-            this.storedScreanTableData.forEach((item) => {
-              item.labels = JSON.parse(item.labels)
-              if (item.alertRule.buildIn !== 1) {
-                const paramStr = JSON.stringify(this.promQueryParamConvert(item))
-                axiosAll.push(axios.get('/prom/api/v1/query?query=' + paramStr.substring(1, paramStr.length - 1)))
-              } else {
-                axiosAll.push('')
-              }
-            })
-            axios.all(axiosAll).then(res => {
-              res.forEach((item, index) => {
-                let current = []
-                const response2 = item.data
-                if (response2.data && response2.data.result && response2.data.result.length > 0) {
-                  current = response2.data.result[0].value.map((item, i) => {
-                    if (i == 0) {
-                      return bus.computeTimezone(item)
-                    } else {
-                      return parseFloat(item).toFixed(2)
-                    }
-                  })
-                } else {
-                  current = [null, null]
-                }
-                this.storedScreanTableData[index].current = current
-              })
-              this.$set(this.storedScreanTableData, [...this.storedScreanTableData])
-            })
-          })
-          this.screenPageObj.total = response.data.total
-          this.isError = false
-          this.errorContent = ''
-          this.divFirstShow = true
-
-          this.firstShow = true // 展示操作按键
-          this.loadingTable = false
-          this.endLoading(filterType)
-        } else {
-          this.isError = true
-          this.errorContent = response.msg
-        }
-      })
-    },
-    screenRefreshChart () {
-      this.getAlerScreetList()
-    },
-    promQueryParamConvert (obj) {
-      let r = '(' + obj.alertRule.expr.replace(/\"/g, '\'').replace(/\r|\n+/g, '') + ')'
-      let intoLabels = false
-      obj.labels = JSON.parse(obj.labels)
-      if (Object.keys(obj.labels).length > 0) {
-        r += (function () {
-          let group = ' and ' + '(group({'
-          let by = ' by ('
-
-          for (const k in obj.labels) {
-            if (k != 'alertname' && k != 'severity' && k != 'severity_id' && k != 'rule_type') {
-              intoLabels = true
-              group += k
-              group += '='
-              group += ("'" + obj.labels[k] + "',")
-              by += k
-              by += ','
-            }
-          }
-          if (intoLabels) {
-            group = group.substring(0, group.length - 1)
-            by = by.substring(0, by.length - 1)
-            group += '})'
-            by += ')'
-            return group + by + ')'
-          } else {
-            return ''
-          }
-        }())
-      }
-      return r
-    },
-    promQueryParamLabels (labels) {
-      const obj = labels.constructor === Object ? labels : JSON.stringify(labels)
-      const filterArr = ['alertname', 'severity_id', 'severity', 'rule_type']
-      filterArr.forEach(key => {
-        delete obj[key]
-      })
-      return JSON.stringify(obj)
-    },
-    elementsetShow (s, e) {
-      const eventfixed = {
-        shezhi: 0,
-        screen: 0
-      }
-      eventfixed[s] = 1
-      e.preventDefault()
-      this.$store.commit('setHeaderTable', this.tablelable)
-      this.$store.commit('setEventfixed', eventfixed)
-      const h = document.documentElement.clientHeight
-      const w = document.documentElement.clientWidth
-      const dw = this.$refs.elementset.$el.offsetWidth
-      const dh = this.$refs.elementset.$el.offsetHeight
-      const positionx =
-          e.clientX + dw <= w - 10 ? e.clientX + 14 : e.clientX + 14 - dw
-      const positiony =
-          e.clientY + dh <= h - 10
-            ? e.clientY + 20
-            : e.clientY + 20 - (e.clientY + dh - h)
-      this.$store.commit('setPosition', { positionx, positiony })
-    },
-    elementsetHide () {
-      // 悬浮点击空白隐藏
-      this.$refs.elementset.elementsetHide()
-    },
-    tablelabelEmit (data) {
-      // 获取子组件传过来的参数
-      this.$store.commit('setHeaderTable', data)
-      this.tablelable = data
-    },
-    pageNo (val) {
-      this.pageObj.pageNo = val
-      this.getAlertList()
-    },
-    pageSize (val) {
-      this.pageObj.pageSize = val
-      this.getAlertList()
-    },
-
-    screenPageNo (val) {
-      this.screenPageObj.pageNo = val
-      this.getAlerScreetList()
-    },
-    screenPageSize (val) {
-      this.screenPageObj.pageSize = val
-      this.getAlerScreetList()
-    },
-    startLoading (area) {
-      if (area === 'showFullScreen') {
-        // this.showLoadingScreen = true;
-        this.$refs['localLoadingScreen' + this.chartIndex].startLoading()
-      } else {
-        // this.showLoading = true;
-        this.$refs['localLoading' + this.chartIndex].startLoading()
-      }
-    },
-    endLoading (area) {
-      if (area === 'showFullScreen') {
-        // this.showLoadingScreen = false;
-        this.$refs['localLoadingScreen' + this.chartIndex].endLoading()
-      } else {
-        // this.showLoading = false;
-        this.$refs['localLoading' + this.chartIndex] && this.$refs['localLoading' + this.chartIndex].endLoading()
-      }
-    },
-    resize (chartItem) {
-      this.tableHeight = 'calc(100% - 34px)'
-    },
-    showLoad (chartItem) {
-      // 设置高度 chart-table
-      this.$nextTick(() => {
-        this.resize(chartItem)
-      })
-      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)
-    },
-    // 全屏时间条件查询
-    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.showTable = false;
-      this.seriesItemScreen = []
-      for (let i = 0; i < 8; i++) {
-        this.seriesItemScreen.push({ // 表格数据
-          // label: '',//label
-          // metric: '',//metric列
-          element: '',
-          time: '', // 采集时间
-          value: ''// 数值
-        })
-      }
-      // this.startLoading('screen');
-      // this.tableLoading = true;
-      // this.firstShow = false;
-      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.storedScreanTableData = this.storedTableData
-      this.storedScreanTableData = JSON.parse(JSON.stringify(this.storedTableData))
-      this.screenModal = true
-      this.deleteBox.ids = []
-      // this.$refs.alertListTable.$refs.alertListTable.clearSelection()
-      // this.$refs.alertListScreenTable.$refs.dataTable.clearSelection()
-      this.screenPageObj = { ...this.pageObj }
-      if (this.$refs.screenPagination && this.$refs.screenPagination.pageSize) {
-        this.$refs.screenPagination.pageSize = this.screenPageObj.pageSize
-      }
-    },
-    // 设置数据, filter区分
-    setData (chartItem, seriesItem, panelId, filter, area, errorMsg) {
-      // console.info(chartItem,title)
-    },
-    // 数据排序
-    tableDataSort (item) {
-      let orderBy = ''
-      if (item.order === 'ascending') {
-        orderBy = item.prop
-      }
-      if (item.order === 'descending') {
-        orderBy = '-' + item.prop
-      }
-      this.$set(this.searchLabel, 'orderBy', orderBy)
-      this.getAlertList()
-    },
-    queryDate () {
-      this.chartLoading = true
-      if (this.currentMsg.alertRule.type === 1) {
-        this.resultType = 'matrix'
-        this.$nextTick(() => {
-          this.queryChartDate()
-        })
-      } else if (this.currentMsg.alertRule.type === 2) {
-        this.queryLogData(1000)
-      }
-    },
-    exportLog ({ limit, descending }) {
-      const start = this.searchTimeDialog[0] ? this.searchTimeDialog[0] : bus.computeTimezoneTime(new Date().getTime() - 1 * 60 * 60 * 1000)
-      const end = this.searchTimeDialog[1] ? this.searchTimeDialog[1] : bus.computeTimezoneTime(new Date().getTime())
-      const params = {
-        logql: this.expressions,
-        start: start,
-        end: end,
-        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)
-      })
-    },
-    queryLogData (limit) { // log的chart和table是一个请求
-      if (!limit) {
-        limit = 1000
-      }
-      const start = this.searchTimeDialog[0] ? this.searchTimeDialog[0] : bus.computeTimezoneTime(new Date().getTime() - 1 * 60 * 60 * 1000)
-      const end = this.searchTimeDialog[1] ? this.searchTimeDialog[1] : bus.computeTimezoneTime(new Date().getTime())
-      this.expressions = [this.currentMsg.alertRule.expr]
-      this.$get('/logs/loki/api/v1/query_range?format=1&query=' + encodeURIComponent(this.currentMsg.alertRule.expr) + '&start=' + this.$stringTimeParseToUnix(start) + '&end=' + this.$stringTimeParseToUnix(end) + '&limit=' + limit + '&filter=' + encodeURIComponent(decodeURIComponent(this.promQueryParamLabels(this.currentMsg.labels)))).then(res => {
-        this.chartLoading = false
-        const logData = [res.data]
-        this.resultType = res.data.resultType
-        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.expressions[index]
-          //   })
-          // })
-          this.logData = logData
-          this.resultType === 'matrix' && this.loadLogGraph()
-        })
-      })
-    },
-    loadLogGraph () {
-      const graphData = this.logData.filter(l => l.resultType === 'matrix')
-      if (graphData && graphData.length > 0) {
-        this.$refs.messageChart.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 = this.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.messageChart.setLegend(legend)
-        this.$refs.messageChart.setRandomColors(series.length)
-        if (!series.length) {
-          series = ''
-        }
-        this.$refs.messageChart.setSeries(series)
-        this.defaultChartVisible = true
-        this.$nextTick(() => {
-          this.$refs.messageChart.endLoading()
-          this.$refs.messageChart.resize()
-        })
-      }
-    },
-    showText (row) {
-      this.dialogShowText = true
-      this.dialogText = row.alertRule.trbShot
-    },
-    addSilence (row, type) {
-      this.blankSilenceObject.startAt = bus.timeFormate(bus.getOffsetTimezoneData(), 'YYYY-MM-DD HH:mm:ss')
-      this.blankSilenceObject.endAt = bus.timeFormate(bus.getOffsetTimezoneData(1), 'YYYY-MM-DD HH:mm:ss')
-      this.objectSilence = JSON.parse(JSON.stringify(this.blankSilenceObject))
-      this.objectSilence.name = 'Quick silence'
-      if (type !== 'alertMessage' && type !== 'alertRule') {
-        this.objectSilence.matchers = [
-          { name: type, value: row.name, regex: 0 },
-          { name: type + '_id', value: row.id, regex: 0 }
-        ]
-      } else if (type === 'alertMessage') {
-        if (typeof row.labels === 'string') row.labels = JSON.parse(row.labels)
-        const labels = JSON.parse(JSON.stringify(row.labels))
-        this.objectSilence.matchers = []
-        const filterArr = ['alertname', 'severity_id', 'severity', 'rule_type']
-        Object.keys(labels).forEach((key, i) => {
-          if (filterArr.indexOf(key) != -1) {
-            return
-          }
-          this.objectSilence.matchers.push(
-            { name: key, value: labels[key], regex: 0 }
-          )
-        })
-      } else if (type === 'alertRule') {
-        this.objectSilence.matchers = [
-          { name: 'alertName', value: row.name, regex: 0 }
-        ]
-      }
-      this.silenceBoxShow = true
-    },
-    closeSilenceBox (refresh) {
-      this.silenceBoxShow = false
-      if (refresh) {
-        this.delFlag = true
-        this.getAlertList()
-      }
-    }
-  },
-  created () {
-    // 是否存在分页缓存
-    const pageSize = localStorage.getItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId)
-    if (pageSize != 'undefined' && pageSize != null) {
-      this.pageObj.pageSize = pageSize
-    }
-  },
-  mounted () {
-    this.firstLoad = false
-    this.tablelable = localStorage.getItem('nz-tableTitle-' + localStorage.getItem('nz-username') + '-' + '/alertList')
-      ? JSON.parse(localStorage.getItem('nz-tableTitle-' + localStorage.getItem('nz-username') + '-' + '/alertList'))
-      : this.tableTitle
-    this.dropCol = localStorage.getItem('nz-tableTitle-' + localStorage.getItem('nz-username') + '-' + '/alertList')
-      ? JSON.parse(localStorage.getItem('nz-tableTitle-' + localStorage.getItem('nz-username') + '-' + '/alertList'))
-      : this.tableTitle
-  },
-  beforeDestroy () {
-    this.clearChart()
-    if (this.ps) {
-      this.ps.destroy()
-    }
-  }
-}
-</script>
-<style scoped>
-.table-container{
-  height: calc(100% - 40px);
-}
-</style>
diff --git a/nezha-fronted/src/components/charts/chart-bar-statistics.vue b/nezha-fronted/src/components/charts/chart-bar-statistics.vue
deleted file mode 100644
index 7cd6ffe2c..000000000
--- a/nezha-fronted/src/components/charts/chart-bar-statistics.vue
+++ /dev/null
@@ -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>
diff --git a/nezha-fronted/src/components/charts/chart-detail.vue b/nezha-fronted/src/components/charts/chart-detail.vue
deleted file mode 100644
index 18a141b9b..000000000
--- a/nezha-fronted/src/components/charts/chart-detail.vue
+++ /dev/null
@@ -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>
diff --git a/nezha-fronted/src/components/charts/chart-group.vue b/nezha-fronted/src/components/charts/chart-group.vue
deleted file mode 100644
index c7dd9be1e..000000000
--- a/nezha-fronted/src/components/charts/chart-group.vue
+++ /dev/null
@@ -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>
diff --git a/nezha-fronted/src/components/charts/chart-list-group.vue b/nezha-fronted/src/components/charts/chart-list-group.vue
deleted file mode 100644
index 01f93bd0d..000000000
--- a/nezha-fronted/src/components/charts/chart-list-group.vue
+++ /dev/null
@@ -1,1599 +0,0 @@
-<style scoped>
-  .chartBox {
-    float:left;
-    padding: 0 10px 10px 0;
-    position:relative;
-    box-sizing: border-box;
-  }
-  .noData{
-    text-align: center
-  }
-  .list-width{
-    width: calc(100% - 2px);
-    padding: 5px 10px 5px 0;
-    box-sizing: border-box;
-    overflow: hidden;/*避免鼠标第一次放到曲线时，x轴出现滚动条后消失*/
-  }
-</style>
-<template>
-  <div class="list-width chart-group"  :id="'listContainer' + groupId" ref="listContainer"><!--v-drag-->
-
-    <draggable v-model="dataList" :disabled="panelLock" :move="move" @end="end" @start="start"
-               :scroll-sensitivity="150"
-               :options="{
-                 group:{name:'chartGroup',pull:'false'},
-                 dragClass:'drag-chart-class',
-                 fallbackClass:'fallback-class',
-                 forceFallback:true,
-                 ghostClass:'chart-ghost',
-                 chosenClass:'choose-class',
-                 scroll:true,
-                 filter: '.drag-disabled',
-                 scrollFn:function(offsetX,offsetY,originalEvent,touchEvt,hoverTargetEI){},
-                 animation: 150,
-                 handle: '.chart-title'
-               }"
-    style="width: 100%;height: 100%">
-      <div :class="{'drag-disabled': !draggable,'chartBox':true}" :id="'chart-' + item.id" :key="item.id" :name="item.name" :ref="'chart' + item.id" :style="{marginBottom: extraMarginBottom}" v-for="(item, index) in dataList" v-show="!item.isHide">
-        <line-chart-block v-if="item.type === 'line' || (item.type === 'bar' && (!item.param.statistics || item.param.statistics === 'null')) ||item.type == 'stackArea' || item.type === 4" :key="'inner' + item.id"
-                          :from="from" :ref="'editChart'+item.id" :temp-dom="tempDom"
-                          @on-refresh-data="refreshChart"
-                          @on-remove-chart-block="removeChart"
-                          @on-duplicate-chart-block="duplicateChart"
-                          @on-drag-chart="editChartForDrag"
-                          @on-edit-chart-block="editData"
-                          @sync="()=>{chartBySync(item)}"
-                          :panel-id="filter.panelId"
-                          :is-lock="panelLock"
-                          :chart-index="item.id"
-                          @dropmenu-change="(show) => {dropmenuChange(item.id, show)}"
-                          :chart-data="item"
-        ></line-chart-block>
-
-        <logs v-if="item.type === 'logs'" :key="'inner' + item.id"
-              :from="from" :ref="'editChart'+item.id" :temp-dom="tempDom"
-              :startTime="filter.start_time" :endTime="filter.end_time"
-              @on-refresh-data="refreshChart"
-              @on-remove-chart-block="removeChart"
-              @on-duplicate-chart-block="duplicateChart"
-              @on-drag-chart="editChartForDrag"
-              @on-edit-chart-block="editData"
-              @sync="()=>{chartBySync(item)}"
-              :panel-id="filter.panelId"
-              :is-lock="panelLock"
-              :chart-index="item.id"
-              @dropmenu-change="(show) => {dropmenuChange(item.id, show)}"
-              :chart-data="item"></logs>
-
-        <chart-single-stat  :from="from" :key="'inner' + item.id" :ref="'editChart'+item.id" v-if="item.type === 'singleStat'"
-                     @on-refresh-data="refreshChart"
-                     @on-search-data="searchData"
-                     @on-remove-chart-block="removeChart"
-                     @on-duplicate-chart-block="duplicateChart"
-                     @on-drag-chart="editChartForDrag"
-                     @on-edit-chart-block="editData"
-                            @sync="()=>{chartBySync(item)}"
-                     :chart-data="item"
-                     :is-lock="panelLock"
-                     :panel-id="filter.panelId"
-                     @dropmenu-change="(show) => {dropmenuChange(item.id, show)}"
-                     :chart-index="item.id"></chart-single-stat>
-
-        <chart-table  :from="from" :key="'inner' + item.id" :ref="'editChart'+item.id" v-if="item.type === 'table'"
-                      @on-refresh-data="refreshChart"
-                      @on-search-data="searchData"
-                      @on-remove-chart-block="removeChart"
-                      @on-duplicate-chart-block="duplicateChart"
-                      @on-drag-chart="editChartForDrag"
-                      @on-edit-chart-block="editData"
-                      @sync="()=>{chartBySync(item)}"
-                      :is-lock="panelLock"
-                      :panel-id="filter.panelId"
-                      :chart-data="item"
-                      @dropmenu-change="(show) => {dropmenuChange(item.id, show)}"
-                      :chart-index="item.id"></chart-table>
-
-        <chart-url  :from="from" :key="'inner' + item.id" :ref="'editChart'+item.id" v-if="item.type === 'url'"
-                     @on-refresh-data="refreshChart"
-                     @on-search-data="searchData"
-                     @on-remove-chart-block="removeChart"
-                     @on-duplicate-chart-block="duplicateChart"
-                     @on-drag-chart="editChartForDrag"
-                    :is-lock="panelLock"
-                     @on-edit-chart-block="editData"
-                    @sync="()=>{chartBySync(item)}"
-                     :panel-id="filter.panelId"
-                     :chart-data="item"
-                      @dropmenu-change="(show) => {dropmenuChange(item.id, show)}"
-                     :chart-index="item.id"></chart-url>
-
-        <chart-detail  v-if="item.type === 'assetInfo' || item.type == 'projectInfo' || item.type == 'endpointInfo' || item.type == 'alertRuleInfo'" :ref="'editChart'+item.id" :key="'inner' + item.id"
-                          :from="from" :panel-id="filter.panelId"
-                          :chart-index="item.id"
-                          @on-refresh-data="refreshChart"
-                          :is-lock="panelLock"
-                          :chart-data="item"
-                          @dropmenu-change="(show) => {dropmenuChange(item.id, show)}"
-                          :editChartId="'editChartId' + item.id"
-        ></chart-detail>
-
-        <text-chart :from="from" :key="'inner' + item.id" :ref="'editChart'+item.id" v-if="item.type === 'text'"
-                    @on-refresh-data="refreshChart"
-                    @on-remove-chart-block="removeChart"
-                    @on-duplicate-chart-block="duplicateChart"
-                    @on-drag-chart="editChartForDrag"
-                    @on-edit-chart-block="editData"
-                    @sync="()=>{chartBySync(item)}"
-                    @dropmenu-change="(show) => {dropmenuChange(item.id, show)}"
-                    :is-lock="panelLock"
-                    :panel-id="filter.panelId"
-                    :chart-data="item"
-                    :chart-index="item.id"
-        ></text-chart>
-
-        <diagramChart :from="from" :key="'inner' + item.id" :ref="'editChart'+item.id" v-if="item.type === 'diagram'"
-                      @on-refresh-data="refreshChart"
-                      @on-remove-chart-block="removeChart"
-                      @on-duplicate-chart-block="duplicateChart"
-                      @on-drag-chart="editChartForDrag"
-                      @on-edit-chart-block="editData"
-                      @sync="()=>{chartBySync(item)}"
-                      @dropmenu-change="(show) => {dropmenuChange(item.id, show)}"
-                      :is-lock="panelLock"
-                      :panel-id="filter.panelId"
-                      :chart-data="item"
-                      :chart-index="index"
-        ></diagramChart>
-
-        <chart-alert-list  :from="from" :ref="'editChart'+item.id"
-                           :panel-id="filter.panelId"
-                          :chart-index="item.id"
-                          v-if="item.type  === 'alertList'"
-                          :editChartId="'editChartId' + item.id"
-                           :is-lock="panelLock"
-                          :chart-info="item"
-                           :chartData="item"
-                          @on-refresh-data="refreshChart"
-                          @on-search-data="searchData"
-                          @on-remove-chart-block="removeChart"
-                          @on-duplicate-chart-block="duplicateChart"
-                          @on-drag-chart="editChartForDrag"
-                          @on-edit-chart-block="editData"
-                           @sync="()=>{chartBySync(item)}"
-                          @dropmenu-change="(show) => {dropmenuChange(item.id, show)}"
-        ></chart-alert-list>
-        <chartBarStatis  :from="from" :key="'inner' + item.id" :ref="'editChart'+item.id" v-if="(item.type === 'bar'&& item.param.statistics && item.param.statistics !== 'null')" :temp-dom="tempDom"
-                         @on-refresh-data="refreshChart"
-                         @on-search-data="searchData"
-                         @on-remove-chart-block="removeChart"
-                         @on-duplicate-chart-block="duplicateChart"
-                         @on-drag-chart="editChartForDrag"
-                         @on-edit-chart-block="editData"
-                         @sync="()=>{chartBySync(item)}"
-                         :chart-data="item"
-                         :is-lock="panelLock"
-                         :panel-id="filter.panelId"
-                         @dropmenu-change="(show) => {dropmenuChange(item.id, show)}"
-                         :chart-index="item.id"></chartBarStatis>
-        <chart-pie  :from="from" :key="'inner' + item.id" :ref="'editChart'+item.id" v-if="item.type === 'pie'" :temp-dom="tempDom"
-                            @on-refresh-data="refreshChart"
-                            @on-search-data="searchData"
-                            @on-remove-chart-block="removeChart"
-                            @on-duplicate-chart-block="duplicateChart"
-                            @on-drag-chart="editChartForDrag"
-                            @on-edit-chart-block="editData"
-                    @sync="()=>{chartBySync(item)}"
-                            :chart-data="item"
-                            :is-lock="panelLock"
-                            :panel-id="filter.panelId"
-                            @dropmenu-change="(show) => {dropmenuChange(item.id, show)}"
-                            :chart-index="item.id"></chart-pie>
-      </div>
-   </draggable>
-    <el-row v-if="dataList.length === 0"  class="noData"></el-row>
-    <!--<div class="page-shadow" v-if="showShadow"></div>-->
-  </div>
-</template>
-
-<script>
-import axios from 'axios'
-import bus from '../../libs/bus'
-import lineChartBlock from './line-chart-block'
-import chartTable from './chart-table'
-import chartUrl from './chart-url'
-import chartSingleStat from './chart-single-stat'
-import chartDetail from './chart-detail'
-import draggable from 'vuedraggable'
-import chartDataFormat from './chartDataFormat'
-import chartAlertList from './chart-alert-list'
-import textChart from './text-chart'
-import diagramChart from './diagram-chart'
-import chartPie from './chart-pie'
-import chartBarStatis from './chart-bar-statistics'
-import logs from './logs'
-import { fromRoute } from '@/components/common/js/constants'
-import chartTempData from '@/components/charts/chartTempData'
-import { dealLegendAlias } from '@/components/common/js/tools'
-// import visNetwork from './visNetwork'
-export default {
-  name: 'chartList',
-  props: {
-    isModel: { type: Boolean, default: false },
-    additionalInfo: {},
-    draggable: { type: Boolean, default: true },
-    detail: Object,
-    from: { type: String },
-    panelLock: { type: Boolean, default: false },
-    hasGroup: { type: Boolean, default: true },
-    groupList: {},
-    filterParent: {},
-    groupId: {}
-  },
-
-  components: {
-    chartAlertList,
-    chartDetail,
-    lineChartBlock,
-    chartTable,
-    chartUrl,
-    chartSingleStat,
-    draggable,
-    textChart,
-    chartPie,
-    chartBarStatis,
-    diagramChart,
-    logs
-    // visNetwork,
-  },
-  watch: {
-    groupList: {
-      immediate: true,
-      handler (n) {
-        this.dataList = [...n]
-        this.dataTotalListBak = [...n]
-        this.$nextTick(() => {
-          this.dataList.forEach((item, index) => {
-            // this.getChartData(item, index, this.filter)
-            this.setChartSize(item, index)
-            const chartBox = document.getElementById('chart-' + item.id)// this.$refs['editChart'+item.id][0];
-            this.handleElementInViewport(chartBox, 0, item, index, true)
-          })
-        })
-      }
-    },
-    filterParent: {
-      immediate: true,
-      handler (n) {
-        this.filter = { ...n }
-        this.pagePanelId = this.filter.panelId
-      }
-    }
-  },
-  data () {
-    return {
-      filter: {},
-      dataList: [], // 看板中所有图表信息
-      dataListDragTmp: [],
-      time: {
-        start: '',
-        end: ''
-      },
-      extraMarginBottom: 0, // dom额外的margin
-      panelId: '',
-      timer: null,
-      dataTotalList: [], // 懒加载：总记录数
-      dataTotalListBak: [], // 用于查询：懒加载，总记录备份
-      isPage: false, // 是否分页懒加载
-      currentRecordNum: 0, // 懒加载：本次取记录的index，第一次从0开始取，每次取3行
-      lineNum: 3, // 每页加载的行数
-      pagePanelId: '', // 当前分页的panelId
-      dragging: null,
-      // chartDataCacheGroup:new Map,//图表数据缓存，用于查询：id:{}
-      stepHeight: 50,
-      childrenScrollTop: 0,
-      tempDom: { height: '', width: '' }
-      // showShadow:false,
-    }
-  },
-  methods: {
-    dropmenuChange (id, show) {
-      if (show) {
-        const chart = this.$refs['chart' + id][0]
-        const container = this.$refs.listContainer
-        const heightDifference = container.offsetHeight - chart.offsetTop
-        if (heightDifference < 235) {
-          this.extraMarginBottom = 235 - heightDifference
-          this.$nextTick(() => {
-            container.scrollTop = container.offsetHeight
-          })
-        }
-      } else {
-        this.extraMarginBottom = 0
-      }
-    },
-    tempDomInit () {
-      const span = document.querySelector('.temp-dom')
-      this.tempDom.width = span.offsetWidth
-    },
-    start (event) {
-      event.item.querySelector('.chartTitle').style.background = '#d8dce1'
-      const projectAndAssetFeatureInfos = event.item.querySelectorAll('.feature-content')
-      if (projectAndAssetFeatureInfos && projectAndAssetFeatureInfos.length > 0) {
-        projectAndAssetFeatureInfos.forEach(item => {
-          item.classList.remove('unfold')
-          item.classList.remove('fold')
-        })
-      }
-      this.dataListDragTmp = [...this.dataList]
-    },
-    end (event) {
-      if (event.oldIndex !== event.newIndex) {
-        this.$emit('moveGroupItem', this.dataList)
-        // 处理所有group数据后 调用上层移动 保存
-      }
-    },
-    move (event, orgin) {
-      const dragClass = document.querySelector('.drag-chart-class')// drag-chart-class:yellow chart-ghost:green  fallback-class choose-class:purple
-
-      const chartTitle = dragClass.querySelector('.chartTitle')
-      chartTitle.style.background = '#d8dce1'
-    },
-    clone (event) {
-      const canvas = event.item.querySelector('canvas')
-      const canvasclone = event.clone.querySelector('canvas')
-      canvasclone.style.border = 'solid 1px yellow'
-      if (canvas && canvasclone) {
-        const image = new Image()
-        image.src = canvas.toDataURL()
-        const ctxClone = canvasclone.getContext('2d')
-        // ctxClone.drawImage(image,0,0);
-        image.onload = function () {
-          ctxClone.drawImage(image, 0, 0)
-        }
-      }
-    },
-    dragPosition (e) {
-      const odiv = e// 目标元素e.target
-      // var targetDiv= document.getElementById('lineChartDiv'+this.chartIndex); //
-      // 得到点击时该容器的：
-      /* const startY = e.clientY
-      const startX = e.clientX
-      const _this = this */
-      // 鼠标相对元素的位置
-      const distY = e.clientY - odiv.offsetLeft
-      const distX = e.clientX - odiv.offsetTop
-      document.onmousemove = function (e) {
-        e.preventDefault()
-        const left = e.clientX - distX
-        const top = e.clientY - distY
-        odiv.style.top = top + 'px'
-        odiv.style.left = left + 'px'
-      }
-
-      document.onmouseup = function () {
-        document.onmousemove = null
-        document.onmouseup = null
-      }
-    },
-    handleDragStart (e, item) {
-      this.dragging = item
-    },
-    handleDragEnd (e, item) {
-      this.dragging = null
-    },
-    // 首先把div变成可以放置的元素，即重写dragenter/dragover
-    handleDragOver (e) {
-      e.dataTransfer.dropEffect = 'move'// e.dataTransfer.dropEffect="move";//在dragenter中针对放置目标来设置!
-    },
-    handleDragEnter (e, item) {
-      e.dataTransfer.effectAllowed = 'move'// 为需要移动的元素设置dragstart事件
-      if (item === this.dragging) {
-        return
-      }
-      const newItems = [...this.dataList]
-      const src = newItems.indexOf(this.dragging)
-      const dst = newItems.indexOf(item)
-
-      newItems.splice(dst, 0, ...newItems.splice(src, 1))
-
-      this.dataList = newItems
-    },
-    initCurrentRecordNum () {
-      this.currentRecordNum = 0
-    },
-    cleanData () {
-      this.dataList = []
-      this.chartDataCacheGroup.clear()
-    },
-    initData (filter) {
-      this.cleanData()
-      // 内含 panelId,开始时间,结束时间
-      this.filter = filter
-      this.childrenScrollTop = 0
-      this.pagePanelId = this.filter.panelId
-      this.getData(this.filter)
-    },
-    searchCharts (searchName, group) {
-      // this.dataList = [];
-      // this.dataTotalList = [];
-      const chartListTmp = []
-      if (searchName && searchName.trim() !== '') {
-        this.dataTotalListBak.forEach((item) => {
-          if (item.name.indexOf(searchName) > -1 || group.name.indexOf(searchName) > -1) {
-            item.isLoaded = false
-            item.isHide = false
-            chartListTmp.push(item)
-          } else {
-            item.isLoaded = true
-            item.isHide = true
-            chartListTmp.push(item)
-          }
-        })
-      } else {
-        this.dataTotalListBak.forEach((item) => {
-          item.isLoaded = false
-          item.isHide = false
-          chartListTmp.push(item)
-        })
-      }
-
-      this.dataTotalList = [...chartListTmp]
-      this.dataList = [...this.dataTotalList]
-
-      this.$nextTick(() => {
-        if (this.dataList.length > 0) {
-          this.dataList.forEach((item, index) => {
-            this.$refs['editChart' + item.id][0].showLoad(item)// 之后要实现
-            this.setChartSize(item, index)// 设置该图表宽度
-            if (!item.isLoaded) {
-              // 获得当前显示在浏览器的图表，从后台获取数据
-              const chartBox = document.getElementById('chart-' + item.id)// this.$refs['editChart'+item.id][0];
-              this.handleElementInViewport(chartBox, 0, item, index, true)
-            }
-          })
-        }
-      })
-    },
-    pageDataList (isAdd, panelId, isSearch) {
-      if (panelId !== this.pagePanelId) {
-        this.currentRecordNum = 0
-      }
-      if (this.dataTotalList && this.dataTotalList.length > 0) {
-        if (this.currentRecordNum >= this.dataTotalList.length) {
-          // alert('数据加载完毕！');
-        } else {
-          const dataTmpList = []
-          let spanSum = 0
-          let line = 0// 行数
-          let isDataFull = false
-          const curRecNum = this.currentRecordNum
-          const len = this.dataTotalList.length
-          for (let i = curRecNum; !isDataFull && i < len; i++) {
-            if (line < this.lineNum) {
-              const item = this.dataTotalList[i]
-              const span = item.span
-              const sumTmp = spanSum + span
-              if (sumTmp <= 12) {
-                spanSum = sumTmp
-              } else { // 大于12表示够1行了，
-                line = line + 1
-                spanSum = span
-              }
-              if (line < this.lineNum) {
-                dataTmpList.push(item)
-                this.currentRecordNum = i + 1
-              } else {
-                this.currentRecordNum = i
-                break
-              }
-            } else { // 数据加载够了
-              isDataFull = true
-              this.currentRecordNum = i
-              break
-            }
-          }
-          if (isAdd) {
-            const oldDataListLen = this.dataList.length
-            const dataListTmp = [...this.dataList]
-            this.dataList = [...dataListTmp.concat(dataTmpList)]
-            this.$nextTick(() => {
-              this.dataSetFirst(dataTmpList, oldDataListLen, isSearch)
-            })
-          } else {
-            this.dataList = [...dataTmpList]
-          }
-        }
-      }
-    },
-
-    // 获取panel详情数据,获取panel下所有chart列表
-    getData (params) {
-      this.dataList.forEach((item, index) => {
-        // this.getChartData(item, index, this.filter)
-        this.setChartSize(item, index)
-        const chartBox = document.getElementById('chart-' + item.id)// this.$refs['editChart'+item.id][0];
-        this.handleElementInViewport(chartBox, this.childrenScrollTop, item, index, true)
-      })
-    },
-    loadChartData (scrollTop) {
-      this.childrenScrollTop = scrollTop
-      if (this.dataList.length > 0) {
-        this.dataList.forEach((item, index) => {
-          this.setChartSize(item, index)
-          if (!item.isLoaded) {
-            // 获得当前显示在浏览器的图表，从后台获取数据
-            const chartBox = document.getElementById('chart-' + item.id)// this.$refs['editChart'+item.id][0];
-            this.handleElementInViewport(chartBox, scrollTop, item, index)
-          }
-          if (item.type === 'diagram') {
-            this.$refs['editChart' + item.id][0].resize()
-          }
-        })
-      }
-    },
-    // arr: 该panel下图表list,生成该看板下所有图表
-    dataSetFirst (arr, oldDataListLen, isSearch) {
-      if (arr.length) {
-        arr.forEach((item, index) => {
-          let realIndex = index
-          if (oldDataListLen) {
-            realIndex += oldDataListLen
-          }
-          const chartType = item.type
-          if (chartType !== 'url') {
-            if (isSearch) {
-              this.getChartDataForSearch(item, realIndex)
-            } else {
-              this.getChartData(item, realIndex)
-            }
-          } else {
-            if (!isSearch && this.$refs['editChart' + item.id] && this.$refs['editChart' + item.id][0]) {
-              this.$refs['editChart' + item.id][0].showLoad(item)
-            }
-            this.setChartSize(item, realIndex) // 设置该图表宽度
-          }
-        })
-      }
-    },
-    getChartDataForSearch (chartItem, realIndex) {
-      let chartData = this.chartDataCacheGroup.get(chartItem.id)
-      if (chartData) {
-        const filterType = chartData.filterType
-        const errorMsg = chartData.errorMsg
-        const tableData = chartData.tableData
-        const panelId = chartData.panelId
-        const filter = chartData.filter
-        const legend = chartData.legend
-        const series = chartData.series
-        const singleStatRlt = chartData.singleStatRlt
-        if (this.$refs['editChart' + chartItem.id] && this.$refs['editChart' + chartItem.id].length > 0) {
-          if (chartItem.type === 'table') { // 表格
-            if (filterType === 'showFullScreen') { // 全屏查询
-              this.$refs['editChart' + chartItem.id][0].setData(chartItem, tableData,
-                panelId, filter, filterType, errorMsg)
-            } else {
-              this.$refs['editChart' + chartItem.id][0].setData(chartItem, tableData,
-                panelId, filter, '', errorMsg)
-            }
-          } else if (chartItem.type === 'line' || chartItem.type === 'bar' || chartItem.type === 'stackArea' || chartItem.type === 4 || chartItem.type === 'pie') {
-            if (filterType === 'showFullScreen') { // 全屏查询
-              this.$refs['editChart' + chartItem.id][0].setData(chartItem, series,
-                panelId, filter, legend, filterType, errorMsg)
-            } else {
-              this.$refs['editChart' + chartItem.id][0].setData(chartItem, series,
-                panelId, filter, legend, '', errorMsg)
-            }
-          } else if (chartItem.type === 'singleStat') {
-            if (filterType === 'showFullScreen') { // 全屏查询
-              this.$refs['editChart' + chartItem.id][0].setData(chartItem, singleStatRlt,
-                this.filter.panelId, this.filter, filterType, errorMsg)
-            } else {
-              this.$refs['editChart' + chartItem.id][0].setData(chartItem, singleStatRlt,
-                this.filter.panelId, this.filter, '', errorMsg)
-            }
-          } else if (chartItem.type == 'text') {
-            if (filterType === 'showFullScreen') { // 全屏查询
-              this.$refs['editChart' + chartItem.id][0].setData(chartItem, null,
-                panelId, filter, null, filterType)
-            } else {
-              this.$refs['editChart' + chartItem.id][0].setData(chartItem, null,
-                panelId, filter, null, '')
-            }
-          } else if (chartItem.type == 'logs') {
-            if (filterType === 'showFullScreen') { // 全屏查询
-              this.$refs['editChart' + chartItem.id][0].setData(chartItem, null,
-                panelId, filter, null, filterType)
-            } else {
-              this.$refs['editChart' + chartItem.id][0].setData(chartItem, null,
-                panelId, filter, null, '')
-            }
-          }
-        }
-      } else {
-        this.getChartData(chartItem, realIndex)
-      }
-      chartData = null
-    },
-    // 获取一个图表具体数据,图表信息，图表位置index
-    getChartData (chartInfo, pos, filterType) {
-      const chartItem = chartInfo
-      if (chartItem.type === 'assetInfo') {
-        if (chartItem.from != this.$CONSTANTS.fromRoute.endpoint) {
-          this.$set(chartItem, 'draggable', true)
-          this.$set(chartItem, 'resizable', true)
-        }
-        this.getAssetInfoChartData(chartItem)
-        return
-      }
-      if (chartItem.type === 'endpointInfo') {
-        this.getEndpointInfoChartData(chartItem)
-        return
-      }
-      if (chartItem.type == 'projectInfo') {
-        chartItem.name = this.$t('project.chart.projectInfo')
-        this.getProjectInfoChartData(chartItem)
-        return
-      }
-      if (chartItem.type === 'alertList') {
-        this.getAlertListChartData(chartItem, filterType)
-        return
-      }
-      if (chartItem.type === 'alertRuleInfo') {
-        this.getAlertRuleChartData(chartItem)
-        return
-      }
-
-      if (chartItem.type == 'text') {
-        if (this.$refs['editChart' + chartItem.id] && this.$refs['editChart' + chartItem.id].length > 0) {
-          if (filterType === 'showFullScreen') { // 全屏查询
-            this.$refs['editChart' + chartItem.id][0].setData(chartItem, null,
-              this.filter.panelId, null, filterType)
-          } else {
-            this.$refs['editChart' + chartItem.id][0].setData(chartItem, null,
-              this.filter.panelId, null, '')
-          }
-        }
-        return
-      }
-      if (chartItem.type == 'logs') {
-        if (this.$refs['editChart' + chartItem.id] && this.$refs['editChart' + chartItem.id].length > 0) {
-          if (filterType === 'showFullScreen') { // 全屏查询
-            this.$refs['editChart' + chartItem.id][0].setData(chartItem, null,
-              this.filter.panelId, null, filterType)
-          } else {
-            this.$refs['editChart' + chartItem.id][0].setData(chartItem, null,
-              this.filter.panelId, null, '')
-          }
-        }
-        return
-      }
-
-      if (this.isModel) {
-        this.modelStaticData(chartInfo, filterType)
-      } else {
-        // 没有数据的设置提示信息暂无数据-针对每一个图
-        const len = chartItem.elements ? chartItem.elements.length : 0
-        if (len === 0) {
-          this.$nextTick(() => {
-            if (this.$refs['editChart' + chartItem.id] && this.$refs['editChart' + chartItem.id].length > 0) {
-              this.$refs['editChart' + chartItem.id][0].setData(chartItem, [], this.filter.panelId, this.filter)// ????怎么设置的无数据？？
-            }
-          })
-        } else {
-          let startTime = ''
-          let endTime = ''
-          if (filterType === 'refresh') { // 刷新
-            const now = new Date(bus.computeTimezone(new Date().getTime()))
-            const origin = new Date(this.filter.end_time)
-            const numInterval = now.getTime() - origin.getTime()
-            if (numInterval >= 60000) { // 大于1分钟，则start、end均往后移numInterval，否则时间不变
-              startTime = this.getNewTime(this.filter.start_time, numInterval)
-              endTime = bus.timeFormate(now, 'YYYY-MM-DD HH:mm:ss')
-            } else {
-              startTime = this.filter.start_time
-              endTime = this.filter.end_time
-            }
-          } else if (filterType === 'showFullScreen') { // 全屏时间查询
-            startTime = this.filter.start_time
-            endTime = this.filter.end_time
-            // this.$parent.refreshTime(startTime,endTime);全屏查询，不更新panel列表的时间条件
-          } else {
-            startTime = this.filter.start_time
-            endTime = this.filter.end_time
-          }
-
-          const step = bus.getStep(startTime, endTime)
-          this.$nextTick(() => {
-            const axiosArr = chartItem.elements.map((ele) => {
-              const filterItem = ele
-              let query = encodeURIComponent(filterItem.expression)
-              if ((chartInfo.type === 'line' || chartInfo.type === 'bar' || chartInfo.type === 'stackArea' || chartInfo.type === 'table') && chartInfo.param) { // 如果是这三个 默认给null
-                chartInfo.param.nullType = chartInfo.param.nullType || 'null'
-                query += '&nullType=' + chartInfo.param.nullType
-              }
-              // if(chartInfo.type === 'table'&&chartInfo.param&&chartInfo.param.last == 1){
-              //   return this.$get('/prom/api/v1/query_range?query=' + query + "&start=" + this.$stringTimeParseToUnix(endTime) + "&end=" + this.$stringTimeParseToUnix(endTime) + '&step=' + step);
-              // }
-
-              if (this.from === fromRoute.chartTemp) {
-                return new Promise(resolve => resolve(chartTempData))
-              }
-              if (chartInfo.type == 'logs') {
-                return chartTempData
-              }
-              return this.$get('/prom/api/v1/query_range?query=' + query + '&start=' + this.$stringTimeParseToUnix(startTime) + '&end=' + this.$stringTimeParseToUnix(endTime) + '&step=' + step)
-            })
-            // 一个图表的所有element单独获取数据
-            axios.all(axiosArr).then((res) => {
-              if (res.length > 0) {
-                const series = []
-                let singleStatRlt = ''
-                const legend = []
-                const tableData = []
-                /* let sumData = {
-                    name: 'sum',
-                    data: [],
-                    visible: true,
-                    threshold: null,
-                  }; */
-                let errorMsg = ''
-                let pieSeries
-                if (chartInfo.type === 'pie') {
-                  pieSeries = {
-                    type: 'pie',
-                    radius: '100%',
-                    center: ['50%', '50%'],
-                    top: '20%',
-                    bottom: '20%',
-                    // roseType: 'radius',
-                    minAngle: 10,
-                    itemStyle: {
-                      borderRadius: 5,
-                      borderColor: '#fff',
-                      borderWidth: 1
-                    },
-                    label: {
-                      show: false
-                    },
-                    emphasis: {
-                      label: {
-                        show: false
-                      }
-                    },
-                    data: []
-                  }
-                }
-                if (chartInfo.type === 'bar' && chartInfo.param.statistics && chartInfo.param.statistics !== 'null') {
-                  pieSeries = {
-                    type: 'bar',
-                    // roseType: 'radius',
-                    itemStyle: {
-                      borderRadius: 5,
-                      borderColor: '#fff',
-                      borderWidth: 1
-                    },
-                    label: {
-                      show: false
-                    },
-                    emphasis: {
-                      label: {
-                        show: false
-                      }
-                    },
-                    data: []
-                  }
-                }
-                res.forEach((response, innerPos) => {
-                  if (response.status === 'success') {
-                    errorMsg = ''
-                    if (response.data.result) {
-                      // 循环处理每个elements下获取的数据列
-                      if (chartItem.type === 'singleStat') {
-                        if (response.data.result.length === 1) {
-                          const statistics = chartItem.param.statistics || 'null'
-                          if (response.data.result[0].values) {
-                            singleStatRlt = bus.getSingleStatRlt(statistics, response.data.result[0].values)
-                          }
-                        } else if (response.data.result.length > 1) {
-                          singleStatRlt = this.$t('dashboard.panel.singleStatErrorTip')
-                        }
-                      } else {
-                        response.data.result.forEach((queryItem, resIndex) => {
-                          let seriesItem = {
-                            theData: {
-                              name: '',
-                              symbol: 'emptyCircle', // 去掉点
-                              symbolSize: [2, 2],
-                              smooth: 0.2, // 曲线变平滑
-                              showSymbol: false,
-                              data: [],
-                              lineStyle: {
-                                width: 1,
-                                opacity: 0.9
-                              },
-                              animation: false,
-                              type: chartInfo.type
-                            },
-                            metric_name: ''
-                          }
-
-                          if (chartInfo.type === 'stackArea') {
-                            seriesItem.theData.type = 'line'
-                            seriesItem.theData.stack = chartInfo.name
-                            seriesItem.theData.areaStyle = { opacity: 0.3 }
-                          }
-                          if ((chartInfo.type === 'line' || chartInfo.type === 'stackArea' || chartInfo.type === 'bar') && chartInfo.param && chartInfo.param.threshold) {
-                            seriesItem.theData.markLine = {
-                              silent: true,
-                              symbol: ['circle', 'circle'],
-                              label: {
-                                distance: this.computeDistance(chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(chartInfo.param.threshold)),
-                                formatter (params) {
-                                  return chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(params.value)
-                                }
-                              },
-                              lineStyle: {
-                                color: '#d64f40',
-                                width: 2,
-                                type: 'dotted'
-                              },
-                              data: [{
-                                yAxis: Number(chartInfo.param.threshold)
-                              }]
-                            }
-                          }
-                          // 图表中每条线的名字,后半部分
-                          let host = ''// up,
-                          if (queryItem.metric.__name__) {
-                            host = `${queryItem.metric.__name__}{`// up,
-                          }
-                          const tagsArr = Object.keys(queryItem.metric)// ["__name__","asset","idc","instance","job","module","project"]
-                          // 设置时间-数据格式对
-                          let tempArr = []
-                          let dpsArr = []
-                          tempArr = queryItem.values
-                          dpsArr = Object.entries(queryItem.values)// [ ["0",[1577959830.781,"0"]], ["1",[1577959845.781,"0"]] ]
-                          dpsArr = dpsArr.map(item => {
-                            return [item[0], [item[1][0], Number(item[1][1])]]
-                          })
-                          // 判断是否有数据, && tagsArr.length > 0
-                          if (dpsArr.length > 0 && this.$refs['editChart' + chartItem.id] && this.$refs['editChart' + chartItem.id].length > 0) {
-                            tagsArr.forEach((tag, i) => {
-                              if (tag !== '__name__') {
-                                host += `${tag}="${queryItem.metric[tag]}",`
-                              }
-                            })
-                            if (host.endsWith(',')) {
-                              host = host.substr(0, host.length - 1)
-                            }
-                            if (queryItem.metric.__name__) {
-                              host += '}'
-                            }
-                            if (!host || host === '') {
-                              host = chartItem.elements[innerPos].expression
-                            }
-                            // 处理legend别名
-                            let alias = dealLegendAlias(host, chartItem.elements[innerPos].legend)
-                            if (!alias || alias === '') {
-                              alias = host
-                            }
-                            legend.push({ name: host + '-' + chartItem.elements[innerPos].id + '-' + resIndex, alias: alias })
-                            // 图表中每条线的名字,去掉最后的逗号与空格:metric名称,  标签1=a,标签2=c
-
-                            seriesItem.theData.name = host + '-' + chartItem.elements[innerPos].id + '-' + resIndex
-                            // alert(seriesItem.theData.name);
-                            seriesItem.metric_name = seriesItem.theData.name
-                            // 将秒改为毫秒
-                            // alert('table=='+JSON.stringify(queryItem))
-                            seriesItem.theData.data = tempArr.map((dpsItem, dpsIndex) => {
-                              /* 曲线汇总暂不需要
-                                if (sumData.data[dpsIndex]) {
-                                  const sumNum = sumData.data[dpsIndex][1] || 0;
-                                  sumData.data[dpsIndex][1] = sumNum + dpsItem[1];
-                                } else {
-                                  sumData.data[dpsIndex] = [dpsItem[0] * 1000, dpsItem[1]];
-                                }
-                                */
-                              // let t_date = new Date(dpsItem[0] * 1000);
-                              // let timeTmp = bus.timeFormate(t_date, 'YYYY-MM-DD HH:mm:ss');
-                              tableData.push({ // 表格数据
-                                // label: host.slice(host.indexOf('{') + 1,host.indexOf('}')),//label
-                                // metric: queryItem.metric.__name__?queryItem.metric.__name__:'',//metric列
-                                element: { element: host, alias: alias },
-                                // time: timeTmp,//采集时间
-                                // value: dpsItem[1],//数值
-                                data: [dpsItem[0] * 1000, dpsItem[1]]
-                              })
-                              return [dpsItem[0] * 1000, dpsItem[1]]
-                            })
-                            if (chartInfo.type === 'pie') {
-                              pieSeries.data.push({ value: bus.getSingleStatRlt(chartInfo.param.statistics, seriesItem.theData.data), name: host + '-' + chartItem.elements[innerPos].id + '-' + resIndex })
-                            } else if (chartInfo.type === 'bar' && chartInfo.param.statistics && chartInfo.param.statistics !== 'null') {
-                              pieSeries.data.push({ value: bus.getSingleStatRlt(chartInfo.param.statistics, seriesItem.theData.data), name: host + '-' + chartItem.elements[innerPos].id + '-' + resIndex })
-                            } else {
-                              series.push(seriesItem.theData)
-                              seriesItem = null
-                            }
-                          } else if (chartItem.elements && chartItem.elements[innerPos]) {
-                            // 无数据提示
-                            /*
-                              const currentInfo = chartItem.elements[innerPos];
-                              const errorMsg = `图表 ${chartItem.name} 中 ${currentInfo.metric},${currentInfo.tags} 无数据`;
-                              this.$message.warning({
-                                duration: 15,
-                                content: errorMsg,
-                                closable: true,
-                              });
-                              */
-                          }
-                        })
-                      }
-                    }
-                  } else {
-                    if (response.msg) {
-                      // this.$message.error(response.msg);
-                      errorMsg = response.msg
-                    } else if (response.error) {
-                      // this.$message.error(response.error);
-                      errorMsg = response.error
-                    } else {
-                      // this.$message.error(response);
-                      errorMsg = response
-                    }
-                  }
-                })
-                if (this.$refs['editChart' + chartItem.id] && this.$refs['editChart' + chartItem.id].length > 0) {
-                  if (chartInfo.type === 'pie') {
-                    series.push(pieSeries)
-                  }
-                  if (chartInfo.type === 'bar' && chartInfo.param.statistics && chartInfo.param.statistics !== 'null') {
-                    series.push(pieSeries)
-                  }
-                  const chartData = {
-                    chartItem: chartItem,
-                    series: series,
-                    singleStatRlt: singleStatRlt,
-                    legend: legend,
-                    tableData: tableData,
-                    panelId: this.filter.panelId,
-                    filter: this.filter,
-                    filterType: filterType,
-                    errorMsg: errorMsg
-                  }
-                  this.chartDataCacheGroup.set(chartInfo.id, chartData)
-                  if (chartItem.type === 'table') { // 表格
-                    if (filterType === 'showFullScreen') { // 全屏查询
-                      this.$refs['editChart' + chartItem.id][0].setData(chartItem, tableData,
-                        this.filter.panelId, this.filter, filterType, errorMsg)
-                    } else {
-                      this.$refs['editChart' + chartItem.id][0].setData(chartItem, tableData,
-                        this.filter.panelId, this.filter, '', errorMsg)
-                    }
-                  } else if (chartItem.type === 'line' || chartItem.type === 'bar' || chartItem.type === 'stackArea' || chartItem.type === 4 || chartItem.type == 'pie') {
-                    if (series.length && chartItem.type === 4) { // 曲线汇总
-                      // series.push(sumData);//后续需要
-                    }
-                    if (filterType === 'showFullScreen') { // 全屏查询
-                      this.$refs['editChart' + chartItem.id][0].setData(chartItem, series,
-                        this.filter.panelId, this.filter, legend, filterType, errorMsg)
-                    } else {
-                      this.$refs['editChart' + chartItem.id][0].setData(chartItem, series,
-                        this.filter.panelId, this.filter, legend, '', errorMsg)
-                    }
-                  } else if (chartItem.type === 'singleStat') {
-                    if (filterType === 'showFullScreen') { // 全屏查询
-                      this.$refs['editChart' + chartItem.id][0].setData(chartItem, singleStatRlt,
-                        this.filter.panelId, this.filter, filterType, errorMsg)
-                    } else {
-                      this.$refs['editChart' + chartItem.id][0].setData(chartItem, singleStatRlt,
-                        this.filter.panelId, this.filter, '', errorMsg)
-                    }
-                  } else if (chartItem.type === 'logs') {
-                    if (filterType === 'showFullScreen') { // 全屏查询
-                      this.$refs['editChart' + chartItem.id][0].setData(chartItem, singleStatRlt,
-                        this.filter.panelId, this.filter, filterType, errorMsg)
-                    } else {
-                      this.$refs['editChart' + chartItem.id][0].setData(chartItem, singleStatRlt,
-                        this.filter.panelId, this.filter, '', errorMsg)
-                    }
-                  }
-                }
-              } else {
-                const type = chartItem.type
-                if (this.$refs['editChart' + chartItem.id] && this.$refs['editChart' + chartItem.id].length > 0) {
-                  if (type === 'table') {
-                    if (filterType === 'showFullScreen') { // table的全屏查询
-                      this.$refs['editChart' + chartItem.id][0].setData(chartItem, [], this.filter.panelId,
-                        this.filter, filterType)
-                    } else {
-                      this.$refs['editChart' + chartItem.id][0].setData(chartItem, [], this.filter.panelId,
-                        this.filter)
-                    }
-                  } else if (type === 'line' || type === 'bar' || type === 'stackArea' || chartItem.type === 4 || chartItem.type === 'pie') {
-                    if (filterType === 'showFullScreen') { // table的全屏查询
-                      this.$refs['editChart' + chartItem.id][0].setData(chartItem, [], this.filter.panelId,
-                        this.filter, filterType)
-                    } else {
-                      this.$refs['editChart' + chartItem.id][0].setData(chartItem, [], this.filter.panelId,
-                        this.filter)
-                    }
-                  } else if (chartItem.type === 'singleStat') {
-                    if (filterType === 'showFullScreen') { // 全屏查询
-                      this.$refs['editChart' + chartItem.id][0].setData(chartItem, '',
-                        this.filter.panelId, this.filter, filterType)
-                    } else {
-                      this.$refs['editChart' + chartItem.id][0].setData(chartItem, '',
-                        this.filter.panelId, this.filter)
-                    }
-                  } else if (chartItem.type === 'logs') {
-                    if (filterType === 'showFullScreen') { // 全屏查询
-                      this.$refs['editChart' + chartItem.id][0].setData(chartItem, '',
-                        this.filter.panelId, this.filter, filterType)
-                    } else {
-                      this.$refs['editChart' + chartItem.id][0].setData(chartItem, '',
-                        this.filter.panelId, this.filter)
-                    }
-                  }
-                }
-              }
-            }).catch((error) => {
-              if (error) {
-                this.$message.error(error.toString())
-                console.error(error)
-              }
-            })
-          })
-        }
-      }
-    },
-    computeDistance (str) {
-      const span = document.querySelector('.temp-dom')
-      if (span) {
-        span.textContent = str
-        const txtWidth = parseFloat(window.getComputedStyle(span).width)
-        return Number('-' + (txtWidth + 5))
-      }
-    },
-    modelStaticData (chartInfo, filterType) {
-      const series = []
-      const legend = []
-      const tableData = []
-      const singleStatRlt = 999
-      if (chartInfo.type === 'singleStat') {
-        // const statistics = chartInfo.param.statistics
-      } else {
-        const seriesItem = {
-          theData: {
-            name: '',
-            symbol: 'emptyCircle', // 去掉点
-            symbolSize: [2, 2],
-            smooth: 0.2, // 曲线变平滑
-            showSymbol: false,
-            data: [],
-            lineStyle: {
-              width: 1,
-              opacity: 0.9
-            },
-            type: chartInfo.type
-          },
-          // visible: true,
-          // threshold: null,
-          metric_name: ''
-        }
-        if (chartInfo.type === 'stackArea') {
-          seriesItem.theData.type = 'line'
-          seriesItem.theData.stack = chartInfo.name
-          seriesItem.theData.areaStyle = { opacity: 0.3 }
-        }
-        // 图表中每条线的名字,后半部分
-        let host = 'host'// up,
-        const queryItem = { metric: { item1: 'item1', item2: 'item2', item3: 'item3' }, values: [] }
-        const tagsArr = Object.keys(queryItem.metric)// ["__name__","asset","idc","instance","job","module","project"]
-        // 设置时间-数据格式对
-        const tempArr = []
-        const dpsArr = []
-        const timeStamp = Math.floor(new Date().getTime() / 1000)
-        for (let i = 0; i < 20; i++) {
-          tempArr.push([timeStamp - (20 - i) * 15, Math.floor(Math.random() * 10) + ''])
-          queryItem.values.push(tempArr[i])
-          dpsArr.push([i + '', tempArr[i]])
-        }
-        // 判断是否有数据, && tagsArr.length > 0
-        if (dpsArr.length > 0 && this.$refs['editChart' + chartInfo.id] && this.$refs['editChart' + chartInfo.id].length > 0) {
-          tagsArr.forEach((tag, i) => {
-            if (tag !== '__name__') {
-              host += `${tag}="${queryItem.metric[tag]}",`
-            }
-          })
-          if (queryItem.metric.__name__) {
-            host += '}'
-          }
-          // 处理legend别名
-          let alias = dealLegendAlias(host, chartInfo.elements[0].legend)
-          if (!alias || alias === '') {
-            alias = host
-          }
-          legend.push({ name: host, alias: alias })
-          // 图表中每条线的名字,去掉最后的逗号与空格:metric名称,  标签1=a,标签2=c
-          seriesItem.theData.name = host
-          // alert(seriesItem.theData.name);
-          seriesItem.metric_name = seriesItem.theData.name
-          // 将秒改为毫秒
-          // alert('table=='+JSON.stringify(queryItem))
-          seriesItem.theData.data = tempArr.map((dpsItem, dpsIndex) => {
-            const tData = new Date(dpsItem[0] * 1000)
-            const timeTmp = bus.timeFormate(tData, 'YYYY-MM-DD HH:mm:ss')
-            tableData.push({ // 表格数据
-              // label: host.slice(host.indexOf('{') + 1,host.indexOf('}')),//label
-              // metric: queryItem.metric.__name__?queryItem.metric.__name__:'',//metric列
-              element: { element: host, alias: alias },
-              time: timeTmp, // 采集时间
-              value: dpsItem[1]// 数值
-            })
-            return [dpsItem[0] * 1000, dpsItem[1]]
-          })
-          series.push(seriesItem.theData)
-        }
-      }
-      if (this.$refs['editChart' + chartInfo.id] && this.$refs['editChart' + chartInfo.id].length > 0) {
-        const errorMsg = ''
-        const chartData = {
-          chartItem: chartInfo,
-          series: series,
-          singleStatRlt: singleStatRlt,
-          legend: legend,
-          tableData: tableData,
-          panelId: this.filter.panelId,
-          filter: this.filter,
-          filterType: filterType,
-          errorMsg: errorMsg
-        }
-        this.chartDataCacheGroup.set(chartInfo.id, chartData)
-        if (chartInfo.type === 'table') { // 表格
-          if (filterType === 'showFullScreen') { // 全屏查询
-            this.$refs['editChart' + chartInfo.id][0].setData(chartInfo, tableData,
-              this.filter.panelId, this.filter, filterType, '')
-          } else {
-            this.$refs['editChart' + chartInfo.id][0].setData(chartInfo, tableData,
-              this.filter.panelId, this.filter, '', '')
-          }
-        } else if (chartInfo.type === 'line' || chartInfo.type === 'bar' || chartInfo.type === 'stackArea' || chartInfo.type === 4) {
-          if (series.length && chartInfo.type === 4) { // 曲线汇总
-            // series.push(sumData);//后续需要
-          }
-          if (filterType === 'showFullScreen') { // 全屏查询
-            this.$refs['editChart' + chartInfo.id][0].setData(chartInfo, series,
-              this.filter.panelId, this.filter, legend, filterType, errorMsg)
-          } else {
-            this.$refs['editChart' + chartInfo.id][0].setData(chartInfo, series,
-              this.filter.panelId, this.filter, legend, '', errorMsg)
-          }
-        } else if (chartInfo.type === 'singleStat') {
-          if (filterType === 'showFullScreen') { // 全屏查询
-            this.$refs['editChart' + chartInfo.id][0].setData(chartInfo, singleStatRlt,
-              this.filter.panelId, this.filter, filterType, errorMsg)
-          } else {
-            this.$refs['editChart' + chartInfo.id][0].setData(chartInfo, singleStatRlt,
-              this.filter.panelId, this.filter, '', errorMsg)
-          }
-        } else if (chartInfo.type === 'logs') {
-          if (filterType === 'showFullScreen') { // 全屏查询
-            this.$refs['editChart' + chartInfo.id][0].setData(chartInfo, singleStatRlt,
-              this.filter.panelId, this.filter, filterType, errorMsg)
-          } else {
-            this.$refs['editChart' + chartInfo.id][0].setData(chartInfo, singleStatRlt,
-              this.filter.panelId, this.filter, '', errorMsg)
-          }
-        }
-      }
-    },
-    getEndpointInfoChartData (chartInfo) {
-      const detail = []
-      this.$refs['editChart' + chartInfo.id][0].showLoad()
-      chartInfo.name = this.$t('project.chart.endpointInfo')
-
-      const basicInfo = JSON.parse(JSON.stringify(this.detail))
-      const basicInfoReq = new Promise((resolve, reject) => {
-        const now = new Date()
-        const startTime = bus.timeFormate(new Date(now).setHours(now.getHours() - 1), 'YYYY-MM-DD HH:mm:ss')
-        const endTime = bus.timeFormate(now, 'YYYY-MM-DD HH:mm:ss')
-        // const step = bus.getStep(startTime, endTime)
-        this.$nextTick(() => {
-          let query = encodeURIComponent(chartInfo.elements[0].expression)
-          if ((chartInfo.type === 'line' || chartInfo.type === 'bar' || chartInfo.type === 'stackArea') && chartInfo.param) {
-            chartInfo.param.nullType = chartInfo.param.nullType || 'null'
-            query += '&nullType=' + chartInfo.param.nullType
-          }
-          this.$get('/prom/api/v1/query_range?query=' + query + '&start=' + this.$stringTimeParseToUnix(startTime) + '&end=' + this.$stringTimeParseToUnix(endTime) + '&step=5m').then(response => {
-            if (response.status === 'success') {
-              if (response.data.result) {
-                const series = {
-                  name: '',
-                  symbol: 'emptyCircle', // 去掉点
-                  symbolSize: 4,
-                  smooth: 0.2, // 曲线变平滑
-                  showSymbol: false,
-                  data: [],
-                  type: 'line',
-                  lineStyle: {
-                    width: 1,
-                    opacity: 0.9
-                  },
-                  itemStyle: {
-                    color (params) {
-                      if (params.data[1] == '1') {
-                        return '#50d050'
-                      } else {
-                        return '#d64f40'
-                      }
-                    }
-                  }
-                }
-                response.data.result.forEach((queryItem, resInnerPos) => {
-                  // 将秒改为毫秒
-                  series.data = queryItem.values.map((dpsItem, dpsIndex) => {
-                    return [dpsItem[0] * 1000, dpsItem[1]]
-                  })
-                })
-                basicInfo.stateSeries = [series]
-                basicInfo.state = ''
-                resolve({ title: this.$t('project.chart.basicTitle'), data: basicInfo, type: 'endpointInfo' })
-              }
-            }
-          })
-        })
-      })
-
-      const endpointId = this.additionalInfo.id
-      const alertMsg = new Promise((resolve, reject) => {
-        this.$get('/alert/message?endpointId=' + endpointId + '&state=1&pageSize=-1').then(response => {
-          if (response.code == 200) {
-            const alerts = {}
-            if (response.data) {
-              response.data.list.forEach(t => {
-                const alertRule = t.alertRule.alertName
-                if (alerts[alertRule]) {
-                  alerts[alertRule]++
-                } else {
-                  alerts[alertRule] = 1
-                }
-              })
-            }
-            resolve({ title: this.$t('overall.alert'), data: alerts })
-          }
-        })
-      })
-      Promise.all([basicInfoReq, alertMsg]).then(resolves => {
-        resolves.forEach(t => detail.push(t))
-        this.$refs['editChart' + chartInfo.id][0].setData(chartInfo, detail)
-      })
-    },
-    getAssetInfoChartData (chartInfo) {
-      const vm = this
-      chartInfo.name = this.$t('asset.assetInfo')
-      const detail = []
-      if (!this.isModel) {
-        this.$refs['editChart' + chartInfo.id][0].showLoad()
-        const assetId = this.additionalInfo.assetId ? this.additionalInfo.assetId : this.additionalInfo.id
-        this.$get('/asset/info?id=' + assetId).then(response => {
-          if (response.code == 200) {
-            response.data && (function () {
-              response.data.Basic && detail.push({
-                title: vm.$t('project.chart.basicTitle'),
-                type: 'basic',
-                data: response.data.Basic
-              })
-              response.data.Attribute && detail.push({
-                title: vm.$t('asset.featureTitle'),
-                type: 'attribute',
-                data: response.data.Attribute
-              })
-            }())
-          }
-          this.$refs['editChart' + chartInfo.id][0].setData(chartInfo, detail, this.filter.panelId, this.filter)
-        })
-      } else {
-        detail.push({
-          title: vm.$t('project.chart.basicTitle'),
-          type: 'basic',
-          data: {
-            sn: 'assetInfo Test',
-            host: '192.168.40.42',
-            pingStatus: 1,
-            pingRtt: 80,
-            cpuNum: '8',
-            memery: '12GB',
-            memery$_$free: '3GB'
-          }
-        })
-        detail.push({
-          title: vm.$t('asset.featureTitle'),
-          type: 'feature',
-          data: {
-            CPU: 'Intel E500',
-            Memory: '256GB',
-            NetworkInterface: ['eth0', 'eth1'],
-            Disk: [{
-              mount: '/',
-              total: '256GB',
-              free: '128GB',
-              usageRate: '50%'
-            }]
-          }
-        })
-        this.$refs['editChart' + chartInfo.id][0].setData(chartInfo, detail, this.filter.panelId, this.filter)
-      }
-    },
-    getProjectInfoChartData (chartInfo) {
-      const vm = this
-      const detail = []
-      if (!this.isModel) {
-        this.$refs['editChart' + chartInfo.id][0].showLoad(chartInfo)
-        this.$get('/project/info?id=' + this.additionalInfo.id).then(response => {
-          if (response.code == 200) {
-            response.data && (function () {
-              response.data.basic && detail.push({
-                title: vm.$t('project.chart.basicTitle'),
-                data: response.data.basic,
-                type: 'project'
-              })
-              response.data.module && (function () {
-                response.data.module.forEach(d => {
-                  detail.push({
-                    title: `${vm.$t('project.module.module')}：${d.name}`,
-                    data: d,
-                    type: 'module'
-                  })
-                })
-              }())
-            }())
-          }
-          this.$refs['editChart' + chartInfo.id][0].setData(chartInfo, detail, this.filter.panelId, this.filter, response.msg)
-        })
-      } else {
-        detail.push({
-          title: 'system',
-          data: {
-            id: 1,
-            name: 'system',
-            remark: '描述信息',
-            alertStat: [1, 2, 3]
-          }
-        })
-        detail.push({
-          title: `${this.$t('project.module.module')}：kafka`,
-          data: {
-            id: 1,
-            name: 'kafka',
-            type: 'http',
-            remark: '描述信息',
-            endpointStat: [3, 23],
-            alertStat: [2, 3, 4]
-          }
-        })
-        detail.push({
-          title: `${this.$t('project.module.module')}：kafkakafkakafkakafkakafkakafkakafka`,
-          data: {
-            id: 2,
-            name: 'kafkakafkakafkakafkakafkakafkakafka',
-            type: 'http',
-            remark: '描述信息',
-            endpointStat: [3, 23],
-            alertStat: [2, 0, 4]
-          }
-        })
-        detail.push({
-          title: `${this.$t('project.module.module')}：kafkakafka`,
-          data: {
-            id: 3,
-            name: 'kafkakafka',
-            type: 'snmp',
-            remark: '描述信息',
-            endpointStat: [3, 0],
-            alertStat: [2, 3, 4]
-          }
-        })
-        this.$refs['editChart' + chartInfo.id][0].setData(chartInfo, detail, this.filter.panelId, this.filter)
-      }
-    },
-    getAlertListChartData (chartInfo, filterType) {
-      if (this.additionalInfo) {
-        this.$set(chartInfo, 'param', { endpointId: this.additionalInfo.id })
-      }
-      this.$refs['editChart' + chartInfo.id][0] && this.$refs['editChart' + chartInfo.id][0].getAlertList(filterType)
-    },
-    getAlertRuleChartData (chartInfo) {
-      const vm = this
-      const detail = []
-      const req = new Promise((resolve, reject) => {
-        this.$get('alert/rule/stat?id=' + this.additionalInfo.id).then(response => {
-          if (response.code == 200) {
-            response.data && (function () {
-              if (response.data.project && response.data.project.length > 0) {
-                detail.push({ title: vm.$t('overall.entity'), data: convert(response.data.project) })
-              }
-              /* if (response.data.module && response.data.module.length > 0) {
-                  detail.push({title: vm.$t("project.module.module"), data: convert(response.data.module)});
-                }
-                if (response.data.endpoint && response.data.endpoint.length > 0) {
-                  detail.push({title: vm.$t("project.endpoint.endpoint"), data: convert(response.data.endpoint)});
-                } */
-              if (response.data.asset && response.data.asset.length > 0) {
-                detail.push({ title: vm.$t('asset.asset'), data: convert(response.data.asset) })
-              }
-            }())
-            resolve(true)
-          }
-        })
-      })
-      req.then(result => {
-        this.$refs['editChart' + chartInfo.id][0].setData(chartInfo, detail)
-      })
-
-      function convert (d) {
-        const data = {}
-        d.forEach(item => {
-          data[item.name] = item.nums
-          !data._module_ && (data._module_ = {})
-          if (item.module && item.module instanceof Array && item.module.length > 0) {
-            data._module_[item.name] = {}
-            item.module.forEach(m => {
-              data._module_[item.name][m.name] = m.nums
-              !data._module_[item.name]._endpoint_ && (data._module_[item.name]._endpoint_ = {})
-              if (m.endpoint && m.endpoint instanceof Array && m.endpoint.length > 0) {
-                data._module_[item.name]._endpoint_[m.name] = {}
-                m.endpoint.forEach(e => {
-                  data._module_[item.name]._endpoint_[m.name][e.name] = e.nums
-                })
-              }
-            })
-          }
-        })
-        return data
-      }
-    },
-
-    // 设置图表的尺寸
-    setChartSize (item, index) {
-      this.$nextTick(() => {
-        const chartBox = document.getElementById('chart-' + item.id)
-        if (chartBox) {
-          chartBox.style.width = `${(item.span / 12) * 100}%`
-          chartBox.style.height = `${document.getElementById('listContainer' + item.groupId).offsetWidth / 12 * item.height}px`
-        }
-      })
-    },
-    getNewTime (time, num) {
-      const date = new Date(time)
-      const newDate = new Date(parseInt(date.getTime(), 10) + num)
-      return bus.timeFormate(newDate, 'YYYY-MM-DD HH:mm:ss')
-    },
-    // 删除图表
-    removeChart (chartId) { // from 区分从哪里点击的删除 1.从图表面板 2.从编辑框
-      const chart = this.dataList.find(item => item.id === chartId)
-      if (chart) {
-        this.$emit('on-remove-group-chart', chart)
-      }
-    },
-    // 复制图表
-    duplicateChart (chartId) {
-      const chart = this.dataList.find(item => item.id === chartId)
-      if (chart) {
-        this.$emit('on-duplicate-group-chart', chart)
-      }
-    },
-    // 编辑图表
-    editData (chartId) {
-      // 获取该id下chart的相关信息
-      const chart = this.dataList.find(item => item.id === chartId)
-      if (chart) {
-        this.$emit('on-edit-group-chart', chart)
-      }
-    },
-
-    editChartForDrag (chartItem) {
-      const chart = this.dataList.find(item => item.id === chartItem.id)
-      chart.span = chartItem.span
-      chart.height = chartItem.height
-    },
-    // 刷新列表中的一个图表
-    refreshChart (chartId, searchTime) {
-      this.dataList.forEach((item, index) => {
-        if (item.id === chartId) {
-          this.getChartData(item, index, 'refresh')
-        }
-      })
-    },
-    refresh () {
-      this.dataList.forEach((item, index) => {
-        this.getChartData(item, index, this.filter)
-      })
-    },
-    resize () {
-      this.dataList.forEach((item, index) => {
-        if (item.isHide) {
-          return
-        }
-        if (this.$refs['editChart' + item.id][0].chartResize) {
-          this.$refs['editChart' + item.id][0].chartResize()
-        } else if (this.$refs['editChart' + item.id][0].resize) {
-          this.$refs['editChart' + item.id][0].resize()
-        }
-      })
-    },
-    searchData (chartId, searchTime) {
-      if (searchTime) { // 全屏时间查询
-        this.filter.start_time = bus.timeFormate(searchTime[0], 'YYYY-MM-DD HH:mm:ss')
-        this.filter.end_time = bus.timeFormate(searchTime[1], 'YYYY-MM-DD HH:mm:ss')
-      }
-      this.dataList.forEach((item, index) => {
-        if (item.id === chartId) {
-          this.getChartData(item, index, 'showFullScreen')
-        }
-      })
-    },
-    // 懒加载，判断网页区域，加载可见区的prom数据
-    handleElementInViewport (ele, scrollTop, item, index, isSearch) {
-      /*
-        网页被卷去的高：document.body.scrollTop
-        网页正文全文高：document.body.scrollHeight
-        网页可见区域高（包括边线的高）：document.body.offsetHeight；
-        网页可见区域高：document.body.clientHeight
-        */
-      const that = this
-      setTimeout(function () {
-        const itemHeight = item.height
-        // 1.元素距离页面顶部的距离 + group的高度
-        const groupHeight = item.groupId ? document.getElementById('chart-' + item.groupId).offsetTop : 0
-        const mainOffsetTop = ele.offsetTop + groupHeight// offsetTop: 当前元素顶部距离最近父元素顶部的距离,和有没有滚动条没有关系。单位px，只读元素。
-        // 2.元素的高度
-        const mainHeight = itemHeight// ele.offsetHeight;//itemHeight;
-        // 3.页面滚动的距离
-        const windowScrollTop = scrollTop// document.documentElement.scrollTop || document.body.scrollTop;
-        // 4.浏览器可见区域的高度
-        const windowHeight = (window.innerHeight || document.documentElement.clientHeight) - 50 - 42
-
-        /*
-          * 在窗口上下滚动的情况下, 一个页面元素的状态有下面3种：
-          1.向上滚动超出可见区域
-          2.向下滚动超出可视区域
-          3.在可视区域内
-          * 第一种情况   由于元素随页面向上滚动, 整个页面滚动的距离  大于 （元素距离页面顶部的距离 + 元素本身的高度 ）-> 超出
-          * 第二种情况   由于元素随页面向下滚动, 整个页面滚动的距离  小于 （元素距离页面顶部的距离 - 浏览器可见区域高度 ）-> 超出
-          * */
-        /* console.log("___isInView____","元素距离页面顶部的距离mainOffsetTop="+mainOffsetTop)//不变
-          console.log("___isInView____","元素高度mainHeight="+mainHeight)//不变
-          console.log("___isInView____","scrollTop页面滚动的距离windowScrollTop="+windowScrollTop)//变
-          console.log("___isInView____","浏览器可见区域高度windowHeight="+windowHeight)//不变
-          console.log(item.name,(mainOffsetTop+mainHeight/3),"<",(windowScrollTop+windowHeight),((mainOffsetTop+mainHeight/3) < (windowScrollTop+windowHeight))) */
-        if ((mainOffsetTop + mainHeight / 3) < (windowScrollTop + windowHeight)) {
-          const chartType = item.type
-          item.isLoaded = true
-          if (chartType !== 'url') {
-            that.getChartDataForSearch(item, index)
-          } else {
-            that.$refs['editChart' + item.id][0].showLoad(item)
-          }
-        }
-      }, 500)
-    },
-    chartBySync (item) {
-      this.$post('visual/panel/chart/syncTmpl', { ids: [item.id] }).then(res => {
-        if (res.code === 200) {
-          this.getData(this.filter)
-          this.$message.success(this.$t('tip.syncSuccess'))
-        } else {
-          this.$message.error(res.msg)
-        }
-      })
-    }
-  },
-  created () {
-    this.chartDataCacheGroup = new Map()
-  },
-  mounted () {
-    this.tempDomInit()
-  }
-
-}
-</script>
diff --git a/nezha-fronted/src/components/charts/chart-list.vue b/nezha-fronted/src/components/charts/chart-list.vue
deleted file mode 100644
index 9334695b5..000000000
--- a/nezha-fronted/src/components/charts/chart-list.vue
+++ /dev/null
@@ -1,1858 +0,0 @@
-<template>
-  <div id="listContainer" ref="listContainer" class="list-width charts__chart-list"><!--v-drag-->
-
-    <draggable v-model="dataList" :disabled="panelLock" :move="move" @end="end" @start="start"
-               :scroll-sensitivity="150"
-               :options="{
-                 group:{name:'chartGroup',pull:'false'},
-                 dragClass:'drag-chart-class',
-                 fallbackClass:'fallback-class',
-                 forceFallback:true,
-                 ghostClass:'chart-ghost',
-                 chosenClass:'choose-class',
-                 scroll:true,
-                 filter: '.drag-disabled',
-                 scrollFn:function(offsetX,offsetY,originalEvent,touchEvt,hoverTargetEI){},
-                 animation: 150,
-                 handle: '.chart-title'
-               }"  >
-      <div :class="{'drag-disabled': !draggable,'chartBox':true}" :id="'chart-' + item.id" :key="item.id" :name="item.name" :ref="'chart' + item.id" :style="{marginBottom: extraMarginBottom}" v-for="(item, index) in dataList" v-show="!item.isHide">
-        <line-chart-block v-if="item.type === 'line' || (item.type === 'bar' && (!item.param.statistics || item.param.statistics === 'null')) ||item.type == 'stackArea' || item.type === 4" :key="'inner' + item.id"
-                          :from="from" :ref="'editChart'+item.id" :temp-dom="tempDom"
-                          @on-refresh-data="refreshChart"
-                          @on-remove-chart-block="removeChart"
-                          @on-duplicate-chart-block="duplicateChart"
-                          @on-drag-chart="editChartForDrag"
-                          @on-edit-chart-block="editData"
-                          @sync="()=>{chartBySync(item)}"
-                          :panel-id="filter.panelId"
-                          :is-lock="panelLock"
-                          :chart-index="index"
-                          @dropmenu-change="(show) => {dropmenuChange(item.id, show)}"
-                          :chart-data="item"></line-chart-block>
-        <logs v-if="item.type === 'logs'" :key="'inner' + item.id"
-                          :from="from" :ref="'editChart'+item.id" :temp-dom="tempDom"
-                          :startTime="filter.start_time" :endTime="filter.end_time"
-                          @on-refresh-data="refreshChart"
-                          @on-remove-chart-block="removeChart"
-                          @on-duplicate-chart-block="duplicateChart"
-                          @on-drag-chart="editChartForDrag"
-                          @on-edit-chart-block="editData"
-                          @sync="()=>{chartBySync(item)}"
-                          :panel-id="filter.panelId"
-                          :is-lock="panelLock"
-                          :chart-index="index"
-                          @dropmenu-change="(show) => {dropmenuChange(item.id, show)}"
-                          :chart-data="item"></logs>
-
-        <chart-single-stat  :from="from" :key="'inner' + item.id" :ref="'editChart'+item.id" v-if="item.type === 'singleStat'"
-                     @on-refresh-data="refreshChart"
-                     @on-search-data="searchData"
-                     @on-remove-chart-block="removeChart"
-                     @on-duplicate-chart-block="duplicateChart"
-                     @on-drag-chart="editChartForDrag"
-                     @on-edit-chart-block="editData"
-                     @sync="()=>{chartBySync(item)}"
-                     :chart-data="item"
-                     :is-lock="panelLock"
-                     :panel-id="filter.panelId"
-                     @dropmenu-change="(show) => {dropmenuChange(item.id, show)}"
-                     :chart-index="index"></chart-single-stat>
-
-        <chart-table  :from="from" :key="'inner' + item.id" :ref="'editChart'+item.id" v-if="item.type === 'table'"
-                      @on-refresh-data="refreshChart"
-                      @on-search-data="searchData"
-                      @on-remove-chart-block="removeChart"
-                      @on-duplicate-chart-block="duplicateChart"
-                      @on-drag-chart="editChartForDrag"
-                      @on-edit-chart-block="editData"
-                       @sync="()=>{chartBySync(item)}"
-                      :is-lock="panelLock"
-                      :panel-id="filter.panelId"
-                      :chart-data="item"
-                      @dropmenu-change="(show) => {dropmenuChange(item.id, show)}"
-                      :chart-index="index"></chart-table>
-
-        <chart-url  :from="from" :key="'inner' + item.id" :ref="'editChart'+item.id" v-if="item.type === 'url'"
-                     @on-refresh-data="refreshChart"
-                     @on-search-data="searchData"
-                     @on-remove-chart-block="removeChart"
-                     @on-duplicate-chart-block="duplicateChart"
-                     @on-drag-chart="editChartForDrag"
-                    :is-lock="panelLock"
-                     @on-edit-chart-block="editData"
-                     @sync="()=>{chartBySync(item)}"
-                     :panel-id="filter.panelId"
-                     :chart-data="item"
-                      @dropmenu-change="(show) => {dropmenuChange(item.id, show)}"
-                     :chart-index="index"></chart-url>
-
-        <chart-detail  v-if="item.type === 'assetInfo' || item.type === 'projectInfo' || item.type === 'endpointInfo' || item.type === 'alertRuleInfo'" :key="'inner' + item.id" :ref="'editChart'+item.id"
-                          :from="from" :panel-id="filter.panelId"
-                          :chart-index="index"
-                          @on-refresh-data="refreshChart"
-                       @sync="()=>{chartBySync(item)}"
-                          :is-lock="panelLock"
-                          :chart-data="item"
-                          @dropmenu-change="(show) => {dropmenuChange(item.id, show)}"
-                          :editChartId="'editChartId' + item.id"
-        ></chart-detail>
-
-        <text-chart :from="from" :key="'inner' + item.id" :ref="'editChart'+item.id" v-if="item.type === 'text'"
-                    @on-refresh-data="refreshChart"
-                    @on-remove-chart-block="removeChart"
-                    @on-duplicate-chart-block="duplicateChart"
-                    @on-drag-chart="editChartForDrag"
-                    @on-edit-chart-block="editData"
-                     @sync="()=>{chartBySync(item)}"
-                    @dropmenu-change="(show) => {dropmenuChange(item.id, show)}"
-                    :is-lock="panelLock"
-                    :panel-id="filter.panelId"
-                    :chart-data="item"
-                    :chart-index="index"
-        ></text-chart>
-
-        <diagramChart :from="from" :key="'inner' + item.id" :ref="'editChart'+item.id" v-if="item.type === 'diagram'"
-                    @on-refresh-data="refreshChart"
-                    @on-remove-chart-block="removeChart"
-                    @on-duplicate-chart-block="duplicateChart"
-                    @on-drag-chart="editChartForDrag"
-                    @on-edit-chart-block="editData"
-                    @sync="()=>{chartBySync(item)}"
-                    @dropmenu-change="(show) => {dropmenuChange(item.id, show)}"
-                    :is-lock="panelLock"
-                    :panel-id="filter.panelId"
-                    :chart-data="item"
-                    :chart-index="index"
-        ></diagramChart>
-
-        <chart-alert-list :ref="'editChart'+item.id" :chartData="item"
-                          :from="from"
-                          :chart-index="index"
-                          v-if="item.type  === 'alertList'"
-                          :editChartId="'editChartId' + item.id"
-                          :is-lock="panelLock"
-                          :chart-info="item"
-                          @on-refresh-data="refreshChart"
-                          @on-search-data="searchData"
-                          @on-remove-chart-block="removeChart"
-                          @on-duplicate-chart-block="duplicateChart"
-                          @on-drag-chart="editChartForDrag"
-                          @on-edit-chart-block="editData"
-                          :panel-id="filter.panelId"
-                          @dropmenu-change="(show) => {dropmenuChange(item.id, show)}"
-                          @sync="()=>{chartBySync(item)}"
-        ></chart-alert-list>
-
-        <chart-pie  :from="from" :key="'inner' + item.id" :ref="'editChart'+item.id" v-if="item.type === 'pie'" :temp-dom="tempDom"
-                            @on-refresh-data="refreshChart"
-                            @on-search-data="searchData"
-                            @on-remove-chart-block="removeChart"
-                            @on-duplicate-chart-block="duplicateChart"
-                            @on-drag-chart="editChartForDrag"
-                            @on-edit-chart-block="editData"
-                     @sync="()=>{chartBySync(item)}"
-                            :chart-data="item"
-                            :is-lock="panelLock"
-                            :panel-id="filter.panelId"
-                            @dropmenu-change="(show) => {dropmenuChange(item.id, show)}"
-                            :chart-index="index"></chart-pie>
-        <chartBarStatis  :from="from" :key="'inner' + item.id" :ref="'editChart'+item.id" v-if="(item.type === 'bar'&& item.param.statistics && item.param.statistics !== 'null')" :temp-dom="tempDom"
-                    @on-refresh-data="refreshChart"
-                    @on-search-data="searchData"
-                    @on-remove-chart-block="removeChart"
-                    @on-duplicate-chart-block="duplicateChart"
-                    @on-drag-chart="editChartForDrag"
-                    @on-edit-chart-block="editData"
-                          @sync="()=>{chartBySync(item)}"
-                    :chart-data="item"
-                    :is-lock="panelLock"
-                    :panel-id="filter.panelId"
-                    @dropmenu-change="(show) => {dropmenuChange(item.id, show)}"
-                    :chart-index="index"></chartBarStatis>
-        <chart-group  :from="from" :key="'inner' + item.id" :ref="'editChart'+item.id" v-if="item.type === 'group'"
-                      @on-refresh-data="refreshChart"
-                      @on-search-data="searchData"
-                      @on-remove-chart-block="removeChart"
-                      @on-duplicate-chart-block="duplicateChart"
-                      @on-drag-chart="editChartForDrag"
-                      :is-lock="panelLock"
-                      :panelLock="panelLock"
-                      :filter="filter"
-                      @on-edit-chart-block="editData"
-                       @sync="()=>{chartBySync(item)}"
-                      @on-edit-group-chart="editDataGroup"
-                      @on-remove-group-chart="removeChartGroup"
-                      @on-duplicate-group-chart="duplicateChartGroup"
-                      @on-add-group-item-chart="addGroupItem"
-                      @moveGroupItem="moveGroupItem"
-                      @loadChartData="loadChartData"
-                      :panel-id="filter.panelId"
-                      :chart-data="item"
-                      :dataList='dataList'
-                      @dropmenu-change="(show) => {dropmenuChange(item.id, show)}"
-                      :chart-index="index"></chart-group>
-      </div>
-   </draggable>
-<!--    <el-row v-if="dataList.length === 0"  class="noData"></el-row>-->
-    <div v-if="chartListNoData" class="no-data">
-      <svg class="icon" aria-hidden="true">
-        <use xlink:href="#nz-icon-no-data-panel"></use>
-      </svg>
-      <div class="no-data-div">No data</div>
-    </div>
-    <div v-else>&nbsp;</div>
-    <!--<div class="page-shadow" v-if="showShadow"></div>-->
-  </div>
-</template>
-
-<script>
-import axios from 'axios'
-import bus from '../../libs/bus'
-import lineChartBlock from './line-chart-block'
-import chartTable from './chart-table'
-import chartUrl from './chart-url'
-import chartSingleStat from './chart-single-stat'
-import chartDetail from './chart-detail'
-import draggable from 'vuedraggable'
-import chartDataFormat from './chartDataFormat'
-import chartAlertList from './chart-alert-list'
-import textChart from './text-chart'
-import diagramChart from './diagram-chart'
-import chartPie from './chart-pie'
-import chartBarStatis from './chart-bar-statistics'
-import chartGroup from './chart-group'
-import logs from './logs'
-import { fromRoute } from '@/components/common/js/constants'
-import chartTempData from '@/components/charts/chartTempData'
-import { chartResizeTool, dealLegendAlias } from '@/components/common/js/tools'
-export default {
-  name: 'chartList',
-  props: {
-    fromRoute,
-    isModel: { type: Boolean, default: false },
-    draggable: { type: Boolean, default: true },
-    from: { type: String },
-    obj: Object,
-    panelLock: { type: Boolean, default: false },
-    hasGroup: { type: Boolean, default: true },
-    panelDataList: Array,
-    nowTimeType: {}
-  },
-
-  components: {
-    chartAlertList,
-    chartDetail,
-    lineChartBlock,
-    chartTable,
-    chartUrl,
-    chartSingleStat,
-    draggable,
-    textChart,
-    chartPie,
-    chartGroup,
-    chartBarStatis,
-    diagramChart,
-    logs
-    // visNetwork,
-  },
-  data () {
-    return {
-      chartResizeTool: chartResizeTool,
-      filter: {},
-      dataList: [], // 看板中所有图表信息
-      dataListDragTmp: [],
-      time: {
-        start: '',
-        end: ''
-      },
-      chartListNoData: false,
-      extraMarginBottom: 0, // dom额外的margin
-      panelId: '',
-      timer: null,
-      finshGetData: false,
-      dataTotalList: [], // 懒加载：总记录数
-      dataTotalListBak: [], // 用于查询：懒加载，总记录备份
-      isPage: false, // 是否分页懒加载
-      currentRecordNum: 0, // 懒加载：本次取记录的index，第一次从0开始取，每次取3行
-      lineNum: 3, // 每页加载的行数
-      pagePanelId: '', // 当前分页的panelId
-      dragging: null,
-      // chartDataCacheGroup:new Map,//图表数据缓存，用于查询：id:{}
-      stepWidth: null,
-
-      tempDom: { height: '', width: '' },
-      childrenScrollTop: 0
-      // showShadow:false,
-    }
-  },
-  watch: {
-    panelDataList (n) {
-      this.getData(this.filter)
-    }
-  },
-  methods: {
-    dropmenuChange (id, show) {
-      if (show) {
-        const chart = this.$refs['chart' + id][0]
-        const container = this.$refs.listContainer
-        const heightDifference = container.offsetHeight - chart.offsetTop
-        if (heightDifference < 235) {
-          this.extraMarginBottom = 235 - heightDifference
-          this.$nextTick(() => {
-            container.scrollTop = container.offsetHeight
-          })
-        }
-      } else {
-        this.extraMarginBottom = 0
-      }
-    },
-    tempDomInit () {
-      const span = document.querySelector('.temp-dom')
-      this.tempDom.width = span.offsetWidth
-    },
-    start (event) {
-      event.item.querySelector('.chartTitle').style.background = '#d8dce1'
-      const projectAndAssetFeatureInfos = event.item.querySelectorAll('.feature-content')
-      if (projectAndAssetFeatureInfos && projectAndAssetFeatureInfos.length > 0) {
-        projectAndAssetFeatureInfos.forEach(item => {
-          item.classList.remove('unfold')
-          item.classList.remove('fold')
-        })
-      }
-      this.dataListDragTmp = [...this.dataList]
-    },
-    end (event) {
-      if (event.oldIndex !== event.newIndex) {
-        const newWeights = []
-        let i = 0
-        this.dataList.forEach((item, index) => {
-          item.weight = index
-          newWeights.push({ id: item.id, weight: index })
-          if (item.type === 'group' && item.children) {
-            item.children.forEach(chart => {
-              i++
-              newWeights.push({ id: chart.id, groupId: item.id, weight: this.dataList.length + i })
-            })
-          } else {
-            item.children = []
-          }
-        })
-        const panelId = this.pagePanelId
-        this.$put('/visual/panel/chart/weights', { panelId, charts: newWeights })
-      }
-    },
-    moveGroupItem (group) {
-      const newWeights = []
-      let i = 0
-      this.dataList.forEach((item, index) => {
-        item.weight = index
-        newWeights.push({ id: item.id, weight: index })
-        if (item.type === 'group' && group.groupId !== item.id && item.children) {
-          item.children.forEach(chart => {
-            i++
-            newWeights.push({ id: chart.id, groupId: item.id, weight: this.dataList.length + i })
-          })
-        } else if (item.type === 'group' && group.groupId == item.id && item.children) {
-          group.children.forEach(chart => {
-            i++
-            newWeights.push({ id: chart.id, groupId: item.id, weight: this.dataList.length + i })
-          })
-        } else {
-          item.children = []
-        }
-      })
-      const panelId = this.pagePanelId
-      this.$put('/visual/panel/chart/weights', { panelId, charts: newWeights })
-    },
-    move (event, orgin) {
-      const dragClass = document.querySelector('.drag-chart-class')// drag-chart-class:yellow chart-ghost:green  fallback-class choose-class:purple
-
-      const chartTitle = dragClass.querySelector('.chartTitle')
-      chartTitle.style.background = '#d8dce1'
-    },
-    clone (event) {
-      const canvas = event.item.querySelector('canvas')
-      const canvasclone = event.clone.querySelector('canvas')
-      canvasclone.style.border = 'solid 1px yellow'
-      if (canvas && canvasclone) {
-        const image = new Image()
-        image.src = canvas.toDataURL()
-        const ctxClone = canvasclone.getContext('2d')
-        image.onload = function () {
-          ctxClone.drawImage(image, 0, 0)
-        }
-      }
-    },
-    dragPosition (e) {
-      const odiv = e// 目标元素e.target
-      // var targetDiv= document.getElementById('lineChartDiv'+this.chartIndex); //
-      // 得到点击时该容器的：
-      /* const startY = e.clientY
-      const startX = e.clientX
-      const _this = this */
-      // 鼠标相对元素的位置
-      const distY = e.clientY - odiv.offsetLeft
-      const distX = e.clientX - odiv.offsetTop
-      document.onmousemove = function (e) {
-        e.preventDefault()
-        const left = e.clientX - distX
-        const top = e.clientY - distY
-        odiv.style.top = top + 'px'
-        odiv.style.left = left + 'px'
-      }
-
-      document.onmouseup = function () {
-        document.onmousemove = null
-        document.onmouseup = null
-      }
-    },
-    handleDragStart (e, item) {
-      this.dragging = item
-    },
-    handleDragEnd (e, item) {
-      this.dragging = null
-    },
-    // 首先把div变成可以放置的元素，即重写dragenter/dragover
-    handleDragOver (e) {
-      e.dataTransfer.dropEffect = 'move'// e.dataTransfer.dropEffect="move";//在dragenter中针对放置目标来设置!
-    },
-    handleDragEnter (e, item) {
-      e.dataTransfer.effectAllowed = 'move'// 为需要移动的元素设置dragstart事件
-      if (item === this.dragging) {
-        return
-      }
-      const newItems = [...this.dataList]
-      const src = newItems.indexOf(this.dragging)
-      const dst = newItems.indexOf(item)
-
-      newItems.splice(dst, 0, ...newItems.splice(src, 1))
-
-      this.dataList = newItems
-    },
-    initCurrentRecordNum () {
-      this.currentRecordNum = 0
-    },
-    cleanData () {
-      this.dataList = []
-      this.chartDataCacheGroup.clear()
-    },
-    initData (filter) {
-      this.cleanData()
-      // 内含 panelId,开始时间,结束时间
-      this.filter = filter
-      this.childrenScrollTop = 0
-      this.pagePanelId = this.filter.panelId
-      this.getData(this.filter)
-    },
-    searchCharts (searchName) {
-      // this.dataList = [];
-      // this.dataTotalList = [];
-      const chartListTmp = []
-      if (searchName && searchName.trim() !== '') {
-        this.dataTotalListBak.forEach((item) => {
-          if (item.name.indexOf(searchName) > -1) {
-            item.isLoaded = false
-            item.isHide = false
-            chartListTmp.push(item)
-          } else {
-            item.isLoaded = true
-            item.isHide = true
-            let groupShowFlag = false // 判断group内的chart是否被匹配
-            if (item.type === 'group' && item.children) {
-              item.children.forEach(groupItem => {
-                if (groupItem.name.indexOf(searchName) > -1) {
-                  item.isLoaded = false
-                  item.isHide = false
-                  groupShowFlag = true
-                }
-              })
-              if (groupShowFlag) {
-                item.isLoaded = false
-                item.isHide = false
-                chartListTmp.push(item)
-              } else {
-                chartListTmp.push(item)
-              }
-            } else {
-              chartListTmp.push(item)
-            }
-          }
-        })
-      } else {
-        this.dataTotalListBak.forEach((item) => {
-          item.isLoaded = false
-          item.isHide = false
-          this.chartListNoData = false
-          chartListTmp.push(item)
-        })
-      }
-
-      this.dataTotalList = [...chartListTmp]
-      this.dataList = [...this.dataTotalList]
-      let isAllHide = true
-      this.dataList.map(item => {
-        if (!item.isHide) {
-          isAllHide = false
-        }
-      })
-      this.chartListNoData = isAllHide
-      this.$nextTick(() => {
-        if (this.dataList.length > 0) {
-          this.dataList.forEach((item, index) => {
-            this.$refs['editChart' + item.id][0].showLoad(item)// 之后要实现
-            this.setChartSize(item, index)// 设置该图表宽度
-            if (!item.isLoaded) {
-              // 获得当前显示在浏览器的图表，从后台获取数据
-              const chartBox = document.getElementById('chart-' + item.id)// this.$refs['editChart'+item.id][0];
-              this.handleElementInViewport(chartBox, 0, item, index, true)
-            }
-            if (item.type === 'group') {
-              this.$refs['editChart' + item.id][0].$refs.listGroup.searchCharts(searchName, item)
-            }
-          })
-        }
-      })
-    },
-    pageDataList (isAdd, panelId, isSearch) {
-      if (panelId !== this.pagePanelId) {
-        this.currentRecordNum = 0
-      }
-      if (this.dataTotalList && this.dataTotalList.length > 0) {
-        if (this.currentRecordNum >= this.dataTotalList.length) {
-          // alert('数据加载完毕！');
-        } else {
-          const dataTmpList = []
-          let spanSum = 0
-          let line = 0// 行数
-          let isDataFull = false
-          const curRecNum = this.currentRecordNum
-          const len = this.dataTotalList.length
-          for (let i = curRecNum; !isDataFull && i < len; i++) {
-            if (line < this.lineNum) {
-              const item = this.dataTotalList[i]
-              const span = item.span
-              const sumTmp = spanSum + span
-              if (sumTmp <= 12) {
-                spanSum = sumTmp
-              } else { // 大于12表示够1行了，
-                line = line + 1
-                spanSum = span
-              }
-              if (line < this.lineNum) {
-                dataTmpList.push(item)
-                this.currentRecordNum = i + 1
-              } else {
-                this.currentRecordNum = i
-                break
-              }
-            } else { // 数据加载够了
-              isDataFull = true
-              this.currentRecordNum = i
-              break
-            }
-          }
-          if (isAdd) {
-            const oldDataListLen = this.dataList.length
-            const dataListTmp = [...this.dataList]
-            this.dataList = [...dataListTmp.concat(dataTmpList)]
-            this.$nextTick(() => {
-              this.dataSetFirst(dataTmpList, oldDataListLen, isSearch)
-            })
-          } else {
-            this.dataList = [...dataTmpList]
-          }
-        }
-      }
-    },
-
-    // 获取panel详情数据,获取panel下所有chart列表
-    getData (params) {
-      const param = {
-        panelId: params.panelId,
-        query: params.query,
-        from: params.from
-      }
-      // alert-rule单独处理
-      if (param.from === fromRoute.alertRule) {
-        this.dataList = []
-        this.dataList.push({
-          id: -10,
-          panelId: 0,
-          title: this.$t('alert.config.chart.affectEntity'),
-          span: 4,
-          height: 3,
-          type: 'alertRuleInfo',
-          prev: 0,
-          next: -9,
-          buildIn: 1,
-          draggable: false,
-          resizable: false,
-          editable: false
-        })
-        this.dataList.push({
-          id: -9,
-          panelId: 0,
-          title: this.$t('alert.config.chart.alertNumTrend'),
-          span: 8,
-          height: 6,
-          type: 'line',
-          prev: -10,
-          next: -1,
-          unit: 1,
-          buildIn: 1,
-          elements: [{
-            id: '',
-            expression: `nz_alert_nums{id="${this.obj.id}"}`,
-            type: ''
-          }]
-        })
-        this.$set(this.filter, 'start_time', bus.timeFormate(new Date().getTime() - 24 * 60 * 60 * 1000, 'YYYY-MM-DD HH:mm:ss'))
-        this.$set(this.filter, 'end_time', bus.timeFormate(new Date().getTime(), 'YYYY-MM-DD HH:mm:ss'))
-        this.$nextTick(() => {
-          this.dataList.forEach((item, index) => {
-            this.$set(item, 'from', params.from)
-            this.setChartSize(item, index)// 设置该图表宽度
-            const chartBox = document.getElementById('chart-' + item.id)
-            this.handleElementInViewport(chartBox, 0, item, index)
-            if (item.type === 'group') {
-              this.$refs['editChart' + item.id][0].$refs.listGroup.getData(params)
-            }
-          })
-        })
-        return
-      }
-      if (param.from == fromRoute.chartTemp) { // 模板列表
-        if (this.panelDataList[0] && this.panelDataList[0].children) {
-          this.panelDataList[0].children.forEach((item1, i) => {
-            item1.chartIndex = i
-          })
-        }
-        this.dataList = this.panelDataList
-        this.$nextTick(() => {
-          this.dataList.forEach((item, index) => {
-            this.$set(item, 'from', params.from)
-            this.setChartSize(item, index)// 设置该图表宽度
-            const chartBox = document.getElementById('chart-' + item.id)
-            this.handleElementInViewport(chartBox, 0, item, index)
-            if (item.type === 'group') {
-              this.$refs['editChart' + item.id][0].$refs.listGroup.getData(params)
-            }
-          })
-        })
-        return
-      }
-      if (!param.query) delete param.query
-      // 根据panelId获得panel下的所有图表
-      // const groupId = true ? '&groupId=0' : ''
-      if (!params.panelId) {
-        return
-      } // 没有panelId不调用接口
-      this.$get('visual/panel/chart?panelId=' + params.panelId + '&groupId=0' + '&pageSize=-1').then(response => {
-        if (response.code === 200) {
-          response.data.list.forEach((item, index) => {
-            item.isLoaded = false
-          })
-          this.$emit('panel-list-loading', response.data.list)
-          // chart数据存在dataTotalListBak中
-          if (response.data.list.length > 0) {
-            this.dataTotalListBak = response.data.list
-            this.chartListNoData = false
-          } else {
-            this.dataTotalListBak = response.data
-            this.chartListNoData = true
-          }
-          let chartListTmp = []
-          // 查询条件带name
-          if (this.filter.searchName) {
-            const searchTitleStr = this.filter.searchName
-            this.dataTotalListBak.forEach((item) => {
-              if (item.name.indexOf(searchTitleStr) > -1) {
-                chartListTmp.push(item)
-              }
-            })
-          } else {
-            chartListTmp = this.dataTotalListBak
-          }
-          this.dataTotalList = [...chartListTmp]
-
-          this.dataList = [...this.dataTotalList]
-          let addGroupIndex = 0
-          this.dataList.forEach((item) => {
-            if (item.type === 'group' && item.children) {
-              item.children.forEach(chart => {
-                addGroupIndex++
-                chart.chartIndex = this.dataList.length + addGroupIndex
-              })
-            } else {
-              item.children = []
-            }
-          })
-          // this.showShadow=false;
-          this.$nextTick(() => {
-            if (this.dataList.length > 0) {
-              this.dataList.forEach((item, index) => {
-                this.setChartSize(item, index)// 设置该图表宽度
-                this.$set(item, 'from', params.from)
-                this.$set(item, 'draggable', true)
-                this.$set(item, 'resizable', true)
-                this.$set(item, 'editable', true)
-                if (!item.isLoaded) {
-                  // 获得当前显示在浏览器的图表，从后台获取数据
-                  const chartBox = document.getElementById('chart-' + item.id)
-                  this.handleElementInViewport(chartBox, this.childrenScrollTop, item, index)
-                }
-                if (item.type === 'group') {
-                  this.$refs['editChart' + item.id][0].$refs.listGroup.getData(params)
-                }
-              })
-            }
-          })
-        }
-      })
-    },
-    loadChartData (scrollTop) {
-      this.childrenScrollTop = scrollTop
-      if (this.dataList.length > 0) {
-        this.dataList.forEach((item, index) => {
-          if (!item.isLoaded) {
-            // 获得当前显示在浏览器的图表，从后台获取数据
-            const chartBox = document.getElementById('chart-' + item.id)// this.$refs['editChart'+item.id][0];
-            this.handleElementInViewport(chartBox, scrollTop, item, index)
-          }
-          if (item.type === 'diagram') {
-            this.$refs['editChart' + item.id][0].resize()
-          }
-          if (item.type === 'group') {
-            this.$refs['editChart' + item.id][0].$refs.listGroup.loadChartData(scrollTop)
-          }
-        })
-      }
-    },
-    // arr: 该panel下图表list,生成该看板下所有图表
-    dataSetFirst (arr, oldDataListLen, isSearch) {
-      if (arr.length) {
-        arr.forEach((item, index) => {
-          let realIndex = index
-          if (oldDataListLen) {
-            realIndex += oldDataListLen
-          }
-          const chartType = item.type
-          if (chartType !== 'url') {
-            if (isSearch) {
-              this.getChartDataForSearch(item, realIndex)
-            } else {
-              this.getChartData(item, realIndex)
-            }
-          } else {
-            if (!isSearch && this.$refs['editChart' + item.id] && this.$refs['editChart' + item.id][0]) {
-              this.$refs['editChart' + item.id][0].showLoad(item)
-            }
-            this.setChartSize(item, realIndex) // 设置该图表宽度
-          }
-        })
-      }
-    },
-    getChartDataForSearch (chartItem, realIndex) {
-      let chartData = this.chartDataCacheGroup.get(chartItem.id)
-      if (chartData) {
-        const filterType = chartData.filterType
-        const errorMsg = chartData.errorMsg
-        const tableData = chartData.tableData
-        const panelId = chartData.panelId
-        const filter = chartData.filter
-        const legend = chartData.legend
-        const series = chartData.series
-        const singleStatRlt = chartData.singleStatRlt
-        if (this.$refs['editChart' + chartItem.id] && this.$refs['editChart' + chartItem.id].length > 0) {
-          if (chartItem.type === 'table') { // 表格
-            if (filterType === 'showFullScreen') { // 全屏查询
-              this.$refs['editChart' + chartItem.id][0].setData(chartItem, tableData,
-                panelId, filter, filterType, errorMsg)
-            } else {
-              this.$refs['editChart' + chartItem.id][0].setData(chartItem, tableData,
-                panelId, filter, '', errorMsg)
-            }
-          } else if (chartItem.type === 'line' || chartItem.type === 'bar' || chartItem.type === 'stackArea' || chartItem.type === 4 || chartItem.type === 'pie') {
-            if (filterType === 'showFullScreen') { // 全屏查询
-              this.$refs['editChart' + chartItem.id][0].setData(chartItem, series,
-                panelId, filter, legend, filterType, errorMsg)
-            } else {
-              this.$refs['editChart' + chartItem.id][0].setData(chartItem, series,
-                panelId, filter, legend, '', errorMsg)
-            }
-          } else if (chartItem.type === 'singleStat') {
-            if (filterType === 'showFullScreen') { // 全屏查询
-              this.$refs['editChart' + chartItem.id][0].setData(chartItem, singleStatRlt,
-                this.filter.panelId, this.filter, filterType, errorMsg)
-            } else {
-              this.$refs['editChart' + chartItem.id][0].setData(chartItem, singleStatRlt,
-                this.filter.panelId, this.filter, '', errorMsg)
-            }
-          } else if (chartItem.type === 'text') {
-            if (filterType === 'showFullScreen') { // 全屏查询
-              this.$refs['editChart' + chartItem.id][0].setData(chartItem, null,
-                panelId, filter, null, filterType)
-            } else {
-              this.$refs['editChart' + chartItem.id][0].setData(chartItem, null,
-                panelId, filter, null, '')
-            }
-          } else if (chartItem.type === 'logs') {
-            if (filterType === 'showFullScreen') { // 全屏查询
-              this.$refs['editChart' + chartItem.id][0].setData(chartItem, null,
-                panelId, filter, null, filterType)
-            } else {
-              this.$refs['editChart' + chartItem.id][0].setData(chartItem, null,
-                panelId, filter, null, '')
-            }
-          }
-        }
-      } else {
-        this.getChartData(chartItem, realIndex)
-      }
-      chartData = null
-    },
-    // 获取一个图表具体数据,图表信息，图表位置index
-    getChartData (chartInfo, pos, filterType) {
-      const chartItem = chartInfo
-      if (chartItem.type === 'group') {
-        this.$refs['editChart' + chartItem.id][0] && this.$refs['editChart' + chartItem.id][0].setData(chartItem)
-        return
-      }
-      if (chartItem.type === 'assetInfo') {
-        if (chartItem.from !== fromRoute.endpoint) {
-          this.$set(chartItem, 'draggable', true)
-          this.$set(chartItem, 'resizable', true)
-        }
-        this.getAssetInfoChartData(chartItem)
-        return
-      }
-      if (chartItem.type === 'endpointInfo') {
-        this.getEndpointInfoChartData(chartItem)
-        return
-      }
-      if (chartItem.type === 'projectInfo') {
-        chartItem.name = this.$t('project.chart.projectInfo')
-        this.getProjectInfoChartData(chartItem)
-        return
-      }
-      if (chartItem.type === 'alertList') {
-        this.getAlertListChartData(chartItem, filterType)
-        return
-      }
-      if (chartItem.type === 'alertRuleInfo') {
-        this.getAlertRuleChartData(chartItem)
-        return
-      }
-
-      if (chartItem.type == 'diagram') {
-        if (this.$refs['editChart' + chartItem.id] && this.$refs['editChart' + chartItem.id].length > 0) {
-          if (filterType === 'refresh') {
-            this.$get('visual/panel/chart/' + chartItem.id).then(res => {
-              const data = res.data
-              data.param = JSON.parse(data.param)
-              this.$refs['editChart' + chartItem.id][0].setData(data, null,
-                this.filter.panelId, null, '')
-            })
-          } else {
-            this.$refs['editChart' + chartItem.id][0].setData(chartItem, null,
-              this.filter.panelId, null, '')
-          }
-        }
-        return
-      }
-      if (chartItem.type == 'text') {
-        if (this.$refs['editChart' + chartItem.id] && this.$refs['editChart' + chartItem.id].length > 0) {
-          if (filterType === 'showFullScreen') { // 全屏查询
-            this.$refs['editChart' + chartItem.id][0].setData(chartItem, null,
-              this.filter.panelId, null, filterType)
-          } else {
-            this.$refs['editChart' + chartItem.id][0].setData(chartItem, null,
-              this.filter.panelId, null, '')
-          }
-        }
-        return
-      }
-      if (chartItem.type == 'logs') {
-        if (this.$refs['editChart' + chartItem.id] && this.$refs['editChart' + chartItem.id].length > 0) {
-          if (filterType === 'showFullScreen') { // 全屏查询
-            this.$refs['editChart' + chartItem.id][0].setData(chartItem, null,
-              this.filter.panelId, null, filterType)
-          } else {
-            this.$refs['editChart' + chartItem.id][0].setData(chartItem, null,
-              this.filter.panelId, null, '')
-          }
-        }
-        return
-      }
-      if (this.isModel) {
-        this.modelStaticData(chartInfo, filterType)
-      } else {
-        // 没有数据的设置提示信息暂无数据-针对每一个图
-        const len = chartItem.elements ? chartItem.elements.length : 0
-        if (len === 0) {
-          this.$nextTick(() => {
-            if (this.$refs['editChart' + chartItem.id] && this.$refs['editChart' + chartItem.id].length > 0) {
-              this.$refs['editChart' + chartItem.id][0].setData(chartItem, [], this.filter.panelId, this.filter)// ????怎么设置的无数据？？
-            }
-          })
-        } else {
-          let startTime = ''
-          let endTime = ''
-          if (filterType === 'refresh') { // 刷新
-            let now = null
-            if (this.nowTimeType.id === 0 && this.nowTimeType.value === -1) {
-              now = new Date(this.filter.start_time)
-            } else {
-              now = new Date(bus.computeTimezone(new Date().getTime()))
-            }
-            const origin = new Date(this.filter.end_time)
-            const numInterval = now.getTime() - origin.getTime()
-            if (numInterval >= 60000) { // 大于1分钟，则start、end均往后移numInterval，否则时间不变
-              startTime = this.getNewTime(this.filter.start_time, numInterval)
-              endTime = bus.timeFormate(now, 'YYYY-MM-DD HH:mm:ss')
-              this.filter.start_time = startTime
-              this.filter.end_time = endTime
-            } else {
-              startTime = this.filter.start_time
-              endTime = this.filter.end_time
-            }
-          } else if (filterType === 'showFullScreen') { // 全屏时间查询
-            startTime = this.filter.showFullScreenStart_time
-            endTime = this.filter.showFullScreenEnd_time
-            // this.$parent.refreshTime(startTime,endTime);全屏查询，不更新panel列表的时间条件
-          } else {
-            startTime = this.filter.start_time
-            endTime = this.filter.end_time
-          }
-
-          const step = bus.getStep(startTime, endTime)
-          this.$nextTick(() => {
-            const axiosArr = chartItem.elements.map((ele) => {
-              const filterItem = ele
-              let query = encodeURIComponent(filterItem.expression)
-              if ((chartInfo.type === 'line' || chartInfo.type === 'bar' || chartInfo.type === 'stackArea' || chartInfo.type === 'table') && chartInfo.param) { // 如果是这三个 默认给null
-                chartInfo.param.nullType = chartInfo.param.nullType || 'null'
-                query += '&nullType=' + chartInfo.param.nullType
-              }
-              // if(chartInfo.type === 'table'&&chartInfo.param&&chartInfo.param.last == 1){
-              //   return this.$get('/prom/api/v1/query_range?query=' + query + "&start=" + this.$stringTimeParseToUnix(endTime) + "&end=" + this.$stringTimeParseToUnix(endTime) + '&step=' + step);
-              // }
-              if (this.from === fromRoute.chartTemp) {
-                return chartTempData
-              }
-              if (chartInfo.type == 'logs') {
-                return chartTempData
-              }
-              return this.$get('/prom/api/v1/query_range?query=' + query + '&start=' + this.$stringTimeParseToUnix(startTime) + '&end=' + this.$stringTimeParseToUnix(endTime) + '&step=' + step)
-            })
-            // 一个图表的所有element单独获取数据
-            axios.all(axiosArr).then((res) => {
-              if (res.length > 0) {
-                const series = []
-                let singleStatRlt = ''
-                const legend = []
-                const tableData = []
-                /* let sumData = {
-                    name: 'sum',
-                    data: [],
-                    visible: true,
-                    threshold: null,
-                  }; */
-                let errorMsg = ''
-                let pieSeries
-                if (chartInfo.type === 'pie') {
-                  pieSeries = {
-                    type: 'pie',
-                    radius: '100%',
-                    center: ['50%', '50%'],
-                    top: '20%',
-                    bottom: '20%',
-                    // roseType: 'radius',
-                    minAngle: 10,
-                    itemStyle: {
-                      borderRadius: 5,
-                      borderColor: '#fff',
-                      borderWidth: 1
-                    },
-                    label: {
-                      show: false
-                    },
-                    emphasis: {
-                      label: {
-                        show: false
-                      }
-                    },
-                    data: []
-                  }
-                }
-                if (chartInfo.type === 'bar' && chartInfo.param.statistics && chartInfo.param.statistics !== 'null') {
-                  pieSeries = {
-                    type: 'bar',
-                    // roseType: 'radius',
-                    itemStyle: {
-                      borderRadius: 5,
-                      borderColor: '#fff',
-                      borderWidth: 1
-                    },
-                    label: {
-                      show: false
-                    },
-                    emphasis: {
-                      label: {
-                        show: false
-                      }
-                    },
-                    data: []
-                  }
-                }
-                res.forEach((response, innerPos) => {
-                  if (response.status === 'success') {
-                    errorMsg = ''
-                    if (response.data.result) {
-                      // 循环处理每个elements下获取的数据列
-                      if (chartItem.type === 'singleStat') {
-                        if (response.data.result.length === 1) {
-                          const statistics = chartItem.param.statistics || 'null'
-                          if (response.data.result[0].values) {
-                            singleStatRlt = bus.getSingleStatRlt(statistics, response.data.result[0].values)
-                          }
-                        } else if (response.data.result.length > 1) {
-                          singleStatRlt = this.$t('dashboard.panel.singleStatErrorTip')
-                        }
-                      } else {
-                        response.data.result.forEach((queryItem, resIndex) => {
-                          let seriesItem = {
-                            theData: {
-                              name: '',
-                              symbol: 'emptyCircle', // 去掉点
-                              symbolSize: [2, 2],
-                              smooth: 0.2, // 曲线变平滑
-                              showSymbol: false,
-                              data: [],
-                              lineStyle: {
-                                width: 1,
-                                opacity: 0.9
-                              },
-                              animation: false,
-                              type: chartInfo.type
-                            },
-                            metric_name: ''
-                          }
-
-                          if (chartInfo.type === 'stackArea') {
-                            seriesItem.theData.type = 'line'
-                            seriesItem.theData.stack = chartInfo.name
-                            seriesItem.theData.areaStyle = { opacity: 0.3 }
-                          }
-                          if ((chartInfo.type === 'line' || chartInfo.type === 'stackArea' || chartInfo.type === 'bar') && chartInfo.param && chartInfo.param.threshold) {
-                            seriesItem.theData.markLine = {
-                              silent: true,
-                              symbol: ['circle', 'circle'],
-                              label: {
-                                distance: this.computeDistance(chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(chartInfo.param.threshold)),
-                                formatter (params) {
-                                  return chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(params.value)
-                                }
-                              },
-                              lineStyle: {
-                                color: '#d64f40',
-                                width: 2,
-                                type: 'dotted'
-                              },
-                              data: [{
-                                yAxis: Number(chartInfo.param.threshold)
-                              }]
-                            }
-                          }
-                          // 图表中每条线的名字,后半部分
-                          let host = ''// up,
-                          if (queryItem.metric.__name__) {
-                            host = `${queryItem.metric.__name__}{`// up,
-                          }
-                          const tagsArr = Object.keys(queryItem.metric)// ["__name__","asset","idc","instance","job","module","project"]
-                          // 设置时间-数据格式对
-                          let tempArr = []
-                          let dpsArr = []
-                          tempArr = queryItem.values
-                          dpsArr = Object.entries(queryItem.values)// [ ["0",[1577959830.781,"0"]], ["1",[1577959845.781,"0"]] ]
-                          dpsArr = dpsArr.map(item => {
-                            return [item[0], [item[1][0], Number(item[1][1])]]
-                          })
-                          // 判断是否有数据, && tagsArr.length > 0
-                          if (dpsArr.length > 0 && this.$refs['editChart' + chartItem.id] && this.$refs['editChart' + chartItem.id].length > 0) {
-                            tagsArr.forEach((tag, i) => {
-                              if (tag !== '__name__') {
-                                host += `${tag}="${queryItem.metric[tag]}",`
-                              }
-                            })
-                            if (host.endsWith(',')) {
-                              host = host.substr(0, host.length - 1)
-                            }
-                            if (queryItem.metric.__name__) {
-                              host += '}'
-                            }
-                            if (!host || host === '') {
-                              host = chartItem.elements[innerPos].expression
-                            }
-                            // 处理legend别名
-                            let alias = dealLegendAlias(host, chartItem.elements[innerPos].legend)
-                            if (!alias || alias === '') {
-                              alias = host
-                            }
-                            legend.push({ name: host + '-' + chartItem.elements[innerPos].id + '-' + resIndex, alias: alias })
-                            // 图表中每条线的名字,去掉最后的逗号与空格:metric名称,  标签1=a,标签2=c
-
-                            seriesItem.theData.name = host + '-' + chartItem.elements[innerPos].id + '-' + resIndex
-                            // alert(seriesItem.theData.name);
-                            seriesItem.metric_name = seriesItem.theData.name
-                            // 将秒改为毫秒
-                            // alert('table=='+JSON.stringify(queryItem))
-                            seriesItem.theData.data = tempArr.map((dpsItem, dpsIndex) => {
-                              /* 曲线汇总暂不需要
-                                if (sumData.data[dpsIndex]) {
-                                  const sumNum = sumData.data[dpsIndex][1] || 0;
-                                  sumData.data[dpsIndex][1] = sumNum + dpsItem[1];
-                                } else {
-                                  sumData.data[dpsIndex] = [dpsItem[0] * 1000, dpsItem[1]];
-                                }
-                                */
-                              // let t_date = new Date(dpsItem[0] * 1000);
-                              // let timeTmp = bus.timeFormate(t_date, 'YYYY-MM-DD HH:mm:ss');
-                              tableData.push({ // 表格数据
-                                // label: host.slice(host.indexOf('{') + 1,host.indexOf('}')),//label
-                                // metric: queryItem.metric.__name__?queryItem.metric.__name__:'',//metric列
-                                element: { element: host, alias: alias },
-                                // time: timeTmp,//采集时间
-                                // value: dpsItem[1],//数值
-                                data: [dpsItem[0] * 1000, dpsItem[1]]
-                              })
-                              return [dpsItem[0] * 1000, dpsItem[1]]
-                            })
-                            if (chartInfo.type === 'pie') {
-                              pieSeries.data.push({ value: bus.getSingleStatRlt(chartInfo.param.statistics, seriesItem.theData.data), name: host + '-' + chartItem.elements[innerPos].id + '-' + resIndex })
-                            } else if (chartInfo.type === 'bar' && chartInfo.param.statistics && chartInfo.param.statistics !== 'null') {
-                              pieSeries.data.push({ value: bus.getSingleStatRlt(chartInfo.param.statistics, seriesItem.theData.data), name: host + '-' + chartItem.elements[innerPos].id + '-' + resIndex })
-                            } else {
-                              series.push(seriesItem.theData)
-                              seriesItem = null
-                            }
-                          } else if (chartItem.elements && chartItem.elements[innerPos]) {
-                            // 无数据提示
-                            /*
-                              const currentInfo = chartItem.elements[innerPos];
-                              const errorMsg = `图表 ${chartItem.title} 中 ${currentInfo.metric},${currentInfo.tags} 无数据`;
-                              this.$message.warning({
-                                duration: 15,
-                                content: errorMsg,
-                                closable: true,
-                              });
-                              */
-                          }
-                        })
-                      }
-                    }
-                  } else {
-                    if (response.msg) {
-                      // this.$message.error(response.msg);
-                      errorMsg = response.msg
-                    } else if (response.error) {
-                      // this.$message.error(response.error);
-                      errorMsg = response.error
-                    } else {
-                      // this.$message.error(response);
-                      errorMsg = response
-                    }
-                  }
-                })
-
-                if (this.$refs['editChart' + chartItem.id] && this.$refs['editChart' + chartItem.id].length > 0) {
-                  if (chartInfo.type === 'pie') {
-                    series.push(pieSeries)
-                  }
-                  if (chartInfo.type === 'bar' && chartInfo.param.statistics && chartInfo.param.statistics !== 'null') {
-                    series.push(pieSeries)
-                  }
-                  const chartData = {
-                    chartItem: chartItem,
-                    series: series,
-                    singleStatRlt: singleStatRlt,
-                    legend: legend,
-                    tableData: tableData,
-                    panelId: this.filter.panelId,
-                    filter: this.filter,
-                    filterType: filterType,
-                    errorMsg: errorMsg
-                  }
-                  this.chartDataCacheGroup.set(chartInfo.id, chartData)
-                  if (chartItem.type === 'table') { // 表格
-                    if (filterType === 'showFullScreen') { // 全屏查询
-                      this.$refs['editChart' + chartItem.id][0].setData(chartItem, tableData,
-                        this.filter.panelId, this.filter, filterType, errorMsg)
-                    } else {
-                      this.$refs['editChart' + chartItem.id][0].setData(chartItem, tableData,
-                        this.filter.panelId, this.filter, '', errorMsg)
-                    }
-                  } else if (chartItem.type === 'line' || chartItem.type === 'bar' || chartItem.type === 'stackArea' || chartItem.type === 4 || chartItem.type == 'pie') {
-                    if (series.length && chartItem.type === 4) { // 曲线汇总
-                      // series.push(sumData);//后续需要
-                    }
-                    if (filterType === 'showFullScreen') { // 全屏查询
-                      this.$refs['editChart' + chartItem.id][0].setData(chartItem, series,
-                        this.filter.panelId, this.filter, legend, filterType, errorMsg)
-                    } else {
-                      this.$refs['editChart' + chartItem.id][0].setData(chartItem, series,
-                        this.filter.panelId, this.filter, legend, '', errorMsg)
-                    }
-                  } else if (chartItem.type === 'singleStat') {
-                    if (filterType === 'showFullScreen') { // 全屏查询
-                      this.$refs['editChart' + chartItem.id][0].setData(chartItem, singleStatRlt,
-                        this.filter.panelId, this.filter, filterType, errorMsg)
-                    } else {
-                      this.$refs['editChart' + chartItem.id][0].setData(chartItem, singleStatRlt,
-                        this.filter.panelId, this.filter, '', errorMsg)
-                    }
-                  } else if (chartItem.type === 'logs') {
-                    if (filterType === 'showFullScreen') { // 全屏查询
-                      this.$refs['editChart' + chartItem.id][0].setData(chartItem, singleStatRlt,
-                        this.filter.panelId, this.filter, filterType, errorMsg)
-                    } else {
-                      this.$refs['editChart' + chartItem.id][0].setData(chartItem, singleStatRlt,
-                        this.filter.panelId, this.filter, '', errorMsg)
-                    }
-                  }
-                }
-              } else {
-                const type = chartItem.type
-                if (this.$refs['editChart' + chartItem.id] && this.$refs['editChart' + chartItem.id].length > 0) {
-                  if (type === 'table') {
-                    if (filterType === 'showFullScreen') { // table的全屏查询
-                      this.$refs['editChart' + chartItem.id][0].setData(chartItem, [], this.filter.panelId,
-                        this.filter, filterType)
-                    } else {
-                      this.$refs['editChart' + chartItem.id][0].setData(chartItem, [], this.filter.panelId,
-                        this.filter)
-                    }
-                  } else if (type === 'line' || type === 'bar' || type === 'stackArea' || chartItem.type === 4 || chartItem.type === 'pie') {
-                    if (filterType === 'showFullScreen') { // table的全屏查询
-                      this.$refs['editChart' + chartItem.id][0].setData(chartItem, [], this.filter.panelId,
-                        this.filter, filterType)
-                    } else {
-                      this.$refs['editChart' + chartItem.id][0].setData(chartItem, [], this.filter.panelId,
-                        this.filter)
-                    }
-                  } else if (chartItem.type === 'singleStat') {
-                    if (filterType === 'showFullScreen') { // 全屏查询
-                      this.$refs['editChart' + chartItem.id][0].setData(chartItem, '',
-                        this.filter.panelId, this.filter, filterType)
-                    } else {
-                      this.$refs['editChart' + chartItem.id][0].setData(chartItem, '',
-                        this.filter.panelId, this.filter)
-                    }
-                  } else if (chartItem.type === 'logs') {
-                    if (filterType === 'showFullScreen') { // 全屏查询
-                      this.$refs['editChart' + chartItem.id][0].setData(chartItem, '',
-                        this.filter.panelId, this.filter, filterType)
-                    } else {
-                      this.$refs['editChart' + chartItem.id][0].setData(chartItem, '',
-                        this.filter.panelId, this.filter)
-                    }
-                  }
-                }
-              }
-            }).catch((error) => {
-              if (error) {
-                this.$message.error(error.toString())
-                console.error(error)
-              }
-            })
-          })
-        }
-      }
-    },
-    computeDistance (str) {
-      const span = document.querySelector('.temp-dom')
-      if (span) {
-        span.textContent = str
-        const txtWidth = parseFloat(window.getComputedStyle(span).width)
-        return Number('-' + (txtWidth + 5))
-      }
-    },
-    addGroupItem (id) {
-      this.$emit('on-add-group-item-chart', id)
-    },
-    modelStaticData (chartInfo, filterType) {
-      const series = []
-      const legend = []
-      const tableData = []
-      const singleStatRlt = 999
-      if (chartInfo.type === 'singleStat') {
-        // const statistics = chartInfo.param.statistics
-      } else {
-        const seriesItem = {
-          theData: {
-            name: '',
-            symbol: 'emptyCircle', // 去掉点
-            symbolSize: [2, 2],
-            smooth: 0.2, // 曲线变平滑
-            showSymbol: false,
-            data: [],
-            lineStyle: {
-              width: 1,
-              opacity: 0.9
-            },
-            type: chartInfo.type
-          },
-          // visible: true,
-          // threshold: null,
-          metric_name: ''
-        }
-        if (chartInfo.type === 'stackArea') {
-          seriesItem.theData.type = 'line'
-          seriesItem.theData.stack = chartInfo.name
-          seriesItem.theData.areaStyle = { opacity: 0.3 }
-        }
-        // 图表中每条线的名字,后半部分
-        let host = 'host'// up,
-        const queryItem = { metric: { item1: 'item1', item2: 'item2', item3: 'item3' }, values: [] }
-        const tagsArr = Object.keys(queryItem.metric)// ["__name__","asset","idc","instance","job","module","project"]
-        // 设置时间-数据格式对
-        const tempArr = []
-        const dpsArr = []
-        const timeStamp = Math.floor(new Date().getTime() / 1000)
-        for (let i = 0; i < 20; i++) {
-          tempArr.push([timeStamp - (20 - i) * 15, Math.floor(Math.random() * 10) + ''])
-          queryItem.values.push(tempArr[i])
-          dpsArr.push([i + '', tempArr[i]])
-        }
-        // 判断是否有数据, && tagsArr.length > 0
-        if (dpsArr.length > 0 && this.$refs['editChart' + chartInfo.id] && this.$refs['editChart' + chartInfo.id].length > 0) {
-          tagsArr.forEach((tag, i) => {
-            if (tag !== '__name__') {
-              host += `${tag}="${queryItem.metric[tag]}",`
-            }
-          })
-          if (queryItem.metric.__name__) {
-            host += '}'
-          }
-          // 处理legend别名
-          let alias = dealLegendAlias(host, chartInfo.elements[0].legend)
-          if (!alias || alias === '') {
-            alias = host
-          }
-          legend.push({ name: host, alias: alias })
-          // 图表中每条线的名字,去掉最后的逗号与空格:metric名称,  标签1=a,标签2=c
-          seriesItem.theData.name = host
-          // alert(seriesItem.theData.name);
-          seriesItem.metric_name = seriesItem.theData.name
-          // 将秒改为毫秒
-          // alert('table=='+JSON.stringify(queryItem))
-          seriesItem.theData.data = tempArr.map((dpsItem, dpsIndex) => {
-            const tData = new Date(dpsItem[0] * 1000)
-            const timeTmp = bus.timeFormate(tData, 'YYYY-MM-DD HH:mm:ss')
-            tableData.push({ // 表格数据
-              // label: host.slice(host.indexOf('{') + 1,host.indexOf('}')),//label
-              // metric: queryItem.metric.__name__?queryItem.metric.__name__:'',//metric列
-              element: { element: host, alias: alias },
-              time: timeTmp, // 采集时间
-              value: dpsItem[1]// 数值
-            })
-            return [dpsItem[0] * 1000, dpsItem[1]]
-          })
-          series.push(seriesItem.theData)
-        }
-      }
-      if (this.$refs['editChart' + chartInfo.id] && this.$refs['editChart' + chartInfo.id].length > 0) {
-        const errorMsg = ''
-        const chartData = {
-          chartItem: chartInfo,
-          series: series,
-          singleStatRlt: singleStatRlt,
-          legend: legend,
-          tableData: tableData,
-          panelId: this.filter.panelId,
-          filter: this.filter,
-          filterType: filterType,
-          errorMsg: errorMsg
-        }
-        this.chartDataCacheGroup.set(chartInfo.id, chartData)
-        if (chartInfo.type === 'table') { // 表格
-          if (filterType === 'showFullScreen') { // 全屏查询
-            this.$refs['editChart' + chartInfo.id][0].setData(chartInfo, tableData,
-              this.filter.panelId, this.filter, filterType, '')
-          } else {
-            this.$refs['editChart' + chartInfo.id][0].setData(chartInfo, tableData,
-              this.filter.panelId, this.filter, '', '')
-          }
-        } else if (chartInfo.type === 'line' || chartInfo.type === 'bar' || chartInfo.type === 'stackArea' || chartInfo.type === 4) {
-          if (series.length && chartInfo.type === 4) { // 曲线汇总
-            // series.push(sumData);//后续需要
-          }
-          if (filterType === 'showFullScreen') { // 全屏查询
-            this.$refs['editChart' + chartInfo.id][0].setData(chartInfo, series,
-              this.filter.panelId, this.filter, legend, filterType, errorMsg)
-          } else {
-            this.$refs['editChart' + chartInfo.id][0].setData(chartInfo, series,
-              this.filter.panelId, this.filter, legend, '', errorMsg)
-          }
-        } else if (chartInfo.type === 'singleStat') {
-          if (filterType === 'showFullScreen') { // 全屏查询
-            this.$refs['editChart' + chartInfo.id][0].setData(chartInfo, singleStatRlt,
-              this.filter.panelId, this.filter, filterType, errorMsg)
-          } else {
-            this.$refs['editChart' + chartInfo.id][0].setData(chartInfo, singleStatRlt,
-              this.filter.panelId, this.filter, '', errorMsg)
-          }
-        } else if (chartInfo.type === 'logs') {
-          if (filterType === 'showFullScreen') { // 全屏查询
-            this.$refs['editChart' + chartInfo.id][0].setData(chartInfo, singleStatRlt,
-              this.filter.panelId, this.filter, filterType, errorMsg)
-          } else {
-            this.$refs['editChart' + chartInfo.id][0].setData(chartInfo, singleStatRlt,
-              this.filter.panelId, this.filter, '', errorMsg)
-          }
-        }
-      }
-    },
-    getEndpointInfoChartData (chartInfo) {
-      const detail = []
-      this.$refs['editChart' + chartInfo.id][0] && this.$refs['editChart' + chartInfo.id][0].showLoad()
-      chartInfo.name = this.$t('project.chart.endpointInfo')
-      chartInfo.from = fromRoute.endpoint
-      const basicInfo = JSON.parse(JSON.stringify(this.obj))
-      detail.push(
-        {
-          data: {
-            id: basicInfo.id ? basicInfo.id : '-',
-            name: basicInfo.name ? basicInfo.name : '-',
-            // type: basicInfo.module.type,
-            project: basicInfo.project ? basicInfo.project.name : '-',
-            module: basicInfo.module ? basicInfo.module.name : '-',
-            asset: basicInfo.asset ? basicInfo.asset.manageIp : '-',
-            alert: basicInfo.alertNum ? basicInfo.alertNum : 0,
-            state: basicInfo.configs ? basicInfo.configs : '-'
-          },
-          type: 'endpointInfo',
-          title: this.$t('project.chart.basicTitle')
-        }
-      )
-      this.$refs['editChart' + chartInfo.id][0].setData(chartInfo, detail)
-    },
-    getAssetInfoChartData (chartInfo) {
-      const vm = this
-      chartInfo.name = this.$t('asset.assetInfo')
-      const detail = []
-      if (!this.isModel) {
-        const assetId = this.obj.assetId ? this.obj.assetId : this.obj.id
-        const arr = []
-        arr.push(this.$get(`/asset/asset/${assetId}`))
-        arr.push(this.$get(`/asset/asset/feature/${assetId}`))
-        if (this.$refs['editChart' + chartInfo.id][0]) {
-          this.$refs['editChart' + chartInfo.id][0].showLoad()
-        }
-
-        // this.$get('/asset/info?id=' + assetId).then(response => {
-        //   if (response.code == 200) {
-        //     response.data && (function () {
-        //       response.data.Basic && detail.push({
-        //         title: vm.$t('project.chart.basicTitle'),
-        //         type: 'basic',
-        //         data: response.data.Basic
-        //       })
-        //       response.data.Attribute && detail.push({
-        //         title: vm.$t('asset.featureTitle'),
-        //         type: 'attribute',
-        //         data: response.data.Attribute
-        //       })
-        //     }())
-        //   }
-        // })
-        Promise.all(arr).then(res => {
-          if (res) {
-            const basic = res[0].data
-            // basic.cabinet = basic.cabinet ? basic.cabinet.name : '-'
-            const obj = {
-              id: basic.id,
-              // host: basic.pingInfo ? basic.pingInfo.host : '-',
-              // assetType: basic.type ? basic.type.name : '-',
-              name: basic.name ? basic.name : '-',
-              manageIp: basic.manageIp ? basic.manageIp : '-',
-              type: basic.type ? basic.type.name : '-',
-              state: basic.state ? basic.state.name : '-',
-              pingRtt: basic.pingInfo ? basic.pingInfo.rtt : '-',
-              dataCenter: basic.dc ? basic.dc.name : '-',
-              cabinet: basic.cabinet ? basic.cabinet.name : '-',
-              brand: basic.brand ? basic.brand.name : '-',
-              model: basic.model ? basic.model.name : '-',
-              tags: basic.fields ? basic.fields : '-',
-              alert: basic.alertNum ? basic.alertNum : 0,
-              endpoint: basic.endpointNum ? basic.endpointNum : 0,
-              // purchaseDate: basic.purchaseDate,
-              // vendor: basic.brand ? basic.brand.name : '-',
-              // sn: basic.sn,
-              pingStatus: basic.pingInfo ? basic.pingInfo.status : '-'
-              // cabinetStart: basic.cabinetStart,
-              // cabinetEnd: basic.cabinetEnd,
-              // pingLastReply: basic.pingInfo ? basic.pingInfo.lastUpdate : ''
-              // principal: basic.dc ? basic.dc.principal : '-',
-              // tel: basic.tel,
-            }
-            basic && detail.push({
-              title: vm.$t('project.chart.basicTitle'),
-              type: 'basic',
-              data: obj
-            })
-            res[1] && detail.push({
-              title: vm.$t('asset.featureTitle'),
-              type: 'attribute',
-              data: res[1].data
-            })
-          }
-          this.$refs['editChart' + chartInfo.id][0].setData(chartInfo, detail, this.filter.panelId, this.filter)
-        })
-      } else {
-        detail.push({
-          title: vm.$t('project.chart.basicTitle'),
-          type: 'basic',
-          data: {
-            sn: 'assetInfo Test',
-            host: '192.168.40.42',
-            pingStatus: 1,
-            pingRtt: 80,
-            cpuNum: '8',
-            memery: '12GB',
-            memery$_$free: '3GB'
-          }
-        })
-        detail.push({
-          title: vm.$t('asset.featureTitle'),
-          type: 'feature',
-          data: {
-            CPU: 'Intel E500',
-            Memory: '256GB',
-            NetworkInterface: ['eth0', 'eth1'],
-            Disk: [{
-              mount: '/',
-              total: '256GB',
-              free: '128GB',
-              usageRate: '50%'
-            }]
-          }
-        })
-        this.$refs['editChart' + chartInfo.id][0].setData(chartInfo, detail, this.filter.panelId, this.filter)
-      }
-    },
-    getProjectInfoChartData (chartInfo) {
-      const vm = this
-      const detail = []
-      if (!this.isModel) {
-        this.$refs['editChart' + chartInfo.id][0].showLoad(chartInfo)
-        this.$get('/project/info?id=' + this.obj.id).then(response => {
-          if (response.code === 200) {
-            response.data && (function () {
-              response.data.basic && detail.push({
-                title: vm.$t('project.chart.basicTitle'),
-                data: response.data.basic,
-                type: 'project'
-              })
-              response.data.module && (function () {
-                response.data.module.forEach(d => {
-                  detail.push({
-                    title: `${vm.$t('project.module.module')}：${d.name}`,
-                    data: d,
-                    type: 'module'
-                  })
-                })
-              }())
-            }())
-          }
-          this.$refs['editChart' + chartInfo.id][0].setData(chartInfo, detail, this.filter.panelId, this.filter, response.msg)
-        })
-      } else {
-        detail.push({
-          title: 'system',
-          data: {
-            id: 1,
-            name: 'system',
-            remark: '描述信息',
-            alertStat: [1, 2, 3]
-          }
-        })
-        detail.push({
-          title: `${this.$t('project.module.module')}：kafka`,
-          data: {
-            id: 1,
-            name: 'kafka',
-            type: 'http',
-            remark: '描述信息',
-            endpointStat: [3, 23],
-            alertStat: [2, 3, 4]
-          }
-        })
-        detail.push({
-          title: `${this.$t('project.module.module')}：kafkakafkakafkakafkakafkakafkakafka`,
-          data: {
-            id: 2,
-            name: 'kafkakafkakafkakafkakafkakafkakafka',
-            type: 'http',
-            remark: '描述信息',
-            endpointStat: [3, 23],
-            alertStat: [2, 0, 4]
-          }
-        })
-        detail.push({
-          title: `${this.$t('project.module.module')}：kafkakafka`,
-          data: {
-            id: 3,
-            name: 'kafkakafka',
-            type: 'snmp',
-            remark: '描述信息',
-            endpointStat: [3, 0],
-            alertStat: [2, 3, 4]
-          }
-        })
-        this.$refs['editChart' + chartInfo.id][0].setData(chartInfo, detail, this.filter.panelId, this.filter)
-      }
-    },
-    getAlertListChartData (chartInfo, filterType) {
-      if (this.obj) {
-        this.$set(chartInfo, 'param', { endpointId: this.obj.id })
-      }
-      this.$refs['editChart' + chartInfo.id][0] && this.$refs['editChart' + chartInfo.id][0].getAlertList(null, null, chartInfo)
-    },
-    getAlertRuleChartData (chartInfo) {
-      const vm = this
-      const detail = []
-      const req = new Promise((resolve, reject) => {
-        this.$get('alert/rule/stat?id=' + this.obj.id).then(response => {
-          if (response.code == 200) {
-            response.data && (function () {
-              if (response.data.project && response.data.project.length > 0) {
-                detail.push({ title: vm.$t('overall.entity'), data: convert(response.data.project) })
-              }
-              /* if (response.data.module && response.data.module.length > 0) {
-                  detail.push({title: vm.$t("project.module.module"), data: convert(response.data.module)});
-                }
-                if (response.data.endpoint && response.data.endpoint.length > 0) {
-                  detail.push({title: vm.$t("project.endpoint.endpoint"), data: convert(response.data.endpoint)});
-                } */
-              if (response.data.asset && response.data.asset.length > 0) {
-                detail.push({ title: vm.$t('asset.asset'), data: convert(response.data.asset) })
-              }
-            }())
-            resolve(true)
-          }
-        })
-      })
-      req.then(result => {
-        this.$refs['editChart' + chartInfo.id][0].setData(chartInfo, detail)
-      })
-
-      function convert (d) {
-        const data = {}
-        d.forEach(item => {
-          data[item.name] = item.nums
-          !data._module_ && (data._module_ = {})
-          if (item.module && item.module instanceof Array && item.module.length > 0) {
-            data._module_[item.name] = {}
-            item.module.forEach(m => {
-              data._module_[item.name][m.name] = m.nums
-              !data._module_[item.name]._endpoint_ && (data._module_[item.name]._endpoint_ = {})
-              if (m.endpoint && m.endpoint instanceof Array && m.endpoint.length > 0) {
-                data._module_[item.name]._endpoint_[m.name] = {}
-                m.endpoint.forEach(e => {
-                  data._module_[item.name]._endpoint_[m.name][e.name] = e.nums
-                })
-              }
-            })
-          }
-        })
-        return data
-      }
-    },
-
-    // 设置图表的尺寸
-    setChartSize (item, index) {
-      this.$nextTick(() => {
-        const chartBox = document.getElementById('chart-' + item.id)
-        if (chartBox) {
-          chartBox.style.width = `${(item.span / 12) * 100}%`
-          chartBox.style.height = `${Math.floor(this.stepWidth * item.height)}px`
-          if (item.type === 'group') {
-            chartBox.style.height = 'auto'
-          }
-        }
-      })
-    },
-    getNewTime (time, num) {
-      const date = new Date(time)
-      const newDate = new Date(parseInt(date.getTime(), 10) + num)
-      return bus.timeFormate(newDate, 'YYYY-MM-DD HH:mm:ss')
-    },
-    // 删除图表
-    removeChart (chartId) { // from 区分从哪里点击的删除 1.从图表面板 2.从编辑框
-      const chart = this.dataList.find(item => item.id === chartId)
-      if (chart) {
-        this.$emit('on-remove-chart', chart)
-      }
-    },
-    // 删除图表
-    removeChartGroup (chart) { // from 区分从哪里点击的删除 1.从图表面板 2.从编辑框
-      if (chart) {
-        this.$emit('on-remove-chart', chart)
-      }
-    },
-    // 复制图表
-    duplicateChart (chartId, duplicateChartBack) {
-      const chart = this.dataList.find(item => {
-        return item.id === chartId
-      })
-      if (chart) {
-        const copyChart = { ...chart }
-        delete copyChart.id
-        delete copyChart.pid
-        delete copyChart.varId
-        delete copyChart.varType
-        copyChart.name = 'Copy_' + copyChart.name
-        this.$emit('on-edit-chart', copyChart, true)
-      }
-    },
-    duplicateChartGroup (chart) {
-      if (chart) {
-        const copyChart = { ...chart }
-        delete copyChart.id
-        delete copyChart.pid
-        delete copyChart.varId
-        delete copyChart.varType
-        copyChart.name = 'Copy_' + copyChart.name
-        this.$emit('on-edit-chart', copyChart, true)
-      }
-    },
-    // 编辑图表
-    editData (chartId) {
-      // 获取该id下chart的相关信息
-      const chart = this.dataList.find(item => {
-        return item.id === chartId
-      })
-      if (chart) {
-        this.$emit('on-edit-chart', chart)
-      }
-    },
-    // 编辑 group下的图表
-    editDataGroup (chart) {
-      if (chart) {
-        this.$emit('on-edit-chart', chart)
-      }
-    },
-    editChartForDrag (chartItem) {
-      const chart = this.dataList.find(item => item.id === chartItem.id)
-      chart.span = chartItem.span
-      chart.height = chartItem.height
-    },
-    // 刷新列表中的一个图表
-    refreshChart (chartId, searchTime) {
-      this.dataList.forEach((item, index) => {
-        if (item.id === chartId) {
-          this.getChartData(item, index, 'refresh')
-        }
-      })
-    },
-    searchData (chartId, searchTime) {
-      if (searchTime) { // 全屏时间查询
-        this.filter.showFullScreenStart_time = bus.timeFormate(searchTime[0], 'YYYY-MM-DD HH:mm:ss')
-        this.filter.showFullScreenEnd_time = bus.timeFormate(searchTime[1], 'YYYY-MM-DD HH:mm:ss')
-      }
-      this.dataList.forEach((item, index) => {
-        if (item.id === chartId) {
-          this.getChartData(item, index, 'showFullScreen')
-        }
-      })
-    },
-    // 懒加载，判断网页区域，加载可见区的prom数据
-    handleElementInViewport (ele, scrollTop, item, index, isSearch) {
-      /*
-        网页被卷去的高：document.body.scrollTop
-        网页正文全文高：document.body.scrollHeight
-        网页可见区域高（包括边线的高）：document.body.offsetHeight；
-        网页可见区域高：document.body.clientHeight
-        */
-      const that = this
-      setTimeout(function () {
-        const itemHeight = item.height
-        // 1.元素距离页面顶部的距离
-        const mainOffsetTop = ele.offsetTop // offsetTop: 当前元素顶部距离最近父元素顶部的距离,和有没有滚动条没有关系。单位px，只读元素。
-        // 2.元素的高度
-        const mainHeight = itemHeight // ele.offsetHeight;//itemHeight;
-        // 3.页面滚动的距离
-        const windowScrollTop = scrollTop// document.documentElement.scrollTop || document.body.scrollTop;
-        // 4.浏览器可见区域的高度
-        const windowHeight = (window.innerHeight || document.documentElement.clientHeight) - 50 - 42
-
-        /*
-          * 在窗口上下滚动的情况下, 一个页面元素的状态有下面3种：
-          1.向上滚动超出可见区域
-          2.向下滚动超出可视区域
-          3.在可视区域内
-          * 第一种情况   由于元素随页面向上滚动, 整个页面滚动的距离  大于 （元素距离页面顶部的距离 + 元素本身的高度 ）-> 超出
-          * 第二种情况   由于元素随页面向下滚动, 整个页面滚动的距离  小于 （元素距离页面顶部的距离 - 浏览器可见区域高度 ）-> 超出
-          * */
-        /* console.log("___isInView____","元素距离页面顶部的距离mainOffsetTop="+mainOffsetTop)//不变
-          console.log("___isInView____","元素高度mainHeight="+mainHeight)//不变
-          console.log("___isInView____","scrollTop页面滚动的距离windowScrollTop="+windowScrollTop)//变
-          console.log("___isInView____","浏览器可见区域高度windowHeight="+windowHeight)//不变
-          console.log(item.title,(mainOffsetTop+mainHeight/3),"<",(windowScrollTop+windowHeight),((mainOffsetTop+mainHeight/3) < (windowScrollTop+windowHeight))) */
-        if ((mainOffsetTop + mainHeight / 3) < (windowScrollTop + windowHeight)) {
-          const chartType = item.type
-          item.isLoaded = true
-          if (chartType !== 'url') {
-            that.getChartDataForSearch(item, index)
-          } else {
-            that.$refs['editChart' + item.id][0].showLoad(item)
-          }
-        }
-      }, 500)
-    },
-    resize () {
-      this.init()
-      this.$nextTick(() => {
-        if (this.$parent.$parent.dateChange) {
-          this.$parent.$parent.dateChange()
-        } else {
-          this.$parent.dateChange()
-        }
-      })
-    },
-    init () {
-      const dom = document.getElementById('listContainer')
-      if (dom) {
-        this.stepWidth = this.chartResizeTool.stepWidth(dom.offsetWidth - 14)
-        this.tempDomInit()
-      }
-    },
-    chartBySync (item) {
-      this.$post('visual/panel/chart/syncTmpl', { ids: [item.id] }).then(res => {
-        if (res.code === 200) {
-          this.getData(this.filter)
-          // setTimeout(() => {
-          //   this.refreshChart(item.id)
-          // }, 100)
-          this.$message.success(this.$t('tip.syncSuccess'))
-        } else {
-          this.$message.error(res.msg)
-        }
-      })
-    }
-  },
-  created () {
-    this.chartDataCacheGroup = new Map()
-  },
-  mounted () {
-    this.init()
-    window.addEventListener('resize', this.resize, false)
-  },
-  beforeDestroy () {
-    window.removeEventListener('resize', this.resize, false)
-  }
-}
-
-</script>
diff --git a/nezha-fronted/src/components/charts/chart-pie.vue b/nezha-fronted/src/components/charts/chart-pie.vue
deleted file mode 100644
index 36e0796fd..000000000
--- a/nezha-fronted/src/components/charts/chart-pie.vue
+++ /dev/null
@@ -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>
diff --git a/nezha-fronted/src/components/charts/chart-single-stat.vue b/nezha-fronted/src/components/charts/chart-single-stat.vue
deleted file mode 100644
index e0621a00e..000000000
--- a/nezha-fronted/src/components/charts/chart-single-stat.vue
+++ /dev/null
@@ -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>
diff --git a/nezha-fronted/src/components/charts/chart-url.vue b/nezha-fronted/src/components/charts/chart-url.vue
deleted file mode 100644
index 76f29e076..000000000
--- a/nezha-fronted/src/components/charts/chart-url.vue
+++ /dev/null
@@ -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>
diff --git a/nezha-fronted/src/components/charts/chartPreview.vue b/nezha-fronted/src/components/charts/chartPreview.vue
deleted file mode 100644
index ee10650c8..000000000
--- a/nezha-fronted/src/components/charts/chartPreview.vue
+++ /dev/null
@@ -1,1912 +0,0 @@
-<style>
-  #chartPreviewDailog .el-dialog__body {
-    padding-bottom:20px !important;
-  }
-  #chartPreviewDailog .el-dialog__header{
-    padding: 20px 20px 0 !important;
-  }
-  /deep/ .el-dialog__body {
-    height: 70vh;
-    display: block;
-    min-height: 300px;
-  }
-</style>
-<template>
-    <el-dialog class="chart-preview-dialog nz-dialog" id="chartPreviewDailog"
-               :visible.sync="screenModal"
-               :width="dailogWidth"
-               :modal-append-to-body='false'
-               :modal="!fromEndpoint"
-               @close="handleClose"
-               @opened="initDialog">
-      <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" class="chart-title">
-        <span class="nz-dialog-title chart-title-text">{{chart.name}}</span>
-        <div class="float-right panel-calendar dialog-tool"  v-if="chart.type!=='url' && chart.type !=='alertList'">
-
-<!--          <time-picker ref="calendarPanel" class="nz-dashboard-picker" style="margin-top: -12px;" @change="dateChange" v-if="chart.type !='text'"></time-picker>-->
-          <pick-time :refresh-data-func="dateChange" v-model="searchTime" :use-chart-unit="false" ref="pickTime" style="height: 28px;" id="chart-preview"></pick-time>
-          <!--
-          <my-date-picker ref="calendar" prefix-icon=" " size="mini" class="nz-preview-picker"
-                          format="yyyy/MM/dd HH:mm"
-                          @change="dateChange"
-                          v-model="searchTime"
-                          type="datetimerange"
-                          :picker-options="pickerOptions"
-                          :range-separator="$t('dashboard.panel.to')"
-                          :start-placeholder="$t('dashboard.panel.startTime')"
-                          :end-placeholder="$t('dashboard.panel.endTime')"
-                          align="right">
-          </my-date-picker>-->
-        </div>
-      </div>
-
-      <template v-if="chart.type==='line' || chart.type==='bar'||chart.type==='stackArea' || chart.type == 'endpointInfo' ||chart.type =='pie'">
-        <div id="chartEchartPreview" @mouseenter="mouseEnterFullChart" @mouseleave="mouseLeaveFullChart" class="height-100">
-          <div class="line-area" ref="screenShowArea"  id="screenShowArea" style="margin-top:0px;height: calc(70vh - 50px);min-height: 300px;"></div>
-          <div class="chart-no-data height-100" v-show="noData">No Data</div>
-
-          <template v-if="!hasLegendOptions">
-            <div @mouseenter="mouseEnterFullChart" @mouseleave="mouseLeaveFullChart"  class="legend-container legend-container-screen" ref="screenLegendArea" v-show="showLegend">
-              <div v-for="(item, index) in screenLegendList" :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>
-          </template>
-          <template v-else>
-            <div @mouseenter="mouseEnterFullChart" @mouseleave="mouseLeaveFullChart" class="legend-container legend-container-screen" ref="screenLegendArea" v-show="showLegend">
-              <table style="width: 100%" border="0" cellpadding="0" cellspacing="0">
-                <th style="width: 100%"></th>
-                <template v-for="(legendOption, index) in screenLegendOptions">
-                  <th v-if="legendOption.value == 'on'" :key="index" class="option-th legend-option-cell" >
-                    <span @click="legendValueSort(legendOption,screenLegendList,screenLegendOptions)">{{legendOption.option}}</span>
-                    <span ><i style="font-size: 12px !important;" :class="{'nz-icon nz-icon-arrow-down':legendOption.sort =='asc','nz-icon nz-icon-arrow-up':legendOption.sort=='desc'}" ></i></span>
-                  </th>
-                </template>
-                <tbody>
-                <tr v-for="(item, index) in screenLegendList" :key="'legend_' + item.name+'_'+index">
-                  <td>
-                    <div :title="item.alias?item.alias:item.name"  @click="clickScreenLegend(item.name,index)" class="legend-item" :class="{'ft-gr':isGreyScreen[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>
-                    </div>
-                  </td>
-                  <template v-for="(legendOption, i) in screenLegendOptions">
-                    <td v-if="legendOption.value == 'on'" :key="i" class="legend-option-cell">{{formatLegendData(item[legendOption.option])}}</td>
-                  </template>
-                </tr>
-                </tbody>
-              </table>
-            </div>
-          </template>
-
-        </div>
-      </template>
-
-      <template v-if="chart.type==='singleStat'">
-        <div id="chartSingleStatPreview" @mouseenter="mouseEnterFullChart" @mouseleave="mouseLeaveFullChart"
-         style=" height:100%;display:table;text-align:center;width:calc(100% - 16px);color:#000;"  class="height-100">
-          <div class="line-area" ref="singleStatArea"  id="singleStatArea"  :style="{color:mapping&&mapping.color?mapping.color.text:'#000',background:mapping&&mapping.color?mapping.color.bac:'#fff'}" style="margin-top:0px; text-align:center;
-      vertical-align: middle;
-      display:table-cell;
-      font-size:30px;">
-            {{serieSingleStat}}
-            <div class="chart-no-data" v-show="noData">No Data</div>
-          </div>
-        </div>
-      </template>
-
-      <template  v-if="chart.type==='table'">
-        <div id="chartTablePreview" :class="{'visible':tableShow,'hidden':!tableShow}"  class="height-100">
-        <el-table :data="seriesItemScreen" border class="nz-table2" height="95%" id="tableContainer" style="margin-top: 10px;"  tooltip-effect="light">
-          <!--                    <el-table-column sortable :show-overflow-tooltip="true" prop="metric" :label="$t('dashboard.panel.chartTableColumn.metric')" ></el-table-column>-->
-          <!--                    <el-table-column sortable :show-overflow-tooltip="true" prop="label" :label="$t('dashboard.panel.chartTableColumn.label')" ></el-table-column>-->
-          <el-table-column sortable prop="time" :label="$t('dashboard.panel.chartTableColumn.time')" width="145" ></el-table-column>
-          <el-table-column sortable prop="element" :show-overflow-tooltip="true" :label="$t('dashboard.panel.chartTableColumn.element')" >
-            <template slot-scope="scope">
-              {{ scope.row.element.alias?scope.row.element.alias:scope.row.element.element}}
-            </template>
-          </el-table-column>
-          <el-table-column sortable prop="value" :label="$t('dashboard.panel.chartTableColumn.value')" width="150" class-name="costom-value">
-            <template slot-scope="scope">
-              <div :style="{color:scope.row.mapping?scope.row.mapping.color.text:'#000',background:scope.row.mapping?scope.row.mapping.color.bac:'#fff'}">
-                <span style="padding: 0px 10px;">{{ scope.row.value}}</span>
-              </div>
-            </template>
-          </el-table-column>
-        </el-table>
-        <Pagination :pageObj="screenPageObj" @pageNo='screenPageNo' @pageSize='screenPageSize' ref="Pagination" ></Pagination>
-        </div>
-      </template>
-
-      <template  v-if="chart.type==='url'">
-        <div id="chartUrlPreview" :class="{'visible':urlShow,'hidden':!urlShow}" class="char-url-preview height-100" >
-          <iframe id="chartUrlFrame" frameborder="0" width="100%" height="100%" name="showHere" scrolling=auto
-                  style="z-index:5000;"
-          ></iframe>
-        </div>
-      </template>
-
-      <chart-alert-list v-if="chart.type === 'alertList'" :show-option="false" :showTitle="false" ref="alertListChart" id="chartAlertListPreview" :chart-info="chart" :chart-data="chart"  class="height-100"></chart-alert-list>
-
-      <template v-if="chart.type==='text'">
-          <div  id="chartTextPreview" class="chart-text-preview height-100">
-            <div style="height: 100%; overflow: auto;">
-              <div style="height: 100%;" v-html="chart.param.text" ></div>
-            </div>
-          </div>
-      </template>
-
-        <template v-if="chart.type==='diagram'">
-          <div  id="chartDiagramPreview" class="chart-text-preview height-100">
-            <div style="height: 100%; overflow: auto;">
-                <diagram :topoData="chart.param.topo" :fromChartBox="true" :topologyIndexF="-3"/>
-            </div>
-          </div>
-      </template>
-
-      <loading  ref="loadingPreview"  class="height-100"></loading>
-    </el-dialog>
-</template>
-<script>
-import axios from 'axios'
-import * as echarts from 'echarts'
-import bus from '../../libs/bus'
-import loading from '../common/loading'
-import chartDataFormat from './chartDataFormat'
-import { randomcolor } from '../common/js/radomcolor/randomcolor.js'
-import chartAlertList from './chart-alert-list'
-import chartConfig from '../page/dashboard/overview/chartConfig'
-import diagram from '@/components/common/ChartDiagram/diagram'
-import moment from 'moment-timezone'
-import { formatScientificNotation, dealLegendAlias } from '@/components/common/js/tools'
-export default {
-  name: 'chartPreview',
-  components: {
-    loading: loading,
-    'chart-alert-list': chartAlertList,
-    diagram
-  },
-  props: {
-    panelId: Number,
-    fromEndpoint: Boolean
-  },
-  data () {
-    return {
-      chart: {},
-      noData: false,
-      // data: {}, // 该图表信息,chartItem
-      dailogWidth: '80%',
-      // seriesItem: [], // 保存信息
-      isError: false,
-      errorContent: '',
-      serieSingleStat: '',
-      seriesItemScreen: [],
-      screenPageObj: {
-        pageNo: 1,
-        pageSize: this.$CONSTANTS.defaultPageSize,
-        total: 0
-      },
-      unit: {},
-      // images: '',
-      // toolbox: false,
-      items: {
-        metric_name: [], // 每条数据列名称
-        xAxis: [],
-        theData: [] // series数据组
-      },
-      isStackArea: false,
-      echartModalStore: null, // 全屏查看时数据
-      chartType: 'line', // 图表类型
-      screenModal: false,
-      // 查询数据使用
-      stableFilter: {}, // 保存数据使用,初始化起止时间,单图or多图等
-      legend: [],
-      legendList: [],
-      screenLegendList: [],
-      isGrey: [],
-      isGreyScreen: [],
-      bgColorList: ['#7bbfea', '#b3424a', '#f05b72', '#596032', '#bd6758',
-        '#cd9a5b', '#918597', '#70a19f', '#005344', '#FF00FF',
-        '#f7acbc', '#5f5d46', '#66ffff', '#ccFF66', '#f47920',
-        '#769149', '#1d953f', '#abc88b', '#7f7522', '#9b95c9',
-        '#f3715c', '#ea66a6', '#d1c7b7', '#9d9087', '#77787b',
-        '#f58220', '#c37e00', '#00ae9d', '#f26522', '#76becc',
-        '#76624c', '#d71345', '#2468a2', '#ca8687', '#1b315e'
-      ],
-      // firstShow: false, // 默认不显示操作按钮,
-      // dropdownMenuShow:false,
-      showLegend: true,
-      tableShow: true,
-      urlShow: true,
-      searchTime: bus.getTimezontDateRange(),
-      // oldSearchTime:[],
-      minHeight: 500,
-      chartSpaceHeight: 5, // top-border: 1,bottom-border: 1,padding-bottome:3
-      titleHeight: 58,
-      legendHeight: 80,
-      pageHeight: 40,
-      hasLegendOptions: false,
-      screenLegendOptions: [],
-      mapping: {}
-    }
-  },
-  computed: {
-  },
-  watch: {},
-  methods: {
-    // 全屏查看
-    show (chartInfo) {
-      this.isError = false
-      this.searchTime = bus.getTimezontDateRange()
-      this.chart = JSON.parse(JSON.stringify(chartInfo))
-      const chartType = chartInfo.type
-      let chartContainerId = 'chartEchartPreview'
-      if (chartType === 'table') {
-        this.tableShow = false
-        chartContainerId = 'chartTablePreview'
-      } else if (chartType === 'line' || chartType === 'bar' || chartType === 'stackArea' || chartType === 4 || chartType == 'pie') {
-        this.isGreyScreen = []
-        this.showLegend = false
-        chartContainerId = 'chartEchartPreview'
-      } else if (chartType === 'url') {
-        this.urlShow = false
-        chartContainerId = 'chartUrlPreview'
-      } else if (chartType === 'singleStat') {
-        chartContainerId = 'chartSingleStatPreview'
-      } else if (chartType === 'alertList') {
-        chartContainerId = 'chartAlertListPreview'
-      } else if (chartType == 'text') {
-        chartContainerId = 'chartTextPreview'
-      } else if (chartType == 'diagram') {
-        chartContainerId = 'chartDiagramPreview'
-      }
-
-      this.screenModal = true
-    },
-    setLoadFrame () {
-      if (this.chart.type === 'url') {
-        const that = this
-        this.$nextTick(() => {
-          const iframe = document.querySelector('#chartUrlFrame')
-
-          // 处理兼容行问题
-          if (iframe.attachEvent) {
-            iframe.attachEvent('onload', function () {
-              // iframe加载完毕以后执行操作
-              that.$refs.loadingPreview.endLoading()
-            })
-          } else {
-            iframe.onload = function () {
-              // iframe加载完毕以后执行操作
-              that.$refs.loadingPreview.endLoading()
-            }
-          }
-          iframe.src = this.chart.param.url
-        })
-      }
-    },
-    filterShowData (source, pageObj) {
-      return source.slice((pageObj.pageNo - 1) * pageObj.pageSize, pageObj.pageNo * pageObj.pageSize)
-    },
-    initDialog () {
-      // 此时初始化，才能获得screenShowArea对象，否则此对象为undefined，无法初始化图表
-      if (this.$refs.pickTime) {
-        this.$refs.pickTime.$refs.timePicker.setCustomTime()
-      }
-      const chartType = this.chart.type
-      if (chartType === 'table') {
-        //
-      } else if (chartType === 'line' || chartType === 'bar' || chartType === 'stackArea' || chartType === 4 || chartType == 'endpointInfo' || chartType == 'pie') {
-        if (this.echartModalStore) {
-          this.echartModalStore.clear()
-        }
-      } else if (chartType === 'url') {
-        //
-      }
-      // 后台获得数据
-      if (this.chart.type !== 'url' && this.chart.type !== 'text' && this.chart.type !== 'diagram') {
-        this.$refs.loadingPreview.startLoading()
-        this.getChartData()
-      } else if (this.chart.type == 'url') {
-        this.$refs.loadingPreview.startLoading()
-        this.urlShow = true
-        this.setLoadFrame()
-      }
-    },
-    getAlertListChartData: function (chartInfo, filterType) {
-      this.$refs.alertListChart.getAlertList(filterType, true, this.chart)
-      this.$refs.loadingPreview.endLoading()
-    },
-    // 获取一个图表具体数据
-    getChartData () {
-      const chartItem = this.chart
-      if (chartItem.type === 'alertList') {
-        this.getAlertListChartData(chartItem, null)
-        return
-      }
-      const len = chartItem.elements.length
-      // 没有数据的设置提示信息暂无数据-针对每一个图
-      if (len === 0) {
-        this.noData = true
-        this.$nextTick(() => {
-          if (chartItem.type === 'table') { // 表格
-            this.setTableData([])
-          } else if (chartItem.type === 'line' || chartItem.type === 'bar' || chartItem.type === 'stackArea' || chartItem.type === 4 || chartItem.type === 'endpointInfo' || chartItem == 'pie') {
-            this.setData(chartItem, [], [])
-          } else if (chartItem.type === 'singleStat') {
-            this.serieSingleStat = ''
-            this.$refs.loadingPreview.endLoading()
-          }
-        })
-      } else {
-        let startTime = bus.timeFormate(this.searchTime[0], 'YYYY-MM-DD HH:mm:ss')
-        let endTime = bus.timeFormate(this.searchTime[1], 'YYYY-MM-DD HH:mm:ss')
-        if (!startTime || !endTime) { // 如果时间为空，则默认取最近1小时
-          const now = new Date(bus.computeTimezone(new Date().getTime()))
-          startTime = bus.timeFormate(now, 'YYYY-MM-DD HH:mm:ss')
-          endTime = bus.timeFormate(now.setHours(now.getHours() - 1), 'YYYY-MM-DD HH:mm:ss')
-          this.searchTime[0] = startTime
-          this.searchTime[1] = endTime
-        }
-        const step = bus.getStep(startTime, endTime)
-        this.$nextTick(() => {
-          const axiosArr = chartItem.elements.map((ele) => {
-            const filterItem = ele
-            const query = encodeURIComponent(filterItem.expression)
-            // if(chartItem.type === 'table'&&chartItem.param&&chartItem.param.last == 1){
-            //   return this.$get('/prom/api/v1/query_range?query=' + query + "&start=" + this.$stringTimeParseToUnix(endTime) + "&end=" + this.$stringTimeParseToUnix(endTime) + '&step=' + step);
-            // }
-            let str = ''
-            if ((chartItem.type === 'line' || chartItem.type === 'bar' || chartItem.type === 'stackArea' || chartItem.type === 'table') && chartItem.param) { // 如果是这三个 默认给null
-              chartItem.param.nullType = chartItem.param.nullType || 'null'
-              str += '&nullType=' + chartItem.param.nullType
-            }
-            return this.$get('/prom/api/v1/query_range?query=' + query + '&start=' + this.$stringTimeParseToUnix(startTime) + '&end=' + this.$stringTimeParseToUnix(endTime) + '&step=' + step + str)
-          })
-          // 一个图表的所有element单独获取数据
-          axios.all(axiosArr).then((res) => {
-            if (res.length > 0) {
-              const series = []
-              let singleStatRlt = ''
-              const legend = []
-              const tableData = []
-              let pieSeries
-              if (chartItem.type === 'pie') {
-                pieSeries = {
-                  type: 'pie',
-                  radius: '100%',
-                  center: ['50%', '50%'],
-                  top: '20%',
-                  bottom: '20%',
-                  // roseType: 'radius',
-                  minAngle: 10,
-                  itemStyle: {
-                    borderRadius: 5,
-                    borderColor: '#fff',
-                    borderWidth: 1
-                  },
-                  label: {
-                    show: false
-                  },
-                  emphasis: {
-                    label: {
-                      show: false
-                    }
-                  },
-                  data: []
-                }
-              }
-              if (chartItem.type === 'bar' && chartItem.param.statistics && chartItem.param.statistics !== 'null') {
-                pieSeries = {
-                  type: 'bar',
-                  // roseType: 'radius',
-                  itemStyle: {
-                    borderRadius: 5,
-                    borderColor: '#fff',
-                    borderWidth: 1
-                  },
-                  label: {
-                    show: false
-                  },
-                  emphasis: {
-                    label: {
-                      show: false
-                    }
-                  },
-                  data: []
-                }
-              }
-              res.forEach((response, innerPos) => {
-                if (response.status === 'success') {
-                  this.isError = false
-                  this.errorContent = ''
-                  if (response.data.result) {
-                    if (chartItem.type === 'singleStat') {
-                      if (response.data.result.length === 1) {
-                        const statistics = chartItem.param.statistics || 'null'
-                        if (response.data.result[0].values) {
-                          singleStatRlt = bus.getSingleStatRlt(statistics, response.data.result[0].values)
-                          this.noData = false
-                        } else {
-                          this.noData = true
-                        }
-                      } else if (response.data.result.length > 1) {
-                        this.noData = true
-                        singleStatRlt = this.$t('dashboard.panel.singleStatErrorTip')
-                      }
-                    } else {
-                      // 循环处理每个elements下获取的数据列
-                      response.data.result.forEach((queryItem, resInnerPos) => {
-                        const seriesItem = {
-                          theData: {
-                            name: '',
-                            symbol: 'emptyCircle', // 去掉点
-                            symbolSize: [2, 2],
-                            smooth: 0.2, // 曲线变平滑
-                            showSymbol: false,
-                            data: [],
-                            type: chartItem.type,
-                            lineStyle: {
-                              width: 1,
-                              opacity: 0.9
-                            }
-                          },
-                          metric_name: ''
-                        }
-                        if (chartItem.type === 'stackArea') {
-                          seriesItem.theData.type = 'line'
-                          seriesItem.theData.stack = chartItem.name
-                          seriesItem.theData.areaStyle = { opacity: 0.3 }
-                        }
-                        if (chartItem.type === 'endpointInfo') {
-                          seriesItem.theData.type = 'line'
-                        }
-                        if ((chartItem.type === 'line' || chartItem.type === 'stackArea' || chartItem.type === 'bar') && chartItem.param && chartItem.param.threshold) {
-                          seriesItem.theData.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)
-                            }]
-                          }
-                        }
-                        // 图表中每条线的名字,后半部分
-                        let host = ''// up,
-                        if (queryItem.metric.__name__) {
-                          host = `${queryItem.metric.__name__}{`// up,
-                        }
-                        const tagsArr = Object.keys(queryItem.metric)// ["__name__","asset","idc","instance","job","module","project"]
-                        // 设置时间-数据格式对
-                        const dpsArr = Object.entries(queryItem.values)// [ ["0",[1577959830.781,"0"]], ["1",[1577959845.781,"0"]] ]
-                        // 判断是否有数据, && tagsArr.length > 0
-                        if (dpsArr.length > 0) {
-                          tagsArr.forEach((tag, i) => {
-                            if (tag !== '__name__') {
-                              host += `${tag}="${queryItem.metric[tag]}",`
-                            }
-                          })
-                          if (host.endsWith(',')) {
-                            host = host.substr(0, host.length - 1)
-                          }
-                          if (queryItem.metric.__name__) {
-                            host += '}'
-                          }
-                          if (!host || host === '') {
-                            host = chartItem.elements[innerPos].expression
-                          }
-                          // 处理legend别名
-                          let alias = dealLegendAlias(host, chartItem.elements[innerPos].legend)
-                          if (!alias || alias === '') {
-                            alias = host
-                          }
-                          legend.push({ name: host + resInnerPos, alias: alias })
-                          // 图表中每条线的名字,去掉最后的逗号与空格:metric名称,  标签1=a,标签2=c
-                          seriesItem.theData.name = host + resInnerPos
-                          seriesItem.metric_name = seriesItem.theData.name
-                          // 将秒改为毫秒
-                          // alert('table=='+JSON.stringify(queryItem))
-                          seriesItem.theData.data = queryItem.values.map((dpsItem, dpsIndex) => {
-                            // const tData = new Date(dpsItem[0] * 1000)
-                            // const timeTmp = bus.timeFormate(tData, 'YYYY-MM-DD HH:mm:ss')
-                            tableData.push({ // 表格数据
-                              // label: host.slice(host.indexOf('{') + 1,host.indexOf('}')),//label
-                              // metric: queryItem.metric.__name__?queryItem.metric.__name__:'',//metric列
-                              element: { element: host, alias: alias },
-                              // time: timeTmp,//采集时间
-                              // value: dpsItem[1],//数值
-                              data: [dpsItem[0] * 1000, dpsItem[1]]
-                            })
-                            return [dpsItem[0] * 1000, dpsItem[1]]
-                          })
-                          if (chartItem.type === 'pie') {
-                            pieSeries.data.push({ value: bus.getSingleStatRlt(chartItem.param.statistics, seriesItem.theData.data), name: host + resInnerPos })
-                          } else if (chartItem.type === 'bar' && chartItem.param.statistics && chartItem.param.statistics !== 'null') {
-                            pieSeries.data.push({ value: bus.getSingleStatRlt(chartItem.param.statistics, seriesItem.theData.data), name: host + resInnerPos })
-                          } else {
-                            series.push(seriesItem.theData)
-                          }
-                        } else if (chartItem.elements && chartItem.elements[innerPos]) {
-                          // 无数据提示
-                          /*
-                            const currentInfo = chartItem.elements[innerPos];
-                            const errorMsg = `图表 ${chartItem.title} 中 ${currentInfo.metric},${currentInfo.tags} 无数据`;
-                            this.$message.warning({
-                              duration: 15,
-                              content: errorMsg,
-                              closable: true,
-                            });
-                            */
-                        }
-                      })
-                    }
-                  }
-                } else {
-                  this.isError = true
-                  if (response.msg) {
-                    this.errorContent = response.msg
-                  } else if (response.error) {
-                    this.errorContent = response.error
-                  } else {
-                    this.errorContent = response
-                  }
-                }
-              })
-              // if(this.$refs.editChart&&this.$refs.editChart[index]) {
-              if (chartItem.type === 'table') { // 表格
-                this.setTableData(tableData)
-              } else if (chartItem.type === 'bar' && chartItem.param.statistics && chartItem.param.statistics !== 'null') {
-                series.push(pieSeries)
-                if (series[0].data.length < 1) {
-                  this.noData = true
-                } else {
-                  this.noData = false
-                }
-                this.setData(chartItem, series, legend)
-              } else if (chartItem.type === 'line' || chartItem.type === 'bar' || chartItem.type === 'stackArea' || chartItem.type === 4 || chartItem.from == 'endpoint') {
-                if (series.length && chartItem.type === 4) { // 曲线汇总
-                }
-                if (series.length < 1) {
-                  this.noData = true
-                } else {
-                  this.noData = false
-                }
-                const _chartItem = JSON.parse(JSON.stringify(chartItem))
-                if (chartItem.from == this.$CONSTANTS.fromRoute.endpoint) {
-                  _chartItem.type = 'line'
-                }
-                this.setData(_chartItem, series, legend)
-              } else if (chartItem.type === 'singleStat') {
-                if (Number(singleStatRlt)) {
-                  const singleStatTmp = parseFloat(Number(singleStatRlt).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 = singleStatRlt
-                }
-                this.$refs.loadingPreview.endLoading()
-              } else if (chartItem.type == 'pie') {
-                series.push(pieSeries)
-                if (series[0].data.length < 1) {
-                  this.noData = true
-                } else {
-                  this.noData = false
-                }
-                this.setData(chartItem, series, legend)
-              }
-              // }
-            } else {
-              const type = chartItem.type
-              // if(this.$refs.editChart[index]) {
-              if (type === 'table') {
-                this.setTableData([])
-              } else if (type === 'line' || type === 'bar' || type === 'stackArea' || type === 4 || chartItem.type == 'pie') {
-                this.setData(chartItem, [])
-              } else if (chartItem.type === 'singleStat') {
-                this.serieSingleStat = ''
-                this.$refs.loadingPreview.endLoading()
-              }
-              // }
-            }
-          }).catch((error) => {
-            if (error) {
-              this.$message.error(error.toString())
-              console.error(error)
-            }
-          })
-        })
-      }
-    },
-    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.echartModalStore
-      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])
-        }
-      }
-      // 点击图表某一个legend，图表只显示当前点击的曲线或柱状图，其它隐藏，再次点击已选中的legend ，显示全部
-      /* let curIsGrey=this.isGreyScreen[index];
-        if(this.echartModalStore){
-          this.screenLegendList.forEach((item,i)=>{
-            let isGrey = this.isGreyScreen[i];
-            if(index != i){
-              if(!curIsGrey && !isGrey){
-                this.echartModalStore.dispatchAction({
-                  type: 'legendUnSelect',
-                  name: item.name
-                });
-              }else if(!curIsGrey && isGrey){
-                this.echartModalStore.dispatchAction({
-                  type: 'legendSelect',
-                  name: item.name
-                });
-              }else{
-                this.echartModalStore.dispatchAction({
-                  type: 'legendUnSelect',
-                  name: item.name
-                });
-              }
-            }else {
-              this.echartModalStore.dispatchAction({
-                type: 'legendSelect',
-                name: item.name
-              });
-            }
-          });
-          this.isGreyScreen.forEach((item,i)=>{
-            if(index != i){
-              if(!curIsGrey && !item){
-                this.$set(this.isGreyScreen, i, true);
-              }else if(!curIsGrey && item){
-                this.$set(this.isGreyScreen, i, false);
-              }else{
-                this.$set(this.isGreyScreen, i, true);
-              }
-            }else{
-              if(item === true){
-                this.$set(this.isGreyScreen, i, false);
-              }
-            }
-          })
-        } */
-    },
-    formatLegend (chartWidth, name) {
-      if (!name) {
-        return ''
-      }
-      // 计算宽度
-      const span = document.createElement('span')
-      const result = {}
-      result.width = span.offsetWidth
-      result.height = span.offsetHeight
-      span.style.visibility = 'hidden'
-      span.style.fontSize = 14
-      span.style.fontFamily = 'Arial'
-      span.style.display = 'inline-block'
-      document.body.appendChild(span)
-      if (typeof span.textContent !== 'undefined') {
-        span.textContent = name
-      } else {
-        span.innerText = name
-      }
-      const txtWidth = parseFloat(window.getComputedStyle(span).width) - result.width
-      document.body.removeChild(span)
-
-      if (txtWidth < chartWidth) {
-        return name
-      } else {
-        const charNum = `${(chartWidth - 100) / (txtWidth / name.length)}`
-        return name.slice(0, charNum) + '...'
-      }
-    },
-    // chartSite用于区分是全屏显示还是局部显示
-    initChart (chartInfo, dataArg, ele, legend) {
-      const self = this
-      self.isStackArea = false
-      let minTime = null
-      let maxTime = null
-      if (dataArg.length > 0 && dataArg[0].data &&
-          dataArg[0].data.length > 0 && dataArg[0].data[0].length > 0) {
-        const len = dataArg[0].data.length - 1
-        minTime = dataArg[0].data[0][0]
-        maxTime = dataArg[0].data[len][0]
-      }
-      this.chartType = '' // 图表类型
-      if (chartInfo.type === 4) { // line,bar
-        this.chartType = 'line'
-      }
-      this.echartModalStore = echarts.init(ele)
-      const chartWidth = ele.clientWidth
-      /* const title = {
-        show: false,
-        text: chartInfo.title || null,
-        textAlign: 'left',
-        useHTML: true,
-        textStyle: {
-          width: '60%',
-          fontStyle: 'normal',
-          fontWeight: 'bold',
-          color: '#333'
-
-        }
-      } */
-      const stackIconBorderColor = (chartInfo.type === 'stackArea' ? '#53a3cb' : '#7e7e7e')
-      const stackIconChooseBorderColor = (chartInfo.type === 'stackArea' ? '#7e7e7e' : '#53a3cb')
-      const option = {
-        title: {
-          show: false
-        },
-        color: this.bgColorList,
-        toolbox: {
-          show: false,
-          top: '0',
-          showTitle: false,
-          feature: {
-            dataZoom: {
-              yAxisIndex: false
-            },
-            magicType: {
-              type: ['stack'],
-              iconStyle: {
-                borderColor: stackIconBorderColor
-              },
-              emphasis: {
-                borderColor: stackIconChooseBorderColor
-              }
-            }
-          }
-        },
-        tooltip: {
-          trigger: 'axis',
-          confine: false,
-          backgroundColor: 'rgba(221,228,237,1)',
-          textStyle: {
-            color: '#000'
-          },
-          axisPointer: {
-            snap: false,
-            animation: false
-          },
-          extraCssText: 'z-index:1000;',
-          /* enterable:true, 导致tooltip不消失，显示多个tooltip */
-          position: function (point, params, dom, rect, size) {
-            dom.style.transform = 'translateZ(0)'
-            // 提示框位置
-            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 (pointX < (viewWidth / 2)) { // 说明鼠标在左边放不下提示框
-              x = pointX + 10
-            } else {
-              x = pointX - boxWidth
-            }
-            if (pointY < (viewHeight / 2)) { // 说明鼠标上面放不下提示框
-              y = pointY + 10
-            } else {
-              y = pointY - boxHeight
-            }
-            return [x, y]
-          },
-          formatter: function (params) {
-            let str = '<div>'
-            let sum = 0
-            let showFlag = false
-            params.forEach((item, i) => {
-              const tip = legend[item.seriesIndex]
-              const color = self.bgColorList[item.seriesIndex]
-              if (i === 0) {
-                const value = bus.computeTimezone(item.data[0])
-                const tData = new Date(value)
-                str += [tData.getFullYear(), tData.getMonth() + 1, tData.getDate()].join('-') + ' ' +
-                    [tData.getHours(), tData.getMinutes(), tData.getSeconds()].join(':')
-                str += '<br/>'
-              }
-              showFlag = showFlag || item.data[1]
-              if (!isNaN(item.data[1] + '')) {
-                const val = formatScientificNotation(item.data[1], 2)
-                sum += isNaN(self.numberWithEConvent(val)) ? 0 : Number(self.numberWithEConvent(val))
-                str += '<div style="white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;display: flex; justify-content: space-between; min-width: 150px; max-width: 600px; line-height: 18px; font-size: 12px;">'
-                str += `<div style="max-width: 500px;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;"><span style='display:inline-block;margin-right:5px;border-radius:10px;width:15px;height:5px;background-color: ${color};}'></span>${tip ? (tip.alias ? tip.alias : tip.name) : item.seriesName}  </div>`
-                str += '<div style="padding-left: 10px;">'
-                str += (function () {
-                  if (chartInfo.from == 'endpoint') {
-                    return val == 1 ? 'up' : 'down'
-                  }
-                  return chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(val, null, 2)
-                }())
-                str += '</div>'
-                str += '</div>'
-              }
-            })
-            if (chartInfo.type === 'stackArea' || self.isStackArea) {
-              sum = parseFloat(Number(sum).toFixed(6))
-              str += '<div style="white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;display: flex; justify-content: space-between; min-width: 150px; max-width: 600px; line-height: 18px; font-size: 12px;">'
-              str += '<div style="line-height: 18px; font-size: 12px;padding-left:20px;">'
-              str += self.$t('dashboard.panel.chartTotal')
-              str += '</div>'
-              str += '<div style="padding-left: 10px;">'
-              str += chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(sum, null, 6)
-              str += '</div>'
-              str += '</div>'
-            }
-            str += '</div>'
-            if (!showFlag) {
-              return ''
-            } else {
-              return str
-            }
-          }
-        },
-        legend: {
-          show: false
-        },
-        grid: {
-          top: 30,
-          left: 0,
-          right: 30,
-          containLabel: true,
-          bottom: 20// 156
-        },
-        xAxis: {
-          type: 'time',
-          // boundaryGap: false,//line-false; bar-true;
-          // data: ['20190101', '20190102', '周三', '周四', '周五', '周六', '周日']
-          axisLabel: {
-            interval: 0,
-            rotate: 0,
-            formatter: function (value) {
-              value = bus.computeTimezone(value)
-              const tData = new Date(value)
-              let hour = tData.getHours()
-              hour = hour > 9 ? hour : '0' + hour // 加0补充为两位数字
-              let minute = tData.getMinutes()
-              minute = minute > 9 ? minute : '0' + minute // 如果分钟小于10,则在前面加0补充为两位数字
-              if (minTime !== null && maxTime !== null) {
-                const diffSec = (maxTime - minTime) / 1000
-                const secOneDay = 24 * 60 * 60// 1天的秒数
-                const secOneMonth = secOneDay * 30// 30天的秒数
-                if (diffSec <= secOneDay) { // 同一天
-                  return [hour, minute].join(':')
-                } else if (diffSec < secOneMonth) { // 大于1天，小于30天
-                  return [tData.getMonth() + 1, tData.getDate()].join('/') + ' ' + [hour, minute].join(':')
-                } else { // 大于等于30天
-                  return [tData.getMonth() + 1, tData.getDate()].join('/')
-                }
-              } else {
-                return [tData.getFullYear(), tData.getMonth() + 1, tData.getDate()].join('/') + '\n' +
-                    [hour, minute].join(':')
-              }
-            }
-          },
-          axisPointer: { // y轴上显示指针对应的值
-            show: true
-          },
-          splitLine: {
-            show: true
-          }
-        },
-        yAxis: {
-          type: 'value',
-          minInterval: 1,
-          splitLine: {
-            show: true
-          },
-          // 去掉y轴--start
-          axisLine: {
-            show: false
-          },
-          axisTick: {
-            show: false
-          },
-          // 去掉y轴--end
-          axisLabel: {
-            formatter: function (value, index) {
-              if (self.chart.from == 'endpoint') {
-                if (value == 1) {
-                  return 'up'
-                } else {
-                  return 'down'
-                }
-              }
-              let chartUnit = chartInfo.unit
-              chartUnit = chartUnit || 2
-              const unit = chartDataFormat.getUnit(chartUnit)
-              return unit.compute(value, index)
-            }
-          }
-          // boundaryGap:[0,0.2]
-        },
-        useUTC: false, // 使用本地时间
-        series: dataArg
-      }
-      if (this.echartModalStore) {
-        this.echartModalStore.clear()
-      }
-      option.title = {}
-      // this.echartModalStore.setOption(option);//显示全屏界面
-      this.showLegend = true
-      if (legend) {
-        this.screenLegendList = []
-        legend.forEach((item, i) => {
-          const _legend = {
-            name: item.name,
-            alias: item.alias,
-            color: item.color,
-            showText: this.formatLegend(chartWidth, item.alias ? item.alias : item.name)
-          }
-          this.screenLegendList.push(_legend)
-          this.isGreyScreen.push(false)
-        })
-      }
-      if (this.hasLegendOptions) {
-        this.computeLegendData(this.screenLegendList, dataArg, 'screen')
-      }
-      this.$nextTick(() => {
-        const divHeight = this.$refs.screenLegendArea.offsetHeight
-        this.echartModalStore.resize()
-        this.echartModalStore.clear()
-        if (dataArg.length < 1) {
-          this.echartModalStore && this.echartModalStore.setOption(chartConfig.getOption('noData'))
-        } else {
-          this.echartModalStore && this.echartModalStore.setOption(option)// 创建图表
-        }
-
-        this.$refs.loadingPreview.endLoading()
-      })
-      this.echartModalStore.off('magictypechanged')
-      this.echartModalStore.on('magictypechanged', function (params) {
-        self.isStackArea = !self.isStackArea
-        if (self.isStackArea) {
-          this.setOption({
-            toolbox: {
-              feature: {
-                magicType: {
-                  iconStyle: {
-                    borderColor: '#7e7e7e'
-                  }
-                }
-              }
-            },
-            tooltip: {
-              axisPointer: {
-                snap: false,
-                animation: false
-              },
-              formatter: function (params) {
-                let str = '<div>'; let sum = 0
-                params.forEach((item, i) => {
-                  const tip = legend[item.seriesIndex]
-                  const color = self.bgColorList[item.seriesIndex]
-                  if (i === 0) {
-                    const value = bus.computeTimezone(item.data[0])
-                    const tData = new Date(value)
-                    str += [tData.getFullYear(), tData.getMonth() + 1, tData.getDate()].join('-') + ' ' +
-                        [tData.getHours(), tData.getMinutes(), tData.getSeconds()].join(':')
-                    str += '<br/>'
-                  }
-                  const val = formatScientificNotation(item.data[1], 2)
-                  sum += isNaN(self.numberWithEConvent(val)) ? 0 : Number(self.numberWithEConvent(val))
-                  str += '<div style="white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;display: flex; justify-content: space-between; min-width: 150px; max-width: 600px; line-height: 18px; font-size: 12px;">'
-                  str += `<div style="max-width: 500px;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;"><span style='display:inline-block;margin-right:5px;border-radius:10px;width:15px;height:5px;background-color: ${color};}'></span>${tip ? (tip.alias ? tip.alias : tip.name) : item.seriesName}  </div>`
-                  str += '<div style="padding-left: 10px;">'
-                  str += chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(val, null, 2)
-                  str += '</div>'
-                  str += '</div>'
-                })
-                if (chartInfo.type === 'stackArea' || self.isStackArea) {
-                  sum = parseFloat(Number(sum).toFixed(2))
-                  str += '<div style="white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;display: flex; justify-content: space-between; min-width: 150px; max-width: 600px; line-height: 18px; font-size: 12px;">'
-                  str += '<div style="line-height: 18px; font-size: 12px;padding-left:20px;">'
-                  str += self.$t('dashboard.panel.chartTotal')
-                  str += '</div>'
-                  str += '<div style="padding-left: 10px;">'
-                  str += chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(sum, null, 2)
-                  str += '</div>'
-                  str += '</div>'
-                }
-
-                str += '</div>'
-                return str
-              }
-            }
-          })
-        }
-      })
-      setTimeout(() => {
-        this.echartModalStore.resize()
-      }, 100)
-    },
-    initStaticsBar: function (chartInfo, dataArg, legend) {
-      const self = this
-      const option = {
-        title: {
-          show: false
-        },
-        legend: {
-          show: false
-        },
-        grid: {
-          top: 30,
-          left: 10,
-          right: 30,
-          containLabel: true,
-          bottom: 8// 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
-      }
-      option.xAxis = {
-        type: 'category',
-        axisLine: {
-          show: false
-        },
-        axisTick: {
-          show: false
-        },
-        showAllSymbol: false,
-        axisPointer: { // y轴上显示指针对应的值
-          show: false
-        },
-        axisLabel: {
-          margin: 8,
-          formatter: function (params) {
-            const dataLength = dataArg.length || 1
-            const chartWidth = (document.getElementById('chartEchartPreview').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 nweSeriesItem = []
-      dataArg[0].data.forEach((item, index) => {
-        const obj = { ...dataArg[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 (chartInfo.param.threshold) {
-          obj.markLine = {
-            silent: true,
-            symbol: ['circle', 'circle'],
-            label: {
-              distance: this.computeDistance(chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(chartInfo.param.threshold)),
-              formatter: function (params) {
-                return chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(params.value)
-              }
-            },
-            lineStyle: {
-              color: '#d64f40',
-              width: 2,
-              type: 'dotted'
-            },
-            data: [{
-              yAxis: Number(chartInfo.param.threshold)
-            }]
-          }
-        }
-        nweSeriesItem.push(obj)
-      })
-      dataArg = nweSeriesItem
-      option.yAxis = {
-        type: 'value',
-        minInterval: 1,
-        splitLine: {
-          show: true
-        },
-        // 去掉y轴--start
-        axisLine: {
-          show: false
-        },
-        axisTick: {
-          show: false
-        },
-        // 去掉y轴--end
-        axisLabel: {
-          formatter: function (value, index) {
-            if (self.chart.from && self.chart.from == 'endpoint') {
-              if (value == 1) {
-                return 'up'
-              } else {
-                return 'down'
-              }
-            }
-            let chartUnit = chartInfo.unit
-            chartUnit = chartUnit || 2
-            const unit = chartDataFormat.getUnit(chartUnit)
-            return unit.compute(value, index)
-          }
-        }
-        // boundaryGap:[0,0.2]
-      }
-      option.series = dataArg
-      option.color = this.bgColorList
-      option.tooltip.formatter = this.barFormatterFunc
-      const dom = document.getElementById('screenShowArea')
-      this.echartModalStore = echarts.init(dom)
-      this.showLegend = true
-      if (legend) {
-        this.screenLegendList = []
-        legend.forEach((item, i) => {
-          const _legend = {
-            name: item.name,
-            alias: item.alias,
-            color: item.color,
-            showText: this.formatLegend(dom.clientWidth, item.alias ? item.alias : item.name)
-          }
-          this.screenLegendList.push(_legend)
-          this.isGreyScreen.push(false)
-        })
-      }
-      this.$nextTick(() => {
-        const divHeight = this.$refs.screenLegendArea.offsetHeight
-        this.echartModalStore.resize()
-        this.echartModalStore.clear()
-        if (dataArg[0].data.length < 1) {
-          this.echartModalStore && this.echartModalStore.setOption(chartConfig.getOption('noData'))
-        } else {
-          this.echartModalStore && this.echartModalStore.setOption(option)// 创建图表
-        }
-
-        this.$refs.loadingPreview.endLoading()
-      })
-    },
-    computeDistance: function (str) {
-      const span = document.querySelector('.temp-dom')
-      span.textContent = str
-      const txtWidth = parseFloat(window.getComputedStyle(span).width)
-      return Number('-' + (txtWidth + 5))
-    },
-    initPie: function (chartInfo, dataArg, legend) {
-      const 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
-      }
-      option.series = dataArg
-      option.color = this.bgColorList
-      option.tooltip.formatter = this.pieFormatterFunc
-      const dom = document.getElementById('screenShowArea')
-      this.echartModalStore = echarts.init(dom)
-      this.showLegend = true
-      if (legend) {
-        this.screenLegendList = []
-        legend.forEach((item, i) => {
-          const _legend = {
-            name: item.name,
-            alias: item.alias,
-            color: item.color,
-            showText: this.formatLegend(dom.clientWidth, item.alias ? item.alias : item.name)
-          }
-          this.screenLegendList.push(_legend)
-          this.isGreyScreen.push(false)
-        })
-      }
-      this.$nextTick(() => {
-        const divHeight = this.$refs.screenLegendArea.offsetHeight
-        this.echartModalStore.resize()
-        this.echartModalStore.clear()
-        if (dataArg[0].data.length < 1) {
-          this.echartModalStore && this.echartModalStore.setOption(chartConfig.getOption('noData'))
-        } else {
-          this.echartModalStore && this.echartModalStore.setOption(option)// 创建图表
-        }
-
-        this.$refs.loadingPreview.endLoading()
-      })
-    },
-    mouseEnterFullChart () {
-      if (this.echartModalStore) {
-        this.echartModalStore.setOption({
-          toolbox: {
-            show: true
-          }
-        })
-      }
-    },
-    mouseLeaveFullChart () {
-      if (this.echartModalStore) {
-        this.echartModalStore.setOption({
-          toolbox: {
-            show: false
-          }
-        })
-      }
-    },
-    setColor (colorNum) {
-      this.bgColorList = []
-      for (let i = 0; i < colorNum; i++) {
-        this.bgColorList.push(randomcolor())
-      }
-    },
-    // 设置数据
-    setData (chartItem, seriesItem, legend) {
-      this.setColor(legend.length)
-      legend.forEach((t, i) => { t.color = this.bgColorList[i] })
-      this.legend = legend
-      // this.data = chartItem;
-      // this.seriesItem = seriesItem;
-      this.seriesItemScreen = seriesItem
-      this.hasLegendOptions = this.findLegendOptions()
-      if (this.hasLegendOptions) {
-        const sortedOptionKeys = ['min', 'max', 'avg', 'last', 'total']
-        this.screenLegendOptions = sortedOptionKeys.map(item => { return { option: item, sort: '', value: chartItem.param.legendValue[item] } })
-      }
-      if (chartItem.type == 'pie') {
-        this.initPie(chartItem, seriesItem, legend)
-        return
-      }
-      if (chartItem.type === 'bar' && chartItem.param.statistics && chartItem.param.statistics !== 'null') {
-        this.initStaticsBar(chartItem, seriesItem, legend)
-        return
-      }
-      this.initChart(chartItem, seriesItem, this.$refs.screenShowArea, legend)
-    },
-    // 设置数据
-    setTableData (seriesItem) {
-      this.unit = chartDataFormat.getUnit(this.chart.unit)
-      const statistics = this.chart.param.statistics
-      seriesItem = this.getStatisticsResult(statistics, seriesItem)
-      seriesItem = seriesItem.map(item => {
-        if (this.chart.param.valueMapping && this.chart.param.valueMapping.type) {
-          const type = this.chart.param.valueMapping.type
-          const mappings = this.chart.param.valueMapping.mapping ? this.chart.param.valueMapping.mapping : []
-          const value = Number(item.value)
-
-          let mapping
-          if (type == 'value') {
-            mapping = mappings.find(t => { return Number(t.value) == value })
-          } else {
-            mapping = mappings.find(t => { return Number(t.from) <= value && Number(t.to) >= value })
-          }
-          this.mapping = mapping
-          item.mapping = mapping
-          item.value = mapping ? mapping.text.replace('{{value}}', item.value).replace('{{name}}', item.element.alias) : this.unit.compute(value, null, 2)
-        }
-        return item
-      })
-      this.storedScreanTableData = seriesItem
-      this.storedScreanTableData = Object.assign([], this.storedScreanTableData.reverse())
-      this.screenPageObj.total = this.storedScreanTableData.length
-      this.seriesItemScreen = this.filterShowData(this.storedScreanTableData, this.screenPageObj)
-
-      this.tableShow = true
-      this.$refs.loadingPreview.endLoading()
-    },
-    getStatisticsResult: function (statistics, seriesItem) {
-      if (!seriesItem || !seriesItem.length > 0) return []
-      if (!statistics) return seriesItem
-      const copy = JSON.parse(JSON.stringify(seriesItem))
-      copy.sort((x, y) => { return parseFloat(y.data[0]) - parseFloat(x.data[0]) })
-      const classifies = []
-      let maxGroup = 0
-      const map = new Map()// 用于记录在第几组
-      copy.forEach(item => {
-        const element = item.element.element
-        const group = map.get(element)
-        if (typeof group != 'undefined') {
-          classifies[group].push(item)
-        } else {
-          classifies.push([item])
-          map.set(element, maxGroup++)
-        }
-      })
-
-      let result
-      switch (statistics) {
-        case 'null': {
-          result = copy.map(item => {
-            return {
-              element: item.element,
-              time: bus.timeFormate(new Date(item.data[0]), 'YYYY-MM-DD HH:mm:ss'),
-              value: item.data[1]
-            }
-          })
-          break
-        }
-        case 'min': {
-          result = classifies.map(group => {
-            const groupMin = group.sort((x, y) => {
-              return parseFloat(x.data[1]) - parseFloat(y.data[1])
-            })[0]
-
-            return {
-              element: groupMin.element,
-              time: bus.timeFormate(new Date(groupMin.data[0]), 'YYYY-MM-DD HH:mm:ss'),
-              value: groupMin.data[1]
-            }
-          })
-          break
-        }
-        case 'max': {
-          result = classifies.map(group => {
-            const groupMax = group.sort((x, y) => {
-              return parseFloat(y.data[1]) - parseFloat(x.data[1])
-            })[0]
-
-            return {
-              element: groupMax.element,
-              time: bus.timeFormate(new Date(groupMax.data[0]), 'YYYY-MM-DD HH:mm:ss'),
-              value: groupMax.data[1]
-            }
-          })
-          break
-        }
-        case 'avg': {
-          result = classifies.map(group => {
-            const groupData = group.map(t => parseFloat(t.data[1]))
-            const sum = eval(groupData.join('+'))
-            const avg = sum / groupData.length
-            const last = group.sort((x, y) => {
-              return parseFloat(y.data[0]) - parseFloat(x.data[0])
-            })[0]
-            return {
-              element: last.element,
-              time: bus.timeFormate(new Date(last.data[0]), 'YYYY-MM-DD HH:mm:ss'),
-              value: avg
-            }
-          })
-          break
-        }
-        case 'total': {
-          result = classifies.map(group => {
-            const groupData = group.map(t => parseFloat(t.data[1]))
-            const total = eval(groupData.join('+'))
-            const last = group.sort((x, y) => {
-              return parseFloat(y.data[0]) - parseFloat(x.data[0])
-            })[0]
-            return {
-              element: last.element,
-              time: bus.timeFormate(new Date(last.data[0]), 'YYYY-MM-DD HH:mm:ss'),
-              value: total
-            }
-          })
-          break
-        }
-        case 'first': {
-          result = classifies.map(group => {
-            const first = group.sort((x, y) => {
-              return parseFloat(y.data[0]) - parseFloat(x.data[0])
-            })[copy.length - 1]
-
-            return {
-              element: first.element,
-              time: bus.timeFormate(new Date(first.data[0]), 'YYYY-MM-DD HH:mm:ss'),
-              value: first.data[1]
-            }
-          })
-          break
-        }
-        case 'last': {
-          result = classifies.map(group => {
-            const last = group.sort((x, y) => {
-              return parseFloat(y.data[0]) - parseFloat(x.data[0])
-            })[0]
-            return {
-              element: last.element,
-              time: bus.timeFormate(new Date(last.data[0]), 'YYYY-MM-DD HH:mm:ss'),
-              value: last.data[1]
-            }
-          })
-          break
-        }
-        case 'range': {
-          result = classifies.map(group => {
-            const sort = JSON.parse(JSON.stringify(group)).sort((x, y) => {
-              return parseFloat(y.data[1]) - parseFloat(x.data[1])
-            })
-            const last = group.sort((x, y) => {
-              return parseFloat(y.data[0]) - parseFloat(x.data[0])
-            })[0]
-            const max = sort[0]
-            const min = sort[sort.length - 1]
-            const range = max.data[1] - min.data[1]
-            return {
-              element: last.element,
-              time: bus.timeFormate(new Date(last.data[0]), 'YYYY-MM-DD HH:mm:ss'),
-              value: range
-            }
-          })
-          break
-        }
-        case 'different': {
-          result = classifies.map(group => {
-            const sort = group.sort((x, y) => {
-              return parseFloat(y.data[0]) - parseFloat(x.data[0])
-            })
-            const last = sort[0]
-            const first = sort[copy.length - 1]
-            return {
-              element: last.element,
-              time: bus.timeFormate(new Date(last.data[0]), 'YYYY-MM-DD HH:mm:ss'),
-              value: last.data[1] - first.data[1]
-            }
-          })
-
-          break
-        }
-      }
-      return result
-    },
-    clearChart () {
-      if (this.echartModalStore) {
-        this.echartModalStore.clear()
-      }
-      this.chart = {}
-      // this.seriesItem = [];
-      this.seriesItemScreen = []
-      this.searchTime[0] = new Date().setHours(new Date().getHours() - 1)
-      this.searchTime[1] = new Date()
-
-      const iframe = document.querySelector('#chartUrlFrame')
-      if (iframe) {
-        iframe.src = ''
-      }
-      this.isStackArea = false
-      this.serieSingleStat = ''
-    },
-    // 重新请求数据 刷新操作
-    /*
-      refreshChart() {
-        //this.dropdownMenuShow=false;
-        this.clearChart();
-        this.$refs['localLoading'+this.chartIndex].startLoading();
-        //this.firstShow = false;
-        this.$emit('on-refresh-data', this.data.id);
-      },
-      */
-    dateChange (time) {
-      const chartType = this.chart.type
-      if (chartType === 'table') {
-        this.seriesItemScreen = []
-        for (let i = 0; i < 8; i++) {
-          this.seriesItemScreen.push({ // 表格数据
-            // label: '',//label
-            // metric: '',//metric列
-            element: '',
-            time: '', // 采集时间
-            value: ''// 数值
-          })
-        }
-        this.tableShow = false
-        this.$refs.loadingPreview.startLoading()
-        this.getChartData()
-      } else if (chartType === 'line' || chartType === 'bar' || chartType === 'stackArea' || chartType === 4 || this.chart.from == 'endpoint') {
-        this.echartModalStore.clear()
-        if (this.chart.from != this.$CONSTANTS.fromRoute.endpoint) {
-          this.showLegend = false
-        }
-        this.$refs.loadingPreview.startLoading()
-        this.getQueryChart()
-      } else if (chartType === 'singleStat') {
-        this.serieSingleStat = ''
-        this.$refs.loadingPreview.startLoading()
-        this.getChartData()
-      }
-    },
-    // 查询数据,修改日期查询全屏数据
-    getQueryChart (type) {
-      let axiosArr = []
-      const chartItem = this.chart
-      this.$nextTick(() => {
-        let startTime = bus.timeFormate(this.searchTime[0], 'YYYY-MM-DD HH:mm:ss')
-        let endTime = bus.timeFormate(this.searchTime[1], 'YYYY-MM-DD HH:mm:ss')
-        if (!startTime || !endTime) { // 如果时间为空，则默认取最近1小时
-          const now = new Date()
-          startTime = bus.timeFormate(now, 'YYYY-MM-DD HH:mm:ss')
-          endTime = bus.timeFormate(now.setHours(now.getHours() - 1), 'YYYY-MM-DD HH:mm:ss')
-          this.searchTime[0] = startTime
-          this.searchTime[1] = endTime
-        }
-        const step = bus.getStep(startTime, endTime)
-        axiosArr = this.chart.elements.map((ele) => {
-          const filterItem = ele
-          const query = encodeURIComponent(filterItem.expression)
-          let str = ''
-          if ((chartItem.type === 'line' || chartItem.type === 'bar' || chartItem.type === 'stackArea' || chartItem.type === 'table') && chartItem.param) { // 如果是这三个 默认给null
-            chartItem.param.nullType = chartItem.param.nullType || 'null'
-            str += '&nullType=' + chartItem.param.nullType
-          }
-          if (chartItem.type === 'table' && chartItem.param && chartItem.param.last == 1) {
-            return this.$get('/prom/api/v1/query_range?query=' + query + '&start=' + this.$stringTimeParseToUnix(endTime) + '&end=' + this.$stringTimeParseToUnix(endTime) + '&step=' + step + str)
-          }
-          return this.$get('/prom/api/v1/query_range?query=' + query + '&start=' + this.$stringTimeParseToUnix(startTime) + '&end=' + this.$stringTimeParseToUnix(endTime) + '&step=' + step + str)
-        })
-        // 一个图表
-        axios.all(axiosArr).then(res => {
-          if (res.length > 0) {
-            const series = []
-            const legend = []
-            /* const sumData = {
-              name: 'sum',
-              data: [],
-              visible: true,
-              threshold: null
-            } */
-            if (!this.chart.type || this.chart.from == 'endpoint') {
-              this.chart.type = 'line'
-            }
-            res.forEach((response, pos) => {
-              if (response.status === 'success') {
-                this.isError = false
-                this.errorContent = ''
-                if (response.data.result) {
-                  // 循环处理每个elements下获取的数据列
-                  response.data.result.forEach((queryItem, innerPos) => {
-                    const seriesItem = {
-                      theData: {
-                        name: '',
-                        symbol: 'emptyCircle', // 去掉点
-                        symbolSize: [2, 2],
-                        smooth: 0.2, // 曲线变平滑
-                        showSymbol: false,
-                        data: [],
-                        type: this.chart.type,
-                        lineStyle: {
-                          width: 1,
-                          opacity: 0.9
-                        }
-                        // visible: true,
-                        // threshold: null,
-                      },
-                      metric_name: ''
-                    }
-                    if (this.chart.type === 'stackArea') {
-                      seriesItem.theData.type = 'line'
-                      seriesItem.theData.stack = this.chart.name
-                      seriesItem.theData.areaStyle = { opacity: 0.3 }
-                    }
-                    // 图表中每条线的名字,后半部分
-                    // let host = `${queryItem.metric.__name__}{`;//up,
-                    let host = ''// up,
-                    if (queryItem.metric.__name__) {
-                      host = `${queryItem.metric.__name__}{`// up,
-                    }
-                    const tagsArr = Object.keys(queryItem.metric)// ["__name__","asset","idc","instance","job","module","project"]
-                    // 设置时间-数据格式对
-                    const dpsArr = Object.entries(queryItem.values)// [ ["0",[1577959830.781,"0"]], ["1",[1577959845.781,"0"]] ]
-                    // 判断是否有数据,&& tagsArr.length > 0
-                    if (dpsArr.length > 0) {
-                      tagsArr.forEach((tag, i) => {
-                        if (tag !== '__name__') {
-                          host += `${tag}="${queryItem.metric[tag]}",`
-                        }
-                      })
-                      if (host.endsWith(',')) { host = host.substr(0, host.length - 1) }
-                      if (queryItem.metric.__name__) {
-                        host += '}'
-                      }
-                      if (!host || host === '') {
-                        host = this.chart.elements[pos].expression
-                      }
-                      let alias = dealLegendAlias(host, this.chart.elements[pos].legend)
-                      if (!alias || alias === '') {
-                        alias = host
-                      }
-                      legend.push({ name: host + innerPos, alias: alias })
-                      // 图表中每条线的名字,去掉最后的逗号与空格:metric名称,  标签1=a,标签2=c
-                      seriesItem.theData.name = host + innerPos
-                      seriesItem.metric_name = seriesItem.theData.name
-                      // 将秒改为毫秒
-                      // alert('table=='+JSON.stringify(queryItem))
-                      seriesItem.theData.data = queryItem.values.map((dpsItem, dpsIndex) => {
-                        return [dpsItem[0] * 1000, dpsItem[1]]
-                      })
-                      series.push(seriesItem.theData)
-                    } else if (this.chart.elements && this.chart.elements[innerPos]) {
-                      // 无数据提示
-                    }
-                  })
-                }
-              } else {
-                this.isError = true
-                if (response.msg) {
-                  this.errorContent = response.msg
-                } else if (response.error) {
-                  this.errorContent = response.error
-                } else {
-                  this.errorContent = response
-                }
-              }
-            })
-            this.setColor(legend.length)
-            legend.forEach((t, i) => { t.color = this.bgColorList[i] })
-            this.initChart(this.chart, series, this.$refs.screenShowArea, legend)
-          }
-        }).catch(error => {
-          if (error) {
-            this.$message.error(error.toString())
-          }
-        })
-      })
-    },
-    screenPageNo (val) {
-      this.screenPageObj.pageNo = val
-      this.seriesItemScreen = this.filterShowData(this.storedScreanTableData, this.screenPageObj)
-    },
-    screenPageSize (val) {
-      this.screenPageObj.pageSize = val
-      this.seriesItemScreen = this.filterShowData(this.storedScreanTableData, this.screenPageObj)
-    },
-    handleClose () {
-      this.screenModal = false
-      this.clearChart()
-    },
-    findLegendOptions: function () {
-      if ((!this.chart.param) || (!this.chart.param.legendValue) || Object.keys(this.chart.param.legendValue) < 1) return false
-      const legendOptions = this.chart.param.legendValue
-      const onVal = Object.keys(legendOptions).find(item => { return legendOptions[item] == 'on' })
-
-      return onVal
-    },
-    computeLegendData: function (legend, dataArr) {
-      const options = this.screenLegendOptions
-      const keys = options.filter(item => { return item.value == 'on' }).map(item => { return item.option })
-      const $self = this
-      keys.forEach(item => {
-        switch (item) {
-          case 'min':
-            $self.legendMinValue(legend, dataArr)
-            break
-          case 'max':
-            $self.legendMaxValue(legend, dataArr)
-            break
-          case 'avg':
-            $self.legendAvgValue(legend, dataArr)
-            break
-          case 'last':
-            $self.legendLastValue(legend, dataArr)
-            break
-          case 'total':
-            $self.legendTotalValue(legend, dataArr)
-            break
-        }
-      })
-    },
-    legendMinValue: function (legend, dataArr) {
-      return new Promise(resolve => {
-        legend.forEach(item => {
-          const data = dataArr.find(t => t.name == item.name)
-          if (data && data.data) {
-            const copy = JSON.parse(JSON.stringify(data.data))
-            const min = copy.sort((x, y) => { return parseFloat(x[1]) - parseFloat(y[1]) })[0][1]
-            item.min = parseFloat(min)
-          }
-        })
-
-        resolve()
-      })
-    },
-    legendMaxValue: function (legend, dataArr) {
-      return new Promise(resolve => {
-        legend.forEach(item => {
-          const data = dataArr.find(t => t.name == item.name)
-          if (data && data.data) {
-            const copy = JSON.parse(JSON.stringify(data.data))
-            const max = copy.sort((x, y) => { return parseFloat(y[1]) - parseFloat(x[1]) })[0][1]
-            item.max = parseFloat(max)
-          }
-        })
-        resolve()
-      })
-    },
-    legendAvgValue: function (legend, dataArr) {
-      return new Promise(resolve => {
-        legend.forEach(item => {
-          const data = dataArr.find(t => t.name == item.name)
-          if (data && data.data) {
-            let copy = JSON.parse(JSON.stringify(data.data))
-            copy = copy.map(t => parseFloat(t[1]))
-            const sum = eval(copy.join('+'))
-            const avg = sum / copy.length
-
-            item.avg = avg
-          }
-        })
-        resolve()
-      })
-    },
-    legendLastValue: function (legend, dataArr) {
-      return new Promise(resolve => {
-        legend.forEach(item => {
-          const data = dataArr.find(t => t.name == item.name)
-          if (data && data.data) {
-            const copy = JSON.parse(JSON.stringify(data.data))
-            const last = copy.sort((x, y) => { return parseFloat(y[0]) - parseFloat(x[0]) })[0][1]
-            item.last = parseFloat(last)
-          }
-        })
-        resolve()
-      })
-    },
-    legendTotalValue: function (legend, dataArr) {
-      return new Promise(resolve => {
-        legend.forEach(item => {
-          const data = dataArr.find(t => t.name == item.name)
-          if (data && data.data) {
-            let copy = JSON.parse(JSON.stringify(data.data))
-            copy = copy.map(t => parseFloat(t[1]))
-            const sum = eval(copy.join('+'))
-
-            item.total = sum
-          }
-        })
-        resolve()
-      })
-    },
-    formatLegendData: function (data) {
-      return chartDataFormat.getUnit(this.chart.unit).compute(data, null, 2)
-    },
-    legendValueSort: function (option, legend, options) {
-      options.forEach(item => {
-        if (item.option != option.option) {
-          item.sort = ''
-        }
-      })
-      if (!option.sort || option.sort == 'asc') {
-        legend.sort((x, y) => x[option.option] - y[option.option])
-        option.sort = 'desc'
-      } else {
-        legend.sort((x, y) => y[option.option] - x[option.option])
-        option.sort = 'asc'
-      }
-    },
-    pieFormatterFunc: function (params, ticket, callback) {
-      const chartInfo = this.chart
-      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>
-               `
-    },
-    barFormatterFunc: function (params, ticket, callback) {
-      const chartInfo = this.chart
-      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, 2)}</div>
-                        </div>
-                    </div>
-                </div>
-               `
-    }
-  },
-  beforeDestroy () {
-    this.clearChart()
-    if (this.echartModalStore) {
-      this.echartModalStore.off('magictypechanged')
-    }
-  }
-}
-
-</script>
diff --git a/nezha-fronted/src/components/charts/diagram-chart.vue b/nezha-fronted/src/components/charts/diagram-chart.vue
deleted file mode 100644
index ba60a4f44..000000000
--- a/nezha-fronted/src/components/charts/diagram-chart.vue
+++ /dev/null
@@ -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>
diff --git a/nezha-fronted/src/components/charts/logs.vue b/nezha-fronted/src/components/charts/logs.vue
deleted file mode 100644
index bb598dd13..000000000
--- a/nezha-fronted/src/components/charts/logs.vue
+++ /dev/null
@@ -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>
diff --git a/nezha-fronted/src/components/charts/logsTempData.js b/nezha-fronted/src/components/charts/logsTempData.js
deleted file mode 100644
index 33d327e5d..000000000
--- a/nezha-fronted/src/components/charts/logsTempData.js
+++ /dev/null
@@ -1,4 +0,0 @@
-const logsTempData = [
-  { data: { result: [{ metric: { a: 'a', asset: '40.42', b: 'b', datacenter: 'Temp', endpoint: 'agentLog-40.42', filename: '/opt/nezha/nz-web/logs/nz-web.log', module: 'agentLog', project: 'Nezha' }, values: [[1630910642, '811'], [1630910656, '811'], [1630910670, '818'], [1630910684, '818'], [1630910698, '839'], [1630910712, '852'], [1630910726, '843'], [1630910740, '831'], [1630910754, '819'], [1630910768, '820'], [1630910782, '808'], [1630910796, '542'], [1630910810, '518'], [1630910824, '517'], [1630910838, '517'], [1630910852, '516'], [1630910866, '516'], [1630910880, '515'], [1630910894, '515'], [1630910908, '515'], [1630910922, '505'], [1630910936, '502'], [1630910950, '503'], [1630910964, '497'], [1630910978, '504'], [1630910992, '502'], [1630911006, '492'], [1630911020, '497'], [1630911034, '499'], [1630911048, '502'], [1630911062, '508'], [1630911076, '508'], [1630911090, '506'], [1630911104, '512'], [1630911118, '516'], [1630911132, '518'], [1630911146, '517'], [1630911160, '519'], [1630911174, '519'], [1630911188, '519'], [1630911202, '519'], [1630911216, '518'], [1630911230, '518'], [1630911244, '518'], [1630911258, '518'], [1630911272, '518'], [1630911286, '509'], [1630911300, '502'], [1630911314, '489'], [1630911328, '487'], [1630911342, '483'], [1630911356, '483'], [1630911370, '481'], [1630911384, '493'], [1630911398, '489'], [1630911412, '492'], [1630911426, '500'], [1630911440, '506'], [1630911454, '504'], [1630911468, '505'], [1630911482, '504'], [1630911496, '505'], [1630911510, '506'], [1630911524, '506'], [1630911538, '506'], [1630911552, '512'], [1630911566, '512'], [1630911580, '521'], [1630911594, '518'], [1630911608, '523'], [1630911622, '524'], [1630911636, '524'], [1630911650, '525'], [1630911664, '525'], [1630911678, '516'], [1630911692, '508'], [1630911706, '508'], [1630911720, '492'], [1630911734, '485'], [1630911748, '485'], [1630911762, '486'], [1630911776, '486'], [1630911790, '486'], [1630911804, '486'], [1630911818, '484'], [1630911832, '488'], [1630911846, '482'], [1630911860, '483'], [1630911874, '474'], [1630911888, '474'], [1630911902, '467'], [1630911916, '467'], [1630911930, '466'], [1630911944, '472'], [1630911958, '478'], [1630911972, '478'], [1630911986, '478'], [1630912000, '489'], [1630912014, '490'], [1630912028, '489'], [1630912042, '490'], [1630912056, '489'], [1630912070, '505'], [1630912084, '512'], [1630912098, '512'], [1630912112, '513'], [1630912126, '510'], [1630912140, '510'], [1630912154, '509'], [1630912168, '509'], [1630912182, '507'], [1630912196, '508'], [1630912210, '508'], [1630912224, '508'], [1630912238, '516'], [1630912252, '504'], [1630912266, '504'], [1630912280, '504'], [1630912294, '492'], [1630912308, '498'], [1630912322, '499'], [1630912336, '504'], [1630912350, '505'], [1630912364, '498'], [1630912378, '483'], [1630912392, '481'], [1630912406, '482'], [1630912420, '481'], [1630912434, '481'], [1630912448, '482'], [1630912462, '482'], [1630912476, '483'], [1630912490, '483'], [1630912504, '483'], [1630912518, '482'], [1630912532, '481'], [1630912546, '477'], [1630912560, '480'], [1630912574, '493'], [1630912588, '514'], [1630912602, '516'], [1630912616, '510'], [1630912630, '504'], [1630912644, '504'], [1630912658, '503'], [1630912672, '503'], [1630912686, '516'], [1630912700, '515'], [1630912714, '517'], [1630912728, '517'], [1630912742, '517'], [1630912756, '517'], [1630912770, '522'], [1630912784, '522'], [1630912798, '522'], [1630912812, '529'], [1630912826, '542'], [1630912840, '543'], [1630912854, '537'], [1630912868, '539'], [1630912882, '516'], [1630912896, '514'], [1630912910, '514'], [1630912924, '514'], [1630912938, '514'], [1630912952, '514'], [1630912966, '514'], [1630912980, '505'], [1630912994, '512'], [1630913008, '511'], [1630913022, '511'], [1630913036, '509'], [1630913050, '510'], [1630913064, '503'], [1630913078, '511'], [1630913092, '511'], [1630913106, '724'], [1630913120, '722'], [1630913134, '716'], [1630913148, '717'], [1630913162, '720'], [1630913176, '715'], [1630913190, '726'], [1630913204, '726'], [1630913218, '726'], [1630913232, '726'], [1630913246, '834'], [1630913260, '988'], [1630913274, '995'], [1630913288, '993'], [1630913302, '1147'], [1630913316, '1155'], [1630913330, '1164'], [1630913344, '1163'], [1630913358, '1166'], [1630913372, '1177'], [1630913386, '1179'], [1630913400, '1179'], [1630913414, '953'], [1630913428, '953'], [1630913442, '954'], [1630913456, '943'], [1630913470, '943'], [1630913484, '943'], [1630913498, '932'], [1630913512, '932'], [1630913526, '931'], [1630913540, '1046'], [1630913554, '897'], [1630913568, '880'], [1630913582, '872'], [1630913596, '870'], [1630913610, '920'], [1630913624, '911'], [1630913638, '1065'], [1630913652, '1068'], [1630913666, '1057'], [1630913680, '1048'], [1630913694, '1048'], [1630913708, '1047'], [1630913722, '1048'], [1630913736, '1047'], [1630913750, '1047'], [1630913764, '1047'], [1630913778, '1047'], [1630913792, '1050'], [1630913806, '1056'], [1630913820, '1056'], [1630913834, '853'], [1630913848, '850'], [1630913862, '848'], [1630913876, '857'], [1630913890, '1253'], [1630913904, '1209'], [1630913918, '1367'], [1630913932, '1206'], [1630913946, '1202'], [1630913960, '1209'], [1630913974, '1213'], [1630913988, '1217'], [1630914002, '1230'], [1630914016, '1237'], [1630914030, '1239'], [1630914044, '1238'], [1630914058, '1239'], [1630914072, '1238'], [1630914086, '1252'], [1630914100, '1256'], [1630914114, '1266'], [1630914128, '1266'], [1630914142, '1261'], [1630914156, '1262'], [1630914170, '1256'], [1630914184, '1253'], [1630914198, '696'], [1630914212, '689'], [1630914226, '534'], [1630914240, '535']] }], resultType: 'matrix', stats: { ingester: { compressedBytes: 0, decompressedBytes: 0, decompressedLines: 0, headChunkBytes: 0, headChunkLines: 0, totalBatches: 0, totalChunksMatched: 0, totalDuplicates: 0, totalLinesSent: 0, totalReached: 1 }, store: { chunksDownloadTime: 0, compressedBytes: 0, decompressedBytes: 0, decompressedLines: 0, headChunkBytes: 0, headChunkLines: 0, totalChunksDownloaded: 0, totalChunksRef: 0, totalDuplicates: 0 }, summary: { bytesProcessedPerSecond: 0, execTime: 0.038768948, linesProcessedPerSecond: 0, totalBytesProcessed: 0, totalLinesProcessed: 0 } } }, status: 'success' },
-  { data: { result: [{ labels: { a: 'a', asset: '40.42', b: 'b', datacenter: 'Temp', endpoint: 'agentLog-40.42', filename: '/opt/nezha/nz-web/logs/nz-web.log', module: 'agentLog', project: 'Nezha' }, level: 'info', message: '2021-09-06 07:51:26.906 [http-nio-8080-exec-7] INFO  com.nis.common.aspect.ControllerExecTimeAspect - 方法:com.nis.modules.sys.controller.SysLicenseController.getLicenseState(),执行 0.0 秒,执行 2 毫秒', timestamp: '1630914687141252341', uuid: 'c1d610de4e8641ad' }, { labels: { a: 'a', asset: '40.42', b: 'b', datacenter: 'JBXXG', endpoint: 'agentLog-40.42', filename: '/opt/nezha/nz-web/logs/nz-web.log', module: 'agentLog', project: 'Nezha' }, level: 'fatal', message: '2021-09-06 07:51:26.058 [Alert Message Notify Handler] WARN  c.n.modules.alert.backend.AlertMessageNotifyThread - Message notify error,AlertRule is null ,messageId : null', timestamp: '1630914686140309993', uuid: '02f7711da17b8f4c' }, { labels: { a: 'a', asset: '40.42', b: 'b', datacenter: 'JBXXG', endpoint: 'agentLog-40.42', filename: '/opt/nezha/nz-web/logs/nz-web.log', module: 'agentLog', project: 'Nezha' }, level: 'info', message: '2021-09-06 07:51:20.005 [quartzScheduler_Worker-6] INFO  com.nis.modules.alert.backend.AlertRuleManagerJob - nz alert rule eval enable : 0', timestamp: '1630914680135527546', uuid: 'cfeae7c9698af8a0' }, { labels: { a: 'a', asset: '40.42', b: 'b', datacenter: 'JBXXG', endpoint: 'agentLog-40.42', filename: '/opt/nezha/nz-web/logs/nz-web.log', module: 'agentLog', project: 'Nezha' }, level: 'info', message: '2021-09-06 07:51:20.003 [quartzScheduler_Worker-6] INFO  com.nis.modules.alert.backend.AlertRuleManagerJob - update snmp trap rule success,size:1', timestamp: '1630914680135516245', uuid: '9464e94c39c3b2cf' }, { labels: { a: 'a', asset: '40.42', b: 'b', datacenter: 'JBXXG', endpoint: 'agentLog-40.42', filename: '/opt/nezha/nz-web/logs/nz-web.log', module: 'agentLog', project: 'Nezha' }, level: 'info', message: '2021-09-06 07:51:10.004 [quartzScheduler_Worker-5] INFO  com.nis.modules.alert.backend.AlertRuleManagerJob - nz alert rule eval enable : 0', timestamp: '1630914670128320735', uuid: '3c3b0e57c83690e5' }, { labels: { a: 'a', asset: '40.42', b: 'b', datacenter: 'JBXXG', endpoint: 'agentLog-40.42', filename: '/opt/nezha/nz-web/logs/nz-web.log', module: 'agentLog', project: 'Nezha' }, level: 'info', message: '2021-09-06 07:51:10.004 [quartzScheduler_Worker-5] INFO  com.nis.modules.alert.backend.AlertRuleManagerJob - update snmp trap rule success,size:1', timestamp: '1630914670128312608', uuid: '1acc37e93767941d' }, { labels: { a: 'a', asset: '40.42', b: 'b', datacenter: 'JBXXG', endpoint: 'agentLog-40.42', filename: '/opt/nezha/nz-web/logs/nz-web.log', module: 'agentLog', project: 'Nezha' }, level: 'info', message: '2021-09-06 07:51:07.284 [http-nio-8080-exec-12] INFO  com.nis.common.aspect.ControllerExecTimeAspect - 方法:com.nis.modules.panel.controller.ExpreTmplController.queryTmplsByGname(),执行 0.0 秒,执行 1 毫秒', timestamp: '1630914667376718771', uuid: 'd0652a0c6a723a67' }, { labels: { a: 'a', asset: '40.42', b: 'b', datacenter: 'JBXXG', endpoint: 'agentLog-40.42', filename: '/opt/nezha/nz-web/logs/nz-web.log', module: 'agentLog', project: 'Nezha' }, level: 'info', message: '2021-09-06 07:51:07.263 [http-nio-8080-exec-23] INFO  com.nis.common.aspect.ControllerExecTimeAspect - 方法:com.nis.modules.promserver.controller.PromProxyController.promProxy(),执行 0.0 秒,执行 5 毫秒', timestamp: '1630914667376706551', uuid: '8c1b19c648b81638' }, { labels: { a: 'a', asset: '40.42', b: 'b', datacenter: 'JBXXG', endpoint: 'agentLog-40.42', filename: '/opt/nezha/nz-web/logs/nz-web.log', module: 'agentLog', project: 'Nezha' }, level: 'info', message: '2021-09-06 07:51:07.261 [http-nio-8080-exec-28] INFO  com.nis.common.aspect.ControllerExecTimeAspect - 方法:com.nis.modules.promserver.controller.LokiProxyController.logLokiProxy(),执行 0.0 秒,执行 3 毫秒', timestamp: '1630914667376698830', uuid: '848132e62fa4d8a5' }, { labels: { a: 'a', asset: '40.42', b: 'b', datacenter: 'JBXXG', endpoint: 'agentLog-40.42', filename: '/opt/nezha/nz-web/logs/nz-web.log', module: 'agentLog', project: 'Nezha' }, level: 'info', message: '2021-09-06 07:51:06.758 [quartzScheduler_Worker-2] INFO  com.nis.modules.asset.job.AssetTalonStatusJob - asset talon state Run Time: 0:00:06.755', timestamp: '1630914666876597145', uuid: 'ec2ebbef8208b189' }, { labels: { a: 'a', asset: '40.42', b: 'b', datacenter: 'JBXXG', endpoint: 'agentLog-40.42', filename: '/opt/nezha/nz-web/logs/nz-web.log', module: 'agentLog', project: 'Nezha' }, level: 'unknown', message: '\t... 8 common frames omitted', timestamp: '1630914665125804175', uuid: 'e95453b79ef10771' }, { labels: { a: 'a', asset: '40.42', b: 'b', datacenter: 'JBXXG', endpoint: 'agentLog-40.42', filename: '/opt/nezha/nz-web/logs/nz-web.log', module: 'agentLog', project: 'Nezha' }, level: 'unknown', message: '\tat cn.hutool.http.HttpRequest.send(HttpRequest.java:1148)', timestamp: '1630914665125798610', uuid: 'e916117f0eb5bef1' }, { labels: { a: 'a', asset: '40.42', b: 'b', datacenter: 'JBXXG', endpoint: 'agentLog-40.42', filename: '/opt/nezha/nz-web/logs/nz-web.log', module: 'agentLog', project: 'Nezha' }, level: 'unknown', message: '\tat cn.hutool.http.HttpConnection.connect(HttpConnection.java:377)', timestamp: '1630914665125796033', uuid: '36221151498f065c' }, { labels: { a: 'a', asset: '40.42', b: 'b', datacenter: 'JBXXG', endpoint: 'agentLog-40.42', filename: '/opt/nezha/nz-web/logs/nz-web.log', module: 'agentLog', project: 'Nezha' }, level: 'unknown', message: '\tat sun.net.www.protocol.http.HttpURLConnection.connect(HttpURLConnection.java:990)', timestamp: '1630914665125724445', uuid: 'aa2d9b0158f3d862' }, { labels: { a: 'a', asset: '40.42', b: 'b', datacenter: 'JBXXG', endpoint: 'agentLog-40.42', filename: '/opt/nezha/nz-web/logs/nz-web.log', module: 'agentLog', project: 'Nezha' }, level: 'unknown', message: '\tat sun.net.www.protocol.http.HttpURLConnection.plainConnect(HttpURLConnection.java:1056)', timestamp: '1630914665125715064', uuid: '58a1940880d3d358' }, { labels: { a: 'a', asset: '40.42', b: 'b', datacenter: 'JBXXG', endpoint: 'agentLog-40.42', filename: '/opt/nezha/nz-web/logs/nz-web.log', module: 'agentLog', project: 'Nezha' }, level: 'unknown', message: '\tat sun.net.www.protocol.http.HttpURLConnection.plainConnect0(HttpURLConnection.java:1162)', timestamp: '1630914665125711771', uuid: '252d0c43b1ec4fcb' }, { labels: { a: 'a', asset: '40.42', b: 'b', datacenter: 'JBXXG', endpoint: 'agentLog-40.42', filename: '/opt/nezha/nz-web/logs/nz-web.log', module: 'agentLog', project: 'Nezha' }, level: 'unknown', message: '\tat sun.net.www.protocol.http.HttpURLConnection.getNewHttpClient(HttpURLConnection.java:1226)', timestamp: '1630914665125692856', uuid: 'dce24f838893daa3' }, { labels: { a: 'a', asset: '40.42', b: 'b', datacenter: 'JBXXG', endpoint: 'agentLog-40.42', filename: '/opt/nezha/nz-web/logs/nz-web.log', module: 'agentLog', project: 'Nezha' }, level: 'unknown', message: '\tat sun.net.www.http.HttpClient.New(HttpClient.java:357)', timestamp: '1630914665125667343', uuid: '63daee34a506856a' }, { labels: { a: 'a', asset: '40.42', b: 'b', datacenter: 'JBXXG', endpoint: 'agentLog-40.42', filename: '/opt/nezha/nz-web/logs/nz-web.log', module: 'agentLog', project: 'Nezha' }, level: 'unknown', message: '\tat sun.net.www.http.HttpClient.New(HttpClient.java:339)', timestamp: '1630914665125660104', uuid: '9cf34708188f302d' }, { labels: { a: 'a', asset: '40.42', b: 'b', datacenter: 'JBXXG', endpoint: 'agentLog-40.42', filename: '/opt/nezha/nz-web/logs/nz-web.log', module: 'agentLog', project: 'Nezha' }, level: 'unknown', message: '\tat sun.net.www.http.HttpClient.<init>(HttpClient.java:242)', timestamp: '1630914665125653679', uuid: 'fb3a0475db46ce6f' }, { labels: { a: 'a', asset: '40.42', b: 'b', datacenter: 'JBXXG', endpoint: 'agentLog-40.42', filename: '/opt/nezha/nz-web/logs/nz-web.log', module: 'agentLog', project: 'Nezha' }, level: 'unknown', message: '\tat sun.net.www.http.HttpClient.openServer(HttpClient.java:558)', timestamp: '1630914665125647714', uuid: 'c79468bdecb3d7ff' }, { labels: { a: 'a', asset: '40.42', b: 'b', datacenter: 'JBXXG', endpoint: 'agentLog-40.42', filename: '/opt/nezha/nz-web/logs/nz-web.log', module: 'agentLog', project: 'Nezha' }, level: 'unknown', message: '\tat sun.net.www.http.HttpClient.openServer(HttpClient.java:463)', timestamp: '1630914665125644512', uuid: '11728a8823ae1558' }, { labels: { a: 'a', asset: '40.42', b: 'b', datacenter: 'JBXXG', endpoint: 'agentLog-40.42', filename: '/opt/nezha/nz-web/logs/nz-web.log', module: 'agentLog', project: 'Nezha' }, level: 'unknown', message: '\tat sun.net.NetworkClient.doConnect(NetworkClient.java:175)', timestamp: '1630914665125538995', uuid: 'a0a154463c8c7454' }, { labels: { a: 'a', asset: '40.42', b: 'b', datacenter: 'JBXXG', endpoint: 'agentLog-40.42', filename: '/opt/nezha/nz-web/logs/nz-web.log', module: 'agentLog', project: 'Nezha' }, level: 'unknown', message: '\tat java.net.Socket.connect(Socket.java:607)', timestamp: '1630914665125521215', uuid: '789fa8fb19160796' }, { labels: { a: 'a', asset: '40.42', b: 'b', datacenter: 'JBXXG', endpoint: 'agentLog-40.42', filename: '/opt/nezha/nz-web/logs/nz-web.log', module: 'agentLog', project: 'Nezha' }, level: 'unknown', message: '\tat java.net.SocksSocketImpl.connect(SocksSocketImpl.java:392)', timestamp: '1630914665125510928', uuid: '92a99f8b2a6ee80c' }, { labels: { a: 'a', asset: '40.42', b: 'b', datacenter: 'JBXXG', endpoint: 'agentLog-40.42', filename: '/opt/nezha/nz-web/logs/nz-web.log', module: 'agentLog', project: 'Nezha' }, level: 'unknown', message: '\tat java.net.AbstractPlainSocketImpl.connect(AbstractPlainSocketImpl.java:188)', timestamp: '1630914665125498524', uuid: 'fc40c20624a89b9c' }, { labels: { a: 'a', asset: '40.42', b: 'b', datacenter: 'JBXXG', endpoint: 'agentLog-40.42', filename: '/opt/nezha/nz-web/logs/nz-web.log', module: 'agentLog', project: 'Nezha' }, level: 'unknown', message: '\tat java.net.AbstractPlainSocketImpl.connectToAddress(AbstractPlainSocketImpl.java:206)', timestamp: '1630914665125488903', uuid: 'b327acb15e772d4e' }, { labels: { a: 'a', asset: '40.42', b: 'b', datacenter: 'JBXXG', endpoint: 'agentLog-40.42', filename: '/opt/nezha/nz-web/logs/nz-web.log', module: 'agentLog', project: 'Nezha' }, level: 'unknown', message: '\tat java.net.AbstractPlainSocketImpl.doConnect(AbstractPlainSocketImpl.java:350)', timestamp: '1630914665125468531', uuid: 'a23a0283df63e7ce' }, { labels: { a: 'a', asset: '40.42', b: 'b', datacenter: 'JBXXG', endpoint: 'agentLog-40.42', filename: '/opt/nezha/nz-web/logs/nz-web.log', module: 'agentLog', project: 'Nezha' }, level: 'unknown', message: '\tat java.net.PlainSocketImpl.socketConnect(Native Method)', timestamp: '1630914665125454430', uuid: '8e23c0700ec5194a' }, { labels: { a: 'a', asset: '40.42', b: 'b', datacenter: 'JBXXG', endpoint: 'agentLog-40.42', filename: '/opt/nezha/nz-web/logs/nz-web.log', module: 'agentLog', project: 'Nezha' }, level: 'unknown', message: 'Caused by: java.net.SocketTimeoutException: connect timed out', timestamp: '1630914665125444835', uuid: '3ec06b844d6ff19c' }, { labels: { a: 'a', asset: '40.42', b: 'b', datacenter: 'JBXXG', endpoint: 'agentLog-40.42', filename: '/opt/nezha/nz-web/logs/nz-web.log', module: 'agentLog', project: 'Nezha' }, level: 'unknown', message: '\tat java.lang.Thread.run(Thread.java:748)', timestamp: '1630914665125440492', uuid: '6d2ced1a7d14da58' }, { labels: { a: 'a', asset: '40.42', b: 'b', datacenter: 'JBXXG', endpoint: 'agentLog-40.42', filename: '/opt/nezha/nz-web/logs/nz-web.log', module: 'agentLog', project: 'Nezha' }, level: 'unknown', message: '\tat java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:624)', timestamp: '1630914665125381837', uuid: '9fdcbc49129ca417' }, { labels: { a: 'a', asset: '40.42', b: 'b', datacenter: 'JBXXG', endpoint: 'agentLog-40.42', filename: '/opt/nezha/nz-web/logs/nz-web.log', module: 'agentLog', project: 'Nezha' }, level: 'unknown', message: '\tat java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1149)', timestamp: '1630914665125379108', uuid: '22fad35a54d7f23d' }, { labels: { a: 'a', asset: '40.42', b: 'b', datacenter: 'JBXXG', endpoint: 'agentLog-40.42', filename: '/opt/nezha/nz-web/logs/nz-web.log', module: 'agentLog', project: 'Nezha' }, level: 'unknown', message: '\tat java.util.concurrent.FutureTask.run(FutureTask.java:266)', timestamp: '1630914665125357438', uuid: 'f24a297fc6c7766d' }, { labels: { a: 'a', asset: '40.42', b: 'b', datacenter: 'JBXXG', endpoint: 'agentLog-40.42', filename: '/opt/nezha/nz-web/logs/nz-web.log', module: 'agentLog', project: 'Nezha' }, level: 'unknown', message: '\tat com.nis.modules.asset.job.AssetTalonStatusJob$1.call(AssetTalonStatusJob.java:97)', timestamp: '1630914665125354601', uuid: '78df210218d11d02' }, { labels: { a: 'a', asset: '40.42', b: 'b', datacenter: 'JBXXG', endpoint: 'agentLog-40.42', filename: '/opt/nezha/nz-web/logs/nz-web.log', module: 'agentLog', project: 'Nezha' }, level: 'unknown', message: '\tat com.nis.modules.asset.job.AssetTalonStatusJob$1.call(AssetTalonStatusJob.java:103)', timestamp: '1630914665125321495', uuid: '09628ecf55e48bfc' }, { labels: { a: 'a', asset: '40.42', b: 'b', datacenter: 'JBXXG', endpoint: 'agentLog-40.42', filename: '/opt/nezha/nz-web/logs/nz-web.log', module: 'agentLog', project: 'Nezha' }, level: 'unknown', message: '\tat cn.hutool.http.HttpRequest.execute(HttpRequest.java:940)', timestamp: '1630914665125309985', uuid: '3d4fe7cb7ce501e1' }, { labels: { a: 'a', asset: '40.42', b: 'b', datacenter: 'JBXXG', endpoint: 'agentLog-40.42', filename: '/opt/nezha/nz-web/logs/nz-web.log', module: 'agentLog', project: 'Nezha' }, level: 'unknown', message: '\tat cn.hutool.http.HttpRequest.execute(HttpRequest.java:969)', timestamp: '1630914665125301828', uuid: '70d405e2891eccc6' }, { labels: { a: 'a', asset: '40.42', b: 'b', datacenter: 'JBXXG', endpoint: 'agentLog-40.42', filename: '/opt/nezha/nz-web/logs/nz-web.log', module: 'agentLog', project: 'Nezha' }, level: 'unknown', message: '\tat cn.hutool.http.HttpRequest.send(HttpRequest.java:1153)', timestamp: '1630914665125292965', uuid: '710d15a186a429a1' }, { labels: { a: 'a', asset: '40.42', b: 'b', datacenter: 'JBXXG', endpoint: 'agentLog-40.42', filename: '/opt/nezha/nz-web/logs/nz-web.log', module: 'agentLog', project: 'Nezha' }, level: 'unknown', message: 'cn.hutool.core.io.IORuntimeException: SocketTimeoutException: connect timed out', timestamp: '1630914665125286327', uuid: '4dbe5ba1ca72e0a6' }, { labels: { a: 'a', asset: '40.42', b: 'b', datacenter: 'JBXXG', endpoint: 'agentLog-40.42', filename: '/opt/nezha/nz-web/logs/nz-web.log', module: 'agentLog', project: 'Nezha' }, level: 'error', message: '2021-09-06 07:51:05.011 [pool-5-thread-15] ERROR com.nis.modules.asset.job.AssetTalonStatusJob - 请求 http://192.168.169.170:10092/nz-talon/healthy 接口失败', timestamp: '1630914665125279537', uuid: '4aec706b11ef5eec' }, { labels: { a: 'a', asset: '40.42', b: 'b', datacenter: 'JBXXG', endpoint: 'agentLog-40.42', filename: '/opt/nezha/nz-web/logs/nz-web.log', module: 'agentLog', project: 'Nezha' }, level: 'unknown', message: '\t... 8 common frames omitted', timestamp: '1630914665125274899', uuid: '71c901dbd2809073' }, { labels: { a: 'a', asset: '40.42', b: 'b', datacenter: 'JBXXG', endpoint: 'agentLog-40.42', filename: '/opt/nezha/nz-web/logs/nz-web.log', module: 'agentLog', project: 'Nezha' }, level: 'unknown', message: '\tat cn.hutool.http.HttpRequest.send(HttpRequest.java:1148)', timestamp: '1630914665125228589', uuid: '1f2af2da1bb752fc' }, { labels: { a: 'a', asset: '40.42', b: 'b', datacenter: 'JBXXG', endpoint: 'agentLog-40.42', filename: '/opt/nezha/nz-web/logs/nz-web.log', module: 'agentLog', project: 'Nezha' }, level: 'unknown', message: '\tat cn.hutool.http.HttpConnection.connect(HttpConnection.java:377)', timestamp: '1630914665125222217', uuid: 'a9e2bd2988deef77' }, { labels: { a: 'a', asset: '40.42', b: 'b', datacenter: 'JBXXG', endpoint: 'agentLog-40.42', filename: '/opt/nezha/nz-web/logs/nz-web.log', module: 'agentLog', project: 'Nezha' }, level: 'unknown', message: '\tat sun.net.www.protocol.http.HttpURLConnection.connect(HttpURLConnection.java:990)', timestamp: '1630914665125212961', uuid: 'b8219b6f83e2f15e' }, { labels: { a: 'a', asset: '40.42', b: 'b', datacenter: 'JBXXG', endpoint: 'agentLog-40.42', filename: '/opt/nezha/nz-web/logs/nz-web.log', module: 'agentLog', project: 'Nezha' }, level: 'unknown', message: '\tat sun.net.www.protocol.http.HttpURLConnection.plainConnect(HttpURLConnection.java:1056)', timestamp: '1630914665125208660', uuid: 'bc3e191c8118a235' }, { labels: { a: 'a', asset: '40.42', b: 'b', datacenter: 'JBXXG', endpoint: 'agentLog-40.42', filename: '/opt/nezha/nz-web/logs/nz-web.log', module: 'agentLog', project: 'Nezha' }, level: 'unknown', message: '\tat sun.net.www.protocol.http.HttpURLConnection.plainConnect0(HttpURLConnection.java:1162)', timestamp: '1630914665125139313', uuid: 'd3cc00c5d38c6d81' }, { labels: { a: 'a', asset: '40.42', b: 'b', datacenter: 'JBXXG', endpoint: 'agentLog-40.42', filename: '/opt/nezha/nz-web/logs/nz-web.log', module: 'agentLog', project: 'Nezha' }, level: 'unknown', message: '\tat sun.net.www.protocol.http.HttpURLConnection.getNewHttpClient(HttpURLConnection.java:1226)', timestamp: '1630914665125136671', uuid: 'bf6c0fa82211aed7' }, { labels: { a: 'a', asset: '40.42', b: 'b', datacenter: 'JBXXG', endpoint: 'agentLog-40.42', filename: '/opt/nezha/nz-web/logs/nz-web.log', module: 'agentLog', project: 'Nezha' }, level: 'unknown', message: '\tat sun.net.www.http.HttpClient.New(HttpClient.java:357)', timestamp: '1630914665125112119', uuid: '1a1dcdaf9fc8551f' }, { labels: { a: 'a', asset: '40.42', b: 'b', datacenter: 'JBXXG', endpoint: 'agentLog-40.42', filename: '/opt/nezha/nz-web/logs/nz-web.log', module: 'agentLog', project: 'Nezha' }, level: 'unknown', message: '\tat sun.net.www.http.HttpClient.New(HttpClient.java:339)', timestamp: '1630914665125109129', uuid: 'effbf4a88e861acc' }], resultType: 'streamsFormat', series: [{ data: [[1630914687125109129, 0], [1630914686125109129, 0], [1630914685125109129, 0], [1630914684125109129, 0], [1630914683125109129, 0], [1630914682125109129, 0], [1630914681125109129, 0], [1630914680125109129, 0], [1630914679125109129, 0], [1630914678125109129, 0], [1630914677125109129, 0], [1630914676125109129, 0], [1630914675125109129, 0], [1630914674125109129, 0], [1630914673125109129, 0], [1630914672125109129, 0], [1630914671125109129, 0], [1630914670125109129, 0], [1630914669125109129, 0], [1630914668125109129, 0], [1630914667125109129, 0], [1630914666125109129, 0], [1630914665125109129, 1]], name: 'error' }, { data: [[1630914687125109129, 0], [1630914686125109129, 0], [1630914685125109129, 0], [1630914684125109129, 0], [1630914683125109129, 0], [1630914682125109129, 0], [1630914681125109129, 0], [1630914680125109129, 0], [1630914679125109129, 0], [1630914678125109129, 0], [1630914677125109129, 0], [1630914676125109129, 0], [1630914675125109129, 0], [1630914674125109129, 0], [1630914673125109129, 0], [1630914672125109129, 0], [1630914671125109129, 0], [1630914670125109129, 0], [1630914669125109129, 0], [1630914668125109129, 0], [1630914667125109129, 0], [1630914666125109129, 0], [1630914665125109129, 39]], name: 'unknown' }, { data: [[1630914687125109129, 0], [1630914686125109129, 1], [1630914685125109129, 0], [1630914684125109129, 0], [1630914683125109129, 0], [1630914682125109129, 0], [1630914681125109129, 0], [1630914680125109129, 0], [1630914679125109129, 0], [1630914678125109129, 0], [1630914677125109129, 0], [1630914676125109129, 0], [1630914675125109129, 0], [1630914674125109129, 0], [1630914673125109129, 0], [1630914672125109129, 0], [1630914671125109129, 0], [1630914670125109129, 0], [1630914669125109129, 0], [1630914668125109129, 0], [1630914667125109129, 0], [1630914666125109129, 0], [1630914665125109129, 0]], name: 'fatal' }, { data: [[1630914687125109129, 1], [1630914686125109129, 0], [1630914685125109129, 0], [1630914684125109129, 0], [1630914683125109129, 0], [1630914682125109129, 0], [1630914681125109129, 0], [1630914680125109129, 2], [1630914679125109129, 0], [1630914678125109129, 0], [1630914677125109129, 0], [1630914676125109129, 0], [1630914675125109129, 0], [1630914674125109129, 0], [1630914673125109129, 0], [1630914672125109129, 0], [1630914671125109129, 0], [1630914670125109129, 2], [1630914669125109129, 0], [1630914668125109129, 0], [1630914667125109129, 3], [1630914666125109129, 1], [1630914665125109129, 0]], name: 'info' }], stats: { ingester: { compressedBytes: 247208, decompressedBytes: 80310, decompressedLines: 578, headChunkBytes: 7723, headChunkLines: 464, totalBatches: 1, totalChunksMatched: 2, totalDuplicates: 0, totalLinesSent: 50, totalReached: 1 }, store: { chunksDownloadTime: 0, compressedBytes: 0, decompressedBytes: 0, decompressedLines: 0, headChunkBytes: 0, headChunkLines: 0, totalChunksDownloaded: 0, totalChunksRef: 0, totalDuplicates: 0 }, summary: { bytesProcessedPerSecond: 3308716, execTime: 0.026606391, linesProcessedPerSecond: 39163, totalBytesProcessed: 88033, totalLinesProcessed: 1042 } } }, status: 'success' }]
-export default logsTempData
diff --git a/nezha-fronted/src/components/charts/text-chart.vue b/nezha-fronted/src/components/charts/text-chart.vue
deleted file mode 100644
index 9524f850e..000000000
--- a/nezha-fronted/src/components/charts/text-chart.vue
+++ /dev/null
@@ -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>
diff --git a/nezha-fronted/src/components/common/alert/alertRuleInfo.vue b/nezha-fronted/src/components/common/alert/alertRuleInfo.vue
index 1787a57f7..2c6343053 100644
--- a/nezha-fronted/src/components/common/alert/alertRuleInfo.vue
+++ b/nezha-fronted/src/components/common/alert/alertRuleInfo.vue
@@ -69,7 +69,7 @@
 </template>
 
 <script>
-import chartDataFormat from '../../charts/chartDataFormat'
+import chartDataFormat from '../../chart/chartDataFormat'
 import trendMixins from '@/components/common/alert/trendMixins'
 export default {
   name: 'alert-rule-info',
diff --git a/nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTabNew.vue b/nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTabNew.vue
index c955a23f1..0b57cdfa6 100644
--- a/nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTabNew.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTabNew.vue
@@ -125,7 +125,7 @@ import nzBottomDataList from '@/components/common/bottomBox/nzBottomDataList'
 import axios from 'axios'
 import bus from '@/libs/bus'
 import alertMessageTable from '@/components/common/table/alert/alertMessageTable.vue'
-import chartDataFormat from '@/components/charts/chartDataFormat'
+import chartDataFormat from '@/components/chart/chartDataFormat'
 import chart from '@/components/page/dashboard/overview/chart'
 import { alertMessage as alertMessageConstant, fromRoute } from '@/components/common/js/constants'
 import alertSilenceBox from '@/components/common/rightBox/alertSilenceBox'
diff --git a/nezha-fronted/src/components/common/bottomBox/tabs/endpointQueryTab.vue b/nezha-fronted/src/components/common/bottomBox/tabs/endpointQueryTab.vue
deleted file mode 100644
index 95473dad9..000000000
--- a/nezha-fronted/src/components/common/bottomBox/tabs/endpointQueryTab.vue
+++ /dev/null
@@ -1,725 +0,0 @@
-<style scope>
-.plTableBox.nz-table /deep/  .el-table{
-  display: block !important;
-}
-.project-calendar{
-  margin-top: 2px;
-}
-.control-icon-unchecked {
-  color: #999999;
-  cursor: not-allowed;
-}
-</style>
-<style>
-  .endpoint-dialog .el-dialog__body{
-    height: calc(100% - 48px) !important;
-    padding-bottom: 0 !important;
-  }
-</style>
-<template>
-  <span style="z-index: 1999;position: relative">
-    <div class="sub-top-tools">
-      <div class="sub-list-tabs">
-        <div class="sub-list-tab-title">{{$t("project.endpoint.endpointId")}}: {{currentEndpoint ? currentEndpoint.id : ''}}</div><div
-        class="sub-list-tab" @click="changeTab('panel')" id="endpoint-query-changepanel">{{$t("overall.detail")}}</div>
-        <div class="sub-list-tab" @click="changeTab('alertMessage')" id="endpoint-query-alertMessage">{{$t("asset.alerts")}}</div>
-        <div class="sub-list-tab sub-list-tab-active">{{$t("overall.query")}}</div>
-      </div>
-      <div class="top-tool-right">
-        <div class="top-tool-search margin-r-20">
-          <el-input ref="elementQuery" @clear="clearInput" id="elementQuery" @focus="focusInput"  @blur="blurInput" v-model="queryExpression" class="query-input-inactive" size="mini" clearable  :placeholder="$t('project.endpoint.promExpr')" >
-            <i slot="suffix" class="el-input__icon nz-icon nz-icon-search" style="float:right" @click="focusInput"></i>
-          </el-input>
-        </div>
-        <div class="margin-r-20 nz-btn-group nz-btn-group-size-small nz-btn-group-light">
-          <button @click="changeTime(-10)" class="nz-btn nz-btn-size-normal nz-btn-style-light change-time-height nz-input-group-prepend" id="endpoint-query-changetime"><i class="el-icon-d-arrow-left"></i></button>
-          <my-date-picker
-            v-model="formatTime"
-            type="datetime"
-            size="mini"
-            class="project-calendar nz-input-group-middle"
-            clearable
-            :time-arrow-control="true"
-            placeholder="Moment"
-            :value-format="timeFormatStrToDatePickFormat(timeFormatMain)"
-            :format="timeFormatStrToDatePickFormat(timeFormatMain)"
-            @change="pickTime"
-        >
-          </my-date-picker>
-          <button @click="changeTime(10)" class="nz-btn nz-btn-size-normal nz-btn-style-light change-time-height nz-input-group-append"><i class="el-icon-d-arrow-right"></i></button>
-        </div>
-        <div class="nz-btn-group nz-btn-group-size-normal nz-btn-group-light" style="height: 24px;">
-          <button class="nz-btn nz-btn-size-normal nz-btn-style-light" @click="viewGraph">
-            <i class="nz-icon nz-icon-chart"  :class="{'control-icon-unchecked':selectedEndpoints.length<1,'control-icon-checked':selectedEndpoints.length>0}"></i>
-          </button><button @mouseenter="dropdownHandler(true)" @mouseleave="dropdownHandler(false)" class="nz-btn nz-btn-size-normal nz-btn-style-light export-dropdown-btn" id="browser-go">
-            <i class="nz-icon nz-icon-arrow-down"></i>
-            <transition name="el-zoom-in-top">
-              <div v-if="dropdownShow" class="endpoint-query-dropdown el-popover">
-                <span style="padding-top: 2px">{{$t('project.endpoint.hideSameLabels')}}</span>
-                <el-switch v-model="hideSameLabels" size="small"></el-switch>
-              </div>
-            </transition>
-          </button>
-        </div>
-      </div>
-    </div>
-    <div class="table-header-inner" @click="clearSelectedMetrics"><span><i style="font-size: 12px;margin-left: 2px;" class="nz-icon nz-icon-close " :class="{'control-icon-unchecked':selectedEndpoints.length<1,'control-icon-checked':selectedEndpoints.length>0}"></i></span></div>
-     <pl-table :row-height="28" use-virtual :datas="tableData" border :empty-text="$t('config.mib.noData')" :header-cell-class-name="cellClass" :style="{height: $tableHeight.noPagination}"
-               :pagination-show="false" class="nz-table endpoint-query-table" ref="endpointQueryTable" style="width: 100%;" v-loading="loading"
-               v-if="tableShow && plTableSHow" id="endpoint-list-table" :tooltip-effect="'light'" @selection-change="selectChange">
-      <pl-table-column
-        type="selection"
-        width="39"
-        align="center"
-        column-key="sel"
-        :selectable="selectable">
-      </pl-table-column>
-      <pl-table-column
-        prop="element"
-        :resizable="true"
-        :min-width="1000"
-        column-key="element"
-        :show-overflow-tooltip="true"
-        :label="$t('project.endpoint.element')">
-        <template v-slot="scope">
-          <el-popover trigger="hover" placement="right" v-if="typeof scope.row.metricTip != 'undefined' && scope.row.metricTip != null">
-            <div>
-              <ul>
-                <li><span class="metirc-tip-list">metric&nbsp;:&nbsp;</span><span>{{scope.row.metricTip.metric?scope.row.metricTip.metric:'&#45;&#45;'}}</span></li>
-                <li><span class="metirc-tip-list">type&nbsp;:&nbsp;</span><span>{{scope.row.metricTip.type?scope.row.metricTip.type:'unknown'}}</span></li>
-                <li><span class="metirc-tip-list">help&nbsp;:&nbsp;</span><span>{{scope.row.metricTip.help?scope.row.metricTip.help:'&#45;&#45;'}}</span></li>
-                <li><span class="metirc-tip-list">unit&nbsp;:&nbsp;</span><span>{{scope.row.metricTip.unit?scope.row.metricTip.unit:'&#45;&#45;'}}</span></li>
-              </ul>
-            </div>
-            <span slot="reference"><i class="nz-icon nz-icon-info-normal metric-tip-icon"></i></span>
-          </el-popover>
-          <span style="word-break: break-all;" v-html="hideSameLabels?scope.row.colorSimpleElement: scope.row.colorElement"></span>
-        </template>
-      </pl-table-column>
-      <pl-table-column
-        :resizable="false"
-        prop="value"
-        column-key="value"
-        :label="$t('project.endpoint.value')"
-        min-width="180">
-      </pl-table-column>
-    </pl-table>
-    <button :class="{'to-top-is-hover': tools.tableHover}" @click="toTop(scrollbarWrap)" class="to-top" v-show="tools.showTopBtn" id="endpoint-list-totop"><i class="nz-icon nz-icon-top"></i></button>
-
-    <el-dialog class="line-chart-block-modal nz-dialog endpoint-dialog"
-               :title="$t('project.endpoint.dialogTitle')"
-               :visible.sync="graphShow"
-               width="90%"
-               :modal-append-to-body="false"
-               @close="dialogClose">
-      <div slot="title">
-        {{$t("project.endpoint.dialogTitle")}}
-        <div class="float-right panel-calendar dialog-tool" style="display: flex">
-          <pick-time :refresh-data-func="queryChartDate" :use-refresh="false" v-model="searchTime" style="height: 28px;" @unitChange="chartUnitChange" id="endpoint-query-full-chart" :show-multiple="true" ref="pickTime"></pick-time>
-          <button id="endpoint-query-full-chart-save" v-has="'project_endpoint_query_chart_toAdd'" class="nz-btn nz-btn-size-large nz-btn-style-normal" @click="saveChart">{{$t('dashboard.metric.saveChart')}}</button>
-        </div>
-      </div>
-      <chart ref="endpointChart" :unit="chartUnit" :minusTime="minusTime"></chart>
-    </el-dialog>
-    <transition name="right-box">
-      <chart-box :chart="chart" :panel-data="panelData" :show-panel="{id: -1, name: '', type: 'endpointQuery'}" @close="rightBox.show = false" @on-create-success="createSuccess" @reload="getPanelData" @reloadOnlyPanel="getPanelData" box-class="save-chart-box" from="project_endpoint_query" ref="addChartModal" v-if="rightBox.show" style="z-index: 2900" :fromEndpoint="true"></chart-box>
-    </transition>
-  </span>
-</template>
-
-<script>
-import chartBox from '../../../page/dashboard/chartBox'
-import axios from 'axios'
-import bus from '../../../../libs/bus'
-import chart from '../../../page/dashboard/overview/chart'
-
-let timeout
-let internal
-export default {
-  name: 'endpointQueryTab',
-  components: {
-    'chart-box': chartBox,
-    chart: chart
-  },
-  props: {
-    obj: Object, // 关联的实体对象
-    from: String
-  },
-  data () {
-    return {
-      chart: {},
-      tableShow: true,
-      dropdownShow: false,
-      loading: false,
-      tools: {
-        showTopBtn: false, // 主列表top按钮
-        tableHover: false
-      },
-      currentEndpoint: {},
-      queryData: [], // endpoint 查询列表数据
-      tableData: [],
-      tableDataCopy: '',
-      queryExpression: '',
-      elementMetricDatas: [], // element 列提示信息列表
-      formatTime: '', // 查询endpoint的时间，
-      selectedEndpoints: [], // 选中的metric{label='value'}
-      chartDatas: [], // 从query_range查询到的数据
-      legend: [], // echart legend
-      graphShow: false,
-      searchTime: [new Date().setHours(new Date().getHours() - 1), new Date()],
-      panelData: [], // chart-box的panel下拉框数据,
-      hideSameLabels: true,
-      sameLabels: ['instance', 'module', 'project', 'asset', 'endpoint', 'datacenter'],
-      chartUnit: 5,
-      rightBox: { show: false },
-      plTableSHow: true,
-      scrollTop: 0,
-      scrollbarWrap: null,
-      minusTime: 0
-    }
-  },
-  methods: {
-    changeTab (tab) {
-      this.$emit('changeTab', tab)
-    },
-    saveChart () { // 新增chart
-      const chart = {
-        title: '',
-        type: 'line',
-        span: 12,
-        height: '400',
-        unit: this.chartUnit,
-        param: {
-          url: '',
-          threshold: ''
-        },
-        elements: [],
-        panel: '',
-        sync: 0
-      }
-      for (let i = 0; i < this.selectedEndpoints.length; i++) {
-        if (this.selectedEndpoints[i] && this.selectedEndpoints[i].element !== '') {
-          chart.elements.push({ chartId: '', expression: this.selectedEndpoints[i].element, type: 'expert' })
-        }
-      }
-      this.chart = chart
-      this.rightBox.show = true
-    },
-    dropdownHandler (show) {
-      if (show) {
-        clearTimeout(timeout)
-        this.dropdownShow = true
-      } else {
-        timeout = setTimeout(() => {
-          this.dropdownShow = false
-        }, 700)
-      }
-    },
-    createSuccess (type, response, param, panel) {
-      this.$confirm(this.$t('dashboard.metric.goPanelTip'), this.$t('tip.saveSuccess'), {
-        confirmButtonText: this.$t('tip.yes'),
-        cancelButtonText: this.$t('tip.no'),
-        type: 'success'
-      }).then(() => {
-        bus.$emit('menu-change', 'panel')
-        this.$store.state.showPanel.id = panel.id
-        this.$store.state.showPanel.name = panel.name
-        this.$router.push({
-          path: '/panel',
-          query: {
-            t: +new Date()
-          }
-        })
-      })
-    },
-    tableReload () {
-      const table = this.$refs.endpointQueryTable
-      internal = setInterval(() => {
-        if (!window.resizing) {
-          table.setHeight()
-          clearInterval(internal)
-        }
-      }, 200)
-    },
-    queryEndpoint () {
-      this.loading = true
-      this.queryElementTips()
-      this.queryData = []
-      this.tableData = []
-      this.tableDataCopy = ''
-      setTimeout(() => {
-        this.$get('/prom/api/v1/query?query=' + encodeURIComponent("{endpoint_id='" + this.currentEndpoint.id + "'}") + '&time=' + this.formatTime).then(response => {
-          this.loading = false
-          if (response.status === 'success') {
-            const results = response.data.result
-            this.queryData = JSON.parse(JSON.stringify(results))
-            this.tableData = this.handlerTableData(results)
-            this.tableDataCopy = JSON.stringify(this.tableData)
-            this.$nextTick(this.$refs.endpointQueryTable.doLayout())
-            if (!this.scrollbarWrap) {
-              this.$nextTick(() => {
-                this.scrollbarWrap = this.$refs.endpointQueryTable.$refs.singleTable.bodyWrapper
-                this.toTopBtnHandler(this.scrollbarWrap)
-              })
-            }
-          }
-        })
-      }, 450)
-    },
-    clearSelectedMetrics () {
-      this.$refs.endpointQueryTable.clearSelection()
-    },
-    changeTime (size, unit) {
-      this.formatTime = this.getTime(size, unit)
-      this.showEndpoint()
-    },
-    pickTime () {
-      this.showEndpoint()
-    },
-    getTime (size, unit) { // 计算时间
-      const now = !this.formatTime ? new Date(bus.computeTimezone(new Date().getTime())) : new Date(this.formatTime)
-      if (unit) {
-        switch (unit) {
-          case 'y':
-            now.setFullYear(now.getFullYear() + size)
-            break
-          case 'M':
-            now.setMonth(now.getMonth() + size)
-            break
-          case 'd':
-            now.setDate(now.getDate() + size)
-            break
-          case 'h':
-            now.setHours(now.getHours() + size)
-            break
-          case 'm':
-            now.setMinutes(now.getMinutes() + size)
-            break
-          case 's':
-            now.setSeconds(now.getSeconds() + size)
-            break
-          default:
-            console.error('unit error')
-        }
-      } else {
-        now.setSeconds(now.getSeconds() + size)
-      }
-      const year = now.getFullYear()
-      let month = now.getMonth() + 1
-      month = month < 10 ? '0' + month : month
-      let day = now.getDate()
-      day = day < 10 ? '0' + day : day
-      let hour = now.getHours()
-      hour = hour < 10 ? '0' + hour : hour
-      let minute = now.getMinutes()
-      minute = minute < 10 ? '0' + minute : minute
-      let second = now.getSeconds()
-      second = second < 10 ? '0' + second : second
-      return year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second
-    },
-    handlerTableData (results) {
-      const tableData = []
-      for (const result of results) {
-        const metricName = result.metric.__name__
-        let temp = metricName
-        let simpleTemp = metricName// 显示简略信息：隐藏same labels后的结果
-        const metricColor = ''
-        const bracketsColor = '#eb7b18'// #eb7b18
-        const labelColor = '#65bbd1'// #66d9ef
-        const valueColor = '#61c261'// #74e680
-        let colorTemp = `<span style="${metricColor}">${metricName}</span>`
-        let colorSimpleTemp = `<span>${metricName}</span>`
-        let metricTip = {}
-        const queryInfos = (this.elementMetricDatas.filter((item) => {
-          return item.metric === temp
-        }))
-        if (queryInfos && queryInfos.length > 0) {
-          metricTip = queryInfos[0]
-        } else {
-          metricTip.metric = temp
-        }
-        delete result.metric.__name__
-        temp += '{'
-        simpleTemp += '{'
-        colorTemp += `<span style="color: ${bracketsColor}">{</span>`
-        colorSimpleTemp += `<span style="color: ${bracketsColor}">{</span>`
-        const keys = Object.keys(result.metric)
-        for (const index in keys) {
-          const key = keys[index]
-          temp += key + "='" + result.metric[key] + "',"
-          colorTemp += `<span style="color: ${labelColor}">${key}</span>=<span style="color: ${valueColor}">'${result.metric[key]}'</span>,`
-          if (!this.sameLabels.some((i) => { return i == key })) {
-            simpleTemp += key + "='" + result.metric[key] + "',"
-            colorSimpleTemp += `<span style="color: ${labelColor}">${key}</span>=<span style="color: ${valueColor}">'${result.metric[key]}'</span>,`
-          }
-        }
-        if (temp.indexOf(',') !== -1) {
-          temp = temp.substr(0, temp.length - 1)
-        }
-        if (simpleTemp.indexOf(',') !== -1) {
-          simpleTemp = simpleTemp.substr(0, simpleTemp.length - 1)
-        }
-        if (colorTemp.indexOf(',') !== -1) {
-          colorTemp = colorTemp.substr(0, colorTemp.length - 1)
-        }
-        if (colorSimpleTemp.indexOf(',') !== -1) {
-          colorSimpleTemp = colorSimpleTemp.substr(0, colorSimpleTemp.length - 1)
-        }
-
-        temp += '}'
-        simpleTemp += '}'
-        colorTemp += `<span style="color: ${bracketsColor}">}</span>`
-        colorSimpleTemp += `<span style="color: ${bracketsColor}">}</span>`
-        if (!/.+\{.+\}/.test(simpleTemp)) {
-          simpleTemp = simpleTemp.substr(0, simpleTemp.length - 2)
-        }
-
-        if (!/.+\{<\/span><span.+?>.+?\}/.test(colorSimpleTemp)) {
-          const metricReg = new RegExp('<span.*?>' + metricName + '<\/span>')
-          colorSimpleTemp = metricReg.exec(colorSimpleTemp)[0]
-        }
-
-        const edpQueryData = { element: temp, simpleElement: simpleTemp, colorElement: colorTemp, colorSimpleElement: colorSimpleTemp, value: result.value[1], type: (result.metric.type ? result.metric.type : '2'), metricTip: metricTip }
-        // this.tableData.push(edpQueryData);
-        tableData.push(edpQueryData)
-      }
-      return tableData
-    },
-    selectChange (selection) { // selection 选中的row的数组
-      this.selectedEndpoints = selection
-    },
-    selectable (row, index) {
-      if (this.selectedEndpoints.length >= 20 && !this.selectedEndpoints.includes(row)) {
-        return false
-      } else {
-        return true
-      }
-    },
-    viewGraph () {
-      if (this.selectedEndpoints.length < 1) {
-        return
-      }
-
-      this.chartDatas = []
-      this.legend = []
-      this.graphShow = true
-      this.$refs.pickTime.$refs.multipleTime.searchTime = []
-      this.$refs.pickTime.$refs.multipleTime.showTime = {
-        id: 12,
-        text: this.$t('dashboard.panel.noDate')
-      }
-      this.$refs.pickTime.$refs.multipleTime.showDropdown = false
-      this.$nextTick(() => {
-        this.$refs.endpointChart.startLoading()
-        this.queryChartDate()
-      })
-    },
-    dialogClose () {
-      this.$refs.pickTime.$refs.multipleTime.searchTime = []
-      this.$refs.pickTime.$refs.multipleTime.showTime = {
-        id: 12,
-        text: this.$t('dashboard.panel.noDate')
-      }
-      this.$refs.pickTime.$refs.multipleTime.showDropdown = false
-      this.graphShow = false
-    },
-    chartUnitChange (unit) {
-      this.chartUnit = unit
-      this.$nextTick(() => {
-        this.queryChartDate()
-      })
-    },
-    queryChartDate () {
-      const start = this.searchTime[0] ? this.searchTime[0] : this.getTime(-1, 'h')
-      const end = this.searchTime[1] ? this.searchTime[1] : this.getTime(0, 'h')
-      this.searchTime = [start, end]
-      const timeDiff = (new Date(end).getTime() - new Date(start).getTime()) / 1000 / (24 * 60 * 60)
-      // end - start < 1 day : 15s
-      // end - start < 7 day : 5m
-      // end - start < 30 day : 10m
-      // end - start > 30 day : 30m
-      let step = '15s'
-      if (timeDiff < 1) {
-        step = '15s'
-      } else if (timeDiff < 7) {
-        step = '5m'
-      } else if (timeDiff < 30) {
-        step = '10m'
-      } else {
-        step = '30m'
-      }
-      const axiosArr = []
-      for (const endpoint of this.selectedEndpoints) {
-        axiosArr.push(axios.get('/prom/api/v1/query_range?query=' + encodeURIComponent(endpoint.element) + '&start=' + this.$stringTimeParseToUnix(start) + '&end=' + this.$stringTimeParseToUnix(end) + '&step=' + step))
-      }
-      if (this.$refs.pickTime && this.$refs.pickTime.$refs.multipleTime && this.$refs.pickTime.$refs.multipleTime.searchTime.length) { // 判断是否需要添加比较
-        const startTime = bus.timeFormate(this.$refs.pickTime.$refs.multipleTime.searchTime[0], 'YYYY-MM-DD HH:mm:ss')
-        const endTime = bus.timeFormate(this.$refs.pickTime.$refs.multipleTime.searchTime[1], 'YYYY-MM-DD HH:mm:ss')
-        for (const endpoint of this.selectedEndpoints) {
-          axiosArr.push(axios.get('/prom/api/v1/query_range?query=' + encodeURIComponent(endpoint.element) + '&start=' + this.$stringTimeParseToUnix(startTime) + '&end=' + this.$stringTimeParseToUnix(endTime) + '&step=' + step))
-        }
-      }
-      this.legend = []
-      this.chartDatas = []
-      axios.all(axiosArr).then(res => {
-        res.forEach((response, promIndex) => {
-          if (response.status == 200) {
-            if (response.data.status == 'success') {
-              const queryData = response.data.data.result[0]
-              if (queryData) {
-                const chartData = {
-                  type: 'line',
-                  symbol: 'none', // 去掉点
-                  smooth: 0.2,
-                  lineStyle: {
-                    width: 1,
-                    opacity: 0.9
-                  }
-                }
-                chartData.name = queryData.metric.__name__
-                let alias = queryData.metric.__name__
-                delete queryData.metric.__name__
-                chartData.name += '{'
-                alias += '{'
-                Object.keys(queryData.metric).forEach((item, index) => {
-                  const label = item
-                  const value = queryData.metric[label]
-                  chartData.name += label + "='" + value + "',"
-                  if (!this.sameLabels.some((i) => { return i == label })) {
-                    alias += label + "='" + value + "',"
-                  }
-                })
-                chartData.name = chartData.name.charAt(chartData.name.length - 1) === ',' ? chartData.name.substr(0, chartData.name.length - 1) : chartData.name
-                alias = alias.charAt(alias.length - 1) === ',' ? alias.substr(0, alias.length - 1) : alias
-                chartData.name += '}'
-                alias += '}'
-                if (!/.+\{.+\}/.test(alias)) {
-                  alias = alias.substr(0, alias.length - 2)
-                }
-                const legend = {
-                  name: chartData.name,
-                  alias: alias,
-                  // showText:this.formatLegend(chartData.name),
-                  isGray: false
-                }
-                if (promIndex >= this.selectedEndpoints.length) {
-                  legend.name = 'Previous ' + legend.name
-                  chartData.name = legend.name
-                  legend.alias = 'Previous ' + legend.alias
-                }
-                this.legend.push(legend)
-                chartData.data = queryData.values.map((dpsItem, dpsIndex) => {
-                  return [dpsItem[0] * 1000, Number(dpsItem[1])]
-                })
-                this.chartDatas.push(chartData)
-              }
-            } else {
-              this.$message.error(response.data.error)
-              console.error(response.data)
-            }
-          }
-        })
-
-        if (this.$refs.pickTime.$refs.multipleTime && this.$refs.pickTime.$refs.multipleTime.searchTime.length && res.length > this.selectedEndpoints.length) {
-          const minusTime = (new Date(this.searchTime[0]).getTime() - new Date(this.$refs.pickTime.$refs.multipleTime.searchTime[0]).getTime())
-          this.minusTime = minusTime
-          let cutPoint = 0
-          res.forEach((item, index) => {
-            if (index < res.length / 2) {
-              cutPoint += res[index].data.data.result.length
-            }
-          })
-          this.chartDatas.forEach((item, index) => {
-            if (index >= cutPoint) {
-              this.chartDatas[index].data.forEach((item1, index1) => {
-                item1[0] = item1[0] + minusTime
-              })
-            }
-          })
-        }
-        this.$nextTick(() => {
-          if (this.$refs.endpointChart) {
-            this.$refs.endpointChart.setRandomColors(this.chartDatas.length)
-            this.$refs.endpointChart.setLegend(this.legend)
-            this.$refs.endpointChart.modifyOption('tooltip', 'backgroundColor', 'rgba(221,228,237,1)')
-            this.$refs.endpointChart.modifyOption('tooltip', 'textStyle', { color: '#000' })
-            this.$refs.endpointChart.modifyOption('grid', 'top', 30)
-            this.$refs.endpointChart.modifyOption('grid', 'left', 0)
-            this.$refs.endpointChart.modifyOption('grid', 'right', 30)
-            this.$refs.endpointChart.modifyOption('grid', 'bottom', 8)
-            this.$refs.endpointChart.modifyOption('grid', 'containLabel', true)
-            this.$refs.endpointChart.setSeries(this.chartDatas)
-            this.$refs.endpointChart.endLoading()
-          }
-        })
-      })
-    },
-    cellClass (row) { // 给复选框那一列添加 类名为 ‘disabledCheck’
-      if (row.columnIndex === 0) {
-        return 'disabledCheck'
-      }
-    },
-    getPanelData () { // 获取panel数据
-      this.$get('panel?pageNo=1&pageSize=-1').then(response => {
-        if (response.code === 200) {
-          this.panelData = response.data.list
-        }
-      })
-    },
-    tableFilter () {
-      const temp = this
-      const tableDatas = JSON.parse(this.tableDataCopy)
-      this.tableData = tableDatas.filter((item) => {
-        const element = temp.hideSameLabels ? item.simpleElement : item.element
-        return element.indexOf(this.queryExpression) !== -1
-      })
-    },
-    tableFilterHistory (expression) {
-      let metric = ''
-      let labels = []
-      if (/\w*\{.*\}.*/i.test(expression)) {
-        metric = expression.substr(0, expression.indexOf('{'))
-        const labelStr = expression.substr(expression.indexOf('{') + 1, expression.indexOf('}') - expression.indexOf('{') - 1)
-        const labelArr = labelStr.split(',')
-
-        if (labelArr.length > 0) {
-          labels = labelArr.map((item, index) => {
-            const temp = item.split('=')
-            const label = temp[0] ? temp[0] : null
-            const value = temp[1] ? temp[1] : null
-            return label ? { label: label, value: value } : null
-          })
-        }
-      } else {
-        metric = expression
-      }
-      this.tableData = []
-      let sourceData = JSON.parse(JSON.stringify(this.queryData))
-      sourceData = sourceData.filter((item) => {
-        const metricName = item.metric.__name__
-        if (metricName.indexOf(metric) === -1) {
-          return false
-        }
-
-        if (labels.length > 0) {
-          for (const i in labels) {
-            const label = labels[i]
-            if (label && label.label) {
-              const value = item.metric[label.label]
-              let queryVal = label.value
-              if (/^'.+'$/.test(queryVal)) {
-                queryVal = queryVal.substr(1, queryVal.length - 2)
-              }
-              if (!value || value != queryVal) {
-                return false
-              }
-            } else {
-              return true
-            }
-          }
-        }
-
-        return true
-      })
-      for (const i in sourceData) {
-        const item = sourceData[i]
-        // {"metric":{"instance":"192.168.40.126:9100","__name__":"scrape_duration_seconds","module":"node_exporter","project":"kafka","asset":"192.168.40.126","job":"ed_1","dc":"dc5"},"value":[1580782176.522,"0.000560761"]}
-        const metricName = item.metric.__name__
-        let temp = metricName
-        delete item.metric.__name__
-        temp += '{'
-        const hasLabel = true
-        for (const key in item.metric) {
-          const label = key
-          const value = item.metric[label]
-          temp += label + "='" + value + "',"
-        }
-        temp = temp.charAt(temp.length - 1) == ',' ? temp.substr(0, temp.length - 1) : temp
-        temp += '}'
-        if (hasLabel) {
-          const edpQueryData = { element: temp, value: item.value[1], type: (item.metric.type ? item.metric.type : '2') }
-          this.tableData.push(edpQueryData)
-        }
-      }
-    },
-    focusInput () {
-      let classVal = document.getElementById('elementQuery').parentElement.getAttribute('class')
-      classVal = classVal.replace('query-input-inactive', 'query-input-active')
-      document.getElementById('elementQuery').parentElement.setAttribute('class', classVal)
-      this.$refs.elementQuery.focus()
-    },
-    blurInput () {
-      if (!this.queryExpression || this.queryExpression == '') {
-        setTimeout(function () {
-          let classVal = document.getElementById('elementQuery').parentElement.getAttribute('class')
-          classVal = classVal.replace('query-input-active', 'query-input-inactive')
-          document.getElementById('elementQuery').parentElement.setAttribute('class', classVal)
-        }, 100)
-      }
-    },
-    clearInput () {
-      this.$refs.elementQuery.focus()
-    },
-    queryElementTips: async function () {
-      this.elementMetricDatas = []
-      const response = await axios.get('/metric/metadata?endpointId=' + this.currentEndpoint.id)
-      if (response && response.status === 200) {
-        if (response.data.msg === 'success') {
-          this.elementMetricDatas = response.data.data.list
-        }
-      }
-    },
-    getStateContent (row) {
-      if (row) {
-        if (row.state == 1) {
-          return 'up' + '[' + this.formatUpdateTime(row.lastUpdate) + ']'
-        } else {
-          return 'down' + '[' + this.getStateErrorMsg(row) + ']'
-        }
-      }
-    },
-    formatUpdateTime (date) {
-      const time = new Date(date)
-      const hours = time.getHours() > 9 ? time.getHours() : '0' + time.getHours()
-      const minutes = time.getMinutes() > 9 ? time.getMinutes() : '0' + time.getMinutes()
-
-      return hours + ':' + minutes
-    },
-    getStateErrorMsg (row) {
-      const errCodes = [230009, 230010, 230011]
-      if (row) {
-        if (row.state == 0) {
-          if (errCodes.find((item) => { return row.stateInfo.code == item })) {
-            return this.$t('project.endpoint.stateInfo_' + row.stateInfo.code)
-          } else {
-            this.$message.error('state code error')
-            return row.stateInfo.msg
-          }
-        }
-      }
-    }
-  },
-  watch: {
-    obj: {
-      immediate: true,
-      deep: true,
-      handler (n) {
-        if (n) {
-          this.currentEndpoint = JSON.parse(JSON.stringify(n))
-          this.queryEndpoint()
-        }
-      }
-    },
-    queryExpression (n, o) {
-      const temp = this
-      setTimeout(function () {
-        temp.tableFilter()
-      }, 500)
-    }
-  },
-  mounted () {
-    this.getPanelData()
-    setTimeout(() => { this.$refs.endpointQueryTable.setHeight() }, 700)
-  }
-}
-</script>
diff --git a/nezha-fronted/src/components/common/bottomBox/tabs/panelTabNew.vue b/nezha-fronted/src/components/common/bottomBox/tabs/panelTabNew.vue
index d2a8e4836..4b3e4eaea 100644
--- a/nezha-fronted/src/components/common/bottomBox/tabs/panelTabNew.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/panelTabNew.vue
@@ -735,6 +735,7 @@ export default {
     },
     htmlToPdf () {
       const dom = document.getElementsByClassName(this.pdfId)[0]
+      this.htmlTitle = this.obj.name || 'pdf'
       if (dom) {
         // dom = dom.getElementsByClassName('vue-grid-layout')[0]
         this.scrollbarWrap.scrollTop = this.scrollbarWrap.scrollHeight
diff --git a/nezha-fronted/src/components/common/chartUnit.vue b/nezha-fronted/src/components/common/chartUnit.vue
index 78195293a..a6887964b 100644
--- a/nezha-fronted/src/components/common/chartUnit.vue
+++ b/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: {
diff --git a/nezha-fronted/src/components/common/globalSearch/searchItemInfo.vue b/nezha-fronted/src/components/common/globalSearch/searchItemInfo.vue
index 68b4ecef5..0ff58cf73 100644
--- a/nezha-fronted/src/components/common/globalSearch/searchItemInfo.vue
+++ b/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',
diff --git a/nezha-fronted/src/components/common/js/htmlToPdf.js b/nezha-fronted/src/components/common/js/htmlToPdf.js
index 9fab318d8..70c9d8978 100644
--- a/nezha-fronted/src/components/common/js/htmlToPdf.js
+++ b/nezha-fronted/src/components/common/js/htmlToPdf.js
@@ -21,6 +21,7 @@ export default {
       }).then(function (canvas) {
         loading.close()
         document.body.style.height = '100%'
+        document.getElementsByClassName('left-menu')[0].style.height = '100%'
         document.getElementsByTagName('html')[0].style.overflow = 'hidden'
         const contentWidth = canvas.width
         const contentHeight = canvas.height
@@ -53,12 +54,13 @@ export default {
       if (flag) {
         loading = Loading.service({
           lock: true,
+          customClass: 'export-pdf-mask',
           text: this.$t('overall.downloadProgress') + 'pdf...',
-          background: 'rgba(0,500,200,.5)'
+          background: 'rgba(0,0,0,.3)'
         })
       } else {
         if (loading) {
-          loading.close()
+          // loading.close()
           document.body.style.height = '100%'
           document.getElementsByTagName('html')[0].style.overflow = 'hidden'
         }
diff --git a/nezha-fronted/src/components/common/project/L5/CanvasProps.vue b/nezha-fronted/src/components/common/project/L5/CanvasProps.vue
index a227f5220..92c896490 100644
--- a/nezha-fronted/src/components/common/project/L5/CanvasProps.vue
+++ b/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'
diff --git a/nezha-fronted/src/components/common/project/L5/topoTooltip.vue b/nezha-fronted/src/components/common/project/L5/topoTooltip.vue
index ca073408a..ad04ab265 100644
--- a/nezha-fronted/src/components/common/project/L5/topoTooltip.vue
+++ b/nezha-fronted/src/components/common/project/L5/topoTooltip.vue
@@ -32,14 +32,14 @@
 </template>
 
 <script>
-import lineChartBlock from '../../../charts/line-chart-block'
-import chartTable from '../../../charts/chart-table'
+import lineChartBlock from '@/components/chart/chart/line-chart-block'
+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',
diff --git a/nezha-fronted/src/components/common/rightBox/alertRuleBox.vue b/nezha-fronted/src/components/common/rightBox/alertRuleBox.vue
index 6ada1b406..d5be8c2eb 100644
--- a/nezha-fronted/src/components/common/rightBox/alertRuleBox.vue
+++ b/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',
diff --git a/nezha-fronted/src/components/common/rightBox/chart/otherChartConfig.vue b/nezha-fronted/src/components/common/rightBox/chart/otherChartConfig.vue
index 6dac0ec3e..cacde53cc 100644
--- a/nezha-fronted/src/components/common/rightBox/chart/otherChartConfig.vue
+++ b/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],
diff --git a/nezha-fronted/src/components/common/rightBox/chart/publicConfig.js b/nezha-fronted/src/components/common/rightBox/chart/publicConfig.js
index 9c72af763..b8f0db531 100644
--- a/nezha-fronted/src/components/common/rightBox/chart/publicConfig.js
+++ b/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'
diff --git a/nezha-fronted/src/components/common/table/alert/alertMessageTable.vue b/nezha-fronted/src/components/common/table/alert/alertMessageTable.vue
index 3fe1a97b6..87d7a17c4 100644
--- a/nezha-fronted/src/components/common/table/alert/alertMessageTable.vue
+++ b/nezha-fronted/src/components/common/table/alert/alertMessageTable.vue
@@ -140,7 +140,7 @@ import bus from '../../../../libs/bus'
 import axios from 'axios'
 import table from '@/components/common/mixin/table'
 import nzAlertTag from '../../../page/alert/nzAlertTag'
-import chartDataFormat from '../../../charts/chartDataFormat'
+import chartDataFormat from '../../../chart/chartDataFormat'
 import alertRuleInfo from '../../alert/alertRuleInfo'
 import alertLabel from '../../alert/alertLabel'
 import { calcDurationByStringTimeB } from '../../js/tools'
diff --git a/nezha-fronted/src/components/common/table/alert/alertRuleTable.vue b/nezha-fronted/src/components/common/table/alert/alertRuleTable.vue
index ae774d166..0f777806e 100644
--- a/nezha-fronted/src/components/common/table/alert/alertRuleTable.vue
+++ b/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],
diff --git a/nezha-fronted/src/components/common/table/special/endpointQueryTab.vue b/nezha-fronted/src/components/common/table/special/endpointQueryTab.vue
index 4713796a0..5a9fe2e70 100644
--- a/nezha-fronted/src/components/common/table/special/endpointQueryTab.vue
+++ b/nezha-fronted/src/components/common/table/special/endpointQueryTab.vue
@@ -71,41 +71,10 @@
         @showFullscreen="showFullscreen"
       ></panel-chart>
     </el-dialog>
-<!--    <el-dialog class="line-chart-block-modal nz-dialog endpoint-dialog"-->
-<!--               :title="$t('project.endpoint.dialogTitle')"-->
-<!--               :visible.sync="graphShow"-->
-<!--               width="90%"-->
-<!--               height="80%"-->
-<!--               :modal-append-to-body="false"-->
-<!--               id="viewGraphDialog"-->
-<!--               @close="dialogClose">-->
-<!--      <div slot="title">-->
-<!--        {{$t("project.endpoint.dialogTitle")}}-->
-<!--        <div class="float-right panel-calendar dialog-tool" style="display: flex;margin-right: 30px">-->
-<!--          <pick-time :refresh-data-func="queryChartDate" :use-refresh="false" v-model="searchTime" style="height: 28px;" @unitChange="chartUnitChange" id="endpoint-query-full-chart" :show-multiple="true" ref="pickTime"></pick-time>-->
-<!--          <button id="endpoint-query-full-chart-save" v-has="'main_add'" class="nz-btn nz-btn-size-large nz-btn-style-normal" @click="saveChart">{{$t('dashboard.metric.saveChart')}}</button>-->
-<!--        </div>-->
-<!--      </div>-->
-<!--      <chart ref="endpointChart" :unit="chartUnit" :minusTime="minusTime" v-if="graphShow"></chart>-->
-<!--    </el-dialog>-->
     <transition name="right-box">
       <chart-box :chart="chart" :panel-data="panelData" :show-panel="{id: -1, name: '', type: 'endpointQuery'}" @close="rightBox.show = false" @on-create-success="createSuccess" @reload="getPanelData" @reloadOnlyPanel="getPanelData" box-class="save-chart-box" from="project_endpoint_query" ref="addChartModal" v-if="rightBox.show" style="z-index: 2900" :fromEndpoint="true"></chart-box>
     </transition>
     <transition name="right-box">
-      <!--      <chart-box-->
-      <!--        v-if="rightBox.chart.show"-->
-      <!--        ref="addChartModal"-->
-      <!--        :chart="chart"-->
-      <!--        :from="fromRoute.panel"-->
-      <!--        :panel-data="panelData"-->
-      <!--        :show-panel="showPanel"-->
-      <!--        @close="closeChartBox"-->
-      <!--        @reload="panelReload"-->
-      <!--        @reloadOnlyPanel="panelReloadOnlyPanel"-->
-      <!--        @delete-chart="delChart"-->
-      <!--        @on-create-success="createSuccess"-->
-      <!--        @on-delete-success="delChartOk"-->
-      <!--      ></chart-box>-->
       <chart-right-box
         v-if="chartRightBoxShow"
         v-loading="rightBox.loading"
@@ -122,9 +91,7 @@
 </template>
 
 <script>
-import chartBox from '@/components/page/dashboard/chartBox'
 import chartRightBox from '@/components/common/rightBox/chart/chartRightBox'
-import axios from 'axios'
 import bus from '../../../../libs/bus'
 import chart from '@/components/page/dashboard/overview/chart'
 import { sameLabels, fromRoute } from '@/components/common/js/constants'
@@ -135,7 +102,6 @@ import lineData from '@/components/chart/defaultLineData'
 export default {
   name: 'endpointQueryTab',
   components: {
-    chartBox,
     chart,
     metaData,
     panelChart,
diff --git a/nezha-fronted/src/components/page/alert/alertMessage.vue b/nezha-fronted/src/components/page/alert/alertMessage.vue
index 531d52966..5a0d9fe4f 100644
--- a/nezha-fronted/src/components/page/alert/alertMessage.vue
+++ b/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'
diff --git a/nezha-fronted/src/components/page/config/template/chartTemp.vue b/nezha-fronted/src/components/page/config/template/chartTemp.vue
index bdcfaab87..38b5e0239 100644
--- a/nezha-fronted/src/components/page/config/template/chartTemp.vue
+++ b/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,
diff --git a/nezha-fronted/src/components/page/dashboard/chartBox.vue b/nezha-fronted/src/components/page/dashboard/chartBox.vue
deleted file mode 100644
index 49beac118..000000000
--- a/nezha-fronted/src/components/page/dashboard/chartBox.vue
+++ /dev/null
@@ -1,1748 +0,0 @@
-<template>
-  <div v-clickoutside="{obj:editChart, func:clickOutside}" :class="boxClass" class="right-box right-box-chart">
-    <transition v-if="from !== 'chartTemp'" name="right-box">
-      <panel-box v-if="!showPanel.type" ref="panelBox2" :panel="panel" @reload="panelReload"></panel-box>
-    </transition>
-
-    <div class="right-box__header">
-      <div class="header__title" v-if="from !== 'chartTemp'">{{editChart.id ? $t("dashboard.panel.editChartTitle") : $t("dashboard.panel.createChartTitle")}}</div>
-      <div class="header__title" v-if="from === 'chartTemp'">{{editChart.id ? $t("dashboard.panel.editChartTempTitle") : $t("dashboard.panel.createChartTempTitle")}}</div>
-      <div class="header__operation">
-        <span v-cancel="{obj: editChart, func: clickOutside}"><i class="nz-icon nz-icon-close"></i></span>
-      </div>
-    </div>
-
-    <div class="right-box__container">
-      <div class="container__form">
-        <el-form ref="chartForm" :model="editChart" :rules="rules" label-position= "top" label-width="120px">
-          <el-form-item :label='$t("dashboard.panel.chartForm.name")' prop="title">
-            <el-input maxlength="64" show-word-limit size="small" v-model="editChart.name" id="chart-box-title"></el-input>
-          </el-form-item>
-          <el-form-item v-if="showPanel.type !== fromRoute.project && showPanel.type !== fromRoute.asset && showPanel.type !== fromRoute.endpoint && showPanel.type !== fromRoute.model && from!=='chartTemp'" :label="$t('dashboard.panel.title')" prop="panelName">
-            <select-panel ref="selectPanel" :disabled="showPanel.type === 'dashboard'" :filter-panel="filterPanel" :chart-box="true" :panel-lock="true" :panelData="panelData" :placement="'bottom-start'" @selectPanel="selectPanel">
-              <template v-slot:header>
-                <div class="panel-select-header">
-                  <el-input id="chart-box-panelname" v-model="filterPanel" :placeholder="$t('overall.search')" clearable size="small" style="width: 596px"></el-input>
-                </div>
-              </template>
-              <template v-slot:trigger>
-                <el-input placeholder="" readonly="readonly" size="small" v-model="panelName" :disabled="showPanel.type==='dashboard'"></el-input>
-              </template>
-            </select-panel>
-          </el-form-item>
-
-          <div class="form-items--half-width-group">
-            <!-- type -->
-            <el-form-item :label="$t('dashboard.panel.chartForm.type')" class="form-item--half-width" prop="type">
-              <el-select id="chart-box-type" v-model="editChart.type" :disabled="editChart.type==='group'&&editChart.children&&editChart.children.length" placeholder="" popper-class="right-box-select-top prevent-clickoutside" size="small" value-key="chartType" @change="chartTypeChange">
-                <el-option v-for="item in chartTypeList" :key="item.id" :disabled=" item.id==='group' && editChart.isGroup" :label="item.name" :value="item.id">
-                  <span class="panel-dropdown-label-txt" >{{item.name}}</span>
-                </el-option>
-              </el-select>
-            </el-form-item>
-
-            <!--group-->
-            <el-form-item :label="$t('dashboard.panel.chartForm.group')" class="form-item--half-width" prop="group">
-              <el-select id="chart-box-group" v-model="editChart.groupId" :disabled="editChart.type==='group'" clearable placeholder="" popper-class="right-box-select-top prevent-clickoutside" size="small" value-key="chartType">
-                <el-option v-for="item in groupArr" :key="item.id" :label="item.name" :value="item.id">
-                  <span class="panel-dropdown-label-txt" >{{item.name}}</span>
-                </el-option>
-              </el-select>
-            </el-form-item>
-          </div>
-
-          <!--   varType   -->
-          <el-form-item :label="$t('dashboard.panel.chartForm.varType')" v-if="from === 'chartTemp'">
-            <el-select id="chart-box-group" v-model="editChart.varType" :disabled="!!editChart.id" class="right-box__select" popper-class="right-box-select-top prevent-clickoutside" clearable placeholder="" size="small" value-key="chartType">
-              <el-option :key="item.id" :label="item.name" :value="item.id" v-for="item in varTypeArr">
-                <span class="panel-dropdown-label-txt" >{{item.name}}</span>
-              </el-option>
-            </el-select>
-          </el-form-item>
-          <!--   remark   -->
-          <el-form-item :label="$t('overall.remark')">
-            <el-input  maxlength="256" show-word-limit v-model="editChart.remark" :autosize="{ minRows: 1, maxRows: 6}" type="textarea"/>
-          </el-form-item>
-
-          <div class="form__sub-title">{{$t('dashboard.panel.chartForm.option')}}</div>
-          <div class="form-items--half-width-group">
-            <!--width-->
-            <el-form-item :label="$t('dashboard.panel.chartForm.width')" class="form-item--half-width" prop="span">
-              <el-select id="chart-box-span"  v-model="editChart.span" :disabled="editChart.type === 'group'" placeholder="" popper-class="right-box-select-top prevent-clickoutside" size="small" value-key="chartSpan">
-                <el-option v-for="item in spanList" :key="item" :label="'span-' + item" :value="item">
-                  <span class="panel-dropdown-label-txt" > span-{{item}}</span>
-                </el-option>
-              </el-select>
-            </el-form-item>
-
-            <!--height-->
-            <el-form-item :label="$t('dashboard.panel.chartForm.high')" class="form-item--half-width"  prop="height">
-<!--              <el-autocomplete
-                id="chart-box-height"
-                v-model="editChart.height"
-                :disabled="editChart.type === 'group'"
-                :fetch-suggestions="querySearch"
-                placeholder=""
-                popper-class="popper-z-index prevent-clickoutside"
-                size="small"
-                @select="handleSelect">
-                <template slot-scope="{ item }">
-                  <div class="name">{{ item }}</div>
-                </template>
-                <template slot="append">px</template>
-              </el-autocomplete>-->
-
-              <!-- 由px改为span -->
-              <el-select id="chart-box-height"  v-model="editChart.height" :disabled="editChart.type === 'group'" placeholder="" popper-class="right-box-select-top prevent-clickoutside" size="small" value-key="chartSpan">
-                <el-option v-for="item in spanList" :key="item" :label="'span-' + item" :value="item">
-                  <span class="panel-dropdown-label-txt" > span-{{item}}</span>
-                </el-option>
-              </el-select>
-            </el-form-item>
-
-            <!-- unit -->
-            <el-form-item v-show="editChart.type !='text' && editChart.type !=='url'&& editChart.type !=='group'&& editChart.type !=='diagram'" :label="$t('dashboard.panel.chartForm.unit')" class="form-item--half-width" prop="unit">
-              <el-cascader id="chart-box-unit" v-model="editChart.unit" :options="unitOptions" :props="{ expandTrigger: 'hover',emitPath:false }"  :show-all-levels="false" filterable
-                           placeholder=""
-                           popper-class="dc-dropdown right-box-select-top right-public-box-dropdown-top prevent-clickoutside chart-box-unit"
-                           size="small"
-                           style="width: 100%"
-                           @change="unitSelected"
-              >
-              </el-cascader>
-            </el-form-item>
-            <!--Align-->
-            <!--<el-form-item v-if="editChart.type ==='diagram'" :label="$t('dashboard.panel.chartForm.align')" class="form-item&#45;&#45;half-width" prop="unit">
-              <el-select id="chart-box-statistics" v-model="editChart.param.align" placeholder="" popper-class="chart-box-dropdown-mini prevent-clickoutside" size="small" @change="$forceUpdate">
-                <el-option v-for="item in alignList" :key="item.value" :label="item.label" :value="item.value">
-                  <span class="panel-dropdown-label-txt" >{{item.label}}</span>
-                </el-option>
-              </el-select>
-            </el-form-item>-->
-            <!--lock-->
-            <el-form-item v-if="editChart.type ==='diagram'" :label="$t('dashboard.panel.chartForm.lock')" class="form-item--half-width" prop="lock">
-              <el-select id="chart-box-statistics" v-model="editChart.param.lock" placeholder="" popper-class="right-box-select-top prevent-clickoutside" size="small" @change="$forceUpdate()">
-                <el-option v-for="item in lockList" :key="item.value" :label="$t(item.label)" :value="item.value">
-                  <span class="panel-dropdown-label-txt" >{{$t(item.label)}}</span>
-                </el-option>
-              </el-select>
-            </el-form-item>
-
-            <el-form-item class="form-item--half-width" v-if="editChart.type =='url' && isUrl" :label='$t("dashboard.panel.chartForm.url")' :rules="{ required: true,  message: $t('validate.required'), trigger: 'blur' }" prop="param.url">
-              <el-input id="chart-box-url" v-model="editChart.param.url" maxlength="1024" show-word-limit size="small" type="textarea"></el-input>
-            </el-form-item>
-            <!--Default collapse-->
-            <el-form-item class="form-item--half-width" v-if="editChart.type == 'group'" :label='$t("dashboard.panel.chartForm.collapse")' prop="param.collapse">
-              <el-switch id="chart-box-collapse"
-                         v-model="editChart.param.collapse"
-                         :active-value="true"
-                         :inactive-value="false"
-                         active-color="#ee9d3f"
-                         @change="defaultCollapse"
-                         size="small"/>
-            </el-form-item>
-
-            <el-form-item  v-if="editChart.type === 'line' || editChart.type == 'bar' || editChart.type == 'stackArea' || editChart.type == 'table'" :label='"Null value"' class="form-item--half-width"  prop="nullType">
-              <el-select id="chart-box-nullType" v-model="editChart.param.nullType" placeholder="" popper-class="right-box-select-top prevent-clickoutside" size="small" @change="$forceUpdate()">
-                <el-option v-for="item in nullTypeList" :key="item.value" :label="item.label" :value="item.value"></el-option>
-              </el-select>
-            </el-form-item>
-
-            <el-form-item v-if="editChart.type == 'singleStat' || editChart.type == 'pie'|| editChart.type=='table' || editChart.type == 'bar'" :label="$t('dashboard.panel.chartForm.statistics')" class="form-item--half-width" prop="param.statistics">
-              <el-select id="chart-box-statistics" v-model="editChart.param.statistics" placeholder="" popper-class="right-box-select-top prevent-clickoutside" size="small" @change="$forceUpdate()">
-                <el-option v-for="item in statisticsList" :key="item.value" :label="$t(item.label)" :value="item.value">
-                  <span class="panel-dropdown-label-txt" >{{$t(item.label)}}</span>
-                </el-option>
-              </el-select>
-            </el-form-item>
-            <el-form-item class="form-item--half-width" v-if="editChart.type == 'logs'" :label='$t("dashboard.panel.chartForm.limit")' prop="param.limit">
-              <el-select v-model="editChart.param.limit" popper-class="right-box-select-top" size="small">
-                <el-option v-for="option in limitOptions" :key="option" :value="option"></el-option>
-              </el-select>
-            </el-form-item>
-            <el-form-item class="form-item--half-width" v-if="editChart.type == 'logs'" :label='$t("dashboard.panel.chartForm.time")' prop="param.time">
-              <el-switch id="chart-box-time"
-                         v-model="editChart.param.time"
-                         :active-value="true"
-                         :inactive-value="false"
-                         size="small"></el-switch>
-            </el-form-item>
-            <el-form-item class="form-item--half-width" v-if="editChart.type == 'logs'" :label='$t("dashboard.panel.chartForm.descending")' prop="param.descending">
-              <el-switch id="chart-box-descending"
-                         v-model="editChart.param.descending"
-                         :active-value="true"
-                         :inactive-value="false"
-                         size="small"></el-switch>
-            </el-form-item>
-            <el-form-item class="form-item--half-width" v-if="editChart.type == 'logs'" :label='$t("dashboard.panel.chartForm.wrapLines")' prop="param.wrapLines">
-              <el-switch id="chart-box-wrapLines"
-                         v-model="editChart.param.wrapLines"
-                         :active-value="true"
-                         :inactive-value="false"
-                         size="small"></el-switch>
-            </el-form-item>
-          </div>
-
-          <div v-if="editChart.type ==='diagram'" class="form__sub-title">
-            <span>{{$t('dashboard.panel.chartForm.content')}}</span>
-            <span style="cursor: pointer"><i class="nz-icon nz-icon-edit" @click="topologyDialogChange(true)"></i></span>
-          </div>
-          <!--topoData-->
-          <el-form-item v-if="editChart.type ==='diagram'" >
-            <div class="topology-box">
-              <div class="topology-mc"></div>
-              <diagram :topoData="editChart.param.topo" :fromChartBox="true" :topologyIndexF="-1"/>
-            </div>
-          </el-form-item>
-
-          <el-form-item v-if="editChart.type == 'line' || editChart.type == 'bar' || editChart.type == 'stackArea'" :label='$t("dashboard.panel.chartForm.threshold")' class="form-item--half-width"  prop="param.threshold">
-            <el-input id="chart-box-threshold" v-model="editChart.param.threshold" size="small" type="input"></el-input>
-          </el-form-item>
-
-          <div v-if="!isUrl&&!isAlert&& editChart.type != 'text'&& editChart.type != 'group' && editChart.type != 'diagram'" class="form__sub-title">
-            <span>{{$t('alert.config.exprBox')}}</span>
-            <span v-if="!isSingleStat" @click="addExpression">
-              <i class="nz-icon nz-icon-create-square" style="font-weight: normal; font-size: 17px; cursor: pointer;"></i>
-            </span>
-          </div>
-          <div v-if="editChart.type == 'text'" class="form__sub-title">
-            <span>{{$t('dashboard.panel.chartForm.content')}}</span>
-          </div>
-          <div v-if="isAlert" class="form__sub-title">{{$t('dashboard.panel.chartForm.alertParam.param')}}</div>
-
-          <el-row class="element-item element-item__padding" v-if="isAlert">
-            <alert-chart-param @on-enter-complate="getAlertParam" ref="alertParamBox"></alert-chart-param>
-          </el-row>
-          <div style="margin-bottom: 20px">
-            <el-row :key="'ele' + index" class="element-item form-row-item" style="" v-for="index of promqlKeys.length" v-if="!isUrl &&!isAlert && editChart.type != 'text'&& editChart.type != 'group' && editChart.type != 'diagram'">
-              <promql-input
-                :from-father-data="true"
-                :metricOptionsParent="metricOptions"
-                :expression-list="expressions"
-                :id="promqlKeys[index-1]"
-                :index="index-1"
-                :required = 'true'
-                :type="promqlType"
-                :key="promqlKeys[index-1]"
-                :plugins="['metric-selector', 'metric-input', 'remove']"
-                :ref="'promql-'+(index-1)"
-                :showRemove="false"
-                :styleType="2"
-                @change="expressionChange"
-                @removeExpression="removeExpression"
-              ></promql-input>
-              <el-row style="margin-top: 18px">
-                <el-col class="legend-title">
-                  <span class="legend-title__span">{{$t('dashboard.panel.chartForm.legend')}}&nbsp;</span>
-                  <el-popover placement="top" trigger="hover" width="211" popper-class="prevent-clickoutside">
-                    <div :style="{'word-break':language!=='cn'?'keep-all':'break-all'}">{{$t('dashboard.panel.chartForm.legendTip')}}</div>
-                    <i @mouseover="rz" class="nz-icon nz-icon-info-normal" slot="reference" style="font-size: 14px; -webkit-transform:scale(0.75);display:inline-block;"></i>
-                  </el-popover>
-                </el-col>
-                <el-col style="width: calc(100% - 160px);">
-                  <el-input maxlength="512" show-word-limit size="small" type="text" v-model="legends[index-1]" ></el-input>
-                </el-col>
-              </el-row>
-              <div class="nz-icon-minus-position">
-                <span class="nz-icon-minus-medium">
-                  <i @click="removeExpression(index - 1)" class="nz-icon nz-icon-minus"></i>
-                </span>
-                  <span v-if="!isSingleStat" class="nz-icon-copy">
-                  <i @click="copyExpression(index - 1)" class="nz-icon nz-icon-override"></i>
-                </span>
-              </div>
-            </el-row>
-          </div>
-          <!--value mapping start-->
-          <div v-if="editChart.type == 'singleStat'||editChart.type == 'table'" class="form__sub-title">
-          <span>
-            {{$t('dashboard.panel.chartForm.valMapping.name')}}
-            <el-popover  placement="top" trigger="hover" width="275" popper-class="prevent-clickoutside">
-              <div style="white-space: pre-wrap;">{{$t('dashboard.panel.chartForm.valueMappingTip')}}</div>
-              <i @mouseover="rz" class="nz-icon nz-icon-info-normal" slot="reference" style="font-size: 14px; -webkit-transform:scale(0.75);display:inline-block;"></i>
-            </el-popover>
-          </span>
-            <span  class="float-right"  @click="addMapping"><i class="nz-icon nz-icon-create-square" style="font-size: 16px; cursor: pointer;"></i></span>
-          </div>
-          <div v-if="editChart.type == 'singleStat'||editChart.type == 'table'" style="margin-bottom: 20px; width: 100%"></div>
-          <el-form-item v-if="editChart.type == 'singleStat'||editChart.type == 'table'" :label="$t('dashboard.panel.chartForm.type')" prop="span">
-            <el-radio-group id="chart-box-change-valuemapping" v-model="editChart.param.valueMapping.type" class="val-mapping-type" fill="#FA901C" size="small"  text-color="#FA901C" @change="valueMappingChange">
-              <el-radio-button border class="no-fill" label="value">{{$t('dashboard.panel.chartForm.valMapping.value')}}</el-radio-button>
-              <el-radio-button border class="no-fill" label="range">{{$t('dashboard.panel.chartForm.valMapping.range')}}</el-radio-button>
-            </el-radio-group>
-          </el-form-item>
-          <template v-if="(editChart.type == 'singleStat'||editChart.type == 'table')&&editChart.param.valueMapping.type == 'value'" id="chart-box-valueMapping-type1">
-            <div  v-for="(mapping, index) in editChart.param.valueMapping.mapping" :key="index">
-              <el-form-item :label="$t('dashboard.panel.chartForm.valMapping.value')" class="form-item--half-width-other" prop="span" >
-                <el-input v-model="mapping.value" size="small" style="display: inline-block;;" type="input"></el-input>
-              </el-form-item>
-              <el-form-item :label="$t('dashboard.panel.chartForm.valMapping.text')" class="form-item--half-width-other  form-item--half-width-other-two" prop="span">
-                <el-input v-model="mapping.text" size="small" style="display: inline-block;width:calc(100% - 80px);" type="input"></el-input>
-                <!--颜色选择器 start-->
-                <div class="color-show">
-                  <nezhaColor :color-val="mapping.color" :single="false" :value-arr="[{name:'bac', value:showPicker[index].bac, key:'bac'},{name:'text', value:showPicker[index].text, key:'text'}]" @colorChange="(val,key)=>{colorChange(mapping,key,val)}"/>
-                </div>
-                <!--颜色选择器 end-->
-                <span  class="nz-icon-minus-medium" style="margin-left: 7px;padding: 6px" @click="delMapping(index)"><i class="nz-icon nz-icon-minus" style="color: #EC7F66"></i></span>
-              </el-form-item>
-            </div>
-          </template>
-          <template v-if="(editChart.type == 'singleStat'||editChart.type == 'table')&&editChart.param.valueMapping.type == 'range'" id="chart-box-valueMapping-type2">
-            <div v-for="(mapping, index) in editChart.param.valueMapping.mapping" :key="index">
-              <div class="form-item--half-width-other" style="display: inline-block;margin-left: 15px">
-                <el-form-item :label="$t('dashboard.panel.chartForm.valMapping.from')" class="one-third-form-item-left" prop="span" >
-                  <el-input v-model="mapping.from" size="small" type="input"></el-input>
-                </el-form-item>
-                <el-form-item :label="$t('dashboard.panel.chartForm.valMapping.to')" class="one-third-form-item-right" prop="span" >
-                  <el-input v-model="mapping.to" size="small" type="input"></el-input>
-                </el-form-item>
-              </div>
-              <el-form-item :label="$t('dashboard.panel.chartForm.valMapping.text')" class="form-item--half-width-other-two range" prop="span">
-                <el-input v-model="mapping.text" size="small" style="display: inline-block;width:calc(100% - 80px);" type="input" ></el-input>
-                <!--颜色选择器 start-->
-                <div class="color-show">
-                  <nezhaColor :color-val="mapping.color" :single="false" :value-arr="[{name:'bac',value:showPicker[index].bac,key:'bac'},{name:'text',value:showPicker[index].text,key:'text'}]" @colorChange="(val,key)=>{colorChange(mapping,key,val)}"/>
-                </div>
-                <!--颜色选择器 end-->
-                <span class="nz-icon-minus-medium" style="margin-left: 7px;padding: 6px" @click="delMapping(index)"><i class="nz-icon nz-icon-minus"  style="color: #EC7F66"></i></span>
-              </el-form-item>
-            </div>
-          </template>
-
-          <!--value mapping end-->
-          <template v-if="editChart.type == 'line' || editChart.type == 'bar' || editChart.type == 'stackArea'">
-            <div class="form__sub-title" >
-              <span>{{$t('dashboard.panel.chartForm.legendValue')}}</span>
-            </div>
-            <div style="display: flex; margin-bottom: 20px">
-              <span style="margin-left: 15px;"></span>
-              <template v-for="(item, index) in sortedOptionKeys">
-                <div :key="index" style="flex: 1">
-                  <span style="margin-right: 10px;color:rgb(102, 102, 102)">{{item.label}}</span>
-                  <el-switch
-                    :id="'chart-box-legendValue-'+item.label"
-                    v-model="editChart.param.legendValue[item.key]"
-                    active-value="on"
-                    inactive-value="off"
-                  >
-                  </el-switch>
-                </div>
-              </template>
-            </div>
-          </template>
-          <template v-if="editChart.type=='text'&&textShow">
-            <rich-text-editor ref="richTextEditor" :edit-data="editChart.param.text"></rich-text-editor>
-          </template>
-
-        </el-form>
-      </div>
-    </div>
-    <!--底部按钮-->
-    <div class="right-box__footer">
-      <button id="chart-box-esc" v-cancel="{obj:editChart,func:esc}" class="footer__btn footer__btn--light">
-        <span>{{$t('overall.cancel')}}</span>
-      </button>
-      <button v-if="showPanel.type && showPanel.type == 'model'" id="chart-box-Sync" v-has="'main_edit'" class="footer__btn" @click="SyncSave">
-        <span>{{$t('overall.SyncSave')}}</span>
-      </button>
-      <button v-else-if="from!=='chartTemp'" id="chart-box-preview" class="footer__btn" @click="preview" >
-        <span>{{$t('overall.preview')}}</span>
-      </button>
-      <button id="chart-box-save" v-has="'main_add'" :class="{'nz-btn-disabled':prevent_opt.save}" :disabled="prevent_opt.save" class="footer__btn" @click="confirmAdd" >
-        <span>{{$t('overall.save')}}</span>
-      </button>
-    </div>
-    <!--preview -->
-    <chart-preview :panelId="panelId" ref="chartsPreview" :fromEndpoint="fromEndpoint"></chart-preview>
-    <!--topplogy-->
-    <diagram :topoData="editChart.param.topo" class="topology-dialog" v-if="topologyDialog" @change="topologyDialogChange" :topologyIndexF="-2" ref="topologyDialog" :fromTopologyDialog="true"/>
-  </div>
-</template>
-
-<script>
-import bus from '../../../libs/bus'
-import chartDataFormat from '../../charts/chartDataFormat'
-import chartPreview from '../../charts/chartPreview'
-import { getUUID, resetZIndex } from '../../common/js/common'
-import alertChartParam from './alertChartParam'
-import promqlInput from './explore/promqlInput'
-import { nzNumber } from '../../common/js/validate'
-import richTextEditor from '../../charts/richTextEditor'
-import selectPanel from '../../common/popBox/selectPanel'
-import nezhaColor from '../../common/nezhaColor'
-import i18n from '../../common/i18n'
-import { fromRoute } from '@/components/common/js/constants'
-import diagram from '@/components/common/ChartDiagram/diagram'
-import editRigthBox from '../../common/mixin/editRigthBox'
-import promqlInputMixin from '@/components/common/mixin/promqlInput'
-const rz = {
-  methods: {
-    rz (e) {
-      resetZIndex(e)
-    }
-  }
-}
-export default {
-  name: 'chartBox',
-  props: {
-    boxClass: String,
-    panelData: Array,
-    showPanel: Object,
-    chart: Object,
-    from: { type: String },
-    fromEndpoint: {
-      type: Boolean,
-      default: false
-    }
-  },
-  mixins: [rz, editRigthBox, promqlInputMixin],
-  data () {
-    return {
-      fromRoute,
-      language: 3,
-      optionBtn: {
-        save: false
-      },
-      editChart: {
-        name: '',
-        remark: ''
-      },
-      filterPanel: '',
-      statisticsList: this.$CONSTANTS.statisticsList,
-      alignList: this.$CONSTANTS.alignList,
-      lockList: this.$CONSTANTS.lockList,
-      promqlCount: 1,
-      promqlKeys: [],
-      elementIds: [],
-      expressions: [],
-      legends: [],
-      statistics: '',
-      isEdit: false,
-      editInfo: {},
-      isUrl: false,
-      isSingleStat: false,
-      isAlert: false,
-      rules: {
-        panelName: [
-          { required: true, message: this.$t('validate.required'), trigger: 'change' }
-        ],
-        name: [
-          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
-        ],
-        url: [
-          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
-        ],
-        'param.threshold': [
-          { validator: nzNumber, trigger: 'blur' }
-        ],
-        'param.statistics': [
-          { required: true, message: this.$t('validate.required'), trigger: 'change' }
-        ]
-      },
-      groupArr: [],
-      chartTypeList: [
-        {
-          id: 'line',
-          name: this.$t('dashboard.panel.chartForm.typeVal.line.label')
-        },
-        {
-          id: 'stackArea',
-          name: this.$t('dashboard.panel.chartForm.typeVal.stackArea.label')
-        },
-        {
-          id: 'bar',
-          name: this.$t('dashboard.panel.chartForm.typeVal.bar.label')
-        },
-        {
-          id: 'singleStat',
-          name: this.$t('dashboard.panel.chartForm.typeVal.singleStat.label')
-        },
-        {
-          id: 'pie',
-          name: this.$t('dashboard.panel.chartForm.typeVal.pie.label')
-        },
-        {
-          id: 'table',
-          name: this.$t('dashboard.panel.chartForm.typeVal.table.label')
-        },
-        {
-          id: 'alertList',
-          name: this.$t('dashboard.panel.chartForm.typeVal.alertList.label')
-        },
-        {
-          id: 'logs',
-          name: this.$t('dashboard.panel.chartForm.typeVal.logs.label')
-        },
-        {
-          id: 'text',
-          name: this.$t('dashboard.panel.chartForm.typeVal.text.label')
-        },
-        {
-          id: 'url',
-          name: this.$t('dashboard.panel.chartForm.typeVal.url.label')
-        },
-        {
-          id: 'diagram',
-          name: this.$t('dashboard.panel.chartForm.typeVal.diagram.label')
-        },
-        {
-          id: 'group',
-          name: this.$t('dashboard.panel.chartForm.typeVal.group.label')
-        }
-
-      ],
-      elements: [1], // 指标部分 tarNum
-      elementTarget: [], // 本地保存数据
-      alertParams: {},
-      spanList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
-      limitOptions: [100, 200, 500, 1000, 2000],
-      nullTypeList: [{
-        label: 'connected',
-        value: 'connected'
-      }, {
-        label: 'null',
-        value: 'null'
-      }, {
-        label: 'zero',
-        value: 'zero'
-      }],
-      // 是否为编辑已有信息
-      iseditChart: false,
-      // productId: 0,//不需要这个参数，可以删除
-      isInputPanel: false,
-      panelId: 0,
-      panelName: '',
-      selectFirstPanel: false,
-      metricList: [], // metric列表
-      metricCascaderList: [], // metric级联列表
-      metricAllData: new Map(), // 存放所有的project-module-metric-labelValue，避免重复加载
-      deleteIndex: '', // 要删除的指标模块
-      subCount: 0, // subSave保存data到bus计数器
-      panel: {
-        id: '',
-        name: ''
-      },
-      heightSuggestions: ['300', '400', '500', '600'],
-      unitOptions: chartDataFormat.unitOptions(),
-      sortedOptionKeys: [{ key: 'min', label: 'Min' }, { key: 'max', label: 'Max' }, { key: 'avg', label: 'Avg' }, { key: 'last', label: 'Last' }, { key: 'total', label: 'Total' }],
-      textShow: false,
-      showPicker: [],
-      varTypeArr: [
-        { name: 'Asset', id: 1 },
-        { name: 'Endpoint', id: 2 }
-      ],
-      topologyDialog: false,
-      promqlType: 'metric',
-      chartSwitch: false
-      // metricStore: []
-    }
-  },
-  components: {
-    'chart-preview': chartPreview,
-    'alert-chart-param': alertChartParam,
-    'promql-input': promqlInput,
-    'rich-text-editor': richTextEditor,
-    selectPanel,
-    nezhaColor,
-    diagram
-  },
-  mounted () {
-    this.$nextTick(() => {
-      this.initElements()
-    })
-
-    setTimeout(() => {
-      this.textShow = true
-    }, 300)
-  },
-  methods: {
-    clickOutside () {
-      this.esc(false)
-    },
-    selectPanel (panel) {
-      this.panelName = panel.name
-      this.panelId = panel.id
-      this.editChart.groupId = ''
-      this.$get('visual/panel/chart?panelId=' + this.panelId + '&pageSize=-1').then(response => {
-        if (response.code === 200) {
-          this.groupArr = []
-          response.data.list.forEach((item, index) => {
-            if (item.type === 'group') {
-              this.groupArr.push({ id: item.id, name: item.name })
-            }
-          })
-        }
-      })
-    },
-    toAddPanel () {
-      this.$refs.panelBox2.show(true)
-      this.panel = {
-        id: '',
-        name: ''
-      }
-      this.$refs.panelBox2.setTitle(this.$t('dashboard.panel.createPanelTitle'))
-    },
-    panelReload (panelName) { // 刷新panel下拉框
-      if (panelName) {
-        this.panelName = panelName
-      }
-      this.$emit('reloadOnlyPanel')
-    },
-    deletePanel (panel) {
-      this.$confirm(this.$t('tip.confirmDelete'), {
-        confirmButtonText: this.$t('tip.yes'),
-        cancelButtonText: this.$t('tip.no'),
-        type: 'warning'
-      }).then(() => {
-        this.$delete('visual/panel?ids=' + panel.id).then(response => {
-          if (response.code === 200) {
-            this.$message({ duration: 2000, type: 'success', message: this.$t('tip.deleteSuccess') })
-            if (this.panelId == panel.id) {
-              this.selectFirstPanel = true
-              this.$emit('reload', true)
-            } else {
-              this.$emit('reload')
-            }
-          } else {
-            this.$message.error(response.msg)
-          }
-        })
-      })
-    },
-    editPanel (panel) {
-      this.$refs.panelBox2.show(true)
-      this.panel = Object.assign({}, panel)
-      this.$refs.panelBox2.setTitle(this.$t('dashboard.panel.editPanelTitle'))
-    },
-    setUnit (unit) {
-      this.$set(this.editChart, 'unit', Number.parseInt(unit))
-    },
-    expressionChange: function () {
-      if (this.expressions[0]) {
-        this.editChart.elements = []
-        this.expressions.forEach((expr, i) => {
-          this.editChart.elements.push({ id: this.elementIds[i], expression: expr, type: 'expert', legend: this.legends[i] })
-        })
-      } else {
-        this.editChart.elements = []
-      }
-    },
-    addExpression () {
-      this.expressions.push('')
-      this.legends.push('')
-      this.promqlKeys.push(getUUID())
-      this.elementIds.push('')
-      this.promqlCount++
-    },
-    removeExpression (index) {
-      if (this.promqlCount > 1) {
-        this.expressions.splice(index, 1)
-        this.legends.splice(index, 1)
-        this.promqlKeys.splice(index, 1)
-        this.elementIds.splice(index, 1)
-        this.promqlCount--
-        this.$nextTick(() => {
-          this.expressions.forEach((ex, index) => {
-            if (ex) {
-              this.$refs[`promql-${index}`][0].metricChange(ex)
-            }
-          })
-        })
-      }
-    },
-    copyExpression (index) {
-      this.expressions.push(this.expressions[index])
-      this.legends.push(this.legends[index])
-      this.promqlKeys.push(getUUID())
-      this.elementIds.push('')
-      this.promqlCount++
-      this.$nextTick(() => {
-        this.expressions.forEach((ex, index) => {
-          if (ex) {
-            this.$refs[`promql-${index}`][0].metricChange(ex)
-          }
-        })
-      })
-    },
-    defaultCollapse (val) {
-      this.chartSwitch = val
-    },
-    save () {
-      this.$refs.chartForm.validate((valid) => {
-        if (valid) {
-          if (this.editChart.id) { // 修改
-            this.editChart.param.collapse = this.chartSwitch
-            this.$put('visual/panel/chart', this.editChart).then(response => {
-              if (response.code === 200) {
-                this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
-                this.esc(true)
-              } else {
-                this.$message.error(response.msg)
-              }
-            })
-          } else { // 新增
-            this.$post('visual/panel/chart', this.editChart).then(response => {
-              if (response.code === 200) {
-                this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
-                this.esc(true)
-              } else {
-                this.$message.error(response.msg)
-              }
-            })
-          }
-        } else {
-          console.error('error submit!!')
-          return false
-        }
-      })
-    },
-    del () {
-      this.$emit('delete-chart', this.editChart)
-    },
-    // ----------------------------------
-
-    /* 关闭弹框 */
-    esc (refresh) {
-      this.$emit('close', refresh)
-    },
-
-    /* metric部分相关方法--begin */
-    // 增加指标,tarNum
-    addTarget () {
-      this.elements.push(1)
-    },
-    // 删除指标,第一步, 新方法
-    deleteTarget (index) {
-      // alert('box第一步，循环所有的metric，为什么要循环？？');
-      this.deleteIndex = index
-      // alert('box第一步，循环所有的metric，循环前metric,循环次数='+this.$refs.chartTag.length);
-      this.$refs.chartTag.forEach((item) => {
-        // 子组件保存内容到bus
-        item.subSave()
-      })
-    },
-    // subSave保存成功后回调,第二步
-    subOk () {
-      // 每个模块均有返回,当全部模块返回完成时,将sub计数器重置
-      // alert('box第二步，subCount和元素个数一样了，就从deleteIndex开始删除一个元素，this.subCount='+this.subCount);
-      this.subCount += 1
-      if (this.subCount === this.elements.length) {
-        this.subCount = 0
-        // 保存完成,进行删除操作
-        // ('box第二步，deleteIndex='+this.deleteIndex+'=开始删除一个元素')
-        this.elements.splice(this.deleteIndex, 1)
-        this.elementTarget.splice(this.deleteIndex, 1)// 没有作用，此处是[]
-        bus.chartAddInfo.metricTarget.splice(this.deleteIndex, 1)
-
-        this.$nextTick(() => {
-          this.$refs.chartTag.forEach((item, index) => {
-            item.setSubdata(index) // 将数据从bus重新赋值
-          })
-        })
-      }
-    },
-    // 格式化tag为字符串表达式
-    /*
-      tagsToString(metric,arr) {
-        let str = metric;
-        let sepStr = '';
-        arr.forEach((item, index) => {
-          if (index === 0) {
-            str +="{"
-            if(item.value.length===1){
-              str +=  `${item.name}='${item.value.join('|')}'`;
-              sepStr = ',';
-            }else if(item.value.length>1){
-              str +=  `${item.name}=~'${item.value.join('|')}'`;
-              sepStr = ',';
-            }
-          } else {
-            if(item.value.length===1){
-              str += sepStr+`${item.name}='${item.value.join('|')}'`;
-              sepStr = ',';
-            }else if(item.value.length>1){
-              str += sepStr+`${item.name}=~'${item.value.join('|')}'`;
-              sepStr = ',';
-            }
-          }
-        });
-        if(str.indexOf('{')>-1){
-          str +="}";
-        }
-        if(str.endsWith('{}')){
-          str = str.substring(0,str.indexOf('{'));
-        }
-        return str;
-      },
-       */
-    autocompleteExist (string) {
-      let result = false
-      for (let i = 0; i < this.panelData.length; i++) {
-        if (this.panelData[i].name.toLowerCase() == string.toLowerCase()) {
-          result = this.panelData[i].id
-          break
-        }
-      }
-      return result
-    },
-    // 新建图表
-    addCharts (params) {
-      // 先处理panel
-      /* let panelPromise=new Promise(resolve => {
-          if (this.panelId) {
-            panelId = this.panelId;
-            panel=this.panelData.find(p => p.id === this.panelId);
-            resolve()
-          } else if (this.showPanel && this.showPanel.type != "dashboard" && this.showPanel.type != 'explore'&& this.showPanel.type != 'endpointQuery') {
-            panelId = this.panelData[0].id;
-            panel = this.panelData[0]
-            resolve()
-          } else {
-            panelId = this.autocompleteExist(this.editChart.panelName);
-            if (!panelId) {
-              this.$post('panel', {name: this.editChart.panelName}).then(response => {
-                if (response.code === 200) {
-                  this.$emit("reloadOnlyPanel");
-                  panel = response.data.panel
-                  panelId=panel.id;
-
-                  resolve()
-                } else {
-                  if(response.msg){
-                    this.$message.error(response.msg);
-                  }else {
-                    this.$message.error(response);
-                  }
-                }
-              });
-            }
-          }
-        }); */
-
-      // panelPromise.then(()=>{
-      if (this.panelId || this.from === 'chartTemp') {
-        if (this.from === 'chartTemp') {
-          this.panelId = 0
-        }
-        const chartParams = params || this.editChart
-        chartParams.panelId = this.panelId
-        if (!chartParams.groupId) {
-          chartParams.groupId = 0
-        }
-        delete chartParams.panel
-        delete chartParams.children
-        if (chartParams.elements) {
-          chartParams.elements.forEach(item => {
-            delete item.id
-          })
-        }
-        this.$post('visual/panel/chart', chartParams).then(response => {
-          if (response.code === 200) {
-            this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
-            // this.$refs.chartForm.resetFields()// 清空表单
-            this.$emit('on-create-success', 'create', response.data, chartParams, { id: this.panelId, name: this.panelName })
-            this.esc(true)
-          } else {
-            if (response.msg) {
-              this.$message.error(response.msg)
-            } else {
-              this.$message.error(response)
-            }
-          }
-          this.prevent_opt.save = false
-        })
-      }
-      // })
-    },
-    // 更新图表
-    updateCharts (params) {
-      let panelId = this.panelId ? this.panelId : this.chart.panelId
-      if (this.from === 'chartTemp') {
-        panelId = 0
-      }
-      const chartParams = params || this.editChart
-      chartParams.panelId = panelId
-      if (!chartParams.groupId) {
-        chartParams.groupId = 0
-      }
-      delete chartParams.panel
-      delete chartParams.children
-      this.$put('visual/panel/chart', chartParams).then(response2 => {
-        if (response2.code === 200) {
-          this.esc(true)
-          this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
-          // this.$refs.chartForm.resetFields();//清空表单
-          this.$emit('on-create-success', 'update', response2.data, chartParams)
-        } else {
-          if (response2.msg) {
-            this.$message.error(response2.msg)
-          } else {
-            this.$message.error(response2)
-          }
-        }
-        this.prevent_opt.save = false
-      })
-    },
-    // 获取每个tag组件内部校验后数据,点击生成图表时触发
-    getTarget (target, pointer, optType) {
-      this.elementTarget.push(target)
-      if (this.elementTarget.length === this.elements.length) {
-        this.$refs.chartForm.validate((valid) => {
-          const params = {
-            // productId: this.productId,
-            // panelId: this.panelId,
-            name: this.editChart.name, // this.editChart
-            span: this.editChart.span,
-            height: this.editChart.height,
-            type: this.editChart.type,
-            unit: this.editChart.unit,
-            param: {
-
-            },
-            sync: this.editChart.sync,
-            groupId: this.editChart.groupId,
-            varType: this.editChart.varType
-          }
-          if (this.editChart.type === 'singleStat' || this.editChart.type === 'pie' || this.editChart.type === 'bar') {
-            // params.param.statistics=this.statistics;
-          } else {
-            delete params.param.statistics
-          }
-          if (this.editChart.type === 'line' || this.editChart.type === 'bar' || this.editChart.type === 'stackArea') {
-            params.param.threshold = this.editChart.param.threshold
-            params.param.nullType = this.editChart.param.nullType
-          } else {
-            delete params.param.threshold
-          }
-          // 生成指标数组
-          const elements = []
-          this.elementTarget.forEach((elem, index) => {
-            if (elem.type === 'normal') {
-              const metricStr = bus.tagsToString(elem.metric, elem.selectedTagList)
-              elements.push({
-                // id:index+1,
-                // metric: elem.metric,//指标名称
-                expression: metricStr, // 指标对应Label及Value组成的表达式字符串
-                type: elem.type, // 指标类型
-                legend: elem.legend// 配置的legend
-              })
-            } else if (elem.type === 'expert') {
-              elements.push({
-                // id:index+1,
-                // metric: elem.metric,//指标名称
-                expression: elem.expression, // 指标对应Label及Value组成的表达式字符串
-                type: elem.type, // 指标类型
-                legend: elem.legend// 配置的legend
-              })
-            }
-          })
-          params.elements = elements
-          if (valid) {
-            if (optType === 'preview') {
-              if (this.iseditChart) {
-                params.id = this.editChart.id
-              }
-              this.$refs.chartsPreview.show(params)
-            } else {
-              if (this.iseditChart) {
-                params.id = this.editChart.id
-                this.updateCharts(params)
-              } else {
-                this.addCharts(params)
-              }
-            }
-          }
-        })
-      }
-    },
-    getAlertParam: function (param, opType) {
-      this.$refs.chartForm.validate((valid) => {
-        const params = {
-          name: this.editChart.name, // this.editChart
-          span: this.editChart.span,
-          height: this.editChart.height,
-          type: this.editChart.type,
-          unit: this.editChart.unit,
-          param: param,
-          sync: this.editChart.sync,
-          remark: this.editChart.remark,
-          groupId: this.editChart.groupId,
-          varType: this.editChart.varType
-        }
-        if (valid) {
-          if (opType === 'preview') {
-            if (this.iseditChart) {
-              params.id = this.editChart.id
-            }
-            this.$refs.chartsPreview.show(params)
-          } else {
-            if (this.iseditChart) {
-              params.id = this.editChart.id
-              this.updateCharts(params)
-            } else {
-              this.addCharts(params)
-            }
-          }
-        }
-      })
-    },
-    SyncSave () {
-      this.editChart.sync = 1
-      this.confirmAdd()
-    },
-    confirmAdd () {
-      this.$refs.chartForm.validate((valid) => {
-        if (valid) {
-          this.prevent_opt.save = true
-          this.elementTarget = [] // 初始化清空参数
-          if (this.editChart.type !== 'url' && this.editChart.type != 'text') {
-            /* if(this.editChart.type == 'alertList'){
-                this.$refs.alertParamBox.saveParam();
-              }else{
-                this.$refs.chartTag.forEach((item, index) => {//循环指标列表
-                  // 触发每个tag组件内部进行校验
-                  item.saveTarget(index);
-                });
-              } */
-            if (this.editChart.type == 'alertList') {
-              this.$refs.alertParamBox.saveParam()
-              return
-            }
-            if (this.editChart.type == 'singleStat' || this.editChart.type == 'pie' || this.editChart.type == 'table' || this.editChart.type == 'bar') {
-              // this.$set(this.editChart.param, "statistics", this.statistics);
-            } else {
-              delete this.editChart.param.statistics
-            }
-            if (this.expressions[0]) {
-              this.editChart.elements = []
-              this.expressions.forEach((expr, i) => {
-                this.editChart.elements.push({ id: this.elementIds[i], expression: expr, type: 'expert', legend: this.legends[i] })
-              })
-            } else {
-              this.editChart.elements = []
-            }
-            if (this.editChart.id) {
-              this.updateCharts()
-            } else {
-              this.addCharts()
-            }
-          } else {
-            if (this.editChart.type == 'url') {
-              this.$refs.chartForm.validate((valid) => {
-                const params = {
-                  name: this.editChart.name, // this.editChart
-                  span: this.editChart.span,
-                  height: this.editChart.height,
-                  type: this.editChart.type,
-                  unit: this.editChart.unit,
-                  param: {
-                    url: this.editChart.param.url
-                  },
-                  sync: this.editChart.sync,
-                  remark: this.editChart.remark,
-                  groupId: this.editChart.groupId,
-                  varType: this.editChart.varType
-                }
-
-                if (valid) {
-                  params.elements = []
-                  if (this.iseditChart) {
-                    params.id = this.editChart.id
-                    this.updateCharts(params)
-                  } else {
-                    this.addCharts(params)
-                  }
-                }
-              })
-            } else {
-              this.$refs.chartForm.validate((valid) => {
-                const text = this.$refs.richTextEditor.getContent()
-                if (!text) {
-                  valid = false
-                }
-                const params = {
-                  name: this.editChart.name, // this.editChart
-                  span: this.editChart.span,
-                  height: this.editChart.height,
-                  type: this.editChart.type,
-                  param: {
-                    text: text
-                  },
-                  sync: this.editChart.sync,
-                  remark: this.editChart.remark,
-                  groupId: this.editChart.groupId,
-                  varType: this.editChart.varType
-                }
-
-                if (valid) {
-                  params.elements = []
-                  if (this.iseditChart) {
-                    params.id = this.editChart.id
-                    this.updateCharts(params)
-                  } else {
-                    this.addCharts(params)
-                  }
-                }
-              })
-            }
-          }
-        }
-      })
-    },
-    // 获取metric列表
-    getSuggestMetric () {
-      // this.$get('/prom/api/v1/label/__name__/values').then(response => {
-      this.$get('monitor/module?pageSize=-1').then(response => {
-        if (response.code === 200) {
-          this.metricList = response.data.list
-          const cascaderMap = new Map()
-          this.metricList.forEach((item, index) => {
-            const projectName = item.project.name
-            const moduleName = item.name
-            const childOption = {
-              value: moduleName,
-              label: moduleName,
-              children: []
-            }
-            if (cascaderMap.has(projectName)) {
-              cascaderMap.get(projectName).push(childOption)
-            } else {
-              const childArr = []
-              childArr.push(childOption)
-              cascaderMap.set(projectName, childArr)
-            }
-
-            // 缓存全局数据
-            const moduleItem = {
-              name: moduleName,
-              metricMap: new Map()
-            }
-            if (this.metricAllData.has(projectName)) {
-              this.metricAllData.get(projectName).push(moduleItem)
-            } else {
-              const moduleList = []
-              moduleList.push(moduleItem)
-              this.metricAllData.set(projectName, moduleList)
-            }
-          })
-          const metricCascaderArr = []
-          cascaderMap.forEach(function (value, index) {
-            const option = {
-              value: index + '_par',
-              label: index,
-              children: value
-            }
-            metricCascaderArr.push(option)
-          })
-
-          this.metricCascaderList = metricCascaderArr
-        } else {
-          this.metricList = []
-          this.metricCascaderList = []
-        }
-      })
-    },
-    // 创建打开
-    createData (panelId, elementInfo, unit) {
-      if (panelId == -1) {
-        const p = this.panelData[0]
-        this.editChart.panelName = p.name
-      } else {
-        this.panelId = panelId
-      }
-      if (elementInfo) {
-        if (elementInfo.elements.length > 1) {
-          this.$nextTick(() => {
-            this.elements = []
-            elementInfo.elements.forEach((item, index) => {
-              this.elements.push(index)
-            })
-            const dSet = this.$refs.chartTag
-            this.$nextTick(() => {
-              dSet.forEach((item, index) => {
-                item.setMdata(elementInfo.elements[index])
-              })
-            })
-          })
-        } else {
-          this.$nextTick(() => {
-            this.$refs.chartTag[0].setMdata(elementInfo.elements[0])
-          })
-        }
-      }
-      this.iseditChart = false
-      this.initInfo(unit) // 初始化图表信息
-      // this.editChartModal = true;//????控制弹出框显示和隐藏的，不需要了
-      this.initOpen() // 获取metric, productId数据
-    },
-    setIsUrl () {
-      this.isUrl = true
-      this.isSingleStat = false
-      this.isAlert = false
-    },
-    setIsSingleStat () {
-      this.isUrl = false
-      this.isSingleStat = true
-      this.isAlert = false
-    },
-    setIsAlertList () {
-      this.isAlert = true
-      this.isUrl = false
-      this.isSingleStat = false
-    },
-    setIsOtherChart () {
-      this.isSingleStat = false
-      this.isUrl = false
-      this.isAlert = false
-    },
-    setIsGroup () {
-      this.isSingleStat = false
-      this.isUrl = false
-      this.isAlert = false
-    },
-    // 编辑chart时使用, set_tdata
-    editData (data, panelId) {
-      if (!panelId) {
-        this.panelId = 0
-      } else {
-        this.panelId = panelId
-      }
-      if (data.id) {
-        this.iseditChart = true
-      }
-      this.editInfo = data
-      // 图表信息获取
-      this.editChart.id = data.id
-      this.editChart.name = data.name
-      this.editChart.span = data.span
-      this.editChart.height = data.height
-      this.editChart.type = data.type
-      this.editChart.unit = data.unit
-      this.editChart.remark = data.remark
-      this.editChart.elements = data.elements
-      if (this.editChart.type === 'url') {
-        this.editChart.param.url = data.param.url
-        this.setIsUrl()
-        // this.elements = [1];
-      } else if (this.editChart.type === 'table') {
-        this.statisticsList = JSON.parse(JSON.stringify(this.$CONSTANTS.statisticsList))
-        this.statisticsList.push({ value: 'null', label: i18n.t('dashboard.panel.chartForm.statisticsVal.null') })
-      } else if (this.editChart.type === 'alertList') {
-        this.editChart.param = data.param
-        this.setIsAlertList()
-        this.$nextTick(() => {
-          this.$refs.alertParamBox.setData(data)
-        })
-        // this.elements=[1];
-      } else if (this.editChart.type === 'singleStat') {
-        this.setIsSingleStat()
-      } else if (this.editChart.type === 'group') {
-        this.setIsGroup()
-      } else {
-        if ((this.editChart.type === 'line' || this.editChart.type === 'bar' || this.editChart.type === 'stackArea' || this.editChart.type === 'singleStat') && data.param) {
-          this.editChart.param.threshold = data.param.threshold
-          this.editChart.param.statistics = this.statistics = data.param.statistics
-          if (this.editChart.type === 'bar') {
-            this.statisticsList = JSON.parse(JSON.stringify(this.$CONSTANTS.statisticsList))
-            this.statisticsList.push({ value: 'null', label: i18n.t('dashboard.panel.chartForm.statisticsVal.null') })
-          }
-        } else {
-          this.editChart.param.threshold = ''
-        }
-        if ((this.editChart.type === 'line' || this.editChart.type === 'bar' || this.editChart.type === 'stackArea') && data.param) {
-          this.editChart.param.nullType = data.param.nullType
-        }
-        this.setIsOtherChart()
-        // this.getSuggestMetric();//获得指标列表
-        // 指标
-        /* this.elements = [];
-          bus.chartAddInfo.metricTarget = [];
-          data.elements.forEach((item, index) => {
-            this.elements.push(index);
-          });
-          this.$nextTick(() => {
-            if(this.editChart.type==='alertList'){
-              this.setIsAlertList();
-              this.$nextTick(()=>{
-                this.$refs.alertParamBox.setData(data);
-              })
-            }else{
-              const cSet = this.$refs.chartTag;
-              // 派发charttag数据
-              cSet.forEach((item, index) => {
-                item.setMdata(data.elements[index]);
-              });
-            }
-          }); */
-      }
-    },
-
-    // 初始化信息
-    initInfo (unit) {
-      this.editChart.name = ''
-      this.editChart.type = 'line'
-      this.editChart.span = 12
-      this.editChart.height = 4
-      this.editChart.unit = unit || 2
-      this.editChart.remark = ''
-      this.editChart.groupId = this.editChart.groupId || ''
-      const param = {}
-      param.last = 0
-      param.url = ''
-      param.threshold = ''
-      param.valueMapping = { type: 'text', mapping: [{ value: '', text: '', color: { bac: '#fff', text: '#000' } }] }
-      param.legendValue = { min: 'off', max: 'off', avg: 'off', last: 'off', total: 'off' }
-      param.nullType = 'null'
-      this.$set(this.editChart, 'param', param)
-      this.elements = [1]
-      this.elementTarget = []
-      bus.chartAddInfo.metricTarget = []
-      this.setIsOtherChart()
-    },
-    // 创建时打开,用于清空chart-tag数据
-    initOpen () {
-      // bus.$emit('clear_history');
-      /*  项目不需要produce
-        if (this.$route.params.productId) {
-          this.productId = parseInt(this.$route.params.productId, 10);
-        }
-        */
-      // this.getSuggestMetric();
-    },
-
-    /* metric部分相关方法--end */
-    querySearch (queryString, cb) {
-      const suggestions = this.heightSuggestions
-      const results = queryString && (suggestions.includes(queryString) || suggestions.filter(this.createFilter(queryString)).length > 0) ? suggestions : []
-      cb(results)
-    },
-    createFilter (queryString) {
-      return (suggestion) => {
-        return (suggestion.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
-      }
-    },
-    handleSelect: function (item) {
-      this.editChart.height = item
-    },
-    unitSelected: function (value) {
-      // this.editChart.unit=value[value.length-1];
-    },
-    chartTypeChange () {
-      const chartType = this.editChart.type
-      // this.editChart.param.url = ''
-      this.editChart.height = 4
-      this.promqlType = 'metric'
-      if (chartType === 'url') {
-        this.setIsUrl()
-        /* if(this.$refs.chartTag){
-            this.$refs.chartTag.forEach((item, index) => {
-              item.setNotSingleStat();
-            });
-          } */
-      } else if (chartType === 'alertList') {
-        this.setIsAlertList()
-      } else if (chartType === 'singleStat' || chartType === 'pie') {
-        if (chartType == 'singleStat') {
-          this.setIsSingleStat()
-          this.resetElements()
-        }
-        this.editChart.param = {
-          statistics: 'last',
-          valueMapping: {
-            type: 'value',
-            mapping: [{ text: '', value: '', color: { bac: '#fff', text: '#000' } }]
-          }
-        }
-        this.showPicker = [{ bac: false, text: false }]
-      } else if (chartType === 'group') {
-        this.editChart.span = 12
-        this.editChart.height = 6
-        this.setIsGroup()
-      } else if (chartType === 'diagram') {
-        this.editChart.param = {
-          lock: 0,
-          align: 'center',
-          topo: {}
-        }
-      } else {
-        this.setIsOtherChart()
-        if (chartType === 'bar' || chartType === 'line' || chartType === 'stackArea') {
-          this.editChart.param = { nullType: 'null', threshold: '', legendValue: { min: 'off', max: 'off', avg: 'off', last: 'off', total: 'off' } }
-          if (chartType === 'bar') {
-            this.editChart.param = { statistics: 'last', nullType: 'null', threshold: '', legendValue: { min: 'off', max: 'off', avg: 'off', last: 'off', total: 'off' } }
-            this.statisticsList = JSON.parse(JSON.stringify(this.$CONSTANTS.statisticsList))
-            this.statisticsList.push({ value: 'null', label: i18n.t('dashboard.panel.chartForm.statisticsVal.null') })
-          }
-        } else if (chartType == 'table') {
-          this.$set(this.editChart.param, 'last', 0)
-          this.editChart.param = {
-            statistics: 'last',
-            nullType: 'null',
-            valueMapping: {
-              type: 'value',
-              mapping: [{ text: '', value: '', color: { bac: '#fff', text: '#000' } }]
-            }
-          }
-          this.showPicker = [{ bac: false, text: false }]
-          this.statisticsList = JSON.parse(JSON.stringify(this.$CONSTANTS.statisticsList))
-          this.statisticsList.push({ value: 'null', label: i18n.t('dashboard.panel.chartForm.statisticsVal.null') })
-        } else if (chartType == 'logs') {
-          this.promqlType = 'log'
-          this.editChart.param = {
-            time: true,
-            descending: true,
-            wrapLines: true,
-            limit: 100
-          }
-        }
-        /* if(this.$refs.chartTag){
-            this.$refs.chartTag.forEach((item, index) => {
-              item.setNotSingleStat();
-            });
-          } */
-      }
-    },
-    resetElements () {
-      this.promqlKeys = ['']
-      this.expressions = ['']
-      this.legends = []
-      this.elementIds = []
-    },
-
-    // preview -start
-    // 预览图表
-    preview () {
-      // 验证图表数据是否合法？？，合法了再显示预览窗口
-      this.elementTarget = [] // 初始化清空参数
-      this.alertParams = {}
-      if (this.editChart.type !== 'url' && this.editChart.type !== 'text') {
-        if (this.editChart.type == 'alertList') {
-          this.$refs.alertParamBox.saveParam('preview')
-        } else {
-          /* this.$refs.chartTag.forEach((item, index) => {//循环指标列表
-              // 触发每个tag组件内部进行校验
-              item.saveTarget(index,'preview');
-            }); */
-          this.$refs.chartForm.validate((valid) => {
-            let params = {
-              // productId: this.productId,
-              // panelId: this.panelId,
-              name: this.editChart.name, // this.editChart
-              span: this.editChart.span,
-              height: this.editChart.height,
-              type: this.editChart.type,
-              unit: this.editChart.unit,
-              param: this.editChart.param,
-              sync: this.editChart.sync,
-              remark: this.editChart.remark,
-              groupId: this.editChart.groupId,
-              varType: this.editChart.varType
-            }
-            params = JSON.parse(JSON.stringify(params))
-            if (this.editChart.type === 'singleStat' || this.editChart.type === 'table') {
-              // params.param.statistics=this.statistics;
-              params.param.valueMapping = this.editChart.param.valueMapping
-            }
-            if (this.editChart.type != 'singleStat' && this.editChart.type != 'pie' && this.editChart.type != 'table') {
-              delete params.param.statistics
-            }
-            if (this.editChart.type === 'bar' && this.editChart.param.statistics && this.editChart.param.statistics !== 'null') {
-              params.param.statistics = this.editChart.param.statistics
-            }
-            if (this.editChart.type === 'line' || this.editChart.type === 'bar' || this.editChart.type === 'stackArea' || this.editChart.type === 'table') {
-              params.param.threshold = this.editChart.param.threshold
-              if (this.editChart.type === 'table') {
-                delete params.param.threshold
-                params.param.valueMapping = this.editChart.param.valueMapping
-              }
-              params.param.nullType = this.editChart.param.nullType
-              params.param.legendValue = this.editChart.param.legendValue
-            } else {
-              delete params.param.threshold
-              delete params.param.nullType
-            }
-            // 生成指标数组
-            const elements = []
-            this.expressions.forEach((expr, index) => {
-              elements.push({
-                expression: expr,
-                type: 'expert',
-                legend: this.legends[index]
-              })
-            })
-            params.elements = elements
-            if (valid) {
-              this.$refs.chartsPreview.show(params)
-            }
-          })
-        }
-      } else if (this.editChart.type == 'url') {
-        this.$refs.chartForm.validate((valid) => {
-          const params = {
-            name: this.editChart.name, // this.editChart
-            span: this.editChart.span,
-            height: this.editChart.height,
-            type: this.editChart.type,
-            unit: this.editChart.unit,
-            param: {
-              url: this.editChart.param.url
-            },
-            remark: this.editChart.remark,
-            groupId: this.editChart.groupId,
-            varType: this.editChart.varType
-          }
-
-          if (valid) {
-            if (this.iseditChart) {
-              params.id = this.editChart.id
-            }
-            this.$refs.chartsPreview.show(params)
-          }
-        })
-      } else {
-        this.$refs.chartForm.validate((valid) => {
-          const text = this.$refs.richTextEditor.getContent()
-          if (!text) {
-            valid = false
-          }
-          const params = {
-            name: this.editChart.name, // this.editChart
-            span: this.editChart.span,
-            height: this.editChart.height,
-            type: this.editChart.type,
-            unit: this.editChart.unit,
-            param: {
-              text: text
-            },
-            remark: this.editChart.remark,
-            groupId: this.editChart.groupId,
-            varType: this.editChart.varType
-          }
-
-          if (valid) {
-            if (this.iseditChart) {
-              params.id = this.editChart.id
-            }
-            this.$refs.chartsPreview.show(params)
-          }
-        })
-      }
-    },
-    // preview--end
-    initElements () {
-      if (!this.editChart.elements || this.editChart.elements.length == 0) {
-        this.editChart.elements = [{ expression: '', legend: '', type: 'expert', id: '' }]
-      }
-      this.editChart.elements.forEach(element => {
-        if (element && element != '') {
-          this.promqlKeys.push(getUUID())
-          this.expressions.push(element.expression)
-          this.legends.push(element.legend)
-          this.elementIds.push(element.id)
-        }
-      })
-      this.promqlCount = this.editChart.elements.length
-      this.$nextTick(() => {
-        this.expressions.forEach((ex, index) => {
-          if (ex) {
-            // this.$refs[`promql-${index}`][0].metricChange(ex)
-          }
-        })
-      })
-    },
-    valueMappingChange: function (value) {
-      if (this.editChart.param.valueMapping.type == 'value') {
-        this.editChart.param.valueMapping.mapping = [{ text: '', value: '', color: { bac: '#fff', text: '#000' } }]
-        this.showPicker = [{ bac: false, text: false }]
-      } else {
-        this.editChart.param.valueMapping.mapping = [{ from: '', to: '', text: '', color: { bac: '#fff', text: '#000' } }]
-        this.showPicker = [{ bac: false, text: false }]
-      }
-    },
-    addMapping: function () {
-      if (this.editChart.param.valueMapping.type == 'value') {
-        this.editChart.param.valueMapping.mapping.push({ text: '', value: '', color: { bac: '#fff', text: '#000' } })
-        this.showPicker.push({ bac: false, text: false })
-      } else {
-        this.editChart.param.valueMapping.mapping.push({ from: '', to: '', text: '', color: { bac: '#fff', text: '#000' } })
-        this.showPicker.push({ bac: false, text: false })
-      }
-    },
-    colorPickerClick (index) {
-      if (this.showPicker[index].bac || this.showPicker[index].text) { // 再次点击关闭
-        this.showPicker[index].bac = false
-        this.showPicker[index].text = false
-        return
-      }
-      this.showPicker[index].bac = true
-      this.$refs['colorPickerBac' + index][0].showPicker = true
-    },
-    changeShowPicker (index, atr) {
-      this.$refs['colorPickerBac' + index][0].showPicker = true
-      this.showPicker[index].bac = false
-      this.showPicker[index].text = false
-      this.showPicker[index][atr] = true
-      // atr=atr.toLowerCase().replace(/( |^)[a-z]/g,(L)=>L.toUpperCase());
-    },
-    colorChange (mapping, key, val) {
-      mapping.color[key] = val
-    },
-    colorRGBtoHex (color) {
-      const rgb = color.split(',')
-      const r = parseInt(rgb[0].split('(')[1])
-      const g = parseInt(rgb[1])
-      const b = parseInt(rgb[2].split(')')[0])
-      const hex = '#' + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)
-      return hex
-    },
-    colorOut (index, e) {
-      let flag = false
-      e.path.forEach((item) => {
-        if (item.className === 'el-color-dropdown el-color-picker__panel' || item.className === 'color-tab') {
-          flag = true
-        }
-      })
-      if (flag) {
-        return
-      }
-      if (this.showPicker[index]) {
-        this.showPicker[index].bac = false
-        this.showPicker[index].text = false
-      }
-    },
-    delMapping: function (index) {
-      this.editChart.param.valueMapping.mapping.splice(index, 1)
-    },
-    topologyDialogChange (flag, data) {
-      this.topologyDialog = flag
-      if (data) {
-        this.editChart.param.topo = data
-      }
-    }
-  },
-  created () {
-    this.getSuggestMetric()
-  },
-  watch: {
-    chart: {
-      deep: true,
-      immediate: true,
-      handler (n) {
-        this.isEdit = true
-        if (n.id) {
-          if (!n.param.state && n.param.state != Number) {
-            n.param.state = '1'
-          }
-          if (n.param.severity && n.param.severity != Number) {
-            n.param.severity = 1
-          }
-        }
-        if ((n.param && n.param.valueMapping) && (n.type === 'singleStat' || n.type === 'table')) {
-          n.param.valueMapping.mapping.forEach(item => {
-            this.showPicker.push({ bac: false, text: false })
-            if (!item.color) {
-              item.color = { bac: '#fff', text: '#000' }
-            }
-          })
-        }
-        if (n.name) {
-          this.isEdit = true
-        }
-
-        this.editChart = JSON.parse(JSON.stringify(n))
-        if (this.editChart.panelId === 0 && !this.editChart.varType) {
-          this.editChart.varType = 1
-        }
-
-        this.panelName = this.editChart.panelName
-        this.panelId = this.editChart.panelId
-        this.editChart.name = this.editChart.name || ''
-        if (!n.groupId || n.groupId == -1) {
-          this.editChart.groupId = ''
-        }
-        if (typeof (this.editChart.param) === 'string') {
-          this.editChart.param = JSON.parse(this.editChart.param)
-        }
-        if (!n.param.nullType) {
-          this.editChart.param.nullType = 'null'
-        }
-        if (n.type === 'url') {
-          this.setIsUrl()
-        } else if (n.type === 'alertList') {
-          this.setIsAlertList()
-        } else if (n.type === 'singleStat') {
-          if (n.param && !n.param.valueMapping) {
-            this.$set(this.editChart.param, 'valueMapping', { type: 'value', mapping: [{ text: '', value: '', color: { bac: '#fff', text: '#000' } }] })
-            this.showPicker.push({ bac: false, text: false })
-          }
-          this.setIsSingleStat()
-        } else if (n.type === 'table') {
-          n.param.last ? this.$set(this.editChart.param, 'last', n.param.last) : this.$set(this.editChart.param, 'last', 0)
-          if (n.param && !n.param.valueMapping) {
-            this.$set(this.editChart.param, 'valueMapping', { type: 'value', mapping: [{ text: '', value: '', color: { bac: '#fff', text: '#000' } }] })
-            this.showPicker.push({ bac: false, text: false })
-          }
-        } else if (n.type === 'group') {
-          this.setIsGroup()
-        } else {
-          this.setIsOtherChart()
-          n.param && !n.param.legendValue && this.$set(this.editChart.param, 'legendValue', { min: 'off', max: 'off', avg: 'off', last: 'off', total: 'off' })
-        }
-        if (n.type === 'logs') {
-          this.promqlType = 'log'
-        }
-        this.$set(this.editChart, 'panelName', this.showPanel.name)
-        if (this.showPanel.id || this.from === 'chartTemp') {
-          this.panelId = this.showPanel.id
-        }
-        this.$get('visual/panel/chart?panelId=' + this.panelId + '&pageSize=-1').then(response => {
-          if (response.code === 200) {
-            this.groupArr = []
-            response.data.list.forEach((item, index) => {
-              if (item.type === 'group') {
-                this.groupArr.push({ id: item.id, name: item.name })
-              }
-            })
-          }
-        })
-        if (n.id || n.name) {
-          this.editData(this.editChart, this.showPanel.id)
-        } else {
-          this.createData(this.showPanel.id, '', n.unit)
-        }
-        if (this.editChart.param && !this.editChart.param.statistics) {
-          this.editChart.param.statistics = 'null'
-        }
-      }
-    }
-  },
-  beforeDestroy () {
-    if (this.$refs.chartTag) {
-      this.$refs.chartTag.forEach((item, index) => { // 循环指标列表
-        item.clearSelectedTagList()
-      })
-    }
-    this.isUrl = false
-  }
-}
-</script>
-<style>
-  .popper-z-index{
-    z-index: 99999999 !important;
-  }
-  .right-box-add-chart .el-autocomplete {
-    width: 100%;
-  }
-  .chart-box-autocomplete {
-    z-index: 3000 !important;
-  }
-  .val-mapping-type .no-fill span{
-    background-color: unset !important;
-  }
-  .el-color-picker__panel{
-    border-radius: 0 0 5px 5px;
-  }
-  .el-color-dropdown{
-    z-index: 2200!important;
-  }
-</style>
diff --git a/nezha-fronted/src/components/page/dashboard/explore/exploreItem.vue b/nezha-fronted/src/components/page/dashboard/explore/exploreItem.vue
index f84854a4e..7ebe5d651 100644
--- a/nezha-fronted/src/components/page/dashboard/explore/exploreItem.vue
+++ b/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
diff --git a/nezha-fronted/src/components/page/dashboard/overview/chart.vue b/nezha-fronted/src/components/page/dashboard/overview/chart.vue
index 0639d3261..0ff73f068 100644
--- a/nezha-fronted/src/components/page/dashboard/overview/chart.vue
+++ b/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'
diff --git a/nezha-fronted/src/components/page/dashboard/panel.vue b/nezha-fronted/src/components/page/dashboard/panel.vue
index 2f43533e7..2d63308a3 100644
--- a/nezha-fronted/src/components/page/dashboard/panel.vue
+++ b/nezha-fronted/src/components/page/dashboard/panel.vue
@@ -110,20 +110,6 @@
     <button :class="{'to-top-is-hover': tableHover}" @click="toTop(scrollbarWrap)" class="to-top" style="bottom: 0;" v-show="showTopBtn"><i class="nz-icon nz-icon-top"></i></button>
 
     <transition name="right-box">
-<!--      <chart-box-->
-<!--        v-if="rightBox.chart.show"-->
-<!--        ref="addChartModal"-->
-<!--        :chart="chart"-->
-<!--        :from="fromRoute.panel"-->
-<!--        :panel-data="panelData"-->
-<!--        :show-panel="showPanel"-->
-<!--        @close="closeChartBox"-->
-<!--        @reload="panelReload"-->
-<!--        @reloadOnlyPanel="panelReloadOnlyPanel"-->
-<!--        @delete-chart="delChart"-->
-<!--        @on-create-success="createSuccess"-->
-<!--        @on-delete-success="delChartOk"-->
-<!--      ></chart-box>-->
       <chart-right-box
         v-if="chartRightBoxShow"
         v-loading="rightBox.loading"
@@ -150,7 +136,6 @@
 </template>
 
 <script>
-import ChartBox from './chartBox'
 import chartRightBox from '@/components/common/rightBox/chart/chartRightBox'
 import bus from '../../../libs/bus'
 import pickTime from '../../common/pickTime'
@@ -285,7 +270,6 @@ export default {
     }
   },
   components: {
-    'chart-box': ChartBox,
     'pick-time': pickTime,
     'panel-box': panelBox,
     topToolMoreOptions,
@@ -835,6 +819,7 @@ export default {
       let dom = document.getElementsByClassName(this.pdfId)[0]
       if (dom) {
         // dom = dom.getElementsByClassName('vue-grid-layout')[0]
+        this.htmlTitle = this.panel.name
         this.scrollbarWrap.scrollTop = this.scrollbarWrap.scrollHeight
         this.$refs.chartList.onScroll(this.scrollbarWrap.scrollTop)
         let flag = true
@@ -855,6 +840,7 @@ export default {
             timer = null
             setTimeout(() => {
               document.body.style.height = 'auto'
+              document.getElementsByClassName('left-menu')[0].style.height = '100vh'
               // document.getElementsByTagName('html')[0].style.overflow = 'visible'
               const position = dom.getBoundingClientRect()
               console.log(position)