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

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

@@ -232,10 +232,8 @@
this.$refs['topology'].setData(); this.$refs['topology'].setData();
},500) },500)
} }
// res.data.topo.viewsCenter?res.data.topo.viewsCenter: this.$refs['topology'].viewsCenter=res.data.topo.viewsCenter?res.data.topo.viewsCenter:{x:0,y:0};
this.$refs['topology'].viewsCenter={x:0,y:0}; this.$refs['topology'].zoom=res.data.topo.zoom?res.data.topo.zoom:1;
// res.data.topo.zoom?res.data.topo.zoom:
this.$refs['topology'].zoom=1;
}) })
}, },
formatNodesArr(arr){ formatNodesArr(arr){
@@ -247,6 +245,9 @@
arr.forEach((item,index)=>{ arr.forEach((item,index)=>{
item.shape='image'; item.shape='image';
item.id=item.moduleId; 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)=>{ this.dealImg(`/project/topo/icon/${item.iconId}`).then((data)=>{
item.image=data; item.image=data;
if(index===arr.length-1){ if(index===arr.length-1){
@@ -267,7 +268,7 @@
let arr1=[]; let arr1=[];
if(!arr){return arr1} if(!arr){return arr1}
arr.forEach((item)=>{ arr.forEach((item)=>{
item.dashes=[15,15]; item.dashes=[5,5];
item.from=item.source; item.from=item.source;
item.to=item.target; item.to=item.target;
item.label=item.name; item.label=item.name;

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

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

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

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

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

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