/** * 创建者:王成 * 创建日期: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 = "" + title + ' 查询结果'; /* 显示详细信息 */ _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 = "" + (++zfQueryResultIndex) + ""; divHtml += "" + item.feaName + ""; divHtml += "" + item.feaArea + ""; divHtml += ""; } /* 加入列表 */ $(".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 = "" + layer.cName + ""; 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, }, }); }