chenhao
/
crm_


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253
							{include file="public/header" /}
<style>
    .head{
        font-weight: bold;
        color: #00a0e9;
        text-align: center;
    }
    table tr{
        background-color: #ffffff!important;
    }
   .moth table thead tr:nth-child(3) th:first-child{
        background: url("__STATIC__/icon/1.png")no-repeat center center;
        background-size: 30px 40px;
    }
    .moth table thead tr:nth-child(4) th:first-child{
        background: url("__STATIC__/icon/2.png")no-repeat center center;
        background-size: 30px 40px;
    }
    .moth table thead tr:nth-child(5) th:first-child{
        background: url("__STATIC__/icon/3.png")no-repeat center center;
        background-size: 30px 40px;
    }
    table thead tr th{
        text-align: center!important;
        border: none!important;
        padding-top: 15px!important;
        padding-bottom: 15px!important;
    }
    .layui-table td, .layui-table th{
        padding-top: 20px!important;
    }
</style>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat/dist/ecStat.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/dataTool.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/world.js"></script>
<!--<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=xfhhaTThl11qYVrqLZii6w8qE5ggnhrY&__ec_v__=20190126"></script>-->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.min.js"></script>
<body style="display: flex;align-items: flex-start;justify-content: space-around;" >
<div class="moth" style="width: 33%;display: inline-block;" >
    <table class="layui-table"  lay-filter="demo">
        <thead>
        <tr>
            <th lay-data="{field:'username', width:80}" colspan="3" style="text-align: center">
                <font  style="font-weight: bold" size="4px">
                    <strong>月度新建客户排行</strong>
                </font>
                <div  id="test1" style="vertical-align: middle; display: inline-block;font-size: 16px;margin-left: 19px"></div>
            </th>
        </tr>
        <tr >
            <th lay-data="{field:'username', width:80}" ><span class="head">排名</span></th>
            <th lay-data="{field:'sex', width:80, sort: true}"><span class="head">业务员</span></th>
            <th lay-data="{field:'sex', width:80, sort: true}" ><span class="head">新建客户数</span></th>
        </tr>
        {foreach name ="new_customer" item="vo"}
        <tr>
            <th lay-data="{field:'username', width:80}">{$key + 1}</th>
            <th lay-data="{field:'sex', width:80, sort: true}">{$vo.nickname}</th>
            <th lay-data="{field:'sex', width:80, sort: true}">{$vo.num}</th>
        </tr>
        {/foreach}
        <tr >
            <th colspan="3" lay-data="{field:'username', width:80}">
                <span style="font-weight: bold;color: #00a0e9">我</span>
                <span style="font-weight: bold;color: #00a0e9;margin-left: 18%">新建客户数{$new_customer_num}</span>
            </th>
        </tr>
        </thead>

    </table>
</div>
<div class="moth" style="width: 32%;display: inline-block;">
    <table class="layui-table"  style="background-color: #ffffff!important;" lay-filter="demo" >
        <thead>
        <tr>
            <th lay-data="{field:'username', width:80}" colspan="3" style="text-align: center">
                <font  style="font-weight: bold" size="4px">
                    <strong>月度有效回复客户排行</strong>
                </font>
                <div  id="test2" style="vertical-align: middle; display: inline-block;font-size: 16px;margin-left: 19px"></div>
            </th>
        </tr>
        <tr>
            <th lay-data="{field:'username', width:80}" style="font-weight: bold;color: #00a0e9">排名</th>
            <th lay-data="{field:'sex', width:80, sort: true}" style="font-weight: bold;color: #00a0e9">业务员</th>
            <th lay-data="{field:'sex', width:80, sort: true}" style="font-weight: bold;color: #00a0e9">有效回复数</th>
        </tr>
         {foreach name='yes_customer' item="vo"}
        <tr class="moth_a">
            <th lay-data="{field:'username', width:80}">{$key +1 }</th>
            <th lay-data="{field:'sex', width:80, sort: true}">{$vo.nickname}</th>
            <th lay-data="{field:'sex', width:80, sort: true}">{$vo.num}</th>
        </tr>
        {/foreach}
        <tr >
            <th colspan="3" lay-data="{field:'username', width:80}">
                <span style="font-weight: bold;color: #00a0e9">我</span>
                <span style="font-weight: bold;color: #00a0e9;margin-left: 36%">有效回复客户数{$yes_customer_num}</span>
            </th>
        </tr>
        </thead>
    </table>
</div>
<div style="width: 33%">
    <div  style="height: 40%;width: 100%;">
        <table class="layui-table"  lay-filter="demo">
            <thead>
            <tr>
                <th lay-data="{field:'username', width:80}"><strong>我的数据</strong>
                    <br />
                    年度新建客户数
                </th>
            </tr>
            <tr>
                <th lay-data="{field:'username', width:80}" style="height: 300px">
                    <div id="container" style="height: 100%"></div>
                </th>
            </tr>
            <tr>

            </tr>
            </thead>
        </table>
    </div>

    <div style="height: 40%;width: 100%;">
        <table class="layui-table"  lay-filter="demo" >
            <thead>
            <tr >
                <th colspan="2" lay-data="{field:'username', width:80}"><strong>客户统计</strong>
            </tr>
            <tr>
                <th lay-data="{field:'username', width:80}" style="font-weight: bold;text-align: center;color: #00a0e9">类别</th>
                <th lay-data="{field:'username', width:80}" style="font-weight: bold;text-align: center;color: #00a0e9">数量</th>
            <tr>
            <tr>
                <th lay-data="{field:'username', width:80}" style="font-weight: bold;text-align: center">总客户数</th>
                <th lay-data="{field:'username', width:80}" style="text-align: center;font-weight: bold">{$num.zong}</th>
            </tr>
            <tr>
                <th lay-data="{field:'username', width:80}" style="font-weight: bold;text-align: center">未建交</th>
                <th lay-data="{field:'username', width:80}" style="font-weight: bold;text-align: center;">{$num.new_num}</th>

            </tr>
            <tr>
                <th lay-data="{field:'username', width:80}" style="font-weight: bold;text-align: center">有效回复</th>
                <th lay-data="{field:'username', width:80}" style="font-weight: bold;text-align: center;">{$num.reply_num}</th>
            </tr>
            <tr>
                <th lay-data="{field:'username', width:80}" style="font-weight: bold;text-align: center">已成交</th>
                <th lay-data="{field:'username', width:80}" style="font-weight: bold;text-align: center;">{$num.yes_num}</th>
            </tr>
            <tr>
                <th lay-data="{field:'username', width:80}" style="font-weight: bold;text-align: center">关联</th>
                <th lay-data="{field:'username', width:80}" style="font-weight: bold;text-align: center;">{$num.guanlian_num}</th>
            </tr>
            <tr>
                <th lay-data="{field:'username', width:80}" style="font-weight: bold;text-align: center">未建交已被领取</th>
                <th lay-data="{field:'username', width:80}" style="font-weight: bold;text-align: center;">{$num.lingzou_count}</th>
            </tr>
            </tr>
            </thead>
           <input type="hidden" id = "new_value" value="{$new_value}">
           <input type="hidden" id = "reply_value" value="{$reply_value}">
        </table>
    </div>
</div>

{include file="public/footer" /}
</body>
<script>
    $(document).ready(function(){
        $('.moth table thead tr:nth-child(5) th:first-child').html(' ');
        $('.moth table thead tr:nth-child(4) th:first-child').html(' ');
        $('.moth table thead tr:nth-child(3) th:first-child').html(' ');
    });

    //年月选择器
    layui.use('laydate', function(){
        var laydate = layui.laydate;
        var new_value = $("#new_value").val();
        var reply_value = $("#reply_value").val();
        laydate.render({
            elem: '#test1'
            ,type: 'month'
            ,value: new_value
            ,max: 7 //7天后
            ,trigger: 'click' //采用click弹出
            ,btns: ['now', 'confirm']
            ,theme: '#00a0e9'
            ,done: function(value, date, endDate){
                console.log(value); //得到日期生成的值，如：2017-08-18
                // console.log(date); //得到日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
                // console.log(endDate); //得结束的日期时间对象，开启范围选择（range: true）才会返回。对象成员同上。
                var test2 = $("#test2").text();
                window.location.href="{:url('indexPage')}?time="+value+"&reply_value="+test2;
            }

        });
        //年月选择器
        laydate.render({
            elem: '#test2'
            ,type: 'month'
            ,value: reply_value
            ,max: 7 //7天后
            ,btns: ['now', 'confirm']
            ,theme: '#00a0e9'
            ,done: function(value, date, endDate){
                console.log(value); //得到日期生成的值，如：2017-08-18
                // console.log(date); //得到日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
                // console.log(endDate); //得结束的日期时间对象，开启范围选择（range: true）才会返回。对象成员同上。
                var test1 = $("#test1").text();
                window.location.href="{:url('indexPage')}?time_2="+value+"&new_value="+test1;
            }
        });
    });
</script>
<script type="text/javascript">
    var month = '<?php echo json_encode($month);?>';
    month = JSON.parse(month);
    var month_num = '<?php echo json_encode($month_num);?>';
    month_num = JSON.parse(month_num);
    var dom = document.getElementById("container");
    var myChart = echarts.init(dom);
    var app = {};
    option = null;
    option = {
        title:{

            text:'数量'

        },
        xAxis: {
            type: 'category',
            data: month,
        },
        yAxis: {
            type:'value',
        },
        series: [{
            data: month_num,
            type: 'line',
            color:"#00a0e9"
        }]
    };
    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }
</script>
</html>