crm/app/sys/view/activity/ranking.html

{extend name="public/layout" /} {block name="title"}分类管理{/block} {block name="body"}
<script src="/static/js/jquery.min.js"></script>
<script src="/static/js/echarts.min.js"></script>
<style type="text/css">
    html,
    body {
        display: block;
        width: 100%;
        background-color: #fff;
    }

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

    .layui-fluid {
        display: block;
        border-radius: 5px;
        background-color: #ffffff;
        height: auto;
        padding: 15px 30px;
    }

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


    #data_statistics {
        /*background: red;*/
        width: 100%;
        height: 300px;
        float: left;
    }

    .tab_1 {
        width: 10%;
    }

    #echartbox_a {
        display: block;
        width: 40%;
        height: 300px;
        /*background: red;*/
        float: left;
    }

    #data_statistics_b {
        /*background: blue;*/
        width: 48%;
        height: 300px;
        float: left;
    }

    .all {
        width: 100%;
        background: red;

    }

    #echartbox_b {
        display: block;
        width: 80%;
        height: 400px;
        margin: 0 auto;
    }

    #data_statistics_c {
        width: 80%;
        margin: 0 auto;
        overflow: hidden;
    }

    #echartbox_c {
        display: block;
        width: 80%;
        height: 400px;
        margin: 0 auto;
    }

    #data_statistics_d {
        width: 80%;
        margin: 0 auto;
        overflow: hidden;
    }

    #echartbox_d {
        display: block;
        width: 80%;
        height: 400px;
        margin: 0 auto;
    }

    #data_statistics_e {
        width: 80%;
        margin: 0 auto;
        overflow: hidden;
    }

    .layui_fluid1 {
        display: none;
    }

    .layui-nav-tabs-ul {
        margin-bottom: 10px;
    }

    .layui-nav-tab_li {
        float: left;
        width: 15%;
        text-align: center;
        cursor: pointer;
        line-height: 38px;
        height: 38px;
    }

    .add-layui-nav-li {
        background-color: #249efb;
        color: #fff;
        white-space: nowrap;
        text-align: center;
        font-size: 14px;
        border-radius: 2px;
    }

    .layui-tab-brief>.layui-tab-more li.layui-this:after,
    .layui-tab-brief>.layui-tab-title .layui-this:after {
        border-bottom: 2px solid #249efb !important;
    }



    /*//*/
    .layui_fluid1 {
        display: none;
    }

    .layui-nav-tabs-ul {
        margin-bottom: 10px;
        padding-bottom: 0;
        border-bottom: 1px solid #e6e6e6;
        overflow: hidden;
    }

    .layui-nav-tab_li {
        float: left;
        width: 10%;
        text-align: center;
        cursor: pointer;
        line-height: 38px;
        height: 38px;
        position: relative;
    }

    .add-layui-nav-li {
        color: #f3f3f3;
        ;
        white-space: nowrap;
        text-align: center;
        font-size: 14px;
        border-radius: 2px;
    }

    .layui-bor-b {
        position: absolute;
        bottom: 0;
        width: 65px;
        left: 50%;
        transform: translateX(-50%);
        height: 1px;
        background: #249efb;
    }

    .layui-tab-brief>.layui-tab-more li.layui-this:after,
    .layui-tab-brief>.layui-tab-title .layui-this:after {
        border-bottom: 2px solid #249efb !important;
    }

    .layui-bor-b {
        display: none;
    }

    .add-layui-nav-li .layui-bor-b {
        display: block !important;
    }

    .layui-title-b {
        font-size: 20px;
        font-weight: bold;
    }

    .layui-li-box {
        padding-bottom: 30px;
        border-bottom: 1px solid #e6e6e6;
    }

    .woverflow {
        overflow: hidden;
    }

    .layui-bolu {
        color: #249efb
    }

    .layui-data-ul {
        width: 70%;
    }

    .layui-data-ul li {
        float: left;
        width: 33.33%;
        line-height: 40px;
    }

    .mdt70 {
        margin-top: 70px;
    }

    .width33_33 {
        width: 33.33%;
    }

    .wleft {
        float: left;
    }

    .mdt40 {
        margin-top: 40px;
    }

    .width80_ {
        width: 80%;
    }

    .wauto {
        margin: 0 auto;
    }

    .layui-data-ul-b {
        height: 126px;
        overflow-y: auto;
    }

    .layui-data-ul-b li {
        float: left;
        width: 33.33%;
        line-height: 30px;
    }

    .layui_box_con {
        display: none;
        height: 100%;
    }

    .layadmin-iframe-if {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 56px;
        left: 0;
    }

    .layui-p-bt {
        font-weight: bold;
    }

    .layui_bm {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 70%;
    }

    .layui-data-ul-b li span {
        display: block;
        float: left;
    }



    /*热词搜索*/
    /*	.layui-form-item .layui-inline {
		display: block;
		float: left;
		width: 145px;
		height: 38px;
		line-height: 38px;
		background: #FFFFFF;
		margin-right: 16px;
	}
	
	.layui-form-item .layui-input-inline {
		width: 145px;
		height: 38px;
		line-height: 38px;
		margin-bottom: 0;
	}*/

    /*	.layui-form-item .layui-input-inline .layui-input {
		border: 1px solid #9DB6CF;
		border-radius: 5px;
	}*/

    .layui-form-select dl dd.layui-this {
        background-color: #249EFB;
    }

    .layui-form-item div.searchBox {
        width: 320px;
        background: #FFFFFF;
        border: 1px solid #B6CADE;
        /* border-radius: 24px; */
        height: 38px;
        overflow: hidden;
        padding-left: 10px;
        position: relative;
        margin-bottom: 0px;
        /* float: right; */
    }

    .searchBox .inputBox {
        width: 240px;
        /* float: left; */
        height: 36px;
        line-height: 36px;
        border-width: 0;
    }

    /*	.searchBtn {
		position: absolute;
		top: 0;
		right: 0;
		width: 51px;
		height: 38px;
		background-color: #fff;
	}*/

    .searchBtn img {
        position: absolute;
        width: 26px;
        top: 6px;
        left: 0;
    }

    .layui-btn.layui-btn-success {
        background-color: #009688;
    }

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

    .layui-btn-primary:hover {
        background-color: #E3F7FF;
        color: #249EFB;
    }

    .layui-bor-b {
        height: 3px;
        background-color: #249EFB;
    }

    .add-layui-nav-li {
        background-color: #249EFB !important;
        color: #fff;
    }

    .layui-tab-title .layui-this:after {
        border-bottom: none;
        border: none;
    }

    .layui-nav-tab_li {
        background-color: #F2F2F2;
        margin: 0px 5px;
    }

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

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

    .border {
        border: 1px solid #f2f2f2;
    }

    .mb20 {
        margin-bottom: 20px;
    }

    .layui-card-body {
        padding: 10px 0px 0px;
    }

    .layui-card-header {
        padding: 15px 0px;
    }
</style>

<body>
    <div class="layui-fluid">
        <div class="layui-card-header layuiadmin-card-header-auto border mb20 layui-hide">
            <div style="display:flex;">
                <div style="flex:1;display:flex;justify-content:center;align-items:center;">邀约:{$data.yy}人</div>
                <div style="flex:1;display:flex;justify-content:center;align-items:center;">到场:{$data.dc}人</div>
                <div style="flex:1;display:flex;justify-content:center;align-items:center;">定金:{$data.jd}人</div>
                <div style="flex:1;display:flex;justify-content:center;align-items:center;">合同:{$data.qd}人</div>
            </div>
        </div>
        <ul class="layui-nav-tabs-ul">
            <li class="layui-nav-tab_li add-layui-nav-li" style="margin-left: 0px;">公司排行<span
                    class="layui-bor-b"></span></li>
            <li class="layui-nav-tab_li layui-hide">团队排行<span class="layui-bor-b"></li>
            <li class="layui-nav-tab_li">部门排行<span class="layui-bor-b"></li>
        </ul>
        <div class="">
            <div class="layui-form layui-card-header layuiadmin-card-header-auto">
                <div class="layui-form-item">
                    <div style="float:right;" id="hide-search">
                        <div class="layui-inline">
                            <!--                         <label class="layui-form-label">关键词</label>
                        <div class="layui-input-inline">
                            <input type="text" id="keyword" name="keyword" placeholder="请输入话术关键词" autocomplete="off" class="layui-input keyword">
                        </div> -->
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">部门</label>
                            <div class="layui-input-inline">
                                <select name="type" lay-filter="type" id="typeasdasdas">
                                    <option value="">请选择部门</option>
                                    {volist name="org" id="i"}
                                    <option value="{$i.id}">{$i.name}</option>
                                    {/volist}

                                </select>
                            </div>
                        </div>
                        <div class="layui-inline" style="margin-right:0px;">
                            <button class="layui-btn layuiadmin-btn-useradmin searchBtn" lay-filter="search"
                                id="search_list">
                                <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                            </button>
                        </div>
                    </div>
                    <div class="layui-inline" style="float: left;">
                        <ul>
                            <li class="layui-btn layuiadmin-btn layui-bor-c" id="yaoyue">邀约榜</li>
                            <li class="layui-btn layuiadmin-btn layui-btn-primary layui-bor-c" id="caochang">到场榜</li>
                            <li class="layui-btn layuiadmin-btn layui-btn-primary layui-bor-c" id="交定">定金榜</li>
                            <li class="layui-btn layuiadmin-btn layui-btn-primary layui-bor-c" id="qiandan">合同榜</li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="layui_fluid1" style="display: block;">
                <div class="layui-card">
                    <div class="layui-card-body">
                        <table id="label-table" lay-filter="label-table"></table>
                    </div>
                </div>
            </div>
            <div class="layui_fluid1 layui_box_con">
                asd
            </div>


            <div class="layui_fluid1">
                sdfsd
            </div>
        </div>
    </div>


</body>
{/block} {block name="js"}
<script type="text/html" id="table-evidence-action">
	<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
</script>
<script type="text/html" id="talkill_count">
	<a href="{:url('talkskill/talkskilltable')}?type={{d.id}}" lay-event="talkill_list" style="color: #0066CC"><i class="layui-icon">&#xe633;</i>{{d.talkill_count}}</a>
</script>
<script>
    layui.config({
        base: '__LAYUI__/',
        urlbase: '/sys'
    }).extend({
        index: 'lib/index'
    }).use(['index', 'table', 'element'], function () {
        var $ = layui.$,
            form = layui.form,
            element = layui.element,
            table = layui.table;
        var cate = 0;//0公司排行，1团队排行，2部门排行
        var type = 0;//0邀约，1到场，2交定，3签单
        var org = 0;//部门id
        list();
        $('.layui-nav-tab_li').click(function () {
            var this_s = $(this).index();
            cate = this_s;
            $(this).addClass('add-layui-nav-li').siblings().removeClass('add-layui-nav-li');
            // $('.layui_fluid1').eq(this_s).show().siblings('.layui_fluid1').hide();
            list();
            if (this_s == 0) {
                $('#hide-search').show();
            } else {
                $('#hide-search').hide();
            }
        });
        $('.layui-bor-c').click(function () {
            var this_s = $(this).index();
            type = this_s;
            $('.layui-bor-c').addClass('layui-btn-primary');
            $(this).removeClass('layui-btn-primary');
            list();
        });
        form.on('select(type)', function (data) {
            org = data.value;
        })
        $('#search_list').click(function () {
            list();
        });
        function list() {
            // console.log(cate);
            // console.log(type);
            // console.log(org);
            if (cate != 2) {
                var arr = [
                    [{
                        field: 'name',
                        title: '姓名',
                        // sort: true
                        align: 'center'
                        , with: '25%'
                    }, {
                        field: 'org',
                        title: '部门',
                        // sort: true
                        align: 'center'
                        , with: '25%'
                    }, {
                        field: 'count',
                        title: '数量',
                        // sort: true
                        align: 'center'
                        , with: '25%'
                    }, {
                        field: 'ranking',
                        title: '排名',
                        // sort: true
                        align: 'center'
                        , with: '25%'
                    }]
                ];
            } else {
                var arr = [
                    [{
                        field: 'org',
                        title: '部门',
                        // sort: true
                        align: 'center'
                        , with: '33%'
                    }, {
                        field: 'count',
                        title: '数量',
                        // sort: true
                        align: 'center'
                        , with: '33%'
                    }, {
                        field: 'ranking',
                        title: '排名',
                        // sort: true
                        align: 'center'
                        , with: '33%'
                    }]
                ];
            }
            table.render({
                elem: '#label-table',
                autoSort: false,
                url: "{:url('activity/ranking_list')}?id={$id}" + '&cate=' + cate + '&type=' + type + '&org=' + org,
                cols: arr,
                page: true,
                limit: 30,
                height: 'full-180',
                text: '对不起，加载出现异常！'
            });
        }




	});

</script>
{/block}