You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1592 lines
44 KiB
1592 lines
44 KiB
<template> |
|
<div class="main_container"> |
|
<!-- <el-button @click="handleRefresh">刷新</el-button> --> |
|
|
|
<!-- 开单数据 && 开单收入 --> |
|
<div class="flex mb10 row_first"> |
|
<!-- 开单数据 --> |
|
<div class="mr10 box1 view_box" v-loading="details.loadingObj.openOrderData"> |
|
<!-- 标题 --> |
|
<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">{{ details.openOrderDataInfo.totalNum || 0 }}</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">{{ details.openOrderDataInfo.monthNum || 0 }}</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">{{ details.openOrderDataInfo.dayNum || 0 }}</span> |
|
|
|
<span>单</span> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<!-- 开单收入 --> |
|
<div class="flex1 box2 view_box" v-loading="details.loadingObj.openOrderIncome"> |
|
<!-- 标题 --> |
|
<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">{{ details.openOrderIncomeInfo.totalFee || 0 }}</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">{{ details.openOrderIncomeInfo.monthFee || 0 }}</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">{{ details.openOrderIncomeInfo.dayFee || 0 }}</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">{{ |
|
details.openOrderIncomeInfo.monthTrunklineFee || 0 |
|
}}</span> |
|
<span>元</span> |
|
</div> |
|
|
|
<div>干线 - 月</div> |
|
</div> |
|
<!-- 仓储 --> |
|
<div class="item flex1 mr10"> |
|
<div> |
|
<span class="data mr5px">{{ |
|
details.openOrderIncomeInfo.monthWarehouseFee || 0 |
|
}}</span> |
|
<span>元</span> |
|
</div> |
|
|
|
<div>仓储 - 月</div> |
|
</div> |
|
<!-- 配送 --> |
|
<div class="item flex1 mr10"> |
|
<div> |
|
<span class="data mr5px">{{ |
|
details.openOrderIncomeInfo.monthDistributionFee || 0 |
|
}}</span> |
|
<span>元</span> |
|
</div> |
|
|
|
<div>配送 - 月</div> |
|
</div> |
|
<!-- 提货 --> |
|
<div class="item flex1 mr10"> |
|
<div> |
|
<span class="data mr5px">{{ |
|
details.openOrderIncomeInfo.monthBillladingFee || 0 |
|
}}</span> |
|
<span>元</span> |
|
</div> |
|
|
|
<div>提货 - 月</div> |
|
</div> |
|
<!-- 安装 --> |
|
<div class="item flex1"> |
|
<div> |
|
<span class="data mr5px">{{ |
|
details.openOrderIncomeInfo.monthInstallFee || 0 |
|
}}</span> |
|
<span>元</span> |
|
</div> |
|
|
|
<div>安装 - 月</div> |
|
</div> |
|
</div> |
|
|
|
<!-- 日 --> |
|
<div class="flex-c-sb mt10"> |
|
<!-- 干线 --> |
|
<div class="item flex1 mr10"> |
|
<div> |
|
<span class="data mr5px">{{ |
|
details.openOrderIncomeInfo.dayTrunklineFee || 0 |
|
}}</span> |
|
<span>元</span> |
|
</div> |
|
|
|
<div>干线 - 日</div> |
|
</div> |
|
<!-- 仓储 --> |
|
<div class="item flex1 mr10"> |
|
<div> |
|
<span class="data mr5px">{{ |
|
details.openOrderIncomeInfo.dayWarehouseFee || 0 |
|
}}</span> |
|
<span>元</span> |
|
</div> |
|
|
|
<div>仓储 - 日</div> |
|
</div> |
|
<!-- 配送 --> |
|
<div class="item flex1 mr10"> |
|
<div> |
|
<span class="data mr5px">{{ |
|
details.openOrderIncomeInfo.dayDistributionFee || 0 |
|
}}</span> |
|
<span>元</span> |
|
</div> |
|
|
|
<div>配送 - 日</div> |
|
</div> |
|
<!-- 提货 --> |
|
<div class="item flex1 mr10"> |
|
<div> |
|
<span class="data mr5px">{{ |
|
details.openOrderIncomeInfo.dayBillladingFee || 0 |
|
}}</span> |
|
<span>元</span> |
|
</div> |
|
|
|
<div>提货 - 日</div> |
|
</div> |
|
<!-- 安装 --> |
|
<div class="item flex1"> |
|
<div> |
|
<span class="data mr5px">{{ |
|
details.openOrderIncomeInfo.dayInstallFee || 0 |
|
}}</span> |
|
<span>元</span> |
|
</div> |
|
|
|
<div>安装 - 日</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<!-- 当前所在库位数据 && 库位数据 --> |
|
<div class="flex mb10 row_second"> |
|
<!-- 当前所在库位数据 --> |
|
<div class="mr10 box1 view_box" v-loading="details.loadingObj.handOrderData"> |
|
<!-- 标题 --> |
|
<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">{{ details.handOrderDataInfo.totalNum || 0 }}</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">{{ details.handOrderDataInfo.zeroNum || 0 }}</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">{{ details.handOrderDataInfo.thirdTransferNum || 0 }}</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">{{ details.handOrderDataInfo.mallNum || 0 }}</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">{{ details.handOrderDataInfo.cityNum || 0 }}</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">{{ details.handOrderDataInfo.billNum || 0 }}</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">{{ details.handOrderDataInfo.trayNum || 0 }}</span> |
|
<span class="">件</span> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<!-- 库位数据 --> |
|
<div class="flex1 box2 view_box" v-loading="details.loadingObj.allocationData"> |
|
<!-- 标题 --> |
|
<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">{{ details.allocationDataInfo.totalNum || 0 }}</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">{{ details.allocationDataInfo.useNum || 0 }}</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">{{ details.allocationDataInfo.nullNum || 0 }}</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">{{ details.allocationDataInfo.upshelfNum || 0 }}</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">{{ details.allocationDataInfo.noUpshelfNum || 0 }}</span> |
|
<span class="">件</span> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<!-- 干线待发运在库数据 && 干线车次统计 && 异常数据 --> |
|
<div class="flex mb10 row_third"> |
|
<!-- 当前所在库位数据 --> |
|
<div class="mr10 box1 flex1 view_box" v-loading="details.loadingObj.trunklineHandOrderData"> |
|
<!-- 标题 --> |
|
<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">{{ details.trunklineHandOrderDataInfo.waybillNum || 0 }}</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">{{ details.trunklineHandOrderDataInfo.handleNum || 0 }}</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"> |
|
{{ details.trunklineHandOrderDataInfo.handleWeight || 0 }} |
|
</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"> |
|
{{ details.trunklineHandOrderDataInfo.handleVolume || 0 }} |
|
</div> |
|
<div class="">m³</div> |
|
</div> |
|
<div class=""> |
|
<span>在库总方数</span> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<!-- 干线车次统计 --> |
|
<div class="mr10 flex1 box2 view_box" v-loading="details.loadingObj.trunklineCarsData"> |
|
<!-- 标题 --> |
|
<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">{{ details.trunklineCarsDataInfo.totalNum || 0 }}</div> |
|
<div class="">车</div> |
|
</div> |
|
<div class=""> |
|
<span>总车次</span> |
|
</div> |
|
</div> |
|
|
|
<div class="text_center"> |
|
<div class="data_box mb10"> |
|
<div class="data mr5px">{{ details.trunklineCarsDataInfo.inTransitNum || 0 }}</div> |
|
<div class="">车</div> |
|
</div> |
|
<div class=""> |
|
<span>在途</span> |
|
</div> |
|
</div> |
|
|
|
<div class="text_center"> |
|
<div class="data_box mb10"> |
|
<div class="data mr5px">{{ details.trunklineCarsDataInfo.workNum || 0 }}</div> |
|
<div class="">车</div> |
|
</div> |
|
<div class=""> |
|
<span>作业</span> |
|
</div> |
|
</div> |
|
|
|
<div class="text_center"> |
|
<div class="data_box mb10"> |
|
<div class="data mr5px">{{ details.trunklineCarsDataInfo.unloadNum || 0 }}</div> |
|
<div class="">车</div> |
|
</div> |
|
<div class=""> |
|
<span>卸车完成</span> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<!-- 异常数据 --> |
|
<div class="flex1 box2 view_box" v-loading="details.loadingObj.unloadAbnormalData"> |
|
<!-- 标题 --> |
|
<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: abnormal_status === 'day' }" |
|
@click="() => (abnormal_status = 'day')" |
|
> |
|
当天 |
|
</div> |
|
<div |
|
:class="{ button: true, active: abnormal_status === 'month' }" |
|
@click="() => (abnormal_status = 'month')" |
|
> |
|
当月 |
|
</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">{{ abnormal_Info.sendNum }}</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">{{ abnormal_Info.noDealNum }}</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">{{ abnormal_Info.abnormalRate }}</span> |
|
<span class="">%</span> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<!-- 当前配送数据 && 签收数据 --> |
|
<div class="flex mb10 row_fourthly"> |
|
<!-- 当前配送数据 --> |
|
<div |
|
class="mr10 box1 view_box" |
|
style="width: 40%" |
|
v-loading="details.loadingObj.deliveryData" |
|
> |
|
<!-- 标题 --> |
|
<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: delivery_status === 1 }" |
|
@click="delivery_status = 1" |
|
> |
|
商配 |
|
</div> |
|
|
|
<!-- 外协商配 --> |
|
<div |
|
:class="{ button: true, active: delivery_status === 4 }" |
|
@click="delivery_status = 4" |
|
> |
|
外协商配 |
|
</div> |
|
|
|
<div |
|
:class="{ button: true, active: delivery_status === 2 }" |
|
@click="delivery_status = 2" |
|
> |
|
市配 |
|
</div> |
|
|
|
<div |
|
:class="{ button: true, active: delivery_status === 5 }" |
|
@click="delivery_status = 5" |
|
> |
|
外协市配 |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<!-- 数据 --> |
|
<div class="border pd10 flex-c-sb"> |
|
<div class="text_center"> |
|
<div class="data_box blue mb10"> |
|
<div class="data mr5px">{{ delivery_info.totalNum || 0 }}</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">{{ delivery_info.totalDeliveryNum || 0 }}</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">{{ delivery_info.totalWeight || 0 }}</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">{{ delivery_info.totalVolume || 0 }}</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">{{ delivery_info.totalRoadNum || 0 }}</div> |
|
<div class="">件</div> |
|
</div> |
|
<div class=""> |
|
<span>在途件数</span> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<!-- 签收数据 --> |
|
<div class="flex1 box2 view_box" v-loading="details.loadingObj.signforData"> |
|
<!-- 标题 --> |
|
<div class="align_center mb20 flex-c-sb"> |
|
<div class="flex"> |
|
<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: signforData_status === '1' }" |
|
@click="() => (signforData_status = '1')" |
|
> |
|
当天 |
|
</div> |
|
<div |
|
:class="{ button: true, active: signforData_status === '2' }" |
|
@click="() => (signforData_status = '2')" |
|
> |
|
当月 |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div class="border pd10 flex-c-sb"> |
|
<div class="text_center"> |
|
<div class="data_box mb10"> |
|
<div class="data mr5px">{{ signforData.signNum || 0 }}</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">{{ signforData.unSignNum || 0 }}</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"> |
|
{{ signforData.signScale || 0 }} |
|
</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">{{ signforData.clerkSignNum || 0 }}</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"> |
|
{{ signforData.clerkSignforScale || 0 }} |
|
</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">{{ signforData.clerkOverTimeSignfoNum || 0 }}</div> |
|
<div class="">个</div> |
|
</div> |
|
<div class=""> |
|
<span>超时签收任务</span> |
|
</div> |
|
</div> |
|
|
|
<div class="text_center" v-if="signforData_status !== '1'"> |
|
<div class="data_box red mb10"> |
|
<div class="data mr5px"> |
|
{{ signforData.clerkOverTimeScale ? signforData.clerkOverTimeScale : 0 }} |
|
</div> |
|
<div class="">%</div> |
|
</div> |
|
<div class=""> |
|
<span>签收超时率</span> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<!-- 当前配送数据 && 签收数据 -- 自提 --> |
|
<div class="flex mb10 row_fourthly"> |
|
<!-- 当前配送数据 --> |
|
<div |
|
class="mr10 box1 view_box" |
|
style="width: 40%" |
|
v-loading="details.loadingObj.deliveryData" |
|
> |
|
<!-- 标题 --> |
|
<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> |
|
|
|
<!-- 数据 --> |
|
<div class="border pd10 flex-c-sb"> |
|
<div class="text_center"> |
|
<div class="data_box blue mb10"> |
|
<div class="data mr5px">{{ delivery_bill_info.totalNum || 0 }}</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">{{ delivery_bill_info.totalDeliveryNum || 0 }}</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">{{ delivery_bill_info.totalWeight || 0 }}</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">{{ delivery_bill_info.totalVolume || 0 }}</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">{{ delivery_bill_info.totalRoadNum || 0 }}</div> |
|
<div class="">件</div> |
|
</div> |
|
<div class=""> |
|
<span>在途件数</span> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<!-- 签收数据 --> |
|
<div class="flex1 box2 view_box" v-loading="details.loadingObj.signforData"> |
|
<!-- 标题 --> |
|
<div class="align_center mb20 flex-c-sb"> |
|
<div class="flex"> |
|
<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: billSignforData_status === '3' }" |
|
@click="() => (billSignforData_status = '3')" |
|
> |
|
当天 |
|
</div> |
|
<div |
|
:class="{ button: true, active: billSignforData_status === '4' }" |
|
@click="() => (billSignforData_status = '4')" |
|
> |
|
当月 |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div class="border pd10 flex-c-sb"> |
|
<div class="text_center"> |
|
<div class="data_box mb10"> |
|
<div class="data mr5px">{{ billSignforData.signNum || 0 }}</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">{{ billSignforData.unSignNum || 0 }}</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"> |
|
{{ billSignforData.signScale ? billSignforData.signScale : 0 }} |
|
</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">{{ billSignforData.clerkSignNum || 0 }}</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"> |
|
{{ billSignforData.clerkSignforScale ? billSignforData.clerkSignforScale : 0 }} |
|
</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">{{ billSignforData.clerkOverTimeSignfoNum || 0 }}</div> |
|
<div class="">个</div> |
|
</div> |
|
<div class=""> |
|
<span>超时签收任务</span> |
|
</div> |
|
</div> |
|
|
|
<div class="text_center" v-if="billSignforData_status !== '3'"> |
|
<div class="data_box red mb10"> |
|
<div class="data mr5px"> |
|
{{ billSignforData.clerkOverTimeScale ? billSignforData.clerkOverTimeScale : 0 }} |
|
</div> |
|
<div class="">%</div> |
|
</div> |
|
<div class=""> |
|
<span>签收超时率</span> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</template> |
|
<script setup lang="ts"> |
|
import { ref, onMounted, computed, reactive } from 'vue'; |
|
import { computeNumber } from '@/utils/util.js'; |
|
|
|
import { |
|
postAllocationData, |
|
postHandOrderData, |
|
postOpenOrderData, |
|
postOpenOrderIncome, |
|
postTrunklineCarsData, |
|
postTrunklineHandOrderData, |
|
postUnloadAbnormalData, |
|
postDeliveryData, |
|
postSignforData, |
|
} from '@/api/wel/index'; |
|
|
|
const details = reactive({ |
|
/** 开单数据 */ |
|
openOrderDataInfo: { |
|
/** 开单 -- 总计 */ |
|
dayNum: 0, |
|
/** 开单 -- 当月 */ |
|
monthNum: 0, |
|
/** 开单 -- 当日 */ |
|
totalNum: 0, |
|
}, |
|
/** 开单收入 */ |
|
openOrderIncomeInfo: { |
|
dayBillladingFee: '0.00', |
|
dayDistributionFee: '0.00', |
|
dayFee: '0.00', |
|
dayInstallFee: '0.00', |
|
dayTrunklineFee: '0.00', |
|
dayWarehouseFee: '0.00', |
|
monthBillladingFee: '0.00', |
|
monthDistributionFee: '0.00', |
|
monthFee: '0.00', |
|
monthInstallFee: '0.00', |
|
monthTrunklineFee: '0.00', |
|
monthWarehouseFee: '0.00', |
|
totalFee: '0', |
|
}, |
|
/** 当前在库数据 */ |
|
handOrderDataInfo: { |
|
billNum: 0, |
|
cityNum: 0, |
|
mallNum: 0, |
|
thirdTransferNum: 0, |
|
totalNum: 0, |
|
trayNum: 0, |
|
zeroNum: 0, |
|
}, |
|
/** 库位数据 */ |
|
allocationDataInfo: { |
|
noUpshelfNum: 0, |
|
nullNum: 0, |
|
totalNum: 0, |
|
upshelfNum: 0, |
|
useNum: 0, |
|
}, |
|
/** 干线发运数据 */ |
|
trunklineHandOrderDataInfo: { |
|
handleNum: 0, |
|
handleVolume: '0.0000', |
|
handleWeight: '0.0000', |
|
waybillNum: 0, |
|
}, |
|
/** 干线车次数据 */ |
|
trunklineCarsDataInfo: { |
|
inTransitNum: 0, |
|
totalNum: 0, |
|
unloadNum: 0, |
|
workNum: 0, |
|
}, |
|
/** 异常卸车数据 */ |
|
unloadAbnormalDataInfo: { |
|
abnormalDayRate: '0', |
|
abnormalMonthRate: '0', |
|
noDealDayNum: 0, |
|
noDealMonthNum: 0, |
|
sendDayNum: 0, |
|
sendMonthNum: 0, |
|
unloadDayNum: 0, |
|
unloadMonthNum: 0, |
|
}, |
|
/** 配送数据 */ |
|
deliveryDataInfo: [], |
|
/** 签收数据 */ |
|
signforDataInfo: [], |
|
loadingObj: { |
|
/** 开单数据 */ |
|
openOrderData: false, |
|
/** 开单收入 */ |
|
openOrderIncome: false, |
|
/** 当前在库数据 */ |
|
handOrderData: false, |
|
/** 库位数据 */ |
|
allocationData: false, |
|
/** 干线发运数据 */ |
|
trunklineHandOrderData: false, |
|
/** 干线车次数据 */ |
|
trunklineCarsData: false, |
|
/** 异常卸车数据 */ |
|
unloadAbnormalData: false, |
|
/** 配送数据 */ |
|
deliveryData: false, |
|
/** 签收数据 */ |
|
signforData: false, |
|
}, |
|
}); |
|
|
|
const deliveryDataBill = computed(() => {}); |
|
|
|
/** |
|
* 配送显示数据类型 |
|
* 1 -- 商配 |
|
* 2 -- 市配 |
|
* 3 -- 自提 |
|
* 4 -- 外协商配 |
|
* 5 -- 外协市配 |
|
*/ |
|
const delivery_status = ref<1 | 2 | 3 | 4 | 5>(1); |
|
|
|
/** 异常数据状态 */ |
|
const abnormal_status = ref<'day' | 'month'>('day'); |
|
|
|
/** 签收数据状态 */ |
|
const signforData_status = ref<'1' | '2'>('1'); |
|
|
|
/** 自提签收数据状态 */ |
|
const billSignforData_status = ref<'3' | '4'>('3'); |
|
|
|
/** 请求开单数据 */ |
|
const initOpenOrderData = async () => { |
|
try { |
|
details.loadingObj.openOrderData = true; |
|
const res = await postOpenOrderData({}); |
|
const { code, data } = res.data; |
|
if (code !== 200) return; |
|
details.openOrderDataInfo = data || {}; |
|
} catch (error) { |
|
console.log('error :>> ', error); |
|
} finally { |
|
details.loadingObj.openOrderData = false; |
|
} |
|
}; |
|
|
|
/** 请求开单收入 */ |
|
const initOpenOrderIncome = async () => { |
|
try { |
|
details.loadingObj.openOrderIncome = true; |
|
const res = await postOpenOrderIncome({}); |
|
const { code, data } = res.data; |
|
if (code !== 200) return; |
|
details.openOrderIncomeInfo = data || {}; |
|
} catch (error) { |
|
console.log('error :>> ', error); |
|
} finally { |
|
details.loadingObj.openOrderIncome = false; |
|
} |
|
}; |
|
|
|
/** 请求库位数据 */ |
|
const initAllocationData = async () => { |
|
try { |
|
details.loadingObj.allocationData = true; |
|
const res = await postAllocationData({}); |
|
const { code, data } = res.data; |
|
if (code !== 200) return; |
|
details.allocationDataInfo = data || {}; |
|
} catch (error) { |
|
console.log('error :>> ', error); |
|
} finally { |
|
details.loadingObj.allocationData = false; |
|
} |
|
}; |
|
|
|
/** 请求在库数据 */ |
|
const initHandOrderData = async () => { |
|
try { |
|
details.loadingObj.handOrderData = true; |
|
const res = await postHandOrderData({}); |
|
const { code, data } = res.data; |
|
if (code !== 200) return; |
|
details.handOrderDataInfo = data || {}; |
|
} catch (error) { |
|
console.log('error :>> ', error); |
|
} finally { |
|
details.loadingObj.handOrderData = false; |
|
} |
|
}; |
|
|
|
/** 请求干线发运数据 */ |
|
const initTrunklineHandOrderData = async () => { |
|
try { |
|
details.loadingObj.trunklineHandOrderData = true; |
|
const res = await postTrunklineHandOrderData({}); |
|
const { code, data } = res.data; |
|
if (code !== 200) return; |
|
details.trunklineHandOrderDataInfo = data || {}; |
|
} catch (error) { |
|
console.log('error :>> ', error); |
|
} finally { |
|
details.loadingObj.trunklineHandOrderData = false; |
|
} |
|
}; |
|
|
|
/** 请求干线车次数据 */ |
|
const initTrunklineCarsData = async () => { |
|
try { |
|
details.loadingObj.trunklineCarsData = true; |
|
const res = await postTrunklineCarsData({}); |
|
const { code, data } = res.data; |
|
if (code !== 200) return; |
|
details.trunklineCarsDataInfo = data || {}; |
|
} catch (error) { |
|
console.log('error :>> ', error); |
|
} finally { |
|
details.loadingObj.trunklineCarsData = false; |
|
} |
|
}; |
|
|
|
/** 卸车异常数据 */ |
|
const initUnloadAbnormalData = async () => { |
|
try { |
|
details.loadingObj.unloadAbnormalData = true; |
|
const res = await postUnloadAbnormalData({}); |
|
const { code, data } = res.data; |
|
if (code !== 200) return; |
|
details.unloadAbnormalDataInfo = data || {}; |
|
} catch (error) { |
|
console.log('error :>> ', error); |
|
} finally { |
|
details.loadingObj.unloadAbnormalData = false; |
|
} |
|
}; |
|
|
|
/** 配送数据 */ |
|
const initDeliveryData = async () => { |
|
try { |
|
details.loadingObj.deliveryData = true; |
|
const res = await postDeliveryData({}); |
|
const { code, data } = res.data; |
|
if (code !== 200) return; |
|
details.deliveryDataInfo = data || []; |
|
} catch (error) { |
|
console.log('error :>> ', error); |
|
} finally { |
|
details.loadingObj.deliveryData = false; |
|
} |
|
}; |
|
|
|
/** 签收数据 */ |
|
const initSignforData = async () => { |
|
try { |
|
details.loadingObj.signforData = true; |
|
const res = await postSignforData({}); |
|
const { code, data } = res.data; |
|
if (code !== 200) return; |
|
details.signforDataInfo = data || []; |
|
} catch (error) { |
|
console.log('error :>> ', error); |
|
} finally { |
|
details.loadingObj.signforData = false; |
|
} |
|
}; |
|
|
|
const handleRefresh = () => { |
|
initAllocationData(); |
|
initHandOrderData(); |
|
initOpenOrderData(); |
|
initOpenOrderIncome(); |
|
initTrunklineCarsData(); |
|
initTrunklineHandOrderData(); |
|
initUnloadAbnormalData(); |
|
initDeliveryData(); |
|
initSignforData(); |
|
}; |
|
|
|
handleRefresh(); |
|
|
|
/** 异常数据 */ |
|
const abnormal_Info = computed(() => { |
|
const _obj = |
|
abnormal_status.value === 'day' |
|
? { |
|
sendNum: details.unloadAbnormalDataInfo.sendDayNum, |
|
noDealNum: details.unloadAbnormalDataInfo.noDealDayNum, |
|
abnormalRate: details.unloadAbnormalDataInfo.abnormalDayRate, |
|
} |
|
: { |
|
sendNum: details.unloadAbnormalDataInfo.sendMonthNum, |
|
noDealNum: details.unloadAbnormalDataInfo.noDealMonthNum, |
|
abnormalRate: details.unloadAbnormalDataInfo.abnormalMonthRate, |
|
}; |
|
|
|
return _obj; |
|
}); |
|
|
|
/** 配送数据 */ |
|
const delivery_info = computed(() => { |
|
let _obj = {}; |
|
|
|
for (let i = 0; i < details.deliveryDataInfo.length; i++) { |
|
const value = details.deliveryDataInfo[i]; |
|
if (delivery_status.value + '' === value.type + '') _obj = value; |
|
} |
|
|
|
return _obj; |
|
}); |
|
|
|
/** 配送自提数据 */ |
|
const delivery_bill_info = computed(() => { |
|
let _obj = {}; |
|
|
|
for (let i = 0; i < details.deliveryDataInfo.length; i++) { |
|
const value = details.deliveryDataInfo[i]; |
|
if (value.type + '' === '3') _obj = value; |
|
} |
|
|
|
return _obj; |
|
}); |
|
|
|
/** 签收数据 */ |
|
const signforData = computed(() => { |
|
let _obj = {}; |
|
|
|
for (let i = 0; i < details.signforDataInfo.length; i++) { |
|
const value = details.signforDataInfo[i]; |
|
if (value.type + '' === signforData_status.value) _obj = value; |
|
} |
|
|
|
_obj.signScaleNum ? _obj.signScaleNum : (_obj.signScaleNum = _obj.signScale || 0); |
|
_obj.clerkSignforScaleNum |
|
? _obj.clerkSignforScaleNum |
|
: (_obj.clerkSignforScaleNum = _obj.clerkSignforScale || 0); |
|
_obj.clerkOverTimeScaleNum |
|
? _obj.clerkOverTimeScaleNum |
|
: (_obj.clerkOverTimeScaleNum = _obj.clerkOverTimeScale || 0); |
|
|
|
_obj.signScale = computeNumber(_obj.signScaleNum || 0, '*', 100).result.toFixed(2); |
|
_obj.clerkSignforScale = computeNumber(_obj.clerkSignforScaleNum || 0, '*', 100).result.toFixed( |
|
2 |
|
); |
|
_obj.clerkOverTimeScale = computeNumber(_obj.clerkOverTimeScaleNum || 0, '*', 100).result.toFixed( |
|
2 |
|
); |
|
|
|
return _obj; |
|
}); |
|
|
|
/** 签收数据 -- 自提 */ |
|
const billSignforData = computed(() => { |
|
let _obj = {}; |
|
|
|
for (let i = 0; i < details.signforDataInfo.length; i++) { |
|
const value = details.signforDataInfo[i]; |
|
if (value.type + '' === billSignforData_status.value) _obj = value; |
|
} |
|
|
|
_obj.signScaleNum ? _obj.signScaleNum : (_obj.signScaleNum = _obj.signScale || 0); |
|
_obj.clerkSignforScaleNum |
|
? _obj.clerkSignforScaleNum |
|
: (_obj.clerkSignforScaleNum = _obj.clerkSignforScale || 0); |
|
_obj.clerkOverTimeScaleNum |
|
? _obj.clerkOverTimeScaleNum |
|
: (_obj.clerkOverTimeScaleNum = _obj.clerkOverTimeScale || 0); |
|
|
|
_obj.signScale = computeNumber(_obj.signScaleNum || 0, '*', 100).result.toFixed(2); |
|
_obj.clerkSignforScale = computeNumber(_obj.clerkSignforScaleNum || 0, '*', 100).result.toFixed( |
|
2 |
|
); |
|
_obj.clerkOverTimeScale = computeNumber(_obj.clerkOverTimeScaleNum || 0, '*', 100).result.toFixed( |
|
2 |
|
); |
|
|
|
return _obj; |
|
}); |
|
</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>
|
|
|