<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<!DOCTYPE HTML>
<html>
<head>
    <title>首页</title>
    <link rel="stylesheet" href="${ctxPlugin}/lib/layuiAdmin/dist/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="${ctxPlugin}/lib/layuiAdmin/dist/layuiadmin/style/admin.css" media="all">
    <link rel="stylesheet" href="${ctxPlugin}/static/css/reset.css">
</head>
<body>

<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-header">工单流程</div>
                        <div class="layui-card-body item-flow pt-50 pb-20 pl-50">
                            <div><a lay-href="${ctx}/order/getPlatformOrder" lay-tips="新建工单" lay-direction="2">新建工单</a></div>
                            <img src="${ctxPlugin}/static/img1/smartart.png" alt="">
                            <div><a lay-href="${ctx}/order/tobesentOrderList" lay-tips="派工" lay-direction="2">派工</a></div>
                            <img src="${ctxPlugin}/static/img1/smartart.png" alt="">
                            <div><b>服务商服务完工</b></div>
                            <img src="${ctxPlugin}/static/img1/smartart.png" alt="">
                            <div><a lay-href="${ctx}/order/getCallbackOrders" lay-tips="回访" lay-direction="2">回访</a></div>
                            <img src="${ctxPlugin}/static/img1/smartart.png" alt="">
                            <div><a lay-href="${ctx}/order/getSettlementOrders" lay-tips="结算" lay-direction="2">结算</a></div>
                            <img src="${ctxPlugin}/static/img1/smartart.png" alt="">
                            <div><b>结账</b></div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md6">
                    <div class="layui-card">
                        <div class="layui-card-header">
                            <div class="layui-btn-group">
                                <button type="button" class="layui-btn orderBtn">本日</button>
                                <button type="button" class="layui-btn layui-btn-primary orderBtn">本周</button>
                                <button type="button" class="layui-btn layui-btn-primary orderBtn">本月</button>
                            </div>
                        </div>
                        <div class="layui-card-body ">
                            <ul class="layui-row layui-col-space10 text-c">
                                <li class="layui-col-xs4 h-100 pt-20">
                                    <a class="layadmin-backlog-body">
                                        <h3>新增工单</h3>
                                        <p><cite class="newCount">0</cite></p>
                                    </a>
                                </li>
                                <li class="layui-col-xs4 h-100 pt-20">
                                    <a class="layadmin-backlog-body">
                                        <h3>服务中</h3>
                                        <p><cite class="fwzCount">0</cite></p>
                                    </a>
                                </li>
                                <li class="layui-col-xs4 h-100 pt-20">
                                    <a class="layadmin-backlog-body">
                                        <h3>已完成</h3>
                                        <p><cite class="ywcCount">0</cite></p>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md6">
                    <div class="layui-card">
                        <div class="layui-card-header">备件概况(本月)</div>
                        <div class="layui-card-body">
                            <ul class="layui-row layui-col-space10 text-c">
                                <li class="layui-col-xs4 h-100 pt-20">
                                    <a class="layadmin-backlog-body">
                                        <h3>待审核</h3>
                                        <p><cite class="dshCount">0</cite></p>
                                    </a>
                                </li>
                                <li class="layui-col-xs4 h-100 pt-20">
                                    <a class="layadmin-backlog-body">
                                        <h3>待出库</h3>
                                        <p><cite class="dckCount">0</cite></p>
                                    </a>
                                </li>
                                <li class="layui-col-xs4 h-100 pt-20">
                                    <a class="layadmin-backlog-body">
                                        <h3>已完成</h3>
                                        <p><cite class="ywcfiCount">0</cite></p>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-header">一周单量变化图</div>
                        <div class="layui-card-body">
                            <div class="layui-carousel layadmin-carousel layadmin-dataview" data-anim="fade"
                                 lay-filter="LAY-index" >
                             <div id="LAY-index" style="width: 100%; height: 280px;"></div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="${ctxPlugin}/lib/layuiAdmin/dist/layuiadmin/layui/layui.js"></script>
<script type="text/javascript">

   var $;
    layui.config({
        base: '${ctxPlugin}/lib/layuiAdmin/dist/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'console','jquery','echarts'],function(){
        $= layui.jquery;
        echarts=layui.echarts;
       var category = [];
        var dottedBase = +new Date();

        for (var i = 0; i < 7; i++) {
            var date = new Date(dottedBase-3600 * 24 * 1000*(6-i));
            category.push([
                date.getFullYear(),
                date.getMonth() + 1,
                date.getDate()
            ].join('-'));
        }
        var myChart = echarts.init(document.getElementById('LAY-index'));
        $.get('${ctx}/sys/toHomerPager/homerPager', function (data) {
             myChart.setOption(option={
            title: {
                text: ''
            },
                 legend: {
                     data:['维修','安装']
                 },
            tooltip : {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#6a7985'
                    }
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type : 'category',
                boundaryGap : false,
                data: category,
                axisLine: {
                    lineStyle: {
                    }
                },
                splitLine: {
                    show: false
                }
            },
            yAxis : {
                type: 'value',
                axisTick: {
                    inside: true
                },
                splitLine: {
                    show: false
                },

                z: 10
            },
            grid: {show:'true',borderWidth:'0'},
            series : [
                {
                    name:'安装',
                    type:'line',
                    areaStyle: {
                        normal: {
                            color:"#009688"
                        }

                    },
                    itemStyle : {
                        normal : {
                            color:'#009688',
                            lineStyle:{
                                color:'#009688',
                            }
                        }
                    },
                    data:data.安装
                },
                {
                    name:'维修',
                    type:'line',
                    areaStyle: {
                        normal: {
                            color:"#009688"
                        }

                    },
                    itemStyle : {
                        normal : {
                            color: '#01AAED',
                            lineStyle:{
                                color: '#01AAED',
                            }
                        }
                    },
                    data:data.维修
                },
            ]
        });


        },"json")



        orderCount('');
        $(".orderBtn").on('click',function(){
            $(".orderBtn").addClass("layui-btn-primary");
            $(this).removeClass("layui-btn-primary");
            var index = $(this).index();
            if(index ==1){
                orderCount('week')//本周
            }else if(index == 2){
                orderCount('month')//本月
            }else{
                orderCount('')
            }

        });

    });

   function orderCount(factor){
       $.ajax({
           type:"POST",
           url:"${ctx}/order/getSysOrderCount",
           data:{
               factortNew:factor
           },
           success:function(data){
              $(".fwzCount").html(data.order.columns.fuzCount);
               $(".newCount").html(data.order.columns.newCount);
               $(".ywcCount").html(data.order.columns.ywcCount);

               $(".dshCount").html(data.fitting.columns.dshCount);
               $(".dckCount").html(data.fitting.columns.dckCount);
               $(".ywcfiCount").html(data.fitting.columns.ywcCount);
           }
       });
   }


</script>
</body>
</html>

