From 4586d113107a2a8ae87a0fb8dc3452d399cec357 Mon Sep 17 00:00:00 2001
From: chenjinsong <523037378@qq.com>
Date: Tue, 16 Jun 2020 19:37:47 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20chart=E6=A0=87=E9=A2=98=E8=89=B2?=
 =?UTF-8?q?=E7=BB=9F=E4=B8=80=E3=80=81=E5=88=A0=E9=99=A4=E6=97=A0=E7=94=A8?=
 =?UTF-8?q?=E4=BB=A3=E7=A0=81=E6=96=87=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../charts/chart-alert-rule-info.vue          | 316 ---------------
 .../components/charts/chart-asset-info.vue    | 372 ------------------
 .../components/charts/chart-endpoint-info.vue | 283 -------------
 .../src/components/charts/chart-list.vue      |   8 -
 .../components/charts/chart-project-info.vue  | 353 -----------------
 .../src/components/charts/chart.scss          |   1 -
 6 files changed, 1333 deletions(-)
 delete mode 100644 nezha-fronted/src/components/charts/chart-alert-rule-info.vue
 delete mode 100644 nezha-fronted/src/components/charts/chart-asset-info.vue
 delete mode 100644 nezha-fronted/src/components/charts/chart-endpoint-info.vue
 delete mode 100644 nezha-fronted/src/components/charts/chart-project-info.vue

diff --git a/nezha-fronted/src/components/charts/chart-alert-rule-info.vue b/nezha-fronted/src/components/charts/chart-alert-rule-info.vue
deleted file mode 100644
index a48ac18a2..000000000
--- a/nezha-fronted/src/components/charts/chart-alert-rule-info.vue
+++ /dev/null
@@ -1,316 +0,0 @@
-<style lang="scss">
-  @import './chart.scss';
-</style>
-<template>
-  <div class="nz-chart-resize">
-    <div class="resize-shadow" ref="resizeShadow"></div>
-    <div class="resize-box resize-box-alert-rule" ref="resizeBox">
-      <div class="chart-alert-rule-info" :id="'chartAlertRuleInfoDiv'+chartIndex" @mouseenter="caretShow=true" @mouseleave="caretShow=false">
-        <loading :ref="'localLoading'+chartIndex"></loading>
-        <div class="clearfix chartTitle drag-disabled" :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" 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="el-dropdown-link chart-title" @click="dropdownMenuShow=!dropdownMenuShow">
-            <span class="chart-title-text">{{data.title}}</span>
-          </span>
-        </div>
-        <div class="mt-10 chart-info-container" v-cloak>
-          <div :id="'chartContainer'+chartIndex"  ref="chartContainer" class="asset-info-content" >
-            <el-scrollbar style="height: 100%;width:100%;" ref="scrollbar" class="el-scrollbar-normal">
-              <div style="padding: 0 15px">
-                <div v-if="noData" class="chart-no-data">No Data</div>
-                <div v-if="detail.project && detail.project.length > 0" class="basic-container">
-                  <div class="basic-title asset-info-content-title" @click.stop="hideElement('project')">
-                    <span><i :class="{'el-icon-caret-right': unfold.indexOf('project') == -1,'el-icon-caret-bottom': unfold.indexOf('project') > -1}"></i></span>
-                    <span>&nbsp;{{$t('project.project.project')}}</span>
-                  </div>
-                  <div class="basic-content basic-content-asset unfold" ref="project">
-                    <div v-for="(item, index) in detail.project" class="content-item hover-bg">
-                      <div class="content-item-key item-tip" :id="'project' + index">
-                        <span>{{item.name}}</span>
-                        <div class="item-tip-hide item-tip-key el-popover" :class="itemTip('project', item.name, index, ready)">{{item.name}}</div>
-                      </div><div class="content-item-value">
-                        <span>{{item.nums}}</span>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-                <div v-if="detail.module && detail.module.length > 0" class="basic-container">
-                  <div class="basic-title asset-info-content-title" @click.stop="hideElement('module')">
-                    <span><i :class="{'el-icon-caret-right': unfold.indexOf('module') == -1,'el-icon-caret-bottom': unfold.indexOf('module') > -1}"></i></span>
-                    <span>&nbsp;{{$t('project.module.module')}}</span>
-                  </div>
-                  <div class="basic-content basic-content-asset" ref="module">
-                    <div v-for="(item, index) in detail.module" class="content-item hover-bg">
-                      <div class="content-item-key item-tip" :id="'module' + index">
-                        <span>{{item.name}}</span>
-                        <div class="item-tip-hide item-tip-key el-popover" :class="itemTip('module', item.name, index, ready)">{{item.name}}</div>
-                      </div><div class="content-item-value">
-                        <span>{{item.nums}}</span>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-                <div v-if="detail.asset && detail.asset.length > 0" class="basic-container">
-                  <div class="basic-title asset-info-content-title" @click.stop="hideElement('asset')">
-                    <span><i :class="{'el-icon-caret-right': unfold.indexOf('asset') == -1,'el-icon-caret-bottom': unfold.indexOf('asset') > -1}"></i></span>
-                    <span>&nbsp;{{$t('asset.asset')}}</span>
-                  </div>
-                  <div class="basic-content basic-content-asset" ref="asset">
-                    <div v-for="(item, index) in detail.asset" class="content-item hover-bg">
-                      <div class="content-item-key item-tip" :id="'asset' + index">
-                        <span>{{item.name}}</span>
-                        <div class="item-tip-hide item-tip-key el-popover" :class="itemTip('asset', item.name, index, ready)">{{item.name}}</div>
-                      </div><div class="content-item-value">
-                        <span>{{item.nums}}</span>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-                <div v-if="detail.endpoint && detail.endpoint.length > 0" class="basic-container">
-                  <div class="basic-title asset-info-content-title" @click.stop="hideElement('endpoint')">
-                    <span><i :class="{'el-icon-caret-right': unfold.indexOf('endpoint') == -1,'el-icon-caret-bottom': unfold.indexOf('endpoint') > -1}"></i></span>
-                    <span>&nbsp;{{$t('project.endpoint.endpoint')}}</span>
-                  </div>
-                  <div class="basic-content basic-content-asset" ref="endpoint">
-                    <div v-for="(item, index) in detail.endpoint" class="content-item hover-bg">
-                      <div class="content-item-key item-tip" :id="'endpoint' + index">
-                        <span>{{item.name}}</span>
-                        <div class="item-tip-hide item-tip-key el-popover" :class="itemTip('endpoint', item.name, index, ready)">{{item.name}}</div>
-                      </div><div class="content-item-value">
-                        <span>{{item.nums}}</span>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-
-                    <!--<div v-for="(item, index) in detail" class="content-item hover-bg">
-                      <div class="content-item-key item-tip" :id="'basicKey' + index">
-                        <span>{{item.label}}</span>
-                        <div class="item-tip-hide item-tip-key el-popover" :class="itemTip('basicKey', item.label, index, ready)">{{item.label}}</div>
-                      </div><div class="content-item-value item-tip" :id="'basicValue' + index">
-                        <span>{{item.value ? item.value : "&nbsp;"}}</span>
-                        <div class="item-tip-hide item-tip-value el-popover" :class="itemTip('basicValue', item.value, index, ready)">{{item.value}}</div>
-                      </div>
-                    </div>-->
-              </div>
-            </el-scrollbar>
-          </div>
-        </div>
-      </div>
-      <!--<span class="vue-resizable-handle" @mousedown="startResize"></span>-->
-    </div>
-  </div>
-</template>
-
-<script>
-  import bus from '../../libs/bus';
-  import {Loading} from 'element-ui';
-  import chartDataFormat from './chartDataFormat'
-  import loading from "../common/loading";
-  import timePicker from '../common/timePicker'
-
-  export default {
-    name: 'chartAlertRuleInfo',
-    components: {
-      'loading': loading,
-      'time-picker':timePicker
-    },
-    props: {
-      // 看板id
-      panelId: {
-        type: Number,
-        default: 0,
-      },
-      editChartId: {
-        type: String,
-        default: 'editChartId',
-      },
-      chartIndex:{
-        type: Number,
-        default: 0,
-      },
-    },
-    data() {
-      return {
-        ready: false,
-        data: {}, // 该图表信息,chartItem
-        unit:{},
-        detail: {},
-        isError:false,
-        errorContent:'',
-        loading:Object,
-        panelIdInner: '', // 看板id=panelId,原写作chart,由set_data获取
-        firstLoad: false, // 是否第一次加载
-        screenModal: false,
-        // 查询数据使用
-        filter: {
-          start_time: '',
-          end_time: '',
-          from: ''
-        },
-        unfold: ["project"], //展开的列表 project、module、asset、endpoint
-        firstShow: false, // 默认不显示操作按钮,
-        caretShow:false,
-        dragTitleShow:false,
-        dropdownMenuShow:false,
-        divFirstShow:false,
-        searchTime: [new Date().setHours(new Date().getHours() - 1), new Date()],//全屏显示的时间
-        oldSearchTime: [],
-      };
-    },
-    computed: {
-      itemTip() {
-        return function(type, content, index, ready) {
-          let className = "";
-          if (ready) {
-            let cellDom = document.querySelector(`#${type}${index}`);
-            let spanDom = document.createElement("span");
-            spanDom.style.display = "inline-block";
-            spanDom.innerText = content;
-            cellDom.appendChild(spanDom);
-            if (cellDom.offsetWidth-16 < spanDom.offsetWidth) {
-              className = "item-tip-show";
-            }
-            cellDom.removeChild(spanDom);
-          }
-          return className;
-        }
-      },
-      noData() {
-        let vm = this;
-        return !vm.detail || function() {
-          return Object.values(vm.detail).filter(v => {
-            return v && v.length > 0;
-          }).length == 0;
-        }();
-      }
-    },
-    methods: {
-      startResize(e) {
-        let vm = this;
-        this.$chartResizeTool.start(vm, this.data, e);
-      },
-      setLabels:function(source){
-        let labels=[];
-        source.forEach(item=>{
-          labels=labels.concat(Object.keys(item))
-        })
-        labels=Array.from(new Set(labels));
-
-        labels=labels.map(item=>{
-          return{
-            label:this.replaceSplit(item),
-            prop:item,
-            show:true,
-          }
-        })
-
-        return labels;
-      },
-      hideElement:function(type){
-        let dom = this.$refs[type];
-        if (this.unfold.indexOf(type) > -1) {
-          this.unfold.splice(this.unfold.indexOf(type), 1);
-        } else {
-          this.unfold.push(type);
-        }
-        if (dom.classList.contains("unfold")) {
-          dom.classList.remove("unfold");
-          dom.classList.add("fold");
-        } else if (dom.classList.contains("fold")) {
-          dom.classList.remove("fold");
-          dom.classList.add("unfold");
-        } else if (!dom.classList.contains("unfold") && !dom.classList.contains("fold")) {
-          dom.classList.add("unfold");
-        }
-        setTimeout(()=>{
-          this.$refs.scrollbar && this.$refs.scrollbar.update();
-        },400);
-      },
-      replaceSplit(key){
-        if(key){
-          return key.replace(/\$_\$/g,' ')
-        }
-      },
-      startLoading(area){
-        this.$refs['localLoading'+this.chartIndex].startLoading();
-      },
-      endLoading(area){
-        this.$refs['localLoading'+this.chartIndex].endLoading();
-      },
-      resize() {
-        let container = document.querySelector('#chartAlertRuleInfoDiv' + this.chartIndex + " .chart-info-container");
-        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);
-      },
-      clickos() {
-        this.dropdownMenuShow=false;
-      },
-      clearChart(){
-        this.data = {};
-      },
-
-      // 设置数据, filter区分
-      setData(chartItem, data) {
-        this.resize(chartItem);
-        this.divFirstShow = true;
-
-        this.firstShow = true; // 展示操作按键
-
-        this.data = chartItem;
-        this.detail = data;
-
-        this.$nextTick(()=>{
-          this.$refs.scrollbar.update();
-        });
-        this.endLoading();
-      },
-    },
-    mounted() {
-      this.firstLoad = false;
-      this.$nextTick(()=>{
-        this.$refs.scrollbar.update();
-      })
-      setTimeout(() => {
-        this.ready = true;
-      }, 300);
-    },
-    beforeDestroy() {
-      this.clearChart();
-    },
-  };
-</script>
diff --git a/nezha-fronted/src/components/charts/chart-asset-info.vue b/nezha-fronted/src/components/charts/chart-asset-info.vue
deleted file mode 100644
index 59494ccee..000000000
--- a/nezha-fronted/src/components/charts/chart-asset-info.vue
+++ /dev/null
@@ -1,372 +0,0 @@
-<style lang="scss">
-  @import './chart.scss';
-</style>
-<template>
-  <div class="nz-chart-resize">
-    <div class="resize-shadow" ref="resizeShadow"></div>
-    <div class="resize-box resize-box-asset" ref="resizeBox">
-      <div class="chart-asset-info" :id="'chartAssetInfoDiv'+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" 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="el-dropdown-link chart-title" @click="dropdownMenuShow=!dropdownMenuShow">
-            <span class="chart-title-text">{{$t('asset.createAssetTab.assetInfo')}}</span>
-          </span>
-        </div>
-        <div class="mt-10 chart-info-container" v-cloak>
-          <div :id="'chartContainer'+chartIndex"  ref="chartContainer" class="asset-info-content" >
-            <el-scrollbar style="height: 100%;width:100%;" ref="scrollbar" class="el-scrollbar-normal">
-              <div style="padding: 0 15px">
-                <div class="basic-container">
-                  <div class="basic-title asset-info-content-title" @click="hideElement('basic')">
-                    <span><i :class="{'el-icon-caret-right':hideBasic,'el-icon-caret-bottom':!hideBasic}"></i></span>
-                    <span>{{$t('asset.createAssetTab.basicTitle')}}</span>
-                  </div>
-                  <div class="basic-content basic-content-asset" :class="{'fold':hideBasic, 'unfold':!hideBasic}">
-                    <template v-if="assetInfos.Basic && Object.keys(assetInfos.Basic).length>0">
-                      <div v-for="(item,index) in basicKey" :key="index" class="content-item hover-bg">
-                        <div class="content-item-key item-tip" :id="'basicKey' + index">
-                          <span>{{item.label}}</span>
-                          <div class="item-tip-hide item-tip-key el-popover" :class="itemTip('basicKey', item.label, index, ready)">{{item.label}}</div>
-                        </div><div
-                        class="content-item-value" v-if="item.prop == 'pingStatus'">
-                          <div class="active-icon" :class="{'green':assetInfos.Basic[item.prop] == 1,'red':assetInfos.Basic[item.prop] != 1}"></div>
-                          <span>{{assetInfos.Basic.pingRtt ? assetInfos.Basic.pingRtt + 'ms' : '&nbsp;'}}</span>
-                        </div>
-                        <div class="content-item-value" v-else-if="item.prop == 'alert'">
-                          <span class="as-button" :class="{'success': assetInfos.Basic[item.prop] <= 0, 'danger': assetInfos.Basic[item.prop] > 0}">{{assetInfos.Basic[item.prop] + ' ' + $t('overall.active')}}</span>
-                        </div>
-                        <div class="content-item-value" v-else-if="item.prop == 'state'">
-                          {{assetInfos.Basic[item.prop] == 1?$t('asset.createAssetTab.inStock'):$t('asset.createAssetTab.outStock')}}
-                        </div>
-                        <div class="content-item-value item-tip" v-else :id="'basicValue' + index">
-                          <span>{{assetInfos.Basic[item.prop] ? assetInfos.Basic[item.prop] : "&nbsp;"}}</span>
-                          <div class="item-tip-hide item-tip-value el-popover" :class="itemTip('basicValue', assetInfos.Basic[item.prop], index, ready)">{{assetInfos.Basic[item.prop]}}</div>
-                        </div>
-                      </div>
-                    </template>
-                  </div>
-                </div>
-                <div class="feature-container">
-                  <div class="feature-title asset-info-content-title" @click="hideElement('feature')" >
-                    <span><i :class="{'el-icon-caret-right':hideFeature,'el-icon-caret-bottom':!hideFeature}"></i></span>
-                    <span>{{$t('asset.createAssetTab.featureTitle')}}</span>
-                  </div>
-                  <div class="feature-content feature-content-asset" :class="{'fold':hideFeature, 'unfold':!hideFeature}">
-                    <div v-for="(value,key,index) in assetInfos.Feature" class="content-item item-tip">
-                      <div class="content-item-key item-tip" :id="'featureKey' + index">
-                        <span>{{key}}</span>
-                        <div class="item-tip-hide item-tip-key el-popover" :class="itemTip('featureKey', key, index, ready)">{{key}}</div>
-                      </div><div
-                      class="content-item-value item-tip" :id="'featureValue' + index" v-if="typeof value == 'string'">
-                        <span>{{value}}</span>
-                        <div class="item-tip-hide item-tip-value el-popover" :class="itemTip('featureValue', key, index, ready)">{{value}}</div>
-                      </div><div
-                      v-if="Array.isArray(value) && value.length>0" class="content-item-value content-item-value-muti">
-                        <div v-if="typeof value[0] == 'string'" class="item-value-sub" v-for="(item,index) in value" :key="index">{{item}}</div>
-                        <el-table
-                          v-else
-                          class="nz-table asset-info-table"
-                          :data="value"
-                          tooltip-effect="light"
-                          height="100%"
-                          ref="dataTable"
-                          v-scrollBar:el-table="'small'"
-                        >
-                          <el-table-column
-                            :resizable="false"
-                            v-for="(item, index) in setLabels(value)"
-                            v-if="item.show"
-                            :key="`col-${index}`"
-                            :label="item.label"
-                          >
-                            <template slot-scope="scope" :column="item">
-                              <template >
-                                <span v-html="scope.row[item.prop]"></span>
-                              </template>
-                            </template>
-                          </el-table-column>
-                        </el-table>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </el-scrollbar>
-          </div>
-        </div>
-      </div>
-      <span class="vue-resizable-handle" @mousedown="startResize"></span>
-    </div>
-  </div>
-</template>
-
-<script>
-  import bus from '../../libs/bus';
-  import {Loading} from 'element-ui';
-  import chartDataFormat from './chartDataFormat'
-  import loading from "../common/loading";
-  import timePicker from '../common/timePicker'
-
-  export default {
-    name: 'chartAssetInfo',
-    components: {
-      'loading': loading,
-      'time-picker':timePicker
-    },
-    props: {
-      // 看板id
-      panelId: {
-        type: Number,
-        default: 0,
-      },
-      editChartId: {
-        type: String,
-        default: 'editChartId',
-      },
-      chartIndex:{
-        type: Number,
-        default: 0,
-      }
-    },
-    data() {
-      return {
-        ready: false,
-        data: {}, // 该图表信息,chartItem
-        unit:{},
-        isError:false,
-        errorContent:'',
-        assetInfos:{},
-        //toolbox: false,
-        loading:Object,
-        panelIdInner: '', // 看板id=panelId,原写作chart,由set_data获取
-        firstLoad: false, // 是否第一次加载
-        screenModal: false,
-        // 查询数据使用
-        filter: {
-          start_time: '',
-          end_time: '',
-        },
-        hideBasic:false,
-        hideFeature:false,
-        firstShow: false, // 默认不显示操作按钮,
-        caretShow:false,
-        dragTitleShow:false,
-        dropdownMenuShow:false,
-        divFirstShow:false,
-        searchTime: [new Date().setHours(new Date().getHours() - 1), new Date()],//全屏显示的时间
-        oldSearchTime: [],
-        basicKey:[
-          {
-            label: this.$t("asset.tableTitle.host"),
-            prop: 'host',
-          },
-          {
-            label: this.$t("asset.tableTitle.id"),
-            prop: 'id',
-          },
-          {
-            label: this.$t("asset.tableTitle.assetType"),
-            prop: 'assetType',
-          },
-          {
-            label: this.$t("asset.tableTitle.device"),
-            prop: 'sn',
-          },
-          {
-            label: this.$t("asset.tableTitle.assetState"),
-            prop: 'state',
-          },
-          {
-            label: this.$t("asset.tableTitle.dataCenter"),
-            prop: 'dataCenter',
-          },
-          {
-            label: this.$t("asset.tableTitle.cabinet"),
-            prop: 'cabinet',
-          },
-          {
-            label: this.$t("asset.tableTitle.model"),
-            prop: 'model',
-          },
-          {
-            label: this.$t("asset.tableTitle.vendor"),
-            prop: 'vendor',
-          },
-          {
-            label: this.$t("asset.tableTitle.procurementDate"),
-            prop: 'purchaseDate',
-          },
-          {
-            label: this.$t("asset.tableTitle.principal"),
-            prop: 'principal',
-          },
-          {
-            label: this.$t("asset.tableTitle.principalTel"),
-            prop: 'tel',
-          },
-          {
-            label:this.$t('asset.tableTitle.assetPing'),
-            prop:'pingStatus',
-          },
-          {
-            label:this.$t('asset.tableTitle.lastReply'),
-            prop:'pingLastReply',
-          },
-          {
-            label: this.$t("asset.tableTitle.modules"),
-            prop: 'endpoint',
-          },
-          {
-            label: this.$t("asset.tableTitle.alerts"),
-            prop: 'alert',
-          },
-        ]
-      };
-    },
-    computed: {
-      itemTip() {
-        return function(type, content, index, ready) {
-          let className = "";
-          if (ready) {
-            let cellDom = document.querySelector(`#${type}${index}`);
-            let spanDom = document.createElement("span");
-            spanDom.style.display = "inline-block";
-            spanDom.innerText = content;
-            cellDom.appendChild(spanDom);
-            if (cellDom.offsetWidth-16 < spanDom.offsetWidth) {
-              className = "item-tip-show";
-            }
-            cellDom.removeChild(spanDom);
-          }
-          return className;
-        }
-      },
-    },
-    methods: {
-      startResize(e) {
-        let vm = this;
-        this.$chartResizeTool.start(vm, this.data, e);
-      },
-      setLabels:function(source){
-        let labels=[];
-        source.forEach(item=>{
-          labels=labels.concat(Object.keys(item))
-        })
-        labels=Array.from(new Set(labels));
-
-        labels=labels.map(item=>{
-          return{
-            label:this.replaceSplit(item),
-            prop:item,
-            show:true,
-          }
-        })
-
-        return labels;
-      },
-      hideElement:function(type){
-        if(type ==  'basic'){
-          this.hideBasic=!this.hideBasic;
-        }else{
-          this.hideFeature=!this.hideFeature
-        }
-        setTimeout(()=>{
-          this.$refs.scrollbar.update();
-        },400);
-      },
-      replaceSplit(key){
-        if(key){
-          return key.replace(/\$_\$/g,' ')
-        }
-      },
-      startLoading(area){
-        this.$refs['localLoading'+this.chartIndex].startLoading();
-      },
-      endLoading(area){
-        this.$refs['localLoading'+this.chartIndex].endLoading();
-      },
-      resize() {
-        let container = document.querySelector('#chartAssetInfoDiv' + this.chartIndex + " .chart-info-container");
-        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);
-      },
-      clickos() {
-        this.dropdownMenuShow=false;
-      },
-      clearChart(){
-        this.data = {};
-      },
-
-      // 设置数据, filter区分
-      setData(chartItem, assetInfos, panelId, filter,area,errorMsg) {
-        this.resize(chartItem);
-        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.assetInfos=assetInfos;
-        this.$nextTick(()=>{
-          this.$refs.scrollbar.update();
-        })
-        this.endLoading();
-      },
-    },
-    mounted() {
-      this.firstLoad = false;
-      this.$nextTick(()=>{
-        this.$refs.scrollbar.update();
-      })
-      setTimeout(() => {
-        this.ready = true;
-      }, 300);
-    },
-    beforeDestroy() {
-      this.clearChart();
-    },
-  };
-</script>
diff --git a/nezha-fronted/src/components/charts/chart-endpoint-info.vue b/nezha-fronted/src/components/charts/chart-endpoint-info.vue
deleted file mode 100644
index 4d638284e..000000000
--- a/nezha-fronted/src/components/charts/chart-endpoint-info.vue
+++ /dev/null
@@ -1,283 +0,0 @@
-<style lang="scss">
-  @import './chart.scss';
-</style>
-<template>
-  <div class="nz-chart-resize">
-    <div class="resize-shadow" ref="resizeShadow"></div>
-    <div class="resize-box resize-box-endpoint" ref="resizeBox">
-      <div class="chart-asset-info" :id="'chartEndpointInfoDiv'+chartIndex" @mouseenter="caretShow=true" @mouseleave="caretShow=false">
-        <loading :ref="'localLoading'+chartIndex"></loading>
-        <div class="clearfix chartTitle drag-disabled" :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" 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="el-dropdown-link chart-title" @click="dropdownMenuShow=!dropdownMenuShow">
-            <span class="chart-title-text">{{data.title}}</span>
-          </span>
-        </div>
-        <div class="mt-10 chart-info-container" v-cloak>
-          <div :id="'chartContainer'+chartIndex"  ref="chartContainer" class="asset-info-content" >
-            <el-scrollbar style="height: 100%;width:100%;" ref="scrollbar" class="el-scrollbar-normal">
-              <div style="padding: 0 15px">
-                <div v-if="noData" class="chart-no-data">No Data</div>
-                <div v-if="!noData" class="basic-container">
-                  <div class="basic-title asset-info-content-title" @click.stop="hideElement('basic')">
-                    <span><i :class="{'el-icon-caret-right': unfold.indexOf('basic') == -1,'el-icon-caret-bottom': unfold.indexOf('basic') > -1}"></i></span>
-                    <span>&nbsp;{{$t('project.endpoint.endpoint')}}</span>
-                  </div>
-                  <div class="basic-content basic-content-asset unfold" ref="basic">
-                    <div v-for="(item, index) in detail" class="content-item hover-bg">
-                      <div class="content-item-key item-tip" :id="'basicKey' + index">
-                        <span>{{item.label}}</span>
-                        <div class="item-tip-hide item-tip-key el-popover" :class="itemTip('basicKey', item.label, index, ready)">{{item.label}}</div>
-                      </div><div v-if="item.label != $t('alert.list.state')" class="content-item-value item-tip" :id="'basicValue' + index">
-                        <span>{{item.value ? item.value : '&nbsp;'}}</span>
-                        <div class="item-tip-hide item-tip-value el-popover" :class="itemTip('basicValue', item.value, index, ready)">{{item.value}}</div>
-                      </div><div v-else class="content-item-value item-tip" :id="'basicValue' + index">
-                        <span style="cursor: pointer;" @click="preview"><i class="nz-icon nz-icon-chart"></i></span>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-                <div v-if="!noData" class="feature-container">
-                  <div class="feature-title asset-info-content-title" @click="hideElement('feature')" >
-                    <span><i :class="{'el-icon-caret-right': unfold.indexOf('feature') == -1,'el-icon-caret-bottom': unfold.indexOf('feature') > -1}"></i></span>
-                    <span>{{$t('alert.alert')}}</span>
-                  </div>
-                  <div class="feature-content feature-content-asset" ref="feature">
-                    <div v-for="(item, index) in alerts" class="content-item hover-bg">
-                      <div class="content-item-key item-tip" :id="'alert' + index">
-                        <span>{{item.label}}</span>
-                        <div class="item-tip-hide item-tip-key el-popover" :class="itemTip('alert', item.label, index, ready)">{{item.label}}</div>
-                      </div><div class="content-item-value">
-                      <span>{{item.value}}</span>
-                    </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </el-scrollbar>
-          </div>
-        </div>
-      </div>
-    </div>
-    <!--preview -->
-    <chart-preview :panelId="panelId" ref="chartsPreview" ></chart-preview>
-  </div>
-</template>
-
-<script>
-  import bus from '../../libs/bus';
-  import {Loading} from 'element-ui';
-  import chartDataFormat from './chartDataFormat'
-  import loading from "../common/loading";
-  import timePicker from '../common/timePicker';
-  import chartPreview from './chartPreview';
-
-
-  export default {
-    name: 'chartEndpointInfo',
-    components: {
-      'loading': loading,
-      'time-picker': timePicker,
-      'chart-preview': chartPreview,
-    },
-    props: {
-      // 看板id
-      panelId: {
-        type: Number,
-        default: 0,
-      },
-      editChartId: {
-        type: String,
-        default: 'editChartId',
-      },
-      chartIndex:{
-        type: Number,
-        default: 0,
-      }
-    },
-    data() {
-      return {
-        ready: false,
-        data: {}, // 该图表信息,chartItem
-        unit:{},
-        detail: [],
-        state: [],
-        alerts: [],
-        unfold: ["basic"],
-        isError:false,
-        errorContent:'',
-        assetInfos:{},
-        showState: false,
-
-        //toolbox: false,
-        loading:Object,
-        panelIdInner: '', // 看板id=panelId,原写作chart,由set_data获取
-        firstLoad: false, // 是否第一次加载
-        screenModal: false,
-        // 查询数据使用
-        filter: {
-          start_time: '',
-          end_time: '',
-        },
-        hideBasic:false,
-        hideFeature:false,
-        firstShow: false, // 默认不显示操作按钮,
-        caretShow:false,
-        dragTitleShow:false,
-        dropdownMenuShow:false,
-        divFirstShow:false,
-        searchTime: [new Date().setHours(new Date().getHours() - 1), new Date()],//全屏显示的时间
-        oldSearchTime: [],
-      };
-    },
-    computed: {
-      itemTip() {
-        return function(type, content, index, ready) {
-          let className = "";
-          if (ready) {
-            let cellDom = document.querySelector(`#${type}${index}`);
-            let spanDom = document.createElement("span");
-            spanDom.style.display = "inline-block";
-            spanDom.innerText = content;
-            cellDom.appendChild(spanDom);
-            if (cellDom.offsetWidth-16 < spanDom.offsetWidth) {
-              className = "item-tip-show";
-            }
-            cellDom.removeChild(spanDom);
-          }
-          return className;
-        }
-      },
-      noData() {
-        return !this.detail || this.detail.length == 0;
-      }
-    },
-    methods: {
-      setLabels:function(source){
-        let labels=[];
-        source.forEach(item=>{
-          labels=labels.concat(Object.keys(item))
-        })
-        labels=Array.from(new Set(labels));
-
-        labels=labels.map(item=>{
-          return{
-            label:this.replaceSplit(item),
-            prop:item,
-            show:true,
-          }
-        });
-
-        return labels;
-      },
-      hideElement:function(type){
-        let dom = this.$refs[type];
-        if (this.unfold.indexOf(type) > -1) {
-          this.unfold.splice(this.unfold.indexOf(type), 1);
-        } else {
-          this.unfold.push(type);
-        }
-        if (dom.classList.contains("unfold")) {
-          dom.classList.remove("unfold");
-          dom.classList.add("fold");
-        } else if (dom.classList.contains("fold")) {
-          dom.classList.remove("fold");
-          dom.classList.add("unfold");
-        } else if (!dom.classList.contains("unfold") && !dom.classList.contains("fold")) {
-          dom.classList.add("unfold");
-        }
-        setTimeout(()=>{
-          this.$refs.scrollbar && this.$refs.scrollbar.update();
-        },400);
-      },
-      preview() {
-        this.$refs.chartsPreview.show(this.data);
-      },
-      replaceSplit(key){
-        if(key){
-          return key.replace(/\$_\$/g,' ')
-        }
-      },
-      startLoading(area){
-        this.$refs['localLoading'+this.chartIndex].startLoading();
-      },
-      endLoading(area){
-        this.$refs['localLoading'+this.chartIndex].endLoading();
-      },
-      resize() {
-        let container = document.querySelector('#chartEndpointInfoDiv' + this.chartIndex + " .chart-info-container");
-        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);
-      },
-      clickos() {
-        this.dropdownMenuShow=false;
-      },
-      clearChart(){
-        this.data = {};
-      },
-
-      // 设置数据, filter区分
-      setData(chartItem, endpointDetail, alerts) {
-        this.resize(chartItem);
-        this.divFirstShow = true;
-
-        this.firstShow = true; // 展示操作按键
-
-        this.data = chartItem;
-        this.detail = endpointDetail;
-        this.alerts = alerts;
-        this.detail.push({label: this.$t("alert.list.state"), value: ""});
-        this.$nextTick(()=>{
-          this.$refs.scrollbar.update();
-        });
-        this.endLoading();
-      },
-    },
-    mounted() {
-      this.firstLoad = false;
-      this.$nextTick(()=>{
-        this.$refs.scrollbar.update();
-      })
-      setTimeout(() => {
-        this.ready = true;
-      }, 300);
-    },
-    beforeDestroy() {
-      this.clearChart();
-    },
-  };
-</script>
diff --git a/nezha-fronted/src/components/charts/chart-list.vue b/nezha-fronted/src/components/charts/chart-list.vue
index 953afe4db..0359e0b46 100644
--- a/nezha-fronted/src/components/charts/chart-list.vue
+++ b/nezha-fronted/src/components/charts/chart-list.vue
@@ -135,11 +135,7 @@
   import chartTable from './chart-table';
   import chartUrl from './chart-url';
   import chartSingleStat from './chart-single-stat';
-  import chartAssetInfo from './chart-asset-info';
   import chartDetail from './chart-detail';
-  import chartEndpointInfo from './chart-endpoint-info'
-  import chartAlertRuleInfo from './chart-alert-rule-info'
-  import chartProjectInfo from './chart-project-info'
   import draggable from 'vuedraggable'
   import chartDataFormat from "./chartDataFormat";
   import chartAlertList from './chart-alert-list'
@@ -153,16 +149,12 @@
     },
     components: {
       chartAlertList,
-      chartAssetInfo,
       chartDetail,
-      chartProjectInfo,
       lineChartBlock,
       chartTable,
       chartUrl,
       chartSingleStat,
-      chartAlertRuleInfo,
       draggable,
-      chartEndpointInfo
     },
     data() {
       return {
diff --git a/nezha-fronted/src/components/charts/chart-project-info.vue b/nezha-fronted/src/components/charts/chart-project-info.vue
deleted file mode 100644
index c6e1854e0..000000000
--- a/nezha-fronted/src/components/charts/chart-project-info.vue
+++ /dev/null
@@ -1,353 +0,0 @@
-<style lang="scss">
-  @import './chart.scss';
-</style>
-<template>
-  <div class="nz-chart-resize">
-    <div class="resize-shadow" ref="resizeShadow"></div>
-    <div class="resize-box resize-box-project" ref="resizeBox">
-      <div class="chart-project-info" :id="'chartProjectInfoDiv'+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" 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="el-dropdown-link chart-title" @click="dropdownMenuShow=!dropdownMenuShow">
-            <span class="chart-title-text">{{$t('project.chart.projectInfo')}}</span>
-          </span>
-        </div>
-        <div class="mt-10 chart-info-container" v-cloak>
-          <div :id="'chartContainer'+chartIndex"  ref="chartContainer" class="asset-info-content" >
-            <el-scrollbar style="height: 100%;width:100%;" ref="scrollbar" class="el-scrollbar-normal">
-              <div style="padding: 0 15px">
-                <div class="basic-container">
-                  <div class="basic-title asset-info-content-title" @click="hideElement('basic')">
-                    <span><i :class="{'el-icon-caret-right':hideBasic,'el-icon-caret-bottom':!hideBasic}"></i></span>
-                    <span>{{$t('project.chart.basicTitle')}}</span>
-                  </div>
-                  <div class="basic-content basic-content-project init-no-animation" ref="basic">
-                    <template v-if="projectInfos.basic && Object.keys(projectInfos.basic).length>0">
-                      <div v-for="(item,index) in basicKey" :key="index" class="content-item">
-                        <div class="content-item-key item-tip" :id="'basicKey' + index">
-                          <span>{{item.label}}</span>
-                          <div class="item-tip-hide item-tip-key el-popover" :class="itemTip('basicKey', item.label, index, ready)">{{item.label}}</div>
-                        </div>
-                        <div class="content-item-value" v-if="item.prop == 'alertStat'">
-                          <div class="active-icon dark-red"></div>
-                          <span>{{projectInfos.basic.alertStat[0]}}</span>&nbsp;&nbsp;
-                          <div class="active-icon red"></div>
-                          <span>{{projectInfos.basic.alertStat[1]}}</span>&nbsp;&nbsp;
-                          <div class="active-icon orange"></div>
-                          <span>{{projectInfos.basic.alertStat[2]}}</span>
-                        </div>
-                        <div class="content-item-value item-tip" v-else :id="'basicValue' + index">
-                          <span>{{projectInfos.basic[item.prop] ? projectInfos.basic[item.prop] : "&nbsp;"}}</span>
-                          <div class="item-tip-hide item-tip-value el-popover" :class="itemTip('basicValue', projectInfos.basic[item.prop], index, ready)">{{projectInfos.basic[item.prop]}}</div>
-                        </div>
-                      </div>
-                    </template>
-                  </div>
-                </div>
-                <div class="feature-container" v-for="(module, mi) in projectInfos.module" :key="mi">
-                  <div class="feature-title asset-info-content-title" @click.stop="hideElement(module.id)" >
-                    <span><i :class="{'el-icon-caret-right': showModuleIds.indexOf(module.id) == -1,'el-icon-caret-bottom': showModuleIds.indexOf(module.id) > -1}"></i></span>
-                    <span>{{$t('project.module.module')}}：{{module.name}}</span>
-                  </div>
-                  <div class="feature-content feature-content-project" :ref="'module' + module.id">
-                    <div v-for="(item,index) in moduleKey" :key="index" class="content-item">
-                      <div class="content-item-key item-tip" :id="'featureKey' + module.id + '-' + index">
-                        <span>{{item.label}}</span>
-                        <div class="item-tip-hide item-tip-key el-popover" :class="itemTip('featureKey' + module.id + '-', item.label, index, ready)">{{item.label}}</div>
-                      </div>
-                      <div class="content-item-value" v-if="item.prop == 'endpointStat'">
-                        <img src='../../assets/img/up.png' width="16" style="vertical-align: middle">
-                        <span>{{module.endpointStat[0]}}</span>&nbsp;&nbsp;
-                        <img src='../../assets/img/down.png' width="16" style="vertical-align: middle">
-                        <span>{{module.endpointStat[1]}}</span>&nbsp;&nbsp;
-                      </div>
-                      <div class="content-item-value" v-else-if="item.prop == 'alertStat'">
-                        <div class="active-icon dark-red"></div>
-                        <span>{{module.alertStat[0]}}</span>&nbsp;&nbsp;
-                        <div class="active-icon red"></div>
-                        <span>{{module.alertStat[1]}}</span>&nbsp;&nbsp;
-                        <div class="active-icon orange"></div>
-                        <span>{{module.alertStat[2]}}</span>
-                      </div>
-                      <div v-else class="content-item-value item-tip" :id="'featureValue' + module.id + '-' + index">
-                        <span>{{module[item.prop] ? module[item.prop] : "&nbsp;"}}</span>
-                        <div class="item-tip-hide item-tip-value el-popover" :class="itemTip('featureValue' + module.id + '-', module[item.prop], index, ready)">{{module[item.prop]}}</div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </el-scrollbar>
-          </div>
-        </div>
-      </div>
-      <span class="vue-resizable-handle" @mousedown="startResize"></span>
-    </div>
-  </div>
-</template>
-
-<script>
-  import loading from "../common/loading";
-  import timePicker from '../common/timePicker'
-
-  export default {
-    name: 'chartProjectInfo',
-    components: {
-      'loading': loading,
-      'time-picker':timePicker
-    },
-    props: {
-      // 看板id
-      panelId: {
-        type: Number,
-        default: 0,
-      },
-      editChartId: {
-        type: String,
-        default: 'editChartId',
-      },
-      chartIndex:{
-        type: Number,
-        default: 0,
-      }
-    },
-    data() {
-      return {
-        ready: false,
-        data: {}, // 该图表信息,chartItem
-        unit:{},
-        isError:false,
-        errorContent:'',
-        projectInfos:{},
-        loading:Object,
-        panelIdInner: '', // 看板id=panelId,原写作chart,由set_data获取
-        firstLoad: false, // 是否第一次加载
-        screenModal: false,
-        // 查询数据使用
-        filter: {
-          start_time: '',
-          end_time: '',
-        },
-        hideBasic:false,
-        showModuleIds: [],
-        firstShow: false, // 默认不显示操作按钮,
-        caretShow:false,
-        dragTitleShow:false,
-        dropdownMenuShow:false,
-        divFirstShow:false,
-        searchTime: [new Date().setHours(new Date().getHours() - 1), new Date()],//全屏显示的时间
-        oldSearchTime: [],
-        basicKey:[
-          {
-            label: "ID",
-            prop: 'id',
-          },
-          {
-            label: this.$t("overall.name"),
-            prop: 'name',
-          },
-          {
-            label: this.$t("overall.remark"),
-            prop: 'remark',
-          },
-          {
-            label: this.$t("project.chart.alertStat"),
-            prop: 'alertStat',
-          },
-        ],
-        moduleKey: [
-          {
-            label: "ID",
-            prop: 'id',
-          },
-          {
-            label: this.$t("overall.name"),
-            prop: 'name',
-          },
-          {
-            label: this.$t("overall.type"),
-            prop: 'type',
-          },
-          {
-            label: this.$t("overall.remark"),
-            prop: 'remark',
-          },
-          {
-            label: this.$t("project.chart.endpointStat"),
-            prop: 'endpointStat',
-          },
-          {
-            label: this.$t("project.chart.alertStat"),
-            prop: 'alertStat',
-          },
-        ]
-      };
-    },
-    computed: {
-      itemTip() {
-        return function(type, content, index, ready) {
-          let className = "";
-          if (ready) {
-            let cellDom = document.querySelector(`#${type}${index}`);
-            let spanDom = document.createElement("span");
-            spanDom.style.display = "inline-block";
-            spanDom.innerText = content;
-            cellDom.appendChild(spanDom);
-            if (cellDom.offsetWidth-16 < spanDom.offsetWidth) {
-              className = "item-tip-show";
-            }
-            cellDom.removeChild(spanDom);
-          }
-          return className;
-        }
-      },
-    },
-    methods: {
-      startResize(e) {
-        let vm = this;
-        this.$chartResizeTool.start(vm, this.data, e);
-      },
-      setLabels:function(source){
-        let labels=[];
-        source.forEach(item=>{
-          labels=labels.concat(Object.keys(item))
-        })
-        labels=Array.from(new Set(labels));
-
-        labels=labels.map(item=>{
-          return{
-            label:this.replaceSplit(item),
-            prop:item,
-            show:true,
-          }
-        })
-
-        return labels;
-      },
-      hideElement:function(type){
-        if(type ==  'basic'){
-          if (this.hideBasic) {
-            this.$refs.basic.classList.add("unfold");
-            this.$refs.basic.classList.remove("fold");
-          } else {
-            this.$refs.basic.classList.add("fold");
-            this.$refs.basic.classList.remove("unfold");
-          }
-          this.hideBasic = !this.hideBasic;
-        }else{
-          let dom = this.$refs['module' + type][0];
-          if (this.showModuleIds.indexOf(type) > -1) {
-            this.showModuleIds.splice(this.showModuleIds.indexOf(type), 1);
-          } else {
-            this.showModuleIds.push(type);
-          }
-          if (dom.classList.contains("unfold")) {
-            dom.classList.remove("unfold");
-            dom.classList.add("fold");
-          } else if (dom.classList.contains("fold")) {
-            dom.classList.remove("fold");
-            dom.classList.add("unfold");
-          } else if (!dom.classList.contains("unfold") && !dom.classList.contains("fold")) {
-            dom.classList.add("unfold");
-          }
-        }
-        setTimeout(()=>{
-          this.$refs.scrollbar.update();
-        },400);
-      },
-      replaceSplit(key){
-        if(key){
-          return key.replace(/\$_\$/g,' ')
-        }
-      },
-      startLoading(area){
-        this.$refs['localLoading'+this.chartIndex].startLoading();
-      },
-      endLoading(area){
-        this.$refs['localLoading'+this.chartIndex].endLoading();
-      },
-      resize() {
-        let container = document.querySelector('#chartProjectInfoDiv' + this.chartIndex + " .chart-info-container");
-        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);
-      },
-      clickos() {
-        this.dropdownMenuShow=false;
-      },
-      clearChart(){
-        this.data = {};
-      },
-
-      // 设置数据, filter区分
-      setData(chartItem, projectInfos, panelId, filter,area,errorMsg) {
-        this.resize(chartItem);
-        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.projectInfos=projectInfos;
-        this.$nextTick(()=>{
-          this.$refs.scrollbar.update();
-        })
-        this.endLoading();
-      },
-    },
-    mounted() {
-      this.firstLoad = false;
-      this.$nextTick(()=>{
-        this.$refs.scrollbar.update();
-      })
-      setTimeout(() => {
-        this.ready = true;
-      }, 300);
-    },
-    beforeDestroy() {
-      this.clearChart();
-    },
-  };
-</script>
diff --git a/nezha-fronted/src/components/charts/chart.scss b/nezha-fronted/src/components/charts/chart.scss
index 14c1022ff..2449f9355 100644
--- a/nezha-fronted/src/components/charts/chart.scss
+++ b/nezha-fronted/src/components/charts/chart.scss
@@ -446,7 +446,6 @@
         font-size: 16px;
         line-height: 26px;
         color: #52545c;
-        color: #333;
         display:flex;
         justify-content:center;
         align-items:center;