crm/app/sys/view/statistics/source_data.html

{extend name="public/layout" /} 
{block name="title"}客户来源渠道统计{/block} 
{block name="head"}
{include file="public/head"}
<style>
    .layui-table th:last-child {
        border-right: none;
    }

    .layui-table-view .layui-table {
        /* width:100% */
    }

    .layui-table thead tr,
	.layui-table-header {
		background-color: #D8E6F1 !important;
	}
    
    .line-middle {
        width: 10px;
        height: 100%;
        margin: 0px 10px;
    }
    .line {
        width: 10px;
        height: 2px;
        background-color: #999999;
    }
    .flex-row {
        display: flex;
        align-items: center;
    }
    .mb0 {
        margin-bottom: 0px;
    }
    .row {
        display: flex;
    }
    .layui-btn {
        background-color: #fff;
        color: #555;
        border: 1px solid #c9c9c9
    }
    .layui-btn:hover {
        background-color: #fff;
        color: #555;
        border: 1px solid #249efb;
    }
    .layui-btn-primary,.sBtn {
        background-color: #249efb;
        color: #fff;
        border: 1px solid #249efb;
    }
    .layui-btn-primary:hover {
        background-color: #249efb;
        color: #fff;
        border: 1px solid #249efb;
    }
    .sBtn:hover {
        background-color: #249efb;
        color: #fff;
        border: 1px solid #249efb;
    }
    .ml10 {
        margin-left: 10px;
    }
    .justify-between {
        justify-content: space-between;
    }
    .ptlr {
        padding: 20px 20px 0px;
    }
</style>
{/block}
{block name="body"}
<div class="layui-fluid">
    <div class="layui-card">
        <div class="search-form layui-form flex-row justify-between ptlr">
            <div class="flex-row">
                <div class="layui-form-item mb0">
                    <div class="layui-input-block" style="margin: 0px;">
                      <select name="channel">
                        <option value="">全部来源渠道</option>
                        <option value="0">郑州</option>
                        <option value="1">上海</option>
                        <option value="2">广州</option>
                        <option value="3">深圳</option>
                        <option value="4">杭州</option>
                      </select>
                    </div>
                </div>
                <div class="layui-inline row ml10" id="timeBtn">
                    <input type="button" class="layui-btn" value="今日"/>
                    <input type="button" class="layui-btn" value="3天"/>
                    <input type="button" class="layui-btn" value="7天"/>
                    <input type="button" class="layui-btn" value="1个月"/>
                </div>
                <div class="layui-inline ml10"> <!-- 注意：这一层元素并不是必须的 -->
                    <input type="text" class="layui-input" id="sDate" name="start_date" placeholder="选择开始日期">
                </div>
                <div class="line-middle">
                    <div class="line"></div>
                </div>
                <div class="layui-inline"> <!-- 注意：这一层元素并不是必须的 -->
                    <input type="text" class="layui-input" id="eDate" name="end_date" placeholder="选择结束日期">
                </div>
            </div>
            <div>
                <button class="layui-btn sBtn ml10" lay-submit lay-filter="table-search">筛选</button>
            </div>
        </div>
        <div class="layui-card-body">
            <table lay-filter="datalist" id="list"></table>
        </div>
    </div>
</div>
{/block}
{block name="js"}
<script>
    layui.use(['table', 'form','laydate'], function () {
        let table = layui.table,
            form = layui.form,
            laydate = layui.laydate,
            $ = layui.$;
        $('body').attr('layadmin-themealias', 'default');

        //执行一个laydate实例
        laydate.render({
            elem: '#sDate' //指定元素
        });
        laydate.render({
            elem: '#eDate' //指定元素
        });

        let cols1 = [[
            { field: 'id', title: '部门名称',width: 100, align: 'center', 'fixed': true },
            { field: 'id', title: '人效',width: 80, align: 'center' },
            { field: 'id', title: '待确认',width: 90, align: 'center' },
            { field: 'id', title: '量房数',width: 90, align: 'center' },
            { field: 'id', title: '到店数',width: 90, align: 'center' },
            { field: 'id', title: '见面数',width: 90, align: 'center' },
            { field: 'id', title: '见面率',width: 90, align: 'center' },
            { field: 'id', title: '订金数',width: 90, align: 'center' },
            { field: 'id', title: '收定率',width: 90, align: 'center' },
            { field: 'id', title: '收定金额',width: 100, align: 'center' },
            { field: 'id', title: '合同数',width: 90, align: 'center' },
            { field: 'id', title: '合同率',width: 90, align: 'center' },
            { field: 'id', title: '合同金额',width: 100, align: 'center' },
            { field: 'id', title: '均单值',width: 90, align: 'center' },
            { field: 'id', title: '线索量',width: 90, align: 'center' },
            { field: 'id', title: '有效线索量',width: 90, align: 'center' },
            { field: 'id', title: '有效率',width: 90, align: 'center' }
        ]];
        let cols2 = [[
            { field: 'id', title: '员工名称',width: 100, align: 'center', 'fixed': true },
            { field: 'id', title: '部门名称',width: 100, align: 'center' },
            { field: 'id', title: '待确认',width: 90, align: 'center' },
            { field: 'id', title: '量房数',width: 90, align: 'center' },
            { field: 'id', title: '到店数',width: 90, align: 'center' },
            { field: 'id', title: '见面数',width: 90, align: 'center' },
            { field: 'id', title: '见面率',width: 90, align: 'center' },
            { field: 'id', title: '订金数',width: 90, align: 'center' },
            { field: 'id', title: '收定率',width: 90, align: 'center' },
            { field: 'id', title: '收定金额',width: 100, align: 'center' },
            { field: 'id', title: '合同数',width: 90, align: 'center' },
            { field: 'id', title: '合同率',width: 90, align: 'center' },
            { field: 'id', title: '合同金额',width: 100, align: 'center' },
            { field: 'id', title: '均单值',width: 90, align: 'center' },
            { field: 'id', title: '线索量',width: 90, align: 'center' },
            { field: 'id', title: '有效线索量',width: 90, align: 'center' },
            { field: 'id', title: '有效率',width: 90, align: 'center' }
        ]];

        table.render({
            elem: '#list'
            , url: '{:url("statistics/customer")}'
            , page: true
            , height: 'full-100'
            , cols: cols1
            , id: 'tablelist'
        });

        function setYMD(time) {
            let dateTime = new Date(time);
            let year = dateTime.getFullYear();
            let Month = dateTime.getMonth() + 1;
            let days = dateTime.getDate();
            return `${year}-${Month > 9 ? Month : '0' + Month}-${days > 9 ? days : '0' + days}`;
        }

        var dateArr = {};
        var today = new Date().getTime();
        var oneTime = 24 * 60 * 60 * 1000;
        var threeDay1 = today - 3 * oneTime;
        var sevenDay1 = today - 6 * oneTime;
        var oneMonth = today - 30 * oneTime;
        dateArr = {
            nowS: setYMD(today),
            nowE: setYMD(today),
            threeDayS: setYMD(threeDay1),
            threeDayE: setYMD(today),
            sevenDayS: setYMD(sevenDay1),
            sevenDayE: setYMD(today),
            oneMonthS: setYMD(oneMonth),
            oneMonthE: setYMD(today),
        }

        $('#timeBtn').on('click',function(e){
            if (!!(e.target.localName != 'input')) return;
            let o = document.querySelector('#timeBtn').children;
            if (e.target.classList.contains('layui-btn-primary') == true) {
                for (var i = 0; i < o.length; i++) {
                    o[i].className = 'layui-btn';
                }
                $('#sDate').val('');
                $('#eDate').val('');
                return;
            } else {
                for (var i = 0; i < o.length; i++) {
                    o[i].className = 'layui-btn';
                }
                e.target.className = 'layui-btn layui-btn-primary';
                if (!!(e.target.className.indexOf('layui-btn-primary') > 0)) {
                    if (e.target.value == '今日') {
                        $('#sDate').val(dateArr.nowS);
                        $('#eDate').val(dateArr.nowE);
                    } else if (e.target.value == '3天') {
                        $('#sDate').val(dateArr.threeDayS);
                        $('#eDate').val(dateArr.threeDayE);
                    } else if (e.target.value == '7天') {
                        $('#sDate').val(dateArr.sevenDayS);
                        $('#eDate').val(dateArr.sevenDayE);
                    } else {
                        $('#sDate').val(dateArr.oneMonthS);
                        $('#eDate').val(dateArr.oneMonthE);
                    }
                }
            }
        })

        form.on('submit(table-search)', function (data) {
            let field = data.field;
            let element = $('.layui-btn-primary');
            if (element && element[0]) {
                let el = element[0].value;
                console.log(el);
            }
            let option = {
                where: field
                , page: {
                    curr: 1
                }
            };

            if (field.type == 1) {
                option.cols = [[
                    { type: 'numbers', field: 'id', title: '序号', align: 'center' }
                ]]
            } else {
                option.cols = [[
                    { type: 'numbers', field: 'id', title: '序号', align: 'center' }
                ]]
            }

            //执行重载
            table.reload('tablelist', option);
        });
    })
</script>
{/block}