import React, { Component } from 'react' import { connect } from 'react-redux' import {Map, OpenData, View, Image, Text} from '@tarojs/components' import Taro from '@tarojs/taro'; import {AtIcon, AtModal} from "taro-ui"; import dayjs from 'dayjs'; import Skeleton from 'taro-skeleton' import HistoricalClock from '../../components/historicalClock'; import ImagePicker from '../../components/common/imagePicker'; import { add, minus, asyncAdd } from '../../actions/counter' import {getPublicReleaseList,publicReleaseClockIn} from '../../utils/servers/servers'; import './index.less' import switchIocn from '../../image/switch.png'; import Location from '../../image/location.png'; import PunchRange from '../../image/punchRange.png'; import 'taro-ui/dist/style/components/noticebar.scss'; import 'taro-ui/dist/style/components/icon.scss'; import 'taro-ui/dist/style/components/list.scss'; import {getClockState} from "../../utils/tools"; const QQMapWX = require('../../components/common/mapSDK/qqmap-wx-jssdk.min.js'); @connect(({ counter }) => ({ counter }), (dispatch) => ({ add () { dispatch(add()) }, dec () { dispatch(minus()) }, asyncAdd () { dispatch(asyncAdd()) } })) class PunchClocks extends Component { constructor(props) { super(props); this.state={ imgs:[], nowTime:'00:00:00', newArrder:{}, addressLatitude:'', addressLongitude:'', distance:'', dtails:{}, loading:true } this.onChange = this.onChange.bind(this); this.getSpacing = this.getSpacing.bind(this); this.getPublicReleaseList = this.getPublicReleaseList.bind(this); this.publicReleaseClockIn = this.publicReleaseClockIn.bind(this); this.refresh = this.refresh.bind(this); this.getDtails = this.getDtails.bind(this); } nowTime = null; mapCtx = Taro.createMapContext('map'); qqmapsdk = new QQMapWX({ key: 'AWBBZ-GRAC2-JFYUO-CLA7I-JAHXK-YFFGT' }); componentDidMount(){ this.getDtails(); } getDtails(){ this.getPublicReleaseList(()=>{ Taro.startLocationUpdate({ success:()=>{ Taro.onLocationChange((v)=>{ this.getSpacing(v.latitude,v.longitude) }) }, fail:(err)=>{ console.log(err,'err') Taro.getSetting({ success:(res)=>{ if (!res.authSetting['scope.userLocation']) { Taro.authorize({ scope: 'scope.userLocation', success:()=>{ }, fail:()=>{ this.setState({ isOpened:true }) } }) } } }) this.setState({ loading:false }) } }) }); } componentWillMount() { //获得当前位置 Taro.getLocation({ type: 'gcj02', isHighAccuracy:true, success: (res)=> { const latitude = res.latitude const longitude = res.longitude this.setState({ newArrder:{ latitude, longitude }, }) } }) this.nowTime = setInterval(()=>{ this.setState({ nowTime:dayjs().format('HH:mm:ss') }) },1000) Taro.eventCenter.on('punchClockComponentDidShow', () => { if(Object.keys(this.state.dtails).length === 0){ this.getDtails(); } }) Taro.eventCenter.on('GoPunchIn', (arg) => { this.setState({ dtails:arg, addressLatitude:parseFloat(arg.latitude), addressLongitude:parseFloat(arg.longitude), },()=>{ Taro.startLocationUpdate({ success:()=>{ Taro.onLocationChange((v)=>{ this.getSpacing(v.latitude,v.longitude) }) }, fail:()=>{ this.setState({ loading:false }) } }) }) }) } componentDidHide() { Taro.offLocationChange(); this.nowTime && this.nowTime.clearTimeout(); } publicReleaseClockIn(){ if(this.state.dtails.status === 3){ Taro.hideLoading() Taro.showToast({title:'申请已撤销,无法打卡',icon:'none'}); return ; } if(Object.keys(this.state.dtails).length === 0){ Taro.hideLoading() Taro.showToast({title:'暂无公出申请,无法打卡',icon:'none'}); return ; } if(isNaN(parseInt(this.state.distance))){ Taro.hideLoading() Taro.showToast({title:'定位错误,请联系管理员',icon:'none'}) return ; } if(dayjs().isBefore(this.state.dtails.releaseStarts) || dayjs().isAfter(this.state.dtails.releaseEnds)){ Taro.hideLoading() Taro.showToast({title:'当前时间不在打卡时间范围内,无法打卡',icon:'none'}) return ; } if(!(this.state.distance <=100 && this.state.distance >= 0)){ Taro.hideLoading() Taro.showToast({title:'当前位置未处于可打卡范围,无法打卡',icon:'none'}) return ; } if(this.state.imgs.length === 0){ Taro.hideLoading() Taro.showToast({title:'请上传打卡照片',icon:'none'}) return ; } publicReleaseClockIn({ id:this.state.dtails.id, photoUrl:this.state.imgs.join(',') }).then(v=>{ Taro.hideLoading() if(v.error.length === 0){ Taro.showToast({title:'打卡成功',icon:'none'}); this.imagePicker.clear(); this.state.dtails.clockIn = 1; this.setState({ dtails:this.state.dtails, imgs:[] }) }else{ Taro.showToast({title:v.error[0].message,icon:'none'}) } }).catch(()=>{ Taro.hideLoading() Taro.showToast({ title:'系统错误,请稍后再试', icon:'none' }) }) } getPublicReleaseList(fn){ this.setState({ loading:true }) getPublicReleaseList({ type:0, clockTime:dayjs().format('YYYY-MM-DD HH:mm:ss') }).then(v=>{ if(v.error.length === 0){ if(v.data.list.length === 0){ getPublicReleaseList({ type:0, }).then(value=>{ if(value.error.length === 0){ if(value.data.list.length === 0){ this.setState({ dtails: {}, loading:false }) }else{ this.setState({ dtails:value.data.list[0], addressLatitude:value.data.list[0].latitude, addressLongitude:value.data.list[0].longitude, },()=>{ fn(); }) } }else{ this.setState({ loading:false }) Taro.showToast({ title:v.error[0].message, icon:'none' }) } }).catch(()=>{ this.setState({ loading:false }) Taro.showToast({ title:'系统错误,请稍后再试', icon:'none' }) }) }else{ this.setState({ dtails:v.data.list[0], addressLatitude:v.data.list[0].latitude, addressLongitude:v.data.list[0].longitude, },()=>{ fn(); }) } }else{ this.setState({ loading:false }) Taro.showToast({ title:v.error[0].message, icon:'none' }) } }).catch((err)=>{ console.log(err) this.setState({ loading:false }) Taro.showToast({ title:'系统错误,请稍后再试', icon:'none' }) }) } getSpacing(latitude,longitude){ let _this = this; this.qqmapsdk.calculateDistance({ mode:'straight', from: { latitude: this.state.addressLatitude, longitude: this.state.addressLongitude, }, to: [ { latitude, longitude, } ], success: function(res) {//成功后的回调 _this.setState({ distance:res.result.elements[0].distance, loading:false }) }, fail: function(error) { _this.setState({ loading:false }) console.error(error); }, complete: function(res) { } }); } onChange(value,type){ let arr = this.state.imgs.concat([]); if(type === 'add'){ arr.push(value) }else if(type === 'remove'){ arr.splice(value,1) } this.setState({ imgs: arr, }) } refresh(){ this.getPublicReleaseList(()=>{ Taro.startLocationUpdate({ success:()=>{ Taro.onLocationChange((v)=>{ this.getSpacing(v.latitude,v.longitude) }) } }) }); } render () { const {dtails} = this.state; return ( { Object.keys(this.state.dtails).length <= 0 ? Taro.getStorageSync('userInfor').name: dtails.aname } 公出企业: { Object.keys(this.state.dtails).length <= 0 ? '无': dtails.nickname } { Object.keys(this.state.dtails).length <= 0 ? 刷新 : { getClockState(dtails.status).title } { Taro.switchTab({ url: '/pages/examine/index', }) }}> 切换打卡 } { Object.keys(this.state.dtails).length <= 0 ? 公出打卡 {this.state.nowTime} 暂无公出申请 { Taro.switchTab({ url: '/pages/applyDepart/index', }) }}> 点击前往申请公出 : 公出开始时间 {dtails.releaseStarts} 公出结束时间 {dtails.releaseEnds} 打卡拍照〔可以上传多张〕 { Taro.chooseImage({ count: 1, sizeType: ['compressed'], sourceType: ['camera'], success:(res)=> { // tempFilePath可以作为img标签的src属性显示图片 const tempFilePaths = res.tempFilePaths this.imagePicker.onImgChange([{url:tempFilePaths[0]}],'add',0,'camera') } }) }} value='camera' size='25' color='#4395ff'/> this.imagePicker = ref} url='/api/admin/release/upload' showAddBtn={false} onChange={this.onChange}/> { let _this = this; Taro.showLoading({title:'加载中...'}) Taro.getSetting({ success:(res)=>{ if (!res.authSetting['scope.userLocation']) { Taro.authorize({ scope: 'scope.userLocation', success:()=>{ _this.publicReleaseClockIn(); }, fail:()=>{ Taro.hideLoading() this.setState({ isOpened:true }) } }) }else{ _this.publicReleaseClockIn(); } } }) }} style={{ boxShadow: (!isNaN(parseInt(this.state.distance))) && this.state.distance <=100 && this.state.distance >= 0 && !(dayjs().isBefore(this.state.dtails.releaseStarts) || dayjs().isAfter(this.state.dtails.releaseEnds)) && dtails.status !== 3 ? (dtails.clockIn === 1 ? '1px 1px 15px 1px #3f82e8' : '1px 1px 15px 1px #659268') : '1px 1px 15px 1px #acb8ad', background: (!isNaN(parseInt(this.state.distance))) && this.state.distance <=100 && this.state.distance >= 0 && !(dayjs().isBefore(this.state.dtails.releaseStarts) || dayjs().isAfter(this.state.dtails.releaseEnds))&& dtails.status !== 3 ? (dtails.clockIn === 1 ? '#3f82e8' : '#72cb78') : '#acb8ad' }}> { dtails.clockIn === 1 ? '刷新打卡' : '公出打卡' } {this.state.nowTime} { this.mapCtx.moveToLocation(); }}> { this.mapCtx.moveToLocation({ latitude: this.state.addressLatitude, longitude: this.state.addressLongitude, }); }}> 紫色区域为可打卡区域 { this.setState({ historicalIsOpened:true }) }}> 查看公出申请日志 } { this.setState({ isOpened:false, }) }} onCancel={()=>{ this.setState({ isOpened:false, }) }} onConfirm={()=>{ this.setState({ isOpened:false, },()=>{ Taro.openSetting({ success:(value)=> { if(value.authSetting['scope.userLocation']){ Taro.getLocation({ type: 'gcj02', isHighAccuracy:true, success: (res)=> { const latitude = res.latitude const longitude = res.longitude this.setState({ newArrder:{ latitude, longitude }, }) } }) this.getDtails(); } } }) }) }} content='您拒绝了定位权限,请先前往设置打开定位权限' /> {this.state.historicalIsOpened ? { this.setState({ historicalIsOpened:false }) }} /> : null} ) } } export default PunchClocks