|
@@ -1,460 +1,20 @@
|
|
|
-import React, { Component } from 'react'
|
|
|
-import { connect } from 'react-redux'
|
|
|
-import {Map, OpenData, View, Image} from '@tarojs/components'
|
|
|
-import Taro from '@tarojs/taro';
|
|
|
-import {AtIcon} from "taro-ui";
|
|
|
-import dayjs from 'dayjs';
|
|
|
-import Skeleton from 'taro-skeleton'
|
|
|
+import React,{Component} from "react";
|
|
|
+import PunchClocks from './punchClocks';
|
|
|
+import MessageNoticebar from "../../components/common/messageNoticebar";
|
|
|
|
|
|
-import ImagePicker from '../../components/common/imagePicker';
|
|
|
-import MessageNoticebar from '../../components/common/messageNoticebar';
|
|
|
-
|
|
|
-import { add, minus, asyncAdd } from '../../actions/counter'
|
|
|
-
|
|
|
-import {getPublicReleaseList,publicReleaseClockIn} from '../../utils/servers/servers';
|
|
|
-
|
|
|
-import './index.less'
|
|
|
-
|
|
|
-import switchIocn from '../../image/switch.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';
|
|
|
-
|
|
|
-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 PunchClock extends Component {
|
|
|
+class PunchClock 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);
|
|
|
- }
|
|
|
-
|
|
|
- nowTime = null;
|
|
|
-
|
|
|
- qqmapsdk = new QQMapWX({
|
|
|
- key: 'AWBBZ-GRAC2-JFYUO-CLA7I-JAHXK-YFFGT'
|
|
|
- });
|
|
|
-
|
|
|
- componentWillUnmount() {
|
|
|
- Taro.offLocationChange();
|
|
|
- this.nowTime && this.nowTime.clearTimeout();
|
|
|
- }
|
|
|
-
|
|
|
- componentDidMount(){
|
|
|
- this.getPublicReleaseList(()=>{
|
|
|
- Taro.startLocationUpdate({
|
|
|
- success:()=>{
|
|
|
- Taro.onLocationChange((v)=>{
|
|
|
- this.getSpacing(v.latitude,v.longitude)
|
|
|
- })
|
|
|
- },
|
|
|
- fail:()=>{
|
|
|
- this.setState({
|
|
|
- loading:false
|
|
|
- })
|
|
|
- }
|
|
|
- })
|
|
|
- });
|
|
|
- }
|
|
|
-
|
|
|
- componentDidShow() {
|
|
|
-
|
|
|
- //获得当前位置
|
|
|
- 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('GoPunchIn', (arg) => {
|
|
|
- console.log(arg,'222')
|
|
|
- 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
|
|
|
- })
|
|
|
- }
|
|
|
- })
|
|
|
- })
|
|
|
- })
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- publicReleaseClockIn(){
|
|
|
- if(Object.keys(this.state.dtails).length === 0){
|
|
|
- Taro.showToast({title:'暂无公出申请,无法打卡',icon:'none'})
|
|
|
- return ;
|
|
|
- }
|
|
|
- if(isNaN(parseInt(this.state.distance))){
|
|
|
- Taro.showToast({title:'定位错误,请联系管理员',icon:'none'})
|
|
|
- return ;
|
|
|
- }
|
|
|
- if(!(this.state.distance <=50 && this.state.distance >= 0)){
|
|
|
- Taro.showToast({title:'当前位置未处于可打卡范围,无法打卡',icon:'none'})
|
|
|
- return ;
|
|
|
- }
|
|
|
- if(this.state.imgs.length === 0){
|
|
|
- Taro.showToast({title:'请上传打卡照片',icon:'none'})
|
|
|
- return ;
|
|
|
- }
|
|
|
- publicReleaseClockIn({
|
|
|
- id:this.state.dtails.id,
|
|
|
- photoUrl:this.state.imgs.join(',')
|
|
|
- }).then(v=>{
|
|
|
- if(v.error.length === 0){
|
|
|
- Taro.showToast({title:'打卡成功',icon:'none'})
|
|
|
- }else{
|
|
|
- Taro.showToast({title:v.error[0].message,icon:'none'})
|
|
|
- }
|
|
|
- }).catch(()=>{
|
|
|
- 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) {
|
|
|
- console.log(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;
|
|
|
+ render() {
|
|
|
return (
|
|
|
- <View className='punchClock'>
|
|
|
+ <>
|
|
|
<MessageNoticebar/>
|
|
|
- <View className='header'>
|
|
|
- <Skeleton
|
|
|
- title
|
|
|
- avatar
|
|
|
- row={1}
|
|
|
- animateName='elastic'
|
|
|
- avatarShape='square'
|
|
|
- loading={this.state.loading}
|
|
|
- >
|
|
|
- <View className='headerContent'>
|
|
|
- <View className='userAvatarUrl'>
|
|
|
- <OpenData type='userAvatarUrl'/>
|
|
|
- </View>
|
|
|
- <View className='infor'>
|
|
|
- <View className='name'>
|
|
|
- {
|
|
|
- Object.keys(this.state.dtails).length <= 0 ?
|
|
|
- Taro.getStorageSync('userInfor').name:
|
|
|
- dtails.aname
|
|
|
- }
|
|
|
- </View>
|
|
|
- <View className='address'>
|
|
|
- 公出企业:
|
|
|
- {
|
|
|
- Object.keys(this.state.dtails).length <= 0 ?
|
|
|
- '无':
|
|
|
- dtails.nickname
|
|
|
- }
|
|
|
- </View>
|
|
|
- </View>
|
|
|
- {
|
|
|
- Object.keys(this.state.dtails).length <= 0 ?
|
|
|
- <View onClick={this.refresh} className='state' style={{
|
|
|
- alignSelf: 'center',
|
|
|
- textAlign:'center',
|
|
|
- color:'#b6b5b5',
|
|
|
- fontSize:'11px'
|
|
|
- }}>
|
|
|
- <AtIcon value='reload' size='20'/>
|
|
|
- <View>刷新</View>
|
|
|
- </View> :
|
|
|
- <View className='state' style={{
|
|
|
- color:dtails.status === 0 ? '#f31212' :
|
|
|
- dtails.status === 1 ? '#1d4fea' :
|
|
|
- dtails.status === 2 ? '#767272' : ''
|
|
|
- }}>
|
|
|
- <View>
|
|
|
- {
|
|
|
- dtails.status === 0 ? '驳回' :
|
|
|
- dtails.status === 1 ? '审核中' :
|
|
|
- dtails.status === 2 ? '通过' : ''
|
|
|
- }
|
|
|
- </View>
|
|
|
- <Image src={switchIocn} className='switchItem' onClick={()=>{
|
|
|
- Taro.switchTab({
|
|
|
- url: '/pages/examine/index',
|
|
|
- })
|
|
|
- }}/>
|
|
|
- </View>
|
|
|
- }
|
|
|
- </View>
|
|
|
- </Skeleton>
|
|
|
- </View>
|
|
|
- {
|
|
|
- Object.keys(this.state.dtails).length <= 0 ?
|
|
|
- <View className='content'>
|
|
|
- <View className='punchClockContent' onClick={this.publicReleaseClockIn} style={{
|
|
|
- boxShadow: '1px 1px 15px 1px #acb8ad',
|
|
|
- background: '#acb8ad',
|
|
|
- marginTop: '85px',
|
|
|
- }}>
|
|
|
- <View className='punchClockTitle'>公出打卡</View>
|
|
|
- <View className='punchClockTime'>{this.state.nowTime}</View>
|
|
|
- </View>
|
|
|
- <View className='noData'>
|
|
|
- <View className='tipsNoData'>
|
|
|
- 暂无公出申请
|
|
|
- </View>
|
|
|
- <View className='goOut' onClick={()=>{
|
|
|
- Taro.switchTab({
|
|
|
- url: '/pages/applyDepart/index',
|
|
|
- })
|
|
|
- }}>
|
|
|
- 点击前往申请公出
|
|
|
- </View>
|
|
|
- </View>
|
|
|
- </View>:
|
|
|
- <View className='content'>
|
|
|
- <View className='timeContent'>
|
|
|
- <View className='timeItem'>
|
|
|
- <View className='timeTitle'>公出开始时间</View>
|
|
|
- <View className='timeValue'>{dtails.releaseStarts}</View>
|
|
|
- </View>
|
|
|
- <View className='timeItem'>
|
|
|
- <View className='timeTitle'>公出结束时间</View>
|
|
|
- <View className='timeValue'>{dtails.releaseEnds}</View>
|
|
|
- </View>
|
|
|
- </View>
|
|
|
- <View className='photographContent'>
|
|
|
- <View className='photographTitle'>打卡拍照</View>
|
|
|
- <AtIcon onClick={()=>{
|
|
|
- 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'/>
|
|
|
- </View>
|
|
|
- <View style={{alignSelf:'flex-start',width:'100%'}}>
|
|
|
- <ImagePicker ref={ref => this.imagePicker = ref} url='/api/admin/release/upload' showAddBtn={false} onChange={this.onChange}/>
|
|
|
- </View>
|
|
|
- <View className='punchClockContent' onClick={this.publicReleaseClockIn} style={{
|
|
|
- boxShadow: (!isNaN(parseInt(this.state.distance))) && this.state.distance <=50 && this.state.distance >= 0 ? '1px 1px 15px 1px #659268' : '1px 1px 15px 1px #acb8ad',
|
|
|
- background: (!isNaN(parseInt(this.state.distance))) && this.state.distance <=50 && this.state.distance >= 0 ? '#72cb78' : '#acb8ad'
|
|
|
- }}>
|
|
|
- <View className='punchClockTitle'>公出打卡</View>
|
|
|
- <View className='punchClockTime'>{this.state.nowTime}</View>
|
|
|
- </View>
|
|
|
- <View className='map'>
|
|
|
- <Map
|
|
|
- {...this.state.newArrder}
|
|
|
- style={{
|
|
|
- height:'300px',
|
|
|
- width:'100%'
|
|
|
- }}
|
|
|
- circles={[
|
|
|
- {
|
|
|
- latitude: this.state.addressLatitude,
|
|
|
- longitude: this.state.addressLongitude,
|
|
|
- color: '#c92ddc82',
|
|
|
- fillColor: '#c92ddc82',
|
|
|
- radius: 50,
|
|
|
- strokeWidth: 1
|
|
|
- }
|
|
|
- ]}
|
|
|
- showLocation
|
|
|
- showCompass
|
|
|
- />
|
|
|
- </View>
|
|
|
- <View className='tips'>紫色区域为可打卡区域</View>
|
|
|
- </View>
|
|
|
- }
|
|
|
- </View>
|
|
|
+ <PunchClocks/>
|
|
|
+ </>
|
|
|
)
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-export default PunchClock
|
|
|
-
|
|
|
+export default PunchClock;
|