From b905e07c63f23a03d95489cd0546cbe3b737cf23 Mon Sep 17 00:00:00 2001
From: wangyunfei <1224056307@qq,com>
Date: Tue, 14 Oct 2025 14:40:56 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../business_envinformation/background8.svg   |  16 ++
 .../components/PollutionSourceManagement.js   | 245 +++++++++++++-----
 .../components/PollutionSourceManagement.less | 101 +++++++-
 .../DischargePermitManagement.less            |   7 +-
 .../ProtectionFacilityMaintenance.js          |   6 +-
 .../ProtectionFacilityMaintenance.less        |   4 +-
 .../WasteGasPollutionControl.less             |  10 +-
 .../WastewaterFacilityManagement.less         |   4 +-
 8 files changed, 305 insertions(+), 88 deletions(-)
 create mode 100644 src/assets/business_envinformation/background8.svg

diff --git a/src/assets/business_envinformation/background8.svg b/src/assets/business_envinformation/background8.svg
new file mode 100644
index 0000000..2f5450a
--- /dev/null
+++ b/src/assets/business_envinformation/background8.svg
@@ -0,0 +1,16 @@
+<svg width="222" height="116" viewBox="0 0 222 116" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g opacity="0.5">
+<path d="M116.497 104.818C145.54 62.4349 203.729 -23.0411 204.134 -25.8778V-38.0359L128.147 -43.1016L12.141 -19.7991L0.490234 115.457L116.497 104.818Z" fill="url(#paint0_linear_965_17100)" fill-opacity="0.2"/>
+<path d="M172.622 70.1606C188.827 46.5122 221.294 -1.18009 221.52 -2.76287V-9.5466L179.122 -12.373L114.395 0.628852L107.895 76.0964L172.622 70.1606Z" fill="url(#paint1_linear_965_17100)" fill-opacity="0.2"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear_965_17100" x1="176.07" y1="5.96091" x2="88.0431" y2="115.563" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FFA39A"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint1_linear_965_17100" x1="205.861" y1="15.0019" x2="156.746" y2="76.1554" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E04300"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/src/pages/business_envInformation/components/PollutionSourceManagement.js b/src/pages/business_envInformation/components/PollutionSourceManagement.js
index 69c9f23..1aa227f 100644
--- a/src/pages/business_envInformation/components/PollutionSourceManagement.js
+++ b/src/pages/business_envInformation/components/PollutionSourceManagement.js
@@ -9,6 +9,7 @@ const { Option } = Select;
 
 const PollutionSourceManagement = () => {
     const [loading, setLoading] = useState(false);
+    const [chartReady, setChartReady] = useState(false);
     const [tableData, setTableData] = useState({
         list: [],
         pagination: {
@@ -18,53 +19,136 @@ const PollutionSourceManagement = () => {
         }
     });
 
-    // 污染物排放统计图表配置
+    // 确保DOM准备好后再渲染图表
+    useEffect(() => {
+        const timer = setTimeout(() => {
+            setChartReady(true);
+        }, 100);
+        return () => clearTimeout(timer);
+    }, []);
+
+    // 污染物排放统计图表配置 - 闭合环图+进度饼图
     const pollutantEmissionOption = {
         tooltip: {
-            trigger: 'item',
-            formatter: '{a} <br/>{b}: {c} ({d}%)'
+            show: false
         },
-        series: [{
-            name: '污染物排放',
-            type: 'pie',
-            radius: ['40%', '70%'],
-            center: ['50%', '50%'],
-            data: [
-                { value: 62, name: '超标污染物数量', itemStyle: { color: '#ff6b6b' } },
-                { value: 38, name: '正常污染物数量', itemStyle: { color: '#4ecdc4' } }
-            ],
-            emphasis: {
+        series: [
+            // 外层闭合环图
+            {
+                name: '外层环',
+                type: 'pie',
+                radius: ['58%', '80%'],
+                center: ['50%', '50%'],
+                data: [{ value: 100, name: '外层环' }],
                 itemStyle: {
-                    shadowBlur: 10,
-                    shadowOffsetX: 0,
-                    shadowColor: 'rgba(0, 0, 0, 0.5)'
-                }
+                    color: '#F6F1E8',
+                    shadowBlur: 4,
+                    shadowColor: '#FFF5F0',
+                    shadowOffsetY: 4,
+                    borderRadius: 10,
+                    borderColor: 'rgba(255, 227, 208, 0.6)',  // 外边框颜色
+                    borderWidth: 2
+                },
+                label: { show: false },
+                labelLine: { show: false },
+                silent: true
+            },
+            // 内层进度饼图
+            {
+                name: '进度饼图',
+                type: 'pie',
+                radius: ['61%', '77%'],
+                center: ['50%', '50%'],
+                data: [
+                    { 
+                        value: 62, 
+                        name: '超标污染物数量',
+                        itemStyle: { 
+                            color: {
+                                type: 'linear',
+                                x: 0, y: 0, x2: 1, y2: 1,
+                                colorStops: [
+                                    { offset: 0, color: '#FFF4B3' },
+                                    { offset: 0.5, color: '#FF8351' },
+                                    { offset: 1, color: '#FF7125' }
+                                ]
+                            },
+                            borderRadius: 10
+                        }
+                    },
+                    { 
+                        value: 38, 
+                        name: '剩余',
+                        itemStyle: { color: 'transparent' }
+                    }
+                ],
+                label: { show: false },
+                labelLine: { show: false },
+                silent: true
             }
-        }]
+        ]
     };
 
+    // 超标污染物种类统计图表配置 - 闭合环图+进度饼图
     const pollutantTypeOption = {
         tooltip: {
-            trigger: 'item',
-            formatter: '{a} <br/>{b}: {c} ({d}%)'
+            show: false
         },
-        series: [{
-            name: '污染物种类',
-            type: 'pie',
-            radius: ['40%', '70%'],
-            center: ['50%', '50%'],
-            data: [
-                { value: 25, name: '超标污染物种类', itemStyle: { color: '#a8e6cf' } },
-                { value: 75, name: '正常污染物种类', itemStyle: { color: '#ffd3a5' } }
-            ],
-            emphasis: {
+        series: [
+            // 外层闭合环图
+            {
+                name: '外层环',
+                type: 'pie',
+                radius: ['58%', '80%'],
+                center: ['50%', '50%'],
+                data: [{ value: 100, name: '外层环' }],
                 itemStyle: {
-                    shadowBlur: 10,
-                    shadowOffsetX: 0,
-                    shadowColor: 'rgba(0, 0, 0, 0.5)'
-                }
+                    color: '#F2F0FF',
+                    shadowBlur: 4,
+                    shadowColor: '#F2F0FF',
+                    shadowOffsetY: 4,
+                    borderRadius: 10,
+                    borderColor: '#E4E1FB',  // 外边框颜色
+                    borderWidth: 2
+                },
+                label: { show: false },
+                labelLine: { show: false },
+                silent: true
+            },
+            // 内层进度饼图
+            {
+                name: '进度饼图',
+                type: 'pie',
+                radius: ['61%', '77%'],
+                center: ['50%', '50%'],
+                data: [
+                    { 
+                        value: 25, 
+                        name: '超标污染物种类',
+                        itemStyle: { 
+                            color: {
+                                type: 'linear',
+                                x: 0, y: 0, x2: 0, y2: 1,
+                                colorStops: [
+                                    { offset: 0, color: '#B3D6FF' },
+                                    { offset: 0.476, color: '#9E7DFF' },
+                                    { offset: 1, color: '#2549FF' }
+                                ]
+                            },
+                            borderRadius: 10
+                        }
+                    },
+                    { 
+                        value: 75, 
+                        name: '剩余',
+                        itemStyle: { color: 'transparent' }
+                    }
+                ],
+                label: { show: false },
+                labelLine: { show: false },
+                silent: true
             }
-        }]
+        ]
     };
 
     // 超标排放统计图表配置
@@ -97,12 +181,14 @@ const PollutionSourceManagement = () => {
         grid: {
             left: '20%',
             right: '10%',
-            top: '10%',
-            bottom: '10%'
+            top: '0%',
+            bottom: '0%'
         },
         xAxis: {
             type: 'value',
             max: 100,
+            min: 0,
+            interval: 10,
             axisLine: {
                 show: false
             },
@@ -110,7 +196,10 @@ const PollutionSourceManagement = () => {
                 show: false
             },
             axisLabel: {
-                color: '#666'
+                color: '#666',
+                formatter: function(value) {
+                    return value;
+                }
             },
             splitLine: {
                 lineStyle: {
@@ -123,7 +212,10 @@ const PollutionSourceManagement = () => {
             type: 'category',
             data: ['污染物1', '污染物2', '污染物3', '污染物4', '污染物5'],
             axisLine: {
-                show: false
+                show: true,
+                lineStyle: {
+                    color: '#D7D6D6'
+                }
             },
             axisTick: {
                 show: false
@@ -137,10 +229,21 @@ const PollutionSourceManagement = () => {
             type: 'bar',
             data: [45, 66, 32, 28, 38],
             itemStyle: {
-                color: '#ff6b6b',
+                color: {
+                    type: 'linear',
+                    x: 0,
+                    y: 0,
+                    x2: 1,
+                    y2: 0,
+                    colorStops: [{
+                        offset: 0, color: '#FFEBD9'
+                    }, {
+                        offset: 1, color: '#FF0000'
+                    }]
+                },
                 borderRadius: [0, 4, 4, 0]
             },
-            barWidth: '60%'
+            barWidth: '100%'
         }]
     };
 
@@ -321,7 +424,7 @@ const PollutionSourceManagement = () => {
             {/* 顶部统计区域 */}
             <div className={styles.statsSection}>
                 {/* 污染物排放统计 */}
-                <div className={styles.statsCard}>
+                <div className={styles.pollutantStatsCard}>
                     <div className={styles.cardTitle}>
                         <span>污染物排放统计</span>
                         <div className={styles.cardHeader}>
@@ -340,46 +443,60 @@ const PollutionSourceManagement = () => {
                     <div className={styles.chartsContainer}>
                         <div className={styles.pieChartContainer}>
                             {/* <div className={styles.chartTitle}>超标污染物数量</div> */}
-                            <ReactECharts 
-                                option={pollutantEmissionOption} 
-                                style={{ height: '120px', width: '100%' }}
-                                opts={{ renderer: 'canvas' }}
-                            />
-                            <div className={styles.chartValue}>62%</div>
+                            {chartReady && (
+                                <ReactECharts 
+                                    option={pollutantEmissionOption} 
+                                    style={{ height: '100%', width: '100%' }}
+                                    opts={{ renderer: 'canvas' }}
+                                />
+                            )}
+                            <div className={styles.chartCenterContent}>
+                                <div className={styles.chartValue}>62%</div>
+                                <div className={styles.chartLabel}>超标污染物数量</div>
+                            </div>
                         </div>
                         <div className={styles.pieChartContainer}>
                             {/* <div className={styles.chartTitle}>超标污染物种类</div> */}
-                            <ReactECharts 
-                                option={pollutantTypeOption} 
-                                style={{ height: '120px', width: '100%' }}
-                                opts={{ renderer: 'canvas' }}
-                            />
-                            <div className={styles.chartValue}>25%</div>
+                            {chartReady && (
+                                <ReactECharts 
+                                    option={pollutantTypeOption} 
+                                    style={{ height: '100%', width: '100%' }}
+                                    opts={{ renderer: 'canvas' }}
+                                />
+                            )}
+                            <div className={styles.chartCenterContent}>
+                                <div className={styles.chartValue}>25%</div>
+                                <div className={styles.chartLabel}>超标污染物种类</div>
+                            </div>
                         </div>
                     </div>
                 </div>
 
                 {/* 超标排放统计 */}
-                <div className={styles.statsCard}>
-                    <div className={styles.cardTitle}>超标排放统计</div>
+                <div className={styles.exceedanceStatsCard}>
                     <div className={styles.cardHeader}>
-                        <Select defaultValue="今日" className={styles.timeFilter}>
+                    <div className={styles.cardTitle}>超标排放统计</div>
+                    <div className={styles.filterGroup}>
+                        <Select defaultValue="今日" className={styles.exceedanceTimeFilter}>
                             <Option value="今日">今日</Option>
                             <Option value="本周">本周</Option>
                             <Option value="本月">本月</Option>
                         </Select>
-                        <Select defaultValue="所有名录" className={styles.categoryFilter}>
+                        <Select defaultValue="所有名录" className={styles.exceedanceCategoryFilter}>
                             <Option value="所有名录">所有名录</Option>
                             <Option value="大气环境">大气环境</Option>
                             <Option value="水环境">水环境</Option>
                         </Select>
                     </div>
+                </div>
                     <div className={styles.barChartContainer}>
-                        <ReactECharts 
-                            option={exceedanceOption} 
-                            style={{ height: '100px', width: '100%' }}
-                            opts={{ renderer: 'canvas' }}
-                        />
+                        {chartReady && (
+                            <ReactECharts 
+                                option={exceedanceOption} 
+                                style={{ height: '100px', width: '100%' }}
+                                opts={{ renderer: 'canvas' }}
+                            />
+                        )}
                     </div>
                 </div>
 
@@ -466,7 +583,7 @@ const PollutionSourceManagement = () => {
                     onChange={handleTableChange}
                     rowKey="key"
                     size="small"
-                    scroll={{ x: 1200 }}
+                    scroll={{ x: 1200, y: 600 }}
                 />
             </div>
         </div>
diff --git a/src/pages/business_envInformation/components/PollutionSourceManagement.less b/src/pages/business_envInformation/components/PollutionSourceManagement.less
index 0222337..d60a395 100644
--- a/src/pages/business_envInformation/components/PollutionSourceManagement.less
+++ b/src/pages/business_envInformation/components/PollutionSourceManagement.less
@@ -7,14 +7,14 @@
 
     // 顶部统计区域
     .statsSection {
-        display: grid;
-        grid-template-columns: 1fr 1fr 1fr;
+        display: flex;
         gap: 15px;
         margin-bottom: 15px;
         height: 20%;
 
-        // 统计卡片通用样式
-        .statsCard {
+        // 污染物排放统计卡片
+        .pollutantStatsCard {
+            width: 37%;
             background: url('@/assets/business_envinformation/background7.svg'),
              linear-gradient(180deg, #E2FFF5 0%, rgba(255, 255, 255, 0.6) 51.44%),
                         linear-gradient(0deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2));
@@ -36,16 +36,76 @@
             }
         }
 
+        // 超标排放统计卡片
+        .exceedanceStatsCard {
+            width: 40%;
+            background: url('@/assets/business_envinformation/background8.svg'),
+             linear-gradient(180.21deg, rgba(255, 227, 227, 0.58) 0.18%, #FFFFFF 53.1%),
+                        linear-gradient(0deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2));
+            background-repeat: no-repeat;
+            border-radius: 2px;
+            padding: 10px 20px;
+
+            .cardTitle {
+                background: transparent;
+                color: #000000;
+                font-weight: 500;
+                font-size: 16px;
+                padding: 0;
+                margin: 0 0 15px  0;
+                border: none;
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+            }
+
+            .filterGroup {
+                display: flex;
+                gap: 10px;
+            }
+
+            .exceedanceTimeFilter,
+            .exceedanceCategoryFilter {
+                width: 100px;
+                flex-shrink: 0;
+
+                :global(.ant-select-selector) {
+                    border-radius: 2px;
+                    border: 1px solid #FFC3C3;
+                    background: #FFDEDEB2;
+                    transition: all 0.3s ease;
+                }
+            }
+        }
+
         // 卡片头部筛选器
         .cardHeader {
             display: flex;
+            justify-content: space-between;
+            align-items: center;
             gap: 10px;
             margin-bottom: 0;
 
+            .cardTitle {
+                background: transparent;
+                color: #000000;
+                font-weight: 500;
+                font-size: 16px;
+                padding: 0;
+                margin: 0;
+                border: none;
+                flex-shrink: 0;
+            }
+
+            .filterGroup {
+                display: flex;
+                gap: 10px;
+            }
+
             .timeFilter,
             .categoryFilter {
-                flex: 1;
-                min-width: 100px;
+                width: 100px;
+                flex-shrink: 0;
 
                 :global(.ant-select-selector) {
                     border-radius: 2px;
@@ -68,6 +128,8 @@
                 text-align: center;
                 position: relative;
                 background: transparent;
+                height: 200px;
+                min-height: 200px;
 
                 .chartTitle {
                     font-size: 14px;
@@ -77,16 +139,36 @@
                     background: transparent;
                 }
 
-                .chartValue {
+                .chartCenterContent {
                     position: absolute;
                     top: 50%;
                     left: 50%;
                     transform: translate(-50%, -50%);
+                    z-index: 10;
+                    background: transparent;
+    display: flex;
+                    flex-direction: column;
+                    align-items: center;
+    justify-content: center;
+                }
+
+                .chartValue {
                     font-size: 18px;
                     font-weight: bold;
-                    color: #333;
-                    z-index: 10;
+                    color: #FF2F2F;
+                    background: transparent;
+                    margin: 0;
+                    line-height: 1;
+                }
+
+                .chartLabel {
+                    font-size: 12px;
+                    font-weight: 500;
+                    color: #000000;
                     background: transparent;
+                    margin: 0;
+                    margin-top: 2px;
+                    line-height: 1;
                 }
             }
         }
@@ -99,6 +181,7 @@
 
         // 环境分类卡片区域
         .environmentalCategories {
+            flex: 1; // 撑满剩余宽度
         display: flex;
         flex-direction: column;
             gap: 15px;
diff --git a/src/pages/business_envInformation/components/secondary_menu/DischargePermitManagement.less b/src/pages/business_envInformation/components/secondary_menu/DischargePermitManagement.less
index 3a181f1..6bb0c75 100644
--- a/src/pages/business_envInformation/components/secondary_menu/DischargePermitManagement.less
+++ b/src/pages/business_envInformation/components/secondary_menu/DischargePermitManagement.less
@@ -98,13 +98,14 @@
         :global {
             .ant-table-thead > tr > th {
                 font-weight: 400 !important;
-                font-size: 14px !important;
+                font-size: 12px !important;
                 color: #333 !important;
                 text-align: center !important;
+                background-color: #FAFAFA !important;
             }
             
             .ant-table-tbody > tr > td {
-                font-size: 14px;
+                font-size: 12px;
                 color: #333;
                 text-align: center;
             }
@@ -118,7 +119,7 @@
         .attachmentLink {
             color: #1890ff;
             text-decoration: none;
-            font-size: 14px;
+            font-size: 12px;
 
             &:hover {
                 text-decoration: underline;
diff --git a/src/pages/business_envInformation/components/secondary_menu/ProtectionFacilityMaintenance.js b/src/pages/business_envInformation/components/secondary_menu/ProtectionFacilityMaintenance.js
index 7d155ec..a83b5c2 100644
--- a/src/pages/business_envInformation/components/secondary_menu/ProtectionFacilityMaintenance.js
+++ b/src/pages/business_envInformation/components/secondary_menu/ProtectionFacilityMaintenance.js
@@ -358,7 +358,7 @@ const ProtectionFacilityMaintenance = () => {
             title: '事件原因',
             dataIndex: 'eventReason',
             key: 'eventReason',
-            width: 200,
+            width: 180,
         },
         {
             title: '是否报告',
@@ -383,13 +383,13 @@ const ProtectionFacilityMaintenance = () => {
             title: '应对措施',
             dataIndex: 'responseMeasures',
             key: 'responseMeasures',
-            width: 160,
+            width: 150,
             align: 'center',
         },
         {
             title: '操作',
             key: 'action',
-            width: 140,
+            width: 100,
             align: 'center',
             fixed: 'right',
             render: (_, record) => (
diff --git a/src/pages/business_envInformation/components/secondary_menu/ProtectionFacilityMaintenance.less b/src/pages/business_envInformation/components/secondary_menu/ProtectionFacilityMaintenance.less
index ada07d2..38c8a2e 100644
--- a/src/pages/business_envInformation/components/secondary_menu/ProtectionFacilityMaintenance.less
+++ b/src/pages/business_envInformation/components/secondary_menu/ProtectionFacilityMaintenance.less
@@ -179,11 +179,11 @@
 
                 // 固定列阴影效果
                 .ant-table-cell-fix-left {
-                    box-shadow: 0px 0 4px 0px #00000040;
+                    // box-shadow: 0px 0 4px 0px #00000040;
                 }
 
                 .ant-table-cell-fix-right {
-                    box-shadow: 0px 0 4px 0px #00000040;
+                    // box-shadow: 0px 0 4px 0px #00000040;
                 }
 
                 a {
diff --git a/src/pages/business_envInformation/components/secondary_menu/WasteGasPollutionControl.less b/src/pages/business_envInformation/components/secondary_menu/WasteGasPollutionControl.less
index 628285e..7b23dad 100644
--- a/src/pages/business_envInformation/components/secondary_menu/WasteGasPollutionControl.less
+++ b/src/pages/business_envInformation/components/secondary_menu/WasteGasPollutionControl.less
@@ -140,7 +140,7 @@
                 font-size: 12px;
 
                 .ant-table-thead > tr > th {
-                    background-color: #fafafa;
+                    background-color: #FAFAFA;
                     font-weight: 400;
                     color: #000000D9;
                     border-right: none;
@@ -167,23 +167,23 @@
                 // 固定列样式
                 .ant-table-thead > tr > th.ant-table-cell-fix-left,
                 .ant-table-tbody > tr > td.ant-table-cell-fix-left {
-                    background-color: #fafafa;
+                    background-color: #FAFAFA;
                     z-index: 1;
                 }
 
                 .ant-table-thead > tr > th.ant-table-cell-fix-right,
                 .ant-table-tbody > tr > td.ant-table-cell-fix-right {
-                    background-color: #fafafa;
+                    background-color: #FAFAFA;
                     z-index: 1;
                 }
 
                 // 固定列阴影效果
                 .ant-table-cell-fix-left {
-                    box-shadow: 0px 0 4px 0px #00000040;
+                    // box-shadow: 0px 0 4px 0px #00000040;
                 }
 
                 .ant-table-cell-fix-right {
-                    box-shadow: 0px 0 4px 0px #00000040;
+                    // box-shadow: 0px 0 4px 0px #00000040;
                 }
 
                 a {
diff --git a/src/pages/business_envInformation/components/secondary_menu/WastewaterFacilityManagement.less b/src/pages/business_envInformation/components/secondary_menu/WastewaterFacilityManagement.less
index 8e8546c..6d2aaec 100644
--- a/src/pages/business_envInformation/components/secondary_menu/WastewaterFacilityManagement.less
+++ b/src/pages/business_envInformation/components/secondary_menu/WastewaterFacilityManagement.less
@@ -180,11 +180,11 @@
 
                 // 固定列阴影效果
                 .ant-table-cell-fix-left {
-                    box-shadow: 0px 0 4px 0px #00000040;
+                    // box-shadow: 0px 0 4px 0px #00000040;
                 }
 
                 .ant-table-cell-fix-right {
-                    box-shadow: 0px 0 4px 0px #00000040;
+                    // box-shadow: 0px 0 4px 0px #00000040;
                 }
 
                 a {