From 3f1b0923c2f2dc0f11dcb34e94d99089c73fed2e Mon Sep 17 00:00:00 2001
From: zhangyu <m13716206235@163.com>
Date: Thu, 3 Sep 2020 09:51:50 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=E4=BF=9D=E5=AD=98=E7=BC=A9?=
 =?UTF-8?q?=E6=94=BE=E7=BA=A7=E5=88=AB=20=E4=BB=A5=E5=8F=8A=E9=83=A8?=
 =?UTF-8?q?=E5=88=86=E5=9B=BD=E9=99=85=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/common/language/cn.js      | 18 ++++++++++
 .../src/components/common/language/en.js      | 20 ++++++++++-
 .../src/components/common/project/addLine.vue | 22 +++++-------
 .../src/components/common/project/addNode.vue |  5 ++-
 .../common/project/popData/Info.vue           |  1 -
 .../components/common/project/topology.vue    | 34 ++++++++++++-------
 .../components/common/project/visNetwork.vue  | 13 +++----
 7 files changed, 76 insertions(+), 37 deletions(-)

diff --git a/nezha-fronted/src/components/common/language/cn.js b/nezha-fronted/src/components/common/language/cn.js
index ec4a65488..28d104b13 100644
--- a/nezha-fronted/src/components/common/language/cn.js
+++ b/nezha-fronted/src/components/common/language/cn.js
@@ -887,6 +887,24 @@ const cn = {
       type: "类型",
       description: "描述"
     },
+    topology:{
+      line:'线',
+      module:'组件',
+      add:'添加',
+      selTwoNode:'请选择两个组件',
+      save:'保存',
+      cancel:'取消',
+      addLine:'添加连线',
+      lineName:'连线名称',
+      width:'宽度',
+      option:'设置',
+      arrows:'箭头方向',
+      color:'颜色',
+      chartName:'图表名称',
+      unit:'单位',
+      addModule:'添加组件',
+      
+    },
   },
   el: {
     colorpicker: {
diff --git a/nezha-fronted/src/components/common/language/en.js b/nezha-fronted/src/components/common/language/en.js
index 9ed5f57a5..d5a65b0e3 100644
--- a/nezha-fronted/src/components/common/language/en.js
+++ b/nezha-fronted/src/components/common/language/en.js
@@ -932,7 +932,25 @@ const en = {
       name: 'Name',//'名称'
       type: 'Type',//'类型'
       description: 'Description'//'描述'
-    }
+    },
+    topology:{
+      line:'Line',
+      module:'Module element',
+      add:'Add',
+      selTwoNode:'Please select two module',
+      save:'save',
+      cancel:'cancel',
+      addLine:'Add Line',
+      lineName:'Line Name',
+      width:'width',
+      option:'Option',
+      arrows:'Arrows',
+      color:'Color',
+      chartName:'Name',
+      unit:'Unit',
+      addModule:'Add Module',
+      
+    },
   },
   ...enLocale
 }
diff --git a/nezha-fronted/src/components/common/project/addLine.vue b/nezha-fronted/src/components/common/project/addLine.vue
index f752328c3..6770f0761 100644
--- a/nezha-fronted/src/components/common/project/addLine.vue
+++ b/nezha-fronted/src/components/common/project/addLine.vue
@@ -11,17 +11,17 @@
       <!-- end--顶部按钮-->
 
       <!-- begin--标题-->
-      <div class="right-box-title">Add Line</div>
+      <div class="right-box-title">{{$t('project.topology.addLine')}}</div>
       <!-- end--标题-->
 
       <!-- begin--表单-->
       <el-scrollbar class="right-box-form-box">
         <el-form class="right-box-form  right-box-form-left" ref="form" :model="form" label-width="120px" :rules="rules">
-          <el-form-item label="Line Name" prop="lineName" class="line-name">
+          <el-form-item :label="$t('project.topology.lineName')" prop="lineName" class="line-name">
             <el-input v-model="form.lineName"  size="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-row class="form-title">{{$t('project.topology.option')}}</el-row>
+          <el-form-item :label="$t('project.topology.width')" prop="width" class="line-name">
             <el-input v-model="form.width"  size="small"></el-input>
           </el-form-item>
           <!--<el-form-item label="roundness"  class="line-name">-->
@@ -41,7 +41,7 @@
               <!--<el-option label="cubicBezier" value="cubicBezier"></el-option>-->
             <!--</el-select>-->
           <!--</el-form-item>-->
-          <el-form-item label="箭头方向" prop="arrows" class="arrows">
+          <el-form-item :label="$t('project.topology.arrows')" prop="arrows" class="arrows">
             <el-select v-model="form.arrows" placeholder="" :popper-append-to-body="false"  size="small">
               <div slot="prefix">
                 <img v-if="form.arrows=='from'" src="./image/leftArrow.png" />
@@ -55,7 +55,7 @@
               <el-option label="" value="0"><img src="./image/noArrow.png" /></el-option>
             </el-select>
           </el-form-item>
-          <el-form-item label="color" class="color">
+          <el-form-item :label="$t('project.topology.color')" class="color">
             <div class="color-show" @click="colorPickerClick">
               <div class="color-show-left" :style="{background:form.color}"></div>
               <span> {{form.color}}</span>
@@ -78,7 +78,7 @@
             <el-row>
               <template>
                 <el-col style="width: 120px; padding-right: 20px; text-align: right; color: #666">
-                  Name
+                  {{$t('project.topology.chartName')}}
                 </el-col>
                 <el-col style="width: calc(100% - 140px);">
                   <el-input v-model="name[index-1]" type="text" size="small"></el-input>
@@ -88,7 +88,7 @@
             </el-row>
             <el-row>
               <el-col style="width: 120px; padding-right: 20px; text-align: right; color: #666">
-                Unit
+                {{$t('project.topology.unit')}}
               </el-col>
               <el-col style="width: calc(100% - 120px);">
                 <el-cascader filterable placeholder="" popper-class="no-style-class unit-popper-class" size="small" style="width: 100%"
@@ -166,7 +166,6 @@
     watch:{
       lineData:{
         handler(n){
-          console.log(n);
           this.form={
             arrows:n.arrows,
             color:n.color,
@@ -230,11 +229,8 @@
     },
     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));
-          console.log(this.expressions[index]);
           this.$refs['promql-'+(index)][0].metricChange(this.expressions[index]);
         })
       }
@@ -250,7 +246,6 @@
               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({
@@ -260,7 +255,6 @@
                 "legend": this.legends[index],
               })
             });
-            console.log(model);
             this.$emit('addLine',model);
           }
         });
diff --git a/nezha-fronted/src/components/common/project/addNode.vue b/nezha-fronted/src/components/common/project/addNode.vue
index d8aca88a5..823df745b 100644
--- a/nezha-fronted/src/components/common/project/addNode.vue
+++ b/nezha-fronted/src/components/common/project/addNode.vue
@@ -67,7 +67,7 @@
           <el-row>
             <template>
               <el-col style="width: 120px; padding-right: 20px; text-align: right; color: #666">
-                Name
+                {{$t('project.topology.chartName')}}
               </el-col>
               <el-col style="width: calc(100% - 140px);">
                 <el-input v-model="name[index-1]" type="text" size="small"></el-input>
@@ -77,7 +77,7 @@
           </el-row>
           <el-row>
             <el-col style="width: 120px; padding-right: 20px; text-align: right; color: #666">
-              Unit
+              {{$t('project.topology.unit')}}
             </el-col>
             <el-col style="width: calc(100% - 120px);">
               <el-cascader filterable placeholder="" popper-class="no-style-class unit-popper-class" size="small" style="width: 100%"
@@ -179,7 +179,6 @@
       'form.iconId':{
         handler(n){
           if(n){
-            console.log(n);
             this.selImage=this.iconArray.find(item=>item.id===n)
           }
         },
diff --git a/nezha-fronted/src/components/common/project/popData/Info.vue b/nezha-fronted/src/components/common/project/popData/Info.vue
index 5cca222a2..902a2a76b 100644
--- a/nezha-fronted/src/components/common/project/popData/Info.vue
+++ b/nezha-fronted/src/components/common/project/popData/Info.vue
@@ -67,7 +67,6 @@
       this.$get('/module',{id:this.moduleId}).then(res=>{
         this.loading=false;
         this.moduleInfo=res.data.list[0];
-        console.log(this.moduleInfo,this.projectId);
       })
     },
     methods:{},
diff --git a/nezha-fronted/src/components/common/project/topology.vue b/nezha-fronted/src/components/common/project/topology.vue
index c1698c2f9..acd36a52e 100644
--- a/nezha-fronted/src/components/common/project/topology.vue
+++ b/nezha-fronted/src/components/common/project/topology.vue
@@ -2,21 +2,22 @@
   <div class="content">
     <div class="edit-topology" v-if="editVisNetwork">
       <span v-show="!selectNodeTitle&&editVisNetwork" class="edit-topology-module">
-        Module element :
-        <span class="edit-topology-add" @click="addModelShow">Add</span>
+        {{$t('project.topology.module')}} :
+        <span class="edit-topology-add" @click="addModelShow">{{$t('project.topology.add')}}</span>
         <!--<span class="edit-topology-remove" @click="nodeDel">Remove</span>-->
       </span>
       <span v-show="!selectNodeTitle&&editVisNetwork" class="edit-topologyLine">
-        Line :
-        <span class="edit-topology-add" @click="addLineTitleShow">Add</span>
+        {{$t('project.topology.line')}} :
+        <span class="edit-topology-add" @click="addLineTitleShow">{{$t('project.topology.add')}}</span>
         <!--<span class="edit-topology-remove" @click="lineDel">Remove</span>-->
       </span>
       <span v-show="!selectNodeTitle&&editVisNetwork" class="edit-topologyLine">
-        <el-button @click="saveTopology" class="saveTopology">save</el-button>
-        <el-button @click="cancelTopology" class="cancelTopology">cancel</el-button>
+        <el-button @click="saveTopology" class="saveTopology">{{$t('project.topology.save')}}</el-button>
+        <el-button @click="cancelTopology" class="cancelTopology">{{$t('project.topology.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>
+      <span class="edit-topology-line-cancel" v-show="selectNodeTitle&&editVisNetwork"> {{$t('project.topology.selTwoNode')}} <span class="edit-topologyCancel" @click="closeAddLine">{{$t('project.topology.cancel')}}</span></span>
     </div>
+    <div class="edit-topology" v-else></div>
     <div class="network" ref="network"  v-clickoutside="networkPopClose" @mousedown="(e)=>{modelTopMouseDown(e)}" @mouseup="(e)=>modelTopMouseUp(e)">
       <!--拓扑图-->
       <div id="network_id" ref="visNetwork" :class="{'cursorMove': cursorMove}"></div>
@@ -57,7 +58,7 @@
       <i class="nz-icon nz-icon-shuidi"
          v-show="item.show"
          v-for="(item,index) in modelTop"
-         :style="{top:(item.y- 80 + 5*(10-zoom*10))+'px',left:(item.x-26)+'px',transform:'scale('+zoom+')'}"
+         :style="{top:(item.y- 80 + 5*(10-zoom*10))+'px',left:(item.x-26 + 5*(1-zoom*1))+'px',transform:'scale('+zoom+')'}"
          :ref="'modelTopId'+index"
          @mousedown="modelTopClick(item,index)"
       >
@@ -89,7 +90,7 @@
         v-if="addNodeShow"
         @addModel="addModel"
         :nodeData="nodeData"
-        @close="addNodeShow=false"
+        @close="closeAddNode"
         @del="nodeDel"
         :isAdd="isNodeAdd"
         :moduleDataS="moduleDataS"
@@ -359,6 +360,7 @@
               type: "curvedCW",
             },
             selfReferenceSize:40,
+            arrowStrikethrough:false,
           },
           layout:{
             randomSeed: 666,
@@ -464,7 +466,6 @@
         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);
@@ -491,6 +492,10 @@
         this.NodeArrShow=false;
         this.network.unselectAll();
       },
+      closeAddNode(){
+        this.addNodeShow=false;
+        this.arrayDiff();
+      },
       setNodePosition(selId){ // 移动节点后 设置节点坐标
         let position = this.network.getPositions([selId]);
         let selItem = this.nodesArray.find((item)=>item.id===selId);
@@ -520,7 +525,6 @@
       nodeDel(){
         let nodesArray=this.nodesArray.filter((item)=>item.id!==this.selNodeId);
         let edgesArray=this.edgesArray.filter((item)=>!(item.from===this.selNodeId || item.to===this.selNodeId));
-        console.log(edgesArray,"edgesArray");
         this.selNodeId='';
         this.$emit('setTopologyData',nodesArray, edgesArray);
         this.setNetworkData(nodesArray, edgesArray);
@@ -528,6 +532,7 @@
         this.arrayDiff();
       },
       nodeEdit(){
+        this.moduleDataS.module.push(this.allModuleInfos.module.find(item=>item.id===this.selNodeId));
         this.addNodeShow=true;
         this.isNodeAdd=false;
       },
@@ -642,6 +647,7 @@
          this.init('modal');
          this.network.on("click", function () {
            this_.networkPopClose();
+           this_.popDataShowUpdate();
          });
 
          this.network.on("selectNode", function (params) { //选择节点
@@ -671,7 +677,6 @@
          this.network.on("selectEdge", function (params) { // 选择边
            this_.selNodeId='';
            this_.lineData=this_.edgesArray.find((item)=>item.id===params.edges[0]);
-           console.log(this_.lineData);
           if(this_.lineData.expressions&&this_.lineData.expressions.length){
             this_.popDataShowUpdate('total')
           }else{
@@ -820,6 +825,8 @@
     transform: scale(1.1);
     left: 4px;
     font-size: 41px;
+    color: #D7FAF1;
+    top: -1px;
   }
   .network-pop .nz-icon-hexagonBorder:hover .noMove{
     transform: scale(1.1);
@@ -944,6 +951,9 @@
     position: absolute;
     font-size: 48px;
     color: rgba(132,213,194,0.5);
+    border-radius: 50%;
+    height: 60px;
+    width: 38px;
   }
   .nz-icon-model{
     color: #23BF9A;
diff --git a/nezha-fronted/src/components/common/project/visNetwork.vue b/nezha-fronted/src/components/common/project/visNetwork.vue
index 72968d291..050f8ba9c 100644
--- a/nezha-fronted/src/components/common/project/visNetwork.vue
+++ b/nezha-fronted/src/components/common/project/visNetwork.vue
@@ -38,8 +38,8 @@
                 {{projectInfo.title}}
               </div>
               <div>
-                <span><span class="label">Id :</span>{{projectInfo.id}}</span>
-                <span><span class="label special">Name :</span>{{projectInfo.name}}</span>
+                <!--<span><span class="label">Id :</span>{{projectInfo.id}}</span>-->
+                <span><span class="label">Name :</span>{{projectInfo.name}}</span>
               </div>
               <div>
                 <span><span class="label">Description :</span>{{projectInfo.remark?projectInfo.remark:'--'}}</span>
@@ -211,10 +211,8 @@
               this.$refs['topology'].setData();
             },500)
           }
-          // res.data.topo.viewsCenter?res.data.topo.viewsCenter:
-          this.$refs['topology'].viewsCenter={x:0,y:0};
-          // res.data.topo.zoom?res.data.topo.zoom:
-          this.$refs['topology'].zoom=1;
+          this.$refs['topology'].viewsCenter=res.data.topo.viewsCenter?res.data.topo.viewsCenter:{x:0,y:0};
+          this.$refs['topology'].zoom=res.data.topo.zoom?res.data.topo.zoom:1;
         })
       },
       reload(){
@@ -300,6 +298,9 @@
         if(flag){
           this.$refs.topology.popDataShowUpdate();
         }
+        if(!flag){
+          // this.reload();
+        }
       }
     },