yujian
2020-06-29 941107b1bd3c976d04a0bde3829e1534d0b54f8c
拉新免单券统计
1个文件已修改
1个文件已添加
225 ■■■■■ 已修改文件
childPath/charts/prize/free_coupon_collect.html 5 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
childPath/charts/prize/free_pull_new_count.html 220 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
childPath/charts/prize/free_coupon_collect.html
@@ -41,6 +41,7 @@
            <ul class="layui-tab-title">
                <li class="layui-this" lay-id="t1">免单券</li>
                <li lay-id="t2">赠送免单券</li>
                <li lay-id="t3">拉新免单券</li>
            </ul>
            <div class="layui-tab-content" style="position: absolute; top: 36px; bottom: 0px; width: 100%; padding: 0px; overflow: hidden;">
                <div class="layui-tab-item layui-show" style="position: absolute; top: 36px; bottom: 0px; width: 100%; padding: 0px; overflow: hidden;">
@@ -51,6 +52,10 @@
                    <iframe tab-id="t2" align="center" width="100%" height="100%" datasrc="free_give_count.html" frameborder="no" border="0"
                     marginwidth="0" marginheight="0" scrolling="no"></iframe>
                </div>
                <div class="layui-tab-item" style="position: absolute; top: 36px; bottom: 0px; width: 100%; padding: 0px; overflow: hidden;">
                    <iframe tab-id="t3" align="center" width="100%" height="100%" datasrc="free_pull_new_count.html" frameborder="no" border="0"
                     marginwidth="0" marginheight="0" scrolling="no"></iframe>
                </div>
            </div>
        </div>
    </body>
childPath/charts/prize/free_pull_new_count.html
New file
@@ -0,0 +1,220 @@
<!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>