pms-iot-vue/src/views/pms/iotrydailyreport/xjindex.vue

<template>
  <el-row :gutter="20">
    <el-col :span="4" :xs="24">
      <ContentWrap class="h-1/1">
        <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')]"
              class="!w-220px"
              :shortcuts="rangeShortcuts"
            />
          </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
              >运行时效=生产时间/额定生产时间&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;超过100%红色预警</span
            >
          </div>
          <div class="legend-item">
            <span class="color-indicator orange"></span>
            <span
              >生产时间+非生产时间=额定生产时间&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;否则橙色预警</span
            >
          </div>
          <div class="legend-item">
            <span class="color-indicator yellow"></span>
            <span>当日油耗大于5吨&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">
              <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
            />
            <el-table-column
              label="施工队伍"
              align="center"
              prop="deptName"
              :min-width="columnWidths.deptName.width"
              resizable
            />
            <el-table-column
              label="项目"
              align="center"
              prop="contractName"
              :min-width="columnWidths.contractName.width"
              resizable
            />
            <el-table-column
              label="任务"
              align="center"
              prop="taskName"
              :min-width="columnWidths.taskName.width"
              resizable
            />
            <el-table-column
              :label="t('project.status')"
              align="center"
              prop="repairStatus"
              :min-width="columnWidths.repairStatus.width"
              resizable
            >
              <template #default="scope">
                <dict-tag
                  :type="DICT_TYPE.PMS_PROJECT_TASK_RY_REPAIR_SCHEDULE"
                  :value="scope.row.repairStatus"
                />
              </template>
            </el-table-column>
            <el-table-column
              label="总施工井数"
              align="center"
              prop="totalConstructionWells"
              :min-width="columnWidths.totalConstructionWells.width"
              resizable
            />
            <el-table-column
              label="完工井数"
              align="center"
              prop="completedWells"
              :min-width="columnWidths.completedWells.width"
              resizable
            />
            <el-table-column
              :label="t('project.technology')"
              align="center"
              prop="technique"
              :min-width="columnWidths.technique.width"
              resizable
            >
              <template #default="scope">
                <dict-tag
                  :type="DICT_TYPE.PMS_PROJECT_RY_TECHNOLOGY"
                  :value="scope.row.technique"
                />
              </template>
            </el-table-column>
            <el-table-column
              label="井别"
              align="center"
              prop="wellCategory"
              :min-width="columnWidths.wellCategory.width"
              resizable
            />
            <el-table-column
              label="井深(m)"
              align="center"
              prop="designWellDepth"
              :min-width="columnWidths.designWellDepth.width"
              resizable
            />
            <el-table-column
              label="套生段产管尺寸(mm)"
              align="center"
              prop="casingPipeSize"
              :min-width="columnWidths.casingPipeSize.width"
              resizable
            />
            <el-table-column
              label="井控级别"
              align="center"
              prop="wellControlLevel"
              :min-width="columnWidths.wellControlLevel.width"
              resizable
            />
            <el-table-column align="center" label="当日">
              <el-table-column
                label="用电量(kWh)"
                align="center"
                prop="dailyPowerUsage"
                :min-width="columnWidths.dailyPowerUsage.width"
                resizable
              />
              <el-table-column
                label="油耗(吨)"
                align="center"
                prop="dailyFuel"
                :min-width="columnWidths.dailyFuel.width"
                resizable
              />
            </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="t('project.currentOperation')"
              align="center"
              prop="currentOperation"
              :min-width="columnWidths.currentOperation.width"
              resizable
            />
            <el-table-column
              :label="t('project.nextPlan')"
              align="center"
              prop="nextPlan"
              :min-width="columnWidths.nextPlan.width"
              resizable
            />
            <el-table-column
              :label="t('project.transitTime')"
              align="center"
              prop="transitTime"
              :min-width="columnWidths.transitTime.width"
              resizable
              :formatter="percentageFormatter"
            />
            <el-table-column
              label="额定生产时间(H)"
              align="center"
              prop="ratedProductionTime"
              :min-width="columnWidths.ratedProductionTime.width"
              resizable
            />
            <el-table-column
              label="生产时间(H)"
              align="center"
              prop="productionTime"
              :min-width="columnWidths.productionTime.width"
              resizable
            />
            <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="ryNptReason"
              :min-width="columnWidths.ryNptReason.width"
              resizable
            >
              <template #default="scope">
                <dict-tag
                  :type="DICT_TYPE.PMS_PROJECT_RY_NPT_REASON"
                  :value="scope.row.ryNptReason"
                />
              </template>
            </el-table-column>
            <el-table-column
              label="生产动态"
              align="center"
              prop="productionStatus"
              :min-width="columnWidths.productionStatus.width"
              resizable
            />
            <el-table-column
              label="全员数量"
              align="center"
              prop="totalStaffNum"
              :min-width="columnWidths.totalStaffNum.width"
              resizable
            />
            <!--
            <el-table-column label="在岗人数" align="center" prop="onDutyStaffNum" :min-width="columnWidths.onDutyStaffNum"/> -->
            <el-table-column
              label="在岗人数"
              align="center"
              prop="onDutyStaffNum"
              :min-width="columnWidths.onDutyStaffNum.width"
              resizable
            >
              <template #default="scope">
                <!-- 动态计算：在岗人数 = 全员数量 - 休假人员数量 -->
                {{
                  (Number(scope.row.totalStaffNum) || 0) - (Number(scope.row.leaveStaffNum) || 0)
                }}
              </template>
            </el-table-column>
            <el-table-column
              label="休假人员数量"
              align="center"
              prop="leaveStaffNum"
              :min-width="columnWidths.leaveStaffNum.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-ry-daily-report:update']"
                >
                  编辑
                </el-button>
                <el-button
                  link
                  type="danger"
                  @click="handleDelete(scope.row.id)"
                  v-hasPermi="['pms:iot-ry-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>

      <!-- 表单弹窗：添加/修改 -->
      <IotRyXjDailyReportForm 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 { IotRyDailyReportApi, IotRyDailyReportVO } from '@/api/pms/iotrydailyreport'
import IotRyXjDailyReportForm from './IotRyXjDailyReportForm.vue'
import { DICT_TYPE } from '@/utils/dict'
import { ref, reactive, onMounted, nextTick, watch, onUnmounted } from 'vue'
import DeptTree2 from '@/views/pms/iotrhdailyreport/DeptTree2.vue'
import { useDebounceFn } from '@vueuse/core'

import dayjs from 'dayjs'
import quarterOfYear from 'dayjs/plugin/quarterOfYear'

dayjs.extend(quarterOfYear)

const rangeShortcuts = [
  {
    text: '今天',
    value: () => {
      const today = dayjs()
      return [today.startOf('day').toDate(), today.endOf('day').toDate()]
    }
  },
  {
    text: '昨天',
    value: () => {
      const yesterday = dayjs().subtract(1, 'day')
      return [yesterday.startOf('day').toDate(), yesterday.endOf('day').toDate()]
    }
  },
  {
    text: '本周',
    value: () => {
      return [dayjs().startOf('week').toDate(), dayjs().endOf('week').toDate()]
    }
  },
  {
    text: '上周',
    value: () => {
      const lastWeek = dayjs().subtract(1, 'week')
      return [lastWeek.startOf('week').toDate(), lastWeek.endOf('week').toDate()]
    }
  },
  {
    text: '本月',
    value: () => {
      return [dayjs().startOf('month').toDate(), dayjs().endOf('month').toDate()]
    }
  },
  {
    text: '上月',
    value: () => {
      const lastMonth = dayjs().subtract(1, 'month')
      return [lastMonth.startOf('month').toDate(), lastMonth.endOf('month').toDate()]
    }
  },
  {
    text: '本季度',
    value: () => {
      return [dayjs().startOf('quarter').toDate(), dayjs().endOf('quarter').toDate()]
    }
  },
  {
    text: '上季度',
    value: () => {
      const lastQuarter = dayjs().subtract(1, 'quarter')
      return [lastQuarter.startOf('quarter').toDate(), lastQuarter.endOf('quarter').toDate()]
    }
  },
  {
    text: '今年',
    value: () => {
      return [dayjs().startOf('year').toDate(), dayjs().endOf('year').toDate()]
    }
  },
  {
    text: '去年',
    value: () => {
      const lastYear = dayjs().subtract(1, 'year')
      return [lastYear.startOf('year').toDate(), lastYear.endOf('year').toDate()]
    }
  },
  {
    text: '最近7天',
    value: () => {
      return [dayjs().subtract(6, 'day').toDate(), dayjs().toDate()]
    }
  },
  {
    text: '最近30天',
    value: () => {
      return [dayjs().subtract(29, 'day').toDate(), dayjs().toDate()]
    }
  },
  {
    text: '最近90天',
    value: () => {
      return [dayjs().subtract(89, 'day').toDate(), dayjs().toDate()]
    }
  },
  {
    text: '最近一年',
    value: () => {
      return [dayjs().subtract(1, 'year').toDate(), dayjs().toDate()]
    }
  }
]

/** 瑞鹰日报 列表 */
defineOptions({ name: 'IotRyXjDailyReport' })

const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化

// 添加 selectedRowData 响应式变量
const selectedRowData = ref<Record<string, any> | null>(null)

const loading = ref(true) // 列表的加载中
const list = ref<IotRyDailyReportVO[]>([]) // 列表的数据
const total = ref(0) // 列表的总页数
let queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  deptId: undefined,
  contractName: undefined,
  projectId: undefined,
  taskName: undefined,
  taskId: undefined,
  projectClassification: '2',
  relocationDays: undefined,
  latestWellDoneTime: [],
  currentDepth: undefined,
  dailyFootage: undefined,
  monthlyFootage: undefined,
  annualFootage: undefined,
  dailyPowerUsage: undefined,
  monthlyPowerUsage: undefined,
  dailyFuel: undefined,
  monthlyFuel: undefined,
  nonProductionTime: [],
  nptReason: undefined,
  constructionStartDate: [],
  constructionEndDate: [],
  productionStatus: undefined,
  nextPlan: undefined,
  rigStatus: undefined,
  personnel: undefined,
  mudDensity: undefined,
  mudViscosity: undefined,
  lateralLength: undefined,
  wellInclination: undefined,
  azimuth: undefined,
  extProperty: undefined,
  sort: undefined,
  remark: undefined,
  status: undefined,
  processInstanceId: undefined,
  auditStatus: undefined,
  createTime: []
})
const queryFormRef = ref() // 搜索的表单
const exportLoading = ref(false) // 导出的加载中

const rootDeptId = ref(158)

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

// 列宽度配置
const columnWidths = ref<
  Record<
    string,
    {
      label: string
      prop: string
      width: string
      fn?: (row: IotRyDailyReportVO) => string | number
    }
  >
>({
  createTime: {
    label: '日期',
    prop: 'createTime',
    width: '120px',
    fn: (row: IotRyDailyReportVO) => dateFormatter2(null, null, row.createTime)
  },
  deptName: {
    label: '施工队伍',
    prop: 'deptName',
    width: '120px'
  },
  contractName: {
    label: '项目',
    prop: 'contractName',
    width: '120px'
  },
  taskName: {
    label: '任务',
    prop: 'taskName',
    width: '120px'
  },
  equipmentType: {
    label: '设备型号',
    prop: 'equipmentType',
    width: '120px'
  },
  repairStatus: {
    label: '施工状态',
    prop: 'repairStatus',
    width: '120px'
  },
  totalConstructionWells: {
    label: '总施工井数',
    prop: 'totalConstructionWells',
    width: '120px'
  },
  completedWells: {
    label: '完工井数',
    prop: 'completedWells',
    width: '120px'
  },
  technique: {
    label: '施工工艺',
    prop: 'technique',
    width: '120px'
  },
  wellCategory: {
    label: '井别',
    prop: 'wellCategory',
    width: '120px'
  },
  designWellDepth: {
    label: '井深(m)',
    prop: 'designWellDepth',
    width: '120px'
  },
  casingPipeSize: {
    label: '套生段产管尺寸(mm)',
    prop: 'casingPipeSize',
    width: '120px'
  },
  wellControlLevel: {
    label: '井控级别',
    prop: 'wellControlLevel',
    width: '120px'
  },
  dailyPowerUsage: {
    label: '用电量(kWh)',
    prop: 'dailyPowerUsage',
    width: '120px'
  },
  dailyFuel: {
    label: '油耗(吨)',
    prop: 'dailyFuel',
    width: '120px'
  },
  constructionStartDate: {
    label: '施工开始日期',
    prop: 'constructionStartDate',
    width: '120px',
    fn: (row: IotRyDailyReportVO) => dateFormatter(null, null, row.constructionStartDate)
  },
  constructionEndDate: {
    label: '施工结束日期',
    prop: 'constructionEndDate',
    width: '120px',
    fn: (row: IotRyDailyReportVO) => dateFormatter(null, null, row.constructionEndDate)
  },
  currentOperation: {
    label: '目前',
    prop: 'currentOperation',
    width: '120px'
  },
  nextPlan: {
    label: '下步',
    prop: 'nextPlan',
    width: '120px'
  },
  transitTime: {
    label: '运行时效',
    prop: 'transitTime',
    width: '120px',
    fn: (row: IotRyDailyReportVO) => percentageFormatter(null, null, row.transitTime, null)
  },
  ratedProductionTime: {
    label: '额定生产时间(H)',
    prop: 'ratedProductionTime',
    width: '120px'
  },
  productionTime: {
    label: '生产时间(H)',
    prop: 'productionTime',
    width: '120px'
  },
  nonProductionTime: {
    label: '非生产时间(H)',
    prop: 'nonProductionTime',
    width: '120px'
  },
  ryNptReason: {
    label: '非生产时间原因',
    prop: 'ryNptReason',
    width: '120px'
  },
  drillingWorkingTime: {
    label: '进尺工作时间(H)',
    prop: 'drillingWorkingTime',
    width: '120px'
  },
  otherProductionTime: {
    label: '其它生产时间(H)',
    prop: 'otherProductionTime',
    width: '120px'
  },
  productionStatus: {
    label: '生产动态',
    prop: 'productionStatus',
    width: '120px'
  },
  totalStaffNum: {
    label: '全员数量',
    prop: 'totalStaffNum',
    width: '120px'
  },
  onDutyStaffNum: {
    label: '在岗人数',
    prop: 'onDutyStaffNum',
    width: '120px',
    fn: (row: IotRyDailyReportVO) =>
      (Number(row.totalStaffNum) || 0) - (Number(row.offDutyStaffNum) || 0)
  },
  leaveStaffNum: {
    label: '休假人员数量',
    prop: 'leaveStaffNum',
    width: '120px'
  }
})

// 计算文本宽度
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 === '施工工艺' || label === '非生产时间原因' ? 35 : 20),
          200
        ]
      ) + 'px'

    columnWidths.value[prop].width = width
  })
}, 1000)

// 检查10个时间字段之和是否为24H
const checkTimeSumEquals24 = (row: any) => {
  // 获取三个字段的值，转换为数字，如果为空则视为0
  const drillingWorkingTime = parseFloat(row.drillingWorkingTime) || 0
  const otherProductionTime = parseFloat(row.otherProductionTime) || 0
  const accidentTime = parseFloat(row.accidentTime) || 0
  const repairTime = parseFloat(row.repairTime) || 0
  const selfStopTime = parseFloat(row.selfStopTime) || 0
  const complexityTime = parseFloat(row.complexityTime) || 0
  const relocationTime = parseFloat(row.relocationTime) || 0
  const rectificationTime = parseFloat(row.rectificationTime) || 0
  const waitingStopTime = parseFloat(row.waitingStopTime) || 0
  const winterBreakTime = parseFloat(row.winterBreakTime) || 0

  // 计算总和
  const sum =
    drillingWorkingTime +
    otherProductionTime +
    accidentTime +
    repairTime +
    selfStopTime +
    complexityTime +
    relocationTime +
    rectificationTime +
    waitingStopTime +
    winterBreakTime

  // 返回是否等于24（允许一定的浮点数误差）
  return Math.abs(sum - 24) < 0.01 // 使用0.01作为误差范围
}

// 单元格样式函数
const cellStyle = ({
  row,
  column,
  rowIndex,
  columnIndex
}: {
  row: any
  column: any
  rowIndex: number
  columnIndex: number
}) => {
  // 当日油耗预警逻辑
  if (column.property === 'dailyFuel') {
    const dailyFuel = parseFloat(row.dailyFuel) || 0
    if (dailyFuel > 5) {
      return {
        backgroundColor: '#e6f8ff', // 浅黄色背景
        color: '#0a35c4', // 橙色文字
        fontWeight: 'bold',
        border: '1px solid #ffd591' // 可选：添加边框突出显示
      }
    }
  }

  // 1. 检查三个时间字段：额定生产时间、生产时间、非生产时间
  const timeFields = ['ratedProductionTime', 'productionTime', 'nonProductionTime']
  if (timeFields.includes(column.property)) {
    const ratedTime = parseFloat(row.ratedProductionTime) || 0
    const prodTime = parseFloat(row.productionTime) || 0
    const nonProdTime = parseFloat(row.nonProductionTime) || 0

    // 新增：检查三个字段是否有空值
    const hasEmptyField =
      row.ratedProductionTime === null ||
      row.ratedProductionTime === undefined ||
      row.ratedProductionTime === '' ||
      row.productionTime === null ||
      row.productionTime === undefined ||
      row.productionTime === '' ||
      row.nonProductionTime === null ||
      row.nonProductionTime === undefined ||
      row.nonProductionTime === ''

    // 如果有空字段，应用警告样式
    if (hasEmptyField) {
      return {
        backgroundColor: '#fff2f0', // 浅红色背景，表示数据不完整
        color: '#d46b08', // 深红色文字
        fontWeight: 'bold',
        border: '1px solid #ffa39e' // 可选：添加边框突出显示
      }
    }

    // 如果三个字段都有值，且不满足公式：额定生产时间 = 生产时间 + 非生产时间
    // 使用容差比较，避免浮点数精度问题
    if (Math.abs(ratedTime - (prodTime + nonProdTime)) > 0.01) {
      return {
        backgroundColor: '#fffbe6', // 浅黄色背景
        color: '#d46b08', // 橙色文字
        fontWeight: 'bold'
      }
    }
  }

  // 2. 处理运行时效字段的颜色
  if (column.property === 'transitTime') {
    const transitTime = row.transitTime
    // 将运行时效转为数字（处理原逻辑中 toFixed(4) 生成的字符串）
    const transitTimeNum = parseFloat(transitTime)
    if (
      transitTime === null ||
      transitTime === undefined ||
      isNaN(transitTimeNum) ||
      transitTimeNum === 0 ||
      transitTimeNum >= 1
    ) {
      return {
        backgroundColor: '#fff2f0', // 浅红色背景（与数据不完整警告样式统一）
        color: '#ff4d4f', // 红色文字
        fontWeight: 'bold'
      }
    }
  }

  // 3. 处理“在岗人数”列：动态计算 + 负数黄色背景
  if (column.label === '在岗人数') {
    // 按列名匹配（避免prop绑定问题）
    // 步骤1：计算在岗人数（处理空值/非数字情况，默认设为0）
    const totalStaff = Number(row.totalStaffNum) || 0
    const leaveStaff = Number(row.leaveStaffNum) || 0
    const onDutyStaff = totalStaff - leaveStaff

    // 步骤2：若计算值为负数，设置黄色提醒样式
    if (onDutyStaff < 0) {
      return {
        backgroundColor: '#fff9e6', // 浅黄色背景
        fontWeight: 'bold'
      }
    }
  }

  // 默认返回空对象，不应用特殊样式
  return {}
}

/** 查询列表 */
const getList = async () => {
  loading.value = true
  try {
    const data = await IotRyDailyReportApi.getIotRyDailyReportPage(queryParams)
    // 计算运行时效
    data.list.forEach((item: any) => {
      const ratedTime = parseFloat(item.ratedProductionTime) || 0
      const productionTime = parseFloat(item.productionTime) || 0

      if (ratedTime > 0 && !isNaN(productionTime)) {
        // 计算运行时效并保留4位小数用于计算
        item.transitTime = (productionTime / ratedTime).toFixed(4)
      } else {
        item.transitTime = null
      }
    })
    list.value = data.list
    total.value = data.total
    // 获取数据后计算列宽
    nextTick(() => {
      calculateColumnWidths()
    })
  } finally {
    loading.value = false
  }
}

// 百分比格式化函数
const percentageFormatter = (row: any, column: any, cellValue: any, index: number | null) => {
  if (cellValue === null || cellValue === undefined || cellValue === '') return ''
  const value = parseFloat(cellValue)
  if (isNaN(value)) return '-'
  // 将小数转换为百分比，保留两位小数
  return `${(value * 100).toFixed(2)}%`
}

/** 搜索按钮操作 */
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,
      designWellDepth: row.designWellDepth,
      technique: row.technique,
      wellCategory: row.wellCategory,
      wellControlLevel: row.wellControlLevel,
      casingPipeSize: row.casingPipeSize
    }
  } else {
    selectedRowData.value = null
  }

  formRef.value.open(type, id)
}

/** 删除按钮操作 */
const handleDelete = async (id: number) => {
  try {
    // 删除的二次确认
    await message.delConfirm()
    // 发起删除
    await IotRyDailyReportApi.deleteIotRyDailyReport(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 IotRyDailyReportApi.exportIotRyDailyReport(queryParams)
    download.excel(data, '瑞鹰日报.xls')
  } catch {
  } finally {
    exportLoading.value = false
  }
}

// 声明 ResizeObserver 实例
let resizeObserver: ResizeObserver | null = null

const route = useRoute()

/** 初始化 **/
onMounted(() => {
  if (Object.keys(route.query).length > 0) {
    queryParams = {
      ...queryParams,
      ...route.query,
      deptId: Number(route.query.deptId) as any
    }
    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;
} */

/* 设计井身结构文本样式 - 多行显示并添加省略号 */
.design-well-struct-text {
  display: -webkit-box;
  max-height: 3em; /* 两行文本的高度 */
  overflow: hidden;
  line-height: 1.5;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

/* 确保设计井身结构列不参与自动调整 */
:deep(.el-table__header-wrapper .el-table__cell.fixed-width),
:deep(.el-table__body-wrapper .el-table__cell.fixed-width) {
  flex-shrink: 0;
  flex-grow: 0;
}

/* 颜色说明区域样式 */
.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;
}

/* 在原有样式基础上添加黄色指示器 */
.color-indicator.yellow {
  background-color: #0a35c4; /* 黄色，与警告颜色一致 */
}
</style>

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