OMC/fe.ems.vue3
1
0
Fork 0
Code Issues Releases 3 Activity

style: 网元信息拓展信息显示横向排版

Browse Source
This commit is contained in:
TsMask
2024-04-10 16:50:56 +08:00
parent 638f890228
commit b8bff2a159
1 changed files with 92 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files

182
src/views/ne/neInfo/index.vue
View File

@@ -602,96 +602,98 @@ onMounted(() => {
</template> </template>
</template> </template>
<template #expandedRowRender="{ record }"> <template #expandedRowRender="{ record }">
<div style="width: 46%; padding-left: 32px; padding-bottom: 16px"> <a-row :gutter="16">
<a-divider orientation="left"> <a-col :offset="2" :lg="8" :md="8" :xs="24">
{{ t('views.ne.neInfo.info') }} <a-divider orientation="left">
</a-divider> {{ t('views.ne.neInfo.info') }}
<div> </a-divider>
<span>{{ t('views.ne.neInfo.serviceState') }}：</span> <div>
<a-tag <span>{{ t('views.ne.neInfo.serviceState') }}：</span>
:color="record.serverState.online ? 'processing' : 'error'" <a-tag
> :color="record.serverState.online ? 'processing' : 'error'"
{{ >
record.serverState.online {{
? t('views.ne.neInfo.normalcy') record.serverState.online
: t('views.ne.neInfo.exceptions') ? t('views.ne.neInfo.normalcy')
}} : t('views.ne.neInfo.exceptions')
</a-tag> }}
</div> </a-tag>
<div> </div>
<span>{{ t('views.ne.neInfo.version') }}：</span> <div>
<span>{{ record.serverState.version }}</span> <span>{{ t('views.ne.neInfo.version') }}：</span>
</div> <span>{{ record.serverState.version }}</span>
<div> </div>
<span>{{ t('views.ne.neInfo.serialNum') }}：</span> <div>
<span>{{ record.serverState.sn }}</span> <span>{{ t('views.ne.neInfo.serialNum') }}：</span>
</div> <span>{{ record.serverState.sn }}</span>
<div> </div>
<span>{{ t('views.ne.neInfo.expiryDate') }}：</span> <div>
<span>{{ record.serverState.expire }}</span> <span>{{ t('views.ne.neInfo.expiryDate') }}：</span>
</div> <span>{{ record.serverState.expire }}</span>
</div> </div>
<div style="width: 46%; padding-left: 32px; padding-bottom: 16px"> </a-col>
<a-divider orientation="left"> <a-col :offset="2" :lg="8" :md="8" :xs="24">
{{ t('views.ne.neInfo.resourceInfo') }} <a-divider orientation="left">
</a-divider> {{ t('views.ne.neInfo.resourceInfo') }}
<div> </a-divider>
<span>{{ t('views.ne.neInfo.neCpu') }}：</span> <div>
<a-progress <span>{{ t('views.ne.neInfo.neCpu') }}：</span>
status="normal" <a-progress
:stroke-color=" status="normal"
record.resoures.nfCpuUsage < 30 :stroke-color="
? '#52c41a' record.resoures.nfCpuUsage < 30
: record.resoures.nfCpuUsage > 70 ? '#52c41a'
? '#ff4d4f' : record.resoures.nfCpuUsage > 70
: '#1890ff' ? '#ff4d4f'
" : '#1890ff'
:percent="record.resoures.nfCpuUsage" "
/> :percent="record.resoures.nfCpuUsage"
</div> />
<div> </div>
<span>{{ t('views.ne.neInfo.sysCpu') }}：</span> <div>
<a-progress <span>{{ t('views.ne.neInfo.sysCpu') }}：</span>
status="normal" <a-progress
:stroke-color=" status="normal"
record.resoures.sysCpuUsage < 30 :stroke-color="
? '#52c41a' record.resoures.sysCpuUsage < 30
: record.resoures.sysCpuUsage > 70 ? '#52c41a'
? '#ff4d4f' : record.resoures.sysCpuUsage > 70
: '#1890ff' ? '#ff4d4f'
" : '#1890ff'
:percent="record.resoures.sysCpuUsage" "
/> :percent="record.resoures.sysCpuUsage"
</div> />
<div> </div>
<span>{{ t('views.ne.neInfo.sysMem') }}：</span> <div>
<a-progress <span>{{ t('views.ne.neInfo.sysMem') }}：</span>
status="normal" <a-progress
:stroke-color=" status="normal"
record.resoures.sysMemUsage < 30 :stroke-color="
? '#52c41a' record.resoures.sysMemUsage < 30
: record.resoures.sysMemUsage > 70 ? '#52c41a'
? '#ff4d4f' : record.resoures.sysMemUsage > 70
: '#1890ff' ? '#ff4d4f'
" : '#1890ff'
:percent="record.resoures.sysMemUsage" "
/> :percent="record.resoures.sysMemUsage"
</div> />
<div> </div>
<span>{{ t('views.ne.neInfo.sysDisk') }}：</span> <div>
<a-progress <span>{{ t('views.ne.neInfo.sysDisk') }}：</span>
status="normal" <a-progress
:stroke-color=" status="normal"
record.resoures.sysDiskUsage < 30 :stroke-color="
? '#52c41a' record.resoures.sysDiskUsage < 30
: record.resoures.sysDiskUsage > 70 ? '#52c41a'
? '#ff4d4f' : record.resoures.sysDiskUsage > 70
: '#1890ff' ? '#ff4d4f'
" : '#1890ff'
:percent="record.resoures.sysDiskUsage" "
/> :percent="record.resoures.sysDiskUsage"
</div> />
</div> </div>
</a-col>
</a-row>
</template> </template>
</a-table> </a-table>
</a-card> </a-card>