From f959ab4b928d02ae0e1d3c4b623ae41fdce83e20 Mon Sep 17 00:00:00 2001
From: "pikachu1995@126.com" <pikachu1995@126.com>
Date: Mon, 17 Aug 2026 11:07:12 +0800
Subject: [PATCH] =?UTF-8?q?feat(statistics):=20=E6=B7=BB=E5=8A=A0=E8=B4=AD?=
 =?UTF-8?q?=E7=89=A9=E8=BD=A6=E7=BB=9F=E8=AE=A1=E5=8A=9F=E8=83=BD=20-=20?=
 =?UTF-8?q?=E6=96=B0=E5=A2=9E=E8=B4=AD=E7=89=A9=E8=BD=A6=E6=A6=82=E5=86=B5?=
 =?UTF-8?q?=E3=80=81=E5=8A=A0=E8=B4=AD=E4=B8=8E=E5=BC=83=E8=B4=AD=E6=97=A5?=
 =?UTF-8?q?=E6=8A=A5=E3=80=81=E5=8A=A0=E8=B4=AD=E6=8E=92=E8=A1=8C=20TOP10?=
 =?UTF-8?q?=20=E7=9A=84=20API=20=E6=8E=A5=E5=8F=A3=20-=20=E6=9B=B4?=
 =?UTF-8?q?=E6=96=B0=E8=B7=AF=E7=94=B1=E9=85=8D=E7=BD=AE=E4=BB=A5=E6=94=AF?=
 =?UTF-8?q?=E6=8C=81=E8=B4=AD=E7=89=A9=E8=BD=A6=E7=BB=9F=E8=AE=A1=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=20-=20=E5=88=9B=E5=BB=BA=E8=B4=AD=E7=89=A9=E8=BD=A6?=
 =?UTF-8?q?=E7=BB=9F=E8=AE=A1=E9=A1=B5=E9=9D=A2=E7=BB=84=E4=BB=B6=EF=BC=8C?=
 =?UTF-8?q?=E5=B1=95=E7=A4=BA=E7=9B=B8=E5=85=B3=E7=BB=9F=E8=AE=A1=E6=95=B0?=
 =?UTF-8?q?=E6=8D=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 manager/src/api/statistics.js         |  15 ++
 manager/src/router/router.js          |   7 +
 manager/src/views/statistics/cart.vue | 271 ++++++++++++++++++++++++++
 3 files changed, 293 insertions(+)
 create mode 100644 manager/src/views/statistics/cart.vue

diff --git a/manager/src/api/statistics.js b/manager/src/api/statistics.js
index 22147784..1059c20b 100644
--- a/manager/src/api/statistics.js
+++ b/manager/src/api/statistics.js
@@ -150,3 +150,18 @@ export const getGoodsSalesSummaryReport = (params) => {
 export const exportGoodsSalesSummaryReport = (params) => {
   return getRequest("/statistics/report/goods-sales-summary/export", params, "blob");
 };
+
+/** 购物车概况 */
+export const getCartOverview = (params) => {
+  return getRequest("/statistics/cart/overview", params);
+};
+
+/** 加购与弃购日报 */
+export const getCartDailyReport = (params) => {
+  return getRequest("/statistics/cart/daily", params);
+};
+
+/** 加购排行 TOP10 */
+export const getCartAddRank = (params) => {
+  return getRequest("/statistics/cart/rank/add", params);
+};
diff --git a/manager/src/router/router.js b/manager/src/router/router.js
index ab17a940..ff0d8ed7 100644
--- a/manager/src/router/router.js
+++ b/manager/src/router/router.js
@@ -455,6 +455,13 @@ export const otherRouter = {
       meta: { title: "商品销售汇总报表" },
       component: () => import("@/views/statistics/goods-sales-summary.vue")
     },
+    {
+      path: "statistics/cart",
+      title: "购物车统计",
+      name: "cartStatistics",
+      meta: { title: "购物车统计" },
+      component: () => import("@/views/statistics/cart.vue")
+    },
     {
       path: "procurement/purchase-order/detail",
       title: "采购单详情",
diff --git a/manager/src/views/statistics/cart.vue b/manager/src/views/statistics/cart.vue
new file mode 100644
index 00000000..63bf18f1
--- /dev/null
+++ b/manager/src/views/statistics/cart.vue
@@ -0,0 +1,271 @@
+<template>
+  <div class="wrapper">
+    <el-affix :offset="100">
+      <el-card class="card fixed-bottom">
+        <affixTime @selected="clickBreadcrumb" />
+      </el-card>
+    </el-affix>
+
+    <el-card class="card">
+      <h4>购物车概况</h4>
+      <div class="metric-grid">
+        <div class="metric-item" v-for="item in metricList" :key="item.key">
+          <div class="metric-label">
+            <span>{{ item.label }}</span>
+            <el-tooltip v-if="item.tip" :content="item.tip" placement="top">
+              <el-icon class="metric-tip"><QuestionFilled /></el-icon>
+            </el-tooltip>
+          </div>
+          <div class="metric-value">
+            <template v-if="item.isRate">{{ formatRate(item.metric) }}</template>
+            <template v-else>{{ formatCount(item.metric) }}</template>
+          </div>
+          <div v-if="item.showRate !== false" class="metric-rate" :class="rateClass(item.metric)">
+            环比 {{ rateText(item.metric) }}
+          </div>
+        </div>
+      </div>
+    </el-card>
+
+    <el-card class="card">
+      <h4>加购与弃购日报</h4>
+      <el-table :data="dailyList" stripe style="width: 100%">
+        <el-table-column label="日期" min-width="120">
+          <template #default="{ row }">
+            {{ formatDay(row.createDate) }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="addCount" label="加购次数" min-width="100" />
+        <el-table-column prop="addUserCount" label="加购人数" min-width="100" />
+        <el-table-column prop="checkoutCount" label="结算行数" min-width="100" />
+        <el-table-column prop="checkoutUserCount" label="结算人数" min-width="100" />
+        <el-table-column label="人数转化率" min-width="110">
+          <template #default="{ row }">
+            {{ convertText(row) }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="abandonUserCount" label="弃购人数" min-width="100" />
+        <el-table-column prop="abandonItemCount" label="弃购行数" min-width="100" />
+        <el-table-column prop="inCartUserCount" label="在购人数" min-width="100" />
+        <el-table-column prop="inCartItemCount" label="在购行数" min-width="100" />
+      </el-table>
+    </el-card>
+
+    <el-card class="card">
+      <h4>加购排行 TOP10</h4>
+      <el-table :data="addRank" stripe style="width: 100%">
+        <el-table-column prop="rank" label="排名" width="70" />
+        <el-table-column prop="skuName" label="商品" min-width="220" show-overflow-tooltip />
+        <el-table-column prop="addCount" label="加购次数" min-width="110" />
+        <el-table-column prop="addUserCount" label="加购人数" min-width="110" />
+      </el-table>
+    </el-card>
+  </div>
+</template>
+
+<script>
+import * as API_Statistics from "@/api/statistics";
+import affixTime from "@/components/affix-time";
+import { QuestionFilled } from "@element-plus/icons-vue";
+
+export default {
+  components: { affixTime, QuestionFilled },
+  data() {
+    return {
+      params: {
+        searchType: "LAST_SEVEN",
+        year: "",
+        month: "",
+        storeId: "",
+      },
+      overview: {},
+      dailyList: [],
+      addRank: [],
+      metricDefs: [
+        {
+          key: "addCount",
+          label: "加购次数",
+          tip: "周期内 CART_ADD 次数，不含立即购买",
+        },
+        {
+          key: "addUserCount",
+          label: "加购人数",
+          tip: "周期内至少加购一次的会员数",
+        },
+        {
+          key: "checkoutUserCount",
+          label: "结算人数",
+          tip: "周期内从购物车提交订单的会员数",
+        },
+        {
+          key: "convertRate",
+          label: "加购转结算率",
+          isRate: true,
+          tip: "结算人数 / 加购人数",
+        },
+        {
+          key: "inCartUserCount",
+          label: "当前在购人数",
+          showRate: false,
+          tip: "此刻购物车里仍有商品的会员数",
+        },
+        {
+          key: "inCartItemCount",
+          label: "当前在购行数",
+          showRate: false,
+          tip: "此刻购物车行项目数",
+        },
+        {
+          key: "abandonUserCount",
+          label: "当前弃购人数",
+          showRate: false,
+          tip: "首次加入超过 24 小时仍在车的会员数",
+        },
+        {
+          key: "abandonItemCount",
+          label: "当前弃购行数",
+          showRate: false,
+          tip: "首次加入超过 24 小时仍在车的行数",
+        },
+      ],
+    };
+  },
+  computed: {
+    metricList() {
+      return this.metricDefs.map((def) => ({
+        ...def,
+        metric: this.overview[def.key] || {},
+      }));
+    },
+  },
+  watch: {
+    params: {
+      handler() {
+        this.loadData();
+      },
+      deep: true,
+      immediate: true,
+    },
+  },
+  methods: {
+    clickBreadcrumb(item) {
+      this.params = {
+        ...this.params,
+        searchType: item.searchType || "",
+        year: item.year || "",
+        month: item.month || "",
+        storeId: item.storeId || "",
+        startTime: item.startTime || "",
+        endTime: item.endTime || "",
+      };
+    },
+    metricCurrent(metric) {
+      if (!metric || metric.current == null) return 0;
+      return Number(metric.current) || 0;
+    },
+    formatCount(metric) {
+      return Math.round(this.metricCurrent(metric));
+    },
+    formatRate(metric) {
+      return `${this.metricCurrent(metric).toFixed(2)}%`;
+    },
+    rateText(metric) {
+      if (!metric || !metric.rate) return "0%";
+      return metric.rate;
+    },
+    rateClass(metric) {
+      const trend = metric && metric.trend;
+      if (trend === "UP") return "up";
+      if (trend === "DOWN") return "down";
+      return "flat";
+    },
+    formatDay(value) {
+      if (!value) return "-";
+      return String(value).substring(0, 10);
+    },
+    convertText(row) {
+      const addUser = Number(row.addUserCount) || 0;
+      const checkoutUser = Number(row.checkoutUserCount) || 0;
+      if (addUser <= 0) return "0%";
+      return `${((checkoutUser * 100) / addUser).toFixed(2)}%`;
+    },
+    async loadData() {
+      const query = { ...this.params };
+      const [overviewRes, dailyRes, rankRes] = await Promise.all([
+        API_Statistics.getCartOverview(query),
+        API_Statistics.getCartDailyReport(query),
+        API_Statistics.getCartAddRank(query),
+      ]);
+      if (overviewRes && overviewRes.success) {
+        this.overview = overviewRes.result || {};
+      }
+      if (dailyRes && dailyRes.success) {
+        this.dailyList = dailyRes.result || [];
+      }
+      if (rankRes && rankRes.success) {
+        this.addRank = rankRes.result || [];
+      }
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.wrapper {
+  padding-bottom: 200px;
+}
+.card {
+  margin-bottom: 10px;
+}
+h4 {
+  margin: 0 0 20px 0;
+}
+.metric-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 16px;
+}
+.metric-item {
+  background: #f3f5f7;
+  border-radius: 8px;
+  padding: 20px 16px;
+  min-height: 110px;
+}
+.metric-label {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 14px;
+  color: #666;
+  margin-bottom: 12px;
+}
+.metric-tip {
+  font-size: 14px;
+  color: #999;
+  cursor: pointer;
+}
+.metric-value {
+  font-size: 22px;
+  font-weight: 700;
+  color: $theme_color;
+  margin-bottom: 8px;
+}
+.metric-rate {
+  font-size: 13px;
+  font-weight: 600;
+}
+.metric-rate.up {
+  color: #f5222d;
+}
+.metric-rate.down {
+  color: #52c41a;
+}
+.metric-rate.flat {
+  color: #999;
+}
+@media (max-width: 1200px) {
+  .metric-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+</style>