From f030de396e6e47efc0123b027451d23f880deb63 Mon Sep 17 00:00:00 2001 From: zhangyu Date: Wed, 24 Feb 2021 17:48:09 +0800 Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=E6=96=B0=E5=A2=9E=E6=9C=AA?= =?UTF-8?q?=E9=80=89=E6=8B=A9modul=20id=E7=9A=84=E9=80=89=E6=8B=A9?= =?UTF-8?q?=E6=A1=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../common/project/L5/CanvasProps.vue | 3 +- .../components/common/project/topologyL5.vue | 87 +++++++++++++++++-- .../common/project/topologyPrev.vue | 87 +++++++++++++++++-- 3 files changed, 166 insertions(+), 11 deletions(-) diff --git a/nezha-fronted/src/components/common/project/L5/CanvasProps.vue b/nezha-fronted/src/components/common/project/L5/CanvasProps.vue index 97f6ebf9b..8701f1374 100644 --- a/nezha-fronted/src/components/common/project/L5/CanvasProps.vue +++ b/nezha-fronted/src/components/common/project/L5/CanvasProps.vue @@ -1296,7 +1296,8 @@ if(!this.selection.pen.data.title){ this.selection.pen.data.title=this.selection.pen.data.moduleName this.selection.pen.text=this.selection.pen.data.title; - this.onChange() + this.onChange(); + this.$emit('notModuleIDArrChange',this.selection.pen.id); } }, changeTitle(val){ diff --git a/nezha-fronted/src/components/common/project/topologyL5.vue b/nezha-fronted/src/components/common/project/topologyL5.vue index 5cc39ede1..5e80d04df 100644 --- a/nezha-fronted/src/components/common/project/topologyL5.vue +++ b/nezha-fronted/src/components/common/project/topologyL5.vue @@ -208,6 +208,7 @@ @change="onUpdateProps" @animate="animateCanvas" @changeProjectTitle="changeProjectTitle" + @notModuleIDArrChange="notModuleIDArrChange" :index="topologyIndex" @del="delPen" :modules="modules" @@ -243,6 +244,21 @@ + +
+
+
+
+
+
{ getTopology(this.topologyIndex).data.pens.forEach(item=>{ @@ -766,6 +785,15 @@ clearInterval(timer); let promiseArr=[]; let self=this; + for(let i=0;iitem.id===line.from.id) || !data.pens.find(item=>item.id===line.to.id)){ + data.pens.splice(i, 1); + i--; + } + } + } data.pens.forEach((item=>{ if(item.type===0&&item.data.imageId){ item.image=this.iconArray.find(item1=>item1.id==item.data.imageId).image; @@ -1087,8 +1115,16 @@ }, onMessage(event,data,e){ - // console.log('onMessage',event); + console.log('onMessage',event,data); // console.log(getTopology(this.topologyIndex)) + // this.notModuleIDArr=[]; + if(data){ + this.notModuleIDArr.forEach(item=>{ + if(item.id===data.id){ + item.rect=data.rect + } + }) + } if(!Array.isArray(data)&&data){//判断不是数组 提前个data配置好节点属性 // if(data.type===0){ // data.textRect=new Rect(data.rect.ex-10,data.rect.ey-10,data.rect.width,data.rect.height); @@ -1669,15 +1705,34 @@ dataOption[key]=this.lineName; getTopology(this.topologyIndex).render(); }, + notModuleIDArrChange(id){ + console.log(id); + this.notModuleIDArr=this.notModuleIDArr.filter(item=>item.id!==id); + }, //保存 saveTopology(){ let topologyData=getTopology(this.topologyIndex).pureData(); let flag=true; + let arr=[]; + this.notModuleIDArr=[]; topologyData.pens.forEach(item=>{ - if(item.type===0&&((flag&& !item.data)||(flag&&item.data&& !item.data.moduleId))){ + if(item.type===0&&((!item.data)||(item.data&& !item.data.moduleId))){ + arr.push(item); + this.props={ + node:null, + line:null, + multi:false, + nodes:null, + locked:false, + pen:null, + pens:null, + }; flag=false; } }); + if(!flag){ + this.notModuleIDArr=arr; + } if(flag){ this.editTopologyFlag=false; topologyData.rule=false; @@ -1796,7 +1851,9 @@ flag=true } }); - getTopology(this.topologyIndex).centerView(20); + if(this.fromOverView){ + getTopology(this.topologyIndex).centerView(20); + } this.getNodesArr(); },100) }, @@ -2091,7 +2148,27 @@ } } - .network-pop .nz-icon-hexagonBorder { + .moduleIdRect{ + /*border: 4px dashed #FA901C;*/ + } + .module-rect-top{ + border-top: 4px dashed #ff8c0a; + position: absolute; + } + .module-rect-right{ + border-right: 4px dashed #ff8c0a; + position: absolute; + } + .module-rect-bottom{ + border-bottom: 4px dashed #ff8c0a; + position: absolute; + } + .module-rect-left{ + border-left: 4px dashed #ff8c0a; + position: absolute; + } + + .network-pop .nz-icon-hexagonBorder{ position: absolute; font-size: 48px; color: #84d5c2; diff --git a/nezha-fronted/src/components/common/project/topologyPrev.vue b/nezha-fronted/src/components/common/project/topologyPrev.vue index 5010a1f45..ecf523551 100644 --- a/nezha-fronted/src/components/common/project/topologyPrev.vue +++ b/nezha-fronted/src/components/common/project/topologyPrev.vue @@ -208,6 +208,7 @@ @change="onUpdateProps" @animate="animateCanvas" @changeProjectTitle="changeProjectTitle" + @notModuleIDArrChange="notModuleIDArrChange" :index="topologyIndex" @del="delPen" :modules="modules" @@ -243,6 +244,21 @@
+ +
+
+
+
+
+
{ getTopology(this.topologyIndex).data.pens.forEach(item=>{ @@ -766,6 +785,15 @@ clearInterval(timer); let promiseArr=[]; let self=this; + for(let i=0;iitem.id===line.from.id) || !data.pens.find(item=>item.id===line.to.id)){ + data.pens.splice(i, 1); + i--; + } + } + } data.pens.forEach((item=>{ if(item.type===0&&item.data.imageId){ item.image=this.iconArray.find(item1=>item1.id==item.data.imageId).image; @@ -1087,8 +1115,16 @@ }, onMessage(event,data,e){ - // console.log('onMessage',event); + console.log('onMessage',event,data); // console.log(getTopology(this.topologyIndex)) + // this.notModuleIDArr=[]; + if(data){ + this.notModuleIDArr.forEach(item=>{ + if(item.id===data.id){ + item.rect=data.rect + } + }) + } if(!Array.isArray(data)&&data){//判断不是数组 提前个data配置好节点属性 // if(data.type===0){ // data.textRect=new Rect(data.rect.ex-10,data.rect.ey-10,data.rect.width,data.rect.height); @@ -1669,15 +1705,34 @@ dataOption[key]=this.lineName; getTopology(this.topologyIndex).render(); }, + notModuleIDArrChange(id){ + console.log(id); + this.notModuleIDArr=this.notModuleIDArr.filter(item=>item.id!==id); + }, //保存 saveTopology(){ let topologyData=getTopology(this.topologyIndex).pureData(); let flag=true; + let arr=[]; + this.notModuleIDArr=[]; topologyData.pens.forEach(item=>{ - if(item.type===0&&((flag&& !item.data)||(flag&&item.data&& !item.data.moduleId))){ + if(item.type===0&&((!item.data)||(item.data&& !item.data.moduleId))){ + arr.push(item); + this.props={ + node:null, + line:null, + multi:false, + nodes:null, + locked:false, + pen:null, + pens:null, + }; flag=false; } }); + if(!flag){ + this.notModuleIDArr=arr; + } if(flag){ this.editTopologyFlag=false; topologyData.rule=false; @@ -1796,7 +1851,9 @@ flag=true } }); - getTopology(this.topologyIndex).centerView(20); + if(this.fromOverView){ + getTopology(this.topologyIndex).centerView(20); + } this.getNodesArr(); },100) }, @@ -2091,7 +2148,27 @@ } } - .network-pop .nz-icon-hexagonBorder { + .moduleIdRect{ + /*border: 4px dashed #FA901C;*/ + } + .module-rect-top{ + border-top: 4px dashed #ff8c0a; + position: absolute; + } + .module-rect-right{ + border-right: 4px dashed #ff8c0a; + position: absolute; + } + .module-rect-bottom{ + border-bottom: 4px dashed #ff8c0a; + position: absolute; + } + .module-rect-left{ + border-left: 4px dashed #ff8c0a; + position: absolute; + } + + .network-pop .nz-icon-hexagonBorder{ position: absolute; font-size: 48px; color: #84d5c2;