diff --git a/nezha-fronted/src/components/common/project/L5/topoTooltip.vue b/nezha-fronted/src/components/common/project/L5/topoTooltip.vue
index eb8c6f0d8..4f2591a3a 100644
--- a/nezha-fronted/src/components/common/project/L5/topoTooltip.vue
+++ b/nezha-fronted/src/components/common/project/L5/topoTooltip.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="tooltip-box" style="display: flex;" v-if="chartData.tooltipShow">
+  <div class="tooltip-box" style="display: flex;" v-if="isChart||chartData.tooltipShow">
     <span class="temp-dom"></span>
-    <div class="tooltip-box-chart" style="" v-if="chartData.displayChart&&chartData.tooltipShow">
-      <line-chart-block v-if="chartData.type !== 'table'"
+    <div class="tooltip-box-chart" style="" v-if="isChart||(chartData.displayChart&&chartData.tooltipShow)">
+      <line-chart-block v-if="isChart || chartData.type !== 'table'"
                         :key="'inner' + chartData.id"
                         :from="'project'"
                         :ref="'editChart' + 0"
@@ -24,7 +24,7 @@
                   <!--:panel-id="-1"-->
                   <!--:chart-data="chartData"-->
                   <!--:chart-index="0"></chart-table>-->
-    <div class="tooltip-box-info">
+    <div class="tooltip-box-info" v-if="!isChart">
       <expression-info :chart-data="chartData" :filterTime="filterTime"/>
     </div>
   </div>
@@ -47,6 +47,10 @@
         type:Object,
       },
       filterTime:{},
+      isChart:{
+        type:Boolean,
+        default:false,
+      }
     },
     watch:{
       chartDataParent:{
diff --git a/nezha-fronted/src/components/common/project/addLine.vue b/nezha-fronted/src/components/common/project/addLine.vue
deleted file mode 100644
index 00c3a5110..000000000
--- a/nezha-fronted/src/components/common/project/addLine.vue
+++ /dev/null
@@ -1,819 +0,0 @@
-<template>
-  <div class="mc" @click.self="clickOutside">
-    <div class="right-box right-box-edit-endpoint">
-      <!-- begin--顶部按钮-->
-      <div class="right-box-top-btns right-box-form-delete" v-if="lineData.id">
-        <button id="edit-ep-del" type="button" @click="del" class="nz-btn nz-btn-size-normal nz-btn-size-alien">
-        <span class="right-box-top-btn-icon"><i class="nz-icon nz-icon-delete"></i></span>
-        <span class="right-box-top-btn-txt">{{$t('overall.delete')}}</span>
-        </button>
-      </div>
-      <!-- end--顶部按钮-->
-
-      <!-- begin--标题-->
-      <div class="right-box-title" v-if="!lineData.id">
-        {{$t('project.topology.addLine')}}
-      </div>
-      <div class="right-box-title" v-if="lineData.id">
-        {{$t("project.topology.editLine")}}
-      </div>
-      <!-- end--标题-->
-
-      <!-- begin--表单-->
-      <div class="right-box-form-box">
-        <el-form class="right-box-form  right-box-form-left" ref="form" :model="form" label-width="120px" :rules="rules">
-          <el-form-item :label="$t('project.topology.lineName')" prop="lineName" class="line-name">
-            <el-input v-model="form.lineName"  size="small"></el-input>
-          </el-form-item>
-          <div class="right-box-sub-title" style="margin-bottom: 20px">{{$t('project.topology.option')}}</div>
-          <div class="line-option">
-            <!--<el-form-item :label="$t('project.topology.width')" prop="width" class="line-width">-->
-              <!--<el-input v-model="form.width"  size="small"></el-input>-->
-            <!--</el-form-item>-->
-            <el-form-item :label="$t('project.topology.width')" prop="width" class="line-width">
-              <el-select v-model="form.width" placeholder="" :popper-append-to-body="false"  size="small">
-                <div slot="prefix">
-                  <div class="width-option">
-                    <div :style="{height:0,width:'80%',borderTop:form.width+'px'+' solid' +' #899FB7'}"></div>
-                  </div>
-                </div>
-                <el-option v-for="(item,index) in widthOption" :label="item+'px'" :value="item" :key="index">
-                  <div class="width-option">
-                    <span style="marginRight:5px">{{item}}px</span><div class="width-option-line" :style="{height:0,width:'80%',borderTop:item+'px solid #899FB7'}"></div>
-                  </div>
-                </el-option>
-              </el-select>
-            </el-form-item>
-            <el-form-item :label="$t('project.topology.dashes')" prop="dashes" class="line-width">
-              <el-select v-model="form.dashes" placeholder="" :popper-append-to-body="false"  size="small">
-                <div slot="prefix">
-                  <div class="width-option">
-                    <div class="width-option-line" v-if="!form.dashes" :style="{height:0,width:'80%',borderTop:'1px solid #899FB7'}"></div>
-                    <div class="dashes-box" v-if="form.dashes">
-                      <div class="width-option-line"
-                           v-for="count in dashesCount(form.dashes)"
-                           :key="count"
-                           :style="{
-                           height:0,
-                           width:dashesWidth(form.dashes)+'px',
-                           borderTop:'1px solid #899FB7',
-                           display:'inline-block'
-                         }">
-
-                      </div>
-                    </div>
-                  </div>
-                </div>
-                <el-option v-for="(item,index) in dashesOption" :label="item+'px'" :value="item" :key="index">
-                  <div class="width-option">
-                    <div class="width-option-line" v-if="!item" :style="{height:0,width:'80%',borderTop:'1px solid #899FB7'}"></div>
-                    <div class="dashes-box" v-if="item">
-                      <div class="width-option-line"
-                           v-for="count in dashesCount(item)"
-                           :key="count"
-                           :style="{
-                           height:0,
-                           width:dashesWidth(item)+'px',
-                           borderTop:'1px solid #899FB7',
-                           display:'inline-block'
-                         }">
-
-                      </div>
-                    </div>
-                  </div>
-                </el-option>
-              </el-select>
-            </el-form-item>
-            <el-form-item :label="$t('project.topology.arrows')" prop="arrows" class="arrows">
-              <el-select v-model="form.arrows" placeholder="" :popper-append-to-body="false"  size="small">
-                <div slot="prefix">
-                  <div class="width-option">
-                    <div v-if='form.arrows==="from"' class="width-option-line" :style="{height:0,width:'80%',borderTop:'1px solid #899FB7'}">
-                      <i class="nz-icon nz-icon-sanjiaoxing position-right" style="top: -15px;"></i>
-                    </div>
-                    <div  v-if='form.arrows==="to"' class="width-option-line" :style="{height:0,width:'80%',borderTop:'1px solid #899FB7'}">
-                      <i class="nz-icon nz-icon-sanjiaoxing position-left" style="top: -15px;"></i>
-                    </div>
-                    <div v-if='form.arrows==="from;to"' class="width-option-line" :style="{height:0,width:'80%',borderTop:'1px solid #899FB7'}">
-                      <i class="nz-icon nz-icon-sanjiaoxing position-left" style="top: -15px;"></i>
-                      <i class="nz-icon nz-icon-sanjiaoxing position-right" style="top: -15px;"></i>
-                    </div>
-                    <div v-if='form.arrows==="0"' class="width-option-line" :style="{height:0,width:'80%',borderTop:'1px solid #899FB7'}"></div>
-                  </div>
-                </div>
-                <el-option label="from" value="from">
-                  <div class="width-option">
-                    <div class="width-option-line" :style="{height:0,width:'80%',borderTop:'1px solid #899FB7'}">
-                      <i class="nz-icon nz-icon-sanjiaoxing position-right"></i>
-                    </div>
-                  </div>
-                </el-option>
-                <el-option label="to" value="to">
-                  <div class="width-option">
-                    <div class="width-option-line" :style="{height:0,width:'80%',borderTop:'1px solid #899FB7'}">
-                      <i class="nz-icon nz-icon-sanjiaoxing position-left"></i>
-                    </div>
-                  </div>
-                </el-option>
-                <el-option label="from;to" value="from;to">
-                  <div class="width-option">
-                    <div class="width-option-line" :style="{height:0,width:'80%',borderTop:'1px solid #899FB7'}">
-                      <i class="nz-icon nz-icon-sanjiaoxing position-left"></i>
-                      <i class="nz-icon nz-icon-sanjiaoxing position-right"></i>
-                    </div>
-                  </div>
-                </el-option>
-                <el-option label="" value="0">
-                  <div class="width-option">
-                    <div class="width-option-line" :style="{height:0,width:'80%',borderTop:'1px solid #899FB7'}"></div>
-                  </div>
-                </el-option>
-              </el-select>
-            </el-form-item>
-            <el-form-item :label="$t('project.topology.color')" class="color">
-              <div class="color-show" @click="colorPickerClick" v-clickoutside="colorOut">
-                <div class="color-show-left" :style="{background:form.color}"></div>
-                <span> {{form.color}}</span>
-                <span class="color-arrows">
-                  <i class="nz-icon nz-icon-arrow-down" v-show="!showPicker"></i>
-                  <i class="nz-icon nz-icon-arrow-up" v-show="showPicker"></i>
-                </span>
-              </div>
-              <div class="color-content" ref="color-content">
-                <el-color-picker
-                  v-model="form.color"
-                  :predefine="predefineColors"
-                  ref="colorPicker"
-                  @active-change="colorChange"
-                >
-                </el-color-picker>
-              </div>
-            </el-form-item>
-            <el-form-item :label="$t('project.topology.lineType')" prop="type" class="type">
-              <el-select v-model="form.type" placeholder="" :popper-append-to-body="false"  size="small">
-                <el-option :label="$t('project.topology.straight')" :value="false">
-                  {{$t('project.topology.straight')}}
-                </el-option>
-                <!--<el-option label="continuous" value="continuous">-->
-                  <!--continuous-->
-                <!--</el-option>-->
-                <!--<el-option label="discrete" value="discrete">-->
-                  <!--discrete-->
-                <!--</el-option>-->
-                <!--<el-option label="diagonalCross" value="diagonalCross">-->
-                  <!--diagonalCross-->
-                <!--</el-option>-->
-                <!--<el-option label="straightCross" value="straightCross">-->
-                  <!--straightCross-->
-                <!--</el-option>-->
-                <!--<el-option label="horizontal" value="horizontal">-->
-                  <!--horizontal-->
-                <!--</el-option>-->
-                <!--<el-option label="vertical" value="vertical">-->
-                  <!--vertical-->
-                <!--</el-option>-->
-                <el-option :label="$t('project.topology.curve')" value="curvedCW">
-                  {{$t('project.topology.curve')}}
-                </el-option>
-              </el-select>
-            </el-form-item>
-          </div>
-          <div  class="right-box-sub-title" style="margin-bottom: 20px">
-            <span>{{$t('alert.config.expr')}}</span>
-            <span class="float-right" @click="addExpression"><i style="font-size: 16px; cursor: pointer;" class="nz-icon nz-icon-create-square"></i></span>
-          </div>
-          <el-row class="element-item expr form-row-item" style="" v-for="index of promqlKeys.length" :key="'ele' + index">
-            <span class="nz-icon-minus-medium nz-icon-minus-position" style="padding: 0 8px"><i class="nz-icon nz-icon-minus" @click="removeExpression(index-1)"></i></span>
-            <el-form-item  :rules="{required: true,message: '名称不能为空', trigger: 'blur'}" :prop="'name.' + (index-1)">
-              <el-row>
-                <template>
-                  <el-col class="expr-title" style="">
-                    {{$t('project.topology.chartName')}}
-                  </el-col>
-                  <el-col style="width: calc(100% - 122px);">
-                    <el-input
-                      v-model="form.name[index-1]"
-                      type="text"
-                      size="small"
-                    ></el-input>
-                  </el-col>
-                </template>
-              </el-row>
-            </el-form-item>
-            <el-row>
-              <el-col class="expr-title">
-                {{$t('project.topology.unit')}}
-              </el-col>
-              <el-col style="width: calc(100% - 120px);">
-                <el-cascader filterable placeholder="" popper-class="no-style-class unit-popper-class" size="small" style="width: 100%"
-                             :options="unitOptions"
-                             :props="{ expandTrigger: 'click',emitPath:false }"
-                             :show-all-levels="false"
-                             v-model="unit[index-1]"
-                ></el-cascader>
-              </el-col>
-            </el-row>
-            <div>
-              <promql-input
-                :ref="'promql-'+(index-1)"
-                :id="promqlKeys[index-1]"
-                :key="promqlKeys[index-1]"
-                :expression-list="expressions"
-                :index="index-1"
-                :styleType="2"
-                :plugins="['metric-selector', 'metric-input', 'remove']"
-                @change="expressionChange"
-                @removeExpression="removeExpression"
-                :showRemove="false"
-                :projectRightBox="true"
-              ></promql-input>
-            </div>
-            <el-row>
-              <template>
-                <el-col class="expr-title">
-                  {{$t('dashboard.panel.chartForm.legend')}}&nbsp;
-                  <el-popover :content="$t('dashboard.panel.chartForm.legendTip')" placement="top" width="150" trigger="hover">
-                    <i slot="reference" class="nz-icon nz-icon-info-normal" @mouseover="rz"></i>
-                  </el-popover>
-                </el-col>
-                <el-col style="width: calc(100% - 120px);">
-                  <el-input v-model="legends[index-1]" type="text" size="small"></el-input>
-                </el-col>
-              </template>
-            </el-row>
-          </el-row>
-        </el-form>
-      </div>
-
-      <!-- end--表单-->
-
-      <!--底部按钮-->
-      <div class="right-box-bottom-btns">
-        <button @click="esc" id="ep-edit-esc" class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new">
-          <span>{{$t('overall.cancel')}}</span>
-        </button>
-        <button @click="onSubmit" id="ep-edit-save" class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new">
-          <span>{{$t('overall.save')}}</span>
-        </button>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-  import promqlInput from "@/components/page/dashboard/explore/promqlInput";
-  import chartDataFormat from "@/components/charts/chartDataFormat";
-  import {getUUID,resetZIndex} from "@/components/common/js/common";
-  var rz = {
-    methods: {
-      rz(e) {
-        resetZIndex(e);
-      }
-    }
-  };
-  export default {
-    name:"addLine",
-    props:{
-      lineData:{},
-    },
-    components:{
-      'promql-input': promqlInput,
-    },
-    mixins: [rz],
-    watch:{
-      lineData:{
-        handler(n){
-          console.log(n);
-          this.form={
-            arrows:n.arrows,
-            color:n.color,
-            lineId:n.id,
-            width:n.width,
-            lineName:n.name,
-            name:[],
-            dashes:!n.dashes?n.dashes:JSON.stringify(n.dashes),
-            type:n.smooth.type?n.smooth.type:false,
-            // dashes:!n.dashes?n.dashes:JSON.stringify([n.dashes[2],n.dashes[2]]),
-          };
-         if( n.expressions){
-           n.expressions.forEach((item,index)=>{
-             this.addExpression();
-             this.form.name[index]=item.name;
-             this.unit[index]=item.unit;
-             this.expressions[index]=item.metric;
-             this.legends[index]=item.legend;
-           })
-         }
-
-        },
-        immediate: true,
-        deep: true,
-      }
-    },
-    data(){
-      return{
-        metricList: [], // metric列表
-        metricCascaderList:[],//metric级联列表
-        metricAllData:new Map(),//存放所有的project-module-metric-labelValue，避免重复加载
-        metricOptions: [],
-        form:{
-          arrows:'0',
-          label:'',
-          color:'#1e90ff',
-          lineName:'',
-          lineId:'',
-          width:'',
-          type:'',
-          roundness:'',
-          name:[],
-          dashes:''
-        },
-        predefineColors: [
-          '#ff4500',
-          '#ff8c00',
-          '#ffd700',
-          '#90ee90',
-          '#00ced1',
-          '#1e90ff',
-          '#c71585',
-        ],
-        showPicker:false,
-        unitOptions: chartDataFormat.unitOptions(),
-        promqlKeys:[],
-        expressions: [],
-        promqlCount:0,
-        elementIds:[],
-        legends:[],
-        widthOption:['1','2','3','4'],
-        dashesOption:[false,'[3,3]','[9,9]','[15,15]','[21,21]'],
-        unit:[],
-        rules:{
-          // arrows: [
-          //   { required: true, message: '', trigger: 'change' },
-          // ],
-          lineName: [
-            { required: true, message: '', trigger: 'change' },
-          ],
-        }
-      }
-    },
-    mounted(){
-      // this.addExpression();
-      this.queryMetrics();
-      if( this.lineData.expressions){
-        this.lineData.expressions.forEach((item,index)=>{
-          this.$refs['promql-'+(index)][0].metricChange(this.expressions[index]);
-        })
-      }
-    },
-    methods:{
-      getMetricOptions() {
-        return this.metricOptions;
-      },
-      queryMetrics() {
-        this.metricOptions = [];
-        this.$get('prom/api/v1/label/__name__/values').then(response=>{
-          if(response.status == 'success'){
-            let metrics=response.data.sort();
-            let metricMap=new Map();
-            metrics.forEach((item)=>{
-              let key='';
-              if(/^[a-zA-Z]+?_[a-zA-Z]*/.test(item)){
-                key=item.split('_')[0];
-              }else if(/^_\w*/.test(item)){
-                key='      ';
-              }else{
-                key=item;
-              }
-              if(metricMap.get(key)){
-                let values=metricMap.get(key);
-                values.push({label:item,value:item});
-              }else{
-                let values=[{label:item,value:item}];
-                metricMap.set(key,values);
-              }
-              //this.metricStore.push({label:item,value:item,insertText:item})
-            });
-            for(let key of metricMap.keys()){
-              let option={
-                label:key,
-                value:key,
-              };
-              if(metricMap.get(key) && metricMap.get(key).length>1){
-                option.children=metricMap.get(key);
-              }
-              this.metricOptions.push(option);
-            }
-          }
-        })
-      },
-      onSubmit(){
-        this.$refs['form'].validate((valid) => {
-          if (valid) {
-            let model=Object.assign({id:this.form.lineId?this.form.lineId:undefined},{...this.form},{color: {color:this.form.color,highlight:this.form.color,hover:this.form.color,opacity:1.0}});
-            // model.label=this.form.lineName;
-            model.name=this.form.lineName;
-            model.width = parseInt(model.width) || 4;
-            if(!this.form.type){
-              model.smooth={
-                enabled:false,
-              };
-            } else{
-              model.smooth={
-                roundness:0.5 ,// (Math.random()*8 +1)/10 获取0.1-0.9之间的随机数
-                type:this.form.type,
-              };
-            }
-            model.dashes=!model.dashes?model.dashes:JSON.parse(model.dashes);
-            model.expressions=[];
-            this.promqlKeys.forEach((item,index)=>{
-              model.expressions.push({
-                "name": this.form.name[index],
-                "unit": this.unit[index],
-                "metric": this.expressions[index],
-                "legend": this.legends[index],
-              })
-            });
-            this.$emit('addLine',model);
-          }
-        });
-      },
-      expressionChange: function () {
-
-      },
-      addExpression() {
-        this.expressions.push('');
-        this.legends.push('');
-        this.form.name.push('');
-        this.unit.push(1);
-        this.promqlKeys.push(getUUID());
-        this.elementIds.push("");
-        this.promqlCount++;
-      },
-      removeExpression(index) {
-        if (this.promqlCount >= 1) {
-          this.expressions.splice(index, 1);
-          this.legends.splice(index, 1);
-          this.form.name.splice(index, 1);
-          this.unit.splice(index, 1);
-          this.promqlKeys.splice(index, 1);
-          this.elementIds.splice(index, 1);
-          this.promqlCount--;
-          this.$nextTick(() => {
-            this.expressions.forEach((ex, index) => {
-              if (ex) {
-                this.$refs[`promql-${index}`][0].metricChange(ex);
-              }
-            });
-          });
-        }
-      },
-      /*关闭弹框*/
-      esc(refresh) {
-        this.$emit("close", refresh);
-      },
-      clickOutside() {
-        this.esc(false);
-      },
-      del(){
-        this.$emit('del');
-        this.esc();
-      },
-      colorPickerClick(){
-        this.showPicker=true;
-        this.$refs['colorPicker'].showPicker=true;
-      },
-      colorChange(val){
-        this.form.color=this.colorRGBtoHex(val)
-      },
-      colorRGBtoHex(color) {
-        let rgb = color.split(',');
-        let r = parseInt(rgb[0].split('(')[1]);
-        let g = parseInt(rgb[1]);
-        let b = parseInt(rgb[2].split(')')[0]);
-        let hex = "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
-        return hex;
-      },
-      colorOut(){
-        this.showPicker=false;
-      },
-      //返回dashes的第一項
-      dashesWidth(item){
-        return JSON.parse(item)[0]
-      },
-      // 返回應該遍历的次数
-      dashesCount(item){
-        if(!item){
-          return 0;
-        }
-        return Math.floor(190/this.dashesWidth(item)/2);
-      }
-
-    },
-
-  }
-</script>
-
-<style scoped>
-  .mc{
-    position: fixed;
-    width: 100vw;
-    height: 100vh;
-    top: 0;
-    left: 0;
-    z-index: 11;
-  }
-  .color-content{
-    height: 0;
-    width: 0;
-    overflow: hidden;
-    position: absolute;
-    top: 0;
-    left: 140px;
-  }
-  .color{
-    position: relative;
-  }
-  .color-show{
-    border: 1px solid #E7EAED;
-    border-radius: 5px;
-    display: flex;
-    align-items: center;
-    width: calc(100% - 32px);
-    height: 30px;
-  }
-  .color-show-left{
-    width: 18px;
-    height: 18px;
-    border: 1px solid #E7EAED;
-    border-radius: 5px;
-    margin: 0 5px;
-  }
-  .line-name{
-    width: calc(100% - 70px);
-  }
-  .form-title{
-    font-size: 14px;
-    color: #333333;
-    padding-left: 28px;
-    margin-bottom: 15px;
-  }
-  /deep/ .el-form-item__label{
-    font-size: 14px;
-    color: #666666;
-  }
-  .arrows /deep/ .el-input.el-input--prefix.el-input--suffix,.line-width /deep/ .el-input.el-input--prefix.el-input--suffix{
-    border: 1px solid #DCDFE6;
-    height: 28px;
-    width: calc(100% - 32px);
-  }
-  .arrows /deep/ .el-input__inner,.line-width /deep/ .el-input__inner{
-    display: none;
-  }
-  .arrows /deep/ .el-input__prefix,.line-width /deep/ .el-input__prefix{
-    height: 28px;
-    line-height: 28px;
-    color: #899FB7;
-  }
-  .arrows /deep/ .el-input__prefix > div{
-    width: 100%;
-    height: 100%;
-  }
-  .line-width /deep/ .el-input__prefix{
-    width: calc(100% - 32px);
-    display: flex;
-    align-items: center;
-  }
-  .line-width /deep/ .el-input__prefix > div{
-    width: 100%;
-  }
-  /deep/ .el-select{
-    width: 100%;
-  }
-  .line-option{
-    display: flex;
-    flex-wrap: wrap;
-    margin-left: 70px;
-  }
-  .line-option > div{
-    width: 50%;
-  }
-  .line-option .line-width .el-input{
-    width: clac(100% - 60px);
-  }
-  /deep/ .el-input--small .el-input__icon{
-    line-height: 28px;
-  }
-  .width-option-line{
-    position: relative;
-    color: #899FB7;
-  }
-  .position-left{
-    position: absolute;
-    left:-4px ;
-    top: -18px;
-    transform: rotate(180deg);
-  }
-  .position-right{
-    position: absolute;
-    right: -4px;
-    top: -18px;
-  }
-  /deep/ .el-select-dropdown__item.selected .width-option-line {
-    border-color: #ee9d3f !important;
-    color: #ee9d3f !important;
-  }
-  /deep/ .el-dropdown-menu__item:focus .width-option-line, .el-dropdown-menu__item:not(.is-disabled):hover .width-option-line, .el-select-dropdown.is-multiple .el-select-dropdown__item.selected.hover .width-option-line, .el-select-dropdown__item.hover .width-option-line, .el-select-dropdown__item:hover .width-option-line{
-    border-color: #ee9d3f !important;
-    color: #ee9d3f !important;
-  }
-  .color-arrows{
-    color: #C0C4CC;
-    position: absolute;
-    right: 42px;
-  }
-  .color-arrows .nz-icon{
-    font-size: 12px;
-  }
-  .element-item{
-    padding: 20px 0;
-    border-bottom: 1px dashed #dfe7f2;
-    width: 100%;
-  }
-  /deep/ .right-box-form  .element-item.form-row-item {
-    padding: 20px 20px 20px 0;
-    border: 1px dashed #dfe7f2;
-    width: calc(100% - 120px);
-    margin-left: 70px;
-    position: relative;
-  }
-  .element-item.expr /deep/ .el-form-item__content{
-    position: relative;
-    margin-left: 0 !important;
-  }
-  .element-item.expr /deep/ .el-form-item__content .el-row{
-    margin-bottom: 0;
-  }
-  .element-item.expr /deep/ .el-form-item__content .el-form-item__error{
-   left: 120px;
-  }
-  .expr-title{
-    width: 120px;
-    padding-right: 20px;
-    text-align: right;
-    color: #666;
-    font-size: 14px;
-    letter-spacing: 0;
-    line-height: 22px;
-  }
-  /deep/.promqlInput .expr-title{
-    padding-right: 0;
-  }
-  .width-option{
-    width: 190px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: 100%;
-    overflow: hidden;
-  }
-  .dashes-box{
-    height:100%;
-    width:80%;
-    overflow: hidden;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-  }
-  .type /deep/ .el-input--suffix{
-    width: calc(100% - 30px);
-  }
-  .type /deep/ .el-scrollbar__view.el-select-dropdown__list{
-    width: 256px;
-  }
-  .el-row {
-    margin-bottom: 20px;
-    line-height: 32px;
-  }
-  .el-row:last-child  {
-    margin-bottom: 0;
-  }
-  .nz-btn-edit-ok{
-    position: absolute;
-    bottom: 0;
-    right:0;
-  }
-  .nz-btn-edit-esc{
-    position: absolute;
-    bottom: 0;
-    left:0;
-  }
-
-  /* begin--搜索框*/
-  .endpoint-asset-search {
-    display: inline-block;
-    position: relative;
-    margin-top: -16px;
-  }
-  .endpoint-asset-search button {
-    height: 22px !important;
-  }
-  .endpoint-asset-search-dropdown {
-    position: absolute;
-    top: 25px;
-    background-color: #444;
-    border-radius: 4px;
-    width: 44px;
-    left: 0;
-  }
-  .endpoint-asset-search-dropdown-item {
-    text-align: center;
-    line-height: 22px;
-    height: 22px;
-    cursor: default;
-    color: white;
-    font-size: 12px;
-  }
-  .endpoint-asset-label-txt {
-    display: inline-block;
-    width: 19px;
-    text-align: center;
-  }
-  .endpoint-asset-search-dropdown-item:first-of-type {
-    border-radius: 4px 4px 0 0;
-  }
-  .endpoint-asset-search-dropdown-item:last-of-type {
-    border-radius: 0 0 4px 4px;
-  }
-  .endpoint-asset-search-dropdown-item:hover {
-    background-color: #222;
-    color: #ff9900;
-  }
-  .endpoint-asset-search-input {
-    display: inline-block;
-    width: 150px;
-    vertical-align: top;
-  }
-  /* end--搜索框*/
-
-  /* begin--table*/
-  .endpoint-sub-table {
-    padding-top: 30px;
-    height: 440px;
-  }
-  .line-100 {
-    margin-bottom: 3px;
-  }
-  .endpoint-sub-table-head {
-    line-height: 28px;
-    height: 30px;
-  }
-  .endpoint-sub-table-row, .endpoint-sub-table-row-disabled {
-    line-height: 28px;
-    height: 30px;
-    color: #656565;
-  }
-  .endpoint-sub-table-row:hover {
-    background-color: #dadada;
-    cursor: default;
-  }
-  .endpoint-sub-table-row-active {
-    background-color: #dadada;
-  }
-  .endpoint-sub-table-row-selected {
-    background-color: #656565;
-    color: white;
-  }
-  .endpoint-sub-table-col {
-    display: inline-block;
-    width: calc(50% - 15px);
-    padding-left: 10px;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    overflow: hidden;
-  }
-  .endpoint-sub-table-paginate-all {
-    position: absolute;
-    left: 10px;
-    bottom: 17px;
-    color: #5a5a5a;
-  }
-  .endpoint-sub-table-body {
-    font-size: 15px;
-    position: relative;
-    overflow: auto;
-    height: calc(100% - 34px);
-  }
-  .endpoint-sub-table-body-dialog {
-    width: 100%;
-    height: 100%;
-    background-color: #e9ebec;
-    position: absolute;
-    opacity: 0.2;
-  }
-  .endpoints-clear-btn {
-    margin: 6px 0 0 7px;
-  }
-  /* end--table*/
-</style>
-
diff --git a/nezha-fronted/src/components/common/project/addNode.vue b/nezha-fronted/src/components/common/project/addNode.vue
deleted file mode 100644
index d1e1ff690..000000000
--- a/nezha-fronted/src/components/common/project/addNode.vue
+++ /dev/null
@@ -1,745 +0,0 @@
-<template>
-  <div class="mc" @click.self="clickOutside">
-    <div class="right-box right-box-edit-endpoint">
-    <!-- begin--顶部按钮-->
-    <div class="right-box-top-btns right-box-form-delete" v-if="nodeData.id">
-      <button id="edit-ep-del" type="button" @click="del" class="nz-btn nz-btn-size-normal nz-btn-size-alien">
-        <span class="right-box-top-btn-icon"><i class="nz-icon nz-icon-delete"></i></span>
-        <span class="right-box-top-btn-txt">{{$t('overall.delete')}}</span>
-      </button>
-    </div>
-    <!-- end--顶部按钮-->
-
-    <!-- begin--标题-->
-    <div class="right-box-title" v-if="!nodeData.id">
-      {{$t("project.topology.addModule")}}
-    </div>
-    <div class="right-box-title" v-if="nodeData.id">
-      {{$t("project.topology.editModule") + "  ID：" + nodeData.id}}
-    </div>
-    <!-- end--标题-->
-
-    <!-- begin--表单-->
-    <div class="right-box-form-box" ref="scrollbar">
-      <el-form class="right-box-form  right-box-form-left" ref="form" :model="form" label-width="160px" :rules="rules">
-        <el-form-item label="Module Name" prop="moduleId">
-          <el-select v-model="form.moduleId" placeholder=""  popper-class="asset-dropdown" size="small">
-            <el-option
-              v-for="item in moduleDataS.module"
-              :key="item.id"
-              :label="item.name"
-              :value="item.id">
-            </el-option>
-          </el-select>
-        </el-form-item>
-
-        <el-form-item label="Icon" prop="iconId" class="icon">
-          <el-select :loading="imgageLoading" class="icon-select" placeholder="" popper-class="asset-dropdown" size="small" v-model="form.iconId">
-            <div slot="prefix" class="sel-image">
-              <img :src="selImage.image" style="height: 24px; width: auto; max-width: 48px; margin-top: 2px" v-if="form.iconId"/>
-              <span v-if="form.iconId" class="sel-image-name">{{selImage.imageName}}</span>
-            </div>
-            <el-option
-              v-for="item in iconArray"
-              :key="item.id"
-              :label="item.label"
-              :value="item.id">
-              <span style="float: left; width: 55px;">
-                <img :src="item.image" style="height: 28px; width: auto; max-width: 48px; margin-top: 2px"/>
-              </span>
-              <span style="color: #8492a6; font-size: 13px">{{ item.imageName }}</span>
-            </el-option>
-          </el-select>
-          <el-upload
-            class="avatar-uploader"
-            action=" "
-            :show-file-list="false"
-            :on-success="handleAvatarSuccess"
-            :before-upload="beforeAvatarUpload"
-            :auto-upload="true"
-          >
-            {{$t('project.topology.upload')}}
-          </el-upload>
-        </el-form-item>
-        <div  class="right-box-sub-title" style="padding-bottom: 8px;margin-bottom: 20px">
-          <span>{{$t('alert.config.expr')}}</span>
-          <span class="float-right" @click="addExpression"><i style="font-size: 16px; cursor: pointer;" class="nz-icon nz-icon-create-square"></i></span>
-        </div>
-        <el-row :key="'ele' + index" class="element-item expr form-row-item" v-for="index of promqlKeys.length">
-          <span class="nz-icon-minus-medium nz-icon-minus-position" style="padding: 0 8px; margin-left: 8px;"><i @click="removeExpression(index-1)" class="nz-icon nz-icon-minus"></i></span>
-          <el-form-item :prop="'name.' + (index-1)" :rules="{required: true,message: '名称不能为空', trigger: 'blur'}">
-            <el-row>
-              <template>
-                <el-col class="expr-title" style="">
-                  {{$t('project.topology.chartName')}}
-                </el-col>
-                <el-col style="width: calc(100% - 122px);">
-                  <el-input
-                    v-model="form.name[index-1]"
-                    type="text"
-                    size="small"
-                  ></el-input>
-                </el-col>
-              </template>
-            </el-row>
-          </el-form-item>
-          <el-row>
-            <el-col class="expr-title">
-              {{$t('project.topology.unit')}}
-            </el-col>
-            <el-col style="width: calc(100% - 120px);">
-              <el-cascader filterable placeholder="" popper-class="no-style-class unit-popper-class" size="small" style="width: 100%"
-                           :options="unitOptions"
-                           :props="{ expandTrigger: 'click',emitPath:false }"
-                           :show-all-levels="false"
-                           v-model="unit[index-1]"
-              ></el-cascader>
-            </el-col>
-          </el-row>
-          <div>
-            <promql-input
-              :ref="'promql-'+(index-1)"
-              :id="promqlKeys[index-1]"
-              :key="promqlKeys[index-1]"
-              :expression-list="expressions"
-              :index="index-1"
-              :styleType="2"
-              :plugins="['metric-selector', 'metric-input', 'remove']"
-              @change="expressionChange"
-              @removeExpression="removeExpression"
-              :showRemove="false"
-              :projectRightBox="true"
-            ></promql-input>
-          </div>
-          <el-row>
-            <template>
-              <el-col class="expr-title">
-                {{$t('dashboard.panel.chartForm.legend')}}&nbsp;
-                <el-popover :content="$t('dashboard.panel.chartForm.legendTip')" placement="top" width="150" trigger="hover">
-                  <i slot="reference" class="nz-icon nz-icon-info-normal" @mouseover="rz"></i>
-                </el-popover>
-              </el-col>
-              <el-col style="width: calc(100% - 120px);">
-                <el-input v-model="legends[index-1]" type="text" size="small"></el-input>
-              </el-col>
-            </template>
-          </el-row>
-        </el-row>
-      </el-form>
-    </div>
-    <!-- end--表单-->
-
-    <!--底部按钮-->
-    <div class="right-box-bottom-btns">
-      <button @click="esc" id="ep-edit-esc" class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new">
-        <span>{{$t('overall.cancel')}}</span>
-      </button>
-      <button @click="onSubmit" id="ep-edit-save" class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new">
-        <span>{{$t('overall.save')}}</span>
-      </button>
-    </div>
-  </div>
-  </div>
-</template>
-
-<script>
-  import promqlInput from "@/components/page/dashboard/explore/promqlInput";
-  import chartDataFormat from "@/components/charts/chartDataFormat";
-  import {getUUID,resetZIndex} from "@/components/common/js/common";
-  var rz = {
-    methods: {
-      rz(e) {
-        resetZIndex(e);
-      }
-    }
-  };
-	export default {
-		name:"addNode",
-    components:{
-      'promql-input': promqlInput,
-    },
-    props:{
-      nodeData:{},
-      moduleDataS:{},
-    },
-    mixins: [rz],
-    watch:{
-      nodeData:{
-        handler(n){
-         this.form.moduleId=n.id;
-          if( n.expressions){
-            n.expressions.forEach((item,index)=>{
-              this.addExpression();
-              this.form.name[index]=item.name;
-              this.unit[index]=item.unit;
-              this.expressions[index]=item.metric;
-              this.legends[index]=item.legend;
-            })
-          }
-       },
-       immediate: true,
-       deep: true,
-      },
-      moduleDataS:{
-        handler(n){
-        },
-        immediate: true,
-        deep: true,
-      },
-      'form.iconId':{
-        handler(n){
-          if(n){
-            this.selImage=this.iconArray.find(item=>item.id===n)
-          }
-        },
-        immediate: true,
-        deep: true,
-      }
-    },
-    data(){
-		  return{
-        form:{
-          moduleId:'',
-          iconId:'',
-          name:[],
-        },
-        selImage:'',
-        file:'',
-        uploadFileList:[],
-        unitOptions: chartDataFormat.unitOptions(),
-        promqlKeys:[],
-        expressions: [],
-        promqlCount:0,
-        elementIds:[],
-        legends:[],
-        unit:[],
-        imgageLoading:false,
-        rules:{
-          moduleId:[
-            { required: true, message: '请选择module', trigger: 'blur' },
-          ],
-          iconId:[
-            { required: true, message: '请选择icon', trigger: 'blur' },
-          ],
-        },
-        iconArray:[],
-        metricList: [], // metric列表
-        metricCascaderList:[],//metric级联列表
-        metricAllData:new Map(),//存放所有的project-module-metric-labelValue，避免重复加载
-        metricOptions: [],
-      }
-    },
-    mounted(){
-      this.getSuggestMetric();
-      this.queryMetrics();
-      // this.addExpression();
-      this.addNodeInit();
-      if( this.nodeData.expressions){
-        this.nodeData.expressions.forEach((item,index)=>{
-          this.$refs['promql-'+(index)][0].metricChange(this.expressions[index]);
-        })
-      }
-    },
-    methods:{
-      queryMetrics() {
-        this.metricOptions = [];
-        this.$get('prom/api/v1/label/__name__/values').then(response=>{
-          if(response.status == 'success'){
-            let metrics=response.data.sort();
-            let metricMap=new Map();
-            metrics.forEach((item)=>{
-              let key='';
-              if(/^[a-zA-Z]+?_[a-zA-Z]*/.test(item)){
-                key=item.split('_')[0];
-              }else if(/^_\w*/.test(item)){
-                key='      ';
-              }else{
-                key=item;
-              }
-              if(metricMap.get(key)){
-                let values=metricMap.get(key);
-                values.push({label:item,value:item});
-              }else{
-                let values=[{label:item,value:item}];
-                metricMap.set(key,values);
-              }
-              //this.metricStore.push({label:item,value:item,insertText:item})
-            });
-            for(let key of metricMap.keys()){
-              let option={
-                label:key,
-                value:key,
-              };
-              if(metricMap.get(key) && metricMap.get(key).length>1){
-                option.children=metricMap.get(key);
-              }
-              this.metricOptions.push(option);
-            }
-          }
-        })
-      },
-      addNodeInit(selImageId){
-        this.$get('/project/topo/icon').then(res=>{
-          this.imgageLoading=true;
-          this.iconArray=res.data.list;
-          this.iconArray.forEach((item,index)=>{
-            item.imageName=item.name;
-            delete item.name;
-            this.dealImg(`/project/topo/icon/${item.id}`).then((data)=>{
-              item.image=data;
-              if(index===this.iconArray.length-1){
-                setTimeout(()=>{
-                  this.iconArray=[...this.iconArray];
-                  this.imgageLoading=false;
-                  if(selImageId || this.nodeData.iconId){
-                    this.form.iconId=selImageId || this.nodeData.iconId;
-                  }
-                },100)
-              }
-            })
-          });
-        })
-      },
-      dealImg(url) {
-        // 处理后端传过来的图片流乱码问题
-        if (url) {
-          return new Promise((resolve,reject)=>{
-            this.$axios
-              .get(url, {
-                responseType: "arraybuffer"
-              })
-              .then(res => {
-                return ("data:image/jpeg;base64," +btoa(new Uint8Array(res.data).reduce((data, byte) => data + String.fromCharCode(byte), "")));
-              })
-              .then(data => {
-                resolve(data)
-              })
-              .catch(err => {
-              });
-          })
-        }
-      },
-      onSubmit(){
-        this.$refs['form'].validate((valid) => {
-          if (valid) {
-            let module=this.moduleDataS.module.find(item=>item.id===this.form.moduleId);
-            let img=this.iconArray.find(item=>item.id===this.form.iconId);
-            let model=Object.assign({...this.form},{...module},{...img},{id:this.form.moduleId,shape:'image',shapeProperties:{useImageSize:false}},);
-            model.label=model.name;
-            model.expressions=[];
-            this.promqlKeys.forEach((item,index)=>{
-              model.expressions.push({
-                "name": this.form.name[index],
-                "unit": this.unit[index],
-                "metric": this.expressions[index],
-                "legend": this.legends[index],
-              })
-            });
-            this.$emit('addModel',model);
-          }
-        });
-
-      },
-      expressionChange: function () {
-
-      },
-      // 获取metric列表
-      getSuggestMetric() {
-        //this.$get('/prom/api/v1/label/__name__/values').then(response => {
-        this.$get('/module?pageSize=-1').then(response => {
-          if (response.code === 200) {
-            this.metricList = response.data.list;
-            const cascaderMap = new Map();
-            this.metricList.forEach((item,index) => {
-              let projectName = item.project.name;
-              let moduleName = item.name;
-              const childOption = {
-                value: moduleName,
-                label: moduleName,
-                children:[],
-              };
-              if(cascaderMap.has(projectName)){
-                cascaderMap.get(projectName).push(childOption);
-              }else {
-                let childArr = [];
-                childArr.push(childOption);
-                cascaderMap.set(projectName,childArr);
-              }
-
-              //缓存全局数据
-              const moduleItem = {
-                name:moduleName,
-                metricMap:new Map()
-              };
-              if(this.metricAllData.has(projectName)){
-                let moduleGroup = this.metricAllData.get(projectName);
-                this.metricAllData.get(projectName).push(moduleItem);
-              }else {
-                let moduleList = [];
-                moduleList.push(moduleItem);
-                this.metricAllData.set(projectName,moduleList);
-              }
-            });
-            let metricCascaderArr = [];
-            cascaderMap.forEach(function(value,index){
-              const option = {
-                value: index+"_par",
-                label: index,
-                children:value,
-              };
-              metricCascaderArr.push(option);
-            });
-
-            this.metricCascaderList = metricCascaderArr;
-          }else {
-            this.metricList = [];
-            this.metricCascaderList = [];
-          }
-        })
-      },
-      getMetricOptions() {
-        return this.metricOptions;
-      },
-      addExpression() {
-        this.expressions.push('');
-        this.legends.push('');
-        this.form.name.push('');
-        this.unit.push(1);
-        this.promqlKeys.push(getUUID());
-        this.elementIds.push("");
-        this.promqlCount++;
-      },
-      removeExpression(index) {
-        if (this.promqlCount >= 1) {
-          this.expressions.splice(index, 1);
-          this.legends.splice(index, 1);
-          this.form.name.splice(index, 1);
-          this.unit.splice(index, 1);
-          this.promqlKeys.splice(index, 1);
-          this.elementIds.splice(index, 1);
-          this.promqlCount--;
-          this.$nextTick(() => {
-            this.expressions.forEach((ex, index) => {
-              if (ex) {
-                this.$refs[`promql-${index}`][0].metricChange(ex);
-              }
-            });
-          });
-        }
-      },
-      /*关闭弹框*/
-      esc(refresh) {
-        this.$emit("close", refresh);
-      },
-      clickOutside() {
-        this.esc(false);
-      },
-      del(){
-        this.$emit('del');
-        this.esc();
-      },
-      beforeAvatarUpload(file){
-        let this_=this
-        let isJPG = (file.type === 'image/jpeg' || file.type === 'image/png');
-
-        const isLt2M = file.size / 1024 / 1024 < 2;
-
-        if (!isJPG) {
-          this.$message.error( this_.$t('project.topology.imgFormat'));
-          return false;
-        }
-        // if (!isLt2M) {
-        //   this.$message.error( this_.$t('project.topology.imgSize'));
-        //   return false;
-        // }
-        const isSize = new Promise(function(resolve, reject) {
-          let width = 100;
-          let height = 100;
-          let _URL = window.URL || window.webkitURL;
-          let img = new Image();
-          img.onload = function() {
-            let valid = img.width > width && img.height > height;
-            valid ? resolve() : reject();
-          }
-          img.src = _URL.createObjectURL(file);
-        }).then(() => {
-          if(isJPG){
-            this.file=file;
-            this.upload();
-          }
-          return file;
-        }, () => {
-          this.$message.error( this_.$t('project.topology.imgMeasure'));
-          return Promise.reject();
-        });
-       return false;
-      },
-      handleAvatarSuccess(file,res){
-
-      },
-      upload() {
-        let form = new FormData();
-        form.append("file",this.file);
-        let fileName=this.file.name;
-        form.append("name", fileName.substring(0, fileName.lastIndexOf(".")));
-        this.$post('/project/topo/icon',form,{'Content-Type': 'multipart/form-data'}).then(res => {
-          if(res.code ==  200 ){
-            this.$message({duration: 2000, type: 'success', message: this.$t("tip.saveSuccess")});
-            this.addNodeInit(res.data.id);
-          }else{
-            this.$message.error(res.msg);
-          }
-        })
-      },
-    },
-    beforeDestroy(){
-
-    }
-
-  }
-</script>
-<style>
-  .icon-select>.el-input {
-    border-radius: 4px;
-  }
-</style>
-<style scoped>
-
-  .mc{
-    position: fixed;
-    width: 100vw;
-    height: 100vh;
-    top: 0;
-    left: 0;
-    z-index: 11;
-  }
-  /deep/ .avatar-uploader{
-    display: inline-block;
-    color: #1989fa;
-    vertical-align: top;
-  }
-  /deep/.right-box-form .icon  .el-select{
-    width: 60%;
-  }
-  .nz-icon-minus{
-    vertical-align: middle;
-  }
-  .sel-image{
-    height: 28px;
-    line-height: 28px;
-    width: 300px;
-    text-align: left;
-  }
-  .sel-image-name{
-    float: right;
-    display: inline-block;
-    height: 28px;
-    line-height: 28px;
-    color: #333333;
-  }
-  .nz-btn-edit-ok{
-    position: absolute;
-    bottom: 0;
-    right:0;
-  }
-  .nz-btn-edit-esc{
-    position: absolute;
-    bottom: 0;
-    left:0;
-  }
-  .icon /deep/ .el-input.el-input--prefix.el-input--suffix{
-    border: 1px solid #DCDFE6;
-    height: 28px;
-    width: calc(100% - 10px);
-  }
-  .icon /deep/ .el-input__inner{
-    display: none;
-  }
-  .icon /deep/ .el-input__prefix{
-    height: 28px;
-    line-height: 28px;
-  }
-  .element-item.expr /deep/ .el-form-item__content{
-    position: relative;
-    margin-left: 0 !important;
-  }
-  .element-item.expr /deep/ .el-form-item__content .el-row{
-    margin-bottom: 0;
-  }
-  .element-item.expr /deep/ .el-form-item__content .el-form-item__error{
-    left: 120px;
-  }
-  .expr-title{
-    width: 120px;
-    padding-right: 20px;
-    text-align: right;
-    color: #666;
-    font-size: 14px;
-    letter-spacing: 0;
-    line-height: 22px;
-  }
-  /deep/.promqlInput .expr-title{
-    padding-right: 0;
-  }
-  /* begin--搜索框*/
-  .endpoint-asset-search {
-    display: inline-block;
-    position: relative;
-    margin-top: -16px;
-  }
-  .endpoint-asset-search button {
-    height: 22px !important;
-  }
-  .endpoint-asset-search-dropdown {
-    position: absolute;
-    top: 25px;
-    background-color: #444;
-    border-radius: 4px;
-    width: 44px;
-    left: 0;
-  }
-  .endpoint-asset-search-dropdown-item {
-    text-align: center;
-    line-height: 22px;
-    height: 22px;
-    cursor: default;
-    color: white;
-    font-size: 12px;
-  }
-  .endpoint-asset-label-txt {
-    display: inline-block;
-    width: 19px;
-    text-align: center;
-  }
-  .endpoint-asset-search-dropdown-item:first-of-type {
-    border-radius: 4px 4px 0 0;
-  }
-  .endpoint-asset-search-dropdown-item:last-of-type {
-    border-radius: 0 0 4px 4px;
-  }
-  .endpoint-asset-search-dropdown-item:hover {
-    background-color: #222;
-    color: #ff9900;
-  }
-  .endpoint-asset-search-input {
-    display: inline-block;
-    width: 150px;
-    vertical-align: top;
-  }
-  /* end--搜索框*/
-
-  /* begin--table*/
-  .endpoint-sub-table {
-    padding-top: 30px;
-    height: 440px;
-  }
-  .line-100 {
-    margin-bottom: 3px;
-  }
-  .endpoint-sub-table-head {
-    line-height: 28px;
-    height: 30px;
-  }
-  .endpoint-sub-table-row, .endpoint-sub-table-row-disabled {
-    line-height: 28px;
-    height: 30px;
-    color: #656565;
-  }
-  .endpoint-sub-table-row:hover {
-    background-color: #dadada;
-    cursor: default;
-  }
-  .endpoint-sub-table-row-active {
-    background-color: #dadada;
-  }
-  .endpoint-sub-table-row-selected {
-    background-color: #656565;
-    color: white;
-  }
-  .endpoint-sub-table-col {
-    display: inline-block;
-    width: calc(50% - 15px);
-    padding-left: 10px;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    overflow: hidden;
-  }
-  .endpoint-sub-table-paginate-all {
-    position: absolute;
-    left: 10px;
-    bottom: 17px;
-    color: #5a5a5a;
-  }
-  .endpoint-sub-table-body {
-    font-size: 15px;
-    position: relative;
-    overflow: auto;
-    height: calc(100% - 34px);
-  }
-  .endpoint-sub-table-body-dialog {
-    width: 100%;
-    height: 100%;
-    background-color: #e9ebec;
-    position: absolute;
-    opacity: 0.2;
-  }
-  .endpoints-clear-btn {
-    margin: 6px 0 0 7px;
-  }
-  /* end--table*/
-
-
-  .el-row {
-    margin-bottom: 20px;
-    line-height: 32px;
-  }
-  .el-row:last-child  {
-    margin-bottom: 0;
-  }
-  .el-col {
-    border-radius: 4px;
-  }
-  .bg-purple {
-    background: white;
-  }
-  .grid-content {
-    border-radius: 4px;
-    min-height: 36px;
-  }
-
-  .common-float-left {
-    float: left;
-    display:inline-block;
-  }
-
-  .el-inner {
-    width: 200px;
-    border-top-width: 0px;
-    border-left-width: 0px;
-    border-right-width: 0px;
-    border-bottom-width: 10px;
-    border-color:red;
-    /*outline: medium;*/
-  }
-
-  .element-bottom-border {
-    padding-bottom: 5px;
-    border-bottom: 1px solid #dfe7f2;
-    margin-top: 15px;
-  }
-  /*metric样式--begin*/
-  .element-item {
-    padding: 20px;
-    border-bottom: 1px dashed #dfe7f2;
-    width: 700px;
-  }
-  /*metric样式--end*/
-  .label-center{
-    vertical-align: middle;
-    line-height: 34px;
-  }
-
-  .z-top {
-    z-index: 2900;
-  }
-</style>
diff --git a/nezha-fronted/src/components/common/project/overViewTopology.vue b/nezha-fronted/src/components/common/project/overViewTopology.vue
deleted file mode 100644
index 678cd6618..000000000
--- a/nezha-fronted/src/components/common/project/overViewTopology.vue
+++ /dev/null
@@ -1,1040 +0,0 @@
-<template>
-  <div class="content">
-    <div class="network" ref="network"  v-clickoutside="networkPopClose" @mousedown="(e)=>{modelTopMouseDown(e)}" @mouseup="(e)=>modelTopMouseUp(e)">
-      <!--拓扑图-->
-      <div id="network_id" ref="visNetwork" :class="{'cursorMove': cursorMove}"></div>
-      <!--model上的图标-->
-      <div :style="{top:(item.y- 80 + 80*(1-zoom))+'px',left:(item.x- 26 + 26*(1-zoom))+'px',transform:'scale('+zoom+')',position:'absolute'}"
-           v-for="(item,indexj) in modelTop"
-      >
-        <i :class="{'nz-icon':true, 'nz-icon-shuidi':true,'model-error':item.error&&(indexj!==activeIndex),'model-error-active':item.error&&indexj==activeIndex}"
-           v-show="item.show"
-           :ref="'modelTopId'+indexj"
-        >
-          <!--@mousedown="(e)=>modelTopMouseDown(item,index,e)"-->
-          <!--@mouseup="modelTopMouseUp(item,index)"-->
-          <i class="nz-icon nz-icon-model"></i>
-        </i>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-  import Vis from 'vis-network/dist/vis-network.js'
-  export default {
-    name:"topology",
-    components: {
-    },
-    props:{
-      nodesArray:{
-        type:Array
-      },
-      edgesArray:{
-        type:Array
-      },
-      viewsCenter:{
-        type: Object,
-        default :{x:0,y:0}
-      },
-    },
-    watch:{
-    },
-    data(){
-      return {
-        screenX:window.screen.width,
-        lineId:'',
-        canvas:'',
-        totalId:'',
-        totalArray:[],
-        allModuleInfos:[],
-        relativeModelTop:{},
-        expressionsInfoPosition:{
-          x:0,
-          y:0,
-        },
-        moduleDataS:[],
-        index:'',
-        zoom:1,
-        domScale:1,
-        selectNodeTitle:false,
-        // 拓扑图工具
-        networkPopTop:0,
-        networkPopLeft:0,
-        networkPopShow:false,
-        addNodeShow:false,
-        addLineShow:false,
-        NodeArrShow:false,
-        cursorMove:false,
-        NodeArr:[],
-        selNodeId:'',
-        lineData:{
-          arrows:'',
-          label:'',
-          color:'#1e90ff',
-          lineId:'',
-          id:'',
-          dashes:[],
-          smooth:{},
-        },
-        hoverEdge:false,
-        isLineAdd:true,
-        isNodeAdd:true,
-        nodeData:{
-          modelId:'',
-          label:'',
-          x:'',
-          y:'',
-          image:'',
-        },
-        popData:[
-          {top:'-20px', left:'-17px',className:'nz-icon-endpoint',id:'endpoint',title:this.$t('project.topology.endpoint')},
-          {top:'-20px', left:'28px',className:'nz-icon-asset',id:'asset',title:this.$t('project.topology.asset')},
-          {top:'18px',  left:'52px',className:'nz-icon-chart',id:'total',title:this.$t('project.topology.total')},
-          {top:'56px', left:'28px',className:'',id:'other',title:''},
-          {top:'56px', left:'-17px',className:'nz-icon-info-normal',id:'info',title:this.$t('project.topology.info')},
-          {top:'18px', left:'-38px',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,
-        },
-        modelTop:[],
-        activeIndex:'',
-        activeModelItem:{},
-        //viewsCenter
-        // viewsCenter:{
-        //   x:0,y:0
-        // },
-        // 拓扑图数据
-        nodes:[],
-        edges:[],
-        // network:null,
-        container:null,
-        options:{},
-        data:{},
-        timeInterval:'',
-        expressionsInfoShow:false,
-      }
-    },
-    methods:{// 保存拓扑图数据
-      saveTopology(){
-        this.$emit('topologyLoad');
-        let nodes=this.formatNodes([...this.nodesArray]);
-        let edges=this.formatEdges([...this.edgesArray]);
-        this.$put('/project/topo',{topo:JSON.stringify({nodes:nodes,lines:edges,viewsCenter:this.viewsCenter,zoom:(this.zoom*1920/this.screenX)}),projectId:this.allModuleInfo.basic.id}).then(res=>{
-          if(res.code===200){
-            this.$message({
-              message: this.$t("tip.saveSuccess"),
-              type: 'success'
-            });
-            this.$emit('reload');
-          }
-        }).catch(res=>{
-          this.$message({
-            message: res.msg,
-            type: 'error'
-          });
-        });
-        // this.$put('/project/topo',{topo:'{}',projectId:this.allModuleInfo.basic.id});
-        this.$emit('editVisNetworkChange',false);
-      },
-      cancelTopology(){
-        this.$emit('reload');
-      },
-      formatNodes(arr){
-        let arr1=[];
-        arr.forEach(item=>{
-          let obj={
-            "x": item.x,
-            "y": item.y,
-            "moduleId": item.moduleId,
-            "label":item.label,
-            "iconId": item.iconId,
-            "expressions": item.expressions
-          };
-          arr1.push(obj)
-        });
-        return arr1
-      },
-      formatEdges(arr){
-        let arr1=[];
-        arr.forEach(item=>{
-          let obj={
-            "name": item.name,
-            "width": item.width,
-            "arrows": item.arrows,
-            "color": item.color,
-            "source": item.from,
-            "target": item.to,
-            "smooth": item.smooth,
-            "expressions": item.expressions.map((item)=>{
-              delete item.value;
-              return item
-            }),
-            "dashes":item.dashes,
-          };
-          arr1.push(obj)
-        });
-        return arr1
-      },
-      //拓扑图方法
-      init(){
-        let this_ = this;
-        this_.nodes = new Vis.DataSet(this_.nodesArray);
-        this_.edges = new Vis.DataSet(this_.edgesArray);
-        this_.container = this.$refs.visNetwork;
-        this_.networkPop = document.getElementById('network-pop');
-        this_.data = {
-          nodes: this_.nodes,
-          edges: this_.edges
-        };
-        this_.options = {
-          autoResize: true,
-          clickToUse:false,
-          groups:{
-            useDefaultGroups: true,
-            myGroupId:{
-              /*node options*/
-            }
-          },
-          nodes: {
-            shape: 'dot',
-            size: 30,
-            borderWidth: 2,
-            font:{
-              size:16,
-            },
-            // chosen:{
-            //   node:(values, id, selected, hovering)=>{
-            //     console.log(values);
-            //   }
-            // },
-          },
-
-          edges: {
-            width: 2,
-            smooth:{  //设置两个节点之前的连线的状态
-              enabled: true,//默认是true，设置为false之后，两个节点之前的连线始终为直线，不会出现贝塞尔曲线
-              roundness:1,
-              type: "dynamic",
-            },
-            font:{
-              align:'bottom',
-              vadjust:10,
-            },
-            selfReference:{size:30, angle:Math.PI / 4},
-            arrowStrikethrough:false,
-            chosen:{
-              edge:(values, id, selected, hovering)=>{
-                // console.log(values, id, selected, hovering);
-                if(this_.hoverEdge){
-                  values.middleArrow=true;
-                  values.middleArrowScale=1;
-                  values.middleArrowType='circle';
-                  this_.expressionsInfoShow=true;
-                  // console.log(values);
-                }
-              },
-              // label:(values, id, selected, hovering)=>{
-              //   console.log(values,2222);
-              // },
-            },
-          },
-          layout:{
-            randomSeed: 666,
-          },
-          physics: { //计算节点之前斥力，进行自动排列的属性
-            enabled: false, //默认是true，设置为false后，节点将不会自动改变，拖动谁谁动。不影响其他的节点
-            barnesHut: {
-              gravitationalConstant: -4000,
-              centralGravity: 0.3,
-              springLength: 120,
-              springConstant: 0.04,
-              damping: 0.09,
-              avoidOverlap: 0
-            }
-          },
-
-          interaction:{
-            dragNodes: true, //是否能拖动节点
-            dragView: true, //是否能拖动画布
-            hover: true, //鼠标移过后加粗该节点和连接线
-            multiselect: false, //按 ctrl 多选
-            selectable: true, //是否可以点击选择
-            selectConnectedEdges: false, //选择节点后是否显示连接线
-            hoverConnectedEdges: true, //鼠标滑动节点后是否显示连接线
-            zoomView: true, //是否能缩放画布
-            navigationButtons:true,
-          },
-
-          manipulation: {  //该属性表示可以编辑，出现编辑操作按钮
-            enabled: false,
-          },
-        };
-        this_.network = new Vis.Network(this_.container, this_.data, this_.options);
-
-        this_.zoom=this_.network.view.targetScale;
-        this_.network.moveTo({
-          // position: this_.viewsCenter,
-          scale: this_.zoom-0.1,
-          offset: {x:0, y:0},
-        });
-        this_.containerCanvas=document.querySelectorAll("#network_id canvas")[0];
-        this_.modelTopUpdate();
-        this_.canvas=document.getElementsByTagName('canvas')[0];
-      },
-      resetAllNodes() {
-        this.setNetworkData(this.nodesArray,this.edgesArray);
-      },
-      resetAllNodesStabilize() {
-        let this_ = this;
-        this_.resetAllNodes();
-        this_.network.stabilize();
-      },
-      setData(){
-        this.setNetworkData(this.nodesArray,this.edgesArray);
-      },
-      setNetworkData(nodes,edges,flag){//动态设置拓扑图数据
-        let this_ = this;
-        this.nodes = new Vis.DataSet(nodes);
-        this.edges = new Vis.DataSet(edges);
-        if(this.network){
-          this.network.setData({
-            nodes: this_.nodes,
-            edges: this_.edges
-          });
-          this_.network.moveTo({
-            position: this_.viewsCenter,
-            // scale: this_.zoom,
-            offset: {x:0, y:0},
-          });
-        }
-        if(!flag){
-          this.$nextTick(()=>{
-            this_.modelTopUpdate();
-            this_.arrayDiff();
-            this_.popDataShowUpdate();
-          })
-        }
-      },
-      addModel(model){ // 添加model
-        this.addNodeShow=false;
-        if(!model){return}
-        let nodesArray=[...this.nodesArray];
-        if(!this.isNodeAdd){
-          model={...nodesArray.find(item=>item.id===model.id),...model};
-          nodesArray=nodesArray.filter(item=>item.id!==model.id);
-        }else{
-          model={...model,...this.network.DOMtoCanvas({x:80,y:100})};
-        }
-        this.$get('/module/stat',{id:model.id}).then(res=>{
-          model.state=res.data;
-          nodesArray.push(model);
-          this.$emit("setTopologyData",nodesArray,this.edgesArray);
-          this.setNetworkData(nodesArray,this.edgesArray);
-          this.$nextTick(()=>{
-            this.arrayDiff();
-            this.$emit('editVisNetworkChange',true);
-          })
-        });
-      },
-      addModelShow(){ // 显示添加节点弹窗
-        this.addNodeShow=true;
-        this.isNodeAdd=true;
-        this.nodeData={
-          modelId:'',
-          label:'',
-          x:'',
-          y:'',
-          image:'',
-          id:'',
-        }
-      },
-      addLine(edges){ // 添加或者編輯line
-        this.addLineShow=false;
-        if(!edges){return}
-        let edgesArray =[...this.edgesArray];
-        if(!this.isLineAdd){
-          edges={...edgesArray.find(item=>item.id===edges.id),...edges};
-          edgesArray=edgesArray.filter(item=>item.id!==edges.id);
-        }else{
-          edges.from=this.NodeArr[0];
-          edges.to=this.NodeArr[1];
-        }
-        edgesArray.push(edges);
-        this.$emit("setTopologyData",this.nodesArray,edgesArray);
-        this.setNetworkData(this.nodesArray,edgesArray);
-        this.NodeArr=[];
-        this.NodeArrShow=false;
-      },
-      addLineTitleShow(){ // 显示添加线弹窗
-        // this.addLineShow=true;
-        this.selectNodeTitle=true;
-        this.NodeArrShow=true;
-      },
-      closeAddLine(){
-        this.selectNodeTitle=false;
-        this.addLineShow=false;
-        this.NodeArr=[];
-        this.NodeArrShow=false;
-        this.network.unselectAll();
-      },
-      closeAddNode(){
-        this.addNodeShow=false;
-        this.arrayDiff();
-      },
-      setNodePosition(selId){ // 移动节点后 设置节点坐标
-        let position = this.network.getPositions([selId]);
-        let selItem = this.nodesArray.find((item)=>item.id===selId);
-        this.nodeData = selItem;
-        selItem.x=position[selId].x;
-        selItem.y=position[selId].y;
-        this.$emit("setTopologyData",this.nodesArray,this.edgesArray);
-      },
-      setPopPosition(selId){//设置节点工具栏位置以及是否显示
-        if(!selId){return}
-        let position=this.network.canvasToDOM(this.network.getPositions([selId])[selId]);
-        this.networkPop.style.top = position.y - 85 + 85*(1-this.zoom)+'px';
-        this.networkPop.style.left = position.x - 32*this.zoom - 5*(1-this.zoom) +'px';
-        if(!this.isFullScreen&&this.NodeArr.length===0&&!this.editVisNetwork){
-          this.networkPopShow=true;
-        }
-        this.NodeArr=[...this.NodeArr]
-      },
-      networkPopClose(){//关闭节点工具栏
-        this.networkPopShow=false;
-        // this.selNodeId=''
-        if(this.network){
-          this.network.unselectAll();
-        }
-      },
-      //工具栏
-      nodeDel(){
-        let nodesArray=this.nodesArray.filter((item)=>item.id!==this.selNodeId);
-        let edgesArray=this.edgesArray.filter((item)=>!(item.from===this.selNodeId || item.to===this.selNodeId));
-        this.selNodeId='';
-        this.$emit('setTopologyData',nodesArray, edgesArray);
-        this.setNetworkData(nodesArray, edgesArray);
-        this.networkPopClose();
-        this.arrayDiff();
-      },
-      nodeEdit(){
-        this.moduleDataS.module.push(this.allModuleInfos.module.find(item=>item.id===this.selNodeId));
-        this.addNodeShow=true;
-        this.isNodeAdd=false;
-      },
-      lineDel(){
-        if(!this.lineData.id){return}
-        let edgesArray=this.edgesArray.filter((item)=>item.id!==this.lineData.id);
-        this.$emit('setTopologyData',this.nodesArray, edgesArray);
-        this.setNetworkData(this.nodesArray,edgesArray);
-      },
-
-      // 工具的点击 对应的操作
-      popClick(id){
-        this.lineData='';
-        this.popDataShowUpdate(id);
-      },
-      modelTopUpdate(){//model上的图标 实时更新
-        this.modelTop=[];
-        if(!this.network){
-          return
-        }
-        this.nodesArray.forEach((item)=>{
-          let position=this.network.canvasToDOM({x:item.x,y:item.y});
-          let obj={
-            show:true,
-            x:position.x,
-            y:position.y,
-            id:item.id,
-            error:false,
-            assetError:false,
-            alertError:false,
-            endpointError:false,
-            state:item.state,
-          };
-          if(item.state){
-            if(item.state.assetStat.down>0){
-              obj.error=true;
-              obj.assetError=true;
-            }
-            if(item.state.endpointStat.down>0){
-              obj.error=true;
-              obj.endpointError=true;
-            }
-            if(item.state.alertStat.P1> 0 || item.state.alertStat.P3>0 || item.state.alertStat.P2>0){
-              obj.error=true;
-              obj.alertError=true;
-            }
-          }
-          this.modelTop.push(obj);
-        })
-      },
-      selNodeArrUpdate(){// 选中框位置更新
-        this.NodeArr.forEach((id,index)=>{
-          let selNode = this.nodesArray.find(item=>item.id===id);
-          let position=this.network.canvasToDOM({x:selNode.x,y:selNode.y});
-          document.getElementById('nodeArr'+(index+1)).style.top=position.y+'px';
-          document.getElementById('nodeArr'+(index+1)).style.left=position.x+'px';
-        })
-      },
-      modelTopMouseDown(e){
-        if(!this.index&&this.index!==0){return}
-        this.relativeModelTop={
-          x:e.clientX-(parseFloat(this.$refs['modelTopId'+this.index][0].style.left)),
-          y:e.clientY-(parseFloat(this.$refs['modelTopId'+this.index][0].style.top)),
-        };
-        this.$refs['network'].addEventListener('mousemove',this.modelTopMouseMove);
-      },
-      modelTopMouseUp(){
-        this.index='';
-        this.relativeModelTop={};
-        this.$refs['network'].removeEventListener('mousemove',this.modelTopMouseMove);
-      },
-      modelTopMouseMove(e){
-        let position={
-          x:e.clientX-this.relativeModelTop.x,
-          y:e.clientY-this.relativeModelTop.y
-        };
-        // this.$refs['modelTopId'+this.index][0].style.top=position.y+'px';
-        // this.$refs['modelTopId'+this.index][0].style.left=position.x+'px';
-        // // {top:(item.y- 80 + 5*(10-zoom*10))+'px',left:(item.x-26)+'px'
-        // let cancvs=this.network.DOMtoCanvas({
-        //   x:position.x+26-5*(1-this.zoom),
-        //   y:position.y+80-(50*(1-this.zoom)),
-        // });
-        // this.network.moveNode(this.selNodeId,cancvs.x,cancvs.y);
-        // let selItem = this.nodesArray.find((item)=>item.id===this.selNodeId);
-        // selItem.x=cancvs.x;
-        // selItem.y=cancvs.y;
-        // this.$emit("setTopologyData",this.nodesArray,this.edgesArray);
-        // if(this.networkPopShow){
-        //   this.setPopPosition(this.selNodeId);
-        // }
-      },
-      modelTopMouseMoveEdge(e){
-        e = e || window.event;
-        let position={
-          x:e.layerX,
-          y:e.layerY,
-        };
-        let nodeName=e.path?e.path[0].nodeName:e.target.tagName;
-        if(nodeName!=='CANVAS'){
-          this.expressionsInfoShow=false;
-          this.$refs['network'].removeEventListener('mousemove',this.modelTopMouseMoveEdge);
-          return
-        }
-        this.expressionsInfoPosition={...position};
-      },
-      modelTopClick(item,index){
-        this.activeIndex=index;
-        this.activeModelItem=item;
-        this.index=index;
-        this.selNodeId=item.id;
-        if(this.selNodeId){
-          this.setPopPosition(this.selNodeId);
-          this.popDataShowUpdate('main');
-          this.network.selectNodes([this.selNodeId]);
-        }
-      },
-      // 数组取差集
-      arrayDiff(){
-        // this.moduleDataS=this.allModuleInfos-this.nodesArray
-        this.moduleDataS={...this.allModuleInfos};
-        this.nodesArray.forEach((item)=>{
-          if(this.moduleDataS.module){
-            this.moduleDataS.module=this.moduleDataS.module.filter((item1)=> item.id!==item1.id)
-          }
-        })
-      },
-      //工具栏点击后显示对应内容
-      popDataShowUpdate(key,flag){//key 显示对应的弹窗 flag是否不显示工具栏
-        this.popDataShow={
-          endpoint:false,
-          asset:false,
-          total:false,
-          other:false,
-          info:false,
-          alert:false,
-          main:false,
-        };
-        if(key&&!this.editVisNetwork){
-          if(key==='total'&&this.selNodeId){
-            this.totalId=this.selNodeId;
-            this.totalArray=this.nodesArray;
-          }
-          if(key==='total'&&this.lineData){
-            this.totalId=this.lineData.id;
-            this.totalArray=this.edgesArray;
-          }
-          this.$nextTick(()=>{
-            this.popDataShow[key]=true;
-          })
-        }
-        if(flag){ // 处理关闭后 缩放后显示工具按钮的问题
-          this.selNodeId='';
-        }
-        if(key==='asset' || key==='alert' || key==='endpoint'){
-          this.networkPopShow=false;
-          // this.selNodeId='';
-          // this.setPopPosition(this.selNodeId);
-        }
-      },
-      topologyZoom(scale){
-        if(scale<0.1){//每次缩小0.1 保证缩放大于0
-          scale=0.1;
-        }
-        if(scale>3){
-          scale=3;
-        }
-        this.zoom=scale;
-        this.network.moveTo({
-          position: this.viewsCenter,
-          scale: this.zoom,
-          offset: {x:0, y:0},
-        });
-        this.$nextTick(()=>{
-          this.modelTopUpdate();
-          if(this.networkPopShow){
-            this.setPopPosition(this.selNodeId);
-          }
-          this.popDataShowUpdate();
-        })
-      },
-      //拓扑图放大缩小
-      zoomChange(num){
-        this.zoom+=num;
-        if(this.zoom<0.1){//每次缩小0.1 保证缩放大于0
-          this.zoom=0.1;
-        }
-        if(this.zoom>3){
-          this.zoom=3;
-        }
-        this.network.moveTo({
-          position: this.viewsCenter,
-          // scale: this.zoom,
-          offset: {x:0, y:0},
-        });
-        this.$nextTick(()=>{
-          this.modelTopUpdate();
-          this.setPopPosition(this.selNodeId);
-          this.popDataShowUpdate();
-        })
-      },
-      selpopIs(item){//判断是否有图表
-        let flag=true;
-        if(item.id==='other'){
-          flag=false;
-        }
-        this.nodeData=this.nodesArray.find((item)=>item.id===this.selNodeId);
-        if(item.id==='total'&&(!this.nodeData.expressions || this.nodeData.expressions.length===0)){
-          flag=false;
-        }
-        return flag
-      },
-      modelPopError(item){
-        // console.log(item,this.activeModelItem);
-        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;
-      },
-      topologyReset(){//重置topology默认数据
-        this.index='';
-        this.activeIndex='';
-        this.selNodeId='';
-        this.NodeArr=[];
-      },
-      qqq(){
-        let nodesArray=[...this.nodesArray];
-        let edgesArray=[...this.edgesArray];
-        this.edgesArray.forEach((item)=>{
-          if(item.dataFlow==='right'&&item.dashes){
-            if(item.dashes[0]!==0){
-              item.dashes[0]--;
-            }else if(item.dashes[1]!==0){
-              item.dashes[1]--;
-            }else{
-              item.dashes[0]=item.dashes[2];
-              item.dashes[1]=item.dashes[2];
-            }
-          }else if(item.dataFlow==='left'&&item.dashes){
-            if(item.dashes[1]!==item.dashes[2]){
-              item.dashes[1]++;
-            }else if(item.dashes[0]!==item.dashes[2]){
-              item.dashes[0]++;
-            }else{
-              item.dashes[0]=0;
-              item.dashes[1]=0;
-            }
-          }
-        });
-        this.selNodeId='';
-        this.$emit('setTopologyData',nodesArray, edgesArray);
-        this.setNetworkData(nodesArray, edgesArray,true);
-      },
-      clearData(){
-       /* this.nodesArray=null;
-        this.nodesArray*/
-      }
-    },
-    mounted(){
-      // this.timeInterval=setInterval(()=>{
-      //   this.qqq();
-      //   console.log(123);this.network.setData({
-      // },300);
-      setTimeout(()=>{
-        let this_=this;
-        this.init('modal');
-        this.network.on("resize", function (params) {//检测resize
-          setTimeout(()=>{
-            this_.setData();
-            setTimeout(()=>{
-              if(this_.network){
-                this_.zoom=this_.network.view.targetScale;
-                this_.network.moveTo({
-                  // position: this_.viewsCenter,
-                  scale: this_.zoom-0.1,
-                  offset: {x:0, y:0},
-                });
-                this_.modelTopUpdate();
-                this_.selNodeArrUpdate();
-                this_.networkPopShow=false;
-              }
-            },100)
-          });
-          return false
-        });
-      })
-    },
-    beforeDestroy(){
-      this.network=null;
-      this.clearData();
-    }
-  }
-</script>
-
-<style scoped>
-  .content{
-    height: 100%;
-  }
-  .edit-topology{
-    width: 100%;
-    height: 28px;
-  }
-  .network{
-    display: flex;
-    height: calc(100% - 30px);
-    position: relative;
-    overflow: hidden;
-  }
-  .network-pop{
-    position: absolute;
-    z-index: 0;
-    /*border: 1px solid #e6e6e6;*/
-    border-radius: 5px;
-    height: 32px;
-    /*background: #fff;*/
-    padding: 0 3px;
-    line-height: 32px;
-
-  }
-  .network-pop .nz-icon-hexagonBorder{
-    position: absolute;
-    font-size: 48px;
-    color: #84d5c2;
-  }
-  .network-pop .nz-icon-hexagonBorder.error-model-stat{
-    color: #F5BAAC;
-  }
-  .network-pop .nz-icon-hexagonBorder.error-model-stat:hover{
-    color: #EC7F66;
-  }
-  .network-pop  .nz-icon-liubianxing{
-    color:#e2f3ef;
-    font-size: 44px;
-    position: absolute;
-    top: 1px;
-    left: 2px;
-    transform: scale(1.02);
-    z-index: -1;
-  }
-  .network-pop .error-model-stat .nz-icon-liubianxing{
-    color: #FADED7 ;
-  }
-  .network-pop .nz-icon.noMove{
-    position: absolute;
-    top: 0;
-    left: 14px;
-    font-size: 20px;
-    color: #27c09c;
-  }
-  .network-pop .error-model-stat .nz-icon.noMove{
-    color: #EC7F66;
-  }
-  .network-pop .selpop.nz-icon-hexagonBorder:hover{
-    transform: scale(1.2);
-    color: #4BB49B;
-  }
-  .network-pop .selpop:hover .nz-icon-liubianxing{
-    transform: scale(1.1);
-    left: 4px;
-    font-size: 41px;
-    top: 0;
-    color:  #D7FAF1;
-  }
-  .network-pop .selpop:hover .noMove{
-    transform: scale(1.2);
-    color: #4BB49B;
-  }
-  .network-pop .selpop.nz-icon-hexagonBorder.error-model-stat:hover{
-    transform: scale(1.2);
-    color: #EC7F66;
-  }
-  .network-pop .selpop.error-model-stat:hover .nz-icon-liubianxing{
-    transform: scale(1.1);
-    left: 4px;
-    font-size: 41px;
-    top: 0;
-    color: #FBE7E3;
-  }
-  .network-pop .selpop.error-model-stat:hover .noMove{
-    transform: scale(1.2);
-    color: #EC7F66;
-  }
-  /*.network-pop .nz-icon-hexagonBorder.error-model-stat:hover{*/
-  /*color: #EC7F66;*/
-  /*}*/
-  /*.btmTriangle{*/
-  /*position: absolute;*/
-  /*width: 0;*/
-  /*height: 0;*/
-  /*border-width: 10px;*/
-  /*border-style: solid;*/
-  /*border-color:#e6e6e6 transparent transparent transparent;*/
-  /*bottom: -20px;*/
-  /*left: 50%;*/
-  /*transform: translateX(-50%);*/
-  /*}*/
-  /*.btmTriangle:after{*/
-  /*content: '';*/
-  /*display:block;*/
-  /*width:0;*/
-  /*height:0;*/
-  /*border-width: 10px;*/
-  /*border-style:solid;*/
-  /*border-color:#fff transparent  transparent transparent;*/
-  /*position:absolute;*/
-  /*bottom: -7px;*/
-  /*left: -9px;*/
-  /*}*/
-  #network_id,.network-null{
-    width: 100%;
-    height: 100%;
-  }
-  .network-null{
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    position: absolute;
-  }
-  .network-null .nz-icon-create-square{
-    color: #23BF9A;
-    font-size: 50px;
-    margin-bottom: 24px;
-    cursor: pointer;
-  }
-  .cursorMove{
-    cursor: move;
-  }
-  #network_id2{
-    height: 100%;
-  }
-  .networkContent{
-    width: 40%;
-  }
-  .nz-icon-delete{
-    cursor: pointer;
-    color: #ee6723;
-    margin-left: 10px;
-  }
-  .nz-icon-edit{
-    font-size: 14px;
-    cursor: pointer;
-  }
-  .edit-topology{
-    color: #1a1a1a;
-    font-size: 18px;
-    /*font-weight: bold;*/
-    height: 28px;
-    position: absolute;
-    top: 15px;
-    width: calc(100% - 160px);
-    z-index: 10;
-  }
-  .edit-topology-module,.edit-topology-line-cancel{
-    margin-left: 30px;
-  }
-  .edit-topologyLine{
-    margin-left: 60px;
-  }
-  .edit-topology-add,.edit-topology-remove,.edit-topologyCancel{
-    color: #1989fa;
-    margin-left: 30px;
-    cursor: pointer;
-  }
-  .edit-topology-add{
-    display: inline-block;
-    width: 36px;
-  }
-  .edit-topology-add:hover,.edit-topology-remove:active,.edit-topologyCancel:hover{
-    font-weight: bold;
-  }
-  .sel-node{
-    position: absolute;
-    width: 0;
-    height: 0;
-  }
-  .sel-node-top {
-    width: 120px;
-    height: 0;
-    border-top: 4px dashed #FF8C0A;
-    position: absolute;
-    left: -60px;
-    top: -60px;
-  }
-  .sel-node-right {
-    width: 0;
-    height: 120px;
-    border-right: 4px dashed #FF8C0A;
-    position: absolute;
-    left: 60px;
-    top: -60px;
-  }
-  .sel-node-bottom {
-    width: 120px;
-    height: 0;
-    border-bottom: 4px dashed #FF8C0A;
-    position: absolute;
-    left: -60px;
-    top: 60px;
-  }
-  .sel-node-left {
-    width: 0;
-    height: 120px;
-    border-left: 4px dashed #FF8C0A;
-    position: absolute;
-    left: -60px;
-    top: -60px;
-  }
-  @keyframes model-error-animation{
-    0%   {
-      transform: scale(0.7);
-    }
-    50%   {
-      transform: scale(1);
-    }
-    100% {
-      transform: scale(0.7);
-    }
-  }
-  @keyframes model-icon-animation{
-    0%   {
-      transform: scale(1.2) translateX(1px);
-    }
-    50%   {
-      transform: scale(0.9) translateX(0px);
-    }
-    100% {
-      transform: scale(1.2) translateX(1px);
-    }
-  }
-  .nz-icon-shuidi{
-    position: absolute;
-    font-size: 48px;
-    color: rgba(190,233,222,0.45);
-    border-radius: 50%;
-    height: 60px;
-    width: 38px;
-  }
-  .model-error.nz-icon-shuidi{
-    color: #FADED7 ;
-    animation: model-error-animation .6s infinite ease-in-out;
-    animation-direction:normal;
-  }
-  .model-error-active.nz-icon-shuidi{
-    color: #FADED7 ;
-  }
-  .nz-icon-model{
-    color: #23BF9A;
-    position: absolute;
-    top: 17px;
-    left: 15px;
-    font-size: 18px;
-  }
-  .model-error .nz-icon-model{
-    color: #EC7F66;
-    animation: model-icon-animation .6s infinite ease-in-out;
-    animation-direction:normal;
-  }
-  .model-error-active .nz-icon-model{
-    color: #EC7F66;
-  }
-  .network-info{
-    position: absolute;
-    right: 0;
-    top: 50px;
-  }
-  .saveTopology{
-    background-image: linear-gradient(180deg, #F5B93E 0%, #EE9D3F 100%);
-    border-radius: 4px;
-    font-size: 14px;
-    color: #FFFFFF;
-    padding: 4px 14px;
-  }
-  .cancelTopology{
-    background-image: linear-gradient(180deg, #F0F0F0 0%, #D8D8D8 99%);
-    border-radius: 4px;
-    font-size: 14px;
-    color: #333333;
-    padding: 4px 14px;
-  }
-  .network-zoom{
-    position: absolute;
-    bottom: 15px;
-    right: 15px;
-    opacity: 0.42;
-    background: #FFFFFF;
-    border: 1px solid #E7EAED;
-    box-shadow: -1px 1px 9px -1px rgba(205,205,205,0.77);
-  }
-  .zoom-icon{
-    font-size: 24px;
-    color: #999999;
-  }
-  .network-zoom .zoom-box:first-child{
-    border-bottom: 1px solid rgba(0,0,0,0.7);
-    border-radius: 4px 4px 0 0;
-    padding: 5px;
-  }
-  .network-zoom .zoom-box:last-child{
-    border-radius:  0 0 4px 4px;
-    padding: 5px;
-  }
-  #network_id /deep/ .vis-network{
-    outline: none;
-  }
-</style>
diff --git a/nezha-fronted/src/components/common/project/projectFacade.vue b/nezha-fronted/src/components/common/project/projectFacade.vue
deleted file mode 100644
index 47d093477..000000000
--- a/nezha-fronted/src/components/common/project/projectFacade.vue
+++ /dev/null
@@ -1,186 +0,0 @@
-<template>
-  <div style="background: #F9F9F9;height: 100%;padding-top: 15px">
-    <!--<div class="top-tools">-->
-      <!--&lt;!&ndash;时间选择&ndash;&gt;-->
-      <!--<template>-->
-        <!--<div class="top-tool-main-right">-->
-          <!--<div class="top-tool-search relative-position margin-r-20">-->
-            <!--<el-input ref="queryPanel" @clear="clearInput" id="queryPanel" @focus="focusInput"  @blur="blurInput" v-model="filter.searchName" class="query-input-inactive" size="mini" clearable   >-->
-              <!--<i slot="suffix" class="el-input__icon nz-icon nz-icon-search" @click="focusInput" style="float: right"></i>-->
-            <!--</el-input>-->
-          <!--</div>-->
-          <!--<pick-time :refresh-data-func="dateChange" v-model="searchTime" :use-chart-unit="false"></pick-time>-->
-        <!--</div>-->
-      <!--</template>-->
-    <!--</div>-->
-    <div class="project-facade">
-      <div  class="facade-content">
-        <!--拓扑图盒子-->
-        <vis-network
-          :panel-id="item.id"
-          :chart-data="item"
-          :chart-index="0"
-          :allModuleInfo="allModuleInfo"
-          :projectInfo="projectInfo"
-          :alertData="alertData"
-          ref="visNetwork"
-        >
-        </vis-network>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-  import visNetwork from './visNetwork'
-  import draggable from 'vuedraggable'
-  import pickTime from "@/components/common/pickTime";
-  import bus from '@/libs/bus';
-  import timePicker from '@/components/common/timePicker'
-	export default {
-		name:"projectFacade",
-    components: {
-      visNetwork,
-      draggable,
-      'pick-time':pickTime,
-      'time-picker':timePicker,
-    },
-    props:{
-		  obj:{}
-    },
-    watch:{
-		  obj:{
-        // immediate: true,
-        deep: true,
-        handler(n){
-          this.getProjectData(n);
-        },
-      }
-    },
-    data(){
-		  return {
-		    item:{ // 拓扑图
-          id: -10,
-          panelId: 0,
-          title: this.$t("alert.config.chart.alertNumTrend"),
-          span: 8,
-          height: 800,
-          type: "topology",
-          prev: -11,
-          next: -1,
-          unit: 1,
-          buildIn: 1,
-          elements: [{
-            id: '',
-            expression: `nz_alert_nums{id="${3333}"}`,
-            type: ''
-          }]
-        },
-        panelData: [],
-        toAdd() {
-          this.$refs.panelBox.show(true);
-          this.panel = {
-            id: '',
-            name: ''
-          };
-          this.$refs.panelBox.setTitle(this.$t("dashboard.panel.createPanelTitle"));
-        },
-        showPanel: { //panel下拉列表
-          id: '',
-          name: ''
-        },
-        filter: { // 过滤条件
-          panelId: 0,
-          start_time: '',
-          end_time: '',
-          searchName: ''
-        },
-        searchTime: [
-          new Date(bus.computeTimezone(new Date().getTime())).setHours(new Date(bus.computeTimezone(new Date().getTime())).getHours() - 1),
-          new Date(bus.computeTimezone(new Date().getTime()))
-        ],
-        projectInfo:{
-		      title:'',
-          id:'',
-          remark:'',
-          alertStat:[1,2,3],
-          moduleMum:6,
-          loading:true,
-        },
-        alertData:{
-          loading:true,
-          title:'Alert : ',
-          sssObj:{
-            total:60,
-            stop:10,
-            pending:40,
-            other:10,
-          }
-        },
-        allModuleInfo:[]
-      }
-    },
-    mounted(){
-		  if(this.obj.id){
-        this.getProjectData(this.obj);
-      };
-      this.$set(this.filter, "start_time", bus.timeFormate(new Date().getTime()-60*60*1000, "yyyy-MM-dd hh:mm:ss"));
-      this.$set(this.filter, "end_time", bus.timeFormate(new Date().getTime(), "yyyy-MM-dd hh:mm:ss"));
-      this.$set(this.filter, "panelId", this.projectId);
-    },
-    methods:{
-		  getProjectData(n){
-		    //获取projectInfo
-        this.projectInfo.loading=true;
-        this.$get('project/info', {id:n.id}).then(response => {
-          if (response.code === 200) {
-            this.projectInfo.loading=false;
-            this.projectInfo={...this.projectInfo,...response.data.basic,moduleMum:response.data.module.length};
-          }
-        });
-      },
-      focusInput() {
-        let classVal=document.getElementById('queryPanel').parentElement.getAttribute("class");
-        classVal=classVal.replace('query-input-inactive','query-input-active');
-        document.getElementById('queryPanel').parentElement.setAttribute("class",classVal );
-        // this.$refs.queryPanel.focus();
-      },
-      blurInput() {
-        if(!this.filter.searchName || this.filter.searchName == ''){
-          setTimeout(function(){
-            let classVal=document.getElementById('queryPanel').parentElement.getAttribute("class");
-            classVal=classVal.replace('query-input-active','query-input-inactive');
-            document.getElementById('queryPanel').parentElement.setAttribute("class",classVal );
-          },100)
-        }
-      },
-      clearInput() {
-        this.$refs.queryPanel.focus();
-      },
-      dateChange(val) {
-        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.panelId = this.showPanel.id;
-        // this.getData(this.filter);
-      },
-    },
-    beforeDestroy(){
-
-    }
-	}
-</script>
-
-<style scoped>
-  .project-facade{
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    position: relative;
-  }
-  .facade-content{
-    flex: 1;
-    min-height: 800px;
-    width: calc(100% - 20px);
-    min-width: 1190px;
-  }
-</style>
diff --git a/nezha-fronted/src/components/common/project/topology.vue b/nezha-fronted/src/components/common/project/topology.vue
deleted file mode 100644
index 79fbd0fd8..000000000
--- a/nezha-fronted/src/components/common/project/topology.vue
+++ /dev/null
@@ -1,1408 +0,0 @@
-<template>
-  <div class="content">
-    <div class="edit-topology" v-if="editVisNetwork">
-      <span v-show="!selectNodeTitle&&editVisNetwork" class="edit-topology-module">
-        {{$t('project.topology.module')}} :
-        <span class="edit-topology-add" @click="addModelShow">{{$t('project.topology.add')}}</span>
-        <!--<span class="edit-topology-remove" @click="nodeDel">Remove</span>-->
-      </span>
-      <span v-show="!selectNodeTitle&&editVisNetwork" class="edit-topologyLine">
-        {{$t('project.topology.line')}} :
-        <span class="edit-topology-add" @click="addLineTitleShow">{{$t('project.topology.add')}}</span>
-        <!--<span class="edit-topology-remove" @click="lineDel">Remove</span>-->
-      </span>
-      <span v-show="!selectNodeTitle&&editVisNetwork" class="edit-topologyLine">
-        <button @click="saveTopology" class="nz-btn nz-btn-size-small-new nz-btn-style-normal-new" v-has="'project_topo_save'" :disabled="prevent_opt.save" :class="{'nz-btn-disabled':prevent_opt.save}">{{$t('project.topology.save')}}</button>
-        <button v-cancel="{obj:{nodes:nodes,edges:edges},func:cancelTopology}" class="nz-btn nz-btn-size-small-new nz-btn-style-light-new">{{$t('project.topology.cancel')}}</button>
-      </span>
-      <span class="edit-topology-line-cancel" v-show="selectNodeTitle&&editVisNetwork"> {{$t('project.topology.selTwoNode')}} <span class="edit-topologyCancel" @click="closeAddLine">{{$t('project.topology.cancel')}}</span></span>
-    </div>
-    <div class="edit-topology" v-else></div>
-    <div class="network" ref="network"  v-clickoutside="networkPopClose" @mousedown="(e)=>{modelTopMouseDown(e)}" @mouseup="(e)=>modelTopMouseUp(e)">
-      <!--拓扑图-->
-      <div id="network_id" ref="visNetwork" :class="{'cursorMove': cursorMove}"></div>
-      <!--空拓扑图-->
-      <div class="network-null" v-if="nodesArray.length===0">
-        <i class="nz-icon nz-icon-create-square" @click="addModelShow"></i>
-        <img src="./image/emptyData.png" width="303px" height="184px"/>
-      </div>
-      <!--拓扑图工具-->
-      <div
-        id="network-pop"
-        class="network-pop"
-        :style="{transform:'scale('+zoom+')',width:'0',height:'0'}"
-        ref="network-pop"
-      >
-        <div v-for="item in popData">
-          <transition name="scaleTool">
-            <i v-if="networkPopShow"
-               :class="{'nz-icon':true,'nz-icon-hexagonBorder':true,'selpop':selpopIs(item),'no-selPop':!selpopIs(item),'error-model-stat':modelPopError(item)}"
-               :style="{top:item.top,left:item.left}"
-               @click="popClick(item.id)"
-               :title="item.title"
-            >
-              <i class="nz-icon nz-icon-liubianxing"></i>
-              <i :class="[item.className,{'nz-icon':item.className},'noMove']"></i>
-            </i>
-          </transition>
-        </div>
-        <!--<i class="nz-icon nz-icon-delete" @click="nodeDel"></i>-->
-      </div>
-      <!--拓扑图选中-->
-      <div class="sel-node" id="nodeArr1" v-show="NodeArr[0]&&NodeArrShow" :style="{transform:'scale('+zoom+')'}">
-        <div class="sel-node-top"></div>
-        <div class="sel-node-right"></div>
-        <div class="sel-node-bottom"></div>
-        <div class="sel-node-left"></div>
-      </div>
-      <div class="sel-node" id="nodeArr2" v-show="NodeArr[1]&&NodeArrShow" :style="{transform:'scale('+zoom+')'}">
-        <div class="sel-node-top"></div>
-        <div class="sel-node-right"></div>
-        <div class="sel-node-bottom"></div>
-        <div class="sel-node-left"></div>
-      </div>
-      <!--图谱图右侧-->
-      <!--<div class="networkContent">33333</div>-->
-      <!--model上的图标-->
-      <div :style="{top:(item.y- 80 + 80*(1-zoom))+'px',left:(item.x- 26 + 26*(1-zoom))+'px',transform:'scale('+zoom+')',position:'absolute'}"
-           v-for="(item,indexj) in modelTop"
-      >
-        <i :class="{'nz-icon':true, 'nz-icon-shuidi':true,'model-error':item.error&&(indexj!==activeIndex),'model-error-active':item.error&&indexj===activeIndex}"
-           v-show="item.show"
-           :ref="'modelTopId'+indexj"
-           @click="modelTopClick(item,indexj)"
-        >
-          <!--@mousedown="(e)=>modelTopMouseDown(item,index,e)"-->
-          <!--@mouseup="modelTopMouseUp(item,index)"-->
-          <i class="nz-icon nz-icon-model"></i>
-        </i>
-      </div>
-      <!--悬浮network部分-->
-      <div class="network-info">
-        <div  v-if="popDataShow.main">
-          <popDataMain :moduleId="this.selNodeId" :projectId="this.allModuleInfo.basic.id"></popDataMain>
-        </div>
-        <div v-if="popDataShow.total">
-          <total-chart :moduleId="this.totalId" :projectId="this.allModuleInfo.basic.id" :nodesArray="totalArray"></total-chart>
-        </div>
-        <div v-if="popDataShow.info">
-          <popDataInfo :moduleId="this.selNodeId" :projectId="this.allModuleInfo.basic.id"></popDataInfo>
-        </div>
-      </div>
-      <!--拓扑图的放大缩小-->
-      <div class="right-bottom-zoom">
-        <div class="zoom-option" style="border-bottom: 1px solid #c5c8cb;" @click="zoomChange(0.1)"><span><i class="nz-icon nz-icon-enlarge"></i></span></div>
-        <div class="zoom-option" @click="zoomChange(-0.1)"><span><i class="nz-icon nz-icon-narrow"></i></span></div>
-        <div></div>
-      </div>
-      <expression-info
-        v-if="expressionsInfoShow&&!editVisNetwork"
-        :lineId="lineId"
-        :edgesArray="edgesArray"
-        :expressionsInfoPosition="expressionsInfoPosition"
-      ></expression-info>
-    </div>
-    <transition name="right-box">
-      <add-model
-        v-if="addNodeShow"
-        @addModel="addModel"
-        :nodeData="nodeData"
-        @close="closeAddNode"
-        @del="nodeDel"
-        :isAdd="isNodeAdd"
-        :moduleDataS="moduleDataS"
-        :projectName="allModuleInfo.basic"
-      ></add-model>
-    </transition>
-    <transition name="right-box">
-      <add-line
-        v-if="addLineShow"
-        @addLine="addLine"
-        @lineDel="lineDel"
-        :selectNode="NodeArr"
-        :lineData="lineData"
-        :isAdd="isLineAdd"
-        @close="closeAddLine"
-        @del="lineDel"
-      ></add-line>
-    </transition>
-    <!--endpoint-->
-    <transition name="right-box">
-      <endpointTable v-if="popDataShow.endpoint"  :moduleId="this.selNodeId" :projectId="this.allModuleInfo.basic.id" @close="popDataShowUpdate('',true)">endpoint</endpointTable>
-    </transition>
-    <!--asset-->
-    <transition name="right-box">
-      <assetTable v-if="popDataShow.asset" :moduleId="this.selNodeId" :projectId="this.allModuleInfo.basic.id" @close="popDataShowUpdate('',true)">alert</assetTable>
-    </transition>
-    <!--alert-->
-    <transition name="right-box">
-      <alertTable v-if="popDataShow.alert" :moduleId="this.selNodeId" :projectId="this.allModuleInfo.basic.id" @close="popDataShowUpdate('',true)">alert</alertTable>
-    </transition>
-  </div>
-</template>
-
-<script>
-  import Vis from 'vis-network/dist/vis-network.js'
-  import addNode from './addNode'
-  import addLine from './addLine'
-  import popDataMain from './popData/Main'
-  import popDataInfo from './popData/Info'
-  import TotalChart from "./popData/totalChart";
-  import alertTable from "./popData/alertTable";
-  import assetTable from "./popData/assetTable";
-  import endpointTable from "./popData/endpointTable";
-  import ExpressionInfo from "./popData/expressionInfo";
-	export default {
-		name:"topology",
-    components: {
-      ExpressionInfo,
-      TotalChart,
-      alertTable,
-      assetTable,
-      endpointTable,
-      'add-model':addNode,
-      'add-line':addLine,
-      'popDataMain':popDataMain,
-      'popDataInfo':popDataInfo,
-    },
-    props:{
-      nodesArray:{
-        type:Array
-      },
-      edgesArray:{
-        type:Array
-      },
-      isFullScreen:{
-        type:Boolean,
-      },
-      editVisNetwork:{
-        type:Boolean,
-      },
-      allModuleInfo:{}
-    },
-    watch:{
-      NodeArr(n){
-        if(n.length===2){
-          this.lineData={
-            arrows:'0',
-            label:'',
-            color:'#1e90ff',
-            lineId:'',
-            width:'1',
-            dashes:false,
-            id:'',
-            smooth:{},
-          };
-          this.addLineShow=true;
-          this.selectNodeTitle=false;
-          this.isLineAdd=true;
-        }
-       this.selNodeArrUpdate()
-      },
-      editVisNetwork(n){
-        if(!n){
-          this.NodeArr=[];
-          this.selNodeId='';
-          this.selectNodeTitle=false;
-        }
-      },
-      allModuleInfo:{
-        immediate: true,
-        deep: true,
-        handler(n){
-          this.allModuleInfos={...n};
-          this.arrayDiff();
-          this.topologyReset();
-        },
-      },
-    },
-    data(){
-		  return {
-        screenX:window.screen.width,
-        lineId:'',
-		    canvas:'',
-        totalId:'',
-        totalArray:[],
-        allModuleInfos:[],
-        relativeModelTop:{},
-        expressionsInfoPosition:{
-          x:0,
-          y:0,
-        },
-        moduleDataS:[],
-        index:'',
-        zoom:1,
-        domScale:1,
-        selectNodeTitle:false,
-        // 拓扑图工具
-        networkPopTop:0,
-        networkPopLeft:0,
-        networkPopShow:false,
-        addNodeShow:false,
-        addLineShow:false,
-        NodeArrShow:false,
-        cursorMove:false,
-        NodeArr:[],
-        selNodeId:'',
-        lineData:{
-          arrows:'',
-          label:'',
-          color:'#1e90ff',
-          lineId:'',
-          id:'',
-          dashes:[],
-          smooth:{},
-        },
-        hoverEdge:false,
-        isLineAdd:true,
-        isNodeAdd:true,
-        nodeData:{
-          modelId:'',
-          label:'',
-          x:'',
-          y:'',
-          image:'',
-        },
-        popData:[
-          {top:'-14px', left:'-14px',className:'nz-icon-endpoint',id:'endpoint',title:this.$t('project.topology.endpoint')},
-          {top:'-14px', left:'26px',className:'nz-icon-asset',id:'asset',title:this.$t('project.topology.asset')},
-          {top:'22px',  left:'47px',className:'nz-icon-chart',id:'total',title:this.$t('project.topology.total')},
-          {top:'56px', left:'26px',className:'',id:'other',title:''},
-          {top:'56px', left:'-14px',className:'nz-icon-info-normal',id:'info',title:this.$t('project.topology.info')},
-          {top:'22px', left:'-33px',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,
-        },
-        modelTop:[],
-        activeIndex:'',
-        activeModelItem:{},
-        //viewsCenter
-        viewsCenter:{
-          x:0,y:0
-        },
-        // 拓扑图数据
-        nodes:[],
-        edges:[],
-        // network:null,
-        container:null,
-        options:{},
-        data:{},
-        timeInterval:'',
-        expressionsInfoShow:false,
-      }
-    },
-    methods:{// 保存拓扑图数据
-      saveTopology(){
-        if(this.prevent_opt.save){ return } ;
-        this.prevent_opt.save=true;
-        this.$emit('topologyLoad');
-        let nodes=this.formatNodes([...this.nodesArray]);
-        let edges=this.formatEdges([...this.edgesArray]);
-        this.$put('/project/topo',{topo:JSON.stringify({nodes:nodes,lines:edges,viewsCenter:this.viewsCenter,zoom:(this.zoom*1920/this.screenX)}),projectId:this.allModuleInfo.basic.id}).then(res=>{
-          this.prevent_opt.save=false;
-          if(res.code===200){
-            this.$message({
-              message: this.$t("tip.saveSuccess"),
-              type: 'success'
-            });
-            this.$emit('reload');
-          }
-        }).catch(res=>{
-          this.prevent_opt.save=false;
-          this.$message({
-            message: res.msg,
-            type: 'error'
-          });
-        });
-        // this.$put('/project/topo',{topo:'{}',projectId:this.allModuleInfo.basic.id});
-        this.$emit('editVisNetworkChange',false);
-      },
-      cancelTopology(){
-        this.$emit('reload');
-      },
-      formatNodes(arr){
-        let arr1=[];
-        arr.forEach(item=>{
-          let obj={
-            "x": item.x,
-            "y": item.y,
-            "moduleId": item.moduleId,
-            "label":item.label,
-            "iconId": item.iconId,
-            "expressions": item.expressions
-          };
-          arr1.push(obj)
-        });
-        return arr1
-      },
-      formatEdges(arr){
-        let arr1=[];
-        arr.forEach(item=>{
-          let obj={
-            "name": item.name,
-            "width": item.width,
-            "arrows": item.arrows,
-            "color": item.color,
-            "source": item.from,
-            "target": item.to,
-            "smooth": item.smooth,
-            "expressions": item.expressions.map((item)=>{
-              delete item.value;
-              return item
-            }),
-            "dashes":item.dashes,
-          };
-          arr1.push(obj)
-        });
-        return arr1
-      },
-      //拓扑图方法
-      init(){
-        let this_ = this;
-        this_.nodes = new Vis.DataSet(this_.nodesArray);
-        this_.edges = new Vis.DataSet(this_.edgesArray);
-        this_.container = this.$refs.visNetwork;
-        this_.networkPop = document.getElementById('network-pop');
-        this_.data = {
-          nodes: this_.nodes,
-          edges: this_.edges
-        };
-        this_.options = {
-          autoResize: true,
-          clickToUse:false,
-          groups:{
-            useDefaultGroups: true,
-            myGroupId:{
-              /*node options*/
-            }
-          },
-          nodes: {
-            shape: 'dot',
-            size: 30,
-            borderWidth: 2,
-            font:{
-              size:16,
-            },
-            // chosen:{
-            //   node:(values, id, selected, hovering)=>{
-            //     console.log(values);
-            //   }
-            // },
-          },
-
-          edges: {
-            width: 2,
-            smooth:{  //设置两个节点之前的连线的状态
-              enabled: true,//默认是true，设置为false之后，两个节点之前的连线始终为直线，不会出现贝塞尔曲线
-              roundness:1,
-              type: "dynamic",
-            },
-            font:{
-              align:'bottom',
-              vadjust:10,
-            },
-            selfReference:{size:30, angle:Math.PI / 4},
-            arrowStrikethrough:false,
-            chosen:{
-              edge:(values, id, selected, hovering)=>{
-                if(this_.hoverEdge){
-                  values.middleArrow=true;
-                  values.middleArrowScale=1;
-                  values.middleArrowType='circle';
-                  this_.expressionsInfoShow=true;
-                }
-              },
-            },
-          },
-          layout:{
-            randomSeed: 666,
-          },
-          physics: { //计算节点之前斥力，进行自动排列的属性
-            enabled: false, //默认是true，设置为false后，节点将不会自动改变，拖动谁谁动。不影响其他的节点
-            barnesHut: {
-              gravitationalConstant: -4000,
-              centralGravity: 0.3,
-              springLength: 120,
-              springConstant: 0.04,
-              damping: 0.09,
-              avoidOverlap: 0
-            }
-          },
-
-          interaction:{
-            dragNodes: true, //是否能拖动节点
-            dragView: true, //是否能拖动画布
-            hover: true, //鼠标移过后加粗该节点和连接线
-            multiselect: false, //按 ctrl 多选
-            selectable: true, //是否可以点击选择
-            selectConnectedEdges: false, //选择节点后是否显示连接线
-            hoverConnectedEdges: true, //鼠标滑动节点后是否显示连接线
-            zoomView: true, //是否能缩放画布
-            navigationButtons:true,
-          },
-
-          manipulation: {  //该属性表示可以编辑，出现编辑操作按钮
-            enabled: false,
-          },
-        };
-        this_.network = new Vis.Network(this_.container, this_.data, this_.options);
-        this_.network.moveTo({
-          position: this_.viewsCenter,
-          scale: this_.zoom,
-          offset: {x:0, y:0},
-        });
-        this_.containerCanvas=document.querySelectorAll("#network_id canvas")[0];
-        this_.modelTopUpdate();
-        this_.canvas=document.getElementsByTagName('canvas')[0];
-      },
-      resetAllNodes() {
-        this.setNetworkData(this.nodesArray,this.edgesArray);
-      },
-      resetAllNodesStabilize() {
-        let this_ = this;
-        this_.resetAllNodes();
-        this_.network.stabilize();
-      },
-      setData(){
-        this.setNetworkData(this.nodesArray,this.edgesArray);
-      },
-      setNetworkData(nodes,edges,flag){//动态设置拓扑图数据
-        let this_ = this;
-        this.nodes = new Vis.DataSet(nodes);
-        this.edges = new Vis.DataSet(edges);
-        this.network.setData({
-          nodes: this_.nodes,
-          edges: this_.edges
-        });
-        this_.network.moveTo({
-          position: this_.viewsCenter,
-          scale: this_.zoom,
-          offset: {x:0, y:0},
-        });
-        if(!flag){
-          this.$nextTick(()=>{
-            this_.modelTopUpdate();
-            this_.arrayDiff();
-            this_.popDataShowUpdate();
-          })
-        }else{
-          this.$nextTick(()=>{
-            this.modelTopUpdate();
-          })
-        }
-      },
-      addModel(model){ // 添加model
-        this.addNodeShow=false;
-        if(!model){return}
-        let nodesArray=[...this.nodesArray];
-        if(!this.isNodeAdd){
-          model={...nodesArray.find(item=>item.id===this.selNodeId),...model};
-          nodesArray=nodesArray.filter(item=>item.id!==this.selNodeId);
-        }else{
-          model={...model,...this.network.DOMtoCanvas({x:80,y:100})};
-        }
-        this.edgesArray.forEach(item=>{
-          if(item.from===this.selNodeId){
-            item.from=model.id;
-          }
-          if(item.to===this.selNodeId){
-            item.to=model.id;
-          }
-        })
-        this.$get('/module/stat',{id:model.id}).then(res=>{
-          model.state=res.data;
-          nodesArray.push(model);
-          this.$emit("setTopologyData",nodesArray,this.edgesArray);
-          this.setNetworkData(nodesArray,this.edgesArray);
-          this.$nextTick(()=>{
-            this.arrayDiff();
-            this.$emit('editVisNetworkChange',true);
-          })
-        });
-      },
-      addModelShow(){ // 显示添加节点弹窗
-        this.addNodeShow=true;
-        this.isNodeAdd=true;
-        this.nodeData={
-          modelId:'',
-          label:'',
-          x:'',
-          y:'',
-          image:'',
-          id:'',
-        }
-      },
-      addLine(edges){ // 添加或者編輯line
-        this.addLineShow=false;
-        if(!edges){return}
-        let edgesArray =[...this.edgesArray];
-       if(!this.isLineAdd){
-         edges={...edgesArray.find(item=>item.id===edges.id),...edges};
-         edgesArray=edgesArray.filter(item=>item.id!==edges.id);
-       }else{
-         edges.from=this.NodeArr[0];
-         edges.to=this.NodeArr[1];
-       }
-       edgesArray.push(edges);
-        this.$emit("setTopologyData",this.nodesArray,edgesArray);
-        this.setNetworkData(this.nodesArray,edgesArray);
-        this.NodeArr=[];
-        this.NodeArrShow=false;
-      },
-      addLineTitleShow(){ // 显示添加线弹窗
-        // this.addLineShow=true;
-        this.selectNodeTitle=true;
-        this.NodeArrShow=true;
-      },
-      closeAddLine(){
-        this.selectNodeTitle=false;
-        this.addLineShow=false;
-        this.NodeArr=[];
-        this.NodeArrShow=false;
-        this.network.unselectAll();
-      },
-      closeAddNode(){
-        this.addNodeShow=false;
-        this.arrayDiff();
-      },
-      setNodePosition(selId){ // 移动节点后 设置节点坐标
-        let position = this.network.getPositions([selId]);
-        let selItem = this.nodesArray.find((item)=>item.id===selId);
-        this.nodeData = selItem;
-        selItem.x=position[selId].x;
-        selItem.y=position[selId].y;
-        this.$emit("setTopologyData",this.nodesArray,this.edgesArray);
-      },
-      setPopPosition(selId){//设置节点工具栏位置以及是否显示
-        if(!selId){return}
-        let position=this.network.canvasToDOM(this.network.getPositions([selId])[selId]);
-        this.networkPopShow=false;
-        setTimeout(()=>{
-          this.networkPop.style.top = position.y - 85 + 85*(1-this.zoom)+'px';
-          this.networkPop.style.left = position.x - 32*this.zoom - 4.8*(1-this.zoom) +'px';
-        },150)
-        if(this.NodeArr.length===0&&!this.editVisNetwork){
-          setTimeout(()=>{
-            this.networkPopShow=true;
-            let index=this.modelTop.findIndex((item)=>item.id===selId);
-            this.activeIndex=index;
-            this.activeModelItem=this.modelTop.find((item)=>item.id===selId);
-            this.index=index;
-          },100)
-        }
-        this.NodeArr=[...this.NodeArr]
-      },
-      networkPopClose(flag){//关闭节点工具栏
-        this.networkPopShow=false;
-        // this.selNodeId=''
-        if(this.network&&!flag){
-          this.network.unselectAll();
-        }
-      },
-      //工具栏
-      nodeDel(){
-        let nodesArray=this.nodesArray.filter((item)=>item.id!==this.selNodeId);
-        let edgesArray=this.edgesArray.filter((item)=>!(item.from===this.selNodeId || item.to===this.selNodeId));
-        this.selNodeId='';
-        this.$emit('setTopologyData',nodesArray, edgesArray);
-        this.setNetworkData(nodesArray, edgesArray);
-        this.networkPopClose();
-        this.arrayDiff();
-      },
-      nodeEdit(){
-        this.moduleDataS.module.push(this.allModuleInfos.module.find(item=>item.id===this.selNodeId));
-        this.addNodeShow=true;
-        this.isNodeAdd=false;
-      },
-      lineDel(){
-        if(!this.lineData.id){return}
-        let edgesArray=this.edgesArray.filter((item)=>item.id!==this.lineData.id);
-        this.$emit('setTopologyData',this.nodesArray, edgesArray);
-        this.setNetworkData(this.nodesArray,edgesArray);
-      },
-
-      // 工具的点击 对应的操作
-      popClick(id){
-        this.lineData='';
-        this.popDataShowUpdate(id);
-      },
-      modelTopUpdate(){//model上的图标 实时更新
-        this.modelTop=[];
-        this.nodesArray.forEach((item)=>{
-          let position=this.network.canvasToDOM({x:item.x,y:item.y});
-          let obj={
-            show:true,
-            x:position.x,
-            y:position.y,
-            id:item.id,
-            error:false,
-            assetError:false,
-            alertError:false,
-            endpointError:false,
-            state:item.state,
-          };
-          if(item.state){
-            if(item.state.assetStat.down>0){
-              obj.error=true;
-              obj.assetError=true;
-            }
-            if(item.state.endpointStat.down>0){
-              obj.error=true;
-              obj.endpointError=true;
-            }
-            if(item.state.alertStat.P1> 0 || item.state.alertStat.P3>0 || item.state.alertStat.P2>0){
-              obj.error=true;
-              obj.alertError=true;
-            }
-          }
-          this.modelTop.push(obj);
-        })
-      },
-      selNodeArrUpdate(){// 选中框位置更新
-        this.NodeArr.forEach((id,index)=>{
-          let selNode = this.nodesArray.find(item=>item.id===id);
-          let position=this.network.canvasToDOM({x:selNode.x,y:selNode.y});
-          document.getElementById('nodeArr'+(index+1)).style.top=position.y+'px';
-          document.getElementById('nodeArr'+(index+1)).style.left=position.x+'px';
-        })
-      },
-      modelTopMouseDown(e){
-        if(!this.index&&this.index!==0){return}
-        this.relativeModelTop={
-          x:e.clientX-(parseFloat(this.$refs['modelTopId'+this.index][0].style.left)),
-          y:e.clientY-(parseFloat(this.$refs['modelTopId'+this.index][0].style.top)),
-        };
-        this.$refs['network'].addEventListener('mousemove',this.modelTopMouseMove);
-      },
-      modelTopMouseUp(){
-        this.index='';
-        this.relativeModelTop={};
-        this.$refs['network'].removeEventListener('mousemove',this.modelTopMouseMove);
-      },
-      modelTopMouseMove(e){
-        let position={
-          x:e.clientX-this.relativeModelTop.x,
-          y:e.clientY-this.relativeModelTop.y
-        };
-        // this.$refs['modelTopId'+this.index][0].style.top=position.y+'px';
-        // this.$refs['modelTopId'+this.index][0].style.left=position.x+'px';
-        // // {top:(item.y- 80 + 5*(10-zoom*10))+'px',left:(item.x-26)+'px'
-        // let cancvs=this.network.DOMtoCanvas({
-        //   x:position.x+26-5*(1-this.zoom),
-        //   y:position.y+80-(50*(1-this.zoom)),
-        // });
-        // this.network.moveNode(this.selNodeId,cancvs.x,cancvs.y);
-        // let selItem = this.nodesArray.find((item)=>item.id===this.selNodeId);
-        // selItem.x=cancvs.x;
-        // selItem.y=cancvs.y;
-        // this.$emit("setTopologyData",this.nodesArray,this.edgesArray);
-        // if(this.networkPopShow){
-        //   this.setPopPosition(this.selNodeId);
-        // }
-      },
-      modelTopMouseMoveEdge(e){
-        e = e || window.event;
-        let position={
-          x:e.layerX,
-          y:e.layerY,
-        };
-        let nodeName=e.path?e.path[0].nodeName:e.target.tagName;
-        if(nodeName!=='CANVAS'){
-          this.expressionsInfoShow=false;
-          this.$refs['network'].removeEventListener('mousemove',this.modelTopMouseMoveEdge);
-          return
-        }
-        this.expressionsInfoPosition={...position};
-      },
-      modelTopClick(item,index){
-        this.activeIndex=index;
-        this.activeModelItem=item;
-        this.index=index;
-        this.selNodeId=item.id;
-        if(this.selNodeId){
-          this.setPopPosition(this.selNodeId);
-          this.popDataShowUpdate('main');
-          this.network.selectNodes([this.selNodeId]);
-        }
-      },
-      // 数组取差集
-      arrayDiff(){
-        // this.moduleDataS=this.allModuleInfos-this.nodesArray
-        this.moduleDataS={...this.allModuleInfos};
-        this.nodesArray.forEach((item)=>{
-          if(this.moduleDataS.module){
-            this.moduleDataS.module=this.moduleDataS.module.filter((item1)=> item.id!==item1.id)
-          }
-        })
-      },
-      //工具栏点击后显示对应内容
-      popDataShowUpdate(key,flag){//key 显示对应的弹窗 flag是否不显示工具栏
-        this.popDataShow={
-          endpoint:false,
-          asset:false,
-          total:false,
-          other:false,
-          info:false,
-          alert:false,
-          main:false,
-        };
-        if(key&&!this.editVisNetwork){
-          if(key==='total'&&this.selNodeId){
-            this.totalId=this.selNodeId;
-            this.totalArray=this.nodesArray;
-          }
-          if(key==='total'&&this.lineData){
-            this.totalId=this.lineData.id;
-            this.totalArray=this.edgesArray;
-          }
-          this.$nextTick(()=>{
-            this.popDataShow[key]=true;
-          })
-        }
-        if(flag){ // 处理关闭后 缩放后显示工具按钮的问题
-          this.selNodeId='';
-        }
-        if(key==='asset' || key==='alert' || key==='endpoint'){
-          this.networkPopShow=false;
-          // this.selNodeId='';
-          // this.setPopPosition(this.selNodeId);
-        }
-      },
-      topologyZoom(scale){
-        if(scale<0.1){//每次缩小0.1 保证缩放大于0
-          scale=0.1;
-        }
-        if(scale>3){
-          scale=3;
-        }
-        this.zoom=scale;
-        this.network.moveTo({
-          position: this.viewsCenter,
-          scale: this.zoom,
-          offset: {x:0, y:0},
-        });
-        this.$nextTick(()=>{
-          this.modelTopUpdate();
-          if(this.networkPopShow){
-            this.setPopPosition(this.selNodeId);
-          }
-          this.popDataShowUpdate();
-        })
-      },
-      //拓扑图放大缩小
-      zoomChange(num){
-        this.zoom+=num;
-        if(this.zoom<0.1){//每次缩小0.1 保证缩放大于0
-          this.zoom=0.1;
-        }
-        if(this.zoom>3){
-          this.zoom=3;
-        }
-        this.network.moveTo({
-          position: this.viewsCenter,
-          scale: this.zoom,
-          offset: {x:0, y:0},
-        });
-        this.$nextTick(()=>{
-          this.modelTopUpdate();
-          this.setPopPosition(this.selNodeId);
-          this.popDataShowUpdate();
-        })
-      },
-      selpopIs(item){//判断是否有图表
-        let flag=true;
-        if(item.id==='other'){
-          flag=false;
-        }
-        this.nodeData=this.nodesArray.find((item)=>item.id===this.selNodeId);
-        if(item.id==='total'&&(!this.nodeData.expressions || this.nodeData.expressions.length===0)){
-          flag=false;
-        }
-        return flag
-      },
-      modelPopError(item){
-        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;
-      },
-      topologyReset(){//重置topology默认数据
-        this.index='';
-        this.activeIndex='';
-        this.selNodeId='';
-        this.NodeArr=[];
-      },
-      qqq(){
-        let nodesArray=[...this.nodesArray];
-        let edgesArray=[...this.edgesArray];
-        this.edgesArray.forEach((item)=>{
-         if(item.dataFlow==='right'&&item.dashes){
-           if(item.dashes[0]!==0){
-             item.dashes[0]--;
-           }else if(item.dashes[1]!==0){
-             item.dashes[1]--;
-           }else{
-             item.dashes[0]=item.dashes[2];
-             item.dashes[1]=item.dashes[2];
-           }
-         }else if(item.dataFlow==='left'&&item.dashes){
-           if(item.dashes[1]!==item.dashes[2]){
-             item.dashes[1]++;
-           }else if(item.dashes[0]!==item.dashes[2]){
-             item.dashes[0]++;
-           }else{
-             item.dashes[0]=0;
-             item.dashes[1]=0;
-           }
-         }
-        });
-        this.selNodeId='';
-        this.$emit('setTopologyData',nodesArray, edgesArray);
-        this.setNetworkData(nodesArray, edgesArray,true);
-      },
-    },
-    mounted(){
-      // this.timeInterval=setInterval(()=>{
-      //   this.qqq();
-      // },300);
-       setTimeout(()=>{
-         let this_=this;
-         this.init('modal');
-         this.network.on("click", function (params) {
-           this_.activeIndex='';
-           this_.networkPopClose();
-           this_.network.selectNodes([]);
-           if(!params.edges.length&&!params.nodes.length){
-             this_.popDataShowUpdate('');
-           }
-           let selId=params.nodes[0];
-           // if(this_.selNodeId&& this_.selNodeId===selId){return;}
-           if(selId){
-             this_.selNodeId=selId;
-           }else{
-             this_.selNodeId='';
-           }
-         });
-
-         this.network.on("selectNode", function (params) { //选择节点
-           let selId=params.nodes[0];
-           if(this_.selNodeId&& this_.selNodeId===selId){
-             if(selId){
-               this_.cursorMove=true;
-               if(this_.NodeArr.indexOf(selId)!==-1){
-                 let index = this_.NodeArr.indexOf(selId);
-                 this_.NodeArr=this_.NodeArr.filter((item,i)=> i !== index);
-                 return
-               }
-               if(this_.selectNodeTitle&&this_.NodeArrShow){
-                 this_.NodeArr.push(selId);
-                 this_.network.selectNodes(this_.NodeArr,true);
-                 return
-               }
-               if(this_.NodeArr.length===0&&this_.editVisNetwork){
-                 this_.nodeEdit();
-               }
-               this_.setPopPosition(selId,params);
-             }
-           }else{
-             if(selId){
-               this_.selNodeId=selId;
-               this_.cursorMove=true;
-               this_.nodeData=this_.nodesArray.find((item)=>item.id===selId);
-               if(this_.NodeArr.indexOf(selId)!==-1){
-                 let index = this_.NodeArr.indexOf(selId);
-                 this_.NodeArr=this_.NodeArr.filter((item,i)=> i !== index);
-                 return
-               }
-               if(this_.selectNodeTitle&&this_.NodeArrShow){
-                 this_.NodeArr.push(selId);
-                 this_.network.selectNodes(this_.NodeArr,true);
-                 return
-               }
-               if(this_.NodeArr.length===0&&this_.editVisNetwork){
-                 this_.nodeEdit();
-               }
-               this_.setPopPosition(selId,params);
-               this_.popDataShowUpdate('main');
-             }
-           }
-         });
-
-         this.network.on("selectEdge", function (params) { // 选择边
-           this_.selNodeId='';
-           this_.lineData=this_.edgesArray.find((item)=>item.id===params.edges[0]);
-          if(this_.editVisNetwork){
-            this_.lineData.color=this_.lineData.color.color?this_.lineData.color.color:this_.lineData.color;
-            this_.addLineShow=true;
-            this_.isLineAdd=false;
-          }
-          if(!this_.editVisNetwork){
-            if(this_.lineData.expressions&&this_.lineData.expressions.length){
-              this_.expressionsInfoShow=false;
-              this_.popDataShowUpdate('total')
-            }else{
-              this_.popDataShowUpdate()
-            }
-          }
-           // this_.lineData.color=this_.lineData.color.color;
-           // this_.addLineShow=true;
-         });
-
-         this.network.on("hoverEdge", function (params) { // 悬停边
-           this_.hoverEdge=true;
-           this_.cursorMove=true;
-           this_.lineId=params.edge;
-           this_.$refs['network'].addEventListener('mousemove',this_.modelTopMouseMoveEdge);
-         });
-
-         this.network.on("blurEdge", function (params) { // 边失去焦点
-           this_.hoverEdge=false;
-           this_.cursorMove=false;
-           this_.expressionsInfoShow=false;
-           this_.lineId='';
-           this_.$refs['network'].removeEventListener('mousemove',this_.modelTopMouseMoveEdge);
-
-         });
-
-         this.network.on("dragStart", function (params) {//节点移动开始
-           this_.NodeArrShow=false;
-           this_.networkPopShow=false;
-           this_.index='';
-           this_.activeIndex='';
-           let selId=params.nodes[0];
-           if(selId){
-             this_.selNodeId=selId
-           }
-           // if(!selId){
-           //   this_.modelTop.forEach(item=>{
-           //     item.show=false;
-           //   })
-           // }
-         });
-
-         this.network.on("dragging", function () {//节点移动中
-           this_.viewsCenter=this_.network.getViewPosition();
-           // let selId=params.nodes[0];
-           if(this_.selNodeId){
-             this_.setNodePosition(this_.selNodeId)
-           }
-           if(this_.selNodeId&&this_.networkPopShow){
-             this_.setPopPosition(this_.selNodeId);
-           }
-           if(this_.NodeArr.length>0){
-             this_.NodeArrShow=true;
-           }
-           this_.modelTopUpdate();
-           this_.selNodeArrUpdate();
-         });
-
-         this.network.on("dragEnd", function () {//节点移动结束
-           this_.viewsCenter=this_.network.getViewPosition();
-           if(this_.selNodeId){
-             this_.setNodePosition(this_.selNodeId)
-           }
-           if(this_.selNodeId&&this_.networkPopShow){
-             this_.setPopPosition(this_.selNodeId);
-           }
-           if(this_.NodeArr.length>0){
-             this_.NodeArrShow=true;
-           }
-           if(!this_.networkPopShow){
-             this_.selNodeId=''
-           }
-           this_.modelTopUpdate();
-           this_.selNodeArrUpdate();
-         });
-
-         this.network.on("hoverNode", function () {//hoverNode
-           this_.cursorMove=true;
-         });
-
-         this.network.on("blurNode", function () {//blurNode
-           this_.cursorMove=false;
-         });
-
-         this.network.on("zoom", function (params) {//检测缩放
-           this_.zoom=params.scale;
-           this_.modelTopUpdate();
-           this_.selNodeArrUpdate();
-           this_.networkPopShow=false;
-           this_.topologyZoom(params.scale);
-           return false
-         });
-
-         this.network.on("resize", function (params) {//检测resize
-           setTimeout(()=>{
-             this_.zoom=this_.network.canvasToDOM({x:0,y:1}).y-this_.network.canvasToDOM({x:0,y:0}).y;
-             this_.modelTopUpdate();
-             this_.selNodeArrUpdate();
-             this_.networkPopShow=false;
-           });
-           return false
-         });
-       })
-    },
-    beforeDestroy() {
-		  this.network.off('click');
-		  this.network.off('selectNode');
-		  this.network.off('selectEdge');
-		  this.network.off('hoverEdge');
-		  this.network.off('blurEdge');
-		  this.network.off('dragStart');
-		  this.network.off('dragging');
-		  this.network.off('dragEnd');
-		  this.network.off('blurNode');
-		  this.network.off('zoom');
-		  this.network.off('resize');
-      this.network=null;
-    },
-	}
-</script>
-
-<style scoped>
-  .content{
-    height: 100%;
-  }
-  .edit-topology{
-    width: 100%;
-    height: 28px;
-  }
-  .network{
-    display: flex;
-    height: calc(100% - 30px);
-    position: relative;
-    overflow: hidden;
-  }
-  .network-pop{
-    position: absolute;
-    z-index: 0;
-    /*border: 1px solid #e6e6e6;*/
-    border-radius: 5px;
-    height: 32px;
-    /*background: #fff;*/
-    padding: 0 3px;
-    line-height: 32px;
-
-  }
-  .network-pop .nz-icon-hexagonBorder{
-    position: absolute;
-    font-size: 48px;
-    color: #84d5c2;
-  }
-  .network-pop .nz-icon-hexagonBorder.error-model-stat{
-    color: #F5BAAC;
-  }
-  .network-pop .nz-icon-hexagonBorder.error-model-stat:hover{
-    color: #EC7F66;
-  }
-  .network-pop  .nz-icon-liubianxing{
-    color:#e2f3ef;
-    font-size: 44px;
-    position: absolute;
-    top: 1px;
-    left: 2px;
-    transform: scale(1.02);
-    z-index: -1;
-  }
-  .network-pop .error-model-stat .nz-icon-liubianxing{
-    color: #FADED7 ;
-  }
-  .network-pop .nz-icon.noMove{
-    position: absolute;
-    top: 0;
-    left: 14px;
-    font-size: 20px;
-    color: #27c09c;
-  }
-  .network-pop .error-model-stat .nz-icon.noMove{
-    color: #EC7F66;
-  }
-  .network-pop .selpop.nz-icon-hexagonBorder:hover{
-    transform: scale(1.1);
-    color: #4BB49B;
-  }
-  .network-pop .selpop:hover .nz-icon-liubianxing{
-    transform: scale(1.1);
-    left: 4px;
-    font-size: 41px;
-    top: 0;
-    color:  #D7FAF1;
-  }
-  .network-pop .selpop:hover .noMove{
-    transform: scale(1.1);
-    color: #4BB49B;
-  }
-  .network-pop .selpop.nz-icon-hexagonBorder.error-model-stat:hover{
-    transform: scale(1.1);
-    color: #EC7F66;
-  }
-  .network-pop .selpop.error-model-stat:hover .nz-icon-liubianxing{
-    transform: scale(1.1);
-    left: 4px;
-    font-size: 41px;
-    top: 0;
-    color: #FBE7E3;
-  }
-  .network-pop .selpop.error-model-stat:hover .noMove{
-    transform: scale(1.1);
-    color: #EC7F66;
-  }
-  .network-pop .no-selPop{
-    color: #999;
-  }
-  .network-pop .no-selPop .nz-icon-liubianxing{
-    color: rgb(218,218,218);
-  }
-  .network-pop .no-selPop .nz-icon-chart{
-    color: #999;
-  }
-  /*.network-pop .nz-icon-hexagonBorder.error-model-stat:hover{*/
-    /*color: #EC7F66;*/
-  /*}*/
-  /*.btmTriangle{*/
-    /*position: absolute;*/
-    /*width: 0;*/
-    /*height: 0;*/
-    /*border-width: 10px;*/
-    /*border-style: solid;*/
-    /*border-color:#e6e6e6 transparent transparent transparent;*/
-    /*bottom: -20px;*/
-    /*left: 50%;*/
-    /*transform: translateX(-50%);*/
-  /*}*/
-  /*.btmTriangle:after{*/
-    /*content: '';*/
-    /*display:block;*/
-    /*width:0;*/
-    /*height:0;*/
-    /*border-width: 10px;*/
-    /*border-style:solid;*/
-    /*border-color:#fff transparent  transparent transparent;*/
-    /*position:absolute;*/
-    /*bottom: -7px;*/
-    /*left: -9px;*/
-  /*}*/
-  #network_id,.network-null{
-    width: 100%;
-    height: 100%;
-  }
-  .network-null{
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    position: absolute;
-  }
-  .network-null .nz-icon-create-square{
-    color: #23BF9A;
-    font-size: 50px;
-    margin-bottom: 24px;
-    cursor: pointer;
-  }
-  .cursorMove{
-    cursor: move;
-  }
-  #network_id2{
-    height: 100%;
-  }
-  .networkContent{
-    width: 40%;
-  }
-  .nz-icon-delete{
-    cursor: pointer;
-    color: #ee6723;
-    margin-left: 10px;
-  }
-  .nz-icon-edit{
-    font-size: 14px;
-    cursor: pointer;
-  }
-  .edit-topology{
-    color: #1a1a1a;
-    font-size: 14px;
-    /*font-weight: bold;*/
-    height: 28px;
-    position: absolute;
-    top: 15px;
-    width: calc(100% - 160px);
-    z-index: 10;
-  }
-  .edit-topology-module,.edit-topology-line-cancel{
-    margin-left: 30px;
-  }
-  .edit-topologyLine{
-    margin-left: 60px;
-  }
-  .edit-topology-add,.edit-topology-remove,.edit-topologyCancel{
-    color: #1989fa;
-    margin-left: 30px;
-    cursor: pointer;
-  }
-  .edit-topology-add{
-    display: inline-block;
-    width: 36px;
-  }
-  .edit-topology-add:hover,.edit-topology-remove:active,.edit-topologyCancel:hover{
-    font-weight: bold;
-  }
-  .sel-node{
-    position: absolute;
-    width: 0;
-    height: 0;
-  }
-  .sel-node-top {
-    width: 120px;
-    height: 0;
-    border-top: 4px dashed #FF8C0A;
-    position: absolute;
-    left: -60px;
-    top: -60px;
-  }
-  .sel-node-right {
-    width: 0;
-    height: 120px;
-    border-right: 4px dashed #FF8C0A;
-    position: absolute;
-    left: 60px;
-    top: -60px;
-  }
-  .sel-node-bottom {
-    width: 120px;
-    height: 0;
-    border-bottom: 4px dashed #FF8C0A;
-    position: absolute;
-    left: -60px;
-    top: 60px;
-  }
-  .sel-node-left {
-    width: 0;
-    height: 120px;
-    border-left: 4px dashed #FF8C0A;
-    position: absolute;
-    left: -60px;
-    top: -60px;
-  }
-  @keyframes model-error-animation{
-    0%   {
-      transform: scale(0.7);
-    }
-    50%   {
-      transform: scale(1);
-    }
-    100% {
-      transform: scale(0.7);
-    }
-  }
-  @keyframes model-icon-animation{
-    0%   {
-      transform: scale(1.2) translateX(1px);
-    }
-    50%   {
-      transform: scale(0.9) translateX(0px);
-    }
-    100% {
-      transform: scale(1.2) translateX(1px);
-    }
-  }
-  .nz-icon-shuidi{
-    position: absolute;
-    font-size: 48px;
-    color: rgba(190,233,222,0.45);
-    border-radius: 50%;
-    height: 60px;
-    width: 38px;
-  }
-  .model-error.nz-icon-shuidi{
-    color: #FADED7 ;
-    animation: model-error-animation .6s infinite ease-in-out;
-    animation-direction:normal;
-  }
-  .model-error-active.nz-icon-shuidi{
-    color: #FADED7 ;
-  }
-  .nz-icon-model{
-    color: #23BF9A;
-    position: absolute;
-    top: 17px;
-    left: 15px;
-    font-size: 18px;
-  }
-  .model-error .nz-icon-model{
-    color: #EC7F66;
-    animation: model-icon-animation .6s infinite ease-in-out;
-    animation-direction:normal;
-  }
-  .model-error-active .nz-icon-model{
-    color: #EC7F66;
-  }
-  .network-info{
-    position: absolute;
-    right: 0;
-    top: 50px;
-  }
-  .saveTopology{
-    background-image: linear-gradient(180deg, #F5B93E 0%, #EE9D3F 100%);
-    border-radius: 4px;
-    font-size: 14px;
-    color: #FFFFFF;
-    padding: 4px 14px;
-  }
-  .cancelTopology{
-    background-image: linear-gradient(180deg, #F0F0F0 0%, #D8D8D8 99%);
-    border-radius: 4px;
-    font-size: 14px;
-    color: #333333;
-    padding: 4px 14px;
-  }
-  .network-zoom{
-    position: absolute;
-    bottom: 15px;
-    right: 15px;
-    opacity: 0.42;
-    background: #FFFFFF;
-    border: 1px solid #E7EAED;
-    box-shadow: -1px 1px 9px -1px rgba(205,205,205,0.77);
-  }
-  .zoom-icon{
-    font-size: 24px;
-    color: #999999;
-  }
-  .network-zoom .zoom-box:first-child{
-    border-bottom: 1px solid rgba(0,0,0,0.7);
-    border-radius: 4px 4px 0 0;
-    padding: 5px;
-  }
-  .network-zoom .zoom-box:last-child{
-    border-radius:  0 0 4px 4px;
-    padding: 5px;
-  }
-  #network_id /deep/ .vis-network{
-    outline: none;
-  }
-  .scaleTool-enter-active {
-    animation: scaleTool-in .15s;
-  }
-  .scaleTool-leave-active {
-    animation: scaleTool-in .15s reverse;
-  }
-  @keyframes scaleTool-in {
-    from{
-      top:18px;
-      left: 10px;
-      transform: scale(0.5);
-    }
-  }
-</style>
diff --git a/nezha-fronted/src/components/common/project/topologyL5.vue b/nezha-fronted/src/components/common/project/topologyL5.vue
index 5aecf38e0..96b500b64 100644
--- a/nezha-fronted/src/components/common/project/topologyL5.vue
+++ b/nezha-fronted/src/components/common/project/topologyL5.vue
@@ -209,7 +209,7 @@
         <i
           :class="{'nz-icon':true, 'nz-icon-shuidi':true,'model-error':item.data.error&&!item.data.show,'model-error-active':item.data.error&&item.data.show}"
           :ref="'modelTopId'+index"
-          @click="showNodeTools(index)"
+          @click="showNodeTools(index,item)"
         >
           <i class="nz-icon nz-icon-model"></i>
         </i>
@@ -250,12 +250,13 @@
       <div v-if="popDataShow.main">
         <popDataMain :moduleId="moduleId" :projectId="projectInfo.id"></popDataMain>
       </div>
-      <div v-if="popDataShow.total">
-        <total-chart :moduleId="moduleId" :projectId="projectInfo.id" :nodesArray="totalArray"></total-chart>
-      </div>
       <div v-if="popDataShow.info">
         <popDataInfo :moduleId="moduleId" :projectId="projectInfo.id"></popDataInfo>
       </div>
+      <!--chart-->
+      <div v-if="popDataShow.total">
+        <topoTooltip :chartDataParent="chartData" :filterTime="filterTime" :isChart="true"/>
+      </div>
     </div>
     <!--endpoint-->
     <transition name="right-box">
@@ -278,17 +279,18 @@
     <!--preview-->
     <el-dialog
       :visible.sync="previewShow"
-      width=""
+      :width="'80%'"
+      :before-close="previewBeforeClose"
     >
-      <div style="width: calc(50vw - 40px);height: 50vh">
-        <topologyL5
+      <div style="width: calc(80vw - 40px);height: 80vh">
+        <topologyPrev
           v-if="previewShow"
           :obj="obj"
           :topoPrevDataS="topoPrevData"
           :fromOverView="true"
           :fromPrev="true"
           :topologyIndexF="1">
-        </topologyL5>
+        </topologyPrev>
       </div>
     </el-dialog>
   </div>
@@ -330,7 +332,7 @@
   import topoTooltip from "./L5/topoTooltip";
   import {getMetricTypeValue} from '../js/tools'
   import bus from "../../../libs/bus";
-  import topologyL5 from './topologyL5'
+  import topologyPrev from './topologyPrev'
   import axios from 'axios';
 
   const canvasOptions={
@@ -456,7 +458,7 @@
       endpointTable,
       ExpressionInfo,
       topoTooltip,
-      topologyL5,
+      topologyPrev,
     },
     computed:{},
     props:{
@@ -484,9 +486,9 @@
     watch:{
       topologyIndexF:{
         immediate:true,
-        deep:true,
         handler(n){
-          this.topologyIndex=n
+          this.topologyIndex=n;
+          console.log(n,this.fromPrev);
         }
       },
       obj:{
@@ -562,7 +564,6 @@
             let endTime=this.filterTime[1];
             let startTime=this.filterTime[0];
             let step=bus.getStep(startTime,endTime);
-            console.log(data);
             data.pens&&data.pens.forEach((item,index)=>{
               this.chartGetData.push({id:item.id,res:[]});
               let arr=item.data.expressArr.map((ele)=>{
@@ -631,7 +632,6 @@
             let endTime=this.filterTime[1];
             let startTime=this.filterTime[0];
             let step=bus.getStep(startTime,endTime);
-            console.log(data);
             data.pens&&data.pens.forEach((item,index)=>{
               this.chartGetData.push({id:item.id,res:[]});
               let arr=item.data.expressArr.map((ele)=>{
@@ -650,6 +650,30 @@
             Promise.all(promiseArr).then((res)=>{
               getTopology(this.topologyIndex).open(data);
               getTopology(this.topologyIndex).lock(1);
+              if(this.fromOverView){
+                let flag=false;
+
+                let position={
+                  x:this.$refs['topology-canvas'+this.topologyIndexF].offsetWidth,
+                  y:this.$refs['topology-canvas'+this.topologyIndexF].offsetHeight,
+                }
+
+                getTopology(this.topologyIndex).centerView(50);
+                getTopology(this.topologyIndex).data.pens.forEach(item=>{
+                  if(flag){
+                    return
+                  }
+                  if(item.rect.x>position.x || item.rect.y>position.y){
+                    getTopology(this.topologyIndex).fitView(50);
+                    flag=true
+                  }
+                });
+                // if(this.fromPrev){
+                //   getTopology(this.topologyIndex).scaleTo(data.scale/2)
+                // }
+                // getTopology(this.topologyIndex).fitView();
+                this.getNodesArr();
+              }
             });
           })
         });
@@ -697,7 +721,6 @@
                 }
                 clearInterval(timer);
                 data.pens.forEach((item=>{
-                  console.log(item,this.iconArray.find(item1=>item1.id==item.imageId))
                   if(item.type===0&&item.data.imageId){
                     item.image=this.iconArray.find(item1=>item1.id==item.data.imageId).image
                   }
@@ -743,8 +766,6 @@
           })
         }
         
-        console.log(maxLevel)
-        
         if(maxLevel!==0){
           if(pen.type===0){// 判断valueMapping 给相应的状态
             let selLevel=pen.data.valueMapping.find(item=>item.level===maxLevel);
@@ -765,7 +786,6 @@
           if(pen.type===0&&pen.animatePlay){// 判断valueMapping 给相应的状态
             onChangeAnimate(pen,pen.animateType);
           }else if(pen.type===1&&pen.animatePlay){// 判断valueMapping 给相应的状态
-            console.log(123123123);
             onChangeAnimateLine(pen,pen.animateType);
           }
         }
@@ -925,7 +945,8 @@
       },
 
       //显示module的工具
-      showNodeTools(index){
+      showNodeTools(index,pen){
+        console.log(pen);
         this.nodesArr.forEach((item,i)=>{
           item.data.show=i===index;
         })
@@ -1198,6 +1219,7 @@
               }
               break;
             case 'resize':
+              console.log(this.topologyIndexF);
               let domRect=document.getElementById('topology-canvas'+this.topologyIndexF).getBoundingClientRect();
               this.toolShow.attrCord=[domRect.width-350,0];
               this.toolShow.height=domRect.height;
@@ -1236,8 +1258,10 @@
             case 'line':
             case 'space':
             case 'scale':
+            case 'translate':
               this.moduleId='';
               this.showNodeTools('');
+              this.popDataShowUpdate('',false)
               break;
           }
           switch(event){
@@ -1397,7 +1421,6 @@
               })
               item.image=res2[index];
             });
-            console.log(this.iconArray);
             this.imgInit=true;
           })
 
@@ -1594,6 +1617,11 @@
           default:
             return 1;
         }
+      },
+      previewBeforeClose(done){
+        console.log(123123123123);
+        this.$emit('changeTopologyIndexF');
+        done();
       }
     },
     destroyed(){
@@ -1859,7 +1887,7 @@
     position: absolute;
     top: 1px;
     left: 2px;
-    transform: scale(0.9);
+    transform: scale(0.95);
     z-index: 0;
   }
 
diff --git a/nezha-fronted/src/components/common/project/topologyPrev.vue b/nezha-fronted/src/components/common/project/topologyPrev.vue
new file mode 100644
index 000000000..66deec576
--- /dev/null
+++ b/nezha-fronted/src/components/common/project/topologyPrev.vue
@@ -0,0 +1,2156 @@
+<style>
+  @import "./L5/css/iconfont.css";
+  @import "./L5/css/props.css";
+</style>
+<template>
+  <div class="project-box" v-loading="topologyLoading">
+    <!--project主要信息-->
+    <div class="facade-top" v-if="!editTopologyFlag">
+      <div class="facade-top-left" v-loading="projectInfo.loading" v-if="projectInfoShow&&!fromPrev">
+        <div class="facade-top-title">
+          Project information
+        </div>
+        <div>
+          <!--<span><span class="label">Id :</span>{{projectInfo.id}}</span>-->
+          <span><span class="label">Name :</span>{{projectInfo.name}}</span>
+        </div>
+        <div>
+          <span><span class="label">Description :</span>{{projectInfo.remark?projectInfo.remark:'--'}}</span>
+        </div>
+        <!--<div>-->
+        <!--<span>-->
+        <!--<span class="label">Alert state :</span>-->
+        <!--<div class="active-icon" style="background: #B7464A 100%;"></div>{{projectInfo.alertStat[0]}}-->
+        <!--<div class="active-icon" style="background: #E64E4E 100%;"></div>{{projectInfo.alertStat[1]}}-->
+        <!--<div class="active-icon" style="background: #F7B500 100%;"></div>{{projectInfo.alertStat[2]}}-->
+        <!--</span>-->
+        <!--</div>-->
+        <div>
+          <span><span class="label">Module Num :</span>{{projectInfo.moduleMum}}</span>
+        </div>
+      </div>
+      <div class="facade-top-right" v-loading="projectInfo.loading" v-if="projectAlertShow&&!fromPrev" style="padding: 20px 20px 0 20px;height: calc(100% - 20px);">
+        <div class="facade-top-title">
+          <span class="label" style="padding-left: 0;">Alert :</span>
+          {{projectInfo.total}}
+        </div>
+        <div class="facade-top-right-content">
+          <div>
+            <div class="content-P1-title">
+              {{returnSeverityLabel('P1')}}
+            </div>
+            <div>
+              {{projectInfo.alertStat[0] || 0}}
+            </div>
+          </div>
+          <div>
+            <div class="content-P2-title">
+              {{returnSeverityLabel('P2')}}
+            </div>
+            <div>
+              {{projectInfo.alertStat[1] || 0}}
+            </div>
+          </div>
+          <div style="margin-bottom: 20px;">
+            <div class="content-P3-title">
+              {{returnSeverityLabel('P3')}}
+            </div>
+            <div>
+              {{projectInfo.alertStat[2] || 0}}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="project-title" v-if="showTopTools&&!fromOverView" :style="{'background':editTopologyFlag?'#F6F6F6':'#ffffff','border-bottom':editTopologyFlag? '1px solid #F6F6F6':'' }">
+      <div v-show="editTopologyFlag" class="edit-topologyLine" style="padding-left: 20px">
+        <!--工具栏-->
+        <span 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">
+              <div style="height: 450px">
+                <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">
+                  <el-collapse-item :title="item.group" :name="item.group">
+                    <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>
+                      <span v-if="item.group==='自定义图片'" class="delIcon" @click="delImg(btn)">x</span>
+                    </div>
+                  </el-collapse-item>
+                </el-collapse>
+              </el-card>
+                <el-upload
+                  class="avatar-uploader"
+                  action=" "
+                  :show-file-list="false"
+                  :on-success="handleAvatarSuccess"
+                  :before-upload="beforeAvatarUpload"
+                  :auto-upload="true"
+                  list-type="picture-card"
+                  style="width: 284px;height: 30px"
+                >
+                  <i class="el-icon-plus"></i>
+                  <span>
+                     Upload custom picture
+                  </span>
+                </el-upload>
+              </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" placeholder="请选择" size="small"
+                         :popper-append-to-body="false"
+                         @change="changeTopologyOpt(lineName,'lineName')">
+               <div slot="prefix">
+                <div class="icon-item">
+                  <svg>
+                    <g fill="none" stroke="black" stroke-width="1">
+                      <path
+                        :d="penLineType.find((item,i)=>item.name==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="(lineName==item.name)?'#ee9d3f':'black'" stroke-width="1">
+                    <path :d="item.d" :stroke-dasharray="item['stroke-dasharray']"></path>
+                    </g>
+                    </svg>
+                  </div>
+                </el-option>
+              </el-select>
+            </div>
+          </div>
+
+
+          <topology-top-tool
+            v-if="editTopologyFlag"
+            :selection.sync="props"
+            @del="delPen"
+            :index="topologyIndex"
+            ref="topTool"
+            @toolShowChange="toolShowChange"
+            :cachesIndex="cachesIndex"
+            :toolShow="toolShow">
+          </topology-top-tool>
+
+        </span>
+        <span class="float-right">
+          <button @click="previewTopology" class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new"
+                  style="margin-right: 20px"
+          >
+             {{$t('project.topology.preview')}}
+           </button>
+           <button @click="saveTopology" class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new"
+                   v-has="'project_topo_save'" :disabled="prevent_opt.save"
+                   :class="{'nz-btn-disabled':prevent_opt.save}"
+                   style="margin-right: 20px">
+             {{$t('project.topology.save')}}
+           </button>
+           <button @click="cancelTopology" class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new" style="margin-right: 20px">
+             {{$t('project.topology.exit')}}
+           </button>
+         </span>
+      </div>
+      <span class="edit-topologyLine float-right" style="padding-top: 5px" v-show="!editTopologyFlag">
+        <button @click="editTopology" class="nz-btn nz-btn-size-normal nz-btn-style-light float-right pickTime"
+                style="border-right: 1px solid rgba(162,162,162,0.50);margin-right: 12px" type="button"
+        >
+                  <i class="nz-icon nz-icon-edit" :title="$t('project.topology.edit')"></i>
+        </button>
+                <pick-time v-show="!editTopologyFlag" :showTimePicker="false" class="float-right pickTime"
+                           :refresh-data-func="refreshTopology" v-model="searchTime" :use-chart-unit="false"
+                           ref="pickTime"></pick-time>
+      </span>
+    </div>
+    <div class="page">
+      <!--画布部分-->
+      <div :id="'topology-canvas' + topologyIndexF" class="full" :ref="'topology-canvas'+ topologyIndexF"></div>
+      <!--设置属性-->
+      <div class="props" v-if="editTopologyFlag&&toolShow.attr">
+        <CanvasProps :selection.sync="props"
+                     @change="onUpdateProps"
+                     @animate="animateCanvas"
+                     :index="topologyIndex"
+                     @del="delPen"
+                     :modules="modules"
+                     ref="CanvasProps">
+        </CanvasProps>
+      </div>
+      <!--所有节点上的小图标-->
+      <div v-for="(item,index) in nodesArr"
+           :style="{position: 'absolute',top:item.rect.y - 48+'px',left:item.rect.center.x - 24 +'px'}"
+           v-if="!editTopologyFlag"
+           class="network-pop"
+      >
+
+        <i
+          :class="{'nz-icon':true, 'nz-icon-shuidi':true,'model-error':item.data.error&&!item.data.show,'model-error-active':item.data.error&&item.data.show}"
+          :ref="'modelTopId'+index"
+          @click="showNodeTools(index)"
+        >
+          <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 in popData">
+          <transition name="scaleTool">
+            <i v-if="item.data.show"
+               :class="{'nz-icon':true,'nz-icon-hexagonBorder':true}"
+               :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>
+      <!--节点连线相关的 tooltip-->
+      <div :style="{position:'absolute',top:tooltipPosition.top+'px',left:tooltipPosition.left+'px'}"
+           v-if="tooltipPosition.show&&!editTopologyFlag"
+           @mouseover="tooltipOver"
+           @mouseout="tooltipOut">
+        <topoTooltip :chartDataParent="chartData" :filterTime="filterTime"/>
+      </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>-->
+    <!--悬浮network部分-->
+    <div class="network-info">
+      <div v-if="popDataShow.main">
+        <popDataMain :moduleId="moduleId" :projectId="projectInfo.id"></popDataMain>
+      </div>
+      <div v-if="popDataShow.total">
+        <total-chart :moduleId="moduleId" :projectId="projectInfo.id" :nodesArray="totalArray"></total-chart>
+      </div>
+      <div v-if="popDataShow.info">
+        <popDataInfo :moduleId="moduleId" :projectId="projectInfo.id"></popDataInfo>
+      </div>
+    </div>
+    <!--endpoint-->
+    <transition name="right-box">
+      <endpointTable v-if="popDataShow.endpoint" :moduleId="moduleId" :projectId="projectInfo.id"
+                     @close="popDataShowUpdate('',true)">endpoint
+      </endpointTable>
+    </transition>
+    <!--asset-->
+    <transition name="right-box">
+      <assetTable v-if="popDataShow.asset" :moduleId="moduleId" :projectId="projectInfo.id"
+                  @close="popDataShowUpdate('',true)">alert
+      </assetTable>
+    </transition>
+    <!--alert-->
+    <transition name="right-box">
+      <alertTable v-if="popDataShow.alert" :moduleId="moduleId" :projectId="projectInfo.id"
+                  @close="popDataShowUpdate('',true)">alert
+      </alertTable>
+    </transition>
+    <!--preview-->
+    <el-dialog
+      :visible.sync="previewShow"
+      :width="'80%'"
+      :before-close="previewBeforeClose"
+    >
+      <div style="width: calc(80vw - 40px);height: 80vh">
+        <topologyL5
+          v-if="previewShow"
+          :obj="obj"
+          :topoPrevDataS="topoPrevData"
+          :fromOverView="true"
+          :fromPrev="true"
+          :topologyIndexF="1">
+        </topologyL5>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+  import {Topology,Node,Line,registerNode} from '@topology/core';
+  import * as FileSaver from 'file-saver';
+  import {
+    Tools,
+    canvasRegister,
+    imageTemp,
+    myShape,
+    myAnchors,
+    myIconRect,
+    myTextRect,
+    onChangeAnimate,
+    onChangeAnimateLine,
+    changeImage,
+    myCubec,
+    myCubeAnchors
+  } from './L5/services/canvas.js';
+  // 注册到画布
+  registerNode('rectangleImg',myShape,myAnchors,myIconRect,myTextRect);
+  registerNode('myCube',myCubec,myCubeAnchors,null,null);
+  import {getTopology,setTopology} from "../js/common";
+  import CanvasProps from './L5/CanvasProps';
+  import CanvasContextMenu from './L5//CanvasContextMenu';
+  import topologyTopTool from './L5//topologyTopTool';
+  import VueDraggableResizable from 'vue-draggable-resizable';//api https://github.com/mauricius/vue-draggable-resizable
+  import 'vue-draggable-resizable/dist/VueDraggableResizable.css'
+  import popDataMain from './popData/Main'
+  import popDataInfo from './popData/Info'
+  import TotalChart from "./popData/totalChart";
+  import alertTable from "./popData/alertTable";
+  import assetTable from "./popData/assetTable";
+  import endpointTable from "./popData/endpointTable";
+  import ExpressionInfo from "./popData/expressionInfo";
+  import topoTooltip from "./L5/topoTooltip";
+  import {getMetricTypeValue} from '../js/tools'
+  import bus from "../../../libs/bus";
+  import topologyL5 from './topologyL5'
+  import axios from 'axios';
+
+  const canvasOptions={
+    rotateCursor:'/img/rotate.cur',
+    translateKey:'None',
+    disableEmptyLine:true,
+    autoExpandDistance:0,
+  };
+  let canvas;
+  export default {
+    name:'topologyL5',
+    data(){
+      return {
+        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')
+        ],
+        saveData:{},
+        dataLength:0,
+        editTopologyFlag:false,
+        searchTime:{},
+        activeNames:[],
+        topologyIndex:0,
+        iconArray:[],
+        imgageLoading:false,
+        toolShow:{
+          node:true,
+          attr: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:[],
+        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('project.topology.asset')},
+          {top:'-4px',left:'40px',className:'nz-icon-chart',id:'total',title:this.$t('project.topology.total')},
+          {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:'',
+        tooltipPosition:{
+          top:0,
+          left:0,
+          show:false,
+        },
+        chartData:{},
+        chartGetData:[],
+        penLineType:[
+          {d:'M5 19 a50,100 0 0,1 40,0',"stroke-dasharray":"",name:'curve'},
+          {d:'M5 8 l20 0 l0 12 l20 0',"stroke-dasharray":"",name:'polyline'},
+          {d:'M5 14 l40 0',"stroke-dasharray":"",name:'line'},
+          // {d:'M5 20 C0,8 50,0 85,0',"stroke-dasharray":"",name:'mind'},
+        ],
+        lineName:'curve',
+        cachesIndex:0,
+        projectInfo:{
+          title:'',
+          id:'',
+          remark:'',
+          alertStat:[1,2,3],
+          moduleMum:6,
+          loading:true,
+          total:0,
+        },
+        projectInfoShow:false,
+        projectAlertShow:false,
+        previewShow:false,
+      };
+    },
+    components:{
+      CanvasProps,
+      CanvasContextMenu,
+      topologyTopTool,
+      VueDraggableResizable,
+      popDataMain,
+      popDataInfo,
+      TotalChart,
+      alertTable,
+      assetTable,
+      endpointTable,
+      ExpressionInfo,
+      topoTooltip,
+      topologyL5,
+    },
+    computed:{},
+    props:{
+      topologyIndexF:{
+        type:Number,
+        default:0,
+      },
+      obj:{},
+      showTopTools:{
+        type:Boolean,
+        default:true,
+      },
+      fromOverView:{
+        type:Boolean,
+        default:false,
+      },
+      fromPrev:{
+        type:Boolean,
+        default:false,
+      },
+      topoPrevDataS:{
+
+      },
+    },
+    watch:{
+      topologyIndexF:{
+        immediate:true,
+        handler(n){
+          this.topologyIndex=n;
+          console.log(n,this.fromPrev);
+        }
+      },
+      obj:{
+        deep:true,
+        immediate:true,
+        handler(n){
+          if(n){
+            this.editTopologyFlag=false;
+            this.topologyLoading=true;
+            this.projectInfoShow=false;
+            this.projectAlertShow=false;
+            if(n.id){
+              this.getProjectData(n);
+            }
+            if(!this.timer){
+              this.timer=setTimeout(()=>{
+                this.topologyLoading=true;
+                this.init();
+                this.timer=null
+              },300)
+            }else{
+              clearTimeout(this.timer);
+              this.timer=setTimeout(()=>{
+                this.topologyLoading=true;
+                this.init();
+                this.timer=null
+              },300)
+            }
+          }
+        }
+      }
+    },
+    computed:{},
+    created(){
+      canvasRegister();
+      if(process.client){
+        document.onclick=event=>{
+          this.contextmenu={
+            left:null,
+            top:null,
+            bottom:null
+          };
+        };
+      }
+    },
+    created(){
+      this.addNodeInit();
+    },
+    mounted(){
+      document.getElementById('topology-canvas'+this.topologyIndexF).addEventListener('mousemove',this.canvasMove);
+      window.addEventListener('resize',this.winResize)
+    },
+    methods:{
+      init(){
+        canvasOptions.on=this.onMessage;
+        this.getTopologyData().then((data)=>{
+          this.openTopologyData(data).then(()=>{
+            //获取对应的值 给节点 连线添加对应动画
+            this.lineName=data.lineName?data.lineName:this.lineName;
+            this.chartGetData=[];
+            let axiosArr=[];
+            let promiseArr=[];
+            let self=this;
+            let pensPromise=(pen, arr,index)=>{
+              return new Promise(function(resolve, reject) {
+                Promise.all(arr).then((res)=>{
+                  self.chartGetData[index].res=self.computeData(res,pen.data.aggregation,pen);
+                  self.setAnimation(pen,self.chartGetData[index].res);
+                  resolve()
+                });
+              });
+            };
+            let endTime=this.filterTime[1];
+            let startTime=this.filterTime[0];
+            let step=bus.getStep(startTime,endTime);
+            data.pens&&data.pens.forEach((item,index)=>{
+              this.chartGetData.push({id:item.id,res:[]});
+              let arr=item.data.expressArr.map((ele)=>{
+                let query=encodeURIComponent(ele);
+                if(!query){
+                  return new Promise(resolve=>{
+                    resolve({data:"",status:'no query'});
+                  })
+                }
+                query+='&nullType='+'connected';
+                return this.$get('/prom/api/v1/query_range?query='+query+"&start="+this.$stringTimeParseToUnix(startTime)+"&end="+this.$stringTimeParseToUnix(endTime)+'&step='+step);
+              });
+              axiosArr.push({item,arr});
+              promiseArr.push(pensPromise(item,arr,index))
+            });
+            Promise.all(promiseArr).then((res)=>{
+              getTopology(this.topologyIndex).open(data);
+              getTopology(this.topologyIndex).lock(1);
+              if(this.fromOverView){
+                let flag=false;
+
+                let position={
+                  x:this.$refs['topology-canvas'+this.topologyIndexF].offsetWidth,
+                  y:this.$refs['topology-canvas'+this.topologyIndexF].offsetHeight,
+                }
+
+                getTopology(this.topologyIndex).centerView(50);
+                getTopology(this.topologyIndex).data.pens.forEach(item=>{
+                  if(flag){
+                    return
+                  }
+                  if(item.rect.x>position.x || item.rect.y>position.y){
+                    getTopology(this.topologyIndex).fitView(50);
+                    flag=true
+                  }
+                });
+                // if(this.fromPrev){
+                //   getTopology(this.topologyIndex).scaleTo(data.scale/2)
+                // }
+                // getTopology(this.topologyIndex).fitView();
+                this.getNodesArr();
+              }
+            });
+          })
+        });
+      },
+
+      reload(){
+        this.getTopologyData().then((data)=>{
+          this.openTopologyData(data).then(()=>{
+            //获取对应的值 给节点 连线添加对应动画
+            this.lineName=data.lineName?data.lineName:this.lineName;
+            this.chartGetData=[];
+            let axiosArr=[];
+            let promiseArr=[];
+            let self=this;
+            let pensPromise=(pen, arr,index)=>{
+              return new Promise(function(resolve, reject) {
+                Promise.all(arr).then((res)=>{
+                  self.chartGetData[index].res=self.computeData(res,pen.data.aggregation,pen);
+                  self.setAnimation(pen,self.chartGetData[index].res);
+                  resolve()
+                });
+              });
+            };
+            let endTime=this.filterTime[1];
+            let startTime=this.filterTime[0];
+            let step=bus.getStep(startTime,endTime);
+            data.pens&&data.pens.forEach((item,index)=>{
+              this.chartGetData.push({id:item.id,res:[]});
+              let arr=item.data.expressArr.map((ele)=>{
+                let query=encodeURIComponent(ele);
+                if(!query){
+                  return new Promise(resolve=>{
+                    resolve({data:"",status:'no query'});
+                  })
+                }
+                query+='&nullType='+'connected';
+                return this.$get('/prom/api/v1/query_range?query='+query+"&start="+this.$stringTimeParseToUnix(startTime)+"&end="+this.$stringTimeParseToUnix(endTime)+'&step='+step);
+              });
+              axiosArr.push({item,arr});
+              promiseArr.push(pensPromise(item,arr,index))
+            });
+            Promise.all(promiseArr).then((res)=>{
+              getTopology(this.topologyIndex).open(data);
+              getTopology(this.topologyIndex).lock(1);
+              if(this.fromOverView){
+                let flag=false;
+
+                let position={
+                  x:this.$refs['topology-canvas'+this.topologyIndexF].offsetWidth,
+                  y:this.$refs['topology-canvas'+this.topologyIndexF].offsetHeight,
+                }
+
+                getTopology(this.topologyIndex).centerView(50);
+                getTopology(this.topologyIndex).data.pens.forEach(item=>{
+                  if(flag){
+                    return
+                  }
+                  if(item.rect.x>position.x || item.rect.y>position.y){
+                    getTopology(this.topologyIndex).fitView(50);
+                    flag=true
+                  }
+                });
+                // if(this.fromPrev){
+                //   getTopology(this.topologyIndex).scaleTo(data.scale/2)
+                // }
+                // getTopology(this.topologyIndex).fitView();
+                this.getNodesArr();
+              }
+            });
+          })
+        });
+      },
+      openTopologyData(data){
+        return new Promise(resolve=>{
+          let canvas=new Topology('topology-canvas'+this.topologyIndexF,canvasOptions);
+          canvas.open(data);
+          this.topologyLoading=false;
+          setTopology(this.topologyIndex,canvas);
+          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('/project/topo',{projectId:this.obj.id}).then(res=>{
+            let data=res.data.topo;
+            if(!res.data.topo || !data.pens){
+              data={
+                bkColor:'#FFFFFF',
+                gridSize:10,
+                gridColor:'#ededed',
+                lineWidth:1,
+                ruleColor:"#4e4e4e"
+              };
+              this.projectInfoShow=true;
+              this.projectAlertShow=true;
+              this.saveData={...data};
+              resolve(data);
+            }else{
+              let timer=setInterval(()=>{
+                if(!this.imgInit){
+                  return
+                }
+                clearInterval(timer);
+                data.pens.forEach((item=>{
+                  if(item.type===0&&item.data.imageId){
+                    item.image=this.iconArray.find(item1=>item1.id==item.data.imageId).image
+                  }
+                }));
+                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;
+                }
+                this.saveData={...data};
+                resolve(data);
+              },100)
+            }
+          })
+        });
+      },
+      //赋值动画
+      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 给相应的状态
+            let selLevel=pen.data.valueMapping.find(item=>item.level===maxLevel);
+            pen.font.color=selLevel.color.text;
+            pen.fillStyle=selLevel.color.fill;
+            pen.strokeStyle=selLevel.color.line;
+            onChangeAnimate(pen,selLevel.animateType,selLevel.color.fill,selLevel.color.line);
+          }else if(pen.type===1){// 判断valueMapping 给相应的状态
+            let selLevel=pen.data.valueMapping.find(item=>item.level===maxLevel);
+
+            pen.animateColor=selLevel.color.fill;
+            pen.strokeStyle=selLevel.color.line;
+            pen.animateType=selLevel.animateType;
+            pen.font.color=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 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) {
+                  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 = this.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
+      },
+      dealLegendAlias:function(legend,expression){
+        if(/\{\{.+\}\}/.test(expression)){
+          let labelValue=expression.replace(/(\{\{.+?\}\})/g,function(i){
+            let label=i.substr(i.indexOf('{{')+2,i.indexOf('}}')-i.indexOf('{{')-2);
+            let reg=new RegExp(label+'=".+?"');
+            let value=null;
+            if(reg.test(legend)){
+              let find=legend.match(reg)[0];
+              value=find.substr(find.indexOf('"')+1,find.lastIndexOf('"')-find.indexOf('"')-1);
+            }
+            return value?value:label;
+          });
+          return labelValue
+        }else{
+          return expression;
+        }
+      },
+      //获取project Info
+      getProjectData(n){
+        //获取projectInfo
+        this.projectInfo.loading=true;
+        this.$get('project/info', {id:n.id}).then(response => {
+          if (response.code === 200) {
+            this.projectInfo.loading=false;
+            this.projectInfo={...this.projectInfo,...response.data.basic,moduleMum:response.data.module.length};
+            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.$CONSTANTS.alertMessage.severityData.find(s => {return s.value == key}).label
+      },
+      //获取module
+      getModule(){
+        this.projectInfo.loading=true;
+        this.$get('project/info',{id:this.obj.id}).then(response=>{
+          if(response.code===200){
+            this.projectInfo.loading=false;
+            this.projectInfo={...this.projectInfo,...response.data.basic,moduleMum:response.data.module.length};
+            this.allModules=response.data.module;
+            this.modulesDiff()
+          }
+        });
+      },
+
+      getNodesArr(){
+        this.nodesArr=getTopology(this.topologyIndex).data.pens.filter(item=>{
+          if(!item.data){
+            item.data={
+              moduleId:'',
+              moduleName:'',
+              show:false,
+              error:false,
+              expressArr:[],
+            }
+          }
+          return item.type===0
+        });
+        // this.nodesArr=this.nodesArr.map(item=>{
+        //   if(!item.data){
+        //     item.data={
+        //       moduleId:'',
+        //       moduleName:'',
+        //       show:false,
+        //       error:false,
+        //       expressArr:[],
+        //     }
+        //   }
+        //   return {
+        //     rect:item.rect,
+        //     data:item.data
+        //   }
+        // });
+        //打开动画 是否更新顶部图标
+        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){
+        this.nodesArr.forEach((item,i)=>{
+          item.data.show=i===index;
+        })
+      },
+
+      //具体内容点击
+      nodeTools(node,tool){
+        this.moduleId=node.data.moduleId;
+        setTimeout(()=>{
+          this.popDataShowUpdate(tool.id)
+        },100)
+      },
+
+      popDataShowUpdate(key,flag){//key 显示对应的弹窗 flag是否不显示工具栏
+        this.popDataShow={
+          endpoint:false,
+          asset:false,
+          total:false,
+          other:false,
+          info:false,
+          alert:false,
+          main:false,
+        };
+        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;
+        setTimeout(()=>{
+          this.dragFlag=true;
+        },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}
+          });
+        setTimeout(()=>{
+          this.dragFlag=true;
+        },100);
+      },
+
+      onMessage(event,data,e){
+        // console.log('onMessage',event,data);
+        // console.log(getTopology(this.topologyIndex))
+        if(getTopology(this.topologyIndex)){
+          this.cachesIndex=getTopology(this.topologyIndex).caches.index;
+          if(this.$refs.topTool){
+            this.$refs.topTool.redoFlag=false
+          }
+          ;
+        }
+        if(!Array.isArray(data)&&data){//判断不是数组 提前个data配置好节点属性
+          if(data.type===0&& !data.data.moduleId){
+            data.data={
+              ...data.data,
+              moduleId:'',
+              moduleName:'',
+              show:false,
+              error:false,
+              animatePlay:data.animatePlay,
+              fillStyle:data.fillStyle,
+              strokeStyle:data.strokeStyle,
+              lineWidth:this.nodeDefaultWidth(data.name),
+              iconToolState:true,
+              //chart 配置项
+              valueMapping:[{
+                color:{
+                  line:'#000000',
+                  fill:'#ffffff',
+                  text:'#000000',
+                },
+                value:'base',
+                animateType:'base',
+                level:0,
+                base:true,
+              }],
+              expressArr:[],
+              legends:[],
+              tooltipShow:true,
+              panelName:'topologyName',
+              unit:2,
+              type:'line',
+              displayChart:true,
+              aggregation:'last',
+              title:'',
+              url:'',
+            }
+          }else if(data.type==1&& !data.data){
+            //连线是否自动计算锚点
+            // data.manualCps=true;
+            data.data={
+              animatePlay:data.animatePlay,
+              strokeStyle:data.strokeStyle,
+              animateColor:data.animateColor,
+              arrowColor:data.arrowColor,
+              fromArrowColor:data.fromArrowColor,
+              toArrowColor:data.toArrowColor,
+              lineWidth:1,
+              //chart 配置项
+              valueMapping:[{
+                color:{
+                  border:'#000000',
+                  bac:'#ffffff',
+                  text:'#000000',
+                },
+                value:'base',
+                animateType:'base',
+                level:0,
+                base:true,
+              }],
+              expressArr:[],
+              legends:[],
+              tooltipShow: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;
+            setTimeout(()=>{
+              this.tooltipPosition.show=true;
+            },50);
+            break;
+          case 'moveOutNode':
+          case 'moveOutLine':
+            // this.tooltipPosition.show=false;
+            // return
+            if(!this.timer3){
+              this.timer3=setTimeout(()=>{
+                this.tooltipPosition.show=false;
+                this.timer3=null
+              },150)
+            }else{
+              clearTimeout(this.timer3);
+              this.timer3=setTimeout(()=>{
+                this.tooltipPosition.show=false;
+                this.timer3=null
+              },150)
+            }
+            break;
+        }
+        // 右侧输入框编辑状态时点击编辑区域其他元素，onMessage执行后才执行onUpdateProps方法，通过setTimeout让onUpdateProps先执行
+        setTimeout(()=>{
+          switch(event){
+            case 'node':
+            case 'addNode':
+              this.modulesDiff(data);
+              if(data.data.expressArr.length===0){
+                data.data.expressArr.push('');
+                data.data.legends.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){
+                  this.$refs.CanvasProps.tab='1';
+                }
+              });
+              break;
+            case 'line':
+            case 'addLine':
+              this.props={
+                node:null,
+                line:data,
+                multi:false,
+                nodes:null,
+                locked:data.locked,
+                pen:data,
+                pens:null,
+              };
+              if(data.data.expressArr.length===0){
+                data.data.expressArr.push('');
+                data.data.legends.push('');
+              }
+              this.$nextTick(()=>{
+                if(this.$refs.CanvasProps){
+                  this.$refs.CanvasProps.tab='1';
+                }
+              });
+              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.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':
+              console.log(this.topologyIndexF);
+              let domRect=document.getElementById('topology-canvas'+this.topologyIndexF).getBoundingClientRect();
+              this.toolShow.attrCord=[domRect.width-350,0];
+              this.toolShow.height=domRect.height;
+              getTopology(this.topologyIndex).canvasPos=domRect;
+              break;
+            case 'scale':
+              if(this.$refs.topTool){
+                this.$refs.topTool.option.scale=data;
+              }
+              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':
+              this.moduleId='';
+              this.showNodeTools('');
+              break;
+          }
+          switch(event){
+            case 'space':
+            case 'scale':
+            case 'translate':
+              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;
+          }
+        },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){
+        // 如果是node属性改变，需要传入node，重新计算node相关属性值
+        // 如果是line属性改变，无需传参
+        getTopology(this.topologyIndex).updateProps(node);
+      },
+
+      handleAvatarSuccess(){
+
+      },
+      beforeAvatarUpload(file){
+        let this_=this
+        let isJPG=(file.type==='image/jpeg'||file.type==='image/png');
+
+        const isLt2M=file.size/1024/1024<2;
+
+        if(!isJPG){
+          this.$message.error(this_.$t('project.topology.imgFormat'));
+          return false;
+        }
+        // if (!isLt2M) {
+        //   this.$message.error( this_.$t('project.topology.imgSize'));
+        //   return false;
+        // }
+        const isSize=new Promise(function(resolve,reject){
+          let width=100;
+          let height=100;
+          let _URL=window.URL||window.webkitURL;
+          let img=new Image();
+          img.onload=function(){
+            let valid=img.width>width&&img.height>height;
+            valid?resolve():reject();
+          }
+          img.src=_URL.createObjectURL(file);
+        }).then(()=>{
+          if(isJPG){
+            this.file=file;
+            this.upload();
+          }
+          return file;
+        },()=>{
+          this.$message.error(this_.$t('project.topology.imgMeasure'));
+          return Promise.reject();
+        });
+        return false;
+      },
+
+      toolShowChange(attr){
+        this.toolShow[attr]= !this.toolShow[attr]
+      },
+      /*topology 方法*/
+      end(v){
+        console.log(v);
+      },
+      /*tools 方法*/
+      upload(){
+        let form=new FormData();
+        form.append("file",this.file);
+        let fileName=this.file.name;
+        form.append("name",fileName.substring(0,fileName.lastIndexOf(".")));
+        this.$post('/project/topo/icon',form,{'Content-Type':'multipart/form-data'}).then(res=>{
+          if(res.code==200){
+            this.$message({duration:2000,type:'success',message:this.$t("tip.saveSuccess")});
+            this.dealImg(`/project/topo/icon/${res.data.id}`).then((data)=>{
+              this.tools[1].children.push({
+                ...imageTemp,
+                data:{
+                  ...imageTemp.data,
+                  text:res.data.imageName,
+                  image:data,
+                  imageId:res.data.id,
+                }
+              })
+            })
+          }else{
+            this.$message.error(res.msg);
+          }
+        })
+      },
+
+      delImg(item){
+        this.$delete('/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);
+          }
+        })
+      },
+
+      addNodeInit(){
+        this.$get('/project/topo/icon').then(res=>{
+          this.imgageLoading=true;
+          this.tools[1].children=[];
+          let promiseArr=[];
+          res.data.list.forEach((item,index)=>{
+            item.imageName=item.name;
+            delete item.name;
+            promiseArr.push( this.dealImg(`/project/topo/icon/${item.id}`));
+          });
+          Promise.all(promiseArr).then(res2=>{
+            this.iconArray=[...res.data.list];
+            this.iconArray.forEach((item,index)=>{
+              this.tools[1].children.push({
+                ...imageTemp,
+                data:{
+                  ...imageTemp.data,
+                  text:item.imageName,
+                  image:res2[index],
+                  imageId:item.id,
+                }
+              })
+              item.image=res2[index];
+            });
+            this.imgInit=true;
+          })
+
+
+        })
+      },
+
+      dealImg(url){
+        // 处理后端传过来的图片流乱码问题
+        if(url){
+          return new Promise((resolve,reject)=>{
+            this.$axios
+              .get(url,{
+                responseType:"arraybuffer"
+              })
+              .then(res=>{
+                return ("data:image/jpeg;base64,"+btoa(new Uint8Array(res.data).reduce((data,byte)=>data+String.fromCharCode(byte),"")));
+              })
+              .then(data=>{
+                resolve(data);
+                // changeImage(data,(img)=>{
+                //   resolve(img)
+                // })
+              })
+              .catch(err=>{
+              });
+          })
+        }
+      },
+
+      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)=>{//停止动画 以及赋值默认data
+            item.stopAnimate();
+            if(item.type===0){
+              item.fillStyle=item.data.fillStyle;
+              item.strokeStyle=item.data.strokeStyle;
+              item.animatePlay=item.data.animatePlay;
+              item.font.color="#000000";
+            }else if(item.type===1){
+              item.animateColor=item.data.animateColor;
+              item.strokeStyle=item.data.strokeStyle;
+              item.arrowColor=item.data.arrowColor;
+              item.fromArrowColor=item.data.fromArrowColor;
+              item.toArrowColor=item.data.toArrowColor;
+              item.animatePlay=item.data.animatePlay;
+              item.font.color="#000000";
+            }
+          })
+          let domRect=document.getElementById('topology-canvas'+this.topologyIndexF).getBoundingClientRect();
+          this.toolShow.attrCord=[domRect.width-350,0];
+          this.toolShow.height=domRect.height;
+          getTopology(this.topologyIndex).canvasPos=domRect;
+        })
+      },
+
+      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();
+        let dataOption=getTopology(this.topologyIndex).data;
+        dataOption[key]=this.lineName;
+        getTopology(this.topologyIndex).render();
+      },
+      //保存
+      saveTopology(){
+        let topologyData=getTopology(this.topologyIndex).pureData();
+        let flag=true;
+        topologyData.pens.forEach(item=>{
+          if(item.type===0&&((flag&& !item.data)||(flag&&item.data&& !item.data.moduleId))){
+            flag=false;
+          }
+        });
+        if(flag){
+          this.editTopologyFlag=false;
+          topologyData.pens.forEach(item=>{
+            if(item.type===0&&JSON.stringify(item.data.imageId)){
+              item.image="";
+              item.animateFrames=[];
+              item.animateReady=null;
+              delete  item.img;
+              delete  item.lastImage;
+            }
+          });
+          this.$put('/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.$nextTick(()=>{
+                getTopology(this.topologyIndex).lock(1);
+                let domRect=document.getElementById('topology-canvas'+this.topologyIndexF).getBoundingClientRect();
+                this.toolShow.attrCord=[domRect.width-350,0];
+                this.toolShow.height=domRect.height;
+                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:'请个所有节点绑定module',
+            type:'warning'
+          })
+        }
+      },
+      //取消
+      cancelTopology(){
+        this.editTopologyFlag=false;
+        this.$nextTick(()=>{
+          getTopology(this.topologyIndex).lock(1);
+          let domRect=document.getElementById('topology-canvas'+this.topologyIndexF).getBoundingClientRect();
+          this.toolShow.attrCord=[domRect.width-350,0];
+          this.toolShow.height=domRect.height;
+          getTopology(this.topologyIndex).canvasPos=domRect;
+        });
+        this.reload();
+      },
+      //预览
+      previewTopology(){
+        this.topoPrevData=getTopology(this.topologyIndex).data;
+        this.previewShow=true;
+      },
+      /*tools 方法*/
+
+      winResize(){
+        let domRect=document.getElementById('topology-canvas'+this.topologyIndexF).getBoundingClientRect();
+        this.toolShow.attrCord=[domRect.width-350,0];
+        this.toolShow.height=domRect.height;
+        getTopology(this.topologyIndex).canvasPos=domRect;
+        getTopology(this.topologyIndex).centerView();
+      },
+      canvasMove(e){// 画布上的移动 确定tooltip的位置
+        if(this.tooltipPosition.show){
+          return
+        }
+        this.tooltipPosition.top=e.offsetY;
+        this.tooltipPosition.left=e.offsetX+20;
+      },
+      tooltipOver(){
+        clearTimeout(this.timer3);
+        this.timer3=null
+      },
+      tooltipOut(){
+        this.timer3=setTimeout(()=>{
+          this.tooltipPosition.show=false;
+          this.timer3=null
+        },150)
+      },
+      nodeDefaultWidth(nodeName){
+        switch(nodeName){
+          case 'myCube':
+          case "rectangleImg":
+            return 0;
+          default:
+            return 1;
+        }
+      },
+      previewBeforeClose(done){
+        console.log(123123123123);
+        this.$emit('changeTopologyIndexF');
+        done();
+      }
+    },
+    destroyed(){
+      getTopology(this.topologyIndex).destroy();
+      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)
+    }
+  }
+</script>
+<style lang="scss">
+  .el-dropdown-menu {
+    .project-topology-add-node {
+      .el-collapse-item__header {
+        padding: 0 10px;
+        background-color: #ffffff;
+        height: 32px;
+      }
+
+      .el-collapse-item__header.is-active {
+        background: #F6F6F6;
+        ont-family: Roboto-Bold;
+        font-size: 14px;
+        color: #FA901C;
+        font-weight: 700;
+
+        el-collapse-item__arrow {
+          color: #666;
+        }
+      }
+
+      .el-collapse-item__wrap {
+        padding: 0 10px;
+        background-color: #ffffff;
+      }
+
+      .el-collapse-item__content {
+        padding: 12px 0px;
+        display: flex;
+        flex-wrap: wrap;
+        /*justify-content: space-around;*/
+      }
+
+      .el-card__body {
+        padding: 0;
+        height: 100%;
+      }
+
+      .handle {
+        position: absolute;
+        z-index: 2;
+      }
+
+      .buttons {
+        padding: 12px;
+        display: inline-block;
+        position: relative;
+        vertical-align: middle;
+        width: 26px;
+
+        .delIcon {
+          position: absolute;
+          width: 16px;
+          height: 16px;
+          border-radius: 10px;
+          font-size: 12px;
+          line-height: 16px;
+          text-align: center;
+          background: red;
+          right: -8px;
+          top: -8px;
+          color: #fff;
+          display: none;
+          cursor: pointer;
+        }
+
+        a {
+          display: inline-block;
+          color: #314659;
+          width: 26px;
+          height: 26px;
+          text-align: center;
+          text-decoration: none !important;
+          cursor: pointer;
+          line-height: 26px;
+
+          .iconfont {
+            font-size: 24px;
+          }
+
+          img {
+            max-width: 26px;
+            max-height: 26px;
+          }
+
+          &:hover {
+            color: #1890ff;
+          }
+        }
+
+        .upload-icon-box {
+          .el-icon-plus {
+            font-size: 14px;
+            margin-bottom: 10px;
+          }
+
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          flex-direction: column;
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .buttons:hover {
+        .delIcon {
+          /*display: inline-block;*/
+        }
+      }
+    }
+
+    .avatar-uploader {
+      line-height: 30px;
+
+      .el-icon-plus {
+        font-size: 12px;
+        color: #FA901C;
+        margin: 0 8px 0 15px;
+      }
+
+      .el-upload--picture-card {
+        width: 100%;
+        height: 100%;
+        border: none;
+        color: #666;
+        font-size: 14px;
+        line-height: 30px;
+        text-align: left;
+      }
+
+      .el-upload--picture-card:hover, .el-upload:focus {
+        color: #666;
+      }
+    }
+
+    .avatar-uploader:active el-upload--picture-card {
+      color: #DB8B8B;
+    }
+
+    .avatar-uploader:active .el-upload--picture-card:hover, .avatar-uploader:active .el-upload:focus {
+      color: #DB8B8B;
+    }
+  }
+</style>
+<style scoped>
+  @keyframes model-error-animation {
+    0% {
+      transform: scale(0.7);
+    }
+    50% {
+      transform: scale(1);
+    }
+    100% {
+      transform: scale(0.7);
+    }
+  }
+
+  @keyframes model-icon-animation {
+    0% {
+      transform: scale(1.2) translateX(1px);
+    }
+    50% {
+      transform: scale(0.9) translateX(0px);
+    }
+    100% {
+      transform: scale(1.2) translateX(1px);
+    }
+  }
+
+  .nz-icon-shuidi {
+    position: absolute;
+    font-size: 48px;
+    color: rgba(190, 233, 222, 0.45);
+    border-radius: 50%;
+    height: 48px;
+    width: 48px;
+    line-height: 48px;
+  }
+
+  .model-error.nz-icon-shuidi {
+    color: #FADED7;
+    animation: model-error-animation .6s infinite ease-in-out;
+    animation-direction: normal;
+  }
+
+  .model-error-active.nz-icon-shuidi {
+    color: #FADED7;
+  }
+
+  .nz-icon-model {
+    color: #23BF9A;
+    position: absolute;
+    top: -4px;
+    left: 15px;
+    font-size: 18px;
+    line-height: 48px;
+  }
+
+  .model-error .nz-icon-model {
+    color: #EC7F66;
+    animation: model-icon-animation .6s infinite ease-in-out;
+    animation-direction: normal;
+  }
+
+  .model-error-active .nz-icon-model {
+    color: #EC7F66;
+  }
+
+  .scaleTool-enter-active {
+    animation: scaleTool-in .15s;
+  }
+
+  .scaleTool-leave-active {
+    animation: scaleTool-in .15s reverse;
+  }
+
+  @keyframes scaleTool-in {
+    from {
+      top: 0px;
+      left: 0px;
+      transform: scale(0.5);
+    }
+  }
+
+  .network-pop .nz-icon-hexagonBorder {
+    position: absolute;
+    font-size: 48px;
+    color: #84d5c2;
+    height: 48px;
+    width: 48px;
+    line-height: 48px;
+  }
+
+  .network-pop .nz-icon-hexagonBorder:hover {
+    transform: scale(1.1);
+    color: #4BB49B;
+  }
+
+  .network-pop .nz-icon-hexagonBorder.error-model-stat {
+    color: #F5BAAC;
+  }
+
+  .network-pop .nz-icon-hexagonBorder.error-model-stat:hover {
+    color: #EC7F66;
+  }
+
+  .network-pop .nz-icon-liubianxing {
+    color: #e2f3ef;
+    font-size: 44px;
+    position: absolute;
+    top: 1px;
+    left: 2px;
+    transform: scale(0.9);
+    z-index: 0;
+  }
+
+  .network-pop .error-model-stat .nz-icon-liubianxing {
+    color: #FADED7;
+  }
+
+  .network-pop .nz-icon.noMove {
+    position: absolute;
+    left: 14px;
+    font-size: 20px;
+    color: #27c09c;
+  }
+
+  .network-pop .error-model-stat .nz-icon.noMove {
+    color: #EC7F66;
+  }
+
+  .network-pop .no-selPop {
+    color: #999;
+  }
+
+  .network-pop .no-selPop .nz-icon-liubianxing {
+    color: rgb(218, 218, 218);
+  }
+
+  .network-pop .no-selPop .nz-icon-chart {
+    color: #999;
+  }
+
+  .network-info {
+    position: absolute;
+    right: 0;
+    top: 50px;
+  }
+
+  .facade-top{
+    min-height: 138px;
+    display: flex;
+    margin: 12px 0;
+    height: calc(16% - 40px);
+    font-size: 12px;
+    position: absolute;
+    top: 5px;
+    left: 15px;
+    z-index: 10;
+  }
+  .facade-top > div{
+    height: calc(100% - 40px);
+    width: 18%;
+    min-width: 315px;
+    background: #FFFFFF;
+    margin-right: 9px;
+    padding: 20px;
+    border: 1px solid #FFFFFF;
+    box-shadow: 1px 2px 4px 0 rgba(0,0,0,0.12), -1px 1px 9px -1px rgba(205,205,205,0.77);
+  }
+  .facade-top-title{
+    font-size: 16px;
+    color: #333333;
+    font-weight: bold;
+    padding: 5px 0;
+  }
+  .facade-top-left{
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+  }
+  .special.label{
+    margin-left: 30px;
+  }
+  .facade-top .facade-top-right{
+    width: auto;
+    min-width: 100px;
+  }
+  .facade-top-right-content{
+    display: flex;
+    justify-content: space-around;
+    justify-items: center;
+    flex-direction: column;
+    height: calc(100% - 30px);
+    align-items:flex-start;
+  }
+  .facade-top-right-content > div{
+    min-width: 84px;
+    height: 22px;
+    display: flex;
+    justify-content: space-between;
+    color: #fff;
+    text-align: center;
+    margin-bottom: 5px;
+    line-height: 22px;
+  }
+  .facade-top-right-content > div > div:last-child{
+    text-align: center;
+    border-radius: 0 4px 4px 0;
+    flex: 1;
+    height: calc(100% - 2px);
+    padding: 0 8px;
+    min-width: 40px;
+  }
+  .content-P1-title{
+    background: #F2866E;
+    border-radius: 4px 0 0 4px;
+    width: 40px;
+    height: 100%;
+  }
+  .content-P1-title + div{
+    border: 1px solid #F4907A;
+    font-size: 12px;
+    color: #F4907A;
+  }
+
+  .content-P2-title{
+    background: #F89984;
+    border-radius: 4px 0 0 4px;
+    width: 40px;
+    height: 100%;
+  }
+  .content-P2-title + div{
+    border: 1px solid #F9A28F;
+    font-size: 12px;
+    color: #F9A28F;
+  }
+
+  .content-P3-title{
+    background: #F7BA78;
+    border-radius: 4px 0 0 4px;
+    width: 40px;
+    height: 100%;
+  }
+  .content-P3-title + div{
+    border: 1px solid #F7BA78;
+    font-size: 12px;
+    color: #F7BA78;
+  }
+
+
+  .right-content-P1{
+    border: 1px solid ;
+  }
+  .align--center{
+    text-align: center;
+  }
+
+
+</style>
+<style lang="scss" scoped>
+  .project-topology-tool {
+    display: inline-flex;
+    height: 30px;
+  }
+
+  .el-dropdown-title {
+    background: #FFFFFF;
+    border: 1px solid #DEDEDE;
+    border-radius: 2px;
+    width: 66px;
+    height: 28px;
+    display: inline-block;
+    line-height: 28px;
+
+    .icon-cube {
+      margin-left: 15px;
+    }
+  }
+
+  .project-box {
+    width: 100%;
+    height: calc(100% - 20px);
+    margin-top: 10px;
+    position: relative;
+    border: 1px solid #eeeeee;
+    border-radius: 2px;
+    .project-title {
+      height: 34px;
+      padding-top: 8px;
+      padding-bottom: 8px;
+    }
+
+    .drag-header {
+      cursor: move;
+      background: #1a1a1a;
+      color: #fff;
+    }
+
+    .left-bottom {
+      position: absolute;
+      left: 10px;
+      bottom: 10px;
+    }
+  }
+
+  .page {
+    display: flex;
+    height: calc(100% - 80px);
+    width: 100%;
+    position: relative;
+
+    .tools {
+      width: 300px;
+      height: 100%;
+      border: none;
+      position: absolute;
+      z-index: 1 !important;
+      left: 20px;
+      background-color: #f9f9f9;
+
+      .title {
+        float: left;
+      }
+    }
+
+    .full {
+      flex: 1;
+      overflow: unset !important;
+    }
+
+    .props {
+      width: 500px;
+      height: 100%;
+      border: none;
+      position: absolute;
+      z-index: 1 !important;
+      right: 0;
+      top: 0;
+      background: #FFFFFF;
+      box-shadow: inset 1px 0 0 0 rgba(0, 0, 0, 0.09);
+      border-radius: 0px;
+    }
+  }
+
+  .special-select svg {
+    width: 75px;
+    height: 30px;
+  }
+
+  .special-select .el-select.el-select--small {
+    width: 100%;
+  }
+
+  .special-select /deep/ .el-select-dropdown {
+    width: 75px !important;
+
+    .el-select-dropdown__item {
+      padding: 0 0 0 10px;
+    }
+  }
+
+  .special-select /deep/ .el-input.el-input--prefix.el-input--suffix, .line-width /deep/ .el-input.el-input--prefix.el-input--suffix {
+    border: 1px solid #DCDFE6;
+    height: 28px;
+  }
+
+  .special-select /deep/ .el-input__inner, .line-width /deep/ .el-input__inner {
+    display: none;
+  }
+
+  .special-select /deep/ .el-input__prefix, .line-width /deep/ .el-input__prefix {
+    height: 28px;
+    line-height: 28px;
+    color: #899FB7;
+    width: 100%;
+  }
+
+  .special-select /deep/ .el-input__prefix > div {
+    width: 100%;
+    height: 100%;
+  }
+</style>
diff --git a/nezha-fronted/src/components/common/project/visNetwork.vue b/nezha-fronted/src/components/common/project/visNetwork.vue
deleted file mode 100644
index 9777a6d52..000000000
--- a/nezha-fronted/src/components/common/project/visNetwork.vue
+++ /dev/null
@@ -1,530 +0,0 @@
-<template>
-    <div class="nz-chart-resize">
-    <div class="resize-shadow" ref="resizeShadow"></div>
-    <div class="resize-box resize-box-table" ref="resizeBox">
-      <div class="vis-network" :id="'chartTableDiv'+chartIndex" @mouseenter="caretShow=true" @mouseleave="caretShow=false">
-        <loading :ref="'localLoading'+chartIndex"></loading>
-        <div class="clearfix text-right edit-visnetwork" :class="{'dragTitle':dragTitleShow}" :id="'chartTitle'+chartIndex">
-          <el-popover
-            v-if="isError"
-            :close-delay=10
-            placement="top-start"
-            trigger="hover"
-            popper-class="chart-error-popper">
-            <div >{{errorContent}}</div>
-            <span slot="reference" style="" class="panel-info-corner panel-info-corner--error">
-                <i class="nz-icon nz-icon-warning fa"></i>
-                <span class="panel-info-corner-inner"></span>
-            </span>
-          </el-popover>
-          <span class="el-dropdown-link chart-title" @click.stop="dropdownMenuShow=!dropdownMenuShow">
-              <span></span>
-              <span>
-                <!--<span class="chart-title-text">{{chartData.title}}</span>-->
-                <!--<span class="chart-title-icon"><i class="nz-icon nz-icon-caret-bottom el-icon&#45;&#45;right"  :class="{'visible':caretShow,'hidden':!caretShow}"></i></span>-->
-              </span>
-              <div style="height: 34px">
-                <button @click="editVisNetworkChange(true)" class="nz-btn nz-btn-size-normal nz-btn-style-light float-right pickTime" style="border-right: 1px solid rgba(162,162,162,0.50);margin-right: 12px" type="button" v-show="!editVisNetwork">
-                  <i class="nz-icon nz-icon-edit"   :title="$t('project.topology.edit')"></i>
-                </button>
-                <pick-time v-show="!editVisNetwork" :showTimePicker="false" class="float-right pickTime" :refresh-data-func="dateChange" v-model="searchTime" :use-chart-unit="false" ref="pickTime"></pick-time>
-                <!--<i class="nz-icon nz-icon-zoomin float-right"></i>-->
-                <!--<i class="nz-icon nz-icon-exit-full-screen float-right"></i>-->
-              </div>
-            </span>
-        </div>
-        <div class="vis-network-content">
-          <!--project主要信息-->
-          <div class="facade-top" v-if="!editVisNetwork">
-            <div class="facade-top-left" v-loading="projectInfo.loading">
-              <div class="facade-top-title">
-                Project information
-              </div>
-              <div>
-                <!--<span><span class="label">Id :</span>{{projectInfo.id}}</span>-->
-                <span><span class="label">Name :</span>{{projectInfo.name}}</span>
-              </div>
-              <div>
-                <span><span class="label">Description :</span>{{projectInfo.remark?projectInfo.remark:'--'}}</span>
-              </div>
-              <!--<div>-->
-                <!--<span>-->
-                  <!--<span class="label">Alert state :</span>-->
-                  <!--<div class="active-icon" style="background: #B7464A 100%;"></div>{{projectInfo.alertStat[0]}}-->
-                  <!--<div class="active-icon" style="background: #E64E4E 100%;"></div>{{projectInfo.alertStat[1]}}-->
-                  <!--<div class="active-icon" style="background: #F7B500 100%;"></div>{{projectInfo.alertStat[2]}}-->
-                <!--</span>-->
-              <!--</div>-->
-              <div>
-                <span><span class="label">Module Num :</span>{{projectInfo.moduleMum}}</span>
-              </div>
-            </div>
-            <div class="facade-top-right" v-loading="projectInfo.loading" style="padding: 20px 20px 0 20px;height: calc(100% - 20px);">
-              <div class="facade-top-title">
-                <span class="label" style="padding-left: 0;">Alert :</span>
-                {{total}}
-              </div>
-              <div class="facade-top-right-content">
-                <div>
-                  <div class="content-P1-title">
-                    {{returnSeverityLabel('P1')}}
-                  </div>
-                  <div>
-                    {{projectInfo.alertStat[0] || 0}}
-                  </div>
-                </div>
-                <div>
-                  <div class="content-P2-title">
-                    {{returnSeverityLabel('P2')}}
-                  </div>
-                  <div>
-                    {{projectInfo.alertStat[1] || 0}}
-                  </div>
-                </div>
-                <div style="margin-bottom: 20px;">
-                  <div class="content-P3-title">
-                    {{returnSeverityLabel('P3')}}
-                  </div>
-                  <div>
-                    {{projectInfo.alertStat[2] || 0}}
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <!--拓扑图-->
-          <topology
-            :editVisNetwork="editVisNetwork"
-            :nodesArray="nodesArray"
-            :edgesArray="edgesArray"
-            @setTopologyData="setTopologyData"
-            :isFullScreen="false"
-            ref="topology"
-            :allModuleInfo="allModuleInfo"
-            v-loading="topologyLoading"
-            @editVisNetworkChange="editVisNetworkChange"
-            @reload="reload"
-            @topologyLoad="topologyLoad"
-          >
-          </topology>
-        </div>
-      </div>
-
-    </div>
-  </div>
-</template>
-
-<script>
-  import loading from "@/components/common/loading";
-  import timePicker from '@/components/common/timePicker';
-  import topology from './topology'
-  import bus from '@/libs/bus';
-  // import other from './other'
-  export default {
-    name: 'visNetwork',
-    components: {
-      'loading': loading,
-      'time-picker':timePicker,
-      'topology':topology,
-      // other
-    },
-    props:{
-      chartIndex:{
-        type: Number,
-        default: 0,
-      },
-      chartData: {
-        type: Object
-      },
-      allModuleInfo:{},
-      projectInfo:{},
-    },
-    watch:{
-      // allModuleInfo:{
-      //   immediate: true,
-      //   deep: true,
-      //   handler(n){
-      //     this.getNetworkData(n);
-      //   },
-      // },
-      projectInfo:{
-        immediate: true,
-        handler(n){
-          if(n.id){
-            this.getNetworkData(n);
-            this.total=this.projectInfo.alertStat[0]+this.projectInfo.alertStat[1]+this.projectInfo.alertStat[2];
-            if(!this.total){
-              this.total=0;
-            }
-          }
-        },
-      },
-      // alertData:{
-      //   immediate: true,
-      //   deep: true,
-      //   handler(n){
-      //     this.getNetworkData(n);
-      //   },
-      // },
-    },
-    data () {
-      return {
-        firstLoad:false,
-        //其他
-        isError:false,
-        nodesArray:[],
-        nodesArrayOther:[],
-        edgesArray:[],
-        edgesArrayOther:[],
-        dragTitleShow:false,
-        dropdownMenuShow:false,
-        editVisNetwork:false,
-        topologyLoading:true,
-        total:1,
-        searchTime: bus.getTimezontDateRange(),
-        screenX:window.screen.width,
-      }
-
-    },
-
-    methods:{
-      // 设置拓扑图数据
-      setTopologyData(nodesArr,edgesArr){
-        this.nodesArray=nodesArr;
-        this.edgesArray=edgesArr;
-      },
-      getNetworkData(n){
-        this.topologyLoading=true;
-        this.editVisNetwork=false;
-        this.$get('/project/topo',{projectId:n.id}).then(res=>{
-          if(res.data.topo&&res.data.topo.nodes&&res.data.topo.nodes.length>0){
-            this.nodesArray=[];
-            this.edgesArray=[];
-            this.nodesArrayOther=this.formatNodesArr(res.data.topo.nodes);
-            this.edgesArrayOther=this.formatEdgesArr(res.data.topo.lines);
-          }else{
-            this.nodesArray=[];
-            this.edgesArray=[];
-            setTimeout(()=>{
-              this.topologyLoading=false;
-              if(this.$refs['topology']){
-                this.$refs['topology'].setData();
-              }
-            },100)
-          }
-          if(res.data.topo){
-            this.$refs['topology'].viewsCenter=res.data.topo.viewsCenter?res.data.topo.viewsCenter:{x:0,y:0};
-            this.$refs['topology'].zoom=res.data.topo.zoom?(res.data.topo.zoom*this.screenX/1920):1;
-          }
-          this.$refs['topology'].selNodeId='';
-        })
-      },
-      reload(){
-        this.topologyLoading=true;
-        this.editVisNetwork=false;
-        this.getNetworkData(this.projectInfo);
-        // this.$get('/project/topo',{projectId:this.projectInfo.id}).then(res=>{
-        //   if(res.data.topo&&res.data.topo.nodes&&res.data.topo.nodes.length>0){
-        //     this.nodesArray=[];
-        //     this.edgesArray=[];
-        //     this.nodesArrayOther=this.formatNodesArr(res.data.topo.nodes);
-        //     this.edgesArrayOther=this.formatEdgesArr(res.data.topo.lines);
-        //   }else{
-        //     this.nodesArray=[];
-        //     this.edgesArray=[];
-        //     setTimeout(()=>{
-        //       this.topologyLoading=false;
-        //       this.$refs['topology'].setData();
-        //     },500)
-        //   }
-        //   this.$refs['topology'].viewsCenter=res.data.topo.viewsCenter?res.data.topo.viewsCenter:{x:0,y:0};
-        //   this.$refs['topology'].zoom=res.data.topo.zoom?(res.data.topo.zoom*this.screenX/1920):1;
-        //   this.$refs['topology'].selNodeId='';
-        // })
-      },
-      formatNodesArr(arr){
-        let arr1=[];
-        if(!arr || arr.length===0){
-          this.topologyLoading=false;
-          return arr1
-        }
-        let promiseArr=[];
-        arr.forEach((item,index)=>{
-          item.shape='image';
-          item.id=item.moduleId;
-          if(this.allModuleInfo.module){
-            item.label=this.allModuleInfo.module.find(item1=>item1.id===item.id).name;
-          }
-          this.$get('/module/stat',{id:item.id}).then(res=>{
-            item.state=res.data;
-            // if(index===arr.length-1){
-              setTimeout(()=>{
-                this.nodesArray=[...this.nodesArrayOther];
-                this.edgesArray=[...this.edgesArrayOther];
-                setTimeout(()=>{
-                  this.topologyLoading=false;
-                  if(this.$refs['topology']){
-                    this.$refs['topology'].setData();
-                  }
-                },500)
-              })
-            // }
-          });
-          promiseArr.push( this.dealImg(`/project/topo/icon/${item.iconId}`))
-        });
-        Promise.all(promiseArr).then(res2=>{
-          res2.forEach((item,index)=>{
-            arr[index].image=item;
-          });
-          setTimeout(()=>{
-            this.nodesArray=[...this.nodesArrayOther];
-            this.edgesArray=[...this.edgesArrayOther];
-            this.topologyLoading=false;
-            if(this.$refs['topology']){
-              this.$refs['topology'].setData();
-            }
-          })
-        });
-        return arr
-      },
-      formatEdgesArr(arr){
-        let arr1=[];
-        if(!arr){return arr1}
-        arr.forEach((item)=>{
-          item.from=item.source;
-          item.to=item.target;
-          item.label='';
-          item.title='title';
-          item.expressions.forEach((item1,index)=>{
-            this.$get('/prom/api/v1/query?query=' + item1.metric).then(res=>{
-              // item.value=res.data.result[0].value;i
-              item1.value=res.data.result;
-            });
-          })
-
-          // item.dashes=(item.dashes?(new Array(100).fill(item.dashes[0])):item.dashes);
-          // if(index%2==0&&item.dashes){
-          //   item.dataFlow='left';
-          //   item.dashes[0]=0;
-          //   item.dashes[1]=0;
-          // } else if(index%2==1&&item.dashes){
-          //   item.dataFlow='right'
-          // }
-        });
-        return arr
-      },
-      dealImg(url) {
-        // 处理后端传过来的图片流乱码问题
-        if (url) {
-          return new Promise((resolve)=>{
-            this.$axios
-              .get(url, {
-                responseType: "arraybuffer"
-              })
-              .then(res => {
-                return ("data:image/jpeg;base64," +btoa(new Uint8Array(res.data).reduce((data, byte) => data + String.fromCharCode(byte), "")));
-              })
-              .then(data => {
-                resolve(data)
-              })
-              .catch(err => {
-              });
-          })
-        }
-      },
-      // Severity Label
-      returnSeverityLabel(key){
-        return this.$CONSTANTS.alertMessage.severityData.find(s => {return s.value == key}).label
-      },
-      editVisNetworkChange(flag){
-        this.editVisNetwork=flag;
-        if(flag){
-          this.$refs.topology.popDataShowUpdate('',true);
-          this.$refs.topology.networkPopClose(true);
-        }
-        if(!flag){
-          // this.reload();
-        }
-      },
-      dateChange() {
-        if(this.editVisNetwork)  {
-          return
-        }
-        this.reload();
-      },
-      topologyLoad(){
-        this.topologyLoading=true;
-      },
-      clearData(){
-        this.nodesArray=null;
-        this.nodesArrayOther=null;
-      },
-    },
-
-    mounted(){
-      this.firstLoad = false;
-    },
-    beforeDestroy(){
-      this.$refs['pickTime'].selectInterval();
-      this.clearData();
-    }
-
-  }
-
-</script>
-<style lang="scss">
-  @import './chart.scss';
-</style>
-<style scoped>
-  .pickTime{
-    margin-top: 10px;
-  }
-  .facade-top /deep/.active-icon{
-    margin-top: 0;
-  }
-  /*.nz-icon-edit{*/
-    /*margin-right: 12px;*/
-    /*margin-top: 10px;*/
-  /*}*/
-  .vis-network{
-    z-index: 0;
-  }
-  .vis-network .nz-icon-refresh{
-    margin-right: 12px;
-    margin-top: 10px;
-    color: #ee9d3f;
-  }
-  .table-container{
-    height: calc(100% - 30px);
-  }
-  .nz-icon{
-    cursor: pointer;
-  }
-  .resize-box .vis-network .text-right{
-    text-align: right;
-  }
-  .resize-box .vis-network .chartTitle .chart-title{
-    justify-content: space-between;
-    align-items: stretch;
-  }
-  .vis-network-content{
-    height: 100%;
-  }
-  .facade-top{
-    min-height: 138px;
-    display: flex;
-    margin: 12px 0;
-    height: calc(16% - 40px);
-    font-size: 12px;
-    position: absolute;
-    top: 5px;
-    left: 15px;
-    z-index: 10;
-  }
-  .facade-top > div{
-    height: calc(100% - 40px);
-    width: 18%;
-    min-width: 315px;
-    background: #FFFFFF;
-    margin-right: 9px;
-    padding: 20px;
-    border: 1px solid #FFFFFF;
-    box-shadow: 1px 2px 4px 0 rgba(0,0,0,0.12), -1px 1px 9px -1px rgba(205,205,205,0.77);
-  }
-  .facade-top-title{
-    font-size: 16px;
-    color: #333333;
-    font-weight: bold;
-    padding: 5px 0;
-  }
-  .facade-top-left{
-    display: flex;
-    flex-direction: column;
-    justify-content: space-around;
-  }
-  .special.label{
-    margin-left: 30px;
-  }
-  .facade-top .facade-top-right{
-    width: auto;
-    min-width: 100px;
-  }
-  .facade-top-right-content{
-    display: flex;
-    justify-content: space-around;
-    justify-items: center;
-    flex-direction: column;
-    height: calc(100% - 30px);
-    align-items:flex-start;
-  }
-  .facade-top-right-content > div{
-    min-width: 84px;
-    height: 22px;
-    display: flex;
-    justify-content: space-between;
-    color: #fff;
-    text-align: center;
-    margin-bottom: 5px;
-    line-height: 22px;
-  }
-  .facade-top-right-content > div > div:last-child{
-    text-align: center;
-    border-radius: 0 4px 4px 0;
-    flex: 1;
-    height: calc(100% - 2px);
-    padding: 0 8px;
-    min-width: 40px;
-  }
-  .content-P1-title{
-    background: #F2866E;
-    border-radius: 4px 0 0 4px;
-    width: 40px;
-    height: 100%;
-  }
-  .content-P1-title + div{
-    border: 1px solid #F4907A;
-    font-size: 12px;
-    color: #F4907A;
-  }
-
-  .content-P2-title{
-    background: #F89984;
-    border-radius: 4px 0 0 4px;
-    width: 40px;
-    height: 100%;
-  }
-  .content-P2-title + div{
-    border: 1px solid #F9A28F;
-    font-size: 12px;
-    color: #F9A28F;
-  }
-
-  .content-P3-title{
-    background: #F7BA78;
-    border-radius: 4px 0 0 4px;
-    width: 40px;
-    height: 100%;
-  }
-  .content-P3-title + div{
-    border: 1px solid #F7BA78;
-    font-size: 12px;
-    color: #F7BA78;
-  }
-
-
-  .right-content-P1{
-    border: 1px solid ;
-  }
-  .align--center{
-    text-align: center;
-  }
-  .label{
-    padding: 0 15px 0 0;
-  }
-  .edit-visnetwork{
-    position: absolute;
-    top: 5px;
-    right: 5px;
-    z-index: 1;
-  }
-</style>
diff --git a/nezha-fronted/src/components/page/project/project.vue b/nezha-fronted/src/components/page/project/project.vue
index 8999daa98..f20142fe4 100644
--- a/nezha-fronted/src/components/page/project/project.vue
+++ b/nezha-fronted/src/components/page/project/project.vue
@@ -182,7 +182,7 @@
     <template v-else-if="pageType == 'project'">
       <!--<panel-tab from="project" :obj="currentProject" targetTab.sync="panel"></panel-tab>-->
       <!--<facade :obj="currentProject" targetTab.sync="panel" ref="facade" v-if="reloadFacade"/>-->
-      <topologyL5 :obj="currentProject" targetTab.sync="panel" ref="facade" v-if="reloadFacade"/>
+      <topologyL5 :obj="currentProject" targetTab.sync="panel" ref="facade" :topologyIndexF="topologyIndexF" v-if="reloadFacade" @changeTopologyIndexF="changeTopologyIndexF"/>
     </template>
 
     <transition name="el-zoom-in-bottom">
@@ -218,7 +218,6 @@
   import loading from "../../common/loading";
   import panelTab from '../../common/bottomBox/tabs/panelTab'
   import bus from '../../../libs/bus'
-  import facade from '@/components/common/project/projectFacade'
   import topologyL5 from '@/components/common/project/topologyL5'
   import deleteButton from "../../common/deleteButton";
 
@@ -228,7 +227,6 @@
       'export-excel':exportXLSX,
       'loading':loading,
       'panel-tab':panelTab,
-      facade,
       topologyL5,
       'delete-button':deleteButton,
     },
@@ -392,6 +390,7 @@
         },
         scrollbarWrap: null,
         delFlag:false,
+        topologyIndexF:0,
       }
     },
     methods:{
@@ -778,6 +777,10 @@
         }
         return '';
       },
+      changeTopologyIndexF(){
+        console.log(132123132123123);
+        this.topologyIndexF=0;
+      },
     },
     created(){
       this.currentProject=this.$store.state.currentProject;