Browse Source

巡查上报

release_0.0.1
liujiangyong 2 years ago
parent
commit
def4e9985c
  1. 48
      weapp/src/packages/components/inputPicker/index.jsx
  2. 30
      weapp/src/packages/components/inputPicker/index.scss
  3. 315
      weapp/src/packages/patrol/index.jsx
  4. 38
      weapp/src/packages/patrol/index.scss
  5. 2
      weapp/src/packages/patrolView/index.jsx
  6. 4
      weapp/src/services/api.js

48
weapp/src/packages/components/inputPicker/index.jsx

@ -0,0 +1,48 @@
/*
* 输入框筛选选择器
*/
import React, { useState, useEffect } from 'react'
import { View, Picker, Image, Input } from '@tarojs/components'
import arrowIcon from '../../../static/img/patrol/arrow-down.svg'
import './index.scss'
export default function InputPicker(props) {
const { title, placeholder, selector, value, onInput } = props
const [curSelector, setCurSelector] = useState([])
useEffect(() => {
setCurSelector(selector)
}, [])
function handleInput({ detail: { value: v } }) {
onInput(v)
if (v) {
setCurSelector(selector.filter(item => item.includes(v)))
} else {
setCurSelector(selector)
}
}
const handlePickerChange = (e) => {
onInput(curSelector[e.detail.value])
}
return (
<View className='input-picker'>
<View className='input-box'>
<View className='title'>{title}</View>
<Input
className='input'
type='text'
placeholder={placeholder}
border={false}
value={value}
onInput={handleInput}
/>
</View>
<Picker mode='selector' range={curSelector} onChange={handlePickerChange}>
<Image src={arrowIcon} className='img' />
</Picker>
</View>
)
}

30
weapp/src/packages/components/inputPicker/index.scss

@ -0,0 +1,30 @@
.input-picker {
display: flex;
justify-content: space-between;
height: 96px;
align-items: center;
background-color: #fff;
margin-bottom: 5px;
.input-box {
padding: 12px 0;
flex-grow: 1;
display: flex;
align-items: center;
.title {
margin-left: 30px;
}
.input {
margin-left: 20px;
flex-grow: 1;
}
}
.img {
width: 24px;
height: 14px;
margin: 0 30px;
}
}

315
weapp/src/packages/patrol/index.jsx

@ -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>&nbsp;</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>
)
}

38
weapp/src/packages/patrol/index.scss

@ -3,6 +3,10 @@ page {
width: 100vw;
background-color: #f6f6f6;
.patrol {
font-size: 28px;
}
.report-type {
height: 96px;
background-color: #fff;
@ -20,32 +24,58 @@ page {
}
}
.input-picker {
.road-section {
display: flex;
justify-content: space-between;
height: 96px;
align-items: center;
background-color: #fff;
margin-bottom: 5px;
.title {
margin-left: 30px;
}
.input {
width: 200px;
}
.img-r {
width: 24px;
height: 14px;
margin-right: 30px;
// margin-left: 10px;
}
.img-l {
width: 24px;
height: 14px;
margin-right: 10px;
}
}
.address {
background-color: #fff;
display: flex;
align-items: center;
height: 96px;
margin-bottom: 5px;
.title {
margin-left: 30px;
}
.input {
margin-left: 20px;
flex-grow: 1;
}
}
.patrol-picker {
.patrol-img {
background-color: #fff;
padding: 20px;
}
.conserve-picker {
.conserve-img {
background-color: #fff;
padding: 20px;

2
weapp/src/packages/patrolView/index.jsx

@ -35,7 +35,7 @@ function Index() {
throw new Error(error);
}
useEffect(() => {
request.get(getReportList(),{}, { hideErrorToast: true, hideLoading: true }).then(res => {
request.get(getReportList(), {}, { hideErrorToast: true, hideLoading: true }).then(res => {
if (res.statusCode == 200) {
console.log(res);
setListData(res.data)

4
weapp/src/services/api.js

@ -11,6 +11,10 @@ export const getReportList = () => {
return `/report/list`;
};
export const postReport = () => {
return `/report`;
};
//行业查询
export const getIndustryUrl = () => {
return `/elec/business/industry`

Loading…
Cancel
Save