缓存区域数据

src/views/screen/mainScreen.vue

@@ -211,11 +211,67 @@ 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)
-  // 
+  
+  // 先检查缓存
+  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'
@@ -269,10 +325,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)
     }
+  }
 
   // 初始化数据
   await loadDashboardData()

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,6 +287,14 @@ onMounted(async () => {
     console.log("区域>>>>>", selectedRegion.value, query.regionCode);
   }
 
+  // 先检查缓存
+  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'
@@ -277,10 +339,14 @@ 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)
     }
+  }
 
   // 初始化数据
   await loadDashboardData()