wcheng81
/
LSQZrzyAPP


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209
							<!DOCTYPE html>
<html>
	<head>
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<!-- 引入mui样式 -->
		<meta charset="utf-8">
		<title>UI演示</title>

		<link href="./css/mui.css" rel="stylesheet" />
		<!--连接自定义APP样式-->
		<link href="./css/app.css" rel="stylesheet" />
		<link rel="stylesheet" href="./css/app.new.css">
		<link rel="stylesheet" href="./fonts/font-jt.css">
		<!-- 引入案件样式 -->
		<link rel="stylesheet" type="text/css" href="./css/case.css" />
		<!-- 引入弹窗及选择器样式 -->
		<link rel="stylesheet" type="text/css" href="../css/mui.picker.css" />
		<link rel="stylesheet" type="text/css" href="../css/mui.poppicker.css" />

		<link rel="stylesheet" href="./css/csa.count.css">

		<!-- 引入地图页面独有样式 -->
		<link rel="stylesheet" type="text/css" href="./css/cr.map.css" />

		<style type="text/css">
			html,
			body {
				position: relative;
				/* background-color: antiquewhite !important; */
				height: 100%;
				width: 100%;
				font-weight: bold;
				background-color: antiquewhite !important;
			}

			/* 弹框的背景 干掉试试 */
			.mui-backdrop.mui-active.mui-backdrop-action {
				display: none;
			}

			.mui-popover-bottom .mui-bar {
				background-color: blue !important;
			}

			.mui-popover-bottom .mui-bar::after {
				font-family: 'iconfont', sans-serif !important;
				position: absolute;
				content: '\e614';
				height: 44px;
				line-height: 44px;
				width: 20px;
				right: 15px;
				padding: 0px;
				z-index: 10;
				color: rgb(255, 255, 255);
				font-weight: bold;
				font-size: 18px;
			}

			.mui-popover-bottom .mui-bar:active::after {
				color: rgb(255, 255, 0);
			}
		</style>
	</head>
	<body>
		<button type="button" onclick="showPdf()">打开对话框</button>
		<div class="mui-input-row">
			<label>实例一</label>
			<input name="checkbox1" value="Item 1" type="checkbox" checked>
		</div>
		<div class="mui-input-row">
			<label>实例二</label>
			<input name="checkbox1" value="Item 1" type="checkbox">
		</div>
		<div class="mui-input-row">
			<label>实例三</label>
			<input name="checkbox1" value="Item 1" type="checkbox" checked>
		</div>
		<!-- 查询结果弹出层 -->
		<div id="queryResultPopover" class="mui-popover mui-popover-action mui-popover-bottom wc-popover-case">
			<header id="queryResultTitle" class="mui-bar">查询结果</header>
			<div class="mui-slider" id="slider">
				<!--  mui-slider-loop 如果需要轮循播放需要添加-->
				<div id="caseQueryResult" class="mui-slider-group">
				</div>
			</div>
		</div>
	</body>
</html>
<script src="./js/mui.min.js" type="text/javascript"></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>
<script src="./js/MapManager.js"></script>
<script src="./js/jquery.js"></script>
<script src="./js/common.js"></script>
<script src="./js/save.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, //是否启用回弹  
	});

	let chkObj = document.getElementsByName('checkbox1');
	for (let checkbox of chkObj) {
		checkbox.checked = false;
	}

	function showPdf() {
		mui("#queryResultPopover").popover('show');
		_initCSAData([{
			name: '第一条',
		}]);
	}

	/**
	 * 展示通用占地分析结果数据集
	 * @param {Array} datas 通用占地分析结果数据集
	 */
	function _initCSAData(datas) {
		/* 初始化 加入根节点*/
		let divRoot = document.createElement('div');
		divRoot.className = 'jt-csa-count-result-panel';
		let rootHtml = "";
		/* 创建横向滚动tab */
		rootHtml +=
			"<div class='mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted'>";
		rootHtml += "<div class='mui-scroll'>";
		for (let i = 0; i < datas.length; i++) {
			rootHtml += "<a href='#item_count" + i + "' class='mui-control-item";
			if (i === 0) {
				if (datas.length === 1) {
					rootHtml += " jt-control-item mui-active";
				} else {
					rootHtml += " mui-active";
				}
			}
			rootHtml += "' id='top" + i + "'>" + datas[i].name + "</a>";
		}
		rootHtml += "</div>";
		rootHtml += "</div>";
		/* 创建统计信息详细内容 */
		rootHtml += "<div class='mui-content-padded'>";
		for (let i = 0; i < datas.length; i++) {
			rootHtml += "<div id='item_count" + i + "' class='mui-control-content jt-mui-control-content";
			if (i === 0) {
				rootHtml += " mui-active";
			}
			rootHtml += "'>";
			rootHtml += "<div class='jt-row-content'>";
			rootHtml += "<div class='mui-scroll-wrapper'>";
			rootHtml += "<div class='mui-scroll'>";
			/* 以下是具体内容 */
			for (let j = 0; j < 10; j++) {
				if (j % 2 == 0) {
					rootHtml += "<div class='jt-feature-data-row jt-row-even-number'>";
				} else {
					rootHtml += "<div class='jt-feature-data-row jt-row-odd-number'>";
				}
				rootHtml += "<span>" + j + "</span>";
				rootHtml += "<span>" + i + "</span>";
				rootHtml += "<span>" + '0.00' + "亩</span>";
				rootHtml += "<button type='button' class='mui-btn app-icon app-icon-location jt-button'";
				rootHtml += " onclick = \"_queryFeatureWktAndLocation('','fx_common_spatial_analysis')\" />";
				rootHtml += "<button type='button' class='mui-btn app-icon app-iocn-details jt-button'";
				rootHtml += " onclick = \"openDetailsPage('','')\" />"
				rootHtml += "</div>";
			}
			/* 以上是具体内容 */
			rootHtml += "</div>";
			rootHtml += "</div>";
			rootHtml += "</div>";
			rootHtml += "</div>";
		}
		rootHtml += "</div>";
		divRoot.innerHTML = rootHtml;
		/* 创建弹窗的标题头 */
		var header = document.createElement('header');
		header.className = 'mui-bar';
		let headHtml = "<div class='jt-cnt-bar'>";
		headHtml +=
			"<button type='button' class='app-icon app-iocn-details jt-cnt-bar-button' onclick='_queryCSACount()'>统计信息</button>";
		headHtml += "<span class='jt-cnt-bar-title'>占压分析明细</span>";
		headHtml += "</div>";
		header.innerHTML = headHtml;
		/* 显示弹框 */
		_showMuiPopover(header, divRoot);
		$("#top0").addClass('jt-segmented-control-item');

		let divHtml = "<div class='jt-segmented-control-item-content'>";
		divHtml += "<span>你好</span>";
		divHtml += "<span class='jt-number'>1/2</span>";
		divHtml += "<button class='app-icon app-iocn-details jt-cnt-bar-button'>加载更多</button>";
		divHtml += "<div>"

		$("#top0").html(divHtml);
	}
</script>