refactor(wms): 重构发货报表页面布局和数据展示逻辑

- 将汇总信息从本地计算改为使用接口返回数据
- 优化表格和卡片布局结构
- 添加空状态显示
- 改进数据格式化方法

klp-ui/src/views/wms/delivery/report/index.vue

@@ -1,42 +1,54 @@
 <template>
-  <div class="app-container">
+  <div class="delivery-report">
     <!-- 时间筛选 -->
     <div class="filter-container">
-      <el-date-picker v-model="dateRange" type="daterange" range-separator="至" start-placeholder="开始日期"
+      <el-date-picker
-        end-placeholder="结束日期" value-format="yyyy-MM-dd" :default-time="['00:00:00', '23:59:59']"
+        v-model="dateRange"
-        @change="handleDateChange" />
+        type="daterange"
+        range-separator="至"
+        start-placeholder="开始日期"
+        end-placeholder="结束日期"
+        value-format="yyyy-MM-dd"
+        :default-time="['00:00:00', '23:59:59']"
+        @change="handleDateChange"
+      />
       <el-button type="primary" @click="getReport">查询</el-button>
       <el-button @click="resetDate">重置</el-button>
     </div>
 
     <!-- 汇总信息 -->
-    <el-card class="summary-card">
+    <el-card class="summary-card" v-if="summary">
       <template #header>
         <div class="card-header">
           <span>发货报表汇总</span>
         </div>
       </template>
-      <el-descriptions :column="4" border>
+      <el-descriptions :column="3" border>
-        <el-descriptions-item label="产品种类">{{ summary.productCount }}</el-descriptions-item>
+        <el-descriptions-item label="总运单数">{{ summary.waybillCount || 0 }}</el-descriptions-item>
-        <el-descriptions-item label="总运单数">{{ summary.totalWaybillCount }}</el-descriptions-item>
+        <el-descriptions-item label="总卷数">{{ summary.coilCount || 0 }}</el-descriptions-item>
-        <el-descriptions-item label="总卷数">{{ summary.totalCoilCount }}</el-descriptions-item>
+        <el-descriptions-item label="总重量(吨)">{{ formatWeight(summary.totalWeight) }}</el-descriptions-item>
-        <el-descriptions-item label="总重量(吨)">{{ summary.totalWeight }}</el-descriptions-item>
+        <el-descriptions-item label="日均运单数">{{ formatDailyValue(summary.dailyWaybillCount) }}</el-descriptions-item>
-        <el-descriptions-item label="统计周期">{{ summary.dateRange }}</el-descriptions-item>
+        <el-descriptions-item label="日均卷数">{{ formatDailyValue(summary.dailyCoilCount) }}</el-descriptions-item>
-        <el-descriptions-item label="日均运单数">{{ summary.avgDailyWaybillCount }}</el-descriptions-item>
+        <el-descriptions-item label="日均重量(吨)">{{ formatWeight(summary.dailyWeight) }}</el-descriptions-item>
-        <el-descriptions-item label="日均卷数">{{ summary.avgDailyCoilCount }}</el-descriptions-item>
+        <el-descriptions-item label="开始时间" :span="2">{{ summary.startTime || '-' }}</el-descriptions-item>
-        <el-descriptions-item label="日均重量(吨)">{{ summary.avgDailyWeight }}</el-descriptions-item>
+        <el-descriptions-item label="结束时间" :span="2">{{ summary.endTime || '-' }}</el-descriptions-item>
-
       </el-descriptions>
     </el-card>
 
     <!-- 详细数据表格 -->
-    <el-card class="table-card">
+    <el-card class="table-card" v-if="details && details.length > 0">
       <template #header>
         <div class="card-header">
-          <span>详细发货数据</span>
+          <span>产品发货明细</span>
+          <span>共 {{ details.length }} 种产品</span>
         </div>
       </template>
-      <el-table :data="reports" style="width: 100%" height="400" stripe v-loading="loading">
+      <el-table
+        :data="details"
+        style="width: 100%"
+        stripe
+        v-loading="loading"
+      >
         <el-table-column prop="productName" label="产品名称" min-width="120" fixed="left" />
         <el-table-column prop="waybillCount" label="运单数量" min-width="100" align="center">
           <template #default="{ row }">
@@ -70,6 +82,11 @@
         </el-table-column>
       </el-table>
     </el-card>
+
+    <!-- 空状态 -->
+    <el-card v-else-if="!loading">
+      <el-empty description="暂无数据" />
+    </el-card>
   </div>
 </template>
 
@@ -80,19 +97,10 @@ export default {
   name: 'DeliveryReport',
   data() {
     return {
-      reports: [],
+      summary: null,
+      details: [],
       dateRange: [],
-      loading: false,
+      loading: false
-      summary: {
-        productCount: 0,
-        totalWaybillCount: 0,
-        totalCoilCount: 0,
-        totalWeight: 0,
-        avgDailyWaybillCount: 0,
-        avgDailyCoilCount: 0,
-        avgDailyWeight: 0,
-        dateRange: ''
-      }
     }
   },
   mounted() {
@@ -105,7 +113,7 @@ export default {
       const now = new Date()
       const firstDay = new Date(now.getFullYear(), now.getMonth(), 1)
       const lastDay = new Date(now.getFullYear(), now.getMonth() + 1, 0)
-
+      
       this.dateRange = [
         this.formatDate(firstDay),
         this.formatDate(lastDay)
@@ -146,67 +154,28 @@ export default {
         }
 
         const res = await getDeliveryReport(query)
-        this.reports = res.data || []
+        this.summary = res.data?.summary || null
-        this.calculateSummary()
+        this.details = res.data?.details || []
       } catch (error) {
         console.error('获取发货报表失败:', error)
         this.$message.error('获取数据失败')
+        this.summary = null
+        this.details = []
       } finally {
         this.loading = false
       }
     },
 
-    // 计算汇总数据
-    calculateSummary() {
-      const summary = {
-        productCount: this.reports.length,
-        totalWaybillCount: 0,
-        totalCoilCount: 0,
-        totalWeight: 0,
-        avgDailyWaybillCount: 0,
-        avgDailyCoilCount: 0,
-        avgDailyWeight: 0,
-        dateRange: `${this.dateRange[0]} 至 ${this.dateRange[1]}`
-      }
-
-      // 计算总和
-      this.reports.forEach(item => {
-        summary.totalWaybillCount += Number(item.waybillCount) || 0
-        summary.totalCoilCount += Number(item.coilCount) || 0
-        summary.totalWeight += Number(item.totalWeight) || 0
-      })
-
-      // 计算日均值
-      const days = this.calculateDays()
-      if (days > 0) {
-        summary.avgDailyWaybillCount = (summary.totalWaybillCount / days).toFixed(2)
-        summary.avgDailyCoilCount = (summary.totalCoilCount / days).toFixed(2)
-        summary.avgDailyWeight = (summary.totalWeight / days).toFixed(3)
-      }
-
-      this.summary = summary
-    },
-
-    // 计算日期范围内的天数
-    calculateDays() {
-      if (!this.dateRange || this.dateRange.length !== 2) return 0
-
-      const start = new Date(this.dateRange[0])
-      const end = new Date(this.dateRange[1])
-      const timeDiff = end.getTime() - start.getTime()
-      return Math.ceil(timeDiff / (1000 * 3600 * 24)) + 1 // 包含起止日期
-    },
-
     // 格式化重量显示
     formatWeight(weight) {
-      if (!weight) return '0.000'
+      if (!weight && weight !== 0) return '0.000'
       const num = Number(weight)
       return isNaN(num) ? '0.000' : num.toFixed(3)
     },
 
     // 格式化日均值显示
     formatDailyValue(value) {
-      if (!value) return '0.00'
+      if (!value && value !== 0) return '0.00'
       const num = Number(value)
       return isNaN(num) ? '0.00' : num.toFixed(2)
     }