From f2436be3dfe61972233a6d3e20d9e93f2fb2201d Mon Sep 17 00:00:00 2001
From: zhangyu <m13716206235@163.com>
Date: Wed, 19 Aug 2020 10:16:46 +0800
Subject: [PATCH] =?UTF-8?q?=E7=BC=A9=E6=94=BE=E4=BF=AE=E6=AD=A3=E5=81=8F?=
 =?UTF-8?q?=E7=A7=BB=E9=87=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/charts/addNode.vue         |  91 +++++++++++++++---
 nezha-fronted/src/components/charts/b.png     | Bin 0 -> 825 bytes
 nezha-fronted/src/components/charts/c.png     | Bin 0 -> 1094 bytes
 nezha-fronted/src/components/charts/d.png     | Bin 0 -> 551 bytes
 nezha-fronted/src/components/charts/e.png     | Bin 0 -> 817 bytes
 nezha-fronted/src/components/charts/f.png     | Bin 0 -> 858 bytes
 .../src/components/charts/topology.vue        |  90 +++++++++++------
 .../src/components/charts/visNetwork.vue      |  21 ++--
 8 files changed, 153 insertions(+), 49 deletions(-)
 create mode 100644 nezha-fronted/src/components/charts/b.png
 create mode 100644 nezha-fronted/src/components/charts/c.png
 create mode 100644 nezha-fronted/src/components/charts/d.png
 create mode 100644 nezha-fronted/src/components/charts/e.png
 create mode 100644 nezha-fronted/src/components/charts/f.png

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 0000000000000000000000000000000000000000..df64d235f6d01ca20ba74faf3e5da077170b553c
GIT binary patch
literal 825
zcmV-91IGM`P)<h;3K|Lk000e1NJLTq000^Q0015c1^@s6GTRQ=00001b5ch_0Itp)
z=>Px#1ZP1_K>z@;j|==^1poj532;bRa{vGmbN~PnbOGLGA9w%&0?tW9K~zXf?Ur|Q
z+CUJ+^Zmb3T;qZ(Re-QCMHC5vMDNWn`)&{cTV@P)oPV-2Z$>)p?(cR_chV1hll@!J
zVzI<@Hiz5pBU^HiF4!y8R+8(y4a0O$^Sa7+E-^2w_#oQ?&E^Y~ofe)-b)@n&rQ}Mf
zf&;x+hi*31wLh+&i82B$S}w-Z*(%$%twF=_R5>SeGFwTQvpX;w1C*O%R9h1zt36fn
z?<?}mbce{-x@rQN#OhLUt2bI@{bOqo9TLx$nr+z|sf2cC_F)mq391~@)|Xd(T!X@T
z5%FwQT4AH$^tLJpN=$85$m-cfg2L&dfVN3%(64(952*rTMnyR@=&9lfw2P9ohcn((
zS;mU>9*jy8N$CP(;zkvZ0y(`+ybn6NjpOHaR5{(mvxq*GRfQi>%qZhd%i-)!!;$2m
zc7v`WYti}SCXVy_BrYD)xD4yKj%1WBBf1*nGfs@YuVX(9`i%aA);gBJ<4{!AM8ml(
z_(>=h=;!Mo(5bu-g-Q*LW(WP@7=zImtxg~J2}8kyV)h0x;6XF6TrO2|%_t&~DZp+t
zF&s^B8_T?j@#FRav1K{aMsF}u6|p*wpUErT=?!37b*buY8xI0qg;NMc(keL<_|NoQ
z8IIc$_!oe<=#JM$$!=_ovoao8=XZ&~b=tooNs@jpVItp{i-)92zzW<}SABP?jwh$b
z7gR)XoNGj7q+O}339sE%UtzXyvz@*U0#U5Ss(Tp8$C1_5rJb341)-=O=zlPXVjH<;
z6t9`=D8P^U6lfpq1hMz;?eu*_NI02&AH-iKE-ovhb5N39VjKAe#^vPTsqxy@AliJf
zP;V3$n#T(_DTBFjH{ndmF|HRU#tqGmIBr{h+2*Tk+qMPrZMl5GOe*a5hp=R?<Vx}z
zCDkSkQ&d!Y>)EtWskvx(2dWzjIS+SPAn0${H-UiPbAuHUOT5I}00000NkvXXu0mjf
D98Gyi

literal 0
HcmV?d00001

diff --git a/nezha-fronted/src/components/charts/c.png b/nezha-fronted/src/components/charts/c.png
new file mode 100644
index 0000000000000000000000000000000000000000..45912e1d3f0c355f480d33e52210a7342e61dbc0
GIT binary patch
literal 1094
zcmV-M1iAZ(P)<h;3K|Lk000e1NJLTq000~S000>X1^@s6BEU{300001b5ch_0Itp)
z=>Px#1ZP1_K>z@;j|==^1poj532;bRa{vGmbN~PnbOGLGA9w%&1KUYNK~zXfy;g^E
z;y?_&|No=Qg*0jaV@xjw(~E)76M_LnZ<jSo%7x6_+|FpcU`bE!No)HT{cs%)2iors
zwA=56VUPbVT^9i&9g=#x9StT6s<d3n)_Rm<tF}kvPM3Ude-ZGvfM76NzEGn#p^V)l
ztJ?k4a`is722)zBH-82G6cFyuo2_6|Yz#gCW!Of{s^iXR__PpU{yp|BHHUnEMVqZB
z6Kd-W5VFiyFJyPdLMkwO<sjH}@l55WD-w1Y2u$FQ!g`}Q7v@r>JEgocq)@6vMzJXh
zb6A<>^G5U=O91X!g8q0;`T9WgCSywmo+tYv`?sg@Y~{0npVJ$2OkaRC+!b}6HdNsK
zpRh@H@f;-!4Ur4JMQ0#D1>la8CGvGjS315lZ~~)RXCzDwin=d>^*s*}7mO>|A(t}z
z4kin<^>z}_<Bh5+ma)k!x6i=+q->bXQe#N9?wH!cDRo)ST<z3DWr$DY9eQA(>qwgO
zr$lQcAdmY^G)=#Q23>_x6o_UhlCJobsw4o!w4$E~hRp8M(q|4|6#JO1(S0H>NT{4)
zqabjkq^xbNJ)oOdM%;uG3;{u-ND1x*5?K`q43;(z)sUwcU;s*$S`=k<^c=WeGm$V4
zQO})fJ>(7gfuxC?BZ2^?2L|}Rc&_fttqedRvn1K*KrACvg1=doeMIa09tL8TkU}L&
zqS0KL4h%yg{2#UKGuaf-?YqJNbRU;~ryeq(N*ah-6gJCba^;GFl1e3hZ-~WkU`SNK
zDE{^_OIJae_c~(IRsrHzn0fotB=O^MfuVA+QpKU_5ce2Gp|`j~Mii~*f+}UFd)`AF
zOjLNs^i@I__F#wOf`kBuT#!6{lnn<wWE}gb0U<7GRoMr9Y@enS8yrmNjT<R8OeZSS
zfdwNT5cmNcK#H*{5?4rxdniV<gh3&x-$OhBR6;m|sQ_kY^y2-f!%rUO6C><{%+e^f
z{McYh7A<46gO47D4ODsx1_=6rK$v=J=paahgb_<VB+L>YEA|u9%ZyZ!c&HSrty2&2
za9;Bhz253m#N?`uNfCen2yvy7wUiNsKypZ><VBD1XjBCu_U<u51-nI)*+P)QYfk{G
z1>nu=mfHOhC396iQ<h&P5<PI`ah4bWkj(%PgDT0P5Q+__3RJFlXtjRf7r1;asdWaZ
zFAUOb!LOqtABA}K18ekJXA@xAqO4A{=Zao^_16CqP%XvU=?ny8Oq<UdK-|Mvx<u1C
zzH4^JsIS+zfcn~c9=VelC9+k)I$L)5t6(j@doEo+0{j>2KLZlI0pxT5F}9%$(EtDd
M07*qoM6N<$f*KXz{{R30

literal 0
HcmV?d00001

diff --git a/nezha-fronted/src/components/charts/d.png b/nezha-fronted/src/components/charts/d.png
new file mode 100644
index 0000000000000000000000000000000000000000..6f03544971e36c1fd0b9a530032ac5fb7071a3ea
GIT binary patch
literal 551
zcmV+?0@(eDP)<h;3K|Lk000e1NJLTq000^Q001Hg1^@s6L1W1d00001b5ch_0Itp)
z=>Px#1ZP1_K>z@;j|==^1poj532;bRa{vGmbN~PnbOGLGA9w%&0lY~>K~zXf?UsE{
zf>0R6`~Kf3?PW827cm4i0TJJjq-aFu3wYvQE+v6WnX9ch+u0a!&hNR;U-tk%q#Tr4
zzYp>}AG7%amhC|6k0HrA_=bu~y$w#3>2p)*K_8m19T)S(629-VbW#Zr3G|H#cu7I&
zR>bjT4M*oZ3gs#aXB-Zh$#XGyN4}i||CBiiLaPJQva$3$*7m6w$Z@B^#4-&>g}b;=
z=5TybgK)3WZLI49v|6ojBedz{X(hY3cwR;QzRQ|J#Xw}5v|tvOZba4`Dh9d|ls%n@
z2jA+k=1?(^AP;dXX*j*EX9AK;snS5D(S_JCSaYZZ=#H6d>bSg<Y4GGqz)`T)bvSt@
z@5oSRT$6628k{1^Zw-oEYY)El*9`H_psdb8nVo|&I|pU<KLd%Xks8Y4mTt1<P-`GS
z9awugm7t8!H*MA&>H|bHoh>M=9{iYAu#H7^1l@STVi~^)#Xv;M;668bcF`GHXli2`
zBw#^FmXgWIH?s0p*F@KNg#9vwmvX;LfFk++icaOc&R{+{=#6a(SNaobZS)wd=NS+7
p3*5Ik9ndHH-=K}4ee17*fOqN4+9+sXZ|VR5002ovPDHLkV1nPK@^AnE

literal 0
HcmV?d00001

diff --git a/nezha-fronted/src/components/charts/e.png b/nezha-fronted/src/components/charts/e.png
new file mode 100644
index 0000000000000000000000000000000000000000..3019f7707c328b47283861508b457bbcfd77716d
GIT binary patch
literal 817
zcmV-11J3-3P)<h;3K|Lk000e1NJLTq0012T000~a1^@s6ozJwY00001b5ch_0Itp)
z=>Px#1ZP1_K>z@;j|==^1poj532;bRa{vGmbN~PnbOGLGA9w%&0>(*1K~zXf?N(`X
z+CU8L|NlqL)wBgthHzto0b@>M?lTb1S3PmeFoq<AcG?fojAqu-lio`9YW)Q#WW8Qv
zv0Py~Tfl7(V3u4MmV=a4hf&z5uEj=QT`<HlhOw`Shm-*fww(?##Rd%9MW)n3w$_7H
zAHr^oP;8D>xu%UiViYSew$sMsWqy*}L)sZUZz_=lmODVDGexa8Q+4|Dqq_4GTX2UO
z%N*^&c$@W5JfumhhIp=~!LJdWQpT_Y%#qC3wpkCwLmG&gh?*6o3NGyC2$k;pE3I~4
zwC#*#jzBEC&3Y&v(%V1`cfS${8MX!{@($9)7IIEsDj1{Go@g7XT+>D$F~l+^l(sd;
zO(43>dMF-J0>AzYtKP^4z6F!;MKTB`Ej*@+h-Au|n94P6^btcWWA^d>50GA}pQQgM
z>9qv%i)Mm-GQr$F#Bk+{>@l?Mp7*$ONv}jBMjoBs5dGm8PNSpbxnfP9hhsT9ZcA<H
zd>L)Q`6KDeNUvqrt?obvc-F2Vl`SHa$YQ=&s=e$q)n^u}uq!TJW^)ANnafDoDyv-A
zWaG(Ht0~nQSgqCwr*gOtCa@IJkyK3khSa>A)E_pq!r6QwH_u!ut}2mPs3<Yljdl;k
zYC|!xrvkpqW_IuP{Py}Ia9druqGnn}fB3A`b^9Y}G4IW#+V5ow<x37`vgR}We9s@O
zGz_0q`k2fj7|Y=9A-+i@{!qfi=y`(PU?ej(jvt|<V%Xk5^hr1TA=0<h_h{%lH*%$u
zF@K!&J^D%NA?0V!!Eh|eIm%-bO<UWnhvFff$`MJL#e>;;j`FMLkx7`g9=BuSA*C#2
z)HOTu3nEh}AoG;Rg>7dCIFt7TqO{RR46*#08Ot1}<S6M*R;!gx8V-i4+twk#jj$6*
vsU)2%BPTZccnJ{8n78Cr(!VADfE4%*)r+83Z0@7x00000NkvXXu0mjfzIuGv

literal 0
HcmV?d00001

diff --git a/nezha-fronted/src/components/charts/f.png b/nezha-fronted/src/components/charts/f.png
new file mode 100644
index 0000000000000000000000000000000000000000..b1c49b15a68dc1e406a7c62c862ef316ed96ce6a
GIT binary patch
literal 858
zcmV-g1Eu_lP)<h;3K|Lk000e1NJLTq000^Q000~a1^@s6e-p3M00001b5ch_0Itp)
z=>Px#1ZP1_K>z@;j|==^1poj532;bRa{vGmbN~PnbOGLGA9w%&0`EygK~zXf<yL8P
z+CU8L|NlqLNfICda~K=jfDdj134|*U2*<0WfQJx6lcw#5Rx@vy-IesD-O)4O@R#fz
z(R#hcYPH5<xx#F|z~p(3@pOjKWQO6>a{ylRKA%66-^*etaU36J0nv&a*ttKRqT=^p
zmD@197IfE#=J?3j&3E8^K4(9Z{L2*gIGkY4q<e$`QFrhp0bvP03(nK-ji|d#a<YI(
zF+8ZHMrhz?!FiOt_vRV{qVu?lNHUMxoQ;%O`6be9p@xL+BBB^LiDu-@wiXbb#k2T+
zlNPYkDdF-?!!-p(GX=!5MZ{HG3Sq?665_PSXIJENahsF4Z4SmyiT1$>4kE;Vi-Saw
zga*^8!gA|~r46{X7VJusI?LfSmW4;_lW3aGOz|=88nUK~+pHy5U-j={*j4IIJx=6Q
zecYtzohZ<&x6tYK;dgpcfJzC=jW+I7OZF~=JR^zId0UDZjwcewogO917!DMz1g%h}
zifd@JA5d*}Hr>&@P*ShnhD!y-Go~ajkYCR7aHHfg7(IzE7jTg1TG2OwbpZ#emW!*T
zE(OFWF(=@p(Uc)qy6vV|Zb)&wXF4^x0nW8Mv;on5Z-6LO!<}tg|13C;-}0J@thXM*
z=ZJN!SnZIM_(&Tx3slt^Junk<Z~#g6nvlWg?8k4W=r&BR39Hf;4cxVWDDS)-KG8AR
zYam;!A!AkLS0%{0Kx-P%91S-6>3e#pQCw(8k%W#r&H1tnaeN~0Qis~{f#qvpDPko^
z>K;-?g{tRH>XIY?t$Cm2DoMJ=N)e&A;rQ*F9VOaDF#R9Eek|j|L|?^!LUg_n!rujc
zw@{*j*AUe`^spZVt2-;XRxF3l(Q>syw?86Pa74>kt2p2+P=(izVStS~@HzXjKP$hY
zm(YHA#FG9+?OH&zHLimH4NYfr^oL_KT3u0YR`WcGs9vhjZ$;MpSz%4<4Mv!f<h(2v
kZ@SpEcSL{6{xu@t2Q|b_OzQL#KmY&$07*qoM6N<$g6A5OmjD0&

literal 0
HcmV?d00001

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}},