修改国际化配置

This commit is contained in:
lsymicc
2025-06-10 11:34:26 +08:00
parent be72a0ac13
commit 7576cf3bcb
3 changed files with 172 additions and 86 deletions

View File

@@ -3,38 +3,50 @@
<el-row :gutter="10"> <el-row :gutter="10">
<el-col :span="24" class="card-box"> <el-col :span="24" class="card-box">
<el-card> <el-card>
<div slot="header"><span><i class="el-icon-monitor"></i> 基本信息</span></div> <div slot="header"><span><i class="el-icon-monitor"></i> {{ $t('Monitor_Cache.basInfomation') }}</span></div>
<div class="el-table el-table--enable-row-hover el-table--medium"> <div class="el-table el-table--enable-row-hover el-table--medium">
<table cellspacing="0" style="width: 100%"> <table cellspacing="0" style="width: 100%">
<tbody> <tbody>
<tr> <tr>
<td class="el-table__cell is-leaf"><div class="cell">Redis版本</div></td> <!-- Redis版本 -->
<td class="el-table__cell is-leaf"><div class="cell">{{ $t('Monitor_Cache.redisVersion') }}</div></td>
<td class="el-table__cell is-leaf"><div class="cell" v-if="cache.info">{{ cache.info.redis_version }}</div></td> <td class="el-table__cell is-leaf"><div class="cell" v-if="cache.info">{{ cache.info.redis_version }}</div></td>
<td class="el-table__cell is-leaf"><div class="cell">运行模式</div></td> <!-- 运行模式 -->
<td class="el-table__cell is-leaf"><div class="cell">{{ $t('Monitor_Cache.redisMode') }}</div></td>
<td class="el-table__cell is-leaf"><div class="cell" v-if="cache.info">{{ cache.info.redis_mode == "standalone" ? "单机" : "集群" }}</div></td> <td class="el-table__cell is-leaf"><div class="cell" v-if="cache.info">{{ cache.info.redis_mode == "standalone" ? "单机" : "集群" }}</div></td>
<td class="el-table__cell is-leaf"><div class="cell">端口</div></td> <!-- 端口 -->
<td class="el-table__cell is-leaf"><div class="cell">{{ $t('Monitor_Cache.port') }}</div></td>
<td class="el-table__cell is-leaf"><div class="cell" v-if="cache.info">{{ cache.info.tcp_port }}</div></td> <td class="el-table__cell is-leaf"><div class="cell" v-if="cache.info">{{ cache.info.tcp_port }}</div></td>
<td class="el-table__cell is-leaf"><div class="cell">客户端数</div></td> <!-- 客户端数 -->
<td class="el-table__cell is-leaf"><div class="cell">{{ $t('Monitor_Cache.connectedClients') }}</div></td>
<td class="el-table__cell is-leaf"><div class="cell" v-if="cache.info">{{ cache.info.connected_clients }}</div></td> <td class="el-table__cell is-leaf"><div class="cell" v-if="cache.info">{{ cache.info.connected_clients }}</div></td>
</tr> </tr>
<tr> <tr>
<td class="el-table__cell is-leaf"><div class="cell">运行时间(天)</div></td> <!-- 运行时间 -->
<td class="el-table__cell is-leaf"><div class="cell">{{ $t('Monitor_Cache.runningTime') }}</div></td>
<td class="el-table__cell is-leaf"><div class="cell" v-if="cache.info">{{ cache.info.uptime_in_days }}</div></td> <td class="el-table__cell is-leaf"><div class="cell" v-if="cache.info">{{ cache.info.uptime_in_days }}</div></td>
<td class="el-table__cell is-leaf"><div class="cell">使用内存</div></td> <!-- 使用内存 -->
<td class="el-table__cell is-leaf"><div class="cell">{{ $t('Monitor_Cache.memoryUsed') }}</div></td>
<td class="el-table__cell is-leaf"><div class="cell" v-if="cache.info">{{ cache.info.used_memory_human }}</div></td> <td class="el-table__cell is-leaf"><div class="cell" v-if="cache.info">{{ cache.info.used_memory_human }}</div></td>
<td class="el-table__cell is-leaf"><div class="cell">使用CPU</div></td> <!-- 使用CPU -->
<td class="el-table__cell is-leaf"><div class="cell">{{ $t('Monitor_Cache.cpuUsed') }}</div></td>
<td class="el-table__cell is-leaf"><div class="cell" v-if="cache.info">{{ parseFloat(cache.info.used_cpu_user_children).toFixed(2) }}</div></td> <td class="el-table__cell is-leaf"><div class="cell" v-if="cache.info">{{ parseFloat(cache.info.used_cpu_user_children).toFixed(2) }}</div></td>
<td class="el-table__cell is-leaf"><div class="cell">内存配置</div></td> <!-- 内存配置 -->
<td class="el-table__cell is-leaf"><div class="cell">{{ $t('Monitor_Cache.memorySize') }}</div></td>
<td class="el-table__cell is-leaf"><div class="cell" v-if="cache.info">{{ cache.info.maxmemory_human }}</div></td> <td class="el-table__cell is-leaf"><div class="cell" v-if="cache.info">{{ cache.info.maxmemory_human }}</div></td>
</tr> </tr>
<tr> <tr>
<td class="el-table__cell is-leaf"><div class="cell">AOF是否开启</div></td> <!-- AOF是否开启 -->
<td class="el-table__cell is-leaf"><div class="cell">{{ $t('Monitor_Cache.AOFIsOpen') }}</div></td>
<td class="el-table__cell is-leaf"><div class="cell" v-if="cache.info">{{ cache.info.aof_enabled == "0" ? "否" : "是" }}</div></td> <td class="el-table__cell is-leaf"><div class="cell" v-if="cache.info">{{ cache.info.aof_enabled == "0" ? "否" : "是" }}</div></td>
<td class="el-table__cell is-leaf"><div class="cell">RDB是否成功</div></td> <!-- RDB是否成功 -->
<td class="el-table__cell is-leaf"><div class="cell">{{ $t('Monitor_Cache.RDBIsEnable') }}</div></td>
<td class="el-table__cell is-leaf"><div class="cell" v-if="cache.info">{{ cache.info.rdb_last_bgsave_status }}</div></td> <td class="el-table__cell is-leaf"><div class="cell" v-if="cache.info">{{ cache.info.rdb_last_bgsave_status }}</div></td>
<td class="el-table__cell is-leaf"><div class="cell">Key数量</div></td> <!-- Key数量 -->
<td class="el-table__cell is-leaf"><div class="cell">{{ $t('Monitor_Cache.keySize') }}</div></td>
<td class="el-table__cell is-leaf"><div class="cell" v-if="cache.dbSize">{{ cache.dbSize }} </div></td> <td class="el-table__cell is-leaf"><div class="cell" v-if="cache.dbSize">{{ cache.dbSize }} </div></td>
<td class="el-table__cell is-leaf"><div class="cell">网络入口/出口</div></td> <!-- 网络入口/出口 -->
<td class="el-table__cell is-leaf"><div class="cell">{{ $t('Monitor_Cache.netInputAndOutput') }}</div></td>
<td class="el-table__cell is-leaf"><div class="cell" v-if="cache.info">{{ cache.info.instantaneous_input_kbps }}kps/{{cache.info.instantaneous_output_kbps}}kps</div></td> <td class="el-table__cell is-leaf"><div class="cell" v-if="cache.info">{{ cache.info.instantaneous_input_kbps }}kps/{{cache.info.instantaneous_output_kbps}}kps</div></td>
</tr> </tr>
</tbody> </tbody>
@@ -45,7 +57,8 @@
<el-col :span="12" class="card-box"> <el-col :span="12" class="card-box">
<el-card> <el-card>
<div slot="header"><span><i class="el-icon-pie-chart"></i> 命令统计</span></div> <!-- 命令统计 -->
<div slot="header"><span><i class="el-icon-pie-chart"></i> {{ $t('Monitor_Cache.commandStats') }}</span></div>
<div class="el-table el-table--enable-row-hover el-table--medium"> <div class="el-table el-table--enable-row-hover el-table--medium">
<div ref="commandstats" style="height: 420px" /> <div ref="commandstats" style="height: 420px" />
</div> </div>
@@ -54,7 +67,8 @@
<el-col :span="12" class="card-box"> <el-col :span="12" class="card-box">
<el-card> <el-card>
<div slot="header"><span><i class="el-icon-odometer"></i> 内存信息</span></div> <!-- 内存信息 -->
<div slot="header"><span><i class="el-icon-odometer"></i> {{ $t('Monitor_Cache.memoryUsedInfo') }}</span></div>
<div class="el-table el-table--enable-row-hover el-table--medium"> <div class="el-table el-table--enable-row-hover el-table--medium">
<div ref="usedmemory" style="height: 420px" /> <div ref="usedmemory" style="height: 420px" />
</div> </div>
@@ -99,7 +113,8 @@ export default {
}, },
series: [ series: [
{ {
name: "命令", // 命令
name: this.$t('Monitor_Cache.command'),
type: "pie", type: "pie",
roseType: "radius", roseType: "radius",
radius: [15, 95], radius: [15, 95],
@@ -117,7 +132,8 @@ export default {
}, },
series: [ series: [
{ {
name: "峰值", // 峰值
name: this.$t('Monitor_Cache.peakValue'),
type: "gauge", type: "gauge",
min: 0, min: 0,
max: 1000, max: 1000,
@@ -127,7 +143,8 @@ export default {
data: [ data: [
{ {
value: parseFloat(this.cache.info.used_memory_human), value: parseFloat(this.cache.info.used_memory_human),
name: "内存消耗", // 内存消耗
name: this.$t('Monitor_Cache.cacheMemoryUsed'),
} }
] ]
} }
@@ -141,7 +158,8 @@ export default {
}, },
// 打开加载层 // 打开加载层
openLoading() { openLoading() {
this.$modal.loading("正在加载缓存监控数据,请稍候!") // 提示:正在加载缓存监控数据,请稍候!
this.$modal.loading(this.$t('Monitor_Cache.cacheMemoryUsed'))
} }
} }
} }

View File

@@ -1,17 +1,21 @@
<template> <template>
<div class="app-container"> <div class="app-container">
<el-row :gutter="10"> <el-row :gutter="10">
<!-- 缓存名称列表 -->
<el-col :span="8"> <el-col :span="8">
<el-card style="height: calc(100vh - 125px)"> <el-card style="height: calc(100vh - 125px)">
<div slot="header"> <div slot="header">
<span><i class="el-icon-collection"></i> 缓存列表</span> <!-- 标题:缓存列表 -->
<span><i class="el-icon-collection"></i> {{ $t('Monitor_CacheList.cacheList') }}</span>
<!-- 刷新按钮 -->
<el-button <el-button
style="float: right; padding: 3px 0" style="float: right; padding: 3px 0"
type="text" type="text"
icon="el-icon-refresh-right" icon="el-icon-refresh-right"
@click="refreshCacheNames()" @click="refreshCacheNames()"
></el-button> >{{ $t('Monitor_CacheList.btnRefresh') }}</el-button>
</div> </div>
<!-- 表格展示缓存名称 -->
<el-table <el-table
v-loading="loading" v-loading="loading"
:data="cacheNames" :data="cacheNames"
@@ -20,28 +24,32 @@
@row-click="getCacheKeys" @row-click="getCacheKeys"
style="width: 100%" style="width: 100%"
> >
<!-- 序号 -->
<el-table-column <el-table-column
label="序号" :label="this.$t('Monitor_CacheList.Id')"
width="60" width="60"
type="index" type="index"
></el-table-column> ></el-table-column>
<!-- 缓存名称 -->
<el-table-column <el-table-column
label="缓存名称" :label="this.$t('Monitor_CacheList.cacheName')"
align="center" align="center"
prop="cacheName" prop="cacheName"
:show-overflow-tooltip="true" :show-overflow-tooltip="true"
:formatter="nameFormatter" :formatter="nameFormatter"
></el-table-column> ></el-table-column>
<!-- 备注 -->
<el-table-column <el-table-column
label="备注" :label="this.$t('Monitor_CacheList.remark')"
align="center" align="center"
prop="remark" prop="remark"
:show-overflow-tooltip="true" :show-overflow-tooltip="true"
/> />
<!-- 操作 -->
<el-table-column <el-table-column
label="操作" :label="this.$t('Monitor_CacheList.operation')"
width="60" width="60"
align="center" align="center"
class-name="small-padding fixed-width" class-name="small-padding fixed-width"
@@ -59,17 +67,21 @@
</el-card> </el-card>
</el-col> </el-col>
<!-- 键名列表 -->
<el-col :span="8"> <el-col :span="8">
<el-card style="height: calc(100vh - 125px)"> <el-card style="height: calc(100vh - 125px)">
<div slot="header"> <div slot="header">
<span><i class="el-icon-key"></i> 键名列表</span> <!-- 标题:键名列表 -->
<span><i class="el-icon-key"></i> {{ $t('Monitor_CacheList.keyList') }}</span>
<!-- 刷新按钮 -->
<el-button <el-button
style="float: right; padding: 3px 0" style="float: right; padding: 3px 0"
type="text" type="text"
icon="el-icon-refresh-right" icon="el-icon-refresh-right"
@click="refreshCacheKeys()" @click="refreshCacheKeys()"
></el-button> >{{ $t('Monitor_CacheList.btnRefresh') }}</el-button>
</div> </div>
<!-- 表格展示缓存键名 -->
<el-table <el-table
v-loading="subLoading" v-loading="subLoading"
:data="cacheKeys" :data="cacheKeys"
@@ -78,20 +90,23 @@
@row-click="handleCacheValue" @row-click="handleCacheValue"
style="width: 100%" style="width: 100%"
> >
<!-- 序号 -->
<el-table-column <el-table-column
label="序号" :label="this.$t('Monitor_CacheList.Id')"
width="60" width="60"
type="index" type="index"
></el-table-column> ></el-table-column>
<!-- 缓存键名 -->
<el-table-column <el-table-column
label="缓存键名" :label="this.$t('Monitor_CacheList.cacheKey')"
align="center" align="center"
:show-overflow-tooltip="true" :show-overflow-tooltip="true"
:formatter="keyFormatter" :formatter="keyFormatter"
> >
</el-table-column> </el-table-column>
<!-- 操作 -->
<el-table-column <el-table-column
label="操作" :label="this.$t('Monitor_CacheList.operation')"
width="60" width="60"
align="center" align="center"
class-name="small-padding fixed-width" class-name="small-padding fixed-width"
@@ -109,32 +124,39 @@
</el-card> </el-card>
</el-col> </el-col>
<!-- 缓存内容展示 -->
<el-col :span="8"> <el-col :span="8">
<el-card :bordered="false" style="height: calc(100vh - 125px)"> <el-card :bordered="false" style="height: calc(100vh - 125px)">
<div slot="header"> <div slot="header">
<span><i class="el-icon-document"></i> 缓存内容</span> <!-- 标题:缓存内容 -->
<span><i class="el-icon-document"></i> {{ $t('Monitor_CacheList.cacheValue') }}</span>
<!-- 清理全部按钮 -->
<el-button <el-button
style="float: right; padding: 3px 0" style="float: right; padding: 3px 0"
type="text" type="text"
icon="el-icon-refresh-right" icon="el-icon-refresh-right"
@click="handleClearCacheAll()" @click="handleClearCacheAll()"
>清理全部</el-button >{{ $t('Monitor_CacheList.btnClearAll') }}</el-button
> >
</div> </div>
<!-- 缓存详细信息表单 -->
<el-form :model="cacheForm"> <el-form :model="cacheForm">
<el-row :gutter="32"> <el-row :gutter="32">
<el-col :offset="1" :span="22"> <el-col :offset="1" :span="22">
<el-form-item label="缓存名称:" prop="cacheName"> <!-- 缓存名称 -->
<el-form-item :label="this.$t('Monitor_CacheList.cacheName')" prop="cacheName">
<el-input v-model="cacheForm.cacheName" :readOnly="true" /> <el-input v-model="cacheForm.cacheName" :readOnly="true" />
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :offset="1" :span="22"> <el-col :offset="1" :span="22">
<el-form-item label="缓存键名:" prop="cacheKey"> <!-- 缓存键名 -->
<el-form-item :label="this.$t('Monitor_CacheList.cacheKey')" prop="cacheKey">
<el-input v-model="cacheForm.cacheKey" :readOnly="true" /> <el-input v-model="cacheForm.cacheKey" :readOnly="true" />
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :offset="1" :span="22"> <el-col :offset="1" :span="22">
<el-form-item label="缓存内容:" prop="cacheValue"> <!-- 缓存内容 -->
<el-form-item :label="this.$t('Monitor_CacheList.cacheValue')" prop="cacheValue">
<el-input <el-input
v-model="cacheForm.cacheValue" v-model="cacheForm.cacheValue"
type="textarea" type="textarea"
@@ -158,17 +180,17 @@ export default {
name: "CacheList", name: "CacheList",
data() { data() {
return { return {
cacheNames: [], cacheNames: [], // 缓存名称列表
cacheKeys: [], cacheKeys: [], // 缓存键名列表
cacheForm: {}, cacheForm: {}, // 缓存内容表单数据
loading: true, loading: true, // 加载状态
subLoading: false, subLoading: false, // 子加载状态
nowCacheName: "", nowCacheName: "", // 当前选中的缓存名称
tableHeight: window.innerHeight - 200 tableHeight: window.innerHeight - 200 // 动态表格高度
} }
}, },
created() { created() {
this.getCacheNames() this.getCacheNames() // 初始化获取缓存名称列表
}, },
methods: { methods: {
/** 查询缓存名称列表 */ /** 查询缓存名称列表 */
@@ -182,12 +204,14 @@ export default {
/** 刷新缓存名称列表 */ /** 刷新缓存名称列表 */
refreshCacheNames() { refreshCacheNames() {
this.getCacheNames() this.getCacheNames()
this.$modal.msgSuccess("刷新缓存列表成功") // 提示信息:刷新缓存列表成功
this.$modal.msgSuccess(this.$t('Monitor_CacheList.refreshCacheSuccessInfo'))
}, },
/** 清理指定名称缓存 */ /** 清理指定名称缓存 */
handleClearCacheName(row) { handleClearCacheName(row) {
clearCacheName(row.cacheName).then(response => { clearCacheName(row.cacheName).then(response => {
this.$modal.msgSuccess("清理缓存名称[" + row.cacheName + "]成功") // 提示:清理缓存名称 成功
this.$modal.msgSuccess(this.$t('Monitor_CacheList.textClearCacheName') + row.cacheName + this.$t('Monitor_CacheList.textSuccess'))
this.getCacheKeys() this.getCacheKeys()
}) })
}, },
@@ -207,12 +231,14 @@ export default {
/** 刷新缓存键名列表 */ /** 刷新缓存键名列表 */
refreshCacheKeys() { refreshCacheKeys() {
this.getCacheKeys() this.getCacheKeys()
this.$modal.msgSuccess("刷新键名列表成功") // 提示:刷新键名列表成功
this.$modal.msgSuccess(this.$t('Monitor_CacheList.refreshKeySuccessInfo'))
}, },
/** 清理指定键名缓存 */ /** 清理指定键名缓存 */
handleClearCacheKey(cacheKey) { handleClearCacheKey(cacheKey) {
clearCacheKey(cacheKey).then(response => { clearCacheKey(cacheKey).then(response => {
this.$modal.msgSuccess("清理缓存键名[" + cacheKey + "]成功") // 提示:清理缓存键名成功
this.$modal.msgSuccess(this.$t('Monitor_CacheList.textClearCacheKey') + cacheKey + this.$t('Monitor_CacheList.textSuccess'))
this.getCacheKeys() this.getCacheKeys()
}) })
}, },
@@ -233,7 +259,8 @@ export default {
/** 清理全部缓存 */ /** 清理全部缓存 */
handleClearCacheAll() { handleClearCacheAll() {
clearCacheAll().then(response => { clearCacheAll().then(response => {
this.$modal.msgSuccess("清理全部缓存成功") // 提示信息:清理全部缓存成功
this.$modal.msgSuccess(this.$t('Monitor_CacheList.clearAllCacheSuccessInfo'))
}) })
} }
} }

View File

@@ -3,30 +3,41 @@
<el-row :gutter="10"> <el-row :gutter="10">
<el-col :span="12" class="card-box"> <el-col :span="12" class="card-box">
<el-card> <el-card>
<div slot="header"><span><i class="el-icon-cpu"></i> CPU</span></div> <!-- cpu信息 -->
<div slot="header"><span><i class="el-icon-cpu"></i> {{ $t('Monitor_Service.cpu_Infomation') }}</span></div>
<div class="el-table el-table--enable-row-hover el-table--medium"> <div class="el-table el-table--enable-row-hover el-table--medium">
<table cellspacing="0" style="width: 100%;"> <table cellspacing="0" style="width: 100%;">
<thead> <thead>
<tr> <tr>
<th class="el-table__cell is-leaf"><div class="cell">属性</div></th> <!-- 属性 -->
<th class="el-table__cell is-leaf"><div class="cell">值</div></th> <th class="el-table__cell is-leaf"><div class="cell">{{ $t('Monitor_Service.property') }}</div></th>
<!-- 值 -->
<th class="el-table__cell is-leaf"><div class="cell">{{ $t('Monitor_Service.value') }}</div></th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td class="el-table__cell is-leaf"><div class="cell">核心数</div></td> <!-- 核心数 -->
<td class="el-table__cell is-leaf"><div class="cell">{{ $t('Monitor_Service.cpu_Cores') }}</div></td>
<!-- 值 -->
<td class="el-table__cell is-leaf"><div class="cell" v-if="server.cpu">{{ server.cpu.cpuNum }}</div></td> <td class="el-table__cell is-leaf"><div class="cell" v-if="server.cpu">{{ server.cpu.cpuNum }}</div></td>
</tr> </tr>
<tr> <tr>
<td class="el-table__cell is-leaf"><div class="cell">用户使用率</div></td> <!-- CPU用户使用率 -->
<td class="el-table__cell is-leaf"><div class="cell">{{ $t('Monitor_Service.cpu_UserUsage') }}</div></td>
<!-- 值 -->
<td class="el-table__cell is-leaf"><div class="cell" v-if="server.cpu">{{ server.cpu.used }}%</div></td> <td class="el-table__cell is-leaf"><div class="cell" v-if="server.cpu">{{ server.cpu.used }}%</div></td>
</tr> </tr>
<tr> <tr>
<td class="el-table__cell is-leaf"><div class="cell">系统使用率</div></td> <!-- CPU系统使用率 -->
<td class="el-table__cell is-leaf"><div class="cell">{{ $t('Monitor_Service.cpu_SystemUsage') }}</div></td>
<!-- 值 -->
<td class="el-table__cell is-leaf"><div class="cell" v-if="server.cpu">{{ server.cpu.sys }}%</div></td> <td class="el-table__cell is-leaf"><div class="cell" v-if="server.cpu">{{ server.cpu.sys }}%</div></td>
</tr> </tr>
<tr> <tr>
<td class="el-table__cell is-leaf"><div class="cell">当前空闲率</div></td> <!-- CPU空闲率 -->
<td class="el-table__cell is-leaf"><div class="cell">{{ $t('Monitor_Service.cpu_Idle') }}</div></td>
<!-- 值 -->
<td class="el-table__cell is-leaf"><div class="cell" v-if="server.cpu">{{ server.cpu.free }}%</div></td> <td class="el-table__cell is-leaf"><div class="cell" v-if="server.cpu">{{ server.cpu.free }}%</div></td>
</tr> </tr>
</tbody> </tbody>
@@ -37,34 +48,42 @@
<el-col :span="12" class="card-box"> <el-col :span="12" class="card-box">
<el-card> <el-card>
<div slot="header"><span><i class="el-icon-tickets"></i> 内存</span></div> <!-- 内存 -->
<div slot="header"><span><i class="el-icon-tickets"></i> {{ $t('Monitor_Service.memory_Infomation') }}</span></div>
<div class="el-table el-table--enable-row-hover el-table--medium"> <div class="el-table el-table--enable-row-hover el-table--medium">
<table cellspacing="0" style="width: 100%;"> <table cellspacing="0" style="width: 100%;">
<thead> <thead>
<tr> <tr>
<th class="el-table__cell is-leaf"><div class="cell">属性</div></th> <!-- 属性 -->
<th class="el-table__cell is-leaf"><div class="cell">内存</div></th> <th class="el-table__cell is-leaf"><div class="cell">{{ $t('Monitor_Service.property') }}</div></th>
<th class="el-table__cell is-leaf"><div class="cell">JVM</div></th> <!-- 内存 -->
<th class="el-table__cell is-leaf"><div class="cell">{{ $t('Monitor_Service.value') }}</div></th>
<!-- JVM -->
<th class="el-table__cell is-leaf"><div class="cell">{{ $t('Monitor_Service.memory') }}</div></th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td class="el-table__cell is-leaf"><div class="cell">总内存</div></td> <!-- 总内存 -->
<td class="el-table__cell is-leaf"><div class="cell">{{ $t('Monitor_Service.memory_total') }}</div></td>
<td class="el-table__cell is-leaf"><div class="cell" v-if="server.mem">{{ server.mem.total }}G</div></td> <td class="el-table__cell is-leaf"><div class="cell" v-if="server.mem">{{ server.mem.total }}G</div></td>
<td class="el-table__cell is-leaf"><div class="cell" v-if="server.jvm">{{ server.jvm.total }}M</div></td> <td class="el-table__cell is-leaf"><div class="cell" v-if="server.jvm">{{ server.jvm.total }}M</div></td>
</tr> </tr>
<tr> <tr>
<td class="el-table__cell is-leaf"><div class="cell">已用内存</div></td> <!-- 已用内存 -->
<td class="el-table__cell is-leaf"><div class="cell">{{ $t('Monitor_Service.memory_Used') }}</div></td>
<td class="el-table__cell is-leaf"><div class="cell" v-if="server.mem">{{ server.mem.used}}G</div></td> <td class="el-table__cell is-leaf"><div class="cell" v-if="server.mem">{{ server.mem.used}}G</div></td>
<td class="el-table__cell is-leaf"><div class="cell" v-if="server.jvm">{{ server.jvm.used}}M</div></td> <td class="el-table__cell is-leaf"><div class="cell" v-if="server.jvm">{{ server.jvm.used}}M</div></td>
</tr> </tr>
<tr> <tr>
<td class="el-table__cell is-leaf"><div class="cell">剩余内存</div></td> <!-- 剩余内存 -->
<td class="el-table__cell is-leaf"><div class="cell">{{ $t('Monitor_Service.memory_Free') }}</div></td>
<td class="el-table__cell is-leaf"><div class="cell" v-if="server.mem">{{ server.mem.free }}G</div></td> <td class="el-table__cell is-leaf"><div class="cell" v-if="server.mem">{{ server.mem.free }}G</div></td>
<td class="el-table__cell is-leaf"><div class="cell" v-if="server.jvm">{{ server.jvm.free }}M</div></td> <td class="el-table__cell is-leaf"><div class="cell" v-if="server.jvm">{{ server.jvm.free }}M</div></td>
</tr> </tr>
<tr> <tr>
<td class="el-table__cell is-leaf"><div class="cell">使用率</div></td> <!-- 使用率 -->
<td class="el-table__cell is-leaf"><div class="cell">{{ $t('Monitor_Service.memory_Usage') }}</div></td>
<td class="el-table__cell is-leaf"><div class="cell" v-if="server.mem" :class="{'text-danger': server.mem.usage > 80}">{{ server.mem.usage }}%</div></td> <td class="el-table__cell is-leaf"><div class="cell" v-if="server.mem" :class="{'text-danger': server.mem.usage > 80}">{{ server.mem.usage }}%</div></td>
<td class="el-table__cell is-leaf"><div class="cell" v-if="server.jvm" :class="{'text-danger': server.jvm.usage > 80}">{{ server.jvm.usage }}%</div></td> <td class="el-table__cell is-leaf"><div class="cell" v-if="server.jvm" :class="{'text-danger': server.jvm.usage > 80}">{{ server.jvm.usage }}%</div></td>
</tr> </tr>
@@ -77,21 +96,26 @@
<el-col :span="24" class="card-box"> <el-col :span="24" class="card-box">
<el-card> <el-card>
<div slot="header"> <div slot="header">
<span><i class="el-icon-monitor"></i> 服务器信息</span> <!-- 服务器信息 -->
<span><i class="el-icon-monitor"></i> {{ $t('Monitor_Service.server_Information') }}</span>
</div> </div>
<div class="el-table el-table--enable-row-hover el-table--medium"> <div class="el-table el-table--enable-row-hover el-table--medium">
<table cellspacing="0" style="width: 100%;"> <table cellspacing="0" style="width: 100%;">
<tbody> <tbody>
<tr> <tr>
<td class="el-table__cell is-leaf"><div class="cell">服务器名称</div></td> <!-- 服务器名称 -->
<td class="el-table__cell is-leaf"><div class="cell">{{ $t('Monitor_Service.server_Name') }}</div></td>
<td class="el-table__cell is-leaf"><div class="cell" v-if="server.sys">{{ server.sys.computerName }}</div></td> <td class="el-table__cell is-leaf"><div class="cell" v-if="server.sys">{{ server.sys.computerName }}</div></td>
<td class="el-table__cell is-leaf"><div class="cell">操作系统</div></td> <!-- 操作系统 -->
<td class="el-table__cell is-leaf"><div class="cell">{{ $t('Monitor_Service.server_Ip') }}</div></td>
<td class="el-table__cell is-leaf"><div class="cell" v-if="server.sys">{{ server.sys.osName }}</div></td> <td class="el-table__cell is-leaf"><div class="cell" v-if="server.sys">{{ server.sys.osName }}</div></td>
</tr> </tr>
<tr> <tr>
<td class="el-table__cell is-leaf"><div class="cell">服务器IP</div></td> <!-- 服务器IP -->
<td class="el-table__cell is-leaf"><div class="cell">{{ $t('Monitor_Service.server_OS') }}</div></td>
<td class="el-table__cell is-leaf"><div class="cell" v-if="server.sys">{{ server.sys.computerIp }}</div></td> <td class="el-table__cell is-leaf"><div class="cell" v-if="server.sys">{{ server.sys.computerIp }}</div></td>
<td class="el-table__cell is-leaf"><div class="cell">系统架构</div></td> <!-- 系统架构 -->
<td class="el-table__cell is-leaf"><div class="cell">{{ $t('Monitor_Service.server_OSArch') }}</div></td>
<td class="el-table__cell is-leaf"><div class="cell" v-if="server.sys">{{ server.sys.osArch }}</div></td> <td class="el-table__cell is-leaf"><div class="cell" v-if="server.sys">{{ server.sys.osArch }}</div></td>
</tr> </tr>
</tbody> </tbody>
@@ -103,33 +127,41 @@
<el-col :span="24" class="card-box"> <el-col :span="24" class="card-box">
<el-card> <el-card>
<div slot="header"> <div slot="header">
<span><i class="el-icon-coffee-cup"></i> Java虚拟机信息</span> <!-- java虚拟机信息 -->
<span><i class="el-icon-coffee-cup"></i> {{ $t('Monitor_Service.jvm_Information') }}</span>
</div> </div>
<div class="el-table el-table--enable-row-hover el-table--medium"> <div class="el-table el-table--enable-row-hover el-table--medium">
<table cellspacing="0" style="width: 100%;table-layout:fixed;"> <table cellspacing="0" style="width: 100%;table-layout:fixed;">
<tbody> <tbody>
<tr> <tr>
<td class="el-table__cell is-leaf"><div class="cell">Java名称</div></td> <!-- java名称 -->
<td class="el-table__cell is-leaf"><div class="cell">{{ $t('Monitor_Service.jvm_Name') }}</div></td>
<td class="el-table__cell is-leaf"><div class="cell" v-if="server.jvm">{{ server.jvm.name }}</div></td> <td class="el-table__cell is-leaf"><div class="cell" v-if="server.jvm">{{ server.jvm.name }}</div></td>
<td class="el-table__cell is-leaf"><div class="cell">Java版本</div></td> <!-- java版本 -->
<td class="el-table__cell is-leaf"><div class="cell">{{ $t('Monitor_Service.jvm_Version') }}</div></td>
<td class="el-table__cell is-leaf"><div class="cell" v-if="server.jvm">{{ server.jvm.version }}</div></td> <td class="el-table__cell is-leaf"><div class="cell" v-if="server.jvm">{{ server.jvm.version }}</div></td>
</tr> </tr>
<tr> <tr>
<td class="el-table__cell is-leaf"><div class="cell">启动时间</div></td> <!-- 启动时间 -->
<td class="el-table__cell is-leaf"><div class="cell">{{ $t('Monitor_Service.jvm_StartTime') }}</div></td>
<td class="el-table__cell is-leaf"><div class="cell" v-if="server.jvm">{{ server.jvm.startTime }}</div></td> <td class="el-table__cell is-leaf"><div class="cell" v-if="server.jvm">{{ server.jvm.startTime }}</div></td>
<td class="el-table__cell is-leaf"><div class="cell">运行时长</div></td> <!-- 运行时长 -->
<td class="el-table__cell is-leaf"><div class="cell">{{ $t('Monitor_Service.jvm_RunTime') }}</div></td>
<td class="el-table__cell is-leaf"><div class="cell" v-if="server.jvm">{{ server.jvm.runTime }}</div></td> <td class="el-table__cell is-leaf"><div class="cell" v-if="server.jvm">{{ server.jvm.runTime }}</div></td>
</tr> </tr>
<tr> <tr>
<td colspan="1" class="el-table__cell is-leaf"><div class="cell">安装路径</div></td> <!-- 安装路径 -->
<td colspan="1" class="el-table__cell is-leaf"><div class="cell">{{ $t('Monitor_Service.jvm_InstallPath') }}</div></td>
<td colspan="3" class="el-table__cell is-leaf"><div class="cell" v-if="server.jvm">{{ server.jvm.home }}</div></td> <td colspan="3" class="el-table__cell is-leaf"><div class="cell" v-if="server.jvm">{{ server.jvm.home }}</div></td>
</tr> </tr>
<tr> <tr>
<td colspan="1" class="el-table__cell is-leaf"><div class="cell">项目路径</div></td> <!-- 项目路径 -->
<td colspan="1" class="el-table__cell is-leaf"><div class="cell">{{ $t('Monitor_Service.jvm_ProjectPath') }}</div></td>
<td colspan="3" class="el-table__cell is-leaf"><div class="cell" v-if="server.sys">{{ server.sys.userDir }}</div></td> <td colspan="3" class="el-table__cell is-leaf"><div class="cell" v-if="server.sys">{{ server.sys.userDir }}</div></td>
</tr> </tr>
<tr> <tr>
<td colspan="1" class="el-table__cell is-leaf"><div class="cell">运行参数</div></td> <!-- 运行参数 -->
<td colspan="1" class="el-table__cell is-leaf"><div class="cell">{{ $t('Monitor_Service.jvm_Arguments') }}</div></td>
<td colspan="3" class="el-table__cell is-leaf"><div class="cell" v-if="server.jvm">{{ server.jvm.inputArgs }}</div></td> <td colspan="3" class="el-table__cell is-leaf"><div class="cell" v-if="server.jvm">{{ server.jvm.inputArgs }}</div></td>
</tr> </tr>
</tbody> </tbody>
@@ -141,19 +173,27 @@
<el-col :span="24" class="card-box"> <el-col :span="24" class="card-box">
<el-card> <el-card>
<div slot="header"> <div slot="header">
<span><i class="el-icon-receiving"></i> 磁盘状态</span> <!-- 磁盘状态 -->
<span><i class="el-icon-receiving"></i> {{ $t('Monitor_Service.disk_Information') }}</span>
</div> </div>
<div class="el-table el-table--enable-row-hover el-table--medium"> <div class="el-table el-table--enable-row-hover el-table--medium">
<table cellspacing="0" style="width: 100%;"> <table cellspacing="0" style="width: 100%;">
<thead> <thead>
<tr> <tr>
<th class="el-table__cell el-table__cell is-leaf"><div class="cell">盘符路径</div></th> <!-- 盘符路径 -->
<th class="el-table__cell is-leaf"><div class="cell">文件系统</div></th> <th class="el-table__cell el-table__cell is-leaf"><div class="cell">{{ $t('Monitor_Service.disk_Path') }}</div></th>
<th class="el-table__cell is-leaf"><div class="cell">盘符类型</div></th> <!-- 文件系统 -->
<th class="el-table__cell is-leaf"><div class="cell">总大小</div></th> <th class="el-table__cell is-leaf"><div class="cell">{{ $t('Monitor_Service.disk_FileSystem') }}</div></th>
<th class="el-table__cell is-leaf"><div class="cell">可用大小</div></th> <!-- 盘符类型 -->
<th class="el-table__cell is-leaf"><div class="cell">已用大小</div></th> <th class="el-table__cell is-leaf"><div class="cell">{{ $t('Monitor_Service.disk_Type') }}</div></th>
<th class="el-table__cell is-leaf"><div class="cell">已用百分比</div></th> <!-- 总大小 -->
<th class="el-table__cell is-leaf"><div class="cell">{{ $t('Monitor_Service.disk_TotalSize') }}</div></th>
<!-- 可用大小 -->
<th class="el-table__cell is-leaf"><div class="cell">{{ $t('Monitor_Service.disk_AvailableSize') }}</div></th>
<!-- 已用大小 -->
<th class="el-table__cell is-leaf"><div class="cell">{{ $t('Monitor_Service.disk_UsedSize') }}</div></th>
<!-- 已用百分比 -->
<th class="el-table__cell is-leaf"><div class="cell">{{ $t('Monitor_Service.disk_UsedPercent') }}</div></th>
</tr> </tr>
</thead> </thead>
<tbody v-if="server.sysFiles"> <tbody v-if="server.sysFiles">
@@ -200,7 +240,8 @@ export default {
}, },
// 打开加载层 // 打开加载层
openLoading() { openLoading() {
this.$modal.loading("正在加载服务监控数据,请稍候!") // 提示:正在加载服务监控数据,请稍候!
this.$modal.loading(this.$t('Monitor_Service.textLoading'))
} }
} }
} }