From e4d162194cee4eb3218d709cc6524d376183e7cb Mon Sep 17 00:00:00 2001
From: GaoHao <1210693421@qq.com>
Date: Wed, 2 Apr 2025 10:47:54 +0800
Subject: [PATCH] =?UTF-8?q?=E9=94=80=E5=94=AE=E7=BB=9F=E8=AE=A1=E6=82=AC?=
 =?UTF-8?q?=E6=B5=AE=E6=95=B0=E6=8D=AE=E6=98=BE=E7=A4=BA=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 | 148 +++++++++++++--------------------------
 1 file changed, 48 insertions(+), 100 deletions(-)

diff --git a/src/views/data/index.vue b/src/views/data/index.vue
index 6d2c015..220f131 100644
--- a/src/views/data/index.vue
+++ b/src/views/data/index.vue
@@ -48,11 +48,11 @@
     <div class="h_card_wrap">
       <div class="status_wrap">
         <div class="left">
-          <div class="dot"></div>
+          <div class="dot" />
           <span>营业</span>
         </div>
         <div class="time_wrap u-flex">
-          <el-radio-group class="m-r-5" v-model="timeValue" @change="timeChange">
+          <el-radio-group v-model="timeValue" class="m-r-5" @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>
@@ -62,20 +62,12 @@
             <el-radio-button value="custom">自定义</el-radio-button>
           </el-radio-group>
           <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>
+            <el-date-picker v-if="timeValue == 'custom'" v-model="query.createdAt" type="daterange" range-separator="至"
+              start-placeholder="开始日期" end-placeholder="结束日期" value-format="YYYY-MM-DD " @change="summarytrade" />
           </div>
         </div>
       </div>
-      <div class="content" v-loading="tradeLoading">
+      <div v-loading="tradeLoading" class="content">
         <div class="top">
           <div class="item earnings">
             <div class="num_wrap">
@@ -142,28 +134,20 @@
                   <!-- <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 class="gropress r" :style="{
+                    width: `${trade.refundAmount
+                        ? (trade.refundAmount / (trade.saleAmount * 1 + trade.refundAmount * 1)) *
+                        100
+                        : 0
                       }%`,
-                    }"
-                  ></div>
+                  }" />
                 </div>
                 <div class="line_btm">
                   <el-icon class="icon el-icon-caret-right" />
@@ -179,30 +163,22 @@
                   <!-- <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 class="gropress r" :style="{
+                    width: `${trade.rechargeRefundAmount
+                        ? (trade.rechargeRefundAmount /
+                          (trade.memberPayAmount + trade.rechargeRefundAmount * 1)) *
+                        100
+                        : 0
                       }%`,
-                    }"
-                  ></div>
+                  }" />
                 </div>
                 <div class="line_btm">
                   <el-icon class="icon el-icon-caret-right" />
@@ -246,11 +222,7 @@
           <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>
@@ -283,18 +255,10 @@
       <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>
@@ -303,20 +267,9 @@
             <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 v-show="lineChartType == 0" ref="saleChart" v-loading="saleLoading" class="chart" style="height: 350px" />
+        <div v-show="lineChartType == 1" ref="payChart" v-loading="payChartLoading" class="chart"
+          style="height: 350px" />
       </div>
       <!-- 商品销售排行 -->
       <div class="item" style="margin-left: 20px">
@@ -347,23 +300,15 @@
           </div> -->
         </div>
         <div class="table w-full">
-          <el-table :data="saleTable" v-loading="saleTableLoading" style="width: 100%">
+          <el-table v-loading="saleTableLoading" :data="saleTable" style="width: 100%">
             <!-- <el-table-column label="排名" prop="productId"></el-table-column> -->
-            <el-table-column label="商品名称" prop="productName"></el-table-column>
-            <el-table-column label="数量" prop="number"></el-table-column>
-            <el-table-column label="金额" prop="amount"></el-table-column>
+            <el-table-column label="商品名称" prop="productName" />
+            <el-table-column label="数量" prop="number" />
+            <el-table-column label="金额" prop="amount" />
           </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"
+              layout="total, prev, pager, next, jumper" @current-change="paginationChange" />
           </div>
         </div>
       </div>
@@ -804,7 +749,10 @@ export default {
           x: "center",
         },
         tooltip: {
-          trigger: "axis",
+          trigger: "item",
+          formatter: (params) => {
+            return `${params.value}`;
+          },
         },
         xAxis: [
           {