crm/app/sys/view/video/statistics_data_list.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: 100%;
		overflow: hidden;
    }
.layui-tab-title .layui-this {
    color: #249EFB;
}
.layui-tab-title .layui-this:after {
		width: 50px;
		height: 4px !important;
		background-color: #249EFB;
		top: 38px !important;
		left: 50%;
		transform: translateX(-50%);
		border: none;
		border:1px solid #249EFB !important;
	}
    .layui-table thead tr,
    .layui-table-header {
        background-color: #D8E6F1 !important;
    }

    .layui-tab {
		margin:0; 
		padding:0 15px;
		height: 100%;
		box-sizing: border-box;
	}
.layui-tabbox{
	padding:15px;
	height: 96%;
	box-sizing: border-box;
	overflow: hidden;
	box-shadow: 0 0 4px 0 #B6CADE;
	    border-radius: 5px;
	    margin: 15px;
		background: #fff;
}
    .layui-fluid {
        display: block;
        box-shadow: 0 0 4px 0 #B6CADE;
        border-radius: 5px;
        /* margin: 15px; */
        background-color: #ffffff;
    }
	.layui-card{box-shadow: 0 !important;}
    .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-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;
        
	}

	.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 !important;}
	.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:calc(62vh - 60px);}
	.table_box{position: relative;border-collapse: collapse; }
	.tableHeader{position:sticky;top:0;background: #d8e6f1;z-index:2;}
	#page{background: #fff;width:100%;left:0 !important;bottom: 0;position:absolute;padding:0 15px;box-sizing: border-box;}
	#rangeDepart {
	    width: 200px;
	    height: 38px;
	}
	xm-select > .xm-body {
	    z-index: 99999 !important;
	}
</style>


<body>
	
	<div class="layui-tabbox layui-tab-brief height100_">
		<ul class="layui-tab-title rst_box_top">
			<li data-index="1" class="font16 layui_video_list"><a href="{:url('video/index')}">视频列表</a></li>
			<li data-index="2" class="font16 layui_video_tjss layui-this"><a href="{:url('video/statistics_data_list')}">数据统计</a></li>
		</ul>
		<div class="layui-tab-content pd0" style="padding: 0;height: 93%;">
			<div class="layui-tab-item layui-show" style="height: 100%;">
				<div class="layui-tab" style="position: relative;">
				    <form class="layui-form layui-form-box ds" id="bodybox" style="height:100%;">
				        <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="orgname" id="org" lay-filter="org_type" lay-search>
				                    <option value="">请选择部门</option>
				                    {volist name="orglist" 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" id="hzcont">
				                </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>
				    </form>
					
					
				</div>
			</div>
		</div>
	</div>
    
</body>
{/block} {block name="js"}
<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/layui.js"></script>
<script src="__STATIC__/layui/layui/lay/modules/xm-select.js" type="text/javascript" charset="utf-8"></script>
<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
		});
        $('#searchbox').click(function () {
            where.org_id= departTree.getValue('value')[0];
            where.time= $('#time_date').val();
			action.list(where);
		})
        $('#resetbtn').click(function(){
			departTree.setValue([ ]);
			$("#bodybox")[0].reset();
			layui.form.render();
            where.org_id= null;
            where.time= null;
			action.list(where);
		})
		
		document.onkeydown=function(event){
			var e = event || window.event || arguments.callee.caller.arguments[0];
			if(e && e.keyCode==13){ 
				$(".submitbtn").trigger("click");
			}
		};
		
		//监听部门变化
		form.on('select(org_type)', function (data) {
			where.org_id = parseInt(data.value);
		    action.list(where);
		})

        var action = {
            list: function (where) {
                $.ajax({
                    url: '{:url("video/statistics_data_list")}',
                    type: 'post',
                    dataType: 'json',
                    data: where,
                    success: function(res) {
                        var htmlstr = '';
                        var hzhtml = '';
                        $('.table_tbodys').html(htmlstr);
                        if (res.code == 0) {
                            for(let j = 0; j < res.data.list.length; j++){
                                htmlstr+=`<tr>
								<td lay-data="" rowspan="1"><a class="lanse" href="{:url('statistics_emplist')}?org_id=${res.data.list[j].id}">${res.data.list[j].name}</a></td>
                                <td lay-data="" rowspan="1">${res.data.list[j].share_count}</td>
                                <td lay-data="" rowspan="1">${res.data.list[j].footprints_user_count}</td>
                                <td lay-data="" rowspan="1">${res.data.list[j].clue_count}</td>
                                <td lay-data="" rowspan="1">${res.data.list[j].visit_long}</td>
                                <td lay-data="" rowspan="1">${res.data.list[j].share_employee_count}</td>
                                <td lay-data="" rowspan="1">${res.data.list[j].un_share_employee_count}</td>
							    </tr>`;
                            }
                            $('.table_tbodys').html(htmlstr);
                            action.page(where,res.count);
                            hzhtml+=`<dd class="textc body_top_dd">
                            <p class="font16 textb bodyTops01">${res.data.all.video_cont}</p>
                            <p class="font14">视频总数</p>
                            </dd>
                            <dd class="textc body_top_dd">
                                <p class="font16 textb bodyTops02">${res.data.all.share_employee_count}</p>
                                <p class="font14">转发人数</p>
                            </dd>
                            <dd class="textc body_top_dd">
                                <p class="font16 textb bodyTops03">${res.data.all.share_count}</p>
                                <p class="font14">转发次数</p>
                            </dd>
                            <dd class="textc body_top_dd">
                                <p class="font16 textb bodyTops04">${res.data.all.footprints_user_count}</p>
                                <p class="font14">浏览人数</p>
                            </dd>
                            <dd class="textc body_top_dd">
                                <p class="font16 textb bodyTops05">${res.data.all.visit_long}</p>
                                <p class="font14">浏览时长(s)</p>
                            </dd>
                            <dd class="textc body_top_dd">
                                <p class="font16 textb bodyTops06">${res.data.all.clue_count}</p>
                                <p class="font14">获得线索</p>
                            </dd>`;
                            $('#hzcont').html(hzhtml);
                        }
                    }			
                });
            },
            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);
        $('#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']
		    }
		  });
		})	
    });
</script>
{/block}