4 changed files with 257 additions and 234 deletions
-
6src/views/orderBoard.vue
-
473src/views/productOutBoard.vue
-
7src/views/reportAbnormal.vue
-
5src/views/scheduledBoard.vue
@ -1,268 +1,277 @@ |
|||
<template> |
|||
<div class="container"> |
|||
<div style="width:100%;height: 25%;text-align:center;"> |
|||
<TimeC></TimeC> |
|||
<div style="float: left;width: 50%;height: 100%;text-align:center;margin-left: 26% "> |
|||
<div style="height: 40%;width: 100%;text-align: center;margin-top: 3%;"> |
|||
<label style="font-size: 30px;color: #ffffff"> 成品当日实时产出情况</label> |
|||
<div class="container"> |
|||
<div style="width:100%;height: 25%;text-align:center;"> |
|||
<TimeC></TimeC> |
|||
<div style="float: left;width: 50%;height: 100%;text-align:center;margin-left: 26% "> |
|||
<div style="height: 40%;width: 100%;text-align: center;margin-top: 3%;"> |
|||
<label style="font-size: 30px;color: #ffffff"> 成品当日实时产出情况</label> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="row top-buffer" style="width:100%;height: 60%;text-align: center"> |
|||
<div style="float:left;margin-top: 0px; width: 40%; height:100%;margin-left: 7%;"> |
|||
<table class="table table-bordered" style="width:100%;font-size:22px;color: #ffffff" id="table1"> |
|||
</table> |
|||
</div> |
|||
<div class="row top-buffer" style="float:left; margin-top: 0px; width: 40%; height:100%;margin-left: 6%;"> |
|||
<table class="table table-bordered" style="width:100%;font-size:22px;color: #ffffff" id="table2"> |
|||
</table> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="row top-buffer" style="width:100%;height: 60%;text-align: center"> |
|||
<div style="float:left;margin-top: 0px; width: 40%; height:100%;margin-left: 7%;"> |
|||
<table class="table table-bordered" style="width:100%;font-size:22px;color: #ffffff" id="table1"> |
|||
</table> |
|||
</div> |
|||
<div class="row top-buffer" style="float:left; margin-top: 0px; width: 40%; height:100%;margin-left: 6%;"> |
|||
<table class="table table-bordered" style="width:100%;font-size:22px;color: #ffffff" id="table2"> |
|||
</table> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import TimeC from "./time" |
|||
export default { |
|||
name: "productOutBoard", |
|||
data() { |
|||
return { |
|||
currentDate: null, |
|||
stringdate: null, |
|||
countTimer: null, |
|||
loader: null, |
|||
timer: null, |
|||
handler: null, |
|||
nextPage: null, |
|||
} |
|||
}, |
|||
components: { |
|||
TimeC |
|||
}, |
|||
methods: { |
|||
loadTime() { |
|||
let that = this; |
|||
$.ajax({ |
|||
url: "/board/getJumpConfig", |
|||
type: "post", |
|||
data: {"boardName": 'productOutBoard'}, |
|||
dataType: "json", |
|||
success: (data) => { |
|||
if (data.rows2 != "" && data.rows2 != null) { |
|||
that.nextPage = data.rows2; |
|||
if (data.rows != "" && data.rows != null) { |
|||
let jumpTime = Number(data.rows); |
|||
if (jumpTime > 0) { |
|||
that.countTimer = window.setTimeout(() => { |
|||
that.jump() |
|||
}, 1000 * jumpTime); |
|||
|
|||
} |
|||
} |
|||
} |
|||
} |
|||
}).fail(() => { |
|||
this.$router.push("/") |
|||
}) |
|||
}, |
|||
jump() { |
|||
let that = this; |
|||
clearTimeout(that.countTimer); |
|||
clearInterval(that.loader); |
|||
clearInterval(that.timer); |
|||
$.ajax({ |
|||
url: "/board/kanKanYouMeiYouDiaoXian", |
|||
type: "post", |
|||
data: {}, |
|||
dataType: "json", |
|||
success: (data) => { |
|||
this.$router.push(this.nextPage); |
|||
} |
|||
}).fail(() => { |
|||
this.$router.push("/") |
|||
}) |
|||
import TimeC from "./time" |
|||
|
|||
}, |
|||
load2() { |
|||
this.refresh(); |
|||
let that = this; |
|||
$.ajax({ |
|||
url: "/board/getRefreshTime", |
|||
type: "post", |
|||
data: {"boardName": 'productOutBoard'}, |
|||
dataType: "json", |
|||
success: function (data) { |
|||
if (data.rows != "" && data.rows != null) { |
|||
let refreshTime = Number(data.rows); |
|||
if (refreshTime > 0) { |
|||
that.loader = window.setInterval(() => { |
|||
that.refresh() |
|||
}, 1000 * refreshTime); |
|||
export default { |
|||
name: "productOutBoard", |
|||
data() { |
|||
return { |
|||
currentDate: null, |
|||
stringdate: null, |
|||
countTimer: null, |
|||
loader: null, |
|||
timer: null, |
|||
handler: null, |
|||
nextPage: null, |
|||
} |
|||
} else { |
|||
that.loader = window.setInterval(() => { |
|||
that.refresh() |
|||
}, 10000); |
|||
} |
|||
}, |
|||
}) |
|||
|
|||
}, |
|||
refresh() { |
|||
let that = this; |
|||
$.ajax({ |
|||
url: "/board/getProductOutData", |
|||
type: "post", |
|||
data: {}, |
|||
dataType: "json", |
|||
success: function (data) { |
|||
that.data1 = {"total": data.rows1.length, "rows": data.rows1}; |
|||
that.data2 = {"total": data.rows2.length, "rows": data.rows2}; |
|||
$('#table1').bootstrapTable('load', that.data1); |
|||
$('#table2').bootstrapTable('load', that.data2); |
|||
components: { |
|||
TimeC |
|||
}, |
|||
methods: { |
|||
loadTime() { |
|||
let that = this; |
|||
$.ajax({ |
|||
url: "/board/getJumpConfig", |
|||
type: "post", |
|||
data: {"boardName": 'productOutBoard'}, |
|||
dataType: "json", |
|||
success: (data) => { |
|||
if (data.rows2 != "" && data.rows2 != null) { |
|||
that.nextPage = data.rows2; |
|||
if (data.rows != "" && data.rows != null) { |
|||
let jumpTime = Number(data.rows); |
|||
if (jumpTime > 0) { |
|||
that.countTimer = window.setTimeout(() => { |
|||
that.jump(); |
|||
}, 1000 * jumpTime); |
|||
|
|||
}) |
|||
} |
|||
} |
|||
} |
|||
} |
|||
}).fail(() => { |
|||
this.$router.push("/") |
|||
}) |
|||
}, |
|||
jump() { |
|||
let that = this; |
|||
clearTimeout(that.countTimer); |
|||
clearInterval(that.loader); |
|||
clearInterval(that.timer); |
|||
$.ajax({ |
|||
url: "/board/kanKanYouMeiYouDiaoXian", |
|||
type: "post", |
|||
data: {}, |
|||
dataType: "json", |
|||
success: (data) => { |
|||
this.$router.push(this.nextPage); |
|||
} |
|||
}).fail(() => { |
|||
this.$router.push("/") |
|||
}) |
|||
|
|||
}, |
|||
}, |
|||
load2() { |
|||
this.refresh(); |
|||
let that = this; |
|||
$.ajax({ |
|||
url: "/board/getRefreshTime", |
|||
type: "post", |
|||
data: {"boardName": 'productOutBoard'}, |
|||
dataType: "json", |
|||
success: function (data) { |
|||
if (data.rows != "" && data.rows != null) { |
|||
let refreshTime = Number(data.rows); |
|||
if (refreshTime > 0) { |
|||
that.loader = window.setInterval(() => { |
|||
that.refresh(); |
|||
}, 1000 * refreshTime); |
|||
} |
|||
} else { |
|||
that.loader = window.setInterval(() => { |
|||
that.refresh(); |
|||
}, 10000); |
|||
} |
|||
}, |
|||
}) |
|||
|
|||
}, |
|||
refresh() { |
|||
let that = this; |
|||
$.ajax({ |
|||
url: "/board/getProductOutData", |
|||
type: "post", |
|||
data: {}, |
|||
dataType: "json", |
|||
success: function (data) { |
|||
if (data.success) { |
|||
that.data1 = {"total": data.rows1.length, "rows": data.rows1}; |
|||
that.data2 = {"total": data.rows2.length, "rows": data.rows2}; |
|||
$('#table1').bootstrapTable('load', that.data1); |
|||
$('#table2').bootstrapTable('load', that.data2); |
|||
} else { |
|||
this.jump(); |
|||
} |
|||
}, |
|||
|
|||
tableInit2() { |
|||
$('#table2').bootstrapTable('destroy').bootstrapTable({ |
|||
striped: true, //是否显示行间隔色 |
|||
cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*） |
|||
pagination: false, //是否显示分页（*） |
|||
sortable: false, //是否启用排序 |
|||
sortOrder: "asc", //排序方式 |
|||
queryParamsType: "undefined", //排序方式 |
|||
queryParams: function queryParams(params) { //设置查询参数 |
|||
error: () => { |
|||
this.jump(); |
|||
} |
|||
|
|||
}, |
|||
sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*） |
|||
pageNumber: 1, //初始化加载第一页，默认第一页 |
|||
pageSize: 10, //每页的记录行数（*） |
|||
pageList: [10, 25, 50, 100], //可供选择的每页的行数（*） |
|||
search: false, //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大 |
|||
searchTimeOut: 1000, |
|||
// : true, |
|||
showColumns: false, //是否显示所有的列 |
|||
showRefresh: false, //是否显示刷新按钮 |
|||
minimumCountColumns: 2, //最少允许的列数 |
|||
clickToSelect: true, //是否启用点击选中行 |
|||
singleSelect: true, |
|||
// height: height_param*0.6 , //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度 |
|||
uniqueId: "id", //每一行的唯一标识，一般为主键列 |
|||
// showToggle: true, //是否显示详细视图和列表视图的切换按钮 |
|||
cardView: false, //是否显示详细视图 |
|||
detailView: false, //是否显示父子表 |
|||
}) |
|||
|
|||
}, |
|||
|
|||
columns: [{ |
|||
field: 'cinvcname', |
|||
title: '存货大类', |
|||
width: 100, |
|||
valign: 'middle', |
|||
cellStyle: function () { |
|||
return {css: {"height": "50px", "color": "yellow"}} |
|||
} |
|||
|
|||
}, { |
|||
field: 'transQty', |
|||
title: '入库数量', |
|||
width: 100, |
|||
valign: 'middle', |
|||
cellStyle: function () { |
|||
return {css: {"height": "50px", "color": "yellow"}} |
|||
} |
|||
tableInit2() { |
|||
$('#table2').bootstrapTable('destroy').bootstrapTable({ |
|||
striped: true, //是否显示行间隔色 |
|||
cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*） |
|||
pagination: false, //是否显示分页（*） |
|||
sortable: false, //是否启用排序 |
|||
sortOrder: "asc", //排序方式 |
|||
queryParamsType: "undefined", //排序方式 |
|||
queryParams: function queryParams(params) { //设置查询参数 |
|||
|
|||
} |
|||
], |
|||
onLoadSuccess: function (data) { |
|||
}, |
|||
sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*） |
|||
pageNumber: 1, //初始化加载第一页，默认第一页 |
|||
pageSize: 10, //每页的记录行数（*） |
|||
pageList: [10, 25, 50, 100], //可供选择的每页的行数（*） |
|||
search: false, //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大 |
|||
searchTimeOut: 1000, |
|||
// : true, |
|||
showColumns: false, //是否显示所有的列 |
|||
showRefresh: false, //是否显示刷新按钮 |
|||
minimumCountColumns: 2, //最少允许的列数 |
|||
clickToSelect: true, //是否启用点击选中行 |
|||
singleSelect: true, |
|||
// height: height_param*0.6 , //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度 |
|||
uniqueId: "id", //每一行的唯一标识，一般为主键列 |
|||
// showToggle: true, //是否显示详细视图和列表视图的切换按钮 |
|||
cardView: false, //是否显示详细视图 |
|||
detailView: false, //是否显示父子表 |
|||
|
|||
|
|||
} |
|||
}); |
|||
}, |
|||
tableInit3() { |
|||
$('#table1').bootstrapTable('destroy').bootstrapTable({ |
|||
striped: true, //是否显示行间隔色 |
|||
cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*） |
|||
pagination: false, //是否显示分页（*） |
|||
sortable: false, //是否启用排序 |
|||
sortOrder: "asc", //排序方式 |
|||
queryParamsType: "undefined", //排序方式 |
|||
queryParams: function queryParams(params) { //设置查询参数 |
|||
columns: [{ |
|||
field: 'cinvcname', |
|||
title: '存货大类', |
|||
width: 100, |
|||
valign: 'middle', |
|||
cellStyle: function () { |
|||
return {css: {"height": "50px", "color": "yellow"}} |
|||
} |
|||
|
|||
}, |
|||
sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*） |
|||
pageNumber: 1, //初始化加载第一页，默认第一页 |
|||
pageSize: 10, //每页的记录行数（*） |
|||
pageList: [10, 25, 50, 100], //可供选择的每页的行数（*） |
|||
search: false, //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大 |
|||
searchTimeOut: 1000, |
|||
// : true, |
|||
showColumns: false, //是否显示所有的列 |
|||
showRefresh: false, //是否显示刷新按钮 |
|||
minimumCountColumns: 2, //最少允许的列数 |
|||
clickToSelect: true, //是否启用点击选中行 |
|||
singleSelect: true, |
|||
// height: 300, //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度 |
|||
uniqueId: "id", //每一行的唯一标识，一般为主键列 |
|||
// showToggle: true, //是否显示详细视图和列表视图的切换按钮 |
|||
cardView: false, //是否显示详细视图 |
|||
detailView: false, //是否显示父子表 |
|||
}, { |
|||
field: 'transQty', |
|||
title: '入库数量', |
|||
width: 100, |
|||
valign: 'middle', |
|||
cellStyle: function () { |
|||
return {css: {"height": "50px", "color": "yellow"}} |
|||
} |
|||
|
|||
} |
|||
], |
|||
onLoadSuccess: function (data) { |
|||
|
|||
columns: [{ |
|||
field: 'cinvcname', |
|||
title: '存货大类', |
|||
width: 100, |
|||
cellStyle: function () { |
|||
return {css: {"height": "50px", "color": "yellow"}} |
|||
} |
|||
|
|||
}, { |
|||
field: 'transQty', |
|||
title: '入库数量', |
|||
width: 100, |
|||
cellStyle: function () { |
|||
return {css: {"height": "50px", "color": "yellow"}} |
|||
} |
|||
} |
|||
], |
|||
onLoadSuccess: function (data) { |
|||
// var height_param = $(window).height() - 125; |
|||
// $('#table3').parents('.fixed-table-container').css("height", height_param+"px"); |
|||
} |
|||
}); |
|||
}, |
|||
tableInit3() { |
|||
$('#table1').bootstrapTable('destroy').bootstrapTable({ |
|||
striped: true, //是否显示行间隔色 |
|||
cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*） |
|||
pagination: false, //是否显示分页（*） |
|||
sortable: false, //是否启用排序 |
|||
sortOrder: "asc", //排序方式 |
|||
queryParamsType: "undefined", //排序方式 |
|||
queryParams: function queryParams(params) { //设置查询参数 |
|||
|
|||
} |
|||
}); |
|||
}, |
|||
sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*） |
|||
pageNumber: 1, //初始化加载第一页，默认第一页 |
|||
pageSize: 10, //每页的记录行数（*） |
|||
pageList: [10, 25, 50, 100], //可供选择的每页的行数（*） |
|||
search: false, //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大 |
|||
searchTimeOut: 1000, |
|||
// : true, |
|||
showColumns: false, //是否显示所有的列 |
|||
showRefresh: false, //是否显示刷新按钮 |
|||
minimumCountColumns: 2, //最少允许的列数 |
|||
clickToSelect: true, //是否启用点击选中行 |
|||
singleSelect: true, |
|||
// height: 300, //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度 |
|||
uniqueId: "id", //每一行的唯一标识，一般为主键列 |
|||
// showToggle: true, //是否显示详细视图和列表视图的切换按钮 |
|||
cardView: false, //是否显示详细视图 |
|||
detailView: false, //是否显示父子表 |
|||
|
|||
|
|||
} |
|||
columns: [{ |
|||
field: 'cinvcname', |
|||
title: '存货大类', |
|||
width: 100, |
|||
cellStyle: function () { |
|||
return {css: {"height": "50px", "color": "yellow"}} |
|||
} |
|||
|
|||
}, { |
|||
field: 'transQty', |
|||
title: '入库数量', |
|||
width: 100, |
|||
cellStyle: function () { |
|||
return {css: {"height": "50px", "color": "yellow"}} |
|||
} |
|||
} |
|||
], |
|||
onLoadSuccess: function (data) { |
|||
// var height_param = $(window).height() - 125; |
|||
// $('#table3').parents('.fixed-table-container').css("height", height_param+"px"); |
|||
|
|||
}, |
|||
mounted() { |
|||
} |
|||
}); |
|||
|
|||
this.loadTime(); |
|||
this.load2(); |
|||
this.tableInit3(); |
|||
this.tableInit2(); |
|||
}, |
|||
destroyed() { |
|||
|
|||
clearInterval(this.handler); |
|||
clearTimeout(this.countTimer); |
|||
clearInterval(this.loader); |
|||
clearInterval(this.timer); |
|||
}, |
|||
beforeDestroy() { |
|||
} |
|||
|
|||
}, |
|||
mounted() { |
|||
|
|||
this.loadTime(); |
|||
this.load2(); |
|||
this.tableInit3(); |
|||
this.tableInit2(); |
|||
}, |
|||
destroyed() { |
|||
|
|||
}, |
|||
} |
|||
clearInterval(this.handler); |
|||
clearTimeout(this.countTimer); |
|||
clearInterval(this.loader); |
|||
clearInterval(this.timer); |
|||
}, |
|||
beforeDestroy() { |
|||
|
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.container { |
|||
height: 100%; |
|||
} |
|||
.container { |
|||
height: 100%; |
|||
} |
|||
</style> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue