14 changed files with 1831 additions and 1945 deletions
File diff suppressed because it is too large
Load Diff
@ -1,926 +0,0 @@
|
||||
<template> |
||||
<div class="main_container"> |
||||
<!-- 开单数据 && 开单收入 --> |
||||
<div class="flex mb10 row_first"> |
||||
<!-- 开单数据 --> |
||||
<div class="mr10 box1 view_box"> |
||||
<!-- 标题 --> |
||||
<div class="align_center mb20"> |
||||
<img class="mr10 img_13pt" src="@/static/icon_data.png" alt="" /> |
||||
|
||||
<div class="title">开单数据</div> |
||||
</div> |
||||
|
||||
<!-- 数据 --> |
||||
<div class="border pd10"> |
||||
<div class="height40pt flex-c-sb border-bottom"> |
||||
<div class="align_center"> |
||||
<img class="mr10 img_16pt" src="@/static/icon_storage.png" alt="" /> |
||||
|
||||
<div>总计</div> |
||||
</div> |
||||
|
||||
<div class="align_center"> |
||||
<span class="data mr10">123</span> |
||||
<span>件</span> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="height40pt flex-c-sb border-bottom"> |
||||
<div class="align_center"> |
||||
<img class="mr10 img_16pt" src="@/static/icon_month.png" alt="" /> |
||||
|
||||
<div>当月</div> |
||||
</div> |
||||
|
||||
<div class="align_center"> |
||||
<span class="data mr10">123</span> |
||||
<span>件</span> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="height40pt flex-c-sb"> |
||||
<div class="align_center"> |
||||
<img class="mr10 img_16pt" src="@/static/icon_day.png" alt="" /> |
||||
|
||||
<div>当日</div> |
||||
</div> |
||||
|
||||
<div class="align_center"> |
||||
<span class="data mr10">123</span> |
||||
<span>件</span> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<!-- 开单收入 --> |
||||
<div class="flex1 box2 view_box"> |
||||
<!-- 标题 --> |
||||
<div class="align_center mb20"> |
||||
<img class="mr10 img_13pt" src="@/static/icon_money.png" alt="" /> |
||||
|
||||
<div class="title">开单收入</div> |
||||
</div> |
||||
|
||||
<div class="flex"> |
||||
<!-- 统计数据 --> |
||||
<div class="border flexnone totol pd10"> |
||||
<!-- 总计 --> |
||||
<div class="height40pt flex-c-sb border-bottom"> |
||||
<div class="align_center"> |
||||
<img class="mr10 img_16pt" src="@/static/icon_storage.png" alt="" /> |
||||
|
||||
<div>总计</div> |
||||
</div> |
||||
|
||||
<div class="align_center"> |
||||
<span class="data mr10">123</span> |
||||
<span>件</span> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="monthData flex-c-sb"> |
||||
<!-- 当月 --> |
||||
<div class="flex1"> |
||||
<div class="align_center"> |
||||
<img class="mr10 img_16pt" src="@/static/icon_month.png" alt="" /> |
||||
|
||||
<div>当月</div> |
||||
</div> |
||||
|
||||
<div class="align_center"> |
||||
<span class="data mr10">123</span> |
||||
<span>件</span> |
||||
</div> |
||||
</div> |
||||
|
||||
<!-- 当日 --> |
||||
<div class="flex1 border-left"> |
||||
<div class="align_center"> |
||||
<img class="mr10 img_16pt" src="@/static/icon_day.png" alt="" /> |
||||
|
||||
<div>当日</div> |
||||
</div> |
||||
|
||||
<div class="align_center"> |
||||
<span class="data mr10">123</span> |
||||
<span>件</span> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<!-- 详情数据 --> |
||||
<div class="detailsData flex1 ml10"> |
||||
<div class="flex-c-sb"> |
||||
<div class="item flex1 mr10"> |
||||
<div> |
||||
<span class="data mr5px">123123</span> |
||||
<span>元</span> |
||||
</div> |
||||
|
||||
<div>干线</div> |
||||
</div> |
||||
|
||||
<div class="item flex1 mr10"> |
||||
<div> |
||||
<span class="data mr5px">123123</span> |
||||
<span>元</span> |
||||
</div> |
||||
|
||||
<div>干线</div> |
||||
</div> |
||||
|
||||
<div class="item flex1 mr10"> |
||||
<div> |
||||
<span class="data mr5px">123123</span> |
||||
<span>元</span> |
||||
</div> |
||||
|
||||
<div>干线</div> |
||||
</div> |
||||
|
||||
<div class="item flex1 mr10"> |
||||
<div> |
||||
<span class="data mr5px">123123</span> |
||||
<span>元</span> |
||||
</div> |
||||
|
||||
<div>干线</div> |
||||
</div> |
||||
|
||||
<div class="item flex1"> |
||||
<div> |
||||
<span class="data mr5px">123123</span> |
||||
<span>元</span> |
||||
</div> |
||||
|
||||
<div>干线</div> |
||||
</div> |
||||
</div> |
||||
<div class="flex-c-sb mt10"> |
||||
<div class="item flex1 mr10"> |
||||
<div> |
||||
<span class="data mr5px">123123</span> |
||||
<span>元</span> |
||||
</div> |
||||
|
||||
<div>干线</div> |
||||
</div> |
||||
|
||||
<div class="item flex1 mr10"> |
||||
<div> |
||||
<span class="data mr5px">123123</span> |
||||
<span>元</span> |
||||
</div> |
||||
|
||||
<div>干线</div> |
||||
</div> |
||||
|
||||
<div class="item flex1 mr10"> |
||||
<div> |
||||
<span class="data mr5px">123123</span> |
||||
<span>元</span> |
||||
</div> |
||||
|
||||
<div>干线</div> |
||||
</div> |
||||
<div class="item flex1 mr10"> |
||||
<div> |
||||
<span class="data mr5px">123123</span> |
||||
<span>元</span> |
||||
</div> |
||||
|
||||
<div>干线</div> |
||||
</div> |
||||
|
||||
<div class="item flex1"> |
||||
<div> |
||||
<span class="data mr5px">123123</span> |
||||
<span>元</span> |
||||
</div> |
||||
|
||||
<div>干线</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<!-- 当前所在库位数据 && 库位数据 --> |
||||
<div class="flex mb10 row_second"> |
||||
<!-- 当前所在库位数据 --> |
||||
<div class="mr10 box1 view_box"> |
||||
<!-- 标题 --> |
||||
<div class="align_center mb20"> |
||||
<img class="mr10 img_13pt" src="@/static/icon_data.png" alt="" /> |
||||
|
||||
<div class="title">当前所在库位数据</div> |
||||
</div> |
||||
|
||||
<!-- 数据 --> |
||||
<div class="border data_container pd10 flex"> |
||||
<div class="item"> |
||||
<div class="align_center"> |
||||
<img class="dataIcon mr5px" src="@/static/icon_money_day.png" alt="" /> |
||||
<span>总数</span> |
||||
</div> |
||||
<div class="mt10"> |
||||
<span class="data mr5px">16899</span> |
||||
<span class="">件</span> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="item border-left"> |
||||
<div class="align_center"> |
||||
<img class="dataIcon mr5px" src="@/static/icon_money_day.png" alt="" /> |
||||
<span>零担</span> |
||||
</div> |
||||
<div class="mt10"> |
||||
<span class="data mr5px">16899</span> |
||||
<span class="">件</span> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="item border-left"> |
||||
<div class="align_center"> |
||||
<img class="dataIcon mr5px" src="@/static/icon_money_day.png" alt="" /> |
||||
<span>三方中转</span> |
||||
</div> |
||||
<div class="mt10"> |
||||
<span class="data mr5px">16899</span> |
||||
<span class="">件</span> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="item border-left"> |
||||
<div class="align_center"> |
||||
<img class="dataIcon mr5px" src="@/static/icon_money_day.png" alt="" /> |
||||
<span>商配</span> |
||||
</div> |
||||
<div class="mt10"> |
||||
<span class="data mr5px">16899</span> |
||||
<span class="">件</span> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="item border-left"> |
||||
<div class="align_center"> |
||||
<img class="dataIcon mr5px" src="@/static/icon_money_day.png" alt="" /> |
||||
<span>市配</span> |
||||
</div> |
||||
<div class="mt10"> |
||||
<span class="data mr5px">16899</span> |
||||
<span class="">件</span> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="item border-left"> |
||||
<div class="align_center"> |
||||
<img class="dataIcon mr5px" src="@/static/icon_money_day.png" alt="" /> |
||||
<span>自提</span> |
||||
</div> |
||||
<div class="mt10"> |
||||
<span class="data mr5px">16899</span> |
||||
<span class="">件</span> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="item border-left"> |
||||
<div class="align_center"> |
||||
<img class="dataIcon mr5px" src="@/static/icon_money_day.png" alt="" /> |
||||
<span>已打托</span> |
||||
</div> |
||||
<div class="mt10"> |
||||
<span class="data mr5px">16899</span> |
||||
<span class="">件</span> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<!-- 库位数据 --> |
||||
<div class="flex1 box2 view_box"> |
||||
<!-- 标题 --> |
||||
<div class="align_center mb20"> |
||||
<img class="mr10 img_13pt" src="@/static/icon_money.png" alt="" /> |
||||
|
||||
<div class="title">库位数据</div> |
||||
</div> |
||||
|
||||
<div class="border data_container pd10 flex"> |
||||
<div class="item"> |
||||
<div class="align_center"> |
||||
<img class="dataIcon mr5px" src="@/static/icon_money_day.png" alt="" /> |
||||
<span>总数</span> |
||||
</div> |
||||
<div class="mt10"> |
||||
<span class="data mr5px">16899</span> |
||||
<span class="">件</span> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="item border-left"> |
||||
<div class="align_center"> |
||||
<img class="dataIcon mr5px" src="@/static/icon_money_day.png" alt="" /> |
||||
<span>已上架</span> |
||||
</div> |
||||
<div class="mt10"> |
||||
<span class="data mr5px">16899</span> |
||||
<span class="">件</span> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="item border-left"> |
||||
<div class="align_center"> |
||||
<img class="dataIcon mr5px" src="@/static/icon_money_day.png" alt="" /> |
||||
<span>空置</span> |
||||
</div> |
||||
<div class="mt10"> |
||||
<span class="data mr5px">16899</span> |
||||
<span class="">件</span> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="item border-left"> |
||||
<div class="align_center"> |
||||
<img class="dataIcon mr5px" src="@/static/icon_money_day.png" alt="" /> |
||||
<span>已上架</span> |
||||
</div> |
||||
<div class="mt10"> |
||||
<span class="data mr5px">16899</span> |
||||
<span class="">件</span> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="item border-left"> |
||||
<div class="align_center"> |
||||
<img class="dataIcon mr5px" src="@/static/icon_money_day.png" alt="" /> |
||||
<span>未上架</span> |
||||
</div> |
||||
<div class="mt10"> |
||||
<span class="data mr5px">16899</span> |
||||
<span class="">件</span> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<!-- 干线待发运在库数据 && 干线车次统计 && 异常数据 --> |
||||
<div class="flex mb10 row_third"> |
||||
<!-- 当前所在库位数据 --> |
||||
<div class="mr10 box1 view_box"> |
||||
<!-- 标题 --> |
||||
<div class="align_center mb20"> |
||||
<img class="mr10 img_13pt" src="@/static/icon_data.png" alt="" /> |
||||
|
||||
<div class="title">干线待发运在库数据</div> |
||||
</div> |
||||
|
||||
<!-- 数据 --> |
||||
<div class="border data_container pd10 flex"> |
||||
<div class="item"> |
||||
<div class="align_center"> |
||||
<img class="dataIcon mr5px" src="@/static/icon_money_day.png" alt="" /> |
||||
<span>运单总数</span> |
||||
</div> |
||||
<div class="mt10"> |
||||
<span class="data mr5px">16899</span> |
||||
<span class="">单</span> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="item border-left"> |
||||
<div class="align_center"> |
||||
<img class="dataIcon mr5px" src="@/static/icon_money_day.png" alt="" /> |
||||
<span>在库总件数</span> |
||||
</div> |
||||
<div class="mt10"> |
||||
<span class="data mr5px">16899</span> |
||||
<span class="">件</span> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="item border-left"> |
||||
<div class="align_center"> |
||||
<img class="dataIcon mr5px" src="@/static/icon_money_day.png" alt="" /> |
||||
<span>在库总重量</span> |
||||
</div> |
||||
<div class="mt10"> |
||||
<span class="data mr5px">16899</span> |
||||
<span class="">kg</span> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="item border-left"> |
||||
<div class="align_center"> |
||||
<img class="dataIcon mr5px" src="@/static/icon_money_day.png" alt="" /> |
||||
<span>在库总方数</span> |
||||
</div> |
||||
<div class="mt10"> |
||||
<span class="data mr5px">16899</span> |
||||
<span class="">m³</span> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<!-- 干线车次统计 --> |
||||
<div class="mr10 flex1 box2 view_box"> |
||||
<!-- 标题 --> |
||||
<div class="align_center mb20"> |
||||
<img class="mr10 img_13pt" src="@/static/icon_money.png" alt="" /> |
||||
|
||||
<div class="title">干线车次统计</div> |
||||
</div> |
||||
|
||||
<div class="border data_container pd10 flex"> |
||||
<div class="item"> |
||||
<div class="align_center"> |
||||
<img class="dataIcon mr5px" src="@/static/icon_money_day.png" alt="" /> |
||||
<span>总车次</span> |
||||
</div> |
||||
<div class="mt10"> |
||||
<span class="data mr5px">16899</span> |
||||
<span class="">车</span> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="item border-left"> |
||||
<div class="align_center"> |
||||
<img class="dataIcon mr5px" src="@/static/icon_money_day.png" alt="" /> |
||||
<span>在途</span> |
||||
</div> |
||||
<div class="mt10"> |
||||
<span class="data mr5px">16899</span> |
||||
<span class="">车</span> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="item border-left"> |
||||
<div class="align_center"> |
||||
<img class="dataIcon mr5px" src="@/static/icon_money_day.png" alt="" /> |
||||
<span>作业</span> |
||||
</div> |
||||
<div class="mt10"> |
||||
<span class="data mr5px">16899</span> |
||||
<span class="">车</span> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="item border-left"> |
||||
<div class="align_center"> |
||||
<img class="dataIcon mr5px" src="@/static/icon_money_day.png" alt="" /> |
||||
<span>卸车完成</span> |
||||
</div> |
||||
<div class="mt10"> |
||||
<span class="data mr5px">16899</span> |
||||
<span class="">车</span> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<!-- 异常数据 --> |
||||
<div class="flex1 box2 view_box"> |
||||
<!-- 标题 --> |
||||
<div class="flex-c-sb mb20"> |
||||
<div class="align_center"> |
||||
<img class="mr10 img_13pt" src="@/static/icon_money.png" alt="" /> |
||||
|
||||
<div class="title">异常数据</div> |
||||
</div> |
||||
|
||||
<div class="align_center"> |
||||
<div :class="{ button: true, active: isActive }" @click="isActive = !isActive"> |
||||
当天 |
||||
</div> |
||||
<div :class="{ button: true, active: !isActive }" @click="isActive = !isActive"> |
||||
当月 |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="abnormal_container flex-c-sb"> |
||||
<div class="abnormal_item green"> |
||||
<div class="align_center"> |
||||
<img class="dataIcon mr5px" src="@/static/icon_money_day.png" alt="" /> |
||||
<span>总车次</span> |
||||
</div> |
||||
<div class="mt10"> |
||||
<span class="data mr5px">16899</span> |
||||
<span class="">车</span> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="abnormal_item blue"> |
||||
<div class="align_center"> |
||||
<img class="dataIcon mr5px" src="@/static/icon_money_day.png" alt="" /> |
||||
<span>总车次</span> |
||||
</div> |
||||
<div class="mt10"> |
||||
<span class="data mr5px">16899</span> |
||||
<span class="">车</span> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="abnormal_item red"> |
||||
<div class="align_center"> |
||||
<img class="dataIcon mr5px" src="@/static/icon_money_day.png" alt="" /> |
||||
<span>总车次</span> |
||||
</div> |
||||
<div class="mt10"> |
||||
<span class="data mr5px">16899</span> |
||||
<span class="">车</span> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<!-- 当前配送数据 && 签收数据 --> |
||||
<div class="flex mb10 row_fourthly"> |
||||
<!-- 当前配送数据 --> |
||||
<div class="mr10 box1 view_box"> |
||||
<!-- 标题 --> |
||||
<div class="flex-c-sb mb20"> |
||||
<div class="align_center"> |
||||
<img class="mr10 img_13pt" src="@/static/icon_data.png" alt="" /> |
||||
|
||||
<div class="title">当前配送数据</div> |
||||
</div> |
||||
|
||||
<div class="align_center"> |
||||
<div :class="{ button: true, active: isActive }" @click="isActive = !isActive"> |
||||
市配 |
||||
</div> |
||||
<div :class="{ button: true, active: !isActive }" @click="isActive = !isActive"> |
||||
商配 |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<!-- 数据 --> |
||||
<div class="border data_container pd10 flex"> |
||||
<div class="item"> |
||||
<div class="align_center"> |
||||
<img class="dataIcon mr5px" src="@/static/icon_money_day.png" alt="" /> |
||||
<span>配送计划总数</span> |
||||
</div> |
||||
<div class="mt10"> |
||||
<span class="data mr5px">16899</span> |
||||
<span class="">单</span> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="item border-left"> |
||||
<div class="align_center"> |
||||
<img class="dataIcon mr5px" src="@/static/icon_money_day.png" alt="" /> |
||||
<span>总件数</span> |
||||
</div> |
||||
<div class="mt10"> |
||||
<span class="data mr5px">16899</span> |
||||
<span class="">件</span> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="item border-left"> |
||||
<div class="align_center"> |
||||
<img class="dataIcon mr5px" src="@/static/icon_money_day.png" alt="" /> |
||||
<span>总重量</span> |
||||
</div> |
||||
<div class="mt10"> |
||||
<span class="data mr5px">16899</span> |
||||
<span class="">kg</span> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="item border-left"> |
||||
<div class="align_center"> |
||||
<img class="dataIcon mr5px" src="@/static/icon_money_day.png" alt="" /> |
||||
<span>总方数</span> |
||||
</div> |
||||
<div class="mt10"> |
||||
<span class="data mr5px">16899</span> |
||||
<span class="">m³</span> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="item border-left"> |
||||
<div class="align_center"> |
||||
<img class="dataIcon mr5px" src="@/static/icon_money_day.png" alt="" /> |
||||
<span>在途件数</span> |
||||
</div> |
||||
<div class="mt10"> |
||||
<span class="data mr5px">16899</span> |
||||
<span class="">件</span> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<!-- 签收数据 --> |
||||
<div class="flex1 box2 view_box"> |
||||
<!-- 标题 --> |
||||
<div class="align_center mb20"> |
||||
<img class="mr10 img_13pt" src="@/static/icon_money.png" alt="" /> |
||||
|
||||
<div class="title">签收数据</div> |
||||
</div> |
||||
|
||||
<div class="border data_container pd10 flex-c-sb"> |
||||
<div class="item"> |
||||
<div class="align_center"> |
||||
<img class="dataIcon mr5px" src="@/static/icon_money_day.png" alt="" /> |
||||
<span>已签收</span> |
||||
</div> |
||||
<div class="mt10"> |
||||
<span class="data mr5px">16899</span> |
||||
<span class="">件</span> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="item border-left"> |
||||
<div class="align_center"> |
||||
<img class="dataIcon mr5px" src="@/static/icon_money_day.png" alt="" /> |
||||
<span>未签收</span> |
||||
</div> |
||||
<div class="mt10"> |
||||
<span class="data mr5px">16899</span> |
||||
<span class="">件</span> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="item border-left"> |
||||
<div class="align_center"> |
||||
<img class="dataIcon mr5px" src="@/static/icon_money_day.png" alt="" /> |
||||
<span>签收率</span> |
||||
</div> |
||||
<div class="mt10"> |
||||
<span class="data">16899</span> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="item border-left"> |
||||
<div class="align_center"> |
||||
<img class="dataIcon mr5px" src="@/static/icon_money_day.png" alt="" /> |
||||
<span>文员签收数</span> |
||||
</div> |
||||
<div class="mt10"> |
||||
<span class="data mr5px">16899</span> |
||||
<span class="">件</span> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="item border-left"> |
||||
<div class="align_center"> |
||||
<img class="dataIcon mr5px" src="@/static/icon_money_day.png" alt="" /> |
||||
<span>文员签收率</span> |
||||
</div> |
||||
<div class="mt10"> |
||||
<span class="data">16899</span> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="item border-left"> |
||||
<div class="align_center"> |
||||
<img class="dataIcon mr5px" src="@/static/icon_money_day.png" alt="" /> |
||||
<span>超时签收</span> |
||||
</div> |
||||
<div class="mt10"> |
||||
<span class="data mr5px">16899</span> |
||||
<span class="">件</span> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
<script setup> |
||||
import { ref, onMounted } from 'vue'; |
||||
|
||||
const isActive = ref(false); |
||||
</script> |
||||
|
||||
<style scoped lang="scss"> |
||||
.main_container { |
||||
font-size: 14px; |
||||
background: #f5f5f6; |
||||
padding: 0 5px; |
||||
} |
||||
|
||||
.view_box { |
||||
padding: 10px; |
||||
padding-top: 8px; |
||||
background: #fff; |
||||
border-radius: 5px; |
||||
|
||||
.title { |
||||
font-weight: bold; |
||||
font-size: 18px; |
||||
line-height: 18px; |
||||
} |
||||
|
||||
.img_16pt { |
||||
width: 20px; |
||||
height: 20px; |
||||
} |
||||
} |
||||
|
||||
.mb20 { |
||||
margin-bottom: 20px; |
||||
} |
||||
|
||||
.pd10 { |
||||
padding: 0 10px; |
||||
} |
||||
|
||||
.align_center { |
||||
display: flex; |
||||
align-items: center; |
||||
} |
||||
|
||||
// 开单数据 |
||||
.height40pt { |
||||
height: 60px; |
||||
} |
||||
|
||||
// 数据样式 |
||||
.data { |
||||
font-weight: bold; |
||||
color: #000; |
||||
font-family: DIN-Bold; |
||||
font-size: 20px; |
||||
} |
||||
|
||||
.border { |
||||
border: 1pt solid #f5f5f6; |
||||
border-radius: 5px; |
||||
box-sizing: border-box; |
||||
} |
||||
|
||||
.border-bottom { |
||||
border-bottom: 1pt solid #f5f5f6; |
||||
box-sizing: border-box; |
||||
} |
||||
|
||||
.border-left { |
||||
border-left: 1px solid #f5f5f6; |
||||
box-sizing: border-box; |
||||
} |
||||
|
||||
// 第一排 |
||||
.row_first { |
||||
& > div { |
||||
height: 100%; |
||||
} |
||||
|
||||
.box1 { |
||||
height: 100%; |
||||
width: 340px; |
||||
box-sizing: border-box; |
||||
flex: none; |
||||
} |
||||
|
||||
// 开单收入 |
||||
.box2 { |
||||
height: 100%; |
||||
|
||||
// 统计数据 |
||||
.totol { |
||||
width: 460px; |
||||
|
||||
.monthData { |
||||
height: 120px; |
||||
|
||||
& > div { |
||||
height: 80%; |
||||
flex-direction: column; |
||||
display: flex; |
||||
justify-content: space-around; |
||||
padding: 0 10px; |
||||
box-sizing: border-box; |
||||
} |
||||
} |
||||
} |
||||
|
||||
// 详情数据 |
||||
.detailsData { |
||||
.item { |
||||
background: #f2f7fb; |
||||
border-radius: 5px; |
||||
height: 85px; |
||||
box-sizing: border-box; |
||||
padding: 10px; |
||||
color: #a4b0c2; |
||||
display: flex; |
||||
justify-content: space-between; |
||||
flex-direction: column; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
// 第二排 |
||||
.row_second { |
||||
.dataIcon { |
||||
height: 14px; |
||||
width: 14px; |
||||
} |
||||
|
||||
.data_container { |
||||
height: 100px; |
||||
box-sizing: border-box; |
||||
padding: 20px 0; |
||||
} |
||||
|
||||
.item { |
||||
width: 137px; |
||||
height: 100%; |
||||
padding: 0 20px; |
||||
box-sizing: border-box; |
||||
flex: none; |
||||
} |
||||
} |
||||
|
||||
// 第三排 |
||||
.row_third { |
||||
@extend .row_second; |
||||
.abnormal_container { |
||||
height: 100px; |
||||
} |
||||
|
||||
.abnormal_item { |
||||
box-sizing: border-box; |
||||
padding: 20px; |
||||
width: 160px; |
||||
color: #7b8ba4; |
||||
|
||||
&.red { |
||||
background: #ffeeed; |
||||
|
||||
.data { |
||||
color: #ff5d52; |
||||
} |
||||
} |
||||
|
||||
&.blue { |
||||
background: #e9f4ff; |
||||
|
||||
.data { |
||||
color: #2693ff; |
||||
} |
||||
} |
||||
|
||||
&.green { |
||||
background: #e5f8f3; |
||||
|
||||
.data { |
||||
color: #00c090; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.button { |
||||
padding: 0px 10px; |
||||
height: 18px; |
||||
line-height: 18px; |
||||
background: #fff; |
||||
border: 1px solid #f5f5f6; |
||||
border-radius: 2px; |
||||
color: #000; |
||||
font-size: 12px; |
||||
transition: all 0.3s; |
||||
cursor: pointer; |
||||
&.active { |
||||
color: #fff; |
||||
background: #2693ff; |
||||
border-color: #2693ff; |
||||
} |
||||
} |
||||
} |
||||
|
||||
// 第四排 |
||||
.row_fourthly { |
||||
@extend .row_third; |
||||
|
||||
.item { |
||||
width: 150px; |
||||
} |
||||
} |
||||
|
||||
.mr5px { |
||||
margin-right: 5px; |
||||
} |
||||
</style> |
||||
<style lang="scss" scope> |
||||
@import '../../styles/flowStyle.scss'; |
||||
|
||||
#avue-view { |
||||
background-color: #fff; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,248 @@
|
||||
<template> |
||||
<div class="bx" v-if="indexState"> |
||||
<div class="left"> |
||||
<div class="tptitl"> |
||||
<img src="./static/topicon.png" /> |
||||
<span>发货操作</span> |
||||
</div> |
||||
<div class="onebx1"> |
||||
<div class="item1"> |
||||
<img src="./static/1.png" /> |
||||
<span>提货</span> |
||||
</div> |
||||
<div class="item2"> |
||||
<img src="./static/2.png" /> |
||||
<span>预开单</span> |
||||
</div> |
||||
<div class="item3"> |
||||
<img src="./static/3.png" /> |
||||
<span>创建运单</span> |
||||
</div> |
||||
<div class="item4"> |
||||
<img src="./static/4.png" /> |
||||
<span>补录运单</span> |
||||
</div> |
||||
<div class="item5"> |
||||
<img src="./static/5.png" /> |
||||
<span>短驳发车</span> |
||||
</div> |
||||
<div class="item6"> |
||||
<img src="./static/6.png" /> |
||||
<span>外部中转</span> |
||||
</div> |
||||
<div class="item7"> |
||||
<img src="./static/7.png" /> |
||||
<span>库存管理</span> |
||||
</div> |
||||
<div class="item8"> |
||||
<img src="./static/8.png" /> |
||||
<span>车辆配载</span> |
||||
</div> |
||||
<img class="upimg" src="./static/up.png" /> |
||||
<img class="rigth1" src="./static/rigth.png" /> |
||||
<img class="rigth2" src="./static/rigth.png" /> |
||||
<img class="rigth3" src="./static/rigth.png" /> |
||||
<img class="rigth4" src="./static/rigth.png" /> |
||||
<img class="rigthall" src="./static/rigthall.png" /> |
||||
</div> |
||||
</div> |
||||
<div class="ztjk"> |
||||
<img src="./static/9.png" /> |
||||
<span>到货操作</span> |
||||
</div> |
||||
<div class="rigth"> |
||||
<div class="tptitl"> |
||||
<img src="./static/topicon.png" /> |
||||
<span>到货操作</span> |
||||
</div> |
||||
<div class="onebx1"> |
||||
<div class="item1"> |
||||
<img src="./static/10.png" /> |
||||
<span>到站卸车</span> |
||||
</div> |
||||
<div class="item2"> |
||||
<img src="./static/11.png" /> |
||||
<span>库存管理</span> |
||||
</div> |
||||
<div class="item3"> |
||||
<img src="./static/12.png" /> |
||||
<span>短驳接收</span> |
||||
</div> |
||||
<div class="item4"> |
||||
<img src="./static/13.png" /> |
||||
<span>外部中转</span> |
||||
</div> |
||||
<div class="item5"> |
||||
<img src="./static/14.png" /> |
||||
<span>送货</span> |
||||
</div> |
||||
<div class="item6"> |
||||
<img src="./static/15.png" /> |
||||
<span>中转签收</span> |
||||
</div> |
||||
<div class="item7"> |
||||
<img src="./static/16.png" /> |
||||
<span>送货签收</span> |
||||
</div> |
||||
<div class="item8"> |
||||
<img src="./static/17.png" /> |
||||
<span>自提签收</span> |
||||
</div> |
||||
<img class="upimg" src="./static/down.png" /> |
||||
<img class="rigth1" src="./static/rigth.png" /> |
||||
<img class="rigth2" src="./static/rigth.png" /> |
||||
<img class="rigth3" src="./static/rigth.png" /> |
||||
<img class="rigth4" src="./static/rigth.png" /> |
||||
<img class="rigthall" src="./static/rigthall2.png" /> |
||||
<img class="leftall" src="./static/leftall.png" /> |
||||
</div> |
||||
</div> |
||||
<div class="buts"> |
||||
<div class="tptitl"> |
||||
<img src="./static/topicon.png" /> |
||||
<span>回单管理</span> |
||||
</div> |
||||
<div class="onebx1"> |
||||
<div class="item1"> |
||||
<img src="./static/18.png" /> |
||||
<span>回单回收</span> |
||||
</div> |
||||
<div class="item2"> |
||||
<img src="./static/19.png" /> |
||||
<span>回单寄出</span> |
||||
</div> |
||||
<div class="item3"> |
||||
<img src="./static/20.png" /> |
||||
<span>回单接收</span> |
||||
</div> |
||||
<div class="item4"> |
||||
<img src="./static/21.png" /> |
||||
<span>回单发放</span> |
||||
</div> |
||||
<img class="left1" src="./static/rigth.png" /> |
||||
<img class="left2" src="./static/rigth.png" /> |
||||
<img class="left3" src="./static/rigth.png" /> |
||||
</div> |
||||
</div> |
||||
<div class="el-gl"> |
||||
<div>公告栏</div> |
||||
</div> |
||||
</div> |
||||
<div v-else class="el_Hwlogo"> |
||||
<div class="content"> |
||||
<img src="/public/img/p-logo.png" alt="" /> |
||||
<div class="info"> |
||||
<div class="name">{{ name }}</div> |
||||
<div class="slogan">您好！欢迎使用货无忧</div> |
||||
<div class="title">成都数联物科信息技术有限公司</div> |
||||
<div class="time">{{ currentTime }}</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
<script setup> |
||||
import { ref, onMounted } from 'vue'; |
||||
const indexState = ref(false); |
||||
const currentTime = ref('0000年00月00日00时00分00秒'); |
||||
const name = ref(''); |
||||
name.value = JSON.parse(localStorage.getItem('TWMS-userInfo')).content.real_name; |
||||
setInterval(() => { |
||||
const now = new Date(); |
||||
const year = now.getFullYear(); |
||||
const month = String(now.getMonth() + 1).padStart(2, '0'); |
||||
const day = String(now.getDate()).padStart(2, '0'); |
||||
const hours = String(now.getHours()).padStart(2, '0'); |
||||
const minutes = String(now.getMinutes()).padStart(2, '0'); |
||||
const seconds = String(now.getSeconds()).padStart(2, '0'); |
||||
currentTime.value = `${year}年${month}月${day}日${hours}时${minutes}分${seconds}秒`; |
||||
}, 1000); |
||||
</script> |
||||
<style scoped lang="scss"> |
||||
.info { |
||||
display: flex; |
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: center; |
||||
.name { |
||||
font-size: 40px; |
||||
color: #d3832a; |
||||
font-weight: bold; |
||||
} |
||||
.slogan { |
||||
font-size: 3em; |
||||
} |
||||
.time { |
||||
display: flex; |
||||
margin-top: 10px; |
||||
justify-content: flex-end; |
||||
} |
||||
.title { |
||||
display: flex; |
||||
margin-top: 10px; |
||||
justify-content: flex-end; |
||||
} |
||||
} |
||||
.el_Hwlogo { |
||||
width: 100%; |
||||
height: 100%; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
span { |
||||
color: #d3832a; |
||||
} |
||||
img { |
||||
width: 300px; |
||||
height: 300px; |
||||
} |
||||
.content { |
||||
display: flex; |
||||
flex-direction: row; |
||||
flex-wrap: wrap; |
||||
align-items: center; |
||||
justify-content: center; |
||||
} |
||||
} |
||||
.el-gl { |
||||
font-weight: 500; |
||||
text-align: center; |
||||
position: absolute; |
||||
right: 10px; |
||||
top: 10px; |
||||
width: 15%; |
||||
background-color: #fff; |
||||
border-radius: 32px; |
||||
padding: 5px; |
||||
box-sizing: border-box; |
||||
border: 1px solid #f1eeee69; |
||||
box-shadow: 4px 6px 0 #d3dff6, 1px 1px 9px #d3dff6; |
||||
height: 762px; |
||||
} |
||||
</style> |
||||
<style lang="scss" scope> |
||||
@import '../../styles/flowStyle.scss'; |
||||
|
||||
#avue-view { |
||||
background-color: #fff; |
||||
} |
||||
</style> |
||||
<script> |
||||
import { mapGetters } from 'vuex'; |
||||
export default { |
||||
name: 'wel', |
||||
data() { |
||||
return { |
||||
activeNames: ['1', '2', '3', '5'], |
||||
logActiveNames: ['29'], |
||||
}; |
||||
}, |
||||
computed: { |
||||
...mapGetters(['userInfo']), |
||||
}, |
||||
methods: { |
||||
handleChange(val) { |
||||
window.console.log(val); |
||||
}, |
||||
}, |
||||
}; |
||||
</script> |
||||
Loading…
Reference in new issue