|
|
@ -1,18 +1,10 @@ |
|
|
|
import React, { useState, useEffect } from 'react'; |
|
|
|
import Taro, { useRouter } from '@tarojs/taro'; |
|
|
|
import { |
|
|
|
View, |
|
|
|
RadioGroup, |
|
|
|
Radio, |
|
|
|
Button, |
|
|
|
Image, |
|
|
|
Input, |
|
|
|
Picker |
|
|
|
} from '@tarojs/components'; |
|
|
|
import { AtButton, AtTextarea, AtImagePicker, AtAvatar } from 'taro-ui'; |
|
|
|
import { View, RadioGroup, Radio, Image, Input, Picker } from '@tarojs/components'; |
|
|
|
import { AtButton, AtTextarea, AtImagePicker } from 'taro-ui'; |
|
|
|
import InputPicker from '../components/inputPicker'; |
|
|
|
import request from '@/services/request'; |
|
|
|
import { postReport, getReportDetail } from '@/services/api'; |
|
|
|
import { postReport, getReportDetail, delReport, getRoadSection } from '@/services/api'; |
|
|
|
import './index.scss'; |
|
|
|
import arrowIcon from '../../static/img/patrol/arrow-down.svg'; |
|
|
|
|
|
|
@ -21,7 +13,6 @@ const Index = () => { |
|
|
|
const { params: { type } } = router |
|
|
|
const isView = type === 'view' ? true : false |
|
|
|
|
|
|
|
|
|
|
|
const [reportType, setReportType] = useState('patrol') // 上报类型 |
|
|
|
const [projectType, setProjectType] = useState('') // 工程类型 |
|
|
|
const [road, setRoad] = useState('') // 所在道路 |
|
|
@ -33,9 +24,16 @@ const Index = () => { |
|
|
|
const [conserveBeforePic, setConserveBeforePic] = useState([]) // 养护前图片 |
|
|
|
const [conserveUnderwayPic, setConserveUnderwayPic] = useState([]) // 养护中图片 |
|
|
|
const [conserveAfterPic, setConserveAfterPic] = useState([]) // 养护后图片 |
|
|
|
const [longitude, setLongitude] = useState(0) // 经度 |
|
|
|
const [latitude, setLatitude] = useState(0) // 纬度 |
|
|
|
|
|
|
|
const [sourceRoadSel, setSourceRoadSel] = useState([]) |
|
|
|
const [sourceRoadStartSel, setSourceRoadStartSel] = useState([]) |
|
|
|
const [sourceRoadEndSel, setSourceRoadEndSel] = useState([]) |
|
|
|
|
|
|
|
const [roadStartSelector, setRoadStartSelector] = useState([]) |
|
|
|
const [roadEndSelector, setRoadEndSelector] = useState([]) |
|
|
|
const prjTypeSelector = ['道路', '桥梁', '涵洞', '其他'] |
|
|
|
const [roadStartSel, setRoadStartSel] = useState([]) |
|
|
|
const [roadEndSel, setRoadEndSel] = useState([]) |
|
|
|
|
|
|
|
const [canReport, setCanReport] = useState(true) |
|
|
|
|
|
|
@ -52,17 +50,9 @@ const Index = () => { |
|
|
|
} |
|
|
|
]) |
|
|
|
|
|
|
|
const rPrjTypeSelector = ['道路', '桥梁', '涵洞', '其他'] |
|
|
|
const rRoadSelector = ['富山一路', '金沙大道', '玉湖路'] |
|
|
|
|
|
|
|
const rRoadStartSelector = ['一段', '二段', '三段'] |
|
|
|
const rRoadEndSelector = ['一段', '二段', '三段'] |
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
if (isView) { |
|
|
|
Taro.showLoading({ |
|
|
|
title: '加载中' |
|
|
|
}) |
|
|
|
if (isView) { // 查看 |
|
|
|
Taro.showLoading({ title: '加载中' }) |
|
|
|
request.get(getReportDetail(router.params.id)).then(res => { |
|
|
|
Taro.hideLoading() |
|
|
|
if (res.statusCode == 200 || res.statusCode == 204) { |
|
|
@ -84,10 +74,51 @@ const Index = () => { |
|
|
|
}, err => { |
|
|
|
Taro.showToast({ title: err.message || '请求出错', icon: 'none' }) |
|
|
|
}) |
|
|
|
} else { // 填报 |
|
|
|
Taro.showLoading({ title: '加载中' }) |
|
|
|
let key = 'ODQBZ-3FZAU-6VIVL-2XXNM-F7CP7-WVFCY' // 写自己申请的key |
|
|
|
Taro.getLocation({ |
|
|
|
type: 'wgs84', |
|
|
|
success: function (res) { |
|
|
|
setLongitude(res.longitude) |
|
|
|
setLatitude(res.latitude) |
|
|
|
Taro.request({ |
|
|
|
url: `https://apis.map.qq.com/ws/geocoder/v1/?location=${res.latitude},${res.longitude}&key=${key}`, |
|
|
|
success: function (res) { |
|
|
|
// 根据自己项目需求获取res内容 |
|
|
|
let addresscity = res.data.result.address_component.province + res.data.result.address_component.city + res.data.result.address_component.district |
|
|
|
setAddress(addresscity + res.data.result.address_component.street_number) |
|
|
|
} |
|
|
|
}) |
|
|
|
} |
|
|
|
}) |
|
|
|
request.get(getRoadSection()).then(res => { |
|
|
|
Taro.hideLoading() |
|
|
|
if (res.statusCode == 200 || res.statusCode == 204) { |
|
|
|
const { data } = res |
|
|
|
let nextSourceRoadSel = [] |
|
|
|
let nextSourceRoadStartSel = [] |
|
|
|
let nextSourceRoadEndSel = [] |
|
|
|
data.map(item => { |
|
|
|
nextSourceRoadSel.push(item.routeName) |
|
|
|
nextSourceRoadStartSel.push(item.startingPlaceName) |
|
|
|
nextSourceRoadEndSel.push(item.stopPlaceName) |
|
|
|
}) |
|
|
|
setSourceRoadSel(nextSourceRoadSel) |
|
|
|
setSourceRoadStartSel(nextSourceRoadStartSel) |
|
|
|
setSourceRoadEndSel(nextSourceRoadEndSel) |
|
|
|
} else { |
|
|
|
Taro.showToast({ title: res.data.message || '请求出错', icon: 'none' }) |
|
|
|
} |
|
|
|
}, err => { |
|
|
|
Taro.showToast({ title: err.message || '请求出错', icon: 'none' }) |
|
|
|
}) |
|
|
|
} |
|
|
|
setRoadStartSelector(rRoadStartSelector) |
|
|
|
setRoadEndSelector(rRoadEndSelector) |
|
|
|
}, []) |
|
|
|
useEffect(() => { |
|
|
|
setRoadStartSel(sourceRoadStartSel) |
|
|
|
setRoadEndSel(sourceRoadEndSel) |
|
|
|
}, [sourceRoadStartSel, sourceRoadEndSel]) |
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
setTypeList([ |
|
|
@ -110,7 +141,7 @@ const Index = () => { |
|
|
|
Taro.showToast({ title: '请完善必填信息', icon: 'none' }) |
|
|
|
return |
|
|
|
} |
|
|
|
if (rPrjTypeSelector.indexOf(projectType) === -1) { |
|
|
|
if (prjTypeSelector.indexOf(projectType) === -1) { |
|
|
|
Taro.showToast({ title: '工程类型错误', icon: 'none' }) |
|
|
|
return |
|
|
|
} |
|
|
@ -122,8 +153,8 @@ const Index = () => { |
|
|
|
roadSectionEnd, |
|
|
|
address, |
|
|
|
content, |
|
|
|
// longitude: 37.000000000000, |
|
|
|
// latitude: 69.000000000000 |
|
|
|
longitude, |
|
|
|
latitude |
|
|
|
} |
|
|
|
if (reportType === 'patrol') { |
|
|
|
data['scenePic'] = scenePic.length > 0 ? scenePic.map(item => item.url) : null |
|
|
@ -165,22 +196,49 @@ const Index = () => { |
|
|
|
}) |
|
|
|
} |
|
|
|
|
|
|
|
function deleteReport() { |
|
|
|
Taro.showModal({ |
|
|
|
title: '提示', |
|
|
|
content: '确定删除吗?', |
|
|
|
success: function (res) { |
|
|
|
if (res.confirm) { |
|
|
|
Taro.showLoading({ |
|
|
|
title: '删除中' |
|
|
|
}) |
|
|
|
request.del(delReport(router.params.id)).then(res => { |
|
|
|
Taro.hideLoading() |
|
|
|
if (res.statusCode == 200 || res.statusCode == 204) { |
|
|
|
Taro.showToast({ title: '删除成功', icon: 'none', duration: 1500 }) |
|
|
|
setTimeout(() => { |
|
|
|
Taro.navigateBack() |
|
|
|
}, 1000) |
|
|
|
} else { |
|
|
|
Taro.showToast({ title: res.data.message || '请求出错', icon: 'none' }) |
|
|
|
} |
|
|
|
}, err => { |
|
|
|
Taro.showToast({ title: err.message || '请求出错', icon: 'none' }) |
|
|
|
}) |
|
|
|
} |
|
|
|
} |
|
|
|
}) |
|
|
|
} |
|
|
|
|
|
|
|
function handleInput({ detail: { value } }, type) { |
|
|
|
switch (type) { |
|
|
|
case 'roadSectionStart': |
|
|
|
setRoadSectionStart(value) |
|
|
|
if (value) { |
|
|
|
setRoadStartSelector(rRoadStartSelector.filter(item => item.includes(value))) |
|
|
|
setRoadStartSel(sourceRoadStartSel.filter(item => item && item.includes(value))) |
|
|
|
} else { |
|
|
|
setRoadStartSelector(rRoadStartSelector) |
|
|
|
setRoadStartSel(sourceRoadStartSel) |
|
|
|
} |
|
|
|
break; |
|
|
|
case 'roadSectionEnd': |
|
|
|
setRoadSectionEnd(value) |
|
|
|
if (value) { |
|
|
|
setRoadEndSelector(rRoadEndSelector.filter(item => item.includes(value))) |
|
|
|
setRoadEndSel(sourceRoadEndSel.filter(item => item && item.includes(value))) |
|
|
|
} else { |
|
|
|
setRoadEndSelector(rRoadEndSelector) |
|
|
|
setRoadEndSel(sourceRoadEndSel) |
|
|
|
} |
|
|
|
break; |
|
|
|
case 'address': |
|
|
@ -221,106 +279,6 @@ const Index = () => { |
|
|
|
}) |
|
|
|
} |
|
|
|
|
|
|
|
function renderAddImg() { |
|
|
|
return ( |
|
|
|
reportType === 'patrol' ? |
|
|
|
<View className='patrol-img'> |
|
|
|
现场图片: |
|
|
|
<AtImagePicker |
|
|
|
className='img-picker' |
|
|
|
count={3 - scenePic.length} |
|
|
|
showAddBtn={scenePic.length >= 3 ? false : true} |
|
|
|
files={scenePic} |
|
|
|
onChange={files => handleImgChange(files, 'scenePic')} |
|
|
|
onImageClick={handleImgClick} |
|
|
|
/> |
|
|
|
</View> : |
|
|
|
<View className='conserve-img'> |
|
|
|
养护图片: |
|
|
|
<View className='horizontal-line hl-one'> |
|
|
|
<View className='circle c-one'></View> |
|
|
|
<View className='text t-one'>养护前</View> |
|
|
|
</View> |
|
|
|
<AtImagePicker |
|
|
|
className='img-picker' |
|
|
|
count={3 - conserveBeforePic.length} |
|
|
|
showAddBtn={conserveBeforePic.length >= 3 ? false : true} |
|
|
|
files={conserveBeforePic} |
|
|
|
onChange={files => handleImgChange(files, 'conserveBeforePic')} |
|
|
|
onImageClick={handleImgClick} |
|
|
|
/> |
|
|
|
<View className='horizontal-line hl-two'> |
|
|
|
<View className='circle c-two'></View> |
|
|
|
<View className='text t-two'>养护中</View> |
|
|
|
</View> |
|
|
|
<AtImagePicker |
|
|
|
className='img-picker' |
|
|
|
count={3 - conserveUnderwayPic.length} |
|
|
|
showAddBtn={conserveUnderwayPic.length >= 3 ? false : true} |
|
|
|
files={conserveUnderwayPic} |
|
|
|
onChange={files => handleImgChange(files, 'conserveUnderwayPic')} |
|
|
|
onImageClick={handleImgClick} |
|
|
|
/> |
|
|
|
<View className='horizontal-line hl-three'> |
|
|
|
<View className='circle c-three'></View> |
|
|
|
<View className='text t-three'>养护后</View> |
|
|
|
</View> |
|
|
|
<AtImagePicker |
|
|
|
className='img-picker' |
|
|
|
count={3 - conserveAfterPic.length} |
|
|
|
showAddBtn={conserveAfterPic.length >= 3 ? false : true} |
|
|
|
files={conserveAfterPic} |
|
|
|
onChange={files => handleImgChange(files, 'conserveAfterPic')} |
|
|
|
onImageClick={handleImgClick} |
|
|
|
/> |
|
|
|
</View> |
|
|
|
) |
|
|
|
} |
|
|
|
|
|
|
|
function renderViewImg() { |
|
|
|
return ( |
|
|
|
reportType === 'patrol' ? |
|
|
|
<View className='patrol-img'> |
|
|
|
现场图片: |
|
|
|
<View className='img-box'> |
|
|
|
{scenePic.map(item => ( |
|
|
|
<Image className='img' src={item.url} onClick={() => handleImgClick(undefined, item)} /> |
|
|
|
))} |
|
|
|
</View> |
|
|
|
</View> : |
|
|
|
<View className='conserve-img'> |
|
|
|
养护图片: |
|
|
|
<View className='horizontal-line hl-one'> |
|
|
|
<View className='circle c-one'></View> |
|
|
|
<View className='text t-one'>养护前</View> |
|
|
|
</View> |
|
|
|
<View className='img-box'> |
|
|
|
{conserveBeforePic.map(item => ( |
|
|
|
<Image className='img' src={item.url} onClick={() => handleImgClick(undefined, item)} /> |
|
|
|
))} |
|
|
|
</View> |
|
|
|
<View className='horizontal-line hl-two'> |
|
|
|
<View className='circle c-two'></View> |
|
|
|
<View className='text t-two'>养护中</View> |
|
|
|
</View> |
|
|
|
<View className='img-box'> |
|
|
|
{conserveUnderwayPic.map(item => ( |
|
|
|
<Image className='img' src={item.url} onClick={() => handleImgClick(undefined, item)} /> |
|
|
|
))} |
|
|
|
</View> |
|
|
|
<View className='horizontal-line hl-three'> |
|
|
|
<View className='circle c-three'></View> |
|
|
|
<View className='text t-three'>养护后</View> |
|
|
|
</View> |
|
|
|
<View className='img-box'> |
|
|
|
{conserveAfterPic.map(item => ( |
|
|
|
<Image className='img' src={item.url} onClick={() => handleImgClick(undefined, item)} /> |
|
|
|
))} |
|
|
|
</View> |
|
|
|
</View> |
|
|
|
) |
|
|
|
} |
|
|
|
|
|
|
|
return ( |
|
|
|
<View className='patrol'> |
|
|
|
<View className='report-type'> |
|
|
@ -350,15 +308,16 @@ const Index = () => { |
|
|
|
placeholder='请选择工程类型' |
|
|
|
value={projectType} |
|
|
|
onInput={setProjectType} |
|
|
|
selector={rPrjTypeSelector} |
|
|
|
selector={prjTypeSelector} |
|
|
|
isView={isView} |
|
|
|
/> |
|
|
|
<InputPicker |
|
|
|
key={sourceRoadSel} // 添加key保证selector更新重新渲染 |
|
|
|
title='所在道路:' |
|
|
|
placeholder='请选择或输入您所在的道路' |
|
|
|
value={road} |
|
|
|
onInput={setRoad} |
|
|
|
selector={rRoadSelector} |
|
|
|
selector={sourceRoadSel} |
|
|
|
isView={isView} |
|
|
|
/> |
|
|
|
|
|
|
@ -374,11 +333,11 @@ const Index = () => { |
|
|
|
disabled={isView} |
|
|
|
/> |
|
|
|
{ |
|
|
|
isView && |
|
|
|
!isView && |
|
|
|
<Picker |
|
|
|
mode='selector' |
|
|
|
range={roadStartSelector} |
|
|
|
onChange={e => setRoadSectionStart(roadStartSelector[e.detail.value])} |
|
|
|
range={roadStartSel} |
|
|
|
onChange={e => setRoadSectionStart(roadStartSel[e.detail.value])} |
|
|
|
> |
|
|
|
<Image src={arrowIcon} className='img-l' /> |
|
|
|
</Picker> |
|
|
@ -394,11 +353,11 @@ const Index = () => { |
|
|
|
disabled={isView} |
|
|
|
/> |
|
|
|
{ |
|
|
|
isView && |
|
|
|
!isView && |
|
|
|
<Picker |
|
|
|
mode='selector' |
|
|
|
range={roadEndSelector} |
|
|
|
onChange={e => setRoadSectionEnd(roadEndSelector[e.detail.value])} |
|
|
|
range={roadEndSel} |
|
|
|
onChange={e => setRoadSectionEnd(roadEndSel[e.detail.value])} |
|
|
|
> |
|
|
|
<Image src={arrowIcon} className='img-r' /> |
|
|
|
</Picker> |
|
|
@ -426,12 +385,95 @@ const Index = () => { |
|
|
|
disabled={isView} |
|
|
|
/> |
|
|
|
{ |
|
|
|
isView ? |
|
|
|
renderViewImg() : |
|
|
|
renderAddImg() |
|
|
|
reportType === 'patrol' ? |
|
|
|
<View className='patrol-img'> |
|
|
|
现场图片: |
|
|
|
{ |
|
|
|
isView ? |
|
|
|
<View className='img-box'> |
|
|
|
{scenePic.map(item => ( |
|
|
|
<Image className='img' src={item.url} onClick={() => handleImgClick(undefined, item)} /> |
|
|
|
))} |
|
|
|
</View> : |
|
|
|
<AtImagePicker |
|
|
|
className='img-picker' |
|
|
|
count={3 - scenePic.length} |
|
|
|
showAddBtn={scenePic.length >= 3 ? false : true} |
|
|
|
files={scenePic} |
|
|
|
onChange={files => handleImgChange(files, 'scenePic')} |
|
|
|
onImageClick={handleImgClick} |
|
|
|
/> |
|
|
|
} |
|
|
|
</View> : |
|
|
|
<View className='conserve-img'> |
|
|
|
养护图片: |
|
|
|
<View className='horizontal-line hl-one'> |
|
|
|
<View className='circle c-one'></View> |
|
|
|
<View className='text t-one'>养护前</View> |
|
|
|
</View> |
|
|
|
{ |
|
|
|
isView ? |
|
|
|
<View className='img-box'> |
|
|
|
{conserveBeforePic.map(item => ( |
|
|
|
<Image className='img' src={item.url} onClick={() => handleImgClick(undefined, item)} /> |
|
|
|
))} |
|
|
|
</View> : |
|
|
|
<AtImagePicker |
|
|
|
className='img-picker' |
|
|
|
count={3 - conserveBeforePic.length} |
|
|
|
showAddBtn={conserveBeforePic.length >= 3 ? false : true} |
|
|
|
files={conserveBeforePic} |
|
|
|
onChange={files => handleImgChange(files, 'conserveBeforePic')} |
|
|
|
onImageClick={handleImgClick} |
|
|
|
/> |
|
|
|
} |
|
|
|
<View className='horizontal-line hl-two'> |
|
|
|
<View className='circle c-two'></View> |
|
|
|
<View className='text t-two'>养护中</View> |
|
|
|
</View> |
|
|
|
{ |
|
|
|
isView ? |
|
|
|
<View className='img-box'> |
|
|
|
{conserveUnderwayPic.map(item => ( |
|
|
|
<Image className='img' src={item.url} onClick={() => handleImgClick(undefined, item)} /> |
|
|
|
))} |
|
|
|
</View> : |
|
|
|
<AtImagePicker |
|
|
|
className='img-picker' |
|
|
|
count={3 - conserveUnderwayPic.length} |
|
|
|
showAddBtn={conserveUnderwayPic.length >= 3 ? false : true} |
|
|
|
files={conserveUnderwayPic} |
|
|
|
onChange={files => handleImgChange(files, 'conserveUnderwayPic')} |
|
|
|
onImageClick={handleImgClick} |
|
|
|
/> |
|
|
|
} |
|
|
|
|
|
|
|
<View className='horizontal-line hl-three'> |
|
|
|
<View className='circle c-three'></View> |
|
|
|
<View className='text t-three'>养护后</View> |
|
|
|
</View> |
|
|
|
{ |
|
|
|
isView ? |
|
|
|
<View className='img-box'> |
|
|
|
{conserveAfterPic.map(item => ( |
|
|
|
<Image className='img' src={item.url} onClick={() => handleImgClick(undefined, item)} /> |
|
|
|
))} |
|
|
|
</View> : |
|
|
|
<AtImagePicker |
|
|
|
className='img-picker' |
|
|
|
count={3 - conserveAfterPic.length} |
|
|
|
showAddBtn={conserveAfterPic.length >= 3 ? false : true} |
|
|
|
files={conserveAfterPic} |
|
|
|
onChange={files => handleImgChange(files, 'conserveAfterPic')} |
|
|
|
onImageClick={handleImgClick} |
|
|
|
/> |
|
|
|
} |
|
|
|
</View> |
|
|
|
} |
|
|
|
{ |
|
|
|
!isView && <AtButton type='primary' className='sub-btn' onClick={report}>上报</AtButton> |
|
|
|
isView ? |
|
|
|
<AtButton type='primary' className='del-btn' onClick={deleteReport}>删除</AtButton> : |
|
|
|
<AtButton type='primary' className='sub-btn' onClick={report}>上报</AtButton> |
|
|
|
} |
|
|
|
</View> |
|
|
|
) |
|
|
|