123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217 |
- <!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" 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 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/caht.js?id='+(new Date().getTime())+'" type="text/javascript" charset="utf-8"><\/script>');
- </script>
- <script>
- checkLogin();
- </script>
- <style type="text/css">
- body {
- height: 100vh;
- background-color: #103151;
- }
- .yz-fluid,iframe{
- width: 100%;
- height: 100%;
- padding: 0;
- }
- .footer_yz {
- position: fixed;
- bottom: 0;
- left: 0;
- height: 50px;
- width: 100%;
- z-index: 444;
- font-size: 12px;
- color: #dddddd;
- text-align: center;
- background-color: #173862;
- }
- .yzkj_sider{
- position: absolute;
- left: -150px;
- top: 40px;
- bottom:50px;
- z-index: 444;
- width: 150px;
- padding: 6px;
- background-color: #103151;
- }
- .yzkj_sider .icon-chuanbo{
- margin-right: 6px;
- }
- .search_ input{
- height: 30px;
- line-height: 30px;
- }
- .search_ .icon-sousuo{
- top: 7px;
- }
- .iboatLi li{
- padding:6px 0;
- }
- .iboatLi li .text-sm.act{
- color:#0081ff;
- }
- .drog{
- position: absolute;
- right: -2px;
- top: -7px;
- font-size: 16px;
- color: #00dd00;
- display: none;
- }
- </style>
- </head>
- <body>
- <div class="yz-fluid" style="position: relative;">
- <div class="layui-body" style="height: calc(100% - 50px);">
- <iframe src="./Phone/Home.html" id="isem-iframe" frameborder="0" class="isem-iframe"></iframe>
- </div>
- <div class="footer_yz flex justify-around align-center">
- <div class="tabli0" onclick="changeInd(0)">
- <div><img src="../imgs/home_active.png" alt="" style="width: 20px;height: 20px;"></div>
- <div>首页</div>
- </div>
- <div class="tabli3" onclick="changeInd(3)">
- <div><img src="../imgs/home_active.png" alt="" style="width: 20px;height: 20px;"></div>
- <div>AI监控</div>
- </div>
- <div class="tabli2" style="position: relative;" onclick="changeInd(2)">
- <i class="drog">●</i>
- <div><img src="../imgs/chat.png" alt="" style="width: 20px;height: 20px;"></div>
- <div>易聊</div>
- </div>
- <div class="tabli1" onclick="changeInd(1)">
- <div><img src="../imgs/user.png" alt="" style="width: 20px;height: 20px;"></div>
- <div>我的</div>
- </div>
- </div>
- <div class="yzkj_sider">
- <div class="search_">
- <i class="iconfont icon-sousuo"></i>
- <input class="layui-input search" autocomplete="off" placeholder="">
- </div>
- <div style="height: calc(100% - 40px);">
- <ul class="padding-xs iboatLi">
-
- </ul>
- </div>
- </div>
- </div>
- </body>
- <script src="../js/yz/mqttws31.js" type="text/javascript" charset="utf-8"></script>
- <script src="../js/yz/sendMag.js" type="text/javascript" charset="utf-8"></script>
- <script>
- var tabLi = [{
- "src": "home",
- "url": "./Phone/Home.html"
- }, {
- "src": "user",
- "url": "./Phone/User.html"
- }, {
- "src": "chat",
- "url": "./Phone/ChatLi.html"
- }, {
- "src": "chat",
- "url": "./Phone/VideoPh.html"
- }];
- var selectLi = [];
- var nowSn= null;
- window.addEventListener('message',(data)=>{
- nowSn = data.data.sn;
- $(".iboatLi li .text-sm").removeClass("act");
- $(".iboatLi li[data-id='"+nowSn+"'] .text-sm").addClass("act");
- $(".yzkj_sider").css({"left":"-150px","transition":"left 300ms linear"});
- })
- $(document).ready(function() {
- var url_id2 = window.location.search;
- var Pid = url_id2.split("=")[1];
-
- changeInd(Pid);
- checkTU();
- sendMsg("mainPh");
- });
- function checkTU(){
- var accTok = JSON.parse(localStorage.getItem("_yz_TU"));
- if(accTok!=null&&accTok!="null"){
- getNoReady("mainPh");
- firstList()
- }else{
- getUser();
- }
- }
- function changeInd(tabCur) {
- $(".yzkj_sider").css({"left":"-150px","transition":"left 300ms linear"});
- for (var i = 0; i < tabLi.length; i++) {
- if (tabCur == i) {
- $(".tabli" + i).css("color", "#F19600");
- $(".tabli" + i + " img").attr("src", "../imgs/" + tabLi[i].src + "_active.png");
- } else {
- $(".tabli" + i).css("color", "#ddd");
- $(".tabli" + i + " img").attr("src", "../imgs/" + tabLi[i].src + ".png");
- }
- }
- document.getElementById("isem-iframe").src = tabLi[tabCur].url;
- }
- function changeProd() {
- let _src = document.getElementById("isem-iframe").src.split("view/")[1];
- document.getElementById("isem-iframe").src = "./" + _src;
- }
- function firstList(){
- // deviceList(function acb(_data){
- shipLi = ShipData();
- nowSn = localStorage.getItem("shipSn");
- if(nowSn != null&&nowSn != "null"){
-
- }else{
- nowSn = shipLi[0].sn;
- }
- let _dd="";
- for(var i=0;i<shipLi.length;i++){
- _dd+=`<li class="flex align-start ${shipLi[i].state==0?'text-rgb':'text-blue'}"
- data-id="${shipLi[i].sn}">
- <div class="iconfont icon-chuanbo"></div>
- <div class="text-sm ${shipLi[i].state==0?'text-rgb':'text-white'}">${shipLi[i].prod}</div>
- </li>`
- }
- $(".iboatLi").html(_dd);
- $(".iboatLi li[data-id='"+nowSn+"'] .text-sm").addClass("act");
- // })
- }
- $(document).on("click",".iboatLi li",function(){
- nowSn = $(this).data("id");
- let _src=document.getElementById("isem-iframe");
- _src.contentWindow.postMessage(nowSn,"*");
- localStorage.setItem("shipSn",nowSn);
- $(".iboatLi li .text-sm").removeClass("act");
- $(".iboatLi li[data-id='"+nowSn+"'] .text-sm").addClass("act");
- $(".yzkj_sider").css({"left":"-150px","transition":"left 300ms linear"});
- })
- function changeShow(_px){
- $(".yzkj_sider").css({"left":_px,"transition":"left 300ms linear"});
- }
- </script>
- </html>
|