安虹睿
10 months ago
2 changed files with 566 additions and 21 deletions
@ -0,0 +1,515 @@ |
|||
<template> |
|||
<div class="boardFullPage shippingBoardPage"> |
|||
<boardHeader |
|||
ref="boardHeader_Ref" |
|||
:title="'发运看板'" |
|||
></boardHeader> |
|||
<dv-loading v-show="dataLoading">Loading...</dv-loading> |
|||
<div class="lineContain"> |
|||
<dv-scroll-board :config="config" ref="shippingBoard_Ref" style="height:100%"/> |
|||
<div class="hasNoData" v-if="config.data.length <= 0 && !dataLoading">暂无数据</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import axiosUtil from '../utils/request' |
|||
import boardHeader from '../components/boardHeader' |
|||
import util from '../utils/util' |
|||
export default { |
|||
name: 'shippingBoard', |
|||
components:{boardHeader}, |
|||
data () { |
|||
return { |
|||
intervalId:null, |
|||
// intervalIdChangeBg:null, |
|||
dataLoading: true, |
|||
// config默认项 |
|||
configDefult:{ |
|||
header:['客户', '客户地址', '计划发运单号', '计划发运日期', '计划发运时间','发货口','状态' ], |
|||
waitTime: util.waitTime, |
|||
carousel: 'page', |
|||
// index: true, |
|||
// indexHeader: '序号', |
|||
// columnWidth: [200,500], |
|||
align: ['center','left','center','center','center','center','center',], |
|||
hoverPause: false, // 鼠标悬浮时,不停止轮播 |
|||
rowNum: 10, |
|||
headerBGC: '#1981f6', |
|||
headerHeight: 65, |
|||
evenRowBGC: 'rgba(0, 44, 81, 0.9)', |
|||
oddRowBGC: 'rgba(10, 29, 50, 0.9)' |
|||
}, |
|||
config: {}, |
|||
// currentRowsCopy:null,//当前数据暂存,用于更新背景色处理 |
|||
} |
|||
}, |
|||
created() { |
|||
this.initConfig() |
|||
this.getList() |
|||
clearInterval(this.intervalId) |
|||
this.intervalId = setInterval(() => { |
|||
this.getList() |
|||
}, util.fleshTime) |
|||
util.addEventResizeFlesh() |
|||
// 用于更新背景色处理 |
|||
// clearInterval(this.intervalIdChangeBg) |
|||
// this.intervalIdChangeBg = setInterval(() => { |
|||
// this.initConfig(this.initRow(this.currentRowsCopy),new Date().getTime()) |
|||
// }, 10000) |
|||
|
|||
}, |
|||
destroyed() { |
|||
clearInterval(this.intervalId) |
|||
clearInterval(this.intervalIdChangeBg) |
|||
}, |
|||
methods: { |
|||
init(){ |
|||
this.initConfig() |
|||
this.getList() |
|||
util.addEventResizeFlesh() |
|||
}, |
|||
initConfig(data){ |
|||
this.config = { |
|||
header: this.configDefult.header, |
|||
data: data || [], |
|||
waitTime: this.configDefult.waitTime,//每页停留20秒d |
|||
carousel: this.configDefult.carousel, |
|||
index: this.configDefult.index, |
|||
indexHeader: this.configDefult.indexHeader, |
|||
columnWidth: this.configDefult.columnWidth, |
|||
align: this.configDefult.align, |
|||
hoverPause: this.configDefult.hoverPause, // 鼠标悬浮时,不停止轮播 |
|||
rowNum: this.configDefult.rowNum, |
|||
headerBGC: this.configDefult.headerBGC, |
|||
headerHeight: this.configDefult.headerHeight, |
|||
oddRowBGC: this.configDefult.oddRowBGC, |
|||
evenRowBGC: this.configDefult.evenRowBGC |
|||
} |
|||
}, |
|||
initRow(data,time){ |
|||
let rows = [] |
|||
console.log(66666,data) |
|||
data.forEach(item=>{ |
|||
let _item = [] |
|||
// todo:状态确定 |
|||
// util.formatTimeStrToStr() |
|||
let _plan = new Date(item.deliverPlanDate).getTime() |
|||
let _now = time |
|||
console.log(9999,item.deliverPlanDate) |
|||
let _plan_sub = item.deliverPlanDate.indexOf("T") |
|||
let _plan_date = item.deliverPlanDate.slice(0,_plan_sub) || '' |
|||
let _plan_time = item.deliverPlanDate.slice(_plan_sub + 1) || '' |
|||
// 发货时间前一小时整行变更颜色 |
|||
if(Number(_plan) - Number(_now) <= 3600000 && Number(_now) <= Number(_plan)){ |
|||
_item[0] = `<div class="rowStatusBg">${item.customerCode || ''}</div>`;//客户 |
|||
_item[1] = `<div class="rowStatusBg">${item.customerAdrss || ''}</div>`;//客户地址 |
|||
_item[2] = `<div class="rowStatusBg">${item.deliverRequestNumber || ''}</div>`;//计划发运单号 |
|||
_item[3] = `<div class="rowStatusBg">${_plan_date}</div>`;//计划发运日期 |
|||
_item[4] = `<div class="rowStatusBg">${_plan_time}</div>`;//计划发运时间 |
|||
_item[5] = `<div class="rowStatusBg">${item.dockCode || ''}</div>`;//发货口 |
|||
if(item.status == 'red'){ |
|||
_item[6] = `<div class="rowStatusBg"><span class="statusBlockItem statusBlockItem_warning">延迟</span></div>`;//状态 |
|||
}else if(item.status == 'green'){ |
|||
_item[6] = `<div class="rowStatusBg"><span class="statusBlockItem statusBlockItem_normal">正在发货</span></div>`;//状态 |
|||
} |
|||
else{ |
|||
_item[6] = `<div class="rowStatusBg"><span class="statusBlockItem statusBlockItem_white">等待发货</span></div>`;//状态 |
|||
} |
|||
}else{ |
|||
_item[0] = item.customerCode || '';//客户 |
|||
_item[1] = item.customerAdrss || '';//客户地址 |
|||
_item[2] = item.deliverRequestNumber || '';//计划发运单号 |
|||
_item[3] = _plan_date || '';//计划发运日期 |
|||
_item[4] = _plan_time || '';//计划发运时间 |
|||
_item[5] = item.dockCode || '';//发货口 |
|||
if(item.status == 'red'){ |
|||
_item[6] = `<span class="statusBlockItem statusBlockItem_warning">延迟</span>`;//状态 |
|||
}else if(item.status == 'green'){ |
|||
_item[6] = `<span class="statusBlockItem statusBlockItem_normal">正在发货</span>`;//状态 |
|||
} |
|||
else{ |
|||
_item[6] = `<span class="statusBlockItem statusBlockItem_white">等待发货</span>`;//状态 |
|||
} |
|||
} |
|||
rows.push(_item) |
|||
}) |
|||
return rows |
|||
}, |
|||
async getList(){ |
|||
this.dataLoading = true |
|||
this.initConfig() |
|||
axiosUtil.ajax_post('/api/wms/store/board/deliver-board').then(res => { |
|||
this.dataLoading = false |
|||
if(res.length <= 0){ |
|||
return |
|||
} |
|||
// 假数据 |
|||
let _res = [ |
|||
{ |
|||
"customerCode": "10000059", |
|||
"customerName": "1北京瀛海延锋工厂", |
|||
"customerAdrssCode": "YanfYH", |
|||
"customerAdrss": "1北京市北京经济技术开发区(大兴)瀛海镇瀛顺路55号院2号", |
|||
"deliverRequestNumber": "DLP202401240009", |
|||
"deliverPlanDate": "2024-01-25T17:00:00", |
|||
"deliverPlanTime": null, |
|||
"status": "red", |
|||
"dockCode": null |
|||
}, |
|||
{ |
|||
"customerCode": "10000059", |
|||
"customerName": "2北京瀛海延锋工厂", |
|||
"customerAdrssCode": "YanfYH", |
|||
"customerAdrss": "2北京市北京经济技术开发区(大兴)瀛海镇瀛顺路55号院2号", |
|||
"deliverRequestNumber": "DLP202401240010", |
|||
"deliverPlanDate": "2024-01-25T20:00:00", |
|||
"deliverPlanTime": null, |
|||
"status": "red", |
|||
"dockCode": null |
|||
}, |
|||
{ |
|||
"customerCode": "10000059", |
|||
"customerName": "3北京瀛海延锋工厂", |
|||
"customerAdrssCode": "YanfYH", |
|||
"customerAdrss": "3北京市北京经济技术开发区(大兴)瀛海镇瀛顺路55号院2号", |
|||
"deliverRequestNumber": "DLP202401240011", |
|||
"deliverPlanDate": "2024-01-26T02:00:00", |
|||
"deliverPlanTime": null, |
|||
"status": "red", |
|||
"dockCode": null |
|||
}, |
|||
{ |
|||
"customerCode": "10000059", |
|||
"customerName": "4北京瀛海延锋工厂", |
|||
"customerAdrssCode": "YanfYH", |
|||
"customerAdrss": "4北京市北京经济技术开发区(大兴)瀛海镇瀛顺路55号院2号", |
|||
"deliverRequestNumber": "DLP202401240012", |
|||
"deliverPlanDate": "2024-01-26T06:00:00", |
|||
"deliverPlanTime": null, |
|||
"status": "red", |
|||
"dockCode": null |
|||
}, |
|||
{ |
|||
"customerCode": "10000059", |
|||
"customerName": "5北京瀛海延锋工厂", |
|||
"customerAdrssCode": "YanfYH", |
|||
"customerAdrss": "5北京市北京经济技术开发区(大兴)瀛海镇瀛顺路55号院2号", |
|||
"deliverRequestNumber": "DLP202401240005", |
|||
"deliverPlanDate": "2024-01-26T15:00:00", |
|||
"deliverPlanTime": null, |
|||
"status": "red", |
|||
"dockCode": null |
|||
}, |
|||
{ |
|||
"customerCode": "10000055", |
|||
"customerName": "6北京奔驰大兴工厂", |
|||
"customerAdrssCode": "BBACDX01", |
|||
"customerAdrss": "6北京市大兴区博兴路8号", |
|||
"deliverRequestNumber": "DLP202401240013", |
|||
"deliverPlanDate": "2024-01-26T13:15:00", |
|||
"deliverPlanTime": null, |
|||
"status": "red", |
|||
"dockCode": null |
|||
},{ |
|||
"customerCode": "10000059", |
|||
"customerName": "7北京瀛海延锋工厂", |
|||
"customerAdrssCode": "YanfYH", |
|||
"customerAdrss": "7北京市北京经济技术开发区(大兴)瀛海镇瀛顺路55号院2号", |
|||
"deliverRequestNumber": "DLP202401240009", |
|||
"deliverPlanDate": "2024-01-25T17:00:00", |
|||
"deliverPlanTime": null, |
|||
"status": "red", |
|||
"dockCode": null |
|||
}, |
|||
{ |
|||
"customerCode": "10000059", |
|||
"customerName": "8北京瀛海延锋工厂", |
|||
"customerAdrssCode": "YanfYH", |
|||
"customerAdrss": "8北京市北京经济技术开发区(大兴)瀛海镇瀛顺路55号院2号", |
|||
"deliverRequestNumber": "DLP202401240010", |
|||
"deliverPlanDate": "2024-01-25T20:00:00", |
|||
"deliverPlanTime": null, |
|||
"status": "red", |
|||
"dockCode": null |
|||
}, |
|||
{ |
|||
"customerCode": "10000059", |
|||
"customerName": "9北京瀛海延锋工厂", |
|||
"customerAdrssCode": "YanfYH", |
|||
"customerAdrss": "9北京市北京经济技术开发区(大兴)瀛海镇瀛顺路55号院2号", |
|||
"deliverRequestNumber": "DLP202401240011", |
|||
"deliverPlanDate": "2024-01-26T02:00:00", |
|||
"deliverPlanTime": null, |
|||
"status": "red", |
|||
"dockCode": null |
|||
}, |
|||
{ |
|||
"customerCode": "10000059", |
|||
"customerName": "10北京瀛海延锋工厂", |
|||
"customerAdrssCode": "YanfYH", |
|||
"customerAdrss": "10北京市北京经济技术开发区(大兴)瀛海镇瀛顺路55号院2号", |
|||
"deliverRequestNumber": "DLP202401240012", |
|||
"deliverPlanDate": "2024-01-26T06:00:00", |
|||
"deliverPlanTime": null, |
|||
"status": "red", |
|||
"dockCode": null |
|||
}, |
|||
{ |
|||
"customerCode": "10000059", |
|||
"customerName": "11北京瀛海延锋工厂", |
|||
"customerAdrssCode": "YanfYH", |
|||
"customerAdrss": "11北京市北京经济技术开发区(大兴)瀛海镇瀛顺路55号院2号", |
|||
"deliverRequestNumber": "DLP202401240005", |
|||
"deliverPlanDate": "2024-01-26T15:50:00", |
|||
"deliverPlanTime": null, |
|||
"status": "red", |
|||
"dockCode": null |
|||
}, |
|||
{ |
|||
"customerCode": "10000055", |
|||
"customerName": "北京奔驰大兴工厂", |
|||
"customerAdrssCode": "BBACDX01", |
|||
"customerAdrss": "北京市大兴区博兴路8号", |
|||
"deliverRequestNumber": "DLP202401240013", |
|||
"deliverPlanDate": "2024-01-26T13:15:00", |
|||
"deliverPlanTime": null, |
|||
"status": "red", |
|||
"dockCode": null |
|||
},{ |
|||
"customerCode": "10000059", |
|||
"customerName": "北京瀛海延锋工厂", |
|||
"customerAdrssCode": "YanfYH", |
|||
"customerAdrss": "北京市北京经济技术开发区(大兴)瀛海镇瀛顺路55号院2号", |
|||
"deliverRequestNumber": "DLP202401240009", |
|||
"deliverPlanDate": "2024-01-25T17:00:00", |
|||
"deliverPlanTime": null, |
|||
"status": "red", |
|||
"dockCode": null |
|||
}, |
|||
{ |
|||
"customerCode": "10000059", |
|||
"customerName": "北京瀛海延锋工厂", |
|||
"customerAdrssCode": "YanfYH", |
|||
"customerAdrss": "北京市北京经济技术开发区(大兴)瀛海镇瀛顺路55号院2号", |
|||
"deliverRequestNumber": "DLP202401240010", |
|||
"deliverPlanDate": "2024-01-25T20:00:00", |
|||
"deliverPlanTime": null, |
|||
"status": "red", |
|||
"dockCode": null |
|||
}, |
|||
{ |
|||
"customerCode": "10000059", |
|||
"customerName": "北京瀛海延锋工厂", |
|||
"customerAdrssCode": "YanfYH", |
|||
"customerAdrss": "北京市北京经济技术开发区(大兴)瀛海镇瀛顺路55号院2号", |
|||
"deliverRequestNumber": "DLP202401240011", |
|||
"deliverPlanDate": "2024-01-26T02:00:00", |
|||
"deliverPlanTime": null, |
|||
"status": "red", |
|||
"dockCode": null |
|||
}, |
|||
{ |
|||
"customerCode": "10000059", |
|||
"customerName": "北京瀛海延锋工厂", |
|||
"customerAdrssCode": "YanfYH", |
|||
"customerAdrss": "北京市北京经济技术开发区(大兴)瀛海镇瀛顺路55号院2号", |
|||
"deliverRequestNumber": "DLP202401240012", |
|||
"deliverPlanDate": "2024-01-26T06:00:00", |
|||
"deliverPlanTime": null, |
|||
"status": "red", |
|||
"dockCode": null |
|||
}, |
|||
{ |
|||
"customerCode": "10000059", |
|||
"customerName": "北京瀛海延锋工厂", |
|||
"customerAdrssCode": "YanfYH", |
|||
"customerAdrss": "北京市北京经济技术开发区(大兴)瀛海镇瀛顺路55号院2号", |
|||
"deliverRequestNumber": "DLP202401240005", |
|||
"deliverPlanDate": "2024-01-26T08:00:00", |
|||
"deliverPlanTime": null, |
|||
"status": "red", |
|||
"dockCode": null |
|||
}, |
|||
{ |
|||
"customerCode": "10000055", |
|||
"customerName": "北京奔驰大兴工厂", |
|||
"customerAdrssCode": "BBACDX01", |
|||
"customerAdrss": "北京市大兴区博兴路8号", |
|||
"deliverRequestNumber": "DLP202401240013", |
|||
"deliverPlanDate": "2024-01-26T13:15:00", |
|||
"deliverPlanTime": null, |
|||
"status": "red", |
|||
"dockCode": null |
|||
},{ |
|||
"customerCode": "10000059", |
|||
"customerName": "北京瀛海延锋工厂", |
|||
"customerAdrssCode": "YanfYH", |
|||
"customerAdrss": "北京市北京经济技术开发区(大兴)瀛海镇瀛顺路55号院2号", |
|||
"deliverRequestNumber": "DLP202401240009", |
|||
"deliverPlanDate": "2024-01-25T17:00:00", |
|||
"deliverPlanTime": null, |
|||
"status": "red", |
|||
"dockCode": null |
|||
}, |
|||
{ |
|||
"customerCode": "10000059", |
|||
"customerName": "北京瀛海延锋工厂", |
|||
"customerAdrssCode": "YanfYH", |
|||
"customerAdrss": "北京市北京经济技术开发区(大兴)瀛海镇瀛顺路55号院2号", |
|||
"deliverRequestNumber": "DLP202401240010", |
|||
"deliverPlanDate": "2024-01-25T20:00:00", |
|||
"deliverPlanTime": null, |
|||
"status": "red", |
|||
"dockCode": null |
|||
}, |
|||
{ |
|||
"customerCode": "10000059", |
|||
"customerName": "北京瀛海延锋工厂", |
|||
"customerAdrssCode": "YanfYH", |
|||
"customerAdrss": "北京市北京经济技术开发区(大兴)瀛海镇瀛顺路55号院2号", |
|||
"deliverRequestNumber": "DLP202401240011", |
|||
"deliverPlanDate": "2024-01-26T02:00:00", |
|||
"deliverPlanTime": null, |
|||
"status": "red", |
|||
"dockCode": null |
|||
}, |
|||
{ |
|||
"customerCode": "10000059", |
|||
"customerName": "北京瀛海延锋工厂", |
|||
"customerAdrssCode": "YanfYH", |
|||
"customerAdrss": "北京市北京经济技术开发区(大兴)瀛海镇瀛顺路55号院2号", |
|||
"deliverRequestNumber": "DLP202401240012", |
|||
"deliverPlanDate": "2024-01-26T06:00:00", |
|||
"deliverPlanTime": null, |
|||
"status": "red", |
|||
"dockCode": null |
|||
}, |
|||
{ |
|||
"customerCode": "10000059", |
|||
"customerName": "北京瀛海延锋工厂", |
|||
"customerAdrssCode": "YanfYH", |
|||
"customerAdrss": "北京市北京经济技术开发区(大兴)瀛海镇瀛顺路55号院2号", |
|||
"deliverRequestNumber": "DLP202401240005", |
|||
"deliverPlanDate": "2024-01-26T08:00:00", |
|||
"deliverPlanTime": null, |
|||
"status": "red", |
|||
"dockCode": null |
|||
}, |
|||
{ |
|||
"customerCode": "10000055", |
|||
"customerName": "北京奔驰大兴工厂", |
|||
"customerAdrssCode": "BBACDX01", |
|||
"customerAdrss": "北京市大兴区博兴路8号", |
|||
"deliverRequestNumber": "DLP202401240013", |
|||
"deliverPlanDate": "2024-01-26T13:15:00", |
|||
"deliverPlanTime": null, |
|||
"status": "red", |
|||
"dockCode": null |
|||
},{ |
|||
"customerCode": "10000059", |
|||
"customerName": "北京瀛海延锋工厂", |
|||
"customerAdrssCode": "YanfYH", |
|||
"customerAdrss": "北京市北京经济技术开发区(大兴)瀛海镇瀛顺路55号院2号", |
|||
"deliverRequestNumber": "DLP202401240009", |
|||
"deliverPlanDate": "2024-01-25T17:00:00", |
|||
"deliverPlanTime": null, |
|||
"status": "red", |
|||
"dockCode": null |
|||
}, |
|||
{ |
|||
"customerCode": "10000059", |
|||
"customerName": "北京瀛海延锋工厂", |
|||
"customerAdrssCode": "YanfYH", |
|||
"customerAdrss": "北京市北京经济技术开发区(大兴)瀛海镇瀛顺路55号院2号", |
|||
"deliverRequestNumber": "DLP202401240010", |
|||
"deliverPlanDate": "2024-01-25T20:00:00", |
|||
"deliverPlanTime": null, |
|||
"status": "red", |
|||
"dockCode": null |
|||
}, |
|||
{ |
|||
"customerCode": "10000059", |
|||
"customerName": "北京瀛海延锋工厂", |
|||
"customerAdrssCode": "YanfYH", |
|||
"customerAdrss": "北京市北京经济技术开发区(大兴)瀛海镇瀛顺路55号院2号", |
|||
"deliverRequestNumber": "DLP202401240011", |
|||
"deliverPlanDate": "2024-01-26T02:00:00", |
|||
"deliverPlanTime": null, |
|||
"status": "red", |
|||
"dockCode": null |
|||
}, |
|||
{ |
|||
"customerCode": "10000059", |
|||
"customerName": "北京瀛海延锋工厂", |
|||
"customerAdrssCode": "YanfYH", |
|||
"customerAdrss": "北京市北京经济技术开发区(大兴)瀛海镇瀛顺路55号院2号", |
|||
"deliverRequestNumber": "DLP202401240012", |
|||
"deliverPlanDate": "2024-01-26T06:00:00", |
|||
"deliverPlanTime": null, |
|||
"status": "red", |
|||
"dockCode": null |
|||
}, |
|||
{ |
|||
"customerCode": "10000059", |
|||
"customerName": "北京瀛海延锋工厂", |
|||
"customerAdrssCode": "YanfYH", |
|||
"customerAdrss": "北京市北京经济技术开发区(大兴)瀛海镇瀛顺路55号院2号", |
|||
"deliverRequestNumber": "DLP202401240005", |
|||
"deliverPlanDate": "2024-01-26T08:00:00", |
|||
"deliverPlanTime": null, |
|||
"status": "red", |
|||
"dockCode": null |
|||
}, |
|||
{ |
|||
"customerCode": "10000055", |
|||
"customerName": "北京奔驰大兴工厂", |
|||
"customerAdrssCode": "BBACDX01", |
|||
"customerAdrss": "北京市大兴区博兴路8号", |
|||
"deliverRequestNumber": "DLP202401240013", |
|||
"deliverPlanDate": "2024-01-26T13:15:00", |
|||
"deliverPlanTime": null, |
|||
"status": "red", |
|||
"dockCode": null |
|||
}, |
|||
] |
|||
// this.currentRowsCopy = _res |
|||
let _rows = this.initRow(res,new Date().getTime()) |
|||
this.initConfig(_rows) |
|||
// this_.$refs['shippingBoard_Ref'].updateRows(rows,0) //如果不需要刷新页面 不需要循环数据 追加数据用此方法 |
|||
}).catch(error => { |
|||
this.dataLoading = false |
|||
console.log(error) |
|||
}) |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="less"> |
|||
.shippingBoardPage{ |
|||
.header-item{ |
|||
font-size: 1rem; |
|||
font-weight: bold; |
|||
} |
|||
.ceil{ |
|||
font-size: 1rem; |
|||
} |
|||
.dv-loading{ |
|||
color: #fff; |
|||
} |
|||
.lineContain{ |
|||
margin: 2rem; |
|||
height: calc(100vh - 10rem); |
|||
} |
|||
.rowStatusBg{ |
|||
// background:rgb(164 161 255 / 82%); |
|||
background:rgb(0 182 255 / 35%); |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
.dv-scroll-board .rows .ceil{ |
|||
padding:0 !important |
|||
} |
|||
} |
|||
</style> |
Loading…
Reference in new issue