Skip to content

F
factory_front
Commit 6bd6dcd6 by wusiyi
Options

Merge branch 'dev_overview_charts' into release

parents f7920689 b9947670
Showing with 556 additions and 199 deletions
src/views/Dashboard.vue
......@@ -6,11 +6,11 @@
<div class="card-container">
<div class="card-item">
<div class="card-item-header">
<div class="card-title">今日新单（件/单）</div>
<div class="card-title">今日新单（件/订单）</div>
<el-tooltip
class="item"
effect="light"
content="今日新增订单的订单数量"
:content="`今日新增订单的订单数量（${today}北京时间 0-24点数据）`"
placement="bottom"
>
<div class="card-icon"></div>
......@@ -28,11 +28,11 @@
</div>
<div class="card-item">
<div class="card-item-header">
<div class="card-title">今日接单（件/单）</div>
<div class="card-title">今日接单（件/订单）</div>
<el-tooltip
class="item"
effect="light"
content="今日新增确认生产的订单数量"
:content="`今日新增确认生产的订单数量（${today}北京时间 0-24点数据）`"
placement="bottom"
>
<div class="card-icon"></div>
......@@ -50,7 +50,7 @@
</div>
<div class="card-item">
<div class="card-item-header">
<div class="card-title">未发货订单（单）</div>
<div class="card-title">未发货订单（订单）</div>
<el-tooltip
class="item"
effect="light"
......@@ -68,7 +68,7 @@
</div>
<div class="card-item">
<div class="card-item-header">
<div class="card-title">超时未发订单（单）</div>
<div class="card-title">超时未发订单（订单）</div>
<el-tooltip
class="item"
effect="light"
......@@ -86,197 +86,247 @@
</div>
</div>
<div class="card-container" :gutter="20">
<div class="card-item">
<div class="card-item-header">
<div class="card-title">昨日发货数（单）</div>
<el-tooltip
class="item"
effect="light"
content="昨日转为已发货状态的总订单数（昨日北京时间0-24点数据）"
placement="bottom"
>
<div class="card-icon"></div>
</el-tooltip>
</div>
<div class="card-item-content-box">
<div v-auto-fit-text class="card-item-content text-blue">
{{ statisticData?.yesterdayShipmentOrderNum ?? '-' }}
<el-tooltip class="item" effect="light" placement="bottom-end">
<template #content>
<div style="display: flex; align-items: center; gap: 4px">
<div class="up-icon-green"></div>
<div>为正向趋势，</div>
<div class="down-icon-red"></div>
<div>为负向趋势</div>
</div>
<div class="card-item-content-text">
较前天
<div
v-if="
statisticData &&
statisticData.compareYesterdayShipmentOrderNum >= 0
"
style="display: flex; margin-left: 10px"
</template>
<div class="card-item">
<div class="card-item-header">
<div class="card-title">昨日发货数（订单）</div>
<el-tooltip
class="item"
effect="light"
:content="`昨日转为已发货状态的总订单数（${yesterday}北京时间 0-24点数据）`"
placement="bottom"
>
<div class="text-red">
{{ statisticData?.compareYesterdayShipmentOrderNum }}
</div>
<div class="up-icon"></div>
<div class="card-icon"></div>
</el-tooltip>
</div>
<div class="card-item-content-box">
<div v-auto-fit-text class="card-item-content text-blue">
{{ statisticData?.yesterdayShipmentOrderNum ?? '-' }}
</div>
<div v-else style="display: flex; margin-left: 10px">
<div class="text-green">
{{
Math.abs(
statisticData?.compareYesterdayShipmentOrderNum || 0,
)
}}
<div class="card-item-content-text">
较前天
<div
v-if="
statisticData &&
statisticData.compareYesterdayShipmentOrderNum >= 0
"
style="display: flex; margin-left: 10px"
>
<div class="text-green">
{{
statisticData?.compareYesterdayShipmentOrderNum.toFixed(
2,
)
}}
</div>
<div class="up-icon-green"></div>
</div>
<div v-else style="display: flex; margin-left: 10px">
<div class="text-red">
{{
Math.abs(
statisticData?.compareYesterdayShipmentOrderNum || 0,
).toFixed(2)
}}
</div>
<div class="down-icon-red"></div>
</div>
<div class="down-icon"></div>
</div>
</div>
</div>
</div>
<div class="card-item">
<div class="card-item-header">
<div class="card-title">24h发货率</div>
<el-tooltip
class="item"
effect="light"
content="昨日已发货订单中从接单转为已发货状态在24小时内的比例（昨日北京时间0-24点数据）"
placement="bottom"
>
<div class="card-icon"></div>
</el-tooltip>
</div>
<div class="card-item-content-box">
<div v-auto-fit-text class="card-item-content text-blue">
{{ (statisticData?.shipmentRateOf24Hour ?? '-') + '%' }}
</el-tooltip>
<el-tooltip class="item" effect="light" placement="bottom-end">
<template #content>
<div style="display: flex; align-items: center; gap: 4px">
<div class="up-icon-green"></div>
<div>为正向趋势，</div>
<div class="down-icon-red"></div>
<div>为负向趋势</div>
</div>
<div class="card-item-content-text">
较前天
<div
v-if="
statisticData &&
statisticData.compareLastDayShipmentRateOf24Hour >= 0
"
style="display: flex; margin-left: 10px"
</template>
<div class="card-item">
<div class="card-item-header">
<div class="card-title">24h发货率</div>
<el-tooltip
class="item"
effect="light"
:content="`昨日已发货订单中从接单转为已发货状态在24小时内的比例（${yesterday}北京时间 0-24点数据）`"
placement="bottom"
>
<div class="text-red">
{{
(statisticData?.compareLastDayShipmentRateOf24Hour ??
'-') + '%'
}}
</div>
<div class="up-icon"></div>
<div class="card-icon"></div>
</el-tooltip>
</div>
<div class="card-item-content-box">
<div v-auto-fit-text class="card-item-content text-blue">
{{ (statisticData?.shipmentRateOf24Hour ?? '-') + '%' }}
</div>
<div v-else style="display: flex; margin-left: 10px">
<div class="text-green">
{{
Math.abs(
statisticData?.compareLastDayShipmentRateOf24Hour || 0,
) + '%'
}}
<div class="card-item-content-text">
较前天
<div
v-if="
statisticData &&
statisticData.compareLastDayShipmentRateOf24Hour >= 0
"
style="display: flex; margin-left: 10px"
>
<div class="text-green">
{{
(statisticData?.compareLastDayShipmentRateOf24Hour.toFixed(
2,
) ?? '-') + '%'
}}
</div>
<div class="up-icon-green"></div>
</div>
<div v-else style="display: flex; margin-left: 10px">
<div class="text-red">
{{
Math.abs(
statisticData?.compareLastDayShipmentRateOf24Hour ||
0,
).toFixed(2) + '%'
}}
</div>
<div class="down-icon-red"></div>
</div>
<div class="down-icon"></div>
</div>
</div>
</div>
</div>
<div class="card-item">
<div class="card-item-header">
<div class="card-title">48h发货率</div>
<el-tooltip
class="item"
effect="light"
content="昨日已发货订单中从接单转为已发货状态在48小时内的比例（昨日北京时间0-24点数据）"
placement="bottom"
>
<div class="card-icon"></div>
</el-tooltip>
</div>
<div class="card-item-content-box">
<div v-auto-fit-text class="card-item-content text-blue">
{{ (statisticData?.shipmentRateOf48Hour ?? '-') + '%' }}
</el-tooltip>
<el-tooltip class="item" effect="light" placement="bottom-end">
<template #content>
<div style="display: flex; align-items: center; gap: 4px">
<div class="up-icon-green"></div>
<div>为正向趋势，</div>
<div class="down-icon-red"></div>
<div>为负向趋势</div>
</div>
<div class="card-item-content-text">
较前天
<div
v-if="
statisticData &&
statisticData.compareLastDayShipmentRateOf48Hour >= 0
"
style="display: flex; margin-left: 10px"
</template>
<div class="card-item">
<div class="card-item-header">
<div class="card-title">48h发货率</div>
<el-tooltip
class="item"
effect="light"
:content="`昨日已发货订单中从接单转为已发货状态在48小时内的比例（${yesterday}北京时间 0-24点数据）`"
placement="bottom"
>
<div class="text-red">
{{
(statisticData?.compareLastDayShipmentRateOf48Hour ??
'-') + '%'
}}
</div>
<div class="up-icon"></div>
<div class="card-icon"></div>
</el-tooltip>
</div>
<div class="card-item-content-box">
<div v-auto-fit-text class="card-item-content text-blue">
{{ (statisticData?.shipmentRateOf48Hour ?? '-') + '%' }}
</div>
<div v-else style="display: flex; margin-left: 10px">
<div class="text-green">
{{
Math.abs(
statisticData?.compareLastDayShipmentRateOf48Hour || 0,
) + '%'
}}
<div class="card-item-content-text">
较前天
<div
v-if="
statisticData &&
statisticData.compareLastDayShipmentRateOf48Hour >= 0
"
style="display: flex; margin-left: 10px"
>
<div class="text-green">
{{
(statisticData?.compareLastDayShipmentRateOf48Hour.toFixed(
2,
) ?? '-') + '%'
}}
</div>
<div class="up-icon-green"></div>
</div>
<div v-else style="display: flex; margin-left: 10px">
<div class="text-red">
{{
Math.abs(
statisticData?.compareLastDayShipmentRateOf48Hour ||
0,
).toFixed(2) + '%'
}}
</div>
<div class="down-icon-red"></div>
</div>
<div class="down-icon"></div>
</div>
</div>
</div>
</div>
<div class="card-item">
<div class="card-item-header">
<div class="card-title">发货超时率</div>
<el-tooltip
class="item"
effect="light"
content="昨日已发货订单中从接单转为已发货状态大于48小时的比例（昨日北京时间0-24点数据）"
placement="bottom"
>
<div class="card-icon"></div>
</el-tooltip>
</div>
<div class="card-item-content-box">
<div v-auto-fit-text class="card-item-content text-red">
{{
(statisticData?.overTimeShipmentRate ?? '-') +
'%(' +
(statisticData?.yesterdayOverTimeShipmentOrderNum ?? '-') +
')'
}}
</el-tooltip>
<el-tooltip class="item" effect="light" placement="bottom-end">
<template #content>
<div style="display: flex; align-items: center; gap: 4px">
<div class="down-icon-green"></div>
<div>为正向趋势，</div>
<div class="up-icon-red"></div>
<div>为负向趋势</div>
</div>
<div class="card-item-content-text">
较前天
<div
v-if="
statisticData &&
statisticData.compareLastDayOverTimeShipmentRate >= 0
"
style="display: flex; margin-left: 10px"
</template>
<div class="card-item">
<div class="card-item-header">
<div class="card-title">发货超时率</div>
<el-tooltip
class="item"
effect="light"
:content="`昨日已发货订单中从接单转为已发货状态大于48小时的比例（${yesterday}北京时间 0-24点数据）`"
placement="bottom"
>
<div class="text-red">
{{
(statisticData?.compareLastDayOverTimeShipmentRate ??
'-') + '%'
}}
</div>
<div class="up-icon"></div>
<div class="card-icon"></div>
</el-tooltip>
</div>
<div class="card-item-content-box">
<div v-auto-fit-text class="card-item-content text-red">
{{
(statisticData?.overTimeShipmentRate ?? '-') +
'%(' +
(statisticData?.yesterdayOverTimeShipmentOrderNum ?? '-') +
')'
}}
</div>
<div v-else style="display: flex; margin-left: 10px">
<div class="text-green">
{{
Math.abs(
statisticData?.compareLastDayOverTimeShipmentRate || 0,
) + '%'
}}
<div class="card-item-content-text">
较前天
<div
v-if="
statisticData &&
statisticData.compareLastDayOverTimeShipmentRate >= 0
"
style="display: flex; margin-left: 10px"
>
<div class="text-red">
{{
(statisticData?.compareLastDayOverTimeShipmentRate.toFixed(
2,
) ?? '-') + '%'
}}
</div>
<div class="up-icon-red"></div>
</div>
<div v-else style="display: flex; margin-left: 10px">
<div class="text-green">
{{
Math.abs(
statisticData?.compareLastDayOverTimeShipmentRate ||
0,
).toFixed(2) + '%'
}}
</div>
<div class="down-icon-green"></div>
</div>
<div class="down-icon"></div>
</div>
</div>
</div>
</div>
</el-tooltip>
</div>
<div class="card-container">
<div class="card-item">
<div class="card-item-header">
<div class="card-title">待创建物流（单）</div>
<div class="card-title">待创建物流（订单）</div>
<el-tooltip
class="item"
effect="light"
......@@ -294,11 +344,11 @@
</div>
<div class="card-item">
<div class="card-item-header">
<div class="card-title">待排单（单）</div>
<div class="card-title">待排单（生产单）</div>
<el-tooltip
class="item"
effect="light"
content="目前订单中待排单的总生产数"
content="目前订单中待排单的总生产单数"
placement="bottom"
>
<div class="card-icon"></div>
......@@ -312,7 +362,7 @@
</div>
<div class="card-item">
<div class="card-item-header">
<div class="card-title">生产中（单）</div>
<div class="card-title">生产中（生产单）</div>
<el-tooltip
class="item"
effect="light"
......@@ -330,7 +380,7 @@
</div>
<div class="card-item">
<div class="card-item-header">
<div class="card-title">待发货（单）</div>
<div class="card-title">待发货（订单）</div>
<el-tooltip
class="item"
effect="light"
......@@ -348,7 +398,7 @@
</div>
<div class="card-item">
<div class="card-item-header">
<div class="card-title">拦截申请（单）</div>
<div class="card-title">拦截申请（订单）</div>
<el-tooltip
class="item"
effect="light"
......@@ -366,11 +416,11 @@
</div>
<div class="card-item">
<div class="card-item-header">
<div class="card-title">异常单（单）</div>
<div class="card-title">异常单（订单）</div>
<el-tooltip
class="item"
effect="light"
content="所有订单中的异常单总单数"
content="所有订单中的异常单总订单数"
placement="bottom"
>
<div class="card-icon"></div>
......@@ -386,7 +436,7 @@
<div class="card-container">
<div class="card-item">
<div class="card-item-header">
<div class="card-title">缺货中订单（单）</div>
<div class="card-title">缺货中订单（订单）</div>
<el-tooltip
class="item"
effect="light"
......@@ -404,7 +454,7 @@
</div>
<div class="card-item">
<div class="card-item-header">
<div class="card-title">缺货&lt;24h单（单）</div>
<div class="card-title">缺货&lt;24h单（订单）</div>
<el-tooltip
class="item"
effect="light"
......@@ -422,7 +472,7 @@
</div>
<div class="card-item">
<div class="card-item-header">
<div class="card-title">缺货&lt;48h单（单）</div>
<div class="card-title">缺货&lt;48h单（订单）</div>
<el-tooltip
class="item"
effect="light"
......@@ -440,7 +490,7 @@
</div>
<div class="card-item">
<div class="card-item-header">
<div class="card-title">缺货≥48h单（单）</div>
<div class="card-title">缺货≥48h单（订单）</div>
<el-tooltip
class="item"
effect="light"
......@@ -593,6 +643,22 @@ echarts.use([
UniversalTransition,
])
const today = new Date()
.toLocaleDateString('zh-CN', {
year: 'numeric',
month: '2-digit',
day: '2-digit',
})
.replace(/\//g, '-')
const yesterday = new Date(new Date().setDate(new Date().getDate() - 1))
.toLocaleDateString('zh-CN', {
year: 'numeric',
month: '2-digit',
day: '2-digit',
})
.replace(/\//g, '-')
// 获取统计数据
const statisticData = ref<StatisticData | null>(null)
......@@ -755,7 +821,6 @@ const createChartOption = (
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true,
},
xAxis: {
type: 'category',
......@@ -918,9 +983,16 @@ const getStatisticDataApi = async () => {
})
.then((res) => {
if (res.code === 200) {
const isEmpty = checkOrderTrendDataEmpty(res.data)
// 无论数据是否为空，都要更新 x 轴数据
updateOrderTrendChart(res.data, 0)
chartInstances[0]?.setOption(createChartOption(chartConfig1))
// 无数据时保持 loading，有数据则关闭
updateChart(
chartInstances[0],
chartConfig1,
isEmpty,
false,
chartTimes1.value,
)
orderChart1Loading.value = !(res.data && res.data.length > 0)
}
})
......@@ -935,8 +1007,16 @@ const getStatisticDataApi = async () => {
})
.then((res) => {
if (res.code === 200) {
const isEmpty = checkShipmentTrendDataEmpty(res.data)
// 无论数据是否为空，都要更新 x 轴数据
updateShipmentTrendChart(res.data, 0)
chartInstances[1]?.setOption(createChartOption(chartConfig2, true))
updateChart(
chartInstances[1],
chartConfig2,
isEmpty,
true,
chartTimes2.value,
)
orderChart2Loading.value = !(res.data && res.data.length > 0)
}
})
......@@ -951,9 +1031,17 @@ const getStatisticDataApi = async () => {
})
.then((res) => {
if (res.code === 200) {
const isEmpty = checkOvertimeTrendDataEmpty(res.data)
// 无论数据是否为空，都要更新 x 轴数据
updateOvertimeTrendChart(res.data, 0)
chartInstances[2]?.setOption(
createChartOption(chartConfig3, true, overtimeTooltipFormatter),
updateChart(
chartInstances[2],
chartConfig3,
isEmpty,
true,
chartTimes3.value,
overtimeTooltipFormatter,
)
orderChart3Loading.value = !(res.data && res.data.length > 0)
}
......@@ -1004,17 +1092,40 @@ const getchartTimes = async (v: string, type: string) => {
trendType: type,
})
if (type == 'ORDER_TREND') {
const isEmpty = checkOrderTrendDataEmpty(data)
// 无论数据是否为空，都要更新 x 轴数据
updateOrderTrendChart(data, v)
chartInstances[0]?.setOption(createChartOption(chartConfig1))
updateChart(
chartInstances[0],
chartConfig1,
isEmpty,
false,
chartTimes1.value,
)
orderChart1Loading.value = !(data && data.length > 0)
} else if (type == 'SHIPMENT_TREND') {
const isEmpty = checkShipmentTrendDataEmpty(data)
// 无论数据是否为空，都要更新 x 轴数据
updateShipmentTrendChart(data, v)
chartInstances[1]?.setOption(createChartOption(chartConfig2, true))
updateChart(
chartInstances[1],
chartConfig2,
isEmpty,
true,
chartTimes2.value,
)
orderChart2Loading.value = !(data && data.length > 0)
} else {
const isEmpty = checkOvertimeTrendDataEmpty(data)
// 无论数据是否为空，都要更新 x 轴数据
updateOvertimeTrendChart(data, v)
chartInstances[2]?.setOption(
createChartOption(chartConfig3, true, overtimeTooltipFormatter),
updateChart(
chartInstances[2],
chartConfig3,
isEmpty,
true,
chartTimes3.value,
overtimeTooltipFormatter,
)
orderChart3Loading.value = !(data && data.length > 0)
}
......@@ -1023,6 +1134,217 @@ const getchartTimes = async (v: string, type: string) => {
}
}
// 空数据提示文字
const generatePeriodText = (timeRange: string): string => {
if (timeRange === '0') {
const startTime = new Date(new Date().setDate(new Date().getDate() - 14))
.toLocaleDateString('zh-CN', {
year: 'numeric',
month: '2-digit',
day: '2-digit',
})
.replace(/\//g, '-')
return `当前周期（${startTime} 至 ${yesterday}）暂无订单数据\n\n请在订单流转后等待数据更新查看趋势`
} else if (timeRange === '1') {
// 8周前该周周一的日期
const now = new Date()
const eightWeeksAgo = new Date(now.getTime() - 8 * 7 * 24 * 60 * 60 * 1000)
const dayOfWeek = eightWeeksAgo.getDay() // 0=周日, 1=周一, ..., 6=周六
const daysToMonday = dayOfWeek === 0 ? -6 : 1 - dayOfWeek // 如果是周日，往前6天；否则往前到周一
const mondayDate = new Date(
eightWeeksAgo.getTime() + daysToMonday * 24 * 60 * 60 * 1000,
)
const startTime = mondayDate
.toLocaleDateString('zh-CN', {
year: 'numeric',
month: '2-digit',
day: '2-digit',
})
.replace(/\//g, '-')
// 上个周日的日期
const today = new Date()
const todayDayOfWeek = today.getDay() // 0=周日, 1=周一, ..., 6=周六
const daysToLastSunday = todayDayOfWeek === 0 ? -7 : -todayDayOfWeek // 如果是周日，往前7天；否则往前到上一个周日
const lastSunday = new Date(
today.getTime() + daysToLastSunday * 24 * 60 * 60 * 1000,
)
const endTime = lastSunday
.toLocaleDateString('zh-CN', {
year: 'numeric',
month: '2-digit',
day: '2-digit',
})
.replace(/\//g, '-')
return `当前周期（${startTime} 至 ${endTime}）暂无订单数据\n\n请在订单流转后等待数据更新查看趋势`
} else if (timeRange === '2') {
// 六个月前该月第一天的日期
const now = new Date()
const sixMonthsAgo = new Date(now.getFullYear(), now.getMonth() - 6, 1)
const startTime = sixMonthsAgo
.toLocaleDateString('zh-CN', {
year: 'numeric',
month: '2-digit',
day: '2-digit',
})
.replace(/\//g, '-')
// 上一月第一天的日期
const currentDate = new Date()
const lastMonthFirstDay = new Date(
currentDate.getFullYear(),
currentDate.getMonth() - 1,
1,
)
const endTime = lastMonthFirstDay
.toLocaleDateString('zh-CN', {
year: 'numeric',
month: '2-digit',
day: '2-digit',
})
.replace(/\//g, '-')
return `当前周期（${startTime} 至 ${endTime}）暂无订单数据\n\n请在订单流转后等待数据更新查看趋势`
}
return ''
}
// 更新图表（统一处理空状态和正常状态）
const updateChart = (
instance: echarts.ECharts | null,
config: Ref<ChartConfig>,
isEmpty: boolean,
isPercent = false,
timeRange: string,
customFormatter?: (params: TooltipParam[]) => string,
) => {
if (!instance) return
if (isEmpty) {
const periodText = generatePeriodText(timeRange)
setNotopt(instance, config, periodText, isPercent)
} else {
// 使用 notMerge: true 完全替换配置，确保从空状态切换回来时配置正确
instance.setOption(
createChartOption(config, isPercent, customFormatter),
true,
)
}
}
// 图表空状态
const setNotopt = (
demo: echarts.ECharts | null,
config: Ref<ChartConfig>,
subtext = '暂无数据',
isPercent = false,
) => {
if (!demo) return
const chartData = config.value
const option = {
title: [
{
text: chartData.title,
left: 'left',
},
{
text: ' {a|}',
x: 'center',
y: 'center',
subtext,
itemGap: -20,
textStyle: {
rich: {
a: {
color: '#000',
fontSize: '16',
height: 120,
width: 220,
backgroundColor: {
image:
'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjQiIGhlaWdodD0iNDEiIHZpZXdCb3g9IjAgMCA2NCA0MSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCiAgPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCAxKSIgZmlsbD0ibm9uZSIgZmlsbFJ1bGU9ImV2ZW5vZGQiPg0KICAgIDxlbGxpcHNlIGZpbGw9IiNkZGQiIGN4PSIzMiIgY3k9IjMzIiByeD0iMzIiIHJ5PSI3IiAvPg0KICAgIDxnIGZpbGxSdWxlPSJub256ZXJvIiBzdHJva2U9IiM5OTkiPg0KICAgICAgPHBhdGgNCiAgICAgICAgZD0iTTU1IDEyLjc2TDQ0Ljg1NCAxLjI1OEM0NC4zNjcuNDc0IDQzLjY1NiAwIDQyLjkwNyAwSDIxLjA5M2MtLjc0OSAwLTEuNDYuNDc0LTEuOTQ3IDEuMjU3TDkgMTIuNzYxVjIyaDQ2di05LjI0eiIgLz4NCiAgICAgIDxwYXRoDQogICAgICAgIGQ9Ik00MS42MTMgMTUuOTMxYzAtMS42MDUuOTk0LTIuOTMgMi4yMjctMi45MzFINTV2MTguMTM3QzU1IDMzLjI2IDUzLjY4IDM1IDUyLjA1IDM1aC00MC4xQzEwLjMyIDM1IDkgMzMuMjU5IDkgMzEuMTM3VjEzaDExLjE2YzEuMjMzIDAgMi4yMjcgMS4zMjMgMi4yMjcgMi45Mjh2LjAyMmMwIDEuNjA1IDEuMDA1IDIuOTAxIDIuMjM3IDIuOTAxaDE0Ljc1MmMxLjIzMiAwIDIuMjM3LTEuMzA4IDIuMjM3LTIuOTEzdi0uMDA3eiINCiAgICAgICAgZmlsbD0iI2UxZTFlMSIgLz4NCiAgICA8L2c+DQogIDwvZz4NCjwvc3ZnPg==',
},
},
},
},
subtextStyle: {
fontSize: 16,
},
},
],
// 图例
legend: {
data: chartData.legend,
top: 'top',
left: 'center',
},
// 横坐标
xAxis: {
type: 'category',
boundaryGap: false,
data: chartData.xAxisData,
axisLabel: {
overflow: 'truncate',
width: 120,
formatter: function (value: string) {
if (value.length > 10) {
return value.substring(0, 10) + '...'
}
return value
},
},
},
// 网格配置
grid: {
left: '3%',
right: '4%',
bottom: '3%',
},
// 纵坐标，默认范围从0到1
yAxis: {
type: 'value',
min: 0,
max: 1,
axisLabel: isPercent
? {
formatter: '{value}%',
color: '#666',
}
: {
color: '#666',
},
axisLine: {
lineStyle: { color: '#ccc' },
},
splitLine: {
show: false,
},
},
// 清空 series 数据
series: chartData.series.map((item) => ({
name: item.name,
type: 'line',
data: [],
color: item.color,
})),
}
demo.setOption(option, true)
}
// 检查订单趋势数据是否为空
const checkOrderTrendDataEmpty = (data: trendType[]): boolean => {
const confirmNums = data.map((el) => el.confirmNum)
const produceNums = data.map((el) => el.produceNum)
const shipmentNums = data.map((el) => el.shipmentNum)
const hasData =
confirmNums.some((item) => item !== 0) ||
produceNums.some((item) => item !== 0) ||
shipmentNums.some((item) => item !== 0)
return !hasData
}
// 更新订单趋势图表数据
const updateOrderTrendChart = (data: trendType[], type: number | string) => {
const confirmNums = data.map((el) => el.confirmNum)
const produceNums = data.map((el) => el.produceNum)
......@@ -1035,11 +1357,23 @@ const updateOrderTrendChart = (data: trendType[], type: number | string) => {
} else {
chartConfig1.value.xAxisData = timerange
}
chartConfig1.value.series[0].data = confirmNums
chartConfig1.value.series[1].data = produceNums
chartConfig1.value.series[2].data = shipmentNums
}
// 检查发货效率数据是否为空
const checkShipmentTrendDataEmpty = (data: trendType[]): boolean => {
const shipmentRateOf24Hours = data.map((el) => el.shipmentRateOf24Hour)
const shipmentRateOf48Hours = data.map((el) => el.shipmentRateOf48Hour)
const hasData =
shipmentRateOf24Hours.some((item) => item !== 0) ||
shipmentRateOf48Hours.some((item) => item !== 0)
return !hasData
}
// 更新发货效率图表数据
const updateShipmentTrendChart = (data: trendType[], type: number | string) => {
const shipmentRateOf24Hours = data.map((el) => el.shipmentRateOf24Hour)
const shipmentRateOf48Hours = data.map((el) => el.shipmentRateOf48Hour)
......@@ -1056,6 +1390,14 @@ const updateShipmentTrendChart = (data: trendType[], type: number | string) => {
chartConfig2.value.series[1].data = shipmentRateOf48Hours
}
// 检查超时情况数据是否为空
const checkOvertimeTrendDataEmpty = (data: trendType[]): boolean => {
const overtimeShipmentRates = data.map((el) => el.overtimeShipmentRate)
const hasData = overtimeShipmentRates.some((item) => item !== 0)
return !hasData
}
// 更新超时情况图表数据
const updateOvertimeTrendChart = (data: trendType[], type: number | string) => {
const overtimeShipmentOrderNums = data.map(
(el) => el.overtimeShipmentOrderNum,
......@@ -1069,6 +1411,7 @@ const updateOvertimeTrendChart = (data: trendType[], type: number | string) => {
} else {
chartConfig3.value.xAxisData = timerange
}
chartConfig3.value.series[0].data = overtimeShipmentRates.map(
(rate, idx) => ({
value: rate,
......@@ -1166,19 +1509,6 @@ onBeforeUnmount(() => {
white-space: nowrap;
margin-bottom: 3px;
}
.up-icon {
width: 18px;
height: 18px;
background-size: 100% 100%;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 24 24'%3E%3Cpath fill='%23f56c6c' d='M12.725 2.451a.75.75 0 0 0-1.007-.013L3.504 9.69A.75.75 0 0 0 4 11.003h4.382c.138 1.255.057 2.576-.252 3.969c-.318 1.434-1.722 3.25-4.515 5.438a.75.75 0 0 0 .535 1.337c3.311-.322 6.112-1.537 8.365-3.662c2.08-1.963 3.228-4.334 3.422-7.082H20a.75.75 0 0 0 .511-1.299z'/%3E%3C/svg%3E");
}
.down-icon {
width: 18px;
height: 18px;
background-size: 100% 100%;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 24 24'%3E%3Cpath fill='%2367C23A' d='M4.15 2.253a.75.75 0 0 0-.535 1.337C6.408 5.778 7.812 7.594 8.13 9.028c.309 1.393.39 2.714.252 3.969H4a.75.75 0 0 0-.496 1.312l8.214 7.253a.75.75 0 0 0 1.007-.013l7.786-7.253a.75.75 0 0 0-.511-1.3h-4.063c-.194-2.747-1.342-5.118-3.422-7.08C10.262 3.79 7.46 2.574 4.15 2.252'/%3E%3C/svg%3E");
}
}
}
}
......@@ -1246,3 +1576,30 @@ onBeforeUnmount(() => {
}
}
</style>
<style lang="scss">
.up-icon-red {
width: 18px;
height: 18px;
background-size: 100% 100%;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 24 24'%3E%3Cpath fill='%23f56c6c' d='M12.725 2.451a.75.75 0 0 0-1.007-.013L3.504 9.69A.75.75 0 0 0 4 11.003h4.382c.138 1.255.057 2.576-.252 3.969c-.318 1.434-1.722 3.25-4.515 5.438a.75.75 0 0 0 .535 1.337c3.311-.322 6.112-1.537 8.365-3.662c2.08-1.963 3.228-4.334 3.422-7.082H20a.75.75 0 0 0 .511-1.299z'/%3E%3C/svg%3E");
}
.up-icon-green {
width: 18px;
height: 18px;
background-size: 100% 100%;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2367C23A' d='M12.725 2.451a.75.75 0 0 0-1.007-.013L3.504 9.69A.75.75 0 0 0 4 11.003h4.382c.138 1.255.057 2.576-.252 3.969c-.318 1.434-1.722 3.25-4.515 5.438a.75.75 0 0 0 .535 1.337c3.311-.322 6.112-1.537 8.365-3.662c2.08-1.963 3.228-4.334 3.422-7.082H20a.75.75 0 0 0 .511-1.299z'/%3E%3C/svg%3E");
}
.down-icon-green {
width: 18px;
height: 18px;
background-size: 100% 100%;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 24 24'%3E%3Cpath fill='%2367C23A' d='M4.15 2.253a.75.75 0 0 0-.535 1.337C6.408 5.778 7.812 7.594 8.13 9.028c.309 1.393.39 2.714.252 3.969H4a.75.75 0 0 0-.496 1.312l8.214 7.253a.75.75 0 0 0 1.007-.013l7.786-7.253a.75.75 0 0 0-.511-1.3h-4.063c-.194-2.747-1.342-5.118-3.422-7.08C10.262 3.79 7.46 2.574 4.15 2.252'/%3E%3C/svg%3E");
}
.down-icon-red {
width: 18px;
height: 18px;
background-size: 100% 100%;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23F56C6C' d='M4.15 2.253a.75.75 0 0 0-.535 1.337C6.408 5.778 7.812 7.594 8.13 9.028c.309 1.393.39 2.714.252 3.969H4a.75.75 0 0 0-.496 1.312l8.214 7.253a.75.75 0 0 0 1.007-.013l7.786-7.253a.75.75 0 0 0-.511-1.3h-4.063c-.194-2.747-1.342-5.118-3.422-7.08C10.262 3.79 7.46 2.574 4.15 2.252'/%3E%3C/svg%3E");
}
</style>
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