123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181 |
- <!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%;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 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%;height: 86%;"></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>
- </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);'">{{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: 34%;">
- <div :style="'font-size:'+(fontS - 2)+'px;padding: 1% 0 '+(gutter*1.2)+'px '+(gutter*7)+'px;'" class="tltleBg">实时视频</div>
- <div class="modelBg flex" :style="'height: calc(100% - '+tabDiv+'px - '+gutter+'px);padding:'+gutter+'px;margin:'+gutter+'px 0;position: relative;'">
- <div class="videoli" :style="'font-size:'+(fontS*0.6)+'px;width:'+vidWid+'px;'" v-if="vidWid != 0">
- <div :style="'padding:'+(gutter*0.6)+'px '+gutter+'px;'"
- v-for="(item,ind) in caremLi" :key="ind" @click="changCarm(item.cameraid)">
- <i class="iconfont icon-shexiangtou"
- :style="'margin-right:'+(gutter*0.8)+'px;color:'+(item.alive == 1?'#0068ff':'#afafaf')+';'"></i>
- <span :style="'color:'+((carmAct.cameraid == item.cameraid)?'#0068ff':(item.alive == 1?'':'#afafaf'))">{{item.name}}</span>
- </div>
- </div>
- <img :src="'../img/'+(vidWid>0?'left':'right')+'.png'" class="showimg"
- :style="'width:'+(gutter*2)+'px;left:'+(vidWid+gutter)+'px;'" @click="changeShow">
- <div :style="'width:calc(100% - '+(gutter+vidWid)+'px);height:100%;margin-left:'+gutter+'px;'">
- <video src="../img/vido.mp4" autoplay style="width: 100%;height: 100%;" controls loop></video>
- </div>
- </div>
- </div>
- <div :style="'height:calc(34% - '+gutter*2+'px);margin:'+gutter+'px 0;'" class="flex">
- <div class="flex-sub">
- <div :style="'font-size:'+(fontS - 2)+'px;padding: 1% 0 '+(gutter*1.2)+'px '+(gutter*7)+'px;'" class="tltleBg">周报警统计</div>
- <div class="modelBg flex align-center justify-center" :style="'height: calc(100% - '+tabDiv+'px - '+gutter+'px);padding:'+gutter+'px;margin-top:'+gutter+'px;'">
- <div id="myChart5" style="width: 100%;height: 50%;"></div>
- </div>
- </div>
- <div class="flex-sub" :style="'margin-left:'+gutter+'px;'">
- <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;'"></div>
- </div>
- </div>
- <div style="height:32%;">
- <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:'+gutter+'px 0;'">
- <div id="myChart4" style="width: 100%;height: 90%;"></div>
- </div>
- </div>
- </div>
- </el-col>
- </el-row>
- </div>
- <script src="../js/mainnew.js"></script>
- </body>
- </html>
|