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

feat：保存 编辑 新建module时 刷新拓扑图

Browse Source
This commit is contained in:
zhangyu
2020-09-03 14:31:21 +08:00
parent f77a003fe5
commit 6e79d1ece0
6 changed files with 79 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -58,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 + 5*(1-zoom*1))+'px',transform:'scale('+zoom+')'}"
:style="{top:(item.y- 80 + 5*(10-zoom*10))+'px',left:(item.x-26 + 5*(1-zoom))+'px',transform:'scale('+zoom+')'}"
:ref="'modelTopId'+index"
@mousedown="modelTopClick(item,index)"
>
@@ -273,7 +273,7 @@
let nodes=this.formatNodes([...this.nodesArray]);
let edges=this.formatEdges([...this.edgesArray]);
this.$put('/project/topo',{topo:JSON.stringify({nodes:nodes,lines:edges,viewsCenter:this.viewsCenter,zoom:this.zoom}),projectId:this.allModuleInfo.basic.id}).then(res=>{
if(res.code==200){
if(res.code===200){
this.$message({
message: this.$t("tip.saveSuccess"),
type: 'success'
@@ -602,6 +602,7 @@
},
//工具栏点击后显示对应内容
popDataShowUpdate(key){
// console.log(key);
this.popDataShow={
endpoint:false,
asset:false,
@@ -612,6 +613,7 @@
main:false,
};
if(key&&!this.editVisNetwork){
// console.log(this.lineData);
if(key==='total'&&this.selNodeId){
this.totalId=this.selNodeId;
this.totalArray=this.nodesArray;
@@ -620,7 +622,9 @@
this.totalId=this.lineData.id;
this.totalArray=this.edgesArray;
}
this.$nextTick(()=>{
this.popDataShow[key]=true;
})
}
},
//拓扑图放大缩小
@@ -645,9 +649,12 @@
setTimeout(()=>{
let this_=this;
this.init('modal');
this.network.on("click", function () {
this.network.on("click", function (params) {
console.log(params);
this_.networkPopClose();
if(!params.edges.length&&!params.nodes.length){
this_.popDataShowUpdate();
}
});
this.network.on("selectNode", function (params) { //选择节点
@@ -677,15 +684,18 @@
this.network.on("selectEdge", function (params) { // 选择边
this_.selNodeId='';
this_.lineData=this_.edgesArray.find((item)=>item.id===params.edges[0]);
if(this_.editVisNetwork){
this_.lineData.color=this_.lineData.color.color?this_.lineData.color.color:this_.lineData.color;
this_.addLineShow=true;
this_.isLineAdd=false;
}
if(!this_.editVisNetwork){
console.log(this_.lineData);
if(this_.lineData.expressions&&this_.lineData.expressions.length){
this_.popDataShowUpdate('total')
}else{
this_.popDataShowUpdate()
}
if(this_.editVisNetwork){
this_.lineData.color=this_.lineData.color.color?this_.lineData.color.color:this_.lineData.color;
this_.addLineShow=true;
this_.isLineAdd=false;
}
// this_.lineData.color=this_.lineData.color.color;
// this_.addLineShow=true;
@@ -704,9 +714,9 @@
// }
});
this.network.on("dragging", function (params,event) {//节点移动中
this.network.on("dragging", function () {//节点移动中
this_.viewsCenter=this_.network.getViewPosition();
let selId=params.nodes[0];
// let selId=params.nodes[0];
if(this_.selNodeId){
this_.setNodePosition(this_.selNodeId)
}
@@ -720,7 +730,7 @@
this_.selNodeArrUpdate();
});
this.network.on("dragEnd", function (params) {//节点移动结束
this.network.on("dragEnd", function () {//节点移动结束
this_.viewsCenter=this_.network.getViewPosition();
if(this_.selNodeId){
this_.setNodePosition(this_.selNodeId)
@@ -735,18 +745,18 @@
this_.selNodeArrUpdate();
});
this.network.on("hoverNode", function (params) {//hoverNode
this.network.on("hoverNode", function () {//hoverNode
this_.cursorMove=true;
});
this.network.on("blurNode", function (params) {//blurNode
this.network.on("blurNode", function () {//blurNode
this_.cursorMove=false;
});
this.network.on("hoverEdge", function (params) {//hoverNode
this.network.on("hoverEdge", function () {//hoverNode
this_.cursorMove=true;
});
this.network.on("blurEdge", function (params) {//blurNode
this.network.on("blurEdge", function () {//blurNode
this_.cursorMove=false;
});
@@ -759,14 +769,14 @@
}
return false
});
this.network.on("resize", function (params) {//检测resize
this.network.on("resize", function () {//检测resize
setTimeout(()=>{
this_.modelTopUpdate();
this_.selNodeArrUpdate();
if(this_.networkPopShow){
this_.setPopPosition(this_.selNodeId);
}
})
});
return false
});
})
@@ -813,7 +823,7 @@
}
.nz-icon.noMove{
position: absolute;
top: 0px;
top: 0;
left: 14px;
font-size: 20px;
color: #27c09c;
@@ -831,29 +841,29 @@
.network-pop .nz-icon-hexagonBorder:hover .noMove{
transform: scale(1.1);
}
.btmTriangle{
position: absolute;
width: 0;
height: 0;
border-width: 10px;
border-style: solid;
border-color:#e6e6e6 transparent transparent transparent;
bottom: -20px;
left: 50%;
transform: translateX(-50%);
}
.btmTriangle:after{
content: '';
display:block;
width:0;
height:0;
border-width: 10px;
border-style:solid;
border-color:#fff transparent transparent transparent;
position:absolute;
bottom: -7px;
left: -9px;
}
/*.btmTriangle{*/
/*position: absolute;*/
/*width: 0;*/
/*height: 0;*/
/*border-width: 10px;*/
/*border-style: solid;*/
/*border-color:#e6e6e6 transparent transparent transparent;*/
/*bottom: -20px;*/
/*left: 50%;*/
/*transform: translateX(-50%);*/
/*}*/
/*.btmTriangle:after{*/
/*content: '';*/
/*display:block;*/
/*width:0;*/
/*height:0;*/
/*border-width: 10px;*/
/*border-style:solid;*/
/*border-color:#fff transparent transparent transparent;*/
/*position:absolute;*/
/*bottom: -7px;*/
/*left: -9px;*/
/*}*/
#network_id,.network-null{
width: 100%;
height: 100%;
@@ -871,10 +881,6 @@
margin-bottom: 24px;
cursor: pointer;
}
.network-null .nz-icon-emptypage{
color: #23BF9A;
font-size: 24px;
}
.cursorMove{
cursor: move;
}
@@ -924,7 +930,7 @@
top: -60px;
}
.sel-node-right {
width: 0px;
width: 0;
height: 120px;
border-right: 4px dashed yellow;
position: absolute;
@@ -940,7 +946,7 @@
top: 60px;
}
.sel-node-left {
width: 0px;
width: 0;
height: 120px;
border-left: 4px dashed yellow;
position: absolute;

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

@@ -232,10 +232,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;
})
},
formatNodesArr(arr){
@@ -247,6 +245,9 @@
arr.forEach((item,index)=>{
item.shape='image';
item.id=item.moduleId;
if(this.allModuleInfo.module){
item.label=this.allModuleInfo.module.find(item1=>item1.id===item.id).name;
}
this.dealImg(`/project/topo/icon/${item.iconId}`).then((data)=>{
item.image=data;
if(index===arr.length-1){
@@ -267,7 +268,7 @@
let arr1=[];
if(!arr){return arr1}
arr.forEach((item)=>{
item.dashes=[15,15];
item.dashes=[5,5];
item.from=item.source;
item.to=item.target;
item.label=item.name;

2
nezha-fronted/src/components/common/rightBox/editEndpointBox.vue
View File

@@ -308,7 +308,6 @@
if (response.code === 200) {
this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
this.esc(true);
this.$emit('visNetworkReload');
} else {
this.$message.error(response.msg);
}
@@ -329,7 +328,6 @@
this.$delete("endpoint?ids=" + this.editEndpoint.id).then(response => {
if (response.code === 200) {
this.$message({duration: 1000, type: 'success', message: this.$t("tip.deleteSuccess")});
this.$emit('visNetworkReload');
this.esc(true);
} else {
this.$message.error(response.msg);

3
nezha-fronted/src/components/common/rightBox/moduleBox.vue
View File

@@ -520,6 +520,7 @@
this.$put('module', this.editModule).then(response => {
if (response.code === 200) {
this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
this.$store.commit('setReloadFacade');
this.esc(true);
} else {
this.$message.error(response.msg);
@@ -529,6 +530,7 @@
this.$post('module', this.editModule).then(response => {
if (response.code === 200) {
this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
this.$store.commit('setReloadFacade');
this.esc(true);
} else {
this.$message.error(response.msg);
@@ -550,6 +552,7 @@
this.$delete("module?ids=" + this.editModule.id).then(response => {
if (response.code === 200) {
this.$message({duration: 1000, type: 'success', message: this.$t("tip.deleteSuccess")});
this.$store.commit('setReloadFacade');
this.esc(true);
} else {
this.$message.error(response.msg);

7
nezha-fronted/src/components/page/project/project.vue
View File

@@ -126,7 +126,7 @@
</template>
<template v-else-if="pageType == 'project'">
<!--<panel-tab from="project" :obj="currentProject" targetTab.sync="panel"></panel-tab>-->
<facade :obj="currentProject" targetTab.sync="panel" ref="facade"/>
<facade :obj="currentProject" targetTab.sync="panel" ref="facade" v-if="reloadFacade"/>
</template>
<transition name="el-zoom-in-bottom">
@@ -138,7 +138,7 @@
<add-endpoint-box v-if="rightBox.addEndpoint.show" :current-project="currentProject" :current-module="currentModule" @close="closeAddEndpointRightBox" ref="addEndpointBox"></add-endpoint-box>
</transition>
<transition name="right-box">
<edit-endpoint-box v-if="rightBox.editEndpoint.show" :project="currentProject" :module="currentModule" :endpoint="endpoint" @close="closeEditEndpointRightBox" ref="editEndpointBox" @visNetworkReload="visNetworkReload"></edit-endpoint-box>
<edit-endpoint-box v-if="rightBox.editEndpoint.show" :project="currentProject" :module="currentModule" :endpoint="endpoint" @close="closeEditEndpointRightBox" ref="editEndpointBox"></edit-endpoint-box>
</transition>
</div>
</template>
@@ -631,6 +631,9 @@
return "";
}
},
reloadFacade(){
return this.$store.getters.getReloadFacade
},
},
watch: {
pageType(n) {

11
nezha-fronted/src/store/index.js
View File

@@ -7,7 +7,7 @@ const store = new Vuex.Store({
/* 监听对象变化，用于顶部菜单与底部内容的同步 */
currentProject: {id: "", name: "", remark: ""},
projectListChange: 0,
reloadFacade:true,//重新加载project
showPanel:{
id: 0,
name: '',
@@ -32,6 +32,9 @@ const store = new Vuex.Store({
getProjectFilter(state){
return state.projectFilter
},
getReloadFacade(state){
return state.reloadFacade
},
},
mutations: {
/* 监听对象变化，用于顶部菜单与底部内容的同步 */
@@ -85,6 +88,12 @@ const store = new Vuex.Store({
setProjectFilter(state, data) {
state.projectFilter = data;
},
setReloadFacade(state){
state.reloadFacade=false;
setTimeout(()=>{
state.reloadFacade=true;
})
},
},
actions: {
}