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

道路路段和位置信息接入

release_0.0.4
liujiangyong 3 years ago
parent
0c67f1faf1
commit
147f2ae0ba
6 changed files with 226 additions and 161 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. 3
      weapp/src/app.config.js
  2. 2
      weapp/src/packages/components/inputPicker/index.jsx
  3. 332
      weapp/src/packages/patrol/index.jsx
  4. 37
      weapp/src/packages/patrol/index.scss
  5. 2
      weapp/src/packages/patrolView/index.jsx
  6. 11
      weapp/src/services/api.js

3
weapp/src/app.config.js
View File

@ -16,6 +16,9 @@ export default {
"desc": '需要获取您的地理位置'
}
},
requiredPrivateInfos: [
'getLocation',
],
window: {
backgroundTextStyle: 'light',
navigationBarBackgroundColor: "#2C66F3",

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

@ -17,7 +17,7 @@ export default function InputPicker(props) {
function handleInput({ detail: { value: v } }) {
onInput(v)
if (v) {
setCurSelector(selector.filter(item => item.includes(v)))
setCurSelector(selector.filter(item => item && item.includes(v)))
} else {
setCurSelector(selector)
}

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

@ -1,18 +1,10 @@
import React, { useState, useEffect } from 'react';
import Taro, { useRouter } from '@tarojs/taro';
import {
View,
RadioGroup,
Radio,
Button,
Image,
Input,
Picker
} from '@tarojs/components';
import { AtButton, AtTextarea, AtImagePicker, AtAvatar } from 'taro-ui';
import { View, RadioGroup, Radio, Image, Input, Picker } from '@tarojs/components';
import { AtButton, AtTextarea, AtImagePicker } from 'taro-ui';
import InputPicker from '../components/inputPicker';
import request from '@/services/request';
import { postReport, getReportDetail } from '@/services/api';
import { postReport, getReportDetail, delReport, getRoadSection } from '@/services/api';
import './index.scss';
import arrowIcon from '../../static/img/patrol/arrow-down.svg';
@ -21,7 +13,6 @@ const Index = () => {
const { params: { type } } = router
const isView = type === 'view' ? true : false
const [reportType, setReportType] = useState('patrol') // 上报类型
const [projectType, setProjectType] = useState('') // 工程类型
const [road, setRoad] = useState('') // 所在道路
@ -33,9 +24,16 @@ const Index = () => {
const [conserveBeforePic, setConserveBeforePic] = useState([]) // 养护前图片
const [conserveUnderwayPic, setConserveUnderwayPic] = useState([]) // 养护中图片
const [conserveAfterPic, setConserveAfterPic] = useState([]) // 养护后图片
const [longitude, setLongitude] = useState(0) // 经度
const [latitude, setLatitude] = useState(0) // 纬度
const [sourceRoadSel, setSourceRoadSel] = useState([])
const [sourceRoadStartSel, setSourceRoadStartSel] = useState([])
const [sourceRoadEndSel, setSourceRoadEndSel] = useState([])
const [roadStartSelector, setRoadStartSelector] = useState([])
const [roadEndSelector, setRoadEndSelector] = useState([])
const prjTypeSelector = ['道路', '桥梁', '涵洞', '其他']
const [roadStartSel, setRoadStartSel] = useState([])
const [roadEndSel, setRoadEndSel] = useState([])
const [canReport, setCanReport] = useState(true)
@ -52,17 +50,9 @@ const Index = () => {
}
])
const rPrjTypeSelector = ['道路', '桥梁', '涵洞', '其他']
const rRoadSelector = ['富山一路', '金沙大道', '玉湖路']
const rRoadStartSelector = ['一段', '二段', '三段']
const rRoadEndSelector = ['一段', '二段', '三段']
useEffect(() => {
if (isView) {
Taro.showLoading({
title: '加载中'
})
if (isView) { // 查看
Taro.showLoading({ title: '加载中' })
request.get(getReportDetail(router.params.id)).then(res => {
Taro.hideLoading()
if (res.statusCode == 200 || res.statusCode == 204) {
@ -84,10 +74,51 @@ const Index = () => {
}, err => {
Taro.showToast({ title: err.message || '请求出错', icon: 'none' })
})
} else { // 填报
Taro.showLoading({ title: '加载中' })
let key = 'ODQBZ-3FZAU-6VIVL-2XXNM-F7CP7-WVFCY' // 写自己申请的key
Taro.getLocation({
type: 'wgs84',
success: function (res) {
setLongitude(res.longitude)
setLatitude(res.latitude)
Taro.request({
url: `https://apis.map.qq.com/ws/geocoder/v1/?location=${res.latitude},${res.longitude}&key=${key}`,
success: function (res) {
// 根据自己项目需求获取res内容
let addresscity = res.data.result.address_component.province + res.data.result.address_component.city + res.data.result.address_component.district
setAddress(addresscity + res.data.result.address_component.street_number)
}
})
}
})
request.get(getRoadSection()).then(res => {
Taro.hideLoading()
if (res.statusCode == 200 || res.statusCode == 204) {
const { data } = res
let nextSourceRoadSel = []
let nextSourceRoadStartSel = []
let nextSourceRoadEndSel = []
data.map(item => {
nextSourceRoadSel.push(item.routeName)
nextSourceRoadStartSel.push(item.startingPlaceName)
nextSourceRoadEndSel.push(item.stopPlaceName)
})
setSourceRoadSel(nextSourceRoadSel)
setSourceRoadStartSel(nextSourceRoadStartSel)
setSourceRoadEndSel(nextSourceRoadEndSel)
} else {
Taro.showToast({ title: res.data.message || '请求出错', icon: 'none' })
}
}, err => {
Taro.showToast({ title: err.message || '请求出错', icon: 'none' })
})
}
setRoadStartSelector(rRoadStartSelector)
setRoadEndSelector(rRoadEndSelector)
}, [])
useEffect(() => {
setRoadStartSel(sourceRoadStartSel)
setRoadEndSel(sourceRoadEndSel)
}, [sourceRoadStartSel, sourceRoadEndSel])
useEffect(() => {
setTypeList([
@ -110,7 +141,7 @@ const Index = () => {
Taro.showToast({ title: '请完善必填信息', icon: 'none' })
return
}
if (rPrjTypeSelector.indexOf(projectType) === -1) {
if (prjTypeSelector.indexOf(projectType) === -1) {
Taro.showToast({ title: '工程类型错误', icon: 'none' })
return
}
@ -122,8 +153,8 @@ const Index = () => {
roadSectionEnd,
address,
content,
// longitude: 37.000000000000,
// latitude: 69.000000000000
longitude,
latitude
}
if (reportType === 'patrol') {
data['scenePic'] = scenePic.length > 0 ? scenePic.map(item => item.url) : null
@ -165,22 +196,49 @@ const Index = () => {
})
}
function deleteReport() {
Taro.showModal({
title: '提示',
content: '确定删除吗？',
success: function (res) {
if (res.confirm) {
Taro.showLoading({
title: '删除中'
})
request.del(delReport(router.params.id)).then(res => {
Taro.hideLoading()
if (res.statusCode == 200 || res.statusCode == 204) {
Taro.showToast({ title: '删除成功', icon: 'none', duration: 1500 })
setTimeout(() => {
Taro.navigateBack()
}, 1000)
} else {
Taro.showToast({ title: res.data.message || '请求出错', icon: 'none' })
}
}, err => {
Taro.showToast({ title: err.message || '请求出错', icon: 'none' })
})
}
}
})
}
function handleInput({ detail: { value } }, type) {
switch (type) {
case 'roadSectionStart':
setRoadSectionStart(value)
if (value) {
setRoadStartSelector(rRoadStartSelector.filter(item => item.includes(value)))
setRoadStartSel(sourceRoadStartSel.filter(item => item && item.includes(value)))
} else {
setRoadStartSelector(rRoadStartSelector)
setRoadStartSel(sourceRoadStartSel)
}
break;
case 'roadSectionEnd':
setRoadSectionEnd(value)
if (value) {
setRoadEndSelector(rRoadEndSelector.filter(item => item.includes(value)))
setRoadEndSel(sourceRoadEndSel.filter(item => item && item.includes(value)))
} else {
setRoadEndSelector(rRoadEndSelector)
setRoadEndSel(sourceRoadEndSel)
}
break;
case 'address':
@ -221,106 +279,6 @@ const Index = () => {
})
}
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'>
<View className='report-type'>
@ -350,15 +308,16 @@ const Index = () => {
placeholder='请选择工程类型'
value={projectType}
onInput={setProjectType}
selector={rPrjTypeSelector}
selector={prjTypeSelector}
isView={isView}
/>
<InputPicker
key={sourceRoadSel} // 添加key保证selector更新重新渲染
title='所在道路：'
placeholder='请选择或输入您所在的道路'
value={road}
onInput={setRoad}
selector={rRoadSelector}
selector={sourceRoadSel}
isView={isView}
/>
@ -374,11 +333,11 @@ const Index = () => {
disabled={isView}
/>
{
isView &&
!isView &&
<Picker
mode='selector'
range={roadStartSelector}
onChange={e => setRoadSectionStart(roadStartSelector[e.detail.value])}
range={roadStartSel}
onChange={e => setRoadSectionStart(roadStartSel[e.detail.value])}
>
<Image src={arrowIcon} className='img-l' />
</Picker>
@ -394,11 +353,11 @@ const Index = () => {
disabled={isView}
/>
{
isView &&
!isView &&
<Picker
mode='selector'
range={roadEndSelector}
onChange={e => setRoadSectionEnd(roadEndSelector[e.detail.value])}
range={roadEndSel}
onChange={e => setRoadSectionEnd(roadEndSel[e.detail.value])}
>
<Image src={arrowIcon} className='img-r' />
</Picker>
@ -426,12 +385,95 @@ const Index = () => {
disabled={isView}
/>
{
isView ?
renderViewImg() :
renderAddImg()
reportType === 'patrol' ?
<View className='patrol-img'>
现场图片：
{
isView ?
<View className='img-box'>
{scenePic.map(item => (
<Image className='img' src={item.url} onClick={() => handleImgClick(undefined, item)} />
))}
</View> :
<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>
{
isView ?
<View className='img-box'>
{conserveBeforePic.map(item => (
<Image className='img' src={item.url} onClick={() => handleImgClick(undefined, item)} />
))}
</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>
{
isView ?
<View className='img-box'>
{conserveUnderwayPic.map(item => (
<Image className='img' src={item.url} onClick={() => handleImgClick(undefined, item)} />
))}
</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>
{
isView ?
<View className='img-box'>
{conserveAfterPic.map(item => (
<Image className='img' src={item.url} onClick={() => handleImgClick(undefined, item)} />
))}
</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 && <AtButton type='primary' className='sub-btn' onClick={report}>上报</AtButton>
isView ?
<AtButton type='primary' className='del-btn' onClick={deleteReport}>删除</AtButton> :
<AtButton type='primary' className='sub-btn' onClick={report}>上报</AtButton>
}
</View>
)

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

@ -26,7 +26,7 @@ page {
.road-section {
display: flex;
justify-content: space-between;
justify-content: left;
height: 96px;
align-items: center;
background-color: #fff;
@ -38,17 +38,18 @@ page {
.input {
width: 200px;
margin: 0 10px;
}
.img-r {
width: 24px;
height: 14px;
margin-right: 30px;
margin: 0 10px;
}
.img-l {
width: 24px;
height: 14px;
margin-right: 10px;
margin: 0 10px;
}
}
@ -72,17 +73,6 @@ page {
.patrol-img {
background-color: #fff;
padding: 20px;
.img-box {
display: flex;
flex-wrap: wrap;
.img {
width: 170px;
height: 170px;
margin: 10px 0 0 10px;
}
}
}
.conserve-img {
@ -93,6 +83,7 @@ page {
height: 30px;
width: 100%;
border-radius: 5px;
margin-top: 10px;
display: flex;
justify-content: left;
align-items: center;
@ -149,8 +140,26 @@ page {
}
}
.img-box {
display: flex;
flex-wrap: wrap;
.img {
width: 170px;
height: 170px;
margin: 10px 0 0 10px;
}
}
.sub-btn {
width: 70%;
margin: 80px auto;
}
.del-btn {
width: 70%;
margin: 80px auto;
background-color: #C23434;
border-color: #C23434;
}
}

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

@ -37,7 +37,7 @@ function Index() {
useEffect(() => {
request.get(getReportList(), {}, { hideErrorToast: true, hideLoading: true }).then(res => {
if (res.statusCode == 200) {
console.log(res);
// console.log(res);
setListData(res.data)
return res.data;
} else {

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

@ -22,6 +22,17 @@ export const getReportDetail = id => {
return `/report/${id}/detail`;
};
// 删除上报
export const delReport = id => {
console.log(id)
return `/report/${id}`;
};
// 获取道路路段
export const getRoadSection = () => {
return `/road/section`;
};
//行业查询
export const getIndustryUrl = () => {
return `/elec/business/industry`

Write Preview
Loading…
Cancel
Save