123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706 |
- <template>
- <el-row :gutter="20">
- <el-col :span="4" :xs="24">
- <ContentWrap class="h-1/1">
- <DeptTree @node-click="handleDeptNodeClick" />
- </ContentWrap>
- </el-col>
- <el-col :span="20" :xs="24">
- <ContentWrap>
- <!-- 搜索工作栏 -->
- <el-form
- class="-mb-15px"
- :model="queryParams"
- ref="queryFormRef"
- :inline="true"
- label-width="68px"
- >
- <el-form-item label="项目" prop="contractName">
- <el-input
- v-model="queryParams.contractName"
- placeholder="请输入项目"
- clearable
- @keyup.enter="handleQuery"
- class="!w-240px"
- />
- </el-form-item>
- <el-form-item label="任务" prop="taskName">
- <el-input
- v-model="queryParams.taskName"
- placeholder="请输入任务"
- clearable
- @keyup.enter="handleQuery"
- class="!w-240px"
- />
- </el-form-item>
- <el-form-item label="创建时间" prop="createTime">
- <el-date-picker
- v-model="queryParams.createTime"
- 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>
- <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
- <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
- <el-button
- type="primary"
- plain
- @click="openForm('create')"
- v-hasPermi="['pms:iot-rh-daily-report:create']"
- >
- <Icon icon="ep:plus" class="mr-5px" /> 新增
- </el-button>
- <el-button
- type="success"
- plain
- @click="handleExport"
- :loading="exportLoading"
- v-hasPermi="['pms:iot-rh-daily-report:export']"
- >
- <Icon icon="ep:download" class="mr-5px" /> 导出
- </el-button>
- </el-form-item>
- </el-form>
- </ContentWrap>
- <ContentWrap class="mb-15px">
- <div class="color-legend">
- <div class="legend-item">
- <span class="color-indicator red"></span>
- <span>运行时效=当日注气量/产能 超过120%红色预警</span>
- </div>
- <div class="legend-item">
- <span class="color-indicator orange"></span>
- <span>当日注气时间+当日注水时间+非生产时间=24H 否则橙色预警</span>
- </div>
- </div>
- </ContentWrap>
- <!-- 列表 -->
- <ContentWrap ref="tableContainerRef">
- <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">
- <template #default="scope">
- {{ scope.$index + 1 }}
- </template>
- </el-table-column>
- <el-table-column
- label="日期"
- align="center"
- prop="createTime"
- :formatter="dateFormatter"
- :width="columnWidths.createTime"
- />
- <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="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="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">
- <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" :width="columnWidths.productionStatus" fixed-width>
- <template #default="scope">
- <el-tooltip
- effect="light"
- :content="scope.row.productionStatus"
- placement="top"
- popper-class="design-well-struct-tooltip"
- :disabled="!scope.row.productionStatus || scope.row.productionStatus.length <= 30"
- >
- <span class="design-well-struct-text">{{ formatDesignWellStruct(scope.row.productionStatus) }}</span>
- </el-tooltip>
- </template>
- </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">
- <template #default="scope">
- <el-button
- link
- type="primary"
- @click="openForm('update', scope.row.id, scope.row)"
- 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"
- v-model:page="queryParams.pageNo"
- v-model:limit="queryParams.pageSize"
- @pagination="getList"
- />
- </ContentWrap>
- <!-- 表单弹窗:添加/修改 -->
- <IotRhDailyReportForm ref="formRef" @success="getList" :row-data="selectedRowData"/>
- </el-col>
- </el-row>
- </template>
- <script setup lang="ts">
- import {dateFormatter, dateFormatter2} 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'
- import DeptTree from "@/views/system/user/DeptTree.vue";
- /** 瑞恒日报 列表 */
- defineOptions({ name: 'IotRhDailyReport' })
- const message = useMessage() // 消息弹窗
- const { t } = useI18n() // 国际化
- // 添加 selectedRowData 响应式变量
- const selectedRowData = ref<Record<string, any> | null>(null)
- const loading = ref(true) // 列表的加载中
- const list = ref<IotRhDailyReportVO[]>([]) // 列表的数据
- const total = ref(0) // 列表的总页数
- const queryParams = reactive({
- pageNo: 1,
- pageSize: 10,
- deptId: undefined,
- contractName: undefined,
- projectId: undefined,
- taskName: undefined,
- taskId: undefined,
- projectClassification: undefined,
- relocationDays: undefined,
- transitTime: [],
- dailyGasInjection: undefined,
- dailyWaterInjection: undefined,
- dailyPowerUsage: undefined,
- dailyInjectGasTime: [],
- dailyInjectWaterTime: [],
- nonProductionTime: [],
- nptReason: undefined,
- constructionStartDate: [],
- constructionEndDate: [],
- productionStatus: undefined,
- nextPlan: undefined,
- constructionStatus: undefined,
- personnel: undefined,
- totalGasInjection: undefined,
- totalWaterInjection: undefined,
- cumulativeCompletion: undefined,
- extProperty: undefined,
- sort: undefined,
- remark: undefined,
- status: undefined,
- processInstanceId: undefined,
- auditStatus: undefined,
- createTime: [],
- })
- const queryFormRef = ref() // 搜索的表单
- const exportLoading = ref(false) // 导出的加载中
- // 表格引用
- const tableRef = ref()
- // 表格容器引用
- const tableContainerRef = 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 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 formatDesignWellStruct = (text: string | null | undefined) => {
- if (!text) return '-';
- // 如果文本长度超过30个字符,显示前30个字符并添加省略号
- 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 '';
- // 将小数转换为百分比,保留两位小数
- return `${(parseFloat(cellValue) * 100).toFixed(2)}%`;
- };
- // 可伸缩列配置
- 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 () => {
- loading.value = true
- try {
- 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);
- };
- // 检查三个时间字段之和是否为24
- const checkTimeSumEquals24 = (row: any) => {
- // 获取三个字段的值,转换为数字,如果为空则视为0
- const gasTime = parseFloat(row.dailyInjectGasTime) || 0;
- const waterTime = parseFloat(row.dailyInjectWaterTime) || 0;
- const nonProdTime = parseFloat(row.nonProductionTime) || 0;
- // 计算总和
- const sum = gasTime + waterTime + nonProdTime;
- // 返回是否等于24(允许一定的浮点数误差)
- return Math.abs(sum - 24) < 0.01; // 使用0.01作为误差范围
- };
- // 单元格样式函数
- 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' // 可选:加粗以更突出显示
- };
- }
- }
- // 处理三个时间字段:当日注气时间、当日注水时间、非生产时间
- const timeFields = ['dailyInjectGasTime', 'dailyInjectWaterTime', 'nonProductionTime'];
- if (timeFields.includes(column.property)) {
- // 检查三个时间字段之和是否不等于24
- if (!checkTimeSumEquals24(row)) {
- return {
- color: 'orange',
- 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) => row.relocationDays);
- 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();
- });
- };
- /** 搜索按钮操作 */
- const handleQuery = () => {
- queryParams.pageNo = 1
- getList()
- }
- /** 重置按钮操作 */
- const resetQuery = () => {
- queryFormRef.value.resetFields()
- handleQuery()
- }
- /** 添加/修改操作 */
- const formRef = ref()
- const openForm = (type: string, id?: number, row?: any) => {
- // 保存当前行数据
- if (row) {
- selectedRowData.value = {
- deptName: row.deptName,
- contractName: row.contractName,
- taskName: row.taskName,
- relocationDays: row.relocationDays
- }
- } else {
- selectedRowData.value = null
- }
- formRef.value.open(type, id)
- }
- /** 删除按钮操作 */
- const handleDelete = async (id: number) => {
- try {
- // 删除的二次确认
- await message.delConfirm()
- // 发起删除
- await IotRhDailyReportApi.deleteIotRhDailyReport(id)
- message.success(t('common.delSuccess'))
- // 刷新列表
- await getList()
- } catch {}
- }
- // 响应式变量存储选中的部门
- const selectedDept = ref<{ id: number; name: string }>()
- /** 处理部门被点击 */
- const handleDeptNodeClick = async (row) => {
- // 记录选中的部门信息
- selectedDept.value = { id: row.id, name: row.name }
- queryParams.deptId = row.id
- await getList()
- }
- /** 导出按钮操作 */
- const handleExport = async () => {
- try {
- // 导出的二次确认
- await message.exportConfirm()
- // 发起导出
- exportLoading.value = true
- const data = await IotRhDailyReportApi.exportIotRhDailyReport(queryParams)
- download.excel(data, '瑞恒日报.xls')
- } catch {
- } finally {
- exportLoading.value = false
- }
- }
- // 声明 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;
- }
- :deep(.contract-name-column .cell) {
- overflow: hidden !important;
- text-overflow: ellipsis !important;
- white-space: nowrap !important;
- }
- /* 颜色说明区域样式 */
- .color-legend {
- display: flex;
- flex-direction: column;
- gap: 8px;
- padding: 12px 16px;
- background-color: #f8f9fa;
- border-radius: 4px;
- border-left: 4px solid #e6f7ff;
- }
- .legend-item {
- display: flex;
- align-items: center;
- gap: 8px;
- font-size: 14px;
- }
- .color-indicator {
- display: inline-block;
- width: 12px;
- height: 12px;
- border-radius: 50%;
- }
- .color-indicator.red {
- background-color: red;
- }
- .color-indicator.orange {
- background-color: orange;
- }
- </style>
- <style>
- /* 设计井身结构 tooltip 样式 - 保留换行符 */
- .design-well-struct-tooltip {
- white-space: pre-line;
- max-width: 500px;
- line-height: 1.5;
- }
- </style>
|