Skip to content

F
factory_front
Commit b13e4321 by wusiyi
Options

feat: 概览字段更新

parent c887e038
Showing with 261 additions and 188 deletions
src/views/Dashboard.vue
...@@ -6,11 +6,11 @@ ...@@ -6,11 +6,11 @@
<div class="card-container"> <div class="card-container">
<div class="card-item"> <div class="card-item">
<div class="card-item-header"> <div class="card-item-header">
<div class="card-title">今日新单（件/单）</div> <div class="card-title">今日新单（件/订单）</div>
<el-tooltip <el-tooltip
class="item" class="item"
effect="light" effect="light"
content="今日新增订单的订单数量" :content="`今日新增订单的订单数量（${today}北京时间 0-24点数据）`"
placement="bottom" placement="bottom"
> >
<div class="card-icon"></div> <div class="card-icon"></div>
...@@ -28,11 +28,11 @@ ...@@ -28,11 +28,11 @@
</div> </div>
<div class="card-item"> <div class="card-item">
<div class="card-item-header"> <div class="card-item-header">
<div class="card-title">今日接单（件/单）</div> <div class="card-title">今日接单（件/订单）</div>
<el-tooltip <el-tooltip
class="item" class="item"
effect="light" effect="light"
content="今日新增确认生产的订单数量" :content="`今日新增确认生产的订单数量（${today}北京时间 0-24点数据）`"
placement="bottom" placement="bottom"
> >
<div class="card-icon"></div> <div class="card-icon"></div>
...@@ -50,7 +50,7 @@ ...@@ -50,7 +50,7 @@
</div> </div>
<div class="card-item"> <div class="card-item">
<div class="card-item-header"> <div class="card-item-header">
<div class="card-title">未发货订单（单）</div> <div class="card-title">未发货订单（订单）</div>
<el-tooltip <el-tooltip
class="item" class="item"
effect="light" effect="light"
...@@ -68,7 +68,7 @@ ...@@ -68,7 +68,7 @@
</div> </div>
<div class="card-item"> <div class="card-item">
<div class="card-item-header"> <div class="card-item-header">
<div class="card-title">超时未发订单（单）</div> <div class="card-title">超时未发订单（订单）</div>
<el-tooltip <el-tooltip
class="item" class="item"
effect="light" effect="light"
...@@ -86,197 +86,240 @@ ...@@ -86,197 +86,240 @@
</div> </div>
</div> </div>
<div class="card-container" :gutter="20"> <div class="card-container" :gutter="20">
<div class="card-item"> <el-tooltip class="item" effect="light" placement="bottom-end">
<div class="card-item-header"> <template #content>
<div class="card-title">昨日发货数（单）</div> <div style="display: flex; align-items: center; gap: 4px">
<el-tooltip <div class="up-icon-green"></div>
class="item" <div>为正向趋势，</div>
effect="light" <div class="down-icon-red"></div>
content="昨日转为已发货状态的总订单数（昨日北京时间0-24点数据）" <div>为负向趋势</div>
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 ?? '-' }}
</div> </div>
<div class="card-item-content-text"> </template>
较前天 <div class="card-item">
<div <div class="card-item-header">
v-if=" <div class="card-title">昨日发货数（订单）</div>
statisticData && <el-tooltip
statisticData.compareYesterdayShipmentOrderNum >= 0 class="item"
" effect="light"
style="display: flex; margin-left: 10px" content="昨日转为已发货状态的总订单数（昨日北京时间0-24点数据）"
placement="bottom"
> >
<div class="text-red"> <div class="card-icon"></div>
{{ statisticData?.compareYesterdayShipmentOrderNum }} </el-tooltip>
</div> </div>
<div class="up-icon"></div> <div class="card-item-content-box">
<div v-auto-fit-text class="card-item-content text-blue">
{{ statisticData?.yesterdayShipmentOrderNum ?? '-' }}
</div> </div>
<div v-else style="display: flex; margin-left: 10px"> <div class="card-item-content-text">
<div class="text-green"> 较前天
{{ <div
Math.abs( v-if="
statisticData?.compareYesterdayShipmentOrderNum || 0, statisticData &&
) statisticData.compareYesterdayShipmentOrderNum >= 0
}} "
style="display: flex; margin-left: 10px"
>
<div class="text-green">
{{ statisticData?.compareYesterdayShipmentOrderNum }}
</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,
)
}}
</div>
<div class="down-icon-red"></div>
</div> </div>
<div class="down-icon"></div>
</div> </div>
</div> </div>
</div> </div>
</div> </el-tooltip>
<div class="card-item"> <el-tooltip class="item" effect="light" placement="bottom-end">
<div class="card-item-header"> <template #content>
<div class="card-title">24h发货率</div> <div style="display: flex; align-items: center; gap: 4px">
<el-tooltip <div class="up-icon-green"></div>
class="item" <div>为正向趋势，</div>
effect="light" <div class="down-icon-red"></div>
content="昨日已发货订单中从接单转为已发货状态在24小时内的比例（昨日北京时间0-24点数据）" <div>为负向趋势</div>
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 ?? '-') + '%' }}
</div> </div>
<div class="card-item-content-text"> </template>
较前天 <div class="card-item">
<div <div class="card-item-header">
v-if=" <div class="card-title">24h发货率</div>
statisticData && <el-tooltip
statisticData.compareLastDayShipmentRateOf24Hour >= 0 class="item"
" effect="light"
style="display: flex; margin-left: 10px" content="昨日已发货订单中从接单转为已发货状态在24小时内的比例（昨日北京时间0-24点数据）"
placement="bottom"
> >
<div class="text-red"> <div class="card-icon"></div>
{{ </el-tooltip>
(statisticData?.compareLastDayShipmentRateOf24Hour ?? </div>
'-') + '%' <div class="card-item-content-box">
}} <div v-auto-fit-text class="card-item-content text-blue">
</div> {{ (statisticData?.shipmentRateOf24Hour ?? '-') + '%' }}
<div class="up-icon"></div>
</div> </div>
<div v-else style="display: flex; margin-left: 10px"> <div class="card-item-content-text">
<div class="text-green"> 较前天
{{ <div
Math.abs( v-if="
statisticData?.compareLastDayShipmentRateOf24Hour || 0, statisticData &&
) + '%' statisticData.compareLastDayShipmentRateOf24Hour >= 0
}} "
style="display: flex; margin-left: 10px"
>
<div class="text-green">
{{
(statisticData?.compareLastDayShipmentRateOf24Hour ??
'-') + '%'
}}
</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,
) + '%'
}}
</div>
<div class="down-icon-red"></div>
</div> </div>
<div class="down-icon"></div>
</div> </div>
</div> </div>
</div> </div>
</div> </el-tooltip>
<div class="card-item"> <el-tooltip class="item" effect="light" placement="bottom-end">
<div class="card-item-header"> <template #content>
<div class="card-title">48h发货率</div> <div style="display: flex; align-items: center; gap: 4px">
<el-tooltip <div class="up-icon-green"></div>
class="item" <div>为正向趋势，</div>
effect="light" <div class="down-icon-red"></div>
content="昨日已发货订单中从接单转为已发货状态在48小时内的比例（昨日北京时间0-24点数据）" <div>为负向趋势</div>
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 ?? '-') + '%' }}
</div> </div>
<div class="card-item-content-text"> </template>
较前天 <div class="card-item">
<div <div class="card-item-header">
v-if=" <div class="card-title">48h发货率</div>
statisticData && <el-tooltip
statisticData.compareLastDayShipmentRateOf48Hour >= 0 class="item"
" effect="light"
style="display: flex; margin-left: 10px" :content="`昨日已发货订单中从接单转为已发货状态在48小时内的比例（${yesterday}北京时间 0-24点数据）`"
placement="bottom"
> >
<div class="text-red"> <div class="card-icon"></div>
{{ </el-tooltip>
(statisticData?.compareLastDayShipmentRateOf48Hour ?? </div>
'-') + '%' <div class="card-item-content-box">
}} <div v-auto-fit-text class="card-item-content text-blue">
</div> {{ (statisticData?.shipmentRateOf48Hour ?? '-') + '%' }}
<div class="up-icon"></div>
</div> </div>
<div v-else style="display: flex; margin-left: 10px"> <div class="card-item-content-text">
<div class="text-green"> 较前天
{{ <div
Math.abs( v-if="
statisticData?.compareLastDayShipmentRateOf48Hour || 0, statisticData &&
) + '%' statisticData.compareLastDayShipmentRateOf48Hour >= 0
}} "
style="display: flex; margin-left: 10px"
>
<div class="text-green">
{{
(statisticData?.compareLastDayShipmentRateOf48Hour ??
'-') + '%'
}}
</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,
) + '%'
}}
</div>
<div class="down-icon-red"></div>
</div> </div>
<div class="down-icon"></div>
</div> </div>
</div> </div>
</div> </div>
</div> </el-tooltip>
<div class="card-item"> <el-tooltip class="item" effect="light" placement="bottom-end">
<div class="card-item-header"> <template #content>
<div class="card-title">发货超时率</div> <div style="display: flex; align-items: center; gap: 4px">
<el-tooltip <div class="up-icon-red"></div>
class="item" <div>为正向趋势，</div>
effect="light" <div class="down-icon-green"></div>
content="昨日已发货订单中从接单转为已发货状态大于48小时的比例（昨日北京时间0-24点数据）" <div>为负向趋势</div>
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 ?? '-') +
')'
}}
</div> </div>
<div class="card-item-content-text"> </template>
较前天 <div class="card-item">
<div <div class="card-item-header">
v-if=" <div class="card-title">发货超时率</div>
statisticData && <el-tooltip
statisticData.compareLastDayOverTimeShipmentRate >= 0 class="item"
" effect="light"
style="display: flex; margin-left: 10px" :content="`昨日已发货订单中从接单转为已发货状态大于48小时的比例（${yesterday}北京时间 0-24点数据）`"
placement="bottom"
> >
<div class="text-red"> <div class="card-icon"></div>
{{ </el-tooltip>
(statisticData?.compareLastDayOverTimeShipmentRate ?? </div>
'-') + '%' <div class="card-item-content-box">
}} <div v-auto-fit-text class="card-item-content text-red">
</div> {{
<div class="up-icon"></div> (statisticData?.overTimeShipmentRate ?? '-') +
'%(' +
(statisticData?.yesterdayOverTimeShipmentOrderNum ?? '-') +
')'
}}
</div> </div>
<div v-else style="display: flex; margin-left: 10px"> <div class="card-item-content-text">
<div class="text-green"> 较前天
{{ <div
Math.abs( v-if="
statisticData?.compareLastDayOverTimeShipmentRate || 0, statisticData &&
) + '%' statisticData.compareLastDayOverTimeShipmentRate >= 0
}} "
style="display: flex; margin-left: 10px"
>
<div class="text-red">
{{
(statisticData?.compareLastDayOverTimeShipmentRate ??
'-') + '%'
}}
</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,
) + '%'
}}
</div>
<div class="down-icon-green"></div>
</div> </div>
<div class="down-icon"></div>
</div> </div>
</div> </div>
</div> </div>
</div> </el-tooltip>
</div> </div>
<div class="card-container"> <div class="card-container">
<div class="card-item"> <div class="card-item">
<div class="card-item-header"> <div class="card-item-header">
<div class="card-title">待创建物流（单）</div> <div class="card-title">待创建物流（订单）</div>
<el-tooltip <el-tooltip
class="item" class="item"
effect="light" effect="light"
...@@ -294,11 +337,11 @@ ...@@ -294,11 +337,11 @@
</div> </div>
<div class="card-item"> <div class="card-item">
<div class="card-item-header"> <div class="card-item-header">
<div class="card-title">待排单（单）</div> <div class="card-title">待排单（生产单）</div>
<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>
...@@ -312,7 +355,7 @@ ...@@ -312,7 +355,7 @@
</div> </div>
<div class="card-item"> <div class="card-item">
<div class="card-item-header"> <div class="card-item-header">
<div class="card-title">生产中（单）</div> <div class="card-title">生产中（生产单）</div>
<el-tooltip <el-tooltip
class="item" class="item"
effect="light" effect="light"
...@@ -330,7 +373,7 @@ ...@@ -330,7 +373,7 @@
</div> </div>
<div class="card-item"> <div class="card-item">
<div class="card-item-header"> <div class="card-item-header">
<div class="card-title">待发货（单）</div> <div class="card-title">待发货（订单）</div>
<el-tooltip <el-tooltip
class="item" class="item"
effect="light" effect="light"
...@@ -348,7 +391,7 @@ ...@@ -348,7 +391,7 @@
</div> </div>
<div class="card-item"> <div class="card-item">
<div class="card-item-header"> <div class="card-item-header">
<div class="card-title">拦截申请（单）</div> <div class="card-title">拦截申请（订单）</div>
<el-tooltip <el-tooltip
class="item" class="item"
effect="light" effect="light"
...@@ -366,7 +409,7 @@ ...@@ -366,7 +409,7 @@
</div> </div>
<div class="card-item"> <div class="card-item">
<div class="card-item-header"> <div class="card-item-header">
<div class="card-title">异常单（单）</div> <div class="card-title">异常单（订单）</div>
<el-tooltip <el-tooltip
class="item" class="item"
effect="light" effect="light"
...@@ -386,7 +429,7 @@ ...@@ -386,7 +429,7 @@
<div class="card-container"> <div class="card-container">
<div class="card-item"> <div class="card-item">
<div class="card-item-header"> <div class="card-item-header">
<div class="card-title">缺货中订单（单）</div> <div class="card-title">缺货中订单（订单）</div>
<el-tooltip <el-tooltip
class="item" class="item"
effect="light" effect="light"
...@@ -404,7 +447,7 @@ ...@@ -404,7 +447,7 @@
</div> </div>
<div class="card-item"> <div class="card-item">
<div class="card-item-header"> <div class="card-item-header">
<div class="card-title">缺货&lt;24h单（单）</div> <div class="card-title">缺货&lt;24h单（订单）</div>
<el-tooltip <el-tooltip
class="item" class="item"
effect="light" effect="light"
...@@ -422,7 +465,7 @@ ...@@ -422,7 +465,7 @@
</div> </div>
<div class="card-item"> <div class="card-item">
<div class="card-item-header"> <div class="card-item-header">
<div class="card-title">缺货&lt;48h单（单）</div> <div class="card-title">缺货&lt;48h单（订单）</div>
<el-tooltip <el-tooltip
class="item" class="item"
effect="light" effect="light"
...@@ -440,7 +483,7 @@ ...@@ -440,7 +483,7 @@
</div> </div>
<div class="card-item"> <div class="card-item">
<div class="card-item-header"> <div class="card-item-header">
<div class="card-title">缺货≥48h单（单）</div> <div class="card-title">缺货≥48h单（订单）</div>
<el-tooltip <el-tooltip
class="item" class="item"
effect="light" effect="light"
...@@ -593,6 +636,22 @@ echarts.use([ ...@@ -593,6 +636,22 @@ echarts.use([
UniversalTransition, 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) const statisticData = ref<StatisticData | null>(null)
...@@ -1166,19 +1225,6 @@ onBeforeUnmount(() => { ...@@ -1166,19 +1225,6 @@ onBeforeUnmount(() => {
white-space: nowrap; white-space: nowrap;
margin-bottom: 3px; 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 +1292,30 @@ onBeforeUnmount(() => { ...@@ -1246,3 +1292,30 @@ onBeforeUnmount(() => {
} }
} }
</style> </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