fix 统计概览历史数据折线图的接口对接&UI 优化

src/components/DateSearch/index.vue

@@ -7,8 +7,8 @@
                 >7日</el-button
             >
             <el-button
-                :type="activeQuickSelect === 15 ? 'primary' : ''"
-                @click="handleQuickSelect(15)"
+                :type="activeQuickSelect === 14 ? 'primary' : ''"
+                @click="handleQuickSelect(14)"
                 >15日</el-button
             >
             <el-button

src/views/statistic/overview/components/stat-card.vue

@@ -1,75 +1,102 @@
 <template>
-  <div class="flex flex-col items-center justify-center w-full">
-    <el-statistic :title="title" :value="98500"> </el-statistic>
-    <v-chart ref="saleChartRef" :style="{ height: height }" :option="options" />
-  </div>
+    <div class="flex flex-col items-center justify-center w-full">
+        <el-statistic :title="title" :value="value"> </el-statistic>
+        <v-chart
+            ref="saleChartRef"
+            :style="{ height: height }"
+            :option="options"
+        />
+    </div>
 </template>
 <script setup>
-  import VChart from 'vue-echarts';
-  import { use } from 'echarts/core';
-  import { CanvasRenderer } from 'echarts/renderers';
-  import { LineChart } from 'echarts/charts';
-  import {
+import VChart from "vue-echarts";
+import { use } from "echarts/core";
+import { CanvasRenderer } from "echarts/renderers";
+import { LineChart } from "echarts/charts";
+import {
     GridComponent,
     TooltipComponent,
     LegendComponent,
-    ToolboxComponent
-  } from 'echarts/components';
-  import { Top, Bottom } from '@element-plus/icons-vue';
+    ToolboxComponent,
+} from "echarts/components";
 
-  const props = defineProps({
+const props = defineProps({
     title: {
-      type: String,
-      default: '统计'
+        type: String,
+        default: "统计",
     },
     width: {
-      type: String,
-      default: '100%'
+        type: String,
+        default: "100%",
     },
     height: {
-      type: String,
-      default: '120px'
-    }
-  });
-  // 按需加载echarts
-  use([
+        type: String,
+        default: "120px",
+    },
+    data: {
+        type: Array,
+        default: () => [],
+    },
+    chatAxis: {
+        type: Array,
+        default: () => [],
+    },
+    value: {
+        type: Number,
+        default: 0,
+    },
+});
+
+// 按需加载echarts
+use([
     CanvasRenderer,
     LineChart,
     GridComponent,
     TooltipComponent,
-    LegendComponent
-  ]);
+    LegendComponent,
+]);
 
-  const options = reactive({
+const options = reactive({
     tooltip: {
-      trigger: 'axis'
+        trigger: "axis",
     },
     legend: {
-      show: false,
-      data: ['新增用户数']
+        show: false,
+        data: ["新增用户数"],
     },
     grid: {
-      left: '2%',
-      right: '2%',
-      bottom: '2%',
-      top: '10%',
-      containLabel: true
+        left: "2%",
+        right: "2%",
+        bottom: "2%",
+        top: "10%",
+        containLabel: true,
     },
     xAxis: {
-      type: 'category',
-      boundaryGap: false,
-      data: ['1月', '2月', '3月', '4月', '5月']
+        type: "category",
+        boundaryGap: false,
+        data: props.chatAxis,
     },
     yAxis: {
-      type: 'value'
+        type: "value",
     },
     series: [
-      {
-        name: props.title,
-        type: 'line',
-        data: [120, 132, 234, 134, 90],
-        smooth: true
-      }
-    ]
-  });
+        {
+            name: props.title,
+            type: "line",
+            data: props.data,
+            smooth: true,
+        },
+    ],
+});
+
+// 监听数据变化，及时更新图表
+watch(
+    () => [props.data, props.chatAxis, props.title],
+    ([newData, newChatAxis, newTitle]) => {
+        options.xAxis.data = newChatAxis;
+        options.series[0].data = newData;
+        options.series[0].name = newTitle;
+    },
+    { deep: true, immediate: true }
+);
 </script>

src/views/statistic/overview/index.vue

@@ -21,7 +21,7 @@
             <el-divider></el-divider>
             <div class="flex gap-4">
                 <div class="flex-1 stat-card">
-                    <stat-card title="回收订单数"></stat-card>
+                    <stat-card title="回收订单数" :data="historyData.orderNumCharts" :chatAxis="historyData.chatAxis"></stat-card>
                 </div>
                 <div class="flex-1 stat-card">
                     <stat-card title="回收数量（本）"></stat-card>
@@ -61,30 +61,30 @@
                     <div style="flex: 4" class="flex flex-col">
                         <div class="flex gap-4">
                             <div class="flex-1 stat-card">
-                                <stat-card title="回收订单数"></stat-card>
+                                <stat-card title="回收订单数" :data="historyData.orderNumCharts" :chatAxis="historyData.chatAxis" :value="historyData.orderNum"></stat-card>
                             </div>
                             <div class="flex-1 stat-card">
-                                <stat-card title="回收数量（本）"></stat-card>
+                                <stat-card title="回收数量（本）" :value="historyData.bookNum" :data="historyData.bookNumCharts" :chatAxis="historyData.chatAxis"></stat-card>
                             </div>
                             <div class="flex-1 stat-card">
-                                <stat-card title="回收单本均价"></stat-card>
+                                <stat-card title="回收单本均价" :value="historyData.recycleAveragePrice" :data="historyData.recycleAveragePriceCharts" :chatAxis="historyData.chatAxis"></stat-card>
                             </div>
                             <div class="flex-1 stat-card">
-                                <stat-card title="审核订单数"></stat-card>
+                                <stat-card title="审核订单数" :value="historyData.auditNum" :data="historyData.auditNumCharts" :chatAxis="historyData.chatAxis"></stat-card>
                             </div>
                         </div>
                         <div class="flex gap-4 mt-4">
                             <div class="flex-1 stat-card">
-                                <stat-card title="签收订单数"></stat-card>
+                                <stat-card title="签收订单数" :value="historyData.signOrderNum" :data="historyData.signOrderNumCharts" :chatAxis="historyData.chatAxis"></stat-card>
                             </div>
                             <div class="flex-1 stat-card">
-                                <stat-card title="扫描次数"></stat-card>
+                                <stat-card title="扫描次数" :value="historyData.scanTimes" :data="historyData.scanTimesCharts" :chatAxis="historyData.chatAxis"></stat-card>
                             </div>
                             <div class="flex-1 stat-card">
-                                <stat-card title="扫描人数"></stat-card>
+                                <stat-card title="扫描人数" :value="historyData.scanUserNum" :data="historyData.scanUserNumCharts" :chatAxis="historyData.chatAxis"></stat-card>
                             </div>
                             <div class="flex-1 stat-card">
-                                <stat-card title="用户增长数"></stat-card>
+                                <stat-card title="用户增长数" :value="historyData.userRegNum" :data="historyData.userRegNumCharts" :chatAxis="historyData.chatAxis"></stat-card>
                             </div>
                         </div>
                     </div>
@@ -135,6 +135,10 @@ const auditRatioData = ref([
 ]);
 
 //获取历史数据汇总
+const historyData = ref({
+    orderNumCharts: [],
+    chatAxis: [],
+});
 const fetchHistoryData = async () => {
     let params = {
         statisticDateStart: dateRange.value[0],
@@ -149,6 +153,7 @@ const fetchHistoryData = async () => {
                 auditRatioData.value.forEach((item) => {
                     item.value = res.data.data[item.key] || 0;
                 });
+                historyData.value = res.data.data;
             }
         });
 };