var myCharts;
|
//对应widget.js中MyWidget实例化后的对象
|
var thisWidget;
|
|
var tmpQueryParams;
|
|
//当前页面业务
|
function initWidgetView(_thisWidget) {
|
thisWidget = _thisWidget;
|
|
//开始查询历史数据
|
$("#startQueryHistory").click(function () {
|
queryEchartDataByTimePeriod();
|
if (tmpQueryParams.layerid == 3001 || tmpQueryParams.layerid == 3002 || tmpQueryParams.layerid == 3003 || tmpQueryParams.layerid == 3000) {
|
loadDetailedInfobyGrid(tmpQueryParams)
|
loadDetailedInfobyGrid(tmpQueryParams);
|
} else {
|
loadDetailedInfobySiteid(tmpQueryParams);
|
}
|
});
|
}
|
|
function queryEchartDataByTimePeriod() {
|
if (myCharts) {
|
$('#echart').removeAttr('_echarts_instance_');
|
}
|
var backend_url = tmpQueryParams.nodejs_url_predix + "dataapi/Bdata?bid=get_" + tmpQueryParams.layerid + "_single_path&datatype=" + tmpQueryParams.datatype + "&siteid=" + tmpQueryParams.siteid + "&datatime1=" + tmpQueryParams.appDateHourStart + "&datatime2=" + tmpQueryParams.appDateHourEnd + "&count=10";
|
// all 1006xx layer has the same legend ！！
|
console.log(tmpQueryParams)
|
echart_show(backend_url,tmpQueryParams)
|
|
}
|
|
function DatePicker(beginSelector, endSelector) {
|
|
var dateFormat = tmpQueryParams.datatype == 'day' ? 'yyyy-mm-dd' : 'yyyy-mm-dd hh:00:00';
|
|
var miniView = tmpQueryParams.datatype == 'day' ? 'month' : 'day';
|
$(beginSelector).datetimepicker({
|
bootcssVer: 3, //bootstrap-datetimepicker＋bootstrap v3，但这个插件使用的时候，并没有和V3相匹配，仍然调用的是bootstrap V2的图标 把bootcssVer的值直接设为3，否则datetimepicker不会显示出上、下个月的箭头
|
format: dateFormat,
|
minView: miniView,
|
todayBtn: true, //如果此值为true 或 "linked"，则在日期时间选择器组件的底部显示一个 "Today" 按钮用以选择当前日期。如果是true的话，"Today" 按钮仅仅将视图转到当天的日期，如果是"linked"，当天日期将会被选中。
|
clearBtn: true,
|
language: 'zh-CN',
|
autoclose: true, //当选择一个日期之后是否立即关闭此日期时间选择器。
|
keyboardNavigation: true, //是否允许通过方向键改变日期。
|
forceParse: true, //当选择器关闭的时候，是否强制解析输入框中的值。
|
initialDate: new Date(),
|
todayHighlight: 1, //如果为true, 高亮当前日期
|
endDate: new Date()
|
}).on('changeDate', function (ev) {
|
if (ev.date) {
|
$(endSelector).datetimepicker('setStartDate', new Date(ev.date.valueOf()))
|
} else {
|
$(endSelector).datetimepicker('setStartDate', null);
|
}
|
console.log($(beginSelector).val())
|
tmpQueryParams.appDateHourStart = $(beginSelector).val();
|
})
|
$(endSelector).datetimepicker({
|
bootcssVer: 3, //bootstrap-datetimepicker＋bootstrap v3，但这个插件使用的时候，并没有和V3相匹配，仍然调用的是bootstrap V2的图标 把bootcssVer的值直接设为3，否则datetimepicker不会显示出上、下个月的箭头
|
format: dateFormat,
|
minView: miniView,
|
todayBtn: true, //如果此值为true 或 "linked"，则在日期时间选择器组件的底部显示一个 "Today" 按钮用以选择当前日期。如果是true的话，"Today" 按钮仅仅将视图转到当天的日期，如果是"linked"，当天日期将会被选中。
|
clearBtn: true,
|
language: 'zh-CN',
|
autoclose: true, //当选择一个日期之后是否立即关闭此日期时间选择器。
|
keyboardNavigation: true, //是否允许通过方向键改变日期。
|
forceParse: true, //当选择器关闭的时候，是否强制解析输入框中的值。
|
initialDate: new Date(),
|
todayHighlight: 1, //如果为true, 高亮当前日期
|
endDate: new Date()
|
}).on('changeDate', function (ev) {
|
console.log($(endSelector).val())
|
tmpQueryParams.appDateHourEnd = $(endSelector).val();
|
})
|
}
|
|
function reloadData(params) {
|
tmpQueryParams = params;
|
DatePicker("#appDateHourStart", '#appDateHourEnd');
|
$("#appDateHourStart").datetimepicker("setDate", new Date(params.appDateHourStart));
|
$('#appDateHourEnd').datetimepicker('setDate', new Date(params.appDateHourEnd));
|
//loadLineChartbySiteid(params);
|
queryEchartDataByTimePeriod();
|
if (tmpQueryParams.layerid == 3001 || tmpQueryParams.layerid == 3002 || tmpQueryParams.layerid == 3003 || tmpQueryParams.layerid == 3000) {
|
loadDetailedInfobyGrid(params)
|
loadDetailedInfobyGrid(params);
|
} else {
|
loadDetailedInfobySiteid(params);
|
}
|
}
|
|
function loadDetailedInfobySiteid(params) {
|
$("#indexTb").empty();
|
//var backend_url = params.nodejs_url_predix + "dataapi/Bdata?bid=get_" + params.layerid + "_single&datatype=" + params.datatype + "&siteid=" + params.siteid + "&datatime=" + params.datatime;
|
var backend_url = params.nodejs_url_predix + "dataapi/Bdata?bid=get_" + params.layerid + "_single&datatype=" + params.datatype + "&siteid=" + params.siteid + "&datatime1=" + params.appDateHourStart + "&datatime2="+ params.appDateHourEnd;
|
$.ajax({
|
type: 'get',
|
dataType: 'json',
|
data: {},
|
async: false, //同步
|
url: backend_url,
|
success: function (data) {
|
var tableData = data.data.result;
|
if (tableData != null && tableData.length > 0) {
|
var topObj = tableData[0];
|
topObj = changeNullAndundefinedToEmpty(topObj);
|
var _tr = "<tr onmouseover='over(this)' onmouseout='out(this)'><td>1</td><td>编码</td><td>" + topObj.code + "</td><td>/</td></tr>"
|
$("#indexTb").append(_tr);
|
_tr = "<tr onmouseover='over(this)' onmouseout='out(this)' ><td>2</td><td>名称</td><td>" + topObj.name + "</td><td>/</td></tr>"
|
$("#indexTb").append(_tr);
|
_tr = "<tr onmouseover='over(this)' onmouseout='out(this)' ><td>3</td><td>时间</td><td>" + topObj.datatime + "</td><td>/</td></tr>"
|
$("#indexTb").append(_tr);
|
_tr = "<tr onmouseover='over(this)' onmouseout='out(this)' ><td>4</td><td>经度</td><td>" + topObj.lon + "</td><td>/</td></tr>"
|
$("#indexTb").append(_tr);
|
_tr = "<tr onmouseover='over(this)' onmouseout='out(this)' ><td>5</td><td>纬度</td><td>" + topObj.lat + "</td><td>/</td></tr>"
|
$("#indexTb").append(_tr);
|
var tmp_index = 6;
|
for (var p in topObj) { //遍历json对象的每个key/value对,p为key
|
if (p !== 'code' && p !== 'name' && p !== 'datatime' && p !== 'lon' && p !== 'lat') {
|
_tr = "<tr onmouseover='over(this)' onmouseout='out(this)' ><td>" + tmp_index + "</td><td>" + p + "</td><td>" + topObj[p] + "</td><td>" + getUnitByqindex(p) + "</td></tr>"
|
$("#indexTb").append(_tr);
|
tmp_index++;
|
}
|
};
|
$("#indexTb").find("td:contains(pm25)").text("PM₂.₅");
|
$("#indexTb").find("td:contains(pm10)").text("PM₁₀");
|
$("#indexTb").find("td:contains(no2)").text("NO₂");
|
$("#indexTb").find("td:contains(co)").text("CO");
|
$("#indexTb").find("td:contains(nox)").text("NOₓ");
|
$("#indexTb").find("td:contains(so2)").text("SO₂");
|
$("#indexTb").find("td:contains(o31)").text("O₃₁");
|
$("#indexTb").find("td:contains(o38)").text("O₃₈");
|
$("#indexTb").find("td:contains(o3)").text("O₃");
|
$("#indexTb").find("td:contains(no)").text("NO");
|
$("#indexTb").find("td:contains(aqi)").text("AQI");
|
$("#indexTb").find("td:contains(tsp)").text("TSP");
|
} else {
|
haoutil.msg("无查询记录，请更换查询条件！");
|
}
|
},
|
error: function (request, textStatus) {
|
haoutil.msg("查询错误，请联系管理员！！！")
|
}
|
});
|
}
|
|
function loadDetailedInfobyGrid(params) {
|
$("#indexTb").empty();
|
$("#headInfo").empty();
|
// var backend_url = params.nodejs_url_predix + "dataapi/Bdata?bid=get_" + params.layerid + "_single&datatype=" + params.datatype + "&siteid=" + params.siteid + "&datatime=" + params.datatime;
|
var backend_url = params.nodejs_url_predix + "dataapi/Bdata?bid=get_" + params.layerid + "_single&datatype=" + params.datatype + "&siteid=" + params.siteid + "&datatime1=" + params.appDateHourStart + "&datatime2="+ params.appDateHourEnd;
|
$.ajax({
|
type: 'get',
|
dataType: 'json',
|
data: {},
|
async: false, //同步
|
url: backend_url,
|
success: function (data) {
|
var tableData = data.data.result;
|
tableData = data.data.result;
|
var _tr = "<tr onmouseover='over(this)' onmouseout='out(this)' class='headerInfo'><td>" + '序' + "</td><td onclick='locateAndShowDetail(this)'>" + "道路路段(区-街道)" + "</td><td>数据时间</td><td>" + "PM₂.₅" + "</td><td>" + "PM₁₀" + "</td><td>" + "NO" + "</td><td>" + "NOₓ" + "</td><td>" + "NO₂" + "</td><td>" + "CO" + "</td></tr>"
|
$("#indexTb").append(_tr);
|
|
if (tableData != null && tableData.length > 0) {
|
for (var i = 0; length = tableData.length, i < length; i++) {
|
var j = i + 1;
|
var topObj = tableData[i];
|
topObj = changeNullAndundefinedToEmpty(topObj);
|
var _tr = "<tr onmouseover='over(this)' onmouseout='out(this)' ><td>" + j + "</td><td onclick='locateAndShowDetail(this)'>" +topObj.name+"</td><td>" + topObj.posttime + "</td><td>" + topObj.pm25 + "</td><td>" + topObj.pm10 + "</td><td>" + topObj.no + "</td><td>" + topObj.nox + "</td><td>" + topObj.no2 + "</td><td>" + topObj.co + "</td></tr>"
|
$("#indexTb").append(_tr);
|
}
|
} else {
|
haoutil.msg("查询无数据，请更换查询条件！");
|
}
|
},
|
error: function (request, textStatus) {
|
haoutil.msg("系统后台错误，请联系管理员处理！");
|
}
|
|
});
|
}
|
|
function getUnitByqindex(qindex) {
|
qindex = qindex.toUpperCase();
|
if (qindex == 'PM25' || qindex == 'PM10' || qindex == 'NO' || qindex == 'NO2' || qindex == 'NOX' || qindex == 'SO2' || qindex == "O31" || qindex == "O38" || qindex == "O3") {
|
return 'μg/m³';
|
} else if (qindex == 'CO' || qindex == "TSP") {
|
return 'mg/m³';
|
} else if(qindex == "SPEED"){
|
return 'km/h';
|
}else{
|
return '/';
|
}
|
}
|
|
function over(obj) {
|
$('#indexTb tr').removeClass("over_tr");
|
$(obj).addClass("over_tr");
|
}
|
|
function out(obj) {
|
$(obj).removeClass("over_tr");
|
}
|
|
|
function loadLineChartbySiteid(params) {
|
if (myCharts) {
|
$('#echart').removeAttr('_echarts_instance_');
|
}
|
var backend_url = params.nodejs_url_predix + "dataapi/Bdata?bid=get_" + params.layerid + "_history&datatype=" + params.datatype + "&siteid=" + params.siteid + "&datatime=" + params.datatime + "&count=10";
|
// all 1006xx layer has the same legend ！！
|
echart_show(backend_url, params.datatype,params)
|
}
|
|
|
function shortenLegendTimeString(datatype, full_time_str) {
|
if (datatype == 'hour') {
|
return full_time_str.substring(8, 10) + '日' + "\n" + full_time_str.substring(11, 13) + '时';
|
} else if (datatype == 'day') {
|
return full_time_str.substring(8, 10) + '日';
|
} else {
|
return full_time_str;
|
}
|
}
|
|
function echart_show(backend_url,params) {
|
var layerid = params.layerid + "";
|
var legendData = all_layer_legends[layerid.substring(0, 4)];
|
var legendData_selected = {};
|
legendData.forEach(element => {
|
if (element == params.selected_qindex.toLowerCase()) {
|
legendData_selected[element] = true;
|
} else {
|
legendData_selected[element] = false;
|
}
|
});
|
|
if (legendData == null || legendData.length < 1) {
|
return;
|
}
|
var colorData = echart_lines_color_list[params.layerid];
|
var myItemStyle = {
|
normal: {
|
// 拐点上显示数值
|
label: {
|
show: true
|
},
|
borderColor: 'red', // 拐点边框颜色
|
lineStyle: {
|
width: 2, // 设置线宽
|
type: 'solid' //'dotted'虚线 'solid'实线
|
}
|
}
|
};
|
$.ajax({
|
type: 'get',
|
dataType: 'json',
|
data: {},
|
async: false, //同步
|
url: backend_url,
|
success: function (data) {
|
var tableData = data.data.result;
|
if (tableData != null && tableData.length > 0) {
|
var seriesObj = {};
|
var seriesData = [];
|
var timeLineData = [];
|
for (var i = 0; i < legendData.length; i++) {
|
var singleLegend = legendData[i];
|
var sdata = {};
|
sdata.name = singleLegend;
|
sdata.data = [];
|
sdata.type = 'line';
|
sdata.symbolSize = 8;
|
if (singleLegend.toUpperCase() == 'CO') {
|
sdata.yAxisIndex = 1;
|
}
|
sdata.itemStyle = myItemStyle;
|
seriesObj[singleLegend] = sdata;
|
}
|
for (var i = 0; i < tableData.length; i++) {
|
var indexObj = tableData[i];
|
timeLineData.push(shortenLegendTimeString(params.datatype, indexObj.datatime));
|
for (var j = 0; j < legendData.length; j++) {
|
var singleLegend = legendData[j];
|
var sdata = seriesObj[singleLegend];
|
sdata.data.push(indexObj[singleLegend])
|
}
|
}
|
for (var i = 0; i < legendData.length; i++) {
|
var singleLegend = legendData[i];
|
var mySeries = seriesObj[singleLegend];
|
seriesData.push(mySeries);
|
}
|
options = {
|
title: {
|
text: tableData[0]["name"],
|
textStyle: {
|
color: '#87CEFA', //颜色
|
},
|
top: '20px',
|
x: 'center'
|
},
|
|
dataZoom: [{
|
type: 'inside',
|
xAxisIndex: [0],
|
start: 0,
|
end: 100
|
}],
|
|
legend: {
|
// orient 设置布局方式，默认水平布局，可选值：'horizontal'（水平） ¦ 'vertical'（垂直）
|
orient: 'horizontal',
|
// x 设置水平安放位置，默认全图居中，可选值：'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐标，单位px）
|
x: 'center',
|
// y 设置垂直安放位置，默认全图顶端，可选值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px）
|
y: 'top',
|
textStyle: { //图例文字的样式
|
color: '#87CEFA',
|
},
|
data: legendData,
|
selected: legendData_selected,
|
color: 'white'
|
},
|
|
// 图表距边框的距离,可选值：'百分比'¦ {number}（单位px）
|
grid: {
|
top: '20%', // 等价于 y: '16%'
|
left: '3%',
|
right: '5%',
|
bottom: '3%',
|
containLabel: true
|
},
|
|
// 提示框
|
tooltip: {
|
trigger: 'axis'
|
},
|
|
toolbox: {
|
feature: {
|
saveAsImage: {
|
type: 'jpeg'
|
},
|
dataView: {},
|
magicType: {
|
type: ['line', 'bar'],
|
option: {
|
// 类型切换时，下述配置项将被merge到对应类型的图表 series 中
|
line: {
|
smooth: true
|
},
|
bar: {
|
label: {
|
show: true
|
}
|
}
|
}
|
},
|
}
|
},
|
xAxis: {
|
name: '时间',
|
type: 'category',
|
// 设置X轴数据旋转倾斜
|
interval: 5, //设置X轴数据间隔几个显示一个，为0表示都显示
|
axisLabel: {
|
color: '#87CEFA', //坐标的字体颜色
|
},
|
// boundaryGap值为false的时候，折线第一个点在y轴上
|
boundaryGap: false,
|
data: timeLineData,
|
axisLine: {
|
symbol: ['none', 'arrow'], //箭头一端没效果,一端箭头
|
symbolOffset: [0, 8], //箭头段移动8个像素
|
lineStyle: {
|
// 设置x轴颜色
|
color: '#87CEFA'
|
}
|
}
|
},
|
yAxis: [{
|
name: '指标(μg/m³)',
|
type: 'value',
|
axisLine: {
|
lineStyle: {
|
// 设置y轴颜色
|
color: '#87CEFA',
|
symbol: ['none', 'arrow'], //箭头一端没效果,一端箭头
|
symbolOffset: [0, 8], //箭头段移动8个像素
|
}
|
},
|
splitLine: { //网格线
|
lineStyle: {
|
type: 'dashed', //设置网格线类型 dotted：虚线 solid:实线
|
color: ['rgba(255,255,255,0.3)']
|
},
|
show: true //隐藏或显示
|
|
},
|
}, {
|
name: 'CO(mg/m³)',
|
type: 'value',
|
axisLine: {
|
lineStyle: {
|
// 设置y轴颜色
|
color: '#8700FA',
|
symbol: ['none', 'arrow'], //箭头一端没效果,一端箭头
|
symbolOffset: [0, 8], //箭头段移动8个像素
|
}
|
},
|
splitLine: { //网格线
|
lineStyle: {
|
type: 'solid', //设置网格线类型 dotted：虚线 solid:实线
|
color: ['rgba(255,255,255,0.3)']
|
},
|
show: true //隐藏或显示
|
|
},
|
}],
|
series: seriesData,
|
color: colorData
|
};
|
// console.log(timeLineData);
|
// console.log(seriesData);
|
|
//转换角标
|
var newData = legendData;
|
for (var i = 0; i < newData.length; i++) {
|
if (newData[i] == "pm25") {
|
newData[i] = "PM₂.₅";
|
}
|
if (newData[i] == "pm10") {
|
newData[i] = "PM₁₀";
|
}
|
if (newData[i] == "no") {
|
newData[i] = "NO";
|
}
|
if (newData[i] == "nox") {
|
newData[i] = "NOₓ";
|
}
|
if (newData[i] == "no2") {
|
newData[i] = "NO₂";
|
}
|
if (newData[i] == "co") {
|
newData[i] = "CO";
|
}
|
if (newData[i] == "so2") {
|
newData[i] = "SO₂";
|
}
|
if (newData[i] == "o3") {
|
newData[i] = "O₃";
|
}
|
if (newData[i] == "o31") {
|
newData[i] = "O₃₁";
|
}
|
if (newData[i] == "o38") {
|
newData[i] = "O₃₈";
|
}
|
if (newData[i] == "aqi") {
|
newData[i] = "AQI";
|
}
|
if (newData[i] == "tsp") {
|
newData[i] = "TSP";
|
}
|
};
|
|
options.legend.data = newData;
|
options.series.forEach((item, index) => {
|
item.name = legendData[index]
|
});
|
|
//转换options下面selected里的角标
|
options.legend.selected['PM₂.₅'] = options.legend.selected['pm25'];
|
delete options.legend.selected['pm25'];
|
options.legend.selected['PM₁₀'] = options.legend.selected['pm10'];
|
delete options.legend.selected['pm10'];
|
options.legend.selected['NO'] = options.legend.selected['no'];
|
delete options.legend.selected['no'];
|
options.legend.selected['NOₓ'] = options.legend.selected['nox'];
|
delete options.legend.selected['nox'];
|
options.legend.selected['NO₂'] = options.legend.selected['no2'];
|
delete options.legend.selected['no2'];
|
options.legend.selected['CO'] = options.legend.selected['co'];
|
delete options.legend.selected['co'];
|
options.legend.selected['SO₂'] = options.legend.selected['so2'];
|
delete options.legend.selected['so2'];
|
options.legend.selected['O₃'] = options.legend.selected['o3'];
|
delete options.legend.selected['o3'];
|
options.legend.selected['O₃₁'] = options.legend.selected['o31'];
|
delete options.legend.selected['o31'];
|
options.legend.selected['O₃₈'] = options.legend.selected['o38'];
|
delete options.legend.selected['o38'];
|
options.legend.selected['AQI'] = options.legend.selected['aqi'];
|
delete options.legend.selected['aqi'];
|
options.legend.selected['TSP'] = options.legend.selected['tsp'];
|
delete options.legend.selected['tsp'];
|
|
|
myCharts = echarts.init(document.getElementById('echart'));
|
myCharts.setOption(options, true);
|
window.onresize = function () {
|
myCharts.resize();
|
};
|
|
// 还原角标
|
var RestoreData = newData;
|
for (var i = 0; i < RestoreData.length; i++) {
|
if (RestoreData[i] == "PM₂.₅") {
|
RestoreData[i] = "pm25";
|
}
|
if (RestoreData[i] == "PM₁₀") {
|
RestoreData[i] = "pm10";
|
}
|
if (RestoreData[i] == "NO") {
|
RestoreData[i] = "no";
|
}
|
if (RestoreData[i] == "NOₓ") {
|
RestoreData[i] = "nox";
|
}
|
if (RestoreData[i] == "NO₂") {
|
RestoreData[i] = "no2";
|
}
|
if (RestoreData[i] == "CO") {
|
RestoreData[i] = "co";
|
}
|
if (RestoreData[i] == "SO₂") {
|
RestoreData[i] = "so2";
|
}
|
if (RestoreData[i] == "O₃") {
|
RestoreData[i] = "o3";
|
}
|
if (RestoreData[i] == "O₃₁") {
|
RestoreData[i] = "o31";
|
}
|
if (RestoreData[i] == "O₃₈") {
|
RestoreData[i] = "o38";
|
}
|
if (RestoreData[i] == "AQI") {
|
RestoreData[i] = "aqi";
|
}
|
if (RestoreData[i] == "TSP") {
|
RestoreData[i] = "tsp";
|
}
|
};
|
|
options.legend.data = RestoreData;
|
options.series.forEach((item, index) => {
|
item.name = legendData[index]
|
});
|
} else {
|
haoutil.msg("无查询记录，请更换查询条件！");
|
}
|
},
|
error: function (request, textStatus) {
|
haoutil.msg("查询错误，请联系管理员！！！")
|
}
|
});
|
}
|
