$(document).ready(function () { Daterangeini(); //QueryddlStatus(); //1.初始化Table $('#wodaterange').tooltip(); }) /*显示daterangepicker*/ function Daterangeini() { $('#rangetime').val(moment().subtract('hours', 0).format('YYYY-MM-DD') + ' 07:20:00' + ' - ' + moment().format('YYYY-MM-DD') + ' 19:20:00'); $('#rangetime').daterangepicker( { //autoUpdateInput: false, timePicker: true, timePicker24Hour: true, "opens": "center", 'locale': { "format": 'YYYY-MM-DD HH:mm:ss', "separator": " - ", "applyLabel": "确定", "cancelLabel": "取消", "fromLabel": "起始时间", "toLabel": "结束时间'", "customRangeLabel": "自定义", "weekLabel": "W", "daysOfWeek": ["日", "一", "二", "三", "四", "五", "六"], "monthNames": ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"], "firstDay": 1, //"cancelLabel": '清除' } }); //$('#rangetime').val(''); $('#rangetime').on('cancel.daterangepicker', function (ev, picker) { $(this).val(''); }); } let productsinfo = new Vue({ el: '#FragmentationRate', components: { 'BootstrapTable': BootstrapTable }, data:{ columns:[], data:[], options:{ pagination: true, //是否显示分页(*) pageSize: 12, //每页的记录行数(*) search: true, //是否显示表格搜索,此搜索是客户端搜索,不会进服务端, strictSearch: true, showColumns: true, //是否显示所有的列 showRefresh: true, } }, methods: { //查询表格数据 inquireinfo: function () { var self = this; var categories = []; var series = []; var color1 = ['#073179', '#073179', '#f17747', '#f17747', '#00a8f3', '#00a8f3', '#7e78ed', '#7e78ed', '#e2db4f', '#e2db4f', '#78ed97', '#78ed97', '#ed789f', '#ed789f', '#522954', '#522954', '#298749', '#298749', '#c198b6', '#c198b6', '#c1aa98', '#c1aa98', '#947171', '#947171', '#f8c2c2', '#f8c2c2', '#b6b5ba', '#b6b5ba', '#575454', '#575454', '#550404', '#550404']; var color2 = ['#00a8f3','#cc5e3f']; var obj={ text: '' } self.columns = []; //console.log($('#ddlWorkshop').val()); if ($('#ddlMachine').val() == null && $('#ddlWorkshop').val() == null && $('#rangetime').val() =='') { categories = []; series = []; color1 = []; self.charts(categories, series, color1); toastr.warning('请输入查询参数', '', { progressBar: true }); return; } else { self.requestApi({ modulename: "FragmentationRate", funname: "FragmentationRate", //BatchRate para: { machine: $('#ddlMachine').val(), workshop: $('#ddlWorkshop').val(), bt:($('#rangetime').val().substr(0, 19)), et:($('#rangetime').val().split(' - ')[1])}, success: (res) => { console.log(res); self.data = res; var kis = []; if (self.data.length == 0){//判断是否可以查到数据 categories = []; series = []; color1 = []; self.charts(categories, series, color1); } else { 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) //视图数据处理 if (self.data.length > 1) { for (var i = 0; i < self.data.length; i++) { categories.push( self.data[i]["机台号"] ) }; obj.text = $('#ddlWorkshop').find("option:selected").text() + "一次碎片率视图"//获取车间名称 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(obj, categories, series, color1); } else if (self.data.length == 1) { var x2 = Object.keys(self.data[0]); var dt1 = []; var dt2 = []; obj.text = self.data[0]["机台号"] + "碎片率视图" 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, dashStyle: 'DashDot', marker: { symbol: 'cross', lineColor: null, lineWidth: 6 } } ) self.charts(obj, 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 (d,a,b,c){ $('#container').highcharts({ chart: { zoomType: 'xy' }, title:d, 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} |