add sysMem

src/i18n/locales/en-US.ts

@@ -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',

src/i18n/locales/zh-CN.ts

@@ -359,6 +359,8 @@ export default {
         onlineUser:'在线用户',
         totalUser:'总用户',
         parallelUser:'并行用户',
+        userTitle:'用户统计',
+        sysTitle:'系统资源',
         skim: {
           users: "用户数",
           userTitle:'用户信息',

src/views/dashboard/overview/components/mfOverview/DashboardCards.vue

@@ -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 networkCpuData = ref([30, 40, 50, 60, 45, 35, 40]);
-const systemCpuData = ref([20, 30, 45, 55, 65, 50, 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 {