{extend name="common/common2" /}
{block name="main"}
<style>
    h1{
        font-size: 40px;
        margin-bottom: 25px;
    }
    h3{
        font-size: 22px;
    }
    .main .main-title{
        width: 111px;
        height: 18px;
        font-size: 18px;
        font-family: Source Han Sans CN;
        font-weight: 500;
        color: #354655;
        padding-left: 20px;
    }
    .money{
        height: 136px;
        background: linear-gradient(0deg, #FCCDBA, #F8CA9D);
        box-shadow: 0px 14px 20px 0px rgba(233, 94, 0, 0.1);
        border-radius: 30px;
        margin-top: 15px;
    }
    .money .money-img .money-title{
        width: 200px;
        height: 17px;
        font-size: 18px;
        font-family: Source Han Sans CN;
        font-weight: 500;
        color: #FFFFFF;
        margin-left: 65px;
        margin-top: -41px;
    }
    .money .money-num{
        width: 100%;
        height: 37px;
        font-size: 30px;
        font-family: Yuanti SC;
        font-weight: bold;
        color: #FFFFFF;
        line-height: 18px;
        text-shadow: 0px 4px 0px rgba(0, 0, 0, 0.1);
        margin-top: 22px;
        text-align: right;
        padding: 0 30px;

    }
    .money-img{
        padding-top: 10px;
        height: 57px;
        width: 100%;
        margin-left: 10px;
    }
    .order-view{
        width: 100%;
        height: 100px;
    }
    .percent{
        position: absolute;
        width: 40px;
        height: 15px;
        font-size: 24px;
        font-family: Source Han Sans CN;
        font-weight: bold;
        color: #666666;
        top: 85px;
        left: 90px;
    }
    .ov{
        margin-left:10px;
    }
    .z-line{
        margin-top: 20px;
    }
    .progress-cus{
        background-color: #E7E7E7;
    }
    .line-title .line-title2{
        margin-left: 10px;
        width: 55px;
        height: 15px;
        font-size: 20px;
        font-family: Source Han Sans CN;
        font-weight: bold;
        color: #148d8f;
    }
    .line-desc-nums{
        width: 57px;
        height: 31px;
        font-size: 42px;
        font-family: Yuanti SC;
        font-weight: bold;
        color: #666666;
    }
    .line-radio1{
        background: #E7E7E7;
        width: 10px;
        height: 10px;
        border-radius: 50%;
    }
    .line-radio2{
        background: #148d8f;
        width: 10px;
        height: 10px;
        border-radius: 50%;
    }
    .line-desc1{
        width: 114px;
        float: left;
    }
    .worker{
        text-align: center;
    }
    .worker-num1{
        width: 100%;
        height: 28px;
        font-size: 38px;
        font-family: Yuanti SC;
        font-weight: bold;
        color: #FDAB29;
        text-align: center;
    }
    .worker-num2{
        width: 100%;
        height: 28px;
        font-size: 38px;
        font-family: Yuanti SC;
        font-weight: bold;
        color: #148d8f;
        text-align: center;
    }
    .worker-num3{
        width: 100%;
        height: 28px;
        font-size: 38px;
        font-family: Yuanti SC;
        font-weight: bold;
        color: #426EFD;
        text-align: center;
    }
    .worker-title1{
        width: 100%;
        height: 16px;
        font-size: 16px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #666666;
        margin-top: 35px;
        text-align: center;
    }
    .worker-list{
        margin-top: 100px;
        text-align: center;
    }
    .worker-list tr th{
        text-align: center;
        background: #EBF8F5;
        color: #148d8f;
    }
    .worker-list tr td{
        text-align: center;
    }
    #ks-order{
        width: 100%;
        height: 300px;
    }
    .month{
        float: right;
    }
    .line-desc-title{
        line-height: 10px;
    }
    .line-desc-title1{
        margin-left: 10px;
        margin-top: -8px;
    }
</style>
<!--<div class="panel panel-default" style="background-color: #F6FAF9;">-->
<!--    <div class="panel-body">-->
<!--        <div class="col-xs-8">-->
<!--            <h1><strong>{:get_config('web_site_title')}陪护平台</strong></h1>-->
<!--            <h3>欢迎您 {:session('user_auth.real_name')} 您最近一次登陆的时间是{:session('user_auth.last_login_time')}</h3>-->
<!--             <div style="padding-top: 20px">-->
<!--                 <a href="">陪护后台管理操作说明书.pdf</a>-->
<!--                 &nbsp;&nbsp;&nbsp;-->
<!--                 <a href="">陪护用户端操作说明书.pdf</a>-->
<!--             </div>-->
<!--        </div>-->
<!--        <div class="col-xs-2" >-->
<!--            <img src="{:url('Qrcode/qrcode',['code'=>$code1,'type'=>1])}" style="width: 100%" alt="">-->
<!--            <div class="text-center" style="font-weight: bold;font-size: 20px;">调度扫一扫</div>-->
<!--        </div>-->
<!--        <div class="col-xs-2" >-->
<!--            <img src="{:url('Qrcode/qrcode',['code'=>$code,'type'=>1])}" style="width: 100%" alt="">-->
<!--            <div class="text-center" style="font-weight: bold;font-size: 20px;">客户扫一扫</div>-->
<!--        </div>-->
<!--    </div>-->
<!--</div>-->

<div class="panel panel-default">

    <div class="panel-body">
        <div class="main">
            <span class="main-title">订单金额总览</span>
            <div class="month">
                <select name="month"  onchange="loadOrder(this,1)">
                    {foreach $month as $k=>$v}
                    <option value="{$v}" {if $v==$curMonth} selected {/if}>{$v}</option>
                    {/foreach}
                </select>
            </div>
        </div>
        <div class="col-xs-3" >
            <div class="money">
                <div class="money-img">
                    <img src="/admin/img/m1.png" alt="">
                    <div class="money-title">订单总金额</div>
                </div>
                <div class="money-num" id="money-num1">{$orderData.total}</div>
            </div>
        </div>
        <div class="col-xs-3" >
            <div class="money">
                <div class="money-img">
                    <img src="/admin/img/m2.png" alt="">
                    <div class="money-title">预收金</div>
                </div>
                <div class="money-num" id="money-num2">{$orderData.pre_money}</div>
            </div>
        </div>
        <div class="col-xs-3" >
            <div class="money">
                <div class="money-img">
                    <img src="/admin/img/m3.png" alt="">
                    <div class="money-title">已支付金额</div>
                </div>
                <div class="money-num" id="money-num3">{$orderData.pay}</div>
            </div>
        </div>
        <div class="col-xs-3" >
            <div class="money">
                <div class="money-img">
                    <img src="/admin/img/m4.png" alt="">
                    <div class="money-title" >已结算金额</div>
                </div>
                <div class="money-num" id="money-num4">{$orderData.yjs}</div>
            </div>
        </div>

    </div>
</div>

<div class="row">
    <div class="col-xs-8">
        <div class="row">
            <div class="col-xs-6">
                <div class="panel panel-default">
                    <div class="panel-body">
                        <div class="main">
                            <span class="main-title">订单状态概览</span>
                        </div>
                        <div class="col-xs-4" style="">
                            <div id="dfp" class="order-view">
                            </div>

                        </div>
                        <div class="col-xs-4" >
                            <div id="jxz"  class="order-view">

                            </div>
                        </div>
                        <div class="col-xs-4" >
                            <div id="ywc"  class="order-view">

                            </div>
                        </div>
                        <div class="col-xs-4" >
                            <div id="yzf" class="order-view">

                            </div>
                        </div>
                        <div class="col-xs-4" >
                            <div id="yjs" class="order-view">

                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xs-6">
                <div class="panel panel-default">
                    <div class="panel-body">
                        <div class="main">
                            <span class="main-title">订单增长率</span>
                        </div>
                        <div class="col-xs-12" >
                            <div class="z-line">
                                <div class="z-line1">
                                    <div class="progress">
                                        <div class="progress-bar progress-cus" role="progressbar" aria-valuenow="100"
                                             aria-valuemin="0" aria-valuemax="100" style="width: {$lastBl};">
                                            <span class="sr-only">100% </span>
                                        </div>
                                    </div>
                                </div>
                                <div class="z-line1">
                                    <div class="progress">
                                        <div class="progress-bar" role="progressbar"
                                             aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"
                                             style="width: {$curBl};">
                                            <span class="sr-only">90% </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="line-title">
                                <span class="line-title1">与上月对比</span>
                                {if $bl <0}
                                <span class="line-title2" style="color: red !important;">{$bl}%</span>

                                {else}
                                <span class="line-title2">+{$bl}%</span>
                                {/if}
                            </div>
                            <div class="line-desc">
                                <div class="line-desc1">
                <span class="line-desc-nums">
                    {$lastOrder}
                </span>
                                    <div class="line-desc-title">
                                        <div class="line-radio1"></div>
                                        <div class="line-desc-title1">上月订单总量</div>
                                    </div>
                                </div>
                                <div class="line-desc1">
                 <span class="line-desc-nums">
                    {$curOrder}
                </span>
                                    <div class="line-desc-title">
                                        <div class="line-radio2"></div>
                                        <div class="line-desc-title1">本月订单量</div>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
            <div class="col-xs-12">
                <div class="panel panel-default">
                    <div class="panel-body">
                        <div class="main">
                            <span class="main-title">科室/部门订单类型月分布</span>
                            <div class="month">
                                <select name="month" id="" onchange="loadOrder(this,2)">
                                    {foreach $month as $k=>$v}
                                    <option value="{$v}" {if $v==$curMonth} selected {/if}>{$v}</option>
                                    {/foreach}
                                </select>
                            </div>
                        </div>
                        <div class="col-xs-12" >
                            <div id="ks-order">
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-xs-4">
        <div class="panel panel-default">

            <div class="panel-body" style="height: 632px">
                <div class="main">
                    <span class="main-title">陪护人员工作数据预览</span>

                </div>
                <div class="col-xs-4">
                    <div class="worker">
                        <div class="worker-num1">
                            {$userCount.count1}
                        </div>
                        <div class="worker-title1">
                            陪护总数
                        </div>
                    </div>
                </div>

                <div class="col-xs-4" >
                    <div class="worker">
                        <div class="worker-num2">
                            {$userCount.count2}
                        </div>
                        <div class="worker-title1">
                            在岗人数
                        </div>
                    </div>
                </div>
                <div class="col-xs-4" >
                    <div class="worker">
                        <div class="worker-num3">
                            {$userCount.count3}
                        </div>
                        <div class="worker-title1">
                            空闲人数
                        </div>
                    </div>
                </div>
                <table class="table worker-list">
                    <tr>
                        <th>姓名</th>
                        <th>进行中</th>
                        <th>已完成</th>
                        <th>服务天数</th>
                    </tr>

                    {foreach $workerList as $k=>$v}
                    <tr>
                        <td>{$v.name}</td>
                        <td>{$v.count}</td>
                        <td>{$v.ywc}</td>
                        <td>{$v.day}</td>
                    </tr>
                    {/foreach}
                </table>
            </div>
        </div>
    </div>
</div>






{/block}
{block name="script"}
<script src="/static/echarts.js"></script>

<script>

    function loadOrder(obj,type) {

        $.post('{:url("view")}',{type:type,'month':obj.value},function (res) {
            if(res.code==0){
                if(type==1){
                    $('#money-num1').html(res.data.total)
                    $('#money-num2').html(res.data.preMoney)
                    $('#money-num3').html(res.data.pay)
                    $('#money-num4').html(res.data.yjs)
                }else {
                    option = {
                        tooltip: {
                            trigger: 'axis'
                        },
                        legend: {
                            data: res.data.data1
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },

                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data: res.data.data2
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: res.data.data3
                    };
                    var myChart7 = echarts.init(document.getElementById('ks-order'));
                    myChart7.setOption(option);
                }

            }else {
                layer.msg('加载失败');
            }
        })
    }
    $(function () {

        option = {
            color: ['#FB6666','#FED1D1'],
            legend: {
                top: '5%',
                left: 'center'
            },
            series: [
                {
                    type: 'pie',
                    radius: ['55%', '70%'],
                    avoidLabelOverlap: false,
                    labelLine: {
                        show: false
                    },
                    data: [
                        { value: '{$dfp.count1}' },
                        { value:'{$dfp.count2}' },
                    ],
                    label:{
                        normal:{
                            show:true,
                            position:'center',
                            formatter:function () {
                                return '{$dfp.bl}\n待分配';
                            },
                            textStyle:{
                                fontSize:10,
                                color:'#666666'
                            }
                        }
                    }
                }
            ]
        };
        var myChart2 = echarts.init(document.getElementById('dfp'));
        myChart2.setOption(option);


        option = {
            color: ['#FDAB29','#FEE6BE'],
            legend: {
                top: '5%',
                left: 'center'
            },
            series: [
                {
                    type: 'pie',
                    radius: ['55%', '70%'],
                    avoidLabelOverlap: false,
                    labelLine: {
                        show: false
                    },
                    data: [
                        { value:  '{$jxz.count1}' },
                        { value: '{$jxz.count2}' },
                    ],
                    label:{
                        normal:{
                            show:true,
                            position:'center',
                            formatter:function () {
                                return '{$jxz.bl}\n进行中';
                            },
                            textStyle:{
                                fontSize:10,
                                color:'#666666'
                            }
                        }
                    }
                }
            ]
        };
        var myChart3 = echarts.init(document.getElementById('jxz'));
        myChart3.setOption(option);



        option = {
            color: ['#7C42FF','#D7C6FF'],
            legend: {
                top: '5%',
                left: 'center'
            },
            series: [
                {
                    type: 'pie',
                    radius: ['55%', '70%'],
                    avoidLabelOverlap: false,
                    labelLine: {
                        show: false
                    },
                    data: [
                        { value: '{$ywc.count1}' },
                        { value:'{$ywc.count2}' },
                    ],
                    label:{
                        normal:{
                            show:true,
                            position:'center',
                            formatter:function () {
                                return '{$ywc.bl}\n已完成';
                            },
                            textStyle:{
                                fontSize:10,
                                color:'#666666'
                            }
                        }
                    }
                }
            ]
        };
        var myChart4 = echarts.init(document.getElementById('ywc'));
        myChart4.setOption(option);

        option = {
            color: ['#426EFD','#C6D3FE'],
            legend: {
                top: '5%',
                left: 'center'
            },
            series: [
                {
                    type: 'pie',
                    radius: ['55%', '70%'],
                    avoidLabelOverlap: false,
                    labelLine: {
                        show: false
                    },
                    data: [
                        { value: '{$yzf.count1}' },
                        { value:'{$yzf.count2}' },
                    ],
                    label:{
                        normal:{
                            show:true,
                            position:'center',
                            formatter:function () {
                                return '{$yzf.bl}\n已作废';
                            },
                            textStyle:{
                                fontSize:10,
                                color:'#666666'
                            }
                        }
                    }
                }
            ]
        };
        var myChart5 = echarts.init(document.getElementById('yzf'));
        myChart5.setOption(option);
        option = {
            color: ['#70FAFF','#D4FDFF'],
            legend: {
                top: '5%',
                left: 'center'
            },
            series: [
                {
                    type: 'pie',
                    radius: ['55%', '70%'],
                    avoidLabelOverlap: false,
                    labelLine: {
                        show: false
                    },
                    data: [
                        { value: '{$yjs.count1}' },
                        { value:'{$yjs.count2}' },
                    ],
                    label:{
                        normal:{
                            show:true,
                            position:'center',
                            formatter:function () {
                                return '{$yjs.bl}\n已结算';
                            },
                            textStyle:{
                                fontSize:10,
                                color:'#666666'
                            }
                        }
                    }
                }
            ]
        };
        var myChart6 = echarts.init(document.getElementById('yjs'));
        myChart6.setOption(option);



        option = {
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: {:json_encode($viewDataList['data1'])}
    },
        grid: {
            left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
        },

        xAxis: {
            type: 'category',
                boundaryGap: false,
                data: {:json_encode($viewDataList['data2'])}
        },
        yAxis: {
            type: 'value'
        },
        series: {:json_encode($viewDataList['data3'])}
    };
        var myChart7 = echarts.init(document.getElementById('ks-order'));
        myChart7.setOption(option);
    })
</script>
{/block}