You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
493 lines
20 KiB
493 lines
20 KiB
<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,
|
|
pieData:null,
|
|
barList:null,
|
|
resourceId:'',
|
|
height:200,
|
|
// ip:'',
|
|
refreshTime:5,
|
|
}
|
|
},
|
|
components: {
|
|
TimeC
|
|
},
|
|
methods: {
|
|
searchData(){
|
|
this.getRefresh();
|
|
getScheduledData().then(({data}) => {
|
|
this.pieData=data.pieData;
|
|
this.barList=data.barList;
|
|
console.log(data.pieData)
|
|
console.log(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.pieData.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.pieData.qtyReported, name: ''},
|
|
{value: this.pieData.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;
|
|
})
|
|
},
|
|
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){
|
|
// 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: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'
|
|
}
|
|
},
|
|
axisTick: {
|
|
lineStyle: {
|
|
color:'#eee'
|
|
}
|
|
},
|
|
|
|
},
|
|
],
|
|
yAxis:[
|
|
{
|
|
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': 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',
|
|
textStyle: {
|
|
color: '#fff300',
|
|
fontSize: 11
|
|
}
|
|
},
|
|
|
|
},
|
|
|
|
|
|
]
|
|
};
|
|
|
|
this.option2 && this.myChart2.setOption(this.option2);
|
|
},
|
|
getDate(value) {
|
|
var date = value.substring(5, 10);
|
|
return date;
|
|
},
|
|
timeDo(){
|
|
let that=this;
|
|
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(){
|
|
// 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(){
|
|
getRefreshTime('scheduledBoard').then(({data}) => {
|
|
if (data.rows != "" && data.rows != null) {
|
|
this.refreshTime = Number(data.rows);
|
|
if(this.refreshTime ==0){
|
|
this.refreshTime =5;
|
|
}
|
|
}else {
|
|
this.refreshTime =5;
|
|
}
|
|
})
|
|
},
|
|
},
|
|
|
|
created(){
|
|
this.getRefresh();
|
|
},
|
|
mounted() {
|
|
this.$nextTick(()=>{
|
|
this.height = window.innerHeight *0.36;
|
|
})
|
|
this.getTableData();
|
|
this.timeDo();
|
|
this.searchData();
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<<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;
|
|
height: 20px;
|
|
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>
|