ソースを参照

[Mod 0000]数据中心首页调整

wangkeyi 4 日 前
コミット
802ce7f6c8

+ 45 - 12
src/views/vent/dataCenter/infoCenter/index.vue

@@ -32,14 +32,14 @@
                 <div class="item-icon icon4"></div>
                 <div>
                   <div class="label">消息总数量(条)</div>
-                  <div class="value status-normal">{{ deviceData.collectTotalNum }}</div>
+                  <div class="value status-normal">{{ formatNumber(deviceData.collectTotalNum) }}</div>
                 </div>
               </div>
               <div class="data-item">
                 <div class="item-icon icon5"></div>
                 <div>
                   <div class="label">共享接口数量</div>
-                  <div class="value status-normal">2</div>
+                  <div class="value status-normal">{{ deviceData.summaryShareAPINum }}</div>
                 </div>
               </div>
             </div>
@@ -59,7 +59,7 @@
           <template #title> 系统数据量排名 </template>
           <template #container>
             <div class="content-wrapper">
-              <a-table size="small" :dataSource="deviceData.collectDataByStationList" :columns="sysDataColumn" :pagination="false" />
+              <a-table size="small" :dataSource="deviceData.collectGroupByDevKindList" :columns="sysDataColumn" :pagination="false" />
             </div>
           </template>
         </infoBox>
@@ -111,8 +111,27 @@
       total_size_gb: 0,
     },
     collectTotalNum: 0,
-    collectDataByStationList: [],
-    collectDataByDayList: [],
+    summaryShareAPINum: 0,
+    collectDataByStationList: [
+      {
+        sub_id: '1',
+        strName: '测试分站',
+        total_num: 0,
+      },
+    ],
+    collectDataByDayList: [
+      {
+        day: '2025-10-29',
+        total_count: 0,
+      },
+    ],
+    collectGroupByDevKindList: [
+      {
+        devKind: 'bundletube',
+        devNum: 0,
+        dataCount: 0,
+      },
+    ],
   });
   // 查看数据
   function viewData(record) {
@@ -132,20 +151,34 @@
   // 获取设备数据接口
   const fetchDeviceData = async () => {
     try {
-      // 获取首页汇总指标数据
-      deviceData.value = await getHomepageSummaryIndexes();
-      // 获取设备接入情况数据
-      const response = await getDeviceAll({
+      const summaryRes = await getHomepageSummaryIndexes();
+      deviceData.value = summaryRes;
+    } catch (error) {
+      console.error('获取首页汇总指标数据失败:', error);
+    }
+
+    try {
+      const deviceRes = await getDeviceAll({
         pageNo: pagination.current,
         pageSize: pagination.pageSize,
       });
-      accessStatusData.value = response.records; // 赋值给响应式变量
-      pagination.total = response.total; // 更新总条数
+      accessStatusData.value = deviceRes.records;
+      pagination.total = deviceRes.total;
     } catch (error) {
-      console.error('获取设备数据失败:', error);
+      console.error('获取设备接入情况数据失败:', error);
     }
   };
 
+  // 数字千位分隔格式化函数
+  const formatNumber = (num: number | string): string => {
+    // 处理非数字或空值的情况
+    if (!num && num !== 0) return '0';
+    // 转换为数字后再处理,避免字符串类型的数字出现问题
+    const number = typeof num === 'number' ? num : parseFloat(num);
+    // 利用正则表达式实现千位分隔
+    return number.toLocaleString('zh-CN');
+  };
+
   // 页面挂载时调用接口获取数据
   onMounted(async () => {
     await fetchDeviceData();

+ 5 - 75
src/views/vent/dataCenter/infoCenter/infoCenter.data.ts

@@ -58,19 +58,18 @@ export const sysDataColumn: BasicColumn[] = [
     },
   },
   {
-    title: '分站id',
-    dataIndex: 'sub_id',
+    title: '设备类别',
+    dataIndex: 'devKind',
     align: 'center',
-    ifShow: false,
   },
   {
-    title: '分站名称',
-    dataIndex: 'strName',
+    title: '设备数量',
+    dataIndex: 'devNum',
     align: 'center',
   },
   {
     title: '数据采集量',
-    dataIndex: 'total_num',
+    dataIndex: 'dataCount',
     align: 'center',
   },
 ];
@@ -87,7 +86,6 @@ export const accessStatusColumn: BasicColumn[] = [
     dataIndex: 'devicekind_dictText',
     align: 'center',
   },
-
   {
     title: '设备接入时间',
     dataIndex: 'createTime',
@@ -131,71 +129,3 @@ export const dailyNumOption: ModuleDataChart = {
   yAxis: [{ show: true, name: '', position: 'left' }],
   series: [{ readFrom: 'collectDataByDayList', xprop: 'day', yprop: 'total_count', label: '' }],
 };
-
-// 模拟设备数据
-export const deviceData = {
-  monitorParamsCount: 1727,
-  deviceCount: 4,
-  databaseDiskUsage: 10165,
-  collectDataByStationList: [
-    {
-      sub_id: '1696417397868986370',
-      strName: '调试http协议束管',
-      total_num: 258,
-    },
-    {
-      sub_id: '1696417397868986370',
-      strName: '调试http协议束管',
-      total_num: 256,
-    },
-    {
-      sub_id: '1696417397868986370',
-      strName: '调试http协议束管',
-      total_num: 254,
-    },
-    {
-      sub_id: '1696417397868986370',
-      strName: '调试http协议束管',
-      total_num: 252,
-    },
-  ],
-  collectTotalNum: 258,
-  collectDataByDayList: [
-    {
-      day: '2025-10-29',
-      total_count: '30',
-    },
-    {
-      day: '2025-10-30',
-      total_count: '165',
-    },
-    {
-      day: '2025-10-31',
-      total_count: '63',
-    },
-    {
-      day: '2025-11-01',
-      total_count: '30',
-    },
-    {
-      day: '2025-11-02',
-      total_count: '165',
-    },
-    {
-      day: '2025-11-03',
-      total_count: '63',
-    },
-    {
-      day: '2025-11-04',
-      total_count: '30',
-    },
-    {
-      day: '2025-11-05',
-      total_count: '165',
-    },
-    {
-      day: '2025-11-06',
-      total_count: '63',
-    },
-  ],
-};