define([ "dojo", "dojo/_base/declare", "dojo/_base/lang", "base/BaseWidget", "dojo/text!widgets/Statistics/template.html", "widgets/Statistics/config", "base/AppEvent", "base/ConfigData", "dojo/dom", "dojo/dom-construct", "dojo/dom-attr", "dojo/dom-style", "dojo/on", "dojo/_base/array", "esri/tasks/query", "esri/tasks/QueryTask", "esri/symbols/SimpleFillSymbol", "esri/symbols/SimpleLineSymbol", "esri/symbols/CartographicLineSymbol", "esri/graphic", "esri/Color", "esri/toolbars/draw", "esri/tasks/StatisticDefinition", "dojo/domReady!" ], function (dojo, declare, lang, BaseWidget, template, config, AppEvent, ConfigData, dom, domConstruct, domAttr, domStyle, on, arrayUtils, Query, QueryTask, SimpleFillSymbol, SimpleLineSymbol, CartographicLineSymbol, Graphic, Color, draw, StatisticDefinition) { var Widget = declare([BaseWidget], { widgetName: "StatisticsWidget", label: "统计分析", templateString: template, _map: null, statisticsArea: null, loading: false, statisticsCondition: null, statisticsData: null, _layui: null, constructor: function (options, srcRefNode) { this._map = options.map; StatisticsObj = this; $(window).resize(function () { setTimeout(function () { if ($('#statistics-extent').is(':visible')) { var maxheight = $('#tabcontainer').height() - 345; $('.statistics-details').css('height', maxheight); $(".statistics-details").mCustomScrollbar("update"); //更新滚动条 } else { var maxheight = $('#tabcontainer').height() - 250; $('.statistics-details').css('height', maxheight); $(".statistics-details").mCustomScrollbar("update"); //更新滚动条 } }, 500); }); //初始化layui弹窗 layui.use('layer', function () { StatisticsObj._layui = layui.layer; }); }, postCreate: function () { }, startup: function () { this.inherited(arguments); //初始化图层目录树 StatisticsObj._getservices(); // 运行右侧统计部件,和统计详情展示部件 AppEvent.dispatchAppEvent(AppEvent.RUN_WIDGET, "echartsWidget"); // AppEvent.dispatchAppEvent(AppEvent.RUN_WIDGET, "detailsWidget"); //绑定右侧选择栏选择事件,并派发开始统计方法 StatisticsObj.appendEventHandlers(); }, open: function () { var maxheight = $('#tabcontainer').height() - 345; $('.statistics-details').css('height', maxheight); this.inherited(arguments); }, _getservices: function () { //动态构建图层目录树 var ztreeObj = []; var statistcsLayerName = []; for (var configKey in config.statistics) { statistcsLayerName.push(configKey); } var resultObj = config.treeData; for (var i = 0; i < resultObj.length; i++) { if (resultObj[i].resourcesPid == 0 || statistcsLayerName.indexOf(resultObj[i].resourcesName) != -1) { var searchCatalog = {}; searchCatalog.id = resultObj[i].resourcesId; searchCatalog.pId = resultObj[i].resourcesPid; searchCatalog.name = resultObj[i].resourcesName; searchCatalog.path = resultObj[i].resourcesUrl; ztreeObj.push(searchCatalog); } } var setting = { check: { enable: false, }, data: { simpleData: { enable: true } }, callback: { onClick: StatisticsObj._zTreeOnClick, beforeClick: StatisticsObj._beforeClick } }; $.fn.zTree.init($("#statisticsTree"), setting, ztreeObj); }, _beforeClick: function (treeId, treeNode) { if (!treeNode.path && treeNode.isParent) { var treeObj = $.fn.zTree.getZTreeObj(treeId); treeObj.expandNode(treeNode, !treeNode.open, false, true, true); } return treeNode.path && !treeNode.isParent; }, _zTreeOnClick: function (event, treeId, treeNode) { //目录树点击事件 if (treeNode.path != undefined && treeNode.path != null && treeNode.path != "") { // 获取目录树相关属性,填充到input栏 $('.statistics-layer-input').val(treeNode.name); $('.statistics-layer-input').attr('data', treeNode.path); // 动态获取统计单元配置 StatisticsObj.getStatisticsCondition(treeNode.name); //关闭选择框 $(".statistics-tree-box").fadeOut(1); } }, getStatisticsCondition: function (e) {// 动态获取统计单元配置 for (var statisticsKey in config.statistics) {// 动态获取统计配置 if (e.indexOf(statisticsKey) != -1) { StatisticsObj.statisticsCondition = config.statistics[statisticsKey]; break; } } //添加对应统计单元 // var optionStr = ''; var optionStr = ''; StatisticsObj.statisticsCondition.condition.map(function (value, index) { if (value) { optionStr += ''; } }); $('#statistics-condition').html(optionStr); //根据第一项判断是否显示范围选择栏 if (StatisticsObj.statisticsCondition.condition[0] == '行政区') { $("#statistics-extent").hide(); $("#statistics-city option:first").attr('selected', true); $("#statistics-county option:first").attr('selected', true); setTimeout(function () { var maxheight = $('#tabcontainer').height() - 250; $('.statistics-details').css('height', maxheight); $(".statistics-details").mCustomScrollbar("update"); //更新滚动条 }, 200); } else { $("#statistics-extent").show(); var maxheight = $('#tabcontainer').height() - 345; $('.statistics-details').css('height', maxheight); $(".statistics-details").mCustomScrollbar("update"); //更新滚动条 } }, getFeaturesIds: function (url) {//先获取所有要素的OID $("#bg").show(); $.get(url + '?f=pjson', function (e) { var displayField = JSON.parse(e).displayField; var statisType = $('#statistics-condition option:selected').attr('data'); AppEvent.dispatchAppEvent("clearcolor"); if ($('#bg').is(":hidden")) $('#bg').show(); var queryTask = new QueryTask(url); //统计湿地个数 var queryCount = new Query(); queryCount.where = $('#statistics-county').val() != '县区/全市' ? "COUNTY LIKE '" + $('#statistics-county').val() + "'" : $("#statistics-city").val() != '市/全省' ? "CITY LIKE '" + $('#statistics-city').val() + "'" : '1=1'; if (StatisticsObj.statisticsArea) {//添加查询范围 queryCount.geometry = StatisticsObj.statisticsArea; queryCount.where = '1=1';//有自定义范围时,将where设为查询所有 } queryCount.outFields = [displayField, statisType]; queryCount.returnGeometry = false; queryTask.execute(queryCount, lang.hitch(this, function (result) { var resultCount = {}; var resultFeature = {}; var datas = result.features; for (var dictionaryKey in config.dictionary) {//判断是否包括需要字典转换的属性,包括的话直接进行转换 datas.map(function (value) { if (value.attributes.hasOwnProperty(dictionaryKey)) { value.attributes[dictionaryKey] = config.dictionary[dictionaryKey][value.attributes[dictionaryKey]]; return; } }); } datas.map(function (value) { if (resultFeature.hasOwnProperty(value.attributes[statisType])) { resultFeature[value.attributes[statisType]].push(value.attributes[displayField]); } else { resultFeature[value.attributes[statisType]] = [value.attributes[displayField]]; } }); for (var resultFeatureKey in resultFeature) { resultCount[resultFeatureKey] = 0; resultFeature[resultFeatureKey].map(function (item, index) { if (resultFeature[resultFeatureKey].indexOf(item) === index) { resultCount[resultFeatureKey]++; } }); } //统计其他信息 var query = new Query(); query.where = $('#statistics-county').val() != '县区/全市' ? "COUNTY LIKE '" + $('#statistics-county').val() + "'" : $("#statistics-city").val() != '市/全省' ? "CITY LIKE '" + $('#statistics-city').val() + "'" : '1=1'; if (StatisticsObj.statisticsArea) {//添加查询范围 query.geometry = StatisticsObj.statisticsArea; query.where = '1=1';//有自定义范围时,将where设为查询所有 } //添加统计参数 var statDefs = []; for (var itemKey in StatisticsObj.statisticsCondition.item) { var StatDef = new StatisticDefinition(); if (StatisticsObj.statisticsCondition.item[itemKey] == '湿地个数') { StatDef.statisticType = "count"; StatDef.onStatisticField = displayField; StatDef.outStatisticFieldName = "湿地个数"; } else { StatDef.statisticType = "sum"; StatDef.onStatisticField = StatisticsObj.statisticsCondition.itemFields[itemKey]; StatDef.outStatisticFieldName = StatisticsObj.statisticsCondition.item[itemKey]; } statDefs.push(StatDef); } query.returnGeometry = false; query.groupByFieldsForStatistics = [statisType]; query.outStatistics = statDefs; queryTask.execute(query, function (results) { if (results.features.length > 0) { var data = results.features; for (var dictionaryKey in config.dictionary) {//判断是否包括需要字典转换的属性,包括的话直接进行转换 data.map(function (value) { if (value.attributes.hasOwnProperty(dictionaryKey)) { value.attributes[dictionaryKey] = config.dictionary[dictionaryKey][value.attributes[dictionaryKey]]; return; } }); } //构造左下方概览列表 var detailsStr = ''; for (var dataKey in data) { detailsStr += '
  • ' + '

    ' + $('#statistics-condition').val() + ':' + data[dataKey].attributes[statisType] + '

    '; data[dataKey].attributes['湿地个数'] = resultCount[data[dataKey].attributes[statisType]]; for (var attributesKey in data[dataKey].attributes) { if (attributesKey != statisType) { var unit = attributesKey == '湿地个数' ? '(个)' : '(公顷)'; var statisValue = attributesKey == '湿地个数' ? data[dataKey].attributes[attributesKey] : Number(data[dataKey].attributes[attributesKey]).toFixed(2) detailsStr += '

    ' + attributesKey + ':' + statisValue + unit + '

    '; } } detailsStr += '
  • '; } //展开统计列表 $("#echartsWidget").height('100%'); $("#below_bar").show(); StatisticsObj.statisticsData = data; //传递数据构造统计图 AppEvent.dispatchAppEvent("menuclick", { name: $('.statistics-layer-input').val(), url: $('.statistics-layer-input').attr('data'), data: StatisticsObj.statisticsData }); //加载自定义滚动条 $(".statistics-details").mCustomScrollbar("destroy"); //清除滚动条 $('.statistics-details').html(detailsStr); $('.statistics-results').show(); $(".statistics-details").mCustomScrollbar({ scrollButtons: { enable: true, //是否添加 滚动条两端按钮支持 值:true,false scrollType: "continuous", //滚动按钮滚动类型 值:”continuous”(当你点击滚动控制按钮时断断续续滚动) “pixels”(根据每次点击的像素数来滚动) scrollSpeed: 50, //设置点击滚动按钮时候的滚动速度(默认 20) scrollAmount: 60 //设置点击滚动按钮时候每次滚动的数值 像素单位 默认 40像素 }, autoHideScrollbar: true, horizontalScroll: false, //是否创建一个水平滚动条 默认是垂直滚动条 set_width: false, //:设置你内容的宽度 值可以是像素或者百分比 set_height: false, //:设置你内容的高度 值可以是像素或者百分比 mouseWheel: true, //鼠标滚动的支持 值为:true.false }); //统计列表点击事件 $('.statistics-details li').unbind().click(function (e) { AppEvent.dispatchAppEvent('showDetails', { name: $('.statistics-layer-input').val(), url: $('.statistics-layer-input').attr('data'), conditionValue: $(this).children('h3').text().split(':')[1], statisticsArea: StatisticsObj.statisticsArea, statisticsCondition: StatisticsObj.statisticsCondition, }); }); $('#bg').hide(); } else { $(".statistics-details").mCustomScrollbar("destroy"); //清除滚动条 $('.statistics-details').html('
  • 无统计结果

  • '); $('.statistics-results').show(); $('#bg').hide(); } }, function (er) { console.log(er); $(".statistics-details").mCustomScrollbar("destroy"); //清除滚动条 $('.statistics-details').html('
  • 统计出错,请稍后重试

  • '); $('.statistics-results').show(); $('#bg').hide(); }); })); }); }, // getFeatures: function (url, ids) {//根据要素的OID要素填充到列表中 // //获取当前图层的displayfield // $.get(url + '?f=pjson', function (e) { // StatisticsObj.loading = true; // var displayField = JSON.parse(e).displayField; // //根据要素的OID列表查询要素详细信息 // var ids = ids; // var queryTask = new QueryTask(url); // var query = new Query(); // query.returnGeometry = false; // query.outFields = ['OBJECTID', displayField, StatisticsObj.statisticsCondition.cityFields[0]]; // if ($('.statistics-layer-input').val().indexOf('城') != -1) {//城区湿地图层要多输出一个字段 // query.outFields.push("WETLAND_NO"); // } // query.objectIds = ids; // queryTask.execute(query, function (data) { // var data = data.features; // var detailsStr = ''; // if ($('.statistics-layer-input').val().indexOf('城') != -1) {//城区湿地图层显示的名称要组装一下 // for (var dataKey in data) { // detailsStr += '
  • ' + // '

    ' + data[dataKey].attributes[displayField] + "第" + data[dataKey].attributes["WETLAND_NO"] + "号湿地斑块" // + '

    所在行政区:' + data[dataKey].attributes[StatisticsObj.statisticsCondition.cityFields[0]] + '

  • ' // } // } else { // for (var dataKey in data) { // detailsStr += '
  • ' + // '

    ' + data[dataKey].attributes[displayField] + '

    所在行政区:' + // data[dataKey].attributes[StatisticsObj.statisticsCondition.cityFields[0]] + '

  • ' // } // } // //加载自定义滚动条 // $(".statistics-details").mCustomScrollbar("destroy"); //清除滚动条 // $('.statistics-details').html(detailsStr); // $(".statistics-details").mCustomScrollbar({ // scrollButtons: { // enable: true, //是否添加 滚动条两端按钮支持 值:true,false // scrollType: "continuous", //滚动按钮滚动类型 值:”continuous”(当你点击滚动控制按钮时断断续续滚动) “pixels”(根据每次点击的像素数来滚动) // scrollSpeed: 50, //设置点击滚动按钮时候的滚动速度(默认 20) // scrollAmount: 60 //设置点击滚动按钮时候每次滚动的数值 像素单位 默认 40像素 // }, // autoHideScrollbar: true, // horizontalScroll: false, //是否创建一个水平滚动条 默认是垂直滚动条 // set_width: false, //:设置你内容的宽度 值可以是像素或者百分比 // set_height: false, //:设置你内容的高度 值可以是像素或者百分比 // mouseWheel: true, //鼠标滚动的支持 值为:true.false // }); // //统计列表点击事件 // $('.statistics-details li').unbind().click(function (e) { // AppEvent.dispatchAppEvent('showDetails', { // id: $(this).attr('data'), // path: $('.statistics-layer-input').attr('data'), // item: StatisticsObj.itemsFields // }); // }); // StatisticsObj.loading = false; // $('#bg').hide(); // }, function (err) { // console.log(err); // $(".statistics-details").mCustomScrollbar("destroy"); //清除滚动条 // $('.statistics-details').html('
  • 统计出错,请稍后重试

  • '); // $('#bg').hide(); // }); // }); // }, appendEventHandlers: function () {// 绑定各类按钮事件 //绑定dom操作事件 $("#StatisticsWidget .statistics-layer-input").click(function () { $(".statistics-tree-box").fadeToggle(1); }); $("#StatisticsWidget .statistics-layer-input").blur(function () { $(".statistics-tree-box").fadeOut(1); }); $(".statistics-tree-box").mouseenter(function () { $("#StatisticsWidget .statistics-layer-input").unbind("blur"); }); $(".statistics-tree-box").mouseleave(function () { $("#StatisticsWidget .statistics-layer-input").focus(); $("#StatisticsWidget .statistics-layer-input").blur(function () { $(".statistics-tree-box").fadeOut(1); }); }); //统计范围,区域选择tab标签点击事件 $("#statistics-selectScope1").unbind("click").click(function () {//行政区 if (!$(this).hasClass("selectTab")) { $("#statistics-selectScope2").removeClass("selectTab"); $(this).addClass("selectTab"); $('#statistics-drawTools').slideUp("fast"); $('#statistics-seek1').slideDown("fast"); } //清除自定义绘制的范围 if (StatisticsObj.statisticsArea) { StatisticsObj.statisticsArea = null; StatisticsObj._map.graphics.clear(); } }); $("#statistics-selectScope2").unbind("click").click(function () {//自定义 if (!$(this).hasClass("selectTab")) { $("#statistics-selectScope1").removeClass("selectTab"); $(this).addClass("selectTab"); $('#statistics-seek1').slideUp("fast"); $('#statistics-drawTools').slideDown("fast"); } }); //统计单元选择事件 $('#statistics-condition').change(function (e) { if (e.target.value == '行政区') { $("#statistics-extent").hide(); $("#statistics-city option:first").attr('selected', true); $("#statistics-county option:first").attr('selected', true); setTimeout(function () { var maxheight = $('#tabcontainer').height() - 250; $('.statistics-details').css('height', maxheight); $(".statistics-details").mCustomScrollbar("update"); //更新滚动条 }, 200); } else { $("#statistics-extent").show(); var maxheight = $('#tabcontainer').height() - 345; $('.statistics-details').css('height', maxheight); $(".statistics-details").mCustomScrollbar("update"); //更新滚动条 } }); //搜索栏清空按钮点击事件--还原各选项,并清空结果 $('.clear_inputs').click(function () { var maxheight = $('#tabcontainer').height() - 345; StatisticsObj._map.graphics.clear(); StatisticsObj.statisticsArea = null; $("#echartsWidget").height(0); $('.statistics-layer-input').val(''); $("#statistics-city option:first").attr('selected', true); $("#statistics-county option:first").attr('selected', true); $("#statistics-condition option:first").attr('selected', true); $(".statistics-details").mCustomScrollbar("destroy"); //清除滚动条 $('.statistics-details').html('').css('height', maxheight); $('.statistics-results').hide(); $('#bg').hide(); $("#statistics-extent").show(); }); //搜索栏查询按钮点击事件 $('.search_inputs').click(function () { if ($('#statistics-condition option:selected').attr('data')) { StatisticsObj.getFeaturesIds($('.statistics-layer-input').attr('data')); } else { StatisticsObj._layui.msg('请完善统计条件', {icon: 0, offset: ['50%', '50%']}); } }); //选择市区触发事件--查询对应的县区 on(dom.byId("statistics-city"), "change", function () { $('#statistics-county').html(""); StatisticsObj._countyQuery("statistics-city", "statistics-county"); }); //初始化绘制工具 StatisticsObj.drawStatisticsArea(); }, drawStatisticsArea: function () {//统计范围绘制--方法主体 // 添加线样式 var lineSymbol = new CartographicLineSymbol( CartographicLineSymbol.STYLE_SOLID, new Color([250, 0, 0]), 10, CartographicLineSymbol.CAP_ROUND, CartographicLineSymbol.JOIN_MITER, 5 ); // 添加面样式 var fillSymbol = new SimpleFillSymbol( SimpleFillSymbol.STYLE_SOLID, new SimpleLineSymbol( SimpleLineSymbol.STYLE_SOLID, new Color('#fb003b'), 1 ), new Color([0, 0, 0, 0.15]) ); //定义绘制工具初始化函数 var tb = new draw(StatisticsObj._map); tb.on("draw-end", function (evt) {//定义绘制结束回调函数--添加绘制图形至地图GraphicLayer图层中 //deactivate the toolbar and clear existing graphics tb.deactivate(); $('.drawTools-active').removeClass('drawTools-active'); StatisticsObj._map.enableMapNavigation(); // 选择绘制的形状 var symbol; if (evt.geometry.type === "point" || evt.geometry.type === "multipoint") { symbol = markerSymbol; } else if (evt.geometry.type === "line" || evt.geometry.type === "polyline") { symbol = lineSymbol; } else { symbol = fillSymbol; } StatisticsObj.statisticsArea = evt.geometry; StatisticsObj._map.graphics.add(new Graphic(evt.geometry, symbol)); }); // 绘制按钮点击事件,获取需要绘制的形状 on(dom.byId("statistics-drawTools"), "click", function (evt) { if (evt.target.id === "statistics-drawTools") { return; } if (evt.target.id === "clearAll") { //清除按钮清除事件 StatisticsObj._map.graphics.clear(); StatisticsObj.statisticsArea = null; tb.deactivate(); $('.drawTools-active').removeClass('drawTools-active'); StatisticsObj._map.enableMapNavigation(); return; } $('.drawTools-active').removeClass('drawTools-active'); $(evt.target).addClass('drawTools-active'); StatisticsObj._map.graphics.clear(); StatisticsObj.statisticsArea = null; var tool = evt.target.id.toLowerCase(); StatisticsObj._map.disableMapNavigation(); tb.activate(tool); }); }, //COUNTY查询--在县区选择栏中动态添加所包含的县区 _countyQuery: function (city, county) { var city_selected = city; var count_selected = county; var Url = ConfigData.areaQueryURL + "/2"; var queryTask = new QueryTask(Url); var query = new Query(); query.returnGeometry = false; query.outFields = [ "COUNTY" ]; var queryParam; if ($('#' + city_selected + ' option:selected').text() != "市/全省") { queryParam = "CITY like '%" + $('#' + city_selected + ' option:selected').text() + "%'"; } if (queryParam == null) { return; } query.where = queryParam; queryTask.execute(query, function (results) { var optionVal = results.features; for (var i in optionVal) { $('#' + count_selected).append(""); } }); }, }); return Widget; });