358 lines
9.7 KiB
Vue
358 lines
9.7 KiB
Vue
|
<template>
|
|||
|
|
<view class="map">
|
|||
|
|
<view class="page-body">
|
|||
|
|
<view class="page-section page-section-gap">
|
|||
|
|
<map id="map" style="width: 100%; height: 300px;" show-scale="true" show-location="true"
|
|||
|
|
:circles="circleArray" @regionchange="onRegionchange" scale='14' :latitude="latitude"
|
|||
|
|
:longitude="longitude" :markers="markers">
|
|||
|
|
</map>
|
|||
|
|
<cover-image class="img-map2" src="../../static/campus/orientation.png" @click="clickcontrol"></cover-image>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
</view>
|
|||
|
|
<view>
|
|||
|
|
<uni-card title="当前位置实时信息">
|
|||
|
|
<view style="color: #000;font-weight: bold;">经纬度:<text style="color: #6A6A6A;">{{ `（${latitude}，${longitude}）` }}</text></view>
|
|||
|
|
<view style="color: #000;font-weight: bold;">详细地址:<text style="color: #6A6A6A;">{{ address }}</text></view>
|
|||
|
|
<view style="height: 100px;display: flex;">
|
|||
|
|
<u-upload width="80px" height="80px" :fileList="fileList3" @afterRead="afterRead" @delete="deletePic"
|
|||
|
|
@clickPreview="clickPreview" name="3" multiple :maxCount="1" ></u-upload>
|
|||
|
|
</view>
|
|||
|
|
</uni-card>
|
|||
|
|
</view>
|
|||
|
|
<view style="text-align: center;">
|
|||
|
|
<!-- <view v-if="distance > 500 || distance === ''" class="punchabsent">未在范围内</view> -->
|
|||
|
|
<view class="punch" @click="tapScan">打卡</view>
|
|||
|
|
<view style="color: red">{{ codeText }}</view>
|
|||
|
|
<view style="color: red">{{ codeTime }}</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
// let QQMapWX = require("../utils/qqmap-wx-jssdk.min.js")
|
|||
|
|
// import QQMapWX from "../utils/qqmap-wx-jssdk.js"
|
|||
|
|
const QQMapWX = require('@/utils/qqmap-wx-jssdk.js')
|
|||
|
|
import {
|
|||
|
|
postIotserver
|
|||
|
|
} from '@/api/login';
|
|||
|
|
import {
|
|||
|
|
mapGetters
|
|||
|
|
} from 'vuex';
|
|||
|
|
import {
|
|||
|
|
timestampFormatTime
|
|||
|
|
} from '@/utils/index.js';
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
fileList3: [],
|
|||
|
|
baseURl: 'https://www.lonsungsh.com:8083',
|
|||
|
|
imageID: [], //上传图片的id集合
|
|||
|
|
imageUrlsDate: [],
|
|||
|
|
id: 0, // 使用 marker点击事件 需要填写id
|
|||
|
|
title: 'map',
|
|||
|
|
latitude: 0, //纬度
|
|||
|
|
longitude: 0, //经度
|
|||
|
|
markers: [{
|
|||
|
|
id: 0,
|
|||
|
|
latitude: 0,
|
|||
|
|
longitude: 0,
|
|||
|
|
width: 15,
|
|||
|
|
height: 20,
|
|||
|
|
callout: {
|
|||
|
|
content: '已进入打卡范围',
|
|||
|
|
color: '#FFFFFF',
|
|||
|
|
fontSize: 12,
|
|||
|
|
borderColor: '#69BFBE',
|
|||
|
|
bgColor: '#69BFBE',
|
|||
|
|
padding: 5,
|
|||
|
|
borderRadius: 3,
|
|||
|
|
display: 'ALWAYS',
|
|||
|
|
textAlign: 'center',
|
|||
|
|
}
|
|||
|
|
}],
|
|||
|
|
address: '',
|
|||
|
|
// 圆圈的范围
|
|||
|
|
circleArray: [],
|
|||
|
|
codeText: '',
|
|||
|
|
codeTime: '',
|
|||
|
|
distance: undefined,
|
|||
|
|
qqmapsdk: null
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
onLoad() {
|
|||
|
|
this.qqmapsdk = new QQMapWX({
|
|||
|
|
key: 'IBCBZ-W5C3W-X32R4-35XWR-SK5E2-BIFDO'
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
computed: {
|
|||
|
|
// 拿取vuex数据
|
|||
|
|
...mapGetters({
|
|||
|
|
userInfo: 'users/getLoginInfo',
|
|||
|
|
schoolInfo: 'users/getschoolList',
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
created(){
|
|||
|
|
// uni.chooseLocation({
|
|||
|
|
// success(res) {
|
|||
|
|
// console.log(res);
|
|||
|
|
// }
|
|||
|
|
// })
|
|||
|
|
var obj = {
|
|||
|
|
// 模拟环创企业广场
|
|||
|
|
// latitude: 28.36121,
|
|||
|
|
// longitude: 112.8179,
|
|||
|
|
// 模拟荣盛花语
|
|||
|
|
// latitude: 28.228445,
|
|||
|
|
// longitude: 112.877754,
|
|||
|
|
latitude: this.schoolInfo.latitude?this.schoolInfo.latitude:'',
|
|||
|
|
longitude: this.schoolInfo.longitude?this.schoolInfo.longitude:'',
|
|||
|
|
radius: 500,
|
|||
|
|
fillColor: '#69BFBE6A',
|
|||
|
|
color: '#acb0b7',
|
|||
|
|
strokeWidth: 2
|
|||
|
|
}
|
|||
|
|
this.circleArray.push(obj)
|
|||
|
|
console.log(this.circleArray);
|
|||
|
|
uni.authorize({
|
|||
|
|
scope: "scope.userLocation",
|
|||
|
|
success: (res) => {
|
|||
|
|
wx.getLocation({
|
|||
|
|
isHighAccuracy: true, // 开启地图精准定位
|
|||
|
|
altitude: true,
|
|||
|
|
type: 'gcj02', // 地图类型写这个
|
|||
|
|
success: (res) => {
|
|||
|
|
uni.showLoading({
|
|||
|
|
title: '定位中...',
|
|||
|
|
mask: true,
|
|||
|
|
})
|
|||
|
|
console.log(res);
|
|||
|
|
setTimeout(() => {
|
|||
|
|
this.latitude = Number(res.latitude.toFixed(6)),
|
|||
|
|
this.longitude =Number( res.longitude.toFixed(6))
|
|||
|
|
this.qqmapsdk.reverseGeocoder({
|
|||
|
|
location:{
|
|||
|
|
latitude:res.latitude,
|
|||
|
|
longitude:res.longitude
|
|||
|
|
},
|
|||
|
|
success:(data)=>{
|
|||
|
|
this.address = data.result.formatted_addresses.recommend;
|
|||
|
|
// this.latitude = data.location.lat,
|
|||
|
|
// this.longitude = data.location.lng
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
uni.hideLoading()
|
|||
|
|
const distance = this.getDistance(this.circleArray[0]
|
|||
|
|
.latitude, this
|
|||
|
|
.circleArray[0].longitude, this.latitude, this.longitude)
|
|||
|
|
console.log(distance.m);
|
|||
|
|
this.distance = distance.m
|
|||
|
|
}, 1000)
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
onShow() {},
|
|||
|
|
methods: {
|
|||
|
|
onRegionchange(e) {},
|
|||
|
|
clickcontrol: function() {
|
|||
|
|
uni.createMapContext("map").moveToLocation({ //moveToLocation将地图中心移动到当前定位点，需要配合map组件的show-location使用
|
|||
|
|
latitude: this.latitude,
|
|||
|
|
longitude: this.longitude,
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
deletePic(event) {
|
|||
|
|
const keyDelete = event.index
|
|||
|
|
let UrlsDateLIst = this.imageUrlsDate.filter((value, index, arr) => index !== keyDelete);
|
|||
|
|
this.imageUrlsDate = UrlsDateLIst;
|
|||
|
|
this[`fileList${event.name}`].splice(event.index, 1)
|
|||
|
|
},
|
|||
|
|
clickPreview(event) {
|
|||
|
|
// console.log(111);
|
|||
|
|
const {index} = event.currentTarget.dataset
|
|||
|
|
console.log(index);
|
|||
|
|
uni.previewImage({
|
|||
|
|
urls: this.imageUrlsDate,
|
|||
|
|
current: this.imageUrlsDate
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
async afterRead(event) {
|
|||
|
|
// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
|
|||
|
|
let lists = [].concat(event.file)
|
|||
|
|
let fileListLen = this[`fileList${event.name}`].length
|
|||
|
|
lists.map((item) => {
|
|||
|
|
this[`fileList${event.name}`].push({
|
|||
|
|
...item,
|
|||
|
|
status: 'uploading',
|
|||
|
|
message: '上传中'
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
for (let i = 0; i < lists.length; i++) {
|
|||
|
|
const result = await this.uploadFilePromise(lists[i].url)
|
|||
|
|
let item = this[`fileList${event.name}`][fileListLen]
|
|||
|
|
this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
|
|||
|
|
status: 'success',
|
|||
|
|
message: '',
|
|||
|
|
url: result
|
|||
|
|
}))
|
|||
|
|
fileListLen++
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
uploadFilePromise(url) {
|
|||
|
|
var that = this;
|
|||
|
|
const picUploadData = {
|
|||
|
|
creator: that.userInfo.name,
|
|||
|
|
business: 'school.revise',
|
|||
|
|
type: 'image',
|
|||
|
|
deviceid: that.userInfo.id,
|
|||
|
|
createtime: timestampFormatTime(),
|
|||
|
|
description: '',
|
|||
|
|
comment: ''
|
|||
|
|
};
|
|||
|
|
return new Promise((resolve, reject) => {
|
|||
|
|
let a = uni.uploadFile({
|
|||
|
|
url: that.baseURl + '/mdev/picture/upload',
|
|||
|
|
filePath: url,
|
|||
|
|
name: 'file',
|
|||
|
|
header: {
|
|||
|
|
'Content-Type': 'multipart/form-data;charset=utf-8'
|
|||
|
|
},
|
|||
|
|
formData: {
|
|||
|
|
jsondata: JSON.stringify(picUploadData),
|
|||
|
|
},
|
|||
|
|
success: (res) => {
|
|||
|
|
setTimeout(() => {
|
|||
|
|
const resImage = JSON.parse(res.data)?.data;
|
|||
|
|
console.log(resImage);
|
|||
|
|
if (!that.imageUrlsDate.includes(resImage.uri)) {
|
|||
|
|
that.imageUrlsDate.push(resImage.uri);
|
|||
|
|
}
|
|||
|
|
if (!that.imageID.includes(resImage.id)) {
|
|||
|
|
that.imageID.push(resImage.id);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
resolve(that.imageUrlsDate,that.imageID)
|
|||
|
|
}, 1000)
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
tapScan() {
|
|||
|
|
let _this = this;
|
|||
|
|
if(this.fileList3.length > 0){
|
|||
|
|
wx.scanCode({
|
|||
|
|
success: function(res) {
|
|||
|
|
if (res.result) {
|
|||
|
|
const datalist = {
|
|||
|
|
tagId: res.result,
|
|||
|
|
personId: _this.userInfo.id ? _this.userInfo.id : Math.round(Math.random() * 1000000),
|
|||
|
|
personName: _this.userInfo.name,
|
|||
|
|
personType: _this.userInfo.personType,
|
|||
|
|
longitude: _this.longitude,
|
|||
|
|
latitude: _this.latitude,
|
|||
|
|
address:_this.address,
|
|||
|
|
images: JSON.stringify(_this.imageID),
|
|||
|
|
imageUrls: JSON.stringify(_this.imageUrlsDate),
|
|||
|
|
};
|
|||
|
|
if (_this.userInfo.name) {
|
|||
|
|
postIotserver(datalist)
|
|||
|
|
.then((res) => {
|
|||
|
|
console.log(res.data.station, '222');
|
|||
|
|
const innerAudioContext = uni.createInnerAudioContext();
|
|||
|
|
innerAudioContext.autoplay = true;
|
|||
|
|
innerAudioContext.src = require('@/static/video/video.wav'); //音频地址
|
|||
|
|
innerAudioContext.onPlay(() => {
|
|||
|
|
console.log('开始播放');
|
|||
|
|
});
|
|||
|
|
_this.codeText = res.data.station + '---打卡成功'
|
|||
|
|
_this.codeTime = '当前时间:' + timestampFormatTime()
|
|||
|
|
})
|
|||
|
|
.catch((err) => {
|
|||
|
|
console.log(err, '5555');
|
|||
|
|
uni.showToast({
|
|||
|
|
title: err.msg + '请不要重复打卡'
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
} else {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '请登录账户'
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}else{
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '请先上传照片'
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
getDistance(la1, lo1, la2, lo2) {
|
|||
|
|
console.log(la1, lo1, la2, lo2);
|
|||
|
|
let La1 = la1 * Math.PI / 180.0;
|
|||
|
|
let La2 = la2 * Math.PI / 180.0;
|
|||
|
|
let La3 = La1 - La2;
|
|||
|
|
console.log(La3);
|
|||
|
|
let Lb3 = lo1 * Math.PI / 180.0 - lo2 * Math.PI / 180.0;
|
|||
|
|
let s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(La3 / 2), 2) + Math.cos(La1) * Math.cos(La2) * Math.pow(
|
|||
|
|
Math.sin(
|
|||
|
|
Lb3 / 2), 2)));
|
|||
|
|
|
|||
|
|
s = s * 6378.137;
|
|||
|
|
s = Math.round(s * 10000) / 10000;
|
|||
|
|
console.log(s, Math.round(s * 1000));
|
|||
|
|
return {
|
|||
|
|
km: s,
|
|||
|
|
m: Math.round(s * 1000)
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss">
|
|||
|
|
.map {
|
|||
|
|
position: relative;
|
|||
|
|
|
|||
|
|
.img-map2 {
|
|||
|
|
width: 60rpx;
|
|||
|
|
height: 60rpx;
|
|||
|
|
position: fixed;
|
|||
|
|
top: 0;
|
|||
|
|
right: 1vh;
|
|||
|
|
background-color: #FFFFFF;
|
|||
|
|
border-radius: 5px;
|
|||
|
|
}
|
|||
|
|
.punchabsent {
|
|||
|
|
text-align: center;
|
|||
|
|
width: 100px;
|
|||
|
|
height: 100px;
|
|||
|
|
border: 4px solid #ff0000;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
line-height: 100px;
|
|||
|
|
position: absolute;
|
|||
|
|
left: 50%;
|
|||
|
|
margin-left: -53px;
|
|||
|
|
margin-top: 50px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.punch {
|
|||
|
|
text-align: center;
|
|||
|
|
width: 100px;
|
|||
|
|
height: 100px;
|
|||
|
|
border: 4px solid #cfb56a;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
line-height: 100px;
|
|||
|
|
position: absolute;
|
|||
|
|
left: 50%;
|
|||
|
|
margin-left: -53px;
|
|||
|
|
margin-top: 50px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|