diff --git a/nezha-fronted/src/components/charts/addNode.vue b/nezha-fronted/src/components/charts/addNode.vue
index d1f1e81fd..aaab2e100 100644
--- a/nezha-fronted/src/components/charts/addNode.vue
+++ b/nezha-fronted/src/components/charts/addNode.vue
@@ -15,18 +15,36 @@
 
     <!-- begin--表单-->
     <el-scrollbar class="right-box-form-box">
-      <el-form ref="form" :model="form" label-width="120px">
-        <el-form-item label="Id">
-          <el-input v-model="form.modelId"></el-input>
+      <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">
-          <el-input v-model="form.label"></el-input>
+        <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>
+        <!--<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>-->
@@ -88,6 +106,12 @@
 
 <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:{
@@ -112,17 +136,60 @@
 		  return{
         form:{
           modelId:'',
-          label:'',
-          image:'',
+          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(){
-        let model=Object.assign({id:this.form.modelId,shape:'image',shapeProperties:{useImageSize:false}},{...this.form});
-        this.$emit('addModel',model)
+        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 () {
 
diff --git a/nezha-fronted/src/components/charts/b.png b/nezha-fronted/src/components/charts/b.png
new file mode 100644
index 000000000..df64d235f
Binary files /dev/null and b/nezha-fronted/src/components/charts/b.png differ
diff --git a/nezha-fronted/src/components/charts/c.png b/nezha-fronted/src/components/charts/c.png
new file mode 100644
index 000000000..45912e1d3
Binary files /dev/null and b/nezha-fronted/src/components/charts/c.png differ
diff --git a/nezha-fronted/src/components/charts/d.png b/nezha-fronted/src/components/charts/d.png
new file mode 100644
index 000000000..6f0354497
Binary files /dev/null and b/nezha-fronted/src/components/charts/d.png differ
diff --git a/nezha-fronted/src/components/charts/e.png b/nezha-fronted/src/components/charts/e.png
new file mode 100644
index 000000000..3019f7707
Binary files /dev/null and b/nezha-fronted/src/components/charts/e.png differ
diff --git a/nezha-fronted/src/components/charts/f.png b/nezha-fronted/src/components/charts/f.png
new file mode 100644
index 000000000..b1c49b15a
Binary files /dev/null and b/nezha-fronted/src/components/charts/f.png differ
diff --git a/nezha-fronted/src/components/charts/topology.vue b/nezha-fronted/src/components/charts/topology.vue
index b940e0714..f246b11b5 100644
--- a/nezha-fronted/src/components/charts/topology.vue
+++ b/nezha-fronted/src/components/charts/topology.vue
@@ -1,9 +1,6 @@
 <template>
   <div class="content">
     <div class="editTopology">
-      <!--<button @click="addModelShow" v-show="!selectNodeTitle">add model</button>-->
-      <!--<button @click="addLineTitleShow" v-show="!selectNodeTitle">add line</button>-->
-      <!--<button @click="lineDel" v-show="!selectNodeTitle">remove line</button>-->
       <span v-show="!selectNodeTitle" class="editTopologyModule">
         Module element :
         <span class="editTopologyAdd" @click="addModelShow">Add</span>
@@ -23,7 +20,7 @@
         <div
           id="networkPop"
           class="networkPop"
-          :style="{'top':networkPopTop,'left':networkPopLeft}"
+          :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)">
@@ -33,13 +30,13 @@
           <!--<i class="nz-icon nz-icon-delete" @click="nodeDel"></i>-->
         </div>
         <!--拓扑图选中-->
-        <div class="selNode" id="nodeArr1" v-show="NodeArr[0]&&NodeArrShow">
+        <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">
+        <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>
@@ -48,7 +45,14 @@
         <!--图谱图右侧-->
         <!--<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)+'px',left:(item.x-26)+'px'}">
+        <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>
@@ -97,17 +101,13 @@
           this.selectNodeTitle=false;
           this.isLineAdd=true;
         }
-        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';
-        })
+       this.selNodeArrUpdate()
       }
     },
     data(){
 		  return {
-        fangdaX:1,
+        zoom:1,
+        domScale:1,
         selectNodeTitle:false,
         // 拓扑图工具
         networkPopTop:0,
@@ -219,7 +219,7 @@
             selectable: true, //是否可以点击选择
             selectConnectedEdges: false, //选择节点后是否显示连接线
             hoverConnectedEdges: true, //鼠标滑动节点后是否显示连接线
-            zoomView: false, //是否能缩放画布
+            zoomView: true, //是否能缩放画布
             navigationButtons:true,
           },
 
@@ -238,6 +238,8 @@
         }
         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);
@@ -257,7 +259,7 @@
         });
         this_.network.moveTo({
           position: this_.viewsCenter,
-          scale: this_.isFullScreen?1.5:this.fangdaX,
+          scale: this_.isFullScreen?1.5:1,
           offset: {x:0, y:0},
         });
         console.log( this.nodes,this.edges);
@@ -271,9 +273,6 @@
       addModel(model){ // 添加model
         this.addNodeShow=false;
         if(!model){return}
-        if(!model.image){
-          model.image=png
-        }
         let nodesArray=[...this.nodesArray];
         if(!this.isNodeAdd){
           model={...nodesArray.find(item=>item.id===model.id),...model};
@@ -339,9 +338,11 @@
         this.$emit("setTopologyData",this.nodesArray,this.edgesArray);
       },
       setPopPosition(selId,params){//设置节点工具栏位置
-        let position=this.network.canvasToDOM(this.network.getPositions(params.nodes)[selId]);
-        this.networkPop.style.top = position.y - 85 +'px';
-        this.networkPop.style.left = position.x - 32 +'px';
+        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;
         }
@@ -349,6 +350,7 @@
       },
       networkPopClose(){//关闭节点工具栏
         this.networkPopShow=false;
+        this.selNodeId=''
         this.network.unselectAll();
       },
       //工具栏
@@ -377,15 +379,11 @@
         }
 
       },
-      fangda(){
-        this.fangdaX+=0.3
-        document.getElementById('vis-content').style.transform='scale('+this.fangdaX+')';
-        this.setNetworkData(this.nodesArray,this.edgesArray);
-      },
-      modelTopUpdate(){
+      modelTopUpdate(){//model上的图标 实时更新
         this.modelTop=[];
         this.nodesArray.forEach((item)=>{
-          let position=this.network.canvasToDOM({x:item.x,y:item.y})
+          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,
@@ -393,6 +391,25 @@
             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(){
@@ -458,6 +475,7 @@
              this_.NodeArrShow=true;
            }
            this_.modelTopUpdate();
+           this_.selNodeArrUpdate();
          });
 
          this.network.on("hoverNode", function (params) {//hoverNode
@@ -467,6 +485,18 @@
          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
+         });
        })
     }
 	}
@@ -630,7 +660,7 @@
     color: rgba(132,213,194,0.5);
   }
   .nz-icon-model{
-    color: #23bf9a;
+    color: #23BF9A;
     position: absolute;
     top: 14px;
     left: 15px;
diff --git a/nezha-fronted/src/components/charts/visNetwork.vue b/nezha-fronted/src/components/charts/visNetwork.vue
index 70694fe3c..feb451a8b 100644
--- a/nezha-fronted/src/components/charts/visNetwork.vue
+++ b/nezha-fronted/src/components/charts/visNetwork.vue
@@ -67,7 +67,12 @@
 </template>
 
 <script>
-  import  png from './a.png'
+  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 './chartDataFormat'
@@ -160,13 +165,15 @@
             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, label: "model", x:-236,y:-163, image: png, shape:'image',shapeProperties:{useImageSize:false}},
-          {id: 3, label: "model", x:-346,y:-155, image: png, shape:'image',shapeProperties:{useImageSize:false}},
-          {id: 4, label: "model", x:-129,y:169, image: png, shape:'image',shapeProperties:{useImageSize:false}},
-          {id: 5, label: "model", x:-388,y:35, image: png, shape:'image',shapeProperties:{useImageSize:false}},
-          {id: 6, label: "model", x:-345,y:-53, image: png, shape:'image',shapeProperties:{useImageSize:false}},
-          {id: 7, label: "model", x:316,y:22, image: png, shape:'image',shapeProperties:{useImageSize:false}},
+          {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}},