6 changed files with 1527 additions and 1084 deletions
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,392 @@
|
||||
<template> |
||||
<div class="todayDetail"> |
||||
<!-- banner图 --> |
||||
<div class="todayDetail__banner mb8"> |
||||
<div class="description"> |
||||
<div class="title">智慧物流解决方案</div> |
||||
<p class="text"> |
||||
针对物流行业仓储、运输等场景，提供物联、LBS、大数据、安全管理、人工智能等能力，助力物流行业快速发展。 |
||||
</p> |
||||
</div> |
||||
</div> |
||||
|
||||
<!-- 搜索控件 --> |
||||
<div class="todayDetail__searchControl mb8"> |
||||
<!-- 日期 --> |
||||
<div class="date"> |
||||
<div |
||||
:class="{ date__item: true, active: item.isActive }" |
||||
v-for="item in dateSearchList" |
||||
:key="item.label" |
||||
@click="changeDateItemState(item)" |
||||
> |
||||
{{ item.label }} |
||||
</div> |
||||
|
||||
<!-- 日期选择器 --> |
||||
<div class="date-picker-container"> |
||||
<div class="date-picker-title">时间</div> |
||||
<el-date-picker |
||||
v-model="datePickerValue" |
||||
type="daterange" |
||||
range-separator="To" |
||||
start-placeholder="开始日期" |
||||
end-placeholder="结束日期" |
||||
clear-icon="Delete" |
||||
/> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<!-- 干线数据 --> |
||||
<div class="todayDetail__dataCard mb8" v-for="item in dataList" :key="item.title"> |
||||
<div class="title">{{ item.title }}</div> |
||||
|
||||
<ul class="list"> |
||||
<li class="listItem" v-for="value in item.data"> |
||||
<div class="number">{{ value.num }}</div> |
||||
<div class="label">{{ value.label }}</div> |
||||
</li> |
||||
</ul> |
||||
</div> |
||||
|
||||
<!-- 仓储和统计 --> |
||||
<div style="display: flex; justify-content: space-between"> |
||||
<!-- 仓储 --> |
||||
<div class="todayDetail__dataCard storage"> |
||||
<div class="title">仓储</div> |
||||
|
||||
<ul class="list" style="flex-wrap: wrap"> |
||||
<li class="listItem" v-for="value in storageData.data" :key="(value.label as any)"> |
||||
<div class="number">{{ value.num }}</div> |
||||
<div class="label">{{ value.label }}</div> |
||||
</li> |
||||
</ul> |
||||
</div> |
||||
|
||||
<!-- 统计 --> |
||||
<div class="todayDetail__dataCard" style="display: flex; flex-direction:column;"> |
||||
<div class="title">统计</div> |
||||
|
||||
<ul class="list" style="flex: 1; align-items: center;"> |
||||
<li class="listItem" v-for="value in statisticsData.data" :key="(value.label as any)"> |
||||
<div class="number">{{ value.num }}</div> |
||||
<div class="label">{{ value.label }}</div> |
||||
</li> |
||||
</ul> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script setup lang="ts"> |
||||
import { reactive, ref } from 'vue'; |
||||
|
||||
interface DateSearchItem { |
||||
/** |
||||
* 标题 |
||||
*/ |
||||
label: string; |
||||
/** |
||||
* 是否激活 |
||||
*/ |
||||
isActive: boolean; |
||||
} |
||||
|
||||
type DateSearchList = DateSearchItem[]; |
||||
|
||||
// 日期选择列表 |
||||
const dateSearchList = reactive<DateSearchList>([ |
||||
{ label: '今日', isActive: true }, |
||||
{ label: '昨日', isActive: false }, |
||||
{ label: '最近七天', isActive: false }, |
||||
{ label: '最近30天', isActive: false }, |
||||
{ label: '近365天', isActive: false }, |
||||
]); |
||||
|
||||
const changeDateItemState = (item: DateSearchItem): void => { |
||||
dateSearchList.forEach(val => { |
||||
val.isActive = false; |
||||
}); |
||||
item.isActive = true; |
||||
}; |
||||
|
||||
// 时间选择器值 |
||||
const datePickerValue = ref(''); |
||||
|
||||
// 干线 && 配送 假数据 |
||||
const dataList = [ |
||||
{ |
||||
title: '干线', |
||||
data: [ |
||||
{ |
||||
label: '装车中车次数', |
||||
num: 168, |
||||
}, |
||||
{ |
||||
label: '在途车次数', |
||||
num: 168, |
||||
}, |
||||
{ |
||||
label: '作业中车次数', |
||||
num: 168, |
||||
}, |
||||
{ |
||||
label: '已卸车次数', |
||||
num: 168, |
||||
}, |
||||
{ |
||||
label: '已入库次数', |
||||
num: 168, |
||||
}, |
||||
], |
||||
}, |
||||
{ |
||||
title: '配送', |
||||
data: [ |
||||
{ |
||||
label: '配送待装车次数', |
||||
num: 168, |
||||
}, |
||||
{ |
||||
label: '配送中车次数', |
||||
num: 168, |
||||
}, |
||||
{ |
||||
label: '已完成车次数', |
||||
num: 168, |
||||
}, |
||||
{ |
||||
label: '配送中签收件数', |
||||
num: 168, |
||||
}, |
||||
{ |
||||
label: '未入签收件数', |
||||
num: 0, |
||||
}, |
||||
], |
||||
}, |
||||
]; |
||||
|
||||
// 仓储假数据 |
||||
const storageData = { |
||||
title: '仓储', |
||||
data: [ |
||||
{ |
||||
label: '入库件数', |
||||
num: 168, |
||||
}, |
||||
{ |
||||
label: '出库总件数', |
||||
num: 168, |
||||
}, |
||||
{ |
||||
label: '待上架件数', |
||||
num: 168, |
||||
}, |
||||
{ |
||||
label: '库存总数', |
||||
num: 168, |
||||
}, |
||||
{ |
||||
label: '已用库位数', |
||||
num: 168, |
||||
}, |
||||
{ |
||||
label: '控制库位数', |
||||
num: 0, |
||||
}, |
||||
], |
||||
}; |
||||
|
||||
// 统计假数据 |
||||
const statisticsData = { |
||||
title: '统计', |
||||
data: [ |
||||
{ |
||||
label: '配送待装车次数', |
||||
num: 168, |
||||
}, |
||||
{ |
||||
label: '配送中车次数', |
||||
num: 168, |
||||
}, |
||||
{ |
||||
label: '配送中车次数', |
||||
num: 168, |
||||
}, |
||||
], |
||||
}; |
||||
</script> |
||||
|
||||
<style scoped lang="scss"> |
||||
// 主题颜色 |
||||
$theme-colors: #d3832a; |
||||
|
||||
// 去除ul默认样式 |
||||
ul { |
||||
list-style: none; |
||||
padding: 0; |
||||
margin: 0; |
||||
} |
||||
|
||||
.todayDetail { |
||||
padding: 0 10px 10px 10px; |
||||
|
||||
// banner图 |
||||
&__banner { |
||||
width: 100%; |
||||
height: 218px; |
||||
background: linear-gradient(135deg, #ffffff 0%, #ffe0be 0%, #fff2e4 100%); |
||||
border-radius: 5px; |
||||
color: $theme-colors; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
|
||||
.title { |
||||
padding: 0 5px; |
||||
font-family: YouSheBiaoTiHei-Bold; |
||||
font-weight: 600; |
||||
font-size: 36px; |
||||
line-height: 47px; |
||||
width: fit-content; |
||||
border: 2px dashed #ccc; |
||||
font-style: italic; |
||||
} |
||||
|
||||
.text { |
||||
width: 453px; |
||||
font-size: 16px; |
||||
line-height: 27px; |
||||
margin: 8px 0 0 0; |
||||
} |
||||
} |
||||
|
||||
// 搜索控件高度 |
||||
$searchHeight: 52px; |
||||
|
||||
// 搜索控件 |
||||
&__searchControl { |
||||
display: flex; |
||||
align-items: center; |
||||
padding-left: 55px; |
||||
height: $searchHeight; |
||||
background: #fff; |
||||
border-radius: 5px; |
||||
font-size: 16px; |
||||
white-space: nowrap; |
||||
|
||||
// 时间 |
||||
.date { |
||||
height: 100%; |
||||
display: flex; |
||||
color: #000; |
||||
|
||||
&__item { |
||||
line-height: $searchHeight; |
||||
margin-right: 24px; |
||||
cursor: pointer; |
||||
transition: all 0.5s; |
||||
} |
||||
} |
||||
} |
||||
|
||||
// 数据卡片 |
||||
&__dataCard { |
||||
box-sizing: border-box; |
||||
width: 100%; |
||||
background: #fff; |
||||
padding: 26px 20px 32px; |
||||
border-radius: 5px; |
||||
|
||||
// 标题 |
||||
& .title { |
||||
font-size: 18px; |
||||
font-weight: bold; |
||||
margin-bottom: 29px; |
||||
} |
||||
|
||||
& .list { |
||||
display: flex; |
||||
} |
||||
} |
||||
} |
||||
|
||||
// 搜索控件激活状态 |
||||
.date__item.active { |
||||
color: $theme-colors; |
||||
position: relative; |
||||
|
||||
&::after { |
||||
content: ''; |
||||
display: block; |
||||
width: 90%; |
||||
border: 1px solid $theme-colors; |
||||
left: 5%; |
||||
} |
||||
} |
||||
|
||||
.date__item { |
||||
&:hover { |
||||
color: $theme-colors; |
||||
} |
||||
|
||||
&::after { |
||||
content: ''; |
||||
display: block; |
||||
width: 0; |
||||
position: absolute; |
||||
bottom: 0; |
||||
left: 50%; |
||||
transition: all 0.5s; |
||||
} |
||||
} |
||||
|
||||
// 日期搜索框样式 |
||||
:deep(.el-range-editor.el-input__wrapper) { |
||||
width: 220px !important; |
||||
height: 32px !important; |
||||
} |
||||
|
||||
.date-picker-container { |
||||
height: 100%; |
||||
display: flex; |
||||
align-items: center; |
||||
} |
||||
|
||||
.date-picker-title { |
||||
margin-right: 16px; |
||||
} |
||||
|
||||
// 底部外边距8px |
||||
.mb8 { |
||||
margin-bottom: 8px; |
||||
} |
||||
|
||||
// 列表每一项数据 |
||||
.listItem { |
||||
flex: none; |
||||
width: 200px; |
||||
|
||||
& .number { |
||||
font-weight: bold; |
||||
font-family: DIN-Bold; |
||||
font-size: 28px; |
||||
line-height: 34px; |
||||
margin-bottom: 13px; |
||||
} |
||||
|
||||
& .label { |
||||
color: #afb4ba; |
||||
font-size: 14px; |
||||
} |
||||
} |
||||
|
||||
// 仓储列表样式 |
||||
.storage { |
||||
width: 750px; |
||||
margin-right: 20px; |
||||
flex: none; |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue