<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
	<head>
		<title></title>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<!--标准mui.css-->
		<link rel="stylesheet" type="text/css" th:href="@{/libs/mui/css/mui.min.css}"/>
		<link rel="stylesheet" type="text/css" th:href="@{/libs/mui/css/mui.picker.min.css}"/>
		<!--自定义的css-->
		<link rel="stylesheet" type="text/css" th:href="@{/libs/mui/css/app.css}"/>
		<style>
			* { touch-action: pan-y; } /* 使用全局样式样式去掉: 滑动报错Unable to preventDefault inside passive event listener due to target being treated as passive */
			.title{
				margin: 20px 15px 10px;
				color: #6d6d72;
				font-size: 15px;
			}
			
			.oa-contact-cell.mui-table .mui-table-cell {
				padding: 11px 0;
				vertical-align: middle;
			}
			
			.oa-contact-cell {
				position: relative;
				margin: -11px 0;
			}
	
			.oa-contact-avatar {
				width: 75px;
			}
			.oa-contact-avatar img {
				border-radius: 50%;
			}
			.oa-contact-content {
				width: 100%;
			}
			.oa-contact-name {
				margin-right: 20px;
			}
			.oa-contact-name, oa-contact-position {
				float: left;
			}
		
			.mui-table h4,.mui-table h5,.mui-table .mui-h5,.mui-table .mui-h6,.mui-table p{
		        margin-top: 0;
		    }
		    .mui-table h4{
		        line-height: 21px;
		        font-weight: 500;
		    }
		
		    .mui-table .oa-icon{
		        position: absolute;
		        right:0;
		        bottom: 0;
		    }
		    .mui-table .oa-icon-star-filled{
		        color:#f14e41;
		    }
		    
		    
		    
		    
		    
		    .mui-bar~.mui-content .mui-fullscreen {
				height: auto;
			}
			.mui-pull-top-tips {
				position: absolute;
				top: -20px;
				left: 50%;
				margin-left: -25px;
				width: 40px;
				height: 40px;
				border-radius: 100%;
				z-index: 1;
			}
			.mui-bar~.mui-pull-top-tips {
				top: 24px;
			}
			.mui-pull-top-wrapper {
				width: 42px;
				height: 42px;
				display: block;
				text-align: center;
				background-color: #efeff4;
				border: 1px solid #ddd;
				border-radius: 25px;
				background-clip: padding-box;
				box-shadow: 0 4px 10px #bbb;
				overflow: hidden;
			}
			.mui-pull-top-tips.mui-transitioning {
				-webkit-transition-duration: 200ms;
				transition-duration: 200ms;
			}
			.mui-pull-top-tips .mui-pull-loading {
				margin: 0;
			}
			.mui-pull-top-wrapper .mui-icon,
			.mui-pull-top-wrapper .mui-spinner {
				margin-top: 7px;
			}
			.mui-pull-top-wrapper .mui-icon.mui-reverse {
				/*-webkit-transform: rotate(180deg) translateZ(0);*/
			}
			.mui-pull-bottom-tips {
				text-align: center;
				background-color: #efeff4;
				font-size: 15px;
				line-height: 40px;
				color: #777;
			}
			.mui-pull-top-canvas {
				overflow: hidden;
				background-color: #fafafa;
				border-radius: 40px;
				box-shadow: 0 4px 10px #bbb;
				width: 40px;
				height: 40px;
				margin: 0 auto;
			}
			.mui-pull-top-canvas canvas {
				width: 40px;
			}
			.mui-slider-indicator.mui-segmented-control {
				background-color: #efeff4;
			}
			
			.chart {
				height: 200px;
				margin: 0px;
				padding: 0px;
			}
			
			.mui-table-view-cell{padding: 11px 10px;} /* 项目列表左右边距调整，太大会导致创建时间和重要程度换行 */
			
			.mui-pull-bottom-wrapper{display:none;}  /* 不显示底部正在加载提示信息 */
		</style>
	</head>

	<body>
		
		<nav id="nav-bar-tab" class="mui-bar mui-bar-tab">
			<a class="mui-tab-item mui-active" id="tab1" href="#tab_type_projectnum">
				<span class="mui-icon mui-icon-image"><!-- <span class="mui-badge">17</span> --></span>
				<span class="mui-tab-label">项目数量</span>
			</a>
			<a class="mui-tab-item" id="tab2" href="#tab_type_area">
				<span class="mui-icon mui-icon-map"></span>
				<span class="mui-tab-label">按区域</span>
			</a>
			<a class="mui-tab-item" id="tab3" href="#tab_type_user">
				<span class="mui-icon mui-icon-contact"></span>
				<span class="mui-tab-label">按用户</span>
			</a>
			<a class="mui-tab-item" id="tab4" href="#tab_type_tongji">
				<span class="mui-icon mui-icon-image"></span>
				<span class="mui-tab-label">报表</span>
			</a>
		</nav>
		
		<div class="mui-content">
	
			<div id="slider" class="mui-slider mui-fullscreen">
				
				<div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted" style="height:0px;">
		       		 <nav class="mui-bar mui-bar-tab"></nav><!-- 这个不加mui-bar-tab在下拉刷新滚动模式下工作不正常 -->
		        </div>
				
		        <div class="mui-slider-group" style="top: 15px;">
		        
		            <!-- 区域项目数量统计 -->
		            <div id="tab_type_projectnum" class="mui-slider-item mui-control-content mui-active">
		    			<div class="mui-scroll-wrapper" style="top: 10px;">
		              	<div class="mui-scroll">
			        		<div class="mui-content-padded">
								<h5>项目数量趋势</h5>
								<div class="chart" id="barChart"></div>
								<br>
								<h5>项目数量趋势</h5>
								<div class="chart" id="lineChart"></div>
								<br>
								<h5>区域项目占比</h5>
								<div class="chart" id="pieChart"></div>
							</div>
		              	</div></div>
		            </div><!-- #tab_type_projectnum -->
					
					
		            <!--按区域展示项目列表-->
		            <div id="tab_type_area" class="mui-slider-item mui-control-content">
		               <ul id="project-area-list" class="mui-table-view mui-table-view-striped mui-table-view-condensed"></ul>
		            </div><!-- #tab_type_area -->
		
		
		            <!--按用户展示项目列表-->
		            <div id="tab_type_user" class="mui-slider-item mui-control-content">
		           		<div style="padding: 5px 10px;">
		           			<div style="width: 100%;">
								<input type="search" id="s_departmentname" class="" placeholder="请选择部门" readonly="readonly" style="float:left; width: 65%; margin-bottom: 8px;">
								<input type="hidden" id="s_departmentid" value="" />
								<div style="float: right; ">
									<button type="button" id="btn_selectqydept" class="selectqycontact mui-btn" style="height: 34px; line-height: 17px;">选择</button>
									<button type="button" id="btn_clearqydept" class="mui-btn btn-clear" style="height: 34px; line-height: 17px;">清空</button>
								</div>
							</div>
		           			<div style="width: 100%;">
								<input type="search" id="s_username" class="" placeholder="请选择联系人" readonly="readonly" style="float:left; width: 65%; margin-bottom: 8px;">
								<input type="hidden" id="s_userid" value="" />
								<div style="float: right; ">
									<button type="button" id="btn_selectqyuser" class="selectqycontact mui-btn" style="height: 34px; line-height: 17px;">选择</button>
									<button type="button" id="btn_clearqyuser" class="mui-btn btn-clear" style="height: 34px; line-height: 17px;">清空</button>
								</div>
							</div>
							
							<div style="width: 100%;padding: 5px 0px;">
								<input type="search" id="s_starttime" placeholder="请选择开始日期" readonly="readonly" style="width: 47%;"> ~
								<input type="search" id="s_endtime" placeholder="请选择结束日期" readonly="readonly" style="width: 47%; float:right;">
							</div>
							
							<button type="button" id="btn_tab_user_search" class="mui-btn mui-btn-primary" style="width:100%;">查&nbsp;&nbsp;询</button>
						</div>
		                
		                <div class="mui-scroll-wrapper" style="top: 132px;">
		                    <div class="mui-scroll">
		                        <ul id="project-user-list" class="mui-table-view mui-table-view-striped mui-table-view-condensed"></ul>
		                    </div>
		                </div>
		            </div><!-- #tab_type_user -->
		
		            <!--统计报表-->
		            <div id="tab_type_tongji" class="mui-slider-item mui-control-content">
			            	<div class="mui-scroll-wrapper" style="top: 10px;">
		                    <div class="mui-scroll">
				            	
							
							</div>
		               		</div>
		            		
		            </div><!-- tab_type_tongji -->
		            
			 	</div><!-- .mui-slider-group -->
		    </div><!-- #slider -->
		</div>
		
	</body>
	<script th:src="@{https://lib.baomitu.com/zepto/1.2.0/zepto.min.js}"></script>
	<script th:src="@{https://res.wx.qq.com/open/js/jweixin-1.4.0.js}"></script>
	<script th:src="@{/libs/mui/js/mui.min.custom.js}"></script>
	<script th:src="@{/libs/mui/js/mui.pullToRefresh.js}"></script>
	<script th:src="@{/libs/mui/js/mui.pullToRefresh.material.js}"></script>
	<script th:src="@{/libs/mui/js/mui.picker.min.js}"></script>
	<script th:src="@{/libs/mui/libs/echarts-all.js}"></script>
	<script th:src="@{/js/weixin-work/public.js}"></script>
	<script th:src="@{/libs/vConsole/vconsole.min.js}"></script>
	<script th:src="@{/js/weixin-work/graphic.js}"></script>
	<script th:inline="javascript">
        /*<![CDATA[*/
        var ctxPath = /*[[@{/}]]*/;
        /*]]>*/
	</script>
	
	<script>
//	var ctxPath = '[[@{/}]]';
//	var vConsole = new VConsole();
	console.log('ctxPath='+ctxPath);

	function getAreaProjectNumData(){
		$.post(ctxPath+'mobile/api/graphic/getAreaProjectNumData', {}, function(result){
			if(result.ret == 0 && (result.list).length>0){
				var chartOption = {
					calculable: false,
					tooltip : {trigger: 'item', formatter: "{b} : {c} ({d}%)"},
					series: [{
						name: '',
						type: 'pie',
						radius: '90%',
						center: ['50%', '50%'],
						data: result.list
					}]
				};
				console.log(chartOption)
				pieChart.setOption(chartOption);
			}
		}, 'json');
	}

	var getOption = function(chartType) {
		var chartOption = {
			legend: {
				data: ['深圳', '上海', '武汉']
			},
			grid: {
				x: 35,
				x2: 10,
				y: 30,
				y2: 25
			},
			toolbox: {
				show: false,
				feature: {
					mark: {
						show: true
					},
					dataView: {
						show: true,
						readOnly: false
					},
					magicType: {
						show: true,
						type: ['line', 'bar']
					},
					restore: {
						show: true
					},
					saveAsImage: {
						show: true
					}
				}
			},
			calculable: false,
			xAxis: [{
				type: 'category',
				data: ['1月', '2月', '3月', '4月', '5月']
			}],
			yAxis: [{
				type: 'value',
				splitArea: {
					show: true
				}
			}],
			series: [{
				name: '深圳',
				type: chartType,
				data: [20.0, 34.9, 47.0, 53.2, 85.6]
			}, {
				name: '上海',
				type: chartType,
				data: [56, 65.9, 89.0, 106.4, 128.7]
			}, {
				name: '武汉',
				type: chartType,
				data: [36, 89, 70.0, 128.4, 112]
			}]
		};
		return chartOption;
	};
	
	var barChart = echarts.init(document.getElementById('barChart'));
	barChart.setOption(getOption('bar'));
	var lineChart = echarts.init(document.getElementById('lineChart'));
	lineChart.setOption(getOption('line'));
//	var pieChart = echarts.init(document.getElementById('pieChart'));
//	pieChart.setOption(getOption('pie'));
//	getAreaProjectNumData();


	</script>
</html>