add realData

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

@@ -1,25 +1,207 @@
 <script setup lang="ts">
-import { defineComponent, ref } from 'vue';
+import {
+  reactive,
+  onMounted,
+  onBeforeUnmount,
+  markRaw,
+  useTemplateRef, ref
+} from 'vue';
 import TrendChart from './TrendChart.vue';
 import useI18n from '@/hooks/useI18n';
+import { listNeInfo } from '@/api/ne/neInfo';
+import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
+
 const { t } = useI18n();
 
+/**10s调度器 */
+const interval10s = ref<any>(null);
+
 // 模拟数据
 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, 40]);
+const networkCpuData = ref([]);
-const systemCpuData = ref([20, 30, 45, 55, 65, 50, 55]);
+const systemCpuData = ref([]);
-const systemStorageData = ref([60, 65, 70, 75, 80, 85, 90]);
+const systemStorageData = ref([]);
-const systemMemData = ref([20, 35, 40, 45, 30, 45, 65]);
+const systemMemData = ref([]);
+
+
+// 是否是第一次加载数据
+const isFirstLoad = ref(true);
+
+// 更新图表数据的函数
+function updateChartData(newValue: number, dataArray: any) {
+  // 如果是第一次加载，用当前值填充整个数组
+  if (isFirstLoad.value) {
+    dataArray.value = Array(7).fill(newValue);
+  } else {
+    // 非第一次加载，正常更新数据（移除第一个，添加新值）
+    const newData = [...dataArray.value];
+    newData.shift();
+    newData.push(newValue);
+    dataArray.value = newData;
+  }
+}
+
+// 当前资源使用率
+const currentNfCpuUsage = ref(0);
+const currentSysCpuUsage = ref(0);
+const currentSysDiskUsage = ref(0);
+const currentSysMemUsage = ref(0);
+
+// 上一次的资源使用率
+const prevNfCpuUsage = ref(0);
+const prevSysCpuUsage = ref(0);
+const prevSysDiskUsage = ref(0);
+const prevSysMemUsage = ref(0);
+
+// 资源变化百分比
+const nfCpuChange = ref(0);
+const sysCpuChange = ref(0);
+const sysDiskChange = ref(0);
+const sysMemChange = ref(0);
+
+/**解析网元状态携带的资源利用率 */
+function parseResouresUsage(neState: Record<string, any>) {
+  let sysCpuUsage = 0;
+  let nfCpuUsage = 0;
+  if (neState.cpu) {
+    nfCpuUsage = neState.cpu.nfCpuUsage;
+    const nfCpu = +(nfCpuUsage / 100);
+    nfCpuUsage = +nfCpu.toFixed(2);
+    if (nfCpuUsage > 100) {
+      nfCpuUsage = 100;
+    }
+
+    sysCpuUsage = neState.cpu.sysCpuUsage;
+    const sysCpu = +(sysCpuUsage / 100);
+    sysCpuUsage = +sysCpu.toFixed(2);
+    if (sysCpuUsage > 100) {
+      sysCpuUsage = 100;
+    }
+  }
+
+  let sysMemUsage = 0;
+  if (neState.mem) {
+    const men = neState.mem.sysMemUsage;
+    sysMemUsage = +(men / 100).toFixed(2);
+    if (sysMemUsage > 100) {
+      sysMemUsage = 100;
+    }
+  }
+
+  let sysDiskUsage = 0;
+  if (neState.disk && Array.isArray(neState.disk.partitionInfo)) {
+    let disks: any[] = neState.disk.partitionInfo;
+    disks = disks.sort((a, b) => +b.used - +a.used);
+    if (disks.length > 0) {
+      const { total, used } = disks[0];
+      sysDiskUsage = +((used / total) * 100).toFixed(2);
+    }
+  }
+  return {
+    sysDiskUsage,
+    sysMemUsage,
+    sysCpuUsage,
+    nfCpuUsage,
+  };
+}
+
+// 计算变化百分比
+function calculateChange(current: number, previous: number): number {
+  if (previous === 0) return 0;
+  return Number(((current - previous) * 100 / previous).toFixed(1));
+}
+
+let tableState: any = [];
+
+
+function fnGetList() {
+  listNeInfo({
+    neType: 'MF',
+    bandStatus: true,
+    pageNum: 1,
+    pageSize: 20,
+  })
+    .then(res => {
+      if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.rows) && res.rows.length > 0) {
+        // 获取第一个网元的资源使用情况
+        const item = res.rows[0];
+        let resouresUsage = {
+          sysDiskUsage: 0,
+          sysMemUsage: 0,
+          sysCpuUsage: 0,
+          nfCpuUsage: 0,
+        };
+
+        const neState = item.serverState;
+        if (neState) {
+          resouresUsage = parseResouresUsage(neState);
+        }
+
+        // 保存上一次的值
+        prevNfCpuUsage.value = currentNfCpuUsage.value;
+        prevSysCpuUsage.value = currentSysCpuUsage.value;
+        prevSysDiskUsage.value = currentSysDiskUsage.value;
+        prevSysMemUsage.value = currentSysMemUsage.value;
+
+        // 更新当前值
+        currentNfCpuUsage.value = resouresUsage.nfCpuUsage;
+        currentSysCpuUsage.value = resouresUsage.sysCpuUsage;
+        currentSysDiskUsage.value = resouresUsage.sysDiskUsage;
+        currentSysMemUsage.value = resouresUsage.sysMemUsage;
+
+
+        // 计算变化百分比
+        nfCpuChange.value = calculateChange(currentNfCpuUsage.value, prevNfCpuUsage.value);
+        sysCpuChange.value = calculateChange(currentSysCpuUsage.value, prevSysCpuUsage.value);
+        sysDiskChange.value = calculateChange(currentSysDiskUsage.value, prevSysDiskUsage.value);
+        sysMemChange.value = calculateChange(currentSysMemUsage.value, prevSysMemUsage.value);
+
+        // 更新图表数据
+        updateChartData(currentNfCpuUsage.value, networkCpuData);
+        updateChartData(currentSysCpuUsage.value, systemCpuData);
+        updateChartData(currentSysDiskUsage.value, systemStorageData);
+        updateChartData(currentSysMemUsage.value, systemMemData);
+
+        // 第一次加载完成后，设置标志为false
+        if (isFirstLoad.value) {
+          isFirstLoad.value = false;
+        }
+
+      }
+    })
+
+
+}
+
+
+onMounted(() => {
+  // 初始获取数据
+  fnGetList();
+
+  // 设置10秒定时器
+  interval10s.value = setInterval(() => {
+    fnGetList();
+  }, 10000);
+});
+
+// 组件销毁前清除定时器
+onBeforeUnmount(() => {
+  if (interval10s.value) {
+    clearInterval(interval10s.value);
+    interval10s.value = null;
+  }
+});
+
 
 </script>
 
 <template>
   <a-card>
-    <div style="font-size:32px; font-weight: bold; color: #000; margin-bottom: 20px;    text-align: center;">
+    <div style="font-size:32px; font-weight: bold;  margin-bottom: 20px;    text-align: center;">
       {{ t('views.dashboard.overview.psapTitle') }}</div>
 
     <div class="row-title">{{ t('views.dashboard.overview.userTitle') }}</div>
@@ -83,6 +265,8 @@ const systemMemData = ref([20, 35, 40, 45, 30, 45, 65]);
 
     <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">
@@ -93,10 +277,11 @@ const systemMemData = ref([20, 35, 40, 45, 30, 45, 65]);
             </div>
             <div class="metric-info">
               <div class="metric-value">
-                40%
+                {{ currentNfCpuUsage }}%
-                <a-icon class="trend-icon up" type="arrow-up" />
+                <a-icon :class="['trend-icon', nfCpuChange >= 0 ? 'up' : 'down']"
+                  :type="nfCpuChange >= 0 ? 'arrow-up' : 'arrow-down'" />
               </div>
-              <div class="metric-change">+5% last 5s</div>
+              <div class="metric-change">{{ nfCpuChange >= 0 ? '+' : '' }}{{ nfCpuChange }}% last 10s</div>
             </div>
           </div>
         </a-card>
@@ -111,10 +296,11 @@ const systemMemData = ref([20, 35, 40, 45, 30, 45, 65]);
             </div>
             <div class="metric-info">
               <div class="metric-value">
-                55%
+                {{ currentSysCpuUsage }}%
-                <a-icon class="trend-icon down" type="arrow-down" />
+                <a-icon :class="['trend-icon', sysCpuChange >= 0 ? 'up' : 'down']"
+                  :type="sysCpuChange >= 0 ? 'arrow-up' : 'arrow-down'" />
               </div>
-              <div class="metric-change">+5% last 5s</div>
+              <div class="metric-change">{{ sysCpuChange >= 0 ? '+' : '' }}{{ sysCpuChange }}% last 10s</div>
             </div>
           </div>
         </a-card>
@@ -130,15 +316,16 @@ const systemMemData = ref([20, 35, 40, 45, 30, 45, 65]);
             </div>
             <div class="metric-info">
               <div class="metric-value">
-                65%
+                {{ currentSysMemUsage }}%
-                <a-icon class="trend-icon up" type="arrow-up" />
+                <a-icon :class="['trend-icon', sysMemChange >= 0 ? 'up' : 'down']"
+                  :type="sysMemChange >= 0 ? 'arrow-up' : 'arrow-down'" />
               </div>
-              <div class="metric-change">+20% last 5s</div>
+              <div class="metric-change">{{ sysMemChange >= 0 ? '+' : '' }}{{ sysMemChange }}% last 10s</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>
@@ -148,10 +335,11 @@ const systemMemData = ref([20, 35, 40, 45, 30, 45, 65]);
             </div>
             <div class="metric-info">
               <div class="metric-value">
-                90%
+                {{ currentSysDiskUsage }}%
-                <a-icon class="trend-icon up" type="arrow-up" />
+                <a-icon :class="['trend-icon', sysDiskChange >= 0 ? 'up' : 'down']"
+                  :type="sysDiskChange >= 0 ? 'arrow-up' : 'arrow-down'" />
               </div>
-              <div class="metric-change">+5% last 5s</div>
+              <div class="metric-change">{{ sysDiskChange >= 0 ? '+' : '' }}{{ sysDiskChange }}% last 10s</div>
             </div>
           </div>
         </a-card>
@@ -167,7 +355,6 @@ const systemMemData = ref([20, 35, 40, 45, 30, 45, 65]);
 .row-title {
   font-size: 20px;
   font-weight: 600;
-  color: #333;
   margin-bottom: 16px;
   padding-left: 8px;
   border-left: 3px solid #1890ff;