From 784ef2071d97e2890ffa4fa28f290daaf0ccc2c5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=83=AD=E6=B0=B8=E8=B6=85?= <2090205686@qq.com>
Date: Fri, 11 Jul 2025 11:39:53 +0800
Subject: [PATCH] =?UTF-8?q?=E9=83=A8=E5=88=86=E9=A1=B5=E9=9D=A2=E8=B0=83?=
 =?UTF-8?q?=E6=95=B4=EF=BC=8C=E5=90=8E=E5=8F=B0=E6=9C=AA=E9=83=A8=E7=BD=B2?=
 =?UTF-8?q?=EF=BC=8C=E9=A1=B5=E9=9D=A2=E6=94=B9=E5=9B=9E=E5=BC=80=E5=8F=91?=
 =?UTF-8?q?=E4=B8=AD=EF=BC=9B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env.development                           |    2 +-
 src/assets/styles/custom.scss              |    4 +-
 src/views/trade/dataBoard copy已对接口.vue | 1124 ++++++++++++++++++++
 src/views/trade/dataBoard.vue              | 1124 +-------------------
 4 files changed, 1130 insertions(+), 1124 deletions(-)
 create mode 100644 src/views/trade/dataBoard copy已对接口.vue

diff --git a/.env.development b/.env.development
index 11276d8..f5887ec 100644
--- a/.env.development
+++ b/.env.development
@@ -5,6 +5,6 @@ VITE_APP_TITLE = 运营云后台管理系统
 VITE_APP_ENV = 'development'
 
 # 开发环境
-VITE_APP_BASE_API = 'http://192.168.18.99:8080'
+VITE_APP_BASE_API = 'http://192.168.18.88:8080'
 # VITE_APP_BASE_API = 'http://192.168.18.151:8080'
 VITE_APP_PLATFORM = 'http://localhost:9000/platform'
\ No newline at end of file
diff --git a/src/assets/styles/custom.scss b/src/assets/styles/custom.scss
index 6b428af..bd6fe69 100644
--- a/src/assets/styles/custom.scss
+++ b/src/assets/styles/custom.scss
@@ -243,8 +243,8 @@
   justify-content: center;
   align-items: center;
   .table-cell-img {
-    width: 60px;
-    height: 60px;
+    width: 100%;
+    height: 100%;
     object-fit: cover; /* 保持比例并覆盖容器 */
   }
 }
diff --git a/src/views/trade/dataBoard copy已对接口.vue b/src/views/trade/dataBoard copy已对接口.vue
new file mode 100644
index 0000000..af3d9da
--- /dev/null
+++ b/src/views/trade/dataBoard copy已对接口.vue	
@@ -0,0 +1,1124 @@
+<template>
+  <div class="app-container customer-control">
+    <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"
+          >
+            <el-radio-button label="周" :value="1" />
+            <el-radio-button label="月" :value="2" />
+            <el-radio-button label="年" :value="3" />
+          </el-radio-group>
+        </div>
+        <div style="display: flex">
+          <div class="app-container-data-left">
+            <div class="app-container-data-left-top">
+              <div>
+                <div class="title">
+                  <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=""
+                  />
+                  <div>订单总数(单)</div>
+                </div>
+                <div class="number">{{ topLeftData.orderTotalNum }}</div>
+              </div>
+            </div>
+            <div class="app-container-data-left-bottom">
+              <div>
+                <div class="title">
+                  <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=""
+                  />
+                  <div>成功退款金额(元)</div>
+                </div>
+                <div class="number">{{ topLeftData.refundSuccessAmout }}</div>
+              </div>
+            </div>
+          </div>
+          <div class="app-container-data-right">
+            <div ref="chartRef" style="width: 100%; height: 200px"></div>
+          </div>
+        </div>
+      </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 }}
+            <el-popover title="" :content="item.toolTip" placement="left-start">
+              <template #reference>
+                <el-icon color="#c5c5c5" style="float: right">
+                  <QuestionFilled />
+                </el-icon>
+              </template>
+            </el-popover>
+          </div>
+          <div class="app-container-block-price">
+            {{ item.valueStr ?? "--" }}
+            <text style="font-size: 12px; color: #999999; margin-left: 5px">
+              {{ 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>
+          </div>
+        </div>
+      </div>
+      <!-- 底部模块 -->
+      <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"
+            >
+              <!-- 自定义-排名图片 -->
+              <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"
+                >
+                  <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"
+                >
+                  <img :src="img3" class="table-cell-img" alt="" />
+                </div>
+                <div v-else>{{ slotProps.row.ranking }}</div>
+              </template>
+
+              <!-- 自定义-商品图片 -->
+              <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>
+              </template>
+            </tableComponent>
+          </div>
+        </div>
+        <div class="bottom-box-item">
+          <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-item">
+                <div class="bottom-box-summary-title">售后订单数量(单)</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>
+              <div class="bottom-box-summary-item">
+                <div class="bottom-box-summary-title">退货退款订单数量(单)</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-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>
+              </div>
+              <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-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>
+              <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>
+              </template>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+import { onMounted, ref, onBeforeUnmount } from "vue";
+import Mock from "mockjs";
+import tableComponent from "@/components/tableComponent.vue";
+import * as echarts from "echarts";
+import { getAstsTransTotals, getEchartsData, getMidleInfo, getGoodsSalesInfo, getAfterSalesData } from "@/api/trade/dataBoard";
+
+import img1 from "@/assets/images/first.png";
+import img2 from "@/assets/images/second.png";
+import img3 from "@/assets/images/third.png";
+import alert from "@/assets/images/alert.png";
+let tomato = ref("http://gov-cloud.oss-cn-chengdu.aliyuncs.com/backend/a866613495ed4678957a4440b8d3776c.png");
+
+// 图表 DOM 引用
+const chartRef = ref(null);
+// ECharts 实例
+let chartInstance = null;
+// 颜色列表
+const colorList = ['#3685FE', '#FFD500', '#25BF82', '#FF7F00'];
+// x轴数据
+const xData = ref([]);
+const totalSalesData = ref([]); //销售总额数据
+const totalOrdersData = ref([]); //订单总数数据
+const pageViewData = ref([]); //浏览量数据
+const refundAmountData = ref([]); //成功退款金额数据
+
+// 图表配置
+const option = {
+  backgroundColor: '#fff',
+  title: {
+    text: '',
+    textStyle: {
+      fontSize: 12,
+      fontWeight: 400,
+    },
+    left: 'center',
+    top: '0%',
+  },
+  legend: {
+    icon: 'circle',
+    top: '0',
+    right: '30%',
+    itemWidth: 6,
+    itemGap: 20,
+    textStyle: {
+      color: '#556677',
+    },
+  },
+  tooltip: {
+    trigger: 'axis',
+    axisPointer: {
+      label: {
+        show: true,
+        backgroundColor: '#fff',
+        color: '#556677',
+        borderColor: 'rgba(0,0,0)',
+        shadowColor: 'rgba(0,0,0,0.3)',
+        shadowOffsetY: 0,
+      },
+      lineStyle: {
+        width: 0,
+      },
+    },
+    backgroundColor: '#fff',
+    textStyle: {
+      color: '#5c6c7c',
+    },
+    padding: [10, 10],
+    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) => {
+        // 获取系列颜色（param.color）
+        const colorDot = `<span style="
+          display:inline-block;
+          margin-right:5px;
+          border-radius:50%;
+          width:10px;
+          height:10px;
+          background-color:${colorList[index]}">
+        </span>`;
+        let unit = "";
+        if (param.seriesName == '销售总额') {
+          unit = "元";
+        } else if (param.seriesName == '订单总数') {
+          unit = "个";
+        } else if (param.seriesName == '浏览量') {
+          unit = "人次";
+        } else if (param.seriesName == '成功退款金额') {
+          unit = "元";
+        }
+        result += `${colorDot} ${param.seriesName}: ${param.value} ${unit} <br>`;
+      });
+      return result;
+    },
+  },
+  grid: {
+    top: '20%',
+    left: 26,
+    right: 26,
+    bottom: 40,  // 底部留白给图例
+  },
+  xAxis: [
+    {
+      type: 'category',
+      data: xData.value,
+      axisLine: {
+        lineStyle: {
+          color: 'rgba(107,107,107,0.37)',
+        },
+      },
+      axisTick: {
+        show: false,
+      },
+      axisLabel: {
+        interval: 0,
+        textStyle: {
+          color: '#999',
+        },
+        margin: 15,
+      },
+      axisPointer: {
+        label: {
+          padding: [11, 5, 7],
+          backgroundColor: {
+            type: 'linear',
+            x: 0,
+            y: 0,
+            x2: 0,
+            y2: 1,
+            colorStops: [
+              {
+                offset: 0,
+                color: '#fff',
+              },
+              {
+                offset: 0.9,
+                color: '#fff',
+              },
+              {
+                offset: 0.9,
+                color: '#33c0cd',
+              },
+              {
+                offset: 1,
+                color: '#33c0cd',
+              },
+            ],
+            global: false,
+          },
+        },
+      },
+      boundaryGap: false,
+    },
+  ],
+  yAxis: [
+    {
+      type: 'value',
+      show: false,
+      axisTick: {
+        show: false,
+      },
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: 'rgba(107,107,107,0.37)',
+        },
+      },
+      axisLabel: {
+        textStyle: {
+          color: '#999',
+        },
+      },
+      splitLine: {
+        show: false,
+      },
+    },
+    {
+      type: 'value',
+      show: false,
+      axisTick: {
+        show: false,
+      },
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: 'rgba(107,107,107,0.37)',
+        },
+      },
+      axisLabel: {
+        textStyle: {
+          color: '#999',
+        },
+      },
+      splitLine: {
+        show: false,
+      },
+    },
+    {
+      type: 'value',
+      show: false,
+      axisTick: {
+        show: false,
+      },
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: 'rgba(107,107,107,0.37)',
+        },
+      },
+      axisLabel: {
+        textStyle: {
+          color: '#999',
+        },
+      },
+      splitLine: {
+        show: false,
+      },
+    },
+    {
+      type: 'value',
+      show: false,
+      axisTick: {
+        show: false,
+      },
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: 'rgba(107,107,107,0.37)',
+        },
+      },
+      axisLabel: {
+        textStyle: {
+          color: '#999',
+        },
+      },
+      splitLine: {
+        show: false,
+      },
+    },
+  ],
+  series: [
+    {
+      name: '销售总额',
+      type: 'line',
+      data: totalSalesData.value,
+      symbolSize: 1,
+      symbol: 'circle',
+      smooth: true,
+      yAxisIndex: 0,
+      showSymbol: false,
+      lineStyle: {
+        width: 3,
+        color: '#3685FE',
+        shadowColor: 'rgba(158,135,255, 0.3)',
+        shadowBlur: 10,
+        shadowOffsetY: 20,
+      },
+      itemStyle: {
+        color: colorList[0],
+        borderColor: colorList[0],
+      },
+    },
+    {
+      name: '订单总数',
+      type: 'line',
+      data: totalOrdersData.value,
+      symbolSize: 1,
+      symbol: 'circle',
+      smooth: true,
+      yAxisIndex: 1,
+      showSymbol: false,
+      lineStyle: {
+        width: 3,
+        color: '#FFD500',
+        shadowColor: 'rgba(115,221,255, 0.3)',
+        shadowBlur: 10,
+        shadowOffsetY: 20,
+      },
+      itemStyle: {
+        color: colorList[1],
+        borderColor: colorList[1],
+      },
+    },
+    {
+      name: '浏览量',
+      type: 'line',
+      data: pageViewData.value,
+      symbolSize: 1,
+      symbol: 'circle',
+      smooth: true,
+      yAxisIndex: 2,
+      showSymbol: false,
+      lineStyle: {
+        width: 3,
+        color: '#25BF82',
+        shadowColor: 'rgba(115,221,255, 0.3)',
+        shadowBlur: 10,
+        shadowOffsetY: 20,
+      },
+      itemStyle: {
+        color: colorList[2],
+        borderColor: colorList[2],
+      },
+    },
+    {
+      name: '成功退款金额',
+      type: 'line',
+      data: refundAmountData.value,
+      symbolSize: 1,
+      symbol: 'circle',
+      smooth: true,
+      yAxisIndex: 3,
+      showSymbol: false,
+      lineStyle: {
+        width: 3,
+        color: '#FF7F00',
+        shadowColor: 'rgba(115,221,255, 0.3)',
+        shadowBlur: 10,
+        shadowOffsetY: 20,
+      },
+      itemStyle: {
+        color: colorList[3],
+        borderColor: colorList[3],
+      },
+    },
+  ],
+};
+
+const initChart = () => {
+  if (chartRef.value) {
+    // 基于准备好的dom，初始化echarts实例
+    chartInstance = echarts.init(chartRef.value);
+    // 绘制图表
+    chartInstance.setOption(option);
+    // 自动显示最大值点的tooltip
+    // showMaxValueTooltip();
+    // 响应式调整
+    window.addEventListener('resize', resizeChart);
+  }
+};
+
+// 调整图表大小
+const resizeChart = () => {
+  if (chartInstance) {
+    chartInstance.resize();
+  }
+};
+// 加载数据-图表模块
+const loadEchartsData = async () => {
+  try {
+    let response = await getEchartsData({
+      queryStartTime: startDate.value + " 00:00:00",
+      queryEndTime: endDate.value + " 23:59:59",
+      queryType: dateRadio.value,
+    });
+    if (response.code == 200) {
+      option.xAxis[0].data = response.data?.xdata ?? generateDateArray(7);
+      option.series[0].data = response.data?.totalSalesData;
+      option.series[1].data = response.data?.totalOrdersData;
+      option.series[2].data = response.data?.pageViewData;
+      option.series[3].data = response.data?.refundAmountData;
+      chartInstance.setOption(option);
+    } else {
+      echartsMockData(7);
+    }
+  } catch (error) { }
+};
+const echartsMockData = (count = 7) => {
+  // console.log("右上角图表数据更新");
+  const xzData = generateDateArray(count);
+  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)']
+  })
+  option.xAxis[0].data = obj.xData;
+  option.series[0].data = obj.totalSalesData;
+  option.series[1].data = obj.totalOrdersData;
+  option.series[2].data = obj.pageViewData;
+  option.series[3].data = obj.refundAmountData;
+  chartInstance.setOption(option);
+};
+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
+}
+
+
+// 切换日期按钮
+let dateRadio = ref(1);
+let startDate = ref('');
+let endDate = ref('');
+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) {
+    day = 7;
+  } else if (val == 2) {
+    day = 30;
+  } else if (val == 3) {
+    day = 365;
+  }
+  // echartsMockData(day); //模拟图表数据
+};
+
+/**
+ * 根据给定的时间范围类型，生成相应的日期范围
+ * @param {number} type - 日期范围类型：1:按周 2:按月 3:按年
+ * @returns {Object} 包含开始日期和结束日期的对象，格式为YYYY-MM-DD
+ */
+function generateDateRange(type) {
+  // 获取今天的日期
+  const today = new Date();
+  // 结束日期为今天的日期
+  const endDate = new Date(today);
+  // 初始化开始日期为今天的日期
+  let startDate = new Date(today);
+
+  // 根据不同类型计算开始日期
+  switch (type) {
+    case 1: // 周
+      startDate.setDate(today.getDate() - 6); // 7天包括今天
+      break;
+    case 2: // 月
+      startDate.setDate(today.getDate() - 29); // 30天包括今天
+      break;
+    case 3: // 年
+      startDate.setDate(today.getDate() - 364); // 365天包括今天
+      break;
+    default:
+      // 抛出异常，提示参数类型无效
+      throw new Error('无效的参数类型，请输入1(周)、2(月)或3(年)');
+  }
+
+  // 格式化日期为YYYY-MM-DD
+  const formatDate = (date) => {
+    const year = date.getFullYear();
+    const month = String(date.getMonth() + 1).padStart(2, '0');
+    const day = String(date.getDate()).padStart(2, '0');
+    return `${year}-${month}-${day}`;
+  };
+
+  // 返回计算出的日期范围
+  return {
+    startDate: formatDate(startDate),
+    endDate: formatDate(endDate)
+  };
+}
+
+let topLeftData = ref({});
+const initTopLeftData = () => {
+  topLeftData.value = Object.assign({}, {
+    salesTotalAmount: 0, //销售总额
+    orderTotalNum: 0, //订单总数
+    viewCount: 0, //浏览量
+    refundSuccessAmout: 0, //成功退款金额
+  });
+};
+// 加载数据-顶部左侧模块
+const loadTopLeftData = async () => {
+  // console.log('左上角数据更新');
+  try {
+    let response = await getAstsTransTotals({
+      queryStartTime: startDate.value + " 00:00:00",
+      queryEndTime: endDate.value + " 23:59:59",
+      queryType: dateRadio.value,
+    });
+    if (response.code == 200) {
+      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();
+    }
+  } catch (error) {
+    initTopLeftData();
+  }
+};
+
+// 中间模块
+const middleData = ref([]);
+const generateMockData = () => {
+  return Mock.mock({
+    "list|5": [
+      { // 中间模块数据
+        "id|+1": 10000,
+        title: '@pick(["买家数量", "支付转化率", "客单价", "退款率", "加购数量"])', //标题
+        value: "@float(10, 200, 2, 2)", //数值
+        unit: '@pick(["人", "%", "元", "%", "次"])', //单位
+        toolTip: '@pick(["购买商品人数统计", "支付转化率 = 完成支付的订单数量 + 访问网站的用户数量 x 100%", "客单价是指每一位顾客平均购买商品金额", "退款率 = （退款订单数量 + 总订单数量） x 100%", "用户将商品加入购物车次数"])', //描述提示
+        ratioMethod: '@pick(["环比", "同比"])', //比率方式
+        ratioStatus: '@pick(["上升", "下降"])', //比率状态， 后台看存储的是汉字还是数字
+        ratioValue: '@float(10, 20, 1, 1)' + '%', //比率值
+
+        // 底部左侧数据
+        "ranking|+1": 1, //排名
+        goodUrl: tomato.value, //商品图片地址
+        goodName: "@cname", //商品信息
+        stockToUseRatio: "@float(10, 200, 2, 2)" + "%", //存销比
+        salesAmount: "@integer(1000, 20000)" + "元", //销售金额
+      },
+    ],
+  }).list;
+};
+// 加载数据-中间模块
+const loadMiddleData = async () => {
+  // console.log('中间数据更新');
+  // middleData.value = generateMockData();
+
+  try {
+    let response = await getMidleInfo({
+      queryStartTime: startDate.value + " 00:00:00",
+      queryEndTime: endDate.value + " 23:59:59",
+      queryType: dateRadio.value,
+    });
+    if (response.code == 200) {
+      middleData.value = response.data;
+    } else {
+      middleData.value = [];
+    }
+  } catch (error) { }
+};
+
+// 底部左侧模块
+const tableData = ref([]);
+let tableLoading = ref(false);
+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", formatter: (row) => `${row.stockToUseRatio ?? 0}%` },
+  { prop: "salesAmount", label: "销售金额", width: 100, align: "left", formatter: (row) => `${row.salesAmount ?? 0}元` },
+]);
+// 加载数据-底部左侧模块
+const loadbottomLeftData = async () => {
+  // console.log('左下角数据更新');
+  // tableLoading.value = true;
+  // tableData.value = generateMockData();
+  // tableLoading.value = false;
+
+  try {
+    tableLoading.value = true;
+    let response = await getGoodsSalesInfo({
+      queryStartTime: startDate.value + " 00:00:00",
+      queryEndTime: endDate.value + " 23:59:59",
+      queryType: dateRadio.value,
+      orderByType: 0  // 0: 按照销售金额排序 2: 按照销售数量排序
+    });
+    tableLoading.value = false;
+    if (response.code == 200) {
+      tableData.value = response.data;
+    } else {
+      tableData.value = [];
+    }
+  } catch (error) {
+    tableLoading.value = false;
+  }
+};
+
+const afterSalesData = ref({
+  totalAfterSalesOrders: 0, //售后订单总数
+  totalRefundAmount: 0, //售后退款金额
+  totalRefundOrders: 0, //售后订单总数
+  warningProductInfos: [
+    // 售后商品信息
+    // { goodUrl: tomato.value, goodName: "耿马西红柿", refundedOrders: "25单", refundAmount: '129元' },
+  ],
+});
+// 加载数据-底部右侧模块
+const loadbottomRightData = async () => {
+  // console.log('右下角数据更新');
+  // afterSalesData.value = {
+  //   totalAfterSalesOrders: 1128,
+  //   totalRefundAmount: 265,
+  //   totalRefundOrders: 129,
+  //   warningProductInfos: [
+  //     { goodUrl: tomato.value, goodName: "耿马西红柿耿马西红柿耿马西红柿耿马西红柿耿马西红柿", refundedOrders: "25单", refundAmount: '129元' },
+  //     { goodUrl: tomato.value, goodName: "耿马西红柿", refundedOrders: "36单", refundAmount: '265元' },
+  //     { goodUrl: tomato.value, goodName: "耿马西红柿", refundedOrders: "51单", refundAmount: '146元' },
+  //     { goodUrl: tomato.value, goodName: "耿马西红柿耿马西红柿耿马西红柿耿马西红柿耿马西红柿", refundedOrders: "25单", refundAmount: '239元' },
+  //     { goodUrl: tomato.value, goodName: "耿马西红柿", refundedOrders: "36单", refundAmount: '365元' },
+  //     { goodUrl: tomato.value, goodName: "耿马西红柿", refundedOrders: "51单", refundAmount: '198元' },
+  //   ],
+  // };
+
+  try {
+    let response = await getAfterSalesData({
+      queryStartTime: startDate.value + " 00:00:00",
+      queryEndTime: endDate.value + " 23:59:59",
+      queryType: dateRadio.value,
+    });
+    if (response.code == 200) {
+      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) { }
+};
+
+
+const chartContainer = ref(null);
+const middleRef = ref(null);
+const warningGoodsRef = ref(null);
+const tableViewportHeight = ref(0);
+// 精确计算可用高度
+const calculateTableHeight = () => {
+  // 获取窗口总高度
+  const windowHeight = window.innerHeight;
+
+  // 获取各组件高度
+  const chartContainerHeight = chartContainer.value?.offsetHeight || 0;
+  const middleRefHeight = middleRef.value?.offsetHeight || 0;
+
+  // 计算容器内边距补偿（根据实际样式调整）
+  const paddingCompensation = 306;
+
+  // 最终计算
+  const height = windowHeight - chartContainerHeight - middleRefHeight - paddingCompensation;
+  tableViewportHeight.value = height < 300 ? 300 : height;
+};
+
+onMounted(async () => {
+  initTopLeftData
+  await initChart();
+  changeDateRadio(1);
+  await nextTick();
+  calculateTableHeight();
+  window.addEventListener("resize", calculateTableHeight);
+});
+// 组件卸载前销毁图表
+onBeforeUnmount(() => {
+  if (chartInstance) {
+    window.removeEventListener('resize', resizeChart);
+    chartInstance.dispose();
+    chartInstance = null;
+  }
+  window.removeEventListener('resize', calculateTableHeight);
+});
+</script>
+<style lang="scss" scoped>
+.title {
+  width: 200px;
+  display: flex;
+  align-items: center;
+  margin-right: 20px;
+  font-size: 18px;
+  color: #999999;
+}
+
+.title-image {
+  margin-right: 10px;
+  width: 38px;
+  height: 38px;
+}
+
+.number {
+  margin-right: 100px;
+  margin-top: 16px;
+  font-size: 18px;
+  font-weight: bold;
+  color: #000000;
+}
+
+.app-container-list {
+  margin-top: 20px;
+  display: flex;
+  align-items: center;
+  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 */
+  }
+
+  .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%;
+    background-color: #fff;
+    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%;
+
+      .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;
+          font-weight: bold;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/trade/dataBoard.vue b/src/views/trade/dataBoard.vue
index af3d9da..bc61ff2 100644
--- a/src/views/trade/dataBoard.vue
+++ b/src/views/trade/dataBoard.vue
@@ -1,1124 +1,6 @@
 <template>
-  <div class="app-container customer-control">
-    <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"
-          >
-            <el-radio-button label="周" :value="1" />
-            <el-radio-button label="月" :value="2" />
-            <el-radio-button label="年" :value="3" />
-          </el-radio-group>
-        </div>
-        <div style="display: flex">
-          <div class="app-container-data-left">
-            <div class="app-container-data-left-top">
-              <div>
-                <div class="title">
-                  <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=""
-                  />
-                  <div>订单总数(单)</div>
-                </div>
-                <div class="number">{{ topLeftData.orderTotalNum }}</div>
-              </div>
-            </div>
-            <div class="app-container-data-left-bottom">
-              <div>
-                <div class="title">
-                  <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=""
-                  />
-                  <div>成功退款金额(元)</div>
-                </div>
-                <div class="number">{{ topLeftData.refundSuccessAmout }}</div>
-              </div>
-            </div>
-          </div>
-          <div class="app-container-data-right">
-            <div ref="chartRef" style="width: 100%; height: 200px"></div>
-          </div>
-        </div>
-      </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 }}
-            <el-popover title="" :content="item.toolTip" placement="left-start">
-              <template #reference>
-                <el-icon color="#c5c5c5" style="float: right">
-                  <QuestionFilled />
-                </el-icon>
-              </template>
-            </el-popover>
-          </div>
-          <div class="app-container-block-price">
-            {{ item.valueStr ?? "--" }}
-            <text style="font-size: 12px; color: #999999; margin-left: 5px">
-              {{ 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>
-          </div>
-        </div>
-      </div>
-      <!-- 底部模块 -->
-      <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"
-            >
-              <!-- 自定义-排名图片 -->
-              <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"
-                >
-                  <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"
-                >
-                  <img :src="img3" class="table-cell-img" alt="" />
-                </div>
-                <div v-else>{{ slotProps.row.ranking }}</div>
-              </template>
-
-              <!-- 自定义-商品图片 -->
-              <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>
-              </template>
-            </tableComponent>
-          </div>
-        </div>
-        <div class="bottom-box-item">
-          <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-item">
-                <div class="bottom-box-summary-title">售后订单数量(单)</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>
-              <div class="bottom-box-summary-item">
-                <div class="bottom-box-summary-title">退货退款订单数量(单)</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-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>
-              </div>
-              <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-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>
-              <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>
-              </template>
-            </div>
-          </div>
-        </div>
-      </div>
+    <div class="app-container">
+        开发中...
     </div>
-  </div>
 </template>
-<script setup>
-import { onMounted, ref, onBeforeUnmount } from "vue";
-import Mock from "mockjs";
-import tableComponent from "@/components/tableComponent.vue";
-import * as echarts from "echarts";
-import { getAstsTransTotals, getEchartsData, getMidleInfo, getGoodsSalesInfo, getAfterSalesData } from "@/api/trade/dataBoard";
-
-import img1 from "@/assets/images/first.png";
-import img2 from "@/assets/images/second.png";
-import img3 from "@/assets/images/third.png";
-import alert from "@/assets/images/alert.png";
-let tomato = ref("http://gov-cloud.oss-cn-chengdu.aliyuncs.com/backend/a866613495ed4678957a4440b8d3776c.png");
-
-// 图表 DOM 引用
-const chartRef = ref(null);
-// ECharts 实例
-let chartInstance = null;
-// 颜色列表
-const colorList = ['#3685FE', '#FFD500', '#25BF82', '#FF7F00'];
-// x轴数据
-const xData = ref([]);
-const totalSalesData = ref([]); //销售总额数据
-const totalOrdersData = ref([]); //订单总数数据
-const pageViewData = ref([]); //浏览量数据
-const refundAmountData = ref([]); //成功退款金额数据
-
-// 图表配置
-const option = {
-  backgroundColor: '#fff',
-  title: {
-    text: '',
-    textStyle: {
-      fontSize: 12,
-      fontWeight: 400,
-    },
-    left: 'center',
-    top: '0%',
-  },
-  legend: {
-    icon: 'circle',
-    top: '0',
-    right: '30%',
-    itemWidth: 6,
-    itemGap: 20,
-    textStyle: {
-      color: '#556677',
-    },
-  },
-  tooltip: {
-    trigger: 'axis',
-    axisPointer: {
-      label: {
-        show: true,
-        backgroundColor: '#fff',
-        color: '#556677',
-        borderColor: 'rgba(0,0,0)',
-        shadowColor: 'rgba(0,0,0,0.3)',
-        shadowOffsetY: 0,
-      },
-      lineStyle: {
-        width: 0,
-      },
-    },
-    backgroundColor: '#fff',
-    textStyle: {
-      color: '#5c6c7c',
-    },
-    padding: [10, 10],
-    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) => {
-        // 获取系列颜色（param.color）
-        const colorDot = `<span style="
-          display:inline-block;
-          margin-right:5px;
-          border-radius:50%;
-          width:10px;
-          height:10px;
-          background-color:${colorList[index]}">
-        </span>`;
-        let unit = "";
-        if (param.seriesName == '销售总额') {
-          unit = "元";
-        } else if (param.seriesName == '订单总数') {
-          unit = "个";
-        } else if (param.seriesName == '浏览量') {
-          unit = "人次";
-        } else if (param.seriesName == '成功退款金额') {
-          unit = "元";
-        }
-        result += `${colorDot} ${param.seriesName}: ${param.value} ${unit} <br>`;
-      });
-      return result;
-    },
-  },
-  grid: {
-    top: '20%',
-    left: 26,
-    right: 26,
-    bottom: 40,  // 底部留白给图例
-  },
-  xAxis: [
-    {
-      type: 'category',
-      data: xData.value,
-      axisLine: {
-        lineStyle: {
-          color: 'rgba(107,107,107,0.37)',
-        },
-      },
-      axisTick: {
-        show: false,
-      },
-      axisLabel: {
-        interval: 0,
-        textStyle: {
-          color: '#999',
-        },
-        margin: 15,
-      },
-      axisPointer: {
-        label: {
-          padding: [11, 5, 7],
-          backgroundColor: {
-            type: 'linear',
-            x: 0,
-            y: 0,
-            x2: 0,
-            y2: 1,
-            colorStops: [
-              {
-                offset: 0,
-                color: '#fff',
-              },
-              {
-                offset: 0.9,
-                color: '#fff',
-              },
-              {
-                offset: 0.9,
-                color: '#33c0cd',
-              },
-              {
-                offset: 1,
-                color: '#33c0cd',
-              },
-            ],
-            global: false,
-          },
-        },
-      },
-      boundaryGap: false,
-    },
-  ],
-  yAxis: [
-    {
-      type: 'value',
-      show: false,
-      axisTick: {
-        show: false,
-      },
-      axisLine: {
-        show: true,
-        lineStyle: {
-          color: 'rgba(107,107,107,0.37)',
-        },
-      },
-      axisLabel: {
-        textStyle: {
-          color: '#999',
-        },
-      },
-      splitLine: {
-        show: false,
-      },
-    },
-    {
-      type: 'value',
-      show: false,
-      axisTick: {
-        show: false,
-      },
-      axisLine: {
-        show: true,
-        lineStyle: {
-          color: 'rgba(107,107,107,0.37)',
-        },
-      },
-      axisLabel: {
-        textStyle: {
-          color: '#999',
-        },
-      },
-      splitLine: {
-        show: false,
-      },
-    },
-    {
-      type: 'value',
-      show: false,
-      axisTick: {
-        show: false,
-      },
-      axisLine: {
-        show: true,
-        lineStyle: {
-          color: 'rgba(107,107,107,0.37)',
-        },
-      },
-      axisLabel: {
-        textStyle: {
-          color: '#999',
-        },
-      },
-      splitLine: {
-        show: false,
-      },
-    },
-    {
-      type: 'value',
-      show: false,
-      axisTick: {
-        show: false,
-      },
-      axisLine: {
-        show: true,
-        lineStyle: {
-          color: 'rgba(107,107,107,0.37)',
-        },
-      },
-      axisLabel: {
-        textStyle: {
-          color: '#999',
-        },
-      },
-      splitLine: {
-        show: false,
-      },
-    },
-  ],
-  series: [
-    {
-      name: '销售总额',
-      type: 'line',
-      data: totalSalesData.value,
-      symbolSize: 1,
-      symbol: 'circle',
-      smooth: true,
-      yAxisIndex: 0,
-      showSymbol: false,
-      lineStyle: {
-        width: 3,
-        color: '#3685FE',
-        shadowColor: 'rgba(158,135,255, 0.3)',
-        shadowBlur: 10,
-        shadowOffsetY: 20,
-      },
-      itemStyle: {
-        color: colorList[0],
-        borderColor: colorList[0],
-      },
-    },
-    {
-      name: '订单总数',
-      type: 'line',
-      data: totalOrdersData.value,
-      symbolSize: 1,
-      symbol: 'circle',
-      smooth: true,
-      yAxisIndex: 1,
-      showSymbol: false,
-      lineStyle: {
-        width: 3,
-        color: '#FFD500',
-        shadowColor: 'rgba(115,221,255, 0.3)',
-        shadowBlur: 10,
-        shadowOffsetY: 20,
-      },
-      itemStyle: {
-        color: colorList[1],
-        borderColor: colorList[1],
-      },
-    },
-    {
-      name: '浏览量',
-      type: 'line',
-      data: pageViewData.value,
-      symbolSize: 1,
-      symbol: 'circle',
-      smooth: true,
-      yAxisIndex: 2,
-      showSymbol: false,
-      lineStyle: {
-        width: 3,
-        color: '#25BF82',
-        shadowColor: 'rgba(115,221,255, 0.3)',
-        shadowBlur: 10,
-        shadowOffsetY: 20,
-      },
-      itemStyle: {
-        color: colorList[2],
-        borderColor: colorList[2],
-      },
-    },
-    {
-      name: '成功退款金额',
-      type: 'line',
-      data: refundAmountData.value,
-      symbolSize: 1,
-      symbol: 'circle',
-      smooth: true,
-      yAxisIndex: 3,
-      showSymbol: false,
-      lineStyle: {
-        width: 3,
-        color: '#FF7F00',
-        shadowColor: 'rgba(115,221,255, 0.3)',
-        shadowBlur: 10,
-        shadowOffsetY: 20,
-      },
-      itemStyle: {
-        color: colorList[3],
-        borderColor: colorList[3],
-      },
-    },
-  ],
-};
-
-const initChart = () => {
-  if (chartRef.value) {
-    // 基于准备好的dom，初始化echarts实例
-    chartInstance = echarts.init(chartRef.value);
-    // 绘制图表
-    chartInstance.setOption(option);
-    // 自动显示最大值点的tooltip
-    // showMaxValueTooltip();
-    // 响应式调整
-    window.addEventListener('resize', resizeChart);
-  }
-};
-
-// 调整图表大小
-const resizeChart = () => {
-  if (chartInstance) {
-    chartInstance.resize();
-  }
-};
-// 加载数据-图表模块
-const loadEchartsData = async () => {
-  try {
-    let response = await getEchartsData({
-      queryStartTime: startDate.value + " 00:00:00",
-      queryEndTime: endDate.value + " 23:59:59",
-      queryType: dateRadio.value,
-    });
-    if (response.code == 200) {
-      option.xAxis[0].data = response.data?.xdata ?? generateDateArray(7);
-      option.series[0].data = response.data?.totalSalesData;
-      option.series[1].data = response.data?.totalOrdersData;
-      option.series[2].data = response.data?.pageViewData;
-      option.series[3].data = response.data?.refundAmountData;
-      chartInstance.setOption(option);
-    } else {
-      echartsMockData(7);
-    }
-  } catch (error) { }
-};
-const echartsMockData = (count = 7) => {
-  // console.log("右上角图表数据更新");
-  const xzData = generateDateArray(count);
-  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)']
-  })
-  option.xAxis[0].data = obj.xData;
-  option.series[0].data = obj.totalSalesData;
-  option.series[1].data = obj.totalOrdersData;
-  option.series[2].data = obj.pageViewData;
-  option.series[3].data = obj.refundAmountData;
-  chartInstance.setOption(option);
-};
-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
-}
-
-
-// 切换日期按钮
-let dateRadio = ref(1);
-let startDate = ref('');
-let endDate = ref('');
-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) {
-    day = 7;
-  } else if (val == 2) {
-    day = 30;
-  } else if (val == 3) {
-    day = 365;
-  }
-  // echartsMockData(day); //模拟图表数据
-};
-
-/**
- * 根据给定的时间范围类型，生成相应的日期范围
- * @param {number} type - 日期范围类型：1:按周 2:按月 3:按年
- * @returns {Object} 包含开始日期和结束日期的对象，格式为YYYY-MM-DD
- */
-function generateDateRange(type) {
-  // 获取今天的日期
-  const today = new Date();
-  // 结束日期为今天的日期
-  const endDate = new Date(today);
-  // 初始化开始日期为今天的日期
-  let startDate = new Date(today);
-
-  // 根据不同类型计算开始日期
-  switch (type) {
-    case 1: // 周
-      startDate.setDate(today.getDate() - 6); // 7天包括今天
-      break;
-    case 2: // 月
-      startDate.setDate(today.getDate() - 29); // 30天包括今天
-      break;
-    case 3: // 年
-      startDate.setDate(today.getDate() - 364); // 365天包括今天
-      break;
-    default:
-      // 抛出异常，提示参数类型无效
-      throw new Error('无效的参数类型，请输入1(周)、2(月)或3(年)');
-  }
-
-  // 格式化日期为YYYY-MM-DD
-  const formatDate = (date) => {
-    const year = date.getFullYear();
-    const month = String(date.getMonth() + 1).padStart(2, '0');
-    const day = String(date.getDate()).padStart(2, '0');
-    return `${year}-${month}-${day}`;
-  };
-
-  // 返回计算出的日期范围
-  return {
-    startDate: formatDate(startDate),
-    endDate: formatDate(endDate)
-  };
-}
-
-let topLeftData = ref({});
-const initTopLeftData = () => {
-  topLeftData.value = Object.assign({}, {
-    salesTotalAmount: 0, //销售总额
-    orderTotalNum: 0, //订单总数
-    viewCount: 0, //浏览量
-    refundSuccessAmout: 0, //成功退款金额
-  });
-};
-// 加载数据-顶部左侧模块
-const loadTopLeftData = async () => {
-  // console.log('左上角数据更新');
-  try {
-    let response = await getAstsTransTotals({
-      queryStartTime: startDate.value + " 00:00:00",
-      queryEndTime: endDate.value + " 23:59:59",
-      queryType: dateRadio.value,
-    });
-    if (response.code == 200) {
-      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();
-    }
-  } catch (error) {
-    initTopLeftData();
-  }
-};
-
-// 中间模块
-const middleData = ref([]);
-const generateMockData = () => {
-  return Mock.mock({
-    "list|5": [
-      { // 中间模块数据
-        "id|+1": 10000,
-        title: '@pick(["买家数量", "支付转化率", "客单价", "退款率", "加购数量"])', //标题
-        value: "@float(10, 200, 2, 2)", //数值
-        unit: '@pick(["人", "%", "元", "%", "次"])', //单位
-        toolTip: '@pick(["购买商品人数统计", "支付转化率 = 完成支付的订单数量 + 访问网站的用户数量 x 100%", "客单价是指每一位顾客平均购买商品金额", "退款率 = （退款订单数量 + 总订单数量） x 100%", "用户将商品加入购物车次数"])', //描述提示
-        ratioMethod: '@pick(["环比", "同比"])', //比率方式
-        ratioStatus: '@pick(["上升", "下降"])', //比率状态， 后台看存储的是汉字还是数字
-        ratioValue: '@float(10, 20, 1, 1)' + '%', //比率值
-
-        // 底部左侧数据
-        "ranking|+1": 1, //排名
-        goodUrl: tomato.value, //商品图片地址
-        goodName: "@cname", //商品信息
-        stockToUseRatio: "@float(10, 200, 2, 2)" + "%", //存销比
-        salesAmount: "@integer(1000, 20000)" + "元", //销售金额
-      },
-    ],
-  }).list;
-};
-// 加载数据-中间模块
-const loadMiddleData = async () => {
-  // console.log('中间数据更新');
-  // middleData.value = generateMockData();
-
-  try {
-    let response = await getMidleInfo({
-      queryStartTime: startDate.value + " 00:00:00",
-      queryEndTime: endDate.value + " 23:59:59",
-      queryType: dateRadio.value,
-    });
-    if (response.code == 200) {
-      middleData.value = response.data;
-    } else {
-      middleData.value = [];
-    }
-  } catch (error) { }
-};
-
-// 底部左侧模块
-const tableData = ref([]);
-let tableLoading = ref(false);
-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", formatter: (row) => `${row.stockToUseRatio ?? 0}%` },
-  { prop: "salesAmount", label: "销售金额", width: 100, align: "left", formatter: (row) => `${row.salesAmount ?? 0}元` },
-]);
-// 加载数据-底部左侧模块
-const loadbottomLeftData = async () => {
-  // console.log('左下角数据更新');
-  // tableLoading.value = true;
-  // tableData.value = generateMockData();
-  // tableLoading.value = false;
-
-  try {
-    tableLoading.value = true;
-    let response = await getGoodsSalesInfo({
-      queryStartTime: startDate.value + " 00:00:00",
-      queryEndTime: endDate.value + " 23:59:59",
-      queryType: dateRadio.value,
-      orderByType: 0  // 0: 按照销售金额排序 2: 按照销售数量排序
-    });
-    tableLoading.value = false;
-    if (response.code == 200) {
-      tableData.value = response.data;
-    } else {
-      tableData.value = [];
-    }
-  } catch (error) {
-    tableLoading.value = false;
-  }
-};
-
-const afterSalesData = ref({
-  totalAfterSalesOrders: 0, //售后订单总数
-  totalRefundAmount: 0, //售后退款金额
-  totalRefundOrders: 0, //售后订单总数
-  warningProductInfos: [
-    // 售后商品信息
-    // { goodUrl: tomato.value, goodName: "耿马西红柿", refundedOrders: "25单", refundAmount: '129元' },
-  ],
-});
-// 加载数据-底部右侧模块
-const loadbottomRightData = async () => {
-  // console.log('右下角数据更新');
-  // afterSalesData.value = {
-  //   totalAfterSalesOrders: 1128,
-  //   totalRefundAmount: 265,
-  //   totalRefundOrders: 129,
-  //   warningProductInfos: [
-  //     { goodUrl: tomato.value, goodName: "耿马西红柿耿马西红柿耿马西红柿耿马西红柿耿马西红柿", refundedOrders: "25单", refundAmount: '129元' },
-  //     { goodUrl: tomato.value, goodName: "耿马西红柿", refundedOrders: "36单", refundAmount: '265元' },
-  //     { goodUrl: tomato.value, goodName: "耿马西红柿", refundedOrders: "51单", refundAmount: '146元' },
-  //     { goodUrl: tomato.value, goodName: "耿马西红柿耿马西红柿耿马西红柿耿马西红柿耿马西红柿", refundedOrders: "25单", refundAmount: '239元' },
-  //     { goodUrl: tomato.value, goodName: "耿马西红柿", refundedOrders: "36单", refundAmount: '365元' },
-  //     { goodUrl: tomato.value, goodName: "耿马西红柿", refundedOrders: "51单", refundAmount: '198元' },
-  //   ],
-  // };
-
-  try {
-    let response = await getAfterSalesData({
-      queryStartTime: startDate.value + " 00:00:00",
-      queryEndTime: endDate.value + " 23:59:59",
-      queryType: dateRadio.value,
-    });
-    if (response.code == 200) {
-      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) { }
-};
-
-
-const chartContainer = ref(null);
-const middleRef = ref(null);
-const warningGoodsRef = ref(null);
-const tableViewportHeight = ref(0);
-// 精确计算可用高度
-const calculateTableHeight = () => {
-  // 获取窗口总高度
-  const windowHeight = window.innerHeight;
-
-  // 获取各组件高度
-  const chartContainerHeight = chartContainer.value?.offsetHeight || 0;
-  const middleRefHeight = middleRef.value?.offsetHeight || 0;
-
-  // 计算容器内边距补偿（根据实际样式调整）
-  const paddingCompensation = 306;
-
-  // 最终计算
-  const height = windowHeight - chartContainerHeight - middleRefHeight - paddingCompensation;
-  tableViewportHeight.value = height < 300 ? 300 : height;
-};
-
-onMounted(async () => {
-  initTopLeftData
-  await initChart();
-  changeDateRadio(1);
-  await nextTick();
-  calculateTableHeight();
-  window.addEventListener("resize", calculateTableHeight);
-});
-// 组件卸载前销毁图表
-onBeforeUnmount(() => {
-  if (chartInstance) {
-    window.removeEventListener('resize', resizeChart);
-    chartInstance.dispose();
-    chartInstance = null;
-  }
-  window.removeEventListener('resize', calculateTableHeight);
-});
-</script>
-<style lang="scss" scoped>
-.title {
-  width: 200px;
-  display: flex;
-  align-items: center;
-  margin-right: 20px;
-  font-size: 18px;
-  color: #999999;
-}
-
-.title-image {
-  margin-right: 10px;
-  width: 38px;
-  height: 38px;
-}
-
-.number {
-  margin-right: 100px;
-  margin-top: 16px;
-  font-size: 18px;
-  font-weight: bold;
-  color: #000000;
-}
-
-.app-container-list {
-  margin-top: 20px;
-  display: flex;
-  align-items: center;
-  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 */
-  }
-
-  .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%;
-    background-color: #fff;
-    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%;
-
-      .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;
-          font-weight: bold;
-        }
-      }
-    }
-  }
-}
-</style>
+<script setup></script>
\ No newline at end of file