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

fix：修改 下拉框被遮盖的问题

Browse Source
This commit is contained in:
zhangyu
2021-02-23 10:20:35 +08:00
parent 6acf8e56df
commit a7a016dc0c
5 changed files with 92 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
nezha-fronted/src/components/common/language/cn.js
View File

@@ -978,7 +978,6 @@ const cn = {
description: "描述" description: "描述"
}, },
topology:{ topology:{
line:'线',
module:'模块', module:'模块',
add:'添加', add:'添加',
selTwoNode:'请选择两个模块', selTwoNode:'请选择两个模块',
@@ -1008,7 +1007,6 @@ const cn = {
alert:'告警信息', alert:'告警信息',
lineType:'线型', lineType:'线型',
straight:'直线', straight:'直线',
curve:'曲线',
upload:'上传文件', upload:'上传文件',
requiredName:'名称不能为空', requiredName:'名称不能为空',
imgFormat:'上传图片只能是 JPG/png 格式!', imgFormat:'上传图片只能是 JPG/png 格式!',
@@ -1030,6 +1028,7 @@ const cn = {
bac:'背景', bac:'背景',
bacImage:'背景图片', bacImage:'背景图片',
defaultLineWidth:'默认线宽', defaultLineWidth:'默认线宽',
defaultLineType:'默认连线类型',
lineWidth:'线条宽度', lineWidth:'线条宽度',
grids:'网格', grids:'网格',
gridSize:'网格大小', gridSize:'网格大小',
@@ -1048,6 +1047,7 @@ const cn = {
gradient:'渐变', gradient:'渐变',
lineStyle:'线条样式', lineStyle:'线条样式',
lineColor:'线条颜色', lineColor:'线条颜色',
lineDash:'线条虚实',
fromArrow:"起点箭头", fromArrow:"起点箭头",
toArrow:"终点箭头", toArrow:"终点箭头",
arrowColor:"箭头颜色", arrowColor:"箭头颜色",
@@ -1065,6 +1065,9 @@ const cn = {
beads:'水珠流动', beads:'水珠流动',
dot:'圆点', dot:'圆点',
comet:'彗星', comet:'彗星',
curve:'曲线',
polyline:'折线',
line:'直线',
}, },
}, },
date:{ date:{

9
nezha-fronted/src/components/common/language/en.js
View File

@@ -983,7 +983,6 @@ const en = {
description: 'Description'//'描述' description: 'Description'//'描述'
}, },
topology:{ topology:{
line:'Line',
module:'Module element', module:'Module element',
add:'Add', add:'Add',
selTwoNode:'Please select two module', selTwoNode:'Please select two module',
@@ -1013,7 +1012,6 @@ const en = {
alert:'Alert Message', alert:'Alert Message',
lineType:'Line type', lineType:'Line type',
straight:'straight', straight:'straight',
curve:'curve',
upload:'upload', upload:'upload',
requiredName:'The name of the required', requiredName:'The name of the required',
imgFormat:'Upload picture can only be JPG/ PNG format!', imgFormat:'Upload picture can only be JPG/ PNG format!',
@@ -1034,7 +1032,8 @@ const en = {
name:'Name', name:'Name',
bac:"Background", bac:"Background",
bacImage:'Background image', bacImage:'Background image',
defaultLineWidth:'Default lineWidth', defaultLineWidth:'Default line width',
defaultLineType:'Default line type',
lineWidth:'Line width', lineWidth:'Line width',
grids:'Grids', grids:'Grids',
gridSize:'Grid Size', gridSize:'Grid Size',
@@ -1053,6 +1052,7 @@ const en = {
gradient:'Gradient', gradient:'Gradient',
lineStyle:'Line dash', lineStyle:'Line dash',
lineColor:'Line color', lineColor:'Line color',
lineDash:'lineDash',
fromArrow:"From arrow", fromArrow:"From arrow",
toArrow:"To arrow", toArrow:"To arrow",
arrowColor:"Arrow color", arrowColor:"Arrow color",
@@ -1070,6 +1070,9 @@ const en = {
beads:'beads', beads:'beads',
dot:'dot', dot:'dot',
comet:'comet', comet:'comet',
curve:'curve',
polyline:'polyline',
line:'line',
}, },
}, },
date:{ date:{

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

@@ -13,7 +13,7 @@
<!--module--> <!--module-->
<el-form-item label="Module" prop="moduleId" v-if="!selection.pen.type" class="half-form-item"> <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" <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 <el-option
v-for="item in modules" v-for="item in modules"
:key="item.id" :key="item.id"
@@ -273,7 +273,7 @@
<!--</div>--> <!--</div>-->
<!--</el-collapse-item>--> <!--</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="flex flex-warp">
<div class="props-pen-item"> <div class="props-pen-item">
<div>{{$t('project.topology.circularBead')}}（0 - 1）</div> <div>{{$t('project.topology.circularBead')}}（0 - 1）</div>
@@ -346,7 +346,7 @@
> >
</el-color-picker> </el-color-picker>
<el-select v-model="selection.pen.bkType" size="small" <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" <el-option v-for="(item,index) in bkTypeOption" :value="item.id" :key="index"
:label="item.name"> :label="item.name">
</el-option> </el-option>
@@ -377,7 +377,7 @@
<div class="props-pen-item special-select"> <div class="props-pen-item special-select">
<div>{{$t('project.topology.lineDash')}}</div> <div>{{$t('project.topology.lineDash')}}</div>
<div class="p10 pl0"> <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"> @change="onChange">
<div slot="prefix"> <div slot="prefix">
<div class="icon-item"> <div class="icon-item">
@@ -407,7 +407,7 @@
<div class="props-pen-item special-select" v-if="selection.pen&&selection.pen.type"> <div class="props-pen-item special-select" v-if="selection.pen&&selection.pen.type">
<div>{{$t('project.topology.lineType')}}</div> <div>{{$t('project.topology.lineType')}}</div>
<div class="p10 pl0"> <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"> @change="onClickName">
<div slot="prefix"> <div slot="prefix">
<div class="icon-item"> <div class="icon-item">
@@ -438,7 +438,7 @@
<div>{{$t('project.topology.fromArrow')}}</div> <div>{{$t('project.topology.fromArrow')}}</div>
<div class="p10 pl0"> <div class="p10 pl0">
<el-select v-model="selection.pen.fromArrow" size="small" <el-select v-model="selection.pen.fromArrow" size="small"
:popper-append-to-body="false" @change="onClickFromArrow"> @change="onClickFromArrow">
<div slot="prefix"> <div slot="prefix">
<div class="icon-item"> <div class="icon-item">
<svg> <svg>
@@ -487,7 +487,7 @@
<div>{{$t('project.topology.toArrow')}}</div> <div>{{$t('project.topology.toArrow')}}</div>
<div class="p10 pl0"> <div class="p10 pl0">
<el-select v-model="selection.pen.toArrow" size="small" <el-select v-model="selection.pen.toArrow" size="small"
:popper-append-to-body="false" @change="onClickToArrow"> @change="onClickToArrow">
<div slot="prefix"> <div slot="prefix">
<div class="icon-item"> <div class="icon-item">
<svg> <svg>
@@ -618,7 +618,7 @@
<el-select <el-select
v-model="selection.pen.animateType" v-model="selection.pen.animateType"
size="small" size="small"
:popper-append-to-body="false"
> >
<el-option v-for="(item,index) in nodeAnimateOptions" :value="item.id" :key="index" <el-option v-for="(item,index) in nodeAnimateOptions" :value="item.id" :key="index"
:label="item.name"></el-option> :label="item.name"></el-option>
@@ -630,7 +630,7 @@
<label>{{$t('project.topology.animationType')}}</label> <label>{{$t('project.topology.animationType')}}</label>
<div class="full pr10"> <div class="full pr10">
<el-select v-model="selection.pen.animateType" size="small" <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" <el-option v-for="(item,index) in lineAnimateOptions" :value="item.id" :key="index"
:label="item.name"></el-option> :label="item.name"></el-option>
</el-select> </el-select>
@@ -809,7 +809,7 @@
<label>{{$t('project.topology.defaultStartArrow')}}</label> <label>{{$t('project.topology.defaultStartArrow')}}</label>
<div class="full pr10 h32"> <div class="full pr10 h32">
<el-select v-model="topologyData.data.fromArrow" size="small" <el-select v-model="topologyData.data.fromArrow" size="small"
:popper-append-to-body="false"
@change="changeTopologyOpt(topologyData.data.fromArrow,'fromArrow')"> @change="changeTopologyOpt(topologyData.data.fromArrow,'fromArrow')">
<div slot="prefix"> <div slot="prefix">
<div class="icon-item"> <div class="icon-item">
@@ -859,7 +859,7 @@
<label>{{$t('project.topology.defaultEndArrow')}}</label> <label>{{$t('project.topology.defaultEndArrow')}}</label>
<div class="full pr10 h32"> <div class="full pr10 h32">
<el-select v-model="topologyData.data.toArrow" size="small" <el-select v-model="topologyData.data.toArrow" size="small"
:popper-append-to-body="false"
@change="changeTopologyOpt('toArrow')"> @change="changeTopologyOpt('toArrow')">
<div slot="prefix"> <div slot="prefix">
<div class="icon-item"> <div class="icon-item">
@@ -1120,7 +1120,7 @@
{d:'M5 14 a100,50 0 0,1 85,0',"stroke-dasharray":"",name:'curve'}, {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 8 l40 0 l0 12 l40 0',"stroke-dasharray":"",name:'polyline'},
{d:'M5 14 l85 0',"stroke-dasharray":"",name:'line'}, {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:[ penLineFromTOArrow:[
{d:'M5 14 l85 0',"points":"",fill:'',stroke:"",'stroke-width':"",name:''}, {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.toArrowColor=this.colorRGBtoHex(val);
this.selection.pen.data['fromArrowColor']=this.colorRGBtoHex(val); this.selection.pen.data['fromArrowColor']=this.colorRGBtoHex(val);
this.selection.pen.data['toArrowColor']=this.colorRGBtoHex(val); this.selection.pen.data['toArrowColor']=this.colorRGBtoHex(val);
this.selection.pen.data['arrowColor']=this.colorRGBtoHex(val);
}else{ }else{
this.selection.pen[name]=this.colorRGBtoHex(val); this.selection.pen[name]=this.colorRGBtoHex(val);
} }
@@ -1600,6 +1601,15 @@
border-radius: 0 0 5px 5px; border-radius: 0 0 5px 5px;
border-top: none; border-top: none;
} }
.icon-item {
width: 75%;
height: 100%;
padding-left: 25%;
}
.icon-item svg {
width: 180px;
height: 100%;
}
</style> </style>
<style lang="scss" scoped> <style lang="scss" scoped>
.project-title { .project-title {

19
nezha-fronted/src/components/common/project/L5/topologyTopTool.vue
View File

@@ -1,8 +1,8 @@
<template> <template>
<div class="tool-top" id="tool-top"> <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="undo" :class="['top-tool-item',]" @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 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>--> <!--<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" @click="fitView"> 自适应</div>-->
<!--<div :class="['top-tool-item',toolShow.node?'tool-item-active':'']" @click="toolShowChange('node')"> 节点工具 </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>--> <!--<div :class="['top-tool-item',toolShow.attr?'tool-item-active':'']" @click="toolShowChange('attr')"> 属性工具 </div>-->
@@ -123,11 +123,18 @@
}, },
undo(){//撤销 undo(){//撤销
getTopology(this.index).undo(); getTopology(this.index).undo();
setTimeout(()=>{ console.log(getTopology(this.index).caches.index);
this.redoFlag=true; // if(!this.redoFlag){
},200) // this.$emit('redoIndexChange',getTopology(this.index).caches.index)
// }
// let a = getTopology(this.index).undo();
// console.log(a);
// setTimeout(()=>{
// this.redoFlag=true;
// },200)
}, },
redo(){//重做 redo(){//重做
console.log(getTopology(this.index))
getTopology(this.index).redo(); getTopology(this.index).redo();
}, },
centerView(){//居中显示 centerView(){//居中显示

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

@@ -63,7 +63,7 @@
:popper-append-to-body="false" :popper-append-to-body="false"
@change="changeTopologyOpt(lineName,'lineName')"> @change="changeTopologyOpt(lineName,'lineName')">
<div slot="prefix"> <div slot="prefix">
<div class="icon-item"> <div class="icon-item" style="width: 100%;padding: 0">
<svg> <svg>
<g fill="none" stroke="black" stroke-width="1"> <g fill="none" stroke="black" stroke-width="1">
<path <path
@@ -74,14 +74,15 @@
</svg> </svg>
</div> </div>
</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"> <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> <svg>
<g fill="none" :stroke="(lineName==item.name)?'#ee9d3f':'black'" stroke-width="1"> <g fill="none" :stroke="(lineName==item.name)?'#ee9d3f':'black'" stroke-width="1">
<path :d="item.d" :stroke-dasharray="item['stroke-dasharray']"></path> <path :d="item.d" :stroke-dasharray="item['stroke-dasharray']"></path>
</g> </g>
</svg> </svg>
<span style="position: absolute;left:60px;top: 0;">{{item.name}}</span>
</div> </div>
</el-option> </el-option>
</el-select> </el-select>
@@ -97,6 +98,7 @@
ref="topTool" ref="topTool"
@toolShowChange="toolShowChange" @toolShowChange="toolShowChange"
:cachesIndex="cachesIndex" :cachesIndex="cachesIndex"
:redoIndexChange="redoIndexChange"
:toolShow="toolShow"> :toolShow="toolShow">
</topology-top-tool> </topology-top-tool>
@@ -387,6 +389,7 @@
name:'', name:'',
}, },
saveData:{}, saveData:{},
redoIndex:0,
dataLength:0, dataLength:0,
editTopologyFlag:false, editTopologyFlag:false,
searchTime: bus.getTimezontDateRange(), searchTime: bus.getTimezontDateRange(),
@@ -448,9 +451,9 @@
chartData:{}, chartData:{},
chartGetData:[], chartGetData:[],
penLineType:[ penLineType:[
{d:'M5 19 a50,100 0 0,1 40,0',"stroke-dasharray":"",name:'curve'}, {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:'polyline'}, {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:'line'}, {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'}, // {d:'M5 20 C0,8 50,0 85,0',"stroke-dasharray":"",name:'mind'},
], ],
lineName:'curve', lineName:'curve',
@@ -1163,15 +1166,8 @@
}, },
onMessage(event,data,e){ onMessage(event,data,e){
// console.log('onMessage',event,data); console.log('onMessage',event);
// console.log(getTopology(this.topologyIndex)) // 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(!Array.isArray(data)&&data){//判断不是数组 提前个data配置好节点属性
// if(data.type===0){ // if(data.type===0){
// data.textRect=new Rect(data.rect.ex-10,data.rect.ey-10,data.rect.width,data.rect.height); // 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){ }else if(data.type==1&& !data.data){
//连线是否自动计算锚点 //连线是否自动计算锚点
// data.manualCps=true; // data.manualCps=true;
data.animateColor='#FA901C';
data.data={ data.data={
animatePlay:false, animatePlay:false,
strokeStyle:data.strokeStyle, strokeStyle:data.strokeStyle,
animateColor:data.animateColor, animateColor:data.animateColor,
arrowColor:data.arrowColor, arrowColor:"#00000",
fromArrowColor:data.fromArrowColor, fromArrowColor:"#00000",
toArrowColor:data.toArrowColor, toArrowColor:"#00000",
lineWidth:1, lineWidth:1,
//chart 配置项 //chart 配置项
valueMapping:[{ valueMapping:[{
@@ -1248,12 +1245,12 @@
moduleName:'', moduleName:'',
url:'', url:'',
}; };
data.animateColor='#FA901C'
} }
if(data.type===0||data.type===1){ if(data.type===0||data.type===1){
data.lineWidth=data.data.lineWidth; data.lineWidth=data.data.lineWidth;
} }
} }
switch(event){ switch(event){
case 'moveInNode': case 'moveInNode':
case 'moveInLine': case 'moveInLine':
@@ -1307,6 +1304,26 @@
} }
// 右侧输入框编辑状态时点击编辑区域其他元素，onMessage执行后才执行onUpdateProps方法，通过setTimeout让onUpdateProps先执行 // 右侧输入框编辑状态时点击编辑区域其他元素，onMessage执行后才执行onUpdateProps方法，通过setTimeout让onUpdateProps先执行
setTimeout(()=>{ 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){ switch(event){
case 'node': case 'node':
case 'addNode': case 'addNode':
@@ -1703,8 +1720,8 @@
item.animateColor=item.data.animateColor; item.animateColor=item.data.animateColor;
item.strokeStyle=item.data.strokeStyle; item.strokeStyle=item.data.strokeStyle;
item.arrowColor=item.data.arrowColor; item.arrowColor=item.data.arrowColor;
item.fromArrowColor=item.data.fromArrowColor; item.fromArrowColor=item.data.arrowColor;
item.toArrowColor=item.data.toArrowColor; item.toArrowColor=item.data.arrowColor;
item.animatePlay=false; item.animatePlay=false;
item.font.color="#000000"; item.font.color="#000000";
} }
@@ -1713,6 +1730,11 @@
this.toolShow.attrCord=[domRect.width-350,0]; this.toolShow.attrCord=[domRect.width-350,0];
this.toolShow.height=domRect.height; this.toolShow.height=domRect.height;
getTopology(this.topologyIndex).canvasPos=domRect; 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; return false;
}, },
redoIndexChange(index){
console.log(index);
this.redoIndex=index
}
}, },
destroyed(){ destroyed(){
getTopology(this.topologyIndex).destroy(); getTopology(this.topologyIndex).destroy();