liujiangyong
2 years ago
7 changed files with 293 additions and 29 deletions
@ -0,0 +1,3 @@ |
|||||
|
export default { |
||||
|
navigationBarTitleText: '巡查养护' |
||||
|
} |
@ -1,9 +1,206 @@ |
|||||
import React from 'react' |
import React, { useState, useEffect } from 'react'; |
||||
import { View } from '@tarojs/components'; |
import { |
||||
|
View, |
||||
|
RadioGroup, |
||||
|
Radio, |
||||
|
Button, |
||||
|
Image, |
||||
|
Input, |
||||
|
Textarea, |
||||
|
Picker |
||||
|
} from '@tarojs/components'; |
||||
|
import { AtForm, AtInput, AtButton, AtTextarea, AtImagePicker, AtTimeline } from 'taro-ui'; |
||||
|
// import InputPicker from '../components/inputPicker'; |
||||
|
import './index.scss'; |
||||
|
import arrowIcon from '../../static/img/patrol/arrow-down.svg'; |
||||
|
|
||||
const Index = () => { |
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 [images, setimages] = useState([]) |
||||
|
|
||||
|
const reportType = [ |
||||
|
{ |
||||
|
value: '巡查', |
||||
|
text: '巡查', |
||||
|
checked: true |
||||
|
}, |
||||
|
{ |
||||
|
value: '养护', |
||||
|
text: '养护', |
||||
|
checked: false |
||||
|
} |
||||
|
] |
||||
|
|
||||
|
useEffect(() => { |
||||
|
const prjTypeSelector = ['道路', '桥梁', '涵洞'] |
||||
|
const roadSelector = ['富山一路', '金沙大道', '玉湖路'] |
||||
|
setPrjTypeSelector(prjTypeSelector) |
||||
|
setRoadSelector(roadSelector) |
||||
|
}, []) |
||||
|
|
||||
|
useEffect(() => { |
||||
|
if (projectType) { |
||||
|
setPrjTypeSelector(prjTypeSelector.filter(s => s.includes(projectType))) |
||||
|
} |
||||
|
}, [projectType]) |
||||
|
// useEffect(() => { |
||||
|
// if (projectType) { |
||||
|
// setPrjTypeSelector(prjTypeSelector.filter(s => s.includes(projectType))) |
||||
|
// } |
||||
|
// }, [projectType]) |
||||
|
|
||||
|
function onTypeChange(e) { |
||||
|
if (e.detail.value === '巡查') { |
||||
|
setIsPatrol(true) |
||||
|
} else { |
||||
|
setIsPatrol(false) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
function onPrjTypeChange(e) { |
||||
|
setProjectType(selector[e.detail.value]) |
||||
|
} |
||||
|
|
||||
|
function onImgPickerChange() { |
||||
|
|
||||
|
} |
||||
|
|
||||
return ( |
return ( |
||||
<View>巡查养护</View> |
<View className='patrol'> |
||||
|
<View className='report-type'> |
||||
|
<View className='text'>上报类型</View> |
||||
|
<RadioGroup onChange={onTypeChange}> |
||||
|
{ |
||||
|
reportType.map((item, i) => { |
||||
|
return ( |
||||
|
<Radio |
||||
|
key={i} |
||||
|
value={item.value} |
||||
|
checked={item.checked} |
||||
|
className='radio' |
||||
|
color='#346FC2' |
||||
|
> |
||||
|
{item.text} |
||||
|
</Radio> |
||||
|
) |
||||
|
}) |
||||
|
} |
||||
|
</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' |
||||
|
title='工程类型:' |
||||
|
placeholder='请选择工程类型' |
||||
|
value={projectType} |
||||
|
onChange={setProjectType} |
||||
|
selector={prjTypeSelector} |
||||
|
/> |
||||
|
<InputPicker |
||||
|
className='input-picker' |
||||
|
title='所在道路:' |
||||
|
placeholder='请选择您所在的道路' |
||||
|
value={road} |
||||
|
onChange={setRoad} |
||||
|
selector={roadSelector} |
||||
|
/> */} |
||||
|
|
||||
|
<View className='input-picker'> |
||||
|
<AtInput |
||||
|
className='input' |
||||
|
title='所属路段:' |
||||
|
type='text' |
||||
|
placeholder='路段名称' |
||||
|
border={false} |
||||
|
// value={this.state.value} |
||||
|
// onChange={this.handleChange.bind(this, 'value')} |
||||
|
/> |
||||
|
<Image src={arrowIcon} className='img-l' /> |
||||
|
<AtInput |
||||
|
className='input' |
||||
|
type='text' |
||||
|
placeholder='路段名称' |
||||
|
border={false} |
||||
|
// value={this.state.value} |
||||
|
// onChange={this.handleChange.bind(this, 'value')} |
||||
|
/> |
||||
|
<Image src={arrowIcon} className='img-r' /> |
||||
|
</View> |
||||
|
|
||||
|
<View> |
||||
|
<AtTextarea |
||||
|
count={false} |
||||
|
title='具体位置:' |
||||
|
type='text' |
||||
|
placeholder='具体位置:根据定位自动获取,可手动修改' |
||||
|
border={false} |
||||
|
// value={this.state.value} |
||||
|
// onChange={this.handleChange.bind(this, 'value')} |
||||
|
/> |
||||
|
</View> |
||||
|
|
||||
|
{ |
||||
|
isPatrol ? |
||||
|
<View className='img-picker'> |
||||
|
现场图片: |
||||
|
<AtImagePicker |
||||
|
length={3} |
||||
|
files={images} |
||||
|
onChange={onImgPickerChange} |
||||
|
/> |
||||
|
</View> : |
||||
|
<View> |
||||
|
养护图片: |
||||
|
<AtTimeline |
||||
|
items={[ |
||||
|
{ |
||||
|
title: '养护前', |
||||
|
}, |
||||
|
{ title: '养护中' }, |
||||
|
{ title: '养护后' } |
||||
|
]} |
||||
|
> |
||||
|
</AtTimeline> |
||||
|
</View> |
||||
|
} |
||||
|
|
||||
|
<AtButton formType='submit' type='primary' className='sub-btn'>上报</AtButton> |
||||
|
|
||||
|
</View> |
||||
) |
) |
||||
} |
} |
||||
|
|
||||
|
@ -0,0 +1,51 @@ |
|||||
|
.patrol { |
||||
|
height: 100vh; |
||||
|
width: 100vw; |
||||
|
background-color: #f6f6f6; |
||||
|
padding-top: 20px; |
||||
|
|
||||
|
.report-type { |
||||
|
height: 96px; |
||||
|
background-color: #fff; |
||||
|
margin-bottom: 20px; |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
|
||||
|
.text { |
||||
|
margin-left: 30px; |
||||
|
} |
||||
|
|
||||
|
.radio { |
||||
|
margin-right: 30px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.input-picker { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
background-color: #fff; |
||||
|
margin-bottom: 5px; |
||||
|
|
||||
|
.img-r { |
||||
|
width: 24px; |
||||
|
height: 14px; |
||||
|
margin-right: 30px; |
||||
|
// margin-left: 10px; |
||||
|
} |
||||
|
.img-l { |
||||
|
width: 24px; |
||||
|
height: 14px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.img-picker { |
||||
|
background-color: #fff; |
||||
|
|
||||
|
} |
||||
|
|
||||
|
.sub-btn { |
||||
|
width: 70%; |
||||
|
} |
||||
|
} |
@ -1,29 +1,29 @@ |
|||||
.page { |
.page { |
||||
display: flex; |
display: flex; |
||||
flex-direction: column; |
flex-direction: column; |
||||
align-items: center; |
align-items: center; |
||||
|
|
||||
.fill { |
.fill { |
||||
margin-top: 30px; |
margin-top: 30px; |
||||
padding: 10px; |
padding: 10px; |
||||
width: 94%; |
width: 94%; |
||||
height: 360px; |
height: 360px; |
||||
background: url('../../static/img/patrol//fill-bg.svg') no-repeat; |
background: url('../../static/img/home/fill-bg.svg') no-repeat; |
||||
background-size:100% 100%; |
background-size: 100% 100%; |
||||
} |
} |
||||
|
|
||||
.title { |
.title { |
||||
margin: 50px 0 0 48px; |
margin: 50px 0 0 48px; |
||||
color: #fff; |
color: #fff; |
||||
font-size: 48px; |
font-size: 48px; |
||||
} |
} |
||||
|
|
||||
.btn { |
.btn { |
||||
margin: 20px 0 0 50px; |
margin: 30px 0 0 50px; |
||||
color: #fff; |
color: #fff; |
||||
text-align: center; |
text-align: center; |
||||
width: 200px; |
width: 200px; |
||||
border: solid 1px #fff; |
border: solid 1px #fff; |
||||
border-radius: 10px; |
border-radius: 10px; |
||||
} |
} |
||||
} |
} |
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
After Width: | Height: | Size: 1.3 KiB |
Loading…
Reference in new issue