From c0141e56cf0d3f8c4aed913f786750235d0d163a Mon Sep 17 00:00:00 2001 From: wangyunfei <1224056307@qq,com> Date: Tue, 23 Sep 2025 17:18:57 +0800 Subject: [PATCH] =?UTF-8?q?=E8=B4=A3=E4=BB=BB=E8=90=BD=E5=AE=9E=E9=A1=B5?= =?UTF-8?q?=E9=9D=A2=E5=BC=80=E5=8F=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../safe_majorHazard/SafeMajorHazardList.js | 30 ++-- .../safe_majorHazard/SafeMajorHazardList.less | 18 +- .../module/EvaluationReport.js | 6 +- .../module/OnlineMonitoring.js | 2 +- .../module/ResponsibilityImplementation.js | 156 ++++++++++++++++-- .../module/ResponsibilityImplementation.less | 30 ++++ .../safe_majorHazard/module/RiskAssessment.js | 2 +- 7 files changed, 204 insertions(+), 40 deletions(-) create mode 100644 src/pages/safe_majorHazard/module/ResponsibilityImplementation.less diff --git a/src/pages/safe_majorHazard/SafeMajorHazardList.js b/src/pages/safe_majorHazard/SafeMajorHazardList.js index 866d116..a887d7c 100644 --- a/src/pages/safe_majorHazard/SafeMajorHazardList.js +++ b/src/pages/safe_majorHazard/SafeMajorHazardList.js @@ -32,25 +32,29 @@ const SafeMajorHazardList = () => { }; - return ( + return (
- - - - + + +
{renderModule()} diff --git a/src/pages/safe_majorHazard/SafeMajorHazardList.less b/src/pages/safe_majorHazard/SafeMajorHazardList.less index d353ec3..66a34fa 100644 --- a/src/pages/safe_majorHazard/SafeMajorHazardList.less +++ b/src/pages/safe_majorHazard/SafeMajorHazardList.less @@ -1,15 +1,15 @@ .container { - background-color: pink; - // background-color: transparent; + background-color: transparent; width: 100%; height: 89vh; overflow: hidden; + display: flex; + flex-direction: column; .TopButton { display: flex; gap: 24px; margin-left: 6px; - background-color: red; .TopButtonItem { background-color: transparent !important; @@ -26,12 +26,22 @@ border: none !important; } - &:active, &:focus { background-color: #2E4CD4 !important; color: #fff !important; } + + &.active { + background-color: #2E4CD4 !important; + color: #fff !important; + } } } + .content { + // ======== 内容区域样式 ======== + flex: 1; // ======== 占据剩余空间 ======== + overflow-y: auto; // ======== 允许垂直滚动 ======== + padding: 0; // ======== 无内边距 ======== + } } \ No newline at end of file diff --git a/src/pages/safe_majorHazard/module/EvaluationReport.js b/src/pages/safe_majorHazard/module/EvaluationReport.js index 593239c..b6297cc 100644 --- a/src/pages/safe_majorHazard/module/EvaluationReport.js +++ b/src/pages/safe_majorHazard/module/EvaluationReport.js @@ -3,14 +3,14 @@ import { Card, Result } from 'antd'; // ======== 导入Ant Design的Card和Resu const EvaluationReport = () => { // ======== 定义评估报告及隐患处理组件函数 ======== return ( // ======== 返回JSX结构 ======== -
// ======== 外层容器，设置24px内边距 ======== - // ======== Card组件，标题为"评估报告及隐患处理"，最小高度400px ======== +
// ======== 外层容器，设置24px内边距 ======== + // ======== Card组件，标题为"评估报告及隐患处理"，高度为父级100% ======== // ======== Result组件结束 ======== - // ======== Card组件结束 ======== +
// ======== 外层容器结束 ======== ); // ======== return语句结束 ======== }; // ======== 组件函数结束 ======== diff --git a/src/pages/safe_majorHazard/module/OnlineMonitoring.js b/src/pages/safe_majorHazard/module/OnlineMonitoring.js index 059ccad..874ff58 100644 --- a/src/pages/safe_majorHazard/module/OnlineMonitoring.js +++ b/src/pages/safe_majorHazard/module/OnlineMonitoring.js @@ -5,7 +5,7 @@ import { Card, Result } from 'antd'; // ======== 导入Ant Design的Card和Resu const OnlineMonitoring = () => { // ======== 定义在线监测预警组件函数 ======== return ( // ======== 返回JSX结构 ========
// ======== 外层容器，设置24px内边距 ======== - // ======== Card组件，标题为"在线监测预警"，最小高度400px ======== + // ======== Card组件，标题为"在线监测预警"，高度为父级100% ======== { // ======== 定义责任落实组件函数 ======== - return ( // ======== 返回JSX结构 ======== -
// ======== 外层容器，设置24px内边距 ======== - // ======== Card组件，标题为"责任落实"，最小高度400px ======== - // ======== Result组件结束 ======== - // ======== Card组件结束 ======== -
// ======== 外层容器结束 ======== - ); // ======== return语句结束 ======== -}; // ======== 组件函数结束 ======== - -export default ResponsibilityImplementation; // ======== 导出组件供其他文件使用 ======== +import React from 'react'; +import { Card, Result, Timeline,Statistic, Table,Row, Input,Button,Col} from 'antd'; +import StandardTable from '@/components/StandardTable'; +import styles from './ResponsibilityImplementation.less'; + + + +const ResponsibilityImplementation = () => { + + const columns = [ + { + title:"编号", + dataIndex:"id", + key:"id", + width:60, + }, + { + title:"责任区域", + dataIndex:"zrqy", + key:"zrqy", + width:120, + }, + { + title:"设备型号", + dataIndex:"sbxh", + key:"sbxh", + width:120, + }, + { + title:"危险源类型", + dataIndex:"wxlylx", + key:"wxlylx", + width:120, + }, + { + title:"责任人", + dataIndex:"zrr", + key:"zrr", + width:120, + }, + { + title:"联系方式", + dataIndex:"lxfs", + key:"lxfs", + width:120, + }, + { + title:"巡检频率", + dataIndex:"xjpl", + key:"xjpl", + width:120, + }, + { + title:"最近巡检", + dataIndex:"zjxj", + key:"zjxj", + width:120, + }, + { + title:"状态", + dataIndex:"zt", + key:"zt", + width:120, + }, + { + title:"操作", + dataIndex:"cz", + key:"cz", + width:120, + render: (text, record) => { // ======== 渲染操作列 ======== + const handleView = (record) => { // ======== 定义查看函数 ======== + console.log('查看记录:', record); // ======== 打印记录信息到控制台 ======== + // 这里可以添加查看详情的逻辑 // ======== 注释：可以添加查看详情的逻辑 ======== + }; // ======== 函数结束 ======== + + return ( // ======== 返回按钮组件 ======== + // ======== 查看按钮，点击时调用handleView函数 ======== + ); // ======== return语句结束 ======== + } // ======== render函数结束 ======== + } + ]; + + // 生成20条假数据 + const generateMockData = () => { // ======== 定义生成假数据的函数 ======== + const data = []; // ======== 创建空数组存储数据 ======== + const areas = ['生产车间A区', '生产车间B区', '储罐区', '配电室', '锅炉房', '化学品仓库', '实验室', '办公区']; // ======== 责任区域选项 ======== + const devices = ['压力容器', '储罐', '反应釜', '压缩机', '泵类设备', '电气设备', '管道系统', '安全阀']; // ======== 设备型号选项 ======== + const statuses = ['正常', '维护中', '故障', '停用', '检修']; // ======== 状态选项 ======== + const names = ['张三', '李四', '王五', '赵六', '孙七', '周八', '吴九', '郑十', '钱十一', '陈十二']; // ======== 责任人姓名选项 ======== + + for (let i = 1; i <= 20; i++) { // ======== 循环生成20条数据 ======== + data.push({ // ======== 添加一条数据到数组 ======== + key: i.toString(), // ======== 唯一标识 ======== + id: `WX${String(i).padStart(3, '0')}`, // ======== 编号：WX001, WX002... ======== + zrqy: areas[Math.floor(Math.random() * areas.length)], // ======== 随机选择责任区域 ======== + sbxh: devices[Math.floor(Math.random() * devices.length)], // ======== 随机选择设备型号 ======== + zrr: names[Math.floor(Math.random() * names.length)], // ======== 随机选择责任人 ======== + zt: statuses[Math.floor(Math.random() * statuses.length)], // ======== 随机选择状态 ======== + }); // ======== 数据对象结束 ======== + } // ======== 循环结束 ======== + return data; // ======== 返回生成的数据数组 ======== + }; // ======== 函数结束 ======== + + const tableData = generateMockData(); // ======== 调用函数生成假数据 ======== + + return ( +
+
+
1
+
2
+
+ +
+
重大危险源安全包信息库
+
+ + + + {}} // ======== 行选择事件处理函数 ======== + onChange={() => {}} // ======== 表格变化事件处理函数 ======== + /> +
+
+
+ ); +}; +export default ResponsibilityImplementation; diff --git a/src/pages/safe_majorHazard/module/ResponsibilityImplementation.less b/src/pages/safe_majorHazard/module/ResponsibilityImplementation.less new file mode 100644 index 0000000..2c9c433 --- /dev/null +++ b/src/pages/safe_majorHazard/module/ResponsibilityImplementation.less @@ -0,0 +1,30 @@ +.containerR { + padding: 8px 6px; + height: 100%; + display: flex; + flex-direction: column; + + .containerOne { + height: 30%; + display: flex; + margin-bottom: 12px; + background-color: aqua; + gap: 12px; + + .containerOneLeft{ + background-color: #999; + width:58%; + // margin-right: 12px; + } + .containerOneRight{ + background-color: #999; + width:42%; + } + } + + + .containerTwo{ + flex: 1; + background-color: blue; + } +} \ No newline at end of file diff --git a/src/pages/safe_majorHazard/module/RiskAssessment.js b/src/pages/safe_majorHazard/module/RiskAssessment.js index cd00a05..d77d7c4 100644 --- a/src/pages/safe_majorHazard/module/RiskAssessment.js +++ b/src/pages/safe_majorHazard/module/RiskAssessment.js @@ -5,7 +5,7 @@ import { Card, Result } from 'antd'; // ======== 导入Ant Design的Card和Resu const RiskAssessment = () => { // ======== 定义风险管控组件函数 ======== return ( // ======== 返回JSX结构 ========
// ======== 外层容器，设置24px内边距 ======== - // ======== Card组件，标题为"风险管控"，最小高度400px ======== + // ======== Card组件，标题为"风险管控"，高度为父级100% ========