123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453 |
- <!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/echarts.js"></script>
- </head>
- <body>
- <div id="angapp" style="height: 100vh;">
- <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 flex-wrap" v-show="tabBar == 0"
- :style="'height: calc(100% - '+tabBh+'px);color:#94d1ff;font-size:'+fontS*0.9+'px;'">
- <div style="width: 50%;height: 50%;">
- <div id="myChart4" style="height:70%;"></div>
- <div :style="'padding-top:'+gutter*2+'px;'"><span class="aisNum" :style="'font-size:'+fontS*1.1+'px;'">{{nowSn.speed}}</span> 节</div>
- <div>航速</div>
- </div>
- <div style="width: 50%;height: 50%;">
- <div id="myChart5" style="width: 100%;height:70%;"></div>
- <div :style="'padding-top:'+gutter*2+'px;'"><span class="aisNum" :style="'font-size:'+fontS*1.1+'px;'">{{0.0}}</span> 度</div>
- <div>船艏向</div>
- </div>
- <div style="width: 50%;height: 50%;">
- <div id="myChart6" style="width: 100%;height:70%;"></div>
- <div :style="'padding-top:'+gutter*2+'px;'"><span class="aisNum" :style="'font-size:'+fontS*1.1+'px;'">{{0.0}}</span> 度</div>
- <div>船迹向</div>
- </div>
- <div style="width: 50%;height: 50%;">
- <div class="flex align-center justify-center" :style="'height:70%;'"><el-image style="width: 60%;" src="../img/shipWhei.png" fit="fit"></el-image></div>
- <div :style="'padding-top:'+gutter*2+'px;'"><span class="aisNum" :style="'font-size:'+fontS*1.1+'px;'">{{0.0}}</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>{{index == 0?'左':'右'}}主机</div>
- <div :style="'height: calc(100% - '+gutter*4+'px);font-size:'+fontS*0.7+'px;'">
- <div style="height: 34%;" 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>
- <div :style="'height: 33%;padding-top:'+(gutter*2.3)+'px;'" class="flex align-center">
- <div class="flex-sub">
- <div :style="'height:'+(gutter*10.4)+'px;'"><img src="../img/time.png" style="height: 100%;"></div>
- <div class="margin-top-xs text-white"> <span class="aisNum">68</span>℃</div>
- <div>运行时间</div>
- </div>
- <div class="flex-sub">
- <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 class="flex-sub" :style="'font-size:'+fontS*0.7+'px;'">
- <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>排气温度</div>
- </div>
- </div>
- <div class="flex justify-around align-center" style="height: 33%;">
- <div class="text-center" :style="'width: 25%;font-size:'+fontS*0.7+'px;'" v-for="(item,index) in 3" :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?'冷却液':'环境温度')}}</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>{{index+1}}#</div>
- <div :style="'height: calc(100% - '+gutter*4+'px);font-size:'+fontS*0.7+'px;'">
- <div style="height: 34%;" 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 align-center justify-around" style="height: 33%;">
- <div class="flex-sub">
- <div :style="'height:'+(gutter*10.4)+'px;'"><img src="../img/time.png" style="height: 100%;"></div>
- <div class="margin-top-xs text-white"> <span class="aisNum">68</span>℃</div>
- <div>运行时间</div>
- </div>
- <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>
- <div class="flex align-center justify-around" style="height: 33%;">
- <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>
- <script src="../js/shipData.js"></script>
- <script>
- var myChart4, myChart5, myChart6, myChart70, myChart71, myChart80, myChart81, myChart90, myChart91, myChart00, myChart01;
- var _this, screenWidth, timeId;
-
- new Vue({
- el: '#angapp',
- data: function() {
- return {
- gutter: 5,
- fontS: 16,
- tabBar: 0,
- tabBh: 0,
- switLi: [],
- nowSn:{}
- }
- },
- created() {
- _this = this;
- _this.switLi = shipSwit;
- },
- mounted() {
- window.addEventListener('message',(res)=>{
- if(res.data.nowSn != undefined){
- _this.nowSn = res.data.nowSn;
- if(res.data.type != "changsn"){
- _this.gutter = res.data.gutter;
- _this.fontS = res.data.fontS;
- }
- }
- })
- this.$nextTick(() => {
- myChart4 = echarts.init(document.getElementById("myChart4"));
- myChart5 = echarts.init(document.getElementById("myChart5"));
- myChart6 = echarts.init(document.getElementById("myChart6"));
- myChart70 = echarts.init(document.getElementById("myChart70"));
- myChart80 = echarts.init(document.getElementById("myChart80"));
- myChart71 = echarts.init(document.getElementById("myChart71"));
- myChart81 = echarts.init(document.getElementById("myChart81"));
- myChart90 = echarts.init(document.getElementById("myChart90"));
- myChart91 = echarts.init(document.getElementById("myChart91"));
- myChart00 = echarts.init(document.getElementById("myChart00"));
- myChart01 = echarts.init(document.getElementById("myChart01"));
- _this.tabBh = _this.$refs.tabbar.offsetHeight;
- _this.setEchart();
- });
- window.onresize = () => {
- myChart4.resize();
- myChart5.resize();
- myChart6.resize();
- myChart70.resize();
- myChart80.resize();
- myChart81.resize();
- myChart71.resize();
- myChart90.resize();
- myChart91.resize();
- myChart00.resize();
- myChart01.resize();
- }
-
- },
- methods: {
- setEchart() {
- this.$nextTick(() => {
- myChart4.setOption(_this.setOption3(0, 20));
- myChart5.setOption(_this.setOption4(0.0));
- myChart6.setOption(_this.setOption4(0.0));
- myChart70.setOption(_this.setOption3(10, 3000));
- myChart80.setOption(_this.setOption3(10, 1500));
- myChart71.setOption(_this.setOption3(10, 3000));
- myChart81.setOption(_this.setOption3(10, 1500));
- myChart90.setOption(_this.setOption3(10, 3000));
- myChart00.setOption(_this.setOption3(10, 1500));
- myChart01.setOption(_this.setOption3(10, 3000));
- myChart91.setOption(_this.setOption3(10, 1500));
- myChart4.resize();
- myChart5.resize();
- myChart6.resize();
- myChart70.resize();
- myChart80.resize();
- myChart81.resize();
- myChart71.resize();
- myChart90.resize();
- myChart91.resize();
- myChart00.resize();
- myChart01.resize();
- })
- },
- changeTab(ind) {
- _this.tabBar = ind;
- _this.setEchart();
- },
- setOption3(num, max) {
- option = {
- series: [{
- name: '实时数据',
- min: 0,
- max: max,
- splitNumber: 10,
- type: 'gauge',
- center: ['50%', '50%'],
- radius: '80%',
- detail: {
- show: false,
- },
- data: [{
- value: num
- }],
- axisLine: {
- lineStyle: {
- color: [
- [0.09, 'lime'],
- [0.82, '#1e90ff'],
- [1, '#ff4500']
- ],
- width: ((_this.fontS > 16) ? (_this.gutter * 0.7) : 5) + ''
- }
- },
- axisTick: {
- distance: ((_this.fontS > 16) ? (_this.gutter * 0.7) : 5),
- length: _this.gutter * 0.8,
- },
- pointer: {
- width: ((_this.fontS > 16) ? (_this.gutter * 0.7) : 5),
- length: "60%",
- },
- splitLine: {
- distance: ((_this.fontS > 16) ? (_this.gutter * 0.7) : 5),
- length: ((_this.fontS > 16) ? _this.gutter : 6),
- lineStyle: {
- width: ((_this.fontS > 16) ? (_this.gutter * 0.2) : 2),
- color: '#fff',
- }
- },
- axisLabel: {
- textStyle: {
- color: '#fff',
- fontSize: ((_this.fontS > 16) ? (max == 20?_this.fontS * 0.6:_this.fontS * 0.2) : 10) + '',
- },
- distance: _this.gutter*0.5
- },
-
- title: {
- textStyle: {
- color: '#fff',
- }
- },
- }]
- };
- return option;
- },
- setOption4(num) {
- option = {
- series: [{
- name: '实时数据',
- min: 0,
- max: 360,
- splitNumber: 12,
- type: 'gauge',
- fontSize: 0,
- center: ['50%', '50%'],
- radius: '80%',
- startAngle: 90,
- endAngle: -269.999999,
- detail: {
- show: false
- },
- axisTick: {
- distance: ((_this.fontS > 16) ? (_this.gutter * 0.7) : 5),
- length: _this.gutter * 0.8,
- },
- data: [{
- value: num
- }],
- axisLine: {
- lineStyle: {
- color: [
- [1, '#1e90ff']
- ],
- width: ((_this.fontS > 16) ? (_this.gutter * 0.7) : 5) + ''
- },
-
- },
- axisLabel: {
- textStyle: {
- color: '#fff',
- fontSize: ((_this.fontS > 16) ? (_this.fontS * 0.5) : 10) + '',
- },
- distance: _this.gutter,
- formatter: function(e) {
- switch (e + "") {
- case "0":
- return "0";
- case "30":
- return "30";
- case "60":
- return "60";
- case "90":
- return "90";
- case "120":
- return "120";
- case "150":
- return "150";
- case "180":
- return "180";
- case "210":
- return "210";
- case "240":
- return "240";
- case "270":
- return "270";
- case "300":
- return "300";
- case "330":
- return "330";
- default:
- return "";
- }
- }
- },
- pointer: {
- width: ((_this.fontS > 16) ? (_this.gutter * 0.7) : 5),
- length: "60%",
- },
- splitLine: {
- distance: ((_this.fontS > 16) ? (_this.gutter * 0.5) : 5),
- length: ((_this.fontS > 16) ? _this.gutter : 6),
- lineStyle: {
- width: ((_this.fontS > 16) ? (_this.gutter * 0.2) : 2),
- color: '#fff',
- }
- },
- title: {
- textStyle: {
- color: '#fff',
- }
- },
- }]
- };
- return option;
- }
- }
- })
- </script>
- </body>
- </html>
|