时间组件缓存提取出来

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, datePickerValue?: any) => {
-const selectChange = (showSelect: any, height: 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(

src/components/table/header/index.vue

@@ -10,7 +10,14 @@
                 :inline="true"
             >
                 <el-form-item label="日期" v-if="datePicker" style="grid-column: span 2; max-width: 570px">
-                    <DatePicker ref="datePickerRef" :nextFlag="nextFlag" :theCurrentTime="theCurrentTime"></DatePicker>
+                    <DatePicker
+                        ref="datePickerRef"
+                        :nextFlag="nextFlag"
+                        :theCurrentTime="theCurrentTime"
+                        :initialInterval="initialInterval"
+                        :initialTimeValue="initialTimeValue"
+                        @change="handleDatePickerChange"
+                    ></DatePicker>
                 </el-form-item>
 
                 <el-form-item label="区域" v-if="area">
@@ -57,6 +64,9 @@ import { mainHeight } from '@/utils/layout'
 import { useDictData } from '@/stores/dictData'
 import { Search, RefreshLeft } from '@element-plus/icons-vue'
 import { defineProps } from 'vue'
+import { useTimeCacheStore } from '@/stores/timeCache'
+import { useRoute } from 'vue-router'
+
 const emit = defineEmits(['selectChange'])
 
 const tableStore = inject('tableStore') as TableStore
@@ -67,6 +77,11 @@ const areaRef = ref()
 const headerForm = ref()
 const headerFormSecond = ref()
 const num = ref(0)
+
+// 获取路由和缓存 store
+const route = useRoute()
+const timeCacheStore = useTimeCacheStore()
+
 interface Props {
     datePicker?: boolean
     area?: boolean
@@ -75,6 +90,8 @@ interface Props {
     theCurrentTime?: boolean //控制时间前3天展示上个月时间
     showReset?: boolean //是否显示重置
     showExport?: boolean //导出控制
+    initialInterval: 3
+    initialTimeValue: undefined
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -84,8 +101,23 @@ const props = withDefaults(defineProps<Props>(), {
     nextFlag: false,
     theCurrentTime: true,
     showReset: true,
-    showExport: false
+    showExport: false,
+    initialInterval: 3,
+    initialTimeValue: undefined
 })
+
+// 处理 DatePicker 值变化事件
+const handleDatePickerChange = (value: any) => {
+
+    // 将值缓存到 timeCache
+    if (value) {
+        timeCacheStore.setCache(route.path, value.interval, value.timeValue)
+    }
+
+    // 将 datePicker 的变化传递给父组件
+    emit('selectChange', true, tableHeader.value.offsetHeight, value)
+}
+
 // 动态计算table高度
 let resizeObserver = new ResizeObserver(entries => {
     for (const entry of entries) {
@@ -105,16 +137,40 @@ const headerFormSecondStyleClose = {
     padding: '0'
 }
 onMounted(() => {
-    if (props.datePicker && tableStore) {
+    // 设置初始值到 DatePicker
-        tableStore.table.params.searchBeginTime = datePickerRef.value?.timeValue[0]
+    if (props.datePicker && datePickerRef.value) {
-        tableStore.table.params.searchEndTime = datePickerRef.value?.timeValue[1]
+        // 如果有传入的初始值，则设置到 DatePicker
-        tableStore.table.params.startTime = datePickerRef.value?.timeValue[0]
+        if (props.initialInterval !== undefined) {
-        tableStore.table.params.endTime = datePickerRef.value?.timeValue[1]
+            datePickerRef.value.setInterval(props.initialInterval)
+        }
+
+        if (props.initialTimeValue) {
+            datePickerRef.value.timeValue = props.initialTimeValue
+        }
+
+        // 从缓存中获取值并设置
+        const cached = timeCacheStore.getCache(route.path)
+        if (cached) {
+            if (cached.interval !== undefined) {
+                datePickerRef.value.setInterval(cached.interval)
+            }
+            if (cached.timeValue) {
+                datePickerRef.value.timeValue = cached.timeValue
+            }
+        }
+
+        // 更新 tableStore 参数
+        tableStore.table.params.searchBeginTime = datePickerRef.value?.timeValue?.[0]
+        tableStore.table.params.searchEndTime = datePickerRef.value?.timeValue?.[1]
+        tableStore.table.params.startTime = datePickerRef.value?.timeValue?.[0]
+        tableStore.table.params.endTime = datePickerRef.value?.timeValue?.[1]
         tableStore.table.params.timeFlag = datePickerRef.value?.timeFlag
     }
+
     if (props.area) {
         tableStore.table.params.deptIndex = dictData.state.area[0].id
     }
+
     nextTick(() => {
         resizeObserver.observe(tableHeader.value)
         computedSearchRow()

src/stores/timeCache.ts

@@ -2,10 +2,11 @@
 import { defineStore } from 'pinia'
 import { RouteLocationNormalizedLoaded } from 'vue-router'
 
+// 时间组件的缓存值   用于驾驶舱放大的时候和内部的时间组件同步
 interface TimeCacheState {
   cache: Map<string, {
-    interval: number | undefined
+    interval: number | undefined  // 时间组件的月份、年份、时间、时间格式的缓存值
-    timeValue: any
+    timeValue: any   // 时间组件的值
   }>
 }
 

src/views/pqs/cockpit/homePage/index.vue

@@ -232,7 +232,6 @@ const settings = () => {
 
 // 处理 DatePicker 值变化事件
 const handleDatePickerChange = (value: any) => {
-  console.log('DatePicker value changed111:', value)
   
   // 将值缓存到 timeCache
   if (value) {