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.
515 lines
25 KiB
515 lines
25 KiB
<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>
|