Skip to content

F
factory_front
Commit 05565f21 by qinjianhui
Options

fix: 样式修改

parent ce37c11e
Showing with 448 additions and 479 deletions
src/views/Dashboard.vue
<template> <template>
<div class="dashboard-wrapper"> <div class="dashboard-wrapper">
<div class="dashboard-title">核心数据看板</div> <div class="card-wrapper">
<el-row class="card-container" :gutter="20"> <div class="dashboard-title">核心数据看板</div>
<el-col :span="6"> <div class="card-container-wrapper">
<div class="card-item"> <div class="card-container">
<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">
</el-col> {{
<el-col :span="6"> (statisticData?.todayNewProductNum ?? '-') +
<div class="card-item"> '/' +
<div class="card-item-header"> (statisticData?.todayNewOrderNum ?? '-')
<div class="card-title">今日接单（件/单）</div> }}
<el-tooltip </div>
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?.todayConfirmProductNum ?? '-') +
'/' +
(statisticData?.todayConfirmOrderNum ?? '-')
}}
</div> </div>
</div> </div>
</div> <div class="card-item">
</el-col> <div class="card-item-header">
<el-col :span="6"> <div class="card-title">今日接单（件/单）</div>
<div class="card-item"> <el-tooltip
<div class="card-item-header"> class="item"
<div class="card-title">未发货订单（单）</div> effect="light"
<el-tooltip content="今日新增确认生产的订单数量"
class="item" placement="bottom"
effect="light" >
content="目前确认生产后还未转为已发货状态的总订单数" <div class="card-icon"></div>
placement="bottom" </el-tooltip>
> </div>
<div class="card-icon"></div> <div class="card-item-content-box">
</el-tooltip> <div v-auto-fit-text class="card-item-content text-blue">
</div> {{
<div class="card-item-content-box"> (statisticData?.todayConfirmProductNum ?? '-') +
<div v-auto-fit-text class="card-item-content text-blue"> '/' +
{{ statisticData?.notShipmentOrderNum ?? '-' }} (statisticData?.todayConfirmOrderNum ?? '-')
}}
</div>
</div> </div>
</div> </div>
</div> <div class="card-item">
</el-col> <div class="card-item-header">
<el-col :span="6"> <div class="card-title">未发货订单（单）</div>
<div class="card-item"> <el-tooltip
<div class="card-item-header"> class="item"
<div class="card-title">超时未发订单（单）</div> effect="light"
<el-tooltip content="目前确认生产后还未转为已发货状态的总订单数"
class="item" placement="bottom"
effect="light" >
content="目前确认生产后超过48H还未转为已发货状态的总订单数" <div class="card-icon"></div>
placement="bottom" </el-tooltip>
> </div>
<div class="card-icon"></div> <div class="card-item-content-box">
</el-tooltip> <div v-auto-fit-text class="card-item-content text-blue">
{{ statisticData?.notShipmentOrderNum ?? '-' }}
</div>
</div>
</div> </div>
<div class="card-item-content-box"> <div class="card-item">
<div v-auto-fit-text class="card-item-content text-red"> <div class="card-item-header">
{{ statisticData?.overTimeNotShipmentOrderNum ?? '-' }} <div class="card-title">超时未发订单（单）</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?.overTimeNotShipmentOrderNum ?? '-' }}
</div>
</div> </div>
</div> </div>
</div> </div>
</el-col> <div class="card-container" :gutter="20">
</el-row> <div class="card-item">
<el-row class="card-container" :gutter="20"> <div class="card-item-header">
<el-col :span="6"> <div class="card-title">昨日发货数（单）</div>
<div class="card-item"> <el-tooltip
<div class="card-item-header"> class="item"
<div class="card-title">昨日发货数（单）</div> effect="light"
<el-tooltip content="昨日转为已发货状态的总订单数（昨日北京时间0-24点数据）"
class="item" placement="bottom"
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 ?? '-' }}
</div>
<div class="card-item-content-text">
较前天
<div
v-if="
statisticData &&
statisticData.compareYesterdayShipmentOrderNum >= 0
"
style="display: flex; margin-left: 10px"
> >
<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-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> <div class="card-item">
</el-col> <div class="card-item-header">
<el-col :span="6"> <div class="card-title">24h发货率</div>
<div class="card-item"> <el-tooltip
<div class="card-item-header"> class="item"
<div class="card-title">24h发货率</div> effect="light"
<el-tooltip content="昨日已发货订单中从接单转为已发货状态在24小时内的比例（昨日北京时间0-24点数据）"
class="item" placement="bottom"
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 ?? '-') + '%' }}
</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> <div class="card-item">
</el-col> <div class="card-item-header">
<el-col :span="6"> <div class="card-title">48h发货率</div>
<div class="card-item"> <el-tooltip
<div class="card-item-header"> class="item"
<div class="card-title">48h发货率</div> effect="light"
<el-tooltip content="昨日已发货订单中从接单转为已发货状态在48小时内的比例（昨日北京时间0-24点数据）"
class="item" placement="bottom"
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 ?? '-') + '%' }}
</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> <div class="card-item">
</el-col> <div class="card-item-header">
<el-col :span="6"> <div class="card-title">发货超时率</div>
<div class="card-item"> <el-tooltip
<div class="card-item-header"> class="item"
<div class="card-title">发货超时率</div> effect="light"
<el-tooltip content="昨日已发货订单中从接单转为已发货状态大于48小时的比例（昨日北京时间0-24点数据）"
class="item" placement="bottom"
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 ?? '-') +
')'
}}
</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> </div>
</el-col> <div class="card-container">
</el-row> <div class="card-item">
<el-row class="card-container" :gutter="20"> <div class="card-item-header">
<el-col :span="6"> <div class="card-title">待创建物流（单）</div>
<div class="card-item"> <el-tooltip
<div class="card-item-header"> class="item"
<div class="card-title">待创建物流（单）</div> effect="light"
<el-tooltip content="目前订单中待创建物流的总订单数"
class="item" placement="bottom"
effect="light" >
content="目前订单中待创建物流的总订单数" <div class="card-icon"></div>
placement="bottom" </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-blue">
{{ statisticData?.waitCreateLogisticOrderNum ?? '-' }}
</div> </div>
</div> <div class="card-item-content-box">
</div> <div v-auto-fit-text class="card-item-content text-blue">
</el-col> {{ statisticData?.waitCreateLogisticOrderNum ?? '-' }}
<el-col :span="6"> </div>
<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-blue">
{{ statisticData?.waitArrangeOrderNum ?? '-' }}
</div> </div>
</div> </div>
</div> <div class="card-item">
</el-col> <div class="card-item-header">
<el-col :span="6"> <div class="card-title">待排单（单）</div>
<div class="card-item"> <el-tooltip
<div class="card-item-header"> class="item"
<div class="card-title">生产中（单）</div> effect="light"
<el-tooltip content="目前订单中待排单的总生产数"
class="item" placement="bottom"
effect="light" >
content="目前订单中排单完成后到发货前的总生产单数" <div class="card-icon"></div>
placement="bottom" </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-blue">
{{ statisticData?.producingOrderNum ?? '-' }}
</div> </div>
</div> <div class="card-item-content-box">
</div> <div v-auto-fit-text class="card-item-content text-blue">
</el-col> {{ statisticData?.waitArrangeOrderNum ?? '-' }}
<el-col :span="6"> </div>
<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-blue">
{{ statisticData?.waitShipmentNum ?? '-' }}
</div> </div>
</div> </div>
</div> <div class="card-item">
</el-col> <div class="card-item-header">
<el-col :span="6"> <div class="card-title">生产中（单）</div>
<div class="card-item"> <el-tooltip
<div class="card-item-header"> class="item"
<div class="card-title">拦截申请（单）</div> effect="light"
<el-tooltip content="目前订单中排单完成后到发货前的总生产单数"
class="item" placement="bottom"
effect="light" >
content="目前在生产拦截申请和发货拦截申请中的总订单数" <div class="card-icon"></div>
placement="bottom" </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 class="card-item-content-box">
</div> <div v-auto-fit-text class="card-item-content text-blue">
</el-col> {{ statisticData?.producingOrderNum ?? '-' }}
<el-col :span="6"> </div>
<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 class="card-item">
</el-col> <div class="card-item-header">
</el-row> <div class="card-title">待发货（单）</div>
<el-row class="card-container" :gutter="20"> <el-tooltip
<el-col :span="6"> class="item"
<div class="card-item"> effect="light"
<div class="card-item-header"> content="目前订单中待发货状态的总订单数"
<div class="card-title">缺货中订单（单）</div> placement="bottom"
<el-tooltip >
class="item" <div class="card-icon"></div>
effect="light" </el-tooltip>
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?.outOfStockOrderNum ?? '-' }}
</div> </div>
</div> <div class="card-item-content-box">
</div> <div v-auto-fit-text class="card-item-content text-blue">
</el-col> {{ statisticData?.waitShipmentNum ?? '-' }}
<el-col :span="6"> </div>
<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 class="card-item">
</el-col> <div class="card-item-header">
<el-col :span="6"> <div class="card-title">拦截申请（单）</div>
<div class="card-item"> <el-tooltip
<div class="card-item-header"> class="item"
<div class="card-title">缺货&lt;48h单（单）</div> effect="light"
<el-tooltip content="目前在生产拦截申请和发货拦截申请中的总订单数"
class="item" placement="bottom"
effect="light" >
content="缺货总订单中的缺货时长在48h内的订单数" <div class="card-icon"></div>
placement="bottom" </el-tooltip>
> </div>
<div class="card-icon"></div> <div class="card-item-content-box">
</el-tooltip> <div v-auto-fit-text class="card-item-content text-yellow">
{{ statisticData?.blockApplyOrderNum ?? '-' }}
</div>
</div>
</div> </div>
<div class="card-item-content-box"> <div class="card-item">
<div class="card-item-content text-yellow"> <div class="card-item-header">
{{ statisticData?.outOfStock48HourOrderNum ?? '-' }} <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> </div>
</el-col> <div class="card-container">
<el-col :span="6"> <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">缺货≥48h单（单）</div> <el-tooltip
<el-tooltip class="item"
class="item" effect="light"
effect="light" content="缺货统计中的商品总订单数"
content="缺货总订单中的缺货时长大于48h内的订单数" 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>
<div class="card-item-content-box"> <div class="card-item">
<div v-auto-fit-text class="card-item-content text-red"> <div class="card-item-header">
{{ statisticData?.outOfStockOver48HourOrderNum ?? '-' }} <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> <div class="card-item">
</el-col> <div class="card-item-header">
<el-col :span="6"> <div class="card-title">缺货&lt;48h单（单）</div>
<div class="card-item"> <el-tooltip
<div class="card-item-header"> class="item"
<div class="card-title">缺货库存SKU数</div> effect="light"
<el-tooltip content="缺货总订单中的缺货时长在48h内的订单数"
class="item" placement="bottom"
effect="light" >
content="缺货的库存SKU的总数目" <div class="card-icon"></div>
placement="bottom" </el-tooltip>
> </div>
<div class="card-icon"></div> <div class="card-item-content-box">
</el-tooltip> <div class="card-item-content text-yellow">
{{ statisticData?.outOfStock48HourOrderNum ?? '-' }}
</div>
</div>
</div> </div>
<div class="card-item-content-box"> <div class="card-item">
<div v-auto-fit-text class="card-item-content text-red"> <div class="card-item-header">
{{ statisticData?.outOfStockSkuNum ?? '-' }} <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> <div class="card-item">
</el-col> <div class="card-item-header">
<el-col :span="6"> <div class="card-title">缺货库存SKU数</div>
<div class="card-item"> <el-tooltip
<div class="card-item-header"> class="item"
<div class="card-title">缺货总件数</div> effect="light"
<el-tooltip content="缺货的库存SKU的总数目"
class="item" placement="bottom"
effect="light" >
content="缺货的货物总件数" <div class="card-icon"></div>
placement="bottom" </el-tooltip>
> </div>
<div class="card-icon"></div> <div class="card-item-content-box">
</el-tooltip> <div v-auto-fit-text class="card-item-content text-red">
{{ statisticData?.outOfStockSkuNum ?? '-' }}
</div>
</div>
</div> </div>
<div class="card-item-content-box"> <div class="card-item">
<div v-auto-fit-text class="card-item-content text-yellow"> <div class="card-item-header">
{{ statisticData?.outOfStockProductNum ?? '-' }} <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> </div>
</el-col> </div>
</el-row> </div>
<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"
...@@ -1129,22 +1093,27 @@ onBeforeUnmount(() => { ...@@ -1129,22 +1093,27 @@ onBeforeUnmount(() => {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.dashboard-title { .dashboard-title {
font-size: 22px; font-size: 20px;
font-weight: 600; font-weight: 600;
color: #333; color: #333;
margin: 0px 0 10px 20px; padding: 10px 20px;
}
.card-wrapper {
background-color: #fff;
}
.card-container-wrapper {
padding: 0 20px 20px;
} }
.card-container { .card-container {
padding: 15px 0 0 10px;
width: 100%; width: 100%;
margin-bottom: 10px;
background-color: #fff; background-color: #fff;
border-radius: 5px; border-radius: 5px;
box-sizing: border-box; box-sizing: border-box;
display: grid;
:deep(.el-col) { grid-template-columns: repeat(4, 1fr);
margin-bottom: 15px; gap: 20px;
&:not(:last-child) {
margin-bottom: 20px;
} }
.card-item { .card-item {
......
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