|
@@ -45,8 +45,12 @@
|
|
|
/>
|
|
/>
|
|
|
</el-form-item>
|
|
</el-form-item>
|
|
|
<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
|
|
<el-button
|
|
|
type="primary"
|
|
type="primary"
|
|
|
plain
|
|
plain
|
|
@@ -84,7 +88,7 @@
|
|
|
<span
|
|
<span
|
|
|
class="unfilled-link"
|
|
class="unfilled-link"
|
|
|
@click="openUnfilledDialog"
|
|
@click="openUnfilledDialog"
|
|
|
- :class="{ 'disabled': !queryParams.createTime || queryParams.createTime.length === 0 }"
|
|
|
|
|
|
|
+ :class="{ disabled: !queryParams.createTime || queryParams.createTime.length === 0 }"
|
|
|
>
|
|
>
|
|
|
{{ statistics.unFilled || '-' }}
|
|
{{ statistics.unFilled || '-' }}
|
|
|
</span>
|
|
</span>
|
|
@@ -104,11 +108,15 @@
|
|
|
<div class="color-legend">
|
|
<div class="color-legend">
|
|
|
<div class="legend-item">
|
|
<div class="legend-item">
|
|
|
<span class="color-indicator red"></span>
|
|
<span class="color-indicator red"></span>
|
|
|
- <span>运行时效=当日注气量/产能 超过120%红色预警</span>
|
|
|
|
|
|
|
+ <span
|
|
|
|
|
+ >运行时效=当日注气量/产能 超过120%红色预警</span
|
|
|
|
|
+ >
|
|
|
</div>
|
|
</div>
|
|
|
<div class="legend-item">
|
|
<div class="legend-item">
|
|
|
<span class="color-indicator orange"></span>
|
|
<span class="color-indicator orange"></span>
|
|
|
- <span>当日注气时间+当日注水时间+非生产时间=24H 否则橙色预警</span>
|
|
|
|
|
|
|
+ <span
|
|
|
|
|
+ >当日注气时间+当日注水时间+非生产时间=24H 否则橙色预警</span
|
|
|
|
|
+ >
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
</ContentWrap>
|
|
</ContentWrap>
|
|
@@ -116,9 +124,16 @@
|
|
|
<!-- 列表 -->
|
|
<!-- 列表 -->
|
|
|
<ContentWrap ref="tableContainerRef">
|
|
<ContentWrap ref="tableContainerRef">
|
|
|
<div class="table-container">
|
|
<div class="table-container">
|
|
|
- <el-table ref="tableRef" v-loading="loading" :data="list" :stripe="true"
|
|
|
|
|
- style="width: 100%" :cell-style="cellStyle">
|
|
|
|
|
- <el-table-column :label="t('iotDevice.serial')" width="70" align="center">
|
|
|
|
|
|
|
+ <el-table
|
|
|
|
|
+ ref="tableRef"
|
|
|
|
|
+ v-loading="loading"
|
|
|
|
|
+ :data="list"
|
|
|
|
|
+ :stripe="true"
|
|
|
|
|
+ :style="{ width: '100%' }"
|
|
|
|
|
+ max-height="600"
|
|
|
|
|
+ :cell-style="cellStyle"
|
|
|
|
|
+ >
|
|
|
|
|
+ <el-table-column :label="t('iotDevice.serial')" width="56px" align="center">
|
|
|
<template #default="scope">
|
|
<template #default="scope">
|
|
|
{{ scope.$index + 1 }}
|
|
{{ scope.$index + 1 }}
|
|
|
</template>
|
|
</template>
|
|
@@ -128,29 +143,107 @@
|
|
|
align="center"
|
|
align="center"
|
|
|
prop="createTime"
|
|
prop="createTime"
|
|
|
:formatter="dateFormatter"
|
|
:formatter="dateFormatter"
|
|
|
- :width="columnWidths.createTime"
|
|
|
|
|
|
|
+ :min-width="columnWidths.createTime.width"
|
|
|
|
|
+ />
|
|
|
|
|
+ <el-table-column
|
|
|
|
|
+ label="施工队伍"
|
|
|
|
|
+ align="center"
|
|
|
|
|
+ prop="deptName"
|
|
|
|
|
+ :min-width="columnWidths.deptName.width"
|
|
|
|
|
+ />
|
|
|
|
|
+ <el-table-column
|
|
|
|
|
+ label="项目"
|
|
|
|
|
+ align="center"
|
|
|
|
|
+ prop="contractName"
|
|
|
|
|
+ :show-overflow-tooltip="true"
|
|
|
|
|
+ class-name="contract-name-column"
|
|
|
|
|
+ :min-width="columnWidths.contractName.width"
|
|
|
|
|
+ />
|
|
|
|
|
+ <el-table-column
|
|
|
|
|
+ label="任务"
|
|
|
|
|
+ align="center"
|
|
|
|
|
+ prop="taskName"
|
|
|
|
|
+ :min-width="columnWidths.taskName.width"
|
|
|
/>
|
|
/>
|
|
|
- <el-table-column label="施工队伍" align="center" prop="deptName" :width="columnWidths.deptName"/>
|
|
|
|
|
- <el-table-column label="项目" align="center" prop="contractName" :width="columnWidths.contractName"
|
|
|
|
|
- :show-overflow-tooltip="true" class-name="contract-name-column"/>
|
|
|
|
|
- <el-table-column label="任务" align="center" prop="taskName" :width="columnWidths.taskName"/>
|
|
|
|
|
<!-- <el-table-column label="施工状态" align="center" prop="constructionStatus" /> -->
|
|
<!-- <el-table-column label="施工状态" align="center" prop="constructionStatus" /> -->
|
|
|
- <el-table-column :label="t('project.status')" align="center" prop="constructionStatus" :width="columnWidths.constructionStatus">
|
|
|
|
|
|
|
+ <el-table-column
|
|
|
|
|
+ :label="t('project.status')"
|
|
|
|
|
+ align="center"
|
|
|
|
|
+ prop="constructionStatus"
|
|
|
|
|
+ :min-width="columnWidths.constructionStatus.width"
|
|
|
|
|
+ >
|
|
|
<template #default="scope">
|
|
<template #default="scope">
|
|
|
- <dict-tag :type="DICT_TYPE.PMS_PROJECT_TASK_SCHEDULE" :value="scope.row.constructionStatus" />
|
|
|
|
|
|
|
+ <dict-tag
|
|
|
|
|
+ :type="DICT_TYPE.PMS_PROJECT_TASK_SCHEDULE"
|
|
|
|
|
+ :value="scope.row.constructionStatus"
|
|
|
|
|
+ />
|
|
|
</template>
|
|
</template>
|
|
|
</el-table-column>
|
|
</el-table-column>
|
|
|
- <el-table-column label="搬迁安装天数" align="center" prop="relocationDays" :width="columnWidths.relocationDays" :formatter="relocationDaysFormatter"/>
|
|
|
|
|
- <el-table-column label="设计注气量(万方)" align="center" prop="designInjection" :width="columnWidths.designInjection"/>
|
|
|
|
|
- <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="当日用电量(kWh)" align="center" prop="dailyPowerUsage" :width="columnWidths.dailyPowerUsage"/>
|
|
|
|
|
- <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">
|
|
|
|
|
|
|
+ <el-table-column
|
|
|
|
|
+ label="搬迁安装天数"
|
|
|
|
|
+ align="center"
|
|
|
|
|
+ prop="relocationDays"
|
|
|
|
|
+ :formatter="relocationDaysFormatter"
|
|
|
|
|
+ :min-width="columnWidths.relocationDays.width"
|
|
|
|
|
+ />
|
|
|
|
|
+ <el-table-column
|
|
|
|
|
+ label="设计注气量(万方)"
|
|
|
|
|
+ align="center"
|
|
|
|
|
+ prop="designInjection"
|
|
|
|
|
+ :min-width="columnWidths.designInjection.width"
|
|
|
|
|
+ />
|
|
|
|
|
+ <el-table-column
|
|
|
|
|
+ label="运行时效"
|
|
|
|
|
+ align="center"
|
|
|
|
|
+ prop="transitTime"
|
|
|
|
|
+ :formatter="percentageFormatter"
|
|
|
|
|
+ :min-width="columnWidths.transitTime.width"
|
|
|
|
|
+ />
|
|
|
|
|
+ <el-table-column label="当日" align="center">
|
|
|
|
|
+ <el-table-column
|
|
|
|
|
+ label="注气量(万方)"
|
|
|
|
|
+ align="center"
|
|
|
|
|
+ prop="dailyGasInjection"
|
|
|
|
|
+ :formatter="gasInjectionFormatter"
|
|
|
|
|
+ :min-width="columnWidths.dailyGasInjection.width"
|
|
|
|
|
+ />
|
|
|
|
|
+ <el-table-column
|
|
|
|
|
+ label="注水量(方)"
|
|
|
|
|
+ align="center"
|
|
|
|
|
+ prop="dailyWaterInjection"
|
|
|
|
|
+ :min-width="columnWidths.dailyWaterInjection.width"
|
|
|
|
|
+ />
|
|
|
|
|
+ <el-table-column
|
|
|
|
|
+ label="注气时间(H)"
|
|
|
|
|
+ align="center"
|
|
|
|
|
+ prop="dailyInjectGasTime"
|
|
|
|
|
+ :min-width="columnWidths.dailyInjectGasTime.width"
|
|
|
|
|
+ />
|
|
|
|
|
+ <el-table-column
|
|
|
|
|
+ label="注水时间(H)"
|
|
|
|
|
+ align="center"
|
|
|
|
|
+ prop="dailyInjectWaterTime"
|
|
|
|
|
+ :min-width="columnWidths.dailyInjectWaterTime.width"
|
|
|
|
|
+ />
|
|
|
|
|
+ <el-table-column
|
|
|
|
|
+ label="用电量(kWh)"
|
|
|
|
|
+ align="center"
|
|
|
|
|
+ prop="dailyPowerUsage"
|
|
|
|
|
+ :min-width="columnWidths.dailyPowerUsage.width"
|
|
|
|
|
+ />
|
|
|
|
|
+ </el-table-column>
|
|
|
|
|
+ <el-table-column
|
|
|
|
|
+ label="非生产时间(H)"
|
|
|
|
|
+ align="center"
|
|
|
|
|
+ prop="nonProductionTime"
|
|
|
|
|
+ :min-width="columnWidths.nonProductionTime.width"
|
|
|
|
|
+ />
|
|
|
|
|
+ <el-table-column
|
|
|
|
|
+ :label="t('project.nptReason')"
|
|
|
|
|
+ align="center"
|
|
|
|
|
+ prop="nptReason"
|
|
|
|
|
+ :min-width="columnWidths.nptReason.width"
|
|
|
|
|
+ >
|
|
|
<template #default="scope">
|
|
<template #default="scope">
|
|
|
<dict-tag :type="DICT_TYPE.PMS_PROJECT_NPT_REASON" :value="scope.row.nptReason" />
|
|
<dict-tag :type="DICT_TYPE.PMS_PROJECT_NPT_REASON" :value="scope.row.nptReason" />
|
|
|
</template>
|
|
</template>
|
|
@@ -160,16 +253,21 @@
|
|
|
align="center"
|
|
align="center"
|
|
|
prop="constructionStartDate"
|
|
prop="constructionStartDate"
|
|
|
:formatter="dateFormatter"
|
|
:formatter="dateFormatter"
|
|
|
- :width="columnWidths.constructionStartDate"
|
|
|
|
|
|
|
+ :min-width="columnWidths.constructionStartDate.width"
|
|
|
/>
|
|
/>
|
|
|
<el-table-column
|
|
<el-table-column
|
|
|
label="施工结束日期"
|
|
label="施工结束日期"
|
|
|
align="center"
|
|
align="center"
|
|
|
prop="constructionEndDate"
|
|
prop="constructionEndDate"
|
|
|
:formatter="dateFormatter"
|
|
:formatter="dateFormatter"
|
|
|
- :width="columnWidths.constructionEndDate"
|
|
|
|
|
|
|
+ :min-width="columnWidths.constructionEndDate.width"
|
|
|
/>
|
|
/>
|
|
|
- <el-table-column label="生产动态" align="center" :width="columnWidths.productionStatus" fixed-width>
|
|
|
|
|
|
|
+ <el-table-column
|
|
|
|
|
+ label="生产动态"
|
|
|
|
|
+ align="center"
|
|
|
|
|
+ :min-width="columnWidths.productionStatus.width"
|
|
|
|
|
+ fixed-width
|
|
|
|
|
+ >
|
|
|
<template #default="scope">
|
|
<template #default="scope">
|
|
|
<el-tooltip
|
|
<el-tooltip
|
|
|
effect="light"
|
|
effect="light"
|
|
@@ -178,16 +276,41 @@
|
|
|
popper-class="design-well-struct-tooltip"
|
|
popper-class="design-well-struct-tooltip"
|
|
|
:disabled="!scope.row.productionStatus || scope.row.productionStatus.length <= 30"
|
|
:disabled="!scope.row.productionStatus || scope.row.productionStatus.length <= 30"
|
|
|
>
|
|
>
|
|
|
- <span class="design-well-struct-text">{{ formatDesignWellStruct(scope.row.productionStatus) }}</span>
|
|
|
|
|
|
|
+ <span class="design-well-struct-text">{{
|
|
|
|
|
+ formatDesignWellStruct(scope.row.productionStatus)
|
|
|
|
|
+ }}</span>
|
|
|
</el-tooltip>
|
|
</el-tooltip>
|
|
|
</template>
|
|
</template>
|
|
|
</el-table-column>
|
|
</el-table-column>
|
|
|
- <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="capacity" :width="columnWidths.capacity" :formatter="gasInjectionFormatter"/>
|
|
|
|
|
- <el-table-column label="操作" align="center" :width="columnWidths.operation" fixed="right">
|
|
|
|
|
|
|
+ <el-table-column label="累计" align="center">
|
|
|
|
|
+ <el-table-column
|
|
|
|
|
+ label="注气量(万方)"
|
|
|
|
|
+ align="center"
|
|
|
|
|
+ prop="totalGasInjection"
|
|
|
|
|
+ :formatter="gasInjectionFormatter"
|
|
|
|
|
+ :min-width="columnWidths.totalGasInjection.width"
|
|
|
|
|
+ />
|
|
|
|
|
+ <el-table-column
|
|
|
|
|
+ label="注水量(方)"
|
|
|
|
|
+ align="center"
|
|
|
|
|
+ prop="totalWaterInjection"
|
|
|
|
|
+ :min-width="columnWidths.totalWaterInjection.width"
|
|
|
|
|
+ />
|
|
|
|
|
+ <el-table-column
|
|
|
|
|
+ label="完工井次"
|
|
|
|
|
+ align="center"
|
|
|
|
|
+ prop="cumulativeCompletion"
|
|
|
|
|
+ :min-width="columnWidths.cumulativeCompletion.width"
|
|
|
|
|
+ />
|
|
|
|
|
+ </el-table-column>
|
|
|
|
|
+ <el-table-column
|
|
|
|
|
+ label="产能(万方)"
|
|
|
|
|
+ align="center"
|
|
|
|
|
+ prop="capacity"
|
|
|
|
|
+ :formatter="gasInjectionFormatter"
|
|
|
|
|
+ :min-width="columnWidths.capacity.width"
|
|
|
|
|
+ />
|
|
|
|
|
+ <el-table-column label="操作" align="center" fixed="right">
|
|
|
<template #default="scope">
|
|
<template #default="scope">
|
|
|
<el-button
|
|
<el-button
|
|
|
link
|
|
link
|
|
@@ -219,7 +342,7 @@
|
|
|
</ContentWrap>
|
|
</ContentWrap>
|
|
|
|
|
|
|
|
<!-- 表单弹窗:添加/修改 -->
|
|
<!-- 表单弹窗:添加/修改 -->
|
|
|
- <IotRhDailyReportForm ref="formRef" @success="getList" :row-data="selectedRowData"/>
|
|
|
|
|
|
|
+ <IotRhDailyReportForm ref="formRef" @success="getList" :row-data="selectedRowData" />
|
|
|
|
|
|
|
|
<UnfilledReportDialog
|
|
<UnfilledReportDialog
|
|
|
ref="unfilledDialogRef"
|
|
ref="unfilledDialogRef"
|
|
@@ -228,18 +351,18 @@
|
|
|
/>
|
|
/>
|
|
|
</el-col>
|
|
</el-col>
|
|
|
</el-row>
|
|
</el-row>
|
|
|
-
|
|
|
|
|
</template>
|
|
</template>
|
|
|
|
|
|
|
|
<script setup lang="ts">
|
|
<script setup lang="ts">
|
|
|
-import {dateFormatter, dateFormatter2} from '@/utils/formatTime'
|
|
|
|
|
|
|
+import { dateFormatter } from '@/utils/formatTime'
|
|
|
import download from '@/utils/download'
|
|
import download from '@/utils/download'
|
|
|
import { IotRhDailyReportApi, IotRhDailyReportVO } from '@/api/pms/iotrhdailyreport'
|
|
import { IotRhDailyReportApi, IotRhDailyReportVO } from '@/api/pms/iotrhdailyreport'
|
|
|
import IotRhDailyReportForm from './IotRhDailyReportForm.vue'
|
|
import IotRhDailyReportForm from './IotRhDailyReportForm.vue'
|
|
|
import UnfilledReportDialog from './UnfilledReportDialog.vue'
|
|
import UnfilledReportDialog from './UnfilledReportDialog.vue'
|
|
|
-import {DICT_TYPE, getDictLabel} from "@/utils/dict";
|
|
|
|
|
-import { ref, reactive, onMounted, nextTick, watch, onUnmounted } from 'vue'
|
|
|
|
|
-import DeptTree2 from "@/views/pms/iotrhdailyreport/DeptTree2.vue";
|
|
|
|
|
|
|
+import { DICT_TYPE } from '@/utils/dict'
|
|
|
|
|
+import { ref, reactive, onMounted, onUnmounted } from 'vue'
|
|
|
|
|
+import DeptTree2 from '@/views/pms/iotrhdailyreport/DeptTree2.vue'
|
|
|
|
|
+import { useDebounceFn } from '@vueuse/core'
|
|
|
|
|
|
|
|
/** 瑞恒日报 列表 */
|
|
/** 瑞恒日报 列表 */
|
|
|
defineOptions({ name: 'IotRhDailyReport' })
|
|
defineOptions({ name: 'IotRhDailyReport' })
|
|
@@ -286,7 +409,7 @@ const queryParams = reactive({
|
|
|
status: undefined,
|
|
status: undefined,
|
|
|
processInstanceId: undefined,
|
|
processInstanceId: undefined,
|
|
|
auditStatus: undefined,
|
|
auditStatus: undefined,
|
|
|
- createTime: [],
|
|
|
|
|
|
|
+ createTime: []
|
|
|
})
|
|
})
|
|
|
const queryFormRef = ref() // 搜索的表单
|
|
const queryFormRef = ref() // 搜索的表单
|
|
|
const exportLoading = ref(false) // 导出的加载中
|
|
const exportLoading = ref(false) // 导出的加载中
|
|
@@ -301,7 +424,7 @@ const statistics = ref({
|
|
|
filled: '-',
|
|
filled: '-',
|
|
|
unFilled: '-',
|
|
unFilled: '-',
|
|
|
totalWaterInjection: '-', // 新增累计注水量
|
|
totalWaterInjection: '-', // 新增累计注水量
|
|
|
- totalGasInjection: '-' // 新增累计注气量
|
|
|
|
|
|
|
+ totalGasInjection: '-' // 新增累计注气量
|
|
|
})
|
|
})
|
|
|
|
|
|
|
|
const totalColor = '#00DD99'
|
|
const totalColor = '#00DD99'
|
|
@@ -320,62 +443,182 @@ const workloadStatistics = ref({
|
|
|
})
|
|
})
|
|
|
|
|
|
|
|
// 列宽度配置
|
|
// 列宽度配置
|
|
|
-const columnWidths = ref({
|
|
|
|
|
- deptName: '120px',
|
|
|
|
|
- contractName: '200px',
|
|
|
|
|
- taskName: '120px',
|
|
|
|
|
- constructionStatus: '110px',
|
|
|
|
|
- relocationDays: '120px',
|
|
|
|
|
- designInjection: '120px',
|
|
|
|
|
- transitTime: '100px',
|
|
|
|
|
- dailyGasInjection: '150px',
|
|
|
|
|
- dailyWaterInjection: '150px',
|
|
|
|
|
- dailyPowerUsage: '150px',
|
|
|
|
|
- dailyInjectGasTime: '150px',
|
|
|
|
|
- dailyInjectWaterTime: '150px',
|
|
|
|
|
- nonProductionTime: '150px',
|
|
|
|
|
- nptReason: '150px',
|
|
|
|
|
- constructionStartDate: '180px',
|
|
|
|
|
- constructionEndDate: '180px',
|
|
|
|
|
- productionStatus: '200px',
|
|
|
|
|
- totalGasInjection: '150px',
|
|
|
|
|
- totalWaterInjection: '150px',
|
|
|
|
|
- cumulativeCompletion: '150px',
|
|
|
|
|
- capacity: '120px',
|
|
|
|
|
- createTime: '180px',
|
|
|
|
|
- operation: '120px'
|
|
|
|
|
|
|
+const columnWidths = ref<
|
|
|
|
|
+ Record<
|
|
|
|
|
+ string,
|
|
|
|
|
+ { label: string; prop: string; width: string; fn?: (row: IotRhDailyReportVO) => string }
|
|
|
|
|
+ >
|
|
|
|
|
+>({
|
|
|
|
|
+ createTime: {
|
|
|
|
|
+ label: '日期',
|
|
|
|
|
+ prop: 'createTime',
|
|
|
|
|
+ width: '120px',
|
|
|
|
|
+ fn: (row: IotRhDailyReportVO) => dateFormatter(null, null, row.createTime)
|
|
|
|
|
+ },
|
|
|
|
|
+ deptName: {
|
|
|
|
|
+ label: '施工队伍',
|
|
|
|
|
+ prop: 'deptName',
|
|
|
|
|
+ width: '120px'
|
|
|
|
|
+ },
|
|
|
|
|
+ contractName: {
|
|
|
|
|
+ label: '项目',
|
|
|
|
|
+ prop: 'contractName',
|
|
|
|
|
+ width: '120px'
|
|
|
|
|
+ },
|
|
|
|
|
+ taskName: {
|
|
|
|
|
+ label: '任务',
|
|
|
|
|
+ prop: 'taskName',
|
|
|
|
|
+ width: '120px'
|
|
|
|
|
+ },
|
|
|
|
|
+ constructionStatus: {
|
|
|
|
|
+ label: '施工状态',
|
|
|
|
|
+ prop: 'constructionStatus',
|
|
|
|
|
+ width: '120px'
|
|
|
|
|
+ },
|
|
|
|
|
+ relocationDays: {
|
|
|
|
|
+ label: '搬迁安装天数',
|
|
|
|
|
+ prop: 'relocationDays',
|
|
|
|
|
+ width: '120px',
|
|
|
|
|
+ fn: (row: IotRhDailyReportVO) => relocationDaysFormatter(null, null, row.relocationDays, null)
|
|
|
|
|
+ },
|
|
|
|
|
+ designInjection: {
|
|
|
|
|
+ label: '设计注气量(万方)',
|
|
|
|
|
+ prop: 'designInjection',
|
|
|
|
|
+ width: '120px'
|
|
|
|
|
+ },
|
|
|
|
|
+ transitTime: {
|
|
|
|
|
+ label: '运行时效',
|
|
|
|
|
+ prop: 'transitTime',
|
|
|
|
|
+ width: '120px',
|
|
|
|
|
+ fn: (row: IotRhDailyReportVO) => percentageFormatter(null, null, row.transitTime, null)
|
|
|
|
|
+ },
|
|
|
|
|
+ dailyGasInjection: {
|
|
|
|
|
+ label: '注气量(万方)',
|
|
|
|
|
+ prop: 'dailyGasInjection',
|
|
|
|
|
+ width: '120px',
|
|
|
|
|
+ fn: (row: IotRhDailyReportVO) => gasInjectionFormatter(null, null, row.dailyGasInjection, null)
|
|
|
|
|
+ },
|
|
|
|
|
+ dailyWaterInjection: {
|
|
|
|
|
+ label: '注水量(方)',
|
|
|
|
|
+ prop: 'dailyWaterInjection',
|
|
|
|
|
+ width: '120px'
|
|
|
|
|
+ },
|
|
|
|
|
+ dailyInjectGasTime: {
|
|
|
|
|
+ label: '注气时间(H)',
|
|
|
|
|
+ prop: 'dailyInjectGasTime',
|
|
|
|
|
+ width: '120px'
|
|
|
|
|
+ },
|
|
|
|
|
+ dailyInjectWaterTime: {
|
|
|
|
|
+ label: '注水时间(H)',
|
|
|
|
|
+ prop: 'dailyInjectWaterTime',
|
|
|
|
|
+ width: '120px'
|
|
|
|
|
+ },
|
|
|
|
|
+ dailyPowerUsage: {
|
|
|
|
|
+ label: '用电量(kWh)',
|
|
|
|
|
+ prop: 'dailyPowerUsage',
|
|
|
|
|
+ width: '120px'
|
|
|
|
|
+ },
|
|
|
|
|
+ nonProductionTime: {
|
|
|
|
|
+ label: '非生产时间(H)',
|
|
|
|
|
+ prop: 'nonProductionTime',
|
|
|
|
|
+ width: '120px'
|
|
|
|
|
+ },
|
|
|
|
|
+ nptReason: {
|
|
|
|
|
+ label: '非生产时间原因',
|
|
|
|
|
+ prop: 'nptReason',
|
|
|
|
|
+ width: '120px'
|
|
|
|
|
+ },
|
|
|
|
|
+ constructionStartDate: {
|
|
|
|
|
+ label: '施工开始日期',
|
|
|
|
|
+ prop: 'constructionStartDate',
|
|
|
|
|
+ width: '120px',
|
|
|
|
|
+ fn: (row: IotRhDailyReportVO) => dateFormatter(null, null, row.constructionStartDate)
|
|
|
|
|
+ },
|
|
|
|
|
+ constructionEndDate: {
|
|
|
|
|
+ label: '施工结束日期',
|
|
|
|
|
+ prop: 'constructionEndDate',
|
|
|
|
|
+ width: '120px',
|
|
|
|
|
+ fn: (row: IotRhDailyReportVO) => dateFormatter(null, null, row.constructionEndDate)
|
|
|
|
|
+ },
|
|
|
|
|
+ productionStatus: {
|
|
|
|
|
+ label: '生产动态',
|
|
|
|
|
+ prop: 'productionStatus',
|
|
|
|
|
+ width: '120px'
|
|
|
|
|
+ },
|
|
|
|
|
+ totalGasInjection: {
|
|
|
|
|
+ label: '注气量(万方)',
|
|
|
|
|
+ prop: 'totalGasInjection',
|
|
|
|
|
+ width: '120px',
|
|
|
|
|
+ fn: (row: IotRhDailyReportVO) => gasInjectionFormatter(null, null, row.totalGasInjection, null)
|
|
|
|
|
+ },
|
|
|
|
|
+ totalWaterInjection: {
|
|
|
|
|
+ label: '注水量(方)',
|
|
|
|
|
+ prop: 'totalWaterInjection',
|
|
|
|
|
+ width: '120px'
|
|
|
|
|
+ },
|
|
|
|
|
+ cumulativeCompletion: {
|
|
|
|
|
+ label: '完工井次',
|
|
|
|
|
+ prop: 'cumulativeCompletion',
|
|
|
|
|
+ width: '120px'
|
|
|
|
|
+ },
|
|
|
|
|
+ capacity: {
|
|
|
|
|
+ label: '产能(万方)',
|
|
|
|
|
+ prop: 'capacity',
|
|
|
|
|
+ width: '120px',
|
|
|
|
|
+ fn: (row: IotRhDailyReportVO) => gasInjectionFormatter(null, null, row.capacity, null)
|
|
|
|
|
+ }
|
|
|
})
|
|
})
|
|
|
|
|
|
|
|
// 计算文本宽度
|
|
// 计算文本宽度
|
|
|
-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 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 calculateColumnWidths = useDebounceFn(() => {
|
|
|
|
|
+ if (!tableContainerRef.value?.$el) return
|
|
|
|
|
+ Object.values(columnWidths.value).forEach(({ fn, prop, label, width }) => {
|
|
|
|
|
+ width =
|
|
|
|
|
+ Math.max(
|
|
|
|
|
+ ...[
|
|
|
|
|
+ getTextWidth(label),
|
|
|
|
|
+ ...list.value.map((v) => {
|
|
|
|
|
+ return getTextWidth(fn ? fn(v) : v[prop])
|
|
|
|
|
+ })
|
|
|
|
|
+ ]
|
|
|
|
|
+ ) +
|
|
|
|
|
+ (label === '施工状态' || label === '非生产时间原因' ? 30 : 20) +
|
|
|
|
|
+ 'px'
|
|
|
|
|
+
|
|
|
|
|
+ columnWidths.value[prop].width = width
|
|
|
|
|
+ })
|
|
|
|
|
+}, 1000)
|
|
|
|
|
+// 计算列宽度
|
|
|
|
|
|
|
|
// 格式化设计井身结构文本
|
|
// 格式化设计井身结构文本
|
|
|
const formatDesignWellStruct = (text: string | null | undefined) => {
|
|
const formatDesignWellStruct = (text: string | null | undefined) => {
|
|
|
- if (!text) return '-';
|
|
|
|
|
|
|
+ if (!text) return '-'
|
|
|
// 如果文本长度超过30个字符,显示前30个字符并添加省略号
|
|
// 如果文本长度超过30个字符,显示前30个字符并添加省略号
|
|
|
- return text.length > 30 ? text.substring(0, 30) + '...' : text;
|
|
|
|
|
-};
|
|
|
|
|
|
|
+ return text.length > 30 ? text.substring(0, 30) + '...' : text
|
|
|
|
|
+}
|
|
|
|
|
|
|
|
// 百分比格式化函数
|
|
// 百分比格式化函数
|
|
|
-const percentageFormatter = (row: any, column: any, cellValue: any, index: number) => {
|
|
|
|
|
- if (cellValue === null || cellValue === undefined) return '';
|
|
|
|
|
|
|
+const percentageFormatter = (row: any, column: any, cellValue: any, index: number | null) => {
|
|
|
|
|
+ if (cellValue === null || cellValue === undefined) return ''
|
|
|
// 将小数转换为百分比,保留两位小数
|
|
// 将小数转换为百分比,保留两位小数
|
|
|
- return `${(parseFloat(cellValue) * 100).toFixed(2)}%`;
|
|
|
|
|
-};
|
|
|
|
|
|
|
+ return `${(parseFloat(cellValue) * 100).toFixed(2)}%`
|
|
|
|
|
+}
|
|
|
|
|
|
|
|
// 添加打开未填报弹窗的方法
|
|
// 添加打开未填报弹窗的方法
|
|
|
const openUnfilledDialog = () => {
|
|
const openUnfilledDialog = () => {
|
|
@@ -416,7 +659,7 @@ const getStatistics = async () => {
|
|
|
|
|
|
|
|
// 处理统计数据
|
|
// 处理统计数据
|
|
|
const statsMap = {}
|
|
const statsMap = {}
|
|
|
- res.forEach(item => {
|
|
|
|
|
|
|
+ res.forEach((item) => {
|
|
|
statsMap[item.groupName] = item.count
|
|
statsMap[item.groupName] = item.count
|
|
|
})
|
|
})
|
|
|
|
|
|
|
@@ -430,13 +673,6 @@ const getStatistics = async () => {
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
-// 可伸缩列配置
|
|
|
|
|
-const FLEXIBLE_COLUMNS = ['deptName', 'taskName', 'constructionStatus', 'relocationDays', 'designInjection',
|
|
|
|
|
- 'transitTime', 'dailyGasInjection', 'dailyWaterInjection', 'dailyPowerUsage', 'dailyInjectGasTime',
|
|
|
|
|
- 'dailyInjectWaterTime', 'nonProductionTime', 'nptReason', 'constructionStartDate',
|
|
|
|
|
- 'constructionEndDate', 'productionStatus', 'totalGasInjection', 'totalWaterInjection',
|
|
|
|
|
- 'cumulativeCompletion', 'createTime'];
|
|
|
|
|
-
|
|
|
|
|
/** 查询列表 */
|
|
/** 查询列表 */
|
|
|
const getList = async () => {
|
|
const getList = async () => {
|
|
|
loading.value = true
|
|
loading.value = true
|
|
@@ -453,204 +689,85 @@ const getList = async () => {
|
|
|
|
|
|
|
|
// 获取数据后计算列宽
|
|
// 获取数据后计算列宽
|
|
|
nextTick(() => {
|
|
nextTick(() => {
|
|
|
- calculateColumnWidths();
|
|
|
|
|
- });
|
|
|
|
|
|
|
+ calculateColumnWidths()
|
|
|
|
|
+ })
|
|
|
} finally {
|
|
} finally {
|
|
|
loading.value = false
|
|
loading.value = false
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
// 搬迁安装天数格式化函数
|
|
// 搬迁安装天数格式化函数
|
|
|
-const relocationDaysFormatter = (row: any, column: any, cellValue: any, index: number) => {
|
|
|
|
|
- if (cellValue === null || cellValue === undefined || cellValue === '') return '';
|
|
|
|
|
|
|
+const relocationDaysFormatter = (row: any, column: any, cellValue: any, index: number | null) => {
|
|
|
|
|
+ if (cellValue === null || cellValue === undefined || cellValue === '') return ''
|
|
|
|
|
|
|
|
- const value = parseFloat(cellValue);
|
|
|
|
|
|
|
+ const value = parseFloat(cellValue)
|
|
|
// 如果值为负数,显示0,否则显示原值
|
|
// 如果值为负数,显示0,否则显示原值
|
|
|
- return value < 0 ? '0' : String(value);
|
|
|
|
|
-};
|
|
|
|
|
|
|
+ return value < 0 ? '0' : String(value)
|
|
|
|
|
+}
|
|
|
|
|
|
|
|
// 注气量格式化函数(单位转换:方 -> 万方)
|
|
// 注气量格式化函数(单位转换:方 -> 万方)
|
|
|
-const gasInjectionFormatter = (row: any, column: any, cellValue: any, index: number) => {
|
|
|
|
|
- if (cellValue === null || cellValue === undefined || cellValue === '') return '';
|
|
|
|
|
|
|
+const gasInjectionFormatter = (row: any, column: any, cellValue: any, index: number | null) => {
|
|
|
|
|
+ if (cellValue === null || cellValue === undefined || cellValue === '') return ''
|
|
|
// 将方转换为万方,保留两位小数
|
|
// 将方转换为万方,保留两位小数
|
|
|
- const value = parseFloat(cellValue);
|
|
|
|
|
- return (value / 10000).toFixed(2);
|
|
|
|
|
-};
|
|
|
|
|
|
|
+ const value = parseFloat(cellValue)
|
|
|
|
|
+ return (value / 10000).toFixed(2)
|
|
|
|
|
+}
|
|
|
|
|
|
|
|
// 检查三个时间字段之和是否为24
|
|
// 检查三个时间字段之和是否为24
|
|
|
const checkTimeSumEquals24 = (row: any) => {
|
|
const checkTimeSumEquals24 = (row: any) => {
|
|
|
// 获取三个字段的值,转换为数字,如果为空则视为0
|
|
// 获取三个字段的值,转换为数字,如果为空则视为0
|
|
|
- const gasTime = parseFloat(row.dailyInjectGasTime) || 0;
|
|
|
|
|
- const waterTime = parseFloat(row.dailyInjectWaterTime) || 0;
|
|
|
|
|
- const nonProdTime = parseFloat(row.nonProductionTime) || 0;
|
|
|
|
|
|
|
+ const gasTime = parseFloat(row.dailyInjectGasTime) || 0
|
|
|
|
|
+ const waterTime = parseFloat(row.dailyInjectWaterTime) || 0
|
|
|
|
|
+ const nonProdTime = parseFloat(row.nonProductionTime) || 0
|
|
|
|
|
|
|
|
// 计算总和
|
|
// 计算总和
|
|
|
- const sum = gasTime + waterTime + nonProdTime;
|
|
|
|
|
|
|
+ const sum = gasTime + waterTime + nonProdTime
|
|
|
|
|
|
|
|
// 返回是否等于24(允许一定的浮点数误差)
|
|
// 返回是否等于24(允许一定的浮点数误差)
|
|
|
- return Math.abs(sum - 24) < 0.01; // 使用0.01作为误差范围
|
|
|
|
|
-};
|
|
|
|
|
|
|
+ return Math.abs(sum - 24) < 0.01 // 使用0.01作为误差范围
|
|
|
|
|
+}
|
|
|
|
|
|
|
|
// 单元格样式函数
|
|
// 单元格样式函数
|
|
|
-const cellStyle = ({ row, column, rowIndex, columnIndex }: { row: any; column: any; rowIndex: number; columnIndex: number }) => {
|
|
|
|
|
|
|
+const cellStyle = ({
|
|
|
|
|
+ row,
|
|
|
|
|
+ column,
|
|
|
|
|
+ rowIndex,
|
|
|
|
|
+ columnIndex
|
|
|
|
|
+}: {
|
|
|
|
|
+ row: any
|
|
|
|
|
+ column: any
|
|
|
|
|
+ rowIndex: number
|
|
|
|
|
+ columnIndex: number
|
|
|
|
|
+}) => {
|
|
|
// 只针对 transitTime 列进行处理
|
|
// 只针对 transitTime 列进行处理
|
|
|
if (column.property === 'transitTime') {
|
|
if (column.property === 'transitTime') {
|
|
|
// 获取原始值(不是格式化后的百分比值)
|
|
// 获取原始值(不是格式化后的百分比值)
|
|
|
- const originalValue = row.transitTime;
|
|
|
|
|
|
|
+ const originalValue = row.transitTime
|
|
|
|
|
|
|
|
// 检查值是否大于120
|
|
// 检查值是否大于120
|
|
|
if (originalValue !== null && originalValue !== undefined && parseFloat(originalValue) > 1.2) {
|
|
if (originalValue !== null && originalValue !== undefined && parseFloat(originalValue) > 1.2) {
|
|
|
return {
|
|
return {
|
|
|
color: 'red',
|
|
color: 'red',
|
|
|
fontWeight: 'bold' // 可选:加粗以更突出显示
|
|
fontWeight: 'bold' // 可选:加粗以更突出显示
|
|
|
- };
|
|
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
// 处理三个时间字段:当日注气时间、当日注水时间、非生产时间
|
|
// 处理三个时间字段:当日注气时间、当日注水时间、非生产时间
|
|
|
- const timeFields = ['dailyInjectGasTime', 'dailyInjectWaterTime', 'nonProductionTime'];
|
|
|
|
|
|
|
+ const timeFields = ['dailyInjectGasTime', 'dailyInjectWaterTime', 'nonProductionTime']
|
|
|
if (timeFields.includes(column.property)) {
|
|
if (timeFields.includes(column.property)) {
|
|
|
// 检查三个时间字段之和是否不等于24
|
|
// 检查三个时间字段之和是否不等于24
|
|
|
if (!checkTimeSumEquals24(row)) {
|
|
if (!checkTimeSumEquals24(row)) {
|
|
|
return {
|
|
return {
|
|
|
color: 'orange',
|
|
color: 'orange',
|
|
|
fontWeight: 'bold'
|
|
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) => {
|
|
|
|
|
- // 跳过 contractName 列的计算,使用固定宽度
|
|
|
|
|
- if (key === 'contractName') {
|
|
|
|
|
- minWidths[key] = 200; // 固定宽度
|
|
|
|
|
- totalMinWidth += 200;
|
|
|
|
|
- return 200;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- 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) => {
|
|
|
|
|
- const value = row.relocationDays;
|
|
|
|
|
- if (value === null || value === undefined || value === '') return '';
|
|
|
|
|
- const numValue = parseFloat(value);
|
|
|
|
|
- return numValue < 0 ? '0' : String(numValue);
|
|
|
|
|
- });
|
|
|
|
|
- calculateColumnMinWidth('designInjection', '设计注气量(万方)', (row: any) => row.designInjection);
|
|
|
|
|
- calculateColumnMinWidth('transitTime', '运行时效', (row: any) => row.transitTime);
|
|
|
|
|
- calculateColumnMinWidth('dailyGasInjection', '当日注气量(万方)', (row: any) => row.dailyGasInjection);
|
|
|
|
|
- calculateColumnMinWidth('dailyWaterInjection', '当日注水量(方)', (row: any) => row.dailyWaterInjection);
|
|
|
|
|
- calculateColumnMinWidth('dailyPowerUsage', '当日用电量(kWh)', (row: any) => row.dailyPowerUsage);
|
|
|
|
|
- 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('productionStatus', '生产动态', (row: any) => row.productionStatus);
|
|
|
|
|
- calculateColumnMinWidth('totalGasInjection', '累计注气量(万方)', (row: any) => row.totalGasInjection);
|
|
|
|
|
- calculateColumnMinWidth('totalWaterInjection', '累计注水量(方)', (row: any) => row.totalWaterInjection);
|
|
|
|
|
- calculateColumnMinWidth('cumulativeCompletion', '累计完工井次', (row: any) => row.cumulativeCompletion);
|
|
|
|
|
- calculateColumnMinWidth('capacity', '产能(万方)', (row: any) => row.capacity);
|
|
|
|
|
- calculateColumnMinWidth('createTime', '创建时间', (row: any) => dateFormatter(null, null, row.createTime));
|
|
|
|
|
-
|
|
|
|
|
- // 生产动态 列使用固定宽度,不参与自动计算
|
|
|
|
|
- minWidths.productionStatus = 200; // 固定宽度200px
|
|
|
|
|
- totalMinWidth += 200;
|
|
|
|
|
-
|
|
|
|
|
- // 操作列固定宽度
|
|
|
|
|
- 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`;
|
|
|
|
|
- });
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- // 确保 contractName 保持固定宽度
|
|
|
|
|
- newWidths.contractName = '200px';
|
|
|
|
|
-
|
|
|
|
|
- // 3. 更新列宽配置
|
|
|
|
|
- columnWidths.value = newWidths;
|
|
|
|
|
-
|
|
|
|
|
- // 4. 触发表格重新布局
|
|
|
|
|
- nextTick(() => {
|
|
|
|
|
- tableRef.value?.doLayout();
|
|
|
|
|
- });
|
|
|
|
|
-};
|
|
|
|
|
|
|
+ return {}
|
|
|
|
|
+}
|
|
|
|
|
|
|
|
// 获取工作量统计数据的方法
|
|
// 获取工作量统计数据的方法
|
|
|
const getWorkloadStatistics = async () => {
|
|
const getWorkloadStatistics = async () => {
|
|
@@ -752,7 +869,7 @@ const handleExport = async () => {
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
// 声明 ResizeObserver 实例
|
|
// 声明 ResizeObserver 实例
|
|
|
-let resizeObserver: ResizeObserver | null = null;
|
|
|
|
|
|
|
+let resizeObserver: ResizeObserver | null = null
|
|
|
|
|
|
|
|
/** 初始化 **/
|
|
/** 初始化 **/
|
|
|
onMounted(() => {
|
|
onMounted(() => {
|
|
@@ -761,33 +878,36 @@ onMounted(() => {
|
|
|
if (tableContainerRef.value?.$el) {
|
|
if (tableContainerRef.value?.$el) {
|
|
|
resizeObserver = new ResizeObserver(() => {
|
|
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(() => {
|
|
onUnmounted(() => {
|
|
|
// 清除 ResizeObserver
|
|
// 清除 ResizeObserver
|
|
|
if (resizeObserver && tableContainerRef.value?.$el) {
|
|
if (resizeObserver && tableContainerRef.value?.$el) {
|
|
|
- resizeObserver.unobserve(tableContainerRef.value.$el);
|
|
|
|
|
- resizeObserver = null;
|
|
|
|
|
|
|
+ resizeObserver.unobserve(tableContainerRef.value.$el)
|
|
|
|
|
+ resizeObserver = null
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
// 清除定时器
|
|
// 清除定时器
|
|
|
if ((window as any).resizeTimer) {
|
|
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>
|
|
</script>
|
|
|
|
|
|
|
|
<style scoped>
|
|
<style scoped>
|
|
@@ -832,12 +952,12 @@ watch(list, () => {
|
|
|
/* 颜色说明区域样式 */
|
|
/* 颜色说明区域样式 */
|
|
|
.color-legend {
|
|
.color-legend {
|
|
|
display: flex;
|
|
display: flex;
|
|
|
- flex-direction: column;
|
|
|
|
|
- gap: 8px;
|
|
|
|
|
padding: 12px 16px;
|
|
padding: 12px 16px;
|
|
|
background-color: #f8f9fa;
|
|
background-color: #f8f9fa;
|
|
|
- border-radius: 4px;
|
|
|
|
|
border-left: 4px solid #e6f7ff;
|
|
border-left: 4px solid #e6f7ff;
|
|
|
|
|
+ border-radius: 4px;
|
|
|
|
|
+ flex-direction: column;
|
|
|
|
|
+ gap: 8px;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.legend-item {
|
|
.legend-item {
|
|
@@ -864,28 +984,28 @@ watch(list, () => {
|
|
|
|
|
|
|
|
/* 统计区域未填报链接样式 */
|
|
/* 统计区域未填报链接样式 */
|
|
|
.unfilled-link {
|
|
.unfilled-link {
|
|
|
- cursor: pointer;
|
|
|
|
|
|
|
+ color: #f50;
|
|
|
text-decoration: underline;
|
|
text-decoration: underline;
|
|
|
- color: #FF5500;
|
|
|
|
|
|
|
+ cursor: pointer;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.unfilled-link:hover {
|
|
.unfilled-link:hover {
|
|
|
- color: #ff7733;
|
|
|
|
|
|
|
+ color: #f73;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.unfilled-link.disabled {
|
|
.unfilled-link.disabled {
|
|
|
- cursor: not-allowed;
|
|
|
|
|
|
|
+ color: #ccc;
|
|
|
text-decoration: none;
|
|
text-decoration: none;
|
|
|
- color: #cccccc;
|
|
|
|
|
|
|
+ cursor: not-allowed;
|
|
|
}
|
|
}
|
|
|
</style>
|
|
</style>
|
|
|
|
|
|
|
|
<style>
|
|
<style>
|
|
|
/* 设计井身结构 tooltip 样式 - 保留换行符 */
|
|
/* 设计井身结构 tooltip 样式 - 保留换行符 */
|
|
|
.design-well-struct-tooltip {
|
|
.design-well-struct-tooltip {
|
|
|
- white-space: pre-line;
|
|
|
|
|
max-width: 500px;
|
|
max-width: 500px;
|
|
|
line-height: 1.5;
|
|
line-height: 1.5;
|
|
|
|
|
+ white-space: pre-line;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
/* 统计区域样式 */
|
|
/* 统计区域样式 */
|
|
@@ -896,11 +1016,11 @@ watch(list, () => {
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.stat-item {
|
|
.stat-item {
|
|
|
- flex: 1;
|
|
|
|
|
- text-align: center;
|
|
|
|
|
|
|
+ min-width: 0; /* 防止内容溢出 */
|
|
|
font-size: 16px;
|
|
font-size: 16px;
|
|
|
font-weight: 500;
|
|
font-weight: 500;
|
|
|
- min-width: 0; /* 防止内容溢出 */
|
|
|
|
|
|
|
+ text-align: center;
|
|
|
|
|
+ flex: 1;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
/* 确保统计项内容不换行 */
|
|
/* 确保统计项内容不换行 */
|