123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173 |
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <meta name="renderer" content="webkit">
- <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
- <meta http-equiv="pragma" 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/index.css">
- <link rel="stylesheet" href="../css/iconfont.css">
- <link rel="stylesheet" href="../css/style.css">
- <script src="../js/vue.min.js"></script>
- <script src="../js/index.js"></script>
- <script src="../js/jquery.min.js"></script>
- <script src="../js/shipData.js"></script>
- <script src="../js/echarts.js"></script>
- <script type="text/javascript">
- document.write('<link rel="stylesheet" href="../css/main.css?id='+(new Date().getTime())+'" />');
- </script>
- </head>
- <body>
- <div id="app" :style="'font-size:'+fontS+'px;overflow:auto;'">
- <el-image style="width: 100%;" src="../img/zhgTitle.png" id="headImg" @load="imgLoad" fit="fit"></el-image>
- <el-row :gutter="gutter" :style="'height: calc(100% - '+imgHei+'px - '+gutter+'px);'">
- <el-col class="elCol">
- <div class="grid-content" style="height: 100%;">
- <div style="height: 20%;">
- <div :style="'font-size:'+(fontS - 2)+'px;padding: 1% 0 '+(gutter*1.2)+'px '+(gutter*7)+'px;'" ref="titleDiv" class="tltleBg">船舶数量</div>
- <div class="shipCount" :style="'height: calc(100% - '+tabDiv+'px);font-size:'+(fontS*0.75)+'px;padding:'+gutter+'px;'">
- <div v-for="(item,index) in shipCount" :key="index">
- <div style="width: 40%;"><el-image style="width: 50%;" :src="item.icon" fit="fit"></el-image></div>
- <div style="width: 50%;">
- <div style="color: #2be4ff;">{{item.name}}</div>
- <div :style="'font-size: '+(fontS*1.4)+'px;font-weight:bold;color: #386eff;'">{{item.count}}</div>
- </div>
- </div>
- </div>
- </div>
- <div style="height: 26%;">
- <div :style="'font-size:'+(fontS -2)+'px;padding: 1% 0 '+(gutter*1.2)+'px '+(gutter*7)+'px;'" class="tltleBg">船舶船员统计</div>
- <div class="flex shipPeople justify-between"
- :style="'height: calc(100% - '+tabDiv+'px);font-size:'+(fontS*0.8)+'px;padding:'+gutter+'px;color:rgba(255,255,255,0.8)'">
- <div class="flex align-center justify-center" style="width: 49.5%;">
- <div class="spTit">船况</div>
- <div id="myChart2" style="width: 100%;height: 86%;"></div>
- </div>
- <div class="flex align-center justify-center" style="width: 49.5%;">
- <div class="spTit">船龄</div>
- <div id="myChart3" style="width: 100%;height: 86%;"></div>
- </div>
- </div>
- </div>
- <div style="height: 18%;">
- <div :style="'font-size:'+(fontS - 2)+'px;padding: 1% 0 '+(gutter*1.2)+'px '+(gutter*7)+'px;'" class="tltleBg">人数统计</div>
- <div class="shipCount" :style="'height: calc(100% - '+tabDiv+'px);font-size:'+(fontS*0.7)+'px;padding:'+gutter+'px;'">
- <div v-for="(item,index) in shipPeol" :key="index"
- style="flex-direction: column;justify-content: center;">
- <div :style="'font-size: '+(fontS*1.1)+'px;font-weight:bold;color: '+item.col">{{item.count}}</div>
- <div style="color: #2be4ff;">{{item.name}}</div>
- </div>
- </div>
- </div>
- <div style="height: 36%;">
- <div :style="'font-size:'+(fontS - 4)+'px;padding: 1% 0 '+(gutter*1.2)+'px '+(gutter*7)+'px;'" class="tltleBg">数据分析</div>
- <div class="flex justify-between" :style="'height: calc(100% - '+tabDiv+'px);font-size:'+(fontS*0.46)+'px;padding:'+(gutter*0.6)+'px;'">
- <div class="modelBg" style="overflow-y: auto;width: 49.5%;">
- <div class="flex align-center text-center" :style="'padding: '+gutter+'px;'">
- <div class="flex-sub">排行</div>
- <div class="flex-twice">船名</div>
- <div class="flex-twice">尺寸</div>
- <div class="flex-twice">运行里程</div>
- <div class="flex-twice">运行时长</div>
- </div>
- <div class="flex align-center text-center"
- :style="'padding: '+gutter+'px 0;color: '+(index==0?'#386eff':(index==1||index==2?'#2be4ff':''))"
- v-for="(item,index) in shipLi" :key="index">
- <div class="flex-sub">{{index+1}}</div>
- <div class="flex-twice">{{item.prod}}</div>
- <div class="flex-twice">30米级</div>
- <div class="flex-twice">200KM</div>
- <div class="flex-twice">200H</div>
- </div>
- </div>
- <div class="modelBg" :style="'padding:'+gutter+'px;width: 49.5%;'">
- <div ref="chartxt" :style="'font-size:'+(fontS*0.8)+'px;'">船舶数量变化</div>
- <div ref="charts" :style="'height: calc(100% - '+echTxt+'px);'">
- <div id="myChart1" style="width: 100%;height: 94%;"></div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </el-col>
- <el-col class="elColc">
- <div class="grid-content modelBg" :style="'height: 100%;padding: '+gutter+'px;position: relative;'">
- <div class="shipSel" :style="'font-size: '+(fontS*0.8)+'px;'">
- <div class="inpu" @click="selVis = !selVis"
- :style="'width: '+(gutter*30)+'px;padding:0 '+(gutter*2)+'px;height: '+(gutter*7)+'px;'">
- <span>{{nowTab.prod}}</span>
- <span class="el-icon-arrow-right" :class="selVis?'act':''"></span>
- </div>
- <div class="select-dropdown" v-if="selVis"
- :style="'top: calc(3% + '+(gutter*7)+'px);width: '+(gutter*30)+'px;max-height: '+(gutter*50)+'px;'">
- <ul>
- <li v-for="(item,index) in shipLi" :key="item.mmsi" @click="changeSn(item.mmsi)"
- :style="'padding: '+gutter+'px '+(gutter*2)+'px;'"
- class="select-item" :class="item.mmsi == nowTab.mmsi?'act':(item.status == 1?'':'text-grey')">
- {{item.prod}} - {{item.status == 1?'在线':'离线'}}
- </li>
- </ul>
- </div>
- </div>
- <div class="nowShip" :style="'width: '+(gutter*40)+'px;border-radius: '+(gutter*0.4)+'px;'">
- <div class="mapTitle" :style="'padding:'+(gutter)+'px '+(gutter*1.2)+'px;'">{{nowTab.prod}}</div>
- <div class="padding-sm mapInfo" :style="'font-size:'+fontS*0.8+'px'">
- <div :style="'padding:'+(gutter*0.8)+'px '+(gutter*1.2)+'px;'">
- <div :style="'width:'+(gutter*9)+'px;'">经度:</div>
- <div :style="'width:calc(100% - '+(gutter*9)+'px);'">{{nowTab.lon}}</div>
- </div>
- <div :style="'padding:'+(gutter*0.8)+'px '+(gutter*1.2)+'px;'">
- <div :style="'width:'+(gutter*9)+'px;'">纬度:</div>
- <div :style="'width:calc(100% - '+(gutter*9)+'px);'">{{nowTab.lat}}</div>
- </div>
- <div :style="'padding:'+(gutter*0.8)+'px '+(gutter*1.2)+'px;'">
- <div :style="'width:'+(gutter*9)+'px;'">航速:</div>
- <div :style="'width:calc(100% - '+(gutter*9)+'px);'">{{nowTab.speed}} km/h</div>
- </div>
- <div :style="'padding:'+(gutter*0.8)+'px '+(gutter*1.2)+'px;'">
- <div :style="'width:'+(gutter*9)+'px;'">地址:</div>
- <div :style="'width:calc(100% - '+(gutter*9)+'px);'">{{nowTab.addr}}</div>
- </div>
- </div>
- </div>
- <iframe src="./map.html" ref="mapView" frameborder="0"></iframe>
- </div>
- </el-col>
- <el-col class="elCol">
- <div class="grid-content" style="height: 100%;">
- <div style="height: 44%;" class="flex justify-between">
- <div style="width:59.5%;">
- <div :style="'font-size:'+(fontS - 2)+'px;padding: 1% 0 '+(gutter*1.2)+'px '+(gutter*7)+'px;'" class="tltleBg">实时视频</div>
- <div class="modelBg" :style="'height: calc(100% - '+tabDiv+'px - '+gutter+'px);padding:'+gutter+'px;margin-top:'+gutter+'px;'">
- <el-image style="width: 100%;height: 100%;" src="../img/novideo.png" fit="fit"></el-image>
- </div>
- </div>
- <div style="width:39.5%;">
- <div :style="'font-size:'+(fontS - 2)+'px;padding: 1% 0 '+(gutter*1.2)+'px '+(gutter*7)+'px;'" class="tltleBg">船舶动态</div>
- <div class="modelBg shipAis text-cyan"
- :style="'height: calc(100% - '+tabDiv+'px - '+gutter+'px);padding:'+gutter+'px '+gutter*2+'px;margin-top:'+gutter+'px;font-size:'+fontS*0.8+'px;'">
- <div>在船人数 <span :style="'margin:0 '+(gutter*2)+'px;'">3</span> 人</div>
- <div>实时航速 <span :style="'margin:0 '+(gutter*2)+'px;'">15</span> nm/h</div>
- <div>实时航向 <span :style="'margin:0 '+(gutter*2)+'px;'">120</span> 度</div>
- <div>累计工时 <span :style="'margin:0 '+(gutter*2)+'px;'">100</span> h</div>
- <div>累计里程 <span :style="'margin:0 '+(gutter*2)+'px;'">1000</span> nm</div>
- </div>
- </div>
- </div>
- <div :style="'height:calc(56% - '+gutter+'px);padding:0 '+gutter+'px '+gutter+'px;margin-top:'+gutter+'px;'" class="modelBg">
- <iframe src="./anglo.html" ref="angView" frameborder="0"></iframe>
- </div>
- </div>
- </el-col>
- </el-row>
- </div>
- <script type="text/javascript">
- document.write('<script src="../js/init.js?id='+(new Date().getTime())+'"><\/script>');
- document.write('<script src="../js/ajax.js?id='+(new Date().getTime())+'"><\/script>');
- document.write('<script src="../js/main.js?id='+(new Date().getTime())+'"><\/script>');
- </script>
- </body>
- </html>
|