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