Skip to content

Commit b5f2716

Browse files
ssongliussongliu
authored
fix: 解决概览页样式不统一的问题 (#2740)
Refs #2728
1 parent ded9919 commit b5f2716

File tree

1 file changed

+59
-72
lines changed

1 file changed

+59
-72
lines changed

‎frontend/src/views/home/status/index.vue‎

Lines changed: 59 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -78,82 +78,69 @@
7878
</el-popover>
7979
<span class="input-help">{{ loadStatus(currentInfo.loadUsagePercent) }}</span>
8080
</el-col>
81-
<el-col
82-
:xs="12"
83-
:sm="12"
84-
:md="6"
85-
:lg="6"
86-
:xl="6"
87-
align="center"
88-
v-for="(item, index) of currentInfo.diskData"
89-
:key="index"
90-
v-show="showMore || index < 4"
91-
>
92-
<el-popover placement="bottom" :width="300" trigger="hover" v-if="chartsOption[`disk${index}`]">
93-
<el-row :gutter="5">
94-
<el-tag style="font-weight: 500">{{ $t('home.baseInfo') }}:</el-tag>
95-
</el-row>
96-
<el-row :gutter="5">
97-
<el-tag class="nameTag">{{ $t('home.mount') }}: {{ item.path }}</el-tag>
98-
</el-row>
99-
<el-row :gutter="5">
100-
<el-tag class="tagClass">{{ $t('commons.table.type') }}: {{ item.type }}</el-tag>
101-
</el-row>
102-
<el-row :gutter="5">
103-
<el-tag class="tagClass">{{ $t('home.fileSystem') }}: {{ item.device }}</el-tag>
104-
</el-row>
105-
<el-row :gutter="5">
106-
<el-col :span="12">
107-
<div><el-tag class="tagClass" style="font-weight: 500">Inode:</el-tag></div>
108-
<el-tag class="tagClass">{{ $t('home.total') }}: {{ item.inodesTotal }}</el-tag>
109-
<el-tag class="tagClass">{{ $t('home.used') }}: {{ item.inodesUsed }}</el-tag>
110-
<el-tag class="tagClass">{{ $t('home.free') }}: {{ item.inodesFree }}</el-tag>
111-
<el-tag class="tagClass">
112-
{{ $t('home.percent') }}: {{ formatNumber(item.inodesUsedPercent) }}%
113-
</el-tag>
114-
</el-col>
81+
<template v-for="(item, index) of currentInfo.diskData" :key="index">
82+
<el-col :xs="12" :sm="12" :md="6" :lg="6" :xl="6" align="center" v-if="showMore || index < 4">
83+
<el-popover placement="bottom" :width="300" trigger="hover" v-if="chartsOption[`disk${index}`]">
84+
<el-row :gutter="5">
85+
<el-tag style="font-weight: 500">{{ $t('home.baseInfo') }}:</el-tag>
86+
</el-row>
87+
<el-row :gutter="5">
88+
<el-tag class="nameTag">{{ $t('home.mount') }}: {{ item.path }}</el-tag>
89+
</el-row>
90+
<el-row :gutter="5">
91+
<el-tag class="tagClass">{{ $t('commons.table.type') }}: {{ item.type }}</el-tag>
92+
</el-row>
93+
<el-row :gutter="5">
94+
<el-tag class="tagClass">{{ $t('home.fileSystem') }}: {{ item.device }}</el-tag>
95+
</el-row>
96+
<el-row :gutter="5">
97+
<el-col :span="12">
98+
<div><el-tag class="tagClass" style="font-weight: 500">Inode:</el-tag></div>
99+
<el-tag class="tagClass">{{ $t('home.total') }}: {{ item.inodesTotal }}</el-tag>
100+
<el-tag class="tagClass">{{ $t('home.used') }}: {{ item.inodesUsed }}</el-tag>
101+
<el-tag class="tagClass">{{ $t('home.free') }}: {{ item.inodesFree }}</el-tag>
102+
<el-tag class="tagClass">
103+
{{ $t('home.percent') }}: {{ formatNumber(item.inodesUsedPercent) }}%
104+
</el-tag>
105+
</el-col>
115106

116-
<el-col :span="12">
117-
<div>
118-
<el-tag style="margin-top: 3px; font-weight: 500">{{ $t('monitor.disk') }}:</el-tag>
119-
</div>
120-
<el-tag class="tagClass">{{ $t('home.total') }}: {{ computeSize(item.total) }}</el-tag>
121-
<el-tag class="tagClass">{{ $t('home.used') }}: {{ computeSize(item.used) }}</el-tag>
122-
<el-tag class="tagClass">{{ $t('home.free') }}: {{ computeSize(item.free) }}</el-tag>
123-
<el-tag class="tagClass">
124-
{{ $t('home.percent') }}: {{ formatNumber(item.usedPercent) }}%
125-
</el-tag>
126-
</el-col>
127-
</el-row>
128-
<template #reference>
129-
<v-charts
130-
height="160px"
131-
:id="`disk${index}`"
132-
type="pie"
133-
:option="chartsOption[`disk${index}`]"
134-
v-if="chartsOption[`disk${index}`]"
135-
/>
136-
</template>
137-
</el-popover>
138-
<span class="input-help">{{ computeSize(item.used) }} / {{ computeSize(item.total) }}</span>
139-
</el-col>
140-
<el-col v-if="!showMore" :xs="12" :sm="12" :md="6" :lg="6" :xl="6" align="center">
141-
<el-button link type="primary" @click="showMore = true" class="buttonClass">
107+
<el-col :span="12">
108+
<div>
109+
<el-tag style="margin-top: 3px; font-weight: 500">{{ $t('monitor.disk') }}:</el-tag>
110+
</div>
111+
<el-tag class="tagClass">{{ $t('home.total') }}: {{ computeSize(item.total) }}</el-tag>
112+
<el-tag class="tagClass">{{ $t('home.used') }}: {{ computeSize(item.used) }}</el-tag>
113+
<el-tag class="tagClass">{{ $t('home.free') }}: {{ computeSize(item.free) }}</el-tag>
114+
<el-tag class="tagClass">
115+
{{ $t('home.percent') }}: {{ formatNumber(item.usedPercent) }}%
116+
</el-tag>
117+
</el-col>
118+
</el-row>
119+
<template #reference>
120+
<v-charts
121+
height="160px"
122+
:id="`disk${index}`"
123+
type="pie"
124+
:option="chartsOption[`disk${index}`]"
125+
v-if="chartsOption[`disk${index}`]"
126+
/>
127+
</template>
128+
</el-popover>
129+
<span class="input-help">{{ computeSize(item.used) }} / {{ computeSize(item.total) }}</span>
130+
</el-col>
131+
</template>
132+
<el-col :xs="12" :sm="12" :md="6" :lg="6" :xl="6" align="center">
133+
<el-button v-if="!showMore" link type="primary" @click="showMore = true" class="buttonClass">
142134
{{ $t('tabs.more') }}
143135
<el-icon><Bottom /></el-icon>
144136
</el-button>
145-
</el-col>
146-
<el-col
147-
v-if="showMore && currentInfo.diskData.length > 5"
148-
:xs="12"
149-
:sm="12"
150-
:md="6"
151-
:lg="6"
152-
:xl="6"
153-
align="center"
154-
style="float: right"
155-
>
156-
<el-button type="primary" link @click="showMore = false" class="buttonClass">
137+
<el-button
138+
v-if="showMore && currentInfo.diskData.length > 5"
139+
type="primary"
140+
link
141+
@click="showMore = false"
142+
class="buttonClass"
143+
>
157144
{{ $t('tabs.hide') }}
158145
<el-icon><Top /></el-icon>
159146
</el-button>

0 commit comments

Comments
 (0)