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

feta：添加正序倒序

Browse Source
This commit is contained in:
zhangyu
2021-02-09 16:27:22 +08:00
parent 2943f38981
commit 8df2d9499d
3 changed files with 126 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -146,7 +146,12 @@
<div style="width: 100%;margin-top: 10px">
<div class="thresholds-box">
<el-row class="thresholds-title">
<el-col class="thresholds-cell" :span="4">{{$t('project.topology.level')}}</el-col>
<el-col class="thresholds-cell" :span="4">{{$t('project.topology.level')}}
<span @click="changeValueMappingSort">
<i :class="['nz-icon','nz-icon-arrow-up1',selection.pen.data.valueMappingSort==='desc'?'is-arrow-active':'']"></i>
<i :class="['nz-icon','nz-icon-arrow-down2',selection.pen.data.valueMappingSort==='desc'?'':'is-arrow-active']"></i>
</span>
</el-col>
<el-col class="thresholds-cell" :span="4">{{$t('project.topology.color')}}</el-col>
<el-col class="thresholds-cell" :span="6">{{$t('project.topology.value')}}</el-col>
<el-col class="thresholds-cell" :span="8">{{$t('project.topology.animation')}}</el-col>
@@ -154,7 +159,14 @@
</el-row>
<el-row v-for="(item,index) in selection.pen.data.valueMapping" :key="index">
<el-col class="thresholds-cell" :span="4"> {{item.level}}</el-col>
<el-col class="thresholds-cell" :span="4">
<span v-if="selection.pen.data.valueMappingSort==='desc'">
{{index===0?selection.pen.data.valueMapping.length-1:(item.level-1)}}
</span>
<span v-else>
{{item.level}}
</span>
</el-col>
<el-col class="thresholds-cell" :span="4">
<span v-if="item.level!==0">
<div style="display: inline-block">
@@ -190,14 +202,14 @@
<span v-else>base</span>
</el-col>
<el-col class="thresholds-cell" :span="6" style="display: flex">
<span v-if="item.level!==0" style="display: inline-block;width: 30%;text-align: center"> > </span>
<el-input-number
<el-input
v-if="item.level!==0"
v-model="item.value"
v-model.number="item.value"
@change="valueMappingValueChange(item)"
:controls="false"
size="small"
/>
>
<template slot="prepend"> > </template>
</el-input>
<span v-else>base</span>
</el-col>
<el-col class="thresholds-cell" :span="8">
@@ -867,7 +879,7 @@
<div class="full pr10 h32">
<el-radio-group v-model="topologyData.data.align" size="small" @change="changeTopologyOpt">
<el-radio-button label="left">left</el-radio-button>
<el-radio-button label="bottom">center</el-radio-button>
<el-radio-button label="center">center</el-radio-button>
<el-radio-button label="right">right</el-radio-button>
</el-radio-group>
</div>
@@ -1175,11 +1187,6 @@
name:'',
bkColor:'#FFFFFF',
bkImage:'',
grid:false,
gridSize:'',
gridColor:undefined,
rule:false,
ruleColor:undefined,
lineName:'curve',
lineWidth:1,
fromArrow:'',
@@ -1573,6 +1580,7 @@
}
});
getTopology(this.index).render();
this.$emit('changeProjectTitle')
},
colorRGBtoHex(color){//获取颜色16进制数
if(!color){
@@ -1630,6 +1638,26 @@
}
},
valueMappingAdd(){
if(this.selection.pen.data.valueMappingSort==='desc'){
this.selection.pen.data.valueMapping.push({
color:{
line:'#000000',
fill:'#ffffff',
text:'#000000',
},
showColor:undefined,
animateType:this.selection.pen.type?1:'upDown',
value:0,
level:1,
showType:'fill',//bac text border
});
this.selection.pen.data.valueMapping.forEach((item,index)=>{
if(index===0){
return
}
item.level=this.selection.pen.data.valueMapping.length-index;
})
}else{
this.selection.pen.data.valueMapping.push({
color:{
line:'#000000',
@@ -1642,9 +1670,29 @@
level:this.selection.pen.data.valueMapping.length,
showType:'fill',//bac text border
});
}
},
valueMappingValueChange(index,row){
},
changeValueMappingSort(){
if(this.selection.pen.data.valueMappingSort==='desc'){
this.selection.pen.data.valueMappingSort='asc';
let arr=JSON.parse(JSON.stringify(this.selection.pen.data.valueMapping));
let a=arr.splice(0,1);
arr.reverse();
arr.unshift(a[0]);
this.selection.pen.data.valueMapping=arr;
} else{
this.selection.pen.data.valueMappingSort='desc';
let arr=JSON.parse(JSON.stringify(this.selection.pen.data.valueMapping));
let a=arr.splice(0,1);
arr.reverse();
arr.unshift(a[0]);
console.log(arr);
this.selection.pen.data.valueMapping=arr;
console.log('aaa')
}
},
valueMappingDel(index,row){
this.selection.pen.data.valueMapping.splice(index,1);
@@ -1927,6 +1975,15 @@
padding: 5px 5px;
height: 42px;
line-height: 32px;
/deep/ .el-input-group__prepend{
padding: 0 10px;
}
.is-arrow-active{
color: #FA901C;
}
.nz-icon.nz-icon-arrow-up1{
margin-right: -15px;
}
}
}
.value-mapping-add{

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

@@ -5,7 +5,7 @@
<template>
<div class="project-box" v-loading="topologyLoading" :style="{'border':fromOverView?'none':'1px solid #eeeeee'}">
<!--project主要信息-->
<div class="project-title" v-if="showTopTools&&!fromOverView&&!fromPrev" :style="{'background':editTopologyFlag?'#F6F6F6':'#ffffff','border-bottom':editTopologyFlag? '1px solid #F6F6F6':'' }">
<div class="project-title" v-if="showTopTools&&!fromOverView" :style="{'background':editTopologyFlag?'#F6F6F6':'#ffffff','border-bottom':editTopologyFlag? '1px solid #F6F6F6':'' }">
<div v-show="editTopologyFlag" class="edit-topologyLine" style="padding-left: 20px">
<!--工具栏-->
<span class="project-topology-tool">
@@ -118,8 +118,8 @@
</button>
</span>
</div>
<div style="width: 100%;display: flex;justify-content: space-between">
<div class="facade-top" v-if="!editTopologyFlag&&!fromOverView">
<div style="width: 100%;display: flex;justify-content: space-between" v-if="!editTopologyFlag&&!fromOverView">
<div class="facade-top">
<div class="facade-top-left" v-loading="projectInfo.loading" v-if="projectInfoShow">
<div class="facade-top-title">
Project information
@@ -176,8 +176,8 @@
</div>
</div>
</div>
<div :style="{flex:1,'padding-right': '15px','text-align':topologyInfo.type,'font-size':topologyInfo.fontSize,'color':topologyInfo.fontColor,opacity:topologyInfo.opacity}">{{topologyInfo.name}}</div>
<span class="edit-topologyLine" style="padding-top: 5px" v-show="!editTopologyFlag">
<div :style="{flex:1,'padding-right': '15px','text-align':topologyInfo.align,'font-size':topologyInfo.fontSize,'color':topologyInfo.fontColor,opacity:topologyInfo.opacity}">{{topologyInfo.name}}</div>
<span class="edit-topologyLine" style="padding-top: 5px" v-show="!editTopologyFlag&&!fromPrev&&!fromOverView">
@@ -200,6 +200,7 @@
<CanvasProps :selection.sync="props"
@change="onUpdateProps"
@animate="animateCanvas"
@changeProjectTitle="changeProjectTitle"
:index="topologyIndex"
@del="delPen"
:modules="modules"
@@ -328,7 +329,6 @@
import CanvasContextMenu from './L5//CanvasContextMenu';
import topologyTopTool from './L5//topologyTopTool';
import VueDraggableResizable from 'vue-draggable-resizable';//api https://github.com/mauricius/vue-draggable-resizable
import 'vue-draggable-resizable/dist/VueDraggableResizable.css'
import popDataMain from './popData/Main'
import popDataInfo from './popData/Info'
import TotalChart from "./popData/totalChart";
@@ -1158,6 +1158,7 @@
level:0,
base:true,
}],
valueMappingSort:'asc',
expressArr:[""],
legends:[""],
tooltipShow:true,
@@ -1183,8 +1184,8 @@
//chart 配置项
valueMapping:[{
color:{
border:'#000000',
bac:'#ffffff',
line:'#000000',
fill:'#ffffff',
text:'#000000',
},
value:'base',
@@ -1192,6 +1193,7 @@
level:0,
base:true,
}],
valueMappingSort:'asc',/*desc*/
expressArr:[""],
legends:[""],
tooltipShow:true,
@@ -1732,6 +1734,18 @@
this.topoPrevData.grid=false;
this.previewShow=true;
},
//联动 project
changeProjectTitle(){
let data=getTopology(this.topologyIndex).data;
this.topologyInfo={
fontSize:data.data.fontSize,
align:data.data.align,
fontColor:data.data.fontColor,
opacity:data.data.opacity,
name:data.name
}
},
/*tools 方法*/
winResize(){

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

@@ -5,7 +5,7 @@
<template>
<div class="project-box" v-loading="topologyLoading" :style="{'border':fromOverView?'none':'1px solid #eeeeee'}">
<!--project主要信息-->
<div class="project-title" v-if="showTopTools&&!fromOverView&&!fromPrev" :style="{'background':editTopologyFlag?'#F6F6F6':'#ffffff','border-bottom':editTopologyFlag? '1px solid #F6F6F6':'' }">
<div class="project-title" v-if="showTopTools&&!fromOverView" :style="{'background':editTopologyFlag?'#F6F6F6':'#ffffff','border-bottom':editTopologyFlag? '1px solid #F6F6F6':'' }">
<div v-show="editTopologyFlag" class="edit-topologyLine" style="padding-left: 20px">
<!--工具栏-->
<span class="project-topology-tool">
@@ -118,8 +118,8 @@
</button>
</span>
</div>
<div style="width: 100%;display: flex;justify-content: space-between">
<div class="facade-top" v-if="!editTopologyFlag&&!fromOverView">
<div style="width: 100%;display: flex;justify-content: space-between" v-if="!editTopologyFlag&&!fromOverView">
<div class="facade-top">
<div class="facade-top-left" v-loading="projectInfo.loading" v-if="projectInfoShow">
<div class="facade-top-title">
Project information
@@ -176,8 +176,8 @@
</div>
</div>
</div>
<div :style="{flex:1,'padding-right': '15px','text-align':topologyInfo.type,'font-size':topologyInfo.fontSize,'color':topologyInfo.fontColor,opacity:topologyInfo.opacity}">{{topologyInfo.name}}</div>
<span class="edit-topologyLine" style="padding-top: 5px" v-show="!editTopologyFlag">
<div :style="{flex:1,'padding-right': '15px','text-align':topologyInfo.align,'font-size':topologyInfo.fontSize,'color':topologyInfo.fontColor,opacity:topologyInfo.opacity}">{{topologyInfo.name}}</div>
<span class="edit-topologyLine" style="padding-top: 5px" v-show="!editTopologyFlag&&!fromPrev&&!fromOverView">
@@ -200,6 +200,7 @@
<CanvasProps :selection.sync="props"
@change="onUpdateProps"
@animate="animateCanvas"
@changeProjectTitle="changeProjectTitle"
:index="topologyIndex"
@del="delPen"
:modules="modules"
@@ -328,7 +329,6 @@
import CanvasContextMenu from './L5//CanvasContextMenu';
import topologyTopTool from './L5//topologyTopTool';
import VueDraggableResizable from 'vue-draggable-resizable';//api https://github.com/mauricius/vue-draggable-resizable
import 'vue-draggable-resizable/dist/VueDraggableResizable.css'
import popDataMain from './popData/Main'
import popDataInfo from './popData/Info'
import TotalChart from "./popData/totalChart";
@@ -1158,6 +1158,7 @@
level:0,
base:true,
}],
valueMappingSort:'asc',
expressArr:[""],
legends:[""],
tooltipShow:true,
@@ -1183,8 +1184,8 @@
//chart 配置项
valueMapping:[{
color:{
border:'#000000',
bac:'#ffffff',
line:'#000000',
fill:'#ffffff',
text:'#000000',
},
value:'base',
@@ -1192,6 +1193,7 @@
level:0,
base:true,
}],
valueMappingSort:'asc',/*desc*/
expressArr:[""],
legends:[""],
tooltipShow:true,
@@ -1732,6 +1734,18 @@
this.topoPrevData.grid=false;
this.previewShow=true;
},
//联动 project
changeProjectTitle(){
let data=getTopology(this.topologyIndex).data;
this.topologyInfo={
fontSize:data.data.fontSize,
align:data.data.align,
fontColor:data.data.fontColor,
opacity:data.data.opacity,
name:data.name
}
},
/*tools 方法*/
winResize(){