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

8
my-vue-app/src/views/secondTop/secondTop.vue
View File

@@ -713,11 +713,15 @@ const excellentRecord = ref({});
// 获取优秀录音文件
async function getGoodRecord() {
const params = getRequestParams()
const params1 = {
user_level:userStore.userInfo.user_level.toString(),
user_name:userStore.userInfo.username
}
const hasParams = params.user_name
const requestParams = hasParams ? {
...params,
} : {
}
} : params1
console.log(188811111,requestParams)
try {
const res = await getExcellentRecordFile(requestParams)
excellentRecord.value = res.data.excellent_record_list

289
my-vue-app/src/views/senorManger/seniorManager.vue
View File

@@ -192,6 +192,108 @@ import { getOverallTeamPerformance,getTotalGroupCount,getConversionRate,getTotal
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)
return isValidCache(cacheItem) ? cacheItem.data : null
}
const withCache = async (functionName, apiCall, params = {}) => {
const cacheKey = getCacheKey(functionName, params)
const cachedData = getCache(cacheKey)
if (cachedData) {
console.log(`从缓存获取数据: ${functionName}`, params)
return cachedData
}
console.log(`调用API获取数据: ${functionName}`, params)
const result = await apiCall()
setCache(cacheKey, result)
return result
}
// 缓存管理功能
const clearCache = () => {
cache.clear()
console.log('所有缓存已清除')
}
const clearSpecificCache = (functionName, params = {}) => {
const cacheKey = getCacheKey(functionName, params)
cache.delete(cacheKey)
console.log(`已清除缓存: ${functionName}`, params)
}
const getCacheInfo = () => {
const now = Date.now()
const cacheInfo = []
cache.forEach((value, key) => {
const isValid = isValidCache(value)
const age = Math.round((now - value.timestamp) / 1000 / 60) // 分钟
cacheInfo.push({
key,
isValid,
age: `${age}分钟前`,
timestamp: new Date(value.timestamp).toLocaleString()
})
// 清除过期缓存
if (!isValid) {
cache.delete(key)
}
})
return cacheInfo
}
const forceRefreshAllData = async () => {
console.log('强制刷新所有数据...')
clearCache()
try {
isLoading.value = true
await fetchOverallTeamPerformance()
await fetchActiveGroups()
await fetchConversionRate()
await fetchTotalCallCount()
await fetchNewCustomers()
await fetchDepositConversions()
await fetchAbnormalResponseRate()
await fetchCustomerCommunicationRate()
await fetchAverageResponseTime()
await fetchTimeoutRate()
await fetchTableFillingRate()
await fetchUrgentNeedToAddress()
await fetchTeamRanking()
console.log('所有数据已强制刷新完成')
} catch (error) {
console.error('强制刷新数据失败:', error)
} finally {
isLoading.value = false
}
}
const customerCommunicationRate = ref(85)
const averageResponseTime = ref(15)
const timeoutResponseRate = ref(5)
@@ -204,21 +306,9 @@ const updateCheckType = async (newValue) => {
CheckType.value = newValue
console.log('CheckType已更新为:', newValue)
// 重新获取所有使用CheckType的数据
try {
isLoading.value = true
await fetchOverallTeamPerformance()
await fetchActiveGroups()
await fetchConversionRate()
await fetchTotalCallCount()
await fetchNewCustomers()
await fetchDepositConversions()
console.log('数据已根据新的统计模式重新加载')
} catch (error) {
console.error('重新加载数据失败:', error)
} finally {
isLoading.value = false
}
// 清除缓存并重新获取所有使用CheckType的数据
await forceRefreshAllData()
console.log('数据已根据新的统计模式重新加载')
}
const userStore = useUserStore()
@@ -275,12 +365,17 @@ const getRequestParams = () => {
async function fetchOverallTeamPerformance() {
const params = getRequestParams()
const hasParams = params.user_name
// 团队总业绩
const requestParams = hasParams ? {
...params,
check_type: CheckType.value
} : {check_type: CheckType.value}
try {
const response = await getOverallTeamPerformance(hasParams ? {
...params,
check_type: CheckType.value
} : {check_type: CheckType.value})
const response = await withCache(
'fetchOverallTeamPerformance',
() => getOverallTeamPerformance(requestParams),
requestParams
)
overallTeamPerformance.value.totalPerformance = response.data
} catch (error) {
console.error('获取整体概览数据失败:', error)
@@ -290,14 +385,19 @@ async function fetchOverallTeamPerformance() {
async function fetchActiveGroups() {
const params = getRequestParams()
const hasParams = params.user_name
const requestParams = hasParams ? {
...params,
check_type: CheckType.value
} : {check_type: CheckType.value}
try {
const response = await getTotalGroupCount(hasParams ? {
...params,
check_type: CheckType.value
} : {check_type: CheckType.value})
overallTeamPerformance.value.activeGroups = response.data
const response = await withCache(
'fetchActiveGroups',
() => getTotalGroupCount(requestParams),
requestParams
)
overallTeamPerformance.value.activeGroups = response.data
console.log('活跃组数:', response.data)
} catch (error) {
console.error('获取活跃组数失败:', error)
}
@@ -306,11 +406,17 @@ async function fetchActiveGroups() {
async function fetchConversionRate() {
const params = getRequestParams()
const hasParams = params.user_name
const requestParams = hasParams ? {
...params,
check_type: CheckType.value
} : {check_type: CheckType.value}
try {
const response = await getConversionRate(hasParams ? {
...params,
check_type: CheckType.value
} : {check_type: CheckType.value})
const response = await withCache(
'fetchConversionRate',
() => getConversionRate(requestParams),
requestParams
)
overallTeamPerformance.value.conversionRate = response.data
} catch (error) {
console.error('获取团队转化率失败:', error)
@@ -320,11 +426,17 @@ async function fetchConversionRate() {
async function fetchTotalCallCount() {
const params = getRequestParams()
const hasParams = params.user_name
const requestParams = hasParams ? {
...params,
check_type: CheckType.value
} : {check_type: CheckType.value}
try {
const response = await getTotalCallCount(hasParams ? {
...params,
check_type: CheckType.value
} : {check_type: CheckType.value})
const response = await withCache(
'fetchTotalCallCount',
() => getTotalCallCount(requestParams),
requestParams
)
overallTeamPerformance.value.totalCalls = response.data
} catch (error) {
console.error('获取通话次数失败:', error)
@@ -334,11 +446,17 @@ async function fetchTotalCallCount() {
async function fetchNewCustomers() {
const params = getRequestParams()
const hasParams = params.user_name
const requestParams = hasParams ? {
...params,
check_type: CheckType.value
} : {check_type: CheckType.value}
try {
const response = await getNewCustomer(hasParams ? {
...params,
check_type: CheckType.value
} : {check_type: CheckType.value})
const response = await withCache(
'fetchNewCustomers',
() => getNewCustomer(requestParams),
requestParams
)
overallTeamPerformance.value.newCustomers = response.data
} catch (error) {
console.error('获取新增客户失败:', error)
@@ -348,14 +466,19 @@ async function fetchNewCustomers() {
async function fetchDepositConversions() {
const params = getRequestParams()
const hasParams = params.user_name
const requestParams = hasParams ? {
...params,
check_type: CheckType.value
} : {check_type: CheckType.value}
try {
const response = await getDepositConversionRate(hasParams ? {
...params,
check_type: CheckType.value
} : {check_type: CheckType.value})
const response = await withCache(
'fetchDepositConversions',
() => getDepositConversionRate(requestParams),
requestParams
)
overallTeamPerformance.value.depositConversions = response.data
console.log(99888999,response.data)
} catch (error) {
console.error('获取定金转化失败:', error)
}
@@ -375,8 +498,14 @@ const teamAlerts = ref({})
async function fetchAbnormalResponseRate() {
const params = getRequestParams()
const hasParams = params.user_name
const requestParams = hasParams ? params : {}
try {
const response = await getAbnormalResponseRate(hasParams ? params : undefined)
const response = await withCache(
'fetchAbnormalResponseRate',
() => getAbnormalResponseRate(hasParams ? params : undefined),
requestParams
)
const rawData = response.data
// 转换数据格式，按团队分组生成预警消息
@@ -435,8 +564,14 @@ async function fetchAbnormalResponseRate() {
async function fetchCustomerCommunicationRate() {
const params = getRequestParams()
const hasParams = params.user_name
const requestParams = hasParams ? params : {}
try {
const response = await getActiveCustomerCommunicationRate(hasParams ? params : undefined)
const response = await withCache(
'fetchCustomerCommunicationRate',
() => getActiveCustomerCommunicationRate(hasParams ? params : undefined),
requestParams
)
statisticalIndicators.value.customerCommunicationRate = response.data
} catch (error) {
console.error('获取活跃客户沟通率失败:', error)
@@ -446,8 +581,14 @@ async function fetchCustomerCommunicationRate() {
async function fetchAverageResponseTime() {
const params = getRequestParams()
const hasParams = params.user_name
const requestParams = hasParams ? params : {}
try {
const response = await getAverageAnswerTime(hasParams ? params : undefined)
const response = await withCache(
'fetchAverageResponseTime',
() => getAverageAnswerTime(hasParams ? params : undefined),
requestParams
)
statisticalIndicators.value.averageResponseTime = response.data
} catch (error) {
console.error('获取平均应答时间失败:', error)
@@ -457,8 +598,14 @@ async function fetchAverageResponseTime() {
async function fetchTimeoutRate() {
const params = getRequestParams()
const hasParams = params.user_name
const requestParams = hasParams ? params : {}
try {
const response = await getTimeoutRate(hasParams ? params : undefined)
const response = await withCache(
'fetchTimeoutRate',
() => getTimeoutRate(hasParams ? params : undefined),
requestParams
)
statisticalIndicators.value.timeoutResponseRate = response.data
} catch (error) {
console.error('获取超时应答率失败:', error)
@@ -468,8 +615,14 @@ async function fetchTimeoutRate() {
async function fetchTableFillingRate() {
const params = getRequestParams()
const hasParams = params.user_name
const requestParams = hasParams ? params : {}
try {
const response = await getTableFillingRate(hasParams ? params : undefined)
const response = await withCache(
'fetchTableFillingRate',
() => getTableFillingRate(hasParams ? params : undefined),
requestParams
)
statisticalIndicators.value.formCompletionRate = response.data
} catch (error) {
console.error('获取表格填写率失败:', error)
@@ -481,8 +634,14 @@ const problemRanking = ref({})
async function fetchUrgentNeedToAddress() {
const params = getRequestParams()
const hasParams = params.user_name
const requestParams = hasParams ? params : {}
try {
const response = await getUrgentNeedToAddress(hasParams ? params : undefined)
const response = await withCache(
'fetchUrgentNeedToAddress',
() => getUrgentNeedToAddress(hasParams ? params : undefined),
requestParams
)
problemRanking.value = response.data
} catch (error) {
console.error('获取客户迫切解决的问题失败:', error)
@@ -494,9 +653,15 @@ const teamRanking = ref({})
async function fetchTeamRanking() {
const params = getRequestParams()
const hasParams = params.user_name
const requestParams = hasParams ? params : {}
try {
const response = await getTeamRanking(hasParams ? params : undefined)
teamRanking.value = response.data
const response = await withCache(
'fetchTeamRanking',
() => getTeamRanking(hasParams ? params : undefined),
requestParams
)
teamRanking.value = response.data
} catch (error) {
console.error('获取团队业绩排名失败:', error)
}
@@ -515,9 +680,14 @@ async function fetchTeamPerformanceDetail(department) {
user_level: userStore.userInfo.user_level.toString(),
department: department
}
try {
teamPerformanceDetail.value = {}
const response = await getTeamRankingInfo(requestParams)
const response = await withCache(
'fetchTeamPerformanceDetail',
() => getTeamRankingInfo(requestParams),
requestParams
)
teamPerformanceDetail.value = response.data
} catch (error) {
console.error('获取团队业绩详情失败:', error)
@@ -540,6 +710,21 @@ onMounted(async ()=>{
await fetchTableFillingRate()
await fetchUrgentNeedToAddress()
await fetchTeamRanking()
// 输出缓存信息
console.log('缓存状态:', getCacheInfo())
// 开发环境下暴露缓存管理函数到全局
if (import.meta.env.DEV) {
window.seniorManagerCache = {
clearCache,
clearSpecificCache,
getCacheInfo,
forceRefreshAllData,
cache
}
console.log('开发模式：缓存管理函数已暴露到 window.seniorManagerCache')
}
} catch (error) {
console.error('数据加载失败:', error)
} finally {

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>