yzCctvHelm/assets/shipManage.js

var _this, dataObj = [], baseTok = null;
var timeId = null;
var map;
new Vue({
	el: '#app',
	data: function() {
		return {
			shipLi: [],
			nowTab: {},
			userForm: {}
		}
	},
	created() {
		_this = this;
		baseTok = getCookie("Admin-Token") != "null" && getCookie("Admin-Token") != null ? getCookie("Admin-Token") : "";
		_this.userForm = JSON.parse(getCookie("Admin-User"));
		_this.initAjax();
		clearInterval(timeId);
		timeId = setInterval(()=>{
			_this.initAjax();
		},15*1000);
	},
	mounted(){
		map = new AMap.Map("areaMap", {
			center: [113.5556, 22.9422],
			zoom: 14
		});
		map.addControl(new AMap.Scale({ visible: true }) );
		window.addEventListener('message',(data)=>{
			if(data.data != _this.nowTab.sn){
				_this.changTab(data.data);
			}
		})
	},
	methods: {
		initAjax(){
			const loading = this.$loading({
				background: 'rgba(0, 0, 0, 0.4)'
			})
			let _opts = {
				url: baseUrl + "/SelCctvListByUserId",
				type:"GET"
			};
			let _data = {
				"user_id": _this.userForm.userId
			};
			let _hea = {
				"Authorization": "Bearer " + baseTok
			};
			getAxios(_opts,_data,_hea).then((res) => {
				if(res.code == 200&&res.data.length){
					let _xji = res.data;
					let sipList = JSON.parse(localStorage.getItem("sipLists")) || [];
					let _noShip = [], _hasShip = [];
					_xji.forEach(item => {
						if(item.mmsi.length>15){
							let _lonlat = [], _time = "";
							if(sipList.length){
								let _anm = sipList.filter(sipitem => sipitem.user_info.device_id == item.sn);
								if(_anm.length){
									_lonlat = [_anm[0].location_info.y_point, _anm[0].location_info.x_point];
									_time = _anm[0].location_info.ctime;
								}else{
									_lonlat = item.mmsi.split(",");
								}
							}else{
								_lonlat = item.mmsi.split(",");
							}
							// let _newpo = GpsToGd(Number(_lonlat[1]), Number(_lonlat[0]));
							_noShip.push({
								icon: staticUrl + "/img/ship.png",
								position: [_lonlat[0], _lonlat[1]],
								lon: _lonlat[0],
								lat: _lonlat[1],
								prod: item.dev_name,
								sn: item.sn,
								mmsi: item.mmsi,
								speed: 0,
								time: _time
							})
						}else{
							_hasShip.push(item)
						}
					})
					if(!_hasShip.length){
						_this.setMapAfter(_noShip)
					}else{
						let _bji = _hasShip.map(item => item.mmsi);
						getCctvAis(_bji.toString(),function(_res){
							let _arr = [];
							_hasShip.forEach(item => {
								let sd = _res.filter(subitem => subitem[0] == item.mmsi)[0];
								let _newpo = GpsToGd(Number(sd[13]), Number(sd[12]));
								_noShip.push({
									icon: staticUrl + "/img/ship.png",
									position: [_newpo.lon,_newpo.lat],
									lon: sd[12],
									lat: sd[13],
									prod: item.dev_name,
									sn: item.sn,
									mmsi: item.mmsi,
									speed: sd[15],
									time: sd[23]
								})
							});
							_this.setMapAfter(_noShip);
						});
					}
				}else{
					_this.shipLi = [];
				}
				loading.close();
			})
		},
		setMapAfter(_arr){
			_this.shipLi = _arr;
			dataObj = _arr;
			let _sn = JSON.parse(localStorage.getItem("nowShip"));
			if(_sn !=null && _sn != "null"){
				let _ind = _this.shipLi.findIndex((i,ind) => {return i.sn == _sn.sn});
				if(_ind != -1){
					_sn = _this.shipLi[_ind];
				}else{
					_sn = _this.shipLi[0];
				}
			}else{
				_sn = _this.shipLi[0];
			}
			_this.nowTab = _sn;
			_this.setMap(_this.shipLi);
		},
		changTab(id){
			let ind = _this.shipLi.findIndex((it,ind) => {return id == it.sn});
			if(ind != -1){
				_this.nowTab = _this.shipLi[ind].sn;
				window.parent.postMessage({id: _this.nowTab},staticUrl+ "/");
				_this.openInfo(_this.nowTab);
			}
		},
		setMap(_obj){
			map.clearMap();
			_obj.forEach(function(_obj) {
				var marker = new AMap.Marker({
					map: map,
					icon: new AMap.Icon({
						size: new AMap.Size(50, 50),
						image: _obj.icon,
						imageSize: new AMap.Size(50, 50)
					}),
					position: _obj.position,
					offset: new AMap.Pixel(-13, -30),
					extData: _obj.sn
				});
				marker.setLabel({
					offset: new AMap.Pixel(0, 0),
					content: "<div style='color:#000;font-size:12px;'>" + _obj.prod + "</div>",
					direction: 'bottom'
				});
				marker.on('click', markerClick);
			});
			_this.openInfo(_this.nowTab.sn);
			function markerClick(e) {
				let _ind = e.target.getExtData();
				window.parent.postMessage({id: _ind}, staticUrl+ "/");
				_this.openInfo(_ind);
			}
		},
		openInfo(_sn){
			let _cmk = _this.shipLi;
			for (var i = 0; i < _cmk.length; i++) {
				if (_sn == _cmk[i].sn) {
					let _str = _cmk[i];
					_this.nowTab = _str;
					var info = [];
					// getFormattedAddress(_str.position, function(_pos) {
						info.push(`<div class="nowShip">
									<div class="mapTitle">${_str.prod}</div>
									<div class="padding-sm mapInfo">
										<div><div>经度：</div><div>${duToGpsDM(_str.lon,'E')}</div></div>
										<div><div>纬度：</div><div>${duToGpsDM(_str.lat,'N')}</div></div>
										<div><div>航速：</div><div>${_str.speed} 节</div></div>
										<div><div>时间：</div><div>${ parseTime(_str.time, '{y}-{m}-{d} {h}:{d}:{s}')}</div></div>
									</div>
								</div>`);
						infoWindow = new AMap.InfoWindow({
							offset: new AMap.Pixel(6, -30),
							content: info.join("")
						});
						infoWindow.open(map, _str.position);
						map.setCenter(_str.position);
						return;
					// });
				}
			}
		}
	}
})