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

2 years ago · a9b245052b
11 changed files with 419 additions and 204 deletions
--- a/weapp/src/packages/components/inputPicker/index.jsx
+++ b/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>
+  )
+}
--- a/weapp/src/packages/components/inputPicker/index.scss
+++ b/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;
+  }
+}
--- a/weapp/src/packages/patrol/index.jsx
+++ b/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 InputPicker from '../components/inputPicker';
+import { AtButton, AtTextarea, AtImagePicker } from 'taro-ui';
+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 [prjTypeSelector, setPrjTypeSelector] = useState([])
-  const [roadSelector, setRoadSelector] = useState([])
-  const [projectType, setProjectType] = useState('')
-  const [road, setRoad] = useState('')
+  const [reportType, setReportType] = useState('patrol') // 上报类型
+  const [projectType, setProjectType] = useState('') // 工程类型
+  const [road, setRoad] = useState('') // 所在道路
+  const [roadSectionStart, setRoadSectionStart] = useState('') // 路段 Start
+  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 = [
-    {
-      value: '巡查',
-      text: '巡查',
-      checked: true
-    },
-    {
-      value: '养护',
-      text: '养护',
-      checked: false
-    }
-  ]
+  const rPrjTypeSelector = ['道路', '桥梁', '涵洞', '其他']
+  const rRoadSelector = ['富山一路', '金沙大道', '玉湖路']
+
+  const rRoadStartSelector = ['一段', '二段', '三段']
+  const rRoadEndSelector = ['一段', '二段', '三段']

  useEffect(() => {
-    const prjTypeSelector = ['道路', '桥梁', '涵洞', '其他']
-    const roadSelector = ['富山一路', '金沙大道', '玉湖路']
-    setPrjTypeSelector(prjTypeSelector)
-    setRoadSelector(roadSelector)
+    setRoadStartSelector(rRoadStartSelector)
+    setRoadEndSelector(rRoadEndSelector)
  }, [])

-  useEffect(() => {
-    if (projectType) {
-      setPrjTypeSelector(prjTypeSelector.filter(s => s.includes(projectType)))
+  function report() {
+    let data = {
+      reportType,
+      projectType,
+      road,
+      roadSectionStart,
+      roadSectionEnd,
+      address,
+      content,
+      longitude: 37.000000000000,
+      latitude: 69.000000000000
    }
-  }, [projectType])
-  // useEffect(() => {
-  //   if (projectType) {
-  //     setPrjTypeSelector(prjTypeSelector.filter(s => s.includes(projectType)))
-  //   }
-  // }, [projectType])
-
-  function onTypeChange(e) {
-    if (e.detail.value === '巡查') {
-      setIsPatrol(true)
+    if (reportType === 'patrol') {
+      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) {
-    setProjectType(selector[e.detail.value])
+  function handleInput({ detail: { value } }, type) {
+    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) {
-    setimages(files)
+  function handleTypeChange(e) {
+    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(() => {
-    console.log(images);
-  }, [images])
+  const typeList = [
+    {
+      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'>
-        <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'
+      <InputPicker
        title='工程类型：'
        placeholder='请选择工程类型'
        value={projectType}
-        onChange={setProjectType}
-        selector={prjTypeSelector}
+        onInput={setProjectType}
+        selector={rPrjTypeSelector}
      />
-      <InputPicker 
-        className='input-picker'
+      <InputPicker
        title='所在道路：'
-        placeholder='请选择您所在的道路'
+        placeholder='请选择或输入您所在的道路'
        value={road}
-        onChange={setRoad}
-        selector={roadSelector}
-      /> */}
+        onInput={setRoad}
+        selector={rRoadSelector}
+      />

-      <View className='input-picker'>
-        <AtInput
+      <View className='road-section'>
+        <View className='title'>所属路段：</View>
+        <Input
          className='input'
-          title='所属路段：'
          type='text'
          placeholder='路段名称'
          border={false}
-        // value={this.state.value}
-        // onChange={this.handleChange.bind(this, 'value')}
+          value={roadSectionStart}
+          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}
-        // onChange={this.handleChange.bind(this, 'value')}
+          value={roadSectionEnd}
+          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
-        count={false}
-        title='具体位置：'
-        placeholder='具体位置：根据定位自动获取，可手动修改'
-      // value={this.state.value}
-      // onChange={this.handleChange.bind(this, 'value')}
-      />
+      <View className='address'>
+        <View className='title'>具体位置：</View>
+        <Input
+          className='input'
+          type='text'
+          placeholder='根据定位自动获取，可手动修改'
+          value={address}
+          onInput={e => handleInput(e, 'address')}
+        />
+      </View>
+
      <AtTextarea
        count={false}
        title='巡查内容：'
        placeholder='请输入巡查内容'
-      // value={this.state.value}
-      // onChange={this.handleChange.bind(this, 'value')}
+        value={content}
+        onChange={(v, e) => handleInput(e, 'content')}
      />
-
      {
-        isPatrol ?
-          <View className='patrol-picker'>
+        reportType === 'patrol' ?
+          <View className='patrol-img'>
            现场图片：
            <AtImagePicker
              className='img-picker'
-              count={3 - images.length}
-              showAddBtn={images.length >= 3 ? false : true}
-              files={images}
-              onChange={onImgPickerChange}
-              onImageClick={onImageClick}
+              count={3 - scenePic.length}
+              showAddBtn={scenePic.length >= 3 ? false : true}
+              files={scenePic}
+              onChange={files => handleImgChange(files, 'scenePic')}
+              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}
-              files={images}
-              onChange={onImgPickerChange}
+              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>
@ -221,9 +276,11 @@ const Index = () => {
            </View>
            <AtImagePicker
              className='img-picker'
-              count={3}
-              files={images}
-              onChange={onImgPickerChange}
+              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>
@ -231,15 +288,15 @@ const Index = () => {
            </View>
            <AtImagePicker
              className='img-picker'
-              count={3}
-              files={images}
-              onChange={onImgPickerChange}
+              count={3 - conserveAfterPic.length}
+              showAddBtn={conserveAfterPic.length >= 3 ? false : true}
+              files={conserveAfterPic}
+              onChange={files => handleImgChange(files, 'conserveAfterPic')}
+              onImageClick={handleImgClick}
            />
          </View>
      }
-
-      <AtButton formType='submit' type='primary' className='sub-btn'>上报</AtButton>
-
+      <AtButton type='primary' className='sub-btn' onClick={report}>上报</AtButton>
    </View>
  )
 }
--- a/weapp/src/packages/patrol/index.scss
+++ b/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;

--- a/weapp/src/packages/patrolView/index.jsx
+++ b/weapp/src/packages/patrolView/index.jsx
@ -35,7 +35,7 @@ function Index() {
    throw new Error(error);
  }
  useEffect(() => {
-    request.get(getReportList(),{}, { hideErrorToast: true, hideLoading: true }).then(res => {
+    request.get(getReportList(), {}, { hideErrorToast: true, hideLoading: true }).then(res => {
      if (res.statusCode == 200) {
        console.log(res);
        setListData(res.data)
--- a/weapp/src/services/api.js
+++ b/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`
--- a/web/client/src/sections/quanju/containers/footer/conserve/action/index.js
+++ b/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' }
+    });
+}
+//获取道路养护统计及列表
--- a/web/client/src/sections/quanju/containers/footer/conserve/index.js
+++ b/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>
    )
 }
--- a/web/client/src/sections/quanju/containers/footer/conserve/right.js
+++ b/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} />
-            <RightCenter roadData={roadData} />
-            <RightBottom roadData={roadData} />
+            <RightTop  highwaysData={highwaysData}/>
+            <RightCenter highwaysData={highwaysData}/>
+            <RightBottom />
        </div>
    )
 }
--- a/web/client/src/sections/quanju/containers/footer/conserve/right/right-center.js
+++ b/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%' }}>
-              <img src='assets/images/quanju/jiancha.png' alt='icon' style={{ width: '36%', height: '100%' }}/>
-              <div style={{ marginLeft: 10 }}>
-                <div style={textStyle}>检查井</div>
-                <div style={numStyle}>89个</div>
+          {
+            lists?.map((item, index) => {
+              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}>{i.name}</div>
+                        <div style={numStyle}>{`${i.count}个`}</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>
          </Module>
      </>
--- a/web/client/src/sections/quanju/containers/footer/conserve/right/right-top.js
+++ b/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%' }}>
-              <img src='assets/images/quanju/biaoxian.png' alt='icon' style={{ width: '36%', height: '100%' }} />
-              <div style={{ marginLeft: 10 }}>
-                <div style={textStyle}>标线</div>
-                <div style={numStyle}>1352km</div>
+          {
+            lists?.map((item, index) => {
+              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}>{i.name}</div>
+                        <div style={numStyle}>{`${i.count}${i.unit}`}</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>
      </Module>
    </>