var close = new Vue({ el: '#TotalCapacity', data: { info: [], chart_inout: '', option_inout: { backgroundColor: "rgba(0,0,100,0.0)", title: { text: '', x: 'center' }, legend: { data: ['Line1', 'Line2', 'Line3', 'Line4'], x: 'center', top: 15, textStyle: {//图例文字的样式 color: '#FFFCFF', fontSize: 20 } }, toolbox: { show: true }, xAxis: { type: 'category', axisPointer: { type: 'shadow' }, data: ['分选', '串焊', '层叠', '层压','装框','包装'], axisLabel: { show: true, textStyle: { color: '#FFFCFF', //更改坐标轴文字颜色 fontSize: 20 //更改坐标轴文字大小 } }, axisLine: { lineStyle: { type: 'solid', color: '#fff',//左边线的颜色 width: '2'//坐标线的宽度 } }, }, yAxis: { type: 'value', name: '产量', nameTextStyle: { color: "#FFFCFF", fontSize: 20, padding: 10 }, scale: true, axisLabel: { show: true, textStyle: { color: '#FFFCFF', //更改坐标轴文字颜色 fontSize: 20 //更改坐标轴文字大小 } }, axisLine: { lineStyle: { type: 'solid', color: '#fff',//左边线的颜色 width: '2'//坐标线的宽度 } }, splitLine: { //网格线 lineStyle: { type: 'dashed' //设置网格线类型 dotted:虚线 solid:实线 }, show: true //隐藏或显示 } }, series: [ { name: 'Line1', type: 'bar', symbol: 'roundRect', symbolSize: 10, label: { normal: { show: true, position: 'top', formatter: '{c}', textStyle: { //数值样式 //color: 'black', fontSize: 22 } } }, barGap: '10%', barCategoryGap: '30%', data: [0, 0, 0, 0, 0, 0] }, { name: 'Line2', type: 'bar', symbol: 'roundRect', symbolSize: 10, label: { normal: { show: true, position: 'top', formatter: '{c}', textStyle: { //数值样式 //color: 'black', fontSize: 22 } } }, itemStyle: { normal: { color: '#68EFF5' } }, barGap: '10%', barCategoryGap: '30%', data: [0, 0, 0, 0, 0, 0] }, { name: 'Line3', type: 'bar', symbol: 'roundRect', symbolSize: 10, label: { normal: { show: true, position: 'top', formatter: '{c}', textStyle: { //数值样式 //color: 'black', fontSize: 22 } } }, itemStyle: { normal: { color: '#FAEA88' } }, barGap: '10%', barCategoryGap: '30%', data: [0, 0, 0, 0, 0, 0] }, { name: 'Line4', type: 'bar', symbol: 'roundRect', symbolSize: 10, label: { normal: { show: true, position: 'top', formatter: '{c}', textStyle: { //数值样式 //color: 'black', fontSize: 22 } } }, itemStyle: { normal: { color: '#ff9100' } }, barGap: '10%', barCategoryGap: '30%', data: [0, 0, 0, 0, 0, 0] } ] } }, mounted() { var self = this; self.chart_inout = echarts.init(document.getElementById('total')); self.chart_inout.clear(); self.chart_inout.setOption(self.option_inout); setTimeout(function () { window.onresize = function () { self.chart_inout.resize(); } }, 200) var h = document.documentElement.clientHeight; console.log(h); var height = (h - 90); console.log(height); $('#total').css("height", height + "px"); self.chart_inout.resize(); $(window).resize(function () { var h = parseInt($(window).height()); var height = (h - 130); console.log(height); $('#total').css("height", height + "px"); self.chart_inout.resize(); }) self.fun_update(); self.fun_time(); setInterval(self.fun_update, 60000); setInterval(self.fun_time, 1000); }, methods: { fun_time: function () { var self = this; $("#time").html(self.getTime()); }, getTime: function () { //获取时间 var date = new Date(); var year = date.getFullYear(); var month = date.getMonth() + 1; var day = date.getDate(); var hour = date.getHours(); var minute = date.getMinutes(); var second = date.getSeconds(); //这样写显示时间在1~9会挤占空间;所以要在1~9的数字前补零; if (hour < 10) { hour = '0' + hour; } if (minute < 10) { minute = '0' + minute; } if (second < 10) { second = '0' + second; } var x = date.getDay();//获取星期 var time = year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second return time; }, fun_update: function () { var self = this; execute(); async function execute() { try { let result = await self.FetchApi("AfterCapacity", {}); result = await result.json(); console.log(result); var chart_option = self.chart_inout.getOption(); for (var i = 1; i <= 4; i++) { self.option_inout.series[i - 1].data = [0, 0, 0, 0, 0, 0] $.each(result, function (ind, row) { if (row.line_id == i) { if (row.process_code == '分选') chart_option.series[i - 1].data[0] = row.qty; if (row.process_code == 'M10') chart_option.series[i - 1].data[1] = row.qty; if (row.process_code == 'M15') chart_option.series[i - 1].data[2] = row.qty; if (row.process_code == 'N30') chart_option.series[i - 1].data[3] = row.qty; if (row.process_code == 'M45') chart_option.series[i - 1].data[4] = row.qty; if (row.process_code == 'P100') chart_option.series[i - 1].data[5] = row.qty; } }); } self.chart_inout.setOption(chart_option); } catch (err) { console.log(err); } } }, //请求数据方法 requestApi: function (config) {//modulename, funname, para, success, fail) { fetch("/api/" + config.modulename + "/" + config.funname + "", { method: "post", headers: { "Accept": "application/json, text/plain, */*", "Content-Type": "application/json" }, body: JSON.stringify(config.para) }).then( (res) => { return res.json() } ).then( (res) => { config.success(res) } ).catch( (ex) => { config.fail(ex) } ) }, FetchApi: function (funname, para) { return fetch("/api/BeforeCapacity/" + funname + "", { method: "post", headers: { "Accept": "application/json, text/plain, */*", "Content-Type": "application/json" }, body: JSON.stringify(para) }) } } })