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

src/components/cockpit/monitoringPointList/index.vue

@@ -1,8 +1,8 @@
 <template>
     <div>
         <!--监测点列表 -->
-
-        <Table ref="tableRef" @cell-click="cellClickEvent" :height="`calc(${prop.height}  )`"></Table>
+        <TableHeader :showReset="false" @selectChange="selectChange" datePicker v-if="fullscreen"></TableHeader>
+        <Table ref="tableRef" @cell-click="cellClickEvent" :height="`calc(${prop.height} - ${headerHeight}px + ${fullscreen ? 0 : 56}px  )`"></Table>
         <!-- 指标越限详情 -->
         <OverLimitDetails ref="OverLimitDetailsRef" />
     </div>
@@ -11,19 +11,51 @@
 import { ref, onMounted, provide, reactive, watch, h } from 'vue'
 import TableStore from '@/utils/tableStore'
 import Table from '@/components/table/index.vue'
-import TableHeader from '@/components/table/header/index.vue'
-import { useDictData } from '@/stores/dictData'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { getTimeOfTheMonth } from '@/utils/formatTime'
 import { ElTag } from 'element-plus'
 import OverLimitDetails from '@/components/cockpit/listOfMainMonitoringPoints/components/overLimitDetails.vue'
+import TableHeader from '@/components/table/header/index.vue'
+import { useRoute } from 'vue-router'
+import { useTimeCacheStore } from '@/stores/timeCache'
+
 const prop = defineProps({
+    w: { type: String },
+    h: { type: String },
     width: { type: String },
     height: { type: String },
     timeKey: { type: String },
     timeValue: { type: Object }
 })
-const dictData = useDictData()
+
+const headerHeight = ref(57)
+
+const route = useRoute()
+const timeCacheStore = useTimeCacheStore()
+
+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 fullscreen = computed(() => {
+    const w = Number(prop.w)
+    const h = Number(prop.h)
+    if (!isNaN(w) && !isNaN(h) && w === 12 && h === 6) {
+        // 执行相应逻辑
+        return true
+    } else {
+        return false
+    }
+})
+
 const OverLimitDetailsRef = ref()
 const tableStore: any = new TableStore({
     url: '/user-boot/role/selectRoleDetail?id=0',
@@ -63,8 +95,8 @@ const tableStore: any = new TableStore({
             minWidth: '80',
             render: 'customTemplate',
             customTemplate: (row: any) => {
-                 return `<span style='cursor: pointer;text-decoration: underline;' onclick="handleReportClick('${row.name}')">${row.type2}</span>`
-            },
+                return `<span style='cursor: pointer;text-decoration: underline;' onclick="handleReportClick('${row.name}')">${row.type2}</span>`
+            }
         },
         { title: '监测点名称', field: 'type3', minWidth: '70' },
         { title: '监测类型', field: 'type4', minWidth: '60' },
@@ -80,8 +112,21 @@ const tableStore: any = new TableStore({
         { title: '最新数据时间', field: 'type6', minWidth: '140' }
     ],
     beforeSearchFun: () => {
-        tableStore.table.params.searchBeginTime = prop.timeValue?.[0] || getTimeOfTheMonth(prop.timeKey)[0]
-        tableStore.table.params.searchEndTime = prop.timeValue?.[1] || getTimeOfTheMonth(prop.timeKey)[1]
+        // 尝试从缓存获取时间值
+        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.data = [
@@ -165,21 +210,21 @@ watch(
 )
 
 const handleReportClick = (id: string) => {
-  const row = tableStore.table.data.find((item: any) => item.id === id)
-  if (row && row.type2 !== '/') {
-    // 示例：触发下载逻辑（根据你注释掉的代码）
-    // getFileZip({ eventId: id }).then(res => {
-    //   let blob = new Blob([res], { type: 'application/zip' })
-    //   const url = window.URL.createObjectURL(blob)
-    //   const link = document.createElement('a')
-    //   link.href = url
-    //   link.download = row.wavePath?.split('/')[2] || '报告文件.zip'
-    //   link.click()
-    // })
-    console.log('点击了报告:', row.type2)
-  } else {
-    ElMessage.warning('暂无报告可下载')
-  }
+    const row = tableStore.table.data.find((item: any) => item.id === id)
+    if (row && row.type2 !== '/') {
+        // 示例：触发下载逻辑（根据你注释掉的代码）
+        // getFileZip({ eventId: id }).then(res => {
+        //   let blob = new Blob([res], { type: 'application/zip' })
+        //   const url = window.URL.createObjectURL(blob)
+        //   const link = document.createElement('a')
+        //   link.href = url
+        //   link.download = row.wavePath?.split('/')[2] || '报告文件.zip'
+        //   link.click()
+        // })
+        console.log('点击了报告:', row.type2)
+    } else {
+        ElMessage.warning('暂无报告可下载')
+    }
 }
 
 // 挂载到 window 供 HTML 调用
@@ -187,7 +232,7 @@ window.handleReportClick = handleReportClick
 
 // 组件销毁时清理全局方法
 onBeforeUnmount(() => {
-  delete window.handleReportClick
+    delete window.handleReportClick
 })
 </script>
 <style lang="scss" scoped></style>