<#include "incloud/header.ftl"/>
<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring4-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
	<@header>
	</@header>
     <style>
     	.top_tiles{
     		width: 100%;
     		display: flex;
     		height: 130px;
     		/*background: bisque;*/
     		margin: 0 auto;
     		justify-content: space-between;
     		text-align: left;
     	}
     	.one{
     		width: 20%;
     		height: 120px;
     		border-radius: 0.5rem;
     		color:white;
     		padding: 1rem 1.5rem;
     	}
     	.container{
     		display: flex;
     		width: 100%;
     		margin: 0 auto;
     		justify-content: space-between;
     		flex-wrap: wrap;
     		text-align: center;
     	}
     	.two{
     		width: 750px;
     		height: 400px;
     		background: #fff;
     		margin-bottom: 50px;
     		border-radius: 0.5rem;
     	}
		 .container:before{
			 display: table;
			 content: none;
		 }
     </style>
	<body class="hold-transition skin-blue sidebar-mini">
		<@top>
		</@top>
		<@left>
		</@left>
		<div class="wrapper" id="app">
			<!-- Content Wrapper. Contains page content -->
			<div class="content-wrapper">
				<!-- Content Header (Page header) -->
				<!-- Main content -->
				<section class="container-fluid">
				<div class=" content">
						<h3>门票统计</h3>
						<div class="top_tiles">
							<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 statistics-article one" data-key="articleCount" style="background: #2d97ef;">
								<div class="tile-stats statistics-box">
									<h4>昨日门票订单总量</h4>
									<div class="count" id="serviceAll"></div>
								</div>
							</div>

							<div class=" statistics-tag one" data-key="tagCount" style="background: #1ec2e7;">
								<div class="tile-stats statistics-box">
									<h4>今日门票订单总量</h4>
									<div class="count" id="service"></div>
								</div>
							</div>

							<div class=" statistics-type one" data-key="typeCount" style="background: #48dec5;">
								<div class="tile-stats statistics-box">
									<h4>昨日门票销售总金额</h4>
									<div class="count" id="userCount"></div>
								</div>
							</div>

							<div class="statistics-comment one" data-key="commentCount" style="background: #657cec;">
								<div class="tile-stats statistics-box">
									<h4>今日门票销售总金额</h4>
									<div class="count" id="adminCount"></div>
								</div>
							</div>

						</div>
					</div>
                
				<div class="container">
						<!-- 时段统计 -->
						<div class="two" style="margin-right: 403px;">
							<div class="x_panel fixed_height_345 statistics-box">
								<div class="x_title">
									<h3 style="text-align: left;margin-left: 15px;">时段统计</h3>
									<div class="orderTime" style="margin-left: 351px;">
										<el-form :inline="true" :model="con" class="demo-form-inline">
											<el-date-picker v-model="con.times" type="date" placeholder="选择日期">
											</el-date-picker>
											<el-form-item>
												<el-button type="primary" @click="day()">查询</el-button>
											</el-form-item>
										</el-form>
									</div>
								</div>
								<div class="x_content">
									<div id="echart_type_1" style="height: 275px;" class="col-md-10 col-sm-4"></div>
								</div>
							</div>
						</div>
						<!-- 订单统计 -->
						<div class="two">
							<div class="x_panel fixed_height_345 statistics-box">
								<div class="x_title">
									<h3 style="text-align: left;margin-left: 15px;">订单统计</h3>
									<div class="orderTime" style="float: right;margin-right: 54px;">
										<el-form :inline="true" :model="con" class="demo-form-inline">
											<el-date-picker v-model="con.times2" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
											</el-date-picker>
											<el-form-item>
												<el-button type="primary" @click="order()">查询</el-button>
											</el-form-item>
										</el-form>
									</div>
								</div>
								<div class="x_content">
									<div class="col-md-2 col-sm-4">
										<span style="font-size: 16px; display:block; margin-top: 30px;">本月订单总数</span>
										<span id="mouthSum_2" style="font-size: 20px; font-weight: bold; display:bloc;"></span>
										<span id="mouth_2"style="font-size: 20px; display:block"></span>
										<span style="margin-bottom: 30px;">同比上月</span>
										<span style="font-size: 16px; display:block; margin-top: 30px;">本周订单总数</span>
										<span id="weekSum_2" style="font-size: 20px; font-weight: bold; display:block;"></span>
										<span id="week_2" style="font-size: 20px; font-weight: bold; display:block;"></span>
										<span>同比上周</span>
									</div>
									<div id="echart_type_2" style="height: 275px;" class="col-md-10 col-sm-4"></div>
								</div>
							</div>
						</div>
						<!-- 销售统计 -->
						<div class=" two">

							<div class="x_panel fixed_height_345 statistics-box">
								<div class="x_title">
									<h3 style="text-align: left;margin-left: 15px;">销售统计</h3>
									<div class="orderTime" style="float: right;margin-right: 54px;">
										<el-form :inline="true" :model="con" class="demo-form-inline">
											<el-date-picker v-model="con.times3" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
											</el-date-picker>
											<el-form-item>
												<el-button type="primary" @click="price()">查询</el-button>
											</el-form-item>
										</el-form>
									</div>
								</div>
								<div class="x_content">
									<div class="col-md-2 col-sm-4">
										<span style="font-size: 16px; display:block; margin-top: 30px;">本月销售总数</span>
										<span id="mouthSum_3" style="font-size: 20px; font-weight: bold; display:block;"></span>
										<span id="mouth_3" style="font-size: 20px; display:block"></span>
										<span>同比上月</span>
										<span style="font-size: 16px; display:block; margin-top: 30px;">本周销售总数</span>
										<span id="weekSum_3" style="font-size: 20px; font-weight: bold; display:block;"></span>
										<span id="week_3" style="font-size: 20px; display:block"></span>
										<span>同比上周</span>
									</div>
									<div class="col-md-10 col-sm-4" id="echart_type_3" style="height: 275px;"></div>
								</div>
							</div>
						</div>
					</div>
				</section>
			</div>
			<!-- Main Footer -->
			<@footer>
			</@footer>
		</div>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.1.0/echarts.min.js"></script>
		<script src="/js/util/dyAjax.js"></script>
		<script type="text/javascript">
			var option1, option2, option3;
			var option = {
				mixins: [dyMixin],
				data() {
					return {
						con: {
						},
						myChart1: null,
						myChart2: null,
						myChart3: null,
					}
				},
				mounted: function() {
					this.title();
					this.day();
					this.order();
					this.price();
				},
				methods: {
					title() {
						var _this = this;
						$.dyAjax('/orders/getTile', this.con, function(json) {
							map = json.data;
							console.log(map);
							$("#serviceAll").html("<h3>" + map.sum1 + "</h3>");
							$("#service").html("<h3>" + map.sum2 + "</h3>");
							$("#mouth_1").html(map.sum2);
							$("#week_1").html(map.sum1);
							if(map.sumPrice1>=10000){
                                $("#userCount").html("<h3>" + (map.sumPrice1/10000).toFixed(2)+"万元</h3>");
							}else {
                                $("#userCount").html("<h3>" + map.sumPrice1 + "元</h3>");
							}

                            if(map.sumPrice2>=10000){
                                $("#adminCount").html("<h3>" + (map.sumPrice2/10000).toFixed(2)+"万元</h3>");
                            }else {
                                $("#adminCount").html("<h3>" + map.sumPrice2 + "元</h3>");
                            }

						});
					},
					day() {
						var _this = this;
						console.log(this.con);
						if(this.con.times != null && this.con.times != ''){
							this.con.times = this.con.times.getFullYear() + '-' + 
							(this.con.times.getMonth() + 1) + '-' + this.con.times.getDate() + ' ' + 
							this.con.times.getHours() + ':' + this.con.times.getMinutes() + ':' + this.con.times.getSeconds();
						}
						$.ajax({
							type: "POST",
							url: "/orders/getHour",
							data: this.con,
							dataType: "json",
							async: false,
							success: function(json) {
								map = json.data;
								console.log(map);
							}
						});
						var myChart1 = echarts.init(document.getElementById('echart_type_1'));
						option1 = {
							xAxis: {
								type: 'category',
								boundaryGap: false,
								data: ['6', '7', '8', '9', '10', '11', '12', '13', '14',
									'15', '16', '17', '18', '19', '20', '21', '22', '23',
									'24'
								],
								axisLine: {
									lineStyle: {
										color: '#0087ED',
										width: 1, //这里是为了突出显示加上的  
									}
								}
							},
							tooltip: {
								trigger: 'axis',
								axisPointer: {
									type: 'cross',
									label: {
										backgroundColor: '#6a7985'
									}
								}
							},
							yAxis: {
								type: 'value',
								axisLine: {
									lineStyle: {
										color: '#0087ED',
										width: 1, //这里是为了突出显示加上的  
									}
								}
							},
							series: [{
								data: map,
								type: 'line',
								smooth: true,
								areaStyle: {},
								color: {
									type: 'linear',
									x: 0,
									y: 0,
									x2: 0,
									y2: 1,
									colorStops: [{
										offset: 0,
										color: '#0087ED' // 0% 处的颜色
									}, {
										offset: 1,
										color: '#0087ED' // 100% 处的颜色
									}],
									global: false
									// 缺省为 false
								}
							}]
						};
						myChart1.setOption(option1);
					},
					order() {
						var _this = this;
						if(this.con.times2 != null && this.con.times2 != '') {
							var date1 = new Date(this.con.times2[0]);
							var date2 = new Date(this.con.times2[1]);

							this.con.startTime = date1.getFullYear() + '-' + (date1.getMonth() + 1) + '-' + date1.getDate() + ' ' + date1.getHours() + ':' + date1.getMinutes() + ':' + date1.getSeconds();
							this.con.endTime = date2.getFullYear() + '-' + (date2.getMonth() + 1) + '-' + date2.getDate() + ' ' + date2.getHours() + ':' + date2.getMinutes() + ':' + date2.getSeconds();
						} else {
							this.con.startTime = "";
							this.con.endTime = "";
						}
						$.ajax({
							type: "POST",
							url: "/orders/getOrdersNum",
							data: this.con,
							dataType: "json",
							async: false,
							success: function(json) {
								map = json.data;
								console.log(map);
								$("#mouthSum_2").html(map.rateMouthSum);
								if(map.rateMouth < 1 && map.rateMouth != 0) {
									$("#mouth_2").html(
										(map.rateMouth/1).toFixed(2) + "%<br/><span style='color:green;'>↓</span>");
								} else {
									$("#mouth_2").html((map.rateMouth/1).toFixed(2) + "%<span style='color:red;'>↑</span>");
								}
								if(map.rateWeek < 1 && map.rateWeek != 0) {
									$("#week_2").html(
										(map.rateWeek/1).toFixed(2) + "%<span style='color:green;'>↓</span>");
								} else {
									$("#week_2").html((map.rateWeek/1).toFixed(2) + "%<span style='color:red;'>↑</span>");
								}
								$("#weekSum_2").html(map.rateWeekSum);
							}
						});
						var myChart2 = echarts.init(document.getElementById('echart_type_2'));
						// 指定图表的配置项和数据
						option2 = {
							xAxis: {
								type: 'category',
								boundaryGap: false,
								data: map.dayList,
								axisLine: {
									lineStyle: {
										color: '#0087ED',
										width: 1, //这里是为了突出显示加上的  
									}
								}
							},
							tooltip: {
								trigger: 'axis',
								axisPointer: {
									type: 'cross',
									label: {
										backgroundColor: '#6a7985'
									}
								}
							},
							yAxis: {
								type: 'value',
								axisLine: {
									lineStyle: {
										color: '#0087ED',
										width: 1, //这里是为了突出显示加上的  
									}
								}
							},
							series: [{
								data: map.dayNum,
								type: 'line',
								smooth: true,
								areaStyle: {},
								color: {
									type: 'linear',
									x: 0,
									y: 0,
									x2: 0,
									y2: 1,
									colorStops: [{
										offset: 0,
										color: '#0087ED' // 0% 处的颜色
									}, {
										offset: 1,
										color: '#0087ED' // 100% 处的颜色
									}],
									global: false
									// 缺省为 false
								}
							}]
						};
						myChart2.setOption(option2);
					},
					price: function() {
						var _this = this;
						if(this.con.times3 != null && this.con.times3 != '') {
							var date1 = new Date(this.con.times3[0]);
							var date2 = new Date(this.con.times3[1]);

							this.con.startTime = date1.getFullYear() + '-' + (date1.getMonth() + 1) + '-' + date1.getDate() + ' ' + date1.getHours() + ':' + date1.getMinutes() + ':' + date1.getSeconds();
							this.con.endTime = date2.getFullYear() + '-' + (date2.getMonth() + 1) + '-' + date2.getDate() + ' ' + date2.getHours() + ':' + date2.getMinutes() + ':' + date2.getSeconds();
						} else {
							this.con.startTime = "";
							this.con.endTime = "";
						}
						var map;
						$.ajax({
							type: "POST",
							url: "/orders/getOrdersMoney",
							data: this.con,
							dataType: "json",
							async: false,
							success: function(json) {
								map = json.data;
								console.log(map);
								if(map.rateMouth < 1 && map.rateMouth != 0) {
									$("#mouth_3").html(
										(map.rateMouth).toFixed(2) + "%<span style='color:green;'>↓</span>");
								} else {
									$("#mouth_3").html((map.rateMouth/1).toFixed(2) + "%<span style='color:red;'>↑</span>");
								}
								if(map.rateWeek < 1 && map.rateWeek != 0) {
									$("#week_3").html(
										(map.rateWeek).toFixed(2) + "%<span style='color:green;'>↓</span>");
								} else {
									$("#week_3").html((map.rateWeek/1).toFixed(2) + "%<span style='color:red;'>↑</span>");
								}
								//显示单位处理
								var rateMouthSum=map.rateMouthSum;
                                var rateWeekSum=map.rateWeekSum;

                                if(rateMouthSum>=10000){
                                    $("#mouthSum_3").html((map.rateMouthSum/10000).toFixed(2)+"万元");
								}else {
                                    $("#mouthSum_3").html(map.rateMouthSum);
								}

                                if(rateWeekSum>=10000){
                                    $("#weekSum_3").html((map.rateWeekSum/10000).toFixed(2)+"万元");
                                }else {
                                    $("#weekSum_3").html(map.rateWeekSum);
                                }

							}
						});
						var myChart3 = echarts.init(document.getElementById('echart_type_3'));
						// 指定图表的配置项和数据
						option3 = {
							xAxis: {
								type: 'category',
								boundaryGap: false,
								data: map.dayList,
								axisLine: {
									lineStyle: {
										color: '#0087ED',
										width: 1, //这里是为了突出显示加上的  
									}
								}
							},
							tooltip: {
								trigger: 'axis',
								axisPointer: {
									type: 'cross',
									label: {
										backgroundColor: '#6a7985'
									}
								}
							},
							yAxis: {
								type: 'value',
								axisLine: {
									lineStyle: {
										color: '#0087ED',
										width: 1, //这里是为了突出显示加上的  
									}
								}
							},
							series: [{
								data: map.dayNum,
								type: 'line',
								smooth: true,
								areaStyle: {},
								color: {
									type: 'linear',
									x: 0,
									y: 0,
									x2: 0,
									y2: 1,
									colorStops: [{
										offset: 0,
										color: '#0087ED' // 0% 处的颜色
									}, {
										offset: 1,
										color: '#0087ED' // 100% 处的颜色
									}],
									global: false
									// 缺省为 false
								}
							}]
						};
						myChart3.setOption(option3);
					}
				}
			};
			var app = Vue.extend(option);
			new app().$mount('#app');
		</script>
	</body>

</html>