<!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;
			}
			#tab_type_tongji .mui-pull-bottom-wrapper{display:none;}
			
			.mui-table-view-cell{padding: 11px 10px;} /* 项目列表左右边距调整，太大会导致创建时间和重要程度换行 */
		</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_all">
				<span class="mui-icon mui-icon-home"><!-- <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_time">
				<span class="mui-icon mui-icon-settings"></span>
				<span class="mui-tab-label">按时间</span>
			</a>
			<!-- 
			<a class="mui-tab-item" id="tab5" 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: 0px;">
					
		            <!-- 全部项目列表 -->
		            <div id="tab_type_all" class="mui-slider-item mui-control-content mui-active">
		                <div class="mui-scroll-wrapper" id="tab1_scroll">
		                    <div class="mui-scroll">
		                        <div class="mui-input-row mui-search" id="div-global-search" style="margin-top: 5px; margin-bottom: -10px;">
									<input type="search" id="searchInput" class="mui-input-clear" placeholder="全局搜索">
								</div>
		                        
		                 		<ul id="project-all-list" class="mui-table-view mui-table-view-striped mui-table-view-condensed"></ul>
		                    </div>
		                </div>
		            </div><!-- #tab_type_all -->
					
					
		            <!--按区域展示项目列表-->
		            <div id="tab_type_area" class="mui-slider-item mui-control-content">
		               <div style="padding: 10px 10px;">
							<div class="mui-segmented-control">
								<a class="mui-control-item mui-active" id="area_shenzhen" area="深圳">深圳</a>
								<a class="mui-control-item" id="area_shanghai" area="上海">上海</a>
								<a class="mui-control-item" id="area_wuhan" area="武汉">武汉</a>
							</div>
						</div>
		               	
						<div class="mui-scroll-wrapper" style="top: 60px;">
							<div class="mui-scroll">
								<ul id="project-area-list" class="mui-table-view mui-table-view-striped mui-table-view-condensed"></ul>
							</div>
						</div>
		            </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>
							<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_time" class="mui-slider-item mui-control-content">
		            	<div style="padding: 5px 10px;">
		           			<div style="width: 100%;">
								<input type="search" id="s_starttime" placeholder="请选择开始日期" readonly="readonly" style="width: 40%;">~
								<input type="search" id="s_endtime" placeholder="请选择结束日期" readonly="readonly" style="width: 40%;">
								<button type="button" id="btn_tab_time_search" class="mui-btn mui-btn-primary" style="width: 15%;">查询</button>
							</div>
						</div>
		                
		                <div class="mui-scroll-wrapper" style="top: 48px;">
		                    <div class="mui-scroll">
		                        <ul id="project-time-list" class="mui-table-view mui-table-view-striped mui-table-view-condensed"></ul>
		                    </div>
		                </div>
		            </div><!-- tab_type_time -->
		            
		            
		            <!--统计报表-->
		            <!-- 
		            <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 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_tongji
					 -->
		        </div><!-- .mui-slider-group -->
		    </div><!-- #slider -->
			
		</div>
		
		<!-- 项目详情模态框 start -->
		<div id="modal_project_moreinfo" class="mui-modal">
			<header class="mui-bar mui-bar-nav">
				<a id="btn_colse_modal" class="mui-icon mui-icon-close mui-pull-right" href="#modal_project_moreinfo"></a>
				<h1 class="mui-title">项目详情</h1>
			</header>
			
			<div class="mui-content" style="height: 100%; background-color: #fff; margin: 10px 8px;">
				<!-- 下面两个div属于滚动插件 -->
				<div class="mui-scroll-wrapper mui-scroll-wrapper-projectdetails" style="margin-top: 55px; padding-bottom: 50px;">
				<div class="mui-scroll">
					<div id="project-content" style="padding: 20px 10px;"></div>
					
					<div id="btngroups" dataid="" class="" style="margin: 5px 10px;">
				        <button type="button" class="mui-btn mui-btn-success" id="btn_projectfiles" style="width:48%;float:left;margin-right: 4%;">项目文档</button>
				        <button type="button" class="mui-btn mui-btn-primary" id="btn_projecttasks" style="width:48%;float:right;">任务进度</button>
				    </div>
				</div>
				</div><!-- 滚动插件div -->
			</div> <!-- /.mui-content -->
		</div> <!-- #modal_project_moreinfo -->
		<!-- 项目详情模态框 start -->
		
	</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/project.js}"></script>
	
	<!-- 根路径 -->
	<script type="text/javascript" th:inline="javascript">
	/*<![CDATA[*/
	var ctxPath = /*[[@{/}]]*/ '';
	/*]]>*/
	</script>
	
	<script>
//	var ctxPath = '[[@{/}]]';
//	var vConsole = new VConsole();

	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
					}]
				};
				pieChart.setOption(chartOption);
			}
		}, 'json');
	}

	var getOption = function(chartType) {
		var chartOption = chartType == 'pie' ? {
			calculable: false,
			series: [{
				name: 'name123',
				type: 'pie',
				radius: '65%',
				center: ['50%', '50%'],
				data: [{
					value: 335,
					name: '深圳'
				}, {
					value: 310,
					name: '上海'
				},{
					value: 220,
					name: '武汉'
				}]
			}]
		} : {
			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>