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>
<div class="dashboard-wrapper">
<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-header">
<div class="card-title">今日新单（件/单）</div>
......@@ -24,6 +25,8 @@
</div>
</div>
</div>
</el-col>
<el-col :span="6">
<div class="card-item">
<div class="card-item-header">
<div class="card-title">今日接单（件/单）</div>
......@@ -46,6 +49,8 @@
</div>
</div>
</div>
</el-col>
<el-col :span="6">
<div class="card-item">
<div class="card-item-header">
<div class="card-title">未发货订单（单）</div>
......@@ -64,6 +69,8 @@
</div>
</div>
</div>
</el-col>
<el-col :span="6">
<div class="card-item">
<div class="card-item-header">
<div class="card-title">超时未发订单（单）</div>
......@@ -82,8 +89,10 @@
</div>
</div>
</div>
</div>
<div class="card-container">
</el-col>
</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>
......@@ -117,7 +126,9 @@
<div v-else style="display: flex; margin-left: 10px">
<div class="text-green">
{{
Math.abs(statisticData?.compareYesterdayShipmentOrderNum || 0)
Math.abs(
statisticData?.compareYesterdayShipmentOrderNum || 0,
)
}}
</div>
<div class="down-icon"></div>
......@@ -125,6 +136,8 @@
</div>
</div>
</div>
</el-col>
<el-col :span="6">
<div class="card-item">
<div class="card-item-header">
<div class="card-title">24h发货率</div>
......@@ -171,6 +184,8 @@
</div>
</div>
</div>
</el-col>
<el-col :span="6">
<div class="card-item">
<div class="card-item-header">
<div class="card-title">48h发货率</div>
......@@ -217,6 +232,8 @@
</div>
</div>
</div>
</el-col>
<el-col :span="6">
<div class="card-item">
<div class="card-item-header">
<div class="card-title">发货超时率</div>
......@@ -268,8 +285,10 @@
</div>
</div>
</div>
</div>
<div class="card-container">
</el-col>
</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>
......@@ -288,6 +307,8 @@
</div>
</div>
</div>
</el-col>
<el-col :span="6">
<div class="card-item">
<div class="card-item-header">
<div class="card-title">待排单（单）</div>
......@@ -306,6 +327,8 @@
</div>
</div>
</div>
</el-col>
<el-col :span="6">
<div class="card-item">
<div class="card-item-header">
<div class="card-title">生产中（单）</div>
......@@ -324,6 +347,8 @@
</div>
</div>
</div>
</el-col>
<el-col :span="6">
<div class="card-item">
<div class="card-item-header">
<div class="card-title">待发货（单）</div>
......@@ -342,6 +367,8 @@
</div>
</div>
</div>
</el-col>
<el-col :span="6">
<div class="card-item">
<div class="card-item-header">
<div class="card-title">拦截申请（单）</div>
......@@ -360,6 +387,8 @@
</div>
</div>
</div>
</el-col>
<el-col :span="6">
<div class="card-item">
<div class="card-item-header">
<div class="card-title">异常单（单）</div>
......@@ -378,8 +407,10 @@
</div>
</div>
</div>
</div>
<div class="card-container">
</el-col>
</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>
......@@ -398,6 +429,8 @@
</div>
</div>
</div>
</el-col>
<el-col :span="6">
<div class="card-item">
<div class="card-item-header">
<div class="card-title">缺货&lt;24h单（单）</div>
......@@ -416,6 +449,8 @@
</div>
</div>
</div>
</el-col>
<el-col :span="6">
<div class="card-item">
<div class="card-item-header">
<div class="card-title">缺货&lt;48h单（单）</div>
......@@ -434,6 +469,8 @@
</div>
</div>
</div>
</el-col>
<el-col :span="6">
<div class="card-item">
<div class="card-item-header">
<div class="card-title">缺货≥48h单（单）</div>
......@@ -452,6 +489,8 @@
</div>
</div>
</div>
</el-col>
<el-col :span="6">
<div class="card-item">
<div class="card-item-header">
<div class="card-title">缺货库存SKU数</div>
......@@ -470,6 +509,8 @@
</div>
</div>
</div>
</el-col>
<el-col :span="6">
<div class="card-item">
<div class="card-item-header">
<div class="card-title">缺货总件数</div>
......@@ -488,7 +529,8 @@
</div>
</div>
</div>
</div>
</el-col>
</el-row>
<div class="chart-wrapper" style="width: 100%">
<el-radio-group
v-model="chartTimes1"
......@@ -824,7 +866,7 @@ const createChartOption = (
// 自动缩放文字：保证卡片内数字不超出边框宽度，超出则减小字号
const adjustTextSize = (el: HTMLElement) => {
const maxFontSize = 38
const maxFontSize = 45
const minFontSize = 16
const card = el.closest('.card-item') as HTMLElement | null
......@@ -1087,28 +1129,27 @@ onBeforeUnmount(() => {
</script>
<style lang="scss" scoped>
.dashboard-title {
font-size: 18px;
font-size: 22px;
font-weight: 600;
color: #333;
margin-bottom: 10px;
margin: 0px 0 10px 20px;
}
.card-container {
padding: 12px 2%;
padding: 15px 0 0 10px;
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
margin-bottom: 15px;
gap: 15px 6%;
margin-bottom: 10px;
background-color: #fff;
border-radius: 5px;
box-sizing: border-box;
:deep(.el-col) {
margin-bottom: 15px;
}
.card-item {
min-width: 270px;
width: 20%;
height: 90px;
height: 120px;
background-color: #f7f7f7;
border-radius: 5px;
padding: 8px 15px;
......@@ -1121,7 +1162,7 @@ onBeforeUnmount(() => {
align-items: center;
.card-title {
font-size: 14px;
font-size: 18px;
font-weight: 600;
color: #333;
}
......@@ -1141,7 +1182,7 @@ onBeforeUnmount(() => {
gap: 10px;
.card-item-content {
font-size: 38px;
font-size: 50px;
font-weight: 500;
white-space: nowrap;
}
......@@ -1190,14 +1231,10 @@ onBeforeUnmount(() => {
}
.dashboard-wrapper {
padding: 0 10px;
height: 100%;
width: 100%;
margin: 0 auto;
overflow-x: hidden;
background-color: #fafafa;
padding: 10px 40px;
border-radius: 5px;
}
.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