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

风险评估页工作页面，

Browse Source
main
wangyunfei 2 weeks ago
parent 7a48e10442
commit 32c75c7e38
7 changed files with 513 additions and 182 deletions
Show Stats Download Patch File Download Diff File

15
src/pages/business_envInformation_monthly/components/secondary_menu/Step01.js
Unescape Escape View File

@ -0,0 +1,15 @@
import React from 'react';
import styles from './fxpggzt.less';
const Step01 = () => {
return (
<div className={styles.stepContent}>
<div style={{ padding: '20px', textAlign: 'center' }}>
<h2>01待开发</h2>
</div>
</div>
);
};
export default Step01;

15
src/pages/business_envInformation_monthly/components/secondary_menu/Step02.js
Unescape Escape View File

@ -0,0 +1,15 @@
import React from 'react';
import styles from './fxpggzt.less';
const Step02 = () => {
return (
<div className={styles.stepContent}>
<div style={{ padding: '20px', textAlign: 'center' }}>
<h2>02待开发</h2>
</div>
</div>
);
};
export default Step02;

15
src/pages/business_envInformation_monthly/components/secondary_menu/Step03.js
Unescape Escape View File

@ -0,0 +1,15 @@
import React from 'react';
import styles from './fxpggzt.less';
const Step03 = () => {
return (
<div className={styles.stepContent}>
<div style={{ padding: '20px', textAlign: 'center' }}>
<h2>03待开发</h2>
</div>
</div>
);
};
export default Step03;

53
src/pages/business_envInformation_monthly/components/secondary_menu/fxpggzt.js
Unescape Escape View File

@ -1,13 +1,58 @@
import React from 'react';
import React, { useState } from 'react';
import { Button } from 'antd';
import styles from './fxpggzt.less';
import Step01 from './Step01';
import Step02 from './Step02';
import Step03 from './Step03';
const Fxpggzt = () => {
const [activeStep, setActiveStep] = useState('step01');
const renderContent = () => {
switch (activeStep) {
case 'step01':
return <Step01 />;
case 'step02':
return <Step02 />;
case 'step03':
return <Step03 />;
default:
return <Step01 />;
}
};
return (
<div className={styles.container}>
<div style={{ padding: '20px', textAlign: 'center' }}>
<h2>风险评估工作台</h2>
<p>待开发...</p>
<div className={styles.stepButtons}>
<Button
className={`${styles.stepButton} ${activeStep === 'step01' ? styles.activeStepButton : ''}`}
onClick={() => setActiveStep('step01')}
>
<span className={styles.stepLabel}>01 选择评估对象</span>
</Button>
<div className={styles.connector}>
<div className={styles.connectorLine}></div>
<div className={styles.connectorNode}></div>
</div>
<Button
className={`${styles.stepButton} ${activeStep === 'step02' ? styles.activeStepButton : ''}`}
onClick={() => setActiveStep('step02')}
>
<span className={styles.stepLabel}>02 选择方法与配置</span>
</Button>
<div className={styles.connector}>
<div className={styles.connectorLine}></div>
<div className={styles.connectorNode}></div>
</div>
<Button
className={`${styles.stepButton} ${activeStep === 'step03' ? styles.activeStepButton : ''}`}
onClick={() => setActiveStep('step03')}
>
<span className={styles.stepLabel}>03 确认与生成报告</span>
</Button>
</div>
<div className={styles.contentArea}>{renderContent()}</div>
</div>
);
};

168
src/pages/business_envInformation_monthly/components/secondary_menu/fxpggzt.less
Unescape Escape View File

@ -1,7 +1,175 @@
.container {
width: 100%;
height: 100%;
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;
}
}
}

386
src/pages/business_envInformation_monthly/components/secondary_menu/sjjrgl.js
Unescape Escape View File

@ -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: 'permitNumber',
key: 'permitNumber',
width: 180,
title: '数据源名称',
dataIndex: 'dataSourceName',
key: 'dataSourceName',
width: 300,
},
{
title: '颁发机构',
dataIndex: 'issueOrg',
key: 'issueOrg',
width: 180,
title: '类型',
dataIndex: 'type',
key: 'type',
width: 150,
align: 'center',
render: (type) => (
<span style={{
...getTypeStyle(type),
display: 'inline-block',
padding: '0 12px',
lineHeight: '22px',
fontSize: '12px',
}}>
{type}
</span>
),
},
{
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: () => <a style={{ color: '#0080FF' }} onClick={() => { setCurrentImage(licence1); setIsModalVisible(true); }}>附件</a>
render: (status) => (
<span>
<span
style={{
display: 'inline-block',
width: 8,
height: 8,
borderRadius: '50%',
backgroundColor: getStatusColor(status),
marginRight: 8,
}}
/>
{status}
</span>
),
},
{
title: '副本',
dataIndex: 'duplicate',
key: 'duplicate',
width: 100,
title: '最后更新时间',
dataIndex: 'lastUpdateTime',
key: 'lastUpdateTime',
width: 180,
align: 'center',
render: () => <a style={{ color: '#0080FF' }} onClick={() => { setCurrentImage(licence2); setIsModalVisible(true); }}>附件</a>
},
{
title: '操作',
key: 'action',
width: 150,
width: 200,
align: 'center',
render: (_, record) => (
<Space size="middle">
<EyeOutlined
style={{ color: '#7ee370', fontSize: 16, cursor: 'pointer' }}
onClick={() => handleView(record)}
/>
<DeleteOutlined
style={{ color: '#ff7e72', fontSize: 16, cursor: 'pointer' }}
<Space size="small">
<a
style={{ color: 'rgba(0, 215, 97, 1)', cursor: 'pointer' }}
onClick={() => handleEdit(record)}
>
编辑
</a>
<a
style={{ color: 'rgba(255, 183, 27, 1)', cursor: 'pointer' }}
onClick={() => handleVerify(record)}
>
校验
</a>
<a
style={{ color: 'rgba(255, 80, 27, 1)', cursor: 'pointer' }}
onClick={() => handleDelete(record)}
/>
>
删除
</a>
</Space>
),
},
@ -201,40 +236,96 @@ const Sjjrgl = () => {
// TODO: 重置搜索
};
const handleView = (record) => {
console.log('查看:', record);
// TODO: 实现查看功能
};
const handleEdit = (record) => {
console.log('编辑:', record);
// TODO: 实现编辑功能
};
const handleVerify = (record) => {
console.log('校验:', record);
// TODO: 实现校验功能
};
const handleDelete = (record) => {
console.log('删除:', record);
// TODO: 实现删除功能
};
const handleAdd = () => {
console.log('新增');
// TODO: 实现新增功能
};
return (
<div className={styles.permitContainer}>
{/* 第一块：搜索表单 */}
<div className={styles.searchSection}>
<Form form={form} layout="inline" onFinish={handleSearch}>
<Form.Item label="企业名称" name="companyName">
<Input placeholder="请输入" style={{ width: 160, borderRadius: '2px' }} />
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
{/* 左侧：新增按钮 */}
<Button
type="primary"
onClick={handleAdd}
style={{
backgroundColor: 'rgba(0, 212, 138, 1)',
borderColor: 'rgba(0, 212, 138, 1)',
color: '#fff',
borderRadius: '4px',
display: 'flex',
alignItems: 'center',
gap: '8px',
}}
>
<span style={{
display: 'inline-flex',
alignItems: 'center',
justifyContent: 'center',
width: '20px',
height: '20px',
borderRadius: '50%',
backgroundColor: 'rgba(255, 255, 255, 0.2)',
}}>
<PlusOutlined style={{ fontSize: '12px' }} />
</span>
新增
</Button>
{/* 右侧：搜索表单 */}
<Form form={form} layout="inline" onFinish={handleSearch} style={{ marginLeft: 'auto' }}>
<Form.Item name="name">
<Input placeholder="名称" style={{ width: 160, borderRadius: '2px' }} />
</Form.Item>
<Form.Item label="许可证号" name="permitNumber">
<Input placeholder="请输入" style={{ width: 160, borderRadius: '2px' }} />
<Form.Item name="type">
<Select
placeholder="全部类型"
style={{ width: 160, borderRadius: '2px' }}
allowClear
>
<Select.Option value="在线监测设备">在线监测设备</Select.Option>
<Select.Option value="API接口">API接口</Select.Option>
<Select.Option value="Excel导入">Excel导入</Select.Option>
</Select>
</Form.Item>
<Form.Item label="到期时间" name="expireDate">
<DatePicker placeholder="请选择" style={{ width: 160, borderRadius: '2px' }} />
<Form.Item name="status">
<Select
placeholder="全部状态"
style={{ width: 160, borderRadius: '2px' }}
allowClear
>
<Select.Option value="正常">正常</Select.Option>
<Select.Option value="异常">异常</Select.Option>
<Select.Option value="未校验">未校验</Select.Option>
</Select>
</Form.Item>
<Form.Item>
<Button
type="primary"
htmlType="submit"
style={{ backgroundColor: '#00D48A', borderColor: '#00D48A', color: '#fff', borderRadius: '4px' }}
style={{
backgroundColor: 'rgba(0, 212, 138, 1)',
borderColor: 'rgba(0, 212, 138, 1)',
color: '#fff',
borderRadius: '4px'
}}
>
查询
</Button>
@ -246,6 +337,7 @@ const Sjjrgl = () => {
</Form.Item>
</Form>
</div>
</div>
{/* 第二块：表格 */}
<div className={styles.tableSection}>
@ -262,22 +354,6 @@ const Sjjrgl = () => {
}}
/>
</div>
{/* 图片弹窗 */}
<Modal
open={isModalVisible}
onCancel={() => setIsModalVisible(false)}
footer={null}
closeIcon={<CloseOutlined style={{ color: '#fff', fontSize: 20 }} />}
width="auto"
centered
styles={{
mask: { backgroundColor: '#10101080' },
content: { padding: 0, background: 'transparent', boxShadow: 'none' }
}}
>
{currentImage && <img src={currentImage} alt="许可证" style={{ width: '100%', display: 'block' }} />}
</Modal>
</div>
);
};

7
src/pages/business_envInformation_monthly/components/secondary_menu/sjjrgl.less
Unescape Escape View File

@ -23,10 +23,6 @@
margin-bottom: 0;
}
.ant-form-item:nth-last-child(2) {
margin-left: auto;
}
.ant-form-item:last-child {
margin-right: 0;
}
@ -42,7 +38,8 @@
}
.ant-input::placeholder,
.ant-picker-input input::placeholder {
.ant-picker-input input::placeholder,
.ant-select-selection-placeholder {
color: #00000040;
font-size: 13px;
}

Write Preview
Loading…
Cancel
Save