/** * 图表+表格组件,参见showChartTable() */ /*var _mtssTemplate = Handlebars.compile('../widget/mtss.handlebars');*/ function _setupDateRangePicker(eid, startDate, endDate, fn, options) { //var now = moment(); $('#' + eid).daterangepicker({ "ranges": { "近7天": [moment().subtract(6, 'days'), moment()], "近15天": [moment().subtract(14, 'days'), moment()], "近30天": [moment().subtract(29, 'days'), moment()], "近90天": [moment().subtract(89, 'days'), moment()], "本月起": [moment().startOf('month'), moment()], "上月起": [moment().subtract(1, 'month').startOf('month'), moment()] }, "locale": { "format": "YYYY-MM-DD", "separator": options && options.realtime == true ? " 与 " : " 至 ", "applyLabel": "确定", "cancelLabel": "取消", "customRangeLabel": "自定义", "daysOfWeek": [ "日", "一", "二", "三", "四", "五", "六" ], "monthNames": [ "1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月" ], "firstDay": 1 }, "startDate": startDate, "endDate": endDate }, function(start, end, label) { var s = start.format('YYYY-MM-DD'); var e = end.format('YYYY-MM-DD'); var str = options && options.realtime == true ? " 与 " : " 至 "; $("#" + eid).children("span").html(s + str + e); fn(s, e); }); } function _hasPrecent(s) { return s && s.substr(-1) == '%'; } function _erasePrecent(s) { return s.substr(0, s.length - 1); } function _noPrecent(s) { if (_hasPrecent(s)) return _erasePrecent(s); else return s; } // 检查label最后是不是以%结尾,如果是说明该图表要以%显示 function _handleLabelPrecent(ds) { var ret = false; for (var i = 0; i < ds.length; ++i) { var item = ds[i]; if (_hasPrecent(item.label)) { ret = true; item.label = _erasePrecent(item.label); } } return ret; } // 只显示图表 function _plotChart(eid, ds, options) { var showBars = options && options.stack == true; //console.log(options) //console.log(options.stack) var showRealTime = options && options.realtime == true; //实时数据,坐标显示时分 var showLine = !showBars; var isPrecent = _handleLabelPrecent(ds); var op; if (showLine) { op = { xaxes: [{ mode: 'time', timezone: 'browser', tickFormatter: function(val, axis) { if (showRealTime) return moment(val, 'x').format('HH:mm:ss'); else return moment(val, 'x').format('MM-DD'); } }], yaxes: [{ tickFormatter: isPrecent ? function(val, axis) { return val + '%'; } : function(val, axis) { return val; } }], grid: { hoverable: true //IMPORTANT! this is needed for tooltip to work }, tooltip: true, tooltipOpts: { content: "%x is %y
%s", xDateFormat: showRealTime ? "%H:%M" : "%Y-%m-%d", shifts: { x: -60, y: 25 } }, shadowSize: 0, legend: { hideable: ds.length > 1 } }; } else if (showBars) { op = { xaxis: { mode: 'time', timezone: 'browser', tickFormatter: function(val, axis) { return moment(val, 'x').format('MM-DD'); } }, yaxis: { tickFormatter: function(val, axis) { return val; } /*tickFormatter : function (value, axis) { var value = value + ''; if (value.indexOf('.') == -1) { return value + '.00'; } else { var arr = value.split('.'); if (arr[1].length == 2) { return value; } else { return value + '0'; } } }*/ }, series: { stack: true, group: true, groupInterval: 24 * 60 * 60 * 1000, bars: { show: true, align: 'center', lineWidth: 0, barWidth: 24 * 60 * 60 * 500 } }, grid: { hoverable: true //IMPORTANT! this is needed for tooltip to work }, tooltip: true, tooltipOpts: { content: "%x is %y
%s", xDateFormat: showRealTime ? "%H:%M" : "%Y-%m-%d", shifts: { x: -60, y: 25 } }, shadowSize: 0 } } $.plot($('#' + eid + '_chartZone'), ds, op); } // 显示图表和表格 function _plotChartTable(eid, data, index, isChart, options) { if(options.type == '2m'){ isChart = !isChart; } if (isChart) { // 图表 if (options.type == 'm1') { var seriesData = []; for (var i = 0; i < data.data.length; ++i) { seriesData.push([data.data[i][0], data.data[i][index]]); } var ds = [{ data: seriesData, label: data.columns[index] }]; _plotChart(eid, ds, options); } else { // options.type == 'mn' || options.type == '1m' var ds = []; for (var i = 1; i < data.columns.length; ++i) { var seriesData = []; for (var j = 0; j < data.data.length; ++j) { seriesData.push([data.data[j][0], data.data[j][i]]); } ds.push({ data: seriesData, label: data.columns[i] }); } _plotChart(eid, ds, options); } } else { $('#' + eid + '_chartZone').html('
'); // 表格 var columns = []; for (var i = 0; i < data.columns.length; ++i) { columns.push({ title: data.columns[i] }); } var dataset = []; var formatStr = 'YYYY-MM-DD HH:mm:ss'; if (options && options.realtime == true) { formatStr = 'HH:mm:ss'; } console.log(data.data.reverse()) //data.data=data.data.reverse() for (var i = 0; i < data.data.length; ++i) { var line = [ moment(data.data[i][0], 'x').format(formatStr) ]; //line.toArray().reverse(); //console.log(typeof line) if (data.data[i][8] == "0" || data.data[i][8] == "1"){ data.data[i][8]="等待处理" }else if(data.data[i][8] == "2"){ data.data[i][8]="成功" }else if(data.data[i][8] == "3"){ data.data[i][8]="超时" } //console.log(data.data[i][0]) //.reverse() for (var j = 1; j < data.data[i].length; ++j) { line.push(data.data[i][j]); } dataset.push(line); } //console.log(line) console.log(dataset) //console.log(typeof dataset) // 处理%的列 for (var i = 1; i < columns.length; ++i) { if (_hasPrecent(columns[i].title)) { columns[i].title = _erasePrecent(columns[i].title); for (var j = 0; j < dataset.length; ++j) { dataset[j][i] = dataset[j][i] + '%'; } } } $('#' + eid + '_chartZone_table').DataTable({ data: dataset, columns: columns, language: { search: "搜索", lengthMenu: "每页显示 _MENU_ 行", info: "显示第_START_-_END_行 共_TOTAL_行", infoFiltered: "(从_MAX_行中过滤)", paginate: { first: "首页", last: "末页", next: "下页", previous: "上页" } }, 'bSort':false, //消除自动排序,即标题后的三角 dom: 'lBfrtip', buttons: ['copyHtml5', 'excelHtml5'] }); } } function _refreshChartTable(eid, data, selTabText, selModeName, options) { var modeName = selModeName; if (!modeName) modeName = $("lable[name^='" + eid + "_mode_'].active").attr("name"); modeName = modeName.substr(modeName.indexOf("_mode_") + 6); var isChart = modeName == "chart"; if (options.type == 'm1' || options.type == 'mn') { var tabText = selTabText; if (!tabText) tabText = $("a[href^='#" + eid + "_tab_']").parent(".active").children("a").html(); if (options.type == 'm1') { for (var i = 1; i < data.columns.length; ++i) { if (_noPrecent(data.columns[i]) == tabText) { _plotChartTable(eid, data, i, isChart, options); break; } } } else { // options.type == 'mn' for (var i = 0; i < data.series.length; ++i) { if (_noPrecent(data.series[i].title) == tabText) { _plotChartTable(eid, data.series[i], null, isChart, options); break; } } } } else { // options.type == '1m' _plotChartTable(eid, data, null, isChart, options); } } /** * 显示图表+表格,分为3种类型 * options.type = m1 多项单系列,例如用户活跃-活跃系列 * options.type = 1m 单项多系列,例如用户活跃-渠道活跃 * options.type = mn 多项多系列,例如用户活跃-渠道活跃留存 */ function _showChartTable(eid, data, startDate, endDate, fn, options) { var tabs; if (options.type == 'm1') { tabs = $.grep(data.columns, function(n, i) { return i > 0; }); } else if (options.type == 'mn') { tabs = []; for (var i = 0; i < data.series.length; ++i) { tabs.push(data.series[i].title); } } else if (options.type == '1m'||options.type == '2m') { tabs = [options.title]; } // 去掉标签最后的% for (var i = 0; i < tabs.length; ++i) { if (_hasPrecent(tabs[i])) { tabs[i] = _erasePrecent(tabs[i]); } } var selTabText = "" var selModeName = ""; if ($("a[href^='#" + eid + "_tab_']").length > 0) { // 图表已存在,是更改日期而刷新图表 selTabText = $("a[href^='#" + eid + "_tab_']").parent(".active").children("a").html(); selModeName = $("lable[name^='" + eid + "_mode_'].active").attr("name"); } var source = $("#box").html(); var _mtssTemplate= Handlebars.compile(source); var content = _mtssTemplate({ chartId: eid, startDate: startDate, endDate: endDate, tabs: tabs }); $('#' + eid).html(content); if (selTabText) { // 恢复到原来选择tab和mode $("a[href^='#" + eid + "_tab_'][desc='"+selTabText+"']").parent().addClass("active"); $("a[href^='#" + eid + "_tab_'][desc!='"+selTabText+"']").parent().removeClass("active"); $("lable[name^='" + eid + "_mode_'][name='"+selModeName+"']").addClass("active"); $("lable[name^='" + eid + "_mode_'][name!='"+selModeName+"']").removeClass("active"); } if (options.type == 'm1' || options.type == 'mn') { $("a[href^='#" + eid + "_tab_']").click(function(e){ if ($(this).parent(".active").length > 0) return; _refreshChartTable(eid, data, $(this).html(), null, options); }); } $("lable[name^='" + eid + "_mode_']").click(function(e){ if ($(this).hasClass("active")) return; _refreshChartTable(eid, data, null, $(this).attr("name"), options); }); // 安装日历选择组件 _setupDateRangePicker(eid + "_datepicker", startDate, endDate, fn, options); _refreshChartTable(eid, data, selTabText, selModeName, options); } function setuptChartTable(pid, url, args, options) { // 构造eid,创建div var uris = url.split("/"); var eid = 'id_' + uris[uris.length - 1]; // 取url最后的一段 $('#' + pid).append('
'); // 创建内部函数,用于处理 function func(args2) { $.getJSON(url, args2, function(data) { if (data.ret != 0) { console.log("ajax " + url + " fail: " + data.ret + ", " + data.msg); if (data.ret != 1) { alert(data.msg); } else { location.href = "../index.html"; } //console.log(data) return; } console.log(data) // 转换日期 var momentStr = options && options.realtime == true ? "YYYY-MM-DD HH:mm:ss" : "YYYY-MM-DD HH:mm:ss"; //console.log(options) //console.log(options.realtime) if (options.type == '1m' || options.type == 'm1'||options.type == '2m') { for (var i = 0; i < data.data.length; ++i) { data.data[i][0] = (new moment(data.data[i][0], momentStr).valueOf()); //console.log(new moment(data.data[i][0], momentStr).valueOf()); //console.log(data.data[i][0]) //data.data[i][0].sort() } } else { for (var i = 0; i < data.series.length; ++i) { for (var j = 0; j < data.series[i].data.length; ++j) { data.series[i].data[j][0] = (new moment(data.series[i].data[j][0], momentStr).valueOf()); } } } _showChartTable(eid, data, args2.startDate, args2.endDate, function(s, e) { args2.startDate = s; args2.endDate = e; func(args2); }, options ); }); } // 开始调用一次 func(args); } function setuptChartTable_new() { layui.table.render({ elem: '#sendDatatab' , url: Page.SvrIp+'/api/select_email' //数据接口 , where: { token: cookie.get("token"), startDate: $("#stadate").val(), endDate: $("#enddate").val() } , page: true , cols: [[ { field: 'dateStr', title: '发送日期', width: 160} , { field: 'name', title: '收件人', width: 80 } , { title: 'title', title: '标题', width: 80} , { field: 'chip', title: '金币数量', width: 180 } , { field: 'diamond', title: '钻石数量', width: 180 } , { field: 'item1', title: '道具ID', width: 80 } , { field: 'itemCount1', title: '道具数量', width: 180 } , { field: 'status', title: '状态', width: 80 } , { field: 'content', title: '邮件正文', width: 350 } ]] , parseData: function (res) { //res 即为原始返回的数据 return { "code": res.ret, //解析接口状态 "msg": res.msg, //解析提示文本 "count": res.count, //解析数据长度 "data": res.data //解析数据列表 }; } }); } $(window).load(function(){ $(".table>thead:first-child>tr:first-child>th").attr("class","") })