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

责任

Browse Source
main
wangyunfei 3 weeks ago
parent 5e306ed938
commit 5f2b02043c
3 changed files with 391 additions and 214 deletions
Show Stats Download Patch File Download Diff File

5
src/pages/safe_majorHazard/SafeMajorHazardList.js
Unescape Escape View File

@ -6,17 +6,12 @@ import OnlineMonitoring from './module/OnlineMonitoring'; //在线监测预警
import RiskAssessment from './module/RiskAssessment'; //风险管控
import EvaluationReport from './module/EvaluationReport'; //评估报告
const SafeMajorHazardList = () => {
const [activeModule, setActiveModule] = useState('responsibility');
const handleModuleClick = (module) => {
setActiveModule(module)
}
const renderModule = () => {
switch (activeModule) {
case 'responsibility':

499
src/pages/safe_majorHazard/module/ResponsibilityImplementation.js
Unescape Escape View File

@ -1,114 +1,345 @@
import React from 'react';
import { Card, Result, Timeline,Statistic, Table,Row, Input,Button,Col, Select} from 'antd';
import { ExportOutlined } from '@ant-design/icons';
import React from 'react';
import { Card, Result, Timeline, Statistic, Table, Row, Input, Button, Col, Select } from 'antd';
import { ExportOutlined, PlusOutlined } from '@ant-design/icons';
import StandardTable from '@/components/StandardTable';
import ReactECharts from 'echarts-for-react';
import styles from './ResponsibilityImplementation.less';
import timer_shaft from '@/assets/basic_information/timer_shaft.png'
const ResponsibilityImplementation = () => {
const ResponsibilityImplementation = () => {
const columns = [
{
title:"编号",
dataIndex:"id",
key:"id",
width:60,
title: "编号",
dataIndex: "id",
key: "id",
width: 50,
},
{
title:"责任区域",
dataIndex:"zrqy",
key:"zrqy",
width:120,
title: "责任区域",
dataIndex: "zrqy",
key: "zrqy",
width: 80,
},
{
title:"设备型号",
dataIndex:"sbxh",
key:"sbxh",
width:120,
title: "设备型号",
dataIndex: "sbxh",
key: "sbxh",
width: 120,
},
{
title:"危险源类型",
dataIndex:"wxlylx",
key:"wxlylx",
width:120,
title: "危险源类型",
dataIndex: "wxlylx",
key: "wxlylx",
width: 110,
},
{
title:"责任人",
dataIndex:"zrr",
key:"zrr",
width:120,
title: "责任人",
dataIndex: "zrr",
key: "zrr",
width: 80,
},
{
title:"联系方式",
dataIndex:"lxfs",
key:"lxfs",
width:120,
title: "电话",
dataIndex: "lxfs",
key: "lxfs",
width: 120,
},
{
title:"巡检频率",
dataIndex:"xjpl",
key:"xjpl",
width:120,
title: "巡检频率",
dataIndex: "xjpl",
key: "xjpl",
width: 120,
},
{
title:"最近巡检",
dataIndex:"zjxj",
key:"zjxj",
width:120,
title: "最近巡检",
dataIndex: "zjxj",
key: "zjxj",
width: 120,
},
{
title:"状态",
dataIndex:"zt",
key:"zt",
width:120,
title: "状态",
dataIndex: "zt",
key: "zt",
width: 90,
render: (text) => {
const statusMap = {
'正常': { color: '#44BB5F', bg: '#D8F7DE' },
'待巡检': { color: '#FFC405', bg: '#FFF6DA' },
'需处理': { color: '#FF2526', bg: '#FCEAEA' }
};
const status = statusMap[text] || { color: '#333', bg: '#F5F5F5' };
return (
<span style={{
color: status.color,
backgroundColor: status.bg,
padding: '2px 8px',
borderRadius: '4px',
fontSize: '12px'
}}>
{text}
</span>
);
}
},
{
title:"操作",
dataIndex:"cz",
key:"cz",
width:120,
render: (text, record) => { // ======== 渲染操作列 ========
const handleView = (record) => { // ======== 定义查看函数 ========
console.log('查看记录:', record); // ======== 打印记录信息到控制台 ========
// 这里可以添加查看详情的逻辑 // ======== 注释：可以添加查看详情的逻辑 ========
}; // ======== 函数结束 ========
title: "操作",
dataIndex: "cz",
key: "cz",
width: 120,
render: (text, record) => {
const handleView = (record) => {
console.log('查看记录:', record);
};
return ( // ======== 返回按钮组件 ========
<Button type="link" onClick={() => handleView(record)}>查看</Button> // ======== 查看按钮，点击时调用handleView函数 ========
); // ======== return语句结束 ========
} // ======== render函数结束 ========
const handleEdit = (record) => {
console.log('编辑记录:', record);
};
return (
<div>
<Button
type="link"
onClick={() => handleView(record)}
style={{ color: '#2E4CD4' }}
>
查看
</Button>
<Button
type="link"
onClick={() => handleEdit(record)}
style={{ color: '#2E4CD4' }}
>
编辑
</Button>
</div>
);
}
}
];
// 12条写死数据
const tableData = [
{
key: '1',
id: '01',
zrqy: '储罐区A',
sbxh: '130910180007',
wxlylx: '易燃易爆品存储',
zrr: '陈安心',
lxfs: '152****7754',
xjpl: '每日两次',
zjxj: '2025-06-08 13:34',
zt: '正常'
},
{
key: '2',
id: '02',
zrqy: '储罐区A',
sbxh: '130910180007',
wxlylx: '易燃易爆品存储',
zrr: '陈安心',
lxfs: '152****7754',
xjpl: '每日两次',
zjxj: '2025-06-08 13:34',
zt: '待巡检'
},
{
key: '3',
id: '03',
zrqy: '储罐区A',
sbxh: '130910180007',
wxlylx: '易燃易爆品存储',
zrr: '陈安心',
lxfs: '152****7754',
xjpl: '每日两次',
zjxj: '2025-06-08 13:34',
zt: '需处理'
},
{
key: '4',
id: '04',
zrqy: '储罐区A',
sbxh: '130910180007',
wxlylx: '易燃易爆品存储',
zrr: '陈安心',
lxfs: '152****7754',
xjpl: '每日两次',
zjxj: '2025-06-08 13:34',
zt: '正常'
},
{
key: '5',
id: '05',
zrqy: '储罐区A',
sbxh: '130910180007',
wxlylx: '易燃易爆品存储',
zrr: '陈安心',
lxfs: '152****7754',
xjpl: '每日两次',
zjxj: '2025-06-08 13:34',
zt: '待巡检'
},
{
key: '6',
id: '06',
zrqy: '储罐区A',
sbxh: '130910180007',
wxlylx: '易燃易爆品存储',
zrr: '陈安心',
lxfs: '152****7754',
xjpl: '每日两次',
zjxj: '2025-06-08 13:34',
zt: '需处理'
},
{
key: '7',
id: '07',
zrqy: '储罐区A',
sbxh: '130910180007',
wxlylx: '易燃易爆品存储',
zrr: '陈安心',
lxfs: '152****7754',
xjpl: '每日两次',
zjxj: '2025-06-08 13:34',
zt: '正常'
},
{
key: '8',
id: '08',
zrqy: '储罐区A',
sbxh: '130910180007',
wxlylx: '易燃易爆品存储',
zrr: '陈安心',
lxfs: '152****7754',
xjpl: '每日两次',
zjxj: '2025-06-08 13:34',
zt: '待巡检'
},
{
key: '9',
id: '09',
zrqy: '储罐区A',
sbxh: '130910180007',
wxlylx: '易燃易爆品存储',
zrr: '陈安心',
lxfs: '152****7754',
xjpl: '每日两次',
zjxj: '2025-06-08 13:34',
zt: '需处理'
},
{
key: '10',
id: '10',
zrqy: '储罐区A',
sbxh: '130910180007',
wxlylx: '易燃易爆品存储',
zrr: '陈安心',
lxfs: '152****7754',
xjpl: '每日两次',
zjxj: '2025-06-08 13:34',
zt: '正常'
},
{
key: '11',
id: '11',
zrqy: '储罐区A',
sbxh: '130910180007',
wxlylx: '易燃易爆品存储',
zrr: '陈安心',
lxfs: '152****7754',
xjpl: '每日两次',
zjxj: '2025-06-08 13:34',
zt: '待巡检'
},
{
key: '12',
id: '12',
zrqy: '储罐区A',
sbxh: '130910180007',
wxlylx: '易燃易爆品存储',
zrr: '陈安心',
lxfs: '152****7754',
xjpl: '每日两次',
zjxj: '2025-06-08 13:34',
zt: '需处理'
}
];
// 生成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 (
<div className={styles.containerR}>
<div className={styles.containerOne}>
// 雷达图配置方法
const getRadarChartOption = () => {
return {
radar: {
indicator: [
{ name: '{a|问题处理率} {b|85%}', max: 100, nameLocation: 'start', nameGap: -60 },
{ name: '{a|隐患整改率} {b|15%}', max: 100, nameGap: 20 },
{ name: '{a|履职频次} {b|92%}', max: 100, nameGap: 20 }
],
center: ['50%', '60%'],
radius: 48,
splitNumber: 4,
shape: 'polygon',
axisName: {
rich: {
a: {
color: '#333',
fontSize: 12,
fontWeight: 400,
},
b: {
color: '#2E4CD4',
fontSize: 12,
fontWeight: 400,
}
}
},
splitLine: {
lineStyle: {
color: ['#BFCBFF']
}
},
splitArea: {
areaStyle: {
color: ['#fff']
}
},
axisLine: {
lineStyle: {
color: '#E6EAF5'
}
}
},
series: [{
type: 'radar',
data: [
{
value: [85, 15, 92],
areaStyle: {
color: '#499BFF'
},
lineStyle: {
color: '#1269FF',
width: 2
},
symbol: 'circle',
symbolSize: 6,
itemStyle: {
color: '#2E4CD4',
borderColor: '#fff',
borderWidth: 2
}
}
]
}]
}
};
return (
<div className={styles.containerR}>
<div className={styles.containerOne}>
<div className={styles.containerOneLeft}>
{/* 第一块：蓝色块 + 标题 履职时间轴 */}
<div className={styles.leftTopSection}>
@ -121,10 +352,10 @@ const ResponsibilityImplementation = () => {
<div style={{ marginTop: '15px' }}>
<img src={timer_shaft} alt="时间轴" style={{ width: '100%', height: 'auto' }} />
</div>
</div>
</div>
<div className={styles.containerOneRight}>
{/* 第一块：标题 + 下拉选择框 + 导出按钮 */}
<div className={styles.rightTopSection}>
@ -150,8 +381,8 @@ const ResponsibilityImplementation = () => {
/>
</div>
<div className={styles.rightTopRight}>
<Button
type="primary"
<Button
type="primary"
className={styles.exportBtn}
icon={<ExportOutlined />}
>
@ -159,26 +390,28 @@ const ResponsibilityImplementation = () => {
</Button>
</div>
</div>
{/* 第二块：重叠图片和div */}
{/* 第二块：雷达图 */}
<div className={styles.rightBottomSection}>
<div className={styles.overlayContainer}>
{/* 背景图片1 */}
<div className={styles.backgroundImage1}>
<div className={styles.placeholderText}>占位图片1</div>
</div>
{/* 背景图片2 */}
<div className={styles.backgroundImage2}>
<div className={styles.placeholderText}>占位图片2</div>
</div>
{/* 重叠的div元素 */}
<div className={styles.overlayDiv1}>待开发123</div>
<div className={styles.overlayDiv2}>待开发123</div>
<div className={styles.overlayDiv3}>待开发123</div>
<div style={{
width: '100%',
height: '100%',
display: 'flex',
// backgroundColor: 'red',
alignItems: 'center',
justifyContent: 'center',
position: 'relative',
// padding: '20px'
}}>
<ReactECharts
option={getRadarChartOption()}
style={{ width: '100%', height: '100%' }}
opts={{ renderer: 'canvas' }}
/>
</div>
</div>
</div>
</div>
</div>
<div className={styles.containerTwo}>
{/* 第一个大块：标题 */}
@ -188,37 +421,63 @@ const ResponsibilityImplementation = () => {
<div>重大危险源安全包信息库</div>
</div>
</div>
{/* 第二个大块：搜索和按钮 */}
<div className={styles.containerTwoActions}>
<div className={styles.searchSection}>
<Input placeholder="搜索危险源编号" />
<Input.Search
placeholder="搜索危险源编号..."
style={{ fontSize: '12px', width:'220px' }}
/>
</div>
<div className={styles.buttonSection}>
<Button>新增责任人</Button>
<Button>导出清单</Button>
<Button
icon={<PlusOutlined />}
style={{
color: '#2E4CD4',
backgroundColor: 'transparent',
borderColor: '#DFE4F6',
fontSize: '12px'
}}
>
新增责任人
</Button>
<Button
icon={<ExportOutlined />}
style={{
color: '#2E4CD4',
backgroundColor: 'transparent',
borderColor: '#DFE4F6',
fontSize: '12px'
}}
>
导出清单
</Button>
</div>
</div>
{/* 第三个大块：表格 */}
<div className={styles.containerTwoTable}>
<StandardTable
columns={columns} // ======== 表格列配置 ========
data={{ // ======== 数据对象，包含list和pagination ========
list: tableData, // ======== 表格数据列表 ========
pagination: { // ======== 分页配置 ========
currentPage: 1, // ======== 当前页码 ========
pageSize: 5, // ======== 每页显示10条数据 ========
total: tableData.length, // ======== 总数据条数 ========
} // ======== 分页配置结束 ========
}} // ======== 数据对象结束 ========
selectedRows={[]} // ======== 选中的行数据，初始为空数组 ========
onSelectRow={() => {}} // ======== 行选择事件处理函数 ========
onChange={() => {}} // ======== 表格变化事件处理函数 ========
/>
columns={columns}
data={{
list: tableData,
pagination: {
currentPage: 1,
pageSize: 5,
total: tableData.length,
showTotal: (total, range) => `共 ${total} 条数据`,
showSizeChanger: false,
jumpText: '前往',
}
}}
selectedRows={[]}
onSelectRow={() => { }}
onChange={() => { }}
/>
</div>
</div>
</div>
);
};
</div>
);
};
export default ResponsibilityImplementation;

101
src/pages/safe_majorHazard/module/ResponsibilityImplementation.less
Unescape Escape View File

@ -49,7 +49,7 @@
width:42%;
display: flex;
flex-direction: column;
padding: 15px;
padding:15px 15px 0px 15px;
border: 1px solid #f0f0f0;
border-radius: 4px;
@ -103,94 +103,14 @@
display: flex;
align-items: center;
justify-content: center;
.overlayContainer {
position: relative;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
.backgroundImage1 {
position: absolute;
top: 10px;
left: 10px;
width: 60%;
height: 60%;
background-color: #e6f7ff;
border: 2px solid #91d5ff;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
z-index: 1;
.placeholderText {
font-size: 12px;
color: #1890ff;
font-weight: 500;
}
}
.backgroundImage2 {
position: absolute;
bottom: 10px;
right: 10px;
width: 50%;
height: 50%;
background-color: #f6ffed;
border: 2px solid #b7eb8f;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
z-index: 1;
.placeholderText {
font-size: 12px;
color: #52c41a;
font-weight: 500;
// 调整雷达图标签位置
:global(.echarts-for-react) {
:global(.echarts) {
:global(.echarts-axis-name) {
transform: translateY(10px) !important;
}
}
.overlayDiv1 {
position: absolute;
top: 20px;
right: 20px;
background-color: rgba(255, 77, 79, 0.8);
color: white;
padding: 8px 12px;
border-radius: 4px;
font-size: 12px;
z-index: 3;
}
.overlayDiv2 {
position: absolute;
bottom: 30px;
left: 30px;
background-color: rgba(82, 196, 26, 0.8);
color: white;
padding: 8px 12px;
border-radius: 4px;
font-size: 12px;
z-index: 3;
}
.overlayDiv3 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: rgba(24, 144, 255, 0.8);
color: white;
padding: 10px 16px;
border-radius: 6px;
font-size: 14px;
font-weight: 500;
z-index: 3;
}
}
}
}
@ -253,10 +173,10 @@
gap: 8px;
:global(.ant-btn) {
height: 32px;
height: 28px;
padding: 0 16px;
border-radius: 4px;
font-size: 14px;
font-size: 12px;
border: 1px solid #d9d9d9;
background-color: #fff;
color: #333;
@ -296,12 +216,15 @@
padding: 8px 12px;
border-bottom: 1px solid #f0f0f0;
text-align: center;
color: #666666;
font-size: 12px;
}
:global(.ant-table-tbody > tr:hover > td) {
background-color: #f5f5f5;
}
:global(.ant-pagination) {
margin-top: 16px;
text-align: right;

Write Preview
Loading…
Cancel
Save