|
|
<!DOCTYPE html>
|
|
|
<html lang="en">
|
|
|
|
|
|
<head>
|
|
|
<meta charset="UTF-8">
|
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
|
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
|
|
|
<title>签到</title>
|
|
|
<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
|
|
|
<link rel="stylesheet" href="https://www.layuicdn.com/layui/css/layui.css" media="all">
|
|
|
</head>
|
|
|
<style>
|
|
|
html,
|
|
|
body {
|
|
|
height: 100%;
|
|
|
text-align: center
|
|
|
}
|
|
|
|
|
|
.info {
|
|
|
width: 26rem;
|
|
|
}
|
|
|
|
|
|
#container {
|
|
|
height: 40%;
|
|
|
width: 100%;
|
|
|
margin: 0 auto;
|
|
|
}
|
|
|
|
|
|
#distance {
|
|
|
margin: 10px;
|
|
|
|
|
|
font-size: 12px;
|
|
|
}
|
|
|
|
|
|
#insing {
|
|
|
height: 60%;
|
|
|
|
|
|
}
|
|
|
|
|
|
#time {
|
|
|
font-size: 16px;
|
|
|
color: #1e9fff;
|
|
|
font-weight: bold;
|
|
|
margin: 10px;
|
|
|
}
|
|
|
|
|
|
#signbtn {
|
|
|
margin: 30px auto;
|
|
|
width: 140px;
|
|
|
height: 140px;
|
|
|
border-radius: 50%;
|
|
|
background: linear-gradient(160deg, #FFFFFF 0%, #028CE4 100%);
|
|
|
/* box-shadow: 0px 0px 8px #25a4ff; */
|
|
|
font-size: 20px;
|
|
|
border: none;
|
|
|
}
|
|
|
|
|
|
#place {
|
|
|
margin: 0px auto;
|
|
|
height: 20px;
|
|
|
/* color: #FB9E14; */
|
|
|
/* width: 120px; */
|
|
|
font-size: 14px;
|
|
|
font-weight: 400;
|
|
|
padding-top: 1px;
|
|
|
}
|
|
|
|
|
|
.isdiy {
|
|
|
color: #2EC25B;
|
|
|
font-size: 14px;
|
|
|
/* background-color: #5fb878; */
|
|
|
}
|
|
|
|
|
|
.nodiy {
|
|
|
color: #FB9E14;
|
|
|
font-size: 14px;
|
|
|
|
|
|
/* background-color: #ff5722; */
|
|
|
}
|
|
|
|
|
|
.buttontime {
|
|
|
background: linear-gradient(162deg, #FFFFFF 0%, #CACADF 100%) !important;
|
|
|
|
|
|
}
|
|
|
|
|
|
.buttontior {
|
|
|
background: linear-gradient(162deg, #FFFFFF 0%, #FF5803 100%) !important;
|
|
|
|
|
|
}
|
|
|
|
|
|
.layui-form-switch {
|
|
|
width: -5%;
|
|
|
height: 20%;
|
|
|
background-color: #ff5722;
|
|
|
margin: 5px 0;
|
|
|
|
|
|
}
|
|
|
|
|
|
.layui-form-onswitch {
|
|
|
background-color: #009688;
|
|
|
|
|
|
}
|
|
|
|
|
|
.layui-form-switch em {
|
|
|
color: #ffffff !important;
|
|
|
}
|
|
|
|
|
|
#box {
|
|
|
position: fixed;
|
|
|
height: 60%;
|
|
|
|
|
|
bottom: 0;
|
|
|
margin: 10px auto;
|
|
|
width: 100%;
|
|
|
}
|
|
|
|
|
|
#history {
|
|
|
text-align: left;
|
|
|
margin: 10px auto;
|
|
|
width: 100%;
|
|
|
display: flex;
|
|
|
display: -webkit-flex;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
}
|
|
|
|
|
|
.layui-timeline-item {
|
|
|
position: relative;
|
|
|
padding-bottom: 5px;
|
|
|
}
|
|
|
|
|
|
.layui-text {
|
|
|
line-height: 15px;
|
|
|
font-size: 14px;
|
|
|
color: #666;
|
|
|
}
|
|
|
|
|
|
#weizhi {
|
|
|
margin-top: -8px;
|
|
|
display: block;
|
|
|
color: #009f95;
|
|
|
font-size: 11px;
|
|
|
}
|
|
|
|
|
|
.signtype {
|
|
|
color: orange;
|
|
|
font-style: normal;
|
|
|
}
|
|
|
|
|
|
#times {
|
|
|
font-weight: 400;
|
|
|
font-size: 14px;
|
|
|
color: #9096A3;
|
|
|
}
|
|
|
|
|
|
#location {
|
|
|
margin-top: 30px;
|
|
|
font-size: 12px;
|
|
|
color: #9096A3;
|
|
|
font-size: 14px;
|
|
|
font-weight: 400;
|
|
|
}
|
|
|
</style>
|
|
|
|
|
|
<body>
|
|
|
<div id='container'></div>
|
|
|
<div class="info" style="display: none;">
|
|
|
<h4 id='status'></h4>
|
|
|
<hr>
|
|
|
<p id='result'></p>
|
|
|
<hr>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div id="box">
|
|
|
|
|
|
<div id='times' style="margin-top: 50px;"></div>
|
|
|
<button id='signbtn' class="layui-btn layui-btn-normal">签到</button>
|
|
|
<br>
|
|
|
<div id="place" type="button" class="layui-btn-radius">非签到地点</div>
|
|
|
<div id='distance'>系统正在定位中</div>
|
|
|
<div id='location'>系统正在定位中</div>
|
|
|
</div>
|
|
|
<div id="insing" style="padding: 0px 15px;">
|
|
|
<div style="margin: 55px auto;font-size: 20px;color: #2EC25B;font-weight: 600;">已签到</div>
|
|
|
<div style="display: flex;font-size: 14px;font-weight: 400;">
|
|
|
<div style="color: #9096A3;width: 20%;text-align: right;">签到时间</div>
|
|
|
<div id="singtime" style="margin-left: 15px;color: #000000;width: 80%;text-align: left;">
|
|
|
</div>
|
|
|
</div>
|
|
|
<div style="display: flex;font-size: 14px;font-weight: 400;margin-top: 17px;">
|
|
|
<div style="color: #9096A3;width: 20%;text-align: right;">签到地址</div>
|
|
|
<div id="address" style="margin-left: 15px;color: #000000;width: 80%;text-align: left;"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<input type="hidden" id="isonoff" name="isonoff" value="true">
|
|
|
<input type="hidden" id="userid" name="userid" value="0">
|
|
|
<script>
|
|
|
window._AMapSecurityConfig = {
|
|
|
securityJsCode: 'cd2d30eb0306c1e356e5acb4584a3df4',
|
|
|
}
|
|
|
</script>
|
|
|
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
|
|
|
<script src="https://www.layuicdn.com/layui/layui.js" charset="utf-8"></script>
|
|
|
<script src="https://cdn.bootcss.com/layer/2.3/layer.js"></script>
|
|
|
<script type="text/javascript"
|
|
|
src="https://webapi.amap.com/maps?v=1.4.15&key=e4088b0a75957fc806662185b69f9ba6"></script>
|
|
|
<script
|
|
|
src="https://webapi.amap.com/maps?v=1.4.15&key=e4088b0a75957fc806662185b69f9ba6&plugin=AMap.CircleEditor"></script>
|
|
|
<!-- <script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script> -->
|
|
|
<script type="text/javascript">
|
|
|
let responseDatas;
|
|
|
let aa = window.location.search.substr(1);
|
|
|
let bb = aa.split('&')
|
|
|
let cc = bb[2].split('=')
|
|
|
document.cookie = `${bb[0]}; expires=Session; domain=.educoder.net;path=/`;
|
|
|
document.cookie = `${bb[1]}; ; expires=Session;domain=.educoder.net; path=/`;
|
|
|
var xhr = new window.XMLHttpRequest(); // 创建新的XHR对象
|
|
|
//测试环境
|
|
|
// let api = 'https://test-data.educoder.net';
|
|
|
//正式环境
|
|
|
let api = 'https://data.educoder.net';
|
|
|
var map = new AMap.Map('container', {
|
|
|
resizeEnable: true
|
|
|
});
|
|
|
xhr.withCredentials = true,
|
|
|
xhr.open('GET', `${api}/api/weapps/attendances/${cc[1]}.json`, true); // 设置请求类型和URL
|
|
|
|
|
|
xhr.onreadystatechange = function () { // 定义状态改变时的处理函数
|
|
|
if (xhr.readyState === 4 && xhr.status === 200) { // 当请求完成且返回正常结果时
|
|
|
var responseData = JSON.parse(xhr.responseText); // 将返回的文本转换为JSON格式
|
|
|
responseDatas = responseData;
|
|
|
if (responseData.has_sign_in) {
|
|
|
document.getElementById('signbtn').innerHTML = '已签到'
|
|
|
|
|
|
}
|
|
|
//定位
|
|
|
AMap.plugin('AMap.Geolocation', function () {
|
|
|
var geolocation = new AMap.Geolocation({
|
|
|
enableHighAccuracy: true,//是否使用高精度定位，默认:true
|
|
|
timeout: 10000, //超过10秒后停止定位，默认：5s
|
|
|
buttonPosition: 'RB', //定位按钮的停靠位置
|
|
|
buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
|
|
|
zoomToAccuracy: true, //定位成功后是否自动调整地图视野到定位点
|
|
|
|
|
|
});
|
|
|
map.addControl(geolocation);
|
|
|
geolocation.getCurrentPosition(function (status, result) {
|
|
|
if (status == 'complete') {
|
|
|
if (responseData.has_sign_in) {
|
|
|
document.getElementById('box').hidden = true
|
|
|
document.getElementById("singtime").innerHTML = responseData.has_sign_in_time;
|
|
|
document.getElementById("address").innerHTML = responseData.extra.location;
|
|
|
}
|
|
|
|
|
|
if (!responseData.has_sign_in) {
|
|
|
document.getElementById('insing').hidden = true
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
onComplete(result)
|
|
|
|
|
|
} else {
|
|
|
onError(result)
|
|
|
}
|
|
|
});
|
|
|
});
|
|
|
} else {
|
|
|
console.error("Error occurred while making the request."); // 若有错误则打印错误信息
|
|
|
}
|
|
|
};
|
|
|
xhr.send(); // 发送请求
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
//解析定位结果
|
|
|
function onComplete(data) {
|
|
|
|
|
|
|
|
|
document.getElementById('status').innerHTML = '定位成功'
|
|
|
var str = [];
|
|
|
str.push('定位结果：' + data.position);
|
|
|
// str.push('定位类别：' + data.location_type);
|
|
|
if (data.accuracy) {
|
|
|
str.push('精度：' + data.accuracy + ' 米');
|
|
|
}//如为IP精确定位结果则没有精度信息
|
|
|
str.push('是否经过偏移：' + (data.isConverted ? '是' : '否'));
|
|
|
document.getElementById('result').innerHTML = str.join('<br>');
|
|
|
|
|
|
getposition = [data.position.lng, data.position.lat];//获取当前位置的经纬度
|
|
|
var location = data.formattedAddress;//具体街道位置信息
|
|
|
console.log(getposition);
|
|
|
//这个地方是设置打卡的位置的
|
|
|
var shanghaizone = responseDatas.place;//设置的签到点
|
|
|
//计算当前位置与考勤点距离
|
|
|
var distance = AMap.GeometryUtil.distance(getposition, shanghaizone).toFixed(0);
|
|
|
|
|
|
console.log(distance);
|
|
|
//document.getElementById('distance').innerHTML = distancestr;
|
|
|
var setDistance = responseDatas.range;//设定的打卡距离
|
|
|
|
|
|
document.getElementById('location').innerHTML = location || "";
|
|
|
|
|
|
var distancestr = '仍距' + distance + '米';
|
|
|
console.log(distance, "distancestr:", distancestr);
|
|
|
|
|
|
if (distance <= setDistance) {
|
|
|
//在范围内
|
|
|
document.getElementById('distance').innerHTML = '</i><i class="layui-icon layui-icon-face-smile" style="font-size:12px; color:#17bc84;"> 你已进入签到范围 </i> ';
|
|
|
document.getElementById("place").hidden = true;
|
|
|
$("#place").addClass("isdiy");
|
|
|
|
|
|
} else {
|
|
|
//不在范围内
|
|
|
if (responseDatas.in_time) {
|
|
|
document.getElementById('distance').innerHTML = '<i class="layui-icon layui-icon-face-cry" style="font-size: 14px; color:red;"> 未进入签到地址打卡范围 </i><a style="color:#29a6ff;cursor:pointer" onClick="window.location.reload()">重新定位 </a> ';
|
|
|
document.getElementById("place").innerHTML = `超出指定范围<span style="color:#FA6400;">${distance}米</span>,请在指定签到范围内再次尝试签到`;
|
|
|
document.getElementById('signbtn').innerHTML = "无法签到"
|
|
|
$("#signbtn").addClass("buttontior");
|
|
|
$("#place").addClass("nodiy");
|
|
|
} else {
|
|
|
document.getElementById('distance').hidden = true
|
|
|
}
|
|
|
|
|
|
}
|
|
|
if (!responseDatas.in_time) {
|
|
|
|
|
|
document.getElementById("place").innerHTML = "当前不在可签到的时间范围，请在指定时间范围内再次尝试签到";
|
|
|
document.getElementById('signbtn').innerHTML = "无法签到"
|
|
|
$("#signbtn").addClass("buttontime");
|
|
|
$("#place").addClass("nodiy");
|
|
|
}
|
|
|
|
|
|
|
|
|
$("#signbtn").click(function () {
|
|
|
|
|
|
if (responseDatas.has_sign_in || !responseDatas.in_time) {
|
|
|
return
|
|
|
}
|
|
|
|
|
|
if (distance <= setDistance) {
|
|
|
//向后端发送请求
|
|
|
//获取经纬度时间地点
|
|
|
let extra = {
|
|
|
location: data.formattedAddress,
|
|
|
distance: distance,
|
|
|
}
|
|
|
let jsondatas = {
|
|
|
attendance_mode: 'QRCODE',
|
|
|
attendance_id: cc[1],
|
|
|
extra: extra
|
|
|
}
|
|
|
|
|
|
let jsondata = JSON.stringify(jsondatas);
|
|
|
// layer.msg("办公地点打卡");
|
|
|
|
|
|
|
|
|
var xhr = new window.XMLHttpRequest(); // 创建新的XHR对象
|
|
|
xhr.withCredentials = true,
|
|
|
xhr.open('POST', `${api}/api/weapps/course_member_attendances.json`, true); // 设置请求类型和URL
|
|
|
xhr.onreadystatechange = function () { // 定义状态改变时的处理函数
|
|
|
if (xhr.readyState === 4 && xhr.status === 200) { // 当请求完成且返回正常结果时
|
|
|
var responseData = JSON.parse(xhr.responseText); // 将返回的文本转换为JSON格式
|
|
|
if (responseData.status === 0) {
|
|
|
layer.msg("签到成功");
|
|
|
window.location.reload()
|
|
|
} else {
|
|
|
layer.msg(responseData.message);
|
|
|
|
|
|
}
|
|
|
} else {
|
|
|
console.error("Error occurred while making the request."); // 若有错误则打印错误信息
|
|
|
}
|
|
|
};
|
|
|
xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
|
|
|
xhr.send(jsondata); // 发送请求
|
|
|
} else {
|
|
|
//不在公司进行打卡 你可以设置 不可以打卡
|
|
|
layer.msg("您未进入签到地点，请先前往！");
|
|
|
}
|
|
|
});
|
|
|
|
|
|
|
|
|
//绘制签到范围 可以自己去修改 设置活着的数据
|
|
|
var circle = new AMap.Circle({
|
|
|
center: shanghaizone,
|
|
|
radius: responseDatas.range, //半径
|
|
|
borderWeight: 1,
|
|
|
strokeOpacity: 1,
|
|
|
strokeOpacity: 0.2,
|
|
|
fillOpacity: 0.4,
|
|
|
})
|
|
|
|
|
|
circle.setMap(map)
|
|
|
// 缩放地图到合适的视野级别
|
|
|
map.setFitView([circle])
|
|
|
var circleEditor = new AMap.CircleEditor(map, circle)
|
|
|
}
|
|
|
|
|
|
//解析定位错误信息
|
|
|
function onError(data) {
|
|
|
document.getElementById('location').innerHTML = '定位失败';
|
|
|
document.getElementById('location').innerHTML = '失败原因排查信息:' + data.message;
|
|
|
}
|
|
|
|
|
|
</script>
|
|
|
<script>
|
|
|
setInterval("document.getElementById('times').innerHTML=new Date().toLocaleString()+' 星期'+'日一二三四五六'.charAt(new Date().getDay());", 1000);
|
|
|
now = new Date(), hour = now.getHours();
|
|
|
if (hour > 12) {
|
|
|
$("#defshow").html(' <input id="shangxiaban" type="checkbox" name="close" lay-filter="switchTest" lay-skin="switch" lay-text="上班签到|下班签退">');
|
|
|
$("#isonoff").val(false);
|
|
|
}
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
|
</body>
|
|
|
|
|
|
</html> |
