feat(M08-B): 补保洁统计趋势

admin/src/components/CleaningStatisticsPanel.vue

@@ -71,6 +71,30 @@
         </section>
       </div>
 
+      <section class="stat-block">
+        <header>
+          <h3>每日趋势</h3>
+          <span>任务 / 待验 / 发放</span>
+        </header>
+        <div class="trend-list">
+          <div v-for="row in statistics.trend" :key="row.date" class="trend-row">
+            <div class="trend-date">{{ row.date }}</div>
+            <div class="trend-track" aria-label="每日任务趋势">
+              <span class="trend-bar" :style="{ width: trendWidth(row.taskTotal) }" />
+            </div>
+            <div class="trend-meta">
+              <strong>{{ row.taskTotal }}</strong>
+              <span>待验 {{ row.pendingReview }}</span>
+              <span>完成 {{ row.completed }}</span>
+              <span>驳回 {{ row.rejected }}</span>
+              <span>奖励 {{ money(row.rewardCents) }}</span>
+              <span>发放 {{ money(row.paidSettlementCents) }}</span>
+            </div>
+          </div>
+          <el-empty v-if="statistics.trend.length === 0" description="暂无趋势数据" :image-size="72" />
+        </div>
+      </section>
+
       <section class="stat-block">
         <header>
           <h3>门店明细</h3>
@@ -116,7 +140,7 @@
 </template>
 
 <script setup lang="ts">
-import { reactive, watch } from 'vue';
+import { computed, reactive, watch } from 'vue';
 import { RefreshCw, Search } from '@lucide/vue';
 import { compactText, money } from '../format';
 import type { CleaningStatistics } from '../types';
@@ -138,6 +162,7 @@ const quickOptions = [
   { label: '近7天', value: '7d' },
   { label: '本月', value: 'month' }
 ];
+const maxTrendTotal = computed(() => Math.max(1, ...props.statistics.trend.map((row) => row.taskTotal)));
 
 watch(
   () => props.filters,
@@ -174,4 +199,8 @@ function formatDate(date: Date) {
   const day = String(date.getDate()).padStart(2, '0');
   return `${year}-${month}-${day}`;
 }
+
+function trendWidth(total: number) {
+  return `${Math.max(6, Math.round((total / maxTrendTotal.value) * 100))}%`;
+}
 </script>