Skip to content

F
factory_front
Commit f4412e85 by wusiyi
Options

feat: 概览数据优化

parent dee09f0b
Showing with 56 additions and 14 deletions
src/views/Dashboard.vue
...@@ -262,10 +262,10 @@ ...@@ -262,10 +262,10 @@
<el-tooltip class="item" effect="light" placement="bottom-end"> <el-tooltip class="item" effect="light" placement="bottom-end">
<template #content> <template #content>
<div style="display: flex; align-items: center; gap: 4px"> <div style="display: flex; align-items: center; gap: 4px">
<div class="up-icon-red"></div>
<div>为正向趋势，</div>
<div class="down-icon-green"></div> <div class="down-icon-green"></div>
<div>为负向趋势</div> <div>为正向趋势</div>
<div class="up-icon-red"></div>
<div>为负向趋势，</div>
</div> </div>
</template> </template>
<div class="card-item"> <div class="card-item">
...@@ -420,7 +420,7 @@ ...@@ -420,7 +420,7 @@
<el-tooltip <el-tooltip
class="item" class="item"
effect="light" effect="light"
content="所有订单中的异常单总单数" content="所有订单中的异常单总订单单数"
placement="bottom" placement="bottom"
> >
<div class="card-icon"></div> <div class="card-icon"></div>
...@@ -659,6 +659,22 @@ const yesterday = new Date(new Date().setDate(new Date().getDate() - 1)) ...@@ -659,6 +659,22 @@ const yesterday = new Date(new Date().setDate(new Date().getDate() - 1))
}) })
.replace(/\//g, '-') .replace(/\//g, '-')
const lastWeek = new Date(new Date().setDate(new Date().getDate() - 7))
.toLocaleDateString('zh-CN', {
year: 'numeric',
month: '2-digit',
day: '2-digit',
})
.replace(/\//g, '-')
const lastMonth = new Date(new Date().setMonth(new Date().getMonth() - 1))
.toLocaleDateString('zh-CN', {
year: 'numeric',
month: '2-digit',
day: '2-digit',
})
.replace(/\//g, '-')
// 获取统计数据 // 获取统计数据
const statisticData = ref<StatisticData | null>(null) const statisticData = ref<StatisticData | null>(null)
...@@ -987,7 +1003,7 @@ const getStatisticDataApi = async () => { ...@@ -987,7 +1003,7 @@ const getStatisticDataApi = async () => {
if (!isEmpty) { if (!isEmpty) {
updateOrderTrendChart(res.data, 0) updateOrderTrendChart(res.data, 0)
} }
updateChart(chartInstances[0], chartConfig1, isEmpty) updateChart(chartInstances[0], chartConfig1, isEmpty, chartTimes1.value)
orderChart1Loading.value = !(res.data && res.data.length > 0) orderChart1Loading.value = !(res.data && res.data.length > 0)
} }
}) })
...@@ -1006,7 +1022,13 @@ const getStatisticDataApi = async () => { ...@@ -1006,7 +1022,13 @@ const getStatisticDataApi = async () => {
if (!isEmpty) { if (!isEmpty) {
updateShipmentTrendChart(res.data, 0) updateShipmentTrendChart(res.data, 0)
} }
updateChart(chartInstances[1], chartConfig2, isEmpty, true) updateChart(
chartInstances[1],
chartConfig2,
isEmpty,
chartTimes2.value,
true,
)
orderChart2Loading.value = !(res.data && res.data.length > 0) orderChart2Loading.value = !(res.data && res.data.length > 0)
} }
}) })
...@@ -1030,6 +1052,8 @@ const getStatisticDataApi = async () => { ...@@ -1030,6 +1052,8 @@ const getStatisticDataApi = async () => {
chartConfig3, chartConfig3,
isEmpty, isEmpty,
true, true,
chartTimes3.value,
overtimeTooltipFormatter, overtimeTooltipFormatter,
) )
orderChart3Loading.value = !(res.data && res.data.length > 0) orderChart3Loading.value = !(res.data && res.data.length > 0)
...@@ -1085,14 +1109,26 @@ const getchartTimes = async (v: string, type: string) => { ...@@ -1085,14 +1109,26 @@ const getchartTimes = async (v: string, type: string) => {
if (!isEmpty) { if (!isEmpty) {
updateOrderTrendChart(data, v) updateOrderTrendChart(data, v)
} }
updateChart(chartInstances[0], chartConfig1, isEmpty) updateChart(
chartInstances[0],
chartConfig1,
isEmpty,
false,
chartTimes1.value,
)
orderChart1Loading.value = !(data && data.length > 0) orderChart1Loading.value = !(data && data.length > 0)
} else if (type == 'SHIPMENT_TREND') { } else if (type == 'SHIPMENT_TREND') {
const isEmpty = checkShipmentTrendDataEmpty(data) const isEmpty = checkShipmentTrendDataEmpty(data)
if (!isEmpty) { if (!isEmpty) {
updateShipmentTrendChart(data, v) updateShipmentTrendChart(data, v)
} }
updateChart(chartInstances[1], chartConfig2, isEmpty, true) updateChart(
chartInstances[1],
chartConfig2,
isEmpty,
true,
chartTimes2.value,
)
orderChart2Loading.value = !(data && data.length > 0) orderChart2Loading.value = !(data && data.length > 0)
} else { } else {
const isEmpty = checkOvertimeTrendDataEmpty(data) const isEmpty = checkOvertimeTrendDataEmpty(data)
...@@ -1104,6 +1140,7 @@ const getchartTimes = async (v: string, type: string) => { ...@@ -1104,6 +1140,7 @@ const getchartTimes = async (v: string, type: string) => {
chartConfig3, chartConfig3,
isEmpty, isEmpty,
true, true,
chartTimes3.value,
overtimeTooltipFormatter, overtimeTooltipFormatter,
) )
orderChart3Loading.value = !(data && data.length > 0) orderChart3Loading.value = !(data && data.length > 0)
...@@ -1114,11 +1151,15 @@ const getchartTimes = async (v: string, type: string) => { ...@@ -1114,11 +1151,15 @@ const getchartTimes = async (v: string, type: string) => {
} }
// 根据横坐标数据生成周期提示文字 // 根据横坐标数据生成周期提示文字
const generatePeriodText = (xAxisData: string[]): string => { const generatePeriodText = (timeRange: string): string => {
const startDate = xAxisData[0] if (timeRange === '0') {
const endDate = xAxisData[xAxisData.length - 1] return `当前周期（${yesterday} 至 ${today}）暂无订单数据\n\n请在订单流转后等待数据更新查看趋势`
} else if (timeRange === '1') {
return `当前周期（${startDate} 至 ${endDate}）暂无订单数据\n\n请在订单流转后等待数据更新查看趋势` return `当前周期（${lastWeek} 至 ${today}）暂无订单数据\n\n请在订单流转后等待数据更新查看趋势`
} else if (timeRange === '2') {
return `当前周期（${lastMonth} 至 ${today}）暂无订单数据\n\n请在订单流转后等待数据更新查看趋势`
}
return ''
} }
// 更新图表（统一处理空状态和正常状态） // 更新图表（统一处理空状态和正常状态）
...@@ -1127,11 +1168,12 @@ const updateChart = ( ...@@ -1127,11 +1168,12 @@ const updateChart = (
config: Ref<ChartConfig>, config: Ref<ChartConfig>,
isEmpty: boolean, isEmpty: boolean,
isPercent = false, isPercent = false,
timeRange: string,
customFormatter?: (params: TooltipParam[]) => string, customFormatter?: (params: TooltipParam[]) => string,
) => { ) => {
if (!instance) return if (!instance) return
if (isEmpty) { if (isEmpty) {
const periodText = generatePeriodText(config.value.xAxisData) const periodText = generatePeriodText(timeRange)
setNotopt(instance, config, periodText, isPercent) setNotopt(instance, config, periodText, isPercent)
} else { } else {
// 使用 notMerge: true 完全替换配置，确保从空状态切换回来时配置正确 // 使用 notMerge: true 完全替换配置，确保从空状态切换回来时配置正确
......
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