From b124c2b2c12b24eeba783fd0eeb7db3707dca0df Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=98lijianhao=E2=80=99?= <li.jianhao@free-sun.com.cn>
Date: Sat, 23 Jul 2022 15:37:24 +0800
Subject: [PATCH] =?UTF-8?q?=E5=85=BB=E6=8A=A4=E5=A4=A7=E5=B1=8F-=E5=8F=AF?=
 =?UTF-8?q?=E7=BB=BF=E5=8C=96=E9=87=8C=E7=A8=8B=E7=BB=9F=E8=AE=A1=E8=B0=83?=
 =?UTF-8?q?=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/client/assets/images/quanju/circle2.png   | Bin 0 -> 543 bytes
 .../assets/images/quanju/kelvhua_bdbg.png     | Bin 0 -> 373 bytes
 .../sections/organization/containers/user.js  |   4 +-
 .../containers/footer/conserve/index.js       |   5 +-
 .../footer/conserve/left/left-center.js       | 228 ++++++++++++++++--
 .../footer/conserve/left/left-top.js          |  52 +++-
 .../footer/conserve/right/right-top.js        |   6 +-
 7 files changed, 261 insertions(+), 34 deletions(-)
 create mode 100644 web/client/assets/images/quanju/circle2.png
 create mode 100644 web/client/assets/images/quanju/kelvhua_bdbg.png

diff --git a/web/client/assets/images/quanju/circle2.png b/web/client/assets/images/quanju/circle2.png
new file mode 100644
index 0000000000000000000000000000000000000000..ee5842354ab193062a678bd5a9a910c7a5178965
GIT binary patch
literal 543
zcmV+)0^t3LP)<h;3K|Lk000e1NJLTq000vJ000sQ1^@s6xeVoL00001b5ch_0Itp)
z=>Px$*-1n}R5(wql*>*OQ4of|>buj-Oprk|!H8kdgq;%E7$3leap5CK;tQ|>m+Fca
zFu_M~VOaP8#tjDDktjpNNTR?XnHhTM>Dw{gow*p|LerI0&gPsiRj2;HgujJS0*s~t
z@)SwWbCF*DGnCQ*jRra{ItChopio34c*N9+fdr9c^zjguSCWEs4lp^xB*r4b7{Cl7
zbOJ6AGDQdjXjbVcECm^S#zx1<o(MJu1|b?I2@w&B9u{ZB_}ruiMEweLSYDOE5jJf~
zM7T2=)ujn$ujyQJ3~WE5_bujd{g~aogcb%K6}n6gfEgr(>Fi@6l;}{t<x*R&aAzmv
z<n<{(8X<n&#CbHvl{u5~wKg9<c{C~0LD6NJ0Fk&4Gil;*Oc|l_YKps?KFyaW>?4FE
zBxq<T%qQbaFFMp7AMhSUn+ZD9@DT}f*p9NXDAA?*(B<lb3iC@p*{bU#o3lKx!o3!}
zTij)}5u>eNW?`ev_8X7ylxPvqWlnmM{ns8g0b>MImnWIGz<u$HFI(5Sf7{_%fBYYP
zo-Tal?aD=N1mLY5v5iFwi&JJO8dhkV`7{e0K*7=|P_%ig1=(q6siDyiGv%58XY{_9
h3Rywt_u4-%$KS=+MIiY3BVhml002ovPDHLkV1g27?ScRR

literal 0
HcmV?d00001

diff --git a/web/client/assets/images/quanju/kelvhua_bdbg.png b/web/client/assets/images/quanju/kelvhua_bdbg.png
new file mode 100644
index 0000000000000000000000000000000000000000..6cb1b42cd54fde1d76d391664a65159383a4f5da
GIT binary patch
literal 373
zcmV-*0gC>KP)<h;3K|Lk000e1NJLTq001rk000sQ1^@s6BmwN<00001b5ch_0Itp)
z=>Px$FG)l}R7gu>WPpO)$~Mu-?NzT~{J}^gyO9y(z_PMV-XAQ#F3T&aBzyZuTpx^%
z-nwyx=EHk;=5qXD)9vai{|t6`Zgul4b~X-<l&q49!RTn1o90aG>G=8U$B)UawP}pG
z70oWpEKKv9eFB|Tl{LQ(W{2Otd!2jlmi2r8{bNXE%&Tgy=j7z(Ps}Ln8O)A`xo!T8
z{*v$CzkUQeoQs>AHzBRCZzwo?!L0tGZ(qND9(6dqVrw+S=@rs2dqzWiG{lJv0hFXN
zBrBkTnr5f}3``5{-MyW)H1xj^>G1(kcJ0PRo`XBL?qy{77Y}Y^<yAG!War@IO3o}P
z9}pK2Y3bbQJ)J*)eE&A7tu7s@S^N8vypnRt;BMC5ox|~mRS({*1vhPnSVsZ?(F4So
TA~mu~00000NkvXXu0mjfs&BFQ

literal 0
HcmV?d00001

diff --git a/web/client/src/sections/organization/containers/user.js b/web/client/src/sections/organization/containers/user.js
index 79945530..bf811a2f 100644
--- a/web/client/src/sections/organization/containers/user.js
+++ b/web/client/src/sections/organization/containers/user.js
@@ -181,7 +181,9 @@ const UserManage = (props) => {
     // 删除部门
     const delDepartment = (id) => {
         dispatch(delDep(id)).then(res => {
-            dispatch(getDepMessage())
+            if(res.success){
+                dispatch(getDepMessage())
+            }
         });
     }
     const renderTree = (item, id) => {
diff --git a/web/client/src/sections/quanju/containers/footer/conserve/index.js b/web/client/src/sections/quanju/containers/footer/conserve/index.js
index cfb98746..5e83a6d5 100644
--- a/web/client/src/sections/quanju/containers/footer/conserve/index.js
+++ b/web/client/src/sections/quanju/containers/footer/conserve/index.js
@@ -3,10 +3,11 @@ import Left from './left'
 import Right from './right'
 
 const Conserve = () => {
+
     return (
-        <div style={{ display: 'flex',    width: '100%',height: '100%',justifyContent: 'space-between' }}>
+        <div style={{ display: 'flex', width: '100%', height: '100%', justifyContent: 'space-between' }}>
             <Left />
-            <Right />
+            <Right /> 
         </div>
     )
 }
diff --git a/web/client/src/sections/quanju/containers/footer/conserve/left/left-center.js b/web/client/src/sections/quanju/containers/footer/conserve/left/left-center.js
index 42c7cd48..47bfba29 100644
--- a/web/client/src/sections/quanju/containers/footer/conserve/left/left-center.js
+++ b/web/client/src/sections/quanju/containers/footer/conserve/left/left-center.js
@@ -1,30 +1,222 @@
 import { Col, Row } from 'antd'
 import React from 'react'
-import { useEffect } from 'react'
+import { useEffect, useRef } from 'react'
 import Module from '../../../public/module'
+import * as echarts from 'echarts';
 
 const LeftCenter = () => {
-  const style = { height: "31%", marginTop: "3%" }
+    const style = { height: "31%", marginTop: "3%" }
+    const chartRef = useRef(null);
+    useEffect(() => {
+        let chartInstance = echarts.init(chartRef.current);
+        let colorArray = [
+            {
+                top: "#07B9FE",
+                bottom: "#10274B",
+            },
+            {
+                top: "#1978E5",
+                bottom: " #10274B",
+            },
+            {
+                top: "#1978E5",
+                bottom: "#10274B",
+            },
+        ];
+        const option = {
+            tooltip: {
+                show: true,
+                trigger: "axis",
+                axisPointer: {
+                    type: "none",
+                },
+            },
+            grid: {
+                left: "5%",
+                top: "12%",
+                right: "1%",
+                bottom: "8%",
+                containLabel: true,
+            },
 
-  useEffect(() => {
+            xAxis: {
+                type: "value",
+                show: true,
+                position: "bottom",
+                axisTick: {
+                    show: true,
+                    lineStyle: {
+                        color: "rgba(176,215,255,0.25)",
+                        // type: "dashed",
+                    },
+                },
+                axisLine: {
+                    show: false,
+                    lineStyle: {
+                        color: "rgba(216,240,255,0.8000)",
+                    },
+                },
+                splitLine: {
+                    show: true,
+                    lineStyle: {
+                        color: "rgba(176,215,255,0.25)",
+                        type: "dashed",
+                    },
+                },
+            },
+            yAxis: [
+                {
+                    type: "category",
+                    axisTick: {
+                        show: false,
+                        alignWithLabel: false,
+                        length: 5,
+                    },
+                    splitLine: {
+                        //网格线
+                        show: false,
+                    },
+                    inverse: true, //排序
+                    axisLine: {
+                        show: false,
+                        lineStyle: {
+                            color: "rgba(176,215,255,0.8)",
+                        },
+                    },
+                    zlevel: 100,
+                    data: ["县级可绿化里程", "乡级可绿化里程", "村级可绿化里程"],
+                },
+                {
+                    type: "category",
+                    axisTick: {
+                        show: false,
+                        alignWithLabel: false,
+                        length: 5,
+                    },
+                    splitLine: {
+                        //网格线
+                        show: false,
+                    },
+                    axisLabel: {
+                        show: true,
+                        backgroundColor: {
+                            image: 'assets/images/quanju/kelvhua_bdbg.png',
+                        },
+                        width: 50,
+                        height: 20,
+                        color: '#D8F0FF',
+                        margin:40,
+                        verticalAlign: 'middle',
+                        align: 'center'
+                        // formatter:(f) =>{console.log('f:',f);}
+                    },
+                    inverse: true, //排序
+                    axisLine: {
+                        show: false,
+                        lineStyle: {
+                            color: "rgba(176,215,255,0.8)",
+                        },
 
-  }, [])
+                    },
+                    data: [60, 132, 89],
+                },
+            ],
+            series: [
+                {
+                    name: '背景',
+                    type: "bar",
+                    barWidth: 3,
+                    barGap: "100%",
+                    barCategoryGap: "50%",
+                    color: "#15356E",
+                    data: [150, 150, 150, 150],
+                    tooltip: {
+                        show: false,
+                    },
+                },
+                {
+                    name: "",
+                    type: "bar",
+                    zlevel: 1,
+                    barWidth: 3,
+                    barGap: "-100%",
+                    barCategoryGap: "50%",
+                    data: [60, 132, 89],
+                    label: {
+                        show: true,
+                        position: 'right', // 位置
+                        fontSize: 12,
+                        lineHeight: 13,
+                        distance: -2,
+                        verticalAlign: "middle",
+                        formatter: [
+                            '{a| }',
+                        ].join(''), // 这里是数据展示的时候显示的数据
+                        rich: {
+                            a: {
+                                backgroundColor: {
+                                    image: 'assets/images/quanju/circle2.png'
+                                },
+                                width: 15,
+                                height: 15,
+                                align: 'left',
+                                verticalAlign: "center",
+                            }
+                        }
+                    },
+                    itemStyle: {
+                        normal: {
+                            show: true,
+                            color: function (params) {
+                                return {
+                                    type: "linear",
+                                    colorStops: [
+                                        {
+                                            offset: 0,
+                                            color: colorArray[params.dataIndex].bottom,
+                                        },
+                                        {
+                                            offset: 1,
+                                            color: colorArray[params.dataIndex].top,
+                                        },
 
-  return (
-    <>
-      <Module style={style} title={"可绿化里程统计"}>
 
-        <Row align='middle' style={{ padding: 10 }}>
-          <Col span={15}>
-            <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>
-        </Row>
-        <div>图表</div>
+                                    ],
+                                    // globalCoord: false,
+                                };
+                            },
+                            barBorderRadius: 70,
+                            borderWidth: 0,
+                            borderColor: "#333",
+                        },
+                    },
+                    emphasis: {
+                        disabled: true  //禁止移入柱子改变颜色
+                    }
+                },
+            ],
+        };
+        chartInstance.setOption(option);
+        window.onresize = function () {
+            chartInstance.resize();
+        }
+    }, []);
 
-      </Module>
-    </>
-  )
+    return (
+        <>
+            <Module style={style} title={"可绿化里程统计"}>
+
+                <Row align='middle' style={{ padding: '10px 3% 0px 15px' }}>
+                    <Col span={15}>
+                        <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>
+                </Row>
+                <div ref={chartRef} style={{ height: "14.5vh", width: "96%" }}></div>
+
+            </Module>
+        </>
+    )
 }
 export default LeftCenter
\ No newline at end of file
diff --git a/web/client/src/sections/quanju/containers/footer/conserve/left/left-top.js b/web/client/src/sections/quanju/containers/footer/conserve/left/left-top.js
index 89333c1e..3ab9489d 100644
--- a/web/client/src/sections/quanju/containers/footer/conserve/left/left-top.js
+++ b/web/client/src/sections/quanju/containers/footer/conserve/left/left-top.js
@@ -12,6 +12,9 @@ const LeftTop = () => {
   useEffect(() => {
     let chartInstance = echarts.init(seasonChartRef.current);
     const seasonOption = {
+      tooltip:{
+        show:true
+      },
       title: [
         {
           text: "季节性",
@@ -37,6 +40,13 @@ const LeftTop = () => {
         radius: ["60%", "68%"],
         center: ["50%", "50%"],
       },
+      grid: {
+        left: "5%",
+        top: "12%",
+        right: "1%",
+        bottom: "8%",
+        containLabel: true,
+      },
       angleAxis: {
         max: 100,
         show: false,
@@ -61,7 +71,7 @@ const LeftTop = () => {
           roundCap: true,
           barWidth: 30,
           showBackground: true,
-          data: [40],
+          data: [{value:40,name:'季节性'}],
           coordinateSystem: "polar",
           itemStyle: {
             normal: {
@@ -81,11 +91,21 @@ const LeftTop = () => {
       ],
     };
     chartInstance.setOption(seasonOption);
+    window.addEventListener('resize',() =>{
+      if(chartInstance) {
+        chartInstance.resize()
+      }
+     })
 
   }, [])
   useEffect(() => {
     let chartInstance = echarts.init(frequentlyChartRef.current);
+
     const frequentlyOption = {
+      tooltip:{
+        show:true,
+        trigger: "item",
+      },
       title: [
         {
           text: "经常性",
@@ -111,6 +131,14 @@ const LeftTop = () => {
         radius: ["60%", "68%"],
         center: ["50%", "50%"],
       },
+      grid: {
+        left: "10%",
+        top: "12%",
+        right: "1%",
+        bottom: "8%",
+        width: '70%',
+        containLabel: true,
+      },
       angleAxis: {
         max: 100,
         show: false,
@@ -135,7 +163,7 @@ const LeftTop = () => {
           roundCap: true,
           barWidth: 30,
           showBackground: true,
-          data: [40],
+          data:[{value:40,name:'经常性'}],
           coordinateSystem: "polar",
           itemStyle: {
             normal: {
@@ -157,30 +185,34 @@ const LeftTop = () => {
       ],
     };
     chartInstance.setOption(frequentlyOption);
-
+    window.addEventListener('resize', () => {
+      if (chartInstance) {
+        chartInstance.resize()
+      }
+    })
   }, [])
   const style = { height: "31%", marginTop: "3%" }
   return (
     <>
       <Module style={style} title={"道路养护周期统计"}>
-        <div style={{ position: 'relative' }}>
-          <div style={{ width: '100%', display: 'flex' }}>
-            <div ref={seasonChartRef} style={{ height: "23vh", width: "50%" }}>
+        <div style={{ position: 'relative', width: '100%', height: '100%' }}>
+          <div style={{ width: '100%', height: '100%', display: 'flex', padding: '3%' }}>
+            <div ref={seasonChartRef} style={{ width: "50%" }}>
 
             </div>
 
-            <div ref={frequentlyChartRef} style={{ height: "23vh", width: "50%" }}></div>
+            <div ref={frequentlyChartRef} style={{ width: "50%" }}></div>
           </div>
           <img src='assets/images/quanju/circle.png' style={{
             position: 'absolute',
-            left: '19%',
-            top: '70%',
+            left: '23%',
+            top: '66%',
             zIndex: 999
           }} />
           <img src='assets/images/quanju/circle.png' style={{
             position: 'absolute',
             right: '27%',
-            top: '70%',
+            top: '66%',
             zIndex: 999
           }} />
         </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 18b24f6b..6e1cd0c6 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
@@ -5,12 +5,12 @@ import Module from '../../../public/module'
 const RightTop = () => {
   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: 20, fontFamily: 'YouSheBiaoTiHei', textShadow: '0px 0px 8px #1C60FE', marginTop: 8 }
   return (
     <>
       <Module style={style} title={"道路设施数量统计"}>
         <div style={{ paddingLeft: '8%' }}>
-          <Row style={{ marginTop: 20, justifyContent: 'space-around' }}>
+          <Row style={{ marginTop: "5%", justifyContent: 'space-around' }}>
             <Col style={{ display: 'flex', width: '50%' }}>
               <img src='assets/images/quanju/biaoxian.png' alt='icon' />
               <div style={{ marginLeft: 10 }}>
@@ -26,7 +26,7 @@ const RightTop = () => {
               </span>
             </Col>
           </Row>
-          <Row style={{ marginTop: 20, justifyContent: 'space-around' }}>
+          <Row style={{ justifyContent: 'space-around' }}>
             <Col style={{ display: 'flex', width: '50%' }}>
               <img src='assets/images/quanju/biaozhi.png' alt='icon' />
               <span style={{ marginLeft: 10 }}>