feature 统计概览的中间实时部分接口对接

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

@@ -1,6 +1,6 @@
 <template>
     <div class="flex flex-col items-center justify-center w-full">
-        <el-statistic :title="title" :value="value"> </el-statistic>
+        <el-statistic :title="title" :value="value" value-style="font-size:30px;color:#409eef;line-height: 30px;"> </el-statistic>
         <v-chart
             ref="saleChartRef"
             :style="{ height: height }"
@@ -9,6 +9,7 @@
     </div>
 </template>
 <script setup>
+import { reactive, watch } from 'vue';
 import VChart from "vue-echarts";
 import { use } from "echarts/core";
 import { CanvasRenderer } from "echarts/renderers";
@@ -37,6 +38,10 @@ const props = defineProps({
         type: Array,
         default: () => [],
     },
+    yesterdayData: {
+        type: Array,
+        default: () => [],
+    },
     chatAxis: {
         type: Array,
         default: () => [],
@@ -62,12 +67,13 @@ const options = reactive({
     },
     legend: {
         show: false,
-        data: ["新增用户数"],
+        data: ["今日", "昨日"],
+        bottom: 0,
     },
     grid: {
         left: "2%",
         right: "2%",
-        bottom: "2%",
+        bottom: "0%",
         top: "10%",
         containLabel: true,
     },
@@ -81,21 +87,39 @@ const options = reactive({
     },
     series: [
         {
-            name: props.title,
+            name: "今日",
             type: "line",
             data: props.data,
             smooth: true,
+            lineStyle: {
+                color: '#409eef'
+            }
+        },
+        {
+            name: "昨日",
+            type: "line",
+            data: props.yesterdayData,
+            smooth: true,
+            lineStyle: {
+                color: '#67C23A'
+            }
         },
     ],
 });
 
 // 监听数据变化，及时更新图表
 watch(
-    () => [props.data, props.chatAxis, props.title],
-    ([newData, newChatAxis, newTitle]) => {
+    () => [props.data, props.yesterdayData, props.chatAxis],
+    ([newData, newYesterdayData, newChatAxis]) => {
         options.xAxis.data = newChatAxis;
         options.series[0].data = newData;
-        options.series[0].name = newTitle;
+        options.series[1].data = newYesterdayData;
+        if(newYesterdayData.length > 0) {
+            options.series[0].name = '今日';
+            options.series[1].name = '昨日';
+        } else {
+            options.series[0].name = props.title;
+        }
     },
     { deep: true, immediate: true }
 );

src/views/statistic/overview/index.vue

@@ -1,5 +1,5 @@
 <template>
-    <ele-page flex-table>
+    <ele-page flex-table v-loading="loading">
         <ele-card flex-table>
             <date-search class="mb-4" v-model="mapDateRange" @search="fetchProvinceData" position="left" />
             <map-card class="flex-1" :province-data="provinceData" />
@@ -22,38 +22,44 @@
                 </div>
             </div>
             <el-divider></el-divider>
+            <div class="flex justify-end mb-2" @click="fetchRealTimeData">
+                <div class="flex items-center gap-2 cursor-pointer">
+                    <el-icon><Refresh /></el-icon>
+                    <span>更新时间：{{ nowTime }}</span>
+                </div>
+            </div>
             <div class="flex gap-4">
                 <div class="flex-1 stat-card">
-                    <stat-card title="回收订单数" :data="realTimeData.orderNumTodayCharts" :chatAxis="realTimeData.chatAxis"></stat-card>
+                    <stat-card title="回收订单数" :data="realTimeData.orderNumTodayCharts" :yesterday-data="realTimeData.orderNumYestodayCharts" :chatAxis="realTimeData.chatAxis"></stat-card>
                 </div>
                 <div class="flex-1 stat-card">
-                    <stat-card title="回收数量（本）" :data="realTimeData.bookNumTodayCharts" :chatAxis="realTimeData.chatAxis"></stat-card>
+                    <stat-card title="回收数量（本）" :data="realTimeData.bookNumTodayCharts" :yesterday-data="realTimeData.bookNumYestodayCharts" :chatAxis="realTimeData.chatAxis"></stat-card>
                 </div>
                 <div class="flex-1 stat-card">
-                    <stat-card title="回收单本均价" :data="realTimeData.recycleAveragePriceTodayCharts" :chatAxis="realTimeData.chatAxis"></stat-card>
+                    <stat-card title="回收单本均价" :data="realTimeData.recycleAveragePriceTodayCharts" :yesterday-data="realTimeData.recycleAveragePriceYestodayCharts" :chatAxis="realTimeData.chatAxis"></stat-card>
                 </div>
                 <div class="flex-1 stat-card">
-                    <stat-card title="待审核订单数" :data="realTimeData.waitAuditOrderNumTodayCharts" :chatAxis="realTimeData.chatAxis"></stat-card>
+                    <stat-card title="待审核订单数" :data="realTimeData.waitAuditOrderNumTodayCharts" :yesterday-data="realTimeData.waitAuditOrderNumYestodayCharts" :chatAxis="realTimeData.chatAxis"></stat-card>
                 </div>
                 <div class="flex-1 stat-card">
-                    <stat-card title="待签收订单数" :data="realTimeData.waitSignOrderNumTodayCharts" :chatAxis="realTimeData.chatAxis"></stat-card>
+                    <stat-card title="待签收订单数" :data="realTimeData.waitSignOrderNumTodayCharts" :yesterday-data="realTimeData.waitSignOrderNumYestodayCharts" :chatAxis="realTimeData.chatAxis"></stat-card>
                 </div>
             </div>
             <div class="flex gap-4 mt-4">
                 <div class="flex-1 stat-card">
-                    <stat-card title="今日扫描次数" :data="realTimeData.scanTimesTodayCharts" :chatAxis="realTimeData.chatAxis"></stat-card>
+                    <stat-card title="今日扫描次数" :data="realTimeData.scanTimesTodayCharts" :yesterday-data="realTimeData.scanTimesYestodayCharts" :chatAxis="realTimeData.chatAxis"></stat-card>
                 </div>
                 <div class="flex-1 stat-card">
-                    <stat-card title="今日扫描人数" :data="realTimeData.scanUserNumTodayCharts" :chatAxis="realTimeData.chatAxis"></stat-card>
+                    <stat-card title="今日扫描人数" :data="realTimeData.scanUserNumTodayCharts" :yesterday-data="realTimeData.scanUserNumYestodayCharts" :chatAxis="realTimeData.chatAxis"></stat-card>
                 </div>
                 <div class="flex-1 stat-card">
-                    <stat-card title="用户增长数" :data="realTimeData.userRegNumTodayCharts" :chatAxis="realTimeData.chatAxis"></stat-card>
+                    <stat-card title="用户增长数" :data="realTimeData.userRegNumTodayCharts" :yesterday-data="realTimeData.userRegNumYestodayCharts" :chatAxis="realTimeData.chatAxis"></stat-card>
                 </div>
                 <div class="flex-1 stat-card">
-                    <stat-card title="待审核金额" :data="realTimeData.waitAuditMoneyTodayCharts" :chatAxis="realTimeData.chatAxis"></stat-card>
+                    <stat-card title="待审核金额" :data="realTimeData.waitAuditMoneyTodayCharts" :yesterday-data="realTimeData.waitAuditMoneyYestodayCharts" :chatAxis="realTimeData.chatAxis"></stat-card>
                 </div>
                 <div class="flex-1 stat-card">
-                    <stat-card title="待打款金额" :data="realTimeData.waitPayoutMoneyTodayCharts" :chatAxis="realTimeData.chatAxis"></stat-card>
+                    <stat-card title="待打款金额" :data="realTimeData.waitPayoutMoneyTodayCharts" :yesterday-data="realTimeData.waitPayoutMoneyYestodayCharts" :chatAxis="realTimeData.chatAxis"></stat-card>
                 </div>
             </div>
             <el-divider></el-divider>
@@ -107,6 +113,7 @@ import mapCard from "@/views/statistic/overview/components/map-card.vue";
 import statCard from "@/views/statistic/overview/components/stat-card.vue";
 import pieChart from "@/views/statistic/overview/components/pie-chart.vue";
 import DateSearch from "@/components/DateSearch/index.vue";
+import { Refresh } from "@element-plus/icons-vue";
 import dayjs from "dayjs";
 import request from "@/utils/request";
 import { onMounted, ref } from "vue";
@@ -179,11 +186,18 @@ const fetchProvinceData = async () => {
 
 // 获取实时数据
 const realTimeData = ref({});
+const loading = ref(false);
+const nowTime = ref('');
 const fetchRealTimeData = async () => {
+    loading.value = true;
     request.get("/order/recycleStatisticOverview/realtime").then((res) => {
         if (res.data.code === 200) {
+            loading.value = false;
             realTimeData.value = res.data.data;
+            nowTime.value = res.data.data.nowTime || dayjs().format('YYYY-MM-DD HH:mm:ss');
         }
+    }).finally(() => {
+        loading.value = false;
     });
 };
 
@@ -208,4 +222,4 @@ onMounted(() => {
         text-align: center;
     }
 }
-</style>
+</style>