diff --git a/nezha-fronted/src/components/charts/chart-list.vue b/nezha-fronted/src/components/charts/chart-list.vue
index 7b57b1101..948a2375a 100644
--- a/nezha-fronted/src/components/charts/chart-list.vue
+++ b/nezha-fronted/src/components/charts/chart-list.vue
@@ -153,7 +153,7 @@
   import draggable from 'vuedraggable'
   import chartDataFormat from "./chartDataFormat";
   import chartAlertList from './chart-alert-list'
-  import visNetwork from './visNetwork'
+  // import visNetwork from './visNetwork'
   export default {
     name: 'chartList',
     props: {
@@ -170,7 +170,7 @@
       chartUrl,
       chartSingleStat,
       draggable,
-      visNetwork,
+      // visNetwork,
     },
     data() {
       return {
@@ -655,23 +655,23 @@
             }
 
             this.dataList = [...this.dataTotalList];
-            this.dataList.push({ // 拓扑图
-              id: -10,
-              panelId: 0,
-              title: this.$t("alert.config.chart.alertNumTrend"),
-              span: 8,
-              height: 800,
-              type: "topology",
-              prev: -11,
-              next: -1,
-              unit: 1,
-              buildIn: 1,
-              elements: [{
-                id: '',
-                expression: `nz_alert_nums{id="${3333}"}`,
-                type: ''
-              }]
-            });
+            // this.dataList.push({ // 拓扑图
+            //   id: -10,
+            //   panelId: 0,
+            //   title: this.$t("alert.config.chart.alertNumTrend"),
+            //   span: 8,
+            //   height: 800,
+            //   type: "topology",
+            //   prev: -11,
+            //   next: -1,
+            //   unit: 1,
+            //   buildIn: 1,
+            //   elements: [{
+            //     id: '',
+            //     expression: `nz_alert_nums{id="${3333}"}`,
+            //     type: ''
+            //   }]
+            // });
             this.$nextTick(() => {
               if (this.dataList.length > 0 ) {
                 this.dataList.forEach((item,index) => {
diff --git a/nezha-fronted/src/components/common/project/a.png b/nezha-fronted/src/components/common/project/a.png
new file mode 100644
index 000000000..d6afeee61
Binary files /dev/null and b/nezha-fronted/src/components/common/project/a.png differ
diff --git a/nezha-fronted/src/components/common/project/a.svg b/nezha-fronted/src/components/common/project/a.svg
new file mode 100644
index 000000000..d3b3479ba
--- /dev/null
+++ b/nezha-fronted/src/components/common/project/a.svg
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="8px" height="32px" viewBox="0 0 8 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 52.5 (67469) - http://www.bohemiancoding.com/sketch -->
+    <title>矩形</title>
+    <desc>Created with Sketch.</desc>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="画板" transform="translate(-114.000000, -46.000000)" fill="#2D88FA">
+            <path d="M114,46 L114,46 C118.418278,46 122,49.581722 122,54 L122,70 C122,74.418278 118.418278,78 114,78 L114,46 Z" id="矩形"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/nezha-fronted/src/components/common/project/addLine.vue b/nezha-fronted/src/components/common/project/addLine.vue
new file mode 100644
index 000000000..749d907f1
--- /dev/null
+++ b/nezha-fronted/src/components/common/project/addLine.vue
@@ -0,0 +1,302 @@
+<template>
+  <div class="right-box right-box-edit-endpoint">
+    <!-- begin--顶部按钮-->
+    <div class="right-box-top-btns">
+      <button id="edit-ep-del" type="button" @click="del" class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-style-light ">
+        <span class="right-box-top-btn-icon"><i class="el-icon-delete"></i></span>
+        <span class="right-box-top-btn-txt">{{$t('overall.delete')}}</span>
+      </button>
+    </div>
+    <!-- end--顶部按钮-->
+
+    <!-- begin--标题-->
+    <div class="right-box-title">{{$t("project.endpoint.editEndpoint") + "  ID：" + lineData.id}}</div>
+    <!-- end--标题-->
+
+    <!-- begin--表单-->
+    <el-scrollbar class="right-box-form-box">
+      <el-form ref="form" :model="form" label-width="120px" :rules="rules">
+        <el-form-item label="Id">
+          <el-input v-model="form.lineId"></el-input>
+        </el-form-item>
+        <el-form-item label="箭头方向" prop="arrows">
+          <el-select v-model="form.arrows" placeholder="请选择活动区域">
+            <el-option label="from" value="from"></el-option>
+            <el-option label="to" value="to"></el-option>
+            <el-option label="from;to" value="from;to"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="color">
+          <el-color-picker
+            v-model="form.color"
+            :predefine="predefineColors">
+          </el-color-picker>
+        </el-form-item>
+        <el-form-item label="Label">
+          <el-input v-model="form.label"></el-input>
+        </el-form-item>
+      </el-form>
+    </el-scrollbar>
+
+    <!-- end--表单-->
+
+    <!--底部按钮-->
+    <div class="right-box-bottom-btns">
+      <button @click="esc" id="ep-edit-esc" class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-100">
+        <span>{{$t('overall.cancel')}}</span>
+      </button>
+      <button @click="onSubmit" id="ep-edit-save" class="nz-btn nz-btn-size-normal nz-btn-style-normal nz-btn-min-width-100">
+        <span>{{$t('overall.save')}}</span>
+      </button>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name:"addLine",
+    props:{
+      lineData:{},
+    },
+    watch:{
+      lineData:{
+        handler(n){
+          this.form={
+            arrows:n.arrows,
+            label:n.label,
+            color:n.color,
+            lineId:n.id,
+          }
+        },
+        immediate: true,
+        deep: true,
+      }
+    },
+    data(){
+      return{
+        form:{
+          arrows:'',
+          label:'',
+          color:'#1e90ff',
+          lineId:'',
+        },
+        predefineColors: [
+          '#ff4500',
+          '#ff8c00',
+          '#ffd700',
+          '#90ee90',
+          '#00ced1',
+          '#1e90ff',
+          '#c71585',
+        ],
+        rules:{
+          arrows: [
+            { required: true, message: '请输入活动名称', trigger: 'change' },
+          ],
+        }
+      }
+    },
+    methods:{
+      onSubmit(){
+        let model=Object.assign({id:this.form.lineId},{...this.form},{color: {color:this.form.color,highlight:this.form.color,hover:this.form.color,opacity:1.0}});
+        this.$emit('addLine',model)
+      },
+      /*关闭弹框*/
+      esc(refresh) {
+        this.$emit("close", refresh);
+      },
+      clickOutside() {
+        this.esc(false);
+      },
+      del(){
+        this.$emit('del');
+        this.esc();
+      }
+    },
+
+  }
+</script>
+
+<style scoped>
+  .nz-btn-edit-ok{
+    position: absolute;
+    bottom: 0;
+    right:0;
+  }
+  .nz-btn-edit-esc{
+    position: absolute;
+    bottom: 0;
+    left:0;
+  }
+
+  /* begin--搜索框*/
+  .endpoint-asset-search {
+    display: inline-block;
+    position: relative;
+    margin-top: -16px;
+  }
+  .endpoint-asset-search button {
+    height: 22px !important;
+  }
+  .endpoint-asset-search-dropdown {
+    position: absolute;
+    top: 25px;
+    background-color: #444;
+    border-radius: 4px;
+    width: 44px;
+    left: 0;
+  }
+  .endpoint-asset-search-dropdown-item {
+    text-align: center;
+    line-height: 22px;
+    height: 22px;
+    cursor: default;
+    color: white;
+    font-size: 12px;
+  }
+  .endpoint-asset-label-txt {
+    display: inline-block;
+    width: 19px;
+    text-align: center;
+  }
+  .endpoint-asset-search-dropdown-item:first-of-type {
+    border-radius: 4px 4px 0 0;
+  }
+  .endpoint-asset-search-dropdown-item:last-of-type {
+    border-radius: 0 0 4px 4px;
+  }
+  .endpoint-asset-search-dropdown-item:hover {
+    background-color: #222;
+    color: #ff9900;
+  }
+  .endpoint-asset-search-input {
+    display: inline-block;
+    width: 150px;
+    vertical-align: top;
+  }
+  /* end--搜索框*/
+
+  /* begin--table*/
+  .endpoint-sub-table {
+    padding-top: 30px;
+    height: 440px;
+  }
+  .line-100 {
+    margin-bottom: 3px;
+  }
+  .endpoint-sub-table-head {
+    line-height: 28px;
+    height: 30px;
+  }
+  .endpoint-sub-table-row, .endpoint-sub-table-row-disabled {
+    line-height: 28px;
+    height: 30px;
+    color: #656565;
+  }
+  .endpoint-sub-table-row:hover {
+    background-color: #dadada;
+    cursor: default;
+  }
+  .endpoint-sub-table-row-active {
+    background-color: #dadada;
+  }
+  .endpoint-sub-table-row-selected {
+    background-color: #656565;
+    color: white;
+  }
+  .endpoint-sub-table-col {
+    display: inline-block;
+    width: calc(50% - 15px);
+    padding-left: 10px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+  }
+  .endpoint-sub-table-paginate-all {
+    position: absolute;
+    left: 10px;
+    bottom: 17px;
+    color: #5a5a5a;
+  }
+  .endpoint-sub-table-body {
+    font-size: 15px;
+    position: relative;
+    overflow: auto;
+    height: calc(100% - 34px);
+  }
+  .endpoint-sub-table-body-dialog {
+    width: 100%;
+    height: 100%;
+    background-color: #e9ebec;
+    position: absolute;
+    opacity: 0.2;
+  }
+  .endpoints-clear-btn {
+    margin: 6px 0 0 7px;
+  }
+  /* end--table*/
+</style>
+
+<style lang="scss">
+  .right-box-edit-endpoint .el-pagination__total {
+    float: left;
+  }
+  right-box-edit-endpoint .pagination {
+    padding-top: 12px;
+    text-align: center;
+  }
+
+  .endpoint-sub-table-paginate .el-pager li, .endpoint-sub-table-paginate .el-pagination .btn-next, .endpoint-sub-table-paginate .el-pagination .btn-prev {
+    font-size: 13px;
+    min-width: 20px !important;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    text-align: center;
+    border: 1px solid rgba(154,154,154,0.20);
+    border-radius: 2px;
+    border-radius: 2px;
+  }
+  .endpoint-sub-table-paginate  .el-pagination.is-background .el-pager li:not(.disabled).active {
+    color: white !important;
+  }
+  .endpoint-sub-table-paginate .el-pagination.is-background .el-pager li:not(.disabled):hover {
+    color: #666;
+  }
+  .right-box-edit-endpoint .el-pagination .el-pager li.btn-quicknext, .right-box-edit-endpoint .el-pager li.btn-quickprev {
+    line-height: 20px;
+  }
+  .right-box-edit-endpoint .el-pagination .el-pager .more::before {
+    line-height: 20px;
+  }
+  .right-box-edit-endpoint .el-pager li.number{
+    font-family: NotoSansSC-Regular;
+    color: #666666;
+    letter-spacing: 0;
+    font-weight:normal;
+  }
+  .right-box-edit-endpoint .el-pager li.number.active{
+    font-family: NotoSansSC-Regular;
+    color: #FFFFFF;
+    letter-spacing: 0;
+  }
+
+  .endpoint-sub-table-paginate .el-pagination.is-background .el-pager li:not(.disabled).active {
+    background-color: $global-text-color-active;
+    border-radius: 2px;
+    border-radius: 2px;
+  }
+  .right-box-edit-endpoint .el-pager li:hover, .right-box-edit-endpoint .el-pagination .btn-next:hover, .right-box-edit-endpoint .el-pagination .btn-prev:hover {
+    font-family: NotoSansSC-Regular;
+    color: #666666;
+    letter-spacing: 0;
+    font-weight:normal;
+  }
+  .right-box-edit-endpoint .el-pagination__sizes .el-input .el-input__inner, .right-box-edit-endpoint .el-pagination__editor.el-input .el-input__inner{
+    height: 20px;
+    border-color: rgba(154,154,154,0.20);
+  }
+  .right-box-edit-endpoint .el-pagination__sizes .el-input .el-input__inner:hover{
+    border-color: rgba(154,154,154,0.20);
+  }
+</style>
+
diff --git a/nezha-fronted/src/components/common/project/addNode.vue b/nezha-fronted/src/components/common/project/addNode.vue
new file mode 100644
index 000000000..aaab2e100
--- /dev/null
+++ b/nezha-fronted/src/components/common/project/addNode.vue
@@ -0,0 +1,472 @@
+<template>
+  <div class="right-box right-box-edit-endpoint" v-clickoutside="clickOutside">
+    <!-- begin--顶部按钮-->
+    <div class="right-box-top-btns">
+      <button id="edit-ep-del" type="button" @click="del" class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-style-light ">
+        <span class="right-box-top-btn-icon"><i class="el-icon-delete"></i></span>
+        <span class="right-box-top-btn-txt">{{$t('overall.delete')}}</span>
+      </button>
+    </div>
+    <!-- end--顶部按钮-->
+
+    <!-- begin--标题-->
+    <div class="right-box-title">{{$t("project.endpoint.editEndpoint") + "  ID：" + nodeData.id}}</div>
+    <!-- end--标题-->
+
+    <!-- begin--表单-->
+    <el-scrollbar class="right-box-form-box">
+      <el-form ref="form" :model="form" label-width="160px" :rules="rules">
+        <el-form-item label="Module Name" prop="modelId">
+          <el-select v-model="form.modelId" placeholder=""  popper-class="asset-dropdown">
+            <el-option
+              v-for="item in nodesArray"
+              :key="item.id"
+              :label="item.label"
+              :value="item.id">
+            </el-option>
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="Label" prop="imgId">
+          <el-select v-model="form.imgId" placeholder=""  popper-class="asset-dropdown">
+            <el-option
+              v-for="item in iconArray"
+              :key="item.id"
+              :label="item.label"
+              :value="item.id">
+              <span style="float: left">
+                <img :src="item.image" />
+              </span>
+              <span style="float: right; color: #8492a6; font-size: 13px">{{ item.label }}</span>
+            </el-option>
+          </el-select>
+        </el-form-item>
+
+        <!--<el-form-item label="image">-->
+          <!--<el-input v-model="form.image"></el-input>-->
+        <!--</el-form-item>-->
+        <!--<div  class="right-box-sub-title">-->
+          <!--<span>{{$t('alert.config.expr')}}</span>-->
+          <!--<span class="float-right" @click="addExpression"><i style="font-size: 16px; cursor: pointer;" class="nz-icon nz-icon-create-square"></i></span>-->
+        <!--</div>-->
+        <!--<el-row class="element-item" style="" v-for="index of promqlKeys.length" :key="'ele' + index">-->
+          <!--<promql-input-->
+            <!--:ref="'promql-'+(index-1)"-->
+            <!--:id="promqlKeys[index-1]"-->
+            <!--:key="promqlKeys[index-1]"-->
+            <!--:expression-list="expressions"-->
+            <!--:index="index-1"-->
+            <!--:styleType="2"-->
+            <!--:plugins="['metric-selector', 'metric-input', 'remove']"-->
+            <!--@change="expressionChange"-->
+            <!--@removeExpression="removeExpression"-->
+          <!--&gt;</promql-input>-->
+          <!--<el-row>-->
+            <!--<template v-if="editChart.type != 'singleStat'">-->
+              <!--<el-col style="width: 120px; padding-right: 20px; text-align: right; color: #666">-->
+                <!--{{$t('dashboard.panel.chartForm.legend')}}&nbsp;-->
+                <!--<el-popover :content="$t('dashboard.panel.chartForm.legendTip')" placement="top" width="150" trigger="hover">-->
+                  <!--<i slot="reference" class="nz-icon nz-icon-info-normal" style="font-size: 12px; -webkit-transform:scale(0.75);display:inline-block;" @mouseover="rz"></i>-->
+                <!--</el-popover>-->
+              <!--</el-col>-->
+              <!--<el-col style="width: calc(100% - 120px);">-->
+                <!--<el-input v-model="legends[index-1]" type="text" size="small"></el-input>-->
+              <!--</el-col>-->
+            <!--</template>-->
+            <!--<template v-else>-->
+              <!--<el-col style="width: 120px; padding-right: 20px; text-align: right; color: #666">-->
+                <!--{{$t('dashboard.panel.chartForm.statistics')}}&nbsp;-->
+              <!--</el-col>-->
+              <!--<el-col style="width: calc(100% - 120px);">-->
+                <!--<el-select popper-class="chart-box-dropdown-mini" v-model="statistics" placeholder="" size="small">-->
+                  <!--<el-option v-for="item in statisticsList" :key="item.value" :label="item.label" :value="item.value">-->
+                    <!--<span class="panel-dropdown-label-txt" >{{item.label}}</span>-->
+                  <!--</el-option>-->
+                <!--</el-select>-->
+              <!--</el-col>-->
+            <!--</template>-->
+          <!--</el-row>-->
+        <!--</el-row>-->
+      </el-form>
+    </el-scrollbar>
+
+    <!-- end--表单-->
+
+    <!--底部按钮-->
+    <div class="right-box-bottom-btns">
+      <button @click="esc" id="ep-edit-esc" class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-100">
+        <span>{{$t('overall.cancel')}}</span>
+      </button>
+      <button @click="onSubmit" id="ep-edit-save" class="nz-btn nz-btn-size-normal nz-btn-style-normal nz-btn-min-width-100">
+        <span>{{$t('overall.save')}}</span>
+      </button>
+    </div>
+  </div>
+</template>
+
+<script>
+  // import promqlInput from "@compotents/page/dashboard/explore/promqlInput";
+  import  a from './a.png'
+  import  b from './b.png'
+  import  c from './c.png'
+  import  d from './d.png'
+  import  e from './e.png'
+  import  f from './f.png'
+	export default {
+		name:"addNode",
+    components:{
+      // 'promql-input': promqlInput,
+    },
+    props:{
+      nodeData:{}
+    },
+    watch:{
+      nodeData:{
+        handler(n){
+         for(let key in this.form){
+           this.form[key]=n[key]
+         }
+         this.form.modelId=n.id;
+       },
+       immediate: true,
+       deep: true,
+      }
+    },
+    data(){
+		  return{
+        form:{
+          modelId:'',
+          imgId:'',
+        },
+        promqlKeys:[],
+        expressions: [],
+        rules:{
+          modelId:[
+            { required: true, message: '请选择module', trigger: 'blur' },
+          ],
+          imgId:[
+            { required: true, message: '请选择module', trigger: 'blur' },
+          ],
+        },
+        nodesArray:[
+          { id: 1, label: "model1",
+            image: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1906469856,4113625838&fm=26&gp=0.jpg',
+            shape:'image',shapeProperties:{useImageSize:false},
+            x:1,y:-63,
+          },
+          {id: 2, label: "model2", },
+          {id: 3, label: "model3",},
+          {id: 4, label: "model4", },
+          {id: 5, label: "model5",},
+          {id: 6, label: "model6",},
+          {id: 7, label: "model7",},
+
+          {id: 9, label: "model9", },
+          {id: 10, label: "model10", },
+          {id: 11, label: "model11",},
+          {id: 12, label: "model12",},
+          {id: 13, label: "model13",},
+          {id: 14, label: "model14",},
+        ],
+        iconArray:[
+          {id:1,image:a,label:'model1',},
+          {id:2,image:b,label:'model2',},
+          {id:3,image:c,label:'model3',},
+          {id:4,image:d,label:'model4',},
+          {id:5,image:e,label:'model5',},
+          {id:6,image:f,label:'model6',},
+          // {id:7,img:'./a.png',label:'model',},
+        ],
+      }
+    },
+    methods:{
+      onSubmit(){
+        this.$refs['form'].validate((valid) => {
+          if (valid) {
+            let module=this.nodesArray.find(item=>item.id===this.form.modelId);
+            let img=this.iconArray.find(item=>item.id===this.form.imgId);
+            let model=Object.assign({...this.form},{...module},{...img},{id:this.form.modelId,shape:'image',shapeProperties:{useImageSize:false}},);
+            this.$emit('addModel',model)
+          }
+        });
+
+      },
+      expressionChange: function () {
+
+      },
+      addExpression() {
+        this.expressions.push('');
+        this.legends.push('');
+        this.promqlKeys.push(getUUID());
+        this.elementIds.push("");
+        this.promqlCount++;
+      },
+      removeExpression(index) {
+        if (this.promqlCount > 1) {
+          this.expressions.splice(index, 1);
+          this.legends.splice(index, 1);
+          this.promqlKeys.splice(index, 1);
+          this.elementIds.splice(index, 1);
+          this.promqlCount--;
+          this.$nextTick(() => {
+            this.expressions.forEach((ex, index) => {
+              if (ex) {
+                this.$refs[`promql-${index}`][0].metricChange(ex);
+              }
+            });
+          });
+        }
+      },
+      /*关闭弹框*/
+      esc(refresh) {
+        this.$emit("close", refresh);
+      },
+      clickOutside() {
+        this.esc(false);
+      },
+      del(){
+        this.$emit('del');
+        this.esc();
+      }
+    },
+
+	}
+</script>
+
+<style scoped>
+  .nz-btn-edit-ok{
+    position: absolute;
+    bottom: 0;
+    right:0;
+  }
+  .nz-btn-edit-esc{
+    position: absolute;
+    bottom: 0;
+    left:0;
+  }
+
+  /* begin--搜索框*/
+  .endpoint-asset-search {
+    display: inline-block;
+    position: relative;
+    margin-top: -16px;
+  }
+  .endpoint-asset-search button {
+    height: 22px !important;
+  }
+  .endpoint-asset-search-dropdown {
+    position: absolute;
+    top: 25px;
+    background-color: #444;
+    border-radius: 4px;
+    width: 44px;
+    left: 0;
+  }
+  .endpoint-asset-search-dropdown-item {
+    text-align: center;
+    line-height: 22px;
+    height: 22px;
+    cursor: default;
+    color: white;
+    font-size: 12px;
+  }
+  .endpoint-asset-label-txt {
+    display: inline-block;
+    width: 19px;
+    text-align: center;
+  }
+  .endpoint-asset-search-dropdown-item:first-of-type {
+    border-radius: 4px 4px 0 0;
+  }
+  .endpoint-asset-search-dropdown-item:last-of-type {
+    border-radius: 0 0 4px 4px;
+  }
+  .endpoint-asset-search-dropdown-item:hover {
+    background-color: #222;
+    color: #ff9900;
+  }
+  .endpoint-asset-search-input {
+    display: inline-block;
+    width: 150px;
+    vertical-align: top;
+  }
+  /* end--搜索框*/
+
+  /* begin--table*/
+  .endpoint-sub-table {
+    padding-top: 30px;
+    height: 440px;
+  }
+  .line-100 {
+    margin-bottom: 3px;
+  }
+  .endpoint-sub-table-head {
+    line-height: 28px;
+    height: 30px;
+  }
+  .endpoint-sub-table-row, .endpoint-sub-table-row-disabled {
+    line-height: 28px;
+    height: 30px;
+    color: #656565;
+  }
+  .endpoint-sub-table-row:hover {
+    background-color: #dadada;
+    cursor: default;
+  }
+  .endpoint-sub-table-row-active {
+    background-color: #dadada;
+  }
+  .endpoint-sub-table-row-selected {
+    background-color: #656565;
+    color: white;
+  }
+  .endpoint-sub-table-col {
+    display: inline-block;
+    width: calc(50% - 15px);
+    padding-left: 10px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+  }
+  .endpoint-sub-table-paginate-all {
+    position: absolute;
+    left: 10px;
+    bottom: 17px;
+    color: #5a5a5a;
+  }
+  .endpoint-sub-table-body {
+    font-size: 15px;
+    position: relative;
+    overflow: auto;
+    height: calc(100% - 34px);
+  }
+  .endpoint-sub-table-body-dialog {
+    width: 100%;
+    height: 100%;
+    background-color: #e9ebec;
+    position: absolute;
+    opacity: 0.2;
+  }
+  .endpoints-clear-btn {
+    margin: 6px 0 0 7px;
+  }
+  /* end--table*/
+
+
+  .el-row {
+    margin-bottom: 20px;
+  }
+  .el-row:last-child  {
+    margin-bottom: 0;
+  }
+  .el-col {
+    border-radius: 4px;
+  }
+  .bg-purple {
+    background: white;
+  }
+  .grid-content {
+    border-radius: 4px;
+    min-height: 36px;
+  }
+
+  .common-float-left {
+    float: left;
+    display:inline-block;
+  }
+
+  .el-inner {
+    width: 200px;
+    border-top-width: 0px;
+    border-left-width: 0px;
+    border-right-width: 0px;
+    border-bottom-width: 10px;
+    border-color:red;
+    /*outline: medium;*/
+  }
+
+  .element-bottom-border {
+    padding-bottom: 5px;
+    border-bottom: 1px solid #dfe7f2;
+    margin-top: 15px;
+  }
+  /*metric样式--begin*/
+  .element-item {
+    padding: 20px 0;
+    border-bottom: 1px dashed #dfe7f2;
+    width: 100%;
+  }
+  /*metric样式--end*/
+  .label-center{
+    vertical-align: middle;
+    line-height: 34px;
+  }
+
+  .z-top {
+    z-index: 2900;
+  }
+
+</style>
+
+<style lang="scss">
+  .right-box-edit-endpoint .el-pagination__total {
+    float: left;
+  }
+  right-box-edit-endpoint .pagination {
+    padding-top: 12px;
+    text-align: center;
+  }
+
+  .endpoint-sub-table-paginate .el-pager li, .endpoint-sub-table-paginate .el-pagination .btn-next, .endpoint-sub-table-paginate .el-pagination .btn-prev {
+    font-size: 13px;
+    min-width: 20px !important;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    text-align: center;
+    border: 1px solid rgba(154,154,154,0.20);
+    border-radius: 2px;
+    border-radius: 2px;
+  }
+  .endpoint-sub-table-paginate  .el-pagination.is-background .el-pager li:not(.disabled).active {
+    color: white !important;
+  }
+  .endpoint-sub-table-paginate .el-pagination.is-background .el-pager li:not(.disabled):hover {
+    color: #666;
+  }
+  .right-box-edit-endpoint .el-pagination .el-pager li.btn-quicknext, .right-box-edit-endpoint .el-pager li.btn-quickprev {
+    line-height: 20px;
+  }
+  .right-box-edit-endpoint .el-pagination .el-pager .more::before {
+    line-height: 20px;
+  }
+  .right-box-edit-endpoint .el-pager li.number{
+    font-family: NotoSansSC-Regular;
+    color: #666666;
+    letter-spacing: 0;
+    font-weight:normal;
+  }
+  .right-box-edit-endpoint .el-pager li.number.active{
+    font-family: NotoSansSC-Regular;
+    color: #FFFFFF;
+    letter-spacing: 0;
+  }
+
+  .endpoint-sub-table-paginate .el-pagination.is-background .el-pager li:not(.disabled).active {
+    background-color: $global-text-color-active;
+    border-radius: 2px;
+    border-radius: 2px;
+  }
+  .right-box-edit-endpoint .el-pager li:hover, .right-box-edit-endpoint .el-pagination .btn-next:hover, .right-box-edit-endpoint .el-pagination .btn-prev:hover {
+    font-family: NotoSansSC-Regular;
+    color: #666666;
+    letter-spacing: 0;
+    font-weight:normal;
+  }
+  .right-box-edit-endpoint .el-pagination__sizes .el-input .el-input__inner, .right-box-edit-endpoint .el-pagination__editor.el-input .el-input__inner{
+    height: 20px;
+    border-color: rgba(154,154,154,0.20);
+  }
+  .right-box-edit-endpoint .el-pagination__sizes .el-input .el-input__inner:hover{
+    border-color: rgba(154,154,154,0.20);
+  }
+</style>
diff --git a/nezha-fronted/src/components/common/project/b.png b/nezha-fronted/src/components/common/project/b.png
new file mode 100644
index 000000000..df64d235f
Binary files /dev/null and b/nezha-fronted/src/components/common/project/b.png differ
diff --git a/nezha-fronted/src/components/common/project/c.png b/nezha-fronted/src/components/common/project/c.png
new file mode 100644
index 000000000..45912e1d3
Binary files /dev/null and b/nezha-fronted/src/components/common/project/c.png differ
diff --git a/nezha-fronted/src/components/common/project/chart.scss b/nezha-fronted/src/components/common/project/chart.scss
new file mode 100644
index 000000000..53104c9ab
--- /dev/null
+++ b/nezha-fronted/src/components/common/project/chart.scss
@@ -0,0 +1,597 @@
+.clearfix:after{
+  display: block;
+  content: "";
+  clear: both;
+}
+.clearfix{
+  margin-bottom: 0px;
+}
+.hidden{
+  visibility: hidden;
+}
+.visible{
+  visibility: visible;
+}
+.legend-shape{
+  display:inline-block;
+  margin-right:5px;
+  border-radius:10px;
+  width:15px;
+  height:5px;
+  vertical-align: middle;
+}
+.ft-gr{
+  color:lightgray;
+}
+.legend-container{
+  width: calc(100% - 30px);
+  max-height:80px;
+  min-height:25px;
+  font-size:12px;
+  text-align:left;
+  left: 10px;
+  bottom: 0px;
+  line-height: 18px;
+  position: absolute;
+  padding-bottom:3px;
+}
+.nz-icon-warning{
+  color:  #e6a23c;
+}
+.legend-container-screen.legend-container {
+  max-height: 80px;
+  min-height:25px;
+}
+.legend-item{
+  text-overflow:ellipsis;
+  white-space:nowrap;
+  /*width:100%;*/
+  margin-right:10px;
+  overflow-x:hidden;
+  cursor:pointer;
+  display:inline-block;
+  float:left;
+  line-height: 20px;
+}
+.nz-chart-dropdown {
+  height: 180px;
+  li {
+    padding-left:15px !important;
+    padding-right:0px !important;
+    width:140px;
+    text-align: left;
+    i {
+      margin-right: 10px;
+    }
+  }
+}
+.nz-chart-dropdown-one {
+  height: 36px;
+  li {
+    padding-left:15px !important;
+    padding-right:0px !important;
+    width:140px;
+    text-align: left;
+    i {
+      margin-right: 10px;
+    }
+  }
+}
+.panel-info-corner {
+  color: #767980;
+  cursor: pointer;
+  position: absolute;
+  display: none;
+  left: 0;
+  width: 28px;
+  height: 28px;
+  z-index: 2;
+  top: 0;
+}
+.panel-info-corner--error {
+  display: block;
+  color: #fff;
+}
+.panel-info-corner .fa {
+  position: relative;
+  top: -6px;
+  left: -6px;
+  font-size: 75%;
+  z-index: 3;
+}
+.panel-info-corner .fa-model {
+  position: relative;
+  top: -3px;
+  left: 4px;
+  font-size: 75%;
+  z-index: 3;
+}
+.fa, .fa-model{
+  display: inline-block;
+  text-rendering: auto;
+  -webkit-font-smoothing: antialiased;
+}
+
+.panel-info-corner--error .panel-info-corner-inner {
+   border-left: 28px solid #e02f44;
+   border-right: none;
+   border-bottom: 28px solid rgba(0,0,0,0);
+ }
+.panel-info-corner-inner {
+  width: 0;
+  height: 0;
+  position: absolute;
+  left: 0;
+  bottom: 0;
+}
+.chart-error-popper[x-placement^=top] .popper__arrow::after {
+  border-top-color: #e02f44;
+  bottom:0px;
+}
+.chart-error-popper[x-placement^=bottom] .popper__arrow::after {
+  border-bottom-color: #e02f44;
+}
+.popper__arrow::after{
+  border:solid 3px yellow
+}
+.chart-error-popper{
+  background-color:#e02f44;
+  color:#FFF;
+  word-wrap:break-word;
+  word-break:break-word;
+  max-width:280px;
+  border: 1px solid #e02f44;
+}
+.chart-warring-popper[x-placement^=top] .popper__arrow::after {
+  border-top-color: #e6a23c;
+  bottom:0px;
+}
+.chart-warring-popper[x-placement^=bottom] .popper__arrow::after {
+  border-bottom-color: #e6a23c;
+}
+.popper__arrow::after{
+  border:solid 3px yellow
+}
+.chart-warring-popper{
+  background-color:#e6a23c;
+  color:#FFF;
+  word-wrap:break-word;
+  word-break:break-word;
+  max-width:280px;
+  border: 1px solid #e6a23c;
+}
+.moreTitle{
+  .panel-info-corner--error .panel-info-corner-inner {
+    border-left: 28px solid #e6a23c;
+    border-right: none;
+    border-bottom: 28px solid rgba(0,0,0,0);
+  }
+  .panel-info-corner-inner {
+    width: 0;
+    height: 0;
+    position: absolute;
+    left: 0;
+    bottom: 0;
+  }
+  .nz-icon-warning:before {
+    color: #fff;
+  }
+}
+.nz-chart-resize {
+  height: 100%;
+  width: 100%;
+  position: relative;
+}
+.resize-box {
+  border: 1px solid #d8dce1;
+  position: absolute;
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+}
+.resize-shadow {
+  height: 100%;
+  width: 100%;
+  position: absolute;
+  box-sizing: border-box;
+}
+.resize-shadow-active {
+  background-color: #f5f9ff;
+  border: 1px solid #b7d0f7;
+  box-shadow: 1px 1px 1px #d3e1f8;
+}
+.drag-disabled .el-dropdown-link {
+  cursor: default !important;
+}
+.resize-box {
+  .pagination {
+    padding-top: 0;
+  }
+  .success {
+    background-color: #50d050;
+    color: white;
+    padding: 2px 5px;
+    border-radius: 4px;
+  }
+  .danger {
+    background-color: #d64f40;
+    color: white;
+    padding:2px 5px;
+    border-radius: 4px;
+  }
+  .chart-table, .chart-alert-info {
+    width: 100%;
+    .table-container {
+      padding: 0 6px;
+      box-sizing: border-box;
+      .nz-table {
+        margin-top: 6px;
+        box-sizing: border-box;
+      }
+    }
+  }
+  .chart-single-stat {
+    width: 100%;
+    .single-stat-container {
+      padding-left: 8px;
+      padding-right: 8px;
+      display: table;
+      text-align: center;
+      width: calc(100% - 16px);
+      .single-stat-content{
+        text-align:center;
+        vertical-align: middle;
+        display:table-cell;
+        font-size:30px;
+      }
+    }
+  }
+  .chart-container.chart-detail {
+    height: 100%;
+    position: relative;
+    background-color: white;
+    .chart-title:hover {
+      background-color:#d8dce1;
+    }
+    .chart-title:not(.drag-disabled) {
+      cursor: move;
+    }
+    .chart-title {
+      text-align: center;
+      width: 100%;
+      line-height: 30px;
+      padding: 1px 3px 0 3px;
+      box-sizing: border-box;
+      .nz-chart-top{
+        width:100%;
+      }
+      .el-dropdown-link {
+        cursor: move;
+      }
+      .el-icon-arrow-down {
+        font-size: 12px;
+      }
+      .chart-title-text {
+        font-size: 16px;
+        line-height: 26px;
+        color: #52545c;
+        display:flex;
+        justify-content:center;
+        align-items:center;
+        max-width:calc(100% - 20px);
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
+        .chart-title-icon{
+          display: inline-block;
+          cursor: pointer;
+        }
+      }
+    }
+    .chart-info {
+      padding-top: 6px;
+      width: 100%;
+      height: calc(100% - 34px);
+    }
+    .active-icon {
+      margin: 0;
+    }
+    .chart-sub {
+      padding: 0 15px;
+      margin-bottom: 5px;
+      :last-of-type {
+        margin-bottom: 0;
+      }
+    }
+    .chart-sub-title {
+      background-color: #efefef;
+      font-size: 13px;
+      color: #505255;
+      padding-left: 2px;
+      height: 25px;
+      line-height: 25px;
+      user-select: none;
+    }
+    .chart-sub-content, .chart-third-content, .chart-forth-content {
+      width: 100%;
+      box-sizing: border-box;
+      >.content-item>.item-tip {
+        display: inline-block;
+        box-sizing: border-box;
+      }
+      >.content-item>.item-tip:not(.content-item-value-muti) {
+        padding: 0 3px 0 13px;
+      }
+      >.content-item {
+        font-size: 13px;
+        line-height: 26px;
+        border-top: 1px solid rgb(235, 238, 245);
+        display: flex;
+        position: relative;
+        flex-wrap: wrap;
+        .item-tip> {
+          .item-tip-hide {
+            display: none;
+            position: absolute;
+            bottom: 34px;
+            min-width: 50px;
+            white-space: normal;
+          }
+          .item-tip-key {
+            left: 17%;
+            transform: translateX(-50%);
+            width: 33%;
+          }
+          .item-tip-value {
+            left: 67%;
+            width: 63%;
+            transform: translateX(-50%);
+          }
+          .item-tip-hide::after {
+            content: '';
+            display: block;
+            width:0;
+            height:0;
+            overflow: hidden;
+            font-size: 0;
+            line-height: 0;
+            border: 5px;
+            border-style: dashed dashed solid dashed;
+            border-color: white transparent transparent transparent;
+            position: absolute;
+            left: 50%;
+            bottom: 0;
+            transform: translate(-50%, 10px);
+          }
+        }
+        .item-tip:hover>.item-tip-show {
+          display: block;
+        }
+        .item-tip.deep {
+          padding-left: 26px;
+          box-sizing: border-box;
+          height: 26px;
+        }
+        .item-tip.deepp {
+          padding-left: 39px;
+          box-sizing: border-box;
+          height: 26px;
+        }
+        .item-tip.deep:nth-of-type(2) {
+          padding-left: 13px;
+          box-sizing: border-box;
+          height: 26px;
+        }
+        .item-tip.deepp:last-of-type {
+          padding-left: 13px;
+          box-sizing: border-box;
+          height: 26px;
+        }
+        .tag-value:hover .item-tip-show {
+          display: block;
+        }
+        .tag-value {
+          text-overflow: ellipsis;
+          overflow: hidden;
+          white-space: nowrap;
+        }
+        .content-item-key {
+          color: #666;
+          width: 35%;
+          height: 26px;
+          text-overflow: ellipsis;
+          overflow: hidden;
+          white-space: nowrap;
+        }
+        .content-item-key .no-overflow, .content-item-value .no-overflow {
+          text-overflow: unset;
+          white-space: normal;
+        }
+        .content-item-value {
+          .item-value-sub {
+            padding: 0 3px 0 13px;
+            box-sizing: border-box;
+          }
+          .item-value-sub:not(:last-of-type) {
+            border-bottom: 1px solid rgb(235, 238, 245);
+          }
+          .nz-table {
+            th .cell {
+              height: 25px;
+              line-height: 25px;
+            }
+            td .cell {
+              min-height: 26px;
+              line-height: 26px;
+            }
+            .el-table__body {
+              background-color: white;
+            }
+            .el-table__body tr:last-of-type td {
+              border: none;
+            }
+            .el-table__body tr td {
+              background-color: white;
+            }
+            .el-table__body tr:hover>td {
+              background-color: white;
+            }
+          }
+          text-overflow: ellipsis;
+          overflow: hidden;
+          white-space: nowrap;
+          border-left: 1px solid rgb(235, 238, 245);
+          color: #1a1a1a;
+          width: 65%;
+          height: 99%;
+        }
+      }
+    }
+    .chart-sub-content {
+      >.content-item:first-of-type {
+        border-top: none;
+      }
+      >.content-item:last-of-type {
+        border-bottom: 1px solid rgb(235, 238, 245);
+      }
+    }
+  }
+  .chart-url {
+    .url-container {
+      padding: 0 8px 8px 8px;
+      box-sizing: border-box;
+    }
+  }
+  .line-chart-block, .chart-table, .chart-single-stat, .chart-url, .chart-asset-info, .chart-alert-info, .chart-project-info, .chart-alert-rule-info ,.vis-network{
+    height: 100%;
+    position: relative;
+    background-color: white;
+    .chartTitle:hover {
+      background-color:#d8dce1;
+    }
+    .chartTitle {
+      text-align: center;
+      width: 100%;
+      line-height: 30px;
+      height: 28px;
+      padding: 1px 3px 0 3px;
+      box-sizing: border-box;
+      .nz-chart-top{
+        width:100%;
+      }
+      .el-dropdown-link {
+        cursor: move;
+      }
+      .el-icon-arrow-down {
+        font-size: 12px;
+      }
+      .chart-title {
+        font-size: 16px;
+        line-height: 26px;
+        color: #52545c;
+        display:flex;
+        justify-content:center;
+        align-items:center;
+        .chart-title-text{
+          max-width:calc(100% - 20px);
+          text-overflow: ellipsis;
+          overflow: hidden;
+          white-space: nowrap;
+          cursor: pointer;
+        }
+        .chart-title-icon{
+          display: inline-block;
+          cursor: pointer;
+        }
+      }
+    }
+
+    .line-area {
+      box-sizing: border-box;
+      background: #FFF;
+      min-height: 95px;
+      padding-left:8px;
+      padding-right:8px;
+    }
+    .button-panel-height{
+      height:26px;
+    }
+    .button-panel-height button{
+      height:26px;
+    }
+    .edit {
+      position: absolute;
+      right: 20px;
+      top: 17px;
+      z-index: 10;
+
+    }
+    .chart-select {
+      position: absolute;
+      left: 40px;
+      top: 25px;
+      z-index: 10;
+      font-size: 14px;
+      .chart-select-btn {
+        margin-right: 10px;
+        cursor: pointer;
+        &.active {
+          color: #5aacff;
+        }
+      }
+    }
+    /*没有数据显示*/
+    .null {
+      position: absolute;
+      top: 50%;
+      width: 100%;
+      text-align: center;
+      font-size: 24px;
+      font-weight: 600;
+    }
+  }
+}
+.dialog-tool {
+  margin-right: 40px;
+}
+.line-chart-block-modal {
+  .el-dialog{
+    height: 80%;
+  }
+  .line-area {
+    box-sizing: border-box;
+    background: #FFF;
+    height: 100%;
+    span.highcharts-title {/*针对highcharts设置的样式，echarts需要修改？？*/
+      display: block !important;
+      width: 50%;
+      font-size: 14px !important;
+      overflow: hidden;
+      word-wrap: break-word !important;
+      white-space: pre-wrap !important;
+    }
+  }
+  .element-top-border {
+    padding-bottom: 5px;
+    border-top: 1px solid #dfe7f2;
+    margin-top:-25px;
+  }
+
+  .element-bottom-border {
+    border-bottom: 1px solid #dfe7f2;
+    margin-bottom:-20px;
+  }
+  .pt10{
+    padding-top:10px;
+  }
+  .el-dialog__body {
+    height: calc(100% - 80px);
+  }
+
+  .el-dialog__header{
+    padding: 20px 20px 0px;
+  }
+
+}
diff --git a/nezha-fronted/src/components/common/project/d.png b/nezha-fronted/src/components/common/project/d.png
new file mode 100644
index 000000000..6f0354497
Binary files /dev/null and b/nezha-fronted/src/components/common/project/d.png differ
diff --git a/nezha-fronted/src/components/common/project/e.png b/nezha-fronted/src/components/common/project/e.png
new file mode 100644
index 000000000..3019f7707
Binary files /dev/null and b/nezha-fronted/src/components/common/project/e.png differ
diff --git a/nezha-fronted/src/components/common/project/f.png b/nezha-fronted/src/components/common/project/f.png
new file mode 100644
index 000000000..b1c49b15a
Binary files /dev/null and b/nezha-fronted/src/components/common/project/f.png differ
diff --git a/nezha-fronted/src/components/common/project/projectFacade.vue b/nezha-fronted/src/components/common/project/projectFacade.vue
new file mode 100644
index 000000000..a0cddd07b
--- /dev/null
+++ b/nezha-fronted/src/components/common/project/projectFacade.vue
@@ -0,0 +1,143 @@
+<template>
+  <div style="background: #F9F9F9;height: 100%">
+    <div class="top-tools">
+      <template>
+        <div class="top-tool-main-right">
+          <div class="top-tool-search relative-position margin-r-20">
+            <el-input ref="queryPanel" @clear="clearInput" id="queryPanel" @focus="focusInput"  @blur="blurInput" v-model="filter.searchName" class="query-input-inactive" size="mini" clearable   >
+              <i slot="suffix" class="el-input__icon el-icon-search" @click="focusInput" style="float: right"></i>
+            </el-input>
+          </div>
+
+          <pick-time :refresh-data-func="dateChange" v-model="searchTime" :use-chart-unit="false"></pick-time>
+        </div>
+      </template>
+    </div>
+    <div class="project-facade">
+      <div class="facade-top">
+        <div>123</div>
+        <div>456</div>
+      </div>
+      <vis-network
+        :panel-id="item.id"
+        :chart-data="item"
+        :chart-index="0"
+        class="facade-content"
+      >
+      </vis-network>
+    </div>
+  </div>
+</template>
+
+<script>
+  import visNetwork from './visNetwork'
+  import draggable from 'vuedraggable'
+  import pickTime from "@/components/common/pickTime";
+  import bus from '@/libs/bus';
+  import timePicker from '@/components/common/timePicker'
+	export default {
+		name:"projectFacade",
+    components: {
+      visNetwork,
+      draggable,
+      'pick-time':pickTime,
+      'time-picker':timePicker,
+    },
+    data(){
+		  return {
+		    item:{ // 拓扑图
+          id: -10,
+          panelId: 0,
+          title: this.$t("alert.config.chart.alertNumTrend"),
+          span: 8,
+          height: 800,
+          type: "topology",
+          prev: -11,
+          next: -1,
+          unit: 1,
+          buildIn: 1,
+          elements: [{
+            id: '',
+            expression: `nz_alert_nums{id="${3333}"}`,
+            type: ''
+          }]
+        },
+        panelData: [],
+        toAdd() {
+          this.$refs.panelBox.show(true);
+          this.panel = {
+            id: '',
+            name: ''
+          };
+          this.$refs.panelBox.setTitle(this.$t("dashboard.panel.createPanelTitle"));
+        },
+        showPanel: { //panel下拉列表
+          id: '',
+          name: ''
+        },
+        filter: { // 过滤条件
+          panelId: 0,
+          start_time: '',
+          end_time: '',
+          searchName: ''
+        },
+        searchTime: [
+          new Date(bus.computeTimezone(new Date().getTime())).setHours(new Date(bus.computeTimezone(new Date().getTime())).getHours() - 1),
+          new Date(bus.computeTimezone(new Date().getTime()))
+        ],
+      }
+    },
+    methods:{
+      focusInput() {
+        let classVal=document.getElementById('queryPanel').parentElement.getAttribute("class");
+        classVal=classVal.replace('query-input-inactive','query-input-active');
+        document.getElementById('queryPanel').parentElement.setAttribute("class",classVal );
+        this.$refs.queryPanel.focus();
+      },
+      blurInput() {
+        if(!this.filter.searchName || this.filter.searchName == ''){
+          setTimeout(function(){
+            let classVal=document.getElementById('queryPanel').parentElement.getAttribute("class");
+            classVal=classVal.replace('query-input-active','query-input-inactive');
+            document.getElementById('queryPanel').parentElement.setAttribute("class",classVal );
+          },100)
+        }
+      },
+      clearInput() {
+        this.$refs.queryPanel.focus();
+      },
+      dateChange(val) {
+        this.filter.start_time = bus.timeFormate(this.searchTime[0], 'yyyy-MM-dd hh:mm:ss');
+        this.filter.end_time = bus.timeFormate(this.searchTime[1], 'yyyy-MM-dd hh:mm:ss');
+        this.filter.panelId = this.showPanel.id;
+        // this.getData(this.filter);
+        console.log(this.filter)
+      },
+    }
+	}
+</script>
+
+<style scoped>
+  .project-facade{
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+  }
+  .facade-top{
+    min-height: 178px;
+    display: flex;
+    margin: 12px 0;
+    height: 16%;
+  }
+  .facade-top > div{
+    height: 100%;
+    width: 18%;
+    min-width: 280px;
+    background: #FFFFFF;
+    margin-right: 9px;
+  }
+  .facade-content{
+    flex: 1;
+    min-height: 800px;
+  }
+</style>
diff --git a/nezha-fronted/src/components/common/project/topology.vue b/nezha-fronted/src/components/common/project/topology.vue
new file mode 100644
index 000000000..7de15c150
--- /dev/null
+++ b/nezha-fronted/src/components/common/project/topology.vue
@@ -0,0 +1,668 @@
+<template>
+  <div class="content">
+    <div class="editTopology">
+      <span v-show="!selectNodeTitle" class="editTopologyModule">
+        Module element :
+        <span class="editTopologyAdd" @click="addModelShow">Add</span>
+        <span class="editTopologyRemove" @click="nodeDel">Remove</span>
+      </span>
+      <span v-show="!selectNodeTitle" class="editTopologyLine">
+        Line :
+        <span class="editTopologyAdd" @click="addLineTitleShow">Add</span>
+        <span class="editTopologyRemove" @click="lineDel">Remove</span>
+      </span>
+      <span class="editTopologyLineCancel" v-show="selectNodeTitle">Please select two nodes  <span class="editTopologyCancel" @click="closeAddLine">Cancel</span></span>
+    </div>
+    <div class="network"  v-clickoutside="networkPopClose">
+        <!--图拓扑图-->
+        <div id="network_id" ref="visNetwork" :class="{'cursorMove': cursorMove}"></div>
+        <!--拓扑图工具-->
+        <div
+          id="networkPop"
+          class="networkPop"
+          :style="{transform:'scale('+zoom+')'}"
+          v-show="networkPopShow"
+        >
+          <i class="nz-icon nz-icon-hexagonBorder"  v-for="item in popData"  :style="{top:item.top,left:item.left}" @click="popClick(item.id)">
+            <i class="nz-icon nz-icon-liubianxing"></i>
+            <i :class="[item.className,{'nz-icon':item.className},'noMove']"></i>
+          </i>
+          <!--<i class="nz-icon nz-icon-delete" @click="nodeDel"></i>-->
+        </div>
+        <!--拓扑图选中-->
+        <div class="selNode" id="nodeArr1" v-show="NodeArr[0]&&NodeArrShow" :style="{transform:'scale('+zoom+')'}">
+          <div class="selNodeTop"></div>
+          <div class="selNodeRight"></div>
+          <div class="selNodeBottom"></div>
+          <div class="selNodeLeft"></div>
+        </div>
+        <div class="selNode" id="nodeArr2" v-show="NodeArr[1]&&NodeArrShow" :style="{transform:'scale('+zoom+')'}">
+          <div class="selNodeTop"></div>
+          <div class="selNodeRight"></div>
+          <div class="selNodeBottom"></div>
+          <div class="selNodeLeft"></div>
+        </div>
+        <!--图谱图右侧-->
+        <!--<div class="networkContent">33333</div>-->
+        <!--model上的图标-->
+        <i class="nz-icon nz-icon-shuidi"
+           v-show="item.show"
+           v-for="(item,index) in modelTop"
+           :style="{top:(item.y- 80 + 5*(10-zoom*10))+'px',left:(item.x-26)+'px',transform:'scale('+zoom+')'}"
+           :ref="'modelTopId'+index"
+           @mousedown="modelTopMouseDown(item,index)"
+           @mouseup="modelTopMouseUp(item,index)"
+        >
+          <i class="nz-icon nz-icon-model"></i>
+        </i>
+    </div>
+    <transition name="right-box">
+      <add-model  v-if="addNodeShow" @addModel="addModel" :nodeData="nodeData" @close="addNodeShow=false" @del="nodeDel" :isAdd="isNodeAdd"></add-model>
+    </transition>
+    <transition name="right-box">
+      <add-line  v-if="addLineShow" @addLine="addLine" @lineDel="lineDel" :selectNode="NodeArr" :lineData="lineData" :isAdd="isLineAdd" @close="closeAddLine" @del="lineDel"></add-line>
+    </transition>
+  </div>
+</template>
+
+<script>
+  import Vis from 'vis'
+  import addNode from './addNode'
+  import addLine from './addLine'
+	export default {
+		name:"topology",
+    components: {
+      'add-model':addNode,
+      'add-line':addLine,
+    },
+    props:{
+      nodesArray:{
+        type:Array
+      },
+      edgesArray:{
+        type:Array
+      },
+      isFullScreen:{
+        type:Boolean,
+      },
+    },
+    watch:{
+      NodeArr(n){
+        if(n.length==2){
+          this.lineData={
+            arrows:'',
+            label:'',
+            color:'#1e90ff',
+            lineId:'',
+            id:'',
+          }
+          this.addLineShow=true;
+          this.selectNodeTitle=false;
+          this.isLineAdd=true;
+        }
+       this.selNodeArrUpdate()
+      }
+    },
+    data(){
+		  return {
+        zoom:1,
+        domScale:1,
+        selectNodeTitle:false,
+        // 拓扑图工具
+        networkPopTop:0,
+        networkPopLeft:0,
+        networkPopShow:false,
+        addNodeShow:false,
+        addLineShow:false,
+        NodeArrShow:false,
+        cursorMove:false,
+        NodeArr:[],
+        selNodeId:'',
+        lineData:{
+          arrows:'',
+          label:'',
+          color:'#1e90ff',
+          lineId:'',
+          id:'',
+        },
+        isLineAdd:true,
+        isNodeAdd:true,
+        nodeData:{
+          modelId:'',
+          label:'',
+          x:'',
+          y:'',
+          image:'',
+        },
+        popData:[
+          {top:'-20px', left:'-17px',className:'nz-icon-edit',id:'edit'},
+          {top:'-20px', left:'28px',className:'nz-icon-chart',id:'2'},
+          {top:'18px',  left:'52px',className:'nz-icon-chart',id:'3'},
+          {top:'56px', left:'28px',className:'',id:'4'},
+          {top:'56px', left:'-17px',className:'nz-icon-chart',id:'5'},
+          {top:'18px', left:'-38px',className:'nz-icon-chart',id:'6'},
+        ],
+        modelTop:[],
+        //viewsCenter
+        viewsCenter:{
+          x:0,y:0
+        },
+        // 拓扑图数据
+        nodes:[],
+        edges:[],
+        // network:null,
+        container:null,
+        options:{},
+        data:{}
+      }
+    },
+    methods:{
+      //拓扑图方法
+      init(type){
+        let this_ = this;
+        this_.nodes = new Vis.DataSet(this_.nodesArray);
+        this_.edges = new Vis.DataSet(this_.edgesArray);
+        this_.container = this.$refs.visNetwork;
+        this_.networkPop = document.getElementById('networkPop');
+        this_.data = {
+          nodes: this_.nodes,
+          edges: this_.edges
+        };
+        this_.options = {
+          autoResize: true,
+          clickToUse:true,
+          groups:{
+            useDefaultGroups: true,
+            myGroupId:{
+              /*node options*/
+            }
+          },
+          nodes: {
+            shape: 'dot',
+            size: 40,
+            borderWidth: 2,
+            font:{
+              size:20,
+            },
+          },
+
+          edges: {
+            width: 2,
+            smooth:{  //设置两个节点之前的连线的状态
+              enabled: true,//默认是true，设置为false之后，两个节点之前的连线始终为直线，不会出现贝塞尔曲线
+              roundness:0.5,
+              type: "curvedCW",
+            },
+            selfReferenceSize:40,
+          },
+          layout:{
+            randomSeed: 666,
+          },
+          physics: { //计算节点之前斥力，进行自动排列的属性
+            enabled: false, //默认是true，设置为false后，节点将不会自动改变，拖动谁谁动。不影响其他的节点
+            barnesHut: {
+              gravitationalConstant: -4000,
+              centralGravity: 0.3,
+              springLength: 120,
+              springConstant: 0.04,
+              damping: 0.09,
+              avoidOverlap: 0
+            }
+          },
+
+          interaction:{
+            dragNodes: true, //是否能拖动节点
+            dragView: true, //是否能拖动画布
+            hover: true, //鼠标移过后加粗该节点和连接线
+            multiselect: false, //按 ctrl 多选
+            selectable: true, //是否可以点击选择
+            selectConnectedEdges: false, //选择节点后是否显示连接线
+            hoverConnectedEdges: true, //鼠标滑动节点后是否显示连接线
+            zoomView: true, //是否能缩放画布
+            navigationButtons:true,
+          },
+
+          manipulation: {  //该属性表示可以编辑，出现编辑操作按钮
+            enabled: false,
+          },
+        };
+        this_.network = new Vis.Network(this_.container, this_.data, this_.options);
+        this_.network.moveTo({
+          position: this_.viewsCenter,
+          scale: this_.isFullScreen?1.5:1,
+          offset: {x:0, y:0},
+        });
+        if(this_.isFullScreen) {
+          console.log(this_.viewsCenter)
+        }
+        this_.containerCanvas=document.querySelectorAll("#network_id canvas")[0];
+        this_.modelTopUpdate();
+        this_.zoom=this_.network.canvasToDOM({x:0,y:1}).y-this_.network.canvasToDOM({x:0,y:0}).y;
+        console.log(this_.zoom);
+      },
+      resetAllNodes() {
+        this.setNetworkData(this.nodesArray,this.edgesArray);
+      },
+      resetAllNodesStabilize() {
+        let this_ = this;
+        this_.resetAllNodes();
+        this_.network.stabilize();
+      },
+      setNetworkData(nodes,edges){//动态设置拓扑图数据
+        let this_ = this;
+        this.nodes = new Vis.DataSet(nodes);
+        this.edges = new Vis.DataSet(edges);
+        this.network.setData({
+          nodes:this_.nodes,
+          edges: this_.edges
+        });
+        this_.network.moveTo({
+          position: this_.viewsCenter,
+          scale: this_.isFullScreen?1.5:1,
+          offset: {x:0, y:0},
+        });
+        console.log( this.nodes,this.edges);
+        if(this_.isFullScreen) {
+          console.log(this_.viewsCenter)
+        }
+        this.$nextTick(()=>{
+          this_.modelTopUpdate();
+        })
+      },
+      addModel(model){ // 添加model
+        this.addNodeShow=false;
+        if(!model){return}
+        let nodesArray=[...this.nodesArray];
+        if(!this.isNodeAdd){
+          model={...nodesArray.find(item=>item.id===model.id),...model};
+          nodesArray=nodesArray.filter(item=>item.id!==model.id);
+        }else{
+          model={...model,...this.network.DOMtoCanvas({x:40,y:40})};
+        }
+        nodesArray.push(model);
+        this.$emit("setTopologyData",nodesArray,this.edgesArray);
+        this.setNetworkData(nodesArray,this.edgesArray);
+      },
+      addModelShow(){ // 显示添加节点弹窗
+        this.addNodeShow=true;
+        this.isNodeAdd=true;
+        this.nodeData={
+          modelId:'',
+          label:'',
+          x:'',
+          y:'',
+          image:'',
+        }
+      },
+      addLine(edges){ // 添加或者編輯line
+        this.addLineShow=false;
+        console.log(edges);
+        if(!edges){return}
+        let edgesArray =[...this.edgesArray];
+       if(!this.isLineAdd){
+         console.log(edgesArray.find(item=>item.id ===edges.id));
+         edges={...edgesArray.find(item=>item.id===edges.id),...edges};
+         edgesArray=edgesArray.filter(item=>item.id!==edges.id);
+       }else{
+         edges.from=this.NodeArr[0];
+         edges.to=this.NodeArr[1];
+         edges.dashes=[15,15];
+       }
+       edgesArray.push(edges);
+       console.log(edgesArray,edges);
+        this.$emit("setTopologyData",this.nodesArray,edgesArray);
+        this.setNetworkData(this.nodesArray,edgesArray);
+        this.NodeArr=[];
+        this.NodeArrShow=false;
+      },
+      addLineTitleShow(){ // 显示添加线弹窗
+        // this.addLineShow=true;
+        this.selectNodeTitle=true;
+        this.NodeArrShow=true;
+      },
+      closeAddLine(){
+        this.selectNodeTitle=false;
+        this.addLineShow=false;
+        this.NodeArr=[];
+        this.NodeArrShow=false;
+        this.network.unselectAll();
+      },
+      setNodePosition(selId){ // 移动节点后 设置节点坐标
+        let position = this.network.getPositions([selId]);
+        let selItem = this.nodesArray.find((item)=>item.id===selId);
+        this.nodeData = selItem;
+        selItem.x=position[selId].x;
+        selItem.y=position[selId].y;
+        console.log(this.nodesArray);
+        this.$emit("setTopologyData",this.nodesArray,this.edgesArray);
+      },
+      setPopPosition(selId,params){//设置节点工具栏位置
+        console.log(selId);
+        if(!selId){return}
+        let position=this.network.canvasToDOM(this.network.getPositions([selId])[selId]);
+        this.networkPop.style.top = position.y - 85 + 7*(10-this.zoom*10)+'px';
+        this.networkPop.style.left = position.x - 32*this.zoom - 5*(1-this.zoom*1) +'px';
+        if(!this.isFullScreen&&this.NodeArr.length==0){
+          this.networkPopShow=true;
+        }
+        this.NodeArr=[...this.NodeArr]
+      },
+      networkPopClose(){//关闭节点工具栏
+        this.networkPopShow=false;
+        this.selNodeId=''
+        this.network.unselectAll();
+      },
+      //工具栏
+      nodeDel(){
+        let nodesArray=this.nodesArray.filter((item)=>item.id!==this.selNodeId);
+        let edgesArray=this.edgesArray.filter((item)=>item.from!==this.selNodeId || this.to!==this.selNodeId);
+        this.$emit('setTopologyData',nodesArray, edgesArray);
+        this.setNetworkData(nodesArray, edgesArray);
+        this.networkPopClose();
+      },
+      nodeEdit(){
+        this.addNodeShow=true;
+        this.isNodeAdd=false;
+      },
+      lineDel(){
+        if(!this.lineData.id){return}
+        let edgesArray=this.edgesArray.filter((item)=>item.id!==this.lineData.id);
+        this.$emit('setTopologyData',this.nodesArray, edgesArray);
+        this.setNetworkData(this.nodesArray,edgesArray);
+      },
+
+      // 工具的点击 对应的操作
+      popClick(id){
+        if(id=='edit'){
+          this.nodeEdit()
+        }
+
+      },
+      modelTopUpdate(){//model上的图标 实时更新
+        this.modelTop=[];
+        this.nodesArray.forEach((item)=>{
+          let position=this.network.canvasToDOM({x:item.x,y:item.y});
+          if(item.id===1){console.log(position)};
+          this.modelTop.push({
+            show:true,
+            x:position.x,
+            y:position.y,
+            id:item.id,
+          })
+        })
+      },
+      selNodeArrUpdate(){// 选中狂位置更新
+        this.NodeArr.forEach((id,index)=>{
+          let selNode = this.nodesArray.find(item=>item.id===id);
+          let position=this.network.canvasToDOM({x:selNode.x,y:selNode.y});
+          document.getElementById('nodeArr'+(index+1)).style.top=position.y+'px';
+          document.getElementById('nodeArr'+(index+1)).style.left=position.x+'px';
+        })
+      },
+      modelTopMouseDown(item,index){
+        console.log(this.$refs['modelTopId'+index]);
+       this.$refs['modelTopId'+index][0].addEventListener('mousemove',this.modelTopMouseMove)
+      },
+      modelTopMouseUp(item,index){
+        console.log(this.$refs['modelTopId'+index]);
+        this.$refs['modelTopId'+index][0].removeEventListener('mousemove',this.modelTopMouseMove);
+      },
+      modelTopMouseMove(e){
+        console.log(e)
+      }
+    },
+    mounted(){
+       setTimeout(()=>{
+         let this_=this;
+         this.init('modal');
+         this.network.on("click", function (params) {
+           let selId=params.nodes[0];
+           this_.networkPopClose();
+           if(selId){
+             this_.selNodeId=selId;
+             this_.cursorMove=true;
+             this_.nodeData=this_.nodesArray.find((item)=>item.id==selId);
+             console.log(this_.NodeArr.indexOf(selId));
+             if(this_.NodeArr.indexOf(selId)!==-1){
+                let index = this_.NodeArr.indexOf(selId);
+                this_.NodeArr=this_.NodeArr.filter((item,i)=> i != index);
+                return
+             }
+             if(this_.selectNodeTitle){
+               this_.NodeArr.push(selId);
+               this_.network.selectNodes(this_.NodeArr,true);
+               return
+             }
+             this_.setPopPosition(selId,params);
+           }
+         });
+
+         this.network.on("selectEdge", function (params) { // 选择边
+           this_.lineData=this_.edgesArray.find((item)=>item.id===params.edges[0]);
+           this_.lineData.color=this_.lineData.color.color;
+           this_.addLineShow=true;
+           this_.isLineAdd=false;
+           console.log(this_.lineData)
+         });
+
+         this.network.on("dragStart", function (params) {//节点移动开始
+           this_.networkPopShow=false;
+           this_.NodeArrShow=false;
+           let selId=params.nodes[0];
+           if(selId){
+             this_.modelTop.find(item=>item.id===selId).show=false;
+           }
+           if(!selId){
+             this_.modelTop.forEach(item=>{
+               item.show=false;
+             })
+           }
+         });
+
+         this.network.on("dragging", function (params,event) {//节点移动中
+
+         });
+
+         this.network.on("dragEnd", function (params) {//节点移动结束
+           this_.viewsCenter=this_.network.getViewPosition();
+           let selId=params.nodes[0];
+           if(selId){
+             this_.setPopPosition(selId,params);
+             this_.setNodePosition(selId)
+           }
+           if(this_.NodeArr.length>0){
+             this_.NodeArrShow=true;
+           }
+           this_.modelTopUpdate();
+           this_.selNodeArrUpdate();
+         });
+
+         this.network.on("hoverNode", function (params) {//hoverNode
+           this_.cursorMove=true;
+         });
+
+         this.network.on("blurNode", function (params) {//blurNode
+           this_.cursorMove=false;
+         });
+
+         this.network.on("zoom", function (params) {//检测缩放
+           // this_.zoom=Math.round(params.scale*100)/100-0.1;
+           this_.zoom=params.scale;
+           // console.log(this_.nodesArray);
+           // console.log(this_.network.getPositions());
+           this_.modelTopUpdate();
+           this_.selNodeArrUpdate();
+           this_.setPopPosition(this_.selNodeId);
+           console.log(this_.zoom);
+           return false
+         });
+       })
+    }
+	}
+</script>
+
+<style scoped>
+  .content{
+    height: 100%;
+  }
+  .editTopology{
+    width: 100%;
+    height: 28px;
+  }
+  .network{
+    display: flex;
+    height: calc(100% - 30px);
+    position: relative;
+    overflow: hidden;
+  }
+  .networkPop{
+    position: absolute;
+    z-index: 10;
+    /*border: 1px solid #e6e6e6;*/
+    border-radius: 5px;
+    height: 32px;
+    /*background: #fff;*/
+    padding: 0 3px;
+    line-height: 32px;
+  }
+  .networkPop .nz-icon-hexagonBorder{
+    position: absolute;
+    font-size: 48px;
+    color: #84d5c2;
+  }
+  .networkPop  .nz-icon-liubianxing{
+    color:#e2f3ef;
+    font-size: 44px;
+    position: absolute;
+    top: 0;
+    left: 2px;
+  }
+  .nz-icon.noMove{
+    position: absolute;
+    top: 0px;
+    left: 14px;
+    font-size: 20px;
+    color: #27c09c;
+  }
+  .networkPop .nz-icon-hexagonBorder:hover{
+    transform: scale(1.2);
+  }
+  .networkPop .nz-icon-hexagonBorder:hover .nz-icon-liubianxing{
+    transform: scale(1.1);
+    left: 4px;
+    font-size: 41px;
+  }
+  .networkPop .nz-icon-hexagonBorder:hover .noMove{
+    transform: scale(1.1);
+  }
+  .btmTriangle{
+    position: absolute;
+    width: 0;
+    height: 0;
+    border-width: 10px;
+    border-style: solid;
+    border-color:#e6e6e6 transparent transparent transparent;
+    bottom: -20px;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+  .btmTriangle:after{
+    content: '';
+    display:block;
+    width:0;
+    height:0;
+    border-width: 10px;
+    border-style:solid;
+    border-color:#fff transparent  transparent transparent;
+    position:absolute;
+    bottom: -7px;
+    left: -9px;
+  }
+  #network_id{
+    width: 90%;
+    height: 100%;
+  }
+  .cursorMove{
+    cursor: move;
+  }
+  #network_id2{
+    height: 100%;
+  }
+  .networkContent{
+    width: 40%;
+  }
+  .nz-icon-delete{
+    cursor: pointer;
+    color: #ee6723;
+    margin-left: 10px;
+  }
+  .nz-icon-edit{
+    font-size: 14px;
+    cursor: pointer;
+  }
+  .editTopology{
+    color: #1a1a1a;
+    font-size: 18px;
+    font-weight: bold;
+  }
+  .editTopologyModule,.editTopologyLineCancel{
+    margin-left: 30px;
+  }
+  .editTopologyLine{
+    margin-left: 130px;
+  }
+  .editTopologyAdd,.editTopologyRemove,.editTopologyCancel{
+    color: #1989fa;
+    margin-left: 30px;
+    cursor: pointer;
+  }
+  .selNode{
+    position: absolute;
+    width: 0;
+    height: 0;
+  }
+  .selNodeTop {
+    width: 120px;
+    height: 0;
+    border-top: 4px dashed yellow;
+    position: absolute;
+    left: -60px;
+    top: -60px;
+  }
+  .selNodeRight {
+    width: 0px;
+    height: 120px;
+    border-right: 4px dashed yellow;
+    position: absolute;
+    left: 60px;
+    top: -60px;
+  }
+  .selNodeBottom {
+    width: 120px;
+    height: 0;
+    border-bottom: 4px dashed yellow;
+    position: absolute;
+    left: -60px;
+    top: 60px;
+  }
+  .selNodeLeft {
+    width: 0px;
+    height: 120px;
+    border-left: 4px dashed yellow;
+    position: absolute;
+    left: -60px;
+    top: -60px;
+  }
+  .nz-icon-shuidi{
+    position: absolute;
+    font-size: 48px;
+    color: rgba(132,213,194,0.5);
+  }
+  .nz-icon-model{
+    color: #23BF9A;
+    position: absolute;
+    top: 14px;
+    left: 15px;
+    font-size: 18px;
+  }
+</style>
diff --git a/nezha-fronted/src/components/common/project/visNetwork.vue b/nezha-fronted/src/components/common/project/visNetwork.vue
new file mode 100644
index 000000000..58b635b9d
--- /dev/null
+++ b/nezha-fronted/src/components/common/project/visNetwork.vue
@@ -0,0 +1,418 @@
+<template>
+    <div class="nz-chart-resize">
+    <div class="resize-shadow" ref="resizeShadow"></div>
+    <div class="resize-box resize-box-table" ref="resizeBox">
+      <div class="vis-network" :id="'chartTableDiv'+chartIndex" @mouseenter="caretShow=true" @mouseleave="caretShow=false">
+        <loading :ref="'localLoading'+chartIndex"></loading>
+        <div class="clearfix chartTitle text-right" :class="{'dragTitle':dragTitleShow}" :id="'chartTitle'+chartIndex">
+          <el-popover
+            v-if="isError"
+            :close-delay=10
+            placement="top-start"
+            trigger="hover"
+            popper-class="chart-error-popper">
+            <div >{{errorContent}}</div>
+            <span slot="reference" style="" class="panel-info-corner panel-info-corner--error">
+                <i class="nz-icon nz-icon-warning fa"></i>
+                <span class="panel-info-corner-inner"></span>
+            </span>
+          </el-popover>
+          <span class="el-dropdown-link chart-title" @click="dropdownMenuShow=!dropdownMenuShow">
+              <span></span>
+              <span>
+                <span class="chart-title-text">{{chartData.title}}</span>
+                <!--<span class="chart-title-icon"><i class="el-icon-caret-bottom el-icon&#45;&#45;right"  :class="{'visible':caretShow,'hidden':!caretShow}"></i></span>-->
+              </span>
+              <span>
+                <i class="nz-icon nz-icon-edit float-right"></i>
+                <i class="nz-icon nz-icon-zoomin float-right"></i>
+                <i class="nz-icon nz-icon-exit-full-screen float-right"></i>
+              </span>
+            </span>
+        </div>
+        <div class="vis-network-content">
+          <topology :nodesArray="nodesArray" :edgesArray="edgesArray" @setTopologyData="setTopologyData" :isFullScreen="false" ref="topology"></topology>
+        </div>
+      </div>
+
+    </div>
+  </div>
+</template>
+
+<script>
+  import  a from './a.png'
+  import  b from './b.png'
+  import  c from './c.png'
+  import  d from './d.png'
+  import  e from './e.png'
+  import  f from './f.png'
+  import bus from '@/libs/bus';
+  import {Loading} from 'element-ui';
+  import chartDataFormat from '@/components/charts/chartDataFormat'
+  import loading from "@/components/common/loading";
+  import timePicker from '@/components/common/timePicker';
+  import topology from './topology'
+  export default {
+    name: 'visNetwork',
+    components: {
+      'loading': loading,
+      'time-picker':timePicker,
+      'topology':topology,
+    },
+    props:{
+      chartIndex:{
+        type: Number,
+        default: 0,
+      },
+      chartData: {
+        type: Object
+      },
+    },
+    data () {
+      return {
+        //其他
+        tableHeight: 0,
+        data: {}, // 该图表信息,chartItem
+        unit:{},
+        isError:false,
+        errorContent:'',
+        pageSizes:[50,100,200],
+        pageObj: {
+          pageNo: 1,
+          pageSize: 50,
+          total: 0
+        },
+        screenPageObj:{
+          pageNo: 1,
+          pageSize: 50,
+          total: 0
+        },
+        storedTableData:[],
+        storedScreanTableData:[],
+        seriesItem: [], // 保存信息
+        seriesItemScreen:[],//全屏数据
+        images: '',
+        loading:Object,
+        items: {
+          metric_name: [], // 每条数据列名称
+          xAxis: [],
+          theData: [], // series数据组
+        },
+        panelIdInner: '', // 看板id=panelId,原写作chart,由set_data获取
+        firstLoad: true, // 是否第一次加载
+        chartType: 'table', // 图表类型
+        screenModal: false,
+        // 查询数据使用
+        filter: {
+          start_time: '',
+          end_time: '',
+        },
+        stableFilter: {}, // 保存数据使用,初始化起止时间,单图or多图等
+        firstShow: false, // 默认不显示操作按钮,
+        caretShow:false,
+        dragTitleShow:false,
+        dropdownMenuShow:false,
+        divFirstShow:false,
+        columns: [
+          {
+            title:'Element',
+            key:'element',
+            sortable: true
+          }
+          , {
+            title: '采集时间',
+            key: 'time',
+            width: 160,
+            render: (h, params) => h('span', bus.timeFormate(params.row.time, 'yyyy-MM-dd hh:mm:ss')),
+          }, {
+            title: '数值',
+            key: 'value',
+            width: 160,
+            sortable: true,
+            render: (h, params) => h('span', this.getNumStr(params.row.value)),
+          }],
+        searchTime: [new Date().setHours(new Date().getHours() - 1), new Date()],//全屏显示的时间
+        oldSearchTime: [],
+        nodesArray:[
+          { id: 1, label: "model",
+            image: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1906469856,4113625838&fm=26&gp=0.jpg',
+            shape:'image',shapeProperties:{useImageSize:false},
+            x:1,y:-63,
+            imgId:0,
+            scaling:{min:0.5,max:10,}
+          },
+          {id: 2, imgId:1, scaling:{min:0.5,max:10,}, label: "model", x:-236,y:-163, image: a, shape:'image',shapeProperties:{useImageSize:false}},
+          {id: 3, imgId:2, scaling:{min:0.5,max:10,}, label: "model", x:-346,y:-155, image: b, shape:'image',shapeProperties:{useImageSize:false}},
+          {id: 4, imgId:3, scaling:{min:0.5,max:10,}, label: "model", x:-129,y:169, image: c, shape:'image',shapeProperties:{useImageSize:false}},
+          {id: 5, imgId:4, scaling:{min:0.5,max:10,}, label: "model", x:-388,y:35, image: d, shape:'image',shapeProperties:{useImageSize:false}},
+          {id: 6, imgId:5, scaling:{min:0.5,max:10,}, label: "model", x:-345,y:-53, image: e, shape:'image',shapeProperties:{useImageSize:false}},
+          {id: 7, imgId:6, scaling:{min:0.5,max:10,}, label: "model", x:316,y:22, image: f, shape:'image',shapeProperties:{useImageSize:false}},
+        ],
+        edgesArray:[
+          {id: 0,from: 2, to: 1, dashes:[15,15],label:"hahah",arrows:'from;to', color: {color:'#ff4500',highlight:'#ff4500',hover:'#ff4500',opacity:1.0}},
+          {id: 1,from: 3, to: 1, dashes:[15,15],label:"hahah",arrows:'from',smooth:true, color: {color:'#1e90ff',highlight:'#1e90ff',hover:'#1e90ff',opacity:1.0}},
+          {id: 2,from: 5, to: 4, dashes:[15,15],label:"hahah",arrows:'to',smooth:true, color: {color:'#1e90ff',highlight:'#1e90ff',hover:'#1e90ff',opacity:1.0}},
+          {id: 3,from: 4, to: 1, dashes:[15,15],label:"hahah",arrows:'from;to',smooth:true, color: {color:'#1e90ff',highlight:'#1e90ff',hover:'#1e90ff',opacity:1.0}},
+          {id: 4,from: 4, to: 6, dashes:[15,15],label:"hahah",arrows:'from;to',smooth:true, color: {color:'#1e90ff',highlight:'#1e90ff',hover:'#1e90ff',opacity:1.0}},
+          {id: 5,from: 1, to: 7, dashes:[15,15],label:"hahah",arrows:'from;to',smooth:true, color: {color:'#1e90ff',highlight:'#1e90ff',hover:'#1e90ff',opacity:1.0}},
+        ],
+      }
+
+    },
+
+    methods:{
+      // 其他
+      filterShowData(source,pageObj){
+        return source.slice((pageObj.pageNo-1)*pageObj.pageSize,pageObj.pageNo*pageObj.pageSize)
+      },
+      startResize(e) {
+        let vm = this;
+        this.$chartResizeTool.start(vm, this.data, e);
+      },
+      screenPageNo(val) {
+        this.screenPageObj.pageNo = val;
+        this.seriesItemScreen=this.filterShowData(this.storedScreanTableData, this.screenPageObj)
+      },
+      screenPageSize(val) {
+        this.screenPageObj.pageSize = val;
+        this.seriesItemScreen=this.filterShowData(this.storedScreanTableData, this.screenPageObj)
+      },
+      startLoading(area){
+        if(area==='screen'){
+          this.$refs['localLoadingScreen'+this.chartIndex].startLoading();
+        }else {
+          this.$refs['localLoading'+this.chartIndex].startLoading();
+        }
+      },
+      endLoading(area){
+        if(area==='screen'){
+          this.$refs['localLoadingScreen'+this.chartIndex].endLoading();
+        }else {
+          this.$refs['localLoading'+this.chartIndex].endLoading();
+        }
+      },
+      resize(chartItem) {
+        let deHeight = this.$chartResizeTool.titleHeight+this.$chartResizeTool.chartTableBlankHeight;
+        let container = document.querySelector('#chartTableDiv' + this.chartIndex + " .table-container");
+        container.style.height = `calc(100% - ${deHeight*2}px)`;
+        this.tableHeight = `calc(100% - ${this.$refs.Pagination.$el.offsetHeight}px)`;
+        this.$nextTick(() => {
+          container.querySelector(".el-table__body-wrapper")._ps_.update();
+        });
+      },
+      showLoad(chartItem) {
+        //设置高度 chart-table
+        this.$nextTick(() => {
+          this.resize(chartItem);
+        });
+        this.startLoading();
+        this.divFirstShow = true;
+      },
+      // 重新请求数据 刷新操作-local
+      refreshChart() {
+        this.dropdownMenuShow=false;
+        this.startLoading();
+        this.firstShow = false;
+        this.$emit('on-refresh-data', this.data.id);
+      },
+      // 编辑图表
+      editChart() {
+        this.dropdownMenuShow=false;
+        this.$emit('on-edit-chart-block', this.data.id);
+      },
+      // 删除该图表
+      removeChart() {
+        this.dropdownMenuShow=false;
+        this.$emit('on-remove-chart-block', this.data.id);
+      },
+      //全屏时间条件查询
+      dateChange(time) {
+        this.searchTime = [...time];
+        this.seriesItemScreen = [];
+        for(let i=0;i<8;i++){
+          this.seriesItemScreen.push({//表格数据
+            element:'',
+            time: '',//采集时间
+            value: '',//数值
+          });
+        }
+        this.startLoading('screen');
+        this.$emit('on-search-data', this.data.id, this.searchTime);
+      },
+      clickos() {
+        this.dropdownMenuShow=false;
+      },
+      clearChart(){
+        this.data = {};
+      },
+      duplicate(){
+        this.dropdownMenuShow=false;
+        const param = {id:this.data.id};
+        this.$post('panel/'+ this.data.panelId+'/charts/duplicate',(param)).then(response => {
+          if (response.code === 200) {
+            this.$message({
+              duration: 2000,
+              type: 'success',
+              message: this.$t("tip.duplicateSuccess")
+            });
+            this.$emit('on-duplicate-chart-block', this.data.id,response.data);
+          }else {
+            if(response.msg){
+              this.$message.error(response.msg);
+            }else if(response.error){
+              this.$message.error(response.error);
+            }else {
+              this.$message.error(response);
+            }
+          }
+        });
+      },
+      // 全屏查看
+      showAllScreen() {
+        this.dropdownMenuShow=false;
+        // 初始化同步时间
+        this.searchTime = [];
+        this.$set(this.searchTime, 0, this.oldSearchTime[0]);
+        this.$set(this.searchTime, 1, this.oldSearchTime[1]);
+        this.$refs.calendarPanel.setCustomTime(this.searchTime);
+
+        this.seriesItemScreen = this.seriesItem;
+        this.screenModal = true;
+        if(this.$refs.topologyFull){
+          setTimeout(()=>{
+            this.$refs.topologyFull.resetAllNodes();
+          })
+        }
+      },
+      // 设置数据, filter区分
+      setData(chartItem, seriesItem, panelId, filter,area,errorMsg) {
+        if(errorMsg && errorMsg!==''){
+          this.isError = true;
+          this.errorContent = errorMsg;
+        }else {
+          this.isError = false;
+          this.errorContent = '';
+        }
+        if(area==='showFullScreen'){//全屏按时间查询
+          this.data = chartItem;
+          this.unit = chartDataFormat.getUnit(this.data.unit);
+          this.searchTime[0] = filter.start_time;//将列表的查询时间复制给全屏的查询时间
+          this.searchTime[1] = filter.end_time;
+          // this.seriesItemScreen = seriesItem;
+          this.storedScreanTableData=seriesItem;
+          this.storedScreanTableData=Object.assign([],this.storedScreanTableData.reverse());
+          this.screenPageObj.total=this.storedScreanTableData.length;
+          this.seriesItemScreen=this.filterShowData(this.storedScreanTableData,this.screenPageObj);
+          this.endLoading('screen');
+        } else{
+          //设置高度 chart-table
+          this.divFirstShow = true;
+          this.$nextTick(() => {
+            this.resize(chartItem);
+          });
+          this.firstShow = true; // 展示操作按键
+
+          this.panelIdInner = panelId;
+          this.data = chartItem;
+          this.unit = chartDataFormat.getUnit(this.data.unit);
+          this.storedTableData =seriesItem;
+          this.storedScreanTableData=seriesItem;
+          this.storedTableData=Object.assign([],this.storedTableData.reverse());
+          this.storedScreanTableData=Object.assign([],this.storedScreanTableData.reverse());
+          this.pageObj.total=this.storedTableData.length;
+          this.screenPageObj.total=this.storedScreanTableData.length;
+          this.seriesItem=this.filterShowData(this.storedTableData,this.pageObj);
+          this.seriesItemScreen =this.filterShowData(this.storedScreanTableData,this.screenPageObj)
+          if (filter) { // 保存数据,用于同步时间
+            this.searchTime[0] = filter.start_time;//将列表的查询时间复制给全屏的查询时间
+            this.searchTime[1] = filter.end_time;
+            this.oldSearchTime[0] = this.searchTime[0];
+            this.oldSearchTime[1] = this.searchTime[1];
+          }
+          this.endLoading();
+        }
+      },
+      dealLegendAlias:function(legend,expression){
+        if(/\{\{.+\}\}/.test(expression)){
+          let labelValue=expression.replace(/(\{\{.+?\}\})/g,function(i){
+            let label=i.substr(i.indexOf('{{')+2,i.indexOf('}}')-i.indexOf('{{')-2)
+            let reg=new RegExp(label+'=".+?"')
+            let value=null;
+            if(reg.test(legend)){
+              let find=legend.match(reg)[0];
+              value=find.substr(find.indexOf('"')+1,find.lastIndexOf('"')-find.indexOf('"')-1);
+            }
+            return value?value:label;
+          })
+          return labelValue
+        }else{
+          return expression;
+        }
+      },
+      // 获取格式
+      getNumStr(num) {
+        if (num) {
+          if (num >= 1000) {
+            const kbNum = num / 1000;
+            if (kbNum >= 1000) {
+              const mbNum = kbNum / 1000;
+              if (mbNum >= 1000) {
+                const gbNum = mbNum / 1000;
+                if (gbNum >= 1000) {
+                  const tbNum = gbNum / 1000;
+                  if (tbNum >= 1000) {
+                    const pbNum = tbNum / 1000;
+                    return `${pbNum.toFixed(2)}PB`;
+                  }
+                  return `${tbNum.toFixed(2)}TB`;
+                }
+                return `${gbNum.toFixed(2)}GB`;
+              }
+              return `${mbNum.toFixed(2)}MB`;
+            }
+            return `${kbNum.toFixed(2)}KB`;
+          }
+          return num.toFixed(2);
+        }
+        return num;
+      },
+      // 设置拓扑图数据
+      setTopologyData(nodesArr,edgesArr){
+        this.nodesArray=nodesArr;
+        this.edgesArray=edgesArr;
+      },
+      //退出全屏
+      exitFull(){
+        this.screenModal = false;
+        this.$refs.topology.resetAllNodes()
+      }
+    },
+
+    mounted(){
+      this.firstLoad = false;
+    }
+
+  }
+
+</script>
+<style lang="scss">
+  @import './chart.scss';
+</style>
+<style scoped>
+  .table-container{
+    height: calc(100% - 30px);
+  }
+  .nz-icon{
+    cursor: pointer;
+  }
+  .resize-box .vis-network .text-right{
+    text-align: right;
+  }
+  .resize-box .vis-network .chartTitle .chart-title{
+    justify-content: space-between;
+    align-items: stretch;
+  }
+  .vis-network-content{
+    height: 100%;
+  }
+</style>
diff --git a/nezha-fronted/src/components/page/project/project.vue b/nezha-fronted/src/components/page/project/project.vue
index 7a605ae9a..f69db5c7a 100644
--- a/nezha-fronted/src/components/page/project/project.vue
+++ b/nezha-fronted/src/components/page/project/project.vue
@@ -125,7 +125,8 @@
       </div>
     </template>
     <template v-else-if="pageType == 'project'">
-      <panel-tab from="project" :obj="currentProject" targetTab.sync="panel"></panel-tab>
+      <!--<panel-tab from="project" :obj="currentProject" targetTab.sync="panel"></panel-tab>-->
+      <facade />
     </template>
 
     <transition name="el-zoom-in-bottom">
@@ -147,13 +148,14 @@
   import loading from "../../common/loading";
   import panelTab from '../../common/bottomBox/tabs/panelTab'
   import bus from '../../../libs/bus'
-
+  import facade from '@/components/common/project/projectFacade'
   export default {
     name: "project2",
     components: {
       'export-excel':exportXLSX,
       'loading': loading,
-      'panel-tab': panelTab
+      'panel-tab': panelTab,
+      facade,
     },
     data() {
       return {