main
wangyunfei 1 week ago
parent ab7646fd20
commit 0a7149a8b9

@ -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>

@ -715,9 +715,9 @@
gap: 4px;
height: 28px;
border: 1px solid #DFE4F6;
border-radius: 4px;
border-radius: 2px;
color: #2E4CD4;
font-weight: 500;
font-weight: 400;
font-size: 12px;
padding: 0px 8px;
background: transparent;

@ -59,6 +59,7 @@ const CustomMenuItem = ({ item, selectedKeys }) => {
return renderMenuItem(item);
};
const SystemContentList = (props) => {
const dynamicRoute = window.dynamicRoute
console.log(dynamicRoute)
@ -157,6 +158,11 @@ const SystemContentList = (props) => {
history.replace(curKey)
}
const selectChange = (value) => {
console.log(value)
window.location.href = 'http://localhost:8888/'
}
// 切换菜单收缩状态
const toggleMenu = () => {
setIsMenuCollapsed(!isMenuCollapsed);
@ -228,7 +234,7 @@ const SystemContentList = (props) => {
}}>
<Select
value={systemType}
onChange={setSystemType}
onChange={selectChange}
style={{
width: 192,
height: 42,

Loading…
Cancel
Save