diff --git a/nezha-fronted/src/components/common/language/cn.js b/nezha-fronted/src/components/common/language/cn.js
index 73bdf4bff..15a430cd8 100644
--- a/nezha-fronted/src/components/common/language/cn.js
+++ b/nezha-fronted/src/components/common/language/cn.js
@@ -203,7 +203,10 @@ const cn = {
           range:'Range',
         },
         legendValue:'Legend option',
-        content:'内容'
+        content:'内容',
+        tooltip:'Tooltip',
+        displayChart:'Display chart',
+        aggregation:"Aggregation",
       },
       chartTableColumn: {
         metric: "指标",
diff --git a/nezha-fronted/src/components/common/language/en.js b/nezha-fronted/src/components/common/language/en.js
index 1a789e57c..8c5800f9b 100644
--- a/nezha-fronted/src/components/common/language/en.js
+++ b/nezha-fronted/src/components/common/language/en.js
@@ -210,7 +210,10 @@ const en = {
           range:'Range',
         },
         legendValue:'Legend option',
-        content:'Content'
+        content:'Content',
+        tooltip:'Tooltip',
+        displayChart:'Display chart',
+        aggregation:"Aggregation",
       },
       chartTableColumn:{
         metric:'Metric', //'指标'
diff --git a/nezha-fronted/src/components/common/project/L5/CanvasContextMenu.vue b/nezha-fronted/src/components/common/project/L5/CanvasContextMenu.vue
new file mode 100644
index 000000000..8f5d7c1b2
--- /dev/null
+++ b/nezha-fronted/src/components/common/project/L5/CanvasContextMenu.vue
@@ -0,0 +1,195 @@
+<template>
+  <div class="menus">
+    <div>
+      <a :class="{disabled:!props.node && !props.nodes}" @click="onTop()">置顶</a>
+    </div>
+    <div>
+      <a :class="{disabled:!props.node && !props.nodes}" @click="onBottom()">置底</a>
+    </div>
+    <div class="line"></div>
+    <div v-if="props.nodes">
+      <a @click="onCombine()">组合</a>
+      <div>
+        <a @click="onCombine(true)">包含</a>
+      </div>
+    </div>
+    <div v-if="props.node && props.node.name === 'combine'">
+      <a @click="onUncombine()">取消组合/包含</a>
+    </div>
+    <div>
+      <a
+        :class="{disabled:!props.node && !props.nodes}"
+        @click="onLock()"
+      >{{ props.locked ? '解锁' : '锁定' }}</a>
+    </div>
+    <div class="line"></div>
+    <div>
+      <a :class="{disabled:!props.node && !props.nodes && !props.line}" @click="onDel()">删除</a>
+    </div>
+    <div class="line"></div>
+    <div>
+      <a @click="canvas.undo()" class="flex">
+        <span class="full">撤消</span>
+        <span class="ml50">Ctrl + Z</span>
+      </a>
+    </div>
+    <div>
+      <a @click="canvas.redo()">
+        恢复
+        <span class="ml50">Ctrl + Shift+ Z</span>
+      </a>
+    </div>
+    <div class="line"></div>
+    <div>
+      <a @click="canvas.cut()" class="flex">
+        <span class="full">剪切</span>
+        <span class="ml50">Ctrl + X</span>
+      </a>
+    </div>
+    <div>
+      <a @click="canvas.copy()" class="flex">
+        <span class="full">复制</span>
+        <span class="ml50">Ctrl + C</span>
+      </a>
+    </div>
+    <div>
+      <a @click="canvas.paste()" class="flex">
+        <span class="full">粘贴</span>
+        <span class="ml50">Ctrl + V</span>
+      </a>
+    </div>
+    <div class="line"></div>
+    <div>
+      <a :class="{disabled:!props.node || !props.node.image}" @click="onCopyImage()" class="flex">
+        <span class="full">复制节点图片地址</span>
+      </a>
+    </div>
+  </div>
+</template>
+
+<script >
+export default {
+  data() {
+    return {}
+  },
+  props: {
+    canvas: {
+      type: Object,
+      require: true
+    },
+    props: {
+      type: Object,
+      require: true
+    }
+  },
+  methods: {
+    onTop() {
+      if (this.props.node) {
+        this.canvas.top(this.props.node)
+      }
+
+      if (this.props.nodes) {
+        for (const item of this.props.nodes) {
+          this.canvas.top(item)
+        }
+      }
+
+      this.canvas.render()
+    },
+
+    onBottom() {
+      if (this.props.node) {
+        this.canvas.bottom(this.props.node)
+      }
+
+      if (this.props.nodes) {
+        for (const item of this.props.nodes) {
+          this.canvas.bottom(item)
+        }
+      }
+
+      this.canvas.render()
+    },
+
+    onCombine(stand) {
+      if (!this.props.nodes) {
+        return
+      }
+      this.canvas.combine(this.props.nodes, stand)
+      this.canvas.render()
+    },
+
+    onUncombine() {
+      if (!this.props.node) {
+        return
+      }
+      this.canvas.uncombine(this.props.node)
+      this.canvas.render()
+    },
+
+    onLock() {
+      this.props.locked = !this.props.locked
+      if (this.props.node) {
+        this.props.node.locked = this.props.locked
+      }
+      if (this.props.nodes) {
+        for (const item of this.props.nodes) {
+          item.locked = this.props.locked
+        }
+      }
+      if (this.props.lines) {
+        for (const item of this.props.lines) {
+          item.locked = this.props.locked
+        }
+      }
+      this.canvas.render(true)
+    },
+
+    onDel() {
+      this.canvas.delete()
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.menus {
+  color: #000;
+  background-color: #fff;
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
+  min-width: 1.8rem;
+  text-align: left;
+  padding: 0.08rem 0;
+
+  & > div {
+    line-height: 2.2;
+    a {
+      color: #314659;
+      display: block;
+      padding: 0 0.2rem;
+      text-decoration: none;
+      cursor: pointer;
+
+      &:hover {
+        color: #1890ff;
+      }
+
+      &.flex {
+        display: flex;
+      }
+
+      &.disabled {
+        color: #ccc;
+        cursor: default;
+      }
+    }
+  }
+
+  .line {
+    background-color: transparent !important;
+    padding: 0;
+    margin: 0.05rem 0;
+    border-top: 1px solid #eee;
+  }
+}
+</style>
diff --git a/nezha-fronted/src/components/common/project/L5/CanvasProps.vue b/nezha-fronted/src/components/common/project/L5/CanvasProps.vue
new file mode 100644
index 000000000..8acde97ab
--- /dev/null
+++ b/nezha-fronted/src/components/common/project/L5/CanvasProps.vue
@@ -0,0 +1,1375 @@
+<template>
+  <div class="props-box">
+    <!--删除按钮-->
+    <button id="edit-ep-del" type="button" class="nz-btn nz-btn-size-normal nz-btn-size-alien del-btn"
+            v-if="selection.pen" @click="delTopologyPen">
+      <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>
+    <!--所有属性-->
+    <el-tabs v-model="tab" type="card" v-if="selection.pen" @tab-click="tabClick">
+      <el-tab-pane label="数据" name="1">
+        <el-form v-model="selection.pen.data">
+          <!--module-->
+          <el-form-item label="Module Name" prop="moduleId" v-if="!selection.pen.type">
+            <el-select v-model="selection.pen.data.moduleId" placeholder="" popper-class="asset-dropdown" size="small"
+                       @change="moduleIdChange" :popper-append-to-body="false">
+              <el-option
+                v-for="item in modules"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id">
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <!--tooltip-->
+          <el-form-item :label="$t('dashboard.panel.chartForm.tooltip')" class="half-form-item" prop="type">
+            <el-switch v-model="selection.pen.data.tooltipShow"/>
+          </el-form-item>
+
+          <!--chart type-->
+          <el-form-item :label="$t('dashboard.panel.chartForm.aggregation')" class="half-form-item" prop="type">
+            <el-select class="right-box-row-with-btn" placeholder="" popper-class="chart-box-dropdown-small" size="mini"
+                       v-model="selection.pen.data.aggregation" value-key="chartType">
+              <el-option :key="item.id" :label="item.name" :value="item.name" v-for="item in aggregationList">
+                <span class="panel-dropdown-label-txt">{{item.name}}</span>
+              </el-option>
+            </el-select>
+          </el-form-item>
+
+          <!--chart type-->
+          <el-form-item :label="$t('dashboard.panel.chartForm.type')" class="half-form-item" prop="type">
+            <el-select class="right-box-row-with-btn" placeholder="" popper-class="chart-box-dropdown-small" size="mini"
+                       v-model="selection.pen.data.type" value-key="chartType">
+              <el-option :key="item.id" :label="item.name" :value="item.id" v-for="item in chartTypeList">
+                <span class="panel-dropdown-label-txt">{{item.name}}</span>
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <!--chart unit-->
+          <el-form-item :label="$t('dashboard.panel.chartForm.unit')" class="half-form-item" prop="unit"
+                        v-show="selection.pen.data.type !='text'">
+            <el-cascader :options="unitOptions"
+                         :props="{ expandTrigger: 'hover',emitPath:false }"
+                         :show-all-levels="false"
+                         filterable
+                         placeholder=""
+                         popper-class="dc-dropdown"
+                         size="mini"
+                         v-model="selection.pen.data.unit"
+            >
+            </el-cascader>
+          </el-form-item>
+
+          <!--displayChart-->
+          <el-form-item :label="$t('dashboard.panel.chartForm.displayChart')" class="half-form-item" prop="type">
+            <el-switch v-model="selection.pen.data.displayChart"/>
+          </el-form-item>
+          <!--metric-->
+          <div class="right-box-sub-title" style="margin-bottom: 20px">
+            <span>{{$t('alert.config.expr')}}</span>
+              <span @click="addExpression" class="float-right" style="height: 19px;display: inline-block;line-height: 1;">
+              <span class="create-square-box">
+                <i style="font-size: 17px; cursor: pointer;" class="nz-icon nz-icon-create-square"></i>
+              </span>
+            </span>
+          </div>
+          <el-row :key="index" class="element-item form-row-item" style="" v-for="(item,index) in selection.pen.data.expressArr">
+            <promql-input
+              :expression-list="selection.pen.data.expressArr"
+              :id="index"
+              :index="index"
+              :key="index"
+              :plugins="['metric-selector', 'metric-input', 'remove']"
+              :ref="'promql-'+index"
+              :showRemove="false"
+              :styleType="2"
+              :metricOptionsParent="metricOptions"
+              @change="expressionChange"
+              @removeExpression="removeExpression"
+            ></promql-input>
+            <el-row>
+              <template>
+                <el-col style="width: 120px; padding-right: 20px; text-align: right; color: #666">
+                  {{$t('dashboard.panel.chartForm.legend')}}&nbsp;
+                  <el-popover placement="top" trigger="hover" width="211">
+                    <div style="word-break:keep-all;">{{$t('dashboard.panel.chartForm.legendTip')}}</div>
+                    <i class="nz-icon nz-icon-info-normal" slot="reference" @mouseover="rz" style="font-size: 14px; -webkit-transform:scale(0.75);display:inline-block;"></i>
+                  </el-popover>
+                </el-col>
+                <el-col style="width: calc(100% - 120px);">
+                  <el-input size="small" type="text" v-model="selection.pen.data.legends[index]"></el-input>
+                </el-col>
+              </template>
+            </el-row>
+            <span class="nz-icon-minus-medium nz-icon-minus-position">
+            <i class="nz-icon nz-icon-minus" @click="removeExpression(index - 1)"></i>
+          </span>
+          </el-row>
+          <!--value mapping-->
+          <el-row class="value-mapping-title">
+            <el-col>level</el-col>
+            <el-col>color</el-col>
+            <el-col>value</el-col>
+            <el-col>animation</el-col>
+            <el-col></el-col>
+          </el-row>
+          <el-row class="value-mapping-content">
+            <el-row v-for="(item,index) in selection.pen.data.valueMapping" :key="index">
+              <el-col>level</el-col>
+              <el-col>color</el-col>
+              <el-col>value</el-col>
+              <el-col>animation</el-col>
+              <el-col></el-col>
+            </el-row>
+          </el-row>
+        </el-form>
+      </el-tab-pane>
+      <el-tab-pane label="属性" name="4">
+        <el-collapse v-model="activeNames">
+          <!--位置大小-->
+          <el-collapse-item title="位置和大小" name="3" v-if="selection.pen&&!selection.pen.type">
+            <div class="flex flex-warp">
+
+              <div class="props-pen-item">
+                <div>X（px）</div>
+                <div class="p10 pl0">
+                  <el-input-number :precision="2" controls-position="right" size="small" name="x" class="input"
+                                   v-model.number="selection.pen.rect.x"
+                                   :readonly="readonly" required @change="onChange()"></el-input-number>
+                </div>
+              </div>
+
+              <div class="props-pen-item">
+                <div>Y（px）</div>
+                <div class="p10 pl0">
+                  <el-input-number :precision="2" controls-position="right" size="small" name="x" class="input"
+                                   v-model.number="selection.pen.rect.y"
+                                   :readonly="readonly" required @change="onChange()"></el-input-number>
+                </div>
+              </div>
+
+              <div class="props-pen-item">
+                <div>宽（px）</div>
+                <div class="p10 pl0">
+                  <el-input-number :precision="2" controls-position="right" size="small" name="x" class="input"
+                                   v-model.number="selection.pen.rect.width"
+                                   :readonly="readonly" required @change="onChange()" :min="0"></el-input-number>
+                </div>
+              </div>
+
+              <div class="props-pen-item">
+                <div>高（px）</div>
+                <div class="p10 pl0">
+                  <el-input-number :precision="2" controls-position="right" size="small" name="x" class="input"
+                                   v-model.number="selection.pen.rect.height"
+                                   :readonly="readonly" required @change="onChange()" :min="0"></el-input-number>
+                </div>
+              </div>
+
+              <div class="props-pen-item">
+                <div title="百分比%对应的小数值">圆角（0 - 1）</div>
+                <div class="p10 pl0">
+                  <el-input-number :precision="2" controls-position="right" size="small" :min="0" :max="1" :step="0.1"
+                                   name="x" class="input" v-model.number="selection.pen.borderRadius"
+                                   :readonly="readonly" required @change="onChange()"></el-input-number>
+                </div>
+              </div>
+
+              <div class="props-pen-item">
+                <div>旋转（°）</div>
+                <div class="p10 pl0">
+                  <el-input-number :precision="2" controls-position="right" size="small" name="x" class="input"
+                                   v-model.number="selection.pen.rotate"
+                                   :readonly="readonly" required @change="onChange()"></el-input-number>
+                </div>
+              </div>
+
+              <div class="props-pen-item">
+                <div>内边距 上（px）</div>
+                <div class="p10 pl0">
+                  <el-input-number :precision="2" controls-position="right" size="small" name="x" class="input"
+                                   v-model.number="selection.pen.paddingTop"
+                                   :readonly="readonly" required @change="onChange()" :min="0"></el-input-number>
+                </div>
+              </div>
+
+              <div class="props-pen-item">
+                <div>内边距 下（px）</div>
+                <div class="p10 pl0">
+                  <el-input-number :precision="2" controls-position="right" size="small" name="x" class="input"
+                                   v-model.number="selection.pen.paddingBottom"
+                                   :readonly="readonly" required @change="onChange()" :min="0"></el-input-number>
+                </div>
+              </div>
+
+              <div class="props-pen-item">
+                <div>内边距 左（px）</div>
+                <div class="p10 pl0">
+                  <el-input-number :precision="2" controls-position="right" size="small" name="x" class="input"
+                                   v-model.number="selection.pen.paddingLeft"
+                                   :readonly="readonly" required @change="onChange()" :min="0"></el-input-number>
+                </div>
+              </div>
+
+              <div class="props-pen-item">
+                <div>内边距 右（px）</div>
+                <div class="p10 pl0">
+                  <el-input-number :precision="2" controls-position="right" size="small" name="x" class="input"
+                                   v-model.number="selection.pen.paddingRight"
+                                   :readonly="readonly" required @change="onChange()" :min="0"></el-input-number>
+                </div>
+              </div>
+
+            </div>
+          </el-collapse-item>
+          <!--样式-->
+          <el-collapse-item title="样式" name="4" v-if="selection.pen">
+            <div class="flex flex-warp">
+              <div class="props-pen-item special-select" v-if="selection.pen.name!=='image'">
+                <div>线条样式</div>
+                <div class="p10 pl0">
+                  <el-select v-model="selection.pen.dash" placeholder="请选择" size="small" :popper-append-to-body="false"
+                             @change="onChange">
+                    <div slot="prefix">
+                      <div class="icon-item">
+                        <svg>
+                          <g fill="none" stroke="black" stroke-width="1">
+                            <path
+                              :d="penDash.find((item,i)=>i==(selection.pen.dash?selection.pen.dash:0)).d"
+                              :stroke-dasharray="penDash.find((item,i)=>i==(selection.pen.dash?selection.pen.dash:0))['stroke-dasharray']">
+                            </path>
+                          </g>
+                        </svg>
+                      </div>
+                    </div>
+                    <el-option v-for="(item,index) in penDash" :value="index" :key="index">
+                      <div class="icon-item">
+                        <svg>
+                          <g fill="none" :stroke="(selection.pen.dash==index)?'#ee9d3f':'black'" stroke-width="1">
+                            <path :d="item.d" :stroke-dasharray="item['stroke-dasharray']"></path>
+                          </g>
+                        </svg>
+                      </div>
+                    </el-option>
+                  </el-select>
+                </div>
+              </div>
+
+              <div class="props-pen-item special-select" v-if="selection.pen&&selection.pen.type">
+                <div>连线类型</div>
+                <div class="p10 pl0">
+                  <el-select v-model="selection.pen.name" placeholder="请选择" size="small" :popper-append-to-body="false"
+                             @change="onClickName">
+                    <div slot="prefix">
+                      <div class="icon-item">
+                        <svg>
+                          <g fill="none" stroke="black" stroke-width="1">
+                            <path
+                              :d="penLineType.find((item,i)=>item.name==selection.pen.name).d"
+                            >
+                            </path>
+                          </g>
+                        </svg>
+                      </div>
+                    </div>
+                    <el-option v-for="(item,index) in penLineType" :value="item.name" :key="index">
+                      <div class="icon-item">
+                        <svg>
+                          <g fill="none" :stroke="(selection.pen.name==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>
+
+              <div class="props-pen-item special-select" v-if="selection.pen&&selection.pen.type">
+                <div>起点箭头</div>
+                <div class="p10 pl0">
+                  <el-select v-model="selection.pen.fromArrow" placeholder="请选择" size="small"
+                             :popper-append-to-body="false" @change="onClickFromArrow">
+                    <div slot="prefix">
+                      <div class="icon-item">
+                        <svg>
+                          <g fill="none" stroke="black" stroke-width="1" v-for="(item,index) in penLineFromTOArrow"
+                             :key="index" v-if="selection.pen.fromArrow==item.name">
+                            <path :d="item.d"></path>
+                            <polygon v-if="item.points" :points="item.points" :fill="item.fill" :stroke="item.stroke"
+                                     :strokeWidth="item['stroke-width']"></polygon>
+                            <circle v-if="item.cx" :cx="item.cx" :cy="item.cy" :r="item.r" :fill="item.fill"
+                                    :stroke="item.stroke" :strokeWidth="item['stroke-width']"></circle>
+                          </g>
+                        </svg>
+                      </div>
+                    </div>
+                    <el-option v-for="(item,index) in penLineFromTOArrow" :value="item.name" :key="index">
+                      <div class="icon-item">
+                        <svg>
+                          <g fill="none" :stroke="(selection.pen.fromArrow==item.name)?'#ee9d3f':'black'"
+                             stroke-width="1">
+                            <path :d="item.d"></path>
+                            <polygon
+                              v-if="item.points"
+                              :points="item.points"
+                              :fill="(selection.pen.fromArrow==item.name)?(item.fill=='#ffffff'?item.fill:'#ee9d3f'):item.fill"
+                              :stroke="(selection.pen.fromArrow==item.name)?'#ee9d3f':item.stroke"
+                              :strokeWidth="item['stroke-width']"
+                            ></polygon>
+                            <circle
+                              v-if="item.cx"
+                              :cx="item.cx"
+                              :cy="item.cy"
+                              :r="item.r"
+                              :fill="(selection.pen.fromArrow==item.name)?(item.fill=='#ffffff'?item.fill:'#ee9d3f'):item.fill"
+                              :stroke="(selection.pen.fromArrow==item.name)?'#ee9d3f':item.stroke"
+                              :strokeWidth="item['stroke-width']"
+                            ></circle>
+                          </g>
+                        </svg>
+                      </div>
+                    </el-option>
+                  </el-select>
+                </div>
+              </div>
+
+              <div class="props-pen-item special-select" v-if="selection.pen&&selection.pen.type">
+                <div>终点箭头</div>
+                <div class="p10 pl0">
+                  <el-select v-model="selection.pen.toArrow" placeholder="请选择" size="small"
+                             :popper-append-to-body="false" @change="onClickToArrow">
+                    <div slot="prefix">
+                      <div class="icon-item">
+                        <svg>
+                          <g fill="none" stroke="black" stroke-width="1" v-for="(item,index) in penLineFromTOArrow"
+                             :key="index" v-if="selection.pen.toArrow==item.name">
+                            <path :d="item.d"></path>
+                            <polygon v-if="item.points" :points="item.points" :fill="item.fill" :stroke="item.stroke"
+                                     :strokeWidth="item['stroke-width']"></polygon>
+                            <circle v-if="item.cx" :cx="item.cx" :cy="item.cy" :r="item.r" :fill="item.fill"
+                                    :stroke="item.stroke" :strokeWidth="item['stroke-width']"></circle>
+                          </g>
+                        </svg>
+                      </div>
+                    </div>
+                    <el-option v-for="(item,index) in penLineFromTOArrow" :value="item.name" :key="index">
+                      <div class="icon-item">
+                        <svg>
+                          <g fill="none" :stroke="(selection.pen.toArrow==item.name)?'#ee9d3f':'black'"
+                             stroke-width="1">
+                            <path :d="item.d"></path>
+                            <polygon
+                              v-if="item.points"
+                              :points="item.points"
+                              :fill="(selection.pen.toArrow==item.name)?(item.fill=='#ffffff'?item.fill:'#ee9d3f'):item.fill"
+                              :stroke="(selection.pen.toArrow==item.name)?'#ee9d3f':item.stroke"
+                              :strokeWidth="item['stroke-width']"
+                            ></polygon>
+                            <circle
+                              v-if="item.cx"
+                              :cx="item.cx"
+                              :cy="item.cy"
+                              :r="item.r"
+                              :fill="(selection.pen.toArrow==item.name)?(item.fill=='#ffffff'?item.fill:'#ee9d3f'):item.fill"
+                              :stroke="(selection.pen.toArrow==item.name)?'#ee9d3f':item.stroke"
+                              :strokeWidth="item['stroke-width']"
+                            ></circle>
+                          </g>
+                        </svg>
+                      </div>
+                    </el-option>
+                  </el-select>
+                </div>
+              </div>
+
+              <div class="props-pen-item" v-if="selection.pen.name!=='image'">
+                <div>线条宽度（px）</div>
+                <div class="p10 pl0">
+                  <el-input-number :precision="2" controls-position="right" size="small" name="x" class="input"
+                                   v-model.number="selection.pen.data.lineWidth"
+                                   :readonly="readonly" required @change="onChange('lineWidth')"></el-input-number>
+                </div>
+              </div>
+
+              <div class="props-pen-item" v-if="selection.pen.name!=='image'">
+                <div>线条颜色</div>
+                <div class="p10 pl0">
+                  <el-color-picker @active-change="(val)=>colorChange(val,'strokeStyle')"
+                                   v-model="selection.pen.strokeStyle" size="mini"></el-color-picker>
+                </div>
+              </div>
+              <div class="props-pen-item" v-if="selection.pen.name!=='image'">
+                <div>箭头颜色</div>
+                <div class="p10 pl0">
+                  <el-color-picker @active-change="(val)=>colorChange(val,'arrowColor')"
+                                   v-model="selection.pen.fromArrowColor" size="mini"></el-color-picker>
+                </div>
+              </div>
+
+              <div class="props-pen-item" v-if="selection.pen && !selection.pen.bkType&&!selection.pen.type">
+                <div>背景颜色</div>
+                <div class="p10 pl0">
+                  <el-color-picker @active-change="(val)=>colorChange(val,'fillStyle')"
+                                   v-model="selection.pen.fillStyle" size="mini"></el-color-picker>
+                </div>
+              </div>
+
+              <div class="props-pen-item" v-if="selection.pen">
+                <div>透明度（0 - 1）</div>
+                <div class="p10 pl0">
+                  <el-input-number :precision="2" name="globalAlpha" class="input full"
+                                   v-model.Number="selection.pen.globalAlpha"
+                                   controls-position="right" size="small" :readonly="readonly" @change="onChange()"
+                                   :min="0.01"
+                                   :max="1"></el-input-number>
+                </div>
+              </div>
+
+            </div>
+          </el-collapse-item>
+          <!--动画-->
+          <el-collapse-item title="动画" name="5" v-if="selection.pen&&selection.pen.type">
+            <div class="flex flex-warp">
+              <div class="props-pen-item">
+                <div>动画类型</div>
+                <div class="p10 pl0">
+                  <el-select v-model="selection.pen.animateType" placeholder="请选择" size="small"
+                             :popper-append-to-body="false" @change="onAnimate">
+                    <el-option v-for="(item,index) in lineAnimateOptions" :value="item.id" :key="index"
+                               :label="item.name"></el-option>
+                  </el-select>
+                </div>
+              </div>
+
+              <div class="props-pen-item">
+                <div>圆点大小（px）</div>
+                <div class="p10 pl0">
+                  <el-input-number :precision="2" controls-position="right" size="small" name="x" class="input"
+                                   v-model.number="selection.pen.animateDotSize"
+                                   :readonly="readonly" required @change="onChange()" :min="0"></el-input-number>
+                </div>
+              </div>
+
+              <div class="props-pen-item">
+                <div>线条颜色</div>
+                <div class="p10 pl0">
+                  <el-color-picker @active-change="(val)=>colorChange(val,'animateColor')"
+                                   v-model="selection.pen.animateColor" size="mini"></el-color-picker>
+                </div>
+              </div>
+
+              <!--<div class="props-pen-item">-->
+              <!--<div>快慢</div>-->
+              <!--<div class="p10 pl0">-->
+              <!--<el-slider v-model="selection.pen.animateSpan" :min="1"  :max="5"></el-slider>-->
+              <!--</div>-->
+              <!--</div>-->
+
+              <!--<div class="props-pen-item">-->
+              <!--<div>是否播放 </div>-->
+              <!--<div class="p10 pl0">-->
+              <!--<el-button @click="selection.pen.animateStart=1;onAnimate()" size="mini">-->
+              <!--播放-->
+              <!--</el-button>-->
+              <!--<el-button @click="selection.pen.animateStart=0;onAnimate()" size="mini">-->
+              <!--暂停-->
+              <!--</el-button>-->
+              <!--</div>-->
+              <!--</div>-->
+
+              <div class="props-pen-item">
+                <div>开启</div>
+                <!--自动播放-->
+                <div class="p10 pl0">
+                  <el-switch
+                    v-model="selection.pen.animatePlay"
+                    :active-value="true"
+                    :inactive-value="false"
+                    active-color="#ee9d3f"
+                    @change="()=>{onAnimate()}">
+                  </el-switch>
+                </div>
+              </div>
+            </div>
+
+          </el-collapse-item>
+        </el-collapse>
+        <div>
+
+        </div>
+      </el-tab-pane>
+      <!--<el-tab-pane label="事件" name="2">事件</el-tab-pane>-->
+      <!--<el-tab-pane label="动效" name="3" v-if="selection.pen.type">--><!--</el-tab-pane>-->
+      <!--<el-tab-pane label="结构" name="5">结构</el-tab-pane>-->
+    </el-tabs>
+
+
+    <div v-if="selection.pens" class="">
+      <el-collapse v-model="activeNames">
+        <!--对齐方式-->
+        <el-collapse-item title="对齐" name="1" v-if="selection.pens">
+          <label class="hover pointer mr10 iconLabel" v-for="item in nodesAlign" :title="item.desc">
+            <i :class="['iconfont','iconfontSize16',`icon-align-${item.value}`]"
+               @click="onNodesAlign(item.value)"></i>
+          </label>
+        </el-collapse-item>
+        <!--排版-->
+        <el-collapse-item title="排版" name="2" v-if="selection.pens">
+          <div class="mt10">
+            <div class="flex middle mb10">
+              <label>最大宽度：</label>
+              <div class="full pr10">
+                <el-input-number :precision="2" controls-position="right" type="number" class="input" size="small"
+                                 v-model.number="layout.maxWidth" title="超出最大宽度换行"></el-input-number>
+              </div>
+            </div>
+            <div class="flex middle mb10">
+              <label>节点宽度：</label>
+              <div class="full pr10">
+                <el-input-number :precision="2" controls-position="right" type="number" class="input" size="small"
+                                 v-model.number="layout.nodeWidth" title="固定每个节点的宽度"></el-input-number>
+              </div>
+            </div>
+            <div class="flex middle mb10">
+              <label>节点高度：</label>
+              <div class="full pr10">
+                <el-input-number :precision="2" controls-position="right" type="number" class="input" size="small"
+                                 v-model.number="layout.nodeHeight" title="固定每个节点的高度"></el-input-number>
+              </div>
+            </div>
+            <div class="flex middle mb10">
+              <label>水平个数：</label>
+              <div class="full pr10">
+                <el-input-number :precision="2" type="number" controls-position="right" class="input" size="small"
+                                 v-model.number="layout.maxCount"
+                                 title="超出最大个数，将自动计算水平间距（下面水平间距设置将无效）"></el-input-number>
+              </div>
+            </div>
+            <div class="flex middle mb10">
+              <label>水平间距：</label>
+              <div class="full pr10">
+                <el-input-number :precision="2" controls-position="right" type="number" class="input" size="small"
+                                 v-model.number="layout.spaceWidth" title="节点之间水平间距（px）"></el-input-number>
+              </div>
+            </div>
+            <div class="flex middle mb10">
+              <label>垂直间距：</label>
+              <div class="full pr10">
+                <el-input-number :precision="2" controls-position="right" type="number" class="input" size="small"
+                                 v-model.number="layout.spaceHeight" title="节点之间垂直间距（px）"></el-input-number>
+              </div>
+            </div>
+            <div class="flex middle">
+              <label></label>
+              <div class="full pr10">
+                <button class="button primary" @click="onLayout">开始排版</button>
+              </div>
+            </div>
+          </div>
+        </el-collapse-item>
+      </el-collapse>
+    </div>
+    <!-- 选中为空 -->
+    <div v-if="!selection.pen && !selection.pens">
+      <div class="mt10">
+        <div class="flex middle mb10">
+          <label>文件名称：</label>
+          <div class="full pr10">
+            <el-input class="input" size="small" v-model="topologyData.data.name" placeholder="topo名称"></el-input>
+          </div>
+        </div>
+
+        <div class="flex middle special-select mb10">
+          <label>默认线型：</label>
+          <div class="full pr10">
+            <el-select v-model="topologyData.data.lineName" placeholder="请选择" size="small"
+                       :popper-append-to-body="false"
+                       @change="changeTopologyOpt(topologyData.data.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==topologyData.data.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="(topologyData.data.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>
+
+        <div class="flex middle mb10">
+          <label>默认线宽：</label>
+          <div class="full pr10">
+            <el-input-number :precision="2"
+                             controls-position="right"
+                             size="small"
+                             name="x" class="input"
+                             v-model.number="topologyData.data.lineWidth"
+                             required
+                             @change="changeTopologyOpt(topologyData.data.lineWidth,'lineWidth')">
+            </el-input-number>
+          </div>
+        </div>
+
+        <div class="flex middle special-select mb10">
+          <label>默认开始箭头：</label>
+          <div class="full pr10">
+            <el-select v-model="topologyData.data.fromArrow" placeholder="请选择" size="small"
+                       :popper-append-to-body="false"
+                       @change="changeTopologyOpt(topologyData.data.fromArrow,'fromArrow')">
+              <div slot="prefix">
+                <div class="icon-item">
+                  <svg>
+                    <g fill="none" stroke="black" stroke-width="1" v-for="(item,index) in penLineFromTOArrow"
+                       :key="index" v-if="topologyData.data.fromArrow==item.name">
+                      <path :d="item.d"></path>
+                      <polygon v-if="item.points" :points="item.points" :fill="item.fill" :stroke="item.stroke"
+                               :strokeWidth="item['stroke-width']"></polygon>
+                      <circle v-if="item.cx" :cx="item.cx" :cy="item.cy" :r="item.r" :fill="item.fill"
+                              :stroke="item.stroke" :strokeWidth="item['stroke-width']"></circle>
+                    </g>
+                  </svg>
+                </div>
+              </div>
+              <el-option v-for="(item,index) in penLineFromTOArrow" :value="item.name" :key="index">
+                <div class="icon-item">
+                  <svg>
+                    <g fill="none" :stroke="(topologyData.data.fromArrow==item.name)?'#ee9d3f':'black'"
+                       stroke-width="1">
+                      <path :d="item.d"></path>
+                      <polygon
+                        v-if="item.points"
+                        :points="item.points"
+                        :fill="(topologyData.data.fromArrow==item.name)?(item.fill=='#ffffff'?item.fill:'#ee9d3f'):item.fill"
+                        :stroke="(topologyData.data.fromArrow==item.name)?'#ee9d3f':item.stroke"
+                        :strokeWidth="item['stroke-width']"
+                      ></polygon>
+                      <circle
+                        v-if="item.cx"
+                        :cx="item.cx"
+                        :cy="item.cy"
+                        :r="item.r"
+                        :fill="(topologyData.data.fromArrow==item.name)?(item.fill=='#ffffff'?item.fill:'#ee9d3f'):item.fill"
+                        :stroke="(topologyData.data.fromArrow==item.name)?'#ee9d3f':item.stroke"
+                        :strokeWidth="item['stroke-width']"
+                      ></circle>
+                    </g>
+                  </svg>
+                </div>
+              </el-option>
+            </el-select>
+          </div>
+        </div>
+
+        <div class="flex middle special-select mb10">
+          <label>默认结束箭头：</label>
+          <div class="full pr10">
+            <el-select v-model="topologyData.data.toArrow" placeholder="请选择" size="small" :popper-append-to-body="false"
+                       @change="changeTopologyOpt('toArrow')">
+              <div slot="prefix">
+                <div class="icon-item">
+                  <svg>
+                    <g fill="none" stroke="black" stroke-width="1" v-for="(item,index) in penLineFromTOArrow"
+                       :key="index" v-if="topologyData.data.toArrow==item.name">
+                      <path :d="item.d"></path>
+                      <polygon v-if="item.points" :points="item.points" :fill="item.fill" :stroke="item.stroke"
+                               :strokeWidth="item['stroke-width']"></polygon>
+                      <circle v-if="item.cx" :cx="item.cx" :cy="item.cy" :r="item.r" :fill="item.fill"
+                              :stroke="item.stroke" :strokeWidth="item['stroke-width']"></circle>
+                    </g>
+                  </svg>
+                </div>
+              </div>
+              <el-option v-for="(item,index) in penLineFromTOArrow" :value="item.name" :key="index">
+                <div class="icon-item">
+                  <svg>
+                    <g fill="none" :stroke="(topologyData.data.toArrow==item.name)?'#ee9d3f':'black'" stroke-width="1">
+                      <path :d="item.d"></path>
+                      <polygon
+                        v-if="item.points"
+                        :points="item.points"
+                        :fill="(topologyData.data.toArrow==item.name)?(item.fill=='#ffffff'?item.fill:'#ee9d3f'):item.fill"
+                        :stroke="(topologyData.data.toArrow==item.name)?'#ee9d3f':item.stroke"
+                        :strokeWidth="item['stroke-width']"
+                      ></polygon>
+                      <circle
+                        v-if="item.cx"
+                        :cx="item.cx"
+                        :cy="item.cy"
+                        :r="item.r"
+                        :fill="(topologyData.data.toArrow==item.name)?(item.fill=='#ffffff'?item.fill:'#ee9d3f'):item.fill"
+                        :stroke="(topologyData.data.toArrow==item.name)?'#ee9d3f':item.stroke"
+                        :strokeWidth="item['stroke-width']"
+                      ></circle>
+                    </g>
+                  </svg>
+                </div>
+              </el-option>
+            </el-select>
+          </div>
+        </div>
+
+        <div class="flex middle mb10">
+          <label>背景颜色：</label>
+          <div class="full pr10">
+            <el-color-picker @active-change="(val)=>changeTopologyOpt(val,'bkColor')"
+                             v-model="topologyData.data.bkColor" size="mini" popper-class="can-clear"></el-color-picker>
+          </div>
+        </div>
+
+        <div class="flex middle mb10">
+          <label>背景图片：</label>
+          <div class="full pr10">
+            <!--暂时是input 输入网址-->
+            <el-input class="input" size="small" v-model="topologyData.data.bkImage" placeholder="背景图片网址"></el-input>
+          </div>
+        </div>
+
+        <div class="flex middle mb10">
+          <label>背景网格：</label>
+          <div class="full pr10">
+            <el-switch
+              v-model="topologyData.data.grid"
+              :active-value="true"
+              :inactive-value="false"
+              active-color="#ee9d3f"
+              @change="changeTopologyOpt(topologyData.data.grid,'grid')">
+            </el-switch>
+          </div>
+        </div>
+
+        <div class="flex middle mb10">
+          <label>网格颜色：</label>
+          <div class="full pr10">
+            <el-color-picker @active-change="(val)=>changeTopologyOpt(val,'gridColor')"
+                             v-model="topologyData.data.gridColor" size="mini"
+                             popper-class="can-clear"></el-color-picker>
+          </div>
+        </div>
+
+        <div class="flex middle mb10">
+          <label>网格大小：</label>
+          <div class="full pr10">
+            <el-input-number :precision="2" controls-position="right" size="small" name="x" class="input"
+                             v-model.number="topologyData.data.gridSize"
+                             :readonly="readonly" required
+                             @change="changeTopologyOpt(topologyData.data.gridSize,'gridSize')"></el-input-number>
+          </div>
+        </div>
+
+        <div class="flex middle mb10">
+          <label>标尺：</label>
+          <div class="full pr10">
+            <el-switch
+              v-model="topologyData.data.rule"
+              :active-value="true"
+              :inactive-value="false"
+              active-color="#ee9d3f"
+              @change="changeTopologyOpt(topologyData.data.rule,'rule')">
+            </el-switch>
+          </div>
+        </div>
+
+        <div class="flex middle mb10">
+          <label>标尺颜色：</label>
+          <div class="full pr10">
+            <el-color-picker @active-change="(val)=>changeTopologyOpt(val,'ruleColor')"
+                             v-model="topologyData.data.ruleColor" size="mini"
+                             popper-class="can-clear"></el-color-picker>
+          </div>
+        </div>
+
+      </div>
+    </div>
+
+  </div>
+</template>
+
+<script>
+  import {alignNodes,spaceBetween,layout} from '@topology/layout';
+  import {getTopology} from "../../js/common";
+  // import ChartMetric from "./chartMetric";
+  import chartDataFormat from '../../../charts/chartDataFormat';
+  import promqlInput from "../../../page/dashboard/explore/promqlInput";
+  import {getUUID, resetZIndex} from "../../../common/js/common";
+  var rz = {
+    methods: {
+      rz(e) {
+        resetZIndex(e);
+      }
+    }
+  };
+  export default {
+    //pen.type 0为node 1位line
+    data(){
+      return {
+        expressions: [],
+        chartTypeList:[
+          {
+            id:"line",
+            name:this.$t("dashboard.panel.chartForm.typeVal.line.label")
+          },
+          {
+            id:'stackArea',
+            name:this.$t("dashboard.panel.chartForm.typeVal.stackArea.label")
+          },
+          {
+            id:"bar",
+            name:this.$t("dashboard.panel.chartForm.typeVal.bar.label")
+          },
+          {
+            id:"table",
+            name:this.$t("dashboard.panel.chartForm.typeVal.table.label")
+          },
+        ],
+        aggregationList:[
+          {
+            id:"last",
+            name:'last'
+          },{
+            id:"first",
+            name:'first'
+          },{
+            id:"min",
+            name:'min'
+          },{
+            id:"max",
+            name:'max'
+          },{
+            id:"avg",
+            name:'avg'
+          },{
+            id:"count",
+            name:'count'
+          },{
+            id:"sum",
+            name:'sum'
+          }
+        ],
+        metricList: [], // metric列表
+        metricCascaderList:[],//metric级联列表
+        metricAllData:new Map(),//存放所有的project-module-metric-labelValue，避免重复加载
+        metricOptions: [],
+        unitOptions:chartDataFormat.unitOptions(),
+        lineId:null,
+        lineIsJson:false,
+        lineData:'',
+        penId:null,
+        penIsJson:false,
+        penData:'',
+        tab:'1',
+        drowdown:0,
+        readonly:false,
+        topologyData:{
+          data:{
+            name:'',
+            bkColor:undefined,
+            bkImage:'',
+            grid:false,
+            gridSize:'',
+            gridColor:undefined,
+            rule:false,
+            ruleColor:undefined,
+            lineName:'curve',
+            lineWidth:1,
+            fromArrow:'',
+            toArrow:'triangleSolid',
+          }
+        },
+        pen:{
+          dash:'',
+          font:'',
+          lineWidth:'',
+          strokeStyle:'',
+          textMaxLine:'',
+          textOffsetX:'',
+          textOffsetY:'',
+          globalAlpha:'',
+        },
+        penNumber:'',
+        nodesAlign:[//对齐方式
+          {
+            value:'left',
+            desc:'左对齐'
+          },{
+            value:'right',
+            desc:'右对齐'
+          },{
+            value:'top',
+            desc:'顶部对齐'
+          },{
+            value:'bottom',
+            desc:'底部对齐'
+          },{
+            value:'center',
+            desc:'垂直居中'
+          },{
+            value:'middle',
+            desc:'水平居中'
+          }],
+        layout:{//显示对应属性
+          maxWidth:1000,
+          nodeWidth:0,
+          nodeHeight:0,
+          maxCount:0,
+          spaceWidth:30,
+          spaceHeight:30
+        },
+        activeNames:['1','2','3','4','5'],
+        show:{//显示对应属性
+          pos:true,
+          layout:true,
+          looks:true,
+        },
+        data:{},
+        penDash:[
+          {d:'M5 14 l85 0',"stroke-dasharray":""},
+          {d:'M5 14 l85 0',"stroke-dasharray":"5,5"},
+          {d:'M5 14 l85 0',"stroke-dasharray":"10,10"},
+          {d:'M5 14 l85 0',"stroke-dasharray":"10,10,2,10"},
+        ],
+        penLineType:[
+          {d:'M5 14 a100,50 0 0,1 85,0',"stroke-dasharray":"",name:'curve'},
+          {d:'M5 8 l40 0 l0 12 l40 0',"stroke-dasharray":"",name:'polyline'},
+          {d:'M5 14 l85 0',"stroke-dasharray":"",name:'line'},
+          {d:'M5 20 C0,8 50,0 85,0',"stroke-dasharray":"",name:'mind'},
+        ],
+        penLineFromTOArrow:[
+          {d:'M5 14 l85 0',"points":"",fill:'',stroke:"",'stroke-width':"",name:''},
+          {d:'M5 14 l85 0',"points":"5 14,20 9,20 19",fill:'#000000',stroke:"",'stroke-width':"",name:'triangleSolid'},
+          {
+            d:'M5 14 l85 0',
+            "points":"5 14,20 9,20 19",
+            fill:'#ffffff',
+            stroke:"#000000",
+            'stroke-width':"1",
+            name:'triangle'
+          },
+          {d:'M5 14 l85 0',fill:'#000000',stroke:"",'stroke-width':"",cx:"10",cy:"14",r:"5",name:'circleSolid'},
+          {d:'M5 14 l85 0',fill:'#ffffff',stroke:"#000000",'stroke-width':"1",cx:"10",cy:"14",r:"5",name:'circle'},
+        ],
+        lineAnimateOptions:[
+          {id:1,name:'水流'},
+          {id:'beads',name:'水珠流动'},
+          {id:'dot',name:'圆点'},
+          {id:'comet',name:'彗星'},
+        ],
+      }
+    },
+    mixins: [rz],
+    components:{
+      promqlInput
+    },
+    computed:{},
+    props:{
+      selection:{
+        type:Object,
+        require:true
+      },
+      index:{
+        type:Number,
+        require:true,
+      },
+      modules:{}
+    },
+    watch:{
+      selection:{
+        handler(n){
+          if(n){
+            this.drowdown=0;
+          }
+        },
+        deep:true,
+        immediate:true,
+      },
+      'topologyData.data':{
+        handler(n){
+          setTimeout(()=>{
+            let data=getTopology(this.index).data;
+            Object.keys(this.topologyData.data).forEach((key)=>{
+              data[key]=this.topologyData.data[key];
+            });
+            getTopology(this.index).render();
+          })
+        },
+        deep:true,
+        immediate:true,
+      }
+    },
+    mounted(){
+      this.queryMetrics();
+      let dataOption=getTopology(this.index).data;
+      Object.keys(this.topologyData.data).forEach((key)=>{
+        this.topologyData.data[key]=dataOption[key]?dataOption[key]:this.topologyData.data[key]
+      });
+      this.topologyData.data.grid= !!getTopology(this.index).data.grid;
+      this.topologyData.data.rule= !!getTopology(this.index).data.rule;
+    },
+    updated(){
+      if(!this.selection.pen){//没选中node line返回
+        return;
+      }
+      if(this.penId===this.selection.pen.id){
+        return;
+      }
+      if(this.selection.pen.id){
+        this.selection.expand=false;
+        this.penId=this.selection.pen.id;
+        let originData=this.selection.pen.data;
+        this.penIsJson=this.isJson(originData);
+        this.penData=this.penIsJson?
+          JSON.stringify(originData,null,4):
+          this.penData=originData;
+      }
+    },
+    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);
+            }
+          }
+        })
+      },
+      tabClick(n){
+        console.log(n);
+        if(this.selection.pen&&this.tab=='1'){
+
+        }
+      },
+      moduleIdChange(n){
+        this.selection.pen.data.moduleName=this.modules.find(item=>item.id===n).name;
+      },
+      onChange(value){
+        if(value==='lineWidth'){
+          this.pen.lineWidth=this.selection.pen.data.lineWidth;
+        }
+        if(this.selection.pens){
+          for(const item of this.selection.pens){
+            item.dash=this.pen.dash;
+            item.strokeStyle=this.pen.strokeStyle;
+            item.lineWidth=this.pen.lineWidth;
+            item.globalAlpha=this.pen.globalAlpha;
+            item.font=Object.assign({},this.pen.font);
+            item.textMaxLine=this.pen.textMaxLine;
+            item.textOffsetX=this.pen.textOffsetX;
+            item.textOffsetY=this.pen.textOffsetY;
+          }
+        }
+        if(!this.selection.pen.type||this.selection.pens){
+          this.$emit('change',this.selection.pen||this.selection.pens);
+        }else{// 线更新
+          this.$emit('change');
+        }
+      },
+      changeExpand(){
+        this.selection.expand= !this.selection.expand;
+      },
+      isJson(obj){
+        return typeof (obj)=="object"&&Object.prototype.toString.call(obj).toLowerCase()=="[object object]"&& !obj.length;
+      },
+
+      //组件事件
+      onNodesAlign(align){//对齐node
+        alignNodes(getTopology(this.index).activeLayer.pens,getTopology(this.index).activeLayer.rect,align);
+        getTopology(this.index).updateProps();
+      },
+      onSpaceBetween(){
+        spaceBetween(getTopology(this.index).activeLayer.pens,getTopology(this.index).activeLayer.rect.width);
+        getTopology(this.index).updateProps();
+      },
+      onLayout(){//改变布局
+        layout(getTopology(this.index).activeLayer.pens,this.layout);
+        getTopology(this.index).updateProps();
+      },
+      onClickDash(number){//改变线型
+        this.pen.dash=number;
+        this.drowdown=0;
+        if(this.selection.pen){
+          this.selection.pen.dash=number;
+        }
+
+        this.onChange();
+      },
+      onClickName(name){
+        this.pen.name=name;
+        this.drowdown=0;
+        if(this.selection.pen){
+          this.selection.pen.name=name;
+        }
+        this.onChange();
+      },
+      colorChange(val,name){//改变颜色
+        if(name==='arrowColor'){
+          this.selection.pen.fromArrowColor=this.colorRGBtoHex(val);
+          this.selection.pen.toArrowColor=this.colorRGBtoHex(val);
+          this.selection.pen.data['fromArrowColor']=this.colorRGBtoHex(val);
+          this.selection.pen.data['toArrowColor']=this.colorRGBtoHex(val);
+        }else{
+          this.selection.pen[name]=this.colorRGBtoHex(val);
+        }
+        this.selection.pen.data[name]=this.colorRGBtoHex(val);
+
+
+        this.onChange();
+      },
+      changeTopologyOpt(val,key){
+        this.topologyData.data[key]=this.colorRGBtoHex(val);
+        // getTopology(this.index).data[key]=val;
+        // getTopology(this.index).render();
+      },
+      colorRGBtoHex(color){//获取颜色16进制数
+        if(!color){
+          return ""
+        }
+        ;
+        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;
+      },
+      onClickToArrow(arrow){
+        this.selection.pen.toArrow=arrow;
+        this.drowdown=0;
+        this.onChange();
+      },
+      onClickFromArrow(arrow){
+        this.selection.pen.fromArrow=arrow;
+        this.drowdown=0;
+        this.onChange();
+      },
+      onAnimate(val){
+        this.selection.pen.animateStart=this.selection.pen.animateStart?Date.now():0;
+        this.selection.pen.data.animatePlay=this.selection.pen.animatePlay;
+        this.onChange();
+        this.$emit('animate');
+      },
+      delTopologyPen(){
+        let delObj=this.selection.pen?this.selection.pen.id:this.selection.pens
+        this.$emit('del',delObj);
+      },
+      getMetricOptions() {
+        return this.metricOptions;
+      },
+      addExpression(){
+        this.selection.pen.data.expressArr.push('');
+        this.selection.pen.data.legends.push('');
+      },
+      expressionChange(item){
+
+      },
+      removeExpression(index) {
+        if (this.selection.pen.data.expressArr.length > 1) {
+          this.selection.pen.data.expressArr.splice(index, 1);
+          this.selection.pen.data.legends.splice(index, 1);
+          this.$nextTick(() => {
+            this.expressions.forEach((ex, index) => {
+              if (ex) {
+                this.$refs[`promql-${index}`][0].metricChange(ex);
+              }
+            });
+          });
+        }
+      },
+    }
+  }
+</script>
+<style scoped>
+  .props-box label {
+    line-height: 32px;
+    width: 100px;
+    font-size: 14px;
+    text-align: right;
+  }
+
+  .props-box .iconLabel {
+    line-height: 32px;
+    width: 24px;
+    font-size: 14px;
+    text-align: center;
+  }
+
+</style>
+<style>
+  .can-clear.el-color-dropdown .el-color-dropdown__link-btn {
+    display: inline-block !important;
+    margin-right: 5px;
+  }
+</style>
+<style lang="scss" scoped>
+  /deep/ .el-tabs.el-tabs--card {
+    height: 100%;
+
+    .el-tabs__content {
+      height: calc(100% - 55px) !important;
+      overflow-y: auto;
+    }
+  }
+
+  /deep/ .el-collapse-item__header {
+    padding: 0 10px;
+    background-color: #F9F9F9;
+  }
+
+  /deep/ .el-collapse-item__wrap {
+    padding: 0 10px;
+    background-color: #F9F9F9;
+  }
+
+  /deep/ .el-collapse-item__content {
+    padding: 12px 0px;
+  }
+
+  .mb10 {
+    margin-bottom: 10px;
+  }
+
+  .mt10 {
+    margin-top: 10px;
+  }
+
+  .p10 {
+    padding: 10px;
+  }
+
+  .pl0 {
+    padding-left: 0;
+  }
+
+  .special-select .el-select.el-select--small {
+    width: 100%;
+  }
+
+  .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%;
+  }
+
+  .props-box {
+    position: relative;
+    width: calc(100% - 20px);
+    height: calc(100% - 35px);
+    padding-left: 10px;
+
+    .iconfont {
+      cursor: pointer;
+    }
+
+    .iconfontSize16 {
+      font-size: 16px;
+      margin-right: 5px;
+    }
+
+    .flex {
+      display: flex;
+
+      .full {
+        flex: 1;
+      }
+    }
+
+    .flex-warp {
+      flex-wrap: wrap;
+    }
+
+    .props-pen-item {
+      width: 50%;
+    }
+
+    .icon-item {
+      width: 100%;
+      height: 100%;
+    }
+
+    .icon-item svg {
+      width: 100%;
+      height: 100%;
+    }
+
+    .del-btn {
+      position: absolute;
+      top: 0;
+      right: 0;
+      border: none;
+      cursor: pointer;
+      z-index: 2;
+    }
+
+    .del-btn:hover {
+      background: #D8D7D7 !important;
+    }
+
+    .bottom {
+      font-size: 14px;
+      position: absolute;
+      bottom: 10px;
+      left: 10px;
+    }
+
+    /deep/ .el-input-number--small {
+      width: auto;
+    }
+  }
+</style>
diff --git a/nezha-fronted/src/components/common/project/L5/css/iconfont.css b/nezha-fronted/src/components/common/project/L5/css/iconfont.css
new file mode 100644
index 000000000..a79ce8b86
--- /dev/null
+++ b/nezha-fronted/src/components/common/project/L5/css/iconfont.css
@@ -0,0 +1,640 @@
+@font-face {font-family: "iconfont";
+  src: url('//at.alicdn.com/t/font_1113798_m8wtja2grda.eot?t=1582278460666'); /* IE9 */
+  src: url('//at.alicdn.com/t/font_1113798_m8wtja2grda.eot?t=1582278460666#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
+  url('//at.alicdn.com/t/font_1113798_m8wtja2grda.woff?t=1582278460666') format('woff'),
+  url('//at.alicdn.com/t/font_1113798_m8wtja2grda.ttf?t=1582278460666') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
+  url('//at.alicdn.com/t/font_1113798_m8wtja2grda.svg?t=1582278460666#iconfont') format('svg'); /* iOS 4.1- */
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-bk-color:before {
+  content: "\e647";
+}
+
+.icon-json:before {
+  content: "\e63f";
+}
+
+.icon-zip:before {
+  content: "\e65b";
+}
+
+.icon-tag:before {
+  content: "\e752";
+}
+
+.icon-attention:before {
+  content: "\e73d";
+}
+
+.icon-app:before {
+  content: "\e63e";
+}
+
+.icon-huaxue:before {
+  content: "\e9bc";
+}
+
+.icon-paobu:before {
+  content: "\e70d";
+}
+
+.icon-yangguang:before {
+  content: "\e653";
+}
+
+.icon-bar-chart:before {
+  content: "\e63c";
+}
+
+.icon-line-chart:before {
+  content: "\e851";
+}
+
+.icon-dashboard-chart:before {
+  content: "\e68b";
+}
+
+.icon-pie-chart:before {
+  content: "\e63d";
+}
+
+.icon-mind:before {
+  content: "\e63b";
+}
+
+.icon-svg:before {
+  content: "\e86e";
+}
+
+.icon-loop:before {
+  content: "\e638";
+}
+
+.icon-full-screen:before {
+  content: "\e63a";
+}
+
+.icon-pc:before {
+  content: "\e639";
+}
+
+.icon-play:before {
+  content: "\e636";
+}
+
+.icon-pause:before {
+  content: "\e698";
+}
+
+.icon-data:before {
+  content: "\e64c";
+}
+
+.icon-align-middle:before {
+  content: "\ec5b";
+}
+
+.icon-align-center:before {
+  content: "\e635";
+}
+
+.icon-align-bottom:before {
+  content: "\ec58";
+}
+
+.icon-align-right:before {
+  content: "\ec5a";
+}
+
+.icon-align-top:before {
+  content: "\e651";
+}
+
+.icon-align-left:before {
+  content: "\ec59";
+}
+
+.icon-from-line:before {
+  content: "\e630";
+}
+
+.icon-to-line:before {
+  content: "\ec56";
+}
+
+.icon-flow-event:before {
+  content: "\e665";
+}
+
+.icon-to-circleSolid:before {
+  content: "\e62b";
+}
+
+.icon-from-circleSolid:before {
+  content: "\ec55";
+}
+
+.icon-to-diamondSolid:before {
+  content: "\ec54";
+}
+
+.icon-from-diamondSolid:before {
+  content: "\e62e";
+}
+
+.icon-from-triangleSolid:before {
+  content: "\e634";
+}
+
+.icon-to-triangleSolid:before {
+  content: "\ec53";
+}
+
+.icon-from-:before {
+  content: "\e633";
+}
+
+.icon-to-:before {
+  content: "\ec52";
+}
+
+.icon-from-lineUp:before {
+  content: "\ec51";
+}
+
+.icon-to-lineDown:before {
+  content: "\e632";
+}
+
+.icon-to-lineUp:before {
+  content: "\e631";
+}
+
+.icon-from-lineDown:before {
+  content: "\ec50";
+}
+
+.icon-from-circle:before {
+  content: "\ec4e";
+}
+
+.icon-to-circle:before {
+  content: "\e62f";
+}
+
+.icon-from-diamond:before {
+  content: "\e62c";
+}
+
+.icon-to-diamond:before {
+  content: "\ec4c";
+}
+
+.icon-to-triangle:before {
+  content: "\e62a";
+}
+
+.icon-from-triangle:before {
+  content: "\ec4b";
+}
+
+.icon-picture:before {
+  content: "\e64e";
+}
+
+.icon-polyline:before {
+  content: "\e629";
+}
+
+.icon-curve:before {
+  content: "\e628";
+}
+
+.icon-folder:before {
+  content: "\e67c";
+}
+
+.icon-share2:before {
+  content: "\e66c";
+}
+
+.icon-class:before {
+  content: "\e627";
+}
+
+.icon-simple-class:before {
+  content: "\e626";
+}
+
+.icon-focus:before {
+  content: "\e622";
+}
+
+.icon-people:before {
+  content: "\e625";
+}
+
+.icon-lifeline:before {
+  content: "\e624";
+}
+
+.icon-fork:before {
+  content: "\ec49";
+}
+
+.icon-fork-v:before {
+  content: "\e621";
+}
+
+.icon-swimlane-v:before {
+  content: "\e620";
+}
+
+.icon-swimlane-h:before {
+  content: "\ec48";
+}
+
+.icon-action:before {
+  content: "\e61f";
+}
+
+.icon-inital:before {
+  content: "\e716";
+}
+
+.icon-final:before {
+  content: "\e61d";
+}
+
+.icon-loading:before {
+  content: "\e61c";
+}
+
+.icon-cube:before {
+  content: "\e6fc";
+}
+
+.icon-help:before {
+  content: "\e61e";
+}
+
+.icon-help-circle:before {
+  content: "\e637";
+}
+
+.icon-line:before {
+  content: "\e61b";
+}
+
+.icon-extern-storage:before {
+  content: "\e60e";
+}
+
+.icon-internal-storage:before {
+  content: "\e60d";
+}
+
+.icon-db:before {
+  content: "\e60c";
+}
+
+.icon-flow-subprocess:before {
+  content: "\e606";
+}
+
+.icon-msg:before {
+  content: "\e61a";
+}
+
+.icon-cloud:before {
+  content: "\e60a";
+}
+
+.icon-text:before {
+  content: "\e619";
+}
+
+.icon-twoway-arrow:before {
+  content: "\e618";
+}
+
+.icon-pentagram:before {
+  content: "\e64b";
+}
+
+.icon-hexagon:before {
+  content: "\e617";
+}
+
+.icon-pentagon:before {
+  content: "\e616";
+}
+
+.icon-triangle:before {
+  content: "\e615";
+}
+
+.icon-rect:before {
+  content: "\e60f";
+}
+
+.icon-flow-queue:before {
+  content: "\e614";
+}
+
+.icon-flow-comment:before {
+  content: "\e613";
+}
+
+.icon-flow-parallel:before {
+  content: "\e612";
+}
+
+.icon-flow-display:before {
+  content: "\e611";
+}
+
+.icon-flow-manually:before {
+  content: "\e610";
+}
+
+.icon-diamond:before {
+  content: "\e604";
+}
+
+.icon-rectangle:before {
+  content: "\e60b";
+}
+
+.icon-flow-ready:before {
+  content: "\e609";
+}
+
+.icon-flow-data:before {
+  content: "\e605";
+}
+
+.icon-flow-document:before {
+  content: "\e601";
+}
+
+.icon-flow-start:before {
+  content: "\e602";
+}
+
+.icon-file:before {
+  content: "\e7b4";
+}
+
+.icon-star-half-o:before {
+  content: "\e828";
+}
+
+.icon-star-o:before {
+  content: "\e82a";
+}
+
+.icon-star:before {
+  content: "\e82b";
+}
+
+.icon-clock:before {
+  content: "\e688";
+}
+
+.icon-triangle-right:before {
+  content: "\e607";
+}
+
+.icon-triangle-left:before {
+  content: "\e608";
+}
+
+.icon-triangle-down:before {
+  content: "\e70f";
+}
+
+.icon-triangle-up:before {
+  content: "\e710";
+}
+
+.icon-dash-dot:before {
+  content: "\e664";
+}
+
+.icon-appreciate:before {
+  content: "\e644";
+}
+
+.icon-check:before {
+  content: "\e645";
+}
+
+.icon-close:before {
+  content: "\e646";
+}
+
+.icon-edit:before {
+  content: "\e649";
+}
+
+.icon-roundcheckfill:before {
+  content: "\e656";
+}
+
+.icon-roundcheck:before {
+  content: "\e657";
+}
+
+.icon-roundclosefill:before {
+  content: "\e658";
+}
+
+.icon-roundclose:before {
+  content: "\e659";
+}
+
+.icon-warnfill:before {
+  content: "\e662";
+}
+
+.icon-warn:before {
+  content: "\e663";
+}
+
+.icon-commentfill:before {
+  content: "\e667";
+}
+
+.icon-likefill:before {
+  content: "\e668";
+}
+
+.icon-like:before {
+  content: "\e669";
+}
+
+.icon-notificationfill:before {
+  content: "\e66a";
+}
+
+.icon-notification:before {
+  content: "\e66b";
+}
+
+.icon-arrow-up:before {
+  content: "\ec57";
+}
+
+.icon-more:before {
+  content: "\e684";
+}
+
+.icon-moreandroid:before {
+  content: "\e6a5";
+}
+
+.icon-cart:before {
+  content: "\e6af";
+}
+
+.icon-delete:before {
+  content: "\e6b4";
+}
+
+.icon-home:before {
+  content: "\e6b8";
+}
+
+.icon-message:before {
+  content: "\e6bc";
+}
+
+.icon-lock:before {
+  content: "\e6c1";
+}
+
+.icon-unlock:before {
+  content: "\e6c2";
+}
+
+.icon-add:before {
+  content: "\e6da";
+}
+
+.icon-appreciatefill:before {
+  content: "\e6e3";
+}
+
+.icon-infofill:before {
+  content: "\e6e4";
+}
+
+.icon-info:before {
+  content: "\e6e5";
+}
+
+.icon-share:before {
+  content: "\e6f3";
+}
+
+.icon-sort:before {
+  content: "\e700";
+}
+
+.icon-copy:before {
+  content: "\e706";
+}
+
+.icon-noticefill:before {
+  content: "\e709";
+}
+
+.icon-notice:before {
+  content: "\e70a";
+}
+
+.icon-font:before {
+  content: "\e6ec";
+}
+
+.icon-angle-left:before {
+  content: "\e697";
+}
+
+.icon-angle-top:before {
+  content: "\e6a6";
+}
+
+.icon-angle-down:before {
+  content: "\e6a7";
+}
+
+.icon-angle-right:before {
+  content: "\e6a8";
+}
+
+.icon-arrow-down:before {
+  content: "\e72d";
+}
+
+.icon-bold:before {
+  content: "\e603";
+}
+
+.icon-search:before {
+  content: "\e623";
+}
+
+.icon-reply:before {
+  content: "\e8ad";
+}
+
+.icon-redo:before {
+  content: "\e8ae";
+}
+
+.icon-download:before {
+  content: "\e691";
+}
+
+.icon-upload:before {
+  content: "\e64a";
+}
+
+.icon-fly:before {
+  content: "\ec46";
+}
+
+.icon-image:before {
+  content: "\eb26";
+}
+
+.icon-panel:before {
+  content: "\e6a2";
+}
+
+.icon-arrow-left:before {
+  content: "\ec47";
+}
+
+.icon-circle:before {
+  content: "\e600";
+}
+
+.icon-round-rect:before {
+  content: "\e62d";
+}
+
+.icon-arrow-right:before {
+  content: "\e6c0";
+}
diff --git a/nezha-fronted/src/components/common/project/L5/css/props.css b/nezha-fronted/src/components/common/project/L5/css/props.css
new file mode 100644
index 000000000..5339f4a27
--- /dev/null
+++ b/nezha-fronted/src/components/common/project/L5/css/props.css
@@ -0,0 +1,464 @@
+@font-face {font-family: "topology";
+  src: url('//at.alicdn.com/t/font_1331132_5lvbai88wkb.eot?t=1564973526855'); /* IE9 */
+  src: url('//at.alicdn.com/t/font_1331132_5lvbai88wkb.eot?t=1564973526855#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
+  url('//at.alicdn.com/t/font_1331132_5lvbai88wkb.woff?t=1564973526855') format('woff'),
+  url('//at.alicdn.com/t/font_1331132_5lvbai88wkb.ttf?t=1564973526855') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
+  url('//at.alicdn.com/t/font_1331132_5lvbai88wkb.svg?t=1564973526855#topology') format('svg'); /* iOS 4.1- */
+}
+
+.topology {
+  font-family: "topology" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.topology-ipad:before {
+  content: "\e664";
+}
+
+.topology-app:before {
+  content: "\e618";
+}
+
+.topology-remote-control:before {
+  content: "\e607";
+}
+
+.topology-browser:before {
+  content: "\e60b";
+}
+
+.topology-185055paintingpalletstreamline:before {
+  content: "\e61b";
+}
+
+.topology-house:before {
+  content: "\e61c";
+}
+
+.topology-map:before {
+  content: "\e61d";
+}
+
+.topology-sound:before {
+  content: "\e631";
+}
+
+.topology-link:before {
+  content: "\e63a";
+}
+
+.topology-umbrella:before {
+  content: "\e64b";
+}
+
+.topology-dashboard:before {
+  content: "\e653";
+}
+
+.topology-settings:before {
+  content: "\e654";
+}
+
+.topology-sync:before {
+  content: "\e657";
+}
+
+.topology-document:before {
+  content: "\e707";
+}
+
+.topology-enter:before {
+  content: "\e63d";
+}
+
+.topology-printer:before {
+  content: "\e67e";
+}
+
+.topology-warning:before {
+  content: "\e6a9";
+}
+
+.topology-office:before {
+  content: "\e605";
+}
+
+.topology-wifi:before {
+  content: "\e637";
+}
+
+.topology-exit:before {
+  content: "\e641";
+}
+
+.topology-api:before {
+  content: "\e616";
+}
+
+.topology-iot:before {
+  content: "\e627";
+}
+
+.topology-stop:before {
+  content: "\e619";
+}
+
+.topology-clock:before {
+  content: "\e75c";
+}
+
+.topology-camera:before {
+  content: "\e78a";
+}
+
+.topology-download:before {
+  content: "\e79c";
+}
+
+.topology-upload:before {
+  content: "\e79f";
+}
+
+.topology-flow:before {
+  content: "\e85a";
+}
+
+.topology-dashboard1:before {
+  content: "\e873";
+}
+
+.topology-unlocked:before {
+  content: "\e87b";
+}
+
+.topology-github:before {
+  content: "\e8fd";
+}
+
+.topology-stop1:before {
+  content: "\e622";
+}
+
+.topology-people:before {
+  content: "\e651";
+}
+
+.topology-email:before {
+  content: "\e67c";
+}
+
+.topology-exit1:before {
+  content: "\e6ab";
+}
+
+.topology-zuoji:before {
+  content: "\e68e";
+}
+
+.topology-rocketmq:before {
+  content: "\e6aa";
+}
+
+.topology-nodejs:before {
+  content: "\e989";
+}
+
+.topology-shoppingcart:before {
+  content: "\e62e";
+}
+
+.topology-wechat:before {
+  content: "\e646";
+}
+
+.topology-kefu:before {
+  content: "\e658";
+}
+
+.topology-people2geren:before {
+  content: "\e673";
+}
+
+.topology-people4geren:before {
+  content: "\e68a";
+}
+
+.topology-pay6:before {
+  content: "\e68f";
+}
+
+.topology-pay3:before {
+  content: "\e691";
+}
+
+.topology-home:before {
+  content: "\e6ac";
+}
+
+.topology-parallel:before {
+  content: "\e748";
+}
+
+.topology-java:before {
+  content: "\e746";
+}
+
+.topology-locked:before {
+  content: "\e791";
+}
+
+.topology-share:before {
+  content: "\e620";
+}
+
+.topology-weibo:before {
+  content: "\e63e";
+}
+
+.topology-error:before {
+  content: "\e6b1";
+}
+
+.topology-success:before {
+  content: "\e6b3";
+}
+
+.topology-website:before {
+  content: "\e70f";
+}
+
+.topology-kaiguan:before {
+  content: "\e67f";
+}
+
+.topology-pc:before {
+  content: "\e600";
+}
+
+.topology-firewall:before {
+  content: "\e630";
+}
+
+.topology-MongoDB:before {
+  content: "\e6f0";
+}
+
+.topology-router:before {
+  content: "\e612";
+}
+
+.topology-antenna:before {
+  content: "\e602";
+}
+
+.topology-safe:before {
+  content: "\e727";
+}
+
+.topology-html:before {
+  content: "\e606";
+}
+
+.topology-data-stream:before {
+  content: "\ebd3";
+}
+
+.topology-bub:before {
+  content: "\ec73";
+}
+
+.topology-satelite:before {
+  content: "\ed48";
+}
+
+.topology-satelite2:before {
+  content: "\ed47";
+}
+
+.topology-antenna2:before {
+  content: "\e679";
+}
+
+.topology-hbase:before {
+  content: "\e67b";
+}
+
+.topology-apiassembly:before {
+  content: "\e67d";
+}
+
+.topology-search:before {
+  content: "\e60f";
+}
+
+.topology-network1:before {
+  content: "\e64d";
+}
+
+.topology-redis:before {
+  content: "\e682";
+}
+
+.topology-db:before {
+  content: "\e645";
+}
+
+.topology-kafka:before {
+  content: "\e604";
+}
+
+.topology-mobile:before {
+  content: "\e63c";
+}
+
+.topology-python:before {
+  content: "\e60e";
+}
+
+.topology-cloud-firewall:before {
+  content: "\e62b";
+}
+
+.topology-sql:before {
+  content: "\e718";
+}
+
+.topology-folder:before {
+  content: "\e70e";
+}
+
+.topology-message:before {
+  content: "\e729";
+}
+
+.topology-building:before {
+  content: "\e601";
+}
+
+.topology-docker:before {
+  content: "\e689";
+}
+
+.topology-cpu:before {
+  content: "\e61f";
+}
+
+.topology-api1:before {
+  content: "\e603";
+}
+
+.topology-api2:before {
+  content: "\e75d";
+}
+
+.topology-cloud-server:before {
+  content: "\e665";
+}
+
+.topology-streaming:before {
+  content: "\e8f9";
+}
+
+.topology-fuwuqi:before {
+  content: "\e614";
+}
+
+.topology-router2:before {
+  content: "\e613";
+}
+
+.topology-jiankong:before {
+  content: "\e61e";
+}
+
+.topology-data1:before {
+  content: "\e761";
+}
+
+.topology-earch:before {
+  content: "\e608";
+}
+
+.topology-data3:before {
+  content: "\e609";
+}
+
+.topology-data2:before {
+  content: "\e60c";
+}
+
+.topology-golang:before {
+  content: "\e615";
+}
+
+.topology-record:before {
+  content: "\e60d";
+}
+
+.topology-streamSQL:before {
+  content: "\e6d3";
+}
+
+.topology-data:before {
+  content: "\e649";
+}
+
+.topology-network:before {
+  content: "\e63b";
+}
+
+.topology-ks:before {
+  content: "\e685";
+}
+
+.topology-rabbitmq:before {
+  content: "\e61a";
+}
+
+.topology-cassandra:before {
+  content: "\e621";
+}
+
+.topology-mysql:before {
+  content: "\e652";
+}
+
+.topology-antenna3:before {
+  content: "\e694";
+}
+
+.topology-list:before {
+  content: "\e610";
+}
+
+.topology-cloud-code:before {
+  content: "\e690";
+}
+
+.topology-iot1:before {
+  content: "\e611";
+}
+
+.topology-pgsql:before {
+  content: "\e706";
+}
+
+.topology-cloud:before {
+  content: "\e60a";
+}
+
+.topology-analytics:before {
+  content: "\e6a5";
+}
+
+.topology-iot2:before {
+  content: "\e617";
+}
+
+.topology-up-down:before {
+  content: "\e623";
+}
diff --git a/nezha-fronted/src/components/common/project/L5/services/canvas.js b/nezha-fronted/src/components/common/project/L5/services/canvas.js
new file mode 100644
index 000000000..9b5f50513
--- /dev/null
+++ b/nezha-fronted/src/components/common/project/L5/services/canvas.js
@@ -0,0 +1,585 @@
+import {register as registerFlow} from '@topology/flow-diagram'
+import {register as registerActivity} from '@topology/activity-diagram'
+import {register as registerSequence} from '@topology/sequence-diagram'
+import {register as registerChart} from '@topology/chart-diagram';
+import { Node, Rect,Point, Direction } from '@topology/core';
+// import { register as registerClass } from './class-diagram/index'
+export let canvas;
+
+export function canvasRegister(){
+  registerFlow();
+  registerActivity();
+  registerSequence();
+  registerChart();
+  // registerClass()
+}
+
+export const Tools=[
+  {
+    group:'基本形状',
+    children:[
+      {
+        name:'rectangleImg',
+        icon:'icon-rect',
+        data:{
+          text:'rect',
+          rect:{
+            width:100,
+            height:100
+          },
+          paddingLeft:10,
+          paddingRight:10,
+          paddingTop:10,
+          paddingBottom:10,
+          name:'rectangleImg',
+          icon: '\ue680',
+          iconFamily: 'nz-icon',
+          iconColor: ''
+        }
+      },
+      {
+        name: 'rectangle',
+        icon: 'icon-cube',
+        data: {
+          rect: {
+            width: 100,
+            height: 100
+          },
+          is3D: true,
+          z: 20,
+          zRotate: 15,
+          name: 'myCube',
+          iconFamily: 'topology',
+          iconColor: '#777',
+          iconSize: 30
+        }
+      },
+      {
+        name:'rectangle',
+        icon:'icon-rect',
+        data:{
+          text:'rect',
+          rect:{
+            width:100,
+            height:100
+          },
+          paddingLeft:10,
+          paddingRight:10,
+          paddingTop:10,
+          paddingBottom:10,
+          name:'rectangle',
+        }
+      },
+      {
+        name:'rectangle',
+        icon:'icon-rectangle',
+        data:{
+          text:'rectangle',
+          rect:{
+            width:200,
+            height:50
+          },
+          paddingLeft:10,
+          paddingRight:10,
+          paddingTop:10,
+          paddingBottom:10,
+          borderRadius:0.1,
+          name:'rectangle',
+          // icon: '\ue680',
+          // iconFamily: 'nz-icon',
+          // iconColor: ''
+        }
+      },
+      {
+        name:'circle',
+        icon:'icon-circle',
+        data:{
+          text:'circle',
+          rect:{
+            width:100,
+            height:100
+          },
+          name:'circle',
+          textMaxLine:1
+        }
+      },
+      {
+        name:'triangle',
+        icon:'icon-triangle',
+        data:{
+          text:'triangle',
+          rect:{
+            width:100,
+            height:100
+          },
+          name:'triangle'
+        }
+      },
+      {
+        name:'diamond',
+        icon:'icon-diamond',
+        data:{
+          text:'diamond',
+          rect:{
+            width:100,
+            height:100
+          },
+          name:'diamond'
+        }
+      },
+      {
+        name:'pentagon',
+        icon:'icon-pentagon',
+        data:{
+          text:'pentagon',
+          rect:{
+            width:100,
+            height:100
+          },
+          name:'pentagon'
+        }
+      },
+      {
+        name:'hexagon',
+        icon:'icon-hexagon',
+        data:{
+          text:'hexagon',
+          rect:{
+            width:100,
+            height:100
+          },
+          paddingTop:10,
+          paddingBottom:10,
+          name:'hexagon'
+        }
+      },
+      {
+        name:'pentagram',
+        icon:'icon-pentagram',
+        data:{
+          text:'pentagram',
+          rect:{
+            width:100,
+            height:100
+          },
+          name:'pentagram'
+        }
+      },
+      {
+        name:'image',
+        icon:'icon-image',
+        data:{
+          text:'Nezha',
+          rect:{
+            width:100,
+            height:100
+          },
+          name:'image',
+          image:'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3488940205,2956353665&fm=26&gp=0.jpg'
+        }
+      },
+    ]
+  },
+  {
+    group: '自定义图片',
+    children: [
+      {
+        name: 'rectangle',
+        icon: 'icon-image',
+        data: {
+          text: 'Nezha',
+          rect: {
+            width: 100,
+            height: 100
+          },
+          name: 'rectangle',
+          image: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3488940205,2956353665&fm=26&gp=0.jpg',
+          imageRatio:true,
+          "imageAlign":"center",
+          iconRect:{
+            "width":80,
+            "height":80,
+          },
+          "fullIconRect":{"width":80,"height":90,"center":{"x":972,"y":456},"ex":1012,"ey":496}
+        }
+      },
+    ],
+  },
+];
+
+export const imageTemp={
+  name: 'rectangleImg',
+  icon: 'icon-image',
+  data: {
+    "type":0,
+    "rect":{
+      "x":922,
+      "y":406,
+      "width":100,
+      "height":100,
+    },
+    "lineWidth":0,
+    "rotate":0,
+    "offsetRotate":0,
+    "globalAlpha":1,
+    "dash":0,
+    "strokeStyle":"#000000",
+    "animatePos":0,
+    "name":"rectangleImg",
+    "lineDashOffset":0,
+    "text":"",
+    "textOffsetX":0,
+    "textOffsetY":0,
+    "visible":true,
+    "zRotate":0,
+    "animateDuration":0,
+    "animateFrames":[],
+    "animateFrame":0,
+    "borderRadius":0,
+    "icon":"",
+    "image":"",
+    "imageAlign":"center",
+    "bkType":0,
+    "gradientAngle":0,
+    "gradientRadius":0.01,
+    "paddingTop":5,
+    "paddingBottom":5,
+    "paddingLeft":5,
+    "paddingRight":5,
+    "paddingLeftNum":5,
+    "paddingRightNum":5,
+    "paddingTopNum":5,
+    "paddingBottomNum":5,
+    "fullIconRect":{"width":80,"height":90,"center":{"x":972,"y":456},"ex":1012,"ey":496}
+  }
+};
+/*自定义图片组件*/
+export function myShape(ctx, node) { //自定义图片组件
+  
+  ctx.beginPath();
+  
+  ctx.rect(node.rect.x,node.rect.y,node.rect.width,node.rect.height);
+  if(node.data.lineWidth<=0){
+    ctx.strokeStyle = 'rgba(0,0,0,0)';
+  }
+  // 必须判空再填充
+  (node.fillStyle || node.bkType) && ctx.fill();
+  ctx.stroke();
+}
+export function myAnchors(node) {
+  node.anchors.push(new Point(node.rect.x, node.rect.y + node.rect.height / 2, Direction.Left));
+  node.anchors.push(new Point(node.rect.x + node.rect.width / 2, node.rect.y, Direction.Up));
+  node.anchors.push(new Point(node.rect.x + node.rect.width, node.rect.y + node.rect.height / 2, Direction.Right));
+  node.anchors.push(new Point(node.rect.x + node.rect.width / 2, node.rect.y + node.rect.height, Direction.Bottom));
+}
+export function myIconRect(node) {
+  node.iconRect = new Rect(node.rect.x+node.paddingLeft, node.rect.y+node.paddingTop, node.rect.width-(node.paddingLeft+node.paddingRight), node.rect.height-20-(node.paddingTop+node.paddingBottom));
+  node.fullIconRect = node.rect;
+}
+export function myTextRect(node) {
+  node.textRect = new Rect(
+    node.rect.x +node.paddingLeft,
+    node.rect.y+node.rect.height-20-node.paddingBottom,
+    node.rect.width -(node.paddingLeft+node.paddingRight),
+    20,
+  );
+  node.fullTextRect = node.rect;
+}
+/*自定义图片组件*/
+
+/*自定义立方体*/
+export function myCubec(ctx, node) {//立方体
+  // ctx.rect(node.rect.x,node.rect.y,node.rect.width,node.rect.height);
+  let x=node.rect.x+10,y=node.rect.y+10,w=node.rect.width-20,h=node.rect.height-20;
+  
+  
+  // LINE MODE
+  ctx.lineJoin = "round";
+  
+  // center face
+  ctx.beginPath();
+  ctx.moveTo(x, y+h/3);
+  ctx.lineTo(x + w*2/3, y+h/3 );
+  ctx.lineTo(x + w*2/3, y +h);
+  ctx.lineTo(x, y + h);
+  ctx.closePath();
+  ctx.fillStyle = node.fillStyle;
+  ctx.strokeStyle =  node.strokeStyle;
+  ctx.stroke();
+  (node.fillStyle || node.bkType) && ctx.fill();
+  
+  // top face
+  ctx.beginPath();
+  ctx.moveTo(x, y+h/3);
+  ctx.lineTo(x + w/3, y);
+  ctx.lineTo(x + w, y);
+  ctx.lineTo(x + w*2/3, y+h/3 );
+  ctx.closePath();
+  ctx.fillStyle = node.fillStyle;
+  ctx.strokeStyle =  node.strokeStyle;
+  ctx.stroke();
+  (node.fillStyle || node.bkType) && ctx.fill();
+  
+  // right face
+  ctx.beginPath();
+  ctx.moveTo(x + w*2/3, y+h/3 );
+  ctx.lineTo(x + w, y);
+  ctx.lineTo(x + w, y+h*2/3);
+  ctx.lineTo(x + w*2/3, y + h);
+  ctx.closePath();
+  ctx.fillStyle = node.fillStyle;
+  ctx.strokeStyle =  node.strokeStyle;
+  ctx.stroke();
+  (node.fillStyle || node.bkType) && ctx.fill();
+  
+  // 必须判空再填充
+  
+}
+export function myCubeAnchors(node) {//立方体锚点
+  node.anchors.push(new Point(node.rect.x, node.rect.y + node.rect.height / 2, Direction.Left));
+  node.anchors.push(new Point(node.rect.x + node.rect.width / 2, node.rect.y, Direction.Up));
+  node.anchors.push(new Point(node.rect.x + node.rect.width, node.rect.y + node.rect.height / 2, Direction.Right));
+  node.anchors.push(new Point(node.rect.x + node.rect.width / 2, node.rect.y + node.rect.height, Direction.Bottom));
+}
+/*自定义立方体*/
+
+
+
+export function onChangeAnimate(node,animateType) {
+  if (node.animateType === 'custom') {
+    return;
+  }
+  
+  node.animateFrames = [];
+  const state = Node.cloneState(node);
+  switch (animateType) {
+    case 'upDown':
+      state.rect.y -= 10;
+      state.rect.ey -= 10;
+      node.animateFrames.push({
+        duration: 100,
+        linear: true,
+        state
+      });
+      node.animateFrames.push({
+        duration: 100,
+        linear: true,
+        state: Node.cloneState(node)
+      });
+      node.animateFrames.push({
+        duration: 200,
+        linear: true,
+        state: Node.cloneState(state)
+      });
+      break;
+    case 'leftRight':
+      state.rect.x -= 10;
+      state.rect.ex -= 10;
+      node.animateFrames.push({
+        duration: 100,
+        linear: true,
+        state: Node.cloneState(state)
+      });
+      state.rect.x += 20;
+      state.rect.ex += 20;
+      node.animateFrames.push({
+        duration: 80,
+        linear: true,
+        state: Node.cloneState(state)
+      });
+      state.rect.x -= 20;
+      state.rect.ex -= 20;
+      node.animateFrames.push({
+        duration: 50,
+        linear: true,
+        state: Node.cloneState(state)
+      });
+      state.rect.x += 20;
+      state.rect.ex += 20;
+      node.animateFrames.push({
+        duration: 30,
+        linear: true,
+        state: Node.cloneState(state)
+      });
+      node.animateFrames.push({
+        duration: 300,
+        linear: true,
+        state: Node.cloneState(node)
+      });
+      break;
+    case 'heart':
+      state.rect.x -= 5;
+      state.rect.ex += 5;
+      state.rect.y -= 5;
+      state.rect.ey += 5;
+      state.rect.width += 5;
+      state.rect.height += 10;
+      node.animateFrames.push({
+        duration: 100,
+        linear: true,
+        state
+      });
+      node.animateFrames.push({
+        duration: 400,
+        linear: true,
+        state: Node.cloneState(node)
+      });
+      break;
+    case 'success':
+      state.strokeStyle = '#237804';
+      node.animateFrames.push({
+        duration: 100,
+        linear: true,
+        state
+      });
+      node.animateFrames.push({
+        duration: 100,
+        linear: true,
+        state: Node.cloneState(node)
+      });
+      state.strokeStyle = '#237804';
+      node.animateFrames.push({
+        duration: 100,
+        linear: true,
+        state
+      });
+      node.animateFrames.push({
+        duration: 100,
+        linear: true,
+        state: Node.cloneState(node)
+      });
+      state.strokeStyle = '#237804';
+      state.fillStyle = '#389e0d22';
+      node.animateFrames.push({
+        duration: 3000,
+        linear: true,
+        state
+      });
+      break;
+    case 'warning':
+      state.strokeStyle = '#fa8c16';
+      state.fillStyle = '#fa8c16';
+      state.lineWidth=5;
+      state.dash = 2;
+      node.animateFrames.push({
+        duration: 500,
+        linear: true,
+        state
+      });
+      state.strokeStyle = '#fa8c16';
+      state.dash = 0;
+      state.lineWidth=1;
+      state.fillStyle = '#ffffff';
+      node.animateFrames.push({
+        duration: 500,
+        linear: true,
+        state: Node.cloneState(state)
+      });
+      state.strokeStyle = '#fa8c16';
+      state.dash = 2;
+      state.lineWidth=5;
+      state.fillStyle = '#fa8c16';
+      node.animateFrames.push({
+        duration: 300,
+        linear: true,
+        state: Node.cloneState(state)
+      });
+      break;
+    case 'error':
+      state.strokeStyle = '#cf1322';
+      // state.fillStyle = '#cf132222';
+      state.lineWidth=5;
+      state.dash = 2;
+      node.animateFrames.push({
+        duration: 100,
+        linear: true,
+        state
+      });
+      state.strokeStyle = '#cf1322';
+      state.dash = 0;
+      state.lineWidth=1;
+      node.animateFrames.push({
+        duration: 500,
+        linear: true,
+        state: Node.cloneState(state)
+      });
+      state.strokeStyle = '#cf1322';
+      state.dash = 2;
+      state.lineWidth=5;
+      node.animateFrames.push({
+        duration: 300,
+        linear: true,
+        state: Node.cloneState(state)
+      });
+      break;
+    case 'show':
+      state.strokeStyle = '#fa541c';
+      state.rotate = -10;
+      node.animateFrames.push({
+        duration: 100,
+        linear: true,
+        state: Node.cloneState(state)
+      });
+      state.rotate = 10;
+      node.animateFrames.push({
+        duration: 100,
+        linear: true,
+        state: Node.cloneState(state)
+      });
+      state.rotate = 0;
+      node.animateFrames.push({
+        duration: 100,
+        linear: true,
+        state: Node.cloneState(state)
+      });
+      break;
+  }
+  node.animatePlay=true;
+}
+export function onChangeAnimateLine(line,type){
+  line.animateType=type;
+  line.animatePlay=true;
+}
+export function changeImage (dataImg, callback) {
+                let self = this;
+                var base64Img = document.createElement("base64Img"),
+                    canvas = document.createElement("canvas"),
+                    context = canvas.getContext("2d");
+                // 创建新图片
+                var img = new Image();
+                img.src = dataImg;
+                img.addEventListener(
+                    "load",
+                    function () {
+                        // 绘制图片到canvas上
+                        canvas.width = img.width;
+                        canvas.height = img.height;
+                        context.drawImage(img, 0, 0);
+
+                        // 将canvas的透明背景设置成白色
+                        var imageData = context.getImageData(
+                            0,
+                            0,
+                            canvas.width,
+                            canvas.height
+                        );
+                        for (var i = 0; i < imageData.data.length; i += 4) {
+                            //rgb大于250的透明度y均设置成0
+                            if (
+                                imageData.data[i] > 0 &&
+                                imageData.data[i + 1] > 0 &&
+                                imageData.data[i + 2] > 0
+                            ) {
+                                imageData.data[i + 3] = 200;
+                            }
+                        }
+                        context.putImageData(imageData, 0, 0);
+                         let baseImg = canvas.toDataURL("image/png");//返回base64
+                        if (typeof callback !== undefined) {
+                            if (callback) callback(baseImg);
+                        }
+                      img.remove();
+                    },
+                    false
+                );
+            }
diff --git a/nezha-fronted/src/components/common/project/L5/services/canvasRef.js b/nezha-fronted/src/components/common/project/L5/services/canvasRef.js
new file mode 100644
index 000000000..10e12563a
--- /dev/null
+++ b/nezha-fronted/src/components/common/project/L5/services/canvasRef.js
@@ -0,0 +1,919 @@
+import { register as registerFlow } from '@topology/flow-diagram'
+import { register as registerActivity } from '@topology/activity-diagram'
+import { register as registerSequence } from '@topology/sequence-diagram'
+import { register as registerChart } from '@topology/chart-diagram';
+// import { register as registerClass } from './class-diagram/index'
+export let canvas;
+export function canvasRegister() {
+  registerFlow();
+  registerActivity();
+  registerSequence();
+  registerChart();
+  // registerClass()
+}
+
+export const Tools = [
+  {
+    group: '基本形状',
+    children: [
+      {
+        name: 'rectangle',
+        icon: 'icon-rect',
+        data: {
+          text: 'rect',
+          rect: {
+            width: 100,
+            height: 100
+          },
+          paddingLeft: 10,
+          paddingRight: 10,
+          paddingTop: 10,
+          paddingBottom: 10,
+          name: 'rectangle',
+        }
+      },
+      {
+        name: 'rectangle',
+        icon: 'icon-rectangle',
+        data: {
+          text: 'rectangle',
+          rect: {
+            width: 200,
+            height: 50
+          },
+          paddingLeft: 10,
+          paddingRight: 10,
+          paddingTop: 10,
+          paddingBottom: 10,
+          borderRadius: 0.1,
+          name: 'rectangle'
+        }
+      },
+      {
+        name: 'circle',
+        icon: 'icon-circle',
+        data: {
+          text: 'circle',
+          rect: {
+            width: 100,
+            height: 100
+          },
+          name: 'circle',
+          textMaxLine: 1
+        }
+      },
+      {
+        name: 'triangle',
+        icon: 'icon-triangle',
+        data: {
+          text: 'triangle',
+          rect: {
+            width: 100,
+            height: 100
+          },
+          name: 'triangle'
+        }
+      },
+      {
+        name: 'diamond',
+        icon: 'icon-diamond',
+        data: {
+          text: 'diamond',
+          rect: {
+            width: 100,
+            height: 100
+          },
+          name: 'diamond'
+        }
+      },
+      {
+        name: 'pentagon',
+        icon: 'icon-pentagon',
+        data: {
+          text: 'pentagon',
+          rect: {
+            width: 100,
+            height: 100
+          },
+          name: 'pentagon'
+        }
+      },
+      {
+        name: 'hexagon',
+        icon: 'icon-hexagon',
+        data: {
+          text: 'hexagon',
+          rect: {
+            width: 100,
+            height: 100
+          },
+          paddingTop: 10,
+          paddingBottom: 10,
+          name: 'hexagon'
+        }
+      },
+      {
+        name: 'pentagram',
+        icon: 'icon-pentagram',
+        data: {
+          text: 'pentagram',
+          rect: {
+            width: 100,
+            height: 100
+          },
+          name: 'pentagram'
+        }
+      },
+      {
+        name: 'leftArrow',
+        icon: 'icon-arrow-left',
+        data: {
+          text: '左箭头',
+          rect: {
+            width: 200,
+            height: 100
+          },
+          name: 'leftArrow'
+        }
+      },
+      {
+        name: 'rightArrow',
+        icon: 'icon-arrow-right',
+        data: {
+          text: '右箭头',
+          rect: {
+            width: 200,
+            height: 100
+          },
+          name: 'rightArrow'
+        }
+      },
+      {
+        name: 'twowayArrow',
+        icon: 'icon-twoway-arrow',
+        data: {
+          text: '双向箭头',
+          rect: {
+            width: 200,
+            height: 100
+          },
+          name: 'twowayArrow'
+        }
+      },
+      {
+        name: 'line',
+        icon: 'icon-line',
+        data: {
+          text: '直线',
+          rect: {
+            width: 100,
+            height: 100
+          },
+          name: 'line'
+        }
+      },
+      {
+        name: 'cloud',
+        icon: 'icon-cloud',
+        data: {
+          text: '云',
+          rect: {
+            width: 100,
+            height: 100
+          },
+          name: 'cloud'
+        }
+      },
+      {
+        name: 'message',
+        icon: 'icon-msg',
+        data: {
+          text: '消息框',
+          rect: {
+            width: 100,
+            height: 100
+          },
+          paddingLeft: 10,
+          paddingRight: 10,
+          paddingTop: 10,
+          paddingBottom: 10,
+          name: 'message'
+        }
+      },
+      {
+        name: 'file',
+        icon: 'icon-file',
+        data: {
+          text: '文档',
+          rect: {
+            width: 80,
+            height: 100
+          },
+          paddingLeft: 10,
+          paddingRight: 10,
+          paddingTop: 10,
+          paddingBottom: 10,
+          name: 'file'
+        }
+      },
+      {
+        name: 'text',
+        icon: 'icon-text',
+        data: {
+          text: 'Nezha',
+          rect: {
+            width: 160,
+            height: 30
+          },
+          name: 'text'
+        }
+      },
+      {
+        name: 'cube',
+        icon: 'icon-cube',
+        data: {
+          rect: {
+            width: 50,
+            height: 70
+          },
+          is3D: true,
+          z: 10,
+          zRotate: 15,
+          fillStyle: '#ddd',
+          name: 'cube',
+          icon: '\ue63c',
+          iconFamily: 'topology',
+          iconColor: '#777',
+          iconSize: 30
+        }
+      },
+      {
+        name: 'people',
+        icon: 'icon-people',
+        data: {
+          rect: {
+            width: 70,
+            height: 100
+          },
+          name: 'people'
+        }
+      },
+      {
+        name: '视频/网页',
+        icon: 'icon-pc',
+        data: {
+          text: '视频/网页',
+          rect: {
+            width: 200,
+            height: 200
+          },
+          paddingLeft: 10,
+          paddingRight: 10,
+          paddingTop: 10,
+          paddingBottom: 10,
+          // strokeStyle: 'transparent',
+          name: 'div'
+        }
+      }
+    ]
+  },
+  // {
+  //   group: '自定义图片',
+  //   children: [
+  //     {
+  //       name: 'image',
+  //       icon: 'icon-image',
+  //       data: {
+  //         text: 'Nezha',
+  //         rect: {
+  //           width: 100,
+  //           height: 100
+  //         },
+  //         name: 'image',
+  //         image: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3488940205,2956353665&fm=26&gp=0.jpg'
+  //       }
+  //     },
+  //   ],
+  // },
+  // {
+  //   group: '流程图',
+  //   children: [
+  //     {
+  //       name: '开始/结束',
+  //       icon: 'icon-flow-start',
+  //       data: {
+  //         text: '开始',
+  //         rect: {
+  //           width: 120,
+  //           height: 40
+  //         },
+  //         borderRadius: 0.5,
+  //         name: 'rectangle'
+  //       }
+  //     },
+  //     {
+  //       name: '流程',
+  //       icon: 'icon-rectangle',
+  //       data: {
+  //         text: '流程',
+  //         rect: {
+  //           width: 120,
+  //           height: 40
+  //         },
+  //         name: 'rectangle'
+  //       }
+  //     },
+  //     {
+  //       name: '判定',
+  //       icon: 'icon-diamond',
+  //       data: {
+  //         text: '判定',
+  //         rect: {
+  //           width: 120,
+  //           height: 60
+  //         },
+  //         name: 'diamond'
+  //       }
+  //     },
+  //     {
+  //       name: '数据',
+  //       icon: 'icon-flow-data',
+  //       data: {
+  //         text: '数据',
+  //         rect: {
+  //           width: 120,
+  //           height: 50
+  //         },
+  //         name: 'flowData'
+  //       }
+  //     },
+  //     {
+  //       name: '准备',
+  //       icon: 'icon-flow-ready',
+  //       data: {
+  //         text: '准备',
+  //         rect: {
+  //           width: 120,
+  //           height: 50
+  //         },
+  //         name: 'hexagon'
+  //       }
+  //     },
+  //     {
+  //       name: '子流程',
+  //       icon: 'icon-flow-subprocess',
+  //       data: {
+  //         text: '子流程',
+  //         rect: {
+  //           width: 120,
+  //           height: 50
+  //         },
+  //         name: 'flowSubprocess'
+  //       }
+  //     },
+  //     {
+  //       name: '数据库',
+  //       icon: 'icon-db',
+  //       data: {
+  //         text: '数据库',
+  //         rect: {
+  //           width: 80,
+  //           height: 120
+  //         },
+  //         name: 'flowDb'
+  //       }
+  //     },
+  //     {
+  //       name: '文档',
+  //       icon: 'icon-flow-document',
+  //       data: {
+  //         text: '文档',
+  //         rect: {
+  //           width: 120,
+  //           height: 100
+  //         },
+  //         name: 'flowDocument'
+  //       }
+  //     },
+  //     {
+  //       name: '内部存储',
+  //       icon: 'icon-internal-storage',
+  //       data: {
+  //         text: '内部存储',
+  //         rect: {
+  //           width: 120,
+  //           height: 80
+  //         },
+  //         name: 'flowInternalStorage'
+  //       }
+  //     },
+  //     {
+  //       name: '外部存储',
+  //       icon: 'icon-extern-storage',
+  //       data: {
+  //         text: '外部存储',
+  //         rect: {
+  //           width: 120,
+  //           height: 80
+  //         },
+  //         name: 'flowExternStorage'
+  //       }
+  //     },
+  //     {
+  //       name: '队列',
+  //       icon: 'icon-flow-queue',
+  //       data: {
+  //         text: '队列',
+  //         rect: {
+  //           width: 100,
+  //           height: 100
+  //         },
+  //         name: 'flowQueue'
+  //       }
+  //     },
+  //     {
+  //       name: '手动输入',
+  //       icon: 'icon-flow-manually',
+  //       data: {
+  //         text: '手动输入',
+  //         rect: {
+  //           width: 120,
+  //           height: 80
+  //         },
+  //         name: 'flowManually'
+  //       }
+  //     },
+  //     {
+  //       name: '展示',
+  //       icon: 'icon-flow-display',
+  //       data: {
+  //         text: '展示',
+  //         rect: {
+  //           width: 120,
+  //           height: 80
+  //         },
+  //         name: 'flowDisplay'
+  //       }
+  //     },
+  //     {
+  //       name: '并行模式',
+  //       icon: 'icon-flow-parallel',
+  //       data: {
+  //         text: '并行模式',
+  //         rect: {
+  //           width: 120,
+  //           height: 50
+  //         },
+  //         name: 'flowParallel'
+  //       }
+  //     },
+  //     {
+  //       name: '注释',
+  //       icon: 'icon-flow-comment',
+  //       data: {
+  //         text: '注释',
+  //         rect: {
+  //           width: 100,
+  //           height: 100
+  //         },
+  //         name: 'flowComment'
+  //       }
+  //     }
+  //   ]
+  // },
+  // {
+  //   group: '活动图',
+  //   children: [
+  //     {
+  //       name: '开始',
+  //       icon: 'icon-inital',
+  //       data: {
+  //         text: '',
+  //         rect: {
+  //           width: 30,
+  //           height: 30
+  //         },
+  //         name: 'circle',
+  //         fillStyle: '#555',
+  //         strokeStyle: 'transparent'
+  //       }
+  //     },
+  //     {
+  //       name: '结束',
+  //       icon: 'icon-final',
+  //       data: {
+  //         text: '',
+  //         rect: {
+  //           width: 30,
+  //           height: 30
+  //         },
+  //         name: 'activityFinal'
+  //       }
+  //     },
+  //     {
+  //       name: '活动',
+  //       icon: 'icon-action',
+  //       data: {
+  //         text: '活动',
+  //         rect: {
+  //           width: 120,
+  //           height: 50
+  //         },
+  //         borderRadius: 0.25,
+  //         name: 'rectangle'
+  //       }
+  //     },
+  //     {
+  //       name: '决策/合并',
+  //       icon: 'icon-diamond',
+  //       data: {
+  //         text: '决策',
+  //         rect: {
+  //           width: 120,
+  //           height: 50
+  //         },
+  //         name: 'diamond'
+  //       }
+  //     },
+  //     {
+  //       name: '垂直泳道',
+  //       icon: 'icon-swimlane-v',
+  //       data: {
+  //         text: '垂直泳道',
+  //         rect: {
+  //           width: 200,
+  //           height: 500
+  //         },
+  //         name: 'swimlaneV'
+  //       }
+  //     },
+  //     {
+  //       name: '水平泳道',
+  //       icon: 'icon-swimlane-h',
+  //       data: {
+  //         text: '水平泳道',
+  //         rect: {
+  //           width: 500,
+  //           height: 200
+  //         },
+  //         name: 'swimlaneH'
+  //       }
+  //     },
+  //     {
+  //       name: '垂直分岔/汇合',
+  //       icon: 'icon-fork-v',
+  //       data: {
+  //         text: '',
+  //         rect: {
+  //           width: 10,
+  //           height: 150
+  //         },
+  //         name: 'forkV',
+  //         fillStyle: '#555',
+  //         strokeStyle: 'transparent'
+  //       }
+  //     },
+  //     {
+  //       name: '水平分岔/汇合',
+  //       icon: 'icon-fork',
+  //       data: {
+  //         text: '',
+  //         rect: {
+  //           width: 150,
+  //           height: 10
+  //         },
+  //         name: 'forkH',
+  //         fillStyle: '#555',
+  //         strokeStyle: 'transparent'
+  //       }
+  //     }
+  //   ]
+  // },
+  // {
+  //   group: '时序图和类图',
+  //   children: [
+  //     {
+  //       name: '生命线',
+  //       icon: 'icon-lifeline',
+  //       data: {
+  //         text: '生命线',
+  //         rect: {
+  //           width: 150,
+  //           height: 400
+  //         },
+  //         name: 'lifeline'
+  //       }
+  //     },
+  //     {
+  //       name: '激活',
+  //       icon: 'icon-focus',
+  //       data: {
+  //         text: '',
+  //         rect: {
+  //           width: 12,
+  //           height: 200
+  //         },
+  //         name: 'sequenceFocus'
+  //       }
+  //     },
+  //     {
+  //       name: '简单类',
+  //       icon: 'icon-simple-class',
+  //       data: {
+  //         text: 'Topolgoy',
+  //         rect: {
+  //           width: 270,
+  //           height: 200
+  //         },
+  //         paddingTop: 40,
+  //         font: {
+  //           fontFamily: 'Arial',
+  //           color: '#222',
+  //           fontWeight: 'bold'
+  //         },
+  //         fillStyle: '#ffffba',
+  //         strokeStyle: '#7e1212',
+  //         name: 'simpleClass',
+  //         children: [
+  //           {
+  //             text: '- name: string\n+ setName(name: string): void',
+  //             name: 'text',
+  //             paddingLeft: 10,
+  //             paddingRight: 10,
+  //             paddingTop: 10,
+  //             paddingBottom: 10,
+  //             rectInParent: {
+  //               x: 0,
+  //               y: 0,
+  //               width: '100%',
+  //               height: '100%',
+  //               rotate: 0
+  //             },
+  //             font: {
+  //               fontFamily: 'Arial',
+  //               color: '#222',
+  //               textAlign: 'left',
+  //               textBaseline: 'top'
+  //             }
+  //           }
+  //         ]
+  //       }
+  //     },
+  //     {
+  //       name: '类',
+  //       icon: 'icon-class',
+  //       data: {
+  //         text: 'Topolgoy',
+  //         rect: {
+  //           width: 270,
+  //           height: 200
+  //         },
+  //         paddingTop: 40,
+  //         font: {
+  //           fontFamily: 'Arial',
+  //           color: '#222',
+  //           fontWeight: 'bold'
+  //         },
+  //         fillStyle: '#ffffba',
+  //         strokeStyle: '#7e1212',
+  //         name: 'interfaceClass',
+  //         children: [
+  //           {
+  //             text: '- name: string',
+  //             name: 'text',
+  //             paddingLeft: 10,
+  //             paddingRight: 10,
+  //             paddingTop: 10,
+  //             paddingBottom: 10,
+  //             rectInParent: {
+  //               x: 0,
+  //               y: 0,
+  //               width: '100%',
+  //               height: '50%',
+  //               rotate: 0
+  //             },
+  //             font: {
+  //               fontFamily: 'Arial',
+  //               color: '#222',
+  //               textAlign: 'left',
+  //               textBaseline: 'top'
+  //             }
+  //           },
+  //           {
+  //             text: '+ setName(name: string): void',
+  //             name: 'text',
+  //             paddingLeft: 10,
+  //             paddingRight: 10,
+  //             paddingTop: 10,
+  //             paddingBottom: 10,
+  //             rectInParent: {
+  //               x: 0,
+  //               y: '50%',
+  //               width: '100%',
+  //               height: '50%',
+  //               rotate: 0
+  //             },
+  //             font: {
+  //               fontFamily: 'Arial',
+  //               color: '#222',
+  //               textAlign: 'left',
+  //               textBaseline: 'top'
+  //             }
+  //           }
+  //         ]
+  //       }
+  //     }
+  //   ]
+  // },
+  // {
+  //   group: '图表控件',
+  //   children: [
+  //     {
+  //       name: '折线图',
+  //       icon: 'icon-line-chart',
+  //       data: {
+  //         text: '折线图',
+  //         rect: {
+  //           width: 300,
+  //           height: 200
+  //         },
+  //         name: 'echarts',
+  //         data: {
+  //           echarts: {
+  //             option: {
+  //               xAxis: {
+  //                 type: 'category',
+  //                 data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+  //               },
+  //               yAxis: {
+  //                 type: 'value'
+  //               },
+  //               series: [
+  //                 {
+  //                   data: [820, 932, 901, 934, 1290, 1330, 1320],
+  //                   type: 'line'
+  //                 }
+  //               ]
+  //             }
+  //           }
+  //         }
+  //       }
+  //     },
+  //     {
+  //       name: '柱状图',
+  //       icon: 'icon-bar-chart',
+  //       data: {
+  //         text: '柱状图',
+  //         rect: {
+  //           width: 300,
+  //           height: 200
+  //         },
+  //         name: 'echarts',
+  //         data: {
+  //           echarts: {
+  //             option: {
+  //               color: ['#3398DB'],
+  //               tooltip: {
+  //                 trigger: 'axis',
+  //                 axisPointer: {
+  //                   // 坐标轴指示器，坐标轴触发有效
+  //                   type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
+  //                 }
+  //               },
+  //               grid: {
+  //                 left: '3%',
+  //                 right: '4%',
+  //                 bottom: '3%',
+  //                 containLabel: true
+  //               },
+  //               xAxis: [
+  //                 {
+  //                   type: 'category',
+  //                   data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+  //                   axisTick: {
+  //                     alignWithLabel: true
+  //                   }
+  //                 }
+  //               ],
+  //               yAxis: [
+  //                 {
+  //                   type: 'value'
+  //                 }
+  //               ],
+  //               series: [
+  //                 {
+  //                   name: '直接访问',
+  //                   type: 'bar',
+  //                   barWidth: '60%',
+  //                   data: [10, 52, 200, 334, 390, 330, 220]
+  //                 }
+  //               ]
+  //             }
+  //           }
+  //         }
+  //       }
+  //     },
+  //     {
+  //       name: '饼图',
+  //       icon: 'icon-pie-chart',
+  //       data: {
+  //         text: '饼图',
+  //         rect: {
+  //           width: 200,
+  //           height: 200
+  //         },
+  //         name: 'echarts',
+  //         data: {
+  //           echarts: {
+  //             option: {
+  //               tooltip: {
+  //                 trigger: 'item',
+  //                 formatter: '{a} <br/>{b}: {c} ({d}%)'
+  //               },
+  //               legend: {
+  //                 orient: 'vertical',
+  //                 x: 'left',
+  //                 data: [
+  //                   '直接访问',
+  //                   '邮件营销',
+  //                   '联盟广告',
+  //                   '视频广告',
+  //                   '搜索引擎'
+  //                 ]
+  //               },
+  //               series: [
+  //                 {
+  //                   name: '访问来源',
+  //                   type: 'pie',
+  //                   radius: ['50%', '70%'],
+  //                   avoidLabelOverlap: false,
+  //                   label: {
+  //                     normal: {
+  //                       show: false,
+  //                       position: 'center'
+  //                     },
+  //                     emphasis: {
+  //                       show: true,
+  //                       textStyle: {
+  //                         fontSize: '30',
+  //                         fontWeight: 'bold'
+  //                       }
+  //                     }
+  //                   },
+  //                   labelLine: {
+  //                     normal: {
+  //                       show: false
+  //                     }
+  //                   },
+  //                   data: [
+  //                     { value: 335, name: '直接访问' },
+  //                     { value: 310, name: '邮件营销' },
+  //                     { value: 234, name: '联盟广告' },
+  //                     { value: 135, name: '视频广告' },
+  //                     { value: 1548, name: '搜索引擎' }
+  //                   ]
+  //                 }
+  //               ]
+  //             }
+  //           }
+  //         }
+  //       }
+  //     },
+  //     {
+  //       name: '仪表盘',
+  //       icon: 'icon-dashboard-chart',
+  //       data: {
+  //         text: '仪表盘',
+  //         rect: {
+  //           width: 300,
+  //           height: 300
+  //         },
+  //         name: 'echarts',
+  //         data: {
+  //           echarts: {
+  //             option: {
+  //               tooltip: {
+  //                 formatter: '{a} <br/>{b} : {c}%'
+  //               },
+  //               toolbox: {
+  //                 feature: {
+  //                   restore: {},
+  //                   saveAsImage: {}
+  //                 }
+  //               },
+  //               series: [
+  //                 {
+  //                   name: '业务指标',
+  //                   type: 'gauge',
+  //                   detail: { formatter: '{value}%' },
+  //                   data: [{ value: 50, name: '完成率' }]
+  //                 }
+  //               ]
+  //             }
+  //           }
+  //         }
+  //       }
+  //     }
+  //   ]
+  // },
+]
diff --git a/nezha-fronted/src/components/common/project/L5/topoTooltip.vue b/nezha-fronted/src/components/common/project/L5/topoTooltip.vue
new file mode 100644
index 000000000..053f4dc2b
--- /dev/null
+++ b/nezha-fronted/src/components/common/project/L5/topoTooltip.vue
@@ -0,0 +1,404 @@
+<template>
+  <div style="width: 400px;height: 400px;">
+    <span class="temp-dom"></span>
+    <line-chart-block v-if="true"
+                      :key="'inner' + 0"
+                      :from="'project'"
+                      :ref="'editChart'+0"
+                      :temp-dom="tempDom"
+                      :panel-id="-1"
+                      :is-lock="true"
+                      :chart-index="0"
+                      :chartTitleShow="false"
+                      :chart-data="chartData">
+
+    </line-chart-block>
+  </div>
+</template>
+
+<script>
+  import chart from '../../../page/dashboard/overview/chart';
+  import lineChartBlock from '../../../charts/line-chart-block';
+  import bus from "../../../../libs/bus";
+  import axios from 'axios';
+	export default {
+		name:"topoTooltip",
+    components:{
+      lineChartBlock,
+    },
+    props:{
+      chartDataParent:{
+        type:Object,
+      },
+    },
+    watch:{
+      chartDataParent:{
+        immediate: true,
+        handler(n){
+          this.process(n)
+        },
+
+      }
+    },
+    data(){
+		  return{
+        tempDom: {height: 400, width: ""},
+        filterTime: [
+          bus.timeFormate(bus.getOffsetTimezoneData(-1),'yyyy-MM-dd hh:mm:ss'),
+          bus.timeFormate(bus.getOffsetTimezoneData(),'yyyy-MM-dd hh:mm:ss')
+        ],
+        chartDataTemp:{"id":8832,"prev":null,"next":null,"panelId":0,"title":"123","span":12,"height":400,"createAt":"2021-01-27 07:36:19","type":"line","unit":2,"weight":0,"pid":null,"buildIn":null,"seq":null,"param":{"last":0,"legendValue":{"total":"off","min":"off","avg":"off","last":"off","max":"off"},"threshold":"","valueMapping":{"mapping":[{"color":{"bac":"#fff","text":"#000"},"text":"","value":""}],"type":"text"},"url":"","nullType":"connected"},"elements":[{"id":14926,"chartId":null,"expression":"cache_evictions_total","type":"expert","legend":"","buildIn":null,"seq":null},{"id":14927,"chartId":null,"expression":"appDevice","type":"expert","legend":"","buildIn":null,"seq":null}],"sync":null,"asset":null,"isLoaded":true,"from":"__vue_devtool_undefined__","draggable":true,"resizable":true,"editable":true},
+        chartData:{},
+        filter:{
+          end_time:bus.timeFormate(bus.getOffsetTimezoneData(),'yyyy-MM-dd hh:mm:ss'),
+          panelId:0,
+          searchName:"",
+          start_time:bus.timeFormate(bus.getOffsetTimezoneData(-1),'yyyy-MM-dd hh:mm:ss'),
+        }
+      }
+    },
+    mounted(){
+		  this.tempDomInit();
+    },
+    methods:{
+      tempDomInit() {
+        let span = document.querySelector(".temp-dom");
+        this.tempDom.width = 400;
+      },
+      process(item){
+        let chartData={...this.chartDataTemp,...item};
+        chartData.elements=[]
+        chartData.expressArr.forEach((item1,index)=>{
+          chartData.elements.push({
+            expression:item1,
+            legend: chartData.legends[index],
+            type:"expert",
+            id:index,
+            buildIn:null,
+            seq:null,
+          })
+        });
+        chartData.id=0;
+        chartData.param={
+          legendValue:{"total":"off","min":"off","avg":"off","last":"off","max":"off"},
+          last:0,
+          nullType:"connected",
+          threshold:'',
+          url:'',
+          valueMapping:{"mapping":[{"color":{"bac":"#fff","text":"#000"},"text":"","value":""}],"type":"text"},
+        };
+        chartData.span=12;
+        setTimeout(()=>{
+          this.getChartData(chartData,0);
+        });
+        this.chartData=chartData
+      },
+      // 获取一个图表具体数据,图表信息，图表位置index
+      getChartData(chartInfo, pos, filterType) {
+        console.log(chartInfo,'chartInfo')
+        const chartItem = chartInfo;
+        const index = pos; // 指标
+          // 没有数据的设置提示信息暂无数据-针对每一个图
+          const len = chartItem.elements.length;
+          if (len === 0) {
+            this.$nextTick(() => {
+              if (this.$refs['editChart' + chartItem.id]) {
+                this.$refs['editChart' + chartItem.id].setData(chartItem, [], this.filter.panelId, this.filter, []);
+              }
+            });
+          } else {
+            let startTime = '';
+            let endTime = '';
+            if (filterType === 'refresh') {//刷新
+              const now = new Date(bus.computeTimezone(new Date().getTime()));
+              const origin = new Date(this.filter.end_time);
+              const numInterval = now.getTime() - origin.getTime();
+              if (numInterval >= 60000) {//大于1分钟，则start、end均往后移numInterval，否则时间不变
+                startTime = this.getNewTime(this.filter.start_time, numInterval);
+                endTime = bus.timeFormate(now, 'yyyy-MM-dd hh:mm:ss');
+              } else {
+                startTime = this.filter.start_time;
+                endTime = this.filter.end_time;
+              }
+            } else if (filterType === 'showFullScreen') {//全屏时间查询
+              startTime = this.filter.start_time;
+              endTime = this.filter.end_time;
+              //this.$parent.refreshTime(startTime,endTime);全屏查询，不更新panel列表的时间条件
+            } else {
+              startTime = this.filter.start_time;
+              endTime = this.filter.end_time;
+            }
+
+            let step = bus.getStep(startTime, endTime);
+            this.$nextTick(() => {
+              // const axiosArr = chartItem.elements.map((ele) => {
+              //   const filterItem = ele;
+              //   let query = encodeURIComponent(filterItem.expression);
+              //   if((chartInfo.type==='line'||chartInfo.type==='bar'||chartInfo.type==='stackArea'||chartInfo.type==='table')&&chartInfo.param){//如果是这三个 默认给connected
+              //     chartInfo.param.nullType=chartInfo.param.nullType||'connected';
+              //     query+='&nullType='+chartInfo.param.nullType;
+              //   }
+              //   if(chartInfo.type === 'table'&&chartInfo.param&&chartInfo.param.last == 1){
+              //     return this.$get('/prom/api/v1/query_range?query=' + query + "&start=" + this.$stringTimeParseToUnix(endTime) + "&end=" + this.$stringTimeParseToUnix(endTime) + '&step=' + step);
+              //   }
+              //   return this.$get('/prom/api/v1/query_range?query=' + query + "&start=" + this.$stringTimeParseToUnix(startTime) + "&end=" + this.$stringTimeParseToUnix(endTime) + '&step=' + step);
+              // });
+              // 一个图表的所有element单独获取数据
+              axios.all(chartInfo.res).then((res) => {
+                console.log(res);
+                if (res.length > 0) {
+                  let series = [];
+                  let singleStatRlt = '';
+                  let legend = [];
+                  let tableData = [];
+                  /*let sumData = {
+                    name: 'sum',
+                    data: [],
+                    visible: true,
+                    threshold: null,
+                  };*/
+                  let errorMsg = "";
+                  res.forEach((response, innerPos) => {
+                    if (response.status === 'success') {
+                      errorMsg = "";
+                      if (response.data.result) {
+                        // 循环处理每个elements下获取的数据列
+                        if (chartItem.type === 'singleStat') {
+                          if (response.data.result.length === 1) {
+                            let statistics = chartItem.param.statistics;
+                            if (response.data.result[0].values) {
+                              singleStatRlt = bus.getSingleStatRlt(statistics, response.data.result[0].values);
+                            }
+                          } else if (response.data.result.length > 1) {
+                            singleStatRlt = this.$t("dashboard.panel.singleStatErrorTip");
+                          }
+                        } else {
+                          response.data.result.forEach((queryItem, resIndex) => {
+                            let seriesItem = {
+                              theData: {
+                                name: '',
+                                symbol: 'emptyCircle',  //去掉点
+                                symbolSize: [2, 2],
+                                smooth: 0.2,  //曲线变平滑
+                                showSymbol: false,
+                                data: [],
+                                lineStyle: {
+                                  width: 1,
+                                  opacity: 0.9
+                                },
+                                animation: false,
+                                type: chartInfo.type,
+                              },
+                              metric_name: '',
+                            };
+
+                            if (chartInfo.type === 'stackArea') {
+                              seriesItem.theData.type = 'line';
+                              seriesItem.theData.stack = chartInfo.title;
+                              seriesItem.theData.areaStyle = {"opacity": 0.3};
+                            }
+                            if((chartInfo.type === 'line'||chartInfo.type === 'stackArea'||chartInfo.type === 'bar')&& chartInfo.param && chartInfo.param.threshold){
+                              seriesItem.theData.markLine={
+                                silent: true,
+                                symbol:['circle','circle'],
+                                label:{
+                                  distance:this.computeDistance(chartDataFormat.getUnit(chartInfo.unit?chartInfo.unit:2).compute(chartInfo.param.threshold)),
+                                  formatter:function(params){
+                                    return chartDataFormat.getUnit(chartInfo.unit?chartInfo.unit:2).compute(params.value)
+                                  }
+                                },
+                                lineStyle:{
+                                  color:'#d64f40',
+                                  width:2,
+                                  type:'dotted'
+                                },
+                                data: [{
+                                  yAxis: Number(chartInfo.param.threshold)
+                                }, ]
+                              }
+                            }
+                            // 图表中每条线的名字,后半部分
+                            let host = '';//up,
+                            if (queryItem.metric.__name__) {
+                              host = `${queryItem.metric.__name__}{`;//up,
+                            }
+                            const tagsArr = Object.keys(queryItem.metric);//["__name__","asset","idc","instance","job","module","project"]
+                            // 设置时间-数据格式对
+                            let tempArr = [];
+                            let dpsArr = [];
+                            tempArr = queryItem.values;
+                            dpsArr = Object.entries(queryItem.values);//[ ["0",[1577959830.781,"0"]], ["1",[1577959845.781,"0"]] ]
+                            dpsArr = dpsArr.map(item => {
+                              return [item[0], [item[1][0], Number(item[1][1])]]
+                            });
+                            // 判断是否有数据, && tagsArr.length > 0
+                            if (dpsArr.length > 0 && this.$refs['editChart' + chartItem.id]) {
+                              tagsArr.forEach((tag, i) => {
+                                if (tag !== '__name__') {
+                                  host += `${tag}="${queryItem.metric[tag]}",`;
+                                }
+                              });
+                              if (host.endsWith(',')) {
+                                host = host.substr(0, host.length - 1);
+                              }
+                              if (queryItem.metric.__name__) {
+                                host += "}";
+                              }
+                              if (!host || host === '') {
+                                host = chartItem.elements[innerPos].expression;
+                              }
+                              //处理legend别名
+                              let alias = this.$refs['editChart' + chartItem.id].dealLegendAlias(host, chartItem.elements[innerPos].legend);
+                              if (!alias || alias === '') {
+                                alias = host;
+                              }
+                              legend.push({name: host+"-"+chartItem.elements[innerPos].id+"-" + resIndex, alias: alias});
+                              // 图表中每条线的名字,去掉最后的逗号与空格:metric名称,  标签1=a,标签2=c
+
+                              seriesItem.theData.name = host +"-"+chartItem.elements[innerPos].id+"-"+ resIndex;
+                              //alert(seriesItem.theData.name);
+                              seriesItem.metric_name = seriesItem.theData.name;
+                              // 将秒改为毫秒
+                              //alert('table=='+JSON.stringify(queryItem))
+                              seriesItem.theData.data = tempArr.map((dpsItem, dpsIndex) => {
+                                /*曲线汇总暂不需要
+                                if (sumData.data[dpsIndex]) {
+                                  const sumNum = sumData.data[dpsIndex][1] || 0;
+                                  sumData.data[dpsIndex][1] = sumNum + dpsItem[1];
+                                } else {
+                                  sumData.data[dpsIndex] = [dpsItem[0] * 1000, dpsItem[1]];
+                                }
+                                */
+                                let t_date = new Date(dpsItem[0] * 1000);
+                                let timeTmp = bus.timeFormate(t_date, 'yyyy-MM-dd hh:mm:ss');
+                                tableData.push({//表格数据
+                                  // label: host.slice(host.indexOf('{') + 1,host.indexOf('}')),//label
+                                  // metric: queryItem.metric.__name__?queryItem.metric.__name__:'',//metric列
+                                  element: {element: host, alias: alias},
+                                  time: timeTmp,//采集时间
+                                  value: dpsItem[1],//数值
+                                });
+                                return [dpsItem[0] * 1000, dpsItem[1]];
+                              });
+                              series.push(seriesItem.theData);
+                              seriesItem = null;
+                            } else if (chartItem.elements && chartItem.elements[innerPos]) {
+                              // 无数据提示
+                              /*
+                              const currentInfo = chartItem.elements[innerPos];
+                              const errorMsg = `图表 ${chartItem.title} 中 ${currentInfo.metric},${currentInfo.tags} 无数据`;
+                              this.$message.warning({
+                                duration: 15,
+                                content: errorMsg,
+                                closable: true,
+                              });
+                              */
+                            }
+                          });
+                        }
+                      }
+                    } else {
+                      if (response.msg) {
+                        //this.$message.error(response.msg);
+                        errorMsg = response.msg;
+                      } else if (response.error) {
+                        //this.$message.error(response.error);
+                        errorMsg = response.error;
+                      } else {
+                        //this.$message.error(response);
+                        errorMsg = response;
+                      }
+                    }
+                  });
+
+                  if (this.$refs['editChart' + chartItem.id]) {
+                    let chartData = {
+                      chartItem: chartItem,
+                      series: series,
+                      singleStatRlt: singleStatRlt,
+                      legend: legend,
+                      tableData: tableData,
+                      panelId: this.filter.panelId,
+                      filter: this.filter,
+                      filterType: filterType,
+                      errorMsg: errorMsg,
+                    }
+                    if (chartItem.type === 'table') {//表格
+                      if (filterType === 'showFullScreen') {//全屏查询
+                        this.$refs['editChart' + chartItem.id].setData(chartItem, tableData,
+                          this.filter.panelId, this.filter, filterType, errorMsg);
+                      } else {
+                        this.$refs['editChart' + chartItem.id].setData(chartItem, tableData,
+                          this.filter.panelId, this.filter, '', errorMsg);
+                      }
+                    } else if (chartItem.type === 'line' || chartItem.type === 'bar' || chartItem.type === 'stackArea' || chartItem.type === 4) {
+                      if (series.length && chartItem.type === 4) {//曲线汇总
+                        //series.push(sumData);//后续需要
+                      }
+                      if (filterType === 'showFullScreen') {//全屏查询
+                        this.$refs['editChart' + chartItem.id].setData(chartItem, series,
+                          this.filter.panelId, this.filter, legend, filterType, errorMsg);
+                      } else {
+                        this.$refs['editChart' + chartItem.id].setData(chartItem, series,
+                          this.filter.panelId, this.filter, legend, '', errorMsg);
+                      }
+                    } else if (chartItem.type === 'singleStat') {
+                      if (filterType === 'showFullScreen') {//全屏查询
+                        this.$refs['editChart' + chartItem.id].setData(chartItem, singleStatRlt,
+                          this.filter.panelId, this.filter, filterType, errorMsg);
+                      } else {
+                        this.$refs['editChart' + chartItem.id].setData(chartItem, singleStatRlt,
+                          this.filter.panelId, this.filter, '', errorMsg);
+                      }
+                    }
+                  }
+                } else {
+                  const type = chartItem.type;
+                  if (this.$refs['editChart' + chartItem.id] ) {
+                    if (type === 'table') {
+                      if (filterType === 'showFullScreen') {//table的全屏查询
+                        this.$refs['editChart' + chartItem.id].setData(chartItem, [], this.filter.panelId,
+                          this.filter, filterType);
+                      } else {
+                        this.$refs['editChart' + chartItem.id].setData(chartItem, [], this.filter.panelId,
+                          this.filter);
+                      }
+                    } else if (type === 'line' || type === 'bar' || type === 'stackArea' || chartItem.type === 4) {
+                      if (filterType === 'showFullScreen') {//table的全屏查询
+                        this.$refs['editChart' + chartItem.id].setData(chartItem, [], this.filter.panelId,
+                          this.filter, filterType);
+                      } else {
+                        this.$refs['editChart' + chartItem.id].setData(chartItem, [], this.filter.panelId,
+                          this.filter);
+                      }
+                    } else if (chartItem.type === 'singleStat') {
+                      if (filterType === 'showFullScreen') {//全屏查询
+                        this.$refs['editChart' + chartItem.id].setData(chartItem, '',
+                          this.filter.panelId, this.filter, filterType);
+                      } else {
+                        this.$refs['editChart' + chartItem.id].setData(chartItem, '',
+                          this.filter.panelId, this.filter);
+                      }
+                    }
+                  }
+                }
+              }).catch((error) => {
+                if (error) {
+                  this.$message.error(error.toString());
+                  console.error(error)
+                }
+              });
+            });
+          }
+      },
+    },
+	}
+</script>
+
+<style scoped>
+  .temp-dom {
+    visibility: hidden;
+    font-size: 14px;
+    position: fixed;
+  }
+</style>
diff --git a/nezha-fronted/src/components/common/project/L5/topologyTopTool.vue b/nezha-fronted/src/components/common/project/L5/topologyTopTool.vue
new file mode 100644
index 000000000..d2677d2f4
--- /dev/null
+++ b/nezha-fronted/src/components/common/project/L5/topologyTopTool.vue
@@ -0,0 +1,169 @@
+<template>
+  <div class="tool-top">
+    <div class="top-tool-item"  @click="undo"> 撤销 </div>
+    <div class="top-tool-item" @click="redo"> 重做 </div>
+    <div class="top-tool-item" @click="centerView"> 居中</div>
+    <div class="top-tool-item" @click="fitView"> 自适应</div>
+    <div class="top-tool-item"> 缩放大小 <el-input-number size="mini" v-model="option.scale" @change="scale" :min="0.25" :max="5" :step="0.2" :precision="2"></el-input-number> </div>
+    <div :class="['top-tool-item',toolShow.node?'tool-item-active':'']" @click="toolShowChange('node')"> 节点工具 </div>
+    <div :class="['top-tool-item',toolShow.attr?'tool-item-active':'']" @click="toolShowChange('attr')"> 属性工具 </div>
+    <!--<div> 保存为图片 </div>-->
+    <div class="top-tool-item" @click="del"> 删除 </div>
+    <div class="top-tool-item" @click="clear"> 清空画布 </div>
+  </div>
+</template>
+
+<script>
+  import {getTopology} from "../../js/common";
+
+  export default {
+    name:"topologyTopTool",
+    data(){
+      return {
+        option:{
+          lineName:'curve',
+          lineWidth:1,
+          fromArrow:'',
+          toArrow:'triangleSolid',
+          scale:1,
+        },
+        penLineType:[
+          {d:'M5 14 a100,50 0 0,1 85,0',"stroke-dasharray":"",name:'curve'},
+          {d:'M5 8 l40 0 l0 12 l40 0',"stroke-dasharray":"",name:'polyline'},
+          {d:'M5 14 l85 0',"stroke-dasharray":"",name:'line'},
+          {d:'M5 20 C0,8 50,0 85,0',"stroke-dasharray":"",name:'mind'},
+        ],
+        penLineFromTOArrow:[
+          {d:'M5 14 l85 0',"points":"",fill:'',stroke:"",'stroke-width':"",name:''},
+          {d:'M5 14 l85 0',"points":"5 14,20 9,20 19",fill:'#000000',stroke:"",'stroke-width':"",name:'triangleSolid'},
+          {d:'M5 14 l85 0',"points":"5 14,20 9,20 19",fill:'#ffffff', stroke:"#000000",'stroke-width':"1",name:'triangle'},
+          {d:'M5 14 l85 0',fill:'#000000', stroke:"",'stroke-width':"",cx:"10",cy:"14",r:"5",name:'circleSolid'},
+          {d:'M5 14 l85 0',fill:'#ffffff', stroke:"#000000",'stroke-width':"1",cx:"10",cy:"14",r:"5",name:'circle'},
+        ],
+      }
+    },
+    props:{
+      selection:{
+        type:Object,
+        require:true
+      },
+      index:{
+        type:Number,
+        require:true,
+      },
+      toolShow:{
+        type:Object,
+        require:true
+      }
+    },
+    mounted(){
+      let dataOption=getTopology(this.index).data;
+      Object.keys(this.option).forEach(key=>{
+        this.option[key]=(dataOption[key]?dataOption[key]:this.option[key]);
+      })
+    },
+    methods:{
+      // todo 1清空后的 处理属性工具的默认值 2工具栏的移动 以及节点工具和属性工具的移动 3 结束箭头类型的方向
+      changeOption(key){
+        getTopology(this.index).data[key]=this.option[key];
+      },
+      undo(){//撤销
+        getTopology(this.index).undo();
+      },
+      redo(){//重做
+        getTopology(this.index).redo();
+      },
+      centerView(){//居中显示
+        getTopology(this.index).centerView();
+      },
+      fitView(){//自适应画布大小
+        getTopology(this.index).fitView();
+      },
+      scale(){
+        getTopology(this.index).scaleTo(this.option.scale);
+      },
+      del(){
+        let delObj=this.selection.pen?this.selection.pen.id:this.selection.pens
+        this.$emit('del', delObj);
+      },
+      clear(){
+        let data={...getTopology(this.index).data};
+        data.pens=[];
+        getTopology(this.index).open(data);
+      },
+      toolShowChange(attr){
+        this.$emit('toolShowChange',attr);
+      }
+
+    }
+  }
+</script>
+
+<style scoped>
+  .tool-top {
+    border: 1px solid #1a1a1a;
+    border-radius: 2px;
+    display: inline-flex;
+  }
+  .tool-top > div{
+    padding: 3px 5px;
+  }
+  .tool-top > div:not(:last-child){
+    border-right: 1px solid #1a1a1a ;
+  }
+  .top-tool-item{
+    cursor: pointer;
+  }
+  .tool-item-active{
+    background: #1a1a1a;
+    color: #fff;
+  }
+  .mb10 {
+    margin-bottom: 10px;
+  }
+
+  .mt10 {
+    margin-top: 10px;
+  }
+  .p10{
+    padding: 10px;
+  }
+  .pl0{
+    padding-left: 0;
+  }
+  .special-select{
+    vertical-align: middle;
+  }
+  .special-select .el-select.el-select--small{
+    width: 100%;
+  }
+  .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%;
+  }
+  .props-pen-item{
+    display: inline-block;
+    width: 130px;
+  }
+  .icon-item{
+    width: 100%;
+    height:100%;
+  }
+  .icon-item svg{
+    width: 100%;
+    height:100%;
+  }
+</style>
diff --git a/nezha-fronted/src/components/common/project/topologyL5.vue b/nezha-fronted/src/components/common/project/topologyL5.vue
new file mode 100644
index 000000000..87ecc5a03
--- /dev/null
+++ b/nezha-fronted/src/components/common/project/topologyL5.vue
@@ -0,0 +1,1367 @@
+<style>
+  @import "./L5/css/iconfont.css";
+  @import "./L5/css/props.css";
+</style>
+<template>
+  <div class="project-box">
+    <div class="project-title" v-if="showTopTools">
+      <div v-show="editTopologyFlag" class="edit-topologyLine">
+        <!--工具栏-->
+        <span class="project-topology-tool">
+          <topology-top-tool v-if="editTopologyFlag" :selection.sync="props" @del="delPen" :index="topologyIndex"
+                             ref="topTool" @toolShowChange="toolShowChange" :toolShow="toolShow">
+
+          </topology-top-tool>
+        </span>
+        <span>
+           <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 @click="cancelTopology" class="nz-btn nz-btn-size-small-new nz-btn-style-light-new">
+             {{$t('project.topology.cancel')}}
+           </button>
+         </span>
+      </div>
+      <span class="edit-topologyLine" 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">
+      <!--拖拽节点-->
+      <VueDraggableResizable
+        v-show="editTopologyFlag&&toolShow.node"
+        class="tools"
+        :parent="true"
+        :resizable="true"
+        :draggable="dragFlag"
+        :x="toolShow.nodeCord[0]"
+        :y="toolShow.nodeCord[1]"
+        :min-width="250"
+        :min-height="200"
+        :w="250"
+        :h="toolShow.height-100"
+        drag-handle=".drag-header"
+      >
+        <el-card shadow="hover" style="height:100%;width: 100%;overflow-y: auto">
+          <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>
+              <div v-if="item.group==='自定义图片'" class="buttons">
+                <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: 50px;height: 50px"
+                >
+                  <div class="upload-icon-box">
+                    <i class="el-icon-plus"></i>
+                    <span style="font-size: 12px">{{$t('project.topology.upload')}}</span>
+                  </div>
+
+                </el-upload>
+              </div>
+            </el-collapse-item>
+          </el-collapse>
+        </el-card>
+      </VueDraggableResizable>
+      <!--画布部分-->
+      <div id="topology-canvas" class="full"></div>
+      <!--设置属性-->
+      <VueDraggableResizable
+        v-if="editTopologyFlag"
+        v-show="toolShow.attr"
+        class="props"
+        :parent="true"
+        :resizable="true"
+        :draggable="dragFlag"
+        :x="toolShow.attrCord[0]"
+        :y="toolShow.attrCord[1]"
+        :min-width="340"
+        :max-width="340"
+        :min-height="200"
+        :w="340"
+        :h="toolShow.height-100"
+        drag-handle=".drag-header"
+        :handles="['tm','bm']"
+      >
+        <el-card shadow="hover" style="height: 100%;width: 325px;overflow-y: auto;padding: 0 0 0 0">
+          <div class="drag-header">——</div>
+          <CanvasProps :selection.sync="props" @change="onUpdateProps" @animate="animateCanvas"
+                       :index="topologyIndex" @del="delPen" :modules="modules" ref="CanvasProps"></CanvasProps>
+        </el-card>
+      </VueDraggableResizable>
+      <!--所有节点上的小图标-->
+      <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" />
+      </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>
+  </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 bus from "../../../libs/bus";
+  import axios from 'axios';
+  const canvasOptions={
+    rotateCursor:'/img/rotate.cur',
+    translateKey:'None',
+    disableEmptyLine:true,
+    autoExpandDistance:0,
+  };
+  let canvas;
+  export default {
+    data(){
+      return {
+        toolGroup:'基本形状',
+        editFlag:true,
+        tools:Tools,
+        props:{},
+        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:[],
+      };
+    },
+    components:{
+      CanvasProps,
+      CanvasContextMenu,
+      topologyTopTool,
+      VueDraggableResizable,
+      popDataMain,
+      popDataInfo,
+      TotalChart,
+      alertTable,
+      assetTable,
+      endpointTable,
+      ExpressionInfo,
+      topoTooltip,
+    },
+    computed:{},
+    props:{
+      topologyIndexF:{
+        type:Number,
+        default:0,
+      },
+      obj:{},
+      showTopTools:{
+        type:Boolean,
+        default:true,
+      }
+    },
+    watch:{
+      topologyIndexF:{
+        immediate:true,
+        deep:true,
+        handler(n){
+          this.topologyIndex=n
+        }
+      },
+      obj:{
+        deep:true,
+        immediate:true,
+        handler(n){
+          if(n){
+            if(!this.timer){
+              this.timer=setTimeout(()=>{
+                this.init();
+                this.timer=null
+              },300)
+            }else{
+              clearTimeout(this.timer);
+              this.timer=setTimeout(()=>{
+                this.init();
+                this.timer=null
+              },300)
+            }
+          }
+        }
+      }
+    },
+    computed:{},
+    created(){
+      canvasRegister();
+      if(process.client){
+        document.onclick=event=>{
+          this.contextmenu={
+            left:null,
+            top:null,
+            bottom:null
+          };
+        };
+      }
+    },
+    mounted(){
+      document.getElementById('topology-canvas').addEventListener('mousemove',this.canvasMove);
+      window.addEventListener('resize',this.winResize)
+    },
+    methods:{
+      init(){
+        canvasOptions.on=this.onMessage;
+        this.getTopologyData().then((data)=>{
+          this.openTopologyData(data).then(()=>{
+            //获取对应的值 给节点 连线添加对应动画
+            console.log(data);
+            this.chartGetData=[];
+            let  axiosArr=[];
+            let endTime=this.filterTime[1];
+            let startTime=this.filterTime[0];
+            let step = bus.getStep(startTime, endTime);
+            data.pens.forEach(item=>{
+              console.log(item.id);
+              this.chartGetData.push({id:item.id,res:[]});
+              let arr=item.data.expressArr.map((ele) => {
+                let query = encodeURIComponent(ele);
+                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});
+            });
+
+            axios.all(axiosArr).then(all=>{
+              all.forEach((obj,index)=>{
+                this.chartGetData[index].res=obj.arr;
+                if(obj.item.type===0){
+                  obj.item.animateType='warning';
+                  onChangeAnimate(obj.item,'warning')
+                } else if(obj.item.type===1){
+                  onChangeAnimateLine(obj.item,'beads')
+                }
+              })
+            }).then(()=>{
+              getTopology(this.topologyIndex).open(data);
+              getTopology(this.topologyIndex).lock(1);
+            });
+
+            this.getNodesArr();
+          })
+        });
+      },
+
+      reload(){
+        this.getTopologyData().then((data)=>{
+          getTopology(this.topologyIndex).open(data);
+          getTopology(this.topologyIndex).lock(1);
+          this.getNodesArr();
+        });
+      },
+      openTopologyData(data){
+       return new Promise(resolve=>{
+         let canvas=new Topology('topology-canvas',canvasOptions);
+          canvas.open(data);
+          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.addNodeInit();
+          this.getModule()//获取module
+          resolve()
+        })
+      },
+      //获取topology数据
+      getTopologyData(){
+        return new Promise(resolve=>{
+          let data=localStorage.getItem('data');
+          data=data?JSON.parse(data):{};
+          this.saveData={...data};
+          resolve(data);
+        });
+      },
+
+      //获取module
+      getModule(){
+        this.projectInfo.loading=true;
+        // this.$refs['visNetwork'].topologyLoading=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));
+      },
+      dragFlagChange(node){
+        getTopology(this.topologyIndex).addNode(node.data)
+        setTimeout(()=>{
+          this.dragFlag=true;
+        },100);
+      },
+
+      onMessage(event,data){
+        // console.log('onMessage',event,data);
+
+        if(!Array.isArray(data)&&data){//判断不是数组 提前个data配置好节点属性
+          if(data.type===0&&!data.data){
+            data.data={
+              moduleId:'',
+              moduleName:'',
+              show:false,
+              error:false,
+              animatePlay:data.animatePlay,
+              fillStyle:data.fillStyle,
+              strokeStyle:data.strokeStyle,
+              lineWidth:0,
+              iconToolState:true,
+              //chart 配置项
+              valueMapping:[],
+              expressArr:[],
+              legends:[],
+              tooltipShow:true,
+              panelName:'topologyName',
+              unit:2,
+              type:'line',
+              displayChart:true,
+              aggregation:'last',
+            }
+          }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:[],
+              expressArr:[],
+              legends:[],
+              tooltipShow:true,
+              panelName:'topologyName',
+              unit:2,
+              type:'line',
+              displayChart:true,
+              aggregation:'last',
+            }
+          }
+          if(data.type===0 || data.type===1){
+            data.lineWidth=data.data.lineWidth;
+          }
+        }
+
+
+        // if(event==='addNode'&&data.name==='rectangleImg'){
+        //   data.lineWidth=0;
+        // }
+        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)};
+            console.log(this.chartData);
+            this.tooltipPosition.show=true;
+            break;
+          case 'moveOutNode':
+          case 'moveOutLine':
+            if(!this.timer3){
+              this.timer3=setTimeout(()=>{
+                this.tooltipPosition.show=false;
+                this.timer3=null
+              },300)
+            }else{
+              clearTimeout(this.timer3);
+              this.timer3=setTimeout(()=>{
+                this.tooltipPosition.show=false;
+                this.timer3=null
+              },300)
+            }
+            break;
+
+        }
+        // 右侧输入框编辑状态时点击编辑区域其他元素，onMessage执行后才执行onUpdateProps方法，通过setTimeout让onUpdateProps先执行
+        setTimeout(()=>{
+          switch(event){
+            case 'node':
+            case 'addNode':
+              this.modulesDiff(data);
+              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,
+              };
+              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':
+              let domRect=document.getElementById('topology-canvas').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(selImageId){
+        this.$get('/project/topo/icon').then(res=>{
+          this.imgageLoading=true;
+          this.tools[1].children=[];
+          res.data.list.forEach((item,index)=>{
+            item.imageName=item.name;
+            delete item.name;
+            this.dealImg(`/project/topo/icon/${item.id}`).then((data)=>{
+              item.image=data;
+              if(index===res.data.list.length-1){
+                setTimeout(()=>{
+                  this.iconArray=[...res.data.list];
+                  this.iconArray.forEach(item=>{
+                    this.tools[1].children.push({
+                      ...imageTemp,
+                      data:{
+                        ...imageTemp.data,
+                        text:item.imageName,
+                        image:item.image,
+                        imageId:item.id,
+                      }
+                    })
+                  });
+                  this.imgageLoading=false;
+                },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);
+                // 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;
+            }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;
+            }
+          })
+          let domRect=document.getElementById('topology-canvas').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()
+      },
+
+      saveTopology(){
+        let topologyData=getTopology(this.topologyIndex).data;
+        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;
+          localStorage.setItem('data',JSON.stringify(topologyData));
+          this.$nextTick(()=>{
+            getTopology(this.topologyIndex).lock(1);
+            let domRect=document.getElementById('topology-canvas').getBoundingClientRect();
+            this.toolShow.attrCord=[domRect.width-350,0];
+            this.toolShow.height=domRect.height;
+            getTopology(this.topologyIndex).canvasPos=domRect;
+          })
+          this.getNodesArr();
+        }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').getBoundingClientRect();
+          this.toolShow.attrCord=[domRect.width-350,0];
+          this.toolShow.height=domRect.height;
+          getTopology(this.topologyIndex).canvasPos=domRect;
+        });
+        this.reload();
+      },
+      /*tools 方法*/
+
+      winResize(){
+        let domRect=document.getElementById('topology-canvas').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 || this.timer3){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
+        },300)
+      },
+    },
+    destroyed(){
+      getTopology(this.topologyIndex).destroy();
+      setTopology(this.topologyIndex,null);
+      document.getElementById('topology-canvas').removeEventListener('mousemove',this.canvasMove);
+      window.removeEventListener('resize',this.winResize)
+    }
+  }
+</script>
+<style scoped>
+  /deep/ .el-collapse-item__header {
+    padding: 0 10px;
+    background-color: #F9F9F9;
+  }
+
+  /deep/ .el-collapse-item__wrap {
+    padding: 0 10px;
+    background-color: #F9F9F9;
+  }
+
+  /deep/ .el-collapse-item__content {
+    padding: 12px 0px;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-around;
+  }
+
+  /deep/ .el-upload--picture-card {
+    width: 100%;
+    height: 100%;
+    line-height: 0;
+  }
+  /deep/ .el-card__body{
+    padding: 0;
+    height: 100%;
+  }
+  /deep/ .handle {
+    position: absolute;
+    z-index: 2;
+  }
+
+  @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;
+  }
+</style>
+<style lang="scss" scoped>
+  .project-box {
+    width: 100%;
+    height: 100%;
+    position: relative;
+
+    .project-title {
+      height: 50px;
+      padding-top: 15px;
+    }
+
+    .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;
+      }
+
+      .buttons {
+        margin-top: 15px;
+        padding-bottom: 10px;
+        display: inline-block;
+        position: relative;
+        vertical-align: middle;
+
+        .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: 50px;
+          height: 50px;
+          margin: 0 3px;
+          text-align: center;
+          text-decoration: none !important;
+          cursor: pointer;
+          line-height: 50px;
+
+          .iconfont {
+            font-size: 48px;
+          }
+
+          img {
+            max-width: 50px;
+            max-height: 50px;
+          }
+
+          &: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;*/
+        }
+      }
+    }
+
+    .full {
+      flex: 1;
+      overflow: unset !important;
+    }
+
+    .props {
+      width: 300px;
+      height: 100%;
+      border: none;
+      position: absolute;
+      z-index: 1 !important;
+      background-color: #f9f9f9;
+    }
+  }
+</style>
diff --git a/nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue b/nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue
index c2da1f5fa..c1ba96f15 100644
--- a/nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue
+++ b/nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue
@@ -33,7 +33,7 @@
               <el-col style="width: calc(100% - 120px); height: 100%;">
                 <div class="input-box" @click="dropDownVisible=false" v-if="plugins.indexOf('metric-input') > -1">
                   <!--<editor :styleType="styleType" :metric-list="metricStore" :historyParam="historyParam" v-model="expressionList[index]" ref="editor" @on-enter="expressionChange" @on-blur="expressionChange" ></editor>-->
-                  <el-input v-model="expressionList[index]"></el-input>
+                  <el-input v-model="expressionList[index]" @change="metricChange"></el-input>
                   <div class="append-msg error" v-if="errorMsg"><span>{{errorMsg}}</span></div>
                   <div class="append-msg error" v-if="appendMsg"><span>{{appendMsg}}</span></div>
                 </div>
@@ -70,6 +70,7 @@
         historyParam:{type:Object},
         showRemove:{type:Boolean,default:true},
         projectRightBox:{type:Boolean,default:false},
+        metricOptionsParent:{type:Array},
         //metricOptions: {type: Array},
         //metricStore: {type: Array}
       },
@@ -136,7 +137,7 @@
           this.expressionList[this.index]=value;
           //this.$refs.editor.setContent(value)
           this.dropDownVisible=false;
-          this.$emit('change')
+          this.$emit('change',value)
         },
         expressionChange:function(){
           this.$emit('change')
@@ -160,7 +161,11 @@
           } else if (this.styleType == 2) {
             if (n) {
               //console.log(this.$parent.$parent)
-              this.metricOptions = this.$parent.$parent.$parent.getMetricOptions();
+              if(this.metricOptionsParent){
+                this.metricOptions=this.metricOptionsParent
+              }else{
+                this.metricOptions = this.$parent.$parent.$parent.getMetricOptions();
+              }
             } else {
               this.metricOptions = [];
             }
diff --git a/nezha-fronted/src/components/page/project/project.vue b/nezha-fronted/src/components/page/project/project.vue
index 44e93d708..4e44bb31b 100644
--- a/nezha-fronted/src/components/page/project/project.vue
+++ b/nezha-fronted/src/components/page/project/project.vue
@@ -178,7 +178,8 @@
     </template>
     <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"/>
+      <!--<facade :obj="currentProject" targetTab.sync="panel" ref="facade" v-if="reloadFacade"/>-->
+      <topologyL5 :obj="currentProject" targetTab.sync="panel" ref="facade" v-if="reloadFacade"/>
     </template>
 
     <transition name="el-zoom-in-bottom">
@@ -215,6 +216,7 @@
   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";
 
   export default {
@@ -224,6 +226,7 @@
       'loading':loading,
       'panel-tab':panelTab,
       facade,
+      topologyL5,
       'delete-button':deleteButton,
     },
     computed:{