feat: 为多个视图添加API缓存系统
为manager、sale和secondTop视图添加30分钟缓存机制,减少API调用次数 包含缓存管理功能,支持清除缓存、获取缓存信息和强制刷新数据 在开发环境下暴露缓存管理函数到全局对象方便调试
This commit is contained in:
@@ -82,6 +82,51 @@ import { useUserStore } from "@/stores/user";
|
||||
import { useRouter } from "vue-router";
|
||||
import {getGroupAbnormalResponse, getWeekTotalCall, getWeekAddCustomerTotal, getWeekAddDealTotal, getWeekAddFeeTotal, getGroupFunnel,getPayDepositToMoneyRate,getGroupRanking } from "@/api/manager.js";
|
||||
|
||||
// 缓存系统
|
||||
const cache = new Map()
|
||||
const CACHE_DURATION = 30 * 60 * 1000 // 30分钟缓存
|
||||
|
||||
// 缓存工具函数
|
||||
function getCacheKey(apiName, params = {}) {
|
||||
return `${apiName}_${JSON.stringify(params)}`
|
||||
}
|
||||
|
||||
function isValidCache(cacheData) {
|
||||
return cacheData && (Date.now() - cacheData.timestamp) < CACHE_DURATION
|
||||
}
|
||||
|
||||
function setCache(key, data) {
|
||||
cache.set(key, {
|
||||
data,
|
||||
timestamp: Date.now()
|
||||
})
|
||||
}
|
||||
|
||||
function getCache(key) {
|
||||
const cacheData = cache.get(key)
|
||||
if (isValidCache(cacheData)) {
|
||||
return cacheData.data
|
||||
}
|
||||
cache.delete(key)
|
||||
return null
|
||||
}
|
||||
|
||||
// 通用缓存包装函数
|
||||
async function withCache(apiName, apiCall, params = {}) {
|
||||
const key = getCacheKey(apiName, params)
|
||||
const cachedData = getCache(key)
|
||||
|
||||
if (cachedData) {
|
||||
console.log(`使用缓存数据: ${key}`)
|
||||
return cachedData
|
||||
}
|
||||
|
||||
console.log(`调用API: ${key}`)
|
||||
const result = await apiCall()
|
||||
setCache(key, result)
|
||||
return result
|
||||
}
|
||||
|
||||
// 团队成员数据
|
||||
const teamMembers = [
|
||||
{
|
||||
@@ -152,7 +197,7 @@ async function TeamGetGroupAbnormalResponse() {
|
||||
const params = getRequestParams()
|
||||
const hasParams = params.user_name
|
||||
try {
|
||||
const response = await getGroupAbnormalResponse(hasParams ? params : undefined)
|
||||
const response = await withCache('getGroupAbnormalResponse', () => getGroupAbnormalResponse(hasParams ? params : undefined), hasParams ? params : {})
|
||||
const rawData = response.data
|
||||
|
||||
// 转换数据格式,生成预警消息
|
||||
@@ -197,7 +242,7 @@ async function TeamGetGroupAbnormalResponse() {
|
||||
async function TeamGetWeekTotalCall() {
|
||||
const params = getRequestParams()
|
||||
const hasParams = params.user_name
|
||||
const res = await getWeekTotalCall(hasParams ? params : undefined)
|
||||
const res = await withCache('getWeekTotalCall', () => getWeekTotalCall(hasParams ? params : undefined), hasParams ? params : {})
|
||||
console.log(res)
|
||||
if (res.code === 200) {
|
||||
weekTotalData.value.week_total_call = res.data
|
||||
@@ -207,7 +252,7 @@ async function TeamGetWeekTotalCall() {
|
||||
async function TeamGetWeekAddCustomerTotal() {
|
||||
const params = getRequestParams()
|
||||
const hasParams = params.user_name
|
||||
const res = await getWeekAddCustomerTotal(hasParams ? params : undefined)
|
||||
const res = await withCache('getWeekAddCustomerTotal', () => getWeekAddCustomerTotal(hasParams ? params : undefined), hasParams ? params : {})
|
||||
console.log(res)
|
||||
if (res.code === 200) {
|
||||
weekTotalData.value.week_add_customer_total = res.data
|
||||
@@ -217,7 +262,7 @@ async function TeamGetWeekAddCustomerTotal() {
|
||||
async function TeamGetWeekAddDealTotal() {
|
||||
const params = getRequestParams()
|
||||
const hasParams = params.user_name
|
||||
const res = await getWeekAddDealTotal(hasParams ? params : undefined)
|
||||
const res = await withCache('getWeekAddDealTotal', () => getWeekAddDealTotal(hasParams ? params : undefined), hasParams ? params : {})
|
||||
console.log(res)
|
||||
if (res.code === 200) {
|
||||
weekTotalData.value.week_add_deal_total = res.data
|
||||
@@ -230,7 +275,7 @@ async function TeamGetWeekAddDealTotal() {
|
||||
async function TeamGetWeekAddFeeTotal() {
|
||||
const params = getRequestParams()
|
||||
const hasParams = params.user_name
|
||||
const res = await getPayDepositToMoneyRate(hasParams ? params : undefined)
|
||||
const res = await withCache('getPayDepositToMoneyRate', () => getPayDepositToMoneyRate(hasParams ? params : undefined), hasParams ? params : {})
|
||||
console.log(res)
|
||||
if (res.code === 200) {
|
||||
weekTotalData.value.pay_deposit_to_money_rate = res.data
|
||||
@@ -240,7 +285,7 @@ async function TeamGetWeekAddFeeTotal() {
|
||||
async function TeamGetGroupFunnel() {
|
||||
const params = getRequestParams()
|
||||
const hasParams = params.user_name
|
||||
const res = await getGroupFunnel(hasParams ? params : undefined)
|
||||
const res = await withCache('getGroupFunnel', () => getGroupFunnel(hasParams ? params : undefined), hasParams ? params : {})
|
||||
console.log(res)
|
||||
if (res.code === 200) {
|
||||
weekTotalData.value.group_funnel = res.data
|
||||
@@ -265,7 +310,7 @@ const groupRanking = ref({})
|
||||
async function TeamGetGroupRanking() {
|
||||
const params = getRequestParams()
|
||||
const hasParams = params.user_name
|
||||
const res = await getGroupRanking(hasParams ? params : undefined)
|
||||
const res = await withCache('getGroupRanking', () => getGroupRanking(hasParams ? params : undefined), hasParams ? params : {})
|
||||
console.log(res)
|
||||
if (res.code === 200) {
|
||||
groupRanking.value = res.data
|
||||
@@ -283,16 +328,97 @@ const selectMember = (member) => {
|
||||
selectedMember.value = member;
|
||||
};
|
||||
|
||||
// 缓存管理功能
|
||||
// 清除所有缓存
|
||||
function clearCache() {
|
||||
cache.clear()
|
||||
console.log('所有缓存已清除')
|
||||
}
|
||||
|
||||
// 清除特定缓存
|
||||
function clearSpecificCache(apiName, params = {}) {
|
||||
const key = getCacheKey(apiName, params)
|
||||
cache.delete(key)
|
||||
console.log(`已清除缓存: ${key}`)
|
||||
}
|
||||
|
||||
// 获取缓存信息并清理过期缓存
|
||||
function getCacheInfo() {
|
||||
const now = Date.now()
|
||||
const validCaches = []
|
||||
const expiredCaches = []
|
||||
|
||||
for (const [key, data] of cache.entries()) {
|
||||
if (isValidCache(data)) {
|
||||
validCaches.push({
|
||||
key,
|
||||
timestamp: data.timestamp,
|
||||
age: Math.round((now - data.timestamp) / 1000) + 's'
|
||||
})
|
||||
} else {
|
||||
expiredCaches.push(key)
|
||||
cache.delete(key)
|
||||
}
|
||||
}
|
||||
|
||||
console.log('有效缓存:', validCaches)
|
||||
console.log('已清理过期缓存:', expiredCaches)
|
||||
|
||||
return {
|
||||
validCount: validCaches.length,
|
||||
expiredCount: expiredCaches.length,
|
||||
validCaches,
|
||||
expiredCaches
|
||||
}
|
||||
}
|
||||
|
||||
// 强制刷新所有数据(清除缓存并重新调用所有API)
|
||||
async function forceRefreshAllData() {
|
||||
console.log('开始强制刷新所有数据...')
|
||||
clearCache()
|
||||
|
||||
// 重新调用所有API
|
||||
await Promise.all([
|
||||
TeamGetGroupAbnormalResponse(),
|
||||
TeamGetWeekTotalCall(),
|
||||
TeamGetWeekAddCustomerTotal(),
|
||||
TeamGetWeekAddDealTotal(),
|
||||
TeamGetWeekAddFeeTotal(),
|
||||
TeamGetGroupFunnel(),
|
||||
TeamGetGroupRanking()
|
||||
])
|
||||
|
||||
console.log('所有数据刷新完成')
|
||||
}
|
||||
|
||||
// 团队异常预警
|
||||
|
||||
onMounted(async () => {
|
||||
// 输出缓存状态信息
|
||||
console.log('Manager页面缓存系统已初始化,缓存时长:', CACHE_DURATION / (1000 * 60), '分钟')
|
||||
|
||||
await TeamGetGroupAbnormalResponse()
|
||||
await TeamGetWeekTotalCall()
|
||||
await TeamGetWeekAddCustomerTotal()
|
||||
await TeamGetWeekAddDealTotal()
|
||||
await TeamGetWeekAddFeeTotal()
|
||||
await TeamGetGroupFunnel()
|
||||
await TeamGetGroupRanking()
|
||||
await TeamGetWeekTotalCall()
|
||||
await TeamGetWeekAddCustomerTotal()
|
||||
await TeamGetWeekAddDealTotal()
|
||||
await TeamGetWeekAddFeeTotal()
|
||||
await TeamGetGroupFunnel()
|
||||
await TeamGetGroupRanking()
|
||||
|
||||
// 输出初始缓存信息
|
||||
getCacheInfo()
|
||||
|
||||
// 开发环境下暴露缓存管理函数到全局对象,方便调试
|
||||
if (process.env.NODE_ENV === 'development') {
|
||||
window.managerCache = {
|
||||
clearCache,
|
||||
clearSpecificCache,
|
||||
getCacheInfo,
|
||||
forceRefreshAllData,
|
||||
cache
|
||||
}
|
||||
console.log('开发模式:缓存管理函数已暴露到 window.managerCache')
|
||||
}
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
@@ -130,6 +130,63 @@ import {getCustomerAttendance,getTodayCall,getProblemDistribution,getTableFillin
|
||||
getWeeklyActiveCommunicationRate,getTimeoutResponseRate,getCustomerCallInfo,getCustomerChatInfo,getCustomerFormInfo,
|
||||
getConversionRateAndAllocatedData,getCustomerAttendanceAfterClass4,getPayMoneyCustomers,getSalesFunnel,getGoldContactTime} from "@/api/api.js"
|
||||
|
||||
// 缓存系统
|
||||
const cache = new Map();
|
||||
const CACHE_DURATION = 30 * 60 * 1000; // 30分钟缓存时长
|
||||
|
||||
// 生成缓存键
|
||||
const getCacheKey = (apiName, params = {}) => {
|
||||
const sortedParams = Object.keys(params)
|
||||
.sort()
|
||||
.reduce((result, key) => {
|
||||
result[key] = params[key];
|
||||
return result;
|
||||
}, {});
|
||||
return `${apiName}_${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;
|
||||
}
|
||||
// 如果缓存过期,删除它
|
||||
if (cacheData) {
|
||||
cache.delete(key);
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
// 缓存包装器函数
|
||||
const withCache = async (apiName, apiFunction, params = {}) => {
|
||||
const cacheKey = getCacheKey(apiName, params);
|
||||
const cachedData = getCache(cacheKey);
|
||||
|
||||
if (cachedData) {
|
||||
console.log(`[缓存命中] ${apiName}:`, cachedData);
|
||||
return cachedData;
|
||||
}
|
||||
|
||||
console.log(`[API调用] ${apiName}`);
|
||||
const result = await apiFunction(params);
|
||||
setCache(cacheKey, result);
|
||||
return result;
|
||||
};
|
||||
|
||||
// 路由实例
|
||||
const router = useRouter();
|
||||
|
||||
@@ -261,13 +318,13 @@ async function getCoreKpi() {
|
||||
const hasParams = params.user_name
|
||||
|
||||
// 今日通话数据
|
||||
const res = await getTodayCall(hasParams ? params : undefined)
|
||||
const res = await withCache('getTodayCall', () => getTodayCall(hasParams ? params : undefined), hasParams ? params : {})
|
||||
if (res.code === 200) {
|
||||
kpiDataState.totalCalls = res.data.today_call
|
||||
}
|
||||
|
||||
// 转化率、分配数据量、加微率
|
||||
const conversionRes = await getConversionRateAndAllocatedData(hasParams ? params : undefined)
|
||||
const conversionRes = await withCache('getConversionRateAndAllocatedData', () => getConversionRateAndAllocatedData(hasParams ? params : undefined), hasParams ? params : {})
|
||||
if (conversionRes.code === 200) {
|
||||
kpiDataState.conversionRate = conversionRes.data.conversion_rate || 0
|
||||
kpiDataState.assignedData = conversionRes.data.all_count || 0
|
||||
@@ -288,25 +345,25 @@ async function getStatisticsData() {
|
||||
const hasParams = params.user_name
|
||||
|
||||
// 获取表单填写率
|
||||
const fillingRateRes = await getTableFillingRate(hasParams ? params : undefined)
|
||||
const fillingRateRes = await withCache('getTableFillingRate', () => getTableFillingRate(hasParams ? params : undefined), hasParams ? params : {})
|
||||
if (fillingRateRes.code === 200) {
|
||||
statisticsData.formCompletionRate = fillingRateRes.data.filling_rate
|
||||
}
|
||||
|
||||
// 获取平均响应时间
|
||||
const avgResponseRes = await getAverageResponseTime(hasParams ? params : undefined)
|
||||
const avgResponseRes = await withCache('getAverageResponseTime', () => getAverageResponseTime(hasParams ? params : undefined), hasParams ? params : {})
|
||||
if (avgResponseRes.code === 200) {
|
||||
statisticsData.averageResponseTime = avgResponseRes.data.average_minutes
|
||||
}
|
||||
|
||||
// 获取客户沟通率
|
||||
const communicationRes = await getWeeklyActiveCommunicationRate(hasParams ? params : undefined)
|
||||
const communicationRes = await withCache('getWeeklyActiveCommunicationRate', () => getWeeklyActiveCommunicationRate(hasParams ? params : undefined), hasParams ? params : {})
|
||||
if (communicationRes.code === 200) {
|
||||
statisticsData.customerCommunicationRate = communicationRes.data.communication_rate
|
||||
}
|
||||
|
||||
// 获取超时响应率
|
||||
const timeoutRes = await getTimeoutResponseRate(hasParams ? params : undefined)
|
||||
const timeoutRes = await withCache('getTimeoutResponseRate', () => getTimeoutResponseRate(hasParams ? params : undefined), hasParams ? params : {})
|
||||
if (timeoutRes.code === 200) {
|
||||
statisticsData.timeoutResponseRate = timeoutRes.data.overtime_rate_600
|
||||
statisticsData.severeTimeoutRate = timeoutRes.data.overtime_rate_800
|
||||
@@ -324,7 +381,7 @@ async function getUrgentProblem() {
|
||||
const params = getRequestParams()
|
||||
const hasParams = params.user_name
|
||||
|
||||
const res = await getProblemDistribution(hasParams ? params : undefined)
|
||||
const res = await withCache('getProblemDistribution', () => getProblemDistribution(hasParams ? params : undefined), hasParams ? params : {})
|
||||
if(res.code === 200) {
|
||||
// 将API返回的对象格式转换为数组格式
|
||||
const problemDistributionCount = res.data.problem_distribution_count
|
||||
@@ -343,7 +400,7 @@ async function getTimeline() {
|
||||
const params = getRequestParams()
|
||||
const hasParams = params.user_name
|
||||
// 前6个阶段
|
||||
const res = await getCustomerAttendance(hasParams ? params : undefined)
|
||||
const res = await withCache('getCustomerAttendance', () => getCustomerAttendance(hasParams ? params : undefined), hasParams ? params : {})
|
||||
if(res.code === 200) {
|
||||
// 处理时间线数据
|
||||
if (res.data.timeline) {
|
||||
@@ -362,7 +419,7 @@ async function getTimeline() {
|
||||
}
|
||||
}
|
||||
// 后4个阶段
|
||||
const classRes = await getCustomerAttendanceAfterClass4(hasParams ? params : undefined)
|
||||
const classRes = await withCache('getCustomerAttendanceAfterClass4', () => getCustomerAttendanceAfterClass4(hasParams ? params : undefined), hasParams ? params : {})
|
||||
if(classRes.code === 200) {
|
||||
// 处理课1-4阶段的客户数据
|
||||
if (classRes.data.class_customers_list) {
|
||||
@@ -437,7 +494,7 @@ async function getTimeline() {
|
||||
}
|
||||
}
|
||||
// 成交阶段
|
||||
const payRes = await getPayMoneyCustomers(hasParams ? params : undefined)
|
||||
const payRes = await withCache('getPayMoneyCustomers', () => getPayMoneyCustomers(hasParams ? params : undefined), hasParams ? params : {})
|
||||
if(payRes.code === 200) {
|
||||
// 处理成交阶段的客户数据
|
||||
if (payRes.data.pay_money_customers_list) {
|
||||
@@ -467,7 +524,7 @@ async function getCustomerForm() {
|
||||
customer_name: selectedContact.value.name,
|
||||
}
|
||||
try {
|
||||
const res = await getCustomerFormInfo(params)
|
||||
const res = await withCache('getCustomerFormInfo', () => getCustomerFormInfo(params), params)
|
||||
if(res.code === 200) {
|
||||
formInfo.value = res.data
|
||||
}
|
||||
@@ -487,7 +544,7 @@ async function getCustomerChat() {
|
||||
customer_name: selectedContact.value.name,
|
||||
}
|
||||
try {
|
||||
const res = await getCustomerChatInfo(params)
|
||||
const res = await withCache('getCustomerChatInfo', () => getCustomerChatInfo(params), params)
|
||||
if(res.code === 200) {
|
||||
chatRecords.value = res.data
|
||||
console.log('聊天数据获取成功:', res.data)
|
||||
@@ -511,7 +568,7 @@ async function getCustomerCall() {
|
||||
customer_name: selectedContact.value.name,
|
||||
}
|
||||
try {
|
||||
const res = await getCustomerCallInfo(params)
|
||||
const res = await withCache('getCustomerCallInfo', () => getCustomerCallInfo(params), params)
|
||||
if(res.code === 200) {
|
||||
callRecords.value = res.data
|
||||
console.log('Call Records Data from API:', res.data)
|
||||
@@ -738,9 +795,9 @@ const handleAnalyzeSop = (analyzeData) => {
|
||||
// 销售漏斗
|
||||
const SalesFunnel = ref([])
|
||||
async function CenterGetSalesFunnel() {
|
||||
const params = getRequestParams()
|
||||
const hasParams = params.user_name
|
||||
const res = await getSalesFunnel(hasParams?params:undefined)
|
||||
const params = getRequestParams()
|
||||
const hasParams = params.user_name
|
||||
const res = await withCache('getSalesFunnel', () => getSalesFunnel(hasParams ? params : undefined), hasParams ? params : {})
|
||||
if(res.code === 200){
|
||||
SalesFunnel.value = res.data
|
||||
/**
|
||||
@@ -763,15 +820,85 @@ const goldContactTime = ref([])
|
||||
async function CenterGetGoldContactTime() {
|
||||
const params = getRequestParams()
|
||||
const hasParams = params.user_name
|
||||
const res = await getGoldContactTime(hasParams?params:undefined)
|
||||
const res = await withCache('getGoldContactTime', () => getGoldContactTime(hasParams ? params : undefined), hasParams ? params : {})
|
||||
if(res.code === 200){
|
||||
goldContactTime.value = res.data
|
||||
}
|
||||
}
|
||||
|
||||
// 缓存管理功能
|
||||
// 清除所有缓存
|
||||
function clearCache() {
|
||||
cache.clear()
|
||||
console.log('所有缓存已清除')
|
||||
}
|
||||
|
||||
// 清除特定缓存
|
||||
function clearSpecificCache(apiName, params = {}) {
|
||||
const key = getCacheKey(apiName, params)
|
||||
cache.delete(key)
|
||||
console.log(`已清除缓存: ${key}`)
|
||||
}
|
||||
|
||||
// 获取缓存信息并清理过期缓存
|
||||
function getCacheInfo() {
|
||||
const now = Date.now()
|
||||
const validCaches = []
|
||||
const expiredCaches = []
|
||||
|
||||
for (const [key, data] of cache.entries()) {
|
||||
if (isValidCache(data)) {
|
||||
validCaches.push({
|
||||
key,
|
||||
timestamp: data.timestamp,
|
||||
age: Math.round((now - data.timestamp) / 1000) + 's'
|
||||
})
|
||||
} else {
|
||||
expiredCaches.push(key)
|
||||
cache.delete(key)
|
||||
}
|
||||
}
|
||||
|
||||
console.log('有效缓存:', validCaches)
|
||||
console.log('已清理过期缓存:', expiredCaches)
|
||||
|
||||
return {
|
||||
validCount: validCaches.length,
|
||||
expiredCount: expiredCaches.length,
|
||||
validCaches,
|
||||
expiredCaches
|
||||
}
|
||||
}
|
||||
|
||||
// 强制刷新所有数据(清除缓存并重新调用所有API)
|
||||
async function forceRefreshAllData() {
|
||||
console.log('开始强制刷新所有数据...')
|
||||
clearCache()
|
||||
|
||||
// 重新调用所有API
|
||||
await Promise.all([
|
||||
getCoreKpi(),
|
||||
getStatisticsData(),
|
||||
getUrgentProblem(),
|
||||
getTimeline(),
|
||||
getCustomerPayMoney(),
|
||||
CenterGetSalesFunnel(),
|
||||
CenterGetGoldContactTime(),
|
||||
// 客户相关数据需要在选中客户后才能获取
|
||||
selectedContact.value ? getCustomerForm() : Promise.resolve(),
|
||||
selectedContact.value ? getCustomerChat() : Promise.resolve(),
|
||||
selectedContact.value ? getCustomerCall() : Promise.resolve()
|
||||
])
|
||||
|
||||
console.log('所有数据刷新完成')
|
||||
}
|
||||
|
||||
// LIFECYCLE HOOKS
|
||||
onMounted(async () => {
|
||||
try {
|
||||
// 输出缓存状态信息
|
||||
console.log('Sale页面缓存系统已初始化,缓存时长:', CACHE_DURATION / (1000 * 60), '分钟')
|
||||
|
||||
isPageLoading.value = true
|
||||
await getCoreKpi()
|
||||
await CenterGetGoldContactTime()
|
||||
@@ -782,6 +909,21 @@ onMounted(async () => {
|
||||
await getCustomerCall()
|
||||
await getTimeline()
|
||||
await getCustomerPayMoney()
|
||||
|
||||
// 输出初始缓存信息
|
||||
getCacheInfo()
|
||||
|
||||
// 开发环境下暴露缓存管理函数到全局对象,方便调试
|
||||
if (process.env.NODE_ENV === 'development') {
|
||||
window.saleCache = {
|
||||
clearCache,
|
||||
clearSpecificCache,
|
||||
getCacheInfo,
|
||||
forceRefreshAllData,
|
||||
cache
|
||||
}
|
||||
console.log('开发模式:缓存管理函数已暴露到 window.saleCache')
|
||||
}
|
||||
|
||||
// 等待数据加载完成后选择默认客户
|
||||
await nextTick();
|
||||
|
||||
@@ -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()
|
||||
}
|
||||
|
||||
// 工具提示状态
|
||||
|
||||
Reference in New Issue
Block a user