diff --git a/nezha-fronted/src/components/common/project/popData/chart.scss b/nezha-fronted/src/components/common/project/popData/chart.scss
deleted file mode 100644
index 80e3cee1a..000000000
--- a/nezha-fronted/src/components/common/project/popData/chart.scss
+++ /dev/null
@@ -1,597 +0,0 @@
-.clearfix:after{
-  display: block;
-  content: "";
-  clear: both;
-}
-.clearfix{
-  margin-bottom: 0px;
-}
-.hidden{
-  visibility: hidden;
-}
-.visible{
-  visibility: visible;
-}
-.legend-shape{
-  display:inline-block;
-  margin-right:5px;
-  border-radius:10px;
-  width:15px;
-  height:5px;
-  vertical-align: middle;
-}
-.ft-gr{
-  color:lightgray;
-}
-.legend-container{
-  width: calc(100% - 30px);
-  max-height:40px;
-  min-height:25px;
-  font-size:12px;
-  text-align:left;
-  left: 10px;
-  bottom: 0px;
-  line-height: 18px;
-  position: absolute;
-  padding-bottom:3px;
-}
-.nz-icon-warning{
-  color:  #e6a23c;
-}
-.legend-container-screen.legend-container {
-  max-height: 80px;
-  min-height:25px;
-}
-.legend-item{
-  text-overflow:ellipsis;
-  white-space:nowrap;
-  /*width:100%;*/
-  margin-right:10px;
-  overflow-x:hidden;
-  cursor:pointer;
-  display:inline-block;
-  float:left;
-  line-height: 20px;
-}
-.nz-chart-dropdown {
-  height: 180px;
-  li {
-    padding-left:15px !important;
-    padding-right:0px !important;
-    width:140px;
-    text-align: left;
-    i {
-      margin-right: 10px;
-    }
-  }
-}
-.nz-chart-dropdown-one {
-  height: 36px;
-  li {
-    padding-left:15px !important;
-    padding-right:0px !important;
-    width:140px;
-    text-align: left;
-    i {
-      margin-right: 10px;
-    }
-  }
-}
-.panel-info-corner {
-  color: #767980;
-  cursor: pointer;
-  position: absolute;
-  display: none;
-  left: 0;
-  width: 28px;
-  height: 28px;
-  z-index: 2;
-  top: 0;
-}
-.panel-info-corner--error {
-  display: block;
-  color: #fff;
-}
-.panel-info-corner .fa {
-  position: relative;
-  top: -4px;
-  left: -6px;
-  font-size: 75%;
-  z-index: 3;
-}
-.panel-info-corner .fa-model {
-  position: relative;
-  top: -3px;
-  left: 4px;
-  font-size: 75%;
-  z-index: 3;
-}
-.fa, .fa-model{
-  display: inline-block;
-  text-rendering: auto;
-  -webkit-font-smoothing: antialiased;
-}
-
-.panel-info-corner--error .panel-info-corner-inner {
-   border-left: 28px solid #e02f44;
-   border-right: none;
-   border-bottom: 28px solid rgba(0,0,0,0);
- }
-.panel-info-corner-inner {
-  width: 0;
-  height: 0;
-  position: absolute;
-  left: 0;
-  bottom: 0;
-}
-.chart-error-popper[x-placement^=top] .popper__arrow::after {
-  border-top-color: #e02f44;
-  bottom:0px;
-}
-.chart-error-popper[x-placement^=bottom] .popper__arrow::after {
-  border-bottom-color: #e02f44;
-}
-.popper__arrow::after{
-  border:solid 3px yellow
-}
-.chart-error-popper{
-  background-color:#e02f44;
-  color:#FFF;
-  word-wrap:break-word;
-  word-break:break-word;
-  max-width:280px;
-  border: 1px solid #e02f44;
-}
-.chart-warring-popper[x-placement^=top] .popper__arrow::after {
-  border-top-color: #e6a23c;
-  bottom:0px;
-}
-.chart-warring-popper[x-placement^=bottom] .popper__arrow::after {
-  border-bottom-color: #e6a23c;
-}
-.popper__arrow::after{
-  border:solid 3px yellow
-}
-.chart-warring-popper{
-  background-color:#e6a23c;
-  color:#FFF;
-  word-wrap:break-word;
-  word-break:break-word;
-  max-width:280px;
-  border: 1px solid #e6a23c;
-}
-.moreTitle{
-  .panel-info-corner--error .panel-info-corner-inner {
-    border-left: 28px solid #e6a23c;
-    border-right: none;
-    border-bottom: 28px solid rgba(0,0,0,0);
-  }
-  .panel-info-corner-inner {
-    width: 0;
-    height: 0;
-    position: absolute;
-    left: 0;
-    bottom: 0;
-  }
-  .nz-icon-warning:before {
-    color: #fff;
-  }
-}
-.nz-chart-resize {
-  height: 100%;
-  width: 100%;
-  position: relative;
-}
-.resize-box {
-  border: 1px solid #d8dce1;
-  position: absolute;
-  box-sizing: border-box;
-  width: 100%;
-  height: 100%;
-  top: 0;
-  left: 0;
-}
-.resize-shadow {
-  height: 100%;
-  width: 100%;
-  position: absolute;
-  box-sizing: border-box;
-}
-.resize-shadow-active {
-  background-color: #f5f9ff;
-  border: 1px solid #b7d0f7;
-  box-shadow: 1px 1px 1px #d3e1f8;
-}
-.drag-disabled .el-dropdown-link {
-  cursor: default !important;
-}
-.resize-box {
-  .pagination {
-    padding-top: 0;
-  }
-  .success {
-    background-color: #50d050;
-    color: white;
-    padding: 2px 5px;
-    border-radius: 4px;
-  }
-  .danger {
-    background-color: #d64f40;
-    color: white;
-    padding:2px 5px;
-    border-radius: 4px;
-  }
-  .chart-table, .chart-alert-info {
-    width: 100%;
-    .table-container {
-      padding: 0 6px;
-      box-sizing: border-box;
-      .nz-table {
-        margin-top: 6px;
-        box-sizing: border-box;
-      }
-    }
-  }
-  .chart-single-stat {
-    width: 100%;
-    .single-stat-container {
-      padding-left: 8px;
-      padding-right: 8px;
-      display: table;
-      text-align: center;
-      width: calc(100% - 16px);
-      .single-stat-content{
-        text-align:center;
-        vertical-align: middle;
-        display:table-cell;
-        font-size:30px;
-      }
-    }
-  }
-  .chart-container.chart-detail {
-    height: 100%;
-    position: relative;
-    background-color: white;
-    .chart-title:hover {
-      background-color:#d8dce1;
-    }
-    .chart-title:not(.drag-disabled) {
-      cursor: move;
-    }
-    .chart-title {
-      text-align: center;
-      width: 100%;
-      line-height: 30px;
-      padding: 1px 3px 0 3px;
-      box-sizing: border-box;
-      .nz-chart-top{
-        width:100%;
-      }
-      .el-dropdown-link {
-        cursor: move;
-      }
-      .nz-icon-arrow-down {
-        font-size: 12px;
-      }
-      .chart-title-text {
-        font-size: 16px;
-        line-height: 26px;
-        color: #52545c;
-        display:flex;
-        justify-content:center;
-        align-items:center;
-        max-width:calc(100% - 20px);
-        text-overflow: ellipsis;
-        overflow: hidden;
-        white-space: nowrap;
-        .chart-title-icon{
-          display: inline-block;
-          cursor: pointer;
-        }
-      }
-    }
-    .chart-info {
-      padding-top: 6px;
-      width: 100%;
-      height: calc(100% - 34px);
-    }
-    .active-icon {
-      margin: 0;
-    }
-    .chart-sub {
-      padding: 0 15px;
-      margin-bottom: 5px;
-      :last-of-type {
-        margin-bottom: 0;
-      }
-    }
-    .chart-sub-title {
-      background-color: #efefef;
-      font-size: 13px;
-      color: #505255;
-      padding-left: 2px;
-      height: 25px;
-      line-height: 25px;
-      user-select: none;
-    }
-    .chart-sub-content, .chart-third-content, .chart-forth-content {
-      width: 100%;
-      box-sizing: border-box;
-      >.content-item>.item-tip {
-        display: inline-block;
-        box-sizing: border-box;
-      }
-      >.content-item>.item-tip:not(.content-item-value-muti) {
-        padding: 0 3px 0 13px;
-      }
-      >.content-item {
-        font-size: 13px;
-        line-height: 26px;
-        border-top: 1px solid rgb(235, 238, 245);
-        display: flex;
-        position: relative;
-        flex-wrap: wrap;
-        .item-tip> {
-          .item-tip-hide {
-            display: none;
-            position: absolute;
-            bottom: 34px;
-            min-width: 50px;
-            white-space: normal;
-          }
-          .item-tip-key {
-            left: 17%;
-            transform: translateX(-50%);
-            width: 33%;
-          }
-          .item-tip-value {
-            left: 67%;
-            width: 63%;
-            transform: translateX(-50%);
-          }
-          .item-tip-hide::after {
-            content: '';
-            display: block;
-            width:0;
-            height:0;
-            overflow: hidden;
-            font-size: 0;
-            line-height: 0;
-            border: 5px;
-            border-style: dashed dashed solid dashed;
-            border-color: white transparent transparent transparent;
-            position: absolute;
-            left: 50%;
-            bottom: 0;
-            transform: translate(-50%, 10px);
-          }
-        }
-        .item-tip:hover>.item-tip-show {
-          display: block;
-        }
-        .item-tip.deep {
-          padding-left: 26px;
-          box-sizing: border-box;
-          height: 26px;
-        }
-        .item-tip.deepp {
-          padding-left: 39px;
-          box-sizing: border-box;
-          height: 26px;
-        }
-        .item-tip.deep:nth-of-type(2) {
-          padding-left: 13px;
-          box-sizing: border-box;
-          height: 26px;
-        }
-        .item-tip.deepp:last-of-type {
-          padding-left: 13px;
-          box-sizing: border-box;
-          height: 26px;
-        }
-        .tag-value:hover .item-tip-show {
-          display: block;
-        }
-        .tag-value {
-          text-overflow: ellipsis;
-          overflow: hidden;
-          white-space: nowrap;
-        }
-        .content-item-key {
-          color: #666;
-          width: 35%;
-          height: 26px;
-          text-overflow: ellipsis;
-          overflow: hidden;
-          white-space: nowrap;
-        }
-        .content-item-key .no-overflow, .content-item-value .no-overflow {
-          text-overflow: unset;
-          white-space: normal;
-        }
-        .content-item-value {
-          .item-value-sub {
-            padding: 0 3px 0 13px;
-            box-sizing: border-box;
-          }
-          .item-value-sub:not(:last-of-type) {
-            border-bottom: 1px solid rgb(235, 238, 245);
-          }
-          .nz-table {
-            th .cell {
-              height: 25px;
-              line-height: 25px;
-            }
-            td .cell {
-              min-height: 26px;
-              line-height: 26px;
-            }
-            .el-table__body {
-              background-color: white;
-            }
-            .el-table__body tr:last-of-type td {
-              border: none;
-            }
-            .el-table__body tr td {
-              background-color: white;
-            }
-            .el-table__body tr:hover>td {
-              background-color: white;
-            }
-          }
-          text-overflow: ellipsis;
-          overflow: hidden;
-          white-space: nowrap;
-          border-left: 1px solid rgb(235, 238, 245);
-          color: #1a1a1a;
-          width: 65%;
-          height: 99%;
-        }
-      }
-    }
-    .chart-sub-content {
-      >.content-item:first-of-type {
-        border-top: none;
-      }
-      >.content-item:last-of-type {
-        border-bottom: 1px solid rgb(235, 238, 245);
-      }
-    }
-  }
-  .chart-url {
-    .url-container {
-      padding: 0 8px 8px 8px;
-      box-sizing: border-box;
-    }
-  }
-  .line-chart-block, .chart-table, .chart-single-stat, .chart-url, .chart-asset-info, .chart-alert-info, .chart-project-info, .chart-alert-rule-info ,.vis-network{
-    height: 100%;
-    position: relative;
-    background-color: white;
-    .chartTitle:hover {
-      background-color:#d8dce1;
-    }
-    .chartTitle {
-      text-align: center;
-      width: 100%;
-      line-height: 30px;
-      height: 28px;
-      padding: 1px 3px 0 3px;
-      box-sizing: border-box;
-      .nz-chart-top{
-        width:100%;
-      }
-      .el-dropdown-link {
-        cursor: move;
-      }
-      .nz-icon-arrow-down {
-        font-size: 12px;
-      }
-      .chart-title {
-        font-size: 16px;
-        line-height: 26px;
-        color: #52545c;
-        display:flex;
-        justify-content:center;
-        align-items:center;
-        .chart-title-text{
-          max-width:calc(100% - 20px);
-          text-overflow: ellipsis;
-          overflow: hidden;
-          white-space: nowrap;
-          cursor: pointer;
-        }
-        .chart-title-icon{
-          display: inline-block;
-          cursor: pointer;
-        }
-      }
-    }
-
-    .line-area {
-      box-sizing: border-box;
-      background: #FFF;
-      min-height: 95px;
-      padding-left:8px;
-      padding-right:8px;
-    }
-    .button-panel-height{
-      height:26px;
-    }
-    .button-panel-height button{
-      height:26px;
-    }
-    .edit {
-      position: absolute;
-      right: 20px;
-      top: 17px;
-      z-index: 10;
-
-    }
-    .chart-select {
-      position: absolute;
-      left: 40px;
-      top: 25px;
-      z-index: 10;
-      font-size: 14px;
-      .chart-select-btn {
-        margin-right: 10px;
-        cursor: pointer;
-        &.active {
-          color: #5aacff;
-        }
-      }
-    }
-    /*没有数据显示*/
-    .null {
-      position: absolute;
-      top: 50%;
-      width: 100%;
-      text-align: center;
-      font-size: 24px;
-      font-weight: 600;
-    }
-  }
-}
-.dialog-tool {
-  margin-right: 40px;
-}
-.line-chart-block-modal {
-  .el-dialog{
-    height: 80%;
-  }
-  .line-area {
-    box-sizing: border-box;
-    background: #FFF;
-    height: 100%;
-    span.highcharts-title {/*针对highcharts设置的样式，echarts需要修改？？*/
-      display: block !important;
-      width: 50%;
-      font-size: 14px !important;
-      overflow: hidden;
-      word-wrap: break-word !important;
-      white-space: pre-wrap !important;
-    }
-  }
-  .element-top-border {
-    padding-bottom: 5px;
-    border-top: 1px solid #dfe7f2;
-    margin-top:-25px;
-  }
-
-  .element-bottom-border {
-    border-bottom: 1px solid #dfe7f2;
-    margin-bottom:-20px;
-  }
-  .pt10{
-    padding-top:10px;
-  }
-  .el-dialog__body {
-    height: calc(100% - 80px);
-  }
-
-  .el-dialog__header{
-    padding: 20px 20px 0px;
-  }
-
-}
diff --git a/nezha-fronted/src/components/common/project/popData/lineChart.vue b/nezha-fronted/src/components/common/project/popData/lineChart.vue
deleted file mode 100644
index 3845c1878..000000000
--- a/nezha-fronted/src/components/common/project/popData/lineChart.vue
+++ /dev/null
@@ -1,1696 +0,0 @@
-<style lang="scss">
-  @import './chart.scss';
-</style>
-<style scoped>
-  .resize-box{
-    border: none;
-  }
-  .project-chart-title{
-    text-align: center;
-  }
-  .nz-chart-dropdown{
-    height: 75px;
-  }
-  .legend-item{
-    max-width: 100%;
-  }
-</style>
-<template>
-  <div class="nz-chart-resize">
-    <div class="resize-shadow" ref="resizeShadow"></div>
-    <div class="resize-box resize-box-echarts" ref="resizeBox">
-      <div class="line-chart-block" :id="'lineChartDiv'+chartIndex" @mouseenter="mouseEnterChart" @mouseleave="mouseLeaveChart">
-        <loading :ref="'localLoading'+chartIndex"></loading>
-        <div :class="{'drag-disabled': filter.from == $CONSTANTS.fromRoute.rule}" :id="'chartTitle'+chartIndex" class="clearfix project-chart-title" >
-          <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>
-          <span class="moreTitle">
-            <el-popover
-              v-if="seriesItem.length!==seriesItemArr.length"
-              placement="top-start"
-              :close-delay=10
-              trigger="hover"
-              popper-class="chart-warring-popper">
-            <div class="moreTitle">{{$t('dashboard.panel.moreTitle')}}{{$t('dashboard.panel.showAll')}}{{seriesItem.length}}</div>
-            <span slot="reference" class="panel-info-corner panel-info-corner--error"  @click="loadMore">
-              <i class="nz-icon nz-icon-warning fa"></i>
-              <span class="panel-info-corner-inner"></span>
-           </span>
-          </el-popover>
-          </span>
-          <el-dropdown trigger="click" class="nz-chart-top" :key="'chartDropdown'+chartIndex"  v-clickoutside="clickos">
-            <el-dropdown-menu style="display: none"></el-dropdown-menu>
-            <span class="el-dropdown-link" @click.stop="dropdownMenuShow=!dropdownMenuShow">
-              <span class="chart-title-text">{{chartData.title}}</span>
-              <span class="chart-title-icon" v-if="filter.from != $CONSTANTS.fromRoute.rule"><i :class="{'visible':caretShow,'hidden':!caretShow}" class="nz-icon nz-icon-caret-bottom  "></i></span>
-            </span>
-            <ul :class="{'el-dropdown-menu nz-chart-dropdown':!isExplore,'el-dropdown-menu nz-chart-dropdown-one':isExplore}" :id="'dropdownUl'+chartIndex" slot="dropdown"  style="position: absolute; top: 30px; left: calc(50% - 79px); transform-origin: center top; z-index: 1000;" v-if="filter.from != $CONSTANTS.fromRoute.rule"    v-show="dropdownMenuShow" >
-              <li v-show="!isExplore"  @click="refreshChart"  class="el-dropdown-menu__item">
-                <i class="global-active-color el-icon-refresh-right" style="font-size: 16px;"></i><span>{{$t('dashboard.refresh')}}</span></li>
-              <li  @click="showAllScreen"  class="el-dropdown-menu__item">
-                <i class="el-icon-full-screen" style="font-size: 16px;"></i>{{$t('dashboard.screen')}}</li>
-            </ul>
-          </el-dropdown>
-        </div>
-        <!--<div  v-if="seriesItem.length!==seriesItemArr.length" class="more"><i class="el-icon-warning"></i> {{$t('dashboard.panel.moreFirstTitle')}} {{seriesLength}}{{$t('dashboard.panel.moreSecondTitle')}}<span @click="loadMore" class="moreClick">{{$t('dashboard.panel.moreThirdTitle')}}{{seriesItem.length}}</span></div>-->
-        <div class="line-area"  ref="lineChartArea"  :id="'lineChartArea'+chartIndex" v-show="firstShow" style="height:calc(100% - 60px)"></div>
-        <div class="chart-no-data" v-show="noData">No Data</div>
-        <div class='legend-container' id="legendArea" ref="legendArea" v-show="firstShow">
-          <div v-for="(item, index) in legendListMore" :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':bgColorList[index])}"></span>{{item.alias?item.alias:item.name}}
-          </div>
-        </div>
-        <!--
-        <Modal title="查看" v-model="screenModal" width="96%" class="line-chart-block-modal">-->
-        <el-dialog class="line-chart-block-modal nz-dialog"
-                   :title="$t('dashboard.panel.view')"
-                   :visible.sync="screenModal"
-                   width="90%"
-                   @close="screenModal = false;screenLegendListMore=[]"
-                   :append-to-body="false"
-                   :modal-append-to-body="false"
-                   style="margin-top: 1vh !important;"
-                   @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>
-          <span class="moreTitle">
-            <el-popover
-              v-if="seriesItemScreen.length!==seriesItemArrScreen.length"
-              placement="top-start"
-              :close-delay=10
-              trigger="hover"
-              popper-class="chart-warring-popper">
-            <div class="moreTitle">{{$t('dashboard.panel.moreTitle')}}{{$t('dashboard.panel.showAll')}}{{seriesItemScreen.length}}</div>
-            <span slot="reference" class="panel-info-corner panel-info-corner--error"  @click="loadScreenMore">
-              <i class="nz-icon nz-icon-warning fa-model"></i>
-              <span class="panel-info-corner-inner"></span>
-           </span>
-          </el-popover>
-          </span>
-          <div slot="title" >
-            <span class="nz-dialog-title" v-show="!isExplore">{{data.title}}</span>
-            <span class="nz-dialog-title" v-show="isExplore">&nbsp;</span>
-            <div class="float-right panel-calendar dialog-tool">
-
-              <time-picker ref="calendarPanel" class="nz-dashboard-picker" style="margin-top: -12px;"  @change="dateChange"></time-picker>
-            </div>
-          </div>
-          <div class="line-area" ref="screenShowArea"  id="screenShowArea"  style="margin-top:0px;" @mouseenter="mouseEnterFullChart" @mouseleave="mouseLeaveFullChart"></div>
-          <div class="chart-no-data" v-show="noData">No Data</div>
-          <div :id="'screenLegendArea'+chartIndex"  @mouseenter="mouseEnterFullChart" @mouseleave="mouseLeaveFullChart" class="legend-container legend-container-screen" v-show="showLegend">
-            <div v-for="(item, index) in screenLegendListMore" :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':bgColorList[index])}"></span>{{item.alias?item.alias:item.name}}
-              <br/><!--bgColorList[index]-->
-            </div>
-          </div>
-
-          <loading  :ref="'localLoadingScreen'+chartIndex"></loading>
-        </el-dialog>
-      </div>
-      <!--<span class="vue-resizable-handle" @mousedown="startResize" v-if="filter.from != 'alertRule'"></span>-->
-    </div>
-  </div>
-</template>
-<script>
-  import axios from 'axios';
-  import * as echarts from 'echarts';
-  import bus from '@/libs/bus';
-  import loading from "@/components/common/loading";
-  import chartDataFormat from '@/components/charts/chartDataFormat'
-  import {randomcolor} from  '@/components/common/js/radomcolor/randomcolor.js'
-  import timePicker from '@/components/common/timePicker'
-  import chartConfig from "@/components/page/dashboard/overview/chartConfig";
-  import {getChart, setChart,lineChartMove,getMousePoint} from "@/components/common/js/common";
-  export default {
-    name: 'lineChartBlock',
-    components: {
-      'loading': loading,
-      'time-picker':timePicker
-    },
-    props: {
-      chartData: {
-        type: Object
-      },
-      // 看板id
-      panelId: {
-        type: Number,
-        default: 0,
-      },
-      chartIndex:{
-        type: Number,
-        default: 0,
-      },
-      // 展示设置内容
-      showSetting: {
-        type: Boolean,
-        default: true,
-      },
-      isExplore:{
-        type:Boolean,
-        default:false,
-      }
-    },
-    data() {
-      return {
-        data: {}, // 该图表信息,chartItem
-        noData:false,
-        seriesItem: [], // 保存信息
-        seriesItemArr:[],// 初次加载的数据
-        seriesLength:20,
-        seriesItemScreen:[],
-        seriesItemArrScreen:[],
-        legendListMore:[],
-        screenLegendListMore:[],
-        chartInfo:{},
-        images: '',
-        isStackArea:false,
-        isError:false,
-        errorContent:'',
-        toolbox: false,
-        items: {
-          metric_name: [], // 每条数据列名称
-          xAxis: [],
-          theData: [], // series数据组
-        },
-        panelIdInner: '', // 看板id=panelId,原写作chart,由set_data获取
-        chartName: '',
-        firstLoad: false, // 是否第一次加载
-        divFirstShow:false,
-        highchartStore: null, // 保存图表数据
-        echartStore:null,// 保存图表数据
-        echartModalStore: null, // 全屏查看时数据
-        chartType: 'line', // 图表类型
-        screenModal: false,
-        // 查询数据使用
-        filter: {
-          start_time: '',
-          end_time: '',
-          from: ""
-        },
-        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',
-        ],
-        stackTotalColor:null,
-        firstShow: false, // 默认不显示操作按钮,
-        caretShow:false,
-        dropdownMenuShow:false,
-        showLegend:true,
-        searchTime:[new Date().setHours(new Date().getHours()-1),new Date()],
-        oldSearchTime:[],
-        screenTitleHeight:58
-      };
-    },
-    watch: {},
-    methods: {
-      startResize(e) {
-        let vm = this;
-        this.$chartResizeTool.start(vm, this.chartData, e);
-      },
-      setDivFirstShow(showDiv){
-        this.divFirstShow = showDiv;
-      },
-      mouseEnterChart(){
-        this.caretShow=true;
-        if (getChart(this.chartIndex)) {
-          getChart(this.chartIndex).setOption({
-            toolbox: {
-              show:true,
-            }
-          })
-        }
-      },
-      mouseLeaveChart(){
-        this.caretShow=false;
-        if (getChart(this.chartIndex)) {
-          getChart(this.chartIndex).setOption({
-            toolbox: {
-              show:false,
-            }
-          })
-        }
-      },
-      mouseEnterFullChart(){
-        if (this.echartModalStore) {
-          this.echartModalStore.setOption({
-            toolbox: {
-              show:true,
-            }
-          })
-        }
-      },
-      mouseLeaveFullChart(){
-        if (this.echartModalStore) {
-          this.echartModalStore.setOption({
-            toolbox: {
-              show:false,
-            }
-          })
-        }
-      },
-      clickLegend(legendName,index){
-        let curIsGrey=this.isGrey[index];
-        let echart = getChart(this.chartIndex)
-        if(echart){
-          if(curIsGrey){
-            echart.dispatchAction({
-              type: 'legendSelect',
-              name: legendName
-            });
-          }else{
-            echart.dispatchAction({
-              type: 'legendUnSelect',
-              name: legendName
-            });
-          }
-          this.$set(this.isGrey,index,!curIsGrey)
-        }
-      },
-      clickLegend2(legendName,index){
-        //点击图表某一个legend，图表只显示当前点击的曲线或柱状图，其它隐藏，再次点击已选中的legend ，显示全部
-        let curIsGrey=this.isGrey[index];
-        if(getChart(this.chartIndex)){
-          this.legendListMore.forEach((item,i)=>{
-            let isGrey = this.isGrey[i];
-            if(index != i){
-              if(!curIsGrey && !isGrey){
-                getChart(this.chartIndex).dispatchAction({
-                  type: 'legendUnSelect',
-                  name: item.name
-                });
-              }else if(!curIsGrey && isGrey){
-                getChart(this.chartIndex).dispatchAction({
-                  type: 'legendSelect',
-                  name: item.name
-                });
-              }else{
-                getChart(this.chartIndex).dispatchAction({
-                  type: 'legendUnSelect',
-                  name: item.name
-                });
-              }
-            }else {
-              getChart(this.chartIndex).dispatchAction({
-                type: 'legendSelect',
-                name: item.name
-              });
-            }
-          });
-          this.isGrey.forEach((item,i)=>{
-            if(index != i){
-              if(!curIsGrey && !item){
-                this.$set(this.isGrey, i, true);
-              }else if(!curIsGrey && item){
-                this.$set(this.isGrey, i, false);
-              }else{
-                this.$set(this.isGrey, i, true);
-              }
-            }else{
-              if(item === true){
-                this.$set(this.isGrey, i, false);
-              }
-            }
-          })
-        }
-      },
-      clickScreenLegend(legendName,index){
-        let curIsGrey=this.isGreyScreen[index];
-        if(this.echartModalStore) {
-          if(curIsGrey){
-            this.echartModalStore.dispatchAction({
-              type: 'legendSelect',
-              name: legendName
-            })
-          }else{
-            this.echartModalStore.dispatchAction({
-              type: 'legendUnSelect',
-              name: legendName
-            })
-          }
-          this.$set(this.isGreyScreen,index,!curIsGrey)
-        }
-      },
-      clickScreenLegend2(legendName,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);
-              }
-            }
-          })
-        }
-      },
-      clearData(){
-        if(getChart(this.chartIndex)){
-          getChart(this.chartIndex).clear();
-          // getChart(this.chartIndex).dispose();//关闭销毁实例 不再占用内存
-        }
-      },
-      formatLegend(chartWidth,name){
-        if(!name){
-          return '';
-        }
-        //计算宽度
-        var span = document.createElement("span");
-        var 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;
-        }
-        var txtWidth = parseFloat(window.getComputedStyle(span).width) - result.width;
-        document.body.removeChild(span);
-
-        if(txtWidth < chartWidth){
-          return name;
-        }else {
-          var charNum = `${(chartWidth-100)/(txtWidth/name.length)}`;
-          return name.slice(0,charNum)+'...';
-        }
-      },
-      // chartSite用于区分是全屏显示还是局部显示
-      initChart(chartInfo, dataArg, ele, chartSite,legend) {
-        this.chartInfo=chartInfo;
-        const self = this;
-        this.chartType = ''; // 图表类型
-        if ( chartInfo.type === 4) {//line,bar
-          this.chartType = 'line';
-        }
-        let minTime = null;
-        let maxTime = null;
-        if(dataArg.length>0 && dataArg[0].data
-          && dataArg[0].data.length>0 && dataArg[0].data[0].length>0){
-          let len = dataArg[0].data.length-1;
-          minTime = dataArg[0].data[0][0];
-          maxTime = dataArg[0].data[len][0];
-        }
-        if (chartSite === 'local') {
-          this.$nextTick(()=>{
-            setChart(this.chartIndex, echarts.init(ele));
-          })
-          //chartId='lineChartArea';
-        }else if (chartSite === 'screen') {
-          this.echartModalStore = echarts.init(ele);
-          //chartId='screenShowArea';
-        }
-        var chartWidth = ele.clientWidth;
-        var chartHeight = ele.clientHeight;
-        var title = {
-          show:false,
-          text: chartInfo.title || null,
-          textAlign: 'left',
-          useHTML: true,
-          textStyle: {
-            //display: 'inline-block',//无此属性
-            width: '60%',
-            fontStyle:'normal',
-            fontWeight:'bold',
-            color: "#333",
-
-          }
-        };
-        let stackIconBorderColor = (chartInfo.type==='stackArea'?'#53a3cb':'#7e7e7e');
-        let stackIconChooseBorderColor = (chartInfo.type==='stackArea'?'#7e7e7e':'#53a3cb');
-        if(chartInfo.unit &&dataArg.length>0){
-          maxValue=dataArg[0].data[0][1];
-          minValue=dataArg[0].data[0][1];
-          for(let j = 0; j < dataArg.length ; j++){
-            dataArg[j].showAllSymbol=false;
-          }
-        }
-        let maxValueCopies = this.getMaxValue(dataArg,chartInfo);
-        let maxValue=maxValueCopies.maxValue;
-        let minValue=maxValueCopies.minValue;
-        let dot=maxValueCopies.dot;
-        let copies=maxValueCopies.copies;
-        let unit=maxValueCopies.unit;
-        let oldDot=maxValueCopies.oldDot;
-        var option = {
-          title:{
-            show:false,
-          },
-          color: this.bgColorList,
-          toolbox:{
-            show:false,
-            top:'0',
-            right:'18',
-            showTitle:false,
-            feature:{
-              dataZoom:{
-                yAxisIndex:false,
-                title:{
-                  zoom:self.$t('overall.toolBox.zoom'),
-                  back:self.$t('overall.toolBox.back'),
-                }
-              },
-              magicType:{
-                type:['stack'],
-                title:{
-                  stack:self.$t('overall.toolBox.stack'),
-                },
-                iconStyle:{
-                  borderColor:stackIconBorderColor,
-                },
-                emphasis:{
-                  borderColor:stackIconChooseBorderColor,
-                },
-              },
-            },
-            tooltip: { // 和 option.tooltip 的配置项相同
-              show: true,
-              position:'top',
-              formatter: function (param) {
-                return param.title; // 自定义的 DOM 结构
-              },
-              backgroundColor:'rgba(255,255,255,0)',
-              borderColor :'rgba(255,255,255,0)',
-              textStyle: {
-                fontSize: 12,
-                color : '#439AC6'
-              },
-            }
-          },
-          tooltip: {
-            trigger: 'axis',
-            confine:false,
-            backgroundColor:'rgba(221,228,237,1)',
-            textStyle:{
-              color:'#000'
-            },
-            extraCssText:'z-index:1000;',
-            /*enterable:true, 导致tooltip不消失，显示多个tooltip*/
-            position:function(point,params,dom,rect,size){
-              dom.style.transform = "translateZ(0)";
-              var windowWidth=window.innerWidth;//窗口宽度
-              var windowHeight=window.innerHeight;//窗口高度
-              var windowMouse=getMousePoint();
-              //提示框位置
-              var x=0;
-              var y=0;
-              //当前鼠标位置
-              var pointX = point[0];
-              var pointY = point[1];
-              //外层div大小
-              var viewWidth = size.viewSize[0];
-              var viewHeight = size.viewSize[1];
-              //提示框大小
-              var boxWidth = size.contentSize[0];
-              var boxHeight = size.contentSize[1];
-              if (chartSite === 'local') { // 本地显示
-                let chartDom = document.getElementById(chartInfo.title+"_"+chartInfo.id);
-                if(chartDom){
-                  let parTop = document.getElementById(chartInfo.title+"_"+chartInfo.id).offsetTop;
-                  let parleft = document.getElementById(chartInfo.title+"_"+chartInfo.id).offsetLeft;
-
-                  let parent = document.getElementById('tableList');
-                  let parClientHeight = parent.clientHeight;//可视高度
-                  let parClientWidth = parent.clientWidth;//可视宽度
-                  let 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(pointX<(viewWidth/2)){//说明鼠标在左边放不下提示框
-                    x=pointX+10;
-                  }else{
-                    x = pointX - boxWidth;
-                  }
-                  if(pointY<(viewHeight/2)){//说明鼠标上面放不下提示框
-                    y = pointY+10;
-                  }else {
-                    y = pointY-boxHeight;
-                  }
-                  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];
-              }
-            },
-            formatter:function(params){
-              let str = `<div>`;
-              let sum = 0;
-              params.forEach((item, i) => {
-                let tip=legend[item.seriesIndex];
-                let color = self.bgColorList[item.seriesIndex];
-                if(i===0){
-                  let value=item.data[0];
-                  let t_date = new Date(value);
-                  str += [t_date.getFullYear(), t_date.getMonth() + 1, t_date.getDate()].join('-') + " "
-                    + [t_date.getHours(), t_date.getMinutes(),t_date.getSeconds()].join(':');
-                  str +=`<br/>`;
-                }
-                let val = parseFloat(Number(item.data[1]).toFixed(2));
-                if(val===0){
-                  val = Number(item.data[1]).toExponential(2);
-                }
-                sum += 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: 200px;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,-1,oldDot);
-                str += `</div>`;
-                str += `</div>`;
-              });
-              if(self.data.type==='stackArea' || self.isStackArea){
-                if(!self.stackTotalColor||self.stackTotalColor==''){
-                  self.stackTotalColor=randomcolor();
-                }
-                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:0px;">`
-                str +=`<span style='display:inline-block;margin-right:5px;border-radius:10px;width:15px;height:5px;background-color: ${self.stackTotalColor};}'></span>`;
-                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;
-            },
-          },
-          legend: {
-            type:'scroll',
-            height:80,
-            show:false,
-            icon:"roundRect",
-            itemHeight:5,
-            itemWidth:15,
-            formatter:function(name){
-              if(!name){
-                return '';
-              }
-              //计算宽度
-              var span = document.createElement("span");
-              var 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;
-              }
-              var txtWidth = parseFloat(window.getComputedStyle(span).width) - result.width;
-              document.body.removeChild(span);
-
-              if(txtWidth < chartWidth){
-                return name;
-              }else {
-                var charNum = `${(chartWidth-100)/(txtWidth/name.length)}`;
-                return name.slice(0,charNum)+'...';
-              }
-            },
-            tooltip:{
-              show:true,
-              formatter:function(params){
-                return `<div  style='width:100%;display:block;word-break:break-all;word-wrap:break-word;white-space:normal'> ${params.name}</div>`;
-              },
-            },
-            data: legend,
-            orient:'vertical',
-            x:'center',
-            y:'bottom',
-          },
-          grid: {
-            top: 30,
-            left: 0,
-            right: 30,
-            containLabel: true,
-            bottom:8,//156
-          },
-          xAxis: {
-            type: 'time',
-            axisLabel: {
-              interval: '0',
-              showMaxLabel:false,
-              rotate: 0,
-              show:true,
-              fontSize: 10,
-              formatter: function (value) {
-                value = bus.computeTimezone(value);
-                let t_date = new Date(value);
-                let hour = t_date.getHours();
-                hour=hour>9?hour:"0"+hour; //加0补充为两位数字
-                let minute = t_date.getMinutes();
-                minute=minute>9?minute:"0"+minute; //如果分钟小于10,则在前面加0补充为两位数字
-                if(minTime!==null && maxTime!==null){
-                  let diffSec = (maxTime-minTime)/1000;
-                  let secOneDay = 24*60*60;//1天的秒数
-                  let secOneMonth = secOneDay*30;//30天的秒数
-                  if(diffSec<=secOneDay) {//同一天
-                    return [hour,minute ].join(':');
-                  }else if(diffSec<secOneMonth){//大于1天，小于30天
-                    return [t_date.getMonth() + 1, t_date.getDate()].join('/') +" "+  [hour, minute].join(':');
-                  }else {//大于等于30天
-                    return [t_date.getMonth() + 1, t_date.getDate()].join('/');
-                  }
-                }else {
-                  return [t_date.getFullYear(), t_date.getMonth() + 1, t_date.getDate()].join('/') + "\n"
-                    + [hour, minute].join(':');
-                }
-
-              }
-            },
-            axisPointer: {//y轴上显示指针对应的值
-              show: true,
-            },
-            splitLine:{
-              show:true,
-              lineStyle: {
-                color: "#d9d9d9",
-                opacity: 0.8,
-                width: 1
-              }
-            },
-            axisLine: {
-              show: false
-            },
-            axisTick: {
-              show: false
-            },
-            //boundaryGap:['20%', '0'],
-          },
-          yAxis: {
-            type: 'value',
-            splitLine:{
-              show:true,
-              lineStyle: {
-                color: "#d9d9d9",
-                opacity: 0.8,
-                width: 1
-              }
-            },
-            //去掉y轴--start
-            axisLine:{
-              show:false
-            },
-            minInterval: chartDataFormat.Interval(maxValue,copies,unit.type,'min'),
-            maxInterval: chartDataFormat.Interval(maxValue,copies,unit.type,'max')*Math.ceil(dataArg.length/5),
-            axisTick: {
-              show: false,
-            },
-            //去掉y轴--end
-            axisLabel: {
-              show:true,
-              fontSize: 10,
-              formatter: function(value,index){
-                let chartUnit=chartInfo.unit;
-                chartUnit=chartUnit?chartUnit:2;
-                let unit=chartDataFormat.getUnit(chartUnit);
-                return unit.compute(value,index);
-              },
-            },
-            //boundaryGap:[0,0.2]
-          },
-          useUTC: false,//使用本地时间
-          series: dataArg
-        };
-        if(unit.type=='Time'){
-          delete option.yAxis.maxInterval;
-        }
-        // params.series = dataArg;
-        if (chartSite === 'local') { // 本地显示
-          if(legend){
-            this.legendList = [];
-            this.isGrey=[];
-            legend.forEach((item, i) => {
-              const legend = {
-                name:item.name,
-                alias:item.alias,
-                showText:this.formatLegend(chartWidth,item.name)
-              };
-              this.legendList.push(legend);
-              this.isGrey.push(false);
-            });
-          }
-          this.legendListMore=this.legendList.filter((item,index)=>index<this.seriesLength);
-          this.$nextTick(() => {
-            setTimeout(function () {
-              let divHeight = self.$refs.legendArea.offsetHeight;
-              if(!chartInfo.height){
-                getChart(self.chartIndex).resize({height:(318-divHeight-self.$chartResizeTool.titleHeight-self.$chartResizeTool.chartBlankHeight)});
-              }else {
-                getChart(self.chartIndex).resize({height:(chartInfo.height-divHeight-self.$chartResizeTool.titleHeight-self.$chartResizeTool.chartBlankHeight)});
-              }
-              if(dataArg&&dataArg.length>0){
-                getChart(self.chartIndex).clear();
-                getChart(self.chartIndex).setOption(option);//创建图表
-                self.noData=false;
-              }else{
-                self.noData=true;
-                option=chartConfig.getOption('noData')
-                getChart(self.chartIndex).clear();
-                getChart(self.chartIndex).setOption(option);//创建图表
-              }
-
-              self.$refs['localLoading'+self.chartIndex].endLoading();
-              self.firstShow = true; // 展示操作按键
-            }, 100);
-
-            window.addEventListener('resize', function () {
-              getChart(self.chartIndex).resize();
-            });
-            getChart(this.chartIndex).on('magictypechanged', function (params) {
-              self.isStackArea = !self.isStackArea;
-              if(self.isStackArea){
-                this.setOption({
-                  toolbox:{
-                    feature:{
-                      dataZoom:{
-                        yAxisIndex:false,
-                        title:{
-                          zoom:self.$t('overall.toolBox.zoom'),
-                          back:self.$t('overall.toolBox.back'),
-                        }
-                      },
-                      magicType:{
-                        type:['stack'],
-                        title:{
-                          stack:self.$t('overall.toolBox.stack')
-                        },
-                        iconStyle:{
-                          borderColor:'#7e7e7e',
-                        },
-                        emphasis:{
-                          borderColor:stackIconChooseBorderColor,
-                        }
-                      },
-                    }
-                  },
-                  tooltip: {
-                    formatter:function(params){
-                      let str = `<div>`;
-                      let sum = 0;
-                      params.forEach((item, i) => {let tip=legend[item.seriesIndex];
-                        let color = self.bgColorList[item.seriesIndex];
-                        if(i===0){
-                          let value=item.data[0];
-                          let t_date = new Date(value);
-                          str += [t_date.getFullYear(), t_date.getMonth() + 1, t_date.getDate()].join('-') + " "
-                            + [t_date.getHours(), t_date.getMinutes(),t_date.getSeconds()].join(':');
-                          str +=`<br/>`;
-                        }
-                        let val = parseFloat(Number(item.data[1]).toFixed(2));
-                        if(val===0){
-                          val = Number(item.data[1]).toExponential(2);
-                        }
-                        sum += 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(self.data.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;
-                    },
-                  }
-                });
-              }else{
-                this.setOption({
-                  toolbox:{
-                    feature:{
-                      dataZoom:{
-                        yAxisIndex:false,
-                        title:{
-                          zoom:self.$t('overall.toolBox.zoom'),
-                          back:self.$t('overall.toolBox.back'),
-                        }
-                      },
-                      magicType:{
-                        type:['stack'],
-                        title:{
-                          stack:self.$t('overall.toolBox.stack')
-                        },
-                        iconStyle:{
-                          borderColor:'#7e7e7e',
-                        },
-                        emphasis:{
-                          borderColor:stackIconChooseBorderColor,
-                        }
-                      },
-                    }
-                  },
-                })
-              }
-            });
-          });
-        } else if (chartSite === 'screen') { // 全屏显示
-          // eslint-disable-next-line
-          if(legend){
-            this.screenLegendList = [];
-            this.isGreyScreen=[]
-            legend.forEach((item, i) => {
-              const legend = {
-                name:item.name,
-                alias:item.alias,
-                showText:this.formatLegend(chartWidth,item.name)
-              };
-              this.screenLegendList.push(legend);
-              this.isGreyScreen.push(false);
-            });
-          }
-          if(this.screenLegendListMore.length!==this.screenLegendList.length){
-            this.screenLegendListMore=this.screenLegendList.filter((item,index)=>index<this.seriesLength);
-          }
-          if(self.echartModalStore){
-            self.echartModalStore.clear();
-            option.title = {};
-            self.showLegend = true;
-            self.$refs['localLoadingScreen'+self.chartIndex].endLoading();
-          }
-          this.$nextTick(() => {
-            let legendDiv = document.getElementById('screenLegendArea'+self.chartIndex);
-            let divHeight = legendDiv.offsetHeight;
-            let screenHeight = document.documentElement.clientHeight || document.body.clientHeight;
-            let sumHeight = Math.floor(screenHeight*0.99*0.8);//margin-top:1vh; dailog:80%
-            self.$refs.screenShowArea.style.height = `${sumHeight - divHeight - self.screenTitleHeight}px`;
-            self.echartModalStore.resize({height: (sumHeight - divHeight - self.screenTitleHeight)});//图表的高度
-            setTimeout(function () {
-              if(self.screenLegendListMore.length!==self.screenLegendList.length){
-                self.seriesItemArrScreen=self.seriesItemScreen.filter((item,index)=>index<self.seriesLength);
-
-              }else{
-                self.seriesItemArrScreen=self.seriesItemScreen
-              }
-              option.series=self.seriesItemArrScreen;
-              if(dataArg&&dataArg.length>0){
-                self.echartModalStore.setOption(option);//显示全屏界面
-                self.noData=false;
-              }else{
-                self.noData=true;
-                option=chartConfig.getOption('noData')
-                self.echartModalStore.setOption(option);//显示全屏界面
-              }
-              self.echartModalStore.on('finished', function () {
-                let legendDiv = document.getElementById('screenLegendArea'+self.chartIndex);
-                let divHeight = legendDiv.offsetHeight;
-                let screenHeight = document.documentElement.clientHeight || document.body.clientHeight;
-                let sumHeight = Math.floor(screenHeight*0.99*0.8);//margin-top:1vh; dailog:80%
-                self.$refs.screenShowArea.style.height = `${sumHeight - divHeight - self.screenTitleHeight}px`;
-                self.echartModalStore.resize({height: (sumHeight - divHeight - self.screenTitleHeight)});//图表的高度
-                self.echartModalStore.off('finished');
-              })
-            }, 100);
-
-            this.echartModalStore.on('magictypechanged', function (params) {
-              self.isStackArea = !self.isStackArea;
-              if(self.isStackArea){
-                this.setOption({
-                  toolbox:{
-                    feature:{
-                      dataZoom:{
-                        yAxisIndex:false,
-                        title:{
-                          zoom:self.$t('overall.toolBox.zoom'),
-                          back:self.$t('overall.toolBox.back'),
-                        }
-                      },
-                      magicType:{
-                        type:['stack'],
-                        title:{
-                          stack:self.$t('overall.toolBox.stack')
-                        },
-                        iconStyle:{
-                          borderColor:'#7e7e7e',
-                        },
-                        emphasis:{
-                          borderColor:stackIconChooseBorderColor,
-                        }
-                      },
-                    }
-
-                  },
-                  tooltip: {
-                    formatter:function(params){
-                      let str = `<div>`;
-                      let sum = 0;
-                      params.forEach((item, i) => {let tip=legend[item.seriesIndex];
-                        let color = self.bgColorList[item.seriesIndex];
-                        if(i===0){
-                          let value=bus.computeTimezone(item.data[0]);
-                          let t_date = new Date(value);
-                          str += [t_date.getFullYear(), t_date.getMonth() + 1, t_date.getDate()].join('-') + " "
-                            + [t_date.getHours(), t_date.getMinutes(),t_date.getSeconds()].join(':');
-                          str +=`<br/>`;
-                        }
-                        let val = parseFloat(Number(item.data[1]).toFixed(2));
-                        if(val===0){
-                          val = Number(item.data[1]).toExponential(2);
-                        }
-                        sum += 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(self.data.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;
-                    },
-                  }
-                });
-              }else{
-                this.setOption({
-                  toolbox:{
-                    feature:{
-                      dataZoom:{
-                        yAxisIndex:false,
-                        title:{
-                          zoom:self.$t('overall.toolBox.zoom'),
-                          back:self.$t('overall.toolBox.back'),
-                        }
-                      },
-                      magicType:{
-                        type:['stack'],
-                        title:{
-                          stack:self.$t('overall.toolBox.stack')
-                        },
-                        iconStyle:{
-                          borderColor:'#7e7e7e',
-                        },
-                        emphasis:{
-                          borderColor:stackIconChooseBorderColor,
-                        }
-                      },
-                    }
-                  },
-                })
-              }
-
-            });
-          });
-        }
-        maxValueCopies=null;
-      },
-      handleLineFeed(str,chartWidth){
-        let rlt='';
-        if(!str){
-          return '';
-        }
-        //计算宽度
-        var span = document.createElement("span");
-        var 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 = str;
-        }else{
-          span.innerText = str;
-        }
-        var txtWidth = parseFloat(window.getComputedStyle(span).width) - result.width;
-        document.body.removeChild(span);
-
-        if(txtWidth < chartWidth){
-          return str;
-        }else {
-          var charNum = `${(chartWidth-100)/(txtWidth/str.length)}`;
-          return str.slice(0,charNum)+'...';
-        }
-      },
-      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())
-        }
-      },
-      // 设置数据, filter区分
-      setData(chartItem, seriesItem, panelId, filter,legend,area,errorMsg) {
-        this.setColor(legend.length);
-        this.$emit('loadingFalse',chartItem);
-        this.filter.from = filter.from;
-        if(errorMsg && errorMsg!==''){
-          this.isError = true;
-          this.errorContent = errorMsg;
-        }else {
-          this.isError = false;
-          this.errorContent = '';
-        }
-        if(area==='showFullScreen'){//全屏按时间查询
-          /*
-          this.legend = legend;
-          this.data = chartItem;
-          this.searchTime[0] = filter.start_time;//将列表的查询时间复制给全屏的查询时间
-          this.searchTime[1] = filter.end_time;
-          this.seriesItemScreen = seriesItem;
-          //this.$refs['localLoadingScreen'+this.chartIndex].endLoading();
-          this.initChart(chartItem, seriesItem, this.$refs.lineChartArea, 'screen',legend);
-          */
-        }else{
-          this.legend = legend;
-          this.$refs['localLoading'+this.chartIndex].startLoading();
-          this.divFirstShow = true;
-          this.firstShow = true; // 展示操作按键
-          this.panelIdInner = panelId;
-          this.data = chartItem;
-          this.seriesItem = seriesItem;
-          this.seriesItemScreen = seriesItem;
-
-          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.seriesItem=seriesItem;
-          let seriesItemArr=seriesItem;
-          if(seriesItem.length>this.seriesLength){
-            seriesItemArr=seriesItem.filter((item,index)=>index<this.seriesLength); // 只查看前seriesLength条
-            this.seriesItemArr=seriesItemArr;
-            this.seriesItemArrScreen=seriesItemArr;
-
-          }else{
-            this.seriesItemArr=seriesItem
-          }
-          this.initChart(chartItem, seriesItemArr, this.$refs.lineChartArea, 'local',legend);
-        }
-
-      },
-      resize(chartItem) {
-        let chartBox = document.getElementById('lineChartDiv'+this.chartIndex);
-        chartBox.style.height = `${this.$chartResizeTool.calculateHeight(chartItem.height)}px`;
-      },
-      clearChart(){
-        if(getChart(this.chartIndex)){
-          getChart(this.chartIndex).clear();
-        }
-        if(this.echartModalStore){
-          this.echartModalStore.clear();
-        }
-        this.data = {};
-      },
-      clickos() {
-        this.dropdownMenuShow=false;
-      },
-      // 删除该图表
-      removeChart() {
-        this.dropdownMenuShow=false;
-        this.$emit('on-remove-chart-block', this.data.id);
-      },
-      // 编辑图表
-      editChart() {
-        this.dropdownMenuShow=false;
-        this.$emit('on-edit-chart-block', this.data.id);
-      },
-      // 重新请求数据 刷新操作
-      refreshChart() {
-        this.dropdownMenuShow=false;
-        let id = this.data.id;
-        this.clearChart();
-        this.$refs['localLoading'+this.chartIndex].startLoading();
-        this.firstShow = false;
-        this.$emit('on-refresh-data', id);
-      },
-      initDialog(){
-        //此时初始化，才能获得screenShowArea对象，否则此对象为undefined，无法初始化图表
-        this.initChart(this.data, this.seriesItem, this.$refs.screenShowArea, 'screen',this.legend);
-        // 日期组件同步时间
-        /*
-        this.$refs.calendar.initTime({
-          start: this.stableFilter.start_time,
-          end: this.stableFilter.end_time,
-        });
-        */
-      },
-      changeDate(st){
-        this.oldSearchTime=st;
-        this.searchTime = st;
-        this.filter.start_time = st[0];
-        this.filter.end_time = st[1];
-      },
-      // 全屏查看
-      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.$refs.calendarPanel.setCustomTime(this.searchTime);
-        this.screenModal = true;
-        this.isGreyScreen=[];
-
-        this.seriesItemScreen = this.seriesItem;
-        // this.seriesItemScreen = this.seriesItem;
-        /*
-                this.searchTime = [];
-                this.searchTime[0] = this.oldSearchTime[0];//将列表的查询时间复制给全屏的查询时间
-                this.searchTime[1] = this.oldSearchTime[1];
-                this.seriesItemScreen = this.seriesItem;
-                this.screenModal = true;
-                */
-        //this.dateChange();
-      },
-      duplicate(){
-        this.dropdownMenuShow=false;
-        const param = {id:this.data.id};
-        this.$post('panel/'+ this.data.panelId+'/charts/duplicate',(param)).then(response => {
-          if (response.code === 200) {
-            this.$message({
-              duration: 2000,
-              type: 'success',
-              message: this.$t("tip.duplicateSuccess")
-            });
-            this.$emit('on-duplicate-chart-block', this.data.id,response.data);
-          }else {
-            if(response.msg){
-              this.$message.error(response.msg);
-            }else if(response.error){
-              this.$message.error(response.error);
-            }else {
-              this.$message.error(response);
-            }
-          }
-        });
-      },
-      dateChange(time) {
-        this.searchTime = [...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();
-        if (this.showSetting) {
-          this.getQueryChart('list');
-        } else {
-          this.getQueryChart('dashboard');
-        }
-      },
-      // 查询数据,修改日期查询全屏数据
-      getQueryChart(type) {
-        /*
-        if (this.echartModalStore) {
-          this.echartModalStore.showLoading();
-        }
-        */
-        let axiosArr = [];
-        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小时
-            let 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;
-          }
-          let step = bus.getStep(startTime,endTime);
-          if (type === 'list') { // 普通模式,主控台使用
-            axiosArr = this.data.elements.map((ele) => {
-              const filterItem = ele;
-              let query = encodeURIComponent(filterItem.expression);
-              return  this.$get('/prom/api/v1/query_range?query='+query+"&start="+this.$stringTimeParseToUnix(startTime)+"&end="+this.$stringTimeParseToUnix(endTime)+'&step='+step);
-            });
-          } else if (type === 'dashboard') { // 概览模式,指标概览中使用
-            // 概览模式,需要区分单独一个和多个
-            if (this.stableFilter.chartCount === 'multiple') {
-              let query = encodeURIComponent(this.data.title);
-              axiosArr = [this.$get('/prom/api/v1/query_range?query='+query+"&start="+this.$stringTimeParseToUnix(startTime)+"&end="+this.$stringTimeParseToUnix(endTime)+'&step='+step)];
-            } else {
-              let query = encodeURIComponent(this.data.elements[0].expression);
-              axiosArr = [this.$get('/prom/api/v1/query_range?query='+query+"&start="+this.$stringTimeParseToUnix(startTime)+"&end="+this.$stringTimeParseToUnix(endTime)+'&step='+step)];
-            }
-          }
-          // 一个图表
-          axios.all(axiosArr).then((res) => {
-            if (res.length > 0) {
-              const series = [];
-              const legend = [];
-              const sumData = {
-                name: 'sum',
-                data: [],
-                visible: true,
-                threshold: null,
-              };
-              if(!this.data.type){
-                this.data.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.data.type,
-                          lineStyle: {
-                            width: 1,
-                            opacity: 0.9
-                          },
-                          //visible: true,
-                          //threshold: null,
-                        },
-                        metric_name: '',
-                      };
-                      if(this.data.type === 'stackArea'){
-                        seriesItem.theData.type='line';
-                        seriesItem.theData.stack=this.data.title;
-                        seriesItem.theData.areaStyle={"opacity": 0.3};
-                      }
-
-                      if((this.data.type === 'line'||this.data.type === 'stackArea'||this.data.type === 'bar')&& this.data.param && this.data.param.threshold){
-                        seriesItem.theData.markLine={
-                          silent: true,
-                          symbol:['circle','circle'],
-                          label:{
-                            distance:this.computeDistance(chartDataFormat.getUnit(this.data.unit?this.data.unit:2).compute(this.data.param.threshold)),
-                            formatter:function(params){
-                              return chartDataFormat.getUnit(this.data.unit?this.data.unit:2).compute(params.value)
-                            }
-                          },
-                          lineStyle:{
-                            color:'#d64f40',
-                            width:2,
-                            type:'dotted'
-                          },
-                          data: [{
-                            yAxis: Number(this.data.param.threshold)
-                          }, ]
-                        }
-                      }
-
-                      // 图表中每条线的名字,后半部分
-                      // 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.data.elements[pos].expression;
-                        }
-                        let alias=this.dealLegendAlias(host,this.data.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) => {
-                          /*曲线汇总暂不需要
-                          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]];
-                          }
-                          */
-                          return [dpsItem[0] * 1000, dpsItem[1]];
-                        });
-                        series.push(seriesItem.theData);
-
-                      } else if (this.data.elements && this.data.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;
-                  }
-                }
-              });
-              this.setColor(legend.length);
-              this.seriesItemScreen=series;
-              // this.seriesItemArrScreen=series.filter((item,index)=>index<this.seriesLength);
-              this.initChart(this.data,series, this.$refs.screenShowArea, 'screen',legend);
-            }
-          }).catch((error) => {
-            if (error) {
-              this.$message.error(error.toString());
-            }
-          });
-        });
-      },
-      computeDistance:function(str){
-        var width = 0;
-        var 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));
-      },
-      showLoad(chartItem) {
-        //设置高度
-        this.$nextTick(() => {
-          const chartBox = document.getElementById('lineChartDiv'+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;
-      },
-      dealLegendAlias:function(legend,expression){
-        if(/\{\{.+\}\}/.test(expression)){
-          let labelValue=expression.replace(/(\{\{.+?\}\})/g,function(i){
-            let label=i.substr(i.indexOf('{{')+2,i.indexOf('}}')-i.indexOf('{{')-2);
-            let reg=new RegExp(label+'=".+?"');
-            let value=null;
-            if(reg.test(legend)){
-              let find=legend.match(reg)[0];
-              value=find.substr(find.indexOf('"')+1,find.lastIndexOf('"')-find.indexOf('"')-1);
-            }
-            return value?value:label;
-          });
-          return labelValue
-        }else{
-          return expression;
-        }
-
-      },
-      // 获取格式
-      getNumStr(num) {
-        if (num >= 1000) {
-          const kbNum = num / 1000;
-          if (kbNum >= 1000) {
-            const mbNum = kbNum / 1000;
-            if (mbNum > 1000) {
-              const gbNum = mbNum / 1000;
-              return `${gbNum.toFixed(2)}B`;
-            }
-            return `${mbNum.toFixed(2)}M`;
-          }
-          return `${kbNum.toFixed(2)}K`;
-        }
-        return num.toFixed(2);
-      },
-      handleClose(){},
-      // 加载更多
-      loadMore(){
-        this.seriesItemArr=this.seriesItem;
-        this.legendListMore=this.legendList;
-        let chartInfo=this.data;
-        let dataArg=this.seriesItem;
-        let maxValueCopies = this.getMaxValue(dataArg,chartInfo);
-        let maxValue=maxValueCopies.maxValue;
-        let minValue=maxValueCopies.minValue;
-        let dot=maxValueCopies.dot;
-        let copies=maxValueCopies.copies;
-        let unit=maxValueCopies.unit;
-        let oldDot=maxValueCopies.oldDot;
-        getChart(this.chartIndex).setOption({
-          series:this.seriesItem,
-          yAxis:{
-            minInterval: chartDataFormat.Interval(maxValue,copies,unit.type,'min'),
-            maxInterval: chartDataFormat.Interval(maxValue,copies,unit.type,'max')*Math.ceil(dataArg.length/5),
-          }
-        });
-        if(this.hasLegendOptions){
-          this.computeLegendData(this.legendListMore,this.seriesItemArr,'local')
-        }
-        this.$nextTick(()=>{
-          let divHeight = this.$refs.legendArea.offsetHeight;
-          if(!this.chartInfo.height){
-            getChart(this.chartIndex).resize({height:(318-divHeight-this.$chartResizeTool.titleHeight-this.$chartResizeTool.chartBlankHeight)});
-          }else {
-            getChart(this.chartIndex).resize({height:(this.chartInfo.height-divHeight-this.$chartResizeTool.titleHeight-this.$chartResizeTool.chartBlankHeight)});
-          }
-        })
-      },
-      // 加载更多
-      loadScreenMore(){
-        this.seriesItemArrScreen=this.seriesItemScreen;
-        this.screenLegendListMore=this.screenLegendList;
-        let chartInfo=this.data;
-        let dataArg=this.seriesItem;
-
-        let maxValueCopies = this.getMaxValue(dataArg,chartInfo);
-        let maxValue=maxValueCopies.maxValue;
-        let minValue=maxValueCopies.minValue;
-        let dot=maxValueCopies.dot;
-        let copies=maxValueCopies.copies;
-        let unit=maxValueCopies.unit;
-        let oldDot=maxValueCopies.oldDot;
-        this.echartModalStore.setOption({
-          series:this.seriesItemScreen,
-          yAxis:{
-            minInterval: chartDataFormat.Interval(maxValue,copies,unit.type,'min'),
-            maxInterval: chartDataFormat.Interval(maxValue,copies,unit.type,'max')*Math.ceil(dataArg.length/5),
-          }
-        });
-        if(this.hasLegendOptions){
-          this.computeLegendData(this.screenLegendListMore,this.seriesItemArrScreen,'screen')
-        }
-        this.$nextTick(()=>{
-          let legendDiv = document.getElementById('screenLegendArea'+this.chartIndex);
-          let divHeight = legendDiv.offsetHeight;
-          let screenHeight = document.documentElement.clientHeight || document.body.clientHeight;
-          let sumHeight = Math.floor(screenHeight*0.99*0.8);//margin-top:1vh; dailog:80%
-          this.$refs.screenShowArea.style.height = `${sumHeight - divHeight - this.screenTitleHeight}px`;
-          this.echartModalStore.resize({height: (sumHeight - divHeight - this.screenTitleHeight)});//图表的高度
-        })
-      },
-      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 - 1; i++) {
-              if(dataArg[j].data[i+1][1]!=='NaN'){
-                maxValue = (maxValue < Number(dataArg[j].data[i+1][1]) ? Number(dataArg[j].data[i+1][1]) : maxValue);
-                minValue = (minValue > Number(dataArg[j].data[i+1][1]) ? Number(dataArg[j].data[i+1][1]) : minValue);
-              }
-            }
-          }
-        }
-        let chartUnit=chartInfo.unit?chartInfo.unit:2;
-        let 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++;
-        }
-        let 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;
-      if(!document.onmousemove){// 添加鼠标移动事件监听
-        document.onmousemove=lineChartMove
-      }
-    },
-    beforeDestroy() {
-      this.clearChart();
-      getChart(this.chartIndex).dispose();
-      if(!document.onmousemove){// 移除鼠标移动事件监听
-        document.onmousemove=null;
-      }
-      setChart(this.chartIndex, null);
-      window.removeEventListener('resize', this.chartResize);
-    },
-  };
-
-</script>
diff --git a/nezha-fronted/src/components/common/project/popData/totalChart.vue b/nezha-fronted/src/components/common/project/popData/totalChart.vue
deleted file mode 100644
index 4a487bba2..000000000
--- a/nezha-fronted/src/components/common/project/popData/totalChart.vue
+++ /dev/null
@@ -1,689 +0,0 @@
-<template>
-  <div class="chart-box">
-      <div v-for="(item, index) in dataList" :key="item.id" :id="'chart-' + item.id" :name="item.title"  v-show="!item.isHide" class="chart">
-        <lineChars
-          v-if="item.type === 'line' || item.type === 'bar' ||item.type == 'stackArea' || item.type === 4"
-          :key="'inner' + item.id"
-          :ref="'editChart'+item.id"
-          @on-refresh-data="refreshChart"
-          @on-remove-chart-block="removeChart"
-          :panel-id="index"
-          :chart-index="index"
-          :chart-data="item"
-          v-loading="item.loading"
-          @loadingFalse="loadingFalse"
-        >
-        </lineChars>
-      </div>
-    </div>
-</template>
-
-<script>
-  import axios from 'axios';
-  import bus from '@/libs/bus';
-  import chartDataFormat from "@/components/charts/chartDataFormat";
-  import lineChars from "./lineChart";
-	export default {
-		name:"totalChart",
-    components:{
-      lineChars
-    },
-    props:{
-      nodesArray:{},
-      moduleId:{},
-      projectId:{},
-    },
-    watch:{
-
-    },
-    data(){
-		  return{
-        dataList:[],
-        filter:{
-          panelId:'',
-          start_time:'',
-          end_time:'',
-        },
-        chartDataCacheGroup:new Map
-      }
-    },
-    mounted(){
-      let item = {...this.nodesArray.find((item)=>item.id==this.moduleId)};
-      let arr=[];
-      item.expressions.forEach((item1,index)=>{
-        let obj={...item,elements:[{...item1,expression:item1.metric,}],isHide:false,type:'line',title:item1.name,id:index,loading:true};
-        obj.unit=item1.unit;
-        arr.push(obj)
-      });
-      this.dataList=arr;
-      this.$nextTick(()=>{
-        arr.forEach(item1=>{
-          this.getData(item1, '', '');
-        })
-      });
-      this.$set(this.filter, "panelId", this.projectId);
-    },
-    methods:{
-		  //刷新图表
-      refreshChart(chartId,searchTime) {
-        this.dataList.forEach((item, index) => {
-          if (item.id === chartId) {
-            this.getChartData(item, index, 'refresh');
-          }
-        });
-      },
-      // 删除图表
-      removeChart(chartId) { //from 区分从哪里点击的删除 1.从图表面板 2.从编辑框
-        const chart = this.dataList.find(item => item.id === chartId);
-        if (chart) {
-          this.$emit('on-remove-chart', chart);
-        }
-      },
-      //获取图表数据
-		  getData(chartInfo, pos, filterType){
-        this.$set(this.filter, "start_time", bus.timeFormate(new Date().getTime()-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"));
-        let startTime =  this.filter.start_time;
-        let endTime = this.filter.end_time;
-        let step = bus.getStep(startTime, endTime);
-        chartInfo.loading=true;
-        const chartItem = chartInfo;
-        this.$nextTick(() => {
-          const axiosArr = chartItem.elements.map((ele) => {
-            const filterItem = ele;
-            let query = encodeURIComponent(filterItem.expression);
-            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 = [];
-              const sumData = {
-                name: 'sum',
-                data: [],
-                visible: true,
-                threshold: null,
-              };
-              let errorMsg = "";
-              res.forEach((response, innerPos) => {
-                if (response.status === 'success') {
-                  errorMsg = "";
-                  if (response.data.result) {
-                    // 循环处理每个elements下获取的数据列
-                    if (chartItem.type === 'singleStat') {
-                      if (response.data.result.length === 1) {
-                        let statistics = chartItem.param.statistics;
-                        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) => {
-                        const seriesItem = {
-                          theData: {
-                            name: '',
-                            symbol: 'emptyCircle',  //去掉点
-                            symbolSize: [2, 2],
-                            smooth: 0.2,  //曲线变平滑
-                            showSymbol: false,
-                            data: [],
-                            lineStyle: {
-                              width: 1,
-                              opacity: 0.9
-                            },
-                            type: chartInfo.type,
-                          },
-                          metric_name: '',
-                        };
-
-                        if (chartInfo.type === 'stackArea') {
-                          seriesItem.theData.type = 'line';
-                          seriesItem.theData.stack = chartInfo.title;
-                          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: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)
-                            }, ]
-                          }
-                        }
-                        // 图表中每条线的名字,后半部分
-                        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 = this.$refs['editChart' + chartItem.id][0].dealLegendAlias(host, chartItem.elements[innerPos].legend);
-                          if (!alias || alias === '') {
-                            alias = host;
-                          }
-                          legend.push({name: host + resIndex, alias: alias});
-                          // 图表中每条线的名字,去掉最后的逗号与空格:metric名称,  标签1=a,标签2=c
-                          seriesItem.theData.name = host + resIndex;
-                          //alert(seriesItem.theData.name);
-                          seriesItem.metric_name = seriesItem.theData.name;
-                          // 将秒改为毫秒
-                          //alert('table=='+JSON.stringify(queryItem))
-                          seriesItem.theData.data = tempArr.map((dpsItem, dpsIndex) => {
-                            let t_date = new Date(dpsItem[0] * 1000);
-                            let timeTmp = bus.timeFormate(t_date, 'yyyy-MM-dd hh:mm:ss');
-                            tableData.push({//表格数据
-                              element: {element: host, alias: alias},
-                              time: timeTmp,//采集时间
-                              value: dpsItem[1],//数值
-                            });
-                            return [dpsItem[0] * 1000, dpsItem[1]];
-                          });
-                          series.push(seriesItem.theData);
-                        }
-                      });
-                    }
-                  }
-                } 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) {
-                let 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) {
-                  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 {
-              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) {
-                  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);
-                  }
-                }
-              }
-            }
-          }).catch((error) => {
-            if (error) {
-              this.$message.error(error.toString());
-              console.error(error)
-            }
-          });
-        });
-      },
-
-      getChartDataForSearch(chartItem,realIndex){
-        let chartData = this.chartDataCacheGroup.get(chartItem.id);
-        if(chartData){
-          let filterType = chartData.filterType;
-          let errorMsg = chartData.errorMsg;
-          let tableData = chartData.tableData;
-          let panelId = chartData.panelId;
-          let filter = chartData.filter;
-          let legend = chartData.legend;
-          let series = chartData.series;
-          let 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) {
-              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 {
-          this.getChartData(chartItem, realIndex);
-        }
-      },
-      // 获取一个图表具体数据,图表信息，图表位置index
-      getChartData(chartInfo, pos, filterType) {
-        const chartItem = chartInfo;
-        const index = pos; // 指标
-        if(chartItem.type === 'assetInfo'){
-          if (chartItem.from != '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.title = 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 (this.isModel) {
-          this.modelStaticData(chartInfo, filterType);
-        } else {
-          // 没有数据的设置提示信息暂无数据-针对每一个图
-          const len = chartItem.elements.length;
-          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();
-              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;
-            }
-            let step = bus.getStep(startTime, endTime);
-            this.$nextTick(() => {
-              const axiosArr = chartItem.elements.map((ele) => {
-                const filterItem = ele;
-                let query = encodeURIComponent(filterItem.expression);
-                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 = [];
-                  const sumData = {
-                    name: 'sum',
-                    data: [],
-                    visible: true,
-                    threshold: null,
-                  };
-                  let errorMsg = "";
-                  res.forEach((response, innerPos) => {
-                    if (response.status === 'success') {
-                      errorMsg = "";
-                      if (response.data.result) {
-                        // 循环处理每个elements下获取的数据列
-                        if (chartItem.type === 'singleStat') {
-                          if (response.data.result.length === 1) {
-                            let statistics = chartItem.param.statistics;
-                            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) => {
-                            const seriesItem = {
-                              theData: {
-                                name: '',
-                                symbol: 'emptyCircle',  //去掉点
-                                symbolSize: [2, 2],
-                                smooth: 0.2,  //曲线变平滑
-                                showSymbol: false,
-                                data: [],
-                                lineStyle: {
-                                  width: 1,
-                                  opacity: 0.9
-                                },
-                                type: chartInfo.type,
-                              },
-                              metric_name: '',
-                            };
-
-                            if (chartInfo.type === 'stackArea') {
-                              seriesItem.theData.type = 'line';
-                              seriesItem.theData.stack = chartInfo.title;
-                              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: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)
-                                }, ]
-                              }
-                            }
-                            // 图表中每条线的名字,后半部分
-                            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 = this.$refs['editChart' + chartItem.id][0].dealLegendAlias(host, chartItem.elements[innerPos].legend);
-                              if (!alias || alias === '') {
-                                alias = host;
-                              }
-                              legend.push({name: host + resIndex, alias: alias});
-                              // 图表中每条线的名字,去掉最后的逗号与空格:metric名称,  标签1=a,标签2=c
-                              seriesItem.theData.name = host + resIndex;
-                              //alert(seriesItem.theData.name);
-                              seriesItem.metric_name = seriesItem.theData.name;
-                              // 将秒改为毫秒
-                              //alert('table=='+JSON.stringify(queryItem))
-                              seriesItem.theData.data = tempArr.map((dpsItem, dpsIndex) => {
-                                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],//数值
-                                });
-                                return [dpsItem[0] * 1000, dpsItem[1]];
-                              });
-                              series.push(seriesItem.theData);
-
-                            }
-                          });
-                        }
-                      }
-                    } 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) {
-                    let 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) {
-                      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 {
-                  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) {
-                      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);
-                      }
-                    }
-                  }
-                }
-              }).catch((error) => {
-                if (error) {
-                  this.$message.error(error.toString());
-                  console.error(error)
-                }
-              });
-            });
-          }
-        }
-      },
-      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');
-      },
-      // 关闭loading状态
-      loadingFalse(item){
-        this.$set(this.dataList[item.id],'loading',false);
-      },
-    },
-	}
-</script>
-
-<style scoped>
-  .chart{
-    width: 500px;
-    height: 300px;
-    border: 1px solid #FFFFFF;
-    box-shadow: 1px 2px 4px 0 rgba(0,0,0,0.12), -1px 1px 9px -1px rgba(205,205,205,0.77);
-    margin-bottom: 15px;
-  }
-  .chart-box{
-    /*padding-left: 600px;*/
-    position: relative;
-    max-height: calc(100vh - 100px);
-    padding: 3px 15px 50px 15px;
-    z-index: 11;
-  }
-</style>
diff --git a/nezha-fronted/src/components/common/project/topologyL5.vue b/nezha-fronted/src/components/common/project/topologyL5.vue
index bf1921fb8..8edc97447 100644
--- a/nezha-fronted/src/components/common/project/topologyL5.vue
+++ b/nezha-fronted/src/components/common/project/topologyL5.vue
@@ -270,10 +270,6 @@
       <div v-if="popDataShow.info">
         <popDataInfo :moduleId="moduleId" :projectId="projectInfo.id"></popDataInfo>
       </div>
-      <!--chart-->
-      <div v-if="popDataShow.total">
-        <topoTooltip :chartDataParent="chartDataInfo" :filterTime="filterTime" :isChart="true"/>
-      </div>
     </div>
     <!--endpoint-->
     <transition name="right-box">
@@ -340,7 +336,6 @@
   import VueDraggableResizable from 'vue-draggable-resizable';//api https://github.com/mauricius/vue-draggable-resizable
   import popDataMain from './popData/Main'
   import popDataInfo from './popData/Info'
-  import TotalChart from "./popData/totalChart";
   import alertTable from "./popData/alertTable";
   import assetTable from "./popData/assetTable";
   import endpointTable from "./popData/endpointTable";
@@ -481,7 +476,6 @@
       VueDraggableResizable,
       popDataMain,
       popDataInfo,
-      TotalChart,
       alertTable,
       assetTable,
       endpointTable,
@@ -602,81 +596,7 @@
     methods:{
       init(){
         canvasOptions.on=this.onMessage;
-        this.getTopologyData().then((data)=>{
-          this.openTopologyData(data).then(()=>{
-            //获取对应的值 给节点 连线添加对应动画
-            this.lineName=data.lineName?data.lineName:this.lineName;
-            this.chartGetData=[];
-            let axiosArr=[];
-            let promiseArr=[];
-            let self=this;
-            let pensPromise=(pen, arr,index)=>{
-              return new Promise(function(resolve, reject) {
-                Promise.all(arr).then((res)=>{
-                  self.chartGetData[index].res=self.computeData(res,pen.data.aggregation,pen);
-                  self.setAnimation(pen,self.chartGetData[index].res);
-                  resolve()
-                });
-              });
-            };
-            let endTime=this.filterTime[1];
-            let startTime=this.filterTime[0];
-            let step=bus.getStep(startTime,endTime);
-            data.pens&&data.pens.forEach((item,index)=>{
-              this.chartGetData.push({id:item.id,res:[]});
-              let arr=item.data.expressArr.map((ele)=>{
-                let query=encodeURIComponent(ele);
-                if(!query){
-                  return new Promise(resolve=>{
-                    resolve({data:"",status:'no query'});
-                  })
-                }
-                query+='&nullType='+'connected';
-                return this.$get('/prom/api/v1/query_range?query='+query+"&start="+this.$stringTimeParseToUnix(startTime)+"&end="+this.$stringTimeParseToUnix(endTime)+'&step='+step);
-              });
-              axiosArr.push({item,arr});
-              promiseArr.push(pensPromise(item,arr,index))
-            });
-            Promise.all(promiseArr).then((res)=>{
-              getTopology(this.topologyIndex).open(data);
-              getTopology(this.topologyIndex).lock(1);
-              this.objChange=false;
-              let flag=false;
-
-              let position={
-                x:this.$refs['topology-canvas'+this.topologyIndexF].offsetWidth,
-                y:this.$refs['topology-canvas'+this.topologyIndexF].offsetHeight,
-              }
-              getTopology(this.topologyIndex).centerView(20);
-              getTopology(this.topologyIndex).data.pens.forEach(item=>{
-                if(flag){
-                  return
-                }
-                if(item.rect.ex>position.x || item.rect.ey>position.y){
-                  getTopology(this.topologyIndex).fitView(20);
-                  flag=true
-                }
-              });
-              getTopology(this.topologyIndex).centerView(20);
-              this.penToolTipScale= getTopology(this.topologyIndex).data.scale;
-              setTimeout(()=>{
-                getTopology(this.topologyIndex).data.pens.forEach(item=>{
-                  if(item.animatePlay){
-                    item.stopAnimate();
-                    setTimeout(()=>{
-                      item.startAnimate()
-                    })
-                  }
-                },100);
-              })
-              // if(this.fromPrev){
-              //   getTopology(this.topologyIndex).scaleTo(data.scale/2)
-              // }
-              // getTopology(this.topologyIndex).fitView();
-              this.getNodesArr();
-            });
-          })
-        });
+        this.reload();
       },
 
       reload(){
@@ -721,12 +641,10 @@
               getTopology(this.topologyIndex).lock(1);
               this.objChange=false;
               let flag=false;
-
               let position={
                 x:this.$refs['topology-canvas'+this.topologyIndexF].offsetWidth,
                 y:this.$refs['topology-canvas'+this.topologyIndexF].offsetHeight,
               }
-              getTopology(this.topologyIndex).centerView(20);
               getTopology(this.topologyIndex).data.pens.forEach(item=>{
                 if(flag){
                   return
@@ -757,6 +675,7 @@
           })
         });
       },
+
       dateChange() {
         let nowTimeType = this.$refs.pickTime.$refs.timePicker.nowTimeType;
         this.setSearchTime(nowTimeType.type,nowTimeType.value);
@@ -847,7 +766,7 @@
                 let self=this;
                 data.pens.forEach((item=>{
                   if(item.type===0&&item.data.imageId){
-                    item.image=this.iconArray.find(item1=>item1.id==item.data.imageId).image
+                    item.image=this.iconArray.find(item1=>item1.id==item.data.imageId).image;
                   }
                  if(item.type===0){
                    promiseArr.push(this.$get('/module/stat',{id:item.data.moduleId}));
@@ -1638,6 +1557,8 @@
           imgidList.forEach((item,index)=>{
            if(item.data.imageId){
              promiseArr.push( this.dealImg(`/project/topo/icon/${item.data.imageId}`));
+           }else{
+             promiseArr.push('');
            }
           });
           Promise.all(promiseArr).then(res2=>{
@@ -1647,17 +1568,9 @@
               }
             });
             this.iconArray.forEach((item,index)=>{
-              if(!item.id){return};
-              this.tools[1].children.push({
-                ...imageTemp,
-                data:{
-                  ...imageTemp.data,
-                  text:item.imageName,
-                  image:res2[index],
-                  imageId:item.id,
-                }
-              })
-              item.image=res2[index];
+              if(item.id){
+                item.image=res2[index];
+              }
             });
             this.imgInit=true;
           })
@@ -1862,9 +1775,23 @@
         // this.toolShow.attrCord=[domRect.width-350,0];
         // this.toolShow.height=domRect.height;
         getTopology(this.topologyIndex).canvasPos=domRect;
-        getTopology(this.topologyIndex).centerView();
+        let flag=false;
+
+        let position={
+          x:this.$refs['topology-canvas'+this.topologyIndexF].offsetWidth,
+          y:this.$refs['topology-canvas'+this.topologyIndexF].offsetHeight,
+        }
+        getTopology(this.topologyIndex).data.pens.forEach(item=>{
+          if(flag){
+            return
+          }
+          if(item.rect.ex>position.x || item.rect.ey>position.y){
+            getTopology(this.topologyIndex).fitView(20);
+            flag=true
+          }
+        });
+        getTopology(this.topologyIndex).centerView(20);
         this.getNodesArr();
-        console.log(213213123123);
       },
       canvasMove(e){// 画布上的移动 确定tooltip的位置
         if(this.tooltipPosition.show){
diff --git a/nezha-fronted/src/components/common/project/topologyPrev.vue b/nezha-fronted/src/components/common/project/topologyPrev.vue
index c743818c3..5a3c92be5 100644
--- a/nezha-fronted/src/components/common/project/topologyPrev.vue
+++ b/nezha-fronted/src/components/common/project/topologyPrev.vue
@@ -63,7 +63,7 @@
                          :popper-append-to-body="false"
                          @change="changeTopologyOpt(lineName,'lineName')">
                <div slot="prefix">
-                <div class="icon-item">
+                <div class="icon-item" style="width: 100%;padding: 0">
                   <svg>
                     <g fill="none" stroke="black" stroke-width="1">
                       <path
@@ -74,14 +74,15 @@
                   </svg>
                 </div>
               </div>
-                <el-option :disabled="true" :value="false">默认连线类型</el-option>
+                <el-option :disabled="true" :value="false">{{$t('project.topology.defaultLineType')}}</el-option>
                 <el-option v-for="(item,index) in penLineType" :value="item.name" :key="index">
-                  <div class="icon-item">
+                  <div class="icon-item" style="position: relative;width: 100%;padding: 0">
                     <svg>
                     <g fill="none" :stroke="(lineName==item.name)?'#ee9d3f':'black'" stroke-width="1">
                     <path :d="item.d" :stroke-dasharray="item['stroke-dasharray']"></path>
                     </g>
                     </svg>
+                    <span style="position: absolute;left:60px;top: 0;">{{item.name}}</span>
                   </div>
                 </el-option>
               </el-select>
@@ -97,6 +98,7 @@
             ref="topTool"
             @toolShowChange="toolShowChange"
             :cachesIndex="cachesIndex"
+            :redoIndexChange="redoIndexChange"
             :toolShow="toolShow">
           </topology-top-tool>
 
@@ -245,7 +247,9 @@
       <div :style="{position:'absolute',top:tooltipPosition.top+'px',left:tooltipPosition.left+'px'}"
            v-if="tooltipPosition.show&&!editTopologyFlag"
            @mouseover="tooltipOver"
-           @mouseout="tooltipOut">
+           @mouseout="tooltipOut"
+           ref="topoTooltip"
+      >
         <topoTooltip :chartDataParent="chartData" :filterTime="filterTime"/>
       </div>
     </div>
@@ -266,10 +270,6 @@
       <div v-if="popDataShow.info">
         <popDataInfo :moduleId="moduleId" :projectId="projectInfo.id"></popDataInfo>
       </div>
-      <!--chart-->
-      <div v-if="popDataShow.total">
-        <topoTooltip :chartDataParent="chartDataInfo" :filterTime="filterTime" :isChart="true"/>
-      </div>
     </div>
     <!--endpoint-->
     <transition name="right-box">
@@ -336,7 +336,6 @@
   import VueDraggableResizable from 'vue-draggable-resizable';//api https://github.com/mauricius/vue-draggable-resizable
   import popDataMain from './popData/Main'
   import popDataInfo from './popData/Info'
-  import TotalChart from "./popData/totalChart";
   import alertTable from "./popData/alertTable";
   import assetTable from "./popData/assetTable";
   import endpointTable from "./popData/endpointTable";
@@ -385,6 +384,7 @@
           name:'',
         },
         saveData:{},
+        redoIndex:0,
         dataLength:0,
         editTopologyFlag:false,
         searchTime: bus.getTimezontDateRange(),
@@ -446,9 +446,9 @@
         chartData:{},
         chartGetData:[],
         penLineType:[
-          {d:'M5 19 a50,100 0 0,1 40,0',"stroke-dasharray":"",name:'curve'},
-          {d:'M5 8 l20 0 l0 12 l20 0',"stroke-dasharray":"",name:'polyline'},
-          {d:'M5 14 l40 0',"stroke-dasharray":"",name:'line'},
+          {d:'M5 19 a50,100 0 0,1 40,0',"stroke-dasharray":"",name:this.$t('project.topology.curve')},
+          {d:'M5 8 l20 0 l0 12 l20 0',"stroke-dasharray":"",name:this.$t('project.topology.polyline')},
+          {d:'M5 14 l40 0',"stroke-dasharray":"",name:this.$t('project.topology.line')},
           // {d:'M5 20 C0,8 50,0 85,0',"stroke-dasharray":"",name:'mind'},
         ],
         lineName:'curve',
@@ -476,7 +476,6 @@
       VueDraggableResizable,
       popDataMain,
       popDataInfo,
-      TotalChart,
       alertTable,
       assetTable,
       endpointTable,
@@ -597,81 +596,7 @@
     methods:{
       init(){
         canvasOptions.on=this.onMessage;
-        this.getTopologyData().then((data)=>{
-          this.openTopologyData(data).then(()=>{
-            //获取对应的值 给节点 连线添加对应动画
-            this.lineName=data.lineName?data.lineName:this.lineName;
-            this.chartGetData=[];
-            let axiosArr=[];
-            let promiseArr=[];
-            let self=this;
-            let pensPromise=(pen, arr,index)=>{
-              return new Promise(function(resolve, reject) {
-                Promise.all(arr).then((res)=>{
-                  self.chartGetData[index].res=self.computeData(res,pen.data.aggregation,pen);
-                  self.setAnimation(pen,self.chartGetData[index].res);
-                  resolve()
-                });
-              });
-            };
-            let endTime=this.filterTime[1];
-            let startTime=this.filterTime[0];
-            let step=bus.getStep(startTime,endTime);
-            data.pens&&data.pens.forEach((item,index)=>{
-              this.chartGetData.push({id:item.id,res:[]});
-              let arr=item.data.expressArr.map((ele)=>{
-                let query=encodeURIComponent(ele);
-                if(!query){
-                  return new Promise(resolve=>{
-                    resolve({data:"",status:'no query'});
-                  })
-                }
-                query+='&nullType='+'connected';
-                return this.$get('/prom/api/v1/query_range?query='+query+"&start="+this.$stringTimeParseToUnix(startTime)+"&end="+this.$stringTimeParseToUnix(endTime)+'&step='+step);
-              });
-              axiosArr.push({item,arr});
-              promiseArr.push(pensPromise(item,arr,index))
-            });
-            Promise.all(promiseArr).then((res)=>{
-              getTopology(this.topologyIndex).open(data);
-              getTopology(this.topologyIndex).lock(1);
-              this.objChange=false;
-              let flag=false;
-
-              let position={
-                x:this.$refs['topology-canvas'+this.topologyIndexF].offsetWidth,
-                y:this.$refs['topology-canvas'+this.topologyIndexF].offsetHeight,
-              }
-              getTopology(this.topologyIndex).centerView(20);
-              getTopology(this.topologyIndex).data.pens.forEach(item=>{
-                if(flag){
-                  return
-                }
-                if(item.rect.ex>position.x || item.rect.ey>position.y){
-                  getTopology(this.topologyIndex).fitView(20);
-                  flag=true
-                }
-              });
-              getTopology(this.topologyIndex).centerView(20);
-              this.penToolTipScale= getTopology(this.topologyIndex).data.scale;
-              setTimeout(()=>{
-                getTopology(this.topologyIndex).data.pens.forEach(item=>{
-                  if(item.animatePlay){
-                    item.stopAnimate();
-                    setTimeout(()=>{
-                      item.startAnimate()
-                    })
-                  }
-                },100);
-              })
-              // if(this.fromPrev){
-              //   getTopology(this.topologyIndex).scaleTo(data.scale/2)
-              // }
-              // getTopology(this.topologyIndex).fitView();
-              this.getNodesArr();
-            });
-          })
-        });
+        this.reload();
       },
 
       reload(){
@@ -716,12 +641,10 @@
               getTopology(this.topologyIndex).lock(1);
               this.objChange=false;
               let flag=false;
-
               let position={
                 x:this.$refs['topology-canvas'+this.topologyIndexF].offsetWidth,
                 y:this.$refs['topology-canvas'+this.topologyIndexF].offsetHeight,
               }
-              getTopology(this.topologyIndex).centerView(20);
               getTopology(this.topologyIndex).data.pens.forEach(item=>{
                 if(flag){
                   return
@@ -752,6 +675,7 @@
           })
         });
       },
+
       dateChange() {
         let nowTimeType = this.$refs.pickTime.$refs.timePicker.nowTimeType;
         this.setSearchTime(nowTimeType.type,nowTimeType.value);
@@ -842,7 +766,7 @@
                 let self=this;
                 data.pens.forEach((item=>{
                   if(item.type===0&&item.data.imageId){
-                    item.image=this.iconArray.find(item1=>item1.id==item.data.imageId).image
+                    item.image=this.iconArray.find(item1=>item1.id==item.data.imageId).image;
                   }
                   if(item.type===0){
                     promiseArr.push(this.$get('/module/stat',{id:item.data.moduleId}));
@@ -1161,15 +1085,8 @@
       },
 
       onMessage(event,data,e){
-        // console.log('onMessage',event,data);
+        // console.log('onMessage',event);
         // console.log(getTopology(this.topologyIndex))
-        if(getTopology(this.topologyIndex)){
-          this.cachesIndex=getTopology(this.topologyIndex).caches.index;
-          if(this.$refs.topTool){
-            this.$refs.topTool.redoFlag=false
-          }
-          ;
-        }
         if(!Array.isArray(data)&&data){//判断不是数组 提前个data配置好节点属性
           // if(data.type===0){
           //   data.textRect=new Rect(data.rect.ex-10,data.rect.ey-10,data.rect.width,data.rect.height);
@@ -1213,13 +1130,14 @@
           }else if(data.type==1&& !data.data){
             //连线是否自动计算锚点
             // data.manualCps=true;
+            data.animateColor='#FA901C';
             data.data={
               animatePlay:false,
               strokeStyle:data.strokeStyle,
               animateColor:data.animateColor,
-              arrowColor:data.arrowColor,
-              fromArrowColor:data.fromArrowColor,
-              toArrowColor:data.toArrowColor,
+              arrowColor:"#00000",
+              fromArrowColor:"#00000",
+              toArrowColor:"#00000",
               lineWidth:1,
               //chart 配置项
               valueMapping:[{
@@ -1246,12 +1164,12 @@
               moduleName:'',
               url:'',
             };
-            data.animateColor='#FA901C'
           }
           if(data.type===0||data.type===1){
             data.lineWidth=data.data.lineWidth;
           }
         }
+
         switch(event){
           case 'moveInNode':
           case 'moveInLine':
@@ -1263,7 +1181,26 @@
             this.tooltipPosition.show=false;
             setTimeout(()=>{
               this.tooltipPosition.show=true;
-            },50);
+              let ePosition=window.ePosition;
+              let boxWidth=document.getElementsByClassName('page')[0].offsetWidth;
+              let boxHeight=document.getElementsByClassName('page')[0].offsetHeight;
+              this.tooltipPosition.left=ePosition.layerX+20;
+              this.tooltipPosition.top=ePosition.layerY;
+              this.$nextTick(()=>{
+                if(this.$refs['topoTooltip']){
+                  if((boxWidth/2)>ePosition.layerX){
+                    this.tooltipPosition.left=ePosition.layerX+20;
+                  }else {
+                    this.tooltipPosition.left=ePosition.layerX - 20 - this.$refs['topoTooltip'].offsetWidth;
+                  }
+                  if(boxHeight>(ePosition.layerY+this.$refs['topoTooltip'].offsetHeight)){
+                    this.tooltipPosition.top=ePosition.layerY;
+                  }else {
+                    this.tooltipPosition.top=ePosition.layerY - this.$refs['topoTooltip'].offsetHeight;
+                  }
+                }
+              })
+            },100);
             break;
           case 'moveOutNode':
           case 'moveOutLine':
@@ -1273,18 +1210,35 @@
               this.timer3=setTimeout(()=>{
                 this.tooltipPosition.show=false;
                 this.timer3=null
-              },150)
+              },50)
             }else{
               clearTimeout(this.timer3);
               this.timer3=setTimeout(()=>{
                 this.tooltipPosition.show=false;
                 this.timer3=null
-              },150)
+              },50)
             }
             break;
         }
         // 右侧输入框编辑状态时点击编辑区域其他元素，onMessage执行后才执行onUpdateProps方法，通过setTimeout让onUpdateProps先执行
         setTimeout(()=>{
+          // setTimeout(()=>{
+          //   if(getTopology(this.topologyIndex)){
+          //     this.cachesIndex=getTopology(this.topologyIndex).caches.index;
+          //     console.log(this.cachesIndex)
+          //   }
+          //   if(getTopology(this.topologyIndex)&&this.$refs.topTool&&this.$refs.topTool.redoFlag){
+          //     console.log( this.cachesIndex, this.redoIndex);
+          //     if(event==='redo'){
+          //       this.redoIndex++;
+          //     }else{
+          //       this.redoIndex--;
+          //     }
+          //     if(this.$refs.topTool&&(this.redoIndex!==this.cachesIndex)){
+          //       this.$refs.topTool.redoFlag=false
+          //     };
+          //   }
+          // },50);
           switch(event){
             case 'node':
             case 'addNode':
@@ -1603,6 +1557,8 @@
           imgidList.forEach((item,index)=>{
             if(item.data.imageId){
               promiseArr.push( this.dealImg(`/project/topo/icon/${item.data.imageId}`));
+            }else{
+              promiseArr.push('');
             }
           });
           Promise.all(promiseArr).then(res2=>{
@@ -1612,17 +1568,9 @@
               }
             });
             this.iconArray.forEach((item,index)=>{
-              if(!item.id){return};
-              this.tools[1].children.push({
-                ...imageTemp,
-                data:{
-                  ...imageTemp.data,
-                  text:item.imageName,
-                  image:res2[index],
-                  imageId:item.id,
-                }
-              })
-              item.image=res2[index];
+              if(item.id){
+                item.image=res2[index];
+              }
             });
             this.imgInit=true;
           })
@@ -1681,8 +1629,8 @@
               item.animateColor=item.data.animateColor;
               item.strokeStyle=item.data.strokeStyle;
               item.arrowColor=item.data.arrowColor;
-              item.fromArrowColor=item.data.fromArrowColor;
-              item.toArrowColor=item.data.toArrowColor;
+              item.fromArrowColor=item.data.arrowColor;
+              item.toArrowColor=item.data.arrowColor;
               item.animatePlay=false;
               item.font.color="#000000";
             }
@@ -1691,6 +1639,10 @@
           this.toolShow.attrCord=[domRect.width-350,0];
           this.toolShow.height=domRect.height;
           getTopology(this.topologyIndex).canvasPos=domRect;
+          getTopology(this.topologyIndex).caches={
+            index:0,
+            list:[JSON.parse(JSON.stringify(getTopology(this.topologyIndex).data))]
+          }
         })
       },
 
@@ -1819,19 +1771,33 @@
       /*tools 方法*/
 
       winResize(){
-        let domRect=document.getElementById('topology-canvas'+this.topologyIndexF).getBoundingClientRect();
-        this.toolShow.attrCord=[domRect.width-350,0];
-        this.toolShow.height=domRect.height;
+        let domRect=document.getElementById('topology-canvas'+this.topologyIndex).getBoundingClientRect();
+        // this.toolShow.attrCord=[domRect.width-350,0];
+        // this.toolShow.height=domRect.height;
         getTopology(this.topologyIndex).canvasPos=domRect;
-        getTopology(this.topologyIndex).centerView();
+        let flag=false;
+
+        let position={
+          x:this.$refs['topology-canvas'+this.topologyIndexF].offsetWidth,
+          y:this.$refs['topology-canvas'+this.topologyIndexF].offsetHeight,
+        }
+        getTopology(this.topologyIndex).data.pens.forEach(item=>{
+          if(flag){
+            return
+          }
+          if(item.rect.ex>position.x || item.rect.ey>position.y){
+            getTopology(this.topologyIndex).fitView(20);
+            flag=true
+          }
+        });
+        getTopology(this.topologyIndex).centerView(20);
         this.getNodesArr();
       },
       canvasMove(e){// 画布上的移动 确定tooltip的位置
         if(this.tooltipPosition.show){
           return
         }
-        this.tooltipPosition.top=e.offsetY;
-        this.tooltipPosition.left=e.offsetX+20;
+        window.ePosition=e
       },
       tooltipOver(){
         clearTimeout(this.timer3);
@@ -1841,7 +1807,7 @@
         this.timer3=setTimeout(()=>{
           this.tooltipPosition.show=false;
           this.timer3=null
-        },150)
+        },50)
       },
       nodeDefaultWidth(nodeName){
         switch(nodeName){
@@ -1879,6 +1845,9 @@
         }
         return false;
       },
+      redoIndexChange(index){
+        this.redoIndex=index
+      }
     },
     destroyed(){
       getTopology(this.topologyIndex).destroy();