<!DOCTYPE html>
|
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
|
<head>
|
<meta charset="UTF-8" />
|
<script th:src="@{${pubzyWebRoot} + 'BootStrap4/assets/js/jquery.min.js'}"></script>
|
<script th:src="@{${pubzyWebRoot} + 'echarts/echarts-all-2.2.7.js'}"></script>
|
<style>
|
html, body {
|
width: 99.6%;
|
height: 100%;
|
overflow: hidden;
|
font-size: 13px;
|
font-family: Arial;
|
font-weight: bold;
|
/*overflow: hidden;*/
|
/*margin:0px;*/
|
padding: 0px;
|
color: black;
|
}
|
|
p {
|
text-align: center;
|
font-weight: bolder;
|
margin-left: 10px;
|
margin-top: -10px;
|
z-index: 666;
|
/*background-color: #152E50;*/
|
/*width: 60px;*/
|
height: 20px;
|
position: fixed;
|
}
|
|
#mainDiv {
|
width: calc(100%);
|
}
|
|
|
</style>
|
<script>
|
var date = new Date();
|
var month = date.getMonth() + 1;
|
var strDate = date.getDate();
|
var h = date.getHours();
|
var m = date.getMinutes();
|
var s = date.getSeconds();
|
if (month >= 1 && month <= 9) {
|
month = "0" + month;
|
}
|
if (strDate >= 0 && strDate <= 9) {
|
strDate = "0" + strDate;
|
}
|
if (h >= 0 && h <= 9) {
|
h = "0" + h;
|
}
|
if (m >= 0 && m <= 9) {
|
m = "0" + m;
|
}
|
if (s >= 0 && s <= 9) {
|
s = "0" + s;
|
}
|
var btime = date.getFullYear() + month + strDate + "000000";
|
var etime = date.getFullYear() + month + strDate + h + m + s;
|
|
$(function () {
|
var ssdata = [133, 128, 138, 156, 170, 178, 185, 173, 170, 154, 134, 115, 107, 94, 86];
|
var ycdata = [122, 130, 141, 153, 164, 173, 179, 180, 176, 166, 153, 137, 120, 104, 92, 85, 84, 88, 94, 100, 106, 110, 113, 116];
|
$.ajax({
|
url: '/api/GetStations',
|
dataType: 'json',
|
success: function (result) {
|
var res = eval("("+decodeURIComponent(result.info)+")");
|
var data = res["result"]["stations"];
|
//添加下拉框数据
|
var obj = document.getElementById('nameSelect');
|
for (var i = 0; i < data.length; i++) {
|
var name = data[i]["name"];
|
var value = data[i]["stationCode"];
|
obj.options.add(new Option(name, value));
|
}
|
|
//下拉框添加字段
|
var selectArr = obj.options;
|
for (var i = 0; i < data.length; i++) {
|
var centerStation = data[i]["centerStation"];
|
var stationNumber = data[i]["stationNumber"];
|
var department = data[i]["department"];
|
var office = data[i]["office"];
|
selectArr[i].setAttribute("centerStation", centerStation);
|
selectArr[i].setAttribute("stationNumber", stationNumber);
|
selectArr[i].setAttribute("department", department);
|
selectArr[i].setAttribute("office", office);
|
}
|
//默认三亚；
|
$("#nameSelect").val(4613);
|
changeName();
|
}
|
})
|
})
|
|
function changeName(obj) {
|
var ssdata = [];
|
var ycdata = null;
|
var ly = new Date();
|
var year = ly.getFullYear() + "-";
|
var month = ly.getMonth() + 1 + "-";
|
if (ly.getMonth() + 1 >= 1 && ly.getMonth() + 1 <= 9) {
|
month = "0" + month;
|
}
|
var day = ly.getDate();
|
var lytime = year + month + day;
|
var thisdate = "";
|
var code = $("#nameSelect option:selected").val();
|
$.ajax({
|
url: '/api/GetStationDataSearch?stationCode=' + code + '&startDate=' + btime + '&endDate=' + etime + '&factorCode=A3010200100,A3020100400,A3020300400,A3010100200,A3020200400,A3070000800,A3020409700',
|
dataType: 'json',
|
success: function (result) {
|
var res = eval("("+decodeURIComponent(result.info)+")");
|
//获取字段数据
|
var shuiwen = res["result"]["factors"][0]["values"][0]["value"];
|
var yandu = res["result"]["factors"][1]["values"][0]["value"];
|
var qiwen = res["result"]["factors"][2]["values"][0]["value"];
|
var qiya = res["result"]["factors"][3]["values"][0]["value"];
|
var shidu = res["result"]["factors"][4]["values"][0]["value"];
|
var fengsu = res["result"]["factors"][5]["values"][0]["value"];
|
var chaowei = res["result"]["factors"][6]["values"][0]["value"];
|
$("#shuiwen").html((shuiwen ? shuiwen : 0) + "℃");
|
$("#yandu").html((yandu ? yandu : 0) + "psu");
|
$("#qiwen").html((qiwen ? qiwen : 0) + "℃");
|
$("#qiya").html((qiya ? qiya : 0) + "hPa");
|
$("#shidu").html((shidu ? shidu : 0) + "％");
|
$("#fengshu").html((fengsu ? fengsu : 0) + "m/s");
|
$("#chaowei").html((chaowei ? chaowei : 0) + "cm");
|
//获取统计图数据
|
var tongjiData = res["result"]["factors"][6]["values"];
|
thisdate = tongjiData[0]["date"].substring(0,10);
|
tongjiData[0]["date"]= tongjiData[0]["date"].replace("+"," ").replace(/-/g,'/');
|
var ssHour = (new Date(tongjiData[0]["date"])).getHours();
|
for (var i = 0; i < tongjiData.length; i++) {
|
var strH = ssHour;
|
if (strH < 10) {
|
strH = "0" + strH;
|
}
|
if (tongjiData[i]["date"] == (lytime + "+" + strH + ":00:00")) {
|
ssdata.push(parseInt(tongjiData[i]["value"]));
|
ssHour--;
|
}
|
}
|
//for(var i=tongjiData.length-1;i>60;){
|
// ssdata.push(parseInt(res["result"]["factors"][6]["values"][i]["value"]));
|
// i=i-60;
|
//}
|
$("#l_date").text(lytime);
|
$("#quhao").text($("#nameSelect option:selected").attr("stationNumber"));
|
$("#l_centerStation").text($("#nameSelect option:selected").attr("centerStation"));
|
$("#l_category").text($("#nameSelect option:selected").attr("department"));
|
$("#l_department").text($("#nameSelect option:selected").attr("office"));
|
$.ajax({
|
url: '/api/GetCXDataByTaiZhanNameAndTime?name='+encodeURIComponent($("#nameSelect option:selected").text())+"&timeStr="+thisdate,
|
dataType: 'json',
|
success: function (result) {
|
if(result.info != ""){
|
var res = eval("("+decodeURIComponent(result.info)+")");
|
if(res != {}){
|
ycdata = res.Zscg;
|
}
|
}
|
initCharts(ssdata, ycdata);
|
}
|
});
|
|
|
}
|
})
|
}
|
|
function initCharts(ssdata,ycdata) {
|
var op = echarts.init(document.getElementById("main"));
|
option = {
|
title: {
|
show: false,
|
text: '潮位观测曲线图',
|
x: 'center'
|
},
|
tooltip: {
|
trigger: 'axis',
|
//formatter: "{a} <br/>{b} : {c}<br/> ({d}%)"
|
formatter: null
|
},
|
grid:{
|
y:30,
|
x:35,
|
width: 370
|
},
|
|
dataZoom: {
|
show: false,
|
realtime: true
|
},
|
///图例
|
legend: {
|
///[]
|
data: ['实时潮位', '预报潮位'],
|
y: 'bottom',
|
textStyle: {
|
color: "#000"
|
}
|
},
|
xAxis: [
|
{
|
type: 'category',
|
boundaryGap: false,
|
nameTextStyle: {
|
color: "#000"
|
},
|
axisLabel: {
|
formatter: '{value}',
|
textStyle: {
|
color: "#000"
|
}
|
},
|
data: function () {
|
var list = [];
|
for (var i = 0; i < 24; i++) {
|
list.push(i + "h")
|
}
|
return list;
|
}()
|
}
|
],
|
yAxis: [
|
{
|
name: "cm",
|
type: 'value',
|
nameTextStyle: {
|
color: "#000"
|
},
|
axisLabel: {
|
formatter: '{value}',
|
textStyle: {
|
color: "#000"
|
}
|
},
|
}
|
],
|
series: [
|
{
|
name: "实时潮位",
|
type: 'line',
|
smooth: true,
|
data: ssdata
|
}
|
,
|
{
|
name: '预报潮位',
|
type: 'line',
|
smooth: true,
|
data: ycdata
|
}
|
]
|
};
|
op.setOption(option);
|
}
|
</script>
|
</head>
|
<body>
|
|
<div id="mainDiv" style=" border: 1px solid #c4bcbc;height: 95%;width: 415px;overflow: hidden;overflow-y: auto;">
|
<p id="ptitle">潮位观测曲线图</p>
|
<div style="width: 100%;">
|
<table style="margin-top: 15px;width: 100%;margin-left: 20px;border-collapse:separate; border-spacing:0px 7px;">
|
<tbody>
|
<tr>
|
<td>名称：
|
<select id="nameSelect" onchange="changeName(this)">
|
</select>
|
</td>
|
</tr>
|
<tr>
|
<td>所属省市：
|
<label id="l_centerStation"></label>
|
</td>
|
<td>日期：
|
<label id="l_date"></label>
|
</td>
|
|
</tr>
|
</tbody>
|
</table>
|
</div>
|
|
<div id="main"
|
style="height: calc(60% ); width: 440px; -webkit-tap-highlight-color: transparent; user-select: none; background-color: rgba(0, 0, 0, 0); cursor: default;">
|
</div>
|
<div style="background:linear-gradient(to left,#efefef,#b6b6b6,#efefef);height:1px;">
|
|
</div>
|
|
<div style="width: 100%;">
|
<table id="detail_table" style="margin-top: 5px;width: 100%;margin-left: 0px;">
|
<tbody>
|
<tr >
|
<td style="text-align:right">区站号:</td>
|
<td ><label id="quhao"></label></td>
|
<td style="text-align:right">水温:
|
</td>
|
<td ><label id="shuiwen"></label></td>
|
<td style="text-align:right">盐度:
|
</td>
|
<td ><label id="yandu"></label></td>
|
</tr>
|
|
<tr >
|
<td style="text-align:right">阵风速:</td>
|
<td ><label id="fengshu">s</label></td>
|
<td style="text-align:right">气温:
|
</td>
|
<td ><label id="qiwen"></label></td>
|
<td style="text-align:right">气压:
|
</td>
|
<td ><label id="qiya"></label></td>
|
</tr>
|
|
<tr >
|
<td style="text-align:right">相对湿度:</td>
|
<td ><label id="shidu"></label></td>
|
|
<td style="text-align:right">潮位:
|
</td>
|
<td ><label id="chaowei"></label></td>
|
</tr>
|
|
</tbody>
|
</table>
|
</div>
|
|
|
</div>
|
</body>
|
</html>
|
