统计分析页面整改
This commit is contained in:
yis
parent
2e423ffe85
commit
64d5b4812f
@ -157,7 +157,7 @@
|
||||
|
||||
<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="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" />
|
||||
@ -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"
|
||||
<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"
|
||||
/>
|
||||
<span class="jump-text">页</span>
|
||||
<el-button
|
||||
type="primary"
|
||||
@click="handleJump"
|
||||
class="jump-button"
|
||||
>
|
||||
确定
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -231,15 +221,12 @@
|
||||
|
||||
<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 {
|
||||
@ -247,16 +234,14 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
customerMap: {},
|
||||
pilotMap: {},
|
||||
scenicMap: {},
|
||||
routeMap: {},
|
||||
orderTypeMap: {
|
||||
1: '载物飞行',
|
||||
2: '载人飞行'
|
||||
},
|
||||
|
||||
|
||||
jumpPage: 1,
|
||||
areaOptions: [],
|
||||
scenicOptions: [],
|
||||
pilotOptions: [],
|
||||
loading: false,
|
||||
tableLoading: false,
|
||||
startPickerOptions: {
|
||||
@ -305,7 +290,7 @@ export default {
|
||||
computed: {
|
||||
processedOrderList() {
|
||||
return this.orderList.map(order => {
|
||||
// 处理配送路线（兼容routeIds可能为空的情况）
|
||||
// 处理配送路线
|
||||
const routeNames = order.routeIds
|
||||
? order.routeIds.split(',').map(id => this.routeMap[id] || id).join('、')
|
||||
: '无路线';
|
||||
@ -314,22 +299,22 @@ export default {
|
||||
...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,9 +344,9 @@ export default {
|
||||
this.filter.timeRange === 'month' ? '结束月份' : '结束日期';
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
async mounted() {
|
||||
this.initCharts();
|
||||
this.initMaps(); // 新增
|
||||
await this.initMaps();
|
||||
this.initDefaultDateRange();
|
||||
this.fetchData();
|
||||
window.addEventListener('resize', this.handleResize);
|
||||
@ -396,26 +381,6 @@ export default {
|
||||
};
|
||||
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() {
|
||||
@ -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);
|
||||
@ -642,34 +630,33 @@ export default {
|
||||
|
||||
// 3. 设置orderList - 添加新字段映射
|
||||
this.orderList = (data.orderList || []).map(item => {
|
||||
// 查找匹配的区域和景区名称
|
||||
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,
|
||||
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
|
||||
}
|
||||
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>
|
||||
@ -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="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="orderItemStatus" label="状态" min-width="120" >
|
||||
<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,21 +413,55 @@ 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)
|
||||
this.updateChart()
|
||||
@ -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>
|
||||
Loading…
Reference in New Issue
Block a user