feat:首页统计数据对接

jd-logistics-ui-v3/src/api/logistics/index.js

@@ -0,0 +1,27 @@
+import request from '@/utils/request'
+
+/**
+ * 获取订单总量
+ * @param query
+ * @returns {*}
+ */
+export function getTotalOrderStatist(query) {
+    return request({
+        url: '/system/index/getTotalOrdersByOrderType',
+        method: 'get',
+        params: query
+    })
+}
+
+/**
+ * 获取近七日每日订单统计
+ * @param query
+ * @returns {*}
+ */
+export function getLast7DaysOrderStatistics(query) {
+    return request({
+        url: '/system/index/getLast7DaysOrderStatistics',
+        method: 'get',
+        params: query
+    })
+}

jd-logistics-ui-v3/src/views/dashboard/LineChart.vue

@@ -1,5 +1,5 @@
 <template>
-  <div ref="chartRef" :class="className" :style="{height:height,width:width}" />
+  <div ref="chartRef" :class="className" :style="{ height: height, width: width }" />
 </template>
 
 <script setup>
@@ -7,26 +7,18 @@ import { ref, onMounted, onBeforeUnmount, watch, nextTick } from 'vue'
 import * as echarts from 'echarts'
 
 const props = defineProps({
-  className: {
-    type: String,
-    default: 'chart'
-  },
-  width: {
-    type: String,
-    default: '100%'
-  },
-  height: {
-    type: String,
-    default: '300px'
-  },
-  autoResize: {
-    type: Boolean,
-    default: true
-  },
-  chartData: {
-    type: Object,
-    required: true
-  }
+  className: { type: String, default: 'chart' },
+  width: { type: String, default: '100%' },
+  height: { type: String, default: '300px' },
+  autoResize: { type: Boolean, default: true },
+  // 三个系列数据
+  jdData: { type: Array, default: () => [] },
+  sfData: { type: Array, default: () => [] },
+  totalData: { type: Array, default: () => [] },
+  // X轴标签
+  xAxisData: { type: Array, default: () => [] },
+  // 可见系列，格式：['jd', 'sf', 'total'] 的子集
+  visibleSeries: { type: Array, default: () => ['jd', 'sf', 'total'] }
 })
 
 const chartRef = ref(null)
@@ -34,190 +26,146 @@ let chartInstance = null
 let resizeObserver = null
 let resizeTimer = null
 
+// 颜色定义（截图风格）
+const colors = {
+  jd: '#FF9800',    // 橙色
+  sf: '#4CAF50',    // 绿色
+  total: '#2196F3'  // 蓝色
+}
+
 onMounted(() => {
   nextTick(() => {
     initChart()
-    if (props.autoResize) {
-      initResizeListener()
-    }
+    if (props.autoResize) initResizeListener()
   })
 })
 
 onBeforeUnmount(() => {
-  // 清理定时器
-  if (resizeTimer) {
-    clearTimeout(resizeTimer)
-    resizeTimer = null
-  }
-
-  // 清理 ResizeObserver
+  if (resizeTimer) clearTimeout(resizeTimer)
   if (resizeObserver && chartRef.value) {
     resizeObserver.unobserve(chartRef.value)
     resizeObserver.disconnect()
-    resizeObserver = null
   }
-
-  // 销毁图表实例
   if (chartInstance) {
     chartInstance.dispose()
     chartInstance = null
   }
 })
 
+// 监听数据变化
 watch(
-    () => props.chartData,
-    (newVal) => {
-      setOptions(newVal)
-    },
+    () => [props.jdData, props.sfData, props.totalData, props.xAxisData, props.visibleSeries],
+    () => setOptions(),
     { deep: true }
 )
 
-// 监听窗口大小变化
 const handleResize = () => {
-  if (resizeTimer) {
-    clearTimeout(resizeTimer)
-  }
-
-  // 使用防抖，避免频繁重绘
+  if (resizeTimer) clearTimeout(resizeTimer)
   resizeTimer = setTimeout(() => {
-    if (chartInstance) {
-      try {
-        chartInstance.resize()
-      } catch (error) {
-        console.error('图表重绘失败:', error)
-      }
-    }
+    if (chartInstance) chartInstance.resize()
   }, 200)
 }
 
-// 初始化 ResizeObserver 监听容器大小变化
 const initResizeListener = () => {
-  // 监听窗口大小变化
   window.addEventListener('resize', handleResize)
-
-  // 如果浏览器支持 ResizeObserver，监听容器自身的大小变化
   if (typeof ResizeObserver !== 'undefined' && chartRef.value) {
-    resizeObserver = new ResizeObserver((entries) => {
-      for (let entry of entries) {
-        if (entry.target === chartRef.value) {
-          handleResize()
-        }
-      }
-    })
+    resizeObserver = new ResizeObserver(handleResize)
     resizeObserver.observe(chartRef.value)
   }
 }
 
 const initChart = () => {
   if (!chartRef.value) return
-
-  // 如果已有实例，先销毁
-  if (chartInstance) {
-    chartInstance.dispose()
-    chartInstance = null
-  }
-
-  try {
-    chartInstance = echarts.init(chartRef.value, 'macarons')
-    setOptions(props.chartData)
-
-    // 添加图表渲染完成后的重绘，确保初始尺寸正确
-    nextTick(() => {
-      if (chartInstance) {
-        chartInstance.resize()
-      }
-    })
-  } catch (error) {
-    console.error('图表初始化失败:', error)
-  }
+  if (chartInstance) chartInstance.dispose()
+  chartInstance = echarts.init(chartRef.value, 'macarons')
+  setOptions()
+  nextTick(() => chartInstance.resize())
 }
 
-const setOptions = ({ expectedData, actualData } = {}) => {
+const setOptions = () => {
   if (!chartInstance) return
 
+  // 构建系列
+  const series = []
+
+  // 京东系列
+  series.push({
+    name: '京东订单',
+    type: 'line',
+    data: props.jdData,
+    smooth: true,
+    show: props.visibleSeries.includes('jd'),
+    lineStyle: { color: colors.jd, width: 2 },
+    itemStyle: { color: colors.jd },
+    areaStyle: null,
+    animationDuration: 2800,
+    animationEasing: 'cubicInOut'
+  })
+
+  // 顺丰系列
+  series.push({
+    name: '顺丰订单',
+    type: 'line',
+    data: props.sfData,
+    smooth: true,
+    show: props.visibleSeries.includes('sf'),
+    lineStyle: { color: colors.sf, width: 2 },
+    itemStyle: { color: colors.sf },
+    areaStyle: null,
+    animationDuration: 2800,
+    animationEasing: 'cubicInOut'
+  })
+
+  // 总订单系列（带面积）
+  series.push({
+    name: '总订单',
+    type: 'line',
+    data: props.totalData,
+    smooth: true,
+    show: props.visibleSeries.includes('total'),
+    lineStyle: { color: colors.total, width: 2 },
+    itemStyle: { color: colors.total },
+    areaStyle: { color: 'rgba(33, 150, 243, 0.1)' }, // 浅蓝色面积
+    animationDuration: 2800,
+    animationEasing: 'cubicInOut'
+  })
+
+  // 配置项
+  const option = {
+    tooltip: {
+      trigger: 'axis',
+      z: 30,
+      show: true,
+      showContent: true
+    },
+    xAxis: {
+      data: props.xAxisData,
+      boundaryGap: false,
+      axisTick: { show: false }
+    },
+    grid: {
+      left: '5%',
+      right: '5%',
+      bottom: '5%',
+      containLabel: true
+    },
+    yAxis: {
+      axisTick: { show: false }
+    },
+    legend: {
+      data: ['京东订单', '顺丰订单', '总订单'],
+      top: '2%',
+      textStyle: { color: '#666' }
+    },
+    series
+  }
+
   try {
-    chartInstance.setOption({
-      tooltip: {
-        trigger: 'axis',
-        z: 30,
-        show: true,
-        showContent: true
-      },
-      xAxis: {
-        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
-        boundaryGap: false,
-        axisTick: {
-          show: false
-        }
-      },
-      grid: {
-        left: "5%",
-        right: "5%",
-        bottom: "5%",
-        containLabel: true
-      },
-      yAxis: {
-        axisTick: {
-          show: false
-        }
-      },
-      legend: {
-        data: ['expected', 'actual'],
-        top: "2%",
-        textStyle: {
-          color: '#666'
-        }
-      },
-      series: [
-        {
-          name: 'expected',
-          itemStyle: {
-            color: '#FF005A'
-          },
-          lineStyle: {
-            color: '#FF005A',
-            width: 2
-          },
-          smooth: true,
-          type: 'line',
-          data: expectedData || [],
-          animationDuration: 2800,
-          animationEasing: 'cubicInOut'
-        },
-        {
-          name: 'actual',
-          smooth: true,
-          type: 'line',
-          itemStyle: {
-            color: '#3888fa'
-          },
-          lineStyle: {
-            color: '#3888fa',
-            width: 2
-          },
-          areaStyle: {
-            color: '#f3f8ff'
-          },
-          data: actualData || [],
-          animationDuration: 2800,
-          animationEasing: 'quadraticOut'
-        }
-      ]
-    })
+    chartInstance.setOption(option)
   } catch (error) {
     console.error('设置图表选项失败:', error)
   }
 }
 
-// 添加一个手动调整大小的方法，可以在父组件中调用
-const resizeChart = () => {
-  if (chartInstance) {
-    chartInstance.resize()
-  }
-}
-
-// 暴露方法给父组件
-defineExpose({
-  resizeChart
-})
+defineExpose({ resizeChart: handleResize })
 </script>

jd-logistics-ui-v3/src/views/dashboard/PanelGroup.vue

@@ -3,53 +3,46 @@
     <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
       <div class="card-panel" @click="handleSetLineChartData('newVisitis')">
         <div class="card-panel-description">
-          <div class="card-panel-text">
-            访客
-          </div>
-          <CountTo :start-val="0" :end-val="102400" :duration="2600" class="card-panel-num" />
+          <div class="card-panel-text">总订单数</div>
+          <CountTo :start-val="0" :end-val="totalOrder" :duration="2600" class="card-panel-num" />
         </div>
         <div class="card-panel-icon-wrapper icon-people">
-          <svg-icon icon-class="peoples" class-name="card-panel-icon" />
+          <el-icon class="card-panel-icon"><DataAnalysis /></el-icon>
         </div>
-
       </div>
     </el-col>
     <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
       <div class="card-panel" @click="handleSetLineChartData('messages')">
         <div class="card-panel-icon-wrapper icon-message">
-          <svg-icon icon-class="message" class-name="card-panel-icon" />
+          <el-icon class="card-panel-icon"><Document /></el-icon>
         </div>
         <div class="card-panel-description">
-          <div class="card-panel-text">
-            消息
-          </div>
-          <CountTo :start-val="0" :end-val="81212" :duration="3000" class="card-panel-num" />
+          <div class="card-panel-text">京东订单数量</div>
+          <CountTo :start-val="0" :end-val="jdOrder" :duration="3000" class="card-panel-num" />
         </div>
       </div>
     </el-col>
     <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
       <div class="card-panel" @click="handleSetLineChartData('purchases')">
         <div class="card-panel-icon-wrapper icon-money">
-          <svg-icon icon-class="money" class-name="card-panel-icon" />
+          <el-icon class="card-panel-icon"><Document /></el-icon>
         </div>
         <div class="card-panel-description">
-          <div class="card-panel-text">
-            金额
-          </div>
-          <CountTo :start-val="0" :end-val="9280" :duration="3200" class="card-panel-num" />
+          <div class="card-panel-text">顺丰订单数量</div>
+          <CountTo :start-val="0" :end-val="sfOrder" :duration="3200" class="card-panel-num" />
         </div>
       </div>
     </el-col>
     <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
       <div class="card-panel" @click="handleSetLineChartData('shoppings')">
         <div class="card-panel-icon-wrapper icon-shopping">
-          <svg-icon icon-class="shopping" class-name="card-panel-icon" />
+
+          <el-icon class="card-panel-icon"><MessageBox /></el-icon>
+<!--          <svg-icon icon-class="shopping" class-name="card-panel-icon" />-->
         </div>
         <div class="card-panel-description">
-          <div class="card-panel-text">
-            订单
-          </div>
-          <CountTo :start-val="0" :end-val="13600" :duration="3600" class="card-panel-num" />
+          <div class="card-panel-text">总费用</div>
+          <CountTo :start-val="0" :end-val="totalAmount" :duration="3600" class="card-panel-num" />
         </div>
       </div>
     </el-col>
@@ -57,11 +50,16 @@
 </template>
 
 <script setup>
+import { CountTo } from 'vue3-count-to'
 
-import { CountTo } from "vue3-count-to";
+defineProps({
+  totalOrder: { type: Number, default: 0 },
+  jdOrder: { type: Number, default: 0 },
+  sfOrder: { type: Number, default: 0 },
+  totalAmount: { type: Number, default: 0 }
+})
 
 const emit = defineEmits(['handleSetLineChartData'])
-
 const handleSetLineChartData = (type) => {
   emit('handleSetLineChartData', type)
 }

jd-logistics-ui-v3/src/views/dashboard/PieChart-one.vue

@@ -1,25 +1,24 @@
 <template>
-  <div ref="chartRef" :class="className" :style="{height:height,width:width}" />
+  <div ref="chartRef" :class="className" :style="{ height: height, width: width }" />
 </template>
 
 <script setup>
-import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue'
+import { ref, onMounted, onBeforeUnmount, watch, nextTick } from 'vue'
 import * as echarts from 'echarts'
 
-const animationDuration = 6000
-
 const props = defineProps({
-  className: {
-    type: String,
-    default: 'chart'
-  },
-  width: {
-    type: String,
-    default: '100%'
-  },
-  height: {
-    type: String,
-    default: '300px'
+  className: { type: String, default: 'chart' },
+  width: { type: String, default: '100%' },
+  height: { type: String, default: '300px' },
+  chartData: {
+    type: Array,
+    default: () => [
+      { value: 1048, name: 'Search Engine' },
+      { value: 735, name: 'Direct' },
+      { value: 580, name: 'Email' },
+      { value: 484, name: 'Union Ads' },
+      { value: 300, name: 'Video Ads' }
+    ]
   }
 })
 
@@ -29,45 +28,23 @@ let resizeObserver = null
 let resizeTimer = null
 
 const handleResize = () => {
-  if (resizeTimer) {
-    clearTimeout(resizeTimer)
-  }
-
+  if (resizeTimer) clearTimeout(resizeTimer)
   resizeTimer = setTimeout(() => {
-    if (chartInstance) {
-      try {
-        chartInstance.resize()
-      } catch (error) {
-        console.error('图表重绘失败:', error)
-      }
-    }
+    if (chartInstance) chartInstance.resize()
   }, 200)
 }
 
 const initResizeListener = () => {
-  // 监听窗口大小变化
   window.addEventListener('resize', handleResize)
-
-  // 使用 ResizeObserver 监听容器自身大小变化
   if (typeof ResizeObserver !== 'undefined' && chartRef.value) {
-    resizeObserver = new ResizeObserver((entries) => {
-      handleResize()
-    })
+    resizeObserver = new ResizeObserver(handleResize)
     resizeObserver.observe(chartRef.value)
   }
 }
 
 const removeResizeListener = () => {
-  // 清理定时器
-  if (resizeTimer) {
-    clearTimeout(resizeTimer)
-    resizeTimer = null
-  }
-
-  // 移除窗口监听
+  if (resizeTimer) clearTimeout(resizeTimer)
   window.removeEventListener('resize', handleResize)
-
-  // 断开 ResizeObserver
   if (resizeObserver) {
     resizeObserver.disconnect()
     resizeObserver = null
@@ -76,61 +53,41 @@ const removeResizeListener = () => {
 
 const initChart = () => {
   if (!chartRef.value) return
-
-  if (chartInstance) {
-    chartInstance.dispose()
-  }
-
+  if (chartInstance) chartInstance.dispose()
   chartInstance = echarts.init(chartRef.value, 'macarons')
+  setOptions(props.chartData)
+  nextTick(() => chartInstance.resize())
+}
 
+const setOptions = (data) => {
+  if (!chartInstance) return
   chartInstance.setOption({
-    tooltip: {
-      trigger: 'item',
-      axisPointer: {
-        type: 'shadow'
-      }
-    },
-    legend: {
-      orient: 'horizontal',
-      left: 'right'
-    },
+    tooltip: { trigger: 'item', axisPointer: { type: 'shadow' } },
+    legend: { orient: 'horizontal', left: 'right' },
     series: [
       {
-        name: 'Access From',
+        name: '订单来源',
         type: 'pie',
         radius: '50%',
-        data: [
-          { value: 1048, name: 'Search Engine' },
-          { value: 735, name: 'Direct' },
-          { value: 580, name: 'Email' },
-          { value: 484, name: 'Union Ads' },
-          { value: 300, name: 'Video Ads' }
-        ],
-        labelLine: {
-          show: false
-        },
-        label:{
-          show:false
-        },
+        data: data,
+        labelLine: { show: false },
+        label: { show: false },
         animationEasing: 'cubicInOut',
         animationDuration: 2600,
         emphasis: {
-          itemStyle: {
-            shadowBlur: 10,
-            shadowOffsetX: 0,
-            shadowColor: 'rgba(0, 0, 0, 0.5)'
-          }
+          itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' }
         }
       }
     ]
   })
-
-  // 图表初始化后立即重绘一次，确保尺寸正确
-  nextTick(() => {
-    chartInstance.resize()
-  })
 }
 
+watch(
+    () => props.chartData,
+    (newVal) => setOptions(newVal),
+    { deep: true }
+)
+
 onMounted(() => {
   nextTick(() => {
     initChart()
@@ -146,8 +103,5 @@ onBeforeUnmount(() => {
   }
 })
 
-// 暴露方法给父组件
-defineExpose({
-  resizeChart: handleResize
-})
+defineExpose({ resizeChart: handleResize })
 </script>

jd-logistics-ui-v3/src/views/index.vue

@@ -1,12 +1,10 @@
 <template>
   <div class="dashboard-editor-container">
-    <!-- 新增Banner区域 - 轮播图 -->
-    <el-row class="banner-section" >
+    <!-- 轮播图区域（保持不变） -->
+    <el-row class="banner-section">
       <el-col :span="24">
         <div class="carousel-container">
-          <!-- 轮播图 -->
           <div class="carousel-wrapper">
-            <!-- 图片列表 -->
             <div
                 class="carousel-slide"
                 :style="{ transform: `translateX(-${currentIndex * 100}%)` }"
@@ -17,54 +15,24 @@
                   class="carousel-item"
                   @click="handleBannerClick(item)"
               >
-                <!-- 背景图片 -->
                 <img
                     :src="item.imageUrl"
                     :alt="item.bannerName"
                     class="carousel-bg-img"
                 />
-                <!-- 遮罩层 -->
                 <div class="carousel-overlay"></div>
-
-                <!-- 内容 -->
-<!--                <div class="carousel-content">-->
-<!--                  <h2 class="carousel-title">{{ item.title }}</h2>-->
-<!--                  <p class="carousel-desc">{{ item.desc }}</p>-->
-<!--                  <el-button-->
-<!--                      type="primary"-->
-<!--                      size="large"-->
-<!--                      class="carousel-button"-->
-<!--                      @click.stop="handleQueryClick(item)"-->
-<!--                  >-->
-<!--                    <span style="font-weight: 500;">立即查询</span>-->
-<!--                    <el-icon style="margin-left: 8px;">-->
-<!--                      <ArrowRight />-->
-<!--                    </el-icon>-->
-<!--                  </el-button>-->
-<!--                </div>-->
-
               </div>
             </div>
 
-            <!-- 导航箭头 -->
             <div class="carousel-nav">
-              <el-button
-                  circle
-                  class="nav-btn prev-btn"
-                  @click="prevSlide"
-              >
+              <el-button circle class="nav-btn prev-btn" @click="prevSlide">
                 <el-icon><ArrowLeft /></el-icon>
               </el-button>
-              <el-button
-                  circle
-                  class="nav-btn next-btn"
-                  @click="nextSlide"
-              >
+              <el-button circle class="nav-btn next-btn" @click="nextSlide">
                 <el-icon><ArrowRight /></el-icon>
               </el-button>
             </div>
 
-            <!-- 指示器 -->
             <div class="carousel-indicators">
               <div
                   v-for="(item, index) in bannerList"
@@ -81,27 +49,33 @@
       </el-col>
     </el-row>
 
-    <panel-group @handle-set-line-chart-data="handleSetLineChartData" />
+    <!-- 顶部卡片区域，传入真实统计数据 -->
+    <panel-group
+        :total-order="totalOrderStat.totalOrderCount"
+        :jd-order="totalOrderStat.jdOrderCount"
+        :sf-order="totalOrderStat.sfOrderCount"
+        :total-amount="totalOrderStat.totalAmount"
+        @handle-set-line-chart-data="handleSetLineChartData"
+    />
 
     <el-row :gutter="32" class="chart-continer">
       <el-col :xs="24" :sm="24" :lg="8" class="chart-section">
         <div class="chart-wrapper">
-          <div class="chart-title">123</div>
-<!--          <raddar-chart />-->
-          <pie-chart-one />
+          <div class="chart-title">订单渠道占比</div>
+          <pie-chart-one :chart-data="pieChartData" />
         </div>
       </el-col>
       <el-col :xs="24" :sm="24" :lg="8" class="chart-section">
         <div class="chart-wrapper">
-          <div class="chart-title">123</div>
-          <pie-chart />
-        </div>
-      </el-col>
-      <el-col :xs="24" :sm="24" :lg="8" class="chart-section">
-        <div class="chart-wrapper">
-          <div class="chart-title">123</div>
-<!--          <bar-chart />-->
-          <line-chart :chart-data="lineChartData"/>
+          <div class="chart-title">近7天订单趋势</div>
+          <!-- 传入三个系列数据、X轴标签和当前可见系列 -->
+          <line-chart
+              :jd-data="jdCounts"
+              :sf-data="sfCounts"
+              :total-data="totalCounts"
+              :x-axis-data="xAxisLabels"
+              :visible-series="visibleSeries"
+          />
         </div>
       </el-col>
     </el-row>
@@ -109,93 +83,70 @@
 </template>
 
 <script setup>
-import { ref, onMounted, onUnmounted } from 'vue'
+import { ref, onMounted, onUnmounted, computed } from 'vue'
 import { ArrowRight, ArrowLeft } from '@element-plus/icons-vue'
 import PanelGroup from './dashboard/PanelGroup.vue'
 import LineChart from './dashboard/LineChart.vue'
-import RaddarChart from './dashboard/RaddarChart.vue'
-import PieChart from './dashboard/PieChart.vue'
-import PieChartOne from "./dashboard/PieChart-one.vue";
-import BarChart from './dashboard/BarChart.vue'
-
-import {listIndexBanner} from "../api/logistics/banner.js";
+import PieChartOne from './dashboard/PieChart-one.vue'
+import { getTotalOrderStatist, getLast7DaysOrderStatistics } from '@/api/logistics/index.js'
+import { listIndexBanner } from '@/api/logistics/banner.js'
 
 // 轮播图数据
-const bannerList = ref([
-  {
-    id: 1,
-    image: 'https://images.unsplash.com/photo-1586528116311-ad8dd3c8310d?ixlib=rb-1.2.1&auto=format&fit=crop&w=1920&q=80',
-    title: '全程货物跟踪',
-    desc: '查询不限口岸，节点提醒、ETA/ETD延误，微信实时推送',
-    link: '/tracking',
-    queryType: 'all'
-  },
-  {
-    id: 2,
-    image: 'https://images.unsplash.com/photo-1562887189-e5d078343de4?ixlib=rb-1.2.1&auto=format&fit=crop&w=1920&q=80',
-    title: '海运货物跟踪',
-    desc: '海运货物实时位置查询，ETA准确率高达99%',
-    link: '/tracking?type=sea',
-    queryType: 'sea'
-  },
-  {
-    id: 3,
-    image: 'https://images.unsplash.com/photo-1518548419970-58e3b4079ab2?ixlib=rb-1.2.1&auto=format&fit=crop&w=1920&q=80',
-    title: '空运货物跟踪',
-    desc: '空运货物快速查询，航班动态实时更新',
-    link: '/tracking?type=air',
-    queryType: 'air'
-  },
-  {
-    id: 4,
-    image: 'https://images.unsplash.com/photo-1542744094-3a31f272c490?ixlib=rb-1.2.1&auto=format&fit=crop&w=1920&q=80',
-    title: '多式联运跟踪',
-    desc: '支持海运、空运、铁路、公路多式联运全程跟踪',
-    link: '/tracking?type=multimodal',
-    queryType: 'multimodal'
-  },
-  {
-    id: 5,
-    image: 'https://images.unsplash.com/photo-1601584115197-04ecc0da31d7?ixlib=rb-1.2.1&auto=format&fit=crop&w=1920&q=80',
-    title: '跨境电商物流',
-    desc: '专为跨境电商打造的物流跟踪解决方案',
-    link: '/tracking?type=ecommerce',
-    queryType: 'ecommerce'
-  }
-])
-
-// 当前轮播索引
+const bannerList = ref([])
 const currentIndex = ref(0)
-// 轮播定时器
 let autoPlayTimer = null
-// 轮播间隔（毫秒）
 const interval = 5000
 
-// 图表数据
-const lineChartDataMap = {
-  newVisitis: {
-    expectedData: [100, 120, 161, 134, 105, 160, 165],
-    actualData: [120, 82, 91, 154, 162, 140, 145]
-  },
-  messages: {
-    expectedData: [200, 192, 120, 144, 160, 130, 140],
-    actualData: [180, 160, 151, 106, 145, 150, 130]
-  },
-  purchases: {
-    expectedData: [80, 100, 121, 104, 105, 90, 100],
-    actualData: [120, 90, 100, 138, 142, 130, 130]
-  },
-  shoppings: {
-    expectedData: [130, 140, 141, 142, 145, 150, 160],
-    actualData: [120, 82, 91, 154, 162, 140, 130]
-  }
-}
+// 统计数据
+const totalOrderStat = ref({
+  totalOrderCount: 0,
+  jdOrderCount: 0,
+  sfOrderCount: 0,
+  totalAmount: 0
+})
+const last7DaysOrders = ref([])
+
+// 计算属性：X轴标签（MM-DD）
+const xAxisLabels = computed(() => {
+  return last7DaysOrders.value.map(item => {
+    const date = new Date(item.statisticsDate)
+    const month = (date.getMonth() + 1).toString().padStart(2, '0')
+    const day = date.getDate().toString().padStart(2, '0')
+    return `${month}-${day}`
+  })
+})
 
-const lineChartData = ref(lineChartDataMap.newVisitis)
+// 各系列数据
+const jdCounts = computed(() => last7DaysOrders.value.map(item => item.jdOrderCount))
+const sfCounts = computed(() => last7DaysOrders.value.map(item => item.sfOrderCount))
+const totalCounts = computed(() => last7DaysOrders.value.map(item => item.totalOrderCount))
 
+// 饼图数据
+const pieChartData = computed(() => [
+  { value: totalOrderStat.value.jdOrderCount, name: '京东订单' },
+  { value: totalOrderStat.value.sfOrderCount, name: '顺丰订单' }
+])
+
+// 控制折线图显示哪些系列（默认全部显示）
+const visibleSeries = ref(['jd', 'sf', 'total'])
+
+// 卡片点击切换系列显示
 const handleSetLineChartData = (type) => {
-  if (lineChartDataMap[type]) {
-    lineChartData.value = lineChartDataMap[type]
+  switch (type) {
+    case 'newVisitis': // 总订单数卡片 -> 只显示总订单
+      visibleSeries.value = ['total']
+      break
+    case 'messages': // 京东订单卡片 -> 只显示京东
+      visibleSeries.value = ['jd']
+      break
+    case 'purchases': // 顺丰订单卡片 -> 只显示顺丰
+      visibleSeries.value = ['sf']
+      break
+    case 'shoppings': // 总费用卡片（暂无每日费用，显示总订单趋势）
+      visibleSeries.value = ['total']
+      break
+    default:
+      visibleSeries.value = ['jd', 'sf', 'total']
   }
 }
 
@@ -204,59 +155,59 @@ const nextSlide = () => {
   currentIndex.value = (currentIndex.value + 1) % bannerList.value.length
   resetAutoPlay()
 }
-
 const prevSlide = () => {
   currentIndex.value = (currentIndex.value - 1 + bannerList.value.length) % bannerList.value.length
   resetAutoPlay()
 }
-
 const goToSlide = (index) => {
   currentIndex.value = index
   resetAutoPlay()
 }
-
 const startAutoPlay = () => {
   stopAutoPlay()
   autoPlayTimer = setInterval(nextSlide, interval)
 }
-
 const stopAutoPlay = () => {
   if (autoPlayTimer) {
     clearInterval(autoPlayTimer)
     autoPlayTimer = null
   }
 }
-
 const resetAutoPlay = () => {
   stopAutoPlay()
   startAutoPlay()
 }
 
-// 点击事件
 const handleBannerClick = (item) => {
-  console.log('Banner clicked:', item)
-  if(item.linkUrl && item.linkUrl.startsWith('http')){
+  if (item.linkUrl && item.linkUrl.startsWith('http')) {
     window.open(item.linkUrl, '_blank')
   }
 }
 
-const handleQueryClick = (item) => {
-  console.log('Query button clicked:', item)
-  // 这里可以触发查询事件
-  // 例如：emit('query', item.queryType)
-}
-
-const getBannerList = () =>{
-  // const params = {sysType:0,delFlag:0 } //系统类型（0PC管理、1小程） 删除标志（0代表存在 2代表删除
+// API 调用
+const getBannerList = () => {
   listIndexBanner().then(response => {
     bannerList.value = response.data
     startAutoPlay()
   })
 }
 
-// 生命周期
+const queryStatist = () => {
+  getTotalOrderStatist().then(response => {
+    totalOrderStat.value = response
+  })
+}
+
+const queryLast7DayStatist = () => {
+  getLast7DaysOrderStatistics().then(response => {
+    last7DaysOrders.value = response
+  })
+}
+
 onMounted(() => {
   getBannerList()
+  queryStatist()
+  queryLast7DayStatist()
 })
 
 onUnmounted(() => {