<!DOCTYPE html>
|
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.w3.org/1999/xhtml">
|
<head>
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
<meta charset="utf-8" />
|
<link rel="stylesheet" th:href="@{${pubzyWebRoot} + 'BootStrap4/assets/css/style.css'}" />
|
<link rel="stylesheet" th:href="@{${pubzyWebRoot} + 'BootStrap4/expand/css/bootstrap-extract.css'}" />
|
<link rel="stylesheet" th:href="@{${pubzyWebRoot} + 'BootStrap4/assets/plugins/bootstrap-datepicker/old_datepaker/datepicker.css'}" />
|
<link rel="stylesheet" th:href="@{${pubzyWebRoot} + 'BootStrap4/expand/plugins/portlet/css/portlet.css'}" />
|
<script th:src="@{${pubzyWebRoot} + 'BootStrap4/expand/plugins/portlet/portlet.js'}"></script>
|
<!-- 表单样式 -->
|
<script th:src="@{${pubzyWebRoot} + 'BootStrap4/assets/js/jquery.min.js'}"></script>
|
<script th:src="@{${pubzyWebRoot} + 'BootStrap4/expand/plugins/layer/layer.js'}"></script>
|
<script th:src="@{${pubzyWebRoot} + 'BootStrap4/assets/js/tether.min.js'}"></script>
|
<script th:src="@{${pubzyWebRoot} + 'BootStrap4/assets/js/bootstrap.min.js'}"></script>
|
<script th:src="@{${pubzyWebRoot} + 'echarts/echarts.min-3.0.js'}" type="text/javascript"></script>
|
<link href="/css/TuXingConfig.css" rel="stylesheet" />
|
</head>
|
<body>
|
<div id="content">
|
<div id="bodys" style=""></div>
|
</div>
|
</body>
|
<input type="hidden" id="resMainInfoId" th:value="${resourceid}" />
|
<input type="hidden" id="url" th:value="${url}" />
|
<script type="text/javascript">
|
var geoType = ""; //图层空间对象类型
|
|
$(function () {
|
//跨域传递消息监听
|
window.addEventListener('message', function (e) {
|
renovate(e.data.geo);
|
}, false);
|
getLayerGeoType($("#url").val());
|
LoadMap();
|
});
|
|
//获取图层空间对象类型
|
function getLayerGeoType(url) {
|
url = url.replace("/query", "");
|
$.ajax({
|
url: url,
|
type: 'post',
|
async: false,
|
dataType: 'json',
|
data: {f: "pjson"},
|
success: function (json) {
|
if (json.geometryType) {
|
geoType = json.geometryType;
|
}
|
},
|
error: function (e) {
|
alert(e.message);
|
}
|
});
|
}
|
|
//鼠标进入面板时显示刷新按钮，移出隐藏
|
function mouseHover() {
|
var body = document.getElementById("content");
|
body.onmouseover = function () {
|
$("#reload").show();
|
}
|
body.onmouseout = function () {
|
$("#reload").hide();
|
}
|
}
|
|
//缓存数据
|
function LoadCaching() {
|
var url = $("#url").val();
|
var resMainInfoId = $("#resMainInfoId").val();
|
$.ajax({
|
url: "/res/ResExtBusinessLayer/SelectAll?resourceid=" + resMainInfoId,
|
type: 'post',
|
dataType: 'json',
|
data: {},
|
success: function (data) {
|
var json = eval('(' + data.cache + ')');
|
json.vars = eval( json.vars);
|
json.table = eval(json.table);
|
json.charts = eval(json.charts );
|
var Config = eval('(' + data.serviceConfig + ')');
|
Config.charts = eval( json.charts);
|
|
//获取Cache字段的数据
|
for (var i = 0; i < json.vars.length; i++) {
|
var nameId = json.vars[i].name;
|
$("#" + nameId).empty();
|
$("#" + nameId).append(json.vars[i][nameId]);
|
}
|
for (var i = 0; i < json.table.length; i++) {
|
var nameId = json.table[i].name;
|
$("#" + nameId).empty();
|
$("#" + nameId).append(HtmlUtil.htmlDecodeByRegExp(json.table[i][nameId]));
|
}
|
for (var i = 0; i < json.charts.length; i++) {
|
var nameId = json.charts[i].name;
|
$("#" + nameId).empty();
|
var classField = Config.charts[i][nameId].classField;
|
var one = echarts.init(document.getElementById(nameId));
|
var option = json.charts[i][nameId];
|
one.setOption(option);
|
one.on('click', function (params) {
|
if (params.componentType === 'series') {
|
var name = params.name;
|
DisplayCondition(name, params.data.classField)
|
}
|
});
|
}
|
},
|
error: function (e) {
|
alert(e.message);
|
}
|
});
|
}
|
|
//点击刷新按钮，刷新数据
|
function renovate(geo) {
|
var url = $("#url").val();
|
var resMainInfoId = $("#resMainInfoId").val();
|
$.ajax({
|
url: "/res/ResExtBusinessLayer/SelectAll?resourceid=" + resMainInfoId,
|
type: 'post',
|
dataType: 'json',
|
data: {},
|
success: function (data) {
|
var json = eval('(' + data.serviceConfig + ')');
|
//循环vars,获取var参数
|
var varsJson = [];
|
for (var i = 0; i < json.vars.length; i++) {
|
var name = json.vars[i].name;
|
$("#" + name).empty();
|
//z代表下标
|
var z = i + 1;
|
//fieId要求统计的字段,StatisticalMethod统计的方式
|
var fields = json.vars[i][name].field;
|
var StatisticalMethod = json.vars[i][name].StatisticalMethod;
|
var where = json.vars[i][name].where;
|
var DecimalDigits = json.vars[i][name].DecimalDigits;
|
var UnitConversion = json.vars[i][name].UnitConversion;
|
if (where == null || where == "") {
|
where = "1=1";
|
}
|
//发送请求，统计该字段对应的数据
|
var tongji = PostRequest(fields, StatisticalMethod, url, where, geo);
|
if (tongji == -1) {
|
$("#" + name).append("{var" + z + "参数配置不能被查询，请重新配置}");
|
} else {
|
if (UnitConversion != null && UnitConversion != "") {
|
tongji = tongji / UnitConversion;
|
}
|
|
if(tongji.toString().indexOf('.') >0 ) {
|
if (DecimalDigits != null && DecimalDigits != "") {
|
tongji = tongji.toFixed(DecimalDigits);
|
}
|
}
|
$("#" + name).append(tongji);
|
}
|
var obj = {};
|
obj[name] = tongji;
|
obj["name"] = name;
|
varsJson.push(obj);
|
}
|
|
var tableJson = [];
|
//循环tables，获取tables参数
|
for (var j = 0; j < json.tables.length; j++) {
|
var nameId = json.tables[j].name;
|
$("#" + nameId).empty();
|
z = j + 1;
|
|
var table = json.tables[j][nameId];
|
var GroupBy = table.groupby;
|
var groupbyalias = table.groupbyalias;
|
var DecimalDigits = table.DecimalDigits;
|
var UnitConversion = table.UnitConversion;
|
//查询字段
|
var where = table.where;
|
if (where == null || where == "") {
|
where = "1=1";
|
}
|
var tableNum = "";
|
//循环table对应的字段，查询数据
|
var name = [];
|
var value = [];
|
for (var m = 0; m < table.list.length; m++) {
|
var alias = table.list[m].alias;
|
var fields = table.list[m].fields;
|
var StatisticalMethod = table.list[m].StatisticalMethod;
|
|
if (alias == "") {
|
alias = fields;
|
}
|
|
//循环读取别名
|
if (GroupBy != "") {
|
var list = GroupByPostRequest(GroupBy, fields, StatisticalMethod, alias, url, where, geo, UnitConversion, DecimalDigits);
|
//创建第一列
|
if (m == 0) {
|
var tableHtml = "<table class=\"table table-bordered table-hover\" name='" + nameId + "'>";
|
for (var n = 0; n < list.length; n++) {
|
if (n == 0) {
|
tableHtml += "<thead><tr><th>" + groupbyalias + "</th></tr></thead>";
|
tableHtml += "<tr onclick=\"DisplayCondition('" + list[n].name + "', '" + GroupBy + "')\"><th scope=\"row\" >" + list[n].name + "</th></tr>";
|
} else {
|
tableHtml += "<tr onclick=\"DisplayCondition('" + list[n].name + "', '" + GroupBy + "')\"><th>" + list[n].name + "</th></tr>";
|
}
|
}
|
tableHtml += "</table>";
|
$("#" + nameId).append(tableHtml);
|
var c = document.getElementsByName(nameId)[0]; //获取表格信息
|
var len = c.rows.length;//获取表格的行数
|
if (list.length != 0) {
|
var ro = c.rows[0].cells;
|
var len2 = ro.length;//获得列数
|
for (var n = 0; n < len; n++) {
|
if (n == 0) {
|
var x = c.rows[n].insertCell(len2);
|
x.innerHTML = alias;
|
} else {
|
var x = c.rows[n].insertCell(len2);
|
x.innerHTML = list[n - 1].value;
|
}
|
}
|
}
|
} else {
|
var c = document.getElementsByName(nameId)[0]; //获取表格信息
|
var len = c.rows.length;//获取表格的行数
|
var ro = c.rows[0].cells;
|
var len2 = ro.length;//获得列数
|
for (var n = 0; n < len; n++) {
|
if (n == 0) {
|
var x = c.rows[n].insertCell(len2);
|
x.innerHTML = alias;
|
} else {
|
var x = c.rows[n].insertCell(len2);
|
x.innerHTML = list[n - 1].value;
|
}
|
}
|
}
|
} else {
|
var list = NoGroupByPostRequest(fields, StatisticalMethod, alias, url, where, geo, UnitConversion, DecimalDigits);
|
for (var b = 0; b < list.length; b++) {
|
name.push(list[b].name);
|
value.push(list[b].value);
|
}
|
//条件都循环完 开始拼接表格
|
if (table.list.length == m + 1) {
|
var tableHtml = "<table class=\"table table-bordered table-hover\" name='" + nameId + "'>";
|
tableHtml += "<thead><tr>";
|
for (var v = 0; v < name.length; v++) {
|
tableHtml += "<th>" + name[v] + "</th>";
|
}
|
tableHtml += "</tr></thead>";
|
tableHtml += "<tr>";
|
for (var c = 0; c < value.length; c++) {
|
tableHtml += "<td>" + value[c] + "</td>";
|
}
|
tableHtml += "</tr>";
|
tableHtml += "</table>";
|
$("#" + nameId).append(tableHtml);
|
}
|
}
|
}
|
var obj = {};
|
obj[nameId] = HtmlUtil.htmlEncodeByRegExp($("#" + nameId).html());
|
obj["name"] = nameId;
|
tableJson.push(obj);
|
}
|
|
var chartsJson = [];
|
//循环charts，获取图标
|
for (var i = 0; i < json.charts.length; i++) {
|
//z代表下标
|
var z = i + 1;
|
//2
|
var name = json.charts[i].name;
|
$("#" + name).empty();
|
var where = json.charts[i][name].where;
|
if (where == null || where == "") {
|
where = "1=1";
|
}
|
//fieId要求统计的字段,StatisticalMethod统计的方式
|
var id = json.charts[i][name].id;
|
var title = json.charts[i][name].title;
|
var type = json.charts[i][name].type;
|
var displayMode = json.charts[i][name].displayMode;
|
var classField = json.charts[i][name].classField;
|
var ValueField = json.charts[i][name].ValueField;
|
var StatisticalMethod = json.charts[i][name].StatisticalMethod;
|
var option = json.charts[i][name].option;
|
var DecimalDigits = json.charts[i][name].DecimalDigits;
|
var UnitConversion = json.charts[i][name].UnitConversion;
|
if (displayMode == "按类别显示要素计数") {
|
option = EchartPostRequest(title, classField, StatisticalMethod, type, name, url, where, option, geo, DecimalDigits, UnitConversion);
|
}
|
if (displayMode == "按类别显示值") {
|
option = EchartPostRequests(title, classField, StatisticalMethod, ValueField, type, name, url, where, option, geo, DecimalDigits, UnitConversion);
|
}
|
|
var obj = {};
|
obj[name] = option;
|
obj["name"] = name;
|
chartsJson.push(obj);
|
}
|
if (geo != "" || geo != null) {
|
var Cachejson = {};
|
Cachejson['vars'] = varsJson;
|
Cachejson['table'] = tableJson;
|
Cachejson['charts'] = chartsJson;
|
console.log(JSON.stringify(Cachejson));
|
//将缓存 添加到数据库
|
$.ajax({
|
url: "/res/ResExtBusinessLayer/updateByPrimaryKeySelective?resourceid=" + resMainInfoId,
|
type: 'post',
|
dataType: 'string',
|
data: {Cache: JSON.stringify(Cachejson)},
|
success: function (data) {
|
alert(data);
|
}
|
})
|
}
|
|
},
|
error: function (e) {
|
alert(e.message);
|
}
|
});
|
}
|
|
//地图数据加载
|
function LoadMap() {
|
$('#bodys').html("");
|
var url = $("#url").val();
|
var resMainInfoId = $("#resMainInfoId").val();
|
$.ajax({
|
url: "/res/ResExtBusinessLayer/SelectAll?resourceid=" + resMainInfoId,
|
type: 'post',
|
dataType: 'json',
|
data: {},
|
success: function (data) {
|
var json = eval('(' + data.serviceConfig + ')');
|
//添加设置的html
|
var encodeHtml = HtmlUtil.htmlDecodeByRegExp(data.serviceHTML);
|
$("#bodys").append(encodeHtml);
|
//判断是否有缓存
|
if (data.cache == null || data.cache == "") {
|
renovate()
|
} else {
|
LoadCaching();
|
}
|
},
|
error: function (e) {
|
alert(e.message);
|
}
|
});
|
}
|
|
var HtmlUtil = {
|
/*1.用浏览器内部转换器实现html转码*/
|
htmlEncode: function (html) {
|
//1.首先动态创建一个容器标签元素，如DIV
|
var temp = document.createElement("p");
|
console.log(temp)
|
//2.然后将要转换的字符串设置为这个元素的innerText(ie支持)或者textContent(火狐，google支持)
|
(temp.textContent != undefined) ? (temp.textContent = html) : (temp.innerText = html);
|
//3.最后返回这个元素的innerHTML，即得到经过HTML编码转换的字符串了
|
var output = temp.innerHTML;
|
temp = null;
|
return output;
|
},
|
/*2.用浏览器内部转换器实现html解码*/
|
htmlDecode: function (text) {
|
//1.首先动态创建一个容器标签元素，如DIV
|
var temp = document.createElement("p");
|
//2.然后将要转换的字符串设置为这个元素的innerHTML(ie，火狐，google都支持)
|
temp.innerHTML = text;
|
//3.最后返回这个元素的innerText(ie支持)或者textContent(火狐，google支持)，即得到经过HTML解码的字符串了。
|
var output = temp.innerText || temp.textContent;
|
temp = null;
|
return output;
|
},
|
/*3.用正则表达式实现html转码*/
|
htmlEncodeByRegExp: function (str) {
|
var s = "";
|
if (str.length == 0) return "";
|
s = str.replace(/&/g, "&");
|
s = s.replace(/</g, "<");
|
s = s.replace(/>/g, ">");
|
s = s.replace(/\'/g, "'");
|
s = s.replace(/\"/g, """);
|
return s;
|
},
|
/*4.用正则表达式实现html解码*/
|
htmlDecodeByRegExp: function (str) {
|
var s = "";
|
if (str.length == 0) return "";
|
s = str.replace(/&/g, "&");
|
s = s.replace(/</g, "<");
|
s = s.replace(/>/g, ">");
|
s = s.replace(/'/g, "\'");
|
s = s.replace(/"/g, "\"");
|
return s;
|
}
|
};
|
|
//请求获取
|
function PostRequest(fields, StatisticalMethod, url, where, geo) {
|
//统计总数字段
|
var tongji = 0;
|
var params = {
|
where: where,
|
spatialRel: "esriSpatialRelIntersects",
|
returnZ: false,
|
returnTrueCurves: false,
|
returnM: false,
|
returnIdsOnly: false,
|
returnGeometry: false,
|
returnDistinctValues: false,
|
returnCountOnly: false,
|
outStatistics: "[" +
|
"{" +
|
" \"statisticType\": \"" + StatisticalMethod + "\"," +
|
" \"onStatisticField\": \"" + fields + "\"," +
|
" \"outStatisticFieldName\": \"POPULATIONBYGENDER\"" +
|
" }" +
|
"]",
|
outFields: "*",
|
geometryType: "esriGeometryEnvelope",
|
f: "pjson"
|
};
|
//框选范围查询
|
if (geo && geo != "") {
|
params.geometry = geo;
|
params.geometryType = "esriGeometryPolygon";
|
if (geoType == "esriGeometryPoint") {
|
params.spatialRel = "esriSpatialRelIntersects";
|
} else if (geoType == "esriGeometryPolyline") {
|
params.spatialRel = "esriSpatialRelEnvelopeIntersects";
|
} else if (geoType == "esriGeometryPolygon") {
|
params.spatialRel = "esriSpatialRelContains";
|
}
|
}
|
|
$.ajax({
|
url: url,
|
type: 'post',
|
async: false,
|
dataType: 'json',
|
data: params,
|
success: function (json) {
|
try {
|
tongji = json.features[0].attributes.POPULATIONBYGENDER
|
} catch (e) {
|
tongji = -1;
|
}
|
},
|
error: function (e) {
|
alert(e.message);
|
}
|
});
|
return tongji;
|
}
|
|
//分组请求方法 fieIds:字段,StatisticalMethod数据统计方式，alias:别名,GroupBy:分组字段,m=0才获取表格第一行
|
function GroupByPostRequest(GroupBy, fields, StatisticalMethod, alias, url, where, geo, UnitConversion, DecimalDigits) {
|
var arr = [];
|
var params = {
|
where: where,
|
spatialRel: "esriSpatialRelIntersects",
|
returnZ: false,
|
returnTrueCurves: false,
|
returnM: false,
|
returnIdsOnly: false,
|
returnGeometry: false,
|
returnDistinctValues: false,
|
returnCountOnly: false,
|
groupByFieldsForStatistics: GroupBy,
|
outStatistics: "[" +
|
"{" +
|
" \"statisticType\": \"" + StatisticalMethod + "\"," +
|
" \"onStatisticField\": \"" + fields + "\"," +
|
" \"outStatisticFieldName\": \"" + alias + "\"" +
|
" }" +
|
"]",
|
outFields: "*",
|
geometryType: "esriGeometryEnvelope",
|
f: "pjson"
|
};
|
//框选范围查询
|
if (geo && geo != "") {
|
params.geometry = geo;
|
params.geometryType = "esriGeometryPolygon";
|
if (geoType == "esriGeometryPoint") {
|
params.spatialRel = "esriSpatialRelIntersects";
|
} else if (geoType == "esriGeometryPolyline") {
|
params.spatialRel = "esriSpatialRelEnvelopeIntersects";
|
} else if (geoType == "esriGeometryPolygon") {
|
params.spatialRel = "esriSpatialRelContains";
|
}
|
}
|
|
$.ajax({
|
url: url,
|
type: 'post',
|
async: false,
|
dataType: 'json',
|
data: params,
|
success: function (json) {
|
try {
|
for (var n = 0; n < json.features.length; n++) {
|
var value = json.features[n].attributes[alias];
|
if (UnitConversion != null && UnitConversion != "") {
|
value = value / UnitConversion;
|
}
|
if(value.toString().indexOf('.') >0) {
|
if (DecimalDigits != null && DecimalDigits != "") {
|
value = value.toFixed(DecimalDigits);
|
}
|
}
|
arr.push({
|
name: json.features[n].attributes[GroupBy],
|
value: value
|
});
|
}
|
} catch (e) {
|
alert(alias + "字段配置不能统计")
|
}
|
},
|
error: function (e) {
|
alert(e.message);
|
}
|
});
|
return arr;
|
}
|
|
function NoGroupByPostRequest(fields, StatisticalMethod, alias, url, where, geo, UnitConversion, DecimalDigits) {
|
var arr = [];
|
var params = {
|
where: where,
|
spatialRel: "esriSpatialRelIntersects",
|
returnZ: false,
|
returnTrueCurves: false,
|
returnM: false,
|
returnIdsOnly: false,
|
returnGeometry: false,
|
returnDistinctValues: false,
|
returnCountOnly: false,
|
outStatistics: "[" +
|
"{" +
|
" \"statisticType\": \"" + StatisticalMethod + "\"," +
|
" \"onStatisticField\": \"" + fields + "\"," +
|
" \"outStatisticFieldName\": \"" + alias + "\"" +
|
" }" +
|
"]",
|
outFields: "*",
|
geometryType: "esriGeometryEnvelope",
|
f: "pjson"
|
};
|
//框选范围查询
|
if (geo && geo != "") {
|
params.geometry = geo;
|
params.geometryType = "esriGeometryPolygon";
|
if (geoType == "esriGeometryPoint") {
|
params.spatialRel = "esriSpatialRelIntersects";
|
} else if (geoType == "esriGeometryPolyline") {
|
params.spatialRel = "esriSpatialRelEnvelopeIntersects";
|
} else if (geoType == "esriGeometryPolygon") {
|
params.spatialRel = "esriSpatialRelContains";
|
}
|
}
|
|
$.ajax({
|
url: url,
|
type: 'post',
|
async: false,
|
dataType: 'json',
|
data: params,
|
success: function (json) {
|
try {
|
for (var n = 0; n < json.features.length; n++) {
|
var value = json.features[n].attributes[alias];
|
if (UnitConversion != null && UnitConversion != "") {
|
value = value / UnitConversion;
|
}
|
if(value.toString().indexOf('.')>0 ) {
|
if (DecimalDigits != null && DecimalDigits != "") {
|
value = value.toFixed(DecimalDigits);
|
}
|
}
|
arr.push({
|
name: alias,
|
value: value
|
});
|
}
|
} catch (e) {
|
alert(alias + "字段配置不能统计")
|
}
|
},
|
error: function (e) {
|
alert(e.message);
|
}
|
});
|
return arr;
|
}
|
|
//SelectField请求的字段，StatisticalMethod请求的格式
|
function EchartPostRequest(title, classField, StatisticalMethod, type, Chartid, url, where, option, geo, DecimalDigits, UnitConversion) {
|
var dataList = [];
|
var legendList = [];
|
var params = {
|
where: where,
|
spatialRel: "esriSpatialRelIntersects",
|
returnZ: false,
|
returnTrueCurves: false,
|
returnM: false,
|
returnIdsOnly: false,
|
returnGeometry: false,
|
returnDistinctValues: false,
|
returnCountOnly: false,
|
outStatistics: "[" +
|
"{" +
|
" \"statisticType\": \"" + StatisticalMethod + "\"," +
|
" \"onStatisticField\": \"" + classField + "\"," +
|
" \"outStatisticFieldName\": \"PopulationByGender\"" +
|
" }" +
|
"]",
|
groupByFieldsForStatistics: classField,
|
outFields: "*",
|
geometryType: "esriGeometryEnvelope",
|
f: "pjson"
|
};
|
//框选范围查询
|
if (geo && geo != "") {
|
params.geometry = geo;
|
params.geometryType = "esriGeometryPolygon";
|
if (geoType == "esriGeometryPoint") {
|
params.spatialRel = "esriSpatialRelIntersects";
|
} else if (geoType == "esriGeometryPolyline") {
|
params.spatialRel = "esriSpatialRelEnvelopeIntersects";
|
} else if (geoType == "esriGeometryPolygon") {
|
params.spatialRel = "esriSpatialRelContains";
|
}
|
}
|
|
$.ajax({
|
url: url,
|
type: 'post',
|
async: false,
|
dataType: 'json',
|
data: params,
|
success: function (json) {
|
try {
|
json.error.code == "400"
|
//增加一个400标识，说明加载该图例有问题
|
chooseChart(type, dataList, legendList, title, Chartid, 400);
|
} catch (e) {
|
var Arrey = [];
|
//获取到值，然后拼接字符串
|
for (var i = 0; i < json.features.length; i++) {
|
for (var key in json.features[i].attributes) {
|
Arrey.push(json.features[i].attributes[key]);
|
}
|
}
|
for (var j = 0; j < Arrey.length; j++) {
|
if (j % 2 == 0) {
|
if (j + 1 == Arrey.length) {
|
var value = Arrey[j];
|
if (UnitConversion != null && UnitConversion != "") {
|
value = value / UnitConversion;
|
}
|
if(value.toString().indexOf('.') >0) {
|
if (DecimalDigits != null && DecimalDigits != "") {
|
value = value.toFixed(DecimalDigits);
|
}
|
}
|
dataList.push({
|
name: Arrey[j],
|
value: value
|
});
|
legendList.push(Arrey[j])
|
} else {
|
var value = Arrey[j + 1];
|
if (UnitConversion != null && UnitConversion != "") {
|
value = value / UnitConversion;
|
}
|
if(value.toString().indexOf('.') >0) {
|
if (DecimalDigits != null && DecimalDigits != "") {
|
value = value.toFixed(DecimalDigits);
|
}
|
}
|
dataList.push({
|
name: Arrey[j],
|
value: value
|
});
|
legendList.push(Arrey[j])
|
}
|
}
|
}
|
option = chooseChart(type, dataList, legendList, title, Chartid, 200, option, classField);
|
}
|
},
|
error: function (e) {
|
alert(e.message);
|
}
|
});
|
return option;
|
}
|
|
function EchartPostRequests(title, classField, StatisticalMethod, ValueField, type, Chartid, url, where, option, geo, DecimalDigits, UnitConversion) {
|
var dataList = [];
|
var legendList = [];
|
var params = {
|
where: where,
|
spatialRel: "esriSpatialRelIntersects",
|
returnZ: false,
|
returnTrueCurves: false,
|
returnM: false,
|
returnIdsOnly: false,
|
returnGeometry: false,
|
returnDistinctValues: false,
|
returnCountOnly: false,
|
outStatistics: "[" +
|
"{" +
|
" \"statisticType\": \"" + StatisticalMethod + "\"," +
|
" \"onStatisticField\": \"" + ValueField + "\"," +
|
" \"outStatisticFieldName\": \"PopulationByGender\"" +
|
" }" +
|
"]",
|
groupByFieldsForStatistics: classField,
|
outFields: "*",
|
geometryType: "esriGeometryEnvelope",
|
f: "pjson"
|
};
|
//框选范围查询
|
if (geo && geo != "") {
|
params.geometry = geo;
|
params.geometryType = "esriGeometryPolygon";
|
if (geoType == "esriGeometryPoint") {
|
params.spatialRel = "esriSpatialRelIntersects";
|
} else if (geoType == "esriGeometryPolyline") {
|
params.spatialRel = "esriSpatialRelEnvelopeIntersects";
|
} else if (geoType == "esriGeometryPolygon") {
|
params.spatialRel = "esriSpatialRelContains";
|
}
|
}
|
|
$.ajax({
|
url: url,
|
type: 'post',
|
async: false,
|
dataType: 'json',
|
data: params,
|
success: function (json) {
|
try {
|
json.error.code == "400"
|
//增加一个400标识，说明加载该图例有问题
|
chooseChart(type, dataList, legendList, title, Chartid, 400);
|
} catch (e) {
|
var Arrey = [];
|
//获取到值，然后拼接字符串
|
for (var i = 0; i < json.features.length; i++) {
|
for (var key in json.features[i].attributes) {
|
Arrey.push(json.features[i].attributes[key]);
|
}
|
}
|
for (var j = 0; j < Arrey.length; j++) {
|
if (j % 2 == 0) {
|
if (j + 1 == Arrey.length) {
|
var value = Arrey[j];
|
if (UnitConversion != null && UnitConversion != "") {
|
value = value / UnitConversion;
|
}
|
if(value.toString().indexOf('.') >0 ) {
|
if (DecimalDigits != null && DecimalDigits != "") {
|
value = value.toFixed(DecimalDigits);
|
}
|
}
|
dataList.push({
|
name: Arrey[j],
|
value: value
|
});
|
legendList.push(Arrey[j])
|
} else {
|
var value = Arrey[j+1];
|
if (UnitConversion != null && UnitConversion != "") {
|
value = value / UnitConversion;
|
}
|
if(value.toString().indexOf('.') >0) {
|
if (DecimalDigits != null && DecimalDigits != "") {
|
value = value.toFixed(DecimalDigits);
|
}
|
}
|
dataList.push({
|
name: Arrey[j],
|
value: value
|
});
|
legendList.push(Arrey[j])
|
}
|
}
|
}
|
option = chooseChart(type, dataList, legendList, title, Chartid, 200, option, classField);
|
}
|
},
|
error: function (e) {
|
alert(e.message);
|
}
|
});
|
return option;
|
}
|
|
//选择图例
|
function chooseChart(type, dataList, legendList, title, Chartid, code, option, classField) {
|
//根据type查询，对应的类型 eg：根据简单饼状图查询对应的类型
|
var EchartsType = "";
|
$.ajax({
|
url: '/res/common/SelectEchartsType',
|
type: 'post',
|
dataType: 'text',
|
async: false,
|
data: {
|
echartstitle: type
|
},
|
success: function (data) {
|
EchartsType = data;
|
},
|
error: function (e) {
|
alert(e.message);
|
}
|
});
|
|
if (EchartsType == "饼状图") {
|
return PieChart(dataList, legendList, title, Chartid, code, option, classField)
|
}
|
if (EchartsType == "柱状图") {
|
return BraChart(dataList, legendList, title, Chartid, code, option, classField)
|
}
|
if (EchartsType == "折线图") {
|
return lineChart(dataList, legendList, title, Chartid, code, option, classField)
|
}
|
}
|
|
function PieChart(dataList, legendList, title, Chartid, code, option, classField) {
|
if (code == 200) {
|
var dataLists = [];
|
var legendLists = [];
|
for (var i = 0; i < dataList.length; i++) {
|
dataLists.push({
|
value: dataList[i].value,
|
name: dataList[i].name,
|
classField: classField
|
});
|
}
|
for (var j = 0; j < legendList.length; j++) {
|
legendLists.push({
|
value: legendList[j]
|
});
|
}
|
|
var one = echarts.init(document.getElementById(Chartid));
|
option = eval("(" + option + ")");
|
one.setOption(option);
|
one.on('click', function (params) {
|
if (params.componentType === 'series') {
|
var name = params.name;
|
DisplayCondition(name, classField)
|
}
|
});
|
return option
|
}
|
if (code == 400) {
|
var NumberChart = parseInt(Chartid.replace("Chart", "")) + 1;
|
var image = "<div class='tuli'>该图例<span>" + NumberChart + "</span>配置不能被加载，请重新配置<div>";
|
$("#" + Chartid + "").append(image)
|
}
|
}
|
|
function lineChart(dataList, legendList, title, Chartid, code, option, classField) {
|
if (code == 200) {
|
var xAxisLists = [];
|
var seriesList = [];
|
for (var i = 0; i < legendList.length; i++) {
|
xAxisLists.push(legendList[i]);
|
}
|
for (var j = 0; j < dataList.length; j++) {
|
seriesList.push({
|
value: dataList[j].value,
|
classField: classField
|
});
|
}
|
var one = echarts.init(document.getElementById(Chartid));
|
option = eval("(" + option + ")");
|
one.setOption(option);
|
one.on('click', function (params) {
|
if (params.componentType === 'series') {
|
var name = params.name;
|
DisplayCondition(name, classField)
|
}
|
});
|
return option
|
}
|
|
if (code == 400) {
|
var image = "<div>该图例配置不能被加载，请重新配置<div>"
|
$("#" + Chartid + "").append(image)
|
}
|
}
|
|
function BraChart(dataList, legendList, title, Chartid, code, option, classField) {
|
if (code == 200) {
|
var xAxisLists = [];
|
var seriesList = [];
|
for (var i = 0; i < legendList.length; i++) {
|
xAxisLists.push(legendList[i]);
|
}
|
for (var j = 0; j < dataList.length; j++) {
|
seriesList.push({
|
value: dataList[j].value,
|
classField: classField
|
});
|
}
|
|
var one = echarts.init(document.getElementById(Chartid));
|
option = eval("(" + option + ")");
|
one.setOption(option);
|
one.on('click', function (params) {
|
if (params.componentType === 'series') {
|
var name = params.name;
|
DisplayCondition(name, classField)
|
}
|
});
|
return option
|
}
|
|
if (code == 400) {
|
var image = "<div>该图例配置不能被加载，请重新配置<div>"
|
$("#" + Chartid + "").append(image)
|
}
|
}
|
|
//table点击显示条件
|
function DisplayCondition(Condition, GroupBy) {
|
var parentwin = window.parent;
|
parentwin.postMessage({resId: $("#resMainInfoId").val(), expression: GroupBy + "='" + Condition + "'"}, "*");
|
}
|
</script>
|
</html>
|
