From 64d5b4812fc034fb8321c0d9f173604f320e9c4e Mon Sep 17 00:00:00 2001
From: yis <15131735+Wzyhihi@user.noreply.gitee.com>
Date: Wed, 20 Aug 2025 15:25:12 +0800
Subject: [PATCH] =?UTF-8?q?=E7=BB=9F=E8=AE=A1=E5=88=86=E6=9E=90=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=E6=95=B4=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/analysis/orderAnalysis/index.vue | 346 +++++++++------------
 src/views/analysis/taskAnalysis/index.vue  | 304 +++++++++++++++---
 2 files changed, 400 insertions(+), 250 deletions(-)

diff --git a/src/views/analysis/orderAnalysis/index.vue b/src/views/analysis/orderAnalysis/index.vue
index 8b9435e..adf2bcb 100644
--- a/src/views/analysis/orderAnalysis/index.vue
+++ b/src/views/analysis/orderAnalysis/index.vue
@@ -157,8 +157,8 @@
 
             <el-table-column  prop="orderNo"  label="订单编号"  min-width="180" sortable/>                
             <el-table-column  prop="customerName"  label="客户名称" min-width="120"/>
-            <el-table-column  prop="pilotName"  label="飞行员名称"  min-width="120" />
-            <el-table-column  prop="scenicName"   label="景区名称"   min-width="150" />
+            <el-table-column  prop="areaName" label="区域名称" min-width="120" />
+            <el-table-column  prop="scenicName" label="景区名称" min-width="150" />
             <el-table-column  prop="phone"  label="联系电话"  min-width="150"/>
             <el-table-column  prop="routeNames"  label="配送路线"  min-width="150" />
             <el-table-column  prop="totalAmount"  label="总金额(元)"   min-width="140" sortable align="right">
@@ -193,7 +193,7 @@
             </template>
           </el-table-column>
           </el-table>
-              <!-- 分页 -->
+             <!-- 分页代码 -->
               <div class="pagination-wrapper">
                 <div class="pagination-info">
                   显示第 {{ (pagination.currentPage - 1) * pagination.pageSize + 1 }} 至 
@@ -201,25 +201,15 @@
                   共 {{ 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>
+                <el-pagination
+                  :current-page="pagination.currentPage"
+                  :page-size="pagination.pageSize"
+                  :total="Number(pagination.total)"  
+                  :page-sizes="[10, 20, 50, 100]"
+                  layout="prev, pager, next, jumper"
+                  @current-change="handlePageChange"
+                  @size-change="handleSizeChange"
+                />
               </div>
             </div>
           </div>
@@ -231,32 +221,27 @@
 
 <script>
 import * as echarts from 'echarts';
-import {
-  getDailyOrderAnalysis,
-  getMonthlyOrderAnalysis,
-  getYearlyOrderAnalysis
-} from '@/api/analysis/orderAnalysis';
+import {getDailyOrderAnalysis,getMonthlyOrderAnalysis,getYearlyOrderAnalysis} from '@/api/analysis/orderAnalysis';
 import { allScenic } from "@/api/system/scenic";
 import { allCustomer } from "@/api/system/customer";
 import { getList } from "@/api/system/pilot";
 import { getAllRoutes } from "@/api/system/route";
+import { allAreas } from "@/api/system/area";
 import { getOrderStatusText, getSettlementStatusText, getOrderStatusClass, getSettlementStatusClass } from "@/utils/orderStatus";
 
 export default {
   name: 'orderAnalysis',
   data() {
     return {
-    customerMap: {},
-    pilotMap: {},
-    scenicMap: {},
-    routeMap: {},
-    orderTypeMap: {
-      1: '载物飞行',
-      2: '载人飞行'
-      },
-   
-    
-      jumpPage: 1,
+      customerMap: {},
+      routeMap: {},
+      orderTypeMap: {
+        1: '载物飞行',
+        2: '载人飞行'
+        },
+      areaOptions: [],    
+      scenicOptions: [],  
+      pilotOptions: [],     
       loading: false,
       tableLoading: false,
       startPickerOptions: {
@@ -305,31 +290,31 @@ export default {
   computed: {
     processedOrderList() {
      return this.orderList.map(order => {
-      // 处理配送路线（兼容routeIds可能为空的情况）
+      // 处理配送路线
       const routeNames = order.routeIds 
         ? order.routeIds.split(',').map(id => this.routeMap[id] || id).join('、')
         : '无路线';
       
       return {
         ...order,
-        // 客户名称映射
+         // 客户名称映射
         customerName: this.customerMap[order.customerId] || `客户${order.customerId}`,
-        // 飞行员名称映射
-        pilotName: this.pilotMap[order.pilotId] || `飞行员${order.pilotId}`,
-        // 景区名称映射
-        scenicName: this.scenicMap[order.scenicId] || `景区${order.scenicId}`,
-        // 订单发起人映射
-        orderInitiator: this.pilotMap[order.orderInitiatorId] || `发起人${order.orderInitiatorId}`,
+        // 区域名称（直接从order中获取）
+        areaName: order.areaName,
+        // 景区名称（直接从order中获取）
+        scenicName: order.scenicName,
+        // 订单发起人（直接从order中获取）
+        orderInitiator: order.orderInitiator,
         // 配送路线
         routeNames: routeNames,
         // 格式化金额
         totalAmount: parseFloat(order.totalAmount || 0),
         // 订单类型映射
         orderType: this.orderTypeMap[order.orderType] || '未知类型',
-        // 订单状态 - 使用工具函数
+        // 订单状态
         statusText: this.getOrderStatusText(order.mainOrderStatus),
         statusClass: this.getOrderStatusClass(order.mainOrderStatus),
-        // 结算状态 - 使用工具函数（非详情页面）
+        // 结算状态
         settlementStatusText: this.getSettlementStatusText(order.settlementStatus),
         settlementClass: this.getSettlementStatusClass(order.settlementStatus),
         // 保留原始值
@@ -359,67 +344,47 @@ export default {
              this.filter.timeRange === 'month' ? '结束月份' : '结束日期';
     }
   },
-  mounted() {
-    this.initCharts();
-    this.initMaps(); // 新增
-    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();
-  },
+    async mounted() {
+      this.initCharts();
+      await this.initMaps(); 
+      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: {
     getOrderStatusText,
     getSettlementStatusText,
     getOrderStatusClass,
     getSettlementStatusClass,
-  getSettlementTagType(status) {
-    const map = {
-      0: 'info',     // 未结算
-      1: 'warning',  // 结算中
-      2: 'success'   // 已结算
-    };
-    return map[status] || 'info';
-    },
-  getStatusTagType(status) {
-    const map = {
-      0: 'info',      // 未进行（灰色）
-      1: 'primary',   // 进行中（蓝色）
-      2: 'success',   // 已完成（绿色）
-      3: 'danger',    // 已取消（红色）
-      4: 'warning'    // 待确认（黄色）
-    };
-    return map[status] || 'info';
-  },
-    // 修改后的类获取方法
-  getOrderStatusClass(status) {
-    const classObj = getOrderStatusClass(status);
-    return Object.keys(classObj).find(key => classObj[key]) || '';
-  },
-  
-  getSettlementStatusClass(status) {
-    const classObj = getSettlementStatusClass(status);
-    return Object.keys(classObj).find(key => classObj[key]) || '';
+    getSettlementTagType(status) {
+      const map = {
+        0: 'info',     // 未结算
+        1: 'warning',  // 结算中
+        2: 'success'   // 已结算
+      };
+      return map[status] || 'info';
+      },
+    getStatusTagType(status) {
+      const map = {
+        0: 'info',      // 未进行（灰色）
+        1: 'primary',   // 进行中（蓝色）
+        2: 'success',   // 已完成（绿色）
+        3: 'danger',    // 已取消（红色）
+        4: 'warning'    // 待确认（黄色）
+      };
+      return map[status] || 'info';
     },
   
-     // 订单状态过滤
-  filterStatus(value, row) {
-    return row.mainOrderStatus === value;
-  },
-  
-  // 结算状态过滤
-  filterSettlementStatus(value, row) {
-    return row.settlementStatus === value;
-  },
-  
-  // 初始化映射数据
-  async initMaps() {
-    try {
+     // 初始化映射数据
+    async initMaps() {
+      try {
       // 获取客户映射
       const customers = await allCustomer();
       this.customerMap = customers.reduce((map, customer) => {
@@ -427,33 +392,59 @@ export default {
         return map;
       }, {});
       
-      // 获取飞行员映射
-      const pilotsResponse = await getList();
-      this.pilotMap = (pilotsResponse.content || pilotsResponse.data || []).reduce((map, pilot) => {
-        map[pilot.id] = pilot.name;
-        return map;
-      }, {});
+      // 获取区域映射
+      const areasResponse = await allAreas();
+      this.areaOptions = (areasResponse || []).map(area => ({
+        id: area.id,
+        name: area.name
+      }));
       
       // 获取景区映射
       const scenicsResponse = await allScenic();
-      this.scenicMap = (scenicsResponse.data || scenicsResponse || []).reduce((map, scenic) => {
-        map[scenic.id] = scenic.name;
-        return map;
-      }, {});
+      this.scenicOptions = (scenicsResponse || []).map(scenic => ({
+        id: scenic.id,
+        name: scenic.name
+      }));
       
-      // 获取路线映射 - 使用 getAllRoutes 方法
-      const routesResponse = await getAllRoutes(); // 修改这里
-      const routes = routesResponse.data || routesResponse; // 根据实际API响应结构调整
+      // 获取飞行员映射（用于订单发起人）
+      const pilotsResponse = await getList();
+      this.pilotOptions = (pilotsResponse.content || pilotsResponse.data || pilotsResponse || []).map(pilot => ({
+        id: pilot.id,
+        name: pilot.name
+      }));
+      
+      // 获取路线映射
+      const routesResponse = await getAllRoutes(); 
+      const routes = routesResponse.data || routesResponse; 
       this.routeMap = routes.reduce((map, route) => {
         map[route.id] = route.name;
         return map;
       }, {});
+      
+      console.log('映射数据加载完成', {
+        areaOptions: this.areaOptions,
+        scenicOptions: this.scenicOptions,
+        pilotOptions: this.pilotOptions,
+        customerMap: this.customerMap,
+        routeMap: this.routeMap
+      });
     } catch (error) {
       console.error('初始化映射数据失败:', error);
       this.$message.error('初始化数据失败，请刷新重试');
-      }
-    },
+        }
+      },
 
+      // 添加页面变化处理方法
+    handlePageChange(page) {
+      this.pagination.currentPage = page;
+      this.fetchData();
+    },
+    
+    handleSizeChange(size) {
+      this.pagination.pageSize = size;
+      this.pagination.currentPage = 1; // 重置到第一页
+      this.fetchData();
+    },
     
     initCharts() {
       this.$nextTick(() => {
@@ -583,15 +574,12 @@ export default {
   endDate: this.filter.endDate, 
     pageNum: this.pagination.currentPage,
     pageSize: this.pagination.pageSize,
-    // 移除空的sortField
     ...(this.filter.sortField && {
       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);
@@ -607,7 +595,7 @@ export default {
         }
         
         console.log('接口响应数据:', response);
-       
+
         this.processResponseData(response);
 
       } catch (error) {
@@ -642,34 +630,33 @@ export default {
       
       // 3. 设置orderList - 添加新字段映射
       this.orderList = (data.orderList || []).map(item => {
-        return {
-          ...item,
-          customerName: this.customerMap[item.customerId] || `客户${item.customerId}`,
-          pilotName: this.pilotMap[item.pilotId] || `飞行员${item.pilotId}`,
-          scenicName: this.scenicMap[item.scenicId] || `景区${item.scenicId}`,
-          orderInitiator: this.pilotMap[item.orderInitiatorId] || `发起人${item.orderInitiatorId}`,
-          orderType: this.orderTypeMap[item.orderType] || '未知类型',
-          routeNames: item.routeIds ? item.routeIds.split(',').map(id => this.routeMap[id] || id).join('、') : '无路线',
-          totalAmount: parseFloat(item.totalAmount || 0),
-          statusText: this.getOrderStatusText(item.mainOrderStatus),
-          statusClass: this.getOrderStatusClass(item.mainOrderStatus),
-          settlementStatusText: this.getSettlementStatusText(item.settlementStatus),
-          settlementClass: this.getSettlementStatusClass(item.settlementStatus),
-          mainOrderStatus: item.mainOrderStatus,
-          settlementStatus: item.settlementStatus
-            }
+      // 查找匹配的区域和景区名称
+      const scenicIdValue = item.scenicId || item.attractionId || item.scenicID;
+      const areaIdValue = item.areaId || item.regionId;
+      const initiatorIdValue = item.orderInitiatorId || item.initiatorId;
+      
+      // 查找匹配
+      const matchedArea = this.areaOptions.find(area => area.id == areaIdValue);
+      const matchedScenic = this.scenicOptions.find(scenic => scenic.id == scenicIdValue);
+      const matchedPilot = this.pilotOptions.find(pilot => pilot.id == initiatorIdValue);
+      
+      return {
+        ...item,
+        areaName: matchedArea ? matchedArea.name : `区域${areaIdValue || '未知'}`,
+        scenicName: matchedScenic ? matchedScenic.name : `景区${scenicIdValue || '未知'}`,
+        orderInitiator: matchedPilot ? matchedPilot.name : `发起人${initiatorIdValue || '未知'}`
+      };
       });
-
+    
       // 4. 设置分页数据
       if (data.pageInfo) {
-        this.pagination.total = data.pageInfo.total || 0;
-        this.pagination.currentPage = data.pageInfo.pageNum || 1;
-        this.pagination.pageSize = data.pageInfo.pageSize || 10;
+        this.pagination.total = Number(data.pageInfo.total) || 0;
+        this.pagination.currentPage = Number(data.pageInfo.pageNum) || 1;
+        this.pagination.pageSize = Number(data.pageInfo.pageSize) || 10;
       } else {
-        this.pagination.total = this.orderList.length;
+        this.pagination.total = Number(this.orderList.length);
         this.pagination.currentPage = 1;
       }
-
       // 5. 更新图表
       this.updateCharts({
         timeSeriesData: data.timeSeriesData || [],
@@ -723,7 +710,6 @@ export default {
             break;
         }
       }
-            // 简单添加标题和最大值标注
       const maxValue = Math.max(...seriesData);
       const maxIndex = seriesData.indexOf(maxValue);
       
@@ -776,7 +762,7 @@ export default {
           },
           axisTick: {
             show: true,
-            inside: true, // 刻度在轴内
+            inside: true, 
           },
           itemStyle: { color: '#4E80EE' },
           markPoint: {
@@ -894,7 +880,7 @@ export default {
         },
         grid: {
           left: '3%',
-          right: '12%', // 为右侧数值留更多空间
+          right: '12%', 
           bottom: '3%',
           containLabel: true
         },
@@ -902,12 +888,12 @@ export default {
           type: 'value',
           name: '订单数量（件）', 
           splitLine: {
-              show: false // 移除背景竖线
+              show: false 
           },
           axisTick: {
-            show: false // 隐藏刻度
+            show: false 
         },
-          max: Math.max(50, maxValue) // 动态调整最大值
+          max: Math.max(50, maxValue) 
         },
         yAxis: {
           type: 'category',
@@ -918,12 +904,12 @@ export default {
             formatter: (name) => name.length > 8 ? `${name.substring(0, 8)}...` : name
           },
           axisTick: {
-            show: false // 隐藏刻度
+            show: false 
         },
           splitLine: {
-            show: false // 移除背景横线
+            show: false
         },
-          inverse: true // 反转Y轴使最大值在上方
+          inverse: true 
         },
         series: [{
           name: '订单量',
@@ -939,25 +925,13 @@ export default {
           barWidth: '40%',
           label: {
             show: true,
-            position: 'right', // 数值显示在右侧
+            position: 'right', 
             formatter: ({ data }) => data.displayValue || `${data.value}`,
           }
         }]
       }, 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;
@@ -970,13 +944,6 @@ export default {
       this.refreshData();
     },
     
-    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();
@@ -1167,40 +1134,17 @@ export default {
   padding: 10px 0;
   border-top: 1px solid #ebeef5;
 }
+
 .pagination-info {
   font-size: 12px;
-}
-.pagination-jump {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-.jump-text {
-  font-size: 14px;
-}
-.jump-input {
-  width: 60px;
-}
-.jump-input .el-input__inner {
-  text-align: center;
-  padding: 0 5px;
+  color: #606266;
 }
 
-/* 响应式布局 */
-@media (max-width: 1200px) {
-  .card-grid { grid-template-columns: repeat(2, 1fr) }
-  .double-chart-section { grid-template-columns: 1fr }
-}
+/* 响应式调整 */
 @media (max-width: 768px) {
-  .card-grid { grid-template-columns: 1fr }
-  .filter-section { flex-direction: column }
-  .filter-group, .time-range-buttons, .date-range-picker { width: 100% }
-  .filter-item { flex-direction: column; align-items: flex-start }
+  .pagination-wrapper {
+    flex-direction: column;
+    gap: 12px;
+  }
 }
-@media (max-width: 480px) {
-  .main-content { padding: 10px }
-  .content-box { padding: 16px }
-  .chart-wrapper { height: 280px }
-}
-
 </style>
\ No newline at end of file
diff --git a/src/views/analysis/taskAnalysis/index.vue b/src/views/analysis/taskAnalysis/index.vue
index 6d43dad..b1b21d8 100644
--- a/src/views/analysis/taskAnalysis/index.vue
+++ b/src/views/analysis/taskAnalysis/index.vue
@@ -80,34 +80,57 @@
           <div class="task-list-section">
             <h3 class="section-title">任务详情列表</h3>
             <el-table
-              :data="orderDetailList"
+              :data="processedOrderDetailList"
               :fit="true" 
+              :header-cell-style="{
+                  'text-align': 'center',
+                  'color': '#000000',
+                }"
               :cell-style="{ textAlign: 'center' }"
               border
               stripe
               class="task-detail-table"
-              :header-cell-style="{background:'#f5f7fa', color:'#333'}"
+              v-loading="loading"
             >
-              <el-table-column prop="id" label="ID" min-width="150"  />
-              <el-table-column prop="orderId" label="订单ID" min-width="150"  />
-              <el-table-column prop="deviceId" label="设备ID" min-width="150"  show-overflow-tooltip />
-              <el-table-column prop="operatorId" label="操作员ID" min-width="80"  />
-              <el-table-column prop="createTime" label="创建时间" min-width="160"  />
-              <el-table-column prop="orderItemStatus" label="状态" min-width="120" >
+              <el-table-column prop="orderId" label="订单编号" min-width="150" />
+              <el-table-column prop="deviceId" label="设备名称" min-width="150" show-overflow-tooltip />
+              <el-table-column prop="createTime" label="创建时间" min-width="160" />
+              <el-table-column prop="operatorName" label="操作员" min-width="150" />
+              <el-table-column 
+                prop="orderItemStatus" 
+                label="状态" 
+                min-width="120"
+                :filters="statusFilters"
+                :filter-method="filterStatus"
+                filter-placement="bottom-end"
+              >
                 <template #default="{row}">
                   <el-tag :type="getStatusTagType(row.orderItemStatus)">
                     {{ getStatusText(row.orderItemStatus) }}
                   </el-tag>
                 </template>
               </el-table-column>
-              <!-- <el-table-column prop="personCount" label="人数" min-width="100"  /> -->
-              <el-table-column prop="cargoWeight" label="货物重量(kg)" min-width="80"  />
-              <!-- <el-table-column 
-                  label="操作" 
-                  min-width="120"
-                  fixed="right"
-                /> -->
+              <el-table-column prop="cargoWeight" label="货物重量(kg)" min-width="100" />
             </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>
+              
+              <el-pagination
+                :current-page="pagination.currentPage"
+                :page-size="pagination.pageSize"
+                :total="pagination.total"
+                :page-sizes="[10, 20, 50, 100]"
+                layout="sizes, prev, pager, next, jumper"
+                @current-change="handlePageChange"
+                @size-change="handleSizeChange"
+              />
+            </div>
           </div>
         </div>
       </div>
@@ -117,12 +140,23 @@
 
 <script>
 import * as echarts from 'echarts'
-import { getDailyOrderAnalysis, getMonthlyOrderAnalysis, getYearlyOrderAnalysis } from '@/api/analysis/taskAnalysis'
+import { 
+  getDailyOrderAnalysis, 
+  getMonthlyOrderAnalysis, 
+  getYearlyOrderAnalysis 
+} from '@/api/analysis/taskAnalysis'
+import { getAllPilots } from '@/api/system/pilot'
 
 export default {
   name: 'taskAnalysis',
   data() {
     return {
+      operatorsMap: {},
+      pagination: {
+        currentPage: 1,
+        pageSize: 10,
+        total: 0
+      },
       loading: false,
       trendChart: null,
       timeRanges: [
@@ -168,6 +202,20 @@ export default {
     }
   },
   computed: {
+    processedOrderDetailList() {
+      return this.orderDetailList.map(item => ({
+        ...item,
+        operatorName: this.getOperatorName(item.operatorId)
+      }))
+    },
+    // 状态筛选器配置
+    statusFilters() {
+      return [
+        { text: '未开始', value: 0 },
+        { text: '已完成', value: 2 },
+        { text: '已失败', value: 3 }
+      ]
+    },
     datePickerType() {
       return this.filter.timeRange === 'year' ? 'year' : 
              this.filter.timeRange === 'month' ? 'month' : 'date'
@@ -189,7 +237,8 @@ export default {
              this.filter.timeRange === 'month' ? '结束月份' : '结束日期'
     }
   },
-  mounted() {
+  async mounted() {
+    await this.fetchOperators()
     this.initDefaultDateRange()
     this.fetchData()
     this.initChart()
@@ -200,6 +249,103 @@ export default {
     window.removeEventListener('resize', this.handleResize)
   },
   methods: {
+    // 添加页面变化处理方法
+    handlePageChange(page) {
+      this.pagination.currentPage = page;
+      this.fetchData();
+    },
+    
+    handleSizeChange(size) {
+      this.pagination.pageSize = size;
+      this.pagination.currentPage = 1;
+      this.fetchData();
+    },
+
+    // 获取操作员列表
+    async fetchOperators() {
+      try {
+        const response = await getAllPilots()
+        
+        let operatorsArray = []
+        
+        // 处理不同的响应格式
+        if (Array.isArray(response)) {
+          operatorsArray = response
+        } 
+        else if (response.code === 200 && Array.isArray(response.data)) {
+          operatorsArray = response.data
+        }
+        else if (response.data && Array.isArray(response.data.records)) {
+          operatorsArray = response.data.records
+        }
+        else if (response.data && Array.isArray(response.data.list)) {
+          operatorsArray = response.data.list
+        }
+        else {
+          return
+        }
+        
+        // 创建操作员映射表
+        this.operatorsMap = {}
+        operatorsArray.forEach(operator => {
+          const operatorId = operator.id || operator.userId || operator.employeeId
+          if (operatorId) {
+            this.operatorsMap[operatorId] = {
+              name: operator.nickName || operator.realName || operator.name || operator.username || '未知操作员'
+            }
+          }
+        })
+        
+      } catch (error) {
+        console.error('获取操作员列表失败:', error)
+      }
+    },
+
+    getOperatorName(operatorId) {
+      if (operatorId === null || operatorId === undefined || operatorId === '') {
+        return '未分配'
+      }
+      
+      let operator = this.operatorsMap[operatorId]
+      
+      if (!operator && operatorId) {
+        const stringId = operatorId.toString()
+        operator = this.operatorsMap[stringId]
+      }
+      
+      if (!operator && operatorId) {
+        const numberId = Number(operatorId)
+        if (!isNaN(numberId)) {
+          operator = this.operatorsMap[numberId]
+        }
+      }
+      
+      return operator && operator.name ? operator.name : `操作员(${operatorId})`
+    },
+
+    // 状态筛选方法
+    filterStatus(value, row) {
+      return row.orderItemStatus === value
+    },
+
+    getStatusTagType(status) {
+      const typeMap = {
+        0: 'info',
+        2: 'success',
+        3: 'danger'
+      }
+      return typeMap[status] || 'info'
+    },
+  
+    getStatusText(status) {
+      const textMap = {
+        0: '未开始',
+        2: '已完成',
+        3: '已失败'
+      }
+      return textMap[status] || '未知状态'
+    },
+
     initDefaultDateRange() {
       const now = new Date()
       const year = now.getFullYear()
@@ -237,28 +383,29 @@ export default {
     async fetchData() {
       this.loading = true
       try {
-        const params = { startDate: this.filter.startDate, endDate: this.filter.endDate }
-        const apiMap = {
-          day: getDailyOrderAnalysis,
-          month: getMonthlyOrderAnalysis,
-          year: getYearlyOrderAnalysis
+        const analysisData = await this.getAnalysisData()
+        
+        this.orderDetailList = analysisData.orderDetailList || []
+
+        // 确保分页数据是数字类型
+        this.pagination = {
+          currentPage: Number(analysisData.currentPage) || Number(analysisData.pageNum) || 1,
+          pageSize: Number(analysisData.pageSize) || Number(analysisData.size) || 10,
+          total: Number(analysisData.total) || this.orderDetailList.length
         }
-        const res = await apiMap[this.filter.timeRange](params)
 
         this.stats = {
-          averageTaskCycle: res.averageTaskCycle || 0,
-          completedTaskCount: res.completedTaskCount || 0,
-          completionRate: res.completionRate || 0,
-          droneUsageRate: res.droneUsageRate || 0,
-          failedRate: res.failedRate || 0,
-          failedTaskCount: res.failedTaskCount || 0,
-          notStartedTaskCount: res.notStartedTaskCount || 0,
-          processingTaskCount: res.processingTaskCount || 0,
-          totalTaskCount: res.totalTaskCount || 0
+          averageTaskCycle: analysisData.averageTaskCycle || 0,
+          completedTaskCount: analysisData.completedTaskCount || 0,
+          completionRate: analysisData.completionRate || 0,
+          droneUsageRate: analysisData.droneUsageRate || 0,
+          failedRate: analysisData.failedRate || 0,
+          failedTaskCount: analysisData.failedTaskCount || 0,
+          notStartedTaskCount: analysisData.notStartedTaskCount || 0,
+          processingTaskCount: analysisData.processingTaskCount || 0,
+          totalTaskCount: analysisData.totalTaskCount || 0
         }
 
-        this.orderDetailList = res.orderDetailList || []
-        
         const keyMap = {
           day: { time: 'date', completed: 'dailyCompletedCount', failed: 'dailyFailedCount' },
           month: { time: 'month', completed: 'monthlyCompletedCount', failed: 'monthlyFailedCount' },
@@ -266,20 +413,54 @@ export default {
         }
         const keys = keyMap[this.filter.timeRange]
         
+        // 安全处理 timeSeriesData
+        const timeSeriesData = analysisData.timeSeriesData || []
         this.chartData = {
-          dates: res.timeSeriesData.map(item => item[keys.time]),
-          completed: res.timeSeriesData.map(item => item[keys.completed] || 0),
-          failed: res.timeSeriesData.map(item => item[keys.failed] || 0)
+          dates: timeSeriesData.map(item => item[keys.time] || ''),
+          completed: timeSeriesData.map(item => item[keys.completed] || 0),
+          failed: timeSeriesData.map(item => item[keys.failed] || 0)
         }
         
         this.updateChart()
+
       } catch (error) {
-        console.error('获取数据失败:', error)
-        this.$message.error('获取数据失败')
+        console.error('数据加载失败:', error)
+        let errorMessage = '数据加载失败: '
+        if (error.response && error.response.data && error.response.data.message) {
+          errorMessage += error.response.data.message
+        } else if (error.message) {
+          errorMessage += error.message
+        } else {
+          errorMessage += '未知错误'
+        }
+        this.$message.error(errorMessage)
       } finally {
         this.loading = false
       }
     },
+
+    async getAnalysisData() {
+      const params = { 
+        startDate: this.filter.startDate, 
+        endDate: this.filter.endDate,
+        page: this.pagination.currentPage,
+        size: this.pagination.pageSize
+      }
+      
+      const apiMap = {
+        day: getDailyOrderAnalysis,
+        month: getMonthlyOrderAnalysis,
+        year: getYearlyOrderAnalysis
+      }
+      
+      try {
+        const response = await apiMap[this.filter.timeRange](params)
+        return response
+      } catch (error) {
+        console.error('API调用失败:', error)
+        throw error
+      }
+    },
     
     initChart() {
       this.trendChart = echarts.init(this.$refs.trendChartContainer)
@@ -396,21 +577,12 @@ export default {
     },
     
     refreshData() {
+      this.pagination.currentPage = 1
       this.fetchData()
     },
     
     handleResize() {
       if (this.trendChart) this.trendChart.resize()
-    },
-    
-    getStatusTagType(status) {
-      const types = ['info', 'primary', 'success']
-      return types[status] || 'info'
-    },
-    
-    getStatusText(status) {
-      const texts = ['未开始', '进行中', '已完成']
-      return texts[status] || '未知状态'
     }
   }
 }
@@ -618,6 +790,21 @@ export default {
   margin-bottom: 16px;
 }
 
+.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;
+}
+
+/* 响应式调整 */
 @media (max-width: 1200px) {
   .card-grid {
     grid-template-columns: repeat(2, 1fr);
@@ -641,5 +828,24 @@ export default {
     flex-direction: column;
     align-items: flex-start;
   }
+  
+  .pagination-wrapper {
+    flex-direction: column;
+    gap: 12px;
+  }
+}
+
+@media (max-width: 480px) {
+  .main-content {
+    padding: 10px;
+  }
+  
+  .content-box {
+    padding: 16px;
+  }
+  
+  .chart-wrapper {
+    height: 300px;
+  }
 }
 </style>
\ No newline at end of file