本指南詳細說(shuō)明如何在TopPanel組件中集成GetCategoryStatisticsAsync
統計接口,實(shí)現首頁(yè)數值的動(dòng)態(tài)顯示。
已創(chuàng )建 src/api/dashboard.ts
文件,包含:
GetCategoryStatisticsAsync
: 原始API調用接口getDashboardPanelData
: 帶錯誤處理的封裝方法CategoryStatistics
: 數據類(lèi)型定義組件掛載 -> fetchPanelData() -> GetCategoryStatisticsAsync() -> 更新panelData -> 重新渲染
↓
錯誤處理 -> 使用PANE_LIST降級數據 -> 確保頁(yè)面正常顯示
// 組件會(huì )自動(dòng)獲取數據,無(wú)需手動(dòng)調用
// 數據獲取失敗時(shí)會(huì )使用默認的PANE_LIST數據
// 如果需要手動(dòng)刷新數據
const refreshData = async () => {
await fetchPanelData();
};
<template>
<div v-if="loading" class="loading-container">
<t-loading />
</div>
<t-row v-else :gutter="[16, 16]">
<!-- 現有內容 -->
</t-row>
</template>
{
title: 'pages.dashboardBase.topPanel.card1',
number: '¥ 28,425.00',
upTrend: '20.5%',
leftType: 'echarts-line',
}
{
id: '1',
title: 'pages.dashboardBase.topPanel.card1',
number: '¥ 126,560',
leftType: 'echarts-line',
upTrend: '20.5%',
desc: '自上月',
}
const CACHE_DURATION = 5 * 60 * 1000; // 5分鐘緩存
let cacheData: CategoryStatistics[] | null = null;
let cacheTime = 0;
const fetchPanelData = async () => {
const now = Date.now();
if (cacheData && (now - cacheTime) < CACHE_DURATION) {
panelData.value = cacheData;
return;
}
// ... 正常獲取數據邏輯
};
// 每5分鐘自動(dòng)更新一次數據
onMounted(() => {
fetchPanelData();
setInterval(fetchPanelData, 5 * 60 * 1000);
});
如果需要在開(kāi)發(fā)環(huán)境使用Mock數據,可以配置:
// mock/dashboard.ts
export default [
{
url: '/api/dashboard/category-statistics',
method: 'get',
response: () => ({
code: 200,
message: 'success',
data: [
{
id: '1',
title: 'pages.dashboardBase.topPanel.card1',
number: '¥ 126,560',
leftType: 'echarts-line',
upTrend: '20.5%',
desc: '自上月',
},
// ... 其他數據
]
})
}
];
A: 作為降級數據,確保API失敗時(shí)頁(yè)面仍能正常顯示。
A: 修改src/api/dashboard.ts
中的API路徑即可。
A: 支持echarts-line
、echarts-bar
、icon-usergroup
、icon-file-paste
。
A: 在A(yíng)PI返回數據中添加新項,組件會(huì )自動(dòng)渲染。
通過(guò)本次集成,TopPanel組件現在具備了:
? 動(dòng)態(tài)數據獲取: 從靜態(tài)數據升級為API動(dòng)態(tài)數據
? 錯誤容錯: 完善的錯誤處理和降級策略
? 類(lèi)型安全: 完整的TypeScript類(lèi)型定義
? 向后兼容: 保持原有功能完全兼容
? 文檔完善: 詳細的使用說(shuō)明和API文檔
現在你可以通過(guò)后端API動(dòng)態(tài)控制首頁(yè)面板顯示的統計數據,同時(shí)保持良好的用戶(hù)體驗。