From 715bfecc472aa0fb507ebbfbdadab1bcef4c5db1 Mon Sep 17 00:00:00 2001 From: ruanqi Date: Tue, 29 Mar 2022 18:20:12 +0800 Subject: [PATCH] =?UTF-8?q?=E7=9C=8B=E6=9D=BF=E6=94=B9=E5=8F=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/newScheduledBoard.vue | 208 ++++++++++++++++++++++---------- 1 file changed, 143 insertions(+), 65 deletions(-) diff --git a/src/views/newScheduledBoard.vue b/src/views/newScheduledBoard.vue index c914bdf..65ea4d8 100644 --- a/src/views/newScheduledBoard.vue +++ b/src/views/newScheduledBoard.vue @@ -45,12 +45,56 @@ data() { return { myChart: null, + number1:0, + number2:0, + option:null, + chartDom:null, + option2:null, + tableList:null, + pieList:null, + barList:null, + resourceId:'', + ip:'192.168.1.130' } }, components: { TimeC }, methods: { + searchData(){ + let that = this; + $.ajax({ + url: "/board/getNewScheduledData", + type: "post", + data: {ip:that.ip,number:that.number1 + }, + dataType: "json", + success: (data) => { + if (data.number==-1) { + + }else { + that.number1=data.number; + that.pieList=data.pieList; + that.barList=data.barList; + that.resourceId=data.pieList[0].resourceId; + this.number2=0; + this.draw(); + this.draw2() + $('#table').bootstrapTable('refresh'); + window.setTimeout(() => { + $('#table').bootstrapTable('refresh'); + }, 3000); + window.setTimeout(() => { + $('#table').bootstrapTable('refresh'); + }, 6000); + window.setTimeout(() => { + $('#table').bootstrapTable('refresh'); + }, 9000); + } + + } + }) + }, draw(){ // if (data_temp[i].percentage >= 100) { if (true) { @@ -58,9 +102,12 @@ } else { var color = '#fff300'; } - let option = ({ + if (this.myChart!=null) { + this.myChart.clear() + } + this.option = ({ title: [{ - text: '工序：' + "打磨", + text: '设备：' + this.pieList[0].resourceId, // text: '工序：' + data_temp[i + x].itemNo, // x 设置水平安放位置，默认左对齐，可选值：'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐标，单位px） x: 'center', @@ -76,7 +123,7 @@ } }, { - text: '20%', + text: this.pieList[0].qtyPercent + '%', // text: data_temp[i + x].percentage + '%', // x 设置水平安放位置，默认左对齐，可选值：'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐标，单位px） x: 'center', @@ -99,8 +146,8 @@ data: [ // 数据数组，name 为数据项名称，value 为数据项值 // {value: data_temp[i + x].approveQty, name: ''}, // {value: data_temp[i + x].unapproveQty, name: ''} - {value: 20, name: ''}, - {value: 80, name: ''} + {value: this.pieList[0].qtyReported, name: ''}, + {value: this.pieList[0].qtyUnReported, name: ''} ], color: ['#90ca75', '#ec6566'], labelLine: { @@ -120,11 +167,15 @@ } ] }); - this.myChart = echarts.init(document.getElementById('pie')); - this.myChart.setOption(option); + this.myChart = echarts.init(document.getElementById('pie')); + this.myChart.setOption(this.option); }, tableInit() { + let that=this; $('#table').bootstrapTable({ + url: "/board/getNewScheduledTableData", + method: 'post', //请求方式（*） + contentType: 'application/x-www-form-urlencoded', striped: true, //是否显示行间隔色 cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*） pagination: false, //是否显示分页（*） @@ -132,7 +183,11 @@ sortOrder: "asc", //排序方式 queryParamsType: "undefined", //排序方式 queryParams: function queryParams(params) { //设置查询参数 - + var param = { + "resourceId": that.resourceId, + "number": that.number2, + }; + return param; }, sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*） pageNumber: 1, //初始化加载第一页，默认第一页 @@ -154,66 +209,80 @@ columns: [{ - field: 't1', + field: 'seqno', title: '派工单号', halign:'left', - width: 100, + width: 80, cellStyle: function () { - return {css: {"height": "30px", "color": "yellow"}} + return {css: {"height": "20px", "color": "yellow"}} } + // }, { + // field: 'orderno', + // title: '订单号', + // halign:'left', + // width: 100, + // cellStyle: function () { + // return {css: {"height": "20px", "color": "yellow"}} + // } }, { - field: 't1', - title: '操作员工号', - halign:'left', - width: 100, - cellStyle: function () { - return {css: {"height": "30px", "color": "yellow"}} - } - }, { - field: 't1', - title: '设备编码', + field: 'partNo', + title: '物料编号', halign:'left', - width: 100, + width: 60, cellStyle: function () { - return {css: {"height": "30px", "color": "yellow"}} + return {css: {"height": "20px", "color": "yellow"}} } + // }, { + // field: 'partDesc', + // title: '物料名称', + // halign:'left', + // width: 100, + // cellStyle: function () { + // return {css: {"height": "20px", "color": "yellow"}} + // } }, { - field: 't1', - title: '班次', - halign:'left', - width: 100, - cellStyle: function () { - return {css: {"height": "30px", "color": "yellow"}} - } - }, { - field: 't1', + field: 'qtyRequired', title: '派工数量', halign:'left', - width: 100, + // align:'right', + width: 60, cellStyle: function () { - return {css: {"height": "30px", "color": "yellow"}} + return {css: {"height": "20px", "color": "yellow"}} } }, { - field: 't1', - title: '已完工数量', + field: 'qtyReported', + title: '已完工数', halign:'left', - width: 100, + // align:'right', + width: 60, cellStyle: function () { - return {css: {"height": "30px", "color": "yellow"}} + return {css: {"height": "20px", "color": "yellow"}} } }, { - field: 't1', - title: '未完工数量', + field: 'qtyUnReported', + title: '未完工数', halign:'left', - width: 100, + // align:'right', + width: 60, cellStyle: function () { - return {css: {"height": "30px", "color": "yellow"}} + return {css: {"height": "20px", "color": "yellow"}} + }, + formatter : function(value, row){ + if(value<0){ + return 0; + }else { + return value; + } } } ], onLoadSuccess: function (data) { - + if(data.total<5){ + that.number2=0; + }else { + that.number2+=1; + } } }); @@ -232,16 +301,17 @@ }, draw2(){ - let chartDom = document.getElementById('main'); - let myChart = echarts.init(chartDom); - let option; - // document.getElementById('main').style.height="300px"; - if(this.option!=null){ - document.getElementById('main').removeAttribute('_echarts_instance_') - this.option = null + if (this.myChart2!=null) { + this.myChart2.clear() } - option = { - color:["#11e2b6", "#ff0000"], + 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", "#ec6566"], legend: { textStyle: { //图例文字的样式 color: '#fff', @@ -255,43 +325,43 @@ // data: xAxisData data: [ { - value: '周一', + value: this.getDate(this.barList[6].strDate), textStyle: { color: '#EEE' } }, { - value: '周二', + value: this.getDate(this.barList[5].strDate), textStyle: { color: '#EEE' } }, { - value: '周三', + value: this.getDate(this.barList[4].strDate), textStyle: { color: '#EEE' } }, { - value: '周四', + value: this.getDate(this.barList[3].strDate), textStyle: { color: '#EEE' } }, { - value: '周五', + value: this.getDate(this.barList[2].strDate), textStyle: { color: '#EEE' } }, { - value: '周六', + value: this.getDate(this.barList[1].strDate), textStyle: { color: '#EEE' } }, { - value: '周日', + value: this.getDate(this.barList[0].strDate), textStyle: { color: '#EEE' } @@ -333,7 +403,7 @@ focus: 'series' }, // data: seriesData1 - data: [320, 332, 301, 334, 390, 330, 320] + 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] }, { name: '晚班', @@ -342,19 +412,27 @@ focus: 'series' }, // data: seriesData2 - data: [120, 132, 101, 134, 90, 230, 210] + 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] } ] }; - option && myChart.setOption(option); + this.option2 && this.myChart2.setOption(this.option2); + }, + getDate(value) { + var date = value.substring(5, 10); + return date; + }, + pie(){ + window.setInterval(() => { + this.searchData(); + }, 12000); } }, mounted() { - this.draw(); this.tableInit(); - this.data(); - this.draw2(); + this.searchData(); + this. pie(); } }