From 93ec55d48d72aaf1bcbfe1b8d6fd074888542462 Mon Sep 17 00:00:00 2001 From: wangyunfei <1224056307@qq,com> Date: Tue, 14 Oct 2025 17:21:23 +0800 Subject: [PATCH] =?UTF-8?q?=E7=8E=AF=E4=BF=9D=E9=A1=B5=E9=9D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/PollutionSourceManagement.js | 74 ++++++++- .../components/PollutionSourceManagement.less | 141 +++++++++++------- 2 files changed, 158 insertions(+), 57 deletions(-) diff --git a/src/pages/business_envInformation/components/PollutionSourceManagement.js b/src/pages/business_envInformation/components/PollutionSourceManagement.js index e769605..b10c7f8 100644 --- a/src/pages/business_envInformation/components/PollutionSourceManagement.js +++ b/src/pages/business_envInformation/components/PollutionSourceManagement.js @@ -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) => ( {text} - + {/* */} ), }, @@ -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 = () => { {/* 污染源管理表格区域 */}
-
污染源管理
+
+ 污染源管理 +
+ + +
+
{ 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', + }} />
diff --git a/src/pages/business_envInformation/components/PollutionSourceManagement.less b/src/pages/business_envInformation/components/PollutionSourceManagement.less index 1255ab3..e2aea78 100644 --- a/src/pages/business_envInformation/components/PollutionSourceManagement.less +++ b/src/pages/business_envInformation/components/PollutionSourceManagement.less @@ -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-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; - } - } + // :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; + + // &.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; + // } + // } } \ No newline at end of file