// const { axios } = require("_vue@2.6.12@vue/types/umd");
|
|
// import myDomMove from './move'
|
var me = new Vue({
|
el: '#mapVue',
|
data: {
|
map: null, //map
|
getdata: null,
|
marker: null,
|
layuiLayer: null,
|
nowIndex: 1,
|
|
//基础路径
|
// pathUrl: "http://localhost:89",
|
pathUrl: this.$store.state.piAPI + "",
|
|
layer: null,
|
|
snumber: null,
|
name: null,
|
workDesc: null,
|
|
//存放实时坐标
|
lat: "",
|
lng: "",
|
addr: "",
|
address: "",
|
|
|
},
|
created() {},
|
mounted() {
|
//时钟
|
setInterval(() => {
|
this.getnow()
|
}, 1000);
|
|
//获取当前定位
|
this.getLocationData();
|
|
//初始化数据，地图
|
this.getDataList();
|
|
//获取个人信息
|
this.getOneselfInFo();
|
|
},
|
methods: {
|
|
//初始化数据，地图
|
getDataList(tab) {
|
var that = this;
|
that.beginCome(tab);
|
},
|
|
//获取个人信息
|
getOneselfInFo() {
|
var that = this;
|
//保安信息查询
|
axios({
|
method: "POST",
|
url: `http://61.131.136.25:2082/api/blade-user/details`,
|
params: {
|
id: that.snumber,
|
},
|
}).then((resdata) => {
|
that.name = resdata.data.data.realName;
|
});
|
},
|
|
|
//去打卡
|
goClock() {
|
var that = this;
|
axios({
|
method: "POST",
|
url: this.pathUrl + `/attendance/AppSave`,
|
params: {
|
number: this.snumber,
|
name: this.name,
|
clockTime: this.getNowTime(1),
|
jd: "129.241252",
|
wd: "25.254212",
|
workDesc: this.workDesc,
|
address: this.address
|
},
|
}).then((resdata) => {
|
//不在考勤范围内
|
if (resdata.data.code == 400) {
|
layui.use('layer', function() {
|
var layer = layui.layer;
|
layer.msg('打卡失败,不在考勤范围', {
|
icon: 0
|
});
|
});
|
}
|
//打卡成功
|
if (resdata.data.code == 200) {
|
layui.use('layer', function() {
|
var layer = layui.layer;
|
layer.msg('打卡成功!', {
|
icon: 1
|
});
|
});
|
}
|
|
});
|
},
|
|
//获取当前位置信息
|
getLocationData() {
|
var that = this;
|
var geolocation = new qq.maps.Geolocation("T7RBZ-62U3X-RSQ4P-ZZVCB-WE7JT-HRBOG", "mapqq");
|
var options = {
|
timeout: 8000
|
};
|
|
function showPosition(position) {
|
that.lat = position.lat; //
|
that.lng = position.lng; //火星坐标 //TODO 实现业务代码逻辑
|
//通过经纬度换算详细地址
|
axios({
|
method: "GET",
|
url: `https://fmap.sf-express.com/rgeo/api`,
|
params: {
|
x: position.lng,
|
y: position.lat,
|
ak: '1986afc8a5744263971b7f2482253dfc'
|
},
|
}).then((res) => {
|
var address = res.data.result.name.toString();
|
if (address.search("县") != -1) {
|
that.addr = address.substring(address.indexOf("县") + 1, address.length);
|
}
|
if (address.search("区") != -1) {
|
that.addr = address.substring(address.indexOf("区") + 1, address.length);
|
}
|
that.address = address;
|
});
|
|
if (that.LXdhStart == null) {
|
//点位
|
var position = [that.lat, that.lng];
|
|
//把map定位到点位上，13为地图的级别，也可以直接marker.getLatLng()
|
that.map.setView(position, 15);
|
} else {
|
that.map.removeLayer(that.LXdhStart);
|
}
|
|
//绘制起点和终点
|
that.LXdhStart = L.markerClusterGroup();
|
|
var transportIcon = L.Icon.extend({ //图标初始化
|
options: {
|
iconSize: [50, 50], // 图标尺寸
|
}
|
});
|
|
var qd = new transportIcon({
|
iconUrl: './img/dingw.gif'
|
});
|
|
that.LXdhStart.addLayer(L.marker([that.lat, that.lng], {
|
icon: qd,
|
}));
|
|
that.map.addLayer(that.LXdhStart);
|
|
};
|
|
function showErr() {
|
//TODO 如果出错了调用此方法
|
};
|
|
geolocation.getLocation(showPosition, showErr, options);
|
},
|
|
//时钟
|
getnow() {
|
//获得标签对象
|
var nowspan = document.getElementById("nowspan");
|
nowspan.innerHTML = this.getNowTime(2);
|
},
|
|
|
//获取当前时间
|
getNowTime(type) {
|
//1、获得当前时间，格式化时间
|
var now = new Date();
|
var year = now.getFullYear();
|
var month = now.getMonth() + 1;
|
if (month < 10) {
|
month = "0" + month;
|
}
|
var date = now.getDate();
|
if (date < 10) {
|
date = "0" + date;
|
}
|
var hour = now.getHours();
|
if (hour < 10) {
|
hour = "0" + hour;
|
}
|
var minute = now.getMinutes();
|
if (minute < 10) {
|
minute = "0" + minute;
|
}
|
var second = now.getSeconds();
|
if (second < 10) {
|
second = "0" + second;
|
}
|
var nowstr = null;
|
if (type == 1) {
|
nowstr = year + "-" + month + "-" + date + " " + hour + ":" + minute + ":" + second;
|
}
|
if (type == 2) {
|
nowstr = year + "年" + month + "月" + date + "日 " + hour + ":" + minute + ":" + second;
|
}
|
return nowstr;
|
},
|
|
beginCome() {
|
//url解码
|
this.snumber = this.getQueryVariable('snumber');
|
//创建并接受map
|
this.map = this.beginMap(this.map);
|
//应用地图高度
|
this.map.invalidateSize(true);
|
},
|
|
//获取参数
|
getQueryVariable(variable) {
|
var query = window.location.search.substring(1);
|
var vars = query.split("&");
|
for (var i = 0; i < vars.length; i++) {
|
var pair = vars[i].split("=");
|
//解码url 和 JSON
|
if (pair[0] == variable) {
|
return JSON.parse(decodeURI(pair[1]));
|
}
|
}
|
return (false);
|
},
|
|
//开始
|
beginMap(map) {
|
var createMap = () => {
|
//初始化地图
|
map = L.map('map', {
|
zoom: 12,
|
minZoom: 2,
|
maxZoom: 17,
|
attributionControl: false, //去掉右下角
|
zoomControl: false, //去掉缩放
|
});
|
//添加切片图层
|
L.tileLayer(
|
//顺丰地图
|
// "https://webmap-tile.sf-express.com/MapTileService/rt?x={x}&y={y}&z={z}", {
|
"https://webmap-tile.sf-express.com/MapTileService/rt?fetchtype=static&x={x}&y={y}&z={z}&project=sfmap&pic_size=256&pic_type=png8&data_name=361100&data_format=merged-dat&data_type=normal", {}
|
).addTo(map);
|
}
|
createMap();
|
return map;
|
},
|
}
|
})
|
