Browse Source

Merge branch 'dev' of https://gitea.anxinyun.cn/gao.zhiyuan/Highways4Good into dev

release_0.0.1
dengyinhuan 2 years ago
parent
commit
a9b245052b
  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
  7. 17
      web/client/src/sections/quanju/containers/footer/conserve/action/index.js
  8. 8
      web/client/src/sections/quanju/containers/footer/conserve/index.js
  9. 8
      web/client/src/sections/quanju/containers/footer/conserve/right.js
  10. 75
      web/client/src/sections/quanju/containers/footer/conserve/right/right-center.js
  11. 78
      web/client/src/sections/quanju/containers/footer/conserve/right/right-top.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, Button,
Image, Image,
Input, Input,
Textarea,
Picker Picker
} from '@tarojs/components'; } from '@tarojs/components';
import { AtForm, AtInput, AtButton, AtTextarea, AtImagePicker, AtTimeline } from 'taro-ui'; import { AtButton, AtTextarea, AtImagePicker } from 'taro-ui';
// import InputPicker from '../components/inputPicker'; import InputPicker from '../components/inputPicker';
import request from '@/services/request';
import { postReport } from '@/services/api';
import './index.scss'; import './index.scss';
import arrowIcon from '../../static/img/patrol/arrow-down.svg'; import arrowIcon from '../../static/img/patrol/arrow-down.svg';
const Index = () => { const Index = () => {
const [isPatrol, setIsPatrol] = useState(true) // or const [reportType, setReportType] = useState('patrol') //
const [prjTypeSelector, setPrjTypeSelector] = useState([]) const [projectType, setProjectType] = useState('') //
const [roadSelector, setRoadSelector] = useState([]) const [road, setRoad] = useState('') //
const [projectType, setProjectType] = useState('') const [roadSectionStart, setRoadSectionStart] = useState('') // Start
const [road, setRoad] = useState('') 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 = [ const rPrjTypeSelector = ['道路', '桥梁', '涵洞', '其他']
{ const rRoadSelector = ['富山一路', '金沙大道', '玉湖路']
value: '巡查',
text: '巡查', const rRoadStartSelector = ['一段', '二段', '三段']
checked: true const rRoadEndSelector = ['一段', '二段', '三段']
},
{
value: '养护',
text: '养护',
checked: false
}
]
useEffect(() => { useEffect(() => {
const prjTypeSelector = ['道路', '桥梁', '涵洞', '其他'] setRoadStartSelector(rRoadStartSelector)
const roadSelector = ['富山一路', '金沙大道', '玉湖路'] setRoadEndSelector(rRoadEndSelector)
setPrjTypeSelector(prjTypeSelector)
setRoadSelector(roadSelector)
}, []) }, [])
useEffect(() => { function report() {
if (projectType) { let data = {
setPrjTypeSelector(prjTypeSelector.filter(s => s.includes(projectType))) reportType,
projectType,
road,
roadSectionStart,
roadSectionEnd,
address,
content,
longitude: 37.000000000000,
latitude: 69.000000000000
} }
}, [projectType]) if (reportType === 'patrol') {
// useEffect(() => { data['scenePic'] = scenePic.length > 0 && scenePic.map(item => item.url)
// if (projectType) {
// setPrjTypeSelector(prjTypeSelector.filter(s => s.includes(projectType)))
// }
// }, [projectType])
function onTypeChange(e) {
if (e.detail.value === '巡查') {
setIsPatrol(true)
} else { } 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) { function handleInput({ detail: { value } }, type) {
setProjectType(selector[e.detail.value]) 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) { function handleTypeChange(e) {
setimages(files) 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({ Taro.previewImage({
urls: [file.url] // http urls: [file.url] // http
}) })
} }
useEffect(() => { const typeList = [
console.log(images); {
}, [images]) value: 'patrol',
text: '巡查',
checked: true
},
{
value: 'conserve',
text: '养护',
checked: false
}
]
return ( return (
<View> <View className='patrol'>
<View className='report-type'> <View className='report-type'>
<View className='text'>上报类型</View> <View className='text'>上报类型</View>
<RadioGroup onChange={onTypeChange}> <RadioGroup onChange={handleTypeChange}>
{ {
reportType.map((item, i) => { typeList.map((item, i) => {
return ( return (
<Radio <Radio
key={i} key={i}
@ -103,107 +175,88 @@ const Index = () => {
</RadioGroup> </RadioGroup>
</View> </View>
<View className='input-picker'> <InputPicker
<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'
title='工程类型:' title='工程类型:'
placeholder='请选择工程类型' placeholder='请选择工程类型'
value={projectType} value={projectType}
onChange={setProjectType} onInput={setProjectType}
selector={prjTypeSelector} selector={rPrjTypeSelector}
/> />
<InputPicker <InputPicker
className='input-picker'
title='所在道路:' title='所在道路:'
placeholder='请选择您所在的道路' placeholder='请选择或输入您所在的道路'
value={road} value={road}
onChange={setRoad} onInput={setRoad}
selector={roadSelector} selector={rRoadSelector}
/> */} />
<View className='input-picker'> <View className='road-section'>
<AtInput <View className='title'>所属路段</View>
<Input
className='input' className='input'
title='所属路段:'
type='text' type='text'
placeholder='路段名称' placeholder='路段名称'
border={false} border={false}
// value={this.state.value} value={roadSectionStart}
// onChange={this.handleChange.bind(this, 'value')} 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' /> <Image src={arrowIcon} className='img-l' />
</Picker> </Picker>
<AtInput <View>&nbsp;</View>
<Input
className='input' className='input'
type='text' type='text'
placeholder='路段名称' placeholder='路段名称'
border={false} border={false}
// value={this.state.value} value={roadSectionEnd}
// onChange={this.handleChange.bind(this, 'value')} 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' /> <Image src={arrowIcon} className='img-r' />
</Picker> </Picker>
</View> </View>
<AtTextarea <View className='address'>
count={false} <View className='title'>具体位置</View>
title='具体位置:' <Input
placeholder='具体位置:根据定位自动获取,可手动修改' className='input'
// value={this.state.value} type='text'
// onChange={this.handleChange.bind(this, 'value')} placeholder='根据定位自动获取,可手动修改'
/> value={address}
onInput={e => handleInput(e, 'address')}
/>
</View>
<AtTextarea <AtTextarea
count={false} count={false}
title='巡查内容:' title='巡查内容:'
placeholder='请输入巡查内容' placeholder='请输入巡查内容'
// value={this.state.value} value={content}
// onChange={this.handleChange.bind(this, 'value')} onChange={(v, e) => handleInput(e, 'content')}
/> />
{ {
isPatrol ? reportType === 'patrol' ?
<View className='patrol-picker'> <View className='patrol-img'>
现场图片 现场图片
<AtImagePicker <AtImagePicker
className='img-picker' className='img-picker'
count={3 - images.length} count={3 - scenePic.length}
showAddBtn={images.length >= 3 ? false : true} showAddBtn={scenePic.length >= 3 ? false : true}
files={images} files={scenePic}
onChange={onImgPickerChange} onChange={files => handleImgChange(files, 'scenePic')}
onImageClick={onImageClick} onImageClick={handleImgClick}
/> />
</View> : </View> :
<View className='conserve-picker'> <View className='conserve-img'>
养护图片: 养护图片:
<View className='horizontal-line hl-one'> <View className='horizontal-line hl-one'>
<View className='circle c-one'></View> <View className='circle c-one'></View>
@ -211,9 +264,11 @@ const Index = () => {
</View> </View>
<AtImagePicker <AtImagePicker
className='img-picker' className='img-picker'
count={3} count={3 - conserveBeforePic.length}
files={images} showAddBtn={conserveBeforePic.length >= 3 ? false : true}
onChange={onImgPickerChange} files={conserveBeforePic}
onChange={files => handleImgChange(files, 'conserveBeforePic')}
onImageClick={handleImgClick}
/> />
<View className='horizontal-line hl-two'> <View className='horizontal-line hl-two'>
<View className='circle c-two'></View> <View className='circle c-two'></View>
@ -221,9 +276,11 @@ const Index = () => {
</View> </View>
<AtImagePicker <AtImagePicker
className='img-picker' className='img-picker'
count={3} count={3 - conserveUnderwayPic.length}
files={images} showAddBtn={conserveUnderwayPic.length >= 3 ? false : true}
onChange={onImgPickerChange} files={conserveUnderwayPic}
onChange={files => handleImgChange(files, 'conserveUnderwayPic')}
onImageClick={handleImgClick}
/> />
<View className='horizontal-line hl-three'> <View className='horizontal-line hl-three'>
<View className='circle c-three'></View> <View className='circle c-three'></View>
@ -231,15 +288,15 @@ const Index = () => {
</View> </View>
<AtImagePicker <AtImagePicker
className='img-picker' className='img-picker'
count={3} count={3 - conserveAfterPic.length}
files={images} showAddBtn={conserveAfterPic.length >= 3 ? false : true}
onChange={onImgPickerChange} files={conserveAfterPic}
onChange={files => handleImgChange(files, 'conserveAfterPic')}
onImageClick={handleImgClick}
/> />
</View> </View>
} }
<AtButton type='primary' className='sub-btn' onClick={report}>上报</AtButton>
<AtButton formType='submit' type='primary' className='sub-btn'>上报</AtButton>
</View> </View>
) )
} }

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

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

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

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

4
weapp/src/services/api.js

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

17
web/client/src/sections/quanju/containers/footer/conserve/action/index.js

@ -0,0 +1,17 @@
'use strict';
import { basicAction } from '@peace/utils'
import { ApiTable } from '$utils'
//获取路政列表
export function getHighways() {
return dispatch => basicAction({
type: 'get',
dispatch: dispatch,
actionType: 'GET_HIGHWAYS',
url: `${ApiTable.getHighways}`,
msg: { error: '获取路政列表失败' },
reducer: { name: 'highways' }
});
}
//获取道路养护统计及列表

8
web/client/src/sections/quanju/containers/footer/conserve/index.js

@ -3,11 +3,14 @@ import Left from './left'
import Right from './right' import Right from './right'
import { connect } from 'react-redux' import { connect } from 'react-redux'
import { getdaolutongji } from '../../../actions/example' import { getdaolutongji } from '../../../actions/example'
import { getHighways } from './action'
const Conserve = (props) => { const Conserve = (props) => {
const [roadData, setRoadData] = useState() const [roadData, setRoadData] = useState()
const [highwaysData, setHighwaysData] = useState()
const [loading, setLoading] = useState(true) const [loading, setLoading] = useState(true)
const { dispatch } = props const { dispatch } = props
useEffect(() => { useEffect(() => {
@ -15,12 +18,15 @@ const Conserve = (props) => {
setLoading(false) setLoading(false)
setRoadData(res.payload.data || {}) setRoadData(res.payload.data || {})
}) })
dispatch(getHighways()).then(res =>{
setHighwaysData(res.payload.data || [])
})
}, []) }, [])
return ( return (
<div style={{ display: 'flex', width: '100%', height: '100%', justifyContent: 'space-between' }}> <div style={{ display: 'flex', width: '100%', height: '100%', justifyContent: 'space-between' }}>
<Left roadData={roadData} loading={loading} /> <Left roadData={roadData} loading={loading} />
<Right roadData={roadData} loading={loading} /> <Right highwaysData={highwaysData} />
</div> </div>
) )
} }

8
web/client/src/sections/quanju/containers/footer/conserve/right.js

@ -4,12 +4,12 @@ import RightCenter from './right/right-center'
import RightTop from './right/right-top' import RightTop from './right/right-top'
const Right = (props) => { const Right = (props) => {
const { roadData } = props const { highwaysData } = props
return ( return (
<div style={{ display: 'flex', flexDirection: 'column', width: "23%", height: "100%", marginRight: "1%", }}> <div style={{ display: 'flex', flexDirection: 'column', width: "23%", height: "100%", marginRight: "1%", }}>
<RightTop roadData={roadData} /> <RightTop highwaysData={highwaysData}/>
<RightCenter roadData={roadData} /> <RightCenter highwaysData={highwaysData}/>
<RightBottom roadData={roadData} /> <RightBottom />
</div> </div>
) )
} }

75
web/client/src/sections/quanju/containers/footer/conserve/right/right-center.js

@ -2,47 +2,56 @@ import React from 'react'
import Module from '../../../public/module' import Module from '../../../public/module'
import { Col, Row } from 'antd' import { Col, Row } from 'antd'
const RightCenter = () => { // const unit =['个','个',]
const icon = [
'assets/images/quanju/jiancha.png',
'assets/images/quanju/yushui.png',
'assets/images/quanju/lupai.png',
'assets/images/quanju/zerenpai.png'
]
const RightCenter = (props) => {
const { highwaysData } = props
const style = { height: "31%", marginTop: "3%" } const style = { height: "31%", marginTop: "3%" }
const textStyle = { fontSize: 14, color: '#E9F7FF' } const textStyle = { fontSize: 14, color: '#E9F7FF' }
const numStyle = { color: '#fff', fontSize: 21, fontFamily: 'YouSheBiaoTiHei', textShadow: '0px 0px 8px #1C60FE', marginTop: 8 } const numStyle = { color: '#fff', fontSize: 21, fontFamily: 'YouSheBiaoTiHei', textShadow: '0px 0px 8px #1C60FE', marginTop: 8 }
const list = highwaysData?.slice(4, 8).map((h,index)=>{
return {
id:h.id,
name:h.name,
count:h.count,
// unit:unit[index],
icon:icon[index]
}
})
const arrayChunk = (array, size) => {
let data = []
for (let i = 0; i < array.length; i += size) {
data.push(array.slice(i, i + size))
}
return data
}
let lists = list ? arrayChunk(list, 2) : []
return ( return (
<> <>
<Module style={style} title={"各类附属设施数量统计"}> <Module style={style} title={"各类附属设施数量统计"}>
<div style={{ paddingLeft: '8%' }}> <div style={{ paddingLeft: '8%' }}>
<Row style={{ marginTop: 20, justifyContent: 'space-around' }}> {
<Col style={{ display: 'flex', width: '50%' }}> lists?.map((item, index) => {
<img src='assets/images/quanju/jiancha.png' alt='icon' style={{ width: '36%', height: '100%' }}/> return <div style={{ display: 'flex', marginTop: "5%", justifyContent: 'space-around' }} key={index}>
<div style={{ marginLeft: 10 }}> {
<div style={textStyle}>检查井</div> item?.map(i => (
<div style={numStyle}>89</div> <div style={{ display: 'flex', width: '50%' }} key={i.id}>
<img src={i.icon} alt='icon' style={{ width: '36%', height: '100%' }} />
<div style={{ marginLeft: 10 }}>
<div style={textStyle}>{i.name}</div>
<div style={numStyle}>{`${i.count}`}</div>
</div>
</div>
))
}
</div> </div>
</Col> })
<Col style={{ display: 'flex', width: '50%' }}> }
<img src='assets/images/quanju/yushui.png' alt='icon' style={{ width: '36%', height: '100%' }}/>
<span style={{ marginLeft: 10 }}>
<div style={textStyle}>雨水口</div>
<div style={numStyle}>61</div>
</span>
</Col>
</Row>
<Row style={{ marginTop: 20, justifyContent: 'space-around' }}>
<Col style={{ display: 'flex', width: '50%' }}>
<img src='assets/images/quanju/lupai.png' alt='icon' style={{ width: '36%', height: '100%' }}/>
<span style={{ marginLeft: 10 }}>
<div style={textStyle}>路牌名</div>
<div style={numStyle}>2230</div>
</span>
</Col>
<Col span={12} style={{ display: 'flex', width: '50%' }}>
<img src='assets/images/quanju/zerenpai.png' alt='icon' style={{ width: '36%', height: '100%' }}/>
<span style={{ marginLeft: 10 }}>
<div style={textStyle}>养护责任牌</div>
<div style={numStyle}>1217</div>
</span>
</Col>
</Row>
</div> </div>
</Module> </Module>
</> </>

78
web/client/src/sections/quanju/containers/footer/conserve/right/right-top.js

@ -1,47 +1,61 @@
import { Col, Row } from 'antd' import { Col, Row } from 'antd'
import React from 'react' import React, { useState, useEffect } from 'react'
import Module from '../../../public/module' import Module from '../../../public/module'
const iconSrc = [
'assets/images/quanju/biaoxian.png',
'assets/images/quanju/renxing.png',
'assets/images/quanju/biaozhi.png',
'assets/images/quanju/fanghu.png'
]
const unit = ['km', '处', '个', 'km']
const RightTop = (props) => { const RightTop = (props) => {
const { highwaysData } = props
const style = { height: "31%", marginTop: "3%" } const style = { height: "31%", marginTop: "3%" }
const textStyle = { fontSize: 14, color: '#E9F7FF' } const textStyle = { fontSize: 14, color: '#E9F7FF' }
const numStyle = { color: '#fff', fontSize: 21, fontFamily: 'YouSheBiaoTiHei', textShadow: '0px 0px 8px #1C60FE', marginTop: 8 } const numStyle = { color: '#fff', fontSize: 21, fontFamily: 'YouSheBiaoTiHei', textShadow: '0px 0px 8px #1C60FE', marginTop: 8 }
const list = highwaysData?.slice(0, 4).map((h,index)=>{
return {
id:h.id,
name:h.name,
count:h.count,
unit:unit[index],
icon:iconSrc[index]
}
})
const arrayChunk = (array, size) => {
let data = []
for (let i = 0; i < array.length; i += size) {
data.push(array.slice(i, i + size))
}
return data
}
let lists = list ? arrayChunk(list, 2) : []
return ( return (
<> <>
<Module style={style} title={"道路设施数量统计"}> <Module style={style} title={"道路设施数量统计"}>
<div style={{ paddingLeft: '8%' }}> <div style={{ paddingLeft: '8%' }}>
<Row style={{ marginTop: "5%", justifyContent: 'space-around' }}> {
<Col style={{ display: 'flex', width: '50%' }}> lists?.map((item, index) => {
<img src='assets/images/quanju/biaoxian.png' alt='icon' style={{ width: '36%', height: '100%' }} /> return <div style={{ display: 'flex', marginTop: "5%", justifyContent: 'space-around' }} key={index}>
<div style={{ marginLeft: 10 }}> {
<div style={textStyle}>标线</div> item?.map(i => (
<div style={numStyle}>1352km</div> <div style={{ display: 'flex', width: '50%' }} key={i.id}>
<img src={i.icon} alt='icon' style={{ width: '36%', height: '100%' }} />
<div style={{ marginLeft: 10 }}>
<div style={textStyle}>{i.name}</div>
<div style={numStyle}>{`${i.count}${i.unit}`}</div>
</div>
</div>
))
}
</div> </div>
</Col> })
<Col style={{ display: 'flex', width: '50%' }}> }
<img src='assets/images/quanju/renxing.png' alt='icon' style={{ width: '36%', height: '100%' }}/>
<span style={{ marginLeft: 10 }}>
<div style={textStyle}>人行道</div>
<div style={numStyle}>80</div>
</span>
</Col>
</Row>
<Row style={{ justifyContent: 'space-around' }}>
<Col style={{ display: 'flex', width: '50%' }}>
<img src='assets/images/quanju/biaozhi.png' alt='icon' style={{ width: '36%', height: '100%' }} />
<span style={{ marginLeft: 10 }}>
<div style={textStyle}>标志牌</div>
<div style={numStyle}>4563</div>
</span>
</Col>
<Col span={12} style={{ display: 'flex', width: '50%' }}>
<img src='assets/images/quanju/fanghu.png' alt='icon' style={{ width: '36%', height: '100%' }}/>
<span style={{ marginLeft: 10 }}>
<div style={textStyle}>防护栏</div>
<div style={numStyle}>1054km</div>
</span>
</Col>
</Row>
</div> </div>
</Module> </Module>
</> </>

Loading…
Cancel
Save