安虹睿
11 months ago
7 changed files with 654 additions and 26 deletions
@ -0,0 +1,325 @@ |
|||
<template> |
|||
<div class="boardFullPage reserveBoardPage"> |
|||
<boardHeader |
|||
ref="boardHeader_Ref" |
|||
:title="'收货看板'" |
|||
></boardHeader> |
|||
<dv-loading v-show="dataLoading">Loading...</dv-loading> |
|||
<div class="lineContain"> |
|||
<dv-scroll-board :config="config" ref="reserveBoard_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: 'reserveBoard', |
|||
components:{boardHeader}, |
|||
data () { |
|||
return { |
|||
dataLoading: true, |
|||
// config默认项 |
|||
configDefult:{ |
|||
header:['供应商', '供应商代码', '到货单号', '到货日期', '到货时间窗口','提醒','状态' ], |
|||
waitTime: util.waitTime,//每页停留20秒d |
|||
carousel: 'page', |
|||
// index: true, |
|||
// indexHeader: '序号', |
|||
columnWidth: [350], |
|||
align: ['left','center','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: {} |
|||
} |
|||
}, |
|||
created() { |
|||
this.initConfig() |
|||
this.getList() |
|||
clearInterval(this.intervalId) |
|||
this.intervalId = setInterval(() => { |
|||
this.getList() |
|||
}, 60000)//一分钟刷新数据 |
|||
util.addEventResizeFlesh() |
|||
}, |
|||
destroyed() { |
|||
clearInterval(this.intervalId) |
|||
}, |
|||
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 |
|||
} |
|||
}, |
|||
async getList(){ |
|||
this.dataLoading = true |
|||
this.initConfig() |
|||
// axiosUtil.ajax_get('/api/dashboard/plan-and-actual/plan-actual-list').then(res => { |
|||
this.dataLoading = false |
|||
// if(res.length <= 0){ |
|||
// return |
|||
// } |
|||
let rows = [] |
|||
// 假数据 |
|||
let _res = [ |
|||
{ |
|||
"supplier": "1SHANGHAI ZUNDAR TECHNOLOGY C", |
|||
"supplierCode": "02000373", |
|||
"arrivalNumber": "AVN202312250001", |
|||
"arrivalTime": '2023-12-25 16:50:14', |
|||
"timeSlot": '10~11', |
|||
"remind":"", |
|||
"status":'延迟' |
|||
}, |
|||
{ |
|||
"supplier": "2CANGZHOU JINFU AUTO PARTS CO", |
|||
"supplierCode": "02000414", |
|||
"arrivalNumber": "AVN202311160001", |
|||
"arrivalTime": '2023-11-16 16:26:48', |
|||
"timeSlot": '10~11', |
|||
"remind":"", |
|||
"status":'准时' |
|||
}, |
|||
{ |
|||
"supplier": "3SHANGHAI PRET COMPOSITES CO", |
|||
"supplierCode": "02000305", |
|||
"arrivalNumber": "AVN202309280039", |
|||
"arrivalTime": '2023-11-10 00:00:00', |
|||
"timeSlot": '10~11', |
|||
"remind":"", |
|||
"status":'准时' |
|||
}, |
|||
{ |
|||
"supplier": "4CANGZHOU JINFU AUTO PARTS CO", |
|||
"supplierCode": "02000414", |
|||
"arrivalNumber": "AVN202311090001", |
|||
"arrivalTime": '2023-11-09 15:06:08', |
|||
"timeSlot": '10~11', |
|||
"remind":"", |
|||
"status":'延迟' |
|||
}, |
|||
{ |
|||
"supplier": "5BENECKE CHANGSHUN AUTO TRIM", |
|||
"supplierCode": "02000285", |
|||
"arrivalNumber": "AVN202310250012", |
|||
"arrivalTime": '2023-11-06 00:00:00', |
|||
"timeSlot": '10~11', |
|||
"remind":"", |
|||
"status":'延迟' |
|||
}, |
|||
{ |
|||
"supplier": "6SHANGHAI ZUNDAR TECHNOLOGY C", |
|||
"supplierCode": "02000373", |
|||
"arrivalNumber": "AVN202312250001", |
|||
"arrivalTime": '2023-12-25 16:50:14', |
|||
"timeSlot": '10~11', |
|||
"remind":"", |
|||
"status":'延迟' |
|||
}, |
|||
{ |
|||
"supplier": "7CANGZHOU JINFU AUTO PARTS CO", |
|||
"supplierCode": "02000414", |
|||
"arrivalNumber": "AVN202311160001", |
|||
"arrivalTime": '2023-11-16 16:26:48', |
|||
"timeSlot": '10~11', |
|||
"remind":"", |
|||
"status":'准时' |
|||
}, |
|||
{ |
|||
"supplier": "8SHANGHAI ZUNDAR TECHNOLOGY C", |
|||
"supplierCode": "02000373", |
|||
"arrivalNumber": "AVN202312250001", |
|||
"arrivalTime": '2023-12-25 16:50:14', |
|||
"timeSlot": '10~11', |
|||
"remind":"", |
|||
"status":'延迟' |
|||
}, |
|||
{ |
|||
"supplier": "9CANGZHOU JINFU AUTO PARTS CO", |
|||
"supplierCode": "02000414", |
|||
"arrivalNumber": "AVN202311160001", |
|||
"arrivalTime": '2023-11-16 16:26:48', |
|||
"timeSlot": '10~11', |
|||
"remind":"", |
|||
"status":'准时' |
|||
}, |
|||
{ |
|||
"supplier": "10SHANGHAI PRET COMPOSITES CO", |
|||
"supplierCode": "02000305", |
|||
"arrivalNumber": "AVN202309280039", |
|||
"arrivalTime": '2023-11-10 00:00:00', |
|||
"timeSlot": '10~11', |
|||
"remind":"", |
|||
"status":'准时' |
|||
}, |
|||
{ |
|||
"supplier": "11CANGZHOU JINFU AUTO PARTS CO", |
|||
"supplierCode": "02000414", |
|||
"arrivalNumber": "AVN202311090001", |
|||
"arrivalTime": '2023-11-09 15:06:08', |
|||
"timeSlot": '10~11', |
|||
"remind":"", |
|||
"status":'延迟' |
|||
}, |
|||
{ |
|||
"supplier": "12BENECKE CHANGSHUN AUTO TRIM", |
|||
"supplierCode": "02000285", |
|||
"arrivalNumber": "AVN202310250012", |
|||
"arrivalTime": '2023-11-06 00:00:00', |
|||
"timeSlot": '10~11', |
|||
"remind":"", |
|||
"status":'延迟' |
|||
}, |
|||
{ |
|||
"supplier": "13SHANGHAI ZUNDAR TECHNOLOGY C", |
|||
"supplierCode": "02000373", |
|||
"arrivalNumber": "AVN202312250001", |
|||
"arrivalTime": '2023-12-25 16:50:14', |
|||
"timeSlot": '10~11', |
|||
"remind":"", |
|||
"status":'延迟' |
|||
}, |
|||
{ |
|||
"supplier": "14CANGZHOU JINFU AUTO PARTS CO", |
|||
"supplierCode": "02000414", |
|||
"arrivalNumber": "AVN202311160001", |
|||
"arrivalTime": '2023-11-16 16:26:48', |
|||
"timeSlot": '10~11', |
|||
"remind":"", |
|||
"status":'准时' |
|||
}, |
|||
{ |
|||
"supplier": "15SHANGHAI ZUNDAR TECHNOLOGY C", |
|||
"supplierCode": "02000373", |
|||
"arrivalNumber": "AVN202312250001", |
|||
"arrivalTime": '2023-12-25 16:50:14', |
|||
"timeSlot": '10~11', |
|||
"remind":"", |
|||
"status":'延迟' |
|||
}, |
|||
{ |
|||
"supplier": "16CANGZHOU JINFU AUTO PARTS CO", |
|||
"supplierCode": "02000414", |
|||
"arrivalNumber": "AVN202311160001", |
|||
"arrivalTime": '2023-11-16 16:26:48', |
|||
"timeSlot": '10~11', |
|||
"remind":"", |
|||
"status":'准时' |
|||
}, |
|||
{ |
|||
"supplier": "17SHANGHAI PRET COMPOSITES CO", |
|||
"supplierCode": "02000305", |
|||
"arrivalNumber": "AVN202309280039", |
|||
"arrivalTime": '2023-11-10 00:00:00', |
|||
"timeSlot": '10~11', |
|||
"remind":"", |
|||
"status":'准时' |
|||
}, |
|||
{ |
|||
"supplier": "18CANGZHOU JINFU AUTO PARTS CO", |
|||
"supplierCode": "02000414", |
|||
"arrivalNumber": "AVN202311090001", |
|||
"arrivalTime": '2023-11-09 15:06:08', |
|||
"timeSlot": '10~11', |
|||
"remind":"", |
|||
"status":'延迟' |
|||
}, |
|||
{ |
|||
"supplier": "19BENECKE CHANGSHUN AUTO TRIM", |
|||
"supplierCode": "02000285", |
|||
"arrivalNumber": "AVN202310250012", |
|||
"arrivalTime": '2023-11-06 00:00:00', |
|||
"timeSlot": '10~11', |
|||
"remind":"", |
|||
"status":'延迟' |
|||
}, |
|||
{ |
|||
"supplier": "20SHANGHAI ZUNDAR TECHNOLOGY C", |
|||
"supplierCode": "02000373", |
|||
"arrivalNumber": "AVN202312250001", |
|||
"arrivalTime": '2023-12-25 16:50:14', |
|||
"timeSlot": '10~11', |
|||
"remind":"", |
|||
"status":'延迟' |
|||
}, |
|||
{ |
|||
"supplier": "21CANGZHOU JINFU AUTO PARTS CO", |
|||
"supplierCode": "02000414", |
|||
"arrivalNumber": "AVN202311160001", |
|||
"arrivalTime": '2023-11-16 16:26:48', |
|||
"timeSlot": '10~11', |
|||
"remind":"", |
|||
"status":'准时' |
|||
}, |
|||
] |
|||
_res.forEach(item=>{ |
|||
let _item = [] |
|||
_item[0] = item.supplier;//供应商 |
|||
_item[1] = item.supplierCode;//供应商代码 |
|||
_item[2] = item.arrivalNumber;//到货单号 |
|||
_item[3] = item.arrivalTime;//到货日期 |
|||
_item[4] = item.timeSlot;//到货窗口时间 |
|||
_item[5] = item.remind;//提醒 |
|||
_item[6] = item.status;//状态 |
|||
if(item.status == '延迟'){ |
|||
_item[6] = `<span class="statusBlockItem statusBlockItem_warning">${item.status}</span>`;//状态 |
|||
}else{ |
|||
_item[6] = `<span class="statusBlockItem statusBlockItem_normal">${item.status}</span>`;//状态 |
|||
} |
|||
rows.push(_item) |
|||
}) |
|||
this.initConfig(rows) |
|||
// this_.$refs['reserveBoard_Ref'].updateRows(rows,0) //如果不需要刷新页面 不需要循环数据 追加数据用此方法 |
|||
// }).catch(error => { |
|||
// this.dataLoading = false |
|||
// console.log(error) |
|||
// }) |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="less"> |
|||
.reserveBoardPage{ |
|||
.header-item{ |
|||
font-size: 1rem; |
|||
font-weight: bold; |
|||
} |
|||
.ceil{ |
|||
font-size: 1rem; |
|||
} |
|||
.dv-loading{ |
|||
color: #fff; |
|||
} |
|||
.lineContain{ |
|||
margin: 2rem; |
|||
height: calc(100vh - 10rem); |
|||
} |
|||
} |
|||
</style> |
@ -0,0 +1,271 @@ |
|||
<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 { |
|||
dataLoading: true, |
|||
// config默认项 |
|||
configDefult:{ |
|||
header:['客户', '客户渎职', '计划发运单号', '计划发运日期', '计划发运时间','提醒','状态' ], |
|||
waitTime: util.waitTime,//每页停留20秒d |
|||
carousel: 'page', |
|||
// index: true, |
|||
// indexHeader: '序号', |
|||
// columnWidth: [200], |
|||
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: {} |
|||
} |
|||
}, |
|||
created() { |
|||
this.initConfig() |
|||
this.getList() |
|||
clearInterval(this.intervalId) |
|||
this.intervalId = setInterval(() => { |
|||
this.getList() |
|||
}, 60000)//一分钟刷新数据 |
|||
util.addEventResizeFlesh() |
|||
}, |
|||
destroyed() { |
|||
clearInterval(this.intervalId) |
|||
}, |
|||
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 |
|||
} |
|||
}, |
|||
async getList(){ |
|||
this.dataLoading = true |
|||
this.initConfig() |
|||
// axiosUtil.ajax_get('/api/dashboard/plan-and-actual/plan-actual-list').then(res => { |
|||
this.dataLoading = false |
|||
// if(res.length <= 0){ |
|||
// return |
|||
// } |
|||
let rows = [] |
|||
// 假数据 |
|||
let _res = [ |
|||
{ |
|||
"customer": "IACCOTDA", |
|||
"customerAddressCode": "北美Topper库位", |
|||
"number": "DLP202311230001", |
|||
"planDate": '2023-12-25', |
|||
"planTime": '16:50:14', |
|||
"remind":"", |
|||
"status":'延迟' |
|||
}, |
|||
{ |
|||
"customer": "IACCOTDA", |
|||
"customerAddressCode": "上海起帆恺瑞国际物流有限公司", |
|||
"number": "DLP202312200001", |
|||
"planDate": '2023-12-20', |
|||
"planTime": '09:10:00', |
|||
"remind":"", |
|||
"status":'准时' |
|||
}, |
|||
{ |
|||
"customer": "10000054", |
|||
"customerAddressCode": "Hongxiang", |
|||
"number": "DLP202311240002", |
|||
"planDate": '2023-11-24', |
|||
"planTime": '10:11:00', |
|||
"remind":"", |
|||
"status":'准时' |
|||
}, |
|||
{ |
|||
"customer": "10000059", |
|||
"customerAddressCode": "上海起帆恺瑞国际物流有限公司", |
|||
"number": "DLP202311230001", |
|||
"planDate": '2023-11-23', |
|||
"planTime": '16:04:00', |
|||
"remind":"", |
|||
"status":'延迟' |
|||
}, |
|||
{ |
|||
"customer": "10000058", |
|||
"customerAddressCode": "Hongxiang", |
|||
"number": "DLP202311060003", |
|||
"planDate": '2023-11-19', |
|||
"planTime": '02:00:00', |
|||
"remind":"", |
|||
"status":'延迟' |
|||
}, |
|||
{ |
|||
"customer": "IACCOTDA", |
|||
"customerAddressCode": "北美Topper库位", |
|||
"number": "DLP202311230001", |
|||
"planDate": '2023-12-25', |
|||
"planTime": '16:50:14', |
|||
"remind":"", |
|||
"status":'延迟' |
|||
}, |
|||
{ |
|||
"customer": "IACCOTDA", |
|||
"customerAddressCode": "上海起帆恺瑞国际物流有限公司", |
|||
"number": "DLP202312200001", |
|||
"planDate": '2023-12-20', |
|||
"planTime": '09:10:00', |
|||
"remind":"", |
|||
"status":'准时' |
|||
}, |
|||
{ |
|||
"customer": "10000054", |
|||
"customerAddressCode": "Hongxiang", |
|||
"number": "DLP202311240002", |
|||
"planDate": '2023-11-24', |
|||
"planTime": '10:11:00', |
|||
"remind":"", |
|||
"status":'准时' |
|||
}, |
|||
{ |
|||
"customer": "10000059", |
|||
"customerAddressCode": "上海起帆恺瑞国际物流有限公司", |
|||
"number": "DLP202311230001", |
|||
"planDate": '2023-11-23', |
|||
"planTime": '16:04:00', |
|||
"remind":"", |
|||
"status":'延迟' |
|||
}, |
|||
{ |
|||
"customer": "10000058", |
|||
"customerAddressCode": "Hongxiang", |
|||
"number": "DLP202311060003", |
|||
"planDate": '2023-11-19', |
|||
"planTime": '02:00:00', |
|||
"remind":"", |
|||
"status":'延迟' |
|||
}, |
|||
{ |
|||
"customer": "IACCOTDA", |
|||
"customerAddressCode": "北美Topper库位", |
|||
"number": "DLP202311230001", |
|||
"planDate": '2023-12-25', |
|||
"planTime": '16:50:14', |
|||
"remind":"", |
|||
"status":'延迟' |
|||
}, |
|||
{ |
|||
"customer": "IACCOTDA", |
|||
"customerAddressCode": "上海起帆恺瑞国际物流有限公司", |
|||
"number": "DLP202312200001", |
|||
"planDate": '2023-12-20', |
|||
"planTime": '09:10:00', |
|||
"remind":"", |
|||
"status":'准时' |
|||
}, |
|||
{ |
|||
"customer": "10000054", |
|||
"customerAddressCode": "Hongxiang", |
|||
"number": "DLP202311240002", |
|||
"planDate": '2023-11-24', |
|||
"planTime": '10:11:00', |
|||
"remind":"", |
|||
"status":'准时' |
|||
}, |
|||
{ |
|||
"customer": "10000059", |
|||
"customerAddressCode": "上海起帆恺瑞国际物流有限公司", |
|||
"number": "DLP202311230001", |
|||
"planDate": '2023-11-23', |
|||
"planTime": '16:04:00', |
|||
"remind":"", |
|||
"status":'延迟' |
|||
}, |
|||
{ |
|||
"customer": "10000058", |
|||
"customerAddressCode": "Hongxiang", |
|||
"number": "DLP202311060003", |
|||
"planDate": '2023-11-19', |
|||
"planTime": '02:00:00', |
|||
"remind":"", |
|||
"status":'延迟' |
|||
}, |
|||
] |
|||
_res.forEach(item=>{ |
|||
let _item = [] |
|||
_item[0] = item.customer;//客户 |
|||
_item[1] = item.customerAddressCode;//客户地址 |
|||
_item[2] = item.number;//计划发运单号 |
|||
_item[3] = item.planDate;//计划发运日期 |
|||
_item[4] = item.planTime;//计划发运时间 |
|||
_item[5] = item.remind;//提醒 |
|||
_item[6] = item.status;//状态 |
|||
if(item.status == '延迟'){ |
|||
_item[6] = `<span class="statusBlockItem statusBlockItem_warning">${item.status}</span>`;//状态 |
|||
}else{ |
|||
_item[6] = `<span class="statusBlockItem statusBlockItem_normal">${item.status}</span>`;//状态 |
|||
} |
|||
rows.push(_item) |
|||
}) |
|||
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); |
|||
} |
|||
} |
|||
</style> |
Loading…
Reference in new issue