From ef7140e4467f912bd8066e1df536b636c2a4e9bc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=83=AD=E6=B0=B8=E8=B6=85?= <2090205686@qq.com>
Date: Wed, 2 Jul 2025 14:42:23 +0800
Subject: [PATCH] =?UTF-8?q?=E7=94=B5=E5=95=86=E4=BA=A4=E6=98=93-=E4=BA=A4?=
 =?UTF-8?q?=E6=98=93=E5=88=86=E6=9E=90=E9=A1=B5=E9=9D=A2=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E7=A9=BA=E6=95=B0=E6=8D=AE=E6=97=B6=E7=9A=84=E9=BB=98=E8=AE=A4?=
 =?UTF-8?q?=E5=B1=95=E7=A4=BA=EF=BC=9B=E8=A1=A8=E6=A0=BC=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E5=A2=9E=E5=8A=A0formatter=E5=A4=84=E7=90=86=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/tableComponent.vue |   4 +
 src/views/trade/dataBoard.vue     | 227 +++++++++++++++++++++++-------
 2 files changed, 179 insertions(+), 52 deletions(-)

diff --git a/src/components/tableComponent.vue b/src/components/tableComponent.vue
index ffdfb0e..f25ae77 100644
--- a/src/components/tableComponent.vue
+++ b/src/components/tableComponent.vue
@@ -78,6 +78,10 @@
           <template v-if="column.slotName" #default="scope">
             <slot :name="column.slotName" :row="scope.row"></slot>
           </template>
+          <!-- 动态处理 formatter -->
+          <template v-else-if="column.formatter" #default="{ row, colum, $index }">
+            {{ column.formatter(row, colum, row[column.prop], $index) }}
+          </template>
         </el-table-column>
       </template>
     </el-table>
diff --git a/src/views/trade/dataBoard.vue b/src/views/trade/dataBoard.vue
index 7d1eec5..af3d9da 100644
--- a/src/views/trade/dataBoard.vue
+++ b/src/views/trade/dataBoard.vue
@@ -1,9 +1,15 @@
 <template>
   <div class="app-container customer-control">
-    <div style="overflow-y: auto;overflow-x: hidden; height: 100%;">
+    <div style="overflow-y: auto; overflow-x: hidden; height: 100%">
       <div class="app-container-data" ref="chartContainer">
-        <div class="app-container-title">运营看板
-          <el-radio-group v-model="dateRadio" @change="changeDateRadio" size="small" style="float: right;">
+        <div class="app-container-title">
+          运营看板
+          <el-radio-group
+            v-model="dateRadio"
+            @change="changeDateRadio"
+            size="small"
+            style="float: right"
+          >
             <el-radio-button label="周" :value="1" />
             <el-radio-button label="月" :value="2" />
             <el-radio-button label="年" :value="3" />
@@ -14,14 +20,22 @@
             <div class="app-container-data-left-top">
               <div>
                 <div class="title">
-                  <img class="title-image" src="../../assets/images/money.png" alt="" />
+                  <img
+                    class="title-image"
+                    src="../../assets/images/money.png"
+                    alt=""
+                  />
                   <div>销售总额(元)</div>
                 </div>
                 <div class="number">{{ topLeftData.salesTotalAmount }}</div>
               </div>
               <div>
                 <div class="title">
-                  <img class="title-image" src="../../assets/images/order.png" alt="" />
+                  <img
+                    class="title-image"
+                    src="../../assets/images/order.png"
+                    alt=""
+                  />
                   <div>订单总数(单)</div>
                 </div>
                 <div class="number">{{ topLeftData.orderTotalNum }}</div>
@@ -30,14 +44,22 @@
             <div class="app-container-data-left-bottom">
               <div>
                 <div class="title">
-                  <img class="title-image" src="../../assets/images/views.png" alt="" />
+                  <img
+                    class="title-image"
+                    src="../../assets/images/views.png"
+                    alt=""
+                  />
                   <div>浏览量(次)</div>
                 </div>
                 <div class="number">{{ topLeftData.viewCount }}</div>
               </div>
               <div>
                 <div class="title">
-                  <img class="title-image" src="../../assets/images/money1.png" alt="" />
+                  <img
+                    class="title-image"
+                    src="../../assets/images/money1.png"
+                    alt=""
+                  />
                   <div>成功退款金额(元)</div>
                 </div>
                 <div class="number">{{ topLeftData.refundSuccessAmout }}</div>
@@ -51,32 +73,42 @@
       </div>
       <!-- 中间模块 -->
       <div class="app-container-list" ref="middleRef">
-        <div class="app-container-block" v-for="(item, index) in middleData" :key="index">
-          <div class="app-container-block-title">{{ item.title }}
+        <div
+          class="app-container-block"
+          v-for="(item, index) in middleData"
+          :key="index"
+        >
+          <div class="app-container-block-title">
+            {{ item.title }}
             <el-popover title="" :content="item.toolTip" placement="left-start">
               <template #reference>
-                <el-icon color="#c5c5c5" style="float: right;">
+                <el-icon color="#c5c5c5" style="float: right">
                   <QuestionFilled />
                 </el-icon>
               </template>
             </el-popover>
           </div>
           <div class="app-container-block-price">
-            {{ item.valueStr ?? '--' }}
+            {{ item.valueStr ?? "--" }}
             <text style="font-size: 12px; color: #999999; margin-left: 5px">
-              {{ item.unit ?? '' }}
+              {{ item.unit ?? "" }}
             </text>
           </div>
           <div class="app-container-block-proportion">
             {{ item.ratioMethod }}：
-            <text :style="{ 'font-size': '12px', color: item.ratioStatus == '下降' ? 'red' : 'green' }">
+            <text
+              :style="{
+                'font-size': '12px',
+                color: item.ratioStatus == '下降' ? 'red' : 'green',
+              }"
+            >
               <el-icon v-if="item.ratioStatus == '下降'">
                 <CaretBottom />
               </el-icon>
               <el-icon v-else>
                 <CaretTop />
               </el-icon>
-              {{ item.ratioValue ?? '' }}%
+              {{ item.ratioValue ?? "" }}%
             </text>
           </div>
         </div>
@@ -85,20 +117,38 @@
       <div class="bottom-flex-box">
         <div class="bottom-box-item">
           <div class="bottom-box-item-title">商品销量</div>
-          <div class="bottom-box-item-content" :style="{ height: tableViewportHeight + 'px' }">
-            <tableComponent :table-data="tableData" :columns="columns" :show-border="false" :show-pagination="false"
-              :loading="tableLoading">
+          <div
+            class="bottom-box-item-content"
+            :style="{ height: tableViewportHeight + 'px' }"
+          >
+            <tableComponent
+              :table-data="tableData"
+              :columns="columns"
+              :show-border="false"
+              :show-pagination="false"
+              :loading="tableLoading"
+            >
               <!-- 自定义-排名图片 -->
               <template #ranking="slotProps">
-                <div class="table-cell-img-box" style="width: 40px;height: 40px;" v-if="slotProps.row.ranking == 1">
+                <div
+                  class="table-cell-img-box"
+                  style="width: 40px; height: 40px"
+                  v-if="slotProps.row.ranking == 1"
+                >
                   <img :src="img1" class="table-cell-img" alt="" />
                 </div>
-                <div class="table-cell-img-box" style="width: 40px;height: 40px;"
-                  v-else-if="slotProps.row.ranking == 2">
+                <div
+                  class="table-cell-img-box"
+                  style="width: 40px; height: 40px"
+                  v-else-if="slotProps.row.ranking == 2"
+                >
                   <img :src="img2" class="table-cell-img" alt="" />
                 </div>
-                <div class="table-cell-img-box" style="width: 40px;height: 40px;"
-                  v-else-if="slotProps.row.ranking == 3">
+                <div
+                  class="table-cell-img-box"
+                  style="width: 40px; height: 40px"
+                  v-else-if="slotProps.row.ranking == 3"
+                >
                   <img :src="img3" class="table-cell-img" alt="" />
                 </div>
                 <div v-else>{{ slotProps.row.ranking }}</div>
@@ -106,8 +156,15 @@
 
               <!-- 自定义-商品图片 -->
               <template #goodUrl="slotProps">
-                <div class="table-cell-img-box" style="width: 40px;height: 40px;">
-                  <img :src="slotProps.row.goodUrl" class="table-cell-img" alt="" />
+                <div
+                  class="table-cell-img-box"
+                  style="width: 40px; height: 40px"
+                >
+                  <img
+                    :src="slotProps.row.goodUrl"
+                    class="table-cell-img"
+                    alt=""
+                  />
                 </div>
               </template>
             </tableComponent>
@@ -117,55 +174,114 @@
           <div class="bottom-box-item-title">售后概况</div>
           <div class="bottom-box-item-content">
             <!-- 上 -->
-            <div class="bottom-box-summary" style="margin: 20px 0;">
+            <div class="bottom-box-summary" style="margin: 20px 0">
               <div class="bottom-box-summary-item">
                 <div class="bottom-box-summary-title">售后订单数量(单)</div>
-                <div class="bottom-box-summary-value">{{ afterSalesData.totalAfterSalesOrders }}</div>
+                <div class="bottom-box-summary-value">
+                  {{ afterSalesData.totalAfterSalesOrders }}
+                </div>
               </div>
               <div class="bottom-box-summary-item">
                 <div class="bottom-box-summary-title">退货退款金额(元)</div>
-                <div class="bottom-box-summary-value">{{ afterSalesData.totalRefundAmount }}</div>
+                <div class="bottom-box-summary-value">
+                  {{ afterSalesData.totalRefundAmount }}
+                </div>
               </div>
               <div class="bottom-box-summary-item">
                 <div class="bottom-box-summary-title">退货退款订单数量(单)</div>
-                <div class="bottom-box-summary-value">{{ afterSalesData.totalRefundOrders }}</div>
+                <div class="bottom-box-summary-value">
+                  {{ afterSalesData.totalRefundOrders }}
+                </div>
               </div>
             </div>
             <!-- 下 -->
-            <div class="bottom-box-summary" style="line-height: 30px;margin: 0;">
+            <div
+              class="bottom-box-summary"
+              style="line-height: 30px; margin: 0"
+            >
               <div class="bottom-box-summary-item">
-                <img :src="alert" style="width: 30px;height: 30px;" alt="" />
-                <div class="bottom-box-summary-title"
-                  style="display: inline-block;vertical-align: middle;margin-left: 8px;">
-                  预警商品</div>
+                <img :src="alert" style="width: 30px; height: 30px" alt="" />
+                <div
+                  class="bottom-box-summary-title"
+                  style="
+                    display: inline-block;
+                    vertical-align: middle;
+                    margin-left: 8px;
+                  "
+                >
+                  预警商品
+                </div>
               </div>
-              <div class="bottom-box-summary-item" style="width: 120px;flex: none;">
+              <div
+                class="bottom-box-summary-item"
+                style="width: 120px; flex: none"
+              >
                 <div class="bottom-box-summary-title">退款订单量</div>
               </div>
-              <div class="bottom-box-summary-item" style="width: 130px;flex: none;">
+              <div
+                class="bottom-box-summary-item"
+                style="width: 130px; flex: none"
+              >
                 <div class="bottom-box-summary-title">退款金额</div>
               </div>
             </div>
-            <div ref="warningGoodsRef" style="overflow-y: auto; height: 150px;"
-              :style="{ height: tableViewportHeight - 150 + 'px' }">
-              <div v-if="afterSalesData.warningProductInfos.length == 0" style="color: #909399; font-size: 14px; text-align: center; padding-top: 20px">
+            <div
+              ref="warningGoodsRef"
+              style="overflow-y: auto; height: 150px"
+              :style="{ height: tableViewportHeight - 150 + 'px' }"
+            >
+              <div
+                v-if="afterSalesData.warningProductInfos.length == 0"
+                style="
+                  color: #909399;
+                  font-size: 14px;
+                  text-align: center;
+                  padding-top: 20px;
+                "
+              >
                 暂无数据
               </div>
               <template v-else>
-                <div class="bottom-box-summary" style="line-height: 40px;margin: 0;"
-                  v-for="(item, index) in afterSalesData.warningProductInfos" :key="index">
-                  <div class="bottom-box-summary-item" style="display: flex;">
-                    <img :src="item.goodUrl" style="width: 40px;height: 40px;" alt="" />
-                    <div class="bottom-box-summary-title text-ellipsis"
-                      style="flex: 1; vertical-align: top;color: #000;margin-left: 8px;" :title="item.goodName">
+                <div
+                  class="bottom-box-summary"
+                  style="line-height: 40px; margin: 0"
+                  v-for="(item, index) in afterSalesData.warningProductInfos"
+                  :key="index"
+                >
+                  <div class="bottom-box-summary-item" style="display: flex">
+                    <img
+                      :src="item.goodUrl"
+                      style="width: 40px; height: 40px"
+                      alt=""
+                    />
+                    <div
+                      class="bottom-box-summary-title text-ellipsis"
+                      style="
+                        flex: 1;
+                        vertical-align: top;
+                        color: #000;
+                        margin-left: 8px;
+                      "
+                      :title="item.goodName"
+                    >
                       {{ item.goodName }}
                     </div>
                   </div>
-                  <div class="bottom-box-summary-item" style="width: 120px;flex: none;">
-                    <div class="bottom-box-summary-title" style="color: #000;">{{ item.refundedOrders }}单</div>
+                  <div
+                    class="bottom-box-summary-item"
+                    style="width: 120px; flex: none"
+                  >
+                    <div class="bottom-box-summary-title" style="color: #000">
+                      {{ item.refundedOrders }}单
+                    </div>
                   </div>
-                  <div class="bottom-box-summary-item" style="width: 120px;flex: none;">
-                    <div class="bottom-box-summary-title" style="color: #000;">{{ item.refundAmount }}元</div>
+                  <div
+                    class="bottom-box-summary-item"
+                    style="width: 120px; flex: none"
+                  >
+                    <div class="bottom-box-summary-title" style="color: #000">
+                      {{ item.refundAmount }}元
+                    </div>
                   </div>
                 </div>
               </template>
@@ -679,7 +795,10 @@ const loadTopLeftData = async () => {
       queryType: dateRadio.value,
     });
     if (response.code == 200) {
-      topLeftData.value = response.data;
+      topLeftData.value.salesTotalAmount = response.data.salesTotalAmount ?? 0;
+      topLeftData.value.orderTotalNum = response.data.orderTotalNum ?? 0;
+      topLeftData.value.viewCount = response.data.viewCount ?? 0;
+      topLeftData.value.refundSuccessAmout = response.data.refundSuccessAmout ?? 0;
     } else {
       initTopLeftData();
     }
@@ -739,8 +858,8 @@ const columns = ref([
   { prop: "ranking", label: "排名", slotName: "ranking", width: 66 },
   { prop: "goodUrl", label: "商品图片", slotName: "goodUrl", width: 80, align: "left" },
   { prop: "goodName", label: "商品名称", width: "auto", align: "left" },
-  { prop: "stockToUseRatio", label: "存销比", width: 70, align: "left" },
-  { prop: "salesAmount", label: "销售金额", width: 100, align: "left" },
+  { prop: "stockToUseRatio", label: "存销比", width: 70, align: "left", formatter: (row) => `${row.stockToUseRatio ?? 0}%` },
+  { prop: "salesAmount", label: "销售金额", width: 100, align: "left", formatter: (row) => `${row.salesAmount ?? 0}元` },
 ]);
 // 加载数据-底部左侧模块
 const loadbottomLeftData = async () => {
@@ -801,7 +920,11 @@ const loadbottomRightData = async () => {
       queryType: dateRadio.value,
     });
     if (response.code == 200) {
-      afterSalesData.value = response.data;
+      afterSalesData.value.totalAfterSalesOrders = response.data.totalAfterSalesOrders ?? 0;
+      afterSalesData.value.totalRefundAmount = response.data.totalRefundAmount ?? 0;
+      afterSalesData.value.totalAfterSalesOrders = response.data.totalAfterSalesOrders ?? 0;
+      afterSalesData.value.warningProductInfos = response.data.warningProductInfos ?? [];
+      console.log(afterSalesData.value);
     }
   } catch (error) { }
 };