You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
593 lines
33 KiB
JavaScript
593 lines
33 KiB
JavaScript
import React, { useState } from 'react';
|
|
import { Form, Input, Button, DatePicker, Select, Drawer, Descriptions, Tag } from 'antd';
|
|
import styles from './RegulationCompliance.less';
|
|
import stipulation1 from '@/assets/business_envinformation/stipulation1.svg';
|
|
|
|
const RegulationCompliance = () => {
|
|
const [form] = Form.useForm();
|
|
const [drawerVisible, setDrawerVisible] = useState(false);
|
|
const [selectedRegulation, setSelectedRegulation] = useState(null);
|
|
|
|
const handleSearch = (values) => {
|
|
console.log('搜索参数:', values);
|
|
// TODO: 实现搜索功能
|
|
};
|
|
|
|
const handleReset = () => {
|
|
form.resetFields();
|
|
// TODO: 重置搜索
|
|
};
|
|
|
|
// 显示抽屉详情
|
|
const showDrawer = (regulation) => {
|
|
setSelectedRegulation(regulation);
|
|
setDrawerVisible(true);
|
|
};
|
|
|
|
// 关闭抽屉
|
|
const onCloseDrawer = () => {
|
|
setDrawerVisible(false);
|
|
setSelectedRegulation(null);
|
|
};
|
|
|
|
// 模拟法规数据（实际应该从后端获取）
|
|
const mockRegulationDetail = {
|
|
name: '2025排污许可条例',
|
|
publishDate: '2025-08-24',
|
|
department: '环保部门名称',
|
|
content: '在此输入具体的法规内容...',
|
|
status: '有效',
|
|
category: '排污许可',
|
|
version: '1.0',
|
|
updateTime: '2025-08-24'
|
|
};
|
|
|
|
|
|
return (
|
|
<div className={styles.regulationContainer}>
|
|
{/* 第一块：搜索表单 */}
|
|
<div className={styles.searchSection}>
|
|
<Form form={form} layout="inline" onFinish={handleSearch}>
|
|
<Form.Item label="法规名称" name="regulationName">
|
|
<Input placeholder="请输入" style={{ width: 160, borderRadius: '2px' }} />
|
|
</Form.Item>
|
|
<Form.Item label="发布部门" name="regulationNumber">
|
|
<Input placeholder="请输入" style={{ width: 160, borderRadius: '2px' }} />
|
|
</Form.Item>
|
|
<Form.Item label="发布日期" name="publishDate">
|
|
<DatePicker placeholder="请选择" style={{ width: 160, borderRadius: '2px' }} />
|
|
</Form.Item>
|
|
<Form.Item>
|
|
<Button
|
|
type="primary"
|
|
htmlType="submit"
|
|
style={{ backgroundColor: '#00D48A', borderColor: '#00D48A', color: '#fff', borderRadius: '4px' }}
|
|
>
|
|
查询
|
|
</Button>
|
|
</Form.Item>
|
|
<Form.Item>
|
|
<Button onClick={handleReset} style={{ borderRadius: '4px' }}>
|
|
重置
|
|
</Button>
|
|
</Form.Item>
|
|
</Form>
|
|
</div>
|
|
|
|
{/* 第二块：表格区域 */}
|
|
<div className={styles.tableSection}>
|
|
<div className={styles.blocksContainer}>
|
|
{/* 法规合规管理块1 */}
|
|
<div className={styles.regulationBlock}>
|
|
{/* 第一行：法规名称 */}
|
|
<div className={styles.regulationTitle}>
|
|
<img src={stipulation1} alt="法规图标" style={{ width: '20px', height: '20px', marginRight: '4px' }} />
|
|
2025排污许可条例
|
|
</div>
|
|
|
|
{/* 第二行：发布时间和发布部门 */}
|
|
<div className={styles.regulationInfo}>
|
|
<div className={styles.publishDate}>
|
|
发布时间 2025-08-24
|
|
</div>
|
|
<div className={styles.publishDepartment}>
|
|
发布部门 环保部门名称
|
|
</div>
|
|
</div>
|
|
|
|
{/* 第三行：操作按钮 */}
|
|
<div className={styles.actionButtons}>
|
|
<div
|
|
className={styles.actionButton}
|
|
onClick={() => showDrawer(mockRegulationDetail)}
|
|
style={{ cursor: 'pointer' }}
|
|
>
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none">
|
|
<path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z" fill="#D8D8D8"/>
|
|
</svg>
|
|
</div>
|
|
<div className={styles.actionButton}>
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none">
|
|
<path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z" fill="#D8D8D8"/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 法规合规管理块2 */}
|
|
<div className={styles.regulationBlock}>
|
|
{/* 第一行：法规名称 */}
|
|
<div className={styles.regulationTitle}>
|
|
<img src={stipulation1} alt="法规图标" style={{ width: '20px', height: '20px', marginRight: '4px' }} />
|
|
2025排污许可条例
|
|
</div>
|
|
|
|
{/* 第二行：发布时间和发布部门 */}
|
|
<div className={styles.regulationInfo}>
|
|
<div className={styles.publishDate}>
|
|
发布时间 2025-08-25
|
|
</div>
|
|
<div className={styles.publishDepartment}>
|
|
发布部门 环保部门名称
|
|
</div>
|
|
</div>
|
|
|
|
{/* 第三行：操作按钮 */}
|
|
<div className={styles.actionButtons}>
|
|
<div
|
|
className={styles.actionButton}
|
|
onClick={() => showDrawer(mockRegulationDetail)}
|
|
style={{ cursor: 'pointer' }}
|
|
>
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none">
|
|
<path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z" fill="#D8D8D8"/>
|
|
</svg>
|
|
</div>
|
|
<div className={styles.actionButton}>
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none">
|
|
<path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z" fill="#D8D8D8"/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 法规合规管理块3 */}
|
|
<div className={styles.regulationBlock}>
|
|
{/* 第一行：法规名称 */}
|
|
<div className={styles.regulationTitle}>
|
|
<img src={stipulation1} alt="法规图标" style={{ width: '20px', height: '20px', marginRight: '4px' }} />
|
|
2025排污许可条例
|
|
</div>
|
|
|
|
{/* 第二行：发布时间和发布部门 */}
|
|
<div className={styles.regulationInfo}>
|
|
<div className={styles.publishDate}>
|
|
发布时间 2025-08-26
|
|
</div>
|
|
<div className={styles.publishDepartment}>
|
|
发布部门 环保部门名称
|
|
</div>
|
|
</div>
|
|
|
|
{/* 第三行：操作按钮 */}
|
|
<div className={styles.actionButtons}>
|
|
<div
|
|
className={styles.actionButton}
|
|
onClick={() => showDrawer(mockRegulationDetail)}
|
|
style={{ cursor: 'pointer' }}
|
|
>
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none">
|
|
<path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z" fill="#D8D8D8"/>
|
|
</svg>
|
|
</div>
|
|
<div className={styles.actionButton}>
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none">
|
|
<path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z" fill="#D8D8D8"/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 法规合规管理块4 */}
|
|
<div className={styles.regulationBlock}>
|
|
{/* 第一行：法规名称 */}
|
|
<div className={styles.regulationTitle}>
|
|
<img src={stipulation1} alt="法规图标" style={{ width: '20px', height: '20px', marginRight: '4px' }} />
|
|
2025排污许可条例
|
|
</div>
|
|
|
|
{/* 第二行：发布时间和发布部门 */}
|
|
<div className={styles.regulationInfo}>
|
|
<div className={styles.publishDate}>
|
|
发布时间 2025-08-27
|
|
</div>
|
|
<div className={styles.publishDepartment}>
|
|
发布部门 环保部门名称
|
|
</div>
|
|
</div>
|
|
|
|
{/* 第三行：操作按钮 */}
|
|
<div className={styles.actionButtons}>
|
|
<div
|
|
className={styles.actionButton}
|
|
onClick={() => showDrawer(mockRegulationDetail)}
|
|
style={{ cursor: 'pointer' }}
|
|
>
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none">
|
|
<path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z" fill="#D8D8D8"/>
|
|
</svg>
|
|
</div>
|
|
<div className={styles.actionButton}>
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none">
|
|
<path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z" fill="#D8D8D8"/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 法规合规管理块5 */}
|
|
<div className={styles.regulationBlock}>
|
|
{/* 第一行：法规名称 */}
|
|
<div className={styles.regulationTitle}>
|
|
<img src={stipulation1} alt="法规图标" style={{ width: '20px', height: '20px', marginRight: '4px' }} />
|
|
2025排污许可条例
|
|
</div>
|
|
|
|
{/* 第二行：发布时间和发布部门 */}
|
|
<div className={styles.regulationInfo}>
|
|
<div className={styles.publishDate}>
|
|
发布时间 2025-08-28
|
|
</div>
|
|
<div className={styles.publishDepartment}>
|
|
发布部门 环保部门名称
|
|
</div>
|
|
</div>
|
|
|
|
{/* 第三行：操作按钮 */}
|
|
<div className={styles.actionButtons}>
|
|
<div
|
|
className={styles.actionButton}
|
|
onClick={() => showDrawer(mockRegulationDetail)}
|
|
style={{ cursor: 'pointer' }}
|
|
>
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none">
|
|
<path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z" fill="#D8D8D8"/>
|
|
</svg>
|
|
</div>
|
|
<div className={styles.actionButton}>
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none">
|
|
<path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z" fill="#D8D8D8"/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 法规合规管理块6 */}
|
|
<div className={styles.regulationBlock}>
|
|
{/* 第一行：法规名称 */}
|
|
<div className={styles.regulationTitle}>
|
|
<img src={stipulation1} alt="法规图标" style={{ width: '20px', height: '20px', marginRight: '4px' }} />
|
|
2025排污许可条例
|
|
</div>
|
|
|
|
{/* 第二行：发布时间和发布部门 */}
|
|
<div className={styles.regulationInfo}>
|
|
<div className={styles.publishDate}>
|
|
发布时间 2025-08-29
|
|
</div>
|
|
<div className={styles.publishDepartment}>
|
|
发布部门 环保部门名称
|
|
</div>
|
|
</div>
|
|
|
|
{/* 第三行：操作按钮 */}
|
|
<div className={styles.actionButtons}>
|
|
<div
|
|
className={styles.actionButton}
|
|
onClick={() => showDrawer(mockRegulationDetail)}
|
|
style={{ cursor: 'pointer' }}
|
|
>
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none">
|
|
<path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z" fill="#D8D8D8"/>
|
|
</svg>
|
|
</div>
|
|
<div className={styles.actionButton}>
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none">
|
|
<path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z" fill="#D8D8D8"/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 法规合规管理块7 */}
|
|
<div className={styles.regulationBlock}>
|
|
{/* 第一行：法规名称 */}
|
|
<div className={styles.regulationTitle}>
|
|
<img src={stipulation1} alt="法规图标" style={{ width: '20px', height: '20px', marginRight: '4px' }} />
|
|
2025排污许可条例
|
|
</div>
|
|
|
|
{/* 第二行：发布时间和发布部门 */}
|
|
<div className={styles.regulationInfo}>
|
|
<div className={styles.publishDate}>
|
|
发布时间 2025-08-30
|
|
</div>
|
|
<div className={styles.publishDepartment}>
|
|
发布部门 环保部门名称
|
|
</div>
|
|
</div>
|
|
|
|
{/* 第三行：操作按钮 */}
|
|
<div className={styles.actionButtons}>
|
|
<div
|
|
className={styles.actionButton}
|
|
onClick={() => showDrawer(mockRegulationDetail)}
|
|
style={{ cursor: 'pointer' }}
|
|
>
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none">
|
|
<path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z" fill="#D8D8D8"/>
|
|
</svg>
|
|
</div>
|
|
<div className={styles.actionButton}>
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none">
|
|
<path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z" fill="#D8D8D8"/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 法规合规管理块8 */}
|
|
<div className={styles.regulationBlock}>
|
|
{/* 第一行：法规名称 */}
|
|
<div className={styles.regulationTitle}>
|
|
<img src={stipulation1} alt="法规图标" style={{ width: '20px', height: '20px', marginRight: '4px' }} />
|
|
2025排污许可条例
|
|
</div>
|
|
|
|
{/* 第二行：发布时间和发布部门 */}
|
|
<div className={styles.regulationInfo}>
|
|
<div className={styles.publishDate}>
|
|
发布时间 2025-08-31
|
|
</div>
|
|
<div className={styles.publishDepartment}>
|
|
发布部门 环保部门名称
|
|
</div>
|
|
</div>
|
|
|
|
{/* 第三行：操作按钮 */}
|
|
<div className={styles.actionButtons}>
|
|
<div
|
|
className={styles.actionButton}
|
|
onClick={() => showDrawer(mockRegulationDetail)}
|
|
style={{ cursor: 'pointer' }}
|
|
>
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none">
|
|
<path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z" fill="#D8D8D8"/>
|
|
</svg>
|
|
</div>
|
|
<div className={styles.actionButton}>
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none">
|
|
<path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z" fill="#D8D8D8"/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 法规合规管理块9 */}
|
|
<div className={styles.regulationBlock}>
|
|
{/* 第一行：法规名称 */}
|
|
<div className={styles.regulationTitle}>
|
|
<img src={stipulation1} alt="法规图标" style={{ width: '20px', height: '20px', marginRight: '4px' }} />
|
|
2025排污许可条例
|
|
</div>
|
|
|
|
{/* 第二行：发布时间和发布部门 */}
|
|
<div className={styles.regulationInfo}>
|
|
<div className={styles.publishDate}>
|
|
发布时间 2025-09-01
|
|
</div>
|
|
<div className={styles.publishDepartment}>
|
|
发布部门 环保部门名称9
|
|
</div>
|
|
</div>
|
|
|
|
{/* 第三行：操作按钮 */}
|
|
<div className={styles.actionButtons}>
|
|
<div
|
|
className={styles.actionButton}
|
|
onClick={() => showDrawer(mockRegulationDetail)}
|
|
style={{ cursor: 'pointer' }}
|
|
>
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none">
|
|
<path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z" fill="#D8D8D8"/>
|
|
</svg>
|
|
</div>
|
|
<div className={styles.actionButton}>
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none">
|
|
<path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z" fill="#D8D8D8"/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 法规合规管理块10 */}
|
|
<div className={styles.regulationBlock}>
|
|
{/* 第一行：法规名称 */}
|
|
<div className={styles.regulationTitle}>
|
|
<img src={stipulation1} alt="法规图标" style={{ width: '20px', height: '20px', marginRight: '4px' }} />
|
|
2025排污许可条例
|
|
</div>
|
|
|
|
{/* 第二行：发布时间和发布部门 */}
|
|
<div className={styles.regulationInfo}>
|
|
<div className={styles.publishDate}>
|
|
发布时间 2025-09-02
|
|
</div>
|
|
<div className={styles.publishDepartment}>
|
|
发布部门 环保部门名称
|
|
</div>
|
|
</div>
|
|
|
|
{/* 第三行：操作按钮 */}
|
|
<div className={styles.actionButtons}>
|
|
<div
|
|
className={styles.actionButton}
|
|
onClick={() => showDrawer(mockRegulationDetail)}
|
|
style={{ cursor: 'pointer' }}
|
|
>
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none">
|
|
<path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z" fill="#D8D8D8"/>
|
|
</svg>
|
|
</div>
|
|
<div className={styles.actionButton}>
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none">
|
|
<path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z" fill="#D8D8D8"/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 法规合规管理块11 */}
|
|
<div className={styles.regulationBlock}>
|
|
{/* 第一行：法规名称 */}
|
|
<div className={styles.regulationTitle}>
|
|
<img src={stipulation1} alt="法规图标" style={{ width: '20px', height: '20px', marginRight: '4px' }} />
|
|
2025排污许可条例
|
|
</div>
|
|
|
|
{/* 第二行：发布时间和发布部门 */}
|
|
<div className={styles.regulationInfo}>
|
|
<div className={styles.publishDate}>
|
|
发布时间 2025-09-03
|
|
</div>
|
|
<div className={styles.publishDepartment}>
|
|
发布部门 环保部门名称
|
|
</div>
|
|
</div>
|
|
|
|
{/* 第三行：操作按钮 */}
|
|
<div className={styles.actionButtons}>
|
|
<div
|
|
className={styles.actionButton}
|
|
onClick={() => showDrawer(mockRegulationDetail)}
|
|
style={{ cursor: 'pointer' }}
|
|
>
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none">
|
|
<path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z" fill="#D8D8D8"/>
|
|
</svg>
|
|
</div>
|
|
<div className={styles.actionButton}>
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none">
|
|
<path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z" fill="#D8D8D8"/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 法规合规管理块12 */}
|
|
<div className={styles.regulationBlock}>
|
|
{/* 第一行：法规名称 */}
|
|
<div className={styles.regulationTitle}>
|
|
<img src={stipulation1} alt="法规图标" style={{ width: '20px', height: '20px', marginRight: '4px' }} />
|
|
2025排污许可条例
|
|
</div>
|
|
|
|
{/* 第二行：发布时间和发布部门 */}
|
|
<div className={styles.regulationInfo}>
|
|
<div className={styles.publishDate}>
|
|
发布时间 2025-09-04
|
|
</div>
|
|
<div className={styles.publishDepartment}>
|
|
发布部门 环保部门名称
|
|
</div>
|
|
</div>
|
|
|
|
{/* 第三行：操作按钮 */}
|
|
<div className={styles.actionButtons}>
|
|
<div
|
|
className={styles.actionButton}
|
|
onClick={() => showDrawer(mockRegulationDetail)}
|
|
style={{ cursor: 'pointer' }}
|
|
>
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none">
|
|
<path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z" fill="#D8D8D8"/>
|
|
</svg>
|
|
</div>
|
|
<div className={styles.actionButton}>
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none">
|
|
<path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z" fill="#D8D8D8"/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 静态分页组件 */}
|
|
<div className={styles.paginationContainer}>
|
|
<div className={styles.pagination}>
|
|
<span className={styles.totalItems}>共85条</span>
|
|
{/* <select className={styles.pageSizeSelect}>
|
|
<option value="10">10 / page</option>
|
|
</select> */}
|
|
<button className={styles.pageButton}><</button>
|
|
<button className={styles.pageButton}>1</button>
|
|
<span className={styles.ellipsis}>...</span>
|
|
<button className={styles.pageButton}>4</button>
|
|
<button className={styles.pageButton}>5</button>
|
|
<button className={`${styles.pageButton} ${styles.active}`}>6</button>
|
|
<button className={styles.pageButton}>7</button>
|
|
<button className={styles.pageButton}>8</button>
|
|
<span className={styles.ellipsis}>...</span>
|
|
<button className={styles.pageButton}>50</button>
|
|
<button className={styles.pageButton}>></button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 抽屉详情 */}
|
|
<Drawer
|
|
title="法规详情"
|
|
width={600}
|
|
placement="right"
|
|
onClose={onCloseDrawer}
|
|
visible={drawerVisible}
|
|
maskClosable={true}
|
|
>
|
|
{selectedRegulation && (
|
|
<Descriptions bordered column={1} size="middle">
|
|
<Descriptions.Item label="法规名称">
|
|
{selectedRegulation.name}
|
|
</Descriptions.Item>
|
|
<Descriptions.Item label="发布日期">
|
|
{selectedRegulation.publishDate}
|
|
</Descriptions.Item>
|
|
<Descriptions.Item label="发布部门">
|
|
{selectedRegulation.department}
|
|
</Descriptions.Item>
|
|
<Descriptions.Item label="法规状态">
|
|
<Tag color="green">{selectedRegulation.status}</Tag>
|
|
</Descriptions.Item>
|
|
<Descriptions.Item label="法规类别">
|
|
{selectedRegulation.category}
|
|
</Descriptions.Item>
|
|
<Descriptions.Item label="版本号">
|
|
{selectedRegulation.version}
|
|
</Descriptions.Item>
|
|
<Descriptions.Item label="更新时间">
|
|
{selectedRegulation.updateTime}
|
|
</Descriptions.Item>
|
|
<Descriptions.Item label="法规内容">
|
|
<div style={{ whiteSpace: 'pre-wrap', maxHeight: '300px', overflow: 'auto' }}>
|
|
{selectedRegulation.content}
|
|
</div>
|
|
</Descriptions.Item>
|
|
</Descriptions>
|
|
)}
|
|
</Drawer>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default RegulationCompliance;
|
|
|