11<script lang="ts" setup>
22import { computed , onMounted , ref } from ' vue' ;
33
4+ import { $t } from ' @vben/locales' ;
5+
46import { useVbenVxeGrid } from ' #/adapter/vxe-table' ;
57import { getServerMonitor } from ' #/api' ;
68
@@ -91,13 +93,13 @@ const fetchServerData = async () => {
9193const [Grid, gridApi] = useVbenVxeGrid ({
9294 gridOptions: {
9395 columns: [
94- { field: ' dir' , title: ' 路径 ' },
95- { field: ' type' , title: ' 类型 ' },
96- { field: ' device' , title: ' 设备 ' },
97- { field: ' total' , title: ' 总计 ' },
98- { field: ' free' , title: ' 空闲 ' },
99- { field: ' used' , title: ' 已使用 ' },
100- { field: ' usage' , title: ' 使用率 ' },
96+ { field: ' dir' , title: $t ( ' page.monitor.server.disk.dir ' ) },
97+ { field: ' type' , title: $t ( ' page.monitor.server.disk.type ' ) },
98+ { field: ' device' , title: $t ( ' page.monitor.server.disk.device ' ) },
99+ { field: ' total' , title: $t ( ' page.monitor.server.disk.total ' ) },
100+ { field: ' free' , title: $t ( ' page.monitor.server.disk.free ' ) },
101+ { field: ' used' , title: $t ( ' page.monitor.server.disk.used ' ) },
102+ { field: ' usage' , title: $t ( ' page.monitor.server.disk.usage ' ) },
101103 ],
102104 stripe: true ,
103105 pagerConfig: {
@@ -120,43 +122,64 @@ onMounted(async () => {
120122 <div class =" mt-6 flex w-full space-x-6 px-6" >
121123 <div class =" flex-1" >
122124 <a-statistic
123- title =" 使用率 "
125+ : title =" $t('page.monitor.server.cpu.usage') "
124126 :value =" cpuData.usage"
125127 :value-style =" usageStyle('cpu')"
126128 suffix =" %"
127129 />
128130 </div >
129131 <div class =" flex-1" >
130132 <a-statistic
131- title =" 当前频率 "
133+ : title =" $t('page.monitor.server.cpu.current_freq') "
132134 :value =" cpuData.current_freq"
133135 suffix =" MHz"
134136 />
135137 </div >
136138 <div class =" flex-1" >
137- <a-statistic title =" 逻辑核心数" :value =" cpuData.logical_num" />
139+ <a-statistic
140+ :title =" $t('page.monitor.server.cpu.logical_num')"
141+ :value =" cpuData.logical_num"
142+ />
138143 </div >
139144 <div class =" flex-1" >
140- <a-statistic title =" 物理核心数" :value =" cpuData.physical_num" />
145+ <a-statistic
146+ :title =" $t('page.monitor.server.cpu.physical_num')"
147+ :value =" cpuData.physical_num"
148+ />
141149 </div >
142150 </div >
143151 </a-card >
144152 </div >
145153 <div class =" flex-1" >
146- <a-card :loading =" loading" title =" 内存" >
154+ <a-card
155+ :loading =" loading"
156+ :title =" $t('page.monitor.server.memory.title')"
157+ >
147158 <div class =" mt-6 flex w-full space-x-6 px-6" >
148159 <div class =" flex-1" >
149- <a-statistic title =" 总量" :value =" memData.total" suffix =" GB" />
160+ <a-statistic
161+ :title =" $t('page.monitor.server.memory.total')"
162+ :value =" memData.total"
163+ suffix =" GB"
164+ />
150165 </div >
151166 <div class =" flex-1" >
152- <a-statistic title =" 已使用" :value =" memData.used" suffix =" GB" />
167+ <a-statistic
168+ :title =" $t('page.monitor.server.memory.used')"
169+ :value =" memData.used"
170+ suffix =" GB"
171+ />
153172 </div >
154173 <div class =" flex-1" >
155- <a-statistic title =" 空闲" :value =" memData.free" suffix =" GB" />
174+ <a-statistic
175+ :title =" $t('page.monitor.server.memory.free')"
176+ :value =" memData.free"
177+ suffix =" GB"
178+ />
156179 </div >
157180 <div class =" flex-1" >
158181 <a-statistic
159- title =" 使用率 "
182+ : title =" $t('page.monitor.server.memory.usage') "
160183 :value =" memData.usage"
161184 :value-style =" usageStyle('memory')"
162185 suffix =" %"
@@ -167,7 +190,7 @@ onMounted(async () => {
167190 </div >
168191 </div >
169192 <div class =" mt-6 w-full space-y-6" >
170- <a-card :loading =" loading" title =" 服务 " >
193+ <a-card :loading =" loading" : title =" $t('page.monitor.server.service') " >
171194 <a-descriptions >
172195 <a-descriptions-item
173196 v-for =" item in serviceData"
@@ -178,7 +201,7 @@ onMounted(async () => {
178201 </a-descriptions-item >
179202 </a-descriptions >
180203 </a-card >
181- <a-card :loading =" loading" title =" 系统 " >
204+ <a-card :loading =" loading" : title =" $t('page.monitor.server.system') " >
182205 <a-descriptions size =" middle" :column =" 4" >
183206 <a-descriptions-item
184207 v-for =" item in osData"
@@ -189,7 +212,7 @@ onMounted(async () => {
189212 </a-descriptions-item >
190213 </a-descriptions >
191214 </a-card >
192- <a-card :loading =" loading" title =" 磁盘 " >
215+ <a-card :loading =" loading" : title =" $t('page.monitor.server.disk.title') " >
193216 <Grid />
194217 </a-card >
195218 </div >
0 commit comments