服务器配置

zengh

2022-09-14 8ea19a6bb34daab1410f6186992a4c1e90299c92

 pages/clockSignIn/clockSignIn.vue

@@ -1,6 +1,54 @@
<template>
   <view class="content">
      <web-view :src="urls"></web-view>
      <!-- 自定义顶部导航栏 -->
      <u-navbar 
         :is-back="true" 
         title="考勤打卡" 
         :background="background"
         back-icon-color="#FFF"
         title-color="#FFF"
         >
         <view class="navbar-right" slot="right">考勤记录</view>	
      </u-navbar>
      <view class="clock-time-background"></view>
      <view class="clock-time">
         <view class="clock-info">
            <view class="clock-left">
               <view class="clock-up-radiu"></view>
               <view class="clock-line"></view>
               <view class="clock-down-radiu"></view>
            </view>
            <view class="clock-right">
               <view class="up-time">上班时间:&nbsp;08:30</view>
               <view class="clock-btn">
                  <view class="btn1">
                     <view class="btn0">
                        <view class="btn">
                           <view class="btn-title" @click="goClock()">打卡</view>
                           <view class="btn-time">{{nowTime}}</view>
                        </view>
                     </view>
                  </view>
               </view>
               <view class="clock-position-info">
                  <view class="clock-position-box">
                     <view class="clock-position" v-if="isPositionThan==true">
                        <image src="../../static/images/clock/position01.png"/>
                        &nbsp;您已进入考勤范围:&nbsp;{{address}}</view>
                     <view class="clock-position" v-if="isPositionThan==false">
                        <image src="../../static/images/clock/position01.png"/>
                        &nbsp;不在考勤范围:&nbsp;{{address}}</view>
                  </view>
               </view>
					
               <view class="down-time">下班时间:&nbsp;18:00</view>
            </view>
         </view>
      </view>
      <iframe id="geoPage" width=0 height=0 frameborder=0  style="display:none;" scrolling="no"
          src="https://apis.map.qq.com/tools/geolocation?key=T7RBZ-62U3X-RSQ4P-ZZVCB-WE7JT-HRBOG&referer=myapp">
      </iframe>
      <!-- <web-view :src="urls"></web-view> -->
   </view>
</template>

@@ -8,18 +56,420 @@
   export default {
      data() {
         return {
            urls: ''
            urls: '',
            nowTime:'',
            name:'',
            code:'',
            jd:'',
            wd:'',
            address:'',
            isPositionThan:false,
            background:{
               backgroundColor:"#0BB9C8"
            }
         }
      },
      methods: {},
      mounted() {},
      mounted() {
         //获取当前位置信息
         this.getNowPosition();
         //获取时钟
         setInterval(() => {
             this.nowTime = this.getNowTime(3)
         }, 1000);
      },
      onLoad: function(options) {
         //获取个人信息
         this.getOneselfInFo();
         //long 转换为字符串
         var code = JSON.stringify(this.$store.state.puserID.toString());
         this.urls = "http://s16s652780.51mypc.cn/xcxjingqingmap_clock_sign_in/xcxmap.html?snumber="+code;
         this.urls = "http://106.225.193.35:83/xcxjingqingmap_clock_sign_in/xcxmap.html?snumber="+code;
      },
      methods: {
         //获取当前位置信息
         getNowPosition(){
            var that = this;
            uni.getLocation({
                type: 'wgs84',
               geocode:'true',
                success: function (res) {
                    console.log('当前位置：' + res);
                    console.log('当前位置longitude：' + res.longitude);
                    console.log('当前位置latitude：' + res.latitude);
                  //114.921652006005 25.8457176283118
                  // that.jd =  '114.921652006005';
                  // that.wd =  '25.8457176283118';
                  that.jd =  res.longitude;
                  that.wd =  res.latitude;
                  //通过经纬度换算详细地址
                  that.getAddress();
                  //位置比对
                  that.positionThan();
                }
            });
         },
         //返回上一页
         goBack() {
            uni.navigateBack({})
         },
         //通过经纬度换算详细地址
         getAddress(){
            var that = this;
            uni.request({
               url: `https://fmap.sf-express.com/rgeo/api`,
               method: "GET",
               data:{
                  x: that.jd,
                  y: that.wd,
                  ak: '1986afc8a5744263971b7f2482253dfc'
               },
               header:{
                  'Content-type':'application/x-www-form-urlencoded'
               },
               success(res) {
                  that.address = res.data.result.pois[0].name
               }
            })
         },
         //比对考勤位置
         positionThan(){
            var that = this;
            uni.request({
               url: this.$store.state.piAPI + `/attendance/positionThan`,
               method: "GET",
               data:{
                  number: this.code,
                  jd: this.jd,
                  wd: this.wd
               },
               header:{
                  'Content-type':'application/x-www-form-urlencoded'
               },
               success(resdata) {
                  //不在考勤范围内
                  resdata.data.data==true?that.isPositionThan = true:that.isPositionThan = false;
               }
            })
         },
			
         //获取个人信息
         getOneselfInFo() {
             var that = this;
             //保安信息查询
            uni.request({
               url:that.$store.state.piAPI + '/blade-user/details?id='+this.$store.state.puserID,
               method:'POST',
               success(resdata) {
                  that.name = resdata.data.data.realName;
                  that.code = resdata.data.data.code;
               }
            })
         },
			
         //去打卡
         goClock() {
             var that = this;
             uni.request({
                url: this.$store.state.BaopiAPI + `/attendance/AppSave`,
               method: "POST",
               data:{
                   number: this.code,
                   name: this.name,
                   clockTime: this.getNowTime(1),
                   jd: this.jd,
                   wd: this.wd,
                   address: this.address
               },
               header:{
                  'Content-type':'application/x-www-form-urlencoded'
               },
               success(resdata) {
                  //不在考勤范围内
                  if (resdata.data.code == 400) {
                     uni.showToast({
                         title: '不在考勤范围,打卡失败!',
                        icon:'none',
                         duration: 2000
                     });
                  }
                  //打卡成功
                  if (resdata.data.code == 200) {
                     uni.showToast({
                         title: '打卡成功!',
                        icon:'success',
                         duration: 2000
                     });
                  }
               }
             })
         },
			
         //获取当前时间
         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;
             }
            if (type == 3) {
                nowstr = hour + ":" + minute + ":" + second;
            }
             return nowstr;
         },
      },
		
   }
</script>

<style>
   page{
      width: 100%;
      height: 100%;
      /* background-color: #FCFBFC; */
      background-color: #F7f7f7;
   }
</style>

<style lang="scss" scoped>
	
   .btn0{
      width: 6.5rem;
      height: 6.5rem;
      // background-image: linear-gradient(to bottom,#C6F1E2,#C6F1E2);
      background-color: #C6F1E2;
      border-radius: 100px;
      display: flex;
      align-items: center;
      justify-content: center;
   }
	
   .btn1{
      width: 7rem;
      height: 7rem;
      // background-image: linear-gradient(to bottom,#EBF2F0,#EBF2F0);
      background-color: #EBF2F0;
      border-radius: 100px;
      display: flex;
      align-items: center;
      justify-content: center;
   }
	
	
   .navbar-right{
      color: #fff;
      font-size: 0.7rem;
      margin-right: 1.5rem;
      margin-top: 0.2rem;
   }
	
   .content{
      width: 100%;
      height: 100%;
		
      .uni-nav-bar-info {
         display: flex;
         flex-direction: row;
         align-items: center;
         // background-color:#0078A8;
         width: 92%;
         margin: 0 auto;
         height: 50px;
         margin-top: 20px;
			
         .uni-nav-bar-left {
            width: 15%;
            display: flex;
            justify-items: center;
				
            image {
               background-color: #00BFFF;
               width: 1.6rem;
               height: 1.6rem;
            }
         }
		
         .title {
            width: 70%;
            font-weight: 550;
            letter-spacing: 1px;
            text-align: center;
         }
		
		
         .right {
            width: 15%;
            display: flex;
            justify-items: center;
            margin-top: 0.2rem;
				
            .title-right {
               font-size: 0.8rem;
               color: #808080;
            }
         }
		
		
      }
		
		
      .clock-time-background{
         width: 100%;
         height: 15rem;
         // background-color: #F5F5F5;
         background-color: #F3F3F3;
      }
		
		
      .clock-time{
         width: 100%;
         height: 20rem;
         margin-top: -15rem;
         // background-color: #0078A8;
			
         .clock-info{
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: row;
            // margin: 0 auto;
				
            .clock-left{
               width: 10%;
               margin-top: -1rem;
               margin-left: 8%;
               display: flex;
               flex-direction: column;
               // background-color: #00FFFF;
               align-items: center;
               justify-content: center;
					
               .clock-up-radiu{
                  width: 0.9rem;
                  height: 0.9rem;
                  border-radius: 100px;
                  border: 2px solid #6DC7A9;
               }
					
               .clock-line{
                  width: 1.5px;
                  height: 15rem;
                  background-color: #EDEDED;
               }
					
               .clock-down-radiu{
                  width: 0.9rem;
                  height: 0.9rem;
                  border-radius: 100px;
                  border: 2px solid #6DC7A9;
               }
					
            }
				
            .clock-right{
               width: 64%;
               height: 100%;
               margin-top: 1rem;
               display: flex;
               flex-direction: column;
					
               .up-time{
                  width: 100%;
                  height: 1.5rem;
                  margin-top: -0.2rem;
               }
					
               .clock-btn{
                  width: 100%;
                  height: 9.5rem;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  // background-color: #007AFF;
                  // margin-left: 5rem;
						
						
                  .btn{
                     width: 6rem;
                     height: 6rem;
                     border-radius: 100px;
                     color: #FFFFFF;
                     background-image: linear-gradient(to bottom,#0FD0E1,#0FD0E1);
                     display: flex;
                     flex-direction: column;
                     align-items: center;
                     justify-content: center;
							
                     .btn-title{
                        font-size: 1.2rem;
                     }
                  }
               }
					
               .clock-position-info{
                  width: 100%;
                  display: flex;
                  // align-items: center;
                  // justify-content: center;
                  text-align: center;
               }
					
               .clock-position-box {
                  width: 100%;
                  display: flex;
                  justify-content: center;
                  font-size: 0.8rem;
               }
				
               .clock-position{
                  height: 2rem;
                  // float: left;
                  // display: flex;
                  // align-items: center;
                  // justify-content: center;
						
                  image{
                     width: 1.5rem;
                     height: 1.2rem;
                     float: left;
                     // margin-left: 2rem;
                  }
						
               }
					
					
               .down-time{
                  height: 7rem;
                  line-height: 7rem;
						
                  // margin-top: 2.3rem;
               }
            }
         }
      }
   }
	
</style>