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