|
|
|
@ -1,28 +1,24 @@
|
|
|
|
import React, { useEffect, useRef, useState } from 'react';
|
|
|
|
import React, { useEffect, useRef, useState } from 'react';
|
|
|
|
import { Card, Result, Select, Button, Segmented } from 'antd';
|
|
|
|
import { Card, Result, Select, Button, Segmented ,Input} from 'antd';
|
|
|
|
import { CheckCircleOutlined, ExportOutlined } from '@ant-design/icons';
|
|
|
|
import { CheckCircleOutlined, ExportOutlined, SearchOutlined } from '@ant-design/icons';
|
|
|
|
import * as echarts from 'echarts';
|
|
|
|
import * as echarts from 'echarts';
|
|
|
|
import StandardTable from '@/components/StandardTable';
|
|
|
|
import StandardTable from '@/components/StandardTable';
|
|
|
|
import styles from './RealtimeMonitoring.less';
|
|
|
|
import styles from './RealtimeMonitoring.less';
|
|
|
|
// import './RealtimeMonitoring.less';
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
import eqicon1 from '@/assets/business_basic/eqicon1.png';
|
|
|
|
import eqicon1 from '@/assets/business_basic/eqicon1.png';
|
|
|
|
// import eqicon2 from '@/assets/business_basic/eqicon2.png';
|
|
|
|
|
|
|
|
// import eqicon3 from '@/assets/business_basic/eqicon3.png';
|
|
|
|
|
|
|
|
// import eqicon4 from '@/assets/business_basic/eqicon4.png';
|
|
|
|
|
|
|
|
import eqicon2 from '@/assets/business_basic/iconre1.svg';
|
|
|
|
import eqicon2 from '@/assets/business_basic/iconre1.svg';
|
|
|
|
import eqicon3 from '@/assets/business_basic/iconre2.svg';
|
|
|
|
import eqicon3 from '@/assets/business_basic/iconre2.svg';
|
|
|
|
import eqicon4 from '@/assets/business_basic/iconre3.svg';
|
|
|
|
import eqicon4 from '@/assets/business_basic/iconre3.svg';
|
|
|
|
// import eqicon4 from '@/assets/business_basic/iconre1.svg';
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
import ssbj1 from '@/assets/business_basic/ssbj1.svg';
|
|
|
|
|
|
|
|
import ssbj2 from '@/assets/business_basic/ssbj2.svg';
|
|
|
|
|
|
|
|
import ssbj3 from '@/assets/business_basic/ssbj3.svg';
|
|
|
|
|
|
|
|
import ssbj4 from '@/assets/business_basic/ssbj4.svg';
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const RealtimeMonitoring = () => {
|
|
|
|
const RealtimeMonitoring = () => {
|
|
|
|
const chartRef = useRef(null);
|
|
|
|
const chartRef = useRef(null);
|
|
|
|
const pieChartRef = useRef(null);
|
|
|
|
const pieChartRef = useRef(null);
|
|
|
|
const faultPieChartRef = useRef(null);
|
|
|
|
|
|
|
|
const [selectedRowKeys, setSelectedRowKeys] = useState([]);
|
|
|
|
const [selectedRowKeys, setSelectedRowKeys] = useState([]);
|
|
|
|
const [selectedRows, setSelectedRows] = useState([]);
|
|
|
|
const [selectedRows, setSelectedRows] = useState([]);
|
|
|
|
const [loading, setLoading] = useState(false);
|
|
|
|
const [loading, setLoading] = useState(false);
|
|
|
|
@ -100,73 +96,6 @@ const RealtimeMonitoring = () => {
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}, []);
|
|
|
|
}, []);
|
|
|
|
|
|
|
|
|
|
|
|
// 故障类型饼图初始化
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
|
|
|
if (faultPieChartRef.current) {
|
|
|
|
|
|
|
|
const faultPieChart = echarts.init(faultPieChartRef.current);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const faultPieOption = {
|
|
|
|
|
|
|
|
color: ['#FF3E48', '#FF8800', '#FFC403'],
|
|
|
|
|
|
|
|
legend: {
|
|
|
|
|
|
|
|
orient: 'vertical',
|
|
|
|
|
|
|
|
right: '10%',
|
|
|
|
|
|
|
|
top: 'center',
|
|
|
|
|
|
|
|
itemWidth: 8,
|
|
|
|
|
|
|
|
itemHeight: 8,
|
|
|
|
|
|
|
|
textStyle: {
|
|
|
|
|
|
|
|
fontSize: 12,
|
|
|
|
|
|
|
|
color: '#333'
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
series: [{
|
|
|
|
|
|
|
|
name: '设备故障类型',
|
|
|
|
|
|
|
|
type: 'pie',
|
|
|
|
|
|
|
|
radius: '70%',
|
|
|
|
|
|
|
|
center: ['35%', '50%'],
|
|
|
|
|
|
|
|
avoidLabelOverlap: false,
|
|
|
|
|
|
|
|
label: {
|
|
|
|
|
|
|
|
show: true,
|
|
|
|
|
|
|
|
position: 'outside',
|
|
|
|
|
|
|
|
formatter: '{b}: {c}',
|
|
|
|
|
|
|
|
fontSize: 12
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
emphasis: {
|
|
|
|
|
|
|
|
label: {
|
|
|
|
|
|
|
|
show: true,
|
|
|
|
|
|
|
|
fontSize: '14',
|
|
|
|
|
|
|
|
fontWeight: 'bold'
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
labelLine: {
|
|
|
|
|
|
|
|
show: true
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
data: [
|
|
|
|
|
|
|
|
{ value: 120, name: '紧急' },
|
|
|
|
|
|
|
|
{ value: 80, name: '重要' },
|
|
|
|
|
|
|
|
{ value: 60, name: '一般' }
|
|
|
|
|
|
|
|
]
|
|
|
|
|
|
|
|
}]
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
faultPieChart.setOption(faultPieOption);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 响应式调整
|
|
|
|
|
|
|
|
const handleFaultPieResize = () => {
|
|
|
|
|
|
|
|
if (faultPieChart && !faultPieChart.isDisposed()) {
|
|
|
|
|
|
|
|
faultPieChart.resize();
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
window.addEventListener('resize', handleFaultPieResize);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
return () => {
|
|
|
|
|
|
|
|
window.removeEventListener('resize', handleFaultPieResize);
|
|
|
|
|
|
|
|
if (faultPieChart && !faultPieChart.isDisposed()) {
|
|
|
|
|
|
|
|
faultPieChart.dispose();
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}, []);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
useEffect(() => {
|
|
|
|
if (chartRef.current) {
|
|
|
|
if (chartRef.current) {
|
|
|
|
@ -204,25 +133,38 @@ const RealtimeMonitoring = () => {
|
|
|
|
xAxis: {
|
|
|
|
xAxis: {
|
|
|
|
type: 'category',
|
|
|
|
type: 'category',
|
|
|
|
boundaryGap: false,
|
|
|
|
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'],
|
|
|
|
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
|
|
|
|
axisLabel: {
|
|
|
|
axisLabel: {
|
|
|
|
fontSize: 10
|
|
|
|
fontSize: 10
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
splitLine: {
|
|
|
|
|
|
|
|
show: true,
|
|
|
|
|
|
|
|
lineStyle: {
|
|
|
|
|
|
|
|
type: 'dashed'
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
},
|
|
|
|
yAxis: {
|
|
|
|
yAxis: {
|
|
|
|
type: 'value',
|
|
|
|
type: 'value',
|
|
|
|
min: 0,
|
|
|
|
min: 0,
|
|
|
|
max: 30,
|
|
|
|
max: 10,
|
|
|
|
|
|
|
|
interval: 2,
|
|
|
|
axisLabel: {
|
|
|
|
axisLabel: {
|
|
|
|
formatter: '{value}',
|
|
|
|
formatter: '{value}',
|
|
|
|
fontSize: 10
|
|
|
|
fontSize: 10
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
splitLine: {
|
|
|
|
|
|
|
|
show: true,
|
|
|
|
|
|
|
|
lineStyle: {
|
|
|
|
|
|
|
|
type: 'dashed'
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
},
|
|
|
|
series: [
|
|
|
|
series: [
|
|
|
|
{
|
|
|
|
{
|
|
|
|
name: '消防水泵1',
|
|
|
|
name: '故障报警',
|
|
|
|
type: 'line',
|
|
|
|
type: 'line',
|
|
|
|
smooth: false,
|
|
|
|
smooth: true,
|
|
|
|
lineStyle: {
|
|
|
|
lineStyle: {
|
|
|
|
width: 2,
|
|
|
|
width: 2,
|
|
|
|
color: '#8979FF'
|
|
|
|
color: '#8979FF'
|
|
|
|
@ -247,15 +189,15 @@ const RealtimeMonitoring = () => {
|
|
|
|
borderColor: '#8979FF',
|
|
|
|
borderColor: '#8979FF',
|
|
|
|
borderWidth: 1
|
|
|
|
borderWidth: 1
|
|
|
|
},
|
|
|
|
},
|
|
|
|
data: [12, 15, 18, 14, 16, 20, 22, 19, 17, 21, 23, 25]
|
|
|
|
data: [3, 5, 4, 6, 7, 5, 4]
|
|
|
|
},
|
|
|
|
},
|
|
|
|
{
|
|
|
|
{
|
|
|
|
name: '消防水泵2',
|
|
|
|
name: '火灾报警',
|
|
|
|
type: 'line',
|
|
|
|
type: 'line',
|
|
|
|
smooth: false,
|
|
|
|
smooth: true,
|
|
|
|
lineStyle: {
|
|
|
|
lineStyle: {
|
|
|
|
width: 2,
|
|
|
|
width: 2,
|
|
|
|
color: '#3CC3DF'
|
|
|
|
color: '#FF928A'
|
|
|
|
},
|
|
|
|
},
|
|
|
|
areaStyle: {
|
|
|
|
areaStyle: {
|
|
|
|
color: {
|
|
|
|
color: {
|
|
|
|
@ -265,8 +207,8 @@ const RealtimeMonitoring = () => {
|
|
|
|
x2: 0,
|
|
|
|
x2: 0,
|
|
|
|
y2: 1,
|
|
|
|
y2: 1,
|
|
|
|
colorStops: [
|
|
|
|
colorStops: [
|
|
|
|
{ offset: 0, color: 'rgba(60, 195, 223, 0.3)' },
|
|
|
|
{ offset: 0, color: 'rgba(255, 146, 138, 0.3)' },
|
|
|
|
{ offset: 1, color: 'rgba(60, 195, 223, 0.05)' }
|
|
|
|
{ offset: 1, color: 'rgba(255, 146, 138, 0.05)' }
|
|
|
|
]
|
|
|
|
]
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
},
|
|
|
|
@ -274,10 +216,10 @@ const RealtimeMonitoring = () => {
|
|
|
|
symbolSize: 4,
|
|
|
|
symbolSize: 4,
|
|
|
|
itemStyle: {
|
|
|
|
itemStyle: {
|
|
|
|
color: '#fff',
|
|
|
|
color: '#fff',
|
|
|
|
borderColor: '#3CC3DF',
|
|
|
|
borderColor: '#FF928A',
|
|
|
|
borderWidth: 1
|
|
|
|
borderWidth: 1
|
|
|
|
},
|
|
|
|
},
|
|
|
|
data: [8, 11, 14, 10, 13, 17, 19, 16, 14, 18, 20, 22]
|
|
|
|
data: [2, 3, 4, 3, 5, 4, 3]
|
|
|
|
}
|
|
|
|
}
|
|
|
|
]
|
|
|
|
]
|
|
|
|
};
|
|
|
|
};
|
|
|
|
@ -397,13 +339,7 @@ const RealtimeMonitoring = () => {
|
|
|
|
width: 110,
|
|
|
|
width: 110,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
{
|
|
|
|
{
|
|
|
|
title: '型号规格',
|
|
|
|
title: '所在位置',
|
|
|
|
dataIndex: 'modelSpec',
|
|
|
|
|
|
|
|
key: 'modelSpec',
|
|
|
|
|
|
|
|
width: 140,
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
title: '安装位置',
|
|
|
|
|
|
|
|
dataIndex: 'installLocation',
|
|
|
|
dataIndex: 'installLocation',
|
|
|
|
key: 'installLocation',
|
|
|
|
key: 'installLocation',
|
|
|
|
width: 200,
|
|
|
|
width: 200,
|
|
|
|
@ -445,20 +381,9 @@ const RealtimeMonitoring = () => {
|
|
|
|
width: 140,
|
|
|
|
width: 140,
|
|
|
|
render: (_, record) => (
|
|
|
|
render: (_, record) => (
|
|
|
|
<div>
|
|
|
|
<div>
|
|
|
|
<Button type="link" size="small" style={{
|
|
|
|
<Button type="link" size="small" style={{
|
|
|
|
padding: '2px 8px',
|
|
|
|
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,
|
|
|
|
fontSize: 12,
|
|
|
|
border: '1px solid #E6E9FB',
|
|
|
|
|
|
|
|
backgroundColor: 'transparent',
|
|
|
|
backgroundColor: 'transparent',
|
|
|
|
borderRadius: '4px'
|
|
|
|
borderRadius: '4px'
|
|
|
|
}}>
|
|
|
|
}}>
|
|
|
|
@ -474,9 +399,8 @@ const RealtimeMonitoring = () => {
|
|
|
|
{
|
|
|
|
{
|
|
|
|
key: '1',
|
|
|
|
key: '1',
|
|
|
|
id: '001',
|
|
|
|
id: '001',
|
|
|
|
deviceId: 'HQ-XF-01-001',
|
|
|
|
deviceId: 'DEV2024001',
|
|
|
|
deviceName: '消防水泵',
|
|
|
|
deviceName: '烟雾探测器',
|
|
|
|
modelSpec: 'XBD5.0/30-125',
|
|
|
|
|
|
|
|
installLocation: '总部大楼1层大厅',
|
|
|
|
installLocation: '总部大楼1层大厅',
|
|
|
|
status: '故障',
|
|
|
|
status: '故障',
|
|
|
|
lastMaintenance: '2025-09-10',
|
|
|
|
lastMaintenance: '2025-09-10',
|
|
|
|
@ -484,9 +408,8 @@ const RealtimeMonitoring = () => {
|
|
|
|
{
|
|
|
|
{
|
|
|
|
key: '2',
|
|
|
|
key: '2',
|
|
|
|
id: '002',
|
|
|
|
id: '002',
|
|
|
|
deviceId: 'HQ-XF-01-001',
|
|
|
|
deviceId: 'DEV2024002',
|
|
|
|
deviceName: '消防水泵',
|
|
|
|
deviceName: '烟雾探测器',
|
|
|
|
modelSpec: 'XBD5.0/30-125',
|
|
|
|
|
|
|
|
installLocation: '总部大楼3层 东区',
|
|
|
|
installLocation: '总部大楼3层 东区',
|
|
|
|
status: '预警',
|
|
|
|
status: '预警',
|
|
|
|
lastMaintenance: '2025-09-10',
|
|
|
|
lastMaintenance: '2025-09-10',
|
|
|
|
@ -494,9 +417,8 @@ const RealtimeMonitoring = () => {
|
|
|
|
{
|
|
|
|
{
|
|
|
|
key: '3',
|
|
|
|
key: '3',
|
|
|
|
id: '003',
|
|
|
|
id: '003',
|
|
|
|
deviceId: 'HQ-XF-01-001',
|
|
|
|
deviceId: 'DEV2024003',
|
|
|
|
deviceName: '消防水泵',
|
|
|
|
deviceName: '消防栓',
|
|
|
|
modelSpec: 'XBD5.0/30-125',
|
|
|
|
|
|
|
|
installLocation: '总部大楼地下一层',
|
|
|
|
installLocation: '总部大楼地下一层',
|
|
|
|
status: '正常',
|
|
|
|
status: '正常',
|
|
|
|
lastMaintenance: '2025-09-10',
|
|
|
|
lastMaintenance: '2025-09-10',
|
|
|
|
@ -504,9 +426,8 @@ const RealtimeMonitoring = () => {
|
|
|
|
{
|
|
|
|
{
|
|
|
|
key: '4',
|
|
|
|
key: '4',
|
|
|
|
id: '004',
|
|
|
|
id: '004',
|
|
|
|
deviceId: 'HQ-XF-01-001',
|
|
|
|
deviceId: 'DEV2024001',
|
|
|
|
deviceName: '消防水泵',
|
|
|
|
deviceName: '消防水泵',
|
|
|
|
modelSpec: 'XBD5.0/30-125',
|
|
|
|
|
|
|
|
installLocation: '总部大楼地下一层',
|
|
|
|
installLocation: '总部大楼地下一层',
|
|
|
|
status: '故障',
|
|
|
|
status: '故障',
|
|
|
|
lastMaintenance: '2025-09-10',
|
|
|
|
lastMaintenance: '2025-09-10',
|
|
|
|
@ -514,9 +435,8 @@ const RealtimeMonitoring = () => {
|
|
|
|
{
|
|
|
|
{
|
|
|
|
key: '5',
|
|
|
|
key: '5',
|
|
|
|
id: '005',
|
|
|
|
id: '005',
|
|
|
|
deviceId: 'HQ-XF-01-001',
|
|
|
|
deviceId: 'DEV2024005',
|
|
|
|
deviceName: '消防水泵',
|
|
|
|
deviceName: '消防水泵',
|
|
|
|
modelSpec: 'XBD5.0/30-125',
|
|
|
|
|
|
|
|
installLocation: '总部大楼地下一层',
|
|
|
|
installLocation: '总部大楼地下一层',
|
|
|
|
status: '正常',
|
|
|
|
status: '正常',
|
|
|
|
lastMaintenance: '2025-09-10',
|
|
|
|
lastMaintenance: '2025-09-10',
|
|
|
|
@ -524,9 +444,8 @@ const RealtimeMonitoring = () => {
|
|
|
|
{
|
|
|
|
{
|
|
|
|
key: '6',
|
|
|
|
key: '6',
|
|
|
|
id: '006',
|
|
|
|
id: '006',
|
|
|
|
deviceId: 'HQ-XF-01-001',
|
|
|
|
deviceId: 'DEV2024006',
|
|
|
|
deviceName: '消防水泵',
|
|
|
|
deviceName: '消防水泵',
|
|
|
|
modelSpec: 'XBD5.0/30-125',
|
|
|
|
|
|
|
|
installLocation: '总部大楼地下一层',
|
|
|
|
installLocation: '总部大楼地下一层',
|
|
|
|
status: '预警',
|
|
|
|
status: '预警',
|
|
|
|
lastMaintenance: '2025-09-10',
|
|
|
|
lastMaintenance: '2025-09-10',
|
|
|
|
@ -534,9 +453,8 @@ const RealtimeMonitoring = () => {
|
|
|
|
{
|
|
|
|
{
|
|
|
|
key: '7',
|
|
|
|
key: '7',
|
|
|
|
id: '007',
|
|
|
|
id: '007',
|
|
|
|
deviceId: 'HQ-XF-01-001',
|
|
|
|
deviceId: 'DEV2024007',
|
|
|
|
deviceName: '消防水泵',
|
|
|
|
deviceName: '消防水泵',
|
|
|
|
modelSpec: 'XBD5.0/30-125',
|
|
|
|
|
|
|
|
installLocation: '总部大楼地下一层',
|
|
|
|
installLocation: '总部大楼地下一层',
|
|
|
|
status: '故障',
|
|
|
|
status: '故障',
|
|
|
|
lastMaintenance: '2025-09-10',
|
|
|
|
lastMaintenance: '2025-09-10',
|
|
|
|
@ -544,9 +462,8 @@ const RealtimeMonitoring = () => {
|
|
|
|
{
|
|
|
|
{
|
|
|
|
key: '8',
|
|
|
|
key: '8',
|
|
|
|
id: '008',
|
|
|
|
id: '008',
|
|
|
|
deviceId: 'HQ-XF-01-001',
|
|
|
|
deviceId: 'DEV2024008',
|
|
|
|
deviceName: '消防水泵',
|
|
|
|
deviceName: '消防水泵',
|
|
|
|
modelSpec: 'XBD5.0/30-125',
|
|
|
|
|
|
|
|
installLocation: '总部大楼地下一层',
|
|
|
|
installLocation: '总部大楼地下一层',
|
|
|
|
status: '正常',
|
|
|
|
status: '正常',
|
|
|
|
lastMaintenance: '2025-09-10',
|
|
|
|
lastMaintenance: '2025-09-10',
|
|
|
|
@ -554,9 +471,8 @@ const RealtimeMonitoring = () => {
|
|
|
|
{
|
|
|
|
{
|
|
|
|
key: '9',
|
|
|
|
key: '9',
|
|
|
|
id: '009',
|
|
|
|
id: '009',
|
|
|
|
deviceId: 'HQ-XF-01-001',
|
|
|
|
deviceId: 'DEV2024009',
|
|
|
|
deviceName: '消防水泵',
|
|
|
|
deviceName: '消防水泵',
|
|
|
|
modelSpec: 'XBD5.0/30-125',
|
|
|
|
|
|
|
|
installLocation: '总部大楼地下一层',
|
|
|
|
installLocation: '总部大楼地下一层',
|
|
|
|
status: '预警',
|
|
|
|
status: '预警',
|
|
|
|
lastMaintenance: '2025-09-10',
|
|
|
|
lastMaintenance: '2025-09-10',
|
|
|
|
@ -564,9 +480,8 @@ const RealtimeMonitoring = () => {
|
|
|
|
{
|
|
|
|
{
|
|
|
|
key: '10',
|
|
|
|
key: '10',
|
|
|
|
id: '010',
|
|
|
|
id: '010',
|
|
|
|
deviceId: 'HQ-XF-01-001',
|
|
|
|
deviceId: 'DEV2024010',
|
|
|
|
deviceName: '消防水泵',
|
|
|
|
deviceName: '消防水泵',
|
|
|
|
modelSpec: 'XBD5.0/30-125',
|
|
|
|
|
|
|
|
installLocation: '总部大楼地下一层',
|
|
|
|
installLocation: '总部大楼地下一层',
|
|
|
|
status: '故障',
|
|
|
|
status: '故障',
|
|
|
|
lastMaintenance: '2025-09-10',
|
|
|
|
lastMaintenance: '2025-09-10',
|
|
|
|
@ -574,9 +489,8 @@ const RealtimeMonitoring = () => {
|
|
|
|
{
|
|
|
|
{
|
|
|
|
key: '11',
|
|
|
|
key: '11',
|
|
|
|
id: '011',
|
|
|
|
id: '011',
|
|
|
|
deviceId: 'HQ-XF-01-001',
|
|
|
|
deviceId: 'DEV2024011',
|
|
|
|
deviceName: '消防水泵',
|
|
|
|
deviceName: '消防水泵',
|
|
|
|
modelSpec: 'XBD5.0/30-125',
|
|
|
|
|
|
|
|
installLocation: '总部大楼地下一层',
|
|
|
|
installLocation: '总部大楼地下一层',
|
|
|
|
status: '正常',
|
|
|
|
status: '正常',
|
|
|
|
lastMaintenance: '2025-09-10',
|
|
|
|
lastMaintenance: '2025-09-10',
|
|
|
|
@ -584,9 +498,8 @@ const RealtimeMonitoring = () => {
|
|
|
|
{
|
|
|
|
{
|
|
|
|
key: '12',
|
|
|
|
key: '12',
|
|
|
|
id: '012',
|
|
|
|
id: '012',
|
|
|
|
deviceId: 'HQ-XF-01-001',
|
|
|
|
deviceId: 'DEV2024012',
|
|
|
|
deviceName: '消防水泵',
|
|
|
|
deviceName: '消防水泵',
|
|
|
|
modelSpec: 'XBD5.0/30-125',
|
|
|
|
|
|
|
|
installLocation: '总部大楼地下一层',
|
|
|
|
installLocation: '总部大楼地下一层',
|
|
|
|
status: '预警',
|
|
|
|
status: '预警',
|
|
|
|
lastMaintenance: '2025-09-10',
|
|
|
|
lastMaintenance: '2025-09-10',
|
|
|
|
@ -708,39 +621,58 @@ const RealtimeMonitoring = () => {
|
|
|
|
<div className={styles.realtimeTitleIcon}></div>
|
|
|
|
<div className={styles.realtimeTitleIcon}></div>
|
|
|
|
设备状态分布
|
|
|
|
设备状态分布
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
{/* 设备状态饼图 */}
|
|
|
|
{/* 设备状态饼图 */}
|
|
|
|
<div className={styles.realtimeDeviceStatusChart} ref={pieChartRef}>
|
|
|
|
<div className={styles.realtimeDeviceStatusChart} ref={pieChartRef}>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div className={styles.realtimeMiddleBlock12}>
|
|
|
|
<div className={styles.realtimeMiddleBlock12}>
|
|
|
|
<div className={styles.realtimeBlock1Header}>
|
|
|
|
<div className={styles.parameterTitle}>
|
|
|
|
<div className={styles.realtimeBlock1Title}>
|
|
|
|
<div className={styles.realtimeTitleIcon}></div>
|
|
|
|
<div className={styles.realtimeTitleIcon}></div>
|
|
|
|
参数实时监测
|
|
|
|
设备故障类型分布
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<Select
|
|
|
|
|
|
|
|
className={styles.realtimeCustomSelect}
|
|
|
|
|
|
|
|
style={{
|
|
|
|
|
|
|
|
width: 120,
|
|
|
|
|
|
|
|
display: 'flex',
|
|
|
|
|
|
|
|
alignItems: 'center'
|
|
|
|
|
|
|
|
}}
|
|
|
|
|
|
|
|
defaultValue="全部区域"
|
|
|
|
|
|
|
|
options={[
|
|
|
|
|
|
|
|
{ value: '全部区域', label: '全部区域' },
|
|
|
|
|
|
|
|
{ value: '部分区域', label: '部分区域' },
|
|
|
|
|
|
|
|
]}
|
|
|
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
{/* 设备故障类型饼图 */}
|
|
|
|
<div className={styles.parameterGridContainer}>
|
|
|
|
<div className={styles.realtimeDeviceStatusChart} ref={faultPieChartRef}>
|
|
|
|
<div className={styles.parameterRow}>
|
|
|
|
|
|
|
|
<div className={styles.parameterBlock1}>
|
|
|
|
|
|
|
|
<div className={styles.warningBadge}>预警</div>
|
|
|
|
|
|
|
|
<div className={styles.blockContent}>
|
|
|
|
|
|
|
|
<div className={styles.parameterName}>消防水池水位</div>
|
|
|
|
|
|
|
|
<div className={styles.parameterValue}>2.35m</div>
|
|
|
|
|
|
|
|
<div className={styles.parameterRange}>正常范围: 2.5-4.0m</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div className={styles.parameterBlock2}>
|
|
|
|
|
|
|
|
<div className={styles.warningBadge}>正常</div>
|
|
|
|
|
|
|
|
<div className={styles.blockContent}>
|
|
|
|
|
|
|
|
<div className={styles.parameterName}>管网水压</div>
|
|
|
|
|
|
|
|
<div className={styles.parameterValue}>0.68MPa</div>
|
|
|
|
|
|
|
|
<div className={styles.parameterRange}>正常范围: 0.6-0.8 Mpa</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div className={styles.parameterRow}>
|
|
|
|
|
|
|
|
<div className={styles.parameterBlock3}>
|
|
|
|
|
|
|
|
<div className={styles.warningBadge}>正常</div>
|
|
|
|
|
|
|
|
<div className={styles.blockContent}>
|
|
|
|
|
|
|
|
<div className={styles.parameterName}>电器线路电流</div>
|
|
|
|
|
|
|
|
<div className={styles.parameterValue}>125 A</div>
|
|
|
|
|
|
|
|
<div className={styles.parameterRange}>正常范围: 0-150 A</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div className={styles.parameterBlock4}>
|
|
|
|
|
|
|
|
<div className={styles.warningBadge}>故障</div>
|
|
|
|
|
|
|
|
<div className={styles.blockContent}>
|
|
|
|
|
|
|
|
<div className={styles.parameterName}>排烟系统风速</div>
|
|
|
|
|
|
|
|
<div className={styles.parameterValue}>8,2m/s</div>
|
|
|
|
|
|
|
|
<div className={styles.parameterRange}>正常范围: 10-15 m/s</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
@ -753,44 +685,55 @@ const RealtimeMonitoring = () => {
|
|
|
|
{/* 第一行块 - 蓝色方块加标题 */}
|
|
|
|
{/* 第一行块 - 蓝色方块加标题 */}
|
|
|
|
<div className={styles.realtimeLeftBlockTitle}>
|
|
|
|
<div className={styles.realtimeLeftBlockTitle}>
|
|
|
|
<div className={styles.realtimeTitleIcon}></div>
|
|
|
|
<div className={styles.realtimeTitleIcon}></div>
|
|
|
|
<div>预警信息</div>
|
|
|
|
<div>实时报警信息</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div className={styles.realtimeDevelopmentContainer}>
|
|
|
|
<div className={styles.realtimeDevelopmentContainer}>
|
|
|
|
<div className={styles.realtimeDevelopmentBlock1}>
|
|
|
|
|
|
|
|
|
|
|
|
{/* 块A */}
|
|
|
|
|
|
|
|
<div className={styles.realtimeDevelopmentBlockA}>
|
|
|
|
|
|
|
|
<img src={ssbj1} alt="ssbj1" style={{ width: '30px', height: '30px', marginRight: "10px" }} />
|
|
|
|
<div className={styles.realtimeLeftContent}>
|
|
|
|
<div className={styles.realtimeLeftContent}>
|
|
|
|
<div className={styles.realtimeMainText}>灭火器压力不足</div>
|
|
|
|
<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' }}>
|
|
|
|
</div>
|
|
|
|
<span>2号楼3层 丨 15分钟前</span>
|
|
|
|
<div className={styles.realtimeRightContent}>
|
|
|
|
<span style={{ color: '#999', fontSize: '11px' }}>10:23:34</span>
|
|
|
|
<div className={styles.realtimeImportantTag}>重要</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div className={styles.realtimeDevelopmentBlock1}>
|
|
|
|
|
|
|
|
|
|
|
|
{/* 块B */}
|
|
|
|
|
|
|
|
<div className={styles.realtimeDevelopmentBlockB}>
|
|
|
|
|
|
|
|
<img src={ssbj2} alt="ssbj1" style={{ width: '30px', height: '30px', marginRight: "10px" }} />
|
|
|
|
<div className={styles.realtimeLeftContent}>
|
|
|
|
<div className={styles.realtimeLeftContent}>
|
|
|
|
<div className={styles.realtimeMainText}>烟雾探测器电池低电量</div>
|
|
|
|
<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' }}>
|
|
|
|
</div>
|
|
|
|
<span>1号楼5层 丨 1小时前</span>
|
|
|
|
<div className={styles.realtimeRightContent}>
|
|
|
|
<span style={{ color: '#999', fontSize: '11px' }}>09:15:22</span>
|
|
|
|
<div className={styles.realtimeImportantTag}>重要</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div className={styles.realtimeDevelopmentBlock1}>
|
|
|
|
|
|
|
|
|
|
|
|
{/* 块C */}
|
|
|
|
|
|
|
|
<div className={styles.realtimeDevelopmentBlockC}>
|
|
|
|
|
|
|
|
<img src={ssbj3} alt="ssbj1" style={{ width: '30px', height: '30px', marginRight: "10px" }} />
|
|
|
|
<div className={styles.realtimeLeftContent}>
|
|
|
|
<div className={styles.realtimeLeftContent}>
|
|
|
|
<div className={styles.realtimeMainText}>消防栓维护到期</div>
|
|
|
|
<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' }}>
|
|
|
|
</div>
|
|
|
|
<span>3号楼1层 丨 2小时前</span>
|
|
|
|
<div className={styles.realtimeRightContent}>
|
|
|
|
<span style={{ color: '#999', fontSize: '11px' }}>08:45:18</span>
|
|
|
|
<div className={styles.realtimeNormalTag}>一般</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div className={styles.realtimeDevelopmentBlock1}>
|
|
|
|
|
|
|
|
|
|
|
|
{/* 块D */}
|
|
|
|
|
|
|
|
<div className={styles.realtimeDevelopmentBlockD}>
|
|
|
|
|
|
|
|
<img src={ssbj4} alt="ssbj1" style={{ width: '30px', height: '30px', marginRight: "10px" }} />
|
|
|
|
<div className={styles.realtimeLeftContent}>
|
|
|
|
<div className={styles.realtimeLeftContent}>
|
|
|
|
<div className={styles.realtimeMainText}>应急照明故障</div>
|
|
|
|
<div className={styles.realtimeMainText}>应急照明故障</div>
|
|
|
|
<div className={styles.realtimeSubText}>地下停车场 丨 3小时前</div>
|
|
|
|
<div className={styles.realtimeSubText} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
|
|
|
|
</div>
|
|
|
|
<span>地下停车场 丨 3小时前</span>
|
|
|
|
<div className={styles.realtimeRightContent}>
|
|
|
|
<span style={{ color: '#999', fontSize: '11px' }}>07:30:45</span>
|
|
|
|
<div className={styles.realtimeNormalTag}>一般</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
@ -801,13 +744,27 @@ const RealtimeMonitoring = () => {
|
|
|
|
<div className={styles.realtimeTableHeader}>
|
|
|
|
<div className={styles.realtimeTableHeader}>
|
|
|
|
<div className={styles.realtimeTableTitle}>
|
|
|
|
<div className={styles.realtimeTableTitle}>
|
|
|
|
<div className={styles.realtimeTitleIcon}></div>
|
|
|
|
<div className={styles.realtimeTitleIcon}></div>
|
|
|
|
<div>消防设备台账</div>
|
|
|
|
<div>实时监控数据</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div className={styles.realtimeTableActions}>
|
|
|
|
<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 className={styles.realtimeButtonIcon}>+</span>
|
|
|
|
<span>新增设备</span>
|
|
|
|
<span>添加设备</span>
|
|
|
|
</button>
|
|
|
|
</button>
|
|
|
|
<button className={styles.realtimeActionButton} onClick={handleExportData}>
|
|
|
|
<button className={styles.realtimeActionButton} onClick={handleExportData}>
|
|
|
|
<span className={styles.realtimeButtonIcon}><ExportOutlined /></span>
|
|
|
|
<span className={styles.realtimeButtonIcon}><ExportOutlined /></span>
|
|
|
|
@ -835,7 +792,7 @@ const RealtimeMonitoring = () => {
|
|
|
|
showTotal: (total, range) =>
|
|
|
|
showTotal: (total, range) =>
|
|
|
|
`共 ${total} 条`,
|
|
|
|
`共 ${total} 条`,
|
|
|
|
}}
|
|
|
|
}}
|
|
|
|
// scroll={{ x: 1200 }}
|
|
|
|
// scroll={{ x: 1200 }}
|
|
|
|
/>
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
wangyunfei
