-
);
};
diff --git a/src/pages/business_envInformation_monthly/components/secondary_menu/fxpggzt.less b/src/pages/business_envInformation_monthly/components/secondary_menu/fxpggzt.less
index 722b5a4..4c7e044 100644
--- a/src/pages/business_envInformation_monthly/components/secondary_menu/fxpggzt.less
+++ b/src/pages/business_envInformation_monthly/components/secondary_menu/fxpggzt.less
@@ -1,7 +1,175 @@
.container {
width: 100%;
height: 100%;
- background-color: #fff;
+ background-color: #f5f5f5;
border-radius: 4px;
+ display: flex;
+ flex-direction: column;
+ overflow: hidden;
+
+ // ===== A块：步骤按钮区域 =====
+ .stepButtons {
+ display: flex;
+ align-items: center;
+ background-color: transparent;
+ gap: 5px;
+ margin-bottom: 10px;
+
+ // 每一个步骤按钮
+ .stepButton {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ padding: 12px 24px;
+ border-radius: 2%;
+ cursor: pointer;
+ // transition: all 0.3s ease;
+ background: rgba(230, 230, 230, 0.8);
+ // box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
+ min-width: 160px;
+ position: relative;
+ border: 1px solid transparent;
+
+ .stepLabel {
+ font-size: 14px;
+ color: #333333;
+ }
+ }
+
+ // 选中步骤按钮样式
+ .activeStepButton {
+ background: #51e8a1 !important;
+ border: 1px solid #51e8a1 !important;
+ // box-shadow: 0px 2px 4px rgba(0, 228, 156, 0.3);
+
+ .stepLabel {
+ color: rgba(0, 129, 77, 1);
+ font-weight: 600;
+ }
+ }
+
+ // 步骤之间的连接线
+ .connector {
+ display: flex;
+ align-items: center;
+ margin: 0 -2px;
+ z-index: 1;
+
+ .connectorLine {
+ width: 40px;
+ height: 2px;
+ background-color: rgba(34, 197, 170, 1);
+ }
+
+ .connectorNode {
+ width: 8px;
+ height: 8px;
+ border-radius: 50%;
+ background-color: rgba(34, 197, 170, 1);
+ flex-shrink: 0;
+ }
+ }
+ }
+
+ // ===== B块：内容区域 =====
+ .contentArea {
+ flex: 1;
+ overflow-y: auto;
+ background-color: #fff;
+ border-radius: 4px;
+ margin: 0 6px 6px 6px;
+
+ .stepContent {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+ }
}
+// ========== Step01 专用布局 ==========
+.step01Layout {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ background-color: #fff;
+ gap: 10px;
+
+ .leftPanel {
+ width: 20%;
+ height: 100%;
+ background-color: green; // 暂定颜色，后续可调整为主题色
+ display: flex;
+ flex-direction: column;
+ padding: 10px;
+ box-sizing: border-box;
+ gap: 10px;
+ }
+
+ .leftTop {
+ display: flex;
+ gap: 10px;
+
+ .toggleBtn {
+ flex: 1;
+ }
+ }
+
+ .leftBottom {
+ flex: 1;
+ background-color: #fff;
+ border-radius: 2px;
+ padding: 8px;
+ box-sizing: border-box;
+ overflow: auto;
+ }
+
+ .rightPanel {
+ flex: 1;
+ height: 100%;
+ background-color: transparent;
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+ }
+
+ .rightTop {
+ height: 40px;
+ min-height: 40px;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 0 10px;
+ box-sizing: border-box;
+ background-color: #fff;
+
+ .selectedText {
+ font-size: 14px;
+ color: rgba(0, 0, 0, 1);
+ }
+
+ .nextBtn {
+ min-width: 80px;
+ border-radius: 2px;
+ background: rgba(0, 212, 138, 1);
+ border-color: rgba(0, 212, 138, 1);
+ color: #fff;
+ }
+ }
+
+ .rightBottom {
+ flex: 1;
+ background-color: #fff;
+ box-sizing: border-box;
+ overflow: hidden;
+
+ .tableWrapper {
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/pages/business_envInformation_monthly/components/secondary_menu/sjjrgl.js b/src/pages/business_envInformation_monthly/components/secondary_menu/sjjrgl.js
index 0d89ddb..95ba60b 100644
--- a/src/pages/business_envInformation_monthly/components/secondary_menu/sjjrgl.js
+++ b/src/pages/business_envInformation_monthly/components/secondary_menu/sjjrgl.js
@@ -1,191 +1,226 @@
import React, { useState } from 'react';
-import { Form, Input, Button, DatePicker, Space, Modal } from 'antd';
-import { SearchOutlined, RedoOutlined, CloseOutlined, EyeOutlined, DeleteOutlined } from '@ant-design/icons';
+import { Form, Input, Button, Space, Select } from 'antd';
+import { PlusOutlined } from '@ant-design/icons';
import StandardTable from '@/components/StandardTable';
import styles from './sjjrgl.less';
-import licence1 from '@/assets/business_envinformation/licence1.svg';
-import licence2 from '@/assets/business_envinformation/licence2.svg';
const Sjjrgl = () => {
const [form] = Form.useForm();
- const [isModalVisible, setIsModalVisible] = useState(false);
- const [currentImage, setCurrentImage] = useState(null);
const [dataSource, setDataSource] = useState([
{
key: 1,
- companyName: '北京某某环保有限公司',
- permitNumber: 'PWX-BJ-2023-001',
- issueOrg: '北京市生态环境局',
- expireDate: '2025-12-31',
- original: '已上传',
- duplicate: '已上传',
+ serialNumber: 1,
+ dataSourceName: 'Q3车间废水总排口COD在线监测',
+ type: '在线监测设备',
+ status: '未校验',
+ lastUpdateTime: '2025-11-27 05:10:34',
},
{
key: 2,
- companyName: '上海某某化工有限公司',
- permitNumber: 'PWX-SH-2023-002',
- issueOrg: '上海市生态环境局',
- expireDate: '2025-10-15',
- original: '已上传',
- duplicate: '已上传',
+ serialNumber: 2,
+ dataSourceName: '危废仓库VOCs无组织排放手工记录',
+ type: '在线监测设备',
+ status: '异常',
+ lastUpdateTime: '2025-11-24 18:08:09',
},
{
key: 3,
- companyName: '广州某某制造有限公司',
- permitNumber: 'PWX-GZ-2023-003',
- issueOrg: '广州市生态环境局',
- expireDate: '2026-03-20',
- original: '未上传',
- duplicate: '已上传',
+ serialNumber: 3,
+ dataSourceName: '2024年5月第三方环境检测报告数据',
+ type: 'API接口',
+ status: '正常',
+ lastUpdateTime: '2025-11-23 00:41:17',
},
{
key: 4,
- companyName: '深圳某某电子有限公司',
- permitNumber: 'PWX-SZ-2023-004',
- issueOrg: '深圳市生态环境局',
- expireDate: '2025-08-10',
- original: '已上传',
- duplicate: '未上传',
+ serialNumber: 4,
+ dataSourceName: '锅炉房烟气排放口 (CEMS) 数据流',
+ type: 'API接口',
+ status: '未校验',
+ lastUpdateTime: '2025-11-19 14:30:08',
},
{
key: 5,
- companyName: '成都某某科技有限公司',
- permitNumber: 'PWX-CD-2023-005',
- issueOrg: '成都市生态环境局',
- expireDate: '2026-01-25',
- original: '已上传',
- duplicate: '已上传',
+ serialNumber: 5,
+ dataSourceName: '厂界噪声季度监测记录表',
+ type: 'Excel导入',
+ status: '正常',
+ lastUpdateTime: '2025-11-14 08:57:38',
},
{
key: 6,
- companyName: '武汉某某工业有限公司',
- permitNumber: 'PWX-WH-2023-006',
- issueOrg: '武汉市生态环境局',
- expireDate: '2025-11-30',
- original: '已上传',
- duplicate: '已上传',
+ serialNumber: 6,
+ dataSourceName: '南区污水处理站加药台账',
+ type: 'Excel导入',
+ status: '异常',
+ lastUpdateTime: '2025-11-10 08:34:40',
},
{
key: 7,
- companyName: '杭州某某环保有限公司',
- permitNumber: 'PWX-HZ-2023-007',
- issueOrg: '杭州市生态环境局',
- expireDate: '2026-05-15',
- original: '未上传',
- duplicate: '已上传',
+ serialNumber: 7,
+ dataSourceName: '活性炭更换记录 (吸附装置A/B)',
+ type: 'API接口',
+ status: '未校验',
+ lastUpdateTime: '2025-11-08 15:56:39',
},
{
key: 8,
- companyName: '南京某某化学有限公司',
- permitNumber: 'PWX-NJ-2023-008',
- issueOrg: '南京市生态环境局',
- expireDate: '2025-09-20',
- original: '已上传',
- duplicate: '已上传',
+ serialNumber: 8,
+ dataSourceName: '活性炭更换记录 (吸附装置A/B)',
+ type: '在线监测设备',
+ status: '未校验',
+ lastUpdateTime: '2025-11-04 00:10:56',
},
{
key: 9,
- companyName: '重庆某某重工有限公司',
- permitNumber: 'PWX-CQ-2023-009',
- issueOrg: '重庆市生态环境局',
- expireDate: '2026-02-28',
- original: '已上传',
- duplicate: '未上传',
+ serialNumber: 9,
+ dataSourceName: '活性炭更换记录 (吸附装置A/B)',
+ type: '在线监测设备',
+ status: '异常',
+ lastUpdateTime: '2025-11-03 14:21:29',
},
{
key: 10,
- companyName: '天津某某制药有限公司',
- permitNumber: 'PWX-TJ-2023-010',
- issueOrg: '天津市生态环境局',
- expireDate: '2025-07-10',
- original: '已上传',
- duplicate: '已上传',
- },
- {
- key: 11,
- companyName: '西安某某材料有限公司',
- permitNumber: 'PWX-XA-2023-011',
- issueOrg: '西安市生态环境局',
- expireDate: '2026-04-05',
- original: '未上传',
- duplicate: '已上传',
- },
- {
- key: 12,
- companyName: '青岛某某机械有限公司',
- permitNumber: 'PWX-QD-2023-012',
- issueOrg: '青岛市生态环境局',
- expireDate: '2025-12-15',
- original: '已上传',
- duplicate: '已上传',
+ serialNumber: 10,
+ dataSourceName: '活性炭更换记录 (吸附装置A/B)',
+ type: '在线监测设备',
+ status: '异常',
+ lastUpdateTime: '2025-11-03 11:01:14',
},
]);
+ const getStatusColor = (status) => {
+ switch (status) {
+ case '正常':
+ return '#52c41a';
+ case '异常':
+ return '#ff4d4f';
+ case '未校验':
+ return '#faad14';
+ default:
+ return '#999';
+ }
+ };
+
+ const getTypeStyle = (type) => {
+ switch (type) {
+ case '在线监测设备':
+ return {
+ border: '1px solid rgba(135, 232, 222, 1)',
+ backgroundColor: 'rgba(230, 255, 251, 1)',
+ color: 'rgba(19, 194, 194, 1)',
+ borderRadius: '2px',
+ };
+ case 'API接口':
+ return {
+ border: '1px solid rgba(255, 178, 168, 1)',
+ backgroundColor: 'rgba(255, 239, 239, 1)',
+ color: 'rgba(255, 89, 60, 1)',
+ borderRadius: '2px',
+ };
+ case 'Excel导入':
+ return {
+ border: '1px solid rgba(168, 206, 255, 1)',
+ backgroundColor: 'rgba(230, 240, 255, 1)',
+ color: 'rgba(60, 106, 255, 1)',
+ borderRadius: '2px',
+ };
+ default:
+ return {
+ border: '1px solid #d9d9d9',
+ backgroundColor: '#fafafa',
+ color: '#666',
+ borderRadius: '2px',
+ };
+ }
+ };
+
const columns = [
{
title: '序号',
- dataIndex: 'key',
- key: 'key',
+ dataIndex: 'serialNumber',
+ key: 'serialNumber',
width: 80,
align: 'center',
},
{
- title: '企业名称',
- dataIndex: 'companyName',
- key: 'companyName',
- width: 200,
+ title: '数据源名称',
+ dataIndex: 'dataSourceName',
+ key: 'dataSourceName',
+ width: 300,
},
{
- title: '排污许可证号',
- dataIndex: 'permitNumber',
- key: 'permitNumber',
- width: 180,
- },
- {
- title: '颁发机构',
- dataIndex: 'issueOrg',
- key: 'issueOrg',
- width: 180,
+ title: '类型',
+ dataIndex: 'type',
+ key: 'type',
+ width: 150,
+ align: 'center',
+ render: (type) => (
+
+ {type}
+
+ ),
},
{
- title: '到期时间',
- dataIndex: 'expireDate',
- key: 'expireDate',
+ title: '状态',
+ dataIndex: 'status',
+ key: 'status',
width: 120,
- sorter: (a, b) => new Date(a.expireDate) - new Date(b.expireDate),
- showSorterTooltip: false,
- },
- {
- title: '正本',
- dataIndex: 'original',
- key: 'original',
- width: 100,
align: 'center',
- render: () => { setCurrentImage(licence1); setIsModalVisible(true); }}>附件
+ render: (status) => (
+
+
+ {status}
+
+ ),
},
{
- title: '副本',
- dataIndex: 'duplicate',
- key: 'duplicate',
- width: 100,
+ title: '最后更新时间',
+ dataIndex: 'lastUpdateTime',
+ key: 'lastUpdateTime',
+ width: 180,
align: 'center',
- render: () => { setCurrentImage(licence2); setIsModalVisible(true); }}>附件
},
{
title: '操作',
key: 'action',
- width: 150,
+ width: 200,
align: 'center',
render: (_, record) => (
- 风险评估工作台
-待开发...
+
+
+
+
+
+
+
+
+
+
+
+
+
+
{renderContent()}
{/* 第一块：搜索表单 */}
-
- {/* 图片弹窗 */}
-
-
+
{/* 第二块：表格 */}
@@ -262,22 +354,6 @@ const Sjjrgl = () => {
}}
/>
+ {/* 左侧：新增按钮 */}
+
+
+ {/* 右侧：搜索表单 */}
+
+