<!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: Arial;
|
font-weight: bold;
|
/*overflow: hidden;*/
|
/*margin:0px;*/
|
padding: 0px;
|
color: #fff;
|
}
|
|
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;
|
}
|
|
table {
|
width: 100%;
|
float: right;
|
}
|
|
table tr td {
|
height: 30px;
|
text-align: left;
|
}
|
|
label {
|
color: #2a9de9;
|
}
|
|
#mainDiv {
|
width: calc(100% - 335px);
|
}
|
|
body > div {
|
height: calc(100% - 20px);
|
}
|
</style>
|
<script>
|
$(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];
|
initCharts(ssdata,ycdata);
|
var ly = new Date();
|
var year = ly.getFullYear() + "-";
|
var month = ly.getMonth() + 1 + "-";
|
var day = ly.getDate();
|
|
var h = ly.getHours();
|
if (h < 10) h = '0' + h;
|
var i = ly.getMinutes();
|
if (i < 10) i = '0' + i;
|
var s = ly.getSeconds();
|
if (s < 10) s = '0' + s;
|
var lytime = year + month + day +" "+ h + ":" + i;
|
$("#l_date").text(lytime);
|
})
|
|
function changeName(obj) {
|
var ssdata = null;
|
var ycdata = null;
|
var ly = new Date();
|
var year = ly.getFullYear() + "-";
|
var month = ly.getMonth() + 1 + "-";
|
var day = ly.getDate();
|
var lytime = year + month + day;
|
if($(obj).find("option:selected").attr("cityname") == "海南") {
|
ssdata = [133, 128, 138, 156, 170, 178, 185, 173, 170, 154, 134, 115, 107, 94, 86];
|
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];
|
$("#l_name").text("");
|
$("#l_centerStation").text("海南");
|
$("#l_category").text("南海分局");
|
$("#shidu").text('82%');
|
$("#qiwen").text("36.3℃");
|
}
|
else if($(obj).find("option:selected").attr("cityname") == "广东") {
|
ssdata = [138, 123, 133, 146, 167, 178, 176, 190, 160, 134, 154, 135, 127, 114, 96];
|
ycdata = [122, 130, 137, 120, 104, 92, 85, 84, 88, 94, 100, 106, 110, 113, 116, 141, 153, 164, 173, 179, 180, 176, 166, 153];
|
$("#l_name").text("");
|
$("#l_centerStation").text("广东");
|
$("#l_category").text("南海分局");
|
$("#yandu").text("16.7psu");
|
$("#qiya").text("1128.2hPa");
|
}
|
else if($(obj).find("option:selected").attr("cityname") == "广西") {
|
ssdata = [138, 190, 160, 134, 123, 133, 176, 154, 135, 127, 114, 96, 146, 167, 178];
|
ycdata = [122, 130, 137, 120, 164, 173, 179, 180, 176, 104, 92, 85, 84, 88, 113, 116, 141, 153,166, 153, 94, 100, 106, 110];
|
$("#l_name").text("");
|
$("#l_centerStation").text("广西");
|
$("#l_category").text("南海分局");
|
$("#shuiwen").text("35.3℃");
|
$("#chaowei").text("98cm");
|
}
|
else if($(obj).find("option:selected").attr("cityname") == "福建") {
|
ssdata = [138, 123, 176, 190, 160, 134, 133, 146, 167, 178, 154, 135, 127, 114, 96];
|
ycdata = [85, 84, 88, 94, 100, 106, 122, 130, 137, 120, 104, 92, 173, 179, 180, 176, 166, 110, 113, 116, 141, 153, 164, 153];
|
$("#l_name").text("");
|
$("#l_centerStation").text("福建");
|
$("#l_category").text("南海分局");
|
$("#shuiwen").text("33.3℃");
|
$("#yandu").text("18.7psu");
|
}
|
else if($(obj).find("option:selected").attr("cityname") == "辽宁") {
|
ssdata = [133, 146, 167, 127,138, 134, 123, 176, 190, 178, 154, 135, 160, 114, 96];
|
ycdata = [113, 116, 137, 120, 104, 85, 84, 88, 94, 92, 173, 179, 180, 141, 100, 122, 130, 176, 166, 110, 106, 153, 164, 153];
|
$("#l_centerStation").text("辽宁");
|
$("#l_category").text("北海分局");
|
$("#shuiwen").text("35.3℃");
|
$("#chaowei").text("112cm");
|
}
|
else if($(obj).find("option:selected").attr("cityname") == "山东") {
|
ssdata = [178, 154, 135, 160, 134, 133, 146, 167, 127,138, 123, 176, 190, 114, 96];
|
ycdata = [122, 130, 176, 166, 110, 113, 116, 137, 120, 104, 92, 173, 179, 180, 141, 85, 84, 88, 94, 100, 106, 153, 164, 153];
|
$("#l_centerStation").text("山东");
|
$("#l_category").text("北海分局");
|
$("#yandu").text("15.7psu");
|
$("#shidu").text('68%');
|
}
|
else if($(obj).find("option:selected").attr("cityname") == "河北") {
|
ssdata = [118, 127,138, 123, 176, 156, 114, 96, 124, 135, 130, 134, 133, 146, 127];
|
ycdata = [102, 110, 156, 166, 110, 123, 135, 157, 150, 154, 122, 163, 173, 180, 141, 85, 84, 88, 94, 100, 106, 153, 164, 153];
|
$("#l_centerStation").text("河北");
|
$("#l_category").text("北海分局");
|
$("#shuiwen").text("32.3℃");
|
$("#chaowei").text("120cm");
|
}
|
else if($(obj).find("option:selected").attr("cityname") == "浙江") {
|
ssdata = [178, 154, 135, 160, 134, 133, 146, 167, 127,138, 123, 176, 190, 114, 96];
|
ycdata = [104, 92, 173, 179, 180, 141, 85, 84, 88, 106, 153, 164, 153, 122, 130, 176, 166, 110, 113, 116, 137, 120, 94, 100];
|
$("#l_centerStation").text("浙江");
|
$("#l_category").text("东海分局");
|
$("#shuiwen").text("33.7℃");
|
$("#yandu").text("16.7psu");
|
}
|
else if($(obj).find("option:selected").attr("cityname") == "江苏") {
|
ssdata = [128, 134, 135,120, 104, 92, 173, 179, 180, 141,85, 176, 190, 114, 86];
|
ycdata = [122, 130, 176, 166, 110, 113, 116, 137,160, 134, 133, 146, 167, 127,138, 123, 84, 88, 94, 100, 106, 153, 164, 153];
|
$("#l_centerStation").text("江苏");
|
$("#l_category").text("东海分局");
|
$("#yandu").text("15.3psu");
|
$("#chaowei").text("115cm");
|
}
|
else if($(obj).find("option:selected").attr("cityname") == "天津") {
|
ssdata = [178, 154, 135, 160, 134, 133, 146, 167, 127,138, 123, 176, 190, 114, 123];
|
ycdata = [122, 130, 176, 166, 110, 113, 116, 137, 120, 104, 92, 173, 179, 180, 141,85, 84, 88, 94, 100, 106, 153, 164, 153];
|
$("#l_centerStation").text("天津");
|
$("#l_category").text("北海分局");
|
$("#qiwen").text("35.1℃");
|
$("#shuiwen").text("34.9℃");
|
}
|
else if($(obj).find("option:selected").attr("cityname") == "上海") {
|
ssdata = [179, 180, 141, 167, 127,138, 123, 176, 190, 137, 120, 104, 92, 114, 96];
|
ycdata = [122, 130, 176, 166, 110, 113, 116, 135, 160, 134, 133, 173, 178, 154, 146, 85, 84, 88, 94, 100, 106, 153, 164, 153];
|
$("#l_centerStation").text("上海");
|
$("#l_category").text("东海分局");
|
$("#shuiwen").text("31.3℃");
|
$("#chaowei").text("102cm");
|
}
|
$("#l_date").text(lytime);
|
$("#quhao").text($(obj).find("option:selected").attr("quhao"));
|
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
|
},
|
|
dataZoom: {
|
show: false,
|
realtime: true
|
},
|
///图例
|
legend: {
|
///[]
|
data: ['实时潮位', '预报潮位'],
|
y: 'bottom',
|
textStyle: {
|
color: "#fff"
|
}
|
},
|
xAxis: [
|
{
|
type: 'category',
|
boundaryGap: false,
|
nameTextStyle: {
|
color: "#fff"
|
},
|
axisLabel: {
|
formatter: '{value}',
|
textStyle: {
|
color: "#fff"
|
}
|
},
|
data: function () {
|
var list = [];
|
for (var i = 0; i < 24; i++) {
|
list.push(i + "h")
|
}
|
return list;
|
}()
|
}
|
],
|
yAxis: [
|
{
|
name: "cm",
|
type: 'value',
|
nameTextStyle: {
|
color: "#fff"
|
},
|
axisLabel: {
|
formatter: '{value}',
|
textStyle: {
|
color: "#fff"
|
}
|
},
|
}
|
],
|
series: [
|
{
|
name: "实时潮位",
|
type: 'line',
|
smooth: true,
|
data: ssdata
|
}
|
,
|
{
|
name: '预报潮位',
|
type: 'line',
|
smooth: true,
|
data: ycdata
|
}
|
]
|
};
|
op.setOption(option);
|
}
|
</script>
|
</head>
|
<body>
|
<div style="width: 150px; float: left; border: 1px solid #c4bcbc; z-index: 333;">
|
<p>基本信息</p>
|
<table style="margin-top: 10px;">
|
<tbody>
|
<tr>
|
<td>名称：
|
<!-- <label id="l_name"></label>-->
|
<select id="nameSelect" onchange="changeName(this)">
|
<option value="鲅鱼圈" cityname="辽宁" quhao="11754">鲅鱼圈</option>
|
<option value="东港" cityname="辽宁" quhao="11755">东港</option>
|
<option value="葫芦岛" cityname="辽宁" quhao="11756">葫芦岛</option>
|
<option value="老虎滩" cityname="辽宁" quhao="11757">老虎滩</option>
|
<option value="温坨子" cityname="辽宁" quhao="11751">温坨子</option>
|
<option value="小长山" cityname="辽宁" quhao="11752">小长山</option>
|
<option value="芷锚湾" cityname="辽宁" quhao="11753">芷锚湾</option>
|
|
<option value="孤东" cityname="山东" quhao="11614">孤东</option>
|
<option value="东营港" cityname="山东" quhao="11611">东营港</option>
|
<option value="岚山" cityname="山东" quhao="11612">岚山</option>
|
<option value="千里岩" cityname="山东" quhao="11613">千里岩</option>
|
<option value="日照" cityname="山东" quhao="11617">日照</option>
|
<option value="五号码头" cityname="山东" quhao="11615">五号码头</option>
|
<option value="东营小岛河" cityname="山东" quhao="11616">东营小岛河</option>
|
<option value="小麦岛" cityname="山东" quhao="11618">小麦岛</option>
|
|
<option value="曹妃甸" cityname="河北" quhao="11321">曹妃甸</option> <!--//河北-->
|
<option value="黄骅" cityname="河北" quhao="11322">黄骅</option>
|
<option value="京唐港" cityname="河北" quhao="11323">京唐港</option>
|
<option value="秦皇岛" cityname="河北" quhao="11324">秦皇岛</option>
|
|
<option value="北隍城" cityname="山东" quhao="11619">北隍城</option>
|
<option value="成山头" cityname="山东" quhao="11620">成山头</option>
|
<option value="龙口" cityname="山东" quhao="11621">龙口</option>
|
<option value="蓬莱" cityname="山东" quhao="11622">蓬莱</option>
|
<option value="石岛" cityname="山东" quhao="11623">石岛</option>
|
<option value="潍坊" cityname="山东" quhao="11624">潍坊</option>
|
<option value="文登" cityname="山东" quhao="11625">文登</option>
|
<option value="烟台" cityname="山东" quhao="11626">烟台</option>
|
<!--浙江-->
|
<option value="北仑" cityname="浙江" quhao="11531">北仑</option>
|
<option value="三门健跳" cityname="浙江" quhao="11532">三门健跳</option>
|
<option value="石浦" cityname="浙江" quhao="11533">石浦</option>
|
<option value="乌沙山" cityname="浙江" quhao="11534">乌沙山</option>
|
<option value="镇海" cityname="浙江" quhao="11535">镇海</option>
|
|
<!--江苏-->
|
<option value="滨海" cityname="天津" quhao="11121">滨海</option>
|
<option value="吕泗" cityname="江苏" quhao="11221">吕泗</option>
|
<option value="连云港" cityname="江苏" quhao="11222">连云港</option>
|
<option value="外磕脚" cityname="江苏" quhao="11223">外磕脚</option>
|
<option value="新洋港" cityname="江苏" quhao="11224">新洋港</option>
|
<option value="洋口港" cityname="江苏" quhao="11225">洋口港</option>
|
|
<!--上海-->
|
<option value="崇明" cityname="上海" quhao="11811">崇明</option>
|
<option value="东海大桥" cityname="上海" quhao="11812">东海大桥</option>
|
<option value="大戢山" cityname="上海" quhao="11813">大戢山</option>
|
<option value="芦潮港" cityname="上海" quhao="11814">芦潮港</option>
|
<option value="佘山" cityname="上海" quhao="11815">佘山</option>
|
<option value="滩浒岛" cityname="上海" quhao="11816">滩浒岛</option>
|
|
<option value="小衢山" cityname="浙江" quhao="11536">小衢山</option>
|
<option value="鳌江" cityname="浙江" quhao="11537">鳌江</option>
|
<option value="大陈" cityname="浙江" quhao="11538">大陈</option>
|
<option value="大门" cityname="浙江" quhao="11539">大门</option>
|
<option value="椒江" cityname="浙江" quhao="11540">椒江</option>
|
<option value="坎门" cityname="浙江" quhao="11541">坎门</option>
|
<option value="南麂" cityname="浙江" quhao="11542">南麂</option>
|
<option value="瓯江口" cityname="浙江" quhao="11543">瓯江口</option>
|
<option value="瑞安" cityname="浙江" quhao="11544">瑞安</option>
|
<option value="沙港头" cityname="浙江" quhao="11545">沙港头</option>
|
<option value="石砰" cityname="浙江" quhao="11546">石砰</option>
|
<option value="温州" cityname="浙江" quhao="11547">温州</option>
|
|
<option value="崇武" cityname="福建" quhao="21811">崇武</option>
|
<option value="东山" cityname="福建" quhao="21812">东山</option>
|
<option value="东澳" cityname="广东" quhao="21311">东澳</option>
|
<option value="晋江" cityname="福建" quhao="21813">晋江</option>
|
<option value="龙海" cityname="福建" quhao="21814">龙海</option>
|
<option value="平潭" cityname="福建" quhao="21815">平潭</option>
|
<option value="翔安" cityname="福建" quhao="21816">翔安</option>
|
<option value="厦门" cityname="福建" quhao="21817">厦门</option>
|
<option value="北茭" cityname="福建" quhao="21818">北茭</option>
|
<option value="北礵" cityname="福建" quhao="21819">北礵</option>
|
<option value="长门" cityname="福建" quhao="21820">长门</option>
|
<option value="秦屿" cityname="福建" quhao="21821">秦屿</option>
|
<option value="三沙" cityname="海南" quhao="21671">三沙</option>
|
<option value="福建台山" cityname="福建" quhao="21822">福建台山</option>
|
<option value="岱山" cityname="浙江" quhao="11548">岱山</option>
|
<option value="六横" cityname="浙江" quhao="11549">六横</option>
|
<option value="嵊山" cityname="浙江" quhao="11550">嵊山</option>
|
<option value="朱家尖" cityname="浙江" quhao="11551">朱家尖</option>
|
<option value="北海" cityname="广西" quhao="21851">北海</option>
|
<option value="防城港" cityname="广西" quhao="21852">防城港</option>
|
<option value="钦州" cityname="广西" quhao="21853">钦州</option>
|
<option value="铁山港" cityname="广西" quhao="21854">铁山港</option>
|
<option value="涠洲" cityname="广西" quhao="21855">涠洲</option>
|
<option value="广州" cityname="广东" quhao="21312">广州</option>
|
<option value="博鳌" cityname="海南" quhao="21672">博鳌</option>
|
<option value="东方" cityname="海南" quhao="21673">东方</option>
|
<option value="秀英" cityname="海南" quhao="21674">秀英</option>
|
<option value="清澜" cityname="海南" quhao="21675">清澜</option>
|
<option value="三亚" cityname="海南" quhao="21676">三亚</option>
|
<option value="乌场" cityname="海南" quhao="21677">乌场</option>
|
<!--<option value="西沙">西沙</option>-->
|
<option value="莺歌海" cityname="海南" quhao="21678">莺歌海</option>
|
<option value="赤湾" cityname="广东" quhao="21313">赤湾</option>
|
<option value="惠州" cityname="广东" quhao="21314">惠州</option>
|
<option value="汕头" cityname="广东" quhao="21315">汕头</option>
|
<option value="汕尾" cityname="广东" quhao="21316">汕尾</option>
|
<option value="盐田" cityname="广东" quhao="21317">盐田</option>
|
<option value="南澳" cityname="广东" quhao="21318">南澳</option>
|
<option value="遮浪" cityname="广东" quhao="21319">遮浪</option>
|
<option value="大万山" cityname="广东" quhao="21320">大万山</option>
|
<option value="海安" cityname="江苏" quhao="11226">海安</option>
|
<option value="硇洲" cityname="广东" quhao="21321">硇洲</option>
|
<option value="水东" cityname="广东" quhao="21322">水东</option>
|
<option value="台山" cityname="广东" quhao="21323">台山</option>
|
<option value="湛江" cityname="广东" quhao="21324">湛江</option>
|
<option value="闸坡" cityname="广东" quhao="21325">闸坡</option>
|
<option value="珠海" cityname="广东" quhao="21326">珠海</option>
|
<!--<option value="南沙">南沙</option>-->
|
<option value="塘沽" cityname="天津" quhao="11122">塘沽</option>
|
<option value="沙埕" cityname="福建" quhao="21823">沙埕</option>
|
</select>
|
</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>所属要素：
|
<select id="s_ys" style="width: 60px;"></select>
|
</td>
|
</tr>-->
|
<tr>
|
<td>日期：
|
<label id="l_date">2018/08/31 17</label>
|
</td>
|
</tr>
|
</tbody>
|
</table>
|
</div>
|
<div id="mainDiv" style="margin-left: 5px; float: left; border: 1px solid #c4bcbc;">
|
<p id="ptitle">潮位观测曲线图</p>
|
<div id="main"
|
style="height: calc(100% + 30px); width: calc(100% + 80px); margin-top: -30px; margin-left: -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; border: 1px solid #c4bcbc; overflow: hidden; overflow-y: auto;">
|
<p>详细观测信息</p>
|
<!--<div id="detail_table" style="overflow: hidden;"></div>-->
|
<table id="detail_table" style="overflow: hidden; margin-top: 10px;">
|
<tbody>
|
<tr style="height:20px;">
|
<td style="width:30%; text-align:center">区 站 号:</td>
|
<td style="width:70%;text-align:left"><label id="quhao">11754</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">29.5 ℃</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">17.7psu</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">103cm</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">29.1 ℃</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">1002.4hPa</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">76％</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">1.3m/s</label></td>
|
</tr>
|
</tbody>
|
</table>
|
</div>
|
</body>
|
</html>
|
