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

web/client/src/sections/quanju/containers/footer/build/Leftbottom.js

@@ -1,7 +1,164 @@
-import React from 'react'
+
 import './style.less'
-export default function Leftbottom() {
+import { Col, Progress, Row } from 'antd';
+import React, { useEffect, useRef } from 'react';
+// import ReactEcharts from 'echarts-for-react';
+import * as echarts from 'echarts';
+function Leftbottom() {
+  // const {
+  //   safetyData, chartTitle, title, number, leftLegend, rightLegend, legendColor, width, height,
+  // } = props;
+  const chartRef = useRef(null);
+  const safetyData = [
+  {name: '县道', value: 72},
+  {name: '乡道', value: 17},
+  {name: '村道', value: 4},
+  ]
+  const chartTitle = '道路总公里';
+  const title = '基础设施安全监测版块';
+  // const number = 2738;
+  // const leftLegend = ['地灾', '桥梁', '基坑', '边坡', '水库大坝']
+  const rightLegend = ['县道', '乡道', '村道']
+  const legendColor = undefined;
+  const width = undefined
+  const height = undefined
+  var titleNum = 15
+  let safetyOption = {
+    tooltip: {
+      show: true,
+      trigger: 'item',
+      position: 'right',
+      backgroundColor: 'rgba(0,0,0,0.7)',
+      textStyle: {
+        color: '#fff',
+      },
+      formatter: (values) => `${values.seriesName}<br /> ${values.marker} ${values.name}    <b>${values.value}</b>个(${values.percent}%)`,
+    },
+    title: {
+      text:titleNum,//主标题文本
+      left:'center',
+      top:'35%',
+        subtext:chartTitle,//副标题文本
+        textStyle:{
+          fontFamily : "YouSheBiaoTiHei",
+          fontSize: 20,
+          color:'#FFFFFF',
+          // align:'center'
+          },
+          subtextStyle:{
+            fontFamily : "PingFangSC-Medium PingFang SC",
+            fontSize: 12,
+            fontWeight:500,
+            color:'#E9F7FF',
+        }
+    },
+    legend: [
+
+      {
+        orient: 'vertical',
+        textStyle: {
+          color: '#DDEFFF',
+          fontFamily: 'SourceHanSansCN-Regular',
+          fontSize: 12,
+        },
+        right: 0,
+        top: 'center',
+        align: 'left',
+        itemWidth: 10,
+        itemHeight: 10,
+        data: rightLegend || ['地灾', '隧道', '尾矿库', '水库大坝', '智慧消防'],
+        formatter: (name) => {
+          for (let i = 0; i < safetyOption.series[0].data.length; i += 1) {
+            if (name === safetyOption.series[0].data[i].name) {
+              return `${name} \t  ${safetyOption.series[0].data[i].value}`;
+            }
+          }
+        },
+      },
+    ],
+    series: [
+      {
+        name: '道路统计',
+        type: 'pie',
+        radius: ['50%', '65%'],
+        // emphasis: { // 设置高亮时显示标签
+        //   label: {
+        //     show: true
+        //   },
+        //   // scale: true, // 设置高亮时放大图形
+        //   // scaleSize: 20
+        // },
+        label: {
+          show: false,
+        },
+        // selectedMode: 'single',
+        data: safetyData,
+        itemStyle: {
+          normal: {
+            color: (color) => {
+              const colorList = legendColor || [
+                '#98D8CA',
+                '#9494FF',
+                '#2A43FF',
+                '#FFD39F',
+                '#9D5F8B',
+                '#ADDE81',
+                '#F8EBA2',
+                '#5F8EFD',
+                '#2BB4D3',
+                '#1488C8',
+              ];
+              return colorList[color.dataIndex];
+            },
+          },
+        },
+      },
+    ],
+  };
+  
+  let currentIndex = -1; // 当前高亮图形在饼图数据中的下标 
+  useEffect(() => {
+    let myChart = echarts.init(chartRef.current);
+    const highlightPie = () =>{ // 取消所有高亮并高亮当前图形
+      for(var idx in safetyOption.series[0].data)
+        // 遍历饼图数据，取消所有图形的高亮效果
+        myChart.dispatchAction({
+          type: 'downplay',
+          seriesIndex: 0,
+          dataIndex: idx
+        });
+      // 高亮当前图形
+      myChart.dispatchAction({
+        type: 'highlight',
+        seriesIndex: 0,
+        dataIndex: currentIndex
+      });
+      myChart.dispatchAction({
+        type: 'showTip',
+        seriesIndex: 0,
+        dataIndex: currentIndex,
+      });
+    }
+    const selectPie=() =>{ // 高亮效果切换到下一个图形
+      var dataLen = safetyOption.series[0].data.length;
+      currentIndex = (currentIndex + 1) % dataLen;
+      highlightPie();
+    }
+    let changePieInterval = setInterval(selectPie, 1000);
+      
+    myChart.onChartReady = (instance) => {
+      chartRef.current.safetyChart = instance;
+    }
+    myChart.setOption(safetyOption);
+    return ()=>{
+      clearInterval(changePieInterval)
+    }
+}, []);
+
   return (
-    <div className='build-left-bottom'>Leftbottom</div>
+    <div className='build-left-bottom'>
-  )
+      <div ref={chartRef} style={{ width: width || 400, height: height || 200 }} id="ech"></div>
+    </div>
+  );
 }
+export default Leftbottom

web/client/src/sections/quanju/containers/footer/build/Rightbottom.js

@@ -1,7 +1,205 @@
-import React from 'react'
+
 import './style.less'
-export default function Rightbottom() {
+import { Col, Progress, Row } from 'antd';
+import React, { useEffect, useRef } from 'react';
+// import ReactEcharts from 'echarts-for-react';
+import * as echarts from 'echarts';
+function Leftbottom() {
+  // const {
+  //   safetyData, chartTitle, title, number, leftLegend, rightLegend, legendColor, width, height,
+  // } = props;
+  const chartRef = useRef(null);
+  const safetyData = [
+  {name: '一级公路', value: 42},
+  {name: '二级公路', value: 17},
+  {name: '三级公路', value: 17},
+  {name: '四级公路', value: 30},
+  {name: '等外公路', value: 30},
+
+  ]
+  const chartTitle = '道路总公里';
+  const title = '基础设施安全监测版块';
+  // const number = 2738;
+  // const leftLegend = ['地灾', '桥梁', '基坑', '边坡', '水库大坝']
+  const rightLegend = ['一级公路', '二级公路', '三级公路','四级公路','等外公路']
+  const legendColor = undefined;
+  const width = undefined
+  const height = undefined
+  var titleNum = 15
+  let safetyOption = {
+    tooltip: {
+      show: true,
+      trigger: 'item',
+      position: 'right',
+      backgroundColor: 'rgba(0,0,0,0.7)',
+      textStyle: {
+        color: '#fff',
+      },
+      formatter: (values) => `${values.seriesName}<br /> ${values.marker} ${values.name}    <b>${values.value}</b>个(${values.percent}%)`,
+    },
+    title: {
+      text:titleNum,//主标题文本
+      left:'center',
+      top:'35%',
+        subtext:chartTitle,//副标题文本
+        textStyle:{
+          fontFamily : "YouSheBiaoTiHei",
+          fontSize: 20,
+          color:'#FFFFFF',
+          // align:'center'
+          },
+          subtextStyle:{
+            fontFamily : "PingFangSC-Medium PingFang SC",
+            fontSize: 12,
+            fontWeight:500,
+            color:'#E9F7FF',
+        }
+    },
+    // graphic: {
+    //   elements: [
+    //     {
+    //       type: 'text',
+    //       style: {
+    //         text: chartTitle || '安全\n监测',
+    //         align: 'center',
+    //         fill: '#fff',
+    //         z: -999,
+    //         zlevel: -999,
+    //         font: '20px "YouSheBiaoTiHei", sans-serif',
+    //       },
+    //       left: 'center',
+    //       top: 'center',
+    //       position: [100, 100],
+    //     },
+    //   ],
+    // },
+    legend: [
+
+      // {
+      //   orient: 'vertical',
+      //   left: 'left',
+      //   top: 'center',
+      //   textStyle: {
+      //     color: '#DDEFFF',
+      //     fontFamily: 'SourceHanSansCN-Regular',
+      //     fontSize: 12,
+      //   },
+      //   itemWidth: 10,
+      //   itemHeight: 10,
+      //   data: leftLegend || ['基坑', '桥梁', '地铁', '边坡', '建筑物'],
+      //   formatter: (name) => {
+      //     for (let i = 0; i < safetyOption.series[0].data.length; i += 1) {
+      //       if (name === safetyOption.series[0].data[i].name) {
+      //         return `${name} \t  ${safetyOption.series[0].data[i].value}`;
+      //       }
+      //     }
+      //   },
+      // },
+      {
+        orient: 'vertical',
+        textStyle: {
+          color: '#DDEFFF',
+          fontFamily: 'SourceHanSansCN-Regular',
+          fontSize: 12,
+        },
+        right: 0,
+        top: 'center',
+        align: 'left',
+        itemWidth: 10,
+        itemHeight: 10,
+        data: rightLegend || ['地灾', '隧道', '尾矿库', '水库大坝', '智慧消防'],
+        formatter: (name) => {
+          for (let i = 0; i < safetyOption.series[0].data.length; i += 1) {
+            if (name === safetyOption.series[0].data[i].name) {
+              return `${name} \t  ${safetyOption.series[0].data[i].value}`;
+            }
+          }
+        },
+      },
+    ],
+    series: [
+      {
+        name: '道路统计',
+        type: 'pie',
+        radius: ['50%', '65%'],
+        // emphasis: { // 设置高亮时显示标签
+        //   label: {
+        //     show: true
+        //   },
+        //   // scale: true, // 设置高亮时放大图形
+        //   // scaleSize: 20
+        // },
+        label: {
+          show: false,
+        },
+        // selectedMode: 'single',
+        data: safetyData,
+        itemStyle: {
+          normal: {
+            color: (color) => {
+              const colorList = legendColor || [
+                '#98D8CA',
+                '#9494FF',
+                '#2A43FF',
+                '#FFD39F',
+                '#9D5F8B',
+                '#ADDE81',
+                '#F8EBA2',
+                '#5F8EFD',
+                '#2BB4D3',
+                '#1488C8',
+              ];
+              return colorList[color.dataIndex];
+            },
+          },
+        },
+      },
+    ],
+  };
+  
+  let currentIndex = -1; // 当前高亮图形在饼图数据中的下标 
+  useEffect(() => {
+    let myChart = echarts.init(chartRef.current);
+    const highlightPie = () =>{ // 取消所有高亮并高亮当前图形
+      for(var idx in safetyOption.series[0].data)
+        // 遍历饼图数据，取消所有图形的高亮效果
+        myChart.dispatchAction({
+          type: 'downplay',
+          seriesIndex: 0,
+          dataIndex: idx
+        });
+      // 高亮当前图形
+      myChart.dispatchAction({
+        type: 'highlight',
+        seriesIndex: 0,
+        dataIndex: currentIndex
+      });
+      myChart.dispatchAction({
+        type: 'showTip',
+        seriesIndex: 0,
+        dataIndex: currentIndex,
+      });
+    }
+    const selectPie=() =>{ // 高亮效果切换到下一个图形
+      var dataLen = safetyOption.series[0].data.length;
+      currentIndex = (currentIndex + 1) % dataLen;
+      highlightPie();
+    }
+    let changePieInterval = setInterval(selectPie, 1000);
+      
+    myChart.onChartReady = (instance) => {
+      chartRef.current.safetyChart = instance;
+    }
+    myChart.setOption(safetyOption);
+    return ()=>{
+      clearInterval(changePieInterval)
+    }
+}, []);
+
   return (
-    <div className='build-right-bottom'>Rightbottom</div>
+    <div className='build-right-bottom'>
-  )
+      <div ref={chartRef} style={{ width: width || 400, height: height || 200 }} id="ech"></div>
+    </div>
+  );
 }
+export default Leftbottom

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

@@ -1,12 +1,13 @@
 import React from 'react'
 // import LeftTop from './Lefttop'
 // import LeftCenter from './Leftcenter'
-// import LeftBottom from './Leftbottom'
+import LeftBottom from './Leftbottom'
 // import RightTop from './Righttop'
 // import Rightcenter from './Rightcenter'
 // import Rightbottom from './Rightbottom'
 import { Carousel } from 'antd'
 import Module from '../../public/module'
+import RightBottom from './Rightbottom'
 import './style.less'
 const Build = () => {
     return (
@@ -98,7 +99,9 @@ const Build = () => {
             </Module>
             <Module title={"道路统计"} style={{ width: "100%",
             height:" 30%",marginTop:'3%'
-            }}></Module>
+            }}>
+                <LeftBottom/>
+            </Module>
            
         </div>
         <div className='bgbuild-right'>
@@ -115,7 +118,9 @@ const Build = () => {
             }}></Module>
         <Module title={"公路等级统计"} style={{ width: "100%",
             height:" 30%",marginTop:'3%'
-            }}></Module>
+            }}>
+                <RightBottom/>
+            </Module>
         </div>
         </div>
     )

web/client/src/sections/quanju/containers/footer/build/style.less

@@ -155,8 +155,10 @@
         }
         .build-left-bottom{
             width: 100%;
-            height: 30%;
+           height: 100%;
-            background-color: rgba(0,33,98,0.8);
+            display: flex;
+            justify-content: center;
+            align-items: center;
         
         }
     }
@@ -199,8 +201,10 @@
         }
         .build-right-bottom{
             width: 100%;
-            height: 30%;
+            height: 100%;
-            background-color: pink;
+            display: flex;
+            justify-content: center;
+            align-items: center;
         }
     }
 }

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

@@ -0,0 +1,15 @@
+import React from 'react'
+import LeftBottom from './left/left-bottom'
+import LeftCenter from './left/left-center'
+import LeftTop from './left/left-top'
+
+const Left = () => {
+    return (
+        <div style={{ display: 'flex',flexDirection: 'column', width: "23%", height: "100%", marginLeft: "1%" }}>
+            <LeftTop />
+            <LeftCenter />
+            <LeftBottom />
+        </div>
+    )
+}
+export default Left

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

@@ -0,0 +1,14 @@
+import React from 'react'
+import Module from '../../../public/module'
+
+const LeftBottom = () => {
+  const style = { height: "30%", marginTop: "5%" }
+  return (
+      <>
+          <Module style={style} title={"已绿化里程统计"}>
+
+          </Module>
+      </>
+  )
+}
+export default LeftBottom

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

@@ -0,0 +1,14 @@
+import React from 'react'
+import Module from '../../../public/module'
+
+const LeftCenter = () => {
+  const style = { height: "30%", marginTop: "5%" }
+  return (
+      <>
+          <Module style={style} title={"可绿化里程统计"}>
+
+          </Module>
+      </>
+  )
+}
+export default LeftCenter

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

@@ -0,0 +1,14 @@
+import React from 'react'
+import Module from '../../../public/module'
+
+const LeftTop = () => {
+  const style = { height: "30%", marginTop: "5%" }
+  return (
+      <>
+          <Module style={style} title={"道路养护周期统计"}>
+        
+          </Module>
+      </>
+  )
+}
+export default LeftTop

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

@@ -0,0 +1,15 @@
+import React from 'react'
+import RightBottom from './right/right-bottom'
+import RightCenter from './right/right-center'
+import RightTop from './right/right-top'
+
+const Right = () => {
+    return (
+        <div style={{ display: 'flex',flexDirection: 'column',  width: "23%", height: "100%", marginLeft: "1%", }}>
+            <RightTop />
+            <RightCenter />
+            <RightBottom />
+        </div>
+    )
+}
+export default Right

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

@@ -0,0 +1,14 @@
+import React from 'react'
+import Module from '../../../public/module'
+
+const RightBottom = () => {
+  const style = { height: "30%", marginTop: "5%" }
+  return (
+      <>
+          <Module style={style} title={"养护完成情况"}>
+
+          </Module>
+      </>
+  )
+}
+export default RightBottom

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

@@ -0,0 +1,14 @@
+import React from 'react'
+import Module from '../../../public/module'
+
+const RightCenter = () => {
+  const style = { height: "30%", marginTop: "5%" }
+  return (
+      <>
+          <Module style={style} title={"各类附属设施数量统计"}>
+
+          </Module>
+      </>
+  )
+}
+export default RightCenter

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

@@ -0,0 +1,14 @@
+import React from 'react'
+import Module from '../../../public/module'
+
+const RightTop= () => {
+  const style = { height: "30%", marginTop: "5%" }
+  return (
+      <>
+          <Module style={style} title={"道路设施数量统计"}>
+
+          </Module>
+      </>
+  )
+}
+export default RightTop