|
|
@@ -8,265 +8,24 @@
|
|
|
:inline="true"
|
|
|
label-width="68px"
|
|
|
>
|
|
|
- <el-form-item label="施工队伍id" prop="deptId">
|
|
|
- <el-input
|
|
|
- v-model="queryParams.deptId"
|
|
|
- placeholder="请输入施工队伍id"
|
|
|
- clearable
|
|
|
- @keyup.enter="handleQuery"
|
|
|
- class="!w-240px"
|
|
|
- />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="项目id" prop="projectId">
|
|
|
+ <el-form-item label="项目" prop="projectId">
|
|
|
<el-input
|
|
|
v-model="queryParams.projectId"
|
|
|
- placeholder="请输入项目id"
|
|
|
+ placeholder="请输入项目"
|
|
|
clearable
|
|
|
@keyup.enter="handleQuery"
|
|
|
class="!w-240px"
|
|
|
/>
|
|
|
</el-form-item>
|
|
|
- <el-form-item label="任务id" prop="taskId">
|
|
|
+ <el-form-item label="任务" prop="taskId">
|
|
|
<el-input
|
|
|
v-model="queryParams.taskId"
|
|
|
- placeholder="请输入任务id"
|
|
|
- clearable
|
|
|
- @keyup.enter="handleQuery"
|
|
|
- class="!w-240px"
|
|
|
- />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="项目类别(钻井 修井 注氮 酸化压裂... )" prop="projectClassification">
|
|
|
- <el-input
|
|
|
- v-model="queryParams.projectClassification"
|
|
|
- placeholder="请输入项目类别(钻井 修井 注氮 酸化压裂... )"
|
|
|
- clearable
|
|
|
- @keyup.enter="handleQuery"
|
|
|
- class="!w-240px"
|
|
|
- />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="搬迁安装天数" prop="relocationDays">
|
|
|
- <el-input
|
|
|
- v-model="queryParams.relocationDays"
|
|
|
- placeholder="请输入搬迁安装天数"
|
|
|
- clearable
|
|
|
- @keyup.enter="handleQuery"
|
|
|
- class="!w-240px"
|
|
|
- />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="运行时效" prop="transitTime">
|
|
|
- <el-date-picker
|
|
|
- v-model="queryParams.transitTime"
|
|
|
- value-format="YYYY-MM-DD HH:mm:ss"
|
|
|
- type="daterange"
|
|
|
- start-placeholder="开始日期"
|
|
|
- end-placeholder="结束日期"
|
|
|
- :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
|
|
|
- class="!w-220px"
|
|
|
- />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="当日注气量(万方)" prop="dailyGasInjection">
|
|
|
- <el-input
|
|
|
- v-model="queryParams.dailyGasInjection"
|
|
|
- placeholder="请输入当日注气量(万方)"
|
|
|
- clearable
|
|
|
- @keyup.enter="handleQuery"
|
|
|
- class="!w-240px"
|
|
|
- />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="当日注水量(方)" prop="dailyWaterInjection">
|
|
|
- <el-input
|
|
|
- v-model="queryParams.dailyWaterInjection"
|
|
|
- placeholder="请输入当日注水量(方)"
|
|
|
- clearable
|
|
|
- @keyup.enter="handleQuery"
|
|
|
- class="!w-240px"
|
|
|
- />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="当日注气时间(H)" prop="dailyInjectGasTime">
|
|
|
- <el-date-picker
|
|
|
- v-model="queryParams.dailyInjectGasTime"
|
|
|
- value-format="YYYY-MM-DD HH:mm:ss"
|
|
|
- type="daterange"
|
|
|
- start-placeholder="开始日期"
|
|
|
- end-placeholder="结束日期"
|
|
|
- :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
|
|
|
- class="!w-220px"
|
|
|
- />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="当日注水时间(H)" prop="dailyInjectWaterTime">
|
|
|
- <el-date-picker
|
|
|
- v-model="queryParams.dailyInjectWaterTime"
|
|
|
- value-format="YYYY-MM-DD HH:mm:ss"
|
|
|
- type="daterange"
|
|
|
- start-placeholder="开始日期"
|
|
|
- end-placeholder="结束日期"
|
|
|
- :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
|
|
|
- class="!w-220px"
|
|
|
- />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="非生产时间(H)" prop="nonProductionTime">
|
|
|
- <el-date-picker
|
|
|
- v-model="queryParams.nonProductionTime"
|
|
|
- value-format="YYYY-MM-DD HH:mm:ss"
|
|
|
- type="daterange"
|
|
|
- start-placeholder="开始日期"
|
|
|
- end-placeholder="结束日期"
|
|
|
- :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
|
|
|
- class="!w-220px"
|
|
|
- />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="非生产时间原因" prop="nptReason">
|
|
|
- <el-input
|
|
|
- v-model="queryParams.nptReason"
|
|
|
- placeholder="请输入非生产时间原因"
|
|
|
- clearable
|
|
|
- @keyup.enter="handleQuery"
|
|
|
- class="!w-240px"
|
|
|
- />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="施工开始日期" prop="constructionStartDate">
|
|
|
- <el-date-picker
|
|
|
- v-model="queryParams.constructionStartDate"
|
|
|
- value-format="YYYY-MM-DD HH:mm:ss"
|
|
|
- type="daterange"
|
|
|
- start-placeholder="开始日期"
|
|
|
- end-placeholder="结束日期"
|
|
|
- :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
|
|
|
- class="!w-220px"
|
|
|
- />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="施工结束日期" prop="constructionEndDate">
|
|
|
- <el-date-picker
|
|
|
- v-model="queryParams.constructionEndDate"
|
|
|
- value-format="YYYY-MM-DD HH:mm:ss"
|
|
|
- type="daterange"
|
|
|
- start-placeholder="开始日期"
|
|
|
- end-placeholder="结束日期"
|
|
|
- :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
|
|
|
- class="!w-220px"
|
|
|
- />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="当日生产情况生产动态" prop="productionStatus">
|
|
|
- <el-select
|
|
|
- v-model="queryParams.productionStatus"
|
|
|
- placeholder="请选择当日生产情况生产动态"
|
|
|
- clearable
|
|
|
- class="!w-240px"
|
|
|
- >
|
|
|
- <el-option label="请选择字典生成" value="" />
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="下步工作计划" prop="nextPlan">
|
|
|
- <el-input
|
|
|
- v-model="queryParams.nextPlan"
|
|
|
- placeholder="请输入下步工作计划"
|
|
|
+ placeholder="请输入任务"
|
|
|
clearable
|
|
|
@keyup.enter="handleQuery"
|
|
|
class="!w-240px"
|
|
|
/>
|
|
|
</el-form-item>
|
|
|
- <el-form-item label="施工状态(动迁 准备 施工 完工)" prop="constructionStatus">
|
|
|
- <el-select
|
|
|
- v-model="queryParams.constructionStatus"
|
|
|
- placeholder="请选择施工状态(动迁 准备 施工 完工)"
|
|
|
- clearable
|
|
|
- class="!w-240px"
|
|
|
- >
|
|
|
- <el-option label="请选择字典生成" value="" />
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="人员情况" prop="personnel">
|
|
|
- <el-input
|
|
|
- v-model="queryParams.personnel"
|
|
|
- placeholder="请输入人员情况"
|
|
|
- clearable
|
|
|
- @keyup.enter="handleQuery"
|
|
|
- class="!w-240px"
|
|
|
- />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="累计注气量(万方)" prop="totalGasInjection">
|
|
|
- <el-input
|
|
|
- v-model="queryParams.totalGasInjection"
|
|
|
- placeholder="请输入累计注气量(万方)"
|
|
|
- clearable
|
|
|
- @keyup.enter="handleQuery"
|
|
|
- class="!w-240px"
|
|
|
- />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="累计注水量(方)" prop="totalWaterInjection">
|
|
|
- <el-input
|
|
|
- v-model="queryParams.totalWaterInjection"
|
|
|
- placeholder="请输入累计注水量(方)"
|
|
|
- clearable
|
|
|
- @keyup.enter="handleQuery"
|
|
|
- class="!w-240px"
|
|
|
- />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="累计完工井次" prop="cumulativeCompletion">
|
|
|
- <el-input
|
|
|
- v-model="queryParams.cumulativeCompletion"
|
|
|
- placeholder="请输入累计完工井次"
|
|
|
- clearable
|
|
|
- @keyup.enter="handleQuery"
|
|
|
- class="!w-240px"
|
|
|
- />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="不同专业公司的扩展属性值" prop="extProperty">
|
|
|
- <el-input
|
|
|
- v-model="queryParams.extProperty"
|
|
|
- placeholder="请输入不同专业公司的扩展属性值"
|
|
|
- clearable
|
|
|
- @keyup.enter="handleQuery"
|
|
|
- class="!w-240px"
|
|
|
- />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="排序值" prop="sort">
|
|
|
- <el-input
|
|
|
- v-model="queryParams.sort"
|
|
|
- placeholder="请输入排序值"
|
|
|
- clearable
|
|
|
- @keyup.enter="handleQuery"
|
|
|
- class="!w-240px"
|
|
|
- />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="备注" prop="remark">
|
|
|
- <el-input
|
|
|
- v-model="queryParams.remark"
|
|
|
- placeholder="请输入备注"
|
|
|
- clearable
|
|
|
- @keyup.enter="handleQuery"
|
|
|
- class="!w-240px"
|
|
|
- />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="状态(0启用 1禁用)" prop="status">
|
|
|
- <el-select
|
|
|
- v-model="queryParams.status"
|
|
|
- placeholder="请选择状态(0启用 1禁用)"
|
|
|
- clearable
|
|
|
- class="!w-240px"
|
|
|
- >
|
|
|
- <el-option label="请选择字典生成" value="" />
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="流程实例id" prop="processInstanceId">
|
|
|
- <el-input
|
|
|
- v-model="queryParams.processInstanceId"
|
|
|
- placeholder="请输入流程实例id"
|
|
|
- clearable
|
|
|
- @keyup.enter="handleQuery"
|
|
|
- class="!w-240px"
|
|
|
- />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="审批状态 未提交、审批中、审批通过、审批不通过、已取消" prop="auditStatus">
|
|
|
- <el-select
|
|
|
- v-model="queryParams.auditStatus"
|
|
|
- placeholder="请选择审批状态 未提交、审批中、审批通过、审批不通过、已取消"
|
|
|
- clearable
|
|
|
- class="!w-240px"
|
|
|
- >
|
|
|
- <el-option label="请选择字典生成" value="" />
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
<el-form-item label="创建时间" prop="createTime">
|
|
|
<el-date-picker
|
|
|
v-model="queryParams.createTime"
|
|
|
@@ -303,76 +62,79 @@
|
|
|
</ContentWrap>
|
|
|
|
|
|
<!-- 列表 -->
|
|
|
- <ContentWrap>
|
|
|
- <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
|
|
|
- <el-table-column label="主键id" align="center" prop="id" />
|
|
|
- <el-table-column label="施工队伍id" align="center" prop="deptId" />
|
|
|
- <el-table-column label="项目id" align="center" prop="projectId" />
|
|
|
- <el-table-column label="任务id" align="center" prop="taskId" />
|
|
|
- <el-table-column label="项目类别(钻井 修井 注氮 酸化压裂... )" align="center" prop="projectClassification" />
|
|
|
- <el-table-column label="搬迁安装天数" align="center" prop="relocationDays" />
|
|
|
- <el-table-column label="运行时效" align="center" prop="transitTime" />
|
|
|
- <el-table-column label="当日注气量(万方)" align="center" prop="dailyGasInjection" />
|
|
|
- <el-table-column label="当日注水量(方)" align="center" prop="dailyWaterInjection" />
|
|
|
- <el-table-column label="当日注气时间(H)" align="center" prop="dailyInjectGasTime" />
|
|
|
- <el-table-column label="当日注水时间(H)" align="center" prop="dailyInjectWaterTime" />
|
|
|
- <el-table-column label="非生产时间(H)" align="center" prop="nonProductionTime" />
|
|
|
- <el-table-column label="非生产时间原因" align="center" prop="nptReason" />
|
|
|
- <el-table-column
|
|
|
- label="施工开始日期"
|
|
|
- align="center"
|
|
|
- prop="constructionStartDate"
|
|
|
- :formatter="dateFormatter"
|
|
|
- width="180px"
|
|
|
- />
|
|
|
- <el-table-column
|
|
|
- label="施工结束日期"
|
|
|
- align="center"
|
|
|
- prop="constructionEndDate"
|
|
|
- :formatter="dateFormatter"
|
|
|
- width="180px"
|
|
|
- />
|
|
|
- <el-table-column label="当日生产情况生产动态" align="center" prop="productionStatus" />
|
|
|
- <el-table-column label="下步工作计划" align="center" prop="nextPlan" />
|
|
|
- <el-table-column label="施工状态(动迁 准备 施工 完工)" align="center" prop="constructionStatus" />
|
|
|
- <el-table-column label="人员情况" align="center" prop="personnel" />
|
|
|
- <el-table-column label="累计注气量(万方)" align="center" prop="totalGasInjection" />
|
|
|
- <el-table-column label="累计注水量(方)" align="center" prop="totalWaterInjection" />
|
|
|
- <el-table-column label="累计完工井次" align="center" prop="cumulativeCompletion" />
|
|
|
- <el-table-column label="不同专业公司的扩展属性值" align="center" prop="extProperty" />
|
|
|
- <el-table-column label="排序值" align="center" prop="sort" />
|
|
|
- <el-table-column label="备注" align="center" prop="remark" />
|
|
|
- <el-table-column label="状态(0启用 1禁用)" align="center" prop="status" />
|
|
|
- <el-table-column label="流程实例id" align="center" prop="processInstanceId" />
|
|
|
- <el-table-column label="审批状态 未提交、审批中、审批通过、审批不通过、已取消" align="center" prop="auditStatus" />
|
|
|
- <el-table-column
|
|
|
- label="创建时间"
|
|
|
- align="center"
|
|
|
- prop="createTime"
|
|
|
- :formatter="dateFormatter"
|
|
|
- width="180px"
|
|
|
- />
|
|
|
- <el-table-column label="操作" align="center" min-width="120px">
|
|
|
- <template #default="scope">
|
|
|
- <el-button
|
|
|
- link
|
|
|
- type="primary"
|
|
|
- @click="openForm('update', scope.row.id)"
|
|
|
- v-hasPermi="['pms:iot-rh-daily-report:update']"
|
|
|
- >
|
|
|
- 编辑
|
|
|
- </el-button>
|
|
|
- <el-button
|
|
|
- link
|
|
|
- type="danger"
|
|
|
- @click="handleDelete(scope.row.id)"
|
|
|
- v-hasPermi="['pms:iot-rh-daily-report:delete']"
|
|
|
- >
|
|
|
- 删除
|
|
|
- </el-button>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- </el-table>
|
|
|
+ <ContentWrap ref="tableContainerRef">
|
|
|
+ <div class="table-container">
|
|
|
+ <el-table ref="tableRef" v-loading="loading" :data="list" :stripe="true"
|
|
|
+ :show-overflow-tooltip="true" style="width: 100%" :cell-style="cellStyle">
|
|
|
+ <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="constructionStatus" /> -->
|
|
|
+ <el-table-column :label="t('project.status')" align="center" prop="constructionStatus" :width="columnWidths.constructionStatus">
|
|
|
+ <template #default="scope">
|
|
|
+ <dict-tag :type="DICT_TYPE.PMS_PROJECT_TASK_SCHEDULE" :value="scope.row.constructionStatus" />
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="搬迁安装天数" align="center" prop="relocationDays" :width="columnWidths.relocationDays"/>
|
|
|
+ <el-table-column label="运行时效" align="center" prop="transitTime" :width="columnWidths.transitTime" :formatter="percentageFormatter"/>
|
|
|
+ <el-table-column label="当日注气量(万方)" align="center" prop="dailyGasInjection"
|
|
|
+ :width="columnWidths.dailyGasInjection" :formatter="gasInjectionFormatter"/>
|
|
|
+ <el-table-column label="当日注水量(方)" align="center" prop="dailyWaterInjection" :width="columnWidths.dailyWaterInjection"/>
|
|
|
+ <el-table-column label="当日注气时间(H)" align="center" prop="dailyInjectGasTime" :width="columnWidths.dailyInjectGasTime"/>
|
|
|
+ <el-table-column label="当日注水时间(H)" align="center" prop="dailyInjectWaterTime" :width="columnWidths.dailyInjectWaterTime"/>
|
|
|
+ <el-table-column label="非生产时间(H)" align="center" prop="nonProductionTime" :width="columnWidths.nonProductionTime"/>
|
|
|
+ <el-table-column :label="t('project.nptReason')" align="center" prop="nptReason" :width="columnWidths.nptReason">
|
|
|
+ <template #default="scope">
|
|
|
+ <dict-tag :type="DICT_TYPE.PMS_PROJECT_NPT_REASON" :value="scope.row.nptReason" />
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ label="施工开始日期"
|
|
|
+ align="center"
|
|
|
+ prop="constructionStartDate"
|
|
|
+ :formatter="dateFormatter"
|
|
|
+ :width="columnWidths.constructionStartDate"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ label="施工结束日期"
|
|
|
+ align="center"
|
|
|
+ prop="constructionEndDate"
|
|
|
+ :formatter="dateFormatter"
|
|
|
+ :width="columnWidths.constructionEndDate"
|
|
|
+ />
|
|
|
+ <el-table-column label="累计注气量(万方)" align="center" prop="totalGasInjection"
|
|
|
+ :width="columnWidths.totalGasInjection" :formatter="gasInjectionFormatter"/>
|
|
|
+ <el-table-column label="累计注水量(方)" align="center" prop="totalWaterInjection" :width="columnWidths.totalWaterInjection"/>
|
|
|
+ <el-table-column label="累计完工井次" align="center" prop="cumulativeCompletion" :width="columnWidths.cumulativeCompletion"/>
|
|
|
+ <el-table-column
|
|
|
+ label="创建时间"
|
|
|
+ align="center"
|
|
|
+ prop="createTime"
|
|
|
+ :formatter="dateFormatter"
|
|
|
+ :width="columnWidths.createTime"
|
|
|
+ />
|
|
|
+ <el-table-column label="操作" align="center" :width="columnWidths.operation">
|
|
|
+ <template #default="scope">
|
|
|
+ <el-button
|
|
|
+ link
|
|
|
+ type="primary"
|
|
|
+ @click="openForm('update', scope.row.id)"
|
|
|
+ v-hasPermi="['pms:iot-rh-daily-report:update']"
|
|
|
+ >
|
|
|
+ 编辑
|
|
|
+ </el-button>
|
|
|
+ <el-button
|
|
|
+ link
|
|
|
+ type="danger"
|
|
|
+ @click="handleDelete(scope.row.id)"
|
|
|
+ v-hasPermi="['pms:iot-rh-daily-report:delete']"
|
|
|
+ >
|
|
|
+ 删除
|
|
|
+ </el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
<!-- 分页 -->
|
|
|
<Pagination
|
|
|
:total="total"
|
|
|
@@ -391,6 +153,8 @@ import { dateFormatter } from '@/utils/formatTime'
|
|
|
import download from '@/utils/download'
|
|
|
import { IotRhDailyReportApi, IotRhDailyReportVO } from '@/api/pms/iotrhdailyreport'
|
|
|
import IotRhDailyReportForm from './IotRhDailyReportForm.vue'
|
|
|
+import {DICT_TYPE, getDictLabel} from "@/utils/dict";
|
|
|
+import { ref, reactive, onMounted, nextTick, watch, onUnmounted } from 'vue'
|
|
|
|
|
|
/** 瑞恒日报 列表 */
|
|
|
defineOptions({ name: 'IotRhDailyReport' })
|
|
|
@@ -436,6 +200,66 @@ const queryParams = reactive({
|
|
|
const queryFormRef = ref() // 搜索的表单
|
|
|
const exportLoading = ref(false) // 导出的加载中
|
|
|
|
|
|
+
|
|
|
+// 表格引用
|
|
|
+const tableRef = ref()
|
|
|
+// 表格容器引用
|
|
|
+const tableContainerRef = ref()
|
|
|
+
|
|
|
+// 列宽度配置
|
|
|
+const columnWidths = ref({
|
|
|
+ deptName: '120px',
|
|
|
+ contractName: '150px',
|
|
|
+ taskName: '120px',
|
|
|
+ constructionStatus: '110px',
|
|
|
+ relocationDays: '120px',
|
|
|
+ transitTime: '100px',
|
|
|
+ dailyGasInjection: '150px',
|
|
|
+ dailyWaterInjection: '150px',
|
|
|
+ dailyInjectGasTime: '150px',
|
|
|
+ dailyInjectWaterTime: '150px',
|
|
|
+ nonProductionTime: '150px',
|
|
|
+ nptReason: '150px',
|
|
|
+ constructionStartDate: '180px',
|
|
|
+ constructionEndDate: '180px',
|
|
|
+ totalGasInjection: '150px',
|
|
|
+ totalWaterInjection: '150px',
|
|
|
+ cumulativeCompletion: '150px',
|
|
|
+ createTime: '180px',
|
|
|
+ operation: '120px'
|
|
|
+})
|
|
|
+
|
|
|
+// 计算文本宽度
|
|
|
+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 percentageFormatter = (row: any, column: any, cellValue: any, index: number) => {
|
|
|
+ if (cellValue === null || cellValue === undefined) return '';
|
|
|
+ // 将小数转换为百分比，保留两位小数
|
|
|
+ return `${(parseFloat(cellValue) * 100).toFixed(2)}%`;
|
|
|
+};
|
|
|
+
|
|
|
+// 可伸缩列配置
|
|
|
+const FLEXIBLE_COLUMNS = ['deptName', 'contractName', 'taskName', 'constructionStatus', 'relocationDays',
|
|
|
+ 'transitTime', 'dailyGasInjection', 'dailyWaterInjection', 'dailyInjectGasTime',
|
|
|
+ 'dailyInjectWaterTime', 'nonProductionTime', 'nptReason', 'constructionStartDate',
|
|
|
+ 'constructionEndDate', 'totalGasInjection', 'totalWaterInjection',
|
|
|
+ 'cumulativeCompletion', 'createTime'];
|
|
|
+
|
|
|
/** 查询列表 */
|
|
|
const getList = async () => {
|
|
|
loading.value = true
|
|
|
@@ -443,11 +267,147 @@ const getList = async () => {
|
|
|
const data = await IotRhDailyReportApi.getIotRhDailyReportPage(queryParams)
|
|
|
list.value = data.list
|
|
|
total.value = data.total
|
|
|
+ // 获取数据后计算列宽
|
|
|
+ nextTick(() => {
|
|
|
+ calculateColumnWidths();
|
|
|
+ });
|
|
|
} finally {
|
|
|
loading.value = false
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+// 注气量格式化函数（单位转换：方 -> 万方）
|
|
|
+const gasInjectionFormatter = (row: any, column: any, cellValue: any, index: number) => {
|
|
|
+ if (cellValue === null || cellValue === undefined || cellValue === '') return '';
|
|
|
+ // 将方转换为万方，保留两位小数
|
|
|
+ const value = parseFloat(cellValue);
|
|
|
+ return (value / 10000).toFixed(2);
|
|
|
+};
|
|
|
+
|
|
|
+// 新增：单元格样式函数
|
|
|
+const cellStyle = ({ row, column, rowIndex, columnIndex }: { row: any; column: any; rowIndex: number; columnIndex: number }) => {
|
|
|
+ // 只针对 transitTime 列进行处理
|
|
|
+ if (column.property === 'transitTime') {
|
|
|
+ // 获取原始值（不是格式化后的百分比值）
|
|
|
+ const originalValue = row.transitTime;
|
|
|
+
|
|
|
+ // 检查值是否大于120
|
|
|
+ if (originalValue !== null && originalValue !== undefined && parseFloat(originalValue) > 1.2) {
|
|
|
+ return {
|
|
|
+ color: 'red',
|
|
|
+ fontWeight: 'bold' // 可选：加粗以更突出显示
|
|
|
+ };
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 默认返回空对象，不应用特殊样式
|
|
|
+ return {};
|
|
|
+};
|
|
|
+
|
|
|
+// 计算列宽度
|
|
|
+const calculateColumnWidths = () => {
|
|
|
+ const MIN_WIDTH = 80; // 最小列宽
|
|
|
+ const PADDING = 25; // 列内边距
|
|
|
+
|
|
|
+ // 确保表格容器存在
|
|
|
+ if (!tableContainerRef.value?.$el) return;
|
|
|
+
|
|
|
+ const container = tableContainerRef.value.$el;
|
|
|
+ const containerWidth = container.clientWidth;
|
|
|
+
|
|
|
+ // 1. 计算所有列的最小宽度
|
|
|
+ const minWidths: Record<string, number> = {};
|
|
|
+ let totalMinWidth = 0;
|
|
|
+
|
|
|
+ // 计算列最小宽度的函数
|
|
|
+ const calculateColumnMinWidth = (key: string, label: string, getValue: Function) => {
|
|
|
+ const headerWidth = getTextWidth(label) * 1.2;
|
|
|
+ let contentMaxWidth = 0;
|
|
|
+
|
|
|
+ // 计算内容最大宽度
|
|
|
+ list.value.forEach((row, index) => {
|
|
|
+ let text = '';
|
|
|
+ if (key === 'constructionStatus') {
|
|
|
+ // 特殊处理字典列
|
|
|
+ const dictValue = row[key];
|
|
|
+ // 这里需要根据实际情况获取字典标签，简化处理使用值本身
|
|
|
+ text = String(dictValue || '');
|
|
|
+ } else if (key === 'nptReason') {
|
|
|
+ // 非生产时间原因
|
|
|
+ text = getDictLabel(DICT_TYPE.PMS_PROJECT_NPT_REASON, 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 textWidth = getTextWidth(text);
|
|
|
+ if (textWidth > contentMaxWidth) contentMaxWidth = textWidth;
|
|
|
+ });
|
|
|
+
|
|
|
+ const minWidth = Math.max(headerWidth, contentMaxWidth, MIN_WIDTH) + PADDING;
|
|
|
+ minWidths[key] = minWidth;
|
|
|
+ totalMinWidth += minWidth;
|
|
|
+ return minWidth;
|
|
|
+ };
|
|
|
+
|
|
|
+ // 计算各列最小宽度
|
|
|
+ calculateColumnMinWidth('deptName', '施工队伍', (row: any) => row.deptName);
|
|
|
+ calculateColumnMinWidth('contractName', '项目', (row: any) => row.contractName);
|
|
|
+ calculateColumnMinWidth('taskName', '任务', (row: any) => row.taskName);
|
|
|
+ calculateColumnMinWidth('constructionStatus', t('project.status'), (row: any) => {
|
|
|
+ // 这里可以获取字典标签，简化处理使用值本身
|
|
|
+ return String(row.constructionStatus || '');
|
|
|
+ });
|
|
|
+ calculateColumnMinWidth('relocationDays', '搬迁安装天数', (row: any) => row.relocationDays);
|
|
|
+ calculateColumnMinWidth('transitTime', '运行时效', (row: any) => row.transitTime);
|
|
|
+ calculateColumnMinWidth('dailyGasInjection', '当日注气量(万方)', (row: any) => row.dailyGasInjection);
|
|
|
+ calculateColumnMinWidth('dailyWaterInjection', '当日注水量(方)', (row: any) => row.dailyWaterInjection);
|
|
|
+ calculateColumnMinWidth('dailyInjectGasTime', '当日注气时间(H)', (row: any) => row.dailyInjectGasTime);
|
|
|
+ calculateColumnMinWidth('dailyInjectWaterTime', '当日注水时间(H)', (row: any) => row.dailyInjectWaterTime);
|
|
|
+ calculateColumnMinWidth('nonProductionTime', '非生产时间(H)', (row: any) => row.nonProductionTime);
|
|
|
+ calculateColumnMinWidth('nptReason', t('project.nptReason'), (row: any) => row.nptReason);
|
|
|
+ calculateColumnMinWidth('constructionStartDate', '施工开始日期', (row: any) => dateFormatter(null, null, row.constructionStartDate));
|
|
|
+ calculateColumnMinWidth('constructionEndDate', '施工结束日期', (row: any) => dateFormatter(null, null, row.constructionEndDate));
|
|
|
+ calculateColumnMinWidth('totalGasInjection', '累计注气量(万方)', (row: any) => row.totalGasInjection);
|
|
|
+ calculateColumnMinWidth('totalWaterInjection', '累计注水量(方)', (row: any) => row.totalWaterInjection);
|
|
|
+ calculateColumnMinWidth('cumulativeCompletion', '累计完工井次', (row: any) => row.cumulativeCompletion);
|
|
|
+ calculateColumnMinWidth('createTime', '创建时间', (row: any) => dateFormatter(null, null, row.createTime));
|
|
|
+
|
|
|
+ // 操作列固定宽度
|
|
|
+ minWidths.operation = 120;
|
|
|
+ totalMinWidth += 120;
|
|
|
+
|
|
|
+ // 2. 计算可伸缩列最终宽度
|
|
|
+ const newWidths: Record<string, string> = {};
|
|
|
+ const availableWidth = containerWidth - 17; // 减去滚动条宽度
|
|
|
+
|
|
|
+ // 应用最小宽度到所有列
|
|
|
+ Object.keys(minWidths).forEach(key => {
|
|
|
+ newWidths[key] = `${minWidths[key]}px`;
|
|
|
+ });
|
|
|
+
|
|
|
+ // 计算可伸缩列需要的宽度
|
|
|
+ if (totalMinWidth < availableWidth) {
|
|
|
+ // 有剩余空间：按比例分配给可伸缩列
|
|
|
+ const extraSpace = availableWidth - totalMinWidth;
|
|
|
+ const flexibleColumnCount = FLEXIBLE_COLUMNS.length;
|
|
|
+ const spacePerColumn = Math.floor(extraSpace / flexibleColumnCount);
|
|
|
+
|
|
|
+ FLEXIBLE_COLUMNS.forEach(key => {
|
|
|
+ newWidths[key] = `${minWidths[key] + spacePerColumn}px`;
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ // 3. 更新列宽配置
|
|
|
+ columnWidths.value = newWidths;
|
|
|
+
|
|
|
+ // 4. 触发表格重新布局
|
|
|
+ nextTick(() => {
|
|
|
+ tableRef.value?.doLayout();
|
|
|
+ });
|
|
|
+};
|
|
|
+
|
|
|
/** 搜索按钮操作 */
|
|
|
const handleQuery = () => {
|
|
|
queryParams.pageNo = 1
|
|
|
@@ -494,8 +454,75 @@ const handleExport = async () => {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+// 声明 ResizeObserver 实例
|
|
|
+let resizeObserver: ResizeObserver | null = null;
|
|
|
+
|
|
|
/** 初始化 **/
|
|
|
onMounted(() => {
|
|
|
getList()
|
|
|
+ // 创建 ResizeObserver 监听表格容器尺寸变化
|
|
|
+ if (tableContainerRef.value?.$el) {
|
|
|
+ resizeObserver = new ResizeObserver(() => {
|
|
|
+ // 使用防抖避免频繁触发
|
|
|
+ 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;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 清除定时器
|
|
|
+ if ((window as any).resizeTimer) {
|
|
|
+ clearTimeout((window as any).resizeTimer);
|
|
|
+ }
|
|
|
+})
|
|
|
+
|
|
|
+// 监听列表数据变化重新计算列宽
|
|
|
+watch(list, () => {
|
|
|
+ nextTick(calculateColumnWidths)
|
|
|
+}, { deep: true })
|
|
|
+
|
|
|
</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+/* 表格容器样式，确保水平滚动 */
|
|
|
+.table-container {
|
|
|
+ width: 100%;
|
|
|
+ overflow-x: auto;
|
|
|
+}
|
|
|
+
|
|
|
+/* 确保表格单元格内容不换行 */
|
|
|
+:deep(.el-table .cell) {
|
|
|
+ white-space: nowrap;
|
|
|
+}
|
|
|
+
|
|
|
+/* 确保表格列标题不换行 */
|
|
|
+:deep(.el-table th > .cell) {
|
|
|
+ white-space: nowrap;
|
|
|
+}
|
|
|
+
|
|
|
+/* 调整表格最小宽度，确保内容完全显示 */
|
|
|
+:deep(.el-table) {
|
|
|
+ min-width: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+/* 强制显示所有内容，防止省略号 */
|
|
|
+:deep(.el-table td.el-table__cell),
|
|
|
+:deep(.el-table th.el-table__cell) {
|
|
|
+ overflow: visible !important;
|
|
|
+}
|
|
|
+
|
|
|
+:deep(.el-table .cell) {
|
|
|
+ overflow: visible !important;
|
|
|
+ text-overflow: clip !important;
|
|
|
+}
|
|
|
+</style>
|
zhangcl