Browse Source

【埃驰看板】发运看板前端分页+定时刷新底色处理

master
安虹睿 8 months ago
parent
commit
b9bc3231a1
  1. 72
      PC/IAC_LargeScreen/src/views/shippingBoard.vue
  2. 515
      PC/IAC_LargeScreen/src/views/shippingBoard_old.vue

72
PC/IAC_LargeScreen/src/views/shippingBoard.vue

@ -21,13 +21,16 @@ export default {
components:{boardHeader},
data () {
return {
intervalId:null,
// intervalIdChangeBg:null,
intervalId:null,//
intervalIdChangeData:null,//
intervalIdChangeBg:null,//
dataLoading: true,
currentPage:1,//
allData:null,//
// config
configDefult:{
header:['客户', '客户地址', '计划发运单号', '计划发运日期', '计划发运时间','发货口','状态' ],
waitTime: util.waitTime,
waitTime: 0,//util.waitTime,
carousel: 'page',
// index: true,
// indexHeader: '',
@ -41,29 +44,45 @@ export default {
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)
//
clearInterval(this.intervalIdChangeData)
this.intervalIdChangeData = setInterval(() => {
this.getCurrentPageData()
this.initConfig(this.initRow(this.currentData,new Date().getTime()))
}, util.waitTime)
// 1
clearInterval(this.intervalIdChangeBg)
this.intervalIdChangeBg = setInterval(() => {
this.initConfig(this.initRow(this.currentData,new Date().getTime()))
}, 60000)
},
destroyed() {
clearInterval(this.intervalId)
clearInterval(this.intervalIdChangeData)
clearInterval(this.intervalIdChangeBg)
},
methods: {
getCurrentPageData(){
let _maxPage = Math.ceil(this.allData.length / this.configDefult.rowNum)
if(this.currentPage > _maxPage){
this.currentPage = 1
}
let _pageB = (Number(this.currentPage) - 1) * this.configDefult.rowNum
let _pageE = Number(this.currentPage) * this.configDefult.rowNum
this.currentData = this.allData.slice(_pageB,_pageE)
this.currentPage ++
},
init(){
this.initConfig()
this.getList()
@ -89,14 +108,11 @@ export default {
},
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) || ''
@ -152,7 +168,7 @@ export default {
"customerAdrssCode": "YanfYH",
"customerAdrss": "1北京市北京经济技术开发区(大兴)瀛海镇瀛顺路55号院2号",
"deliverRequestNumber": "DLP202401240009",
"deliverPlanDate": "2024-01-25T17:00:00",
"deliverPlanDate": "2024-02-06T11:59:00",
"deliverPlanTime": null,
"status": "red",
"dockCode": null
@ -163,7 +179,7 @@ export default {
"customerAdrssCode": "YanfYH",
"customerAdrss": "2北京市北京经济技术开发区(大兴)瀛海镇瀛顺路55号院2号",
"deliverRequestNumber": "DLP202401240010",
"deliverPlanDate": "2024-01-25T20:00:00",
"deliverPlanDate": "2024-02-05T11:59:00",
"deliverPlanTime": null,
"status": "red",
"dockCode": null
@ -261,7 +277,7 @@ export default {
"customerAdrssCode": "YanfYH",
"customerAdrss": "11北京市北京经济技术开发区(大兴)瀛海镇瀛顺路55号院2号",
"deliverRequestNumber": "DLP202401240005",
"deliverPlanDate": "2024-01-26T15:50:00",
"deliverPlanDate": "2024-02-06T11:40:00",
"deliverPlanTime": null,
"status": "red",
"dockCode": null
@ -471,12 +487,23 @@ export default {
"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.allData = res
this.getCurrentPageData()
let _rows = this.initRow(this.currentData,new Date().getTime())
this.initConfig(_rows)
// this_.$refs['shippingBoard_Ref'].updateRows(rows,0) //
this.$refs['shippingBoard_Ref'].updateRows(_rows,0) //
}).catch(error => {
this.dataLoading = false
console.log(error)
@ -504,9 +531,12 @@ export default {
}
.rowStatusBg{
// background:rgb(164 161 255 / 82%);
background:rgb(0 182 255 / 35%);
background:rgb(227 164 83);
width: 100%;
height: 100%;
border: #bf781c solid 1px;
border-left: 0;
border-right: 0;
}
.dv-scroll-board .rows .ceil{
padding:0 !important

515
PC/IAC_LargeScreen/src/views/shippingBoard_old.vue

@ -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,//20d
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…
Cancel
Save