Browse Source

小程序养护抽查

dev
liujiangyong 1 year ago
parent
commit
329fcd15df
  1. 4
      weapp/src/app.config.js
  2. 3
      weapp/src/packages/maintenanceSpotCheck/index.config.js
  3. 112
      weapp/src/packages/maintenanceSpotCheck/index.jsx
  4. 44
      weapp/src/packages/maintenanceSpotCheck/index.scss
  5. 3
      weapp/src/packages/maintenanceSpotCheck/spotChange/index.config.js
  6. 224
      weapp/src/packages/maintenanceSpotCheck/spotChange/index.jsx
  7. 54
      weapp/src/packages/maintenanceSpotCheck/spotChange/index.scss
  8. 3
      weapp/src/packages/maintenanceSpotCheck/spotCheckRoadDetail/index.config.js
  9. 73
      weapp/src/packages/maintenanceSpotCheck/spotCheckRoadDetail/index.jsx
  10. 29
      weapp/src/packages/maintenanceSpotCheck/spotCheckRoadDetail/index.scss
  11. 3
      weapp/src/packages/maintenanceSpotCheck/startSpotCheck/index.config.js
  12. 85
      weapp/src/packages/maintenanceSpotCheck/startSpotCheck/index.jsx
  13. 43
      weapp/src/packages/maintenanceSpotCheck/startSpotCheck/index.scss
  14. 17
      weapp/src/pages/home/index.jsx
  15. 29
      weapp/src/services/api.js

4
weapp/src/app.config.js

@ -12,6 +12,10 @@ export default {
'changePassword/index',
'changePassword/success/index',
'video/index',
'maintenanceSpotCheck/index',
'maintenanceSpotCheck/startSpotCheck/index',
'maintenanceSpotCheck/spotCheckRoadDetail/index',
'maintenanceSpotCheck/spotChange/index',
]
}],
permission: {

3
weapp/src/packages/maintenanceSpotCheck/index.config.js

@ -0,0 +1,3 @@
export default {
navigationBarTitleText: '养护抽查'
}

112
weapp/src/packages/maintenanceSpotCheck/index.jsx

@ -0,0 +1,112 @@
import React, { useEffect, useState } from 'react'
import Taro, { useDidShow } from '@tarojs/taro'
import { View, Input, Picker, ScrollView } from '@tarojs/components'
import { AtButton, AtIcon } from 'taro-ui'
import { NoData } from '@/components/index'
import moment from 'moment'
import request from '@/services/request'
import { getRoadSpotList } from '@/services/api'
import './index.scss'
function Index() {
// const pageSize = 10
// const count = 0
// const [page, setPage] = useState(1)
const [startTime, setStartTime] = useState('')
const [endTime, setEndTime] = useState('')
const [roadSpotList, setRoadSpotList] = useState([])
useDidShow(() => {
getSpotList()
})
const getSpotList = () => {
request.get(`${getRoadSpotList()}?startTime=${startTime}&endTime=${endTime}`)
.then(res => {
if (res.statusCode === 200) {
setRoadSpotList(res.data)
}
})
}
const resetTime = () => {
setStartTime('')
setEndTime('')
}
const navigateTo = (url) => {
Taro.navigateTo({ url })
}
const onScrollToLower = (e) => {
console.log(e)
}
return (
<View className='page'>
<View className='flex spot-check-filter-box'>
<Picker
mode='date'
onChange={e => setStartTime(e.detail.value)}
>
<View className='flex'>
<AtIcon value='calendar' size='20' color='#999' />
<Input className='input' placeholder='开始日期' disabled value={startTime} />
</View>
</Picker>
<Picker
mode='date'
onChange={e => setEndTime(e.detail.value)}
>
<View className='flex'>
<AtIcon value='calendar' size='20' color='#999' />
<Input className='input' placeholder='结束日期' disabled value={endTime} />
</View>
</Picker>
<AtButton
type='primary'
size='small'
circle
onClick={getSpotList}
>查询</AtButton>
<AtButton
className='reset-bth'
type='secondary'
size='small'
circle
onClick={resetTime}
>重置</AtButton>
</View>
<ScrollView
className='scrollview'
scrollY
scrollWithAnimation
scrollTop={0}
onScrollToLower={onScrollToLower}
enhanced
pagingEnabled
>
{roadSpotList.length ? roadSpotList.map(item => <View
key={item.id}
className='card'
onClick={() => navigateTo(`/packages/maintenanceSpotCheck/spotCheckRoadDetail/index?item=${encodeURIComponent(JSON.stringify(item))}`
)}
>
<View className='item'>抽查县道比例%{item.countyPercentage}</View>
<View className='item'>抽查县道{item.spotCountyRoadCount}</View>
<View className='item'>抽查乡道{item.spotTownRoadCount}</View>
<View className='item'>抽查村道{item.spotVillageRoadCount}</View>
<View className='item'>抽查日期{moment(item.date).format('YYYY-MM-DD')}</View>
</View>) : <View style={{ paddingTop: 100 }}><NoData /></View>}
</ScrollView>
<AtButton
className='to-start-btn'
type='primary'
onClick={() => navigateTo('/packages/maintenanceSpotCheck/startSpotCheck/index')}
>发起抽查</AtButton>
</View>
)
}
export default Index

44
weapp/src/packages/maintenanceSpotCheck/index.scss

@ -0,0 +1,44 @@
.page {
height: 100vh;
background-color: #fff;
font-size: 28px;
.spot-check-filter-box {
box-sizing: border-box;
width: 100%;
padding: 15px 20px;
.input {
margin-left: 10px;
}
.reset-bth {
margin-left: 20px;
}
}
.scrollview {
height: calc(100vh - 280px);
margin-bottom: 40px;
.card {
padding: 20px;
border: gainsboro 1px solid;
border-radius: 10px;
background-color: #fff;
box-shadow: 10px 10px 5px rgb(219, 218, 218);
margin: 0 0 20px 20px;
width: calc(100% - 40px);
box-sizing: border-box;
.item {
padding: 10px 0;
}
}
}
.to-start-btn {
width: 70%;
margin: 0 auto;
}
}

3
weapp/src/packages/maintenanceSpotCheck/spotChange/index.config.js

@ -0,0 +1,3 @@
export default {
navigationBarTitleText: '调整'
}

224
weapp/src/packages/maintenanceSpotCheck/spotChange/index.jsx

@ -0,0 +1,224 @@
import React, { useEffect, useState } from 'react'
import Taro, { useRouter } from '@tarojs/taro'
import { View, Text, Picker, } from '@tarojs/components'
import { AtButton, AtIcon, } from 'taro-ui'
import request from '@/services/request'
import { roadSpotChange, roadUrl } from '@/services/api'
import './index.scss'
function Index() {
const { spot, detail } = useRouter().params
const spotItem = spot ? JSON.parse(decodeURIComponent(spot)) : null
const detailItem = detail ? JSON.parse(decodeURIComponent(detail)) : null
const [road, setRoad] = useState([])
const [roadLevel, setRoadLevel] = useState('')
const [nameList, setNameList] = useState([]);
const [codeList, setCodeList] = useState([]);
const [noList, setNoList] = useState([]);
const [checked, setChecked] = useState({
routeName: '',
routeCode: '',
sectionNo: '',
startingPlaceName: '',
stopPlaceName: '',
})
useEffect(() => {
getRoad()
}, [])
const getRoad = () => {
if (!detailItem) return
const level = detailItem.road?.level
setRoadLevel(level)
const alterIdArr = level == '县' ? spotItem.countyRoadId
: level == '乡' ? spotItem.townshipRoadId
: level == '村' ? spotItem.villageRoadId : []
let query = `?level=${level}`
for (let i = 0; i < alterIdArr.length; i++) {
query += `&alterId=${alterIdArr[i]}`
}
request.get(`${roadUrl()}${query}`).then(res => {
if (res.statusCode === 200) {
let name = []
let code = []
let no = []
res.data?.forEach(v => {
if (v.routeName && !name.includes(v.routeName)) {
name.push(v.routeName)
}
if (v.routeCode && !code.includes(v.routeCode)) {
code.push(v.routeCode)
}
if (v.sectionNo && !no.includes(v.sectionNo)) {
no.push(v.sectionNo)
}
});
setRoad(res.data)
setNameList(name)
setCodeList(code)
setNoList(no)
} else {
Taro.showToast({ title: '获取路线失败', icon: 'error' })
}
})
}
const handleCheckChange = (value, key) => {
let nextValue = {
...checked,
[key]: value
}
let name = []
let code = []
let no = []
let data = road?.filter(d => (nextValue?.routeName ? nextValue?.routeName == d?.routeName : true)
&& (nextValue?.routeCode ? nextValue?.routeCode == d?.routeCode : true)
&& (nextValue?.sectionNo ? nextValue?.sectionNo == d?.sectionNo : true))
data.forEach(v => {
if (v.routeName && !name.includes(v.routeName)) {
name.push(v.routeName)
}
if (v.routeCode && !code.includes(v.routeCode)) {
code.push(v.routeCode)
}
if (v.sectionNo && !no.includes(v.sectionNo)) {
no.push(v.sectionNo)
}
});
setNameList(name)
setCodeList(code)
setNoList(no)
if (nextValue.routeName && nextValue.routeCode && nextValue.sectionNo) {
nextValue.startingPlaceName = data[0]?.startingPlaceName
nextValue.stopPlaceName = data[0]?.stopPlaceName
} else {
nextValue.startingPlaceName = ''
nextValue.stopPlaceName = ''
}
setChecked(nextValue)
}
const handleSubmit = () => {
if (!checked.routeName || !checked.routeCode || !checked.sectionNo) {
Taro.showToast({ title: '请选择路线', icon: 'error' })
return
}
let data = road.find(d => checked.routeName == d?.routeName
&& checked.routeCode == d.routeCode
&& checked.sectionNo == d.sectionNo
)
Taro.showLoading({ title: '调整中...' })
request.post(`${roadSpotChange()}`, {
previewId: spotItem.id,
originRoadId: detailItem.road?.id,
changeRoadId: data.id,
}).then(res => {
Taro.hideLoading()
if (res.statusCode === 204) {
Taro.showToast({ title: '调整成功', icon: 'success' })
setTimeout(() => {
Taro.navigateBack()
}, 1500)
} else {
Taro.showToast({ title: '调整失败', icon: 'error' })
}
})
}
return (
<View className='page'>
<View className='cell'>
<View className='title'>道路类型</View>
<View className='content'>{roadLevel}</View>
</View>
<View className='cell'>
<View className='title'><Text className='star'>*</Text>路线名称</View>
<View className='content'>
<Picker
mode='selector'
range={nameList}
onChange={e => handleCheckChange(nameList[e.detail.value], 'routeName')}
>
<View className='picker'>
<View>{checked.routeName || '请选择'}</View>
<AtIcon className='arrow' value='chevron-down' size='20' color='#999' />
</View>
</Picker>
<AtIcon
value='close-circle'
size='20'
color='#999'
onClick={() => handleCheckChange('', 'routeName')}
/>
</View>
</View>
<View className='cell'>
<View className='title'><Text className='star'>*</Text>路线代码</View>
<View className='content'>
<Picker
mode='selector'
range={codeList}
onChange={e => handleCheckChange(codeList[e.detail.value], 'routeCode')}
>
<View className='picker'>
<View>{checked.routeCode || '请选择'}</View>
<AtIcon className='arrow' value='chevron-down' size='20' color='#999' />
</View>
</Picker>
<AtIcon
value='close-circle'
size='20'
color='#999'
onClick={() => handleCheckChange('', 'routeCode')}
/>
</View>
</View>
<View className='cell'>
<View className='title'><Text className='star'>*</Text>路段序号</View>
<View className='content'>
<Picker
mode='selector'
range={noList}
onChange={e => handleCheckChange(noList[e.detail.value], 'sectionNo')}
>
<View className='picker'>
<View>{checked.sectionNo || '请选择'}</View>
<AtIcon className='arrow' value='chevron-down' size='20' color='#999' />
</View>
</Picker>
<AtIcon
value='close-circle'
size='20'
color='#999'
onClick={() => handleCheckChange('', 'sectionNo')}
/>
</View>
</View>
<View className='cell'>
<View className='title'>起点地名</View>
<View className='content'>{checked.startingPlaceName}</View>
</View>
<View className='cell'>
<View className='title'>止点地名</View>
<View className='content'>{checked.stopPlaceName}</View>
</View>
<AtButton
className='btn'
type='primary'
onClick={handleSubmit}
>确定</AtButton>
</View>
)
}
export default Index

54
weapp/src/packages/maintenanceSpotCheck/spotChange/index.scss

@ -0,0 +1,54 @@
.page {
height: 100vh;
background-color: #fff;
// font-size: 28px;
.cell {
padding: 24px 0px;
margin: 0 32px;
display: flex;
justify-content: space-between;
border-bottom: rgb(223, 237, 243) 1px solid;
.title {
display: inline-block;
width: 192px;
margin-right: 16px;
.star {
color: #ff0000;
margin-right: 8px;
}
}
.content {
width: calc(100% - 192px - 16px);
display: flex;
justify-content: flex-end;
.picker {
width: 400px;
display: flex;
justify-content: flex-end;
align-items: center;
.arrow {
margin: 0 32px;
}
}
}
}
.list-item {
width: calc(100% - 60px);
}
.list-clear {
margin-right: 20px;
}
.btn {
width: 70%;
margin: 100px auto 0;
}
}

3
weapp/src/packages/maintenanceSpotCheck/spotCheckRoadDetail/index.config.js

@ -0,0 +1,3 @@
export default {
navigationBarTitleText: '抽查详情'
}

73
weapp/src/packages/maintenanceSpotCheck/spotCheckRoadDetail/index.jsx

@ -0,0 +1,73 @@
import React, { useEffect, useState } from 'react'
import Taro, { useRouter, useDidShow } from '@tarojs/taro'
import { View } from '@tarojs/components'
import { AtButton, AtSearchBar } from 'taro-ui'
import { NoData } from '@/components/index'
import moment from 'moment'
import request from '@/services/request'
import { getRoadSpotDetail } from '@/services/api'
import './index.scss'
function Index() {
const { item } = useRouter().params
const spotItem = item ? JSON.parse(decodeURIComponent(item)) : null
const [keyword, setKeyword] = useState('')
const [roadDetailList, setRoadDetailList] = useState([])
useDidShow(() => {
getDetail()
})
const getDetail = () => {
if (spotItem) {
Taro.showLoading({ title: '加载中' })
request.get(`${getRoadSpotDetail()}?previewId=${spotItem.id}&keyword=${keyword}`).then(res => {
Taro.hideLoading()
if (res.statusCode === 200) {
setRoadDetailList(res.data)
} else {
Taro.showToast({ title: '获取详情失败', icon: 'error' })
}
})
}
}
return (<View className='page'>
<AtSearchBar
placeholder='道路名称关键字'
showActionButton
value={keyword}
onChange={v => setKeyword(v)}
onActionClick={getDetail}
/>
<View className='top flex'>抽查日期{moment(spotItem.date).format('YYYY-MM-DD')}</View>
{roadDetailList.length ? roadDetailList.map(item => <View key={item.id} className='card'>
<View className='item'>道路类型{item.road?.level ? (item.road?.level + '道') : '--'}</View>
<View className='item'>路线名称{item.road?.routeName || '--'}</View>
<View className='item at-row'>
<View className='at-col-6'>路线代码{item.road?.routeCode || '--'}</View>
<View className='at-col-6'>路段序号{item.road?.sectionNo || '--'}</View>
</View>
<View className='item at-row'>
<View className='at-col-6'>起点地名{item.road?.startingPlaceName || '--'}</View>
<View className='at-col-6'>止点地名{item.road?.stopPlaceName || '--'}</View>
</View>
<View className='item'>里程{item.road?.chainageMileage || '--'}</View>
<View className='item at-row'>
<View className='at-col-6'>养护次数{item.maintenanceCount}</View>
<View className='at-col-6'>
<AtButton
className='edit-btn'
type='primary'
size='small'
onClick={() => Taro.navigateTo({ url: `/packages/maintenanceSpotCheck/spotChange/index?detail=${encodeURIComponent(JSON.stringify(item))}&spot=${encodeURIComponent(JSON.stringify(spotItem))}` })}
>调整</AtButton>
</View>
</View>
</View>) : <View style={{ paddingTop: 100 }}><NoData /></View>}
</View>)
}
export default Index

29
weapp/src/packages/maintenanceSpotCheck/spotCheckRoadDetail/index.scss

@ -0,0 +1,29 @@
.page {
background-color: #fff;
height: 100vh;
font-size: 28px;
padding-bottom: 40px;
.top {
height: 90px;
}
.card {
padding: 20px;
border: gainsboro 1px solid;
border-radius: 10px;
background-color: #fff;
box-shadow: 10px 10px 5px rgb(219, 218, 218);
margin: 0 0 20px 20px;
width: calc(100% - 40px);
box-sizing: border-box;
.item {
padding: 10px 0;
.edit-btn {
width: 100px;
}
}
}
}

3
weapp/src/packages/maintenanceSpotCheck/startSpotCheck/index.config.js

@ -0,0 +1,3 @@
export default {
navigationBarTitleText: '开始抽查'
}

85
weapp/src/packages/maintenanceSpotCheck/startSpotCheck/index.jsx

@ -0,0 +1,85 @@
import React, { useState } from 'react'
import Taro from '@tarojs/taro'
import { View, Picker } from '@tarojs/components'
import { AtButton, AtIcon, } from 'taro-ui'
import request from '@/services/request'
import { roadSpotPrepare, roadSpotConfirm } from '@/services/api'
import './index.scss'
function Index() {
const rateArr = ['50%', '75%'];
const [rate, setRate] = useState('50%')
const [prepare, setPrepare] = useState({
previewId: null,
spotCountyRoadCount: null,
spotTownRoadCount: null,
spotVillageRoadCount: null,
})
const startSpotCheck = () => {
request.post(roadSpotPrepare(), { countyPercentage: rate === '50%' ? 50 : 75 }).then(res => {
if (res.statusCode === 200 || res.statusCode === 204) {
Taro.showToast({ title: '抽取成功', icon: 'success' })
setPrepare(res.data)
} else {
Taro.showToast({ title: '抽取失败', icon: 'error' })
console.log(res.errMsg)
}
})
}
const onSubmit = () => {
if (!prepare.previewId) {
Taro.showToast({ title: '请先抽取道路' })
return
}
request.post(roadSpotConfirm(), { previewId: prepare.previewId }).then(res => {
if (res.statusCode === 204) {
Taro.showToast({ title: '提交成功', icon: 'success' })
setTimeout(() => {
Taro.navigateBack()
}, 1500)
} else {
Taro.showToast({ title: '提交失败', icon: 'error' })
console.log(res.errMsg)
}
})
}
return (
<View className='page'>
<View className='content'>
<View className='fs24'>默认抽查乡道比例为25%村道比例为10%</View>
<View className='item'>
<View className='title'>抽查县道比例%:</View>
<Picker mode='selector'
range={rateArr}
onChange={e => setRate(rateArr[e.detail.value])}
>
<View className='input'>
{rate || '请选择'}
<AtIcon value='chevron-down' size='20' color='#ccc' />
</View>
</Picker>
</View>
<AtButton type='primary' className='start-btn' size='small'
onClick={startSpotCheck}
>开始抽取</AtButton>
<View className='item'>
<View className='title'>抽查县道</View>
<View className='input disabled'>{prepare.spotCountyRoadCount}</View>
</View>
<View className='item'>
<View className='title'>抽查乡道</View>
<View className='input disabled'>{prepare.spotTownRoadCount}</View>
</View>
<View className='item'>
<View className='title'>抽查村道</View>
<View className='input disabled'>{prepare.spotVillageRoadCount}</View>
</View>
<AtButton type='primary' className='submit-btn' onClick={onSubmit}>提交</AtButton>
</View>
</View>
)
}
export default Index

43
weapp/src/packages/maintenanceSpotCheck/startSpotCheck/index.scss

@ -0,0 +1,43 @@
.page {
background-color: #fff;
height: 100vh;
padding: 60px;
box-sizing: border-box;
.content {
margin: 0 auto;
width: 100%;
min-height: 60%;
.item {
margin-top: 30px;
.title {}
.input {
margin-top: 10px;
border: 1px solid #ccc;
border-radius: 10px;
padding: 10px 20px;
display: flex;
justify-content: space-between;
height: 42px;
}
.disabled {
background-color: #eee;
}
}
.start-btn {
width: 150px;
margin: 30px auto;
}
.submit-btn {
width: 70%;
margin: 100px auto 0;
}
}
}

17
weapp/src/pages/home/index.jsx

@ -26,6 +26,10 @@ const Index = () => {
}
}, [])
const navigateTo = (url) => {
Taro.navigateTo({ url })
}
function toPatrol(kind) {
Taro.navigateTo({
url: `/packages/patrol/index?type=edit&kind=${kind}`
@ -107,7 +111,18 @@ const Index = () => {
<View className='card fill_wait'>
<View className='title'> </View>
<View className='btn' onClick={
() => toPatrolView('wait')
() => toPatrolView('wait')
}>
查看
</View>
</View> : ''
}
{
judgeRight('MAINTENANCESPOTCHECK') ?
<View className='card fill_anomaly'>
<View className='title'>养护抽查</View>
<View className='btn' onClick={
() => navigateTo('/packages/maintenanceSpotCheck/index')
}>
查看
</View>

29
weapp/src/services/api.js

@ -67,13 +67,32 @@ export const postHandle = reportId => {
return `/report/${reportId}/handle`;
};
// 道路抽查列表
export const getRoadSpotList = () => {
return `/road/spot/list`;
};
// 道路抽查详情
export const getRoadSpotDetail = () => {
return `/road/spot/detail`;
};
// 获取道路
export const roadUrl = () => {
return `/road`;
};
// 调整已抽查的道路
export const roadSpotChange = () => {
return `/road/spot/change`;
};
// 开始抽取
export const roadSpotPrepare = () => {
return `/road/spot/prepare`;
};
// 提交抽查
export const roadSpotConfirm = () => {
return `/road/spot/confirm`;
};
Loading…
Cancel
Save