日历表格调整

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 {