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

<script lang="ts" setup>
import { rangeShortcuts } from '@/utils/formatTime'
import { useDebounceFn } from '@vueuse/core'
import dayjs from 'dayjs'
import { DICT_TYPE, getStrDictOptions } from '@/utils/dict'
import { TableColumnCtx } from 'element-plus/es/components/table/src/table-column/defaults'
import { FormInstance, FormRules } from 'element-plus'
import Form from '@/components/Form/src/Form.vue'
import { useUserStore } from '@/store/modules/user'
import { IotRyDailyReportApi } from '@/api/pms/iotrydailyreport'

interface List {
  id: number
  deptId: number
  projectId: number
  taskId: number
  projectClassification: string
  relocationDays: number
  latestWellDoneTime: number
  currentDepth: number
  dailyFootage: number
  monthlyFootage: number
  annualFootage: number
  dailyPowerUsage: number
  monthlyPowerUsage: number
  dailyFuel: number
  monthlyFuel: number
  dailyOilVolume: number
  remainDieselVolume: number
  productionTime: number
  nonProductionTime: number
  ryNptReason: string
  drillingWorkingTime: number
  otherProductionTime: number
  accidentTime: number
  repairTime: number
  selfStopTime: number
  complexityTime: number
  relocationTime: number
  rectificationTime: number
  waitingStopTime: number
  winterBreakTime: number
  constructionStartDate: number
  constructionEndDate: number
  productionStatus: string
  currentOperation: string
  nextPlan: string
  rigStatus: string
  repairStatus: string
  personnel: string
  totalStaffNum: number
  leaveStaffNum: number
  mudDensity: number
  mudViscosity: number
  lateralLength: number
  wellInclination: number
  azimuth: number
  remark: string
  status: number
  processInstanceId: string
  auditStatus: number
  opinion: string
  createTime: number
  deptName: string
  contractName: string
  taskName: string
  designWellDepth: number
  designWellStruct: number
  totalConstructionWells: number
  completedWells: number
  equipmentType: string
  transitTime: number
  lastCurrentDepth: number
}

interface Column {
  prop?: keyof List
  label: string
  'min-width'?: string
  isTag?: boolean
  fixed?: 'left' | 'right'
  formatter?: (row: List) => any
  children?: Column[]
  dictType?: string
}

const columns = ref<Column[]>([
  {
    label: '日期',
    prop: 'createTime',
    'min-width': '120px',
    formatter: (row: List) => dayjs(row.createTime).format('YYYY-MM-DD'),
    fixed: 'left'
  },
  {
    label: '施工队伍',
    prop: 'deptName',
    'min-width': '120px',
    fixed: 'left'
  },
  {
    label: '任务',
    prop: 'taskName',
    'min-width': '120px',
    fixed: 'left'
  },
  {
    label: '施工状态',
    prop: 'rigStatus',
    'min-width': '120px',
    isTag: true,
    dictType: DICT_TYPE.PMS_PROJECT_TASK_RY_SCHEDULE,
    fixed: 'left'
  },
  {
    label: '审批状态',
    prop: 'auditStatus',
    'min-width': '120px',
    isTag: true,
    formatter: (row: List) => {
      switch (row.auditStatus) {
        case 0:
          return '待提交'
        case 10:
          return '待审批'
        case 20:
          return '审批通过'
        case 30:
          return '审批拒绝'
        default:
          return ''
      }
    }
  },
  {
    label: '设备型号',
    prop: 'equipmentType',
    'min-width': '120px'
  },
  {
    label: '上井次完井时间',
    prop: 'latestWellDoneTime',
    'min-width': '120px',
    formatter: (row: List) =>
      row.latestWellDoneTime ? dayjs(row.latestWellDoneTime).format('YYYY-MM-DD') : ''
  },
  {
    label: '井深(m)',
    children: [
      {
        label: '设计',
        prop: 'designWellDepth',
        'min-width': '120px'
      },
      {
        label: '当前',
        prop: 'currentDepth',
        'min-width': '120px'
      }
    ]
  },
  {
    label: '进尺(m)',
    children: [
      {
        label: '日',
        prop: 'dailyFootage',
        'min-width': '120px'
      },
      {
        label: '月',
        prop: 'monthlyFootage',
        'min-width': '120px'
      },
      {
        label: '年累计',
        prop: 'annualFootage',
        'min-width': '120px'
      }
    ]
  },
  {
    label: '总施工井数',
    prop: 'totalConstructionWells',
    'min-width': '120px'
  },
  {
    label: '完工井数',
    prop: 'completedWells',
    'min-width': '120px'
  },
  {
    label: '泥浆性能',
    children: [
      {
        label: '密度(g/cm³)',
        prop: 'mudDensity',
        'min-width': '120px'
      },
      {
        label: '粘度(S)',
        prop: 'mudViscosity',
        'min-width': '120px'
      }
    ]
  },
  {
    label: '当日',
    children: [
      {
        label: '用电量(kWh)',
        prop: 'dailyPowerUsage',
        'min-width': '120px'
      },
      {
        label: '油耗(吨)',
        prop: 'dailyFuel',
        'min-width': '120px'
      }
    ]
  },
  // {
  //   label: '施工开始日期',
  //   prop: 'constructionStartDate',
  //   'min-width': '120px',
  //   formatter: (row: List) => dayjs(row.constructionStartDate).format('YYYY-MM-DD HH:mm:ss')
  // },
  // {
  //   label: '施工结束日期',
  //   prop: 'constructionEndDate',
  //   'min-width': '120px',
  //   formatter: (row: List) => dayjs(row.constructionEndDate).format('YYYY-MM-DD HH:mm:ss')
  // },
  {
    label: '水平段长度(m)',
    prop: 'lateralLength',
    'min-width': '120px'
  },
  {
    label: '井斜(°)',
    prop: 'wellInclination',
    'min-width': '120px'
  },
  {
    label: '方位(°)',
    prop: 'azimuth',
    'min-width': '120px'
  },
  {
    label: '设计井身结构',
    prop: 'designWellStruct',
    'min-width': '120px'
  },
  {
    label: '生产动态',
    prop: 'productionStatus',
    'min-width': '120px'
  },
  {
    label: '项目',
    prop: 'contractName',
    'min-width': '120px'
  },
  {
    label: '进尺工作时间(H)',
    prop: 'drillingWorkingTime',
    'min-width': '120px'
  },
  {
    label: '其它生产时间(H)',
    prop: 'otherProductionTime',
    'min-width': '120px'
  },
  {
    label: '非生产时间',
    children: [
      {
        label: '事故(H)',
        prop: 'accidentTime',
        'min-width': '120px'
      },
      {
        label: '修理(H)',
        prop: 'repairTime',
        'min-width': '120px'
      },
      {
        label: '自停(H)',
        prop: 'selfStopTime',
        'min-width': '120px'
      },
      {
        label: '复杂(H)',
        prop: 'complexityTime',
        'min-width': '120px'
      },
      {
        label: '搬迁(H)',
        prop: 'relocationTime',
        'min-width': '120px'
      },
      {
        label: '整改(H)',
        prop: 'rectificationTime',
        'min-width': '120px'
      },
      {
        label: '等停(H)',
        prop: 'waitingStopTime',
        'min-width': '120px'
      },
      {
        label: '冬休(H)',
        prop: 'winterBreakTime',
        'min-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 = (colums: Column[]) => {
  for (const col of colums) {
    let { formatter, prop, label, 'min-width': minWidth, isTag, children } = col

    if (children && children.length > 0) {
      calculateColumnWidths(children)
      continue
    }

    minWidth =
      Math.min(
        ...[
          Math.max(
            ...[
              getTextWidth(label),
              ...list.value.map((v) => {
                return getTextWidth(formatter ? formatter(v) : v[prop!])
              })
            ]
          ) + (isTag ? 40 : 20),
          200
        ]
      ) + 'px'

    col['min-width'] = minWidth
  }
}

function checkTimeSumEquals24(row: List) {
  // 获取三个字段的值，转换为数字，如果为空则视为0
  const gasTime = row.drillingWorkingTime || 0
  const waterTime = row.otherProductionTime || 0
  const nonProdTime =
    row.accidentTime ||
    0 + row.repairTime ||
    0 + row.selfStopTime ||
    0 + row.complexityTime ||
    0 + row.relocationTime ||
    0 + row.rectificationTime ||
    0 + row.waitingStopTime ||
    0 + row.winterBreakTime ||
    0

  // 计算总和
  const sum = gasTime + waterTime + nonProdTime

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

function cellStyle(data: {
  row: List
  column: TableColumnCtx<List>
  rowIndex: number
  columnIndex: number
}) {
  const { row, column } = data

  if (column.property === 'dailyFuel') {
    const originalValue = row.dailyFuel ?? 0

    if (originalValue > 15)
      return {
        color: 'red',
        fontWeight: 'bold'
      }
  }

  const timeFields = [
    'drillingWorkingTime',
    'otherProductionTime',
    'accidentTime',
    'repairTime',
    'selfStopTime',
    'complexityTime',
    'relocationTime',
    'rectificationTime',
    'waitingStopTime',
    'winterBreakTime'
  ]
  if (timeFields.includes(column.property)) {
    if (!checkTimeSumEquals24(row)) {
      return {
        color: 'orange',
        fontWeight: 'bold'
      }
    }
  }

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

const id = useUserStore().getUser.deptId

const deptId = id

interface Query {
  pageNo: number
  pageSize: number
  deptId: number
  contractName?: string
  taskName?: string
  createTime: string[]
  projectClassification: '1' | '2'
}

const query = ref<Query>({
  pageNo: 1,
  pageSize: 10,
  deptId: id,
  createTime: [
    ...rangeShortcuts[3].value().map((item) => dayjs(item).format('YYYY-MM-DD HH:mm:ss'))
  ],
  projectClassification: '1'
})

function handleSizeChange(val: number) {
  query.value.pageSize = val
  handleQuery()
}

function handleCurrentChange(val: number) {
  query.value.pageNo = val
  loadList()
}

const loading = ref(false)

const list = ref<List[]>([])
const total = ref(0)

const loadList = useDebounceFn(async function () {
  loading.value = true
  try {
    const data = await IotRyDailyReportApi.getIotRyDailyReportPage(query.value)
    list.value = data.list
    total.value = data.total

    nextTick(() => {
      calculateColumnWidths(columns.value)
    })
  } finally {
    loading.value = false
  }
}, 500)

function handleQuery(setPage = true) {
  if (setPage) {
    query.value.pageNo = 1
  }
  loadList()
}

function resetQuery() {
  query.value = {
    pageNo: 1,
    pageSize: 10,
    deptId: 157,
    contractName: '',
    taskName: '',
    createTime: [
      ...rangeShortcuts[2].value().map((item) => dayjs(item).format('YYYY-MM-DD HH:mm:ss'))
    ],
    projectClassification: '1'
  }
  handleQuery()
}

watch(
  [
    () => query.value.createTime,
    () => query.value.deptId,
    () => query.value.taskName,
    () => query.value.contractName
  ],
  () => {
    handleQuery()
  },
  { immediate: true }
)

const FORM_KEYS = [
  'id',
  'deptName',
  'contractName',
  'taskName',
  'rigStatus',
  'designWellDepth',
  'currentDepth',
  'dailyPowerUsage',
  'dailyFuel',
  'mudDensity',
  'mudViscosity',
  'lateralLength',
  'wellInclination',
  'azimuth',
  'designWellStruct',
  'productionStatus',
  'remark',
  'createTime',
  'deptId',
  'projectId',
  'taskId',
  'opinion',
  'personnel',
  'accidentTime',
  'repairTime',
  'selfStopTime',
  'complexityTime',
  'relocationTime',
  'rectificationTime',
  'waitingStopTime',
  'winterBreakTime',
  'drillingWorkingTime',
  'otherProductionTime',
  'lastCurrentDepth'
] as const

type FormKey = (typeof FORM_KEYS)[number]
type Form = Partial<Pick<List, FormKey>>

const dialogVisible = ref(false)
const formRef = ref<FormInstance>()
const formLoading = ref(false)
const message = useMessage()

const initFormData = (): Form => ({})

const form = ref<Form>(initFormData())

async function loadDetail(id: number) {
  try {
    const res = await IotRyDailyReportApi.getIotRyDailyReport(id)
    FORM_KEYS.forEach((key) => {
      form.value[key] = res[key] ?? form.value[key]
    })
    form.value.id = id

    if (res.auditStatus !== 10) {
      formType.value = 'readonly'
    }
  } finally {
  }
}

const formType = ref<'approval' | 'readonly'>('approval')

function handleOpenForm(id: number, type: 'approval' | 'readonly') {
  form.value = initFormData()
  formRef.value?.resetFields()

  formType.value = type

  dialogVisible.value = true
  loadDetail(id).then(() => {
    formRef.value?.validate()
  })
}

const route = useRoute()

onMounted(() => {
  if (Object.keys(route.query).length > 0) {
    handleOpenForm(Number(route.query.id), 'approval')
  }
})

// const transitTime = computed(() => {
//   const cap = form.value.capacity
//   const gas = form.value.dailyGasInjection ?? 0

//   if (!cap) return { original: 0, value: '0%' }

//   const original = gas / cap
//   return { original, value: (original * 100).toFixed(2) + '%' }
// })

const sumTimes = () => {
  const {
    drillingWorkingTime = 0,
    otherProductionTime = 0,
    accidentTime = 0,
    repairTime = 0,
    selfStopTime = 0,
    complexityTime = 0,
    relocationTime = 0,
    rectificationTime = 0,
    waitingStopTime = 0,
    winterBreakTime = 0
  } = form.value
  return parseFloat(
    (
      drillingWorkingTime +
      otherProductionTime +
      accidentTime +
      repairTime +
      selfStopTime +
      complexityTime +
      relocationTime +
      rectificationTime +
      waitingStopTime +
      winterBreakTime
    ).toFixed(2)
  )
}

const validateTotalTime = (_rule: any, _value: any, callback: any) => {
  const total = sumTimes()
  if (total !== 24) {
    callback(new Error(`当前合计 ${total} 小时，时间之和必须等于 24`))
  } else {
    callback()
  }
}

// const validateNptReason = (_rule: any, value: any, callback: any) => {
//   if ((form.value.nonProductionTime || 0) > 0 && !value) {
//     callback(new Error('非生产时间大于 0 时，必须选择原因'))
//   } else {
//     callback()
//   }
// }

const validateLastCurrentDepth = (_rule: any, value: any, callback: any) => {
  if (value && value < (form.value.lastCurrentDepth ?? 0)) {
    callback(new Error('当前深度需大于等于上一次填报深度'))
  } else {
    callback()
  }
}

const timeRuleItem = [
  { required: true, message: '请输入时间', trigger: 'blur' },
  { validator: validateTotalTime, trigger: 'blur' }
]

const rules = reactive<FormRules>({
  currentDepth: [
    { required: true, message: '请输入当前深度', trigger: ['change', 'blur'] },
    { validator: validateLastCurrentDepth, trigger: ['change', 'blur'] }
  ],
  productionStatus: [{ required: true, message: '请输入生产动态', trigger: ['change', 'blur'] }],

  // 复用规则
  drillingWorkingTime: timeRuleItem,
  otherProductionTime: timeRuleItem,
  accidentTime: timeRuleItem,
  repairTime: timeRuleItem,
  selfStopTime: timeRuleItem,
  complexityTime: timeRuleItem,
  relocationTime: timeRuleItem,
  rectificationTime: timeRuleItem,
  waitingStopTime: timeRuleItem,
  winterBreakTime: timeRuleItem
})

watch(
  [
    () => form.value.drillingWorkingTime,
    () => form.value.otherProductionTime,
    () => form.value.accidentTime,
    () => form.value.repairTime,
    () => form.value.selfStopTime,
    () => form.value.complexityTime,
    () => form.value.relocationTime,
    () => form.value.rectificationTime,
    () => form.value.waitingStopTime,
    () => form.value.winterBreakTime
  ],
  () => {
    nextTick(() => {
      if (sumTimes() === 24) {
        formRef.value?.clearValidate([
          'drillingWorkingTime',
          'otherProductionTime',
          'accidentTime',
          'repairTime',
          'selfStopTime',
          'complexityTime',
          'relocationTime',
          'rectificationTime',
          'waitingStopTime',
          'winterBreakTime'
        ])
      }
    })
  }
)

const submitForm = async (auditStatus: 20 | 30) => {
  if (!formRef.value) return

  try {
    // await formRef.value.validate()
    formLoading.value = true
    const { opinion, id } = form.value

    const data = { id: id, auditStatus, opinion } as any

    await IotRyDailyReportApi.approvalIotRyDailyReport(data)
    message.success(auditStatus === 20 ? '通过成功' : '拒绝成功')
    dialogVisible.value = false

    loadList()
  } catch (error) {
    console.warn('表单校验未通过或提交出错')
  } finally {
    formLoading.value = false
  }
}
</script>

<template>
  <div
    class="h-[calc(100vh-var(--top-tool-height)-var(--tags-view-height)-var(--app-footer-height))] >"
  >
    <div class="grid grid-cols-[15%_1fr] gap-4 h-full">
      <div class="flex flex-col p-4 gap-2 bg-white dark:bg-[#1d1e1f] shadow rounded-lg h-full">
        <DeptTreeSelect :deptId="deptId" :topId="158" v-model="query.deptId" />
      </div>
      <div class="grid grid-rows-[62px_1fr] h-full gap-4">
        <el-form
          size="default"
          class="bg-white dark:bg-[#1d1e1f] rounded-lg shadow px-8 gap-8 flex items-center justify-between"
        >
          <div class="flex items-center gap-8">
            <el-form-item label="项目">
              <el-input
                v-model="query.contractName"
                placeholder="请输入项目"
                clearable
                @keyup.enter="handleQuery()"
                class="!w-240px"
              />
            </el-form-item>
            <el-form-item label="任务">
              <el-input
                v-model="query.taskName"
                placeholder="请输入任务"
                clearable
                @keyup.enter="handleQuery()"
                class="!w-240px"
              />
            </el-form-item>
            <el-form-item label="创建时间">
              <el-date-picker
                v-model="query.createTime"
                value-format="YYYY-MM-DD HH:mm:ss"
                type="daterange"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :shortcuts="rangeShortcuts"
                class="!w-220px"
                :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
              />
            </el-form-item>
          </div>
          <el-form-item>
            <el-button type="primary" @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-form-item>
        </el-form>
        <div class="bg-white dark:bg-[#1d1e1f] shadow rounded-lg p-4 flex flex-col">
          <div class="flex-1 relative">
            <el-auto-resizer class="absolute">
              <template #default="{ width, height }">
                <el-table
                  :data="list"
                  v-loading="loading"
                  stripe
                  class="absolute"
                  :max-height="height"
                  show-overflow-tooltip
                  :width="width"
                  :cell-style="cellStyle"
                  border
                >
                  <DailyTableColumn :columns="columns" />
                  <el-table-column label="操作" width="120px" align="center" fixed="right">
                    <template #default="{ row }">
                      <el-button
                        link
                        type="success"
                        @click="handleOpenForm(row.id, 'readonly')"
                        v-hasPermi="['pms:iot-ry-daily-report:update']"
                      >
                        查看
                      </el-button>
                      <el-button
                        v-show="row.auditStatus === 10"
                        link
                        type="primary"
                        @click="handleOpenForm(row.id, 'approval')"
                        v-hasPermi="['pms:iot-ry-daily-report:update']"
                      >
                        审批
                      </el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </template>
            </el-auto-resizer>
          </div>
          <div class="h-10 mt-4 flex items-center justify-end">
            <el-pagination
              size="default"
              v-show="total > 0"
              v-model:current-page="query.pageNo"
              v-model:page-size="query.pageSize"
              :background="true"
              :page-sizes="[10, 20, 30, 50, 100]"
              :total="total"
              layout="total, sizes, prev, pager, next, jumper"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </div>
      </div>
    </div>
    <Dialog title="编辑" v-model="dialogVisible">
      <el-form
        ref="formRef"
        label-position="top"
        size="default"
        :rules="rules"
        :model="form"
        v-loading="formLoading"
        require-asterisk-position="right"
      >
        <div class="flex flex-col gap-3 text-sm">
          <div
            class="rounded-md border border-blue-100 bg-blue-50/80 p-3 dark:border-blue-900/30 dark:bg-blue-900/10"
          >
            <div class="flex flex-col gap-2.5">
              <div class="flex items-center justify-between">
                <div class="text-gray-600 dark:text-gray-400">
                  <span class="font-bold text-gray-800 dark:text-gray-200"> 油量消耗：</span>
                  当日油耗
                </div>
                <span
                  class="inline-flex items-center rounded border border-red-200 bg-red-100 px-2 py-0.5 text-xs font-medium text-red-600 dark:bg-red-900/20 dark:border-red-800 dark:text-red-400"
                >
                  >15吨 红色预警
                </span>
              </div>
              <div class="flex items-center justify-between">
                <div class="text-gray-600 dark:text-gray-400">
                  <span class="font-bold text-gray-800 dark:text-gray-200">时间平衡：</span>
                  进尺 + 其它生产 + 非生产 = 24H
                </div>
                <span
                  class="inline-flex items-center rounded border border-orange-200 bg-orange-100 px-2 py-0.5 text-xs font-medium text-orange-600 dark:bg-orange-900/20 dark:border-orange-800 dark:text-orange-400"
                >
                  ≠24H 橙色预警
                </span>
              </div>
            </div>
          </div>
          <!-- <div
          v-if="form.opinion"
          class="flex gap-3 rounded-md border border-yellow-200 bg-yellow-50 p-3 dark:border-yellow-800 dark:bg-yellow-900/10"
        >
          <Icon
            icon="ep:warning-filled"
            class="mt-0.5 shrink-0 text-base text-yellow-600 dark:text-yellow-500"
          />
          <div class="flex flex-col">
            <h4 class="mb-1 font-bold text-yellow-800 dark:text-yellow-500"> 审核意见 </h4>
            <p class="leading-relaxed text-gray-600 dark:text-gray-400">
              {{ form.opinion }}
            </p>
          </div>
        </div> -->
        </div>
        <div class="grid grid-cols-2 gap-4 mt-5">
          <el-form-item label="施工队伍" prop="deptName">
            <el-input v-model="form.deptName" placeholder="" disabled />
          </el-form-item>
          <el-form-item label="项目" prop="contractName">
            <el-input v-model="form.contractName" placeholder="" disabled />
          </el-form-item>
          <el-form-item label="任务" prop="taskName">
            <el-input v-model="form.taskName" placeholder="" disabled />
          </el-form-item>
          <el-form-item label="施工状态" prop="rigStatus">
            <el-select v-model="form.rigStatus" placeholder="请选择施工状态" disabled>
              <el-option
                v-for="(dict, index) in getStrDictOptions(DICT_TYPE.PMS_PROJECT_TASK_RY_SCHEDULE)"
                :key="index"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="设计井深(m)" prop="designWellDepth">
            <el-input v-model="form.designWellDepth" placeholder="" disabled />
          </el-form-item>
          <el-form-item label="当前井深(m)" prop="currentDepth">
            <el-input-number
              class="placeholder-"
              :min="0"
              v-model="form.currentDepth"
              placeholder="请输入当前井深(m)"
              disabled
            />
          </el-form-item>
          <el-form-item label="当日用电量(kWh)" prop="dailyPowerUsage">
            <el-input-number
              :min="0"
              v-model="form.dailyPowerUsage"
              placeholder="请输入当日用电量(kWh)"
              clearable
              disabled
            />
          </el-form-item>
          <el-form-item label="当日油耗(吨)" prop="dailyFuel">
            <el-input-number
              :min="0"
              v-model="form.dailyFuel"
              placeholder="请输入当日油耗(吨)"
              clearable
              :class="{ 'warning-input': (form.dailyFuel ?? 0) > 15 }"
              disabled
            />
          </el-form-item>
          <el-form-item label="泥浆密度(g/cm³)" prop="mudDensity">
            <el-input-number
              :min="0"
              v-model="form.mudDensity"
              placeholder="请输入泥浆性能-密度(g/cm³)"
              clearable
              disabled
            />
          </el-form-item>
          <el-form-item label="泥浆粘度(S)" prop="mudViscosity">
            <el-input-number
              :min="0"
              v-model="form.mudViscosity"
              placeholder="请输入泥浆性能-粘度(S)"
              clearable
              disabled
            />
          </el-form-item>
          <el-form-item label="水平段长度(m)" prop="lateralLength">
            <el-input-number
              :min="0"
              v-model="form.lateralLength"
              placeholder="请输入水平段长度(m)"
              clearable
              disabled
            />
          </el-form-item>
          <el-form-item label="井斜(°)" prop="wellInclination">
            <el-input-number
              :min="0"
              v-model="form.wellInclination"
              placeholder="请输入井斜(°)"
              clearable
              disabled
            />
          </el-form-item>
          <el-form-item label="方位(°)" prop="azimuth">
            <el-input-number
              :min="0"
              v-model="form.azimuth"
              placeholder="请输入方位(°)"
              clearable
              disabled
            />
          </el-form-item>
          <el-form-item label="设计井身结构" prop="designWellStruct">
            <el-input
              v-model="form.designWellStruct"
              placeholder=""
              type="textarea"
              disabled
              autosize
            />
          </el-form-item>
          <!-- <el-form-item label="生产动态" prop="productionStatus">
          <el-input
            v-model="form.productionStatus"
            placeholder="请输入生产动态"
            type="textarea"
            autosize
            :max-length="1000"
            disabled
          />
        </el-form-item> -->
          <el-form-item label="人员情况" prop="personnel">
            <el-input
              v-model="form.personnel"
              placeholder="请输入人员情况"
              type="textarea"
              :max-length="1000"
              autosize
              disabled
            />
          </el-form-item>
          <!-- <el-form-item label="备注" prop="remark">
          <el-input
            v-model="form.remark"
            placeholder="请输入备注"
            :max-length="1000"
            type="textarea"
            autosize
            disabled
          />
        </el-form-item> -->
        </div>
        <el-divider content-position="left">生产时间</el-divider>
        <div class="grid grid-cols-2 gap-4 mt-5">
          <el-form-item label="进尺工作时间(H)" prop="drillingWorkingTime">
            <el-input-number
              class="w-full!"
              :min="0"
              v-model="form.drillingWorkingTime"
              placeholder="进尺工作时间(H)"
              disabled
              :class="{ 'orange-input': sumTimes() !== 24 }"
            />
          </el-form-item>
          <el-form-item label="其它生产时间(H)" prop="otherProductionTime">
            <el-input-number
              class="w-full!"
              :min="0"
              v-model="form.otherProductionTime"
              placeholder="其它生产时间(H)"
              disabled
              :class="{ 'orange-input': sumTimes() !== 24 }"
            />
          </el-form-item>
        </div>
        <el-divider content-position="left">非生产时间</el-divider>
        <div class="grid grid-cols-4 gap-4 mt-5">
          <el-form-item label="事故(H)" prop="accidentTime">
            <el-input-number
              class="w-full!"
              :min="0"
              v-model="form.accidentTime"
              placeholder="请输入事故(H)"
              disabled
              :class="{ 'orange-input': sumTimes() !== 24 }"
            />
          </el-form-item>
          <el-form-item label="修理(H)" prop="repairTime">
            <el-input-number
              class="w-full!"
              :min="0"
              v-model="form.repairTime"
              placeholder="请输入修理(H)"
              disabled
              :class="{ 'orange-input': sumTimes() !== 24 }"
            />
          </el-form-item>
          <el-form-item label="自停(H)" prop="selfStopTime">
            <el-input-number
              class="w-full!"
              :min="0"
              v-model="form.selfStopTime"
              placeholder="请输入自停(H)"
              disabled
              :class="{ 'orange-input': sumTimes() !== 24 }"
            />
          </el-form-item>
          <el-form-item label="复杂(H)" prop="complexityTime">
            <el-input-number
              class="w-full!"
              :min="0"
              v-model="form.complexityTime"
              placeholder="请输入复杂(H)"
              disabled
              :class="{ 'orange-input': sumTimes() !== 24 }"
            />
          </el-form-item>
          <el-form-item label="搬迁(H)" prop="relocationTime">
            <el-input-number
              class="w-full!"
              :min="0"
              v-model="form.relocationTime"
              placeholder="请输入搬迁(H)"
              disabled
              :class="{ 'orange-input': sumTimes() !== 24 }"
            />
          </el-form-item>
          <el-form-item label="整改(H)" prop="rectificationTime">
            <el-input-number
              class="w-full!"
              :min="0"
              v-model="form.rectificationTime"
              placeholder="请输入整改(H)"
              disabled
              :class="{ 'orange-input': sumTimes() !== 24 }"
            />
          </el-form-item>
          <el-form-item label="等停(H)" prop="waitingStopTime">
            <el-input-number
              class="w-full!"
              :min="0"
              v-model="form.waitingStopTime"
              placeholder="请输入等停(H)"
              disabled
              :class="{ 'orange-input': sumTimes() !== 24 }"
            />
          </el-form-item>
          <el-form-item label="冬休(H)" prop="winterBreakTime">
            <el-input-number
              class="w-full!"
              :min="0"
              v-model="form.winterBreakTime"
              placeholder="请输入冬休(H)"
              disabled
              :class="{ 'orange-input': sumTimes() !== 24 }"
            />
          </el-form-item>
        </div>
        <div class="grid grid-cols-1 gap-4 mt-5">
          <el-form-item label="生产动态" prop="productionStatus">
            <el-input
              v-model="form.productionStatus"
              placeholder="请输入生产动态"
              type="textarea"
              autosize
              :max-length="1000"
              disabled
            />
          </el-form-item>
          <el-form-item label="备注" prop="remark">
            <el-input
              v-model="form.remark"
              placeholder="请输入备注"
              :max-length="1000"
              type="textarea"
              autosize
              disabled
            />
          </el-form-item>
        </div>
        <el-form-item class="mt-4" label="审批意见" prop="opinion">
          <el-input
            v-model="form.opinion"
            placeholder="请输入审批意见"
            :max-length="1000"
            type="textarea"
            autosize
            :disabled="formType === 'readonly'"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button
          size="default"
          @click="submitForm(20)"
          type="primary"
          :disabled="formLoading || formType === 'readonly'"
        >
          审批通过
        </el-button>
        <el-button
          size="default"
          @click="submitForm(30)"
          type="danger"
          :disabled="formLoading || formType === 'readonly'"
        >
          审批拒绝
        </el-button>
        <el-button size="default" @click="dialogVisible = false">取 消</el-button>
      </template>
    </Dialog>
  </div>
</template>

<style scoped>
:deep(.el-form-item) {
  margin-bottom: 0;
}

:deep(.el-table) {
  border-top-right-radius: 8px;
  border-top-left-radius: 8px;

  .el-table__cell {
    height: 40px;
  }

  .el-table__header-wrapper {
    .el-table__cell {
      background: var(--el-fill-color-light);
    }
  }
}

:deep(.warning-input) {
  .el-input__inner {
    color: red !important;
    -webkit-text-fill-color: red !important;
  }
}

:deep(.orange-input) {
  .el-input__inner {
    color: orange !important;
    -webkit-text-fill-color: orange !important;
  }
}

:deep(.el-input-number) {
  width: 100%;
}

:deep(.el-input-number__decrease) {
  display: none !important;
}

:deep(.el-input-number__increase) {
  display: none !important;
}
</style>