<!DOCTYPE html>
|
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
|
<head>
|
<meta charset="UTF-8"/>
|
<title>Title</title>
|
<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: '微软雅黑',"Roboto", sans-serif !important;
|
font-weight: bold;
|
padding: 0px;
|
color: #000;
|
}
|
|
p {
|
text-align: center;
|
font-weight: bolder;
|
margin-left: 10px;
|
margin-top: -10px;
|
z-index: 666;
|
height: 20px;
|
position: fixed;
|
}
|
|
table {
|
width: 100%;
|
float: right;
|
}
|
|
table tr td {
|
height: 41px;
|
text-align: left;
|
color: #000;
|
font-size: 15px;
|
}
|
|
table tr td label{
|
font-size: 15px;
|
color: #4777ff;
|
}
|
|
label {
|
color: #2a9de9;
|
}
|
|
#mainDiv {
|
width: calc(100% - 335px);
|
}
|
|
body > div {
|
height: calc(100% - 20px);
|
}
|
|
.div_zytitle {
|
width: 100%;
|
height: 20px;
|
/*float: left;*/
|
margin-top: 12px;
|
margin-bottom: 25px;
|
margin-left: 5px;
|
}
|
|
.div_zytitle span {
|
line-height: 42px;
|
font-size: 20px;
|
margin-left: 20px;
|
color: #4777FF;
|
font-weight: 600;
|
}
|
|
#detail_table tbody tr td{
|
height: 25px;
|
}
|
</style>
|
<script type="text/javascript" th:inline="javascript">
|
var uploadRootPath = [[${uploadRootPath}]];
|
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 = [];
|
var ycdata = [];
|
$.ajax({
|
url: uploadRootPath +"/cache/Stations.txt",
|
success: function (result) {
|
var res = eval("("+result+")");
|
var data = res["result"]["stations"];
|
//添加下拉框数据
|
var obj = document.getElementById('nameSelect');
|
//下拉框添加字段
|
var selectArr = obj.options;
|
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 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 (resdata) {
|
$.ajax({
|
url: resdata.path,
|
success: function (result) {
|
var res = eval("(" + result + ")");
|
//获取字段数据
|
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);
|
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--;
|
}
|
}
|
$("#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 (rr) {
|
$.ajax({
|
url: rr.path,
|
success: function (ydata) {
|
if (ydata != "") {
|
var res = eval("(" + ydata + ")");
|
ycdata = res.Zscg;
|
}
|
initCharts(ssdata, ycdata);
|
}
|
});
|
}
|
});
|
}
|
})
|
}
|
})
|
}
|
|
function initCharts(ssdata,ycdata) {
|
var op = echarts.init(document.getElementById("main"));
|
option = {
|
title: {
|
show: false,
|
text: '潮位观测曲线图',
|
x: 'center'
|
},
|
color:['#FF7E53','#7ed5ff'],
|
tooltip: {
|
trigger: 'axis',
|
formatter: null
|
},
|
|
dataZoom: {
|
show: false,
|
realtime: true
|
},
|
///图例
|
legend: {
|
///[]
|
data: ['实时潮位', '预报潮位'],
|
y: 'bottom',
|
textStyle: {
|
color: "#000"
|
}
|
},
|
grid:{
|
x:35,
|
x2:20
|
},
|
xAxis: [
|
{
|
type: 'category',
|
boundaryGap: false,
|
nameTextStyle: {
|
color: "#000"
|
},
|
axisLabel: {
|
formatter: '{value}',
|
textStyle: {
|
color: "#000"
|
}
|
},
|
splitLine:{
|
show:true
|
},
|
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"
|
}
|
},
|
splitLine:{
|
show:true
|
},
|
}
|
],
|
series: [
|
{
|
name: "实时潮位",
|
type: 'line',
|
smooth: true,
|
data: ssdata
|
}
|
,
|
{
|
name: '预报潮位',
|
type: 'line',
|
smooth: true,
|
data: ycdata
|
}
|
]
|
};
|
op.setOption(option);
|
}
|
</script>
|
</head>
|
<body>
|
<div class="div_zytitle">
|
<span>潮汐观测预报</span>
|
</div>
|
<div style="width: 174px; float: left; z-index: 333;margin-left:31px;">
|
<table style="margin-top: 10px;">
|
<tbody>
|
<tr>
|
<td>
|
<div style="width: 100%;">
|
<div style="float: left;width: 74.6px;">
|
<div style="float: left;">名</div>
|
<div style="float: right;">称：</div></div>
|
<div style="float: left;">
|
<select id="nameSelect" onchange="changeName(this)">
|
</select>
|
</div>
|
</div>
|
</td>
|
</tr>
|
<tr>
|
<td>所属省市：
|
<label id="l_centerStation"></label>
|
</td>
|
</tr>
|
<tr>
|
<td>所属海区：
|
<label id="l_category"></label>
|
</td>
|
</tr>
|
<tr>
|
<td>所属分局：
|
<label id="l_department"></label>
|
</td>
|
</tr>
|
<tr>
|
<td>
|
<div style="width: 100%;">
|
<div style="float: left;width: 74.6px;">
|
<div style="float: left;">日</div>
|
<div style="float: right;">期：</div></div>
|
<div style="float: left;">
|
<label id="l_date">2</label>
|
</div>
|
</div>
|
</td>
|
</tr>
|
</tbody>
|
</table>
|
</div>
|
<div id="mainDiv" style="margin-left: 5px; float: left; ">
|
<div id="main"
|
style="height: calc(100% - 40px); width: 520px; margin-top: -30px; -webkit-tap-highlight-color: transparent; user-select: none; background-color: rgba(0, 0, 0, 0); cursor: default;">
|
|
</div>
|
</div>
|
<div style="margin-left: 5px; width: 160px; float: left; overflow: hidden; overflow-y: auto;margin-left: 730px;position: absolute;">
|
<table id="detail_table" style="overflow: hidden; margin-top: 10px;position: absolute;">
|
<tbody>
|
<tr style="height:20px;">
|
<td style="width:30%; text-align:center">区 站 号：</td>
|
<td style="width:70%;text-align:left"><label id="quhao"></label></td>
|
</tr>
|
<tr style="height:20px;">
|
<td style="width:30%; text-align:center">水 温：
|
</td>
|
<td style="width:70%;text-align:left"><label id="shuiwen"></label></td>
|
</tr>
|
<tr style="height:20px;">
|
<td style="width:30%; text-align:center">盐 度：
|
</td>
|
<td style="width:70%;text-align:left"><label id="yandu"></label></td>
|
</tr>
|
<tr style="height:20px;">
|
<td style="width:30%; text-align:center">潮 位：
|
</td>
|
<td style="width:70%;text-align:left"><label id="chaowei"></label></td>
|
</tr>
|
<tr style="height:20px;">
|
<td style="width:30%; text-align:center">气 温：
|
</td>
|
<td style="width:70%;text-align:left"><label id="qiwen"></label></td>
|
</tr>
|
<tr style="height:20px;">
|
<td style="width:30%; text-align:center">气 压：
|
</td>
|
<td style="width:70%;text-align:left"><label id="qiya"></label></td>
|
</tr>
|
<tr style="height:20px;">
|
<td style="width:30%; text-align:center">相 对 湿 度：</td>
|
<td style="width:70%;text-align:left"><label id="shidu"></label></td>
|
</tr>
|
<tr style="height:20px;">
|
<td style="width:30%; text-align:center">阵 风 速：</td>
|
<td style="width:70%;text-align:left"><label id="fengshu"></label></td>
|
</tr>
|
</tbody>
|
</table>
|
</div>
|
</body>
|
</html>
|
