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

NEZ-1105 fix: module info 页面调整

Browse Source
This commit is contained in:
@changcode
2021-10-28 16:03:32 +08:00
parent 6186a61295
commit 09aaf4c787
2 changed files with 31 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
nezha-fronted/src/components/common/alert/alertLabel.vue
View File

@@ -55,7 +55,7 @@
<div class="alert-label-title">Endpoint</div> <div class="alert-label-title">Endpoint</div>
<div class="alert-label-value"> <div class="alert-label-value">
<i class="nz-icon nz-icon-overview-endpoint monitorColor"></i>&nbsp; <i class="nz-icon nz-icon-overview-endpoint monitorColor"></i>&nbsp;
<span>{{alertLabelData && alertLabelData.endpointNum ? alertLabelData.endpointNum : '--'}}</span></div> <span>{{alertLabelData && alertLabelData.endpointNum ? alertLabelData.endpointNum : 0}}</span></div>
</div> </div>
</div> </div>
@@ -76,7 +76,7 @@
<div class="alert-label-title">Endpoint</div> <div class="alert-label-title">Endpoint</div>
<div class="alert-label-value"> <div class="alert-label-value">
<i class="nz-icon nz-icon-overview-endpoint monitorColor"></i>&nbsp; <i class="nz-icon nz-icon-overview-endpoint monitorColor"></i>&nbsp;
<span>{{alertLabelData && alertLabelData.endpointNum ? alertLabelData.endpointNum : '--'}}</span></div> <span>{{alertLabelData && alertLabelData.endpointNum ? alertLabelData.endpointNum : 0}}</span></div>
</div> </div>
<div class="alert-label-box"> <div class="alert-label-box">
<div class="alert-label-title">{{$t('overall.asset')}}</div> <div class="alert-label-title">{{$t('overall.asset')}}</div>
@@ -117,7 +117,7 @@
<div class="alert-label-title">Endpoint</div> <div class="alert-label-title">Endpoint</div>
<div class="alert-label-value"> <div class="alert-label-value">
<i class="nz-icon nz-icon-overview-endpoint monitorColor"></i>&nbsp; <i class="nz-icon nz-icon-overview-endpoint monitorColor"></i>&nbsp;
<span>{{alertLabelData && alertLabelData.endpointNum ? alertLabelData.endpointNum : '--'}}</span></div> <span>{{alertLabelData && alertLabelData.endpointNum ? alertLabelData.endpointNum : 0}}</span></div>
</div> </div>
<div class="alert-label-box"> <div class="alert-label-box">
<div class="alert-label-title">{{$t('overall.asset')}}</div> <div class="alert-label-title">{{$t('overall.asset')}}</div>
@@ -221,20 +221,20 @@
<div class="alert-label-title">{{$t('overall.cabinet')}}</div> <div class="alert-label-title">{{$t('overall.cabinet')}}</div>
<div class="alert-label-value"> <div class="alert-label-value">
<i v-if="alertLabelData" class="nz-icon nz-icon-cabinet monitorColor" :class="alertLabelData && alertLabelData.cabinet > 0 ? 'color23BF9A' : 'colorEF7458'"/>&nbsp; <i v-if="alertLabelData" class="nz-icon nz-icon-cabinet monitorColor" :class="alertLabelData && alertLabelData.cabinet > 0 ? 'color23BF9A' : 'colorEF7458'"/>&nbsp;
<span>{{alertLabelData && alertLabelData.cabinet && alertLabelData.cabinet.name ? alertLabelData.cabinet.name : '--'}}</span></div> <span>{{alertLabelData && alertLabelData.cabinet && alertLabelData.cabinet.name ? alertLabelData.cabinet.name : 0}}</span></div>
</div> </div>
<div class="alert-label-box"> <div class="alert-label-box">
<div class="alert-label-title">{{$t('overall.asset')}}</div> <div class="alert-label-title">{{$t('overall.asset')}}</div>
<div class="alert-label-value"> <div class="alert-label-value">
<i class="nz-icon nz-icon-overview-project monitorColor color23BF9A"/>&nbsp; <i class="nz-icon nz-icon-overview-project monitorColor color23BF9A"/>&nbsp;
<span>{{alertLabelData && alertLabelData.assetNum && alertLabelData.assetNum ? alertLabelData.assetNum: '--'}}</span> <span>{{alertLabelData && alertLabelData.assetNum && alertLabelData.assetNum ? alertLabelData.assetNum: 0}}</span>
</div> </div>
</div> </div>
<div class="alert-label-box"> <div class="alert-label-box">
<div class="alert-label-title">{{$t('overall.alert')}}</div> <div class="alert-label-title">{{$t('overall.alert')}}</div>
<div class="alert-label-value"> <div class="alert-label-value">
<i v-if="alertLabelData" :class="alertLabelData && alertLabelData.alertNum > 0 ? 'red' : 'green'" class="nz-icon nz-icon-overview-alert"></i>&nbsp; <i v-if="alertLabelData" :class="alertLabelData && alertLabelData.alertNum > 0 ? 'red' : 'green'" class="nz-icon nz-icon-overview-alert"></i>&nbsp;
<span>{{alertLabelData && alertLabelData.alertNum ? alertLabelData.alertNum : '--'}}</span></div> <span>{{alertLabelData && alertLabelData.alertNum ? alertLabelData.alertNum : 0}}</span></div>
</div> </div>
<div class="alert-label-box"> <div class="alert-label-box">
<div class="alert-label-title">{{$t('overall.state')}}</div> <div class="alert-label-title">{{$t('overall.state')}}</div>

44
nezha-fronted/src/components/common/project/popData/Info.vue
View File

@@ -17,11 +17,24 @@
</div> </div>
<div class="content-box"> <div class="content-box">
<span class="content-title">{{ $t('project.endpoint.endpoints') }}</span> <span class="content-title">{{ $t('project.endpoint.endpoints') }}</span>
<span class="content-text">{{moduleInfo.endpointNum?moduleInfo.endpointNum:'--'}}</span> <span class="content-text">
<i class="nz-icon nz-icon-overview-endpoint monitorColor"></i>&nbsp;
<span>{{moduleInfo.endpointNum ? moduleInfo.endpointNum : 0}}</span>
</span>
</div>
<div class="content-box">
<span class="content-title">{{ $t('overall.asset') }}</span>
<span class="content-text">
<i class="nz-icon nz-icon-overview-project monitorColor color23BF9A"/>&nbsp;
<span>{{ moduleInfo.assetNum ? moduleInfo.assetNum: 0}}</span>
</span>
</div> </div>
<div class="content-box"> <div class="content-box">
<span class="content-title">{{ $t('overall.alert') }}</span> <span class="content-title">{{ $t('overall.alert') }}</span>
<span class="content-text">{{moduleInfo.alertNum?moduleInfo.alertNum:'--'}}</span> <span class="content-text">
<i :class="moduleInfo.alertNum > 0 ? 'red' : 'green'" class="nz-icon nz-icon-overview-alert"></i>&nbsp;
<span>{{moduleInfo.alertNum ? moduleInfo.alertNum : 0}}</span>
</span>
</div> </div>
<div class="content-box"> <div class="content-box">
<span class="content-title">{{ $t('overall.remark') }}</span> <span class="content-title">{{ $t('overall.remark') }}</span>
@@ -76,13 +89,15 @@ export default {
margin-right: 15px; margin-right: 15px;
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
background: #FFFFFF;
border: 1px solid #E7EAED;
box-shadow: 0 6px 16px 0 rgba(0,0,0,0.08);
border-radius: 3px 3px 3px 3px 0 0;
} }
.info-box{ .info-box{
background: #FFFFFF; background: #FFFFFF;
border: 1px solid #E7EAED;
width: 334px;
margin-bottom: 15px; margin-bottom: 15px;
box-shadow: 1px 2px 4px 0 rgba(0,0,0,0.12), -1px 1px 9px -1px rgba(205,205,205,0.77); min-width: 260px;
} }
.info-box-title{ .info-box-title{
background: #EFEFEF; background: #EFEFEF;
@@ -96,33 +111,26 @@ export default {
.info-box-content{ .info-box-content{
font-size: 12px; font-size: 12px;
color: #333333; color: #333333;
/*border: 1px solid rgba(205,205,205,0.77);*/
} }
.content-box{ .content-box{
padding: 0 12px; padding: 0 12px;
height: 29px; height: 26px;
line-height: 24px; line-height: 24px;
} }
.info-box-content .content-box:not(:last-child){
border-bottom: 1px solid rgba(205,205,205,0.77);
}
.content-title{ .content-title{
font-size: 12px; font-size: 14px;
color: #333333; color: #333333;
width: 120px; min-width: 120px;
display: inline-block; display: inline-block;
border-right: 1px solid rgba(205,205,205,0.77); color: #666666;
padding: 3px 0; padding: 3px 0;
} }
.content-text{ .content-text{
width: 175px;
color: #333333; color: #333333;
font-size: 12px; font-size: 14px;
display: inline-block;
padding: 3px 5px; padding: 3px 5px;
} }
.module-type{ .module-type{
border: 1px solid #DCDCDC;
text-align: center; text-align: center;
width: 44px; width: 44px;
display: inline-block; display: inline-block;
@@ -131,13 +139,11 @@ export default {
line-height: 20px; line-height: 20px;
} }
.module-type:first-child{ .module-type:first-child{
border-right-color:rgba(255,140,14,0.54);
border-radius: 4px 0 0 4px; border-radius: 4px 0 0 4px;
margin-right: -4px; margin-right: -4px;
border-right: none; border-right: none;
} }
.module-type:last-child{ .module-type:last-child{
border-left-color:rgba(255,140,14,0.54);
border-radius: 0 4px 4px 0; border-radius: 0 4px 4px 0;
z-index: -1; z-index: -1;
} }