index.jsx 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453
  1. import React, { Component } from 'react'
  2. import { connect } from 'react-redux'
  3. import {Map, OpenData, View, Image} from '@tarojs/components'
  4. import Taro from '@tarojs/taro';
  5. import {AtIcon} from "taro-ui";
  6. import dayjs from 'dayjs';
  7. import Skeleton from 'taro-skeleton'
  8. import ImagePicker from '../../components/common/imagePicker';
  9. import { add, minus, asyncAdd } from '../../actions/counter'
  10. import {getPublicReleaseList,publicReleaseClockIn} from '../../utils/servers/servers';
  11. import './index.less'
  12. import switchIocn from '../../image/switch.png';
  13. import 'taro-ui/dist/style/components/noticebar.scss';
  14. import 'taro-ui/dist/style/components/icon.scss';
  15. import 'taro-ui/dist/style/components/list.scss';
  16. const QQMapWX = require('../../components/common/mapSDK/qqmap-wx-jssdk.min.js');
  17. @connect(({ counter }) => ({
  18. counter
  19. }), (dispatch) => ({
  20. add () {
  21. dispatch(add())
  22. },
  23. dec () {
  24. dispatch(minus())
  25. },
  26. asyncAdd () {
  27. dispatch(asyncAdd())
  28. }
  29. }))
  30. class PunchClock extends Component {
  31. constructor(props) {
  32. super(props);
  33. this.state={
  34. imgs:[],
  35. nowTime:'00:00:00',
  36. newArrder:{},
  37. addressLatitude:'',
  38. addressLongitude:'',
  39. distance:'',
  40. dtails:{},
  41. loading:true
  42. }
  43. this.onChange = this.onChange.bind(this);
  44. this.getSpacing = this.getSpacing.bind(this);
  45. this.getPublicReleaseList = this.getPublicReleaseList.bind(this);
  46. this.publicReleaseClockIn = this.publicReleaseClockIn.bind(this);
  47. this.refresh = this.refresh.bind(this);
  48. this.nowTime = null;
  49. }
  50. qqmapsdk = new QQMapWX({
  51. key: 'AWBBZ-GRAC2-JFYUO-CLA7I-JAHXK-YFFGT'
  52. });
  53. componentDidShow () {
  54. //获得当前位置
  55. Taro.getLocation({
  56. type: 'gcj02',
  57. isHighAccuracy:true,
  58. success: (res)=> {
  59. const latitude = res.latitude
  60. const longitude = res.longitude
  61. this.setState({
  62. newArrder:{
  63. latitude,
  64. longitude
  65. },
  66. })
  67. }
  68. })
  69. this.getPublicReleaseList(()=>{
  70. Taro.startLocationUpdate({
  71. success:()=>{
  72. Taro.onLocationChange((v)=>{
  73. this.getSpacing(v.latitude,v.longitude)
  74. })
  75. }
  76. })
  77. });
  78. this.nowTime = setInterval(()=>{
  79. this.setState({
  80. nowTime:dayjs().format('HH:mm:ss')
  81. })
  82. },1000)
  83. let token = Taro.getStorageSync('token');
  84. //建立连接
  85. Taro.connectSocket({
  86. header:{
  87. 'token': token,
  88. },
  89. url: "wss://uat.jishutao.com/websocket",
  90. // 172.16.0.188:8080
  91. // uat.jishutao.com
  92. })
  93. //连接成功
  94. Taro.onSocketOpen(function() {
  95. Taro.sendSocketMessage({
  96. data: 'stock',
  97. })
  98. })
  99. //接收数据
  100. Taro.onSocketMessage(function(data) {
  101. console.log(data,'接收数据')
  102. })
  103. //连接失败
  104. Taro.onSocketError(function() {
  105. console.log('websocket连接失败!');
  106. })
  107. }
  108. publicReleaseClockIn(){
  109. if(Object.keys(this.state.dtails).length === 0){
  110. Taro.showToast({title:'暂无公出申请,无法打卡',icon:'none'})
  111. return ;
  112. }
  113. if(isNaN(parseInt(this.state.distance))){
  114. Taro.showToast({title:'定位错误,请联系管理员',icon:'none'})
  115. return ;
  116. }
  117. if(!(this.state.distance <=50 && this.state.distance >= 0)){
  118. Taro.showToast({title:'当前位置未处于可打卡范围,无法打卡',icon:'none'})
  119. return ;
  120. }
  121. if(this.state.imgs.length === 0){
  122. Taro.showToast({title:'请上传打卡照片',icon:'none'})
  123. return ;
  124. }
  125. publicReleaseClockIn({
  126. id:this.state.dtails.id,
  127. photoUrl:this.state.imgs.join(',')
  128. }).then(v=>{
  129. if(v.error.length === 0){
  130. Taro.showToast({title:'打卡成功',icon:'none'})
  131. }else{
  132. Taro.showToast({title:v.error[0].message,icon:'none'})
  133. }
  134. }).catch(()=>{
  135. Taro.showToast({
  136. title:'系统错误,请稍后再试',
  137. icon:'none'
  138. })
  139. })
  140. }
  141. getPublicReleaseList(fn){
  142. this.setState({
  143. loading:true
  144. })
  145. getPublicReleaseList({
  146. type:0,
  147. clockTime:dayjs().format('YYYY-MM-DD HH:mm:ss')
  148. }).then(v=>{
  149. if(v.error.length === 0){
  150. if(v.data.list.length === 0){
  151. getPublicReleaseList({
  152. type:0,
  153. }).then(value=>{
  154. if(value.error.length === 0){
  155. if(value.data.list.length === 0){
  156. this.setState({
  157. dtails: {},
  158. loading:false
  159. })
  160. }else{
  161. this.setState({
  162. dtails:value.data.list[0],
  163. addressLatitude:value.data.list[0].latitude,
  164. addressLongitude:value.data.list[0].longitude,
  165. },()=>{
  166. fn();
  167. })
  168. }
  169. }else{
  170. this.setState({
  171. loading:false
  172. })
  173. Taro.showToast({
  174. title:v.error[0].message,
  175. icon:'none'
  176. })
  177. }
  178. }).catch(()=>{
  179. this.setState({
  180. loading:false
  181. })
  182. Taro.showToast({
  183. title:'系统错误,请稍后再试',
  184. icon:'none'
  185. })
  186. })
  187. }else{
  188. this.setState({
  189. dtails:v.data.list[0],
  190. addressLatitude:v.data.list[0].latitude,
  191. addressLongitude:v.data.list[0].longitude,
  192. },()=>{
  193. fn();
  194. })
  195. }
  196. }else{
  197. this.setState({
  198. loading:false
  199. })
  200. Taro.showToast({
  201. title:v.error[0].message,
  202. icon:'none'
  203. })
  204. }
  205. }).catch((err)=>{
  206. console.log(err)
  207. this.setState({
  208. loading:false
  209. })
  210. Taro.showToast({
  211. title:'系统错误,请稍后再试',
  212. icon:'none'
  213. })
  214. })
  215. }
  216. getSpacing(latitude,longitude){
  217. let _this = this;
  218. this.qqmapsdk.calculateDistance({
  219. mode:'straight',
  220. from: {
  221. latitude: this.state.addressLatitude,
  222. longitude: this.state.addressLongitude,
  223. },
  224. to: [
  225. {
  226. latitude,
  227. longitude,
  228. }
  229. ],
  230. success: function(res) {//成功后的回调
  231. _this.setState({
  232. distance:res.result.elements[0].distance,
  233. loading:false
  234. })
  235. },
  236. fail: function(error) {
  237. console.error(error);
  238. _this.setState({
  239. loading:false
  240. })
  241. },
  242. complete: function(res) {
  243. console.log(res);
  244. }
  245. });
  246. }
  247. componentWillUnmount() {
  248. this.nowTime && this.nowTime.clearTimeout();
  249. }
  250. componentDidMount() {
  251. }
  252. onChange(value,type){
  253. let arr = this.state.imgs.concat([]);
  254. if(type === 'add'){
  255. arr.push(value)
  256. }else if(type === 'remove'){
  257. arr.splice(value,1)
  258. }
  259. this.setState({
  260. imgs: arr,
  261. })
  262. }
  263. refresh(){
  264. this.getPublicReleaseList(()=>{
  265. Taro.startLocationUpdate({
  266. success:()=>{
  267. Taro.onLocationChange((v)=>{
  268. this.getSpacing(v.latitude,v.longitude)
  269. })
  270. }
  271. })
  272. });
  273. }
  274. render () {
  275. const {dtails} = this.state;
  276. return (
  277. <View className='punchClock'>
  278. <View className='header'>
  279. <Skeleton
  280. title
  281. avatar
  282. row={1}
  283. animateName='elastic'
  284. avatarShape='square'
  285. loading={this.state.loading}
  286. >
  287. <View className='headerContent'>
  288. <View className='userAvatarUrl'>
  289. <OpenData type='userAvatarUrl'/>
  290. </View>
  291. <View className='infor'>
  292. <View className='name'>
  293. {
  294. Object.keys(this.state.dtails).length <= 0 ?
  295. Taro.getStorageSync('userInfor').name:
  296. dtails.aname
  297. }
  298. </View>
  299. <View className='address'>
  300. 公出企业:
  301. {
  302. Object.keys(this.state.dtails).length <= 0 ?
  303. '无':
  304. dtails.nickname
  305. }
  306. </View>
  307. </View>
  308. {
  309. Object.keys(this.state.dtails).length <= 0 ?
  310. <View onClick={this.refresh} className='state' style={{
  311. alignSelf: 'center',
  312. textAlign:'center',
  313. color:'#b6b5b5',
  314. fontSize:'11px'
  315. }}>
  316. <AtIcon value='reload' size='20'/>
  317. <View>刷新</View>
  318. </View> :
  319. <View className='state' style={{
  320. color:dtails.status === 0 ? '#f31212' :
  321. dtails.status === 1 ? '#1d4fea' :
  322. dtails.status === 2 ? '#767272' : ''
  323. }}>
  324. {
  325. dtails.status === 0 ? '驳回' :
  326. dtails.status === 1 ? '发起' :
  327. dtails.status === 2 ? '通过' : ''
  328. }
  329. <Image src={switchIocn} className='switchItem'/>
  330. </View>
  331. }
  332. </View>
  333. </Skeleton>
  334. </View>
  335. {
  336. Object.keys(this.state.dtails).length <= 0 ?
  337. <View className='content'>
  338. <View className='punchClockContent' onClick={this.publicReleaseClockIn} style={{
  339. boxShadow: '1px 1px 15px 1px #acb8ad',
  340. background: '#acb8ad',
  341. marginTop: '85px',
  342. }}>
  343. <View className='punchClockTitle'>公出打卡</View>
  344. <View className='punchClockTime'>{this.state.nowTime}</View>
  345. </View>
  346. <View className='noData'>
  347. <View className='tipsNoData'>
  348. 暂无公出申请
  349. </View>
  350. <View className='goOut' onClick={()=>{
  351. Taro.switchTab({
  352. url: '/pages/applyDepart/index',
  353. })
  354. }}>
  355. 点击前往申请公出
  356. </View>
  357. </View>
  358. </View>:
  359. <View className='content'>
  360. <View className='timeContent'>
  361. <View className='timeItem'>
  362. <View className='timeTitle'>公出开始时间</View>
  363. <View className='timeValue'>{dtails.releaseStarts}</View>
  364. </View>
  365. <View className='timeItem'>
  366. <View className='timeTitle'>公出结束时间</View>
  367. <View className='timeValue'>{dtails.releaseEnds}</View>
  368. </View>
  369. </View>
  370. <View className='photographContent'>
  371. <View className='photographTitle'>打卡拍照</View>
  372. <AtIcon onClick={()=>{
  373. Taro.chooseImage({
  374. count: 1,
  375. sizeType: ['compressed'],
  376. sourceType: ['camera'],
  377. success:(res)=> {
  378. // tempFilePath可以作为img标签的src属性显示图片
  379. const tempFilePaths = res.tempFilePaths
  380. this.imagePicker.onImgChange([{url:tempFilePaths[0]}],'add',0,'camera')
  381. }
  382. })
  383. }} value='camera' size='25' color='#4395ff'/>
  384. </View>
  385. <View style={{alignSelf:'flex-start',width:'100%'}}>
  386. <ImagePicker ref={ref => this.imagePicker = ref} url='/api/admin/release/upload' showAddBtn={false} onChange={this.onChange}/>
  387. </View>
  388. <View className='punchClockContent' onClick={this.publicReleaseClockIn} style={{
  389. boxShadow: (!isNaN(parseInt(this.state.distance))) && this.state.distance <=50 && this.state.distance >= 0 ? '1px 1px 15px 1px #659268' : '1px 1px 15px 1px #acb8ad',
  390. background: (!isNaN(parseInt(this.state.distance))) && this.state.distance <=50 && this.state.distance >= 0 ? '#72cb78' : '#acb8ad'
  391. }}>
  392. <View className='punchClockTitle'>公出打卡</View>
  393. <View className='punchClockTime'>{this.state.nowTime}</View>
  394. </View>
  395. <View className='map'>
  396. <Map
  397. {...this.state.newArrder}
  398. style={{
  399. height:'300px',
  400. width:'100%'
  401. }}
  402. circles={[
  403. {
  404. latitude: this.state.addressLatitude,
  405. longitude: this.state.addressLongitude,
  406. color: '#c92ddc82',
  407. fillColor: '#c92ddc82',
  408. radius: 50,
  409. strokeWidth: 1
  410. }
  411. ]}
  412. showLocation
  413. showCompass
  414. />
  415. </View>
  416. <View className='tips'>紫色区域为可打卡区域</View>
  417. </View>
  418. }
  419. </View>
  420. )
  421. }
  422. }
  423. export default PunchClock