wcheng81
/
LSQZrzyAPP


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174
							<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title>镇街资源统计</title>
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<!-- 引入自定义样式 -->
		<link rel="stylesheet" type="text/css" href="../css/app.css" />
		<link rel="stylesheet" type="text/css" href="../css/app.new.css" />
		<!-- 引入字体 -->
		<link rel="stylesheet" href="../fonts/TTTGB-Medium.css" />
		<link rel="stylesheet" href="../fonts/font-time.css" />
		<link rel="stylesheet" href="../fonts/font-jt.css" />
		<!-- 引入弹窗及选择器样式 -->
		<link rel="stylesheet" type="text/css" href="../css/mui.picker.min.css" />
		<link rel="stylesheet" type="text/css" href="../css/mui.poppicker.css" />
		<!-- 引入空间分析结果样式 -->
		<link rel="stylesheet" href="../css/spatial.analysis.css">
		<!-- 本页独有样式 -->
		<link rel="stylesheet" href="../css/query_where.css">
		<!-- 页面独有样式 -->
		<style>
			/* 统计具体内容容器 */
			.cr-count-content-panel {
				flex: 1;
				position: relative;
				display: flex;
				flex-direction: column;
			}

			/* 更改滚动容器样式 */
			.cr-count-content-panel .mui-scroll-wrapper {
				position: relative;
				flex: 1;
			}
		</style>
	</head>
	<body>
		<div class="cr-layout-flex-v">
			<div class="jt-query-where-group-label">镇街选择</div>
			<button class="jt-query-where-select" id="selSSXZ" value="选择镇街">选择镇街</button>
			<div class="cr-count-content-panel">
				<div class="jt-spatial-analysis-group-label" id="divCountTitle">
					<span>资源统计信息</span>
				</div>
				<div class="mui-scroll-wrapper">
					<div class="mui-scroll" id="divCountResult"></div>
				</div>
			</div>
		</div>
	</body>
</html>
<!-- 引入mui脚本 -->
<script src="../js/mui.min.js" type="text/javascript" charset="utf-8"></script>
<!-- 引入弹窗及选择器脚本 -->
<script src="../js/mui.picker.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/mui.poppicker.js" type="text/javascript" charset="utf-8"></script>
<!-- 引入jQuery脚本 -->
<script src="../js/jquery.js" type="text/javascript" charset="utf-8"></script>
<!-- 引入通用脚本 -->
<script src="../js/common.js" type="text/javascript" charset="utf-8"></script>
<!-- 进入webview脚本 -->
<script src="../js/webview.js" type="text/javascript" charset="utf-8"></script>
<!-- 引入存储脚本 -->
<script src="../js/save.js" type="text/javascript" charset="utf-8"></script>
<!-- 引入ajax脚本 -->
<script src="../js/ajax.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	/* mui初始化 */
	mui.init({
		swipeBack: false,
	});
	/* 必须加 否则将导致数据表无法滚动 */
	mui('.mui-scroll-wrapper').scroll({
		scrollY: true, //是否竖向滚动
		scrollX: true, //是否横向滚动  
		startX: 0, //初始化时滚动至x  
		startY: 0, //初始化时滚动至y  
		indicators: false, //是否显示滚动条  
		deceleration: 0.0006, //阻尼系数,系数越小滑动越灵敏  
		bounce: false, //是否启用回弹  
	});

	/* 初始化 */
	plusInit(function() {
		/* 绑定选择器 */
		bindListenerToSelectButton('selSSXZ', 'sde_town_data_count', 'ssxz', function(text, value) {
			beginCountTownResource(text);
		});
		querySimpleFieldInfo('sde_town_data_count', 'ssxz', function(config) {
			let townName = config[0].text;
			$("#selSSXZ").text(townName);
			beginCountTownResource(townName);
		});
	});

	/* 统计分析结果 */
	let countResult = [];

	/**
	 * 开始统计镇街资源
	 * @param {string} townName 镇街明晨恶搞
	 */
	function beginCountTownResource(townName) {
		sendAjax({
			url: 'appQueryTownResourceCount',
			waitMessage: '查询中...',
			data: {
				townName: townName,
			},
			success: function(resData) {
				$("#divCountResult").html('');
				countResult = [];
				for (let data of resData) {
					countResult.push({
						type: 'title',
						name: data.townName,
					});
					for (let item of data.countList) {
						countResult.push({
							selCode: item.selCode,
							selName: item.selName,
							selNumber: item.selNumber,
						})
					}
				}
				muiShowWaitLoading('加载中...');
				createOACItem('divCountResult', countResult, 0);
			},
			error: function(err) {
				muiAlertError(err);
			}
		})
	}

	/**
	 * 创建展示项
	 * @param {string} domId 控件Id
	 * @param {JSON} datas 数据集
	 * @param {int} index 索引
	 */
	function createOACItem(domId, datas, index) {
		if (index == datas.length) {
			muiCloseWaitLoading();
			muiToast('加载完成！');
			appendClickEventByClassName('jt-nowrap');
		};
		var data = datas[index];
		if (data && data.type && data.type != undefined) {
			$("#divCountTitle").html("<span>" + data.name + " 资源统计信息</span>");
			createOACItem(domId, datas, index + 1);
		} else if (data && data.type == undefined) {
			var div = document.createElement('div');
			if (index == datas.length - 1) {
				div.className = 'jt-spatial-analysis-content-row jt-spatial-analysis-content-row-last';
			} else {
				div.className = 'jt-spatial-analysis-content-row';
			}
			var strHtml = "";
			strHtml += "<span>" + data.selNumber + "</span>";
			strHtml += "<span class='jt-nowrap'>" + data.selName + "</span>";
			strHtml += "<span class='jt-nowrap'>" + data.selCode + "</span>";
			div.innerHTML = strHtml;
			$(div).hide();
			$('#' + domId).append(div);
			$(div).slideDown(200, function() {
				createOACItem(domId, datas, index + 1);
			});
		}
	}
</script>