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

最新推荐文章于 2023-11-29 11:59:56 发布

小屁孩~~

最新推荐文章于 2023-11-29 11:59:56 发布

阅读量374

点赞数

分类专栏： echarts 页面布局文章标签： echarts-地图

本文链接：https://blog.csdn.net/qq_34495753/article/details/79570465

版权

echarts 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

页面布局

1 篇文章 0 订阅

订阅专栏

页面头部

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<#include '../common/agent_header.html'/><!--导入css-->
<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">&#xe602;</i>
</div>
<div class="site-mobile-shade"></div>

<div class="site-tree-mobile layui-hide">
    <i class="layui-icon">&#xe602;</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> -->
                <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'/><!--导入js-->
<!--一下的js为重要的几个、这里面包括的在agent_footer.html页面中有
<script src="${ctx}/origin/statics/layui/layui.js" charset="utf-8"></script>
<script src="${ctx}/origin/statics/js/Validform_v5.3.2.js" charset="utf-8"></script>
<script src="${ctx}/origin/statics/treetable/script/treeTable/jquery.treeTable.js" charset="utf-8"></script>
<script src="${ctx}/origin/statics/js/doT.js" charset="utf-8"></script>
这里的date.js主要用在时间方面
<script src="${ctx}/origin/statics/js/date.js" charset="utf-8"></script>
-->
<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);
        <!--加载获取数据方法，在页面中进行数据封装在加载echarts画图-->
        initReportOrderAmount(datetime); <!--加载上面include页面中的获取数据方法，-->
         initReportTypeAmount(datetime);<!--加载上面第二个include页面中的获取数据方法，-->
    //年月范围选择器
      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>

小屁孩~~

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
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>
复制链接

扫一扫

专栏目录