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

添加 addnode其他相关参数

Browse Source
This commit is contained in:
zhangyu
2020-08-24 15:02:23 +08:00
parent e1d3d5f7e2
commit c1106bb110
5 changed files with 239 additions and 172 deletions
Download Patch File Download Diff File Expand all files Collapse all files

114
nezha-fronted/src/components/common/project/projectFacade.vue
View File

@@ -1,6 +1,7 @@
<template>
<div style="background: #F9F9F9;height: 100%">
<div class="top-tools">
<!--时间选择-->
<template>
<div class="top-tool-main-right">
<div class="top-tool-search relative-position margin-r-20">
@@ -14,75 +15,15 @@
</template>
</div>
<div class="project-facade">
<div class="facade-top">
<div class="facade-top-left" v-loading="projectInfo.loading">
<div class="facade-top-title">
{{projectInfo.title}}
</div>
<div>
<span><span class="label">Id :</span>{{projectInfo.id}}</span>
<span><span class="label special">Name :</span>{{projectInfo.name}}</span>
</div>
<div>
<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>
</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-title">
<span class="label">{{alertData.title}}</span>
{{alertData.sssObj.total}}
</div>
<div class="facade-top-right-content">
<div>
<el-progress
type="circle"
:percentage="(alertData.sssObj.pending/alertData.sssObj.total)*100"
:show-text="false"
:width="40"
color="#F5A390"
></el-progress>
<div class="align--center">{{alertData.sssObj.pending}}</div>
</div>
<div>
<el-progress
type="circle"
:percentage="(alertData.sssObj.stop/alertData.sssObj.total)*100"
:show-text="false"
:width="40"
color="#F6B977"
></el-progress>
<div class="align--center">{{alertData.sssObj.stop}}</div>
</div>
<div>
<el-progress
type="circle"
:percentage="(alertData.sssObj.other/alertData.sssObj.total)*100"
:show-text="false"
:width="40"
color="#EBD066"
></el-progress>
<div class="align--center">{{alertData.sssObj.other}}</div>
</div>
</div>
</div>
</div>
<div class="facade-content">
<!--拓扑图盒子-->
<vis-network
:panel-id="item.id"
:chart-data="item"
:chart-index="0"
:allModuleInfo="allModuleInfo"
:projectInfo="projectInfo"
:alertData="alertData"
>
</vis-network>
</div>
@@ -240,56 +181,11 @@
display: flex;
flex-direction: column;
height: 100%;
}
.facade-top{
min-height: 138px;
display: flex;
margin: 12px 0;
height: calc(16% - 40px);
font-size: 12px;
}
.facade-top > div{
height: calc(100% - 40px);
width: 18%;
min-width: 280px;
background: #FFFFFF;
margin-right: 9px;
padding: 20px;
}
.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;
position: relative;
}
.facade-content{
flex: 1;
min-height: 800px;
width: calc(100% - 20px);
}
.label{
padding: 0 15px;
}
.special.label{
margin-left: 30px;
}
.facade-top .facade-top-right{
width: 12%;
min-width: 280px;
}
.facade-top-right-content{
display: flex;
justify-content: space-around;
justify-items: center;
height: calc(100% - 30px);
align-items:center;
}
.align--center{
text-align: center;
}
</style>