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

设备设施管理页面

Browse Source
main
wangyunfei 3 weeks ago
parent bff116183c
commit 9e6c9bb009
2 changed files with 371 additions and 221 deletions
Show Stats Download Patch File Download Diff File

296
src/pages/business_basic/module/RiskAssessment.js
Unescape Escape View File

@ -1,7 +1,7 @@
import React, { useEffect, useRef, useState } from 'react';
import { Card, Result, Select, Button, Segmented } from 'antd';
import { CheckCircleOutlined } from '@ant-design/icons';
import { CheckCircleOutlined, ExportOutlined } from '@ant-design/icons';
import * as echarts from 'echarts';
import StandardTable from '@/components/StandardTable';
import styles from './RiskAssessment.less';
@ -205,7 +205,7 @@ const RiskAssessment = () => {
xAxis: {
type: 'category',
boundaryGap: false,
data: ['9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00'],
data: ['9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00'],
axisLabel: {
fontSize: 10
}
@ -223,7 +223,7 @@ const RiskAssessment = () => {
{
name: '消防水泵1',
type: 'line',
smooth: true,
smooth: false,
lineStyle: {
width: 2,
color: '#8979FF'
@ -248,12 +248,12 @@ const RiskAssessment = () => {
borderColor: '#8979FF',
borderWidth: 1
},
data: [12, 15, 18, 14, 16, 20, 22, 19, 17, 21, 23, 25, 24]
data: [12, 15, 18, 14, 16, 20, 22, 19, 17, 21, 23, 25]
},
{
name: '消防水泵2',
type: 'line',
smooth: true,
smooth: false,
lineStyle: {
width: 2,
color: '#3CC3DF'
@ -278,7 +278,7 @@ const RiskAssessment = () => {
borderColor: '#3CC3DF',
borderWidth: 1
},
data: [8, 11, 14, 10, 13, 17, 19, 16, 14, 18, 20, 22, 21]
data: [8, 11, 14, 10, 13, 17, 19, 16, 14, 18, 20, 22]
}
]
};
@ -377,7 +377,7 @@ const RiskAssessment = () => {
title: '编号',
dataIndex: 'id',
key: 'id',
width: 80,
width: 60,
render: (text, record, index) => {
const page = pagination.current || 1;
const pageSize = pagination.pageSize || 5;
@ -389,44 +389,36 @@ const RiskAssessment = () => {
title: '设备编号',
dataIndex: 'deviceId',
key: 'deviceId',
width: 120,
width: 140,
},
{
title: '风险等级',
dataIndex: 'riskLevel',
key: 'riskLevel',
width: 100,
render: (text) => {
const colorMap = {
'高': '#FF4D4F',
'中': '#FAAD14',
'低': '#52C41A'
};
return <span style={{ color: colorMap[text] || '#333' }}>{text}</span>;
}
title: '设备名称',
dataIndex: 'deviceName',
key: 'deviceName',
width: 110,
},
{
title: '预警时间',
dataIndex: 'warningTime',
key: 'warningTime',
width: 150,
title: '型号规格',
dataIndex: 'modelSpec',
key: 'modelSpec',
width: 140,
},
{
title: '主要原因',
dataIndex: 'mainReason',
key: 'mainReason',
title: '安装位置',
dataIndex: 'installLocation',
key: 'installLocation',
width: 200,
},
{
title: '处理状态',
title: '状态',
dataIndex: 'status',
key: 'status',
width: 100,
width: 80,
render: (text) => {
const statusMap = {
'未处理': { color: '#FF4D4F', bg: '#FFF2F0' },
'处理中': { color: '#FAAD14', bg: '#FFFBE6' },
'已处理': { color: '#52C41A', bg: '#F6FFED' }
'故障': { color: '#FF4D4F', bg: '#FFF2F0' },
'预警': { color: '#FAAD14', bg: '#FFF3E9' },
'正常': { color: '#44BB5F', bg: '#D8F7DE' }
};
const status = statusMap[text] || { color: '#333', bg: '#F5F5F5' };
return (
@ -442,16 +434,35 @@ const RiskAssessment = () => {
);
}
},
{
title: '最后维护',
dataIndex: 'lastMaintenance',
key: 'lastMaintenance',
width: 150,
},
{
title: '操作',
key: 'action',
width: 120,
width: 140,
render: (_, record) => (
<div>
<Button type="link" size="small" style={{ padding: 0, marginRight: 8 }}>
查看
<Button type="link" size="small" style={{
padding: '2px 8px',
fontSize: 12,
marginRight: 8,
border: '1px solid #E6E9FB',
backgroundColor: 'transparent',
borderRadius: '4px'
}}>
编辑
</Button>
<Button type="link" size="small" style={{ padding: 0 }}>
<Button type="link" size="small" style={{
padding: '2px 8px',
fontSize: 12,
border: '1px solid #E6E9FB',
backgroundColor: 'transparent',
borderRadius: '4px'
}}>
详情
</Button>
</div>
@ -464,110 +475,122 @@ const RiskAssessment = () => {
{
key: '1',
id: '001',
deviceId: 'DEV-001',
riskLevel: '高',
warningTime: '2024-01-15 08:30:25',
mainReason: '设备温度异常升高',
status: '未处理',
deviceId: 'HQ-XF-01-001',
deviceName: '消防水泵',
modelSpec: 'XBD5.0/30-125',
installLocation: '总部大楼1层大厅',
status: '故障',
lastMaintenance: '2025-09-10',
},
{
key: '2',
id: '002',
deviceId: 'DEV-002',
riskLevel: '中',
warningTime: '2024-01-15 09:15:10',
mainReason: '压力波动超出正常范围',
status: '处理中',
deviceId: 'HQ-XF-01-001',
deviceName: '消防水泵',
modelSpec: 'XBD5.0/30-125',
installLocation: '总部大楼3层 东区',
status: '预警',
lastMaintenance: '2025-09-10',
},
{
key: '3',
id: '003',
deviceId: 'DEV-003',
riskLevel: '高',
warningTime: '2024-01-15 10:45:30',
mainReason: '液位传感器故障',
status: '已处理',
deviceId: 'HQ-XF-01-001',
deviceName: '消防水泵',
modelSpec: 'XBD5.0/30-125',
installLocation: '总部大楼地下一层',
status: '正常',
lastMaintenance: '2025-09-10',
},
{
key: '4',
id: '004',
deviceId: 'DEV-004',
riskLevel: '高',
warningTime: '2024-01-15 11:20:45',
mainReason: '检测到气体泄漏',
status: '未处理',
deviceId: 'HQ-XF-01-001',
deviceName: '消防水泵',
modelSpec: 'XBD5.0/30-125',
installLocation: '总部大楼地下一层',
status: '故障',
lastMaintenance: '2025-09-10',
},
{
key: '5',
id: '005',
deviceId: 'DEV-005',
riskLevel: '低',
warningTime: '2024-01-15 12:10:20',
mainReason: '设备振动异常',
status: '已处理',
deviceId: 'HQ-XF-01-001',
deviceName: '消防水泵',
modelSpec: 'XBD5.0/30-125',
installLocation: '总部大楼地下一层',
status: '正常',
lastMaintenance: '2025-09-10',
},
{
key: '6',
id: '006',
deviceId: 'DEV-006',
riskLevel: '中',
warningTime: '2024-01-15 13:25:15',
mainReason: '流量传感器读数异常',
status: '未处理',
deviceId: 'HQ-XF-01-001',
deviceName: '消防水泵',
modelSpec: 'XBD5.0/30-125',
installLocation: '总部大楼地下一层',
status: '预警',
lastMaintenance: '2025-09-10',
},
{
key: '7',
id: '007',
deviceId: 'DEV-007',
riskLevel: '高',
warningTime: '2024-01-15 14:10:30',
mainReason: '储罐压力超限',
status: '处理中',
deviceId: 'HQ-XF-01-001',
deviceName: '消防水泵',
modelSpec: 'XBD5.0/30-125',
installLocation: '总部大楼地下一层',
status: '故障',
lastMaintenance: '2025-09-10',
},
{
key: '8',
id: '008',
deviceId: 'DEV-008',
riskLevel: '中',
warningTime: '2024-01-15 15:45:20',
mainReason: '管道温度异常',
status: '已处理',
deviceId: 'HQ-XF-01-001',
deviceName: '消防水泵',
modelSpec: 'XBD5.0/30-125',
installLocation: '总部大楼地下一层',
status: '正常',
lastMaintenance: '2025-09-10',
},
{
key: '9',
id: '009',
deviceId: 'DEV-009',
riskLevel: '高',
warningTime: '2024-01-15 16:30:45',
mainReason: '阀门控制系统故障',
status: '未处理',
deviceId: 'HQ-XF-01-001',
deviceName: '消防水泵',
modelSpec: 'XBD5.0/30-125',
installLocation: '总部大楼地下一层',
status: '预警',
lastMaintenance: '2025-09-10',
},
{
key: '10',
id: '010',
deviceId: 'DEV-010',
riskLevel: '低',
warningTime: '2024-01-15 17:15:10',
mainReason: '轻微泄漏检测',
status: '已处理',
deviceId: 'HQ-XF-01-001',
deviceName: '消防水泵',
modelSpec: 'XBD5.0/30-125',
installLocation: '总部大楼地下一层',
status: '故障',
lastMaintenance: '2025-09-10',
},
{
key: '11',
id: '011',
deviceId: 'DEV-011',
riskLevel: '高',
warningTime: '2024-01-15 18:20:35',
mainReason: '安全阀异常开启',
status: '处理中',
deviceId: 'HQ-XF-01-001',
deviceName: '消防水泵',
modelSpec: 'XBD5.0/30-125',
installLocation: '总部大楼地下一层',
status: '正常',
lastMaintenance: '2025-09-10',
},
{
key: '12',
id: '012',
deviceId: 'DEV-012',
riskLevel: '中',
warningTime: '2024-01-15 19:05:50',
mainReason: '液位计读数不稳定',
status: '未处理',
deviceId: 'HQ-XF-01-001',
deviceName: '消防水泵',
modelSpec: 'XBD5.0/30-125',
installLocation: '总部大楼地下一层',
status: '预警',
lastMaintenance: '2025-09-10',
},
];
@ -590,6 +613,18 @@ const RiskAssessment = () => {
setSelectedRows(newSelectedRows);
};
// 新增设备按钮点击事件
const handleAddDevice = () => {
console.log('新增设备');
// TODO: 实现新增设备逻辑
};
// 导出数据按钮点击事件
const handleExportData = () => {
console.log('导出数据');
// TODO: 实现导出数据逻辑
};
// 分页变化处理
const handleTableChange = (pagination) => {
setPagination(prev => ({
@ -735,30 +770,46 @@ const RiskAssessment = () => {
{/* 第一行块 - 蓝色方块加标题 */}
<div className={styles.leftBlockTitle}>
<div className={styles.titleIcon}></div>
<div>风险评估参数</div>
<div>预警信息</div>
</div>
{/* 第二行块 - 图片 */}
<div className={styles.leftBlockImage}>
{/* <img src={risk2} alt="风险评估图" style={{ width: '40%', height: '40%', objectFit: 'cover' }} /> */}
<div className={styles.developmentContainer}>
<div className={styles.developmentBlock1}>
<div className={styles.leftContent}>
<div className={styles.mainText}>灭火器压力不足</div>
<div className={styles.subText}>2号楼3层 丨 15分钟前</div>
</div>
{/* 第三行块 */}
<div className={styles.leftBlockItem}>
<div className={styles.itemTitle}>风险等级</div>
<div className={styles.itemValue}>高风险</div>
<div className={styles.rightContent}>
<div className={styles.importantTag}>重要</div>
</div>
</div>
<div className={styles.developmentBlock1}>
<div className={styles.leftContent}>
<div className={styles.mainText}>烟雾探测器电池低电量</div>
<div className={styles.subText}>1号楼5层 丨 1小时前</div>
</div>
<div className={styles.rightContent}>
<div className={styles.importantTag}>重要</div>
</div>
</div>
<div className={styles.developmentBlock1}>
<div className={styles.leftContent}>
<div className={styles.mainText}>消防栓维护到期</div>
<div className={styles.subText}>3号楼1层 丨 2小时前</div>
</div>
<div className={styles.rightContent}>
<div className={styles.normalTag}>一般</div>
</div>
</div>
<div className={styles.developmentBlock1}>
<div className={styles.leftContent}>
<div className={styles.mainText}>应急照明故障</div>
<div className={styles.subText}>地下停车场 丨 3小时前</div>
</div>
<div className={styles.rightContent}>
<div className={styles.normalTag}>一般</div>
</div>
{/* 第四行块 */}
<div className={styles.leftBlockItem}>
<div className={styles.itemTitle}>评估时间</div>
<div className={styles.itemValue}>2024-01-15</div>
</div>
{/* 第五行块 */}
<div className={styles.leftBlockItem}>
<div className={styles.itemTitle}>评估人员</div>
<div className={styles.itemValue}>张三</div>
</div>
</div>
@ -767,7 +818,18 @@ const RiskAssessment = () => {
<div className={styles.tableHeader}>
<div className={styles.tableTitle}>
<div className={styles.titleIcon}></div>
<div>最新预警信息</div>
<div>消防设备台账</div>
</div>
<div className={styles.tableActions}>
<button className={styles.actionButton} onClick={handleAddDevice}>
<span className={styles.buttonIcon}>+</span>
<span>新增设备</span>
</button>
<button className={styles.actionButton} onClick={handleExportData}>
<span className={styles.buttonIcon}><ExportOutlined /></span>
<span>导出数据</span>
</button>
</div>
</div>
@ -790,7 +852,7 @@ const RiskAssessment = () => {
showTotal: (total, range) =>
`共 ${total} 条`,
}}
scroll={{ x: 1200 }}
// scroll={{ x: 1200 }}
/>
</div>
</div>

140
src/pages/business_basic/module/RiskAssessment.less
Unescape Escape View File

@ -103,9 +103,9 @@
}
}
// 第二个div - 高度30%
// 第二个div - 高度39%
.RcontainerMiddle {
height: 35%;
height: 33%;
border-radius: 4px;
display: flex;
flex-direction: column;
@ -123,10 +123,10 @@
// flex: 1;
width: 28%;
height: 100%;
background: linear-gradient(170.5deg, #EBEFF4 6.87%, #FFFFFF 53.01%);
background: #fff;
border: 2px solid #fff;
border-radius: 4px;
// border-radius: 4px;
position: relative;
padding: 0px 10px 10px 2px;
font-family: PingFang SC;
@ -361,9 +361,10 @@
}
}
// 第三个div - 占满剩余位置
// 第三个div - 高度不超过45%
.RcontainerBottom {
flex: 1; // 占满剩余空间
height: 45%; // 限制高度不超过45%
max-height: 45%; // 确保最大高度不超过45%
display: flex;
flex-direction: column;
@ -374,10 +375,11 @@
padding: 0;
.leftBlock {
width: 30%;
width: 28%;
flex-shrink: 0;
height: 100%;
background: url('@/assets/safe_majorHazard/online_monitoring/risk3.png') no-repeat center center;
background-size: cover;
background: #fff;
// background-size: cover;
padding: 0;
display: flex;
flex-direction: column;
@ -392,6 +394,7 @@
font-weight: 500;
font-size: 14px;
color: #333333;
margin-bottom: 10px;
.titleIcon {
width: 3px;
@ -400,43 +403,91 @@
}
}
.leftBlockImage {
height: 40%;
.developmentContainer {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
gap: 8px;
.developmentBlock1 {
flex: 1;
background-color: #F1F7FF;
border-radius: 4px;
overflow: hidden;
padding: 15px 20px;
display: flex;
justify-content: center;
align-items: center;
height: 80%;
}
width: 100%;
.leftBlockItem {
.leftContent {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
padding: 10px;
// background-color: #f5f5f5;
border-radius: 4px;
gap: 8px;
min-width: 0;
.mainText {
color: #333333;
font-size: 14px;
font-weight: 500;
font-family: PingFang SC;
width: 100%;
max-width: 500px;
}
.itemTitle {
font-size: 12px;
.subText {
color: #666666;
margin-bottom: 5px;
font-size: 12px;
font-weight: 400;
font-family: PingFang SC;
width: 100%;
max-width: 400px;
}
}
.rightContent {
flex: 0 0 auto;
display: flex;
justify-content: flex-end;
align-items: center;
padding-right: 10px;
min-width: 80px;
.itemValue {
.importantTag {
background-color: #FFE0E2;
color: #FF3E48;
font-size: 14px;
font-weight: 500;
font-family: PingFang SC;
width: 45px;
height: 25px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
}
.normalTag {
background-color: #DAF3FF;
color: #00AAFA;
font-size: 14px;
color: #333333;
font-weight: 500;
font-family: PingFang SC;
width: 45px;
height: 25px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
}
}
}
}
}
.rightBlock {
width: 68%;
width: calc(100% - 28% - 10px);
height: 100%;
background-color: #fff;
padding: 0;
@ -464,11 +515,48 @@
background-color: #2E4CD4;
}
}
.tableActions {
display: flex;
gap: 8px;
margin-top: 5px;
.actionButton {
display: flex;
align-items: center;
gap: 4px;
height: 28px;
border: 1px solid #DFE4F6;
border-radius: 4px;
color: #2E4CD4;
font-weight: 500;
font-size: 12px;
padding: 0px 8px;
background: transparent;
cursor: pointer;
transition: all 0.2s ease;
&:hover {
background-color: #f0f2ff;
border-color: #2E4CD4;
}
&:active {
background-color: #e6ebff;
}
.buttonIcon {
font-size: 14px;
font-weight: bold;
}
}
}
}
.tableContainer {
flex: 1;
overflow: hidden;
margin: 10px 15px 0 15px; // 上边距10px，左右边距15px
:global(.ant-table) {
font-size: 12px;

Write Preview
Loading…
Cancel
Save