New file |
| | |
| | | <!DOCTYPE html> |
| | | <html> |
| | | |
| | | <head> |
| | | <meta charset="UTF-8"> |
| | | <meta http-equiv="X-UA-Compatible" content="chrome=1"/> |
| | | <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> |
| | | <title>拉新免单券</title> |
| | | <link rel="stylesheet" type="text/css" href="../../../css/doui.min.css"/> |
| | | <script src="../../../js/doui.min.js" type="text/javascript" charset="utf-8"></script> |
| | | <script src="../../../js/requestHost.js" type="text/javascript" charset="utf-8"></script> |
| | | <script type="text/javascript"> |
| | | doui.importLoad({ |
| | | importArray: [ |
| | | // 雷打不动 |
| | | getHostPath() + "js/jquery.min.js", |
| | | getHostPath() + "js/vue.min.js", |
| | | // 字体图标 |
| | | getHostPath() + "fontAdmin/iconfont.css", |
| | | getHostPath() + "font/iconfont.css", |
| | | // dom模板 |
| | | getHostPath() + "css/admin-all.css", |
| | | getHostPath() + "js/admin-creat.js", |
| | | // Echarts插件 |
| | | getHostPath() + "childPath/charts/echarts.common.min.js", |
| | | ], |
| | | }); |
| | | </script> |
| | | </head> |
| | | |
| | | <body class="fontPC"> |
| | | <div class="winSizeBox bg-white"> |
| | | |
| | | <!-- =============================================================== 搜索筛选(顶部) --> |
| | | <div id="thisHeader" style="width:7.5rem;"></div> |
| | | |
| | | <!-- =============================================================== 表格 --> |
| | | <div id="thisTable" class="admin-main-overHeader"> |
| | | <!--图表外层--> |
| | | <div id="main" style="width:100%; height:100%; padding:20px;"></div> |
| | | </div> |
| | | |
| | | </div> |
| | | </body> |
| | | |
| | | </html> |
| | | |
| | | |
| | | <script type="text/javascript"> |
| | | |
| | | // 图表申明 |
| | | var myChart = null; |
| | | // 图标设置 |
| | | var option = { |
| | | // 表格标题 |
| | | title: { text: '' }, |
| | | // 坐标系 |
| | | grid: { show: true }, |
| | | // 提示框 |
| | | tooltip: { |
| | | trigger: 'axis', |
| | | axisPointer: { type: 'cross' } |
| | | }, |
| | | // 提供下载为图 |
| | | toolbox: { feature: { saveAsImage: {} } }, |
| | | // 图例项 |
| | | legend: { data: [] }, // 需要接口获取 |
| | | // X轴 |
| | | xAxis: { |
| | | name: "时间", |
| | | type: 'category', |
| | | boundaryGap: false, |
| | | data: [], // 需要接口获取 |
| | | }, |
| | | // Y轴 |
| | | yAxis: { |
| | | name: "结果", |
| | | type: 'value', |
| | | axisLabel: { formatter: '{value} ' }, |
| | | axisPointer: { snap: true } |
| | | }, |
| | | // 数据 |
| | | series: [], // 需要接口获取 |
| | | }; |
| | | |
| | | // vue实例化 |
| | | doui.onReady({ |
| | | success: function() |
| | | { |
| | | // ----------------------------------------------------- 顶部 |
| | | // 生成顶部筛选项dom |
| | | adminDom.header.creat({ |
| | | el: "#thisHeader", |
| | | touchSearch: function (optC) |
| | | { |
| | | // 请求地址
|
| | | var myurl = gethttp() + "/admin/new/api/v1/countCharts/getCouponCharts";
|
| | | |
| | | // 请求数据 |
| | | var mydata = { |
| | | dateType: optC.select.result, |
| | | };
|
| | | |
| | | |
| | | if (optC.change.result == 1){
|
| | | mydata.typeArray =["pullNewCouponNum"];
|
| | | } else {
|
| | | mydata.typeArray =["pullNewCouponMoney"];
|
| | | }
|
| | | |
| | | |
| | | // 根据选择修改 |
| | | if (mydata.dateType == "1") { |
| | | mydata.startTime = optC.input[0].result; // 开始时间 |
| | | mydata.endTime = optC.input[1]?optC.input[1].result:""; // 结束时间 |
| | | }
|
| | | |
| | | if (mydata.dateType == "2") { |
| | | mydata.year = optC.input[0].result; // 年份 |
| | | }
|
| | | |
| | | // 数据请求 |
| | | doui.showLoading("加载数据"); |
| | | doui.request({ |
| | | type: "jsonp", |
| | | url: myurl, |
| | | data: mydata, |
| | | success: function (res) |
| | | { |
| | | doui.hideLoading(); |
| | | if (res.code != 0) { doui.showToast(res.msg); } |
| | | else |
| | | { |
| | | // 图例选择 |
| | | var legendData = new Array(); |
| | | // 分析数据 |
| | | for (var i = 0; i < res.data.line_list.length; i++) |
| | | { |
| | | legendData.push(res.data.line_list[i].name); |
| | | res.data.line_list[i].type = "line"; // 线条样式 |
| | | res.data.line_list[i].smooth = true; // 线条平滑 |
| | | res.data.line_list[i].stack = '总量'; // 数据堆叠 |
| | | } |
| | | // 图表赋值 |
| | | option.legend.data = legendData; // 图例项 |
| | | option.xAxis.data = res.data.xAxis_list; // X轴数据 |
| | | option.series = res.data.line_list; // 线条数据 |
| | | myChart.setOption(option, true); |
| | | } |
| | | } |
| | | }); |
| | | } |
| | | }); |
| | | // 下拉框 |
| | | adminDom.header.select({ |
| | | show: true, |
| | | list: [ |
| | | { "key": "1", value: "日视图" }, |
| | | { "key": "2", value: "月视图" }, |
| | | { "key": "3", value: "年视图" }, |
| | | ], |
| | | touch: function(back) |
| | | { |
| | | // 日视图 |
| | | if (back == "1") { adminDom.header.input({ num: 2, type: "date", }); } |
| | | // 月视图 |
| | | else if (back == "2") { adminDom.header.input({ num: 1, type: "number", placeholder: "要查看的年份,如:2018" }); } |
| | | // 年视图 |
| | | else if (back == "3") { adminDom.header.input({ num: 1, type: "number", placeholder: "该模式下无需输入" }); } |
| | | } |
| | | }); |
| | | // 输入搜索 |
| | | adminDom.header.input({ num: 2, type: "date", }); |
| | | // 下拉框 |
| | | adminDom.header.change({ |
| | | show: true, |
| | | list: [ |
| | | { "key": "1", value: "数量" }, |
| | | { "key": "2", value: "金额" }, |
| | | ], |
| | | }); |
| | | |
| | | // ----------------------------------------------------- 图标处 |
| | | // Echarts初始化 |
| | | myChart = echarts.init(document.getElementById('main')); |
| | | myChart.resize({ height: this.autoHeight});
|
| | | myChart.resize({ width: this.autoWidth}); |
| | | |
| | | // ----------------------------------------------------- 初始行为 |
| | | // 时间初始化为前十天 |
| | | initInputGet(); |
| | | // 请求数据 |
| | | vm_header.search(); |
| | | } |
| | | }); |
| | | |
| | | |
| | | // 初始化为最近10天 |
| | | function initInputGet () |
| | | { |
| | | // 获取当前时间戳 |
| | | var timestampEnd = new Date().getTime() - (1000*60*60*24*1); |
| | | var timestampStart = timestampEnd - (1000*60*60*24*11); |
| | | // 开始时间转化为识别类型 |
| | | var mo = new Date(timestampStart); |
| | | var month = mo.getMonth()+1; if (month < 10) { month = "0" + month; } |
| | | var day = mo.getDate(); if (day < 10) { day = "0" + day; } |
| | | var commonStart = mo.getFullYear() + "-" + month + "-" + day; |
| | | // 结束时间转化为识别类型 |
| | | mo = new Date(timestampEnd); |
| | | month = mo.getMonth()+1; if (month < 10) { month = "0" + month; } |
| | | day = mo.getDate(); if (day < 10) { day = "0" + day; } |
| | | var commonEnd = mo.getFullYear() + "-" + month + "-" + day; |
| | | // 将输入初始化 |
| | | vm_header.input.result[0] = commonStart; |
| | | vm_header.input.result[1] = commonEnd; |
| | | } |
| | | |
| | | |
| | | </script> |