Skip to content

F
factory_front
Commit fd8d42df by wusiyi
Options

feat: 概览样式修改

parent 5d26f16f
Showing with 63 additions and 26 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">
<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">今日新单（件/单）</div>
...@@ -24,6 +25,8 @@ ...@@ -24,6 +25,8 @@
</div> </div>
</div> </div>
</div> </div>
</el-col>
<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">今日接单（件/单）</div>
...@@ -46,6 +49,8 @@ ...@@ -46,6 +49,8 @@
</div> </div>
</div> </div>
</div> </div>
</el-col>
<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">未发货订单（单）</div>
...@@ -64,6 +69,8 @@ ...@@ -64,6 +69,8 @@
</div> </div>
</div> </div>
</div> </div>
</el-col>
<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">超时未发订单（单）</div>
...@@ -82,8 +89,10 @@ ...@@ -82,8 +89,10 @@
</div> </div>
</div> </div>
</div> </div>
</div> </el-col>
<div class="card-container"> </el-row>
<el-row class="card-container" :gutter="20">
<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">昨日发货数（单）</div>
...@@ -117,7 +126,9 @@ ...@@ -117,7 +126,9 @@
<div v-else style="display: flex; margin-left: 10px"> <div v-else style="display: flex; margin-left: 10px">
<div class="text-green"> <div class="text-green">
{{ {{
Math.abs(statisticData?.compareYesterdayShipmentOrderNum || 0) Math.abs(
statisticData?.compareYesterdayShipmentOrderNum || 0,
)
}} }}
</div> </div>
<div class="down-icon"></div> <div class="down-icon"></div>
...@@ -125,6 +136,8 @@ ...@@ -125,6 +136,8 @@
</div> </div>
</div> </div>
</div> </div>
</el-col>
<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">24h发货率</div> <div class="card-title">24h发货率</div>
...@@ -171,6 +184,8 @@ ...@@ -171,6 +184,8 @@
</div> </div>
</div> </div>
</div> </div>
</el-col>
<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">48h发货率</div> <div class="card-title">48h发货率</div>
...@@ -217,6 +232,8 @@ ...@@ -217,6 +232,8 @@
</div> </div>
</div> </div>
</div> </div>
</el-col>
<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">发货超时率</div>
...@@ -268,8 +285,10 @@ ...@@ -268,8 +285,10 @@
</div> </div>
</div> </div>
</div> </div>
</div> </el-col>
<div class="card-container"> </el-row>
<el-row class="card-container" :gutter="20">
<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">待创建物流（单）</div>
...@@ -288,6 +307,8 @@ ...@@ -288,6 +307,8 @@
</div> </div>
</div> </div>
</div> </div>
</el-col>
<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">待排单（单）</div>
...@@ -306,6 +327,8 @@ ...@@ -306,6 +327,8 @@
</div> </div>
</div> </div>
</div> </div>
</el-col>
<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">生产中（单）</div>
...@@ -324,6 +347,8 @@ ...@@ -324,6 +347,8 @@
</div> </div>
</div> </div>
</div> </div>
</el-col>
<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">待发货（单）</div>
...@@ -342,6 +367,8 @@ ...@@ -342,6 +367,8 @@
</div> </div>
</div> </div>
</div> </div>
</el-col>
<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">拦截申请（单）</div>
...@@ -360,6 +387,8 @@ ...@@ -360,6 +387,8 @@
</div> </div>
</div> </div>
</div> </div>
</el-col>
<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">异常单（单）</div>
...@@ -378,8 +407,10 @@ ...@@ -378,8 +407,10 @@
</div> </div>
</div> </div>
</div> </div>
</div> </el-col>
<div class="card-container"> </el-row>
<el-row class="card-container" :gutter="20">
<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">缺货中订单（单）</div>
...@@ -398,6 +429,8 @@ ...@@ -398,6 +429,8 @@
</div> </div>
</div> </div>
</div> </div>
</el-col>
<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">缺货&lt;24h单（单）</div> <div class="card-title">缺货&lt;24h单（单）</div>
...@@ -416,6 +449,8 @@ ...@@ -416,6 +449,8 @@
</div> </div>
</div> </div>
</div> </div>
</el-col>
<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">缺货&lt;48h单（单）</div> <div class="card-title">缺货&lt;48h单（单）</div>
...@@ -434,6 +469,8 @@ ...@@ -434,6 +469,8 @@
</div> </div>
</div> </div>
</div> </div>
</el-col>
<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">缺货≥48h单（单）</div> <div class="card-title">缺货≥48h单（单）</div>
...@@ -452,6 +489,8 @@ ...@@ -452,6 +489,8 @@
</div> </div>
</div> </div>
</div> </div>
</el-col>
<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">缺货库存SKU数</div> <div class="card-title">缺货库存SKU数</div>
...@@ -470,6 +509,8 @@ ...@@ -470,6 +509,8 @@
</div> </div>
</div> </div>
</div> </div>
</el-col>
<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">缺货总件数</div>
...@@ -488,7 +529,8 @@ ...@@ -488,7 +529,8 @@
</div> </div>
</div> </div>
</div> </div>
</div> </el-col>
</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