$(function () {
|
|
var allResult = null;
|
|
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("rain", "bar","雨量");
|
$('.detection-select').find("option").eq(0).prop("selected", true)
|
}
|
|
});
|
|
//下拉改变事件
|
$(".detection-select").change(function () {
|
if ($(this).prop('selectedIndex') == 0) {
|
//渲染表格和左侧echarts
|
qalityDetection("rain", "bar","雨量");
|
|
} else if ($(this).prop('selectedIndex') == 1) {
|
//渲染表格和左侧echarts
|
qalityDetection("sw", "line","水位");
|
|
} else if ($(this).prop('selectedIndex') == 2) {
|
//渲染表格和左侧echarts
|
qalityDetection("yl", "line","应力");
|
|
} else if ($(this).prop('selectedIndex') == 3) {
|
//渲染表格和左侧echarts
|
qalityDetection("wy", "line","位移");
|
|
} else if ($(this).prop('selectedIndex') == 4) {
|
//渲染表格和左侧echarts
|
qalityDetection("sy", "line","渗压");
|
|
}
|
|
});
|
|
|
//获取所有数据
|
function getData() {
|
$.ajax({
|
url: 'https://watermap.ysy.com.cn/onemap/api/v1/watersafe/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 .conservancy-characteristics tbody tr:eq(0) td:eq(1)").text(result.name);
|
|
$(".river-course .reser-box .conservancy-characteristics tbody tr:eq(0) td:eq(3)").text(result.designStandard);
|
|
$(".river-course .reser-box .conservancy-characteristics tbody tr:eq(1) td:eq(1)").text(result.controlArea);
|
|
$(".river-course .reser-box .conservancy-characteristics tbody tr:eq(1) td:eq(3)").text(result.damLevel == "1" ? "大" : result.damLevel == "2" ? "中" : result.damLevel == "3" ? "小" : "");
|
|
$(".river-course .reser-box .conservancy-characteristics tbody tr:eq(2) td:eq(1)").text(result.damHeight == "" ? "" : result.damHeight + " m");
|
|
$(".river-course .reser-box .conservancy-characteristics tbody tr:eq(2) td:eq(3)").text(result.damLength == "" ? "" : result.damLength + " m");
|
|
$(".river-course .reser-box .conservancy-characteristics tbody tr:eq(3) td:eq(1)").text(result.damWidth == "" ? "" : result.damWidth + " m");
|
|
$(".river-course .reser-box .conservancy-characteristics tbody tr:eq(3) td:eq(3)").text(result.storageCapcity == "" ? "" : result.storageCapcity + " 10⁴m³");
|
|
$(".river-course .reser-box .conservancy-characteristics tbody tr:eq(4) td:eq(1)").text(result.damAltitude == "" ? "" : result.damAltitude + " m");
|
|
$(".river-course .reser-box .conservancy-characteristics tbody tr:eq(4) td:eq(3)").text(result.basin);
|
|
$(".river-course .reser-box .conservancy-characteristics tbody tr:eq(5) td:eq(1)").text(result.checkWaterLevel == "" ? "" : result.checkWaterLevel + " m");
|
|
$(".river-course .reser-box .conservancy-characteristics tbody tr:eq(5) td:eq(3)").text(result.designWaterLevel == "" ? "" : result.designWaterLevel + " m");
|
|
$(".river-course .reser-box .conservancy-characteristics tbody tr:eq(6) td:eq(1)").text(result.guardUnit);
|
|
$(".river-course .reser-box .conservancy-characteristics tbody tr:eq(6) td:eq(3)").text(result.completionTime);
|
|
$(".river-course .reser-box .conservancy-characteristics tbody tr:eq(7) td:eq(1)").text(result.managementUnit);
|
|
$(".river-course .reser-box .conservancy-characteristics tbody tr:eq(7) td:eq(3)").text(result.depositionYear);
|
|
$(".river-course .reser-box .conservancy-characteristics tbody tr:eq(8) td:eq(1)").text(result.environment);
|
|
//$(".river-course .reser-box .conservancy-characteristics tbody tr:eq(8) td:eq(3)").text(result.managementUnit);
|
|
$(".river-course .reser-box .conservancy-characteristics tbody tr:eq(9) td:eq(1)").text(result.damMterial);
|
|
|
}
|
|
$('.load-box-list').hide();
|
|
}
|
|
|
function qalityDetection(type, zsType,name) {
|
|
$.ajax({
|
url: 'https://watermap.ysy.com.cn/onemap/api/v1/watersafe/singledata?',
|
type: 'GET',
|
data: {
|
code: code,
|
type: type
|
},
|
datatype: 'json',
|
success: function (res) {
|
var date = [], result = [], result_X = [], result_Y = [], result_Z = [];
|
|
var contant = "";
|
|
var length = res.data.length;
|
|
if (type == "rain") {
|
if (length > 24) {
|
length = 24;
|
}
|
}
|
|
//位移改变表格以及图表
|
if (type != "wy") {
|
|
//渲染表头
|
$('#detectionThead').html(`<tr>
|
<th>
|
<div>序号</div>
|
</th>
|
<th>
|
<div>时间</div>
|
</th>
|
<th>
|
<div>${name}</div>
|
</th>
|
</tr>`);
|
|
for (var i = 0; i < length; i++) {
|
date.push(res.data[i].DATA_TIME);
|
result.push(res.data[i].DATA_VALUE);
|
|
contant += '<tr>' +
|
'<td><div>' + (i + 1) + '</div></td>' +
|
'<td><div>' + res.data[i].DATA_TIME.slice(0, 14) + '</div></td>' +
|
'<td><div>' + res.data[i].DATA_VALUE + '</div></td>' +
|
'</tr>';
|
}
|
|
//渲染表格和左侧echarts
|
$('#detectionTable').html(contant);
|
$('.detection-table').removeClass("wy");
|
|
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: date,
|
inverse: true,
|
axisLabel: {
|
formatter: function (params) {
|
var params = params.slice(5, 14);
|
var data1 = params.split(" ")[0];
|
var data2 = params.split(" ")[1];
|
if (typeof (data2) != "undefined") {
|
var data3 = data1 + "\n" + data2;
|
} else {
|
var data3 = data1;
|
}
|
|
return data3;
|
}
|
}
|
}
|
],
|
yAxis: [
|
{
|
type: 'value',
|
//name: "dw"
|
}
|
],
|
series: [
|
{
|
type: zsType,
|
name: [name],
|
symbol: "none",
|
smooth: true,
|
data: result
|
}
|
]
|
};
|
|
var myChart = echarts.init(document.getElementById('detection-echarts'));
|
myChart.clear();
|
myChart.setOption(option);
|
|
} else {
|
//渲染表头
|
$('#detectionThead').html(`<tr>
|
<th>
|
<div>序号</div>
|
</th>
|
<th>
|
<div>时间</div>
|
</th>
|
<th>
|
<div>X</div>
|
</th>
|
<th>
|
<div>Y</div>
|
</th>
|
<th>
|
<div>Z</div>
|
</th>
|
</tr>`);
|
|
|
for (var i = 0; i < length; i++) {
|
date.push(res.data[i].DATA_TIME);
|
result_X.push(res.data[i].DATA_VALUE_X);
|
result_Y.push(res.data[i].DATA_VALUE_Y);
|
result_Z.push(res.data[i].DATA_VALUE_Z);
|
|
contant += '<tr>' +
|
'<td><div>' + (i + 1) + '</div></td>' +
|
'<td><div>' + res.data[i].DATA_TIME.slice(0, 14) + '</div></td>' +
|
'<td><div>' + res.data[i].DATA_VALUE_X + '</div></td>' +
|
'<td><div>' + res.data[i].DATA_VALUE_Y + '</div></td>' +
|
'<td><div>' + res.data[i].DATA_VALUE_Z + '</div></td>' +
|
'</tr>';
|
}
|
|
//渲染表格和左侧echarts
|
$('#detectionTable').html(contant);
|
$('.detection-table').addClass("wy");
|
var option = {
|
grid: {
|
top: '8%',
|
left: '3%',
|
right: '3%',
|
bottom: '5%',
|
containLabel: true
|
},
|
color: ['#2db7f5', '#FFA500', '#808bc6'],
|
tooltip: {
|
trigger: 'axis'
|
},
|
legend: {
|
bottom: '-5px',
|
left: 'center',
|
data: ["X","Y","Z"],
|
},
|
xAxis: [
|
{
|
type: 'category',
|
boundaryGap: false,
|
data: date,
|
inverse: true,
|
axisLabel: {
|
formatter: function (params) {
|
var params = params.slice(5, 14);
|
var data1 = params.split(" ")[0];
|
var data2 = params.split(" ")[1];
|
if (typeof (data2) != "undefined") {
|
var data3 = data1 + "\n" + data2;
|
} else {
|
var data3 = data1;
|
}
|
|
return data3;
|
}
|
}
|
}
|
],
|
yAxis: [
|
{
|
type: 'value',
|
//name: "dw"
|
}
|
],
|
series: [
|
{
|
type: zsType,
|
name: "X",
|
symbol: "none",
|
smooth: true,
|
data: result_X
|
},{
|
type: zsType,
|
name: "Y",
|
symbol: "none",
|
smooth: true,
|
data: result_Y
|
},{
|
type: zsType,
|
name: "Z",
|
symbol: "none",
|
smooth: true,
|
data: result_Z
|
}
|
]
|
};
|
|
var myChart = echarts.init(document.getElementById('detection-echarts'));
|
myChart.clear();
|
myChart.setOption(option);
|
|
}
|
|
|
|
}
|
});
|
|
$('.load-box-list').hide();
|
}
|
|
|
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
|
}
|
|
|
});
|
