$(function(){
|
//环境质量
|
var areaRatio = echarts.init(document.getElementById('areaRatio'));
|
//水文与水环境历史数据
|
var waterRatio = echarts.init(document.getElementById('waterRatio'));
|
//空气环境历史数据
|
var soilRatio = echarts.init(document.getElementById('soilRatio'));
|
//土壤历史数据
|
var airRatio = echarts.init(document.getElementById('airRatio'));
|
|
//水文与水环境历史数据
|
var waterHistory = echarts.init(document.getElementById('waterHistory'));
|
//土壤历史数据
|
var soilHistory = echarts.init(document.getElementById('soilHistory'));
|
//空气环境历史数据
|
var airHistory = echarts.init(document.getElementById('airHistory'));
|
//气象历史数据
|
var weatherHistory = echarts.init(document.getElementById('weatherHistory'));
|
|
var historyQueryEchartJc = echarts.init(document.getElementById('historyQueryEchartJc'));
|
|
var historyQueryEchart = echarts.init(document.getElementById('historyQueryEchart'));
|
|
var clickName = '';
|
|
$('.tes').show();
|
|
//******************** 行政区查询 *******************
|
$.ajax({
|
url: getNativePath() + "park/queryRegionlist.do",
|
type: "get",
|
dataType: "json",
|
success: function(data) {
|
var options = "<option value=''></option>";
|
for(var i=0; i<data.length; i++){
|
options += "<option value='"+data[i].regionId+"'>"+data[i].regionName+"</option>";
|
}
|
findStnm("");
|
findStnmJc("");
|
$("#querySelects1").html(options);
|
$("#querySelects5").html(options);
|
layui.use('form', function(){ //监听站点选中事件 动态更新站点
|
var form = layui.form;
|
form.render();
|
form.on('select(querySelect1)', function(e){
|
findStnm(e.value);
|
});
|
form.on('select(querySelect5)', function(e){
|
findStnmJc(e.value);
|
});
|
});
|
}
|
});
|
var selectstcd = '';
|
function findStnm(regionId){
|
//*************** 查询站点 ************
|
$.ajax({
|
url: getNativePath() + "station/findAllStationByStnm.do",
|
type: "get",
|
data:{"regionId":regionId},
|
dataType: "json",
|
success: function(data) {
|
if(data.data.length <= 0){
|
var options = "<option value='0'>无站点</option>";
|
}else{
|
var options = "<option value=''></option>";
|
for(var i=0; i<data.data.length; i++){
|
options += "<option value='"+data.data[i].stcd+"'>"+data.data[i].stnm+"</option>";
|
}
|
}
|
|
$("#stationInput").val("");
|
$("#querySelects2").html(options);
|
layui.use('form', function(){ //监听站点选中事件 动态更新站点
|
var form = layui.form;
|
form.render();
|
form.on('select(querySelect2)', function(e){
|
selectstcd = e.value;
|
$("#stationInput").val(e.value);
|
});
|
});
|
}
|
});
|
}
|
|
function findStnmJc(regionId){
|
//*************** 查询站点 ************
|
$.ajax({
|
url: getNativePath() + "station/findAllStationByStnm.do",
|
type: "get",
|
data:{"regionId":regionId},
|
dataType: "json",
|
success: function(data) {
|
if(data.data.length <= 0){
|
var options = "<option value='0'>无站点</option>";
|
}else{
|
var options = "<option value=''></option>";
|
for(var i=0; i<data.data.length; i++){
|
options += "<option value='"+data.data[i].stcd+"'>"+data.data[i].stnm+"</option>";
|
}
|
}
|
|
$("#stationInputJc").val("");
|
$("#querySelects4").html(options);
|
layui.use('form', function(){ //监听站点选中事件 动态更新站点
|
var form = layui.form;
|
form.render();
|
form.on('select(querySelect4)', function(e){
|
$("#stationInputJc").val(e.value);
|
});
|
});
|
}
|
});
|
}
|
//******************** 实时数据 *******************
|
var dataitem = [];
|
WaterElement("T_DATA_WATER", "", areaRatio, 1, 1);
|
WaterElement("T_DATA_AIR", "", waterRatio, 2, 1);
|
WaterElement("T_DATA_SOIL", "", soilRatio, 3, 1);
|
WaterElement("T_DATA_WEATHER", "", airRatio, 4, 1);
|
function WaterElement(type, stationId, areaRatioEchart, num, mold){
|
$.ajax({
|
url: getNativePath() + "naturalFactors/queryElementsValueAndIsWarning.do",
|
type: "get",
|
// data:{"eleName":type, "stcd":stationId},
|
data:{"elementType":type, "stcd":stationId},
|
dataType: "json",
|
success: function(data) {
|
dataitem.push(data);
|
data = data.data;
|
// console.log(data)
|
$(".his-loding").hide();
|
if(data.length>0){
|
queryHistoryEchart(data, areaRatioEchart, num, mold);
|
}else{
|
if(mold == 2){
|
$(".histor-tip").show();
|
}else{
|
if(type == "T_DATA_WATER"){
|
$(".histor-tip-void1").show();
|
}else if(type == "T_DATA_AIR"){
|
$(".histor-tip-void2").show();
|
}else if(type == "T_DATA_SOIL"){
|
$(".histor-tip-void3").show();
|
}else if(type == "T_DATA_WEATHER"){
|
$(".histor-tip-void4").show();
|
}
|
}
|
}
|
|
}
|
});
|
}
|
|
|
function queryHistoryEchart(data, airRatio, num, mold){
|
var selected = {};
|
var serData = [],
|
serDataAll = [],
|
hosName = [], //站点名称
|
legendData = [], //元素名称
|
seriesData = [],
|
unitData = [];
|
// console.log(actualImg)
|
// console.log(data)
|
for(var i=0; i<data.length; i++){
|
hosName.push(data[i].staName); //站点名称
|
legendData = [], serData = [], unitData = [];
|
// console.log(data[i])
|
for(j in data[i]){
|
for(k in actualImg){
|
// console.log(data[i][j][0])
|
if(j == k){
|
legendData.push(actualImg[k].name); //元素名称
|
unitData.push({"name":actualImg[k].name, "unit":actualImg[k].unit}); //单位
|
// serData.push({"value":parseInt(data[i][j]).toFixed(2), "time":data[i].id.uptime}); //元素值
|
serData.push({"value":data[i][j], "time":data[i].id.uptime}); //元素值
|
}
|
}
|
}
|
// console.log(serData)
|
serDataAll.push(serData);
|
}
|
// console.log(serDataAll)
|
if(mold == 1){
|
if(serDataAll.length > 4){
|
serDataAll = serDataAll.slice(0,5);
|
hosName = hosName.slice(0,5);
|
}
|
}
|
|
var valSel = [], valSel1 = [], valSel2 = [], valSel3 = [], valSel4 = [], valSel5 = [], valSel6 = [], valSel7 = [], valSel8 = [], valSel9 = [], valSel10 = [], valSeltm1 = [];
|
for(var i=0; i<serDataAll.length; i++){
|
for(var j=0; j<serDataAll[i].length; j++){
|
if(j == 0){
|
valSel1.push(serDataAll[i][j].value);
|
valSeltm1.push(serDataAll[i][j].time);
|
}else if(j == 1){
|
valSel2.push(serDataAll[i][j].value);
|
}else if(j == 2){
|
valSel3.push(serDataAll[i][j].value);
|
}else if(j == 3){
|
valSel4.push(serDataAll[i][j].value);
|
}else if(j == 4){
|
valSel5.push(serDataAll[i][j].value);
|
}else if(j == 5){
|
valSel6.push(serDataAll[i][j].value);
|
}else if(j == 6){
|
valSel7.push(serDataAll[i][j].value);
|
}else if(j == 7){
|
valSel8.push(serDataAll[i][j].value);
|
}else if(j == 8){
|
valSel9.push(serDataAll[i][j].value);
|
}else if(j == 9){
|
valSel10.push(serDataAll[i][j].value);
|
}
|
}
|
}
|
|
if(valSel1.length>0){
|
valSel.push(valSel1);
|
}
|
if(valSel2.length>0){
|
valSel.push(valSel2);
|
}
|
if(valSel3.length>0){
|
valSel.push(valSel3);
|
}
|
if(valSel4.length>0){
|
valSel.push(valSel4);
|
}
|
if(valSel5.length>0){
|
valSel.push(valSel5);
|
}
|
if(valSel6.length>0){
|
valSel.push(valSel6);
|
}
|
if(valSel7.length>0){
|
valSel.push(valSel7);
|
}
|
if(valSel8.length>0){
|
valSel.push(valSel8);
|
}
|
if(valSel9.length>0){
|
valSel.push(valSel9);
|
}
|
if(valSel10.length>0){
|
valSel.push(valSel10);
|
}
|
//-------------------------------------------
|
//如果不是空气环境监测模块，就把数据第一条和第二条换位
|
var dataList = [];
|
for(var i=0; i<valSel.length; i++){
|
if(num != 2){
|
if(i == 1){
|
dataList.unshift(valSel[i]);
|
}else{
|
dataList.push(valSel[i]);
|
}
|
}else{
|
dataList.push(valSel[i]);
|
}
|
}
|
valSel = dataList;
|
var legendDataArr = [];
|
var newLegendDataArr = [];
|
for(var i=0; i<legendData.length; i++){
|
if(num != 2){
|
if(i == 1){
|
legendDataArr.unshift(legendData[i]);
|
}else{
|
legendDataArr.push(legendData[i]);
|
}
|
}else{
|
legendDataArr.push(legendData[i]);
|
}
|
}
|
for(var s in legendDataArr){
|
if(s == 0){
|
if(num == 1){
|
newLegendDataArr.push({
|
'name':legendDataArr[s],
|
'icon':'image://./images/c1.png'
|
})
|
}else if(num == 2){
|
newLegendDataArr.push({
|
'name':legendDataArr[s],
|
'icon':'image://./images/c2.png'
|
})
|
}else if(num == 3){
|
newLegendDataArr.push({
|
'name':legendDataArr[s],
|
'icon':'image://./images/c4.png'
|
})
|
}else if(num == 4){
|
newLegendDataArr.push({
|
'name':legendDataArr[s],
|
'icon':'image://./images/c3.png'
|
})
|
}
|
}else{
|
if(num == 1){
|
newLegendDataArr.push({
|
'name':legendDataArr[s],
|
'icon':'image://./images/d1.png'
|
})
|
}else if(num == 2){
|
newLegendDataArr.push({
|
'name':legendDataArr[s],
|
'icon':'image://./images/d2.png'
|
})
|
}else if(num == 3){
|
newLegendDataArr.push({
|
'name':legendDataArr[s],
|
'icon':'image://./images/d4.png'
|
})
|
}else if(num == 4){
|
newLegendDataArr.push({
|
'name':legendDataArr[s],
|
'icon':'image://./images/d3.png'
|
})
|
}
|
}
|
|
}
|
|
legendData = legendDataArr;
|
//---------------------------------------------
|
for(var i=0; i<legendData.length; i++){
|
if(i == 0){
|
selected[legendData[i]] = true;
|
}else{
|
selected[legendData[i]] = false;
|
}
|
}
|
var newSel = [];
|
var errSel = [];
|
var errSels = [];
|
var index = 0;
|
var lineColor = '';
|
var a = 0;
|
for(var i=0; i<valSel.length; i++){
|
newSel = [];
|
errSel = [];
|
for(var z in valSel[i]){
|
if(isNaN(valSel[i][z][0])){
|
newSel.push(0.00)
|
}else{
|
newSel.push((valSel[i][z][0] - 0).toFixed(2))
|
}
|
errSel.push(valSel[i][z][1])
|
}
|
errSels.push(errSel);
|
if(i == 0){
|
if(num == 1){
|
lineColor = '#eb9d08';
|
var barColor = function(params) {
|
if(errSels[0][params.dataIndex] == 1){
|
return '#ff0000'
|
};
|
return '#56cedf'
|
}
|
}else if(num == 2){
|
lineColor = '#df5f13';
|
var barColor = function(params) {
|
if(errSels[0][params.dataIndex] == 1){
|
return '#ff0000'
|
};
|
return '#1bd0ad'
|
}
|
}else if(num == 3){
|
lineColor = '#6495ED';
|
var barColor = function(params) {
|
if(errSels[0][params.dataIndex] == 1){
|
return '#ff0000'
|
};
|
return '#eb9d08'
|
}
|
}else if(num == 4){
|
lineColor = '#1bd0ad';
|
var barColor = function(params) {
|
if(errSels[0][params.dataIndex] == 1){
|
return '#ff0000'
|
};
|
return '#df5f13'
|
}
|
}
|
seriesData.push({
|
name:legendData[i],
|
type: 'bar',
|
barMaxWidth:'50%',
|
symbol:'circle',
|
itemStyle: {
|
normal: {
|
color:barColor,
|
borderWidth:1,
|
},
|
|
},
|
data:newSel
|
});
|
}else{
|
var barColor = function(params) {
|
for(var q in legendData){
|
if(legendData[q] == clickName){
|
index = q;
|
}
|
}
|
if(errSels[index][params.dataIndex] == 1){
|
return '#ff0000'
|
};
|
// var colorList = [
|
// ['#00FFFF'],['#7FFF00'],['#FF7F50'],['#008B8B'],['#FF1493'],
|
// ['#1E90FF'],['#008000'],['#FF69B4'],['#F0E68C'],['#F08080'],
|
// ['#90EE90'],['#778899'],['#48D1CC'],['#FFE4E1'],['#B0E0E6'],
|
// ['#800080'],['#4169E1'],['#EE82EE'],['#D8BFD8'],['#D2B48C'],
|
// ['#AFEEEE'],['#FFD700']
|
// ]
|
// return colorList[index]
|
return lineColor;
|
};
|
for(var q in legendData){
|
if(legendData[q] == clickName){
|
index = q;
|
}
|
}
|
seriesData.push({
|
name:legendData[i],
|
smooth: true,
|
symbol:'circle',
|
type: 'line',
|
yAxisIndex: 1,
|
data:newSel,
|
itemStyle: {
|
normal: {
|
color: barColor,
|
lineStyle:{
|
color: lineColor
|
}
|
},
|
|
}
|
});
|
}
|
}
|
naturalEchart(airRatio, hosName, legendData, seriesData, selected, mold, valSeltm1, unitData, newLegendDataArr, num);
|
}
|
|
function naturalEchart(waterHistory, hosName, legendData, seriesData, selected, mold, valSeltm1, unitData, newLegendDataArr, num){
|
// console.log(newLegendDataArr)
|
// var colorData = ['#FC9E17', '#08f67c', '#50a37d', '#2ac2de', '#FC9E17', '#f8da0f', '#a63535', '#f89c00', '#a06602', '#189f5a'];
|
// var colorData = ['#00FFFF','#7FFF00','#FF7F50','#008B8B','#FF1493','#1E90FF','#008000','#FF69B4','#F0E68C','#F08080','#90EE90','#778899','#48D1CC','#FFE4E1','#B0E0E6','#800080','#4169E1','#EE82EE','#D8BFD8','#D2B48C','#AFEEEE','#FFD700'];
|
var topVal = "0";
|
var dataZooms = [];
|
if(mold == 2){
|
topVal = "20";
|
dataZooms = [{
|
type: 'inside',
|
start: 0,
|
end: 100
|
}, {
|
start: 0,
|
end: 10,
|
handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
|
bottom:'28',
|
height:8,
|
handleColor: '#ff8c80',
|
handleStyle: {
|
borderColor: '#ff8c80',
|
borderWidth: "1",
|
shadowBlur: 0,
|
background: '#ff8c80',
|
shadowColor: '#ff8c80',
|
},
|
}]
|
}
|
var waterOption = {
|
// color:lineColor,
|
tooltip : {
|
trigger: 'axis',
|
formatter:function(params){
|
var html = '<div>'+params[0].name+'<div>';
|
var unit = "";
|
for(var i=0; i<params.length; i++){
|
unit = ""
|
for(var j=0; j<unitData.length; j++){
|
if(unitData[j].name == params[i].seriesName){
|
if(unitData[j].unit != "无"){
|
unit = unitData[j].unit;
|
}
|
}
|
}
|
html +='<div>'+params[i].marker+params[i].seriesName+'：'+params[i].value+ unit+'</div>'
|
}
|
html += '<div>'+valSeltm1[params[0].dataIndex]+'</div>'
|
return html;
|
}
|
},
|
legend: {
|
type:'scroll',
|
top:'5',
|
orient: 'horizontal',
|
// data:legendData,
|
data:newLegendDataArr,
|
selected:selected,
|
textStyle : {color:'#fff'},
|
pageTextStyle:{color:'#fff'},
|
pageIconColor:'#fff',
|
pageIconInactiveColor:'#fff',
|
top:topVal,
|
itemWidth:14
|
},
|
grid: {
|
left: '12',
|
right: '4%',
|
bottom: '0',
|
top:'15%',
|
containLabel: true
|
},
|
dataZoom: dataZooms,
|
xAxis: {
|
show:true,
|
type: 'category',
|
nameTextStyle:{color:'#fff'},
|
axisLabel: {
|
textStyle: {
|
padding:[0, 0, 0, 8],
|
color: '#fff'
|
}
|
},
|
axisLine:{
|
show:true,
|
lineStyle:{color:'#fff'},
|
},
|
axisTick:{
|
show:false
|
},
|
data:hosName,
|
axisLabel: {
|
interval: 0,
|
fontSize:11,
|
formatter:function(value){
|
var ret = "", start = "";//拼接加\n返回的类目项
|
var maxLength = 4;//每项显示文字个数
|
var rowN = Math.ceil(value.length / maxLength); //类目项需要换行的行数
|
if (rowN > 1){
|
for (var i = 0; i < rowN; i++) {
|
start = i * maxLength;//开始截取的位置
|
if(i == 0){
|
ret += value.substring(start, (start + maxLength)); //凭借最终的字符串
|
}else{
|
ret += "\n"+value.substring(start, (start + maxLength)); //凭借最终的字符串
|
}
|
}
|
return ret;
|
}else{
|
return value;
|
}
|
}
|
}
|
},
|
yAxis: [{
|
show:true,
|
name: '',
|
type: 'value',
|
axisLine:{
|
lineStyle:{color:'#fff'},
|
},
|
axisTick:{
|
show:false
|
},
|
axisLabel: {
|
margin: 10,
|
textStyle: {
|
fontSize: 12,
|
color: '#fff'
|
}
|
},
|
splitLine:{
|
lineStyle:{color:'#fff'},
|
show:false
|
},
|
},{
|
show:true,
|
name: '',
|
type: 'value',
|
axisLine:{
|
lineStyle:{color:'#fff'},
|
},
|
axisTick:{
|
show:false
|
},
|
axisLabel: {
|
margin: 10,
|
textStyle: {
|
fontSize: 12,
|
color: '#fff'
|
}
|
},
|
splitLine:{
|
lineStyle:{color:'#fff'},
|
show:false
|
},
|
}],
|
series: seriesData,
|
};
|
waterHistory.setOption(waterOption);
|
$(window).resize(waterHistory.resize);
|
|
//先解除事件监听,再添加
|
waterHistory.off('legendselectchanged');
|
waterHistory.on('legendselectchanged', function(params) {
|
clickName = params.name;
|
|
for(var x in legendData){
|
if(legendData[x] == clickName){
|
var index = x;
|
}
|
}
|
|
var keys;
|
//获取第一个元素
|
for(var i in params.selected){
|
keys = i;
|
break;
|
}
|
for(var z in params.selected){
|
//如果选中元素是第一个，则不进行其他元素操作
|
if(params.name == keys){
|
break;
|
}
|
//不是选中元素且不是第一个元素的元素都取消选中
|
if(z != params.name && z != keys){
|
params.selected[z] = false;
|
}
|
}
|
if(index == 0){
|
if(num == 1){
|
if(params.selected[clickName]){
|
waterOption.legend.data[index].icon = 'image://./images/c1.png';
|
}else{
|
waterOption.legend.data[index].icon = 'image://./images/f1.png'
|
}
|
}else if(num == 2){
|
if(params.selected[clickName]){
|
waterOption.legend.data[index].icon = 'image://./images/c2.png';
|
}else{
|
waterOption.legend.data[index].icon = 'image://./images/f2.png'
|
}
|
}else if(num == 3){
|
if(params.selected[clickName]){
|
waterOption.legend.data[index].icon = 'image://./images/c4.png';
|
}else{
|
waterOption.legend.data[index].icon = 'image://./images/f4.png'
|
}
|
}else if(num == 4){
|
if(params.selected[clickName]){
|
waterOption.legend.data[index].icon = 'image://./images/c3.png';
|
}else{
|
waterOption.legend.data[index].icon = 'image://./images/f3.png'
|
}
|
}
|
}else{
|
if(num == 1){
|
if(params.selected[clickName]){
|
for(var s in waterOption.legend.data){
|
if(s == index){
|
waterOption.legend.data[index].icon = 'image://./images/s1.png';
|
}else{
|
if(s != 0){
|
waterOption.legend.data[s].icon = 'image://./images/d1.png';
|
}
|
}
|
}
|
}else{
|
waterOption.legend.data[index].icon = 'image://./images/d1.png'
|
}
|
}else if(num == 2){
|
if(params.selected[clickName]){
|
for(var s in waterOption.legend.data){
|
if(s == index){
|
waterOption.legend.data[index].icon = 'image://./images/s2.png';
|
}else{
|
if(s != 0){
|
waterOption.legend.data[s].icon = 'image://./images/d2.png';
|
}
|
}
|
}
|
}else{
|
waterOption.legend.data[index].icon = 'image://./images/d2.png'
|
}
|
}else if(num == 3){
|
if(params.selected[clickName]){
|
for(var s in waterOption.legend.data){
|
if(s == index){
|
waterOption.legend.data[index].icon = 'image://./images/s4.png';
|
}else{
|
if(s != 0){
|
waterOption.legend.data[s].icon = 'image://./images/d4.png';
|
}
|
}
|
}
|
}else{
|
waterOption.legend.data[index].icon = 'image://./images/d4.png'
|
}
|
}else if(num == 4){
|
if(params.selected[clickName]){
|
for(var s in waterOption.legend.data){
|
if(s == index){
|
waterOption.legend.data[index].icon = 'image://./images/s3.png';
|
}else{
|
if(s != 0){
|
waterOption.legend.data[s].icon = 'image://./images/d3.png';
|
}
|
}
|
}
|
}else{
|
waterOption.legend.data[index].icon = 'image://./images/d3.png'
|
}
|
}
|
}
|
|
naturalEchart(this, hosName, legendData, seriesData, params.selected, mold, valSeltm1, unitData, newLegendDataArr, num);
|
})
|
}
|
|
//******************** 实时数据 -- 更多 *******************
|
$(".acreage-close").unbind().click(function(){
|
//关闭弹窗
|
$('.history-query-box').hide();
|
|
});
|
$('.acreage-more').unbind().click(function(){
|
//更多 --- 打开弹窗
|
$(".history-query").hide();
|
$(".history-query-title h3").html($(this).attr("data-html"));
|
$('.history-query-box').show();
|
$("#stationInputTitle").val($(this).attr('data-id'));
|
$("#stationInputJc").val("");
|
$("#querySelects5").find("option").each(function(){
|
$(this).removeAttr("selected");
|
if($(this).val() == ""){
|
$(this).attr("selected","selected");
|
findStnmJc("");
|
}
|
})
|
layui.use('form', function(){ //监听站点选中事件 动态更新站点
|
var form = layui.form;
|
form.render();
|
});
|
historyQueryEchartJc.dispose(); //销毁图表
|
$(window).off('resize'); //移除已销毁图表的resize事件
|
historyMoreQueryJc();
|
});
|
|
//******************** 实时数据 -- 查询 *******************
|
$("#hisToryQueryBtnJc").unbind().click(function(){
|
historyQueryEchartJc.dispose(); //销毁图表
|
$(window).off('resize'); //移除已销毁图表的resize事件
|
historyMoreQueryJc(historyQueryEchartJc);
|
});
|
|
$("#hisToryClearBtnJc").unbind().click(function(){
|
$("#stationInputJc").val("");
|
$("#querySelects5").find("option").each(function(){
|
$(this).removeAttr("selected");
|
if($(this).val() == ""){
|
$(this).attr("selected","selected");
|
findStnmJc("");
|
}
|
})
|
layui.use('form', function(){ //监听站点选中事件 动态更新站点
|
var form = layui.form;
|
form.render();
|
});
|
historyQueryEchartJc.dispose(); //销毁图表
|
$(window).off('resize'); //移除已销毁图表的resize事件
|
historyMoreQueryJc();
|
});
|
|
$("#hisToryDownLoadBtnJc").unbind().click(function(){
|
var type = $('.history-query-title h3').html();
|
if(type == '水文与环境监测'){
|
var sendType = 'T_DATA_WATER';
|
}else if(type == '空气环境监测'){
|
var sendType = 'T_DATA_AIR';
|
}else if(type == '气象监测'){
|
var sendType = 'T_DATA_WEATHER';
|
}else if(type == '土壤监测'){
|
var sendType = 'T_DATA_SOIL';
|
}
|
type = encodeURI(type, "UTF-8");
|
$.ajax({
|
url:getNativePath() + "naturalFactors/booleanExcelExportEleDataByStcdOrEleName.do?eleName=" + sendType + "&stcd=",
|
success:function(res){
|
if(res && res.success){
|
window.open(getNativePath() + "naturalFactors/excelExportEleDataByStcdOrEleName.do?eleName=" + sendType + "&title=" + type + "&stcd=");
|
}else{
|
layer.msg('暂无数据,无法下载！');
|
}
|
}
|
});
|
})
|
|
function historyMoreQueryJc(){
|
$(".his-loding").show();
|
$(".histor-tip").hide();
|
var dataId = $("#stationInputTitle").val();
|
var stcd = $("#stationInputJc").val();
|
historyQueryEchartJc = echarts.init(document.getElementById('historyQueryEchartJc')); //初始化图表
|
if(dataId == "T_DATA_WATER"){
|
WaterElement(dataId, stcd, historyQueryEchartJc, 1, 2);
|
}else if(dataId == "T_DATA_AIR"){
|
WaterElement(dataId, stcd, historyQueryEchartJc, 2, 2);
|
}else if(dataId == "T_DATA_SOIL"){
|
WaterElement(dataId, stcd, historyQueryEchartJc, 3, 2);
|
}else if(dataId == "T_DATA_WEATHER"){
|
WaterElement(dataId, stcd, historyQueryEchartJc, 4, 2);
|
}
|
|
}
|
|
//******************** 历史数据 *******************
|
$.ajax({
|
url: getNativePath() + "fieldsdict/findAllEleInfoGroupByType.do",
|
type: "get",
|
dataType: "json",
|
success: function(data) {
|
$('.tes').hide();
|
selectData(data.data.T_DATA_WATER, "waterSelect", waterHistory);
|
selectData(data.data.T_DATA_AIR, "airSelect", airHistory);
|
selectData(data.data.T_DATA_SOIL, "soilSelect", soilHistory);
|
selectData(data.data.T_DATA_WEATHER, "weatherSelect", weatherHistory);
|
renderForm();
|
}
|
});
|
function renderForm(){
|
layui.use('form', function(){
|
var form = layui.form; //只有执行了这一步，部分表单元素才会自动修饰成功
|
form.render();
|
form.on('select(wateraihao)', function(e){
|
$(".main-bottom .monit-history:nth-child(1) .monit-tip").hide();
|
historyData(e.value,"waterSelect", waterHistory);
|
});
|
form.on('select(airaihao)', function(e){
|
$(".main-bottom .monit-history:nth-child(2) .monit-tip").hide();
|
historyData(e.value, "airSelect", airHistory);
|
});
|
form.on('select(soilaihao)', function(e){
|
$(".main-bottom .monit-history:nth-child(4) .monit-tip").hide();
|
historyData(e.value, "soilSelect", soilHistory);
|
});
|
form.on('select(weatheraihao)', function(e){
|
$(".main-bottom .monit-history:nth-child(3) .monit-tip").hide();
|
historyData(e.value, "weatherSelect", weatherHistory);
|
});
|
});
|
}
|
|
function selectData(datas, selId, echartBox){
|
var html = "";
|
//-----------------------------------------
|
if(selId == "airSelect"){
|
var datasList = [];
|
for(var i=0; i<datas.length; i++){
|
if(datas[i].fieldName == "2.5微米颗粒物"){
|
datasList.unshift(datas[i]);
|
}else{
|
datasList.push(datas[i]);
|
}
|
}
|
datas = datasList;
|
}
|
//---------------------------------------------
|
for(var i=0; i<datas.length; i++){
|
if(i == 0){
|
historyData(datas[i].field,selId, echartBox);
|
html += '<option selected="selected" value="'+datas[i].field+'" dataUnit="'+datas[i].field+'">'+
|
datas[i].fieldName+'</option>';
|
}else{
|
html += '<option value="'+datas[i].field+'" dataUnit="'+datas[i].field+'">'+
|
datas[i].fieldName+'</option>';
|
}
|
}
|
$('#'+selId).html(html);
|
}
|
|
function historyData(field, selId, echartBox){
|
$(window).resize(waterHistory.resize);
|
$(window).resize(airHistory.resize);
|
$(window).resize(soilHistory.resize);
|
$(window).resize(weatherHistory.resize);
|
echartBox.clear();
|
var datas = {}, unit="";
|
for(var k in actualImgParam){
|
if(k == field){
|
unit = actualImgParam[k].unit;
|
}
|
};
|
if(selId != "querySelects"){
|
var nowtime = new Date();
|
var endtime = times(nowtime);
|
var starttime = nowtime.getFullYear()+'-'+p(nowtime.getMonth()+1)+"-"+p(nowtime.getDate())+" 00:00:00";
|
$("#historyStratTime").val(starttime);
|
$("#historyEndTime").val(endtime);
|
datas = {"startTime":starttime, "endTime":endtime, "elementId":field, "stcd":""};
|
}else{
|
var endtime = $("#historyEndTime").val();
|
var starttime = $("#historyStratTime").val();
|
var stationInput = $("#stationInput").val();
|
datas = {"startTime":starttime, "endTime":endtime, "elementId":field, "stcd":stationInput};
|
}
|
datas.endTime = getToday("e", 0);
|
$.ajax({
|
url: getNativePath() + "naturalFactors/findElementStationInfo.do",
|
type: "get",
|
data:datas,
|
dataType: "json",
|
success: function(data) {
|
$(".his-loding").hide();
|
$(".histor-tip").hide();
|
// console.log(data)
|
if(data.data.length > 0){
|
//-------------------------------------------
|
if(data.data.length == 1){
|
var dataList = data.data;
|
}else{
|
var dataList = [];
|
for(var i=0; i<data.data.length; i++){
|
if(data.data[i].staionName == "都昌"){
|
dataList.unshift(data.data[i]);
|
}else{
|
dataList.push(data.data[i]);
|
}
|
}
|
}
|
// console.log(dataList)
|
historyDataShow(dataList, echartBox, selId, unit);
|
//-------------------------------------------
|
}else{
|
if(selId == "waterSelect"){
|
$(".main-bottom .monit-history:nth-child(1) .monit-tip").show();
|
}else if(selId == "airSelect"){
|
$(".main-bottom .monit-history:nth-child(2) .monit-tip").show();
|
}else if(selId == "soilSelect"){
|
$(".main-bottom .monit-history:nth-child(4) .monit-tip").show();
|
}else if(selId == "weatherSelect"){
|
$(".main-bottom .monit-history:nth-child(3) .monit-tip").show();
|
}else if(selId == "querySelects"){
|
$(".histor-tip").show();
|
}
|
}
|
}
|
});
|
}
|
|
function historyDataShow(data, echartBox, selId, unit){
|
var colorData1 = ['rgba(252, 158, 23, 0.2)', 'rgba(8, 246, 124, 0.2)', 'rgba(80, 163, 125, 0.2)', 'rgba(42, 194, 222, 0.2)', 'rgba(252, 158, 23, 0.2)', 'rgba(248, 218, 15, 0.2)', 'rgba(166, 53, 53, 0.2)', 'rgba(248, 156, 0, 0.2)', 'rgba(160, 102, 2, 0.2)', 'rgba(24, 159, 90, 0.2)'];
|
var colorData2 = ['rgba(252, 158, 23, .6)', 'rgba(8, 246, 124, .6)', 'rgba(80, 163, 125, .6)', 'rgba(42, 194, 222, .6)', 'rgba(252, 158, 23, .6)', 'rgba(248, 218, 15, .6)', 'rgba(166, 53, 53, .6)', 'rgba(248, 156, 0, .6)', 'rgba(160, 102, 2, .6)', 'rgba(24, 159, 90, .6)'];
|
var legendData = [], seriesData = [];
|
var selected = {};
|
// var aitem, a ,bitem, b;
|
// for(var z in data){
|
// aitem = data[0];
|
// a = 0;
|
// if(data[z].staionName == "都昌候鸟保护区"){
|
// bitem = data[z];
|
// b = z;
|
// }
|
// }
|
// data[a] = bitem;
|
// data[b] = aitem;
|
for(var i=0; i<data.length; i++){
|
legendData.push(data[i].staionName);
|
var hosData = [], time = [];
|
for(var j=0, le = data[i].valueList.length; j<le; j++){
|
|
if(data[i].valueList[j][1] == null){
|
data[i].valueList[j][1] = 0;
|
}
|
hosData.push(data[i].valueList[j][1]);
|
time.push((data[i].valueList[j][0]).substring(0, 16));
|
}
|
if(selId == "querySelects"){
|
seriesData.push({
|
name:data[i].staionName,
|
type: 'line',
|
symbol:'circle',
|
showSymbol:false,
|
areaStyle: {
|
normal: {
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
offset: 0.6,
|
color: colorData1[i]
|
}, {
|
offset: 1,
|
color: colorData2[i]
|
}], false),
|
shadowColor: 'rgba(0, 0, 0, 0.1)',
|
shadowBlur: 10
|
}
|
},
|
data:hosData
|
});
|
}else{
|
seriesData.push({
|
name:data[i].staionName,
|
type: 'line',
|
showSymbol:false,
|
symbol:'circle',
|
areaStyle: {
|
normal: {
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
offset: 0.6,
|
color: colorData1[i]
|
}, {
|
offset: 1,
|
color: colorData2[i]
|
}], false),
|
shadowColor: 'rgba(0, 0, 0, 0.1)',
|
shadowBlur: 10
|
}
|
},
|
data:hosData
|
});
|
}
|
|
if(i == 0){
|
selected[data[i].staionName] = true;
|
}else{
|
selected[data[i].staionName] = false;
|
}
|
}
|
|
if(selId != "querySelects"){
|
if(seriesData.length > 4){
|
seriesData = seriesData.slice(0,4);
|
legendData = legendData.slice(0,4);
|
}
|
}
|
|
|
historyEchart(echartBox, time, legendData, seriesData, selected, selId, unit);
|
}
|
|
function historyEchart(waterHistory, time, legendData, seriesData, selected, selId, unit){
|
if(unit){
|
unit = "("+unit+")";
|
}
|
var colorData = ['#FC9E17', '#08f67c', '#50a37d', '#2ac2de', '#FC9E17', '#f8da0f', '#a63535', '#f89c00', '#a06602', '#189f5a'];
|
var dataZooms = [];
|
if(selId == "querySelects"){
|
dataZooms = [{
|
type: 'inside',
|
start: 0,
|
end: 100
|
}, {
|
start: 0,
|
end: 10,
|
handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
|
bottom:'35',
|
height:8,
|
handleColor: '#ff8c80',
|
handleStyle: {
|
borderColor: '#ff8c80',
|
borderWidth: "1",
|
shadowBlur: 0,
|
background: '#ff8c80',
|
shadowColor: '#ff8c80',
|
},
|
}]
|
}
|
|
|
var waterOption = {
|
color:colorData,
|
tooltip: {
|
trigger: 'axis',
|
},
|
legend: {
|
type:'scroll',
|
orient: 'horizontal',
|
data:legendData,
|
selected:selected,
|
textStyle : {color:'#fff'},
|
pageTextStyle:{color:'#fff'},
|
pageIconColor:'#fff',
|
pageIconInactiveColor:'#fff',
|
right:'90',
|
left:'10',
|
top:'5',
|
itemWidth:14
|
},
|
grid: {
|
left: '12',
|
right: '4%',
|
bottom: '1%',
|
top:'45',
|
containLabel: true
|
},
|
dataZoom: dataZooms,
|
xAxis: {
|
type: 'category',
|
show:true,
|
boundaryGap: false,
|
nameTextStyle:{color:'#fff'},
|
axisLabel: {
|
textStyle: {
|
color: '#fff'
|
}
|
},
|
axisLine:{
|
lineStyle:{
|
color:"#fff"
|
}
|
},
|
splitLine:{
|
lineStyle:{color:'#fff'},
|
interval:false
|
},
|
data:time.map(function(str) {
|
return str.replace(' ', '\n')
|
})
|
},
|
yAxis: {
|
name: unit,
|
type: 'value',
|
nameGap:8,
|
show:true,
|
axisLine:{
|
lineStyle:{
|
color:"#fff"
|
}
|
},
|
axisTick:{
|
show:false
|
},
|
axisLabel: {
|
margin: 10,
|
textStyle: {
|
fontSize: 12,
|
color: '#fff'
|
}
|
},
|
splitLine:{
|
lineStyle:{color:'#fff'},
|
show:false
|
},
|
},
|
series: seriesData
|
};
|
waterHistory.setOption(waterOption);
|
$(window).resize(waterHistory.resize);
|
}
|
|
//******************** 历史数据 ----- 更多 *******************
|
|
$(".his-close").unbind().click(function(){
|
//关闭更多
|
$(".history-query").hide();
|
$(".history-query").removeClass('on');
|
});
|
|
$('.history-more').unbind().click(function(){
|
$('.history-query-box').hide();
|
var dataId = $(this).attr('data-id');
|
$("#historyType").val(dataId);
|
strTime = getToday("s", 0);
|
endTime = getToday("e", 0);
|
$("#historyStratTime").val(strTime);
|
$("#historyEndTime").val(endTime);
|
$(".history-query-date span").removeClass('on');
|
$(".history-query-date span").eq(0).addClass('on');
|
$(".history-query-title h3").html($(this).attr("data-html"));
|
$("#stationInput").val("");
|
$("#querySelects1").find("option").each(function(){
|
$(this).removeAttr("selected");
|
if($(this).val() == ""){
|
$(this).attr("selected","selected");
|
findStnm("");
|
}
|
})
|
layui.use('form', function(){ //监听站点选中事件 动态更新站点
|
var form = layui.form;
|
form.render();
|
});
|
|
historyMoreQuery(dataId);
|
});
|
|
function historyMoreQuery(dataId){
|
$(".his-loding").show();
|
$('.histor-tip').hide();
|
var stcd = $("#searchScid").val();
|
var starttime = $("#historyStratTime").val();
|
var endtime = $("#historyEndTime").val();
|
if(starttime.length < 14){
|
starttime = starttime +" 00:00:00";
|
endtime = endtime+" 23:59:59"
|
}
|
$(".history-query").show();
|
$(".history-query").addClass('on');
|
historyQueryEchart.dispose(); //销毁图表
|
$(window).off('resize'); //移除已销毁图表的resize事件
|
historyQueryEchart = echarts.init(document.getElementById('historyQueryEchart')); //初始化图表
|
$.ajax({
|
url: getNativePath() + "fieldsdict/findAllEleInfoGroupByType.do",
|
type: "get",
|
dataType: "json",
|
success: function(data) {
|
var jsons = [], html="";
|
if(dataId == "host1"){
|
jsons = data.data.T_DATA_WATER;
|
}else if(dataId == "host2"){
|
jsons = data.data.T_DATA_AIR;
|
//-----------------------------------
|
var datasList = [];
|
for(var i=0; i<jsons.length; i++){
|
if(jsons[i].fieldName == "2.5微米颗粒物"){
|
datasList.unshift(jsons[i]);
|
}else{
|
datasList.push(jsons[i]);
|
}
|
}
|
jsons = datasList;
|
//-------------------------------------------
|
}else if(dataId == "host3"){
|
jsons = data.data.T_DATA_SOIL;
|
}else if(dataId == "host4"){
|
jsons = data.data.T_DATA_WEATHER;
|
}
|
for(var i=0; i<jsons.length; i++){
|
if(i == 0){
|
historyData(jsons[i].field, "querySelects", historyQueryEchart);
|
$("#actualInput").val(jsons[i].field);
|
html += '<option selected="selected" value="'+jsons[i].field+'">'+
|
jsons[i].fieldName+'</option>';
|
}else{
|
html += '<option value="'+jsons[i].field+'">'+
|
jsons[i].fieldName+'</option>';
|
}
|
}
|
$('#querySelects3').html(html);
|
|
layui.use('form', function(){
|
var form = layui.form; //只有执行了这一步，部分表单元素才会自动修饰成功
|
form.render();
|
form.on('select(querySelect3)', function(e){
|
$("#actualInput").val(e.value);
|
});
|
});
|
}
|
});
|
}
|
|
//******************** 历史数据 ----- 查询 *******************
|
$("#hisToryQueryBtn").unbind().click(function(){
|
$(".his-loding").show();
|
$('.histor-tip').hide();
|
var values = $("#actualInput").val();
|
historyQueryEchart.dispose(); //销毁图表
|
$(window).off('resize'); //移除已销毁图表的resize事件
|
historyQueryEchart = echarts.init(document.getElementById('historyQueryEchart')); //初始化图表
|
historyData(values,"querySelects", historyQueryEchart);
|
});
|
|
$("#hisToryClearBtn").unbind().click(function(){
|
$("#stationInput").val("");
|
$("#querySelects1").find("option").each(function(){
|
$(this).removeAttr("selected");
|
if($(this).val() == ""){
|
$(this).attr("selected","selected");
|
findStnm("");
|
}
|
})
|
layui.use('form', function(){ //监听站点选中事件 动态更新站点
|
var form = layui.form;
|
form.render();
|
});
|
$(".history-query-date span").removeClass('on').eq(0).addClass('on');
|
var nowtime = new Date();
|
var endtime = times(nowtime);
|
var starttime = nowtime.getFullYear()+'-'+p(nowtime.getMonth()+1)+"-"+p(nowtime.getDate())+" 00:00:00";
|
$("#historyStratTime").val(starttime);
|
$("#historyEndTime").val(endtime);
|
var values = $("#actualInput").val();
|
historyQueryEchart.dispose(); //销毁图表
|
$(window).off('resize'); //移除已销毁图表的resize事件
|
historyQueryEchart = echarts.init(document.getElementById('historyQueryEchart')); //初始化图表
|
historyData(values,"querySelects", historyQueryEchart);
|
});
|
|
|
$("#hisToryDownLoadBtn").unbind().click(function(){
|
var nowtime = new Date();
|
var endtime = times(nowtime);
|
var starttime = $('#historyStratTime').val();
|
if(starttime.length<19){
|
starttime += " 00:00:00";
|
}
|
$.ajax({
|
url:getNativePath() + "naturalFactors/booleanExcelExportMonitorElements.do?stcd=" + selectstcd + "&startTime=" + starttime + "&endTime=" + endtime + "&elementId=" + $("#actualInput").val() + "&title=" + encodeURI($('.history-query-title h3').html(), "UTF-8") + "",
|
success:function(res){
|
if(res && res.success){
|
window.open(getNativePath() + "naturalFactors/excelExportMonitorElements.do?stcd=" + selectstcd + "&startTime=" + starttime + "&endTime=" + endtime + "&elementId=" + $("#actualInput").val() + "&title=" + encodeURI($('.history-query-title h3').html(), "UTF-8") + "")
|
}else{
|
layer.msg('暂无数据,无法下载！');
|
}
|
}
|
});
|
|
})
|
|
$(".history-query-date span").unbind().click(function(){
|
$(".his-loding").show();
|
$('.histor-tip').hide();
|
var type = $(this).attr("data-txt");
|
var strTime = "", endTime = "";
|
var values = $("#actualInput").val();
|
$(this).addClass('on').siblings().removeClass('on');
|
if(type == "day"){
|
strTime = getToday("s", 0);
|
endTime = getToday("e", 0);
|
}else if(type == "week"){
|
strTime = getMonday("s", 0);
|
endTime = getToday("e", 0).substr(0,10);
|
}else if(type == "month"){
|
strTime = getMonth("s", 0);
|
endTime = getToday("e", 0).substr(0,10);
|
}
|
$("#historyStratTime").val(strTime);
|
$("#historyEndTime").val(endTime);
|
historyQueryEchart.dispose(); //销毁图表
|
$(window).off('resize'); //移除已销毁图表的resize事件
|
historyQueryEchart = echarts.init(document.getElementById('historyQueryEchart')); //初始化图表
|
historyData(values,"querySelects", historyQueryEchart);
|
});
|
|
function max(arr){
|
var num = arr[0];
|
for(var i=0;i<arr.length; i++){
|
if(num < arr[i]){
|
num = arr[i]
|
}
|
}
|
return num;
|
}
|
|
function p(s) {return s < 10 ? '0' + s: s;}
|
|
function times(timeData){
|
return timeData.getFullYear()+'-'+p(timeData.getMonth()+1)+"-"+p(timeData.getDate())+" "+p(timeData.getHours())+":"+p(timeData.getMinutes())+":"+p(timeData.getSeconds());
|
|
}
|
|
//******************** 实现日期选择联动 *******************
|
var start = {
|
format: 'YYYY-MM-DD hh:mm:ss',
|
minDate: '1900-01-01 00:00:00', //设定最小日期为当前日期
|
maxDate: $.nowDate({
|
DD: 0
|
}), //最大日期
|
choosefun: function(elem, datas) {
|
end.minDate = datas; //开始日选好后，重置结束日的最小日期
|
endDates();
|
},
|
okfun: function(elem, datas) {}
|
};
|
var end = {
|
format: 'YYYY-MM-DD hh:mm:ss',
|
minDate: '1900-01-01 00:00:00',
|
maxDate: '4099-06-16 00:00:00',
|
choosefun: function(elem, datas) {
|
start.maxDate = datas; //将结束日的初始值设定为开始日的最大日期
|
}
|
};
|
|
function endDates() {
|
end.trigger = false;
|
$("#historyEndTime").jeDate(end);
|
}
|
$("#historyStratTime").jeDate(start);
|
$("#historyEndTime").jeDate(end);
|
});
|
