diff --git a/nezha-fronted/src/components/common/language/cn.js b/nezha-fronted/src/components/common/language/cn.js index a312667c7..aa6de5bdc 100644 --- a/nezha-fronted/src/components/common/language/cn.js +++ b/nezha-fronted/src/components/common/language/cn.js @@ -951,6 +951,7 @@ const cn = { selTwoNode:'请选择两个模块', save:'保存', cancel:'取消', + exit:'退出', preview:'预览', addLine:'添加连线', editLine:'编辑连线', diff --git a/nezha-fronted/src/components/common/language/en.js b/nezha-fronted/src/components/common/language/en.js index 57eccb3ba..adb6be501 100644 --- a/nezha-fronted/src/components/common/language/en.js +++ b/nezha-fronted/src/components/common/language/en.js @@ -957,6 +957,7 @@ const en = { selTwoNode:'Please select two module', save:'save', cancel:'cancel', + exit:'exit', preview:'preview', addLine:'Add line', editLine:'Edit line', diff --git a/nezha-fronted/src/components/common/project/L5/CanvasProps.vue b/nezha-fronted/src/components/common/project/L5/CanvasProps.vue index 08640b8a5..47822526c 100644 --- a/nezha-fronted/src/components/common/project/L5/CanvasProps.vue +++ b/nezha-fronted/src/components/common/project/L5/CanvasProps.vue @@ -190,7 +190,7 @@ base - > + > { - console.log() - this.topologyData.data[key]=(JSON.stringify(dataOption[key])?dataOption[key]:this.topologyData.data[key]); + if(key === 'projectInfo' || key === 'alertInfo'){ + this.topologyData.data[key]=(JSON.stringify(dataOption.data[key])?dataOption.data[key]:this.topologyData.data[key]); + } else { + this.topologyData.data[key]=(JSON.stringify(dataOption[key])?dataOption[key]:this.topologyData.data[key]); + } }); }, mounted(){ @@ -1587,7 +1593,11 @@ this.topologyData.data[key]=val; } Object.keys(this.topologyData.data).forEach((key1)=>{ - getTopology(this.index).data[key1]=this.topologyData.data[key1]; + if(key1 === 'projectInfo' || key1 === 'alertInfo'){ + getTopology(this.index).data.data[key1]=this.topologyData.data[key1]; + } else { + getTopology(this.index).data[key1]=this.topologyData.data[key1]; + } }); // console.log(dataOption[key]); getTopology(this.index).render(); diff --git a/nezha-fronted/src/components/common/project/projectFacade.vue b/nezha-fronted/src/components/common/project/projectFacade.vue index 8dfa17ab2..47d093477 100644 --- a/nezha-fronted/src/components/common/project/projectFacade.vue +++ b/nezha-fronted/src/components/common/project/projectFacade.vue @@ -132,22 +132,12 @@ getProjectData(n){ //获取projectInfo this.projectInfo.loading=true; - this.$refs['visNetwork'].topologyLoading=true; this.$get('project/info', {id:n.id}).then(response => { if (response.code === 200) { this.projectInfo.loading=false; this.projectInfo={...this.projectInfo,...response.data.basic,moduleMum:response.data.module.length}; - this.allModuleInfo=response.data; } }); - - //获取所有asset - this.alertData.loading=true; - setTimeout(()=>{ - this.$nextTick(()=>{ - this.alertData.loading=false; - }) - },300) }, focusInput() { let classVal=document.getElementById('queryPanel').parentElement.getAttribute("class"); diff --git a/nezha-fronted/src/components/common/project/topologyL5.vue b/nezha-fronted/src/components/common/project/topologyL5.vue index 96423d6b5..5aecf38e0 100644 --- a/nezha-fronted/src/components/common/project/topologyL5.vue +++ b/nezha-fronted/src/components/common/project/topologyL5.vue @@ -4,8 +4,66 @@ @@ -255,6 +330,7 @@ import topoTooltip from "./L5/topoTooltip"; import {getMetricTypeValue} from '../js/tools' import bus from "../../../libs/bus"; + import topologyL5 from './topologyL5' import axios from 'axios'; const canvasOptions={ @@ -265,8 +341,10 @@ }; let canvas; export default { + name:'topologyL5', data(){ return { + topoPrevData:{},//预览数据 imgInit:false,//判断图片是否加载完成 toolGroup:'基本形状', editFlag:true, @@ -351,6 +429,18 @@ ], lineName:'curve', cachesIndex:0, + projectInfo:{ + title:'', + id:'', + remark:'', + alertStat:[1,2,3], + moduleMum:6, + loading:true, + total:0, + }, + projectInfoShow:false, + projectAlertShow:false, + previewShow:false, }; }, components:{ @@ -366,6 +456,7 @@ endpointTable, ExpressionInfo, topoTooltip, + topologyL5, }, computed:{}, props:{ @@ -381,7 +472,14 @@ fromOverView:{ type:Boolean, default:false, - } + }, + fromPrev:{ + type:Boolean, + default:false, + }, + topoPrevDataS:{ + + }, }, watch:{ topologyIndexF:{ @@ -398,6 +496,11 @@ if(n){ this.editTopologyFlag=false; this.topologyLoading=true; + this.projectInfoShow=false; + this.projectAlertShow=false; + if(n.id){ + this.getProjectData(n); + } if(!this.timer){ this.timer=setTimeout(()=>{ this.topologyLoading=true; @@ -485,6 +588,7 @@ x:this.$refs['topology-canvas'+this.topologyIndexF].offsetWidth, y:this.$refs['topology-canvas'+this.topologyIndexF].offsetHeight, } + getTopology(this.topologyIndex).centerView(50); getTopology(this.topologyIndex).data.pens.forEach(item=>{ if(flag){ @@ -495,6 +599,9 @@ flag=true } }); + // if(this.fromPrev){ + // getTopology(this.topologyIndex).scaleTo(data.scale/2) + // } // getTopology(this.topologyIndex).fitView(); this.getNodesArr(); } @@ -566,6 +673,9 @@ //获取topology数据 getTopologyData(){ return new Promise(resolve=>{ + if(this.fromPrev){ + resolve(this.topoPrevDataS) + } this.$get('/project/topo',{projectId:this.obj.id}).then(res=>{ let data=res.data.topo; if(!res.data.topo || !data.pens){ @@ -576,6 +686,8 @@ lineWidth:1, ruleColor:"#4e4e4e" }; + this.projectInfoShow=true; + this.projectAlertShow=true; this.saveData={...data}; resolve(data); }else{ @@ -589,7 +701,17 @@ if(item.type===0&&item.data.imageId){ item.image=this.iconArray.find(item1=>item1.id==item.data.imageId).image } - })) + })); + if(!data.data){ + this.projectInfoShow=true; + this.projectAlertShow=true; + } else if(!JSON.stringify(data.data.projectInfo)){ + this.projectInfoShow=true; + this.projectAlertShow=true; + } else{ + this.projectInfoShow=data.data.projectInfo; + this.projectAlertShow=data.data.alertInfo; + } this.saveData={...data}; resolve(data); },100) @@ -720,6 +842,25 @@ return expression; } }, + //获取project Info + getProjectData(n){ + //获取projectInfo + this.projectInfo.loading=true; + this.$get('project/info', {id:n.id}).then(response => { + if (response.code === 200) { + this.projectInfo.loading=false; + this.projectInfo={...this.projectInfo,...response.data.basic,moduleMum:response.data.module.length}; + this.projectInfo.total=this.projectInfo.alertStat[0]+this.projectInfo.alertStat[1]+this.projectInfo.alertStat[2]; + if(!this.projectInfo.total){ + this.projectInfo.total=0 + } + } + }); + }, + // Severity Label + returnSeverityLabel(key){ + return this.$CONSTANTS.alertMessage.severityData.find(s => {return s.value == key}).label + }, //获取module getModule(){ this.projectInfo.loading=true; @@ -1416,7 +1557,8 @@ }, //预览 previewTopology(){ - + this.topoPrevData=getTopology(this.topologyIndex).data; + this.previewShow=true; }, /*tools 方法*/ @@ -1753,6 +1895,117 @@ right: 0; top: 50px; } + + .facade-top{ + min-height: 138px; + display: flex; + margin: 12px 0; + height: calc(16% - 40px); + font-size: 12px; + position: absolute; + top: 5px; + left: 15px; + z-index: 10; + } + .facade-top > div{ + height: calc(100% - 40px); + width: 18%; + min-width: 315px; + background: #FFFFFF; + margin-right: 9px; + padding: 20px; + border: 1px solid #FFFFFF; + box-shadow: 1px 2px 4px 0 rgba(0,0,0,0.12), -1px 1px 9px -1px rgba(205,205,205,0.77); + } + .facade-top-title{ + font-size: 16px; + color: #333333; + font-weight: bold; + padding: 5px 0; + } + .facade-top-left{ + display: flex; + flex-direction: column; + justify-content: space-around; + } + .special.label{ + margin-left: 30px; + } + .facade-top .facade-top-right{ + width: auto; + min-width: 100px; + } + .facade-top-right-content{ + display: flex; + justify-content: space-around; + justify-items: center; + flex-direction: column; + height: calc(100% - 30px); + align-items:flex-start; + } + .facade-top-right-content > div{ + min-width: 84px; + height: 22px; + display: flex; + justify-content: space-between; + color: #fff; + text-align: center; + margin-bottom: 5px; + line-height: 22px; + } + .facade-top-right-content > div > div:last-child{ + text-align: center; + border-radius: 0 4px 4px 0; + flex: 1; + height: calc(100% - 2px); + padding: 0 8px; + min-width: 40px; + } + .content-P1-title{ + background: #F2866E; + border-radius: 4px 0 0 4px; + width: 40px; + height: 100%; + } + .content-P1-title + div{ + border: 1px solid #F4907A; + font-size: 12px; + color: #F4907A; + } + + .content-P2-title{ + background: #F89984; + border-radius: 4px 0 0 4px; + width: 40px; + height: 100%; + } + .content-P2-title + div{ + border: 1px solid #F9A28F; + font-size: 12px; + color: #F9A28F; + } + + .content-P3-title{ + background: #F7BA78; + border-radius: 4px 0 0 4px; + width: 40px; + height: 100%; + } + .content-P3-title + div{ + border: 1px solid #F7BA78; + font-size: 12px; + color: #F7BA78; + } + + + .right-content-P1{ + border: 1px solid ; + } + .align--center{ + text-align: center; + } + +