index.vue 25 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706
  1. <template>
  2. <el-row :gutter="20">
  3. <el-col :span="4" :xs="24">
  4. <ContentWrap class="h-1/1">
  5. <DeptTree @node-click="handleDeptNodeClick" />
  6. </ContentWrap>
  7. </el-col>
  8. <el-col :span="20" :xs="24">
  9. <ContentWrap>
  10. <!-- 搜索工作栏 -->
  11. <el-form
  12. class="-mb-15px"
  13. :model="queryParams"
  14. ref="queryFormRef"
  15. :inline="true"
  16. label-width="68px"
  17. >
  18. <el-form-item label="项目" prop="contractName">
  19. <el-input
  20. v-model="queryParams.contractName"
  21. placeholder="请输入项目"
  22. clearable
  23. @keyup.enter="handleQuery"
  24. class="!w-240px"
  25. />
  26. </el-form-item>
  27. <el-form-item label="任务" prop="taskName">
  28. <el-input
  29. v-model="queryParams.taskName"
  30. placeholder="请输入任务"
  31. clearable
  32. @keyup.enter="handleQuery"
  33. class="!w-240px"
  34. />
  35. </el-form-item>
  36. <el-form-item label="创建时间" prop="createTime">
  37. <el-date-picker
  38. v-model="queryParams.createTime"
  39. value-format="YYYY-MM-DD HH:mm:ss"
  40. type="daterange"
  41. start-placeholder="开始日期"
  42. end-placeholder="结束日期"
  43. :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
  44. class="!w-220px"
  45. />
  46. </el-form-item>
  47. <el-form-item>
  48. <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
  49. <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
  50. <el-button
  51. type="primary"
  52. plain
  53. @click="openForm('create')"
  54. v-hasPermi="['pms:iot-rh-daily-report:create']"
  55. >
  56. <Icon icon="ep:plus" class="mr-5px" /> 新增
  57. </el-button>
  58. <el-button
  59. type="success"
  60. plain
  61. @click="handleExport"
  62. :loading="exportLoading"
  63. v-hasPermi="['pms:iot-rh-daily-report:export']"
  64. >
  65. <Icon icon="ep:download" class="mr-5px" /> 导出
  66. </el-button>
  67. </el-form-item>
  68. </el-form>
  69. </ContentWrap>
  70. <ContentWrap class="mb-15px">
  71. <div class="color-legend">
  72. <div class="legend-item">
  73. <span class="color-indicator red"></span>
  74. <span>运行时效=当日注气量/产能&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;超过120%红色预警</span>
  75. </div>
  76. <div class="legend-item">
  77. <span class="color-indicator orange"></span>
  78. <span>当日注气时间+当日注水时间+非生产时间=24H&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;否则橙色预警</span>
  79. </div>
  80. </div>
  81. </ContentWrap>
  82. <!-- 列表 -->
  83. <ContentWrap ref="tableContainerRef">
  84. <div class="table-container">
  85. <el-table ref="tableRef" v-loading="loading" :data="list" :stripe="true"
  86. style="width: 100%" :cell-style="cellStyle">
  87. <el-table-column :label="t('iotDevice.serial')" width="70" align="center">
  88. <template #default="scope">
  89. {{ scope.$index + 1 }}
  90. </template>
  91. </el-table-column>
  92. <el-table-column
  93. label="日期"
  94. align="center"
  95. prop="createTime"
  96. :formatter="dateFormatter"
  97. :width="columnWidths.createTime"
  98. />
  99. <el-table-column label="施工队伍" align="center" prop="deptName" :width="columnWidths.deptName"/>
  100. <el-table-column label="项目" align="center" prop="contractName" :width="columnWidths.contractName"
  101. :show-overflow-tooltip="true" class-name="contract-name-column"/>
  102. <el-table-column label="任务" align="center" prop="taskName" :width="columnWidths.taskName"/>
  103. <!-- <el-table-column label="施工状态" align="center" prop="constructionStatus" /> -->
  104. <el-table-column :label="t('project.status')" align="center" prop="constructionStatus" :width="columnWidths.constructionStatus">
  105. <template #default="scope">
  106. <dict-tag :type="DICT_TYPE.PMS_PROJECT_TASK_SCHEDULE" :value="scope.row.constructionStatus" />
  107. </template>
  108. </el-table-column>
  109. <el-table-column label="搬迁安装天数" align="center" prop="relocationDays" :width="columnWidths.relocationDays"/>
  110. <el-table-column label="设计注气量(万方)" align="center" prop="designInjection" :width="columnWidths.designInjection"/>
  111. <el-table-column label="运行时效" align="center" prop="transitTime" :width="columnWidths.transitTime" :formatter="percentageFormatter"/>
  112. <el-table-column label="当日注气量(万方)" align="center" prop="dailyGasInjection"
  113. :width="columnWidths.dailyGasInjection" :formatter="gasInjectionFormatter"/>
  114. <el-table-column label="当日注水量(方)" align="center" prop="dailyWaterInjection" :width="columnWidths.dailyWaterInjection"/>
  115. <el-table-column label="当日注气时间(H)" align="center" prop="dailyInjectGasTime" :width="columnWidths.dailyInjectGasTime"/>
  116. <el-table-column label="当日注水时间(H)" align="center" prop="dailyInjectWaterTime" :width="columnWidths.dailyInjectWaterTime"/>
  117. <el-table-column label="当日用电量(kWh)" align="center" prop="dailyPowerUsage" :width="columnWidths.dailyPowerUsage"/>
  118. <el-table-column label="非生产时间(H)" align="center" prop="nonProductionTime" :width="columnWidths.nonProductionTime"/>
  119. <el-table-column :label="t('project.nptReason')" align="center" prop="nptReason" :width="columnWidths.nptReason">
  120. <template #default="scope">
  121. <dict-tag :type="DICT_TYPE.PMS_PROJECT_NPT_REASON" :value="scope.row.nptReason" />
  122. </template>
  123. </el-table-column>
  124. <el-table-column
  125. label="施工开始日期"
  126. align="center"
  127. prop="constructionStartDate"
  128. :formatter="dateFormatter"
  129. :width="columnWidths.constructionStartDate"
  130. />
  131. <el-table-column
  132. label="施工结束日期"
  133. align="center"
  134. prop="constructionEndDate"
  135. :formatter="dateFormatter"
  136. :width="columnWidths.constructionEndDate"
  137. />
  138. <el-table-column label="生产动态" align="center" :width="columnWidths.productionStatus" fixed-width>
  139. <template #default="scope">
  140. <el-tooltip
  141. effect="light"
  142. :content="scope.row.productionStatus"
  143. placement="top"
  144. popper-class="design-well-struct-tooltip"
  145. :disabled="!scope.row.productionStatus || scope.row.productionStatus.length <= 30"
  146. >
  147. <span class="design-well-struct-text">{{ formatDesignWellStruct(scope.row.productionStatus) }}</span>
  148. </el-tooltip>
  149. </template>
  150. </el-table-column>
  151. <el-table-column label="累计注气量(万方)" align="center" prop="totalGasInjection"
  152. :width="columnWidths.totalGasInjection" :formatter="gasInjectionFormatter"/>
  153. <el-table-column label="累计注水量(方)" align="center" prop="totalWaterInjection" :width="columnWidths.totalWaterInjection"/>
  154. <el-table-column label="累计完工井次" align="center" prop="cumulativeCompletion" :width="columnWidths.cumulativeCompletion"/>
  155. <el-table-column label="产能(万方)" align="center" prop="capacity" :width="columnWidths.capacity" :formatter="gasInjectionFormatter"/>
  156. <el-table-column label="操作" align="center" :width="columnWidths.operation" fixed="right">
  157. <template #default="scope">
  158. <el-button
  159. link
  160. type="primary"
  161. @click="openForm('update', scope.row.id, scope.row)"
  162. v-hasPermi="['pms:iot-rh-daily-report:update']"
  163. >
  164. 编辑
  165. </el-button>
  166. <el-button
  167. link
  168. type="danger"
  169. @click="handleDelete(scope.row.id)"
  170. v-hasPermi="['pms:iot-rh-daily-report:delete']"
  171. >
  172. 删除
  173. </el-button>
  174. </template>
  175. </el-table-column>
  176. </el-table>
  177. </div>
  178. <!-- 分页 -->
  179. <Pagination
  180. :total="total"
  181. v-model:page="queryParams.pageNo"
  182. v-model:limit="queryParams.pageSize"
  183. @pagination="getList"
  184. />
  185. </ContentWrap>
  186. <!-- 表单弹窗:添加/修改 -->
  187. <IotRhDailyReportForm ref="formRef" @success="getList" :row-data="selectedRowData"/>
  188. </el-col>
  189. </el-row>
  190. </template>
  191. <script setup lang="ts">
  192. import {dateFormatter, dateFormatter2} from '@/utils/formatTime'
  193. import download from '@/utils/download'
  194. import { IotRhDailyReportApi, IotRhDailyReportVO } from '@/api/pms/iotrhdailyreport'
  195. import IotRhDailyReportForm from './IotRhDailyReportForm.vue'
  196. import {DICT_TYPE, getDictLabel} from "@/utils/dict";
  197. import { ref, reactive, onMounted, nextTick, watch, onUnmounted } from 'vue'
  198. import DeptTree from "@/views/system/user/DeptTree.vue";
  199. /** 瑞恒日报 列表 */
  200. defineOptions({ name: 'IotRhDailyReport' })
  201. const message = useMessage() // 消息弹窗
  202. const { t } = useI18n() // 国际化
  203. // 添加 selectedRowData 响应式变量
  204. const selectedRowData = ref<Record<string, any> | null>(null)
  205. const loading = ref(true) // 列表的加载中
  206. const list = ref<IotRhDailyReportVO[]>([]) // 列表的数据
  207. const total = ref(0) // 列表的总页数
  208. const queryParams = reactive({
  209. pageNo: 1,
  210. pageSize: 10,
  211. deptId: undefined,
  212. contractName: undefined,
  213. projectId: undefined,
  214. taskName: undefined,
  215. taskId: undefined,
  216. projectClassification: undefined,
  217. relocationDays: undefined,
  218. transitTime: [],
  219. dailyGasInjection: undefined,
  220. dailyWaterInjection: undefined,
  221. dailyPowerUsage: undefined,
  222. dailyInjectGasTime: [],
  223. dailyInjectWaterTime: [],
  224. nonProductionTime: [],
  225. nptReason: undefined,
  226. constructionStartDate: [],
  227. constructionEndDate: [],
  228. productionStatus: undefined,
  229. nextPlan: undefined,
  230. constructionStatus: undefined,
  231. personnel: undefined,
  232. totalGasInjection: undefined,
  233. totalWaterInjection: undefined,
  234. cumulativeCompletion: undefined,
  235. extProperty: undefined,
  236. sort: undefined,
  237. remark: undefined,
  238. status: undefined,
  239. processInstanceId: undefined,
  240. auditStatus: undefined,
  241. createTime: [],
  242. })
  243. const queryFormRef = ref() // 搜索的表单
  244. const exportLoading = ref(false) // 导出的加载中
  245. // 表格引用
  246. const tableRef = ref()
  247. // 表格容器引用
  248. const tableContainerRef = ref()
  249. // 列宽度配置
  250. const columnWidths = ref({
  251. deptName: '120px',
  252. contractName: '200px',
  253. taskName: '120px',
  254. constructionStatus: '110px',
  255. relocationDays: '120px',
  256. designInjection: '120px',
  257. transitTime: '100px',
  258. dailyGasInjection: '150px',
  259. dailyWaterInjection: '150px',
  260. dailyPowerUsage: '150px',
  261. dailyInjectGasTime: '150px',
  262. dailyInjectWaterTime: '150px',
  263. nonProductionTime: '150px',
  264. nptReason: '150px',
  265. constructionStartDate: '180px',
  266. constructionEndDate: '180px',
  267. productionStatus: '200px',
  268. totalGasInjection: '150px',
  269. totalWaterInjection: '150px',
  270. cumulativeCompletion: '150px',
  271. capacity: '120px',
  272. createTime: '180px',
  273. operation: '120px'
  274. })
  275. // 计算文本宽度
  276. const getTextWidth = (text: string, fontSize = 14) => {
  277. const span = document.createElement('span');
  278. span.style.visibility = 'hidden';
  279. span.style.position = 'absolute';
  280. span.style.whiteSpace = 'nowrap';
  281. span.style.fontSize = `${fontSize}px`;
  282. span.style.fontFamily = 'inherit';
  283. span.innerText = text;
  284. document.body.appendChild(span);
  285. const width = span.offsetWidth;
  286. document.body.removeChild(span);
  287. return width;
  288. };
  289. // 格式化设计井身结构文本
  290. const formatDesignWellStruct = (text: string | null | undefined) => {
  291. if (!text) return '-';
  292. // 如果文本长度超过30个字符,显示前30个字符并添加省略号
  293. return text.length > 30 ? text.substring(0, 30) + '...' : text;
  294. };
  295. // 百分比格式化函数
  296. const percentageFormatter = (row: any, column: any, cellValue: any, index: number) => {
  297. if (cellValue === null || cellValue === undefined) return '';
  298. // 将小数转换为百分比,保留两位小数
  299. return `${(parseFloat(cellValue) * 100).toFixed(2)}%`;
  300. };
  301. // 可伸缩列配置
  302. const FLEXIBLE_COLUMNS = ['deptName', 'taskName', 'constructionStatus', 'relocationDays', 'designInjection',
  303. 'transitTime', 'dailyGasInjection', 'dailyWaterInjection', 'dailyPowerUsage', 'dailyInjectGasTime',
  304. 'dailyInjectWaterTime', 'nonProductionTime', 'nptReason', 'constructionStartDate',
  305. 'constructionEndDate', 'productionStatus', 'totalGasInjection', 'totalWaterInjection',
  306. 'cumulativeCompletion', 'createTime'];
  307. /** 查询列表 */
  308. const getList = async () => {
  309. loading.value = true
  310. try {
  311. const data = await IotRhDailyReportApi.getIotRhDailyReportPage(queryParams)
  312. list.value = data.list
  313. total.value = data.total
  314. // 获取数据后计算列宽
  315. nextTick(() => {
  316. calculateColumnWidths();
  317. });
  318. } finally {
  319. loading.value = false
  320. }
  321. }
  322. // 注气量格式化函数(单位转换:方 -> 万方)
  323. const gasInjectionFormatter = (row: any, column: any, cellValue: any, index: number) => {
  324. if (cellValue === null || cellValue === undefined || cellValue === '') return '';
  325. // 将方转换为万方,保留两位小数
  326. const value = parseFloat(cellValue);
  327. return (value / 10000).toFixed(2);
  328. };
  329. // 检查三个时间字段之和是否为24
  330. const checkTimeSumEquals24 = (row: any) => {
  331. // 获取三个字段的值,转换为数字,如果为空则视为0
  332. const gasTime = parseFloat(row.dailyInjectGasTime) || 0;
  333. const waterTime = parseFloat(row.dailyInjectWaterTime) || 0;
  334. const nonProdTime = parseFloat(row.nonProductionTime) || 0;
  335. // 计算总和
  336. const sum = gasTime + waterTime + nonProdTime;
  337. // 返回是否等于24(允许一定的浮点数误差)
  338. return Math.abs(sum - 24) < 0.01; // 使用0.01作为误差范围
  339. };
  340. // 单元格样式函数
  341. const cellStyle = ({ row, column, rowIndex, columnIndex }: { row: any; column: any; rowIndex: number; columnIndex: number }) => {
  342. // 只针对 transitTime 列进行处理
  343. if (column.property === 'transitTime') {
  344. // 获取原始值(不是格式化后的百分比值)
  345. const originalValue = row.transitTime;
  346. // 检查值是否大于120
  347. if (originalValue !== null && originalValue !== undefined && parseFloat(originalValue) > 1.2) {
  348. return {
  349. color: 'red',
  350. fontWeight: 'bold' // 可选:加粗以更突出显示
  351. };
  352. }
  353. }
  354. // 处理三个时间字段:当日注气时间、当日注水时间、非生产时间
  355. const timeFields = ['dailyInjectGasTime', 'dailyInjectWaterTime', 'nonProductionTime'];
  356. if (timeFields.includes(column.property)) {
  357. // 检查三个时间字段之和是否不等于24
  358. if (!checkTimeSumEquals24(row)) {
  359. return {
  360. color: 'orange',
  361. fontWeight: 'bold'
  362. };
  363. }
  364. }
  365. // 默认返回空对象,不应用特殊样式
  366. return {};
  367. };
  368. // 计算列宽度
  369. const calculateColumnWidths = () => {
  370. const MIN_WIDTH = 80; // 最小列宽
  371. const PADDING = 25; // 列内边距
  372. // 确保表格容器存在
  373. if (!tableContainerRef.value?.$el) return;
  374. const container = tableContainerRef.value.$el;
  375. const containerWidth = container.clientWidth;
  376. // 1. 计算所有列的最小宽度
  377. const minWidths: Record<string, number> = {};
  378. let totalMinWidth = 0;
  379. // 计算列最小宽度的函数
  380. const calculateColumnMinWidth = (key: string, label: string, getValue: Function) => {
  381. // 跳过 contractName 列的计算,使用固定宽度
  382. if (key === 'contractName') {
  383. minWidths[key] = 200; // 固定宽度
  384. totalMinWidth += 200;
  385. return 200;
  386. }
  387. const headerWidth = getTextWidth(label) * 1.2;
  388. let contentMaxWidth = 0;
  389. // 计算内容最大宽度
  390. list.value.forEach((row, index) => {
  391. let text = '';
  392. if (key === 'constructionStatus') {
  393. // 特殊处理字典列
  394. const dictValue = row[key];
  395. // 这里需要根据实际情况获取字典标签,简化处理使用值本身
  396. text = String(dictValue || '');
  397. } else if (key === 'nptReason') {
  398. // 非生产时间原因
  399. text = getDictLabel(DICT_TYPE.PMS_PROJECT_NPT_REASON, row[key]);
  400. } else if (key.includes('Date') || key === 'createTime') {
  401. // 日期列使用格式化后的值
  402. text = dateFormatter(null, null, row[key]) || '';
  403. } else {
  404. text = String(getValue ? getValue(row, index) : (row[key] || ''));
  405. }
  406. const textWidth = getTextWidth(text);
  407. if (textWidth > contentMaxWidth) contentMaxWidth = textWidth;
  408. });
  409. const minWidth = Math.max(headerWidth, contentMaxWidth, MIN_WIDTH) + PADDING;
  410. minWidths[key] = minWidth;
  411. totalMinWidth += minWidth;
  412. return minWidth;
  413. };
  414. // 计算各列最小宽度
  415. calculateColumnMinWidth('deptName', '施工队伍', (row: any) => row.deptName);
  416. calculateColumnMinWidth('contractName', '项目', (row: any) => row.contractName);
  417. calculateColumnMinWidth('taskName', '任务', (row: any) => row.taskName);
  418. calculateColumnMinWidth('constructionStatus', t('project.status'), (row: any) => {
  419. // 这里可以获取字典标签,简化处理使用值本身
  420. return String(row.constructionStatus || '');
  421. });
  422. calculateColumnMinWidth('relocationDays', '搬迁安装天数', (row: any) => row.relocationDays);
  423. calculateColumnMinWidth('designInjection', '设计注气量(万方)', (row: any) => row.designInjection);
  424. calculateColumnMinWidth('transitTime', '运行时效', (row: any) => row.transitTime);
  425. calculateColumnMinWidth('dailyGasInjection', '当日注气量(万方)', (row: any) => row.dailyGasInjection);
  426. calculateColumnMinWidth('dailyWaterInjection', '当日注水量(方)', (row: any) => row.dailyWaterInjection);
  427. calculateColumnMinWidth('dailyPowerUsage', '当日用电量(kWh)', (row: any) => row.dailyPowerUsage);
  428. calculateColumnMinWidth('dailyInjectGasTime', '当日注气时间(H)', (row: any) => row.dailyInjectGasTime);
  429. calculateColumnMinWidth('dailyInjectWaterTime', '当日注水时间(H)', (row: any) => row.dailyInjectWaterTime);
  430. calculateColumnMinWidth('nonProductionTime', '非生产时间(H)', (row: any) => row.nonProductionTime);
  431. calculateColumnMinWidth('nptReason', t('project.nptReason'), (row: any) => row.nptReason);
  432. calculateColumnMinWidth('constructionStartDate', '施工开始日期', (row: any) => dateFormatter(null, null, row.constructionStartDate));
  433. calculateColumnMinWidth('constructionEndDate', '施工结束日期', (row: any) => dateFormatter(null, null, row.constructionEndDate));
  434. calculateColumnMinWidth('productionStatus', '生产动态', (row: any) => row.productionStatus);
  435. calculateColumnMinWidth('totalGasInjection', '累计注气量(万方)', (row: any) => row.totalGasInjection);
  436. calculateColumnMinWidth('totalWaterInjection', '累计注水量(方)', (row: any) => row.totalWaterInjection);
  437. calculateColumnMinWidth('cumulativeCompletion', '累计完工井次', (row: any) => row.cumulativeCompletion);
  438. calculateColumnMinWidth('capacity', '产能(万方)', (row: any) => row.capacity);
  439. calculateColumnMinWidth('createTime', '创建时间', (row: any) => dateFormatter(null, null, row.createTime));
  440. // 生产动态 列使用固定宽度,不参与自动计算
  441. minWidths.productionStatus = 200; // 固定宽度200px
  442. totalMinWidth += 200;
  443. // 操作列固定宽度
  444. minWidths.operation = 120;
  445. totalMinWidth += 120;
  446. // 2. 计算可伸缩列最终宽度
  447. const newWidths: Record<string, string> = {};
  448. const availableWidth = containerWidth - 17; // 减去滚动条宽度
  449. // 应用最小宽度到所有列
  450. Object.keys(minWidths).forEach(key => {
  451. newWidths[key] = `${minWidths[key]}px`;
  452. });
  453. // 计算可伸缩列需要的宽度
  454. if (totalMinWidth < availableWidth) {
  455. // 有剩余空间:按比例分配给可伸缩列
  456. const extraSpace = availableWidth - totalMinWidth;
  457. const flexibleColumnCount = FLEXIBLE_COLUMNS.length;
  458. const spacePerColumn = Math.floor(extraSpace / flexibleColumnCount);
  459. FLEXIBLE_COLUMNS.forEach(key => {
  460. newWidths[key] = `${minWidths[key] + spacePerColumn}px`;
  461. });
  462. }
  463. // 确保 contractName 保持固定宽度
  464. newWidths.contractName = '200px';
  465. // 3. 更新列宽配置
  466. columnWidths.value = newWidths;
  467. // 4. 触发表格重新布局
  468. nextTick(() => {
  469. tableRef.value?.doLayout();
  470. });
  471. };
  472. /** 搜索按钮操作 */
  473. const handleQuery = () => {
  474. queryParams.pageNo = 1
  475. getList()
  476. }
  477. /** 重置按钮操作 */
  478. const resetQuery = () => {
  479. queryFormRef.value.resetFields()
  480. handleQuery()
  481. }
  482. /** 添加/修改操作 */
  483. const formRef = ref()
  484. const openForm = (type: string, id?: number, row?: any) => {
  485. // 保存当前行数据
  486. if (row) {
  487. selectedRowData.value = {
  488. deptName: row.deptName,
  489. contractName: row.contractName,
  490. taskName: row.taskName,
  491. relocationDays: row.relocationDays
  492. }
  493. } else {
  494. selectedRowData.value = null
  495. }
  496. formRef.value.open(type, id)
  497. }
  498. /** 删除按钮操作 */
  499. const handleDelete = async (id: number) => {
  500. try {
  501. // 删除的二次确认
  502. await message.delConfirm()
  503. // 发起删除
  504. await IotRhDailyReportApi.deleteIotRhDailyReport(id)
  505. message.success(t('common.delSuccess'))
  506. // 刷新列表
  507. await getList()
  508. } catch {}
  509. }
  510. // 响应式变量存储选中的部门
  511. const selectedDept = ref<{ id: number; name: string }>()
  512. /** 处理部门被点击 */
  513. const handleDeptNodeClick = async (row) => {
  514. // 记录选中的部门信息
  515. selectedDept.value = { id: row.id, name: row.name }
  516. queryParams.deptId = row.id
  517. await getList()
  518. }
  519. /** 导出按钮操作 */
  520. const handleExport = async () => {
  521. try {
  522. // 导出的二次确认
  523. await message.exportConfirm()
  524. // 发起导出
  525. exportLoading.value = true
  526. const data = await IotRhDailyReportApi.exportIotRhDailyReport(queryParams)
  527. download.excel(data, '瑞恒日报.xls')
  528. } catch {
  529. } finally {
  530. exportLoading.value = false
  531. }
  532. }
  533. // 声明 ResizeObserver 实例
  534. let resizeObserver: ResizeObserver | null = null;
  535. /** 初始化 **/
  536. onMounted(() => {
  537. getList()
  538. // 创建 ResizeObserver 监听表格容器尺寸变化
  539. if (tableContainerRef.value?.$el) {
  540. resizeObserver = new ResizeObserver(() => {
  541. // 使用防抖避免频繁触发
  542. clearTimeout((window as any).resizeTimer);
  543. (window as any).resizeTimer = setTimeout(() => {
  544. calculateColumnWidths();
  545. }, 100);
  546. });
  547. resizeObserver.observe(tableContainerRef.value.$el);
  548. }
  549. })
  550. onUnmounted(() => {
  551. // 清除 ResizeObserver
  552. if (resizeObserver && tableContainerRef.value?.$el) {
  553. resizeObserver.unobserve(tableContainerRef.value.$el);
  554. resizeObserver = null;
  555. }
  556. // 清除定时器
  557. if ((window as any).resizeTimer) {
  558. clearTimeout((window as any).resizeTimer);
  559. }
  560. })
  561. // 监听列表数据变化重新计算列宽
  562. watch(list, () => {
  563. nextTick(calculateColumnWidths)
  564. }, { deep: true })
  565. </script>
  566. <style scoped>
  567. /* 表格容器样式,确保水平滚动 */
  568. .table-container {
  569. width: 100%;
  570. overflow-x: auto;
  571. }
  572. /* 确保表格单元格内容不换行 */
  573. :deep(.el-table .cell) {
  574. white-space: nowrap;
  575. }
  576. /* 确保表格列标题不换行 */
  577. :deep(.el-table th > .cell) {
  578. white-space: nowrap;
  579. }
  580. /* 调整表格最小宽度,确保内容完全显示 */
  581. :deep(.el-table) {
  582. min-width: 100%;
  583. }
  584. /* 强制显示所有内容,防止省略号 */
  585. :deep(.el-table td.el-table__cell),
  586. :deep(.el-table th.el-table__cell) {
  587. overflow: visible !important;
  588. }
  589. :deep(.el-table .cell) {
  590. overflow: visible !important;
  591. text-overflow: clip !important;
  592. }
  593. :deep(.contract-name-column .cell) {
  594. overflow: hidden !important;
  595. text-overflow: ellipsis !important;
  596. white-space: nowrap !important;
  597. }
  598. /* 颜色说明区域样式 */
  599. .color-legend {
  600. display: flex;
  601. flex-direction: column;
  602. gap: 8px;
  603. padding: 12px 16px;
  604. background-color: #f8f9fa;
  605. border-radius: 4px;
  606. border-left: 4px solid #e6f7ff;
  607. }
  608. .legend-item {
  609. display: flex;
  610. align-items: center;
  611. gap: 8px;
  612. font-size: 14px;
  613. }
  614. .color-indicator {
  615. display: inline-block;
  616. width: 12px;
  617. height: 12px;
  618. border-radius: 50%;
  619. }
  620. .color-indicator.red {
  621. background-color: red;
  622. }
  623. .color-indicator.orange {
  624. background-color: orange;
  625. }
  626. </style>
  627. <style>
  628. /* 设计井身结构 tooltip 样式 - 保留换行符 */
  629. .design-well-struct-tooltip {
  630. white-space: pre-line;
  631. max-width: 500px;
  632. line-height: 1.5;
  633. }
  634. </style>