|
|
<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>
|
