var myCharts;
|
//对应widget.js中MyWidget实例化后的对象
|
var thisWidget
|
|
//当前页面业务
|
function initWidgetView(_thisWidget) {
|
thisWidget = _thisWidget
|
|
}
|
function reloadData(params) {
|
|
loadLineChartbySiteid(params);
|
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;
|
$.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];
|
var _tr = "<tr onmouseover='over(this)' onmouseout='out(this)'><td>1</td><td>code</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>name</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>datatime</td><td>时间</td><td>" + topObj.datatime + "</td><td>/</td></tr>"
|
$("#indexTb").append(_tr);
|
var tmp_index = 4;
|
for(var p in topObj){//遍历json对象的每个key/value对,p为key
|
|
if (p!=='code' && p!=='name' && p!=='datatime' ){
|
_tr = "<tr onmouseover='over(this)' onmouseout='out(this)' ><td>"+tmp_index+"</td><td>"+p+"</td><td>"+p+"</td><td>" + topObj[p] + "</td><td>"+getUnitByqindex(p)+"</td></tr>"
|
$("#indexTb").append(_tr);
|
tmp_index++;
|
}
|
}
|
}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'){
|
return 'μg/m³';
|
}else if (qindex=='CO'){
|
return 'mg/m³';
|
}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 ！！
|
var layerid = params.layerid+"";
|
|
var legendData = all_layer_legends[layerid.substring(0,4)];
|
var legendData_selected = {};
|
legendData.forEach(element => {
|
if (element==params.selected_qindex.toUpperCase()){
|
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) {
|
console.log(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'
|
},
|
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',
|
axisLine: {
|
lineStyle: {
|
// 设置x轴颜色
|
color: '#87CEFA'
|
}
|
},
|
// 设置X轴数据旋转倾斜
|
axisLabel: {
|
color: '#87CEFA', //坐标的字体颜色
|
interval: 0 //设置X轴数据间隔几个显示一个，为0表示都显示
|
},
|
// boundaryGap值为false的时候，折线第一个点在y轴上
|
boundaryGap: false,
|
data: timeLineData,
|
axisLine: {
|
symbol: ['none', 'arrow'], //箭头一端没效果,一端箭头
|
symbolOffset: [0, 8], //箭头段移动8个像素
|
}
|
},
|
yAxis: [{
|
name: '指标(μg/m³)',
|
type: 'value',
|
axisLine: {
|
lineStyle: {
|
// 设置y轴颜色
|
color: '#87CEFA',
|
symbol: ['none', 'arrow'], //箭头一端没效果,一端箭头
|
symbolOffset: [0, 8], //箭头段移动8个像素
|
}
|
},
|
},{
|
name: 'CO(mg/m³)',
|
type: 'value',
|
axisLine: {
|
lineStyle: {
|
// 设置y轴颜色
|
color: '#8700FA',
|
symbol: ['none', 'arrow'], //箭头一端没效果,一端箭头
|
symbolOffset: [0, 8], //箭头段移动8个像素
|
}
|
},
|
}],
|
series: seriesData,
|
color: colorData
|
};
|
myCharts = echarts.init(document.getElementById('echart'));
|
myCharts.setOption(options, true);
|
window.onresize = function(){
|
myCharts.resize();
|
}
|
}else{
|
haoutil.msg("无查询记录，请更换查询条件！");
|
}
|
},
|
error: function (request, textStatus) {
|
haoutil.msg("查询错误，请联系管理员！！！")
|
}
|
});
|
}
|
|
|
function shortenLegendTimeString(datatype,full_time_str) {
|
|
if (datatype == 'hour') {
|
return full_time_str.substring(8, 13);
|
|
} else if (datatype == 'day') {
|
return full_time_str.substring(8, 10) ;
|
|
} else {
|
return full_time_str;
|
}
|
|
}
|
