free-sun
/
Highways4Good
14
0
Fork 0
Code Issues Pull Requests 1 Projects Releases Wiki Activity
Browse Source

巡查养护查看

release_0.0.1
liujiangyong 3 years ago
parent
02851689ec
commit
59c0a30bba
7 changed files with 282 additions and 121 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 16
      weapp/src/packages/components/inputPicker/index.jsx
  2. 2
      weapp/src/packages/components/inputPicker/index.scss
  3. 352
      weapp/src/packages/patrol/index.jsx
  4. 10
      weapp/src/packages/patrol/index.scss
  5. 10
      weapp/src/packages/patrolView/index.jsx
  6. 2
      weapp/src/pages/home/index.jsx
  7. 11
      weapp/src/services/api.js

16
weapp/src/packages/components/inputPicker/index.jsx
View File

@ -2,12 +2,12 @@
* 输入框筛选选择器
*/
import React, { useState, useEffect } from 'react'
import { View, Picker, Image, Input } from '@tarojs/components'
import { View, Picker, Image, Input, Text } 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 { title, placeholder, selector, value, onInput, isView } = props
const [curSelector, setCurSelector] = useState([])
useEffect(() => {
@ -30,7 +30,7 @@ export default function InputPicker(props) {
return (
<View className='input-picker'>
<View className='input-box'>
<View className='title'>{title}</View>
<View className='title'><Text style={{ color: 'red' }}>*&nbsp;</Text>{title}</View>
<Input
className='input'
type='text'
@ -38,11 +38,15 @@ export default function InputPicker(props) {
border={false}
value={value}
onInput={handleInput}
disabled={isView}
/>
</View>
<Picker mode='selector' range={curSelector} onChange={handlePickerChange}>
<Image src={arrowIcon} className='img' />
</Picker>
{
!isView &&
<Picker mode='selector' range={curSelector} onChange={handlePickerChange}>
<Image src={arrowIcon} className='img' />
</Picker>
}
</View>
)
}

2
weapp/src/packages/components/inputPicker/index.scss
View File

@ -13,7 +13,7 @@
align-items: center;
.title {
margin-left: 30px;
margin-left: 12px;
}
.input {

352
weapp/src/packages/patrol/index.jsx
View File

@ -1,5 +1,5 @@
import React, { useState, useEffect } from 'react';
import Taro from '@tarojs/taro';
import Taro, { useRouter } from '@tarojs/taro';
import {
View,
RadioGroup,
@ -9,14 +9,19 @@ import {
Input,
Picker
} from '@tarojs/components';
import { AtButton, AtTextarea, AtImagePicker } from 'taro-ui';
import { AtButton, AtTextarea, AtImagePicker, AtAvatar } from 'taro-ui';
import InputPicker from '../components/inputPicker';
import request from '@/services/request';
import { postReport } from '@/services/api';
import { postReport, getReportDetail } from '@/services/api';
import './index.scss';
import arrowIcon from '../../static/img/patrol/arrow-down.svg';
const Index = () => {
const router = useRouter()
const { params: { type } } = router
const isView = type === 'view' ? true : false
const [reportType, setReportType] = useState('patrol') // 上报类型
const [projectType, setProjectType] = useState('') // 工程类型
const [road, setRoad] = useState('') // 所在道路
@ -32,6 +37,21 @@ const Index = () => {
const [roadStartSelector, setRoadStartSelector] = useState([])
const [roadEndSelector, setRoadEndSelector] = useState([])
const [canReport, setCanReport] = useState(true)
const [typeList, setTypeList] = useState([
{
value: 'patrol',
text: '巡查',
checked: true
},
{
value: 'conserve',
text: '养护',
checked: false
}
])
const rPrjTypeSelector = ['道路', '桥梁', '涵洞', '其他']
const rRoadSelector = ['富山一路', '金沙大道', '玉湖路']
@ -39,11 +59,61 @@ const Index = () => {
const rRoadEndSelector = ['一段', '二段', '三段']
useEffect(() => {
if (isView) {
Taro.showLoading({
title: '加载中'
})
request.get(getReportDetail(router.params.id)).then(res => {
Taro.hideLoading()
if (res.statusCode == 200 || res.statusCode == 204) {
const { data } = res
setReportType(data.reportType)
setProjectType(data.projectType)
setRoad(data.road)
setRoadSectionStart(data.roadSectionStart)
setRoadSectionEnd(data.roadSectionEnd)
setAddress(data.address)
setContent(data.content)
setScenePic(data.scenePic ? data.scenePic.map(item => ({ url: item })) : [])
setConserveBeforePic(data.conserveBeforePic ? data.conserveBeforePic.map(item => ({ url: item })) : [])
setConserveUnderwayPic(data.conserveUnderwayPic ? data.conserveUnderwayPic.map(item => ({ url: item })) : [])
setConserveAfterPic(data.conserveAfterPic ? data.conserveAfterPic.map(item => ({ url: item })) : [])
} else {
Taro.showToast({ title: res.data.message || '请求出错', icon: 'none' })
}
}, err => {
Taro.showToast({ title: err.message || '请求出错', icon: 'none' })
})
}
setRoadStartSelector(rRoadStartSelector)
setRoadEndSelector(rRoadEndSelector)
}, [])
useEffect(() => {
setTypeList([
{
value: 'patrol',
text: '巡查',
checked: reportType === 'patrol' ? true : false
},
{
value: 'conserve',
text: '养护',
checked: reportType === 'conserve' ? true : false
}
])
}, [reportType])
function report() {
if (!canReport) { return }
if (!projectType || !road) {
Taro.showToast({ title: '请完善必填信息', icon: 'none' })
return
}
if (rPrjTypeSelector.indexOf(projectType) === -1) {
Taro.showToast({ title: '工程类型错误', icon: 'none' })
return
}
let data = {
reportType,
projectType,
@ -52,34 +122,46 @@ const Index = () => {
roadSectionEnd,
address,
content,
longitude: 37.000000000000,
latitude: 69.000000000000
// longitude: 37.000000000000,
// latitude: 69.000000000000
}
if (reportType === 'patrol') {
data['scenePic'] = scenePic.length > 0 && scenePic.map(item => item.url)
data['scenePic'] = scenePic.length > 0 ? scenePic.map(item => item.url) : null
} else {
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
data['conserveBeforePic'] = conserveBeforePic.length > 0 ? conserveBeforePic.map(item => item.url) : null
data['conserveUnderwayPic'] = conserveUnderwayPic.length > 0 ? conserveUnderwayPic.map(item => item.url) : null
data['conserveAfterPic'] = conserveAfterPic.length > 0 ? conserveAfterPic.map(item => item.url) : null
}
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' })
Taro.showModal({
title: '提示',
content: '您要进行信息上报么？',
success: function (res) {
if (res.confirm) {
setCanReport(false)
setTimeout(() => {
setCanReport(true)
}, 3000) // 3秒内不可以重复点击
Taro.showLoading({
title: '上报中'
})
request.post(postReport(), data).then(res => {
Taro.hideLoading()
if (res.statusCode == 200 || res.statusCode == 204) {
Taro.showToast({ title: '上报成功', icon: 'none', duration: 1500 })
setTimeout(() => {
Taro.reLaunch({
url: '/pages/home/index'
});
}, 1500)
} else {
Taro.showToast({ title: res.data.message || '请求出错', icon: 'none' })
}
}, err => {
Taro.showToast({ title: err.message || '请求出错', icon: 'none' })
})
}
}
}, err => {
Taro.showToast({ title: err.message || '请求出错', icon: 'none' })
})
}
@ -139,18 +221,105 @@ const Index = () => {
})
}
const typeList = [
{
value: 'patrol',
text: '巡查',
checked: true
},
{
value: 'conserve',
text: '养护',
checked: false
}
]
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'>
@ -166,6 +335,7 @@ const Index = () => {
checked={item.checked}
className='radio'
color='#346FC2'
disabled={isView}
>
{item.text}
</Radio>
@ -181,6 +351,7 @@ const Index = () => {
value={projectType}
onInput={setProjectType}
selector={rPrjTypeSelector}
isView={isView}
/>
<InputPicker
title='所在道路：'
@ -188,6 +359,7 @@ const Index = () => {
value={road}
onInput={setRoad}
selector={rRoadSelector}
isView={isView}
/>
<View className='road-section'>
@ -195,34 +367,42 @@ const Index = () => {
<Input
className='input'
type='text'
placeholder='路段名称'
placeholder={isView ? '' : '路段名称'}
border={false}
value={roadSectionStart}
onInput={e => handleInput(e, 'roadSectionStart')}
disabled={isView}
/>
<Picker
mode='selector'
range={roadStartSelector}
onChange={e => setRoadSectionStart(roadStartSelector[e.detail.value])}
>
<Image src={arrowIcon} className='img-l' />
</Picker>
{
isView &&
<Picker
mode='selector'
range={roadStartSelector}
onChange={e => setRoadSectionStart(roadStartSelector[e.detail.value])}
>
<Image src={arrowIcon} className='img-l' />
</Picker>
}
<View>至&nbsp;</View>
<Input
className='input'
type='text'
placeholder='路段名称'
placeholder={isView ? '' : '路段名称'}
border={false}
value={roadSectionEnd}
onInput={e => handleInput(e, 'roadSectionEnd')}
disabled={isView}
/>
<Picker
mode='selector'
range={roadEndSelector}
onChange={e => setRoadSectionEnd(roadEndSelector[e.detail.value])}
>
<Image src={arrowIcon} className='img-r' />
</Picker>
{
isView &&
<Picker
mode='selector'
range={roadEndSelector}
onChange={e => setRoadSectionEnd(roadEndSelector[e.detail.value])}
>
<Image src={arrowIcon} className='img-r' />
</Picker>
}
</View>
<View className='address'>
@ -230,73 +410,29 @@ const Index = () => {
<Input
className='input'
type='text'
placeholder='根据定位自动获取，可手动修改'
placeholder={isView ? '' : '根据定位自动获取，可手动修改'}
value={address}
onInput={e => handleInput(e, 'address')}
disabled={isView}
/>
</View>
<AtTextarea
count={false}
title='巡查内容：'
placeholder='请输入巡查内容'
placeholder={isView ? '' : '请输入巡查内容'}
value={content}
onChange={(v, e) => handleInput(e, 'content')}
disabled={isView}
/>
{
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>
isView ?
renderViewImg() :
renderAddImg()
}
{
!isView && <AtButton type='primary' className='sub-btn' onClick={report}>上报</AtButton>
}
<AtButton type='primary' className='sub-btn' onClick={report}>上报</AtButton>
</View>
)
}

10
weapp/src/packages/patrol/index.scss
View File

@ -73,6 +73,16 @@ page {
background-color: #fff;
padding: 20px;
.img-box {
display: flex;
flex-wrap: wrap;
.img {
width: 170px;
height: 170px;
margin: 10px 0 0 10px;
}
}
}
.conserve-img {

10
weapp/src/packages/patrolView/index.jsx
View File

@ -89,17 +89,21 @@ function Index() {
}
}
const handleDetail = index => {
Taro.navigateTo({ url: `/packages/patrol/index?type=view&id=${listData[index].id}` })
}
return (
<View>
<View className='type-box'>
<View className='item' onClick={() => onTypeChange(true)}>
<Image className='type-img' src={isPatrol ? patrolActiveIcon : patrolIcon} />
<View style={{color: isPatrol ? '#346FC2': '#999999'}}>巡查</View>
<View style={{ color: isPatrol ? '#346FC2' : '#999999' }}>巡查</View>
</View>
<View className='line'></View>
<View className='item' onClick={() => onTypeChange(false)}>
<Image className='type-img' src={isPatrol ? conserveIcon : conserveActiveIcon} />
<View style={{color: isPatrol ? '#999999': '#346FC2'}}>养护</View>
<View style={{ color: isPatrol ? '#999999' : '#346FC2' }}>养护</View>
</View>
</View>
<View className='filter-box'>
@ -127,7 +131,7 @@ function Index() {
<View className='card-title'>{e.road}</View>
<View style={{ float: 'left', width: '100%', fontSize: '28rpx', marginTop: '16rpx' }}>
<View style={{ float: 'left' }}>填报人：</View>
<View style={{ float: 'left' }}>{e.user.name}</View>
<View style={{ float: 'left' }}>{e.user && e.user.name}</View>
</View>
<View className='card-date'>{moment(e.time).format('YYYY-MM-DD HH:mm:ss')}</View>
</View>

2
weapp/src/pages/home/index.jsx
View File

@ -10,7 +10,7 @@ const Index = () => {
function toPatrol() {
Taro.navigateTo({
url: '/packages/patrol/index'
url: '/packages/patrol/index?type=edit'
})
}
function toPatrolView() {

11
weapp/src/services/api.js
View File

@ -7,12 +7,19 @@ export const getLogoutUrl = () => {
return `/logout`;
};
// 巡查上报
export const postReport = () => {
return `/report`;
};
// 获取上报列表
export const getReportList = () => {
return `/report/list`;
};
export const postReport = () => {
return `/report`;
// 获取上报详情
export const getReportDetail = id => {
return `/report/${id}/detail`;
};
//行业查询

Write Preview
Loading…
Cancel
Save