LiuRui/DJKB
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(api): 更新优秀录音文件接口路径并添加缓存系统

Browse Source 
refactor(views): 在多个视图组件中实现数据缓存机制

为API接口更新路径并添加全面的缓存系统，包括：
1. 修改优秀录音文件接口路径
2. 实现30分钟有效期的缓存机制
3. 添加缓存管理功能（清除、查看状态）
4. 在topOne、secondTop和seniorManager视图组件中应用缓存
5. 开发环境下暴露缓存管理函数方便调试
This commit is contained in:
lbw_9527443
2025-08-27 14:04:04 +08:00
parent dd913f4d14
commit d4daed2ec1
4 changed files with 430 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files

221
my-vue-app/src/views/topOne/topone.vue
View File

@@ -104,6 +104,100 @@ import { getOverallCompanyPerformance,getCompanyDepositConversionRate,getCompany
,getCompanyConversionRateVsLast,getSalesMonthlyPerformance,getCustomerTypeDistribution,getUrgentNeedToAddress,getLevelTree,getDetailedDataTable,getExcellentRecordFile } from "@/api/top";
import { useUserStore } from "@/stores/user.js";
// 缓存系统
const cache = new Map();
const CACHE_DURATION = 30 * 60 * 1000; // 30分钟
// 缓存工具函数
const getCacheKey = (functionName, params = {}) => {
return `${functionName}_${JSON.stringify(params)}`;
};
const isValidCache = (cacheItem) => {
return cacheItem && (Date.now() - cacheItem.timestamp) < CACHE_DURATION;
};
const setCache = (key, data) => {
cache.set(key, {
data,
timestamp: Date.now()
});
};
const getCache = (key) => {
const cacheItem = cache.get(key);
if (isValidCache(cacheItem)) {
return cacheItem.data;
}
return null;
};
// 带缓存的API调用包装器
const withCache = async (cacheKey, apiCall) => {
const cachedData = getCache(cacheKey);
if (cachedData) {
console.log(`使用缓存数据: ${cacheKey}`);
return cachedData;
}
try {
const result = await apiCall();
setCache(cacheKey, result);
console.log(`缓存新数据: ${cacheKey}`);
return result;
} catch (error) {
console.error(`API调用失败: ${cacheKey}`, error);
throw error;
}
};
// 清除缓存函数
const clearCache = () => {
cache.clear();
console.log('所有缓存已清除');
};
// 清除特定缓存
const clearSpecificCache = (functionName, params = {}) => {
const cacheKey = getCacheKey(functionName, params);
cache.delete(cacheKey);
console.log(`已清除缓存: ${cacheKey}`);
};
// 获取缓存状态信息
const getCacheInfo = () => {
const cacheEntries = Array.from(cache.entries());
const validEntries = cacheEntries.filter(([key, value]) => isValidCache(value));
const expiredEntries = cacheEntries.filter(([key, value]) => !isValidCache(value));
// 清除过期缓存
expiredEntries.forEach(([key]) => cache.delete(key));
return {
totalCached: validEntries.length,
expiredCleaned: expiredEntries.length,
cacheKeys: validEntries.map(([key]) => key)
};
};
// 强制刷新所有数据（清除缓存并重新获取）
const forceRefreshAllData = async () => {
clearCache();
console.log('开始强制刷新所有数据...');
await getRealTimeProgress();
await getTotalDeals();
await getConversionComparison('month');
await getCompanySalesRank('red');
await getCustomerTypeRatio('child_education');
await getCustomerUrgency();
await CusotomGetLevelTree();
await getDetailData();
await CenterExcellentRecord();
console.log('所有数据刷新完成');
};
const rankingPeriod = ref("month");
const rankingData = ref([
{ id: 1, name: "张三", department: "销售一部", performance: 125000 },
@@ -149,9 +243,9 @@ const filteredTableData = computed(() => {
});
// 方法
const refreshData = () => {
// 刷新数据逻辑
console.log("刷新数据");
const refreshData = async () => {
// 强制刷新所有数据
await forceRefreshAllData();
};
// 处理时间范围变化
@@ -256,18 +350,32 @@ const totalDeals = ref({});
// 核心数据--总成交金额
async function getTotalDeals() {
try {
const cacheKey = getCacheKey('getTotalDeals');
const cachedResult = getCache(cacheKey);
if (cachedResult) {
console.log('使用缓存数据: getTotalDeals');
totalDeals.value = cachedResult;
return;
}
const res1 = await getOverallCompanyPerformance()
const res2=await getCompanyDepositConversionRate()
const res3=await getCompanyTotalCallCount()
const res4=await getCompanyNewCustomer()
const res5=await getCompanyConversionRate()
totalDeals.value={
const result = {
totalDeal:res1.data, //总成交单数
DingconversionRate:res2.data, //定金转化率
totalCallCount:res3.data, // 总通话
newCustomer:res4.data, //新客户
conversionRate:res5.data,//转化率
}
};
totalDeals.value = result;
setCache(cacheKey, result);
console.log('缓存新数据: getTotalDeals');
} catch (error) {
console.error("获取总成交金额失败:", error);
@@ -280,9 +388,12 @@ const realTimeProgress = ref({});
async function getRealTimeProgress() {
try {
const res = await getCompanyRealTimeProgress()
// console.log(111111,res)
realTimeProgress.value = res.data
const cacheKey = getCacheKey('getRealTimeProgress');
const result = await withCache(cacheKey, async () => {
const res = await getCompanyRealTimeProgress();
return res.data;
});
realTimeProgress.value = result;
} catch (error) {
console.error("获取实时进度失败:", error);
}
@@ -360,9 +471,13 @@ async function getConversionComparison(data) {
check_type:data //month periods
}
try {
const res = await getCompanyConversionRateVsLast(params)
console.log(111111,res)
conversionComparison.value = res.data
const cacheKey = getCacheKey('getConversionComparison', params);
const result = await withCache(cacheKey, async () => {
const res = await getCompanyConversionRateVsLast(params);
return res.data;
});
console.log(111111,result);
conversionComparison.value = result;
} catch (error) {
console.error("获取转化对比失败:", error);
}
@@ -411,8 +526,12 @@ async function getCompanySalesRank(Rank) {
rank_type:Rank,
}
try {
const res = await getSalesMonthlyPerformance(params)
companySalesRank.value = res.data
const cacheKey = getCacheKey('getCompanySalesRank', params);
const result = await withCache(cacheKey, async () => {
const res = await getSalesMonthlyPerformance(params);
return res.data;
});
companySalesRank.value = result;
} catch (error) {
console.error("获取销售月度业绩红黑榜失败:", error);
}
@@ -425,8 +544,12 @@ async function getCustomerTypeRatio(data) {
distribution_type:data // child_education territory occupation
}
try {
const res = await getCustomerTypeDistribution(params)
customerTypeRatio.value = res.data
const cacheKey = getCacheKey('getCustomerTypeRatio', params);
const result = await withCache(cacheKey, async () => {
const res = await getCustomerTypeDistribution(params);
return res.data;
});
customerTypeRatio.value = result;
} catch (error) {
console.error("获取客户类型占比失败:", error);
}
@@ -437,12 +560,17 @@ const problemRankingData = ref([]);
async function getCustomerUrgency() {
try {
const res = await getUrgentNeedToAddress()
customerUrgency.value = res.data
const cacheKey = getCacheKey('getCustomerUrgency');
const result = await withCache(cacheKey, async () => {
const res = await getUrgentNeedToAddress();
return res.data;
});
customerUrgency.value = result;
// 将API返回的数据转换为ProblemRanking组件需要的格式
if (res.data && res.data.company_urgent_issue_ratio) {
problemRankingData.value = Object.entries(res.data.company_urgent_issue_ratio).map(([name, value]) => ({
if (result && result.company_urgent_issue_ratio) {
problemRankingData.value = Object.entries(result.company_urgent_issue_ratio).map(([name, value]) => ({
name,
value
}));
@@ -455,8 +583,12 @@ async function getCustomerUrgency() {
const levelTree = ref({});
async function CusotomGetLevelTree() {
try {
const res = await getLevelTree()
levelTree.value = res.data
const cacheKey = getCacheKey('CusotomGetLevelTree');
const result = await withCache(cacheKey, async () => {
const res = await getLevelTree();
return res.data;
});
levelTree.value = result;
} catch (error) {
console.error("获取级别树失败:", error);
}
@@ -464,21 +596,18 @@ async function CusotomGetLevelTree() {
// 获取详细数据表格
const detailData = ref({});
async function getDetailData(params) {
if(params?.center_leader){
try {
const res = await getDetailedDataTable(params)
detailData.value = res.data
const cacheKey = getCacheKey('getDetailData', params || {});
const result = await withCache(cacheKey, async () => {
const res = params?.center_leader
? await getDetailedDataTable(params)
: await getDetailedDataTable();
return res.data;
});
detailData.value = result;
} catch (error) {
console.error("获取详细数据表格失败:", error);
}
}else{
try {
const res = await getDetailedDataTable()
detailData.value = res.data
} catch (error) {
console.error("获取详细数据表格失败:", error);
}
}
}
// 处理筛选器变化
@@ -494,15 +623,21 @@ const params={
user_name:userStore.userInfo.username
}
try {
const res = await getExcellentRecordFile(params)
excellentRecord.value = res.data.excellent_record_list
console.log(111111,res.data.excellent_record_list)
const cacheKey = getCacheKey('CenterExcellentRecord', params);
const result = await withCache(cacheKey, async () => {
const res = await getExcellentRecordFile(params);
return res.data.excellent_record_list;
});
excellentRecord.value = result;
console.log(111111,result);
} catch (error) {
console.error("获取优秀录音失败:", error);
}
}
onMounted(async() => {
// 页面初始化逻辑
console.log('页面初始化，开始加载数据...');
await getRealTimeProgress()
await getTotalDeals()
await getConversionComparison('month')
@@ -512,6 +647,22 @@ onMounted(async() => {
await CusotomGetLevelTree()
await getDetailData()
await CenterExcellentRecord()
// 输出缓存状态信息
const cacheInfo = getCacheInfo();
console.log('数据加载完成，缓存状态:', cacheInfo);
// 在开发环境下暴露缓存管理函数到全局，方便调试
if (import.meta.env.DEV) {
window.dashboardCache = {
clearCache,
clearSpecificCache,
getCacheInfo,
forceRefreshAllData,
cache: cache
};
console.log('开发模式：缓存管理函数已暴露到 window.dashboardCache');
}
});
</script>