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

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>
+  )
+}

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;
+  }
+}

weapp/src/packages/patrol/index.jsx

@@ -7,86 +7,158 @@ import {
   Button,
   Image,
   Input,
-  Textarea,
   Picker
 } 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 arrowIcon from '../../static/img/patrol/arrow-down.svg';
 
 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(() => {
-    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,
-  }, [projectType])
+      road,
-  // useEffect(() => {
+      roadSectionStart,
-  //   if (projectType) {
+      roadSectionEnd,
-  //     setPrjTypeSelector(prjTypeSelector.filter(s => s.includes(projectType)))
+      address,
-  //   }
+      content,
-  // }, [projectType])
+      longitude: 37.000000000000,
-
+      latitude: 69.000000000000
-  function onTypeChange(e) {
+    }
-    if (e.detail.value === '巡查') {
+    if (reportType === 'patrol') {
-      setIsPatrol(true)
+      data['scenePic'] = scenePic.length > 0 && scenePic.map(item => item.url)
     } 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({
       urls: [file.url] // 需要预览的图片http链接列表
     })
   }
 
-  useEffect(() => {
+  const typeList = [
-    console.log(images);
+    {
-  }, [images])
+      value: 'patrol',
+      text: '巡查',
+      checked: true
+    },
+    {
+      value: 'conserve',
+      text: '养护',
+      checked: false
+    }
+  ]
 
   return (
-    <View>
+    <View className='patrol'>
       <View className='report-type'>
         <View className='text'>上报类型</View>
-        <RadioGroup onChange={onTypeChange}>
+        <RadioGroup onChange={handleTypeChange}>
           {
-            reportType.map((item, i) => {
+            typeList.map((item, i) => {
               return (
                 <Radio
                   key={i}
@@ -103,107 +175,88 @@ const Index = () => {
         </RadioGroup>
       </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='工程类型：'
         placeholder='请选择工程类型'
         value={projectType}
-        onChange={setProjectType}
+        onInput={setProjectType}
-        selector={prjTypeSelector}
+        selector={rPrjTypeSelector}
       />
       <InputPicker
-        className='input-picker'
         title='所在道路：'
-        placeholder='请选择您所在的道路'
+        placeholder='请选择或输入您所在的道路'
         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'
-          title='所属路段：'
           type='text'
           placeholder='路段名称'
           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' />
         </Picker>
-        <AtInput
+        <View>至&nbsp;</View>
+        <Input
           className='input'
           type='text'
           placeholder='路段名称'
           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' />
         </Picker>
       </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
         count={false}
         title='巡查内容：'
         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
               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 className='conserve-picker'>
+          <View className='conserve-img'>
             养护图片:
             <View className='horizontal-line hl-one'>
               <View className='circle c-one'></View>
@@ -211,9 +264,11 @@ const Index = () => {
             </View>
             <AtImagePicker
               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='circle c-two'></View>
@@ -221,9 +276,11 @@ const Index = () => {
             </View>
             <AtImagePicker
               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='circle c-three'></View>
@@ -231,15 +288,15 @@ const Index = () => {
             </View>
             <AtImagePicker
               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>
       }
-
+      <AtButton type='primary' className='sub-btn' onClick={report}>上报</AtButton>
-      <AtButton formType='submit' type='primary' className='sub-btn'>上报</AtButton>
-
     </View>
   )
 }

weapp/src/packages/patrol/index.scss

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

weapp/src/services/api.js

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

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' }
+    });
+}
+//获取道路养护统计及列表

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

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

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'
 
 const Right = (props) => {
-    const { roadData } = props
+    const { highwaysData } = props
     return (
         <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>
     )
 }

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 { 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 textStyle = { fontSize: 14, color: '#E9F7FF' }
   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 (
       <>
           <Module style={style} title={"各类附属设施数量统计"}>
           <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}>
+                {
+                  item?.map(i => (
+                    <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}>检查井</div>
+                        <div style={textStyle}>{i.name}</div>
-                <div style={numStyle}>89个</div>
+                        <div style={numStyle}>{`${i.count}个`}</div>
                       </div>
-            </Col>
+                    </div>
-            <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>
-                <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>
           </Module>
       </>

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

@@ -1,47 +1,61 @@
 import { Col, Row } from 'antd'
-import React from 'react'
+import React, { useState, useEffect } from 'react'
 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 { highwaysData } = props
   const style = { height: "31%", marginTop: "3%" }
   const textStyle = { fontSize: 14, color: '#E9F7FF' }
   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 (
     <>
       <Module style={style} title={"道路设施数量统计"}>
         <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}>
+                {
+                  item?.map(i => (
+                    <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}>标线</div>
+                        <div style={textStyle}>{i.name}</div>
-                <div style={numStyle}>1352km</div>
+                        <div style={numStyle}>{`${i.count}${i.unit}`}</div>
+                      </div>
                     </div>
-            </Col>
+                  ))
-            <Col style={{ display: 'flex', width: '50%' }}>
+                }
-              <img src='assets/images/quanju/renxing.png' alt='icon'  style={{ width: '36%', height: '100%' }}/>
+              </div>
-              <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>
       </Module>
     </>