pms-iot-vue/src/views/pms/iotrhdailyreport/index.vue

<template>
  <el-row :gutter="20" class="h-full">
    <el-col :span="4" :xs="24">
      <div class="bg-white dark:bg-[#1d1e1f] rounded-lg shadow p-4 h-full">
        <DeptTreeSelect
          :deptId="rootDeptId"
          :top-id="157"
          v-model="queryParams.deptId"
          @node-click="handleDeptNodeClick"
        />
      </div>

      <!-- <DeptTree2 :deptId="rootDeptId" @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')]"
              :shortcuts="rangeShortcuts"
              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="statistics-container">
          <div class="stat-item" :style="{ color: totalColor }">
            <span>总数：</span>
            <span>{{ statistics.total || '-' }}</span>
          </div>
          <div class="stat-item" :style="{ color: filledColor }">
            <span>已填报：</span>
            <span>{{ statistics.filled || '-' }}</span>
          </div>
          <div class="stat-item" :style="{ color: unFilledColor }">
            <span>未填报：</span>
            <span
              class="unfilled-link"
              @click="openUnfilledDialog"
              :class="{ disabled: !queryParams.createTime || queryParams.createTime.length === 0 }"
            >
              {{ statistics.unFilled || '-' }}
            </span>
          </div>
          <div class="stat-item" :style="{ color: '#0099CC' }">
            <span>累计注水量(方)：</span>
            <span>{{ statistics.totalWaterInjection || '-' }}</span>
          </div>
          <div class="stat-item" :style="{ color: '#FF9900' }">
            <span>累计注气量(万方)：</span>
            <span>{{ statistics.totalGasInjection || '-' }}</span>
          </div>
        </div>
      </ContentWrap>

      <ContentWrap class="mb-15px">
        <div class="color-legend">
          <div class="legend-item">
            <span class="color-indicator red"></span>
            <span
              >运行时效=当日注气量/产能&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;超过120%红色预警</span
            >
          </div>
          <!-- <div class="legend-item">
            <span class="color-indicator orange"></span>
            <span
              >当日注气时间+当日注水时间+非生产时间=24H&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;否则橙色预警</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%' }"
            max-height="600"
            :cell-style="cellStyle"
            show-overflow-tooltip
            border
          >
            <el-table-column
              :label="t('iotDevice.serial')"
              width="56px"
              align="center"
              fixed="left"
            >
              <template #default="scope">
                {{ scope.$index + 1 }}
              </template>
            </el-table-column>
            <el-table-column
              label="日期"
              align="center"
              prop="createTime"
              :formatter="dateFormatter2"
              :min-width="columnWidths.createTime.width"
              resizable
              fixed="left"
            />
            <el-table-column
              label="施工队伍"
              align="center"
              prop="deptName"
              :min-width="columnWidths.deptName.width"
              resizable
              fixed="left"
            />
            <el-table-column
              label="任务"
              align="center"
              prop="taskName"
              :min-width="columnWidths.taskName.width"
              resizable
              fixed="left"
            />
            <!-- <el-table-column label="施工状态" align="center" prop="constructionStatus" /> -->
            <el-table-column
              :label="t('project.status')"
              align="center"
              prop="constructionStatus"
              :min-width="columnWidths.constructionStatus.width"
              resizable
              fixed="left"
            >
              <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"
              :formatter="relocationDaysFormatter"
              :min-width="columnWidths.relocationDays.width"
              resizable
            />
            <el-table-column
              label="设计注气量(万方)"
              align="center"
              prop="designInjection"
              :min-width="columnWidths.designInjection.width"
              resizable
            />
            <el-table-column
              label="运行时效"
              align="center"
              prop="transitTime"
              :formatter="percentageFormatter"
              :min-width="columnWidths.transitTime.width"
              resizable
            />
            <el-table-column label="当日" align="center">
              <el-table-column
                label="注气量(万方)"
                align="center"
                prop="dailyGasInjection"
                :formatter="gasInjectionFormatter"
                :min-width="columnWidths.dailyGasInjection.width"
                resizable
              />
              <el-table-column
                label="注水量(方)"
                align="center"
                prop="dailyWaterInjection"
                :min-width="columnWidths.dailyWaterInjection.width"
                resizable
              />
              <el-table-column
                label="注气时间(H)"
                align="center"
                prop="dailyInjectGasTime"
                :min-width="columnWidths.dailyInjectGasTime.width"
                resizable
              />
              <el-table-column
                label="注水时间(H)"
                align="center"
                prop="dailyInjectWaterTime"
                :min-width="columnWidths.dailyInjectWaterTime.width"
                resizable
              />
              <el-table-column
                label="用电量(kWh)"
                align="center"
                prop="dailyPowerUsage"
                :min-width="columnWidths.dailyPowerUsage.width"
                resizable
              />
              <el-table-column
                label="油耗(L)"
                align="center"
                prop="dailyOilUsage"
                :min-width="columnWidths.dailyOilUsage.width"
                resizable
              />
            </el-table-column>
            <el-table-column
              label="非生产时间(H)"
              align="center"
              prop="nonProductionTime"
              :min-width="columnWidths.nonProductionTime.width"
              resizable
            />
            <el-table-column
              :label="t('project.nptReason')"
              align="center"
              prop="nptReason"
              :min-width="columnWidths.nptReason.width"
              resizable
            >
              <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"
              :min-width="columnWidths.constructionStartDate.width"
              resizable
            />
            <el-table-column
              label="施工结束日期"
              align="center"
              prop="constructionEndDate"
              :formatter="dateFormatter"
              :min-width="columnWidths.constructionEndDate.width"
              resizable
            /> -->
            <el-table-column
              label="生产动态"
              align="center"
              :min-width="columnWidths.productionStatus.width"
              prop="productionStatus"
              resizable
            />
            <el-table-column
              label="项目"
              align="center"
              prop="contractName"
              class-name="contract-name-column"
              :min-width="columnWidths.contractName.width"
              resizable
            />
            <el-table-column label="井累计" align="center">
              <el-table-column
                label="注气量(万方)"
                align="center"
                prop="wellTotalGasInjection"
                :formatter="gasInjectionFormatter"
                :min-width="columnWidths.totalGasInjection.width"
                resizable
              />
              <el-table-column
                label="注水量(方)"
                align="center"
                prop="wellTotalWaterInjection"
                :min-width="columnWidths.totalWaterInjection.width"
                resizable
              />
              <el-table-column
                label="用电量(万千瓦时)"
                align="center"
                prop="wellTotalPower"
                :formatter="gasInjectionFormatter"
                :min-width="columnWidths.yearTotalPower.width"
                resizable
              />
              <el-table-column
                label="油耗(L)"
                align="center"
                prop="wellTotalFuel"
                :min-width="columnWidths.cumulativeCompletion.width"
                resizable
              />
            </el-table-column>
            <el-table-column label="年累计" align="center">
              <el-table-column
                label="注气量(万方)"
                align="center"
                prop="yearTotalGasInjection"
                :formatter="gasInjectionFormatter"
                :min-width="columnWidths.totalGasInjection.width"
                resizable
              />
              <el-table-column
                label="注水量(方)"
                align="center"
                prop="yearTotalWaterInjection"
                :min-width="columnWidths.totalWaterInjection.width"
                resizable
              />
              <el-table-column
                label="用电量(万千瓦时)"
                align="center"
                prop="yearTotalPower"
                :formatter="gasInjectionFormatter"
                :min-width="columnWidths.yearTotalPower.width"
                resizable
              />
              <el-table-column
                label="油耗(L)"
                align="center"
                prop="yearTotalFuel"
                :min-width="columnWidths.cumulativeCompletion.width"
                resizable
              />
            </el-table-column>
            <el-table-column
              label="产能(万方)"
              align="center"
              prop="capacity"
              :formatter="gasInjectionFormatter"
              :min-width="columnWidths.capacity.width"
              resizable
            />
            <!-- <el-table-column label="操作" align="center" 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" />

      <UnfilledReportDialog
        ref="unfilledDialogRef"
        :query-params="queryParams"
        @close="handleUnfilledDialogClose"
      />
    </el-col>
  </el-row>
</template>

<script setup lang="ts">
import { dateFormatter, dateFormatter2, rangeShortcuts } from '@/utils/formatTime'
import download from '@/utils/download'
import { IotRhDailyReportApi, IotRhDailyReportVO } from '@/api/pms/iotrhdailyreport'
import IotRhDailyReportForm from './IotRhDailyReportForm.vue'
import UnfilledReportDialog from './UnfilledReportDialog.vue'
import { DICT_TYPE } from '@/utils/dict'
import { ref, reactive, onMounted, onUnmounted } from 'vue'
import { useDebounceFn } from '@vueuse/core'
import quarterOfYear from 'dayjs/plugin/quarterOfYear'
import dayjs from 'dayjs'

import { useUserStore } from '@/store/modules/user'

dayjs.extend(quarterOfYear)

/** 瑞恒日报 列表 */
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) // 列表的总页数
let queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  deptId: useUserStore().getUser.deptId,
  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: [
    ...rangeShortcuts[2].value().map((item) => dayjs(item).format('YYYY-MM-DD HH:mm:ss'))
  ]
})
const queryFormRef = ref() // 搜索的表单
const exportLoading = ref(false) // 导出的加载中
// 添加弹窗引用
const unfilledDialogRef = ref()

const rootDeptId = ref(useUserStore().getUser.deptId)

// 新增统计相关变量
const statistics = ref({
  total: '-',
  filled: '-',
  unFilled: '-',
  totalWaterInjection: '-', // 新增累计注水量
  totalGasInjection: '-' // 新增累计注气量
})

const totalColor = '#00DD99'
const filledColor = '#0055BB'
const unFilledColor = '#FF5500'

// 表格引用
const tableRef = ref()
// 表格容器引用
const tableContainerRef = ref()

// 工作量统计相关变量
const workloadStatistics = ref({
  totalWaterInjection: '-',
  totalGasInjection: '-'
})

// 列宽度配置
const columnWidths = ref<
  Record<
    string,
    { label: string; prop: string; width: string; fn?: (row: IotRhDailyReportVO) => string }
  >
>({
  createTime: {
    label: '日期',
    prop: 'createTime',
    width: '120px',
    fn: (row: IotRhDailyReportVO) => dateFormatter2(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'
  },
  dailyOilUsage: {
    label: '油耗(L)',
    prop: 'dailyOilUsage',
    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'
  },
  yearTotalPower: {
    label: '用电量(万千瓦时)',
    prop: 'yearTotalPower',
    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 = 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.min(
        ...[
          Math.max(
            ...[
              getTextWidth(label),
              ...list.value.map((v) => {
                return getTextWidth(fn ? fn(v) : v[prop])
              })
            ]
          ) + (label === '施工状态' || label === '非生产时间原因' ? 30 : 20),
          200
        ]
      ) + 'px'

    columnWidths.value[prop].width = width
  })
}, 1000)
// 计算列宽度

// 格式化设计井身结构文本
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 | null) => {
  if (cellValue === null || cellValue === undefined) return ''
  // 将小数转换为百分比，保留两位小数
  return `${(parseFloat(cellValue) * 100).toFixed(2)}%`
}

// 添加打开未填报弹窗的方法
const openUnfilledDialog = () => {
  // 检查是否选择了创建时间
  if (!queryParams.createTime || queryParams.createTime.length === 0) {
    message.warning('请先选择创建时间范围')
    return
  }

  // 打开弹窗
  unfilledDialogRef.value.open()
}

// 弹窗关闭回调
const handleUnfilledDialogClose = () => {
  // 可以在这里处理弹窗关闭后的逻辑
  console.log('未填报弹窗已关闭')
}

// 新增获取统计数据的方法
const getStatistics = async () => {
  // 重置统计数据
  statistics.value = {
    total: '-',
    filled: '-',
    unFilled: '-'
  }

  // 如果没有选择时间范围，不调用接口
  if (!queryParams.createTime || queryParams.createTime.length === 0) {
    return
  }

  try {
    const res = await IotRhDailyReportApi.rhDailyReportStatistics({
      createTime: queryParams.createTime
    })

    // 处理统计数据
    const statsMap = {}
    res.forEach((item) => {
      statsMap[item.groupName] = item.count
    })

    statistics.value = {
      total: statsMap['总数'] || '-',
      filled: statsMap['已填报'] || '-',
      unFilled: statsMap['未填报'] || '-'
    }
  } catch (error) {
    console.error('获取统计数据失败', error)
  }
}

/** 查询列表 */
const getList = async () => {
  loading.value = true
  try {
    console.log('22 :>> ', 11)
    const data = await IotRhDailyReportApi.getIotRhDailyReportPage(queryParams)
    list.value = data.list
    total.value = data.total

    // 获取统计数据
    await getStatistics()

    // 获取工作量统计数据
    await getWorkloadStatistics()

    // 获取数据后计算列宽
    nextTick(() => {
      calculateColumnWidths()
    })
  } finally {
    loading.value = false
  }
}

// 搬迁安装天数格式化函数
const relocationDaysFormatter = (row: any, column: any, cellValue: any, index: number | null) => {
  if (cellValue === null || cellValue === undefined || cellValue === '') return ''

  const value = parseFloat(cellValue)
  // 如果值为负数，显示0，否则显示原值
  return value < 0 ? '0' : String(value)
}

// 注气量格式化函数（单位转换：方 -> 万方）
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)
}

// 检查三个时间字段之和是否为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 getWorkloadStatistics = async () => {
  // 重置工作量统计数据
  statistics.value.totalWaterInjection = '-'
  statistics.value.totalGasInjection = '-'

  try {
    const res = await IotRhDailyReportApi.totalWorkload(queryParams)

    // 处理工作量统计数据
    if (res) {
      // 累计注水量直接显示，单位：方
      statistics.value.totalWaterInjection = res.totalWaterInjection || '-'

      // 累计注气量需要转换：方 -> 万方 (除以10000)
      if (res.totalGasInjection) {
        const gasInjection = parseFloat(res.totalGasInjection)
        statistics.value.totalGasInjection = (gasInjection / 10000).toFixed(2)
      } else {
        statistics.value.totalGasInjection = '-'
      }
    }
  } catch (error) {
    console.error('获取工作量统计数据失败', error)
  }
}

/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.pageNo = 1
  getList()
}

const route = useRoute()

/** 重置按钮操作 */
const resetQuery = () => {
  queryFormRef.value.resetFields()
  queryParams.deptId = useUserStore().getUser.deptId
  // 重置后需要重新获取统计数据
  getStatistics()
  // 重新获取工作量统计数据
  getWorkloadStatistics()
  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(() => {
  if (Object.keys(route.query).length > 0) {
    queryParams.deptId = Number(route.query.deptId) as any
    queryParams.createTime = route.query.createTime as string[]
    handleQuery()
  } else 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;
  padding: 12px 16px;
  background-color: #f8f9fa;
  border-left: 4px solid #e6f7ff;
  border-radius: 4px;
  flex-direction: column;
  gap: 8px;
}

.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;
}

/* 统计区域未填报链接样式 */
.unfilled-link {
  color: #f50;
  text-decoration: underline;
  cursor: pointer;
}

.unfilled-link:hover {
  color: #f73;
}

.unfilled-link.disabled {
  color: #ccc;
  text-decoration: none;
  cursor: not-allowed;
}
</style>

<style>
/* 设计井身结构 tooltip 样式 - 保留换行符 */
.design-well-struct-tooltip {
  max-width: 500px;
  line-height: 1.5;
  white-space: pre-line;
}

/* 统计区域样式 */
.statistics-container {
  display: flex;
  justify-content: space-around;
  padding: 10px 0;
}

.stat-item {
  min-width: 0; /* 防止内容溢出 */
  font-size: 16px;
  font-weight: 500;
  text-align: center;
  flex: 1;
}

/* 确保统计项内容不换行 */
.stat-item span {
  white-space: nowrap;
}
</style>