From d14a0b6be2bf74f850d8c53b93ba513ef234f789 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 11:44:04 +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?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/trade/dataBoard.vue | 204 +++++++++++++++++++---------------
 1 file changed, 115 insertions(+), 89 deletions(-)

diff --git a/src/views/trade/dataBoard.vue b/src/views/trade/dataBoard.vue
index ce73a11..7d1eec5 100644
--- a/src/views/trade/dataBoard.vue
+++ b/src/views/trade/dataBoard.vue
@@ -14,22 +14,14 @@
             <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>
@@ -38,22 +30,14 @@
             <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>
@@ -67,30 +51,32 @@
       </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" 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"
-            >
+            <el-popover title="" :content="item.toolTip" placement="left-start">
               <template #reference>
-                <el-icon color="#c5c5c5" style="float: right;"><QuestionFilled /></el-icon>
+                <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'}">
-              <el-icon v-if="item.ratioStatus == '下降'"><CaretBottom /></el-icon>
-              <el-icon v-else><CaretTop /></el-icon>
-              {{ item.ratioValue??'' }}%
+            <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 ?? '' }}%
             </text>
           </div>
         </div>
@@ -100,22 +86,19 @@
         <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"
-            >
+            <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">
                   <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>
@@ -151,8 +134,10 @@
             <!-- 下 -->
             <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-title">退款订单量</div>
@@ -161,24 +146,30 @@
                 <div class="bottom-box-summary-title">退款金额</div>
               </div>
             </div>
-            <div ref="warningGoodsRef" style="overflow-y: auto; height: 150px;" :style="{ height: tableViewportHeight -150 + 'px' }">
-              <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 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">
+                      {{ 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>
+                  <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>
-                <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>
-              </div>
+              </template>
             </div>
-            
           </div>
         </div>
       </div>
@@ -256,7 +247,7 @@ const option = {
     extraCssText: 'box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5); text-align: left;',
     formatter: function (params) {
       let result = params[0].name + '<br>'; // x轴值（如"1月"）
-      params.forEach((param,index) => {
+      params.forEach((param, index) => {
         // 获取系列颜色（param.color）
         const colorDot = `<span style="
           display:inline-block;
@@ -267,13 +258,13 @@ const option = {
           background-color:${colorList[index]}">
         </span>`;
         let unit = "";
-        if(param.seriesName == '销售总额') { 
+        if (param.seriesName == '销售总额') {
           unit = "元";
-        } else if(param.seriesName == '订单总数') { 
+        } else if (param.seriesName == '订单总数') {
           unit = "个";
-        } else if(param.seriesName == '浏览量') { 
+        } else if (param.seriesName == '浏览量') {
           unit = "人次";
-        } else if(param.seriesName == '成功退款金额') { 
+        } else if (param.seriesName == '成功退款金额') {
           unit = "元";
         }
         result += `${colorDot} ${param.seriesName}: ${param.value} ${unit} <br>`;
@@ -559,16 +550,16 @@ const echartsMockData = (count = 7) => {
   let obj = Mock.mock({
     // x轴数据 (日期/月份)
     xData: xzData,
-    
+
     // 总销售额 (500-5000之间的浮点数，保留2位小数)
     [`totalSalesData|${count}`]: ['@float(100, 500, 2, 2)'],
-    
+
     // 总订单数 (1-100之间的整数)
     [`totalOrdersData|${count}`]: ['@integer(10, 100)'],
-    
+
     // 页面浏览量 (1000-10000之间的整数)
     [`pageViewData|${count}`]: ['@integer(1000, 10000)'],
-    
+
     // 退款金额 (1-100之间的浮点数，保留2位小数)
     [`refundAmountData|${count}`]: ['@float(10, 100, 2, 2)']
   })
@@ -582,14 +573,14 @@ const echartsMockData = (count = 7) => {
 const generateDateArray = (count) => {
   const result = []
   const today = new Date()
-  
+
   for (let i = count - 1; i >= 0; i--) {
     const date = new Date(today)
     date.setDate(date.getDate() - i)
-    
+
     const month = (date.getMonth() + 1).toString().padStart(2, '0')
     const day = date.getDate().toString().padStart(2, '0')
-    
+
     result.push(`${month}-${day}`)
   }
   return result
@@ -600,26 +591,26 @@ const generateDateArray = (count) => {
 let dateRadio = ref(1);
 let startDate = ref('');
 let endDate = ref('');
-const changeDateRadio = (val) => { 
+const changeDateRadio = (val) => {
   // val 1 按周 2 按月 3 按年
   let date = generateDateRange(val);
   startDate.value = date.startDate;
   endDate.value = date.endDate;
-  
+
   // 调用各个模块的方法更新数据
   loadTopLeftData();
   loadEchartsData(); //真实图表数据
   loadMiddleData();
   loadbottomLeftData();
   loadbottomRightData();
-  
+
   // 测试图表数据-----------
   let day = 7;
-  if (val == 1) { 
+  if (val == 1) {
     day = 7;
-  } else if (val == 2) { 
+  } else if (val == 2) {
     day = 30;
-  } else if (val == 3) { 
+  } else if (val == 3) {
     day = 365;
   }
   // echartsMockData(day); //模拟图表数据
@@ -637,9 +628,9 @@ function generateDateRange(type) {
   const endDate = new Date(today);
   // 初始化开始日期为今天的日期
   let startDate = new Date(today);
-  
+
   // 根据不同类型计算开始日期
-  switch(type) {
+  switch (type) {
     case 1: // 周
       startDate.setDate(today.getDate() - 6); // 7天包括今天
       break;
@@ -653,7 +644,7 @@ function generateDateRange(type) {
       // 抛出异常，提示参数类型无效
       throw new Error('无效的参数类型，请输入1(周)、2(月)或3(年)');
   }
-  
+
   // 格式化日期为YYYY-MM-DD
   const formatDate = (date) => {
     const year = date.getFullYear();
@@ -661,7 +652,7 @@ function generateDateRange(type) {
     const day = String(date.getDate()).padStart(2, '0');
     return `${year}-${month}-${day}`;
   };
-  
+
   // 返回计算出的日期范围
   return {
     startDate: formatDate(startDate),
@@ -670,7 +661,7 @@ function generateDateRange(type) {
 }
 
 let topLeftData = ref({});
-const initTopLeftData = () => { 
+const initTopLeftData = () => {
   topLeftData.value = Object.assign({}, {
     salesTotalAmount: 0, //销售总额
     orderTotalNum: 0, //订单总数
@@ -772,12 +763,20 @@ const loadbottomLeftData = async () => {
     } else {
       tableData.value = [];
     }
-  } catch (error) { 
+  } catch (error) {
     tableLoading.value = false;
   }
 };
 
-const afterSalesData = ref({});
+const afterSalesData = ref({
+  totalAfterSalesOrders: 0, //售后订单总数
+  totalRefundAmount: 0, //售后退款金额
+  totalRefundOrders: 0, //售后订单总数
+  warningProductInfos: [
+    // 售后商品信息
+    // { goodUrl: tomato.value, goodName: "耿马西红柿", refundedOrders: "25单", refundAmount: '129元' },
+  ],
+});
 // 加载数据-底部右侧模块
 const loadbottomRightData = async () => {
   // console.log('右下角数据更新');
@@ -829,7 +828,7 @@ const calculateTableHeight = () => {
   tableViewportHeight.value = height < 300 ? 300 : height;
 };
 
-onMounted(async() => {
+onMounted(async () => {
   initTopLeftData
   await initChart();
   changeDateRadio(1);
@@ -856,11 +855,13 @@ onBeforeUnmount(() => {
   font-size: 18px;
   color: #999999;
 }
+
 .title-image {
   margin-right: 10px;
   width: 38px;
   height: 38px;
 }
+
 .number {
   margin-right: 100px;
   margin-top: 16px;
@@ -868,6 +869,7 @@ onBeforeUnmount(() => {
   font-weight: bold;
   color: #000000;
 }
+
 .app-container-list {
   margin-top: 20px;
   display: flex;
@@ -875,66 +877,84 @@ onBeforeUnmount(() => {
   justify-content: space-between;
   gap: 20px;
 }
+
 .app-container-title {
   margin-bottom: 20px;
   padding-right: 10px;
   font-size: 20px;
   font-weight: bold;
 }
+
 .app-container-data {
   border-radius: 10px;
   padding: 20px 10px 20px 20px;
   width: 100%;
   background-color: #fff;
+
   .app-container-data-left {
     width: 500px;
+
     .app-container-data-left-top {
       display: flex;
     }
+
     .app-container-data-left-bottom {
       margin-top: 40px;
       display: flex;
     }
   }
+
   .app-container-data-right {
     flex: 1;
   }
 }
+
 .app-container-block {
   flex: 1;
   background-color: #fff;
   border-radius: 10px;
   padding: 10px 10px 10px 14px;
+
   .app-container-block-title {
     font-size: 18px;
     font-weight: bold;
   }
+
   .app-container-block-price {
     font-size: 18px;
     color: #42b983;
     font-weight: bold;
     margin: 10px 0;
   }
+
   .app-container-block-proportion {
     font-size: 12px;
+
     .el-icon {
       vertical-align: text-top;
     }
   }
+
   :deep(.el-popper.tooltip-box-item) {
-   max-width: 200px; /* 限制最大宽度 */
-    word-break: break-word; /* 长单词或URL换行 */
-    white-space: normal !important; /* 覆盖默认的 nowrap */
+    max-width: 200px;
+    /* 限制最大宽度 */
+    word-break: break-word;
+    /* 长单词或URL换行 */
+    white-space: normal !important;
+    /* 覆盖默认的 nowrap */
   }
+
   .tooltip-box-item {
     width: 200px !important;
   }
 }
+
 .bottom-flex-box {
   margin-top: 20px;
   display: flex;
   justify-content: space-between;
   gap: 20px;
+
   .bottom-box-item {
     flex: 1;
     width: 50%;
@@ -942,27 +962,33 @@ onBeforeUnmount(() => {
     border-radius: 10px;
     padding: 20px 20px 0px 20px;
   }
+
   .bottom-box-item-title {
     font-size: 18px;
     font-weight: bold;
   }
+
   .bottom-box-item-content {
     height: 300px;
     min-height: 300px;
+
     .bottom-box-summary {
       display: flex;
       margin: 10px 0;
       gap: 20px;
-      width: 100%; 
+      width: 100%;
+
       .bottom-box-summary-item {
         flex: 1;
         min-width: 0;
         overflow: hidden;
+
         .bottom-box-summary-title {
           font-size: 16px;
           color: #999;
           margin-bottom: 16px;
         }
+
         .bottom-box-summary-value {
           font-size: 20px;
           color: #000;