$(function () {
|
// div 下面的快速查询
|
$('.input_in input').val('快速查询');
|
|
// var code = '62304700';
|
|
|
// 截取 url 地址参数code的值
|
var code = GetQueryString("id");
|
|
var d = new Date();
|
var str = d.getFullYear() + "-" + (d.getMonth() + 1 < 10 ? '0' + (d.getMonth() + 1) : d.getMonth() + 1) + "-" + (d.getDate() < 10 ? '0' + d.getDate() : d.getDate()) + " "
|
+ (d.getHours() + 1 < 10 ? '0' + (d.getHours() + 1) : (d.getHours() + 1)) + ":00:00";
|
var str_zr = d.getFullYear() + "-" + (d.getMonth() + 1 < 10 ? '0' + (d.getMonth() + 1) : d.getMonth() + 1) + "-" + d.getDate();
|
var qz = new Date(getDate(Date.parse(new Date()) - 86400000 * 5));
|
var qzstr = qz.getFullYear() + "-" + (qz.getMonth() + 1 < 10 ? '0' + (qz.getMonth() + 1) : qz.getMonth() + 1) + "-" + (qz.getDate() < 10 ? '0' + qz.getDate() : qz.getDate()) + " 00:00:00";
|
var qzstr_zr = qz.getFullYear() + "-" + (qz.getMonth() + 1 < 10 ? '0' + (qz.getMonth() + 1) : qz.getMonth() + 1) + "-" + qz.getDate();
|
|
// 4个控制时间
|
$('#inpstart_zr').val(qzstr_zr);
|
$('#inpend_zr').val(str_zr);
|
$('#timestart').val(qzstr);
|
$('#timeend').val(str);
|
|
// 开始时间
|
var startTime = qzstr;
|
// 结束时间
|
var endTime = str;
|
|
// 八时开始
|
var eightstartTime = qzstr_zr;
|
var eightendTime = str_zr;
|
|
var option_sw = {};
|
var option_bs = {};
|
|
//水位过程
|
$('#riverBtnOne').click(function () {
|
recharts();
|
$('.load-box-list').show();
|
$('.input_in input').val('快速查询');
|
showPie(startTime, endTime);
|
$('#riverSel').hide();
|
$('#eightRiverSel').hide();
|
|
});
|
|
function recharts() {
|
var width = $(window).width() * 0.53;
|
var height = ($(window).height() - 50) - 80;
|
|
// 获取ID
|
var chartPie = document.getElementById('riverPei');
|
var myChartPie = echarts.init(chartPie);
|
var resize = {
|
width: width,
|
height: height
|
}
|
myChartPie.resize(resize);
|
}
|
|
//八时水位
|
$('#riverBtnTwo').click(function () {
|
recharts_z();
|
$('.load-box-list').show();
|
$('.input_in input').val('快速查询');
|
eightShowPie(eightstartTime, eightendTime);
|
$('#riverSel').hide();
|
$('#eightRiverSel').hide();
|
|
|
});
|
|
function recharts_z() {
|
var width = $(window).width() * 0.53;
|
var height = ($(window).height() - 50) - 80;
|
|
$("#eigthRiverWeater").empty();
|
$("#eigthRiverWeater").removeAttr("_echarts_instance_").empty();
|
var chartPie = document.getElementById('eigthRiverWeater');
|
var myChartPie = echarts.init(chartPie);
|
var resize = {
|
width: width,
|
height: height
|
}
|
myChartPie.resize(resize);
|
}
|
|
window.onresize = function () {
|
|
var width = $(window).width() * 0.53;
|
var height = ($(window).height() - 50) - 80;
|
|
$(".river-tab").height(height);
|
// 获取ID
|
var chartPie_1 = document.getElementById('riverPei');
|
var chartPie_2 = document.getElementById('eigthRiverWeater');
|
// echarts初始化
|
var myChartPie_1 = echarts.init(chartPie_1);
|
var myChartPie_2 = echarts.init(chartPie_2);
|
var resize = {
|
width: width,
|
height: height
|
}
|
myChartPie_1.resize(resize);
|
myChartPie_2.resize(resize);
|
};
|
//预报水情信息
|
$('#riverBtnOne').click(function () {
|
$('.input_in input').val('快速查询');
|
});
|
//基础信息
|
$('#riverBtnFou').click(function () {
|
$('.input_in input').val('快速查询');
|
$('#riverSel').hide();
|
$('#eightRiverSel').hide();
|
basicShowInfo();
|
});
|
|
function getDate(timestamp) {
|
let d = new Date(timestamp);// 时间戳为10位需*1000，时间戳为13位的话不需乘1000
|
let yyyy = d.getFullYear() + '-';
|
let MM = (d.getMonth() + 1 < 10 ? '0' + (d.getMonth() + 1) : d.getMonth() + 1) + '-';
|
let dd = (d.getDate() < 10 ? '0' + d.getDate() : d.getDate()) + ' ';
|
let HH = d.getHours() + ':';
|
let mm = d.getMinutes() + ':';
|
let ss = d.getSeconds();
|
return yyyy + MM + dd + HH + mm + ss;
|
}
|
|
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;
|
}
|
|
setTimeout(function () {
|
$('.load-box-list').show();
|
showPie(startTime, endTime);
|
}, 200);
|
|
$('.input_in input').click(function () {
|
$('#riverSel').toggle();
|
$('#eightRiverSel').toggle();
|
})
|
|
//水位过程-----快速查询
|
$('#riverSel ul li').click(function () {
|
$('.load-box-list').show();
|
$('#riverSel').hide();
|
var checkTime = $(this).attr('data');
|
var curr = new Date();
|
var currDataD = curr.getFullYear(); // 获取完整的年份 4位数
|
var currDataM = curr.getMonth() + 1; // 获取当前月份，0是1月，所以+1
|
var currDataR = curr.getDate(); // 获取当前日，1-31日
|
var currDataH = curr.getHours(); // 获取当前小时数0-23
|
// 结束时间
|
var currAllTime = currDataD + '-' + currDataM + '-' + currDataR + ' ' + (currDataH + 1) + ':00:00';
|
var data = '';
|
var dataD = '';
|
var dataM = '';
|
var dataR = '';
|
var dataH = '';
|
var allDataTime = '';
|
if (checkTime == '12') {
|
data = new Date(new Date() - 12 * 60 * 60 * 1000);
|
$('.input_in input').val('最近12小时');
|
} else if (checkTime == '24') {
|
data = new Date(new Date() - 24 * 60 * 60 * 1000);
|
$('.input_in input').val('最近24小时');
|
} else if (checkTime == '36') {
|
data = new Date(new Date() - 36 * 60 * 60 * 1000);
|
$('.input_in input').val('最近36小时');
|
} else if (checkTime == '72') {
|
data = new Date(new Date() - 72 * 60 * 60 * 1000);
|
$('.input_in input').val('最近72小时');
|
}
|
dataD = data.getFullYear();
|
dataM = data.getMonth() + 1;
|
dataR = data.getDate();
|
dataH = data.getHours();
|
// 开始时间
|
allDataTime = dataD + '-' + dataM + '-' + dataR + ' ' + (dataH + 1) + ':00:00';
|
$('#timestart').val(allDataTime);
|
$('#timeend').val(currAllTime);
|
showPie(allDataTime, currAllTime);
|
});
|
|
|
//水位过程------时间查询
|
$('#riverBtn').click(function () {
|
|
$('.load-box-list').show();
|
$('.input_in input').val('快速查询');
|
// 开始时间获取
|
startTime = $("#timestart").val();
|
// 结束时间获取
|
endTime = $("#timeend").val();
|
// 调用方法，传参数， 开始 于 结束
|
showPie(startTime, endTime);
|
});
|
|
// 时间查询方法
|
function showPie(startTime, endTime) {
|
// 接受参数，发送ajax请求
|
$.ajax({
|
url: "http://www.sw797.com:82/blade-ycreal/riverr/selectStation",
|
type: 'post',
|
dataType: 'json',
|
jsonp: 'callback',
|
jsonpCallback: 'data',
|
data: {
|
'code': code,
|
'dateBegin': startTime,
|
'dateEnd': endTime
|
},
|
success: function (result) {
|
var result = result.data;
|
|
var maxY = result.maxWater;
|
var yadd = 0;
|
yadd = Math.ceil(parseFloat(result.wrz).toFixed(2) - maxY);
|
if (isNaN(yadd)) {
|
yadd = 0;
|
}
|
var minY = result.minWater;
|
var intervalY;
|
var difference = (maxY + yadd) - minY;
|
if (difference / 15 < 0.1) {
|
intervalY = 0.1;
|
} else if (difference / 15 < 0.2) {
|
intervalY = 0.2;
|
} else if (difference / 15 < 0.4) {
|
intervalY = 0.4;
|
} else if (difference) {
|
intervalY = 0.5;
|
}
|
|
var maxQY = result.maxQ;
|
var minQY = result.minQ;
|
|
|
// 回调函数，接受数据
|
var q = '';
|
var dataName = [];
|
var dataL = [];
|
var dataZ = [];
|
var contant = '';
|
for (var i = 0; i < result.data.length; i++) {
|
var time = result.data[i].tm;
|
var timesub = time.substr(5, 11);
|
var timetab = time.substr(5, 11);
|
var wptn_val = result.data[i].wptn;
|
|
if (wptn_val == '4') {
|
var wptn = '↓';
|
var color1 = 0;
|
var color2 = 128;
|
var color3 = 0;
|
} else if (wptn_val == '5') {
|
var wptn = '↑';
|
var color1 = 255;
|
var color2 = 0;
|
var color3 = 0;
|
} else if (wptn_val == '6') {
|
var wptn = '-';
|
var color1 = 0;
|
var color2 = 0;
|
var color3 = 255;
|
}
|
|
dataName.push(timesub);
|
|
dataZ.push(result.data[i].z);
|
if (result.data[i].q == null || result.data[i].q == -1) {
|
q = '/';
|
} else {
|
q = result.data[i].q;
|
}
|
|
dataL.push(q);
|
contant += '<tr>' +
|
'<td><div>' + (i + 1) + '</div></td>' +
|
'<td><div>' + timetab + '</div></td>' +
|
'<td><div>' + result.data[i].z + '</div></td>' +
|
"<td><div style='text-align:center'><span style='color: rgb(" + color1 + ", " + color2 + ", " + color3 + ")'>" + wptn + "</span></div></td>" +
|
'<td><div>' + q + '</div></td>' +
|
'</tr>';
|
}
|
$('#riverTable').html(contant);
|
|
|
// echarts 需要
|
option_sw = {
|
title: {
|
text: '实时水情',
|
left: 'center',
|
top: '15px'
|
},
|
tooltip: {
|
trigger: 'axis'
|
},
|
legend: {
|
bottom: '0px',
|
left: 'center',
|
data: ['水位', '流量']
|
},
|
xAxis: [{
|
type: 'category',
|
splitLine: {
|
show: false
|
},
|
data: dataName,
|
inverse: true,
|
boundaryGap: false,
|
axisLine: {
|
onZero: false,
|
lineStyle: {
|
color: "#000"
|
}
|
},
|
}],
|
grid: {
|
left: '3%',
|
right: '4%',
|
bottom: '8%',
|
containLabel: true
|
},
|
};
|
if (dataL[0] != "/") {
|
option_sw.series = [{
|
name: '水位',
|
type: 'line',
|
data: dataZ,
|
markLine : { //添加警戒线
|
symbol:"none", //去掉警戒线最后面的箭头
|
name:"警戒线",
|
silent:true,
|
label:{
|
position:"middle", //将警示值放在哪个位置，三个值“start”,"middle","end" 开始 中点 结束
|
color:"red",
|
fontSize:14
|
},
|
data : [{
|
silent:true, //鼠标悬停事件 true没有，false有
|
lineStyle:{ //警戒线的样式 ，虚实 颜色
|
type:"solid",
|
color:"red"
|
},
|
name: '警戒线',
|
yAxis: result.wrz
|
}]
|
}
|
},
|
{
|
name: '流量',
|
type: 'line',
|
data: dataL,
|
yAxisIndex: 1,
|
}
|
];
|
option_sw.yAxis = [{
|
type: 'value',
|
name: '水位（m）',
|
min: minY,
|
max: maxY + yadd,
|
tickInterval: intervalY, // 固定间隔
|
axisLine: {
|
lineStyle: {
|
color: '#000',
|
}
|
},
|
splitLine: {
|
show: true
|
},
|
axisLabel: {
|
formatter: function (value) {
|
return value.toFixed(2);
|
}
|
},
|
}, {
|
type: 'value',
|
name: '流量（m³/s）',
|
min: minQY,
|
max: maxQY,
|
axisLine: {
|
lineStyle: {
|
color: '#000',
|
}
|
},
|
splitLine: {
|
show: true
|
}
|
}
|
];
|
} else {
|
option_sw.series = [{
|
name: '水位',
|
type: 'line',
|
data: dataZ,
|
markLine : { //添加警戒线
|
symbol:"none", //去掉警戒线最后面的箭头
|
name:"警戒线",
|
silent:true,
|
label:{
|
position:"middle", //将警示值放在哪个位置，三个值“start”,"middle","end" 开始 中点 结束
|
color:"red",
|
fontSize:14
|
},
|
data : [{
|
silent:true, //鼠标悬停事件 true没有，false有
|
lineStyle:{ //警戒线的样式 ，虚实 颜色
|
type:"solid",
|
color:"red"
|
},
|
name: '警戒线',
|
yAxis: result.wrz
|
}]
|
}
|
}
|
];
|
option_sw.yAxis = [{
|
type: 'value',
|
name: '水位（m）',
|
min: minY,
|
max: maxY + yadd,
|
tickInterval: intervalY, // 固定间隔
|
axisLine: {
|
lineStyle: {
|
color: '#000',
|
}
|
},
|
splitLine: {
|
show: true
|
},
|
axisLabel: {
|
formatter: function (value) {
|
return value.toFixed(2);
|
}
|
},
|
}
|
];
|
}
|
|
// 获取ID
|
var chartPie = document.getElementById('riverPei');
|
// echarts初始化
|
var myChartPie = echarts.init(chartPie);
|
myChartPie.setOption(option_sw, true);
|
$('.load-box-list').hide();
|
}
|
});
|
}
|
|
//八时水位------时间查询
|
$('#eigthRiverBtn').click(function () {
|
$('.load-box-list').show();
|
$('.input_in input').val('快速查询');
|
eightstartTime = $("#inpstart_zr").val();
|
eightendTime = $("#inpend_zr").val();
|
eightShowPie(eightstartTime, eightendTime);
|
});
|
|
//八时水位------快速查询
|
$('#eightRiverSel ul li').click(function () {
|
$('.load-box-list').show();
|
$('#eightRiverSel').hide();
|
var checkTime = $(this).attr('data');
|
var eightstartTime = '';
|
var eightendTime = '';
|
var Nowdate = new Date();
|
var MonthFirstDay = new Date(Nowdate.getFullYear(), Nowdate.getMonth(), 1);
|
if (checkTime == '本月') {
|
$('.input_in input').val('本月');
|
M = Number(MonthFirstDay.getMonth()) + 1
|
eightstartTime = MonthFirstDay.getFullYear() + "-" + M + "-" + MonthFirstDay.getDate();
|
var MonthNextFirstDay = new Date(Nowdate.getFullYear(), Nowdate.getMonth() + 1, 1);
|
var MonthLastDay = new Date(MonthNextFirstDay - 86400000);
|
M = Number(MonthLastDay.getMonth()) + 1
|
eightendTime = MonthLastDay.getFullYear() + "-" + M + "-" + MonthLastDay.getDate();
|
} else if (checkTime == '上月') {
|
$('.input_in input').val('上月');
|
M = Number(MonthFirstDay.getMonth())
|
eightstartTime = MonthFirstDay.getFullYear() + "-" + M + "-" + MonthFirstDay.getDate();
|
var MonthNextFirstDay = new Date(Nowdate.getFullYear(), Nowdate.getMonth(), 1);
|
var MonthLastDay = new Date(MonthNextFirstDay - 86400000);
|
M = Number(MonthLastDay.getMonth() + 1)
|
eightendTime = MonthLastDay.getFullYear() + "-" + M + "-" + MonthLastDay.getDate();
|
}
|
|
// 时间回填
|
$('#inpstart_zr').val(eightstartTime);
|
$('#inpend_zr').val(eightendTime);
|
|
|
eightShowPie(eightstartTime, eightendTime);
|
});
|
|
function eightShowPie(eightstartTime, eightendTime) {
|
if (eightstartTime == '' && eightendTime == '') {
|
var Nowdate = new Date();
|
var MonthFirstDay = new Date(Nowdate.getFullYear(), Nowdate.getMonth(), 1);
|
M = Number(MonthFirstDay.getMonth()) + 1
|
eightstartTime = MonthFirstDay.getFullYear() + "-" + M + "-" + MonthFirstDay.getDate();
|
var MonthNextFirstDay = new Date(Nowdate.getFullYear(), Nowdate.getMonth() + 1, 1);
|
var MonthLastDay = new Date(MonthNextFirstDay - 86400000);
|
M = Number(MonthLastDay.getMonth()) + 1
|
eightendTime = MonthLastDay.getFullYear() + "-" + M + "-" + MonthLastDay.getDate();
|
}
|
$.ajax({
|
url: "http://www.sw797.com:82/blade-ycreal/riverr/selectDayList",
|
type: 'post',
|
dataType: 'json',
|
jsonp: 'callback',
|
jsonpCallback: 'data',
|
data: {
|
'code': code,
|
'dateBegin': eightstartTime + " 00:00:00",
|
'dateEnd': eightendTime + " 23:59:59"
|
},
|
success: function (result) {
|
var q = '';
|
var dataName = [];
|
var dataZ = [];
|
var dataL = [];
|
var contant = '';
|
for (var i = 0; i < result.data.length; i++) {
|
var time = result.data[i].tm;
|
var timesub = time.substr(5, 11);
|
var timetab = time.substr(5, 11);
|
dataName.push(timesub);
|
|
var wptn_val = result.data[i].wptn;
|
|
if (wptn_val == '4') {
|
var wptn = '↓';
|
var color1 = 0;
|
var color2 = 128;
|
var color3 = 0;
|
} else if (wptn_val == '5') {
|
var wptn = '↑';
|
var color1 = 255;
|
var color2 = 0;
|
var color3 = 0;
|
} else if (wptn_val == '6') {
|
var wptn = '-';
|
var color1 = 0;
|
var color2 = 0;
|
var color3 = 255;
|
}
|
|
dataZ.push(result.data[i].z);
|
|
if (result.data[i].q == null || result.data[i].q == -1) {
|
q = '/';
|
} else {
|
q = result.data[i].q;
|
}
|
dataL.push(q);
|
|
contant += '<tr>' +
|
'<td><div>' + (i + 1) + '</div></td>' +
|
'<td><div>' + timetab + '</div></td>' +
|
'<td><div>' + result.data[i].z + '</div></td>' +
|
"<td><div style='text-align:center'><span style='color: rgb(" + color1 + ", " + color2 + ", " + color3 + ")'>" + wptn + "</span></div></td>" +
|
'<td><div>' + q + '</div></td>' +
|
'</tr>';
|
}
|
|
$('#eigthRiverTable').html(contant);
|
|
|
// echarts 数据需要
|
option_bs = {
|
title: {
|
text: '逐日八时',
|
left: 'center',
|
top: '15px'
|
},
|
tooltip: {
|
trigger: 'axis'
|
},
|
legend: {
|
bottom: '0px',
|
left: 'center',
|
data: ['水位', '流量']
|
},
|
xAxis: [{
|
type: 'category',
|
splitLine: {
|
show: false
|
},
|
data: dataName,
|
boundaryGap: false,
|
inverse: true,
|
axisLine: {
|
onZero: false,
|
lineStyle: {
|
color: "#000"
|
}
|
},
|
}],
|
grid: {
|
left: '3%',
|
right: '4%',
|
bottom: '8%',
|
containLabel: true
|
}
|
};
|
|
if (dataL[0] != "/") {
|
option_bs.series = [{
|
name: '水位',
|
type: 'line',
|
data: dataZ,
|
},
|
{
|
name: '流量',
|
type: 'line',
|
data: dataL,
|
yAxisIndex: 1,
|
}
|
];
|
option_bs.yAxis = [{
|
type: 'value',
|
name: '水位（m）',
|
scale: true,
|
axisLine: {
|
lineStyle: {
|
color: '#000',
|
}
|
},
|
splitLine: {
|
show: true
|
},
|
}, {
|
type: 'value',
|
name: '流量（m³/s）',
|
scale: true,
|
axisLine: {
|
lineStyle: {
|
color: '#000',
|
}
|
},
|
splitLine: {
|
show: true
|
},
|
}
|
];
|
} else {
|
option_bs.series = [{
|
name: '水位',
|
type: 'line',
|
data: dataZ
|
}
|
];
|
option_bs.yAxis = [{
|
type: 'value',
|
name: '水位（m）',
|
scale: true,
|
axisLine: {
|
lineStyle: {
|
color: '#000',
|
}
|
},
|
splitLine: {
|
show: true
|
},
|
}
|
];
|
}
|
|
|
var chartPie = document.getElementById('eigthRiverWeater');
|
var myChartPie = echarts.init(chartPie);
|
myChartPie.setOption(option_bs, true);
|
$('.load-box-list').hide();
|
}
|
});
|
}
|
|
//基础信息---查询
|
function basicShowInfo() {
|
$.ajax({
|
url: "http://www.sw797.com:82/blade-ycreal/stbprpb/selectInfo",
|
type: 'post',
|
async: false,
|
dataType: 'json',
|
jsonp: 'callback',
|
jsonpCallback: 'data',
|
data: {
|
'code': code
|
},
|
success: function (result) {
|
var html = '<li>' +
|
'<span>测站编码：</span>' +
|
'<div>' + code + '</div>' +
|
'</li>' +
|
'<li>' +
|
'<span>测站名称：</span>' +
|
'<div>' + result.data[0].stnm + '</div>' +
|
'</li>' +
|
'<li>' +
|
'<span>测站类别：</span>' +
|
'<div>' + result.data[0].sttp + '</div>' +
|
'</li>' +
|
'<li>' +
|
'<span>报讯等级：</span>' +
|
'<div>' + result.data[0].frgrd + '</div>' +
|
'</li>' +
|
'<li>' +
|
'<span>基面名称：</span>' +
|
'<div>' + result.data[0].atcunit + '</div>' +
|
'</li>' +
|
'<li>' +
|
'<span>管理单位：</span>' +
|
'<div>' + result.data[0].locality + '</div>' +
|
'</li>' +
|
'<li>' +
|
'<span>所在县：</span>' +
|
'<div>' + result.data[0].addvcd5 + '</div>' +
|
'</li>' +
|
'<li>' +
|
'<span>流域名称：</span>' +
|
'<div>' + result.data[0].bsnm + '</div>' +
|
'</li>' +
|
'<li>' +
|
'<span>水系：</span>' +
|
'<div>' + result.data[0].hnnm + '</div>' +
|
'</li>' +
|
'<li>' +
|
'<span>河名：</span>' +
|
'<div>' + result.data[0].rvnm + '</div>' +
|
'</li>';
|
|
$('#riverInfo').html(html);
|
}
|
});
|
}
|
|
$('.river-menu ul li').click(function () {
|
$(this).addClass('on').siblings().removeClass('on');
|
$('.river-box .river-con').eq($(this).index()).show().siblings().hide();
|
});
|
|
$("#loc_smx").click(function () {
|
//注意：parent 是 JS 自带的全局对象，可用于操作父页面
|
var index = parent.layer.getFrameIndex("Location"); //获取窗口索引
|
window.parent.$('#loc_openWin').click();
|
parent.layer.close(index);
|
});
|
|
});
|
