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-08-26 16:01:33 +08:00
parent f935749e96
commit 16c2caa41b
3 changed files with 89 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -18,31 +18,31 @@
<el-scrollbar class="right-box-form-box">
<el-form ref="form" :model="form" label-width="120px" :rules="rules">
<el-form-item label="Line Name" prop="lineName" class="line-name">
<el-input v-model="form.lineName"></el-input>
<el-input v-model="form.lineName" type="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-input v-model="form.width"></el-input>
</el-form-item>
<el-form-item label="roundness" class="line-name">
<el-input v-model="form.roundness"></el-input>
</el-form-item>
<el-form-item label="type" class="line-name">
<el-select v-model="form.type" placeholder="" :popper-append-to-body="false">
<!--'dynamic', 'continuous', 'discrete', 'diagonalCross', 'straightCross', 'horizontal', 'vertical', 'curvedCW', 'curvedCCW', 'cubicBezier'-->
<el-option label="dynamic" value="dynamic"></el-option>
<el-option label="continuous" value="continuous"></el-option>
<el-option label="discrete" value="discrete"></el-option>
<el-option label="diagonalCross" value="diagonalCross"></el-option>
<el-option label="straightCross" value="straightCross"></el-option>
<el-option label="horizontal" value="horizontal"></el-option>
<el-option label="vertical" value="vertical"></el-option>
<el-option label="curvedCW" value="curvedCW"></el-option>
<el-option label="cubicBezier" value="cubicBezier"></el-option>
</el-select>
<el-input v-model="form.width" type="small"></el-input>
</el-form-item>
<!--<el-form-item label="roundness" class="line-name">-->
<!--<el-input v-model="form.roundness"></el-input>-->
<!--</el-form-item>-->
<!--<el-form-item label="type" class="line-name">-->
<!--<el-select v-model="form.type" placeholder="" :popper-append-to-body="false">-->
<!--&lt;!&ndash;'dynamic', 'continuous', 'discrete', 'diagonalCross', 'straightCross', 'horizontal', 'vertical', 'curvedCW', 'curvedCCW', 'cubicBezier'&ndash;&gt;-->
<!--<el-option label="dynamic" value="dynamic"></el-option>-->
<!--<el-option label="continuous" value="continuous"></el-option>-->
<!--<el-option label="discrete" value="discrete"></el-option>-->
<!--<el-option label="diagonalCross" value="diagonalCross"></el-option>-->
<!--<el-option label="straightCross" value="straightCross"></el-option>-->
<!--<el-option label="horizontal" value="horizontal"></el-option>-->
<!--<el-option label="vertical" value="vertical"></el-option>-->
<!--<el-option label="curvedCW" value="curvedCW"></el-option>-->
<!--<el-option label="cubicBezier" value="cubicBezier"></el-option>-->
<!--</el-select>-->
<!--</el-form-item>-->
<el-form-item label="箭头方向" prop="arrows" class="arrows">
<el-select v-model="form.arrows" placeholder="" :popper-append-to-body="false">
<el-select v-model="form.arrows" placeholder="" :popper-append-to-body="false" type="small">
<div slot="prefix">
<img v-if="form.arrows=='from'" src="./image/leftArrow.png" />
<img v-if="form.arrows=='to'" src="./image/rightArrow.png" />

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

@@ -259,7 +259,7 @@
let nodes=this.formatNodes([...this.nodesArray]);
let edges=this.formatEdges([...this.edgesArray]);
console.log(nodes,edges,this.nodesArray,this.edgesArray);
this.$put('/project/topo',{topo:JSON.stringify({nodes,edges}),projectId:this.allModuleInfo.basic.id});
this.$put('/project/topo',{topo:JSON.stringify({nodes:nodes,lines:edges}),projectId:this.allModuleInfo.basic.id});
this.$emit('editVisNetworkChange',false);
},
formatNodes(arr){
@@ -380,6 +380,9 @@
this_.resetAllNodes();
this_.network.stabilize();
},
setData(){
this.setNetworkData(this.nodesArray,this.edgesArray);
},
setNetworkData(nodes,edges){//动态设置拓扑图数据
let this_ = this;
this.nodes = new Vis.DataSet(nodes);

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

@@ -45,52 +45,52 @@
<span><span class="label">Description :</span>{{projectInfo.remark?projectInfo.remark:'--'}}</span>
</div>
<div>
<span>
<span class="label">Alert state :</span>
<div class="active-icon" style="background: #B7464A 100%;"></div>{{projectInfo.alertStat[0]}}
<div class="active-icon" style="background: #E64E4E 100%;"></div>{{projectInfo.alertStat[1]}}
<div class="active-icon" style="background: #F7B500 100%;"></div>{{projectInfo.alertStat[2]}}
</span>
<!--<span>-->
<!--<span class="label">Alert state :</span>-->
<!--<div class="active-icon" style="background: #B7464A 100%;"></div>{{projectInfo.alertStat[0]}}-->
<!--<div class="active-icon" style="background: #E64E4E 100%;"></div>{{projectInfo.alertStat[1]}}-->
<!--<div class="active-icon" style="background: #F7B500 100%;"></div>{{projectInfo.alertStat[2]}}-->
<!--</span>-->
</div>
<div>
<span><span class="label">Module Mum :</span>{{projectInfo.moduleMum}}</span>
</div>
</div>
<div class="facade-top-right" v-loading="alertData.loading">
<div class="facade-top-right" v-loading="projectInfo.loading">
<div class="facade-top-title">
<span class="label">{{alertData.title}}</span>
{{alertData.sssObj.total}}
<span class="label">Alert :</span>
{{total}}
</div>
<div class="facade-top-right-content">
<div>
<el-progress
type="circle"
:percentage="(alertData.sssObj.pending/alertData.sssObj.total)*100"
:percentage="(projectInfo.alertStat[0]/total)*100"
:show-text="false"
:width="40"
color="#F5A390"
></el-progress>
<div class="align--center">{{alertData.sssObj.pending}}</div>
<div class="align--center">{{projectInfo.alertStat[0]}}</div>
</div>
<div>
<el-progress
type="circle"
:percentage="(alertData.sssObj.stop/alertData.sssObj.total)*100"
:percentage="(projectInfo.alertStat[1]/total)*100"
:show-text="false"
:width="40"
color="#F6B977"
></el-progress>
<div class="align--center">{{alertData.sssObj.stop}}</div>
<div class="align--center">{{projectInfo.alertStat[1]}}</div>
</div>
<div>
<el-progress
type="circle"
:percentage="(alertData.sssObj.other/alertData.sssObj.total)*100"
:percentage="(projectInfo.alertStat[2]/total)*100"
:show-text="false"
:width="40"
color="#EBD066"
></el-progress>
<div class="align--center">{{alertData.sssObj.other}}</div>
<div class="align--center">{{projectInfo.alertStat[2]}}</div>
</div>
</div>
</div>
@@ -116,6 +116,12 @@
</template>
<script>
import a from './image/a.png'
import b from './image/b.png'
import c from './image/c.png'
import d from './image/d.png'
import e from './image/e.png'
import f from './image/f.png'
import loading from "@/components/common/loading";
import timePicker from '@/components/common/timePicker';
import topology from './topology'
@@ -136,7 +142,6 @@
},
allModuleInfo:{},
projectInfo:{},
alertData:{}
},
watch:{
// allModuleInfo:{
@@ -150,6 +155,7 @@
immediate: true,
handler(n){
this.getNetworkData(n);
this.total=this.projectInfo.alertStat[0]+this.projectInfo.alertStat[1]+this.projectInfo.alertStat[2]
},
},
// alertData:{
@@ -171,6 +177,7 @@
dropdownMenuShow:false,
editVisNetwork:false,
topologyLoading:false,
total:1,
}
},
@@ -186,14 +193,49 @@
console.log(n);
this.$get('/project/topo',{projectId:n.id}).then(res=>{
console.log(res);
setTimeout(()=>{
this.topologyLoading=false;
if(res.data.topo){
this.nodesArray=this.formatNodesArr(res.data.topo.nodes);
this.edgesArray=this.formatEdgesArr(res.data.topo.lines);
console.log(this.nodesArray,this.edgesArray)
}else{
this.nodesArray=[];
this.edgesArray=[];
this.$refs['topology'].setNetworkData( this.edgesArray,this.nodesArray);
}
setTimeout(()=>{
this.topologyLoading=false;
this.$refs['topology'].setData();
},500)
})
},
formatNodesArr(arr){
let arr1=[];
if(!arr){return arr1}
arr.forEach((item)=>{
item.shape='image';
item.id=item.moduleId;
switch(item.iconId){
case 1: item.image=a;break;
case 2: item.image=b;break;
case 3: item.image=c;break;
case 4: item.image=d;break;
case 5: item.image=e;break;
case 6: item.image=f;break;
default: item.image=a;
}
});
return arr
},
formatEdgesArr(arr){
let arr1=[];
if(!arr){return arr1}
arr.forEach((item)=>{
item.dashes=[15,15];
item.from=item.source;
item.to=item.target;
});
return arr
},
editVisNetworkChange(flag){
this.editVisNetwork=flag;
if(flag){