|
|
@@ -42,11 +42,16 @@
|
|
|
end-placeholder="结束日期"
|
|
|
:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
|
|
|
class="!w-220px"
|
|
|
+ :shortcuts="rangeShortcuts"
|
|
|
/>
|
|
|
</el-form-item>
|
|
|
<el-form-item>
|
|
|
- <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
|
|
|
- <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
|
|
|
+ <el-button @click="handleQuery"
|
|
|
+ ><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button
|
|
|
+ >
|
|
|
+ <el-button @click="resetQuery"
|
|
|
+ ><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button
|
|
|
+ >
|
|
|
<el-button
|
|
|
type="primary"
|
|
|
plain
|
|
|
@@ -70,20 +75,59 @@
|
|
|
|
|
|
<!-- 列表 -->
|
|
|
<ContentWrap ref="tableContainerRef">
|
|
|
- <el-table ref="tableRef" v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
|
|
|
- <el-table-column label="主键id" align="center" prop="id" v-if="false"/>
|
|
|
+ <el-table
|
|
|
+ ref="tableRef"
|
|
|
+ v-loading="loading"
|
|
|
+ :data="list"
|
|
|
+ :stripe="true"
|
|
|
+ :style="{ width: '100%' }"
|
|
|
+ max-height="600"
|
|
|
+ show-overflow-tooltip
|
|
|
+ border
|
|
|
+ >
|
|
|
<el-table-column
|
|
|
label="创建时间"
|
|
|
align="center"
|
|
|
prop="createTime"
|
|
|
:formatter="dateFormatter"
|
|
|
- :width="columnWidths.createTime"
|
|
|
+ :min-width="columnWidths.createTime.width"
|
|
|
+ resizable
|
|
|
/>
|
|
|
- <el-table-column label="施工队伍" align="center" prop="deptName" :width="columnWidths.deptName"/>
|
|
|
- <el-table-column label="项目" align="center" prop="contractName" :width="columnWidths.contractName"/>
|
|
|
- <el-table-column label="任务" align="center" prop="taskName" :width="columnWidths.taskName"/>
|
|
|
- <el-table-column label="时间节点" align="center" prop="timeRange" :width="columnWidths.timeRange"/>
|
|
|
- <el-table-column :label="t('project.status')" align="center" prop="rdStatus" :width="columnWidths.rdStatus">
|
|
|
+ <el-table-column
|
|
|
+ label="施工队伍"
|
|
|
+ align="center"
|
|
|
+ prop="deptName"
|
|
|
+ :min-width="columnWidths.deptName.width"
|
|
|
+ resizable
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ label="项目"
|
|
|
+ align="center"
|
|
|
+ prop="contractName"
|
|
|
+ :min-width="columnWidths.contractName.width"
|
|
|
+ resizable
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ label="任务"
|
|
|
+ align="center"
|
|
|
+ prop="taskName"
|
|
|
+ :min-width="columnWidths.taskName.width"
|
|
|
+ resizable
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ label="时间节点"
|
|
|
+ align="center"
|
|
|
+ prop="timeRange"
|
|
|
+ :min-width="columnWidths.timeRange.width"
|
|
|
+ resizable
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ :label="t('project.status')"
|
|
|
+ align="center"
|
|
|
+ prop="rdStatus"
|
|
|
+ :min-width="columnWidths.rdStatus.width"
|
|
|
+ resizable
|
|
|
+ >
|
|
|
<template #default="scope">
|
|
|
<dict-tag :type="DICT_TYPE.PMS_PROJECT_RD_STATUS" :value="scope.row.rdStatus" />
|
|
|
</template>
|
|
|
@@ -95,58 +139,114 @@
|
|
|
<el-table-column label="施工设备" align="center" prop="deviceIds" /> -->
|
|
|
<!--
|
|
|
<el-table-column label="时间节点-结束" align="center" prop="endTime" /> -->
|
|
|
- <el-table-column label="当日施工井" align="center" prop="cumulativeWorkingWell" :width="columnWidths.cumulativeWorkingWell"/>
|
|
|
- <el-table-column label="当日施工层" align="center" prop="cumulativeWorkingLayers" :width="columnWidths.cumulativeWorkingLayers"/>
|
|
|
- <el-table-column label="当日泵车台次" align="center" prop="dailyPumpTrips" :width="columnWidths.dailyPumpTrips"/>
|
|
|
- <el-table-column label="当日仪表/混砂" align="center" prop="dailyToolsSand" :width="columnWidths.dailyToolsSand"/>
|
|
|
- <el-table-column label="趟数" align="center" prop="runCount" :width="columnWidths.runCount"/>
|
|
|
- <el-table-column label="桥塞" align="center" prop="bridgePlug" :width="columnWidths.bridgePlug"/>
|
|
|
- <el-table-column label="水方量" align="center" prop="waterVolume" :width="columnWidths.waterVolume"/>
|
|
|
- <el-table-column label="时间H" align="center" prop="hourCount" :width="columnWidths.hourCount"/>
|
|
|
+ <el-table-column align="center" label="当日">
|
|
|
+ <el-table-column
|
|
|
+ label="施工井"
|
|
|
+ align="center"
|
|
|
+ prop="cumulativeWorkingWell"
|
|
|
+ :min-width="columnWidths.cumulativeWorkingWell.width"
|
|
|
+ resizable
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ label="施工层"
|
|
|
+ align="center"
|
|
|
+ prop="cumulativeWorkingLayers"
|
|
|
+ :min-width="columnWidths.cumulativeWorkingLayers.width"
|
|
|
+ resizable
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ label="泵车台次"
|
|
|
+ align="center"
|
|
|
+ prop="dailyPumpTrips"
|
|
|
+ :min-width="columnWidths.dailyPumpTrips.width"
|
|
|
+ resizable
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ label="仪表/混砂"
|
|
|
+ align="center"
|
|
|
+ prop="dailyToolsSand"
|
|
|
+ :min-width="columnWidths.dailyToolsSand.width"
|
|
|
+ resizable
|
|
|
+ />
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ label="趟数"
|
|
|
+ align="center"
|
|
|
+ prop="runCount"
|
|
|
+ :min-width="columnWidths.runCount.width"
|
|
|
+ resizable
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ label="桥塞"
|
|
|
+ align="center"
|
|
|
+ prop="bridgePlug"
|
|
|
+ :min-width="columnWidths.bridgePlug.width"
|
|
|
+ resizable
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ label="水方量"
|
|
|
+ align="center"
|
|
|
+ prop="waterVolume"
|
|
|
+ :min-width="columnWidths.waterVolume.width"
|
|
|
+ resizable
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ label="时间H"
|
|
|
+ align="center"
|
|
|
+ prop="hourCount"
|
|
|
+ :min-width="columnWidths.hourCount.width"
|
|
|
+ resizable
|
|
|
+ />
|
|
|
<!--
|
|
|
<el-table-column
|
|
|
label="施工开始日期"
|
|
|
align="center"
|
|
|
prop="constructionStartDate"
|
|
|
:formatter="dateFormatter"
|
|
|
- :width="columnWidths.constructionStartDate"
|
|
|
+ :min-width="columnWidths.constructionStartDate"
|
|
|
/>
|
|
|
<el-table-column
|
|
|
label="施工结束日期"
|
|
|
align="center"
|
|
|
prop="constructionEndDate"
|
|
|
:formatter="dateFormatter"
|
|
|
- :width="columnWidths.constructionEndDate"
|
|
|
+ :min-width="columnWidths.constructionEndDate"
|
|
|
/> -->
|
|
|
- <el-table-column label="当日生产动态" align="center" :width="columnWidths.productionStatus" fixed-width>
|
|
|
- <template #default="scope">
|
|
|
- <el-tooltip
|
|
|
- effect="light"
|
|
|
- :content="scope.row.productionStatus"
|
|
|
- placement="top"
|
|
|
- popper-class="long-text-tooltip"
|
|
|
- :disabled="!scope.row.productionStatus || scope.row.productionStatus.length <= 30"
|
|
|
- >
|
|
|
- <span class="long-text">{{ formatLongText(scope.row.productionStatus) }}</span>
|
|
|
- </el-tooltip>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column label="下步工作计划" align="center" :width="columnWidths.nextPlan" fixed-width>
|
|
|
- <template #default="scope">
|
|
|
- <el-tooltip
|
|
|
- effect="light"
|
|
|
- :content="scope.row.nextPlan"
|
|
|
- placement="top"
|
|
|
- popper-class="long-text-tooltip"
|
|
|
- :disabled="!scope.row.nextPlan || scope.row.nextPlan.length <= 30"
|
|
|
- >
|
|
|
- <span class="long-text">{{ formatLongText(scope.row.nextPlan) }}</span>
|
|
|
- </el-tooltip>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column label="外租设备" align="center" prop="externalRental" :width="columnWidths.externalRental"/>
|
|
|
- <el-table-column label="故障情况" align="center" prop="malfunction" :width="columnWidths.malfunction"/>
|
|
|
- <el-table-column label="故障误工H" align="center" prop="faultDowntime" :width="columnWidths.faultDowntime"/>
|
|
|
+ <el-table-column
|
|
|
+ label="当日生产动态"
|
|
|
+ align="center"
|
|
|
+ prop="productionStatus"
|
|
|
+ :min-width="columnWidths.productionStatus.width"
|
|
|
+ resizable
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ label="下步工作计划"
|
|
|
+ align="center"
|
|
|
+ prop="nextPlan"
|
|
|
+ :min-width="columnWidths.nextPlan.width"
|
|
|
+ fixed-width
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ label="外租设备"
|
|
|
+ align="center"
|
|
|
+ prop="externalRental"
|
|
|
+ :min-width="columnWidths.externalRental.width"
|
|
|
+ resizable
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ label="故障情况"
|
|
|
+ align="center"
|
|
|
+ prop="malfunction"
|
|
|
+ :min-width="columnWidths.malfunction.width"
|
|
|
+ resizable
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ label="故障误工H"
|
|
|
+ align="center"
|
|
|
+ prop="faultDowntime"
|
|
|
+ :min-width="columnWidths.faultDowntime.width"
|
|
|
+ resizable
|
|
|
+ />
|
|
|
|
|
|
<el-table-column label="操作" align="center" min-width="120px" fixed="right">
|
|
|
<template #default="scope">
|
|
|
@@ -183,7 +283,6 @@
|
|
|
<IotRdDailyReportForm ref="formRef" @success="getList" />
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
-
|
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
@@ -191,10 +290,108 @@ import { dateFormatter } from '@/utils/formatTime'
|
|
|
import download from '@/utils/download'
|
|
|
import { IotRdDailyReportApi, IotRdDailyReportVO } from '@/api/pms/iotrddailyreport'
|
|
|
import IotRdDailyReportForm from './IotRdDailyReportForm.vue'
|
|
|
-import {DICT_TYPE} from "@/utils/dict";
|
|
|
+import { DICT_TYPE } from '@/utils/dict'
|
|
|
import { useRoute } from 'vue-router'
|
|
|
-import DeptTree2 from "@/views/pms/iotrhdailyreport/DeptTree2.vue";
|
|
|
+import DeptTree2 from '@/views/pms/iotrhdailyreport/DeptTree2.vue'
|
|
|
+import { useDebounceFn } from '@vueuse/core'
|
|
|
+
|
|
|
+import dayjs from 'dayjs'
|
|
|
+import quarterOfYear from 'dayjs/plugin/quarterOfYear'
|
|
|
|
|
|
+dayjs.extend(quarterOfYear)
|
|
|
+
|
|
|
+const rangeShortcuts = [
|
|
|
+ {
|
|
|
+ text: '今天',
|
|
|
+ value: () => {
|
|
|
+ const today = dayjs()
|
|
|
+ return [today.startOf('day').toDate(), today.endOf('day').toDate()]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: '昨天',
|
|
|
+ value: () => {
|
|
|
+ const yesterday = dayjs().subtract(1, 'day')
|
|
|
+ return [yesterday.startOf('day').toDate(), yesterday.endOf('day').toDate()]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: '本周',
|
|
|
+ value: () => {
|
|
|
+ return [dayjs().startOf('week').toDate(), dayjs().endOf('week').toDate()]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: '上周',
|
|
|
+ value: () => {
|
|
|
+ const lastWeek = dayjs().subtract(1, 'week')
|
|
|
+ return [lastWeek.startOf('week').toDate(), lastWeek.endOf('week').toDate()]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: '本月',
|
|
|
+ value: () => {
|
|
|
+ return [dayjs().startOf('month').toDate(), dayjs().endOf('month').toDate()]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: '上月',
|
|
|
+ value: () => {
|
|
|
+ const lastMonth = dayjs().subtract(1, 'month')
|
|
|
+ return [lastMonth.startOf('month').toDate(), lastMonth.endOf('month').toDate()]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: '本季度',
|
|
|
+ value: () => {
|
|
|
+ return [dayjs().startOf('quarter').toDate(), dayjs().endOf('quarter').toDate()]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: '上季度',
|
|
|
+ value: () => {
|
|
|
+ const lastQuarter = dayjs().subtract(1, 'quarter')
|
|
|
+ return [lastQuarter.startOf('quarter').toDate(), lastQuarter.endOf('quarter').toDate()]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: '今年',
|
|
|
+ value: () => {
|
|
|
+ return [dayjs().startOf('year').toDate(), dayjs().endOf('year').toDate()]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: '去年',
|
|
|
+ value: () => {
|
|
|
+ const lastYear = dayjs().subtract(1, 'year')
|
|
|
+ return [lastYear.startOf('year').toDate(), lastYear.endOf('year').toDate()]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: '最近7天',
|
|
|
+ value: () => {
|
|
|
+ return [dayjs().subtract(6, 'day').toDate(), dayjs().toDate()]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: '最近30天',
|
|
|
+ value: () => {
|
|
|
+ return [dayjs().subtract(29, 'day').toDate(), dayjs().toDate()]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: '最近90天',
|
|
|
+ value: () => {
|
|
|
+ return [dayjs().subtract(89, 'day').toDate(), dayjs().toDate()]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: '最近一年',
|
|
|
+ value: () => {
|
|
|
+ return [dayjs().subtract(1, 'year').toDate(), dayjs().toDate()]
|
|
|
+ }
|
|
|
+ }
|
|
|
+]
|
|
|
|
|
|
/** 瑞都日报 列表 */
|
|
|
defineOptions({ name: 'IotRdDailyReport' })
|
|
|
@@ -251,7 +448,7 @@ const queryParams = reactive({
|
|
|
status: undefined,
|
|
|
processInstanceId: undefined,
|
|
|
auditStatus: undefined,
|
|
|
- createTime: [],
|
|
|
+ createTime: []
|
|
|
})
|
|
|
const queryFormRef = ref() // 搜索的表单
|
|
|
const exportLoading = ref(false) // 导出的加载中
|
|
|
@@ -263,139 +460,148 @@ const tableRef = ref()
|
|
|
// 表格容器引用
|
|
|
const tableContainerRef = ref()
|
|
|
|
|
|
-// 列宽度配置
|
|
|
-const columnWidths = ref({
|
|
|
- id: '80px',
|
|
|
- deptName: '120px',
|
|
|
- contractName: '120px',
|
|
|
- taskName: '120px',
|
|
|
- timeRange: '120px',
|
|
|
- rdStatus: '120px',
|
|
|
- cumulativeWorkingWell: '120px',
|
|
|
- cumulativeWorkingLayers: '120px',
|
|
|
- dailyPumpTrips: '120px',
|
|
|
- dailyToolsSand: '120px',
|
|
|
- runCount: '80px',
|
|
|
- bridgePlug: '80px',
|
|
|
- waterVolume: '100px',
|
|
|
- hourCount: '80px',
|
|
|
- constructionStartDate: '180px',
|
|
|
- constructionEndDate: '180px',
|
|
|
- productionStatus: '200px',
|
|
|
- nextPlan: '200px',
|
|
|
- externalRental: '120px',
|
|
|
- malfunction: '150px',
|
|
|
- faultDowntime: '120px',
|
|
|
- createTime: '180px',
|
|
|
- operation: '120px'
|
|
|
+const columnWidths = ref<
|
|
|
+ Record<
|
|
|
+ string,
|
|
|
+ { label: string; prop: string; width: string; fn?: (row: IotRdDailyReportVO) => string }
|
|
|
+ >
|
|
|
+>({
|
|
|
+ createTime: {
|
|
|
+ label: '创建时间',
|
|
|
+ prop: 'createTime',
|
|
|
+ width: '120px',
|
|
|
+ fn: (row: IotRdDailyReportVO) => dateFormatter(null, null, row.createTime)
|
|
|
+ },
|
|
|
+ deptName: {
|
|
|
+ label: '施工队伍',
|
|
|
+ prop: 'deptName',
|
|
|
+ width: '120px'
|
|
|
+ },
|
|
|
+ contractName: {
|
|
|
+ label: '项目',
|
|
|
+ prop: 'contractName',
|
|
|
+ width: '120px'
|
|
|
+ },
|
|
|
+ taskName: {
|
|
|
+ label: '任务',
|
|
|
+ prop: 'taskName',
|
|
|
+ width: '120px'
|
|
|
+ },
|
|
|
+ timeRange: {
|
|
|
+ label: '时间节点',
|
|
|
+ prop: 'timeRange',
|
|
|
+ width: '120px'
|
|
|
+ },
|
|
|
+ rdStatus: {
|
|
|
+ label: '施工状态',
|
|
|
+ prop: 'rdStatus',
|
|
|
+ width: '120px'
|
|
|
+ },
|
|
|
+ cumulativeWorkingWell: {
|
|
|
+ label: '施工井',
|
|
|
+ prop: 'cumulativeWorkingWell',
|
|
|
+ width: '120px'
|
|
|
+ },
|
|
|
+ cumulativeWorkingLayers: {
|
|
|
+ label: '施工层',
|
|
|
+ prop: 'cumulativeWorkingLayers',
|
|
|
+ width: '120px'
|
|
|
+ },
|
|
|
+ dailyPumpTrips: {
|
|
|
+ label: '泵车台次',
|
|
|
+ prop: 'dailyPumpTrips',
|
|
|
+ width: '120px'
|
|
|
+ },
|
|
|
+ dailyToolsSand: {
|
|
|
+ label: '仪表/混砂',
|
|
|
+ prop: 'dailyToolsSand',
|
|
|
+ width: '120px'
|
|
|
+ },
|
|
|
+ runCount: {
|
|
|
+ label: '趟数',
|
|
|
+ prop: 'runCount',
|
|
|
+ width: '120px'
|
|
|
+ },
|
|
|
+ bridgePlug: {
|
|
|
+ label: '桥塞',
|
|
|
+ prop: 'bridgePlug',
|
|
|
+ width: '120px'
|
|
|
+ },
|
|
|
+ waterVolume: {
|
|
|
+ label: '水方量',
|
|
|
+ prop: 'waterVolume',
|
|
|
+ width: '120px'
|
|
|
+ },
|
|
|
+ hourCount: {
|
|
|
+ label: '时间H',
|
|
|
+ prop: 'hourCount',
|
|
|
+ width: '120px'
|
|
|
+ },
|
|
|
+ productionStatus: {
|
|
|
+ label: '当日生产动态',
|
|
|
+ prop: 'productionStatus',
|
|
|
+ width: '120px'
|
|
|
+ },
|
|
|
+ nextPlan: {
|
|
|
+ label: '下步工作计划',
|
|
|
+ prop: 'nextPlan',
|
|
|
+ width: '120px'
|
|
|
+ },
|
|
|
+ externalRental: {
|
|
|
+ label: '外租设备',
|
|
|
+ prop: 'externalRental',
|
|
|
+ width: '120px'
|
|
|
+ },
|
|
|
+ malfunction: {
|
|
|
+ label: '故障情况',
|
|
|
+ prop: 'malfunction',
|
|
|
+ width: '120px'
|
|
|
+ },
|
|
|
+ faultDowntime: {
|
|
|
+ label: '故障误工H',
|
|
|
+ prop: 'faultDowntime',
|
|
|
+ width: '120px'
|
|
|
+ }
|
|
|
})
|
|
|
|
|
|
-// 添加长文本格式化函数
|
|
|
-const formatLongText = (text: string | null | undefined) => {
|
|
|
- if (!text) return '-';
|
|
|
- // 如果文本长度超过30个字符,显示前30个字符并添加省略号
|
|
|
- return text.length > 30 ? text.substring(0, 30) + '...' : text;
|
|
|
-};
|
|
|
-
|
|
|
// 计算文本宽度
|
|
|
-const getTextWidth = (text: string, fontSize = 14) => {
|
|
|
- const span = document.createElement('span');
|
|
|
- span.style.visibility = 'hidden';
|
|
|
- span.style.position = 'absolute';
|
|
|
- span.style.whiteSpace = 'nowrap';
|
|
|
- span.style.fontSize = `${fontSize}px`;
|
|
|
- span.style.fontFamily = 'inherit';
|
|
|
- span.innerText = text;
|
|
|
-
|
|
|
- document.body.appendChild(span);
|
|
|
- const width = span.offsetWidth;
|
|
|
- document.body.removeChild(span);
|
|
|
-
|
|
|
- return width;
|
|
|
-};
|
|
|
-
|
|
|
-// 计算列宽度
|
|
|
-const calculateColumnWidths = () => {
|
|
|
- const MIN_WIDTH = 80; // 最小列宽
|
|
|
- const PADDING = 25; // 列内边距
|
|
|
-
|
|
|
- // 确保表格容器存在
|
|
|
- if (!tableContainerRef.value?.$el) return;
|
|
|
-
|
|
|
- const newWidths: Record<string, string> = {};
|
|
|
-
|
|
|
- // 计算各列宽度的函数
|
|
|
- const calculateColumnWidth = (key: string, label: string, getValue: Function) => {
|
|
|
- // 如果是需要固定宽度的列,跳过计算
|
|
|
- if (key === 'productionStatus' || key === 'nextPlan') {
|
|
|
- return;
|
|
|
- }
|
|
|
-
|
|
|
- const headerWidth = getTextWidth(label) + PADDING;
|
|
|
- let contentMaxWidth = MIN_WIDTH;
|
|
|
-
|
|
|
- // 计算内容最大宽度
|
|
|
- list.value.forEach((row, index) => {
|
|
|
- let text = '';
|
|
|
- if (key === 'rdStatus') {
|
|
|
- // 特殊处理字典列,这里简化处理,实际应该获取字典标签
|
|
|
- text = String(row[key] || '');
|
|
|
- } else if (key.includes('Date') || key === 'createTime') {
|
|
|
- // 日期列使用格式化后的值
|
|
|
- text = dateFormatter(null, null, row[key]) || '';
|
|
|
- } else {
|
|
|
- text = String(getValue ? getValue(row, index) : (row[key] || ''));
|
|
|
- }
|
|
|
+const getTextWidth = (text: string, fontSize = 12) => {
|
|
|
+ const span = document.createElement('span')
|
|
|
+ span.style.visibility = 'hidden'
|
|
|
+ span.style.position = 'absolute'
|
|
|
+ span.style.whiteSpace = 'nowrap'
|
|
|
+ span.style.fontSize = `${fontSize}px`
|
|
|
+ span.style.fontFamily = 'PingFang SC'
|
|
|
+ span.innerText = text
|
|
|
+
|
|
|
+ document.body.appendChild(span)
|
|
|
+ const width = span.offsetWidth
|
|
|
+ document.body.removeChild(span)
|
|
|
+
|
|
|
+ return width
|
|
|
+}
|
|
|
|
|
|
- const textWidth = getTextWidth(text) + PADDING;
|
|
|
- if (textWidth > contentMaxWidth) contentMaxWidth = textWidth;
|
|
|
- });
|
|
|
-
|
|
|
- // 取标题宽度和内容最大宽度的较大值
|
|
|
- const finalWidth = Math.max(headerWidth, contentMaxWidth, MIN_WIDTH);
|
|
|
- newWidths[key] = `${finalWidth}px`;
|
|
|
- };
|
|
|
-
|
|
|
- // 计算各列宽度
|
|
|
- calculateColumnWidth('deptName', '施工队伍', (row: any) => row.deptName);
|
|
|
- calculateColumnWidth('contractName', '项目', (row: any) => row.contractName);
|
|
|
- calculateColumnWidth('taskName', '任务', (row: any) => row.taskName);
|
|
|
- calculateColumnWidth('timeRange', '时间节点', (row: any) => row.timeRange);
|
|
|
- calculateColumnWidth('rdStatus', t('project.status'), (row: any) => row.rdStatus);
|
|
|
- calculateColumnWidth('cumulativeWorkingWell', '累计施工井', (row: any) => row.cumulativeWorkingWell);
|
|
|
- calculateColumnWidth('cumulativeWorkingLayers', '累计施工层', (row: any) => row.cumulativeWorkingLayers);
|
|
|
- calculateColumnWidth('dailyPumpTrips', '当日泵车台次', (row: any) => row.dailyPumpTrips);
|
|
|
- calculateColumnWidth('dailyToolsSand', '当日仪表/混砂', (row: any) => row.dailyToolsSand);
|
|
|
- calculateColumnWidth('runCount', '趟数', (row: any) => row.runCount);
|
|
|
- calculateColumnWidth('bridgePlug', '桥塞', (row: any) => row.bridgePlug);
|
|
|
- calculateColumnWidth('waterVolume', '水方量', (row: any) => row.waterVolume);
|
|
|
- calculateColumnWidth('hourCount', '时间H', (row: any) => row.hourCount);
|
|
|
- calculateColumnWidth('constructionStartDate', '施工开始日期', (row: any) => dateFormatter(null, null, row.constructionStartDate));
|
|
|
- calculateColumnWidth('constructionEndDate', '施工结束日期', (row: any) => dateFormatter(null, null, row.constructionEndDate));
|
|
|
- calculateColumnWidth('productionStatus', '当日生产动态', (row: any) => row.productionStatus);
|
|
|
- calculateColumnWidth('nextPlan', '下步工作计划', (row: any) => row.nextPlan);
|
|
|
- calculateColumnWidth('externalRental', '外租设备', (row: any) => row.externalRental);
|
|
|
- calculateColumnWidth('malfunction', '故障情况', (row: any) => row.malfunction);
|
|
|
- calculateColumnWidth('faultDowntime', '故障误工H', (row: any) => row.faultDowntime);
|
|
|
- calculateColumnWidth('createTime', '创建时间', (row: any) => dateFormatter(null, null, row.createTime));
|
|
|
-
|
|
|
- // 为固定宽度的列设置固定值
|
|
|
- newWidths.productionStatus = '200px';
|
|
|
- newWidths.nextPlan = '200px';
|
|
|
-
|
|
|
- // 操作列固定宽度
|
|
|
- newWidths.operation = '120px';
|
|
|
- // id列固定宽度(虽然隐藏)
|
|
|
- newWidths.id = '80px';
|
|
|
-
|
|
|
- // 更新列宽配置
|
|
|
- columnWidths.value = newWidths;
|
|
|
-
|
|
|
- // 触发表格重新布局
|
|
|
- nextTick(() => {
|
|
|
- tableRef.value?.doLayout();
|
|
|
- });
|
|
|
-};
|
|
|
+const calculateColumnWidths = useDebounceFn(() => {
|
|
|
+ if (!tableContainerRef.value?.$el) return
|
|
|
+ Object.values(columnWidths.value).forEach(({ fn, prop, label, width }) => {
|
|
|
+ width =
|
|
|
+ Math.min(
|
|
|
+ ...[
|
|
|
+ Math.max(
|
|
|
+ ...[
|
|
|
+ getTextWidth(label),
|
|
|
+ ...list.value.map((v) => {
|
|
|
+ return getTextWidth(fn ? fn(v) : v[prop])
|
|
|
+ })
|
|
|
+ ]
|
|
|
+ ) + (label === '施工状态' ? 35 : 20),
|
|
|
+ 200
|
|
|
+ ]
|
|
|
+ ) + 'px'
|
|
|
+
|
|
|
+ columnWidths.value[prop].width = width
|
|
|
+ })
|
|
|
+}, 1000)
|
|
|
|
|
|
/** 查询列表 */
|
|
|
const getList = async () => {
|
|
|
@@ -406,8 +612,8 @@ const getList = async () => {
|
|
|
total.value = data.total
|
|
|
// 获取数据后计算列宽
|
|
|
nextTick(() => {
|
|
|
- calculateColumnWidths();
|
|
|
- });
|
|
|
+ calculateColumnWidths()
|
|
|
+ })
|
|
|
} finally {
|
|
|
loading.value = false
|
|
|
}
|
|
|
@@ -439,7 +645,7 @@ const handleDetail = async (id: number) => {
|
|
|
name: 'FillDailyReportForm',
|
|
|
params: {
|
|
|
id: id.toString(),
|
|
|
- mode: 'detail' // 添加详情模式标识
|
|
|
+ mode: 'detail' // 添加详情模式标识
|
|
|
}
|
|
|
})
|
|
|
} catch (error) {
|
|
|
@@ -465,7 +671,7 @@ const handleApprove = async (id: number) => {
|
|
|
name: 'FillDailyReportForm',
|
|
|
params: {
|
|
|
id: id.toString(),
|
|
|
- mode: 'approval' // 添加审批模式标识
|
|
|
+ mode: 'approval' // 添加审批模式标识
|
|
|
}
|
|
|
})
|
|
|
} catch (error) {
|
|
|
@@ -502,7 +708,7 @@ const handleExport = async () => {
|
|
|
}
|
|
|
|
|
|
// 声明 ResizeObserver 实例
|
|
|
-let resizeObserver: ResizeObserver | null = null;
|
|
|
+let resizeObserver: ResizeObserver | null = null
|
|
|
|
|
|
/** 初始化 **/
|
|
|
onMounted(() => {
|
|
|
@@ -518,60 +724,67 @@ onMounted(() => {
|
|
|
if (tableContainerRef.value?.$el) {
|
|
|
resizeObserver = new ResizeObserver(() => {
|
|
|
// 使用防抖避免频繁触发
|
|
|
- clearTimeout((window as any).resizeTimer);
|
|
|
- (window as any).resizeTimer = setTimeout(() => {
|
|
|
- calculateColumnWidths();
|
|
|
- }, 100);
|
|
|
- });
|
|
|
- resizeObserver.observe(tableContainerRef.value.$el);
|
|
|
+ clearTimeout((window as any).resizeTimer)
|
|
|
+ ;(window as any).resizeTimer = setTimeout(() => {
|
|
|
+ calculateColumnWidths()
|
|
|
+ }, 100)
|
|
|
+ })
|
|
|
+ resizeObserver.observe(tableContainerRef.value.$el)
|
|
|
}
|
|
|
})
|
|
|
|
|
|
onUnmounted(() => {
|
|
|
// 清除 ResizeObserver
|
|
|
if (resizeObserver && tableContainerRef.value?.$el) {
|
|
|
- resizeObserver.unobserve(tableContainerRef.value.$el);
|
|
|
- resizeObserver = null;
|
|
|
+ resizeObserver.unobserve(tableContainerRef.value.$el)
|
|
|
+ resizeObserver = null
|
|
|
}
|
|
|
|
|
|
// 清除定时器
|
|
|
if ((window as any).resizeTimer) {
|
|
|
- clearTimeout((window as any).resizeTimer);
|
|
|
+ clearTimeout((window as any).resizeTimer)
|
|
|
}
|
|
|
})
|
|
|
|
|
|
// 监听列表数据变化重新计算列宽
|
|
|
-watch(list, () => {
|
|
|
- nextTick(calculateColumnWidths)
|
|
|
-}, { deep: true })
|
|
|
+watch(
|
|
|
+ list,
|
|
|
+ () => {
|
|
|
+ nextTick(calculateColumnWidths)
|
|
|
+ },
|
|
|
+ { deep: true }
|
|
|
+)
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
/* 确保表格单元格内容不换行 */
|
|
|
-:deep(.el-table .cell) {
|
|
|
-white-space: nowrap;
|
|
|
-}
|
|
|
+
|
|
|
+/* :deep(.el-table .cell) {
|
|
|
+ white-space: nowrap;
|
|
|
+} */
|
|
|
|
|
|
/* 确保表格列标题不换行 */
|
|
|
-:deep(.el-table th > .cell) {
|
|
|
-white-space: nowrap;
|
|
|
-}
|
|
|
+
|
|
|
+/* :deep(.el-table th > .cell) {
|
|
|
+ white-space: nowrap;
|
|
|
+} */
|
|
|
|
|
|
/* 调整表格最小宽度,确保内容完全显示 */
|
|
|
:deep(.el-table) {
|
|
|
-min-width: 100%;
|
|
|
+ min-width: 100%;
|
|
|
}
|
|
|
|
|
|
/* 长文本样式 - 多行显示并添加省略号 */
|
|
|
.long-text {
|
|
|
display: -webkit-box;
|
|
|
- -webkit-line-clamp: 2;
|
|
|
- -webkit-box-orient: vertical;
|
|
|
+ max-height: 3em; /* 两行文本的高度 */
|
|
|
overflow: hidden;
|
|
|
- text-overflow: ellipsis;
|
|
|
line-height: 1.5;
|
|
|
- max-height: 3em; /* 两行文本的高度 */
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ -webkit-line-clamp: 2;
|
|
|
}
|
|
|
+
|
|
|
/* 确保固定宽度列不参与自动调整 */
|
|
|
:deep(.el-table__header-wrapper .el-table__cell.fixed-width),
|
|
|
:deep(.el-table__body-wrapper .el-table__cell.fixed-width) {
|
|
|
@@ -583,8 +796,8 @@ min-width: 100%;
|
|
|
<style>
|
|
|
/* 长文本 tooltip 样式 - 保留换行符 */
|
|
|
.long-text-tooltip {
|
|
|
- white-space: pre-line;
|
|
|
max-width: 500px;
|
|
|
line-height: 1.5;
|
|
|
+ white-space: pre-line;
|
|
|
}
|
|
|
</style>
|