{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="margin-bottom: 100px">
 
    <div class="layui-row layui-col-space15">
        
        <div class="layui-col-sm12 flex">
            <div class="flex" style="background:#fff;width:100%;padding:15px">
               <div class="w-i" style="padding:15px 0;">
                  <label class="layui-form-label" style="width:auto">年统计</label>
                  <div class="layui-input-inline">
                    <input  type="text" value="2025" class="layui-input" id="test2" placeholder="yyyy">
                  </div>
                </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="zdd">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="xse">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="ys">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="ys2">0</div>
                    <span class="span">应收账款</span>
                </div>
            </div>
        </div>

      

        <!--表格-->
        <div class="layui-col-sm12">
            <div class="layui-card">
                <div class="layui-card-body">
                    <div class="layui-row">
                        每月销售趋势
                        <div class="layadmin-dataview">
                            <div id="sale-charts" style="width: 100%;height: 100%">
                                <div><i class="layui-icon layui-icon-loading1 layadmin-loading"></i></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        
         <div class="layui-col-sm12">
              <div class="layui-col-sm7">
                   <div class="layui-card" style="margin-right:7px"> 
                     <div class="layui-card-body">
                         <div class="layui-row" style="height:510px;overflow:hidden">
                             <p style="margin-bottom:20px">当月目标完成率</p>
                            <table class="layui-hide" id="table_test"></table>
                         </div>
                      </div>
                    </div>
              </div> 
              <div class="layui-col-sm5"> 
                  <div class="c-i" style="margin-left:7px;">
                       <div class="layui-form" style="width:200px;display:flex;align-items:center;margin-bottom:20px"> 
                        <div style="margin-right:10px;white-space: nowrap;">用户</div> 
                        <select name="search_key"  lay-filter="namechange2">
                            <option value="">所有</option>
                            {volist name="admin" id="vo"}
                            <option value="{$vo.id}">{$vo.name}</option>
                            {/volist}
                        </select> 
                     </div>
                       <div id="c2" 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 class="layui-form" style="width:200px;display:flex;align-items:center;margin-bottom:20px"> 
                        <div style="margin-right:10px;white-space: nowrap;">用户</div> 
                        <select name="search_key"  lay-filter="namechange">
                            <option value="">所有</option>
                            {volist name="admin" id="vo"}
                            <option value="{$vo.id}">{$vo.name}</option>
                            {/volist}
                        </select> 
                     </div>
                  
                     <div id="c1" style="height:100%"> </div> 
                  </div>
              </div> 
              <div class="layui-col-sm6" style="overflow:hidden">
                   <div class="c-i" style="margin-left:7px">
                       <div class="layui-form" style="width:200px;display:flex;align-items:center;margin-bottom:20px"> 
                        <div style="margin-right:10px;white-space: nowrap;">用户</div> 
                        <select name="search_key"  lay-filter="namechange4">
                            <option value="">所有</option>
                            {volist name="admin" id="vo"}
                            <option value="{$vo.id}">{$vo.name}</option>
                            {/volist}
                        </select> 
                     </div>
                     
                        <div class="layui-card"> 
                         <div class="layui-card-body">
                             <div class="layui-row" style="height:510px;overflow:hidden"> 
                                <div  id="c22" style="height:100%;width:100%"></div>
                             </div>
                          </div>
                    </div>
                    </div>
              </div>
        </div>
         
         
        
          <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>
                  
                  <div class="layui-form" style="width:200px;display:flex;align-items:center;margin-bottom:20px;margin:0 10px"> 
                    <div style="margin-right:10px;white-space: nowrap;">用户</div> 
                    <select name="search_key"  lay-filter="namechange3">
                        <option value="">所有</option>
                        {volist name="admin" id="vo"}
                        <option value="{$vo.id}">{$vo.name}</option>
                        {/volist}
                    </select> 
                  </div>
                     
                  <button type="button" class="layui-btn" id="chaxun">查询</button>
                </div>  
            </div>
            
            <div class="flex" style="width:100%;background:#fff">
                <div class="layui-card"  style="width:55%;padding:15px">  
                 <div class="layui-row" style="height:510px;overflow:hidden">
                     <p style="margin-bottom:20px">统计产能服务</p>
                    <table class="layui-hide" id="table_test3"></table>
                 </div> 
                </div>  
                
                <!--t2-->
                <div style="width:50%;height:510px">
                    <div id="t2" style="height:100%">
                        
                    </div>
                </div>
                <!--t2 end-->
            </div>
            
           
        </div>
        
        
         <div class="layui-col-sm12">
              <div class="layui-col-sm6">
                  <div class="c-i" style="margin-right:7px">
                     <div id="c5" style="height:100%"> </div> 
                  </div>
              </div> 
              <div class="layui-col-sm6">
                   <div class="c-i" style="margin-left:7px">
                       <div id="c6" 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 cyear = null
 var table = null
 var admin_id = null
 var admin_id2 = null
 var admin_id3 = null
 var admin_id4 = null
 
 function getrangetime(st =null,et = null){
     $.post('date_range',{st:st,et:et,admin_id:admin_id3},function(e){
         var d = e.data
         
         t2_option.series[0].data = d.yq
         var t2_charts= echarts.init(document.getElementById('t2'));
         t2_charts.setOption(t2_option, true);
         
         c5_option.series[0].data = d.ka
         var c5_charts= echarts.init(document.getElementById('c5'));
         c5_charts.setOption(c5_option, true);
         
         c6_option.yAxis.data = d.ph.name.reverse()
         c6_option.series[0].data = d.ph.value.reverse()
          var c6_charts= echarts.init(document.getElementById('c6'));
         c6_charts.setOption(c6_option, true);
    
           //展示已知数据
          table.render({
            elem: '#table_test3'
            ,cols: [[ //标题栏
              {field: 'index', title: 'ID'}
              ,{field: 'name', title: '姓名'}
              ,{field: 'value', title: '新增产能'}
              ,{field: 'fw', title: '服务产能'}
              ,{field: 'sy', title: '剩余产能'} 
              ,{field: 'value', title: '总产能'} 
              ,{field: 'yc', title: '异常'}
               ,{field: 'js', title: '加时'}
               ,{field: 'bx', title: '报销'}
            ]]
            ,data: d.cn
            //,skin: 'line' //表格风格
            ,even: true 
          });
     })
    
 } 
 
 $('#chaxun').click(function(){
     var st = $('#test3').val()
     var et = $('#test4').val()
     
     getrangetime(st,et);
     
 })
 
 var c5_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 c6_option  = {
      title: {
        text: '销量排行'
      },
       tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      legend: {},
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        type: 'value',
        boundaryGap: [0, 0.01]
      },
      yAxis: {
          show:true,
        type: 'category',
        data: ['', '', '', '', '', '']
      },
      series: [
        { 
          type: 'bar',
          data: [0, 0, 0, 0, 0, 0]
        }
      ]
    };
        
   
    

    var t2_option  = {
          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: '总订单量' },
                { value: 0, name: '服务量' },
                { value: 0, name: '剩余量' },
                { value: 0, name: '报销数量' },
                { value: 0, name: '加时数量' }
              ]
            }
          ]
    };
    
   
    var c1_option = {
      title: {
        text: '年销量情况', 
        left: 'center'
      },
      tooltip: {
        trigger: 'item'
      },
      legend: {
        orient: 'vertical',
        left: 'left'
      },
      series: [
        { 
          type: 'pie',
          radius: '50%',
          data: [
            { value: 1048, name: '年卡销量' },
            { value: 735, name: '次卡销量' },
            { value: 580, name: '单次服务' },
            { value: 484, name: '其它服务' }, 
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    };
    
    
    
    
    var c2_option  = {
         title: {
            text: '客户渠道分析', 
            left: 'center'
          },
          tooltip: {
            trigger: 'item'
          },
        //   legend: {
        //     top: '5%',
        //     left: 'center'
        //   },
          series: [
            { 
              type: 'pie',
              radius: ['40%', '70%'],
              avoidLabelOverlap: false,
              label: {
                show: true,
                position: 'outside'
              }, 
              labelLine: {
                show: true
              },
              data: [
                { value: 0, name: '' },
                { value: 0, name: '' },
                { value: 0, name: '' },
                { value: 0, name: '' }, 
              ]
            }
          ]
    };
    
     var c22_option  = {
         title: {
            text: '客户渠道分析', 
            left: 'center'
          },
          tooltip: {
            trigger: 'item'
          },
        //   legend: {
        //     top: '5%',
        //     left: 'center'
        //   },
          series: [
            { 
              type: 'pie',
              radius: ['40%', '70%'],
              avoidLabelOverlap: false,
              label: {
                show: true,
                position: 'outside'
              }, 
              labelLine: {
                show: true
              },
              data: [
                { value: 0, name: '' },
                { value: 0, name: '' },
                { value: 0, name: '' },
                { value: 0, name: '' }, 
              ]
            }
          ]
    };
        
     
    
    layui.config({
        version:"{$front_version}",
        base: '/static/plug/layui-admin/dist/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'like','form','element','laydate','table'], function () {
        var $ = layui.$
            ,like = layui.like 
        var laydate = layui.laydate;
        var dropdown = layui.dropdown
        var form = layui.form
        
        table = layui.table;
        
        getyear()
        getrangetime()
        
        
        form.on('select(namechange)', function(data){ 
            admin_id = data.value
           getyear(cyear) 
        });
        
        
        form.on('select(namechange2)', function(data){ 
            admin_id2 = data.value
           getyear(cyear) 
        });
        
        form.on('select(namechange3)', function(data){ 
            admin_id3 = data.value 
        });
        
        form.on('select(namechange4)', function(data){ 
            admin_id4 = data.value 
             getyear(cyear) 
        });
 
  
 
 
  
  var sale_option  = {
      xAxis: {
        type: 'category',
        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月','8月','9月','10','11月','12月']
      },
      yAxis: {
        type: 'value'
      },
       tooltip: {
        trigger: 'axis'
      },
        legend: {
        data: ['销售额', '应收', '已收',]
      },
      series: [
          
        {
             name: '销售额',
          data: [ 0, 0,0, 0,0, 0,0, 0,0, 0,0, 0 ],
          type: 'line', 
        },
        {
             name: '应收',
          data:[ 0, 0,0, 0,0, 0,0, 0,0, 0,0, 0 ],
          type: 'line', 
        },
        {
            name: '已收',
          data: [ 0, 0,0, 0,0, 0,0, 0,0, 0,0, 0 ],
          type: 'line', 
        }
      ]
    };
  
  function getyear(year = null){
         $.post('finance_chart',{date:year,admin_id:admin_id,admin_id2:admin_id2,admin_id4:admin_id4},function(e){
             var d = e.data
             $('#zdd').html(d.zdd) 
             $('#xse').html(d.xse)
             $('#ys').html(d.ys)
             $('#ys2').html(d.ys2)
            
             sale_option.series[0].data = d.xse_ys.xse
             sale_option.series[1].data = d.xse_ys.ys
             sale_option.series[2].data = d.xse_ys.ys2
             var sale_charts= echarts.init(document.getElementById('sale-charts'));
             sale_charts.setOption(sale_option, true);
             
             c2_option.series[0].data = d.qd
             var c2_charts= echarts.init(document.getElementById('c2'));
             c2_charts.setOption(c2_option, true);
             
             c22_option.series[0].data = d.qd2
             var c22_charts= echarts.init(document.getElementById('c22'));
             c22_charts.setOption(c22_option, true);
             console.log(c22_option,document.getElementById('c22'))
             
             c1_option.series[0].data = d.ka
             var c1_charts= echarts.init(document.getElementById('c1'));
             c1_charts.setOption(c1_option, true);
             
             //当月目标完成率
              //展示已知数据
              table.render({
                elem: '#table_test'
                ,cols: [[ //标题栏
                  {field: 'index', title: '排行', width: 80, sort: true}
                  ,{field: 'name', title: '业务员'}
                  ,{field: 'mb', title: '月目标（元）'}
                  ,{field: 'price', title: '已成交(元)'}
                  ,{field: 'lv', title: '完成率（%）'} 
                  ,{field: 'num', title: '已成交（单）'} 
                ]]
                ,data: d.ymb 
                ,even: true 
              });
              //end
         })
}


        //年选择器
      laydate.render({
        elem: '#test2'
        ,type: 'year'
         ,done: function(value, date){ 
             cyear = value
             getyear(value) 
        }
      });
      
        //年选择器
      laydate.render({
        elem: '#test3' 
      });
       laydate.render({
        elem: '#test4' 
      });
      
      //初演示
      form.render('select');
  

        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>