|
|
|
|
@ -1,6 +1,6 @@
|
|
|
|
|
import React, { useEffect, useRef, useState } from 'react';
|
|
|
|
|
import { Card, Result, Select, Button, Segmented } from 'antd';
|
|
|
|
|
import { CheckCircleOutlined, ExportOutlined } from '@ant-design/icons';
|
|
|
|
|
import { Card, Result, Select, Button, Segmented ,Input} from 'antd';
|
|
|
|
|
import { CheckCircleOutlined, ExportOutlined, SearchOutlined } from '@ant-design/icons';
|
|
|
|
|
import * as echarts from 'echarts';
|
|
|
|
|
import StandardTable from '@/components/StandardTable';
|
|
|
|
|
import styles from './RealtimeMonitoring.less';
|
|
|
|
|
@ -339,13 +339,7 @@ const RealtimeMonitoring = () => {
|
|
|
|
|
width: 110,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: '型号规格',
|
|
|
|
|
dataIndex: 'modelSpec',
|
|
|
|
|
key: 'modelSpec',
|
|
|
|
|
width: 140,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: '安装位置',
|
|
|
|
|
title: '所在位置',
|
|
|
|
|
dataIndex: 'installLocation',
|
|
|
|
|
key: 'installLocation',
|
|
|
|
|
width: 200,
|
|
|
|
|
@ -390,17 +384,6 @@ const RealtimeMonitoring = () => {
|
|
|
|
|
<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: '2px 8px',
|
|
|
|
|
fontSize: 12,
|
|
|
|
|
border: '1px solid #E6E9FB',
|
|
|
|
|
backgroundColor: 'transparent',
|
|
|
|
|
borderRadius: '4px'
|
|
|
|
|
}}>
|
|
|
|
|
@ -416,9 +399,8 @@ const RealtimeMonitoring = () => {
|
|
|
|
|
{
|
|
|
|
|
key: '1',
|
|
|
|
|
id: '001',
|
|
|
|
|
deviceId: 'HQ-XF-01-001',
|
|
|
|
|
deviceName: '消防水泵',
|
|
|
|
|
modelSpec: 'XBD5.0/30-125',
|
|
|
|
|
deviceId: 'DEV2024001',
|
|
|
|
|
deviceName: '烟雾探测器',
|
|
|
|
|
installLocation: '总部大楼1层大厅',
|
|
|
|
|
status: '故障',
|
|
|
|
|
lastMaintenance: '2025-09-10',
|
|
|
|
|
@ -426,9 +408,8 @@ const RealtimeMonitoring = () => {
|
|
|
|
|
{
|
|
|
|
|
key: '2',
|
|
|
|
|
id: '002',
|
|
|
|
|
deviceId: 'HQ-XF-01-001',
|
|
|
|
|
deviceName: '消防水泵',
|
|
|
|
|
modelSpec: 'XBD5.0/30-125',
|
|
|
|
|
deviceId: 'DEV2024002',
|
|
|
|
|
deviceName: '烟雾探测器',
|
|
|
|
|
installLocation: '总部大楼3层 东区',
|
|
|
|
|
status: '预警',
|
|
|
|
|
lastMaintenance: '2025-09-10',
|
|
|
|
|
@ -436,9 +417,8 @@ const RealtimeMonitoring = () => {
|
|
|
|
|
{
|
|
|
|
|
key: '3',
|
|
|
|
|
id: '003',
|
|
|
|
|
deviceId: 'HQ-XF-01-001',
|
|
|
|
|
deviceName: '消防水泵',
|
|
|
|
|
modelSpec: 'XBD5.0/30-125',
|
|
|
|
|
deviceId: 'DEV2024003',
|
|
|
|
|
deviceName: '消防栓',
|
|
|
|
|
installLocation: '总部大楼地下一层',
|
|
|
|
|
status: '正常',
|
|
|
|
|
lastMaintenance: '2025-09-10',
|
|
|
|
|
@ -446,9 +426,8 @@ const RealtimeMonitoring = () => {
|
|
|
|
|
{
|
|
|
|
|
key: '4',
|
|
|
|
|
id: '004',
|
|
|
|
|
deviceId: 'HQ-XF-01-001',
|
|
|
|
|
deviceId: 'DEV2024001',
|
|
|
|
|
deviceName: '消防水泵',
|
|
|
|
|
modelSpec: 'XBD5.0/30-125',
|
|
|
|
|
installLocation: '总部大楼地下一层',
|
|
|
|
|
status: '故障',
|
|
|
|
|
lastMaintenance: '2025-09-10',
|
|
|
|
|
@ -456,9 +435,8 @@ const RealtimeMonitoring = () => {
|
|
|
|
|
{
|
|
|
|
|
key: '5',
|
|
|
|
|
id: '005',
|
|
|
|
|
deviceId: 'HQ-XF-01-001',
|
|
|
|
|
deviceId: 'DEV2024005',
|
|
|
|
|
deviceName: '消防水泵',
|
|
|
|
|
modelSpec: 'XBD5.0/30-125',
|
|
|
|
|
installLocation: '总部大楼地下一层',
|
|
|
|
|
status: '正常',
|
|
|
|
|
lastMaintenance: '2025-09-10',
|
|
|
|
|
@ -466,9 +444,8 @@ const RealtimeMonitoring = () => {
|
|
|
|
|
{
|
|
|
|
|
key: '6',
|
|
|
|
|
id: '006',
|
|
|
|
|
deviceId: 'HQ-XF-01-001',
|
|
|
|
|
deviceId: 'DEV2024006',
|
|
|
|
|
deviceName: '消防水泵',
|
|
|
|
|
modelSpec: 'XBD5.0/30-125',
|
|
|
|
|
installLocation: '总部大楼地下一层',
|
|
|
|
|
status: '预警',
|
|
|
|
|
lastMaintenance: '2025-09-10',
|
|
|
|
|
@ -476,9 +453,8 @@ const RealtimeMonitoring = () => {
|
|
|
|
|
{
|
|
|
|
|
key: '7',
|
|
|
|
|
id: '007',
|
|
|
|
|
deviceId: 'HQ-XF-01-001',
|
|
|
|
|
deviceId: 'DEV2024007',
|
|
|
|
|
deviceName: '消防水泵',
|
|
|
|
|
modelSpec: 'XBD5.0/30-125',
|
|
|
|
|
installLocation: '总部大楼地下一层',
|
|
|
|
|
status: '故障',
|
|
|
|
|
lastMaintenance: '2025-09-10',
|
|
|
|
|
@ -486,9 +462,8 @@ const RealtimeMonitoring = () => {
|
|
|
|
|
{
|
|
|
|
|
key: '8',
|
|
|
|
|
id: '008',
|
|
|
|
|
deviceId: 'HQ-XF-01-001',
|
|
|
|
|
deviceId: 'DEV2024008',
|
|
|
|
|
deviceName: '消防水泵',
|
|
|
|
|
modelSpec: 'XBD5.0/30-125',
|
|
|
|
|
installLocation: '总部大楼地下一层',
|
|
|
|
|
status: '正常',
|
|
|
|
|
lastMaintenance: '2025-09-10',
|
|
|
|
|
@ -496,9 +471,8 @@ const RealtimeMonitoring = () => {
|
|
|
|
|
{
|
|
|
|
|
key: '9',
|
|
|
|
|
id: '009',
|
|
|
|
|
deviceId: 'HQ-XF-01-001',
|
|
|
|
|
deviceId: 'DEV2024009',
|
|
|
|
|
deviceName: '消防水泵',
|
|
|
|
|
modelSpec: 'XBD5.0/30-125',
|
|
|
|
|
installLocation: '总部大楼地下一层',
|
|
|
|
|
status: '预警',
|
|
|
|
|
lastMaintenance: '2025-09-10',
|
|
|
|
|
@ -506,9 +480,8 @@ const RealtimeMonitoring = () => {
|
|
|
|
|
{
|
|
|
|
|
key: '10',
|
|
|
|
|
id: '010',
|
|
|
|
|
deviceId: 'HQ-XF-01-001',
|
|
|
|
|
deviceId: 'DEV2024010',
|
|
|
|
|
deviceName: '消防水泵',
|
|
|
|
|
modelSpec: 'XBD5.0/30-125',
|
|
|
|
|
installLocation: '总部大楼地下一层',
|
|
|
|
|
status: '故障',
|
|
|
|
|
lastMaintenance: '2025-09-10',
|
|
|
|
|
@ -516,9 +489,8 @@ const RealtimeMonitoring = () => {
|
|
|
|
|
{
|
|
|
|
|
key: '11',
|
|
|
|
|
id: '011',
|
|
|
|
|
deviceId: 'HQ-XF-01-001',
|
|
|
|
|
deviceId: 'DEV2024011',
|
|
|
|
|
deviceName: '消防水泵',
|
|
|
|
|
modelSpec: 'XBD5.0/30-125',
|
|
|
|
|
installLocation: '总部大楼地下一层',
|
|
|
|
|
status: '正常',
|
|
|
|
|
lastMaintenance: '2025-09-10',
|
|
|
|
|
@ -526,9 +498,8 @@ const RealtimeMonitoring = () => {
|
|
|
|
|
{
|
|
|
|
|
key: '12',
|
|
|
|
|
id: '012',
|
|
|
|
|
deviceId: 'HQ-XF-01-001',
|
|
|
|
|
deviceId: 'DEV2024012',
|
|
|
|
|
deviceName: '消防水泵',
|
|
|
|
|
modelSpec: 'XBD5.0/30-125',
|
|
|
|
|
installLocation: '总部大楼地下一层',
|
|
|
|
|
status: '预警',
|
|
|
|
|
lastMaintenance: '2025-09-10',
|
|
|
|
|
@ -720,34 +691,49 @@ const RealtimeMonitoring = () => {
|
|
|
|
|
|
|
|
|
|
{/* 块A */}
|
|
|
|
|
<div className={styles.realtimeDevelopmentBlockA}>
|
|
|
|
|
<img src={ssbj1} alt="ssbj1" className={styles.realtimeDevelopmentBlockImage} />
|
|
|
|
|
<img src={ssbj1} alt="ssbj1" style={{ width: '30px', height: '30px', marginRight: "10px" }} />
|
|
|
|
|
<div className={styles.realtimeLeftContent}>
|
|
|
|
|
<div className={styles.realtimeMainText}>灭火器压力不足</div>
|
|
|
|
|
<div className={styles.realtimeSubText}>2号楼3层 丨 15分钟前</div>
|
|
|
|
|
<div className={styles.realtimeSubText} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
|
|
|
|
|
<span>2号楼3层 丨 15分钟前</span>
|
|
|
|
|
<span style={{ color: '#999', fontSize: '11px' }}>10:23:34</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
{/* 块B */}
|
|
|
|
|
<div className={styles.realtimeDevelopmentBlockB}>
|
|
|
|
|
<img src={ssbj2} alt="ssbj1" style={{ width: '30px', height: '30px', marginRight: "10px" }} />
|
|
|
|
|
<div className={styles.realtimeLeftContent}>
|
|
|
|
|
<div className={styles.realtimeMainText}>烟雾探测器电池低电量</div>
|
|
|
|
|
<div className={styles.realtimeSubText}>1号楼5层 丨 1小时前</div>
|
|
|
|
|
<div className={styles.realtimeSubText} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
|
|
|
|
|
<span>1号楼5层 丨 1小时前</span>
|
|
|
|
|
<span style={{ color: '#999', fontSize: '11px' }}>09:15:22</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
{/* 块C */}
|
|
|
|
|
<div className={styles.realtimeDevelopmentBlockC}>
|
|
|
|
|
<img src={ssbj3} alt="ssbj1" style={{ width: '30px', height: '30px', marginRight: "10px" }} />
|
|
|
|
|
<div className={styles.realtimeLeftContent}>
|
|
|
|
|
<div className={styles.realtimeMainText}>消防栓维护到期</div>
|
|
|
|
|
<div className={styles.realtimeSubText}>3号楼1层 丨 2小时前</div>
|
|
|
|
|
<div className={styles.realtimeSubText} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
|
|
|
|
|
<span>3号楼1层 丨 2小时前</span>
|
|
|
|
|
<span style={{ color: '#999', fontSize: '11px' }}>08:45:18</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
{/* 块D */}
|
|
|
|
|
<div className={styles.realtimeDevelopmentBlockD}>
|
|
|
|
|
<img src={ssbj4} alt="ssbj1" style={{ width: '30px', height: '30px', marginRight: "10px" }} />
|
|
|
|
|
<div className={styles.realtimeLeftContent}>
|
|
|
|
|
<div className={styles.realtimeMainText}>应急照明故障</div>
|
|
|
|
|
<div className={styles.realtimeSubText}>地下停车场 丨 3小时前</div>
|
|
|
|
|
<div className={styles.realtimeSubText} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
|
|
|
|
|
<span>地下停车场 丨 3小时前</span>
|
|
|
|
|
<span style={{ color: '#999', fontSize: '11px' }}>07:30:45</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
@ -758,13 +744,27 @@ const RealtimeMonitoring = () => {
|
|
|
|
|
<div className={styles.realtimeTableHeader}>
|
|
|
|
|
<div className={styles.realtimeTableTitle}>
|
|
|
|
|
<div className={styles.realtimeTitleIcon}></div>
|
|
|
|
|
<div>消防设备台账</div>
|
|
|
|
|
<div>实时监控数据</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div className={styles.realtimeTableActions}>
|
|
|
|
|
<button className={styles.realtimeActionButton} onClick={handleAddDevice}>
|
|
|
|
|
<Input
|
|
|
|
|
placeholder="搜索设备..."
|
|
|
|
|
style={{ width: 180, fontSize: 12, borderRadius: '2px' }}
|
|
|
|
|
suffix={<SearchOutlined style={{ color: '#999' }} />}
|
|
|
|
|
/>
|
|
|
|
|
<button
|
|
|
|
|
className={styles.realtimeActionButton}
|
|
|
|
|
onClick={handleAddDevice}
|
|
|
|
|
style={{
|
|
|
|
|
backgroundColor: '#2E4CD4',
|
|
|
|
|
color: '#fff',
|
|
|
|
|
border: '1px solid #2E4CD4',
|
|
|
|
|
borderRadius: '2px'
|
|
|
|
|
}}
|
|
|
|
|
>
|
|
|
|
|
<span className={styles.realtimeButtonIcon}>+</span>
|
|
|
|
|
<span>新增设备</span>
|
|
|
|
|
<span>添加设备</span>
|
|
|
|
|
</button>
|
|
|
|
|
<button className={styles.realtimeActionButton} onClick={handleExportData}>
|
|
|
|
|
<span className={styles.realtimeButtonIcon}><ExportOutlined /></span>
|
|
|
|
|
|