feat:调用拓扑图保存接口 以及回显拓扑图

nezha-fronted/src/components/common/project/addLine.vue

@@ -18,31 +18,31 @@
       <el-scrollbar class="right-box-form-box">
         <el-form ref="form" :model="form" label-width="120px" :rules="rules">
           <el-form-item label="Line Name" prop="lineName" class="line-name">
-            <el-input v-model="form.lineName"></el-input>
+            <el-input v-model="form.lineName" type="small"></el-input>
           </el-form-item>
           <el-row class="form-title">Option</el-row>
           <el-form-item label="width" prop="width" class="line-name">
-            <el-input v-model="form.width"></el-input>
+            <el-input v-model="form.width" type="small"></el-input>
-          </el-form-item>
-          <el-form-item label="roundness"  class="line-name">
-            <el-input v-model="form.roundness"></el-input>
-          </el-form-item>
-          <el-form-item label="type" class="line-name">
-            <el-select v-model="form.type" placeholder="" :popper-append-to-body="false">
-              <!--'dynamic', 'continuous', 'discrete', 'diagonalCross', 'straightCross', 'horizontal', 'vertical', 'curvedCW', 'curvedCCW', 'cubicBezier'-->
-              <el-option label="dynamic" value="dynamic"></el-option>
-              <el-option label="continuous" value="continuous"></el-option>
-              <el-option label="discrete" value="discrete"></el-option>
-              <el-option label="diagonalCross" value="diagonalCross"></el-option>
-              <el-option label="straightCross" value="straightCross"></el-option>
-              <el-option label="horizontal" value="horizontal"></el-option>
-              <el-option label="vertical" value="vertical"></el-option>
-              <el-option label="curvedCW" value="curvedCW"></el-option>
-              <el-option label="cubicBezier" value="cubicBezier"></el-option>
-            </el-select>
           </el-form-item>
+          <!--<el-form-item label="roundness"  class="line-name">-->
+            <!--<el-input v-model="form.roundness"></el-input>-->
+          <!--</el-form-item>-->
+          <!--<el-form-item label="type" class="line-name">-->
+            <!--<el-select v-model="form.type" placeholder="" :popper-append-to-body="false">-->
+              <!--&lt;!&ndash;'dynamic', 'continuous', 'discrete', 'diagonalCross', 'straightCross', 'horizontal', 'vertical', 'curvedCW', 'curvedCCW', 'cubicBezier'&ndash;&gt;-->
+              <!--<el-option label="dynamic" value="dynamic"></el-option>-->
+              <!--<el-option label="continuous" value="continuous"></el-option>-->
+              <!--<el-option label="discrete" value="discrete"></el-option>-->
+              <!--<el-option label="diagonalCross" value="diagonalCross"></el-option>-->
+              <!--<el-option label="straightCross" value="straightCross"></el-option>-->
+              <!--<el-option label="horizontal" value="horizontal"></el-option>-->
+              <!--<el-option label="vertical" value="vertical"></el-option>-->
+              <!--<el-option label="curvedCW" value="curvedCW"></el-option>-->
+              <!--<el-option label="cubicBezier" value="cubicBezier"></el-option>-->
+            <!--</el-select>-->
+          <!--</el-form-item>-->
           <el-form-item label="箭头方向" prop="arrows" class="arrows">
-            <el-select v-model="form.arrows" placeholder="" :popper-append-to-body="false">
+            <el-select v-model="form.arrows" placeholder="" :popper-append-to-body="false" type="small">
               <div slot="prefix">
                 <img v-if="form.arrows=='from'" src="./image/leftArrow.png" />
                 <img v-if="form.arrows=='to'" src="./image/rightArrow.png" />

nezha-fronted/src/components/common/project/topology.vue

@@ -259,7 +259,7 @@
         let nodes=this.formatNodes([...this.nodesArray]);
         let edges=this.formatEdges([...this.edgesArray]);
         console.log(nodes,edges,this.nodesArray,this.edgesArray);
-        this.$put('/project/topo',{topo:JSON.stringify({nodes,edges}),projectId:this.allModuleInfo.basic.id});
+        this.$put('/project/topo',{topo:JSON.stringify({nodes:nodes,lines:edges}),projectId:this.allModuleInfo.basic.id});
         this.$emit('editVisNetworkChange',false);
       },
       formatNodes(arr){
@@ -380,6 +380,9 @@
         this_.resetAllNodes();
         this_.network.stabilize();
       },
+      setData(){
+        this.setNetworkData(this.nodesArray,this.edgesArray);
+      },
       setNetworkData(nodes,edges){//动态设置拓扑图数据
         let this_ = this;
         this.nodes = new Vis.DataSet(nodes);
@@ -410,10 +413,10 @@
         nodesArray.push(model);
         this.$emit("setTopologyData",nodesArray,this.edgesArray);
         this.setNetworkData(nodesArray,this.edgesArray);
-       this.$nextTick(()=>{
+        this.$nextTick(()=>{
-         this.arrayDiff();
+          this.arrayDiff();
-         this.$emit('editVisNetworkChange',true);
+          this.$emit('editVisNetworkChange',true);
-       })
+        })
       },
       addModelShow(){ // 显示添加节点弹窗
         this.addNodeShow=true;

nezha-fronted/src/components/common/project/visNetwork.vue

@@ -45,52 +45,52 @@
                 <span><span class="label">Description :</span>{{projectInfo.remark?projectInfo.remark:'--'}}</span>
               </div>
               <div>
-            <span>
+            <!--<span>-->
-              <span class="label">Alert state :</span>
+              <!--<span class="label">Alert state :</span>-->
-              <div class="active-icon" style="background: #B7464A 100%;"></div>{{projectInfo.alertStat[0]}}
+              <!--<div class="active-icon" style="background: #B7464A 100%;"></div>{{projectInfo.alertStat[0]}}-->
-              <div class="active-icon" style="background: #E64E4E 100%;"></div>{{projectInfo.alertStat[1]}}
+              <!--<div class="active-icon" style="background: #E64E4E 100%;"></div>{{projectInfo.alertStat[1]}}-->
-              <div class="active-icon" style="background: #F7B500 100%;"></div>{{projectInfo.alertStat[2]}}
+              <!--<div class="active-icon" style="background: #F7B500 100%;"></div>{{projectInfo.alertStat[2]}}-->
-            </span>
+            <!--</span>-->
               </div>
               <div>
                 <span><span class="label">Module Mum :</span>{{projectInfo.moduleMum}}</span>
               </div>
             </div>
-            <div class="facade-top-right" v-loading="alertData.loading">
+            <div class="facade-top-right" v-loading="projectInfo.loading">
               <div class="facade-top-title">
-                <span class="label">{{alertData.title}}</span>
+                <span class="label">Alert :</span>
-                {{alertData.sssObj.total}}
+                {{total}}
               </div>
               <div class="facade-top-right-content">
                 <div>
                   <el-progress
                     type="circle"
-                    :percentage="(alertData.sssObj.pending/alertData.sssObj.total)*100"
+                    :percentage="(projectInfo.alertStat[0]/total)*100"
                     :show-text="false"
                     :width="40"
                     color="#F5A390"
                   ></el-progress>
-                  <div class="align--center">{{alertData.sssObj.pending}}</div>
+                  <div class="align--center">{{projectInfo.alertStat[0]}}</div>
                 </div>
                 <div>
                   <el-progress
                     type="circle"
-                    :percentage="(alertData.sssObj.stop/alertData.sssObj.total)*100"
+                    :percentage="(projectInfo.alertStat[1]/total)*100"
                     :show-text="false"
                     :width="40"
                     color="#F6B977"
                   ></el-progress>
-                  <div class="align--center">{{alertData.sssObj.stop}}</div>
+                  <div class="align--center">{{projectInfo.alertStat[1]}}</div>
                 </div>
                 <div>
                   <el-progress
                     type="circle"
-                    :percentage="(alertData.sssObj.other/alertData.sssObj.total)*100"
+                    :percentage="(projectInfo.alertStat[2]/total)*100"
                     :show-text="false"
                     :width="40"
                     color="#EBD066"
                   ></el-progress>
-                  <div class="align--center">{{alertData.sssObj.other}}</div>
+                  <div class="align--center">{{projectInfo.alertStat[2]}}</div>
                 </div>
               </div>
             </div>
@@ -116,6 +116,12 @@
 </template>
 
 <script>
+  import  a from './image/a.png'
+  import  b from './image/b.png'
+  import  c from './image/c.png'
+  import  d from './image/d.png'
+  import  e from './image/e.png'
+  import  f from './image/f.png'
   import loading from "@/components/common/loading";
   import timePicker from '@/components/common/timePicker';
   import topology from './topology'
@@ -136,7 +142,6 @@
       },
       allModuleInfo:{},
       projectInfo:{},
-      alertData:{}
     },
     watch:{
       // allModuleInfo:{
@@ -150,6 +155,7 @@
         immediate: true,
         handler(n){
           this.getNetworkData(n);
+          this.total=this.projectInfo.alertStat[0]+this.projectInfo.alertStat[1]+this.projectInfo.alertStat[2]
         },
       },
       // alertData:{
@@ -171,6 +177,7 @@
         dropdownMenuShow:false,
         editVisNetwork:false,
         topologyLoading:false,
+        total:1,
       }
 
     },
@@ -186,14 +193,49 @@
         console.log(n);
         this.$get('/project/topo',{projectId:n.id}).then(res=>{
           console.log(res);
-          setTimeout(()=>{
+          if(res.data.topo){
-            this.topologyLoading=false;
+            this.nodesArray=this.formatNodesArr(res.data.topo.nodes);
+            this.edgesArray=this.formatEdgesArr(res.data.topo.lines);
+            console.log(this.nodesArray,this.edgesArray)
+          }else{
             this.nodesArray=[];
             this.edgesArray=[];
-            this.$refs['topology'].setNetworkData( this.edgesArray,this.nodesArray);
+          }
+          setTimeout(()=>{
+            this.topologyLoading=false;
+            this.$refs['topology'].setData();
           },500)
         })
       },
+      formatNodesArr(arr){
+        let arr1=[];
+        if(!arr){return arr1}
+        arr.forEach((item)=>{
+          item.shape='image';
+          item.id=item.moduleId;
+          switch(item.iconId){
+            case 1: item.image=a;break;
+            case 2: item.image=b;break;
+            case 3: item.image=c;break;
+            case 4: item.image=d;break;
+            case 5: item.image=e;break;
+            case 6: item.image=f;break;
+            default: item.image=a;
+          }
+        });
+        return arr
+      },
+      formatEdgesArr(arr){
+        let arr1=[];
+        if(!arr){return arr1}
+        arr.forEach((item)=>{
+          item.dashes=[15,15];
+          item.from=item.source;
+          item.to=item.target;
+
+        });
+        return arr
+      },
       editVisNetworkChange(flag){
         this.editVisNetwork=flag;
         if(flag){