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.
589 lines
22 KiB
589 lines
22 KiB
<template>
|
|
<div class="container" >
|
|
<div style="width:100%;height: 19%;text-align:center;">
|
|
<div style="float: left;width: 25%;height: 100%;text-align:left; ">
|
|
<div style="height: 60%;width: 100%;text-align: left;margin-top: 1%">
|
|
<label style="font-size: 40px;color: #9c0202;margin-left: 2%">Jtem 江天电子</label>
|
|
</div>
|
|
</div>
|
|
<TimeC></TimeC>
|
|
<!-- <div style="font-size: 26px;float: right;color: #ffffff;height: 100%" v-html="clock"></div>-->
|
|
<div style="float: left;width: 35%;height: 100%;text-align:center;margin-left: 7% ">
|
|
<div style="height: 45%;width: 100%;text-align: center;margin-top: 3%;">
|
|
<label style="font-size: 30px;color: #ffffff">生产情况看板<br>Production Board</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: 100%;width: 38%; ">
|
|
<div style="height: 28%;width: 100%;margin-top: 0.5%" class="board2">
|
|
<el-table
|
|
height="150"
|
|
:data="tableList2"
|
|
:cell-style="board2Function"
|
|
style="width: 100%">
|
|
<el-table-column
|
|
prop="qty1"
|
|
header-align="center"
|
|
align="center"
|
|
min-width="40"
|
|
label="派工数/PlanQty"
|
|
:render-header="renderHeader"
|
|
>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="qty2"
|
|
header-align="center"
|
|
align="center"
|
|
min-width="63"
|
|
label="合格数/ApproveQty"
|
|
:render-header="renderHeader">
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="qty3"
|
|
header-align="center"
|
|
align="center"
|
|
min-width="60"
|
|
label="不合格数/UnApproveQty"
|
|
:render-header="renderHeader">
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="qty4"
|
|
header-align="center"
|
|
align="center"
|
|
min-width="62"
|
|
label="未完成/UnReportedQty"
|
|
:render-header="renderHeader">
|
|
</el-table-column>
|
|
</el-table>
|
|
</div>
|
|
<div style="height: 72%;width: 100%;">
|
|
<div id="pie" style="float:left;margin-left: 0px; margin-top: -3%; width: 100%; height:100%;"></div>
|
|
</div>
|
|
</div>
|
|
<div style="float: left;height: 53%;width: 53%;margin-left:3% " class="board">
|
|
<el-table
|
|
height="250"
|
|
:data="tableList"
|
|
style="width: 100%">
|
|
<el-table-column
|
|
prop="resourceDesc"
|
|
header-align="center"
|
|
align="center"
|
|
min-width="72"
|
|
label="生产线/ProduceLine"
|
|
:render-header="renderHeader"
|
|
>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="qtyRequired"
|
|
header-align="center"
|
|
align="center"
|
|
min-width="100"
|
|
label="派工数量/PlanQty"
|
|
:render-header="renderHeader">
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="qtyReported"
|
|
header-align="center"
|
|
align="center"
|
|
min-width="90"
|
|
label="完成数量/ReportedQty"
|
|
:render-header="renderHeader">
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="qtyApprove"
|
|
header-align="center"
|
|
align="center"
|
|
min-width="108"
|
|
label="合格数量/ApproveQty"
|
|
:render-header="renderHeader">
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="qtyUnReported"
|
|
header-align="center"
|
|
align="center"
|
|
min-width="100"
|
|
label="未完成数量/UnReportedQty"
|
|
:render-header="renderHeader">>
|
|
</el-table-column>
|
|
</el-table>
|
|
</div>
|
|
<div style="float: left;height: 47%;width: 62%; ">
|
|
<div id="main" style="width: 100%;height: 100%;margin-top: 0px"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {getNewScheduledTableData,
|
|
getRefreshTime,
|
|
getScheduledData
|
|
} from '@/api/production/board.js'
|
|
import TimeC from "@/views/modules/board/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,
|
|
tableList2:[],
|
|
}
|
|
},
|
|
components: {
|
|
TimeC
|
|
},
|
|
methods: {
|
|
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;
|
|
}
|
|
})
|
|
},
|
|
searchData(){
|
|
this.getRefresh();
|
|
getScheduledData().then(({data}) => {
|
|
this.pieData=data.pieData;
|
|
this.barList=data.barList;
|
|
this.tableList2=[],
|
|
this.tableList2.push(this.pieData);
|
|
let pieData2={
|
|
qty1: '-',
|
|
qty2: this.pieData.per2 +'%',
|
|
qty3: this.pieData.per3 +'%',
|
|
qty4: this.pieData.per4 +'%',
|
|
}
|
|
this.tableList2.push(pieData2)
|
|
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()
|
|
}
|
|
|
|
this.option = ({
|
|
title: [{
|
|
text: '总生产情况\nProduction State' ,
|
|
// text: '工序：' + data_temp[i + x].itemNo,
|
|
// x 设置水平安放位置，默认左对齐，可选值：'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐标，单位px）
|
|
x: 'center',
|
|
// y 设置垂直安放位置，默认全图顶端，可选值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px）
|
|
y: '264px',
|
|
// itemGap设置主副标题纵向间隔，单位px，默认为10，
|
|
backgroundColor: '#EEE',
|
|
// 主标题文本样式设置
|
|
textStyle: {
|
|
fontSize: 18,
|
|
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
|
|
// },
|
|
// }
|
|
],
|
|
// legend: {
|
|
// orient: 'vertical',
|
|
// left: 10,
|
|
// data: ['直接访问', '邮件营销'],
|
|
// color: ['#90ca75', '#ec6566'],
|
|
// },
|
|
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.qty2, name: ''},
|
|
{value: this.pieData.qty3, name: ''},
|
|
{value: this.pieData.qty4, name: ''}
|
|
],
|
|
color: ['#90ca75','#dbd81a', '#ec6566'],
|
|
labelLine: {
|
|
normal: {
|
|
show: false
|
|
}
|
|
},
|
|
label: {
|
|
normal: {
|
|
position: 'inner', // 设置标签位置，默认在饼状图外 可选值：'outer' ¦ 'inner（饼状图上）'
|
|
// formatter: '{a} {b} : {c}个 ({d}%)' 设置标签显示内容 ，默认显示{b}
|
|
// {a}指series.name {b}指series.data的name
|
|
// {c}指series.data的value {d}%指这一部分占总数的百分比
|
|
// formatter: '{d}'+'%',
|
|
formatter:function(data){
|
|
return data.percent.toFixed(1)+"%";
|
|
}
|
|
}
|
|
},
|
|
|
|
}
|
|
]
|
|
});
|
|
this.myChart = echarts.init(document.getElementById('pie'));
|
|
this.myChart.setOption(this.option);
|
|
},
|
|
getTableData() {
|
|
getNewScheduledTableData(this.number2).then(({data}) => {
|
|
this.tableList=data.rows;
|
|
this.number2=data.num;
|
|
|
|
})
|
|
},
|
|
draw2(){
|
|
if (this.myChart2!=null) {
|
|
this.myChart2.clear()
|
|
}
|
|
let barData=[];
|
|
let valueData=[];
|
|
let valueApproveData=[];
|
|
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;
|
|
valueApproveData[a]=this.barList[a].approvePercent;
|
|
}
|
|
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"],
|
|
legend: {
|
|
textStyle: { //图例文字的样式
|
|
color: '#fff',
|
|
// fontSize: 12
|
|
},
|
|
},
|
|
tooltip: {},
|
|
xAxis:[
|
|
{
|
|
type: 'category',
|
|
// data: xAxisData
|
|
data:barData,
|
|
|
|
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
|
|
}
|
|
},
|
|
|
|
},
|
|
{
|
|
'name': '当日良品率',
|
|
'type': 'bar',
|
|
'emphasis': {
|
|
focus: 'series'
|
|
},
|
|
// data: seriesData1
|
|
'data': valueApproveData,
|
|
// [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));
|
|
}, 1000*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));
|
|
// },
|
|
// })
|
|
},
|
|
renderHeader(h, { column, $index }) {
|
|
return h("span", {}, [
|
|
h("span", {}, column.label.split("/")[0]),
|
|
h("br"),
|
|
h("span", {}, column.label.split("/")[1])
|
|
]);
|
|
},
|
|
board2Function({row, column, rowIndex, columnIndex}){
|
|
if(columnIndex==1){
|
|
return 'background-color: #90ca75;'
|
|
}
|
|
if(columnIndex==2){
|
|
return 'background-color: #dbd81a;'
|
|
}
|
|
if(columnIndex==3){
|
|
return 'background-color: #ec6566;'
|
|
}
|
|
}
|
|
},
|
|
|
|
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;
|
|
}
|
|
.el-table thead {
|
|
background-color: transparent;
|
|
}
|
|
|
|
.board .el-table th .cell {
|
|
line-height: 20px;
|
|
font-size: 15px;
|
|
height: 40px;
|
|
padding: 0px;
|
|
color: yellow;
|
|
}
|
|
.board2 .el-table .cell {
|
|
line-height: 18px;
|
|
font-size: 18px;
|
|
height: 18px;
|
|
padding: 0px;
|
|
color: white;
|
|
}
|
|
|
|
/* 表格内背景颜色 */
|
|
.board2 .el-table th, .el-table tr,.el-table td{
|
|
border: 0;
|
|
background-color: transparent;
|
|
}
|
|
/* 使表格背景透明 */
|
|
.board2 .el-table th, .el-table tr {
|
|
background-color: transparent;
|
|
}
|
|
/* 删除表格下横线 */
|
|
.board2 .el-table::before {
|
|
left: 0;
|
|
bottom: 0;
|
|
width: 100%;
|
|
height: 0px;
|
|
}
|
|
/* 表格表头字体颜色 */
|
|
.board2 .el-table, .el-table__expanded-cell {
|
|
background-color: transparent;
|
|
}
|
|
|
|
|
|
.board2 .el-table th .cell {
|
|
line-height: 18px;
|
|
font-size: 13px;
|
|
height: 36px;
|
|
padding: 0px;
|
|
color: white;
|
|
}
|
|
</style>
|