调整列表生产动态显示效果

src/components/DailyTableColumn/index.vue

@@ -37,18 +37,13 @@
                   <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(row.reportDetails[0].startTime) }}</span>
-                        <span class="mx-1">-</span>
-                        <span>{{ formatT(row.reportDetails[0].endTime) }}</span>
+                      <div class="font-medium mr-2">
+                        {{ getReportDetailsTimeRange(row) }}
                       </div>
                     </div>
 
                     <div class="ml-auto group-hover:text-blue-600 font-medium">
-                      {{ row.reportDetails[0].duration }} H
+                      {{ getReportDetailsDuration(row.reportDetails) }} H
                     </div>
                   </div>
                   <!--
@@ -120,18 +115,13 @@
                   <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.reportDetails[0].reportDate).format('YYYY-MM-DD')
-                      }}</div>
-                      <div class="flex items-center">
-                        <span>{{ formatT(row.reportDetails[0].startTime) }}</span>
-                        <span class="mx-1">-</span>
-                        <span>{{ formatT(row.reportDetails[0].endTime) }}</span>
+                      <div class="font-medium mr-2">
+                        {{ getReportDetailsTimeRange(row) }}
                       </div>
                     </div>
 
                     <div class="ml-auto group-hover:text-blue-600 font-medium">
-                      {{ row.reportDetails[0].duration }} H
+                      {{ getReportDetailsDuration(row.reportDetails) }} H
                     </div>
                   </div>
 
@@ -240,18 +230,13 @@
                   <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.reportDetails[0].reportDate).format('YYYY-MM-DD')
-                      }}</div>
-                      <div class="flex items-center">
-                        <span>{{ formatT(row.reportDetails[0].startTime) }}</span>
-                        <span class="mx-1">-</span>
-                        <span>{{ formatT(row.reportDetails[0].endTime) }}</span>
+                      <div class="font-medium mr-2">
+                        {{ getReportDetailsTimeRange(row) }}
                       </div>
                     </div>
 
                     <div class="ml-auto group-hover:text-blue-600 font-medium">
-                      {{ row.reportDetails[0].duration }} H
+                      {{ getReportDetailsDuration(row.reportDetails) }} H
                     </div>
                   </div>
 
@@ -374,6 +359,28 @@ const props = defineProps<{
 
 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:

src/views/pms/iotrddailyreport/index.vue

@@ -90,6 +90,28 @@ const total = ref(0)
 
 const loading = ref(false)
 
+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 loadList = useDebounceFn(async function () {
   loading.value = true
   try {
@@ -357,18 +379,13 @@ onMounted(() => {
                             <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(row.reportDetails[0].startTime) }}</span>
-                                  <span class="mx-1">-</span>
-                                  <span>{{ formatT(row.reportDetails[0].endTime) }}</span>
+                                <div class="font-medium mr-2">
+                                  {{ getReportDetailsTimeRange(row) }}
                                 </div>
                               </div>
 
                               <div class="ml-auto group-hover:text-blue-600 font-medium">
-                                {{ row.reportDetails[0].duration }} H
+                                {{ getReportDetailsDuration(row.reportDetails) }} H
                               </div>
                             </div>
                             <!--

src/views/pms/iotrydailyreport/ry-table.vue

@@ -85,6 +85,28 @@ const { list, loading, total, pageNo, pageSize, showAction, isIndex } = toRefs(p
 
 const { ZmTable, ZmTableColumn } = useTableComponents<ListItem>()
 
+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 cellStyle = ({ row, column }: { row: ListItem; column: any }) => {
   // 1. 红色预警：当日油耗大于 9000 升
   if (column.property === 'dailyFuel') {
@@ -241,18 +263,13 @@ function handleCurrentChange(val: number) {
                           <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.reportDetails[0].reportDate).format('YYYY-MM-DD')
-                              }}</div>
-                              <div class="flex items-center">
-                                <span>{{ formatT(row.reportDetails[0].startTime) }}</span>
-                                <span class="mx-1">-</span>
-                                <span>{{ formatT(row.reportDetails[0].endTime) }}</span>
+                              <div class="font-medium mr-2">
+                                {{ getReportDetailsTimeRange(row) }}
                               </div>
                             </div>
 
                             <div class="ml-auto group-hover:text-blue-600 font-medium">
-                              {{ row.reportDetails[0].duration }} H
+                              {{ getReportDetailsDuration(row.reportDetails) }} H
                             </div>
                           </div>
 

src/views/pms/iotrydailyreport/ry-xj-table.vue

@@ -97,6 +97,28 @@ const { list, loading, total, pageNo, pageSize, showAction, isIndex } = toRefs(p
 
 const { ZmTable, ZmTableColumn } = useTableComponents<ListItem>()
 
+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 transitTime = (row: ListItem) => {
   const { ratedProductionTime = 0, productionTime = 0 } = row
 
@@ -272,18 +294,13 @@ function handleCurrentChange(val: number) {
                           <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.reportDetails[0].reportDate).format('YYYY-MM-DD')
-                              }}</div>
-                              <div class="flex items-center">
-                                <span>{{ formatT(row.reportDetails[0].startTime) }}</span>
-                                <span class="mx-1">-</span>
-                                <span>{{ formatT(row.reportDetails[0].endTime) }}</span>
+                              <div class="font-medium mr-2">
+                                {{ getReportDetailsTimeRange(row) }}
                               </div>
                             </div>
 
                             <div class="ml-auto group-hover:text-blue-600 font-medium">
-                              {{ row.reportDetails[0].duration }} H
+                              {{ getReportDetailsDuration(row.reportDetails) }} H
                             </div>
                           </div>