jucai/resources/views/admin/home/index.blade.php

<!--数量统计-->
<meta name="csrf-token" content="{{ csrf_token() }}">
<div class="row">
    <div class="col-lg-3 col-sm-6 col-xs-12">
        <div class="white-box shadow">
            <p class="box-title com-icon">企业会员</p>
            <p class="text-center lg-text"><a href="{{admin_base_path('/firm/company')}}"><span class="font-orange">{{ $company->getCompanyCount or 0 }}</span></a></p>
            <ul class="list-inline two-part">
                <li class="sm-text">上月增加：<span class="font-orange">{{ $company->getLastCompanyCount or 0 }}</span></li>
                <li class="sm-text">本月增加：<span class="font-orange">{{ $company->getNextCompanyCount or 0 }}</span></li>
            </ul>
        </div>
    </div>
    <div class="col-lg-3 col-sm-6 col-xs-12">
        <div class="white-box shadow">
            <p class="box-title per-icon">个人会员</p>
            <p class="text-center lg-text"><a href="{{admin_base_path('/personal/members')}}"><span class="font-red">{{ $person->getPersonCount or 0 }}</span></a></p>
            <ul class="list-inline two-part">
                <li class="sm-text">上月增加：<span class="font-red">{{ $person->getLastPersonCount or 0 }}</span></li>
                <li class="sm-text">本月增加：<span class="font-red">{{ $person->getNextPersonCount or 0 }}</span></li>
            </ul>
        </div>
    </div>
    <div class="col-lg-3 col-sm-6 col-xs-12">
        <div class="white-box shadow">
            <p class="box-title job-icon">招聘岗位数</p>
            <p class="text-center lg-text"><a href="{{admin_base_path('/firm/jobs')}}"><span class="font-green">{{ $jobs->getJobCount or 0 }}</span></a></p>
            <ul class="list-inline two-part">
                <li class="sm-text">上月增加：<span class="font-green">{{ $jobs->getLastJobsCount or 0 }}</span></li>
                <li class="sm-text">本月增加：<span class="font-green">{{ $jobs->getNextJobsCount or 0 }}</span></li>
            </ul>
        </div>
    </div>
    <div class="col-lg-3 col-sm-6 col-xs-12">
        <div class="white-box shadow">
            <p class="box-title resume-icon">求职简历数</p>
            <p class="text-center lg-text"><a href="{{admin_base_path('/personal/resume')}}n class="font-blue">{{ $resume->getResumesCount or 0 }}</span></a></p>
            <ul class="list-inline two-part">
                <li class="sm-text">上月增加：<span class="font-blue">{{ $resume->getLastResumeCount or 0 }}</span></li>
                <li class="sm-text">本月增加：<span class="font-blue">{{ $resume->getNextResumeCount or 0 }}</span></li>
            </ul>
        </div>
    </div>
</div>
<!--待办事项-->
<div class="shadow white-box">
    <div class="row ">
        <div class="col-lg-12 col-md-12 col-xs-12" style="margin-bottom: 10px;">
            <p class="blue-title">待办事项</p>
        </div>
        <div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">
            <div class="gray-box clearfix">
                <div class="pull-left">
                    <p class="font-16 text-center">待认证企业</p>
                    <a href="{{admin_base_path('/firm/company')}}?audit=2"><p class="font-26-blue text-center">{{ $needAuthCompany->getAuditCount or 0 }}</p></a>
                </div>
                <div class="pull-right">
                    <a href="{{admin_base_path('/firm/company')}}?audit=2"> <img src="/vendor/laravel-admin/AdminLTE/dist/img/index-todo-icon1.png"/></a>
                </div>
            </div>
        </div>
        <div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">
            <div class="gray-box clearfix">
                <div class="pull-left">
                    <p class="font-16 text-center">待审核职位</p>
                    <a href="{{admin_base_path('/firm/jobs')}}?audit=2"><p class="font-26-999 text-center">{{ $needAuditJobs->getJobsCount or 0 }}</p></a>
                </div>
                <div class="pull-right">
                    <a href="{{admin_base_path('/firm/jobs')}}?audit=2"><img src="/vendor/laravel-admin/AdminLTE/dist/img//index-todo-icon2.png"/></a>
                </div>
            </div>
        </div>
        <div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">
            <div class="gray-box clearfix">
                <div class="pull-left">
                    <p class="font-16 text-center">待审核简历</p>
                    <a href="{{admin_base_path()}}/personal/resume?audit=1"><p class="font-26-999 text-center">{{ $needAuditResume->getAuditCount or 0 }}</p></a>
                </div>
                <div class="pull-right">
                    <a href="{{admin_base_path()}}/personal/resume?audit=1"><img src="/vendor/laravel-admin/AdminLTE/dist/img/index-todo-icon3.png"/></a>
                </div>
            </div>
        </div>
        <div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">
            <div class="gray-box clearfix">
                <div class="pull-left">
                    <p class="font-16 text-center">待审核简历</p>
                    <p class="font-16 text-center">照片/作品</p>
                    <a href="{{admin_base_path()}}/personal/resumeImg?audit=1"><p class="font-26-999 text-center">{{ $needAuditResumeImg->getAuditCount or 0 }}</p></a>
                </div>
                <div class="pull-right">
                    <a href="{{admin_base_path()}}/personal/resumeImg?audit=1"><img src="/vendor/laravel-admin/AdminLTE/dist/img/index-todo-icon4.png"/></a>
                </div>
            </div>
        </div>
        <div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">
            <div class="gray-box clearfix">
                <div class="pull-left">
                    <p class="font-16 text-center">意见/建议</p>
                    <a href="{{admin_base_path()}}/content/feedback?audit=0"><p class="font-26-999 text-center">{{ $suggestion->getCount or 0 }}</p></a>
                </div>
                <div class="pull-right">
                    <a href="{{admin_base_path()}}/content/feedback?audit=0"><img src="/vendor/laravel-admin/AdminLTE/dist/img/index-todo-icon5.png"/></a>
                </div>
            </div>
        </div>
        <div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">
            <div class="gray-box clearfix">
                <div class="pull-left">
                    <p class="font-16 text-center">举报信息</p>
                    <a href="{{admin_base_path()}}/content/report?audit=1"><p class="font-26-999 text-center">{{ $report->getCount or 0 }}</p></a>
                </div>
                <div class="pull-right">
                    <a href="{{admin_base_path()}}/content/report?audit=1"> <img src="/vendor/laravel-admin/AdminLTE/dist/img/index-todo-icon6.png"/></a>
                </div>
            </div>
        </div>
    </div>
</div>

<!--近30天会员注册趋势-->
<div class="shadow white-box">
    <div class="row">
        <div class="col-md-12 col-sm-12">
            <p class="blue-title">近30天会员注册趋势</p>
        </div>

        <div class="col-md-12 col-sm-12 chart">
            <div  id="reg-trend" style="width: 100%;height: 260px;">

            </div >
        </div>
    </div>
</div>
<div class="row">
    <!--企业类型分布-->
    <div class="col-md-4 col-lg-4 col-sm-12 col-xs-12">
        <div class="white-box shadow">
            <p class="blue-title">企业类型分布</p>
            <div id="com-distribution" style="width: 100%;height: 310px;">

            </div>
        </div>
    </div>
    <!--用户行为分析-->
    <div class="col-md-8 col-lg-8 col-sm-12 col-xs-12">
        <div class="white-box shadow">
            <p class="blue-title">用户行为分析</p>
            <div id="beh-analysis" style="width: 100%;height: 310px;">

            </div>
        </div>
    </div>
</div>
<style type="text/css">
    .content-wrapper{background: #fff;}
    .clearfix:after{display:block;clear:both;content:"";visibility:hidden;height:0;}
    .clearfix{zoom:1;  /*为了兼容IE*/}
    .white-box{background: #fff;padding: 10px 20px;margin-bottom: 20px;}
    .white-box p,ul,li{margin: 0;padding: 0;}
    .gray-box{background: #f5f5f5;padding: 15px 25px;margin-bottom: 10px;height: 105px;overflow: hidden;}
    .shadow{box-shadow:0 0 15px rgba(0, 0, 0, .2);-webkit-box-shadow:0 0 15px rgba(0, 0, 0, .2);}
    .white-box .box-title{font-size: 20px;color: #4d4d4d;padding-left: 68px;height: 48px;line-height: 48px;}
    .blue-title{font-size: 18px;color: #3c8dbc;}
    .font-orange{color: #ed6407}
    .font-red{color: #fd4d51}
    .font-green{color: #12c36b;}
    .font-blue{color: #3e8ff6;}
    .font-16{color: #4d4d4d;font-size: 16px;}
    .font-26-blue{color: #3c8dbc;font-size: 26px;}
    .font-26-999{color: #999999;font-size: 26px;}
    .white-box .com-icon{background: url(/vendor/laravel-admin/AdminLTE/dist/img/index-com-icon.png)no-repeat;}
    .white-box .per-icon{background: url(/vendor/laravel-admin/AdminLTE/dist/img/index-per-icon.png)no-repeat;}
    .white-box .job-icon{background: url(/vendor/laravel-admin/AdminLTE/dist/img/index-job-icon.png)no-repeat;}
    .white-box .resume-icon{background: url(/vendor/laravel-admin/AdminLTE/dist/img/index-resume-icon.png)no-repeat;}
    .white-box .lg-text{font-size: 40px;color: #666666;}
    .white-box .sm-text{font-size: 16px;color: #666666;}
    .white-box .two-part{min-height: 44px;}
    .white-box .two-part li{width: 49%;vertical-align: top;}
    .white-box .rgt-bor{border-right:2px solid #ededed}
    @media screen and (min-width:1200px) and (max-width:1400px){.white-box .gray-box .pull-right{display: none;}}
    @media screen and (min-width:1400px) and (max-width:1670px){.white-box .gray-box {padding: 15px 8px;}.white-box .gray-box img{width: 55px;}}
</style>

<script type="text/javascript" src="{{ theme_asset('app/js/jquery.ba-resize.min.js') }}"></script>
<script>
	//	会员注册趋势折线
    var myChart = echarts.init(document.getElementById("reg-trend"));
    //  企业类型分布饼图
    var myChart1 = echarts.init(document.getElementById('com-distribution'));
    var colorList =["#ec948a","#eab374","#54b7ea","#61c5d0","#a9e0d4","#bddb89","#44d4b0","#99b5ff","#797bac","#8bc0df","#FF9966","#996600","#999966","#669933","#FF9999","#996699","#9999CC","#663366","#CC3399"];
    //	用户行为分析图
    var myChart2 = echarts.init(document.getElementById('beh-analysis'));
    myChart.showLoading();
    myChart1.showLoading();
    myChart2.showLoading();
    $.ajax({
        headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
        url:"{{admin_base_path()}}/home/ajax",
        type:'post',
        dataType: 'json',
        success:function(data){
            myChart.hideLoading();
            myChart1.hideLoading();
            myChart2.hideLoading();
            myChart.setOption({
                tooltip: {
                    trigger: 'axis'
                },
                legend: { //图例组件
                    right:'10%',
                    data: ["企业会员", "个人会员"],
                    textStyle:{
                        color:"#4d4d4d",
                        fontSize:14
                    }
                },
                grid: {
                    left: '10',//grid 组件离容器左侧的距离
                    right: '10',
                    bottom: '10',
                    containLabel: true //grid 区域是否包含坐标轴的刻度标签。
                },
                //x轴信息样式
                xAxis: {
                    boundaryGap:true,
                    axisTick:{
                        alignWithLabel:true
                    },
                    splitLine: {   //grid 区域中的分隔线。
                        show: true,
                        interval: 0,//坐标轴分隔线的显示间隔 , 0 强制显示所有标签
                        lineStyle: {
                            color: ['#ebebeb']
                        }
                    },
                    axisLabel:{
                        interval: 0 //坐标轴刻度标签的显示间隔 , 0 强制显示所有标签。
                       //rotate:30  //刻度标签旋转的角度
                    },
                    data:(function(){
                        var  res = [];
                        for(var i = 0;i<data.company.length;i++){
                            res.push(data.company[i][0].substr(5))
                        }
                        return res
                    })()
                },
                yAxis: {
                    type: 'value',
                    splitLine: {
                        show: true,
                        interval: 'auto',
                        lineStyle: {
                            color: ['#ebebeb']
                        }
                    }
                },
                series: [
                    {
                        name:'企业会员',
                        type:'line',
                        symbol:'circle',
                        symbolSize:6,
                        smooth:true,
                        itemStyle:{
                            normal:{
                                color:'#0fa9f1',
                            }
                        },
                        markPoint:{   //图表标注
                           	//symbol:'roundRect',//标记的图形
                            //symbolOffset:[15,-10],//标记相对于原本位置的偏移
                            symbolSize:35,//标记的大小
                            data: [
                                {type: 'max', name: '最大值'},
                            ]
                        },
                        data:(function(){
                            var  com_res = [];
                            for(var i = 0;i<data.company.length;i++){
                                com_res.push(data.company[i][1])
                            }
                            return com_res
                        })()
                    },
                    {
                        name:'个人会员',
                        type:'line',
                        symbol:'circle',
                        symbolSize:6,
                        smooth:true,
                        itemStyle:{
                            normal:{
                                color:'#f95592',
                            }
                        },
                        markPoint:{   //图表标注
                            //symbol:'roundRect',//标记的图形
                            //symbolOffset:[15,-10],//标记相对于原本位置的偏移
                            symbolSize:35,//标记的大小
                            data: [
                                {type: 'max', name: '最大值'},
                            ]
                        },
                        data:(function(){
                            var  mem_res = [];
                            for(var i = 0;i<data.member.length;i++){
                                mem_res.push(data.member[i][1])
                            }
                            return mem_res
                        })()
                    },
                ]
            });
            myChart1.setOption({
                tooltip: {
                    trigger: 'item',
                    formatter:  "{b}: {c} ({d}%)"
                },
                /*legend: {
                    //orient: 'vertical',
                    textStyle:{
                        color:'#4d4d4d',
                        fontSize: 14,
                    },
                    right:10,
                    bottom:0,
                    itemWidth:15,
                    itemHeight:8,
                    data:data.companyType.category_name
                },*/
                series: [
                    {
                        type:'pie',
                        radius: ['35%', '55%'],
                        center: ['50%', '52%'],
                        // roseType: 'radius',
                        clockwise :true,
                        z:10,
                        itemStyle: {
                            normal: {
                                color: function(params) {
                                    // build a color map as your need.
                                    return colorList[params.dataIndex]
                                },
                            }
                        },
                        label: {
                            normal: {
                                formatter:'{b}: {d}%'
                            }
                        },
                        labelLine: {
                            normal: {
                                length: 20,
                                length2: 0,
                                lineStyle:{
                                    width:2
                                }
                            }
                        },
                        data:data.companyType.result
                    },
                    {
                        type:'pie',
                        radius: ['15%', '20%'],
                        center: ['50%', '52%'],
                        z:10,
                        itemStyle: {
                            normal: {
                                color: function(params) {
                                    return colorList[params.dataIndex]
                                },
                            }
                        },
                        label:{
                            show:false
                        },
                        data:data.companyType.result
                    }
                ]
            });
            myChart2.setOption({
                tooltip: {
                    trigger: 'axis',
                    axisPointer: { // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                grid: {
                    left: '10',
                    right: '10',
                    bottom: '10',
                    containLabel: true
                },
                legend: {
                    right:'10%',
                    textStyle:{
                        color:"#4d4d4d",
                        fontSize:14
                    },
                    data: ['职位刷新数量', '简历投递数量']
                },
                xAxis: [
                    {
                        type: 'category',
                        axisTick: {
                            alignWithLabel: true,
                        },
                        axisLabel:{
                            interval: 0
                            //rotate:30
                        },
                        data:(function(){
	                        var  xres = [];
	                        for(var i = 0;i<data.userAction.day.length;i++){
	                            xres.push(data.userAction.day[i].substr(5))
	                        }
	                        return xres
	                    })()
                    }
                ],
                yAxis: [{
                    type: 'value',
                    min: 0,
                    splitLine: {
                        show: true,
                        interval: 'auto',
                        lineStyle: {
                            color: ['#ebebeb']
                        }
                    }
                }],
                series: [{
                    name: '职位刷新数量',
                    type: 'bar',
                    itemStyle: {
                        normal: {color: '#8bc0df'}
                    },
                    label: {
                        normal: {
                            show: false,
                            position: 'top'
                        }
                    },
                    markPoint:{   //图表标注
                        symbolSize:35,
                        data: [
                            {type: 'max', name: '最大值'},
                        ]
                    },
                    data: data.userAction.userAction.jobsRefresh
                }, {
                    name: '简历投递数量',
                    type: 'bar',
                    itemStyle: {
                        normal: {color: '#797bac'}
                    },
                    label: {
                        normal: {
                            show: false,
                            position: 'top'
                        }
                    },
                     markPoint:{   //图表标注
                        symbolSize:35,
                        data: [
                            {type: 'max', name: '最大值'},
                        ]
                    },
                    data: data.userAction.userAction.jobsApply
                }]
            });
        }
    });
	$(".chart").resize(function(){
		myChart.resize();
		myChart1.resize();
		myChart2.resize();
	})
</script>