pms-iot-vue/src/components/DailyTableColumn/index.vue

<template>
  <template v-for="(col, index) in columns" :key="index">
    <el-table-column v-if="col.children" :label="col.label" align="center">
      <template v-for="(child, childIndex) in col.children" :key="childIndex">
        <el-table-column v-if="child.isTag" v-bind="child" align="center" resizable>
          <template #default="{ row }">
            <dict-tag v-if="child.dictType" :type="child.dictType!" :value="row[child.prop!]" />
            <el-tag :type="tagType(row[child.prop!])" v-else>{{
              child.formatter?.(row) || ''
            }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column v-else v-bind="child" align="center" resizable />
      </template>
    </el-table-column>
    <el-table-column v-else-if="col.isTag" v-bind="col" align="center" resizable>
      <template #default="{ row }">
        <dict-tag v-if="col.dictType" :type="col.dictType!" :value="row[col.prop!]" />
        <el-tag :type="tagType(row[col.prop!])" v-else>{{ col.formatter?.(row) || '' }}</el-tag>
      </template>
    </el-table-column>
    <el-table-column
      v-else-if="col.label === '生产动态'"
      v-bind="col"
      align="center"
      resizable
      :show-overflow-tooltip="true">
      <template v-if="company === 'rd'" #default="{ row }">
        <div v-if="row.reportDetails && row.reportDetails.length > 0" class="py-2">
          <el-popover placement="right" trigger="hover" width="320" popper-class="!p-0">
            <template #reference>
              <el-badge :value="row.reportDetails.length" type="primary" class="max-w-full">
                <div
                  class="w-58 flex flex-col bg-gray-200/80 hover:bg-blue-100 transition-colors relative group cursor-pointer px-2 py-0.5 rounded gap-y-2">
                  <div class="flex items-center gap-x-2">
                    <div class="flex items-center">
                      <div class="i-carbon-calendar mr-1 -translate-y-[0.5px]"></div>
                      <div class="font-medium mr-2">
                        {{ getReportDetailsTimeRange(row) }}
                      </div>
                    </div>

                    <div class="ml-auto group-hover:text-blue-600 font-medium">
                      {{ getReportDetailsDuration(row.reportDetails) }} H
                    </div>
                  </div>
                  <!--
                            <div class="flex items-center">
                              <div class="font-medium flex-shrink-0">施工详情：</div>
                              <el-tooltip
                                effect="dark"
                                :content="row.reportDetails[0].constructionDetail"
                                placement="top"
                                popper-class="max-w-100"
                              >
                                <span
                                  class="font-medium truncate group-hover:text-blue-600 transition-colors"
                                >
                                  {{ row.reportDetails[0].constructionDetail || '-' }}
                                </span>
                              </el-tooltip>
                            </div> -->
                </div>
              </el-badge>
            </template>
            <el-scrollbar max-height="480px" view-class="!p-3 flex flex-col gap-y-2">
              <div
                v-for="(item, index) in row.reportDetails"
                :key="index"
                class="flex flex-col bg-gray-200/80 hover:bg-blue-100 transition-colors relative group cursor-pointer p-2 rounded gap-y-2 max-w-80">
                <div class="flex items-center gap-x-2">
                  <div class="flex items-center">
                    <div class="i-carbon-calendar mr-1 -translate-y-[0.5px]"></div>
                    <div class="font-medium mr-2">{{
                      dayjs(row.createTime).format('YYYY-MM-DD')
                    }}</div>
                    <div class="flex items-center">
                      <span>{{ formatT(item.startTime) }}</span>
                      <span class="mx-1">-</span>
                      <span>{{ formatT(item.endTime) }}</span>
                    </div>
                  </div>

                  <div class="ml-auto group-hover:text-blue-600 font-medium">
                    {{ item.duration }} H
                  </div>
                </div>

                <div class="flex items-center">
                  <div class="font-medium flex-shrink-0">施工详情：</div>
                  <span
                    class="font-medium group-hover:text-blue-600 transition-colors break-all whitespace-pre-wrap">
                    {{ item.constructionDetail || '-' }}
                  </span>
                </div>
              </div>
            </el-scrollbar>
          </el-popover>
        </div>
        <div class="truncate" v-else-if="row.productionStatus">{{ row.productionStatus }}</div>
        <span v-else class="text-gray-300">-</span>
      </template>
      <template v-else-if="company === 'ry'" #default="{ row }">
        <div v-if="row.reportDetails && row.reportDetails.length > 0" class="py-2">
          <el-popover placement="right" trigger="hover" width="320" popper-class="!p-0">
            <template #reference>
              <el-badge :value="row.reportDetails.length" type="primary" class="max-w-full">
                <div
                  class="w-72 flex flex-col bg-gray-200/80 hover:bg-blue-100 transition-colors relative group cursor-pointer px-2 py-0.5 rounded gap-y-2">
                  <div class="flex items-center gap-x-2">
                    <div class="flex items-center">
                      <div class="i-carbon-calendar mr-1 -translate-y-[0.5px]"></div>
                      <div class="font-medium mr-2">
                        {{ getReportDetailsTimeRange(row) }}
                      </div>
                    </div>

                    <div class="ml-auto group-hover:text-blue-600 font-medium">
                      {{ getReportDetailsDuration(row.reportDetails) }} H
                    </div>
                  </div>

                  <!-- <div class="flex items-center">
                            <div class="font-medium flex-shrink-0">结束井深(m)：</div>
                            <span
                              class="font-medium truncate group-hover:text-blue-600 transition-colors"
                              >{{ row.reportDetails[0].currentDepth || '-' }} m
                            </span>
                          </div>

                          <div class="flex items-center">
                            <div class="font-medium flex-shrink-0">工况：</div>
                            <el-tooltip
                              effect="dark"
                              :content="row.reportDetails[0].currentOperation"
                              placement="top"
                              popper-class="max-w-100"
                            >
                              <span
                                class="font-medium truncate group-hover:text-blue-600 transition-colors"
                              >
                                {{ row.reportDetails[0].currentOperation || '-' }}
                              </span>
                            </el-tooltip>
                          </div>

                          <div class="flex items-center">
                            <div class="font-medium flex-shrink-0">详细描述：</div>
                            <el-tooltip
                              effect="dark"
                              :content="row.reportDetails[0].constructionDetail"
                              placement="top"
                              popper-class="max-w-100"
                            >
                              <span
                                class="font-medium truncate group-hover:text-blue-600 transition-colors"
                              >
                                {{ row.reportDetails[0].constructionDetail || '-' }}
                              </span>
                            </el-tooltip>
                          </div> -->
                </div>
              </el-badge>
            </template>
            <el-scrollbar max-height="480px" view-class="!p-3 flex flex-col gap-y-2">
              <div
                v-for="(item, index) in row.reportDetails"
                :key="index"
                class="flex flex-col bg-gray-200/80 hover:bg-blue-100 transition-colors relative group cursor-pointer p-2 rounded gap-y-2">
                <div class="flex items-center gap-x-2">
                  <div class="flex items-center">
                    <div class="i-carbon-calendar mr-1 -translate-y-[0.5px]"></div>
                    <div class="font-medium mr-2">{{
                      dayjs(item.reportDate).format('YYYY-MM-DD')
                    }}</div>
                    <div class="flex items-center">
                      <span>{{ formatT(item.startTime) }}</span>
                      <span class="mx-1">-</span>
                      <span>{{ formatT(item.endTime) }}</span>
                    </div>
                  </div>

                  <div class="ml-auto group-hover:text-blue-600 font-medium">
                    {{ item.duration }} H
                  </div>
                </div>

                <div class="flex items-center">
                  <div class="font-medium flex-shrink-0">结束井深(m)：</div>
                  <span class="font-medium truncate group-hover:text-blue-600 transition-colors"
                    >{{ item.currentDepth || '-' }} m
                  </span>
                </div>

                <div class="flex items-center">
                  <div class="font-medium flex-shrink-0">工况：</div>
                  <span class="font-medium group-hover:text-blue-600 transition-colors">
                    {{ item.currentOperation || '-' }}
                  </span>
                </div>

                <div class="flex items-center">
                  <div class="font-medium flex-shrink-0">详细描述：</div>
                  <span
                    class="font-medium break-all whitespace-pre-wrap group-hover:text-blue-600 transition-colors">
                    {{ item.constructionDetail || '-' }}
                  </span>
                </div>
              </div>
            </el-scrollbar>
          </el-popover>
        </div>
        <span v-else class="text-gray-300">-</span>
      </template>
      <template v-else #default="{ row }">
        <!-- <div v-if="row.reportDetails && row.reportDetails.length > 0" class="py-2">
          <el-popover placement="right" trigger="hover" width="320" popper-class="p-0!">
            <template #reference>
              <el-badge :value="row.reportDetails.length" type="primary" class="max-w-full">
                <div
                  class="w-72 flex flex-col bg-gray-200/80 hover:bg-blue-100 transition-colors relative group cursor-pointer px-2 py-0.5 rounded gap-y-2">
                  <div class="flex items-center gap-x-2">
                    <div class="flex items-center">
                      <div class="i-carbon-calendar mr-1 -translate-y-[0.5px]"></div>
                      <div class="font-medium mr-2">
                        {{ getReportDetailsTimeRange(row) }}
                      </div>
                    </div>

                    <div class="ml-auto group-hover:text-blue-600 font-medium">
                      {{ getReportDetailsDuration(row.reportDetails) }} H
                    </div>
                  </div>

      
                </div>
              </el-badge>
            </template>
            <el-scrollbar max-height="480px" view-class="!p-3 flex flex-col gap-y-2">
              <div
                v-for="(item, index) in row.reportDetails"
                :key="index"
                class="flex flex-col bg-gray-200/80 hover:bg-blue-100 transition-colors relative group cursor-pointer p-2 rounded gap-y-2">
                <div class="flex items-center gap-x-2">
                  <div class="flex items-center">
                    <div class="i-carbon-calendar mr-1 -translate-y-[0.5px]"></div>
                    <div class="font-medium mr-2">{{
                      dayjs(item.reportDate).format('YYYY-MM-DD')
                    }}</div>
                    <div class="flex items-center">
                      <span>{{ formatT(item.startTime) }}</span>
                      <span class="mx-1">-</span>
                      <span>{{ formatT(item.endTime) }}</span>
                    </div>
                  </div>

                  <div class="ml-auto group-hover:text-blue-600 font-medium">
                    {{ item.duration }} H
                  </div>
                </div>

                <div class="flex items-center">
                  <div class="font-medium flex-shrink-0">工况：</div>
                  <span
                    class="font-medium break-all whitespace-pre-wrap group-hover:text-blue-600 transition-colors">
                    {{ item.currentOperation || '-' }}
                  </span>
                </div>

                <div class="flex items-center">
                  <div class="font-medium flex-shrink-0">详细描述：</div>
                  <span
                    class="font-medium break-all whitespace-pre-wrap group-hover:text-blue-600 transition-colors">
                    {{ item.constructionDetail || '-' }}
                  </span>
                </div>
              </div>
            </el-scrollbar>
          </el-popover>
        </div> -->
        <span>{{ row.productionStatus }}</span>
      </template>
    </el-table-column>
    <el-table-column v-else v-bind="col" align="center" resizable />
  </template>
</template>

<script setup lang="ts">
import { formatT } from '@/utils/formatTime'
import { dayjs } from 'element-plus'

defineOptions({
  name: 'DailyTableColumn'
})

interface ColumnProps {
  label: string
  prop?: string
  children?: ColumnProps[]
  isTag?: boolean
  dictType?: string
  formatter?: (row: any) => any
  [key: string]: any
}

const props = defineProps<{
  columns: ColumnProps[]
  company: string
}>()

const { columns, company } = toRefs(props)

const getReportDetailsDuration = (reportDetails: any[] = []) =>
  Number(reportDetails.reduce((sum, item) => sum + Number(item.duration || 0), 0).toFixed(2))

const formatReportDetailTime = (time?: number[] | string) =>
  Array.isArray(time) ? formatT(time) : time || ''

const getReportDetailsTimeRange = (row: any) => {
  const reportDetails = row.reportDetails || []
  const first = reportDetails[0]
  const last = reportDetails.at(-1)
  if (!first || !last) return ''

  const startDate = first.reportDate ?? row.createTime
  const endDate = last.endDateTime ?? last.reportDate ?? row.createTime
  const startTime = formatReportDetailTime(first.startTime)
  const endTime = formatReportDetailTime(last.endTime)

  return `${dayjs(startDate).format('YYYY-MM-DD')} ${startTime} - ${dayjs(endDate).format(
    'YYYY-MM-DD'
  )} ${endTime}`
}

const tagType = (status: number) => {
  switch (status) {
    case 0:
      return 'info'
    case 10:
      return 'primary'
    case 20:
      return 'success'
    case 30:
      return 'danger'
  }
}
</script>