style: 能源管理和设备管理-列表局部滚动

src/views/mes/criticalComponent/index.vue

@@ -107,10 +107,12 @@
 
       <ContentWrap>
         <el-table
+          ref="tableRef"
           v-loading="loading"
           :data="list"
           :stripe="true"
           :show-overflow-tooltip="true"
+          :max-height="planTableMaxHeight"
           @selection-change="handleSelectionChange"
         >
           <el-table-column type="selection" width="55" />
@@ -217,8 +219,20 @@ const { t } = useI18n()
 const loading = ref(true)
 const list = ref<CriticalComponentVO[]>([])
 const total = ref(0)
+const tableRef = ref()
+const planTableMaxHeight = ref(520)
+const planPaginationRef = ref<HTMLElement>()
 const exportLoading = ref(false)
 
+const updatePlanTableMaxHeight = async () => {
+  await nextTick()
+  const tableTop = tableRef.value?.$el?.getBoundingClientRect().top ?? 0
+  const paginationHeight = planPaginationRef.value?.getBoundingClientRect().height ?? 72
+  const pageBottomGap = 56
+  const availableHeight = window.innerHeight - tableTop - paginationHeight - pageBottomGap
+  planTableMaxHeight.value = Math.min(window.innerHeight, Math.max(240, Math.floor(availableHeight)))
+}
+
 const queryParams = reactive({
   pageNo: 1,
   pageSize: 10,
@@ -235,6 +249,7 @@ const showAllFilters = ref(false)
 const filterCount = 5
 const toggleFilters = () => {
   showAllFilters.value = !showAllFilters.value
+  updatePlanTableMaxHeight()
 }
 
 const importDialogVisible = ref(false)
@@ -263,6 +278,7 @@ const getList = async () => {
     total.value = data.total
   } finally {
     loading.value = false
+    updatePlanTableMaxHeight()
   }
 }
 
@@ -392,5 +408,11 @@ const importTemplate = async () => {
 
 onMounted(() => {
   getList()
+  updatePlanTableMaxHeight()
+  window.addEventListener('resize', updatePlanTableMaxHeight)
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', updatePlanTableMaxHeight)
 })
 </script>

src/views/mes/deviceledger/index.vue

@@ -298,6 +298,7 @@
                 :data="list"
                 :stripe="true"
                 :show-overflow-tooltip="true"
+                :max-height="planTableMaxHeight"
                 row-key="id"
                 @selection-change="handleSelectionChange"
               >
@@ -693,6 +694,17 @@ const queryFormRef = ref() // 搜索的表单
 const exportLoading = ref(false)
 
 const tableRef = ref()
+const planTableMaxHeight = ref(520)
+const planPaginationRef = ref<HTMLElement>()
+
+const updatePlanTableMaxHeight = async () => {
+  await nextTick()
+  const tableTop = tableRef.value?.$el?.getBoundingClientRect().top ?? 0
+  const paginationHeight = planPaginationRef.value?.getBoundingClientRect().height ?? 72
+  const pageBottomGap = 56
+  const availableHeight = window.innerHeight - tableTop - paginationHeight - pageBottomGap
+  planTableMaxHeight.value = Math.min(window.innerHeight, Math.max(240, Math.floor(availableHeight)))
+}
 const selectedIds = ref<number[]>([])
 const handleSelectionChange = (rows: any[]) => {
   selectedIds.value = rows?.map((row) => row.id).filter((id) => id !== undefined) ?? []
@@ -703,6 +715,7 @@ const toggleView = () => {
   currentView.value = currentView.value === 'table' ? 'grid' : 'table'
   // 保存视图偏好
   localStorage.setItem('equipment-view', currentView.value)
+  updatePlanTableMaxHeight()
 }
 
 const dictStore = useDictStoreWithOut()
@@ -1022,6 +1035,7 @@ const getList = async () => {
     total.value = data.total
   } finally {
     loading.value = false
+    updatePlanTableMaxHeight()
   }
 }
 
@@ -1100,6 +1114,12 @@ onMounted(async () => {
   getDeviceTypeTree()
   getTypeTree()
   getList()
+  updatePlanTableMaxHeight()
+  window.addEventListener('resize', updatePlanTableMaxHeight)
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', updatePlanTableMaxHeight)
 })
 </script>
 

src/views/mes/devicetype/index.vue

@@ -63,10 +63,12 @@
   <!-- 列表 -->
   <ContentWrap>
     <el-table
+      ref="tableRef"
       v-loading="loading"
       :data="list"
       :stripe="true"
       :show-overflow-tooltip="true"
+      :max-height="planTableMaxHeight"
       row-key="id"
       default-expand-all
       :tree-props="{ children: 'children' }"
@@ -138,6 +140,18 @@ const { t } = useI18n() // 国际化
 const loading = ref(true) // 列表的加载中
 const list = ref<DeviceTypeTreeVO[]>([]) // 列表的数据
 const total = ref(0) // 列表的总页数
+const tableRef = ref()
+const planTableMaxHeight = ref(520)
+const planPaginationRef = ref<HTMLElement>()
+
+const updatePlanTableMaxHeight = async () => {
+  await nextTick()
+  const tableTop = tableRef.value?.$el?.getBoundingClientRect().top ?? 0
+  const paginationHeight = planPaginationRef.value?.getBoundingClientRect().height ?? 72
+  const pageBottomGap = 56
+  const availableHeight = window.innerHeight - tableTop - paginationHeight - pageBottomGap
+  planTableMaxHeight.value = Math.min(window.innerHeight, Math.max(240, Math.floor(availableHeight)))
+}
 const showPagination = ref(true)
 const queryParams = reactive({
   pageNo: 1,
@@ -177,6 +191,7 @@ const getList = async () => {
     showPagination.value = true
   } finally {
     loading.value = false
+    updatePlanTableMaxHeight()
   }
 }
 
@@ -229,5 +244,11 @@ const handleExport = async () => {
 /** 初始化 **/
 onMounted(() => {
   getList()
+  updatePlanTableMaxHeight()
+  window.addEventListener('resize', updatePlanTableMaxHeight)
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', updatePlanTableMaxHeight)
 })
 </script>

src/views/mes/dvrepair/index.vue

@@ -127,6 +127,7 @@
           :data="list"
           :stripe="true"
           :show-overflow-tooltip="true"
+          :max-height="planTableMaxHeight"
           row-key="id"
           @selection-change="handleSelectionChange">
       <el-table-column type="selection" width="55px" fixed="left" reserve-selection />
@@ -259,6 +260,7 @@ const showAllFilters = ref(false)
 const filterCount = 8
 const toggleFilters = () => {
   showAllFilters.value = !showAllFilters.value
+  updatePlanTableMaxHeight()
 }
 
 const statusOptions = [
@@ -308,6 +310,17 @@ const isProcessedRepair = (value: any) => {
 }
 
 const tableRef = ref()
+const planTableMaxHeight = ref(520)
+const planPaginationRef = ref<HTMLElement>()
+
+const updatePlanTableMaxHeight = async () => {
+  await nextTick()
+  const tableTop = tableRef.value?.$el?.getBoundingClientRect().top ?? 0
+  const paginationHeight = planPaginationRef.value?.getBoundingClientRect().height ?? 72
+  const pageBottomGap = 56
+  const availableHeight = window.innerHeight - tableTop - paginationHeight - pageBottomGap
+  planTableMaxHeight.value = Math.min(window.innerHeight, Math.max(240, Math.floor(availableHeight)))
+}
 const selectedIds = ref<number[]>([])
 const handleSelectionChange = (rows: any[]) => {
   selectedIds.value = rows?.map((row) => row.id).filter((id) => id !== undefined) ?? []
@@ -322,6 +335,7 @@ const getList = async () => {
     total.value = data.total
   } finally {
     loading.value = false
+    updatePlanTableMaxHeight()
   }
 }
 
@@ -399,5 +413,11 @@ const handleExport = async () => {
 /** 初始化 **/
 onMounted(() => {
   getList()
+  updatePlanTableMaxHeight()
+  window.addEventListener("resize", updatePlanTableMaxHeight)
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener("resize", updatePlanTableMaxHeight)
 })
 </script>

src/views/mes/dvsubject/index.vue

@@ -62,8 +62,15 @@
   <!-- 列表 -->
   <ContentWrap>
     <el-table
-ref="tableRef" v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true" row-key="id"
-      @selection-change="handleSelectionChange">
+      ref="tableRef"
+      v-loading="loading"
+      :data="list"
+      :stripe="true"
+      :show-overflow-tooltip="true"
+      :max-height="planTableMaxHeight"
+      row-key="id"
+      @selection-change="handleSelectionChange"
+    >
       <el-table-column type="selection" width="55" fixed="left" reserve-selection />
       <el-table-column :label="t('common.index')" align="center" width="80" fixed="left">
         <template #default="scope">
@@ -147,8 +154,19 @@ const loading = ref(true) // 列表的加载中
 const list = ref<DvSubjectVO[]>([]) // 列表的数据
 const total = ref(0) // 列表的总页数
 const tableRef = ref()
+const planTableMaxHeight = ref(520)
+const planPaginationRef = ref<HTMLElement>()
 const selectedIds = ref<number[]>([])
 
+const updatePlanTableMaxHeight = async () => {
+  await nextTick()
+  const tableTop = tableRef.value?.$el?.getBoundingClientRect().top ?? 0
+  const paginationHeight = planPaginationRef.value?.getBoundingClientRect().height ?? 72
+  const pageBottomGap = 56
+  const availableHeight = window.innerHeight - tableTop - paginationHeight - pageBottomGap
+  planTableMaxHeight.value = Math.min(window.innerHeight, Math.max(240, Math.floor(availableHeight)))
+}
+
 const handleSelectionChange = (rows: any[]) => {
   selectedIds.value = rows?.map((row) => row.id).filter((id) => id !== undefined) ?? []
 }
@@ -206,6 +224,7 @@ const getList = async () => {
     total.value = data.total
   } finally {
     loading.value = false
+    updatePlanTableMaxHeight()
   }
 }
 
@@ -274,6 +293,12 @@ const handleExport = async () => {
 onMounted(async () => {
   await dictStore.setDictMap()
   dictReady.value = true
-  getList()
+  await getList()
+  updatePlanTableMaxHeight()
+  window.addEventListener('resize', updatePlanTableMaxHeight)
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', updatePlanTableMaxHeight)
 })
 </script>

src/views/mes/energydevice/index.vue

@@ -53,10 +53,12 @@ type="success" plain @click="handleExport" :loading="exportLoading"
   <!-- 列表 -->
   <ContentWrap>
     <el-table
+      ref="tableRef"
       v-loading="loading"
       :data="list"
       :stripe="true"
       :show-overflow-tooltip="true"
+      :max-height="planTableMaxHeight"
       highlight-current-row
       row-key="id"
       @current-change="handleCurrentChange"
@@ -165,6 +167,18 @@ const typeList = ref<EnergyTypeVO[]>([]) // 列表
 const loading = ref(true) // 列表的加载中
 const list = ref<EnergyDeviceVO[]>([]) // 列表的数据
 const total = ref(0) // 列表的总页数
+const tableRef = ref()
+const planTableMaxHeight = ref(520)
+const planPaginationRef = ref<HTMLElement>()
+
+const updatePlanTableMaxHeight = async () => {
+  await nextTick()
+  const tableTop = tableRef.value?.$el?.getBoundingClientRect().top ?? 0
+  const paginationHeight = planPaginationRef.value?.getBoundingClientRect().height ?? 72
+  const pageBottomGap = 56
+  const availableHeight = window.innerHeight - tableTop - paginationHeight - pageBottomGap
+  planTableMaxHeight.value = Math.min(window.innerHeight, Math.max(240, Math.floor(availableHeight)))
+}
 const selectedIds = ref<Array<number | string>>([])
 const queryParams = reactive({
   pageNo: 1,
@@ -195,6 +209,7 @@ const getList = async () => {
     }
   } finally {
     loading.value = false
+    updatePlanTableMaxHeight()
   }
 }
 
@@ -268,6 +283,12 @@ const handleCurrentChange = (row) => {
 onMounted(async () => {
   typeList.value = await EnergyTypeApi.getEnergyTypeList()
   getList()
+  updatePlanTableMaxHeight()
+  window.addEventListener('resize', updatePlanTableMaxHeight)
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', updatePlanTableMaxHeight)
 })
 
 /** 添加/修改操作 */

src/views/mes/energydevicecheck/index.vue

@@ -40,6 +40,7 @@ v-model="queryParams.timeRange" type="datetimerange" value-format="YYYY-MM-DD HH
   <ContentWrap>
     <el-table
 ref="tableRef" v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true" row-key="id"
+      :max-height="planTableMaxHeight"
       :expand-row-keys="expandRowKeys" :row-class-name="getRowClassName" style=" min-height: 50vh;margin-top: 20px"
       @row-click="handleRowClick" @selection-change="handleSelectionChange">
       <!-- <el-table-column type="selection" width="50" align="center" /> -->
@@ -103,6 +104,17 @@ const loading = ref(true) // 列表的加载中
 const list = ref<EnergyDeviceDataRecordVO[]>([]) // 列表的数据
 const total = ref(0) // 列表的总页数
 const tableRef = ref()
+const planTableMaxHeight = ref(520)
+const planPaginationRef = ref<HTMLElement>()
+
+const updatePlanTableMaxHeight = async () => {
+  await nextTick()
+  const tableTop = tableRef.value?.$el?.getBoundingClientRect().top ?? 0
+  const paginationHeight = planPaginationRef.value?.getBoundingClientRect().height ?? 72
+  const pageBottomGap = 56
+  const availableHeight = window.innerHeight - tableTop - paginationHeight - pageBottomGap
+  planTableMaxHeight.value = Math.min(window.innerHeight, Math.max(240, Math.floor(availableHeight)))
+}
 const expandRowKeys = ref<Array<string | number>>([])
 const selectedIds = ref<Array<number | string>>([])
 
@@ -233,6 +245,7 @@ const getList = async () => {
     expandRowKeys.value = []
   } finally {
     loading.value = false
+    updatePlanTableMaxHeight()
   }
 }
 
@@ -288,6 +301,12 @@ const loadOrgOptions = async () => {
 onMounted(async () => {
   await loadOrgOptions()
   await getList()
+  updatePlanTableMaxHeight()
+  window.addEventListener('resize', updatePlanTableMaxHeight)
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', updatePlanTableMaxHeight)
 })
 </script>
 

src/views/mes/energytype/index.vue

@@ -88,10 +88,12 @@
   <!-- 列表 -->
   <ContentWrap>
     <el-table
+      ref="tableRef"
       v-loading="loading"
       :data="list"
       :stripe="true"
       :show-overflow-tooltip="true"
+      :max-height="planTableMaxHeight"
       row-key="id"
       @selection-change="handleSelectionChange"
     >
@@ -187,6 +189,18 @@ const { t } = useI18n() // 国际化
 const loading = ref(true) // 列表的加载中
 const list = ref<EnergyTypeVO[]>([]) // 列表的数据
 const total = ref(0) // 列表的总页数
+const tableRef = ref()
+const planTableMaxHeight = ref(520)
+const planPaginationRef = ref<HTMLElement>()
+
+const updatePlanTableMaxHeight = async () => {
+  await nextTick()
+  const tableTop = tableRef.value?.$el?.getBoundingClientRect().top ?? 0
+  const paginationHeight = planPaginationRef.value?.getBoundingClientRect().height ?? 72
+  const pageBottomGap = 56
+  const availableHeight = window.innerHeight - tableTop - paginationHeight - pageBottomGap
+  planTableMaxHeight.value = Math.min(window.innerHeight, Math.max(240, Math.floor(availableHeight)))
+}
 const queryParams = reactive({
   pageNo: 1,
   pageSize: 10,
@@ -203,6 +217,7 @@ const showAllFilters = ref(false)
 const filterCount = 4
 const toggleFilters = () => {
   showAllFilters.value = !showAllFilters.value
+  updatePlanTableMaxHeight()
 }
 
 const selectedIds = ref<number[]>([])
@@ -219,6 +234,7 @@ const getList = async () => {
     total.value = data.total
   } finally {
     loading.value = false
+    updatePlanTableMaxHeight()
   }
 }
 
@@ -275,5 +291,11 @@ const handleExport = async () => {
 /** 初始化 **/
 onMounted(() => {
   getList()
+  updatePlanTableMaxHeight()
+  window.addEventListener('resize', updatePlanTableMaxHeight)
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', updatePlanTableMaxHeight)
 })
 </script>

src/views/mes/planMaintenance/index.vue

@@ -68,6 +68,7 @@
       row-key="id"
       :stripe="true"
       :show-overflow-tooltip="true"
+      :max-height="planTableMaxHeight"
       :expand-row-keys="expandedKeys"
       @expand-change="handleExpandChange"
       @selection-change="handleSelectionChange"
@@ -184,7 +185,18 @@ const queryParams = reactive({
 const queryFormRef = ref()
 
 const tableRef = ref()
+const planTableMaxHeight = ref(520)
+const planPaginationRef = ref<HTMLElement>()
 const selectedIds = ref<(number | string)[]>([])
+
+const updatePlanTableMaxHeight = async () => {
+  await nextTick()
+  const tableTop = tableRef.value?.$el?.getBoundingClientRect().top ?? 0
+  const paginationHeight = planPaginationRef.value?.getBoundingClientRect().height ?? 72
+  const pageBottomGap = 56
+  const availableHeight = window.innerHeight - tableTop - paginationHeight - pageBottomGap
+  planTableMaxHeight.value = Math.min(window.innerHeight, Math.max(240, Math.floor(availableHeight)))
+}
 const handleSelectionChange = (rows: any[]) => {
   selectedIds.value = rows?.map((row) => row.id).filter((id) => id !== undefined && id !== null && id !== '') ?? []
 }
@@ -244,6 +256,7 @@ const getList = async () => {
     total.value = normalized.total
   } finally {
     loading.value = false
+    updatePlanTableMaxHeight()
   }
 }
 
@@ -339,6 +352,12 @@ const handleExport = async () => {
 onMounted(async () => {
   await dictStore.setDictMap()
   dictReady.value = true
-  getList()
+  await getList()
+  updatePlanTableMaxHeight()
+  window.addEventListener('resize', updatePlanTableMaxHeight)
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', updatePlanTableMaxHeight)
 })
 </script>

src/views/mes/taskManagement/index.vue

@@ -86,10 +86,12 @@
 
   <ContentWrap>
     <el-table
+      ref="tableRef"
       v-loading="loading"
       :data="list"
       :stripe="true"
       :show-overflow-tooltip="true"
+      :max-height="planTableMaxHeight"
       @selection-change="handleSelectionChange"
     >
       <el-table-column type="selection" width="55" />
@@ -255,9 +257,21 @@ const taskTypeOptions = [
 const loading = ref(true)
 const list = ref<TaskManagementVO[]>([])
 const total = ref(0)
+const tableRef = ref()
+const planTableMaxHeight = ref(520)
+const planPaginationRef = ref<HTMLElement>()
 const exportLoading = ref(false)
 const selectedIds = ref<number[]>([])
 
+const updatePlanTableMaxHeight = async () => {
+  await nextTick()
+  const tableTop = tableRef.value?.$el?.getBoundingClientRect().top ?? 0
+  const paginationHeight = planPaginationRef.value?.getBoundingClientRect().height ?? 72
+  const pageBottomGap = 56
+  const availableHeight = window.innerHeight - tableTop - paginationHeight - pageBottomGap
+  planTableMaxHeight.value = Math.min(window.innerHeight, Math.max(240, Math.floor(availableHeight)))
+}
+
 type PlanOption = {
   id: number | string
   planName: string
@@ -334,6 +348,7 @@ const getList = async () => {
     total.value = data.total
   } finally {
     loading.value = false
+    updatePlanTableMaxHeight()
   }
 }
 
@@ -425,7 +440,13 @@ const handleExport = async () => {
   }
 }
 
-onMounted(() => {
-  Promise.all([ensurePlanOptionsLoaded(), ensureDeviceOptionsLoaded(), getList()])
+onMounted(async () => {
+  await Promise.all([ensurePlanOptionsLoaded(), ensureDeviceOptionsLoaded(), getList()])
+  updatePlanTableMaxHeight()
+  window.addEventListener('resize', updatePlanTableMaxHeight)
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', updatePlanTableMaxHeight)
 })
 </script>

src/views/mes/workOrderManagement/index.vue

@@ -81,10 +81,12 @@
     </div>
 
     <el-table
+      ref="tableRef"
       v-loading="loading"
       :data="list"
       :stripe="true"
       :show-overflow-tooltip="true"
+      :max-height="planTableMaxHeight"
       row-key="id"
       @selection-change="handleSelectionChange"
       @row-click="handleRowClick"
@@ -231,6 +233,18 @@ const jobResultOptions = [
 const loading = ref(true)
 const list = ref<TicketManagementVO[]>([])
 const total = ref(0)
+const tableRef = ref()
+const planTableMaxHeight = ref(520)
+const planPaginationRef = ref<HTMLElement>()
+
+const updatePlanTableMaxHeight = async () => {
+  await nextTick()
+  const tableTop = tableRef.value?.$el?.getBoundingClientRect().top ?? 0
+  const paginationHeight = planPaginationRef.value?.getBoundingClientRect().height ?? 72
+  const pageBottomGap = 56
+  const availableHeight = window.innerHeight - tableTop - paginationHeight - pageBottomGap
+  planTableMaxHeight.value = Math.min(window.innerHeight, Math.max(240, Math.floor(availableHeight)))
+}
 const selectedIds = ref<number[]>([])
 const cancelLoading = ref(false)
 const exportLoading = ref(false)
@@ -259,6 +273,7 @@ const showAllFilters = ref(false)
 const filterCount = 4
 const toggleFilters = () => {
   showAllFilters.value = !showAllFilters.value
+  updatePlanTableMaxHeight()
 }
 
 const getList = async () => {
@@ -269,6 +284,7 @@ const getList = async () => {
     total.value = data.total
   } finally {
     loading.value = false
+    updatePlanTableMaxHeight()
   }
 }
 
@@ -352,5 +368,11 @@ const handleResultSuccess = async () => {
 onMounted(async () => {
   await dictStore.setDictMap()
   await getList()
+  updatePlanTableMaxHeight()
+  window.addEventListener("resize", updatePlanTableMaxHeight)
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener("resize", updatePlanTableMaxHeight)
 })
 </script>