add sysMem
This commit is contained in:
lai
@@ -359,6 +359,8 @@ export default {
|
||||
onlineUser:'Online User',
|
||||
totalUser:'Total User',
|
||||
parallelUser:'Parallel User',
|
||||
userTitle:'User Statistics',
|
||||
sysTitle:'System Resources',
|
||||
skim: {
|
||||
users: "Users",
|
||||
userTitle:'User Information',
|
||||
|
||||
@@ -359,6 +359,8 @@ export default {
|
||||
onlineUser:'在线用户',
|
||||
totalUser:'总用户',
|
||||
parallelUser:'并行用户',
|
||||
userTitle:'用户统计',
|
||||
sysTitle:'系统资源',
|
||||
skim: {
|
||||
users: "用户数",
|
||||
userTitle:'用户信息',
|
||||
|
||||
@@ -5,35 +5,38 @@ import useI18n from '@/hooks/useI18n';
|
||||
const { t } = useI18n();
|
||||
|
||||
// 模拟数据
|
||||
const activeCallsData = ref([10, 20, 30, 40, 30, 20, 0]);
|
||||
const activeCallsData = ref([10, 20, 30, 40, 30, 80, 100]);
|
||||
const mosData = ref([40, 50, 60, 70, 80, 30, 70]);
|
||||
const failedCallsData = ref([10, 10, 30, 20, 50, 40, 30]);
|
||||
|
||||
// 新增三个卡片的模拟数据
|
||||
const networkCpuData = ref([30, 40, 50, 60, 45, 35, 55]);
|
||||
const systemCpuData = ref([20, 30, 45, 55, 65, 50, 40]);
|
||||
const networkCpuData = ref([30, 40, 50, 60, 45, 35, 40]);
|
||||
const systemCpuData = ref([20, 30, 45, 55, 65, 50, 55]);
|
||||
const systemStorageData = ref([60, 65, 70, 75, 80, 85, 90]);
|
||||
const systemMemData = ref([20, 35, 40, 45, 30, 45, 65]);
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<a-card>
|
||||
<div style="font-size:32px; font-weight: bold; color: #000; margin-bottom: 20px; text-align: center;">
|
||||
{{ t('views.dashboard.overview.psapTitle')}}</div>
|
||||
{{ t('views.dashboard.overview.psapTitle') }}</div>
|
||||
|
||||
<div class="row-title">{{ t('views.dashboard.overview.userTitle') }}</div>
|
||||
<a-row :gutter="[48, 48]">
|
||||
<a-col :xs="24" :sm="24" :lg="8">
|
||||
<a-card :bordered="false" class="metric-card">
|
||||
<div class="card-title">{{ t('views.dashboard.overview.totalUser')}}</div>
|
||||
<div class="card-title">{{ t('views.dashboard.overview.totalUser') }}</div>
|
||||
<div class="card-content">
|
||||
<div class="trend-chart">
|
||||
<TrendChart :data="activeCallsData" color="#4CAF50" />
|
||||
</div>
|
||||
<div class="metric-info">
|
||||
<div class="metric-value">
|
||||
0
|
||||
100
|
||||
<a-icon class="trend-icon up" type="arrow-up" />
|
||||
</div>
|
||||
<div class="metric-change">-20 last 5m</div>
|
||||
<div class="metric-change">+20 last 5s</div>
|
||||
</div>
|
||||
</div>
|
||||
</a-card>
|
||||
@@ -41,7 +44,7 @@ const systemStorageData = ref([60, 65, 70, 75, 80, 85, 90]);
|
||||
|
||||
<a-col :xs="24" :sm="24" :lg="8">
|
||||
<a-card :bordered="false" class="metric-card">
|
||||
<div class="card-title">{{ t('views.dashboard.overview.onlineUser')}}</div>
|
||||
<div class="card-title">{{ t('views.dashboard.overview.onlineUser') }}</div>
|
||||
<div class="card-content">
|
||||
<div class="trend-chart">
|
||||
<TrendChart :data="mosData" color="#2196F3" />
|
||||
@@ -51,7 +54,7 @@ const systemStorageData = ref([60, 65, 70, 75, 80, 85, 90]);
|
||||
70
|
||||
<a-icon class="trend-icon right" type="arrow-right" />
|
||||
</div>
|
||||
<div class="metric-change">+40 last 5m</div>
|
||||
<div class="metric-change">+40 last 5s</div>
|
||||
</div>
|
||||
</div>
|
||||
</a-card>
|
||||
@@ -61,7 +64,7 @@ const systemStorageData = ref([60, 65, 70, 75, 80, 85, 90]);
|
||||
|
||||
<a-col :xs="24" :sm="24" :lg="8">
|
||||
<a-card :bordered="false" class="metric-card">
|
||||
<div class="card-title">{{ t('views.dashboard.overview.parallelUser')}}</div>
|
||||
<div class="card-title">{{ t('views.dashboard.overview.parallelUser') }}</div>
|
||||
<div class="card-content">
|
||||
<div class="trend-chart">
|
||||
<TrendChart :data="failedCallsData" color="#F44336" />
|
||||
@@ -70,51 +73,75 @@ const systemStorageData = ref([60, 65, 70, 75, 80, 85, 90]);
|
||||
<div class="metric-value">
|
||||
30
|
||||
</div>
|
||||
<div class="metric-change">-10 last 5m</div>
|
||||
<div class="metric-change">-10 last 5s</div>
|
||||
</div>
|
||||
</div>
|
||||
</a-card>
|
||||
</a-col>
|
||||
|
||||
<a-col :xs="24" :sm="24" :lg="8">
|
||||
</a-row>
|
||||
|
||||
<div class="row-title" style="margin-top: 100px;"> {{ t('views.dashboard.overview.sysTitle') }} </div>
|
||||
|
||||
<a-row :gutter="[48, 48]">
|
||||
<a-col :xs="24" :sm="24" :lg="6">
|
||||
<a-card :bordered="false" class="metric-card">
|
||||
<div class="card-title">{{t('views.dashboard.overview.resources.neCpu')}}</div>
|
||||
<div class="card-title">{{ t('views.dashboard.overview.resources.neCpu') }}</div>
|
||||
<div class="card-content">
|
||||
<div class="trend-chart">
|
||||
<TrendChart :data="networkCpuData" color="#FF9800" />
|
||||
</div>
|
||||
<div class="metric-info">
|
||||
<div class="metric-value">
|
||||
55%
|
||||
40%
|
||||
<a-icon class="trend-icon up" type="arrow-up" />
|
||||
</div>
|
||||
<div class="metric-change">+20% last 5m</div>
|
||||
<div class="metric-change">+5% last 5s</div>
|
||||
</div>
|
||||
</div>
|
||||
</a-card>
|
||||
</a-col>
|
||||
|
||||
<a-col :xs="24" :sm="24" :lg="8">
|
||||
<a-col :xs="24" :sm="24" :lg="6">
|
||||
<a-card :bordered="false" class="metric-card">
|
||||
<div class="card-title">{{t('views.dashboard.overview.resources.sysCpu')}}</div>
|
||||
<div class="card-title">{{ t('views.dashboard.overview.resources.sysCpu') }}</div>
|
||||
<div class="card-content">
|
||||
<div class="trend-chart">
|
||||
<TrendChart :data="systemCpuData" color="#9C27B0" />
|
||||
</div>
|
||||
<div class="metric-info">
|
||||
<div class="metric-value">
|
||||
40%
|
||||
55%
|
||||
<a-icon class="trend-icon down" type="arrow-down" />
|
||||
</div>
|
||||
<div class="metric-change">-10% last 5m</div>
|
||||
<div class="metric-change">+5% last 5s</div>
|
||||
</div>
|
||||
</div>
|
||||
</a-card>
|
||||
</a-col>
|
||||
|
||||
<a-col :xs="24" :sm="24" :lg="8">
|
||||
|
||||
<a-col :xs="24" :sm="24" :lg="6">
|
||||
<a-card :bordered="false" class="metric-card">
|
||||
<div class="card-title">{{t('views.dashboard.overview.resources.sysDisk')}}</div>
|
||||
<div class="card-title">{{ t('views.dashboard.overview.resources.sysMem') }}</div>
|
||||
<div class="card-content">
|
||||
<div class="trend-chart">
|
||||
<TrendChart :data="systemMemData" color="#CDDC39" />
|
||||
</div>
|
||||
<div class="metric-info">
|
||||
<div class="metric-value">
|
||||
65%
|
||||
<a-icon class="trend-icon up" type="arrow-up" />
|
||||
</div>
|
||||
<div class="metric-change">+20% last 5s</div>
|
||||
</div>
|
||||
</div>
|
||||
</a-card>
|
||||
</a-col>
|
||||
|
||||
<a-col :xs="24" :sm="24" :lg="6">
|
||||
<a-card :bordered="false" class="metric-card">
|
||||
<div class="card-title">{{ t('views.dashboard.overview.resources.sysDisk') }}</div>
|
||||
<div class="card-content">
|
||||
<div class="trend-chart">
|
||||
<TrendChart :data="systemStorageData" color="#00BCD4" />
|
||||
@@ -124,17 +151,28 @@ const systemStorageData = ref([60, 65, 70, 75, 80, 85, 90]);
|
||||
90%
|
||||
<a-icon class="trend-icon up" type="arrow-up" />
|
||||
</div>
|
||||
<div class="metric-change">+5% last 5m</div>
|
||||
<div class="metric-change">+5% last 5s</div>
|
||||
</div>
|
||||
</div>
|
||||
</a-card>
|
||||
</a-col>
|
||||
|
||||
|
||||
|
||||
</a-row>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.row-title {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-bottom: 16px;
|
||||
padding-left: 8px;
|
||||
border-left: 3px solid #1890ff;
|
||||
}
|
||||
|
||||
.dashboard-cards {
|
||||
padding: 16px;
|
||||
}
|
||||
@@ -164,6 +202,7 @@ const systemStorageData = ref([60, 65, 70, 75, 80, 85, 90]);
|
||||
.metric-info {
|
||||
margin-left: 16px;
|
||||
text-align: right;
|
||||
min-width: 90px;
|
||||
}
|
||||
|
||||
.full-width {
|
||||
|
||||
Reference in New Issue
Block a user