日历表格调整

2025-11-26 09:31:32 +08:00
parent 67d9aaf958
commit cf51ba9ff0
3 changed files with 62 additions and 58 deletions
--- a/src/components/cockpit/indicatorDetails/index.vue
+++ b/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]
-        tableStore.table.params.searchEndTime = tableStore.table.params.searchEndTime || prop.timeValue?.[1]
+        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 中
-        //     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(() => {
-    tableStore.index()
+    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) => {
-        // 当外部时间值变化时，更新表格的时间参数
-        if (newVal && (!oldVal || newVal[0] !== oldVal[0] || newVal[1] !== oldVal[1])) {
-            tableStore.table.params.searchBeginTime = newVal[0]
-            tableStore.table.params.searchEndTime = newVal[1]
-            tableStore.index()
-        }
+    // (newVal, oldVal) => {
+    //     // 当外部时间值变化时，更新表格的时间参数
+    //     if (newVal && (!oldVal || newVal[0] !== oldVal[0] || newVal[1] !== oldVal[1])) {
+    //         tableStore.table.params.searchBeginTime = newVal[0]
+    //         tableStore.table.params.searchEndTime = newVal[1]
+    //         tableStore.index()
+    //     }
+    // },
+    val => {
+        tableStore.index()
    },
+
    {
        deep: true
    }
 )
-
-const addMenu = () => {}
 </script>
 <style lang="scss" scoped>
 :deep(.el-calendar) {
--- a/src/components/cockpit/transientDetails/index.vue
+++ b/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) {
-    //     // 更新时间参数
-    //     tableStore.table.params.searchBeginTime = datePickerValue.timeValue[0]
-    //     tableStore.table.params.searchEndTime = datePickerValue.timeValue[1]
-    // }
+    if (datePickerValue && datePickerValue.timeValue) {
+        // 更新时间参数
+        tableStore.table.params.searchBeginTime = datePickerValue.timeValue[0]
+        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 {
--- a/src/components/table/header/index.vue
+++ b/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)
            }