订单分析页面修改

src/views/analysis/orderAnalysis/index.vue

@@ -141,78 +141,59 @@
           <h3 class="table-title">订单数据详情</h3>
           <div class="table-wrapper">
             <el-table
-                :data="orderList"
+              :data="processedOrderList"
               style="width: 100%"
               :fit="true" 
+              :header-cell-style="{
+            'text-align': 'center',
+            'color': '#000000',
+          }"
               :cell-style="{ textAlign: 'center' }"
               v-loading="tableLoading"
               stripe
               border
               @sort-change="handleSortChange"
+            >
 
-              >
+            <el-table-column  prop="orderNo"  label="订单编号"  min-width="180" sortable/>                
-                <el-table-column 
+            <el-table-column  prop="customerName"  label="客户名称" min-width="120"/>
-                  prop="orderNo" 
+            <el-table-column  prop="pilotName"  label="飞行员名称"  min-width="120" />
-                  label="订单编号" 
+            <el-table-column  prop="scenicName"   label="景区名称"   min-width="150" />
-                  min-width="180"
+            <el-table-column  prop="phone"  label="联系电话"  min-width="150"/>
-                  sortable
+            <el-table-column  prop="routeNames"  label="配送路线"  min-width="150" />
-                />
+            <el-table-column  prop="totalAmount"  label="总金额(元)"   min-width="140" sortable align="right">
-                <el-table-column 
-                  prop="orderInitiatorId" 
-                  label="客户ID" 
-                  min-width="150"
-                />
-                <el-table-column 
-                  prop="attractionId" 
-                  label="景点ID" 
-                  min-width="120"
-                />
-                <el-table-column 
-                  prop="amount" 
-                  label="金额(元)" 
-                  min-width="120"
-                  sortable
-                  align="right"
-                />
-                <el-table-column 
-                  prop="mainOrderStatus" 
-                  label="状态" 
-                  min-width="120"
-                  :filters="statusFilters"
-                  :filter-method="filterStatus"
-                >
               <template slot-scope="{ row }">
-                    <el-tag :type="getStatusTagType(row.mainOrderStatus)">
+                  {{ row.totalAmount.toFixed(2) }}
-                      {{ getStatusText(row.mainOrderStatus) }}
+                </template>
+            </el-table-column>
+            <el-table-column  prop="orderInitiator"  label="订单发起人"  min-width="120"  />
+            <el-table-column  prop="orderType"  label="订单类型"  min-width="100"  />
+            <el-table-column  prop="orderCreateTime"  label="下单时间"  min-width="180" sortable />                
+            <el-table-column prop="status" label="订单状态" align="center" width="120">
+              <template #default="{ row }">
+                <el-tag 
+                  :type="getStatusTagType(row.mainOrderStatus)" 
+                  size="small"
+                  effect="light"
+                >
+                  {{ getOrderStatusText(row.mainOrderStatus) }}
                 </el-tag>
               </template>
             </el-table-column>
-                <el-table-column 
+
-                  prop="orderCreateTime" 
+          <el-table-column prop="settlementStatus" label="结算状态" align="center" width="120">
-                  label="下单时间" 
+            <template #default="{ row }">
-                  min-width="180"
+              <el-tag 
-                  sortable
+                :type="getSettlementTagType(row.settlementStatus)"
-                />
-                <el-table-column 
-                  prop="orderFinishTime" 
-                  label="完成时间" 
-                  min-width="180"
-                />
-                <!-- <el-table-column 
-                  label="操作" 
-                  min-width="120"
-                  fixed="right"
-                >
-                  <template slot-scope="{ row }">
-                    <el-button 
                 size="small"
-                      @click="handleViewDetail(row)"
+                effect="plain"
               >
-                      详情
+                {{ getSettlementStatusText(row.settlementStatus) }}
-                    </el-button>
+              </el-tag>
             </template>
-                </el-table-column> -->
+          </el-table-column>
           </el-table>
+              <!-- 分页 -->
               <div class="pagination-wrapper">
                 <div class="pagination-info">
                   显示第 {{ (pagination.currentPage - 1) * pagination.pageSize + 1 }} 至 
@@ -255,11 +236,26 @@ import {
   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 { getOrderStatusText, getSettlementStatusText, getOrderStatusClass, getSettlementStatusClass } from "@/utils/orderStatus";
 
 export default {
   name: 'orderAnalysis',
   data() {
     return {
+    customerMap: {},
+    pilotMap: {},
+    scenicMap: {},
+    routeMap: {},
+    orderTypeMap: {
+      1: '载物飞行',
+      2: '载人飞行'
+      },
+   
+    
       jumpPage: 1,
       loading: false,
       tableLoading: false,
@@ -296,12 +292,6 @@ export default {
         completionRate: 0
       },
       orderList: [],
-      statusFilters: [
-        { text: '未开始', value: 0 },
-        { text: '进行中', value: 1 },
-        { text: '已完成', value: 2 },
-        { text: '已取消', value: 3 }
-      ],
       pagination: {
         currentPage: 1,
         pageSize: 10,
@@ -313,6 +303,41 @@ 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}`,
+        // 配送路线
+        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),
+        // 保留原始值
+        mainOrderStatus: order.mainOrderStatus,
+        settlementStatus: order.settlementStatus
+        }
+      })
+    },
     datePickerType() {
       return this.filter.timeRange === 'year' ? 'year' : 
              this.filter.timeRange === 'month' ? 'month' : 'date';
@@ -336,6 +361,7 @@ export default {
   },
   mounted() {
     this.initCharts();
+    this.initMaps(); // 新增
     this.initDefaultDateRange();
     this.fetchData();
     window.addEventListener('resize', this.handleResize);
@@ -346,7 +372,89 @@ export default {
     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]) || '';
+    },
+  
+     // 订单状态过滤
+  filterStatus(value, row) {
+    return row.mainOrderStatus === value;
+  },
+  
+  // 结算状态过滤
+  filterSettlementStatus(value, row) {
+    return row.settlementStatus === value;
+  },
+  
+  // 初始化映射数据
+  async initMaps() {
+    try {
+      // 获取客户映射
+      const customers = await allCustomer();
+      this.customerMap = customers.reduce((map, customer) => {
+        map[customer.id] = customer.name;
+        return map;
+      }, {});
+      
+      // 获取飞行员映射
+      const pilotsResponse = await getList();
+      this.pilotMap = (pilotsResponse.content || pilotsResponse.data || []).reduce((map, pilot) => {
+        map[pilot.id] = pilot.name;
+        return map;
+      }, {});
+      
+      // 获取景区映射
+      const scenicsResponse = await allScenic();
+      this.scenicMap = (scenicsResponse.data || scenicsResponse || []).reduce((map, scenic) => {
+        map[scenic.id] = scenic.name;
+        return map;
+      }, {});
+      
+      // 获取路线映射 - 使用 getAllRoutes 方法
+      const routesResponse = await getAllRoutes(); // 修改这里
+      const routes = routesResponse.data || routesResponse; // 根据实际API响应结构调整
+      this.routeMap = routes.reduce((map, route) => {
+        map[route.id] = route.name;
+        return map;
+      }, {});
+    } catch (error) {
+      console.error('初始化映射数据失败:', error);
+      this.$message.error('初始化数据失败，请刷新重试');
+      }
+    },
+
+    
     initCharts() {
       this.$nextTick(() => {
         if (this.$refs.trendChartContainer) {
@@ -475,8 +583,11 @@ 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);
@@ -510,16 +621,14 @@ export default {
     },
     
     processResponseData(data) {
-      this.jumpPage = this.pagination.currentPage;
-
        // 1. 首先检查 data 是否存在
       if (!data) {
         console.error('响应数据为空，将设置为空状态');
-    this.setEmptyDataState(); // 调用空数据状态方法
+        this.setEmptyDataState();
-    return; // 提前返回
+        return;
       }
 
-  // 2. 安全设置 summaryData（使用 || 替代 || 以区分 0 和 undefined）
+      // 2. 安全设置 summaryData
       this.summaryData = {
         totalOrderCount: data.totalOrderCount || 0,
         totalOrderAmount: data.totalOrderAmount || 0,
@@ -528,17 +637,30 @@ export default {
         cancelOrderCount: data.cancelOrderCount || 0,
         noStartOrderCount: data.noStartOrderCount || 0,
         completionRate: data.completionRate || 0,
-     droneModelDistribution: data.droneModelDistribution || 0 
+        droneModelDistribution: data.droneModelDistribution || {}
       };
       
-      
+      // 3. 设置orderList - 添加新字段映射
-      // 2. 设置orderList - 确保金额格式化为两位小数
+      this.orderList = (data.orderList || []).map(item => {
-  this.orderList = (data.orderList || []).map(item => ({
+        return {
           ...item,
-    amount: item.amount ? Number(item.amount).toFixed(2) : '0.00'
+          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
+            }
+      });
 
-  // 3. 设置分页数据
+      // 4. 设置分页数据
       if (data.pageInfo) {
         this.pagination.total = data.pageInfo.total || 0;
         this.pagination.currentPage = data.pageInfo.pageNum || 1;
@@ -548,11 +670,10 @@ export default {
         this.pagination.currentPage = 1;
       }
 
-  // 5. 更新图表（传入 data 本身，方法内部已处理空值）
+      // 5. 更新图表
       this.updateCharts({
-    // 确保所有图表需要的数据字段都有默认值
         timeSeriesData: data.timeSeriesData || [],
-    droneModelDistribution: data.droneModelDistribution || data.dromeModelDistribution || {},
+        droneModelDistribution: data.droneModelDistribution || {},
         routeDistribution: data.routeDistribution || []
   });
 },
@@ -627,7 +748,7 @@ export default {
           data: xAxisData,
           axisTick: {
             show: true,
-            inside: true, // 刻度在轴内
+            inside: true, 
           },
           axisLabel: { 
             rotate: xAxisData.length > 10 ? 45 : 0,
@@ -849,30 +970,6 @@ export default {
       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',
@@ -989,7 +1086,6 @@ export default {
 }
 .filter-label {
   font-size: 14px;
-  color: #666;
   margin-right: 12px;
 }
 
@@ -1106,4 +1202,5 @@ export default {
   .content-box { padding: 16px }
   .chart-wrapper { height: 280px }
 }
+
 </style>