yzHY/zhgHy/js/main.js

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;
		}
	}
})