let productsinfo = new Vue({ el: '#FragmentationRate', components: { 'BootstrapTable': BootstrapTable }, data: { columns:[], //columns: [{ // field: 'no', // title: '序号', // sortable: false, // align: "center", // width: 40, // formatter: function (value, row, index) { // //获取每页显示的数量 // var pageSize = $('#asd').bootstrapTable('getOptions').pageSize; // //获取当前是第几页 // var pageNumber = $('#asd').bootstrapTable('getOptions').pageNumber; // //返回序号,注意index是从0开始的,所以要加上1 // return pageSize * (pageNumber - 1) + index + 1; // } //}, { // field: '机台号', // title: '机台号', // align: 'center' // }, // { // field: '过站块数', // title: '过站块数', // align: 'center' // }, // { // field: '并片', // title: '并片数', // align: 'center' // }, // { // field: '并片率', // title: '并片率', // align: 'center' // }, // { // field: '错位', // title: '错位数', // align: 'center' // }, { // field: '错位率', // title: '错位率', // align: 'center' // }, // { // field: "低效", // title: "低效数", // align: 'center' // }, // { // field: "低效率", // title: "低效率", // align: 'center' // }, // { // field: "短路", // title: "短路数", // align: 'center' // }, // { // field: "短路率", // title: "短路率", // align: 'center' // }, // { // field: "黑斑", // title: "黑斑数", // align: 'center' // }, // { // field: "黑斑率", // title: "黑斑率", // align: 'center' // }, // { // field: "混档", // title: "混档数", // align: 'center' // }, // { // field: "混档率", // title: "混档率", // align: 'center' // }, // { // field: "间距", // title: "间距数", // align: 'center' // }, // { // field: "间距率", // title: "间距率", // align: 'center' // }, // { // field: "露白", // title: "露白数", // align: 'center' // }, // { // field: "露白率", // title: "露白率", // align: 'center' // }, // { // field: "明暗片", // title: "明暗片数", // align: 'center' // }, // { // field: "明暗片率", // title: "明暗片率", // align: 'center' // }, // { // field: "破片", // title: "破片数", // align: 'center' // }, // { // field: "破片率", // title: "破片率", // align: 'center' // }, // { // field: "缺角", // title: "缺角数", // align: 'center' // }, // { // field: "缺角率", // title: "缺角率", // align: 'center' // }, // { // field: "少两串", // title: "少两串数", // align: 'center' // }, // { // field: "少两串率", // title: "少两串率", // align: 'center' // }, // { // field: "未焊", // title: "未焊数", // align: 'center' // }, // { // field: "未焊率", // title: "未焊率", // align: 'center' // }, // { // field: "虚焊", // title: "虚焊数", // align: 'center' // }, // { // field: "虚焊率", // title: "虚焊率", // align: 'center' // }, // { // field: "隐裂", // title: "隐裂数", // align: 'center' // }, // { // field: "隐裂率", // title: "隐裂率", // align: 'center' // }, // { // field: "助焊剂残留", // title: "助焊剂残留数", // align: 'center' // }, // { // field: "助焊剂残留率", // title: "助焊剂残留率", // align: 'center' // } // ], data: [ ], options: { pagination: true, //是否显示分页(*) pageSize: 12, //每页的记录行数(*) search: true, //是否显示表格搜索,此搜索是客户端搜索,不会进服务端, strictSearch: true, //showColumns: true, //是否显示所有的列 showRefresh: true, } }, methods: { //查询表格数据 inquireinfo: function () { var self = this; self.columns = []; //console.log($('#ddlWorkshop').val()); if ($('#ddlMachine').val() == null && $('#ddlWorkshop').val() == null) { toastr.warning('请输入查询参数', '', { progressBar: true }); return; } self.requestApi({ modulename: "FragmentationRate", funname: "FragmentationRate", //BatchRate para: { machine: $('#ddlMachine').val(),workshop:$('#ddlWorkshop').val()}, success: (res) => { console.log(res); self.data = res; var kis= []; for (let key in self.data[0]) {//动态获取表头 self.columns.push( { field: key, title: key, valign: "middle", align: "center", } ); //将表中数据放到一个数组中 for (var k = 0; k < self.data.length; k++){ var dat = self.percentage(self.data[k][key]) kis.push(dat) } } console.log(kis) // console.log(Object.keys(self.data[0]).length) var categories = []; var series = []; var color1 = ['#f09090', '#f09090', '#f17747', '#f17747', '#00a8f3', '#00a8f3', '#7e78ed', '#7e78ed', '#e2db4f', '#e2db4f', '#78ed97', '#78ed97', '#ed789f', '#ed789f', '#4a6699', '#4a6699', '#298749', '#298749', '#c198b6', '#c198b6', '#c1aa98', '#c1aa98', '#947171', '#947171', '#f8c2c2', '#f8c2c2', '#b6b5ba', '#b6b5ba', '#575454', '#575454', '#d9d2f7', '#d9d2f7']; var color2 = ['#f09090','#00a8f3']; //视图数据处理 if (self.data.length > 1) { for (var i = 0; i < self.data.length; i++) { categories.push( self.data[i]["机台号"] ) }; var x1 = Object.keys(self.data[0]); console.log(x1) var m = 3 * self.data.length; for (var j = 3; j < Object.keys(self.data[0]).length - 1; j += 2) { series.push( { type: 'column', yAxis: 1, name: x1[j], data: kis.slice(m, m + self.data.length) }, { type: 'spline', name: x1[j + 1], data: kis.slice(m + self.data.length, m + 2 * self.data.length) } ) m = m + 2 * self.data.length; }; self.charts(categories, series,color1); } else if (self.data.length == 1) { var x2 = Object.keys(self.data[0]); var dt1 = []; var dt2 = []; for (var j = 3; j < Object.keys(self.data[0]).length - 1; j += 2) {//动态获取横坐标 categories.push( x2[j] ) } for (var s1 = 3; s1 < kis.length - 1; s1 += 2) { dt1.push( kis[s1] ) } for (var s2 = 4; s2 < kis.length - 1; s2 += 2) { dt2.push( kis[s2] ) } series.push( { type: 'column', yAxis: 1, name: '数量', data: dt1, }, { type: 'spline', name:'比率', data: dt2, } ) self.charts(categories, series, color2); } // console.log(dt2) //console.log(categories) // console.log(series) }, fail: (ex) => { console.log(ex); } }) }, //去除百分号 percentage: function (date) { var f; if (date.toString().indexOf("%") != -1) { f = Number(date.toString().slice(0, date.toString().length - 1)) } else { f = Number(date); } return f; }, 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) } ) }, form: function (config) { fetch("/" + 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) } ) }, charts: function (a,b,c){ $('#container').highcharts({ chart: { zoomType: 'xy' }, title: { text: '破片率统计视图' }, colors: c, xAxis: { categories: a, crosshair: true }, yAxis: [ { min: 0, //tickInterval: 5, title: { text: '破片率' }, labels: { formatter: function () { return this.value + '%'; } }, opposite: true }, { min: 0, // tickInterval: 100, title: { text: '破片数' } } ], //tooltip: { // shared: true //}, tooltip: { // head + 每个 point + footer 拼接成完整的 table headerFormat: '{point.key}
{series.name}: | ' + '{point.y:.2f} |