diff --git a/config/routes.js b/config/routes.js index b2e1d63..f705a88 100644 --- a/config/routes.js +++ b/config/routes.js @@ -25,11 +25,17 @@ export default [ component: './nav_system_content/SystemContentList', routes: [ // 基础信息管理 - { + { path: '/topnavbar00/business/basic', name: 'basic', component: './business_basic/basic', }, + // 消防检测报警 + { + path: '/topnavbar00/business/fireWarning', + name: 'fireWarning', + component: './business_firewarning/FireWarning', + }, // 安全管理基础信息 { path: '/topnavbar00/business/basicinformation', diff --git a/src/assets/img/icon_firewarning.svg b/src/assets/img/icon_firewarning.svg new file mode 100644 index 0000000..013ecbe --- /dev/null +++ b/src/assets/img/icon_firewarning.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/pages/business_firewarning/FireWarning.js b/src/pages/business_firewarning/FireWarning.js new file mode 100644 index 0000000..f5201c1 --- /dev/null +++ b/src/pages/business_firewarning/FireWarning.js @@ -0,0 +1,48 @@ +import React, { useState } from 'react'; +import { Button } from 'antd'; +import styles from './FireWarning.less'; +import RealtimeMonitoring from './components/RealtimeMonitoring'; +import DataAnalysisWarning from './components/DataAnalysisWarning'; + +const Firewarning = () => { + const [activeModule, setActiveModule] = useState('realtime'); + + const handleModuleClick = (module) => { + setActiveModule(module); + }; + + const renderModule = () => { + switch (activeModule) { + case 'realtime': + return ; + case 'analysis': + return ; + default: + return ; + } + }; + + return ( +
+
+ + +
+
+ {renderModule()} +
+
+ ); +}; + +export default Firewarning; diff --git a/src/pages/business_firewarning/FireWarning.less b/src/pages/business_firewarning/FireWarning.less new file mode 100644 index 0000000..a0de3de --- /dev/null +++ b/src/pages/business_firewarning/FireWarning.less @@ -0,0 +1,66 @@ +.firewarningContainer { + background-color: transparent; + width: 100%; + height: 89vh; + overflow: hidden; + display: flex; + flex-direction: column; + + .firewarningTopButton { + background-color: white; + width: 100%; + padding: 10px 30px; + display: flex; + gap: 24px; + margin-left: 6px; + + .firewarningTopButtonItem { + background-color: transparent !important; + color: #333333 !important; + font-family: 'PingFang SC', sans-serif !important; + font-weight: 500 !important; + font-size: 14px !important; + line-height: 100% !important; + border-radius: 8px !important; + padding: 6px 10px !important; + height: auto !important; + border: none !important; + box-shadow: none !important; + position: relative !important; + + &:hover { + color: #333333 !important; + border: none !important; + } + + &:focus { + color: #2E4CD4 !important; + border: none !important; + } + + &.active { + color: #2E4CD4 !important; + + &::after { + content: ''; + position: absolute; + bottom: -10px; + left: 0; + right: 0; + width: 100%; + height: 4px; + background-color: #2E4CD4; + border-radius: 0; + opacity: 1; + } + } + } + } + + .firewarningContent { + // ======== 内容区域样式 ======== + flex: 1; // ======== 占据剩余空间 ======== + overflow-y: auto; // ======== 允许垂直滚动 ======== + padding: 0; // ======== 无内边距 ======== + } +} diff --git a/src/pages/business_firewarning/components/DataAnalysisWarning.js b/src/pages/business_firewarning/components/DataAnalysisWarning.js new file mode 100644 index 0000000..79c8258 --- /dev/null +++ b/src/pages/business_firewarning/components/DataAnalysisWarning.js @@ -0,0 +1,922 @@ +import React, { useEffect, useRef, useState } from 'react'; +import { Card, Result, Select, Button, Segmented, Progress, Input } from 'antd'; +import { CheckCircleOutlined, ExportOutlined, HeartFilled, LineHeightOutlined, ExclamationCircleOutlined, SearchOutlined } from '@ant-design/icons'; +import * as echarts from 'echarts'; +import StandardTable from '@/components/StandardTable'; +import styles from './DataAnalysisWarning.less'; + +import img1 from '@/assets/safe_majorHazard/online_monitoring/img1.png'; +import img2 from '@/assets/safe_majorHazard/online_monitoring/img2.png'; +import img3 from '@/assets/safe_majorHazard/online_monitoring/img3.png'; +import map1 from '@/assets/safe_majorHazard/online_monitoring/map.png'; +import risk1 from '@/assets/safe_majorHazard/online_monitoring/risk1.png'; +import risk2 from '@/assets/safe_majorHazard/online_monitoring/risk2.png'; +import risk3 from '@/assets/safe_majorHazard/online_monitoring/risk3.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'; + +const DataAnalysisWarning = () => { + const chartRef = useRef(null); + const pieChartRef = useRef(null); + const faultPieChartRef = useRef(null); + const [selectedRowKeys, setSelectedRowKeys] = useState([]); + const [selectedRows, setSelectedRows] = useState([]); + const [loading, setLoading] = useState(false); + const [dataSource, setDataSource] = useState([]); + const [pagination, setPagination] = useState({ + current: 1, + pageSize: 8, + total: 0, + }); + const [searchText, setSearchText] = useState(''); + + // 柱状图初始化 + useEffect(() => { + if (pieChartRef.current) { + const barChart = echarts.init(pieChartRef.current); + + const barOption = { + grid: { + left: '5%', + right: '5%', + bottom: '10%', + top: '20%', + containLabel: true + }, + xAxis: { + type: 'category', + data: ['灭火器', '消火栓', '报警器', '疏散灯', '排烟设备'], + axisLabel: { + fontSize: 12, + color: '#333', + interval: 0, + rotate: 0 + }, + axisLine: { + show: false + }, + axisTick: { + show: false + } + }, + yAxis: { + type: 'value', + min: 0, + max: 50, + interval: 10, + axisLabel: { + fontSize: 12, + color: '#666', + formatter: '{value}' + }, + axisLine: { + show: false + }, + axisTick: { + show: false + }, + splitLine: { + lineStyle: { + color: '#00001A26', + type: 'dashed' + } + } + }, + series: [{ + name: '使用次数', + type: 'bar', + barWidth: 27, + data: [35, 28, 42, 31, 38], + itemStyle: { + color: { + type: 'linear', + x: 0, + y: 0, + x2: 0, + y2: 1, + colorStops: [ + { offset: 0, color: '#199BFB' }, + { offset: 1, color: '#1373FA' } + ] + } + }, + emphasis: { + itemStyle: { + color: { + type: 'linear', + x: 0, + y: 0, + x2: 0, + y2: 1, + colorStops: [ + { offset: 0, color: '#0D7AE8' }, + { offset: 1, color: '#0F5BC7' } + ] + } + } + } + }], + legend: { + show: true, + top: '5%', + left: 'center', + itemWidth: 15, + itemHeight: 3, + textStyle: { + fontSize: 12, + color: '#333' + }, + data: [{ + name: '使用次数', + icon: 'rect', + itemStyle: { + color: '#4B69F1' + } + }] + }, + tooltip: { + trigger: 'axis', + axisPointer: { + type: 'shadow' + }, + formatter: function (params) { + return `${params[0].name}
使用次数: ${params[0].value}`; + } + } + }; + + barChart.setOption(barOption); + + // 响应式调整 + const handleBarResize = () => { + if (barChart && !barChart.isDisposed()) { + barChart.resize(); + } + }; + + window.addEventListener('resize', handleBarResize); + + return () => { + window.removeEventListener('resize', handleBarResize); + if (barChart && !barChart.isDisposed()) { + barChart.dispose(); + } + }; + } + }, []); + + // 维护费用趋势折线图初始化 + useEffect(() => { + if (faultPieChartRef.current) { + const faultPieChart = echarts.init(faultPieChartRef.current); + + const faultPieOption = { + + legend: { + show: true, + top: '5%', + left: 'center', + itemWidth: 20, + itemHeight: 8, + textStyle: { + color: '#333', + fontSize: 12 + } + }, + grid: { + left: '5%', + right: '5%', + bottom: '10%', + top: '20%', + containLabel: true + }, + xAxis: { + type: 'category', + data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'], + axisLine: { + lineStyle: { + color: '#E5E5E5' + } + }, + axisTick: { + show: false + }, + axisLabel: { + color: '#666', + fontSize: 12, + interval: 0 + } + }, + yAxis: { + type: 'value', + min: 20000, + max: 30000, + interval: 2000, + axisLine: { + show: false + }, + axisTick: { + show: false + }, + axisLabel: { + color: '#666', + fontSize: 12, + formatter: '¥{value}' + }, + splitLine: { + lineStyle: { + color: '#00001A26', + type: 'dashed' + } + } + }, + series: [{ + name: '费用', + type: 'line', + data: [29000, 21000, 27500, 21900, 26000, 25000, 27000, 24000, 22300, 28000, 29000, 27000], + smooth: false, + symbol: 'circle', + symbolSize: 6, + lineStyle: { + color: '#1269FF', + width: 1 + }, + itemStyle: { + color: '#fff', + borderColor: '#1269FF', + borderWidth: 1 + }, + areaStyle: { + color: { + type: 'linear', + x: 0, + y: 0, + x2: 0, + y2: 1, + colorStops: [{ + offset: 0, + color: 'rgba(18, 105, 255, 0.3)' + }, { + offset: 1, + color: 'rgba(18, 105, 255, 0.05)' + }] + } + } + }] + }; + + 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(() => { + if (chartRef.current) { + const chart = echarts.init(chartRef.current); + + // 强制初始化时调整大小 + setTimeout(() => { + if (chart && !chart.isDisposed()) { + chart.resize(); + } + }, 100); + + const option = { + color: ['#3C7EFF', '#FF8800', '#FFC403', '#31BCFF'], + legend: { + orient: 'vertical', + right: '2%', + top: 'middle', + itemWidth: 14, + itemHeight: 5, + textStyle: { + fontSize: 10, + color: '#666' + } + }, + tooltip: { + trigger: 'item', + formatter: '{b}
{d}%' + }, + series: [ + { + name: '设备类型占比', + type: 'pie', + radius: '70%', + center: ['40%', '55%'], + avoidLabelOverlap: false, + itemStyle: { + borderRadius: 0, + borderColor: '#fff', + borderWidth: 1 + }, + label: { + show: false, + position: 'center' + }, + emphasis: { + label: { + show: false + } + }, + labelLine: { + show: false + }, + data: [ + { value: 25, name: '灭火器' }, + { value: 30, name: '消防栓' }, + { value: 20, name: '报警器' }, + { value: 25, name: '烟雾探测器' } + ] + } + ] + }; + + chart.setOption(option); + + // 响应式调整 - 使用多种方式监听容器尺寸变化 + let resizeTimer = null; + const handleResize = () => { + // 防抖处理，避免频繁调用resize + if (resizeTimer) { + clearTimeout(resizeTimer); + } + resizeTimer = setTimeout(() => { + if (chart && !chart.isDisposed()) { + chart.resize(); + } + }, 50); // 减少延迟时间 + }; + + // 监听窗口大小变化 + window.addEventListener('resize', handleResize); + + // 监听容器尺寸变化（解决菜单栏伸缩时的自适应问题） + let resizeObserver = null; + if (window.ResizeObserver) { + resizeObserver = new ResizeObserver((entries) => { + for (let entry of entries) { + // 使用requestAnimationFrame确保在下一帧执行 + requestAnimationFrame(() => { + handleResize(); + }); + } + }); + resizeObserver.observe(chartRef.current); + } + + // 额外监听父容器的尺寸变化 + const parentContainer = chartRef.current?.parentElement; + let parentObserver = null; + if (parentContainer && window.ResizeObserver) { + parentObserver = new ResizeObserver((entries) => { + for (let entry of entries) { + requestAnimationFrame(() => { + handleResize(); + }); + } + }); + parentObserver.observe(parentContainer); + } + + // 使用MutationObserver监听DOM结构变化（菜单展开收起时） + const mutationObserver = new MutationObserver((mutations) => { + mutations.forEach((mutation) => { + if (mutation.type === 'attributes' && + (mutation.attributeName === 'class' || mutation.attributeName === 'style')) { + // 延迟执行，确保DOM更新完成 + setTimeout(() => { + handleResize(); + }, 200); + } + }); + }); + + // 监听整个页面的class和style变化 + mutationObserver.observe(document.body, { + attributes: true, + attributeFilter: ['class', 'style'], + subtree: true + }); + + return () => { + window.removeEventListener('resize', handleResize); + if (resizeObserver) { + resizeObserver.disconnect(); + } + if (parentObserver) { + parentObserver.disconnect(); + } + if (mutationObserver) { + mutationObserver.disconnect(); + } + if (resizeTimer) { + clearTimeout(resizeTimer); + } + if (chart && !chart.isDisposed()) { + chart.dispose(); + } + }; + } + }, []); + + // 表格列定义 + const columns = [ + { + title: '编号', + dataIndex: 'id', + key: 'id', + width: 60, + render: (text, record, index) => { + const page = pagination.current || 1; + const pageSize = pagination.pageSize || 8; + const number = (page - 1) * pageSize + index + 1; + return `0${number}`.slice(-2); + } + }, + { + title: '设备编号', + dataIndex: 'deviceId', + key: 'deviceId', + width: 140, + }, + { + title: '设备名称', + dataIndex: 'deviceName', + key: 'deviceName', + width: 110, + }, + { + title: '类型', + dataIndex: 'modelSpec', + key: 'modelSpec', + width: 120, + }, + { + title: '安装位置', + dataIndex: 'installLocation', + key: 'installLocation', + width: 100, + }, + { + title: '状态', + dataIndex: 'status', + key: 'status', + width: 100, + render: (text) => { + const statusMap = { + '报废': { color: '#FF3E48', bg: '#FFE0E2' }, + '待维修': { color: '#FF8800', bg: '#FFF3E9' }, + '已使用': { color: '#00AAFA', bg: '#DAF3FF' }, + '正常': { color: '#44BB5F', bg: '#D8F7DE' } + }; + const status = statusMap[text] || { color: '#333', bg: '#F5F5F5' }; + return ( + + {text} + + ); + } + }, + { + title: '最后维护时间', + dataIndex: 'lastMaintenance', + key: 'lastMaintenance', + width: 150, + }, + { + title: '操作', + key: 'action', + width: 140, + render: (_, record) => ( +
+ + +
+ ), + }, + ]; + + // 模拟数据 + const mockData = [ + { + key: '1', + id: '001', + deviceId: 'HQ-XF-01-001', + deviceName: '干粉灭火器', + modelSpec: '灭火设备', + installLocation: '1层大厅', + status: '报废', + lastMaintenance: '2025-09-10', + }, + { + key: '2', + id: '002', + deviceId: 'HQ-XF-02-015', + deviceName: '室内消火栓', + modelSpec: '灭火设备', + installLocation: '3层东区', + status: '已使用', + lastMaintenance: '2025-09-10', + }, + { + key: '3', + id: '003', + deviceId: 'HQ-XF-03-007', + deviceName: '火警报警器', + modelSpec: '报警设备', + installLocation: '地下一层', + status: '正常', + lastMaintenance: '2025-09-10', + }, + { + key: '4', + id: '004', + deviceId: 'HQ-XF-03-008', + deviceName: '火警报警器', + modelSpec: '报警设备', + installLocation: '地下一层', + status: '待维修', + lastMaintenance: '2025-09-10', + }, + { + key: '5', + id: '005', + deviceId: 'HQ-XF-01-009', + deviceName: '干粉灭火器', + modelSpec: '灭火设备', + installLocation: '地下一层', + status: '报废', + lastMaintenance: '2025-09-10', + }, + { + key: '6', + id: '006', + deviceId: 'HQ-XF-01-010', + deviceName: '室内消火栓', + modelSpec: '灭火设备', + installLocation: '地下一层', + status: '已使用', + lastMaintenance: '2025-09-10', + }, + { + key: '7', + id: '007', + deviceId: 'HQ-XF-01-011', + deviceName: '火警报警器', + modelSpec: '报警设备', + installLocation: '地下一层', + status: '待维修', + lastMaintenance: '2025-09-10', + }, + { + key: '8', + id: '008', + deviceId: 'HQ-XF-01-012', + deviceName: '火警报警器', + modelSpec: '报警设备', + installLocation: '地下一层', + status: '正常', + lastMaintenance: '2025-09-10', + }, + { + key: '9', + id: '009', + deviceId: 'HQ-XF-01-013', + deviceName: '干粉灭火器', + modelSpec: '灭火设备', + installLocation: '地下一层', + status: '已使用', + lastMaintenance: '2025-09-10', + }, + { + key: '10', + id: '010', + deviceId: 'HQ-XF-01-014', + deviceName: '室内消火栓', + modelSpec: '灭火设备', + installLocation: '地下一层', + status: '待维修', + lastMaintenance: '2025-09-10', + }, + { + key: '11', + id: '011', + deviceId: 'HQ-XF-01-015', + deviceName: '火警报警器', + modelSpec: '报警设备', + installLocation: '地下一层', + status: '正常', + lastMaintenance: '2025-09-10', + }, + { + key: '12', + id: '012', + deviceId: 'HQ-XF-01-016', + deviceName: '火警报警器', + modelSpec: '报警设备', + installLocation: '地下一层', + status: '已使用', + lastMaintenance: '2025-09-10', + }, + { + key: '13', + id: '013', + deviceId: 'HQ-XF-01-017', + deviceName: '干粉灭火器', + modelSpec: '灭火设备', + installLocation: '2层西区', + status: '报废', + lastMaintenance: '2024-08-15', + }, + { + key: '14', + id: '014', + deviceId: 'HQ-XF-02-018', + deviceName: '室内消火栓', + modelSpec: '灭火设备', + installLocation: '4层南区', + status: '报废', + lastMaintenance: '2024-07-20', + }, + { + key: '15', + id: '015', + deviceId: 'HQ-XF-03-019', + deviceName: '火警报警器', + modelSpec: '报警设备', + installLocation: '地下二层', + status: '报废', + lastMaintenance: '2024-06-10', + }, + { + key: '16', + id: '016', + deviceId: 'HQ-XF-01-020', + deviceName: '干粉灭火器', + modelSpec: '灭火设备', + installLocation: '5层北区', + status: '报废', + lastMaintenance: '2024-05-05', + }, + ]; + + // 初始化数据 + useEffect(() => { + setPagination(prev => ({ ...prev, total: mockData.length })); + }, []); + + // 根据分页获取当前页数据 + const getCurrentPageData = () => { + const { current, pageSize } = pagination; + const startIndex = (current - 1) * pageSize; + const endIndex = startIndex + pageSize; + return mockData.slice(startIndex, endIndex); + }; + + // 表格选择变化 + const onSelectChange = (newSelectedRowKeys, newSelectedRows) => { + setSelectedRowKeys(newSelectedRowKeys); + setSelectedRows(newSelectedRows); + }; + + // 新增设备按钮点击事件 + const handleAddDevice = () => { + console.log('新增设备'); + // TODO: 实现新增设备逻辑 + }; + + // 导出数据按钮点击事件 + const handleExportData = () => { + console.log('导出数据'); + // TODO: 实现导出数据逻辑 + }; + + // 分页变化处理 + const handleTableChange = (pagination) => { + setPagination(prev => ({ + ...prev, + current: pagination.current, + pageSize: pagination.pageSize, + })); + }; + + // 搜索处理 + const handleSearchChange = (e) => { + setSearchText(e.target.value); + console.log('搜索:', e.target.value); + // TODO: 实现搜索逻辑，根据设备名称、编号等筛选数据 + }; + + return ( +
+ {/* 第1个div - 高度39% */} +
+
+
+
+
+
+ 设备使用频率分析 +
+
+ {/* 设备状态饼图 */} +
+
+
+ +
+
+
+
+ 近一年维护费用趋势 +
+
+ + {/* 维护费用趋势折线图 */} +
+
+
+ +
+
+
+
+
设备类型占比
+
+
+
+
+
+
+
+ + {/* 第2个div - 占满剩余位置 */} +
+
+
+
+
+
+
+
近期维护提醒
+
+
+
+
+
SH-MHQ-023-C 干粉灭火器
+
位置: 4楼办公区丨维护类型: 季度检查
+
负责人: 张三
+
+
+
3天后到期
+
+
+
+
+
SH-XHS-045-D 室内消火栓
+
位置: 2楼东侧走廊丨维护类型: 水压测试
+
负责人: 李四
+
+
+
8天后到期
+
+
+
+
+
+
+
+
维护任务进度
+
+
+ {/* 进度条区域 */} +
+ +
月度维护计划
+ + +
季度维护计划
+ + + +
年度维护计划
+ + + + {/* 警告提示框 */} +
+ + 本月有5项维护任务即将到期 +
+ +
+
+
+
+
+ +
+ {/* 表格 */} +
+
+
+
消防设施与器材列表
+
+
+ + + {/* 操作按钮 */} +
+
+ } + /> +
+
+ + +
+
+ + {/* 表格 */} +
+ + `共 ${total} 条`, + }} + /> +
+
+
+
+
+ ); +}; + +export default DataAnalysisWarning; diff --git a/src/pages/business_firewarning/components/DataAnalysisWarning.less b/src/pages/business_firewarning/components/DataAnalysisWarning.less new file mode 100644 index 0000000..b036170 --- /dev/null +++ b/src/pages/business_firewarning/components/DataAnalysisWarning.less @@ -0,0 +1,558 @@ +.analysisContainer { + padding: 8px 6px 0px 6px; + height: 100%; + display: flex; + flex-direction: column; + gap: 10px; + + // 第二个div - 高度35% + .analysisContainerMiddle { + // height: 400px; + min-height: 35%; + border-radius: 4px; + display: flex; + flex-direction: column; + + .analysisSectionContent { + height: 100%; + display: flex; + display: flex; + gap: 10px; + height: 100%; + + .analysisMiddleBlock1 { + width: 30%; + height: 100%; + background: #fff; + border: 2px solid #fff; + position: relative; + padding: 0px 10px 10px 2px; + font-family: PingFang SC; + font-size: 14px; + color: #333333; + + .analysisBlock1Header { + position: absolute; + top: 5px; + left: 10px; + right: 10px; + display: flex; + justify-content: space-between; + align-items: center; + z-index: 10; + + .analysisBlock1Title { + display: flex; + align-items: center; + gap: 8px; + font-weight: 500; + font-size: 14px; + margin-top: 5px; + color: #333333; + + .analysisTitleIcon { + width: 3px; + height: 14px; + background-color: #2E4CD4; + } + } + + } + + .analysisDeviceStatusChart { + position: absolute; + top: 10px; + left: 10px; + right: 10px; + z-index: 10; + min-height: 100%; + } + } + + .analysisMiddleBlock12 { + flex: 1; + height: 100%; + background-color: #fff; + display: flex; + flex-direction: column; + font-family: PingFang SC; + font-size: 14px; + color: #333333; + padding: 5px 10px 5px 10px; + position: relative; + + .analysisBlock1Header { + position: absolute; + top: 5px; + left: 10px; + right: 10px; + display: flex; + justify-content: space-between; + align-items: center; + z-index: 10; + + .analysisBlock1Title { + display: flex; + align-items: center; + gap: 8px; + font-weight: 500; + font-size: 14px; + margin-top: 5px; + color: #333333; + + .analysisTitleIcon { + width: 3px; + height: 14px; + background-color: #2E4CD4; + } + } + + } + + .analysisDeviceStatusChart { + position: absolute; + top: 10px; + left: 10px; + right: 10px; + // bottom: 10px; + z-index: 10; + } + } + + .analysisMiddleBlock12 { + width: 45%; + height: 100%; + background-color: #fff; + display: flex; + flex-direction: column; + font-family: PingFang SC; + font-size: 14px; + color: #333333; + padding: 5px 10px 5px 10px; + position: relative; + + .analysisBlock1Header { + position: absolute; + top: 5px; + left: 10px; + right: 10px; + display: flex; + justify-content: space-between; + align-items: center; + z-index: 10; + + .analysisBlock1Title { + display: flex; + align-items: center; + gap: 8px; + font-weight: 500; + font-size: 14px; + color: #333333; + + .analysisTitleIcon { + width: 3px; + height: 14px; + background-color: #2E4CD4; + } + } + } + + .analysisDeviceStatusChart { + position: absolute; + top: 10px; + left: 10px; + right: 10px; + // bottom: 10px; + min-height: 100%; + z-index: 10; + } + } + + .analysisMiddleBlock2 { + // flex: 1; + width: calc(100% - 75% - 15px); + height: 100%; + // background: linear-gradient(170.5deg, #EBEFF4 6.87%, #FFFFFF 53.01%); + // border: 2px solid #fff; + background-color: #fff; + // border-radius: 4px; + display: flex; + flex-direction: column; + font-family: PingFang SC; + font-size: 14px; + color: #333333; + padding: 5px 10px 5px 10px; + + .analysisMiddleBlock2Title { + display: flex; + justify-content: space-between; + align-items: center; + margin-top: 5px; + + .analysisTitleLeft { + display: flex; + align-items: center; + gap: 8px; + font-weight: 500; + font-size: 14px; + color: #333333; + + .analysisTitleIcon { + width: 3px; + height: 14px; + background-color: #2E4CD4; + } + } + + } + + .analysisMiddleBlock2Chart { + width: 100%; + height: 100%; + } + } + } + } + + // 第三个div - 占满剩余位置 + .analysisContainerBottom { + display: flex; + flex-direction: column; + flex-shrink: 0; + + .analysisSectionContent { + display: flex; + flex-direction: row; + flex: 1; + gap: 10px; + padding: 0; + + .analysisLeftBlock { + width: 30%; + flex-shrink: 0; + height: 100%; + padding: 0; + display: flex; + flex-direction: column; + gap: 10px; + + .analysisLeftBlockTitle { + display: flex; + align-items: center; + gap: 8px; + font-family: PingFang SC; + font-weight: 500; + font-size: 14px; + color: #333333; + margin-bottom: 10px; + + .analysisTitleIcon { + width: 3px; + height: 16px; + background-color: #2E4CD4; + } + } + + .analysisMaintenanceStack { + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + gap: 10px; + + .analysisMaintenanceSection { + width: 100%; + height: 50%; + background: #FFF; + border-radius: 4px; + display: flex; + flex-direction: column; + padding: 12px 14px; + + .analysisMaintenanceTitle { + display: flex; + align-items: center; + gap: 8px; + font-family: PingFang SC; + font-weight: 500; + font-size: 14px; + color: #333333; + margin-bottom: 8px; + } + + .analysisTitleIcon { + width: 3px; + height: 16px; + background-color: #2E4CD4; + } + + .analysisMaintenanceContent { + flex: 1; + width: 100%; + } + + .analysisMaintenanceContent1 { + flex: 1; + width: 100%; + display: flex; + flex-direction: column; + gap: 8px; + margin-top: 8px; + .analysisMaintenanceItem { + display: flex; + align-items: center; + justify-content: space-between; + background-color: #F1F7FF; + border-radius: 4px; + padding: 16px 16px; + + .analysisMaintenanceLeft { + flex: 1; + display: flex; + flex-direction: column; + gap: 4px; + + .analysisMaintenanceText1 { + font-size: 14px; + font-weight: 500; + color: #333333; + font-family: PingFang SC; + } + + .analysisMaintenanceText2 { + font-size: 12px; + color: #666666; + font-family: PingFang SC; + } + + .analysisMaintenanceText3 { + font-size: 12px; + color: #666666; + font-family: PingFang SC; + } + } + + .analysisMaintenanceRight { + flex: 0 0 auto; + display: flex; + align-items: center; + justify-content: center; + + .analysisMaintenanceStatus { + font-size: 12px; + color: #FF3E48; + font-weight: 500; + font-family: PingFang SC; + background-color: #FFE0E2; + padding: 4px 8px; + border-radius: 4px; + // border: 1px solid #FFE0E2; + } + } + + .analysisMaintenanceRight2 { + flex: 0 0 auto; + display: flex; + align-items: center; + justify-content: center; + + .analysisMaintenanceStatus { + font-size: 12px; + color: #FF8800; + font-weight: 500; + font-family: PingFang SC; + background-color: #FFF3E9; + padding: 4px 8px; + border-radius: 4px; + // padding-right: 2px; + } + } + } + } + + .analysisMaintenanceContent2 { + flex: 1; + width: 100%; + display: flex; + flex-direction: column; + gap: 15px; + padding: 8px 0; + + .analysisWarningBox { + display: flex; + align-items: center; + gap: 8px; + background-color: #FFF3CD; + border: 1px solid #F4E3AE; + border-radius: 4px; + padding: 8px 12px; + // margin-bottom: 8px; + // margin-top: 10px; + + .analysisWarningIcon { + color: #8C6C0B; + font-size: 14px; + } + + .analysisWarningText { + color: #8C6C0B; + font-size: 12px; + font-family: PingFang SC; + font-weight: 400; + } + } + + .analysisProgressSection { + width: 100%; + display: flex; + flex-direction: column; + // gap: 12px; + padding: 0px 12px 12px 12px; + + + .analysisProgressLabel { + font-size: 12px; + color: #666666; + font-family: PingFang SC; + font-weight: 400; + + } + + // 自定义进度条样式 + :global(.ant-progress) { + .ant-progress-bg { + background: linear-gradient(90deg, #2E4CD4 0%, #4B69F1 100%); + } + + .ant-progress-text { + color: #2E4CD4; + font-weight: 500; + } + } + + } + } + } + } + } + + .analysisRightBlock { + width: calc(100% - 28% - 10px); + height: 100%; + background-color: #fff; + padding: 0; + display: flex; + flex-direction: column; + + .analysisTableHeader { + display: flex; + justify-content: space-between; + align-items: center; + padding: 11px 15px 5px 15px; + + .analysisTableTitle { + display: flex; + align-items: center; + gap: 8px; + font-family: PingFang SC; + font-weight: 500; + font-size: 14px; + color: #333333; + + .analysisTitleIcon { + width: 3px; + height: 16px; + background-color: #2E4CD4; + } + } + } + + .analysisTableActions { + display: flex; + justify-content: space-between; + align-items: center; + gap: 8px; + margin-top: 5px; + padding: 0px 15px; + + .analysisLeftActions { + display: flex; + align-items: center; + } + + .analysisRightActions { + display: flex; + gap: 8px; + align-items: center; + } + + .analysisActionButton { + 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; + } + + .analysisButtonIcon { + font-size: 14px; + font-weight: bold; + } + } + } + + .analysisTableContainer { + flex: 1; + overflow: hidden; + margin: 10px 15px 0 15px; // 上边距10px，左右边距15px + + :global(.ant-table) { + font-size: 12px; + } + + :global(.ant-table-thead > tr > th) { + background-color: #f5f5fa; + font-weight: 500; + font-size: 14px; + color: #333333; + border-bottom: 1px solid #f0f0f0; + padding: 8px 12px; + text-align: center; + } + + :global(.ant-table-tbody > tr > td) { + padding: 8px 12px; + border-bottom: 1px solid #f0f0f0; + text-align: center; + color: #666666; + } + + :global(.ant-table-tbody > tr:hover > td) { + background-color: #f5f5f5; + } + + :global(.ant-pagination) { + margin-top: 16px; + text-align: right; + } + } + } + } + } +} diff --git a/src/pages/business_firewarning/components/RealtimeMonitoring.js b/src/pages/business_firewarning/components/RealtimeMonitoring.js new file mode 100644 index 0000000..152033e --- /dev/null +++ b/src/pages/business_firewarning/components/RealtimeMonitoring.js @@ -0,0 +1,715 @@ +import React, { useEffect, useRef, useState } from 'react'; +import { Card, Result, Select, Button } from 'antd'; +import * as echarts from 'echarts'; +import StandardTable from '@/components/StandardTable'; +import styles from './RealtimeMonitoring.less'; + +import alarm0 from '@/assets/safe_majorHazard/online_monitoring/alarm0.png'; +import alarm1 from '@/assets/safe_majorHazard/online_monitoring/alarm1.png'; +import alarm2 from '@/assets/safe_majorHazard/online_monitoring/alarm2.png'; +import alarm3 from '@/assets/safe_majorHazard/online_monitoring/alarm3.png'; +import exportIcon from '@/assets/safe_majorHazard/online_monitoring/export.png'; +import deleteIcon from '@/assets/safe_majorHazard/online_monitoring/delete.png'; + +const RealtimeMonitoring = () => { + const chartRef = useRef(null); + const [selectedRowKeys, setSelectedRowKeys] = useState([]); + const [selectedRows, setSelectedRows] = useState([]); + const [loading, setLoading] = useState(false); + const [dataSource, setDataSource] = useState([]); + const [pagination, setPagination] = useState({ + current: 1, + pageSize: 5, + total: 0, + }); + + useEffect(() => { + if (chartRef.current) { + const chart = echarts.init(chartRef.current); + + const option = { + color: ['#04A7F3', '#E7C42C', '#EC6941'], + + legend: { + data: ['液位', '温度', '压力'], + top: "-3px", + left: "center", + itemGap: 40, // 图例间距 + textStyle: { + fontSize: 10 + } + }, + grid: { + left: '2%', + right: '4%', + bottom: '2%', + top: '12%', + containLabel: true + }, + xAxis: { + type: 'category', + boundaryGap: false, + data: ['0:00', '2:00', '4:00', '6:00', '8:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00', '22:00', '24:00'], + axisLabel: { + fontSize: 10 + } + }, + yAxis: { + type: 'value', + min: 0, + max: 500, + axisLabel: { + formatter: '{value}', + fontSize: 10 + } + }, + series: [ + { + name: '液位', + type: 'line', + smooth: true, + lineStyle: { + width: 1.5, + color: '#04A7F3' + }, + areaStyle: { + color: { + type: 'linear', + x: 0, + y: 0, + x2: 0, + y2: 1, + colorStops: [ + { offset: 0, color: 'rgba(4, 167, 243, 0.3)' }, + { offset: 1, color: 'rgba(4, 167, 243, 0)' } + ] + } + }, + symbol: 'none', // 不显示数据点 + data: [120, 200, 150, 300, 250, 400, 350, 280, 320, 180, 220, 160, 140] + }, + { + name: '温度', + type: 'line', + smooth: true, + lineStyle: { + width: 1.5, + color: '#E7C42C' + }, + areaStyle: { + color: { + type: 'linear', + x: 0, + y: 0, + x2: 0, + y2: 1, + colorStops: [ + { offset: 0, color: 'rgba(231, 196, 44, 0.3)' }, + { offset: 1, color: 'rgba(231, 196, 44, 0)' } + ] + } + }, + symbol: 'none', + data: [80, 120, 100, 180, 160, 220, 200, 150, 170, 90, 110, 85, 75] + }, + { + name: '压力', + type: 'line', + smooth: true, + lineStyle: { + width: 1.5, + color: '#EC6941' + }, + areaStyle: { + color: { + type: 'linear', + x: 0, + y: 1, + x2: 0, + y2: 0, + colorStops: [ + { offset: 0, color: 'rgba(236, 105, 65, 0)' }, + { offset: 1, color: 'rgba(236, 105, 65, 0.3)' } + ] + } + }, + symbol: 'none', + data: [200, 300, 250, 450, 400, 430, 480, 420, 480, 280, 320, 260, 240] + } + ] + }; + + chart.setOption(option); + + // 响应式调整 - 使用ResizeObserver监听容器尺寸变化 + let resizeTimer = null; + const handleResize = () => { + // 防抖处理，避免频繁调用resize + if (resizeTimer) { + clearTimeout(resizeTimer); + } + resizeTimer = setTimeout(() => { + chart.resize(); + }, 100); + }; + + // 监听窗口大小变化 + window.addEventListener('resize', handleResize); + + // 监听容器尺寸变化（解决菜单栏伸缩时的自适应问题） + let resizeObserver = null; + if (window.ResizeObserver) { + resizeObserver = new ResizeObserver(() => { + // 使用setTimeout确保DOM更新完成后再调整图表 + setTimeout(() => { + handleResize(); + }, 0); + }); + resizeObserver.observe(chartRef.current); + } + + return () => { + window.removeEventListener('resize', handleResize); + if (resizeObserver) { + resizeObserver.disconnect(); + } + if (resizeTimer) { + clearTimeout(resizeTimer); + } + chart.dispose(); + }; + } + }, []); + + // 表格列定义 + const columns = [ + { + title: '编号', + dataIndex: 'id', + key: 'id', + width: 80, + render: (text, record, index) => { + const page = pagination.current || 1; + const pageSize = pagination.pageSize || 5; + const number = (page - 1) * pageSize + index + 1; + return `0${number}`.slice(-2); + } + }, + { + title: '报警时间', + dataIndex: 'alarmTime', + key: 'alarmTime', + width: 150, + }, + { + title: '报警传感器名称', + dataIndex: 'sensorName', + key: 'sensorName', + width: 150, + }, + { + title: '报警类型', + dataIndex: 'alarmType', + key: 'alarmType', + width: 120, + }, + { + title: '报警内容', + dataIndex: 'alarmContent', + key: 'alarmContent', + width: 200, + }, + { + title: '优先级', + dataIndex: 'priority', + key: 'priority', + width: 80, + render: (text) => { + const colorMap = { + '高': '#FF4D4F', + '中': '#FAAD14', + '低': '#52C41A' + }; + return {text}; + } + }, + { + title: '处理状态', + dataIndex: 'status', + key: 'status', + width: 100, + render: (text) => { + const statusMap = { + '未处理': { color: '#FF4D4F', bg: '#FFF2F0' }, + '处理中': { color: '#FAAD14', bg: '#FFFBE6' }, + '已处理': { color: '#52C41A', bg: '#F6FFED' } + }; + const status = statusMap[text] || { color: '#333', bg: '#F5F5F5' }; + return ( + + {text} + + ); + } + }, + { + title: '处理时间', + dataIndex: 'processTime', + key: 'processTime', + width: 150, + }, + { + title: '处理人', + dataIndex: 'processor', + key: 'processor', + width: 100, + }, + { + title: '操作', + key: 'action', + width: 120, + render: (_, record) => ( +
+ +
+ ), + }, + ]; + + // 模拟数据 + const mockData = [ + { + key: '1', + id: '001', + alarmTime: '2024-01-15 08:30:25', + sensorName: 'LNG储罐', + alarmType: '温度超限', + alarmContent: '储罐温度超过安全阈值', + priority: '高', + status: '未处理', + processTime: '-', + processor: '-', + }, + { + key: '2', + id: '002', + alarmTime: '2024-01-15 09:15:10', + sensorName: 'LNG储罐', + alarmType: '压力异常', + alarmContent: '管道压力异常波动', + priority: '中', + status: '处理中', + processTime: '2024-01-15 09:20:00', + processor: '张三', + }, + { + key: '3', + id: '003', + alarmTime: '2024-01-15 10:45:30', + sensorName: 'LNG储罐', + alarmType: '液位异常', + alarmContent: '储罐液位低于警戒线', + priority: '高', + status: '已处理', + processTime: '2024-01-15 11:00:15', + processor: '李四', + }, + { + key: '4', + id: '004', + alarmTime: '2024-01-15 11:20:45', + sensorName: 'LNG储罐', + alarmType: '气体泄漏', + alarmContent: '检测到可燃气体泄漏', + priority: '高', + status: '未处理', + processTime: '-', + processor: '-', + }, + { + key: '5', + id: '005', + alarmTime: '2024-01-15 12:10:20', + sensorName: 'LNG储罐', + alarmType: '设备振动', + alarmContent: '设备异常振动', + priority: '低', + status: '已处理', + processTime: '2024-01-15 12:30:00', + processor: '王五', + }, + { + key: '6', + id: '006', + alarmTime: '2024-01-15 13:25:15', + sensorName: 'LNG管道', + alarmType: '流量异常', + alarmContent: '管道流量异常波动', + priority: '中', + status: '未处理', + processTime: '-', + processor: '-', + }, + { + key: '7', + id: '007', + alarmTime: '2024-01-15 14:10:30', + sensorName: 'LNG储罐', + alarmType: '温度异常', + alarmContent: '储罐温度异常升高', + priority: '高', + status: '处理中', + processTime: '2024-01-15 14:15:00', + processor: '赵六', + }, + { + key: '8', + id: '008', + alarmTime: '2024-01-15 15:45:20', + sensorName: 'LNG管道', + alarmType: '压力超限', + alarmContent: '管道压力超过安全阈值', + priority: '高', + status: '已处理', + processTime: '2024-01-15 16:00:00', + processor: '孙七', + }, + { + key: '9', + id: '009', + alarmTime: '2024-01-15 16:30:45', + sensorName: 'LNG储罐', + alarmType: '液位超限', + alarmContent: '储罐液位超过警戒线', + priority: '中', + status: '未处理', + processTime: '-', + processor: '-', + }, + { + key: '10', + id: '010', + alarmTime: '2024-01-15 17:15:10', + sensorName: 'LNG管道', + alarmType: '泄漏检测', + alarmContent: '检测到轻微气体泄漏', + priority: '低', + status: '已处理', + processTime: '2024-01-15 17:30:00', + processor: '周八', + }, + { + key: '11', + id: '011', + alarmTime: '2024-01-15 18:20:35', + sensorName: 'LNG储罐', + alarmType: '设备故障', + alarmContent: '储罐阀门异常关闭', + priority: '高', + status: '处理中', + processTime: '2024-01-15 18:25:00', + processor: '吴九', + }, + { + key: '12', + id: '012', + alarmTime: '2024-01-15 19:05:50', + sensorName: 'LNG管道', + alarmType: '温度异常', + alarmContent: '管道温度异常下降', + priority: '中', + status: '未处理', + processTime: '-', + processor: '-', + }, + ]; + + // 初始化数据 + useEffect(() => { + setPagination(prev => ({ ...prev, total: mockData.length })); + }, []); + + // 根据分页获取当前页数据 + const getCurrentPageData = () => { + const { current, pageSize } = pagination; + const startIndex = (current - 1) * pageSize; + const endIndex = startIndex + pageSize; + return mockData.slice(startIndex, endIndex); + }; + + // 表格选择变化 + const onSelectChange = (newSelectedRowKeys, newSelectedRows) => { + setSelectedRowKeys(newSelectedRowKeys); + setSelectedRows(newSelectedRows); + }; + + // 分页变化处理 + const handleTableChange = (pagination) => { + setPagination(prev => ({ + ...prev, + current: pagination.current, + pageSize: pagination.pageSize, + })); + }; + + // 导出功能 + const handleExport = () => { + console.log('导出数据'); + // 这里可以添加导出逻辑 + }; + + // 批量删除功能 + const handleBatchDelete = () => { + if (selectedRowKeys.length === 0) { + console.log('没有选中任何行'); + // 可以在这里添加提示用户选择行的逻辑 + return; + } + console.log('批量删除', selectedRowKeys); + // 这里可以添加批量删除逻辑 + }; + + return ( +
+
+
+
+
+
+ alarm0 +
+ +
+
总报警
+
1456
+
+
+ 未处理 6 +
+
+ 处理中 10 +
+
+
+
+
+
+ alarm1 +
+
+
一级报警
+
357
+
+
+ 未处理 6 +
+
+ 处理中 10 +
+
+
+
+
+
+ alarm2 +
+
+
二级报警
+
401
+
+
+ 未处理 6 +
+
+ 处理中 10 +
+
+
+
+
+
+ alarm3 +
+
+
三级报警
+
556
+
+
+ 未处理 6 +
+
+ 处理中 10 +
+
+
+
+
+
+
+
+
+
预警看板
+
+
+
检测对象
+