Compare commits
2 Commits
a38f359415
...
2e423ffe85
Author | SHA1 | Date | |
---|---|---|---|
![]() |
2e423ffe85 | ||
![]() |
92e927999d |
@ -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
|
||||
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"
|
||||
>
|
||||
<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 }">
|
||||
<el-tag :type="getStatusTagType(row.mainOrderStatus)">
|
||||
{{ getStatusText(row.mainOrderStatus) }}
|
||||
{{ 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="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
|
||||
|
||||
<el-table-column prop="settlementStatus" label="结算状态" align="center" width="120">
|
||||
<template #default="{ row }">
|
||||
<el-tag
|
||||
:type="getSettlementTagType(row.settlementStatus)"
|
||||
size="small"
|
||||
@click="handleViewDetail(row)"
|
||||
effect="plain"
|
||||
>
|
||||
详情
|
||||
</el-button>
|
||||
{{ getSettlementStatusText(row.settlementStatus) }}
|
||||
</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(); // 调用空数据状态方法
|
||||
return; // 提前返回
|
||||
this.setEmptyDataState();
|
||||
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 || {}
|
||||
};
|
||||
|
||||
|
||||
// 2. 设置orderList - 确保金额格式化为两位小数
|
||||
this.orderList = (data.orderList || []).map(item => ({
|
||||
// 3. 设置orderList - 添加新字段映射
|
||||
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>
|
Loading…
Reference in New Issue
Block a user