LSQZrzyAPP/unpackage/resources/H5EFBB1F4/www/js/map/map.zf.js

/**
 * 创建者：王成
 * 创建日期：2022年5月31日
 * 描述：地图页面中综合执法相关功能
 */

/* 查询到的案件Id集合 */
var queryCaseIds = [];

/* 查询图层模型 */
var zfQueryLayerObj = undefined;

/**
 * 查询初始化
 */
function MapQueryConfigInit() {
	/* 获取存储的用户信息 */
	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) {
				if (zfQueryLayerObj.isCase == "1") {
					queryCaseIds.length = 0;
					queryCaseIds.push(value);
					// caseBase.queryDataByCaseId(queryCaseIds);
					/* 替换统一方法试试 */
					showManyLayerQueryResult([{
						cName: '案件图斑',
						caseId: value,
						isCase: true,
					}], true);
				} else {
					zfFeatureQueryModel.start = '1';
					zfFeatureQueryModel.fldName = zfQueryLayerObj.queryField;
					zfFeatureQueryModel.fldValue = value;
					zfFeatureQueryModel.tabName = zfQueryLayerObj.eName;
					zfFeatureQueryModel.showFldName = zfQueryLayerObj.queryField;
					/* 开始查询数据 */
					zfQueryResultIndex = 0;
					beginQueryFeatureByLayer();
				}
			});

			/**
			 * 绑定查询返回事件
			 * @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 zfFeatureQueryModel = {
	tabName: '',
	fldName: '',
	fldValue: '',
	showFldName: '',
	queryType: '',
	start: '1',
	count: '10',
}
/**
 * 查询当前图层符合条件的空间数据
 */
function beginQueryFeatureByLayer() {
	sendAjax({
		waitMessage: '查询中...',
		url: 'appQueryFeatureData',
		data: zfFeatureQueryModel,
		success: function(resData) {
			showFeatureQueryResult(resData[0]);
		},
		error: function(err) {
			muiAlertError(err);
		}
	})
}

/* 执法图层查询内容结果容器 */
var zfQueryResultFather = undefined;
/* 执法图层查询结果序号 */
var zfQueryResultIndex = 0;

/**
 * 执法相关图层查询初始化
 */
function showQueryResultPanel(title) {
	/* 创建根部滚动容器 */
	var divScroll = document.createElement('div');
	divScroll.className = 'mui-scroll-wrapper';

	/* 创建滚动子容器 */
	var divScrollChild = document.createElement('div');
	divScrollChild.className = 'mui-scroll';
	divScroll.append(divScrollChild);

	/* 创建具体内容容器 */
	zfQueryResultFather = document.createElement('div');
	zfQueryResultFather.className = 'jt-data-panel';
	divScrollChild.append(zfQueryResultFather);

	/* 创建弹窗的标题头 */
	var header = document.createElement('header');
	header.className = 'mui-bar';
	header.innerHTML = "<font class='jt-popover-title'>" + title + '</font> 查询结果';

	/* 显示详细信息 */
	_showMuiPopover(header, divScroll);
}

/**
 * 展示查询到的空间数据
 * @param {JSON} jsonData 查询到的数据
 */
function showFeatureQueryResult(jsonData) {
	/* 显示查询结果框 */
	showQueryResultPanel(zfQueryLayerObj.cName);
	/* 移除显示更多按钮 */
	$(".jt-data-row").remove();
	for (var i in jsonData.dataList) {
		var item = jsonData.dataList[i];
		var divRow = document.createElement('div');
		divRow.className = 'jt-feature-data-row';
		zfQueryResultFather.append(divRow);
		var divHtml = "<span>" + (++zfQueryResultIndex) + "</span>";
		divHtml += "<span>" + item.feaName + "</span>";
		divHtml += "<span>" + item.feaArea + "</span>";
		divHtml += "<button type='button' class='mui-btn app-icon app-icon-location'";
		divHtml += " onclick = \"_queryFeatureWktAndLocation('" + item.feaId + "','" + item.tabName + "')\" />"
		divHtml += "<button type='button' class='mui-btn app-icon app-iocn-details jt-button'";
		divHtml += " onclick = \"openDetailsPage('" + item.tabName + "','" + item.feaId + "')\" />"
		divHtml += "</div>";
		divRow.innerHTML = divHtml;
	}
	/* 判断是否需要追加加载更多按钮 */
	if (jsonData.isLast != "1") {
		/* 添加 加载更多按钮 */
		var divRow = document.createElement('div');
		divRow.className = 'jt-data-row';
		zfQueryResultFather.append(divRow);
		var btn = document.createElement('button');
		btn.id = "lastDom";
		btn.className = 'mui-btn mui-btn-block jt-btn-load';
		btn.innerHTML = "加载更多";
		btn.onclick = function() {
			mui(this).button('loading');
			zfFeatureQueryModel.start = parseInt(zfFeatureQueryModel.start) + parseInt(zfFeatureQueryModel.count);
			/* 开始查询数据 */
			beginQueryFeatureByLayer();
		}
		divRow.append(btn);
	}
}
/* 可供查询的多图层配置 */
var queryLayerConfig = [];

/**
 * 查询多图层配置
 * @param {JSON} subjectLayerConfig 专题图层配置
 */
function zf_manyLayerConfigInit(subjectLayerConfig) {
	let queryIds = subjectLayerConfig ? subjectLayerConfig.queryIds + "," : undefined;
	/* 获取图层 */
	getSaveUserLayers({
		success: function(jsonLayers) {
			var btnHtml = "";
			/* 获取具体图层 */
			for (let layer of jsonLayers[0].layerList) {
				if (queryIds === undefined) {
					if (layer.isQuery == '1') {
						queryLayerConfig.push(layer);
					}
				} else if (queryIds.indexOf(layer.layerId) != -1) {
					if (layer.isQuery == '1') {
						queryLayerConfig.push(layer);
					}
				}
			}
			/* 设置默认查询图层 */
			zf_selectQueryLayer(queryLayerConfig[0]);
			/* 判断可查询的图层数 */
			if (queryLayerConfig && queryLayerConfig.length > 1) {
				$(".jt-layer-select-btn").show(); /* 显示多图层选择按钮 */
				/* 多图层选择按钮绑定事件 */
				$(".jt-layer-select-btn")[0].addEventListener('tap', function() {
					showLeftWindow('查询图层选择', 6, function() {
						initSelectLayer();
					});
				});
			}
		},
		error: function(err) {
			muiAlertError(err);
		},
	});
}

/**
 * 初始化选择图层
 */
function initSelectLayer() {
	let btnHtml = "";
	for (let i in queryLayerConfig) {
		let layer = queryLayerConfig[i]
		btnHtml += "<button class='mui-btn' ";
		btnHtml += "onclick=\"zf_selectQueryLayer(" + JSON.stringify(layer).replace(/\"/g,
			"&quot;") + ")\"><span class=\"app-icon app-icon-map-layer\"></span>";
		btnHtml += layer.cName;
		btnHtml += "</button>";
	}
	/* 加入列表 */
	$(".jt-layer-select-content").html(btnHtml);
	mui('.mui-scroll-wrapper').scroll();
}

/**
 * 打开左侧滑出窗口
 * @param {string} title 标题
 * @param {number} width 宽度[0-1]比例
 * @param {function} callback 回调
 */
function showLeftWindow(title, width, callback) {
	var domTitle = $(".jt-popover-left .mui-bar .jt-title")[0];
	$(domTitle).html(title);
	$($('.jt-popover-left')[0]).animate({
		right: (100 - width * 10) + '%',
		width: width * 10 + '%',
	}, function() {
		if (callback) callback();
	});
}

/**
 * 关闭左侧滑出窗口
 * @param {function} callback 回调
 */
function closeLeftWindow(callback) {
	$($('.jt-popover-left')[0]).animate({
		right: (100) + '%',
	}, function() {
		if (callback) callback();
	});
}

/**
 * 
 * @param {JSON} layer 选择的查询图层
 */
function zf_selectQueryLayer(layer) {
	closeLeftWindow();
	/* 设置当前查询图层 */
	zfQueryLayerObj = layer;
	var hintContent = "<font class='jt-font-layer-hint'>" + layer.cName + "</font>";
	hintContent += " " + layer.showHint;
	$(".mui-search .mui-placeholder >span:nth-child(2)").html(hintContent);
	$("#search").val('');
	$(".mui-input-row.mui-search.mui-active").removeClass('mui-active');
}

/* 当前显示的案件结果集合 */
var sliderCaseDatas = undefined;
/* slider控件显示的索引 */
var sliderMoveIndex = 0;
/**
 * 添加查询案件到集合中
 * @param {Array[JSON]} caseDatas 查询案件数据集
 */
function showCaseQueryResult(caseDatas) {
	/* 如果未查询到任何案件 则直接提示返回 */
	if (caseDatas.length == 0) {
		return;
	}
	/* 赋值查询案件数据集 */
	sliderCaseDatas = caseDatas;
	sliderMoveIndex = 0;
	/* 赋值案件数量 用以显示 */
	queryCaseCount = caseDatas.length;
	/* 创建内容slider容器*/
	let divSlider = document.createElement('div');
	divSlider.className = 'mui-slider';

	/* 创建具体内容容器 */
	let divContent = document.createElement('div');
	divContent.className = 'mui-slider-group'
	divSlider.append(divContent);
	/* 循环增加所有案件 */
	for (var i = 0; i < caseDatas.length; i++) {
		appendToSliderItemByCase(caseDatas[i], divContent, false);
	}
	/* 清除原有显示内容 */
	$("#queryResultPopover").html('');
	/* 创建弹窗的标题头 */
	let header = document.createElement('header');
	header.className = 'mui-bar';
	header.id = 'queryResultTitle'
	header.innerHTML = "当前案件 " + (sliderMoveIndex + 1) + "/" + queryCaseCount;
	_showMuiPopover(header, divSlider);
	/* 初始化slider 这很重要 否则将无法滑动*/
	mui('.mui-slider').slider().gotoItem(sliderMoveIndex);
	/* 滑动组件滑动监听 */
	document.querySelector(".mui-slider").addEventListener('slide', function(event) {
		/* 记录当前手工切换到哪一个了 以便在进行案件事物处理后 能正确切换到刚刚处理的案件 */
		$('#queryResultTitle').html("当前案件 " + (event.detail.slideNumber + 1) + "/" + queryCaseCount);
	});
}

/**
 * 向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);
}

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

/**
 * 处理案件处置 处理、审核、派发、撤派 等操作成功后的后续处理事宜
 * @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);
	});
}

/**
 * 打开航线查询框
 */
function showFlightLineQueryPopover() {
	$("#divFlightQuery").slideDown(600);
}

/**
 * 关闭航线查询框
 */
function hideFlightLineQueryPopover() {
	$("#divFlightQuery").slideUp(600);
}

/* 挂接事件 */
var btnDate = document.getElementById('btnFlightDate');
btnDate.addEventListener('tap', function() {
	var _self = this;
	if (_self.picker) {
		_self.picker.show(function(rs) {
			$(_self).html(rs.text);
			$(_self).attr('data-value', rs.text);
			getLineUsersByDate(rs.text);
		});
	} else {
		var optionsJson = this.getAttribute('data-options') || '{}';
		var options = JSON.parse(optionsJson);
		_self.picker = new mui.DtPicker(options);
		_self.picker.show(function(rs) {
			$(_self).html(rs.text);
			$(_self).attr('data-value', rs.text);
			getLineUsersByDate(rs.text);
		});
	}
});

/* 航线用户 */
var lineUsers = [];
/**
 * 根据日期获取该日期内拥有航线数据的全部用户
 * @param {string} strDate 日期
 */
function getLineUsersByDate(strDate) {
	lineUsers = [];
	var iData = {
		date: strDate,
	}
	sendAjax({
		dataType: 'post',
		url: 'appQueryLineUsersByDate',
		data: iData,
		waitMessage: '正在同步数据...',
		success: function(resData) {
			for (var i in resData) {
				lineUsers.push({
					value: resData[i].selCode,
					text: resData[i].selName,
				})
			}
			addListenerToSelectButton('btnFlightMember', lineUsers);
		},
		error: function(err) {
			clearSelectButton('btnFlightMember');
			muiAlertError(err);
		}
	})
}

/**
 * 查询航线数据
 */
function event_click_queryLines() {
	var queryLinesModel = {
		date: getAttributeValue('btnFlightDate', 'data-value'),
		userId: getAttributeValue('btnFlightMember', 'data-code'),
	}
	if (queryLinesModel.date == "") {
		muiAlert("请选择查询日期！", "敬告");
		return;
	}
	if (queryLinesModel.userId == "") {
		muiAlert("请选择查询巡查员！", "敬告");
		return;
	}
	queryLines(queryLinesModel);
}

/**
 * 查询指定日期指定用户的航线数据
 * @param {JSON} queryModel 查询模型
 */
function queryLines(queryModel) {
	sendAjax({
		dataType: 'post',
		url: 'appQueryLinesByDateAndUser',
		data: queryModel,
		waitMessage: '正在查询航线...',
		success: function(resData) {
			var count = 0;
			for (var i in resData) {
				var points = [];
				var line = resData[i];
				count += parseInt(line.points.length);
				for (var idx in line.points) {
					points.push({
						x: line.points[idx].longitude,
						y: line.points[idx].latitude,
					});
				}
				jtMapKit.AddPointsToMap(points);
			}
			$(".jt-line-result")[0].innerHTML = "航点" + count + "个";

		},
		error: function(err) {
			muiAlertError(err);
		}
	})
}

/**
 * 清除航线
 */
function event_click_clearLines() {
	jtMapKit.clearGraphic();
}

/* +++++++++++++++++++点击事件+++++++++++++++++++++++++++ */
/**
 * 地图上点击查询案件
 */
function EventClick_PointQuery() {
	muiToast("地图单击案件图斑进行查询!");
	jtMapKit.queryCaseByPoint({
		url: caseServerUrl,
		filter: caseQueryFilter,
	}, function(res) {
		showQueryTaskResult(res);
	}, function(err) {
		muiAlert(err, '警告');
	});
}

/**
 * 地图上区域查询案件
 */
function EventClick_AreaQuery() {
	muiToast("地图上单击绘制区域，点击查询按钮进行查询!");
	jtMapKit.queryCaseByPolygon({
		url: caseServerUrl,
		filter: caseQueryFilter,
	}, function(op) {
		createToolsBySketch('案件查询', 'caseQueryByPolygonComplete', {
			geometry: op.geometry,
		});
	}, function(res) {
		hideNormalResult();
		showQueryTaskResult(res);
	}, function(err) {
		hideNormalResult();
		muiAlert(err, '警告');
	});
}

/**
 * 案件查询完成操作
 * @param {JSON} options 配置项
 * options.geometry{JSON}:查询参考要素
 */
function caseQueryByPolygonComplete(options) {
	if (options.geometry == undefined || options.geometry.rings[0].length <= 3) {
		muiAlert("绘制的区域不符合要求,请继续绘制");
		return;
	}
	jtMapKit.queryCaseByPolygonComplete();
}

/**
 * 案件地类分析
 */
function EventClick_CaseAnalysis() {
	muiToast("地图单击案件图斑进行分析!");
	selectFeatureExecuteAnalysis({
		tabName: 'TIN_XJGL_SGLIST_POLYGON',
		fldName: 'ajh',
	});
}

/**
 * 案件查询结果窗口管理 显示\隐藏
 */
function EventClick_QueryWindow() {
	mui('#queryResultPopover').popover('toggle');
}

/**
 * 分析案件占地情况
 * @param {string} caseId 案件Id
 */
function beginAnalysisCaseFloorArea(caseId) {
	createAndOpenPage({
		htmlPath: 'case-analysis-result.html',
		autoback: true,
		title: '案件图斑占压分析',
		extras: {
			caseId: caseId,
		},
	});
}