moudel上的图标变为dom元素

nezha-fronted/src/assets/css/font/iconfont.svg

@@ -20,6 +20,12 @@ Created by iconfont
   />
     <missing-glyph />
     
+    <glyph glyph-name="shuidi" unicode="&#58882;" d="M228.52096 377.5488c0.6912-2.6112 1.98144-5.02272 3.76832-7.05024l239.36-399.1552-0.03072 0 39.8848-66.50368 39.88992001 66.48832-0.05632001 0 240.90111999 401.7152c0.58368001 0.98304 1.07008 2.02752001 1.44896001 3.10272 27.52512 48.6912 42.08640001 103.70048 42.0864 159.31904 0 178.80576-145.4592 324.26496-324.28544 324.26496-178.7904 0-324.26496-145.4592-324.26496-324.26496-0.00512-55.0912 14.26432001-109.56288 41.29792-157.91616z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="model" unicode="&#60409;" d="M490.310011 2.120463a29.919985 29.919985 0 0 1 21.419989-8.559996c16.599991 0 29.999984 13.919993 30.519984 30.519984v20.34999l1.07 303.629843c0 12.849993 7.499996 24.629987 18.73999 31.059984l290.24985 157.429918c14.999992 6.999996 21.999989 24.639987 14.999992 39.62998s-24.629987 21.999989-39.619979 14.999992c-1.609999-0.54-2.679999-1.609999-3.749998-2.149999l-290.76985-157.999918a95.99995 95.99995 0 0 1-20.879989-15.519992 88.379954 88.379954 0 0 1-20.889989 15.519992L209.710156 589.560159c-14.999992 6.999996-33.199983 0.54-40.159979-14.459993a30.329984 30.329984 0 0 1 10.709995-37.99998l281.669854-158.519918c11.239994-6.419997 18.73999-18.209991 18.73999-31.059984l1.07-323.999832a29.919985 29.919985 0 0 1 8.559995-21.419989zM511.73-127.99947a93.639952 93.639952 0 0 0-47.659975 12.849993L103.150212 93.160416a95.99995 95.99995 0 0 0-47.659976 82.999957V592.240157a95.99995 95.99995 0 0 0 47.659976 82.999957L464.070025 883.550006c28.919985 16.599991 66.399966 16.599991 95.85995 0l360.919813-208.309892a95.99995 95.99995 0 0 0 47.659976-82.999957v-416.619784a95.99995 95.99995 0 0 0-47.659976-82.999957l-360.919813-208.299892c-14.999992-7.499996-31.599984-12.319994-48.189975-12.319994z m0 0"  horiz-adv-x="1024" />
+
+    
     <glyph glyph-name="hexagonBorder" unicode="&#58883;" d="M102.51377778 148.13866667000002L102.51377778 620.88533333 512.11377778 857.31555555l409.6-236.43022222 1e-8-472.74666666-409.60000001-236.43022222-409.6 236.43022222z m41.64266667 448.96711111l0-425.18755556 367.95733333-212.65066667 368.07111111 212.65066667L880.18488889 597.1057777799999 512.11377778 809.75644445l-367.95733333-212.65066667z m0 0"  horiz-adv-x="1024" />
 
     

nezha-fronted/src/components/charts/topology.vue

@@ -17,36 +17,40 @@
       <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="{'top':networkPopTop,'left':networkPopLeft}"
-        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>
+        <!--图拓扑图-->
+        <div id="network_id" ref="visNetwork" :class="{'cursorMove': cursorMove}"></div>
+        <!--拓扑图工具-->
+        <div
+          id="networkPop"
+          class="networkPop"
+          :style="{'top':networkPopTop,'left':networkPopLeft}"
+          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">
+          <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="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)+'px',left:(item.x-26)+'px'}">
+          <i class="nz-icon nz-icon-model"></i>
         </i>
-        <!--<i class="nz-icon nz-icon-delete" @click="nodeDel"></i>-->
-      </div>
-      <!--拓扑图选中-->
-      <div class="selNode" id="nodeArr1" v-show="NodeArr[0]&&NodeArrShow">
-        <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="selNodeTop"></div>
-        <div class="selNodeRight"></div>
-        <div class="selNodeBottom"></div>
-        <div class="selNodeLeft"></div>
-      </div>
-      <!--图谱图右侧-->
-      <!--<div class="networkContent">33333</div>-->
     </div>
     <transition name="right-box">
       <add-model  v-if="addNodeShow" @addModel="addModel" :nodeData="nodeData" @close="addNodeShow=false" @del="nodeDel" :isAdd="isNodeAdd"></add-model>
@@ -103,6 +107,7 @@
     },
     data(){
 		  return {
+        fangdaX:1,
         selectNodeTitle:false,
         // 拓扑图工具
         networkPopTop:0,
@@ -138,6 +143,7 @@
           {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
@@ -231,6 +237,7 @@
           console.log(this_.viewsCenter)
         }
         this_.containerCanvas=document.querySelectorAll("#network_id canvas")[0];
+        this_.modelTopUpdate();
       },
       resetAllNodes() {
         this.setNetworkData(this.nodesArray,this.edgesArray);
@@ -250,13 +257,16 @@
         });
         this_.network.moveTo({
           position: this_.viewsCenter,
-          scale: this_.isFullScreen?1.5:1,
+          scale: this_.isFullScreen?1.5:this.fangdaX,
           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;
@@ -266,7 +276,6 @@
         }
         let nodesArray=[...this.nodesArray];
         if(!this.isNodeAdd){
-          console.log(nodesArray.find(item=>item.id ===model.id));
           model={...nodesArray.find(item=>item.id===model.id),...model};
           nodesArray=nodesArray.filter(item=>item.id!==model.id);
         }else{
@@ -299,6 +308,7 @@
        }else{
          edges.from=this.NodeArr[0];
          edges.to=this.NodeArr[1];
+         edges.dashes=[15,15];
        }
        edgesArray.push(edges);
        console.log(edgesArray,edges);
@@ -330,8 +340,8 @@
       },
       setPopPosition(selId,params){//设置节点工具栏位置
         let position=this.network.canvasToDOM(this.network.getPositions(params.nodes)[selId]);
-        this.networkPop.style.top = position.y - 70 +'px';
-        this.networkPop.style.left = position.x - 30 +'px';
+        this.networkPop.style.top = position.y - 85 +'px';
+        this.networkPop.style.left = position.x - 32 +'px';
         if(!this.isFullScreen&&this.NodeArr.length==0){
           this.networkPopShow=true;
         }
@@ -367,7 +377,23 @@
         }
 
       },
-
+      fangda(){
+        this.fangdaX+=0.3
+        document.getElementById('vis-content').style.transform='scale('+this.fangdaX+')';
+        this.setNetworkData(this.nodesArray,this.edgesArray);
+      },
+      modelTopUpdate(){
+        this.modelTop=[];
+        this.nodesArray.forEach((item)=>{
+          let position=this.network.canvasToDOM({x:item.x,y:item.y})
+          this.modelTop.push({
+            show:true,
+            x:position.x,
+            y:position.y,
+            id:item.id,
+          })
+        })
+      }
     },
     mounted(){
        setTimeout(()=>{
@@ -406,6 +432,15 @@
          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) {//节点移动中
@@ -422,6 +457,7 @@
            if(this_.NodeArr.length>0){
              this_.NodeArrShow=true;
            }
+           this_.modelTopUpdate();
          });
 
          this.network.on("hoverNode", function (params) {//hoverNode
@@ -448,6 +484,7 @@
     display: flex;
     height: calc(100% - 30px);
     position: relative;
+    overflow: hidden;
   }
   .networkPop{
     position: absolute;
@@ -587,4 +624,16 @@
     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>