From a7a016dc0c49eaee593b9054238ba66f1f03dbf3 Mon Sep 17 00:00:00 2001
From: zhangyu <zhangyu@geedgenetworks.com>
Date: Tue, 23 Feb 2021 10:20:35 +0800
Subject: [PATCH] =?UTF-8?q?fix=EF=BC=9A=E4=BF=AE=E6=94=B9=20=E4=B8=8B?=
 =?UTF-8?q?=E6=8B=89=E6=A1=86=E8=A2=AB=E9=81=AE=E7=9B=96=E7=9A=84=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/common/language/cn.js      |  7 +-
 .../src/components/common/language/en.js      |  9 ++-
 .../common/project/L5/CanvasProps.vue         | 34 ++++++----
 .../common/project/L5/topologyTopTool.vue     | 19 ++++--
 .../components/common/project/topologyL5.vue  | 66 +++++++++++++------
 5 files changed, 92 insertions(+), 43 deletions(-)

diff --git a/nezha-fronted/src/components/common/language/cn.js b/nezha-fronted/src/components/common/language/cn.js
index a3cb0065a..d65d0c93f 100644
--- a/nezha-fronted/src/components/common/language/cn.js
+++ b/nezha-fronted/src/components/common/language/cn.js
@@ -978,7 +978,6 @@ const cn = {
       description: "描述"
     },
     topology:{
-      line:'线',
       module:'模块',
       add:'添加',
       selTwoNode:'请选择两个模块',
@@ -1008,7 +1007,6 @@ const cn = {
       alert:'告警信息',
       lineType:'线型',
       straight:'直线',
-      curve:'曲线',
       upload:'上传文件',
       requiredName:'名称不能为空',
       imgFormat:'上传图片只能是 JPG/png 格式!',
@@ -1030,6 +1028,7 @@ const cn = {
       bac:'背景',
       bacImage:'背景图片',
       defaultLineWidth:'默认线宽',
+      defaultLineType:'默认连线类型',
       lineWidth:'线条宽度',
       grids:'网格',
       gridSize:'网格大小',
@@ -1048,6 +1047,7 @@ const cn = {
       gradient:'渐变',
       lineStyle:'线条样式',
       lineColor:'线条颜色',
+      lineDash:'线条虚实',
       fromArrow:"起点箭头",
       toArrow:"终点箭头",
       arrowColor:"箭头颜色",
@@ -1065,6 +1065,9 @@ const cn = {
       beads:'水珠流动',
       dot:'圆点',
       comet:'彗星',
+      curve:'曲线',
+      polyline:'折线',
+      line:'直线',
     },
   },
   date:{
diff --git a/nezha-fronted/src/components/common/language/en.js b/nezha-fronted/src/components/common/language/en.js
index c5d1b0ea5..37fe22f5f 100644
--- a/nezha-fronted/src/components/common/language/en.js
+++ b/nezha-fronted/src/components/common/language/en.js
@@ -983,7 +983,6 @@ const en = {
       description: 'Description'//'描述'
     },
     topology:{
-      line:'Line',
       module:'Module element',
       add:'Add',
       selTwoNode:'Please select two module',
@@ -1013,7 +1012,6 @@ const en = {
       alert:'Alert Message',
       lineType:'Line type',
       straight:'straight',
-      curve:'curve',
       upload:'upload',
       requiredName:'The name of the required',
       imgFormat:'Upload picture can only be JPG/ PNG format!',
@@ -1034,7 +1032,8 @@ const en = {
       name:'Name',
       bac:"Background",
       bacImage:'Background image',
-      defaultLineWidth:'Default lineWidth',
+      defaultLineWidth:'Default line width',
+      defaultLineType:'Default line type',
       lineWidth:'Line width',
       grids:'Grids',
       gridSize:'Grid Size',
@@ -1053,6 +1052,7 @@ const en = {
       gradient:'Gradient',
       lineStyle:'Line dash',
       lineColor:'Line color',
+      lineDash:'lineDash',
       fromArrow:"From arrow",
       toArrow:"To arrow",
       arrowColor:"Arrow color",
@@ -1070,6 +1070,9 @@ const en = {
       beads:'beads',
       dot:'dot',
       comet:'comet',
+      curve:'curve',
+      polyline:'polyline',
+      line:'line',
     },
   },
   date:{
diff --git a/nezha-fronted/src/components/common/project/L5/CanvasProps.vue b/nezha-fronted/src/components/common/project/L5/CanvasProps.vue
index 418246d4d..c01e61f65 100644
--- a/nezha-fronted/src/components/common/project/L5/CanvasProps.vue
+++ b/nezha-fronted/src/components/common/project/L5/CanvasProps.vue
@@ -13,7 +13,7 @@
           <!--module-->
           <el-form-item label="Module" prop="moduleId" v-if="!selection.pen.type" class="half-form-item">
             <el-select v-model="selection.pen.data.moduleId" :placeholder="$t('el.select.placeholder')" popper-class="asset-dropdown" size="small"
-                       @change="moduleIdChange" :popper-append-to-body="false">
+                       @change="moduleIdChange" >
               <el-option
                 v-for="item in modules"
                 :key="item.id"
@@ -273,7 +273,7 @@
             <!--</div>-->
           <!--</el-collapse-item>-->
           <!--样式-->
-          <el-collapse-item :label="'Style'" name="4" v-if="selection.pen">
+          <el-collapse-item :title="'Style'" name="4" v-if="selection.pen">
             <div class="flex flex-warp">
               <div class="props-pen-item">
                 <div>{{$t('project.topology.circularBead')}}（0 - 1）</div>
@@ -346,7 +346,7 @@
                   >
                   </el-color-picker>
                   <el-select v-model="selection.pen.bkType" size="small"
-                             :popper-append-to-body="false" @change="bkTypeChange">
+                              @change="bkTypeChange">
                     <el-option v-for="(item,index) in bkTypeOption" :value="item.id" :key="index"
                                :label="item.name">
                     </el-option>
@@ -377,7 +377,7 @@
               <div class="props-pen-item special-select">
                 <div>{{$t('project.topology.lineDash')}}</div>
                 <div class="p10 pl0">
-                  <el-select v-model="selection.pen.dash" size="small" :popper-append-to-body="false"
+                  <el-select v-model="selection.pen.dash" size="small"
                              @change="onChange">
                     <div slot="prefix">
                       <div class="icon-item">
@@ -407,7 +407,7 @@
               <div class="props-pen-item special-select" v-if="selection.pen&&selection.pen.type">
                 <div>{{$t('project.topology.lineType')}}</div>
                 <div class="p10 pl0">
-                  <el-select v-model="selection.pen.name" size="small" :popper-append-to-body="false"
+                  <el-select v-model="selection.pen.name" size="small"
                              @change="onClickName">
                     <div slot="prefix">
                       <div class="icon-item">
@@ -438,7 +438,7 @@
                 <div>{{$t('project.topology.fromArrow')}}</div>
                 <div class="p10 pl0">
                   <el-select v-model="selection.pen.fromArrow" size="small"
-                             :popper-append-to-body="false" @change="onClickFromArrow">
+                              @change="onClickFromArrow">
                     <div slot="prefix">
                       <div class="icon-item">
                         <svg>
@@ -487,7 +487,7 @@
                 <div>{{$t('project.topology.toArrow')}}</div>
                 <div class="p10 pl0">
                   <el-select v-model="selection.pen.toArrow" size="small"
-                             :popper-append-to-body="false" @change="onClickToArrow">
+                              @change="onClickToArrow">
                     <div slot="prefix">
                       <div class="icon-item">
                         <svg>
@@ -618,7 +618,7 @@
                 <el-select
                   v-model="selection.pen.animateType"
                   size="small"
-                  :popper-append-to-body="false"
+
                 >
                   <el-option v-for="(item,index) in nodeAnimateOptions" :value="item.id" :key="index"
                              :label="item.name"></el-option>
@@ -630,7 +630,7 @@
               <label>{{$t('project.topology.animationType')}}</label>
               <div class="full pr10">
                 <el-select v-model="selection.pen.animateType" size="small"
-                           :popper-append-to-body="false" @change="onAnimate">
+                            @change="onAnimate">
                   <el-option v-for="(item,index) in lineAnimateOptions" :value="item.id" :key="index"
                              :label="item.name"></el-option>
                 </el-select>
@@ -809,7 +809,7 @@
             <label>{{$t('project.topology.defaultStartArrow')}}</label>
             <div class="full pr10 h32">
               <el-select v-model="topologyData.data.fromArrow" size="small"
-                         :popper-append-to-body="false"
+
                          @change="changeTopologyOpt(topologyData.data.fromArrow,'fromArrow')">
                 <div slot="prefix">
                   <div class="icon-item">
@@ -859,7 +859,7 @@
             <label>{{$t('project.topology.defaultEndArrow')}}</label>
             <div class="full pr10 h32">
               <el-select v-model="topologyData.data.toArrow" size="small"
-                         :popper-append-to-body="false"
+
                          @change="changeTopologyOpt('toArrow')">
                 <div slot="prefix">
                   <div class="icon-item">
@@ -1120,7 +1120,7 @@
           {d:'M5 14 a100,50 0 0,1 85,0',"stroke-dasharray":"",name:'curve'},
           {d:'M5 8 l40 0 l0 12 l40 0',"stroke-dasharray":"",name:'polyline'},
           {d:'M5 14 l85 0',"stroke-dasharray":"",name:'line'},
-          {d:'M5 20 C0,8 50,0 85,0',"stroke-dasharray":"",name:'mind'},
+          // {d:'M5 20 C0,8 50,0 85,0',"stroke-dasharray":"",name:'mind'},
         ],
         penLineFromTOArrow:[
           {d:'M5 14 l85 0',"points":"",fill:'',stroke:"",'stroke-width':"",name:''},
@@ -1377,6 +1377,7 @@
           this.selection.pen.toArrowColor=this.colorRGBtoHex(val);
           this.selection.pen.data['fromArrowColor']=this.colorRGBtoHex(val);
           this.selection.pen.data['toArrowColor']=this.colorRGBtoHex(val);
+          this.selection.pen.data['arrowColor']=this.colorRGBtoHex(val);
         }else{
           this.selection.pen[name]=this.colorRGBtoHex(val);
         }
@@ -1600,6 +1601,15 @@
     border-radius: 0 0 5px 5px;
     border-top: none;
   }
+  .icon-item {
+    width: 75%;
+    height: 100%;
+    padding-left: 25%;
+  }
+  .icon-item svg {
+    width: 180px;
+    height: 100%;
+  }
 </style>
 <style lang="scss" scoped>
   .project-title {
diff --git a/nezha-fronted/src/components/common/project/L5/topologyTopTool.vue b/nezha-fronted/src/components/common/project/L5/topologyTopTool.vue
index 41c4dedfd..29ea2e438 100644
--- a/nezha-fronted/src/components/common/project/L5/topologyTopTool.vue
+++ b/nezha-fronted/src/components/common/project/L5/topologyTopTool.vue
@@ -1,8 +1,8 @@
 <template>
   <div class="tool-top" id="tool-top">
-    <div id="undo" :class="['top-tool-item',cachesIndex>0?'':'top-tool-item-disabled']"  @click="undo"> <i class="nz-icon nz-icon-revoke" :title="'撤销'"/> </div>
-    <div id="redo" :class="['top-tool-item',redoFlag?'':'top-tool-item-disabled']" @click="redo"> <i class="nz-icon nz-icon-revoke1"  :title="'重做'"/> </div>
-    <!--<div class="top-tool-item" @click="centerView"> 居中</div>-->
+    <div id="undo" :class="['top-tool-item',]"  @click="undo"> <i class="nz-icon nz-icon-revoke" :title="'撤销'"/> </div>
+    <div id="redo" :class="['top-tool-item',]" @click="redo"> <i class="nz-icon nz-icon-revoke1"  :title="'重做'"/> </div>
+    <!--<div class="top-tool-item" @click="centerView"> 居中</div> redoFlag?'':'top-tool-item-disabled' cachesIndex>0?'':'top-tool-item-disabled'-->
     <!--<div class="top-tool-item" @click="fitView"> 自适应</div>-->
     <!--<div :class="['top-tool-item',toolShow.node?'tool-item-active':'']" @click="toolShowChange('node')"> 节点工具 </div>-->
     <!--<div :class="['top-tool-item',toolShow.attr?'tool-item-active':'']" @click="toolShowChange('attr')"> 属性工具 </div>-->
@@ -123,11 +123,18 @@
       },
       undo(){//撤销
         getTopology(this.index).undo();
-        setTimeout(()=>{
-          this.redoFlag=true;
-        },200)
+        console.log(getTopology(this.index).caches.index);
+        // if(!this.redoFlag){
+        //   this.$emit('redoIndexChange',getTopology(this.index).caches.index)
+        // }
+        // let a = getTopology(this.index).undo();
+        // console.log(a);
+        // setTimeout(()=>{
+        //   this.redoFlag=true;
+        // },200)
       },
       redo(){//重做
+        console.log(getTopology(this.index))
         getTopology(this.index).redo();
       },
       centerView(){//居中显示
diff --git a/nezha-fronted/src/components/common/project/topologyL5.vue b/nezha-fronted/src/components/common/project/topologyL5.vue
index c92a31863..5c7962cb5 100644
--- a/nezha-fronted/src/components/common/project/topologyL5.vue
+++ b/nezha-fronted/src/components/common/project/topologyL5.vue
@@ -63,7 +63,7 @@
                          :popper-append-to-body="false"
                          @change="changeTopologyOpt(lineName,'lineName')">
                <div slot="prefix">
-                <div class="icon-item">
+                <div class="icon-item" style="width: 100%;padding: 0">
                   <svg>
                     <g fill="none" stroke="black" stroke-width="1">
                       <path
@@ -74,14 +74,15 @@
                   </svg>
                 </div>
               </div>
-                <el-option :disabled="true" :value="false">默认连线类型</el-option>
+                <el-option :disabled="true" :value="false">{{$t('project.topology.defaultLineType')}}</el-option>
                 <el-option v-for="(item,index) in penLineType" :value="item.name" :key="index">
-                  <div class="icon-item">
+                  <div class="icon-item" style="position: relative;width: 100%;padding: 0">
                     <svg>
                     <g fill="none" :stroke="(lineName==item.name)?'#ee9d3f':'black'" stroke-width="1">
                     <path :d="item.d" :stroke-dasharray="item['stroke-dasharray']"></path>
                     </g>
                     </svg>
+                    <span style="position: absolute;left:60px;top: 0;">{{item.name}}</span>
                   </div>
                 </el-option>
               </el-select>
@@ -97,6 +98,7 @@
             ref="topTool"
             @toolShowChange="toolShowChange"
             :cachesIndex="cachesIndex"
+            :redoIndexChange="redoIndexChange"
             :toolShow="toolShow">
           </topology-top-tool>
 
@@ -387,6 +389,7 @@
           name:'',
         },
         saveData:{},
+        redoIndex:0,
         dataLength:0,
         editTopologyFlag:false,
         searchTime: bus.getTimezontDateRange(),
@@ -448,9 +451,9 @@
         chartData:{},
         chartGetData:[],
         penLineType:[
-          {d:'M5 19 a50,100 0 0,1 40,0',"stroke-dasharray":"",name:'curve'},
-          {d:'M5 8 l20 0 l0 12 l20 0',"stroke-dasharray":"",name:'polyline'},
-          {d:'M5 14 l40 0',"stroke-dasharray":"",name:'line'},
+          {d:'M5 19 a50,100 0 0,1 40,0',"stroke-dasharray":"",name:this.$t('project.topology.curve')},
+          {d:'M5 8 l20 0 l0 12 l20 0',"stroke-dasharray":"",name:this.$t('project.topology.polyline')},
+          {d:'M5 14 l40 0',"stroke-dasharray":"",name:this.$t('project.topology.line')},
           // {d:'M5 20 C0,8 50,0 85,0',"stroke-dasharray":"",name:'mind'},
         ],
         lineName:'curve',
@@ -1163,15 +1166,8 @@
       },
 
       onMessage(event,data,e){
-        // console.log('onMessage',event,data);
+        console.log('onMessage',event);
         // console.log(getTopology(this.topologyIndex))
-        if(getTopology(this.topologyIndex)){
-          this.cachesIndex=getTopology(this.topologyIndex).caches.index;
-          if(this.$refs.topTool){
-            this.$refs.topTool.redoFlag=false
-          }
-          ;
-        }
         if(!Array.isArray(data)&&data){//判断不是数组 提前个data配置好节点属性
           // if(data.type===0){
           //   data.textRect=new Rect(data.rect.ex-10,data.rect.ey-10,data.rect.width,data.rect.height);
@@ -1215,13 +1211,14 @@
           }else if(data.type==1&& !data.data){
             //连线是否自动计算锚点
             // data.manualCps=true;
+            data.animateColor='#FA901C';
             data.data={
               animatePlay:false,
               strokeStyle:data.strokeStyle,
               animateColor:data.animateColor,
-              arrowColor:data.arrowColor,
-              fromArrowColor:data.fromArrowColor,
-              toArrowColor:data.toArrowColor,
+              arrowColor:"#00000",
+              fromArrowColor:"#00000",
+              toArrowColor:"#00000",
               lineWidth:1,
               //chart 配置项
               valueMapping:[{
@@ -1248,12 +1245,12 @@
               moduleName:'',
               url:'',
             };
-            data.animateColor='#FA901C'
           }
           if(data.type===0||data.type===1){
             data.lineWidth=data.data.lineWidth;
           }
         }
+
         switch(event){
           case 'moveInNode':
           case 'moveInLine':
@@ -1307,6 +1304,26 @@
         }
         // 右侧输入框编辑状态时点击编辑区域其他元素，onMessage执行后才执行onUpdateProps方法，通过setTimeout让onUpdateProps先执行
         setTimeout(()=>{
+          // setTimeout(()=>{
+          //   if(getTopology(this.topologyIndex)){
+          //     this.cachesIndex=getTopology(this.topologyIndex).caches.index;
+          //     console.log(this.cachesIndex)
+          //   }
+          //   if(getTopology(this.topologyIndex)&&this.$refs.topTool&&this.$refs.topTool.redoFlag){
+          //     console.log( this.cachesIndex, this.redoIndex);
+          //     if(event==='redo'){
+          //       this.redoIndex++;
+          //     }else{
+          //       this.redoIndex--;
+          //     }
+          //     if(this.$refs.topTool&&(this.redoIndex!==this.cachesIndex)){
+          //       this.$refs.topTool.redoFlag=false
+          //     };
+          //   }
+          // },50);
+
+          console.log(getTopology(this.topologyIndex).caches);
+
           switch(event){
             case 'node':
             case 'addNode':
@@ -1703,8 +1720,8 @@
               item.animateColor=item.data.animateColor;
               item.strokeStyle=item.data.strokeStyle;
               item.arrowColor=item.data.arrowColor;
-              item.fromArrowColor=item.data.fromArrowColor;
-              item.toArrowColor=item.data.toArrowColor;
+              item.fromArrowColor=item.data.arrowColor;
+              item.toArrowColor=item.data.arrowColor;
               item.animatePlay=false;
               item.font.color="#000000";
             }
@@ -1713,6 +1730,11 @@
           this.toolShow.attrCord=[domRect.width-350,0];
           this.toolShow.height=domRect.height;
           getTopology(this.topologyIndex).canvasPos=domRect;
+          getTopology(this.topologyIndex).caches={
+            index:0,
+            list:[JSON.parse(JSON.stringify(getTopology(this.topologyIndex).data))]
+          }
+          console.log(getTopology(this.topologyIndex));
         })
       },
 
@@ -1900,6 +1922,10 @@
         }
         return false;
       },
+      redoIndexChange(index){
+        console.log(index);
+        this.redoIndex=index
+      }
     },
     destroyed(){
       getTopology(this.topologyIndex).destroy();