From de36067a357c6ae38259c860263ab74ed3af4630 Mon Sep 17 00:00:00 2001 From: chenlin Date: Mon, 22 Dec 2025 10:32:02 +0800 Subject: [PATCH] =?UTF-8?q?=E7=BC=93=E5=AD=98=E5=8C=BA=E5=9F=9F=E6=95=B0?= =?UTF-8?q?=E6=8D=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/screen/mainScreen.vue | 74 ++++++++++++++++++++++++++--- src/views/screen/regionScreen.vue | 78 ++++++++++++++++++++++++++++--- 2 files changed, 139 insertions(+), 13 deletions(-) diff --git a/src/views/screen/mainScreen.vue b/src/views/screen/mainScreen.vue index 1245a32..de25be5 100644 --- a/src/views/screen/mainScreen.vue +++ b/src/views/screen/mainScreen.vue @@ -211,15 +211,71 @@ const query = reactive({ campus_id: "", }) +// 缓存工具函数 +const CACHE_KEY = 'regionOption_cache' +const CACHE_DURATION = 5 * 60 * 1000 // 5分钟 + +interface CacheData { + regionOption: RegionItem[] + campus_id: string +} + +const getCachedRegionOption = (): CacheData | null => { + try { + const cached = sessionStorage.getItem(CACHE_KEY) + if (cached) { + const { data, timestamp } = JSON.parse(cached) + const now = Date.now() + // 检查缓存是否在有效期内 + if (now - timestamp < CACHE_DURATION) { + console.log('使用缓存的 regionOption 数据') + return data + } else { + console.log('缓存已过期，清除缓存') + sessionStorage.removeItem(CACHE_KEY) + } + } + } catch (error) { + console.error('读取缓存失败:', error) + sessionStorage.removeItem(CACHE_KEY) + } + return null +} + +const setCachedRegionOption = (regionOption: RegionItem[], campus_id: string) => { + try { + const cacheData: CacheData = { + regionOption, + campus_id + } + const cache = { + data: cacheData, + timestamp: Date.now() + } + sessionStorage.setItem(CACHE_KEY, JSON.stringify(cache)) + console.log('regionOption 数据已缓存') + } catch (error) { + console.error('保存缓存失败:', error) + } +} + // 生命周期 onMounted(async () => { updateTime() timeUpdateTimerId.value = setInterval(updateTime, 1000) - // - try { - let { records } = await getTableList( - 'park_info_list' - ) + + // 先检查缓存 + const cachedData = getCachedRegionOption() + if (cachedData && cachedData.regionOption && cachedData.regionOption.length > 0) { + regionOption.value = cachedData.regionOption + query.campus_id = cachedData.campus_id || '' + console.log('从缓存加载 regionOption:', regionOption.value, 'campus_id:', query.campus_id) + } else { + // 缓存不存在或已过期，调用接口 + try { + let { records } = await getTableList( + 'park_info_list' + ) // records = [ // { // "region_id": "130601", @@ -268,10 +324,14 @@ onMounted(async () => { }) // 将parkMap转换为数组 query.campus_id = Array.from(parkMap.values()).map(e1 => e1.code).join(); + + // 保存到缓存 + setCachedRegionOption(regionOption.value, query.campus_id) } - } catch (error) { - console.error('初始化园区数据失败:', error) + } catch (error) { + console.error('初始化园区数据失败:', error) + } } // 初始化数据 diff --git a/src/views/screen/regionScreen.vue b/src/views/screen/regionScreen.vue index d1a1abf..646beb5 100644 --- a/src/views/screen/regionScreen.vue +++ b/src/views/screen/regionScreen.vue @@ -221,6 +221,60 @@ const query = reactive({ regionCode: "" }) +// 缓存工具函数 +const CACHE_KEY_PREFIX = 'regionOption_cache_' +const CACHE_DURATION = 5 * 60 * 1000 // 5分钟 + +interface CacheData { + regionOption: RegionItem[] + campus_id: string +} + +const getCachedRegionOption = (regionCode: string): CacheData | null => { + if (!regionCode) return null + try { + const cacheKey = CACHE_KEY_PREFIX + regionCode + const cached = sessionStorage.getItem(cacheKey) + if (cached) { + const { data, timestamp } = JSON.parse(cached) + const now = Date.now() + // 检查缓存是否在有效期内 + if (now - timestamp < CACHE_DURATION) { + console.log('使用缓存的 regionOption 数据，regionCode:', regionCode) + return data + } else { + console.log('缓存已过期，清除缓存，regionCode:', regionCode) + sessionStorage.removeItem(cacheKey) + } + } + } catch (error) { + console.error('读取缓存失败:', error) + if (regionCode) { + sessionStorage.removeItem(CACHE_KEY_PREFIX + regionCode) + } + } + return null +} + +const setCachedRegionOption = (regionCode: string, regionOption: RegionItem[], campus_id: string) => { + if (!regionCode) return + try { + const cacheKey = CACHE_KEY_PREFIX + regionCode + const cacheData: CacheData = { + regionOption, + campus_id + } + const cache = { + data: cacheData, + timestamp: Date.now() + } + sessionStorage.setItem(cacheKey, JSON.stringify(cache)) + console.log('regionOption 数据已缓存，regionCode:', regionCode) + } catch (error) { + console.error('保存缓存失败:', error) + } +} + // 生命周期 onMounted(async () => { updateTime() @@ -233,10 +287,18 @@ onMounted(async () => { console.log("区域>>>>>", selectedRegion.value, query.regionCode); } - try { - let {records} = await getTableList( - 'park_info_list' - ) + // 先检查缓存 + const cachedData = getCachedRegionOption(query.regionCode) + if (cachedData && cachedData.regionOption && cachedData.regionOption.length > 0) { + regionOption.value = cachedData.regionOption + query.campus_id = cachedData.campus_id || '' + console.log('从缓存加载 regionOption:', regionOption.value, 'campus_id:', query.campus_id) + } else { + // 缓存不存在或已过期，调用接口 + try { + let {records} = await getTableList( + 'park_info_list' + ) // records = [ // { // "region_id": "130601", @@ -277,9 +339,13 @@ onMounted(async () => { console.log('regionOption.value>>>>', regionOption.value); query.campus_id = regionOption.value.map(el => el.code).join() + + // 保存到缓存 + setCachedRegionOption(query.regionCode, regionOption.value, query.campus_id) + } + } catch (error) { + console.error('初始化园区数据失败:', error) } - } catch (error) { - console.error('初始化园区数据失败:', error) } // 初始化数据