raolu
/
iHealth-app-demo


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180
							<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="utf-8">
		<title>两率分析</title>
		<meta name="author" content="yihu.com" />
		<meta name="format-detection" content="telephone=no" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0" />
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<meta name="apple-mobile-web-app-status-bar-style" content="black" />
		<link rel="stylesheet" href="../../../common/cross/css/cross.css" type="text/css" />
		<link rel="stylesheet" href="../../../common/cross/css/cross.ui.css" type="text/css" />
		<link rel="stylesheet" type="text/css" href="../../../common/css/doc-style.css">
		<link rel="stylesheet" type="text/css" href="../../../css/mui.min.css">
		<link rel="stylesheet" type="text/css" href="../../../common/css/ss-doctor.css">
		<link rel="stylesheet" type="text/css" href="../../../common/css/cyc.css">
		<link rel="stylesheet" href="../../../common/css/pull-up-down.css" type="text/css"/>
		<style>
		.div-shujujz {height: 35px;line-height: 35px;text-align: left;font-size: 10px;color: #909090;}
		.div-shujujz img{width: 15px;height: 15px;background-size: 15px;margin-left: 10px;margin-top: 10px;margin-right: 5px;}
		.icon-cyc.sszql {background-image: url(../images/snashi_icon.png);}
		.icon-cyc.gwrq {background-image: url(../images/gaoweirenqun.png);}
		.div-ssqql canvas{width: 150px;height: 150px;margin-top: 20px;}
		.div-ssqql{height: 195px;position: relative;text-align: center;margin: 0 auto;}
		.p-sanshilv{position: absolute;top: 60px;left: 50%;font-size: 33px;color: #238955;width: 106px;margin-left: -53px;}
		.p-sanshicount{position: absolute;top: 116px;left: 50%;font-size: 15px;color: #238955;width: 116px;margin-left: -58px;}
		.p-gaoweilv{position: absolute;top: 60px;left: 50%;font-size: 33px;color: #ac302e;width: 106px;margin-left: -53px;}
		.p-gaoweicount{position: absolute;top: 116px;left: 50%;font-size: 15px;color: #ac302e;width: 116px;margin-left: -58px;}
		.scroll-wrapper{background: #f2f4f6;}
		.pullDown, .pullUp{background: #f2f4f6;display: none;}
		</style>
	</head>
	<body>
		<div class="main pb100">
			<div class="h45">
				<div class="demo-comtop">
					<a class="mui-action-back"></a>
					<h1 style="font-size: 20px; line-height: 36px;">两率分析</h1>
				</div>
			</div>
			<div id="wrapper1">
				<div class="scroll-wrapper" id="total_wrapper" style="top: 50px;">
					<div class="iScroller">
						<div class="div-shujujz">
							<img src="../images/dizhi_icon.png">
							<span id="title"></span>（<span class="jiezhi-time"></span>）
						</div>
						<div class="mod mod-fuwu mb10">
							<div class="mod-hd" style="border-top: 1px solid #e1e1e1;border-bottom: 1px solid #e1e1e1;">
								<i class="icon-cyc sszql"></i>&emsp;三师转签率
							</div>
							<div class="div-ssqql">
								<p class="c-323232 f-fs12 p-sanshilv" style=""></p>
								<p class="c-323232 p-sanshicount f-fs12" style=""></p>
								<canvas id="sszql_canvas"></canvas>
							</div>
						</div>
						
						<div class="mod mod-fuwu">
							<div class="mod-hd" style="border-top: 1px solid #e1e1e1;border-bottom: 1px solid #e1e1e1;">
								<i class="icon-cyc gwrq"></i>&emsp;高危人群签约率
							</div>
							<div class="div-ssqql" style="border-top: 1px solid #e1e1e1;">
								<p class="c-323232 f-fs12 p-gaoweilv"></p>
								<p class="c-323232 p-gaoweicount f-fs12"></p>
								<canvas id="gaowei_canvas"></canvas>
							</div>
						</div>
						
					</div>
				</div>
			</div>
			
		</div>
		
		<script src="../../../js/mui.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../../js/common_http.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../../js/jquery/2.1.3/jquery.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../../js/waterbubble.js"></script>
		<script src="../../../js/iscroll-probe.js"></script>
		<script src="../../../js/iscroll-pull-up-down.js"></script>
		<script src="../../../js/pull-up-down.js"></script>
		<script src="../../../js/common_http.js" type="text/javascript" charset="utf-8"></script>
		
		<script type="text/javascript">
		var scroller1 = null;
			mui.plusReady(function() {
				var docType = plus.storage.getItem("docType");//当前内存中的身份
//				var userRole = JSON.parse(plus.storage.getItem("userRole"))[0] ;			
				var userRole = JSON.parse(plus.storage.getItem("selectedRole"));
				
				var docInfo = JSON.parse(plus.storage.getItem("docInfo"));//doctor表中的level	
				var level = docInfo.level;
				$("#title").html(userRole.name);
				$(".jiezhi-time").html(getDateBefore(1));
				plus.nativeUI.showWaiting();
				getData();
				initScroller();
			});
			
			function initScroller(){	
				scroller1 =  $("#wrapper1").initScroll(
					{
						pullDownAction: function(){	
							$(".pullUp").hide();
							plus.nativeUI.showWaiting();
							$(".pullDown").show();
							getData();
						},pullUpAction: null
					}
				);
				scroller1.on('beforeScrollStart',function() {
					console.log(scroller1.pointX);
				});
			}
			
			/**
			 * 获取多少天前的日期
			 */
			function getDateBefore(days) {
				var now = new Date();
				var date = new Date(now.getTime() - days * 24 * 3600 * 1000);
				var year = date.getFullYear();
				var month = date.getMonth() + 1;
				var day = date.getDate();
				var hour = date.getHours();
				var minute = date.getMinutes();
				var second = date.getSeconds();
				return year + '-' + (month < 10 ? '0' + month : month) + '-' + (day < 10 ? '0' + day : day);
			}
			
				
			function getData(){
				var endDate = getDateBefore(1);
//				var userRole = JSON.parse(plus.storage.getItem("userRole"))[0] ;
				var userRole = JSON.parse(plus.storage.getItem("selectedRole"));
				var roleLevel = userRole.code == CITY_CODE  ? 4 : userRole.code.length==6 ? 3 : 2;
				sendPost("/statistics/sszq_qwrq_info", {"endDate":endDate,"area":userRole.code,"level":roleLevel}, 
				null, countHandle);
			}
			function countHandle(res){
				if(res.status == 200) {
					res = res.data;
					console.log(JSON.stringify(res))
					$('#sszql_canvas').waterbubble({
//						txt: res.signRate.rate.substring(0,res.signRate.rate.length-2) + "%",res.signRate.rate/100
						data: res.sszq.rate/100,
						waterColor: '#31D27F',
						lineWidth:0,
						textColor: 'rgba(0, 0, 0, 0.8)',
						font: 'bold 25px arial'
					});
					$(".p-sanshilv").html(res.sszq.rate==0?'0%':res.sszq.rate.toString().substring(0,res.sszq.rate.length-2) + "%");
					$(".p-sanshicount").html(res.sszq.amount+"/"+res.sszq.num);
					
					$('#gaowei_canvas').waterbubble({
//						txt: res.signRate.rate.substring(0,res.signRate.rate.length-2) + "%",res.signRate.rate/100
						data: res.gwrq.rate/100,
						waterColor: '#FE7673',
						lineWidth:0,
						radius: 75,
						textColor: 'rgba(0, 0, 0, 0.8)',
						font: 'bold 25px arial'
					}); 
					
					$(".p-gaoweilv").html(res.gwrq.rate==0?'0%':res.gwrq.rate.toString().substring(0,res.gwrq.rate.length-2) + "%");
					$(".p-gaoweicount").html(res.gwrq.amount+"/"+res.gwrq.num);
					
				} else {
					mui.toast(res.msg);
				}
				plus.nativeUI.closeWaiting();
				scroller1.refresh();
			}
				
		</script>
	</body>

</html>