Skip to content

F
factory_front
Commit 9b07318f by wusiyi
Options

fix: 样式优化

parent 297cd6b7
Showing with 193 additions and 104 deletions
src/views/Dashboard.vue
...@@ -15,7 +15,7 @@ ...@@ -15,7 +15,7 @@
</el-tooltip> </el-tooltip>
</div> </div>
<div class="card-item-content-box"> <div class="card-item-content-box">
<div class="card-item-content text-blue"> <div v-auto-fit-text class="card-item-content text-blue">
{{ {{
(statisticData?.todayNewProductNum ?? '-') + (statisticData?.todayNewProductNum ?? '-') +
'/' + '/' +
...@@ -37,7 +37,7 @@ ...@@ -37,7 +37,7 @@
</el-tooltip> </el-tooltip>
</div> </div>
<div class="card-item-content-box"> <div class="card-item-content-box">
<div class="card-item-content text-blue"> <div v-auto-fit-text class="card-item-content text-blue">
{{ {{
(statisticData?.todayConfirmProductNum ?? '-') + (statisticData?.todayConfirmProductNum ?? '-') +
'/' + '/' +
...@@ -59,7 +59,7 @@ ...@@ -59,7 +59,7 @@
</el-tooltip> </el-tooltip>
</div> </div>
<div class="card-item-content-box"> <div class="card-item-content-box">
<div class="card-item-content text-blue"> <div v-auto-fit-text class="card-item-content text-blue">
{{ statisticData?.notShipmentOrderNum ?? '-' }} {{ statisticData?.notShipmentOrderNum ?? '-' }}
</div> </div>
</div> </div>
...@@ -77,7 +77,7 @@ ...@@ -77,7 +77,7 @@
</el-tooltip> </el-tooltip>
</div> </div>
<div class="card-item-content-box"> <div class="card-item-content-box">
<div class="card-item-content text-red"> <div v-auto-fit-text class="card-item-content text-red">
{{ statisticData?.overTimeNotShipmentOrderNum ?? '-' }} {{ statisticData?.overTimeNotShipmentOrderNum ?? '-' }}
</div> </div>
</div> </div>
...@@ -97,29 +97,31 @@ ...@@ -97,29 +97,31 @@
</el-tooltip> </el-tooltip>
</div> </div>
<div class="card-item-content-box"> <div class="card-item-content-box">
<div class="card-item-content text-blue"> <div v-auto-fit-text class="card-item-content text-blue">
{{ statisticData?.yesterdayShipmentOrderNum ?? '-' }} {{ statisticData?.yesterdayShipmentOrderNum ?? '-' }}
</div> </div>
<div class="card-item-content-text">较前天</div> <div class="card-item-content-text">
<div 较前天
v-if=" <div
statisticData && v-if="
statisticData.compareYesterdayShipmentOrderNum >= 0 statisticData &&
" statisticData.compareYesterdayShipmentOrderNum >= 0
style="display: flex; align-items: flex-end; gap: 5px" "
> style="display: flex; margin-left: 10px"
<div class="text-red" style="margin-bottom: -2px"> >
{{ statisticData?.compareYesterdayShipmentOrderNum }} <div class="text-red">
{{ statisticData?.compareYesterdayShipmentOrderNum }}
</div>
<div class="up-icon"></div>
</div> </div>
<div class="up-icon"></div> <div v-else style="display: flex; margin-left: 10px">
</div> <div class="text-green">
<div v-else style="display: flex; align-items: flex-end; gap: 5px"> {{
<div class="text-green" style="margin-bottom: -2px"> Math.abs(statisticData?.compareYesterdayShipmentOrderNum || 0)
{{ }}
Math.abs(statisticData?.compareYesterdayShipmentOrderNum || 0) </div>
}} <div class="down-icon"></div>
</div> </div>
<div class="down-icon"></div>
</div> </div>
</div> </div>
</div> </div>
...@@ -136,33 +138,36 @@ ...@@ -136,33 +138,36 @@
</el-tooltip> </el-tooltip>
</div> </div>
<div class="card-item-content-box"> <div class="card-item-content-box">
<div class="card-item-content text-blue"> <div v-auto-fit-text class="card-item-content text-blue">
{{ (statisticData?.shipmentRateOf24Hour ?? '-') + '%' }} {{ (statisticData?.shipmentRateOf24Hour ?? '-') + '%' }}
</div> </div>
<div class="card-item-content-text">较前天</div> <div class="card-item-content-text">
<div 较前天
v-if=" <div
statisticData && v-if="
statisticData.compareLastDayShipmentRateOf24Hour >= 0 statisticData &&
" statisticData.compareLastDayShipmentRateOf24Hour >= 0
style="display: flex; align-items: flex-end; gap: 5px" "
> style="display: flex; margin-left: 10px"
<div class="text-red" style="margin-bottom: -2px"> >
{{ <div class="text-red">
(statisticData?.compareLastDayShipmentRateOf24Hour ?? '-') + '%' {{
}} (statisticData?.compareLastDayShipmentRateOf24Hour ?? '-') +
'%'
}}
</div>
<div class="up-icon"></div>
</div> </div>
<div class="up-icon"></div> <div v-else style="display: flex; margin-left: 10px">
</div> <div class="text-green">
<div v-else style="display: flex; align-items: flex-end; gap: 5px"> {{
<div class="text-green" style="margin-bottom: -2px"> Math.abs(
{{ statisticData?.compareLastDayShipmentRateOf24Hour || 0,
Math.abs( ) + '%'
statisticData?.compareLastDayShipmentRateOf24Hour || 0, }}
) + '%' </div>
}} <div class="down-icon"></div>
</div> </div>
<div class="down-icon"></div>
</div> </div>
</div> </div>
</div> </div>
...@@ -179,33 +184,36 @@ ...@@ -179,33 +184,36 @@
</el-tooltip> </el-tooltip>
</div> </div>
<div class="card-item-content-box"> <div class="card-item-content-box">
<div class="card-item-content text-blue"> <div v-auto-fit-text class="card-item-content text-blue">
{{ (statisticData?.shipmentRateOf48Hour ?? '-') + '%' }} {{ (statisticData?.shipmentRateOf48Hour ?? '-') + '%' }}
</div> </div>
<div class="card-item-content-text">较前天</div> <div class="card-item-content-text">
<div 较前天
v-if=" <div
statisticData && v-if="
statisticData.compareLastDayShipmentRateOf48Hour >= 0 statisticData &&
" statisticData.compareLastDayShipmentRateOf48Hour >= 0
style="display: flex; align-items: flex-end; gap: 5px" "
> style="display: flex; margin-left: 10px"
<div class="text-red" style="margin-bottom: -2px"> >
{{ <div class="text-red">
(statisticData?.compareLastDayShipmentRateOf48Hour ?? '-') + '%' {{
}} (statisticData?.compareLastDayShipmentRateOf48Hour ?? '-') +
'%'
}}
</div>
<div class="up-icon"></div>
</div> </div>
<div class="up-icon"></div> <div v-else style="display: flex; margin-left: 10px">
</div> <div class="text-green">
<div v-else style="display: flex; align-items: flex-end; gap: 5px"> {{
<div class="text-green" style="margin-bottom: -2px"> Math.abs(
{{ statisticData?.compareLastDayShipmentRateOf48Hour || 0,
Math.abs( ) + '%'
statisticData?.compareLastDayShipmentRateOf48Hour || 0, }}
) + '%' </div>
}} <div class="down-icon"></div>
</div> </div>
<div class="down-icon"></div>
</div> </div>
</div> </div>
</div> </div>
...@@ -230,30 +238,33 @@ ...@@ -230,30 +238,33 @@
'）' '）'
}} }}
</div> </div>
<div class="card-item-content-text">较前天</div> <div class="card-item-content-text">
<div 较前天
v-if=" <div
statisticData && v-if="
statisticData.compareLastDayOverTimeShipmentRate >= 0 statisticData &&
" statisticData.compareLastDayOverTimeShipmentRate >= 0
style="display: flex; align-items: flex-end; gap: 5px" "
> style="display: flex; margin-left: 10px"
<div class="text-red" style="margin-bottom: -2px"> >
{{ <div class="text-red">
(statisticData?.compareLastDayOverTimeShipmentRate ?? '-') + '%' {{
}} (statisticData?.compareLastDayOverTimeShipmentRate ?? '-') +
'%'
}}
</div>
<div class="up-icon"></div>
</div> </div>
<div class="up-icon"></div> <div v-else style="display: flex; margin-left: 10px">
</div> <div class="text-green">
<div v-else style="display: flex; align-items: flex-end; gap: 5px"> {{
<div class="text-green" style="margin-bottom: -2px"> Math.abs(
{{ statisticData?.compareLastDayOverTimeShipmentRate || 0,
Math.abs( ) + '%'
statisticData?.compareLastDayOverTimeShipmentRate || 0, }}
) + '%' </div>
}} <div class="down-icon"></div>
</div> </div>
<div class="down-icon"></div>
</div> </div>
</div> </div>
</div> </div>
...@@ -272,7 +283,7 @@ ...@@ -272,7 +283,7 @@
</el-tooltip> </el-tooltip>
</div> </div>
<div class="card-item-content-box"> <div class="card-item-content-box">
<div class="card-item-content text-blue"> <div v-auto-fit-text class="card-item-content text-blue">
{{ statisticData?.waitCreateLogisticOrderNum ?? '-' }} {{ statisticData?.waitCreateLogisticOrderNum ?? '-' }}
</div> </div>
</div> </div>
...@@ -290,7 +301,7 @@ ...@@ -290,7 +301,7 @@
</el-tooltip> </el-tooltip>
</div> </div>
<div class="card-item-content-box"> <div class="card-item-content-box">
<div class="card-item-content text-blue"> <div v-auto-fit-text class="card-item-content text-blue">
{{ statisticData?.waitArrangeOrderNum ?? '-' }} {{ statisticData?.waitArrangeOrderNum ?? '-' }}
</div> </div>
</div> </div>
...@@ -308,7 +319,7 @@ ...@@ -308,7 +319,7 @@
</el-tooltip> </el-tooltip>
</div> </div>
<div class="card-item-content-box"> <div class="card-item-content-box">
<div class="card-item-content text-blue"> <div v-auto-fit-text class="card-item-content text-blue">
{{ statisticData?.producingOrderNum ?? '-' }} {{ statisticData?.producingOrderNum ?? '-' }}
</div> </div>
</div> </div>
...@@ -326,7 +337,7 @@ ...@@ -326,7 +337,7 @@
</el-tooltip> </el-tooltip>
</div> </div>
<div class="card-item-content-box"> <div class="card-item-content-box">
<div class="card-item-content text-blue"> <div v-auto-fit-text class="card-item-content text-blue">
{{ statisticData?.waitShipmentNum ?? '-' }} {{ statisticData?.waitShipmentNum ?? '-' }}
</div> </div>
</div> </div>
...@@ -344,7 +355,7 @@ ...@@ -344,7 +355,7 @@
</el-tooltip> </el-tooltip>
</div> </div>
<div class="card-item-content-box"> <div class="card-item-content-box">
<div class="card-item-content text-yellow"> <div v-auto-fit-text class="card-item-content text-yellow">
{{ statisticData?.blockApplyOrderNum ?? '-' }} {{ statisticData?.blockApplyOrderNum ?? '-' }}
</div> </div>
</div> </div>
...@@ -382,7 +393,7 @@ ...@@ -382,7 +393,7 @@
</el-tooltip> </el-tooltip>
</div> </div>
<div class="card-item-content-box"> <div class="card-item-content-box">
<div class="card-item-content text-yellow"> <div v-auto-fit-text class="card-item-content text-yellow">
{{ statisticData?.outOfStockOrderNum ?? '-' }} {{ statisticData?.outOfStockOrderNum ?? '-' }}
</div> </div>
</div> </div>
...@@ -400,7 +411,7 @@ ...@@ -400,7 +411,7 @@
</el-tooltip> </el-tooltip>
</div> </div>
<div class="card-item-content-box"> <div class="card-item-content-box">
<div class="card-item-content text-yellow"> <div v-auto-fit-text class="card-item-content text-yellow">
{{ statisticData?.outOfStock24HourOrderNum ?? '-' }} {{ statisticData?.outOfStock24HourOrderNum ?? '-' }}
</div> </div>
</div> </div>
...@@ -436,7 +447,7 @@ ...@@ -436,7 +447,7 @@
</el-tooltip> </el-tooltip>
</div> </div>
<div class="card-item-content-box"> <div class="card-item-content-box">
<div class="card-item-content text-red"> <div v-auto-fit-text class="card-item-content text-red">
{{ statisticData?.outOfStockOver48HourOrderNum ?? '-' }} {{ statisticData?.outOfStockOver48HourOrderNum ?? '-' }}
</div> </div>
</div> </div>
...@@ -454,7 +465,7 @@ ...@@ -454,7 +465,7 @@
</el-tooltip> </el-tooltip>
</div> </div>
<div class="card-item-content-box"> <div class="card-item-content-box">
<div class="card-item-content text-red"> <div v-auto-fit-text class="card-item-content text-red">
{{ statisticData?.outOfStockSkuNum ?? '-' }} {{ statisticData?.outOfStockSkuNum ?? '-' }}
</div> </div>
</div> </div>
...@@ -472,7 +483,7 @@ ...@@ -472,7 +483,7 @@
</el-tooltip> </el-tooltip>
</div> </div>
<div class="card-item-content-box"> <div class="card-item-content-box">
<div class="card-item-content text-yellow"> <div v-auto-fit-text class="card-item-content text-yellow">
{{ statisticData?.outOfStockProductNum ?? '-' }} {{ statisticData?.outOfStockProductNum ?? '-' }}
</div> </div>
</div> </div>
...@@ -791,6 +802,77 @@ const createChartOption = ( ...@@ -791,6 +802,77 @@ const createChartOption = (
} }
} }
// 自动缩放文字：保证卡片内数字不超出边框宽度，超出则减小字号
const adjustTextSize = (el: HTMLElement) => {
const maxFontSize = 38
const minFontSize = 16
const card = el.closest('.card-item') as HTMLElement | null
const containerWidth = card?.clientWidth ?? el.parentElement?.clientWidth ?? 0
// 获取 card-item-content-text 的实际宽度
const contentBox = el.parentElement
const contentText = contentBox?.querySelector(
'.card-item-content-text',
) as HTMLElement | null
let contentTextWidth = 0
let gap = 0
let marginRight = 0
if (contentText && contentBox) {
contentTextWidth = contentText.offsetWidth
// 获取 gap 值
const contentBoxStyle = window.getComputedStyle(contentBox)
gap = parseFloat(contentBoxStyle.gap) || 0
// 获取 margin-right 值
const contentTextStyle = window.getComputedStyle(contentText)
marginRight = parseFloat(contentTextStyle.marginRight) || 0
}
const limitWidth = containerWidth - contentTextWidth - gap - marginRight - 20
el.style.fontSize = `${maxFontSize}px`
let current = maxFontSize
while (current > minFontSize && el.scrollWidth > limitWidth) {
current -= 1
el.style.fontSize = `${current}px`
}
}
const vAutoFitText = {
mounted(el: HTMLElement) {
nextTick(() => {
adjustTextSize(el)
})
const card = el.closest('.card-item') as HTMLElement | null
if (card && 'ResizeObserver' in window) {
const observer = new ResizeObserver(() => {
adjustTextSize(el)
})
observer.observe(card)
;(el as { __autoFitObserver__?: ResizeObserver }).__autoFitObserver__ =
observer
}
},
updated(el: HTMLElement) {
nextTick(() => {
adjustTextSize(el)
})
},
unmounted(el: HTMLElement) {
const observer = (el as { __autoFitObserver__?: ResizeObserver })
.__autoFitObserver__
if (observer) {
observer.disconnect()
delete (el as { __autoFitObserver__?: ResizeObserver })
.__autoFitObserver__
}
},
}
const getStatisticDataApi = async () => { const getStatisticDataApi = async () => {
// 统计数据 // 统计数据
getStatisticData() getStatisticData()
...@@ -988,13 +1070,15 @@ onBeforeUnmount(() => { ...@@ -988,13 +1070,15 @@ onBeforeUnmount(() => {
box-sizing: border-box; box-sizing: border-box;
.card-item { .card-item {
min-width: 300px; min-width: 270px;
width: 20%; width: 20%;
min-width: 250px;
height: 90px; height: 90px;
background-color: #f7f7f7; background-color: #f7f7f7;
border-radius: 5px; border-radius: 5px;
padding: 8px 15px; padding: 8px 15px;
display: flex;
flex-direction: column;
justify-content: space-between;
.card-item-header { .card-item-header {
display: flex; display: flex;
...@@ -1023,12 +1107,17 @@ onBeforeUnmount(() => { ...@@ -1023,12 +1107,17 @@ onBeforeUnmount(() => {
.card-item-content { .card-item-content {
font-size: 38px; font-size: 38px;
font-weight: 500; font-weight: 500;
margin-bottom: -5px;
} }
.card-item-content-text { .card-item-content-text {
font-size: 14px; font-size: 14px;
color: #666; color: #666;
display: flex;
align-items: center;
margin-right: 10px;
width: 100%;
white-space: nowrap;
margin-bottom: 3px;
} }
.up-icon { .up-icon {
......
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