<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
<meta charset="UTF-8">
<meta name="viewport"
	content="user-scalable=no,width=device-width,initial-scale=1,maximum-scale=1,viewport-fit=cover">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>项目数量月报表</title>
<!-- <link th:href="@{/graphic/css/index-327d228dbecdc633f03c.css}"
	rel="stylesheet"> -->
<style type="text/css">
body {
	font-size: 20px;
	color: #090;
	background-color: #eee;
	text-align: center;
}

.select {
	display: inline-block;
	width: 140px;
	position: relative;
	vertical-align: middle;
	padding: 0;
	overflow: hidden;
	background-color: #fff;
	color: #555;
	border: 1px solid #aaa;
	text-shadow: none;
	border-radius: 4px;
	transition: box-shadow 0.25s ease;
	z-index: 2;
}

.select:hover {
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}

.select:before {
	content: "";
	position: absolute;
	width: 0;
	height: 0;
	border: 10px solid transparent;
	border-top-color: #ccc;
	top: 14px;
	right: 10px;
	cursor: pointer;
	z-index: -2;
}

.select select {
	cursor: pointer;
	padding: 10px;
	width: 100%;
	border: none;
	background: transparent;
	background-image: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	height: 40px;
}

.select select:focus {
	outline: none;
}

.button {
	background-color: #4CAF50; /* Green */
	border: none;
	color: white;
	padding: 7.5px 16px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 16px;
	width: 100%;
	height: 40px;
}

#search_btn {
	margin-top: 5px;
}
</style>
</head>

<body>


	<div style="width: 100%">
		<div clase="dep" style="width: 40%; float: left;">
			<div class="select">
				<select id="selectedId">
				</select>
			</div>
		</div>
		<div clase="date" style="width: 40%; float: right;">
			<div class="select">
				<select id="year">
					<option value="2019" selected>2019</option>
					<option value="2018">2018</option>
				</select>
			</div>
		</div>

	</div>

	<button id="search_btn" class="button">查询</button>

	<br>
	<div id="container" style="height: 600px"></div>
	<script type="text/javascript"
		src="https://lib.baomitu.com/jquery/3.3.1/jquery.min.js"></script>
	<script type="text/javascript"
		src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
	<script type="text/javascript">
		$(function() {
			saveAction();
			//saveActionTest();
			queryDepartmentLable();
		});
		//查询图表数据
		function saveAction() {
			var year = $("#year").val(); 
			var deptId = $("#selectedId").val();      	   
			$.post('[[@{/mobile/api/graphic/queryMonthProjectLine}]]', {
				year : year,
				deptId : deptId
			}, function(result) {
				var dom = document.getElementById("container");
				var myChart = echarts.init(dom);
				var app = {};
				option = null;
				option = {
					xAxis : {
						type : 'category',
						data : [ '1', '2', '3', '4', '5', '6', '7', '8', '9', '10',
								'11', '12' ]
					},
					yAxis : {
						type : 'value'
					},
					series : [ {
						data : result.list,
						type : 'line'
					} ]
				};
				if (option && typeof option === "object") {
					myChart.setOption(option, true);
				}

			}, 'json');
		}
		//查询公司部门列表
		function queryDepartmentLable() {
			$.post('[[@{/mobile/api/graphic/queryDepartmentLable}]]', {
			}, function(result) {
				console.log(result.list);
				$("#selectedId option").remove();   
				$("#selectedId").append("<option value=''>信广龙</option>");
                   $.each(result.list, function (index, itemobj) {
                   $("#selectedId").append("<option value='"+itemobj.value+"'>"+itemobj.lable+"</option>");
                   });
			}, 'json');
		}
		
		$('#search_btn').click(function() {
			saveAction();
		});
		
	//测试
	function saveActionTest() {
				var dom = document.getElementById("container");
				var myChart = echarts.init(dom);
				var app = {};
				option = null;
				option = {
					xAxis : {
						type : 'category',
						data : [ '1', '2', '3', '4', '5', '6', '7', '8', '9', '10',
								'11', '12' ]
					},
					yAxis : {
						type : 'value'
					},
					series : [ {
						data : [ '1', '2', '3', '4', '5', '6', '7', '8', '9', '10',
							'11', '12' ],
						type : 'line'
					} ]
				};
				if (option && typeof option === "object") {
					myChart.setOption(option, true);
				}

			
		}
	
	function queryDepartmentLableTest() {
		$.post('[[@{/mobile/api/graphic/queryDepartmentLable}]]', {
		}, function(result) {
			console.log(result.list);
			$("#selectedId option").remove();   
			$("#selectedId").append("<option value=''>信广龙</option>");
               $.each(result.list, function (index, itemobj) {
               $("#selectedId").append("<option value='"+itemobj.value+"'>"+itemobj.lable+"</option>");
               });
		}, 'json'); 
	}
	</script>
	<!-- 以下是echarts代码 -->

	<script type="text/javascript">

	</script>
</body>

</html>