|
|
|
@ -7,86 +7,158 @@ import { |
|
|
|
Button, |
|
|
|
Image, |
|
|
|
Input, |
|
|
|
Textarea, |
|
|
|
Picker |
|
|
|
} from '@tarojs/components'; |
|
|
|
import { AtForm, AtInput, AtButton, AtTextarea, AtImagePicker, AtTimeline } from 'taro-ui'; |
|
|
|
// import InputPicker from '../components/inputPicker'; |
|
|
|
import { AtButton, AtTextarea, AtImagePicker } from 'taro-ui'; |
|
|
|
import InputPicker from '../components/inputPicker'; |
|
|
|
import request from '@/services/request'; |
|
|
|
import { postReport } from '@/services/api'; |
|
|
|
import './index.scss'; |
|
|
|
import arrowIcon from '../../static/img/patrol/arrow-down.svg'; |
|
|
|
|
|
|
|
const Index = () => { |
|
|
|
const [isPatrol, setIsPatrol] = useState(true) // 巡查 or 养护 |
|
|
|
const [prjTypeSelector, setPrjTypeSelector] = useState([]) |
|
|
|
const [roadSelector, setRoadSelector] = useState([]) |
|
|
|
const [projectType, setProjectType] = useState('') |
|
|
|
const [road, setRoad] = useState('') |
|
|
|
const [reportType, setReportType] = useState('patrol') // 上报类型 |
|
|
|
const [projectType, setProjectType] = useState('') // 工程类型 |
|
|
|
const [road, setRoad] = useState('') // 所在道路 |
|
|
|
const [roadSectionStart, setRoadSectionStart] = useState('') // 路段 Start |
|
|
|
const [roadSectionEnd, setRoadSectionEnd] = useState('') // 路段 End |
|
|
|
const [address, setAddress] = useState('') // 具体位置 |
|
|
|
const [content, setContent] = useState('') // 巡查内容 |
|
|
|
const [scenePic, setScenePic] = useState([]) // 现场图片 |
|
|
|
const [conserveBeforePic, setConserveBeforePic] = useState([]) // 养护前图片 |
|
|
|
const [conserveUnderwayPic, setConserveUnderwayPic] = useState([]) // 养护中图片 |
|
|
|
const [conserveAfterPic, setConserveAfterPic] = useState([]) // 养护后图片 |
|
|
|
|
|
|
|
const [images, setimages] = useState([]) |
|
|
|
const [roadStartSelector, setRoadStartSelector] = useState([]) |
|
|
|
const [roadEndSelector, setRoadEndSelector] = useState([]) |
|
|
|
|
|
|
|
const reportType = [ |
|
|
|
{ |
|
|
|
value: '巡查', |
|
|
|
text: '巡查', |
|
|
|
checked: true |
|
|
|
}, |
|
|
|
{ |
|
|
|
value: '养护', |
|
|
|
text: '养护', |
|
|
|
checked: false |
|
|
|
} |
|
|
|
] |
|
|
|
const rPrjTypeSelector = ['道路', '桥梁', '涵洞', '其他'] |
|
|
|
const rRoadSelector = ['富山一路', '金沙大道', '玉湖路'] |
|
|
|
|
|
|
|
const rRoadStartSelector = ['一段', '二段', '三段'] |
|
|
|
const rRoadEndSelector = ['一段', '二段', '三段'] |
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
const prjTypeSelector = ['道路', '桥梁', '涵洞', '其他'] |
|
|
|
const roadSelector = ['富山一路', '金沙大道', '玉湖路'] |
|
|
|
setPrjTypeSelector(prjTypeSelector) |
|
|
|
setRoadSelector(roadSelector) |
|
|
|
setRoadStartSelector(rRoadStartSelector) |
|
|
|
setRoadEndSelector(rRoadEndSelector) |
|
|
|
}, []) |
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
if (projectType) { |
|
|
|
setPrjTypeSelector(prjTypeSelector.filter(s => s.includes(projectType))) |
|
|
|
function report() { |
|
|
|
let data = { |
|
|
|
reportType, |
|
|
|
projectType, |
|
|
|
road, |
|
|
|
roadSectionStart, |
|
|
|
roadSectionEnd, |
|
|
|
address, |
|
|
|
content, |
|
|
|
longitude: 37.000000000000, |
|
|
|
latitude: 69.000000000000 |
|
|
|
} |
|
|
|
}, [projectType]) |
|
|
|
// useEffect(() => { |
|
|
|
// if (projectType) { |
|
|
|
// setPrjTypeSelector(prjTypeSelector.filter(s => s.includes(projectType))) |
|
|
|
// } |
|
|
|
// }, [projectType]) |
|
|
|
|
|
|
|
function onTypeChange(e) { |
|
|
|
if (e.detail.value === '巡查') { |
|
|
|
setIsPatrol(true) |
|
|
|
if (reportType === 'patrol') { |
|
|
|
data['scenePic'] = scenePic.length > 0 && scenePic.map(item => item.url) |
|
|
|
} else { |
|
|
|
setIsPatrol(false) |
|
|
|
data['conserveBeforePic'] = conserveBeforePic.length > 0 && conserveBeforePic.map(item => item.url) |
|
|
|
data['conserveUnderwayPic'] = conserveUnderwayPic.length > 0 && conserveUnderwayPic.map(item => item.url) |
|
|
|
data['conserveAfterPic'] = conserveAfterPic.length > 0 && conserveAfterPic.map(item => item.url) |
|
|
|
} |
|
|
|
for (var key in data) { |
|
|
|
if (!data[key]) { |
|
|
|
Taro.showToast({ title: '请完善信息', icon: 'none' }) |
|
|
|
return |
|
|
|
} |
|
|
|
} |
|
|
|
if (rPrjTypeSelector.indexOf(data.projectType) === -1) { |
|
|
|
Taro.showToast({ title: '工程类型错误', icon: 'none' }) |
|
|
|
return |
|
|
|
} |
|
|
|
request.post(postReport(), data).then(res => { |
|
|
|
if (res.statusCode == 200 || res.statusCode == 204) { |
|
|
|
Taro.showToast({ title: '上报成功', icon: 'none' }) |
|
|
|
} else { |
|
|
|
Taro.showToast({ title: res.data.message || '请求出错', icon: 'none' }) |
|
|
|
} |
|
|
|
}, err => { |
|
|
|
Taro.showToast({ title: err.message || '请求出错', icon: 'none' }) |
|
|
|
}) |
|
|
|
} |
|
|
|
|
|
|
|
function onPrjTypeChange(e) { |
|
|
|
setProjectType(selector[e.detail.value]) |
|
|
|
function handleInput({ detail: { value } }, type) { |
|
|
|
switch (type) { |
|
|
|
case 'roadSectionStart': |
|
|
|
setRoadSectionStart(value) |
|
|
|
if (value) { |
|
|
|
setRoadStartSelector(rRoadStartSelector.filter(item => item.includes(value))) |
|
|
|
} else { |
|
|
|
setRoadStartSelector(rRoadStartSelector) |
|
|
|
} |
|
|
|
break; |
|
|
|
case 'roadSectionEnd': |
|
|
|
setRoadSectionEnd(value) |
|
|
|
if (value) { |
|
|
|
setRoadEndSelector(rRoadEndSelector.filter(item => item.includes(value))) |
|
|
|
} else { |
|
|
|
setRoadEndSelector(rRoadEndSelector) |
|
|
|
} |
|
|
|
break; |
|
|
|
case 'address': |
|
|
|
setAddress(value) |
|
|
|
break; |
|
|
|
case 'content': |
|
|
|
setContent(value) |
|
|
|
default: |
|
|
|
break; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
function onImgPickerChange(files) { |
|
|
|
setimages(files) |
|
|
|
function handleTypeChange(e) { |
|
|
|
setReportType(e.detail.value) |
|
|
|
} |
|
|
|
function onImageClick(index, file) { |
|
|
|
|
|
|
|
function handleImgChange(files, type) { |
|
|
|
switch (type) { |
|
|
|
case 'scenePic': |
|
|
|
setScenePic(files) |
|
|
|
break; |
|
|
|
case 'conserveBeforePic': |
|
|
|
setConserveBeforePic(files) |
|
|
|
break; |
|
|
|
case 'conserveUnderwayPic': |
|
|
|
setConserveUnderwayPic(files) |
|
|
|
break; |
|
|
|
case 'conserveAfterPic': |
|
|
|
setConserveAfterPic(files) |
|
|
|
break; |
|
|
|
default: |
|
|
|
break; |
|
|
|
} |
|
|
|
} |
|
|
|
function handleImgClick(index, file) { |
|
|
|
Taro.previewImage({ |
|
|
|
urls: [file.url] // 需要预览的图片http链接列表 |
|
|
|
}) |
|
|
|
} |
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
console.log(images); |
|
|
|
}, [images]) |
|
|
|
const typeList = [ |
|
|
|
{ |
|
|
|
value: 'patrol', |
|
|
|
text: '巡查', |
|
|
|
checked: true |
|
|
|
}, |
|
|
|
{ |
|
|
|
value: 'conserve', |
|
|
|
text: '养护', |
|
|
|
checked: false |
|
|
|
} |
|
|
|
] |
|
|
|
|
|
|
|
return ( |
|
|
|
<View> |
|
|
|
<View className='patrol'> |
|
|
|
<View className='report-type'> |
|
|
|
<View className='text'>上报类型</View> |
|
|
|
<RadioGroup onChange={onTypeChange}> |
|
|
|
<RadioGroup onChange={handleTypeChange}> |
|
|
|
{ |
|
|
|
reportType.map((item, i) => { |
|
|
|
typeList.map((item, i) => { |
|
|
|
return ( |
|
|
|
<Radio |
|
|
|
key={i} |
|
|
|
@ -103,107 +175,88 @@ const Index = () => { |
|
|
|
</RadioGroup> |
|
|
|
</View> |
|
|
|
|
|
|
|
<View className='input-picker'> |
|
|
|
<AtInput |
|
|
|
className='input' |
|
|
|
title='工程类型：' |
|
|
|
type='text' |
|
|
|
placeholder='请选择工程类型' |
|
|
|
border={false} |
|
|
|
value={projectType} |
|
|
|
onChange={value => setProjectType(value)} |
|
|
|
/> |
|
|
|
<Picker mode='selector' range={prjTypeSelector} onChange={onPrjTypeChange}> |
|
|
|
<Image src={arrowIcon} className='img-r' /> |
|
|
|
</Picker> |
|
|
|
</View> |
|
|
|
<View className='input-picker'> |
|
|
|
<AtInput |
|
|
|
className='input' |
|
|
|
title='所在道路：' |
|
|
|
type='text' |
|
|
|
placeholder='请选择您所在的道路' |
|
|
|
border={false} |
|
|
|
value={road} |
|
|
|
onChange={value => setRoad(value)} |
|
|
|
/> |
|
|
|
<Picker mode='selector' range={roadSelector} onChange={onPrjTypeChange}> |
|
|
|
<Image src={arrowIcon} className='img-r' /> |
|
|
|
</Picker> |
|
|
|
</View> |
|
|
|
|
|
|
|
{/* <InputPicker |
|
|
|
className='input-picker' |
|
|
|
<InputPicker |
|
|
|
title='工程类型：' |
|
|
|
placeholder='请选择工程类型' |
|
|
|
value={projectType} |
|
|
|
onChange={setProjectType} |
|
|
|
selector={prjTypeSelector} |
|
|
|
onInput={setProjectType} |
|
|
|
selector={rPrjTypeSelector} |
|
|
|
/> |
|
|
|
<InputPicker |
|
|
|
className='input-picker' |
|
|
|
<InputPicker |
|
|
|
title='所在道路：' |
|
|
|
placeholder='请选择您所在的道路' |
|
|
|
placeholder='请选择或输入您所在的道路' |
|
|
|
value={road} |
|
|
|
onChange={setRoad} |
|
|
|
selector={roadSelector} |
|
|
|
/> */} |
|
|
|
onInput={setRoad} |
|
|
|
selector={rRoadSelector} |
|
|
|
/> |
|
|
|
|
|
|
|
<View className='input-picker'> |
|
|
|
<AtInput |
|
|
|
<View className='road-section'> |
|
|
|
<View className='title'>所属路段：</View> |
|
|
|
<Input |
|
|
|
className='input' |
|
|
|
title='所属路段：' |
|
|
|
type='text' |
|
|
|
placeholder='路段名称' |
|
|
|
border={false} |
|
|
|
// value={this.state.value} |
|
|
|
// onChange={this.handleChange.bind(this, 'value')} |
|
|
|
value={roadSectionStart} |
|
|
|
onInput={e => handleInput(e, 'roadSectionStart')} |
|
|
|
/> |
|
|
|
<Picker mode='selector' range={roadSelector} onChange={onPrjTypeChange}> |
|
|
|
<Picker |
|
|
|
mode='selector' |
|
|
|
range={roadStartSelector} |
|
|
|
onChange={e => setRoadSectionStart(roadStartSelector[e.detail.value])} |
|
|
|
> |
|
|
|
<Image src={arrowIcon} className='img-l' /> |
|
|
|
</Picker> |
|
|
|
<AtInput |
|
|
|
<View>至 </View> |
|
|
|
<Input |
|
|
|
className='input' |
|
|
|
type='text' |
|
|
|
placeholder='路段名称' |
|
|
|
border={false} |
|
|
|
// value={this.state.value} |
|
|
|
// onChange={this.handleChange.bind(this, 'value')} |
|
|
|
value={roadSectionEnd} |
|
|
|
onInput={e => handleInput(e, 'roadSectionEnd')} |
|
|
|
/> |
|
|
|
<Picker mode='selector' range={roadSelector} onChange={onPrjTypeChange}> |
|
|
|
<Picker |
|
|
|
mode='selector' |
|
|
|
range={roadEndSelector} |
|
|
|
onChange={e => setRoadSectionEnd(roadEndSelector[e.detail.value])} |
|
|
|
> |
|
|
|
<Image src={arrowIcon} className='img-r' /> |
|
|
|
</Picker> |
|
|
|
</View> |
|
|
|
|
|
|
|
<AtTextarea |
|
|
|
count={false} |
|
|
|
title='具体位置：' |
|
|
|
placeholder='具体位置：根据定位自动获取，可手动修改' |
|
|
|
// value={this.state.value} |
|
|
|
// onChange={this.handleChange.bind(this, 'value')} |
|
|
|
/> |
|
|
|
<View className='address'> |
|
|
|
<View className='title'>具体位置：</View> |
|
|
|
<Input |
|
|
|
className='input' |
|
|
|
type='text' |
|
|
|
placeholder='根据定位自动获取，可手动修改' |
|
|
|
value={address} |
|
|
|
onInput={e => handleInput(e, 'address')} |
|
|
|
/> |
|
|
|
</View> |
|
|
|
|
|
|
|
<AtTextarea |
|
|
|
count={false} |
|
|
|
title='巡查内容：' |
|
|
|
placeholder='请输入巡查内容' |
|
|
|
// value={this.state.value} |
|
|
|
// onChange={this.handleChange.bind(this, 'value')} |
|
|
|
value={content} |
|
|
|
onChange={(v, e) => handleInput(e, 'content')} |
|
|
|
/> |
|
|
|
|
|
|
|
{ |
|
|
|
isPatrol ? |
|
|
|
<View className='patrol-picker'> |
|
|
|
reportType === 'patrol' ? |
|
|
|
<View className='patrol-img'> |
|
|
|
现场图片： |
|
|
|
<AtImagePicker |
|
|
|
className='img-picker' |
|
|
|
count={3 - images.length} |
|
|
|
showAddBtn={images.length >= 3 ? false : true} |
|
|
|
files={images} |
|
|
|
onChange={onImgPickerChange} |
|
|
|
onImageClick={onImageClick} |
|
|
|
count={3 - scenePic.length} |
|
|
|
showAddBtn={scenePic.length >= 3 ? false : true} |
|
|
|
files={scenePic} |
|
|
|
onChange={files => handleImgChange(files, 'scenePic')} |
|
|
|
onImageClick={handleImgClick} |
|
|
|
/> |
|
|
|
</View> : |
|
|
|
<View className='conserve-picker'> |
|
|
|
<View className='conserve-img'> |
|
|
|
养护图片: |
|
|
|
<View className='horizontal-line hl-one'> |
|
|
|
<View className='circle c-one'></View> |
|
|
|
@ -211,9 +264,11 @@ const Index = () => { |
|
|
|
</View> |
|
|
|
<AtImagePicker |
|
|
|
className='img-picker' |
|
|
|
count={3} |
|
|
|
files={images} |
|
|
|
onChange={onImgPickerChange} |
|
|
|
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> |
|
|
|
@ -221,9 +276,11 @@ const Index = () => { |
|
|
|
</View> |
|
|
|
<AtImagePicker |
|
|
|
className='img-picker' |
|
|
|
count={3} |
|
|
|
files={images} |
|
|
|
onChange={onImgPickerChange} |
|
|
|
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> |
|
|
|
@ -231,15 +288,15 @@ const Index = () => { |
|
|
|
</View> |
|
|
|
<AtImagePicker |
|
|
|
className='img-picker' |
|
|
|
count={3} |
|
|
|
files={images} |
|
|
|
onChange={onImgPickerChange} |
|
|
|
count={3 - conserveAfterPic.length} |
|
|
|
showAddBtn={conserveAfterPic.length >= 3 ? false : true} |
|
|
|
files={conserveAfterPic} |
|
|
|
onChange={files => handleImgChange(files, 'conserveAfterPic')} |
|
|
|
onImageClick={handleImgClick} |
|
|
|
/> |
|
|
|
</View> |
|
|
|
} |
|
|
|
|
|
|
|
<AtButton formType='submit' type='primary' className='sub-btn'>上报</AtButton> |
|
|
|
|
|
|
|
<AtButton type='primary' className='sub-btn' onClick={report}>上报</AtButton> |
|
|
|
</View> |
|
|
|
) |
|
|
|
} |
|
|
|
|
