养护大屏-已绿化里程统计、养护完成情况

web/client/src/sections/quanju/containers/footer/conserve/chart/pie-chart.js

@@ -0,0 +1,110 @@
+import React from 'react'
+import { useEffect, useRef } from 'react';
+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)
+  data?.forEach(d => {
+    name.push(d.name)
+    emptyName.push({
+      name: '',
+      value: d.value
+    })
+  })
+  useEffect(() => {
+    let chartInstance = echarts.init(chartRef.current);
+    const option = {
+      tooltip: {
+        trigger: "item",
+      },
+      legend: {
+        orient: "vertical",
+        itemWidth: 10,
+        itemHeight: 10,
+        right: '30%',
+        top: 'center',
+        align: 'left',
+        data: name,
+        textStyle: {
+          color: "#fff",
+        },
+      },
+      grid: {
+        left: '10%'
+      },
+      // title: [
+      //   {
+      //     text: text,
+      //     top: "58%",
+      //     left: '16%',
+      //     textStyle: {
+      //       color: "#E9F7FF",
+      //       fontSize: 14,
+      //     },
+      //   },
+      //   {
+      //     text: total,
+      //     top: "40%",
+      //     left: '10%',
+      //     textStyle: {
+      //       fontSize: "30",
+      //       color: "#FFFFFF",
+      //       fontFamily: "YouSheBiaoTiHei",
+      //     },
+      //   },
+      // ],
+      series: [
+        {
+          name: "底层背景",
+          type: "pie",
+          hoverAnimation: false,
+          legendHoverLink: false,
+          radius: ["60%", "72%"],
+          center: ['25%', '50%'],
+          color: underColorList,
+          label: {
+            show: false
+          },
+          labelLine: {
+            show: false
+          },
+          tooltip: {
+            show: false,
+          },
+
+          data: emptyName,
+        },
+        {
+          name: "已绿化里程统计",
+          type: "pie",
+          radius: ["67%", "80%"],
+          center: ['25%', '50%'],
+          color: colorList,
+          label: {
+            show: false
+          },
+          data: data,
+        },
+      ],
+    };
+
+    chartInstance.setOption(option);
+    window.addEventListener('resize', () => {
+      if (chartInstance) {
+        chartInstance.resize()
+      }
+    })
+  }, [])
+  return (
+    <div style={{ width: width || '100%', height: height || '100%' }}>
+      <div ref={chartRef} style={{ width: '100%', height: '100%' }}></div>
+    </div>
+
+  )
+}
+export default PieChart

web/client/src/sections/quanju/containers/footer/conserve/left/left-bottom.js

@@ -1,14 +1,39 @@
 import React from 'react'
 import Module from '../../../public/module'
+import PieChart from '../chart/pie-chart';
 
+let data = [
+  { value: 435, name: "县道" },
+  { value: 679, name: "乡道" },
+  { value: 848, name: "村道" },
+]
+let colorList = [
+  "rgba(7,185,254,1)",
+  "rgba(28,96,254,1)",
+  "rgba(4,251,240,1)",
+]
+let underColorList = [
+  "rgba(7,185,254,0.5)",
+  "rgba(28,96,254,0.5)",
+  "rgba(4,251,240,0.5)",
+]
 const LeftBottom = () => {
   const style = { height: "31%", marginTop: "3%" }
   return (
-      <>
-          <Module style={style} title={"已绿化里程统计"}>
-
-          </Module>
-      </>
+    <>
+      <Module style={style} title={"已绿化里程统计"}>
+        {/* <div ref = {chartRef} style={{ width: '100%', height: '100%' }}></div> */}
+        <PieChart
+          data={data}
+          width='100%'
+          height='100%'
+          text='已绿化里程'
+          total={2344.13}
+          colorList={colorList}
+          underColorList={underColorList}
+        />
+      </Module>
+    </>
   )
 }
 export default LeftBottom

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

@@ -34,8 +34,9 @@ const LeftCenter = () => {
             grid: {
                 left: "5%",
                 top: "12%",
-                right: "1%",
+                right: "5%",
                 bottom: "8%",
+                width:'92%',
                 containLabel: true,
             },
 
@@ -102,12 +103,15 @@ const LeftCenter = () => {
                         backgroundColor: {
                             image: 'assets/images/quanju/kelvhua_bdbg.png',
                         },
-                        width: 50,
-                        height: 20,
+                        width: 70,
+                        height: 22,
                         color: '#D8F0FF',
-                        margin:40,
+                        margin:50,
                         verticalAlign: 'middle',
-                        align: 'center'
+                        align: 'center',
+                        textShadowColor:'#1AD0FF',
+                        textShadowBlur:6,
+                        fontSize:14
                         // formatter:(f) =>{console.log('f:',f);}
                     },
                     inverse: true, //排序
@@ -197,9 +201,11 @@ const LeftCenter = () => {
             ],
         };
         chartInstance.setOption(option);
-        window.onresize = function () {
-            chartInstance.resize();
-        }
+        window.addEventListener('resize',() =>{
+            if(chartInstance) {
+              chartInstance.resize()
+            }
+           })
     }, []);
 
     return (
@@ -211,7 +217,7 @@ const LeftCenter = () => {
                         <img src='assets/images/quanju/kelvhua_icon.png' alt='icon' />
                         <span style={{ color: '#C2EEFF', marginLeft: 5 }}>可绿化里程总数</span>
                     </Col>
-                    <Col span={9} style={{ fontSize: 28, fontFamily: 'YouSheBiaoTiHei', color: '#fff' }}>1234.123</Col>
+                    <Col span={9} style={{ fontSize: 24, fontFamily: 'YouSheBiaoTiHei', color: '#fff' }}>1234</Col>
                 </Row>
                 <div ref={chartRef} style={{ height: "14.5vh", width: "96%" }}></div>
 

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

@@ -1,14 +1,42 @@
 import React from 'react'
 import Module from '../../../public/module'
+import PieChart from '../chart/pie-chart';
 
+let data = [
+  { value: 435, name: "道路" },
+  { value: 679, name: "桥梁" },
+  { value: 848, name: "涵洞" },
+  { value: 666, name: "其他" },
+]
+let colorList = [
+  "rgba(7,185,254,1)",
+  "rgba(28,96,254,1)",
+  "rgba(4,251,240,1)",
+  "rgba(255,194,20,1)"
+]
+let underColorList = [
+  "rgba(7,185,254,0.5)",
+  "rgba(28,96,254,0.5)",
+  "rgba(4,251,240,0.5)",
+  "rgba(255,194,20,0.5)"
+]
 const RightBottom = () => {
   const style = { height: "31%", marginTop: "3%" }
   return (
-      <>
-          <Module style={style} title={"养护完成情况"}>
-
-          </Module>
-      </>
+    <>
+      <Module style={style} title={"养护完成情况"}>
+        {/* <div ref = {chartRef} style={{ width: '100%', height: '100%' }}></div> */}
+        <PieChart
+          data={data}
+          width='100%'
+          height='100%'
+          text='养护总数'
+          total={2344.13}
+          colorList={colorList}
+          underColorList={underColorList}
+        />
+      </Module>
+    </>
   )
 }
 export default RightBottom