feat：修改topology设置渐变的逻辑

nezha-fronted/src/components/common/project/L5/CanvasProps.vue

@@ -339,19 +339,29 @@
               <div class="props-pen-item" v-if="selection.pen&&!selection.pen.type">
                 <div>{{$t('project.topology.gradient')}}</div>
                 <div class="p10 pl0 gradient-to">
-                  <el-color-picker
+                  <el-select v-model="selection.pen.gradientType" size="small"
-                    v-model="selection.pen.gradientToColor"
+                             @change="bkTypeChange" style="width: 60px;border-radius: 4px 0 0 4px;background: #F5F7FA" class="color-before-select">
-                    ref="gradientToColor"
-                    @active-change="(val)=>colorChange(val,'gradientToColor')"
-                    size="small"
-                  >
-                  </el-color-picker>
-                  <el-select v-model="selection.pen.bkType" size="small"
-                              @change="bkTypeChange">
                     <el-option v-for="(item,index) in bkTypeOption" :value="item.id" :key="index"
                                :label="item.name">
                     </el-option>
+                    <!--el-input__inner-->
                   </el-select>
+                  <div class="color-show" style="display:inline-block;width: calc(100% - 72px);margin-left: -5px;border-radius: 0 5px 5px 0" @click="colorPickerClick('gradientColor')">
+                    <div class="color-show-left" :style="{background:selection.pen.data.gradientColor,display:'inline-block','margin-top':'5px'}"></div>
+                    <span class="color-text" style="vertical-align: text-bottom"> {{selection.pen.data.gradientColor}}</span>
+                    <span class="color-arrows" style="top: 13px; right: 20px">
+                  <i class="nz-icon nz-icon-arrow-down" v-if="$refs['gradientColor']&&!$refs['gradientColor'].showPicker"></i>
+                  <i class="nz-icon nz-icon-arrow-up" v-if="$refs['gradientColor']&&$refs['gradientColor'].showPicker"></i>
+                </span>
+                  </div>
+                  <div class="color-content" ref="color-content">
+                    <el-color-picker
+                      v-model="selection.pen.data.gradientColor"
+                      ref="gradientColor"
+                      @active-change="(val)=>colorChange(val,'gradientColor')"
+                    >
+                    </el-color-picker>
+                  </div>
                 </div>
               </div>
 
@@ -1102,13 +1112,21 @@
             id:0,
             name:'X'
           },
+          {
+            id:2,
+            name:'↑'
+          },
+          {
+            id:4,
+            name:'↓'
+          },
           {
             id:1,
             name:'→'
           },
           {
-            id:2,
+            id:3,
-            name:'↑'
+            name:'←'
           }
         ],
         penDash:[
@@ -1360,13 +1378,28 @@
         this.onChange();
       },
       bkTypeChange(val){
-
+        // console.log(val);
-        if(!this.selection.pen.gradientToColor&&val){
+        this.selection.pen.data.gradientType=val;
-          this.selection.pen.gradientToColor='#bae7ff'
+        this.$forceUpdate()
+        console.log(this.selection.pen.gradientType,this.selection.pen.data.gradientType);
+        if(val===0){
+          this.selection.pen.bkType=0;
         }
-        if(!this.selection.pen.gradientFromColor&&val){
+
-          this.selection.pen.gradientFromColor='#c6ebb4'
+        if(val===1 || val===3){
-          this.selection.pen.fillStyle='#c6ebb4'
+          this.selection.pen.bkType=1;
+        }
+        if(val===2 || val===4){
+          this.selection.pen.bkType=2;
+        }
+
+        if(val===1 || val===2){
+          this.selection.pen.gradientToColor=this.selection.pen.data.gradientColor;
+          this.selection.pen.gradientFromColor=this.selection.pen.fillStyle?this.selection.pen.fillStyle:'#fff';
+        }
+        if(val===3 || val===4){
+          this.selection.pen.gradientFromColor=this.selection.pen.data.gradientColor;
+          this.selection.pen.gradientToColor=this.selection.pen.fillStyle?this.selection.pen.fillStyle:'#fff';
         }
         this.onChange()
       },
@@ -1391,8 +1424,20 @@
         }else{
           this.selection.pen[name]=this.colorRGBtoHex(val);
         }
+        if(name==='gradientColor'){
+          this.selection.pen.data['gradientColor']=this.colorRGBtoHex(val);
+        }
+
         if(name=='fillStyle'){
-          this.selection.pen.gradientFromColor=this.selection.pen.fillStyle;
+          let bktype= this.selection.pen.data.gradientType;
+          if(bktype===1 || bktype===2){
+            this.selection.pen.gradientToColor=this.selection.pen.data.gradientColor;
+            this.selection.pen.gradientFromColor=this.selection.pen.fillStyle?this.selection.pen.fillStyle:'#fff';
+          }
+          if(bktype===3 || bktype===4){
+            this.selection.pen.gradientFromColor=this.selection.pen.data.gradientColor;
+            this.selection.pen.gradientToColor=this.selection.pen.fillStyle?this.selection.pen.fillStyle:'#fff';
+          }
         }
         this.selection.pen.data[name]=this.colorRGBtoHex(val);
         this.onChange();
@@ -1629,6 +1674,9 @@
     width: 24px;
     height: 24px;
   }
+  .color-before-select .el-input__inner{
+    background: rgb(245, 247, 250);
+  }
 </style>
 <style lang="scss" scoped>
   .project-title {
@@ -2047,7 +2095,7 @@
     border-radius: 5px;
     display: flex;
     align-items: center;
-    width: calc(100% - 32px);
+    width: 100%;
     height: 30px;
   }
 
@@ -2070,7 +2118,7 @@
   .color-arrows {
     color: #C0C4CC;
     position: absolute;
-    right: 42px;
+    right: 12px;
   }
 
   .color-arrows .nz-icon {

nezha-fronted/src/components/common/project/L5/services/canvas.js

@@ -254,7 +254,8 @@ export function myTextRect(node) {
 /*自定义图片组件*/
 
 /*自定义立方体*/
-export function myCubec(ctx, node) {//立方体
+export function myCubec(ctx, node) {
+  //立方体
   // ctx.rect(node.rect.x,node.rect.y,node.rect.width,node.rect.height);
   let x=node.rect.x+10,y=node.rect.y+10,w=node.rect.width-20,h=node.rect.height-20;
   

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

@@ -873,6 +873,7 @@
             pen.font.color=selLevel.color.text;
             pen.fillStyle=selLevel.color.fill;
             pen.strokeStyle=selLevel.color.line;
+            pen.bkType=0;
             onChangeAnimate(pen,selLevel.animateType,selLevel.color.fill,selLevel.color.line);
           }else if(pen.type===1){// 判断valueMapping 给相应的状态
             let selLevel=pen.data.valueMapping.find(item=>item.level===maxLevel);
@@ -1136,6 +1137,8 @@
               animatePlay:false,
               fillStyle:data.fillStyle,
               strokeStyle:data.strokeStyle,
+              gradientColor:"#bae7ff",
+              gradientType:0,
               lineWidth:this.nodeDefaultWidth(data.name),
               iconToolState:true,
               //chart 配置项
@@ -1660,6 +1663,20 @@
               item.strokeStyle=item.data.strokeStyle;
               item.animatePlay=false;
               item.font.color="#000000";
+              item.gradientType=item.data.gradientType?item.data.gradientType:0;
+              if(!item.data.gradientColor){
+                item.data.gradientType=0;
+                item.data.gradientColor="#bae7ff";
+              }
+              if(item.data.gradientType===0){
+                item.bkType=0;
+              }
+              if(item.data.gradientType===1 ||item.data.gradientType===3){
+                item.bkType=1;
+              }
+              if(item.data.gradientType===2 ||item.data.gradientType===4){
+                item.bkType=2;
+              }
             }else if(item.type===1){
               item.animateColor=item.data.animateColor;
               item.strokeStyle=item.data.strokeStyle;

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

@@ -873,6 +873,7 @@
             pen.font.color=selLevel.color.text;
             pen.fillStyle=selLevel.color.fill;
             pen.strokeStyle=selLevel.color.line;
+            pen.bkType=0;
             onChangeAnimate(pen,selLevel.animateType,selLevel.color.fill,selLevel.color.line);
           }else if(pen.type===1){// 判断valueMapping 给相应的状态
             let selLevel=pen.data.valueMapping.find(item=>item.level===maxLevel);
@@ -1126,9 +1127,6 @@
           })
         }
         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);
-          // }
           if(data.type===0&& !data.data.moduleId){
             data.data={
               ...data.data,
@@ -1139,6 +1137,8 @@
               animatePlay:false,
               fillStyle:data.fillStyle,
               strokeStyle:data.strokeStyle,
+              gradientColor:"#bae7ff",
+              gradientType:0,
               lineWidth:this.nodeDefaultWidth(data.name),
               iconToolState:true,
               //chart 配置项
@@ -1281,7 +1281,7 @@
             case 'node':
             case 'addNode':
               this.modulesDiff(data);
-              if(data.data.expressArr.length===0){
+              if(data.data.expressArr.length===0&&event!=='node'){
                 data.data.expressArr.push('');
                 data.data.legends.push('');
               }
@@ -1663,6 +1663,20 @@
               item.strokeStyle=item.data.strokeStyle;
               item.animatePlay=false;
               item.font.color="#000000";
+              item.gradientType=item.data.gradientType?item.data.gradientType:0;
+              if(!item.data.gradientColor){
+                item.data.gradientType=0;
+                item.data.gradientColor="#bae7ff";
+              }
+              if(item.data.gradientType===0){
+                item.bkType=0;
+              }
+              if(item.data.gradientType===1 ||item.data.gradientType===3){
+                item.bkType=1;
+              }
+              if(item.data.gradientType===2 ||item.data.gradientType===4){
+                item.bkType=2;
+              }
             }else if(item.type===1){
               item.animateColor=item.data.animateColor;
               item.strokeStyle=item.data.strokeStyle;