Commit a8577607 by wusiyi

feat:优化图表数据渲染

parent 112246e7
......@@ -483,7 +483,7 @@
v-model="chartTimes1"
size="small"
class="chart-controls"
@change="(v:string) => getchartTimes(v, 'ORDER_TREND')"
@change="(v) => getchartTimes(v, 'ORDER_TREND')"
>
<el-radio-button
v-for="time in timeOptions"
......@@ -501,7 +501,7 @@
v-model="chartTimes2"
size="small"
class="chart-controls"
@change="(v:string) => getchartTimes(v, 'SHIPMENT_TREND')"
@change="(v) => getchartTimes(v, 'SHIPMENT_TREND')"
>
<el-radio-button
v-for="time in timeOptions"
......@@ -518,7 +518,7 @@
v-model="chartTimes3"
size="small"
class="chart-controls"
@change="(v:string) => getchartTimes(v, 'OVERTIME_SHIPMENT_TREND')"
@change="(v) => getchartTimes(v, 'OVERTIME_SHIPMENT_TREND')"
>
<el-radio-button
v-for="time in timeOptions"
......@@ -730,67 +730,82 @@ const createChartOption = (config: typeof chartConfig1) => {
}
const getStatisticDataApi = async () => {
const [statisticRes, orderRes, shipmentRes, overTimeRes] =
await Promise.allSettled([
getStatisticData(),
trendApi({
timeUnit: 0,
trendType: 'ORDER_TREND',
}),
trendApi({
timeUnit: 0,
trendType: 'SHIPMENT_TREND',
}),
trendApi({
timeUnit: 0,
trendType: 'OVERTIME_SHIPMENT_TREND',
}),
])
if (statisticRes.status === 'fulfilled') {
const res = statisticRes.value
if (res.code === 200) {
statisticData.value = res.data
}
}
if (orderRes.status === 'fulfilled') {
const res = orderRes.value
if (res.code === 200) {
updateOrderTrendChart(res.data, 0)
}
}
if (shipmentRes.status === 'fulfilled') {
const res = shipmentRes.value
if (res.code === 200) {
updateShipmentTrendChart(res.data, 0)
}
}
if (overTimeRes.status === 'fulfilled') {
const res = overTimeRes.value
if (res.code === 200) {
updateOvertimeTrendChart(res.data, 0)
}
}
// const res = await getStatisticData()
// 统计数据
getStatisticData()
.then((res) => {
if (res.code === 200) {
statisticData.value = res.data
}
})
.catch((error) => {
console.error('获取统计数据失败:', error)
})
// 订单趋势统计
trendApi({
timeUnit: 0,
trendType: 'ORDER_TREND',
})
.then((res) => {
if (res.code === 200) {
updateOrderTrendChart(res.data, 0)
chartInstances[0]?.setOption(createChartOption(chartConfig1))
}
})
.catch((error) => {
console.error('获取订单趋势数据失败:', error)
})
// 订单发货效率
trendApi({
timeUnit: 0,
trendType: 'SHIPMENT_TREND',
})
.then((res) => {
if (res.code === 200) {
updateShipmentTrendChart(res.data, 0)
chartInstances[1]?.setOption(createChartOption(chartConfig2))
}
})
.catch((error) => {
console.error('获取发货趋势数据失败:', error)
})
// 订单生产效率
trendApi({
timeUnit: 0,
trendType: 'OVERTIME_SHIPMENT_TREND',
})
.then((res) => {
if (res.code === 200) {
updateOvertimeTrendChart(res.data, 0)
chartInstances[2]?.setOption(createChartOption(chartConfig3))
}
})
.catch((error) => {
console.error('获取超时发货趋势数据失败:', error)
})
}
onMounted(async () => {
await nextTick()
await getStatisticDataApi()
// 初始化第一个图表:订单趋势统计
// 订单趋势统计
if (orderChart1.value) {
chartInstances[0] = echarts.init(orderChart1.value)
chartInstances[0]?.setOption(createChartOption(chartConfig1))
}
// 初始化第二个图表:订单发货效率
// 订单发货效率
if (orderChart2.value) {
chartInstances[1] = echarts.init(orderChart2.value)
chartInstances[1]?.setOption(createChartOption(chartConfig2))
}
// 初始化第三个图表:订单生产效率
// 订单生产效率
if (orderChart3.value) {
chartInstances[2] = echarts.init(orderChart3.value)
chartInstances[2]?.setOption(createChartOption(chartConfig3))
}
// 请求成功后立即更新对应的图表
getStatisticDataApi()
// 监听窗口大小变化,自动调整图表大小
window.addEventListener('resize', handleResize)
})
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment