9 changed files with 738 additions and 67 deletions
-
2index.html
-
11src/api/board.js
-
3src/router/index.js
-
20src/views/modules/base/workCenter.vue
-
502src/views/modules/board/newScheduledBoard.vue
-
114src/views/modules/production/dailyPlan.vue
-
51src/views/modules/production/search_schedule.vue
-
90src/views/newTime.vue
-
12static/plugins/echarts/echarts.min.js
@ -0,0 +1,11 @@ |
|||
import {createAPI} from '@/utils/httpRequest.js' |
|||
|
|||
export const getTime=data => createAPI(`board/getTime`, 'post', data); |
|||
|
|||
export const kanKanYouMeiYouDiaoXian=data => createAPI(`board/kanKanYouMeiYouDiaoXian`, 'post', data); |
|||
|
|||
export const getNewScheduledTableData=data => createAPI(`board/getNewScheduledTableData`, 'post', data); |
|||
|
|||
export const getRefreshTime=data => createAPI(`board/getRefreshTime`, 'post', data); |
|||
|
|||
export const getScheduledData=data => createAPI(`board/getScheduledData`, 'post', data); |
|||
@ -0,0 +1,502 @@ |
|||
<template> |
|||
<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> |
|||
</div> |
|||
<div style="height: 40%;width: 100%;text-align: center;margin-top: 0%;"> |
|||
<label id="resourceIdName" style="font-size: 24px;color: #fff300"></label> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div style="width:100%;height: 79%;"> |
|||
<div style="float: left;height: 100%;width: 35%; "> |
|||
<div style="height: 12%;width: 100%;margin-top: 1%"> |
|||
<div |
|||
style="width: 12%;height: 40%;float: left;margin-left: 18%;border-radius: 10px; background-color: #ec6566;"></div> |
|||
<div style="width: 25%;height: 50%;float: left;margin-left: 3%;"> |
|||
<label style="font-size: 16px;color:#ffffff; ">未完工</label> |
|||
</div> |
|||
<div |
|||
style="width: 12%;height: 40%;float: left;margin-left: 1%;border-radius: 10px; background-color: #90ca75;"></div> |
|||
<div style="width: 25%;height: 50%;float: left;margin-left: 3%;"> |
|||
<label style="font-size: 16px;color:#ffffff; ">已完工</label> |
|||
</div> |
|||
</div> |
|||
<div style="height: 88%;width: 100%;"> |
|||
<div id="pie" style="float:left;margin-left: 0px; margin-top: 0%; width: 100%; height:80%;"></div> |
|||
</div> |
|||
</div> |
|||
<div style="float: left;height: 45%;width: 58%;margin-left:3% " class="board"> |
|||
<table class="table table-bordered" style="width:100%;font-size:16px;color: #ffffff" id="table"> |
|||
</table> |
|||
<el-table |
|||
:height="height" |
|||
:data="tableList" |
|||
style="width: 100%"> |
|||
<el-table-column |
|||
prop="resourceDesc" |
|||
header-align="center" |
|||
align="left" |
|||
min-width="100" |
|||
label="机台名称"> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="qtyRequire" |
|||
header-align="center" |
|||
align="left" |
|||
min-width="100" |
|||
label="排产数量"> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="status" |
|||
header-align="center" |
|||
align="left" |
|||
min-width="100" |
|||
label="已入库数量"> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="area" |
|||
header-align="center" |
|||
align="left" |
|||
min-width="100" |
|||
label="未入库数量"> |
|||
</el-table-column> |
|||
</el-table> |
|||
</div> |
|||
<div style="float: left;height: 49%;width: 65%; "> |
|||
<div id="main" style="width: 100%;height: 100%;margin-top: 0px"></div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import {getNewScheduledTableData, |
|||
getRefreshTime, |
|||
getScheduledData |
|||
} from '@/api/board.js' |
|||
import TimeC from "@/views/newTime.vue" |
|||
export default { |
|||
name: "newScheduledBoard", |
|||
data() { |
|||
return { |
|||
myChart: null, |
|||
number1:0, |
|||
number2:0, |
|||
option:null, |
|||
chartDom:null, |
|||
option2:null, |
|||
tableList:null, |
|||
pieList:null, |
|||
barList:null, |
|||
resourceId:'', |
|||
height:200, |
|||
// ip:'', |
|||
refreshTime:5, |
|||
} |
|||
}, |
|||
components: { |
|||
TimeC |
|||
}, |
|||
methods: { |
|||
searchData(){ |
|||
this.getRefresh(); |
|||
getScheduledData().then(({data}) => { |
|||
this.pieList=data.pieList; |
|||
this.barList=data.barList; |
|||
this.number2=0; |
|||
this.draw(); |
|||
this.draw2() |
|||
this.getTableData(); |
|||
window.setTimeout(() => { |
|||
this.getTableData(); |
|||
}, 1000* Number(this.refreshTime)); |
|||
window.setTimeout(() => { |
|||
this.getTableData(); |
|||
}, 2000*Number(this.refreshTime)); |
|||
window.setTimeout(() => { |
|||
this.getTableData(); |
|||
}, 3000*Number(this.refreshTime)); |
|||
|
|||
}) |
|||
}, |
|||
draw(){ |
|||
// if (data_temp[i].percentage >= 100) { |
|||
if (true) { |
|||
var color = '#90ca75'; |
|||
} else { |
|||
var color = '#fff300'; |
|||
} |
|||
if (this.myChart!=null) { |
|||
this.myChart.clear() |
|||
} |
|||
// $("#resourceIdName").html("总完成情况"); |
|||
this.option = ({ |
|||
title: [{ |
|||
text: '总完成情况' , |
|||
// text: '工序：' + data_temp[i + x].itemNo, |
|||
// x 设置水平安放位置，默认左对齐，可选值：'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐标，单位px） |
|||
x: 'center', |
|||
// y 设置垂直安放位置，默认全图顶端，可选值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px） |
|||
y: 'bottom', |
|||
// itemGap设置主副标题纵向间隔，单位px，默认为10， |
|||
backgroundColor: '#EEE', |
|||
// 主标题文本样式设置 |
|||
textStyle: { |
|||
fontSize: 20, |
|||
fontWeight: 'bolder', |
|||
color: '#fff300' |
|||
} |
|||
}, |
|||
{ |
|||
text: this.pieList[0].qtyPercent + '%', |
|||
// text: data_temp[i + x].percentage + '%', |
|||
// x 设置水平安放位置，默认左对齐，可选值：'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐标，单位px） |
|||
x: 'center', |
|||
// y 设置垂直安放位置，默认全图顶端，可选值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px） |
|||
y: 'center', |
|||
// itemGap设置主副标题纵向间隔，单位px，默认为10， |
|||
backgroundColor: 'rgba(0,0,0,0)', |
|||
// 主标题文本样式设置 |
|||
textStyle: { |
|||
fontSize: 20, |
|||
fontWeight: 'bolder', |
|||
color: color |
|||
}, |
|||
}], |
|||
series: [ |
|||
{ |
|||
name: '完成数量统计', |
|||
type: 'pie', // 设置图表类型为饼图 |
|||
radius: ['45%', '75%'], // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。 |
|||
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: ''} |
|||
], |
|||
color: ['#90ca75', '#ec6566'], |
|||
labelLine: { |
|||
normal: { |
|||
show: false |
|||
} |
|||
}, |
|||
label: { |
|||
normal: { |
|||
position: 'outer', // 设置标签位置，默认在饼状图外 可选值：'outer' ¦ 'inner（饼状图上）' |
|||
// formatter: '{a} {b} : {c}个 ({d}%)' 设置标签显示内容 ，默认显示{b} |
|||
// {a}指series.name {b}指series.data的name |
|||
// {c}指series.data的value {d}%指这一部分占总数的百分比 |
|||
formatter: '{b}' |
|||
} |
|||
} |
|||
} |
|||
] |
|||
}); |
|||
this.myChart = echarts.init(document.getElementById('pie')); |
|||
this.myChart.setOption(this.option); |
|||
}, |
|||
getTableData() { |
|||
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() |
|||
} |
|||
this.myChart2 = echarts.init(document.getElementById('main')); |
|||
// document.getElementById('main').style.height="300px"; |
|||
// if(this.option2!=null){ |
|||
// document.getElementById('main').removeAttribute('_echarts_instance_') |
|||
// this.option2 = null |
|||
// } |
|||
this.option2 = { |
|||
color:["#90ca75", "#00a7ff","#ec6566"], |
|||
legend: { |
|||
textStyle: { //图例文字的样式 |
|||
color: '#fff', |
|||
// fontSize: 12 |
|||
}, |
|||
}, |
|||
tooltip: {}, |
|||
xAxis:[ |
|||
{ |
|||
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' |
|||
} |
|||
}, |
|||
], |
|||
axisLine:{ |
|||
lineStyle: { |
|||
color:'#eee' |
|||
} |
|||
}, |
|||
axisTick: { |
|||
lineStyle: { |
|||
color:'#eee' |
|||
} |
|||
}, |
|||
|
|||
}, |
|||
], |
|||
yAxis:[ |
|||
{ |
|||
type: 'value', |
|||
axisLine:{ |
|||
|
|||
lineStyle: { |
|||
color:'#eee' |
|||
} |
|||
}, |
|||
axisTick: { |
|||
lineStyle: { |
|||
color:'#eee' |
|||
} |
|||
}, |
|||
splitLine:{ |
|||
show:false, |
|||
} |
|||
}, |
|||
{ |
|||
type: 'value', |
|||
// min: 0, |
|||
// max: 100, |
|||
axisLabel: { |
|||
formatter: '{value} %' |
|||
}, |
|||
axisLine:{ |
|||
lineStyle: { |
|||
color:'#eee' |
|||
} |
|||
}, |
|||
axisTick: { |
|||
lineStyle: { |
|||
color:'#eee' |
|||
} |
|||
}, |
|||
// splitLine:{ |
|||
// show:false, |
|||
// } |
|||
} |
|||
], |
|||
|
|||
series: [ |
|||
|
|||
{ |
|||
'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], |
|||
'label':{ |
|||
show:true, |
|||
position:'top', |
|||
textStyle: { |
|||
color: '#fff300', |
|||
fontSize: 11 |
|||
} |
|||
}, |
|||
|
|||
}, |
|||
{ |
|||
'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 |
|||
// } |
|||
// }, |
|||
}, |
|||
|
|||
] |
|||
}; |
|||
|
|||
this.option2 && this.myChart2.setOption(this.option2); |
|||
}, |
|||
getDate(value) { |
|||
var date = value.substring(5, 10); |
|||
return date; |
|||
}, |
|||
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)); |
|||
}, |
|||
}) |
|||
}, |
|||
// 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({ |
|||
// url: "/board/getIpFirst", |
|||
// type: "post", |
|||
// data: {}, |
|||
// dataType: "json", |
|||
// success: (data) => { |
|||
// localStorage.setItem("tvIP", data.row) |
|||
// that.ip=localStorage.getItem("tvIP") |
|||
// this.tableInit(); |
|||
// this.timeDo(); |
|||
// this.searchData(); |
|||
// } |
|||
// }).fail(() => { |
|||
// localStorage.setItem("tvIP", "192.168.1.130") |
|||
// that.ip=localStorage.getItem("tvIP") |
|||
// this.tableInit(); |
|||
// this.timeDo(); |
|||
// this.searchData(); |
|||
// }) |
|||
// }else { |
|||
// that.ip=localStorage.getItem("tvIP") |
|||
// this.tableInit(); |
|||
// this.timeDo(); |
|||
// this.searchData(); |
|||
// } |
|||
// |
|||
// }, |
|||
getRefresh(){ |
|||
let that=this; |
|||
getRefreshTime("scheduledBoard").then(({data}) => { |
|||
if (data.rows != "" && data.rows != null) { |
|||
that.refreshTime = Number(data.rows); |
|||
if(this.refreshTime ==0){ |
|||
this.refreshTime =5; |
|||
} |
|||
}else { |
|||
that.refreshTime =5; |
|||
} |
|||
}) |
|||
}, |
|||
}, |
|||
|
|||
created(){ |
|||
this.getRefresh(); |
|||
}, |
|||
mounted() { |
|||
this.$nextTick(()=>{ |
|||
this.height = window.innerHeight *0.36; |
|||
}) |
|||
this.getTableData(); |
|||
this.timeDo(); |
|||
this.searchData(); |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<<style scoped> |
|||
/*.container {*/ |
|||
/* height: 109%;*/ |
|||
/*}*/ |
|||
.board .el-table .cell { |
|||
line-height: 20px; |
|||
font-size: 20px; |
|||
height: 20px; |
|||
padding: 0px; |
|||
color: yellow; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,90 @@ |
|||
<template> |
|||
<div style="font-size: 26px;float: right;color: #ffffff;height: 100%" v-html="clock"></div> |
|||
</template> |
|||
|
|||
<script> |
|||
import {getTime, |
|||
kanKanYouMeiYouDiaoXian, |
|||
} from '@/api/board.js' |
|||
export default { |
|||
name: 'time', |
|||
data() { |
|||
return { |
|||
clock: null, |
|||
status: 1, |
|||
stringdate:null, |
|||
currentDate:null, |
|||
timer:null |
|||
} |
|||
}, |
|||
methods: { |
|||
getTime() { |
|||
getTime().then(({data}) => { |
|||
this.stringdate = data.rows |
|||
this.timer = window.setInterval(() => { |
|||
this.showRealTime() |
|||
}, 1000); |
|||
}) |
|||
|
|||
}, |
|||
showRealTime() { |
|||
if (this.currentDate == null) { |
|||
this.currentDate = new Date(this.stringdate); |
|||
} else { |
|||
this.currentDate = new Date(this.currentDate.getTime() + 1000); |
|||
} |
|||
|
|||
var c = this.currentDate; |
|||
var year = c.getFullYear(); |
|||
var month = c.getMonth() + 1; |
|||
var date = c.getDate(); |
|||
var days = new Array("日", "一", "二", "三", "四", "五", "六"); |
|||
var day = c.getDay(); |
|||
var hour = (c.getHours() < 10) ? ("0" + c.getHours()) : c.getHours(); |
|||
var min = (c.getMinutes() < 10) ? ("0" + c.getMinutes()) : c.getMinutes(); |
|||
var sec = (c.getSeconds() < 10) ? ("0" + c.getSeconds()) : c.getSeconds(); |
|||
var now = year + "年" + month + "月" + date + "日<br>星期" + days[day] + "<br>" + hour + ":" + min + ":" + sec; |
|||
|
|||
// if (hour>=10 && hour<12 && this.status==1){ |
|||
if (localStorage.getItem("status")==null){ |
|||
localStorage.setItem("status",'1') |
|||
} |
|||
this.status = localStorage.getItem("status") |
|||
if (parseInt(hour) ==23 && this.status=='1'){ |
|||
kanKanYouMeiYouDiaoXian().then(({data}) => { |
|||
if(data.success){ |
|||
localStorage.setItem("status",'2') |
|||
location.reload(); |
|||
}else { |
|||
localStorage.setItem("status",'3') |
|||
} |
|||
}) |
|||
} |
|||
// if ( hour>=12 && this.status==2){ |
|||
if ( parseInt(hour) ==1 && this.status=='2'){ |
|||
localStorage.setItem("status",'1') |
|||
} |
|||
if(this.status=='3' && parseInt(sec) ==59){ |
|||
kanKanYouMeiYouDiaoXian().then(({data}) => { |
|||
if(data.success){ |
|||
localStorage.setItem("status",'2') |
|||
location.reload(); |
|||
} |
|||
}) |
|||
} |
|||
|
|||
this.clock = now; |
|||
}, |
|||
}, |
|||
mounted() { |
|||
this.getTime(); |
|||
}, |
|||
beforeDestroy() { |
|||
|
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped> |
|||
|
|||
</style> |
|||
12
static/plugins/echarts/echarts.min.js
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
Write
Preview
Loading…
Cancel
Save
Reference in new issue