From edf732916516a86e8b0b2449ae9e5b3cc0738f80 Mon Sep 17 00:00:00 2001
From: zhangyu <m13716206235@163.com>
Date: Fri, 21 Aug 2020 15:33:44 +0800
Subject: [PATCH] =?UTF-8?q?style=EF=BC=9A=20=E6=A0=BC=E5=BC=8F=E5=8C=96?=
 =?UTF-8?q?=E4=BB=A3=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/common/project/addLine.vue | 138 ++++++++++--------
 .../common/project/projectFacade.vue          |   2 +-
 .../components/common/project/topology.vue    |  29 +++-
 3 files changed, 105 insertions(+), 64 deletions(-)

diff --git a/nezha-fronted/src/components/common/project/addLine.vue b/nezha-fronted/src/components/common/project/addLine.vue
index 27316393a..1891742c4 100644
--- a/nezha-fronted/src/components/common/project/addLine.vue
+++ b/nezha-fronted/src/components/common/project/addLine.vue
@@ -1,67 +1,73 @@
 <template>
-  <div class="right-box right-box-edit-endpoint">
-    <!-- begin--顶部按钮-->
-    <div class="right-box-top-btns">
-      <!--<button id="edit-ep-del" type="button" @click="del" class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-style-light ">-->
+  <!--<div class="mc" @click.self="clickOutside">-->
+    <div class="right-box right-box-edit-endpoint">
+      <!-- begin--顶部按钮-->
+      <div class="right-box-top-btns">
+        <!--<button id="edit-ep-del" type="button" @click="del" class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-style-light ">-->
         <!--<span class="right-box-top-btn-icon"><i class="el-icon-delete"></i></span>-->
         <!--<span class="right-box-top-btn-txt">{{$t('overall.delete')}}</span>-->
-      <!--</button>-->
-    </div>
-    <!-- end--顶部按钮-->
+        <!--</button>-->
+      </div>
+      <!-- end--顶部按钮-->
 
-    <!-- begin--标题-->
-    <div class="right-box-title">Add Line</div>
-    <!-- end--标题-->
+      <!-- begin--标题-->
+      <div class="right-box-title">Add Line</div>
+      <!-- end--标题-->
 
-    <!-- begin--表单-->
-    <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-form-item>
-        <el-form-item label="箭头方向" prop="arrows" @change="iconChange" class="arrows">
-          <el-select v-model="form.arrows" placeholder="">
-            <div slot="prefix">
-              <img v-if="form.arrows=='from'" src="./leftArrow.png" />
-              <img v-if="form.arrows=='to'" src="./rightArrow.png" />
-              <img v-if="form.arrows=='from;to'" src="./LRArrow.png" />
-              <img v-if="form.arrows=='0'" src="./noArrow.png" />
+      <!-- begin--表单-->
+      <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-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="" :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" />
+                <img v-if="form.arrows=='from;to'" src="./LRArrow.png" />
+                <img v-if="form.arrows=='0'" src="./noArrow.png" />
+              </div>
+              <el-option label="from" value="from"><img src="./leftArrow.png" /></el-option>
+              <el-option label="to" value="to"><img src="./rightArrow.png" /></el-option>
+              <el-option label="from;to" value="from;to"><img src="./LRArrow.png" /></el-option>
+              <el-option label="" value="0"><img src="./noArrow.png" /></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="color" class="color">
+            <div class="color-show" @click="colorPickerClick">
+              <div class="color-show-left" :style="{background:form.color}"></div>
+              <span> {{form.color}}</span>
             </div>
-            <el-option label="from" value="from"><img src="./leftArrow.png" /></el-option>
-            <el-option label="to" value="to"><img src="./rightArrow.png" /></el-option>
-            <el-option label="from;to" value="from;to"><img src="./LRArrow.png" /></el-option>
-            <el-option label="" value="0"><img src="./noArrow.png" /></el-option>
-          </el-select>
-        </el-form-item>
-        <el-form-item label="color" class="color">
-          <div class="color-show" @click="colorPickerClick">
-            <div class="color-show-left" :style="{background:form.color}"></div>
-            <span> {{form.color}}</span>
-          </div>
-          <div class="color-content">
-            <el-color-picker
-              v-model="form.color"
-              :predefine="predefineColors"
-              ref="colorPicker"
-            >
-            </el-color-picker>
-          </div>
-        </el-form-item>
-      </el-form>
-    </el-scrollbar>
+            <div class="color-content" ref="color-content">
+              <el-color-picker
+                v-model="form.color"
+                :predefine="predefineColors"
+                ref="colorPicker"
+              >
+              </el-color-picker>
+            </div>
+          </el-form-item>
+        </el-form>
+      </el-scrollbar>
 
-    <!-- end--表单-->
+      <!-- end--表单-->
 
-    <!--底部按钮-->
-    <div class="right-box-bottom-btns">
-      <button @click="esc" id="ep-edit-esc" class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-100">
-        <span>{{$t('overall.cancel')}}</span>
-      </button>
-      <button @click="onSubmit" id="ep-edit-save" class="nz-btn nz-btn-size-normal nz-btn-style-normal nz-btn-min-width-100">
-        <span>{{$t('overall.save')}}</span>
-      </button>
+      <!--底部按钮-->
+      <div class="right-box-bottom-btns">
+        <button @click="esc" id="ep-edit-esc" class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-100">
+          <span>{{$t('overall.cancel')}}</span>
+        </button>
+        <button @click="onSubmit" id="ep-edit-save" class="nz-btn nz-btn-size-normal nz-btn-style-normal nz-btn-min-width-100">
+          <span>{{$t('overall.save')}}</span>
+        </button>
+      </div>
     </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;
diff --git a/nezha-fronted/src/components/common/project/projectFacade.vue b/nezha-fronted/src/components/common/project/projectFacade.vue
index 15b4a2d8b..fab20a666 100644
--- a/nezha-fronted/src/components/common/project/projectFacade.vue
+++ b/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">
diff --git a/nezha-fronted/src/components/common/project/topology.vue b/nezha-fronted/src/components/common/project/topology.vue
index c611dee2f..54b86d7fc 100644
--- a/nezha-fronted/src/components/common/project/topology.vue
+++ b/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.arrayDiff();
+       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;