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

feat：保存缩放级别 以及部分国际化

Browse Source
This commit is contained in:
zhangyu
2020-09-03 09:51:50 +08:00
parent f481534c1d
commit 3f1b0923c2
7 changed files with 76 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -887,6 +887,24 @@ const cn = {
type: "类型",
description: "描述"
},
topology:{
line:'线',
module:'组件',
add:'添加',
selTwoNode:'请选择两个组件',
save:'保存',
cancel:'取消',
addLine:'添加连线',
lineName:'连线名称',
width:'宽度',
option:'设置',
arrows:'箭头方向',
color:'颜色',
chartName:'图表名称',
unit:'单位',
addModule:'添加组件',
},
},
el: {
colorpicker: {

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

@@ -932,7 +932,25 @@ const en = {
name: 'Name',//'名称'
type: 'Type',//'类型'
description: 'Description'//'描述'
}
},
topology:{
line:'Line',
module:'Module element',
add:'Add',
selTwoNode:'Please select two module',
save:'save',
cancel:'cancel',
addLine:'Add Line',
lineName:'Line Name',
width:'width',
option:'Option',
arrows:'Arrows',
color:'Color',
chartName:'Name',
unit:'Unit',
addModule:'Add Module',
},
},
...enLocale
}

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

@@ -11,17 +11,17 @@
<!-- end--顶部按钮-->
<!-- begin--标题-->
<div class="right-box-title">Add Line</div>
<div class="right-box-title">{{$t('project.topology.addLine')}}</div>
<!-- end--标题-->
<!-- begin--表单-->
<el-scrollbar class="right-box-form-box">
<el-form class="right-box-form right-box-form-left" ref="form" :model="form" label-width="120px" :rules="rules">
<el-form-item label="Line Name" prop="lineName" class="line-name">
<el-form-item :label="$t('project.topology.lineName')" prop="lineName" class="line-name">
<el-input v-model="form.lineName" size="small"></el-input>
</el-form-item>
<el-row class="form-title">Option</el-row>
<el-form-item label="width" prop="width" class="line-name">
<el-row class="form-title">{{$t('project.topology.option')}}</el-row>
<el-form-item :label="$t('project.topology.width')" prop="width" class="line-name">
<el-input v-model="form.width" size="small"></el-input>
</el-form-item>
<!--<el-form-item label="roundness" class="line-name">-->
@@ -41,7 +41,7 @@
<!--<el-option label="cubicBezier" value="cubicBezier"></el-option>-->
<!--</el-select>-->
<!--</el-form-item>-->
<el-form-item label="箭头方向" prop="arrows" class="arrows">
<el-form-item :label="$t('project.topology.arrows')" prop="arrows" class="arrows">
<el-select v-model="form.arrows" placeholder="" :popper-append-to-body="false" size="small">
<div slot="prefix">
<img v-if="form.arrows=='from'" src="./image/leftArrow.png" />
@@ -55,7 +55,7 @@
<el-option label="" value="0"><img src="./image/noArrow.png" /></el-option>
</el-select>
</el-form-item>
<el-form-item label="color" class="color">
<el-form-item :label="$t('project.topology.color')" class="color">
<div class="color-show" @click="colorPickerClick">
<div class="color-show-left" :style="{background:form.color}"></div>
<span> {{form.color}}</span>
@@ -78,7 +78,7 @@
<el-row>
<template>
<el-col style="width: 120px; padding-right: 20px; text-align: right; color: #666">
Name
{{$t('project.topology.chartName')}}
</el-col>
<el-col style="width: calc(100% - 140px);">
<el-input v-model="name[index-1]" type="text" size="small"></el-input>
@@ -88,7 +88,7 @@
</el-row>
<el-row>
<el-col style="width: 120px; padding-right: 20px; text-align: right; color: #666">
Unit
{{$t('project.topology.unit')}}
</el-col>
<el-col style="width: calc(100% - 120px);">
<el-cascader filterable placeholder="" popper-class="no-style-class unit-popper-class" size="small" style="width: 100%"
@@ -166,7 +166,6 @@
watch:{
lineData:{
handler(n){
console.log(n);
this.form={
arrows:n.arrows,
color:n.color,
@@ -230,11 +229,8 @@
},
mounted(){
// this.addExpression();
console.log(this.lineData,this.$refs['promql-'+(0)]);
if( this.lineData.expressions){
this.lineData.expressions.forEach((item,index)=>{
console.log(this.$refs['promql-'+(index)],'promql-'+( index));
console.log(this.expressions[index]);
this.$refs['promql-'+(index)][0].metricChange(this.expressions[index]);
})
}
@@ -250,7 +246,6 @@
roundness:(Math.random()*8 +1)/10 ,//获取0.1-0.9之间的随机数
type:'curvedCW',
};
console.log(this.expressions);
model.expressions=[];
this.promqlKeys.forEach((item,index)=>{
model.expressions.push({
@@ -260,7 +255,6 @@
"legend": this.legends[index],
})
});
console.log(model);
this.$emit('addLine',model);
}
});

5
nezha-fronted/src/components/common/project/addNode.vue
View File

@@ -67,7 +67,7 @@
<el-row>
<template>
<el-col style="width: 120px; padding-right: 20px; text-align: right; color: #666">
Name
{{$t('project.topology.chartName')}}
</el-col>
<el-col style="width: calc(100% - 140px);">
<el-input v-model="name[index-1]" type="text" size="small"></el-input>
@@ -77,7 +77,7 @@
</el-row>
<el-row>
<el-col style="width: 120px; padding-right: 20px; text-align: right; color: #666">
Unit
{{$t('project.topology.unit')}}
</el-col>
<el-col style="width: calc(100% - 120px);">
<el-cascader filterable placeholder="" popper-class="no-style-class unit-popper-class" size="small" style="width: 100%"
@@ -179,7 +179,6 @@
'form.iconId':{
handler(n){
if(n){
console.log(n);
this.selImage=this.iconArray.find(item=>item.id===n)
}
},

1
nezha-fronted/src/components/common/project/popData/Info.vue
View File

@@ -67,7 +67,6 @@
this.$get('/module',{id:this.moduleId}).then(res=>{
this.loading=false;
this.moduleInfo=res.data.list[0];
console.log(this.moduleInfo,this.projectId);
})
},
methods:{},

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

@@ -2,21 +2,22 @@
<div class="content">
<div class="edit-topology" v-if="editVisNetwork">
<span v-show="!selectNodeTitle&&editVisNetwork" class="edit-topology-module">
Module element :
<span class="edit-topology-add" @click="addModelShow">Add</span>
{{$t('project.topology.module')}} :
<span class="edit-topology-add" @click="addModelShow">{{$t('project.topology.add')}}</span>
<!--<span class="edit-topology-remove" @click="nodeDel">Remove</span>-->
</span>
<span v-show="!selectNodeTitle&&editVisNetwork" class="edit-topologyLine">
Line :
<span class="edit-topology-add" @click="addLineTitleShow">Add</span>
{{$t('project.topology.line')}} :
<span class="edit-topology-add" @click="addLineTitleShow">{{$t('project.topology.add')}}</span>
<!--<span class="edit-topology-remove" @click="lineDel">Remove</span>-->
</span>
<span v-show="!selectNodeTitle&&editVisNetwork" class="edit-topologyLine">
<el-button @click="saveTopology" class="saveTopology">save</el-button>
<el-button @click="cancelTopology" class="cancelTopology">cancel</el-button>
<el-button @click="saveTopology" class="saveTopology">{{$t('project.topology.save')}}</el-button>
<el-button @click="cancelTopology" class="cancelTopology">{{$t('project.topology.cancel')}}</el-button>
</span>
<span class="edit-topology-line-cancel" v-show="selectNodeTitle&&editVisNetwork">Please select two nodes <span class="edit-topologyCancel" @click="closeAddLine">Cancel</span></span>
<span class="edit-topology-line-cancel" v-show="selectNodeTitle&&editVisNetwork"> {{$t('project.topology.selTwoNode')}} <span class="edit-topologyCancel" @click="closeAddLine">{{$t('project.topology.cancel')}}</span></span>
</div>
<div class="edit-topology" v-else></div>
<div class="network" ref="network" v-clickoutside="networkPopClose" @mousedown="(e)=>{modelTopMouseDown(e)}" @mouseup="(e)=>modelTopMouseUp(e)">
<!--拓扑图-->
<div id="network_id" ref="visNetwork" :class="{'cursorMove': cursorMove}"></div>
@@ -57,7 +58,7 @@
<i class="nz-icon nz-icon-shuidi"
v-show="item.show"
v-for="(item,index) in modelTop"
:style="{top:(item.y- 80 + 5*(10-zoom*10))+'px',left:(item.x-26)+'px',transform:'scale('+zoom+')'}"
:style="{top:(item.y- 80 + 5*(10-zoom*10))+'px',left:(item.x-26 + 5*(1-zoom*1))+'px',transform:'scale('+zoom+')'}"
:ref="'modelTopId'+index"
@mousedown="modelTopClick(item,index)"
>
@@ -89,7 +90,7 @@
v-if="addNodeShow"
@addModel="addModel"
:nodeData="nodeData"
@close="addNodeShow=false"
@close="closeAddNode"
@del="nodeDel"
:isAdd="isNodeAdd"
:moduleDataS="moduleDataS"
@@ -359,6 +360,7 @@
type: "curvedCW",
},
selfReferenceSize:40,
arrowStrikethrough:false,
},
layout:{
randomSeed: 666,
@@ -464,7 +466,6 @@
this.addLineShow=false;
if(!edges){return}
let edgesArray =[...this.edgesArray];
console.log(edgesArray,edges);
if(!this.isLineAdd){
edges={...edgesArray.find(item=>item.id===edges.id),...edges};
edgesArray=edgesArray.filter(item=>item.id!==edges.id);
@@ -491,6 +492,10 @@
this.NodeArrShow=false;
this.network.unselectAll();
},
closeAddNode(){
this.addNodeShow=false;
this.arrayDiff();
},
setNodePosition(selId){ // 移动节点后 设置节点坐标
let position = this.network.getPositions([selId]);
let selItem = this.nodesArray.find((item)=>item.id===selId);
@@ -520,7 +525,6 @@
nodeDel(){
let nodesArray=this.nodesArray.filter((item)=>item.id!==this.selNodeId);
let edgesArray=this.edgesArray.filter((item)=>!(item.from===this.selNodeId || item.to===this.selNodeId));
console.log(edgesArray,"edgesArray");
this.selNodeId='';
this.$emit('setTopologyData',nodesArray, edgesArray);
this.setNetworkData(nodesArray, edgesArray);
@@ -528,6 +532,7 @@
this.arrayDiff();
},
nodeEdit(){
this.moduleDataS.module.push(this.allModuleInfos.module.find(item=>item.id===this.selNodeId));
this.addNodeShow=true;
this.isNodeAdd=false;
},
@@ -642,6 +647,7 @@
this.init('modal');
this.network.on("click", function () {
this_.networkPopClose();
this_.popDataShowUpdate();
});
this.network.on("selectNode", function (params) { //选择节点
@@ -671,7 +677,6 @@
this.network.on("selectEdge", function (params) { // 选择边
this_.selNodeId='';
this_.lineData=this_.edgesArray.find((item)=>item.id===params.edges[0]);
console.log(this_.lineData);
if(this_.lineData.expressions&&this_.lineData.expressions.length){
this_.popDataShowUpdate('total')
}else{
@@ -820,6 +825,8 @@
transform: scale(1.1);
left: 4px;
font-size: 41px;
color: #D7FAF1;
top: -1px;
}
.network-pop .nz-icon-hexagonBorder:hover .noMove{
transform: scale(1.1);
@@ -944,6 +951,9 @@
position: absolute;
font-size: 48px;
color: rgba(132,213,194,0.5);
border-radius: 50%;
height: 60px;
width: 38px;
}
.nz-icon-model{
color: #23BF9A;

13
nezha-fronted/src/components/common/project/visNetwork.vue
View File

@@ -38,8 +38,8 @@
{{projectInfo.title}}
</div>
<div>
<span><span class="label">Id :</span>{{projectInfo.id}}</span>
<span><span class="label special">Name :</span>{{projectInfo.name}}</span>
<!--<span><span class="label">Id :</span>{{projectInfo.id}}</span>-->
<span><span class="label">Name :</span>{{projectInfo.name}}</span>
</div>
<div>
<span><span class="label">Description :</span>{{projectInfo.remark?projectInfo.remark:'--'}}</span>
@@ -211,10 +211,8 @@
this.$refs['topology'].setData();
},500)
}
// res.data.topo.viewsCenter?res.data.topo.viewsCenter:
this.$refs['topology'].viewsCenter={x:0,y:0};
// res.data.topo.zoom?res.data.topo.zoom:
this.$refs['topology'].zoom=1;
this.$refs['topology'].viewsCenter=res.data.topo.viewsCenter?res.data.topo.viewsCenter:{x:0,y:0};
this.$refs['topology'].zoom=res.data.topo.zoom?res.data.topo.zoom:1;
})
},
reload(){
@@ -300,6 +298,9 @@
if(flag){
this.$refs.topology.popDataShowUpdate();
}
if(!flag){
// this.reload();
}
}
},