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 RiskAssessment from './module/RiskAssessment'; //风险管控
import EvaluationReport from './module/EvaluationReport'; //评估报告 import EvaluationReport from './module/EvaluationReport'; //评估报告
const SafeMajorHazardList = () => { const SafeMajorHazardList = () => {
const [activeModule, setActiveModule] = useState('responsibility'); const [activeModule, setActiveModule] = useState('responsibility');
const handleModuleClick = (module) => { const handleModuleClick = (module) => {
setActiveModule(module) setActiveModule(module)
} }
const renderModule = () => { const renderModule = () => {
switch (activeModule) { switch (activeModule) {
case 'responsibility': case 'responsibility':

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

@ -1,8 +1,9 @@
import React from 'react'; import React from 'react';
import { Card, Result, Timeline,Statistic, Table,Row, Input,Button,Col, Select} from 'antd'; import { Card, Result, Timeline, Statistic, Table, Row, Input, Button, Col, Select } from 'antd';
import { ExportOutlined } from '@ant-design/icons'; import { ExportOutlined, PlusOutlined } from '@ant-design/icons';
import StandardTable from '@/components/StandardTable'; import StandardTable from '@/components/StandardTable';
import ReactECharts from 'echarts-for-react';
import styles from './ResponsibilityImplementation.less'; import styles from './ResponsibilityImplementation.less';
import timer_shaft from '@/assets/basic_information/timer_shaft.png' import timer_shaft from '@/assets/basic_information/timer_shaft.png'
@ -12,99 +13,329 @@ const ResponsibilityImplementation = () => {
const columns = [ const columns = [
{ {
title:"编号", title: "编号",
dataIndex:"id", dataIndex: "id",
key:"id", key: "id",
width:60, width: 50,
}, },
{ {
title:"责任区域", title: "责任区域",
dataIndex:"zrqy", dataIndex: "zrqy",
key:"zrqy", key: "zrqy",
width:120, width: 80,
}, },
{ {
title:"设备型号", title: "设备型号",
dataIndex:"sbxh", dataIndex: "sbxh",
key:"sbxh", key: "sbxh",
width:120, width: 120,
}, },
{ {
title:"危险源类型", title: "危险源类型",
dataIndex:"wxlylx", dataIndex: "wxlylx",
key:"wxlylx", key: "wxlylx",
width:120, width: 110,
}, },
{ {
title:"责任人", title: "责任人",
dataIndex:"zrr", dataIndex: "zrr",
key:"zrr", key: "zrr",
width:120, width: 80,
}, },
{ {
title:"联系方式", title: "电话",
dataIndex:"lxfs", dataIndex: "lxfs",
key:"lxfs", key: "lxfs",
width:120, width: 120,
}, },
{ {
title:"巡检频率", title: "巡检频率",
dataIndex:"xjpl", dataIndex: "xjpl",
key:"xjpl", key: "xjpl",
width:120, width: 120,
}, },
{ {
title:"最近巡检", title: "最近巡检",
dataIndex:"zjxj", dataIndex: "zjxj",
key:"zjxj", key: "zjxj",
width:120, width: 120,
}, },
{ {
title:"状态", title: "状态",
dataIndex:"zt", dataIndex: "zt",
key:"zt", key: "zt",
width:120, 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:"操作", title: "操作",
dataIndex:"cz", dataIndex: "cz",
key:"cz", key: "cz",
width:120, width: 120,
render: (text, record) => { // ======== 渲染操作列 ======== render: (text, record) => {
const handleView = (record) => { // ======== 定义查看函数 ======== const handleView = (record) => {
console.log('查看记录:', record); // ======== 打印记录信息到控制台 ======== console.log('查看记录:', record);
// 这里可以添加查看详情的逻辑 // ======== 注释：可以添加查看详情的逻辑 ======== };
}; // ======== 函数结束 ========
return ( // ======== 返回按钮组件 ======== const handleEdit = (record) => {
<Button type="link" onClick={() => handleView(record)}>查看</Button> // ======== 查看按钮，点击时调用handleView函数 ======== console.log('编辑记录:', record);
); // ======== return语句结束 ======== };
} // ======== render函数结束 ========
return (
<div>
<Button
type="link"
onClick={() => handleView(record)}
style={{ color: '#2E4CD4' }}
>
查看
</Button>
<Button
type="link"
onClick={() => handleEdit(record)}
style={{ color: '#2E4CD4' }}
>
编辑
</Button>
</div>
);
}
} }
]; ];
// 生成20条假数据 // 12条写死数据
const generateMockData = () => { // ======== 定义生成假数据的函数 ======== const tableData = [
const data = []; // ======== 创建空数组存储数据 ======== {
const areas = ['生产车间A区', '生产车间B区', '储罐区', '配电室', '锅炉房', '化学品仓库', '实验室', '办公区']; // ======== 责任区域选项 ======== key: '1',
const devices = ['压力容器', '储罐', '反应釜', '压缩机', '泵类设备', '电气设备', '管道系统', '安全阀']; // ======== 设备型号选项 ======== id: '01',
const statuses = ['正常', '维护中', '故障', '停用', '检修']; // ======== 状态选项 ======== zrqy: '储罐区A',
const names = ['张三', '李四', '王五', '赵六', '孙七', '周八', '吴九', '郑十', '钱十一', '陈十二']; // ======== 责任人姓名选项 ======== sbxh: '130910180007',
wxlylx: '易燃易爆品存储',
for (let i = 1; i <= 20; i++) { // ======== 循环生成20条数据 ======== zrr: '陈安心',
data.push({ // ======== 添加一条数据到数组 ======== lxfs: '152****7754',
key: i.toString(), // ======== 唯一标识 ======== xjpl: '每日两次',
id: `WX${String(i).padStart(3, '0')}`, // ======== 编号：WX001, WX002... ======== zjxj: '2025-06-08 13:34',
zrqy: areas[Math.floor(Math.random() * areas.length)], // ======== 随机选择责任区域 ======== zt: '正常'
sbxh: devices[Math.floor(Math.random() * devices.length)], // ======== 随机选择设备型号 ======== },
zrr: names[Math.floor(Math.random() * names.length)], // ======== 随机选择责任人 ======== {
zt: statuses[Math.floor(Math.random() * statuses.length)], // ======== 随机选择状态 ======== key: '2',
}); // ======== 数据对象结束 ======== id: '02',
} // ======== 循环结束 ======== zrqy: '储罐区A',
return data; // ======== 返回生成的数据数组 ======== sbxh: '130910180007',
}; // ======== 函数结束 ======== wxlylx: '易燃易爆品存储',
zrr: '陈安心',
const tableData = generateMockData(); // ======== 调用函数生成假数据 ======== 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: '需处理'
}
];
// 雷达图配置方法
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 ( return (
<div className={styles.containerR}> <div className={styles.containerR}>
@ -160,21 +391,23 @@ const ResponsibilityImplementation = () => {
</div> </div>
</div> </div>
{/* 第二块：重叠图片和div */} {/* 第二块：雷达图 */}
<div className={styles.rightBottomSection}> <div className={styles.rightBottomSection}>
<div className={styles.overlayContainer}> <div style={{
{/* 背景图片1 */} width: '100%',
<div className={styles.backgroundImage1}> height: '100%',
<div className={styles.placeholderText}>占位图片1</div> display: 'flex',
</div> // backgroundColor: 'red',
{/* 背景图片2 */} alignItems: 'center',
<div className={styles.backgroundImage2}> justifyContent: 'center',
<div className={styles.placeholderText}>占位图片2</div> position: 'relative',
</div> // padding: '20px'
{/* 重叠的div元素 */} }}>
<div className={styles.overlayDiv1}>待开发123</div> <ReactECharts
<div className={styles.overlayDiv2}>待开发123</div> option={getRadarChartOption()}
<div className={styles.overlayDiv3}>待开发123</div> style={{ width: '100%', height: '100%' }}
opts={{ renderer: 'canvas' }}
/>
</div> </div>
</div> </div>
</div> </div>
@ -192,29 +425,55 @@ const ResponsibilityImplementation = () => {
{/* 第二个大块：搜索和按钮 */} {/* 第二个大块：搜索和按钮 */}
<div className={styles.containerTwoActions}> <div className={styles.containerTwoActions}>
<div className={styles.searchSection}> <div className={styles.searchSection}>
<Input placeholder="搜索危险源编号" /> <Input.Search
placeholder="搜索危险源编号..."
style={{ fontSize: '12px', width:'220px' }}
/>
</div> </div>
<div className={styles.buttonSection}> <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> </div>
{/* 第三个大块：表格 */} {/* 第三个大块：表格 */}
<div className={styles.containerTwoTable}> <div className={styles.containerTwoTable}>
<StandardTable <StandardTable
columns={columns} // ======== 表格列配置 ======== columns={columns}
data={{ // ======== 数据对象，包含list和pagination ======== data={{
list: tableData, // ======== 表格数据列表 ======== list: tableData,
pagination: { // ======== 分页配置 ======== pagination: {
currentPage: 1, // ======== 当前页码 ======== currentPage: 1,
pageSize: 5, // ======== 每页显示10条数据 ======== pageSize: 5,
total: tableData.length, // ======== 总数据条数 ======== total: tableData.length,
} // ======== 分页配置结束 ======== showTotal: (total, range) => `共 ${total} 条数据`,
}} // ======== 数据对象结束 ======== showSizeChanger: false,
selectedRows={[]} // ======== 选中的行数据，初始为空数组 ======== jumpText: '前往',
onSelectRow={() => {}} // ======== 行选择事件处理函数 ======== }
onChange={() => {}} // ======== 表格变化事件处理函数 ======== }}
selectedRows={[]}
onSelectRow={() => { }}
onChange={() => { }}
/> />
</div> </div>
</div> </div>

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

@ -49,7 +49,7 @@
width:42%; width:42%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 15px; padding:15px 15px 0px 15px;
border: 1px solid #f0f0f0; border: 1px solid #f0f0f0;
border-radius: 4px; border-radius: 4px;
@ -104,93 +104,13 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
.overlayContainer { // 调整雷达图标签位置
position: relative; :global(.echarts-for-react) {
width: 100%; :global(.echarts) {
height: 100%; :global(.echarts-axis-name) {
display: flex; transform: translateY(10px) !important;
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;
} }
} }
.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; gap: 8px;
:global(.ant-btn) { :global(.ant-btn) {
height: 32px; height: 28px;
padding: 0 16px; padding: 0 16px;
border-radius: 4px; border-radius: 4px;
font-size: 14px; font-size: 12px;
border: 1px solid #d9d9d9; border: 1px solid #d9d9d9;
background-color: #fff; background-color: #fff;
color: #333; color: #333;
@ -296,12 +216,15 @@
padding: 8px 12px; padding: 8px 12px;
border-bottom: 1px solid #f0f0f0; border-bottom: 1px solid #f0f0f0;
text-align: center; text-align: center;
color: #666666;
font-size: 12px;
} }
:global(.ant-table-tbody > tr:hover > td) { :global(.ant-table-tbody > tr:hover > td) {
background-color: #f5f5f5; background-color: #f5f5f5;
} }
:global(.ant-pagination) { :global(.ant-pagination) {
margin-top: 16px; margin-top: 16px;
text-align: right; text-align: right;

Write Preview
Loading…
Cancel
Save