add cpu

src/i18n/locales/en-US.ts

@@ -355,6 +355,10 @@ export default {
         title: "Core Network Dashboard",
         fullscreen: "Click on the full-screen display",
         toRouter: "Click to jump to the detail page",
+        psapTitle:'PSAP Dashboard',
+        onlineUser:'Online User',
+        totalUser:'Total User',
+        parallelUser:'Parallel User',
         skim: {
           users: "Users",
           userTitle:'User Information',

src/i18n/locales/zh-CN.ts

@@ -355,6 +355,10 @@ export default {
         title: "核心网系统看板",
         fullscreen: "点击全屏显示",
         toRouter: "点击跳转详情页面",
+        psapTitle:'PSAP看板',
+        onlineUser:'在线用户',
+        totalUser:'总用户',
+        parallelUser:'并行用户',
         skim: {
           users: "用户数",
           userTitle:'用户信息',

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

@@ -1,25 +1,29 @@
 <script setup lang="ts">
 import { defineComponent, ref } from 'vue';
 import TrendChart from './TrendChart.vue';
-
+import useI18n from '@/hooks/useI18n';
+const { t } = useI18n();
 
 // 模拟数据
 const activeCallsData = ref([10, 20, 30, 40, 30, 20, 0]);
 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 systemStorageData = ref([60, 65, 70, 75, 80, 85, 90]);
 
 </script>
 
 <template>
   <a-card>
-    <div style="font-size:32px; font-weight: bold; color: #000; margin-bottom: 20px;">
-      Users</div>
-    <a-row :gutter="[16, 16]">
+    <div style="font-size:32px; font-weight: bold; color: #000; margin-bottom: 20px;    text-align: center;">
+          {{ t('views.dashboard.overview.psapTitle')}}</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">Online Users</div>
+          <div class="card-title">{{ t('views.dashboard.overview.totalUser')}}</div>
           <div class="card-content">
             <div class="trend-chart">
               <TrendChart :data="activeCallsData" color="#4CAF50" />
@@ -37,7 +41,7 @@ const failedCallsData = ref([10, 10, 30, 20, 50, 40, 30]);
 
       <a-col :xs="24" :sm="24" :lg="8">
         <a-card :bordered="false" class="metric-card">
-          <div class="card-title">Total Users</div>
+          <div class="card-title">{{ t('views.dashboard.overview.onlineUser')}}</div>
           <div class="card-content">
             <div class="trend-chart">
               <TrendChart :data="mosData" color="#2196F3" />
@@ -57,7 +61,7 @@ const failedCallsData = ref([10, 10, 30, 20, 50, 40, 30]);
 
       <a-col :xs="24" :sm="24" :lg="8">
         <a-card :bordered="false" class="metric-card">
-          <div class="card-title">Parallel Users</div>
+          <div class="card-title">{{ t('views.dashboard.overview.parallelUser')}}</div>
           <div class="card-content">
             <div class="trend-chart">
               <TrendChart :data="failedCallsData" color="#F44336" />
@@ -71,6 +75,61 @@ const failedCallsData = ref([10, 10, 30, 20, 50, 40, 30]);
           </div>
         </a-card>
       </a-col>
+
+      <a-col :xs="24" :sm="24" :lg="8">
+        <a-card :bordered="false" class="metric-card">
+          <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%
+                <a-icon class="trend-icon up" type="arrow-up" />
+              </div>
+              <div class="metric-change">+20% last 5m</div>
+            </div>
+          </div>
+        </a-card>
+      </a-col>
+
+      <a-col :xs="24" :sm="24" :lg="8">
+        <a-card :bordered="false" class="metric-card">
+          <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%
+                <a-icon class="trend-icon down" type="arrow-down" />
+              </div>
+              <div class="metric-change">-10% last 5m</div>
+            </div>
+          </div>
+        </a-card>
+      </a-col>
+
+      <a-col :xs="24" :sm="24" :lg="8">
+        <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" />
+            </div>
+            <div class="metric-info">
+              <div class="metric-value">
+                90%
+                <a-icon class="trend-icon up" type="arrow-up" />
+              </div>
+              <div class="metric-change">+5% last 5m</div>
+            </div>
+          </div>
+        </a-card>
+      </a-col>
+
     </a-row>
   </a-card>
 </template>