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

Compare commits

base: jiangxucong:a87da3b7bb4bf72d165b883dd3b8ca6cb1c8f08a
Branches Tags
jiangxucong:main
..
compare: jiangxucong:7a48e1044294f1897c88d0b03dc5b75a0f2fb815
Branches Tags
jiangxucong:main

No commits in common. 'a87da3b7bb4bf72d165b883dd3b8ca6cb1c8f08a' and '7a48e1044294f1897c88d0b03dc5b75a0f2fb815' have entirely different histories.
a87da3b7bb ... 7a48e10442

10 changed files with 183 additions and 1180 deletions
Show Stats

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

@ -1,134 +0,0 @@
import React from 'react';
import {Button, Tree} from 'antd';
import StandardTable from '@/components/StandardTable';
import styles from './step01.less';
const treeData = [
{
title: 'xxxx部',
key: 'dept-1',
children: [
{
title: 'xxxx车间',
key: 'workshop-1',
children: [
{title: '第一车间', key: 'workshop-1-1'},
{title: '第二车间', key: 'workshop-1-2'},
],
},
],
},
];
const columns = [
{
title: '部门名称',
dataIndex: 'deptName',
key: 'deptName',
},
{
title: '车间名称',
dataIndex: 'workshopName',
key: 'workshopName',
},
{
title: '车间类型',
dataIndex: 'workshopType',
key: 'workshopType',
},
{
title: '负责人',
dataIndex: 'leader',
key: 'leader',
},
{
title: '联系方式',
dataIndex: 'phone',
key: 'phone',
},
{
title: '所属区域',
dataIndex: 'area',
key: 'area',
},
{
title: '最近一次评估时间',
dataIndex: 'lastEvaluateTime',
key: 'lastEvaluateTime',
},
];
const dataSource = {
list: [
{
key: '1',
deptName: 'xxxx部',
workshopName: '第五车间',
workshopType: '喷漆车间',
leader: '李斌',
phone: '0948-45149757',
area: '生产A区',
lastEvaluateTime: '2025-11-14 00:19:50',
},
],
pagination: {
currentPage: 1,
pageSize: 5,
total: 1,
},
};
const Step01 = () => {
return (
<div className={styles.step01Layout}>
{/* A 区域 */}
<div className={styles.leftPanel}>
{/* a 块：两个按钮 */}
<div className={styles.leftTop}>
<Button type="primary" className={styles.toggleBtn}>
车间
</Button>
<Button className={styles.toggleBtn}>设备</Button>
</div>
{/* b 块：树结构 */}
<div className={styles.leftBottom}>
<Tree
treeData={treeData}
defaultExpandAll
/>
</div>
</div>
{/* B 区域 */}
<div className={styles.rightPanel}>
{/* c 块：已选 + 下一步按钮 */}
<div className={styles.rightTop}>
<span className={styles.selectedText}>已选: 8</span>
<Button
type="primary"
className={styles.nextBtn}
>
下一步
</Button>
</div>
{/* d 块：表格区域 */}
<div className={styles.rightBottom}>
<div className={styles.tableWrapper}>
<StandardTable
rowKey="key"
columns={columns}
data={dataSource}
selectionType="checkbox"
showAlert={false}
/>
</div>
</div>
</div>
</div>
);
};
export default Step01;

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

@ -1,151 +0,0 @@
import React from 'react';
import {Button} from 'antd';
import styles from './step02.less';
const Step02 = () => {
return (
<div className={`${styles.stepContent} ${styles.step02Layout}`}>
{/* A 区域：评估方法（左侧 60%） */}
<div className={styles.leftPanel}>
{/* 可滚动内容区域 */}
<div className={styles.methodWrapper}>
{/* 参数1 */}
<div className={styles.paramBlock}>
<div className={styles.paramHeader}>
<span className={styles.paramTitle}>参数1：事故发生可能性</span>
<span className={styles.paramDesc}>（结合历史事故数据、设备状况、管理水平等，评估事故发生的几率）</span>
</div>
<div className={styles.optionRow}>
<div className={styles.optionCard}>极不可能发生<br/>0.1分</div>
<div className={`${styles.optionCard} ${styles.optionActive}`}>很不可能<br/>0.5分</div>
<div className={styles.optionCard}>偶尔发生<br/>1分</div>
<div className={styles.optionCard}>可能但不经常<br/>3分</div>
<div className={styles.optionCard}>相当可能<br/>6分</div>
<div className={styles.optionCard}>完全可能<br/>10分</div>
</div>
<div className={styles.sliderRow}>
<span className={styles.sliderLabel}>参数取值</span>
<div className={styles.sliderBar}/>
<span className={styles.sliderValue}>0.8</span>
</div>
</div>
{/* 参数2 */}
<div className={styles.paramBlock}>
<div className={styles.paramHeader}>
<span className={styles.paramTitle}>参数2：暴露于危险环境的频繁程度</span>
<span className={styles.paramDesc}>（人员或设备在危险环境中出现的频率）</span>
</div>
<div className={styles.optionRow}>
<div className={styles.optionCard}>几乎不接触<br/>0.5分</div>
<div className={styles.optionCard}>每年数次<br/>1分</div>
<div className={styles.optionCard}>每月数次<br/>2分</div>
<div className={styles.optionCard}>每周数次<br/>3分</div>
<div className={styles.optionCard}>每天一次<br/>6分</div>
<div className={styles.optionCard}>持续暴露<br/>10分</div>
</div>
<div className={styles.sliderRow}>
<span className={styles.sliderLabel}>参数取值</span>
<div className={styles.sliderBar}/>
<span className={styles.sliderValue}>0.8</span>
</div>
</div>
{/* 参数3 */}
<div className={styles.paramBlock}>
<div className={styles.paramHeader}>
<span className={styles.paramTitle}>参数3：发生事故可能造成的后果</span>
<span className={styles.paramDesc}>（对人员、设备及环境的影响程度）</span>
</div>
<div className={styles.optionRow}>
<div className={styles.optionCard}>人员轻微受伤<br/>1分</div>
<div className={styles.optionCard}>需要医疗处理<br/>3分</div>
<div className={styles.optionCard}>需住院治疗<br/>7分</div>
<div className={styles.optionCard}>致人重伤<br/>15分</div>
<div className={styles.optionCard}>多人重伤或死亡<br/>40分</div>
<div className={styles.optionCard}>多人死亡<br/>100分</div>
</div>
<div className={styles.sliderRow}>
<span className={styles.sliderLabel}>参数取值</span>
<div className={styles.sliderBar}/>
<span className={styles.sliderValue}>0.8</span>
</div>
</div>
</div>
</div>
{/* B 区域：右侧仪表盘 + 按钮 + 风险等级表 */}
<div className={styles.rightPanel}>
{/* 上块：仪表盘和公式说明 */}
<div className={styles.rightTop}>
<div className={styles.gaugePanel}>
<div className={styles.gaugeCircle}>
<span className={styles.gaugeValue}>48</span>
<span className={styles.gaugeLabel}>当前分值</span>
</div>
<div className={styles.gaugeFormula}>
D = L (x×x) × E (x×x) × C (x×x) ≈ 48
</div>
</div>
<div className={styles.suggestionPanel}>
<div className={styles.suggestionTitle}>建议措施：</div>
<div className={styles.suggestionContent}>1、需要注意。</div>
</div>
</div>
{/* 中块：下一步按钮 */}
<div className={styles.rightMiddle}>
<Button type="primary" className={styles.nextBtn}>
下一步
</Button>
</div>
{/* 下块：风险等级评判标准 */}
<div className={styles.rightBottom}>
<div className={styles.riskHeader}>风险等级评判标准</div>
<div className={styles.riskTable}>
<div className={`${styles.riskRow} ${styles.riskRowHeader}`}>
<span>风险分值</span>
<span>风险等级</span>
<span>表征颜色</span>
<span>应采取行动</span>
</div>
<div className={styles.riskRow}>
<span>{'>= 320'}</span>
<span>极其危险，重大风险</span>
<span className={`${styles.colorDot} ${styles.colorRed}`}/>
<span>立即停止作业，整改</span>
</div>
<div className={styles.riskRow}>
<span>160 ~ 320</span>
<span>高度危险，较大风险</span>
<span className={`${styles.colorDot} ${styles.colorOrange}`}/>
<span>制定期限和措施整改措施</span>
</div>
<div className={styles.riskRow}>
<span>70 ~ 159</span>
<span>显著危险，中等风险</span>
<span className={`${styles.colorDot} ${styles.colorYellow}`}/>
<span>需要关注和改进</span>
</div>
<div className={styles.riskRow}>
<span>20 ~ 69</span>
<span>一般危险，低风险</span>
<span className={`${styles.colorDot} ${styles.colorBlue}`}/>
<span>需要注意</span>
</div>
<div className={styles.riskRow}>
<span>{'< 20'}</span>
<span>可容许危险，低风险</span>
<span className={`${styles.colorDot} ${styles.colorGreen}`}/>
<span>可以接受</span>
</div>
</div>
</div>
</div>
</div>
);
};
export default Step02;

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

@ -1,95 +0,0 @@
import React from 'react';
import {Button} from 'antd';
import styles from './step03.less';
const Step03 = () => {
const now = '2025-12-15 14:50:54'; // 可后续替换为真实时间
return (
<div className={styles.stepContent}>
{/* 头部：标题 + 生成时间 */}
<div className={styles.header}>
<div className={styles.headerTitle}>风险评估报告</div>
<div className={styles.headerTime}>
生成时间：
{now}
</div>
</div>
{/* 报告主体 */}
<div className={styles.reportCard}>
{/* 基本信息行 */}
<div className={styles.row}>
<div className={styles.cellLabel}>对象名称</div>
<div className={styles.cellValue}>一车间-危险品暂存区</div>
<div className={styles.cellLabel}>对象类型</div>
<div className={styles.cellValue}>存储设施</div>
<div className={styles.cellLabel}>所属区域</div>
<div className={styles.cellValue}>生产A区</div>
<div className={styles.cellLabel}>负责人</div>
<div className={styles.cellValue}>王芳</div>
</div>
{/* 评估方法等 */}
<div className={styles.row}>
<div className={styles.cellLabel}>评估方法</div>
<div className={styles.cellValue}>LEC评价法</div>
<div className={styles.cellLabel}>风险分值计算</div>
<div className={styles.cellValue}>D = L × E × C = 3 × 6 × 40 = 720</div>
</div>
{/* L/E/C 详情 */}
<div className={styles.row}>
<div className={styles.cellLabel}>L（事故发生可能性）</div>
<div className={styles.cellValue}>
可能，但不经常
<span className={styles.cellScore}>L 分值 3分</span>
</div>
<div className={styles.cellLabel}>E（暴露频繁程度）</div>
<div className={styles.cellValue}>
每天数工作时间内的暴露
<span className={styles.cellScore}>E 分值 6分</span>
</div>
<div className={styles.cellLabel}>C（后果严重性）</div>
<div className={styles.cellValue}>
可能，但不经常死伤
<span className={styles.cellScore}>C 分值 40分</span>
</div>
</div>
{/* 综合结论 */}
<div className={styles.row}>
<div className={styles.cellLabel}>最终风险等级</div>
<div className={styles.cellValue}>重大风险</div>
</div>
<div className={styles.row}>
<div className={styles.cellLabel}>最终LEC风险说明</div>
<div className={styles.cellValue}>
根据LEC判定标准，分值≥320即为“重大风险”。
</div>
</div>
{/* 建议措施 */}
<div className={styles.row}>
<div className={styles.cellLabel}>建议措施</div>
<div className={styles.cellValue}>
<div>立即停止作业，限期整改</div>
<div>纳入重点风险管理对象，进行重点监控</div>
<div>立即启动相关应急预案并做好现场防护。</div>
</div>
</div>
{/* 底部按钮 */}
<div className={styles.footerBtns}>
<Button>上一步</Button>
<Button type="primary" className={styles.generateBtn}>
生成评估报告
</Button>
</div>
</div>
</div>
);
};
export default Step03;

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

@ -1,58 +1,13 @@
import React, { useState } from 'react';
import { Button } from 'antd';
import React from 'react';
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 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 style={{ padding: '20px', textAlign: 'center' }}>
<h2>风险评估工作台</h2>
<p>待开发...</p>
</div>
<div className={styles.contentArea}>{renderContent()}</div>
</div>
);
};

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

@ -1,83 +1,7 @@
.container {
width: 100%;
height: 100%;
background-color: #f5f5f5;
background-color: #fff;
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;
}
}

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

@ -1,226 +1,191 @@
import React, { useState } from 'react';
import { Form, Input, Button, Space, Select } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import { Form, Input, Button, DatePicker, Space, Modal } from 'antd';
import { SearchOutlined, RedoOutlined, CloseOutlined, EyeOutlined, DeleteOutlined } 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,
serialNumber: 1,
dataSourceName: 'Q3车间废水总排口COD在线监测',
type: '在线监测设备',
status: '未校验',
lastUpdateTime: '2025-11-27 05:10:34',
companyName: '北京某某环保有限公司',
permitNumber: 'PWX-BJ-2023-001',
issueOrg: '北京市生态环境局',
expireDate: '2025-12-31',
original: '已上传',
duplicate: '已上传',
},
{
key: 2,
serialNumber: 2,
dataSourceName: '危废仓库VOCs无组织排放手工记录',
type: '在线监测设备',
status: '异常',
lastUpdateTime: '2025-11-24 18:08:09',
companyName: '上海某某化工有限公司',
permitNumber: 'PWX-SH-2023-002',
issueOrg: '上海市生态环境局',
expireDate: '2025-10-15',
original: '已上传',
duplicate: '已上传',
},
{
key: 3,
serialNumber: 3,
dataSourceName: '2024年5月第三方环境检测报告数据',
type: 'API接口',
status: '正常',
lastUpdateTime: '2025-11-23 00:41:17',
companyName: '广州某某制造有限公司',
permitNumber: 'PWX-GZ-2023-003',
issueOrg: '广州市生态环境局',
expireDate: '2026-03-20',
original: '未上传',
duplicate: '已上传',
},
{
key: 4,
serialNumber: 4,
dataSourceName: '锅炉房烟气排放口 (CEMS) 数据流',
type: 'API接口',
status: '未校验',
lastUpdateTime: '2025-11-19 14:30:08',
companyName: '深圳某某电子有限公司',
permitNumber: 'PWX-SZ-2023-004',
issueOrg: '深圳市生态环境局',
expireDate: '2025-08-10',
original: '已上传',
duplicate: '未上传',
},
{
key: 5,
serialNumber: 5,
dataSourceName: '厂界噪声季度监测记录表',
type: 'Excel导入',
status: '正常',
lastUpdateTime: '2025-11-14 08:57:38',
companyName: '成都某某科技有限公司',
permitNumber: 'PWX-CD-2023-005',
issueOrg: '成都市生态环境局',
expireDate: '2026-01-25',
original: '已上传',
duplicate: '已上传',
},
{
key: 6,
serialNumber: 6,
dataSourceName: '南区污水处理站加药台账',
type: 'Excel导入',
status: '异常',
lastUpdateTime: '2025-11-10 08:34:40',
companyName: '武汉某某工业有限公司',
permitNumber: 'PWX-WH-2023-006',
issueOrg: '武汉市生态环境局',
expireDate: '2025-11-30',
original: '已上传',
duplicate: '已上传',
},
{
key: 7,
serialNumber: 7,
dataSourceName: '活性炭更换记录 (吸附装置A/B)',
type: 'API接口',
status: '未校验',
lastUpdateTime: '2025-11-08 15:56:39',
companyName: '杭州某某环保有限公司',
permitNumber: 'PWX-HZ-2023-007',
issueOrg: '杭州市生态环境局',
expireDate: '2026-05-15',
original: '未上传',
duplicate: '已上传',
},
{
key: 8,
serialNumber: 8,
dataSourceName: '活性炭更换记录 (吸附装置A/B)',
type: '在线监测设备',
status: '未校验',
lastUpdateTime: '2025-11-04 00:10:56',
companyName: '南京某某化学有限公司',
permitNumber: 'PWX-NJ-2023-008',
issueOrg: '南京市生态环境局',
expireDate: '2025-09-20',
original: '已上传',
duplicate: '已上传',
},
{
key: 9,
serialNumber: 9,
dataSourceName: '活性炭更换记录 (吸附装置A/B)',
type: '在线监测设备',
status: '异常',
lastUpdateTime: '2025-11-03 14:21:29',
companyName: '重庆某某重工有限公司',
permitNumber: 'PWX-CQ-2023-009',
issueOrg: '重庆市生态环境局',
expireDate: '2026-02-28',
original: '已上传',
duplicate: '未上传',
},
{
key: 10,
serialNumber: 10,
dataSourceName: '活性炭更换记录 (吸附装置A/B)',
type: '在线监测设备',
status: '异常',
lastUpdateTime: '2025-11-03 11:01:14',
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: '已上传',
},
]);
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: 'serialNumber',
key: 'serialNumber',
dataIndex: 'key',
key: 'key',
width: 80,
align: 'center',
},
{
title: '数据源名称',
dataIndex: 'dataSourceName',
key: 'dataSourceName',
width: 300,
title: '企业名称',
dataIndex: 'companyName',
key: 'companyName',
width: 200,
},
{
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: 'permitNumber',
key: 'permitNumber',
width: 180,
},
{
title: '状态',
dataIndex: 'status',
key: 'status',
title: '颁发机构',
dataIndex: 'issueOrg',
key: 'issueOrg',
width: 180,
},
{
title: '到期时间',
dataIndex: 'expireDate',
key: 'expireDate',
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: (status) => (
<span>
<span
style={{
display: 'inline-block',
width: 8,
height: 8,
borderRadius: '50%',
backgroundColor: getStatusColor(status),
marginRight: 8,
}}
/>
{status}
</span>
),
render: () => <a style={{ color: '#0080FF' }} onClick={() => { setCurrentImage(licence1); setIsModalVisible(true); }}>附件</a>
},
{
title: '最后更新时间',
dataIndex: 'lastUpdateTime',
key: 'lastUpdateTime',
width: 180,
title: '副本',
dataIndex: 'duplicate',
key: 'duplicate',
width: 100,
align: 'center',
render: () => <a style={{ color: '#0080FF' }} onClick={() => { setCurrentImage(licence2); setIsModalVisible(true); }}>附件</a>
},
{
title: '操作',
key: 'action',
width: 200,
width: 150,
align: 'center',
render: (_, record) => (
<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' }}
<Space size="middle">
<EyeOutlined
style={{ color: '#7ee370', fontSize: 16, cursor: 'pointer' }}
onClick={() => handleView(record)}
/>
<DeleteOutlined
style={{ color: '#ff7e72', fontSize: 16, cursor: 'pointer' }}
onClick={() => handleDelete(record)}
>
删除
</a>
/>
</Space>
),
},
@ -236,107 +201,50 @@ 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}>
<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 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 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: 'rgba(0, 212, 138, 1)',
borderColor: 'rgba(0, 212, 138, 1)',
color: '#fff',
borderRadius: '4px'
}}
>
查询
</Button>
</Form.Item>
<Form.Item>
<Button onClick={handleReset} style={{ borderRadius: '4px' }}>
重置
</Button>
</Form.Item>
</Form>
</div>
<Form form={form} layout="inline" onFinish={handleSearch}>
<Form.Item label="企业名称" name="companyName">
<Input placeholder="请输入" style={{ width: 160, borderRadius: '2px' }} />
</Form.Item>
<Form.Item label="许可证号" name="permitNumber">
<Input placeholder="请输入" style={{ width: 160, borderRadius: '2px' }} />
</Form.Item>
<Form.Item label="到期时间" name="expireDate">
<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>
{/* 第二块：表格 */}
@ -354,6 +262,22 @@ 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,6 +23,10 @@
margin-bottom: 0;
}
.ant-form-item:nth-last-child(2) {
margin-left: auto;
}
.ant-form-item:last-child {
margin-right: 0;
}
@ -38,8 +42,7 @@
}
.ant-input::placeholder,
.ant-picker-input input::placeholder,
.ant-select-selection-placeholder {
.ant-picker-input input::placeholder {
color: #00000040;
font-size: 13px;
}

87
src/pages/business_envInformation_monthly/components/secondary_menu/step01.less
Unescape Escape View File

@ -1,87 +0,0 @@
.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;
}
}
}

261
src/pages/business_envInformation_monthly/components/secondary_menu/step02.less
Unescape Escape View File

@ -1,261 +0,0 @@
.stepContent {
width: 100%;
height: 100%;
box-sizing: border-box;
padding: 12px 16px;
/* 根容器同时挂了 stepContent + step02Layout 两个类，这里用 &.step02Layout 做层级组织 */
&.step02Layout {
width: 100%;
height: 100%;
display: flex;
gap: 10px;
background-color: #f5f6fa;
/* 左侧 A 区域：评估方法（60% 宽度） */
.leftPanel {
width: 60%;
height: 100%;
background-color: #ffffff;
border-radius: 4px;
padding: 16px;
box-sizing: border-box;
overflow: auto;
.methodWrapper {
display: flex;
flex-direction: column;
gap: 16px;
.paramBlock {
background-color: #fafafa;
border-radius: 4px;
padding: 12px 16px;
.paramHeader {
margin-bottom: 12px;
font-size: 13px;
.paramTitle {
font-weight: 600;
margin-right: 8px;
}
.paramDesc {
color: #888;
}
}
.optionRow {
display: flex;
gap: 10px;
margin-bottom: 12px;
.optionCard {
flex: 1;
min-width: 0;
background-color: #ffffff;
border-radius: 4px;
border: 1px solid #e5e5e5;
text-align: center;
padding: 8px 4px;
font-size: 12px;
line-height: 18px;
cursor: pointer;
&.optionActive {
border-color: #00d48a;
background-color: rgba(0, 212, 138, 0.08);
color: #00a066;
}
}
}
.sliderRow {
display: flex;
align-items: center;
gap: 8px;
.sliderLabel {
font-size: 12px;
color: #666;
}
.sliderBar {
flex: 1;
height: 4px;
border-radius: 2px;
background: linear-gradient(90deg, #00d48a 0%, #00d48a 40%, #e5e5e5 40%);
}
.sliderValue {
width: 40px;
text-align: right;
font-size: 12px;
color: #333;
}
}
}
}
}
/* 右侧 B 区域：仪表盘 + 下一步 + 风险等级表 */
.rightPanel {
flex: 1;
height: 100%;
display: flex;
flex-direction: column;
gap: 10px;
/* 上块：仪表盘与建议 */
.rightTop {
background-color: #ffffff;
border-radius: 4px;
padding: 16px;
box-sizing: border-box;
display: flex;
gap: 16px;
.gaugePanel {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.gaugeCircle {
width: 200px;
height: 200px;
border-radius: 50%;
border: 16px solid #e5f9f3;
border-top-color: #00d48a;
border-right-color: #00d48a;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: #333;
.gaugeValue {
font-size: 40px;
font-weight: 600;
}
.gaugeLabel {
font-size: 14px;
margin-top: 4px;
}
}
.gaugeFormula {
margin-top: 12px;
font-size: 12px;
color: #666;
}
}
.suggestionPanel {
width: 260px;
background-color: #f8f9ff;
border-radius: 4px;
padding: 12px 16px;
font-size: 13px;
box-sizing: border-box;
.suggestionTitle {
font-weight: 600;
margin-bottom: 6px;
}
.suggestionContent {
color: #555;
}
}
}
/* 中块：下一步按钮 */
.rightMiddle {
background-color: #ffffff;
border-radius: 4px;
padding: 12px 16px;
box-sizing: border-box;
display: flex;
justify-content: flex-end;
.nextBtn {
min-width: 120px;
background-color: #00d48a !important;
border-color: #00d48a !important;
}
}
/* 下块：风险等级评判标准 */
.rightBottom {
background-color: #ffffff;
border-radius: 4px;
padding: 16px;
box-sizing: border-box;
display: flex;
flex-direction: column;
gap: 12px;
.riskHeader {
font-weight: 600;
}
.riskTable {
border: 1px solid #e5e5e5;
border-radius: 4px;
overflow: hidden;
font-size: 12px;
.riskRow {
display: grid;
grid-template-columns: 120px 180px 80px auto;
align-items: center;
padding: 6px 12px;
border-top: 1px solid #f0f0f0;
&.riskRowHeader {
background-color: #fafafa;
font-weight: 600;
}
&:first-child {
border-top: none;
}
.colorDot {
display: inline-block;
width: 16px;
height: 8px;
border-radius: 4px;
&.colorRed {
background-color: #ff4d4f;
}
&.colorOrange {
background-color: #fa8c16;
}
&.colorYellow {
background-color: #fadb14;
}
&.colorBlue {
background-color: #40a9ff;
}
&.colorGreen {
background-color: #52c41a;
}
}
}
}
}
}
}
}

75
src/pages/business_envInformation_monthly/components/secondary_menu/step03.less
Unescape Escape View File

@ -1,75 +0,0 @@
.stepContent {
width: 100%;
height: 100%;
padding: 16px 20px;
box-sizing: border-box;
background-color: #f5f6fa;
.header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
.headerTitle {
font-size: 18px;
font-weight: 600;
}
.headerTime {
font-size: 12px;
color: #666;
}
}
.reportCard {
background-color: #fff;
border-radius: 4px;
padding: 16px 20px;
box-sizing: border-box;
display: flex;
flex-direction: column;
gap: 8px;
font-size: 13px;
.row {
display: grid;
grid-template-columns: 100px 1fr 100px 1fr 100px 1fr 100px 1fr;
column-gap: 8px;
row-gap: 6px;
padding: 4px 0;
border-top: 1px solid #f3f3f3;
&:first-child {
border-top: none;
}
.cellLabel {
font-weight: 600;
color: #333;
}
.cellValue {
color: #555;
.cellScore {
margin-left: 8px;
color: #999;
}
}
}
.footerBtns {
margin-top: 24px;
display: flex;
justify-content: center;
gap: 16px;
.generateBtn {
min-width: 140px;
background-color: #00d48a;
border-color: #00d48a;
}
}
}
}
Write Preview
Loading…
Cancel
Save