日历表格调整

src/components/cockpit/indicatorDetails/index.vue

@@ -1,7 +1,14 @@
 <template>
     <div>
         <!--指标越限明细 -->
-        <TableHeader :showReset="false" @selectChange="selectChange" datePicker v-if="fullscreen"></TableHeader>
+        <TableHeader
+            :showReset="false"
+            ref="TableHeaderRef"
+            @selectChange="selectChange"
+            datePicker
+            v-if="fullscreen"
+            :timeCacheFlag="false"
+        ></TableHeader>
         <el-calendar
             v-model="value"
             :style="{
@@ -51,6 +58,8 @@ const headerHeight = ref(57)
 
 const list = ref()
 
+const TableHeaderRef = ref()
+
 dayjs.en.weekStart = 1 //设置日历的周起始日为星期一
 const value = ref(new Date())
 
@@ -82,46 +91,18 @@ const getTextForDate = (date: string) => {
 }
 
 const tableStore: any = new TableStore({
-    // url: '/user-boot/role/selectRoleDetail?id=0',
     url: '/harmonic-boot/limitRateDetailD/limitCalendarData',
     method: 'POST',
     showPage: false,
     column: [],
     beforeSearchFun: () => {
-        tableStore.table.params.searchBeginTime = tableStore.table.params.searchBeginTime || prop.timeValue?.[0]
+        if (!fullscreen.value && prop.timeValue && Array.isArray(prop.timeValue)) {
-        tableStore.table.params.searchEndTime = tableStore.table.params.searchEndTime || prop.timeValue?.[1]
+            tableStore.table.params.searchBeginTime = prop.timeValue[0]
+            tableStore.table.params.searchEndTime = prop.timeValue[1]
+        }
     },
     loadCallback: () => {
         value.value = tableStore.table.params.searchBeginTime
-        // 将后端返回的数据整合到 list 中
-        //     tableStore.table.data = [
-        //     {
-        //         "time": "2025-11-13",
-        //         "items": [
-        //             "闪变越限",
-        //             "谐波电流越限"
-        //         ],
-        //         "status": 1
-        //     },
-        //     {
-        //         "time": "2025-11-14",
-        //         "items": [
-        //             "频率偏差越限",
-        //             "三相电压不平衡越限",
-        //             "谐波电压越限",
-        //             "谐波电流越限",
-        //              "频率偏差越限",
-        //             "三相电压不平衡越限",
-        //             "谐波电压越限",
-        //             "谐波电流越限",
-        //              "频率偏差越限",
-        //             "三相电压不平衡越限",
-        //             "谐波电压越限",
-        //             "谐波电流越限"
-        //         ],
-        //         "status": 2
-        //     }
-        // ]
         if (tableStore.table.data && tableStore.table.data.length > 0) {
             list.value = tableStore.table.data.map((item: any) => {
                 // 将 items 数组转换为带换行的文本
@@ -162,7 +143,15 @@ const setBackground = (value: string) => {
 provide('tableStore', tableStore)
 
 onMounted(() => {
+    nextTick(() => {
+        if (TableHeaderRef.value && typeof TableHeaderRef.value.setDatePicker === 'function') {
+            TableHeaderRef.value.setDatePicker([{ label: '月份', value: 3 }])
+        }
+        if (fullscreen.value) {
+            TableHeaderRef.value.setInterval(3)
+        }
         tableStore.index()
+    })
 })
 watch(
     () => prop.timeKey,
@@ -172,20 +161,22 @@ watch(
 )
 watch(
     () => prop.timeValue,
-    (newVal, oldVal) => {
+    // (newVal, oldVal) => {
-        // 当外部时间值变化时，更新表格的时间参数
+    //     // 当外部时间值变化时，更新表格的时间参数
-        if (newVal && (!oldVal || newVal[0] !== oldVal[0] || newVal[1] !== oldVal[1])) {
+    //     if (newVal && (!oldVal || newVal[0] !== oldVal[0] || newVal[1] !== oldVal[1])) {
-            tableStore.table.params.searchBeginTime = newVal[0]
+    //         tableStore.table.params.searchBeginTime = newVal[0]
-            tableStore.table.params.searchEndTime = newVal[1]
+    //         tableStore.table.params.searchEndTime = newVal[1]
+    //         tableStore.index()
+    //     }
+    // },
+    val => {
         tableStore.index()
-        }
     },
+
     {
         deep: true
     }
 )
-
-const addMenu = () => {}
 </script>
 <style lang="scss" scoped>
 :deep(.el-calendar) {

src/components/cockpit/transientDetails/index.vue

@@ -7,6 +7,7 @@
             @selectChange="selectChange"
             datePicker
             v-if="fullscreen"
+            :timeCacheFlag="false"
         ></TableHeader>
         <el-calendar
             v-model="value"
@@ -14,9 +15,16 @@
                 height: `calc(${prop.height} - ${headerHeight}px + ${fullscreen ? 0 : 56}px  )`,
                 overflow: 'auto'
             }"
+            v-loading="tableStore.table.loading"
         >
             <template #date-cell="{ data }">
-                <div style="height: 100%; padding: 8px" :style="{ background: setBackground(data.day) }">
+                <div
+                    style="padding: 8px"
+                    :style="{
+                        background: setBackground(data.day),
+                        height: `calc((${prop.height} - 100px - ${headerHeight}px + ${fullscreen ? 0 : 56}px) / 5 )`
+                    }"
+                >
                     <p :class="data.isSelected ? 'is-selected' : ''">
                         {{ data.day.split('-').slice(2).join('-') }}
                     </p>
@@ -31,7 +39,7 @@
                         </template>
                         <div
                             style="text-decoration: underline"
-                            :style="{ height: `calc(${prop.height} / 5 - 40px)`, overflow: 'auto' }"
+                            class="details"
                             v-for="item in list?.filter((item:any) => item.name == data.day)"
                         >
                             <div @click="descentClick">电压暂降:{{ item.eventDown || 0 }}</div>
@@ -49,12 +57,9 @@
 <script setup lang="ts">
 import { ref, onMounted, provide, reactive, watch, nextTick } from 'vue'
 import TableStore from '@/utils/tableStore'
-import { getTimeOfTheMonth } from '@/utils/formatTime'
 import { dayjs } from 'element-plus'
 import TransientList from './components/transientList.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, Number] },
@@ -79,11 +84,11 @@ const hasEventData = (day: string) => {
 const selectChange = (showSelect: any, height: any, datePickerValue?: any) => {
     headerHeight.value = height
 
-    // if (datePickerValue && datePickerValue.timeValue) {
+    if (datePickerValue && datePickerValue.timeValue) {
-    //     // 更新时间参数
+        // 更新时间参数
-    //     tableStore.table.params.searchBeginTime = datePickerValue.timeValue[0]
+        tableStore.table.params.searchBeginTime = datePickerValue.timeValue[0]
-    //     tableStore.table.params.searchEndTime = datePickerValue.timeValue[1]
+        tableStore.table.params.searchEndTime = datePickerValue.timeValue[1]
-    // }
+    }
 }
 
 // 计算是否全屏展示
@@ -113,13 +118,14 @@ const tableStore: any = new TableStore({
     column: [],
 
     beforeSearchFun: () => {
-        if (prop.timeValue && Array.isArray(prop.timeValue)) {
+        if (!fullscreen.value && prop.timeValue && Array.isArray(prop.timeValue)) {
             tableStore.table.params.searchBeginTime = prop.timeValue[0]
             tableStore.table.params.searchEndTime = prop.timeValue[1]
         }
     },
 
     loadCallback: () => {
+        value.value = tableStore.table.params.searchBeginTime
         list.value = tableStore.table.data
     }
 })
@@ -182,20 +188,25 @@ const descentClick = () => {
 </script>
 <style lang="scss" scoped>
 :deep(.el-calendar) {
-    .el-calendar__header {
+    .el-calendar__button-group {
         display: none;
     }
     .el-calendar__body {
         padding: 0px !important;
-        height: 100%;
+        height: calc(100% - 46px);
         .el-calendar-table {
             height: 100%;
         }
     }
     .el-calendar-day {
+        // height: calc(912px / 5 );
         height: 100%;
         padding: 0px;
         overflow: hidden;
+        .details {
+            height: calc(100% - 20px);
+            overflow-y: auto;
+        }
     }
     .el-calendar-table__row {
         .next {

src/components/table/header/index.vue

@@ -88,6 +88,7 @@ interface Props {
     theCurrentTime?: boolean //控制时间前3天展示上个月时间
     showReset?: boolean //是否显示重置
     showExport?: boolean //导出控制
+    timeCacheFlag?: boolean //是否取缓存时间
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -97,7 +98,8 @@ const props = withDefaults(defineProps<Props>(), {
     nextFlag: false,
     theCurrentTime: true,
     showReset: true,
-    showExport: false
+    showExport: false,
+    timeCacheFlag: true
 })
 
 // 处理 DatePicker 值变化事件
@@ -134,7 +136,7 @@ onMounted(() => {
     if (props.datePicker && datePickerRef.value) {
         // 从缓存中获取值并设置
         const cached = timeCacheStore.getCache(route.path)
-        if (cached) {
+        if (props.timeCacheFlag && cached) {
             if (cached.interval !== undefined) {
                 datePickerRef.value.setInterval(cached.interval)
             }