yzHY/zhgHys/js/main.js

var _this, screenWidth, timeId;
var map, geoCoder;
var myChart1, myChart2, myChart3, myChart4, myChart5, myChart6, myChart70, myChart71, myChart80, myChart81,
	myChart90, myChart91, myChart92, myChart00, myChart01, myChart02;
new Vue({
	el: '#app',
	data: function() {
		return {
			imgHei: 0,
			gutter: 5,
			fontS: 16,
			tabBar: 0,
			tabBh: 0,
			echTxt: 0,
			shipLi: [],
			tabDiv: 39,
			nowTab: {},
			addRess: "",
			tabInd: 0,
			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.switLi = shipSwit;
		_this.init(0);
		timeId = setInterval(()=>{
			_this.init(1);
		},60*1000)
	},
	
	mounted() {
		map = new AMap.Map("areaMap", {
			center: [116.433322, 39.900256],
			layers: [new AMap.TileLayer.Satellite()],
			zoom: 14
		});
		map.addControl(new AMap.Scale({
			visible: true
		}));
		geoCoder = new AMap.Geocoder({
			radius: 1000
		});
		//let screenWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
		let screenWidth = 1920;
		_this.gutter = Math.ceil(screenWidth / 320);
		_this.fontS = (screenWidth / 1440) * 16;
		this.$nextTick(() => {
			myChart1 = echarts.init(document.getElementById("myChart1"));
			myChart2 = echarts.init(document.getElementById("myChart2"));
			myChart3 = echarts.init(document.getElementById("myChart3"));
			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"));
			let el = document.getElementsByClassName("el-slider__runway");
			for(let i=0;i<el.length;i++){
				el[i].style.margin = (_this.gutter*0.53)+"px 0";
				el[i].style.height = (_this.gutter*1.7)+"px";
			}
			let els = document.getElementsByClassName("el-slider__bar");
			for(let i=0;i<els.length;i++){
				els[i].style.height = (_this.gutter*1.7)+"px";
			}
			myChart2.resize({height:(_this.gutter*30)+"px"});
			myChart3.resize({height:(_this.gutter*30)+"px"});
			_this.tabDiv = _this.$refs.titleDiv.offsetHeight;
			_this.tabBh = _this.$refs.tabbar.offsetHeight;
			_this.echTxt = _this.$refs.chartxt.offsetHeight;
			let _ech = _this.$refs.charts.offsetHeight;
			myChart1.resize({height: _ech*0.84+"px"});
		})
		window.onresize = () => {
			_this.imgLoad();
		}
	},
	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.setMap(_this.shipLi);
				if(num == 0){loading.close();}
			})
		},
		changeTime(time) {
			let date3 = new Date().getTime() - (parseInt(time));
			let str = 1;
			if (date3 > (5 * 60 * 1000)) {
				str = 0;
			}
			return str;
		},
		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年"]));
				myChart4.setOption(_this.setOption3(_this.nowTab.speed, 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));
				// myChart02.setOption(_this.setOption3(10, 3000));
				// myChart92.setOption(_this.setOption3(10, 1500));
				// myChart92.setOption(_this.setOption3(10, 3000));
				// myChart02.setOption(_this.setOption3(10, 1500));
				myChart1.resize();
				myChart2.resize();
				myChart3.resize();
				myChart4.resize();
				myChart5.resize();
				myChart6.resize();
				myChart70.resize();
				myChart80.resize();
				myChart81.resize();
				myChart71.resize();
				myChart90.resize();
				myChart91.resize();
				// myChart92.resize();
				myChart00.resize();
				myChart01.resize();
				// myChart02.resize();
			})
		},
		setMap(_obj) {
			this.$nextTick(() => {
				map.clearMap();
				_obj.forEach(function(_obj) {
					var marker = new AMap.Marker({
						map: map,
						icon: new AMap.Icon({
							size: new AMap.Size(_this.gutter * 12, _this.gutter * 12),
							image: _obj.icon,
							imageSize: new AMap.Size(_this.gutter * 12, _this.gutter * 12),
							rotation: Number(152) * (Math.PI / 180)
						}),
						position: _obj.position,
						offset: new AMap.Pixel(-13, -30),
						extData: _obj.mmsi
					});
					marker.setLabel({
						offset: new AMap.Pixel(0, 0),
						content: "<div style='color:#000;font-size:" + (_this.fontS*0.5) + "px'>" +
							_obj.prod + "</div>",
						direction: 'bottom'
					});
					marker.on('click', markerClick);
				});
				_this.openInfo(_this.nowTab.mmsi);
				function markerClick(e) {
					let _ind = e.target.getExtData();
					_this.openInfo(_ind);
				}
			})
		},
		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;
					var info = [];
					geoCoder.getAddress(_str.position, function(status, result) {
						if (status === 'complete' && result.regeocode) {
							var address = result.regeocode.formattedAddress;
							_this.addRess = address;
						} else {
							_this.addRess = '获取位置失败';
						}
						map.setCenter(_str.position);
						return;
					});
					_this.setEchart();
				}
			}
		},
		imgLoad() {
			var _Img = document.getElementById('headImg');
			this.$nextTick(() => {  
				_this.imgHei = _Img.clientHeight
			})
			//let screenWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
      let screenWidth = 1920;
			_this.gutter = Math.ceil(screenWidth / 320);
			_this.fontS = (screenWidth / 1440) * 16;
		},
		changeTab(ind) {
			_this.tabBar = ind;
			_this.setEchart();
		},
		changeSn(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;
		},
		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;
		}
	}
})