{extend name="common/common2" /}
{block name="main"}
<link rel="stylesheet" href="/admin/css/index.css">

<div class="main-all">
    <div class="main1">
        <div class="row">
            <div class="col-xs-3">
                <div class="main1-bg1 one-bg">
                    <div class="main1-type-title">用户统计</div>
                    <div class="main1-type-nums">{$userCount.userNums}</div>
                    <div class="main1-type-bottom">
                        <span class="pull-left">较上月</span>
                        {if($userCount.userLastNums >0)}
                        <div class="type-bottom-right">
                            <span>+{$userCount.userLastNums}</span>
                            <img src="/admin/img/up.png" alt="">
                        </div>
                        {elseif($userCount.userLastNums < 0)}
                        <div class="type-bottom-right">
                            <span>{$userCount.userLastNums}</span>
                            <img src="/admin/img/down.png" alt="">
                        </div>
                        {else}
                        <div class="type-bottom-right">
                            <span>{$userCount.userLastNums}</span>
                            <img src="/admin/img/down.png" alt="">
                        </div>
                        {/if}
                    </div>
                </div>
            </div>
            <div class="col-xs-3">
                <div class="main1-bg1 two-bg">
                    <div class="main1-type-title">本月订单总数</div>
                    <div class="main1-type-nums">{$orderCount.orderNums}</div>
                    <div class="main1-type-bottom">
                        <span class="pull-left">较上月</span>
                        {if($orderCount.orderLastNums >0)}
                        <div class="type-bottom-right">
                            <span>+{$orderCount.orderLastNums}</span>
                            <img src="/admin/img/up.png" alt="">
                        </div>
                        {elseif($orderCount.orderLastNums < 0)}
                        <div class="type-bottom-right">
                            <span>{$orderCount.orderLastNums}</span>
                            <img src="/admin/img/down.png" alt="">
                        </div>
                        {else}
                        <div class="type-bottom-right">
                            <span>{$orderCount.orderLastNums}</span>
                            <img src="/admin/img/down.png" alt="">
                        </div>
                        {/if}
                    </div>
                </div>
            </div>
            <div class="col-xs-3">
                <div class="main1-bg1 three-bg">
                    <div class="main1-type-title">年度订单总数</div>
                    <div class="main1-type-nums">{$orderYearCount.orderYearNums}</div>
                    <div class="main1-type-bottom">
                        <span class="pull-left">同比增长率</span>
                        {if($orderYearCount.orderLastYearNums >0)}
                        <div class="type-bottom-right">
                            <span>+{$orderYearCount.orderLastYearNums}%</span>
                            <img src="/admin/img/up.png" alt="">
                        </div>
                        {elseif($orderYearCount.orderLastYearNums < 0)}
                        <div class="type-bottom-right">
                            <span>{$orderYearCount.orderLastYearNums}%</span>
                            <img src="/admin/img/down.png" alt="">
                        </div>
                        {else}
                        <div class="type-bottom-right">
                            <span>{$orderYearCount.orderLastYearNums}%</span>
                            <img src="/admin/img/down.png" alt="">
                        </div>
                        {/if}
                    </div>
                </div>
            </div>
            <div class="col-xs-3">
                <div class="main1-bg1 four-bg">
                    <div class="main1-type-title">本月活跃用户</div>
                    <div class="main1-type-nums">{$activeUserCount.activeUserNums}</div>
                    <div class="main1-type-bottom">
                        <span class="pull-left">较上月</span>
                        {if($activeUserCount.activeUserLastNums >0)}
                        <div class="type-bottom-right">
                            <span>+{$activeUserCount.activeUserLastNums}</span>
                            <img src="/admin/img/up.png" alt="">
                        </div>
                        {elseif($activeUserCount.activeUserLastNums < 0)}
                        <div class="type-bottom-right">
                            <span>{$activeUserCount.activeUserLastNums}</span>
                            <img src="/admin/img/down.png" alt="">
                        </div>
                        {else}
                        <div class="type-bottom-right">
                            <span>{$activeUserCount.activeUserLastNums}</span>
                            <img src="/admin/img/down.png" alt="">
                        </div>
                        {/if}
                    </div>
                </div>
            </div>
        </div>

    </div>
    <div class="main2">
        <div class="main-all-title">
            <div class="semicircle color2"></div>
            <span>今日订单状态总览</span>
        </div>
        <div class="main2-body">
            <div class="row">
                <div class="col-xs-2">
                    <div class="body-todo">
                        <div class="nums border-right">{$dayOrderCount.count1}</div>
                        <div class="title">待处理</div>
                    </div>
                </div>
                <div class="col-xs-2">
                    <div class="body-todo">
                        <div class="nums border-right">{$dayOrderCount.count2}</div>
                        <div class="title">已派发</div>
                    </div>
                </div>
                <div class="col-xs-2">
                    <div class="body-todo">
                        <div class="nums border-right">{$dayOrderCount.count3}</div>
                        <div class="title">已完成</div>
                    </div>
                </div>
                <div class="col-xs-2">
                    <div class="body-todo">
                        <div class="nums border-right">{$dayOrderCount.count4}</div>
                        <div class="title">已评价</div>
                    </div>
                </div>
                <div class="col-xs-2">
                    <div class="body-todo">
                        <div class="nums border-right">{$dayOrderCount.count5}</div>
                        <div class="title">用户主动撤销</div>
                    </div>
                </div>
                <div class="col-xs-2">
                    <div class="body-todo">
                        <div class="nums">{$dayOrderCount.count6}</div>
                        <div class="title">被调度取消</div>
                    </div>
                </div>

            </div>

        </div>
    </div>
    <div class="main3">
        <div class="row">
            <div class="col-xs-12">
                <div class="main3-left">
                    <div class="main3-left-title">
                        <div class="left-semicircle"></div>
                        <span class="tab-list {if($mode==1)}cur{/if}" data-mode="1" onclick="modeTodoClick(this)">报修工单列表</span>
                        <span class="tab-list {if($mode==2)}cur{/if}" data-mode="2" onclick="modeTodoClick(this)">保洁工单列表</span>
                        <span class="tab-list {if($mode==3)}cur{/if}" data-mode="3" onclick="modeTodoClick(this)">运送工单列表</span>
                        <span class="tab-list {if($mode==4)}cur{/if}" data-mode="4" onclick="modeTodoClick(this)">应急工单列表</span>
                    </div>
                    <div class="main3-left-body">
                        <table id="table" style="border-collapse: collapse"></table>

                    </div>
                </div>
            </div>
            <!--<div class="col-xs-4">-->
                <!--<div class="main3-right">-->
                    <!--<div class="main-all-title">-->
                        <!--<div class="semicircle color3"></div>-->
                        <!--<span>项目人员考勤</span>-->
                    <!--</div>-->
                    <!--<div class="main3-right-body">-->
                        <!--<div class="main3-right-body-top">-->

                            <!--<div class="left-all">-->
                                <!--<div class="left" id="onTheJobUser"></div>-->
                                <!--<div class="percent color1">{$attendanceCount1.bl}%</div>-->
                            <!--</div>-->

                            <!--<div class="right">-->
                                <!--<div class="title color1">在职人员</div>-->
                                <!--<div class="nums">{$attendanceCount1.count2}人</div>-->
                            <!--</div>-->
                        <!--</div>-->
                        <!--<div class="main3-right-body-top">-->
                            <!--<div class="left-all">-->
                                <!--<div class="left" id="absenteeism"></div>-->
                                <!--<div class="percent color2">{$attendanceCount1.bl2}%</div>-->
                            <!--</div>-->

                            <!--<div class="right">-->
                                <!--<div class="title color2">缺勤人员</div>-->
                                <!--<div class="nums">{$attendanceCount1.count3}人</div>-->
                            <!--</div>-->
                        <!--</div>-->
                    <!--</div>-->
                <!--</div>-->
            <!--</div>-->

        </div>


    </div>
    <div class="main4">
        <div class="row">
            <div class="col-xs-3">
                <div class="main4-left">
                    <div class="main4-left-title">
                        <div class="semicircle"></div>
                        <span>软件综合信息</span>
                    </div>
                    <div class="main4-left-body">
<!--                        <div><a target="_blank" href="/doc/明德医管-PC端操作说明书.pdf">明德医管操作说明书-PC端</a></div>-->
<!--                        <div><a target="_blank" href="/doc/明德医管-APP操作说明书.pdf">明德医管操作说明书-移动端</a></div>-->
<!--                        <div><a target="_blank" href="/doc/后勤操作说明书-陪护系统.pdf">慧后勤操作说明书-陪护系统</a></div>-->

                    </div>
                </div>
            </div>
            <div class="col-xs-9">
                <div class="main4-right">
                    <!--<div class="qrcode1">-->
                        <!--<img src="{:url('Qrcode/qrcode',['code'=>$shopcode,'type'=>1])}" alt="点餐二维码">-->
                        <!--<div class="title">点餐二维码</div>-->
                    <!--</div>-->
<!--                    <div class="qrcode2">-->
<!--                        <img src="{:url('Qrcode/qrcode',['code'=>$xshopcode,'type'=>1])}" alt="商城客户端二维码">-->
<!--                        <div class="title">商城客户端二维码</div>-->
<!--                    </div>-->
                    <div class="qrcode2">
                        <img src="{:url('Qrcode/qrcode',['code'=>$phcode,'type'=>1])}" alt="陪护客户端二维码">
                        <div class="title">陪护客户端二维码</div>
                    </div>
<!--                    {notempty name="wxcode"}-->
<!--                    <div class="qrcode2">-->
<!--                        <img src="{$wxcode}" alt="小程序二维码">-->
<!--                        <div class="title">小程序二维码</div>-->
<!--                    </div>-->
<!--                    {/notempty}-->
                    <div class="qrcode2">
                        <img src="{:url('Qrcode/qrcode',['code'=>$download,'type'=>1])}" alt="APP下载二维码">
                        <div class="title">APP下载二维码</div>
                    </div>
                </div>
            </div>
        </div>




    </div>
</div>

{/block}

{block name="script"}
<script src="/static/echarts.js"></script>
<script>
    function modeTodoClick(_self){
        var mode = $(_self).attr('data-mode');
        $('.tab-list').removeClass('cur');
        $(_self).addClass('cur');
        var url = '{:url("index/todo")}?mode='+mode;;
        console.log('search',url);
        if(url){
            $("#table").jqGrid('setGridParam', {
                url: url,
                page: 1
            }).trigger("reloadGrid");
        }
    }



    $(function () {
        // setInterval(function () {
        //     attendanceCount1();
        // },5*60*1000);
        // function attendanceCount1(){
            var url = 'attendanceCount1';
            $.post(url,function (res) {
                if(res.code == 1){
                    option = {
                        color: ['#607DFE','#EDF4F5'],
                        legend: {
                            top: '5%',
                            left: 'center'
                        },
                        series: [
                            {
                                type: 'pie',
                                radius: ['55%', '70%'],
                                avoidLabelOverlap: false,
                                labelLine: {
                                    show: false
                                },
                                data: [
                                    { value: res.data.count2 },
                                    { value: res.data.count3 },
                                ]
                            }
                        ]
                    };
                    var myChart2 = echarts.init(document.getElementById('onTheJobUser'));
                    myChart2.setOption(option);

                    option2 = {
                        color: ['#FF755B','#EDF4F5'],
                        legend: {
                            top: '5%',
                            left: 'center'
                        },
                        series: [
                            {
                                type: 'pie',
                                radius: ['55%', '70%'],
                                avoidLabelOverlap: false,
                                labelLine: {
                                    show: false
                                },
                                data: [
                                    { value: res.data.count3 },
                                    { value: res.data.count2 },
                                ]
                            }
                        ]
                    };
                    var myChart3 = echarts.init(document.getElementById('absenteeism'));
                    myChart3.setOption(option2);
                }
            })
        // }


        $(window).bind("resize",function(){
            var width=$(".jqGrid_wrapper").width();
            $("#table").setGridWidth(width);
        });
        $.jgrid.defaults.styleUI="Bootstrap";
        $("#table").jqGrid({
            url:"{:url('todo')}?mode={$mode}",
            datatype: "json",
            colModel:[
                {label:'编号',name:'id',index:'id', sortable: false},
                {label:'工单类型',name:'work_type_mode_text',index:'work_type_mode_text',sortable: false},
                {label:'分单时间',name:'create_time',index:'create_time',sortable: false},
                {label:'发起人',name:'user_name',index:'user_name',sortable: false},
                {label:'执行人',name:'to_user_name',index:'to_user_name',sortable: false},
                {label:'接单时间',name:'confirm_time',index:'confirm_time',sortable: false},
                {label:'状态',name:'todo_mode_text',index:'todo_mode_text',sortable: false,formatter:function (a, b, c) {
                        return  '<span style="color: '+c.todo_mode_color+'">'+a+'</span>'
                    }},
            ],
            rowNum:11,
            rowList:[11,20,30,50,100],
            pager: '#pager',
            sortname: 'id',
            viewrecords: true,
            autowidth:true,
            mtype: 'post',
            height: 'auto',
            emptyrecords: "暂无数据",
            sortorder: "desc",
            caption:"",
            loadComplete: function (xhr) {
                if(xhr.code==0){
                    layer.msg(xhr.msg);
                    return false;
                }
            },
        });


    })

</script>
{/block}