wcheng81
/
LSQZrzyAPP


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289
							<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport"
			content="width=device-width,initial-scale=1.0,minimum-scale=0.1,maximum-scale=1.5,user-scalable=no" />
		<title>地图页面</title>
		<link href="../css/mui.min.css" rel="stylesheet" />
		<!-- 引入字体样式 -->
		<link rel="stylesheet" type="text/css" href="../fonts/TTTGB-Medium.css" />
		<link rel="stylesheet" type="text/css" href="../fonts/SansCN-Normal.css" />
		<!-- 引入自定义样式 -->
		<link rel="stylesheet" type="text/css" href="../css/app.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" type="text/css" href="../js/Cesium/Widgets/widgets.css" />
		<!-- 引入地图页面独有样式 -->
		<link rel="stylesheet" type="text/css" href="../css/cr.map.css" />
	</head>
	<body>
		<header class="mui-bar cr-bar">
			<div class="mui-input-row mui-search">
				<input type="search" id="search" class="mui-input-clear" placeholder="输入案件编号 支持模糊查询">
			</div>
		</header>
		<!-- 三维地图容器 -->
		<div id="map3d" class="map3d"></div>
		<!-- 地图侧面工具 -->
		<div class="ui-content-padded" style="position: absolute;top: 70px;right: 4px;width: 40px;">
			<button class="mui-btn wc-map-div-btn" onclick="EventClick_Layer(this)">
				<span class="app-icon app-icon-map-layer"></span>
			</button>
			<button class="mui-btn wc-map-div-btn" onclick="EventClick_MeasureLength(this)">
				<span class="app-icon app-icon-map-measurelength"></span>
			</button>
			<button class="mui-btn wc-map-div-btn" onclick="EventClick_MeasureArea(this)">
				<span class="app-icon app-icon-map-measurearea"></span>
			</button>
			<button class="mui-btn wc-map-div-btn" onclick="EventClick_Location(this)">
				<span class="app-icon app-icon-map-location"></span>
			</button>
			<button class="mui-btn wc-map-div-btn" onclick="EventClick_AllView(this)">
				<span class="app-icon app-icon-map-querycoord"></span>
			</button>
			<button class="mui-btn wc-map-div-btn" onclick="EventClick_Query_Coords(this)">
				<span class="app-icon app-icon-map-coordquery"></span>
			</button>
			<button class="mui-btn wc-map-div-btn" onclick="EventClick_Query_Point(this)">
				<span class="app-icon app-icon-map-pointquery"></span>
			</button>
			<button class="mui-btn wc-map-div-btn" onclick="EventClick_Query_Area(this)">
				<span class="app-icon app-icon-map-areaquery"></span>
			</button>
			<!-- 清扫工具 -->
			<button class="mui-btn wc-map-div-btn wc-map-tools-hide" id="divClean" onclick="EventClick_Clean(this)">
				<span class="app-icon app-icon-map-clean"></span>
			</button>
			<!-- 窗口管理 -->
			<button class="mui-btn wc-map-div-btn wc-map-tools-hide" id="divWindow" onclick="EventClick_QueryWindow(this)">
				<span class="app-icon app-icon-map-window"></span>
			</button>
		</div>
		<!-- 图层控制弹出窗口 -->
		<div id="layerPopover" class="mui-popover">
			<div class="mui-scroll-wrapper">
				<div class="mui-scroll" id="divLayerList">
				</div>
			</div>
		</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>
		<!-- 底部地图信息窗口 -->
		<div id="divButtomInfo" class="divButtomInfo"></div>
		<!-- 气泡查询窗口 -->
		<div class="cr-popup" id="divCaseQueryWindow" location="" extent="">
			<div class="arrow">
				<em></em>
			</div>
			<button class="mui-btn mui-btn-primary mui-icon app-icon app-icon-map-areaquery wc-btn-case-query" onclick="EventClick_Case_Query(this)">开始查询</button>
		</div>
	</body>
</html>
<!-- 引入mui脚本 -->
<script src="../js/mui.js"></script>
<!-- 引入弹窗及选择器脚本 -->
<script src="../js/mui.picker.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/mui.poppicker.js" type="text/javascript" charset="utf-8"></script>
<!-- 引入webview脚本 -->
<script src="../js/webview.js" type="text/javascript" charset="utf-8"></script>
<!-- 引入jQuery脚本 -->
<script src="../js/jquery.js" type="text/javascript" charset="utf-8"></script>
<!-- 引入Cesium脚本 -->
<script src="../js/Cesium/Cesium.js" type="text/javascript" charset="utf-8"></script>
<!--引入通用脚本-->
<script src="../js/common.js"></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/JTMap3D.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/MapManager3D.js" type="text/javascript" charset="utf-8"></script>
<!-- 引入案件脚本 -->
<script src="../js/case.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/case-list-base.js" type="text/javascript" charset="utf-8"></script>
<!-- 本页专用脚本 -->
<script type="text/javascript">
	/* 控件定义 */
	var domQueryResultTitle = document.getElementById("queryResultTitle");
	var domCaseQueryResult = document.getElementById("caseQueryResult");
	mui.init();

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

	/**
	 * 全局公用变量
	 */
	var queryCaseIds = [];

	/**
	 * 覆盖页面出现显示方法
	 */
	function pageFirstShow() {
		pageInit();
		printToConsole("3D地图页面显示！");
		/* 写入此方法是为了避免使用回退键返回 */
		mui.back = function() {}
		/* 获取存储的用户信息 */
		getSaveUserInfo({
			success: function(userInfo) {
				var joinUser = userInfo;
				//初始化案件实例
				caseBase = new JTCaseBase({
					queryType: "Input",
					ashxName: "appQueryCases",
					pageFlag: "Map",
					userInfo: joinUser,
				});
				//绑定数据表
				caseBase.bindUlTable(undefined);
				/**
				 * 绑定搜索框 通过绑定监听获取输入的内容
				 * @param {Object} value 获取输入的查询内容
				 */
				caseBase.bindSearchControlEvent('search', function(value) {
					queryCaseIds.length = 0;
					queryCaseIds.push(value);
					caseBase.queryDataByCaseId(queryCaseIds);
				});

				/**
				 * 绑定查询返回事件
				 * @param {Array[JSON]} caseDatas 
				 */
				caseBase.eventQueryResult = function(caseDatas) {
					showCaseQueryResult(caseDatas);
				}
				
				/**
				 * 绑定案件变更回调事件
				 * @param {string} caseNum 案件编号
				 */
				caseBase.eventCaseChange = function(caseNum){
					/* 调用刷新案件方法 */
					refreshDataTable(caseNum);
				}
			},
			error: function(err) {
				muiAlertError(err);
			}
		});
	}

	var sliderCaseDatas = undefined; //当前显示的案件结果集合
	var sliderMoveIndex = 0; //slider控件显示的索引
	/**
	 * 添加查询案件到集合中
	 * @param {Array[JSON]} caseDatas 查询案件数据集
	 */
	function showCaseQueryResult(caseDatas) {
		sliderCaseDatas = caseDatas;
		sliderMoveIndex = 0;
		if(caseDatas.length == 0){
			/* 干掉原来显示的内容 */
			mui('#queryResultPopover').popover('hide');
			$("#caseQueryResult").empty();
			return;
		}
		/* 这个方法必须放到slider()前面，先显示弹出框，否则会导致slider().gotoItem()方法异常 */
		mui('#queryResultPopover').popover('show');
		/* 清除原有显示数据 */
		$("#caseQueryResult").empty();
		/* 增加最后一个 为了保证滑动正常*/
		// appendToSliderItemByCase(caseDatas[caseDatas.length - 1], domCaseQueryResult, true);
		/* 循环增加所有案件 */
		for (var i = 0; i < caseDatas.length; i++) {
			appendToSliderItemByCase(caseDatas[i], domCaseQueryResult, false);
		}
		/* 增加第一个  为了保证滑动正常*/
		// appendToSliderItemByCase(caseDatas[0], domCaseQueryResult, true);
		/* 赋值案件数量 用以显示 */
		queryCaseCount = caseDatas.length;
		/* 初始显示案件循环标题 */
		domQueryResultTitle.innerHTML = "当前案件 " + (sliderMoveIndex + 1) + "/" + queryCaseCount;
		/* 初始化slider 这很重要 否则将无法滑动*/
		mui('.mui-slider').slider().gotoItem(sliderMoveIndex);
	}

	/**
	 * 向Slider的容器中追加案件
	 * @param {JSON} caseJson 案件的JSON数据
	 * @param {dom} domSlider Slider容器的dom对象
	 * @param {dom} isLastOrFirst 是否属于第一个或者最后一个
	 */
	function appendToSliderItemByCase(caseJson, domSlider, isLastOrFirst) {
		var div = caseBase.createCase(caseJson);
		var sliderDiv = document.createElement("div");
		sliderDiv.id = caseJson.casenum;
		if (isLastOrFirst) {
			sliderDiv.className = "mui-slider-item mui-slider-item-duplicate";
		} else {
			sliderDiv.className = "mui-slider-item";
		}
		sliderDiv.append(div);
		domSlider.append(sliderDiv);
	}

	/**
	 * 关闭窗口
	 */
	function closeWindow() {
		plus.webview.currentWebview().hide('slide-out-bottom', 300);
	}

	/* 查询的案件总数 */
	var queryCaseCount = 0;

	/* 滑动组件滑动监听 */
	document.querySelector(".mui-slider").addEventListener('slide', function(event) {
		/* 记录当前手工切换到哪一个了 以便在进行案件事物处理后 能正确切换到刚刚处理的案件 */
		domQueryResultTitle.innerHTML = "当前案件 " + (event.detail.slideNumber + 1) + "/" + queryCaseCount;
	})

	/**
	 * 处理案件处置 处理、审核、派发、撤派 等操作成功后的后续处理事宜
	 * @param {string} casenum 处置的案件编号
	 */
	function refreshDataTable(casenum) {
		/* 重新查询 */
		caseBase.queryCaseByCasenum(casenum, function(caseJson) {
			/* 不能使用替换方法 导致mui-slder无法滑动 原因未知 */

			/* 寻找原来案件元素的位置 */
			for (var i = 0; i < sliderCaseDatas.length; i++) {
				if (sliderCaseDatas[i].casenum === caseJson.casenum) {
					//找到了 记录下来
					sliderMoveIndex = i;
					break;
				}
			}
			/* 替换元素 */
			sliderCaseDatas.splice(sliderMoveIndex, 1, caseJson);
			/* 先关闭弹出框 */
			mui('#queryResultPopover').popover('toggle');
			/* 重置内容 */
			showCaseQueryResult(sliderCaseDatas);
		});
	}
</script>