diff --git a/src/views/analysis/orderAnalysis/index.vue b/src/views/analysis/orderAnalysis/index.vue
new file mode 100644
index 0000000..252ac4c
--- /dev/null
+++ b/src/views/analysis/orderAnalysis/index.vue
@@ -0,0 +1,1192 @@
+<template>
+  <div class="order-analysis-container">
+    <div class="main-content">
+      <div class="content-box">
+        <div class="content-section">
+          <h1 class="page-title">订单分析统计</h1>
+
+          <!-- 数据概览卡片 -->
+          <div class="card-grid">
+            <!-- 总订单量卡片 -->
+            <div class="stat-card blue-card">
+              <div class="card-header">
+                <span class="card-label">总订单量</span>
+                <div class="card-icon">
+                  <svg-icon icon-class="shopping" class="text-blue-600" />
+                </div>
+              </div>
+              <div class="card-value">{{ summaryData.totalOrderCount }}</div>
+            </div>
+
+            <!-- 订单总金额卡片 -->
+            <div class="stat-card green-card">
+              <div class="card-header">
+                <span class="card-label">订单总金额</span>
+                <div class="card-icon">
+                  <svg-icon icon-class="money" class="text-green-600" />
+                </div>
+              </div>
+              <div class="card-value">¥{{ summaryData.totalOrderAmount }}</div>
+            </div>
+
+            <!-- 进行中订单卡片 -->
+            <div class="stat-card orange-card">
+              <div class="card-header">
+                <span class="card-label">进行中订单</span>
+                <div class="card-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 512 512"><path d="M304 48a48 48 0 1 0 -96 0 48 48 0 1 0 96 0zm0 416a48 48 0 1 0 -96 0 48 48 0 1 0 96 0zM48 304a48 48 0 1 0 0-96 48 48 0 1 0 0 96zm464-48a48 48 0 1 0 -96 0 48 48 0 1 0 96 0zM142.9 437A48 48 0 1 0 75 369.1 48 48 0 1 0 142.9 437zm0-294.2A48 48 0 1 0 75 75a48 48 0 1 0 67.9 67.9zM369.1 437A48 48 0 1 0 437 369.1 48 48 0 1 0 369.1 437z"/></svg>
+                </div>
+              </div>
+              <div class="card-value">{{ summaryData.inProgressOrderCount }}</div>
+            </div>
+
+            <!-- 完成订单卡片 -->
+            <div class="stat-card purple-card">
+              <div class="card-header">
+                <span class="card-label">订单完成率</span>
+                <div class="card-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 512 512"><path d="M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-111 111-47-47c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9l64 64c9.4 9.4 24.6 9.4 33.9 0L369 209z"/></svg>
+                </div>
+              </div>
+              <div class="card-value">{{ (summaryData.completionRate || 0).toFixed(1) }}%</div>
+            </div>
+          </div>
+
+          <!-- 筛选条件区域 -->
+          <div class="filter-section">
+            <div class="filter-group">
+              <div class="filter-item">
+                <span class="filter-label">时间维度：</span>
+                <div class="time-range-buttons">
+                  <button 
+                    v-for="range in timeRanges" 
+                    :key="range.value"
+                    :class="['time-button', { active: filter.timeRange === range.value }]"
+                    @click="changeTimeRange(range.value)"
+                  >
+                    {{ range.label }}
+                  </button>
+                </div>
+              </div>
+              
+              <div class="filter-item">
+                <span class="filter-label">统计日期：</span>
+                <div class="date-range-picker">
+                  <!-- 开始日期选择器 -->
+                  <el-date-picker
+                    v-model="dateRange[0]"
+                    :type="datePickerType"
+                    :placeholder="startPlaceholder"
+                    :format="dateFormat"
+                    :value-format="dateValueFormat"
+                    @change="handleStartDateChange"
+                    class="single-date-picker"
+                    :picker-options="startPickerOptions"
+                  />
+                  <span class="separator">-</span>
+                  <!-- 结束日期选择器 -->
+                  <el-date-picker
+                    v-model="dateRange[1]"
+                    :type="datePickerType"
+                    :placeholder="endPlaceholder"
+                    :format="dateFormat"
+                    :value-format="dateValueFormat"
+                    @change="handleEndDateChange"
+                    class="single-date-picker"
+                    :picker-options="endPickerOptions"
+                  />
+                </div>
+              </div>
+            </div>
+            <div class="action-buttons">
+              <el-button
+                type="primary"
+                :loading="loading"
+                @click="refreshData"
+              >
+                <template #icon>
+                  <svg-icon icon-class="refresh-line" />
+                </template>
+                刷新
+              </el-button>
+            </div>
+          </div>
+
+          <!-- 图表区域 -->
+          <div class="chart-section">
+            <!-- 订单趋势图 -->
+            <div class="chart-box">
+              <h3 class="chart-title">订单趋势</h3>
+              <div class="chart-wrapper" ref="trendChartContainer"></div>
+            </div>
+          </div>
+
+          <!-- 两个并排图表区域 -->
+          <div class="double-chart-section">
+            <!-- 无人机型号分布图 -->
+            <div class="chart-box">
+              <h3 class="chart-title">无人机型号分布</h3>
+              <div class="chart-wrapper" ref="modelChartContainer"></div>
+            </div>
+
+            <!-- 路线分布图 -->
+            <div class="chart-box">
+              <h3 class="chart-title">区域订单量Top10</h3>
+              <div class="chart-wrapper" ref="routeChartContainer"></div>
+            </div>
+          </div>
+
+          <!-- 订单数据详情区域 -->
+          <div class="data-table-section">
+            <h3 class="table-title">订单数据详情</h3>
+            <div class="table-wrapper">
+              <el-table
+                :data="orderList"
+                style="width: 100%"
+                v-loading="tableLoading"
+                stripe
+                border
+                @sort-change="handleSortChange"
+              >
+                <el-table-column 
+                  prop="orderNo" 
+                  label="订单编号" 
+                  width="180"
+                  sortable
+                />
+                <el-table-column 
+                  prop="orderInitiatorId" 
+                  label="客户ID" 
+                  width="150"
+                />
+                <el-table-column 
+                  prop="attractionId" 
+                  label="景点ID" 
+                  width="120"
+                />
+                <el-table-column 
+                  prop="amount" 
+                  label="金额(元)" 
+                  width="120"
+                  sortable
+                  align="right"
+                />
+                <el-table-column 
+                  prop="mainOrderStatus" 
+                  label="状态" 
+                  width="120"
+                  :filters="statusFilters"
+                  :filter-method="filterStatus"
+                >
+                  <template slot-scope="{ row }">
+                    <el-tag :type="getStatusTagType(row.mainOrderStatus)">
+                      {{ getStatusText(row.mainOrderStatus) }}
+                    </el-tag>
+                  </template>
+                </el-table-column>
+                <el-table-column 
+                  prop="orderCreateTime" 
+                  label="下单时间" 
+                  width="180"
+                  sortable
+                />
+                <el-table-column 
+                  prop="orderFinishTime" 
+                  label="完成时间" 
+                  width="180"
+                />
+                <el-table-column 
+                  label="操作" 
+                  width="120"
+                  fixed="right"
+                >
+                  <template slot-scope="{ row }">
+                    <el-button 
+                      size="small" 
+                      @click="handleViewDetail(row)"
+                    >
+                      详情
+                    </el-button>
+                  </template>
+                </el-table-column>
+              </el-table>
+              <div class="pagination-wrapper">
+                <div class="pagination-info">
+                  显示第 {{ (pagination.currentPage - 1) * pagination.pageSize + 1 }} 至 
+                  {{ Math.min(pagination.currentPage * pagination.pageSize, pagination.total) }} 条，
+                  共 {{ pagination.total }} 条记录
+                </div>
+                
+                <div class="pagination-jump">
+                  <span class="jump-text">跳至</span>
+                  <el-input
+                    v-model.number="jumpPage"
+                    type="number"
+                    :min="1"
+                    :max="Math.ceil(pagination.total / pagination.pageSize)"
+                    @keyup.enter="handleJump"
+                    class="jump-input"
+                  />
+                  <span class="jump-text">页</span>
+                  <el-button 
+                    type="primary" 
+                    @click="handleJump"
+                    class="jump-button"
+                  >
+                    确定
+                  </el-button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+import {
+  getDailyOrderAnalysis,
+  getMonthlyOrderAnalysis,
+  getYearlyOrderAnalysis
+} from '@/api/analysis/orderAnalysis';
+
+export default {
+  name: 'orderAnalysis',
+  data() {
+    return {
+      jumpPage: 1,
+      loading: false,
+      tableLoading: false,
+      startPickerOptions: {
+        disabledDate: time => {
+          return this.dateRange[1] && time.getTime() > new Date(this.dateRange[1]).getTime();
+        }
+      },
+      endPickerOptions: {
+        disabledDate: time => {
+          return this.dateRange[0] && time.getTime() < new Date(this.dateRange[0]).getTime();
+        }
+      },
+      filter: {
+        timeRange: 'month',
+        startDate: '',
+        endDate: '',
+        sortField: '',
+        sortOrder: ''
+      },
+      timeRanges: [
+        { label: '日', value: 'day' },
+        { label: '月', value: 'month' },
+        { label: '年', value: 'year' }
+      ],
+      dateRange: [],
+      summaryData: {
+        totalOrderCount: 0,
+        totalOrderAmount: 0,
+        completedOrderCount: 0,
+        inProgressOrderCount: 0,
+        cancelOrderCount: 0,
+        noStartOrderCount: 0,
+        completionRate: 0
+      },
+      orderList: [],
+      statusFilters: [
+        { text: '未开始', value: 0 },
+        { text: '进行中', value: 1 },
+        { text: '已完成', value: 2 },
+        { text: '已取消', value: 3 }
+      ],
+      pagination: {
+        currentPage: 1,
+        pageSize: 10,
+        total: 0
+      },
+      trendChart: null,
+      modelChart: null,
+      routeChart: null
+    };
+  },
+  computed: {
+    datePickerType() {
+      return this.filter.timeRange === 'year' ? 'year' : 
+             this.filter.timeRange === 'month' ? 'month' : 'date';
+    },
+    dateFormat() {
+      return this.filter.timeRange === 'year' ? 'yyyy年' : 
+             this.filter.timeRange === 'month' ? 'yyyy年MM月' : 'yyyy年MM月dd日';
+    },
+    dateValueFormat() {
+      return this.filter.timeRange === 'year' ? 'yyyy' : 
+             this.filter.timeRange === 'month' ? 'yyyy-MM' : 'yyyy-MM-dd';
+    },
+    startPlaceholder() {
+      return this.filter.timeRange === 'year' ? '开始年份' : 
+             this.filter.timeRange === 'month' ? '开始月份' : '开始日期';
+    },
+    endPlaceholder() {
+      return this.filter.timeRange === 'year' ? '结束年份' : 
+             this.filter.timeRange === 'month' ? '结束月份' : '结束日期';
+    }
+  },
+  mounted() {
+    this.initCharts();
+    this.initDefaultDateRange();
+    this.fetchData();
+    window.addEventListener('resize', this.handleResize);
+  },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.handleResize);
+    if (this.trendChart) this.trendChart.dispose();
+    if (this.modelChart) this.modelChart.dispose();
+    if (this.routeChart) this.routeChart.dispose();
+  },
+  methods: {
+    initCharts() {
+      this.$nextTick(() => {
+        if (this.$refs.trendChartContainer) {
+          this.trendChart = echarts.init(this.$refs.trendChartContainer);
+        }
+        if (this.$refs.modelChartContainer) {
+          this.modelChart = echarts.init(this.$refs.modelChartContainer);
+        }
+        if (this.$refs.routeChartContainer) {
+          this.routeChart = echarts.init(this.$refs.routeChartContainer);
+        }
+        this.setEmptyChartOptions();
+      });
+    },
+    
+    setEmptyChartOptions() {
+      const emptyOption = {
+        title: {
+          text: '加载数据中...',
+          left: 'center',
+          top: 'center',
+          textStyle: {
+            color: '#999',
+            fontWeight: 'normal',
+            fontSize: 14
+          }
+        },
+        xAxis: { show: false },
+        yAxis: { show: false },
+        series: []
+      };
+      
+      if (this.trendChart) this.trendChart.setOption(emptyOption);
+      if (this.modelChart) this.modelChart.setOption(emptyOption);
+      if (this.routeChart) this.routeChart.setOption(emptyOption);
+    },
+    
+    initDefaultDateRange() {
+      const now = new Date();
+      const year = now.getFullYear();
+      const month = (now.getMonth() + 1).toString().padStart(2, '0');
+      
+      switch (this.filter.timeRange) {
+        case 'year':
+          this.dateRange = [`${year - 2}-01-01`, `${year}-12-31`];
+          break;
+        case 'month':
+          const endMonth = `${year}-${month}`;
+          const startDate = new Date(year, now.getMonth() - 5, 1);
+          const startMonth = `${startDate.getFullYear()}-${(startDate.getMonth() + 1).toString().padStart(2, '0')}`;
+          this.dateRange = [startMonth, endMonth];
+          break;
+        default:
+          const endDay = now.toISOString().split('T')[0];
+          const startDay = new Date();
+          startDay.setDate(now.getDate() - 6);
+          this.dateRange = [startDay.toISOString().split('T')[0], endDay];
+      }
+      
+      this.filter.startDate = this.formatDateForApi(this.dateRange[0], this.filter.timeRange);
+      this.filter.endDate = this.formatDateForApi(this.dateRange[1], this.filter.timeRange);
+    },
+    
+    formatDateForApi(date, type) {
+      if (!date) return '';
+      
+      if (type === 'year') {
+        return new Date(date).getFullYear().toString();
+      }
+      
+      if (type === 'month') {
+        const dateObj = new Date(date);
+        const year = dateObj.getFullYear();
+        const month = (dateObj.getMonth() + 1).toString().padStart(2, '0');
+        return `${year}-${month}`;
+      }
+      
+      return date;
+    },
+    
+    handleStartDateChange(val) {
+      if (!val) return;
+      
+      // 日期有效性校验
+      if (this.dateRange[1] && new Date(val) > new Date(this.dateRange[1])) {
+        this.$message.warning('开始日期不能晚于结束日期');
+        return;
+      }
+
+      this.dateRange = [val, this.dateRange[1] || val];
+      this.filter.startDate = this.formatDateForApi(val, this.filter.timeRange);
+      this.filter.endDate = this.formatDateForApi(this.dateRange[1], this.filter.timeRange);
+      
+      this.refreshData();
+    },
+    
+    handleEndDateChange(val) {
+      if (!val) return;
+      
+      // 日期有效性校验
+      if (this.dateRange[0] && new Date(val) < new Date(this.dateRange[0])) {
+        this.$message.warning('结束日期不能早于开始日期');
+        return;
+      }
+
+      this.dateRange = [this.dateRange[0] || val, val];
+      this.filter.startDate = this.formatDateForApi(this.dateRange[0], this.filter.timeRange);
+      this.filter.endDate = this.formatDateForApi(val, this.filter.timeRange);
+      
+      this.refreshData();
+    },
+    
+    changeTimeRange(range) {
+      this.filter.timeRange = range;
+      this.initDefaultDateRange();
+      this.refreshData();
+    },
+    
+    async fetchData() {
+      this.loading = true;
+      this.tableLoading = true;
+      try {
+        let response;
+        const params = {
+          startDate: this.filter.startDate,
+          endDate: this.filter.endDate,
+          pageNum: this.pagination.currentPage,
+          pageSize: this.pagination.pageSize,
+          sortField: this.filter.sortField,
+          sortOrder: this.filter.sortOrder
+        };
+        
+        console.log('请求参数:', params);
+        console.log('正在请求接口:', this.filter.timeRange); // 调试
+        switch (this.filter.timeRange) {
+          case 'day':
+            response = await getDailyOrderAnalysis(params);
+            break;
+          case 'month':
+            response = await getMonthlyOrderAnalysis(params);
+            break;
+          case 'year':
+            response = await getYearlyOrderAnalysis(params);
+            break;
+          default:
+            response = await getMonthlyOrderAnalysis(params);
+        }
+        
+        console.log('接口响应数据:', response);
+        this.summaryData.totalOrderAmount = response.totalOrderAmount;
+        this.summaryData.totalOrderCount = response.totalOrderCount;
+        this.processResponseData(response.data);
+      } catch (error) {
+        console.error('获取订单分析数据失败:', error);
+        this.$message.error('获取数据失败，请重试');
+        this.setEmptyDataState();
+      } finally {
+        this.loading = false;
+        this.tableLoading = false;
+      }
+    },
+    
+    processResponseData(data) {
+      this.jumpPage = this.pagination.currentPage;
+
+     // 1. 首先检查 data 是否存在
+  if (!data) {
+    console.error('响应数据为空，将设置为空状态');
+    this.setEmptyDataState(); // 调用空数据状态方法
+    return; // 提前返回
+  }
+
+  // 2. 安全设置 summaryData（使用 || 替代 || 以区分 0 和 undefined）
+  this.summaryData = {
+    totalOrderCount: data.totalOrderCount || 0,
+    totalOrderAmount: data.totalOrderAmount || 0,
+    completedOrderCount: data.completedOrderCount || 0,
+    inProgressOrderCount: data.inProgressOrderCount || 0,
+    cancelOrderCount: data.cancelOrderCount || 0,
+    noStartOrderCount: data.noStartOrderCount || 0,
+    completionRate: data.completionRate || 0,
+     droneModelDistribution: data.droneModelDistribution || 0 
+  };
+  
+      
+      // 2. 设置orderList - 确保金额格式化为两位小数
+  this.orderList = (data.orderList || []).map(item => ({
+    ...item,
+    amount: item.amount ? Number(item.amount).toFixed(2) : '0.00'
+  }));
+
+  // 3. 设置分页数据
+  if (data.pageInfo) {
+    this.pagination.total = data.pageInfo.total || 0;
+    this.pagination.currentPage = data.pageInfo.pageNum || 1;
+    this.pagination.pageSize = data.pageInfo.pageSize || 10;
+  } else {
+    this.pagination.total = this.orderList.length;
+    this.pagination.currentPage = 1;
+  }
+
+  // 5. 更新图表（传入 data 本身，方法内部已处理空值）
+  this.updateCharts({
+    // 确保所有图表需要的数据字段都有默认值
+    timeSeriesData: data.timeSeriesData || [],
+    droneModelDistribution: data.droneModelDistribution || data.dromeModelDistribution || {},
+    routeDistribution: data.routeDistribution || []
+  });
+},
+    
+    setEmptyDataState() {
+      this.summaryData = {
+        totalOrderCount: 0,
+        totalOrderAmount: 0,
+        completedOrderCount: 0,
+        inProgressOrderCount: 0,
+        cancelOrderCount: 0,
+        noStartOrderCount: 0,
+        completionRate: 0
+      };
+      
+      this.orderList = [];
+      this.pagination.total = 0;
+      
+      this.setEmptyChartOptions();
+    },
+    
+    updateCharts(data) {
+      this.updateTrendChart(data.timeSeriesData || []);
+      this.updateModelChart(data.droneModelDistribution || {});
+      this.updateRouteChart(data.routeDistribution || []);
+    },
+    
+    updateTrendChart(timeSeriesData) {
+      if (!this.trendChart || !timeSeriesData) return;
+      
+      let xAxisData = [];
+      let seriesData = [];
+      
+      if (Array.isArray(timeSeriesData)) {
+        switch (this.filter.timeRange) {
+          case 'day':
+            xAxisData = timeSeriesData.map(item => item.date || '');
+            seriesData = timeSeriesData.map(item => item.dailyTotalCount || 0);
+            break;
+          case 'month':
+            xAxisData = timeSeriesData.map(item => item.month || '');
+            seriesData = timeSeriesData.map(item => item.monthlyTotalCount || 0);
+            break;
+          case 'year':
+            xAxisData = timeSeriesData.map(item => item.year || '');
+            seriesData = timeSeriesData.map(item => item.yearlyTotalCount || 0);
+            break;
+        }
+      }
+      
+      const option = {
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: { type: 'shadow' },
+          formatter: params => {
+            const value = params[0].value;
+            const axisValue = params[0].axisValue;
+            return `${axisValue}<br/>订单数量: ${value}`;
+          }
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          data: xAxisData,
+          axisLabel: { 
+            rotate: xAxisData.length > 10 ? 45 : 0,
+            formatter: value => {
+              switch (this.filter.timeRange) {
+                case 'day': return value.split('-').slice(1).join('-');
+                case 'month': return value.split('-')[1];
+                case 'year': return value;
+                default: return value;
+              }
+            }
+          }
+        },
+        yAxis: { type: 'value', minInterval: 1 },
+        series: [{
+          name: '订单数量',
+          data: seriesData,
+          type: 'line',
+          smooth: true,
+          areaStyle: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              { offset: 0, color: 'rgba(58, 77, 233, 0.8)' },
+              { offset: 1, color: 'rgba(58, 77, 233, 0.1)' }
+            ])
+          },
+          itemStyle: { color: '#3a4de9' }
+        }]
+      };
+      
+      this.trendChart.setOption(option, true);
+    },
+    
+    updateModelChart(modelDistribution) {
+      if (!this.modelChart) return;
+      
+      const seriesData = Object.entries(modelDistribution)
+        .filter(([_, count]) => count > 0)
+        .map(([model, count]) => ({ value: count, name: model }))
+        .sort((a, b) => b.value - a.value);
+      
+      if (seriesData.length === 0) {
+        this.modelChart.setOption({
+          title: { text: '暂无数据', left: 'center', top: 'center' }
+        });
+        return;
+      }
+      
+      this.modelChart.setOption({
+        tooltip: { 
+          trigger: 'item', 
+          formatter: '{a} <br/>{b}: {c} ({d}%)' 
+        },
+        legend: { 
+          orient: 'vertical', 
+          right: 10, 
+          top: 'center' 
+        },
+        series: [{
+          name: '无人机型号分布',
+          type: 'pie',
+          radius: ['40%', '70%'],
+          avoidLabelOverlap: false,
+          itemStyle: {
+            borderRadius: 10,
+            borderColor: '#fff',
+            borderWidth: 2
+          },
+          label: {
+            show: true,
+            formatter: '{b}: {c} ({d}%)'
+          },
+          emphasis: {
+            label: {
+              show: true,
+              fontSize: '18',
+              fontWeight: 'bold'
+            }
+          },
+          labelLine: {
+            show: true
+          },
+          data: seriesData
+        }]
+      }, true);
+    },
+    
+    updateRouteChart(routeDistribution) {
+  if (!this.routeChart) return;
+  
+  // 过滤掉数量为0的路线
+  const topRoutes = (routeDistribution || [])
+    .filter(item => item.count > 0)
+    .sort((a, b) => b.count - a.count)
+    .slice(0, 10);
+  
+  if (topRoutes.length === 0) {
+    this.routeChart.setOption({
+      title: { 
+        text: '暂无数据', 
+        left: 'center', 
+        top: 'center' 
+      }
+    });
+    return;
+  }
+  
+  this.routeChart.setOption({
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: { type: 'shadow' },
+      formatter: params => {
+        const route = topRoutes[params[0].dataIndex];
+        return `路线: ${route.routeName || '未知路线'}<br>景区: ${route.scenicName || '未知景区'}<br>订单量: ${params[0].data}`;
+      }
+    },
+    grid: {
+      left: '3%',
+      right: '4%',
+      bottom: '3%',
+      containLabel: true
+    },
+    xAxis: {
+      type: 'value',
+      boundaryGap: [0, 0.01],
+      minInterval: 1 // 确保显示整数
+    },
+    yAxis: {
+      type: 'category',
+      data: topRoutes.map(item => item.routeName || `路线 ${item.routeId}`),
+      axisLabel: {
+        formatter: value => value.length > 6 ? value.substring(0, 6) + '...' : value
+      }
+    },
+    series: [{
+      name: '订单量',
+      type: 'bar',
+      data: topRoutes.map(item => item.count),
+      itemStyle: {
+        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+          { offset: 0, color: '#83bff6' },
+          { offset: 0.5, color: '#188df0' },
+          { offset: 1, color: '#0052d9' }
+        ]),
+        borderRadius: [0, 5, 5, 0]
+      },
+      label: {
+        show: true,
+        position: 'right',
+        formatter: '{c}'
+      }
+    }]
+  }, true);
+},
+    
+    handleJump() {
+      const page = parseInt(this.jumpPage);
+      const maxPage = Math.ceil(this.pagination.total / this.pagination.pageSize);
+      
+      if (page >= 1 && page <= maxPage) {
+        this.pagination.currentPage = page;
+        this.fetchData();
+      } else {
+        this.$message.warning(`请输入1-${maxPage}之间的页码`);
+        this.jumpPage = this.pagination.currentPage;
+      }
+    },
+    
+    refreshData() {
+      this.pagination.currentPage = 1;
+      this.fetchData();
+    },
+    
+    handleSortChange({ prop, order }) {
+      this.filter.sortField = prop;
+      this.filter.sortOrder = order === 'ascending' ? 'asc' : 'desc';
+      this.refreshData();
+    },
+    
+    filterStatus(value, row) {
+      return row.mainOrderStatus === value;
+    },
+    
+    getStatusTagType(status) {
+      switch (status) {
+        case 0: return 'info';    // 未开始
+        case 1: return 'warning'; // 进行中
+        case 2: return 'success'; // 已完成
+        case 3: return 'danger';  // 已取消
+        default: return '';
+      }
+    },
+    
+    getStatusText(status) {
+      switch (status) {
+        case 0: return '未开始';
+        case 1: return '进行中';
+        case 2: return '已完成';
+        case 3: return '已取消';
+        default: return '未知状态';
+      }
+    },
+    
+    handleViewDetail(row) {
+      this.$router.push({
+        path: '/order/detail',
+        query: { id: row.id }
+      });
+    },
+    
+    handleResize() {
+      if (this.trendChart) this.trendChart.resize();
+      if (this.modelChart) this.modelChart.resize();
+      if (this.routeChart) this.routeChart.resize();
+    }
+  }
+};
+</script>
+
+<style scoped>
+/* 保持原有的样式不变 */
+.order-analysis-container {
+  min-height: 100vh;
+  background-color: #f5f7fa;
+  font-family: 'Arial', sans-serif;
+}
+
+.main-content {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 20px;
+}
+
+.content-box {
+  background-color: white;
+  border-radius: 8px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
+  padding: 24px;
+}
+
+.page-title {
+  font-size: 24px;
+  font-weight: 600;
+  color: #333;
+  margin-bottom: 24px;
+  display: flex;
+  align-items: center;
+}
+
+.card-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 10px;
+  margin-bottom: 16px;
+}
+
+.stat-card {
+  padding: 16px;
+  min-height: 70px;
+  border-radius: 8px;
+  transition: transform 0.2s;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.stat-card:hover {
+  transform: translateY(-5px);
+}
+
+.blue-card {
+  background: linear-gradient(to bottom right, #ebf4ff, white);
+}
+
+.green-card {
+  background: linear-gradient(to bottom right, #ecfdf5, white);
+}
+
+.purple-card {
+  background: linear-gradient(to bottom right, #e5e2f4, white);
+}
+
+.orange-card {
+  background: linear-gradient(to bottom right, #f7f5e7, white);
+}
+
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 14px;
+}
+
+.card-label {
+  font-size: 18px;
+  font-weight: 700;
+}
+
+.card-icon {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: inherit;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+}
+
+.card-value {
+  font-size: 28px;
+  font-weight: 700;
+  margin-bottom: 12px;
+}
+
+.filter-section {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 24px;
+  padding: 16px;
+  background-color: #f9fafb;
+  border-radius: 8px;
+  flex-wrap: wrap;
+}
+
+.filter-group {
+  display: flex;
+  gap: 24px;
+  flex-wrap: wrap;
+}
+
+.filter-item {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.filter-label {
+  font-size: 14px;
+  color: #666;
+  margin-right: 12px;
+  white-space: nowrap;
+}
+
+.time-range-buttons {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.time-button {
+  padding: 8px 16px;
+  border-radius: 4px;
+  border: 1px solid #dcdfe6;
+  background: #f5f7fa;
+  cursor: pointer;
+  transition: all 0.3s;
+  font-size: 14px;
+  white-space: nowrap;
+}
+
+.time-button.active {
+  background: #409eff;
+  color: white;
+  border-color: #409eff;
+}
+
+.date-range-picker {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.separator {
+  color: #606266;
+  padding: 0 5px;
+}
+
+.action-buttons {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.chart-section {
+  margin-bottom: 32px;
+}
+
+.double-chart-section {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 20px;
+  margin-bottom: 32px;
+}
+
+.chart-box {
+  background-color: white;
+  border-radius: 8px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
+  padding: 20px;
+}
+
+.chart-title {
+  font-size: 18px;
+  font-weight: 500;
+  color: #333;
+  margin-bottom: 16px;
+  display: flex;
+  align-items: center;
+}
+
+.chart-title::before {
+  content: '';
+  display: inline-block;
+  width: 4px;
+  height: 16px;
+  background-color: #3a4de9;
+  margin-right: 8px;
+  border-radius: 2px;
+}
+
+.chart-wrapper {
+  width: 100%;
+  height: 400px;
+}
+
+.data-table-section {
+  background-color: white;
+  border-radius: 8px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
+  padding: 20px;
+}
+
+.table-title {
+  font-size: 18px;
+  font-weight: 500;
+  color: #333;
+  margin-bottom: 16px;
+  display: flex;
+  align-items: center;
+}
+
+.table-title::before {
+  content: '';
+  display: inline-block;
+  width: 4px;
+  height: 16px;
+  background-color: #3a4de9;
+  margin-right: 8px;
+  border-radius: 2px;
+}
+
+.table-wrapper {
+  overflow-x: auto;
+}
+
+.pagination-wrapper {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 20px;
+  padding: 10px 0;
+  border-top: 1px solid #ebeef5;
+}
+
+.pagination-info {
+  font-size: 12px;
+  color: #606266;
+}
+
+.pagination-jump {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.jump-text {
+  font-size: 14px;
+  color: #606266;
+}
+
+.jump-input {
+  width: 60px;
+}
+
+.jump-input .el-input__inner {
+  text-align: center;
+  padding: 0 5px;
+}
+
+.jump-button {
+  padding: 8px 15px;
+}
+
+@media (max-width: 1200px) {
+  .card-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  
+  .double-chart-section {
+    grid-template-columns: 1fr;
+  }
+  
+  .date-range-picker {
+    width: 280px;
+  }
+}
+
+@media (max-width: 768px) {
+  .card-grid {
+    grid-template-columns: 1fr;
+  }
+  
+  .filter-section {
+    flex-direction: column;
+    gap: 16px;
+  }
+  
+  .filter-group {
+    flex-direction: column;
+    width: 100%;
+    gap: 12px;
+  }
+  
+  .filter-item {
+    flex-direction: column;
+    align-items: flex-start;
+    width: 100%;
+    gap: 8px;
+  }
+  
+  .date-range-picker {
+    width: 100%;
+  }
+  
+  .time-range-buttons {
+    width: 100%;
+  }
+  
+  .action-buttons {
+    width: 100%;
+    justify-content: flex-end;
+  }
+}
+
+@media (max-width: 480px) {
+  .main-content {
+    padding: 10px;
+  }
+  
+  .content-box {
+    padding: 16px;
+  }
+  
+  .card-grid {
+    gap: 12px;
+  }
+  
+  .chart-wrapper {
+    height: 300px;
+  }
+}
+</style>
+
+
+
+
+
+
+
+
+
+
+