|
@@ -1,10 +1,23 @@
|
|
|
-import { Component } from 'react'
|
|
|
+import React, { Component } from 'react'
|
|
|
import { connect } from 'react-redux'
|
|
|
-import {View} from '@tarojs/components'
|
|
|
+import {Map, OpenData, View} from '@tarojs/components'
|
|
|
+import Taro from '@tarojs/taro';
|
|
|
+import moment from 'moment';
|
|
|
+
|
|
|
+import ImagePicker from '../../components/common/imagePicker';
|
|
|
|
|
|
import { add, minus, asyncAdd } from '../../actions/counter'
|
|
|
|
|
|
+import {getPublicReleaseList,publicReleaseClockIn} from '../../utils/servers/servers';
|
|
|
+
|
|
|
import './index.less'
|
|
|
+import {AtIcon} from "taro-ui";
|
|
|
+
|
|
|
+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 }) => ({
|
|
@@ -24,11 +37,203 @@ class PunchClock extends Component {
|
|
|
constructor(props) {
|
|
|
super(props);
|
|
|
this.state={
|
|
|
-
|
|
|
+ imgs:[],
|
|
|
+ nowTime:'00:00:00',
|
|
|
+ newArrder:{},
|
|
|
+ addressLatitude:'',
|
|
|
+ addressLongitude:'',
|
|
|
+ distance:'',
|
|
|
+ dtails:{}
|
|
|
}
|
|
|
+ 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.nowTime = null;
|
|
|
}
|
|
|
|
|
|
+ qqmapsdk = new QQMapWX({
|
|
|
+ key: 'AWBBZ-GRAC2-JFYUO-CLA7I-JAHXK-YFFGT'
|
|
|
+ });
|
|
|
+
|
|
|
componentDidShow () {
|
|
|
+ //获得当前位置
|
|
|
+ Taro.getLocation({
|
|
|
+ type: 'gcj02',
|
|
|
+ isHighAccuracy:true,
|
|
|
+ success: (res)=> {
|
|
|
+ const latitude = res.latitude
|
|
|
+ const longitude = res.longitude
|
|
|
+ this.setState({
|
|
|
+ newArrder:{
|
|
|
+ latitude,
|
|
|
+ longitude
|
|
|
+ },
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ this.getPublicReleaseList(()=>{
|
|
|
+ Taro.startLocationUpdate({
|
|
|
+ success:()=>{
|
|
|
+ Taro.onLocationChange((v)=>{
|
|
|
+ console.log(1111111)
|
|
|
+ this.getSpacing(v.latitude,v.longitude)
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ });
|
|
|
+
|
|
|
+ this.nowTime = setInterval(()=>{
|
|
|
+ this.setState({
|
|
|
+ nowTime:moment().format('HH:mm:ss')
|
|
|
+ })
|
|
|
+ },1000)
|
|
|
+
|
|
|
+ // let token = Taro.getStorageSync('token');
|
|
|
+ // //建立连接
|
|
|
+ // Taro.connectSocket({
|
|
|
+ // header:{
|
|
|
+ // 'token': token,
|
|
|
+ // },
|
|
|
+ // url: "wss://uat.jishutao.com/websocket",
|
|
|
+ // // 172.16.0.188:8080
|
|
|
+ // // uat.jishutao.com
|
|
|
+ // })
|
|
|
+ //
|
|
|
+ // //连接成功
|
|
|
+ // Taro.onSocketOpen(function() {
|
|
|
+ // Taro.sendSocketMessage({
|
|
|
+ // data: 'stock',
|
|
|
+ // })
|
|
|
+ // })
|
|
|
+ //
|
|
|
+ // //接收数据
|
|
|
+ // Taro.onSocketMessage(function(data) {
|
|
|
+ // console.log(data,'接收数据')
|
|
|
+ // })
|
|
|
+ //
|
|
|
+ // //连接失败
|
|
|
+ // Taro.onSocketError(function() {
|
|
|
+ // console.log('websocket连接失败!');
|
|
|
+ // })
|
|
|
+ }
|
|
|
+
|
|
|
+ publicReleaseClockIn(){
|
|
|
+ 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){
|
|
|
+ getPublicReleaseList({
|
|
|
+ type:0,
|
|
|
+ clockTime:moment().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: {}
|
|
|
+ })
|
|
|
+ }else{
|
|
|
+ this.setState({
|
|
|
+ dtails:value.data.list[0],
|
|
|
+ addressLatitude:value.data.list[0].latitude,
|
|
|
+ addressLongitude:value.data.list[0].longitude,
|
|
|
+ },()=>{
|
|
|
+ fn();
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }else{
|
|
|
+ Taro.showToast({
|
|
|
+ title:v.error[0].message
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }).catch(()=>{
|
|
|
+ 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,
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }else{
|
|
|
+ Taro.showToast({
|
|
|
+ title:v.error[0].message
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }).catch(()=>{
|
|
|
+ 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
|
|
|
+ })
|
|
|
+ },
|
|
|
+ fail: function(error) {
|
|
|
+ console.error(error);
|
|
|
+ },
|
|
|
+ complete: function(res) {
|
|
|
+ console.log(res);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ componentWillUnmount() {
|
|
|
+ this.nowTime && this.nowTime.clearTimeout();
|
|
|
|
|
|
}
|
|
|
|
|
@@ -36,11 +241,111 @@ class PunchClock extends Component {
|
|
|
|
|
|
}
|
|
|
|
|
|
+ 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,
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
render () {
|
|
|
+ const {dtails} = this.state;
|
|
|
return (
|
|
|
- <View>
|
|
|
- 1
|
|
|
- </View>
|
|
|
+ Object.keys(dtails).length === 0 ?
|
|
|
+ <View>
|
|
|
+ 暂无任何公出申请
|
|
|
+ </View>:
|
|
|
+ <View className='punchClock'>
|
|
|
+ <View className='header'>
|
|
|
+ <View className='userAvatarUrl'>
|
|
|
+ <OpenData type='userAvatarUrl'/>
|
|
|
+ </View>
|
|
|
+ <View className='infor'>
|
|
|
+ <View className='name'>
|
|
|
+ {dtails.aname}
|
|
|
+ </View>
|
|
|
+ <View className='address'>
|
|
|
+ 公出企业:{dtails.nickname}
|
|
|
+ </View>
|
|
|
+ </View>
|
|
|
+ <View className='state' style={{
|
|
|
+ color:dtails.status === 0 ? '#f31212' :
|
|
|
+ dtails.status === 1 ? '#1d4fea' :
|
|
|
+ dtails.status === 2 ? '#767272' : ''
|
|
|
+ }}>
|
|
|
+ {
|
|
|
+ dtails.status === 0 ? '驳回' :
|
|
|
+ dtails.status === 1 ? '发起' :
|
|
|
+ dtails.status === 2 ? '通过' : ''
|
|
|
+ }
|
|
|
+ </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>
|
|
|
+
|
|
|
)
|
|
|
}
|
|
|
}
|