gfwleak/nezha-nezha-fronted
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
zhangyu
2021-02-26 14:49:32 +08:00
parent 94d4654c4b
commit 71254a3fce
4 changed files with 105 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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
v-model="selection.pen.gradientToColor"
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-select v-model="selection.pen.gradientType" size="small"
@change="bkTypeChange" style="width: 60px;border-radius: 4px 0 0 4px;background: #F5F7FA" class="color-before-select">
<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,
name:'↑'
id:3,
name:'←'
}
],
penDash:[
@@ -1360,13 +1378,28 @@
this.onChange();
},
bkTypeChange(val){
if(!this.selection.pen.gradientToColor&&val){
this.selection.pen.gradientToColor='#bae7ff'
// console.log(val);
this.selection.pen.data.gradientType=val;
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'
this.selection.pen.fillStyle='#c6ebb4'
if(val===1 || val===3){
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 {

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

@@ -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;

17
nezha-fronted/src/components/common/project/topologyL5.vue
View File

@@ -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;

22
nezha-fronted/src/components/common/project/topologyPrev.vue
View File

@@ -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;