页面头部
<!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"></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> -->
<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>