|
|
<template> <div class="mod-config"> <img class="logo" src="~@/assets/img/jtLogo.png" style=" width: 10%; position: absolute;top: 0;left:0;" > <div style="text-align: center"> <h1>{{lineName}}生产看板</h1> </div> <div class="board2"> <!-- @mouseenter.native="mouseEnter"--> <!-- @mouseleave.native="mouseLeave"--> <el-table cell-style="cc" :height="height" :data="tableData" ref="wt_table" border :row-class-name="tableRowClassName" style="width: 100%;"><!-- <el-table-column--><!-- prop="site"--><!-- header-align="center"--><!-- align="left"--><!-- min-width="25"--><!-- style="font-size: 20px"--><!-- label="工厂">--><!-- </el-table-column>--> <el-table-column prop="seqNo" header-align="center" align="center" min-width="20" style="font-size: 20px" label="派工单号"> </el-table-column> <el-table-column prop="orderNo" header-align="center" align="center" min-width="50" style="font-size: 20px" label="生产订单号"> </el-table-column> <el-table-column prop="partNo" header-align="center" align="center" min-width="30" label="物料编码"> </el-table-column> <el-table-column prop="operationDesc" header-align="center" align="center" min-width="30" label="工序"> </el-table-column> <el-table-column prop="sScheduledDate" header-align="center" align="center" min-width="40" label="派工日期"> </el-table-column> <el-table-column prop="qtyRequired" header-align="center" align="right" min-width="30" label="需求数量"> </el-table-column> <el-table-column prop="qtyReported" header-align="center" align="right" min-width="30" label="报工数量"> </el-table-column><!-- <el-table-column--><!-- prop="lastLineName"--><!-- header-align="center"--><!-- align="center"--><!-- min-width="30"--><!-- label="上道生产线">--><!-- </el-table-column>--> <el-table-column prop="lastSeqNoDoing" header-align="center" align="center" min-width="30" label="上道派工单"> </el-table-column> <el-table-column prop="lastOperationDesc" header-align="center" align="center" min-width="30" label="上道工序"> </el-table-column><!-- <el-table-column--><!-- prop="lastRequireQty"--><!-- header-align="center"--><!-- align="right"--><!-- min-width="40"--><!-- label="上道派工单数量">--><!-- </el-table-column>--> <el-table-column prop="lastReportQty" header-align="center" align="right" min-width="40" label="上道完成数量"> </el-table-column> </el-table><!-- <el-table--><!-- cell-style="cc"--><!-- height="99"--><!-- :data="tableData2"--><!-- ref="wt_table"--><!-- border--><!-- style="width: 100%;">--><!-- <el-table-column--><!-- prop="seqNo"--><!-- header-align="center"--><!-- align="left"--><!-- width="60"--><!-- label="派工单号">--><!-- </el-table-column>--><!-- <el-table-column--><!-- prop="orderNo"--><!-- header-align="center"--><!-- align="left"--><!-- width="100"--><!-- label="生产订单">--><!-- </el-table-column>--><!-- <el-table-column--><!-- prop="partNo"--><!-- header-align="center"--><!-- align="left"--><!-- width="60"--><!-- label="物料编码">--><!-- </el-table-column>--><!-- <el-table-column--><!-- prop="productionLineDesc"--><!-- header-align="center"--><!-- align="center"--><!-- width="100"--><!-- label="产线">--><!-- </el-table-column>--><!-- <el-table-column--><!-- prop="feedbackDate"--><!-- header-align="center"--><!-- align="center"--><!-- width="80"--><!-- label="反馈时间">--><!-- </el-table-column>--><!-- <el-table-column--><!-- prop="status"--><!-- header-align="center"--><!-- align="left"--><!-- width="60"--><!-- label="状态">--><!-- </el-table-column>--><!-- <el-table-column--><!-- prop="abnormalDesc"--><!-- header-align="center"--><!-- align="left"--><!-- width="100"--><!-- label="异常原因">--><!-- </el-table-column>--><!-- <el-table-column--><!-- prop="abnormalRemark"--><!-- header-align="center"--><!-- align="left"--><!-- min-width="200"--><!-- label="异常描述">--><!-- </el-table-column>--><!-- </el-table>--> </div>
</div></template>
<script> let rollstop = '' let rolltimer = ''// 自动滚动的定时任务
let refresher = '' //数据刷新定时器
import { SORoutingBoard, } from '@/api/production/board.js' export default { name: 'SORoutingBoard', data () { return { lineNo:this.$route.query.lineNo?this.$route.query.lineNo:'', lineName:this.$route.query.lineName?this.$route.query.lineName:'', pageIndex: 1, totalPage: 1, height: 200, tableData: [], pageIndex2: 1, totalPage2: 1, tableData2: [], // 默认的刷新，滚动时间，滚动间距
// refreshTime: 5,
// rollTime: 5,
// rollPx: 1,
} }, mounted () { this.$nextTick(() => { // this.height = window.innerHeight - 172
this.height = window.innerHeight - 80 }) // this.autoRoll()
}, methods: { tableRowClassName ({row, rowIndex}) { if (row.outWorkFlag == 'N') { return 'success-row' }
return '' }, search () { let inData= {number:this.pageIndex,number2:this.pageIndex2, text1:this.lineNo}; SORoutingBoard(inData).then(({data}) => { this.tableData = data.rows; this.totalPage= data.maxPage; if(this.pageIndex+1>data.maxPage){ this.pageIndex=1 }else { this.pageIndex=this.pageIndex+1 }
// this.tableData2 = data.rows2;
// this.totalPage2= data.maxPage2;
// if(this.pageIndex2+1>data.maxPage2){
// this.pageIndex2=1
// }else {
// this.pageIndex2=this.pageIndex2+1
// }
}) }, // 鼠标进入
// mouseEnter (time) {
// // 鼠标进入停止滚动和切换的定时任务
// this.autoRoll(true)
// },
// 鼠标离开
// mouseLeave () {
// // 开启
// this.autoRoll()
// },
// 设置自动滚动
// autoRoll (stop) {
// if (stop) {
// clearInterval(rolltimer)
// return
// }
// // 拿到表格挂载后的真实DOM
// const table = this.$refs.wt_table
// // 拿到表格中承载数据的div元素
// const divData = table.bodyWrapper
// // 拿到元素后，对元素进行定时增加距离顶部距离，实现滚动效果
// rolltimer = setInterval(() => {
// // 元素自增距离顶部像素
// divData.scrollTop = this.decimalUtil.add(Number(divData.scrollTop), Number(this.rollPx))
// // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
// if (divData.clientHeight + divData.scrollTop +1>= divData.scrollHeight) {
// // 重置table距离顶部距离
// divData.scrollTop = 0
// }
// }, this.rollTime * 10)
// },
refreshTable () { refresher = setInterval(() => { this.search() }, 30000) } }, created () { this.search() this.refreshTable() } }</script>
<style >
.board2 .el-table .cell { line-height: 13px; font-size: 12px; height: 13px; padding: 0px; }
.board2 .el-table .success-row { background: #1bb61b; } .board2 .el-table .false-row { /*background: #cbcb14;*/ background: #db1212; } .board2 .el-table .yellow-row{ background: #ffff00; }</style>
|
