549 lines
13 KiB
Plaintext
549 lines
13 KiB
Plaintext
<template>
|
||
<view>
|
||
<map id="map" v-if="showMap" :scale="25" :max-scale="25" :style="{
|
||
width:mapConfig.width+'px',
|
||
height:mapConfig.height+'px'
|
||
}" :show-location="false" :enable-satellite="false" :latitude="points.latitude" :longitude="points.longitude"
|
||
:markers="markers" :polyline="polyline">
|
||
</map>
|
||
<!-- :enable-scroll="!status" -->
|
||
<!-- :include-points="polyline[0].points" -->
|
||
<view v-if="status" class="time" @click="goto">
|
||
<image class="timer" src="@/static/map/timer.png" mode="heightFix"></image>
|
||
<text class="timerText">{{ civilTime }}</text>
|
||
<text class="timerDesc">用时</text>
|
||
</view>
|
||
<view class="startBtn" :class="{status}" @click="onPlay">
|
||
<text style="color: #fff;">{{ status ? "结束" : "开始" }}</text>
|
||
</view>
|
||
<uni-popup ref="popup" background-color="#fff" mask-background-color="rgba(0,0,0,0)" :is-mask-click="false"
|
||
type="bottom" border-radius="30px 30px 0 0">
|
||
<view class="popupMain">
|
||
<view class="ptitme">
|
||
<view class="civi">用时：{{ civilTime }}</view>
|
||
<view class="ctime">{{ currentTime }}</view>
|
||
</view>
|
||
<view class="dots">
|
||
<view class="start">起点：{{ address.start }}</view>
|
||
<image class="go" mode="widthFix" src="@/static/map/go.png"></image>
|
||
<view class="end">终点：{{ address.end }}</view>
|
||
</view>
|
||
<view class="btn start" @click="restart">
|
||
<text class="text">重新开始</text>
|
||
</view>
|
||
<view class="btn exit" @click="exit">
|
||
<text class="text">退出登录</text>
|
||
</view>
|
||
</view>
|
||
</uni-popup>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import moment from "moment"
|
||
import {
|
||
safetyHatDataAdd,
|
||
mechanicalEquipmentPositionDataAdd
|
||
} from "@/api/index.js"
|
||
const aMapHelper = uni.requireNativePlugin("SLY-AMapHelper");
|
||
export default {
|
||
data() {
|
||
return {
|
||
showMap: false,
|
||
// 地图的宽高
|
||
mapConfig: {
|
||
width: 0,
|
||
height: 0
|
||
},
|
||
// 当前坐标轴
|
||
points: {
|
||
latitude: 0,
|
||
longitude: 0,
|
||
},
|
||
// 添加标志
|
||
markers: [],
|
||
// 路线图
|
||
polyline: [{
|
||
points: []
|
||
}],
|
||
status: false, // 是否开始运动
|
||
timer: null,
|
||
coordType: "gcj02",
|
||
startTime: 0,
|
||
civilTime: "00:00",
|
||
currentTime: moment().format('YYYY-MM-DD HH:mm:ss'),
|
||
address: {
|
||
start: "",
|
||
end: ""
|
||
}
|
||
}
|
||
},
|
||
onLoad() {
|
||
let info = uni.getWindowInfo();
|
||
this.mapConfig.width = info.windowWidth;
|
||
this.mapConfig.height = info.windowHeight;
|
||
uni.showLoading({
|
||
title: "加载地图资源中"
|
||
})
|
||
this.initMap()
|
||
this.openMonitor()
|
||
},
|
||
onShow() {
|
||
// this.initMap()
|
||
// this.openMonitor()
|
||
},
|
||
methods: {
|
||
exit() {
|
||
// 退出登录
|
||
uni.showModal({
|
||
title: '提醒',
|
||
content: '是否要退出当前登录？',
|
||
confirmText: "退出",
|
||
success: function(res) {
|
||
if (res.confirm) {
|
||
uni.removeStorageSync("devInfoList");
|
||
uni.removeStorageSync("loginType");
|
||
uni.reLaunch({
|
||
url: '/pages/login/login'
|
||
});
|
||
} else if (res.cancel) {}
|
||
}
|
||
});
|
||
},
|
||
restart() {
|
||
// 重新开始
|
||
uni.showLoading({
|
||
title: "重新加载中"
|
||
})
|
||
// 关闭弹窗
|
||
this.$refs.popup.close();
|
||
// 计时时间初始化
|
||
this.civilTime = "00:00";
|
||
// 开始计时时间清空
|
||
this.startTime = 0;
|
||
// 运动状态关闭
|
||
this.status = false;
|
||
// 线路清空
|
||
this.polyline = [{
|
||
points: [],
|
||
color: '#4d61ec',
|
||
width: 8
|
||
}];
|
||
// 重新初始化地图坐标起点
|
||
this.initMap()
|
||
},
|
||
goto() {
|
||
// uni.navigateTo({
|
||
// url: "/pages/home/loca"
|
||
// })
|
||
},
|
||
closeMonitor() {
|
||
// 关闭监听
|
||
aMapHelper.stopLocation();
|
||
},
|
||
openMonitor() {
|
||
// 开始后开启监听
|
||
let _this = this;
|
||
if (!aMapHelper.isTrackSettingOk()) {
|
||
return;
|
||
}
|
||
aMapHelper.trackLocation({
|
||
intervalTime: 3000, //定位间隔时间
|
||
isSimpleMode: true,
|
||
spacing: 0, //有效移动距离，超过大于等于该值才会回调
|
||
// notificationTitle: "自定义Title",
|
||
// notificationContent: "自定义Content",
|
||
coordType: this.coordType
|
||
}, (res) => {
|
||
//调试时请以控制台日志是否持续打印为准，息屏后view页面可能不会更新result结果
|
||
console.log("【持续定位结果】", `时间：${res.formatTime},坐标：${res.longitude},${res.latitude}`);
|
||
if (res.errorCode == 0) {
|
||
if (!_this.status) {
|
||
// this.closeMonitor();
|
||
this.initMap();
|
||
} else {
|
||
// `
|
||
// 定位次数:${++count}
|
||
// 定位时间：${res.formatTime}
|
||
// 坐标：${res.longitude},${res.latitude}
|
||
// 坐标系：${res.coordType}
|
||
// 设备方向：${res.direction}
|
||
// 海拔：${res.altitude}米`
|
||
this.updateMap({
|
||
latitude: res.latitude,
|
||
longitude: res.longitude
|
||
})
|
||
}
|
||
|
||
|
||
} else if (res.errorCode == 12) {
|
||
let deniedPermissionAndNoAsk = res.deniedPermissionAndNoAsk;
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: res.errorInfo,
|
||
success: (res) => {
|
||
if (res.confirm && deniedPermissionAndNoAsk) {
|
||
aMapHelper.openSettingPage();
|
||
}
|
||
}
|
||
})
|
||
}
|
||
})
|
||
},
|
||
getAddress(lng, lat, name) {
|
||
aMapHelper.reGeoQuery({
|
||
lng: lng,
|
||
lat: lat,
|
||
radius: 50, //范围多少米
|
||
coordType: this.coordType //火系坐标系还是GPS原生坐标系,仅支持"gcj02","wgs84"2中
|
||
}, res => {
|
||
console.log("逆地址结果===============", res);
|
||
if (res.errorCode == 0) {
|
||
//成功,更多结果，打印res.result
|
||
console.log(res.result);
|
||
this.$set(this.address, name, res.result.formatAddress)
|
||
} else {
|
||
//失败
|
||
uni.showToast({
|
||
title: "获取地址信息失败"
|
||
})
|
||
}
|
||
})
|
||
},
|
||
onPlay() {
|
||
// 开始、结束运动 未开启后台持续化定位会禁止开始
|
||
console.log(aMapHelper.isTrackSettingOk());
|
||
if (!aMapHelper.isTrackSettingOk()) {
|
||
// 定位的权限未设置完毕
|
||
return aMapHelper.trackPermissionPreGetSimple()
|
||
}
|
||
this.status = !this.status;
|
||
console.log(this.polyline);
|
||
if (this.status) {
|
||
// 开启监听
|
||
// this.markers = [];
|
||
this.openMonitor()
|
||
this.startTime = Date.now();
|
||
clearInterval(this.timer)
|
||
this.timer = setInterval(() => {
|
||
console.log(this.startTime, Date.now());
|
||
const time1 = moment(this.startTime);
|
||
const time2 = moment(Date.now());
|
||
let m = time2.diff(time1, 'minutes');
|
||
let s = time2.diff(time1, 'seconds');
|
||
if (s >= 60) s = s - (m * 60);
|
||
if (m <= 9) m = '0' + m;
|
||
if (s <= 9) s = '0' + s;
|
||
this.civilTime = m + ":" + s;
|
||
}, 1000)
|
||
} else {
|
||
// 关闭监听
|
||
this.startTime = 0;
|
||
clearInterval(this.timer);
|
||
this.closeMonitor();
|
||
|
||
let markers = JSON.parse(JSON.stringify(this.markers));
|
||
let endAddress = this.polyline[0].points[this.polyline[0].points.length - 1];
|
||
|
||
markers.push({
|
||
id: 2,
|
||
latitude: endAddress.latitude,
|
||
longitude: endAddress.longitude,
|
||
iconPath: '../../static/map/end.png',
|
||
width: 40,
|
||
height: 65
|
||
})
|
||
this.getAddress(endAddress.longitude, endAddress.latitude, "end");
|
||
this.markers = markers;
|
||
this.$refs.popup.open()
|
||
console.log(this.markers, "this.markers");
|
||
}
|
||
},
|
||
updateMap(points) {
|
||
console.log(points, "points");
|
||
this.points = points;
|
||
// this.polyline[0].points.push(points);
|
||
this.polyline = [{
|
||
points: [...this.polyline[0].points, ...[points]],
|
||
color: '#4d61ec',
|
||
width: 8
|
||
}]
|
||
|
||
let devInfoList = uni.getStorageSync("devInfoList");
|
||
let request = null;
|
||
|
||
// 登录的类型
|
||
let type = uni.getStorageSync("loginType");
|
||
// 根据类型区分各个接口
|
||
if (type == "personnel") {
|
||
// 人员
|
||
request = safetyHatDataAdd;
|
||
} else {
|
||
// 机械
|
||
request = mechanicalEquipmentPositionDataAdd;
|
||
}
|
||
// 循环设备列表上报位置
|
||
devInfoList.forEach(item => {
|
||
console.log("上报" + type + ":" + item.devSn);
|
||
let params = {
|
||
devSn: item.devSn,
|
||
latitude: points.latitude,
|
||
longitude: points.longitude,
|
||
uploadTime: moment().format('YYYY-MM-DD HH:mm:ss')
|
||
}
|
||
request(params).then(result => {
|
||
console.log("-----------------------------------");
|
||
console.log(result);
|
||
console.log("-----------------------------------");
|
||
})
|
||
})
|
||
},
|
||
initMap() {
|
||
this.newInitMap();
|
||
/* uni.getLocation({
|
||
type: 'gcj02',
|
||
isHighAccuracy: true,
|
||
altitude: true,
|
||
fail: (err) => {
|
||
console.log(err);
|
||
uni.hideLoading();
|
||
},
|
||
success: (res) => {
|
||
let {
|
||
latitude,
|
||
longitude
|
||
} = res;
|
||
this.points = res;
|
||
this.polyline = [{
|
||
points: [this.points],
|
||
color: '#4d61ec',
|
||
width: 8
|
||
}];
|
||
this.markers = [{
|
||
id: 1,
|
||
latitude: latitude,
|
||
longitude: longitude,
|
||
iconPath: '../../static/map/at.png',
|
||
width: 40,
|
||
height: 42,
|
||
// label: {
|
||
// content: '起点',
|
||
// color: '#fff',
|
||
// bgColor: '#4CD964',
|
||
// padding: '5',
|
||
// borderRadius: '20',
|
||
// display: 'BYCLICK',
|
||
// x: -15,
|
||
// y: -65
|
||
// }
|
||
}]
|
||
this.showMap = true;
|
||
uni.hideLoading();
|
||
console.log('当前位置的经度：' + res.longitude);
|
||
console.log('当前位置的纬度：' + res.latitude);
|
||
}
|
||
}); */
|
||
},
|
||
newInitMap() {
|
||
aMapHelper.getLocation({
|
||
coordType: this.coordType
|
||
}, (res) => {
|
||
console.log(res);
|
||
console.log('aMapHelper.getLocation');
|
||
if (res.errorCode == 0) {
|
||
let {
|
||
latitude,
|
||
longitude
|
||
} = res;
|
||
this.points = res;
|
||
this.getAddress(longitude, latitude, "start");
|
||
this.polyline = [{
|
||
points: [this.points],
|
||
color: '#4d61ec',
|
||
width: 8
|
||
}];
|
||
this.markers = [{
|
||
id: 1,
|
||
latitude: latitude,
|
||
longitude: longitude,
|
||
iconPath: '../../static/map/at.png',
|
||
width: 40,
|
||
height: 65,
|
||
// label: {
|
||
// content: '起点',
|
||
// color: '#fff',
|
||
// bgColor: '#4CD964',
|
||
// padding: '5',
|
||
// borderRadius: '20',
|
||
// display: 'BYCLICK',
|
||
// x: -15,
|
||
// y: -65
|
||
// }
|
||
}]
|
||
this.showMap = true;
|
||
uni.hideLoading();
|
||
console.log('当前位置的经度：' + res.longitude);
|
||
console.log('当前位置的纬度：' + res.latitude);
|
||
} else if (res.errorCode == 12) { //用户拒绝定位权限
|
||
//当用户选择了“拒绝且不再询问”时，应用无法再弹出权限申请框，必须引导用户前往设置页面手动开启。
|
||
let deniedPermissionAndNoAsk = res.deniedPermissionAndNoAsk;
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: res.errorInfo,
|
||
success: (res) => {
|
||
if (res.confirm && deniedPermissionAndNoAsk) {
|
||
//打开设置页面
|
||
aMapHelper.openSettingPage();
|
||
}
|
||
}
|
||
})
|
||
}
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.time {
|
||
position: fixed;
|
||
right: 20rpx;
|
||
top: 100rpx;
|
||
width: 200rpx;
|
||
background-color: #fff;
|
||
box-shadow: 0 10rpx 10rpx 1rpx #ddd;
|
||
border-radius: 10rpx;
|
||
padding: 15rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
|
||
.text {
|
||
font-size: 22rpx;
|
||
color: #333;
|
||
}
|
||
|
||
.timer {
|
||
height: 110rpx;
|
||
}
|
||
|
||
.timerText {
|
||
font-size: 46rpx;
|
||
color: #333;
|
||
}
|
||
|
||
.timerDesc {
|
||
font-size: 34rpx;
|
||
color: #333;
|
||
}
|
||
}
|
||
|
||
.startBtn {
|
||
position: fixed;
|
||
left: 275rpx;
|
||
bottom: 100rpx;
|
||
z-index: 10;
|
||
width: 200rpx;
|
||
height: 200rpx;
|
||
border-radius: 100%;
|
||
background-color: $uni-color-primary;
|
||
box-shadow: 0 10rpx 10rpx 1rpx #ddd;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
&.status {
|
||
background-color: #e62e39;
|
||
}
|
||
}
|
||
|
||
.popupMain {
|
||
padding: 40rpx 25rpx 40rpx;
|
||
|
||
.ptitme {
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: space-between;
|
||
overflow: hidden;
|
||
|
||
.civi,
|
||
.ctime {
|
||
display: inline-block;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.ctime {
|
||
margin-left: 20rpx;
|
||
}
|
||
}
|
||
|
||
.dots {
|
||
padding: 50rpx 0;
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
|
||
.start,
|
||
.end {
|
||
flex: 1;
|
||
}
|
||
|
||
.go {
|
||
width: 40rpx;
|
||
margin: 0 20rpx;
|
||
}
|
||
|
||
.start {
|
||
text-align: left;
|
||
}
|
||
|
||
.end {
|
||
text-align: right;
|
||
}
|
||
}
|
||
|
||
.btn {
|
||
padding: 25rpx 0;
|
||
text-align: center;
|
||
border-radius: 12rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
|
||
|
||
&.start {
|
||
background-color: $uni-color-primary;
|
||
|
||
.text {
|
||
color: #fff;
|
||
}
|
||
}
|
||
|
||
&.exit {
|
||
margin-top: 25rpx;
|
||
background-color: #fff;
|
||
box-shadow: 0 0 1rpx 1rpx $uni-color-primary;
|
||
|
||
.text {
|
||
color: $uni-color-primary;
|
||
}
|
||
}
|
||
|
||
&:active {
|
||
position: relative;
|
||
|
||
&:after {
|
||
content: "";
|
||
position: absolute;
|
||
background-color: rgba(0, 0, 0, .05);
|
||
left: 0;
|
||
top: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style> |