hjq/aircraft-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

订单分析页面修改

Browse Source
This commit is contained in:
yis 2025-08-19 17:03:38 +08:00
parent 9a7e2618cd
commit 92e927999d
1 changed files with 252 additions and 155 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

407
src/views/analysis/orderAnalysis/index.vue
View File

@ -136,83 +136,64 @@
</div> </div>
</div> </div>
<!-- 订单数据详情区域 --> <!-- 订单数据详情区域 -->
<div class="data-table-section"> <div class="data-table-section">
<h3 class="table-title">订单数据详情</h3> <h3 class="table-title">订单数据详情</h3>
<div class="table-wrapper"> <div class="table-wrapper">
<el-table <el-table
:data="orderList" :data="processedOrderList"
style="width: 100%" style="width: 100%"
:fit="true" :fit="true"
:cell-style="{ textAlign: 'center' }" :header-cell-style="{
v-loading="tableLoading" 'text-align': 'center',
stripe 'color': '#000000',
border }"
@sort-change="handleSortChange" :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 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="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">
<template slot-scope="{ row }">
{{ row.totalAmount.toFixed(2) }}
</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="settlementStatus" label="结算状态" align="center" width="120">
<template #default="{ row }">
<el-tag
:type="getSettlementTagType(row.settlementStatus)"
size="small"
effect="plain"
> >
<el-table-column {{ getSettlementStatusText(row.settlementStatus) }}
prop="orderNo" </el-tag>
label="订单编号" </template>
min-width="180" </el-table-column>
sortable </el-table>
/> <!-- 分页 -->
<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)">
{{ getStatusText(row.mainOrderStatus) }}
</el-tag>
</template>
</el-table-column>
<el-table-column
prop="orderCreateTime"
label="下单时间"
min-width="180"
sortable
/>
<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)"
>
详情
</el-button>
</template>
</el-table-column> -->
</el-table>
<div class="pagination-wrapper"> <div class="pagination-wrapper">
<div class="pagination-info"> <div class="pagination-info">
显示第 {{ (pagination.currentPage - 1) * pagination.pageSize + 1 }} 至 显示第 {{ (pagination.currentPage - 1) * pagination.pageSize + 1 }} 至
@ -255,11 +236,26 @@ import {
getMonthlyOrderAnalysis, getMonthlyOrderAnalysis,
getYearlyOrderAnalysis getYearlyOrderAnalysis
} from '@/api/analysis/orderAnalysis'; } 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 { export default {
name: 'orderAnalysis', name: 'orderAnalysis',
data() { data() {
return { return {
customerMap: {},
pilotMap: {},
scenicMap: {},
routeMap: {},
orderTypeMap: {
1: '载物飞行',
2: '载人飞行'
},
jumpPage: 1, jumpPage: 1,
loading: false, loading: false,
tableLoading: false, tableLoading: false,
@ -296,12 +292,6 @@ export default {
completionRate: 0 completionRate: 0
}, },
orderList: [], orderList: [],
statusFilters: [
{ text: '未开始', value: 0 },
{ text: '进行中', value: 1 },
{ text: '已完成', value: 2 },
{ text: '已取消', value: 3 }
],
pagination: { pagination: {
currentPage: 1, currentPage: 1,
pageSize: 10, pageSize: 10,
@ -313,6 +303,41 @@ export default {
}; };
}, },
computed: { 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() { datePickerType() {
return this.filter.timeRange === 'year' ? 'year' : return this.filter.timeRange === 'year' ? 'year' :
this.filter.timeRange === 'month' ? 'month' : 'date'; this.filter.timeRange === 'month' ? 'month' : 'date';
@ -336,6 +361,7 @@ export default {
}, },
mounted() { mounted() {
this.initCharts(); this.initCharts();
this.initMaps(); // 新增
this.initDefaultDateRange(); this.initDefaultDateRange();
this.fetchData(); this.fetchData();
window.addEventListener('resize', this.handleResize); window.addEventListener('resize', this.handleResize);
@ -346,7 +372,89 @@ export default {
if (this.modelChart) this.modelChart.dispose(); if (this.modelChart) this.modelChart.dispose();
if (this.routeChart) this.routeChart.dispose(); if (this.routeChart) this.routeChart.dispose();
}, },
methods: { 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() { initCharts() {
this.$nextTick(() => { this.$nextTick(() => {
if (this.$refs.trendChartContainer) { if (this.$refs.trendChartContainer) {
@ -471,13 +579,16 @@ export default {
try { try {
let response; let response;
const params = { const params = {
startDate: this.filter.startDate, startDate: this.filter.startDate,
endDate: this.filter.endDate, endDate: this.filter.endDate,
pageNum: this.pagination.currentPage, pageNum: this.pagination.currentPage,
pageSize: this.pagination.pageSize, pageSize: this.pagination.pageSize,
sortField: this.filter.sortField, // 移除空的sortField
sortOrder: this.filter.sortOrder ...(this.filter.sortField && {
}; sortField: this.filter.sortField,
sortOrder: this.filter.sortOrder
})
};
console.log('请求参数:', params); console.log('请求参数:', params);
console.log('正在请求接口:', this.filter.timeRange); // 调试 console.log('正在请求接口:', this.filter.timeRange); // 调试
@ -510,50 +621,60 @@ export default {
}, },
processResponseData(data) { processResponseData(data) {
this.jumpPage = this.pagination.currentPage; // 1. 首先检查 data 是否存在
if (!data) {
console.error('响应数据为空，将设置为空状态');
this.setEmptyDataState();
return;
}
// 1. 首先检查 data 是否存在 // 2. 安全设置 summaryData
if (!data) { this.summaryData = {
console.error('响应数据为空，将设置为空状态'); totalOrderCount: data.totalOrderCount || 0,
this.setEmptyDataState(); // 调用空数据状态方法 totalOrderAmount: data.totalOrderAmount || 0,
return; // 提前返回 completedOrderCount: data.completedOrderCount || 0,
} inProgressOrderCount: data.inProgressOrderCount || 0,
cancelOrderCount: data.cancelOrderCount || 0,
// 2. 安全设置 summaryData（使用 || 替代 || 以区分 0 和 undefined） noStartOrderCount: data.noStartOrderCount || 0,
this.summaryData = { completionRate: data.completionRate || 0,
totalOrderCount: data.totalOrderCount || 0, droneModelDistribution: data.droneModelDistribution || {}
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 - 确保金额格式化为两位小数 // 3. 设置orderList - 添加新字段映射
this.orderList = (data.orderList || []).map(item => ({ this.orderList = (data.orderList || []).map(item => {
...item, return {
amount: item.amount ? Number(item.amount).toFixed(2) : '0.00' ...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
}
});
// 3. 设置分页数据 // 4. 设置分页数据
if (data.pageInfo) { if (data.pageInfo) {
this.pagination.total = data.pageInfo.total || 0; this.pagination.total = data.pageInfo.total || 0;
this.pagination.currentPage = data.pageInfo.pageNum || 1; this.pagination.currentPage = data.pageInfo.pageNum || 1;
this.pagination.pageSize = data.pageInfo.pageSize || 10; this.pagination.pageSize = data.pageInfo.pageSize || 10;
} else { } else {
this.pagination.total = this.orderList.length; this.pagination.total = this.orderList.length;
this.pagination.currentPage = 1; this.pagination.currentPage = 1;
} }
// 5. 更新图表（传入 data 本身，方法内部已处理空值） // 5. 更新图表
this.updateCharts({ this.updateCharts({
// 确保所有图表需要的数据字段都有默认值 timeSeriesData: data.timeSeriesData || [],
timeSeriesData: data.timeSeriesData || [], droneModelDistribution: data.droneModelDistribution || {},
droneModelDistribution: data.droneModelDistribution || data.dromeModelDistribution || {}, routeDistribution: data.routeDistribution || []
routeDistribution: data.routeDistribution || []
}); });
}, },
@ -627,7 +748,7 @@ export default {
data: xAxisData, data: xAxisData,
axisTick: { axisTick: {
show: true, show: true,
inside: true, // 刻度在轴内 inside: true,
}, },
axisLabel: { axisLabel: {
rotate: xAxisData.length > 10 ? 45 : 0, rotate: xAxisData.length > 10 ? 45 : 0,
@ -849,30 +970,6 @@ export default {
this.refreshData(); 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) { handleViewDetail(row) {
this.$router.push({ this.$router.push({
path: '/order/detail', path: '/order/detail',
@ -989,7 +1086,6 @@ export default {
} }
.filter-label { .filter-label {
font-size: 14px; font-size: 14px;
color: #666;
margin-right: 12px; margin-right: 12px;
} }
@ -1106,4 +1202,5 @@ export default {
.content-box { padding: 16px } .content-box { padding: 16px }
.chart-wrapper { height: 280px } .chart-wrapper { height: 280px }
} }
</style> </style>