wcheng81
/
LSQZrzyAPP


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375
							<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>地图页面</title>
		<link href="../css/mui.min.css" rel="stylesheet" />
		<!-- 引入自定义样式 -->
		<link rel="stylesheet" type="text/css" href="../css/app.css" />
		<!--ArcGIS地图相关-->
		<!-- 		<link rel="stylesheet" href="http://218.59.194.74:8088/arcgis/4.13/esri/themes/light/main.css" />
		<script src="http://218.59.194.74:8088/arcgis/4.13/init.js"></script> -->
		<link rel="stylesheet" href="https://js.arcgis.com/4.21/esri/themes/light/main.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="../css/cr.map.css"/>
	</head>
	<body>
		<!-- 具备侧滑功能 根容器 -->
		<!-- <div id="offCanvasWrapper" class="mui-off-canvas-wrap mui-scalable">
			<aside class="mui-off-canvas-right">
				<div class="mui-scroll-wrapper">
					<div class="mui-scroll">你好，我是侧滑菜单测试</div>
				</div>
			</aside>
			<div class="mui-inner-wrap">
			</div>
		</div> -->
		<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="MainMap" style="height:100%;width: 100%;position: relative;"></div>
		<div class="ui-content-padded" style="position: absolute;top: 60px;right: 4px;width: 40px;">
			<!-- 图层控制 -->
			<button class="mui-btn wc-map-div-btn" id="divLayerControl" onclick="EventClick_Layer(this)">
				<span class="app-icon app-icon-map-layer"></span>
			</button>
			<!-- 切换影像图 -->
			<button class="mui-btn wc-map-div-btn" id="divShowRaster" onclick="EventClick_ShowRaster()">
				<span class="app-icon app-icon-map-raster"></span>
			</button>
			<!-- 切换为标准底图 -->
			<button class="mui-btn wc-map-div-btn" id="divShowVector" onclick="EventClick_ShowVector()">
				<span class="app-icon app-icon-map-vector"></span>
			</button>
			<!-- 测量长度 -->
			<button class="mui-btn wc-map-div-btn" id="divMeasureLength" onclick="EventClick_MeasureLength()">
				<span class="app-icon app-icon-map-measurelength"></span>
			</button>
			<!-- 测量面积 -->
			<button class="mui-btn wc-map-div-btn" id="divMeasureArea" onclick="EventClick_MeasureArea()">
				<span class="app-icon app-icon-map-measurearea"></span>
			</button>
			<!-- GPS定位 -->
			<button class="mui-btn wc-map-div-btn wc-map-tools-hide" id="divLocation" onclick="EventClick_Location()">
				<span class="app-icon app-icon-map-location"></span>
			</button>
			<!-- 地图初始化 -->
			<button class="mui-btn wc-map-div-btn wc-map-tools-hide" id="divMapInit" onclick="EventClick_MapInit()">
				<span class="app-icon app-icon-map-initlocation"></span>
			</button>
			<!-- 坐标查询 -->
			<button class="mui-btn wc-map-div-btn wc-map-tools-hide" id="divQueryCoord" onclick="EventClick_QueryCoord()">
				<span class="app-icon app-icon-map-querycoord"></span>
			</button>
			<!-- 坐标查询 -->
			<button class="mui-btn wc-map-div-btn wc-map-tools-hide" id="divCoordQuery" onclick="EventClick_CoordQuery()">
				<span class="app-icon app-icon-map-coordquery"></span>
			</button>
			<!-- 点查询 -->
			<button class="mui-btn wc-map-div-btn wc-map-tools-hide" id="divPointQuery" onclick="EventClick_PointQuery()">
				<span class="app-icon app-icon-map-pointquery"></span>
			</button>
			<!-- 区域查询 -->
			<button class="mui-btn wc-map-div-btn wc-map-tools-hide" id="divAreaQuery" onclick="EventClick_AreaQuery()">
				<span class="app-icon app-icon-map-areaquery"></span>
			</button>
			<!-- 窗口管理 -->
			<button class="mui-btn wc-map-div-btn wc-map-tools-hide" id="divWindow" onclick="EventClick_QueryWindow()">
				<span class="app-icon app-icon-map-window"></span>
			</button>
			<!-- 清扫工具 -->
			<button class="mui-btn wc-map-div-btn wc-map-tools-hide" id="divClean" onclick="EventClick_Clean()">
				<span class="app-icon app-icon-map-clean"></span>
			</button>
			<!-- 分屏对比 -->
			<button class="mui-btn wc-map-div-btn wc-map-tools-hide" id="divScreen" onclick="EventClick_SplitScreen()">
				<span class="app-icon app-icon-map-screen"></span>
			</button>
		</div>
		<!-- 图层控制弹出窗口 -->
		<div id="layerPopover" class="mui-popover">
			<div class="mui-scroll-wrapper">
				<div class="mui-scroll">
					<h5>业务图层</h5>
					<form id="tabLayerYW" class="mui-input-group"></form>
					<h5>影像图层</h5>
					<form id="tabLayerYX" class="mui-input-group"></form>
				</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="popoverCoordLocation" class="mui-popover mui-popover-action mui-popover-bottom wc-popover-coord-input">
			<header class="mui-bar">输入坐标进行查询定位</header>
			<div style="margin-top: 50px;">
				<div class="mui-row wc-row wc-input-row">
					<span class="app-icon app-icon-nomarl-location"></span><span>经度</span>
					<div class="mui-input-row">
						<input id="iLongitude" type="text" class="mui-input-clear mui-input f-color"
							placeholder="输入经度118.2345">
					</div>
				</div>
				<div class="mui-row wc-row wc-input-row">
					<span class="app-icon app-icon-nomarl-location"></span><span>纬度</span>
					<div class="mui-input-row">
						<input id="iLatitude" type="text" class="mui-input-clear mui-input f-color"
							placeholder="输入纬度38.0213">
					</div>
				</div>
				<div class="mui-row wc-row" style="justify-content: flex-end;">
					<button type="button" class="mui-btn mui-btn-primary wc-btn-location"
						onclick="EventClick_InputLocation()">定位</button>
				</div>
			</div>
		</div>
	</body>
</html>
<!-- 引入mui脚本 -->
<script src="../js/mui.js" type="text/javascript" charset="utf-8"></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>
<!-- 引入ArcGIS脚本 -->
<script src="https://js.arcgis.com/4.21/"></script>
<!-- 引入jQuery脚本 -->
<script src="../js/jquery.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>
<!-- 引入案件脚本 -->
<script src="../js/case.js" type="text/javascript" charset="utf-8"></script>
<!-- 进入ajax脚本 -->
<script src="../js/ajax.js" type="text/javascript" charset="utf-8"></script>
<!--引入地图相关脚本-->
<script src="../js/JTMapKit.js"></script>
<script src="../js/MapManager.js"></script>
<!-- 引入案件基础脚本 -->
<script src="../js/case-list-base.js" type="text/javascript" charset="utf-8"></script>
<!-- 引入webview脚本 -->
<script src="../js/webview.js" type="text/javascript" charset="utf-8"></script>
<!-- 本页专用脚本 -->
<script type="text/javascript">
	/* 控件定义 */
	var domTableYX = document.getElementById("tabLayerYX");
	var domTableYW = document.getElementById("tabLayerYW");
	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 = [];

	/**
	 * plus初始化方法
	 */
	plusInit(function() {

	})

	/**
	 * 覆盖页面出现显示方法
	 */
	function pageFirstShow() {
		/* 根据获取参数判断是定位还是普通 */
		var self = plus.webview.currentWebview();
		if (self.location != undefined) {
			$('.mui-bar').hide();
			$('.wc-map-tools-hide').hide();
			$('.ui-content-padded').css('top', '10px');
			/* 给导航栏加上按钮 */
			var navStyle = self.getStyle();
			plusInitAndroid(function(){
				self.setStyle(navStyle);
			})
			/* 设置地图容器的高度 -44是为了减掉导航栏的高度 */
			$("#MainMap").height(navStyle.height - 64);
		}
		setTimeout(function() {
			/* 地图查询初始化 */
			MapQueryConfigInit();
			MapInit("MainMap", self.location);
		}, 200);
	}

	/**
	 * 查询初始化
	 */
	function MapQueryConfigInit() {
		printToConsole("地图页面显示！");
		/* 写入此方法是为了避免使用回退键返回 */
		mui.back = function() {}
		// MapInit("MainMap", undefined);
		/* 获取存储的用户信息 */
		getSaveUserInfo({
			success: function(userInfo) {
				var joinUser = userInfo;
				printToConsole("caseBase = " + caseBase);
				//初始化案件实例
				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>