<template>
|
<div id="data-view" >
|
<dv-full-screen-container>
|
<top-header/>
|
<template>
|
<el-row>
|
<el-col :span="13">
|
<el-row class="header-left-task" type="flex" align="center" >
|
<el-col v-for="(task, index) in tasks" :key="index" >
|
<el-row type="flex" align="center" justify="center" @click.native="borderClick(task)">
|
<dv-border-box-2>
|
<el-card class="header-card" >
|
<el-row>
|
<el-col class="heaer-label-column" v-for="(item, index) in Object.keys(waveLabels)" :key="index">
|
<div class="header-card-label" >{{ waveLabels[item] }}</div>
|
<div class="header-card-val" >{{ task[item] }}</div>
|
</el-col>
|
</el-row>
|
</el-card>
|
</dv-border-box-2>
|
</el-row>
|
</el-col>
|
</el-row>
|
<el-row class="detl-info-row">
|
<el-card class="detl-info-card">
|
<el-table :data="mergeTaskDetl" class="table-matnr" @row-click="selectRow">
|
<el-table-column v-for="(item,index) in Object.keys(detlLabels)" :prop="item" :label="detlLabels[item]" :key="index"/>
|
</el-table>
|
</el-card>
|
</el-row>
|
<el-row class="pick-order-detl">
|
<dv-border-box11 title="拣货订单明细" class="detl-box-border">
|
<div class="detl-box-padding"></div>
|
<div class="order-detl-list">
|
<div class="main-content" v-for="(item,index) in taskDetls" @click="selectView(item)" :key="index">
|
<digital-flop :data = item />
|
</div>
|
</div>
|
</dv-border-box11>
|
</el-row>
|
</el-col>
|
<el-col :span="11">
|
<el-row class="order-box-row">
|
<dv-border-box-11 title="订单完成情况" class="order-box">
|
<el-table :data="orders" v-if="orders.length > 0" class="order-table">
|
<el-table-column v-for="(item, dex) in Object.keys(orderStatus)" :prop="item" :label="orderStatus[item]" :key="dex" >
|
<template slot-scope="scope">
|
<el-button slot="reference" type="text" @click.native.prevent="print(scope.$index, orders)" class="btnPrint" v-if="item === 'action'" >打印明细</el-button>
|
<div v-else class="ship-order-list">
|
{{scope.row[item]}}
|
</div>
|
</template>
|
</el-table-column>
|
</el-table>
|
<el-empty description="暂无投放订单" class="empty-padding" v-else></el-empty>
|
<el-popover
|
placement="right"
|
trigger="manual"
|
class="popover-order"
|
v-model="visible">
|
<template>
|
<div>
|
<span>选择目标发货区</span>
|
<el-divider/>
|
<el-row :gutter="15">
|
<el-col v-for="(palt, index) in platforms" :key="index" :span="7" @click.native="bindShipping(palt)">
|
<div class="platform" >{{palt.platformNo}}</div>
|
</el-col>
|
</el-row>
|
</div>
|
</template>
|
</el-popover>
|
</dv-border-box-11>
|
</el-row>
|
<el-row type="flex" align="center" id="datav">
|
<dv-border-box-11 title="播种墙" class="pick-wall" >
|
<!-- <el-row type="flex" align="center" justify="center" class="pick-wall-circle" >-->
|
<!-- <el-col :span="1">-->
|
<!-- <p class="pick-wall-tip"></p>-->
|
<!-- </el-col>-->
|
<!-- <el-col :span="22">-->
|
<!-- <p>绿色：任务已完成 黄色：等待中 红色：播种中</p>-->
|
<!-- </el-col>-->
|
<!-- </el-row>-->
|
<div class="pick-wall-box">
|
<el-col :span="6" v-for="(item, index) in seedBracket" :key="index">
|
<div class="seed-bracket" :style="getLightStatus(item)" />
|
</el-col>
|
</div>
|
</dv-border-box-11>
|
</el-row>
|
</el-col>
|
</el-row>
|
</template>
|
</dv-full-screen-container>
|
<template>
|
<el-dialog :visible.sync="show" fullscreen>
|
<el-row type="flex" align="center" justify="center">
|
<dv-border-box-10 class="dialog-confirm" v-if="show">
|
<div class="container">
|
<el-row :gutter="25" >
|
<el-col :span="12">
|
<el-row>
|
<el-col class="header-title">复核当前作业中数量</el-col>
|
<el-col style="text-align: center">
|
<el-col :span="10" class="content">总需求数量：</el-col>
|
<el-col :span="8" class="content-value">{{ selected.anfme }}</el-col>
|
</el-col>
|
<el-col>
|
<el-col :span="10" class="content">剩余需求数量：</el-col>
|
<el-col :span="8" class="content-value">{{ selected.anfme - selected.workQty }}</el-col>
|
</el-col>
|
</el-row>
|
</el-col>
|
<el-col :span="12" >
|
<el-row>
|
<el-col>
|
<div class="header-title">拣货数量：</div>
|
<dv-border-box-10 class="box">
|
<el-input type="text" v-model="workQty"></el-input>
|
</dv-border-box-10>
|
</el-col>
|
</el-row>
|
</el-col>
|
</el-row>
|
<el-row :gutter="100" style="margin:25px;">
|
<el-col :span="12">
|
<el-button type="success" class="btn" @click="review">确认</el-button>
|
</el-col>
|
<el-col :span="12">
|
<el-button type="danger" class="btn" @click="delSow">取消</el-button>
|
</el-col>
|
</el-row>
|
</div>
|
</dv-border-box-10>
|
</el-row>
|
</el-dialog>
|
</template>
|
</div>
|
</template>
|
|
<script>
|
import topHeader from './topHeader'
|
import print from 'print-js'
|
import digitalFlop from './digitalFlop'
|
|
export default {
|
name: 'DataView',
|
components: {
|
topHeader,
|
digitalFlop
|
},
|
data () {
|
return {
|
visible: false,
|
waveSeeds: [],
|
tasks: [],
|
taskDetls: [],
|
mergeTaskDetl: [],
|
currTask: {},
|
detlLabels: {
|
matnr: '物料码',
|
batch: '批次',
|
anfme: '拣货任务数量',
|
stock: '库存数量'
|
},
|
orderStatus: {
|
orderNo: '订单编码',
|
orderStatus: '订单状态',
|
action: '操作'
|
},
|
waveLabels: {
|
barcode: '拖盘码',
|
taskNo: '任务编号',
|
waveNo: '波次',
|
anfme: '数量',
|
title: '作业类型'
|
},
|
waveNo: '',
|
header: {},
|
orders: [],
|
seedBracket: [],
|
platforms: [],
|
selectOrder: {},
|
selected: {},
|
workQty: 0, //弹窗拣货数量
|
show: false,
|
}
|
},
|
created () {
|
let that = this
|
setInterval(() => {
|
that.refreshData()
|
}, 10000)
|
},
|
|
computed: {
|
getLightStatus() {
|
return (item)=> {
|
if (item.orderNo != undefined && item.orderNo != null && item.orderNo != '') {
|
return 'background: yellow;'
|
} else {
|
return 'background: gainsboro;'
|
}
|
}
|
}
|
},
|
methods: {
|
refreshData() {
|
//获取当前执行任务
|
this.getWaves()
|
//获取当前播种墙库位信息
|
this.getSeedLoc()
|
//获取所有发货暂存区
|
this.getAllPlatforms()
|
},
|
printPage() {
|
// let element = document.querySelector('#datav');
|
// let el = this.$refs.datav
|
// console.log(this.$refs.datav)
|
// console.log(element)
|
// if (el) {
|
// let pdfLoader = new PdfLoader(el, 'pdf');
|
// pdfLoader.outPutPdfFn('datav')
|
// }
|
print( 'datav','html')
|
|
},
|
|
//点击打印明细按钮
|
print(e, data) {
|
this.visible = true
|
this.selectOrder = data[e]
|
},
|
//拍灯容器流动
|
lightClick(item) {
|
if (item.platformId == null || item.platformId == undefined || item.platformId == '') {
|
this.$message.error('请打印订单明细，并选择目标集货区！！')
|
return
|
}
|
this.slapLight(item)
|
},
|
//订单入库集货区,并打印单据
|
bindShipping(plat) {
|
this.visible = false
|
let order = this.selectOrder
|
if (order == null) {
|
this.$message.error("当前订单信息不存在，请联系管理员！！")
|
return
|
}
|
let that = this
|
// eslint-disable-next-line no-undef
|
$ajax.post('/api/bind/shipping/platform', {orderId: order.id, waveId: order.waveId, platformId: plat.id}).then(response => {
|
if (response.code === 200) {
|
that.refreshData()
|
//隐藏发货区,执行打印
|
} else {
|
this.$message.error(response.msg)
|
}
|
})
|
},
|
//获取所有集货区
|
getAllPlatforms() {
|
let that = this
|
// eslint-disable-next-line no-undef
|
$ajax.get('/out/stock/all/platforms').then(response => {
|
if (response.code === 200) {
|
that.platforms = response.data
|
console.log(that.platforms)
|
}
|
})
|
},
|
|
slapLight(item) {
|
let that = this
|
if (that.tasks == null || that.tasks.length < 1) {
|
this.$message.error('当前任务号为空，无法执行！！')
|
return
|
}
|
let taskNo = that.tasks[0].taskNo
|
// eslint-disable-next-line no-undef
|
$ajax.post('/out/stock/slap/light', {taskNo: taskNo, siteNo: item.siteNo, orderNo: item.orderNo}).then(response => {
|
if (response.code === 200) {
|
//刷新播种墙
|
this.getSeedLoc()
|
}
|
})
|
},
|
|
/**
|
* 获取播种库位状态
|
*/
|
getSeedLoc() {
|
let that = this
|
// eslint-disable-next-line no-undef
|
$ajax.get('wave/seed/locs/').then(response => {
|
if (response.code === 200) {
|
that.seedBracket = response.data
|
}
|
})
|
},
|
/**
|
* 获取波次订单完成状态
|
* @param waveNo
|
*/
|
getWaveOrders(waveNo) {
|
let that = this
|
// eslint-disable-next-line no-undef
|
$ajax.get('wave/orders/' + this.waveNo).then(response => {
|
if (response.code === 200) {
|
that.orders = response.data
|
}
|
})
|
},
|
selectRow (row, index) {
|
this.currTask = row
|
},
|
/**
|
* 头部任务栏，支持多任务显示。可手动切换
|
* @param data
|
*/
|
borderClick (data) {
|
// this.getMergeTaskDetl(data.taskNo)
|
},
|
/**
|
* 波次播种
|
*/
|
review () {
|
for (let i = 0; i < this.mergeTaskDetl.length; i++) {
|
if (this.mergeTaskDetl[i].matnr === this.selected.matnr && this.workQty > this.mergeTaskDetl[i].anfme) {
|
this.$message({
|
message: '拣货数量不能大于任务数量！！',
|
type: 'error'
|
})
|
return
|
}
|
}
|
//隐藏弹框
|
this.show = false
|
// eslint-disable-next-line no-undef
|
$ajax.post('wave/sow/review', { waveSeedId: this.selected.id, reviewNum: this.workQty }).then(response => {
|
if (response.code === 200) {
|
this.getWaves()
|
} else {
|
this.$message({
|
message: response.msg,
|
type: 'error'
|
})
|
}
|
})
|
},
|
delSow () {
|
this.show = false
|
// eslint-disable-next-line no-undef
|
// $ajax.get('wave/sow/remove/' + this.selected.id).then(response => {
|
// if (response.code === 200) {
|
// this.getWaves()
|
// }
|
// })
|
},
|
selectView (item) {
|
if (item.siteNo == undefined && item.siteNo == null && item.siteNo == '') {
|
this.$message({
|
message: '请绑定播种站点后，再进行播种！！',
|
type: 'error'
|
})
|
return
|
}
|
this.show = true
|
this.workQty = item.workQty
|
this.selected = item
|
},
|
|
getWaves () {
|
let that = this
|
// eslint-disable-next-line no-undef
|
$ajax.get('wave/sow/tasks').then(response => {
|
if (response.code === 200) {
|
that.tasks = []
|
// this.show = false
|
that.tasks.push(...response.data)
|
//获取合并波次任务明细
|
that.getMergeTaskDetl(that.tasks[0].taskNo)
|
//获取波次订单状态
|
that.waveNo = that.tasks[0].waveNo
|
that.getWaveOrders()
|
//刷新播种墙信息
|
this.getSeedLoc()
|
}
|
})
|
|
},
|
|
getMergeTaskDetl (taskNo) {
|
let that = this
|
// eslint-disable-next-line no-undef
|
$ajax.get('wave/sow/task/detl/' + taskNo).then(response => {
|
if (response.code === 200) {
|
that.mergeTaskDetl = []
|
that.mergeTaskDetl.push(...response.data)
|
that.getTaskDetl(that.mergeTaskDetl[0])
|
}
|
})
|
},
|
|
getTaskDetl (data) {
|
let that = this
|
// eslint-disable-next-line no-undef
|
$ajax.post('wave/task/detl/qutify/', { taskNo: data.taskNo, matnr: data.matnr }).then(response => {
|
if (response.code === 200) {
|
that.taskDetls = []
|
// this.show = false
|
that.taskDetls.push(...response.data)
|
}
|
})
|
}
|
}
|
}
|
</script>
|
|
<style lang="less">
|
@media screen and (max-width: 1920px){
|
#data-view {
|
width: 100%;
|
height: 100%;
|
background-color: #030409;
|
color: #fff;
|
|
#dv-full-screen-container {
|
background-image: url('./img/bg.png');
|
background-size: 100% 100%;
|
box-shadow: 0 0 3px blue;
|
display: flex;
|
flex-direction: column;
|
}
|
|
.main-content {
|
margin: 5px 0;
|
}
|
|
.pick-order-detl {
|
padding: 0 15px;
|
.detl-box-border {
|
height: 55vh;
|
.detl-box-padding {
|
height: 65px
|
}
|
}
|
}
|
|
.dialog-confirm {
|
text-align: center;
|
color: white;
|
margin: 20vh;
|
.container {
|
padding: 45px 60px;
|
.btn {
|
width: 30vh;height: 7vh;font-size: 23px;
|
}
|
.header-title {
|
font-size: 24px;
|
font-style: italic;
|
padding: 10px;
|
}
|
|
.box {
|
height:8vh;
|
width: 20vh;
|
margin: auto;
|
text-align: center;
|
}
|
.content {
|
font-size: 20px;
|
text-align: end;
|
padding: 10px;
|
}
|
.content-value {
|
padding: 10px;
|
text-align: start;font-size: 20px;
|
}
|
}
|
}
|
|
.pick-wall {
|
padding: 60px 10px 10px 10px;
|
height: 47vh;
|
|
.pick-wall-box {
|
.seed-bracket {
|
background: gainsboro;
|
margin: 15px;
|
height: 110px;
|
}
|
.seed-bracket .el-col .el-col-24 :hover {
|
background: white;
|
}
|
}
|
|
.pick-wall-circle {
|
padding: 10px;margin: 10px; background-color: #50bfff2e;
|
.pick-wall-tip {
|
height: 25px;
|
width: 1px;
|
background: #03d3ec;
|
border-left: 5px solid #50bfff
|
}
|
|
span {
|
margin: 2px;
|
}
|
}
|
}
|
|
.header-left-task {
|
display: flex;
|
padding: 15px 15px 5px 15px;
|
margin-bottom: 0px !important;
|
|
.header-card {
|
margin: 10px;height: 120px;
|
text-align: center;
|
padding: 15px;
|
|
.heaer-label-column {
|
min-width: 170px;
|
width: auto;
|
.header-card-label {
|
font-size: 25px;
|
font-style: oblique;
|
padding: 5px;
|
color: white;
|
}
|
.header-card-val {
|
font-size: 20px;
|
padding: 10px;
|
color: orange;
|
}
|
}
|
}
|
}
|
|
.detl-info-row {
|
padding: 0 15px;
|
|
.detl-info-card {
|
|
}
|
|
}
|
|
.order-box-row {
|
width: 84vh;
|
height: 33vh;
|
|
.order-box {
|
padding:0px 30px;
|
|
.order-table {
|
width: 74vh;
|
padding-top: 65px;
|
height: 275px;
|
|
.popover-order {
|
width: 300px;
|
|
.platform {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
height: 80px;
|
background-color: #03d3ec;
|
margin: 5px;
|
text-align: center;
|
}
|
}
|
|
.ship-order-list {
|
font-size: 18px; color: white;
|
}
|
}
|
}
|
.empty-padding {
|
padding-top: 105px;
|
.el-empty__image {
|
height: 100px;
|
}
|
}
|
}
|
.order-detl-list {
|
overflow: hidden;
|
overflow-y: scroll;
|
height: 43vh;
|
padding: 0 15px;
|
}
|
|
.el-card {
|
background: rgba(8,32,92, 0.5) !important;
|
}
|
|
.bounce-enter-active {
|
animation: bounce-in 0.5s;
|
}
|
.bounce-leave-active {
|
animation: bounce-in 0.5s reverse;
|
}
|
@keyframes bounce-in {
|
0% {
|
transform: scale(0);
|
}
|
50% {
|
transform: scale(1.25);
|
}
|
100% {
|
transform: scale(1);
|
}
|
}
|
|
.el-input__inner {
|
background: rgba(8,32,92, 0.5) !important;
|
border: 0 !important;
|
height: unset !important;
|
line-height: 80px !important;
|
font-size: 30px !important;
|
color: white !important;
|
text-align: center !important;
|
}
|
|
.el-dialog {
|
background: rgba(8,32,92, 0.9) !important;
|
}
|
|
.el-row {
|
margin-bottom: 20px;
|
&:last-child {
|
margin-bottom: 0;
|
}
|
}
|
.el-col {
|
border-radius: 4px;
|
}
|
|
.el-dialog__wrapper {
|
top: 0px !important;
|
}
|
|
.table-matnr {
|
height: 26vh;
|
}
|
|
.el-table {
|
background-color: unset !important;
|
color: white !important;
|
flex: 0.7 !important;
|
font-style: italic !important;
|
}
|
|
.el-table::before {
|
height: 0px !important;
|
}
|
|
.el-table .cell {
|
font-size: 23px !important;
|
color: white !important;
|
}
|
|
.el-table tr {
|
background-color: unset !important;
|
}
|
|
.el-table th.el-table__cell {
|
background-color: unset !important;
|
}
|
|
/* 用来设置当前页面element全局table 选中某行时的背景色*/
|
.el-table__body tr.current-row > td {
|
background-color: #92cbf1 !important;
|
color: #fff;
|
}
|
|
/*鼠标移入某行时的背景色*/
|
.el-table--enable-row-hover .el-table__body tr:hover > td {
|
background-color: #071539 !important;
|
/* color: #fff; */
|
}
|
|
}
|
}
|
|
|
@media screen and (max-width: 1281px) {
|
#data-view {
|
.header-left-task {
|
padding: 5px 15px 5px 15px;
|
|
.header-card {
|
margin: 2px;
|
height: 70px;
|
padding: 2px;
|
|
.el-card__body {
|
padding: 5px 20px;
|
}
|
|
.heaer-label-column{
|
max-width: 130px;
|
min-width: 75px;
|
width: auto;
|
.header-card-label {
|
font-size: 13px;
|
padding: 5px;
|
}
|
|
.header-card-val {
|
font-size: 11px;
|
}
|
}
|
}
|
}
|
|
.detl-info-row {
|
padding: 0 15px;
|
|
.detl-info-card {
|
padding: 0;
|
.el-card__body {
|
padding: 8px;
|
}
|
}
|
|
.el-table {
|
th.el-table__cell>.cell {
|
text-align: center;
|
}
|
|
.el-table__cell {
|
padding: 5px 0;
|
text-align: center;
|
width: auto;
|
}
|
}
|
}
|
|
.order-box-row {
|
width: 68vh;
|
height: 28vh;
|
|
.order-box {
|
padding:0px 30px;
|
|
.order-table {
|
width: 74vh;
|
padding-top: 65px;
|
height: 275px;
|
|
.btnPrint {
|
font-size: 9px;
|
}
|
|
.ship-order-list {
|
font-size: 10px;
|
}
|
|
.el-table__cell {
|
padding: 0;
|
}
|
}
|
}
|
.empty-padding {
|
padding-top: 65px;
|
width: 30px;
|
height: 30px;
|
}
|
}
|
|
|
.table-matnr {
|
height: 15vh;
|
}
|
|
.el-table .cell {
|
font-size: 10px !important;
|
}
|
|
.pick-order-detl {
|
padding: 0 10px;
|
|
.detl-box-border {
|
height: 49vh;
|
|
.detl-box-padding {
|
height: 65px
|
}
|
|
.order-detl-list {
|
height: 38vh;
|
}
|
}
|
}
|
|
.pick-wall {
|
padding: 60px 10px 10px 10px;
|
height: 45vh;
|
|
.pick-wall-circle {
|
margin: 10px;
|
padding: unset;
|
background-color: #50bfff2e;
|
|
.pick-wall-tip {
|
height: 20px;
|
width: 1px;
|
background: #03d3ec;
|
border-left: 5px solid #50bfff
|
}
|
}
|
.pick-wall-box {
|
.seed-bracket {
|
background: gainsboro;
|
margin: 8px;
|
height: 65px;
|
}
|
}
|
}
|
|
}
|
}
|
</style>
|
