crm/app/sys/view/statistics/clue_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;
    }

    .mb0 {
        margin-bottom: 0px;
    }

    .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;
    }

    .flex-row,
    .row {
        display: flex;
    }

    .align-center {
        align-items: center;
    }

    .ml10 {
        margin-left: 10px;
    }

    .mt10 {
        margin-top: 10px;
    }

    .padding-tlr {
        padding: 15px 15px 0px;
    }

    .layui-input-block {
        margin-left: 0px;
    }

    .justify-between {
        justify-content: space-between;
    }

    table tr td a {
        color: #249EFB;
    }
	.selectDateBox {
	    position: absolute;
	    width: 330px;
	    height: 100px;
	    box-shadow: 0 2px 4px rgb(0 0 0 / 12%);
	    background-color: #fff;
	    z-index: 99999 !important;
	    top: 45px;
	    box-sizing: border-box;
	    padding: 5px 8px;
	}
	.selecstDateBox {
	    position: absolute;
	    width: 330px;
	    height: 100px;
	    box-shadow: 0 2px 4px rgb(0 0 0 / 12%);
	    background-color: #fff;
	    z-index: 99999 !important;
	    top: 45px;
	    right: 0;
	    box-sizing: border-box;
	    padding: 5px 8px;
	}
	.date-flex,.date-flex1 {
	    display: flex;
	    align-items: center;
	}
	
	.date-box {
	    padding: 15px 0px 10px;
	}
	#rangeDepart {
	    width: 260px;
	    height: 38px;
	}
	xm-select > .xm-body {
	    z-index: 99999 !important;
	}
</style>
{/block}
{block name="body"}
<div class="layui-fluid" style="background-color: #fff;">
    <div class="layui-card">
        <div class="search-form layui-form padding-tlr">
            <div class="flex-row align-center justify-between">
                <div class="flex-row align-center">
                    {if $Request.get.type == 2}
                    <div class="layui-inline" style="float: left;">
                        <div class="goback">
                            <a href="{:url('statistics/clue')}" style="color:#269efb;margin-right: 10px;">
                                <i class="layui-icon layui-icon-return"></i>
                                <span>返回</span>
                            </a>
                        </div>
                    </div>
                    {/if}
                   <!-- <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" autocomplete="off" 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" autocomplete="off" name="end_date" placeholder="选择结束日期">
                    </div> -->
					
					 <div class="layui-input-inline layui-form mdt10" style="display:inline-block">
					   <!-- <select name="org_id" class="type_id" id="org_id" lay-search>
					        <option value="">请选择部门</option>
					        {volist name="org" id="i"}
					        <option value="{$i.id}">{$i.name}</option>
					        {/volist}
					    </select> -->
						<div id="rangeDepart"></div>
					</div>
					
					<div class="layui-input-inline layui-form ml10"  style="display:inline-block;width:200px">
					    <!-- <label class="layui-form-label" style="width: 60px;">跟进时间</label> -->
					    <div class="layui-input-inline select-date relative"> 
					        <!-- 注意：这一层元素并不是必须的 -->
					        <input type="text" class="layui-input" id="sDate" name="start_date" placeholder="开始日期 - 结束日期"
					            autocomplete="off">
					        <div data-type="" class="selecstDateBox layui-hide">
					            <div data-type="" class="date-flex1">
					                <div data-type="today" class="layui-btn layui-btn-primary layui-border-blue layui-btn-xs">今日
					                </div>
					                <div data-type="yesterday" class="layui-btn layui-btn-primary layui-border-blue layui-btn-xs">昨日</div>
					                <div data-type="week" class="layui-btn layui-btn-primary layui-border-blue layui-btn-xs">本周
					                </div>
					                <div data-type="lastWeek" class="layui-btn layui-btn-primary layui-border-blue layui-btn-xs">上周</div>
					                <div data-type="month" class="layui-btn layui-btn-primary layui-border-blue layui-btn-xs">本月
					                </div>
					                <div data-type="lastMonth" class="layui-btn layui-btn-primary layui-border-blue layui-btn-xs">上月</div>
					                <div data-type="all" class="layui-btn layui-btn-primary layui-border-blue layui-btn-xs">
					                    累计</div>
					            </div>
					            <div data-type="" class="date-box">
					                <input data-type="" type="text" id="select_sDate" placeholder="选择开始时间 - 结束时间" readonly autocomplete="off"
					                    class="layui-input">
					            </div>
					        </div>
					    </div>
					</div>
					
					
					
                    
                </div>
                <div>
                    <button type="button" class="layui-btn sBtn ml10 submitbtn" lay-submit lay-filter="table-search">筛选</button>
                </div>
            </div>
        </div>
        <div class="layui-card-body">
            <table lay-filter="datalist" id="list"></table>
        </div>
    </div>
</div>
{/block}
{block name="js"}
<script src="__STATIC__/layui/layui/lay/modules/xm-select.js" type="text/javascript" charset="utf-8"></script>
<script>
    layui.use(['table', 'form', 'laydate', 'element'], function () {
        let table = layui.table,
            laydate = layui.laydate,
            form = layui.form,
            element = layui.element,
            $ = layui.$;
        $('body').attr('layadmin-themealias', 'default');
        var bodyH = $('.body-h').height() * 0.82;
        var istypes=0;
		document.onkeydown=function(event){
			var e = event || window.event || arguments.callee.caller.arguments[0];
			if(e && e.keyCode==13){ 
				$(".submitbtn").trigger("click");
			}
		};
        //执行一个laydate实例
        // laydate.render({
        //     elem: '#sDate' //指定元素
        // });
        // laydate.render({
        //     elem: '#eDate' //指定元素
        // });
		
		
		
		$('#addWechatTime').click(function () {
		    $('.selectDateBox').toggleClass('layui-hide');
		    $('.selecstDateBox').addClass('layui-hide');
		})
		$('#sDate').click(function () {
		    $('.selecstDateBox').toggleClass('layui-hide');
		    $('.selectDateBox').addClass('layui-hide');
		})
		laydate.render({
		    elem: '#select_date'
		    , type: 'date'
		    , range: true
		    , format: 'yyyy/MM/dd'
		    , trigger: 'click',//呼出事件改成click
		    done: function (value, date, endDate) {
		        $('.selectDateBox').addClass('layui-hide');
		        $('#addWechatTime').val(value);
		    }
		});
		laydate.render({
		    elem: '#select_sDate' //指定元素
		    , type: 'date'
		    , format: 'yyyy/MM/dd'
		    , range: true
		    , trigger: 'click',//呼出事件改成click
		    done: function (value, date, endDate) {
		        $('.selecstDateBox').addClass('layui-hide');
		        $('#sDate').val(value);
		    }
		});
		var dateObj = {};
		setDate();
		function setDate() {
		    let date = new Date();
		    let year = date.getFullYear();
		    let month = date.getMonth() + 1;
		    let day = date.getDate();
		    let lastDate = new Date(new Date().getTime() - (1 * 24 * 60 * 60 * 1000));
		    let lastYear = lastDate.getFullYear();
		    let lastMonth = lastDate.getMonth() + 1;
		    let lastDay = lastDate.getDate();
		
		    let weekObj = getMondayAndSunday();
		    let monthObj = getMonthFirstDayAndLastDay();
		    dateObj = {
		        today: `${year}/${month}/${day}`,
		        yesterday: `${lastYear}/${lastMonth}/${lastDay}`,
		        ...weekObj,
		        ...monthObj
		    }
		}
		
		
		
		var departTree = xmSelect.render({
		    el: "#rangeDepart",
		    name: 'org_id',
			autoRow: true,
			filterable: true,
		    tips: '请选择',
		    radio: true,
		    tree: {
				show: true,
				showFolderIcon: true,
				showLine: true,
				indent: 20,
				expandedKeys: [ -3 ],
		        //是否严格遵守父子模式
		        strict: false,
		    },
		    height: "200px",
		    data: [], 
		    //文本显示模式
		    //处理方式
		});
		
		$.ajax({
		    url: '{:url("statistics/get_person")}',
		    type: "post",
		    data: {},
		    success: function(res) {
		        departTree.update({data:res})
		    }
		})
		
		
		$('.date-flex div').click(function () {
		    let type = $(this).prop('dataset').type;
		    if (type == 'today') {
		        $('#select_date').val(`${dateObj.today} - ${dateObj.today}`);
		        $('#addWechatTime').val(`${dateObj.today} - ${dateObj.today}`);
		    } else if (type == 'yesterday') {
		        $('#select_date').val(`${dateObj.yesterday} - ${dateObj.yesterday}`);
		        $('#addWechatTime').val(`${dateObj.yesterday} - ${dateObj.yesterday}`);
		    } else if (type == 'week') {
		        $('#select_date').val(`${dateObj.thisWeekMonday} - ${dateObj.thisWeekSunday}`);
		        $('#addWechatTime').val(`${dateObj.thisWeekMonday} - ${dateObj.thisWeekSunday}`);
		    } else if (type == 'lastWeek') {
		        $('#select_date').val(`${dateObj.lastWeekMonday} - ${dateObj.lastWeekSunday}`);
		        $('#addWechatTime').val(`${dateObj.lastWeekMonday} - ${dateObj.lastWeekSunday}`);
		    } else if (type == 'month') {
		        $('#select_date').val(`${dateObj.thisMonthFirstDay} - ${dateObj.thisMonthLastDay}`);
		        $('#addWechatTime').val(`${dateObj.thisMonthFirstDay} - ${dateObj.thisMonthLastDay}`);
		    } else if (type == 'lastMonth') {
		        $('#select_date').val(`${dateObj.lastMonthFirstDay} - ${dateObj.lastMonthLastDay}`);
		        $('#addWechatTime').val(`${dateObj.lastMonthFirstDay} - ${dateObj.lastMonthLastDay}`);
		    } else {
		        $('#select_date').val('');
		        $('#sDate').val('')
		        $('#addWechatTime').val('');
		    }
		    $('.selectDateBox').addClass('layui-hide');
		})
		
		$('.date-flex1 div').click(function () {
		    let type = $(this).prop('dataset').type;
		    if (type == 'today') {
				itmesss = dateToYYYYMMDD(dateObj.today);
				itmesss2 = dateToYYYYMMDD(dateObj.today);
		        $('#select_sDate').val(itmesss+' - '+itmesss2);
		        $('#sDate').val(itmesss+' - '+itmesss2);
		    } else if (type == 'yesterday') {
				itmesss = dateToYYYYMMDD(dateObj.yesterday);
				itmesss2 = dateToYYYYMMDD(dateObj.yesterday);
		        $('#select_sDate').val(itmesss+' - '+itmesss2);
		        $('#sDate').val(itmesss+' - '+itmesss2);
		    } else if (type == 'week') {
		        $('#select_sDate').val(`${dateObj.thisWeekMonday} - ${dateObj.thisWeekSunday}`);
		        $('#sDate').val(`${dateObj.thisWeekMonday} - ${dateObj.thisWeekSunday}`);
		    } else if (type == 'lastWeek') {
		        $('#select_sDate').val(`${dateObj.lastWeekMonday} - ${dateObj.lastWeekSunday}`);
		        $('#sDate').val(`${dateObj.lastWeekMonday} - ${dateObj.lastWeekSunday}`);
		    } else if (type == 'month') {
		        $('#select_sDate').val(`${dateObj.thisMonthFirstDay} - ${dateObj.thisMonthLastDay}`);
		        $('#sDate').val(`${dateObj.thisMonthFirstDay} - ${dateObj.thisMonthLastDay}`);
		    } else if (type == 'lastMonth') {
		        $('#select_sDate').val(`${dateObj.lastMonthFirstDay} - ${dateObj.lastMonthLastDay}`);
		        $('#sDate').val(`${dateObj.lastMonthFirstDay} - ${dateObj.lastMonthLastDay}`);
		    } else {
		        $('#select_sDate').val('');
		        $('#sDate').val('');
		    }
		    $('.selecstDateBox').addClass('layui-hide');
		})
		
		function getMondayAndSunday() {
		    var today = new Date();
		
		    //构建当前日期,格式：2022-08-22 00:00:00
		    var year = today.getFullYear(); //本年 
		    var month = today.getMonth() + 1; //本月
		    var day = today.getDate(); //本日
		    var newDate = new Date(year + "/" + month + "/" + day + " 00:00:00"); //年月日拼接
		
		    var nowTime = newDate.getTime(); //当前的时间戳
		    var weekDay = newDate.getDay(); //当前星期 0.1.2.3.4.5.6 【0 = 周日】
		
		    var oneDayTime = 24 * 60 * 60 * 1000; //一天的总ms
		
		    // 当前星期减去天数，如今天为周五，则本周一为周五的时间戳减去4天的时间戳。但周日特殊，周一至周六是周几的到的weekDay就是几，但是周日的到的为0，需特殊处理
		    var thisWeekMondayTime = (1 - weekDay) * oneDayTime + nowTime; //本周一的时间戳
		    if (weekDay == 0) {
		        // weekDay = 0 为周日，此时本周一时间为周日减去6天的时间
		        thisWeekMondayTime = nowTime - 6 * oneDayTime
		    }
		
		    var thisWeekSundayTime = thisWeekMondayTime + 6 * 24 * 60 * 60 * 1000 // 本周日
		
		    var lastWeekMondayTime = thisWeekMondayTime - 7 * oneDayTime // 上周一
		    var lastWeekSundayTime = thisWeekMondayTime - oneDayTime // 上周日
		
		    var res = {
		        thisWeekMonday: dateToYYYYMMDD(thisWeekMondayTime),
		        thisWeekSunday: dateToYYYYMMDD(thisWeekSundayTime),
		        lastWeekMonday: dateToYYYYMMDD(lastWeekMondayTime),
		        lastWeekSunday: dateToYYYYMMDD(lastWeekSundayTime),
		    }
		    return res;
		}
		
		function getMonthFirstDayAndLastDay() {
		    var date = new Date()
		    // 值得注意的是，如果day取值为0，意味着取的是date时间的上一个月的最后一天，简单理解：date当前月的第一天，再减去一天
		    var thisMonthFirstDay = date.setDate(1) // 本月第一天
		    var thisMonthLastDay = new Date(date.getFullYear(), date.getMonth() + 1, 0) // 本月最后一天
		
		    var lastMonthFirstDay = new Date(date.getFullYear(), date.getMonth() - 1, 1) // 上月第一天
		
		    var lastMonthLastDay = date.setDate(0) // 上月最后一天
		    // var day = new Date(date.getFullYear(), date.getMonth(), 0).getDate()
		    // var lastMonthLastDay = new Date(date.getFullYear(), date.getMonth() - 1, day) // 上月最后一天
		    var res = {
		        thisMonthFirstDay: dateToYYYYMMDD(thisMonthFirstDay),
		        thisMonthLastDay: dateToYYYYMMDD(thisMonthLastDay),
		        lastMonthFirstDay: dateToYYYYMMDD(lastMonthFirstDay),
		        lastMonthLastDay: dateToYYYYMMDD(lastMonthLastDay),
		    }
		    return res
		}
		
		function dateToYYYYMMDD(date) {
		    var time = new Date(date);
		    var y = time.getFullYear();
		    var m = (time.getMonth() + 1);
		    m = m > 9 ? m : '0' + m;
		    var d = time.getDate();
		    d = d > 9 ? d : '0' + d;
		
		    return y + "/" + m + "/" + d;
		}

        let cols1 = [[
            { field: 'org_name', title: '部门名称', align: 'center', width: 150, fixed: 'left' },
            { field: 'num', title: '获客量', align: 'center', fixed: 'left' },
            { field: 'valid_num', title: '有效线索建档', align: 'center', fixed: 'left' },
            { field: 'valid_lv', title: '有效率', align: 'center', fixed: 'left' },
            { field: 'invalid_num', title: '无效线索', align: 'center', fixed: 'left' }
        ]];
        let cols2 = [[
            { field: 'name', title: '员工名称', align: 'center', width: 150, 'fixed': 'left' },
            { field: 'org_name', title: '部门', align: 'center', fixed: 'left' },
            { field: 'num', title: '获客量', align: 'center', fixed: 'left' },
            { field: 'valid_num', title: '有效线索建档', align: 'center', fixed: 'left' },
            { field: 'valid_lv', title: '有效率', align: 'center', fixed: 'left' },
            { field: 'invalid_num', title: '无效线索', align: 'center', fixed: 'left' }
        ]];
        let cols = cols1;
        let url = '{:url("statistics/clue")}';
        if (location.search.search('type=2') > 0) {
            cols = cols2;
            url = '{:url("statistics/clue", ["type"=>2, "org_id"=>$Request.get.org_id])}';
            istypes=2;
        }
        table.render({
            elem: '#list'
            , url: url
            , page: true
            , height: bodyH
            , cols: cols
            , 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;
            }
            let option = {
                where: field
                , page: {
                    curr: 1
                }
            };
			

			
			
            if (istypes == 0) {
                option.cols = cols1
            } else if(istypes==2){
                option.cols = cols2
            }

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