统计图页面头部对时间、状态判断查询数据

短命女 2021-09-23 01:58 142阅读 0赞

> 页面头部

<!DOCTYPE html>
    <html>
    <meta charset="utf-8">
    <head>
    <#include '../common/agent_header.html'/>
    <link href="${ctx}/origin/statics/layui/res/css/global.css"
        rel="stylesheet">
    </head>
    
    <#include '../common/order_head.html'/>
    
    <div class="site-tree-mobile layui-hide">
        <i class="layui-icon"></i>
    </div>
    <div class="site-mobile-shade"></div>
    
    <div class="site-tree-mobile layui-hide">
        <i class="layui-icon"></i>
    </div>
    <div class="site-mobile-shade"></div>
    
    
    <div class="fly-panel fly-panel-user" pad20>
        <div class="layui-tab layui-tab-brief">
            <div id="header" class="layui-form layui-form-item">
                <div class="layui-input-inline">
                    <select id="chosen-select" lay-filter="ship_status"
                        class="ship_status">
                        <option value="0">未发货</option>
                        <option value="1" selected="">已发货</option>
                    </select>
                </div>
                <div class="layui-input-inline">
                    <select name="" lay-filter="type" class="type">
                        <option value="1" selected="">按日统计</option>
                        <option value="2">按月统计</option>
                        <option value="3">按年统计</option>
                    </select>
                </div>
                <div class="layui-input-inline month">
                    <div class="layui-input-inline">
                        <input type="text" class="layui-input" id="yearmonth"
                            placeholder="yyyy-MM">
                    </div>
                </div>
                <div class="layui-input-inline date">
                    <div class="layui-input-inline">
                        <input type="text" class="layui-input" id="yearmonthday"
                            placeholder="yyyy-MM-dd">
                    </div>
                </div>
            </div>
            <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                <ul class="layui-tab-title">
                    <li class="layui-this">企业订单总金额统计</li>
                    
                    <li>订单种类总金额统计</li>
                </ul>
                <div class="layui-tab-content">
                    
                    <div class="layui-tab-item layui-show">
                        <#include '../chart/orderAmountCount.html'/>
                    </div>
                    
                    <div class="layui-tab-item">
                        <#include '../chart/orderTypeAmountCount.html'/>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
    
    <#include '/common/agent_footer.html'/>
    
    <script src="${ctx}/origin/statics/echarts/echarts.min.js"></script>
    
    <script>
    layui.cache.page = 'user';
    layui.cache.user = {
      username: '游客'
      ,uid: -1
      ,avatar: '../../res/images/avatar/00.jpg'
      ,experience: 83
      ,sex: '男'
    };
    layui.config({
      version: "3.0.0"
      ,base: '${ctx}/origin/statics/layui/res/mods/'
    }).extend({
      fly: 'index'
    }).use('fly'); 
    
    </script>
    
    <script>
        var prefix = "${ctx}/agent/orderCount/";
        layui.use(['element','form','laydate'], function(){
            var $ = layui.jquery
            var element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块
            var form = layui.form;
            var laydate = layui.laydate;
    
            var datetime = Date.today().add(-30).days().toString("yyyy-MM-dd")+" - "+Date.today().toString("yyyy-MM-dd");
            var yearmonth = Date.today().add(-12).month().toString("yyyy-MM")+" - "+Date.today().toString("yyyy-MM");
    
            $("#yearmonthday").val(datetime);
            
            initReportOrderAmount(datetime); 
             initReportTypeAmount(datetime);
        //年月范围选择器
          laydate.render({
            elem: '#yearmonth'
            ,type: 'month'
            ,theme: 'molv'
            ,range: true
            ,done: function(value, date, endDate){
                initReportOrderAmount(value);
                initReportTypeAmount(value);
              }
          });
        //年月日选择器
          laydate.render({
            elem: '#yearmonthday'
            ,type:'date'
            ,theme: 'molv'
            ,calendar: true
            ,range: true
            ,done: function(value, date, endDate){
                initReportOrderAmount(value);
                initReportTypeAmount(value);
              }
          });
    
          form.on('select(ship_status)', function(data){
              var datetime;
              if(!$("#yearmonthday").is(":hidden")){
                  datetime = $("#yearmonthday").val();
              }
              if(!$("#yearmonth").is(":hidden")){
                  datetime = $("#yearmonth").val();
              }
              initReportOrderAmount(datetime);
              initReportTypeAmount(datetime);
         });
    
          $(".month").hide();//默认隐藏
          form.on('select(type)', function(data){
              var val = data.value;
              switch(parseInt(val)){
              case 1:
                  $(".date").show();
                  $(".month").hide();
                  $("#yearmonthday").val(datetime);
                  initReportOrderAmount(datetime);
                  initReportTypeAmount(datetime);
                break;
              case 2:
                  $(".date").hide();
                  $(".month").show();
                  $("#yearmonth").val(yearmonth);
                  initReportOrderAmount(yearmonth); 
                  initReportTypeAmount(yearmonth); 
                break;
              case 3:
                  $(".date , .month").hide();
                  var type = $(".type option:selected").val();
                  initReportOrderAmount(null);
                  initReportTypeAmount(null);
                break;
              }
         });
    
        });
    </script>
    </body>
    </html>