监测点列表详情

src/components/cockpit/indicatorFittingChart/index.vue

@@ -1,14 +1,7 @@
 <template>
     <div>
         <!--主要监测点列表 -->
-        <TableHeader
-            :showReset="false"
-            @selectChange="selectChange"
-            v-if="fullscreen"
-            datePicker
-            :initialInterval="getInitialInterval()"
-            :initialTimeValue="getInitialTimeValue()"
-        >
+        <TableHeader :showReset="false" @selectChange="selectChange" v-if="fullscreen" datePicker ref="tableHeaderRef">
             <template v-slot:select>
                 <el-form-item label="关键词">
                     <el-input v-model="tableStore.table.params.keywords" clearable placeholder="请输关键字" />
@@ -18,14 +11,14 @@
         <Table
             ref="tableRef"
             @cell-click="cellClickEvent"
-            :height="`calc(${prop.height} - ${headerHeight}px + ${fullscreen ? 0 : 56}px )`"
+            :height="`calc(${prop.height} - ${headerHeight}px + ${fullscreen ? -50 : 56}px )`"
         ></Table>
         <!-- 指标越限详情 -->
         <OverLimitDetails ref="OverLimitDetailsRef" />
     </div>
 </template>
 <script setup lang="ts">
-import { ref, onMounted, provide, reactive, watch, h } from 'vue'
+import { ref, onMounted, provide, reactive, watch, nextTick } from 'vue'
 import TableStore from '@/utils/tableStore'
 import Table from '@/components/table/index.vue'
 import TableHeader from '@/components/table/header/index.vue'
@@ -48,16 +41,7 @@ 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 tableHeaderRef = ref()
 
 // 计算是否全屏展示
 const fullscreen = computed(() => {
@@ -71,11 +55,21 @@ const fullscreen = computed(() => {
     }
 })
 
+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 tableStore: any = new TableStore({
     url: '/harmonic-boot/mainLine/list',
     method: 'POST',
-    showPage: false,
+    showPage: fullscreen.value ? true : false,
     exportName: '主要监测点列表',
     column: [
         {
@@ -107,7 +101,7 @@ const tableStore: any = new TableStore({
             minWidth: '70'
         },
 
-        { title: '主要存在的电能质量问题', field: 'problems', minWidth: '150' }
+        { title: '主要存在的电能质量问题', field: 'problems', minWidth: '150', showOverflow: true }
     ],
     beforeSearchFun: () => {
         // 尝试从缓存获取时间值
@@ -122,9 +116,8 @@ const tableStore: any = new TableStore({
         }
 
         // 如果缓存中没有则使用默认值
-        tableStore.table.params.searchBeginTime = beginTime || prop.timeValue?.[0] || getTimeOfTheMonth(prop.timeKey)[0]
-
-        tableStore.table.params.searchEndTime = endTime || prop.timeValue?.[1] || getTimeOfTheMonth(prop.timeKey)[1]
+        tableStore.table.params.searchBeginTime = beginTime || prop.timeValue?.[0]
+        tableStore.table.params.searchEndTime = endTime || prop.timeValue?.[1]
     },
     loadCallback: () => {
         tableStore.table.height = `calc(${prop.height} - 80px)`
@@ -139,21 +132,24 @@ provide('tableStore', tableStore)
 // 点击行
 const cellClickEvent = ({ row, column }: any) => {
     if (column.field == 'lineName') {
-        console.log(row)
-        OverLimitDetailsRef.value.open(row)
+        OverLimitDetailsRef.value.open(
+            row,
+            tableStore.table.params.searchBeginTime || prop.timeValue?.[0],
+            tableStore.table.params.searchEndTime || prop.timeValue?.[1]
+        )
     }
 }
 
-// 获取缓存的初始值  
+// 获取缓存的初始值
 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 as 3; // 强制断言为 3 或根据实际类型调整
+            return cached.interval as 3 // 强制断言为 3 或根据实际类型调整
         }
     }
-    return 3; // 明确返回字面量类型 3
-};
+    return 3 // 明确返回字面量类型 3
+}
 // 外部总的时间值
 const getInitialTimeValue = () => {
     if (fullscreen.value) {