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

feat: 为多个视图添加API缓存系统

Browse Source 
为manager、sale和secondTop视图添加30分钟缓存机制，减少API调用次数
包含缓存管理功能，支持清除缓存、获取缓存信息和强制刷新数据
在开发环境下暴露缓存管理函数到全局对象方便调试
This commit is contained in:
lbw_9527443
2025-08-27 14:44:44 +08:00
parent d4daed2ec1
commit ecf63b74cb
3 changed files with 546 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -159,6 +159,65 @@
<script setup>
import { ref, onMounted, computed,reactive } from 'vue'
// 30分钟数据缓存系统
const cache = new Map()
const CACHE_DURATION = 30 * 60 * 1000 // 30分钟
// 生成缓存键
const getCacheKey = (functionName, params = {}) => {
const sortedParams = Object.keys(params).sort().reduce((result, key) => {
result[key] = params[key]
return result
}, {})
return `${functionName}_${JSON.stringify(sortedParams)}`
}
// 检查缓存是否有效
const isValidCache = (cacheData) => {
return cacheData && (Date.now() - cacheData.timestamp) < CACHE_DURATION
}
// 设置缓存
const setCache = (key, data) => {
cache.set(key, {
data,
timestamp: Date.now()
})
}
// 获取缓存
const getCache = (key) => {
const cacheData = cache.get(key)
if (isValidCache(cacheData)) {
return cacheData.data
}
cache.delete(key) // 删除过期缓存
return null
}
// 带缓存的API调用包装器
const withCache = async (functionName, apiCall, params = {}) => {
const cacheKey = getCacheKey(functionName, params)
const cachedData = getCache(cacheKey)
if (cachedData) {
console.log(`[缓存命中] ${functionName}:`, cachedData)
return cachedData
}
try {
const result = await apiCall()
if (result && result.code === 200) {
setCache(cacheKey, result)
console.log(`[缓存设置] ${functionName}:`, result)
}
return result
} catch (error) {
console.error(`[API调用失败] ${functionName}:`, error)
throw error
}
}
import CenterOverview from './components/CenterOverview.vue'
import GroupComparison from './components/GroupComparison.vue'
import GroupRanking from './components/GroupRanking.vue'
@@ -414,11 +473,16 @@ const padding111 = ref('11')
async function CenterOverallCenterPerformance() {
const params = getRequestParams()
const hasParams = params.user_name
const requestParams = hasParams ? {
...params,
check_type: CheckType.value
} : {check_type: CheckType.value}
try {
const res = await getOverallCenterPerformance(hasParams ? {
...params,
check_type: CheckType.value
} : {check_type: CheckType.value})
const res = await withCache('CenterOverallCenterPerformance',
() => getOverallCenterPerformance(requestParams),
requestParams
)
if (res.code === 200) {
overallCenterPerformance.value.CenterPerformance = res.data
}
@@ -430,11 +494,16 @@ const padding111 = ref('11')
async function CenterTotalGroupCount() {
const params = getRequestParams()
const hasParams = params.user_name
const requestParams = hasParams ? {
...params,
check_type: CheckType.value
} : {check_type: CheckType.value}
try {
const res = await getTotalGroupCount(hasParams ? {
...params,
check_type: CheckType.value
} : {check_type: CheckType.value})
const res = await withCache('CenterTotalGroupCount',
() => getTotalGroupCount(requestParams),
requestParams
)
if (res.code === 200) {
overallCenterPerformance.value.TotalGroupCount = res.data
}
@@ -446,11 +515,16 @@ const padding111 = ref('11')
async function CenterConversionRate() {
const params = getRequestParams()
const hasParams = params.user_name
const requestParams = hasParams ? {
...params,
check_type: CheckType.value
} : {check_type: CheckType.value}
try {
const res = await getCenterConversionRate(hasParams ? {
...params,
check_type: CheckType.value
} : {check_type: CheckType.value})
const res = await withCache('CenterConversionRate',
() => getCenterConversionRate(requestParams),
requestParams
)
if (res.code === 200) {
overallCenterPerformance.value.CenterConversionRate = res.data
}
@@ -462,11 +536,16 @@ const padding111 = ref('11')
async function CenterTotalCallCount() {
const params = getRequestParams()
const hasParams = params.user_name
const requestParams = hasParams ? {
...params,
check_type: CheckType.value
} : {check_type: CheckType.value}
try {
const res = await getTotalCallCount(hasParams ? {
...params,
check_type: CheckType.value
} : {check_type: CheckType.value})
const res = await withCache('CenterTotalCallCount',
() => getTotalCallCount(requestParams),
requestParams
)
if (res.code === 200) {
overallCenterPerformance.value.TotalCallCount = res.data
}
@@ -478,11 +557,16 @@ const padding111 = ref('11')
async function CenterNewCustomer() {
const params = getRequestParams()
const hasParams = params.user_name
const requestParams = hasParams ? {
...params,
check_type: CheckType.value
} : {check_type: CheckType.value}
try {
const res = await getNewCustomer(hasParams ? {
...params,
check_type: CheckType.value
} : {check_type: CheckType.value})
const res = await withCache('CenterNewCustomer',
() => getNewCustomer(requestParams),
requestParams
)
if (res.code === 200) {
overallCenterPerformance.value.NewCustomer = res.data
}
@@ -494,11 +578,16 @@ const padding111 = ref('11')
async function CenterDepositConversionRate() {
const params = getRequestParams()
const hasParams = params.user_name
const requestParams = hasParams ? {
...params,
check_type: CheckType.value
} : {check_type: CheckType.value}
try {
const res = await getDepositConversionRate(hasParams ? {
...params,
check_type: CheckType.value
} : {check_type: CheckType.value})
const res = await withCache('CenterDepositConversionRate',
() => getDepositConversionRate(requestParams),
requestParams
)
if (res.code === 200) {
overallCenterPerformance.value.DepositConversionRate = res.data
}
@@ -512,8 +601,12 @@ const padding111 = ref('11')
const hasParams = params.user_name
// 添加distribution_type参数
const requestParams = hasParams ? { ...params, distribution_type: distributionType } : { distribution_type: distributionType }
try {
const res = await getCustomerTypeDistribution(requestParams)
const res = await withCache('CenterCustomerType',
() => getCustomerTypeDistribution(requestParams),
requestParams
)
if (res.code === 200) {
customerTypeDistribution.value = res.data
}
@@ -530,8 +623,13 @@ const padding111 = ref('11')
async function CenterUrgentNeedToAddress() {
const params = getRequestParams()
const hasParams = params.user_name
const requestParams = hasParams ? params : {}
try {
const res = await getUrgentNeedToAddress(hasParams ? params : undefined)
const res = await withCache('CenterUrgentNeedToAddress',
() => getUrgentNeedToAddress(hasParams ? params : undefined),
requestParams
)
if (res.code === 200) {
urgentNeedToAddress.value = res.data
}
@@ -544,8 +642,13 @@ const conversionRateVsAverage = ref({})
async function CenterConversionRateVsAverage() {
const params = getRequestParams()
const hasParams = params.user_name
const requestParams = hasParams ? params : {}
try {
const res = await getConversionRateVsAverage(hasParams ? params : undefined)
const res = await withCache('CenterConversionRateVsAverage',
() => getConversionRateVsAverage(hasParams ? params : undefined),
requestParams
)
if (res.code === 200) {
conversionRateVsAverage.value = res.data
}
@@ -559,8 +662,13 @@ const conversionRateVsAverage = ref({})
async function CenterSeniorManagerList() {
const params = getRequestParams()
const hasParams = params.user_name
const requestParams = hasParams ? params : {}
try {
const res = await getCenterAdvancedManagerList(hasParams ? params : undefined)
const res = await withCache('CenterSeniorManagerList',
() => getCenterAdvancedManagerList(hasParams ? params : undefined),
requestParams
)
if (res.code === 200) {
seniorManagerList.value = res.data
}
@@ -587,8 +695,12 @@ const conversionRateVsAverage = ref({})
requestParams.team_leader_name = selectedManager
}
}
try {
const res = await getTeamRanking(requestParams)
const res = await withCache('CenterGroupList',
() => getTeamRanking(requestParams),
requestParams
)
console.log('API Response:', res)
if (res.code === 200) {
groupList.value = res.data
@@ -614,7 +726,10 @@ const conversionRateVsAverage = ref({})
}
try {
const res = await getTeamRankingInfo(requestParams)
const res = await withCache('CenterGroupPerformance',
() => getTeamRankingInfo(requestParams),
requestParams
)
if (res.code === 200) {
groupPerformance.value = res.data
@@ -722,13 +837,94 @@ const excellentRecord = ref({});
...params,
} : params1
console.log(188811111,requestParams)
try {
const res = await getExcellentRecordFile(requestParams)
excellentRecord.value = res.data.excellent_record_list
console.log(111111,res.data.excellent_record_list)
} catch (error) {
console.error("获取优秀录音失败:", error);
const res = await withCache('getGoodRecord',
() => getExcellentRecordFile(requestParams),
requestParams
)
excellentRecord.value = res.data.excellent_record_list
console.log(111111,res.data.excellent_record_list)
} catch (error) {
console.error("获取优秀录音失败:", error);
}
}
// 缓存管理功能
// 清除所有缓存
const clearCache = () => {
cache.clear()
console.log('[缓存清除] 所有缓存已清除')
}
// 清除特定缓存
const clearSpecificCache = (functionName, params = {}) => {
const cacheKey = getCacheKey(functionName, params)
cache.delete(cacheKey)
console.log(`[缓存清除] ${functionName} 缓存已清除`)
}
// 获取缓存信息
const getCacheInfo = () => {
const cacheInfo = {
totalCount: cache.size,
validCount: 0,
expiredCount: 0,
cacheKeys: []
}
cache.forEach((value, key) => {
if (isValidCache(value)) {
cacheInfo.validCount++
cacheInfo.cacheKeys.push({
key,
timestamp: value.timestamp,
remainingTime: CACHE_DURATION - (Date.now() - value.timestamp)
})
} else {
cacheInfo.expiredCount++
cache.delete(key) // 清除过期缓存
}
})
console.log('[缓存信息]', cacheInfo)
return cacheInfo
}
// 强制刷新所有数据（清除缓存并重新调用API）
const forceRefreshAllData = async () => {
clearCache()
isLoading.value = true
try {
const currentQuery = router.currentRoute.value.query
const isFromRoute = currentQuery.fromRoute ||
sessionStorage.getItem('fromRoute') ||
(currentQuery.user_name && currentQuery.user_level)
if (!isFromRoute) {
await CenterCampPeriodAdmin()
}
await CenterOverallCenterPerformance()
await CenterTotalGroupCount()
await CenterConversionRate()
await CenterTotalCallCount()
await CenterNewCustomer()
await CenterDepositConversionRate()
await CenterCustomerType()
await CenterUrgentNeedToAddress()
await CenterConversionRateVsAverage()
await CenterSeniorManagerList()
await getGoodRecord()
await CenterGroupList('all')
console.log('[强制刷新] 所有数据已重新加载')
} catch (error) {
console.error('[强制刷新] 数据加载失败:', error)
} finally {
isLoading.value = false
}
}
@@ -758,6 +954,21 @@ const excellentRecord = ref({});
// 获取优秀录音
await getGoodRecord()
await CenterGroupList('all') // 初始化加载全部高级经理数据
// 输出缓存信息
getCacheInfo()
// 开发环境下暴露缓存管理函数到全局
if (process.env.NODE_ENV === 'development') {
window.secondTopCache = {
clearCache,
clearSpecificCache,
getCacheInfo,
forceRefreshAllData,
cache
}
console.log('[开发模式] 缓存管理函数已暴露到 window.secondTopCache')
}
} catch (error) {
console.error('数据加载失败:', error)
} finally {
@@ -770,20 +981,8 @@ const excellentRecord = ref({});
CheckType.value = newValue
console.log('CheckType已更新为:', newValue)
// 重新调用相关API函数
isLoading.value = true
try {
await CenterOverallCenterPerformance()
await CenterTotalGroupCount()
await CenterConversionRate()
await CenterTotalCallCount()
await CenterNewCustomer()
await CenterDepositConversionRate()
} catch (error) {
console.error('重新获取数据失败:', error)
} finally {
isLoading.value = false
}
// 使用强制刷新功能重新获取数据
await forceRefreshAllData()
}
// 工具提示状态