|
|
@@ -16,20 +16,21 @@
|
|
|
<text class="title">下班</text>
|
|
|
<text class="time">{{ signOutTime ||'未打卡'}}</text>
|
|
|
</view>
|
|
|
+ <view class="record-item" @click="getAddress">
|
|
|
+ <image :src="locationImg" class="icon"></image>
|
|
|
+ <text class="title">当前位置</text>
|
|
|
+ <text class="time">{{ address ||'点击获取定位'}}</text>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
- <!-- <map id="myMap" class="map" :latitude="latitude" :longitude="longitude" :markers="covers"> -->
|
|
|
- <!-- </map> -->
|
|
|
- <!-- <map id="myMap" class="map" :longitude="longitude" :latitude="latitude" show-location></map> -->
|
|
|
- <atl-map :mapKey="mapKey" :mapType="mapType">
|
|
|
- <template v-slot:content>
|
|
|
- <view style="position: absolute; bottom: 0; width: 100%; height: 24px; background-color: white">
|
|
|
- <view style="display: flex; align-items: center; justify-content: center">
|
|
|
- <image style="width: 24px; height: 24px" :src="imageSrc"></image>
|
|
|
- <text>内容插槽</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </template>
|
|
|
- </atl-map>
|
|
|
+ <atl-map :mapKey="mapKey" :mapType="mapType" @confirm="confirm" :marker="marker" :polygons="polygons"
|
|
|
+ :isPolygons="true">
|
|
|
+ <template v-slot:content>
|
|
|
+ <view style="position: absolute; bottom: 0; width: 100%; height: 24px; background-color: white">
|
|
|
+ <view style="display: flex; align-items: center; justify-content: center">
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+ </atl-map>
|
|
|
<view class="footer">
|
|
|
<button type="primary" @click="signIn">上班签到</button>
|
|
|
<button type="default" @click="signOut">下班签退</button>
|
|
|
@@ -38,17 +39,28 @@
|
|
|
</template>
|
|
|
|
|
|
|
|
|
-<script setup lang="ts">
|
|
|
- import { onMounted, reactive, ref } from 'vue';
|
|
|
+<script setup>
|
|
|
+ import {
|
|
|
+ onMounted,
|
|
|
+ reactive,
|
|
|
+ ref
|
|
|
+ } from 'vue';
|
|
|
|
|
|
import goToWorkImg from "/static/images/mine/goToWork.png";
|
|
|
import afterWorkImg from "/static/images/mine/afterWork.png";
|
|
|
import locationImg from "/static/images/mine/location.png";
|
|
|
+
|
|
|
+ import booleanPointInPolygon from "@turf/boolean-point-in-polygon";
|
|
|
+ import {
|
|
|
+ point,
|
|
|
+ polygon
|
|
|
+ } from "@turf/helpers";
|
|
|
// const UniMap = require('@/uni_modules/uni-map-common/uniCloud/cloudfunctions/common/uni-map-common');
|
|
|
- const disable=ref(true);
|
|
|
- const show=ref(true);
|
|
|
- const mapKey=ref('KJBBZ-5JCLZ-3NLXD-742CK-Y26UZ-X7BJN');
|
|
|
- const mapType=ref('tmap');
|
|
|
+
|
|
|
+ const mapKey = ref('KJBBZ-5JCLZ-3NLXD-742CK-Y26UZ-X7BJN');
|
|
|
+ const mapType = ref('tmap');
|
|
|
+ const address = ref('');
|
|
|
+
|
|
|
const currentDate = ref('2023-04-01');
|
|
|
const currentDay = ref('星期三');
|
|
|
const clockInStatus = ref('');
|
|
|
@@ -56,21 +68,50 @@
|
|
|
const signInTime = ref('09:00');
|
|
|
const signOutTime = ref('');
|
|
|
|
|
|
- const longitude = ref(119.22069399999998);
|
|
|
- const latitude = ref(25.955783999999984);
|
|
|
- const covers = reactive([{
|
|
|
+ const longitude = ref(0);
|
|
|
+ const latitude = ref(0);
|
|
|
+ const marker = reactive({
|
|
|
id: 1,
|
|
|
- longitude: longitude.value,
|
|
|
- latitude: latitude.value,
|
|
|
- iconPath: locationImg,
|
|
|
+ latitude: 25.958812,
|
|
|
+ longitude: 119.213036,
|
|
|
+ // iconPath: locationImg,
|
|
|
width: 50, // 标记的宽度
|
|
|
- height: 50 // 标记的高度
|
|
|
- }])
|
|
|
+ height: 50, // 标记的高度
|
|
|
+ title: '宇光同行'
|
|
|
+ })
|
|
|
+ const polygons = reactive([{
|
|
|
+ points: [{
|
|
|
+ latitude: 25.9591401,
|
|
|
+ longitude: 119.21292356
|
|
|
+ },
|
|
|
+ {
|
|
|
+ latitude: 25.95828592,
|
|
|
+ longitude: 119.21261955
|
|
|
+ },
|
|
|
+ {
|
|
|
+ latitude: 25.9576709,
|
|
|
+ longitude: 119.21458294
|
|
|
+ },
|
|
|
+ {
|
|
|
+ latitude: 25.95845106,
|
|
|
+ longitude: 119.21486162
|
|
|
+ },
|
|
|
+ {
|
|
|
+ latitude: 25.9591401,
|
|
|
+ longitude: 119.21292356
|
|
|
+ }
|
|
|
+
|
|
|
+ ],
|
|
|
+ strokeWidth: 1,
|
|
|
+ strokeColor: "#ff000066",
|
|
|
+ fillColor: "#ff000016",
|
|
|
+ }, ])
|
|
|
|
|
|
|
|
|
|
|
|
onMounted(() => {
|
|
|
dateInit();
|
|
|
+ getlocation();
|
|
|
});
|
|
|
|
|
|
|
|
|
@@ -89,32 +130,34 @@
|
|
|
}
|
|
|
|
|
|
function signIn() {
|
|
|
- // let uniMap = new UniMap({
|
|
|
- // provider: "qqmap", // 指定使用哪家地图供应商
|
|
|
- // key: "KJBBZ-5JCLZ-3NLXD-742CK-Y26UZ-X7BJN"
|
|
|
- // });
|
|
|
- // // 调用API
|
|
|
- // let result = uniMap.ip2location({
|
|
|
- // ip: "111.206.145.41"
|
|
|
- // });
|
|
|
- // console.log("result", result);
|
|
|
getlocation();
|
|
|
+ tranAddress();
|
|
|
+ clockIn();
|
|
|
};
|
|
|
|
|
|
function signOut() {
|
|
|
- console.log('下班签退');
|
|
|
+ getlocation();
|
|
|
+ tranAddress();
|
|
|
+ const flag= clockIn();
|
|
|
+ if(flag){
|
|
|
+ var now = new Date();
|
|
|
+ var hours = now.getHours();
|
|
|
+ var minutes = now.getMinutes();
|
|
|
+ signOutTime.value=hours+':'+minutes;
|
|
|
+ }
|
|
|
};
|
|
|
|
|
|
+
|
|
|
+ //获取当前定位经纬度
|
|
|
function getlocation() {
|
|
|
- uni.getLocation({
|
|
|
- type: 'wgs84',
|
|
|
+ wx.getLocation({
|
|
|
+ type: 'gcj02',
|
|
|
success: (res) => {
|
|
|
+ console.log(res);
|
|
|
console.log('当前位置的经度：' + res.longitude);
|
|
|
console.log('当前位置的纬度：' + res.latitude);
|
|
|
- this.longitude = res.longitude
|
|
|
- this.latitude = res.latitude
|
|
|
- // 调用后端接口根据得到的经纬度获取地址
|
|
|
- console.log(res, "根据经纬度获取地址");
|
|
|
+ longitude.value=res.longitude;
|
|
|
+ latitude.value=res.latitude;
|
|
|
},
|
|
|
// 若用户点击拒绝获取位置则弹出提示
|
|
|
fail: (err) => {
|
|
|
@@ -156,7 +199,62 @@
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
- })
|
|
|
+ });
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ //获取当前精确地址
|
|
|
+ async function getAddress() {
|
|
|
+ getlocation();
|
|
|
+ // console.log(latitude.value)
|
|
|
+ tranAddress();
|
|
|
+ }
|
|
|
+
|
|
|
+ //经纬度转地址
|
|
|
+ function tranAddress(){
|
|
|
+ let locationStr = latitude.value+','+longitude.value
|
|
|
+ uni.request({
|
|
|
+ url: 'https://apis.map.qq.com/ws/geocoder/v1/?location=' + locationStr + '&key=' + mapKey.value +
|
|
|
+ '&get_poi=1',
|
|
|
+ method: 'GET',
|
|
|
+ data: {
|
|
|
+ // 这里可以添加一些GET请求的参数
|
|
|
+ },
|
|
|
+ success: function(res) {
|
|
|
+ console.log('请求成功', res.data);
|
|
|
+ address.value = res.data.result.address;
|
|
|
+ },
|
|
|
+ fail: function(err) {
|
|
|
+ console.error('请求失败', err);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ //打卡
|
|
|
+ function clockIn() {
|
|
|
+ const _polygons = polygons.map((polygon) => {
|
|
|
+ return polygon.points.map((i) => [
|
|
|
+ Number(i.longitude),
|
|
|
+ Number(i.latitude),
|
|
|
+ ]);
|
|
|
+ });
|
|
|
+ const _point = point([longitude.value, latitude.value]);
|
|
|
+ const _polygon = polygon(_polygons);
|
|
|
+ // 根据电子围栏判断否禁用
|
|
|
+ const f = booleanPointInPolygon(_point, _polygon);
|
|
|
+ // console.log(f);
|
|
|
+ if (f) {
|
|
|
+ uni.showToast({
|
|
|
+ title: "打卡成功",
|
|
|
+ icon: 'none'
|
|
|
+ });
|
|
|
+ return true;
|
|
|
+ } else {
|
|
|
+ uni.showToast({
|
|
|
+ title: "未在指定范围，打卡失败",
|
|
|
+ icon: 'none'
|
|
|
+ })
|
|
|
+ }
|
|
|
}
|
|
|
</script>
|
|
|
|
wangpx