423 lines
10 KiB
Vue
423 lines
10 KiB
Vue
<template>
|
||
<el-drawer
|
||
title="发货进度"
|
||
:visible.sync="centervisible"
|
||
size="50%"
|
||
class="deliveryLogDetail"
|
||
@close='closeA'
|
||
:show-close='false'>
|
||
<div class="box1">
|
||
<div class="box_col">
|
||
<div class="blodTip">订单名</div>
|
||
<div class="lightTip">{{orderMsg.orderName ? orderMsg.orderName : '-'}}</div>
|
||
</div>
|
||
<div class="box_col">
|
||
<div class="blodTip">订单数量</div>
|
||
<div class="lightTip">{{orderMsg.orderNum ? orderMsg.orderNum : '-'}}</div>
|
||
</div>
|
||
<div class="box_col">
|
||
<div class="blodTip">装货数量</div>
|
||
<div class="lightTip">{{orderMsg.num ? orderMsg.num : '-'}}</div>
|
||
</div>
|
||
<div class="box_col">
|
||
<div class="blodTip">累计占比(%)</div>
|
||
<div class="lightTip">{{orderMsg.rate ? orderMsg.rate : '-'}}</div>
|
||
</div>
|
||
<div class="box_col">
|
||
<div class="blodTip">累计运输费用</div>
|
||
<div class="lightTip">{{orderMsg.cost ? orderMsg.cost : '-'}}</div>
|
||
</div>
|
||
</div>
|
||
<div class="box2">
|
||
<div class="boxTitle">
|
||
<span class="blueTitle"></span>
|
||
<span>发货清单</span>
|
||
</div>
|
||
<el-tabs v-model="activeName" @tab-click="toggleTab">
|
||
<el-tab-pane label="数据列表" name="dataList">
|
||
<!-- 列表 -->
|
||
<div v-if="activeName === 'dataList'">
|
||
<base-table
|
||
:page="queryParams.pageNo"
|
||
:limit="queryParams.pageSize"
|
||
:table-props="tableProps"
|
||
:table-data="tableData"
|
||
:max-height="tableH"
|
||
>
|
||
<!-- <method-btn
|
||
v-if="tableBtn.length"
|
||
slot="handleBtn"
|
||
:width="80"
|
||
label="操作"
|
||
:method-list="tableBtn"
|
||
@clickBtn="viewDetDetail"
|
||
/> -->
|
||
</base-table>
|
||
<pagination
|
||
:page.sync="queryParams.pageNo"
|
||
:limit.sync="queryParams.pageSize"
|
||
:total="total"
|
||
@pagination="getList"
|
||
/>
|
||
</div>
|
||
</el-tab-pane>
|
||
<el-tab-pane label="环形图" name="barChart">
|
||
<div v-if="activeName === 'barChart'">
|
||
<div
|
||
id="logDetPieBar"
|
||
style="width: 60%"
|
||
:style="{ height: chartHeight + 'px' }"
|
||
></div>
|
||
</div>
|
||
</el-tab-pane>
|
||
</el-tabs>
|
||
</div>
|
||
<!-- 详情抽屉 -->
|
||
</el-drawer>
|
||
</template>
|
||
<script>
|
||
import { deliveryLogPage, deliveryLogDetPage } from '@/api/base/delivery'
|
||
import { parseTime } from '@/utils/ruoyi'
|
||
import * as echarts from 'echarts'
|
||
import detailButton from './detailButton';
|
||
|
||
import resize from '@/utils/chartMixins/resize'
|
||
const tableProps = [
|
||
{
|
||
prop: 'deliveryTime',
|
||
label: '发货时间',
|
||
filter: parseTime,
|
||
minWidth: 160
|
||
},
|
||
{
|
||
prop: 'code',
|
||
label: '发货单号',
|
||
showOverflowtooltip: true
|
||
},
|
||
{
|
||
prop: 'orderNum',
|
||
label: '订单数量'
|
||
},
|
||
{
|
||
prop: 'num',
|
||
label: '发货数量'
|
||
},
|
||
{
|
||
prop: 'rate',
|
||
label: '发货比列(%)',
|
||
width: 110,
|
||
filter: (val) =>
|
||
val != null ? `${(val).toFixed(2)}%` : '',
|
||
},
|
||
{
|
||
prop: 'principalCost',
|
||
label: '运输费用'
|
||
},
|
||
{
|
||
prop: 'desc',
|
||
label: '装车详情',
|
||
subcomponent: detailButton,
|
||
}
|
||
]
|
||
|
||
export default {
|
||
name: 'DeliveryLogDetDetail',
|
||
mixins: [resize],
|
||
data() {
|
||
return {
|
||
centervisible: false,
|
||
activeName: 'dataList',
|
||
// 查询参数
|
||
queryParams: {
|
||
pageNo: 1,
|
||
pageSize: 100,
|
||
orderId: ''
|
||
},
|
||
orderMsg: {},
|
||
tableProps,
|
||
tableData: [],
|
||
total: 0,
|
||
tableH: this.tableHeight(350),
|
||
tableBtn: [
|
||
this.$auth.hasPermi('base:group-team:update')
|
||
? {
|
||
type: 'detail',
|
||
btnName: '详情'
|
||
}
|
||
: undefined
|
||
].filter((v) => v),
|
||
innerDrawer: false,
|
||
// 详情
|
||
queryParams2: {
|
||
pageNo: 1,
|
||
pageSize: 20,
|
||
logId: ''
|
||
},
|
||
tableData2: [],
|
||
tableH2: this.tableHeight(275),
|
||
total2: 0,
|
||
logCode: '',
|
||
// 图
|
||
chartDom: '',
|
||
chart: '',
|
||
chartHeight: this.tableHeight(300)*0.6
|
||
}
|
||
},
|
||
// watch: {
|
||
// chartData: function () {
|
||
// this.getChart()
|
||
// }
|
||
// },
|
||
mounted() {
|
||
window.addEventListener('resize', () => {
|
||
this.tableH = this.tableHeight(350)
|
||
})
|
||
window.addEventListener('resize', () => {
|
||
this.tableH2 = this.tableHeight(275)
|
||
})
|
||
window.addEventListener('resize', () => {
|
||
this.chartHeight = this.tableHeight(300)
|
||
})
|
||
},
|
||
methods: {
|
||
init(params) {
|
||
this.queryParams.orderId = params.orderId
|
||
this.orderMsg = params
|
||
this.centervisible = true
|
||
this.getList()
|
||
},
|
||
getList() {
|
||
deliveryLogPage({...this.queryParams}).then(res => {
|
||
this.tableData = res.data.list || []
|
||
this.taotal = res.data.total || 0
|
||
})
|
||
},
|
||
toggleTab() {
|
||
if (this.activeName === 'barChart') {
|
||
this.$nextTick(() => {
|
||
this.getBar()
|
||
})
|
||
}
|
||
},
|
||
getBar() {
|
||
let color = ['#7164FF','#288AFF','#63BDFF','#8EF0AB','#FFCE6A']
|
||
let colorList = []
|
||
if (
|
||
this.chart !== null &&
|
||
this.chart !== '' &&
|
||
this.chart !== undefined
|
||
) {
|
||
this.chart.dispose() // 页面多次刷新会出现警告，Dom已经初始化了一个实例，这是销毁实例
|
||
}
|
||
this.chartDom = document.getElementById('logDetPieBar')
|
||
this.chart = echarts.init(this.chartDom)
|
||
let seriesData = []
|
||
if (this.tableData.length > 0) {
|
||
for (let i = 0; i < this.tableData.length; i++) {
|
||
let obj = {}
|
||
obj.value = this.tableData[i].num
|
||
obj.name = this.tableData[i].code
|
||
seriesData.push(obj)
|
||
if (i < 5) {
|
||
colorList.push(color[i])
|
||
} else {
|
||
colorList.push(color[i%5])
|
||
}
|
||
}
|
||
}
|
||
if (this.orderMsg.num < this.orderMsg.orderNum) {
|
||
let obj = {}
|
||
obj.value = this.orderMsg.orderNum - this.orderMsg.num
|
||
obj.name = "未发货"
|
||
seriesData.push(obj)
|
||
colorList.push('#F5F5F5')
|
||
}else {
|
||
let obj = {}
|
||
obj.value = 0
|
||
obj.name = "未发货"
|
||
seriesData.push(obj)
|
||
colorList.push('#F5F5F5')
|
||
}
|
||
var option = {
|
||
color: colorList,
|
||
legend: {
|
||
bottom: '5%',
|
||
left: 'center',
|
||
itemWidth: 8,
|
||
itemHeight: 8
|
||
},
|
||
series: [
|
||
{
|
||
type: 'pie',
|
||
radius: ['40%', '55%'],
|
||
emphasis: {
|
||
scale: false
|
||
},
|
||
label: {
|
||
alignTo: 'edge',
|
||
formatter: '{name|{b}}\n{value|{c}}',
|
||
minMargin: 5,
|
||
edgeDistance: 10,
|
||
lineHeight: 15,
|
||
rich: {
|
||
name: {
|
||
fontSize: 14,
|
||
color: 'rgba(0,0,0,0.65)'
|
||
},
|
||
value: {
|
||
fontSize: 14,
|
||
color: 'rgba(0,0,0,0.65)'
|
||
}
|
||
}
|
||
},
|
||
data: seriesData
|
||
},
|
||
{
|
||
type: 'pie',
|
||
radius: ['40%', '40%'],
|
||
label: {
|
||
show: true,
|
||
position: 'center',
|
||
color: '#000',
|
||
formatter: [
|
||
'{a|'+this.orderMsg.orderNum+'}',
|
||
'{b|总数}'
|
||
].join('\n\n'),
|
||
rich: {
|
||
a: {
|
||
fontSize: 26 +'px'
|
||
},
|
||
b: {
|
||
fontSize: 16 +'px'
|
||
}
|
||
}
|
||
},
|
||
emphasis: {
|
||
scale: false
|
||
},
|
||
data: [100]
|
||
}
|
||
]
|
||
};
|
||
|
||
option && this.chart.setOption(option);
|
||
},
|
||
viewDetDetail(val) {
|
||
this.logCode = val.data.code
|
||
this.innerDrawer = true
|
||
this.queryParams2.logId = val.data.id
|
||
this.getList2()
|
||
},
|
||
closeA() {
|
||
// 清空数据
|
||
this.activeName = 'dataList'
|
||
this.queryParams.orderId = ''
|
||
this.tableData = []
|
||
this.orderMsg = {}
|
||
this.innerDrawer = false
|
||
},
|
||
getList2() {
|
||
deliveryLogDetPage({...this.queryParams2}).then(res => {
|
||
this.tableData2 = res.data.list || []
|
||
this.total2 = res.data.total || 0
|
||
})
|
||
},
|
||
|
||
}
|
||
}
|
||
</script>
|
||
<style scoped lang='scss'>
|
||
.box1 {
|
||
height: 76px;
|
||
border-bottom: 1px solid #E9E9E9;
|
||
margin: 0px 8px 20px 30px;
|
||
.box_col {
|
||
display: inline-block;
|
||
width: 20%;
|
||
padding: 8px 8px 8px 8px;
|
||
.blodTip {
|
||
height: 16px;
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
color: rgba(0,0,0,0.85);
|
||
margin-bottom: 8px;
|
||
}
|
||
.lightTip {
|
||
height: 16px;
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
color: rgba(102,102,102,0.75);
|
||
}
|
||
}
|
||
}
|
||
.box2 {
|
||
padding:0px 32px 30px 30px;
|
||
height: calc(100vh - 150px);
|
||
}
|
||
.boxTitle {
|
||
display: inline-block;
|
||
font-size: 16px;
|
||
font-weight: 400;
|
||
color: #000000;
|
||
margin:0 10px 10px 0;
|
||
}
|
||
.blueTitle {
|
||
content: '';
|
||
display: inline-block;
|
||
width: 4px;
|
||
height: 18px;
|
||
background-color: #0B58FF;
|
||
border-radius: 1px;
|
||
margin-right: 8px;
|
||
vertical-align: bottom;
|
||
}
|
||
.box3 {
|
||
padding: 8px 8px 8px 40px;
|
||
.title {
|
||
height: 16px;
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
color: rgba(0,0,0,0.85);
|
||
}
|
||
.text {
|
||
height: 16px;
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
color: rgba(102,102,102,0.75);
|
||
}
|
||
}
|
||
.box4 {
|
||
padding:32px 32px 30px 30px;
|
||
height: calc(100vh - 125px);
|
||
}
|
||
</style>
|
||
<style lang='scss'>
|
||
.deliveryLogDetail {
|
||
.el-tabs__nav::after {
|
||
content: "";
|
||
position: absolute;
|
||
left: 0;
|
||
bottom: 0;
|
||
width: 100%;
|
||
height: 2px;
|
||
background-color: #e4e7ed;
|
||
/* z-index: 1; */
|
||
}
|
||
.el-tabs__nav-wrap::after {
|
||
width: 0;
|
||
}
|
||
.el-tabs__item {
|
||
padding: 0 10px;
|
||
}
|
||
.el-tabs__item:hover {
|
||
color: rgba(0, 0, 0, 0.85);
|
||
}
|
||
.el-tabs__item.is-active {
|
||
color: rgba(0, 0, 0, 0.85);
|
||
}
|
||
.el-tabs__item {
|
||
color: rgba(0, 0, 0, 0.45);
|
||
}
|
||
}
|
||
</style>
|