123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336 |
- <!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">
- <link rel="stylesheet" href="../css/main.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 src="https://webapi.amap.com/maps?v=1.4.15&key=4b08f8896f0b6460b46148e2552e3c1f&plugin=AMap.Geocoder&plugin=AMap.Scale"></script>
- <script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
- </head>
- <body>
- <div id="app" :style="'font-size:'+fontS+'px;width:1920px;height:1080px;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%;"></div>
- </div>
- <div class="flex align-center justify-center" style="width: 49.5%;">
- <div class="spTit">船龄</div>
- <div id="myChart3" style="width: 100%;"></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 10" :key="index">
- <div class="flex-sub">{{index+1}}</div>
- <div class="flex-twice">{{shipLi[index].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%;"></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.prod}}</li>
- </ul>
- </div>
- <!-- <el-select v-model="nowTab.mmsi" placeholder="请选择" @change="changeSn">
- <el-option
- v-for="item in shipLi"
- :key="item.mmsi"
- :label="item.prod"
- :value="item.mmsi">
- </el-option>
- </el-select> -->
- </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.status}}</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);'">{{addRess}}</div>
- </div>
- </div>
- </div>
- <div id="areaMap" :style="'width: 100%;height: 100%;'"></div>
- </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 - 10px);padding:'+gutter+'px;margin:'+gutter+'px 0;'">
- <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 - 4)+'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 - 10px);padding:'+gutter+'px '+gutter*2+'px;margin:'+gutter+'px 0;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);margin-top:'+gutter+'px;'" class="modelBg">
- <div class="flex justify-center" :style="'font-size:'+fontS*0.9+'px;'">
- <div class="tabBg" ref="tabbar" :class="tabBar == 0?'act':''" @click="changeTab(0)"
- :style="'padding:'+gutter+'px '+gutter*3.3+'px '+gutter+'px '+gutter*12+'px'">关键数据</div>
- <div class="tabBg tabCen" :class="tabBar == 1?'act':''" @click="changeTab(1)"
- :style="'padding:'+gutter+'px '+gutter*3.3+'px;margin:0 '+gutter*0.2+'px;'">主机</div>
- <div class="tabBg tabCen" :class="tabBar == 2?'act':''" @click="changeTab(2)"
- :style="'padding:'+gutter+'px '+gutter*3.3+'px;'">发电机</div>
- <div class="tabBg tabLef" :class="tabBar == 3?'act':''" @click="changeTab(3)"
- :style="'padding:'+gutter+'px '+gutter*12+'px '+gutter+'px '+gutter*3.3+'px;margin-left:'+gutter*0.2+'px;'">综合报警</div>
- </div>
- <div class="flex align-center text-center" v-show="tabBar == 0"
- :style="'height: calc(100% - '+tabBh+'px);color:#94d1ff;font-size:'+fontS*0.9+'px;'">
- <div class="flex-sub">
- <div id="myChart4" style="width: 100%;height:100%;"></div>
- <div><span class="aisNum" :style="'font-size:'+fontS*1.1+'px;'">{{nowTab.sog}}</span> 节</div>
- <div>航速</div>
- </div>
- <div class="flex-sub">
- <div id="myChart5" style="width: 100%;height:100%;"></div>
- <div><span class="aisNum" :style="'font-size:'+fontS*1.1+'px;'">{{nowTab.hdg == 51100?'0.0':(nowTab.hdg/100)}}</span> 度</div>
- <div>船艏向</div>
- </div>
- <div class="flex-sub">
- <div id="myChart6" style="width: 100%;height:100%;"></div>
- <div><span class="aisNum" :style="'font-size:'+fontS*1.1+'px;'">{{nowTab.cog/100}}</span> 度</div>
- <div>船迹向</div>
- </div>
- <div class="flex-sub">
- <div class="flex align-center justify-center" :style="'height:'+(gutter*30)+'px;'"><el-image style="width: 90%;" src="../img/shipWhei.png" fit="fit"></el-image></div>
- <div><span class="aisNum" :style="'font-size:'+fontS*1.1+'px;'">{{nowTab.draught/1000}}</span> 米</div>
- <div>吃水</div>
- </div>
- </div>
-
- <div class="flex text-center text-cyan" v-show="tabBar == 1"
- :style="'height: calc(100% - '+tabBh+'px);font-size:'+fontS*0.8+'px;'">
- <div class="flex-sub" :style="'padding:'+gutter+'px;'" v-for="(item,index) in 2" :key="index">
- <div class="flex justify-between align-center">
- <div>{{index == 0?'左':'右'}}主机</div><div>运行时间:<span class="aisNum">0</span> H</div>
- </div>
- <div :style="'height: calc(100% - '+gutter*4+'px);font-size:'+fontS*0.7+'px;'">
- <div style="height: 52%;" class="flex align-center">
- <div class="flex-sub">
- <div :id="'myChart7'+index" style="width: 100%;height:100px;"></div>
- <div :style="'margin-top: -'+gutter*2+'px;'">
- <div><span class="aisNum">120</span>rpm</div>
- <div>转速</div>
- </div>
- </div>
- <div class="flex-sub">
- <div :id="'myChart8'+index" style="width: 100%;height:100px;"></div>
- <div :style="'margin-top: -'+gutter*2+'px;'">
- <div><span class="aisNum">20</span>kPa</div>
- <div>润滑油压力</div>
- </div>
- </div>
- <div class="flex-sub" :style="'padding-top:'+(gutter*2.3)+'px;'">
- <div class="flex justify-center">
- <div class="Range" :style="'height:'+(gutter*10.4)+'px;'">
- <span>110</span>
- <span>74</span>
- <span>37</span>
- <span>0</span>
- </div>
- <div class="Battery" :style="'margin-left: '+(gutter*0.33)+'px;width:'+(gutter*6)+'px;height:'+(gutter*10.4)+'px;'">
- <img src="../img/diancBg.png" style="height: 100%;" alt="">
- <div style="height: 14%;" :style="'bottom:'+(gutter*0.8)+'px;left:'+(gutter*0.8)+'px;width: calc(100% - '+(gutter*1.6)+'px);border-radius: '+(gutter*0.4)+'px;'"></div>
- </div>
- </div>
- <div class="margin-top-xs text-white"> <span class="aisNum">68</span>℃</div>
- <div>电瓶电压</div>
- </div>
- </div>
- <div class="flex justify-around align-center" style="height: 48%;">
- <div class="text-center" :style="'width: 25%;font-size:'+fontS*0.7+'px;'" v-for="(item,index) in 4" :key="index">
- <div class="flex align-center justify-center">
- <div :style="'height: '+(gutter*10)+'px;'"
- class="flex flex-direction justify-between text-grey align-end">
- <span>150</span>
- <span>100</span>
- <span>50</span>
- <span>0</span>
- </div>
- <div class="temBox" :style="'width: '+(gutter*6)+'px;height: '+(gutter*10)+'px;margin-left: '+(gutter*0.33)+'px;'"></div>
- </div>
- <div class="margin-top-xs text-white"> <span class="aisNum">68</span>℃</div>
- <div>{{index == 0?'润滑油':(index==1?'冷却液':(index==2?'环境温度':'排气温度'))}}</div>
- </div>
- </div>
- </div>
- </div>
-
- </div>
- <div class="flex text-center text-cyan" v-show="tabBar == 2"
- :style="'height: calc(100% - '+tabBh+'px);font-size:'+fontS*0.8+'px;'">
- <div class="flex-sub" :style="'padding:'+gutter+'px;'" v-for="(item,index) in 2" :key="index">
- <div class="flex justify-between align-center">
- <div>{{index+1}}#</div><div>运行时间:<span class="aisNum">0</span> H</div>
- </div>
- <div :style="'height: calc(100% - '+gutter*4+'px);font-size:'+fontS*0.7+'px;'">
- <div style="height: 52%;" class="flex align-center">
- <div class="flex-sub">
- <div :id="'myChart9'+index" style="width: 100%;height:100px;"></div>
- <div :style="'margin-top: -'+gutter*2+'px;'">
- <div><span class="aisNum">120</span>rpm</div>
- <div>转速</div>
- </div>
- </div>
- <div class="flex-sub">
- <div :id="'myChart0'+index" style="width: 100%;height:100px;"></div>
- <div :style="'margin-top: -'+gutter*2+'px;'">
- <div><span class="aisNum">20</span>kPa</div>
- <div>润滑油压力</div>
- </div>
- </div>
-
- </div>
- <div class="flex justify-around" style="height: 48%;">
- <div class="flex-sub">
- <div class="flex justify-center align-center">
- <div class="Range" :style="'height:'+(gutter*10.4)+'px;'">
- <span>110</span>
- <span>74</span>
- <span>37</span>
- <span>0</span>
- </div>
- <div class="Battery" :style="'margin-left: '+(gutter*0.33)+'px;width:'+(gutter*6)+'px;height:'+(gutter*10.4)+'px;'">
- <img src="../img/diancBg.png" style="height: 100%;" alt="">
- <div style="height: 14%;" :style="'bottom:'+(gutter*0.8)+'px;left:'+(gutter*0.8)+'px;width: calc(100% - '+(gutter*1.6)+'px);border-radius: '+(gutter*0.4)+'px;'"></div>
- </div>
- </div>
- <div class="margin-top-xs text-white"> <span class="aisNum">68</span>℃</div>
- <div>电瓶电压</div>
- </div>
- <div class="text-center" :style="'width: 33.33%;'" v-for="(item,index) in 2" :key="index">
- <div class="flex align-center justify-center">
- <div :style="'height: '+(gutter*10)+'px;'"
- class="flex flex-direction justify-between text-grey align-end">
- <span>150</span>
- <span>100</span>
- <span>50</span>
- <span>0</span>
- </div>
- <div class="temBox" :style="'width: '+(gutter*6)+'px;height: '+(gutter*10)+'px;margin-left: '+(gutter*0.33)+'px;'"></div>
- </div>
- <div class="margin-top-xs text-white"> <span class="aisNum">68</span>℃</div>
- <div>{{index == 0?'淡水':'滑油'}}</div>
- </div>
- </div>
- </div>
- </div>
-
- </div>
- <div class="flex flex-wrap text-center br_all" v-show="tabBar == 3"
- :style="'height: calc(100% - '+(tabBh+gutter*2)+'px);color:#eaeaea;margin:'+gutter+'px;overflow:auto;'">
- <div v-for="(item,index) in switLi" :key="index"
- :class="index%5 == 4?'br_b':'br_b br_r'"
- :style="'width: 20%;padding:'+gutter+'px;'">
- <div class="iconfont icon-cloud-state" :class="index == 14?'text-red':'text-grey'" :style="'font-size:'+fontS*1.2+'px;'"></div>
- <div class="text-grey" :style="'font-size:'+fontS*0.6+'px;'">{{item.name}}</div>
- </div>
- </div>
- </div>
- </div>
- </el-col>
- </el-row>
- </div>
- <script src="../js/main1.js"></script>
- </body>
- </html>
|