liujiangyong
10 months ago
11 changed files with 224 additions and 130 deletions
@ -0,0 +1,3 @@ |
|||
export default { |
|||
navigationBarTitleText: '抽查详情' |
|||
} |
@ -0,0 +1,99 @@ |
|||
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 Skeleton from '../components/skeleton' |
|||
import moment from 'moment' |
|||
import request from '@/services/request' |
|||
import { getRoadSpotDetail } from '@/services/api' |
|||
import './index.scss' |
|||
|
|||
function Index() { |
|||
const { item, isOld } = useRouter().params |
|||
const spotItem = item ? JSON.parse(decodeURIComponent(item)) : null |
|||
|
|||
const [keyword, setKeyword] = useState('') |
|||
const [roadDetailList, setRoadDetailList] = useState([]) |
|||
const [isNoData, setIsNoData] = useState(false) |
|||
|
|||
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' }) |
|||
} |
|||
if (res.data?.length) { |
|||
setIsNoData(false) |
|||
} else { |
|||
setIsNoData(true) |
|||
} |
|||
}) |
|||
} |
|||
} |
|||
|
|||
const renderList = () => { |
|||
return 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-3'> |
|||
<AtButton |
|||
className='edit-btn' |
|||
type='primary' |
|||
size='small' |
|||
onClick={() => Taro.navigateTo({ url: `/packages/maintenanceSpotCheck/spotCheckRoadDetail/index?detail=${encodeURIComponent(JSON.stringify(item))}` })} |
|||
>详情</AtButton> |
|||
</View> |
|||
<View className='at-col-3'> |
|||
<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))}` })} |
|||
disabled={ |
|||
isOld === 'true' || |
|||
item.roadSpotCheckPreview?.roadSpotCheckChangeLogs?.some(l => l.changeRoadId == item.roadId) |
|||
} |
|||
>调整</AtButton> |
|||
</View> |
|||
</View> |
|||
</View>) : <Skeleton length={3} /> |
|||
} |
|||
|
|||
const renderNoData = () => { |
|||
return <View style={{ marginTop: 100 }}><NoData /></View> |
|||
} |
|||
|
|||
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> |
|||
{isNoData ? renderNoData() : renderList()} |
|||
</View>) |
|||
} |
|||
|
|||
export default Index |
@ -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; |
|||
} |
|||
} |
|||
} |
|||
} |
@ -1,3 +1,3 @@ |
|||
export default { |
|||
navigationBarTitleText: '抽查详情' |
|||
navigationBarTitleText: '抽查道路详情' |
|||
} |
@ -1,91 +1,61 @@ |
|||
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 Skeleton from '../components/skeleton' |
|||
import moment from 'moment' |
|||
import request from '@/services/request' |
|||
import { getRoadSpotDetail } from '@/services/api' |
|||
import React from 'react' |
|||
import Taro, { useRouter } from '@tarojs/taro' |
|||
import { View, Text } from '@tarojs/components' |
|||
import { AtList, AtListItem } from "taro-ui" |
|||
import './index.scss' |
|||
|
|||
function Index() { |
|||
const { item, isOld } = useRouter().params |
|||
const spotItem = item ? JSON.parse(decodeURIComponent(item)) : null |
|||
|
|||
const [keyword, setKeyword] = useState('') |
|||
const [roadDetailList, setRoadDetailList] = useState([]) |
|||
const [isNoData, setIsNoData] = useState(false) |
|||
|
|||
useDidShow(() => { |
|||
getDetail() |
|||
}) |
|||
const roadCode = [ |
|||
{ title: "八一乡", value: "360121206000" }, |
|||
{ title: "东新乡", value: "360121205000" }, |
|||
{ title: "富山乡", value: "360121204000" }, |
|||
{ title: "冈上镇", value: "360121107000" }, |
|||
{ title: "广福镇", value: "360121108000" }, |
|||
{ title: "黄马乡", value: "360121203000" }, |
|||
{ title: "蒋巷镇", value: "360121105000" }, |
|||
{ title: "金湖管理处", value: "330052" }, |
|||
{ title: "泾口乡", value: "360121200000" }, |
|||
{ title: "莲塘镇", value: "360121100000" }, |
|||
{ title: "南新乡", value: "360121201000" }, |
|||
{ title: "三江镇", value: "360121102000" }, |
|||
{ title: "塔城乡", value: "360121202000" }, |
|||
{ title: "塘南镇", value: "360121103000" }, |
|||
{ title: "武阳镇", value: "360121106000" }, |
|||
{ title: "向塘镇", value: "360121101000" }, |
|||
{ title: "银三角管委会", value: "360121471000" }, |
|||
{ title: "幽兰镇", value: "360121104000" }, |
|||
] |
|||
|
|||
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' }) |
|||
} |
|||
if (res.data?.length) { |
|||
setIsNoData(false) |
|||
function Index() { |
|||
const { detail } = useRouter().params |
|||
const detailItem = detail ? JSON.parse(decodeURIComponent(detail)) : null |
|||
|
|||
let townshipCode = '' |
|||
const targetValue = detailItem?.road?.townshipCode ?? '' |
|||
const foundItem = roadCode.find(item => item.value === targetValue) |
|||
if (foundItem) { |
|||
townshipCode = foundItem.title |
|||
} else { |
|||
setIsNoData(true) |
|||
} |
|||
}) |
|||
} |
|||
} |
|||
|
|||
const renderList = () => { |
|||
return 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))}` })} |
|||
disabled={ |
|||
isOld === 'true' || |
|||
item.roadSpotCheckPreview?.roadSpotCheckChangeLogs?.some(l => l.changeRoadId == item.roadId) |
|||
} |
|||
>调整</AtButton> |
|||
</View> |
|||
townshipCode = "--" |
|||
} |
|||
|
|||
return ( |
|||
<View className='page'> |
|||
<AtList> |
|||
<AtListItem title='所属乡镇' extraText={townshipCode} /> |
|||
<AtListItem title='所属行政村' extraText={detailItem.road?.village?.name || '--'} /> |
|||
<AtListItem title='道路名称' extraText={detailItem.road?.routeName || '--'} /> |
|||
<AtListItem title='道路代码' extraText={detailItem.road?.routeCode || '--'} /> |
|||
<AtListItem title='起点桩号' extraText={detailItem.road?.startStation || '--'} /> |
|||
<AtListItem title='止点桩号' extraText={detailItem.road?.stopStation || '--'} /> |
|||
<AtListItem title='技术等级' extraText={detailItem.road?.technicalLevel || '--'} /> |
|||
<AtListItem title='路面类型' extraText={detailItem.road?.pavementType || '--'} /> |
|||
<AtListItem title='路面宽度' extraText={detailItem.road?.pavementWidth || '--'} /> |
|||
<AtListItem title='路基宽度' extraText={detailItem.road?.subgradeWidth || '--'} /> |
|||
<AtListItem title='桩号里程' extraText={detailItem.road?.chainageMileage || '--'} /> |
|||
<AtListItem title='养护次数(次)' extraText={detailItem.maintenanceCount} /> |
|||
</AtList> |
|||
</View> |
|||
</View>) : <Skeleton length={3} /> |
|||
} |
|||
|
|||
const renderNoData = () => { |
|||
return <View style={{ marginTop: 100 }}><NoData /></View> |
|||
} |
|||
|
|||
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> |
|||
{isNoData ? renderNoData() : renderList()} |
|||
</View>) |
|||
) |
|||
} |
|||
|
|||
export default Index |
@ -1,29 +1,9 @@ |
|||
.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; |
|||
// font-size: 28px; |
|||
|
|||
.item { |
|||
padding: 10px 0; |
|||
|
|||
.edit-btn { |
|||
width: 100px; |
|||
} |
|||
} |
|||
.at-list__item-extra { |
|||
max-width: 470px; |
|||
} |
|||
} |
Loading…
Reference in new issue