|
|
|
@ -1,11 +1,11 @@ |
|
|
|
<template> |
|
|
|
<div class="container"> |
|
|
|
<div class="container" > |
|
|
|
<div style="width:100%;height: 20%;text-align:center;"> |
|
|
|
<TimeC></TimeC> |
|
|
|
<!-- <div style="font-size: 26px;float: right;color: #ffffff;height: 100%" v-html="clock"></div>--> |
|
|
|
<div style="float: left;width: 25%;height: 100%;text-align:center;margin-left: 37% "> |
|
|
|
<div style="height: 40%;width: 100%;text-align: center;margin-top: 3%;"> |
|
|
|
<label style="font-size: 30px;color: #ffffff">派工单完成状况</label> |
|
|
|
<label style="font-size: 30px;color: #ffffff">生产状况</label> |
|
|
|
</div> |
|
|
|
<div style="height: 40%;width: 100%;text-align: center;margin-top: 0%;"> |
|
|
|
<label id="resourceIdName" style="font-size: 24px;color: #fff300"></label> |
|
|
|
@ -91,7 +91,7 @@ |
|
|
|
chartDom:null, |
|
|
|
option2:null, |
|
|
|
tableList:null, |
|
|
|
pieList:null, |
|
|
|
pieData:null, |
|
|
|
barList:null, |
|
|
|
resourceId:'', |
|
|
|
height:200, |
|
|
|
@ -106,8 +106,10 @@ |
|
|
|
searchData(){ |
|
|
|
this.getRefresh(); |
|
|
|
getScheduledData().then(({data}) => { |
|
|
|
this.pieList=data.pieList; |
|
|
|
this.pieData=data.pieData; |
|
|
|
this.barList=data.barList; |
|
|
|
console.log(data.pieData) |
|
|
|
console.log(data.barList) |
|
|
|
this.number2=0; |
|
|
|
this.draw(); |
|
|
|
this.draw2() |
|
|
|
@ -153,7 +155,7 @@ |
|
|
|
} |
|
|
|
}, |
|
|
|
{ |
|
|
|
text: this.pieList[0].qtyPercent + '%', |
|
|
|
text: this.pieData.qtyPercent + '%', |
|
|
|
// text: data_temp[i + x].percentage + '%', |
|
|
|
// x 设置水平安放位置，默认左对齐，可选值：'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐标，单位px） |
|
|
|
x: 'center', |
|
|
|
@ -176,8 +178,8 @@ |
|
|
|
data: [ // 数据数组，name 为数据项名称，value 为数据项值 |
|
|
|
// {value: data_temp[i + x].approveQty, name: ''}, |
|
|
|
// {value: data_temp[i + x].unapproveQty, name: ''} |
|
|
|
{value: this.pieList[0].qtyReported, name: ''}, |
|
|
|
{value: this.pieList[0].qtyUnReported, name: ''} |
|
|
|
{value: this.pieData.qtyReported, name: ''}, |
|
|
|
{value: this.pieData.qtyUnReported, name: ''} |
|
|
|
], |
|
|
|
color: ['#90ca75', '#ec6566'], |
|
|
|
labelLine: { |
|
|
|
@ -204,25 +206,23 @@ |
|
|
|
getNewScheduledTableData(this.number2).then(({data}) => { |
|
|
|
this.tableList=data.rows; |
|
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
}, |
|
|
|
// data(){ |
|
|
|
// let arr=[] |
|
|
|
// let indata={ |
|
|
|
// t1:'测试' |
|
|
|
// } |
|
|
|
// arr.push(indata); |
|
|
|
// arr.push(indata); |
|
|
|
// arr.push(indata); |
|
|
|
// let data2 = {"total": arr.length, "rows": arr}; |
|
|
|
// $('#table').bootstrapTable('load', data2); |
|
|
|
// }, |
|
|
|
|
|
|
|
draw2(){ |
|
|
|
if (this.myChart2!=null) { |
|
|
|
this.myChart2.clear() |
|
|
|
} |
|
|
|
let barData=[]; |
|
|
|
let valueData=[]; |
|
|
|
for (let a = 0; a <this.barList.length ; a++) { |
|
|
|
let resourceData={ |
|
|
|
value: this.barList[a].resourceDesc, |
|
|
|
textStyle: { |
|
|
|
color: '#EEE' |
|
|
|
} |
|
|
|
} |
|
|
|
barData.push(resourceData); |
|
|
|
valueData[a]=this.barList[a].qtyPercent; |
|
|
|
} |
|
|
|
this.myChart2 = echarts.init(document.getElementById('main')); |
|
|
|
// document.getElementById('main').style.height="300px"; |
|
|
|
// if(this.option2!=null){ |
|
|
|
@ -242,50 +242,51 @@ |
|
|
|
{ |
|
|
|
type: 'category', |
|
|
|
// data: xAxisData |
|
|
|
data: [ |
|
|
|
{ |
|
|
|
value: this.getDate(this.barList[6].strDate), |
|
|
|
textStyle: { |
|
|
|
color: '#EEE' |
|
|
|
} |
|
|
|
}, |
|
|
|
{ |
|
|
|
value: this.getDate(this.barList[5].strDate), |
|
|
|
textStyle: { |
|
|
|
color: '#EEE' |
|
|
|
} |
|
|
|
}, |
|
|
|
{ |
|
|
|
value: this.getDate(this.barList[4].strDate), |
|
|
|
textStyle: { |
|
|
|
color: '#EEE' |
|
|
|
} |
|
|
|
}, |
|
|
|
{ |
|
|
|
value: this.getDate(this.barList[3].strDate), |
|
|
|
textStyle: { |
|
|
|
color: '#EEE' |
|
|
|
} |
|
|
|
}, |
|
|
|
{ |
|
|
|
value: this.getDate(this.barList[2].strDate), |
|
|
|
textStyle: { |
|
|
|
color: '#EEE' |
|
|
|
} |
|
|
|
}, |
|
|
|
{ |
|
|
|
value: this.getDate(this.barList[1].strDate), |
|
|
|
textStyle: { |
|
|
|
color: '#EEE' |
|
|
|
} |
|
|
|
}, |
|
|
|
{ |
|
|
|
value: this.getDate(this.barList[0].strDate), |
|
|
|
textStyle: { |
|
|
|
color: '#EEE' |
|
|
|
} |
|
|
|
}, |
|
|
|
], |
|
|
|
data:barData, |
|
|
|
// [ |
|
|
|
// { |
|
|
|
// value: this.getDate(this.barList[6].strDate), |
|
|
|
// textStyle: { |
|
|
|
// color: '#EEE' |
|
|
|
// } |
|
|
|
// }, |
|
|
|
// { |
|
|
|
// value: this.getDate(this.barList[5].strDate), |
|
|
|
// textStyle: { |
|
|
|
// color: '#EEE' |
|
|
|
// } |
|
|
|
// }, |
|
|
|
// { |
|
|
|
// value: this.getDate(this.barList[4].strDate), |
|
|
|
// textStyle: { |
|
|
|
// color: '#EEE' |
|
|
|
// } |
|
|
|
// }, |
|
|
|
// { |
|
|
|
// value: this.getDate(this.barList[3].strDate), |
|
|
|
// textStyle: { |
|
|
|
// color: '#EEE' |
|
|
|
// } |
|
|
|
// }, |
|
|
|
// { |
|
|
|
// value: this.getDate(this.barList[2].strDate), |
|
|
|
// textStyle: { |
|
|
|
// color: '#EEE' |
|
|
|
// } |
|
|
|
// }, |
|
|
|
// { |
|
|
|
// value: this.getDate(this.barList[1].strDate), |
|
|
|
// textStyle: { |
|
|
|
// color: '#EEE' |
|
|
|
// } |
|
|
|
// }, |
|
|
|
// { |
|
|
|
// value: this.getDate(this.barList[0].strDate), |
|
|
|
// textStyle: { |
|
|
|
// color: '#EEE' |
|
|
|
// } |
|
|
|
// }, |
|
|
|
// ], |
|
|
|
axisLine:{ |
|
|
|
lineStyle: { |
|
|
|
color:'#eee' |
|
|
|
@ -302,25 +303,8 @@ |
|
|
|
yAxis:[ |
|
|
|
{ |
|
|
|
type: 'value', |
|
|
|
axisLine:{ |
|
|
|
|
|
|
|
lineStyle: { |
|
|
|
color:'#eee' |
|
|
|
} |
|
|
|
}, |
|
|
|
axisTick: { |
|
|
|
lineStyle: { |
|
|
|
color:'#eee' |
|
|
|
} |
|
|
|
}, |
|
|
|
splitLine:{ |
|
|
|
show:false, |
|
|
|
} |
|
|
|
}, |
|
|
|
{ |
|
|
|
type: 'value', |
|
|
|
// min: 0, |
|
|
|
// max: 100, |
|
|
|
min: 0, |
|
|
|
max: 100, |
|
|
|
axisLabel: { |
|
|
|
formatter: '{value} %' |
|
|
|
}, |
|
|
|
@ -343,13 +327,14 @@ |
|
|
|
series: [ |
|
|
|
|
|
|
|
{ |
|
|
|
'name': '白班产量', |
|
|
|
'name': '当日完成率', |
|
|
|
'type': 'bar', |
|
|
|
'emphasis': { |
|
|
|
focus: 'series' |
|
|
|
}, |
|
|
|
// data: seriesData1 |
|
|
|
'data': [this.barList[6].num1, this.barList[5].num1, this.barList[4].num1, this.barList[3].num1, this.barList[2].num1, this.barList[1].num1, this.barList[0].num1], |
|
|
|
'data': valueData, |
|
|
|
// [this.barList[6].num1, this.barList[5].num1, this.barList[4].num1, this.barList[3].num1, this.barList[2].num1, this.barList[1].num1, this.barList[0].num1], |
|
|
|
'label':{ |
|
|
|
show:true, |
|
|
|
position:'top', |
|
|
|
@ -360,41 +345,7 @@ |
|
|
|
}, |
|
|
|
|
|
|
|
}, |
|
|
|
{ |
|
|
|
'name': '晚班产量', |
|
|
|
'type': 'bar', |
|
|
|
'emphasis': { |
|
|
|
focus: 'series' |
|
|
|
}, |
|
|
|
// data: seriesData2 |
|
|
|
'data': [this.barList[6].num2, this.barList[5].num2, this.barList[4].num2, this.barList[3].num2, this.barList[2].num2, this.barList[1].num2, this.barList[0].num2], |
|
|
|
'label':{ |
|
|
|
show:true, |
|
|
|
position:'top', |
|
|
|
textStyle: { |
|
|
|
color: '#fff300', |
|
|
|
fontSize: 11 |
|
|
|
} |
|
|
|
}, |
|
|
|
}, |
|
|
|
{ |
|
|
|
'name': '当日完成率', |
|
|
|
'type': 'line', |
|
|
|
yAxisIndex: 1, |
|
|
|
'emphasis': { |
|
|
|
focus: 'series' |
|
|
|
}, |
|
|
|
// data: seriesData2 |
|
|
|
'data': [this.barList[6].num3, this.barList[5].num3, this.barList[4].num3, this.barList[3].num3, this.barList[2].num3, this.barList[1].num3, this.barList[0].num3], |
|
|
|
// 'label':{ |
|
|
|
// show:true, |
|
|
|
// position:'top', |
|
|
|
// textStyle: { |
|
|
|
// color: '#fff300', |
|
|
|
// fontSize: 12 |
|
|
|
// } |
|
|
|
// }, |
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
] |
|
|
|
}; |
|
|
|
@ -407,29 +358,40 @@ |
|
|
|
}, |
|
|
|
timeDo(){ |
|
|
|
let that=this; |
|
|
|
$.ajax({ |
|
|
|
url: "/board/getRefreshTime", |
|
|
|
type: "post", |
|
|
|
data: {"boardName": 'newScheduledBoard'}, |
|
|
|
dataType: "json", |
|
|
|
success: (data) => { |
|
|
|
if (data.rows != "" && data.rows != null) { |
|
|
|
that.refreshTime = Number(data.rows); |
|
|
|
if(that.refreshTime ==0){ |
|
|
|
that.refreshTime =5; |
|
|
|
} |
|
|
|
}else { |
|
|
|
that.refreshTime =5; |
|
|
|
} |
|
|
|
console.log(4000*Number(that.refreshTime)) |
|
|
|
window.setInterval(() => { |
|
|
|
this.searchData(); |
|
|
|
}, 4000*Number(that.refreshTime)); |
|
|
|
}, |
|
|
|
}) |
|
|
|
getRefreshTime('scheduledBoard').then(({data}) => { |
|
|
|
if (data.rows != "" && data.rows != null) { |
|
|
|
that.refreshTime = Number(data.rows); |
|
|
|
if(that.refreshTime ==0){ |
|
|
|
that.refreshTime =5; |
|
|
|
} |
|
|
|
}else { |
|
|
|
that.refreshTime =5; |
|
|
|
} |
|
|
|
window.setInterval(() => { |
|
|
|
this.searchData(); |
|
|
|
}, 4000*Number(that.refreshTime)); |
|
|
|
}) |
|
|
|
// $.ajax({ |
|
|
|
// url: "/board/getRefreshTime", |
|
|
|
// type: "post", |
|
|
|
// data: {"boardName": 'newScheduledBoard'}, |
|
|
|
// dataType: "json", |
|
|
|
// success: (data) => { |
|
|
|
// if (data.rows != "" && data.rows != null) { |
|
|
|
// that.refreshTime = Number(data.rows); |
|
|
|
// if(that.refreshTime ==0){ |
|
|
|
// that.refreshTime =5; |
|
|
|
// } |
|
|
|
// }else { |
|
|
|
// that.refreshTime =5; |
|
|
|
// } |
|
|
|
// window.setInterval(() => { |
|
|
|
// this.searchData(); |
|
|
|
// }, 4000*Number(that.refreshTime)); |
|
|
|
// }, |
|
|
|
// }) |
|
|
|
}, |
|
|
|
// getIp(){ |
|
|
|
// console.log(localStorage.getItem("tvIP")) |
|
|
|
// let that=this; |
|
|
|
// if (localStorage.getItem("tvIP")==null||localStorage.getItem("tvIP")==""||localStorage.getItem("tvIP")=="192.168.1.130") { |
|
|
|
// $.ajax({ |
|
|
|
@ -460,15 +422,14 @@ |
|
|
|
// |
|
|
|
// }, |
|
|
|
getRefresh(){ |
|
|
|
let that=this; |
|
|
|
getRefreshTime("scheduledBoard").then(({data}) => { |
|
|
|
getRefreshTime('scheduledBoard').then(({data}) => { |
|
|
|
if (data.rows != "" && data.rows != null) { |
|
|
|
that.refreshTime = Number(data.rows); |
|
|
|
this.refreshTime = Number(data.rows); |
|
|
|
if(this.refreshTime ==0){ |
|
|
|
this.refreshTime =5; |
|
|
|
} |
|
|
|
}else { |
|
|
|
that.refreshTime =5; |
|
|
|
this.refreshTime =5; |
|
|
|
} |
|
|
|
}) |
|
|
|
}, |
|
|
|
@ -488,10 +449,19 @@ |
|
|
|
} |
|
|
|
</script> |
|
|
|
|
|
|
|
<<style scoped> |
|
|
|
/*.container {*/ |
|
|
|
/* height: 109%;*/ |
|
|
|
/*}*/ |
|
|
|
<<style > |
|
|
|
.container { |
|
|
|
height: 109%; |
|
|
|
position: fixed; |
|
|
|
top: 0; |
|
|
|
left: 0; |
|
|
|
z-index: -1; |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
content: ""; |
|
|
|
background-image: url(~@/assets/img/factory.jpg); |
|
|
|
background-size: cover; |
|
|
|
} |
|
|
|
.board .el-table .cell { |
|
|
|
line-height: 20px; |
|
|
|
font-size: 20px; |
|
|
|
@ -499,4 +469,25 @@ |
|
|
|
padding: 0px; |
|
|
|
color: yellow; |
|
|
|
} |
|
|
|
|
|
|
|
/* 表格内背景颜色 */ |
|
|
|
.board .el-table th, .el-table tr,.el-table td{ |
|
|
|
border: 0; |
|
|
|
background-color: transparent; |
|
|
|
} |
|
|
|
/* 使表格背景透明 */ |
|
|
|
.board .el-table th, .el-table tr { |
|
|
|
background-color: transparent; |
|
|
|
} |
|
|
|
/* 删除表格下横线 */ |
|
|
|
.board .el-table::before { |
|
|
|
left: 0; |
|
|
|
bottom: 0; |
|
|
|
width: 100%; |
|
|
|
height: 0px; |
|
|
|
} |
|
|
|
/* 表格表头字体颜色 */ |
|
|
|
.board .el-table, .el-table__expanded-cell { |
|
|
|
background-color: transparent; |
|
|
|
} |
|
|
|
</style> |
