yzCctvHelm/assets/helmetHome.js

var _this, dataObj = [], baseTok = null;
var map;
var settIme;
new Vue({
	el: '#app',
	data: function() {
		return {
			shipLi: [],
			nowTab: {},
			userForm: {},
			nowTime: "",
			cctvWarm: [{ "name": "离岗检测", "count": 0 },
					   { "name": "手机检测", "count": 0 }, 
					   { "name": "抽烟检测", "count": 0 },
					   { "name": "物品检测", "count": 0 }],
			craneWarm: [{ "name": "钢丝绳检测", "count": 0 },
					    { "name": "定滑轮检测", "count": 0 }, 
					    { "name": "起重机检测", "count": 0 }],
		}
	},
	created() {
		_this = this;
		baseTok = getCookie("Admin-Token") != "null" && getCookie("Admin-Token") != null ? getCookie("Admin-Token") : "";
		_this.nowTime = parseTime(new Date(), `{y}/{m}/{d}`);
		_this.userForm = JSON.parse(getCookie("Admin-User"));
		// _this.initAjax(0);
		// settIme = setInterval(()=>{
		// 	_this.initAjax(1);
		// },30*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(type){
			if(type == 0){
				var 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 _bji = _xji.map(item => item.mmsi);
					getCctvAis(_bji.toString(),function(_res){
						let _arr = [];
						_xji.forEach(item => {
							let sd = _res.filter(subitem => subitem[0] == item.mmsi)[0];
							let _newpo = GpsToGd(Number(sd[13]), Number(sd[12]));
							_arr.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,
								en_name: item.en_name,
								speed: (item.mmsi == "413871376"&&sd[15]>1?0.1:sd[15]),
								time: sd[23]// sd[23]
							})
						})
						_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);
					});
					
				}else{
					_this.shipLi = [];
					_this.nowTab = null;
				}
				if(type == 0){loading.close();}
			})
		},
		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>地址：</div><div style="font-size: 12px;">${_pos}</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;
					});
				}
			}
		}
	}
})