3 changed files with 1162 additions and 1215 deletions
@ -0,0 +1,952 @@ |
|||||||
|
<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 flex1 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 flex-c-sb"> |
||||||
|
<div class="text_center"> |
||||||
|
<div class="data_box orange mb10"> |
||||||
|
<div class="data mr5px">16899</div> |
||||||
|
<div class="">单</div> |
||||||
|
</div> |
||||||
|
<div class=""> |
||||||
|
<span>运单总数</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="text_center"> |
||||||
|
<div class="data_box orange mb10"> |
||||||
|
<div class="data mr5px">16899</div> |
||||||
|
<div class="">件</div> |
||||||
|
</div> |
||||||
|
<div class=""> |
||||||
|
<span>在库总件数</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="text_center"> |
||||||
|
<div class="data_box orange mb10"> |
||||||
|
<div class="data mr5px">16899</div> |
||||||
|
<div class="">kg</div> |
||||||
|
</div> |
||||||
|
<div class=""> |
||||||
|
<span>在库总重量</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="text_center"> |
||||||
|
<div class="data_box orange mb10"> |
||||||
|
<div class="data mr5px">16899</div> |
||||||
|
<div class="">m³</div> |
||||||
|
</div> |
||||||
|
<div class=""> |
||||||
|
<span>在库总方数</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 pd10 flex-c-sb"> |
||||||
|
<div class="text_center"> |
||||||
|
<div class="data_box mb10"> |
||||||
|
<div class="data mr5px">16899</div> |
||||||
|
<div class="">车</div> |
||||||
|
</div> |
||||||
|
<div class=""> |
||||||
|
<span>总车次</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="text_center"> |
||||||
|
<div class="data_box mb10"> |
||||||
|
<div class="data mr5px">16899</div> |
||||||
|
<div class="">车</div> |
||||||
|
</div> |
||||||
|
<div class=""> |
||||||
|
<span>在途</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="text_center"> |
||||||
|
<div class="data_box mb10"> |
||||||
|
<div class="data mr5px">16899</div> |
||||||
|
<div class="">车</div> |
||||||
|
</div> |
||||||
|
<div class=""> |
||||||
|
<span>作业</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="text_center"> |
||||||
|
<div class="data_box mb10"> |
||||||
|
<div class="data mr5px">16899</div> |
||||||
|
<div class="">车</div> |
||||||
|
</div> |
||||||
|
<div class=""> |
||||||
|
<span>卸车完成</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" style="width: 40%"> |
||||||
|
<!-- 标题 --> |
||||||
|
<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 pd10 flex-c-sb"> |
||||||
|
<div class="text_center"> |
||||||
|
<div class="data_box blue mb10"> |
||||||
|
<div class="data mr5px">16899</div> |
||||||
|
<div class="">单</div> |
||||||
|
</div> |
||||||
|
<div class=""> |
||||||
|
<span>配送计划总数</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="text_center"> |
||||||
|
<div class="data_box blue mb10"> |
||||||
|
<div class="data mr5px">16899</div> |
||||||
|
<div class="">件</div> |
||||||
|
</div> |
||||||
|
<div class=""> |
||||||
|
<span>总作业</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="text_center"> |
||||||
|
<div class="data_box blue mb10"> |
||||||
|
<div class="data mr5px">16899</div> |
||||||
|
<div class="">kg</div> |
||||||
|
</div> |
||||||
|
<div class=""> |
||||||
|
<span>总重量</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="text_center"> |
||||||
|
<div class="data_box blue mb10"> |
||||||
|
<div class="data mr5px">16899</div> |
||||||
|
<div class="">m³</div> |
||||||
|
</div> |
||||||
|
<div class=""> |
||||||
|
<span>总方数</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="text_center"> |
||||||
|
<div class="data_box blue mb10"> |
||||||
|
<div class="data mr5px">16899</div> |
||||||
|
<div class="">件</div> |
||||||
|
</div> |
||||||
|
<div class=""> |
||||||
|
<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="border pd10 flex-c-sb"> |
||||||
|
<div class="text_center"> |
||||||
|
<div class="data_box mb10"> |
||||||
|
<div class="data mr5px">16899</div> |
||||||
|
<div class="">件</div> |
||||||
|
</div> |
||||||
|
<div class=""> |
||||||
|
<span>已签收</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="text_center"> |
||||||
|
<div class="data_box orange mb10"> |
||||||
|
<div class="data mr5px">16899</div> |
||||||
|
<div class="">件</div> |
||||||
|
</div> |
||||||
|
<div class=""> |
||||||
|
<span>未签收</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="text_center"> |
||||||
|
<div class="data_box blue mb10"> |
||||||
|
<div class="data mr5px">16899</div> |
||||||
|
<div class="">%</div> |
||||||
|
</div> |
||||||
|
<div class=""> |
||||||
|
<span>签收率</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="text_center"> |
||||||
|
<div class="data_box purple mb10"> |
||||||
|
<div class="data mr5px">16899</div> |
||||||
|
<div class="">件</div> |
||||||
|
</div> |
||||||
|
<div class=""> |
||||||
|
<span>文员签收数</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="text_center"> |
||||||
|
<div class="data_box purple mb10"> |
||||||
|
<div class="data mr5px">16899</div> |
||||||
|
<div class="">%</div> |
||||||
|
</div> |
||||||
|
<div class=""> |
||||||
|
<span>文员签收率</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="text_center"> |
||||||
|
<div class="data_box red mb10"> |
||||||
|
<div class="data mr5px">16899</div> |
||||||
|
<div class="">件</div> |
||||||
|
</div> |
||||||
|
<div class=""> |
||||||
|
<span>超时签收</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="text_center"> |
||||||
|
<div class="data_box red mb10"> |
||||||
|
<div class="data mr5px">168991</div> |
||||||
|
<div class="">%</div> |
||||||
|
</div> |
||||||
|
<div class=""> |
||||||
|
<span>签收超时率</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; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.data_box { |
||||||
|
padding: 16px; |
||||||
|
min-width: 80px; |
||||||
|
word-break: break-all; |
||||||
|
background-color: #e5f8f3; |
||||||
|
border-radius: 4px; |
||||||
|
border-bottom: 5px solid #00c090; |
||||||
|
|
||||||
|
&.orange { |
||||||
|
background: #fff4ec; |
||||||
|
border-color: #ff9545; |
||||||
|
} |
||||||
|
|
||||||
|
&.blue { |
||||||
|
background-color: #f2f7fb; |
||||||
|
border-color: #2693ff; |
||||||
|
} |
||||||
|
|
||||||
|
&.red { |
||||||
|
background: #ffeeed; |
||||||
|
border-color: #ff5d52; |
||||||
|
} |
||||||
|
|
||||||
|
&.purple { |
||||||
|
background: #f0eff8; |
||||||
|
border-color: #6b60c2; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.mr5px { |
||||||
|
margin-right: 5px; |
||||||
|
} |
||||||
|
|
||||||
|
.text_center { |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
</style> |
||||||
|
<style lang="scss" scope> |
||||||
|
@import '../../styles/flowStyle.scss'; |
||||||
|
|
||||||
|
#avue-view { |
||||||
|
background-color: #fff; |
||||||
|
} |
||||||
|
</style> |
||||||
@ -1,248 +0,0 @@ |
|||||||
<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