$(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}', pointFormat: '' + '', footerFormat: '
{series.name}: {point.y:.2f}
', shared: true, useHTML: true }, plotOptions: { column: { // borderWidth: 0, // pointWidth:15, //groupPadding:0.8, } }, series: b }); } } }); function QueryStorageMachineByWorkshop(areacode) { var promise = $.ajax({ url: '/api/Orders/QueryMachine', type: 'post', cache: true, async: true, contentType: "application/json", data: JSON.stringify({ areacode: areacode }) }); promise.done(function (r) { console.log(r) var options = ''; $.each(r.info, function (index, v) { options += ""; }); $('#ddlMachine').html(options); $('#ddlMachine').val(''); $('#ddlMachine').select2({ placeholder: "选择机台号", allowClear: true }); }); promise.fail(function (error) { console.log(error) alert(error); }); } //查询车间 function QueryddlWorkshop(){ var promiseweld = $.ajax({ url: '/api/Orders/QueryWorkshop', //'/api/QC/QueryStatus' type: 'post', cache: true, async: true, }); promiseweld.done(function (r) { console.log(r); $.each(r.info, function (index, value) { console.log(index); $("#ddlWorkshop").append(""); }) $('#ddlWorkshop').val(''); $('#ddlWorkshop').select2({ placeholder: "车间", allowClear: true }); $('#ddlWorkshop').on('select2:select', function (e) { console.log($(this).val()); var selectvalue = $(this).val(); QueryStorageMachineByWorkshop(selectvalue); }); }); promiseweld.fail(function (error) { console.log(error) alert(error); }); } QueryddlWorkshop(); //导出EXCEl $('#btnExportExcel').click(function () { if ($('#ddlMachine').val() == null && $('#ddlWorkshop').val() == null && $('#rangetime').val() == '') { toastr.warning('请输入查询参数', '', { progressBar: true }); return; } doPost('/Report/FragmentationExcel', [ workshop = $('#ddlWorkshop').val(), machine = $('#ddlMachine').val(), bt=($('#rangetime').val().substr(0, 19)), et=($('#rangetime').val().split(' - ')[1]), ]) }) function doPost(to, p) { // to:提交动作(action),p:参数 var myForm = document.createElement("form"); myForm.method = "post"; myForm.action = to; for (var i in p) { var myInput = document.createElement("input"); myInput.setAttribute("name", "para"); // 为input对象设置name myInput.setAttribute("value", p[i]); // 为input对象设置value myForm.appendChild(myInput); } document.body.appendChild(myForm); myForm.submit(); document.body.removeChild(myForm); // 提交后移除创建的form } //var columns = []; //for (var i = 0; i < self.data.length; i++) { // for(let key in self.data[i]){ // columns.push( // { // field: key, // title:key, // valign: "middle", // align: "center", // } // ); // } //}