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

环保页面

Browse Source
main
wangyunfei 2 weeks ago
parent 824ba541dd
commit 93ec55d48d
2 changed files with 158 additions and 57 deletions
Show Stats Download Patch File Download Diff File

74
src/pages/business_envInformation/components/PollutionSourceManagement.js
Unescape Escape View File

@ -15,6 +15,7 @@ const { Option } = Select;
const PollutionSourceManagement = () => {
const [loading, setLoading] = useState(false);
const [chartReady, setChartReady] = useState(false);
const [selectedRowKeys, setSelectedRowKeys] = useState([]);
const [tableData, setTableData] = useState({
list: [],
pagination: {
@ -290,7 +291,7 @@ const PollutionSourceManagement = () => {
render: (text) => (
<Space>
{text}
<SearchOutlined style={{ color: '#1890ff', cursor: 'pointer' }} />
{/* <SearchOutlined style={{ color: '#1890ff', cursor: 'pointer' }} /> */}
</Space>
),
},
@ -392,6 +393,39 @@ const PollutionSourceManagement = () => {
unit: 'm³',
method: '方式1',
trend: '近日,陕西延安培文实验'
},
{
key: '6',
equipment: '吉利',
material: '阿莫西林胶囊(联邦)',
facility: '污水处理设备001',
type: '种类2',
quantity: 38,
unit: 'kg',
method: '方式2',
trend: '环保部门加强监管力度，排放标准逐步提高'
},
{
key: '7',
equipment: '长城',
material: '布洛芬缓释胶囊(芬必得)',
facility: '废气处理设备002',
type: '种类3',
quantity: 29,
unit: 't',
method: '方式3',
trend: '企业积极响应绿色生产号召，投入环保设施'
},
{
key: '8',
equipment: '奇瑞',
material: '复方甘草片(太极)',
facility: '固废处理设备003',
type: '种类4',
quantity: 15,
unit: 'm³',
method: '方式4',
trend: '定期进行环境监测，确保排放达标'
}
];
@ -552,7 +586,26 @@ const PollutionSourceManagement = () => {
{/* 污染源管理表格区域 */}
<div className={styles.tableCard}>
<div className={styles.cardTitle}>污染源管理</div>
<div className={styles.cardTitle}>
<span>污染源管理</span>
<div className={styles.titleButtons}>
<Button
type="primary"
// icon={<PlusOutlined />}
onClick={handleAdd}
className={styles.titleAddButton}
>
新增
</Button>
<Button
// icon={<FileTextOutlined />}
onClick={handleGenerateReport}
className={styles.titleReportButton}
>
生成报表
</Button>
</div>
</div>
<StandardTable
columns={columns}
@ -560,7 +613,22 @@ const PollutionSourceManagement = () => {
onChange={handleTableChange}
rowKey="key"
size="small"
scroll={{ x: 1200, y: 600 }}
scroll={{ x: 1200 }}
rowSelection={{
selectedRowKeys,
onChange: setSelectedRowKeys,
getCheckboxProps: (record) => ({
name: record.name,
}),
}}
pagination={{
showTotal: (total, range) => `共 ${total} 条`,
showSizeChanger: true,
showQuickJumper: true,
pageSizeOptions: ['5', '10', '20', '50', '100'],
defaultPageSize: 5,
size: 'small',
}}
/>
</div>
</div >

137
src/pages/business_envInformation/components/PollutionSourceManagement.less
Unescape Escape View File

@ -307,22 +307,65 @@
// 表格卡片
.tableCard {
background: rgba(255, 255, 255, 0.95);
border-radius: 12px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
background: #fff;
border-radius: 2px;
// box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
// border: 1px solid rgba(255, 255, 255, 0.2);
// backdrop-filter: blur(10px);
padding: 20px;
.cardTitle {
background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
color: white;
font-weight: 600;
// background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
color: rgba(0, 0, 0, 1);
font-weight: 500;
font-size: 16px;
padding: 12px 16px;
margin: -20px -20px 20px -20px;
border-radius: 12px 12px 0 0;
border-bottom: 2px solid #e8f4fd;
margin: -20px -20px 10px -20px;
// border-radius: 12px 12px 0 0;
// border-bottom: 2px solid #e8f4fd;
display: flex;
justify-content: space-between;
align-items: center;
.titleButtons {
display: flex;
gap: 10px;
align-items: center;
.titleAddButton {
background: rgba(0, 212, 138, 1);
border: none;
border-radius: 4px;
color: #fff;
font-weight: 500;
transition: all 0.3s ease;
height: 32px;
padding: 4px 15px;
font-size: 14px;
&:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}
}
.titleReportButton {
border-radius: 4px;
border: 1px solid #d9d9d9;
background: #fff;
color: #666;
transition: all 0.3s ease;
height: 32px;
padding: 4px 15px;
font-size: 14px;
&:hover {
border-color: #40a9ff;
color: #40a9ff;
transform: translateY(-1px);
}
}
}
}
}
@ -388,64 +431,54 @@
}
}
.tableHeader {
flex-direction: column;
align-items: stretch;
.searchSection {
justify-content: center;
}
.actionButtons {
justify-content: center;
}
}
}
// 表格样式优化
:global(.ant-table) {
border-radius: 8px;
// border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
// box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
font-size: 12px;
color: rgba(0, 0, 0, 0.85);
:global(.ant-table-thead > tr > th) {
background: linear-gradient(90deg, #f8f9fa 0%, #e9ecef 100%);
border-bottom: 2px solid #dee2e6;
font-weight: 600;
color: #495057;
// background: linear-gradient(90deg, #f8f9fa 0%, #e9ecef 100%);
// border-bottom: 2px solid #dee2e6;
font-weight: 400;
}
:global(.ant-table-tbody > tr) {
transition: all 0.3s ease;
// transition: all 0.3s ease;
}
:global(.ant-table-tbody > tr > td) {
border-bottom: 1px solid #f0f0f0;
// border-bottom: 1px solid #f0f0f0;
}
}
// 分页器样式
:global(.ant-pagination) {
margin-top: 20px;
text-align: center;
// :global(.ant-pagination) {
// margin-top: 20px;
// text-align: center;
:global(.ant-pagination-item) {
border-radius: 6px;
border: 1px solid #d9d9d9;
transition: all 0.3s ease;
// :global(.ant-pagination-item) {
// border-radius: 6px;
// border: 1px solid #d9d9d9;
// transition: all 0.3s ease;
&.ant-pagination-item-active {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-color: #667eea;
color: white;
}
}
:global(.ant-pagination-prev),
:global(.ant-pagination-next) {
border-radius: 6px;
border: 1px solid #d9d9d9;
transition: all 0.3s ease;
}
}
// &.ant-pagination-item-active {
// background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
// border-color: #667eea;
// color: white;
// }
// }
// :global(.ant-pagination-prev),
// :global(.ant-pagination-next) {
// border-radius: 6px;
// border: 1px solid #d9d9d9;
// transition: all 0.3s ease;
// }
// }
}
Write Preview
Loading…
Cancel
Save