$(function () {
|
|
var allResult = null;
|
|
//定义全局监测类型数组
|
var zonglin = [], jcDate = [], zongdan = [], yelvsu = [], zhuodu = [], rongjieyang = [], gaomengsuanjia = [], andan = [], shuiwen = [], ph = [], zaomidu = [], diandaolv = [];
|
|
var tabIndex = null;
|
|
$('.load-box-list').show();
|
// 截取 url 地址参数code的值
|
var code = GetQueryString("code");
|
|
function GetQueryString(name) {
|
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
|
var r = window.location.search.substr(1).match(reg);
|
if (r != null) return unescape(r[2]);
|
return null;
|
}
|
|
//初始触发
|
getData();
|
|
|
//tab切换事件
|
$(".river-top ul li").off('click').click(function () {
|
var ind = $(this).index();
|
tabIndex = ind;
|
$(".reser-box>div:eq(" + ind + ")").stop().show().siblings().stop().hide();
|
$(this).addClass('on').siblings().removeClass('on');
|
|
$('.load-box-list').show();
|
|
if (ind == 0) {
|
//基础信息
|
reservoirCharacteristics(allResult);
|
} else if (ind == 1) {
|
//指标检测
|
qalityDetection();
|
$('.detection-select').find("option").eq(0).prop("selected", true)
|
}
|
|
});
|
|
//下拉改变事件
|
$(".detection-select").change(function () {
|
if ($(this).prop('selectedIndex') == 0) {
|
//渲染表格和左侧echarts
|
setData(zonglin, jcDate, "总磷", "mg/L")
|
$(".river-thead tr th:eq(2)>div").text("总磷(mg/L)");
|
|
} else if ($(this).prop('selectedIndex') == 1) {
|
//渲染表格和左侧echarts
|
setData(zongdan, jcDate, "总氮", "mg/L");
|
$(".river-thead tr th:eq(2)>div").text("总氮(mg/L)");
|
|
} else if ($(this).prop('selectedIndex') == 2) {
|
//渲染表格和左侧echarts
|
setData(yelvsu, jcDate, "叶绿素", "mg/L");
|
$(".river-thead tr th:eq(2)>div").text("叶绿素(mg/L)");
|
|
} else if ($(this).prop('selectedIndex') == 3) {
|
//渲染表格和左侧echarts
|
setData(zhuodu, jcDate, "浊度", "NTU");
|
$(".river-thead tr th:eq(2)>div").text("浊度(NTU)");
|
|
} else if ($(this).prop('selectedIndex') == 4) {
|
//渲染表格和左侧echarts
|
setData(rongjieyang, jcDate, "溶解氧", "mg/L");
|
$(".river-thead tr th:eq(2)>div").text("溶解氧(mg/L)");
|
|
} else if ($(this).prop('selectedIndex') == 5) {
|
//渲染表格和左侧echarts
|
setData(gaomengsuanjia, jcDate, "高锰酸盐", "mg/L");
|
$(".river-thead tr th:eq(2)>div").text("高锰酸盐(mg/L)");
|
|
} else if ($(this).prop('selectedIndex') == 6) {
|
//渲染表格和左侧echarts
|
setData(andan, jcDate, "氨氮", "mg/L");
|
$(".river-thead tr th:eq(2)>div").text("氨氮(mg/L)");
|
|
} else if ($(this).prop('selectedIndex') == 7) {
|
//渲染表格和左侧echarts
|
setData(shuiwen, jcDate, "水温", "℃");
|
$(".river-thead tr th:eq(2)>div").text("水温(℃)");
|
|
} else if ($(this).prop('selectedIndex') == 8) {
|
//渲染表格和左侧echarts
|
setData(ph, jcDate, "pH", "无量纲");
|
$(".river-thead tr th:eq(2)>div").text("pH(无量纲)");
|
|
} else if ($(this).prop('selectedIndex') == 9) {
|
//渲染表格和左侧echarts
|
setData(zaomidu, jcDate, "藻密度", "cells/L");
|
$(".river-thead tr th:eq(2)>div").text("藻密度(cells/L)");
|
|
} else if ($(this).prop('selectedIndex') == 10) {
|
//渲染表格和左侧echarts
|
setData(diandaolv, jcDate, "电导率", "μS/cm");
|
$(".river-thead tr th:eq(2)>div").text("电导率(μS/cm)");
|
|
}
|
|
});
|
|
|
//获取所有数据
|
function getData() {
|
$.ajax({
|
url: 'https://watermap.ysy.com.cn/onemap/api/v1/watersection/singleinfo?',
|
type: 'GET',
|
data: {
|
code: code,
|
},
|
datatype: 'json',
|
success: function (res) {
|
allResult = res.data;
|
reservoirCharacteristics(allResult);
|
}
|
});
|
}
|
|
//基础信息面板
|
function reservoirCharacteristics(result) {
|
|
if (result != null) {
|
|
$(".river-course .reser-box .qality-characteristics tbody tr:eq(0) td:eq(1)").text(result.name);
|
|
$(".river-course .reser-box .qality-characteristics tbody tr:eq(0) td:eq(3)").text(result.basin);
|
|
$(".river-course .reser-box .qality-characteristics tbody tr:eq(1) td:eq(1)").text(result.river);
|
|
$(".river-course .reser-box .qality-characteristics tbody tr:eq(1) td:eq(3)").text(result.tm);
|
|
$(".river-course .reser-box .qality-characteristics tbody tr:eq(2) td:eq(1)").text(result.note);
|
|
$(".river-course .reser-box .qality-characteristics tbody tr:eq(2) td:eq(3)").text(result.level);
|
|
$(".river-course .reser-box .qality-characteristics tbody tr:eq(3) td:eq(1)").text(result.andan == "--" ? "--" : result.andan + " mg/L");
|
|
$(".river-course .reser-box .qality-characteristics tbody tr:eq(3) td:eq(3)").text(result.zhuodu == "--" ? "--" : result.zhuodu + " NTU");
|
|
$(".river-course .reser-box .qality-characteristics tbody tr:eq(4) td:eq(1)").text(result.shuiwen == "--" ? "--" : result.shuiwen + " ℃");
|
|
$(".river-course .reser-box .qality-characteristics tbody tr:eq(4) td:eq(3)").text(result.ph == "--" ? "--" : result.ph + " 无量纲");
|
|
$(".river-course .reser-box .qality-characteristics tbody tr:eq(5) td:eq(1)").text(result.rongjieyang == "--" ? "--" : result.rongjieyang + " mg/L");
|
|
$(".river-course .reser-box .qality-characteristics tbody tr:eq(5) td:eq(3)").text(result.diandaolv == "--" ? "--" : result.diandaolv + " μS/cm");
|
|
$(".river-course .reser-box .qality-characteristics tbody tr:eq(6) td:eq(1)").text(result.zaomidu == "--" ? "--" : result.zaomidu + " cells/L");
|
|
$(".river-course .reser-box .qality-characteristics tbody tr:eq(6) td:eq(3)").text(result.yelvsu == "--" ? "--" : result.yelvsu + " mg/L");
|
|
$(".river-course .reser-box .qality-characteristics tbody tr:eq(7) td:eq(1)").text(result.zongdan == "--" ? "--" : result.zongdan + " mg/L");
|
|
$(".river-course .reser-box .qality-characteristics tbody tr:eq(7) td:eq(3)").text(result.zonglin == "--" ? "--" : result.zonglin + " mg/L");
|
|
$(".river-course .reser-box .qality-characteristics tbody tr:eq(8) td:eq(1)").text(result.gaomengsuanjia == "--" ? "--" : result.gaomengsuanjia + " mg/L");
|
|
|
}
|
|
$('.load-box-list').hide();
|
|
}
|
|
function qalityDetection() {
|
|
$.ajax({
|
url: 'https://watermap.ysy.com.cn/onemap/api/v1/watersection/history?',
|
type: 'GET',
|
data: {
|
code: code,
|
},
|
datatype: 'json',
|
success: function (res) {
|
//清空数组
|
zonglin = [], jcDate = [], zongdan = [], yelvsu = [], zhuodu = [], rongjieyang = [], gaomengsuanjia = [], andan = [], shuiwen = [], ph = [], zaomidu = [], diandaolv = [];
|
|
for (var i = 0; i < res.data.data.length; i++) {
|
jcDate.push(res.data.data[i].tm)
|
zonglin.push(res.data.data[i].zonglin == null ? "--" : res.data.data[i].zonglin);
|
zongdan.push(res.data.data[i].zongdan == null ? "--" : res.data.data[i].zongdan);
|
yelvsu.push(res.data.data[i].yelvsu == null ? "--" : res.data.data[i].yelvsu);
|
zhuodu.push(res.data.data[i].zhuodu == null ? "--" : res.data.data[i].zhuodu);
|
rongjieyang.push(res.data.data[i].rongjieyang == null ? "--" : res.data.data[i].rongjieyang);
|
gaomengsuanjia.push(res.data.data[i].gaomengsuanjia == null ? "--" : res.data.data[i].gaomengsuanjia);
|
andan.push(res.data.data[i].andan == null ? "--" : res.data.data[i].andan);
|
shuiwen.push(res.data.data[i].shuiwen == null ? "--" : res.data.data[i].shuiwen);
|
ph.push(res.data.data[i].ph == null ? "--" : res.data.data[i].ph);
|
zaomidu.push(res.data.data[i].zaomidu == null ? "--" : res.data.data[i].zaomidu);
|
diandaolv.push(res.data.data[i].diandaolv == null ? "--" : res.data.data[i].diandaolv);
|
}
|
|
//渲染表格和左侧echarts
|
setData(zonglin, jcDate, "总磷", "mg/L")
|
}
|
});
|
|
$('.load-box-list').hide();
|
}
|
|
function setData(data, tm, name, dw) {
|
|
var contant = "";
|
|
//渲染右侧表格
|
for (var i = (data.length - 1); i >= 0; i--) {
|
|
contant += '<tr>' +
|
'<td><div>' + (data.length - i) + '</div></td>' +
|
'<td><div>' + tm[i] + '</div></td>' +
|
'<td><div>' + data[i] + '</div></td>' +
|
'</tr>';
|
}
|
$('#detectionTable').html(contant);
|
|
//渲染左侧echarts图
|
var option = {
|
grid: {
|
top: '8%',
|
left: '3%',
|
right: '3%',
|
bottom: '5%',
|
containLabel: true
|
},
|
color: ['#2db7f5', '#ff6600', '#808bc6'],
|
tooltip: {
|
trigger: 'axis'
|
},
|
legend: {
|
bottom: '-5px',
|
left: 'center',
|
data: [name],
|
},
|
xAxis: [
|
{
|
type: 'category',
|
boundaryGap: false,
|
data: tm,
|
axisLabel: {
|
formatter: function (params) {
|
var data1 = params.split(" ")[0];
|
var data2 = params.split(" ")[1];
|
return data1 + "\n" + data2;
|
}
|
}
|
}
|
],
|
yAxis: [
|
{
|
type: 'value',
|
name: dw
|
}
|
],
|
series: [
|
{
|
type: 'line',
|
name: [name],
|
symbol: "none",
|
smooth: true,
|
data: data
|
}
|
]
|
};
|
|
var myChart = echarts.init(document.getElementById('detection-echarts'));
|
myChart.clear();
|
myChart.setOption(option);
|
|
}
|
|
|
|
function dateProcessing(data) {
|
var date = new Date(data);
|
var Y = date.getFullYear() + '.';
|
var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '.';
|
var D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate());
|
var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
|
var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
|
var s = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
|
return Y + M + D
|
}
|
|
function timestamp(data) {
|
var date = new Date(data);
|
var Y = date.getFullYear() + '-';
|
var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
|
var D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';
|
var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
|
var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
|
var s = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
|
return Y + M + D + h + m
|
}
|
|
function realTimes(data) {
|
var date = new Date(data);
|
var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
|
var D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';
|
var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + '时';
|
return M + D + h
|
}
|
|
|
});
|
