123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405 |
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>瑞高船舶智能监控系统</title>
- <meta name="renderer" content="webkit">
- <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
- <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
- <meta http-equiv="pragma" content="no-cache">
- <meta http-equiv="Cache" content="no-cache">
- <meta http-equiv="cache-control" content="no-cache, must-revalidate">
- <meta http-equiv="expires" content="0">
- <meta name="viewport"
- content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
- <link rel="stylesheet" href="../../css/element.css">
- <link rel="stylesheet" href="../../css/style.css">
- <link rel="stylesheet" id="linkSource" href="../../css/base.css">
- <script src="../../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
- <script src="../../js/yz/init.js" type="text/javascript" charset="utf-8"></script>
- <script src="../../js/echarts.min.js" type="text/javascript" charset="utf-8"></script>
- <script src="../../js/pako.js"></script>
- <script type="text/javascript">
- document.write('<script src="../../js/yz/shipLi.js?id='+(new Date().getTime())+'" type="text/javascript" charset="utf-8"><\/script>');
- document.write('<script src="../../js/yz/defailt.js?id='+(new Date().getTime())+'" type="text/javascript" charset="utf-8"><\/script>');
- document.write('<script src="../../js/yz/ajax.js?id='+(new Date().getTime())+'" type="text/javascript" charset="utf-8"><\/script>');
- checkLogin();
- </script>
- </head>
- <style type="text/css">
- *{
- margin: 0;
- padding: 0;
- }
- body {
- color: #fff;
- height: 100%;
- background-color: #103151;
- }
- div,td {
- box-sizing: border-box;
- }
- .qixiang_box>div>div{
- display: flex;
- align-items: center;
- justify-content: center;
- }
- .qixiang_box>div>div:nth-child(3){
- color:#ffea00;
- font-size: 18px;
- font-weight: 600;
- }
- .qixiang_box>div img{
- width: 40px;
- }
- .num_chiShui{
- font-size: 18px;
- font-weight: bold;
- margin-right: 3px;
- color:#ffea00;
- }
- .qixiang_box .num_chiShui{
- font-size: 18px;
- }
- #rgCx{
- display: none;
- }
- </style>
- <body>
- <div class="topParen">
- <div class="topBox">
- <div>船舶动态</div>
- <i class="iconfont icon-left text-white" onclick="javascript:history.back(-1);"></i>
- </div>
- <div class="table margin-xs text-grey" style="border:1px solid rgba(255,255,255,0.1);">
- <div class="bg-theme-son padding-left padding-tb-sm flex justify-between">
- <span class="text-white">AIS信息</span>
- </div>
- <div>
- <div class="br_b flex">
- <div class="flex-sub br_r padding-tb-xs padding-left-sm">
- 当前位置:<span id="shipGps">113.23568,21.399475</span>
- </div>
- <div class="flex-sub padding-tb-xs padding-left-sm">
- 航速:<span id="shipSpeed">0</span>节
- </div>
- </div>
- <div class="text-center">
- <div class="flex br_b">
- <div class="padding-tb-xs flex-sub br_r">
- <div style="width: 100%;height: 150px;" id="myChart1"></div>
- <div class="text-white margin-top-sm" style="font-size:15px;">
- 船艏向:<span class="num_chiShui" id="shipCsx">0</span>°
- </div>
- </div>
- <div class="padding-tb-xs flex-sub">
- <div style="width: 100%;height: 150px;" id="myChart4"></div>
- <div class="text-white margin-top-sm" style="font-size:15px;">
- 船迹向:<span class="num_chiShui" id="shipCjx">0</span>°
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div class="table margin-xs text-grey" style="border:1px solid rgba(255,255,255,0.1);">
- <div class="bg-theme-son padding-left padding-tb-sm flex justify-between">
- <span class="text-white">吃水信息</span>
- </div>
- <div class="flex align-center padding-sm">
- <div class="flex-sub flex align-center justify-center">
- <img src="../../imgs/ship_cs.png" style="width: 40%;max-width:140px;">
- <div class="margin-left-xs margin-top">测深:<span class="num_chiShui" id="eatCs">0</span> m</div>
- </div>
- <div class="flex-sub text-center" id="rgCx">
- <div>艏:<span class="valTxt"><span class="num_chiShui" id="eatSs">0</span> m</div>
- <div class="flex align-center justify-center">
- <div>左中:<br><span class="valTxt"><span class="num_chiShui" id="eatZz">0</span> m</div>
- <img src="../../imgs/ship_tblr.png" mode="widthFix" style="width:30px;margin: 10px;">
- <div>右中:<br><span class="valTxt"><span class="num_chiShui" id="eatYz">0</span> m</div>
- </div>
- <div>艉:<span class="valTxt"><span class="num_chiShui" id="eatWx">0</span> m</div>
- </div>
- </div>
- </div>
- <div class="table margin-xs text-grey" style="border:1px solid rgba(255,255,255,0.1);">
- <div class="bg-theme-son padding-left padding-tb-sm flex justify-between">
- <span class="text-white">气象信息</span>
- <div class="flex align-center text-grey">
- <i class="iconfont icon-left" style="font-size: 14px;" onclick="changeDate(-1);"></i>
- <span id="_time" class="margin-lr-sm">2021/12/23 14:00:00</span>
- <i class="iconfont icon-right" style="font-size: 18px;" onclick="changeDate(1);"></i>
- </div>
- </div>
- <div class="qixiang_box">
- <div class="row flex br_b">
- <div class="flex-sub padding-tb-xs">
- <img src="../../imgs/fs_icon.png" alt="">
- </div>
- <div class="flex-sub padding-tb-xs br_r">
- 风速
- </div>
- <div class="flex-sub padding-tb-xs br_r" id="weather1">
- 0
- </div>
- <div class="flex-sub padding-tb-xs flex-direction">
- <div>米/秒</div>
- <div>(2级风)</div>
- </div>
- </div>
- <div class="row flex br_b">
- <div class="flex-sub padding-tb-xs">
- <img src="../../imgs/fx_icon.png" alt="">
- </div>
- <div class="flex-sub padding-tb-xs br_r">
- 风向
- </div>
- <div class="flex-sub padding-tb-xs br_r" id="weather2">
- 0
- </div>
- <div class="flex-sub padding-tb-xs">
- 度
- </div>
- </div>
- <div class="row flex br_b">
- <div class="flex-sub padding-tb-xs">
- <img src="../../imgs/lg_icon.png" alt="">
- </div>
- <div class="flex-sub padding-tb-xs br_r">
- 浪高
- </div>
- <div class="flex-sub padding-tb-xs br_r" id="weather3">
- 0
- </div>
- <div class="flex-sub padding-tb-xs">
- 米
- </div>
- </div>
- <div class="row flex br_b">
- <div class="flex-sub padding-tb-xs">
- <img src="../../imgs/ls_icon.png" alt="">
- </div>
- <div class="flex-sub padding-tb-xs br_r">
- 流速
- </div>
- <div class="flex-sub padding-tb-xs br_r" id="weather4">
- 0
- </div>
- <div class="flex-sub padding-tb-xs">
- 米/秒
- </div>
- </div>
- <div class="row flex br_b">
- <div class="flex-sub padding-tb-xs">
- <img src="../../imgs/lx_icon.png" alt="">
- </div>
- <div class="flex-sub padding-tb-xs br_r">
- 流向
- </div>
- <div class="flex-sub padding-tb-xs br_r" id="weather5">
- 0
- </div>
- <div class="flex-sub padding-tb-xs">
- 度
- </div>
- </div>
- <div class="row flex br_b">
- <div class="flex-sub padding-tb-xs">
- <img src="../../imgs/wd_icon.png" alt="">
- </div>
- <div class="flex-sub padding-tb-xs br_r">
- 温度
- </div>
- <div class="flex-sub padding-tb-xs br_r" id="weather6">
- 0
- </div>
- <div class="flex-sub padding-tb-xs">
- 摄氏度
- </div>
- </div>
- <div class="row flex">
- <div class="flex-sub padding-tb-xs">
- <img src="../../imgs/qy_icon.png" alt="">
- </div>
- <div class="flex-sub padding-tb-xs br_r">
- 气压
- </div>
- <div class="flex-sub padding-tb-xs br_r" id="weather7">
- 0
- </div>
- <div class="flex-sub padding-tb-xs">
- hPa
- </div>
- </div>
- </div>
- </div>
- </div>
- <script type="text/javascript">
- var _Posi = null,nowSn = localStorage.getItem("shipSn");;
- var _Tok = JSON.parse(localStorage.getItem("_yz_TT")).yzTok;
- var myChart1 = echarts.init(document.getElementById('myChart1'));
- var myChart4 = echarts.init(document.getElementById('myChart4'));
- function setoption2(ship_s,txt) {
- ship_s = ship_s == undefined?0 : ship_s;
- $("#"+txt).text(ship_s);
- option = {
- series: [
- {
- name: '实时数据',
- min: 0,
- max: 360,
- splitNumber:12,
- type: 'gauge',
- fontSize: 0,
- center: ['50%', '50%'],
- radius: '97%',
- startAngle:90,
- endAngle: -269.999999,
- detail: {show:false
- },
- axisTick: {
- distance: 4,
- lineStyle: {
- color: '#1890ff',
- }
- },
- data: [{value: ship_s,itemStyle:{color:"#1890ff"}}],
- axisLine: {
- lineStyle: {
- width: 0,
- },
- },
- axisLabel:{
- textStyle: {
- color: '#fff',
- fontSize:9
- },
- distance: 3,
- formatter: function(e) {
- switch (e + "") {
- case "0":
- return "0";
- case "30":
- return "30";
- case "60":
- return "60";
- case "90":
- return "90";
- case "120":
- return "120";
- case "150":
- return "150";
- case "180":
- return "180";
- case "210":
- return "210";
- case "240":
- return "240";
- case "270":
- return "270";
- case "300":
- return "300";
- case "330":
- return "330";
- default:
- return "";
- }
- }
- },
- pointer: {
- width:2,
- length:"60%"
- },
- splitLine: {
- distance: 4,
- length: 10,
- lineStyle: {
- width: 2,
- color: '#1890ff',
- }
- },
- title: {
- textStyle: {
- color: '#1890ff',
- }
- },
- }
- ]
- };
- return option;
- }
- $(document).ready(function(){
- let nowTime = changeDays(0,new Date());
- let _day = parseInt(nowTime[3])<9?" 08:00:00":(parseInt(nowTime[3])<15?" 14:00:00":" 20:00:00");
- $("#_time").text(nowTime[0].replace(/-/g,"/")+_day);
- firstData();
- // setInterval(()=>{firstData();},60*1000);
- })
- function firstData(){
- _Posi = null;
- deviceList(function(_obj){
- let _arr = _obj;
- myChart1.setOption(setoption2(_arr["0aA1"]<0?256.4:_arr["0aA1"],"shipCsx"));
- myChart4.setOption(setoption2(_arr["0a8"]<0?65:_arr["0a8"],"shipCjx"));
- _Posi = _arr["0a5"]<0?[121.453598,30.769552]: [_arr["0a4"], _arr["0a5"]];
- $("#shipGps").text(_Posi[0]+","+_Posi[1]);
- $("#shipSpeed").text(_arr["0a9"] == undefined?0 : _arr["0a9"]);
-
- if(nowSn == "381001400"){
- $("#rgCx").css("display","none");
- }else{
- $("#rgCx").css("display","block");
- }
- $("#eatCs").text(_arr["0aS"] == undefined?0 : _arr["0aS"]);
- $("#eatSs").text(_arr["0ag"] == undefined?0 : _arr["0ag"]);
- $("#eatZz").text(_arr["0ai"] == undefined?0 : _arr["0ai"]);
- $("#eatYz").text(_arr["0aj"] == undefined?0 : _arr["0aj"]);
- $("#eatWx").text(_arr["0ah"] == undefined?0 : _arr["0ah"]);
- getWeat($("#_time").text().replace(/\//g,"-"));
- })
- }
- function getWeat(_time){
- if(_Posi != null){
- getWeather({
- _Tok: _Tok,
- nowSn: nowSn,
- _time: _time,
- posi: _Posi
- })
- }
- }
- function changeDate(_num){
- let _key = $("#_time").text().split(" ");
- let _time = parseInt(_key[1]);
- let _year = _key[0].replace(/\//g,"-");
- let _newAjax = "";
- if(_num == -1){
- if(_time < 9){
- let _newYW = changeDays(-1,_year);
- $("#_time").text(_newYW[0].replace(/-/g,"/")+" 20:00:00");
- _newAjax = _newYW[0] + " 20:00:00";
- }else if(_time>8&&_time<15){
- $("#_time").text(_year.replace(/-/g,"/")+" 08:00:00");
- _newAjax = _year + " 08:00:00";
- }else if(_time>14){
- $("#_time").text(_year.replace(/-/g,"/")+" 14:00:00");
- _newAjax = _year + " 14:00:00";
- }
- }else{
- if(_time < 9){
- $("#_time").text(_year.replace(/-/g,"/")+" 14:00:00");
- _newAjax = _year + " 14:00:00";
- }else if(_time>8&&_time<15){
- $("#_time").text(_year.replace(/-/g,"/")+" 20:00:00");
- _newAjax = _year + " 20:00:00";
- }else if(_time>14){
- let _newYW = changeDays(1,_year);
- $("#_time").text(_newYW[0].replace(/-/g,"/")+" 08:00:00");
- _newAjax = _newYW[0] + " 08:00:00";
- }
- }
- getWeat(_newAjax);
- }
- </script>
- </body>
- </html>
|