wcheng81
/
LSQZrzyAPP


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270
							<!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" />
		<!-- 引入mui样式 -->
		<link rel="stylesheet" type="text/css" href="../css/mui.min.css" />
		<!-- 引入app样式 -->
		<link rel="stylesheet" type="text/css" href="../css/app.css" />
		<!-- 引入补充样式集合 -->
		<link rel="stylesheet" type="text/css" href="../css/app.new.css">
		<!-- 引入字体 -->
		<link rel="stylesheet" type="text/css" href="../fonts/TTTGB-Medium.css" />
		<link rel="stylesheet" type="text/css" href="../fonts/font-time.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/query_where.css">
		<link rel="stylesheet" href="../css/query_result.css">
	</head>
	<body>
		<!-- 具备侧滑功能 根容器 -->
		<div id="offCanvasWrapper" class="mui-off-canvas-wrap">
			<aside class="mui-off-canvas-right">
				<!-- 具体内容容器 -->
				<div class="jt-wrap-right-content" id="divContent">
					<div class="jt-query-where-group-label">图斑编号</div>
					<input id="txtTBBH" class="jt-query-where-input" placeholder="输入图斑编号" />
					<div class="jt-query-where-group-label">最小面积(公顷)</div>
					<input id="txtMinArea" class="jt-query-where-input" type="number" max="10000"
						placeholder="输入最小面积值" />
					<div class="jt-query-where-group-label">最大面积(公顷)</div>
					<input id="txtMaxArea" class="jt-query-where-input" type="number" max="10000"
						placeholder="输入最大面积值" />
					<div class="jt-query-where-group-label">管制区类型</div>
					<button class="jt-query-where-select" id="selGZQLX" value="选择管制区类型">选择管制区类型</button>
					<div class="jt-query-where-row">
						<button class="jt-query-btn" onclick="submitQuery()"><span
								class="app-icon app-icon-menu-query"></span>开始查询</button>
						<button class="jt-reset-btn" onclick="reset()"><span
								class="app-icon app-icon-menu-query"></span>重置</button>
					</div>
				</div>
			</aside>
			<!-- 主要内容开始 -->
			<div class="mui-inner-wrap">
				<div class="jt-normal-main">
					<div>
						<div class="mui-scroll-wrapper">
							<div class="mui-scroll" id="divQueryResult"></div>
						</div>
					</div>
					<div class="jt-map-location-panel">
						<header class="mui-bar jt-bar" onclick="$(this).parent().hide();">图斑定位</header>
						<iframe src="map.esri.html?type=location" id="frameWrapper"></iframe>
					</div>
				</div>
				<!-- 蒙版 -->
				<div class="mui-off-canvas-backdrop"></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 src="../js/built-in-map.js"></script>
<!-- 本页独有脚本 -->
<script type="text/javascript">
	/* mui初始化 */
	mui.init();

	/* 必须加 否则将导致数据表无法滚动 */
	mui('.mui-scroll-wrapper').scroll({
		scrollY: true, //是否竖向滚动
		scrollX: true, //是否横向滚动  
		startX: 0, //初始化时滚动至x  
		startY: 0, //初始化时滚动至y  
		indicators: false, //是否显示滚动条  
		deceleration: 0.0006, //阻尼系数,系数越小滑动越灵敏  
		bounce: false, //是否启用回弹  
	});

	/* 初始化 */
	plusInit(function() {
		var vw = plus.webview.currentWebview();
		vw.setStyle({
			"titleNView": {
				buttons: [{
					'float': 'right',
					fontSrc: '../fonts/iconfont.ttf',
					text: '\ue6f0',
					onclick: showRightWindow,
				}]
			}
		});
		/* 绑定选择器 */
		bindListenerToSelectButton('selGZQLX', 'view_app_plan_regulate', 'lxmc');
		/* 默认打开查询窗口 */
		showRightWindow();
	});

	/**
	 * 打开右侧侧滑菜单
	 */
	function showRightWindow() {
		mui('.mui-off-canvas-wrap').offCanvas('show');
	}

	/**
	 * 关闭右侧侧滑菜单
	 */
	function hideRightWindow() {
		mui('.mui-off-canvas-wrap').offCanvas().close();
	}

	/**
	 * 重置查询条件
	 */
	function reset() {
		$(".jt-query-where-input").each(function(index, element) {
			var txt = $(".jt-query-where-input")[index];
			$(txt).val('');
		});
		$(".jt-query-where-select").each(function(index, element) {
			var btn = $(".jt-query-where-select")[index];
			$(btn).html($(btn).attr('value'));
			$(btn).attr('data-value', "");
		});
	}

	/* 查询模型 */
	var queryModel = {
		feaNumber: '',
		minArea: '',
		maxArea: '',
		prType: '',
		start: '1',
		count: '10',
	}

	/**
	 * 检查查询条件
	 */
	function checkSubmitInfo() {
		queryModel.feaNumber = $("#txtTBBH").val().trim();
		queryModel.minArea = $("#txtMinArea").val().trim();
		queryModel.maxArea = $("#txtMaxArea").val().trim();
		queryModel.prType = getAttributeValue('selGZQLX', 'data-value');
		queryModel.start = '1';
		if (queryModel.minArea != "" && queryModel.maxArea != "") {
			var minValue = parseFloat(queryModel.minArea);
			var maxValue = parseFloat(queryModel.maxArea);
			if (minValue > maxValue) {
				muiAlert("最小面积不能大于最大面积！", "警告");
				return false;
			}
		}
		return true;
	}
	/**
	 * 提交查询
	 */
	function submitQuery() {
		/* 清除原有展示内容 */
		$("#divQueryResult").html('');
		/* 滚动到顶部 */
		mui('.mui-scroll-wrapper').scroll().scrollTo(0, 0, 100); //100毫秒滚动到顶
		/* 关闭右滑窗口 */
		hideRightWindow();
		/* 进行参数检查 */
		checkSubmitInfo();
		/* 执行查询数据 */
		beginQueryLdCompensation();
	}

	/**
	 * 查询数据
	 */
	function beginQueryLdCompensation() {
		sendAjax({
			waitMessage: '查询中...',
			data: queryModel,
			url: 'appQueryPlanRegulateData',
			success: function(resData) {
				showLdCompensationQueryResult('divQueryResult', resData[0]);
			},
			error: function(err) {
				muiAlertError(err);
			},
			nodata: function(msg) {
				muiAlertError(msg);
			}
		})
	}

	/**
	 * 展示查询结果
	 * @param {string} fatherDomId 父容器Id
	 * @param {JSON} data 查询结果数据
	 */
	function showLdCompensationQueryResult(fatherDomId, data) {
		var fatherDom = $("#" + fatherDomId);
		for (var i in data.dataList) {
			var item = data.dataList[i];
			/* 创建头 */
			var topDiv = document.createElement('div');
			topDiv.className = 'jt-query-result-title';
			fatherDom.append(topDiv);
			var topHtml = "";
			topHtml += "<span class='jt-icon'>" + item.rowNumber + "</span>";
			topHtml += "<span class='jt-title'>" + item.spotNumber + "</span>";
			topHtml += "<button onclick=\"CallMapLocation('" + item.tabName + "','" + item.feaId +
				"')\"  class='jt-btn'>定位</button>";
			topDiv.innerHTML = topHtml;
			/* 创建内容 */
			var contentDiv = document.createElement('div');
			contentDiv.className = 'jt-query-result-content';
			fatherDom.append(contentDiv);
			var contentHtml = "";
			contentHtml += "<div class='jt-query-result-row'>";
			contentHtml += "<span class='jt-title'>管制区代码</span>";
			contentHtml += "<span class='jt-value'>" + item.prTypeCode + "</span>";
			contentHtml += "<span class='jt-title'>管制区名称</span>";
			contentHtml += "<span class='jt-value'>" + item.prTypeName + "</span>";
			contentHtml += "</div>";

			contentHtml += "<div class='jt-query-result-row'>";
			contentHtml += "<span class='jt-title'>管制区面积</span>";
			contentHtml += "<span class='jt-value'>" + item.spotArea + "</span>";
			contentHtml += "</div>";
			contentDiv.innerHTML = contentHtml;
		}
		/* 加载更多按钮 */
		/* 移除显示更多按钮 */
		$("#lastDom").remove();
		if (data.isLast != "1") {
			/* 添加 加载更多按钮 */
			var btn = document.createElement('button');
			fatherDom.append(btn);
			btn.id = "lastDom";
			btn.className = 'mui-btn mui-btn-block jt-btn-load';
			btn.innerHTML = "加载更多";
			btn.onclick = function() {
				mui(this).button('loading');
				queryModel.start = parseInt(queryModel.start) + parseInt(queryModel.count);
				/* 开始查询数据 */
				beginQueryLdCompensation();
			}
		}
	}
</script>