feat：编辑时 点击连线编辑

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

@@ -166,11 +166,24 @@
     watch:{
       lineData:{
         handler(n){
+          console.log(n);
           this.form={
             arrows:n.arrows,
             color:n.color,
             lineId:n.id,
-          }
+            width:n.width,
+            lineName:n.label,
+          };
+         if( n.expressions){
+           n.expressions.forEach((item,index)=>{
+             this.addExpression();
+             this.name[index]=item.name;
+             this.unit[index]=item.unit;
+             this.expressions[index]=item.metric;
+             this.legends[index]=item.legend;
+           })
+         }
+
         },
         immediate: true,
         deep: true,
@@ -217,18 +230,25 @@
     },
     mounted(){
       // this.addExpression();
+      console.log(this.lineData,this.$refs['promql-'+(0)]);
+      if( this.lineData.expressions){
+        this.lineData.expressions.forEach((item,index)=>{
+          console.log(this.$refs['promql-'+(index)],'promql-'+( index));
+        })
+      }
     },
     methods:{
       onSubmit(){
         this.$refs['form'].validate((valid) => {
           if (valid) {
-            let model=Object.assign({id:undefined},{...this.form},{color: {color:this.form.color,highlight:this.form.color,hover:this.form.color,opacity:1.0}});
+            let model=Object.assign({id:this.form.lineId?this.form.lineId:undefined},{...this.form},{color: {color:this.form.color,highlight:this.form.color,hover:this.form.color,opacity:1.0}});
             model.label=this.form.lineName;
             model.width = parseInt(model.width) || 4;
             model.smooth={
               roundness:(Math.random()*8 +1)/10 ,//获取0.1-0.9之间的随机数
               type:'curvedCW',
             };
+            console.log(this.expressions);
             model.expressions=[];
             this.promqlKeys.forEach((item,index)=>{
               model.expressions.push({
@@ -238,6 +258,7 @@
                 "legend": this.legends[index],
               })
             });
+            console.log(model);
             this.$emit('addLine',model);
           }
         });

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

@@ -13,7 +13,7 @@
       </span>
       <span v-show="!selectNodeTitle&&editVisNetwork" class="edit-topologyLine">
         <el-button @click="saveTopology" class="saveTopology">save</el-button>
-        <el-button @click="cancelTopology" class="saveTopology">cancel</el-button>
+        <el-button @click="cancelTopology" class="cancelTopology">cancel</el-button>
       </span>
       <span class="edit-topology-line-cancel" v-show="selectNodeTitle&&editVisNetwork">Please select two nodes  <span class="edit-topologyCancel" @click="closeAddLine">Cancel</span></span>
     </div>
@@ -308,7 +308,7 @@
         let arr1=[];
         arr.forEach(item=>{
           let obj={
-            "name": item.lineName,
+            "name": item.label,
             "width": item.width,
             "arrows": item.arrows,
             "color": item.color,
@@ -462,6 +462,7 @@
         this.addLineShow=false;
         if(!edges){return}
         let edgesArray =[...this.edgesArray];
+        console.log(edgesArray,edges);
        if(!this.isLineAdd){
          edges={...edgesArray.find(item=>item.id===edges.id),...edges};
          edgesArray=edgesArray.filter(item=>item.id!==edges.id);
@@ -524,10 +525,10 @@
         this.networkPopClose();
         this.arrayDiff();
       },
-      // nodeEdit(){
+      nodeEdit(){
-      //   this.addNodeShow=true;
+        this.addNodeShow=true;
-      //   this.isNodeAdd=false;
+        this.isNodeAdd=false;
-      // },
+      },
       lineDel(){
         if(!this.lineData.id){return}
         let edgesArray=this.edgesArray.filter((item)=>item.id!==this.lineData.id);
@@ -641,7 +642,7 @@
            this_.networkPopClose();
          });
 
-         this.network.on("selectNode", function (params) {
+         this.network.on("selectNode", function (params) { //选择节点
            let selId=params.nodes[0];
            if(selId){
              this_.selNodeId=selId;
@@ -657,6 +658,9 @@
                this_.network.selectNodes(this_.NodeArr,true);
                return
              }
+             if(this_.NodeArr.length===0){
+               this_.nodeEdit();
+             }
              this_.setPopPosition(selId,params);
              this_.popDataShowUpdate('main');
            }
@@ -670,10 +674,15 @@
             this_.popDataShowUpdate('total')
           }else{
             this_.popDataShowUpdate()
+          }
+          if(this_.editVisNetwork){
+            this_.lineData.color=this_.lineData.color.color?this_.lineData.color.color:this_.lineData.color;
+            console.log(this_.lineData);
+            this_.addLineShow=true;
+            this_.isLineAdd=false;
           }
            // this_.lineData.color=this_.lineData.color.color;
            // this_.addLineShow=true;
-           // this_.isLineAdd=false;
          });
 
          this.network.on("dragStart", function (params) {//节点移动开始
@@ -948,12 +957,19 @@
     top: 0;
   }
   .saveTopology{
-    background: #FA901C;
+    background-image: linear-gradient(180deg, #F5B93E 0%, #EE9D3F 100%);
     border-radius: 4px;
     font-size: 14px;
     color: #FFFFFF;
     padding: 4px 14px;
   }
+  .cancelTopology{
+    background-image: linear-gradient(180deg, #F0F0F0 0%, #D8D8D8 99%);
+    border-radius: 4px;
+    font-size: 14px;
+    color: #333333;
+    padding: 4px 14px;
+  }
   .network-zoom{
     position: absolute;
     bottom: 15px;