123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323 |
- var _this, screenWidth, timeId;
- var myChart1, myChart2, myChart3, mapView, angView;
- new Vue({
- el: '#app',
- data: function() {
- return {
- imgHei: 0,
- gutter: 5,
- fontS: 16,
- echTxt: 0,
- shipLi: [],
- tabDiv: 39,
- nowTab: {},
- selVis: false,
- shipCount: [{name: "船舶总数",count: 0,icon: "../img/shipnum.png"},
- {name: "在线船舶",count: 0,icon: "../img/online.png"},
- {name: "离线船舶",count: 0,icon: "../img/offline.png"}
- ],
- shipPeol: [{name: "在船人数",count: 297,col:"#51a3f4"},
- {name: "预警人数",count: 7,col:"#fbbd08"},
- {name: "超载人数",count: 10,col:"#fa0000"}],
- switLi: []
- }
- },
- created() {
- _this = this;
- _this.init(0);
- // timeId = setInterval(()=>{
- // _this.init(1);
- // },60*1000)
- },
-
- mounted() {
- let screenWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
- _this.gutter = Math.ceil(screenWidth / 320);
- _this.fontS = (screenWidth / 1440) * 16;
- mapView = this.$refs.mapView.contentWindow;
- angView = this.$refs.angView.contentWindow;
- this.$nextTick(() => {
- myChart1 = echarts.init(document.getElementById("myChart1"));
- myChart2 = echarts.init(document.getElementById("myChart2"));
- myChart3 = echarts.init(document.getElementById("myChart3"));
- _this.tabDiv = _this.$refs.titleDiv.offsetHeight;
- });
- window.onresize = () => {
- _this.imgLoad();
- }
- window.addEventListener('message',(res)=>{
- if(res.data.nowSn != undefined){
- _this.getSn(res.data.nowSn);
- }
- })
- },
- destroyed(){
- clearInterval(timeId);
- },
- methods: {
- init(num) {
- let loading = null;
- if(num == 0){
- loading = this.$loading({
- background: 'rgba(0, 0, 0, 0.4)'
- })
- }
- getList(function acb(_obj, _online){
- let _sn = _this.nowTab.mmsi;
- if (_sn != undefined) {
- let _ind = _obj.findIndex((i, ind) => {
- return i.mmsi == _sn
- });
- if (_ind != -1) {
- _sn = _obj[_ind];
- } else {
- _sn = _obj[0];
- }
- } else {
- _sn = _obj[0];
- }
- _this.shipLi = _obj;
- _this.nowTab = _sn;
- _this.shipCount[0].count = _this.shipLi.length;
- _this.shipCount[1].count = _online;
- _this.shipCount[2].count = parseInt(_this.shipLi.length) - _online;
- _this.openInfo(_this.nowTab.mmsi);
- angView.onload = function () {
- angView.postMessage({
- nowSn: _this.nowTab,
- gutter: _this.gutter,
- fontS: _this.fontS
- },"*");
- }
- mapView.onload = function () {
- mapView.postMessage({
- gutter: _this.gutter,
- fontS: _this.fontS,
- nowSn: _this.nowTab,
- shipLi: _this.shipLi
- },"*");
- }
- if(num == 0){loading.close();}
- })
- },
- setEchart() {
- this.$nextTick(() => {
- myChart1.setOption(_this.setOption1([100, 140, 125, 160, 130, 145, 128]));
- myChart2.setOption(_this.setOption2([25, 28, 10, 17, 20],["在航", "故障", "维修", "靠泊", "锚泊"]));
- myChart3.setOption(_this.setOption2([25, 28, 10, 17, 20],[">20年", "15-20年", "10-15年", "5-10年", "<5年"]));
- myChart1.resize();
- myChart2.resize();
- myChart3.resize();
- })
- },
- openInfo(_sn) {
- let _cmk = _this.shipLi;
- for (var i = 0; i < _cmk.length; i++) {
- if (_sn == _cmk[i].mmsi) {
- var _str = _cmk[i];
- _this.nowTab = _str;
- _this.setEchart();
- }
- }
- },
- imgLoad() {
- var _Img = document.getElementById('headImg');
- this.$nextTick(() => {
- _this.imgHei = _Img.clientHeight
- })
- let screenWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
- _this.gutter = Math.ceil(screenWidth / 320);
- _this.fontS = (screenWidth / 1440) * 16;
- },
-
- changeSn(_key) {
- _this.getSn(_key);
- mapView.postMessage({
- nowSn: _this.nowTab,
- type: "changsn"
- },"*")
- angView.postMessage({
- nowSn: _this.nowTab,
- type: "changsn"
- },"*");
- },
- getSn(key){
- let _ind = _this.shipLi.findIndex((i, ind) => {
- return i.mmsi == key
- });
- if (_ind != -1) {
- _sn = _this.shipLi[_ind];
- } else {
- _sn = _this.shipLi[0];
- }
- _this.selVis = false;
- _this.nowTab = _sn;
- _this.setEchart();
- _this.openInfo(_this.nowTab.mmsi);
- },
- setOption1(_arr) {
- option = {
- tooltip: {
- trigger: 'axis',
- axisPointer: {
- type: 'cross',
- label: {
- backgroundColor: '#6a7985'
- }
- }
- },
- grid: {
- top: '10%',
- left: '1%',
- right: '2%',
- bottom: '2%',
- containLabel: true
- },
- xAxis: {
- type: 'category',
- boundaryGap: true,
- splitLine: {
- show: true,
- lineStyle: {
- color: '#29437c'
- }
- },
- axisLabel: {
- textStyle: {
- color: '#fff',
- fontSize: ((_this.fontS > 16) ? (_this.fontS * 0.6) : 10) + ''
- },
- showMaxLabel: true
- },
- data: ['2016', '2017', '2018', '2019', '2020', '2021', '2022']
- },
- yAxis: {
- type: 'value',
- axisLabel: {
- textStyle: {
- fontSize: ((_this.fontS > 16) ? (_this.fontS * 0.6) : 10) + ''
- },
- showMaxLabel: true
- },
- axisLine: {
- show: true,
- lineStyle: {
- color: ['#5f6ee1']
- }
- },
- splitLine: {
- show: true,
- lineStyle: {
- color: ['#29437c']
- }
- }
- },
- series: [{
- data: _arr,
- type: 'line',
- label: {
- show: true,
- position: 'top',
- fontSize: ((_this.fontS > 16) ? (_this.fontS * 0.6) : 10) + ''
- },
- itemStyle: {
- normal: {
- color: '#5f6ee1', //改变折线点的颜色
- lineStyle: {
- color: '#5f6ee1' //改变折线颜色
- }
- }
- }
- }]
- };
- return option;
- },
- setOption2(Num,Name) {
- option = {
- tooltip: {
- trigger: 'item',
- formatter: '{a} <br/>{b}: {c} ({d}%)'
- },
- legend: {
- show: true,
- itemWidth: ((_this.fontS > 16) ? (_this.gutter * 0.8) : 10) ,
- itemHeight: ((_this.fontS > 16) ? (_this.gutter * 0.8) : 10),
- right: '3%',
- y: "center",
- itemGap: _this.gutter,
- orient: 'vertical',
- data:Name,
- textStyle: {
- color: "#fff",
- fontSize: ((_this.fontS > 16) ? (_this.fontS * 0.4) : 10) + '',
- }
- },
- color: ['#4f6dcd', '#fad972', '#f88582', '#3ae3bc', '#9299f3'],
- series: [{
- name: '实时数据统计',
- type: 'pie',
- center: ['45%', '50%'],
- radius: ['50%', '60%'],
- avoidLabelOverlap: false,
- label: {
- show: false,
- position: 'center'
- },
- emphasis: {
- label: {
- show: true,
- fontSize: ((_this.fontS > 16) ? (_this.fontS * 0.4) : 10) + '',
- fontWeight: 'bold'
- }
- },
- itemStyle: {
- normal: {
- borderRadius: 10,
- borderColor: '#323740',
- borderWidth: 2,
- label: {
- show: true,
- formatter: '{d}%',
- fontSize: ((_this.fontS > 16) ? (_this.fontS * 0.4) : 10) + '',
- color: "#fff"
- },
- labelLine: {
- show: true
- }
- }
- },
- labelLine: {
- show: true
- },
- data: [{
- value: Num[0],
- name: Name[0]
- },
- {
- value: Num[1],
- name: Name[1]
- },
- {
- value: Num[2],
- name: Name[2]
- },
- {
- value: Num[3],
- name: Name[3]
- },
- {
- value: Num[4],
- name: Name[4]
- },
- {
- value: Num[5],
- name: Name[5]
- }
- ]
- }]
- };
- return option;
- }
- }
- })
|