稳态治理效果分析添加时间组件

src/components/cockpit/trendComparison/index.vue

@@ -1,7 +1,7 @@
 <template>
     <div>
         <!--趋势对比 -->
-        <TableHeader :showReset="false" @selectChange="selectChange" v-if="fullscreen">
+        <TableHeader :showReset="false" datePicker @selectChange="selectChange" v-if="fullscreen">
             <template v-slot:select>
                 <el-form-item label="监测点名称">
                     <el-select
@@ -67,6 +67,8 @@ import { ElMessage, ElMessageBox } from 'element-plus'
 import { getTimeOfTheMonth } from '@/utils/formatTime'
 import MyEchart from '@/components/echarts/MyEchart.vue'
 import { useConfig } from '@/stores/config'
+import { useRoute } from 'vue-router'
+import { useTimeCacheStore } from '@/stores/timeCache'
 const prop = defineProps({
     w: { type: String },
     h: { type: String },
@@ -75,6 +77,9 @@ const prop = defineProps({
     timeKey: { type: String },
     timeValue: { type: Object }
 })
+
+const route = useRoute()
+const timeCacheStore = useTimeCacheStore()
 const config = useConfig()
 const powerList: any = ref([
     {
@@ -238,8 +243,15 @@ const echartList = ref({
     }
 })
 const headerHeight = ref(57)
-const selectChange = (showSelect: any, height: any) => {
+const selectChange = (showSelect: any, height: any, datePickerValue?: any) => {
     headerHeight.value = height
+
+    // 如果有传入 datePicker 的值
+    if (datePickerValue) {
+        // 更新表格参数
+        tableStore.table.params.searchBeginTime = datePickerValue.timeValue?.[0]
+        tableStore.table.params.searchEndTime = datePickerValue.timeValue?.[1]
+    }
 }
 const tableStore: any = new TableStore({
     url: '/user-boot/role/selectRoleDetail?id=0',
@@ -248,9 +260,22 @@ const tableStore: any = new TableStore({
     showPage: false,
     exportName: '主要监测点列表',
     column: [],
-    beforeSearchFun: () => {
-        tableStore.table.params.searchBeginTime = prop.timeValue?.[0] || getTimeOfTheMonth(prop.timeKey)[0]
-        tableStore.table.params.searchEndTime = prop.timeValue?.[1] || getTimeOfTheMonth(prop.timeKey)[1]
+     beforeSearchFun: () => {
+        // 尝试从缓存获取时间值
+        let beginTime, endTime
+
+        if (fullscreen.value) {
+            const cached = timeCacheStore.getCache(route.path)
+            if (cached && cached.timeValue) {
+                beginTime = cached.timeValue[0]
+                endTime = cached.timeValue[1]
+            }
+        }
+
+        // 如果缓存中没有则使用默认值
+        tableStore.table.params.searchBeginTime = beginTime || prop.timeValue?.[0] || getTimeOfTheMonth(prop.timeKey)[0]
+
+        tableStore.table.params.searchEndTime = endTime || prop.timeValue?.[1] || getTimeOfTheMonth(prop.timeKey)[1]
     },
     loadCallback: () => {
         tableStore.table.height = `calc(${prop.height} - 80px)`