style： 格式化代码

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

@@ -1,4 +1,5 @@
 <template>
+  <!--<div class="mc" @click.self="clickOutside">-->
     <div class="right-box right-box-edit-endpoint">
       <!-- begin--顶部按钮-->
       <div class="right-box-top-btns">
@@ -19,8 +20,12 @@
           <el-form-item label="Line Name" prop="lineName" class="line-name">
             <el-input v-model="form.lineName"></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-form-item>
           <el-form-item label="箭头方向" prop="arrows" @change="iconChange" class="arrows">
-          <el-select v-model="form.arrows" placeholder="">
+            <el-select v-model="form.arrows" placeholder="" :popper-append-to-body="false">
               <div slot="prefix">
                 <img v-if="form.arrows=='from'" src="./leftArrow.png" />
                 <img v-if="form.arrows=='to'" src="./rightArrow.png" />
@@ -38,7 +43,7 @@
               <div class="color-show-left" :style="{background:form.color}"></div>
               <span> {{form.color}}</span>
             </div>
-          <div class="color-content">
+            <div class="color-content" ref="color-content">
               <el-color-picker
                 v-model="form.color"
                 :predefine="predefineColors"
@@ -62,6 +67,7 @@
         </button>
       </div>
     </div>
+  <!--</div>-->
 </template>
 
 <script>
@@ -91,6 +97,7 @@
           color:'#1e90ff',
           lineName:'',
           lineId:'',
+          width:''
         },
         predefineColors: [
           '#ff4500',
@@ -117,6 +124,7 @@
         this.$refs['form'].validate((valid) => {
           if (valid) {
             let model=Object.assign({id:Math.random()*100},{...this.form},{color: {color:this.form.color,highlight:this.form.color,hover:this.form.color,opacity:1.0}});
+            model.width = parseInt(model.width) || 4;
             this.$emit('addLine',model);
           }
         });
@@ -133,7 +141,6 @@
         this.esc();
       },
       colorPickerClick(){
-        console.log(this.$refs['colorPicker']);
         this.$refs['colorPicker'].showPicker=true;
       },
       iconChange (val) {
@@ -159,6 +166,13 @@
 </script>
 
 <style scoped>
+  /*.mc{*/
+    /*position: fixed;*/
+    /*width: 100vw;*/
+    /*height: 100vh;*/
+    /*top: 0;*/
+    /*left: 0;*/
+  /*}*/
   .color-content{
     height: 0;
     width: 0;
@@ -187,8 +201,16 @@
   .line-name{
     width: calc(100% - 30px);
   }
-  .arrows{
+  .form-title{
-
+    font-size: 14px;
+    color: #333333;
+    padding-left: 28px;
+    margin-bottom: 15px;
+  }
+  /deep/ .el-form-item__label{
+    font-size: 14px;
+    color: #666666;
+    opacity: 0.6;
   }
   .arrows /deep/ .el-input.el-input--prefix.el-input--suffix{
     border: 1px solid #DCDFE6;

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

@@ -40,7 +40,7 @@
         </div>
         <div class="facade-top-right" v-loading="alertData.loading">
           <div class="facade-top-title">
-            <span class="label">{{alertData.title}}:</span>
+            <span class="label">{{alertData.title}}</span>
             {{alertData.sssObj.total}}
           </div>
           <div class="facade-top-right-content">

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

@@ -71,10 +71,27 @@
 
     </div>
     <transition name="right-box">
-      <add-model  v-if="addNodeShow" @addModel="addModel" :nodeData="nodeData" @close="addNodeShow=false" @del="nodeDel" :isAdd="isNodeAdd" :moduleDataS="moduleDataS"></add-model>
+      <add-model
+        v-if="addNodeShow"
+        @addModel="addModel"
+        :nodeData="nodeData"
+        @close="addNodeShow=false"
+        @del="nodeDel"
+        :isAdd="isNodeAdd"
+        :moduleDataS="moduleDataS"
+      ></add-model>
     </transition>
     <transition name="right-box">
-      <add-line  v-if="addLineShow" @addLine="addLine" @lineDel="lineDel" :selectNode="NodeArr" :lineData="lineData" :isAdd="isLineAdd" @close="closeAddLine" @del="lineDel"></add-line>
+      <add-line
+        v-if="addLineShow"
+        @addLine="addLine"
+        @lineDel="lineDel"
+        :selectNode="NodeArr"
+        :lineData="lineData"
+        :isAdd="isLineAdd"
+        @close="closeAddLine"
+        @del="lineDel"
+      ></add-line>
     </transition>
   </div>
 </template>
@@ -318,7 +335,9 @@
         nodesArray.push(model);
         this.$emit("setTopologyData",nodesArray,this.edgesArray);
         this.setNetworkData(nodesArray,this.edgesArray);
+       this.$nextTick(()=>{
          this.arrayDiff();
+       })
       },
       addModelShow(){ // 显示添加节点弹窗
         this.addNodeShow=true;
@@ -495,7 +514,7 @@
                 this_.NodeArr=this_.NodeArr.filter((item,i)=> i != index);
                 return
              }
-             if(this_.selectNodeTitle){
+             if(this_.selectNodeTitle&&this_.NodeArrShow){
                this_.NodeArr.push(selId);
                this_.network.selectNodes(this_.NodeArr,true);
                return
@@ -505,7 +524,7 @@
          });
 
          this.network.on("selectEdge", function (params) { // 选择边
-           // this_.lineData=this_.edgesArray.find((item)=>item.id===params.edges[0]);
+           this_.lineData=this_.edgesArray.find((item)=>item.id===params.edges[0]);
            // this_.lineData.color=this_.lineData.color.color;
            // this_.addLineShow=true;
            // this_.isLineAdd=false;