jiangxucong
/
dq-ems
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

法规页面

Browse Source
main
wangyunfei 3 weeks ago
parent f6c8f8abd9
commit 6a50d0843b
2 changed files with 213 additions and 14 deletions
Show Stats Download Patch File Download Diff File

164
src/pages/business_envInformation/module/secondary_menu/RegulationCompliance.js
Unescape Escape View File

@ -1,10 +1,12 @@
import React from 'react';
import { Form, Input, Button, DatePicker, Select } from 'antd';
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);
@ -16,6 +18,30 @@ const RegulationCompliance = () => {
// 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}>
@ -71,7 +97,11 @@ const RegulationCompliance = () => {
{/* 第三行：操作按钮 */}
<div className={styles.actionButtons}>
<div className={styles.actionButton}>
<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>
@ -104,7 +134,11 @@ const RegulationCompliance = () => {
{/* 第三行：操作按钮 */}
<div className={styles.actionButtons}>
<div className={styles.actionButton}>
<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>
@ -137,7 +171,11 @@ const RegulationCompliance = () => {
{/* 第三行：操作按钮 */}
<div className={styles.actionButtons}>
<div className={styles.actionButton}>
<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>
@ -170,7 +208,11 @@ const RegulationCompliance = () => {
{/* 第三行：操作按钮 */}
<div className={styles.actionButtons}>
<div className={styles.actionButton}>
<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>
@ -203,7 +245,11 @@ const RegulationCompliance = () => {
{/* 第三行：操作按钮 */}
<div className={styles.actionButtons}>
<div className={styles.actionButton}>
<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>
@ -236,7 +282,11 @@ const RegulationCompliance = () => {
{/* 第三行：操作按钮 */}
<div className={styles.actionButtons}>
<div className={styles.actionButton}>
<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>
@ -269,7 +319,11 @@ const RegulationCompliance = () => {
{/* 第三行：操作按钮 */}
<div className={styles.actionButtons}>
<div className={styles.actionButton}>
<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>
@ -302,7 +356,11 @@ const RegulationCompliance = () => {
{/* 第三行：操作按钮 */}
<div className={styles.actionButtons}>
<div className={styles.actionButton}>
<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>
@ -335,7 +393,11 @@ const RegulationCompliance = () => {
{/* 第三行：操作按钮 */}
<div className={styles.actionButtons}>
<div className={styles.actionButton}>
<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>
@ -368,7 +430,11 @@ const RegulationCompliance = () => {
{/* 第三行：操作按钮 */}
<div className={styles.actionButtons}>
<div className={styles.actionButton}>
<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>
@ -401,7 +467,11 @@ const RegulationCompliance = () => {
{/* 第三行：操作按钮 */}
<div className={styles.actionButtons}>
<div className={styles.actionButton}>
<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>
@ -434,7 +504,11 @@ const RegulationCompliance = () => {
{/* 第三行：操作按钮 */}
<div className={styles.actionButtons}>
<div className={styles.actionButton}>
<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>
@ -448,6 +522,68 @@ const RegulationCompliance = () => {
</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}>&lt;</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}>&gt;</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>
);
};

63
src/pages/business_envInformation/module/secondary_menu/RegulationCompliance.less
Unescape Escape View File

@ -136,6 +136,69 @@
}
}
}
.paginationContainer {
position: fixed;
bottom: 10px;
right: 10px;
z-index: 1000;
}
.pagination {
display: flex;
align-items: center;
gap: 8px;
// background: #fff;
padding: 8px 30px;
border-radius: 4px;
// box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.totalItems {
font-size: 12px;
color: #666;
margin-right: 8px;
}
.pageSizeSelect {
font-size: 12px;
border: 1px solid #d9d9d9;
border-radius: 2px;
padding: 2px 6px;
margin-right: 8px;
background: #fff;
}
.pageButton {
width: 28px;
height: 28px;
border: 1px solid #d9d9d9;
background: #fff;
color: #333;
font-size: 12px;
border-radius: 2px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s;
&:hover {
border-color: #00D48A;
color: #00D48A;
}
&.active {
background: #00D48A;
border-color: #00D48A;
color: #fff;
}
}
.ellipsis {
font-size: 12px;
color: #999;
padding: 0 4px;
}
}
Write Preview
Loading…
Cancel
Save