{layout name="layout1" /}
<style>
     .flex{
         display: flex;
         align-items: center;
     }
    .flexc{
         display: flex;
         align-items: center;
         justify-content: center;
    }
    .t1{
        background: #4A70F4;
    }
    .t2{
         background: #F6A23F;
    }
    .t3{
         background: #6DD047;
    }
    .t4{
         background: #F07AAF;
    }
    .t-i{
        background: #fff;
        padding:20px 15px;
    }
    .t-i-img{
         width: 50px;
        height: 50px;
        border-radius: 50%;
        margin-right: 20px;
    }
    .t-i-img img{
        width: 30px;
        height: 30px;
    }
    .h2{
        font-weight: bold;
        font-size: 28px;
        color: #000;
    }
    .span{
        color: #666;
        font-size: 12px;
    }
    .c-i{
        background: #fff;
        padding: 15px;
        height: 500px;
    }
    
</style>
<div class="layui-fluid" style="">
 
    <div class="layui-row layui-col-space15">
        
         <div class="layui-col-sm12">
            <div class="flex" style="background:#fff;width:100%;padding:15px">
               <div class="w-i" style="padding:15px 0;display:flex"> 
                  <div class="layui-input-inline">
                    <input  type="text" value="{$st}" class="layui-input" id="test3" placeholder="yyyy">
                  </div>
                  -
                  <div class="layui-input-inline">
                    <input  type="text" value="{$et}" class="layui-input" id="test4" placeholder="yyyy">
                  </div>
                  
             
                     
                  <button type="button" class="layui-btn" id="chaxun">查询</button>
                </div>  
            </div>
        </div>
    
    
        <div class="layui-col-sm3">
            <div class="t-i flex">
                <div class="t-i-img flexc t1">
                    <img src="/img/chart/t1.png" alt="" />
                </div>
                <div>
                    <div class="h2" id="fwzl">0</div>
                    <span class="span">服务总量</span>
                </div>
            </div>
        </div>
        <div class="layui-col-sm3 ">
             <div class="t-i flex">
                <div class="t-i-img flexc t2">
                    <img src="/img/chart/t1.png" alt="" />
                </div>
                <div>
                    <div class="h2" id="yfwl">0</div>
                    <span class="span">已服务量</span>
                </div>
            </div>
        </div>
        <div class="layui-col-sm3 ">
            <div class="t-i flex">
                <div class="t-i-img flexc t3">
                    <img src="/img/chart/t1.png" alt="" />
                </div>
                <div>
                    <div class="h2" id="wpdl">0</div>
                    <span class="span">未派单量</span>
                </div>
            </div>
        </div>
        <div class="layui-col-sm3 ">
             <div class="t-i flex">
                <div class="t-i-img flexc t4">
                    <img src="/img/chart/t1.png" alt="" />
                </div>
                <div>
                    <div class="h2" id="sycs">0</div>
                    <span class="span">剩余次数</span>
                </div>
            </div>
        </div>
        

      
      
        <div class="layui-col-sm12">
              <div class="layui-col-sm6">
                  <div class="c-i" style="margin-right:7px">
                     <div id="b1" style="height:100%"> </div> 
                  </div>
              </div> 
             <div class="layui-col-sm6">
                  <div class="c-i" style="margin-right:7px">
                     <div id="b2" style="height:100%"> </div> 
                  </div>
              </div> 
        </div>
        
        <div class="layui-col-sm12">
              <div class="layui-col-sm6">
                  <div class="c-i" style="margin-right:7px">
                     <div id="b3" style="height:100%"> </div> 
                  </div>
              </div> 
             <div class="layui-col-sm6">
                  <div class="c-i" style="margin-right:7px">
                     <div id="b4" style="height:100%"> </div> 
                  </div>
              </div> 
        </div>


 


        <div class="layui-col-sm12">
              <!--<div class="layui-col-sm6">-->
              <!--    <div class="c-i" style="margin-right:7px">-->
              <!--       <div id="c1" style="height:100%"> </div> -->
              <!--    </div>-->
              <!--</div> -->
              <div class="layui-col-sm6">
                   <div class="c-i" style="margin-left:7px">
                       <div id="c2" style="height:100%"> </div>  
                    </div>
              </div>
        </div>

    </div>
</div> 
<script type="text/javascript" charset="utf-8" src="/static/webjs/echarts.js"></script>
<script type="text/javascript" charset="utf-8" src="/static/webjs/jquery.min.js"></script>
<script>
     var b1_option = {
      title: {
        text: '服务总订单', 
        left: 'center'
      },
      tooltip: {
        trigger: 'item'
      },
      legend: {
        orient: 'vertical',
        left: 'left'
      },
      series: [
        { 
          type: 'pie',
          radius: '50%',
          data: [
            { value: 0, name: '' },
            { value: 0, name: '' },
            { value: 0, name: '' },
            { value: 0, name: '' },
            { value: 0, name: '' }
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    };
    
   
    var b2_option = {
      title: {
        text: '已服务完成订单', 
        left: 'center'
      },
      tooltip: {
        trigger: 'item'
      },
      legend: {
        orient: 'vertical',
        left: 'left'
      },
      series: [
        { 
          type: 'pie',
          radius: '50%',
          data: [
            { value: 0, name: '' },
            { value: 0, name: '' },
            { value: 0, name: '' },
            { value: 0, name: '' },
            { value: 0, name: '' }
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    };
    
    
    
    
    var b3_option = {
     title: {
        text: '保洁师服务质量', 
        left: 'center'
      },
      tooltip: {
        trigger: 'item'
      },
      legend: {
        top: '5%',
        left: 'center'
      },
      series: [
        { 
          type: 'pie',
          radius: ['40%', '70%'],
          avoidLabelOverlap: false,
          padAngle: 5,
          itemStyle: {
            borderRadius: 10
          },
          label: {
            show: false,
            position: 'center'
          },
          emphasis: {
            label: {
              show: true,
              fontSize: 40,
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: false
          },
          data: [
            { value: 1048, name: '服务非常好' },
            { value: 735, name: '服务一般' },
            { value: 580, name: '服务较差' },
            { value: 484, name: '非常差' }, 
          ]
        }
      ]
    };
    
    var b3_charts= echarts.init(document.getElementById('b3'));
    b3_charts.setOption(b3_option, true);
    
    var b4_option = {
      title: {
        text: '未消耗订单量', 
        left: 'center'
      },
      tooltip: {
        trigger: 'item', 
      },  
      series: [ 
        { 
          type: 'pie',
          radius: [20, 140],
          center: ['50%', '50%'],
          roseType: 'area',
          itemStyle: {
            borderRadius: 5
          },
          data: [
            { value: 0, name: '' },
            { value: 0, name: '' },
            { value: 0, name: '' },
            { value: 0, name: '' },
            { value: 0, name: '' }, 
          ]
        }
      ]
    };
    
   

    var sale_option  = {
         tooltip: {
        trigger: 'item'
      },
      legend: {
        orient: 'vertical',
        left: 'left'
      },
      xAxis: {
        type: 'category',
        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月','8月','9月','10','11月','12月']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: [0,0,0,0,0,0,0,0,0,0,0,0],
          type: 'bar'
        }
      ]
    };
   
    // var c1_option = {
    //   title: {
    //     text: '未消耗订单', 
    //     left: 'center'
    //   },
    //   tooltip: {
    //     trigger: 'item'
    //   },
    //   legend: {
    //     orient: 'vertical',
    //     left: 'left'
    //   },
    //   series: [
    //     { 
    //       type: 'pie',
    //       radius: '50%',
    //       data: [
    //         { value: 0, name: '' },
    //         { value: 0, name: '' },
    //         { value: 0, name: '' },
    //         { value: 0, name: '' },
    //         { value: 0, name: '' }
    //       ],
    //       emphasis: {
    //         itemStyle: {
    //           shadowBlur: 10,
    //           shadowOffsetX: 0,
    //           shadowColor: 'rgba(0, 0, 0, 0.5)'
    //         }
    //       }
    //     }
    //   ]
    // };
    
    // var c1_charts= echarts.init(document.getElementById('c1'));
    // c1_charts.setOption(c1_option, true);
    
    
    var c2_option  = {
     title: {
        text: '年卡低于3次/次卡低于2次', 
        left: 'center'
      },
      tooltip: {
        trigger: 'item'
      },
      legend: {
        top: '5%',
        left: 'center'
      },
      series: [
        { 
          type: 'pie',
          radius: ['40%', '70%'],
          center: ['50%', '70%'],
          // adjust the start and end angle
          startAngle: 180,
          endAngle: 360,
          data: [
            { value: 0, name: '年卡低于3次' },
            { value: 0, name: '次卡低于2次' }, 
          ]
        }
      ]
    };
        
    
     $('#chaxun').click(function(){
         var st = $('#test3').val()
         var et = $('#test4').val()
         
         getyear(st,et);
         
     })
    
    
    function getyear(st,et){
         $.post('orderexe_chart',{st:st,et:et},function(e){
             var d = e.data
             $('#fwzl').html(d.fwzl) 
             $('#yfwl').html(d.yfwl)
             $('#wpdl').html(d.wpdl)
             $('#sycs').html(d.sycs)
                
            b1_option.series[0].data = d.fwqd
             var b1_charts= echarts.init(document.getElementById('b1'));
            b1_charts.setOption(b1_option, true);
            
            b2_option.series[0].data = d.yfw
            var b2_charts= echarts.init(document.getElementById('b2'));
            b2_charts.setOption(b2_option, true);
            
            b4_option.series[0].data = d.wxh
            var b4_charts= echarts.init(document.getElementById('b4'));
            b4_charts.setOption(b4_option, true);
            
            
            c2_option.series[0].data = d.cn
            var c2_charts= echarts.init(document.getElementById('c2'));
            c2_charts.setOption(c2_option, true);
        
             
         })
    }
    getyear()
    
    layui.config({
        version:"{$front_version}",
        base: '/static/plug/layui-admin/dist/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'like','form','element','laydate'], function () {
        var $ = layui.$
            ,like = layui.like 
        var laydate = layui.laydate;
        
        //年选择器
      laydate.render({
        elem: '#test3' 
         ,done: function(value, date){ 
            
        }
      });
      //年选择器
      laydate.render({
        elem: '#test4' 
         ,done: function(value, date){ 
         
        }
      });
  

        let bgColor = "#fff";
        let color = [
            "#0090FF",
            "#36CE9E",
            "#FFC005",
            "#FF515A",
            "#8B5CFF",
            "#00CA69"
        ];
        const hexToRgba = (hex, opacity) => {
            let rgbaColor = "";
            let reg = /^#[\da-f]{6}$/i;
            if (reg.test(hex)) {
                rgbaColor = `rgba(${parseInt("0x" + hex.slice(1, 3))},${parseInt(
                    "0x" + hex.slice(3, 5)
                )},${parseInt("0x" + hex.slice(5, 7))},${opacity})`;
            }
            return rgbaColor;
        }



        like.ajax({
            url: '{:url("index/stat")}',
            type: "get",
            success: function (res) {
                
                var dates = res.data.dates,
                    echarts_order_amount  = res.data.echarts_order_amount,
                    echarts_user_visit = res.data.echarts_user_visit;

               

                var user_option = {
                    backgroundColor: bgColor,
                    color: color,
                    legend: {
                        right: 10,
                        top: 10
                    },
                    tooltip: {
                        trigger: "axis",
                        formatter: function(params) {
                            let html = '';
                            params.forEach(v => {
                                html += `<div style="color: #666;font-size: 14px;line-height: 24px">
                <span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${color[v.componentIndex]};"></span>
                ${v.name}
                <span style="color:${color[v.componentIndex]};font-weight:700;font-size: 18px">${v.value}</span>
                人`;
                            })
                            return html
                        },
                        extraCssText: 'background: #fff; border-radius: 0;box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);color: #333;',
                        axisPointer: {
                            type: 'shadow',
                            shadowStyle: {
                                color: '#ffffff',
                                shadowColor: 'rgba(225,225,225,1)',
                                shadowBlur: 5
                            }
                        }
                    },
                    grid: {
                        top: 100,
                        containLabel: true
                    },
                    xAxis: [{
                        type: "category",
                        boundaryGap: false,
                        axisLabel: {
                            formatter: '{value}',
                            textStyle: {
                                color: "#333"
                            }
                        },
                        axisLine: {
                            lineStyle: {
                                color: "#D9D9D9"
                            }
                        },
                        data: dates
                    }],
                    yAxis: [{
                        type: "value",
                        name: '用户访问量',
                        axisLabel: {
                            textStyle: {
                                color: "#666"
                            }
                        },
                        nameTextStyle: {
                            color: "#666",
                            fontSize: 12,
                            lineHeight: 40
                        },
                        splitLine: {
                            lineStyle: {
                                type: "dashed",
                                color: "#E9E9E9"
                            }
                        },
                        axisLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        }
                    }],
                    series: [{
                        type: "line",
                        smooth: true,
                        symbolSize: 8,
                        zlevel: 3,
                        lineStyle: {
                            normal: {
                                color: color[0],
                                shadowBlur: 3,
                                shadowColor: hexToRgba(color[0], 0.5),
                                shadowOffsetY: 8
                            }
                        },
                        areaStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(
                                    0,
                                    0,
                                    0,
                                    1,
                                    [{
                                        offset: 0,
                                        color: hexToRgba(color[0], 0.3)
                                    },
                                        {
                                            offset: 1,
                                            color: hexToRgba(color[0], 0.1)
                                        }
                                    ],
                                    false
                                ),
                                shadowColor: hexToRgba(color[0], 0.1),
                                shadowBlur: 10
                            }
                        },
                        data: echarts_user_visit
                    }]
                };


                

                

            }
        });




    });
</script>