crm/app/sys/view/material/case_data_statistics.html

{extend name="public/layout" /} {block name="title"}数据统计{/block} {block name="body"}

<link rel="stylesheet" href="__LAYUI__/common.css" media="all">
<link rel="stylesheet" href="__STATIC__/css/csspc.css">
<link rel="stylesheet" href="__STATIC__/css/font.css">
<style type="text/css">
    html,
    body {
        display: block;
        min-width: 1100px;
        font: 14px Helvetica Neue, Helvetica, PingFang SC, Tahoma, Arial, sans-serif;
        height: 98%;
    }

    #page {
        position: absolute;
        bottom: 0;
        left: 2%;
    }

    .layui-table thead tr,
    .layui-table-header {
        background-color: #D8E6F1 !important;
    }

    .layui-tab {
        padding: 15px;
        height: 100%;
        box-sizing: border-box;
        position: relative;
        overflow: hidden;
    }

    .layui-fluid {
        display: block;
        box-shadow: 0 0 4px 0 #B6CADE;
        border-radius: 5px;
        margin: 15px;
        background-color: #ffffff;
    }

    .layui-form-label {
        width: auto;
    }

    .layui-laydate-range {
        width: 581px;
    }

    .layui-table-page>div {
        display: flex;
        justify-content: flex-start;
    }

    .layui-btn-primary,
    .layui-btn-primary:hover {
        border: 1px solid #249EFB;
        background-color: #fff;
        color: #249EFB;
    }

    .layui-form-item .layui-inline {
        margin-right: 0px;
    }

    .layui-btn-normal,
    .layui-btn-normal:hover {
        border: 1px solid #249EFB;
        background-color: #fff;
        color: #249EFB;
    }

    .layui-btn-danger,
    .layui-btn-danger:hover {
        color: #FF5722;
        border: 1px solid #FF5722;
        background-color: #fff;
    }

    .li_active {
        font-weight: 700;
        background-color: #249EFB;
        color: #fff;
    }

    .relative {
        position: relative;
    }

    .noneClass {
        display: none !important;
    }

    .c_wordlist {
        width: 20px;
        position: absolute;
        top: 43px;
        right: 1px;
        display: flex;
        flex-direction: column;
        z-index: 99999;
        height: auto;
        justify-content: flex-start;
        align-items: center;
        box-sizing: border-box;
        padding: 4px 0px;
        overflow: hidden;
        max-height: 297px;
        -ms-overflow-style: none;
        /* IE 10+ */
        scrollbar-width: none;
        /* Firefox */
        overflow-y: scroll;
        background-color: #f5f5f5;
    }

    .c_wordlist::-webkit-scrollbar {
        display: none;
        /* Chrome Safari */
    }

    .c_wordlist>li {
        width: 20px;
        height: 37px;
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 0px;
        line-height: 37px;
    }

    .s_wordlist {
        width: 20px;
        position: absolute;
        top: 43px;
        right: 1px;
        display: flex;
        flex-direction: column;
        z-index: 99999;
        height: auto;
        justify-content: flex-start;
        align-items: center;
        box-sizing: border-box;
        padding: 4px 0px;
        overflow: hidden;
        max-height: 297px;
        -ms-overflow-style: none;
        /* IE 10+ */
        scrollbar-width: none;
        /* Firefox */
        overflow-y: scroll;
        background-color: #f5f5f5;
    }

    .s_wordlist::-webkit-scrollbar {
        display: none;
        /* Chrome Safari */
    }

    .s_wordlist>li {
        width: 20px;
        height: 37px;
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 0px;
        line-height: 37px;
    }

    /* dd {
        border-bottom: 1px solid #EFEFEF;
    } */

    .layui-anim-upbit {
        -ms-overflow-style: none;
        /* IE 10+ */
        scrollbar-width: none;
        /* Firefox */
        overflow-y: scroll;
        background-color: #fff;
    }

    .layui-anim-upbit::-webkit-scrollbar {
        display: none;
        /* Chrome Safari */
    }

    .layui-form-select dl {
        width: 100% !important;
    }

    .layui-tab {
        width: 98%;
        background-color: #fff;
        margin: 15px auto;
        box-shadow: 0 0 4px 0 #B6CADE;
        border-radius: 5px;
    }

    .layui-tab-title .layui-this {
        color: #249EFB;
    }

    .layui-tab-title .layui-this:after {
        width: 50px;
        height: 4px;
        background-color: #249EFB;
        top: 36px !important;
        left: 50%;
        transform: translateX(-50%);
        border: none;
    }

    .layui-tab-title li {
        margin: 0px 5px;
    }

    .layui-tab-title {
        box-sizing: border-box;
        border-bottom: 1px solid #f5f5f5;
        padding: 0px 5px;
    }

    .li_active {
        font-weight: 700;
        background-color: #249EFB;
        color: #fff;
    }

    .ablock {
        display: inline-block;
        width: 100%;
        height: 100%;
    }

    .ml5 {
        margin-left: 14px !important;
    }

    .flex-row {
        display: flex;
        justify-content: space-around;
        align-items: center;
        background-color: #fff;
        margin: 15px;
        height: 130px;
        box-shadow: 0 0 4px 0 #b6cade;
        border-radius: 5px;
    }

    .flex-item {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .font-weight {
        font-weight: 600;
    }

    .layui-form-select {
        float: left;
        width: 60%;
    }

    .sjtj_dl .sjtj_dl_dd {
        float: right;
        min-width: 270px;
        margin-top: 1px;
        margin-right: 10px;
    }

    .sjtj_dl .sjtj_dl_dd p {
        font-size: 14px;
    }

    .set_times {
        height: 36px;
        border: 1px solid #c7d8e6;
    }

    .table_box thead tr th {
        text-align: center;
        white-space: nowrap;
        /* outline: 1px solid #d4d4d4;
		border:none !important; */
    }

    .table_box tbody tr td {
        text-align: center;
        word-break: keep-all;
        white-space: nowrap;
        /* outline: 1px solid #000000;
		border:none !important; */
    }

    /* ////////////////// */
    html {
        background: none;
        min-width: 1100px;
    }

    .table_box tbody tr td,
    .table_box thead tr th {
        border: 1px solid #c7d8e6;
    }

    .head_t_th_p1 {
        font-size: 16px;
        font-weight: bold;
    }

    .head_t_th_p2 {
        font-size: 14px;
    }

    .borhuise {
        border: 1px solid #d1e5f5;
    }

    .borhuiserleft {
        border-left: 1px solid #d1e5f5;
    }

    .borhuisertop,
    .bodylist_dd_p {
        border-top: 1px solid #d1e5f5;
    }

    /* .body_top{background: #D8D8D8;} */
    .body_top .body_top_dd {
        width: 16.66%;
        float: left;
        color: #475562;
    }

    .list_dd01 {
        width: 190px;
    }

    .list_dd02 {
        width: 96px;
    }

    .list_dd03 {
        width: 126px;
    }

    .list_dd04 {
        width: 160px;
    }

    .body_c .body_c_dd {
        float: left;
        text-align: center;
        font-size: 14px;
        border-left: 1px solid #d1e5f5;
        line-height: 38px;
    }

    .lanse {
        color: #249efb
    }

    .bodylist li {
        line-height: 38px;
    }

    .bodylist li .bodylist_dd {
        border-left: 1px solid #d1e5f5;
        border-top: 1px solid #d1e5f5;
        float: left;
        text-align: center;
        font-size: 14px;
    }

    .bodylist_dd_p {
        line-height: 38px !important;
    }

    .layui-table {
        margin-top: 0;
    }

    .iwidth {
        width: 220px !important;
        display: inline-block;
    }

    .table_tbodys tr td div {
        line-height: 30px;
        padding: 6px 15px;
        border-bottom: 1px solid #e6e6e6;
    }

    .table_tbodys br {
        display: contents;
    }

    .ispddiv {
        padding: 0 !important;
    }

    .tableHeadertr {
        background: #D8E6F1 !important;
    }

    .bodybgsbox {
        margin-right: 16px;
    }

    .bodybgs {
        background: #f1f9ff;
        overflow: hidden;
    }

    .tablebodys {
        overflow-y: auto;
        width: 100%;
        height: 62vh;
    }

    .table_box {
        position: relative;
        border-collapse: collapse;
    }

    .tableHeader {
        position: sticky;
        top: 0;
        background: #d8e6f1;
        z-index: 2;
    }

    #page {
        background: #fff;
        width: 100%;
        padding: 0 15px;
        left: 0 !important;
    }
	#rangeDepart {
	    width: 200px;
	    height: 38px;
	}
	xm-select > .xm-body {
	    z-index: 99999 !important;
	}
</style>


<body>
    <div class="layui-tab">
        <ul class="layui-tab-title">
            <li class=""><a class="ablock" href="{:url('material/caselisting')}">公司上传</a></li>
            <li id="details"><a class="ablock" href="{:url('material/personal_case_list')}">案例审核</a></li>
            <li class="layui-this ml5">数据统计</li>
        </ul>
        <form class="layui-form layui-form-box ds" id="bodybox">
            <dl class="sjtj_dl mdt20">
                <dd style="float: left;">
                    <button type="button" class="layui-btn layuiadmin-btn-list" id="export">
                        导出
                    </button>
                </dd>
                <dd class="sjtj_dl_dd mdr20" style="width: 144px;min-width: 144px;margin-top:0;">
                    <button class="layui-btn layuiadmin-btn-list submitbtn" id="searchbox" type="button">
                        搜索
                    </button>
                    <button class="layui-btn layuiadmin-btn-list" type="button" id="resetbtn">
                        重置
                    </button>
                </dd>
                <dd class="sjtj_dl_dd" style="min-width:312px;">
                    <p class="ids lh38">时间范围：</p>
                    <input type="text" style="border:1px solid #e6e6e6;height:36px;" class=" iwidth layui-input"
                        name="time" id="time_date" required lay-verify="required" placeholder="开始时间 - 结束时间"
                        autocomplete="off">
                </dd>
                <dd class="sjtj_dl_dd width15_">
                    <p class="wleft lh38">选择部门：</p>
                    <!-- <select name="buildingname" id="building" lay-filter="org_select" lay-search>
                        <option value="">请选择部门</option>
                        {volist name="org" id="vo"}
                        <option value="{$vo.id}">{$vo.name}</option>
                        {/volist}
                    </select> -->
					<div id="rangeDepart" class="wleft"></div>
                </dd>
            </dl>
            <div class="clear"></div>
            <div class="bodybgsbox">
                <div class="mdt30 borhuise borl0 bodybgs">
                    <dl class="woverflow body_top pdtb20 borhuiserleft">
                        <dd class="textc body_top_dd">
                            <p class="font16 textb bodyTops01"></p>
                            <p class="font14">案例总数</p>
                        </dd>
                        <dd class="textc body_top_dd">
                            <p class="font16 textb bodyTops02"></p>
                            <p class="font14">转发人数</p>
                        </dd>
                        <dd class="textc body_top_dd">
                            <p class="font16 textb bodyTops03"></p>
                            <p class="font14">转发次数</p>
                        </dd>
                        <dd class="textc body_top_dd">
                            <p class="font16 textb bodyTops04"></p>
                            <p class="font14">浏览人数</p>
                        </dd>
                        <dd class="textc body_top_dd">
                            <p class="font16 textb bodyTops05"></p>
                            <p class="font14">浏览时长(s)</p>
                        </dd>
                        <dd class="textc body_top_dd">
                            <p class="font16 textb bodyTops06"></p>
                            <p class="font14">获得线索</p>
                        </dd>
                    </dl </div>
                </div>

                <div class="tablebodys">
                    <table lay-filter="tabletotalbox" class="layui-table table_box">
                        <thead class="tableHeader">
                            <tr class="tableHeadertr">
                                <th lay-data="" colspan="1">部门名称</th>
                                <th lay-data="" colspan="1">转发次数</th>
                                <th lay-data="" colspan="1">浏览人数</th>
                                <th lay-data="" colspan="1">获得线索</th>
                                <th lay-data="" colspan="1">浏览时长</th>
                                <th lay-data="" colspan="1">转发人数</th>
                                <th lay-data="" colspan="1">未转发人数</th>
                            </tr>
                        </thead>
                        <tbody class="table_tbodys">

                        </tbody>
                    </table>
                </div>
                <div id="page"></div>
            </div>
        </form>
    </div>
</body>
<script type="text/javascript" src="__STATIC__/js/jquery.min.js"></script>
<script type="text/javascript" src="__STATIC__/js/FileSaver.min.js"></script>
<script type="text/javascript" src="__STATIC__/js/tableExport.min.js"></script>
<script src="__STATIC__/layui/layui/lay/modules/xm-select.js" type="text/javascript" charset="utf-8"></script>
{/block} {block name="js"}
<script>
    layui.config({
        base: '__LAYUI__/',
        urlbase: '/sys'
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'form', 'table', 'laydate', 'laypage'], function () {
        var $ = layui.$,
            form = layui.form,
            laydate = layui.laydate,
            table = layui.table,
            laypage = layui.laypage,
            scrollTopNum = 0;

        //分页
        var pagePre = 1;//当前页
        var limit = 10;//每页默认条数
        var where = {};
        where.page = pagePre;
        where.limit = limit;

		
		var departTree = xmSelect.render({
		    el: "#rangeDepart",
		    name: 'org',
			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})
		     }
		 })


        //日期范围
        laydate.render({
            elem: '#time_date'
            , type: 'date'
            , range: true
            , trigger: 'click'//呼出事件改成click
        });
		
		document.onkeydown=function(event){
			var e = event || window.event || arguments.callee.caller.arguments[0];
			if(e && e.keyCode==13){ 
				$(".submitbtn").trigger("click");
			}
		};

        var action = {
            list: function (where) {
                $.ajax({
                    url: '{:url("material/case_data_statistics_list")}',
                    type: 'post',
                    dataType: 'json',
                    data: where,
                    success: function (res) {
                        var htmlstr = '';
                        $('.table_tbodys').html(htmlstr);
                        if (res.code == 0) {
                            for (let j = 0; j < res.data.length; j++) {
                                htmlstr += `<tr>
                                    <td lay-data="" rowspan="1"><a style="color: #0066CC;" href="{:url('material/case_datastatistics_org')}?org_id=${res.data[j].id}">${res.data[j].org_name}</a></td>
                                    <td lay-data="" rowspan="1">${res.data[j].share_count}</td>
                                    <td lay-data="" rowspan="1">${res.data[j].views}</td>
                                    <td lay-data="" rowspan="1">${res.data[j].clue}</td>
                                    <td lay-data="" rowspan="1">${res.data[j].visit_due_time}</td>
                                    <td lay-data="" rowspan="1">${res.data[j].share_group_count}</td>
                                    <td lay-data="" rowspan="1">${res.data[j].no_share_count}</td>
                                    </tr>`;
                            }
                            $('.table_tbodys').html(htmlstr);
                            action.page(where, res.count);

                            //top_data
                            $('.bodyTops01').html(res.top_data.case_count);
                            $('.bodyTops02').html(res.top_data.share_group_count);
                            $('.bodyTops03').html(res.top_data.share_count);
                            $('.bodyTops04').html(res.top_data.views);
                            $('.bodyTops05').html(res.top_data.times);
                            $('.bodyTops06').html(res.top_data.clue);
                        }
                    }
                });
            },
            page: function pages(where, count) {
                laypage.render({
                    elem: 'page'
                    , count: count
                    , curr: where.page
                    , limit: where.limit
                    , prev: '<i class="layui-icon layui-icon-left"></i>'
                    , next: '<i class="layui-icon layui-icon-right"></i>'
                    , layout: ['prev', 'page', 'next', 'skip', 'count', 'limit']
                    , jump: function (obj, first) {
                        limit = obj.limit
                        where.page = obj.curr
                        where.limit = obj.limit
                        if (!first) {
                            console.log(where)
                            action.list(where);
                        }
                    }
                });
            }
        };

        action.list(where);

        //搜索
        $('#searchbox').click(function () {
            where.page = 1;
            where.org_id = departTree.getValue('value')[0];
            where.date = $('#time_date').val();
            action.list(where);
        })
        //重置
        $('#resetbtn').click(function () {
			departTree.setValue([ ]);
            $('#building').val('');
            $('#time_date').val('');
            where.org_id = '';
            where.date = $('#time_date').val();
            layui.form.render();
			action.list(where);
        })
        //导出
        $('#export').on('click', function () {
            $('table').tableExport({
                type: 'excel',
                mso: {
                    styles: ['background-color', 'border-top-color', 'border-left-color', 'border-right-color', 'border-bottom-color', 'border-top-width', 'border-left-width', 'border-right-width', 'border-bottom-width', 'border-top-style', 'border-left-style', 'border-right-style', 'border-bottom-style', 'color']
                }
            });
        })

        //监听部门变化
        form.on('select(org_select)', function (data) {
            where.page = 1;
            where.org_id = $('#building').val();
            where.date = $('#time_date').val();
            action.list(where);
        })
    });
</script>
{/block}