pms-iot-vue/src/views/report-statistics/ry-daily-report.vue

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

defineOptions({ name: 'DailyReport' })

const tab = ref('井')
const tabOptions = ['井', '队伍']

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
  reportDetails: 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
  lastGroupIdFlag: boolean
}

interface Column {
  prop?: keyof List
  label: string
  'min-width'?: string
  isTag?: boolean
  isDay?: 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: '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: '用电量(MWh)',
        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: 'reportDetails',
    'min-width': '250px',
    isDay: true
  },
  {
    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) => {
                let tagLabel = ''
                if (col.dictType) {
                  const option = getDictOptions(col.dictType).find(
                    (item) => item.value === v[prop!]
                  )
                  if (option) tagLabel = option.label
                }
                return getTextWidth(
                  formatter ? formatter(v) : Boolean(tagLabel) ? tagLabel : v[prop!]
                )
              })
            ]
          ) + (isTag ? 40 : 20),
          ...(isTag ? [] : [200])
        ]
      ) + 'px'

    col['min-width'] = col.isDay ? '250px' : 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 > 9000)
      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 {}
}

function rowClassName(data: { row: List; rowIndex: number }) {
  const { row } = data
  if (!row.lastGroupIdFlag) {
    return 'hide-expand-icon'
  }
  return ''
}

const id = useUserStore().getUser.deptId

const deptId = id

interface Query {
  pageNo: number
  pageSize: number
  deptId: number
  contractName?: string
  taskName?: string
  wellName?: string
  createTime: string[]
  projectClassification: number
}

const query = ref<Query>({
  pageNo: 1,
  pageSize: 10,
  deptId: id,
  createTime: [
    ...rangeShortcuts[2].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 {
    if (tab.value === '井') {
      const { deptId, taskName, wellName, ...other } = query.value
      const data = await IotRyDailyReportApi.getIotRyDailyReportTeamPage({
        ...other,
        taskName: wellName
      })
      list.value = data.list
      total.value = data.total
    } else {
      const data = await IotRyDailyReportApi.getIotRyDailyReportWellPage(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,
    () => query.value.wellName
  ],
  () => {
    handleQuery()
  },
  { immediate: true }
)

const expandRowKeys = computed(() => {
  return list.value.filter((item) => item.lastGroupIdFlag).map((item) => item.id.toString())
})

const exportLoading = ref(false)

const handleExport = () => {
  exportLoading.value = true
  if (tab.value === '井') {
    IotRyDailyReportApi.exportIotRyDailyReportWell(query.value).then((data) => {
      download.excel(data, '瑞鹰钻井井日报统计.xls')
      exportLoading.value = false
    })
  } else {
    IotRyDailyReportApi.exportIotRyDailyReportTeam(query.value).then((data) => {
      download.excel(data, '瑞鹰钻井队伍日报统计.xls')
      exportLoading.value = false
    })
  }
}
</script>

<template>
  <div
    class="daily-report-page grid grid-cols-[auto_1fr] gap-4 h-[calc(100vh-20px-var(--top-tool-height)-var(--tags-view-height)-var(--app-footer-height))]"
  >
    <el-form
      size="default"
      class="col-span-2 bg-white dark:bg-[#1d1e1f] rounded-lg shadow px-8 gap-8 flex items-center"
    >
      <div class="flex items-center gap-8">
        <el-segmented class="h-12" v-model="tab" :options="tabOptions" @change="handleQuery()" />
      </div>
      <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 v-show="tab !== '井'" 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"
            :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
            class="!w-220px"
          />
        </el-form-item>
      </div>
      <el-form-item class="ml-auto">
        <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-button plain type="success" @click="handleExport" :loading="exportLoading">
          <Icon icon="ep:download" class="mr-5px" /> 导出
        </el-button>
      </el-form-item>
    </el-form>
    <DeptTreeSelect
      v-show="tab === '队伍'"
      :top-id="158"
      :deptId="deptId"
      v-model="query.deptId"
      title="队伍"
      class="daily-report-side"
    />
    <WellSelect
      v-show="tab === '井'"
      :deptId="158"
      v-model="query.wellName"
      v-model:contract-name="query.contractName"
      class="daily-report-side"
    />

    <!-- 第二行左侧：自动落入第 2 行第 1 列 -->
    <!-- <div class="p-4 bg-white dark:bg-[#1d1e1f] shadow rounded-lg h-full">

    </div> -->

    <!-- 第二行右侧：自动落入第 2 行第 2 列 -->
    <div
      class="daily-report-table-card bg-white dark:bg-[#1d1e1f] shadow rounded-lg p-4 flex flex-col min-h-0"
    >
      <div class="flex-1 relative min-h-0">
        <el-auto-resizer class="absolute">
          <template #default="{ width, height }">
            <el-table
              :data="list"
              v-loading="loading"
              stripe
              class="absolute"
              :max-height="height"
              :height="height"
              show-overflow-tooltip
              :width="width"
              :cell-style="cellStyle"
              :row-class-name="rowClassName"
              :tree-props="{ hasChildren: 'lastGroupIdFlag' }"
              row-key="id"
              scrollbar-always-on
              :expand-row-keys="expandRowKeys"
              border
            >
              <el-table-column type="expand" fixed="left">
                <template #default="{ row }">
                  <div
                    class="flex items-center gap-8 h-10 px-14 sticky left-0 w-fit box-border bg-[var(--el-bg-color)]"
                  >
                    <el-tag>累计进尺: {{ row.groupIdFootage }} </el-tag>
                    <el-tag>累计进尺工作时间: {{ row.groupIdFootageTime }} </el-tag>
                    <el-tag>累计其它生产时间H(钻井) : {{ row.groupIdOtherProductTime }} </el-tag>
                    <el-tag>累计非生产时间H(钻井) : {{ row.groupIdZjNoProductTime }} </el-tag>
                    <el-tag>累计生产时间(修井) : {{ row.groupIdProductTime }} </el-tag>
                    <el-tag>累计非生产时间H(修井) : {{ row.groupIdXjNoProductTime }} </el-tag>
                    <el-tag>累计用电量(MWh) : {{ row.groupIdPower }} </el-tag>
                    <el-tag>累计油耗(升) : {{ row.groupIdFuel }} </el-tag>
                    <el-tag>平均运行时效 : {{ row.groupIdTransitTime }} </el-tag>
                    <el-tag>累计施工井数 : {{ row.groupConstructionWells }} </el-tag>
                    <el-tag>累计完工井数 : {{ row.groupCompletedWells }} </el-tag>
                  </div>
                </template>
              </el-table-column>
              <DailyTableColumn :columns="columns" company="ry" />
              <!-- <el-table-column label="操作" width="120px" align="center" fixed="right">
                <template #default="{ row }">
                  <el-button link type="success" v-hasPermi="['pms:iot-rh-daily-report:query']">
                    查看
                  </el-button>
                  <el-button
                    v-show="row.status === 0"
                    link
                    type="primary"
                    v-hasPermi="['pms:iot-rh-daily-report:create']"
                  >
                    编辑
                  </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>
</template>

<style scoped>
.daily-report-page {
  grid-template-rows: 62px minmax(0, 1fr);
}

.daily-report-side {
  height: 100% !important;
  min-height: 0 !important;
}

.daily-report-table-card {
  min-height: 0;
}

:deep(.el-form-item) {
  margin-bottom: 0;
}

.el-segmented {
  --el-border-radius-base: 8px;
  --el-segmented-padding: 8px;
}

:deep(.hide-expand-icon) {
  .el-table__expand-icon {
    display: none;
  }
}
</style>