diff --git a/nezha-fronted/src/assets/css/components/common/timePicker.scss b/nezha-fronted/src/assets/css/components/common/timePicker.scss
index 38145eb36..c5a0e88f7 100644
--- a/nezha-fronted/src/assets/css/components/common/timePicker.scss
+++ b/nezha-fronted/src/assets/css/components/common/timePicker.scss
@@ -267,6 +267,10 @@
     display: flex;
     flex-direction: column;
     overflow: hidden;
+    .date-range-item {
+      height: 353px;
+      overflow-y: auto;
+    }
     ul {
       flex: 1;
       padding: 0;
@@ -312,8 +316,10 @@
 @media (max-height: 900px) {
   .date-range-panel {
     .date-range-panel-content-right {
-      height: 180px;
-      overflow-y: auto;
+      .date-range-item {
+        height: 180px;
+        overflow-y: auto;
+      }
     }
     .date-range-panel-content-left {
       height: 180px;
diff --git a/nezha-fronted/src/components/chart/chart/line-chart-block.vue b/nezha-fronted/src/components/chart/chart/line-chart-block.vue
deleted file mode 100644
index 3f56dd3eb..000000000
--- a/nezha-fronted/src/components/chart/chart/line-chart-block.vue
+++ /dev/null
@@ -1,2205 +0,0 @@
-<template>
-  <div class="nz-chart-resize">
-    <div class="resize-shadow" ref="resizeShadow"></div>
-    <div class="resize-box resize-box-echarts" ref="resizeBox">
-      <div class="line-chart-block" :id="'lineChartDiv'+chartIndex" @mouseenter="mouseEnterChart" @mouseleave="mouseLeaveChart">
-        <loading :ref="'localLoading'+chartIndex"></loading>
-        <div  v-if="from!=='project'&&from!=='topology'" :class="{'drag-disabled': this.filter.from == $CONSTANTS.fromRoute.alertRule}" :id="'chartTitle'+chartIndex" class="clearfix chartTitle topology-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.dashboard.moreTitle')}}{{$t('dashboard.dashboard.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" :class="{'move-able':!isLock}">
-            <el-dropdown-menu style="display: none"></el-dropdown-menu>
-            <span class="el-dropdown-link chart-title">
-<!--              <span class="chart-title-text">{{chartData.name}}</span>-->
-              <span class="chart-title-text" :title="chartData.name" v-on:mouseover="changeActive()" v-on:mouseout="removeActive()">{{chartData.name}}</span>
-              <transition  name="el-fade-in-linear">
-                <span v-show="chartDataList" class="chart-title-pit" >{{chartData.name}}</span>
-              </transition>
-              <span class="chart-title-icon"  :class="{'visible':caretShow,'hidden':!caretShow}">
-                <span v-if="chartData.remark">
-                  <el-tooltip :content="chartData.remark" placement="top" effect="light">
-                     <i class="nz-icon nz-icon-info-normal"></i>
-                  </el-tooltip>
-                </span>
-                <span  v-has="'v_edit'" :title="$t('dashboard.refresh')" class="" @click="refreshChart">
-                  <i class="nz-icon nz-icon-replay"></i>
-                </span>
-                 <span  @click="showAllScreen"  v-if="from !== 'chartTemp'" class="" :title="$t('dashboard.screen')">
-                  <i class="nz-icon nz-icon-maxview"></i>
-                 </span>
-                <span  :title="$t('overall.more')"><i class="el-icon-more" @click.stop="dropdownMenuShow=!dropdownMenuShow"></i></span>
-              </span>
-            </span>
-            <ul slot="dropdown" v-show="dropdownMenuShow"  :id="'dropdownUl'+chartIndex"  class="el-dropdown-menu nz-chart-dropdown"  style="" >
-              <li  @click="editChart" class="el-dropdown-menu__item">
-                <i class="nz-icon nz-icon-edit" style="font-size: 16px;"></i><span>{{$t('overall.edit')}}</span></li>
-              <li  v-has="'main_delete'" class="el-dropdown-menu__item" @click="removeChart">
-                <i class="nz-icon nz-icon-delete" style="font-size: 16px;"></i>{{$t('overall.delete')}}</li>
-              <li  v-has="'main_add'" class="el-dropdown-menu__item" @click="duplicate">
-                <i class="el-icon-copy-document" style="font-size: 16px;"></i>{{$t('overall.duplicate')}}</li>
-              <li  v-has="'main_edit'"  v-if="from !== 'chartTemp'&&chartData.pid" class="el-dropdown-menu__item" @click="$emit('sync')">
-                <i class="nz-icon nz-icon-sync" style="font-size: 16px;"></i>{{$t('overall.syncChart')}}</li>
-            </ul>
-          </el-dropdown>
-        </div>
-        <div  v-if="from==='topology'" :class="{'drag-disabled': this.filter.from == $CONSTANTS.fromRoute.alertRule}" :id="'chartTitle'+chartIndex" class="topology-chart-title">
-<!--          <span class="topology-chart-title-text">{{chartData.name}}</span>-->
-          <span class="topology-chart-title-text" :title="chartData.name" v-on:mouseover="changeActive()" v-on:mouseout="removeActive()">{{chartData.name}}</span>
-          <transition  name="el-fade-in-linear">
-            <span v-show="chartDataList" class="chart-title-pit" >{{chartData.name}}</span>
-          </transition>
-        </div>
-        <div class="line-area"  ref="lineChartArea"  :id="'lineChartArea'+chartIndex" v-show="firstShow" style="width:100%;"></div>
-        <div class="chart-no-data" v-show="noData">No Data</div>
-        <template v-if="!hasLegendOptions">
-          <div class='legend-container' 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':item.color)}"></span><span class="legend-container__span">{{item.alias?item.alias:item.name}}</span>
-            </div>
-          </div>
-        </template>
-        <template v-else>
-          <div class='legend-container' ref="legendArea" v-show="firstShow&&legendListMore.length">
-            <table style="width: 100%" border="0" cellpadding="0" cellspacing="0">
-              <th style="width: 100%"></th>
-              <template v-for="(legendOption, index) in legendOptions">
-                <th v-if="legendOption.value == 'on'" :key="index" class="option-th legend-option-cell" >
-                  <span @click="legendValueSort(legendOption,legendListMore,legendOptions)">{{legendOption.option}}</span>
-                  <span ><i style="font-size: 12px !important;" :class="{'nz-icon nz-icon-arrow-down':legendOption.sort =='asc','nz-icon nz-icon-arrow-up':legendOption.sort=='desc'}" ></i></span>
-                </th>
-              </template>
-              <tbody>
-              <tr v-for="(item, index) in legendListMore" :key="'legend_' + item.name+'_'+index">
-                <td>
-                  <div :title="item.alias?item.alias:item.name"  @click="clickLegend(item.name,index)" class="legend-item" :class="{'ft-gr':isGrey[index]}" >
-                    <span class="legend-shape" :style="{background:(isGrey[index]?'#D3D3D3':item.color)}"></span><span class="legend-container__span">{{item.alias?item.alias:item.name}}</span>
-                  </div>
-                </td>
-                <template v-for="(legendOption, i) in legendOptions">
-                  <td v-if="legendOption.value == 'on'" :key="i" class="legend-option-cell">{{formatLegendData(item[legendOption.option])}}</td>
-                </template>
-              </tr>
-              </tbody>
-            </table>
-          </div>
-        </template>
-        <!--
-        <Modal title="查看" v-model="screenModal" width="96%" class="line-chart-block-modal">-->
-        <el-dialog class="line-chart-block-modal nz-dialog"
-                   :title="$t('overall.view')"
-                   :visible.sync="screenModal"
-                   width="90%"
-                   @close="screenModal = false;screenLegendListMore=[]"
-                   style="margin-top: 1vh !important;"
-                   @opened="initDialog"
-                   @closed="closeDialog"
-                   :modal-append-to-body="false"
-        >
-          <el-popover
-            v-if="isError"
-            placement="top-start"
-            :close-delay=10
-            trigger="hover"
-            popper-class="chart-error-popper">
-            <div >{{errorContent}}</div>
-            <span slot="reference"  class="panel-info-corner panel-info-corner--error">
-                <i class="nz-icon nz-icon-warning fa-model" ></i>
-                <span class="panel-info-corner-inner"></span>
-            </span>
-          </el-popover>
-          <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.dashboard.moreTitle')}}{{$t('dashboard.dashboard.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.name}}</span>
-            <span class="nz-dialog-title" v-show="isExplore">&nbsp;</span>
-            <div class="float-right panel-calendar dialog-tool">
-
-              <pick-time :refresh-data-func="dateChange" v-model="searchTime" :use-chart-unit="false" :showMultiple="true" ref="pickTime" style="height: 28px;" id="line-chart"></pick-time>
-            </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>
-          <template v-if="!hasLegendOptions">
-            <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':item.color)}"></span><span class="legend-container__span">{{item.alias?item.alias:item.name}}</span>
-                <br/><!--bgColorList[index]-->
-              </div>
-            </div>
-          </template>
-          <template v-else>
-            <div :id="'screenLegendArea'+chartIndex"  @mouseenter="mouseEnterFullChart" @mouseleave="mouseLeaveFullChart" class="legend-container legend-container-screen" v-show="showLegend">
-              <table style="width: 100%" border="0" cellpadding="0" cellspacing="0">
-                <th style="width: 100%"></th>
-                <template v-for="(legendOption, index) in screenLegendOptions">
-                  <th v-if="legendOption.value == 'on'" :key="index" class="option-th legend-option-cell" >
-                    <span @click="legendValueSort(legendOption,screenLegendListMore, screenLegendOptions)">{{legendOption.option}}</span>
-                    <span ><i style="font-size: 12px !important;" :class="{'nz-icon nz-icon-arrow-down':legendOption.sort =='asc','nz-icon nz-icon-arrow-up':legendOption.sort=='desc'}" ></i></span>
-                  </th>
-                </template>
-                <tbody>
-                <tr v-for="(item, index) in screenLegendListMore" :key="'legend_' + item.name+'_'+index">
-                  <td>
-                    <div :title="item.alias?item.alias:item.name"  @click="clickScreenLegend(item.name,index)" class="legend-item" :class="{'ft-gr':isGreyScreen[index]}" >
-                      <span class="legend-shape" :style="{background:(isGreyScreen[index]?'#D3D3D3':item.color)}"></span><span class="legend-container__span">{{item.alias?item.alias:item.name}}</span>
-                    </div>
-                  </td>
-                  <template v-for="(legendOption, i) in screenLegendOptions">
-                    <td v-if="legendOption.value == 'on'" :key="i" class="legend-option-cell">{{formatLegendData(item[legendOption.option])}}</td>
-                  </template>
-                </tr>
-                </tbody>
-              </table>
-            </div>
-          </template>
-
-          <loading  :ref="'localLoadingScreen'+chartIndex"></loading>
-        </el-dialog>
-      </div>
-      <span class="vue-resizable-handle" @mousedown="startResize" v-if="!isLock"></span>
-    </div>
-  </div>
-</template>
-
-<script>
-import axios from 'axios'
-import * as echarts from 'echarts'
-import bus from '../../../libs/bus'
-import loading from '../../common/loading'
-import chartDataFormat from '../chartDataFormat'
-import { randomcolor } from '../../common/js/radomcolor/randomcolor.js'
-import chartConfig from '../../page/dashboard/overview/chartConfig'
-import { getChart, setChart, lineChartMove, getMousePoint } from '../../common/js/common'
-import { getMetricTypeValue, chartResizeTool, formatScientificNotation, dealLegendAlias } from '../../common/js/tools'
-import moment from 'moment-timezone'
-import chartDataList from '@/components/common/mixin/chartDataList'
-
-export default {
-  name: 'lineChartBlock',
-  components: {
-    loading: loading
-  },
-  props: {
-    chartData: {
-      type: Object
-    },
-    // 看板id
-    dashboardId: {
-      type: Number,
-      default: 0
-    },
-    chartIndex: {
-      type: Number,
-      default: 0
-    },
-    // 展示设置内容
-    showSetting: {
-      type: Boolean,
-      default: true
-    },
-    isExplore: {
-      type: Boolean,
-      default: false
-    },
-    tempDom: Object,
-    from: { type: String },
-    isLock: { type: Boolean, default: false },
-    chartTitleShow: {
-      type: Boolean,
-      default: true
-    },
-    fromTopo: {
-      type: Boolean,
-      default: false
-    }
-  },
-  computed: {
-    getButtonCode () {
-      return function (from, type) {
-        let code = ''
-        switch (from) {
-          case this.$CONSTANTS.fromRoute.dashboard:
-            if (type == 'chartToEdit') {
-              code = ''
-            }
-        }
-        return code
-      }
-    }
-  },
-  mixins: [chartDataList],
-  data () {
-    return {
-      data: {}, // 该图表信息,chartItem
-      noData: false,
-      seriesLength: 20,
-      seriesItem: [], // 保存信息
-      seriesItemArr: [], // 初次加载的数据
-      seriesItemScreen: [],
-      seriesItemArrScreen: [],
-      legendListMore: [],
-      screenLegendListMore: [],
-      chartInfo: {},
-      images: '',
-      isStackArea: false,
-      isError: false,
-      errorContent: '',
-      toolbox: false,
-      items: {
-        metric_name: [], // 每条数据列名称
-        xAxis: [],
-        theData: [] // series数据组
-      },
-      panelIdInner: '', // 看板id=dashboardId,原写作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: [],
-      stackTotalColor: null,
-      firstShow: false, // 默认不显示操作按钮,
-      caretShow: false,
-      dropdownMenuShow: false,
-      showLegend: true,
-      searchTime: [new Date().setHours(new Date().getHours() - 1), new Date()],
-      oldSearchTime: [],
-      screenTitleHeight: 58,
-      hasLegendOptions: false,
-      /* legendOptions:[], */
-      screenLegendOptions: [],
-      chartDot: 2,
-      stepWidth: null
-    }
-  },
-  watch: {
-    dropdownMenuShow (n) {
-      this.$emit('dropmenu-change', n)
-    }
-  },
-  methods: {
-    startResize (e) {
-      const vm = this
-      this.$chartResizeTool.start(vm, this.chartData, e, this.chartIndex)
-    },
-    setDivFirstShow (showDiv) {
-      this.divFirstShow = showDiv
-    },
-    mouseEnterChart () {
-      this.caretShow = true
-      if (getChart(this.chartIndex)) {
-        setTimeout(() => {
-          getChart(this.chartIndex) && getChart(this.chartIndex).setOption({
-            toolbox: {
-              show: true
-            }
-          })
-        }, 300)
-      }
-    },
-    mouseLeaveChart () {
-      this.caretShow = false
-      if (getChart(this.chartIndex)) {
-        setTimeout(() => {
-          getChart(this.chartIndex) && getChart(this.chartIndex).setOption({
-            toolbox: {
-              show: false
-            }
-          })
-        }, 300)
-      }
-    },
-    mouseEnterFullChart () {
-      if (this.echartModalStore) {
-        setTimeout(() => {
-          this.echartModalStore && this.echartModalStore.setOption({
-            toolbox: {
-              show: true
-            }
-          })
-        }, 300)
-      }
-    },
-    mouseLeaveFullChart () {
-      if (this.echartModalStore) {
-        setTimeout(() => {
-          if (this.echartModalStore) {
-            this.echartModalStore && this.echartModalStore.setOption({
-              toolbox: {
-                show: false
-              }
-            })
-          }
-        }, 300)
-      }
-    },
-    clickLegend (legendName, index) {
-      /* 点击legend
-          * 1.当前如果是全高亮状态，则全部置灰，只留被点击的legend高亮
-          * 2.如果点击的是唯一高亮的legend，则变为全高亮状态
-          * 3.否则只改变被点击的legend状态
-          * */
-      let highlightNum = 0 // 高亮数量
-      this.isGrey.forEach(g => {
-        if (!g) {
-          highlightNum++
-        }
-      })
-      const hasGrey = highlightNum < this.isGrey.length // 是否有置灰的
-      const curIsGrey = this.isGrey[index] // 当前legend的状态
-      const currentIsTheOnlyOneHighlight = !curIsGrey && highlightNum === 1 // 当前legend是否是目前唯一高亮的
-      const echart = getChart(this.chartIndex)
-      if (echart) {
-        if (!hasGrey) { // 1.除当前legend外全置灰
-          echart.dispatchAction({
-            type: 'legendInverseSelect'
-          })
-          echart.dispatchAction({
-            type: 'legendSelect',
-            name: legendName
-          })
-          this.isGrey = this.isGrey.map((g, i) => i !== index)
-        } else if (currentIsTheOnlyOneHighlight) { // 2.全高亮
-          echart.dispatchAction({
-            type: 'legendAllSelect'
-          })
-          this.isGrey = this.isGrey.map(() => false)
-        } else {
-          const type = curIsGrey ? 'legendSelect' : 'legendUnSelect'
-          echart.dispatchAction({
-            type: type,
-            name: legendName
-          })
-          this.$set(this.isGrey, index, !this.isGrey[index])
-        }
-        const chartInfo = this.data
-        const dataArg = this.seriesItem.filter((seriesItem, seriesIndex) => !this.isGrey[seriesIndex])
-        const maxValueCopies = this.getMaxValue(dataArg, chartInfo)
-        const maxValue = maxValueCopies.maxValue
-        // const minValue = maxValueCopies.minValue
-        // const dot = maxValueCopies.dot
-        const copies = maxValueCopies.copies
-        const unit = maxValueCopies.unit
-        const option = {
-          yAxis: {
-            minInterval: chartDataFormat.Interval(maxValue, copies, unit.type, 'min'),
-            maxInterval: chartDataFormat.Interval(maxValue, copies, unit.type, 'max') * Math.ceil(dataArg.length / 5)
-          }
-        }
-        if (!maxValueCopies.copies) {
-          option.yAxis.min = 0
-          option.yAxis.max = 1
-        } else {
-          option.yAxis.max = undefined
-        }
-        if (unit.type == 'Time' || option.yAxis.maxInterval === 1) {
-          delete option.yAxis.maxInterval
-        }
-        getChart(this.chartIndex) && getChart(this.chartIndex).setOption({
-          yAxis: {
-            ...option.yAxis
-          }
-        })
-      }
-    },
-    clickLegend2 (legendName, index) {
-      // 点击图表某一个legend，图表只显示当前点击的曲线或柱状图，其它隐藏，再次点击已选中的legend ，显示全部
-      const curIsGrey = this.isGrey[index]
-      if (getChart(this.chartIndex)) {
-        this.legendListMore.forEach((item, i) => {
-          const 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) {
-      /* 点击legend
-          * 1.当前如果是全高亮状态，则全部置灰，只留被点击的legend高亮
-          * 2.如果点击的是唯一高亮的legend，则变为全高亮状态
-          * 3.否则只改变被点击的legend状态
-          * */
-      let highlightNum = 0 // 高亮数量
-      this.isGreyScreen.forEach(g => {
-        if (!g) {
-          highlightNum++
-        }
-      })
-      const hasGrey = highlightNum < this.isGreyScreen.length // 是否有置灰的
-      const curIsGrey = this.isGreyScreen[index] // 当前legend的状态
-      const currentIsTheOnlyOneHighlight = !curIsGrey && highlightNum === 1 // 当前legend是否是目前唯一高亮的
-      const echart = this.echartModalStore
-      if (echart) {
-        if (!hasGrey) { // 1.除当前legend外全置灰
-          echart.dispatchAction({
-            type: 'legendInverseSelect'
-          })
-          echart.dispatchAction({
-            type: 'legendSelect',
-            name: legendName
-          })
-          this.isGreyScreen = this.isGreyScreen.map((g, i) => i !== index)
-        } else if (currentIsTheOnlyOneHighlight) { // 2.全高亮
-          echart.dispatchAction({
-            type: 'legendAllSelect'
-          })
-          this.isGreyScreen = this.isGreyScreen.map(() => false)
-        } else {
-          const type = curIsGrey ? 'legendSelect' : 'legendUnSelect'
-          echart.dispatchAction({
-            type: type,
-            name: legendName
-          })
-          this.$set(this.isGreyScreen, index, !this.isGreyScreen[index])
-        }
-        const chartInfo = this.data
-        const dataArg = this.seriesItemScreen.filter((seriesItem, seriesIndex) => !this.isGreyScreen[seriesIndex])
-        const maxValueCopies = this.getMaxValue(dataArg, chartInfo)
-        const maxValue = maxValueCopies.maxValue
-        // const minValue = maxValueCopies.minValue
-        // const dot = maxValueCopies.dot
-        const copies = maxValueCopies.copies
-        const unit = maxValueCopies.unit
-        const option = {
-          yAxis: {
-            minInterval: chartDataFormat.Interval(maxValue, copies, unit.type, 'min'),
-            maxInterval: chartDataFormat.Interval(maxValue, copies, unit.type, 'max') * Math.ceil(dataArg.length / 5)
-          }
-        }
-        if (!maxValueCopies.copies) {
-          option.yAxis.min = 0
-          option.yAxis.max = 1
-        } else {
-          option.yAxis.max = undefined
-        }
-        if (unit.type == 'Time' || option.yAxis.maxInterval === 1) {
-          delete option.yAxis.maxInterval
-        }
-        echart && echart.setOption({
-          yAxis: {
-            ...option.yAxis
-          }
-        })
-      }
-    },
-    clickScreenLegend2 (legendName, index) {
-      // 点击图表某一个legend，图表只显示当前点击的曲线或柱状图，其它隐藏，再次点击已选中的legend ，显示全部
-      const curIsGrey = this.isGreyScreen[index]
-      if (this.echartModalStore) {
-        this.screenLegendListMore.forEach((item, i) => {
-          const 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 ''
-      }
-      // 计算宽度
-      const span = document.querySelector('.temp-dom')
-      span.textContent = name
-      const txtWidth = parseFloat(window.getComputedStyle(span).width) - this.tempDom.width
-      if (txtWidth < chartWidth) {
-        return name
-      } else {
-        const charNum = `${(chartWidth - 100) / (txtWidth / name.length)}`
-        return name.slice(0, charNum) + '...'
-      }
-    },
-    // chartSite用于区分是全屏显示还是局部显示
-    initChart (chartInfo, dataArg, ele, chartSite, legend) {
-      this.legendMagicType = legend
-      this.chartInfo = chartInfo
-      const self = this
-      self.isStackArea = false
-      this.chartType = '' // 图表类型
-      if (chartInfo.type === 4) { // line,bar
-        this.chartType = 'line'
-      }
-      const minusTime = (new Date(this.searchTime[0]).getTime() - new Date(this.$refs.pickTime.$refs.multipleTime.searchTime[0]).getTime())
-      this.minusTime = minusTime
-      let minTime = null
-      let maxTime = null
-      if (dataArg.length > 0 && dataArg[0].data &&
-          dataArg[0].data.length > 0 && dataArg[0].data[0].length > 0) {
-        const len = dataArg[0].data.length - 1
-        minTime = dataArg[0].data[0][0]
-        maxTime = dataArg[0].data[len][0]
-      }
-      if (chartSite === 'local') {
-        setChart(this.chartIndex, echarts.init(ele))
-      } else if (chartSite === 'screen') {
-        this.echartModalStore = echarts.init(ele)
-      }
-      const chartWidth = ele.clientWidth
-      this.stepWidth = this.chartInfo.groupId ? (document.getElementById('listContainer').offsetWidth / 12) - 10 : document.getElementById('listContainer').offsetWidth / 12
-      const stackIconBorderColor = (chartInfo.type === 'stackArea' ? '#53a3cb' : '#7e7e7e')
-      const stackIconChooseBorderColor = (chartInfo.type === 'stackArea' ? '#7e7e7e' : '#53a3cb')
-      let maxValueCopies = this.getMaxValue(dataArg, chartInfo)
-      const maxValue = maxValueCopies.maxValue
-      // let minValue = maxValueCopies.minValue
-      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 dot = this.chartDot = maxValueCopies.dot
-      const copies = maxValueCopies.copies
-      const unit = maxValueCopies.unit
-      // const oldDot = maxValueCopies.oldDot
-      let 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: 'bottom',
-            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'
-          },
-          axisPointer: {
-            snap: false,
-            animation: false
-          },
-          z: 9,
-          animation: false,
-          appendToBody: true,
-          className: 'line-chart-block-Zindex',
-          extraCssText: 'z-index:99999999;visibility:visible;',
-          /* enterable:true, 导致tooltip不消失，显示多个tooltip */
-          position: function (point, params, dom, rect, size) {
-            dom.style.transform = 'translateZ(0)'
-            const windowWidth = window.innerWidth// 窗口宽度
-            const windowHeight = window.innerHeight// 窗口高度
-            const windowMouse = getMousePoint()
-            // 提示框位置
-            let x = 0
-            let y = 0
-            // 当前鼠标位置
-            const pointX = point[0]
-            const pointY = point[1]
-            // 外层div大小
-            const viewWidth = size.viewSize[0]
-            // const viewHeight = size.viewSize[1]
-            // 提示框大小
-            const boxWidth = size.contentSize[0]
-            const boxHeight = size.contentSize[1]
-            if (chartSite === 'local') { // 本地显示
-              const chartDom = document.getElementById(chartInfo.title + '_' + chartInfo.id)
-              if (chartDom) {
-                // const parTop = document.getElementById(chartInfo.title + '_' + chartInfo.id).offsetTop
-                const parleft = document.getElementById(chartInfo.title + '_' + chartInfo.id).offsetLeft
-
-                const parent = document.getElementById('tableList')
-                // const parClientHeight = parent.clientHeight// 可视高度
-                const parClientWidth = parent.clientWidth// 可视宽度
-                // const parScrollTop = parent.scrollTop
-                if ((parClientWidth - pointX - parleft - 20) >= boxWidth) { // 说明鼠标在左边放不下提示框
-                  x = pointX + 10
-                } else {
-                  x = pointX - boxWidth
-                }
-                if (windowMouse.y + 50 + boxHeight < windowHeight) { // 说明鼠标上面放不下提示框
-                  y = pointY + 15
-                } else {
-                  y = pointY - boxHeight - 10
-                }
-                return [x, y]
-              } else { // preview page
-                if (windowMouse.x < (windowWidth / 2)) { // 说明鼠标在左边放不下提示框
-                  x = pointX + 15
-                } else {
-                  x = pointX - boxWidth - 15
-                }
-                if (windowMouse.y + 50 + boxHeight < windowHeight) { // 说明鼠标上面放不下提示框
-                  y = pointY + 15
-                } else {
-                  y = pointY - boxHeight - 10
-                }
-                return [x, y]
-              }
-            } else {
-              if (pointX < (viewWidth / 2)) { // 说明鼠标在左边放不下提示框
-                x = pointX + 10
-              } else {
-                x = pointX - boxWidth
-              }
-              if (windowMouse.y + 50 + boxHeight < windowHeight) { // 说明鼠标上面放不下提示框
-                y = pointY + 15
-              } else {
-                y = pointY - boxHeight - 10
-              }
-              return [x, y]
-            }
-          },
-          formatter: function (params) {
-            let str = '<div>'
-            let sum = 0
-            let showFlag = false
-            let minusFlag = true
-            params.forEach((item, i) => {
-              const tip = legend[item.seriesIndex]
-              const color = self.bgColorList[item.seriesIndex]
-              if (i === 0 && tip.alias.indexOf('Previous ') === -1) {
-                const value = bus.computeTimezone(item.data[0])
-                const tData = new Date(value)
-                str += '<div style="margin-bottom: 5px">'
-                str += bus.timeFormate(tData)
-                str += '</div>'
-              }
-              if (tip.alias.indexOf('Previous ') !== -1 && minusFlag) {
-                if (i !== 0) {
-                  str += '<div style="border:1px dashed #333;width:100%;margin-top: 5px"></div>'
-                }
-                const value = bus.computeTimezone(item.data[0] - self.minusTime)
-                const tData = new Date(value)
-                str += '<div style="margin-bottom: 5px;margin-top: 5px">'
-                str += bus.timeFormate(tData)
-                str += '</div>'
-                minusFlag = false
-              }
-              showFlag = showFlag || item.data[1]
-              if (!isNaN(item.data[1] + '')) {
-                const previousItem = params.find((series) => ('Previous ' + item.seriesName) === series.seriesName)
-                let paramsDot = bus.countDecimals(item.data[1])
-                if (paramsDot < self.chartDot) {
-                  paramsDot = self.chartDot
-                } else if (paramsDot > 6) {
-                  paramsDot = 6
-                }
-                const val = formatScientificNotation(item.data[1], paramsDot)
-                sum += isNaN(self.numberWithEConvent(val)) ? 0 : Number(self.numberWithEConvent(val))
-
-                str += '<div style="white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;display: flex; justify-content: space-between; min-width: 150px; max-width: 600px; line-height: 18px; font-size: 12px;">'
-                str += `<div style="max-width: 500px;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;"><span style='display:inline-block;margin-right:5px;border-radius:10px;width:15px;height:5px;background-color: ${color};}'></span>${tip ? (tip.alias ? tip.alias : tip.name) : item.seriesName}  </div>`
-                str += '<div style="padding-left: 10px;min-width: 75px;text-align: right">'
-                str += chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(val, null, -1, paramsDot)
-                if (previousItem) {
-                  str += '<span style="padding-left: 10px; display: inline-block;width: 65px;text-align: right;box-sizing: border-box;padding-right: 10px">'
-                  const previousval = formatScientificNotation(previousItem.data[1], paramsDot)
-                  let minusVal = 0
-                  if (previousval <= val) {
-                    minusVal = val - previousval
-                    str += '+'
-                  } else {
-                    minusVal = previousval - val
-                    str += '-'
-                  }
-
-                  str += chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(minusVal, null, -1, paramsDot)
-                  str += '</span>'
-                } else if (tip.alias.indexOf('Previous ') !== -1) {
-                  str += '<span style="padding-left: 10px; display: inline-block;width: 65px;text-align: right">'
-                  str += '</span>'
-                }
-                str += '</div>'
-                str += '</div>'
-              }
-            })
-            if (self.data.type === 'stackArea' || self.isStackArea) {
-              if (!self.stackTotalColor || self.stackTotalColor == '') {
-                self.stackTotalColor = randomcolor()
-              }
-              sum = parseFloat(Number(sum).toFixed(6))
-              str += '<div style="white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;display: flex; justify-content: space-between; min-width: 150px; max-width: 600px; line-height: 18px; font-size: 12px;">'
-              str += '<div style="line-height: 18px; font-size: 12px;padding-left: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.dashboard.chartTotal')
-              str += '</div>'
-              str += '<div style="padding-left: 10px;">'
-              str += chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(sum, null, self.chartDot)
-              str += '</div>'
-              str += '</div>'
-            }
-
-            str += '</div>'
-            if (!showFlag) {
-              return ''
-            } else {
-              return str
-            }
-          }
-        },
-        legend: {
-          show: false
-        },
-        grid: {
-          top: 30,
-          left: 30,
-          right: 30,
-          containLabel: true,
-          bottom: 30// 156
-        },
-        xAxis: {
-          type: 'time',
-          animation: false,
-          showAllSymbol: false,
-          axisLabel: {
-            interval: '0',
-            showMaxLabel: false,
-            rotate: 0,
-            show: true,
-            fontSize: 10,
-            formatter: function (value) {
-              let offset = localStorage.getItem('nz-sys-timezone')
-              offset = moment.tz(offset).format('Z')
-              offset = Number.parseInt(offset)
-              const localOffset = new Date().getTimezoneOffset() * 60 * 1000 * -1 // 默认 一分钟显示时区偏移的结果
-              const tData = new Date(value - localOffset + offset * 60 * 60 * 1000)
-              let hour = tData.getHours()
-              hour = hour > 9 ? hour : '0' + hour // 加0补充为两位数字
-              let minute = tData.getMinutes()
-              minute = minute > 9 ? minute : '0' + minute // 如果分钟小于10,则在前面加0补充为两位数字
-              if (minTime !== null && maxTime !== null) {
-                const diffSec = (maxTime - minTime) / 1000
-                const secOneDay = 24 * 60 * 60// 1天的秒数
-                const secOneMonth = secOneDay * 30// 30天的秒数
-                if (diffSec <= secOneDay) { // 同一天
-                  return [hour, minute].join(':')
-                } else if (diffSec < secOneMonth) { // 大于1天，小于30天
-                  return [tData.getMonth() + 1, tData.getDate()].join('/') + ' ' + [hour, minute].join(':')
-                } else { // 大于等于30天
-                  return [tData.getMonth() + 1, tData.getDate()].join('/')
-                }
-              } else {
-                return [tData.getFullYear(), tData.getMonth() + 1, tData.getDate()].join('/') + '\n' +
-                    [hour, minute].join(':')
-              }
-            }
-          },
-          axisPointer: { // y轴上显示指针对应的值
-            show: true
-          },
-          splitLine: {
-            show: true,
-            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
-            }
-          },
-          // maxInterval:{},
-          // 去掉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 (val, index) {
-              const value = formatScientificNotation(val, 2)
-              let chartUnit = chartInfo.unit
-              chartUnit = chartUnit || 2
-              const unit = chartDataFormat.getUnit(chartUnit)
-              if (chartDataFormat.Interval(maxValue, copies, unit.type, 'min') < 1 && dot < 2) {
-                dot = 2
-              }
-              if (dot == 0) {
-                dot = 1
-              }
-              dot = bus.countDecimals(value)
-              if (dot < self.chartDot) {
-                dot = self.chartDot
-              }
-              return unit.compute(value, index, -1, dot)
-            }
-          }
-          // boundaryGap:[0,0.2]
-        },
-        useUTC: false, // 使用本地时间
-        series: dataArg
-      }
-      if (!maxValueCopies.copies) {
-        option.yAxis.min = 0
-        option.yAxis.max = 1
-      } else {
-        option.yAxis.max = undefined
-      }
-      if (unit.type == 'Time') {
-        delete option.yAxis.maxInterval
-      }
-      if (this.fromTopo) {
-        const dashboardTime = localStorage.getItem('dashboardTime') ? JSON.parse(localStorage.getItem('dashboardTime')) : ['', '']
-        if (dashboardTime[0]) {
-          const numInterval = new Date(dashboardTime[1]).getTime() - new Date(dashboardTime[0]).getTime()
-          if (numInterval >= 60 * 60 * 1000) {
-            option.xAxis.minInterval = 20 * 60 * 1000
-          } else if (numInterval >= 30 * 60 * 1000 && numInterval < 60 * 60 * 1000) {
-            option.xAxis.minInterval = 10 * 60 * 1000
-          } else if (numInterval >= 15 * 60 * 1000 && numInterval < 30 * 60 * 1000) {
-            option.xAxis.minInterval = 5 * 60 * 1000
-          } else if (numInterval >= 5 * 60 * 1000 && numInterval < 15 * 60 * 1000) {
-            option.xAxis.minInterval = 1 * 60 * 1000
-          } else {
-            option.xAxis.minInterval = 15 * 1000
-          }
-        } else {
-          option.xAxis.minInterval = 20 * 60 * 1000
-        }
-      } else {
-        if (this.$refs.resizeBox.offsetWidth < 200) {
-          option.xAxis.splitNumber = 1
-        } else if (this.$refs.resizeBox.offsetWidth < 300) {
-          option.xAxis.splitNumber = 3
-        } else if (this.$refs.resizeBox.offsetWidth < 500) {
-          option.xAxis.splitNumber = 5
-        }
-      }
-      // params.series = dataArg;
-      if (chartSite === 'local') { // 本地显示
-        if (legend) {
-          this.legendList = []
-          this.isGrey = []
-          legend.forEach((item, i) => {
-            const legend = {
-              name: item.name,
-              alias: item.alias,
-              color: item.color,
-              showText: this.formatLegend(chartWidth, item.name)
-            }
-            this.legendList.push(legend)
-            this.isGrey.push(false)
-          })
-        }
-        this.legendListMore = this.legendList.filter((item, index) => index < this.seriesLength)
-        if (this.hasLegendOptions) {
-          this.computeLegendData(this.legendListMore, dataArg, 'local')
-        }
-        this.$nextTick(() => {
-          const vm = this
-          setTimeout(function () {
-            const divHeight = self.$refs.legendArea && self.$refs.legendArea.offsetHeight > 20 ? self.$refs.legendArea.offsetHeight : 27
-            if (!chartInfo.height) {
-              getChart(self.chartIndex) && getChart(self.chartIndex).resize({ height: (250 - divHeight - chartResizeTool.titleHeight - chartResizeTool.chartBlankHeight) })
-            } else {
-              getChart(self.chartIndex) && getChart(self.chartIndex).resize({ height: (chartInfo.height * vm.stepWidth - divHeight - chartResizeTool.titleHeight - chartResizeTool.chartBlankHeight) })
-            }
-            if (dataArg && dataArg.length > 0) {
-              getChart(self.chartIndex) && getChart(self.chartIndex).clear()
-              getChart(self.chartIndex) && getChart(self.chartIndex).setOption(option)// 创建图表
-              self.noData = false
-            } else {
-              self.noData = true
-              option = chartConfig.getOptionNoData('noData')
-              if (self.$refs.resizeBox && getChart(self.chartIndex)) {
-                if (self.$refs.resizeBox.offsetWidth < 200) {
-                  option.xAxis.splitNumber = 1
-                } else if (self.$refs.resizeBox.offsetWidth < 300) {
-                  option.xAxis.splitNumber = 3
-                } else if (self.$refs.resizeBox.offsetWidth < 500) {
-                  option.xAxis.splitNumber = 5
-                }
-                getChart(self.chartIndex) && getChart(self.chartIndex).clear()
-                getChart(self.chartIndex) && getChart(self.chartIndex).setOption(option)// 创建图表
-              }
-            }
-            self.$refs['localLoading' + self.chartIndex] && self.$refs['localLoading' + self.chartIndex].endLoading()
-            self.firstShow = true // 展示操作按键
-          }, 800)
-
-          window.addEventListener('resize', this.chartResize)
-          getChart(this.chartIndex).off('magictypechanged')
-          getChart(this.chartIndex).on('magictypechanged', function (params) {
-            self.isStackArea = !self.isStackArea
-            if (self.isStackArea) {
-              getChart(self.chartIndex) && getChart(self.chartIndex).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: {
-                  axisPointer: {
-                    snap: false,
-                    animation: false
-                  },
-                  formatter: function (params) {
-                    let str = '<div>'
-                    let sum = 0
-                    let showFlag = false
-                    params.forEach((item, i) => {
-                      const tip = self.legendMagicType[item.seriesIndex]
-                      const color = self.bgColorList[item.seriesIndex]
-                      let paramsDot = bus.countDecimals(item.data[1])
-                      if (paramsDot < self.chartDot) {
-                        paramsDot = self.chartDot
-                      }
-                      if (i === 0) {
-                        const value = bus.computeTimezone(item.data[0])
-                        const tData = new Date(value)
-                        str += '<div style="margin-bottom: 5px">'
-                        str += bus.timeFormate(tData)
-                        str += '</div>'
-                      }
-                      showFlag = showFlag || item.data[1]
-                      if (!isNaN(item.data[1] + '')) {
-                        const val = formatScientificNotation(item.data[1], 2)
-                        sum += isNaN(self.numberWithEConvent(val)) ? 0 : Number(self.numberWithEConvent(val))
-                        str += '<div style="white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;display: flex; justify-content: space-between; min-width: 150px; max-width: 600px; line-height: 18px; font-size: 12px;">'
-                        str += `<div style="max-width: 500px;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;"><span style='display:inline-block;margin-right:5px;border-radius:10px;width:15px;height:5px;background-color: ${color};}'></span>${tip ? (tip.alias ? tip.alias : tip.name) : item.seriesName}  </div>`
-                        str += '<div style="padding-left: 10px;">'
-                        str += chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(val, null, -1, paramsDot)
-                        str += '</div>'
-                        str += '</div>'
-                      }
-                    })
-                    if (self.data.type === 'stackArea' || self.isStackArea) {
-                      sum = parseFloat(Number(sum).toFixed(6))
-                      str += '<div style="white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;display: flex; justify-content: space-between; min-width: 150px; max-width: 600px; line-height: 18px; font-size: 12px;">'
-                      str += '<div style="line-height: 18px; font-size: 12px;padding-left:20px;">'
-                      str += self.$t('dashboard.dashboard.chartTotal')
-                      str += '</div>'
-                      str += '<div style="padding-left: 10px;">'
-                      str += chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(sum, null, self.chartDot)
-                      str += '</div>'
-                      str += '</div>'
-                    }
-
-                    str += '</div>'
-                    if (!showFlag) {
-                      return ''
-                    } else {
-                      return str
-                    }
-                  }
-                }
-              })
-            } else {
-              getChart(self.chartIndex) && getChart(self.chartIndex).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') { // 全屏显示
-        if (legend) {
-          this.screenLegendList = []
-          this.isGreyScreen = []
-          legend.forEach((item, i) => {
-            const legend = {
-              name: item.name,
-              alias: item.alias,
-              color: item.color,
-              showText: this.formatLegend(chartWidth, item.name)
-            }
-            this.screenLegendList.push(legend)
-            this.isGreyScreen.push(false)
-          })
-        }
-        if (this.screenLegendListMore.length !== this.screenLegendList.length) {
-          this.screenLegendListMore = []
-          const screenLegendListMore = this.screenLegendList.filter((item, index) => index < this.seriesLength)
-          this.$set(this, 'screenLegendListMore', screenLegendListMore)
-          this.$forceUpdate()
-        }
-        if (this.hasLegendOptions) {
-          this.computeLegendData(this.screenLegendListMore, dataArg, 'screen')
-        }
-        if (self.echartModalStore) {
-          self.echartModalStore.clear()
-          option.title = {}
-          self.showLegend = true
-          self.$refs['localLoadingScreen' + self.chartIndex].endLoading()
-        }
-        this.$nextTick(() => {
-          const legendDiv = document.getElementById('screenLegendArea' + self.chartIndex)
-          const divHeight = legendDiv.offsetHeight
-          const screenHeight = document.documentElement.clientHeight || document.body.clientHeight
-          const sumHeight = Math.floor(screenHeight * 0.99 * 0.8)// margin-top:1vh; dailog:80%
-          self.$refs.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 && self.echartModalStore.setOption(option)// 显示全屏界面
-              self.noData = false
-            } else {
-              self.noData = true
-              option = chartConfig.getOptionNoData('noData')
-              self.echartModalStore && self.echartModalStore.setOption(option)// 显示全屏界面
-            }
-            self.echartModalStore.on('finished', function () {
-              const legendDiv = document.getElementById('screenLegendArea' + self.chartIndex)
-              const divHeight = legendDiv.offsetHeight
-              const screenHeight = document.documentElement.clientHeight || document.body.clientHeight
-              const sumHeight = Math.floor(screenHeight * 0.99 * 0.8)// margin-top:1vh; dailog:80%
-              self.$refs.screenShowArea.style.height = `${sumHeight - divHeight - self.screenTitleHeight}px`
-              // self.echartModalStore.resize({ height: (sumHeight - divHeight - self.screenTitleHeight) })// 图表的高度
-              self.echartModalStore.off('finished')
-            })
-          }, 100)
-          this.echartModalStore.off('magictypechanged')
-          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: {
-                  axisPointer: {
-                    snap: false,
-                    animation: false
-                  },
-                  formatter: function (params) {
-                    let str = '<div>'
-                    let sum = 0
-                    let showFlag = false
-                    let minusFlag = true
-                    params.forEach((item, i) => {
-                      const tip = self.legendMagicType[item.seriesIndex]
-                      const color = self.bgColorList[item.seriesIndex]
-                      if (i === 0 && tip.alias.indexOf('Previous ') === -1) {
-                        const value = bus.computeTimezone(item.data[0])
-                        const tData = new Date(value)
-                        str += '<div style="margin-bottom: 5px">'
-                        str += bus.timeFormate(tData)
-                        str += '</div>'
-                      }
-                      if (tip.alias.indexOf('Previous ') !== -1 && minusFlag) {
-                        if (i !== 0) {
-                          str += '<div style="border:1px dashed #333;width:100%;margin-top: 5px"></div>'
-                        }
-                        const value = bus.computeTimezone(item.data[0])
-                        const tData = new Date(value)
-                        str += '<div style="margin-bottom: 5px;margin-top: 5px">'
-                        str += bus.timeFormate(tData)
-                        str += '</div>'
-                        minusFlag = false
-                      }
-                      showFlag = showFlag || item.data[1]
-                      if (!isNaN(item.data[1] + '')) {
-                        const previousItem = params.find((series) => ('Previous ' + item.seriesName) === series.seriesName)
-                        const val = formatScientificNotation(item.data[1], 2)
-                        sum += isNaN(self.numberWithEConvent(val)) ? 0 : Number(self.numberWithEConvent(val))
-                        str += '<div style="white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;display: flex; justify-content: space-between; min-width: 150px; max-width: 600px; line-height: 18px; font-size: 12px;">'
-                        str += `<div style="max-width: 500px;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;"><span style='display:inline-block;margin-right:5px;border-radius:10px;width:15px;height:5px;background-color: ${color};}'></span>${tip ? (tip.alias ? tip.alias : tip.name) : item.seriesName}  </div>`
-                        str += '<div style="padding-left: 10px;min-width: 75px;text-align: right">'
-                        str += chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(val, null, self.chartDot)
-                        if (previousItem) {
-                          str += '<span style="padding-left: 10px; display: inline-block;width: 65px;text-align: right;box-sizing: border-box;padding-right: 10px">'
-                          const previousval = formatScientificNotation(previousItem.data[1], 2)
-                          let minusVal = 0
-                          if (previousval <= val) {
-                            minusVal = val - previousval
-                            str += '+'
-                          } else {
-                            minusVal = previousval - val
-                            str += '-'
-                          }
-
-                          str += chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(minusVal, null, self.chartDot)
-                          str += '</span>'
-                        } else if (tip.alias.indexOf('Previous ') !== -1) {
-                          str += '<span style="padding-left: 10px; display: inline-block;width: 65px;text-align: right">'
-                          str += '</span>'
-                        }
-                        str += '</div>'
-                        if (previousItem) {
-                          str += '<div style="padding-left: 10px;">'
-                          const previousval = formatScientificNotation(previousItem.data[1], 2)
-                          let minusVal = 0
-                          if (previousval <= val) {
-                            minusVal = val - previousval
-                            str += '+'
-                          } else {
-                            minusVal = previousval - val
-                            str += '-'
-                          }
-
-                          str += chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(minusVal, null, self.chartDot)
-                          str += '</div>'
-                        }
-                        str += '</div>'
-                      }
-                    })
-                    if (self.data.type === 'stackArea' || self.isStackArea) {
-                      sum = parseFloat(Number(sum).toFixed(6))
-                      str += '<div style="white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;display: flex; justify-content: space-between; min-width: 150px; max-width: 600px; line-height: 18px; font-size: 12px;">'
-                      str += '<div style="line-height: 18px; font-size: 12px;padding-left:20px;">'
-                      str += self.$t('dashboard.dashboard.chartTotal')
-                      str += '</div>'
-                      str += '<div style="padding-left: 10px;">'
-                      str += chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(sum, null, self.chartDot)
-                      str += '</div>'
-                      str += '</div>'
-                    }
-
-                    str += '</div>'
-                    if (!showFlag) {
-                      return ''
-                    } else {
-                      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
-      setTimeout(() => { option = null }, 1000)
-    },
-    handleLineFeed (str, chartWidth) {
-      if (!str) {
-        return ''
-      }
-      // 计算宽度
-      const span = document.querySelector('.temp-dom')
-      span.textContent = name
-      const txtWidth = parseFloat(window.getComputedStyle(span).width) - this.tempDom.width
-      if (txtWidth < chartWidth) {
-        return str
-      } else {
-        const 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, dashboardId, filter, legend, area, errorMsg) {
-      legend && this.setColor(legend.length)
-      legend && legend.forEach((t, i) => { t.color = this.bgColorList[i] })
-      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 = dashboardId
-        this.data = chartItem
-        this.seriesItem = seriesItem
-        this.seriesItemScreen = seriesItem
-
-        this.hasLegendOptions = this.findLegendOptions()
-        if (this.hasLegendOptions) {
-          const sortedOptionKeys = ['min', 'max', 'avg', 'last', 'total']
-          this.legendOptions = sortedOptionKeys.map(item => { return { option: item, sort: '', value: chartItem.param.legendValue[item] } })
-          this.screenLegendOptions = sortedOptionKeys.map(item => { return { option: item, sort: '', value: chartItem.param.legendValue[item] } })
-        }
-
-        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) {
-      const 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
-      const id = this.data.id
-      this.clearChart()
-      this.$refs['localLoading' + this.chartIndex].startLoading()
-      this.firstShow = false
-      this.$emit('on-refresh-data', id)
-    },
-    screenRefreshChart () {
-      this.$refs.calendarPanel.timeChange(this.$refs.calendarPanel.nowTimeType, 'chart')
-    },
-    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,
-          });
-          */
-    },
-    closeDialog () {
-      this.$refs.pickTime.$refs.multipleTime.searchTime = []
-      this.$refs.pickTime.$refs.multipleTime.showTime = {
-        id: 12,
-        text: this.$t('dashboard.dashboard.noDate')
-      }
-      this.$refs.pickTime.$refs.multipleTime.showDropdown = false
-    },
-    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.screenModal = true
-      this.isGreyScreen = []
-      this.$refs.pickTime.$refs.multipleTime.searchTime = []
-      this.$refs.pickTime.$refs.multipleTime.showTime = {
-        id: 12,
-        text: this.$t('dashboard.dashboard.noDate')
-      }
-      this.$refs.pickTime.$refs.multipleTime.showDropdown = false
-      this.$refs.pickTime.$refs.timePicker.setCustomTime(this.stableFilter)
-      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
-      this.$emit('on-duplicate-chart-block', this.data.id)
-    },
-    dateChange (time) {
-      const nowTimeType = this.$refs.pickTime.$refs.timePicker.nowTimeType
-      this.setSearchTime(nowTimeType.type, nowTimeType.value, nowTimeType)
-      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.filter.value = this.searchTime[2]
-      this.filter.id = this.$refs.pickTime.$refs.timePicker.showTime.id
-      // this.echartModalStore.clear()
-      this.showLegend = false
-      this.$refs['localLoadingScreen' + this.chartIndex].startLoading()
-      if (this.showSetting) {
-        this.getQueryChart('list')
-      } else {
-        this.getQueryChart('dashboard')
-      }
-    },
-    setSearchTime (type, val, nowTimeType) { // 设置searchTime
-      if (type === 'minute') {
-        const startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setMinutes(new Date(bus.computeTimezone(new Date().getTime())).getMinutes() - val), 'YYYY-MM-DD HH:mm:ss')
-        const endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())), 'YYYY-MM-DD HH:mm:ss')
-        this.$set(this.searchTime, 0, startTime)
-        this.$set(this.searchTime, 1, endTime)
-        this.$set(this.searchTime, 2, val + 'm')
-      } else if (type === 'hour') {
-        const startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setHours(new Date(bus.computeTimezone(new Date().getTime())).getHours() - val), 'YYYY-MM-DD HH:mm:ss')
-        const endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())), 'YYYY-MM-DD HH:mm:ss')
-        this.$set(this.searchTime, 0, startTime)
-        this.$set(this.searchTime, 1, endTime)
-        this.$set(this.searchTime, 2, val + 'h')
-      } else if (type === 'date') {
-        const startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setDate(new Date(bus.computeTimezone(new Date().getTime())).getDate() - val), 'YYYY-MM-DD HH:mm:ss')
-        const endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())), 'YYYY-MM-DD HH:mm:ss')
-        this.$set(this.searchTime, 0, startTime)
-        this.$set(this.searchTime, 1, endTime)
-        this.$set(this.searchTime, 2, val + 'd')
-      }
-      this.$refs.pickTime.$refs.timePicker.searchTime = this.searchTime
-    },
-    // 查询数据,修改日期查询全屏数据
-    getQueryChart (type) {
-      /*
-          if (this.echartModalStore) {
-            this.echartModalStore.showLoading();
-          }
-          */
-      const self = this
-      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小时
-          const now = new Date()
-          startTime = bus.timeFormate(now, 'YYYY-MM-DD HH:mm:ss')
-          endTime = bus.timeFormate(now.setHours(now.getHours() - 1), 'YYYY-MM-DD HH:mm:ss')
-          this.searchTime[0] = startTime
-          this.searchTime[1] = endTime
-        }
-        const step = bus.getStep(startTime, endTime)
-        if (type === 'list') { // 普通模式,主控台使用
-          axiosArr = this.data.elements.map((ele) => {
-            const filterItem = ele
-            let query = encodeURIComponent(filterItem.expression)
-            if (this.chartInfo.type === 'line' || this.chartInfo.type === 'bar' || this.chartInfo.type === 'stackArea') { // 如果是这三个 默认给null
-              !this.chartInfo.param && (this.chartInfo.param = {})
-              this.chartInfo.param.nullType = this.chartInfo.param.nullType || 'null'
-              query += '&nullType=' + this.chartInfo.param.nullType
-            }
-            return this.$get('/prom/api/v1/query_range?query=' + query + '&start=' + this.$stringTimeParseToUnix(startTime) + '&end=' + this.$stringTimeParseToUnix(endTime) + '&step=' + step)
-          })
-          if (this.$refs.pickTime.$refs.multipleTime && this.$refs.pickTime.$refs.multipleTime.searchTime.length) { // 判断是否需要添加比较
-            startTime = bus.timeFormate(this.$refs.pickTime.$refs.multipleTime.searchTime[0], 'YYYY-MM-DD HH:mm:ss')
-            endTime = bus.timeFormate(this.$refs.pickTime.$refs.multipleTime.searchTime[1], 'YYYY-MM-DD HH:mm:ss')
-            this.data.elements.forEach((ele) => {
-              const filterItem = ele
-              let query = encodeURIComponent(filterItem.expression)
-              if (this.chartInfo.type === 'line' || this.chartInfo.type === 'bar' || this.chartInfo.type === 'stackArea') { // 如果是这三个 默认给null
-                !this.chartInfo.param && (this.chartInfo.param = {})
-                this.chartInfo.param.nullType = this.chartInfo.param.nullType || 'null'
-                query += '&nullType=' + this.chartInfo.param.nullType
-              }
-              axiosArr.push(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.name)
-            if (this.chartInfo.type === 'line' || this.chartInfo.type === 'bar' || this.chartInfo.type === 'stackArea') { // 如果是这三个 默认给null
-              this.chartInfo.param.nullType = this.chartInfo.param.nullType || 'null'
-              query += '&nullType=' + this.chartInfo.param.nullType
-            }
-            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)
-            if (this.chartInfo.type === 'line' || this.chartInfo.type === 'bar' || this.chartInfo.type === 'stackArea') { // 如果是这三个 默认给null
-              this.chartInfo.param.nullType = this.chartInfo.param.nullType || 'null'
-              query += '&nullType=' + this.chartInfo.param.nullType
-            }
-            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(self.data ? self.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]}",`
-                        }
-                      })
-                      const elements = this.data.elements[pos] || this.data.elements[pos - this.data.elements.length] // 处理添加对比时的legend
-                      if (host.endsWith(',')) { host = host.substr(0, host.length - 1) }
-                      if (queryItem.metric.__name__) {
-                        host += '}'
-                      }
-                      if (!host || host === '') {
-                        host = elements.expression
-                      }
-                      let alias = dealLegendAlias(host, elements.legend)
-                      if (!alias || alias === '') {
-                        alias = host
-                      }
-                      if (pos >= this.data.elements.length) {
-                        legend.push({ name: 'Previous ' + host + '-' + elements.id + '-' + innerPos, alias: 'Previous ' + alias })
-                        seriesItem.theData.name = 'Previous ' + host + '-' + elements.id + '-' + innerPos
-                        seriesItem.metric_name = seriesItem.theData.name
-                      } else {
-                        legend.push({ name: host + '-' + elements.id + '-' + innerPos, alias: alias })
-                        seriesItem.theData.name = host + '-' + elements.id + '-' + innerPos
-                        seriesItem.metric_name = seriesItem.theData.name
-                      }
-                      // 图表中每条线的名字,去掉最后的逗号与空格:metric名称,  标签1=a,标签2=c
-                      // 将秒改为毫秒
-                      // alert('table=='+JSON.stringify(queryItem))
-                      seriesItem.theData.data = queryItem.values.map((dpsItem, dpsIndex) => {
-                        return [dpsItem[0] * 1000, dpsItem[1]]
-                      })
-                      series.push(seriesItem.theData)
-                    } else if (this.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)
-            legend.forEach((item, index) => {
-              item.color = this.bgColorList[index]
-            })
-            if (this.$refs.pickTime.$refs.multipleTime && this.$refs.pickTime.$refs.multipleTime.searchTime.length && res.length > this.data.elements.length) {
-              const minusTime = (new Date(this.searchTime[0]).getTime() - new Date(this.$refs.pickTime.$refs.multipleTime.searchTime[0]).getTime())
-              this.minusTime = minusTime
-              let cutPoint = 0
-              res.forEach((item, index) => {
-                if (index < res.length / 2) {
-                  cutPoint += res[index].data.result.length
-                }
-              })
-              series.forEach((item, index) => {
-                if (index >= cutPoint) {
-                  series[index].data.forEach((item1, index1) => {
-                    item1[0] = item1[0] + minusTime
-                  })
-                }
-              })
-            }
-            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) {
-      const span = document.querySelector('.temp-dom')
-      span.textContent = str
-      const txtWidth = parseFloat(window.getComputedStyle(span).width)
-      return Number('-' + (txtWidth + 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
-    },
-    // 获取格式
-    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
-      const chartInfo = this.data
-      const dataArg = this.seriesItem
-      const maxValueCopies = this.getMaxValue(dataArg, chartInfo)
-      const maxValue = maxValueCopies.maxValue
-      // const minValue = maxValueCopies.minValue
-      // const dot = maxValueCopies.dot
-      const copies = maxValueCopies.copies
-      const unit = maxValueCopies.unit
-      // const oldDot = maxValueCopies.oldDot
-      const option = {
-        yAxis: {
-          minInterval: chartDataFormat.Interval(maxValue, copies, unit.type, 'min'),
-          maxInterval: chartDataFormat.Interval(maxValue, copies, unit.type, 'max') * Math.ceil(dataArg.length / 5)
-        }
-      }
-      if (!maxValueCopies.copies) {
-        option.yAxis.min = 0
-        option.yAxis.max = 1
-      } else {
-        option.yAxis.max = undefined
-      }
-      if (unit.type == 'Time' || option.yAxis.maxInterval === 1) {
-        delete option.yAxis.maxInterval
-      }
-      getChart(this.chartIndex) && getChart(this.chartIndex).setOption({
-        series: this.seriesItem,
-        yAxis: {
-          ...option.yAxis
-        }
-      })
-      if (this.hasLegendOptions) {
-        this.computeLegendData(this.legendListMore, this.seriesItemArr, 'local')
-      }
-      this.$nextTick(() => {
-        const divHeight = this.$refs.legendArea && this.$refs.legendArea.offsetHeight > 20 ? this.$refs.legendArea.offsetHeight : 27
-        if (!this.chartInfo.height) {
-          getChart(this.chartIndex).resize({ height: (400 - divHeight - this.$chartResizeTool.titleHeight - this.$chartResizeTool.chartBlankHeight) })
-        } else {
-          getChart(this.chartIndex).resize({ height: (this.chartInfo.height * this.stepWidth - divHeight - this.$chartResizeTool.titleHeight - this.$chartResizeTool.chartBlankHeight) })
-        }
-      })
-    },
-    // 加载更多
-    loadScreenMore () {
-      this.seriesItemArrScreen = this.seriesItemScreen
-      this.screenLegendListMore = this.screenLegendList
-      const chartInfo = this.data
-      const dataArg = this.seriesItem
-
-      const maxValueCopies = this.getMaxValue(dataArg, chartInfo)
-      const maxValue = maxValueCopies.maxValue
-      // const minValue = maxValueCopies.minValue
-      // const dot = maxValueCopies.dot
-      const copies = maxValueCopies.copies
-      const unit = maxValueCopies.unit
-      // const oldDot = maxValueCopies.oldDot
-      const option = {
-        yAxis: {
-          minInterval: chartDataFormat.Interval(maxValue, copies, unit.type, 'min'),
-          maxInterval: chartDataFormat.Interval(maxValue, copies, unit.type, 'max') * Math.ceil(dataArg.length / 5)
-        }
-      }
-      if (!maxValueCopies.copies) {
-        option.yAxis.min = 0
-        option.yAxis.max = 1
-      } else {
-        option.yAxis.max = undefined
-      }
-      if (unit.type == 'Time' || option.yAxis.maxInterval === 1) {
-        delete option.yAxis.maxInterval
-      }
-      this.echartModalStore && this.echartModalStore.setOption({
-        series: this.seriesItemScreen,
-        yAxis: {
-          ...option.yAxis
-        }
-      })
-      if (this.hasLegendOptions) {
-        this.computeLegendData(this.screenLegendListMore, this.seriesItemArrScreen, 'screen')
-      }
-      this.$nextTick(() => {
-        const legendDiv = document.getElementById('screenLegendArea' + this.chartIndex)
-        const divHeight = legendDiv.offsetHeight
-        const screenHeight = document.documentElement.clientHeight || document.body.clientHeight
-        const sumHeight = Math.floor(screenHeight * 0.99 * 0.8)// margin-top:1vh; dailog:80%
-        this.$refs.screenShowArea.style.height = `${sumHeight - divHeight - this.screenTitleHeight}px`
-        this.echartModalStore.resize({ height: (sumHeight - divHeight - this.screenTitleHeight) })// 图表的高度
-      })
-    },
-    findLegendOptions: function () {
-      if (!this.data.param || !this.data.param.legendValue || Object.keys(this.data.param.legendValue) < 1) return false
-      const legendOptions = this.data.param.legendValue
-      const onVal = Object.keys(legendOptions).find(item => { return legendOptions[item] == 'on' })
-
-      return onVal
-    },
-    computeLegendData: function (legend, dataArr, where) {
-      const options = where == 'local' ? this.legendOptions : this.screenLegendOptions
-      const keys = options.filter(item => { return item.value == 'on' }).map(item => { return item.option })
-      keys.forEach(key => {
-        return new Promise(resolve => {
-          legend.forEach(item => {
-            const data = dataArr.find(t => t.name == item.name)
-            if (data && data.data) {
-              const value = getMetricTypeValue(data.data, key)
-              item[key] = parseFloat(value)
-            }
-          })
-          resolve()
-        })
-      })
-    },
-    formatLegendData: function (data) {
-      return chartDataFormat.getUnit(this.chartInfo.unit).compute(data, null, 2)
-    },
-    legendValueSort: function (option, legend, options) {
-      options.forEach(item => {
-        if (item.option != option.option) {
-          item.sort = ''
-        }
-      })
-      if (!option.sort || option.sort == 'asc') {
-        legend.sort((x, y) => x[option.option] - y[option.option])
-        option.sort = 'desc'
-      } else {
-        legend.sort((x, y) => y[option.option] - x[option.option])
-        option.sort = 'asc'
-      }
-    },
-    getMaxValue (dataArg, chartInfo) {
-      let maxValue = 0
-      let minValue = 0
-      if (chartInfo.unit && dataArg.length > 0) {
-        maxValue = 0
-        minValue = 0
-        for (let j = 0; j < dataArg.length; j++) {
-          for (let i = 0; i < dataArg[j].data.length; i++) {
-            if (!isNaN(dataArg[j].data[i][1])) {
-              maxValue = (maxValue < Number(dataArg[j].data[i][1]) ? Number(dataArg[j].data[i][1]) : maxValue)
-              minValue = (minValue > Number(dataArg[j].data[i][1]) ? Number(dataArg[j].data[i][1]) : minValue)
-            }
-          }
-        }
-      }
-      const chartUnit = chartInfo.unit ? chartInfo.unit : 2
-      const unit = chartDataFormat.getUnit(chartUnit)
-      minValue = minValue > 0 ? 0 : minValue
-      if (!isNaN(maxValue)) {
-        maxValue = Number(maxValue)
-      } else {
-        maxValue = 0
-      }
-      if (maxValue < 0) {
-        maxValue = Math.abs(maxValue)
-      }
-      if (Math.abs(minValue) > Math.abs(maxValue)) {
-        maxValue = Math.abs(minValue)
-      }
-      maxValue = maxValue - minValue
-      maxValue = chartDataFormat.formatDatas(maxValue, unit.type, 'ceil', unit.ascii)
-      let oldValue = maxValue
-      let dot = 0
-      if (maxValue == 1) {
-        dot++
-      }
-      if (oldValue > 10) {
-        while (oldValue > 10) {
-          oldValue = oldValue / 10
-        }
-      } else if (oldValue < 1 && maxValue !== 0) {
-        while (oldValue < 1 && oldValue > 0) {
-          oldValue = oldValue * 10
-          dot++
-        }
-        maxValue = Math.floor(oldValue) / Math.pow(10, dot)
-        dot++
-      }
-      const copies = chartDataFormat.copies(oldValue, unit.type)
-      let oldDot = 2
-      if (maxValue <= 1) {
-        oldDot = dot > 6 ? 6 : dot
-      }
-      return {
-        maxValue,
-        dot,
-        copies,
-        minValue,
-        unit,
-        oldDot
-      }
-    },
-    chartResize () {
-      if (getChart(this.chartIndex)) {
-        const divHeight = this.$refs.legendArea.offsetHeight
-        getChart(this.chartIndex).resize({ height: (this.data.height * this.stepWidth - divHeight - chartResizeTool.titleHeight - chartResizeTool.chartBlankHeight) })
-        if (!getChart(this.chartIndex).getOption()) {
-          return
-        }
-        let minInterval = ''
-        let splitNumber = ''
-        if (this.fromTopo) {
-          const dashboardTime = localStorage.getItem('dashboardTime') ? JSON.parse(localStorage.getItem('dashboardTime')) : ['', '']
-          if (dashboardTime[0]) {
-            const numInterval = new Date(dashboardTime[1]).getTime() - new Date(dashboardTime[0]).getTime()
-            if (numInterval >= 60 * 60 * 1000) {
-              minInterval = 20 * 60 * 1000
-            } else if (numInterval >= 30 * 60 * 1000 && numInterval < 60 * 60 * 1000) {
-              minInterval = 10 * 60 * 1000
-            } else if (numInterval >= 15 * 60 * 1000 && numInterval < 30 * 60 * 1000) {
-              minInterval = 5 * 60 * 1000
-            } else if (numInterval >= 5 * 60 * 1000 && numInterval < 15 * 60 * 1000) {
-              minInterval = 1 * 60 * 1000
-            } else {
-              minInterval = 15 * 1000
-            }
-          } else {
-            minInterval = 20 * 60 * 1000
-          }
-          getChart(this.chartIndex) && getChart(this.chartIndex).setOption({ xAxis: { minInterval: minInterval } })
-        } else {
-          if (this.$refs.resizeBox.offsetWidth < 200) {
-            splitNumber = 1
-          } else if (this.$refs.resizeBox.offsetWidth < 300) {
-            splitNumber = 3
-          } else if (this.$refs.resizeBox.offsetWidth < 500) {
-            splitNumber = 5
-          }
-          getChart(this.chartIndex) && getChart(this.chartIndex).setOption({ xAxis: { splitNumber: splitNumber } })
-        }
-      }
-    }
-  },
-  created () {
-    this.legendListMore = []
-    this.screenLegendListMore = []
-    this.chartInfo = {}
-    this.seriesItem = [] // 保存信息
-    this.seriesItemArr = []// 初次加载的数据
-    this.seriesItemScreen = []
-    this.seriesItemArrScreen = []
-    this.legend = []
-    this.legendList = []
-    this.screenLegendList = []
-    this.legendOptions = []
-    this.screenLegendOptions = []
-
-    // this.highchartStore = null, // 保存图表数据
-    this.echartStore = null // 保存图表数据
-    this.echartModalStore = null // 全屏查看时数据
-
-    this.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'
-    ]
-  },
-  mounted () {
-    this.firstLoad = false
-    if (!document.onmousemove) { // 添加鼠标移动事件监听
-      document.onmousemove = lineChartMove
-    }
-  },
-  beforeDestroy () {
-    this.clearChart()
-    if (getChart(this.chartIndex)) {
-      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/chart/panelChart.vue b/nezha-fronted/src/components/chart/panelChart.vue
index 429ee98cc..a37064f41 100644
--- a/nezha-fronted/src/components/chart/panelChart.vue
+++ b/nezha-fronted/src/components/chart/panelChart.vue
@@ -203,6 +203,7 @@ export default {
       // TODO assetInfo、endpointInfo、echarts等进行不同的处理
       let startTime = ''
       let endTime = ''
+      // todo 刷新 需要判断是否是相对时间
       if (isRefresh) { // 刷新则视情况更新时间范围
         const now = new Date(bus.computeTimezone(new Date().getTime()))
         const origin = new Date(bus.timeFormate(bus.formateTimeToTime(this.timeRange[1]), 'YYYY-MM-DD HH:mm:ss'))
diff --git a/nezha-fronted/src/components/common/ChartDiagram/diagram.vue b/nezha-fronted/src/components/common/ChartDiagram/diagram.vue
deleted file mode 100644
index a48b753ad..000000000
--- a/nezha-fronted/src/components/common/ChartDiagram/diagram.vue
+++ /dev/null
@@ -1,1956 +0,0 @@
-<style>
-  @import "../project/L5/css/iconfont.css";
-  @import "../project/L5/css/props.css";
-</style>
-<template>
-  <div class="project-box list-page" v-my-loading="topologyLoading">
-    <div class="main-list" style="overflow: hidden">
-      <div class="main-container" :class="fromOverView?'from-overview':'from-project'">
-        <div v-if="(editTopologyFlag || isPreview)&&!fromChart" class="edit-topologyLine top-tools" style="padding-left: 20px;width: calc(100% - 20px);display: inline-block">
-          <!--工具栏-->
-          <span v-if="!isPreview" class="project-topology-tool">
-          <el-dropdown trigger="click" size="small" placement="bottom-start" class="no-style-class">
-            <span class="el-dropdown-title"><i class="iconfont icon-cube"></i> <i
-              class="nz-icon nz-icon-arrow-down"></i></span>
-            <el-dropdown-menu slot="dropdown" @click="dropdownClick">
-              <div style="height: 450px"  v-my-loading="imgageLoading">
-                <el-card shadow="hover" style="height:420px;width:284px;overflow-y: auto"
-                         class="project-topology-add-node">
-                <!--<div class="drag-header">——</div>-->
-                <el-collapse v-model="activeNames" v-for="(item, index) in tools" :key="index" class="collapse-box">
-                  <el-collapse-item :title="item.group" :name="item.group">
-                    <template slot="title">
-                      <div style="display: flex;width: 100%;">
-                        <i class="nz-icon nz-icon-caret-right"></i> <div style="flex: 1">{{item.group}}</div> <i class="nz-icon nz-icon-delete title-delete" @click="tooltipDeleteTitle(item)" :title="$t('overall.delete')"></i>
-                      </div>
-                    </template>
-                    <div v-for="(btn, i) in item.children" :key="'info2'+'-'+index+'-'+i" class="buttons"  :title="btn.data.text">
-                      <a
-                        :key="i"
-                        :draggable="btn.data"
-                        @dragstart.stop="onDrag($event, btn)"
-                        @mousedown="dragFlag=false"
-                        @mouseup="dragFlagChange(btn)"
-                        class="btn"
-                      >
-                        <img :src="btn.data.image" v-if="btn.data.image">
-                        <i v-else-if="btn.data.iconName" f :class="`nz-icon ${btn.data.iconName}`"></i>
-                        <i v-else :class="`iconfont ${btn.icon}`"></i>
-                      </a>
-                      <i v-if="item.group!=='General'" class="delIcon nz-icon nz-icon-delete" @click="tooltipDelete(btn)"  :title="$t('overall.delete')"></i>
-                    </div>
-                  </el-collapse-item>
-                </el-collapse>
-              </el-card>
-                <div class="upload-pic-box" @click="uploadPicChange">
-                  <i class="el-icon-plus"></i>
-                  <span>
-                     {{ $t('overall.uploadCustomPicture') }}
-                  </span>
-                </div>
-              </div>
-            </el-dropdown-menu>
-          </el-dropdown>
-
-          <div class="flex middle special-select mb10"
-               style="width: 75px;height: 28px;display: inline-block;margin: 0 40px 0 20px;background: #fff">
-            <div class="full pr10">
-              <el-select v-model="lineName" size="small"
-                         :popper-append-to-body="false"
-                         @change="changeTopologyOpt(lineName,'lineName')">
-               <div slot="prefix">
-                <div class="icon-item" style="width: 100%;padding: 0">
-                  <svg>
-                    <g fill="none" :stroke="theme === 'light' ? 'black' : '#BEBEBE'" stroke-width="1">
-                      <path
-                        :d="penLineType.find((item,i)=>item.id==lineName).d"
-                      >
-                      </path>
-                    </g>
-                  </svg>
-                </div>
-              </div>
-                <el-option :disabled="true" :value="false">{{$t('project.topology.defaultLineType')}}</el-option>
-                <el-option v-for="(item,index) in penLineType" :value="item.id" :key="index">
-                  <div class="icon-item" style="position: relative;width: 100%;padding: 0">
-                    <svg>
-                    <g fill="none" :stroke="(lineName==item.name)?'#ee9d3f': item.strokeColor " 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>
-            </div>
-          </div>
-
-          <topology-top-tool
-            v-if="editTopologyFlag&&toolShow.topTool"
-            :selection.sync="props"
-            @del="delPen"
-            :index="topologyIndex"
-            ref="topTool"
-            @toolShowChange="toolShowChange"
-            :cachesIndex="cachesIndex"
-            :redoIndexChange="redoIndexChange"
-            :toolShow="toolShow">
-          </topology-top-tool>
-
-        </span>
-          <span class="float-right">
-          <button type="button" @click="previewTopology" v-if="!isPreview" class="nz-btn nz-btn-size-normal nz-btn-style-light"
-                  style="margin-right: 20px"
-          >
-             {{$t('overall.preview')}}
-           </button>
-            <button type="button" v-if="isPreview" class="nz-btn nz-btn-size-normal nz-btn-style-light" @click="previewExit"
-                    style="margin-right: 20px"
-            >
-             {{$t('project.topology.previewExit')}}
-           </button>
-           <button type="button" class="nz-btn nz-btn-size-normal nz-btn-style-normal" @click="saveTopology"
-                   :disabled="prevent_opt.save"
-                   :class="{'nz-btn-disabled':prevent_opt.save}"
-                   style="margin-right: 20px">
-             {{$t('overall.save')}}
-           </button>
-           <button type="button" class="nz-btn nz-btn-size-normal nz-btn-style-normal" style="margin-right: 20px" @click="cancelTopology">
-             {{$t('project.topology.exit')}}
-           </button>
-         </span>
-        </div>
-        <div v-if="(!editTopologyFlag&&!fromOverView)&&!fromChart" class="top-tools" style="padding-left: 10px">
-        </div>
-        <div class="nz-table-list" :class="fromChart ? 'h100': ''">
-          <!--悬浮network部分-->
-          <div class="network-info">
-            <div v-if="popDataShow.main">
-              <popDataMain :moduleId="moduleId" :projectId="projectInfo.id"></popDataMain>
-            </div>
-            <div v-if="popDataShow.info">
-              <popDataInfo :moduleId="moduleId" :projectId="projectInfo.id"></popDataInfo>
-            </div>
-          </div>
-          <div :class="['page topo-page',fromOverView?'overview-page':'']">
-            <!--画布部分-->
-            <div :id="'topology-canvas' + topologyIndexF" :ref="'topology-canvas'+ topologyIndexF" class="full"  @contextmenu="onContextMenu($event)"></div>
-            <!--设置属性-->
-            <div v-if="editTopologyFlag&&toolShow.attr" class="props">
-              <canvas-props ref="CanvasProps"
-                            :index="topologyIndex"
-                            :imgArr = 'tools'
-                            :modules="modules"
-                            :selection.sync="props"
-                            :fromDiagram="true"
-                            @animate="animateCanvas"
-                            @change="onUpdateProps"
-                            @changeProjectTitle="changeProjectTitle"
-                            @del="delPen"
-                            @notModuleIDArrChange="notModuleIDArrChange">
-              </canvas-props>
-            </div>
-            <div class="context-menu" v-if="contextmenu.left && editTopologyFlag" :style="this.contextmenu">
-              <CanvasContextMenu :index="topologyIndexF" :props.sync="props"></CanvasContextMenu>
-            </div>
-            <!--所有节点上的小图标-->
-            <div v-for="(item,index) in nodesArr"
-                 :key="index"
-                 v-if="false"
-                 class="network-pop"
-            >
-
-              <i
-                :ref="'modelTopId'+index"
-                :class="{'nz-icon':true, 'nz-icon-shuidi':true,'model-error':item.data.state&&item.data.state.error&&!item.data.show,'model-error-active':item.data.state&&item.data.state.error&&item.data.show}"
-                @click="showNodeTools(index,item)"
-              >
-                <i class="nz-icon nz-icon-model"></i>
-              </i>
-              <!--'selpop':selpopIs(item),'no-selPop':!selpopIs(item),'error-model-stat':modelPopError(item)  @click="popClick(item.id)" -->
-              <div v-for="(item1, index) in popData" :key="index">
-                <transition name="scaleTool">
-                  <i v-if="item.data.show"
-                     :class="{'nz-icon':true,'nz-icon-hexagonBorder':true,'error-model-stat':item.data.state[item1.id],'selpop':selpopIs(item,item1),'no-selPop':!selpopIs(item,item1),}"
-                     :style="{top:item1.top,left:item1.left}"
-                     :title="item1.title"
-                     @click="nodeTools(item,item1)"
-                  >
-                    <i class="nz-icon nz-icon-liubianxing"></i>
-                    <i :class="[item1.className,{'nz-icon':item1.className},'noMove']"></i>
-                  </i>
-                </transition>
-              </div>
-            </div>
-            <!--提示未添加module id的块-->
-            <div v-for="(item, index) in notModuleIDArr"
-                 v-if="editTopologyFlag&&!fromPrev"
-                 :key="index"
-                 :style="{
-             position: 'absolute',
-             top:item.rect.y- 10 +'px',
-             left:item.rect.x - 10+'px',
-             transform:'scale('+(fromOverView?penToolTipScale:1)+')',
-           }"
-            >
-              <div :style="{top:0,left:0,width:item.rect.width+15+'px',height:0}" class="module-rect-top"></div>
-              <div :style="{top:0,left:item.rect.width+15+'px',width:0,height:item.rect.height+15+'px'}" class="module-rect-right"></div>
-              <div :style="{top:item.rect.height+15 +'px',left:0,width:item.rect.width+15+'px',height:0}" class="module-rect-bottom"></div>
-              <div :style="{top:0,left:0,width:0,height:item.rect.height+15+'px'}" class="module-rect-left"></div>
-            </div>
-            <!--节点连线相关的 tooltip-->
-            <div v-if="tooltipPosition.show&&!editTopologyFlag"
-                 ref="topoTooltip"
-                 :style="{position:isScreen?'fixed' : 'absolute',top:tooltipPosition.top+'px',left:tooltipPosition.left+'px','z-index':10,height:tooltipPosition.height+'px'}"
-                 @mouseout="tooltipOut"
-                 @mouseover="tooltipOver"
-            >
-              <topoTooltip class="nz-tooltip-bac" :chartDataParent="chartData" :filterTime="filterTime" :isPanel="isPanel"/>
-            </div>
-          </div>
-          <!--endpoint-->
-          <transition name="right-box">
-            <endpointTable v-if="popDataShow.endpoint" :moduleId="moduleId" :moduleName="moduleName" :projectId="projectInfo.id"
-                           @close="popDataShowUpdate('',true)">endpoint
-            </endpointTable>
-          </transition>
-          <div v-if="!fromOverView&&!editTopologyFlag&&!fromPrev&&!fromChartBox" class="right-bottom-zoom">
-            <div class="zoom-option" style="border-bottom: 1px solid #c5c8cb;" @click="zoomMap(0.25)" :title="$t('overall.enlargement')"><span><i class="nz-icon nz-icon-enlarge"></i></span></div>
-            <div class="zoom-option" @click="zoomMap(-0.25)" :title="$t('overall.shrink')"><span><i class="nz-icon nz-icon-narrow"></i></span></div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <!--<div class="left-bottom" v-if="editTopologyFlag">-->
-    <!--<div class="title">小提示</div>-->
-    <!--<ul class="group">-->
-    <!--<li>编辑时：</li>-->
-    <!--<li>1.Ctrl + 鼠标移动：移动整个画布</li>-->
-    <!--<li>2.Ctrl + 鼠标滚轮：缩放</li>-->
-    <!--<li>3.选中元素 按下Delete键或者Backspace可以删除元素</li>-->
-    <!--</ul>-->
-    <!--</div>-->
-    <!--asset-->
-    <transition name="right-box">
-      <assetTable v-if="popDataShow.asset" :moduleId="moduleId" :moduleName="moduleName" :projectId="projectInfo.id"
-                  @close="popDataShowUpdate('',true)">alert
-      </assetTable>
-    </transition>
-    <!--alert-->
-    <transition name="right-box">
-      <alertTable v-if="popDataShow.alert" :moduleId="moduleId" :moduleName="moduleName" :projectId="projectInfo.id"
-                  @close="popDataShowUpdate('',true)">alert
-      </alertTable>
-    </transition>
-    <!--Custom picture-->
-    <el-dialog
-      :title="title"
-      :visible.sync="uploadPicShow"
-      width="auto"
-      class="no-style-class"
-      :append-to-body="true"
-      @close="uploadPicShow = false"
-      destroy-on-close>
-      <el-row class="upload-pic-row">
-        <el-col :span="4" class="upload-pic-label">{{ $t('overall.name') }}</el-col>
-        <el-col :span="20">
-          <el-input maxlength="64" show-word-limit v-model="uploadPic.name" size="small"  :placeholder="$t('project.topology.placeholderImg')"></el-input>
-        </el-col>
-      </el-row>
-      <el-row class="upload-pic-row">
-        <el-col :span="4" class="upload-pic-label">{{ $t('overall.folder') }}</el-col>
-        <el-col :span="20">
-          <el-autocomplete
-            :maxlength="64" show-word-limit
-            class="inline-input"
-            v-model="uploadPic.unit"
-            :fetch-suggestions="querySearch"
-            size="small"
-          ></el-autocomplete>
-        </el-col>
-      </el-row>
-
-      <el-row class="upload-pic-row">
-        <el-col :span="4" class="upload-pic-label"> </el-col>
-        <el-col :span="20">
-          <div class="upload-body">
-            <el-upload
-              drag
-              class="upload-demo"
-              action=" "
-              :show-file-list="true"
-              :on-change="beforeAvatarUpload"
-              :auto-upload="false"
-              accept=".jpg,.png"
-              :limit="1"
-              :id="'upload-pic-show'">
-              <!--<div slot="tip" class="el-upload__tip" >{{$t('overall.importTipImg')}}</div>-->
-              <i class="nz-icon nz-icon-upload"></i>
-              <div class="el-upload__text">{{$t('overall.dragFileTip')}}，{{$t('overall.or')}}&nbsp;<em>{{$t('overall.clickUpload')}}</em></div>
-            </el-upload>
-          </div>
-        </el-col>
-      </el-row>
-      <div class="upload-pic-row" style="text-align: center">
-            <span>
-               <button type="button" class="nz-btn nz-btn-size-normal nz-btn-style-light" style="margin-right: 20px" @click="uploadPicShow=false">
-             {{$t('project.topology.exit')}}
-           </button>
-
-              <button type="button" class="nz-btn nz-btn-size-normal nz-btn-style-normal"
-                      @click="imgUpload"
-                      :disabled="prevent_opt.save"
-                      :class="{'nz-btn-disabled':prevent_opt.save}"
-                      style="margin-right: 20px">
-             {{$t('overall.save')}}
-           </button>
-            </span>
-      </div>
-
-    </el-dialog>
-  </div>
-</template>
-
-<script>
-import { Topology } from '@topology/core'
-import { Store as le5leStore } from 'le5le-store'
-import {
-  flowPens
-} from '@topology/flow-diagram'
-import {
-  activityDiagram
-} from '@topology/activity-diagram'
-import {
-  classPens
-} from '@topology/class-diagram'
-import {
-  sequencePens,
-  sequencePensbyCtx
-} from '@topology/sequence-diagram'
-import { formPens } from '@topology/form-diagram'
-// import { Topology, registerNode } from '@topology/core'
-import imgDefault from '@/components/common/project/L5/services/img'
-import {
-  Tools,
-  imageTemp2,
-  rectangleImg2,
-  rectangleImgAnchors2,
-  disposeTopoOldData,
-  onChangeAnimate,
-  onChangeAnimateLine
-} from '@/components/common/project/L5/services/canvas.js'
-import { getTopology, setTopology, dealImg, topologyImg } from '../js/common'
-
-import CanvasProps from '@/components/common/project/L5/CanvasProps'
-import topologyTopTool from '@/components/common/project//L5//topologyTopTool'
-import CanvasContextMenu from '@/components/common/project//L5/CanvasContextMenu'
-import popDataMain from '@/components/common/project/popData/Main'
-import popDataInfo from '@/components/common/project/popData/Info'
-import alertTable from '@/components/common/project/popData/alertTable'
-import assetTable from '@/components/common/project/popData/assetTable'
-import endpointTable from '@/components/common/project/popData/endpointTable'
-import topoTooltip from '@/components/common/project/L5/topoTooltip'
-import { getMetricTypeValue, dealLegendAlias } from '../js/tools'
-import bus from '../../../libs/bus'
-import topologyMixin from '@/components/common/project/topologyMixin'
-
-export default {
-  name: 'diagram',
-  mixins: [topologyMixin],
-  data () {
-    const theme = localStorage.getItem(`nz-user-${localStorage.getItem('nz-user-id')}-theme`) || 'light'
-    return {
-      theme,
-      title: this.$t('overall.uploadCustomPicture'),
-      objChange: false, // project 变化 用于判断 init是否执行完成 执行完成 才可以执行下次变化
-      chartDataInfo: {},
-      topoPrevData: {}, // 预览数据
-      imgInit: false, // 判断图片是否加载完成
-      toolGroup: '基本形状',
-      editFlag: true,
-      tools: [
-        ...Tools,
-        {
-          group: 'Diagram',
-          children: [
-            {
-              name: 'rectangleImg2',
-              icon: 'icon-rect',
-              data: {
-                text: 'rect',
-                type: 0,
-                rect: {
-                  width: 100,
-                  height: 100
-                },
-                paddingLeft: 10,
-                paddingRight: 10,
-                paddingTop: 10,
-                paddingBottom: 10,
-                name: 'rectangleImg2',
-                icon: '\ue730',
-                iconFamily: 'nz-icon',
-                iconName: 'nz-icon-rectangle1',
-                iconColor: '#0c62e3'
-              }
-            },
-            {
-              name: 'rectangleImg2',
-              icon: 'icon-rect',
-              data: {
-                type: 0,
-                text: 'rect',
-                rect: {
-                  width: 100,
-                  height: 100
-                },
-                paddingLeft: 10,
-                paddingRight: 10,
-                paddingTop: 10,
-                paddingBottom: 10,
-                name: 'rectangleImg2',
-                icon: '\ue731',
-                iconFamily: 'nz-icon',
-                iconName: 'nz-icon-EMAC1',
-                iconColor: '#0c62e3'
-              }
-            },
-            {
-              name: 'rectangleImg2',
-              icon: 'icon-rect',
-              data: {
-                type: 0,
-                text: 'rect',
-                rect: {
-                  width: 100,
-                  height: 100
-                },
-                paddingLeft: 10,
-                paddingRight: 10,
-                paddingTop: 10,
-                paddingBottom: 10,
-                name: 'rectangleImg2',
-                icon: '\ue62f',
-                iconFamily: 'nz-icon',
-                iconName: 'nz-icon-circle',
-                iconColor: '#0c62e3'
-              }
-            }
-          ]
-        }
-      ],
-      props: {},
-      topologyLoading: false,
-      contextmenu: {
-        left: null,
-        top: null,
-        bottom: null
-      },
-      filterTime: [
-        bus.timeFormate(bus.getOffsetTimezoneData(-1), 'YYYY-MM-DD HH:mm:ss'),
-        bus.timeFormate(bus.getOffsetTimezoneData(), 'YYYY-MM-DD HH:mm:ss')
-      ],
-      topologyInfo: {
-        fontSize: 14,
-        align: 'left',
-        fontColor: '#000000',
-        opacity: 1,
-        name: ''
-      },
-      saveData: {},
-      oldTopologyData: '',
-      redoIndex: 0,
-      dataLength: 0,
-      editTopologyFlag: false,
-      searchTime: bus.getTimezontDateRange(),
-      activeNames: [],
-      topologyIndex: 0,
-      iconArray: [],
-      imgageLoading: false,
-      imageSave: false,
-      toolShow: {
-        node: true,
-        attr: true,
-        topTool: true,
-        nodeCord: [0, 0],
-        attrCord: [0, 0],
-        height: 500
-      },
-      dragFlag: true,
-      modules: [],
-      allModules: [],
-      projectInfo: {
-        title: '',
-        id: '',
-        remark: '',
-        alertStat: [1, 2, 3],
-        moduleMum: 6,
-        loading: true
-      },
-      timer: null, // 处理project短时间呢频繁变更的定时器
-      timer2: null, // 处理平移画布显示iconState的定时器
-      timer3: null, // 处理tooltip的显示定时器
-      nodesArr: [],
-      notModuleIDArr: [],
-      popData: [
-        {
-          top: '-40px',
-          left: '-21px',
-          className: 'nz-icon-endpoint',
-          id: 'endpoint',
-          title: this.$t('project.topology.endpoint')
-        },
-        { top: '-40px', left: '19px', className: 'nz-icon-asset', id: 'asset', title: this.$t('asset.asset') },
-        { top: '-4px', left: '40px', className: '', id: 'other', title: '' },
-        { top: '30px', left: '19px', className: '', id: 'other', title: '' },
-        { top: '30px', left: '-21px', className: 'nz-icon-info-normal', id: 'info', title: this.$t('project.topology.info') },
-        { top: '-4px', left: '-40px', className: 'nz-icon-gaojing', id: 'alert', title: this.$t('project.topology.alert') }
-      ],
-      popDataShow: {
-        endpoint: false,
-        asset: false,
-        total: false,
-        other: false,
-        info: false,
-        alert: false,
-        main: false
-      },
-      moduleId: '',
-      moduleName: '',
-      tooltipPosition: {
-        top: 0,
-        left: 0,
-        show: false,
-        height: 250
-      },
-      chartData: {},
-      chartGetData: [],
-      penLineType: [
-        { d: 'M5 19 a50,100 0 0,1 40,0', 'stroke-dasharray': '', name: this.$t('project.topology.curve'), id: 'curve', strokeColor: theme == 'light' ? 'black' : '#BEBEBE' },
-        { d: 'M5 8 l20 0 l0 12 l20 0', 'stroke-dasharray': '', name: this.$t('project.topology.polyline'), id: 'polyline', strokeColor: theme == 'light' ? 'black' : '#BEBEBE' },
-        { d: 'M5 14 l40 0', 'stroke-dasharray': '', name: this.$t('project.topology.line'), id: 'line', strokeColor: theme == 'light' ? 'black' : '#BEBEBE' }
-        // {d:'M5 20 C0,8 50,0 85,0',"stroke-dasharray":"",name:'mind', strokeColor: theme == 'light' ? 'black' : '#BEBEBE'},
-      ],
-      lineName: 'curve',
-      cachesIndex: 0,
-      projectInfoShow: false,
-      projectAlertShow: false,
-      previewShow: false,
-      penId: undefined,
-      penToolTipScale: 1,
-      oldScale: 1,
-      uploadPicShow: false,
-      imgWidth: 0,
-      imgHeight: 0,
-      uploadPic: {
-        name: '',
-        unit: ''
-      },
-      unitArr: [],
-      isPreview: false,
-      previewData: ''
-    }
-  },
-  components: {
-    'canvas-props': CanvasProps,
-    topologyTopTool,
-    popDataMain,
-    popDataInfo,
-    alertTable,
-    assetTable,
-    endpointTable,
-    topoTooltip,
-    CanvasContextMenu
-  },
-  props: {
-    topologyIndexF: {
-      default: 0
-    },
-    obj: {},
-    showTopTools: {
-      type: Boolean,
-      default: true
-    },
-    fromOverView: {
-      type: Boolean,
-      default: false
-    },
-    fromPrev: {
-      type: Boolean,
-      default: false
-    },
-    topoPrevDataS: {
-
-    },
-    topoData: {},
-    chartInfo: {},
-    fromChartBox: {
-      type: Boolean,
-      default: false
-    },
-    fromChart: {
-      type: Boolean,
-      default: false
-    },
-    fromTopologyDialog: {
-      type: Boolean,
-      default: false
-    },
-    isPanel: {
-      type: Boolean,
-      default: false
-    },
-    isScreen: {
-      type: Boolean,
-      default: false
-    }
-  },
-  watch: {
-    topologyIndexF: {
-      immediate: true,
-      handler (n) {
-        this.topologyIndex = n
-      }
-    },
-    topoData: {
-      immediate: true,
-      deep: true,
-      handler (n) {
-        this.topologyLoading = true
-        setTimeout(() => {
-          this.init()
-        }, 100)
-      }
-    }
-  },
-  computed: {
-  },
-  created () {
-    if (process.client) {
-      document.onclick = event => {
-        this.contextmenu = {
-          left: null,
-          top: null,
-          bottom: null
-        }
-      }
-    }
-  },
-  mounted () {
-    if (!this.fromOverView) { // 从overview来的 加载相应图片 优化首页加载速度
-      this.addNodeInit()
-    }
-    document.getElementById('topology-canvas' + this.topologyIndexF).addEventListener('mousemove', this.canvasMove)
-    window.addEventListener('resize', this.winResize)
-    window.addEventListener('click', this.contextmenuNone)
-  },
-  methods: {
-    init () {
-      this.reload()
-    },
-
-    reload () {
-      this.topologyLoading = true
-      this.getTopologyData().then((data) => {
-        this.openTopologyData(data).then(() => {
-          this.initPens(data)
-        })
-      })
-    },
-    initPens (data) {
-      // 获取对应的值 给节点 连线添加对应动画
-      this.lineName = data.lineName ? data.lineName : this.lineName
-      getTopology(this.topologyIndex).setOptions({ drawingLineName: this.lineName })
-      this.chartGetData = []
-      const axiosArr = []
-      const promiseArr = []
-      const self = this
-      const 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()
-          })
-        })
-      }
-      const dashboardTime = localStorage.getItem('dashboardTime') ? JSON.parse(localStorage.getItem('dashboardTime')) : ['', '']
-      const endTime = dashboardTime[1] || this.filterTime[1]
-      const startTime = dashboardTime[0] || this.filterTime[0]
-      const step = bus.getStep(startTime, endTime)
-      data.pens && data.pens.forEach((item, index) => {
-        this.chartGetData.push({ id: item.id, res: [] })
-        let arr = []
-        if (item.data.valueMappingShow) {
-          arr = item.data.expressArr.map((ele) => {
-            let query = ele
-            if (!query) {
-              return new Promise(resolve => {
-                resolve({ data: '', status: 'no query' })
-              })
-            }
-            query = encodeURIComponent(query)
-            query += '&nullType=' + 'null'
-            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))
-      })
-      if (this.fromTopologyDialog && !this.isPreview) {
-        setTimeout(() => {
-          this.topologyLoading = false
-          if (!data.pens) {
-            data.pens = []
-          }
-          getTopology(this.topologyIndex).open(data || {})
-          getTopology(this.topologyIndex).centerView()
-          getTopology(this.topologyIndex).resize()
-          this.editTopology()
-        }, 100)
-      } else {
-        Promise.all(promiseArr).then((res) => {
-          if (!getTopology(this.topologyIndex)) {
-            return
-          }
-          if (!data.pens) {
-            data.pens = []
-          }
-          getTopology(this.topologyIndex).open(data || {})
-          getTopology(this.topologyIndex).lock(1)
-          this.objChange = false
-          let flag = false
-          const position = {
-            x: this.$refs['topology-canvas' + this.topologyIndexF].offsetWidth,
-            y: this.$refs['topology-canvas' + this.topologyIndexF].offsetHeight
-          }
-          this.oldScale = getTopology(this.topologyIndex).data().scale
-          getTopology(this.topologyIndex).data().pens.forEach(item => {
-            if (flag) {
-              return
-            }
-            if (item.x + item.width > position.x || item.y + item.height > position.y) {
-              if (this.fromOverView) {
-                getTopology(this.topologyIndex).fitView(20)
-              }
-              flag = true
-            }
-          })
-          getTopology(this.topologyIndex).resize()
-          getTopology(this.topologyIndex).centerView()
-          if (this.fromChartBox || this.fromChart) { // 是否来自panel 和 chartBox
-            getTopology(this.topologyIndex).fitView(20)
-            if (this.chartInfo && this.chartInfo.param && this.chartInfo.param.lock) { // 判断节点 以及画布 是否可以拖动
-              getTopology(this.topologyIndex).lock(2)
-            }
-          }
-          this.topologyLoading = false
-          this.penToolTipScale = getTopology(this.topologyIndex).data().scale
-          setTimeout(() => {
-            getTopology(this.topologyIndex).data().pens.forEach(item => {
-              if (item.animatePlay) {
-                item.stopAnimate()
-                setTimeout(() => {
-                  item.startAnimate()
-                })
-              }
-            })
-          })
-          // if(this.fromPrev){
-          //   getTopology(this.topologyIndex).scaleTo(data.scale/2)
-          // }
-          // getTopology(this.topologyIndex).fitView();
-          this.oldTopologyData = JSON.stringify(getTopology(this.topologyIndex).data())
-          this.getNodesArr()
-        })
-      }
-    },
-    dateChange () {
-      // const nowTimeType = this.$refs.pickTime.$refs.timePicker.nowTimeType
-      // this.setSearchTime(nowTimeType.type, nowTimeType.value)
-      this.searchTime = bus.getTimezontDateRange()
-      this.filterTime[0] = bus.timeFormate(this.searchTime[0], 'YYYY-MM-DD HH:mm:ss')
-      this.filterTime[1] = bus.timeFormate(this.searchTime[1], 'YYYY-MM-DD HH:mm:ss')
-      this.reload()
-    },
-    setSearchTime (type, val) { // 设置searchTime
-      if (type === 'minute') {
-        const startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setMinutes(new Date(bus.computeTimezone(new Date().getTime())).getMinutes() - val), 'YYYY-MM-DD HH:mm:ss')
-        const endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())), 'YYYY-MM-DD HH:mm:ss')
-        this.$set(this.searchTime, 0, startTime)
-        this.$set(this.searchTime, 1, endTime)
-        this.$set(this.searchTime, 2, val + 'm')
-      } else if (type === 'hour') {
-        const startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setHours(new Date(bus.computeTimezone(new Date().getTime())).getHours() - val), 'YYYY-MM-DD HH:mm:ss')
-        const endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())), 'YYYY-MM-DD HH:mm:ss')
-        this.$set(this.searchTime, 0, startTime)
-        this.$set(this.searchTime, 1, endTime)
-        this.$set(this.searchTime, 2, val + 'h')
-      } else if (type === 'date') {
-        const startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setDate(new Date(bus.computeTimezone(new Date().getTime())).getDate() - val), 'YYYY-MM-DD HH:mm:ss')
-        const endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())), 'YYYY-MM-DD HH:mm:ss')
-        this.$set(this.searchTime, 0, startTime)
-        this.$set(this.searchTime, 1, endTime)
-        this.$set(this.searchTime, 2, val + 'd')
-      }
-      this.$refs.pickTime.$refs.timePicker.searchTime = this.searchTime
-    },
-    // 打开topology数据
-    openTopologyData (data) {
-      return new Promise((resolve, reject) => {
-        if (!document.getElementById('topology-canvas' + this.topologyIndexF)) {
-          return
-        }
-        data = this.$lodash.cloneDeep(data)
-        const canvasOptions = {
-          rotateCursor: '/static/roteCursor.cur',
-          disableEmptyLine: true,
-          autoExpandDistance: 0,
-          minScale: 0.2,
-          scaleKey: -1,
-          keydown: 1,
-          gridSize: 40
-        }
-        canvasOptions.ruleColor = this.theme == 'light' ? '#4e4e4e' : '#f6f6f6'
-        canvasOptions.gridColor = this.theme == 'light' ? '#4e4e4e' : '#BEBEBE'
-        if (!getTopology(this.topologyIndex)) {
-          let canvas = new Topology('topology-canvas' + this.topologyIndexF, canvasOptions)
-          // canvas.open(data)
-          setTopology(this.topologyIndex, canvas)
-          canvas = null
-        } else {
-          // getTopology(this.topologyIndex).open(data)
-        }
-        this.topologyLoading = false
-        getTopology(this.topologyIndex).register(flowPens())
-        getTopology(this.topologyIndex).register(activityDiagram())
-        getTopology(this.topologyIndex).register(classPens())
-        getTopology(this.topologyIndex).register(sequencePens())
-        getTopology(this.topologyIndex).registerCanvasDraw(sequencePensbyCtx())
-        getTopology(this.topologyIndex).registerCanvasDraw(formPens())
-        getTopology(this.topologyIndex).registerCanvasDraw({ rectangleImg2: rectangleImg2 })
-        getTopology(this.topologyIndex).registerAnchors({ rectangleImg2: rectangleImgAnchors2 })
-        getTopology(this.topologyIndex).on('translate', this.topTranslate) // 平移·
-        getTopology(this.topologyIndex).on('active', this.pensActive) // 选中·
-        getTopology(this.topologyIndex).on('scale', this.topoScale) // 缩放·
-        getTopology(this.topologyIndex).on('translatePens', () => {}) // 移动画笔结束·
-        getTopology(this.topologyIndex).on('translatingPens', () => {}) // 移动画笔进行中·
-        getTopology(this.topologyIndex).on('enter', this.penEnter) // 移入画笔·
-        getTopology(this.topologyIndex).on('leave', this.penLeave) // 移出画笔·
-        getTopology(this.topologyIndex).on('add', this.appPen) // 添加新画笔·
-        getTopology(this.topologyIndex).on('click', this.topoClick) // click画笔·
-        getTopology(this.topologyIndex).store.options.autoAnchor = true
-        resolve()
-      })
-    },
-    // 获取topology数据
-    getTopologyData () {
-      return new Promise(resolve => {
-        if (this.fromPrev) {
-          resolve(this.topoPrevDataS)
-        }
-        const res = {
-          data: {
-            topo: this.previewData || JSON.parse(JSON.stringify(this.topoData))
-          }
-        }
-        let data = res.data.topo
-        // data = JSON.parse(localStorage.getItem('topoData'))
-        if (!res.data.topo || !data.pens) {
-          data = {
-            background: '#FFFFFF00',
-            gridSize: 10,
-            gridColor: '#ededed',
-            lineWidth: 1,
-            ruleColor: '#4e4e4e',
-            pens: []
-          }
-          this.projectInfoShow = true
-          this.projectAlertShow = true
-          this.saveData = { ...data }
-          this.topologyInfo.name = ''
-          data.ruleColor = this.theme == 'light' ? '#4e4e4e' : '#BEBEBE'
-          resolve(data)
-        } else {
-          delete data.origin
-          data.ruleColor = this.theme == 'light' ? '#4e4e4e' : '#BEBEBE'
-          if (data.data) {
-            this.topologyInfo = {
-              fontSize: data.data.fontSize,
-              align: data.data.align,
-              fontColor: data.data.fontColor,
-              opacity: data.data.opacity,
-              name: data.name
-            }
-          } else {
-            this.topologyInfo = {
-              fontSize: 14,
-              align: 'left',
-              fontColor: '#000000',
-              opacity: 1,
-              name: ''
-            }
-          }
-          if (this.fromOverView || this.fromChartBox) { // 优化从首页来的加载速度
-            const arr = data.pens.filter(item => !item.type)
-            this.imgInit = false
-            this.addNodeInit(arr)
-          }
-          const timer = setInterval(() => {
-            if (!this.imgInit) {
-              return
-            }
-            clearInterval(timer)
-            for (let i = 0; i < data.pens.length; i++) {
-              const line = data.pens[i]
-              if (line.type === 1) {
-                // if (!data.pens.find(item => item.id === line.from.id) || !data.pens.find(item => item.id === line.to.id)) {
-                //   data.pens.splice(i, 1)
-                //   i--
-                // }
-              }
-            }
-            data.pens.forEach(item => {
-              if (item.type === 0 && item.data.imageId) {
-                const img = this.iconArray.find(item1 => item1.id == item.data.imageId)
-                item.image = img ? img.image : imgDefault
-              }
-              if (item.type === 0) {
-                item.data.state = {}
-                item.data.state.asset = false
-                item.data.state.endpoint = false
-                item.data.state.alert = false
-              } else {
-                item.data.state = {}
-                item.data.state.asset = false
-                item.data.state.endpoint = false
-                item.data.state.alert = false
-              }
-            })
-
-            if (!data.data) {
-              this.projectInfoShow = true
-              this.projectAlertShow = true
-            } else if (!JSON.stringify(data.data.projectInfo)) {
-              this.projectInfoShow = true
-              this.projectAlertShow = true
-            } else {
-              this.projectInfoShow = data.data.projectInfo
-              this.projectAlertShow = data.data.alertInfo
-            }
-            if (!data.bkImage) {
-              data.bkImage = undefined
-            }
-            if (data.background === '#FFFFFF') {
-              data.background = '#FFFFFF00'
-            }
-            if (!res.data.topo.newData) {
-              data.pens = this.$lodash.orderBy(data.pens, 'type', 'desc') // 先处理线 再处理点 因为新版本 将连线开始结束放在的 点上控制
-              data.pens = data.pens.map(item => {
-                if (item.type === 0) {
-                  item = disposeTopoOldData(item, data.pens)
-                } else {
-                  // promiseArr.push({ type: 1 })
-                  if (item.from) {
-                    const find = data.pens.find(item1 => item1.id == item.from.id)
-                    if (!find.connectedLines) {
-                      find.connectedLines = []
-                    }
-                    find.connectedLines.push({
-                      anchor: item.from.anchorIndex + '',
-                      lineAnchor: item.id + '-0',
-                      lineId: item.id
-                    })
-                  }
-                  if (item.to) {
-                    const find = data.pens.find(item1 => item1.id == item.to.id)
-                    if (!find.connectedLines) {
-                      find.connectedLines = []
-                    }
-                    find.connectedLines.push({
-                      anchor: item.to.anchorIndex + '',
-                      lineAnchor: item.id + '-1',
-                      lineId: item.id
-                    })
-                  }
-                  item = disposeTopoOldData(item, data.pens)
-                }
-                return item
-              })
-              data.pens = this.$lodash.orderBy(data.pens, 'type', 'asc')
-            }
-            resolve(data)
-          }, 100)
-        }
-      })
-    },
-    // 赋值动画
-    setAnimation (pen, res, isOldData) { // 根据所有res的状态 赋值动画
-      let maxLevel = 0
-      if (res.length > 0) {
-        res.forEach((response, innerPos) => {
-          if (response.status !== 'success') {
-            return
-          }
-          if (response.data.result) {
-            response.data.result.forEach((queryItem, resIndex) => {
-              pen.data.valueMapping.forEach((item, index) => {
-                if (item.value === 'base') { return }
-                if (queryItem.showValue > item.value) {
-                  queryItem.level = item.level
-                  if (maxLevel < item.level) {
-                    maxLevel = item.level
-                  }
-                }
-              })
-            })
-          }
-        })
-      }
-      if (maxLevel !== 0) {
-        if (pen.type === 0) { // 判断valueMapping 给相应的状态
-          const selLevel = pen.data.valueMapping.find(item => item.level === maxLevel)
-          if (selLevel) {
-            pen.textColor = selLevel.color.text
-            pen.background = selLevel.color.fill
-            pen.color = selLevel.color.line
-            pen.bkType = 0
-          }
-          onChangeAnimate(pen, selLevel.animateType, selLevel.color.fill, selLevel.color.line, selLevel.color.text)
-        } else if (pen.type === 1) { // 判断valueMapping 给相应的状态
-          const selLevel = pen.data.valueMapping.find(item => item.level === maxLevel)
-          if (selLevel) {
-            pen.animateColor = selLevel.color.fill
-            pen.color = selLevel.color.line
-            pen.lineAnimateType = selLevel.animateType
-            pen.fontColor = selLevel.color.text
-          }
-          onChangeAnimateLine(pen, selLevel.animateType, isOldData)
-        }
-      } else {
-        if (pen.type === 0 && pen.animatePlay) { // 判断valueMapping 给相应的状态
-          onChangeAnimate(pen, pen.animateType)
-        } else if (pen.type === 1 && pen.animatePlay) { // 判断valueMapping 给相应的状态
-          onChangeAnimateLine(pen, pen.animateType, isOldData)
-        }
-      }
-    },
-    computeData (res, type, pen) { // 处理别名 以及 根据type显示对应的值
-      if (res.length > 0) {
-        res.forEach((response, innerPos) => {
-          if (response.status !== 'success') {
-            return
-          }
-
-          if (response.data.result) {
-            response.data.result.forEach((queryItem, resIndex) => {
-              // 图表中每条线的名字,后半部分
-              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 dpsArr = []
-              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) {
-                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 = pen.data.expressArr[innerPos]
-                }
-                // 处理legend别名
-                let alias = dealLegendAlias(host, pen.data.legends[innerPos])
-                if (!alias || alias === '') {
-                  alias = host
-                }
-                queryItem.legend = { name: host + '-' + pen.data.legends[innerPos] + '-' + resIndex, alias: alias }
-                queryItem.showValue = getMetricTypeValue(queryItem.values, type)
-                // 图表中每条线的名字,去掉最后的逗号与空格:metric名称,  标签1=a,标签2=c
-              }
-            })
-          }
-        })
-      }
-      return res
-    },
-    // Severity Label
-    returnSeverityLabel (key) {
-      return this.$t(this.$CONSTANTS.alertMessage.severityData.find(s => { return s.value == key }).label)
-    },
-    getNodesArr () {
-      const arr = []
-      if (!getTopology(this.topologyIndex)) return
-      this.nodesArr = getTopology(this.topologyIndex).data().pens.filter(item => {
-        if (!item.data) {
-          item.data = {
-            moduleId: '',
-            moduleName: '',
-            show: false,
-            error: false,
-            expressArr: [],
-            state: {}
-          }
-        }
-        return item.type === 0
-      })
-      // 打开动画 是否更新顶部图标
-      this.nodesArr = JSON.parse(JSON.stringify(this.nodesArr))
-    },
-
-    modelTopClick (item, index) {
-
-    },
-    // 摘除已选择的module
-    modulesDiff (data) {
-      this.modules = this.allModules
-      if (getTopology(this.topologyIndex).data().pens) {
-        getTopology(this.topologyIndex).data().pens.forEach(item => {
-          if (item.type == 0) {
-            this.modules = this.modules.filter(item1 => item.data.moduleId !== item1.id)
-          }
-        })
-      }
-      if (data && data.data && data.data.moduleId) {
-        this.modules.unshift({ id: data.data.moduleId, name: data.data.moduleName })
-      }
-    },
-
-    // 显示module的工具
-    showNodeTools (index, pen) {
-      this.nodesArr.forEach((item, i) => {
-        item.data.show = i === index
-      })
-    },
-
-    // 具体内容点击
-    nodeTools (node, tool) {
-      this.moduleId = node.data.moduleId
-      this.moduleName = node.data.moduleName
-      if (tool.id === 'total') {
-        this.popDataShowUpdate('', false, node)
-        return
-      }
-      setTimeout(() => {
-        this.popDataShowUpdate(tool.id, false, node)
-      }, 100)
-    },
-
-    popDataShowUpdate (key, flag, node) { // key 显示对应的弹窗 flag是否不显示工具栏
-      this.popDataShow = {
-        endpoint: false,
-        asset: false,
-        total: false,
-        other: false,
-        info: false,
-        alert: false,
-        main: false
-      }
-      if (key === 'total') {
-        this.chartDataInfo = { ...node.data, ...this.chartGetData.find(item => item.id === node.id) }
-      }
-      this.$nextTick(() => {
-        this.popDataShow[key] = true
-      })
-      if (flag) { // 处理关闭后 缩放后显示工具按钮的问题
-        this.moduleId = ''
-        this.showNodeTools('')
-      }
-      if (key === 'asset' || key === 'alert' || key === 'endpoint') {
-        this.showNodeTools('')
-      }
-    },
-
-    /* topology 方法 */
-    /* topology 方法 */
-    onDrag (event, node) {
-      this.dragFlag = false
-      const timer = setTimeout(() => {
-        this.dragFlag = true
-        clearTimeout(timer)
-      }, 100)
-      event.dataTransfer.setData('Text', JSON.stringify({ ...node.data, data: { imageId: node.data.imageId } }))
-    },
-    dragFlagChange (node) {
-      getTopology(this.topologyIndex).addPen(
-        {
-          ...node.data,
-          ...node.data.rect,
-          x: this.$refs['topology-canvas' + this.topologyIndexF].offsetWidth / 2 - 50,
-          y: this.$refs['topology-canvas' + this.topologyIndexF].offsetHeight / 2 - 50,
-          data: { imageId: node.data.imageId }
-        })
-      const timer = setTimeout(() => {
-        this.dragFlag = true
-        clearTimeout(timer)
-      }, 100)
-    },
-    getLocked (data) {
-      let locked = true
-      if (data.nodes && data.nodes.length) {
-        for (const item of data.nodes) {
-          if (!item.locked) {
-            locked = false
-            break
-          }
-        }
-      }
-      if (locked && data.lines) {
-        for (const item of data.lines) {
-          if (!item.locked) {
-            locked = false
-            break
-          }
-        }
-      }
-
-      return locked
-    },
-
-    onUpdateProps (node) {
-      const obj = this.$lodash.cloneDeep(node)
-      delete obj.x
-      delete obj.y
-      delete obj.center
-      delete obj.ex
-      delete obj.ey
-      delete obj.width
-      delete obj.height
-      getTopology(this.topologyIndex).setValue(obj)
-    },
-
-    handleAvatarSuccess () {
-
-    },
-    beforeAvatarUpload (file, fileList) {
-      const this_ = this
-      const isJPG = (file.raw.type === 'image/jpeg' || file.raw.type === 'image/png')
-      const isLt2M = (file.size / 1024 / 1024) < 2
-      if (!isJPG) {
-        this.$message.error(this_.$t('project.topology.imgFormat'))
-        fileList = fileList.splice(fileList.length - 1, 1)
-        return false
-      }
-      if (!isLt2M) {
-        this.$message.error(this_.$t('project.topology.imgSize'))
-        fileList = fileList.splice(fileList.length - 1, 1)
-        return false
-      }
-      const isSize = new Promise(function (resolve, reject) {
-        const width = 0
-        const height = 0
-        const _URL = window.URL || window.webkitURL
-        const img = new Image()
-        img.onload = function () {
-          const valid = img.width > width && img.height > height
-          this_.imgWidth = img.width
-          this_.imgHeight = img.height
-          valid ? resolve() : reject()
-        }
-        img.src = _URL.createObjectURL(file.raw)
-      }).then(() => {
-        if (isJPG) {
-          this.file = file.raw
-        }
-        return file.raw
-      }, () => {
-        this.$message.error(this_.$t('project.topology.imgMeasure'))
-        return Promise.reject()
-      })
-      return false
-    },
-
-    toolShowChange (attr) {
-      this.toolShow[attr] = !this.toolShow[attr]
-    },
-    /* topology 方法 */
-    end (v) {
-
-    },
-    /* tools 方法 */
-
-    imgUpload () {
-      const this_ = this
-      if (!this.imageSave) {
-        this.imageSave = true
-      }
-      if (!this.uploadPic.unit) {
-        this.$message({
-          message: this_.$t('project.topology.unitError'),
-          type: 'error'
-        })
-        return
-      }
-      if (!this.file) {
-        this.$message({
-          message: this_.$t('project.topology.imgError'),
-          type: 'error'
-        })
-        return
-      }
-      this.upload()
-    },
-    upload () {
-      const form = new FormData()
-      form.append('file', this.file)
-      if (this.uploadPic.name) {
-        form.append('name', this.uploadPic.name)
-      } else {
-        form.append('name', this.file.name.substring(0, this.file.name.lastIndexOf('.')))
-      }
-      form.append('unit', this.uploadPic.unit)
-      form.append('width', this.imgWidth)
-      form.append('height', this.imgHeight)
-      this.$post('monitor/project/topo/icon', form, { 'Content-Type': 'multipart/form-data' }).then(res => {
-        this.imageSave = false
-        if (res.code == 200) {
-          this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })
-          this.uploadPicShow = false
-          this.$get('monitor/project/topo/icon', { id: res.data.id }).then(iconInfo => {
-            dealImg(`monitor/project/topo/icon/${res.data.id}/1`, res.data.id).then((data, header) => {
-              const group = this.tools.find(tool => tool.group === this.uploadPic.unit)
-              this.iconArray.push({
-                ...iconInfo.data.list[0],
-                image: data.data
-              })
-              if (group) {
-                group.children.push({
-                  ...imageTemp2,
-                  data: {
-                    ...imageTemp2.data,
-                    text: res.data.imageName,
-                    image: data.data,
-                    imageId: res.data.id,
-                    unit: this.uploadPic.unit
-                  }
-                })
-              } else {
-                this.tools.push({
-                  group: this.uploadPic.unit,
-                  children: [{
-                    ...imageTemp2,
-                    data: {
-                      ...imageTemp2.data,
-                      text: res.data.imageName,
-                      image: data.data,
-                      imageId: res.data.id,
-                      unit: this.uploadPic.unit
-                    }
-                  }]
-                })
-              }
-            })
-          })
-        } else {
-          this.$message.error(res.msg)
-        }
-      })
-    },
-
-    delImg (item) {
-      this.$delete('monitor/project/topo/icon?ids=' + item.data.imageId).then(res => {
-        if (res.code == 200) {
-          this.$message({ duration: 2000, type: 'success', message: this.$t('tip.deleteSuccess') })
-          this.addNodeInit()
-        } else {
-          this.$message.error(res.msg)
-        }
-      })
-    },
-    delCollpseTitle (item) {
-      this.$delete('monitor/project/topo/iconUnit?unit=' + item.group).then(res => {
-        if (res.code == 200) {
-          this.$message({ duration: 2000, type: 'success', message: this.$t('tip.deleteSuccess') })
-          this.addNodeInit()
-        } else {
-          this.$message.error(res.msg)
-        }
-      })
-    },
-    tooltipDelete (item) {
-      this.$confirm(this.$t('tip.confirmDelete'), {
-        confirmButtonText: this.$t('tip.yes'),
-        cancelButtonText: this.$t('tip.no'),
-        type: 'warning'
-      }).then(() => {
-        this.delImg(item)
-      })
-    },
-    tooltipDeleteTitle (item) {
-      this.$confirm(this.$t('tip.confirmDelete'), {
-        confirmButtonText: this.$t('tip.yes'),
-        cancelButtonText: this.$t('tip.no'),
-        type: 'warning'
-      }).then(() => {
-        this.delCollpseTitle(item)
-      })
-    },
-    addNodeInit (imgidList) {
-      if (!this.fromOverView) {
-        this.$get('monitor/project/topo/icon').then(res => {
-          this.imgageLoading = true
-          this.tools = [...Tools, {
-            group: 'Diagram',
-            children: [
-              {
-                name: 'rectangleImg2',
-                icon: 'icon-rect',
-                data: {
-                  text: 'rect',
-                  width: 30,
-                  height: 20,
-                  type: 0,
-                  paddingLeft: 10,
-                  paddingRight: 10,
-                  paddingTop: 10,
-                  paddingBottom: 10,
-                  name: 'rectangleImg2',
-                  icon: '\ue730',
-                  iconFamily: 'nz-icon',
-                  iconName: 'nz-icon-rectangle1',
-                  iconColor: '#0c62e3'
-                }
-              },
-              {
-                name: 'rectangleImg2',
-                icon: 'icon-rect',
-                data: {
-                  text: 'rect',
-                  width: 30,
-                  height: 30,
-                  type: 0,
-                  paddingLeft: 10,
-                  paddingRight: 10,
-                  paddingTop: 10,
-                  paddingBottom: 10,
-                  name: 'rectangleImg2',
-                  icon: '\ue731',
-                  iconFamily: 'nz-icon',
-                  iconName: 'nz-icon-EMAC1',
-                  iconColor: '#0c62e3'
-                }
-              },
-              {
-                name: 'rectangleImg2',
-                icon: 'icon-rect',
-                data: {
-                  text: 'rect',
-                  width: 100,
-                  height: 100,
-                  type: 0,
-                  paddingLeft: 10,
-                  paddingRight: 10,
-                  paddingTop: 10,
-                  paddingBottom: 10,
-                  name: 'rectangleImg2',
-                  icon: '\ue62f',
-                  iconFamily: 'nz-icon',
-                  iconName: 'nz-icon-circle',
-                  iconColor: '#0c62e3'
-                }
-              }
-            ]
-          }]
-          const imgArr = []
-          const promiseArr = []
-          res.data.list.forEach((item, index) => {
-            item.imageName = item.name
-            delete item.name
-            promiseArr.push(topologyImg['img' + item.id] || dealImg(`monitor/project/topo/icon/${item.id}/1`, item.id))
-            imgArr.push({ ...item })
-          })
-          Promise.all(promiseArr).then((res2, header) => {
-            this.iconArray = [...res.data.list]
-            this.iconArray.forEach((item, index) => {
-              item.image = res2[index].data
-              const group = this.tools.find(tool => tool.group === item.unit)
-              if (group) {
-                group.children.push({
-                  ...imageTemp2,
-                  data: {
-                    ...imageTemp2.data,
-                    text: item.imageName,
-                    image: res2[index].data,
-                    imageId: item.id,
-                    unit: item.unit,
-                    rect: {
-                      width: res2[index].width === -1 ? 100 : res2[index].width,
-                      height: res2[index].height === -1 ? 100 : res2[index].height
-                    }
-                  }
-                })
-              } else {
-                this.tools.push({
-                  group: item.unit,
-                  children: [{
-                    ...imageTemp2,
-                    data: {
-                      ...imageTemp2.data,
-                      text: item.imageName,
-                      image: res2[index].data,
-                      imageId: item.id,
-                      unit: item.unit,
-                      rect: {
-                        width: res2[index].width === -1 ? 100 : res2[index].width,
-                        height: res2[index].height === -1 ? 100 : res2[index].height
-                      }
-                    }
-                  }]
-                })
-              }
-            })
-
-            this.imgInit = true
-            this.imgageLoading = false
-          })
-        })
-      } else {
-        this.imgageLoading = true
-        this.$get('monitor/project/topo/icon').then((imageAllId) => {
-          const promiseArr = []
-          if (!imageAllId || !imageAllId.data) {
-            return
-          }
-          imgidList.forEach((item, index) => {
-            if (item.data.imageId && imageAllId.data.list.find(image => item.data.imageId === image.id)) {
-              promiseArr.push(topologyImg['img' + item.data.imageId] || dealImg(`monitor/project/topo/icon/${item.data.imageId}/1`, item.data.imageId))
-            } else if (item.data.imageId) {
-              promiseArr.push(imgDefault)
-            } else {
-              promiseArr.push('')
-            }
-          })
-          Promise.all(promiseArr).then((res2) => {
-            this.iconArray = imgidList.map(item => {
-              return {
-                id: item.data.imageId
-              }
-            })
-            this.iconArray.forEach((item, index) => {
-              if (item.id) {
-                item.image = res2[index].data
-              }
-            })
-            this.imgInit = true
-            this.imgageLoading = false
-          })
-        })
-      }
-    },
-
-    delPen (obj) { // 删除元素
-      getTopology(this.topologyIndex).delete(obj)
-      this.props = {
-        node: null,
-        line: null,
-        multi: false,
-        nodes: null,
-        locked: false,
-        pen: null,
-        pens: null
-      }
-    },
-
-    editTopology (val) {
-      this.editTopologyFlag = true
-      setTimeout(() => {
-        getTopology(this.topologyIndex).lock(0)
-        getTopology(this.topologyIndex).data().pens.forEach((item, index) => { // 停止动画 以及赋值默认data
-          if (item.animatePlay) {
-            item.stopAnimate()
-          }
-          if (!item.data.expressArr.length) {
-            item.data.expressArr = ['']
-            item.data.legends = ['']
-          }
-          if (!item.data.expressAllArr.length) {
-            item.data.expressAllArr = ['']
-            item.data.legendsAll = ['']
-          }
-          item.animateType = item.data.animateType
-          if (item.type === 0) {
-            item.fillStyle = item.data.fillStyle
-            if (item.iconFamily) {
-              item.fillStyle = 'transparent'
-              item.iconColor = item.data.iconColor || item.data.fillStyle || '#bae7ff'
-            }
-            item.strokeStyle = item.data.strokeStyle
-            item.animatePlay = false
-            item.fontColor = item.data.fontColor || '#222222'
-            item.gradientType = item.data.gradientType ? item.data.gradientType : 0
-            if (!item.data.gradientColor) {
-              item.data.gradientType = 0
-              item.data.gradientColor = '#bae7ff'
-            }
-            if (item.data.gradientType === 0) {
-              item.bkType = 0
-            } else {
-              item.bkType = 1
-            }
-          } else if (item.type === 1) {
-            item.animateColor = item.data.animateColor
-            item.strokeStyle = item.data.strokeStyle
-            item.arrowColor = item.data.arrowColor
-            item.fromArrowColor = item.data.arrowColor
-            item.toArrowColor = item.data.arrowColor
-            item.animatePlay = false
-            item.fontColor = item.data.fontColor || '#22222'
-          }
-        })
-        getTopology(this.topologyIndex).caches = {
-          index: 0,
-          list: [JSON.parse(JSON.stringify(getTopology(this.topologyIndex).data()))]
-        }
-        getTopology(this.topologyIndex).resize()
-        getTopology(this.topologyIndex).centerView()
-      }, 100)
-    },
-
-    animateCanvas () {
-      getTopology(this.topologyIndex).render()
-      getTopology(this.topologyIndex).animate()
-    },
-
-    refreshTopology () {
-      // canvas.open()
-    },
-
-    dropdownClick () {
-
-    },
-
-    changeTopologyOpt (val, key) {
-      // this.topologyData.data[key]=this.colorRGBtoHex(val);
-      // getTopology(this.index).data[key]=val;
-      // getTopology(this.index).render();
-      getTopology(this.topologyIndex).store.data.lineName = val
-      getTopology(this.topologyIndex).setOptions({ drawingLineName: val })
-    },
-    notModuleIDArrChange (id) {
-      this.notModuleIDArr = this.notModuleIDArr.filter(item => item.id !== id)
-    },
-    // 保存
-    saveTopology () {
-      this.previewData = ''
-      this.isPreview = false
-      this.editTopologyFlag = true
-      this.showNoData = false
-      const topologyData = getTopology(this.topologyIndex).data()
-      topologyData.newData = 1
-      this.editTopologyFlag = false
-      topologyData.rule = false
-      topologyData.grid = false
-      topologyData.gridSize = 10
-      topologyData.pens.forEach(item => {
-        item.animatePlay = item.data.animatePlay
-        item.data.animateType = item.animateType
-        if (item.type === 0 && JSON.stringify(item.data.imageId)) {
-          item.image = ''
-          item.animateFrames = []
-          item.animateReady = null
-          delete item.img
-          delete item.lastImage
-        }
-        item.data.expressArr = item.data.expressArr.filter((expression, i) => {
-          if (!expression) {
-            item.data.legends.splice(i, 1)
-            return false
-          } else {
-            return true
-          }
-        })
-        item.data.expressAllArr = item.data.expressAllArr.filter((expression, i) => {
-          if (!expression) {
-            item.data.legendsAll.splice(i, 1)
-            return false
-          } else {
-            return true
-          }
-        })
-      })
-      if (this.penToolTipScale == getTopology(this.topologyIndex).data().scale) {
-        getTopology(this.topologyIndex).data().scale = this.oldScale
-      }
-      this.$emit('change', false, topologyData)
-    },
-    // 取消
-    cancelTopology () {
-      this.editTopologyFlag = false
-      this.$nextTick(() => {
-        this.$emit('change', false)
-      })
-      this.reload()
-    },
-    // 预览
-    previewTopology () {
-      const topologyData = getTopology(this.topologyIndex).data()
-      this.previewData = topologyData
-      this.isPreview = true
-      this.editTopologyFlag = false
-      topologyData.rule = false
-      topologyData.grid = false
-      topologyData.gridSize = 10
-      topologyData.pens.forEach(item => {
-        item.animatePlay = item.data.animatePlay
-        item.data.animateType = item.animateType
-        if (item.type === 0 && JSON.stringify(item.data.imageId)) {
-          item.animateFrames = []
-          item.animateReady = null
-          delete item.img
-          delete item.lastImage
-        }
-        item.data.expressArr = item.data.expressArr.filter((expression, i) => {
-          if (!expression) {
-            item.data.legends.splice(i, 1)
-            return false
-          } else {
-            return true
-          }
-        })
-        item.data.expressAllArr = item.data.expressAllArr.filter((expression, i) => {
-          if (!expression) {
-            item.data.legendsAll.splice(i, 1)
-            return false
-          } else {
-            return true
-          }
-        })
-      })
-      if (this.penToolTipScale == getTopology(this.topologyIndex).data().scale) {
-        getTopology(this.topologyIndex).data().scale = this.oldScale
-      }
-      this.$nextTick(() => {
-        this.previewData = topologyData
-        getTopology(this.topologyIndex).lock(1)
-        const dom = document.getElementById('topology-canvas' + this.topologyIndexF)
-        const domRect = dom ? dom.getBoundingClientRect() : {}
-        getTopology(this.topologyIndex).canvasPos = domRect
-        this.initPens(topologyData)
-        // this.reload()
-      })
-    },
-    previewExit () { // 继续编辑
-      this.isPreview = false
-      this.editTopology()
-    },
-    // 联动 project
-    changeProjectTitle () {
-      const data = getTopology(this.topologyIndex).data()
-      // this.topologyInfo = {
-      //   fontSize: data.data.fontSize,
-      //   align: data.data.align,
-      //   fontColor: data.data.fontColor,
-      //   opacity: data.data.opacity,
-      //   name: data.name
-      // }
-    },
-    /* tools 方法 */
-
-    winResize () {
-      if (this.timer) {
-        clearTimeout(this.timer)
-        this.timer = null
-      }
-      this.timer = setTimeout(() => {
-        const dom = document.getElementById('topology-canvas' + this.topologyIndex)
-        const domRect = dom ? dom.getBoundingClientRect() : {}
-        getTopology(this.topologyIndex).canvasPos = domRect
-        if (this.fromOverView) {
-          try {
-            const obj = JSON.parse(this.oldTopologyData)
-            if (obj && !obj.pens) {
-              obj.pens = []
-            }
-            getTopology(this.topologyIndex).open(obj)
-          } catch (err) {
-            console.log(err)
-          }
-        }
-        let flag = false
-        const position = {
-          x: this.$refs['topology-canvas' + this.topologyIndexF].offsetWidth,
-          y: this.$refs['topology-canvas' + this.topologyIndexF].offsetHeight
-        }
-        getTopology(this.topologyIndex) && getTopology(this.topologyIndex).data().pens.forEach(item => {
-          if (flag) {
-            return
-          }
-          if (item.x + item.width > position.x || item.y + item.height > position.y) {
-            // getTopology(this.topologyIndex).fitView(20)
-            flag = true
-          }
-        })
-        getTopology(this.topologyIndex).resize()
-        if (this.isPanel) {
-          getTopology(this.topologyIndex).fitView()
-        } else {
-          getTopology(this.topologyIndex).centerView()
-        }
-        clearTimeout(this.timer)
-        this.timer = null
-        // this.getNodesArr()
-      }, 100)
-    },
-    contextmenuNone () {
-      this.contextmenu = {
-        left: null,
-        top: null,
-        bottom: null
-      }
-    },
-    canvasMove (e) { // 画布上的移动 确定tooltip的位置
-      if (this.tooltipPosition.show) {
-        return
-      }
-      window.ePosition = e
-    },
-    tooltipOver () {
-      clearTimeout(this.timer3)
-      this.timer3 = null
-    },
-    tooltipOut () {
-      this.timer3 = setTimeout(() => {
-        this.tooltipPosition.show = false
-        this.timer3 = null
-      }, 50)
-    },
-    nodeDefaultWidth (nodeName) {
-      switch (nodeName) {
-        case 'myCube':
-        case 'rectangleImg2':
-          return 0
-        default:
-          return 1
-      }
-    },
-    previewBeforeClose (done) {
-      this.$emit('changeTopologyIndexF')
-      done()
-    },
-    selpopIs (pen, state) { // 判断是否有图表
-      let flag = true
-      if (state.id === 'other') {
-        flag = false
-      }
-      if (state.id === 'total' && pen.data.expressArr.length === 0) {
-        flag = false
-      }
-      return flag
-    },
-    modelPopError (pen, state) {
-      if (item.id === 'asset' && this.activeModelItem.assetError) {
-        return true
-      }
-      if (item.id === 'alert' && this.activeModelItem.alertError) {
-        return true
-      }
-      if (item.id === 'endpoint' && this.activeModelItem.endpointError) {
-        return true
-      }
-      return false
-    },
-    redoIndexChange (index) {
-      this.redoIndex = index
-    },
-    querySearch (queryString, cb) {
-      const restaurants = this.unitArr
-      const results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants
-      // 调用 callback 返回建议列表的数据
-      cb(results)
-    },
-    createFilter (queryString) {
-      return (restaurant) => {
-        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
-      }
-    },
-    uploadPicChange () {
-      this.unitArr = []
-      this.tools.forEach((item, index) => {
-        if (index > 0) {
-          this.unitArr.push({
-            value: item.group
-          })
-        }
-      })
-      this.uploadPic.name = ''
-      this.uploadPic.unit = ''
-      this.file = null
-      this.uploadPicShow = true
-    },
-    zoomMap (num) {
-      getTopology(this.topologyIndex).scale(getTopology(this.topologyIndex).data().scale + num)
-    },
-    penToBottom () {
-      getTopology(this.topologyIndex).bottom()
-    },
-    onContextMenu (event) {
-      event.preventDefault()
-      event.stopPropagation()
-
-      if (event.clientY + 360 < document.body.clientHeight) {
-        this.contextmenu = {
-          left: event.clientX + 'px',
-          top: event.clientY + 'px'
-        }
-      } else {
-        this.contextmenu = {
-          left: event.clientX + 'px',
-          bottom: document.body.clientHeight - event.clientY + 'px'
-        }
-      }
-    }
-  },
-  beforeDestroy () {
-    if (this.timer) {
-      clearInterval(this.timer)
-      this.timer = null
-    }
-    if (this.timer4) {
-      clearInterval(this.timer4)
-      this.timer4 = null
-    }
-    if (getTopology(this.topologyIndex)) {
-      getTopology(this.topologyIndex).off('translate', this.topTranslate) // 平移·
-      getTopology(this.topologyIndex).off('active', this.pensActive) // 选中·
-      getTopology(this.topologyIndex).off('scale', this.topoScale) // 缩放·
-      getTopology(this.topologyIndex).off('translatePens', () => {}) // 移动画笔结束·
-      getTopology(this.topologyIndex).off('translatingPens', () => {}) // 移动画笔进行中·
-      getTopology(this.topologyIndex).off('enter', this.penEnter) // 移入画笔·
-      getTopology(this.topologyIndex).off('leave', this.penLeave) // 移出画笔·
-      getTopology(this.topologyIndex).off('add', this.appPen) // 添加新画笔·
-      getTopology(this.topologyIndex).off('click', this.topoClick) // click画笔·
-      getTopology(this.topologyIndex).destroy()
-      const StoreData = le5leStore.get()
-      Object.keys(StoreData).forEach(key => {
-        const id = key.split('-')[0]
-        if (getTopology(this.topologyIndex).id == id) {
-          le5leStore.set(key, null)
-          delete StoreData[key]
-        }
-      })
-      Object.keys(getTopology(this.topologyIndex)).forEach(key => {
-        getTopology(this.topologyIndex)[key] = null
-      })
-      setTopology(this.topologyIndex, null)
-    }
-    if (document.getElementById('topology-canvas' + this.topologyIndexF)) {
-      document.getElementById('topology-canvas' + this.topologyIndexF).removeEventListener('mousemove', this.canvasMove)
-    }
-    window.removeEventListener('resize', this.winResize)
-    window.removeEventListener('click', this.contextmenuNone)
-  }
-}
-</script>
diff --git a/nezha-fronted/src/components/common/bottomBox/tabs/dashboardTab.vue b/nezha-fronted/src/components/common/bottomBox/tabs/dashboardTab.vue
index 333328157..63d14bfc2 100644
--- a/nezha-fronted/src/components/common/bottomBox/tabs/dashboardTab.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/dashboardTab.vue
@@ -621,7 +621,7 @@ export default {
       if (this.$refs.pickTime) {
         const nowTimeType = this.$refs.pickTime.$refs.timePicker.nowTimeType
         this.nowTimeType = this.$refs.pickTime.$refs.timePicker.nowTimeType
-        this.setSearchTime(nowTimeType.type, nowTimeType.value)
+        this.setSearchTime('searchTime', this.storeDispatchPanelTime)
         this.filter.dashboardId = this.showPanel.id
         this.getData(this.filter)
         this.$store.dispatch('dispatchPanelTime', {
@@ -635,27 +635,7 @@ export default {
       }
     },
     /* 时间条件查询--end */
-    setSearchTime (type, val) { // 设置searchTime
-      if (type === 'minute') {
-        const startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setMinutes(new Date(bus.computeTimezone(new Date().getTime())).getMinutes() - val))
-        const endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())))
-        this.$set(this.searchTime, 0, startTime)
-        this.$set(this.searchTime, 1, endTime)
-        this.$set(this.searchTime, 2, val + 'm')
-      } else if (type === 'hour') {
-        const startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setHours(new Date(bus.computeTimezone(new Date().getTime())).getHours() - val))
-        const endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())))
-        this.$set(this.searchTime, 0, startTime)
-        this.$set(this.searchTime, 1, endTime)
-        this.$set(this.searchTime, 2, val + 'h')
-      } else if (type === 'date') {
-        const startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setDate(new Date(bus.computeTimezone(new Date().getTime())).getDate() - val))
-        const endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())))
-        this.$set(this.searchTime, 0, startTime)
-        this.$set(this.searchTime, 1, endTime)
-        this.$set(this.searchTime, 2, val + 'd')
-      }
-      this.$refs.pickTime.$refs.timePicker.searchTime = this.searchTime
+    storeDispatchPanelTime () { // 设置searchTime
       this.$store.dispatch('dispatchPanelTime', {
         time: this.searchTime,
         nowTimeType: this.nowTimeType
@@ -908,7 +888,7 @@ export default {
         this.nowTimeType = this.$lodash.cloneDeep(nowTimeType)
         // 刷新时间范围
         this.$refs.pickTime.$refs.timePicker.setTimeRange(this.nowTimeType)
-        this.setSearchTime(nowTimeType.type, nowTimeType.value, nowTimeType)
+        this.setSearchTime('searchTime', this.storeDispatchPanelTime)
         this.$store.dispatch('dispatchPanelTime', {
           time: this.searchTime,
           nowTimeType: this.nowTimeType
@@ -927,7 +907,7 @@ export default {
         const nowTimeType = this.nowTimeType = this.timePickerRange.nowTimeType
         this.searchTime = this.timePickerRange.time
         this.$refs.pickTime && this.$refs.pickTime.$refs.timePicker.setTimeRange(this.nowTimeType, this.searchTime)
-        this.setSearchTime(nowTimeType.type, nowTimeType.value, nowTimeType)
+        this.setSearchTime('searchTime', this.storeDispatchPanelTime)
       })
     },
     // 设置默认刷新
diff --git a/nezha-fronted/src/components/common/bottomBox/tabs/logBottomTab.vue b/nezha-fronted/src/components/common/bottomBox/tabs/logBottomTab.vue
index 9cc2e7edb..1fd1c6118 100644
--- a/nezha-fronted/src/components/common/bottomBox/tabs/logBottomTab.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/logBottomTab.vue
@@ -129,7 +129,7 @@ export default {
     },
     getData () {
       const nowTimeType = this.$refs.pickTime.$refs.timePicker.nowTimeType
-      this.setSearchTime(nowTimeType.type, nowTimeType.value)
+      this.setSearchTime('filterTime')
       this.$store.dispatch('dispatchTimePickerRange', {
         time: this.searchTime,
         nowTimeType: this.nowTimeType
@@ -144,31 +144,9 @@ export default {
         const nowTimeType = this.nowTimeType = this.timePickerRange.nowTimeType
         this.filterTime = this.timePickerRange.time
         this.$refs.pickTime && this.$refs.pickTime.$refs.timePicker.setTimeRange(this.nowTimeType, this.filterTime)
-        this.setSearchTime(nowTimeType.type, nowTimeType.value, nowTimeType)
+        this.setSearchTime('filterTime')
       })
     },
-    setSearchTime (type, val) { // 设置searchTime
-      if (type === 'minute') {
-        const startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setMinutes(new Date(bus.computeTimezone(new Date().getTime())).getMinutes() - val))
-        const endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())))
-        this.$set(this.filterTime, 0, startTime)
-        this.$set(this.filterTime, 1, endTime)
-        this.$set(this.filterTime, 2, val + 'm')
-      } else if (type === 'hour') {
-        const startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setHours(new Date(bus.computeTimezone(new Date().getTime())).getHours() - val))
-        const endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())))
-        this.$set(this.filterTime, 0, startTime)
-        this.$set(this.filterTime, 1, endTime)
-        this.$set(this.filterTime, 2, val + 'h')
-      } else if (type === 'date') {
-        const startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setDate(new Date(bus.computeTimezone(new Date().getTime())).getDate() - val))
-        const endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())))
-        this.$set(this.filterTime, 0, startTime)
-        this.$set(this.filterTime, 1, endTime)
-        this.$set(this.filterTime, 2, val + 'd')
-      }
-      this.$refs.pickTime.$refs.timePicker.searchTime = this.filterTime
-    },
     queryLogData (limit) { // log的chart和table是一个请求
       this.loading = true
       if (limit) {
diff --git a/nezha-fronted/src/components/common/mixin/mainMixinFun.js b/nezha-fronted/src/components/common/mixin/mainMixinFun.js
index de60172f4..afb3ad632 100644
--- a/nezha-fronted/src/components/common/mixin/mainMixinFun.js
+++ b/nezha-fronted/src/components/common/mixin/mainMixinFun.js
@@ -160,7 +160,22 @@ export default {
         this.nowTimeType = this.$refs.pickTime.$refs.timePicker.nowTimeType
         const type = nowTimeType.type
         const val = nowTimeType.value
-        if (type === 'minute') {
+        if (type === 'relative') {
+          const now = new Date(bus.computeTimezone(new Date().getTime()))
+          let start = bus.timeFormate(now, 'YYYY-MM-DD')
+          let end = bus.timeFormate(now, 'YYYY-MM-DD HH:mm:ss')
+          let unit = ''
+          if (nowTimeType.id === 13) { // today
+            unit = 't'
+            start += '00:00:00'
+            end += ''
+            start = this.momentTz(this.momentStrToTimestamp(start, 'YYYY-MM-DD HH:mm:ss'))
+            end = this.momentTz(this.momentStrToTimestamp(end, 'YYYY-MM-DD HH:mm:ss'))
+          }
+          this.$set(this[key], 0, start)
+          this.$set(this[key], 1, end)
+          this.$set(this[key], 2, val + unit)
+        } else if (type === 'minute') {
           const startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setMinutes(new Date(bus.computeTimezone(new Date().getTime())).getMinutes() - val))
           const endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())))
           this.$set(this[key], 0, startTime)
@@ -179,6 +194,7 @@ export default {
           this.$set(this[key], 1, endTime)
           this.$set(this[key], 2, val + 'd')
         }
+        console.log(this[key], 'mainMixin')
         this.$refs.pickTime.$refs.timePicker.searchTime = this[key]
       }
       if (cb) {
diff --git a/nezha-fronted/src/components/common/project/L5/CanvasContextMenu.vue b/nezha-fronted/src/components/common/project/L5/CanvasContextMenu.vue
deleted file mode 100644
index de174644d..000000000
--- a/nezha-fronted/src/components/common/project/L5/CanvasContextMenu.vue
+++ /dev/null
@@ -1,125 +0,0 @@
-<template>
-  <div class="menus">
-    <div>
-      <a :class="{disabled:!props.pen && !props.pens}" @click="onTop()">{{$t('project.topology.top')}}</a>
-    </div>
-    <div>
-      <a :class="{disabled:!props.pen && !props.pens}" @click="onBottom()">{{$t('project.topology.bottom')}}</a>
-    </div>
-    <div class="line"></div>
-    <div>
-      <a :class="{disabled:!props.pen && !props.pens && !props.line}" @click="onDel()">{{$t('overall.delete')}}</a>
-    </div>
-    <div class="line"></div>
-    <div>
-      <a @click="canvascut()" class="flex">
-        <span class="full">{{$t('project.topology.cut')}}</span>
-        <span class="ml50">Ctrl + X</span>
-      </a>
-    </div>
-    <div>
-      <a @click="canvascopy()" class="flex">
-        <span class="full">{{$t('overall.duplicate')}}</span>
-        <span class="ml50">Ctrl + C</span>
-      </a>
-    </div>
-    <div>
-      <a @click="canvaspaste()" class="flex">
-        <span class="full">{{$t('project.topology.paste')}}</span>
-        <span class="ml50">Ctrl + V</span>
-      </a>
-    </div>
-  </div>
-</template>
-
-<script >
-import { getTopology } from '../../js/common'
-export default {
-  data () {
-    return {}
-  },
-  props: {
-    index: {
-      require: true
-    },
-    props: {
-      type: Object,
-      require: true
-    }
-  },
-  methods: {
-    onTop () {
-      if (this.props.pens) {
-        for (const item of this.props.pens) {
-          getTopology(this.index).top(item)
-        }
-      } else if (this.props.pen) {
-        getTopology(this.index).top(this.props.pen)
-      }
-
-      getTopology(this.index).render()
-    },
-
-    onBottom () {
-      if (this.props.pens) {
-        for (const item of this.props.pens) {
-          getTopology(this.index).bottom(item)
-        }
-      } else if (this.props.pen) {
-        getTopology(this.index).bottom(this.props.pen)
-      }
-
-      getTopology(this.index).render()
-    },
-
-    onCombine (stand) {
-      if (!this.props.pens) {
-        return
-      }
-      getTopology(this.index).combine(this.props.pens, stand)
-      getTopology(this.index).render()
-    },
-
-    onUncombine () {
-      if (!this.props.pen) {
-        return
-      }
-      getTopology(this.index).uncombine(this.props.pen)
-      getTopology(this.index).render()
-    },
-
-    onLock () {
-      // eslint-disable-next-line vue/no-mutating-props
-      this.props.locked = !this.props.locked
-      if (this.props.pen) {
-        // eslint-disable-next-line vue/no-mutating-props
-        this.props.pen.locked = this.props.locked
-      }
-      if (this.props.pens) {
-        for (const item of this.props.pens) {
-          item.locked = this.props.locked
-        }
-      }
-      if (this.props.lines) {
-        for (const item of this.props.lines) {
-          item.locked = this.props.locked
-        }
-      }
-      getTopology(this.index).render(true)
-    },
-
-    onDel () {
-      getTopology(this.index).delete(this.props.pens || [this.props.pen])
-    },
-    canvascut () {
-      getTopology(this.index).cut(this.props.pens || [this.props.pen])
-    },
-    canvascopy () {
-      getTopology(this.index).copy(this.props.pens || [this.props.pen])
-    },
-    canvaspaste () {
-      getTopology(this.index).paste()
-    }
-  }
-}
-</script>
diff --git a/nezha-fronted/src/components/common/project/L5/CanvasProps.vue b/nezha-fronted/src/components/common/project/L5/CanvasProps.vue
deleted file mode 100644
index 9d3609ba1..000000000
--- a/nezha-fronted/src/components/common/project/L5/CanvasProps.vue
+++ /dev/null
@@ -1,1883 +0,0 @@
-<template>
-  <div class="props-box" :loading="loading">
-    <!--所有属性-->
-    <el-tabs v-model="tab" type="card" v-if="selection.pen" @tab-click="tabClick">
-      <el-tab-pane :label="$t('project.topology.data')" name="1">
-        <el-form v-model="selection.pen.data" class="pens-data" label-position="top">
-          <!--module-->
-          <el-form-item v-if="!selection.pen.type&&!fromDiagram" class="sub-box half-form-item" :label="$t('overall.module')"
-                        prop="moduleId">
-            <el-select v-model="selection.pen.data.moduleId" :placeholder="$t('el.select.placeholder')"
-                       :popper-append-to-body="true" popper-class="asset-dropdown right-box-select-top" size="small"
-                       @change="moduleIdChange">
-              <el-option
-                v-for="item in modules"
-                :key="item.id"
-                :label="item.name"
-                :value="item.id">
-              </el-option>
-            </el-select>
-          </el-form-item>
-
-          <!--value mapping-->
-          <el-row class="form-row-title">
-            {{ $t('dashboard.dashboard.chartForm.thresholds') }}
-            <span v-if="selection.pen.data.valueMappingSort !=='desc'" class="title__label"
-            >（0:Ok > … >{{
-                selection.pen.data.valueMapping.length
-              }}:Critical）</span>
-            <span v-if="selection.pen.data.valueMappingSort ==='desc'" class="title__label"
-            >（{{
-                selection.pen.data.valueMapping.length
-              }}:Critical > … >0:Ok）</span>
-            <el-form-item class="float-right" prop="type" style="height: 100%;">
-              <el-switch
-                v-model="selection.pen.data.valueMappingShow"
-                :active-value="true"
-                :inactive-value="false"
-              />
-            </el-form-item>
-          </el-row>
-          <!--metric-->
-          <transition name="el-zoom-in-top">
-            <div v-show="selection.pen.data.valueMappingShow">
-              <el-row v-for="(item,index) in selection.pen.data.expressArr" :key="index" class="element-item form-row-item"
-                      style="">
-                <promql-input
-                  v-if="selection.pen"
-                  :from-father-data="true"
-                  :isTopo="true"
-                  :metricOptionsParent="metricOptions"
-                  :id="index"
-                  :key="index"
-                  :ref="'promql-'+'-1'"
-                  :expression-list="selection.pen.data.expressArr"
-                  :index="index"
-                  type="metric"
-                  :plugins="['metric-selector', 'metric-input', 'remove']"
-                  :showRemove="false"
-                  :styleType="2"
-                  @change="expressionChange"
-                ></promql-input>
-                <el-row style="margin-top: 10px">
-                  <template>
-                    <!--chart aggregation-->
-                    <el-col class="legend-title">
-                      {{ $t('dashboard.dashboard.chartForm.aggregation') }}&nbsp;
-                    </el-col>
-                    <el-col style="width: calc(100% - 120px)">
-                      <el-select v-model="selection.pen.data.aggregation" :placeholder="$t('el.select.placeholder')"
-                                 :popper-append-to-body="true" class="right-box-row-with-btn right-box-select-top right-public-box-dropdown-top"
-                                 popper-class="chart-box-dropdown-small"
-                                 size="mini"
-                                 style="width: 100%" value-key="chartType">
-                        <el-option v-for="item in aggregationList" :key="item.id" :label="item.name" :value="item.name">
-                          <span class="panel-dropdown-label-txt">{{ item.name }}</span>
-                        </el-option>
-                      </el-select>
-                    </el-col>
-                  </template>
-                </el-row>
-              </el-row>
-              <div style="width: 100%;margin: 10px 0; box-sizing: border-box; padding: 0 10px;">
-                <div class="thresholds-box">
-                  <el-row class="thresholds-title">
-                    <el-col :span="5" class="thresholds-cell">{{ $t('alert.severity') }}
-                      <span @click="changeValueMappingSort">
-                    <i
-                      :class="['nz-icon','nz-icon-arrow-up1',selection.pen.data.valueMappingSort==='desc'?'is-arrow-active':'']"></i>
-                    <i
-                      :class="['nz-icon','nz-icon-arrow-down2',selection.pen.data.valueMappingSort==='desc'?'':'is-arrow-active']"></i>
-                  </span>
-                    </el-col>
-                    <el-col :span="4" class="thresholds-cell">{{ $t('project.topology.color') }}</el-col>
-                    <el-col :span="6" class="thresholds-cell">{{ $t('overall.value') }}</el-col>
-                    <el-col :span="7" class="thresholds-cell">{{ $t('project.topology.animation') }}</el-col>
-                    <el-col :span="2" class="thresholds-cell"></el-col>
-                  </el-row>
-
-                  <el-row v-for="(item,index) in selection.pen.data.valueMapping" :key="index">
-                    <el-col :span="5" class="thresholds-cell">
-                      <span v-if="selection.pen.data.valueMappingSort==='desc'">
-                         {{ index === 0 ? selection.pen.data.valueMapping.length - 1 : (item.level - 1) }}
-                      </span>
-                      <span v-else>
-                        {{ item.level }}
-                      </span>
-                    </el-col>
-                    <el-col :span="4" class="thresholds-cell">
-                      <span v-if="item.level!==0">
-                        <div style="display: inline-block">
-                          <nezhaColor :isTopo="true"
-                                      :color-val="item.color"
-                                      :presetColors="predefineColors" :single="false"
-                                      :value-arr="[{name:'fill',value:item.color.fill,key:'bac'},{name:'line',value:item.color.line,key:'line'},{name:'text',value:item.color.text,key:'text'}]" @colorChange="(val,key)=>{colorChangeTable(item,val,key)}"/>
-                        </div>
-                      </span>
-                      <span v-else>base</span>
-                    </el-col>
-                    <el-col :span="6" class="thresholds-cell" style="display: flex">
-                      <el-input
-                        v-if="item.level!==0"
-                        v-model.number="item.value"
-                        size="small"
-                        @change="valueMappingValueChange(item)"
-                      >
-                        <template slot="prepend"> ></template>
-                      </el-input>
-                      <span v-else>base</span>
-                    </el-col>
-                    <el-col :span="7" class="thresholds-cell">
-                      <!--线-->
-                      <el-select v-if="selection.pen&&selection.pen.type&&item.level!==0"
-                                 v-model="item.animateType"
-                                 :popper-append-to-body="true"
-                                 popper-class="right-box-select-top right-public-box-dropdown-top"
-                                 size="small">
-                        <el-option
-                          v-for="(item,index) in lineAnimateOptions"
-                          :key="index"
-                          :label="item.name"
-                          :value="item.id">
-                        </el-option>
-                      </el-select>
-                      <!--点-->
-                      <el-select v-if="selection.pen&&!selection.pen.type&&item.level!==0"
-                                 v-model="item.animateType"
-                                 :popper-append-to-body="true"
-                                 popper-class="right-box-select-top right-public-box-dropdown-top"
-                                 size="small">
-                        <el-option
-                          v-for="(item,index) in nodeAnimateOptions"
-                          :key="index"
-                          :label="item.name"
-                          :value="item.id">
-                        </el-option>
-                      </el-select>
-                      <!--默认-->
-                      <span v-if="item.level===0">base</span>
-                    </el-col>
-                    <el-col :span="2" class="thresholds-cell" style="text-align: center">
-                      <i v-if="item.level!==0" class="nz-icon nz-icon-minus"
-                         @click="valueMappingDel(index, item)" :title="$t('overall.delete')">
-                      </i>
-                    </el-col>
-                  </el-row>
-                </div>
-              </div>
-              <div class="value-mapping-add" style="text-align: center;margin: 0 10px;" @click="valueMappingAdd()" :title="$t('tip.add')">
-                <i class="nz-icon nz-icon-plus"></i>
-              </div>
-            </div>
-          </transition>
-          <!--tooltip-->
-          <el-row class="form-row-title" :style="{'margin-top': '10px'}">
-            {{ $t('dashboard.dashboard.chartForm.tooltip') }}
-            <el-form-item class="float-right" prop="type" style="height: 100%;">
-              <el-switch
-                v-model="selection.pen.data.tooltipShow"
-                :active-value="true"
-                :inactive-value="false"
-                active-color="#ee9d3f"
-              />
-            </el-form-item>
-          </el-row>
-          <transition name="el-zoom-in-top">
-            <div v-show="selection.pen.data.tooltipShow" class="sub-box">
-              <!--title-->
-              <el-form-item :label="$t('project.topology.title')" class="full-form-item" prop="type">
-                <el-input v-model="selection.pen.data.chartTitle" class="input" size="small"></el-input>
-              </el-form-item>
-              <!--remark-->
-              <el-form-item :label="$t('overall.remark')" class="full-form-item" prop="remark">
-                <el-input v-model="selection.pen.data.remark" maxlength="256"
-                          show-word-limit type="textarea" size="small" :rows="2"/>
-              </el-form-item>
-              <!--chart unit-->
-              <el-form-item v-show="selection.pen.data.type !='text'" :label="$t('dashboard.dashboard.chartForm.unit')" class="half-form-item"
-                            prop="unit">
-                <el-cascader v-model="selection.pen.data.unit"
-                             :options="unitOptions"
-                             :placeholder="$t('el.select.placeholder')"
-                             :props="{ expandTrigger: 'hover',emitPath:false }"
-                             :show-all-levels="false"
-                             filterable
-                             popper-class="dc-dropdown right-box-select-top right-public-box-dropdown-top"
-                             size="mini"
-                >
-                </el-cascader>
-              </el-form-item>
-              <el-form-item :label="$t('overall.type')" class="half-form-item half-form-item--end"
-                            prop="type">
-                <el-select v-model="selection.pen.data.type" :placeholder="$t('el.select.placeholder')"
-                           :popper-append-to-body="true" class="right-box-row-with-btn"
-                           popper-class="chart-box-dropdown-small right-box-select-top"
-                           size="mini" value-key="chartType">
-                  <el-option v-for="item in chartTypeList" :key="item.id" :label="item.name" :value="item.id">
-                    <span class="panel-dropdown-label-txt">{{ item.name }}</span>
-                  </el-option>
-                </el-select>
-              </el-form-item>
-              <!--value mapping-->
-              <el-row v-for="(item,index) in selection.pen.data.expressAllArr" :key="index"
-                      class="element-item form-row-item form-row-item-border"
-                      style="width: 100%; border-radius: 2px; padding-right: 60px;">
-                <promql-input
-                  v-if="selection.pen"
-                  :from-father-data="true"
-                  :isTopo="true"
-                  :metricOptionsParent="metricOptions"
-                  :id="index"
-                  :pqid="'vm'"
-                  :key="index"
-                  :ref="'promql-'+index"
-                  :expression-list="selection.pen.data.expressAllArr"
-                  :index="index"
-                  :plugins="['metric-selector', 'metric-input', 'remove']"
-                  :showRemove="false"
-                  :styleType="2"
-                  @change="expressionChange"
-                  @removeExpression="removeExpression"
-                ></promql-input>
-                <el-row style="margin-top: 10px">
-                  <template>
-                    <el-col class="legend-title">
-                      {{ $t('dashboard.dashboard.chartForm.legend') }}&nbsp;
-                      <el-popover placement="top" trigger="hover" width="211" popper-class="prevent-clickoutside">
-                        <div :style="{'word-break':language!=='zh'?'keep-all':'break-all'}">{{ $t('dashboard.dashboard.chartForm.legendTip') }}</div>
-                        <i slot="reference" class="nz-icon nz-icon-info-normal" style="font-size: 14px; -webkit-transform:scale(0.75);display:inline-block;"
-                           @mouseover="rz"></i>
-                      </el-popover>
-                    </el-col>
-                    <el-col style="width: calc(100% - 120px);">
-                      <el-input v-model="selection.pen.data.legendsAll[index]" size="small" type="text"></el-input>
-                    </el-col>
-                  </template>
-                </el-row>
-                <div class="nz-icon-minus-position" style="box-sizing: border-box; padding: 10px;">
-                  <span class="nz-icon-minus-medium" :title="$t('overall.delete')">
-                    <i class="nz-icon nz-icon-minus" @click="removeExpression(index)"></i>
-                  </span>
-                  <span class="nz-icon-copy" :title="$t('overall.duplicate')" style="padding: 2px 6px">
-                    <i class="nz-icon nz-icon-override" @click="copyExpression(index)"></i>
-                  </span>
-                </div>
-              </el-row>
-              <div class="value-mapping-add" style="text-align: center" @click="addExpression()" :title="$t('tip.add')">
-                <i class="nz-icon nz-icon-plus"></i>
-              </div>
-            </div>
-          </transition>
-        </el-form>
-      </el-tab-pane>
-      <el-tab-pane :label="$t('project.topology.style')" name="4">
-        <el-collapse v-model="activeNames">
-          <!--&lt;!&ndash;位置大小&ndash;&gt;-->
-          <!--<el-collapse-item :label="$t('project.topology.positionAndSize')" name="3" v-if="selection.pen&&!selection.pen.type">-->
-          <!--<div class="flex flex-warp">-->
-
-          <!--</div>-->
-          <!--</el-collapse-item>-->
-          <!--样式-->
-          <el-collapse-item :title="$t('project.topology.style')" name="4" v-if="selection.pen">
-            <div class="flex flex-warp">
-
-              <div class="props-pen-item" v-if="selection.pen&&!selection.pen.type">
-                <div>X</div>
-                <div class="p10 pl0">
-                  <el-input-number
-                    @focus="inputFocus"
-                    @blur="inputBlur"
-                    :precision="2"
-                    controls-position="right"
-                    size="small"
-                    name="x"
-                    class="input"
-                    v-model.number="selection.pen.x"
-                    :readonly="readonly"
-                    required
-                    @change="onChange()"
-                  >
-                    <template slot="append">px</template>
-                  </el-input-number>
-                </div>
-              </div>
-
-              <div class="props-pen-item" v-if="selection.pen&&!selection.pen.type">
-                <div>Y</div>
-                <div class="p10 pl0">
-                  <el-input-number
-                    @focus="inputFocus"
-                    @blur="inputBlur"
-                    :precision="2"
-                    controls-position="right"
-                    size="small"
-                    name="x"
-                    class="input"
-                    v-model.number="selection.pen.y"
-                    :readonly="readonly"
-                    required
-                    @change="onChange()">
-                    <template slot="append">px</template>
-                  </el-input-number>
-                </div>
-              </div>
-
-              <div class="props-pen-item" v-if="selection.pen&&!selection.pen.type">
-                <div>{{ $t('dashboard.dashboard.chartForm.width') }}</div>
-                <div class="p10 pl0">
-                  <el-input-number
-                    @focus="inputFocus"
-                    @blur="inputBlur"
-                    :precision="2"
-                    controls-position="right"
-                    size="small"
-                    name="x"
-                    class="input"
-                    v-model.number="selection.pen.width"
-                    :readonly="readonly"
-                    required
-                    @change="onChange()"
-                    :min="0">
-                    <template slot="append">px</template>
-                  </el-input-number>
-                </div>
-              </div>
-
-              <div class="props-pen-item" v-if="selection.pen&&!selection.pen.type">
-                <div>{{ $t('dashboard.dashboard.chartForm.high') }}</div>
-                <div class="p10 pl0">
-                  <el-input-number
-                    @focus="inputFocus"
-                    @blur="inputBlur"
-                    :precision="2"
-                    controls-position="right"
-                    size="small"
-                    name="x"
-                    class="input"
-                    v-model.number="selection.pen.height"
-                    :readonly="readonly"
-                    required
-                    @change="onChange()"
-                    :min="0">
-                    <template slot="append">px</template>
-                  </el-input-number>
-                </div>
-              </div>
-
-              <div class="props-pen-item" v-if="selection.pen&&!selection.pen.type">
-                <div>{{ $t('project.topology.circularBead') }}（0 - 1）</div>
-                <div class="p10 pl0">
-                  <el-input-number
-                    @focus="inputFocus"
-                    @blur="inputBlur"
-                    :precision="2"
-                    controls-position="right"
-                    size="small"
-                    :min="0"
-                    :max="1"
-                    :step="0.1"
-                    name="x"
-                    class="input"
-                    v-model.number="selection.pen.borderRadius"
-                    :readonly="readonly"
-                    required
-                    @change="onChange()"></el-input-number>
-                </div>
-              </div>
-
-              <div class="props-pen-item" v-if="selection.pen&&!selection.pen.type">
-                <div>{{ $t('project.topology.rotate') }}（°）</div>
-                <div class="p10 pl0">
-                  <el-input-number
-                    @focus="inputFocus"
-                    @blur="inputBlur"
-                    :precision="2"
-                    controls-position="right"
-                    size="small" name="x"
-                    class="input"
-                    v-model.number="selection.pen.rotate"
-                    :readonly="readonly"
-                    required
-                    @change="onChange()"></el-input-number>
-                </div>
-              </div>
-
-              <div class="props-pen-item" v-if="selection.pen&&!selection.pen.type&&!selection.pen.iconFamily">
-                <div>{{ $t('project.topology.bac') }}</div>
-                <div class="p10 pl0">
-                  <nezhaColor :isTopo="true" :value-arr="[{name:'background',value:selection.pen.background}]"
-                              @colorChange="colorChange"/>
-                </div>
-              </div>
-
-              <div class="props-pen-item" v-if="selection.pen&&!selection.pen.type&&selection.pen.iconFamily">
-                <div>{{ $t('project.topology.iconColor') }}</div>
-                <div class="p10 pl0">
-                  <nezhaColor :isTopo="true" :value-arr="[{name:'iconColor',value:selection.pen.iconColor}]"
-                              @colorChange="colorChange"/>
-                </div>
-              </div>
-
-              <div class="props-pen-item" v-if="selection.pen&&!selection.pen.type">
-                <div>{{ $t('project.topology.gradient') }}</div>
-                <div class="p10 pl0 gradient-to">
-                  <el-select :popper-append-to-body="true" v-model="selection.pen.gradientType" size="small"
-                             :placeholder="''"
-                             class="color-before-select" popper-class="color-before-select right-box-select-top right-public-box-dropdown-top" @change="bkTypeChange">
-                    <div slot="prefix">
-                      <i
-                        :class="['nz-icon',bkTypeOption.find(item1=>item1.id==selection.pen.data.gradientType).label,bkTypeOption.find(item1=>item1.id==selection.pen.data.gradientType).fontSize]"></i>
-                    </div>
-
-                    <el-option v-for="(item,index) in bkTypeOption" :value="item.id" :label="''" :key="index">
-                      <i :class="['nz-icon',item.label,item.fontSize]"></i>
-                    </el-option>
-                    <!--el-input__inner-->
-                  </el-select>
-                  <div class="gradient-to-color">
-                    <nezhaColor :isTopo="true" :value-arr="[{name:'gradientColor',value:selection.pen.data.gradientColor}]"
-                                @colorChange="colorChange"/>
-                  </div>
-                </div>
-              </div>
-
-              <div class="props-pen-item" v-if="selection.pen">
-                <div>{{ $t('project.topology.transparency') }}（0 - 1）</div>
-                <div class="p10 pl0">
-                  <el-input-number
-                    @focus="inputFocus"
-                    @blur="inputBlur"
-                    :precision="2"
-                    name="globalAlpha"
-                    class="input full"
-                    v-model.Number="selection.pen.globalAlpha"
-                    controls-position="right"
-                    size="small"
-                    :readonly="readonly"
-                    @change="onChange()"
-                    :step="0.1"
-                    :min="0.01"
-                    :max="1"></el-input-number>
-                </div>
-              </div>
-
-              <div class="props-pen-item special-select">
-                <div>{{ $t('project.topology.lineDash') }}</div>
-                <div class="p10 pl0">
-                  <el-select :popper-append-to-body="true" v-model="selection.pen.dash" size="small" popper-class="right-box-select-top right-public-box-dropdown-top"
-                             @change="(val)=>{onChange('lineDash', val)}">
-                    <div slot="prefix">
-                      <div class="icon-item">
-                        <svg>
-                          <g fill="none" :stroke="theme === 'light' ? 'black' : '#BEBEBE'" stroke-width="1">
-                            <path
-                              :d="penDash.find((item,i)=>i==(selection.pen.dash?selection.pen.dash:0)).d"
-                              :stroke-dasharray="penDash.find((item,i)=>i==(selection.pen.dash?selection.pen.dash:0))['stroke-dasharray']">
-                            </path>
-                          </g>
-                        </svg>
-                      </div>
-                    </div>
-                    <el-option v-for="(item,index) in penDash" :value="index" :key="index">
-                      <div class="icon-item">
-                        <svg>
-                          <g fill="none" :stroke="(selection.pen.dash==index)?'#ee9d3f':item.strokeColor" stroke-width="1">
-                            <path :d="item.d" :stroke-dasharray="item['stroke-dasharray']"></path>
-                          </g>
-                        </svg>
-                      </div>
-                    </el-option>
-                  </el-select>
-                </div>
-              </div>
-
-              <div class="props-pen-item special-select" v-if="selection.pen&&selection.pen.type">
-                <div>{{ $t('project.topology.lineType') }}</div>
-                <div class="p10 pl0">
-                  <el-select :popper-append-to-body="true" v-model="selection.pen.lineName" size="small" popper-class="right-box-select-top right-public-box-dropdown-top"
-                             @change="onClickName">
-                    <div slot="prefix">
-                      <div class="icon-item">
-                        <svg>
-                          <g fill="none" :stroke="theme === 'light' ? 'black' : '#BEBEBE'" stroke-width="1">
-                            <path
-                              :d="penLineType.find((item,i)=>item.name==selection.pen.lineName).d"
-                            >
-                            </path>
-                          </g>
-                        </svg>
-                      </div>
-                    </div>
-                    <el-option v-for="(item,index) in penLineType" :value="item.name" :key="index">
-                      <div class="icon-item">
-                        <svg>
-                          <g fill="none" :stroke="(selection.pen.lineName==item.name)?'#ee9d3f':item.strokeColor" stroke-width="1">
-                            <path :d="item.d" :stroke-dasharray="item['stroke-dasharray']"></path>
-                          </g>
-                        </svg>
-                      </div>
-                    </el-option>
-                  </el-select>
-                </div>
-              </div>
-
-              <div class="props-pen-item special-select" v-if="selection.pen&&selection.pen.type">
-                <div>{{ $t('project.topology.fromArrow') }}</div>
-                <div class="p10 pl0">
-                  <el-select :popper-append-to-body="true" v-model="selection.pen.fromArrow" size="small" popper-class="right-box-select-top right-public-box-dropdown-top"
-                             @change="onClickFromArrow">
-                    <div slot="prefix">
-                      <div class="icon-item">
-                        <svg>
-                          <g fill="none" :stroke="theme === 'light' ? 'black' : '#BEBEBE'" stroke-width="1" v-for="(item,index) in penLineFromTOArrow"
-                             :key="index" v-if="selection.pen.fromArrow==item.name">
-                            <path :d="item.d"></path>
-                            <polygon v-if="item.points" :points="item.points" :fill="item.fill" :stroke="item.stroke"
-                                     :strokeWidth="item['stroke-width']"></polygon>
-                            <circle v-if="item.cx" :cx="item.cx" :cy="item.cy" :r="item.r" :fill="item.fill"
-                                    :stroke="item.stroke" :strokeWidth="item['stroke-width']"></circle>
-                          </g>
-                        </svg>
-                      </div>
-                    </div>
-                    <el-option v-for="(item,index) in penLineFromTOArrow" :value="item.name" :key="index">
-                      <div class="icon-item">
-                        <svg>
-                          <g fill="none" :stroke="(selection.pen.fromArrow==item.name)?'#ee9d3f':item.strokeColor"
-                             stroke-width="1">
-                            <path :d="item.d"></path>
-                            <polygon
-                              v-if="item.points"
-                              :points="item.points"
-                              :fill="(selection.pen.fromArrow==item.name)?(item.fill=='#ffffff'?item.fill:'#ee9d3f'):item.fill"
-                              :stroke="(selection.pen.fromArrow==item.name)?'#ee9d3f':item.stroke"
-                              :strokeWidth="item['stroke-width']"
-                            ></polygon>
-                            <circle
-                              v-if="item.cx"
-                              :cx="item.cx"
-                              :cy="item.cy"
-                              :r="item.r"
-                              :fill="(selection.pen.fromArrow==item.name)?(item.fill=='#ffffff'?item.fill:'#ee9d3f'):item.fill"
-                              :stroke="(selection.pen.fromArrow==item.name)?'#ee9d3f':item.stroke"
-                              :strokeWidth="item['stroke-width']"
-                            ></circle>
-                          </g>
-                        </svg>
-                      </div>
-                    </el-option>
-                  </el-select>
-                </div>
-              </div>
-
-              <div class="props-pen-item special-select" v-if="selection.pen&&selection.pen.type">
-                <div>{{ $t('project.topology.toArrow') }}</div>
-                <div class="p10 pl0">
-                  <el-select :popper-append-to-body="true" v-model="selection.pen.toArrow" size="small" popper-class="right-box-select-top right-public-box-dropdown-top"
-                             @change="onClickToArrow">
-                    <div slot="prefix">
-                      <div class="icon-item">
-                        <svg>
-                          <g fill="none" :stroke="theme === 'light' ? 'black' : '#BEBEBE'" stroke-width="1" v-for="(item,index) in penLineFromTOArrow"
-                             :key="index" v-if="selection.pen.toArrow==item.name">
-                            <path :d="item.d"></path>
-                            <polygon v-if="item.points" :points="item.points" :fill="item.fill" :stroke="item.stroke"
-                                     :strokeWidth="item['stroke-width']"></polygon>
-                            <circle v-if="item.cx" :cx="item.cx" :cy="item.cy" :r="item.r" :fill="item.fill"
-                                    :stroke="item.stroke" :strokeWidth="item['stroke-width']"></circle>
-                          </g>
-                        </svg>
-                      </div>
-                    </div>
-                    <el-option v-for="(item,index) in penLineFromTOArrow" :value="item.name" :key="index">
-                      <div class="icon-item">
-                        <svg>
-                          <g fill="none" :stroke="(selection.pen.toArrow==item.name)?'#ee9d3f':item.strokeColor"
-                             stroke-width="1">
-                            <path :d="item.d"></path>
-                            <polygon
-                              v-if="item.points"
-                              :points="item.points"
-                              :fill="(selection.pen.toArrow==item.name)?(item.fill=='#ffffff'?item.fill:'#ee9d3f'):item.fill"
-                              :stroke="(selection.pen.toArrow==item.name)?'#ee9d3f':item.stroke"
-                              :strokeWidth="item['stroke-width']"
-                            ></polygon>
-                            <circle
-                              v-if="item.cx"
-                              :cx="item.cx"
-                              :cy="item.cy"
-                              :r="item.r"
-                              :fill="(selection.pen.toArrow==item.name)?(item.fill=='#ffffff'?item.fill:'#ee9d3f'):item.fill"
-                              :stroke="(selection.pen.toArrow==item.name)?'#ee9d3f':item.stroke"
-                              :strokeWidth="item['stroke-width']"
-                            ></circle>
-                          </g>
-                        </svg>
-                      </div>
-                    </el-option>
-                  </el-select>
-                </div>
-              </div>
-
-              <div class="props-pen-item">
-                <div>{{ $t('project.topology.lineWidth') }}（px）</div>
-                <div class="p10 pl0">
-                  <el-input-number
-                    @focus="inputFocus"
-                    @blur="inputBlur"
-                    :precision="2"
-                    controls-position="right"
-                    size="small"
-                    name="x"
-                    class="input"
-                    v-model.number="selection.pen.data.lineWidth"
-                    :readonly="readonly"
-                    required
-                    :min="selection.pen.type?1:(selection.pen.name==='rectangleImg2' || selection.pen.name==='rectangleImg' || selection.pen.name==='myCube' ?0:1)"
-                    @change="onChange('lineWidth')"></el-input-number>
-                </div>
-              </div>
-
-              <div class="props-pen-item">
-                <div>{{ $t('project.topology.lineColor') }}</div>
-                <div class="p10 pl0">
-                  <nezhaColor :isTopo="true" :value-arr="[{name:'color',value:selection.pen.color}]"
-                              @colorChange="colorChange"/>
-                </div>
-              </div>
-              <div class="props-pen-item" v-if="selection.pen&&selection.pen.type">
-                <div>{{ $t('project.topology.arrowColor') }}</div>
-                <div class="p10 pl0">
-                  <nezhaColor :isTopo="true" :value-arr="[{name:'toArrowColor',value:selection.pen.toArrowColor}]"
-                              @colorChange="colorChange"/>
-                </div>
-              </div>
-
-            </div>
-          </el-collapse-item>
-          <el-collapse-item :title="$t('project.topology.font')" name="5" v-if="selection.pen&&!selection.pen.type">
-            <div class="flex flex-warp">
-              <div class="props-pen-item" style="width: 100%">
-                <div>{{ $t('project.topology.textContent') }}</div>
-                <div class="p10 pl0">
-                  <el-input v-model="selection.pen.data.title" class="input" size="small"
-                            @change="changeTitle"></el-input>
-                </div>
-              </div>
-              <div class="props-pen-item">
-                <div>{{ $t('project.topology.fontSize') }}</div>
-                <div class="p10 pl0">
-                  <el-input-number
-                    @focus="inputFocus"
-                    @blur="inputBlur"
-                    :precision="0"
-                    controls-position="right"
-                    size="small" name="x"
-                    class="input"
-                    v-model.number="selection.pen.fontSize"
-                    :readonly="readonly"
-                    required
-                    @change="onChange()"></el-input-number>
-                </div>
-              </div>
-              <div class="props-pen-item">
-                <div>{{ $t('project.topology.fontColor') }}</div>
-                <div class="p10 pl0">
-                  <nezhaColor :isTopo="true" :value-arr="[{name:'textColor',value:selection.pen.textColor}]"
-                              @colorChange="colorChange"/>
-                </div>
-              </div>
-
-              <div class="props-pen-item">
-                <div>{{ $t('project.topology.textAlign') }}</div>
-                <div class="p10 pl0">
-                  <el-select :placeholder="$t('el.select.placeholder')" :popper-append-to-body="true"
-                             class="right-box-row-with-btn no-style-class" popper-class="chart-box-dropdown-small right-box-select-top right-public-box-dropdown-top"
-                             size="mini"
-                             v-model="selection.pen.textAlign" value-key="chartType" @change="onChange">
-                    <el-option :key="item.id" :label="item.name" :value="item.id" v-for="item in textAlignOptions">
-                      <span class="panel-dropdown-label-txt">{{ item.name }}</span>
-                    </el-option>
-                  </el-select>
-                </div>
-              </div>
-
-              <div class="props-pen-item">
-                <div>{{ $t('project.topology.textBaseline') }}</div>
-                <div class="p10 pl0">
-                  <el-select :placeholder="$t('el.select.placeholder')" :popper-append-to-body="true"
-                             class="right-box-row-with-btn no-style-class" popper-class="chart-box-dropdown-small right-box-select-top right-public-box-dropdown-top"
-                             size="mini"
-                             v-model="selection.pen.textBaseline" value-key="chartType" @change="onChange">
-                    <el-option :key="item.id" :label="item.name" :value="item.id" v-for="item in textBaselineOptions">
-                      <span class="panel-dropdown-label-txt">{{ item.name }}</span>
-                    </el-option>
-                  </el-select>
-                </div>
-              </div>
-
-              <!--              <div class="props-pen-item">-->
-              <!--                <div>{{ $t('project.topology.textOffsetX') }}</div>-->
-              <!--                <div class="p10 pl0">-->
-              <!--                  <el-input-number-->
-              <!--                    @focus="inputFocus"-->
-              <!--                    @blur="inputBlur"-->
-              <!--                    :precision="0"-->
-              <!--                    controls-position="right"-->
-              <!--                    size="small" name="x"-->
-              <!--                    class="input"-->
-              <!--                    v-model.number="selection.pen.textLeft"-->
-              <!--                    :readonly="readonly"-->
-              <!--                    required-->
-              <!--                    @change="onChange()"></el-input-number>-->
-              <!--                </div>-->
-              <!--              </div>-->
-
-              <!--              <div class="props-pen-item">-->
-              <!--                <div>{{ $t('project.topology.textOffsetY') }}</div>-->
-              <!--                <div class="p10 pl0">-->
-              <!--                  <el-input-number-->
-              <!--                    @focus="inputFocus"-->
-              <!--                    @blur="inputBlur"-->
-              <!--                    :precision="0"-->
-              <!--                    controls-position="right"-->
-              <!--                    size="small" name="x"-->
-              <!--                    class="input"-->
-              <!--                    v-model.number="selection.pen.textTop"-->
-              <!--                    :readonly="readonly"-->
-              <!--                    required-->
-              <!--                    @change="onChange()"></el-input-number>-->
-              <!--                </div>-->
-              <!--              </div>-->
-
-            </div>
-          </el-collapse-item>
-        </el-collapse>
-      </el-tab-pane>
-    </el-tabs>
-    <!--选中多个-->
-    <keep-alive>
-      <div v-if="selection.pens && selection.pens.length > 1" class="">
-      <el-collapse v-model="activeNames">
-        <!--对齐方式-->
-        <el-collapse-item :title="$t('project.topology.align')" name="1" v-if="selection.pens">
-          <label class="hover pointer mr10 iconLabel" v-for="item in nodesAlign" :title="item.desc" :key="item.value">
-            <i :class="['iconfont','iconfontSize16',`icon-align-${item.value}`]"
-               @click="onNodesAlign(item.value)"></i>
-          </label>
-        </el-collapse-item>
-        <!--排版-->
-        <el-collapse-item :title="$t('project.topology.composing')" name="2" v-if="selection.pens">
-          <div class="mt10">
-                        <div class="flex middle mb10">
-                          <label>{{$t('project.topology.maxWidth')}}：</label>
-                          <div class="full pr10">
-                            <el-input-number :precision="0" controls-position="right" type="number" class="input" size="small"
-                                             v-model.number="layout.maxWidth" ></el-input-number>
-                          </div>
-                        </div>
-<!--            <div class="flex middle mb10">-->
-<!--              <label>{{ $t('project.topology.maxCount') }}：</label>-->
-<!--              <div class="full pr10">-->
-<!--                <el-input-number :precision="0" type="number" controls-position="right" class="input" size="small"-->
-<!--                                 v-model.number="layout.maxCount"-->
-<!--                                 title=""></el-input-number>-->
-<!--              </div>-->
-<!--            </div>-->
-            <div class="flex middle mb10">
-              <label>{{ $t('project.topology.nodeWidth') }}：</label>
-              <div class="full pr10">
-                <el-input-number :precision="0" controls-position="right" type="number" class="input" size="small"
-                                 v-model.number="layout.nodeWidth" title=""></el-input-number>
-              </div>
-            </div>
-            <div class="flex middle mb10">
-              <label>{{ $t('project.topology.nodeHeight') }}：</label>
-              <div class="full pr10">
-                <el-input-number :precision="0" controls-position="right" type="number" class="input" size="small"
-                                 v-model.number="layout.nodeHeight" title=""></el-input-number>
-              </div>
-            </div>
-            <div class="flex middle mb10">
-              <label>{{ $t('project.topology.spaceWidth') }}：</label>
-              <div class="full pr10">
-                <el-input-number :precision="0" controls-position="right" type="number" class="input" size="small"
-                                 v-model.number="layout.spaceWidth" title=""></el-input-number>
-              </div>
-            </div>
-<!--            <div class="flex middle mb10">-->
-<!--              <label>{{ $t('project.topology.spaceHeight') }}：</label>-->
-<!--              <div class="full pr10">-->
-<!--                <el-input-number :precision="0" controls-position="right" type="number" class="input" size="small"-->
-<!--                                 v-model.number="layout.spaceHeight" title=""></el-input-number>-->
-<!--              </div>-->
-<!--            </div>-->
-            <div class="flex middle">
-              <label></label>
-              <div class="full pr10">
-                <button class="button primary nz-btn nz-btn-size-mini-new nz-btn-style-light" @click="onLayout">
-                  {{ $t('project.topology.onLayout') }}
-                </button>
-              </div>
-            </div>
-          </div>
-        </el-collapse-item>
-      </el-collapse>
-    </div>
-    </keep-alive>
-    <!-- 选中为空 -->
-    <keep-alive>
-      <div v-if="!selection.pens&&!selection.pen" style="height: 100%">
-      <div class="project-title">
-        Project
-      </div>
-      <div class="project-content">
-        <!--        <div class="project-content-title">{{$t('project.topology.title')}}</div>-->
-
-        <!--        <div class="project-content-box" style="width: 100%">-->
-
-        <!--          <div class="project-content-item">-->
-        <!--            <label>{{$t('overall.name')}}</label>-->
-        <!--            <div class="full pr10">-->
-        <!--              <el-input class="input" size="small" v-model="topologyData.data.name" :placeholder="$t('el.select.placeholder')"-->
-        <!--                        @change="changeTopologyOpt"></el-input>-->
-        <!--            </div>-->
-        <!--          </div>-->
-
-        <!--          <div class="project-content-item half">-->
-        <!--            <label>{{$t('project.topology.fontSize')}}</label>-->
-        <!--            <div class="full pr10 h32">-->
-        <!--              <el-input-number-->
-        <!--                @focus="inputFocus"-->
-        <!--                @blur="inputBlur"-->
-        <!--                :precision="2"-->
-        <!--                controls-position="right"-->
-        <!--                size="small"-->
-        <!--                name="fontSize"-->
-        <!--                class="input"-->
-        <!--                v-model.number="topologyData.data.fontSize"-->
-        <!--                :readonly="readonly"-->
-        <!--                required-->
-        <!--                :min="10"-->
-        <!--                @change="changeTopologyOpt(topologyData.data.fontSize,'fontSize')"></el-input-number>-->
-        <!--            </div>-->
-        <!--          </div>-->
-
-        <!--          <div class="project-content-item half">-->
-        <!--            <label>{{$t('project.topology.textColor')}}</label>-->
-        <!--            <div class="full pr10 h32">-->
-        <!--              <nezhaColor :isTopo=true :value-arr="[{name:'textColor',value:topologyData.data.textColor}]" @colorChange="(val,key)=>{-->
-        <!--                changeTopologyOpt(val,key,true)-->
-        <!--                }"/>-->
-        <!--            </div>-->
-        <!--          </div>-->
-
-        <!--          <div class="project-content-item half">-->
-        <!--            <label>{{$t('project.topology.align')}}</label>-->
-        <!--            <div class="full pr10 h32">-->
-        <!--              <el-radio-group v-model="topologyData.data.align" size="small" @change="changeTopologyOpt">-->
-        <!--                <el-radio-button label="left">left</el-radio-button>-->
-        <!--                <el-radio-button label="center">center</el-radio-button>-->
-        <!--                <el-radio-button label="right">right</el-radio-button>-->
-        <!--              </el-radio-group>-->
-        <!--            </div>-->
-        <!--          </div>-->
-
-        <!--          <div class="project-content-item half">-->
-        <!--            <label>{{$t('project.topology.opacity')}}</label>-->
-        <!--            <div class="full pr10 h32">-->
-        <!--              <el-input-number-->
-        <!--                @focus="inputFocus"-->
-        <!--                @blur="inputBlur"-->
-        <!--                :precision="2"-->
-        <!--                controls-position="right"-->
-        <!--                size="small"-->
-        <!--                name="fontSize"-->
-        <!--                class="input"-->
-        <!--                v-model.number="topologyData.data.opacity"-->
-        <!--                :readonly="readonly"-->
-        <!--                required-->
-        <!--                :step="0.2"-->
-        <!--                :min="0"-->
-        <!--                @change="changeTopologyOpt(topologyData.data.opacity,'opacity')"></el-input-number>-->
-        <!--            </div>-->
-        <!--          </div>-->
-        <!--        </div>-->
-
-        <!--        <div class="project-content-title">-->
-        <!--          Appearance-->
-        <!--          &lt;!&ndash;{{$t('overall.name')}}&ndash;&gt;-->
-        <!--        </div>-->
-
-        <div class="project-content-box" style="width: 100%">
-          <div class="project-content-item half">
-            <label>{{ $t('project.topology.bac') }}</label>
-            <div class="full pr10 h32">
-              <nezhaColor :isTopo="true" :value-arr="[{name:'background',value:topologyData.data.background}]" @colorChange="(val,key)=>{
-                changeTopologyOpt(val,key,true)
-                }"/>
-            </div>
-          </div>
-
-          <!--          <div class="project-content-item half">-->
-          <!--            <label>{{$t('project.topology.bacImage')}}</label>-->
-          <!--            <div class="full pr10 h32">-->
-          <!--              &lt;!&ndash;暂时是input 输入网址&ndash;&gt;-->
-          <!--              <el-input class="input" size="small" v-model="topologyData.data.bkImage" @change="changeTopologyOpt"></el-input>-->
-          <!--            </div>-->
-          <!--          </div>-->
-
-          <!-- <div class="project-content-item half">
-             <label>{{$t('project.topology.rule')}}</label>
-             <div class="full pr10 h32">
-               <el-switch
-                 v-model="topologyData.data.rule"
-                 :active-value="true"
-                 :inactive-value="false"
-                 active-color="#ee9d3f"
-                 @change="changeTopologyOpt(topologyData.data.rule,'rule')">
-               </el-switch>
-             </div>
-           </div>
-
-           <div class="project-content-item half special-select">
-             <label>{{$t('project.topology.defaultStartArrow')}}</label>
-             <div class="full pr10 h32">
-               <el-select :popper-append-to-body='false' v-model="topologyData.data.fromArrow" size="small"
-
-                          @change="changeTopologyOpt(topologyData.data.fromArrow,'fromArrow')">
-                 <div slot="prefix">
-                   <div class="icon-item">
-                     <svg>
-                       <g fill="none" stroke="black" stroke-width="1" v-for="(item,index) in penLineFromTOArrow"
-                          :key="index" v-if="topologyData.data.fromArrow==item.name">
-                         <path :d="item.d"></path>
-                         <polygon v-if="item.points" :points="item.points" :fill="item.fill" :stroke="item.stroke"
-                                  :strokeWidth="item['stroke-width']"></polygon>
-                         <circle v-if="item.cx" :cx="item.cx" :cy="item.cy" :r="item.r" :fill="item.fill"
-                                 :stroke="item.stroke" :strokeWidth="item['stroke-width']"></circle>
-                       </g>
-                     </svg>
-                   </div>
-                 </div>
-                 <el-option v-for="(item,index) in penLineFromTOArrow" :value="item.name" :key="index">
-                   <div class="icon-item">
-                     <svg>
-                       <g fill="none" :stroke="(topologyData.data.fromArrow==item.name)?'#ee9d3f':'black'"
-                          stroke-width="1">
-                         <path :d="item.d"></path>
-                         <polygon
-                           v-if="item.points"
-                           :points="item.points"
-                           :fill="(topologyData.data.fromArrow==item.name)?(item.fill=='#ffffff'?item.fill:'#ee9d3f'):item.fill"
-                           :stroke="(topologyData.data.fromArrow==item.name)?'#ee9d3f':item.stroke"
-                           :strokeWidth="item['stroke-width']"
-                         ></polygon>
-                         <circle
-                           v-if="item.cx"
-                           :cx="item.cx"
-                           :cy="item.cy"
-                           :r="item.r"
-                           :fill="(topologyData.data.fromArrow==item.name)?(item.fill=='#ffffff'?item.fill:'#ee9d3f'):item.fill"
-                           :stroke="(topologyData.data.fromArrow==item.name)?'#ee9d3f':item.stroke"
-                           :strokeWidth="item['stroke-width']"
-                         ></circle>
-                       </g>
-                     </svg>
-                   </div>
-                 </el-option>
-               </el-select>
-             </div>
-           </div>
-
-           <div class="project-content-item half special-select">
-             <label>{{$t('project.topology.defaultEndArrow')}}</label>
-             <div class="full pr10 h32">
-               <el-select :popper-append-to-body='false' v-model="topologyData.data.toArrow" size="small"
-
-                          @change="changeTopologyOpt('toArrow')">
-                 <div slot="prefix">
-                   <div class="icon-item">
-                     <svg>
-                       <g fill="none" stroke="black" stroke-width="1" v-for="(item,index) in penLineFromTOArrow"
-                          :key="index" v-if="topologyData.data.toArrow==item.name">
-                         <path :d="item.d"></path>
-                         <polygon v-if="item.points" :points="item.points" :fill="item.fill" :stroke="item.stroke"
-                                  :strokeWidth="item['stroke-width']"></polygon>
-                         <circle v-if="item.cx" :cx="item.cx" :cy="item.cy" :r="item.r" :fill="item.fill"
-                                 :stroke="item.stroke" :strokeWidth="item['stroke-width']"></circle>
-                       </g>
-                     </svg>
-                   </div>
-                 </div>
-                 <el-option v-for="(item,index) in penLineFromTOArrow" :value="item.name" :key="index">
-                   <div class="icon-item">
-                     <svg>
-                       <g fill="none" :stroke="(topologyData.data.toArrow==item.name)?'#ee9d3f':'black'"
-                          stroke-width="1">
-                         <path :d="item.d"></path>
-                         <polygon
-                           v-if="item.points"
-                           :points="item.points"
-                           :fill="(topologyData.data.toArrow==item.name)?(item.fill=='#ffffff'?item.fill:'#ee9d3f'):item.fill"
-                           :stroke="(topologyData.data.toArrow==item.name)?'#ee9d3f':item.stroke"
-                           :strokeWidth="item['stroke-width']"
-                         ></polygon>
-                         <circle
-                           v-if="item.cx"
-                           :cx="item.cx"
-                           :cy="item.cy"
-                           :r="item.r"
-                           :fill="(topologyData.data.toArrow==item.name)?(item.fill=='#ffffff'?item.fill:'#ee9d3f'):item.fill"
-                           :stroke="(topologyData.data.toArrow==item.name)?'#ee9d3f':item.stroke"
-                           :strokeWidth="item['stroke-width']"
-                         ></circle>
-                       </g>
-                     </svg>
-                   </div>
-                 </el-option>
-               </el-select>
-             </div>
-           </div>-->
-
-        </div>
-
-        <!--        <div class="project-content-title">Appearance</div>-->
-
-        <!--        <div class="project-content-box" style="width: 100%">-->
-
-        <!--          <div class="project-content-item half">-->
-        <!--            <label>Project Info</label>-->
-        <!--            <div class="full pr10 h32">-->
-        <!--              <el-switch-->
-        <!--                v-model="topologyData.data.projectInfo"-->
-        <!--                :active-value="true"-->
-        <!--                :inactive-value="false"-->
-        <!--                active-color="#ee9d3f"-->
-        <!--                @change="changeTopologyOpt(topologyData.data.projectInfo,'projectInfo')">-->
-        <!--              </el-switch>-->
-        <!--            </div>-->
-        <!--          </div>-->
-
-        <!--          <div class="project-content-item half">-->
-        <!--            <label>Alert Info</label>-->
-        <!--            <div class="full pr10 h32">-->
-        <!--              <el-switch-->
-        <!--                v-model="topologyData.data.alertInfo"-->
-        <!--                :active-value="true"-->
-        <!--                :inactive-value="false"-->
-        <!--                active-color="#ee9d3f"-->
-        <!--                @change="changeTopologyOpt(topologyData.data.alertInfo,'alertInfo')">-->
-        <!--              </el-switch>-->
-        <!--            </div>-->
-        <!--          </div>-->
-
-        <!--        </div>-->
-
-        <!--        <div class="project-content-title">{{$t('overall.link')}}</div>-->
-
-        <!--        <div class="project-content-box" style="width: 100%">-->
-
-        <!--          <div class="project-content-item">-->
-        <!--            <label>Url</label>-->
-        <!--            <div class="full pr10">-->
-        <!--              <el-input class="input" size="small" v-model="topologyData.data.url" :placeholder="$t('el.select.placeholder')"-->
-        <!--                        @change="changeTopologyOpt"></el-input>-->
-        <!--            </div>-->
-        <!--          </div>-->
-
-        <!--        </div>-->
-
-      </div>
-    </div>
-    </keep-alive>
-  </div>
-</template>
-
-<script>
-// import { alignNodes, spaceBetween, layout } from '@topology/layout'
-import { getTopology, resetZIndex } from '../../js/common'
-import chartDataFormat from '../../../chart/chartDataFormat'
-import promqlInput from '../../../page/dashboard/explore/promqlInput'
-import nezhaColor from '../../nezhaColor'
-import promqlInputMixin from '@/components/common/mixin/promqlInput'
-import { s8 } from '@topology/core'
-
-const rz = {
-  methods: {
-    rz (e) {
-      resetZIndex(e)
-    }
-  }
-}
-export default {
-  // pen.type 0为node 1位line
-  data () {
-    const theme = localStorage.getItem(`nz-user-${localStorage.getItem('nz-user-id')}-theme`) || 'light'
-    return {
-      theme: theme,
-      expressions: [],
-      language: localStorage.getItem('nz-language') || 'en',
-      chartTypeList: [
-        {
-          id: 'line',
-          name: this.$t('dashboard.dashboard.chartForm.typeVal.line.label')
-        },
-        {
-          id: 'stackArea',
-          name: this.$t('dashboard.dashboard.chartForm.typeVal.stackArea.label')
-        }
-        // {
-        //   id: 'bar',
-        //   name: this.$t('dashboard.dashboard.chartForm.typeVal.bar.label')
-        // },
-        // {
-        //   id: 'table',
-        //   name: this.$t('dashboard.dashboard.chartForm.typeVal.table.label')
-        // }
-      ],
-      aggregationList: [
-        {
-          id: 'last',
-          name: 'last'
-        }, {
-          id: 'first',
-          name: 'first'
-        }, {
-          id: 'min',
-          name: 'min'
-        }, {
-          id: 'max',
-          name: 'max'
-        }, {
-          id: 'avg',
-          name: 'avg'
-        }, {
-          id: 'total',
-          name: 'total'
-        }
-      ],
-      metricList: [], // metric列表
-      metricCascaderList: [], // metric级联列表
-      metricAllData: new Map(), // 存放所有的project-module-metric-labelValue，避免重复加载
-      metricOptions: [],
-      unitOptions: chartDataFormat.unitOptions(),
-      lineId: null,
-      lineIsJson: false,
-      lineData: '',
-      penId: null,
-      penIsJson: false,
-      penData: '',
-      tab: '1',
-      drowdown: 0,
-      readonly: false,
-      topologyData: {
-        data: {
-          name: '',
-          background: '#FFFFFF',
-          bkImage: '',
-          lineName: 'curve',
-          lineWidth: 1,
-          fromArrow: '',
-          toArrow: 'triangleSolid',
-          projectInfo: true,
-          alertInfo: true,
-          url: '',
-          fontSize: 14,
-          align: 'left',
-          textColor: '#000000',
-          opacity: 1
-        }
-      },
-      pen: {
-        dash: '',
-        font: '',
-        lineWidth: '',
-        color: '',
-        textMaxLine: '',
-        textLeft: '',
-        textTop: '',
-        globalAlpha: ''
-      },
-      penNumber: '',
-      nodesAlign: [// 对齐方式
-        {
-          value: 'left',
-          desc: this.$t('overall.left')
-        }, {
-          value: 'right',
-          desc: this.$t('dashboard.dashboard.chartForm.alignList.right')
-        }, {
-          value: 'top',
-          desc: this.$t('project.topology.topOffsetY')
-        }, {
-          value: 'bottom',
-          desc: this.$t('project.topology.bottomOffsetY')
-        }, {
-          value: 'center',
-          desc: this.$t('project.topology.center')
-        }, {
-          value: 'middle',
-          desc: this.$t('project.topology.middleOffsetY')
-        }],
-      layout: { // 显示对应属性
-        maxWidth: undefined,
-        nodeWidth: 0,
-        nodeHeight: 0,
-        maxCount: 0,
-        spaceWidth: 30,
-        spaceHeight: 30
-      },
-      activeNames: ['1', '2', '3', '4', '5'],
-      show: { // 显示对应属性
-        pos: true,
-        layout: true,
-        looks: true
-      },
-      data: {},
-      bkTypeOption: [
-        {
-          id: 0,
-          name: 'X',
-          label: 'nz-icon-close',
-          fontSize: 'font12 v-sub'
-        },
-        {
-          id: 2,
-          name: '↑',
-          label: 'nz-icon-arrow-up1',
-          fontSize: 'font20'
-        },
-        {
-          id: 4,
-          name: '↓',
-          label: 'nz-icon-arrow-down2',
-          fontSize: 'font20'
-        },
-        {
-          id: 1,
-          name: '→',
-          label: 'nz-icon-arrow-right1',
-          fontSize: 'font12 v-sub'
-        },
-        {
-          id: 3,
-          name: '←',
-          label: 'nz-icon-arrow-left1',
-          fontSize: 'font12 v-sub'
-        }
-      ],
-      penDash: [
-        { d: 'M5 14 l85 0', 'stroke-dasharray': '', strokeColor: theme == 'light' ? 'black' : '#BEBEBE' },
-        { d: 'M5 14 l85 0', 'stroke-dasharray': '5,5', strokeColor: theme == 'light' ? 'black' : '#BEBEBE' },
-        { d: 'M5 14 l85 0', 'stroke-dasharray': '10,10', strokeColor: theme == 'light' ? 'black' : '#BEBEBE' },
-        { d: 'M5 14 l85 0', 'stroke-dasharray': '10,10,2,10', strokeColor: theme == 'light' ? 'black' : '#BEBEBE' }
-      ],
-      penLineType: [
-        { d: 'M5 14 a100,50 0 0,1 85,0', 'stroke-dasharray': '', name: 'curve', strokeColor: theme == 'light' ? 'black' : '#BEBEBE' },
-        { d: 'M5 8 l40 0 l0 12 l40 0', 'stroke-dasharray': '', name: 'polyline', strokeColor: theme == 'light' ? 'black' : '#BEBEBE' },
-        { d: 'M5 14 l85 0', 'stroke-dasharray': '', name: 'line', strokeColor: theme == 'light' ? 'black' : '#BEBEBE' }
-        // {d:'M5 20 C0,8 50,0 85,0',"stroke-dasharray":"",name:'mind'},
-      ],
-      penLineFromTOArrow: [
-        { d: 'M5 14 l85 0', points: '', fill: '', stroke: '', 'stroke-width': '', name: '', strokeColor: theme == 'light' ? 'black' : '#BEBEBE' },
-        {
-          d: 'M5 14 l85 0',
-          points: '5 14,20 9,20 19',
-          fill: '#000000',
-          stroke: '',
-          'stroke-width': '',
-          name: 'triangleSolid',
-          strokeColor: theme == 'light' ? 'black' : '#BEBEBE'
-
-        },
-        {
-          d: 'M5 14 l85 0',
-          points: '5 14,20 9,20 19',
-          fill: '#ffffff',
-          stroke: '#000000',
-          'stroke-width': '1',
-          name: 'triangle',
-          strokeColor: theme == 'light' ? 'black' : '#BEBEBE'
-        },
-        {
-          d: 'M5 14 l85 0',
-          fill: '#000000',
-          stroke: '',
-          'stroke-width': '',
-          cx: '10',
-          cy: '14',
-          r: '5',
-          name: 'circleSolid',
-          strokeColor: theme == 'light' ? 'black' : '#BEBEBE'
-        },
-        {
-          d: 'M5 14 l85 0',
-          fill: '#ffffff',
-          stroke: '#000000',
-          'stroke-width': '1',
-          cx: '10',
-          cy: '14',
-          r: '5',
-          name: 'circle',
-          strokeColor: theme == 'light' ? 'black' : '#BEBEBE'
-        }
-      ],
-      lineAnimateOptions: [
-        { id: 'flow', name: this.$t('project.topology.flow') },
-        { id: 'beads', name: this.$t('project.topology.beads') },
-        { id: 'dot', name: this.$t('project.topology.dot') },
-        // { id: 'comet', name: this.$t('project.topology.comet') },
-        { id: 'custom', name: this.$t('project.topology.none') }
-      ],
-      nodeAnimateOptions: [
-        {
-          id: 'upDown',
-          name: this.$t('project.topology.bounce')
-        },
-        {
-          id: 'leftRight',
-          name: this.$t('project.topology.shakeX')
-        },
-        {
-          id: 'heart',
-          name: this.$t('project.topology.heartBeat')
-        },
-        {
-          id: 'warning',
-          name: this.$t('project.topology.flash')
-        },
-        {
-          id: 'show',
-          name: this.$t('project.topology.swing')
-        },
-        {
-          id: 'fade',
-          name: this.$t('project.topology.fade')
-        },
-        {
-          id: '',
-          name: this.$t('project.topology.none')
-        }
-      ],
-      predefineColors: [
-        '#19730E', '#37872D', '#73BF69',
-        '#CC9D00', '#E0B400', '#FADE2A',
-        '#AD0317', '#C4162A', '#F2495C',
-        '#1250B0', '#1F60C4', '#5794F2',
-        '#E55400', '#FA6400', '#FF9830',
-        '#7C2EA3', '#8F3BB8', '#B877D9'
-      ],
-      loading: false,
-      textAlignOptions: [
-        {
-          id: 'left',
-          name: this.$t('overall.left')
-        },
-        {
-          id: 'center',
-          name: this.$t('project.topology.center')
-        },
-        {
-          id: 'right',
-          name: this.$t('dashboard.dashboard.chartForm.alignList.right')
-        }
-      ],
-      textBaselineOptions: [
-        {
-          id: 'top',
-          name: this.$t('project.topology.topOffsetY')
-        },
-        {
-          id: 'middle',
-          name: this.$t('project.topology.middleOffsetY')
-        },
-        {
-          id: 'bottom',
-          name: this.$t('project.topology.bottomOffsetY')
-        }
-      ]
-    }
-  },
-  mixins: [rz, promqlInputMixin],
-  components: {
-    promqlInput,
-    nezhaColor
-  },
-  computed: {},
-  props: {
-    selection: {
-      type: Object,
-      require: true
-    },
-    index: {
-      type: Number,
-      require: true
-    },
-    modules: {},
-    imgArr: {},
-    fromDiagram: {
-      type: Boolean,
-      default: false
-    }
-  },
-  watch: {
-    // 'topologyData.data':{
-    //   handler(n){
-    //     setTimeout(()=>{
-    //       let dataOption=getTopology(this.index).data();
-    //       Object.keys(this.topologyData.data).forEach((key)=>{
-    //         dataOption[key]=this.topologyData.data[key];
-    //       });
-    //       getTopology(this.index).render();
-    //     })
-    //   },
-    //   deep:true,
-    //   immediate:false,
-    // },
-    selection: {
-      handler (n) {
-        // this.loading = false
-        if (this.selection.pen && this.selection.pen.data && (!this.selection.pen.data.expressAllArr || this.selection.pen.data.expressAllArr.length === 0)) {
-          this.selection.pen.data.expressAllArr = ['']
-          this.selection.pen.data.legendsAll = ['']
-        }
-      },
-      deep: true,
-      immediate: true
-    },
-    'selection.pen.data': {
-      handler (n, o) {
-        if (this.selection.pen && JSON.stringify(this.selection.pen.type) && (JSON.stringify(n) !== JSON.stringify(o)) && o) {
-          this.$emit('change', this.selection.pen)
-        }
-      }
-    },
-    fromDiagram: {
-      handler () {
-        if (this.selection.pen && this.selection.pen.data) {
-          // eslint-disable-next-line vue/no-mutating-props
-          this.selection.pen.data.iconToolState = false
-        }
-      },
-      deep: true,
-      immediate: true
-    },
-    imgArr: {
-      handler () {
-        // this.loading = false
-      },
-      deep: true,
-      immediate: true
-    }
-  },
-  created () {
-    const dataOption = this.index == -2 ? getTopology(-1).data : getTopology(this.index).data()
-    if (!dataOption.data) {
-      dataOption.data = {}
-    }
-    Object.keys(this.topologyData.data).forEach((key) => {
-      if (key === 'projectInfo' || key === 'alertInfo' || key === 'fontSize' || key === 'align' || key === 'textColor' || key === 'opacity') {
-        this.topologyData.data[key] = (JSON.stringify(dataOption.data[key]) ? dataOption.data[key] : this.topologyData.data[key])
-      } else {
-        this.topologyData.data[key] = (JSON.stringify(dataOption[key]) ? dataOption[key] : this.topologyData.data[key])
-      }
-    })
-  },
-  mounted () {
-    // this.queryMetrics()
-    // this.topologyData.data.grid= !!dataOption.grid;
-    // this.topologyData.data.rule= !!dataOption.rule;
-    // this.topologyData.data.projectInfo= !!dataOption.projectInfo;
-    // this.topologyData.data.alertInfo= !!dataOption.alertInfo;
-    // window.addEventListener('keydown', (e) => {
-    //   if (e.target.className === 'cm-content cm-lineWrapping' && e.keyCode === 8) {
-    //     if (e & e.stopPropagation) {
-    //       e.stopPropagation() // iie 6, 7, 8
-    //     } else {
-    //       window.event.cancleBubble = true
-    //     }
-    //     return false
-    //   }
-    // })
-  },
-  updated (n, o) {
-    if (!this.selection.pen) { // 没选中node line返回
-      return
-    }
-    if (this.penId === this.selection.pen.id) {
-      return
-    }
-    if (this.selection.pen.id) {
-      this.selection.expand = false
-      this.penId = this.selection.pen.id
-      const originData = this.selection.pen.data
-      this.penIsJson = this.isJson(originData)
-      this.penData = this.penIsJson
-        ? JSON.stringify(originData, null, 4)
-        : this.penData = originData
-    }
-  },
-  methods: {
-    tabClick (n) {
-    },
-    moduleIdChange (n) {
-      this.selection.pen.data.moduleName = this.modules.find(item => item.id === n).name
-      if (!this.selection.pen.data.title) {
-        this.selection.pen.data.title = this.selection.pen.data.moduleName
-        this.selection.pen.text = this.selection.pen.data.title
-        this.onChange()
-        this.$emit('notModuleIDArrChange', this.selection.pen.id)
-      }
-    },
-    changeTitle (val) {
-      if (!val) {
-        this.selection.pen.text = this.selection.pen.data.moduleName || ''
-        this.selection.pen.data.title = this.selection.pen.data.moduleName || ''
-      } else {
-        this.selection.pen.text = val
-      }
-      this.onChange()
-    },
-    onChange (value, val) {
-      if (value === 'lineWidth') {
-        this.selection.pen.lineWidth = this.selection.pen.data.lineWidth
-      }
-      if (value === 'lineDash') {
-        this.selection.pen.lineDash = val ? (val == 1 ? [5, 5] : ((val == 2 ? [10, 10] : [10, 10, 2, 10]))) : []
-      }
-      this.$emit('change', this.selection.pen)
-      // if(!this.selection.pen.type||this.selection.pens){
-      //   this.$emit('change',this.selection.pen||this.selection.pens);
-      // }else{// 线更新
-      //   this.$emit('change');
-      // }
-    },
-    changeExpand () {
-      this.selection.expand = !this.selection.expand
-    },
-    isJson (obj) {
-      return typeof (obj) === 'object' && Object.prototype.toString.call(obj).toLowerCase() == '[object object]' && !obj.length
-    },
-
-    // 组件事件
-    onNodesAlign (align) { // 对齐node
-      getTopology(this.index).alignNodes(align, this.selection.pens)
-      setTimeout(() => {
-        getTopology(this.index).render()
-      }, 100)
-    },
-    onSpaceBetween () {
-      // spaceBetween(getTopology(this.index).activeLayer.pens, getTopology(this.index).activeLayer.rect.width)
-      getTopology(this.index).updateProps()
-    },
-    onLayout () { // 改变布局
-      if (!this.layout.maxWidth || !this.layout.spaceWidth) {
-        return
-      }
-      if (this.layout.nodeWidth && this.layout.nodeHeight) {
-        this.selection.pens.forEach(item => {
-          item.width = this.layout.nodeWidth
-          item.height = this.layout.nodeHeight
-        })
-      }
-      getTopology(this.index).layout(this.selection.pens, this.layout.maxWidth, this.layout.spaceWidth)
-      setTimeout(() => {
-        getTopology(this.index).render()
-      }, 100)
-    },
-    onClickDash (number) { // 改变线型
-      this.pen.dash = number
-      this.drowdown = 0
-      if (this.selection.pen) {
-        this.selection.pen.dash = number
-      }
-
-      this.onChange()
-    },
-    onClickName (name) {
-      this.pen.lineName = name
-      // this.selection.pen.calcControlPoints()
-      this.drowdown = 0
-      if (this.selection.pen) {
-        this.selection.pen.lineName = name
-        this.selection.pen.anchors = [
-          this.selection.pen.anchors[0],
-          this.selection.pen.anchors[this.selection.pen.anchors.length - 1]
-        ]
-        getTopology(this.index).updateLineType(this.selection.pen, name)
-        this.onChange()
-      }
-    },
-    bkTypeChange (val) {
-      this.selection.pen.data.gradientType = val
-      this.$forceUpdate()
-      if (val === 0) {
-        this.selection.pen.bkType = 0
-      }
-
-      if (val === 1 || val === 3) {
-        this.selection.pen.bkType = 1
-        this.selection.pen.gradientAngle = 0
-      }
-      if (val === 2 || val === 4) {
-        this.selection.pen.bkType = 1
-        this.selection.pen.gradientAngle = 90
-      }
-
-      if (val === 1 || val === 2) {
-        this.selection.pen.gradientToColor = this.selection.pen.data.gradientColor
-        this.selection.pen.gradientFromColor = this.selection.pen.background ? this.selection.pen.background : '#fff'
-      }
-      if (val === 3 || val === 4) {
-        this.selection.pen.gradientFromColor = this.selection.pen.data.gradientColor
-        this.selection.pen.gradientToColor = this.selection.pen.background ? this.selection.pen.background : '#fff'
-      }
-      this.onChange()
-    },
-    colorPickerClick (ref) {
-      this.$refs[ref].showPicker = true
-    },
-    colorPickerClickTable (ref, row) {
-      row.showColor = row.color.fill
-      row.showType = 'fill'
-      this.$nextTick(() => {
-        this.$refs[ref][0].showPicker = true
-      })
-    },
-    colorChange (val, name) { // 改变颜色
-      const bktype = this.selection.pen.data.gradientType
-      if (name === 'toArrowColor') {
-        this.selection.pen.fromArrowColor = this.colorRGBtoHex(val)
-        this.selection.pen.toArrowColor = this.colorRGBtoHex(val)
-        this.selection.pen.data.fromArrowColor = this.colorRGBtoHex(val)
-        this.selection.pen.data.toArrowColor = this.colorRGBtoHex(val)
-        this.selection.pen.data.arrowColor = this.colorRGBtoHex(val)
-      } else {
-        this.selection.pen[name] = this.colorRGBtoHex(val)
-      }
-      if (name === 'gradientColor') {
-        this.selection.pen.data.gradientColor = this.colorRGBtoHex(val)
-        if (bktype === 1 || bktype === 2) {
-          this.selection.pen.gradientToColor = this.selection.pen.data.gradientColor
-          this.selection.pen.gradientFromColor = this.selection.pen.background ? this.selection.pen.background : '#fff'
-        }
-        if (bktype === 3 || bktype === 4) {
-          this.selection.pen.gradientFromColor = this.selection.pen.data.gradientColor
-          this.selection.pen.gradientToColor = this.selection.pen.background ? this.selection.pen.background : '#fff'
-        }
-      }
-
-      if (name === 'background') {
-        if (bktype === 1 || bktype === 2) {
-          this.selection.pen.gradientToColor = this.selection.pen.data.gradientColor
-          this.selection.pen.gradientFromColor = this.selection.pen.background ? this.selection.pen.background : '#fff'
-        }
-        if (bktype === 3 || bktype === 4) {
-          this.selection.pen.gradientFromColor = this.selection.pen.data.gradientColor
-          this.selection.pen.gradientToColor = this.selection.pen.background ? this.selection.pen.background : '#fff'
-        }
-      }
-      if (name === 'textColor') {
-        // this.selection.pen.font.color = this.colorRGBtoHex(val)
-      }
-      this.selection.pen.data[name] = this.colorRGBtoHex(val)
-      this.onChange()
-    },
-    colorChangeTable (item, val, key) { // 改变颜色
-      item.color[key] = this.colorRGBtoHex(val)
-    },
-    changeShowPicker (item, type) {
-      this.$refs['colorPickerBac' + item.level][0].showPicker = true
-      item.showType = type
-      item.showColor = item.color[type]
-    },
-    colorOut (obj, e) {
-      let flag = false
-      e.path.forEach((item) => {
-        if (item.className === 'el-color-dropdown el-color-picker__panel' || item.className === 'color-tab') {
-          flag = true
-        }
-      })
-      if (flag) {
-        return
-      }
-      obj.showType = ''
-      obj.showColor = undefined
-    },
-    changeTopologyOpt (val, key, isColor) {
-      //
-      // getTopology(this.index).data()[key]=val;
-      // getTopology(this.index).render();
-      if (isColor) {
-        this.topologyData.data[key] = this.colorRGBtoHex(val)
-      } else {
-        this.topologyData.data[key] = val
-      }
-      // Object.keys(this.topologyData.data).forEach((key1) => {
-      //   if (key1 === 'projectInfo' || key1 === 'alertInfo' || key1 === 'fontSize' || key1 === 'align' || key1 === 'textColor' || key1 === 'opacity') {
-      //     getTopology(this.index).data().data[key1] = this.topologyData.data[key1]
-      //   } else {
-      //     getTopology(this.index).data()[key1] = this.topologyData.data[key1]
-      //   }
-      // })
-      getTopology(this.index).setBackgroundColor(this.topologyData.data.background)
-      getTopology(this.index).render()
-      this.$emit('changeProjectTitle')
-    },
-    colorRGBtoHex (color) { // 获取颜色16进制数
-      if (!color) {
-        return ''
-      }
-      ;
-      if (color.indexOf('#') === 0) {
-        return color
-      }
-      const rgb = color.split(',')
-      const r = parseInt(rgb[0].split('(')[1])
-      const g = parseInt(rgb[1])
-      const b = parseInt(rgb[2].split(')')[0])
-      const hex = '#' + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)
-      return hex
-    },
-    onClickToArrow (arrow) {
-      this.selection.pen.toArrow = arrow
-      this.drowdown = 0
-      this.onChange()
-    },
-    onClickFromArrow (arrow) {
-      this.selection.pen.fromArrow = arrow
-      this.drowdown = 0
-      this.onChange()
-    },
-    changeAnimatePlay (val, type) {
-      if (type === 'node') {
-        if (val === 'custom') {
-          this.selection.pen.data.animatePlay = false
-        } else {
-          this.selection.pen.data.animatePlay = true
-        }
-      } else if (type === 'line') {
-        if (val === 'custom') {
-          this.selection.pen.data.animatePlay = false
-        } else {
-          this.selection.pen.data.animatePlay = true
-        }
-      }
-      this.onChange()
-    },
-    onAnimate (val) {
-      // this.selection.pen.animateStart=this.selection.pen.animateStart?Date.now():0;
-      // this.selection.pen.data.animatePlay=this.selection.pen.animatePlay;
-      this.onChange()
-      // this.$emit('animate');
-    },
-    delTopologyPen () {
-      const delObj = this.selection.pen ? this.selection.pen.id : this.selection.pens
-      this.$emit('del', delObj)
-    },
-    getMetricOptions () {
-      return this.metricOptions
-    },
-    addExpression () {
-      this.selection.pen.data.expressAllArr.push('')
-      this.selection.pen.data.legendsAll.push('')
-    },
-    expressionChange (item) {
-
-    },
-    removeExpression (index) {
-      if (this.selection.pen.data.expressAllArr.length > 1) {
-        this.selection.pen.data.expressAllArr.splice(index, 1)
-        this.selection.pen.data.legendsAll.splice(index, 1)
-        this.$nextTick(() => {
-          this.expressions.forEach((ex, index) => {
-            if (ex) {
-              this.$refs[`promql-${index}`][0].metricChange(ex)
-            }
-          })
-        })
-      }
-    },
-    copyExpression (index) {
-      this.selection.pen.data.expressAllArr.push(this.selection.pen.data.expressAllArr[index])
-      this.selection.pen.data.legendsAll.push(this.selection.pen.data.legendsAll[index])
-      this.$nextTick(() => {
-        this.expressions.forEach((ex, index) => {
-          if (ex) {
-            this.$refs[`promql-${index}`][0].metricChange(ex)
-          }
-        })
-      })
-    },
-    valueMappingAdd () {
-      if (this.selection.pen.data.valueMappingSort === 'desc') {
-        this.selection.pen.data.valueMapping.push({
-          color: {
-            line: '#000000',
-            fill: '#ffffff',
-            text: '#000000'
-          },
-          showColor: undefined,
-          animateType: this.selection.pen.type ? 1 : '',
-          value: 0,
-          level: 1,
-          showType: 'fill'// bac text border
-        })
-        this.selection.pen.data.valueMapping.forEach((item, index) => {
-          if (index === 0) {
-            return
-          }
-          item.level = this.selection.pen.data.valueMapping.length - index
-        })
-      } else {
-        this.selection.pen.data.valueMapping.push({
-          color: {
-            line: '#000000',
-            fill: '#ffffff',
-            text: '#000000'
-          },
-          showColor: undefined,
-          animateType: this.selection.pen.type ? 1 : '',
-          value: 0,
-          level: this.selection.pen.data.valueMapping.length,
-          showType: 'fill'// bac text border
-        })
-      }
-    },
-    valueMappingValueChange (index, row) {
-
-    },
-    changeValueMappingSort () {
-      if (this.selection.pen.data.valueMappingSort === 'desc') {
-        this.selection.pen.data.valueMappingSort = 'asc'
-        const arr = JSON.parse(JSON.stringify(this.selection.pen.data.valueMapping))
-        const a = arr.splice(0, 1)
-        arr.reverse()
-        arr.unshift(a[0])
-        this.selection.pen.data.valueMapping = arr
-      } else {
-        this.selection.pen.data.valueMappingSort = 'desc'
-        const arr = JSON.parse(JSON.stringify(this.selection.pen.data.valueMapping))
-        const a = arr.splice(0, 1)
-        arr.reverse()
-        arr.unshift(a[0])
-        this.selection.pen.data.valueMapping = arr
-      }
-    },
-    valueMappingDel (index, row) {
-      this.selection.pen.data.valueMapping.splice(index, 1)
-      this.selection.pen.data.valueMapping.forEach((item, index) => {
-        item.level = index
-      })
-    },
-    inputFocus (e) {
-      e.path[2].children[0].setAttribute('tabindex', '0')
-      e.path[2].children[1].setAttribute('tabindex', '1')
-    },
-    inputBlur (e) {
-    }
-  }
-}
-</script>
diff --git a/nezha-fronted/src/components/common/project/L5/css/iconfont.css b/nezha-fronted/src/components/common/project/L5/css/iconfont.css
deleted file mode 100644
index a79ce8b86..000000000
--- a/nezha-fronted/src/components/common/project/L5/css/iconfont.css
+++ /dev/null
@@ -1,640 +0,0 @@
-@font-face {font-family: "iconfont";
-  src: url('//at.alicdn.com/t/font_1113798_m8wtja2grda.eot?t=1582278460666'); /* IE9 */
-  src: url('//at.alicdn.com/t/font_1113798_m8wtja2grda.eot?t=1582278460666#iefix') format('embedded-opentype'), /* IE6-IE8 */
-  url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
-  url('//at.alicdn.com/t/font_1113798_m8wtja2grda.woff?t=1582278460666') format('woff'),
-  url('//at.alicdn.com/t/font_1113798_m8wtja2grda.ttf?t=1582278460666') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
-  url('//at.alicdn.com/t/font_1113798_m8wtja2grda.svg?t=1582278460666#iconfont') format('svg'); /* iOS 4.1- */
-}
-
-.iconfont {
-  font-family: "iconfont" !important;
-  font-size: 16px;
-  font-style: normal;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-.icon-bk-color:before {
-  content: "\e647";
-}
-
-.icon-json:before {
-  content: "\e63f";
-}
-
-.icon-zip:before {
-  content: "\e65b";
-}
-
-.icon-tag:before {
-  content: "\e752";
-}
-
-.icon-attention:before {
-  content: "\e73d";
-}
-
-.icon-app:before {
-  content: "\e63e";
-}
-
-.icon-huaxue:before {
-  content: "\e9bc";
-}
-
-.icon-paobu:before {
-  content: "\e70d";
-}
-
-.icon-yangguang:before {
-  content: "\e653";
-}
-
-.icon-bar-chart:before {
-  content: "\e63c";
-}
-
-.icon-line-chart:before {
-  content: "\e851";
-}
-
-.icon-dashboard-chart:before {
-  content: "\e68b";
-}
-
-.icon-pie-chart:before {
-  content: "\e63d";
-}
-
-.icon-mind:before {
-  content: "\e63b";
-}
-
-.icon-svg:before {
-  content: "\e86e";
-}
-
-.icon-loop:before {
-  content: "\e638";
-}
-
-.icon-full-screen:before {
-  content: "\e63a";
-}
-
-.icon-pc:before {
-  content: "\e639";
-}
-
-.icon-play:before {
-  content: "\e636";
-}
-
-.icon-pause:before {
-  content: "\e698";
-}
-
-.icon-data:before {
-  content: "\e64c";
-}
-
-.icon-align-middle:before {
-  content: "\ec5b";
-}
-
-.icon-align-center:before {
-  content: "\e635";
-}
-
-.icon-align-bottom:before {
-  content: "\ec58";
-}
-
-.icon-align-right:before {
-  content: "\ec5a";
-}
-
-.icon-align-top:before {
-  content: "\e651";
-}
-
-.icon-align-left:before {
-  content: "\ec59";
-}
-
-.icon-from-line:before {
-  content: "\e630";
-}
-
-.icon-to-line:before {
-  content: "\ec56";
-}
-
-.icon-flow-event:before {
-  content: "\e665";
-}
-
-.icon-to-circleSolid:before {
-  content: "\e62b";
-}
-
-.icon-from-circleSolid:before {
-  content: "\ec55";
-}
-
-.icon-to-diamondSolid:before {
-  content: "\ec54";
-}
-
-.icon-from-diamondSolid:before {
-  content: "\e62e";
-}
-
-.icon-from-triangleSolid:before {
-  content: "\e634";
-}
-
-.icon-to-triangleSolid:before {
-  content: "\ec53";
-}
-
-.icon-from-:before {
-  content: "\e633";
-}
-
-.icon-to-:before {
-  content: "\ec52";
-}
-
-.icon-from-lineUp:before {
-  content: "\ec51";
-}
-
-.icon-to-lineDown:before {
-  content: "\e632";
-}
-
-.icon-to-lineUp:before {
-  content: "\e631";
-}
-
-.icon-from-lineDown:before {
-  content: "\ec50";
-}
-
-.icon-from-circle:before {
-  content: "\ec4e";
-}
-
-.icon-to-circle:before {
-  content: "\e62f";
-}
-
-.icon-from-diamond:before {
-  content: "\e62c";
-}
-
-.icon-to-diamond:before {
-  content: "\ec4c";
-}
-
-.icon-to-triangle:before {
-  content: "\e62a";
-}
-
-.icon-from-triangle:before {
-  content: "\ec4b";
-}
-
-.icon-picture:before {
-  content: "\e64e";
-}
-
-.icon-polyline:before {
-  content: "\e629";
-}
-
-.icon-curve:before {
-  content: "\e628";
-}
-
-.icon-folder:before {
-  content: "\e67c";
-}
-
-.icon-share2:before {
-  content: "\e66c";
-}
-
-.icon-class:before {
-  content: "\e627";
-}
-
-.icon-simple-class:before {
-  content: "\e626";
-}
-
-.icon-focus:before {
-  content: "\e622";
-}
-
-.icon-people:before {
-  content: "\e625";
-}
-
-.icon-lifeline:before {
-  content: "\e624";
-}
-
-.icon-fork:before {
-  content: "\ec49";
-}
-
-.icon-fork-v:before {
-  content: "\e621";
-}
-
-.icon-swimlane-v:before {
-  content: "\e620";
-}
-
-.icon-swimlane-h:before {
-  content: "\ec48";
-}
-
-.icon-action:before {
-  content: "\e61f";
-}
-
-.icon-inital:before {
-  content: "\e716";
-}
-
-.icon-final:before {
-  content: "\e61d";
-}
-
-.icon-loading:before {
-  content: "\e61c";
-}
-
-.icon-cube:before {
-  content: "\e6fc";
-}
-
-.icon-help:before {
-  content: "\e61e";
-}
-
-.icon-help-circle:before {
-  content: "\e637";
-}
-
-.icon-line:before {
-  content: "\e61b";
-}
-
-.icon-extern-storage:before {
-  content: "\e60e";
-}
-
-.icon-internal-storage:before {
-  content: "\e60d";
-}
-
-.icon-db:before {
-  content: "\e60c";
-}
-
-.icon-flow-subprocess:before {
-  content: "\e606";
-}
-
-.icon-msg:before {
-  content: "\e61a";
-}
-
-.icon-cloud:before {
-  content: "\e60a";
-}
-
-.icon-text:before {
-  content: "\e619";
-}
-
-.icon-twoway-arrow:before {
-  content: "\e618";
-}
-
-.icon-pentagram:before {
-  content: "\e64b";
-}
-
-.icon-hexagon:before {
-  content: "\e617";
-}
-
-.icon-pentagon:before {
-  content: "\e616";
-}
-
-.icon-triangle:before {
-  content: "\e615";
-}
-
-.icon-rect:before {
-  content: "\e60f";
-}
-
-.icon-flow-queue:before {
-  content: "\e614";
-}
-
-.icon-flow-comment:before {
-  content: "\e613";
-}
-
-.icon-flow-parallel:before {
-  content: "\e612";
-}
-
-.icon-flow-display:before {
-  content: "\e611";
-}
-
-.icon-flow-manually:before {
-  content: "\e610";
-}
-
-.icon-diamond:before {
-  content: "\e604";
-}
-
-.icon-rectangle:before {
-  content: "\e60b";
-}
-
-.icon-flow-ready:before {
-  content: "\e609";
-}
-
-.icon-flow-data:before {
-  content: "\e605";
-}
-
-.icon-flow-document:before {
-  content: "\e601";
-}
-
-.icon-flow-start:before {
-  content: "\e602";
-}
-
-.icon-file:before {
-  content: "\e7b4";
-}
-
-.icon-star-half-o:before {
-  content: "\e828";
-}
-
-.icon-star-o:before {
-  content: "\e82a";
-}
-
-.icon-star:before {
-  content: "\e82b";
-}
-
-.icon-clock:before {
-  content: "\e688";
-}
-
-.icon-triangle-right:before {
-  content: "\e607";
-}
-
-.icon-triangle-left:before {
-  content: "\e608";
-}
-
-.icon-triangle-down:before {
-  content: "\e70f";
-}
-
-.icon-triangle-up:before {
-  content: "\e710";
-}
-
-.icon-dash-dot:before {
-  content: "\e664";
-}
-
-.icon-appreciate:before {
-  content: "\e644";
-}
-
-.icon-check:before {
-  content: "\e645";
-}
-
-.icon-close:before {
-  content: "\e646";
-}
-
-.icon-edit:before {
-  content: "\e649";
-}
-
-.icon-roundcheckfill:before {
-  content: "\e656";
-}
-
-.icon-roundcheck:before {
-  content: "\e657";
-}
-
-.icon-roundclosefill:before {
-  content: "\e658";
-}
-
-.icon-roundclose:before {
-  content: "\e659";
-}
-
-.icon-warnfill:before {
-  content: "\e662";
-}
-
-.icon-warn:before {
-  content: "\e663";
-}
-
-.icon-commentfill:before {
-  content: "\e667";
-}
-
-.icon-likefill:before {
-  content: "\e668";
-}
-
-.icon-like:before {
-  content: "\e669";
-}
-
-.icon-notificationfill:before {
-  content: "\e66a";
-}
-
-.icon-notification:before {
-  content: "\e66b";
-}
-
-.icon-arrow-up:before {
-  content: "\ec57";
-}
-
-.icon-more:before {
-  content: "\e684";
-}
-
-.icon-moreandroid:before {
-  content: "\e6a5";
-}
-
-.icon-cart:before {
-  content: "\e6af";
-}
-
-.icon-delete:before {
-  content: "\e6b4";
-}
-
-.icon-home:before {
-  content: "\e6b8";
-}
-
-.icon-message:before {
-  content: "\e6bc";
-}
-
-.icon-lock:before {
-  content: "\e6c1";
-}
-
-.icon-unlock:before {
-  content: "\e6c2";
-}
-
-.icon-add:before {
-  content: "\e6da";
-}
-
-.icon-appreciatefill:before {
-  content: "\e6e3";
-}
-
-.icon-infofill:before {
-  content: "\e6e4";
-}
-
-.icon-info:before {
-  content: "\e6e5";
-}
-
-.icon-share:before {
-  content: "\e6f3";
-}
-
-.icon-sort:before {
-  content: "\e700";
-}
-
-.icon-copy:before {
-  content: "\e706";
-}
-
-.icon-noticefill:before {
-  content: "\e709";
-}
-
-.icon-notice:before {
-  content: "\e70a";
-}
-
-.icon-font:before {
-  content: "\e6ec";
-}
-
-.icon-angle-left:before {
-  content: "\e697";
-}
-
-.icon-angle-top:before {
-  content: "\e6a6";
-}
-
-.icon-angle-down:before {
-  content: "\e6a7";
-}
-
-.icon-angle-right:before {
-  content: "\e6a8";
-}
-
-.icon-arrow-down:before {
-  content: "\e72d";
-}
-
-.icon-bold:before {
-  content: "\e603";
-}
-
-.icon-search:before {
-  content: "\e623";
-}
-
-.icon-reply:before {
-  content: "\e8ad";
-}
-
-.icon-redo:before {
-  content: "\e8ae";
-}
-
-.icon-download:before {
-  content: "\e691";
-}
-
-.icon-upload:before {
-  content: "\e64a";
-}
-
-.icon-fly:before {
-  content: "\ec46";
-}
-
-.icon-image:before {
-  content: "\eb26";
-}
-
-.icon-panel:before {
-  content: "\e6a2";
-}
-
-.icon-arrow-left:before {
-  content: "\ec47";
-}
-
-.icon-circle:before {
-  content: "\e600";
-}
-
-.icon-round-rect:before {
-  content: "\e62d";
-}
-
-.icon-arrow-right:before {
-  content: "\e6c0";
-}
diff --git a/nezha-fronted/src/components/common/project/L5/css/props.css b/nezha-fronted/src/components/common/project/L5/css/props.css
deleted file mode 100644
index 5339f4a27..000000000
--- a/nezha-fronted/src/components/common/project/L5/css/props.css
+++ /dev/null
@@ -1,464 +0,0 @@
-@font-face {font-family: "topology";
-  src: url('//at.alicdn.com/t/font_1331132_5lvbai88wkb.eot?t=1564973526855'); /* IE9 */
-  src: url('//at.alicdn.com/t/font_1331132_5lvbai88wkb.eot?t=1564973526855#iefix') format('embedded-opentype'), /* IE6-IE8 */
-  url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAGCcAAsAAAAArKQAAGBJAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCSEgqCsFyB70ABNgIkA4NEC4FkAAQgBYRtB4hHG1uKh4IA5wEiCnb/B3IUpWGWowg2DuQN4wuz//8Tko4xHJQbpKLWD0pCIMTUY8KhYUdH2OxGoDCIoAkrT8PELFcN847l8XreJl7ehHhNVseIpu6Z3pLaLeIMLASKTr4QluGoQuwUGTR6x06biP6lSXqbtco7GHIO6AXbq9/0/i1uZ6L7Hz2BjRySFE0QYA7NgJCUmnKzYv/TnoZIt5rdTW2E0lJoUiQhlG4aBHoghdJCSSiiUhNEhSggYEU72FAsCBYsNfwdlnagYj09BbGed38i1tNrIQCO5X2UZ4+qGrPAZlMazaDBFwDzvVNrRrIPZmQ7vjMsQuJFzO4xCAIFJy4sUpuf0e/MLwkcpyBbhsJCoJS0vESS/N59If0jNwgQA/R7v1VbYG1T6z+B7YtF+cZFcymWL4afegHCZg2Ik+A8+/9nTkttYgtISQcEHwoDgCNIN9fcjDkidYrg+Y2Rkslu62+B4SAYg7I4hTF4h4Xg1G0zy9GjBcRKINjNF98phs4uqpCrXFQuqsr/lzOdOeW9mbc5fRAsFCTZLgEKvAl7w6yLdLWuZGrZXCIYatPv4Qq7PpLkicVXXE59yaqc7JvDlVyHgSStx4CqUKjLyJeb+vDjqpk6W9W2SRE+8uMA9E1qg9QuXYOT9LBEDwgk1Ne008fr2UlxMXrGJTaqd9wlJydiBMy/6ax2RjiA1+8tmAvcZa2P99iQi+ZCrvZtV/3/ZyTmz58B/REYvgaxjIS9jIT3aSTj00g44Q2kSylWM4PxSsLepwHvPrRR2giusC/H8nLTX9FdXYZcX+676+qr26PITqS3AbC3y8olNSsAFqi2SainDQXKQE+1nza/zYex5vukY7vlE6GpISIhHjOz7a5d5z9k0yq2/XtNwIu0W5AQ4UJyAU6NCIBELtoF5j8ubxMPJZAjsN9DuLsgPhWF0rRFwPVgFCcME6AugIYLdsJjAPApvvsRfyAgEAcgEjoEglu1fjVzzfgneBd3ECvJDa2Ale4YMDkRIAqgGaKBqA9lMvIdIBFuFoSg+vpFBbsA4N64GF6fPiExSRkFLdrFipcomVomvVoLNVumzQrrbLTPIceccM8XNmp2hYrUU1x5FbaidW1v17JXu0X7vn+vzvvec75xv1VQC5/mGzbH7EyToaRpUXunNVsPXhUT5enNDSh+/YO9Ecp8UX6IP7v5/M4RcBFcbhprvwXub/3lqk/B5NM79X8SD9Bvx7B9izJNCsl14kW0fOeWzXrwZMiJfWdyPItk61IMDKxsWzpdKfci14Y6I+KYEootSSOStKLemUQKFa4lISGbJUCr0ZxplRakG7Ls2qYmTe3utLjxKkNLQ6d+A04NepAqVa9NI7a165J14EiBHnkFRSVlR8q0mTJt0gQiogATkwGI2Sbj7xCwPehHCDYgDMOIwDZEwSJEQyZiYBSxEAWIg2OIhxNIgBdIhGhAEpxCMpxDCixDKsxCGjxAOjxBBgwhEw4gC/ahDZxB9iBnC3iDdhAJaD/ocgDcQEeIAXSCWEBniAN0gUPoCluQA53IhVvIGxAfd6jyBOSiD6zA2QNJABhAIcQDhkAWhkMCYARcwUhYglGQBhgNXSiBbIyBBRgL9RgPlzAREgGTYQ6mQQWmwx1UQRKgGpIBMyAFMBMasAQiAPWwC2uhERfCFFwE03AxVOISmIFNkI7N0IfLYB62wTXsHLrQCkATroFqXAvN2AWPcB204Ea4h/vgFR6EDByAGhyEKjwErXgMuvEE9OA9uIAzMEiAgWcE2EMqEMAaAir0EtjBKgJPGCGYBesIYqGdIA7aCHIH+/Kw7KBCLEdoBZYCtA5LB9qOpRDtAhQRZkMxYS2UEC6CUsLvsIfwXyjjdyfU8vcejPGvFsbxX7FMiuLwYgLAB//4BiDyvzMKjL4FT1Q3+U3r5guxQbeDGdEb8swGvaA6HbHS6jtsglR6BWkckLbOThGQ03isnBBDck1NDjicoBgLQUK0xTzFFUjL0xVJLelC3jhusQZ9jruUuqtlk50/JclgHXI9yWgIVCnSDz3uXbL3IUipMhAuslgx1Tw2phQZVRZRlSiH91/blYGZSDhGIdZZBcU3/5ibZlx2trBvPZPGfSFso2+LiI3InhAQFfn9NNG5NNkYNSNkqCAE8JAVmEXuePZ2uYcZgeiaFwgt1rnZtE7U42tXPzdyvp58B9fa8VDJEilLc6iXDknkF36U7z1+eaIuxxd9CG0mqy5pPVsr0cGOQ9Zu8zazahOaOkvP9Z4wDSUuPScqQthSsPxTO9fDOHbziSq/mqZyeN3bvN3D2xD2HFt7BH3Pg8vYNnG7Wsfo5du9b8ltMw41T4aFvdiSIRpVog2otozykFlC3UMhdV0vGf+V4don7z8PmmAxcserJX7CthxbyiBL7tvMaeDIouIgaXAv/xZJQ0B9S3RZtcqVUg69EPYdLNni5Pv6+jMGj1iv0Y1I9buyJGEvoo2O5qJFPTjtLii0tFlE5mLQXR4ynwjoK29MSKoLT7RqG5cXcVr+9fY0q0bjBR3aaMbReqWoqitJPRkT44wiBI9j/Gd7iRqS5HyPd1Q56y05t7WcSowp8H+PF8Pxk6c21maTGgHXrwsVWpsi3UZag9JCUHiPtVwK03yu3fKZLYadgR/zM4qBrtLf+OyShsYP/GW3FMf2D4PoTInZIjeRV87ZIqUEy4CQFu0k02yezq6gZpbEBiegCVsXmMO6pE1DLyzK7UIj7VJ3r37eoOv7si0tMLmBlqiwo0zfdqx9FNk1ubLW8qSsVWN8YpMLIBBurihqHFOhPRz6PGtYwshNqLTsrFWrKpYLU/l1D431aFlfia8vrC0vaUh3fc+IOobme25hx3Cv9iXcGEmNkbuycmj8X4lvvspqcVcZH12RVWmpcDSnKW/mA4TxgjDteh3cz/sm3jtz5lfOC+W1U0euffKAhiJHlt1yHMu8Gylrok3TisvCTvJzqL9fW3sSYP0OumqyWR4vcbqACeDKvqHfhj5Df/ibB8k8pBsMWZsVypwaPRHvJoTnbkjOFu9VDkdwtNz2CUVh8mn2efpZ6Krr0X8X2l/1D23mmAbwcB5R1tMMXodnZ6uGZc8aOtIM3XWyAjWsFxhWcYOFQ9GeXdwqU967Wxh5SKmESNK00hgQsr3x2v9pbE6JyXZ8f+dgF2FHa85UvCLvYdl7mZ4DjFZP7Mun8sa5q3P2EMFMVGgIILiS8trFlEEH466FLiUBXKEdbog6QiOei+NAbjPsdRivhagH1woGKwX2kARulnIUGsA/X4kNg2g73Ys2Lszsd0b72tfI9CXSZ2PLusU8Y9w6tVm53VGVIgGzv1MplJJmlWGGfta8rYDQVZvzdeXk1JfTE1j6IaWk1nou/RE4gBLJs4XckseTjwZO8kya566oZKSUmb1ZY2kgBBbXDiOj4wJbwEwT7KgBvtFGPGOk9/JPS8vl9Yn6HIsTepZedCGRrfnNbGyridEOt2frmNvjd6QHxBDC5OLZ7tR6lH6efZp8EkZXe9Jottgxxr9AqbZKY0vuUyQdZZvdzeXbr6DfKu1XaAkbeBkWeo5QciUqKdnhDAsFNlRnKKbUl2W0OeOCI7B88o9+VP5e1+HO+741VmrXBbbSVgEaL6NeZMH1p//Wty76x9C8+J/HLksXcuMaXnngcqNK4++nn4DhhbrLJlh76kIDo/63o5cuREIHte9FDhY48SjwwhaDJ19rW9rWmDltTX48rOwbMu6f8HwC5eM3lKMpogpRSofu7zAA+cfN3gRCp16XFDJpbgIuDfCLqlvwtxvFCTYcucoJQbXk2HjwPkFaeGbT34fLmRqGhvKCI2+5QpbWejWkjiIxXMiAs5omb5S9ONBrX+EC/4KKghz/ljw2iQtSwOp3lFLtYjxmFEiBRiZI/iLyV7BKcWDnay6CcxLVxCv3g+zYQpLKRcIvBciIi3OEqCKlcmeB031Ig5KkCK7nRDiA5rMarMUGo6WFnVVcoVlmtGLWUPWakrZzYEGqMee/M0JnuBWv2/JBtIl3oMkp5VXALaHsah+IlRJ8Fu7lMelZjCBrL1mMQgHUarioLS9fiwGRed4S4o14Re9E51xHyz4G1r+96ZB6SZMiDCkE3zowkdAYIB8YjS9HZwzqDhRm+ldetnFB9G5kpHC7kXF2ol3jJUzCfcI9V96XSwzxx2FOfJZNIeAkaCn2wjCo4UeGux6tQq5EMYTo7QE4946khDgBgK3AV4h2jFxhHmmY9c1hBzBLcKcHWEzjgGR6Ch0fCtvj4UAkDNUXqlapoYnKNrOHuinSfPPVCSpbhCMwhW4KvyDONp+tA69uenPsE2I42em3EgC3MYPXJAhNOdded3XK0q5tCh/fnOA+DLd68ulGGgsij+ISOX81kJiJYxViIBSFLrWhb57W3bWgLVx+Fgpb28LDHCdkS5/yLt5X2wKZlZYM3WrNvJgVzWyJx1uH8igWNLs5vzA2Oek8JOuTxbyIAYILnECREFypdoTwHYw1pFtb5v8aVdTGnJH5V+2P+lfrgg6C0eE6Oj/xzgJ4QGxgeNv9YQr9lv2VHZ342vLGyOLMEkeffo/TKxtqmbiasXBji0dTK5moBpzW3Zr8TPRA6bcnAC+hqeEM98RKAiATDWfqDwiEt5tT0bdEOPakdVd40TpXTNx1IFAPS97IvB4uLKRuR3n0WEoPSSxqCGB9CWX/RERPAEHUFAOGXG6A9iBaJR2YkP5r/PgDjeuqzmfvUY7Ero0iaVU188Qiv5te5IO5FQyQiZZL9djtT9YmA6fh60h7USkFLN3TVAX2Cdy/GIZIhSi3Igv1a1dizTK3X/uR7PWKXueCimQXAjhpy2ojsibDKniRlpvAUzLu8JPdGZCeil7sLvOSSXuWzldonRtQucfN0UvxFiMsbZVAUZk+gQhi/gsM0M3OIizxz7WQL1e218/EQepJJEXQ55Z5CAGGxBAL/rrJxj8Qqh+vij3mj7iBWfGY3Yn8zFCm6gbABF3DECo3V85vK+ol6kFMVptypB1p2WfTsUUYttFV15bFYKHG2hz2cQy/roxJkXPbPzZ/XDn49fdXxQ+YfsAd6aTEyJJJGh4iRd137zEMPnt6UOaAa/R+WRzszn9xBHZSH5vdl0PhrNXk7A91V0qQvnpq70u9l24zyzle1ctZD9EGeB6Kp/BMv7B1/wXp3HJrRSvx9T42aYGwtnNP4QxsBck7Ms/5bWHk8Xfp9D1nZVXeVUxOfJUoc1bZPHgqOXOGAT4s5Ym9t9cu81N5cKaWYXHjids33aEaqnN2i8ICciDLbonerFdPMtlSO/2GT7y0VIT7C5ZYYZDfxTVI0Z53mLR7rzJJasXma9MlFkvdHarpbkUBXjdq7RPOgxNWgEadxTkVF55fl14U85rlLiCK4PplKNW8i+HKE3WlYwahGlNVKU7mvGwRkGEH8t9RrUg16T4rVrAEi7nSfqIsP4Y3ruQ7jydJdoynT2mrFOdZSQ42a4I1FB468YI73z8eg8LOc+CoScHdUCdXf0RFLwG2ah5iUVY6Bxx2B5PA1hPhULpqqtRF9wdfO6ZJdXxBmxBB+P+FwF8Lf47/VUToX0uxwT9KtmBtmGlNgKGSjFKW9arZ9emYAQXXqDFLpupC7zB5CQIrvWyUbij1tmwyRTzFgZeEAlakxtdu2Vy6qC4W3G7OU/E1o5VFW9GapHSNHKrFmwm/P6agybsOhWh1m5qtu3T5mwU0b/46W4pbcEvBBeELo2QgWwLeICEKYrSluhopWpQfJqJzOZi+qvfnFV20pIYoaHNkNbLoa5MM7t9YWFIxXeiQWCyxJXs+VF3SFNnBolq4Ge7d7i+4JVWTL3rYrrNM0ZzrMIy5boYT9RI3CTH6a+pM1hxDyWR/4QwkU7AvH23OIU6QRTiaHNayCtXhpsRyCqdEth36OrdJIftrb3GNznp3SGA6CmXFZvEjAEnKLzm8+S9Sq0QbDSZG2EpBC2XSG52HYqRnxTSkR6GMr+XXlPYWPdQBosVtavwyglFREWJ1htRdUfPCA/T9r1JNYvAB77aih9R6TQCFC3cOMBaMwcEF6c10QSCWdP//bPuY+hd/Jp2MTQmELXxLfJca1McCcHShdDYoMWMuhNMkL2IS+/ALRC3Z5YJHZeyFnu7/anOh304ZPiVEamqnVaQv8qzET0LXO/qnpLp7vHeyc3Qtq24f7ZzsHd/qAdOWaQ4tRA2Aifa5pCIhZib8hNOX4qhYiRtwjUep6Ioe6FoCfMNUdoN1cYPOKL75sasiJ6u6FLGyiod7hlZ9V99oVOsM1xsaOBJGdRIGTHYz9ZF5BgEcGjGxAUOTg5rmdVSR+pbOLUJEsjpQSnCNfsP7ErATXQepGVD6DYKqEKKWXTJojaAb6ALzBOQdmNzvy3seK20pdo7ES3Af5N0bx65S+UcPUCW5wPTCg8XOmeKz5bRtdKCn1brLuY7G29Q7i9rh4ZC+41wTz7nd5MGrskG3cRD5FNTH/ESU5i76udixmlSrUa2fXU8FdVb4TqWHNYc2QDocZ9YuHbxKSiEb3C04rm8dRpas89kX4txoaln0GF74Sb3f3/j5jFJj21y+VHVw+6KX4KnVm1PKLovwnn/LFMpAFN5rrT2xIZckivusLEMMQHc4PpGP8tw1BRwMA5My218ZF10YD3Nx7in1QSLTXYKzzQ8wLjuciZmBV10mTVUBOaP1se2JdJzzhqQYj2JLzqq623a7PXVv57DlVl+R59R4W4bPpyn1lbMkuzb5xHnjTN/t7lEluNS20XljT2haezmM5WP7DokegjOS3CV+xIKHIont9pSTGJC3H+7rUa4rd+/3eiS3/n+pr3BSPnbUFXbdZ+99k19lp6fmq87BEgfOaHf6inU9Lj+/9yTalajqmysVMLe68/bFAK6qAl7tTjF1Zzj04mf/5U1OQamWWqasz1k1C9gEd18Gh1seTIVuJpJOzUbZVGOLORUrdZx6aUpyQWw9jn6CQKHPXQn0rTRXiH9cj1Cnuqq8++6Hn5ppPyFwVYXYQ82urMjnLz/76WvrUibKyiEByTTIIBXAoc1ccGjlFHAEBNGm72n5oTY6JJ1lSx59VGQ7ytweWkh2rqnUhR/ylS59q1mNYQOFK3+7+OelblIoQEG3VpJMF3uAfw+mAUKmbJF7rACKlERu+ZU/5Ly00UtJVamOYBVd2i6+k0HgWPzXvhDy41T1OnNK6GkPP0rTVOHkCa2gG/TDjhJQmDil7UWyhYF4Apj9dqFwy0O0lZzwd3yUg+6Xgv1dVbPbAXBOSTY6gp/HL8uW1N32UGikEWstJy4AxElSYEE5aUkIFsyg8hm92tQmdOV0k0MmaHwwJQ8YjHrS5NM8kY9LBdP4kURhACCfpCVYGUwIkKuhuzJWP2EcHTjSUFGjoAK4bQYo0TmbNvCCfFwCxVzhRQTDwAJu27vncY7/EQNkF4CxdMRgi/df+b1sCeqJVEJBcUtci5Cyy6Z+gvf6/zYiz23yKwmPPTgeP6s2jz3ei96S7iNh/Pnrtj/y6afmBwpJAC90VksEZqe+aoYic5J3v/8rAElYP8G6ODh2/7HUx4fH+fMnEl1RwzCScPOtNF4+6N175MuP3Rhj0H73i6BU95ejdz63BBnv/7RjkPTy/Tc/CUkJ0VJ27LPeYSr8dKhCAZM2hc4wBI2kSiksSWa++z7vv3mCgSSHgcNcHTlloqIT55RMKE75qdw2fvKfmKWVny6TP/kGd/FCPYdeMEKM5tCSe59qYoBahEFm0LFvIFKBqnSunKyV5jzD6eruu6qZZ2By92evME71Eyh+IikQXklqBsKW+J65yPJqin2eTbudPRi6J0MALcTTgYCkn863yppuT92XNwvXAPwPHPX+TZn4tbwTjulGQNh5rigV4eQ/2JbWHi7Sybqff4SNkbEJDCYUZqTYnxohbIJ41qkRD6tCLzFcV4HMhyULvUeRESgFuPZG3pizIFeAZlh7CUEE0JcYRL/fw6Nm2Y8xCztrDaP5tBf6OkKsPzMSCXAT/eFuAwl6JWxEM8vAeb6oU2KIcOPS0gAH2IMlBktcWmIoE3tMIZ0Muds1S008RzVJeWd4t+2C5CXt6AilyBLvzzZC1u1LLceSaK44I6TlefzrXeGsIGdw2xekvmrx2xQQv7lpVSgGz7ANyu7KfjeJyVYbR84qMxsIiEdWbEwpVvXeqN8pyju7QcZMaU6e0NtE1z0vBBU2vCPzeYyXLMP66JZo2uYuLijbFvS4WBSVKOrtRbeux08sFwaP1Y1in2rr4vza6bro/OxqOWMNYVZXc4G3YpnATF7MXgx8mqH3AhUT2Vx2dpvfYEaM003+XZftNLOZPP3F9GTrmbn5Wbv+zNnKrYOR5BXeOApT4nH9d/DNYyIfTTu8AaKKxEa6FbwiZX3y8osejPdD46wCHq3HRtvy3XwYjgzc+CXbU4I3sHSU1QWj6kmjaTDhHhcNxAWPkArsdRYWM/cyW8hpelRmV6Q8FvW2gutZq154+P+ymWCV5de47CdRD0YPHfOvQVQowEpzIPxG3rK+bJ3NlIVYtfWGLODo5jVWJSczLxUx+oDj2naItZ6uqi0pSZ8Q3fC33YY/PC/M95BusQ/77DlUa/vjNeVi+oG+KPfbq3l7bHIGj7Hjm6opefnbvlwwM8A/jt/oiOtLz766kj8eto6IDdZsnrrPPru6uUk6mxS1p9HqX1RBeg86H4lMbBuBEvGYKAAA3DJP3lXhs3Jd4SPMaxnHoouydUiAR1cjKXnjnhh8VbBMWcJj5ZPdeGrrB4FGGy5ybWhcyOXwps6e+TK/N63fW1m0RsW65txMEc8BsMAnEIiS/xDALwaI7Keth+2QVrtEIl5LgNQk5au5oqFn6x485KBZUYsSQVcVcAG3FCYKCJscObsK3GIYECGMqnTO2kH+o8V0B0pgUoI2fXTVuHZNZ0/E5nXrj7bspypX00Yc3uO3kLbu0U9ZzAlsxKOasYPjt1Fyy4J8JkjpaRMRe19bPBFI0b3N85uBA4w+dHCE9v3W2jmAWfFSdGBebPmHAaudqdADe/MQczbW7yBXGiWrAVOx3G1FK4J1j60p9kFfWD6823VWRsr6W91TdLM3f9VsGtannm2IK/QpIBv3pkLLgUIHWA9dnRBlQaKlV0T8izelsToKb6LAXkGkEA0NgIHRwYGajwpEKcE7kaP2daFeQhgT/mIIFrQj1CnqgX7CLhRLm5dCBK76N9NTYQwzUQZY7/LkJMCU6PA232mH8c9ayxP3je3Rd52m6zC2ONsWQj9rcA9DvSj8o4tgThd+bH1jHjJc93zWRbsAmj5fZi7hqTq3OOJJ0pSUDNHINMbFqE9WsHDG9MBviZtFjriS5OyMOOjd/7ujhzI717m9F8mnt5A0K83ue3a46NATgUw8Oqii+Pq7RNmlnXBp7Zl7sH0xj8O9yoo0WjylHjqXGBeWy0jDEC1BY7rwMshaxU+QvMVGg9P0UGgZFNlGruy8ZTSvLDwYQxWB0eQtuT/3JfDarDD/GnFfbo96UllRg+uTu4LXT1fLYUsSBr5n6zZEwJw1oQO3l9+Hfmhtt6EFSy5JkQ8mr6tVaMM4crMoO3oV4CYR7nLsWl82AD4oEUOlllhAh4Z4MAAAk4oF2jsK63RnO92+8pC3BprRMI5QnbOdNmgoNLL87ZHxsT9qsoKqW1TVBVCu4iPsYVCRJW7qGaJ9EcrPjmeQ7VRs1Zt6htgrnLY604Oo5i1x2W+atvOMb3PnpDkdnQQPXo7tmOY3gYrodyZnT+fNZ/yhEClrMneL3cSMuccp7Roj3xYIe5gSFa5momr+bQIQsDI2V8pvHIyDWgCrVd9NmUT1qYnZ950jYaRXBLT3ZytsUp8kTIZl6WIKhQDe2RxEgqACB9XlQ+23qy67er7lz6sA5nqd/RRxMOrAU8D6xnr1M3CNIgibYqUzyLE8z0lUWV1RP8lVhQceCIF8L1Djhbq7xLC55fccY8F2LMNy7H1FPSvOYGBmUzb4gXLAM5WS1rUffZK3WJnvspKiQ72fSrVIIoMrICdNU0BiPjimxkkzQfyrsiKpzSqe5MH4DcHaf8QIAeEq4skFpyenXEV4ykheAiY/vegNG1OjKelORkeaC4Q1ecbmGp+Y4213DUXV3f1xBj+gcdfWlXDMtl35rQGMjJhhAbpAOfMESDrORM/QpK7eI5uYOH3K4d6toKy+t8WvNNlE2h/rilE3XHkmB2NB/NSVChGE9XnlaKy7FaGV9iVQw8zG2aoAChBbfA5O8vt9T5dZIOHEteW5iVVpMv7jZUgzS3xZy5L95wphuJR9aE4Orbo9euY0nYIfy56yysJLcEvJPQ178+K+t3+YkJofNlTrfVsiacGMLVs5mN6C7ViiWfG85S8dKWfGVzqeGTEFJJaE7q2nMN7Qav5ertOqSUGQUwb/sqYSjH0DtTxL8+T35obf8yrzKxidkOOoCpz9ZbQw1qjoIilLDFWT6F7YakiFbOiiv0CK2uxn9T0CWgI7KWDHZPgbCX51x+VY4D9+eusJV3rVNW8MvJATARI4BWxqK7fNflD+84ECYkvo+CbTHT+ytXklKCnNXR9DnoxIFessHrTfY4GB/7rl/kkdNS1vSw09KFswCV3UgA52vJKPVfghb8sd/xNvU3liHm9hgX/7SCDwU4P7TPteg3vybxxar8t++4S4rBwQOJ2sU7a4Obu3sWNu11Tzh+gHZfgu5WFOFTMZGYoJqUEKJ+4WY3aszcKU8BRzycC/mDkSSqq2FSNbSspJyxgJjeY8eqNWHhntX5qw5+AykDl9+c5ZxW+zqrBbo16eu6jw693V75+DKtgWzTu8RbUgrsUL55wMrNp4t6wdHhPu7SQtB2a9FklKwQXVRFEFiZ6sZCIzEmJciuf/wBm2I0VX1JExMPwNSFipZTCTAVLTYZlJsRBpxRkwMx5gzN2km/XT3hI1sySid1TC9eeQNIvEjzqmv1TrznDoez/jgCR4jTnwRi6W+DGJAKfkXpAauopDAZXDCtmhtPjMKuF7Ln6VwVYm0kVMQkswg/iHjDYs070Zgd15BThD4x60hMmzF12SY5peNJADJRTfei564h2oznRHEB0hfOaz5nXEmKbpC1fbRiwkw5WhPt4lsy89yxxByk1Mcp0PO328avoDS+DgAIv6Cjy8LuOwOSMU1a3nE5LuIjiwEix3v0HvMsz0GgAq/czcDhWdvKAjaG46O72Kei1geglvWCHeUabX8e5CbIAeMsV4EwoN1ZHP4zKg5HJ4VrUUzGjIes6xpC0pDa7TUeMD6kIDvuDTsnknugdIL402QfbdYQRwL2nFkpFpIuXaFVEhQXmsi/jBuW8AxtjFQsrxTPvfm71XeDjcC1pd6DxbtbEqDPjTgAskMX7JvcIbZNcGK+Hqz4V7x7esdEKjj1dMT7earLFT51NnzsqvYIugdLJ6qitjNf3ai+uqiX+vzmXBrpZGMluYaxxNoYAgvHCoy64Ep7tsZHZ1VnIkMj8oOS62j1wlZSuNXZeiJete2rgwu8vYM99qzswW5ud2olxZNyACyIEYFHITP8RgAWBYo/a8molqGqR198jUnaA16QpT66+vb/i50ubc9QaT92a2ClbvDoW9t3uDwnuiHf/YsnJklUBRZ+6icLjCIcN1SlC0YyoCvhjoBnJSLDHvgIKPndIMArXEwq3HeCLpOHFsDDvd/SIAsOCKDhRKSQBChMLKw5oEAsI7OSUjxWFVLgKvShY+gXLNGD9R+orzugn9QZfUoMd70J2k5W6lhi4S46CknyeucnuJ5yfVupED2Osk07epgGQJBR2oKyx39Gf27B29Fg24fOqKJ5VIod6iJff3zbaWLfo30pu0gtDOGhY4u4SVLbWR0KrJs6dEgoN28gYSuxZYuoRzmOlc9ZPCw0pvzcrdDtKjVtBnP9sMqXQNPWuyRqGDrDlFsbvkitU0Cuj3oGiiby4A39AvTOGZ1T2Gcu1u2EGAyswGd/jdgjU407Qx6pFsqGiW1oVrZSzwN0O9Imubj9iqJjMbBcLvXbJne4RcZ2obh/Y2U26LkNyUzzyCBVbBs+/B6pEvlIHHYri7wGfJQbdxytficmugomqdRWWNrw1RbBtePwpuUqkbgroraLcDB6968+H7D3rjDnGWbwN/ALhF8sKNbq+9sh05yh3OygOj7RcFiZqHhxySnW/9So3NifHTxR//TbRlDYZs2ctKv/1OVh1A+2bXcHrmlXGvE/XczIGwUVLiBkGJVVN5wX6KsVlkDesfm7OsYPHY00+nC9DP/3y8RMPiz1JeXUxB9ulN3sbBRNpiCf5FMo9Hn/plJnZl66sAOCj8ckvwucXPLN6p/oAiw8WxGSJ6LIgMjZnZEnecV/QR4gD00qvK2H62jpXZ1LyXHxh5HGNYyPkVmXezBuKKWUm0Sg7z9+jb54BXbWmyaoORjMboZveiJTrGtbgHu9VSsa1QYpVU2qAMXUwROwlD09ij3JIHsbEANwyhmQXOfmDa0LF02IymttCC8x2z7nvI4WL+4f6gpTfNex6+mjb844N+kJfetB3r8fDxwEGY7s1BPGs7vzefuPuJFuoaGg7/EnvbHc9t1jwr2f2VRJmsHdkbZ4K1hmFRolqv5VwaSMLn9NwsqgIkXRzcPTl5JLFRVu1hVyT3+ZuxkeRwzk2pU4JkeVw8vEafHdrkjvTGuKe/gXRLMH0DSArVQdeFDN1yduYMx6uD5QlXxFu/zvGMi0VT4zH7S1wmBJIvxZQ9/IWynVJyqEd/bo8cf6CWoGUosvbbleSLXpaPRq7p3xwnJ0vR7pbHrexmOnLyS166B7xAGVQggUDwyMeGJfuhENE1YZUoRZE+QTBur+rnJ9eiedcyHBU5aVus/pJHOaQjbatDBIZJWq7vZpxAbVPNP+3WaP+a6Hv9Y40WLnVNL2v6Sjts/+Wy+yw67S5yuhad0DColzJrPQ7H9NFeUfjaJBm4JYxX6meLorSra7qOemRScT8WvacrPA14FUUyyybZehkaowvY9zIOTUtaUEFB6j4OIPgcOAEvebfMQrU80DNMAUGUbywX63SnQ572EihAU1phQmE/RqwB/FVz+3RfN6Pt1GBgISIZKRia4+ID3rHRorrPS2JXVVRj1LotcO54b9v1eldaYOUqYXz9FrDjaswscGdo3h5tmtV/BRByz/id00PJonbPfJ/ppmZReoRdwd/xg7hmXjN2UMBf+h0bwPXx+jrdttpmzIf60CBYDBYEP09UmAdwCtwgXmGaocANOMW6ujngFVd1XjItuDicReSdd4p1cXVh/XabUgHc1afh4UMNXfPgoYambWA+XfPwQQz9twvnwJ39kgOhvWZCae2mpIuovotEPfgfKCHeD5EFWhasjaXd+EYsSzntH5Hd4oYYgwLq6zX0Mbq+rt7AnGYaeAUrfKSQT56C9kikFgusqAeIVeAjsCJiHzHDRPOhmaAHkIkmFjaYHsc8Nk1MJLlqk10nPznhZkrCRE7Ge3ZMlBXTOybrF4jSJeF4C4NqeE3EMwcIWvmlDajz4mq1eRw3a8wZr71LrTE6Gs7VWB1BmNLHe3yYpCFbxt8+LGQNaThomdVR7qhxlPV698o8GGv3HxbWzA/rsQV2mX0Y7W4m+lrbB+iLsx5gKwGog2c/oKBQj/7h/A99FfXFDn4O1NobSTiwHfvN6QcmpYSSqrjrCPoOD6Je4ZCrpHf0C2UwsDsQSEcoKeRFxxdzaD7Xd/4EHsT3wenIrQmIKfMcGSaRhkfG+ZjfwV5RsHKyu9RjBkBgBT10BRQL8ZvpHW4mBpvN6OB3ZM5RIozymhkN2NnAbzjsvalXblrOYNjYMDpgzItl7gFCgdnHZsDGZ6Qf7LhND2yAzQMzLs7EV7DwmidXo6uePkw3fHuRb6CPHbfiLXizC8PHDZYC1kb7E8wbjB1w18iPXYiCjsBdN/Cn5AmIf7oJPtCPLCEtetYalWnAwAa3/AP9TcPP1SoqJfFz0Uyh5kX/OzJKIo+OtIVMGgXBx7a2Mbj95Mn2kmAFgMkxpHtsrBsSYgBRa0UvsXGf3h5arLd8o7fYigDEKhaLpDTR2hmA0U7z9vp+tDEiPqvQZRX1aA9JYzS3+jb1iggPCf2N+L0FXDicLQbrVPPU+B39FvEWDdAyJhgGK5ihjY/DObCVlg+6ugwysJvVbpmhc7ZoDMynDH3uIzk5nGFKM6UcfyB6N8CeZWPiEVkzOnsEjGSjFsgW5SovRqHPfxIjFhb7LLWfPa7GT/O/LBg3TP8Jj6qI+3F997DyIcEAA2fVuIGquc3P/8Jg/nruYP4DlzinI0MWcyjhsgFbaWx0Cz7+SyG4i8XeBZwv39Bv0814C/66hngufKnK+TgkTuaI6Vtx/dDgOkAXgbX5EZrDQZf0yCC64zzyhttXUTgcCtJVgziMJN0E1ji6k99EM7nl78aN0TV37+npc4j23l1Nva8Gf7WsKrqHkutZUJvi2vJGV1CTwhG8RQn6R6zN171pSXGtLfDMpfWAol3qF47neOUnOMte6yychccOoYS1+V6uKSFfMJPLSclptwX4groZmMUKl9mN53BSvArQX0JcU0Ln1wrnyvGasds1PMwTyaUoYS0x5ZdldSa8ch6f75fD2WDtLK0bwLtZuyWUS10pNwkDuRZeEM8kP5sq/ZKldVB3pZ6Vm/givoUbKDTJV6YSRL1mx4AnMdInEYUrsbrNURNeh11ZGPFEdUctk2noeouWrpHJYpyDh0+wz+q3D+MueJZ94n9BzjE7tBb926m+UzzqYnvQ/8KAeM7h4Dz95YRsyGSCSspeEIfFGUsUkE4HQVIYRDc5bWAfm5CxslcLnkCahpXFPRkf3woUNccze0UzQcRyw9b61RroCU3b0VcqyTAOKQQlqtfPkzpD9VvDmar/b7+flmnmrB0jtuAO03/CkTfsftPlfmMlG9dvS0+w3ZjWsjAjgV5ueyVaodSCUWCYE3s0JI8lpc5NjqtjtVCluDXV4Ghzr2AA2QMhPMjqyhOIR0599yIDLrIro6+HlTtxz37GdmCH3rL2iMe7ItwLupbKCeUE4MUwzcfnWEfmGFEegbsGQhGHmzMWag9hgj1B6CFOEFsuqQbdyG/MxElCxlpRLRxzMmy+Tic/wFYdciOVUgcxx8kOV7DV1Vysgex4hVbnhnnH6d5qYllZpnnzpMR37Gmi9IJp/wJjd7fBBkQEnEg2c8/PBM6c55qTwQAYY1OfVhBULSVOEwIJ00SzIckqBpMNyWD9b4hRuR4H4gR7kgiIk+wJokOPqoU4hg2EvjnuU/a7NKyUEvRnxCZHskGuYaz3HftdL/fMGQUD0gHJeel5V/05ZnfMG0SBwH7qb5XOMvFiF99e+Th0KDB1/wzXJUZNRiYJKELibammQC5wA4GaRhWaJs6COmh+Q/hh5jBuyJfWAWWJaeihntYsaauU7Ul7h7OYs8wWnKwtIwNuYE4wOmDPoCsJPYk9V29tu70tYxUbP4yDxYJnEyyEE4ZvYRtiWwuT3WXB22aSFg3FDWsRi1uGW5VGF9s86sdHcS12kOAxPz46LCkGl+TRDEhIl3NUHJGpgZYgwgCYh6lR0EeAOAoQYPEwAPLBHJiYZQTN3gTjpOWcxRJKVfPfm9gAWE0pAXuW9tm5FBzVhWQG+9dJMcQsYcoOrWV7hjS6rBcjLZkTEpJxtLBsMiwvrCUkpU6IHskOjffNivOJzRpCB9SmhnTlhIRYRgzhelonA6jEESYIF8kdUyemOsgxRGjl94orZOr1Zm7cwqkOygXiU5sxQtc2Rlw46gT3nEudT7xJuIi/Sfyz/hSeHIPhFn6fezJ0RLsFpjl1dZWyJpmlnikkTLAmCEI0G1jwLu7BNTGNQPR8gMVKTeUdOcL7c2261vOJd5l/Rko7T1BVX18l4LWnZPiXeT/xXLHc4Pxf16g0nhM+zakdXDVX3dKRavOZ8AQvZ8UXUbd64kSvS+87IiC8E1VMEABQtTGZTh5OzX+VL09KX0zEbZmDdkfLFmQuYLfxR3DmRx3vV17hXx5/faKUzPRQ9dSeGbI6hxb/dCFj9mIbCA9BAub64wzGv6AcMT9GcTioanvM4XTHeeS+J6MoCgUFaXRBdJOczB5sB1Z3AwHJDGZiLUDYR7piLgwlGkqT0b38BxsajaZjZV4bAUXkLKKAjaVex0yNxg0P+F0paEMpSORVKp7Vq6/KN2cmBbS8StefTi1UrQ5XApAGVoUXox6n0/X3A1qSMuRbrqqHo99xyelqMWrPs6ALyNab17vhHnjs+oYPi6RRrHk3fHN0h8f4HjEqXU3mTm+l839x+08BQpeVbw4RF9v8zCoOFXM8VZ5c8JZ6CLyD8NAScIjaAH2mh0zhZ7bSnqtvoe87YLqgXSM1FoGfQVH7wY8R8jMHaDzaAJQB1dXBGQEaznphkqpXQPn59w3AIOkmg70LZnnO210pwCKlXcDSNsPG9RvTUDn3FfeVnxOCwIUtS4ugGDAv9qfFzuN/NaZLNEQooaQkETrDOfVcle5MDVI8+8zV/c218Tr004aCiF41VF0Jq7BT1XHxtrYJCdU3OD/JodxcSC7WrBywzGjciLKGysqX3JezfREUXNSyrAgu/aQKyyrnEXH4onRJLglKLNGPXVQuICj5GZqr/Mfrcnh0oy4yfPGaeZAa51oTr8RhExO9wTwoxiplFYGxS5QAZ5Ez35n33Pl6ZWrCtc6GAbUGOPOc+c9HrmY+wrXhmpFuK5XnwnMOcAm446yVJEMsw7kkIJYXa8sYw+Gxh3iHsCX2HCVlW1V0NBHGT1hbxrhO4F7u56Eqa4Arnff3H4fiWg/9f8TvO8Dq9miA/mwGOYKc+fLlLCoinz9XSZAt3W45P0ccP1CMuk4gXBcDRSCg5jUQCMAqBOcB8dtmpYdy8zciOM+poWm4Gg7LfU09AmebGu7vpYadz/RgQnPXrK6AAzTQv2SOdChwCnfX4e/DgIPk/4Qis1C34b3Hv3UFCFAjP+CAap+NDPWOZecCTnYqAQiKh12uKelnWoNn+lXopUVIxyx7cXk8VsYEhSdmdi3aBfqqARMriy+3k2CRjmVFKtQTJwi04Y+MI+KugOPf4L2o22SWLb8Wq3OFb35Q9LBtT5D5ouaAU1uPLLPZtBC79XtTNWpt6qgayP/OfyXlvByrjAARuU9fciWv8v8GM6oxsN1b73SDKkBsfkzJ+KENcASKQXX5hn+2+bQn5PHUXGXjklReGv8kHVK5jU1cJU+dl/C/tacBgObH6Cu69CgAZj7e5eVujmCxqCsKes9V9BV0XIC/54E37t1b+sCe7tu3e+8MQsV32xX26dNyz/wK5ick5HsGJYNv31IK2uAmZKxGPp2usG+fDjDCktl2vnqlssinlgZqi31SlVjabjYkERmnTbu90wGttshHeeQLlgQY/TficQw1doEJ0kI5jY05mwq0BK187XzT6NVr165edudDdng8vetRWLfaI7+CezWix+acAmu0wFRkA4KmmOd7uwlY4tbe8/5Eys3FLXIcwMqL5sopA5QYTV6VsRQPlTucH9IQsUSN03mnXLOLqDqX4LvX/IIflUMXCd1gz3wetXtKJsztMuHVeFNXrlA21S2UyI4eMTKnmaWtrW8JEzaThLcXLk1vKOPRowYW8LqGUYLf/gEDxOsoJtj1jraeeA2rBFdCHGmqtGUdS5UqvNNvZ8DxDg4GBTBo8yB11dI0HaFDnCIJOeZ19AhK/IMAda5XlwfyAVUFgcOZR4i6J6wnQ369T5hjvQf8SMpR+J1nb9c7zBztDT3XQ/cEedLrh5YUrqIOVI2Pc6uJ7CesMZIf6SkySsJXk5RP4VGiP3GUNdrV7zukG2UOdwWFw/AowbaapPsJzNw16sZ6wJdo+xQeM4uMMZuFyIcqYcO9Zh9gdUTw/Jw0mqJFsRagybm8KwACwLVVPL7vHunlvnEwmg4OSPC32o9fzBJGiiQaJuXaVLFQNXshL9UakU6I342Pj0x3e4spJQZnkrkhJpEeV5SNzsFXP++kLJ5zcXQjkTUwi6wHi+D5r0PvhxwEhSbTHSFHMA57VORtWwPsgp8U4WbknBiOhoZBbTUCHVAg86h4XqB3etWMfPMKRsx8NAe+YPXS6064Aw4iZPwadeatC2M+w+Vtuv/EA/LsT9RyrNnTjC3HlM/RCmXo+Rhp5Gmpn8DMR8sWJ08VpHG/YV+J3feVR791ext12nZ1UWd+laJlIDFQIErwEqMTMQZ//M8B0T/4Y3CzcFwreZweSkoLNcR6raVX+bs+Ec/cULKx3ogGCU0OAt4X020dQmSdSfEj37CezMWxRLss/AAeEAxnPRJwWPYqyLFqKf48AYDily7VQk5CxWfiPON2omLFfxB2EGI6sf04h6euDVEmmmpw1lOgb/8rwNO/6F06otrlNhc92YcDzYEOPnqwSr0Ms954/TqVIeZf6rNMXsbpBXDF7s0LCQjiUDW2thPaBt86hrTFxjTKhK55s4wyvLAu/MU+Tyc60AVylTuLyyCHeGO2kEuQGhzYSTuiKqowMzSHr5tEYkmGL1vu3d6WuwwxDe9aDS+Bzjfb6VuQI1vgas4azuPmeu/nd4QoQZu3vQnetRwuMYA7ZILr4d52uDggQheNGpc5ySmsOqfaQ2Bc5BS4cAKBVWb+BnjRvn2LSoIVoBGtvFZ4xdmzK2CpUZCbKzACye698hEDyZlkGKnh11BEFGc2Qf4nbyF/YQJmibk+wo2KEJS9BCbwkIXqiKojOcuOsetKULg4uzobdraNB1Bdz/hl1bhSA8bBvOW97uPofqYH8wwCVxKfiZz7x9G97tNJpriy9etuIVIW98qUeT05vrDxGBD3C3ZbVoy9HmCJhTGxRTExQjqPXrFpU8XYX5Fxa45jgneGOCtLnPa8r8JxzSF0lWoMvXDowDcDimLHqjWHKhw1gqLYkpJV6hxbRIA65iuVC1LTFijlQ530zXE0bi0qr6IwJqYoJlYoDpyP/WNgVoy2XCMDBJu/+iO+39eXXPwYZ+XKVlvbDOoSjOXQp7BaMIMLDvxe05lYW1Ibx+OzgfG29NtRs+/3/zmxXj3y/JV0jreZGZGh/hqGSNjXC5sOj6KyadVGrUb/67OxpGG/+kWYD6ILrw2ULpcvLz8NMQ0aM7F3T8fkrMmB0nfeE4Olkd+DVRJ5Q0zIjCSLl4lGCwR0kjM2g5fibRAQjxpm72QPoxIERAGCkSQh04KdgmlEwUETfDc3TCkFp+H3giLBe/i8FDdi+BFlURYpLSgQtodDJkxRAJVGIVNBJFM45AICsYNMAQ3AzmncPOhJixHTgFgMdLde1FGVLuL3ehdTpCnCRE4Ouf5Fqr4u6GhzxDS6la67/aKWCpwJnwvGNZ7jlxeScfXXmbWbn/gcIgatoXa7C4D4X3pQB55wWdb1tSLFcvVXFxLFjPguvzTCLfQX3v7rE6OQv77Kvk7NOALhw0mkRARS9tJWiY/8fPL4pnUE9+dionrP/LA7b6akLDYGw5OniZaZVY/WlfQpbYzvby/wG9S3urgaQqomiwKaF/wZszDQN5PfzwFLH2dYfhE4m/g/WLYPpn6E4Yu/+DLlb+jd4g5Ph/mcJ+xk1gkFXKxFdvd+WOlwf2PDyrlXMSANKBlupFPUOtuXOpsTKcgt4u7VOyJ9Fh5UY6EHBJtrlD/XJJZd4vAPN7nOd0OnaxVMBallcPfSBFRVHqYcK9zGKSilzPfGJnAJL1QGKq2xHE7bypaREuiLB24F38aikULePPrZBr50rff/xfZvV2zG1EN7hFf/w31aA/6+eWRn7MWyDu+uxY4cEu2cvUx5dbt3NhAwkzZuiCjtc9M4cn7FyBxSX6bx87YjxkhjhCHSMA7eOlz58NnBDtQyP1zuoovFdJpYQgMSCWAqPzt+POm4QCzb8eTHz45KJpAWGf0FCVB9K0Eg7MHcHhQHz4u24e3vtIaGjL5+s+djjRRD8LNHUUIOpxHljovTgm54XLggdivC2ZUGaeMDS9xz6QFqzCnP7UWu8hAQu6ra9vt4XvEi9KGKfYP134mDeXuPtjaguJGwYjKghoLGoWF5tdupRLdlTrUf+39PjXN47fVIN9S3UZTBD0ORfjZPdQX83J2CJT3c+bwwvY4ezIIQNAKxYNht84eQQIdE0eb32NNZLAgmLyunv96IP7AYS7SSMpmYZIaQ2KAnMWUOaioEGJe+kOiGGZRYaBYvE9oyF9fVvnWWOcN0JIBA+B+KxNGOImnvHugpd+pBVE2sR87qVdke+V636ZTjsWqVR45n/m3PvMlctTrHI9/zNoxsj9WrFaXybmvseenNzek8tZtF46aTm5t56Xy1ha/BkzR8i5pvd9NYSM4mG9O2IGVivWeVhnypKG212Q2sTWWly9lVSvkDPkq2DxtymEKEgakdy3fP8/k0QDCw1ma+WtUoNL6mLQIA/qrY2kQwntxvYj0TG/ds5nKNrP9YpoAAE4j5e8fls15Ehb8tsdC6/oWSJHhx3KojChzI6WD9CRq43OBG+DqRZA+0Ubo7+MiTbrLqMBZqGPGx0bbX0K5M0UaI6VwJn89j4+yYXdhGMkkMq/1GAB1MsQUQJAgW7HPpd4aa7iuWogUcDcS2Z/CL0OL1qX9WWhSywrZNJUJuyRwNNiKc84oZd5jH4xg4DI5uZSwMrKqzyNevqHNg+dqHiwJPxrfV7Zvrt+gcVPdOn8EHvUiA3nioXshktsz37du0PO6EOWDDY6gTde7r17Prh6jkh/Tbt+kPyVQQ0SKaP24gp5NKx7cvvNg1ZjPWdaLrqc3TrgsL94yYnNNdjKFD/vPxFsKD7gfCQmqWxB245O7kBoGDdnqorQ0yDFDeb9/E3nQpk3UJq4rcFSBX0DIS9c6N+6tFMTaZy9kukJFokKGtLf8fYZ3rAKStrX0DMzBQ1dO83WJ/XZeUhNegFeKTakYIQs8O2CtSBMQa7s+k49RcMX4DIeuDEP5nhjpGnQngcQf+P7OHhx3jTcxQaU8P8DYH8xRUwYd3vGne0//8ef7hXTyR4DEGI6lDqx99x+vlgcgLzmAXDk80dLdLzMLdDtkgu45pFkrauw1EPN44e7PiNxRbBW22PyO2E27xG00KqTx/IN0p4vdfXB0ft7TccHT9/fcIp7NQ/4GBxRNrSMR89mY5bPo3qqzY/dDNkkX1gOnw0qOA3yjg9u9+/e+niRS62HUucVoirsjne7zCM+s5c8WuKfSbn/59vXuWdrDEIzP5XxOi3pTPdiTNif/nif70VjsN0G6xO10/KhUFZryfeyiOlkJXIyps1Djq4YqpjEAR68IW24XnrrOz3XI4CEYKPralCNxbmSiIoUuAWm3l+meOo/UfG9hSxKedH4wCKGaruyCl9bkYi8zNcfN4fG6hLfCIAbKsLBnIk4JhkAxKPFEK5ckgR3cZQyrl5tFlUhjO8vQ8rlS69iF2gD6AW+91ah0u5LAs+O76MT6//BU+UbxLuUuf2qvsBSHjZzocOkQnuoJSM7eLFy0Sb89MDeqK+K/TnmffyaVjMKJRu6XDIgyGbuhwMEuRh/oSLd1C1+fm8hPUiaHLy8qWhyQANYjnicVa2hhNHxefJ5YYqT5US8Gt3dzdtwrmHo5Qk2kONLI6YoTmSBs5yb+kQPX1mR3nUsPvR79/EJ0StsV+xZb4oKvhU9fC44NVdkiQWHjS/2bkBWI8+hf0Svwo8yYB3YF6SIwNOcodEdbM87+Bw52bs6RI6jsSepSYiJlALSXlV5LQLdgXxJSoC+G3LguClXjD4GBH2fIOce4ZmBo/3+PsYmDeZBiWqQWh0oOv1J1x3WSItpVwkMi7yBGgLqMEnIs84hvkft/GjZu4J/AwkKCh+xBaAuBRnyUoH/F3BLl5E8WxiPuSU1yOuyiTlc7HnT8F7XTeGcRq/3th4MLkSKNnkQNxYySVpvMCdrqmWk5Rl5fLqfIaVFO6R8r1VJ6ccgu9PxuR5yEnN4ZykCLXlgLmgbvYbuwkHl/347w6VpWcLySN961Kc18xeSEtzUnkLK0jkyOtziKnxYTHhFPTFBFlempSlPc90gUFQCJ6AN1OPfXoEZX4VHjJgC5nCFauwEg8t2ckjWBGtOSqWBtM4/N+TAyrWR45g5mRYzRJPbFbgDn4k6ZkwzlNeaGybUrn1yQ8FlBFHeqTe+P+t3XOVpP7qSs5HtuXhRG1hPiLe0J2BtDyS7GdlE5sn9dN6e4zMKwBJ5E+EBzms1fvFwDRkrQIeYMwL0/YCNqFDZNyivzChdlqpxuFfBtPDwM22neeSlXpGxVm8Gg5eBvbTY7ZtElGGU6+nvI1R2A9hKtCybFyIX0rr5M/1hG3JRnIbqfjdtgOIjZXL+ew+/7gNxzE5Nw7zW76wXYHML/4Eyu/ccN5zePjmnbxAcMd89StW/Kzvxw7dvFirD5IVQLS2xhY+fjt/DNN3y6+YfwImcflPzw7feoUNpfPzceGoSFw0ZavacU03j1gWz7x30PdQvIWtBqC+lL4E/yUcOyKqa0YlotMI3OR6FaQ25v/xsq75ZRuCreRe07MxqjfvCmZdnURsLfFkBe4/+fNWw0Nt262PTMzDpLVncbXdJCxWuSLFlU8+PPWTZPp5i1Q0KxoDqQb5jpwpKrqw4eU6GfmrfkyqSrzjXZ0lHnX/TOgQyY7bCORnZDIx6bMU4mnn/IC1YHcMXVZCd0v0O9YJLxwz56FsHgjcvUqstFMQg3//fcwSvwz2tUV/TNIVI3IHLr5Kr7ZzRwaEIru6XSC6gL1tLcHw90dS+Lyz7Wfq2LkM1o53XP7LTwSyX0NZ6fX801teVqVXwK7F60mEkYcHVNZDm/P++mjZm1nGwlpeZSSuGUbbjjnwV0SfH3/gj/QdNTLtA1eHzkBmT7PYFlebRytVlSHs3lK0Tza07kjYgKTZiqKJ+Bldpn96djMg5Iwg+HhW7wtaakxzDsZkmPXOMaR25expYS3oX8ltJRTu7vgNOai3Dgs9t46AkqCAeT7I48v7tisFwQK5G/QNyTov4+31qkUzMyT59Dtcg4HVZyveqx+NHQfy/3zspsN/vp3ct6CDXSCrZIMQoHmBeToS9W7HSAd9lapM9b36r0RC5lkGRm3kMiWYdD1tahImUp8oMhMTv7a5fW7cxwl3hRPiXPeicUvSE7OUDwkpionr0JkQbyap91FXSu6lq+OE4xzciXiIrtU7wBuDlqhCEomBomRFEsKIg4iJqsUCmUON8A71c5Dr1+AR8fFKZWJ0cJ1hQ1U3NpSBBfDLS2z3wBFLa3FUBHU2npXEhMzUVyyZs0EsP2k7MU/uURZj90z8ssGyh7cLxeoG1CK2Zthbc/vVSWeqxoYItTOXcE5uAfCguCCnxZWx2MajaqMwI+iRnTsYGb2THCD3+yPyf8Xn8nJ/yDpXF22Z/qH+C31DbKeMnAIleqdE1LGudVNb13c3Uq/ilraFl0MC/kxZqGnRFRod6a2vPhfmCOTIbBMJvBaYKRadkRF5aH82Y6SxmCprcQxuNFW6ihtDPr6ZIapgzCY+SLzVdCIF5QjXJmMwZBtnIbJZQiA5bIbPJbNPMOZ3NC6jro0YfYeUEB26SIqoIJ8KBZS5Bco5tD/DBSioLT7MrqgylqBGHSgJV/6hMiXfWnoOhhmCD734b7u4TAguB51NrOL8HOfEl3P8xwEgi99KEYDBn1eJCxh4T50mqJ8GqYO3et1KgKCApQQAL8xZutbVO2ZTeD6bvedlf0XN2rb0FKm0uEwoIMCitIeAUCQT4VgeAEmHX42HwvRvoes9oeXeAEIrBFAS2YJR9dPQd3glhaJ9UdiHvFuqCfBxXr38FeBs7Fc/7Nxq8DKSOJm5P6Bs12xChqrv3Z49hOa1+ICV0LYXEfrONo5ziznQL8uwlmYlOHP4l7wxAxGceejbRZm/YFI6DAFLPw+l76/aVPHOhwdOoc8FxhDj+8PmauYW/oGQ+we6u0mutIGExf0J6c7O0Pqx304SHMldvcOdRMxb0oVVXNLjVHHY3fqhroJDg98DHaD/gP+5/0tp7qrBvxpPOE/LIq2vu3tJhC6e7mB7bG1FDrZgP8g8O9b8HlmgBpLHZgRJZjCz4R3RIOHgfiOW1tQMiHpZ5uHe/DPHj87HNBtxbFx3Vgattuvx1YdIG+dP9NN+U7t5nzjdFMLB0NYnGl4Ap7mhKxLTrafcNDLdoUUsmJixN/EY6zvzJjYfXjhJzdwXa0OE/ZXsy7EYCXbDf1n958tS49vJlpt6cYCTesseKjS3FtuX25zLkugo4rXqWL7lc6aVQQNWd04T4PyVKBKcoixuFhFndQuNjiRaB+yUojMUu1OyWHksKtWgTyqVwJUXAwlSKS4qEYJniTtU+tltFWmu3v0aCNGhzah9cSmwxhRHZ8wpeGQAfMpc9IS+8qYxzFZn/Nc0Z8wBrQOVYpZaD/vhMI+6VZMAYZ9EhuFYjSUy+1YAcYE2aQgzUePruv7pNxuUBaamhzmxfwS8+ZP+xYdWnSvNdln9WY1SmyLNdc+ISYxo7qJyFlUrC+HleY6KAYHxhKrITHgLrGFOwZNgzFApg0DFq6b2o1jQQ1MMqODMc1sp7VipY3xQ97BmfFFc9y5HF+Nt82rAJOfuDGD/g/RofDGjgNmD6Gb3fPc028I8fOeMmXAL1XgraTG6wzxQ6zT8aGJ64EUSkhb9fOnUcmhNp6PC0Lh2/4+UVKB+/ZbUelbo3NAcECroNPaoSA8JYQSJgjHWfNVvM9Egr5hnHCT4F9/kWBYvtx7Sys4U9j02m7DL+EniauIk/hLxHe9P3hdvraDilHVdjURpgnbsEdVuMNdRgXl6mLHxVcpaIuP5R+bBO/wGPao92hYuWqwvmkKnAaO8zy7yRPuI4H9v7Q2CkxP1j6+ObJUNmIOIeRNwU1BouRIvuQ0iB8o+djfL5Ip8fbhE3Qb75wwhfbF669UaRrSeGGUpu7t+pXLJmJ/fr9oKfY39P0LDrXX8xzZSYINcXfmRQUd/cdoRh0BfavBZhyMH6Ky/fuvnbo7gXLqPns/5qtOZO7VOl2smUWWaEzTLIpe/PvPycgjLeiSI6MltCuUT30nfG/6juWjDQT6ocEKNdt1wJVp+IL3GByOY/D2DU2zp4cyKzKFVU/tntFnEmNMlKfwPwL9TDdVn2l649rQIFSN08WsK4jLVqnmzdsY9HRVUuLiRXNk2CMhsXMr6BVzCYn2Xn5qHnfR4sQkVbpiV3a2Pgl4yBx7tCDJw1HWn519eQe9rOyvRDuv2WoevakpMUmI2DYj0CY7G4MBNSSbaisMo2qBuwpd47B7t0PNpXGzY/OJE82OOLLPm7Pr7t01DpFkHPj9MXdsNo+/8TFodTpx/IHDU35PDSDFkQJw5MiVdyLvrIwkZwXR1+XHE3Ee4r0ee8UeOGJ8/jrZdI6KKzicKeMc9fCO3Tb5oQXjl846Rzqfrc6NPxI34tRehCNufL3vt+jrjURcESrBIyFQ2ZLTxzcX3MVdfNSDOs4sX+Zmcvt4KyVTwaglplzP+PV7MHLh6tVr4XgNCGZyJGlQ5TwoTSKVlYbJn4qtBi5ubSuBCqCWxdj8+T462NwMo0qd2bxbNaVSu7iqVM8lyVBZKZQCJS/XZCig//R8EpYIpc21Fdz8d6aSezSSd6l2+usZLMf2EX/F6K6z5WYhdN1HQeASavvZ8rtYpfF/E0yoiXXB5rMEePlrV7X0616ZG7NoTfmSiB8bik/UJYbxuxNlzZyIkmBIMD3pFJ/uGn9kmuueXcZVFjpZISoWN241KXiujeWbrVt9y6MjfCu3Wq2iRSuk1PHZ02m87FL3TLfpQddEtZC+QorCor+p6QRbT4sr630r/tINGULpTscswhgrH6BVGi3DxBhMnaalCStdrWU0MAYQAlwSlSrDKJ9uHtQOBhVqBwI01sRVP7hPjOhj90UQae1u7XQ1MbzPti+cyOhYtYCMJQKA+BMwGBzsiaLlJcJ16BA+1ZXKr/NXReEHo+vg/AQI5QnjMI5ofxQQhFZpMdO2Stt0N/wv9bh6Fv7YgSmXqT88LgF4QSWYIru6mEfi9SzSfDjpv3QquDN2uzZjh6Rm9qw4Z0tI+280sdhpG8AUO3A6EB7cyQxkdsI8pIMjEvsFKkVoHkakFBymoQEBaYd6XweJDDTDZdv2I6XQ9aDNExeyLi6/1nG0jGbJPIdfN36x7HMvxtbPliz61ym27Wm2H/u0rcY2bAS401ygdVPxm5r4KjftcEy/RGJN52vd8vEW/N6DZgsOyZerkYrnpPO0blhVQwqyeo7JEt19kE9saOiOHrBaGuashVP7TVmQ4gduPY8fxMP52ic0f5OZm3gqNw3Iw48OzdqASoleXTV/TXQKAqzNlxHbzy4XbC6OBVtCfhCk7FYex3r4m+z/6nowUW8G6/4+GIUgsuXR+BKoqEhMLPOhGDq0o0E6A0MsyHMJryX8HTMvNvt4KpUqlExvjQ/nCA7dehCwkitIJ5l+SHMTaJIFtVTdQowQKx9ziRPYJrmplzar3AR+SZRzXlZdXNf87ZCBFw5KxXKsz8087VEap8T96AbdBPzYRqoODZDjhCjETR5SHUvejkJ4ao8igMZ2YxJvluB8p0UomhozVxc5O1mBn/dLCKTROFbxFVhGxmiEXJ4g9Xa1J2STW4gqpBGV9gfQKZxpaVccV+YeVQQE4vfv1bRCVfmP8kSbLOpTLd6AlQMNjma0azEKJGm34iIQRNopxsr5lavik3cl71C1hIBOx1cB85LL00RvQ+zV+8qiH/C/feOD1vY3EjZuaC9t61plQnpbXi7DQAIE44XTRpRVbDzSFx/fvlwtezRTos3Vjv3Yc2/uBRH+Iz4hTBLj1oS/M3EFveG9E+xJbDFFOYbGoMfYkWzhqhSNBEYODRAxhIEh768tAoY4AFapbb70byQT8Tzci1793n06uWpxJO2TMGFVa6e33IHwJx5RnwlwLJqFOYGeY0rkyRvk3nPFpypOHqMExbvLjQlujaeOPVLuW3bJ7fXZ1moiDZp6eLZu7/5C+Re4GL7Gy/NJ2yTIhApQ2+TcPMdc5g8gH5OOHZ6VsHhFYAzIRB0J801zTwVnxB+8knYEKZHnSwRxbrGYIXQyyKIft8twyVgl1iJKePlszyTXDNgC5WGU4JC6zUm53RGlccwcdDwijqxlxmOkTUxHT+fkHltUGiNviO2Sg8QspZKlYdU0VOHQjOOMHSsiYagk6tNAUnJjkwH5A1lJHaI0JTGiqy/00njUdx+fxWmrljEZ4UnUGnP2wpXOpF2Fte4YJZ4OpWFQDiRy5QvxRjcnYpo2Wo4+i0/CtrliKMUY6AwVDc8FVnU9vG07XA/guonWwydcHV/f9Z9iqKUVLtpd3NJSvMcrg/ECGJlqG/LTT8g2zfvEMzRw5/HjnSXBC0B4m/ZSOA2y7aefhmjem7whlcb8NmrCIDQRpEi13qjGWY4DCcKQC3GaAZ8Bq3XQnFYGXQhzYl5+mRLVymie+ljE9KT49wcYWOrVRZajk9gpqw17AsPJlXpUKZyNQfUyNkzRHXIIZQhSdjRjua1opkmV7kmP7td1WY1wP8xxDI6ycxKFiIZoI0s4I9atcD+YYe/M5eRg6CgFXTxuk0EqQjGziLKFW7wdXd7NlWOKQTYGzkQbVHO/Y5m2KdgMG2ysd0DzbltR0wijnKWqXUDoUHTT1sO4AdoAro7n926tBhIxLZdWuwA7upecb4JRwJ55Ss2FfgJs7ig0we6dILTh39lM4NsIk0M44jsiTHiTridMnCAewBGmiW34iZwW4nTLBGGQPYnvEhOAgxhvo2wppJuQF1TgAkfGfbSDA/p+gK7qzycI3BX1wmkHZ+z3C20S/a+YW3KC0R5O+kSy9CN8G3KKegF3IYS9Y7//fMb0ReyIqoaC9i/yhJfoHPTYguIlGRw9zcAsdYy0kXq4VKTFkdbtxEN2+KVxtoXP37xMeK/q7x09rYUZxxUj5euEPnlZdjGh2GW0lrRQrpgRJlvwq44bY7MM7wXbH1maQEoPsvNkx+aKuLpSpoGm52jx9KeJ/EtoGf5wF0wYI8DyE0nuxDJpAgaL1ThzYUA35zNFHulZyX6BqQS/NJOjS6MDV6PRZjPSeXkZLji2JL4DoQSvlkWce4XOPaMco8k5NJ/6b6ulYC9JOUQw+a3N2r2q6j9mLUZJdTV4c6e6j3Ux/XnV8+f9IWk+TxO1snhyqrqqOu0AkBVHoV9rUJpRK/q1+ih0BHpVfWa8qTkElBnlqNQfUSkjoFEVKOUwKvVN+Y1bf8Z590glFO/6Oxs6yFkBsvgq2EG3h+0gmL2bhjIa1KOSwnhjOAStLhvi//T7VQ89hyXnw/9OFNbwx3WpEBrDEK8HgC8S/wfmPBBUtwXK51dhgNwNfrMUUgRvRm1BCtZlckF5X3oC2GrilJgZO7ZRYAB/qoTAJTN9CQTlpTCu0KGLS/RJdDDo6bGFDge2oc4vDyGj3NFy5PBpxv5NiM2Nv79eYdpNIXQeFmlcRbfbHfCh+5FaErKPwXRLE50D0Cy0B1PCYnHEU+uyIWTW/mOHEJTyxK16mM7smX+NH2QTd0lOZyLEmtryHfxZ/LSVh0EnX0eIoB1Ah/bpjtdCh3qwmTEBnFO2UubrlqTS+xLI2xHMGZmsvr5CsukUm52WuHC95NI6suJIy/WzD3LXryyqemaHfvvk074lMnU2nkOXF5TLWDtupXlGlXtFm70wxtV2eWqASLDOWEZChobN4GiSUreOrM07p2hYN+yJWjpDVwARP8DFqSAzpDwnumhW5qLSy0T4XzNloqtqvcMem4tPAiWBXCU7pPCLpTR+L+ZtJDnMg/2h1G/f92tSVGN1WFkji4B/5BF5LuC9b3oRMsDzZKAyy0+Tjod8aa0pxgPB5wismMZabbeeHUCfAxGPrz+bvTEsikh09Tueg3W9zL8U9WF/tK4Q6PZMvshBuEvpxbFFsr0S2GGk9wP7rnC86vnIZCLqbkDNJrVb8eV7Ix/n5Smft+NoxqENFVF78ZAKsziHTHZlh1x4TUSQ7/eT4M2lGIxtxP6LDKU9HgC/sk9vleLu6jsXzO2+hiSQv0Djos+bPZvpyase8hY6Jb10SXjNtb9Uy/dg+fnn6j/KC/IZjHlH3WVcoqhFUqjYDCEXnq6NFWEIwgQPGAC4RkDKf+b8MvTVy7A3G+b0xnomE6p4YcyqyCIuI4ZBQVShTJoUWJlBMXKmb4C0By3GOAs1F8+KhfmrXkUuqCt0dc5ZuPabrqPGI2UsueK0Lk1ue02sZhfqDGqnvwa9ZlwW/EmqlRy6oZOHMPYfjADpMevEIl1njXtK5dpL+TqxKGadURUu1F/WGTRO35UVc0/rLgsNBwcL5SGM/UGxH110f5JqJTtASFX+NOCAacChyafpXDANuCEDXPpxjCaiZkLWKNGkfIb6JGVc/CX8a/xXEhDNcLZIbe453vO+5HhJae0wTADqpEW+Sn01NPAKTYOnpyEY4XVRZ3pmaM0dJ0+eAjetqRlqiur8QG5RCIIVFeefO6g5HZdkqDUDhvM6nYgaWHf5nH7wRpQgF25cDOVCmdULNThs+drOUrgC7lqDnvubq1LK78j25avGxU1wAYLpxCZBpRVQCpRaWpYEcZMhQxlIhZSGRB3c/IQ4TQiKDgoamwL+qM6xVUvYp1/msNXS4FPgN7v429XR+v62yRYdmI9sQjb7zcY2ld3KgbclffbONe9vZVve366Ofpk+Wu3sP76rRP/NuWH6/YbxJ+Pv0RvS/WYjm+BNs09Qo6q70vMOT7pJH/OlL7ctDUsJTAlb5rJrlSq6OsxN1r3mtxMrZ8bE9DzXuSSe3at+vFQpGww7hr3/kmb+NPnbA4PoCj4QRe5BeRHVJe88Uig/61ZewV2ZaWm5FHQ3QD8RmE6U/pLufP6gqw3VLTmunC9rScGrDmxLjzFKw3YTofnEM/8vork10yr5qYQEUao7zI8LV86WKrY07JsDPsnsUWppoNJAzPlh2kvu7Uai+m12V/6thguv6WkZ1E3oyiWZofrtrkR//I8uqiIH1T8/kw3des0pOfZi3wHoJZ+Ik4FCspuGm6AGiUF5B/OMOUHx2bM15UxVMK1glnFr0nJHyzdYmiu79e3o0QvP6zfQZ6dmB13c56VgO6gKPEowL0WyE9tY39xVIUi/2BhYgC9AFMDKLUXFJsuSQEVeUFyAJIFtV5ggToupAKVpsrhI+zwp0K2XLQaroxoWJMhgzpWMlUZGjssLCS27PhlkVi9JQyBJdkRAIai7uDsvJNhNxsqUhsnCAav5YVAve/+yX2t+XBkza73lCfQOhrdW82g0qmHvQLn/pdFqBry13gNmrXlgr/Muem8UWOOtgt755opqJmKNZ7GKON5D71bt3eBdp2arH9e+87XjaHIs6V4xjd/0gVFICxreNdMy+Bm0GaZXRd0a/GtM737MWDcgZwy4ec4uOFxVgfSgb4/hu1muteiNO2qBcf3+etLdqDtZqOq1UGZ2bWMWSoXCpOGaBg82Ywpu0xzcM84ZF3kvwxw4Tqdjy7CKaMU23PUHoQKmFptax4CPN1ho34zOm+7bPW416PWm98z4JcybXi/V1jQ17fVfWVvIy6lHL4YnvCc79EbIR2T++Edg3ckODflPv46dJ4x7Re9vud9csbwdKstkbLoc28Ur5Vjeef373Of5v17vSkMrAy98ePRycHLWIY9G/zUzLsUCI89g857antlcpUWd6S4NTeMKHNc0ws+yqrpuqzawDD2VZ3q0tBAIKCpSm/VWY2p2gspRU2+PgQpblxbCsaBScW6R64g4rFEq0RI+hcCVDLdz2j7ncDmMIPVvkDNrcFtkhA9I5eVaHZ+AxSRE6qmeuK6OqVRGXMzYu9VU8525pfIW0ZHB69Uma7AG/32s1ne1miPSDteZor8Yo4g2280c0QcDIQCkaz00t4LNaT5eb6PVBQcGwP/Hz0x5btCK/ItCzagtoqOmSRBstdri4L++QoL3jPANHvBYVrDbfzzx/+q+vCwS93qGn5oQt7Q+AhJssl99c79fZCPYrs3C4B6T8lHbUJ2R3wVhmzY91T/6sU3Y2hZeF2zSqCl9i1mATRNiPhmAuCP4gxdy3Hd5TlcrGAiBPL15gElY6NdZ+wofahtWQ1+K7jLcJrtZn6U91Ut9QlbpdCvSrBJF8Luv/aMPOt0H/CAfmP51AOJgQm7WEdy/XVISXG25uvQGh8zT7b/W0oikTZq4dKmuGRQyr3+VDAZZXse9LnGN0H8ZqGvB6+YJMk/YJRnpLrGqhiJwPpnM+iFSPvWlJfERE+mNpmTWSebV9a7/+Qbb97i3r3AhzOX+0gj3fT5LioR2rfGCAx7S6stYcf6zvlD0q8600mfku8v0Io1a6lDn1v2qD/va58EVvjK27/Y++NVFhIVH7CDpvxkAj9noX3vtQunsI81HFbRt+jhePxDSbBJle9kWXQc7tv0a8OchVd3/ewJv8L7e9mdBirwnokCw55/OXws4vLh+eAp2ReQEYECGFgD+MwKKARruXfdpmPS9UMdHYa8Bslrll9H6j9n1Ud1g/wUG6aZsz1RMh62nTK+Pu+d7JwSpA//FlOm6jlbffA+0eb6w2ya08hXI/Q3q9sto/Vc3arWiz8ArCwB5QbtjCcwVgBx0D0gBrrmaHHb1bow4xqXESecKsMC5E8ABN342+3ZugAgCO3eAA3M6D+BDcfILYKoBIQCh8ADkoc3rhADN0U4YUMCPnQigucmjNk90ogHbu04MoAX0TgLQQswqicuzgTh8xwgV3Wi2Y7CUPW+5HlYqFGna/oVTi8DnYXG8/5AlUB6vzi+Xr/uEGdlFGXmdrmv1o2dK48fSbh3GSGNh2qCt53Ot5fniwqtqOLeUdg5fYYSKbmS2/MrBUvasHrI2Kny0Ttu/UHzkLQJrpkwX/4cswdVHPrpy7tKA/0Sy0ZRtscvrdK1S5kd2IFMafWydjtGFPipqvAG2E/3cbGGWZxd0Nm9KzjupppsdDK5HUPljKgwGECqw4MADfeXSWQUMAhESKIAIE8q4kEob63yISZrlRVnVTdv1wzi99e12z8u67cd53c/7/RKp7AEJeoOIZ1x8QmJS8p7MAsq0dJX6G3q/JDIys7JzcvPyC3TJAxhYOCA8JswI2GBBREIGoeAFvEwkuH3IcspKVPHMOlem2JtBqyC/uaqT07K8x5ArGzAViBGrVEZIMWTUs5vgfmLR4padylj2MrTLMMYIB44yGwJ2g6jalhUlM9vB2baEuWqWg9yXEYSxknMBh442HyyqNaZWhX+o+5BhP7gq+aho28kunWVCBieFa44ErmuJ51G+03pYZeJqaLehB7puijo3o60rXXVFVCJqvCBE7bzwSv9ftAkDFyxb00uX7XAjx3JQKc05sQWu3So7Q1WLfDsmE64nMeZE021KFW7vZx43anbCoZD7a9+oNnyFriHroeUARr0qGNI4mLiXshZF+lVGQsV+YZga5L2yDj4YV3vP/ofzRO/fduzWUxjIqeQMSuhRzV+KR44VzjaMy74pMwgrRkc9B2H/9bBC3a/13EDwCDKACCYTt50I2M5DVl2JlyvNckH2XNMLPW9bl2xCxK7MOlM+tZ2aO2uWfV+e2HlH1yTvJBGYcDAVohtI2XXXwvs2m6pKvpr1XR/b7iviV+SD5iKzfX2t7SX0nfO6HjYBeaE86U5Fr3TjhJjccMt1NznCKhNYlti5SPz957vSqH0n7HvLOzCNCUPqfmApAtkx6DQbHO6LfW9UDKmHLbJaO1TBWwQtu55ohccB3BC3NVjJTl33Lc8ud9pOAAAA') format('woff2'),
-  url('//at.alicdn.com/t/font_1331132_5lvbai88wkb.woff?t=1564973526855') format('woff'),
-  url('//at.alicdn.com/t/font_1331132_5lvbai88wkb.ttf?t=1564973526855') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
-  url('//at.alicdn.com/t/font_1331132_5lvbai88wkb.svg?t=1564973526855#topology') format('svg'); /* iOS 4.1- */
-}
-
-.topology {
-  font-family: "topology" !important;
-  font-size: 16px;
-  font-style: normal;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-.topology-ipad:before {
-  content: "\e664";
-}
-
-.topology-app:before {
-  content: "\e618";
-}
-
-.topology-remote-control:before {
-  content: "\e607";
-}
-
-.topology-browser:before {
-  content: "\e60b";
-}
-
-.topology-185055paintingpalletstreamline:before {
-  content: "\e61b";
-}
-
-.topology-house:before {
-  content: "\e61c";
-}
-
-.topology-map:before {
-  content: "\e61d";
-}
-
-.topology-sound:before {
-  content: "\e631";
-}
-
-.topology-link:before {
-  content: "\e63a";
-}
-
-.topology-umbrella:before {
-  content: "\e64b";
-}
-
-.topology-dashboard:before {
-  content: "\e653";
-}
-
-.topology-settings:before {
-  content: "\e654";
-}
-
-.topology-sync:before {
-  content: "\e657";
-}
-
-.topology-document:before {
-  content: "\e707";
-}
-
-.topology-enter:before {
-  content: "\e63d";
-}
-
-.topology-printer:before {
-  content: "\e67e";
-}
-
-.topology-warning:before {
-  content: "\e6a9";
-}
-
-.topology-office:before {
-  content: "\e605";
-}
-
-.topology-wifi:before {
-  content: "\e637";
-}
-
-.topology-exit:before {
-  content: "\e641";
-}
-
-.topology-api:before {
-  content: "\e616";
-}
-
-.topology-iot:before {
-  content: "\e627";
-}
-
-.topology-stop:before {
-  content: "\e619";
-}
-
-.topology-clock:before {
-  content: "\e75c";
-}
-
-.topology-camera:before {
-  content: "\e78a";
-}
-
-.topology-download:before {
-  content: "\e79c";
-}
-
-.topology-upload:before {
-  content: "\e79f";
-}
-
-.topology-flow:before {
-  content: "\e85a";
-}
-
-.topology-dashboard1:before {
-  content: "\e873";
-}
-
-.topology-unlocked:before {
-  content: "\e87b";
-}
-
-.topology-github:before {
-  content: "\e8fd";
-}
-
-.topology-stop1:before {
-  content: "\e622";
-}
-
-.topology-people:before {
-  content: "\e651";
-}
-
-.topology-email:before {
-  content: "\e67c";
-}
-
-.topology-exit1:before {
-  content: "\e6ab";
-}
-
-.topology-zuoji:before {
-  content: "\e68e";
-}
-
-.topology-rocketmq:before {
-  content: "\e6aa";
-}
-
-.topology-nodejs:before {
-  content: "\e989";
-}
-
-.topology-shoppingcart:before {
-  content: "\e62e";
-}
-
-.topology-wechat:before {
-  content: "\e646";
-}
-
-.topology-kefu:before {
-  content: "\e658";
-}
-
-.topology-people2geren:before {
-  content: "\e673";
-}
-
-.topology-people4geren:before {
-  content: "\e68a";
-}
-
-.topology-pay6:before {
-  content: "\e68f";
-}
-
-.topology-pay3:before {
-  content: "\e691";
-}
-
-.topology-home:before {
-  content: "\e6ac";
-}
-
-.topology-parallel:before {
-  content: "\e748";
-}
-
-.topology-java:before {
-  content: "\e746";
-}
-
-.topology-locked:before {
-  content: "\e791";
-}
-
-.topology-share:before {
-  content: "\e620";
-}
-
-.topology-weibo:before {
-  content: "\e63e";
-}
-
-.topology-error:before {
-  content: "\e6b1";
-}
-
-.topology-success:before {
-  content: "\e6b3";
-}
-
-.topology-website:before {
-  content: "\e70f";
-}
-
-.topology-kaiguan:before {
-  content: "\e67f";
-}
-
-.topology-pc:before {
-  content: "\e600";
-}
-
-.topology-firewall:before {
-  content: "\e630";
-}
-
-.topology-MongoDB:before {
-  content: "\e6f0";
-}
-
-.topology-router:before {
-  content: "\e612";
-}
-
-.topology-antenna:before {
-  content: "\e602";
-}
-
-.topology-safe:before {
-  content: "\e727";
-}
-
-.topology-html:before {
-  content: "\e606";
-}
-
-.topology-data-stream:before {
-  content: "\ebd3";
-}
-
-.topology-bub:before {
-  content: "\ec73";
-}
-
-.topology-satelite:before {
-  content: "\ed48";
-}
-
-.topology-satelite2:before {
-  content: "\ed47";
-}
-
-.topology-antenna2:before {
-  content: "\e679";
-}
-
-.topology-hbase:before {
-  content: "\e67b";
-}
-
-.topology-apiassembly:before {
-  content: "\e67d";
-}
-
-.topology-search:before {
-  content: "\e60f";
-}
-
-.topology-network1:before {
-  content: "\e64d";
-}
-
-.topology-redis:before {
-  content: "\e682";
-}
-
-.topology-db:before {
-  content: "\e645";
-}
-
-.topology-kafka:before {
-  content: "\e604";
-}
-
-.topology-mobile:before {
-  content: "\e63c";
-}
-
-.topology-python:before {
-  content: "\e60e";
-}
-
-.topology-cloud-firewall:before {
-  content: "\e62b";
-}
-
-.topology-sql:before {
-  content: "\e718";
-}
-
-.topology-folder:before {
-  content: "\e70e";
-}
-
-.topology-message:before {
-  content: "\e729";
-}
-
-.topology-building:before {
-  content: "\e601";
-}
-
-.topology-docker:before {
-  content: "\e689";
-}
-
-.topology-cpu:before {
-  content: "\e61f";
-}
-
-.topology-api1:before {
-  content: "\e603";
-}
-
-.topology-api2:before {
-  content: "\e75d";
-}
-
-.topology-cloud-server:before {
-  content: "\e665";
-}
-
-.topology-streaming:before {
-  content: "\e8f9";
-}
-
-.topology-fuwuqi:before {
-  content: "\e614";
-}
-
-.topology-router2:before {
-  content: "\e613";
-}
-
-.topology-jiankong:before {
-  content: "\e61e";
-}
-
-.topology-data1:before {
-  content: "\e761";
-}
-
-.topology-earch:before {
-  content: "\e608";
-}
-
-.topology-data3:before {
-  content: "\e609";
-}
-
-.topology-data2:before {
-  content: "\e60c";
-}
-
-.topology-golang:before {
-  content: "\e615";
-}
-
-.topology-record:before {
-  content: "\e60d";
-}
-
-.topology-streamSQL:before {
-  content: "\e6d3";
-}
-
-.topology-data:before {
-  content: "\e649";
-}
-
-.topology-network:before {
-  content: "\e63b";
-}
-
-.topology-ks:before {
-  content: "\e685";
-}
-
-.topology-rabbitmq:before {
-  content: "\e61a";
-}
-
-.topology-cassandra:before {
-  content: "\e621";
-}
-
-.topology-mysql:before {
-  content: "\e652";
-}
-
-.topology-antenna3:before {
-  content: "\e694";
-}
-
-.topology-list:before {
-  content: "\e610";
-}
-
-.topology-cloud-code:before {
-  content: "\e690";
-}
-
-.topology-iot1:before {
-  content: "\e611";
-}
-
-.topology-pgsql:before {
-  content: "\e706";
-}
-
-.topology-cloud:before {
-  content: "\e60a";
-}
-
-.topology-analytics:before {
-  content: "\e6a5";
-}
-
-.topology-iot2:before {
-  content: "\e617";
-}
-
-.topology-up-down:before {
-  content: "\e623";
-}
diff --git a/nezha-fronted/src/components/common/project/L5/services/canvas.js b/nezha-fronted/src/components/common/project/L5/services/canvas.js
deleted file mode 100644
index 46c121b75..000000000
--- a/nezha-fronted/src/components/common/project/L5/services/canvas.js
+++ /dev/null
@@ -1,941 +0,0 @@
-import { s16, s8 } from '@topology/core'
-export let canvas
-
-export const Tools = [
-  {
-    group: 'General',
-    children: [
-      // {
-      //   name: 'rectangle',
-      //   icon: 'icon-cube',
-      //   data: {
-      //     rect: {
-      //       width: 100,
-      //       height: 100
-      //     },
-      //     is3D: true,
-      //     z: 20,
-      //     zRotate: 15,
-      //     name: 'myCube',
-      //     iconFamily: 'topology',
-      //     iconColor: '#777',
-      //     iconSize: 30
-      //   }
-      // },
-      {
-        name: 'rectangle',
-        icon: 'icon-rect',
-        type: 0,
-        data: {
-          text: 'rect',
-          type: 0,
-          width: 100,
-          height: 100,
-          paddingLeft: 10,
-          paddingRight: 10,
-          paddingTop: 10,
-          paddingBottom: 10,
-          name: 'rectangle'
-        }
-      },
-      {
-        name: 'rectangle',
-        icon: 'icon-rectangle',
-        type: 0,
-        data: {
-          text: 'rectangle',
-          type: 0,
-          width: 200,
-          height: 50,
-          paddingLeft: 10,
-          paddingRight: 10,
-          paddingTop: 10,
-          paddingBottom: 10,
-          borderRadius: 0.1,
-          name: 'rectangle'
-          // icon: '\ue680',
-          // iconFamily: 'nz-icon',
-          // iconColor: ''
-        }
-      },
-      {
-        name: 'circle',
-        icon: 'icon-circle',
-        type: 0,
-        data: {
-          text: 'circle',
-          type: 0,
-          width: 100,
-          height: 100,
-          name: 'circle',
-          textMaxLine: 1
-        }
-      },
-      {
-        name: 'triangle',
-        icon: 'icon-triangle',
-        type: 0,
-        data: {
-          text: 'triangle',
-          type: 0,
-          width: 100,
-          height: 100,
-          name: 'triangle'
-        }
-      },
-      {
-        name: 'diamond',
-        icon: 'icon-diamond',
-        type: 0,
-        data: {
-          text: 'diamond',
-          type: 0,
-          width: 100,
-          height: 100,
-          name: 'diamond'
-        }
-      },
-      {
-        name: 'pentagon',
-        icon: 'icon-pentagon',
-        type: 0,
-        data: {
-          text: 'pentagon',
-          type: 0,
-          width: 100,
-          height: 100,
-          name: 'pentagon'
-        }
-      },
-      {
-        name: 'hexagon',
-        icon: 'icon-hexagon',
-        type: 0,
-        data: {
-          text: 'hexagon',
-          type: 0,
-          width: 100,
-          height: 100,
-          paddingTop: 10,
-          paddingBottom: 10,
-          name: 'hexagon'
-        }
-      },
-      {
-        name: 'pentagram',
-        icon: 'icon-pentagram',
-        type: 0,
-        data: {
-          text: 'pentagram',
-          type: 0,
-          width: 100,
-          height: 100,
-          name: 'pentagram'
-        }
-      }
-    ]
-  }
-]
-
-export const imageTemp = {
-  name: 'rectangleImg',
-  icon: 'icon-image',
-  data: {
-    type: 0,
-    x: 922,
-    y: 406,
-    width: 100,
-    height: 100,
-    imageRatio: false,
-    lineWidth: 0,
-    rotate: 0,
-    offsetRotate: 0,
-    globalAlpha: 1,
-    lineDash: [],
-    color: '#000000',
-    background: '#ffffff00',
-    animatePos: 0,
-    name: 'rectangleImg',
-    lineDashOffset: 0,
-    text: '',
-    textOffsetX: 0,
-    textOffsetY: 0,
-    visible: true,
-    zRotate: 0,
-    animateDuration: 0,
-    animateFrames: [],
-    animateFrame: 0,
-    borderRadius: 0,
-    icon: '',
-    image: '',
-    imageAlign: 'center',
-    bkType: 0,
-    gradientAngle: 0,
-    gradientRadius: 0.01,
-    paddingTop: 5,
-    paddingBottom: 5,
-    paddingLeft: 5,
-    paddingRight: 5,
-    paddingLeftNum: 5,
-    paddingRightNum: 5,
-    paddingTopNum: 5,
-    paddingBottomNum: 5,
-    fullIconRect: { width: 80, height: 90, center: { x: 972, y: 456 }, ex: 1012, ey: 496 }
-  }
-}
-export const imageTemp2 = {
-  name: 'rectangleImg2',
-  icon: 'icon-image',
-  data: {
-    type: 0,
-    x: 922,
-    y: 406,
-    width: 100,
-    height: 100,
-    imageRatio: false,
-    lineWidth: 0,
-    rotate: 0,
-    offsetRotate: 0,
-    globalAlpha: 1,
-    lineDash: [],
-    color: '#000000',
-    background: '#ffffff00',
-    animatePos: 0,
-    name: 'rectangleImg2',
-    lineDashOffset: 0,
-    text: '',
-    textOffsetX: 0,
-    textOffsetY: 0,
-    visible: true,
-    zRotate: 0,
-    animateDuration: 0,
-    animateFrames: [],
-    animateFrame: 0,
-    borderRadius: 0,
-    icon: '',
-    image: '',
-    imageAlign: 'center',
-    bkType: 0,
-    gradientAngle: 0,
-    gradientRadius: 0.01,
-    paddingTop: 5,
-    paddingBottom: 5,
-    paddingLeft: 5,
-    paddingRight: 5,
-    paddingLeftNum: 5,
-    paddingRightNum: 5,
-    paddingTopNum: 5,
-    paddingBottomNum: 5,
-    fullIconRect: { width: 80, height: 90, center: { x: 972, y: 456 }, ex: 1012, ey: 496 }
-  }
-}
-export function rectangleImg (ctx, pen) {
-  ctx.beginPath()
-
-  ctx.rect(pen.x, pen.y, pen.width, pen.height)
-  if (pen.data && !pen.data.animateNeedLine) {
-    if (pen.data && pen.data.lineWidth <= 0) {
-      ctx.strokeStyle = 'rgba(0,0,0,0)'
-    }
-  }
-  // 必须判空再填充
-  (pen.background || pen.bkType) && ctx.fill()
-  pen.calculative.worldIconRect = {
-    height: pen.height - 10 - 20,
-    rotate: 0,
-    width: pen.width - 10,
-    x: pen.x + 5,
-    y: pen.y + 5
-  }
-  pen.calculative.worldTextRect = {
-    height: 20,
-    width: pen.width - 10,
-    x: pen.x + 5,
-    y: pen.y + pen.height - 5 - 20
-  }
-  // pen.iconRect = new Rect(pen.x + pen.paddingLeft, pen.y + pen.paddingTop, pen.width - (pen.paddingLeft + pen.paddingRight), pen.height - 20 - (pen.paddingTop + pen.paddingBottom))
-  // pen.fullIconRect = { width: 80, height: 90, center: { x: 972, y: 456 }, ex: 1012, ey: 496 }
-  ctx.stroke()
-}
-export function rectangleImgAnchors (pen) {
-  const anchors = []
-  anchors.push({
-    id: '0',
-    penId: pen.id,
-    x: pen.x,
-    y: pen.y + pen.height / 2
-  })
-  anchors.push({
-    id: '1',
-    penId: pen.id,
-    x: pen.x + pen.width / 2,
-    y: pen.y
-  })
-  anchors.push({
-    id: '2',
-    penId: pen.id,
-    x: pen.x + pen.width,
-    y: pen.y + pen.height / 2
-  })
-  anchors.push({
-    id: '3',
-    penId: pen.id,
-    x: pen.x + pen.width / 2,
-    y: pen.y + pen.height
-  })
-  anchors.push({
-    id: '4',
-    penId: pen.id,
-    x: pen.x,
-    y: pen.y + pen.height / 8
-  })
-  return anchors
-  // pen.anchors.push(new Point(pen.x, pen.y + pen.height / 2, Direction.Left))
-  // pen.anchors.push(new Point(pen.x + pen.width / 2, pen.y, Direction.Up))
-  // pen.anchors.push(new Point(pen.x + pen.width, pen.y + pen.height / 2, Direction.Right))
-  // pen.anchors.push(new Point(pen.x + pen.width / 2, pen.y + pen.height, Direction.Bottom))
-}
-export function rectangleImg2 (ctx, pen) {
-  ctx.beginPath()
-
-  ctx.rect(pen.x, pen.y, pen.width, pen.height)
-  if (pen.data && !pen.data.animateNeedLine) {
-    if (pen.data && pen.data.lineWidth <= 0) {
-      ctx.strokeStyle = 'rgba(0,0,0,0)'
-    }
-  }
-  // 必须判空再填充
-  (pen.background || pen.bkType) && ctx.fill()
-  pen.calculative.worldIconRect = {
-    height: pen.height - 10,
-    rotate: 0,
-    width: pen.width - 10,
-    x: pen.x + 5,
-    y: pen.y + 5
-  }
-  pen.calculative.worldTextRect = {
-    height: 20,
-    width: pen.width - 10,
-    x: pen.x + 5,
-    y: pen.y + pen.height
-  }
-  // pen.iconRect = new Rect(pen.x + pen.paddingLeft, pen.y + pen.paddingTop, pen.width - (pen.paddingLeft + pen.paddingRight), pen.height - 20 - (pen.paddingTop + pen.paddingBottom))
-  // pen.fullIconRect = { width: 80, height: 90, center: { x: 972, y: 456 }, ex: 1012, ey: 496 }
-  ctx.stroke()
-}
-export function rectangleImgAnchors2 (pen) {
-  const anchors = []
-  anchors.push({
-    id: '0',
-    penId: pen.id,
-    x: pen.x,
-    y: pen.y + pen.height / 2
-  })
-  anchors.push({
-    id: '1',
-    penId: pen.id,
-    x: pen.x + pen.width / 2,
-    y: pen.y
-  })
-  anchors.push({
-    id: '2',
-    penId: pen.id,
-    x: pen.x + pen.width,
-    y: pen.y + pen.height / 2
-  })
-  anchors.push({
-    id: '3',
-    penId: pen.id,
-    x: pen.x + pen.width / 2,
-    y: pen.y + pen.height
-  })
-  anchors.push({
-    id: '4',
-    penId: pen.id,
-    x: pen.x,
-    y: pen.y + pen.height / 8
-  })
-  return anchors
-  // pen.anchors.push(new Point(pen.x, pen.y + pen.height / 2, Direction.Left))
-  // pen.anchors.push(new Point(pen.x + pen.width / 2, pen.y, Direction.Up))
-  // pen.anchors.push(new Point(pen.x + pen.width, pen.y + pen.height / 2, Direction.Right))
-  // pen.anchors.push(new Point(pen.x + pen.width / 2, pen.y + pen.height, Direction.Bottom))
-}
-export function disposeTopoOldData (pen, allPen) { // 处理旧数据
-  let obj = {}
-  if (pen.type === 0) {
-    obj = {
-      id: pen.id,
-      data: pen.data,
-      keepDecimal: 2,
-      scale: 1,
-      valueMapping: pen.valueMapping,
-      tags: [
-
-      ],
-      type: 0,
-      name: pen.name,
-      icon: pen.icon,
-      iconColor: pen.iconColor,
-      iconFamily: pen.iconFamily,
-      iconName: pen.iconName,
-      iconSize: pen.iconSize ? pen.iconSize : 12,
-      x: pen.rect.x,
-      y: pen.rect.y,
-      ex: pen.rect.ex,
-      ey: pen.rect.ey,
-      width: pen.rect.width,
-      height: pen.rect.height,
-      paddingLeft: pen.paddingLeft,
-      paddingRight: pen.paddingRight,
-      paddingTop: pen.paddingTop,
-      paddingBottom: pen.paddingBottom,
-      color: pen.strokeStyle,
-      lineWidth: pen.lineWidth,
-      borderWidth: null,
-      borderColor: pen.strokeStyle,
-      rotate: pen.rotate,
-      visible: true,
-      background: pen.fillStyle,
-      lineHeight: pen.lineHeight,
-      fontSize: pen.fontSize,
-      fontFamily: pen.fontFamily,
-      fontStyle: pen.fontStyle,
-      fontWeight: pen.fontWeight,
-      text: pen.text,
-      textColor: pen.fontColor,
-      textAlign: pen.textAlign,
-      textBaseline: pen.textBaseline,
-      textBackground: pen.textBackground,
-      lineAnimateType: pen.lineAnimateType,
-      textLeft: pen.textOffsetX,
-      textTop: pen.textOffsetY,
-      animateType: '',
-      frames: [
-
-      ],
-      autoPlay: pen.autoPlay,
-      globalAlpha: pen.globalAlpha,
-      bkType: pen.bkType,
-      gradientAngle: pen.gradientAngle,
-      gradientRadius: pen.gradientRadius,
-      borderRadius: pen.borderRadius,
-      events: [
-
-      ],
-      anchors: [
-        {
-          id: '0',
-          penId: pen.id,
-          x: 0,
-          y: 0.5
-        },
-        {
-          id: '1',
-          penId: pen.id,
-          x: 0.5,
-          y: 0
-        },
-        {
-          id: '2',
-          penId: pen.id,
-          x: 1,
-          y: 0.5
-        },
-        {
-          id: '3',
-          penId: pen.id,
-          x: 0.5,
-          y: 1
-        }
-      ],
-      // connectedLines: [
-      //   {
-      //     anchor: '1',
-      //     lineAnchor: '9a5fccf',
-      //     lineId: '3e3a3d'
-      //   }
-      // ]
-      connectedLines: pen.connectedLines || [],
-      image: pen.image
-    }
-  } else {
-    const width = pen.from.x - pen.to.x
-    const height = pen.from.y - pen.to.y
-    obj = {
-      id: pen.id,
-      keepDecimal: 2,
-      tags: [
-
-      ],
-      name: 'line',
-      scale: 1,
-      lineName: pen.name,
-      type: pen.type,
-      autoPolyline: true,
-      fromArrow: pen.fromArrow,
-      toArrow: pen.toArrow,
-      x: width > 0 ? pen.to.x : pen.from.x,
-      y: height > 0 ? pen.to.y : pen.from.y,
-      width: Math.abs(pen.to.x - pen.from.x),
-      height: Math.abs(pen.to.y - pen.from.y),
-      data: pen.data,
-      valueMapping: pen.valueMapping,
-      anchors: [
-        {
-          anchorId: pen.from.anchorIndex + '',
-          id: pen.id + '-0',
-          penId: pen.id,
-          connectTo: pen.from.id,
-          prevNextType: undefined,
-          x: 0,
-          y: 0,
-          prev: {
-            penId: pen.id,
-            connectTo: pen.from.id,
-            x: -0.2,
-            y: 0
-          },
-          next: {
-            penId: pen.id,
-            connectTo: pen.from.id,
-            x: 0.2,
-            y: 0
-          }
-        },
-        {
-          anchorId: pen.to.anchorIndex + '',
-          id: pen.id + '-1',
-          penId: pen.id,
-          connectTo: pen.to.id,
-          prevNextType: undefined,
-          hidden: undefined,
-          x: 1,
-          y: 1,
-          prev: {
-            penId: pen.id,
-            connectTo: pen.to.id,
-            x: 0.8,
-            y: 1
-          },
-          next: {
-            penId: pen.id,
-            connectTo: pen.to.id,
-            x: 1.2,
-            y: 1
-          }
-        }
-      ],
-      color: pen.strokeStyle,
-      lineWidth: pen.lineWidth,
-      lineDashOffset: pen.lineDashOffset,
-      lineDash: pen.dash ? (pen.dash == 1 ? [5, 5] : ((pen.dash == 2 ? [10, 10] : [10, 10, 2, 10]))) : [],
-      borderColor: pen.borderColor,
-      borderWidth: pen.borderWidth,
-      rotate: pen.rotate,
-      visible: true,
-      background: '',
-      lineHeight: pen.lineHeight,
-      fontSize: pen.fontSize,
-      fontFamily: pen.fontFamily,
-      fontStyle: pen.fontStyle,
-      fontWeight: pen.fontWeight,
-      textColor: '',
-      textAlign: pen.textAlign,
-      textBaseline: pen.textBaseline,
-      textBackground: pen.textBackground,
-      textLeft: pen.textOffsetX,
-      textTop: pen.textOffsetY,
-      animateSpan: pen.animateSpan,
-      animateColor: pen.animateColor,
-      lineAnimateType: 0,
-      animateDotSize: pen.animateDotSize,
-      frames: [
-
-      ],
-      autoPlay: false,
-      globalAlpha: 1,
-      events: [
-
-      ]
-    }
-    if (width > 0 && height > 0) {
-      obj.anchors[0].x = 1
-      obj.anchors[0].y = 1
-      obj.anchors[1].x = 0
-      obj.anchors[1].y = 0
-    } else if (width > 0 && height < 0) {
-      obj.anchors[0].x = 1
-      obj.anchors[0].y = 0
-      obj.anchors[1].x = 0
-      obj.anchors[1].y = 1
-    } else if (width < 0 && height > 0) {
-      obj.anchors[0].x = 0
-      obj.anchors[0].y = 1
-      obj.anchors[1].x = 1
-      obj.anchors[1].y = 0
-    } else if (width < 0 && height < 0) {
-      obj.anchors[0].x = 0
-      obj.anchors[0].y = 0
-      obj.anchors[1].x = 1
-      obj.anchors[1].y = 1
-    }
-    if (pen.name === 'polyline') {
-      obj.anchors.splice(1, 0, {
-        id: s8(),
-        penId: pen.id,
-        x: 0.1,
-        y: 0
-      }, {
-        id: s8(),
-        penId: pen.id,
-        x: 0.5,
-        y: 0
-      },
-      {
-        id: s8(),
-        penId: pen.id,
-        x: 0.5,
-        y: 1
-      },
-      {
-        id: s8(),
-        penId: pen.id,
-        x: 0.9,
-        y: 1
-      }
-      )
-    }
-    pen.data.valueMapping.forEach(item => {
-      if (item.animateType == 1) {
-        item.animateType = 'flow'
-      } else if (item.animateType == 'comet') {
-        item.animateType = 'dot'
-      }
-    })
-  }
-  return obj
-}
-/* 自定义图片组件 */
-// export function myShape (ctx, node) { // 自定义图片组件
-//   ctx.beginPath()
-//
-//   ctx.rect(pen.x, pen.y, pen.width, pen.height)
-//   if (pen.data && pen.data.lineWidth <= 0) {
-//     ctx.strokeStyle = 'rgba(0,0,0,0)'
-//   }
-//   // 必须判空再填充
-//   (pen.fillStyle || pen.bkType) && ctx.fill()
-//   ctx.stroke()
-// }
-// export function myAnchors (node) {
-//   pen.anchors.push(new Point(pen.x, pen.y + pen.height / 2, Direction.Left))
-//   pen.anchors.push(new Point(pen.x + pen.width / 2, pen.y, Direction.Up))
-//   pen.anchors.push(new Point(pen.x + pen.width, pen.y + pen.height / 2, Direction.Right))
-//   pen.anchors.push(new Point(pen.x + pen.width / 2, pen.y + pen.height, Direction.Bottom))
-// }
-// export function myIconRect (node) {
-//   pen.iconRect = new Rect(pen.x + pen.paddingLeft, pen.y + pen.paddingTop, pen.width - (pen.paddingLeft + pen.paddingRight), pen.height - 20 - (pen.paddingTop + pen.paddingBottom))
-//   pen.fullIconRect = pen.rect
-// }
-// export function myTextRect (node) {
-//   pen.textRect = new Rect(
-//     pen.x + pen.paddingLeft,
-//     pen.y + pen.height - 20 - pen.paddingBottom,
-//     pen.width - (pen.paddingLeft + pen.paddingRight),
-//     20
-//   )
-//   pen.fullTextRect = pen.rect
-// }
-// export function myIconRect2 (node) {
-//   pen.iconRect = pen.rect
-//   pen.fullIconRect = pen.rect
-// }
-// export function myTextRect2 (node) {
-//   pen.textRect = new Rect(
-//     pen.x + pen.paddingLeft,
-//     pen.y + pen.height + 10,
-//     pen.width - (pen.paddingLeft + pen.paddingRight),
-//     20
-//   )
-//   pen.fullTextRect = pen.rect
-// }
-// /* 自定义图片组件 */
-//
-// /* 自定义立方体 */
-// export function myCubec (ctx, node) {
-//   // 立方体
-//   // ctx.rect(pen.x,pen.y,pen.width,pen.height);
-//   const x = pen.x + 10; const y = pen.y + 10; const w = pen.width - 20; const h = pen.height - 20
-//
-//   // LINE MODE
-//   ctx.lineJoin = 'round'
-//
-//   // center face
-//   ctx.beginPath()
-//   ctx.moveTo(x, y + h / 3)
-//   ctx.lineTo(x + w * 2 / 3, y + h / 3)
-//   ctx.lineTo(x + w * 2 / 3, y + h)
-//   ctx.lineTo(x, y + h)
-//   ctx.closePath()
-//   ctx.fillStyle = pen.fillStyle
-//   ctx.strokeStyle = pen.strokeStyle
-//   ctx.stroke();
-//   (pen.fillStyle || pen.bkType) && ctx.fill()
-//
-//   // top face
-//   ctx.beginPath()
-//   ctx.moveTo(x, y + h / 3)
-//   ctx.lineTo(x + w / 3, y)
-//   ctx.lineTo(x + w, y)
-//   ctx.lineTo(x + w * 2 / 3, y + h / 3)
-//   ctx.closePath()
-//   ctx.fillStyle = pen.fillStyle
-//   ctx.strokeStyle = pen.strokeStyle
-//   ctx.stroke();
-//   (pen.fillStyle || pen.bkType) && ctx.fill()
-//
-//   // right face
-//   ctx.beginPath()
-//   ctx.moveTo(x + w * 2 / 3, y + h / 3)
-//   ctx.lineTo(x + w, y)
-//   ctx.lineTo(x + w, y + h * 2 / 3)
-//   ctx.lineTo(x + w * 2 / 3, y + h)
-//   ctx.closePath()
-//   ctx.fillStyle = pen.fillStyle
-//   ctx.strokeStyle = pen.strokeStyle
-//   ctx.stroke();
-//   (pen.fillStyle || pen.bkType) && ctx.fill()
-//
-//   // 必须判空再填充
-// }
-// export function myCubeAnchors (node) { // 立方体锚点
-//   pen.anchors.push(new Point(pen.x, pen.y + pen.height / 2, Direction.Left))
-//   pen.anchors.push(new Point(pen.x + pen.width / 2, pen.y, Direction.Up))
-//   pen.anchors.push(new Point(pen.x + pen.width, pen.y + pen.height / 2, Direction.Right))
-//   pen.anchors.push(new Point(pen.x + pen.width / 2, pen.y + pen.height, Direction.Bottom))
-// }
-// /* 自定义立方体 */
-//
-export function onChangeAnimate (pen, animateType, fillStyle, strokeStyle) {
-  pen.animateType = animateType
-  if (pen.animateType === 'custom') {
-    return
-  }
-
-  pen.animateFrames = []
-  // const state = Node.cloneState(pen)
-  const state = {}
-  switch (animateType) {
-    case 'upDown':
-      pen.frames = [
-        {
-          duration: 200,
-          y: 20
-        },
-        {
-          duration: 200,
-          y: 0
-        },
-        {
-          duration: 200,
-          y: -20
-        }
-      ]
-      break
-    case 'leftRight':
-      pen.frames = [
-        {
-          duration: 200,
-          x: 20
-        },
-        {
-          duration: 200,
-          x: 0
-        },
-        {
-          duration: 200,
-          x: -20
-        }
-      ]
-      break
-    case 'heart':
-      pen.frames = [
-        {
-          duration: 300,
-          scale: 1.2
-        },
-        // {
-        //   duration: 300,
-        //   x: 0,
-        //   y: 0,
-        //   width: 0,
-        //   height: 0
-        // },
-        {
-          duration: 300,
-          scale: 0.8
-        },
-        {
-          duration: 300,
-          scale: 1
-        }
-      ]
-      break
-    case 'success':
-      pen.frames = [
-        {
-          duration: 200,
-          color: strokeStyle || '#237804'
-        },
-        {
-          duration: 200,
-          color: strokeStyle || '#237804',
-          backGround: fillStyle || '#389e0d22'
-        }
-      ]
-      break
-    case 'warning':
-      pen.data.animateNeedLine = true
-      pen.frames = [
-        {
-          duration: 500,
-          color: strokeStyle || '#fa8c16',
-          background: fillStyle || '#fa8c16',
-          lineWidth: 5,
-          lineDash: [5, 5]
-        },
-        {
-          duration: 500,
-          color: strokeStyle || '#fa8c16',
-          background: '#ffffff',
-          lineWidth: 1,
-          lineDash: []
-        }
-      ]
-      break
-    case 'error':
-      state.strokeStyle = strokeStyle || '#cf1322'
-      state.fillStyle = fillStyle || '#cf132222'
-      state.lineWidth = 5
-      state.dash = 2
-      pen.animateFrames.push({
-        duration: 100,
-        linear: true,
-        state
-      })
-      state.strokeStyle = strokeStyle || '#cf1322'
-      state.fillStyle = '#ffffff'
-      state.dash = 0
-      state.lineWidth = 1
-      pen.animateFrames.push({
-        duration: 500,
-        linear: true,
-        state: Node.cloneState(state)
-      })
-      state.strokeStyle = strokeStyle || '#cf1322'
-      state.fillStyle = fillStyle || '#cf132222'
-      state.dash = 2
-      state.lineWidth = 5
-      pen.animateFrames.push({
-        duration: 300,
-        linear: true,
-        state: Node.cloneState(state)
-      })
-      break
-    case 'show':
-      pen.frames = [
-        {
-          duration: 100,
-          rotate: -5
-        },
-        {
-          duration: 100,
-          rotate: 0
-        },
-        {
-          duration: 100,
-          rotate: 5
-        },
-        {
-          duration: 100,
-          rotate: 0
-        }
-      ]
-      break
-    case 'fade':
-      state.globalAlpha = 0.3
-      pen.frames = [
-        {
-          duration: 500,
-          globalAlpha: 0.3
-        },
-        {
-          duration: 500,
-          globalAlpha: 1
-        }
-      ]
-      break
-  }
-  pen.animatePlay = true
-}
-export function onChangeAnimateLine (line, type, isOldData) {
-  // { id: 'flow', name: this.$t('project.topology.flow') },
-  // { id: 'beads', name: this.$t('project.topology.beads') },
-  // { id: 'dot', name: this.$t('project.topology.dot') },
-  let animateType = type
-  if (type === 'dot') {
-    animateType = 2
-  }
-  if (type === 'beads') {
-    animateType = 1
-  }
-  if (type === 'custom') {
-    delete line.lineAnimateType
-    return
-  }
-  line.lineAnimateType = animateType
-  line.animatePlay = true
-}
-// export function changeImage (dataImg, callback) {
-//   // const base64Img = document.createElement('base64Img')
-//   const canvas = document.createElement('canvas')
-//   const context = canvas.getContext('2d')
-//   // 创建新图片
-//   const img = new Image()
-//   img.src = dataImg
-//   img.addEventListener(
-//     'load',
-//     function () {
-//       // 绘制图片到canvas上
-//       canvas.width = img.width
-//       canvas.height = img.height
-//       context.drawImage(img, 0, 0)
-//
-//       // 将canvas的透明背景设置成白色
-//       const imageData = context.getImageData(
-//         0,
-//         0,
-//         canvas.width,
-//         canvas.height
-//       )
-//       for (let i = 0; i < imageData.data.length; i += 4) {
-//         // rgb大于250的透明度y均设置成0
-//         if (
-//           imageData.data[i] > 0 &&
-//           imageData.data[i + 1] > 0 &&
-//           imageData.data[i + 2] > 0
-//         ) {
-//           imageData.data[i + 3] = 200
-//         }
-//       }
-//       context.putImageData(imageData, 0, 0)
-//       const baseImg = canvas.toDataURL('image/png')// 返回base64
-//       if (typeof callback !== 'undefined') {
-//         if (callback) callback(baseImg)
-//       }
-//       img.remove()
-//     },
-//     false
-//   )
-// }
diff --git a/nezha-fronted/src/components/common/project/L5/services/img.js b/nezha-fronted/src/components/common/project/L5/services/img.js
deleted file mode 100644
index 0f227bc3c..000000000
--- a/nezha-fronted/src/components/common/project/L5/services/img.js
+++ /dev/null
@@ -1,2 +0,0 @@
-const imgDefault = 'data:image/jpg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL/wAARCAH9Am0DASIAAhEBAxEB/8QAHAABAAIDAQEBAAAAAAAAAAAAAAYHBAUIAwIB/8QASBAAAQMCAgQGDwcEAQUBAQEAAAECAwQFBhEHITHREhNBUVVhFRYXIjI2cXOBk5ShorGyFDRCUmJ0kSMzcsHwJIKSwuGzU9L/xAAXAQEBAQEAAAAAAAAAAAAAAAAAAQMC/8QAHBEBAQADAQEBAQAAAAAAAAAAAAECETESIVFB/9oADAMBAAIRAxEAPwC9gCr9Jek3sFxlmssjXXJUymnTWlOnMnO75eXZZNiU4qx7Y8JMVlbOstYqZtpIMnSLzKvI1OtfRmVHe9NWIa9zmWyKC2w68lRqSyelXJl/CFbzTS1Ez5p5HySvVXPe9c1cvOqrtPg0mMiNzV4txHXqq1N8uEiL+H7Q5G/wi5GF2WuXSFX6528wwdDM7LXLpCr9c7eOy1y6Qq/XO3mGAMzstcukKv1zt47LXLpCr9c7eYYAzOy1y6Qq/XO3jstcukKv1zt5hgDM7LXLpCr9c7eOy1y6Qq/XO3mGAMzstcukKv1zt47LXLpCr9c7eYYAzOy1y6Qq/XO3jstcukKv1zt5hgDM7LXLpCr9c7eOy1y6Qq/XO3mGAMzstcukKv1zt47LXLpCr9c7eYYAzOy1y6Qq/XO3jstcukKv1zt5hgDM7LXLpCr9c7eOy1y6Qq/XO3mGAMzstcukKv1zt47LXLpCr9c7eYYAzOy1y6Qq/XO3jstcukKv1zt5hgDM7LXLpCr9c7eOy1y6Qq/XO3mGAMzstcukKv1zt47LXLpCr9c7eYYAzOy1y6Qq/XO3jstcukKv1zt5hgDM7LXLpCr9c7eOy1y6Qq/XO3mGAMzstcukKv1zt47LXLpCr9c7eYYAzOy1y6Qq/XO3jstcukKv1zt5hgDM7LXLpCr9c7eOy1y6Qq/XO3mGAMzstcukKv1zt47LXLpCr9c7eYYAzOy1y6Qq/XO3jstcukKv1zt5hgDM7LXLpCr9c7eOy1y6Qq/XO3mGAMzstcukKv1zt47LXLpCr9c7eYYAzOy1y6Qq/XO3jstcukKv1zt5hgDM7LXLpCr9c7eOy1y6Qq/XO3mGAMzstcukKv1zt47LXLpCr9c7eYYAzOy1y6Qq/XO3jstcukKv1zt5hgDM7LXLpCr9c7eOy1y6Qq/XO3mGAMzstcukKv1zt47LXLpCr9c7eYYAzOy1y6Qq/XO3jstcukKv1zt5hgDM7LXLpCr9c7eOy1y6Qq/XO3mGAMzstcukKv1zt47LXLpCr9c7eYYAzOy1y6Qq/XO3jstcukKv1zt5hgDNbeLmxyObcqxqprRUncip7zcW/SBiu2uRYL7WORuxs7+NTLmyfmRoDQuPD+nKVrmQ4goGvZs+0UmpU61Yq5L6FTyFuWm826+0Lay2VcdTA7VwmLrReZU2ovUpyAbbD2JLnhi5JXWyoWN+x7F1skbzOTlT/iHFx/B1wCO4OxfQ4ws6VlL/AE548m1FOq64nf7ReRf95kiM+KimkLFiYSwxLUxK37dOvFUrV199lrdlzNTX5ck5Tl6WWSeZ8sr3Pke5XPe5c1cu1VVecsDTFfHXTGr6Jrv+ntzEhanJw1yc9feif9pXprjNRAAHQAlOHdHmI8TRNnoqJI6V2yoqHcBi+Tld6EUlLNBV/Vub7nbGu5mukVP54KE3BVoLU7hN86Ut3x7h3Cb50pbvj3D1BVYLU7hN86Ut3x7h3Cb50pbvj3D1BVYLU7hN86Ut3x7h3Cb50pbvj3D1BVYLU7hN86Ut3x7h3Cb50pbvj3D1BVYLU7hN86Ut3x7h3Cb50pbvj3D1BVYLU7hN86Ut3x7h3Cb50pbvj3D1BVYLU7hN86Ut3x7h3Cb50pbvj3D1BVYLU7hN86Ut3x7h3Cb50pbvj3D1BVYLU7hN86Ut3x7h3Cb50pbvj3D1BVYLU7hN86Ut3x7h3Cb50pbvj3D1BVYLU7hN86Ut3x7h3Cb50pbvj3D1BVYLU7hN86Ut3x7h3Cb50pbvj3D1BVYLU7hN86Ut3x7h3Cb50pbvj3D1BVYLU7hN86Ut3x7h3Cb50pbvj3D1BVYLU7hN86Ut3x7h3Cb50pbvj3D1BVYLU7hN86Ut3x7h3Cb50pbvj3D1BVYLU7hN86Ut3x7h3Cb50pbvj3D1BVYLU7hN86Ut3x7h3Cb50pbvj3D1BVYLU7hN86Ut3x7h3Cb50pbvj3D1BVYLU7hN86Ut3x7h3Cb50pbvj3D1BVYLU7hN86Ut3x7h3Cb50pbvj3D1BVYLU7hN86Ut3x7h3Cb50pbvj3D1BVYLU7hN86Ut3x7h3Cb50pbvj3D1BVYLU7hN86Ut3x7h3Cb50pbvj3D1BVYLU7hN86Ut3x7h3Cb50pbvj3D1BVYLU7hN86Ut3x7h3Cb50pbvj3D1BVYLU7hN86Ut3x7h3Cb50pbvj3D1BVYLU7hN86Ut3x7h3Cb50pbvj3D1BVYLU7hN86Ut3x7h3Cb50pbvj3D1BVYLU7hN86Ut3x7h3Cb50pbvj3D1BVYLU7hN86Ut3x7h3Cb50pbvj3D1BVYLU7hN86Ut3x7h3Cb50pbvj3D1BVYLU7hN86Ut3x7h3Cb50pbvj3D1BVYLNqNB2JImK6Gtts2SZ8HjHtVepM25fypBb3h664drPst1opKaRdbVdra/ra5NS+gSwawAFG/wfiepwniGC4wq50OfAqIkXVJGu1PLyp1odU0tVT11HDV070lgmY2SN7ditVM0U43Og9Ct8dcMKTW2Z6rJbpeC3NU/tvzVu3rR/oyOM4qirzWOuN8r61zuEtRUSS8Ln4TlUwQDtAl+jXDEeKMXQ09S3hUdO1aiobyOaioiN9KqnozIgW9oGYi3O9SL4TYY2p6XO3ITLgu5jGRxtYxjWsaiNa1qZIiciIh9AGKgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABpsUYco8UWKe21bG5ubnFIqa4n5anJ/zXrQ3IA41qIJKWqlp5m8GWJ7mObzORclPM32N40jx1fWt2fbpna+dXKq/M0JugbO0X6usnHfYnZcdweH6M8vmprAAAAAuDQL9+vfmofm4p8uDQL9+vfmofm45y4LuABkoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAOUsdePl9/eyfUR4kOOvHy+/vZPqI8bziAAAAAAXBoF+/XvzUPzcU+XBoF+/XvzUPzcc5cF3AAyUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHKWOvHy+/vZPqI8SHHXj5ff3sn1EeN5xAAAAAALg0C/fr35qH5uKfLg0C/fr35qH5uOcuC7gAZKAAAAAAAAAAAARvFON7LhGDOvn4dS5ucdLFrkf15cidajokhrrlf7RZmqtyuVLS6s+DLKjXL5E2r6Dn/ABHpaxHfHPipZuxlKuyOmXJ6+V+3+MiCPkfLI58j3Pe5c1c5c1VfKdzD9HSdVpdwdTP4LLhLULyrFTvyT0qiGE3TXhRXIituCdawJq+I53B14iOmaLSxg6sVG9lFp3LyTwvb78lT3kqobpb7pFxtBXU9UzbwoJWvRP4U48PamqqiiqGz0s8sEzfBkierXJ5FTWTwOyAc+4a0zXm2OZDeWJcqXYr9TZm+nY70/wAl2WDEtpxPQ/a7VVtma3JHsXU+NeZzV2fJeQ4ssXbbAAgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA5Sx14+X397J9RHiQ468fL7+9k+ojxvOIAAAAABcGgX79e/NQ/NxT5cGgX79e/NQ/NxzlwXcADJQAAAAAAAAAhmkbGrMIWP+grXXOqzZTMXXwed69SZ+lcusSbGr0jaS48MtfarWrZbs5vfPVM2U6Lyrzu5k9K8y8/VdXUV1VLVVc0k1RK7hPkkdmrl61PiaaWomfNM90ksjlc97lzVyrtVVPg2k0gACgAAAAAGfZ7zcLDcoq+21L4KiNdqLqcn5XJyovMpgADp/AePKPGVvVFRsFyhanH0+epf1M52/LZzKsvOPrTdayyXSC40EyxVMDuE13IvOipyoqalQ6lwnialxZYIblTJwXL3k0WeuOTlb/tF5lQyyx0reAA5AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAByljrx8vv72T6iPEhx14+X397J9RHjecQAAAAAC4NAv369+ah+biny4NAv369+ah+bjnLgu4AGSgAAAAAAAPmSRkMT5ZHoyNjVc5yrkiIm1VOU8aYklxTieruLnOWDhcXTMX8MSL3urr2r1qpemlu9LaMCVEUa5S1z0pW/4qiq/wCFFT0nNZphP6AAO0CW4R0eXrFypNBGlNQIuTquZF4K86NTa5fd1mfoywL22XR1VWtVLVSOTjeTjX7UYi83Kq82XPmdHQQRU0DIYI2RRRt4LGMaiI1ORERNhxllr5BXtp0LYYomJ9v+03GXlWSRY2ehG5L71Ny7Rjg1zOAtihyXPZJIi/zwiWg43VVfetCNjq43OtNTPQTa+C168bH5Ml7705lP4nwfeMJ1aQ3KnRI3rlFURrwo5PIvP1Lkp1gYd0tVFerfLQXCnZPTSpk5j096cypyKhZlYOPQSPGuEqjB9/fQyLxlO9OMppsvDZny9abF/wDqEcNeoE+0TYpWwYqZRzycGhuCpE9FXU2T8Dv51L1L1EBP1rla5HNVUVFzRU2oos2OzQaXCN57YMJ225qqLJNCnGZfnb3rviRTdGCgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA+XvZHG573taxqK5znLkiJyqqlP450wti4y24Yej362yV+WaJ1Rou3/JdXNntLJsVpjrx8vv72T6iPH3LLJPM+aaR0kkjlc571zVyrtVV5VPg2QAAAAAC4NAv369+ah+biny4NAv369+ah+bjnLgu4AGSgAAAAAAAKR08VznV1nt6O71kUk7k51cqNRfhX+SnyytOD+HjinTg5cCgjai8/fvXP3+4rU2x4gNuwGwsUTZ8Q2yF6ZsfVxNcnUr0Qo6hwdYWYbwrQW1rcpWRo6ZeeR2ty/wA6vIiG9AMFAAAAAEC0u2Fl3wTNVtYi1NuXj2Ly8HY9PJlr/wC1Dm46+v8AEybDtziembH0krXJzorFzOQTTDiAAOx0DoPrlqMH1VI5c1pqt3B6muai/PhFmlO6BHKtLfWK1ckfCvC5FzR+r3e8uIyy6sAAcgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGrv2IrZhq3OrbpUthjTU1u18jvytTlX/ikYxvpNtuFWvpKXgVt1yySFF7yJed6p9Ka/JtOfb3frliK4vrrnVPnmdqTPU1iflanIh1MdiS420k3PFr3U0XCo7Wi97TtXXJzK9eXybE69pCQDWTSAAAAAAAABcGgX79e/NQ/NxT5cGgX79e/NQ/NxzlwXcADJQAAAAAAAFCadadzcU26p18GSi4tNXK17lX60KsL5052pajD1vubGqrqSdY3qnI16bV9LWp6ShjXHiB7UtQ6krIKlnhwyNkb5UXM8QdDsijqoq6igq4HcKGeNsjF52uTNPmexVWhrF8ddae12rkyq6RFdT8Jf7kWeeSdbVX+MuZS1TGzVUABAAAEex1cm2nA94qlejXfZnRMXP8b04LcvSqHKRbOmfF7K+tiw9RS8KGldw6pzV1Ok2I3/tTPPrXqKmNcJqIAA6F6aB6dzbJd6n8ElSyNPK1ua/WhbRC9FNrW2aPqDht4MlUrql+r8y978KNJoY5dWAAIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABo8T4ttOE6Bam5T5Pcn9KnZkskq9Sc3WupANxUVENJTyVFTNHDDG1XPkkcjUanOqqUljrTBLVLJbcMvdDBrbJXZZPf1MRfBTr282XLDcY4+u2MKhWzv+z0DXZx0ka96nMrl/EvX/GRFDSYo/XOc9yucquc5c1VVzVVPwA7AA3WGsK3XFdwSktsHCRP7kz9UcSc7l/1tA0oNhfbZ2FvtbbON41aWZ0SyZZcJUXLPLkNeAAAAAAC4NAv369+ah+biny4NAv369+ah+bjnLgu4AGSgAAAAAAANZiKzx4gw7X2qVURKmJWNcuxrtrXehyIvoOSaqmmoqualqGKyaF7o5GLta5FyVP5OySkNM2DXQ1KYmoYf6MuTaxGp4LtjX+nYvXlzneF/gqAAGiPeiram3VkNZRzPhqIXcOORi5K1S/sF6W7ZeoYqO9SR0FxRODxjl4MMq86L+FepfQvIc9Almx2a1zXtRzVRzXJmiouaKh+nI9rxRfbK3gW67VdPH//ADZKvA/8V1e43DtKGM3xJGt8l4POkMaL/KNzOPCunJ6iClgfNUTRwwsTN0kj0a1vWqrqQqLHWmCGOGW24Yk4yVycGSuyyRnm+df1cnJnyVFcr5dbzJw7lcaqqXPNEllVyJ5E5PQa8sw11H65znvV73K5zlzVVXNVXnPwA7A22GLFNiTEVFaoc046Tv3p+Bia3O9CIvpyNSX/AKH8GrZ7U6+V0PBra1uULXprjh2/y7UvkROsmV1BZkMMdPBHBCxGRRtRrGpsRqJkiH2AYqAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAxq+4UlropKyuqI6emjTN8ki5In/OYonHOlurvPG26wrJSW9e9fPslmT/1b715eYslom+OdK9Fh/jbfaOBWXNE4Ln55xQr1qnhO6k9PMULc7pXXmvkrrjUyVFTIvfPevuTmTqTUYYNZJEAAUAe9FRVVxrI6SjgknqJV4LI425ucpeuBtEVLaeLuOIGsqq5F4TKbwool6/zO93l2ktkEHwNorr8R8VcLnxlFa11pmmUkyfpRdifqX0IpftqtNBZLfHQW2mZT00exjE2rzqu1V61M3ZsBlbaunKWOvHy+/vZPqI8SHHXj5ff3sn1EeNpxAAAAAALg0C/fr35qH5uKfLg0C/fr35qH5uOcuC7gAZKAAAAAAAAHjVU0NbSy0tTE2WCZiskjcmaOaqZKinsAOZ9IOj+qwjcHT07JJrRM7+lNtWNV/A/r5l5f5ISdj1lHTXCjlpKyFk9PM3gvjemaOQo3Gmh2st75K7DjX1dH4TqVVzlj/x/Mnv8u00xy/RVQPp7Hxvcx7XNe1cla5MlReZT5O0AAAAAAHvSUdTX1UdNRwSTzyLk2ONquVy+RC5cEaHGwvjuOJ2te9MnMoEXNE84qbf8U1c6rsJcpBpNGGjd94nivd4hc23RqjoIXp94XnVPy/PyF+7Nh+Na1jEYxqNa1MkREyRE5j9MrdqAAgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAFXJM11IgAjWLscWnB9Jw6yTjatyZxUkapw39a/lb1r6MyHY60vU9t4224dcyorEza+ry4UcX+P5l69nlKOrKypuFXJVVk8k88ruE+SR2auXyneOO+jc4qxld8XVvHXCXgwMVVhpo9TI/InKvWuv5EfANOIADbsAEjwngq74vrOLoYuBTMXKaqkTJjN69Se4l+BtEVVduLuOIGyUtCvfMp072WXy/lb7/JtL0oaGlttHHR0UDIKeJMmRxtyRDjLL8Gkwngq04Qo+LoYuMqXplNVSJm9/V1J1J79pIwDPqgAA5Sx14+X397J9RHiQ468fL7+9k+ojxvOIAAAAABcGgX79e/NQ/NxT5cGgX79e/NQ/NxzlwXcADJQAAAAAAAAAAAABHsQ4Jw/idOFcqBjp8skqI14Eif9ybfIuaFbXbQRKjnPs94Y5v4YqtmSp5Xt2/8AihdQLMrDTmuq0Q4yplXgW+KoanLDUM+TlRTC7mOMtnYKb1kf/wDo6hB17o5vpNDmMKlyJLS01LnyzVDVy/8ADhEws2gqmje2S83V82W2GlZwU/8AJ2a+5C4AT1RqbHhqz4cp1htNBFTo7w3omb3eVy61/k2wByAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQ/GmkS1YQhWFVSquTm5spWO1pzK9fwp71EmxIbvebfYbfJX3KqZT07PxO2qvMicq9SFA440pXDEyyUNv4yitS96rEX+pMn61TYn6U9OZFsRYmuuKbgtZc6hZFTNI426mRJzNTk+a8ppzWY66gADoACW4M0f3XGFQj4m/Zrc12UlW9ve9aNT8S+5OVRvQj9rtNfe7hHQ22mfUVMngsYnJzquxE611F+YG0VUGHEjr7pxdbdETNEVM44V/Si7V/UvoyJVhrCtqwpb0pbbAjXOT+rM/XJKvO5f9bEN2ZXLfFAAcgAAAAA5Sx14+X397J9RHiQ468fL7+9k+ojxvOIAAAAABcGgX79e/NQ/NxT5cGgX79e/NQ/NxzlwXcADJQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD5kkZFG6SR7WMaiuc5y5Iic6qay/4jteGbctbdKlsUetGMTW+R35Wpyr/wAXI56xrpIumLpHU7OFR2xF72mY7W/revKvVsT3nUx2JtjnTCjONtuGH8J2tsleqak82nL/AJL6ORSmJZpaiZ800j5JXrwnPe5VVyrtVVXap8A0k0gACgfrGOke1jGq57lRGtRM1VeZDZWOwXPEdwbRWuldPKuty7GsTncvIh0FgjRnbMJsZVT8GtuuWazub3sXUxOTy7fJsJctCFYG0PST8VcsTMdHH4TKDY53nF5E/Tt58thdUEENLTsgp4mRQxt4LI42o1GonIiJsPQGVu1AAQAAAAAAAAcpY68fL7+9k+ojxIcdePl9/eyfUR43nEAAAAAAuDQL9+vfmofm4p8uDQL9+vfmofm45y4LuABkoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA0eJsXWfCdGlRc6jJ7v7cEffSSeRObrXJCq6zTxXOmX7FZKZkSLq4+Vz1VPRll7yzG02vAFS2HTjQ1VQyC9W51Ejly+0Qv4xidbm5ZonkzLWp6iGqp46inlZLDI1HMkYuaOauxUUWWD0ABAAAAAAAAAAAAAAAAAAAAAAAAAAPGqqoKKmkqaqaOGCNvCfJI5GtanOqqB7ECxvpPtuFmyUdHwK267OKRe8hX9apy/pTX5CE450wTVnG23DT3wU/gvrdaPf8A4flTr2+QqVzlc5XOVVVVzVV2qp3jj+jYXq+XLENxfXXOpfPO7UmexqflamxE6jXAGiAB6QQTVM7IIInyzSKjWsY1XK5eZETaB5k4wTo0ueLHsqp+FRWpF1zubrk6o0Xb5dnl2E2wNoejg4u5YnY2STwmUOebW+cXlX9KaufPYW+xjY2NYxqNY1ERrUTJETmQ4yy/Fa2x4ftmHLe2itdK2CJNbl2uevO5dqqbMAzAAAAAAAAAAAAAByljrx8vv72T6iPEhx14+X397J9RHjecQAAAAAC4NAv369+ah+biny4NAv369+ah+bjnLgu4AGSgAAAAAAAAAAAAAAAAAAAAAAAABhXW7UFkoJK65VUdPTR7XvX3Im1V6k1gZpWWONLdFZUkoLGsdbcE7102ecUK+X8TupNXPzEFxxpXr8Q8bQWnjKK2r3rnZ5SzJ1qngp1J6V5CuDSYfoyrjc62710lbcKmSoqZFzdJIua+ROZOpNRigHaBa2iLHfY2qbhy5TZUc7v+lkcuqKRV8HyOX+F8pVI2bCWbHZwK70WY67ZLX2MuE2d1pGeE5dc8exHeVNi+heXVYhlZpQAEAAAAAAAAAAAAAAAAAAAACtcc6WaKw8Zb7NwKy5Jm10mecUC9f5ndSaudeQsmxLMT4utOE6Fai4z/ANRyLxVOzXJKvUnN1rqOecYY9u2MKlUqHrBQNdnFRxu71vMrl/E7rX0IhH7jc62710lbcKmSoqZFzdJIua+ROZOpNRimkx0gADoACxMDaK6/EfFXC58ZRWtdaZplJMn6UXYn6l9CKLdCK4awrdcV3BKS2wcJE/uTP1RxJzuX/W06GwZo+tWD4EkjalTcXNykq3t19aMT8Ke9eVSQ2q00Fkt8dBbaZlPTR7GMTavOq7VXrUzTK5bUAByAAAAAAAAAAAAAAAAOUsdePl9/eyfUR4kOOvHy+/vZPqI8bziAAAAAAXBoF+/XvzUPzcU+XBoF+/XvzUPzcc5cF3AAyUAAAAAAAAAAAAAAAAAAAAAAfEs0VPC+aaRkcTE4T3vciI1E2qqrsQprHGmJV4y3YXfkngyV6t//ADRfqX0c5ZNicYz0iWnCEToXL9quStzZSxu2cyvX8Ke/qOesR4puuKrgtXc6hX5f24m6o4k5mt5PLtXlU1Essk8r5ZXukkevCc965q5eVVVdqnyaTGRAAHQAG+r8G362YfhvdZQSQ0cr+Ciu8Juexzm8iLyZ/wC0zDQgADMtV0q7LdKe40MvFVNO/hMd80XnRUzRU5lOpsJYnpMWWGG5Uyo1697PFnmsUiJrb5OVF5UVDk0lOA8Yz4PvzKjvn0M+TKqJPxN/Mn6kzzT0pynOU2OpQeNLVQV1JDV0srZaeZiPjkaupzVTNFPYyUAAAAAAAAAAAAAAAAMa4XGjtVFJW19THT00aZvkkdkib16jQ4vx1acH0udU/jq17c4qSNe/d1r+VvWvozOd8VYxu2Lq7jrhNlCxVWGmZqZH5E5V611nUx2JdjnS1WXvjLfY1ko7fra+XPKWZPR4LeravLzFZAGkmkAAUD3oqKquNZHSUcEk9RKvBZHG3NzlN5hPBV3xfWcXQxcCmYuU1VImTGb16k9x0RhPBVpwhR8XQxcZUvTKaqkTN7+rqTqT37Tm5aEQwNoipbTxdxxA1lVXIvCZTeFFEvX+Z3u8u0tLZsAM7dqAAgAAAAAAAAAAAAAAAAAADlLHXj5ff3sn1EeJDjrx8vv72T6iPG84gAAAAAFwaBfv1781D83FPlwaBfv1781D83HOXBdwAMlAAAAAAAAAAAAAAAAAAANJiXFVqwpQfarlUI1Xf24Wa5JV5mp/vYhEccaWaGwcZQWfi625J3rn55xQr1qnhO6k9K8hQ1zutdea+SuuNTJUVMnhPevuTmTqTUdzESPGWkK7YvmdE9y0tua7NlJG7UvMr1/Evu5kIgAaSaQAAAzrTZ7hfbhHQ22mfUVD9jWpsTnVeROtSS4L0cXXF0rZ3ItJbEXvqmRvh86MT8S9exPcdB4dwxasL29KO10yRtXJZJHa3yLzudy/JOQ5uWhE8D6KqDDiR1904utuia01ZxQr+lF2r+pfQiE8rqGmuVBPRVkTZaediskY7YqKZAM7Vcq42wlU4Pv8lFJwn0z85KaZU/uM3psX/wCoRs6txnhSlxfYJKCbgsnb39PNlrjfyehdipuQ5buFBU2u4T0NZE6KpgerJGLyLu6zTG7RjAA6FraIsd9japuHLlNlRzu/6WRy6opFXwfI5f4Xyl8HGOzYdFaLMddslr7GXCbO60jPCcuuePYjvKmxfQvLqzzx/qrEABwAAAAAAAAABgXi9W6wW99dc6qOngZyuXW5eZqcq9SAZyqjUVVXJE2qpVGOtL8Fv4y24bcyoq0719Z4Ucf+KbHL17PKQjHGlG44nWSioOHRWrZwEXKSZP1qnJ+lNXPmQA0mH6PaqqqiuqpKmqmkmnkdwnySOVyuXnVVPEA7QAM212mvvdwjobbTPqKmTwWMTk51XYida6gMLbsLSwNoiqrtxdxxA2SloV75lOneyy+X8rff5NpN8DaKqDDiR1904utuiJmiKmccK/pRdq/qX0ZFimeWf4rHoaGlttHHR0UDIKeJMmRxtyRDIAOAAAAAAAAAAAAAAAAAAAAAAAAByljrx8vv72T6iPEhx14+X397J9RHjecQAAAAAC4NAv369+ah+biny4NAv369+ah+bjnLgu4AGSgAAAAAAAAAAAAAARLGWkG04PhWOV32m4ubnHSRrr8rl/CnvXkQSbEhud0obNQSVtxqY6emj8J8i5J5E516k1lEY40tV18WSgsqyUVu1tdJslmTrX8KdSa+deQiGJsWXbFlf9puU+bGqvFQM1RxJzNT/a61NGazHXUAAdAAb3DGEbviyu+z22BVjav9WofqjiTrXn6k1gaaCCaqqGQU8Uks0juCyONquVyryIibS6MD6HGRcVccTtR7/CZQIupPOKm3/FNXPnsJtg7AFpwfAj4WfaLg5uUlXI3vutGp+FP+KqksM7lvivmONkUbY42NYxqZNa1MkROZEPoA4AAACs9LGBeztvW9W6LO5UrP6jGprnjT5uTanOmacxZgLLocYgs/S1gXsLXuv1uiyt9U/wDrMamqGRf/AFd7l1cqFYGsu0DMtV0q7LdKe40MvFVNO/hMd80XnRUzRU5lMMFHWWEsT0mLLDDcqZUa9e9nizzWKRE1t8nKi8qKhvDlrAeMZ8H35lR3z6GfJlVEn4m/mT9SZ5p6U5Tp+lqoK6khq6WVssEzUfHI1dTmqmaKZZTSvYAHIAAAD4kkZDE+WV7WRsRXOe5ckanKqryFOY50xZcZbcMP52yV6p7o0X6l9HOWTYmmNdItrwhE6BFSquitzZSsXwc9ivX8KdW1fec9YhxLdMUXBay51KyOTNI401MjTmanJ815TVSyyTyvlle6SR68Jz3rmrl5VVV2qfJrMdIAAoA/WMdI9rGNVz3KiNaiZqq8yFv4G0PST8VcsTMdHH4TKDY53nF5E/Tt58thLdCGYM0f3XGFQj4m/Zrc12UlW9ve9aNT8S+5OVTobDWFbVhS3pS22BGucn9WZ+uSVedy/wCtiG3gghpadkFPEyKGNvBZHG1Go1OZETYehnctqAA5AAAAAAAAAAAAAAAAAAAAAAAAAAAcpY68fL7+9k+ojxIcdePl9/eyfUR43nEAAABtcSWeawYjr7ZMxWrBM5GZ/iZtavpRUU1QAuDQL9+vfmofm4p8vXQZZ5aaz3G7SsVrayRscOfK1meap1Zuy/7TnLgtkAGSgAAAAAAAAAAHxJIyGJ8sr2sjYiuc9y5I1OVVXkNViLE9qwtQLV3OpSNFzSOJut8i8zW8vl2Jyqc9400i3XF0roc1pLYi95Sxu8LmV6/iXq2J7zqY7E4xxpiazjLbhhyOdra+vVNSebTl/wAl9HOUxNNLUTPmnkfJK9Vc971zVy86qu0+AaSaQABQBm2m0V98uDKG20slRUP2NZydaryJ1qX3gfRTQYdSKvuvArbonfN1ZxQr+lF2r1r6EQlsgguB9ElZe0iuF84yjt65ObFslmT/ANW9a6195e1uttHaaGOioKaOnpo0yZHGmSJ19a9amUDK21dAAIAAAAAAAAMeuoaa5UE9FWRNlp52KyRjtiopy7jbCVTg+/yUUnCfTPzkpplT+4zemxf/AKh1UR7GeFKXF9gkoJuCydvf082WuN/J6F2Km5DrG6HKQMm4UFTa7hPQ1kToqmB6skYvIu7rMY1QLW0RY77G1TcOXKbKjnd/0sjl1RSKvg+Ry/wvlKpGzYSzY7OBXeizHXbJa+xlwmzutIzwnLrnj2I7ypsX0Ly6rEMrNKGpxBiW14Yt61l0qUiZsZGmt8i8zU5V/wCKRfHOlC3YWSSiouBW3VNSxoveQ9b1Tl/SmvnyOf7ze7jf7g+uuVU+ed/K5dTU5mpsROpC447EixrpGumLpXQIq0lsaveUzHeHzK9fxL1bE95DQDWTSAAAGzsdgueI7g2itdK6eVdbl2NYnO5eRCS4J0aXPFj2VU/CorUi653N1ydUaLt8uzy7DoOx4ftmHLe2itdK2CJNbl2uevO5dqqc3LQjOCNGdswmxlVPwa265ZrO5vexdTE5PLt8mwnIBlbtQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHKWOvHy+/vZPqI8SHHXj5ff3sn1EeN5xAAAdQ40wBbMZwsfM51NXRN4MdVG3NcvyuT8Sf8zKnqtCWJ4ZuDTzUFRHnkj0lVq5c6oqfLM6FBlMrFUrh/QbMlQ2bEFfHxTVz+z0iqqu6leqJl6E9KFyUtLBQ0kVLSwtighYjI42JkjWpsRD2BLbQABAAAAAAADFuFxo7TQy1tfUx09NGmbpJFyRN69W1QMorrHOlWgw5xlBa+LrbompdeccK/qVNq9SelUILjjS5WXpJLfYllo6Be9dNslmT/1Tya15eYrA7mH6M27XevvlwfXXKqkqKh+1z+TqROROpDCANEAD0gglqZ2QwRvllkcjWMY1VVy8iIibQPMmWC9HV1xdK2bJaS2Ivf1UjfC50Yn4l69ie4nGB9DrWcXccTt4TvCZQIupPOKm3/FPSvIXDHGyGJkUTGsjYiNaxqZI1ORETkOLn+DVYdwxasLUCUlspkjRclkldrfIvO53L5NiciG4AM1AAAAAAAAAAAAAAAAVnpYwL2dt63q3RZ3KlZ/UY1Nc8afNybU50zTmOfTs4oDS1gXsLXuv1uiyt9U/+sxqaoZF/wDV3uXVyod45fwVgADRGZarpV2W6U9xoZeKqad/CY75ovOipmipzKWLirTLX3agZR2aF9vR8afaJuFnJwsu+axU2Jnnr2r1FXAmpR+qquVVVc1Xaqn4AUADdYawrdcV3BKS2wcJE/uTP1RxJzuX/W0DUwQTVM7IIInyzSKjWsY1XK5eZETaXVgbQ9HBxdyxOxsknhMoc82t84vKv6U1c+ewmWDNH1qwfAkkbUqbi5uUlW9uvrRifhT3ryqS4zuSvxjGxsaxjUaxqIjWomSInMh+gHAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADlLHXj5ff3sn1EeJDjrx8vv72T6iPG84gAAOzgAYKAAAAAAAAA+XvZHG573taxqK5znLkiJyqqlQ440xRwcZbsMObJL4L69Uza3zacq/qXVzZ7SybE1xhj60YQp3Nnf9or3JnHSRu75eZXL+FOtfQinPWKMYXfFtbx9xnXimqqxU7NUcfkTn611mlqKiarqJKipmkmmkcrnySOVyuXnVVPM0mOkAAdAAWbgfRJW3virhe+MorevfMiyylmT0+C3rXXzc5LdCHYZwldsWV32a2wKrGr/AFZ36o4k61/0ms6Fwdo/tOD4Ukhb9puDkykq5G6+tGp+FPfzqSO3WyitFDHRW+mjp6aNMmxxpknlXnXrXWZRnctqAA5AAAAAAAAAAAAAAAAAAADHrqGmuVBPRVkTZaediskY7YqKZAA5VxthKpwff5KKThPpn5yU0yp/cZvTYv8A9QjZ1bjPClLi+wSUE3BZO3v6ebLXG/k9C7FTchy3cKCptdwnoayJ0VTA9WSMXkXd1muN2jGAB0APeioqq41kdJRwST1Eq8Fkcbc3OUvXA2iKltPF3HEDWVVci8JlN4UUS9f5ne7y7SWyCD4G0V1+I+KuFz4yita60zTKSZP0ouxP1L6EUv21WmgslvjoLbTMp6aPYxibV51Xaq9ambs2AyttXQACAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA5Sx14+X397J9RHiQ468fL7+9k+ojxvOIAADs4AGCgAAAAAanEGJLXhi3rWXSpbEzYxia3yLzNbyr/xSKY40p27DSS0Nv4FbdU1K1FzjhX9aptX9Ka+fIoG8Xq4364PrrlVSVE7+Vy6mpzNTkTqQ6mOxJsa6Sbpi17qZmdHa0XvaZjtb+t68vk2J7yFAGsmkAAAM21WmvvdfHQ22lkqKmTYxie9V2InWuokmDNHV1xfI2ZG/Zbajsn1UieFzoxPxL7k5zoTDmFrVhWgSktlOjM/7krtckq87ncvk2JyIc3LQiOB9FFBh/i6+7cXXXJO+a1UzihX9KL4S9a+hOUscAzt2oACAAAAAAAAAAAAAAAAAAAAAAAAAQPSFo4gxextbRyMprrG3go96d5K3ka7LZlyLr5ubKeAsuhyvX6PMW26VzJbFWS5LkjqdnHIv/jmZ9j0WYpvFQxstA+3wL4c1WnA4Pkb4Sr6PSh0yDr3RHMJ4KtOEKPi6GLjKl6ZTVUiZvf1dSdSe/aSMA46AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA5Sx14+X397J9RHiQ468fL7+9k+ojxvOIAADs4AGCgBF8X47tGD6b/AKp/HVjkzipI1Thu61/KnWvozHRIK6vpLZRyVlbUR09PGmb5JHZIhReONL1XdVlt+H1fS0PguqV1Syp1flT3+TYQ7FWM7vi6t46vm4MDVXiqaPVHH6OVetdfyI8aTH9Q27QAdgAbzDOE7tiuv+zW2nVzWqnGzv1RxJ+pf9bVA00MMtRMyGCN8kr1RrGMTNXLzIibS5sD6HEakdxxO3NfCjoEXUnnF/8AVPSvITfBmj61YPgSSNqVNxc3KSre3X1oxPwp715VJcZ3JXxHGyGJkUTGsjYiNaxqZI1ORETkPsA4AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHKWOvHy+/vZPqI8SHHXj5ff3sn1EeN5xAAAdnH45zWMV73I1rUzVVXJETnNRiLFFpwtQfa7pU8Wjs0jjanCfIvM1vL5dicqoUDjXSZdMVufSwcKitez7Ox2uTrevL5Nnl2mUxtVOccaYYaTjLdhpzZp0719aqZsZ/gn4l69nlKTqqqetqZKmqmkmnkdwnySOVznLzqqnkDSSRAAFAGZa7VX3q4R0NtppKipk8FjE96rsROtdRfWB9E9BYOKuF34utuSZOaxUzihXqRfCXrX0JyktkEEwPolrr4sdfekkordqc2PZLMnUn4U6118ycpe9stdDZqCOit1NHT00fgsjTJPKvOvWuszAZW2roABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHKWOvHy+/vZPqI8SHHXj5ff3sn1EeN5xAAASLHGIpsTYrrK171WBr1ipm56mxtXJMvLtXrVSOgAAD7ihlqJmQwxvklevBaxjVVXKuxERNqgfBMMGaO7ti+VszUWltqOyfVSN1LzoxPxL7usm+B9DmqO44ob+plAi//AKKn0p6eYuSKKOCJkUMbY42IjWMYiIjUTkRE2HFz/BqcN4WtWFaBKS2U6Mz/ALkz9cki87l/1sNyAZqAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA5Sx14+X397J9RHiQ468fL7+9k+ojxvOIAAAAABbegmlglu12qJIY3TQxRpG9zc1ZwldnkvJnkhUhcGgX79e/NQ/NxzlwXcADJQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAcpY68fL7+9k+ojxIcdePl9/eyfUR43nEAAAAAAuDQL9+vfmofm4p8uDQL9+vfmofm45y4LuABkoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAOUsdePl9/eyfUR4kOOvHy+/vZPqI8bziAAAAAAXBoF+/XvzUPzcU+XBoF+/XvzUPzcc5cF3AAyUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHKWOvHy+/vZPqI8SHHXj5ff3sn1EeN5xAAAfrmqxytcio5q5Ki8in4bnFlvdasXXaicmXF1UnA1Zd6q5tX+FQ0wAtnQRUsZfLtTK5qOkpmvROVeC7JfqKmNxhjEFThfEFNdaZOE6JcnxquSSMXU5q+j35KSz4OtgabD2KrPieibUW2rY9ypm+Fyokka8zm/72G5MdKAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAFdaQtJVvsltqLfa6qOousrVjRYnZpT8iuVU/EnInPtLJsUfi2qbW4wvVSxUcyStmVqpyt4a5e7I0w27QbRAAmmA8ESYvbXvRUa2mWNM3P4KKruF/OxBboSfThh50F0pb/Cz+jUtSCdU5JGp3qr5W6v8AtKkOvL9ZaXENkqrXWJnDUN4OaJrY7ajk60XJTlfENgrcNXme218atkjXvH5apG8jm9S//DnC/NDVgA6H1HI+KRskb3Me1c0c1clRfKbBmIL1G1GsvFwa1NiJUvRE95rQBs+2O+9NXH2p+8dsd96auPtT95rAT4Nn2x33pq4+1P3jtjvvTVx9qfvNYB8Gz7Y7701cfan7x2x33pq4+1P3msA+DZ9sd96auPtT947Y7701cfan7zWAfBs+2O+9NXH2p+8dsd96auPtT95rAPg2fbHfemrj7U/eO2O+9NXH2p+81gHwbPtjvvTVx9qfvHbHfemrj7U/eawD4Nn2x33pq4+1P3jtjvvTVx9qfvNYB8Gz7Y7701cfan7x2x33pq4+1P3msA+DZ9sd96auPtT947Y7701cfan7zWAfBs+2O+9NXH2p+8dsd96auPtT95rAPg2fbHfemrj7U/eO2O+9NXH2p+81gHwbPtjvvTVx9qfvHbHfemrj7U/eawD4Nn2x33pq4+1P3jtjvvTVx9qfvNYB8Gz7Y7701cfan7x2x33pq4+1P3msA+DZ9sd96auPtT947Y7701cfan7zWAfBs+2O+9NXH2p+8dsd96auPtT95rAPg2fbHfemrj7U/eO2O+9NXH2p+81gHwbPtjvvTVx9qfvHbHfemrj7U/eawD4Nn2x33pq4+1P3jtjvvTVx9qfvNYB8Gz7Y7701cfan7x2x33pq4+1P3msA+DZ9sd96auPtT947Y7701cfan7zWAfBs+2O+9NXH2p+8dsd96auPtT95rAPg2fbHfemrj7U/eO2O+9NXH2p+81gHwbPtjvvTVx9qfvHbHfemrj7U/eawD4Nn2x33pq4+1P3jtjvvTVx9qfvNYB8Gz7Y7701cfan7x2x33pq4+1P3msA+DZ9sd96auPtT947Y7701cfan7zWAfBs+2O+9NXH2p+8dsd96auPtT95rAPg2fbHfemrj7U/eO2O+9NXH2p+81gHwbPtjvvTVx9qfvHbHfemrj7U/eawD4Nn2x33pq4+1P3jtjvvTVx9qfvNYB8Gz7Y7701cfan7x2x33pq4+1P3msA+DNnvFzqmKyouVZM1UyVsk7nIqc2tTCAKAAAHTejHDzsPYKpmTRI2qq1+0zI5utquRMm+huXpzKo0WYGfiK7suldCvYqkeju+TVNImtGpzom1f45Too4yy/ihHcX4NtuMbb9mrG8XUR64Klid/Gv8AtF5U/wB6yRAz4OUsUYMvGE6pY7hTqtOrso6mNM45PTyL1LrI8dk1EENTTuhqIWTQyJwXRyNRzXJzKi6lQr+96G8NXN7pKLj7bMuv+i7hRqq/pd/pUNJmOdgSzFmCu1eWVnZD7VwOXieBn8SkTO9oAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA+o28OVjM8uEqJnzFm4U0TQX+J1RUXeSONuWbI4ERV1fmV2r+CW6FYFj4I0UXG/SR1t4ZJQ2xF4XBcnBlmTmai+CnWvoz2pbmHtHGGsOSNlpqHj6pjskqKleMei86cjV8icpKzi5K8KKiprdRQ0dHCyGnhbwI42JkjUPcA4H/9k='
-export default imgDefault
diff --git a/nezha-fronted/src/components/common/project/L5/topoTooltip.vue b/nezha-fronted/src/components/common/project/L5/topoTooltip.vue
deleted file mode 100644
index 4e6d19c46..000000000
--- a/nezha-fronted/src/components/common/project/L5/topoTooltip.vue
+++ /dev/null
@@ -1,446 +0,0 @@
-<template>
-  <div class="tooltip-box" style="display: flex;" v-if="(isChart||chartData.tooltipShow)&&chartData.expressAllArr&&chartData.expressAllArr.length">
-    <div class="tooltip-box-chart" style="" v-if="isChart||(chartData.displayChart&&chartData.tooltipShow&&chartData.expressAllArr&&chartData.expressAllArr.length)">
-        <line-chart-block v-show="isChart || chartData.type !== 'table'"
-                          :key="'inner' + chartData.id"
-                          :class="isPanel? 'topology-tool-tip line-chart' : 'line-chart'"
-                          id="listContainer"
-                          :from="'topology'"
-                          :ref="chartData.type !== 'table'?'editChart' + chartData.type:'editChart'"
-                          :temp-dom="tempDom"
-                          :panel-id="-1"
-                          :is-lock="true"
-                          :chart-index="-2"
-                          :fromTopo="true"
-                          :chartTitleShow="false"
-                          :chart-data="chartData">
-        </line-chart-block>
-      <div v-if="chartData.remark" class="chart-remark">{{chartData.remark}}</div>
-      <chart-table  v-show="isChart || chartData.type === 'table'"
-                    :key="'inner' + 1"
-                    :from="'project'"
-                    ref="editCharttable"
-                    :is-lock="true"
-                    :panel-id="-1"
-                    :chart-data="chartData"
-                    :chart-index="0"></chart-table>
-    </div>
-<!--    <div class="tooltip-box-info" v-if="!isChart">-->
-<!--      <expression-info :chart-data="chartData" :filterTime="filterTime"/>-->
-<!--    </div>-->
-  </div>
-</template>
-
-<script>
-import lineChartBlock from '@/components/chart/chart/line-chart-block'
-import chartTable from '@/components/chart/chart/chart-table'
-import bus from '../../../../libs/bus'
-import ExpressionInfo from '../popData/expressionInfo'
-import { fromRoute } from '@/components/common/js/constants'
-import chartTempData from '@/components/chart/chartTempData'
-import axios from 'axios'
-import chartDataFormat from '@/components/chart/chartDataFormat'
-import { dealLegendAlias } from '@/components/common/js/tools'
-export default {
-  name: 'topoTooltip',
-  components: {
-    ExpressionInfo,
-    lineChartBlock,
-    chartTable
-  },
-  props: {
-    chartDataParent: {
-      type: Object
-    },
-    filterTime: {},
-    isChart: {
-      type: Boolean,
-      default: false
-    },
-    isPanel: {
-      type: Boolean,
-      default: false
-    }
-  },
-  watch: {
-    chartDataParent: {
-      immediate: true,
-      handler (n) {
-        this.process(n)
-      }
-
-    }
-  },
-  data () {
-    return {
-      tempDom: { height: 250, width: '' },
-      chartDataTemp: { id: 8832, prev: null, next: null, dashboardId: 0, title: '123', span: 12, height: 0, createAt: '2021-01-27 07:36:19', unit: 2, weight: 0, pid: null, buildIn: null, seq: null, param: { last: 0, legendValue: { total: 'off', min: 'off', avg: 'off', last: 'off', max: 'off' }, threshold: '', url: '', nullType: 'null' }, sync: null, asset: null, isLoaded: true, from: '__vue_devtool_undefined__', draggable: true, resizable: true, editable: true },
-      chartData: {},
-      filter: {
-        end_time: bus.timeFormate(bus.getOffsetTimezoneData(), 'YYYY-MM-DD HH:mm:ss'),
-        dashboardId: 0,
-        searchName: '',
-        start_time: bus.timeFormate(bus.getOffsetTimezoneData(-1), 'YYYY-MM-DD HH:mm:ss')
-      }
-    }
-  },
-  mounted () {
-    this.tempDomInit()
-  },
-  methods: {
-    tempDomInit () {
-      this.tempDom.width = 250
-    },
-    process (item) {
-      const chartData = { ...this.chartDataTemp, ...item, name: item.chartTitle }
-      chartData.elements = []
-      chartData.expressAllArr && chartData.expressAllArr.forEach((item1, index) => {
-        chartData.elements.push({
-          expression: item1,
-          legend: chartData.legendsAll[index],
-          type: 'expert',
-          id: index,
-          buildIn: null,
-          seq: null
-        })
-      })
-      chartData.id = 0
-      chartData.param = {
-        legendValue: { total: 'off', min: 'off', avg: 'off', last: 'off', max: 'off' },
-        last: 0,
-        nullType: 'null',
-        threshold: '',
-        url: '',
-        valueMapping: { mapping: [{ color: { bac: '#fff', text: '#000' }, text: '', value: '' }], type: 'text' },
-        statistics: chartData.aggregation
-      }
-      chartData.span = 12
-      this.chartData = chartData
-      this.getChartData(chartData, 0)
-    },
-    // 获取一个图表具体数据,图表信息，图表位置index
-    getChartData (chartInfo, pos, filterType) {
-      const chartItem = chartInfo
-      // 没有数据的设置提示信息暂无数据-针对每一个图
-      const len = chartItem.elements.length
-      if (len === 0) {
-        this.$nextTick(() => {
-          if (this.$refs['editChart' + chartItem.type]) {
-            this.$refs['editChart' + chartItem.type].setData(chartItem, [], this.filter.dashboardId, this.filter, [])
-          }
-        })
-      } else {
-        const dashboardTime = localStorage.getItem('dashboardTime') ? JSON.parse(localStorage.getItem('dashboardTime')) : ['', '']
-        const endTime = dashboardTime[1] || bus.timeFormate(bus.getOffsetTimezoneData(), 'YYYY-MM-DD HH:mm:ss')
-        const startTime = dashboardTime[0] || bus.timeFormate(bus.getOffsetTimezoneData(-1), 'YYYY-MM-DD HH:mm:ss')
-        const step = bus.getStep(startTime, endTime)
-        this.$nextTick(() => {
-          const axiosArr = chartItem.elements.map((ele) => {
-            const filterItem = ele
-            let query = encodeURIComponent(filterItem.expression)
-            if ((chartInfo.type === 'line' || chartInfo.type === 'bar' || chartInfo.type === 'stackArea' || chartInfo.type === 'table') && chartInfo.param) { // 如果是这三个 默认给null
-              chartInfo.param.nullType = chartInfo.param.nullType || 'null'
-              query += '&nullType=' + chartInfo.param.nullType
-            }
-            // if(chartInfo.type === 'table'&&chartInfo.param&&chartInfo.param.last == 1){
-            //   return this.$get('/prom/api/v1/query_range?query=' + query + "&start=" + this.$stringTimeParseToUnix(endTime) + "&end=" + this.$stringTimeParseToUnix(endTime) + '&step=' + step);
-            // }
-            if (this.from === fromRoute.chartTemp) {
-              return chartTempData
-            }
-            return this.$get('/prom/api/v1/query_range?query=' + query + '&start=' + this.$stringTimeParseToUnix(startTime) + '&end=' + this.$stringTimeParseToUnix(endTime) + '&step=' + step)
-          })
-          // 一个图表的所有element单独获取数据
-          axios.all(axiosArr).then((res) => {
-            if (res.length > 0) {
-              const series = []
-              let singleStatRlt = ''
-              const legend = []
-              const tableData = []
-              /* let sumData = {
-                  name: 'sum',
-                  data: [],
-                  visible: true,
-                  threshold: null,
-                }; */
-              let errorMsg = ''
-              let pieSeries
-              if (chartInfo.type === 'pie') {
-                pieSeries = {
-                  type: 'pie',
-                  radius: '100%',
-                  center: ['50%', '50%'],
-                  top: '20%',
-                  bottom: '20%',
-                  // roseType: 'radius',
-                  minAngle: 10,
-                  itemStyle: {
-                    borderRadius: 5,
-                    borderColor: '#fff',
-                    borderWidth: 1
-                  },
-                  label: {
-                    show: false
-                  },
-                  emphasis: {
-                    label: {
-                      show: false
-                    }
-                  },
-                  data: []
-                }
-              }
-              if (chartInfo.type === 'bar' && chartInfo.param.statistics && chartInfo.param.statistics !== 'null') {
-                pieSeries = {
-                  type: 'bar',
-                  // roseType: 'radius',
-                  itemStyle: {
-                    borderRadius: 5,
-                    borderColor: '#fff',
-                    borderWidth: 1
-                  },
-                  label: {
-                    show: false
-                  },
-                  emphasis: {
-                    label: {
-                      show: false
-                    }
-                  },
-                  data: []
-                }
-              }
-              res.forEach((response, innerPos) => {
-                if (response.status === 'success') {
-                  errorMsg = ''
-                  if (response.data.result) {
-                    // 循环处理每个elements下获取的数据列
-                    if (chartItem.type === 'singleStat') {
-                      if (response.data.result.length === 1) {
-                        const statistics = chartItem.param.statistics || 'null'
-                        if (response.data.result[0].values) {
-                          singleStatRlt = bus.getSingleStatRlt(statistics, response.data.result[0].values)
-                        }
-                      } else if (response.data.result.length > 1) {
-                        singleStatRlt = this.$t('dashboard.dashboard.singleStatErrorTip')
-                      }
-                    } else {
-                      response.data.result.forEach((queryItem, resIndex) => {
-                        let seriesItem = {
-                          theData: {
-                            name: '',
-                            symbol: 'emptyCircle', // 去掉点
-                            symbolSize: [2, 2],
-                            smooth: 0.2, // 曲线变平滑
-                            showSymbol: false,
-                            data: [],
-                            lineStyle: {
-                              width: 1,
-                              opacity: 0.9
-                            },
-                            animation: false,
-                            type: chartInfo.type
-                          },
-                          metric_name: ''
-                        }
-
-                        if (chartInfo.type === 'stackArea') {
-                          seriesItem.theData.type = 'line'
-                          seriesItem.theData.stack = chartInfo.name
-                          seriesItem.theData.areaStyle = { opacity: 0.3 }
-                        }
-                        if ((chartInfo.type === 'line' || chartInfo.type === 'stackArea' || chartInfo.type === 'bar') && chartInfo.param && chartInfo.param.threshold) {
-                          seriesItem.theData.markLine = {
-                            silent: true,
-                            symbol: ['circle', 'circle'],
-                            label: {
-                              distance: this.computeDistance(chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(chartInfo.param.threshold)),
-                              formatter (params) {
-                                return chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(params.value)
-                              }
-                            },
-                            lineStyle: {
-                              color: '#d64f40',
-                              width: 2,
-                              type: 'dotted'
-                            },
-                            data: [{
-                              yAxis: Number(chartInfo.param.threshold)
-                            }]
-                          }
-                        }
-                        // 图表中每条线的名字,后半部分
-                        let host = ''// up,
-                        if (queryItem.metric.__name__) {
-                          host = `${queryItem.metric.__name__}{`// up,
-                        }
-                        const tagsArr = Object.keys(queryItem.metric)// ["__name__","asset","idc","instance","job","module","project"]
-                        // 设置时间-数据格式对
-                        let tempArr = []
-                        let dpsArr = []
-                        tempArr = queryItem.values
-                        dpsArr = Object.entries(queryItem.values)// [ ["0",[1577959830.781,"0"]], ["1",[1577959845.781,"0"]] ]
-                        dpsArr = dpsArr.map(item => {
-                          return [item[0], [item[1][0], Number(item[1][1])]]
-                        })
-                        // 判断是否有数据, && tagsArr.length > 0
-                        if (dpsArr.length > 0 && this.$refs['editChart' + chartItem.type]) {
-                          tagsArr.forEach((tag, i) => {
-                            if (tag !== '__name__') {
-                              host += `${tag}="${queryItem.metric[tag]}",`
-                            }
-                          })
-                          if (host.endsWith(',')) {
-                            host = host.substr(0, host.length - 1)
-                          }
-                          if (queryItem.metric.__name__) {
-                            host += '}'
-                          }
-                          if (!host || host === '') {
-                            host = chartItem.elements[innerPos].expression
-                          }
-                          // 处理legend别名
-                          let alias = dealLegendAlias(host, chartItem.elements[innerPos].legend)
-                          if (!alias || alias === '') {
-                            alias = host
-                          }
-                          legend.push({ name: host + '-' + chartItem.elements[innerPos].id + '-' + resIndex, alias: alias })
-                          // 图表中每条线的名字,去掉最后的逗号与空格:metric名称,  标签1=a,标签2=c
-
-                          seriesItem.theData.name = host + '-' + chartItem.elements[innerPos].id + '-' + resIndex
-                          // alert(seriesItem.theData.name);
-                          seriesItem.metric_name = seriesItem.theData.name
-                          // 将秒改为毫秒
-                          // alert('table=='+JSON.stringify(queryItem))
-                          seriesItem.theData.data = tempArr.map((dpsItem, dpsIndex) => {
-                            /* 曲线汇总暂不需要
-                              if (sumData.data[dpsIndex]) {
-                                const sumNum = sumData.data[dpsIndex][1] || 0;
-                                sumData.data[dpsIndex][1] = sumNum + dpsItem[1];
-                              } else {
-                                sumData.data[dpsIndex] = [dpsItem[0] * 1000, dpsItem[1]];
-                              }
-                              */
-                            // let t_date = new Date(dpsItem[0] * 1000);
-                            // let timeTmp = bus.timeFormate(t_date, 'YYYY-MM-DD HH:mm:ss');
-                            tableData.push({ // 表格数据
-                              // label: host.slice(host.indexOf('{') + 1,host.indexOf('}')),//label
-                              // metric: queryItem.metric.__name__?queryItem.metric.__name__:'',//metric列
-                              element: { element: host, alias: alias },
-                              // time: timeTmp,//采集时间
-                              // value: dpsItem[1],//数值
-                              data: [dpsItem[0] * 1000, dpsItem[1]]
-                            })
-                            return [dpsItem[0] * 1000, dpsItem[1]]
-                          })
-                          if (chartInfo.type === 'pie') {
-                            pieSeries.data.push({ value: bus.getSingleStatRlt(chartInfo.param.statistics, seriesItem.theData.data), name: host + '-' + chartItem.elements[innerPos].id + '-' + resIndex })
-                          } else if (chartInfo.type === 'bar' && chartInfo.param.statistics && chartInfo.param.statistics !== 'null') {
-                            pieSeries.data.push({ value: bus.getSingleStatRlt(chartInfo.param.statistics, seriesItem.theData.data), name: host + '-' + chartItem.elements[innerPos].id + '-' + resIndex })
-                          } else {
-                            series.push(seriesItem.theData)
-                            seriesItem = null
-                          }
-                        }
-                      })
-                    }
-                  }
-                } else {
-                  if (response.msg) {
-                    errorMsg = response.msg
-                  } else if (response.error) {
-                    errorMsg = response.error
-                  } else {
-                    errorMsg = response
-                  }
-                }
-              })
-              if (this.$refs['editChart' + chartItem.type]) {
-                if (chartInfo.type === 'pie') {
-                  series.push(pieSeries)
-                }
-                if (chartInfo.type === 'bar' && chartInfo.param.statistics && chartInfo.param.statistics !== 'null') {
-                  series.push(pieSeries)
-                }
-                const chartData = {
-                  chartItem: chartItem,
-                  series: series,
-                  singleStatRlt: singleStatRlt,
-                  legend: legend,
-                  tableData: tableData,
-                  dashboardId: this.filter.dashboardId,
-                  filter: this.filter,
-                  filterType: filterType,
-                  errorMsg: errorMsg
-                }
-                if (chartItem.type === 'table') { // 表格
-                  if (filterType === 'showFullScreen') { // 全屏查询
-                    this.$refs['editChart' + chartItem.type].setData(chartItem, tableData,
-                      this.filter.dashboardId, this.filter, filterType, errorMsg)
-                  } else {
-                    this.$refs['editChart' + chartItem.type].setData(chartItem, tableData,
-                      this.filter.dashboardId, this.filter, '', errorMsg)
-                  }
-                } else if (chartItem.type === 'line' || chartItem.type === 'bar' || chartItem.type === 'stackArea' || chartItem.type === 4 || chartItem.type == 'pie') {
-                  if (series.length && chartItem.type === 4) { // 曲线汇总
-                    // series.push(sumData);//后续需要
-                  }
-                  if (filterType === 'showFullScreen') { // 全屏查询
-                    this.$refs['editChart' + chartItem.type].setData(chartItem, series,
-                      this.filter.dashboardId, this.filter, legend, filterType, errorMsg)
-                  } else {
-                    this.$refs['editChart' + chartItem.type].setData(chartItem, series,
-                      this.filter.dashboardId, this.filter, legend, '', errorMsg)
-                  }
-                } else if (chartItem.type === 'singleStat') {
-                  if (filterType === 'showFullScreen') { // 全屏查询
-                    this.$refs['editChart' + chartItem.type].setData(chartItem, singleStatRlt,
-                      this.filter.dashboardId, this.filter, filterType, errorMsg)
-                  } else {
-                    this.$refs['editChart' + chartItem.type].setData(chartItem, singleStatRlt,
-                      this.filter.dashboardId, this.filter, '', errorMsg)
-                  }
-                }
-              }
-            } else {
-              const type = chartItem.type
-              if (this.$refs['editChart' + chartItem.type]) {
-                if (type === 'table') {
-                  if (filterType === 'showFullScreen') { // table的全屏查询
-                    this.$refs['editChart' + chartItem.type].setData(chartItem, [], this.filter.dashboardId,
-                      this.filter, filterType)
-                  } else {
-                    this.$refs['editChart' + chartItem.type].setData(chartItem, [], this.filter.dashboardId,
-                      this.filter)
-                  }
-                } else if (type === 'line' || type === 'bar' || type === 'stackArea' || chartItem.type === 4 || chartItem.type === 'pie') {
-                  if (filterType === 'showFullScreen') { // table的全屏查询
-                    this.$refs['editChart' + chartItem.type].setData(chartItem, [], this.filter.dashboardId,
-                      this.filter, filterType)
-                  } else {
-                    this.$refs['editChart' + chartItem.type].setData(chartItem, [], this.filter.dashboardId,
-                      this.filter)
-                  }
-                } else if (chartItem.type === 'singleStat') {
-                  if (filterType === 'showFullScreen') { // 全屏查询
-                    this.$refs['editChart' + chartItem.type].setData(chartItem, '',
-                      this.filter.dashboardId, this.filter, filterType)
-                  } else {
-                    this.$refs['editChart' + chartItem.type].setData(chartItem, '',
-                      this.filter.dashboardId, this.filter)
-                  }
-                }
-              }
-            }
-          }).catch((error) => {
-            if (error) {
-              this.$message.error(error.toString())
-              console.error(error)
-            }
-          })
-        })
-      }
-    }
-  }
-}
-</script>
diff --git a/nezha-fronted/src/components/common/project/L5/topologyTopTool.vue b/nezha-fronted/src/components/common/project/L5/topologyTopTool.vue
deleted file mode 100644
index 1e025d7ec..000000000
--- a/nezha-fronted/src/components/common/project/L5/topologyTopTool.vue
+++ /dev/null
@@ -1,165 +0,0 @@
-<template>
-  <div class="tool-top" id="tool-top">
-    <div id="undo" :class="['top-tool-item',]"  @click="undo"> <i class="nz-icon nz-icon-revoke" :title="$t('overall.revocation')"/> </div>
-    <div id="redo" :class="['top-tool-item',]" @click="redo"> <i class="nz-icon nz-icon-revoke1"  :title="$t('overall.redo')"/> </div>
-    <!--<div> 保存为图片 </div>-->
-    <div class="top-tool-item" @click="del" :title="$t('overall.delete')">  <i class="nz-icon nz-icon-delete"/> </div>
-    <div class="top-tool-item top-tool-item-scale">
-      <span class="scale-number">
-          <span class="scale-number-minus scale-number-symbol" @click="changeScale(-25)">-</span>
-          <el-popover
-            placement="bottom"
-            width="111"
-            trigger="hover"
-            class="scale-number-box"
-            popper-class="scale-number-popover no-style-class"
-           >
-            <div class="scale-num-pop" style=" width: 91px;min-width: 91px">
-              <div>缩放级别</div>
-              <div @click="scale(50)" :class="['scale-num-pop',scaleNum==50?'is-active':'']">50</div>
-              <div @click="scale(100)" :class="['scale-num-pop',scaleNum==100?'is-active':'']">100</div>
-              <div @click="scale(200)" :class="['scale-num-pop',scaleNum==200?'is-active':'']">200</div>
-            </div>
-            <span class="scale-number-content" slot="reference">{{scaleNum}}%</span>
-          </el-popover>
-          <span class="scale-number-add scale-number-symbol" @click="changeScale(25)">+</span>
-        </span>
-    </div>
-    <div  class="top-tool-item top-tool-item-switch">
-      <label>{{$t('project.topology.grids')}}</label>
-      <el-switch
-        v-model="option.grid"
-        :active-value="true"
-        :inactive-value="false"
-        @change="changeOption('grid')">
-      </el-switch>
-    </div>
-    <div class="top-tool-item top-tool-item-switch">
-      <label>{{$t('project.topology.rule')}}</label>
-      <el-switch
-        v-model="option.rule"
-        :active-value="true"
-        :inactive-value="false"
-        @change="changeOption('rule')">
-      </el-switch>
-    </div>
-  </div>
-</template>
-
-<script>
-import { getTopology } from '../../js/common'
-
-export default {
-  name: 'topologyTopTool',
-  data () {
-    return {
-      option: {
-        lineName: 'curve',
-        lineWidth: 1,
-        fromArrow: '',
-        toArrow: 'triangleSolid',
-        scale: 100,
-        grid: false,
-        rule: false
-      },
-      scaleNum: 100,
-      penLineType: [
-        { d: 'M5 14 a100,50 0 0,1 85,0', 'stroke-dasharray': '', name: 'curve' },
-        { d: 'M5 8 l40 0 l0 12 l40 0', 'stroke-dasharray': '', name: 'polyline' },
-        { d: 'M5 14 l85 0', 'stroke-dasharray': '', name: 'line' },
-        { d: 'M5 20 C0,8 50,0 85,0', 'stroke-dasharray': '', name: 'mind' }
-      ],
-      penLineFromTOArrow: [
-        { d: 'M5 14 l85 0', points: '', fill: '', stroke: '', 'stroke-width': '', name: '' },
-        { d: 'M5 14 l85 0', points: '5 14,20 9,20 19', fill: '#000000', stroke: '', 'stroke-width': '', name: 'triangleSolid' },
-        { d: 'M5 14 l85 0', points: '5 14,20 9,20 19', fill: '#ffffff', stroke: '#000000', 'stroke-width': '1', name: 'triangle' },
-        { d: 'M5 14 l85 0', fill: '#000000', stroke: '', 'stroke-width': '', cx: '10', cy: '14', r: '5', name: 'circleSolid' },
-        { d: 'M5 14 l85 0', fill: '#ffffff', stroke: '#000000', 'stroke-width': '1', cx: '10', cy: '14', r: '5', name: 'circle' }
-      ],
-      redoFlag: false
-    }
-  },
-  props: {
-    selection: {
-      type: Object,
-      require: true
-    },
-    index: {
-      type: Number,
-      require: true
-    },
-    toolShow: {
-      type: Object,
-      require: true
-    },
-    cachesIndex: {
-      type: Number,
-      require: true
-    }
-  },
-  mounted () {
-    const dataOption = getTopology(this.index).store.data
-    Object.keys(this.option).forEach(key => {
-      if (key === 'scale') {
-        this.scaleNum = (JSON.stringify(dataOption[key]) ? parseInt(dataOption[key] * 100) : this.scaleNum)
-      } else {
-        this.option[key] = (JSON.stringify(dataOption[key]) ? dataOption[key] : this.option[key])
-      }
-    })
-  },
-  methods: {
-    changeOption (key) {
-      // getTopology(this.index).data[key] = this.option[key]
-      const obj = {}
-      obj[key] = this.option[key]
-      if (key === 'grid') {
-        getTopology(this.index).setGrid(obj)
-      } else {
-        getTopology(this.index).setRule(obj)
-      }
-      getTopology(this.index).render()
-    },
-    undo () { // 撤销
-      getTopology(this.index).undo()
-    },
-    redo () { // 重做
-      getTopology(this.index).redo()
-    },
-    centerView () { // 居中显示
-      getTopology(this.index).centerView()
-    },
-    fitView () { // 自适应画布大小
-      getTopology(this.index).fitView()
-    },
-    changeScale (num) {
-      this.scaleNum += num
-      if (this.scaleNum < 25) {
-        this.scaleNum = 25
-      }
-      if (this.scaleNum > 400) {
-        this.scaleNum = 400
-      }
-      this.scale(this.scaleNum)
-    },
-    scale (val) {
-      this.scaleNum = val
-      getTopology(this.index).scale(val / 100)
-    },
-    del () {
-      const delObj = this.selection.pen ? [this.selection.pen] : this.selection.pens
-      this.$emit('del', delObj)
-    },
-    clear () {
-      const data = { ...getTopology(this.index).data }
-      data.pens = []
-      getTopology(this.index).open({})
-    },
-    toolShowChange (attr) {
-      this.$emit('toolShowChange', attr)
-    },
-    changeOpt (key, val) {
-
-    }
-  }
-}
-</script>
diff --git a/nezha-fronted/src/components/common/project/meta2d/js/meta2dMainCalc.js b/nezha-fronted/src/components/common/project/meta2d/js/meta2dMainCalc.js
index fce470116..e537f7df6 100644
--- a/nezha-fronted/src/components/common/project/meta2d/js/meta2dMainCalc.js
+++ b/nezha-fronted/src/components/common/project/meta2d/js/meta2dMainCalc.js
@@ -4,9 +4,6 @@ import { activityDiagram } from '@meta2d/activity-diagram'
 import { classPens } from '@meta2d/class-diagram'
 import { sequencePens, sequencePensbyCtx } from '@meta2d/sequence-diagram'
 // import { chartsPens } from '@meta2d/le5le-charts'
-import {
-  disposeTopoOldData
-} from '../../L5/services/canvas.js'
 import { getTopology, setTopology, dealImg, topologyImg } from '@/components/common/js/common'
 import bus from '@/libs/bus'
 import topoUtil from '@/components/common/project/meta2d/js/topoUtil'
diff --git a/nezha-fronted/src/components/common/project/meta2d/meta2dElement.vue b/nezha-fronted/src/components/common/project/meta2d/meta2dElement.vue
index 100fd7024..956321802 100644
--- a/nezha-fronted/src/components/common/project/meta2d/meta2dElement.vue
+++ b/nezha-fronted/src/components/common/project/meta2d/meta2dElement.vue
@@ -1113,9 +1113,7 @@
 <script>
 import nezhaColor from '@/components/common/nezhaColor'
 import meta2dSelectImage from '@/components/common/project/meta2d/meta2dSelectImage'
-import { imageTemp } from '@/components/common/project/L5/services/canvas'
 import { dealImg, getUUID, topologyImg } from '@/components/common/js/common'
-import imgDefault from '@/components/common/project/L5/services/img'
 import { ColorReverse, randomcolor } from '@/components/common/js/radomcolor/randomcolor'
 import lodash from 'lodash'
 import draggable from 'vuedraggable'
diff --git a/nezha-fronted/src/components/common/project/newTopologyL5.vue b/nezha-fronted/src/components/common/project/newTopologyL5.vue
deleted file mode 100644
index 6b0a4e38a..000000000
--- a/nezha-fronted/src/components/common/project/newTopologyL5.vue
+++ /dev/null
@@ -1,1971 +0,0 @@
-<style>
-  @import "./L5/css/iconfont.css";
-  @import "./L5/css/props.css";
-</style>
-<template>
-  <div class="project-box list-page" v-my-loading="topologyLoading">
-    <div class="main-list" :style="{height: fromOverView ?'100%' : 'calc(100% - 30px)'}">
-      <div class="main-container" :class="fromOverView?'from-overview':'from-project'">
-        <div v-if="(editTopologyFlag || isPreview)&&!fromChart" class="edit-topologyLine top-tools" style="padding-left: 20px;width: calc(100% - 40px);display: inline-block">
-          <!--工具栏-->
-          <span v-if="!isPreview" class="project-topology-tool">
-          <el-dropdown trigger="click" size="small" placement="bottom-start">
-            <span class="el-dropdown-title"><i class="iconfont icon-cube"></i> <i
-              class="nz-icon nz-icon-arrow-down"></i></span>
-            <el-dropdown-menu slot="dropdown" @click="dropdownClick" class="right-box-select-top right-public-box-dropdown-top">
-              <div style="height: 450px"  v-my-loading="imgageLoading">
-                <el-card shadow="hover" style="height:420px;width:284px;overflow-y: auto"
-                         class="project-topology-add-node">
-                <!--<div class="drag-header">——</div>-->
-                <el-collapse v-model="activeNames" v-for="(item, index) in tools" :key="index" class="collapse-box">
-                  <el-collapse-item :title="item.group" :name="item.group">
-                    <template slot="title">
-                      <div style="display: flex;width: 100%;">
-                        <i class="nz-icon nz-icon-arrow-right"></i> <div style="flex: 1">{{item.group}}</div> <i class="nz-icon nz-icon-delete title-delete" @click="tooltipDeleteTitle(item)" :title="$t('overall.delete')"></i>
-                      </div>
-                    </template>
-                    <div v-for="(btn, i) in item.children" :key="'info2'+'-'+index+'-'+i" class="buttons">
-                      <a
-                        :key="i"
-                        :title="btn.data.text"
-                        :draggable="btn.data"
-                        @dragstart.stop="onDrag($event, btn)"
-                        @mousedown="dragFlag=false"
-                        @mouseup="dragFlagChange(btn)"
-                        class="btn"
-                      >
-                        <img :src="btn.data.image" v-if="btn.data.image">
-                        <i v-else :class="`iconfont ${btn.icon}`"></i>
-                      </a>
-                      <i v-if="item.group!=='General'" class="delIcon nz-icon nz-icon-delete" @click="tooltipDelete(btn)"></i>
-                    </div>
-                  </el-collapse-item>
-                </el-collapse>
-              </el-card>
-                <div class="upload-pic-box" @click="uploadPicChange">
-                  <i class="el-icon-plus"></i>
-                  <span>
-                     {{ $t('overall.uploadCustomPicture') }}
-                  </span>
-                </div>
-              </div>
-            </el-dropdown-menu>
-          </el-dropdown>
-
-          <div class="flex middle special-select mb10"
-               style="width: 75px;height: 28px;display: inline-block;margin: 0 40px 0 20px;background: #fff">
-            <div class="full pr10">
-              <el-select v-model="lineName" size="small"
-                         :popper-append-to-body="false"
-                         popper-class="right-box-select-top"
-                         @change="changeTopologyOpt(lineName,'lineName')">
-               <div slot="prefix">
-                <div class="icon-item" style="width: 100%;padding: 0">
-                  <svg>
-                    <g fill="none" :stroke="theme === 'light' ? 'black' : '#BEBEBE'" stroke-width="1">
-                      <path
-                        :d="penLineType.find((item,i)=>item.id==lineName).d"
-                      >
-                      </path>
-                    </g>
-                  </svg>
-                </div>
-              </div>
-                <el-option :disabled="true" :value="false">{{$t('project.topology.defaultLineType')}}</el-option>
-                <el-option v-for="(item,index) in penLineType" :value="item.id" :key="index">
-                  <div class="icon-item" style="position: relative;width: 100%;padding: 0">
-                    <svg>
-                    <g fill="none" :stroke="(lineName==item.name)?'#ee9d3f': item.strokeColor " 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>
-            </div>
-          </div>
-
-          <topology-top-tool
-            v-if="editTopologyFlag&&toolShow.topTool"
-            :selection.sync="props"
-            @del="delPen"
-            :index="topologyIndex"
-            ref="topTool"
-            @toolShowChange="toolShowChange"
-            :cachesIndex="cachesIndex"
-            :redoIndexChange="redoIndexChange"
-            :toolShow="toolShow">
-          </topology-top-tool>
-
-        </span>
-          <span class="float-right">
-          <button @click="previewTopology" v-if="!isPreview" class="nz-btn nz-btn-size-normal nz-btn-style-light"
-                  style="margin-right: 20px"
-          >
-             {{$t('overall.preview')}}
-           </button>
-            <button v-if="isPreview" class="nz-btn nz-btn-size-normal nz-btn-style-light" @click="previewExit"
-                    style="margin-right: 20px"
-            >
-             {{$t('project.topology.previewExit')}}
-           </button>
-           <button class="nz-btn nz-btn-size-normal nz-btn-style-normal" @click="saveTopology"
-                   :disabled="prevent_opt.save"
-                   :class="{'nz-btn-disabled':prevent_opt.save}"
-                   style="margin-right: 20px">
-             {{$t('overall.save')}}
-           </button>
-           <button class="nz-btn nz-btn-size-normal nz-btn-style-normal" style="margin-right: 20px" @click="cancelTopology">
-             {{$t('project.topology.exit')}}
-           </button>
-         </span>
-        </div>
-        <div v-if="(!editTopologyFlag&&!fromOverView) && !isPreview" class="top-tools" style="padding-left: 10px">
-          <div>{{obj.name}}</div>
-          <div v-if="!editTopologyFlag&&!fromPrev&&!fromOverView" class="top-tool-right">
-            <pick-time
-              v-show="!editTopologyFlag"
-              ref="pickTime"
-              v-model="searchTime"
-              :refresh-data-func="dateChange"
-              :showTimePicker="false"
-              :use-chart-unit="false"
-              class="pickTime margin-r-10">
-            </pick-time>
-            <button v-has="'project_edit'" class="top-tool-btn margin-r-10" type="button" @click="editTopology" :title="$t('overall.edit')">
-              <i class="nz-icon nz-icon-edit"></i>
-            </button>
-            <button class="top-tool-btn" type="button" @click="changeScreen" :title="topoScreen? $t('dashboard.screen.exit') : $t('dashboard.screen')">
-              <i :class="topoScreen?'nz-icon-exit-full-screen':'nz-icon-full-screen'" class="nz-icon"></i>
-            </button>
-          </div>
-        </div>
-        <div class="nz-table-list">
-          <!--悬浮network部分-->
-          <div class="network-info">
-            <div v-if="popDataShow.main">
-              <popDataMain :moduleId="moduleId" :projectId="projectInfo.id"></popDataMain>
-            </div>
-            <div v-if="popDataShow.info">
-              <popDataInfo :moduleId="moduleId" :projectId="projectInfo.id"></popDataInfo>
-            </div>
-          </div>
-          <div :class="['page topo-page',fromOverView?'overview-page':'']" :style="{
-            border: fromOverView ? 'none' :`1px solid $--color-text-regular`
-          }">
-            <!--画布部分-->
-            <div :id="'topology-canvas' + topologyIndexF" :ref="'topology-canvas'+ topologyIndexF" class="full" @contextmenu="onContextMenu($event)"></div>
-            <!--设置属性-->
-            <div v-if="editTopologyFlag&&toolShow.attr && !fromOverView" class="props">
-              <canvas-props ref="CanvasProps"
-                            :index="topologyIndex"
-                            :imgArr = 'tools'
-                            :modules="modules"
-                            :selection.sync="props"
-                            @animate="animateCanvas"
-                            @change="onUpdateProps"
-                            @changeProjectTitle="changeProjectTitle"
-                            @del="delPen"
-                            @notModuleIDArrChange="notModuleIDArrChange">
-              </canvas-props>
-            </div>
-            <div class="context-menu" v-if="contextmenu.left && editTopologyFlag && 0 && !fromOverView" :style="this.contextmenu">
-              <CanvasContextMenu :index="topologyIndexF" :props.sync="props"></CanvasContextMenu>
-            </div>
-            <!--所有节点上的小图标-->
-            <div v-for="(item,index) in nodesArr" v-if="!editTopologyFlag&&!fromPrev"
-                 :key="index"
-                 v-show="(item.rect.y + offsetY  - (48*(fromOverView?penToolTipScale:1)) > -10) && (item.rect.center.x + offsetX - (24*(fromOverView?penToolTipScale:1)) > - 10)"
-                 :style="{position: 'absolute',top:item.rect.y + offsetY  - (48*(fromOverView?penToolTipScale:1))+'px',left:item.rect.center.x + offsetX - (24*(fromOverView?penToolTipScale:1)) +'px',transform:'scale('+(fromOverView?penToolTipScale:1)+')'}"
-                 class="network-pop"
-            >
-
-              <i
-                :ref="'modelTopId'+index"
-                :class="{'nz-icon':true, 'nz-icon-shuidi':true,'model-error':item.data.state&&item.data.state.error&&!item.data.show,'model-error-active':item.data.state&&item.data.state.error&&item.data.show}"
-                @click="showNodeTools(index,item)"
-              >
-                <i style="cursor: pointer" class="nz-icon nz-icon-model"></i>
-              </i>
-              <!--'selpop':selpopIs(item),'no-selPop':!selpopIs(item),'error-model-stat':modelPopError(item)  @click="popClick(item.id)" -->
-              <div v-for="(item1, index) in popData" :key="index">
-                <transition name="scaleTool">
-                  <i v-if="item.data.show"
-                     :class="{'nz-icon':true,'nz-icon-hexagonBorder':true,'error-model-stat':item.data.state[item1.id],'selpop':selpopIs(item,item1),'no-selPop':!selpopIs(item,item1),}"
-                     :style="{top:item1.top,left:item1.left}"
-                     :title="item1.title"
-                     @click="nodeTools(item,item1)"
-                  >
-                    <i class="nz-icon nz-icon-liubianxing"></i>
-                    <i :class="[item1.className,{'nz-icon':item1.className},'noMove']"></i>
-                  </i>
-                </transition>
-              </div>
-            </div>
-            <!--提示未添加module id的块-->
-            <div v-for="(item, index) in notModuleIDArr"
-                 v-if="editTopologyFlag&&!fromPrev"
-                 :key="index"
-                 :style="{
-             position: 'absolute',
-             top:item.rect.y + offsetY - 10 +'px',
-             left:item.rect.x + offsetX - 10+'px',
-             transform:'scale('+(fromOverView?penToolTipScale:1)+')',
-           }"
-            >
-              <div :style="{top:0,left:0,width:item.rect.width+15+'px',height:0}" class="module-rect-top"></div>
-              <div :style="{top:0,left:item.rect.width+15+'px',width:0,height:item.rect.height+15+'px'}" class="module-rect-right"></div>
-              <div :style="{top:item.rect.height+15 +'px',left:0,width:item.rect.width+15+'px',height:0}" class="module-rect-bottom"></div>
-              <div :style="{top:0,left:0,width:0,height:item.rect.height+15+'px'}" class="module-rect-left"></div>
-            </div>
-            <!--节点连线相关的 tooltip-->
-            <div v-if="tooltipPosition.show&&!editTopologyFlag"
-                 ref="topoTooltip"
-                 :style="{position:'absolute',top:tooltipPosition.top+'px',left:tooltipPosition.left+'px','z-index':10,height:tooltipPosition.height+'px'}"
-                 @mouseout="tooltipOut"
-                 @mouseover="tooltipOver"
-            >
-              <topoTooltip  class="nz-tooltip-bac" :chartDataParent="chartData" :filterTime="filterTime"/>
-            </div>
-            <div v-show="showNoData" class="topo-noData">
-              <svg class="icon" aria-hidden="true">
-                <use xlink:href="#nz-icon-no-data-project"></use>
-              </svg>
-              <div class="content">No data</div>
-            </div>
-          </div>
-          <!--endpoint-->
-          <transition name="right-box">
-            <endpointTable v-if="popDataShow.endpoint" :moduleId="moduleId" :moduleName="moduleName" :projectId="projectInfo.id"
-                           @close="popDataShowUpdate('',true)">endpoint
-            </endpointTable>
-          </transition>
-          <div v-if="!fromOverView&&!editTopologyFlag&&!fromPrev" class="right-bottom-zoom">
-            <div class="zoom-option" style="border-bottom: 1px solid #c5c8cb;" @click="zoomMap(0.25)" :title="$t('overall.enlargement')"><span><i class="nz-icon nz-icon-enlarge"></i></span></div>
-            <div class="zoom-option" @click="zoomMap(-0.25)" :title="$t('overall.shrink')"><span><i class="nz-icon nz-icon-narrow"></i></span></div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <!--<div class="left-bottom" v-if="editTopologyFlag">-->
-    <!--<div class="title">小提示</div>-->
-    <!--<ul class="group">-->
-    <!--<li>编辑时：</li>-->
-    <!--<li>1.Ctrl + 鼠标移动：移动整个画布</li>-->
-    <!--<li>2.Ctrl + 鼠标滚轮：缩放</li>-->
-    <!--<li>3.选中元素 按下Delete键或者Backspace可以删除元素</li>-->
-    <!--</ul>-->
-    <!--</div>-->
-    <!--asset-->
-    <transition name="right-box">
-      <assetTable v-if="popDataShow.asset" :moduleId="moduleId" :moduleName="moduleName" :projectId="projectInfo.id"
-                  @close="popDataShowUpdate('',true)">alert
-      </assetTable>
-    </transition>
-    <!--alert-->
-    <transition name="right-box">
-      <alertTable v-if="popDataShow.alert" :moduleId="moduleId" :moduleName="moduleName" :projectId="projectInfo.id"
-                  @close="popDataShowUpdate('',true)">alert
-      </alertTable>
-    </transition>
-    <!--Custom picture-->
-    <el-dialog
-      :title="title"
-      :visible.sync="uploadPicShow"
-      width="auto"
-      @close="uploadPicShow = false"
-      destroy-on-close>
-      <el-row class="upload-pic-row">
-        <el-col :span="4" class="upload-pic-label">{{ $t('overall.name') }}</el-col>
-        <el-col :span="20">
-          <el-input maxlength="64" show-word-limit v-model="uploadPic.name" size="small"  :placeholder="$t('project.topology.placeholderImg')"></el-input>
-        </el-col>
-      </el-row>
-      <el-row class="upload-pic-row">
-        <el-col :span="4" class="upload-pic-label">{{ $t('overall.folder') }}</el-col>
-        <el-col :span="20">
-          <el-autocomplete
-            popper-class="right-box-select-top right-public-box-dropdown-top"
-            :maxlength="64" show-word-limit
-            class="inline-input"
-            v-model="uploadPic.unit"
-            :fetch-suggestions="querySearch"
-            size="small"
-          ></el-autocomplete>
-        </el-col>
-      </el-row>
-
-      <el-row class="upload-pic-row">
-        <el-col :span="4" class="upload-pic-label"> </el-col>
-        <el-col :span="20">
-          <div class="upload-body">
-            <el-upload
-              drag
-              class="upload-demo"
-              action=" "
-              :show-file-list="true"
-              :on-change="beforeAvatarUpload"
-              :auto-upload="false"
-              accept=".jpg,.png"
-              :limit="1"
-              :id="'upload-pic-show'">
-              <!--<div slot="tip" class="el-upload__tip" >{{$t('overall.importTipImg')}}</div>-->
-              <i class="nz-icon nz-icon-upload"></i>
-              <div class="el-upload__text">{{$t('overall.dragFileTip')}}，{{$t('overall.or')}}&nbsp;<em>{{$t('overall.clickUpload')}}</em></div>
-            </el-upload>
-          </div>
-        </el-col>
-      </el-row>
-      <div class="upload-pic-row" style="text-align: center">
-            <span>
-               <button class="nz-btn nz-btn-size-normal nz-btn-style-light" style="margin-right: 20px" @click="uploadPicShow=false">
-             {{$t('project.topology.exit')}}
-           </button>
-
-              <button class="nz-btn nz-btn-size-normal nz-btn-style-normal" @click="imgUpload" :disabled="prevent_opt.save"
-                      :class="{'nz-btn-disabled':prevent_opt.save}"
-                      style="margin-right: 20px">
-             {{$t('overall.save')}}
-           </button>
-            </span>
-      </div>
-
-    </el-dialog>
-  </div>
-</template>
-
-<script>
-import { Topology, registerNode } from '@/components/common/@topology/core/index.js'
-import { Store as le5leStore } from 'le5le-store'
-// import { Topology, registerNode } from '@topology/core'
-import imgDefault from '@/components/common/project/L5/services/img'
-import {
-  Tools,
-  canvasRegister,
-  imageTemp,
-  myShape,
-  myAnchors,
-  myIconRect,
-  myTextRect,
-  onChangeAnimate,
-  onChangeAnimateLine,
-  myCubec,
-  myCubeAnchors
-} from './L5/services/canvas.js'
-import { getTopology, setTopology, dealImg, topologyImg } from '../js/common'
-
-import CanvasProps from './L5/CanvasProps'
-import topologyTopTool from './L5//topologyTopTool'
-import CanvasContextMenu from './L5/CanvasContextMenu'
-import popDataMain from './popData/Main'
-import popDataInfo from './popData/Info'
-import alertTable from './popData/alertTable'
-import assetTable from './popData/assetTable'
-import endpointTable from './popData/endpointTable'
-import topoTooltip from './L5/topoTooltip'
-import { getMetricTypeValue, dealLegendAlias } from '../js/tools'
-import bus from '../../../libs/bus'
-
-// 注册到画布
-registerNode('rectangleImg', myShape, myAnchors, myIconRect, myTextRect)
-registerNode('myCube', myCubec, myCubeAnchors, null, null)
-
-const canvasOptions = {
-  rotateCursor: '/img/rotate.cur',
-  translateKey: 'None',
-  disableEmptyLine: true,
-  autoExpandDistance: 0,
-  minScale: 0.2,
-  scaleKey: -1,
-  keydown: 1
-}
-export default {
-  name: 'topologyL5',
-  data () {
-    const theme = localStorage.getItem(`nz-user-${localStorage.getItem('nz-user-id')}-theme`) || 'light'
-    return {
-      theme,
-      title: this.$t('overall.uploadCustomPicture'),
-      objChange: false, // project 变化 用于判断 init是否执行完成 执行完成 才可以执行下次变化
-      chartDataInfo: {},
-      topoPrevData: {}, // 预览数据
-      imgInit: false, // 判断图片是否加载完成
-      toolGroup: '基本形状',
-      editFlag: true,
-      tools: [...Tools],
-      props: {},
-      topologyLoading: false,
-      contextmenu: {
-        left: null,
-        top: null,
-        bottom: null
-      },
-      filterTime: [
-        bus.timeFormate(bus.getOffsetTimezoneData(-1), 'YYYY-MM-DD HH:mm:ss'),
-        bus.timeFormate(bus.getOffsetTimezoneData(), 'YYYY-MM-DD HH:mm:ss')
-      ],
-      showNoData: false,
-      topologyInfo: {
-        fontSize: 14,
-        align: 'left',
-        fontColor: '#000000',
-        opacity: 1,
-        name: ''
-      },
-      saveData: {},
-      oldTopologyData: '',
-      redoIndex: 0,
-      dataLength: 0,
-      editTopologyFlag: false,
-      searchTime: bus.getTimezontDateRange(),
-      activeNames: [],
-      topologyIndex: 0,
-      iconArray: [],
-      imgageLoading: false,
-      imageSave: false,
-      toolShow: {
-        node: true,
-        attr: true,
-        topTool: true,
-        nodeCord: [0, 0],
-        attrCord: [0, 0],
-        height: 500
-      },
-      dragFlag: true,
-      modules: [],
-      allModules: [],
-      projectInfo: {
-        title: '',
-        id: '',
-        remark: '',
-        alertStat: [1, 2, 3],
-        moduleMum: 6,
-        loading: true
-      },
-      timer: null, // 处理project短时间呢频繁变更的定时器
-      timer2: null, // 处理平移画布显示iconState的定时器
-      timer3: null, // 处理tooltip的显示定时器
-      timer4: null,
-      nodesArr: [],
-      notModuleIDArr: [],
-      popData: [
-        {
-          top: '-41px',
-          left: '-23px',
-          className: 'nz-icon-endpoint',
-          id: 'endpoint',
-          title: this.$t('project.topology.endpoint')
-        },
-        { top: '-41px', left: '22px', className: 'nz-icon-asset', id: 'asset', title: this.$t('asset.asset') },
-        { top: '-2px', left: '45px', className: '', id: 'other', title: '' },
-        { top: '37px', left: '22px', className: '', id: 'other', title: '' },
-        { top: '37px', left: '-23px', className: 'nz-icon-info-normal', id: 'info', title: this.$t('project.topology.info') },
-        { top: '-2px', left: '-45px', className: 'nz-icon-gaojing', id: 'alert', title: this.$t('project.topology.alert') }
-      ],
-      popDataShow: {
-        endpoint: false,
-        asset: false,
-        total: false,
-        other: false,
-        info: false,
-        alert: false,
-        main: false
-      },
-      moduleId: '',
-      moduleName: '',
-      tooltipPosition: {
-        top: 0,
-        left: 0,
-        show: false,
-        height: 250
-      },
-      chartData: {},
-      chartGetData: [],
-      penLineType: [
-        { d: 'M5 19 a50,100 0 0,1 40,0', 'stroke-dasharray': '', name: this.$t('project.topology.curve'), id: 'curve', strokeColor: theme == 'light' ? 'black' : '#BEBEBE' },
-        { d: 'M5 8 l20 0 l0 12 l20 0', 'stroke-dasharray': '', name: this.$t('project.topology.polyline'), id: 'polyline', strokeColor: theme == 'light' ? 'black' : '#BEBEBE' },
-        { d: 'M5 14 l40 0', 'stroke-dasharray': '', name: this.$t('project.topology.line'), id: 'line', strokeColor: theme == 'light' ? 'black' : '#BEBEBE' }
-        // {d:'M5 20 C0,8 50,0 85,0',"stroke-dasharray":"",name:'mind', strokeColor: theme == 'light' ? 'black' : '#BEBEBE'},
-      ],
-      lineName: 'curve',
-      cachesIndex: 0,
-      projectInfoShow: false,
-      projectAlertShow: false,
-      previewShow: false,
-      penId: undefined,
-      penToolTipScale: 1,
-      oldScale: 1,
-      uploadPicShow: false,
-      imgWidth: 0,
-      imgHeight: 0,
-      uploadPic: {
-        name: '',
-        unit: ''
-      },
-      unitArr: [],
-      topoScreenState: '', // 记录编辑前的 $store.ShowTopoScreen 结束编辑后返回
-      isPreview: false,
-      previewData: '',
-      offsetX: 0,
-      offsetY: 0,
-      prevData: null
-    }
-  },
-  components: {
-    'canvas-props': CanvasProps,
-    topologyTopTool,
-    popDataMain,
-    popDataInfo,
-    alertTable,
-    assetTable,
-    endpointTable,
-    topoTooltip,
-    CanvasContextMenu
-  },
-  props: {
-    topologyIndexF: {
-      default: 0
-    },
-    obj: {},
-    showTopTools: {
-      type: Boolean,
-      default: true
-    },
-    fromOverView: {
-      type: Boolean,
-      default: false
-    },
-    fromPrev: {
-      type: Boolean,
-      default: false
-    },
-    fromChart: {
-      type: Boolean,
-      default: false
-    },
-    topoPrevDataS: {
-
-    }
-  },
-  watch: {
-    topologyIndexF: {
-      immediate: true,
-      handler (n) {
-        this.topologyIndex = n
-      }
-    },
-    obj: {
-      deep: true,
-      immediate: true,
-      handler (n, o) {
-        if (n && n.id) {
-          // if (getTopology(this.topologyIndex)) {
-          //   getTopology(this.topologyIndex).destroy()
-          //   setTopology(this.topologyIndex, null)
-          // }
-          if (!this.objChange) {
-            this.editTopologyFlag = false
-            this.topologyLoading = true
-            this.projectInfoShow = false
-            this.projectAlertShow = false
-            if (n.id) {
-              this.getProjectData(n)
-            }
-            this.topologyLoading = true
-            this.init()
-            this.timer = null
-            this.objChange = true
-          } else {
-            if (!this.timer) {
-              this.timer = setInterval(() => {
-                if (this.objChange) { return }
-                this.editTopologyFlag = false
-                this.topologyLoading = true
-                this.projectInfoShow = false
-                this.projectAlertShow = false
-                if (n.id) {
-                  this.getProjectData(n)
-                }
-                clearTimeout(this.timer)
-                this.timer = null
-                this.objChange = true
-                this.topologyLoading = true
-                this.init()
-              }, 100)
-            } else {
-              clearTimeout(this.timer)
-              this.timer = setInterval(() => {
-                if (this.objChange) { return }
-                this.editTopologyFlag = false
-                this.topologyLoading = true
-                this.projectInfoShow = false
-                this.projectAlertShow = false
-                if (n.id) {
-                  this.getProjectData(n)
-                }
-                clearTimeout(this.timer)
-                this.timer = null
-                this.objChange = true
-                this.topologyLoading = true
-                this.init()
-              }, 100)
-            }
-          }
-        }
-      }
-    },
-    topoScreen (n) {
-      getTopology(this.topologyIndex).resize()
-      getTopology(this.topologyIndex).centerView()
-      // getTopology(this.topologyIndex).fitView(30)
-    },
-    shrink (n) {
-      const timer = setTimeout(() => {
-        const domRect = document.getElementById('topology-canvas' + this.topologyIndex).getBoundingClientRect()
-        getTopology(this.topologyIndex).canvasPos = domRect
-        getTopology(this.topologyIndex).resize()
-        getTopology(this.topologyIndex).centerView()
-        clearTimeout(timer)
-      }, 500)
-    }
-  },
-  computed: {
-    topoScreen () {
-      return this.$store.getters.getShowTopoScreen
-    },
-    shrink () {
-      return this.$store.getters.getIsShrink
-    }
-  },
-  created () {
-    canvasRegister()
-  },
-  mounted () {
-    if (!this.fromOverView) { // 从overview来的 加载相应图片 优化首页加载速度
-      this.addNodeInit()
-    }
-    document.getElementById('topology-canvas' + this.topologyIndexF).addEventListener('mousemove', this.canvasMove)
-    window.addEventListener('resize', this.winResize)
-    window.addEventListener('click', this.contextmenuNone)
-  },
-  methods: {
-    init () {
-      canvasOptions.on = this.onMessage
-      this.reload()
-    },
-
-    reload () {
-      this.topologyLoading = true
-      this.getTopologyData().then((data) => {
-        this.openTopologyData(data).then(() => {
-          this.initPens(data)
-        })
-      })
-    },
-    initPens (data) {
-      // 获取对应的值 给节点 连线添加对应动画
-      this.lineName = data.lineName ? data.lineName : this.lineName
-      this.chartGetData = []
-      const axiosArr = []
-      const promiseArr = []
-      let pensPromise = (pen, arr, index) => {
-        return new Promise((resolve, reject) => {
-          Promise.all(arr).then((res) => {
-            this.chartGetData[index].res = JSON.parse(JSON.stringify(this.computeData(res, pen.data.aggregation, pen)))
-            this.setAnimation(pen, this.chartGetData[index].res)
-            resolve()
-          })
-        })
-      }
-      const endTime = this.filterTime[1]
-      const startTime = this.filterTime[0]
-      const step = bus.getStep(startTime, endTime)
-      data.pens && data.pens.forEach((item, index) => {
-        this.chartGetData.push({ id: item.id, res: [] })
-        let arr = []
-        if (item.data.valueMappingShow) {
-          arr = item.data.expressArr.map((ele) => {
-            let query = ele
-            if (!query) {
-              return new Promise(resolve => {
-                resolve({ data: '', status: 'no query' })
-              })
-            }
-            query = encodeURIComponent(query)
-            query += '&nullType=' + 'null'
-            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) => {
-        if (!getTopology(this.topologyIndex)) {
-          return
-        }
-        getTopology(this.topologyIndex).open(data)
-        getTopology(this.topologyIndex).lock(1)
-        this.objChange = false
-        let flag = false
-        const position = {
-          x: this.$refs['topology-canvas' + this.topologyIndexF].offsetWidth,
-          y: this.$refs['topology-canvas' + this.topologyIndexF].offsetHeight
-        }
-        this.oldScale = getTopology(this.topologyIndex).data.scale
-        getTopology(this.topologyIndex).data.pens.forEach(item => {
-          if (flag) {
-            return
-          }
-          if (item.rect.ex > position.x || item.rect.ey > position.y) {
-            if (this.fromOverView) {
-              getTopology(this.topologyIndex).fitView(20)
-            }
-            flag = true
-          }
-        })
-        getTopology(this.topologyIndex).resize()
-        getTopology(this.topologyIndex).centerView()
-        this.penToolTipScale = getTopology(this.topologyIndex).data.scale
-        const timer = setTimeout(() => {
-          getTopology(this.topologyIndex) && getTopology(this.topologyIndex).data.pens.forEach(item => {
-            if (item.animatePlay) {
-              item.stopAnimate()
-              const timer1 = setTimeout(() => {
-                item.startAnimate()
-                clearTimeout(timer1)
-              })
-            }
-          })
-          clearTimeout(timer)
-        }, 100)
-        // if(this.fromPrev){
-        //   getTopology(this.topologyIndex).scaleTo(data.scale/2)
-        // }
-        // getTopology(this.topologyIndex).fitView();
-        this.oldTopologyData = JSON.stringify(getTopology(this.topologyIndex).data)
-        this.getNodesArr()
-        pensPromise = null
-      })
-    },
-    dateChange () {
-      // const nowTimeType = this.$refs.pickTime.$refs.timePicker.nowTimeType
-      // this.setSearchTime(nowTimeType.type, nowTimeType.value)
-      this.searchTime = bus.getTimezontDateRange()
-      this.filterTime[0] = bus.timeFormate(this.searchTime[0], 'YYYY-MM-DD HH:mm:ss')
-      this.filterTime[1] = bus.timeFormate(this.searchTime[1], 'YYYY-MM-DD HH:mm:ss')
-      this.reload()
-    },
-    setSearchTime (type, val) { // 设置searchTime
-      if (type === 'minute') {
-        const startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setMinutes(new Date(bus.computeTimezone(new Date().getTime())).getMinutes() - val), 'YYYY-MM-DD HH:mm:ss')
-        const endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())), 'YYYY-MM-DD HH:mm:ss')
-        this.$set(this.searchTime, 0, startTime)
-        this.$set(this.searchTime, 1, endTime)
-        this.$set(this.searchTime, 2, val + 'm')
-      } else if (type === 'hour') {
-        const startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setHours(new Date(bus.computeTimezone(new Date().getTime())).getHours() - val), 'YYYY-MM-DD HH:mm:ss')
-        const endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())), 'YYYY-MM-DD HH:mm:ss')
-        this.$set(this.searchTime, 0, startTime)
-        this.$set(this.searchTime, 1, endTime)
-        this.$set(this.searchTime, 2, val + 'h')
-      } else if (type === 'date') {
-        const startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setDate(new Date(bus.computeTimezone(new Date().getTime())).getDate() - val), 'YYYY-MM-DD HH:mm:ss')
-        const endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())), 'YYYY-MM-DD HH:mm:ss')
-        this.$set(this.searchTime, 0, startTime)
-        this.$set(this.searchTime, 1, endTime)
-        this.$set(this.searchTime, 2, val + 'd')
-      }
-      this.$refs.pickTime.$refs.timePicker.searchTime = this.searchTime
-    },
-    // 打开topology数据
-    openTopologyData (data) {
-      return new Promise((resolve, reject) => {
-        if (!document.getElementById('topology-canvas' + this.topologyIndexF)) {
-          return
-        }
-        data = this.$lodash.cloneDeep(data)
-        if (!getTopology(this.topologyIndex)) {
-          let canvas = new Topology('topology-canvas' + this.topologyIndexF, canvasOptions)
-          // canvas.open(data)
-          setTopology(this.topologyIndex, canvas)
-          canvas = null
-        } else {
-          // getTopology(this.topologyIndex).open(data)
-        }
-        this.topologyLoading = false
-        if (!getTopology(this.topologyIndex).data.name) {
-          getTopology(this.topologyIndex).data.name = this.obj.name
-        }
-        getTopology(this.topologyIndex).data.projectId = this.obj.id
-        // getTopology(this.topologyIndex).lock(1)
-
-        this.getModule()// 获取module
-        resolve()
-      })
-    },
-    // 获取topology数据
-    getTopologyData () {
-      return new Promise(resolve => {
-        if (this.fromPrev) {
-          resolve(this.topoPrevDataS)
-        }
-        this.$get('monitor/project/topo', { projectId: this.obj.id }).then(res => {
-          if (!res.data) {
-            return
-          }
-          let data = JSON.parse(JSON.stringify(res.data.topo))
-          if (!res.data.topo || !res.data.topo.pens.length) {
-            this.showNoData = true
-          } else {
-            this.showNoData = false
-          }
-          if (this.isPreview) {
-            data = this.previewData
-          }
-          // data = JSON.parse(localStorage.getItem('topoData'))
-          if (!res.data.topo || !data.pens) {
-            data = {
-              bkColor: '#FFFFFF00',
-              gridSize: 10,
-              gridColor: '#ededed',
-              lineWidth: 1,
-              ruleColor: '#4e4e4e'
-            }
-            this.projectInfoShow = true
-            this.projectAlertShow = true
-            this.saveData = JSON.parse(JSON.stringify(data))
-            this.topologyInfo.name = this.obj.name
-            data.ruleColor = this.theme == 'light' ? '#4e4e4e' : '#BEBEBE'
-            resolve(data)
-            data = null
-          } else {
-            data.ruleColor = this.theme == 'light' ? '#4e4e4e' : '#BEBEBE'
-            if (data.data) {
-              this.topologyInfo = {
-                fontSize: data.data.fontSize,
-                align: data.data.align,
-                fontColor: data.data.fontColor,
-                opacity: data.data.opacity,
-                name: data.name
-              }
-            } else {
-              this.topologyInfo = {
-                fontSize: 14,
-                align: 'left',
-                fontColor: '#000000',
-                opacity: 1,
-                name: ''
-              }
-            }
-            if (this.fromOverView) { // 优化从首页来的加载速度
-              const arr = data.pens.filter(item => !item.type)
-              this.addNodeInit(arr)
-            }
-            this.timer4 = setInterval(() => {
-              if (!this.imgInit) {
-                return
-              }
-              const promiseArr = []
-              for (let i = 0; i < data.pens.length; i++) {
-                const line = data.pens[i]
-                if (line.type === 1) {
-                  if (!data.pens.find(item => item.id === line.from.id) || !data.pens.find(item => item.id === line.to.id)) {
-                    data.pens.splice(i, 1)
-                    i--
-                  }
-                }
-              }
-              data.pens.forEach(item => {
-                if (item.type === 0 && item.data.imageId) {
-                  const img = this.iconArray.find(item1 => item1.id == item.data.imageId)
-                  item.image = img ? img.image : imgDefault
-                }
-                if (item.type === 0) {
-                  // promiseArr.push(this.$get('stat/module/abnormal', { moduleId: item.data.moduleId }))
-                  item.data.state = {}
-                  item.data.state.asset = false
-                  item.data.state.endpoint = false
-                  item.data.state.alert = false
-                } else {
-                  // promiseArr.push({ type: 1 })
-                  item.data.state = {}
-                  item.data.state.asset = false
-                  item.data.state.endpoint = false
-                  item.data.state.alert = false
-                }
-              })
-
-              if (!data.data) {
-                this.projectInfoShow = true
-                this.projectAlertShow = true
-              } else if (!JSON.stringify(data.data.projectInfo)) {
-                this.projectInfoShow = true
-                this.projectAlertShow = true
-              } else {
-                this.projectInfoShow = data.data.projectInfo
-                this.projectAlertShow = data.data.alertInfo
-              }
-              if (!data.bkImage) {
-                data.bkImage = undefined
-              }
-              if (data.bkColor === '#FFFFFF') {
-                data.bkColor = '#FFFFFF00'
-              }
-              Promise.all(promiseArr).then(res => {
-                res[0].data.list.forEach((module, index) => {
-                  const item = data.pens.find(pens => module.id === pens.data.moduleId)
-                  if (item.type === 0 && item.data.state && res[index].data.list.length) {
-                    item.data.state.error = item.data.error = !module.state
-                    item.data.state.asset = !!module.asset
-                    item.data.state.alert = !!module.alert
-                    item.data.state.endpoint = !!module.endpoint
-                  } else {
-                    item.data.state = {
-                      error: false,
-                      asset: 0,
-                      alert: 0,
-                      endpoint: 0
-                    }
-                  }
-                })
-                this.saveData = JSON.parse(JSON.stringify(data))
-                resolve(data)
-                clearInterval(this.timer4)
-                this.timer4 = null
-              }).catch(res => {
-                this.saveData = JSON.parse(JSON.stringify(data))
-                resolve(data)
-                clearInterval(this.timer4)
-                this.timer4 = null
-              })
-            }, 2000)
-          }
-        })
-      })
-    },
-    // 赋值动画
-    setAnimation (pen, res) { // 根据所有res的状态 赋值动画
-      let maxLevel = 0
-      if (res.length > 0) {
-        res.forEach((response, innerPos) => {
-          if (response.status !== 'success') {
-            return
-          }
-          if (response.data.result) {
-            response.data.result.forEach((queryItem, resIndex) => {
-              pen.data.valueMapping.forEach((item, index) => {
-                if (item.value === 'base') { return }
-                if (queryItem.showValue > item.value) {
-                  queryItem.level = item.level
-                  if (maxLevel < item.level) {
-                    maxLevel = item.level
-                  }
-                }
-              })
-            })
-          }
-        })
-      }
-      if (maxLevel !== 0) {
-        if (pen.type === 0) { // 判断valueMapping 给相应的状态
-          const selLevel = pen.data.valueMapping.find(item => item.level === maxLevel)
-          if (selLevel) {
-            pen.fontColor = selLevel.color.text
-            pen.fillStyle = selLevel.color.fill
-            pen.strokeStyle = selLevel.color.line
-            pen.bkType = 0
-          }
-          onChangeAnimate(pen, selLevel.animateType, selLevel.color.fill, selLevel.color.line)
-        } else if (pen.type === 1) { // 判断valueMapping 给相应的状态
-          const selLevel = pen.data.valueMapping.find(item => item.level === maxLevel)
-          if (selLevel) {
-            pen.animateColor = selLevel.color.fill
-            pen.strokeStyle = selLevel.color.line
-            pen.animateType = selLevel.animateType
-            pen.fontColor = selLevel.color.text
-          }
-          onChangeAnimateLine(pen, pen.animateType)
-        }
-      } else {
-        if (pen.type === 0 && pen.animatePlay) { // 判断valueMapping 给相应的状态
-          onChangeAnimate(pen, pen.animateType)
-        } else if (pen.type === 1 && pen.animatePlay) { // 判断valueMapping 给相应的状态
-          onChangeAnimateLine(pen, pen.animateType)
-        }
-      }
-    },
-    computeData (res, type, pen) { // 处理别名 以及 根据type显示对应的值
-      if (res.length > 0) {
-        res.forEach((response, innerPos) => {
-          if (response.status !== 'success') {
-            return
-          }
-
-          if (response.data.result) {
-            response.data.result.forEach((queryItem, resIndex) => {
-              // 图表中每条线的名字,后半部分
-              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 dpsArr = []
-              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) {
-                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 = pen.data.expressArr[innerPos]
-                }
-                // 处理legend别名
-                let alias = dealLegendAlias(host, pen.data.legends[innerPos])
-                if (!alias || alias === '') {
-                  alias = host
-                }
-                queryItem.legend = { name: host + '-' + pen.data.legends[innerPos] + '-' + resIndex, alias: alias }
-                queryItem.showValue = getMetricTypeValue(queryItem.values, type)
-                // 图表中每条线的名字,去掉最后的逗号与空格:metric名称,  标签1=a,标签2=c
-              }
-            })
-          }
-        })
-      }
-      return res
-    },
-    // 获取project Info
-    getProjectData (n) {
-      // 获取projectInfo
-      this.projectInfo.loading = true
-      this.$get('monitor/project/' + n.id).then(response => {
-        if (response.code === 200) {
-          this.projectInfo.loading = false
-          this.projectInfo = { ...this.projectInfo, ...response.data }
-          this.projectInfo.total = this.projectInfo.alertStat[0] + this.projectInfo.alertStat[1] + this.projectInfo.alertStat[2]
-          if (!this.projectInfo.total) {
-            this.projectInfo.total = 0
-          }
-        }
-      })
-    },
-    // Severity Label
-    returnSeverityLabel (key) {
-      return this.$t(this.$CONSTANTS.alertMessage.severityData.find(s => { return s.value == key }).label)
-    },
-    // 获取module
-    getModule () {
-      this.projectInfo.loading = true
-      this.$get('/monitor/module?pageSize=-1&projectIds=' + this.obj.id).then(response => {
-        if (response.code === 200) {
-          this.projectInfo.loading = false
-          this.allModules = JSON.parse(JSON.stringify(response.data.list))
-          this.modulesDiff()
-        }
-      })
-    },
-
-    getNodesArr () {
-      if (!getTopology(this.topologyIndex)) return
-      let arr = []
-      this.offsetX = getTopology(this.topologyIndex).data.x
-      this.offsetY = getTopology(this.topologyIndex).data.y
-      arr = getTopology(this.topologyIndex).data.pens.filter(item => {
-        if (!item.data) {
-          item.data = {
-            moduleId: '',
-            moduleName: '',
-            show: false,
-            error: false,
-            expressArr: [],
-            expressAllArr: [],
-            state: {}
-          }
-        }
-        return item.type === 0
-      })
-      // 打开动画 是否更新顶部图标
-      this.nodesArr = arr.map(item => {
-        return {
-          rect: item.rect,
-          data: item.data
-        }
-      })
-      this.nodesArr = JSON.parse(JSON.stringify(this.nodesArr))
-      arr = null
-    },
-
-    modelTopClick (item, index) {
-
-    },
-    // 摘除已选择的module
-    modulesDiff (data) {
-      this.modules = this.allModules
-      if (getTopology(this.topologyIndex) && getTopology(this.topologyIndex).data.pens) {
-        getTopology(this.topologyIndex).data.pens.forEach(item => {
-          if (item.type == 0) {
-            this.modules = this.modules.filter(item1 => item.data.moduleId !== item1.id)
-          }
-        })
-      }
-      if (data && data.data && data.data.moduleId) {
-        this.modules.unshift({ id: data.data.moduleId, name: data.data.moduleName })
-      }
-    },
-
-    // 显示module的工具
-    showNodeTools (index, pen) {
-      this.nodesArr.forEach((item, i) => {
-        item.data.show = i === index
-      })
-    },
-
-    // 具体内容点击
-    nodeTools (node, tool) {
-      this.moduleId = node.data.moduleId
-      this.moduleName = node.data.moduleName
-      if (tool.id === 'total') {
-        this.popDataShowUpdate('', false, node)
-        return
-      }
-      const timer = setTimeout(() => {
-        this.popDataShowUpdate(tool.id, false, node)
-        clearTimeout(timer)
-      }, 100)
-    },
-
-    popDataShowUpdate (key, flag, node) { // key 显示对应的弹窗 flag是否不显示工具栏
-      this.popDataShow = {
-        endpoint: false,
-        asset: false,
-        total: false,
-        other: false,
-        info: false,
-        alert: false,
-        main: false
-      }
-      if (key === 'total') {
-        this.chartDataInfo = { ...node.data, ...this.chartGetData.find(item => item.id === node.id) }
-      }
-      this.$nextTick(() => {
-        this.popDataShow[key] = true
-      })
-      if (flag) { // 处理关闭后 缩放后显示工具按钮的问题
-        this.moduleId = ''
-        this.showNodeTools('')
-      }
-      if (key === 'asset' || key === 'alert' || key === 'endpoint') {
-        this.showNodeTools('')
-      }
-    },
-
-    /* topology 方法 */
-    onDrag (event, node) {
-      this.dragFlag = false
-      const timer = setTimeout(() => {
-        this.dragFlag = true
-        clearTimeout(timer)
-      }, 100)
-      event.dataTransfer.setData('Text', JSON.stringify({ ...node.data, data: { imageId: node.data.imageId } }))
-    },
-    dragFlagChange (node) {
-      getTopology(this.topologyIndex).addNode(
-        {
-          ...node.data,
-          rect: {
-            ...node.data.rect,
-            x: this.$refs['topology-canvas' + this.topologyIndexF].offsetWidth / 2 - 50,
-            y: this.$refs['topology-canvas' + this.topologyIndexF].offsetHeight / 2 - 50
-          },
-          data: { imageId: node.data.imageId }
-        })
-      const timer = setTimeout(() => {
-        this.dragFlag = true
-        clearTimeout(timer)
-      }, 100)
-    },
-    getLocked (data) {
-      let locked = true
-      if (data.nodes && data.nodes.length) {
-        for (const item of data.nodes) {
-          if (!item.locked) {
-            locked = false
-            break
-          }
-        }
-      }
-      if (locked && data.lines) {
-        for (const item of data.lines) {
-          if (!item.locked) {
-            locked = false
-            break
-          }
-        }
-      }
-
-      return locked
-    },
-
-    onUpdateProps (node) {
-      // 如果是node属性改变，需要传入node，重新计算node相关属性值
-      // 如果是line属性改变，无需传参
-      getTopology(this.topologyIndex).updateProps(true, [node])
-    },
-
-    handleAvatarSuccess () {
-
-    },
-    beforeAvatarUpload (file, fileList) {
-      const this_ = this
-      const isJPG = (file.raw.type === 'image/jpeg' || file.raw.type === 'image/png')
-      const isLt2M = (file.size / 1024 / 1024) < 2
-      if (!isJPG) {
-        this.$message.error(this_.$t('project.topology.imgFormat'))
-        fileList = fileList.splice(fileList.length - 1, 1)
-        return false
-      }
-      if (!isLt2M) {
-        this.$message.error(this_.$t('project.topology.imgSize'))
-        fileList = fileList.splice(fileList.length - 1, 1)
-        return false
-      }
-      new Promise(function (resolve, reject) {
-        const width = 0
-        const height = 0
-        const _URL = window.URL || window.webkitURL
-        const img = new Image()
-        img.onload = function () {
-          const valid = img.width > width && img.height > height
-          this_.imgWidth = img.width
-          this_.imgHeight = img.height
-          valid ? resolve() : reject()
-        }
-        img.src = _URL.createObjectURL(file.raw)
-      }).then(() => {
-        if (isJPG) {
-          this.file = file.raw
-        }
-        return file.raw
-      }, () => {
-        this.$message.error(this_.$t('project.topology.imgMeasure'))
-        return Promise.reject()
-      })
-      return false
-    },
-
-    toolShowChange (attr) {
-      this.toolShow[attr] = !this.toolShow[attr]
-    },
-    /* topology 方法 */
-    end (v) {
-
-    },
-    /* tools 方法 */
-
-    imgUpload () {
-      const this_ = this
-      if (!this.imageSave) {
-        this.imageSave = true
-      }
-      if (!this.uploadPic.unit) {
-        this.$message({
-          message: this_.$t('project.topology.unitError'),
-          type: 'error'
-        })
-        return
-      }
-      if (!this.file) {
-        this.$message({
-          message: this_.$t('project.topology.imgError'),
-          type: 'error'
-        })
-        return
-      }
-      this.upload()
-    },
-    upload () {
-      const form = new FormData()
-      form.append('file', this.file)
-      if (this.uploadPic.name) {
-        form.append('name', this.uploadPic.name)
-      } else {
-        form.append('name', this.file.name.substring(0, this.file.name.lastIndexOf('.')))
-      }
-      form.append('unit', this.uploadPic.unit)
-      form.append('width', this.imgWidth)
-      form.append('height', this.imgHeight)
-      this.$post('monitor/project/topo/icon', form, { 'Content-Type': 'multipart/form-data' }).then(res => {
-        this.imageSave = false
-        if (res.code == 200) {
-          this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })
-          this.uploadPicShow = false
-          this.$get('monitor/project/topo/icon', { id: res.data.id }).then(iconInfo => {
-            dealImg(`monitor/project/topo/icon/${res.data.id}/1`, res.data.id).then((data, header) => {
-              const group = this.tools.find(tool => tool.group === this.uploadPic.unit)
-              this.iconArray.push({
-                ...iconInfo.data.list[0],
-                image: data.data
-              })
-              if (group) {
-                group.children.push({
-                  ...imageTemp,
-                  data: {
-                    ...imageTemp.data,
-                    text: res.data.imageName,
-                    image: data.data,
-                    imageId: res.data.id,
-                    unit: this.uploadPic.unit,
-                    rect: {
-                      width: data.width,
-                      height: data.height
-                    }
-                  }
-                })
-              } else {
-                this.tools.push({
-                  group: this.uploadPic.unit,
-                  children: [{
-                    ...imageTemp,
-                    data: {
-                      ...imageTemp.data,
-                      text: res.data.imageName,
-                      image: data.data,
-                      imageId: res.data.id,
-                      unit: this.uploadPic.unit,
-                      rect: {
-                        width: data.width,
-                        height: data.height
-                      }
-                    }
-                  }]
-                })
-              }
-            })
-          })
-        } else {
-          this.$message.error(res.msg)
-        }
-      })
-    },
-
-    delImg (item) {
-      this.$delete('monitor/project/topo/icon?ids=' + item.data.imageId).then(res => {
-        if (res.code == 200) {
-          this.$message({ duration: 2000, type: 'success', message: this.$t('tip.deleteSuccess') })
-          this.addNodeInit()
-        } else {
-          this.$message.error(res.msg)
-        }
-      })
-    },
-    delCollpseTitle (item) {
-      this.$delete('monitor/project/topo/iconUnit?unit=' + item.group).then(res => {
-        if (res.code == 200) {
-          this.$message({ duration: 2000, type: 'success', message: this.$t('tip.deleteSuccess') })
-          this.addNodeInit()
-        } else {
-          this.$message.error(res.msg)
-        }
-      })
-    },
-    tooltipDelete (item) {
-      this.$confirm(this.$t('tip.confirmDelete'), {
-        confirmButtonText: this.$t('tip.yes'),
-        cancelButtonText: this.$t('tip.no'),
-        type: 'warning'
-      }).then(() => {
-        this.delImg(item)
-      })
-    },
-    tooltipDeleteTitle (item) {
-      this.$confirm(this.$t('tip.confirmDelete'), {
-        confirmButtonText: this.$t('tip.yes'),
-        cancelButtonText: this.$t('tip.no'),
-        type: 'warning'
-      }).then(() => {
-        this.delCollpseTitle(item)
-      })
-    },
-    addNodeInit (imgidList) {
-      if (!this.fromOverView) {
-        this.$get('monitor/project/topo/icon').then(res => {
-          this.imgageLoading = true
-          this.tools = [...Tools]
-          let imgArr = []
-          let promiseArr = []
-          res.data.list.forEach((item, index) => {
-            item.imageName = item.name
-            delete item.name
-            promiseArr.push(topologyImg['img' + item.id] || dealImg(`monitor/project/topo/icon/${item.id}/1`, item.id))
-            imgArr.push({ ...item })
-          })
-          Promise.all(promiseArr).then((res2, header) => {
-            this.iconArray = [...res.data.list]
-            this.iconArray.forEach((item, index) => {
-              item.image = res2[index].data
-              const group = this.tools.find(tool => tool.group === item.unit)
-              if (group) {
-                group.children.push({
-                  ...imageTemp,
-                  data: {
-                    ...imageTemp.data,
-                    text: item.imageName,
-                    image: res2[index].data,
-                    imageId: item.id,
-                    unit: item.unit,
-                    rect: {
-                      width: res2[index].width === -1 ? 100 : res2[index].width,
-                      height: res2[index].height === -1 ? 100 : res2[index].height
-                    }
-                  }
-                })
-              } else {
-                this.tools.push({
-                  group: item.unit,
-                  children: [{
-                    ...imageTemp,
-                    data: {
-                      ...imageTemp.data,
-                      text: item.imageName,
-                      image: res2[index].data,
-                      imageId: item.id,
-                      unit: item.unit,
-                      rect: {
-                        width: res2[index].width === -1 ? 100 : res2[index].width,
-                        height: res2[index].height === -1 ? 100 : res2[index].height
-                      }
-                    }
-                  }]
-                })
-              }
-            })
-
-            this.imgInit = true
-            this.imgageLoading = false
-            imgArr = null
-            promiseArr = null
-          })
-        })
-      } else {
-        this.imgageLoading = true
-        this.$get('monitor/project/topo/icon').then((imageAllId) => {
-          let promiseArr = []
-          if (!imageAllId || !imageAllId.data) {
-            return
-          }
-          imgidList.forEach((item, index) => {
-            if (item.data.imageId && imageAllId.data.list.find(image => item.data.imageId === image.id)) {
-              promiseArr.push(topologyImg['img' + item.data.imageId] || dealImg(`monitor/project/topo/icon/${item.data.imageId}/1`, item.data.imageId))
-            } else if (item.data.imageId) {
-              promiseArr.push(imgDefault)
-            } else {
-              promiseArr.push('')
-            }
-          })
-          Promise.all(promiseArr).then((res2) => {
-            this.iconArray = imgidList.map(item => {
-              return {
-                id: item.data.imageId
-              }
-            })
-            this.iconArray.forEach((item, index) => {
-              if (item.id) {
-                item.image = res2[index].data
-              }
-            })
-            this.imgInit = true
-            this.imgageLoading = false
-            imgidList = null
-            promiseArr = null
-          })
-        })
-      }
-    },
-
-    dealImg (url) {
-      // 处理后端传过来的图片流乱码问题
-      if (url) {
-        return new Promise((resolve, reject) => {
-          this.$axios
-            .get(url)
-            .then((res) => {
-              const imageInfo = {
-                data: ('data:image/jpeg;base64,' + res.data),
-                // width: res.headers.width === -1 ? 100 : (res.headers.width > 900 ? 900 : res.headers.width),
-                // height: res.headers.height === -1 ? 100 : (res.headers.height > 900 ? 900 : res.headers.height)
-                width: res.headers.width === -1 ? 100 : Number(res.headers.width),
-                height: res.headers.height === -1 ? 100 : Number(res.headers.height)
-              }
-              if (imageInfo.width > 900 || imageInfo.height > 900) {
-                if (imageInfo.height > imageInfo.width) {
-                  imageInfo.width = imageInfo.width * 900 / imageInfo.height
-                  imageInfo.height = 900
-                } else if (imageInfo.height < imageInfo.width) {
-                  imageInfo.height = imageInfo.height * 900 / imageInfo.width
-                  imageInfo.width = 900
-                } else {
-                  imageInfo.height = 900
-                  imageInfo.width = 900
-                }
-              }
-              return imageInfo
-            })
-            .then(data => {
-              resolve(data)
-              // changeImage(data,(img)=>{
-              //   resolve(img)
-              // })
-            })
-            .catch()
-        })
-      }
-    },
-
-    delPen (obj) { // 删除元素
-      getTopology(this.topologyIndex).delete(obj)
-      this.props = {
-        node: null,
-        line: null,
-        multi: false,
-        nodes: null,
-        locked: false,
-        pen: null,
-        pens: null
-      }
-    },
-
-    editTopology (val) {
-      this.editTopologyFlag = true
-      this.showNoData = false
-      this.topoScreenState = JSON.parse(JSON.stringify(this.topoScreen))
-      this.$store.commit('setShowTopoScreen', true)
-      const timer = setTimeout(() => {
-        getTopology(this.topologyIndex).lock(0)
-        getTopology(this.topologyIndex).data.pens.forEach((item, index) => { // 停止动画 以及赋值默认data
-          if (item.animatePlay) {
-            item.stopAnimate()
-          }
-          if (!item.data.expressArr.length) {
-            item.data.expressArr = ['']
-            item.data.legends = ['']
-          }
-          if (!item.data.expressAllArr || !item.data.expressAllArr.length) {
-            item.data.expressAllArr = ['']
-            item.data.legendsAll = ['']
-          }
-          item.animateType = item.data.animateType
-          if (item.type === 0) {
-            item.fillStyle = item.data.fillStyle
-            item.strokeStyle = item.data.strokeStyle
-            item.animatePlay = false
-            item.fontColor = item.data.fontColor || '#222222'
-            item.gradientType = item.data.gradientType ? item.data.gradientType : 0
-            if (!item.data.gradientColor) {
-              item.data.gradientType = 0
-              item.data.gradientColor = '#bae7ff'
-            }
-            if (item.data.gradientType === 0) {
-              item.bkType = 0
-            } else {
-              item.bkType = 1
-            }
-          } else if (item.type === 1) {
-            item.animateColor = item.data.animateColor
-            item.strokeStyle = item.data.strokeStyle
-            item.arrowColor = item.data.arrowColor
-            item.fromArrowColor = item.data.arrowColor
-            item.toArrowColor = item.data.arrowColor
-            item.animatePlay = false
-            item.fontColor = item.data.fontColor || '#222222'
-          }
-        })
-        getTopology(this.topologyIndex).caches = {
-          index: 0,
-          list: [JSON.parse(JSON.stringify(getTopology(this.topologyIndex).data))]
-        }
-        const dom = document.getElementById('topology-canvas' + this.topologyIndexF)
-        const domRect = dom ? dom.getBoundingClientRect() : {}
-        getTopology(this.topologyIndex).canvasPos = domRect
-        clearTimeout(timer)
-      })
-    },
-
-    animateCanvas () {
-      getTopology(this.topologyIndex).render()
-      getTopology(this.topologyIndex).animate()
-    },
-
-    refreshTopology () {
-      // canvas.open()
-    },
-
-    dropdownClick () {
-
-    },
-
-    changeTopologyOpt (val, key) {
-      // this.topologyData.data[key]=this.colorRGBtoHex(val);
-      // getTopology(this.index).data[key]=val;
-      // getTopology(this.index).render();
-      const dataOption = getTopology(this.topologyIndex).data
-      dataOption[key] = this.lineName
-      getTopology(this.topologyIndex).render()
-    },
-    notModuleIDArrChange (id) {
-      this.notModuleIDArr = this.notModuleIDArr.filter(item => item.id !== id)
-    },
-    // 保存
-    saveTopology () {
-      this.previewData = ''
-      this.isPreview = false
-      this.editTopologyFlag = true
-      this.showNoData = false
-      const topologyData = getTopology(this.topologyIndex).pureData()
-      let flag = true
-      const arr = []
-      this.notModuleIDArr = []
-      topologyData.pens.forEach(item => {
-        if (item.type === 0 && ((!item.data) || (item.data && !item.data.moduleId))) {
-          arr.push(item)
-          this.props = {
-            node: null,
-            line: null,
-            multi: false,
-            nodes: null,
-            locked: false,
-            pen: null,
-            pens: null
-          }
-          flag = false
-        }
-      })
-      if (!flag) {
-        this.notModuleIDArr = arr
-      }
-      if (flag) {
-        this.editTopologyFlag = false
-        topologyData.rule = false
-        topologyData.grid = false
-        topologyData.gridSize = 10
-        topologyData.pens.forEach(item => {
-          item.animatePlay = item.data.animatePlay
-          item.data.animateType = item.animateType
-          if (item.type === 0 && JSON.stringify(item.data.imageId)) {
-            item.image = ''
-            item.animateFrames = []
-            item.animateReady = null
-            delete item.img
-            delete item.lastImage
-          }
-          item.data.expressArr = item.data.expressArr.filter((expression, i) => {
-            if (!expression) {
-              item.data.legends.splice(i, 1)
-              return false
-            } else {
-              return true
-            }
-          })
-          item.data.expressAllArr = item.data.expressAllArr.filter((expression, i) => {
-            if (!expression) {
-              item.data.legendsAll.splice(i, 1)
-              return false
-            } else {
-              return true
-            }
-          })
-        })
-        if (this.penToolTipScale == getTopology(this.topologyIndex).data.scale) {
-          getTopology(this.topologyIndex).data.scale = this.oldScale
-        }
-        this.$put('monitor/project/topo', { topo: JSON.stringify(topologyData), projectId: this.projectInfo.id }).then(res => {
-          this.prevent_opt.save = false
-          if (res.code === 200) {
-            this.$message({
-              message: this.$t('tip.saveSuccess'),
-              type: 'success'
-            })
-            this.$store.commit('setShowTopoScreen', this.topoScreenState)
-            this.$nextTick(() => {
-              getTopology(this.topologyIndex).lock(1)
-              const dom = document.getElementById('topology-canvas' + this.topologyIndexF)
-              const domRect = dom ? dom.getBoundingClientRect() : {}
-              getTopology(this.topologyIndex).canvasPos = domRect
-              this.reload()
-            })
-          }
-        }).catch(res => {
-          this.prevent_opt.save = false
-          this.$message({
-            message: res.msg,
-            type: 'error'
-          })
-        })
-      } else {
-        this.$message({
-          showClose: true,
-          message: this.$t('project.topology.selMod'),
-          type: 'warning'
-        })
-      }
-    },
-    // 取消
-    cancelTopology () {
-      this.isPreview = false
-      this.previewData = ''
-      this.editTopologyFlag = false
-      this.$nextTick(() => {
-        getTopology(this.topologyIndex).lock(1)
-        let dom = document.getElementById('topology-canvas' + this.topologyIndexF)
-        let domRect = dom ? dom.getBoundingClientRect() : {}
-        getTopology(this.topologyIndex).canvasPos = domRect
-        this.$store.commit('setShowTopoScreen', this.topoScreenState)
-        dom = null
-        domRect = null
-      })
-      this.reload()
-    },
-    // 预览
-    previewTopology () {
-      const topologyData = getTopology(this.topologyIndex).pureData()
-      this.previewData = topologyData
-      this.isPreview = true
-      this.editTopologyFlag = false
-      topologyData.rule = false
-      topologyData.grid = false
-      topologyData.gridSize = 10
-      topologyData.pens.forEach(item => {
-        item.animatePlay = item.data.animatePlay
-        item.data.animateType = item.animateType
-        if (item.type === 0 && JSON.stringify(item.data.imageId)) {
-          item.animateFrames = []
-          item.animateReady = null
-          delete item.img
-          delete item.lastImage
-        }
-        item.data.expressArr = item.data.expressArr.filter((expression, i) => {
-          if (!expression) {
-            item.data.legends.splice(i, 1)
-            return false
-          } else {
-            return true
-          }
-        })
-        item.data.expressAllArr = item.data.expressAllArr.filter((expression, i) => {
-          if (!expression) {
-            item.data.legendsAll.splice(i, 1)
-            return false
-          } else {
-            return true
-          }
-        })
-      })
-      if (this.penToolTipScale == getTopology(this.topologyIndex).data.scale) {
-        getTopology(this.topologyIndex).data.scale = this.oldScale
-      }
-      this.$nextTick(() => {
-        this.previewData = topologyData
-        getTopology(this.topologyIndex).lock(1)
-        const dom = document.getElementById('topology-canvas' + this.topologyIndexF)
-        const domRect = dom ? dom.getBoundingClientRect() : {}
-        getTopology(this.topologyIndex).canvasPos = domRect
-        this.initPens(topologyData)
-        // this.reload()
-      })
-    },
-    previewExit () { // 继续编辑
-      this.isPreview = false
-      this.editTopology()
-    },
-
-    // 联动 project
-    changeProjectTitle () {
-      const data = getTopology(this.topologyIndex).data
-      this.topologyInfo = {
-        fontSize: data.data.fontSize,
-        align: data.data.align,
-        fontColor: data.data.fontColor,
-        opacity: data.data.opacity,
-        name: data.name
-      }
-    },
-    /* tools 方法 */
-
-    winResize () {
-      const timer = setTimeout(() => {
-        let domRect = document.getElementById('topology-canvas' + this.topologyIndex).getBoundingClientRect()
-        getTopology(this.topologyIndex).canvasPos = domRect
-        if (this.fromOverView) {
-          getTopology(this.topologyIndex).open(this.oldTopologyData)
-        }
-        let flag = false
-
-        const 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).resize()
-        getTopology(this.topologyIndex).centerView()
-        this.getNodesArr()
-        domRect = null
-        clearTimeout(timer)
-      }, 500)
-    },
-    contextmenuNone () {
-      this.contextmenu = {
-        left: null,
-        top: null,
-        bottom: null
-      }
-    },
-    canvasMove (e) { // 画布上的移动 确定tooltip的位置
-      if (this.tooltipPosition.show) {
-        return
-      }
-      window.ePosition = e
-    },
-    tooltipOver () {
-      clearTimeout(this.timer3)
-      this.timer3 = null
-    },
-    tooltipOut () {
-      this.timer3 = setTimeout(() => {
-        this.tooltipPosition.show = false
-        this.timer3 = null
-      }, 50)
-    },
-    nodeDefaultWidth (nodeName) {
-      switch (nodeName) {
-        case 'myCube':
-        case 'rectangleImg':
-          return 0
-        default:
-          return 1
-      }
-    },
-    previewBeforeClose (done) {
-      this.$emit('changeTopologyIndexF')
-      done()
-    },
-    selpopIs (pen, state) { // 判断是否有图表
-      let flag = true
-      if (state.id === 'other') {
-        flag = false
-      }
-      if (state.id === 'total' && pen.data.expressArr.length === 0) {
-        flag = false
-      }
-      return flag
-    },
-    redoIndexChange (index) {
-      this.redoIndex = index
-    },
-    querySearch (queryString, cb) {
-      const restaurants = this.unitArr
-      const results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants
-      // 调用 callback 返回建议列表的数据
-      cb(results)
-    },
-    createFilter (queryString) {
-      return (restaurant) => {
-        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
-      }
-    },
-    uploadPicChange () {
-      this.unitArr = []
-      this.tools.forEach((item, index) => {
-        if (index > 0) {
-          this.unitArr.push({
-            value: item.group
-          })
-        }
-      })
-      this.uploadPic.name = ''
-      this.uploadPic.unit = ''
-      this.file = null
-      this.uploadPicShow = true
-    },
-    zoomMap (num) {
-      getTopology(this.topologyIndex).scale(getTopology(this.topologyIndex).data.scale + num)
-    },
-    penToBottom () {
-      getTopology(this.topologyIndex).bottom()
-    },
-    changeScreen () {
-      this.$store.commit('setShowTopoScreen', !this.topoScreen)
-    },
-    onContextMenu (event) {
-      event.preventDefault()
-      event.stopPropagation()
-
-      if (event.clientY + 360 < document.body.clientHeight) {
-        this.contextmenu = {
-          left: event.clientX + 'px',
-          top: event.clientY + 'px'
-        }
-      } else {
-        this.contextmenu = {
-          left: event.clientX + 'px',
-          bottom: document.body.clientHeight - event.clientY + 'px'
-        }
-      }
-    }
-  },
-  beforeDestroy () {
-    if (this.timer) {
-      clearInterval(this.timer)
-      this.timer = null
-    }
-    if (this.timer4) {
-      clearInterval(this.timer4)
-      this.timer4 = null
-    }
-    if (getTopology(this.topologyIndex)) {
-      getTopology(this.topologyIndex).destroy()
-      const StoreData = le5leStore.get()
-      const arr = []
-      Object.keys(StoreData).forEach(key => {
-        const id = key.split('-')[0]
-        arr.push(id)
-        if (getTopology(this.topologyIndex).id == id) {
-          le5leStore.set(key, null)
-          delete StoreData[key]
-        }
-      })
-      Object.keys(getTopology(this.topologyIndex)).forEach(key => {
-        getTopology(this.topologyIndex)[key] = null
-      })
-      setTopology(this.topologyIndex, null)
-    }
-    if (document.getElementById('topology-canvas' + this.topologyIndexF)) {
-      document.getElementById('topology-canvas' + this.topologyIndexF).removeEventListener('mousemove', this.canvasMove)
-    }
-    window.removeEventListener('resize', this.winResize)
-    window.removeEventListener('click', this.contextmenuNone)
-  },
-  destroyed () {
-
-  }
-}
-</script>
diff --git a/nezha-fronted/src/components/common/project/topologyL5.vue b/nezha-fronted/src/components/common/project/topologyL5.vue
deleted file mode 100644
index a6196bc0a..000000000
--- a/nezha-fronted/src/components/common/project/topologyL5.vue
+++ /dev/null
@@ -1,2420 +0,0 @@
-<style>
-  @import "./L5/css/iconfont.css";
-  @import "./L5/css/props.css";
-</style>
-<template>
-  <div class="project-box list-page" v-my-loading="topologyLoading">
-    <div class="main-list" :style="{height: fromOverView ?'100%' : 'calc(100% - 30px)'}">
-      <div class="main-container" :class="fromOverView?'from-overview':'from-project'">
-        <div v-if="(editTopologyFlag || isPreview)&&!fromChart" class="edit-topologyLine top-tools" style="padding-left: 20px;width: calc(100% - 40px);display: inline-block">
-          <!--工具栏-->
-          <span v-if="!isPreview" class="project-topology-tool">
-          <el-dropdown trigger="click" size="small" placement="bottom-start">
-            <span class="el-dropdown-title"><i class="iconfont icon-cube"></i> <i
-              class="nz-icon nz-icon-arrow-down"></i></span>
-            <el-dropdown-menu slot="dropdown" @click="dropdownClick" class="right-box-select-top right-public-box-dropdown-top">
-              <div style="height: 450px"  v-my-loading="imgageLoading">
-                <el-card shadow="hover" style="height:420px;width:284px;overflow-y: auto"
-                         class="project-topology-add-node">
-                <!--<div class="drag-header">——</div>-->
-                <el-collapse v-model="activeNames" v-for="(item, index) in tools" :key="index" class="collapse-box">
-                  <el-collapse-item :title="item.group" :name="item.group">
-                    <template slot="title">
-                      <div style="display: flex;width: 100%;">
-                        <i class="nz-icon nz-icon-arrow-right"></i> <div style="flex: 1">{{item.group}}</div> <i class="nz-icon nz-icon-delete title-delete" @click="tooltipDeleteTitle(item)" :title="$t('overall.delete')"></i>
-                      </div>
-                    </template>
-                    <div v-for="(btn, i) in item.children" :key="'info2'+'-'+index+'-'+i" class="buttons">
-                      <a
-                        :key="i"
-                        :title="btn.data.text"
-                        :draggable="btn.data"
-                        @dragstart.stop="onDrag($event, btn)"
-                        @mousedown="dragFlag=false"
-                        @mouseup="dragFlagChange(btn)"
-                        class="btn"
-                      >
-                        <img :src="btn.data.image" v-if="btn.data.image">
-                        <i v-else :class="`iconfont ${btn.icon}`"></i>
-                      </a>
-                      <i v-if="item.group!=='General'" class="delIcon nz-icon nz-icon-delete" @click="tooltipDelete(btn)"></i>
-                    </div>
-                  </el-collapse-item>
-                </el-collapse>
-              </el-card>
-                <div class="upload-pic-box" @click="uploadPicChange">
-                  <i class="el-icon-plus"></i>
-                  <span>
-                     {{ $t('overall.uploadCustomPicture') }}
-                  </span>
-                </div>
-              </div>
-            </el-dropdown-menu>
-          </el-dropdown>
-
-          <div class="flex middle special-select mb10"
-               style="width: 75px;height: 28px;display: inline-block;margin: 0 40px 0 20px;background: #fff">
-            <div class="full pr10">
-              <el-select v-model="lineName" size="small"
-                         :popper-append-to-body="false"
-                         popper-class="right-box-select-top"
-                         @change="changeTopologyOpt(lineName,'lineName')">
-               <div slot="prefix">
-                <div class="icon-item" style="width: 100%;padding: 0">
-                  <svg>
-                    <g fill="none" :stroke="theme === 'light' ? 'black' : '#BEBEBE'" stroke-width="1">
-                      <path
-                        :d="penLineType.find((item,i)=>item.id==lineName).d"
-                      >
-                      </path>
-                    </g>
-                  </svg>
-                </div>
-              </div>
-                <el-option :disabled="true" :value="false">{{$t('project.topology.defaultLineType')}}</el-option>
-                <el-option v-for="(item,index) in penLineType" :value="item.id" :key="index">
-                  <div class="icon-item" style="position: relative;width: 100%;padding: 0">
-                    <svg>
-                    <g fill="none" :stroke="(lineName==item.name)?'#ee9d3f': item.strokeColor " 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>
-            </div>
-          </div>
-
-          <topology-top-tool
-            v-if="editTopologyFlag&&toolShow.topTool"
-            :selection.sync="props"
-            @del="delPen"
-            :index="topologyIndex"
-            ref="topTool"
-            @toolShowChange="toolShowChange"
-            :cachesIndex="cachesIndex"
-            :redoIndexChange="redoIndexChange"
-            :toolShow="toolShow">
-          </topology-top-tool>
-
-        </span>
-          <span class="float-right">
-            <button @click="previewTopology" v-if="!isPreview" class="nz-btn nz-btn-size-normal nz-btn-style-light"
-                  style="margin-right: 20px"
-          >
-             {{$t('overall.preview')}}
-           </button>
-            <button v-if="isPreview" class="nz-btn nz-btn-size-normal nz-btn-style-light" @click="previewExit"
-                    style="margin-right: 20px"
-            >
-             {{$t('project.topology.previewExit')}}
-           </button>
-            <button class="nz-btn nz-btn-size-normal nz-btn-style-normal" @click="saveTopology"
-                   :disabled="prevent_opt.save"
-                   :class="{'nz-btn-disabled':prevent_opt.save}"
-                   style="margin-right: 20px">
-             {{$t('overall.save')}}
-           </button>
-            <button class="nz-btn nz-btn-size-normal nz-btn-style-normal" style="margin-right: 20px" @click="cancelTopology">
-             {{$t('project.topology.exit')}}
-           </button>
-         </span>
-        </div>
-        <div v-if="(!editTopologyFlag&&!fromOverView) && !isPreview" class="top-tools" style="padding-left: 10px">
-          <div>{{obj.name}}</div>
-          <div v-if="!editTopologyFlag&&!fromPrev&&!fromOverView" class="top-tool-right">
-            <pick-time
-              v-show="!editTopologyFlag"
-              ref="pickTime"
-              v-model="searchTime"
-              :refresh-data-func="dateChange"
-              :showTimePicker="false"
-              :use-chart-unit="false"
-              class="pickTime margin-r-10">
-            </pick-time>
-            <button v-has="'project_edit'" class="top-tool-btn margin-r-10" type="button" @click="editTopology(false)" :title="$t('overall.edit')">
-              <i class="nz-icon nz-icon-edit"></i>
-            </button>
-            <button class="top-tool-btn" type="button" @click="changeScreen" :title="topoScreen? $t('dashboard.screen.exit') : $t('dashboard.screen')">
-              <i :class="topoScreen?'nz-icon-exit-full-screen':'nz-icon-full-screen'" class="nz-icon"></i>
-            </button>
-          </div>
-        </div>
-        <div class="nz-table-list">
-          <!--悬浮network部分-->
-          <div class="network-info">
-            <div v-if="popDataShow.main">
-              <popDataMain :moduleId="moduleId" :projectId="projectInfo.id"></popDataMain>
-            </div>
-            <div v-if="popDataShow.info">
-              <popDataInfo :moduleId="moduleId" :projectId="projectInfo.id"></popDataInfo>
-            </div>
-          </div>
-          <div :class="['page topo-page',fromOverView?'overview-page':'']" :style="{
-            border: fromOverView ? 'none' :`1px solid $--color-text-regular`
-          }">
-            <!--画布部分-->
-            <div :id="'topology-canvas' + topologyIndexF" :ref="'topology-canvas'+ topologyIndexF" class="full" @contextmenu="onContextMenu($event)"></div>
-            <!--设置属性-->
-            <div v-if="editTopologyFlag&&toolShow.attr && !fromOverView" class="props">
-              <canvas-props ref="CanvasProps"
-                            :index="topologyIndex"
-                            :imgArr = 'tools'
-                            :modules="modules"
-                            :selection.sync="props"
-                            @animate="animateCanvas"
-                            @change="onUpdateProps"
-                            @changeProjectTitle="changeProjectTitle"
-                            @del="delPen"
-                            @notModuleIDArrChange="notModuleIDArrChange">
-              </canvas-props>
-            </div>
-            <div class="context-menu" v-if="contextmenu.left && editTopologyFlag && !fromOverView" :style="this.contextmenu">
-              <CanvasContextMenu :index="topologyIndexF" :props.sync="props"></CanvasContextMenu>
-            </div>
-            <!--所有节点上的小图标-->
-            <div v-for="(item,index) in nodesArr" v-if="!editTopologyFlag&&!fromPrev"
-                 :key="index"
-                 v-show="(item.y + offsetY  - (48*(fromOverView?penToolTipScale:1)) > -10) && (item.x + item.width/2 + offsetX - (24*(fromOverView?penToolTipScale:1)) > - 10)"
-                 :style="{position: 'absolute',top:item.y + offsetY  - (48*(fromOverView?penToolTipScale:1))+'px',left:item.x + item.width/2 + offsetX - (24*(fromOverView?penToolTipScale:1)) +'px',transform:'scale('+(fromOverView?penToolTipScale:1)+')'}"
-                 class="network-pop"
-            >
-
-              <i
-                :ref="'modelTopId'+index"
-                :class="{'nz-icon':true, 'nz-icon-shuidi':true,'model-error':item.data.state&&item.data.state.error&&!item.data.show,'model-error-active':item.data.state&&item.data.state.error&&item.data.show}"
-                @click="showNodeTools(index,item)"
-              >
-                <i style="cursor: pointer" class="nz-icon nz-icon-model"></i>
-              </i>
-              <!--'selpop':selpopIs(item),'no-selPop':!selpopIs(item),'error-model-stat':modelPopError(item)  @click="popClick(item.id)" -->
-              <div v-for="(item1, index) in popData" :key="index">
-                <transition name="scaleTool">
-                  <i v-if="item.data.show"
-                     :class="{'nz-icon':true,'nz-icon-hexagonBorder':true,'error-model-stat':item.data.state[item1.id],'selpop':selpopIs(item,item1),'no-selPop':!selpopIs(item,item1),}"
-                     :style="{top:item1.top,left:item1.left}"
-                     :title="item1.title"
-                     @click="nodeTools(item,item1)"
-                  >
-                    <i class="nz-icon nz-icon-liubianxing"></i>
-                    <i :class="[item1.className,{'nz-icon':item1.className},'noMove']"></i>
-                  </i>
-                </transition>
-              </div>
-            </div>
-            <!--提示未添加module id的块-->
-            <div v-for="(item, index) in notModuleIDArr"
-                 v-if="editTopologyFlag&&!fromPrev"
-                 :key="index"
-                 :style="{
-             position: 'absolute',
-             top:item.y + offsetY - 10 +'px',
-             left:item.x + offsetX - 10+'px',
-             transform:'scale('+(fromOverView?penToolTipScale:1)+')',
-           }"
-            >
-              <div :style="{top:0,left:0,width:item.width+15+'px',height:0}" class="module-rect-top"></div>
-              <div :style="{top:0,left:item.width+15+'px',width:0,height:item.height+15+'px'}" class="module-rect-right"></div>
-              <div :style="{top:item.height+15 +'px',left:0,width:item.width+15+'px',height:0}" class="module-rect-bottom"></div>
-              <div :style="{top:0,left:0,width:0,height:item.height+15+'px'}" class="module-rect-left"></div>
-            </div>
-            <!--节点连线相关的 tooltip-->
-            <div v-if="tooltipPosition.show&&!editTopologyFlag"
-                 ref="topoTooltip"
-                 :style="{position:'absolute',top:tooltipPosition.top+'px',left:tooltipPosition.left+'px','z-index':10,height:tooltipPosition.height+'px'}"
-                 @mouseout="tooltipOut"
-                 @mouseover="tooltipOver"
-            >
-              <topoTooltip  class="nz-tooltip-bac" :chartDataParent="chartData" :filterTime="filterTime"/>
-            </div>
-            <div v-show="showNoData" class="topo-noData">
-              <svg class="icon" aria-hidden="true">
-                <use xlink:href="#nz-icon-no-data-project"></use>
-              </svg>
-              <div class="content">No data</div>
-            </div>
-          </div>
-          <div v-if="!fromOverView&&!editTopologyFlag&&!fromPrev" class="right-bottom-zoom">
-            <div class="zoom-option" style="border-bottom: 1px solid #c5c8cb;" @click="zoomMap(0.25)" :title="$t('overall.enlargement')"><span><i class="nz-icon nz-icon-enlarge"></i></span></div>
-            <div class="zoom-option" @click="zoomMap(-0.25)" :title="$t('overall.shrink')"><span><i class="nz-icon nz-icon-narrow"></i></span></div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <!--<div class="left-bottom" v-if="editTopologyFlag">-->
-    <!--<div class="title">小提示</div>-->
-    <!--<ul class="group">-->
-    <!--<li>编辑时：</li>-->
-    <!--<li>1.Ctrl + 鼠标移动：移动整个画布</li>-->
-    <!--<li>2.Ctrl + 鼠标滚轮：缩放</li>-->
-    <!--<li>3.选中元素 按下Delete键或者Backspace可以删除元素</li>-->
-    <!--</ul>-->
-    <!--</div>-->
-    <!--endpoint-->
-    <transition name="right-box">
-      <endpointTable v-if="popDataShow.endpoint" :moduleId="moduleId" :moduleName="moduleName" :projectId="projectInfo.id"
-                     @close="popDataShowUpdate('',true)">endpoint
-      </endpointTable>
-    </transition>
-    <!--asset-->
-    <transition name="right-box">
-      <assetTable v-if="popDataShow.asset" :moduleId="moduleId" :moduleName="moduleName" :projectId="projectInfo.id"
-                  @close="popDataShowUpdate('',true)">alert
-      </assetTable>
-    </transition>
-    <!--alert-->
-    <transition name="right-box">
-      <alertTable v-if="popDataShow.alert" :moduleId="moduleId" :moduleName="moduleName" :projectId="projectInfo.id"
-                  @close="popDataShowUpdate('',true)">alert
-      </alertTable>
-    </transition>
-    <!--Custom picture-->
-    <el-dialog
-      :title="title"
-      :visible.sync="uploadPicShow"
-      width="auto"
-      @close="uploadPicShow = false"
-      destroy-on-close>
-      <el-row class="upload-pic-row">
-        <el-col :span="4" class="upload-pic-label">{{ $t('overall.name') }}</el-col>
-        <el-col :span="20">
-          <el-input maxlength="64" show-word-limit v-model="uploadPic.name" size="small"  :placeholder="$t('project.topology.placeholderImg')"></el-input>
-        </el-col>
-      </el-row>
-      <el-row class="upload-pic-row">
-        <el-col :span="4" class="upload-pic-label">{{ $t('overall.folder') }}</el-col>
-        <el-col :span="20">
-          <el-autocomplete
-            popper-class="right-box-select-top right-public-box-dropdown-top"
-            :maxlength="64" show-word-limit
-            class="inline-input"
-            v-model="uploadPic.unit"
-            :fetch-suggestions="querySearch"
-            size="small"
-          ></el-autocomplete>
-        </el-col>
-      </el-row>
-
-      <el-row class="upload-pic-row">
-        <el-col :span="4" class="upload-pic-label"> </el-col>
-        <el-col :span="20">
-          <div class="upload-body">
-            <el-upload
-              drag
-              class="upload-demo"
-              action=" "
-              :show-file-list="true"
-              :on-change="beforeAvatarUpload"
-              :auto-upload="false"
-              accept=".jpg,.png"
-              :limit="1"
-              :id="'upload-pic-show'">
-              <!--<div slot="tip" class="el-upload__tip" >{{$t('overall.importTipImg')}}</div>-->
-              <i class="nz-icon nz-icon-upload"></i>
-              <div class="el-upload__text">{{$t('overall.dragFileTip')}}，{{$t('overall.or')}}&nbsp;<em>{{$t('overall.clickUpload')}}</em></div>
-            </el-upload>
-          </div>
-        </el-col>
-      </el-row>
-      <div class="upload-pic-row" style="text-align: center">
-            <span>
-               <button class="nz-btn nz-btn-size-normal nz-btn-style-light" style="margin-right: 20px" @click="uploadPicShow=false">
-             {{$t('project.topology.exit')}}
-           </button>
-
-              <button class="nz-btn nz-btn-size-normal nz-btn-style-normal" @click="imgUpload" :disabled="prevent_opt.save"
-                      :class="{'nz-btn-disabled':prevent_opt.save}"
-                      style="">
-             {{$t('overall.save')}}
-           </button>
-            </span>
-      </div>
-
-    </el-dialog>
-  </div>
-</template>
-
-<script>
-import { Topology } from '@topology/core'
-import { Store as le5leStore } from 'le5le-store'
-import {
-  flowPens
-} from '@topology/flow-diagram'
-import {
-  activityDiagram
-} from '@topology/activity-diagram'
-import {
-  classPens
-} from '@topology/class-diagram'
-import {
-  sequencePens,
-  sequencePensbyCtx
-} from '@topology/sequence-diagram'
-import { formPens } from '@topology/form-diagram'
-// import { Topology, registerNode } from '@topology/core'
-import imgDefault from '@/components/common/project/L5/services/img'
-import {
-  Tools,
-  imageTemp,
-  rectangleImg,
-  rectangleImgAnchors,
-  disposeTopoOldData,
-  // myShape,
-  // myAnchors,
-  // myIconRect,
-  // myTextRect,
-  onChangeAnimate,
-  onChangeAnimateLine
-  // myCubec,
-  // myCubeAnchors
-} from './L5/services/canvas.js'
-import { getTopology, setTopology, dealImg, topologyImg } from '../js/common'
-
-import CanvasProps from './L5/CanvasProps'
-import topologyTopTool from './L5//topologyTopTool'
-import CanvasContextMenu from './L5/CanvasContextMenu'
-import popDataMain from './popData/Main'
-import popDataInfo from './popData/Info'
-import alertTable from './popData/alertTable'
-import assetTable from './popData/assetTable'
-import endpointTable from './popData/endpointTable'
-import topoTooltip from './L5/topoTooltip'
-import { getMetricTypeValue, dealLegendAlias } from '../js/tools'
-import bus from '../../../libs/bus'
-import topologyMixin from '@/components/common/project/topologyMixin'
-// 注册到画布
-
-// registerNode('rectangleImg', myShape, myAnchors, myIconRect, myTextRect)
-// registerNode('myCube', myCubec, myCubeAnchors, null, null)
-
-export default {
-  name: 'topologyL5',
-  mixins: [topologyMixin],
-  data () {
-    const theme = localStorage.getItem(`nz-user-${localStorage.getItem('nz-user-id')}-theme`) || 'light'
-    return {
-      theme,
-      title: this.$t('overall.uploadCustomPicture'),
-      objChange: false, // project 变化 用于判断 init是否执行完成 执行完成 才可以执行下次变化
-      chartDataInfo: {},
-      topoPrevData: {}, // 预览数据
-      imgInit: false, // 判断图片是否加载完成
-      toolGroup: '基本形状',
-      editFlag: true,
-      tools: [...Tools],
-      props: {},
-      topologyLoading: false,
-      contextmenu: {
-        left: null,
-        top: null,
-        bottom: null
-      },
-      filterTime: [
-        bus.timeFormate(bus.getOffsetTimezoneData(-1), 'YYYY-MM-DD HH:mm:ss'),
-        bus.timeFormate(bus.getOffsetTimezoneData(), 'YYYY-MM-DD HH:mm:ss')
-      ],
-      showNoData: false,
-      topologyInfo: {
-        fontSize: 14,
-        align: 'left',
-        fontColor: '#000000',
-        opacity: 1,
-        name: ''
-      },
-      saveData: {},
-      oldTopologyData: '',
-      redoIndex: 0,
-      dataLength: 0,
-      editTopologyFlag: false,
-      searchTime: bus.getTimezontDateRange(),
-      activeNames: [],
-      topologyIndex: 0,
-      iconArray: [],
-      imgageLoading: false,
-      imageSave: false,
-      toolShow: {
-        node: true,
-        attr: true,
-        topTool: true,
-        nodeCord: [0, 0],
-        attrCord: [0, 0],
-        height: 500
-      },
-      dragFlag: true,
-      modules: [],
-      allModules: [],
-      projectInfo: {
-        title: '',
-        id: '',
-        remark: '',
-        alertStat: [1, 2, 3],
-        moduleMum: 6,
-        loading: true
-      },
-      timer: null, // 处理project短时间呢频繁变更的定时器
-      timer2: null, // 处理平移画布显示iconState的定时器
-      timer3: null, // 处理tooltip的显示定时器
-      timer4: null,
-      nodesArr: [],
-      notModuleIDArr: [],
-      popData: [
-        {
-          top: '-41px',
-          left: '-23px',
-          className: 'nz-icon-endpoint',
-          id: 'endpoint',
-          title: this.$t('project.topology.endpoint')
-        },
-        { top: '-41px', left: '22px', className: 'nz-icon-asset', id: 'asset', title: this.$t('asset.asset') },
-        { top: '-2px', left: '45px', className: '', id: 'other', title: '' },
-        { top: '37px', left: '22px', className: '', id: 'other', title: '' },
-        { top: '37px', left: '-23px', className: 'nz-icon-info-normal', id: 'info', title: this.$t('project.topology.info') },
-        { top: '-2px', left: '-45px', className: 'nz-icon-gaojing', id: 'alert', title: this.$t('project.topology.alert') }
-      ],
-      popDataShow: {
-        endpoint: false,
-        asset: false,
-        total: false,
-        other: false,
-        info: false,
-        alert: false,
-        main: false
-      },
-      moduleId: '',
-      moduleName: '',
-      tooltipPosition: {
-        top: 0,
-        left: 0,
-        show: false,
-        height: 250
-      },
-      chartData: {},
-      chartGetData: [],
-      penLineType: [
-        { d: 'M5 19 a50,100 0 0,1 40,0', 'stroke-dasharray': '', name: this.$t('project.topology.curve'), id: 'curve', strokeColor: theme == 'light' ? 'black' : '#BEBEBE' },
-        { d: 'M5 8 l20 0 l0 12 l20 0', 'stroke-dasharray': '', name: this.$t('project.topology.polyline'), id: 'polyline', strokeColor: theme == 'light' ? 'black' : '#BEBEBE' },
-        { d: 'M5 14 l40 0', 'stroke-dasharray': '', name: this.$t('project.topology.line'), id: 'line', strokeColor: theme == 'light' ? 'black' : '#BEBEBE' }
-        // {d:'M5 20 C0,8 50,0 85,0',"stroke-dasharray":"",name:'mind', strokeColor: theme == 'light' ? 'black' : '#BEBEBE'},
-      ],
-      lineName: 'curve',
-      cachesIndex: 0,
-      projectInfoShow: false,
-      projectAlertShow: false,
-      previewShow: false,
-      penId: undefined,
-      penToolTipScale: 1,
-      oldScale: 1,
-      uploadPicShow: false,
-      imgWidth: 0,
-      imgHeight: 0,
-      uploadPic: {
-        name: '',
-        unit: ''
-      },
-      unitArr: [],
-      topoScreenState: '', // 记录编辑前的 $store.ShowTopoScreen 结束编辑后返回
-      isPreview: false,
-      previewData: '',
-      offsetX: 0,
-      offsetY: 0,
-      prevData: null
-    }
-  },
-  components: {
-    'canvas-props': CanvasProps,
-    topologyTopTool,
-    popDataMain,
-    popDataInfo,
-    alertTable,
-    assetTable,
-    endpointTable,
-    topoTooltip,
-    CanvasContextMenu
-  },
-  props: {
-    topologyIndexF: {
-      default: 0
-    },
-    obj: {},
-    showTopTools: {
-      type: Boolean,
-      default: true
-    },
-    fromOverView: {
-      type: Boolean,
-      default: false
-    },
-    fromPrev: {
-      type: Boolean,
-      default: false
-    },
-    fromChart: {
-      type: Boolean,
-      default: false
-    },
-    topoPrevDataS: {
-
-    }
-  },
-  watch: {
-    topologyIndexF: {
-      immediate: true,
-      handler (n) {
-        this.topologyIndex = n
-      }
-    },
-    obj: {
-      deep: true,
-      immediate: true,
-      handler (n, o) {
-        if (n && n.id) {
-          // if (getTopology(this.topologyIndex)) {
-          //   getTopology(this.topologyIndex).destroy()
-          //   setTopology(this.topologyIndex, null)
-          // }
-          if (!this.objChange) {
-            this.editTopologyFlag = false
-            this.topologyLoading = true
-            this.projectInfoShow = false
-            this.projectAlertShow = false
-            if (n.id) {
-              this.getProjectData(n)
-            }
-            this.topologyLoading = true
-            this.init()
-            this.timer = null
-            this.objChange = true
-          } else {
-            if (!this.timer) {
-              this.timer = setInterval(() => {
-                if (this.objChange) { return }
-                this.editTopologyFlag = false
-                this.topologyLoading = true
-                this.projectInfoShow = false
-                this.projectAlertShow = false
-                if (n.id) {
-                  this.getProjectData(n)
-                }
-                clearTimeout(this.timer)
-                this.timer = null
-                this.objChange = true
-                this.topologyLoading = true
-                this.init()
-              }, 100)
-            } else {
-              clearTimeout(this.timer)
-              this.timer = setInterval(() => {
-                if (this.objChange) { return }
-                this.editTopologyFlag = false
-                this.topologyLoading = true
-                this.projectInfoShow = false
-                this.projectAlertShow = false
-                if (n.id) {
-                  this.getProjectData(n)
-                }
-                clearTimeout(this.timer)
-                this.timer = null
-                this.objChange = true
-                this.topologyLoading = true
-                this.init()
-              }, 100)
-            }
-          }
-        }
-      }
-    },
-    topoScreen (n) {
-      getTopology(this.topologyIndex).resize()
-      getTopology(this.topologyIndex).centerView()
-      // getTopology(this.topologyIndex).fitView(30)
-    },
-    shrink (n) {
-      const timer = setTimeout(() => {
-        const domRect = document.getElementById('topology-canvas' + this.topologyIndex).getBoundingClientRect()
-        getTopology(this.topologyIndex).canvasPos = domRect
-        getTopology(this.topologyIndex).resize()
-        getTopology(this.topologyIndex).centerView()
-        clearTimeout(timer)
-      }, 500)
-    }
-  },
-  computed: {
-    topoScreen () {
-      return this.$store.getters.getShowTopoScreen
-    },
-    shrink () {
-      return this.$store.getters.getIsShrink
-    }
-  },
-  created () {
-    // canvasRegister()
-  },
-  mounted () {
-    if (!this.fromOverView) { // 从overview来的 加载相应图片 优化首页加载速度
-      this.addNodeInit()
-    }
-    document.getElementById('topology-canvas' + this.topologyIndexF).addEventListener('mousemove', this.canvasMove)
-    window.addEventListener('resize', this.winResize)
-    window.addEventListener('click', this.contextmenuNone)
-  },
-  methods: {
-    init () {
-      // canvasOptions.on = this.onMessage
-      this.reload()
-      this.popDataShowUpdate('', false)
-    },
-
-    reload () {
-      this.topologyLoading = true
-      this.getTopologyData().then((data) => {
-        this.openTopologyData(data).then(() => {
-          this.initPens(data)
-        })
-      })
-    },
-    initPens (data) {
-      // 获取对应的值 给节点 连线添加对应动画
-      this.lineName = data.lineName ? data.lineName : this.lineName
-      getTopology(this.topologyIndex).setOptions({ drawingLineName: this.lineName })
-      this.chartGetData = []
-      const axiosArr = []
-      const promiseArr = []
-      let pensPromise = (pen, arr, index) => {
-        return new Promise((resolve, reject) => {
-          Promise.all(arr).then((res) => {
-            this.chartGetData[index].res = JSON.parse(JSON.stringify(this.computeData(res, pen.data.aggregation, pen)))
-            this.setAnimation(pen, this.chartGetData[index].res, !data.newData)
-            resolve()
-          })
-        })
-      }
-      const endTime = this.filterTime[1]
-      const startTime = this.filterTime[0]
-      const step = bus.getStep(startTime, endTime)
-      data.pens && data.pens.forEach((item, index) => {
-        this.chartGetData.push({ id: item.id, res: [] })
-        let arr = []
-        if (item.data.valueMappingShow) {
-          arr = item.data.expressArr.map((ele) => {
-            let query = ele
-            if (!query) {
-              return new Promise(resolve => {
-                resolve({ data: '', status: 'no query' })
-              })
-            }
-            query = encodeURIComponent(query)
-            query += '&nullType=' + 'null'
-            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) => {
-        if (!getTopology(this.topologyIndex)) {
-          return
-        }
-        if (!data.pens) {
-          data.pens = []
-        }
-        getTopology(this.topologyIndex).open(data)
-        getTopology(this.topologyIndex).lock(1)
-        this.objChange = false
-        let flag = false
-        const position = {
-          x: this.$refs['topology-canvas' + this.topologyIndexF].offsetWidth,
-          y: this.$refs['topology-canvas' + this.topologyIndexF].offsetHeight
-        }
-        this.oldScale = getTopology(this.topologyIndex).data().scale
-        getTopology(this.topologyIndex).data().pens.forEach(item => {
-          if (flag) {
-            return
-          }
-          if (item.x + item.width > position.x || item.y + item.height > position.y) {
-            if (this.fromOverView) {
-              getTopology(this.topologyIndex).fitView(20)
-              getTopology(this.topologyIndex).centerView()
-            } else {
-              getTopology(this.topologyIndex).centerView()
-            }
-            flag = true
-          }
-        })
-        if (!flag) {
-          setTimeout(() => {
-            getTopology(this.topologyIndex).centerView()
-          })
-        }
-        getTopology(this.topologyIndex).resize()
-        this.penToolTipScale = getTopology(this.topologyIndex).data().scale
-        const timer = setTimeout(() => {
-          getTopology(this.topologyIndex) && getTopology(this.topologyIndex).data().pens.forEach(item => {
-            if (item.animatePlay) {
-              getTopology(this.topologyIndex).stopAnimate(item.id)
-              const timer1 = setTimeout(() => {
-                getTopology(this.topologyIndex).startAnimate(item.id)
-                clearTimeout(timer1)
-              })
-            }
-          })
-          clearTimeout(timer)
-        }, 100)
-        this.oldTopologyData = JSON.stringify(getTopology(this.topologyIndex).data())
-        this.getNodesArr()
-        pensPromise = null
-      })
-    },
-    dateChange () {
-      // const nowTimeType = this.$refs.pickTime.$refs.timePicker.nowTimeType
-      // this.setSearchTime(nowTimeType.type, nowTimeType.value)
-      this.searchTime = bus.getTimezontDateRange()
-      this.filterTime[0] = bus.timeFormate(this.searchTime[0], 'YYYY-MM-DD HH:mm:ss')
-      this.filterTime[1] = bus.timeFormate(this.searchTime[1], 'YYYY-MM-DD HH:mm:ss')
-      this.reload()
-    },
-    setSearchTime (type, val) { // 设置searchTime
-      if (type === 'minute') {
-        const startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setMinutes(new Date(bus.computeTimezone(new Date().getTime())).getMinutes() - val), 'YYYY-MM-DD HH:mm:ss')
-        const endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())), 'YYYY-MM-DD HH:mm:ss')
-        this.$set(this.searchTime, 0, startTime)
-        this.$set(this.searchTime, 1, endTime)
-        this.$set(this.searchTime, 2, val + 'm')
-      } else if (type === 'hour') {
-        const startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setHours(new Date(bus.computeTimezone(new Date().getTime())).getHours() - val), 'YYYY-MM-DD HH:mm:ss')
-        const endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())), 'YYYY-MM-DD HH:mm:ss')
-        this.$set(this.searchTime, 0, startTime)
-        this.$set(this.searchTime, 1, endTime)
-        this.$set(this.searchTime, 2, val + 'h')
-      } else if (type === 'date') {
-        const startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setDate(new Date(bus.computeTimezone(new Date().getTime())).getDate() - val), 'YYYY-MM-DD HH:mm:ss')
-        const endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())), 'YYYY-MM-DD HH:mm:ss')
-        this.$set(this.searchTime, 0, startTime)
-        this.$set(this.searchTime, 1, endTime)
-        this.$set(this.searchTime, 2, val + 'd')
-      }
-      this.$refs.pickTime.$refs.timePicker.searchTime = this.searchTime
-    },
-    // 打开topology数据
-    openTopologyData (data) {
-      return new Promise((resolve, reject) => {
-        if (!document.getElementById('topology-canvas' + this.topologyIndexF)) {
-          return
-        }
-        data = this.$lodash.cloneDeep(data)
-        const canvasOptions = {
-          rotateCursor: '/static/roteCursor.cur',
-          disableEmptyLine: true,
-          autoExpandDistance: 0,
-          minScale: 0.2,
-          scaleKey: -1,
-          keydown: 1,
-          gridSize: 40
-        }
-        canvasOptions.ruleColor = this.theme == 'light' ? '#4e4e4e' : '#f6f6f6'
-        canvasOptions.gridColor = this.theme == 'light' ? '#4e4e4e' : '#BEBEBE'
-        if (!getTopology(this.topologyIndex)) {
-          let canvas = new Topology('topology-canvas' + this.topologyIndexF, canvasOptions)
-          // canvas.open(data)
-          setTopology(this.topologyIndex, canvas)
-          canvas = null
-        } else {
-          // getTopology(this.topologyIndex).open(data)
-        }
-        this.topologyLoading = false
-        getTopology(this.topologyIndex).register(flowPens())
-        getTopology(this.topologyIndex).register(activityDiagram())
-        getTopology(this.topologyIndex).register(classPens())
-        getTopology(this.topologyIndex).register(sequencePens())
-        getTopology(this.topologyIndex).registerCanvasDraw(sequencePensbyCtx())
-        getTopology(this.topologyIndex).registerCanvasDraw(formPens())
-        getTopology(this.topologyIndex).registerCanvasDraw({ rectangleImg: rectangleImg })
-        getTopology(this.topologyIndex).registerAnchors({ rectangleImg: rectangleImgAnchors })
-        getTopology(this.topologyIndex).on('translate', this.topTranslate) // 平移·
-        getTopology(this.topologyIndex).on('active', this.pensActive) // 选中·
-        getTopology(this.topologyIndex).on('scale', this.topoScale) // 缩放·
-        getTopology(this.topologyIndex).on('translatePens', () => {}) // 移动画笔结束·
-        getTopology(this.topologyIndex).on('translatingPens', () => {}) // 移动画笔进行中·
-        getTopology(this.topologyIndex).on('enter', this.penEnter) // 移入画笔·
-        getTopology(this.topologyIndex).on('leave', this.penLeave) // 移出画笔·
-        getTopology(this.topologyIndex).on('add', this.appPen) // 添加新画笔·
-        getTopology(this.topologyIndex).on('click', this.topoClick) // click画笔·
-        getTopology(this.topologyIndex).store.options.autoAnchor = true
-        this.getModule()// 获取module
-        resolve()
-      })
-    },
-    // 获取topology数据
-    getTopologyData () {
-      return new Promise(resolve => {
-        if (this.fromPrev) {
-          resolve(this.topoPrevDataS)
-        }
-        this.$get('monitor/project/topo', { projectId: this.obj.id }).then(res => {
-          if (!res.data) {
-            return
-          }
-          let data = JSON.parse(JSON.stringify(res.data.topo))
-          if (!res.data.topo || !res.data.topo.pens.length) {
-            this.showNoData = true
-          } else {
-            this.showNoData = false
-          }
-          if (this.isPreview) {
-            data = this.previewData
-          }
-          // data = JSON.parse(localStorage.getItem('topoData'))
-          if (!res.data.topo || !data.pens) {
-            data = {
-              background: '#FFFFFF00',
-              gridSize: 10,
-              gridColor: '#ededed',
-              lineWidth: 1,
-              ruleColor: '#4e4e4e'
-            }
-            this.projectInfoShow = true
-            this.projectAlertShow = true
-            this.saveData = JSON.parse(JSON.stringify(data))
-            this.topologyInfo.name = this.obj.name
-            data.ruleColor = this.theme == 'light' ? '#4e4e4e' : '#f9f9f9'
-            data.gridColor = this.theme == 'light' ? '#ededed' : '#090909'
-            data.grid = false
-            data.rule = false
-            resolve(data)
-            data = null
-          } else {
-            delete data.origin
-            data.ruleColor = this.theme == 'light' ? '#4e4e4e' : '#f9f9f9'
-            data.gridColor = this.theme == 'light' ? '#ededed' : '#090909'
-            data.grid = false
-            data.rule = false
-            if (data.data) {
-              this.topologyInfo = {
-                fontSize: data.data.fontSize,
-                align: data.data.align,
-                fontColor: data.data.fontColor,
-                opacity: data.data.opacity,
-                name: data.name
-              }
-            } else {
-              this.topologyInfo = {
-                fontSize: 14,
-                align: 'left',
-                fontColor: '#000000',
-                opacity: 1,
-                name: ''
-              }
-            }
-            if (this.fromOverView) { // 优化从首页来的加载速度
-              const arr = data.pens.filter(item => !item.type)
-              this.addNodeInit(arr)
-            }
-            this.timer4 = setInterval(() => {
-              if (!this.imgInit) {
-                return
-              }
-              const promiseArr = []
-              for (let i = 0; i < data.pens.length; i++) {
-                const line = data.pens[i]
-                if (line.type === 1) {
-                  // if (!data.pens.find(item => item.id === line.from.id) || !data.pens.find(item => item.id === line.to.id)) {
-                  //   data.pens.splice(i, 1)
-                  //   i--
-                  // }
-                }
-              }
-              data.pens.forEach(item => {
-                if (item.type === 0 && item.data.imageId) {
-                  const img = this.iconArray.find(item1 => item1.id == item.data.imageId)
-                  item.image = img ? img.image : imgDefault
-                }
-                if (item.type === 0) {
-                  // promiseArr.push(this.$get('stat/module/abnormal', { moduleId: item.data.moduleId }))
-                  item.data.state = {}
-                  item.data.state.asset = false
-                  item.data.state.endpoint = false
-                  item.data.state.alert = false
-                } else {
-                  // promiseArr.push({ type: 1 })
-                  item.data.state = {}
-                  item.data.state.asset = false
-                  item.data.state.endpoint = false
-                  item.data.state.alert = false
-                }
-              })
-              if (!res.data.topo.newData) {
-                data.pens = this.$lodash.orderBy(data.pens, 'type', 'desc') // 先处理线 再处理点 因为新版本 将连线开始结束放在的 点上控制
-                data.pens = data.pens.map(item => {
-                  if (item.type === 0) {
-                    item = disposeTopoOldData(item, data.pens)
-                  } else {
-                    // promiseArr.push({ type: 1 })
-                    if (item.from) {
-                      const find = data.pens.find(item1 => item1.id == item.from.id)
-                      if (!find.connectedLines) {
-                        find.connectedLines = []
-                      }
-                      find.connectedLines.push({
-                        anchor: item.from.anchorIndex + '',
-                        lineAnchor: item.id + '-0',
-                        lineId: item.id
-                      })
-                    }
-                    if (item.to) {
-                      const find = data.pens.find(item1 => item1.id == item.to.id)
-                      if (!find.connectedLines) {
-                        find.connectedLines = []
-                      }
-                      find.connectedLines.push({
-                        anchor: item.to.anchorIndex + '',
-                        lineAnchor: item.id + '-1',
-                        lineId: item.id
-                      })
-                    }
-                    item = disposeTopoOldData(item, data.pens)
-                  }
-                  return item
-                })
-                data.pens = this.$lodash.orderBy(data.pens, 'type', 'asc')
-              }
-              if (!data.data) {
-                this.projectInfoShow = true
-                this.projectAlertShow = true
-              } else if (!JSON.stringify(data.data.projectInfo)) {
-                this.projectInfoShow = true
-                this.projectAlertShow = true
-              } else {
-                this.projectInfoShow = data.data.projectInfo
-                this.projectAlertShow = data.data.alertInfo
-              }
-              if (!data.bkImage) {
-                data.bkImage = undefined
-              }
-              if (data.background === '#FFFFFF') {
-                data.background = '#FFFFFF00'
-              }
-              Promise.all(promiseArr).then(res => {
-                res[0].data.list.forEach((module, index) => {
-                  const item = data.pens.find(pens => module.id === pens.data.moduleId)
-                  if (item.type === 0 && item.data.state && res[index].data.list.length) {
-                    item.data.state.error = item.data.error = !module.state
-                    item.data.state.asset = !!module.asset
-                    item.data.state.alert = !!module.alert
-                    item.data.state.endpoint = !!module.endpoint
-                  } else {
-                    item.data.state = {
-                      error: false,
-                      asset: 0,
-                      alert: 0,
-                      endpoint: 0
-                    }
-                  }
-                })
-                this.saveData = JSON.parse(JSON.stringify(data))
-                resolve(data)
-                clearInterval(this.timer4)
-                this.timer4 = null
-              }).catch(res => {
-                this.saveData = JSON.parse(JSON.stringify(data))
-                resolve(data)
-                clearInterval(this.timer4)
-                this.timer4 = null
-              })
-            }, 2000)
-          }
-        })
-      })
-    },
-    // 赋值动画
-    setAnimation (pen, res, isOldData) { // 根据所有res的状态 赋值动画
-      let maxLevel = 0
-      if (res.length > 0) {
-        res.forEach((response, innerPos) => {
-          if (response.status !== 'success') {
-            return
-          }
-          if (response.data.result) {
-            response.data.result.forEach((queryItem, resIndex) => {
-              pen.data.valueMapping.forEach((item, index) => {
-                if (item.value === 'base') { return }
-                if (queryItem.showValue > item.value) {
-                  queryItem.level = item.level
-                  if (maxLevel < item.level) {
-                    maxLevel = item.level
-                  }
-                }
-              })
-            })
-          }
-        })
-      }
-      if (maxLevel !== 0) {
-        if (pen.type === 0) { // 判断valueMapping 给相应的状态
-          const selLevel = pen.data.valueMapping.find(item => item.level === maxLevel)
-          if (selLevel) {
-            pen.textColor = selLevel.color.text
-            pen.background = selLevel.color.fill
-            pen.color = selLevel.color.line
-            pen.bkType = 0
-          }
-          onChangeAnimate(pen, selLevel.animateType, selLevel.color.fill, selLevel.color.line, selLevel.color.text)
-        } else if (pen.type === 1) { // 判断valueMapping 给相应的状态
-          const selLevel = pen.data.valueMapping.find(item => item.level === maxLevel)
-          if (selLevel) {
-            pen.animateColor = selLevel.color.fill
-            pen.color = selLevel.color.line
-            pen.lineAnimateType = selLevel.animateType
-            pen.fontColor = selLevel.color.text
-          }
-          onChangeAnimateLine(pen, selLevel.animateType, isOldData)
-        }
-      } else {
-        if (pen.type === 0 && pen.animatePlay) { // 判断valueMapping 给相应的状态
-          onChangeAnimate(pen, pen.animateType)
-        } else if (pen.type === 1 && pen.animatePlay) { // 判断valueMapping 给相应的状态
-          onChangeAnimateLine(pen, pen.animateType, isOldData)
-        }
-      }
-    },
-    computeData (res, type, pen) { // 处理别名 以及 根据type显示对应的值
-      if (res.length > 0) {
-        res.forEach((response, innerPos) => {
-          if (response.status !== 'success') {
-            return
-          }
-
-          if (response.data.result) {
-            response.data.result.forEach((queryItem, resIndex) => {
-              // 图表中每条线的名字,后半部分
-              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 dpsArr = []
-              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) {
-                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 = pen.data.expressArr[innerPos]
-                }
-                // 处理legend别名
-                let alias = dealLegendAlias(host, pen.data.legends[innerPos])
-                if (!alias || alias === '') {
-                  alias = host
-                }
-                queryItem.legend = { name: host + '-' + pen.data.legends[innerPos] + '-' + resIndex, alias: alias }
-                queryItem.showValue = getMetricTypeValue(queryItem.values, type)
-                // 图表中每条线的名字,去掉最后的逗号与空格:metric名称,  标签1=a,标签2=c
-              }
-            })
-          }
-        })
-      }
-      return res
-    },
-    // 获取project Info
-    getProjectData (n) {
-      // 获取projectInfo
-      this.projectInfo.loading = true
-      this.$get('monitor/project/' + n.id).then(response => {
-        if (response.code === 200) {
-          this.projectInfo.loading = false
-          this.projectInfo = { ...this.projectInfo, ...response.data }
-          this.projectInfo.total = this.projectInfo.alertStat[0] + this.projectInfo.alertStat[1] + this.projectInfo.alertStat[2]
-          if (!this.projectInfo.total) {
-            this.projectInfo.total = 0
-          }
-        }
-      })
-    },
-    // Severity Label
-    returnSeverityLabel (key) {
-      return this.$t(this.$CONSTANTS.alertMessage.severityData.find(s => { return s.value == key }).label)
-    },
-    // 获取module
-    getModule () {
-      this.projectInfo.loading = true
-      this.$get('/monitor/module?pageSize=-1&projectIds=' + this.obj.id).then(response => {
-        if (response.code === 200) {
-          this.projectInfo.loading = false
-          this.allModules = JSON.parse(JSON.stringify(response.data.list))
-          this.modulesDiff()
-        }
-      })
-    },
-
-    getNodesArr () {
-      if (!getTopology(this.topologyIndex)) return
-      let arr = []
-      this.offsetX = getTopology(this.topologyIndex).data().x
-      this.offsetY = getTopology(this.topologyIndex).data().y
-      arr = getTopology(this.topologyIndex).data().pens.filter(item => {
-        if (!item.data) {
-          item.data = {
-            moduleId: '',
-            moduleName: '',
-            show: false,
-            error: false,
-            expressArr: [],
-            expressAllArr: [],
-            state: {}
-          }
-        }
-        return item.type === 0
-      })
-      // 打开动画 是否更新顶部图标
-      this.nodesArr = arr.map(item => {
-        return {
-          x: item.x,
-          y: item.y,
-          width: item.width,
-          data: item.data
-        }
-      })
-      this.nodesArr = JSON.parse(JSON.stringify(this.nodesArr))
-      arr = null
-    },
-
-    modelTopClick (item, index) {
-
-    },
-    // 摘除已选择的module
-    modulesDiff (data) {
-      this.modules = this.allModules
-      if (getTopology(this.topologyIndex) && getTopology(this.topologyIndex).data().pens) {
-        getTopology(this.topologyIndex).data().pens.forEach(item => {
-          if (item.type == 0) {
-            this.modules = this.modules.filter(item1 => item.data.moduleId !== item1.id)
-          }
-        })
-      }
-      if (data && data.data && data.data.moduleId) {
-        this.modules.unshift({ id: data.data.moduleId, name: data.data.moduleName })
-      }
-    },
-
-    // 显示module的工具
-    showNodeTools (index, pen) {
-      this.nodesArr.forEach((item, i) => {
-        item.data.show = i === index
-      })
-    },
-
-    // 具体内容点击
-    nodeTools (node, tool) {
-      this.moduleId = node.data.moduleId
-      this.moduleName = node.data.moduleName
-      if (tool.id === 'total') {
-        this.popDataShowUpdate('', false, node)
-        return
-      }
-      const timer = setTimeout(() => {
-        this.popDataShowUpdate(tool.id, false, node)
-        clearTimeout(timer)
-      }, 100)
-    },
-
-    popDataShowUpdate (key, flag, node) { // key 显示对应的弹窗 flag是否不显示工具栏
-      this.popDataShow = {
-        endpoint: false,
-        asset: false,
-        total: false,
-        other: false,
-        info: false,
-        alert: false,
-        main: false
-      }
-      if (key === 'total') {
-        this.chartDataInfo = { ...node.data, ...this.chartGetData.find(item => item.id === node.id) }
-      }
-      this.$nextTick(() => {
-        this.popDataShow[key] = true
-      })
-      if (flag) { // 处理关闭后 缩放后显示工具按钮的问题
-        this.moduleId = ''
-        this.showNodeTools('')
-      }
-      if (key === 'asset' || key === 'alert' || key === 'endpoint') {
-        this.showNodeTools('')
-      }
-    },
-
-    /* topology 方法 */
-    onDrag (event, node) {
-      this.dragFlag = false
-      const timer = setTimeout(() => {
-        this.dragFlag = true
-        clearTimeout(timer)
-      }, 100)
-      event.dataTransfer.setData('Text', JSON.stringify({ ...node.data, ...node.data.rect, data: { imageId: node.data.imageId } }))
-    },
-    dragFlagChange (node) {
-      getTopology(this.topologyIndex).addPen(
-        {
-          ...node.data,
-          ...node.data.rect,
-          x: this.$refs['topology-canvas' + this.topologyIndexF].offsetWidth / 2 - 50,
-          y: this.$refs['topology-canvas' + this.topologyIndexF].offsetHeight / 2 - 50,
-          data: { imageId: node.data.imageId }
-        })
-      const timer = setTimeout(() => {
-        this.dragFlag = true
-        clearTimeout(timer)
-      }, 100)
-    },
-
-    onMessage (event, data, e) {
-      // console.log('onMessage', event, data)
-      // console.log(getTopology(this.topologyIndex))
-      this.notModuleIDArr = []
-      // this.toolShow.attr = false
-      // this.toolShow.topTool = false
-      // this.$nextTick(() => {
-      //   this.toolShow.attr = true
-      //   this.toolShow.topTool = true
-      // })
-      if (data) {
-        this.notModuleIDArr.forEach(item => {
-          if (item.id === data.id) {
-            item.rect = data.rect
-          }
-        })
-      }
-      if (!Array.isArray(data) && data) { // 判断不是数组 提前个data配置好节点属性
-        if (data.type === 0 && !data.data.moduleId) {
-          if (!data.fillStyle) {
-            data.fillStyle = '#FFFFFF00'
-          }
-          data.data = {
-            moduleId: '',
-            moduleName: '',
-            show: false,
-            error: false,
-            animatePlay: false,
-            fillStyle: data.fillStyle || '#ffffff',
-            strokeStyle: data.strokeStyle || '#ffffff',
-            gradientColor: '#bae7ff',
-            gradientType: 0,
-            lineWidth: this.nodeDefaultWidth(data.name),
-            iconToolState: true,
-            // chart 配置项
-            valueMapping: [{
-              color: {
-                line: '#000000',
-                fill: '#ffffff',
-                text: '#000000'
-              },
-              value: 'base',
-              animateType: 'base',
-              level: 0,
-              base: true
-            }],
-            valueMappingSort: 'asc',
-            expressArr: [''],
-            expressAllArr: [''],
-            legends: [''],
-            legendsAll: [''],
-            tooltipShow: true,
-            valueMappingShow: true,
-            panelName: 'topologyName',
-            unit: 2,
-            type: 'line',
-            displayChart: true,
-            aggregation: 'last',
-            title: '',
-            url: '',
-            ...data.data
-          }
-        } else if (data.type == 1 && !data.data) {
-          // 连线是否自动计算锚点
-          // data.manualCps=true;
-          data.animateColor = '#FA901C'
-          data.toArrowColor = '#000000'
-          data.data = {
-            animatePlay: false,
-            strokeStyle: data.strokeStyle,
-            animateColor: data.animateColor,
-            arrowColor: '#000000',
-            fromArrowColor: '#000000',
-            toArrowColor: '#000000',
-            lineWidth: 1,
-            // chart 配置项
-            valueMapping: [{
-              color: {
-                line: '#000000',
-                fill: '#ffffff',
-                text: '#000000'
-              },
-              value: 'base',
-              animateType: 'base',
-              level: 0,
-              base: true
-            }],
-            valueMappingSort: 'asc', /* desc */
-            expressArr: [''],
-            expressAllArr: [''],
-            legends: [''],
-            legendsAll: [''],
-            tooltipShow: true,
-            valueMappingShow: true,
-            panelName: 'topologyName',
-            unit: 2,
-            type: 'line',
-            displayChart: true,
-            aggregation: 'last',
-            title: '',
-            moduleName: '',
-            url: ''
-          }
-        }
-        if (data.type === 0 || data.type === 1) {
-          data.lineWidth = data.data.lineWidth
-        }
-      }
-
-      switch (event) {
-        case 'moveInNode':
-        case 'moveInLine':
-          if (this.timer3) {
-            clearTimeout(this.timer3)
-            this.timer3 = null
-          }
-          this.chartData = { ...data.data, ...this.chartGetData.find(item => item.id === data.id) }
-          this.tooltipPosition.show = false
-          const timer = setTimeout(() => {
-            this.tooltipPosition.show = true
-            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
-                }
-              }
-              ePosition = null
-              boxWidth = null
-              boxHeight = null
-            })
-            clearTimeout(timer)
-          }, 100)
-          break
-        case 'moveOutNode':
-        case 'moveOutLine':
-          // this.tooltipPosition.show=false;
-          // return
-          if (!this.timer3) {
-            this.timer3 = setTimeout(() => {
-              this.tooltipPosition.show = false
-              this.timer3 = null
-            }, 50)
-          } else {
-            clearTimeout(this.timer3)
-            this.timer3 = setTimeout(() => {
-              this.tooltipPosition.show = false
-              this.timer3 = null
-            }, 50)
-          }
-          break
-      }
-      // 右侧输入框编辑状态时点击编辑区域其他元素，onMessage执行后才执行onUpdateProps方法，通过setTimeout让onUpdateProps先执行
-      const timer = setTimeout(() => {
-        switch (event) {
-          case 'node':
-          case 'addNode':
-            this.modulesDiff(data)
-            if (data.data.expressArr.length === 0 && event !== 'node') {
-              data.data.expressArr.push('')
-              data.data.legends.push('')
-            }
-            if (data.data.expressAllArr.length === 0 && event !== 'node') {
-              data.data.expressAllArr.push('')
-              data.data.legendsAll.push('')
-            }
-            this.props = {
-              node: data,
-              line: null,
-              multi: false,
-              expand: this.props.expand,
-              nodes: null,
-              locked: data.locked,
-              pen: data,
-              pens: null
-            }
-            this.$nextTick(() => {
-              if (this.$refs.CanvasProps) {
-                if (this.penId !== data.id) {
-                  this.$refs.CanvasProps.tab = '1'
-                }
-                this.penId = data.id
-              }
-            })
-            this.$refs.CanvasProps && (this.$refs.CanvasProps.loading = true)
-            break
-          case 'line':
-          case 'addLine':
-            this.props = {
-              node: null,
-              line: data,
-              multi: false,
-              nodes: null,
-              locked: data.locked,
-              pen: data,
-              pens: null
-            }
-            this.$nextTick(() => {
-              if (this.$refs.CanvasProps) {
-                if (this.penId !== data.id) {
-                  this.$refs.CanvasProps.tab = '1'
-                }
-                this.penId = data.id
-              }
-            })
-            this.$refs.CanvasProps && (this.$refs.CanvasProps.loading = true)
-            break
-          case 'multi':
-            this.props = {
-              node: null,
-              line: null,
-              multi: true,
-              nodes: data.length > 1 ? data : null,
-              locked: this.getLocked({ nodes: data }),
-              pen: null,
-              pens: data.length > 1 ? data : null
-            }
-            break
-          case 'space':
-            this.penId = undefined
-            this.props = {
-              node: null,
-              line: null,
-              multi: false,
-              nodes: null,
-              locked: false,
-              pen: null,
-              pens: null
-            }
-            break
-          case 'moveOut':
-            break
-          case 'moveNodes':
-          case 'resizeNodes':
-            if (data.length > 1) {
-              this.props = {
-                node: null,
-                line: null,
-                multi: true,
-                nodes: data,
-                locked: this.getLocked({ nodes: data }),
-                pen: null,
-                pens: null
-              }
-            } else {
-              this.props = {
-                node: data[0],
-                line: null,
-                multi: false,
-                nodes: null,
-                locked: false,
-                pen: data[0],
-                pens: null
-              }
-            }
-            break
-          case 'resize': {
-            let dom = document.getElementById('topology-canvas' + this.topologyIndexF)
-            let domRect = dom ? dom.getBoundingClientRect() : {}
-            if (getTopology(this.topologyIndex)) {
-              getTopology(this.topologyIndex).canvasPos = domRect
-            }
-            dom = null
-            domRect = null
-            break
-          }
-          case 'scale': {
-            let dom = document.getElementById('topology-canvas' + this.topologyIndexF)
-            let domRect = dom ? dom.getBoundingClientRect() : {}
-            if (getTopology(this.topologyIndex)) {
-              getTopology(this.topologyIndex).canvasPos = domRect
-            }
-            dom = null
-            domRect = null
-            break
-          }
-          case 'locked': {
-            this.props = {
-              node: null,
-              line: null,
-              multi: false,
-              nodes: null,
-              locked: false,
-              pen: null,
-              pens: null
-            }
-            break
-          }
-          case 'delete': {
-            this.props = {
-              node: null,
-              line: null,
-              multi: false,
-              nodes: null,
-              locked: false,
-              pen: null,
-              pens: null
-            }
-            break
-          }
-        }
-        switch (event) {
-          case 'node':
-          case 'line':
-          case 'space':
-          case 'scale':
-          case 'translate':
-            this.moduleId = ''
-            this.showNodeTools('')
-            this.popDataShowUpdate('', false)
-            if (!this.editTopologyFlag) {
-              getTopology(this.topologyIndex)
-            }
-            break
-        }
-        switch (event) {
-          case 'space':
-          case 'scale':
-          case 'translate':
-            this.getNodesArr()
-            // if(!this.timer2){
-            //   this.timer2=setTimeout(()=>{
-            //     this.getNodesArr();
-            //     this.timer2=null
-            //   },300)
-            // }else{
-            //   clearTimeout(this.timer2);
-            //   this.timer2=setTimeout(()=>{
-            //     this.getNodesArr();
-            //     this.timer2=null
-            //   },300)
-            // }
-            break
-        }
-        clearTimeout(timer)
-      }, 0)
-    },
-
-    getLocked (data) {
-      let locked = true
-      if (data.nodes && data.nodes.length) {
-        for (const item of data.nodes) {
-          if (!item.locked) {
-            locked = false
-            break
-          }
-        }
-      }
-      if (locked && data.lines) {
-        for (const item of data.lines) {
-          if (!item.locked) {
-            locked = false
-            break
-          }
-        }
-      }
-
-      return locked
-    },
-
-    onUpdateProps (node) { // 更新pen
-      const obj = this.$lodash.cloneDeep(node)
-      delete obj.x
-      delete obj.y
-      delete obj.center
-      delete obj.ex
-      delete obj.ey
-      delete obj.width
-      delete obj.height
-      getTopology(this.topologyIndex).setValue(obj)
-    },
-
-    handleAvatarSuccess () {
-
-    },
-    beforeAvatarUpload (file, fileList) {
-      const this_ = this
-      const isJPG = (file.raw.type === 'image/jpeg' || file.raw.type === 'image/png')
-      const isLt2M = (file.size / 1024 / 1024) < 2
-      if (!isJPG) {
-        this.$message.error(this_.$t('project.topology.imgFormat'))
-        fileList = fileList.splice(fileList.length - 1, 1)
-        return false
-      }
-      if (!isLt2M) {
-        this.$message.error(this_.$t('project.topology.imgSize'))
-        fileList = fileList.splice(fileList.length - 1, 1)
-        return false
-      }
-      new Promise(function (resolve, reject) {
-        const width = 0
-        const height = 0
-        const _URL = window.URL || window.webkitURL
-        const img = new Image()
-        img.onload = function () {
-          const valid = img.width > width && img.height > height
-          this_.imgWidth = img.width
-          this_.imgHeight = img.height
-          valid ? resolve() : reject()
-        }
-        img.src = _URL.createObjectURL(file.raw)
-      }).then(() => {
-        if (isJPG) {
-          this.file = file.raw
-        }
-        return file.raw
-      }, () => {
-        this.$message.error(this_.$t('project.topology.imgMeasure'))
-        return Promise.reject()
-      })
-      return false
-    },
-
-    toolShowChange (attr) {
-      this.toolShow[attr] = !this.toolShow[attr]
-    },
-    /* topology 方法 */
-    end (v) {
-
-    },
-    /* tools 方法 */
-
-    imgUpload () {
-      const this_ = this
-      if (!this.imageSave) {
-        this.imageSave = true
-      }
-      if (!this.uploadPic.unit) {
-        this.$message({
-          message: this_.$t('project.topology.unitError'),
-          type: 'error'
-        })
-        return
-      }
-      if (!this.file) {
-        this.$message({
-          message: this_.$t('project.topology.imgError'),
-          type: 'error'
-        })
-        return
-      }
-      this.upload()
-    },
-    upload () {
-      const form = new FormData()
-      form.append('file', this.file)
-      if (this.uploadPic.name) {
-        form.append('name', this.uploadPic.name)
-      } else {
-        form.append('name', this.file.name.substring(0, this.file.name.lastIndexOf('.')))
-      }
-      form.append('unit', this.uploadPic.unit)
-      form.append('width', this.imgWidth)
-      form.append('height', this.imgHeight)
-      this.$post('monitor/project/topo/icon', form, { 'Content-Type': 'multipart/form-data' }).then(res => {
-        this.imageSave = false
-        if (res.code == 200) {
-          this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })
-          this.uploadPicShow = false
-          this.$get('monitor/project/topo/icon', { id: res.data.id }).then(iconInfo => {
-            dealImg(`monitor/project/topo/icon/${res.data.id}/1`, res.data.id).then((data, header) => {
-              const group = this.tools.find(tool => tool.group === this.uploadPic.unit)
-              this.iconArray.push({
-                ...iconInfo.data.list[0],
-                image: data.data
-              })
-              if (group) {
-                group.children.push({
-                  ...imageTemp,
-                  data: {
-                    ...imageTemp.data,
-                    text: res.data.imageName,
-                    image: data.data,
-                    imageId: res.data.id,
-                    unit: this.uploadPic.unit,
-                    rect: {
-                      width: data.width,
-                      height: data.height
-                    }
-                  }
-                })
-              } else {
-                this.tools.push({
-                  group: this.uploadPic.unit,
-                  children: [{
-                    ...imageTemp,
-                    data: {
-                      ...imageTemp.data,
-                      text: res.data.imageName,
-                      image: data.data,
-                      imageId: res.data.id,
-                      unit: this.uploadPic.unit,
-                      rect: {
-                        width: data.width,
-                        height: data.height
-                      }
-                    }
-                  }]
-                })
-              }
-            })
-          })
-        } else {
-          this.$message.error(res.msg)
-        }
-      })
-    },
-
-    delImg (item) {
-      this.$delete('monitor/project/topo/icon?ids=' + item.data.imageId).then(res => {
-        if (res.code == 200) {
-          this.$message({ duration: 2000, type: 'success', message: this.$t('tip.deleteSuccess') })
-          this.addNodeInit()
-        } else {
-          this.$message.error(res.msg)
-        }
-      })
-    },
-    delCollpseTitle (item) {
-      this.$delete('monitor/project/topo/iconUnit?unit=' + item.group).then(res => {
-        if (res.code == 200) {
-          this.$message({ duration: 2000, type: 'success', message: this.$t('tip.deleteSuccess') })
-          this.addNodeInit()
-        } else {
-          this.$message.error(res.msg)
-        }
-      })
-    },
-    tooltipDelete (item) {
-      this.$confirm(this.$t('tip.confirmDelete'), {
-        confirmButtonText: this.$t('tip.yes'),
-        cancelButtonText: this.$t('tip.no'),
-        type: 'warning'
-      }).then(() => {
-        this.delImg(item)
-      })
-    },
-    tooltipDeleteTitle (item) {
-      this.$confirm(this.$t('tip.confirmDelete'), {
-        confirmButtonText: this.$t('tip.yes'),
-        cancelButtonText: this.$t('tip.no'),
-        type: 'warning'
-      }).then(() => {
-        this.delCollpseTitle(item)
-      })
-    },
-    addNodeInit (imgidList) {
-      if (!this.fromOverView) {
-        this.$get('monitor/project/topo/icon').then(res => {
-          this.imgageLoading = true
-          this.tools = [...Tools]
-          let imgArr = []
-          let promiseArr = []
-          res.data.list.forEach((item, index) => {
-            item.imageName = item.name
-            delete item.name
-            promiseArr.push(topologyImg['img' + item.id] || dealImg(`monitor/project/topo/icon/${item.id}/1`, item.id))
-            imgArr.push({ ...item })
-          })
-          Promise.all(promiseArr).then((res2, header) => {
-            this.iconArray = [...res.data.list]
-            this.iconArray.forEach((item, index) => {
-              item.image = res2[index].data
-              const group = this.tools.find(tool => tool.group === item.unit)
-              if (group) {
-                group.children.push({
-                  ...imageTemp,
-                  data: {
-                    ...imageTemp.data,
-                    text: item.imageName,
-                    image: res2[index].data,
-                    imageId: item.id,
-                    unit: item.unit,
-                    rect: {
-                      width: res2[index].width === -1 ? 100 : res2[index].width,
-                      height: res2[index].height === -1 ? 100 : res2[index].height
-                    }
-                  }
-                })
-              } else {
-                this.tools.push({
-                  group: item.unit,
-                  children: [{
-                    ...imageTemp,
-                    data: {
-                      ...imageTemp.data,
-                      text: item.imageName,
-                      image: res2[index].data,
-                      imageId: item.id,
-                      unit: item.unit,
-                      rect: {
-                        width: res2[index].width === -1 ? 100 : res2[index].width,
-                        height: res2[index].height === -1 ? 100 : res2[index].height
-                      }
-                    }
-                  }]
-                })
-              }
-            })
-
-            this.imgInit = true
-            this.imgageLoading = false
-            imgArr = null
-            promiseArr = null
-          })
-        })
-      } else {
-        this.imgageLoading = true
-        this.$get('monitor/project/topo/icon').then((imageAllId) => {
-          let promiseArr = []
-          if (!imageAllId || !imageAllId.data) {
-            return
-          }
-          imgidList.forEach((item, index) => {
-            if (item.data.imageId && imageAllId.data.list.find(image => item.data.imageId === image.id)) {
-              promiseArr.push(topologyImg['img' + item.data.imageId] || dealImg(`monitor/project/topo/icon/${item.data.imageId}/1`, item.data.imageId))
-            } else if (item.data.imageId) {
-              promiseArr.push(imgDefault)
-            } else {
-              promiseArr.push('')
-            }
-          })
-          Promise.all(promiseArr).then((res2) => {
-            this.iconArray = imgidList.map(item => {
-              return {
-                id: item.data.imageId
-              }
-            })
-            this.iconArray.forEach((item, index) => {
-              if (item.id) {
-                item.image = res2[index].data
-              }
-            })
-            this.imgInit = true
-            this.imgageLoading = false
-            imgidList = null
-            promiseArr = null
-          })
-        })
-      }
-    },
-
-    dealImg (url) {
-      // 处理后端传过来的图片流乱码问题
-      if (url) {
-        return new Promise((resolve, reject) => {
-          this.$axios
-            .get(url)
-            .then((res) => {
-              const imageInfo = {
-                data: ('data:image/jpeg;base64,' + res.data),
-                // width: res.headers.width === -1 ? 100 : (res.headers.width > 900 ? 900 : res.headers.width),
-                // height: res.headers.height === -1 ? 100 : (res.headers.height > 900 ? 900 : res.headers.height)
-                width: res.headers.width === -1 ? 100 : Number(res.headers.width),
-                height: res.headers.height === -1 ? 100 : Number(res.headers.height)
-              }
-              if (imageInfo.width > 900 || imageInfo.height > 900) {
-                if (imageInfo.height > imageInfo.width) {
-                  imageInfo.width = imageInfo.width * 900 / imageInfo.height
-                  imageInfo.height = 900
-                } else if (imageInfo.height < imageInfo.width) {
-                  imageInfo.height = imageInfo.height * 900 / imageInfo.width
-                  imageInfo.width = 900
-                } else {
-                  imageInfo.height = 900
-                  imageInfo.width = 900
-                }
-              }
-              return imageInfo
-            })
-            .then(data => {
-              resolve(data)
-              // changeImage(data,(img)=>{
-              //   resolve(img)
-              // })
-            })
-            .catch()
-        })
-      }
-    },
-
-    delPen (obj) { // 删除元素
-      getTopology(this.topologyIndex).delete(obj)
-      this.props = {
-        node: null,
-        line: null,
-        multi: false,
-        nodes: null,
-        locked: false,
-        pen: null,
-        pens: null
-      }
-    },
-
-    editTopology (isPreview) {
-      this.editTopologyFlag = true
-      this.showNoData = false
-      this.topoScreenState = JSON.parse(JSON.stringify(this.topoScreen))
-      this.$store.commit('setShowTopoScreen', true)
-      const timer = setTimeout(() => {
-        getTopology(this.topologyIndex).lock(0)
-        getTopology(this.topologyIndex).store.data.pens.forEach((item, index) => { // 停止动画 以及赋值默认data
-          if (item.animatePlay) {
-            getTopology(this.topologyIndex).stopAnimate(item.id)
-          }
-          if (!item.data.expressArr.length) {
-            item.data.expressArr = ['']
-            item.data.legends = ['']
-          }
-          if (!item.data.expressAllArr || !item.data.expressAllArr.length) {
-            item.data.expressAllArr = ['']
-            item.data.legendsAll = ['']
-          }
-          item.animateType = item.data.animateType
-          if (item.type === 0) {
-            item.background = item.data.background || item.data.fillStyle
-            item.color = item.data.color || item.data.strokeStyle
-            item.animatePlay = false
-            item.fontColor = item.data.fontColor || '#222222'
-            item.gradientType = item.data.gradientType ? item.data.gradientType : 0
-            if (!item.data.gradientColor) {
-              item.data.gradientType = 0
-              item.data.gradientColor = '#bae7ff'
-            }
-            if (item.data.gradientType === 0) {
-              item.bkType = 0
-            } else {
-              item.bkType = 1
-            }
-            item.data.animateNeedLine = false
-          } else if (item.type === 1) {
-            item.animateColor = item.data.animateColor
-            item.color = item.data.color || item.data.strokeStyle
-            item.arrowColor = item.data.arrowColor
-            item.fromArrowColor = item.data.arrowColor
-            item.toArrowColor = item.data.arrowColor
-            item.animatePlay = false
-            item.fontColor = item.data.fontColor || '#222222'
-          }
-          const scale = getTopology(this.topologyIndex).store.data.scale
-          item.x = item.x / scale
-          item.y = item.y / scale
-          item.width = item.width / scale
-          item.height = item.height / scale
-          getTopology(this.topologyIndex)._setValue(item)
-        })
-        getTopology(this.topologyIndex).render(true)
-        getTopology(this.topologyIndex).centerView()
-        clearTimeout(timer)
-      })
-    },
-
-    animateCanvas () {
-      getTopology(this.topologyIndex).render()
-      getTopology(this.topologyIndex).animate()
-    },
-
-    refreshTopology () {
-      // canvas.open()
-    },
-
-    dropdownClick () {
-
-    },
-
-    changeTopologyOpt (val, key) {
-      // this.topologyData.data[key]=this.colorRGBtoHex(val);
-      // getTopology(this.index).data[key]=val;
-      // getTopology(this.index).render();
-      getTopology(this.topologyIndex).store.data.lineName = val
-      getTopology(this.topologyIndex).setOptions({ drawingLineName: val })
-    },
-    notModuleIDArrChange (id) {
-      this.notModuleIDArr = this.notModuleIDArr.filter(item => item.id !== id)
-    },
-    // 保存
-    saveTopology () {
-      this.previewData = ''
-      this.isPreview = false
-      this.editTopologyFlag = true
-      this.showNoData = false
-      const topologyData = getTopology(this.topologyIndex).data()
-      topologyData.newData = 1
-      let flag = true
-      const arr = []
-      this.notModuleIDArr = []
-      topologyData.pens.forEach(item => {
-        if (item.type === 0 && ((!item.data) || (item.data && !item.data.moduleId))) {
-          arr.push(item)
-          this.props = {
-            node: null,
-            line: null,
-            multi: false,
-            nodes: null,
-            locked: false,
-            pen: null,
-            pens: null
-          }
-          flag = false
-        }
-      })
-      if (!flag) {
-        this.notModuleIDArr = arr
-      }
-      if (flag) {
-        this.editTopologyFlag = false
-        topologyData.rule = false
-        topologyData.grid = false
-        topologyData.gridSize = 10
-        topologyData.pens.forEach(item => {
-          item.animatePlay = item.data.animatePlay
-          item.data.animateType = item.animateType
-          if (item.type === 0 && JSON.stringify(item.data.imageId)) {
-            item.image = ''
-            item.animateFrames = []
-            item.animateReady = null
-            delete item.img
-            delete item.lastImage
-          }
-          item.data.expressArr = item.data.expressArr.filter((expression, i) => {
-            if (!expression) {
-              item.data.legends.splice(i, 1)
-              return false
-            } else {
-              return true
-            }
-          })
-          item.data.expressAllArr = item.data.expressAllArr.filter((expression, i) => {
-            if (!expression) {
-              item.data.legendsAll.splice(i, 1)
-              return false
-            } else {
-              return true
-            }
-          })
-        })
-        // if (this.penToolTipScale == getTopology(this.topologyIndex).data().scale) {
-        //   getTopology(this.topologyIndex).data().scale = this.oldScale
-        // }
-        this.$put('monitor/project/topo', { topo: JSON.stringify(topologyData), projectId: this.projectInfo.id }).then(res => {
-          this.prevent_opt.save = false
-          if (res.code === 200) {
-            this.$message({
-              message: this.$t('tip.saveSuccess'),
-              type: 'success'
-            })
-            this.$store.commit('setShowTopoScreen', this.topoScreenState)
-            this.$nextTick(() => {
-              getTopology(this.topologyIndex).lock(1)
-              getTopology(this.topologyIndex).resize()
-              this.reload()
-            })
-          }
-        }).catch(res => {
-          this.prevent_opt.save = false
-          this.$message({
-            message: res.msg,
-            type: 'error'
-          })
-        })
-      } else {
-        this.$message({
-          showClose: true,
-          message: this.$t('project.topology.selMod'),
-          type: 'warning'
-        })
-      }
-    },
-    // 取消
-    cancelTopology () {
-      this.isPreview = false
-      this.previewData = ''
-      this.editTopologyFlag = false
-      this.$nextTick(() => {
-        getTopology(this.topologyIndex).lock(1)
-        getTopology(this.topologyIndex).resize()
-        getTopology(this.topologyIndex).centerView()
-        this.$store.commit('setShowTopoScreen', this.topoScreenState)
-      })
-      this.reload()
-    },
-    // 预览
-    previewTopology () {
-      const topologyData = getTopology(this.topologyIndex).data()
-      this.previewData = topologyData
-      this.isPreview = true
-      this.editTopologyFlag = false
-      topologyData.rule = false
-      topologyData.grid = false
-      topologyData.gridSize = 10
-      topologyData.pens.forEach(item => {
-        item.animatePlay = item.data.animatePlay
-        item.data.animateType = item.animateType
-        if (item.type === 0 && JSON.stringify(item.data.imageId)) {
-          item.animateFrames = []
-          item.animateReady = null
-          delete item.img
-          delete item.lastImage
-        }
-        item.data.expressArr = item.data.expressArr.filter((expression, i) => {
-          if (!expression) {
-            item.data.legends.splice(i, 1)
-            return false
-          } else {
-            return true
-          }
-        })
-        item.data.expressAllArr = item.data.expressAllArr.filter((expression, i) => {
-          if (!expression) {
-            item.data.legendsAll.splice(i, 1)
-            return false
-          } else {
-            return true
-          }
-        })
-      })
-      // if (this.penToolTipScale == getTopology(this.topologyIndex).data().scale) {
-      //   getTopology(this.topologyIndex).data().scale = this.oldScale
-      // }
-      this.$nextTick(() => {
-        this.previewData = topologyData
-        getTopology(this.topologyIndex).lock(1)
-        getTopology(this.topologyIndex).resize()
-        getTopology(this.topologyIndex).centerView()
-        this.initPens(topologyData)
-        // this.reload()
-      })
-    },
-    previewExit () { // 继续编辑
-      this.isPreview = false
-      this.editTopology(true)
-    },
-
-    // 联动 project
-    changeProjectTitle () {
-      const data = getTopology(this.topologyIndex).data()
-      // this.topologyInfo = {
-      //   fontSize: data.data.fontSize,
-      //   align: data.data.align,
-      //   fontColor: data.data.fontColor,
-      //   opacity: data.data.opacity,
-      //   name: data.name
-      // }
-    },
-    /* tools 方法 */
-
-    winResize () {
-      const timer = setTimeout(() => {
-        let domRect = document.getElementById('topology-canvas' + this.topologyIndex).getBoundingClientRect()
-        getTopology(this.topologyIndex).canvasPos = domRect
-        if (this.fromOverView) {
-          try {
-            const obj = JSON.parse(this.oldTopologyData)
-            if (obj && !obj.pens) {
-              obj.pens = []
-            }
-            getTopology(this.topologyIndex).open(obj)
-          } catch (e) {
-            console.log(e)
-          }
-        }
-        let flag = false
-
-        const 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.ex > position.x || item.ey > position.y) {
-            // getTopology(this.topologyIndex).fitView(20)
-            flag = true
-          }
-        })
-        getTopology(this.topologyIndex).resize()
-        getTopology(this.topologyIndex).centerView()
-        this.getNodesArr()
-        domRect = null
-        clearTimeout(timer)
-      }, 500)
-    },
-    contextmenuNone () {
-      this.contextmenu = {
-        left: null,
-        top: null,
-        bottom: null
-      }
-    },
-    canvasMove (e) { // 画布上的移动 确定tooltip的位置
-      if (this.tooltipPosition.show) {
-        return
-      }
-      window.ePosition = e
-    },
-    tooltipOver () {
-      clearTimeout(this.timer3)
-      this.timer3 = null
-    },
-    tooltipOut () {
-      this.timer3 = setTimeout(() => {
-        this.tooltipPosition.show = false
-        this.timer3 = null
-      }, 50)
-    },
-    nodeDefaultWidth (nodeName) {
-      switch (nodeName) {
-        case 'myCube':
-        case 'rectangleImg':
-          return 0
-        default:
-          return 1
-      }
-    },
-    previewBeforeClose (done) {
-      this.$emit('changeTopologyIndexF')
-      done()
-    },
-    selpopIs (pen, state) { // 判断是否有图表
-      let flag = true
-      if (state.id === 'other') {
-        flag = false
-      }
-      if (state.id === 'total' && pen.data.expressArr.length === 0) {
-        flag = false
-      }
-      return flag
-    },
-    redoIndexChange (index) {
-      this.redoIndex = index
-    },
-    querySearch (queryString, cb) {
-      const restaurants = this.unitArr
-      const results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants
-      // 调用 callback 返回建议列表的数据
-      cb(results)
-    },
-    createFilter (queryString) {
-      return (restaurant) => {
-        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
-      }
-    },
-    uploadPicChange () {
-      this.unitArr = []
-      this.tools.forEach((item, index) => {
-        if (index > 0) {
-          this.unitArr.push({
-            value: item.group
-          })
-        }
-      })
-      this.uploadPic.name = ''
-      this.uploadPic.unit = ''
-      this.file = null
-      this.uploadPicShow = true
-    },
-    zoomMap (num) {
-      getTopology(this.topologyIndex).scale(getTopology(this.topologyIndex).data().scale + num)
-    },
-    penToBottom () {
-      getTopology(this.topologyIndex).bottom()
-    },
-    changeScreen () {
-      this.$store.commit('setShowTopoScreen', !this.topoScreen)
-    },
-    onContextMenu (event) {
-      event.preventDefault()
-      event.stopPropagation()
-
-      if (event.clientY + 360 < document.body.clientHeight) {
-        this.contextmenu = {
-          left: event.clientX + 'px',
-          top: event.clientY + 'px'
-        }
-      } else {
-        this.contextmenu = {
-          left: event.clientX + 'px',
-          bottom: document.body.clientHeight - event.clientY + 'px'
-        }
-      }
-    }
-  },
-  beforeDestroy () {
-    if (this.timer) {
-      clearInterval(this.timer)
-      this.timer = null
-    }
-    if (this.timer4) {
-      clearInterval(this.timer4)
-      this.timer4 = null
-    }
-    if (getTopology(this.topologyIndex)) {
-      getTopology(this.topologyIndex).off('translate', this.topTranslate) // 平移·
-      getTopology(this.topologyIndex).off('active', this.pensActive) // 选中·
-      getTopology(this.topologyIndex).off('scale', this.topoScale) // 缩放·
-      getTopology(this.topologyIndex).off('translatePens', () => {}) // 移动画笔结束·
-      getTopology(this.topologyIndex).off('translatingPens', () => {}) // 移动画笔进行中·
-      getTopology(this.topologyIndex).off('enter', this.penEnter) // 移入画笔·
-      getTopology(this.topologyIndex).off('leave', this.penLeave) // 移出画笔·
-      getTopology(this.topologyIndex).off('add', this.appPen) // 添加新画笔·
-      getTopology(this.topologyIndex).off('click', this.topoClick) // click画笔·
-      getTopology(this.topologyIndex).destroy()
-      const StoreData = le5leStore.get()
-      const arr = []
-      Object.keys(StoreData).forEach(key => {
-        const id = key.split('-')[0]
-        arr.push(id)
-        if (getTopology(this.topologyIndex).id == id) {
-          le5leStore.set(key, null)
-          delete StoreData[key]
-        }
-      })
-      Object.keys(getTopology(this.topologyIndex)).forEach(key => {
-        getTopology(this.topologyIndex)[key] = null
-      })
-      setTopology(this.topologyIndex, null)
-    }
-    if (document.getElementById('topology-canvas' + this.topologyIndexF)) {
-      document.getElementById('topology-canvas' + this.topologyIndexF).removeEventListener('mousemove', this.canvasMove)
-    }
-    window.removeEventListener('resize', this.winResize)
-    window.removeEventListener('click', this.contextmenuNone)
-  },
-  destroyed () {
-  }
-}
-</script>
diff --git a/nezha-fronted/src/components/common/table/settings/softwareAssetTable.vue b/nezha-fronted/src/components/common/table/settings/softwareAssetTable.vue
index 613f27a71..58e3c0c47 100644
--- a/nezha-fronted/src/components/common/table/settings/softwareAssetTable.vue
+++ b/nezha-fronted/src/components/common/table/settings/softwareAssetTable.vue
@@ -56,6 +56,11 @@
               <i v-if="scope.row.asset&&scope.row.asset.name" class="nz-icon nz-icon-override" style="visibility: hidden" @click="onCopy(scope.row.asset.name)" :title="$t('overall.copyText')"></i>
             </div>
           </template>
+          <template v-else-if="item.prop === 'category'">
+            <div>
+              {{scope.row.type ? scope.row.type.category : '-'}}
+            </div>
+          </template>
           <template v-else-if="item.prop === 'project'">
             <div class="document-copy-block">
               <span class="document-copy-text"
diff --git a/nezha-fronted/src/components/common/timePicker.vue b/nezha-fronted/src/components/common/timePicker.vue
index 9c099b0b2..e6bc9a05a 100644
--- a/nezha-fronted/src/components/common/timePicker.vue
+++ b/nezha-fronted/src/components/common/timePicker.vue
@@ -204,6 +204,12 @@ export default {
         { id: 10, text: this.$t('dashboard.dashboard.lastSevenDay'), type: 'date', value: 7 },
         { id: 11, text: this.$t('dashboard.dashboard.lastThirtyDay'), type: 'date', value: 30 }
       ],
+      relativeData: [
+        { id: 13, text: 'today', type: 'relative', value: 0 },
+        { id: 14, text: 'Yesterday ', type: 'relative', value: 1 },
+        { id: 15, text: 'The day before yesterday', type: 'relative', value: 2 },
+        { id: 16, text: 'This day last week', type: 'relative', value: 7 }
+      ],
       timeShowData: [],
       nowTimeType: {
         id: 4,
@@ -232,6 +238,7 @@ export default {
   mounted () {
     this.timePickerLocked = localStorage.getItem('nz-time-picker-locked') ? JSON.parse(localStorage.getItem('nz-time-picker-locked')) : false
     this.timeShowData = JSON.parse(JSON.stringify(this.timeData))
+    this.timeShowData.push(...this.relativeData)
     this.timeShowData.shift()
     this.getItem()
     this.getUtcStr()
@@ -322,6 +329,7 @@ export default {
       this.showTime = this.nowTimeType = {
         id: 0,
         text: this.searchTime[0] + ' ' + this.$t('dashboard.dashboard.to') + ' ' + this.searchTime[1],
+        type: 'custom',
         value: -1
       }
       this.isCustom = true
@@ -527,7 +535,22 @@ export default {
       // }
     },
     setSearchTime (type, val, time) {
-      if (type === 'minute') {
+      if (type === 'relative') {
+        const now = new Date(bus.computeTimezone(new Date().getTime()))
+        let start = bus.timeFormate(now, 'YYYY-MM-DD')
+        let end = bus.timeFormate(now, 'YYYY-MM-DD HH:mm:ss')
+        console.log(start, end, val)
+        if (this.nowTimeType.id === 13) { // today
+          start += '00:00:00'
+          end += ''
+          start = this.momentTz(this.momentStrToTimestamp(start, 'YYYY-MM-DD HH:mm:ss'))
+          end = this.momentTz(this.momentStrToTimestamp(end, 'YYYY-MM-DD HH:mm:ss'))
+        }
+        console.log(start, end)
+        this.$set(this.searchTime, 0, start)
+        this.$set(this.searchTime, 1, end)
+        this.$set(this.searchTime, 2, this.nowTimeType.id)
+      } else if (type === 'minute') {
         const startTime = bus.timeFormate(
           new Date(bus.computeTimezone(new Date().getTime())).setMinutes(
             new Date(bus.computeTimezone(new Date().getTime())).getMinutes() -
diff --git a/nezha-fronted/src/components/page/dashboard/dashboard.vue b/nezha-fronted/src/components/page/dashboard/dashboard.vue
index 2dc5c7561..209e61a4d 100644
--- a/nezha-fronted/src/components/page/dashboard/dashboard.vue
+++ b/nezha-fronted/src/components/page/dashboard/dashboard.vue
@@ -852,7 +852,7 @@ export default {
       clearTopology()
       const nowTimeType = this.$refs.pickTime.$refs.timePicker.nowTimeType
       this.nowTimeType = this.$refs.pickTime.$refs.timePicker.nowTimeType
-      this.setSearchTime(nowTimeType.type, nowTimeType.value, nowTimeType)
+      this.setSearchTime('searchTime')
       this.getData(this.filter)
       this.$store.dispatch('dispatchPanelTime', {
         time: this.searchTime,
@@ -871,27 +871,7 @@ export default {
         this.updatePath(param, path)
       }
     },
-    setSearchTime (type, val, nowTimeType) { // 设置searchTime
-      if (type === 'minute') {
-        const startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setMinutes(new Date(bus.computeTimezone(new Date().getTime())).getMinutes() - val), this.panelDateFormatTime)
-        const endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())), this.panelDateFormatTime)
-        this.$set(this.searchTime, 0, startTime)
-        this.$set(this.searchTime, 1, endTime)
-        this.$set(this.searchTime, 2, val + 'm')
-      } else if (type === 'hour') {
-        const startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setHours(new Date(bus.computeTimezone(new Date().getTime())).getHours() - val), this.panelDateFormatTime)
-        const endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())), this.panelDateFormatTime)
-        this.$set(this.searchTime, 0, startTime)
-        this.$set(this.searchTime, 1, endTime)
-        this.$set(this.searchTime, 2, val + 'h')
-      } else if (type === 'date') {
-        const startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setDate(new Date(bus.computeTimezone(new Date().getTime())).getDate() - val), this.panelDateFormatTime)
-        const endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())), this.panelDateFormatTime)
-        this.$set(this.searchTime, 0, startTime)
-        this.$set(this.searchTime, 1, endTime)
-        this.$set(this.searchTime, 2, val + 'd')
-      }
-      this.$refs.pickTime && (this.$refs.pickTime.$refs.timePicker.searchTime = this.searchTime)
+    storeDispatchPanelTime () { // 设置searchTime
       this.$store.dispatch('dispatchPanelTime', {
         time: this.searchTime,
         nowTimeType: this.nowTimeType
@@ -1199,7 +1179,7 @@ export default {
         this.nowTimeType = this.$lodash.cloneDeep(nowTimeType)
         // 刷新时间范围
         this.$refs.pickTime.$refs.timePicker.setTimeRange(this.nowTimeType)
-        this.setSearchTime(nowTimeType.type, nowTimeType.value, nowTimeType)
+        this.setSearchTime('searchTime')
         this.$store.dispatch('dispatchPanelTime', {
           time: this.searchTime,
           nowTimeType: this.nowTimeType
@@ -1219,7 +1199,7 @@ export default {
         const nowTimeType = this.nowTimeType = this.timePickerRange.nowTimeType
         this.searchTime = this.timePickerRange.time
         this.$refs.pickTime && this.$refs.pickTime.$refs.timePicker.setTimeRange(this.nowTimeType, this.searchTime)
-        this.setSearchTime(nowTimeType.type, nowTimeType.value, nowTimeType)
+        this.setSearchTime('searchTime')
       })
     },
     // 设置默认刷新
@@ -1257,7 +1237,7 @@ export default {
     this.$store.commit('setMode', this.mode)
     await this.getTableData()
     if (this.nowTimeType.type) {
-      this.setSearchTime(this.nowTimeType.type, this.nowTimeType.value, this.nowTimeType)
+      this.setSearchTime('searchTime')
     }
     if (this.nowTimeType) {
       this.nowTimeType.start_time = this.searchTime[0]
diff --git a/nezha-fronted/src/components/page/dashboard/explore/exploreItem.vue b/nezha-fronted/src/components/page/dashboard/explore/exploreItem.vue
index 7140e3233..9dbab85c2 100644
--- a/nezha-fronted/src/components/page/dashboard/explore/exploreItem.vue
+++ b/nezha-fronted/src/components/page/dashboard/explore/exploreItem.vue
@@ -3682,7 +3682,7 @@ export default {
         const nowTimeType = this.nowTimeType = this.timePickerRange.nowTimeType
         this.filterTime = this.timePickerRange.time
         this.$refs.pickTime && this.$refs.pickTime.$refs.timePicker.setTimeRange(this.nowTimeType, this.filterTime)
-        this.setSearchTime(nowTimeType.type, nowTimeType.value, nowTimeType)
+        this.setSearchTime('filterTime')
       })
     },
     selectMetricsLogs (val, icon, label) {
@@ -4116,7 +4116,7 @@ export default {
       if (this.$refs.pickTime) {
         const nowTimeType = this.$refs.pickTime.$refs.timePicker.nowTimeType
         this.nowTimeType = this.$refs.pickTime.$refs.timePicker.nowTimeType
-        this.setSearchTime(nowTimeType.type, nowTimeType.value)
+        this.setSearchTime('filterTime')
       }
       if (this.expressions && this.expressions.length >= 1) {
         let error = false
@@ -4155,7 +4155,7 @@ export default {
         const nowTimeType = data.nowTimeType
         this.filterTime = data.searchTime
         if (nowTimeType && nowTimeType.type) {
-          this.setSearchTime(nowTimeType.type, nowTimeType.value, nowTimeType)
+          this.setSearchTime('filterTime')
         }
         if (nowTimeType) {
           nowTimeType.start_time = this.filterTime[0]
@@ -4214,28 +4214,6 @@ export default {
       }
       this.$router.replace({ query: param })
     },
-    setSearchTime (type, val) { // 设置searchTime
-      if (type === 'minute') {
-        const startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setMinutes(new Date(bus.computeTimezone(new Date().getTime())).getMinutes() - val))
-        const endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())))
-        this.$set(this.filterTime, 0, startTime)
-        this.$set(this.filterTime, 1, endTime)
-        this.$set(this.filterTime, 2, val + 'm')
-      } else if (type === 'hour') {
-        const startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setHours(new Date(bus.computeTimezone(new Date().getTime())).getHours() - val))
-        const endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())))
-        this.$set(this.filterTime, 0, startTime)
-        this.$set(this.filterTime, 1, endTime)
-        this.$set(this.filterTime, 2, val + 'h')
-      } else if (type === 'date') {
-        const startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setDate(new Date(bus.computeTimezone(new Date().getTime())).getDate() - val))
-        const endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())))
-        this.$set(this.filterTime, 0, startTime)
-        this.$set(this.filterTime, 1, endTime)
-        this.$set(this.filterTime, 2, val + 'd')
-      }
-      this.$refs.pickTime.$refs.timePicker.searchTime = this.filterTime
-    },
     storeHistory () {
       const expire = 24
       const historyJson = localStorage.getItem(this.historyParam.key)
diff --git a/nezha-fronted/src/components/page/monitor/project/project.vue b/nezha-fronted/src/components/page/monitor/project/project.vue
index be89a8a6a..7d4871409 100644
--- a/nezha-fronted/src/components/page/monitor/project/project.vue
+++ b/nezha-fronted/src/components/page/monitor/project/project.vue
@@ -67,7 +67,6 @@
 
 <script>
 import bus from '@/libs/bus'
-import topologyL5 from '@/components/common/project/topologyL5'
 import meta2dMain from '@/components/common/project/meta2d/meta2dMain'
 import beforeMeta2d from '@/components/common/mixin/beforeMeta2d'
 import { clearTopology } from '@/components/common/js/common'
@@ -76,7 +75,6 @@ export default {
   name: 'project2',
   mixins: [beforeMeta2d],
   components: {
-    topologyL5,
     meta2dMain
   },
   data () {