Skip to content

F
factory_front
Commit fd8d42df by wusiyi
Options

feat: 概览样式修改

parent 5d26f16f
Showing with 486 additions and 449 deletions
src/views/Dashboard.vue
<template> <template>
<div class="dashboard-wrapper"> <div class="dashboard-wrapper">
<div class="dashboard-title">核心数据看板</div> <div class="dashboard-title">核心数据看板</div>
<div class="card-container"> <el-row class="card-container" :gutter="20">
<div class="card-item"> <el-col :span="6">
<div class="card-item-header"> <div class="card-item">
<div class="card-title">今日新单（件/单）</div> <div class="card-item-header">
<el-tooltip <div class="card-title">今日新单（件/单）</div>
class="item" <el-tooltip
effect="light" class="item"
content="今日新增订单的订单数量" effect="light"
placement="bottom" content="今日新增订单的订单数量"
> placement="bottom"
<div class="card-icon"></div> >
</el-tooltip> <div class="card-icon"></div>
</div> </el-tooltip>
<div class="card-item-content-box">
<div v-auto-fit-text class="card-item-content text-blue">
{{
(statisticData?.todayNewProductNum ?? '-') +
'/' +
(statisticData?.todayNewOrderNum ?? '-')
}}
</div> </div>
</div> <div class="card-item-content-box">
</div> <div v-auto-fit-text class="card-item-content text-blue">
<div class="card-item"> {{
<div class="card-item-header"> (statisticData?.todayNewProductNum ?? '-') +
<div class="card-title">今日接单（件/单）</div> '/' +
<el-tooltip (statisticData?.todayNewOrderNum ?? '-')
class="item" }}
effect="light" </div>
content="今日新增确认生产的订单数量"
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?.todayConfirmProductNum ?? '-') +
'/' +
(statisticData?.todayConfirmOrderNum ?? '-')
}}
</div> </div>
</div> </div>
</div> </el-col>
<div class="card-item"> <el-col :span="6">
<div class="card-item-header"> <div class="card-item">
<div class="card-title">未发货订单（单）</div> <div class="card-item-header">
<el-tooltip <div class="card-title">今日接单（件/单）</div>
class="item" <el-tooltip
effect="light" class="item"
content="目前确认生产后还未转为已发货状态的总订单数" effect="light"
placement="bottom" content="今日新增确认生产的订单数量"
> placement="bottom"
<div class="card-icon"></div> >
</el-tooltip> <div class="card-icon"></div>
</div> </el-tooltip>
<div class="card-item-content-box">
<div v-auto-fit-text class="card-item-content text-blue">
{{ statisticData?.notShipmentOrderNum ?? '-' }}
</div> </div>
</div> <div class="card-item-content-box">
</div> <div v-auto-fit-text class="card-item-content text-blue">
<div class="card-item"> {{
<div class="card-item-header"> (statisticData?.todayConfirmProductNum ?? '-') +
<div class="card-title">超时未发订单（单）</div> '/' +
<el-tooltip (statisticData?.todayConfirmOrderNum ?? '-')
class="item" }}
effect="light" </div>
content="目前确认生产后超过48H还未转为已发货状态的总订单数"
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?.overTimeNotShipmentOrderNum ?? '-' }}
</div> </div>
</div> </div>
</div> </el-col>
</div> <el-col :span="6">
<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="昨日转为已发货状态的总订单数（昨日北京时间0-24点数据）" placement="bottom"
placement="bottom" >
> <div class="card-icon"></div>
<div class="card-icon"></div> </el-tooltip>
</el-tooltip> </div>
<div class="card-item-content-box">
<div v-auto-fit-text class="card-item-content text-blue">
{{ statisticData?.notShipmentOrderNum ?? '-' }}
</div>
</div>
</div> </div>
<div class="card-item-content-box"> </el-col>
<div v-auto-fit-text class="card-item-content text-blue"> <el-col :span="6">
{{ statisticData?.yesterdayShipmentOrderNum ?? '-' }} <div class="card-item">
<div class="card-item-header">
<div class="card-title">超时未发订单（单）</div>
<el-tooltip
class="item"
effect="light"
content="目前确认生产后超过48H还未转为已发货状态的总订单数"
placement="bottom"
>
<div class="card-icon"></div>
</el-tooltip>
</div> </div>
<div class="card-item-content-text"> <div class="card-item-content-box">
较前天 <div v-auto-fit-text class="card-item-content text-red">
<div {{ statisticData?.overTimeNotShipmentOrderNum ?? '-' }}
v-if=" </div>
statisticData && </div>
statisticData.compareYesterdayShipmentOrderNum >= 0 </div>
" </el-col>
style="display: flex; margin-left: 10px" </el-row>
<el-row class="card-container" :gutter="20">
<el-col :span="6">
<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="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(statisticData?.compareYesterdayShipmentOrderNum || 0) v-if="
}} statisticData &&
statisticData.compareYesterdayShipmentOrderNum >= 0
"
style="display: flex; margin-left: 10px"
>
<div class="text-red">
{{ statisticData?.compareYesterdayShipmentOrderNum }}
</div>
<div class="up-icon"></div>
</div>
<div v-else style="display: flex; margin-left: 10px">
<div class="text-green">
{{
Math.abs(
statisticData?.compareYesterdayShipmentOrderNum || 0,
)
}}
</div>
<div class="down-icon"></div>
</div> </div>
<div class="down-icon"></div>
</div> </div>
</div> </div>
</div> </div>
</div> </el-col>
<div class="card-item"> <el-col :span="6">
<div class="card-item-header"> <div class="card-item">
<div class="card-title">24h发货率</div> <div class="card-item-header">
<el-tooltip <div class="card-title">24h发货率</div>
class="item" <el-tooltip
effect="light" class="item"
content="昨日已发货订单中从接单转为已发货状态在24小时内的比例（昨日北京时间0-24点数据）" effect="light"
placement="bottom" 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 ?? '-') + '%' }}
</div>
<div class="card-item-content-text">
较前天
<div
v-if="
statisticData &&
statisticData.compareLastDayShipmentRateOf24Hour >= 0
"
style="display: flex; margin-left: 10px"
> >
<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-red">
{{
(statisticData?.compareLastDayShipmentRateOf24Hour ?? '-') +
'%'
}}
</div>
<div class="up-icon"></div>
</div>
<div v-else style="display: flex; margin-left: 10px">
<div class="text-green">
{{
Math.abs(
statisticData?.compareLastDayShipmentRateOf24Hour || 0,
) + '%'
}}
</div>
<div class="down-icon"></div>
</div> </div>
<div class="down-icon"></div>
</div> </div>
</div> </div>
</div> </div>
</div> </el-col>
<div class="card-item"> <el-col :span="6">
<div class="card-item-header"> <div class="card-item">
<div class="card-title">48h发货率</div> <div class="card-item-header">
<el-tooltip <div class="card-title">48h发货率</div>
class="item" <el-tooltip
effect="light" class="item"
content="昨日已发货订单中从接单转为已发货状态在48小时内的比例（昨日北京时间0-24点数据）" effect="light"
placement="bottom" 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 ?? '-') + '%' }}
</div>
<div class="card-item-content-text">
较前天
<div
v-if="
statisticData &&
statisticData.compareLastDayShipmentRateOf48Hour >= 0
"
style="display: flex; margin-left: 10px"
> >
<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-red">
{{
(statisticData?.compareLastDayShipmentRateOf48Hour ?? '-') +
'%'
}}
</div>
<div class="up-icon"></div>
</div>
<div v-else style="display: flex; margin-left: 10px">
<div class="text-green">
{{
Math.abs(
statisticData?.compareLastDayShipmentRateOf48Hour || 0,
) + '%'
}}
</div>
<div class="down-icon"></div>
</div> </div>
<div class="down-icon"></div>
</div> </div>
</div> </div>
</div> </div>
</div> </el-col>
<div class="card-item"> <el-col :span="6">
<div class="card-item-header"> <div class="card-item">
<div class="card-title">发货超时率</div> <div class="card-item-header">
<el-tooltip <div class="card-title">发货超时率</div>
class="item" <el-tooltip
effect="light" class="item"
content="昨日已发货订单中从接单转为已发货状态大于48小时的比例（昨日北京时间0-24点数据）" effect="light"
placement="bottom" 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 ?? '-') +
')'
}}
</div>
<div class="card-item-content-text">
较前天
<div
v-if="
statisticData &&
statisticData.compareLastDayOverTimeShipmentRate >= 0
"
style="display: flex; margin-left: 10px"
> >
<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"></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"></div>
</div> </div>
<div class="down-icon"></div>
</div> </div>
</div> </div>
</div> </div>
</div> </el-col>
</div> </el-row>
<div class="card-container"> <el-row class="card-container" :gutter="20">
<div class="card-item"> <el-col :span="6">
<div class="card-item-header"> <div class="card-item">
<div class="card-title">待创建物流（单）</div> <div class="card-item-header">
<el-tooltip <div class="card-title">待创建物流（单）</div>
class="item" <el-tooltip
effect="light" class="item"
content="目前订单中待创建物流的总订单数" effect="light"
placement="bottom" content="目前订单中待创建物流的总订单数"
> placement="bottom"
<div class="card-icon"></div> >
</el-tooltip> <div class="card-icon"></div>
</div> </el-tooltip>
<div class="card-item-content-box">
<div v-auto-fit-text class="card-item-content text-blue">
{{ statisticData?.waitCreateLogisticOrderNum ?? '-' }}
</div> </div>
</div> <div class="card-item-content-box">
</div> <div v-auto-fit-text class="card-item-content text-blue">
<div class="card-item"> {{ statisticData?.waitCreateLogisticOrderNum ?? '-' }}
<div class="card-item-header"> </div>
<div class="card-title">待排单（单）</div>
<el-tooltip
class="item"
effect="light"
content="目前订单中待排单的总生产数"
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?.waitArrangeOrderNum ?? '-' }}
</div> </div>
</div> </div>
</div> </el-col>
<div class="card-item"> <el-col :span="6">
<div class="card-item-header"> <div class="card-item">
<div class="card-title">生产中（单）</div> <div class="card-item-header">
<el-tooltip <div class="card-title">待排单（单）</div>
class="item" <el-tooltip
effect="light" class="item"
content="目前订单中排单完成后到发货前的总生产单数" effect="light"
placement="bottom" content="目前订单中待排单的总生产数"
> placement="bottom"
<div class="card-icon"></div> >
</el-tooltip> <div class="card-icon"></div>
</div> </el-tooltip>
<div class="card-item-content-box">
<div v-auto-fit-text class="card-item-content text-blue">
{{ statisticData?.producingOrderNum ?? '-' }}
</div> </div>
</div> <div class="card-item-content-box">
</div> <div v-auto-fit-text class="card-item-content text-blue">
<div class="card-item"> {{ statisticData?.waitArrangeOrderNum ?? '-' }}
<div class="card-item-header"> </div>
<div class="card-title">待发货（单）</div>
<el-tooltip
class="item"
effect="light"
content="目前订单中待发货状态的总订单数"
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?.waitShipmentNum ?? '-' }}
</div> </div>
</div> </div>
</div> </el-col>
<div class="card-item"> <el-col :span="6">
<div class="card-item-header"> <div class="card-item">
<div class="card-title">拦截申请（单）</div> <div class="card-item-header">
<el-tooltip <div class="card-title">生产中（单）</div>
class="item" <el-tooltip
effect="light" class="item"
content="目前在生产拦截申请和发货拦截申请中的总订单数" effect="light"
placement="bottom" content="目前订单中排单完成后到发货前的总生产单数"
> placement="bottom"
<div class="card-icon"></div> >
</el-tooltip> <div class="card-icon"></div>
</div> </el-tooltip>
<div class="card-item-content-box">
<div v-auto-fit-text class="card-item-content text-yellow">
{{ statisticData?.blockApplyOrderNum ?? '-' }}
</div> </div>
</div> <div class="card-item-content-box">
</div> <div v-auto-fit-text class="card-item-content text-blue">
<div class="card-item"> {{ statisticData?.producingOrderNum ?? '-' }}
<div class="card-item-header"> </div>
<div class="card-title">异常单（单）</div>
<el-tooltip
class="item"
effect="light"
content="所有订单中的异常单总单数"
placement="bottom"
>
<div class="card-icon"></div>
</el-tooltip>
</div>
<div class="card-item-content-box">
<div class="card-item-content text-red">
{{ statisticData?.exceptionOrderNum ?? '-' }}
</div> </div>
</div> </div>
</div> </el-col>
</div> <el-col :span="6">
<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="缺货统计中的商品总订单数" placement="bottom"
placement="bottom" >
> <div class="card-icon"></div>
<div class="card-icon"></div> </el-tooltip>
</el-tooltip>
</div>
<div class="card-item-content-box">
<div v-auto-fit-text class="card-item-content text-yellow">
{{ statisticData?.outOfStockOrderNum ?? '-' }}
</div> </div>
</div> <div class="card-item-content-box">
</div> <div v-auto-fit-text class="card-item-content text-blue">
<div class="card-item"> {{ statisticData?.waitShipmentNum ?? '-' }}
<div class="card-item-header"> </div>
<div class="card-title">缺货&lt;24h单（单）</div>
<el-tooltip
class="item"
effect="light"
content="缺货总订单中的缺货时长在24h内的订单数"
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-yellow">
{{ statisticData?.outOfStock24HourOrderNum ?? '-' }}
</div> </div>
</div> </div>
</div> </el-col>
<div class="card-item"> <el-col :span="6">
<div class="card-item-header"> <div class="card-item">
<div class="card-title">缺货&lt;48h单（单）</div> <div class="card-item-header">
<el-tooltip <div class="card-title">拦截申请（单）</div>
class="item" <el-tooltip
effect="light" class="item"
content="缺货总订单中的缺货时长在48h内的订单数" effect="light"
placement="bottom" content="目前在生产拦截申请和发货拦截申请中的总订单数"
> placement="bottom"
<div class="card-icon"></div> >
</el-tooltip> <div class="card-icon"></div>
</el-tooltip>
</div>
<div class="card-item-content-box">
<div v-auto-fit-text class="card-item-content text-yellow">
{{ statisticData?.blockApplyOrderNum ?? '-' }}
</div>
</div>
</div> </div>
<div class="card-item-content-box"> </el-col>
<div class="card-item-content text-yellow"> <el-col :span="6">
{{ statisticData?.outOfStock48HourOrderNum ?? '-' }} <div class="card-item">
<div class="card-item-header">
<div class="card-title">异常单（单）</div>
<el-tooltip
class="item"
effect="light"
content="所有订单中的异常单总单数"
placement="bottom"
>
<div class="card-icon"></div>
</el-tooltip>
</div>
<div class="card-item-content-box">
<div class="card-item-content text-red">
{{ statisticData?.exceptionOrderNum ?? '-' }}
</div>
</div> </div>
</div> </div>
</div> </el-col>
<div class="card-item"> </el-row>
<div class="card-item-header"> <el-row class="card-container" :gutter="20">
<div class="card-title">缺货≥48h单（单）</div> <el-col :span="6">
<el-tooltip <div class="card-item">
class="item" <div class="card-item-header">
effect="light" <div class="card-title">缺货中订单（单）</div>
content="缺货总订单中的缺货时长大于48h内的订单数" <el-tooltip
placement="bottom" class="item"
> effect="light"
<div class="card-icon"></div> content="缺货统计中的商品总订单数"
</el-tooltip> 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-yellow">
{{ statisticData?.outOfStockOrderNum ?? '-' }}
</div>
</div>
</div> </div>
<div class="card-item-content-box"> </el-col>
<div v-auto-fit-text class="card-item-content text-red"> <el-col :span="6">
{{ statisticData?.outOfStockOver48HourOrderNum ?? '-' }} <div class="card-item">
<div class="card-item-header">
<div class="card-title">缺货&lt;24h单（单）</div>
<el-tooltip
class="item"
effect="light"
content="缺货总订单中的缺货时长在24h内的订单数"
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-yellow">
{{ statisticData?.outOfStock24HourOrderNum ?? '-' }}
</div>
</div> </div>
</div> </div>
</div> </el-col>
<div class="card-item"> <el-col :span="6">
<div class="card-item-header"> <div class="card-item">
<div class="card-title">缺货库存SKU数</div> <div class="card-item-header">
<el-tooltip <div class="card-title">缺货&lt;48h单（单）</div>
class="item" <el-tooltip
effect="light" class="item"
content="缺货的库存SKU的总数目" effect="light"
placement="bottom" content="缺货总订单中的缺货时长在48h内的订单数"
> placement="bottom"
<div class="card-icon"></div> >
</el-tooltip> <div class="card-icon"></div>
</el-tooltip>
</div>
<div class="card-item-content-box">
<div class="card-item-content text-yellow">
{{ statisticData?.outOfStock48HourOrderNum ?? '-' }}
</div>
</div>
</div> </div>
<div class="card-item-content-box"> </el-col>
<div v-auto-fit-text class="card-item-content text-red"> <el-col :span="6">
{{ statisticData?.outOfStockSkuNum ?? '-' }} <div class="card-item">
<div class="card-item-header">
<div class="card-title">缺货≥48h单（单）</div>
<el-tooltip
class="item"
effect="light"
content="缺货总订单中的缺货时长大于48h内的订单数"
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?.outOfStockOver48HourOrderNum ?? '-' }}
</div>
</div> </div>
</div> </div>
</div> </el-col>
<div class="card-item"> <el-col :span="6">
<div class="card-item-header"> <div class="card-item">
<div class="card-title">缺货总件数</div> <div class="card-item-header">
<el-tooltip <div class="card-title">缺货库存SKU数</div>
class="item" <el-tooltip
effect="light" class="item"
content="缺货的货物总件数" effect="light"
placement="bottom" content="缺货的库存SKU的总数目"
> placement="bottom"
<div class="card-icon"></div> >
</el-tooltip> <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?.outOfStockSkuNum ?? '-' }}
</div>
</div>
</div> </div>
<div class="card-item-content-box"> </el-col>
<div v-auto-fit-text class="card-item-content text-yellow"> <el-col :span="6">
{{ statisticData?.outOfStockProductNum ?? '-' }} <div class="card-item">
<div class="card-item-header">
<div class="card-title">缺货总件数</div>
<el-tooltip
class="item"
effect="light"
content="缺货的货物总件数"
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-yellow">
{{ statisticData?.outOfStockProductNum ?? '-' }}
</div>
</div> </div>
</div> </div>
</div> </el-col>
</div> </el-row>
<div class="chart-wrapper" style="width: 100%"> <div class="chart-wrapper" style="width: 100%">
<el-radio-group <el-radio-group
v-model="chartTimes1" v-model="chartTimes1"
...@@ -824,7 +866,7 @@ const createChartOption = ( ...@@ -824,7 +866,7 @@ const createChartOption = (
// 自动缩放文字：保证卡片内数字不超出边框宽度，超出则减小字号 // 自动缩放文字：保证卡片内数字不超出边框宽度，超出则减小字号
const adjustTextSize = (el: HTMLElement) => { const adjustTextSize = (el: HTMLElement) => {
const maxFontSize = 38 const maxFontSize = 45
const minFontSize = 16 const minFontSize = 16
const card = el.closest('.card-item') as HTMLElement | null const card = el.closest('.card-item') as HTMLElement | null
...@@ -1087,28 +1129,27 @@ onBeforeUnmount(() => { ...@@ -1087,28 +1129,27 @@ onBeforeUnmount(() => {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.dashboard-title { .dashboard-title {
font-size: 18px; font-size: 22px;
font-weight: 600; font-weight: 600;
color: #333; color: #333;
margin-bottom: 10px; margin: 0px 0 10px 20px;
} }
.card-container { .card-container {
padding: 12px 2%; padding: 15px 0 0 10px;
width: 100%; width: 100%;
display: flex; margin-bottom: 10px;
flex-wrap: wrap;
justify-content: flex-start;
margin-bottom: 15px;
gap: 15px 6%;
background-color: #fff; background-color: #fff;
border-radius: 5px; border-radius: 5px;
box-sizing: border-box; box-sizing: border-box;
:deep(.el-col) {
margin-bottom: 15px;
}
.card-item { .card-item {
min-width: 270px; min-width: 270px;
width: 20%; height: 120px;
height: 90px;
background-color: #f7f7f7; background-color: #f7f7f7;
border-radius: 5px; border-radius: 5px;
padding: 8px 15px; padding: 8px 15px;
...@@ -1121,7 +1162,7 @@ onBeforeUnmount(() => { ...@@ -1121,7 +1162,7 @@ onBeforeUnmount(() => {
align-items: center; align-items: center;
.card-title { .card-title {
font-size: 14px; font-size: 18px;
font-weight: 600; font-weight: 600;
color: #333; color: #333;
} }
...@@ -1141,7 +1182,7 @@ onBeforeUnmount(() => { ...@@ -1141,7 +1182,7 @@ onBeforeUnmount(() => {
gap: 10px; gap: 10px;
.card-item-content { .card-item-content {
font-size: 38px; font-size: 50px;
font-weight: 500; font-weight: 500;
white-space: nowrap; white-space: nowrap;
} }
...@@ -1190,14 +1231,10 @@ onBeforeUnmount(() => { ...@@ -1190,14 +1231,10 @@ onBeforeUnmount(() => {
} }
.dashboard-wrapper { .dashboard-wrapper {
padding: 0 10px;
height: 100%; height: 100%;
width: 100%; width: 100%;
margin: 0 auto; margin: 0 auto;
overflow-x: hidden; overflow-x: hidden;
background-color: #fafafa;
padding: 10px 40px;
border-radius: 5px;
} }
.chart-wrapper { .chart-wrapper {
......
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