|
|
|
@ -43,7 +43,7 @@ |
|
|
|
<div class="info-item"> |
|
|
|
<div class="info-item"> |
|
|
|
<span class="info-label"> |
|
|
|
<span class="info-label"> |
|
|
|
<i class="fas fa-heartbeat"></i> 带外IP |
|
|
|
<i class="fas fa-heartbeat"></i> 带外IP |
|
|
|
<i class="fas fa-heartbeat"></i> 带内IP |
|
|
|
<!-- <i class="fas fa-heartbeat"></i> 带内IP --> |
|
|
|
</span> |
|
|
|
</span> |
|
|
|
<span class="info-value">{{cardData.ip || '暂无'}}</span> |
|
|
|
<span class="info-value">{{cardData.ip || '暂无'}}</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
@ -61,18 +61,22 @@ |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<div class="metric-card"> |
|
|
|
<div class="metric-card"> |
|
|
|
<div class="metric-value cpu-usage">{{getPercentage(cardData.health)||0}}%</div> |
|
|
|
<div class="metric-value cpu-usage"> |
|
|
|
|
|
|
|
<span :class="['health-icon', `health-${Number(cardData.health||0)}`]"> |
|
|
|
|
|
|
|
{{ cardData.health == 1?'健康':cardData.health == 2?'良好':cardData.health == 3?'一般':cardData.health == 4?'需维护':'未知' }} |
|
|
|
|
|
|
|
</span> |
|
|
|
|
|
|
|
</div> |
|
|
|
<div class="metric-label">健康度</div> |
|
|
|
<div class="metric-label">健康度</div> |
|
|
|
<div class="progress-bar"> |
|
|
|
<!-- <div class="progress-bar"> |
|
|
|
<div class="progress-fill" :style="{width: getPercentage(cardData.health)||0+'%'}"></div> |
|
|
|
<div class="progress-fill" :style="{width: getPercentage(cardData.health)||0+'%'}"></div> |
|
|
|
</div> |
|
|
|
</div> --> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="metric-card"> |
|
|
|
<div class="metric-card"> |
|
|
|
<div class="metric-value alert-pending">{{cardData.unhandledAlertCount||0}}</div> |
|
|
|
<div class="metric-value alert-pending">{{cardData.unhandledAlertCount||0}}</div> |
|
|
|
<div class="metric-label">待处理预警数</div> |
|
|
|
<div class="metric-label">待处理预警数</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="metric-card"> |
|
|
|
<div class="metric-card"> |
|
|
|
<div class="metric-value alert-total">{{cardData.handledAlertCount||0}}</div> |
|
|
|
<div class="metric-value alert-total">{{cardData.alertCount||0}}</div> |
|
|
|
<div class="metric-label">预警总数</div> |
|
|
|
<div class="metric-label">预警总数</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
@ -498,4 +502,20 @@ export default { |
|
|
|
grid-template-columns: 1fr; |
|
|
|
grid-template-columns: 1fr; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.health-1{ |
|
|
|
|
|
|
|
color: #4CAF50; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
.health-2{ |
|
|
|
|
|
|
|
color: #FF9800; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
.health-4{ |
|
|
|
|
|
|
|
color: #F44336; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
.health-3{ |
|
|
|
|
|
|
|
color: #FFEB3B; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
.health-0{ |
|
|
|
|
|
|
|
color: #9E9E9E; |
|
|
|
|
|
|
|
} |
|
|
|
</style> |
|
|
|
</style> |