时间组件缓存提取出来

src/components/cockpit/indicatorFittingChart/index.vue

@@ -1,18 +1,15 @@
 <template>
     <div>
         <!--主要监测点列表 -->
-        <TableHeader :showReset="false" @selectChange="selectChange" v-if="fullscreen">
+        <TableHeader
+            :showReset="false"
+            @selectChange="selectChange"
+            v-if="fullscreen"
+            datePicker
+            :initialInterval="getInitialInterval()"
+            :initialTimeValue="getInitialTimeValue()"
+        >
             <template v-slot:select>
-                <el-form-item label="日期">
-                    <DatePicker
-                        ref="datePickerRef"
-                        :nextFlag="false"
-                        :theCurrentTime="true"
-                        :initialInterval="getInitialInterval()"
-                        :initialTimeValue="getInitialTimeValue()"
-                        @change="handleDatePickerChange"
-                    ></DatePicker>
-                </el-form-item>
                 <el-form-item label="关键词">
                     <el-input v-model="tableStore.table.params.searchValue" clearable placeholder="请输关键字" />
                 </el-form-item>
@@ -39,7 +36,6 @@ import { ElTag } from 'element-plus'
 import OverLimitDetails from '@/components/cockpit/listOfMainMonitoringPoints/components/overLimitDetails.vue'
 import { useRoute } from 'vue-router'
 import { useTimeCacheStore } from '@/stores/timeCache'
-import DatePicker from '@/components/form/datePicker/index.vue'
 
 const prop = defineProps({
     w: { type: String },
@@ -49,16 +45,21 @@ const prop = defineProps({
     timeKey: { type: String },
     timeValue: { type: Object }
 })
-const dictData = useDictData()
 const OverLimitDetailsRef = ref()
 const headerHeight = ref(57)
 
 const route = useRoute()
 const timeCacheStore = useTimeCacheStore()
 
-const datePickerRef = ref()
-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]
+    }
 }
 
 // 计算是否全屏展示
@@ -73,15 +74,7 @@ const fullscreen = computed(() => {
     }
 })
 
-// 处理 DatePicker 值变化事件
-const handleDatePickerChange = (value: any) => {
-    console.log('DatePicker value changed:', value)
 
-    // 将值缓存到 timeCache
-    if (value) {
-        timeCacheStore.setCache(route.path, value.interval, value.timeValue)
-    }
-}
 const tableStore: any = new TableStore({
     url: '/system-boot/dashboard/queryPage',
     method: 'POST',
@@ -184,17 +177,17 @@ const cellClickEvent = ({ row, column }: any) => {
     }
 }
 
-// 获取缓存的初始值
-const getInitialInterval = () => {
+// 获取缓存的初始值  
+const getInitialInterval = (): 3 => {
     if (fullscreen.value) {
-        const cached = timeCacheStore.getCache(route.path)
+        const cached = timeCacheStore.getCache(route.path);
         if (cached && cached.interval !== undefined) {
-            return cached.interval
+            return cached.interval as 3; // 强制断言为 3 或根据实际类型调整
         }
     }
-    return 3 // 默认值
-}
-
+    return 3; // 明确返回字面量类型 3
+};
+// 外部总的时间值
 const getInitialTimeValue = () => {
     if (fullscreen.value) {
         const cached = timeCacheStore.getCache(route.path)
@@ -207,18 +200,6 @@ const getInitialTimeValue = () => {
 
 // 在组件挂载时设置缓存值到 DatePicker
 onMounted(() => {
-    if (datePickerRef.value) {
-        const cached = timeCacheStore.getCache(route.path)
-        if (cached) {
-            // 如果有缓存值，设置到 DatePicker 组件
-            if (cached.interval !== undefined) {
-                datePickerRef.value.setInterval(cached.interval)
-            }
-            if (cached.timeValue) {
-                datePickerRef.value.timeValue = cached.timeValue
-            }
-        }
-    }
     tableStore.index()
 })
 watch(