{/* 块1 */}
-
+
{/* 块2 */}
-
-
- 设备总数
- 1280
-
- 
+
环保总人数
+ 258
+ 截止到 2025-09-11 07:35
+
{/* 块3 */}
-
-
-
-
-
- 正常运行
- 480
-
- 
+
环保总人数
+ 258
+ 截止到 2025-09-11 07:35
+
-
{/* 块4 */}
-
- 需要维护
347
- 
-
+
-
-
-
- 故障设备
- 289
-
- 
+
环保总人数
+ 258
+ 截止到 2025-09-11 07:35
-
-
-
使用次数: ${params[0].value}`; - } - } - }; - - barChart.setOption(barOption); - - // 响应式调整 - const handleBarResize = () => { - if (barChart && !barChart.isDisposed()) { - barChart.resize(); - } - }; - - window.addEventListener('resize', handleBarResize); - - return () => { - window.removeEventListener('resize', handleBarResize); - if (barChart && !barChart.isDisposed()) { - barChart.dispose(); - } - }; - } - }, []); - - // 维护费用趋势折线图初始化 - useEffect(() => { - if (faultPieChartRef.current) { - const faultPieChart = echarts.init(faultPieChartRef.current); - - const faultPieOption = { - - legend: { - show: true, - top: '5%', - left: 'center', - itemWidth: 20, - itemHeight: 8, - textStyle: { - color: '#333', - fontSize: 12 - } - }, - grid: { - left: '5%', - right: '5%', - bottom: '10%', - top: '20%', - containLabel: true - }, - xAxis: { - type: 'category', - data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'], - axisLine: { - lineStyle: { - color: '#E5E5E5' - } - }, - axisTick: { - show: false - }, - axisLabel: { - color: '#666', - fontSize: 12, - interval: 0 - } - }, - yAxis: { - type: 'value', - min: 20000, - max: 30000, - interval: 2000, - axisLine: { - show: false - }, - axisTick: { - show: false - }, - axisLabel: { - color: '#666', - fontSize: 12, - formatter: '¥{value}' - }, - splitLine: { - lineStyle: { - color: '#00001A26', - type: 'dashed' - } - } - }, - series: [{ - name: '费用', - type: 'line', - data: [29000, 21000, 27500, 21900, 26000, 25000, 27000, 24000, 22300, 28000, 29000, 27000], - smooth: false, - symbol: 'circle', - symbolSize: 6, - lineStyle: { - color: '#1269FF', - width: 1 - }, - itemStyle: { - color: '#FFFFFF', - borderColor: '#1269FF', - borderWidth: 1 - }, - areaStyle: { - color: { - type: 'linear', - x: 0, - y: 0, - x2: 0, - y2: 1, - colorStops: [{ - offset: 0, - color: 'rgba(18, 105, 255, 0.3)' - }, { - offset: 1, - color: 'rgba(18, 105, 255, 0.05)' - }] - } - } - }] - }; - - faultPieChart.setOption(faultPieOption); - - // 响应式调整 - const handleFaultPieResize = () => { - if (faultPieChart && !faultPieChart.isDisposed()) { - faultPieChart.resize(); - } - }; - - window.addEventListener('resize', handleFaultPieResize); - - return () => { - window.removeEventListener('resize', handleFaultPieResize); - if (faultPieChart && !faultPieChart.isDisposed()) { - faultPieChart.dispose(); - } - }; - } - }, []); - - useEffect(() => { - if (chartRef.current) { - const chart = echarts.init(chartRef.current); - - // 强制初始化时调整大小 - setTimeout(() => { - if (chart && !chart.isDisposed()) { - chart.resize(); - } - }, 100); - - const option = { - color: ['#3C7EFF', '#FF8800', '#FFC403', '#31BCFF'], - legend: { - orient: 'vertical', - right: '2%', - top: 'middle', - itemWidth: 14, - itemHeight: 5, - textStyle: { - fontSize: 10, - color: '#666' - } - }, - tooltip: { - trigger: 'item', - formatter: '{b}
{d}%' - }, - series: [ - { - name: '设备类型占比', - type: 'pie', - radius: '70%', - center: ['40%', '55%'], - avoidLabelOverlap: false, - itemStyle: { - borderRadius: 0, - borderColor: '#fff', - borderWidth: 1 - }, - label: { - show: false, - position: 'center' - }, - emphasis: { - label: { - show: false - } - }, - labelLine: { - show: false - }, - data: [ - { value: 25, name: '灭火器' }, - { value: 30, name: '消防栓' }, - { value: 20, name: '报警器' }, - { value: 25, name: '烟雾探测器' } - ] - } - ] - }; - - chart.setOption(option); - - // 响应式调整 - 使用多种方式监听容器尺寸变化 - let resizeTimer = null; - const handleResize = () => { - // 防抖处理，避免频繁调用resize - if (resizeTimer) { - clearTimeout(resizeTimer); - } - resizeTimer = setTimeout(() => { - if (chart && !chart.isDisposed()) { - chart.resize(); - } - }, 50); // 减少延迟时间 - }; - - // 监听窗口大小变化 - window.addEventListener('resize', handleResize); - - // 监听容器尺寸变化（解决菜单栏伸缩时的自适应问题） - let resizeObserver = null; - if (window.ResizeObserver) { - resizeObserver = new ResizeObserver((entries) => { - for (let entry of entries) { - // 使用requestAnimationFrame确保在下一帧执行 - requestAnimationFrame(() => { - handleResize(); - }); - } - }); - resizeObserver.observe(chartRef.current); - } - - // 额外监听父容器的尺寸变化 - const parentContainer = chartRef.current?.parentElement; - let parentObserver = null; - if (parentContainer && window.ResizeObserver) { - parentObserver = new ResizeObserver((entries) => { - for (let entry of entries) { - requestAnimationFrame(() => { - handleResize(); - }); - } - }); - parentObserver.observe(parentContainer); - } - - // 使用MutationObserver监听DOM结构变化（菜单展开收起时） - const mutationObserver = new MutationObserver((mutations) => { - mutations.forEach((mutation) => { - if (mutation.type === 'attributes' && - (mutation.attributeName === 'class' || mutation.attributeName === 'style')) { - // 延迟执行，确保DOM更新完成 - setTimeout(() => { - handleResize(); - }, 200); - } - }); - }); - - // 监听整个页面的class和style变化 - mutationObserver.observe(document.body, { - attributes: true, - attributeFilter: ['class', 'style'], - subtree: true - }); - - return () => { - window.removeEventListener('resize', handleResize); - if (resizeObserver) { - resizeObserver.disconnect(); - } - if (parentObserver) { - parentObserver.disconnect(); - } - if (mutationObserver) { - mutationObserver.disconnect(); - } - if (resizeTimer) { - clearTimeout(resizeTimer); - } - if (chart && !chart.isDisposed()) { - chart.dispose(); - } - }; - } - }, []); - - // 表格列定义 - const columns = [ - { - title: '编号', - dataIndex: 'id', - key: 'id', - width: 60, - render: (text, record, index) => { - const page = pagination.current || 1; - const pageSize = pagination.pageSize || 8; - const number = (page - 1) * pageSize + index + 1; - return `0${number}`.slice(-2); - } - }, - { - title: '设备编号', - dataIndex: 'deviceId', - key: 'deviceId', - width: 140, - }, - { - title: '设备名称', - dataIndex: 'deviceName', - key: 'deviceName', - width: 110, - }, - { - title: '类型', - dataIndex: 'modelSpec', - key: 'modelSpec', - width: 120, - }, - { - title: '安装位置', - dataIndex: 'installLocation', - key: 'installLocation', - width: 100, - }, - { - title: '状态', - dataIndex: 'status', - key: 'status', - width: 100, - render: (text) => { - const statusMap = { - '报废': { color: '#FF3E48', bg: '#FFE0E2' }, - '待维修': { color: '#FF8800', bg: '#FFF3E9' }, - '已使用': { color: '#00AAFA', bg: '#DAF3FF' }, - '正常': { color: '#44BB5F', bg: '#D8F7DE' } - }; - const status = statusMap[text] || { color: '#333', bg: '#F5F5F5' }; - return ( - - {text} - - ); - } - }, - { - title: '最后维护时间', - dataIndex: 'lastMaintenance', - key: 'lastMaintenance', - width: 150, - }, - { - title: '操作', - key: 'action', - width: 140, - render: (_, record) => ( -
-
- );
+ );
};
-export default EnvironmentalPersonnelManagement;
\ No newline at end of file
+export default EnvironmentalPersonnelManagement;
diff --git a/src/pages/business_envInformation/module/EnvironmentalPersonnelManagement.less b/src/pages/business_envInformation/module/EnvironmentalPersonnelManagement.less
index db5b47e..828546a 100644
--- a/src/pages/business_envInformation/module/EnvironmentalPersonnelManagement.less
+++ b/src/pages/business_envInformation/module/EnvironmentalPersonnelManagement.less
@@ -7,7 +7,7 @@
// 第一个div - 高度20%
.RcontainerTop {
- height: 16%;
+ height: 18%;
// background-color: #fff;
border-radius: 4px;
display: flex;
@@ -29,12 +29,72 @@
flex: 1;
height: 100%;
display: flex;
- background: linear-gradient(170.5deg, #F5F7FF 6.87%, #FFFFFF 47.65%);
+ // background: linear-gradient(170.5deg, #F5F7FF 6.87%, #FFFFFF 47.65%);
border-radius: 4px;
- border: 2px solid #FFFFFF;
+ // border: 2px solid #FFFFFF;
+
+ // 块1 - 蓝色渐变 + SVG背景
+ &.block1 {
+ background:
+ url('@/assets/business_envinformation/background1.svg'),
+ linear-gradient(180deg, #DBEBFF 0%, #DBEBFF 12.5%, rgba(255, 255, 255, 0.700824) 56%, rgba(255, 255, 255, 0.01) 100%);
+ background-size: 100% 100%;
+ background-repeat: no-repeat;
+ background-position: center;
+ }
+
+ // 块2 - 黄色渐变
+ &.block2 {
+ background:
+ url('@/assets/business_envinformation/background2.svg'),
+ linear-gradient(180deg, #FFFEDB 0%, #F5FFDB 19.23%, #FFFFFF 55.77%, #FFFFFF 100%);
+ background-size: 100% 100%;
+ background-repeat: no-repeat;
+ background-position: center;
+ }
+
+ // 块3 - 绿色渐变
+ &.block3 {
+ background:
+ url('@/assets/business_envinformation/background3.svg'),
+ linear-gradient(180deg, #8CFFCD 0%, #C0FFE4 12.5%, #FFFFFF 56%, #FFFFFF 100%);
+ background-size: 100% 100%;
+ background-repeat: no-repeat;
+ background-position: center;
+ }
+
+ // 块4 - 青色渐变
+ &.block4 {
+ background:
+ url('@/assets/business_envinformation/background4.svg'),
+ linear-gradient(180deg, #C5FFFC 0%, #C0FFFC 12.5%, #FFFFFF 56%, #FFFFFF 100%);
+ background-size: 100% 100%;
+ background-repeat: no-repeat;
+ background-position: center;
+ }
+
+ // 块5 - 红色渐变
+ &.block5 {
+ background:
+ url('@/assets/business_envinformation/background4.svg'),
+ linear-gradient(180deg, #FFD2D2 0%, #FFD9D9 12.5%, #FFFFFF 56%, #FFFFFF 100%);
+ background-size: 100% 100%;
+ background-repeat: no-repeat;
+ background-position: center;
+ }
+
+ // 块6 - 紫色渐变
+ &.block6 {
+ background:
+ url('@/assets/business_envinformation/background6.svg'),
+ linear-gradient(180deg, #F2D7FF 0%, #F4DDFF 12.5%, #FFFFFF 56%, #FFFFFF 100%);
+ background-size: 100% 100%;
+ background-repeat: no-repeat;
+ background-position: center;
+ }
.blockLeft {
- width: 60%;
+ width: 100%;
height: 100%;
display: flex;
flex-direction: column;
@@ -59,6 +119,14 @@
line-height: 1.2;
}
+ .blockTime {
+ font-family: PingFang SC;
+ font-weight: 400;
+ font-size: 10px;
+ color: #999999;
+ line-height: 1.2;
+ }
+
.blockChange {
font-family: PingFang SC;
font-weight: 400;
@@ -103,268 +171,10 @@
}
}
- // 第二个div - 高度39%
- .RcontainerMiddle {
- height: 33%;
- border-radius: 4px;
- display: flex;
- flex-direction: column;
-
- .sectionContent {
- height: 100%;
- display: flex;
- display: flex;
- gap: 10px;
- height: 100%;
-
-
-
- .middleBlock1 {
- // flex: 1;
- width: 28%;
- height: 100%;
- background: #fff;
-
- border: 2px solid #fff;
- // border-radius: 4px;
- position: relative;
- padding: 0px 10px 10px 2px;
- font-family: PingFang SC;
- font-size: 14px;
- color: #333333;
-
- .block1Header {
- position: absolute;
- top: 5px;
- left: 10px;
- right: 10px;
- display: flex;
- justify-content: space-between;
- align-items: center;
- z-index: 10;
-
- .block1Title {
- display: flex;
- align-items: center;
- gap: 8px;
- font-weight: 500;
- font-size: 14px;
- color: #333333;
-
- .titleIcon {
- width: 3px;
- height: 14px;
- background-color: #2E4CD4;
- }
- }
-
- .block1Segmented {
- padding: 0;
- margin: 0;
- border: 1px solid #E3E3E3;
- border-radius: 4px;
- height: 28px;
-
- :global(.ant-segmented) {
- padding: 0;
- margin: 0;
- height: 28px;
- }
-
- :global(.ant-segmented-item) {
- font-size: 12px;
- padding: 2px 8px;
- height: 26px;
- line-height: 26px;
- display: flex;
- align-items: center;
- justify-content: center;
- }
-
- :global(.ant-segmented-item-selected) {
- background-color: #1890ff;
- color: #fff;
- }
- }
- }
-
- .deviceStatusChart {
- position: absolute;
- top: 35px;
- left: 10px;
- right: 10px;
- bottom: 10px;
- z-index: 10;
- }
-
- // .block1Chart {
- // width: 100%;
- // height: 100%;
- // margin-top: 20px;
-
- // .mapImage {
- // margin-top: 7%;
- // width: 90%;
- // height: 77%;
- // object-fit: cover;
- // border-radius: 4px;
- // display: block;
- // margin-left: auto;
- // margin-right: auto;
- // }
- // }
- }
-
- .middleBlock12 {
- flex: 1;
- height: 100%;
- background-color: #fff;
- display: flex;
- flex-direction: column;
- font-family: PingFang SC;
- font-size: 14px;
- color: #333333;
- padding: 5px 10px 5px 10px;
- position: relative;
-
- .block1Header {
- position: absolute;
- top: 5px;
- left: 10px;
- right: 10px;
- display: flex;
- justify-content: space-between;
- align-items: center;
- z-index: 10;
-
- .block1Title {
- display: flex;
- align-items: center;
- gap: 8px;
- font-weight: 500;
- font-size: 14px;
- color: #333333;
-
- .titleIcon {
- width: 3px;
- height: 14px;
- background-color: #2E4CD4;
- }
- }
-
- .block1Segmented {
- padding: 0;
- margin: 0;
- border: 1px solid #E3E3E3;
- border-radius: 4px;
- height: 28px;
-
- :global(.ant-segmented) {
- padding: 0;
- margin: 0;
- height: 28px;
- }
-
- :global(.ant-segmented-item) {
- font-size: 12px;
- padding: 2px 8px;
- height: 26px;
- line-height: 26px;
- display: flex;
- align-items: center;
- justify-content: center;
- }
-
- :global(.ant-segmented-item-selected) {
- background-color: #1890ff;
- color: #fff;
- }
- }
-
- .customSelect {
- :global(.ant-select-single:not(.ant-select-customize-input) .ant-select-selector) {
- height: 26px !important;
- display: flex !important;
- align-items: center !important;
- }
-
- :global(.ant-select-selection-item) {
- line-height: 24px !important;
- // height: 24px !important;
- display: flex !important;
- align-items: center !important;
- }
- }
- }
-
- .deviceStatusChart {
- position: absolute;
- top: 35px;
- left: 10px;
- right: 10px;
- bottom: 10px;
- z-index: 10;
- }
- }
-
- .middleBlock2 {
- flex: 1;
- height: 100%;
- // background: linear-gradient(170.5deg, #EBEFF4 6.87%, #FFFFFF 53.01%);
- // border: 2px solid #fff;
- background-color: #fff;
- // border-radius: 4px;
- display: flex;
- flex-direction: column;
- font-family: PingFang SC;
- font-size: 14px;
- color: #333333;
- padding: 5px 10px 5px 10px;
-
- .middleBlock2Title {
- display: flex;
- justify-content: space-between;
- align-items: center;
- // margin-bottom: 10px;
-
- .titleLeft {
- display: flex;
- align-items: center;
- gap: 8px;
- font-weight: 500;
- font-size: 14px;
- color: #333333;
-
- .titleIcon {
- width: 3px;
- height: 14px;
- background-color: #2E4CD4;
- }
- }
-
- .titleRight {
- display: flex;
- align-items: center;
- gap: 8px;
- font-size: 12px;
- color: #666;
- }
- }
-
- .middleBlock2Chart {
- width: 100%;
- height: 100%;
- // min-height: 200px;
- }
- }
-
- }
- }
- // 第三个div - 高度不超过45%
+ // 第三个div - 占满剩余位置
.RcontainerBottom {
- height: 45%; // 限制高度不超过45%
- max-height: 45%; // 确保最大高度不超过45%
+ flex: 1; // 占满剩余空间
display: flex;
flex-direction: column;
diff --git a/src/pages/business_envInformation/module/EquipmentManagement.js b/src/pages/business_envInformation/module/EquipmentManagement.js
index a01f8a6..18b0df3 100644
--- a/src/pages/business_envInformation/module/EquipmentManagement.js
+++ b/src/pages/business_envInformation/module/EquipmentManagement.js
@@ -4,9 +4,9 @@ import styles from './EquipmentManagement.less';
const EquipmentManagement = () => {
return (
-
- 设备状态分布
+ {/* 块5 */}
+
-
-
-
+ {
- console.log(value);
- }}
- />
-
- {/* 设备状态饼图 */}
-
+
- 环保总人数
+ 258
+ 截止到 2025-09-11 07:35
-
+
+
{/* 第三个div - 占满剩余位置 */}
-
-
- 设备故障类型分布
+ {/* 块6 */}
+
-
-
+
-
- {/* 设备故障类型饼图 */}
-
+
-
- 环保总人数
+ 258
+ 截止到 2025-09-11 07:35
-
-
-
-
-
-
- 设备运行参数
-
-
-
-
-
-
-
@@ -859,7 +456,7 @@ const EnvironmentalPersonnelManagement = () => {
-
);
};
diff --git a/src/pages/business_envInformation/module/EvaluationReport.js b/src/pages/business_envInformation/module/EvaluationReport.js
index 1d61812..0cd0b94 100644
--- a/src/pages/business_envInformation/module/EvaluationReport.js
+++ b/src/pages/business_envInformation/module/EvaluationReport.js
@@ -1,920 +1,52 @@
-import React, { useEffect, useRef, useState } from 'react';
-import { Card, Result, Select, Button, Segmented, Progress, Input } from 'antd';
-import { CheckCircleOutlined, ExportOutlined, HeartFilled, LineHeightOutlined, ExclamationCircleOutlined, SearchOutlined } from '@ant-design/icons';
-import * as echarts from 'echarts';
-import StandardTable from '@/components/StandardTable';
+import React, { useState } from 'react';
+import { Tabs } from 'antd';
import styles from './EvaluationReport.less';
-import img1 from '@/assets/safe_majorHazard/online_monitoring/img1.png';
-import img2 from '@/assets/safe_majorHazard/online_monitoring/img2.png';
-import img3 from '@/assets/safe_majorHazard/online_monitoring/img3.png';
-import map1 from '@/assets/safe_majorHazard/online_monitoring/map.png';
-import risk1 from '@/assets/safe_majorHazard/online_monitoring/risk1.png';
-import risk2 from '@/assets/safe_majorHazard/online_monitoring/risk2.png';
-import risk3 from '@/assets/safe_majorHazard/online_monitoring/risk3.png';
-import eqicon1 from '@/assets/business_basic/eqicon1.png';
-import eqicon2 from '@/assets/business_basic/eqicon2.png';
-import eqicon3 from '@/assets/business_basic/eqicon3.png';
-import eqicon4 from '@/assets/business_basic/eqicon4.png';
+// 导入子页面组件
+import PermitStatistics from './secondary_menu/PermitStatistics';
+import EnvironmentalTaskList from './secondary_menu/EnvironmentalTaskList';
+import DischargePermitManagement from './secondary_menu/DischargePermitManagement';
const EvaluationReport = () => {
- const chartRef = useRef(null);
- const pieChartRef = useRef(null);
- const faultPieChartRef = useRef(null);
- const [selectedRowKeys, setSelectedRowKeys] = useState([]);
- const [selectedRows, setSelectedRows] = useState([]);
- const [loading, setLoading] = useState(false);
- const [dataSource, setDataSource] = useState([]);
- const [pagination, setPagination] = useState({
- current: 1,
- pageSize: 8,
- total: 0,
- });
- const [searchText, setSearchText] = useState('');
+ const [activeTab, setActiveTab] = useState('permit-statistics');
- // 柱状图初始化
- useEffect(() => {
- if (pieChartRef.current) {
- const barChart = echarts.init(pieChartRef.current);
-
- const barOption = {
- grid: {
- left: '5%',
- right: '5%',
- bottom: '10%',
- top: '20%',
- containLabel: true
- },
- xAxis: {
- type: 'category',
- data: ['灭火器', '消火栓', '报警器', '疏散灯', '排烟设备'],
- axisLabel: {
- fontSize: 12,
- color: '#333',
- interval: 0,
- rotate: 0
- },
- axisLine: {
- show: false
- },
- axisTick: {
- show: false
- }
- },
- yAxis: {
- type: 'value',
- min: 0,
- max: 50,
- interval: 10,
- axisLabel: {
- fontSize: 12,
- color: '#666',
- formatter: '{value}'
- },
- axisLine: {
- show: false
- },
- axisTick: {
- show: false
- },
- splitLine: {
- lineStyle: {
- color: '#00001A26',
- type: 'dashed'
- }
- }
- },
- series: [{
- name: '使用次数',
- type: 'bar',
- barWidth: 27,
- data: [35, 28, 42, 31, 38],
- itemStyle: {
- color: {
- type: 'linear',
- x: 0,
- y: 0,
- x2: 0,
- y2: 1,
- colorStops: [
- { offset: 0, color: '#199BFB' },
- { offset: 1, color: '#1373FA' }
- ]
- }
- },
- emphasis: {
- itemStyle: {
- color: {
- type: 'linear',
- x: 0,
- y: 0,
- x2: 0,
- y2: 1,
- colorStops: [
- { offset: 0, color: '#0D7AE8' },
- { offset: 1, color: '#0F5BC7' }
- ]
- }
- }
- }
- }],
- legend: {
- show: true,
- top: '5%',
- left: 'center',
- itemWidth: 15,
- itemHeight: 3,
- textStyle: {
- fontSize: 12,
- color: '#333'
- },
- data: [{
- name: '使用次数',
- icon: 'rect',
- itemStyle: {
- color: '#4B69F1'
- }
- }]
- },
- tooltip: {
- trigger: 'axis',
- axisPointer: {
- type: 'shadow'
- },
- formatter: function (params) {
- return `${params[0].name}
-
+
+ 开发中
+
开发中。。。
- 使用次数: ${params[0].value}`; - } - } - }; - - barChart.setOption(barOption); - - // 响应式调整 - const handleBarResize = () => { - if (barChart && !barChart.isDisposed()) { - barChart.resize(); - } - }; - - window.addEventListener('resize', handleBarResize); - - return () => { - window.removeEventListener('resize', handleBarResize); - if (barChart && !barChart.isDisposed()) { - barChart.dispose(); - } - }; - } - }, []); - - // 维护费用趋势折线图初始化 - useEffect(() => { - if (faultPieChartRef.current) { - const faultPieChart = echarts.init(faultPieChartRef.current); - - const faultPieOption = { - - legend: { - show: true, - top: '5%', - left: 'center', - itemWidth: 20, - itemHeight: 8, - textStyle: { - color: '#333', - fontSize: 12 - } - }, - grid: { - left: '5%', - right: '5%', - bottom: '10%', - top: '20%', - containLabel: true - }, - xAxis: { - type: 'category', - data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'], - axisLine: { - lineStyle: { - color: '#E5E5E5' - } - }, - axisTick: { - show: false - }, - axisLabel: { - color: '#666', - fontSize: 12, - interval: 0 - } - }, - yAxis: { - type: 'value', - min: 20000, - max: 30000, - interval: 2000, - axisLine: { - show: false - }, - axisTick: { - show: false - }, - axisLabel: { - color: '#666', - fontSize: 12, - formatter: '¥{value}' - }, - splitLine: { - lineStyle: { - color: '#00001A26', - type: 'dashed' - } - } - }, - series: [{ - name: '费用', - type: 'line', - data: [29000, 21000, 27500, 21900, 26000, 25000, 27000, 24000, 22300, 28000, 29000, 27000], - smooth: false, - symbol: 'circle', - symbolSize: 6, - lineStyle: { - color: '#1269FF', - width: 1 - }, - itemStyle: { - color: '#FFFFFF', - borderColor: '#1269FF', - borderWidth: 1 - }, - areaStyle: { - color: { - type: 'linear', - x: 0, - y: 0, - x2: 0, - y2: 1, - colorStops: [{ - offset: 0, - color: 'rgba(18, 105, 255, 0.3)' - }, { - offset: 1, - color: 'rgba(18, 105, 255, 0.05)' - }] - } - } - }] - }; - - faultPieChart.setOption(faultPieOption); - - // 响应式调整 - const handleFaultPieResize = () => { - if (faultPieChart && !faultPieChart.isDisposed()) { - faultPieChart.resize(); - } - }; - - window.addEventListener('resize', handleFaultPieResize); - - return () => { - window.removeEventListener('resize', handleFaultPieResize); - if (faultPieChart && !faultPieChart.isDisposed()) { - faultPieChart.dispose(); - } - }; - } - }, []); - - useEffect(() => { - if (chartRef.current) { - const chart = echarts.init(chartRef.current); - - // 强制初始化时调整大小 - setTimeout(() => { - if (chart && !chart.isDisposed()) { - chart.resize(); - } - }, 100); - - const option = { - color: ['#3C7EFF', '#FF8800', '#FFC403', '#31BCFF'], - legend: { - orient: 'vertical', - right: '2%', - top: 'middle', - itemWidth: 14, - itemHeight: 5, - textStyle: { - fontSize: 10, - color: '#666' - } - }, - tooltip: { - trigger: 'item', - formatter: '{b}
{d}%' - }, - series: [ - { - name: '设备类型占比', - type: 'pie', - radius: '70%', - center: ['40%', '55%'], - avoidLabelOverlap: false, - itemStyle: { - borderRadius: 0, - borderColor: '#fff', - borderWidth: 1 - }, - label: { - show: false, - position: 'center' - }, - emphasis: { - label: { - show: false - } - }, - labelLine: { - show: false - }, - data: [ - { value: 25, name: '灭火器' }, - { value: 30, name: '消防栓' }, - { value: 20, name: '报警器' }, - { value: 25, name: '烟雾探测器' } - ] - } - ] - }; - - chart.setOption(option); - - // 响应式调整 - 使用多种方式监听容器尺寸变化 - let resizeTimer = null; - const handleResize = () => { - // 防抖处理，避免频繁调用resize - if (resizeTimer) { - clearTimeout(resizeTimer); - } - resizeTimer = setTimeout(() => { - if (chart && !chart.isDisposed()) { - chart.resize(); - } - }, 50); // 减少延迟时间 - }; - - // 监听窗口大小变化 - window.addEventListener('resize', handleResize); - - // 监听容器尺寸变化（解决菜单栏伸缩时的自适应问题） - let resizeObserver = null; - if (window.ResizeObserver) { - resizeObserver = new ResizeObserver((entries) => { - for (let entry of entries) { - // 使用requestAnimationFrame确保在下一帧执行 - requestAnimationFrame(() => { - handleResize(); - }); - } - }); - resizeObserver.observe(chartRef.current); - } - - // 额外监听父容器的尺寸变化 - const parentContainer = chartRef.current?.parentElement; - let parentObserver = null; - if (parentContainer && window.ResizeObserver) { - parentObserver = new ResizeObserver((entries) => { - for (let entry of entries) { - requestAnimationFrame(() => { - handleResize(); - }); - } - }); - parentObserver.observe(parentContainer); - } - - // 使用MutationObserver监听DOM结构变化（菜单展开收起时） - const mutationObserver = new MutationObserver((mutations) => { - mutations.forEach((mutation) => { - if (mutation.type === 'attributes' && - (mutation.attributeName === 'class' || mutation.attributeName === 'style')) { - // 延迟执行，确保DOM更新完成 - setTimeout(() => { - handleResize(); - }, 200); - } - }); - }); - - // 监听整个页面的class和style变化 - mutationObserver.observe(document.body, { - attributes: true, - attributeFilter: ['class', 'style'], - subtree: true - }); - - return () => { - window.removeEventListener('resize', handleResize); - if (resizeObserver) { - resizeObserver.disconnect(); - } - if (parentObserver) { - parentObserver.disconnect(); - } - if (mutationObserver) { - mutationObserver.disconnect(); - } - if (resizeTimer) { - clearTimeout(resizeTimer); - } - if (chart && !chart.isDisposed()) { - chart.dispose(); - } - }; - } - }, []); - - // 表格列定义 - const columns = [ - { - title: '编号', - dataIndex: 'id', - key: 'id', - width: 60, - render: (text, record, index) => { - const page = pagination.current || 1; - const pageSize = pagination.pageSize || 8; - const number = (page - 1) * pageSize + index + 1; - return `0${number}`.slice(-2); - } - }, - { - title: '设备编号', - dataIndex: 'deviceId', - key: 'deviceId', - width: 140, - }, - { - title: '设备名称', - dataIndex: 'deviceName', - key: 'deviceName', - width: 110, - }, - { - title: '类型', - dataIndex: 'modelSpec', - key: 'modelSpec', - width: 120, - }, - { - title: '安装位置', - dataIndex: 'installLocation', - key: 'installLocation', - width: 100, - }, - { - title: '状态', - dataIndex: 'status', - key: 'status', - width: 100, - render: (text) => { - const statusMap = { - '报废': { color: '#FF3E48', bg: '#FFE0E2' }, - '待维修': { color: '#FF8800', bg: '#FFF3E9' }, - '已使用': { color: '#00AAFA', bg: '#DAF3FF' }, - '正常': { color: '#44BB5F', bg: '#D8F7DE' } - }; - const status = statusMap[text] || { color: '#333', bg: '#F5F5F5' }; - return ( - - {text} - - ); - } - }, - { - title: '最后维护时间', - dataIndex: 'lastMaintenance', - key: 'lastMaintenance', - width: 150, - }, - { - title: '操作', - key: 'action', - width: 140, - render: (_, record) => ( -
-
-
-
- ),
- },
- ];
-
- // 模拟数据
- const mockData = [
- {
- key: '1',
- id: '001',
- deviceId: 'HQ-XF-01-001',
- deviceName: '干粉灭火器',
- modelSpec: '灭火设备',
- installLocation: '1层大厅',
- status: '报废',
- lastMaintenance: '2025-09-10',
- },
- {
- key: '2',
- id: '002',
- deviceId: 'HQ-XF-02-015',
- deviceName: '室内消火栓',
- modelSpec: '灭火设备',
- installLocation: '3层东区',
- status: '已使用',
- lastMaintenance: '2025-09-10',
- },
+ // 标签页配置
+ const tabItems = [
{
- key: '3',
- id: '003',
- deviceId: 'HQ-XF-03-007',
- deviceName: '火警报警器',
- modelSpec: '报警设备',
- installLocation: '地下一层',
- status: '正常',
- lastMaintenance: '2025-09-10',
+ key: 'permit-statistics',
+ label: '许可证信息统计表',
+ children:
- {/* 第1个div - 高度39% */}
-
-
-
- {/* 第2个div - 占满剩余位置 */}
-
-
-
-
-
-
-
- {/* 设备状态饼图 */}
-
-
- 设备使用频率分析
-
-
-
-
-
-
-
-
-
- {/* 维护费用趋势折线图 */}
-
-
- 近一年维护费用趋势
-
-
-
-
-
-
-
-
-
-
- 设备类型占比
-
-
-
-
+
-
-
-
-
-
-
-
-
-
-
-
- 近期维护提醒
-
-
-
-
-
-
- SH-MHQ-023-C 干粉灭火器
- 位置: 4楼办公区丨维护类型: 季度检查
- 负责人: 张三
-
-
- 3天后到期
-
-
-
-
- SH-XHS-045-D 室内消火栓
- 位置: 2楼东侧走廊丨维护类型: 水压测试
- 负责人: 李四
-
-
- 8天后到期
-
-
-
-
-
- 维护任务进度
-
- {/* 进度条区域 */}
-
-
-
-
- 月度维护计划
-
-
- 季度维护计划
-
-
-
- 年度维护计划
-
-
-
- {/* 警告提示框 */}
-
-
-
-
- {/* 表格 */}
-
-
-
-
-
- {/* 操作按钮 */}
-
-
-
- 消防设施与器材列表
-
-
-
- {/* 表格 */}
-
- }
- />
-
-
-
-
-
-
-
- `共 ${total} 条`,
- }}
- />
-
-
+
);
};
diff --git a/src/pages/business_envInformation/module/EvaluationReport.less b/src/pages/business_envInformation/module/EvaluationReport.less
index e62182a..62d85ec 100644
--- a/src/pages/business_envInformation/module/EvaluationReport.less
+++ b/src/pages/business_envInformation/module/EvaluationReport.less
@@ -1,556 +1,91 @@
-.Econtainer {
- padding: 8px 6px 0px 6px;
+.container {
+ width: 100%;
height: 100%;
- display: flex;
- flex-direction: column;
- gap: 10px;
-
- // 第二个div - 高度35%
- .EcontainerMiddle {
- // height: 400px;
- min-height: 35%;
- border-radius: 4px;
- display: flex;
- flex-direction: column;
-
- .sectionContent {
- height: 100%;
- display: flex;
- display: flex;
- gap: 10px;
- height: 100%;
-
- .middleBlock1 {
- width: 30%;
- height: 100%;
- background: #fff;
- border: 2px solid #fff;
- position: relative;
- padding: 0px 10px 10px 2px;
- font-family: PingFang SC;
- font-size: 14px;
- color: #333333;
-
- .block1Header {
- position: absolute;
- top: 5px;
- left: 10px;
- right: 10px;
- display: flex;
- justify-content: space-between;
- align-items: center;
- z-index: 10;
-
- .block1Title {
- display: flex;
- align-items: center;
- gap: 8px;
- font-weight: 500;
- font-size: 14px;
- margin-top: 5px;
- color: #333333;
-
- .titleIcon {
- width: 3px;
- height: 14px;
- background-color: #2E4CD4;
- }
- }
-
- }
+ padding: 16px;
+ // background-color: #f5f5f5;
+
+ .tabs {
+ height: 100%;
+ background-color: transparent;
+ border-radius: 8px;
+ // box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+
+ :global(.ant-tabs-nav) {
+ margin: 0;
+ padding: 0 20px;
+ background-color: transparent;
+ border-bottom: none;
+ }
- .deviceStatusChart {
- position: absolute;
- top: 10px;
- left: 10px;
- right: 10px;
- z-index: 10;
- min-height: 100%;
- }
+ :global(.ant-tabs-tab) {
+ padding: 16px 24px !important;
+ font-size: 14px !important;
+ font-weight: 400 !important;
+ color: #AFAFAF !important;
+ background: transparent !important;
+ border: none !important;
+ position: relative;
+
+ &:hover {
+ color: #AFAFAF !important;
+ background-color: transparent !important;
}
- .middleBlock12 {
- flex: 1;
- height: 100%;
- background-color: #fff;
- display: flex;
- flex-direction: column;
- font-family: PingFang SC;
- font-size: 14px;
- color: #333333;
- padding: 5px 10px 5px 10px;
- position: relative;
+ &.ant-tabs-tab-active {
+ color: #009D6F !important;
+ background-color: #fff !important;
+ border-bottom: none !important;
- .block1Header {
+ &::after {
+ content: '';
position: absolute;
- top: 5px;
- left: 10px;
- right: 10px;
- display: flex;
- justify-content: space-between;
- align-items: center;
- z-index: 10;
-
- .block1Title {
- display: flex;
- align-items: center;
- gap: 8px;
- font-weight: 500;
- font-size: 14px;
- margin-top: 5px;
- color: #333333;
-
- .titleIcon {
- width: 3px;
- height: 14px;
- background-color: #2E4CD4;
- }
- }
-
- }
-
- .deviceStatusChart {
- position: absolute;
- top: 10px;
- left: 10px;
- right: 10px;
- // bottom: 10px;
- z-index: 10;
+ bottom: 0;
+ left: 50%;
+ transform: translateX(-50%);
+ width: 38.36132812500014px;
+ height: 3.3613271713256965px;
+ background-color: #009D6F;
+ border-radius: 2px;
+ z-index: 1;
}
}
+ }
- .middleBlock12 {
- width: 45%;
- height: 100%;
- background-color: #fff;
- display: flex;
- flex-direction: column;
- font-family: PingFang SC;
- font-size: 14px;
- color: #333333;
- padding: 5px 10px 5px 10px;
- position: relative;
-
- .block1Header {
- position: absolute;
- top: 5px;
- left: 10px;
- right: 10px;
- display: flex;
- justify-content: space-between;
- align-items: center;
- z-index: 10;
-
- .block1Title {
- display: flex;
- align-items: center;
- gap: 8px;
- font-weight: 500;
- font-size: 14px;
- color: #333333;
-
- .titleIcon {
- width: 3px;
- height: 14px;
- background-color: #2E4CD4;
- }
- }
- }
-
- .deviceStatusChart {
- position: absolute;
- top: 10px;
- left: 10px;
- right: 10px;
- // bottom: 10px;
- min-height: 100%;
- z-index: 10;
- }
- }
-
- .middleBlock2 {
- // flex: 1;
- width: calc(100% - 75% - 15px);
- height: 100%;
- // background: linear-gradient(170.5deg, #EBEFF4 6.87%, #FFFFFF 53.01%);
- // border: 2px solid #fff;
- background-color: #fff;
- // border-radius: 4px;
- display: flex;
- flex-direction: column;
- font-family: PingFang SC;
- font-size: 14px;
- color: #333333;
- padding: 5px 10px 5px 10px;
-
- .middleBlock2Title {
- display: flex;
- justify-content: space-between;
- align-items: center;
- margin-top: 5px;
-
- .titleLeft {
- display: flex;
- align-items: center;
- gap: 8px;
- font-weight: 500;
- font-size: 14px;
- color: #333333;
-
- .titleIcon {
- width: 3px;
- height: 14px;
- background-color: #2E4CD4;
- }
- }
+ // 额外的全局样式覆盖，确保优先级足够高
+ :global(.ant-tabs-tab.ant-tabs-tab-active) {
+ color: #009D6F !important;
+ background-color: #fff !important;
+ border-bottom: none !important;
+ }
- }
+ // 更强的选择器优先级
+ :global(.ant-tabs .ant-tabs-tab.ant-tabs-tab-active) {
+ color: #009D6F !important;
+ background-color: #fff !important;
+ border-bottom: none !important;
+ }
- .middleBlock2Chart {
- width: 100%;
- height: 100%;
- }
- }
+ // 针对可能的嵌套结构
+ :global(.ant-tabs-nav .ant-tabs-tab.ant-tabs-tab-active) {
+ color: #009D6F !important;
+ background-color: #fff !important;
+ border-bottom: none !important;
}
- }
- // 第三个div - 占满剩余位置
- .EcontainerBottom {
- display: flex;
- flex-direction: column;
- flex-shrink: 0;
+ // 覆盖Ant Design的默认下划线
+ :global(.ant-tabs-ink-bar) {
+ display: none !important;
+ }
- .sectionContent {
- display: flex;
- flex-direction: row;
- flex: 1;
- gap: 10px;
- padding: 0;
+ :global(.ant-tabs-content-holder) {
+ height: calc(100% - 60px);
+ padding: 20px;
- .leftBlock {
- width: 30%;
- flex-shrink: 0;
+ .ant-tabs-content {
height: 100%;
- padding: 0;
- display: flex;
- flex-direction: column;
- gap: 10px;
-
- .leftBlockTitle {
- display: flex;
- align-items: center;
- gap: 8px;
- font-family: PingFang SC;
- font-weight: 500;
- font-size: 14px;
- color: #333333;
- margin-bottom: 10px;
- .titleIcon {
- width: 3px;
- height: 16px;
- background-color: #2E4CD4;
- }
- }
-
- .maintenanceStack {
- width: 100%;
+ .ant-tabs-tabpane {
height: 100%;
- display: flex;
- flex-direction: column;
- gap: 10px;
-
- .maintenanceSection {
- width: 100%;
- height: 50%;
- background: #FFF;
- border-radius: 4px;
- display: flex;
- flex-direction: column;
- padding: 12px 14px;
-
- .maintenanceTitle {
- display: flex;
- align-items: center;
- gap: 8px;
- font-family: PingFang SC;
- font-weight: 500;
- font-size: 14px;
- color: #333333;
- margin-bottom: 8px;
- }
-
- .titleIcon {
- width: 3px;
- height: 16px;
- background-color: #2E4CD4;
- }
-
- .maintenanceContent {
- flex: 1;
- width: 100%;
- }
-
- .maintenanceContent1 {
- flex: 1;
- width: 100%;
- display: flex;
- flex-direction: column;
- gap: 8px;
- margin-top: 8px;
- .maintenanceItem {
- display: flex;
- align-items: center;
- justify-content: space-between;
- background-color: #F1F7FF;
- border-radius: 4px;
- padding: 16px 16px;
-
- .maintenanceLeft {
- flex: 1;
- display: flex;
- flex-direction: column;
- gap: 4px;
-
- .maintenanceText1 {
- font-size: 14px;
- font-weight: 500;
- color: #333333;
- font-family: PingFang SC;
- }
-
- .maintenanceText2 {
- font-size: 12px;
- color: #666666;
- font-family: PingFang SC;
- }
-
- .maintenanceText3 {
- font-size: 12px;
- color: #666666;
- font-family: PingFang SC;
- }
- }
-
- .maintenanceRight {
- flex: 0 0 auto;
- display: flex;
- align-items: center;
- justify-content: center;
-
- .maintenanceStatus {
- font-size: 12px;
- color: #FF3E48;
- font-weight: 500;
- font-family: PingFang SC;
- background-color: #FFE0E2;
- padding: 4px 8px;
- border-radius: 4px;
- // border: 1px solid #FFE0E2;
- }
- }
-
- .maintenanceRight2 {
- flex: 0 0 auto;
- display: flex;
- align-items: center;
- justify-content: center;
-
- .maintenanceStatus {
- font-size: 12px;
- color: #FF8800;
- font-weight: 500;
- font-family: PingFang SC;
- background-color: #FFF3E9;
- padding: 4px 8px;
- border-radius: 4px;
- // padding-right: 2px;
- }
- }
- }
- }
-
- .maintenanceContent2 {
- flex: 1;
- width: 100%;
- display: flex;
- flex-direction: column;
- gap: 15px;
- padding: 8px 0;
-
- .warningBox {
- display: flex;
- align-items: center;
- gap: 8px;
- background-color: #FFF3CD;
- border: 1px solid #F4E3AE;
- border-radius: 4px;
- padding: 8px 12px;
- // margin-bottom: 8px;
- // margin-top: 10px;
-
- .warningIcon {
- color: #8C6C0B;
- font-size: 14px;
- }
-
- .warningText {
- color: #8C6C0B;
- font-size: 12px;
- font-family: PingFang SC;
- font-weight: 400;
- }
- }
-
- .progressSection {
- width: 100%;
- display: flex;
- flex-direction: column;
- // gap: 12px;
- padding: 0px 12px 12px 12px;
-
-
- .progressLabel {
- font-size: 12px;
- color: #666666;
- font-family: PingFang SC;
- font-weight: 400;
-
- }
-
- // 自定义进度条样式
- :global(.ant-progress) {
- .ant-progress-bg {
- background: linear-gradient(90deg, #2E4CD4 0%, #4B69F1 100%);
- }
-
- .ant-progress-text {
- color: #2E4CD4;
- font-weight: 500;
- }
- }
-
- }
- }
- }
- }
- }
-
- .rightBlock {
- width: calc(100% - 28% - 10px);
- height: 100%;
- background-color: #fff;
- padding: 0;
- display: flex;
- flex-direction: column;
-
- .tableHeader {
- display: flex;
- justify-content: space-between;
- align-items: center;
- padding: 11px 15px 5px 15px;
-
- .tableTitle {
- display: flex;
- align-items: center;
- gap: 8px;
- font-family: PingFang SC;
- font-weight: 500;
- font-size: 14px;
- color: #333333;
-
- .titleIcon {
- width: 3px;
- height: 16px;
- background-color: #2E4CD4;
- }
- }
- }
-
- .tableActions {
- display: flex;
- justify-content: space-between;
- align-items: center;
- gap: 8px;
- margin-top: 5px;
- padding: 0px 15px;
-
- .leftActions {
- display: flex;
- align-items: center;
- }
-
- .rightActions {
- display: flex;
- gap: 8px;
- align-items: center;
- }
-
- .actionButton {
- display: flex;
- align-items: center;
- gap: 4px;
- height: 28px;
- border: 1px solid #DFE4F6;
- border-radius: 4px;
- color: #2E4CD4;
- font-weight: 500;
- font-size: 12px;
- padding: 0px 8px;
- background: transparent;
- cursor: pointer;
- transition: all 0.2s ease;
-
- &:hover {
- background-color: #f0f2ff;
- border-color: #2E4CD4;
- }
-
- &:active {
- background-color: #e6ebff;
- }
-
- .buttonIcon {
- font-size: 14px;
- font-weight: bold;
- }
- }
- }
-
- .tableContainer {
- flex: 1;
- overflow: hidden;
- margin: 10px 15px 0 15px; // 上边距10px，左右边距15px
-
- :global(.ant-table) {
- font-size: 12px;
- }
-
- :global(.ant-table-thead > tr > th) {
- background-color: #f5f5fa;
- font-weight: 500;
- font-size: 14px;
- color: #333333;
- border-bottom: 1px solid #f0f0f0;
- padding: 8px 12px;
- text-align: center;
- }
-
- :global(.ant-table-tbody > tr > td) {
- padding: 8px 12px;
- border-bottom: 1px solid #f0f0f0;
- text-align: center;
- color: #666666;
- }
-
- :global(.ant-table-tbody > tr:hover > td) {
- background-color: #f5f5f5;
- }
-
- :global(.ant-pagination) {
- margin-top: 16px;
- text-align: right;
- }
}
}
}
diff --git a/src/pages/business_envInformation/module/PollutionSourceManagement.js b/src/pages/business_envInformation/module/PollutionSourceManagement.js
index 8664d91..f7fd339 100644
--- a/src/pages/business_envInformation/module/PollutionSourceManagement.js
+++ b/src/pages/business_envInformation/module/PollutionSourceManagement.js
@@ -4,9 +4,7 @@ import styles from './PollutionSourceManagement.less';
const PollutionSourceManagement = () => {
return (
-
);
};
diff --git a/src/pages/business_envInformation/module/secondary_menu/DischargePermitManagement.js b/src/pages/business_envInformation/module/secondary_menu/DischargePermitManagement.js
new file mode 100644
index 0000000..911d6a2
--- /dev/null
+++ b/src/pages/business_envInformation/module/secondary_menu/DischargePermitManagement.js
@@ -0,0 +1,16 @@
+import React from 'react';
+import styles from './DischargePermitManagement.less';
+
+const DischargePermitManagement = () => {
+ return (
+
-
+ 开发中
开发中。。。
-
+
+ );
+};
+
+export default DischargePermitManagement;
diff --git a/src/pages/business_envInformation/module/secondary_menu/DischargePermitManagement.less b/src/pages/business_envInformation/module/secondary_menu/DischargePermitManagement.less
new file mode 100644
index 0000000..f51b9bd
--- /dev/null
+++ b/src/pages/business_envInformation/module/secondary_menu/DischargePermitManagement.less
@@ -0,0 +1,26 @@
+.container {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background-color: #fff;
+ padding: 20px;
+
+ .content {
+ text-align: center;
+
+ h2 {
+ font-size: 24px;
+ color: #333;
+ margin-bottom: 16px;
+ font-weight: 500;
+ }
+
+ p {
+ font-size: 16px;
+ color: #666;
+ margin: 0;
+ }
+ }
+}
diff --git a/src/pages/business_envInformation/module/secondary_menu/EnvironmentalTaskList.js b/src/pages/business_envInformation/module/secondary_menu/EnvironmentalTaskList.js
new file mode 100644
index 0000000..41439b7
--- /dev/null
+++ b/src/pages/business_envInformation/module/secondary_menu/EnvironmentalTaskList.js
@@ -0,0 +1,16 @@
+import React from 'react';
+import styles from './EnvironmentalTaskList.less';
+
+const EnvironmentalTaskList = () => {
+ return (
+
+
+ 排污许可执行管理
+此页面用于展示和管理排污许可的执行情况
+ {/* 这里可以添加具体的排污许可管理表格和功能 */} +
+
+ );
+};
+
+export default EnvironmentalTaskList;
diff --git a/src/pages/business_envInformation/module/secondary_menu/EnvironmentalTaskList.less b/src/pages/business_envInformation/module/secondary_menu/EnvironmentalTaskList.less
new file mode 100644
index 0000000..f51b9bd
--- /dev/null
+++ b/src/pages/business_envInformation/module/secondary_menu/EnvironmentalTaskList.less
@@ -0,0 +1,26 @@
+.container {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background-color: #fff;
+ padding: 20px;
+
+ .content {
+ text-align: center;
+
+ h2 {
+ font-size: 24px;
+ color: #333;
+ margin-bottom: 16px;
+ font-weight: 500;
+ }
+
+ p {
+ font-size: 16px;
+ color: #666;
+ margin: 0;
+ }
+ }
+}
diff --git a/src/pages/business_envInformation/module/secondary_menu/PermitStatistics.js b/src/pages/business_envInformation/module/secondary_menu/PermitStatistics.js
new file mode 100644
index 0000000..d2d34b1
--- /dev/null
+++ b/src/pages/business_envInformation/module/secondary_menu/PermitStatistics.js
@@ -0,0 +1,16 @@
+import React from 'react';
+import styles from './PermitStatistics.less';
+
+const PermitStatistics = () => {
+ return (
+
+
+ 环保管理任务清单
+此页面用于展示和管理环保相关的任务清单
+ {/* 这里可以添加具体的任务清单表格和功能 */} +
+
+ );
+};
+
+export default PermitStatistics;
diff --git a/src/pages/business_envInformation/module/secondary_menu/PermitStatistics.less b/src/pages/business_envInformation/module/secondary_menu/PermitStatistics.less
new file mode 100644
index 0000000..f51b9bd
--- /dev/null
+++ b/src/pages/business_envInformation/module/secondary_menu/PermitStatistics.less
@@ -0,0 +1,26 @@
+.container {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background-color: #fff;
+ padding: 20px;
+
+ .content {
+ text-align: center;
+
+ h2 {
+ font-size: 24px;
+ color: #333;
+ margin-bottom: 16px;
+ font-weight: 500;
+ }
+
+ p {
+ font-size: 16px;
+ color: #666;
+ margin: 0;
+ }
+ }
+}
+
+ 许可证信息统计表
+此页面用于展示和管理各类许可证的统计信息
+ {/* 这里可以添加具体的许可证统计表格和图表 */} +