From 9851ae4cd89e5ac997d659594cf974be71576c0f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=98lijianhao=E2=80=99?= <li.jianhao@free-sun.com.cn>
Date: Mon, 25 Jul 2022 19:31:42 +0800
Subject: [PATCH] =?UTF-8?q?=E5=9B=BE=E8=A1=A8=E8=B0=83=E6=95=B4=EF=BC=8C?=
 =?UTF-8?q?=E6=95=B0=E6=8D=AE=E6=8E=A5=E5=85=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../footer/conserve/chart/pie-chart.js        | 76 +++++++++++++++++--
 .../footer/conserve/left/left-bottom.js       | 19 ++++-
 .../footer/conserve/right/right-center.js     | 10 +--
 .../footer/conserve/right/right-top.js        | 12 +--
 4 files changed, 95 insertions(+), 22 deletions(-)

diff --git a/web/client/src/sections/quanju/containers/footer/conserve/chart/pie-chart.js b/web/client/src/sections/quanju/containers/footer/conserve/chart/pie-chart.js
index f3f26f3e..2f3348a7 100644
--- a/web/client/src/sections/quanju/containers/footer/conserve/chart/pie-chart.js
+++ b/web/client/src/sections/quanju/containers/footer/conserve/chart/pie-chart.js
@@ -5,7 +5,6 @@ import * as echarts from 'echarts';
 const PieChart = (props) => {
 
   const { width, height, data, colorList, underColorList, total, text } = props
-
   const chartRef = useRef(null);
   let name = [], emptyName = []
   // const name = data?.map(d)
@@ -26,13 +25,34 @@ const PieChart = (props) => {
         orient: "vertical",
         itemWidth: 10,
         itemHeight: 10,
-        right: '30%',
+        // right: '30%',
+        left: '50%',
         top: 'center',
         align: 'left',
         data: name,
-        textStyle: {
-          color: "#fff",
+        formatter: (name) => {
+          for (let i = 0; i < option.series[1].data.length; i += 1) {
+            if (name === option.series[1].data[i].name) {
+              let arr = [`{a|${name}}`, `{b|${option.series[1].data[i].value}}`]
+              return arr.join('\t');
+            }
+          }
         },
+        textStyle: {
+          rich: {
+            a: {
+              color: '#E9F7FF',
+              fontSize: 14,
+              padding:[0,10]
+            },
+            b: {
+              fontSize: 16,
+              fontFamily: 'YouSheBiaoTiHei',
+              color: '#fff',
+              padding:[0,0,0,15]
+            },
+          }
+        }
       },
       grid: {
         left: '10%'
@@ -58,13 +78,55 @@ const PieChart = (props) => {
       //     },
       //   },
       // ],
+      graphic: {
+        elements: [
+          {
+            type: 'image',
+            style: {
+              image: 'assets/images/quanju/chart-circle.png',
+              width: 120,
+              height: 120,
+              align: 'center',
+              // x:90,
+              // y:100
+            },
+            left: '14%',
+            top: 'center',
+
+            bounding: 'raw'
+            // position: ['40%', '40%'],
+          },
+          {
+            type: 'text',
+            style: {
+              text: text,
+              align: 'center',
+              fill: '#fff',
+              font: '12px "YouSheBiaoTiHei", sans-serif',
+            },
+            left: '17%',
+            top: '55%',
+          },
+          {
+            type: 'text',
+            style: {
+              text: total,
+              align: 'center',
+              fill: '#fff',
+              font: '20px "YouSheBiaoTiHei", sans-serif',
+            },
+            left: '18.5%',
+            top: 'center',
+          },
+        ],
+      },
       series: [
         {
           name: "底层背景",
           type: "pie",
           hoverAnimation: false,
           legendHoverLink: false,
-          radius: ["60%", "72%"],
+          radius: ["58%", "67%"],
           center: ['25%', '50%'],
           color: underColorList,
           label: {
@@ -82,7 +144,7 @@ const PieChart = (props) => {
         {
           name: "已绿化里程统计",
           type: "pie",
-          radius: ["67%", "80%"],
+          radius: ["65%", "75%"],
           center: ['25%', '50%'],
           color: colorList,
           label: {
@@ -99,7 +161,7 @@ const PieChart = (props) => {
         chartInstance.resize()
       }
     })
-  }, [])
+  }, [data])
   return (
     <div style={{ width: width || '100%', height: height || '100%' }}>
       <div ref={chartRef} style={{ width: '100%', height: '100%' }}></div>
diff --git a/web/client/src/sections/quanju/containers/footer/conserve/left/left-bottom.js b/web/client/src/sections/quanju/containers/footer/conserve/left/left-bottom.js
index 82097322..5036f587 100644
--- a/web/client/src/sections/quanju/containers/footer/conserve/left/left-bottom.js
+++ b/web/client/src/sections/quanju/containers/footer/conserve/left/left-bottom.js
@@ -17,18 +17,29 @@ let underColorList = [
   "rgba(28,96,254,0.5)",
   "rgba(4,251,240,0.5)",
 ]
-const LeftBottom = () => {
+const LeftBottom = (props) => {
   const style = { height: "31%", marginTop: "3%" }
+  const { roadData } = props
+  const list = roadData?.greenMileage || {}
+  let grade = ['县道', '乡道', '村道']
+  let totalData = null
+  const value = Object.values(list)?.map((s, index) => {
+    totalData += s.isGreen
+    return {
+      name: grade[index],
+      value: s.isGreen.toFixed(3)
+    }
+  })
+
   return (
     <>
       <Module style={style} title={"已绿化里程统计"}>
-        {/* <div ref = {chartRef} style={{ width: '100%', height: '100%' }}></div> */}
         <PieChart
-          data={data}
+          data={value}
           width='100%'
           height='100%'
           text='已绿化里程'
-          total={2344.13}
+          total={totalData?.toFixed(3) || 0}
           colorList={colorList}
           underColorList={underColorList}
         />
diff --git 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
index 6689f500..053bdb42 100644
--- 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
@@ -5,7 +5,7 @@ import { Col, Row } from 'antd'
 const RightCenter = () => {
   const style = { height: "31%", marginTop: "3%" }
   const textStyle = { fontSize: 14, color: '#E9F7FF' }
-  const numStyle = { color: '#fff', fontSize: 24, fontFamily: 'YouSheBiaoTiHei', textShadow: '0px 0px 8px #1C60FE', marginTop: 8 }
+  const numStyle = { color: '#fff', fontSize: 21, fontFamily: 'YouSheBiaoTiHei', textShadow: '0px 0px 8px #1C60FE', marginTop: 8 }
 
   return (
       <>
@@ -13,14 +13,14 @@ const RightCenter = () => {
           <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' />
+              <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>
               </div>
             </Col>
             <Col style={{ display: 'flex', width: '50%' }}>
-              <img src='assets/images/quanju/yushui.png' alt='icon' />
+              <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>
@@ -29,14 +29,14 @@ const RightCenter = () => {
           </Row>
           <Row style={{ marginTop: 20, justifyContent: 'space-around' }}>
             <Col style={{ display: 'flex', width: '50%' }}>
-              <img src='assets/images/quanju/lupai.png' alt='icon' />
+              <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' />
+              <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>
diff --git 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
index 6e1cd0c6..c2d68d16 100644
--- 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
@@ -2,24 +2,24 @@ import { Col, Row } from 'antd'
 import React from 'react'
 import Module from '../../../public/module'
 
-const RightTop = () => {
+const RightTop = (props) => {
   const style = { height: "31%", marginTop: "3%" }
   const textStyle = { fontSize: 14, color: '#E9F7FF' }
-  const numStyle = { color: '#fff', fontSize: 20, fontFamily: 'YouSheBiaoTiHei', textShadow: '0px 0px 8px #1C60FE', marginTop: 8 }
+  const numStyle = { color: '#fff', fontSize: 21, fontFamily: 'YouSheBiaoTiHei', textShadow: '0px 0px 8px #1C60FE', marginTop: 8 }
   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' />
+              <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>
               </div>
             </Col>
             <Col style={{ display: 'flex', width: '50%' }}>
-              <img src='assets/images/quanju/renxing.png' alt='icon' />
+              <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>
@@ -28,14 +28,14 @@ const RightTop = () => {
           </Row>
           <Row style={{ justifyContent: 'space-around' }}>
             <Col style={{ display: 'flex', width: '50%' }}>
-              <img src='assets/images/quanju/biaozhi.png' alt='icon' />
+              <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' />
+              <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>