123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537 |
- <!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">
- <!--引入 element-ui 的样式,-->
- <link rel="stylesheet" href="../css/element.css">
- <link rel="stylesheet" href="../css/style.css">
- <link rel="stylesheet" href="../css/base.css">
- <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.11&key=745d6f0134a56494868bd0e51a57fe46"></script>
- <script src="../js/jquery.min.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/init.js?id='+(new Date().getTime())+'" type="text/javascript" charset="utf-8"><\/script>');
- 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/ajax.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/configuration.js?id='+(new Date().getTime())+'" type="text/javascript" charset="utf-8"><\/script>');
- </script>
- <script src="//webapi.amap.com/ui/1.1/main.js?v=1.1.1"></script>
- </head>
- <script>
- checkLogin();
- </script>
- <style type="text/css">
- * {
- margin: 0;
- padding: 0;
- box-sizing: border-box;
- }
- body {
- height: 100vh;
- color: #fff;
- overflow: auto;
- background-color: #040d32;
- }
- .luojing_box{
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%,-50%);
- height: 48%;
- }
- .luojing_box1{
- height: 100%;
- transform: rotate(0deg);
- transform-origin: center;
- }
- .nowShip{
- left: 20px;
- top: 20px;
- width: 200px;
- font-size: 0.8vw;
- }
- .map_info>div>div:first-child{
- width: 45px;
- font-size: 0.8vw;
- }
- .map_info>div>div:last-child {
- width: calc(100% - 45px);
- }
- .engine1,.engine2,.engine3{
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- border:3px solid #ccc;
- height:60%;
- }
- .engine1{
- border-right: none;
- }
- .engine3{
- border-left: none;
- }
- </style>
- <body>
- <div style="height:80px;position: relative;">
- <img src="../imgs/cab.png" alt="" style="width: 100%;">
- <div style="position: absolute;bottom: 12px;right:20px;color: #fff;">
- 最后更新时间:<span id="endTime"></span>
- </div>
- </div>
- <div class="yz_clm15">
- <div class="yz_clm3">
- <div class="Sense">
- <div class="yz_title">气象信息</div>
- <div class="flex flex-wrap align-center text-center padding-tb-xs"
- style="height: calc(100% - 30px);color: #94d1ff;font-size: 0.8vw;">
- <div style="width:66.66%;height:33.33%;">
- <div style="font-size: 2vw;" class="padding-top-xs">
- <span id="_week">星期一</span>
- <!-- <i class="iconfont icon-left yz_cursor" style="font-size: 18px;" onclick="changeDate(-1);"></i> -->
- <!-- <span style="vertical-align: middle;color: #39AEFF;" id="_time">08:00:00</span> -->
- <!-- <i class="iconfont icon-right yz_cursor" style="font-size: 22px;" onclick="changeDate(1);"></i> -->
- </div>
- <div><span id="_year">2021年01月01日</span></div>
- </div>
- <div style="width:33.33%;height:33.33%;">
- <img src="../imgs/lg_icon.png" alt="" style="height:30px;">
- <div class="text-center">
- 浪高<br><span class="text-yellow" id="weather3">0</span> m
- </div>
- </div>
- <div style="width:33.33%;height:33.33%;">
- <img src="../imgs/qy_icon.png" alt="" style="height:30px;">
- <div class="text-center">
- 气压<br><span class="text-yellow" id="weather7">0</span> hPa
- </div>
- </div>
- <div style="width:33.33%;height:33.33%;">
- <img src="../imgs/fx_icon.png" alt="" style="height:30px;">
- <div class="text-center">
- 风向<br><span class="text-yellow" id="weather2">0</span> °
- </div>
- </div>
- <div style="width:33.33%;height:33.33%;">
- <img src="../imgs/ls_icon.png" alt="" style="height:30px;">
- <div class="text-center">
- 流速<br><span class="text-yellow" id="weather4">0</span> m/s
- </div>
- </div>
- <div style="width:33.33%;height:33.33%;">
- <img src="../imgs/wd_icon.png" alt="" style="height:30px;">
- <div class="text-center">
- 温度<br><span class="text-yellow" id="weather6">0</span> ℃
- </div>
- </div>
- <div style="width:33.33%;height:33.33%;">
- <img src="../imgs/fs_icon.png" alt="" style="height:30px;">
- <div class="text-center">
- 风速<br><span class="text-yellow" id="weather1">0</span> m/s
- </div>
- </div>
- <div style="width:33.33%;height:33.33%;">
- <img src="../imgs/lx_icon.png" alt="" style="height:30px;">
- <div class="text-center">
- 流向<br><span class="text-yellow" id="weather5">0</span> °
- </div>
- </div>
- </div>
- </div>
- </div>
- <div class="yz_clm6">
- <div class="Sense">
- <div class="yz_title">AIS信息</div>
- <div style="height: calc(100% - 45px);color: #94d1ff;" class="flex">
- <div class="flex-sub">
- <div id="myChart1" style="height: calc(100% - 40px);"></div>
- <div class="text-center">
- 航速:<span class="text-yellow text-bold text-xl" id="_hs">0</span> 节
- </div>
- </div>
- <div class="flex-sub">
- <div id="myChart2" style="height: calc(100% - 40px);"></div>
- <div class="text-center">
- 航向:<span class="text-yellow text-bold text-xl" id="_csx">0</span> 度
- </div>
- </div>
- <div class="flex-sub">
- <div id="myChart3" style="height: calc(100% - 40px);"></div>
- <div class="text-center">
- <div>船艏向:<span class="text-yellow text-bold text-xl" id="_cjx">0</span> 度</div>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div class="yz_clm3">
- <div class="Sense">
- <div class="yz_title">吃水信息</div>
- <div style="height: calc(100% - 45px);color: #94d1ff;">
- <div class="flex align-center justify-center _Cc" style="height: 100%;font-size: 0.9vw;">
- <div class="flex align-center flex-sub">
- <img src="../imgs/ship_cs.png" alt="" style="width:90px;">
- <div class="text-center" style="margin: 33px 0 0 10px;">
- 测深<br><span class="text-yellow _ces">0</span> m
- </div>
- </div>
- <div class="flex-sub text-center">
- <div>艏:<br><span class="text-yellow" id="_csc">0</span>m</div>
- <div class="flex align-center justify-center">
- <div>左中:<br><span class="text-yellow" id="_czc">0</span>m</div>
- <img src="../imgs/ship_tblr.png" style="height:120px;margin: 10px;">
- <div>右中:<br><span class="text-yellow" id="_cyc">0</span>m</div>
- </div>
- <div>艉:<br><span class="text-yellow" id="_cwc">0</span>m</div>
- </div>
- </div>
- <div class="flex align-center justify-center _Cs" style="height: 100%;">
- <img src="../imgs/ship_cs.png" alt="" style="width:120px;">
- <div class="text-center" style="margin: 33px 0 0 10px;">
- 测深<br><span class="text-yellow _ces">0</span> m
- </div>
- </div>
- </div>
- </div>
- </div>
- <div class="yz_clm3">
- <div class="Sense">
- <div class="yz_title">转速信息</div>
- <div id="myChart4" style="height: calc(100% - 80px);"></div>
- <div class="text-center margin-top-sm" style="color: #94d1ff;">
- <div>主机转速:<span class="text-yellow text-bold text-xl" id="_zjzs">0</span> RPM</div>
- </div>
- </div>
- </div>
- <div class="yz_clm6">
- <div class="Sense padding-sm" style="position: relative;">
- <div id="container" style="width: 100%;height: 100%;"></div>
- <div class="nowShip">
- <div class="map_title">瑞高热情</div>
- <div class="padding-sm map_info">
- <div><div>经度:</div><div id="gps_lon">000.0000</div></div>
- <div><div>纬度:</div><div id="gps_lat">000.0000</div></div>
- <div><div>状态:</div><div id="sailing">在航</div></div>
- <div><div>时间:</div><div id="nowtime">2022-01-01 00:00:00</div></div>
- <div><div>地址:</div><div style="font-size: 0.7vw;" id="gps_pos"></div></div>
- </div>
- </div>
- </div>
- </div>
- <div class="yz_clm3">
- <div class="Sense">
- <div class="yz_title">发电机</div>
- <div class="flex text-center align-center justify-center padding-lr" style="height: calc(100% - 40px);font-size: 0.8vw;">
- <div class="flex-sub engine1">
- <div>转速:</div>
- <div class="margin-tb-xs"><span>0</span>RPM</div>
- <div>1#发电机</div>
- </div>
- <div class="flex-sub engine2">
- <div>转速:</div>
- <div class="margin-tb-xs"><span>0</span>RPM</div>
- <div>2#发电机</div>
- </div>
- <div class="flex-sub engine3">
- <div>转速:</div>
- <div class="margin-tb-xs"><span>0</span>RPM</div>
- <div>3#发电机</div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </body>
- <script>
- var _Tok = JSON.parse(localStorage.getItem("_yz_TT")).yzTok;
- var CabEng = [],timeId = null;
- var nowMaker = {};
- var nowSn = null;
- var shipLi = [];
- var map = new AMap.Map('container', {
- center: [118.616808,31.942308],
- zoom:5,
- });
- var smallSre = false;
- map.setFeatures(['bg', 'point', 'building'])
- var myChart1 = echarts.init(document.getElementById('myChart1'));
- var myChart2 = echarts.init(document.getElementById('myChart2'));
- var myChart3 = echarts.init(document.getElementById('myChart3'));
- var myChart4 = echarts.init(document.getElementById('myChart4'));
- function setoption1(num,txt,max){
- let _num = isNaN(Number(num,10))?0:num;
- $(txt).text(((max == 1500&&num>3000)?"--":num));
- option = {
- series: [
- {
- name: '实时数据',
- min: 0,
- max: max,
- splitNumber:10,
- type: 'gauge',
- fontSize: 13,
- center: ['50%', '55%'],
- radius: max == 20?'90%':'100%',
- detail: {show:false },
- data: [{value: ((max == 1500&&_num>3000)?0:_num) }],
- axisLine: {
- lineStyle: {
- color: [[0.09, 'lime'], [0.82, '#1e90ff'], [1, '#ff4500']],
- width: 5
- }
- },
- axisTick: {
- distance: 4,//9
- },
- pointer: {
- width:5,
- length:"50%"
- },
- axisLabel:{
- distance:10,
- textStyle: {
- color: '#fff',
- fontSize: (smallSre?6:9)
- }
- },
- splitLine: {
- distance: 4,
- length: 10,
- lineStyle: {
- width: 1,
- color: '#fff'
- }
- },
- title: {
- textStyle: {
- color: '#fff',
- }
- },
- }
- ]
- };
- return option;
- }
- function setoption2(ship_s,txt){
- $(txt).text(ship_s);
- option = {
- series: [
- {
- name: '实时数据',
- min: 0,
- max: 360,
- splitNumber:12,
- type: 'gauge',
- fontSize: 0,
- center: ['50%', '55%'],
- radius: '90%',
- startAngle:90,
- endAngle: -269.999999,
- detail: {show:false
- },
- axisTick: {
- distance: 2,
- },
- data: [{value: ship_s}],
- axisLine: {
- lineStyle: {
- color: [[1, '#1e90ff']],
- width: 5,
- },
-
- },
- axisLabel:{
- textStyle: {
- color: '#fff',
- fontSize: smallSre?6:9
- },
- distance: 7,
- 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:5,
- length:"60%",
- },
- splitLine: {
- distance: 2,
- length: 10,
- lineStyle: {
- width: 1,
- color: '#fff',
- }
- },
- title: {
- textStyle: {
- color: '#fff',
- }
- },
- }
- ]
- };
- return option;
- }
- window.addEventListener('message',(data)=>{
- initF();
- })
- $(document).ready(function() {
- smallSre = window.innerWidth < 1442;
- initF();
- })
- function initF(){
- nowSn = localStorage.getItem("shipSn");
- let nowTime = changeDays(0,new Date());
- $("#_time").text(parseInt(nowTime[3])<9?"08:00:00":(parseInt(nowTime[3])<15?"14:00:00":"20:00:00"));
- $("#_year").text(nowTime[1]);
- $("#_week").text(nowTime[2]);
- CabEng = Config((nowSn == "381001400"||nowSn == "480000618"?"381001400":"382001400"),nowSn)["Cab"];
- firstList(0);
- // clearInterval(timeId);
- // timeId = setInterval(()=>{
- // firstList(1);
- // },60*1000)
- $("._Cc").css("display",CabEng[5]);
- $("._Cs").css("display",CabEng[4]);
- }
- $(window).resize(function(){
- smallSre = window.innerWidth < 1442;
- myChart1.resize();
- myChart2.resize();
- myChart3.resize();
- myChart4.resize();
- })
- function firstList(_num){
- if(_num == 0){yzkj.load("load1")};
- setTimeout(()=>{
- deviceList(function acb(_data){
- shipLi = _data;
- let _obj = {
- icon: "../imgs/ship.png",
- prod: shipLi.iboatName,
- addr: "获取位置失败",
- sn: shipLi.sn,
- sound: shipLi["0aS"],
- head: shipLi["0aA1"],
- sail: shipLi["0a3"],
- time: shipLi.time,
- "_ponew": shipLi.posit
- };
- nowMaker = _obj;
- setVal(shipLi)
- $("#endTime").text(_data["time"])
- initMap([nowMaker],"oneShip");
- ajaxWeather($("#_year").text().replace("年","-").replace("月","-").replace("日","")+" "+$("#_time").text());
- if(_num == 0){yzkj.closeLoad("load1");}
- if(_data.mmsi==undefined){
- setTimeout(()=>{
- firstList(1);
- },180*1000)
- }
- })
- },100)
- }
- function setVal(_data){
- myChart1.setOption(setoption1(_data["0a9"],"#_hs",20));
- myChart3.setOption(setoption2(_data["0a8"]<0?256.4:_data["0a8"],"#_cjx"));
- myChart2.setOption(setoption2(_data["0aA1"]<0?65.0:_data["0aA1"],"#_csx"));
- myChart4.setOption(setoption1(_data[CabEng[0]],"#_zjzs",1500));
- $("._ces").text(_data["0aS"]!= undefined?(_data["0aS"]):0);
- $("#_csc").text(_data["0ag"]!= undefined?_data["0ag"]:0);
- $("#_czc").text(_data["0ai"]!= undefined?_data["0ai"]:0);
- $("#_cyc").text(_data["0aj"]!= undefined?_data["0aj"]:0);
- $("#_cwc").text(_data["0ah"]!= undefined?_data["0ah"]:0);
- $(".engine1").css("background-color",_data[CabEng[1]] != undefined&&_data[CabEng[1]] != 0&&!isNaN(Number(_data[CabEng[1]],10))?"#39ba48":"#787878");
- $(".engine1 span").text(_data[CabEng[1]]);
- $(".engine2").css("background-color",_data[CabEng[2]] != undefined&&_data[CabEng[2]] != 0&&!isNaN(Number(_data[CabEng[2]],10))?"#39ba48":"#787878");
- $(".engine2 span").text(_data[CabEng[2]]);
- $(".engine3").css("background-color",_data[CabEng[3]] != undefined&&_data[CabEng[3]] != 0&&!isNaN(Number(_data[CabEng[3]],10))?"#39ba48":"#787878");
- $(".engine3 span").text(_data[CabEng[3]]);
- }
- function ajaxWeather(_time){
- getWeather({
- _Tok: _Tok,
- nowSn: nowSn,
- _time: _time,
- posi: nowMaker._ponew
- })
- }
- function changeDate(_num){
- let _time = parseInt($("#_time").text());
- let _year = $("#_year").text().replace("年","-").replace("月","-").replace("日","");
- let _week = $("#_week").text();
- let _newAjax = "";
- if(_num == -1){
- if(_time < 9){
- let _newYW = changeDays(-1,_year);
- $("#_time").text("20:00:00");
- $("#_year").text(_newYW[1]);
- $("#_week").text(_newYW[2]);
- _newAjax = _newYW[0] + " 20:00:00";
- }else if(_time>8&&_time<15){
- $("#_time").text("08:00:00");
- _newAjax = _year + " 08:00:00";
- }else if(_time>14){
- $("#_time").text("14:00:00");
- _newAjax = _year + " 14:00:00";
- }
- }else{
- if(_time < 9){
- $("#_time").text("14:00:00");
- _newAjax = _year + " 14:00:00";
- }else if(_time>8&&_time<15){
- $("#_time").text("20:00:00");
- _newAjax = _year + " 20:00:00";
- }else if(_time>14){
- let _newYW = changeDays(1,_year);
- $("#_time").text("08:00:00");
- $("#_year").text(_newYW[1]);
- $("#_week").text(_newYW[2]);
- _newAjax = _newYW[0] + " 08:00:00";
- }
- }
- ajaxWeather(_newAjax);
- }
-
- </script>
- </html>
|