From fcd8dd90be1bd17fc58867cc8db32876f7444a1f Mon Sep 17 00:00:00 2001
From: YeMingfei666 <1619116647@qq.com>
Date: Mon, 31 Mar 2025 10:13:20 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E6=95=B0=E6=8D=AE=E7=BB=9F=E8=AE=A1?=
 =?UTF-8?q?=EF=BC=8C=E9=94=80=E5=94=AE=E7=BB=9F=E8=AE=A1=E6=90=9C=E7=B4=A2?=
 =?UTF-8?q?=E6=A1=86=E6=A0=B7=E5=BC=8F=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/data/index.vue | 137 +++++++++++++++++++++++++++------------
 src/views/data/sales.vue |  11 ++--
 2 files changed, 102 insertions(+), 46 deletions(-)

diff --git a/src/views/data/index.vue b/src/views/data/index.vue
index 280dc21..6d2c015 100644
--- a/src/views/data/index.vue
+++ b/src/views/data/index.vue
@@ -51,8 +51,8 @@
           <div class="dot"></div>
           <span>营业</span>
         </div>
-        <div class="time_wrap">
-          <el-radio-group v-model="timeValue" @change="timeChange">
+        <div class="time_wrap u-flex">
+          <el-radio-group class="m-r-5" v-model="timeValue" @change="timeChange">
             <el-radio-button value="0">今天</el-radio-button>
             <el-radio-button value="-1">昨天</el-radio-button>
             <el-radio-button value="-7">最近7天</el-radio-button>
@@ -61,9 +61,18 @@
             <el-radio-button value="month">本月</el-radio-button>
             <el-radio-button value="custom">自定义</el-radio-button>
           </el-radio-group>
-          <el-date-picker v-model="query.createdAt" type="daterange" range-separator="至" start-placeholder="开始日期"
-            end-placeholder="结束日期" value-format="YYYY-MM-DD " v-if="timeValue == 'custom'"
-            @change="summarytrade"></el-date-picker>
+          <div class="u-flex">
+            <el-date-picker
+              v-model="query.createdAt"
+              type="daterange"
+              range-separator="至"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              value-format="YYYY-MM-DD "
+              v-if="timeValue == 'custom'"
+              @change="summarytrade"
+            ></el-date-picker>
+          </div>
         </div>
       </div>
       <div class="content" v-loading="tradeLoading">
@@ -133,20 +142,28 @@
                   <!-- <div class="t">{{ formatDecimal(tradeSale.totalSaleAmount || 0) }}</div> -->
                 </div>
                 <div class="line_gropress">
-                  <div class="gropress l" :style="{
-                    width: `${trade.saleAmount
-                        ? (trade.saleAmount / (trade.saleAmount * 1 + trade.refundAmount * 1)) *
-                        100
-                        : 0
+                  <div
+                    class="gropress l"
+                    :style="{
+                      width: `${
+                        trade.saleAmount
+                          ? (trade.saleAmount / (trade.saleAmount * 1 + trade.refundAmount * 1)) *
+                            100
+                          : 0
                       }%`,
-                  }"></div>
-                  <div class="gropress r" :style="{
-                    width: `${trade.refundAmount
-                        ? (trade.refundAmount / (trade.saleAmount * 1 + trade.refundAmount * 1)) *
-                        100
-                        : 0
+                    }"
+                  ></div>
+                  <div
+                    class="gropress r"
+                    :style="{
+                      width: `${
+                        trade.refundAmount
+                          ? (trade.refundAmount / (trade.saleAmount * 1 + trade.refundAmount * 1)) *
+                            100
+                          : 0
                       }%`,
-                  }"></div>
+                    }"
+                  ></div>
                 </div>
                 <div class="line_btm">
                   <el-icon class="icon el-icon-caret-right" />
@@ -162,22 +179,30 @@
                   <!-- <div class="t">{{ formatDecimal(tradeSale.totalVipAmount || 0) }}</div> -->
                 </div>
                 <div class="line_gropress">
-                  <div class="gropress l" :style="{
-                    width: `${trade.rechargeAmount
-                        ? (trade.rechargeAmount /
-                          (trade.memberPayAmount + trade.rechargeRefundAmount * 1)) *
-                        100
-                        : 0
+                  <div
+                    class="gropress l"
+                    :style="{
+                      width: `${
+                        trade.rechargeAmount
+                          ? (trade.rechargeAmount /
+                              (trade.memberPayAmount + trade.rechargeRefundAmount * 1)) *
+                            100
+                          : 0
                       }%`,
-                  }"></div>
-                  <div class="gropress r" :style="{
-                    width: `${trade.rechargeRefundAmount
-                        ? (trade.rechargeRefundAmount /
-                          (trade.memberPayAmount + trade.rechargeRefundAmount * 1)) *
-                        100
-                        : 0
+                    }"
+                  ></div>
+                  <div
+                    class="gropress r"
+                    :style="{
+                      width: `${
+                        trade.rechargeRefundAmount
+                          ? (trade.rechargeRefundAmount /
+                              (trade.memberPayAmount + trade.rechargeRefundAmount * 1)) *
+                            100
+                          : 0
                       }%`,
-                  }"></div>
+                    }"
+                  ></div>
                 </div>
                 <div class="line_btm">
                   <el-icon class="icon el-icon-caret-right" />
@@ -221,7 +246,11 @@
           <div class="item item2">
             <div class="title">
               翻台率
-              <el-tooltip effect="dark" content="翻台率=（客单数-桌台数）/桌台数*100%" placement="top">
+              <el-tooltip
+                effect="dark"
+                content="翻台率=（客单数-桌台数）/桌台数*100%"
+                placement="top"
+              >
                 <el-icon>
                   <QuestionFilled />
                 </el-icon>
@@ -254,10 +283,18 @@
       <div class="item">
         <div class="header">
           <div class="tab_wrap">
-            <div class="item" :class="{ active: lineChartType == 0 }" @click="lineChartTypeChange(0)">
+            <div
+              class="item"
+              :class="{ active: lineChartType == 0 }"
+              @click="lineChartTypeChange(0)"
+            >
               销售趋势
             </div>
-            <div class="item" :class="{ active: lineChartType == 1 }" @click="lineChartTypeChange(1)">
+            <div
+              class="item"
+              :class="{ active: lineChartType == 1 }"
+              @click="lineChartTypeChange(1)"
+            >
               支付占比
             </div>
           </div>
@@ -266,10 +303,20 @@
             <el-radio-button value="30">30天</el-radio-button>
           </el-radio-group>
         </div>
-        <div class="chart" ref="saleChart" v-loading="saleLoading" style="height: 350px" v-show="lineChartType == 0">
-        </div>
-        <div class="chart" ref="payChart" v-loading="payChartLoading" style="height: 350px" v-show="lineChartType == 1">
-        </div>
+        <div
+          class="chart"
+          ref="saleChart"
+          v-loading="saleLoading"
+          style="height: 350px"
+          v-show="lineChartType == 0"
+        ></div>
+        <div
+          class="chart"
+          ref="payChart"
+          v-loading="payChartLoading"
+          style="height: 350px"
+          v-show="lineChartType == 1"
+        ></div>
       </div>
       <!-- 商品销售排行 -->
       <div class="item" style="margin-left: 20px">
@@ -306,9 +353,17 @@
             <el-table-column label="数量" prop="number"></el-table-column>
             <el-table-column label="金额" prop="amount"></el-table-column>
           </el-table>
-          <div class="head-container" style="padding-top: 20px; display: flex; justify-content: flex-end">
-            <el-pagination :total="saleTableTotal" :page-size="saleTableSize" :current-page="saleTablePage"
-              @current-change="paginationChange" layout="total, prev, pager, next, jumper"></el-pagination>
+          <div
+            class="head-container"
+            style="padding-top: 20px; display: flex; justify-content: flex-end"
+          >
+            <el-pagination
+              :total="saleTableTotal"
+              :page-size="saleTableSize"
+              :current-page="saleTablePage"
+              @current-change="paginationChange"
+              layout="total, prev, pager, next, jumper"
+            ></el-pagination>
           </div>
         </div>
       </div>
diff --git a/src/views/data/sales.vue b/src/views/data/sales.vue
index 6b85e93..6d42e40 100644
--- a/src/views/data/sales.vue
+++ b/src/views/data/sales.vue
@@ -33,6 +33,7 @@
             <el-radio-button value="custom">自定义</el-radio-button>
           </el-radio-group>
           <el-date-picker
+            class="u-m-l-10"
             v-model="query.createdAt"
             type="daterange"
             range-separator="至"
@@ -101,7 +102,7 @@
         </el-table-column>
         <el-table-column label="销售额" prop="total">
           <template v-slot="scope">
-            ￥{{ scope.row.total | totalfilter(scope.row.refund) }}
+            ￥{{ scope.row.total }}|{{ totalfilter(scope.row.refund) }}
           </template>
         </el-table-column>
         <el-table-column label="微信小程序支付" prop="wxLite">
@@ -191,10 +192,6 @@ export default {
     timeFilter(time) {
       return dayjs(time).format("YYYY-MM-DD HH:mm:ss");
     },
-    totalfilter(item, d) {
-      let num = item + d;
-      return num.toFixed(2);
-    },
   },
   mounted() {
     this.resetQuery = { ...this.query };
@@ -202,6 +199,10 @@ export default {
     this.getCategory();
   },
   methods: {
+    totalfilter(item, d) {
+      let num = item + d;
+      return num.toFixed(2);
+    },
     // 获取商品分类
     async getCategory() {
       try {