123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183 |
- <!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">
- <link href="../ol/ol.css" rel="stylesheet"/>
- <script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
- <script src="../ol/ol.js"></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/ysy-mj456.js?id='+(new Date().getTime())+'" type="text/javascript" charset="utf-8"><\/script>');
- </script>
- <script>
- checkLogin();
- </script>
- </head>
- <style type="text/css">
- *{
- margin: 0;
- padding: 0;
- box-sizing: border-box;
- }
- body{
- height: 100vh;
- color:#000;
- overflow: hidden;
- }
- li{
- list-style: none;
- }
- ul li .act{
- color: #20a6ff !important;
- }
- .text-rgb{
- color: rgba(255,255,255,0.6);
- }
-
- .icon-chuanbo{
- font-size: 1.1rem;
- margin-right: 5px;
- }
- .pointBox{
- position: relative
- }
- .pointBox>.pointW{
- width: 17px;
- height: 17px;
- color: #000;
- cursor: pointer;
- text-align: center;
- border-radius: 17px;
- background-color: #fff;
- }
-
- .pointOut{
- position: relative;
- position: absolute;
- left: -6px;
- top: 28px;
- z-index: 4444;
- display: none;
- width: 235px;
- font-size: 12px;
- padding:10px;
- border-radius: 4px;
- background-color: #444;;
- }
- .pointOut::after{
- position: absolute;
- top: -10px;
- left:1px;
- content: "";
- width: 0px;
- height: 0px;
- z-index: 4444;
- border-bottom: 14px solid #444;
- border-left: 14px solid transparent;
- border-right: 14px solid transparent;
- border-radius: 4px;
- }
- .pointBox>.pointW:hover+.pointOut{
- display: block;
- }
- </style>
- <body>
- <div class="yz_container">
- <div class="yz_aside">
- <div class="padding-sm" style="height: 100%;">
- <div class="search_">
- <input type="text" name="" placeholder="船舶名称">
- <i class="iconfont icon-sousuo"></i>
- </div>
- <div class="padding-tb-sm text-bold flex justify-between">
- <div style="color: #5793f3;font-size: 15px;">船队列表</div>
- <div class="pointBox">
- <div class="pointW">?</div>
- <div class="pointOut">
- <div class="flex">
- <div class="iconfont icon-chuanbo text-blue">:</div>
- <div style="line-height: 20px;">
- <div>CCTV-有-在 && 智能船舶-有-在</div>
- <div>CCTV-有-在 && 智能船舶-无</div>
- <div>CCTV-无 && 智能船舶-有-在</div>
- </div>
- </div>
- <div class="flex margin-tb-sm">
- <div class="iconfont icon-chuanbo text-orange">:</div>
- <div style="line-height: 30px;">
- <div>CCTV-有-离 && 智能船舶-有-在</div>
- </div>
- </div>
- <div class="flex">
- <div class="iconfont icon-chuanbo text-green">:</div>
- <div style="line-height: 30px;">
- <div>CCTV-有-在 && 智能船舶-有-离</div>
- </div>
- </div>
- <div class="flex margin-tb-sm">
- <div class="iconfont icon-shipinjiankong text-grey">:</div>
- <div style="line-height: 30px;">
- <div>CCTV - 离线</div>
- </div>
- </div>
- <div class="flex">
- <div class="iconfont icon-shipinjiankong text-green">:</div>
- <div style="line-height: 30px;">
- <div>CCTV - 在线</div>
- </div>
- </div>
- <div class="flex margin-tb-sm">
- <div class="iconfont icon-baobiao text-grey">:</div>
- <div style="line-height: 30px;">
- <div>智能船舶 - 离线</div>
- </div>
- </div>
- <div class="flex">
- <div class="iconfont icon-baobiao text-green">:</div>
- <div style="line-height: 30px;">
- <div>智能船舶 - 在线</div>
- </div>
- </div>
- </div>
- </div>
- </div>
- <ul id="html_view" style="height:calc(100% - 70px);overflow-y: auto;">
- </ul>
- </div>
- </div>
- <div class="yz_main" 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="speed">0.00 km/h</div></div>
- <div><div>船艏向:</div><div id="head">0.00 °</div></div>
- <div><div>测深:</div><div id="sound">0.00 m</div></div>
- <div><div>时间:</div><div id="nowtime" class="text-sm">2022-01-01 00:00:00</div></div>
- <div><div>地址:</div><div style="font-size: 12px;" id="gps_pos"></div></div>
- </div>
- </div>
- </div>
- </div>
- <script src="../js/yz/map-a90jki.js" type="text/javascript" charset="utf-8"></script>
- </body>
- </html>
|