yzHY/zhgHys/js/mainnew.js

var _this, screenWidth, timeId;
var map, geoCoder;
var myChart1, myChart2, myChart3, myChart4, myChart5, myChart6;
new Vue({
	el: '#app',
	data: function() {
		return {
			imgHei: 0,
			gutter: 5,
			fontS: 128,
			echTxt: 0,
			shipLi: [],
			tabDiv: 39,
			nowTab: {},
			addRess: "",
			vidWid: 80,
			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"}],
			caremLi: [{
				alive: 1,
				cameraid: "001",
				name: "驾驶室",
			},{
				alive: 1,
				cameraid: "002",
				name: "机舱",
			},{
				alive: 0,
				cameraid: "003",
				name: "左舷",
			},{
				alive: 1,
				cameraid: "004",
				name: "右舷",
			}],
			carmAct: {},
			switLi: []
		}
	},
	created() {
		_this = this;
		_this.switLi = shipSwit;
		_this.carmAct = _this.caremLi[0];
		_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 = 1920;
		// let screenWidth = window.innerWidth || document.documentElement.clientWidth || document.body
		// .clientWidth;
		_this.gutter = Math.ceil(screenWidth / 320);
		_this.fontS = (screenWidth / 1440) * 16;
		_this.vidWid = _this.gutter*14;
		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"));
			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*21.6)+"px"});
			// myChart3.resize({height:(_this.gutter*21.6)+"px"});
			_this.tabDiv = _this.$refs.titleDiv.offsetHeight;
			_this.echTxt = _this.$refs.chartxt.offsetHeight;
			// let _ech = _this.$refs.charts.offsetHeight;
			// myChart1.resize({height: _ech*0.71+"px"});
		})
		window.onresize = () => {  
			_this.imgLoad();
			myChart1.resize();
			myChart2.resize();
			myChart3.resize();
			myChart4.resize();
			myChart5.resize();
		}
	},
	destroyed(){
		clearInterval(timeId);
	},
	methods: {
		init(num) {
			let loading = null;
			if(num == 0){
				loading = this.$loading({
					background: 'rgba(0, 0, 0, 0.4)'
				})
			}
			$.ajax({
				url: "http://121.37.6.200:8088/SelHswsSn?user_id=109",
				type: "GET",
				traditional: true,
				dataType: "json",
				async: false,
				data: {
					"euser_idnc": 109
				},
				headers:{
					"Authorization":"Bearer eyJhbGciOiJIUzUxMiJ9.eyJsb2dpbl91c2VyX2tleSI6IjVlNTcxMWNiLTI2YmEtNDAyYy1hZTAxLTU5YTAzMmIyNTU2MiJ9.dS_d4Z0XlIYSO0ji_Fu9DajYYCzf-Ja2XQNQlKFQX8_ket4HT4J3Ffzj1MlsjDtLdzFSw9KzED3rJZKqBHeo4g"
				},
				error: function() { },
				success: function(res) {
					if(res.code == 200){
						let _obj = res.data, _arr = [], _onl = 0;
						for(let i=0;i<_obj.length;i++){
							let item = _obj[i];
							if(item.dev_ver == 2){
								let _onli = item.online == undefined ?{lon:0,lat:0,speed:0,time:1639449590}:item.online;
								let _gps = wgsGcj(_onli.lat, _onli.lon);
								let _neol = _this.changeTime((_onli.time+"")>10?parseInt(_onli.time):parseInt(_onli.time)*1000);
								item.lat = _gps.lat;
								item.lon = _gps.lon;
								item.sog = _onli.speed.toFixed(1);
								item.position = [_gps.lon, _gps.lat];
								item.prod = item.dev_name;
								item.icon = "../img/ship.png",
								item.status = _neol == 1?'在航(主机推动)':'停航';
								item.mmsi = item.sn;
								item.hdg = 0.0;
								item.cog = 0.0;
								item.draught = 0.0;
								item.speed = _onli.speed.toFixed(2);
								if(_neol == 1){
									_onl += 1;
								}
								_arr.push(item);
							}
						}
						let _sn = _this.nowTab.mmsi;
						if (_sn != undefined) {
							let _ind = _arr.findIndex((i, ind) => {
								return i.mmsi == _sn
							});
							if (_ind != -1) {
								_sn = _arr[_ind];
							} else {
								_sn = _arr[0];
							}
						} else {
							_sn = _arr[0];
						}
						_this.shipLi = _arr;
						_this.nowTab = _sn;
						_this.shipCount[0].count = _this.shipLi.length;
						_this.shipCount[1].count = _this.shipLi.length;
						_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],['2016', '2017', '2018', '2019', '2020', '2021', '2022']));
				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.setOption1([100, 140, 125, 160, 130, 145, 128],['2022-08-12', '2022-08-13', '2022-08-14', '2022-08-15', '2022-08-16', '2022-08-17', '2022-08-18']));
				myChart5.setOption(_this.setOption2([25, 28, 10, 17, 20],["疲惫", "分神", "离岗", "抽烟", "电话"],1));
				myChart1.resize();
				myChart2.resize();
				myChart3.resize();
				myChart4.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];
					_str.lon = _str.position[0];
					_str.lat = _str.position[1];
					_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 = 1920;
			// let screenWidth = window.innerWidth || document.documentElement.clientWidth || document.body
			// 	.clientWidth;
			_this.gutter = Math.ceil(screenWidth / 320);
			_this.fontS = (screenWidth / 1440) * 16;
		},
		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,_data) {
			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: _data
				},
				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,who) {
			let _serir = {
				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]
					}]
			};
			if(who == 1) delete _serir["radius"];
			option = {
				tooltip: {
					trigger: 'item',
					formatter: '{a} <br/>{b}: {c} ({d}%)'
				},
				legend: {
					show: true,
					itemWidth: ((_this.fontS > 16) ? (_this.gutter * 0.9) : 10) ,
					itemHeight: ((_this.fontS > 16) ? (_this.gutter * 0.9) : 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: [_serir]
			};
			return option;
		},
		changeShow(){
			_this.vidWid = (_this.vidWid>0?0:_this.gutter*14);
		},
		changCarm(key){
			let _ind = _this.caremLi.findIndex((item,index)=>{
				return key == item.cameraid;
			});
			_this.carmAct = _this.caremLi[_ind];
			if(_this.carmAct.alive == 0){
				_this.$message({
					showClose: true,
					message: '设备离线中！！！',
					type: 'warning'
				});
			}
		}
	}
})