diff --git a/config/routes.js b/config/routes.js index dc7441b..eedb4c6 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/firekeynotearea', diff --git a/src/assets/business_basic/background_lqyj.svg b/src/assets/business_basic/background_lqyj.svg new file mode 100644 index 0000000..13c7204 --- /dev/null +++ b/src/assets/business_basic/background_lqyj.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/src/assets/business_basic/background_re.svg b/src/assets/business_basic/background_re.svg new file mode 100644 index 0000000..2652d05 --- /dev/null +++ b/src/assets/business_basic/background_re.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/src/assets/business_basic/icon_echart.svg b/src/assets/business_basic/icon_echart.svg new file mode 100644 index 0000000..7c08254 --- /dev/null +++ b/src/assets/business_basic/icon_echart.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/business_basic/iconre1.svg b/src/assets/business_basic/iconre1.svg new file mode 100644 index 0000000..d5dcf48 --- /dev/null +++ b/src/assets/business_basic/iconre1.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/assets/business_basic/iconre2.svg b/src/assets/business_basic/iconre2.svg new file mode 100644 index 0000000..6e46eb5 --- /dev/null +++ b/src/assets/business_basic/iconre2.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/assets/business_basic/iconre3.svg b/src/assets/business_basic/iconre3.svg new file mode 100644 index 0000000..2e5a600 --- /dev/null +++ b/src/assets/business_basic/iconre3.svg @@ -0,0 +1,6 @@ + + + + + + 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_basic/basic.js b/src/pages/business_basic/basic.js index 7a58125..dd93403 100644 --- a/src/pages/business_basic/basic.js +++ b/src/pages/business_basic/basic.js @@ -1,10 +1,11 @@ import React, { useState } from 'react'; import { Card, Row, Col, Statistic, Progress, Button, Space } from 'antd'; import styles from './basic.less'; -import ResponsibilityImplementation from './module/ResponsibilityImplementation'; //责任落实 -import OnlineMonitoring from './module/OnlineMonitoring'; //在线监测预警 -import RiskAssessment from './module/RiskAssessment'; //风险管控 -import EvaluationReport from './module/EvaluationReport'; //评估报告 +import ResponsibilityImplementation from './components/ResponsibilityImplementation'; +import OnlineMonitoring from './components/OnlineMonitoring'; +import RiskAssessment from './components/RiskAssessment'; +import EvaluationReport from './components/EvaluationReport'; +import LicenseManagement from './components/LicenseManagement'; @@ -20,6 +21,8 @@ const SafeMajorHazardList = () => { switch (activeModule) { case 'organization': return ; + case 'license': + return ; case 'equipment': return ; case 'firefighting': @@ -40,11 +43,11 @@ const SafeMajorHazardList = () => { onClick={() => handleModuleClick("organization")} >组织机构管理 - {/* */} + + + + ); + } + }, + ]; + + + return ( +
+
+ +
+
+
+ 证件类型分布 +
+
+
+
+
+ +
+
+
+ 证件状态概览 +
+
+ {/* 上半部分：进度条和百分比 */} +
+
+
有效证照
+
+ + 50% +
+
+ +
+
即将到期
+
+ + 15% +
+
+ +
+
已过期
+
+ + 20% +
+
+ +
+
待审核材料
+
+ + 15% +
+
+
+ + {/* 下半部分：数字统计 */} +
+ + +
+
42
+
总证照数
+
+ + +
+
8
+
即将过期
+
+ + +
+
6
+
已过期
+
+ + +
+
6
+
待审核材料
+
+ + +
+
+
+ + +
+
+
+ 临期预警 +
+
+ {/* 透明块容器 */} +
+ {/* 四个垂直分布的卡片 */} +
+
+
安全生产许可证
+
编号: AQXK-2023-0582
+
+
+ 15天后到期 +
+
+ +
+
+
安全评估报告
+
编号: AQPG-2023-0125
+
+
+ 30天后到期 +
+
+ +
+
+
施工资质证书
+
编号: SGZZ-2023-0089
+
+
+ 7天后到期 +
+
+ +
+
+
应急预案
+
编号: YJYA-2023-0045
+
+
+ 4天后到期 +
+
+
+
+
+
+ + + + {/* 证照列表区域 */} +
+
+
+
+ 证照列表 +
+
+ setSearchValue(e.target.value)} + onSearch={(value) => console.log('搜索:', value)} + className={styles.searchInput} + /> + + +
+
+ { }} // ======== 行选择事件处理函数 ======== + onChange={() => { }} // ======== 表格变化事件处理函数 ======== + pagination={{ + currentPage: 1, + pageSize: 5, + total: tableData.length, + showSizeChanger: false, + showQuickJumper: true, + showTotal: (total, range) => + `共 ${total} 条`, + locale: { + jump_to: '前往', + page: '页', + items_per_page: '条/页', + } + }} + /> +
+
+ ); +}; + +export default LicenseManagement; diff --git a/src/pages/business_basic/components/LicenseManagement.less b/src/pages/business_basic/components/LicenseManagement.less new file mode 100644 index 0000000..560fa0e --- /dev/null +++ b/src/pages/business_basic/components/LicenseManagement.less @@ -0,0 +1,498 @@ +.licenseManagementContainer { + height: 90vh; + + .topSectionContainer { + padding: 0; + margin: 15px 0px 15px 5px; + height: 40%; + display: flex; + gap: 15px; + align-items: stretch; + + .firstBlock { + width: 30%; + background-color: #fff; + display: flex; + flex-direction: column; + padding: 10px 16px; + border-radius: 2px; + + .chartHeader { + display: flex; + align-items: center; + margin-bottom: 16px; + + .colorBlock { + width: 2px; + height: 18px; + background-color: #2E4CD4; + margin-right: 8px; + border-radius: 1px; + } + + .chartTitle { + font-size: 14px; + font-weight: 500; + color: #333333; + line-height: 18px; + } + } + + .chartContainer { + flex: 1; + width: 100%; + position: relative; + + .chart { + width: 100%; + height: 100%; + min-height: 200px; + } + + // 进度条区域样式 + .progressSection { + margin-bottom: 20px; + + .progressItem { + margin-bottom: 16px; + + .progressLabel { + font-size: 12px; + color: #666; + margin-bottom: 8px; + font-weight: 400; + } + + .progressWrapper { + display: flex; + align-items: center; + gap: 12px; + + .customProgress { + flex: 1; + + :global(.ant-progress-bg) { + height: 8px !important; + border-radius: 4px; + } + + :global(.ant-progress-outer) { + .ant-progress-inner { + background-color: #F0F0F0; + border-radius: 4px; + } + } + } + + .progressPercent { + font-size: 12px; + color: #333; + font-weight: 500; + min-width: 30px; + text-align: right; + } + } + } + } + + // 数字统计区域样式 + .statsSection { + .statItem { + text-align: center; + padding: 8px; + + .statNumber { + font-size: 24px; + font-weight: 600; + line-height: 1.2; + margin-bottom: 4px; + } + + .statLabel { + font-size: 12px; + color: #666; + font-weight: 400; + } + } + } + } + } + + .secondBlock { + width: 30%; + background-color: #fff; + display: flex; + flex-direction: column; + padding: 10px 16px; + border-radius: 2px; + + .chartHeader { + display: flex; + align-items: center; + margin-bottom: 8px; + + .colorBlock { + width: 2px; + height: 18px; + background-color: #2E4CD4; + margin-right: 8px; + border-radius: 1px; + } + + .chartTitle { + font-size: 14px; + font-weight: 500; + color: #333333; + // line-height: 18px; + } + } + + .chartContainer { + flex: 1; + width: 100%; + position: relative; + + // 进度条区域样式 + .progressSection { + // margin-bottom: 20px; + + .progressItem { + // margin-bottom: 16px; + + .progressLabel { + font-size: 10px; + color: #666; + // margin-bottom: 8px; + font-weight: 400; + } + + .progressWrapper { + display: flex; + align-items: center; + gap: 5px; + + .customProgress { + flex: 1; + + :global(.ant-progress-bg) { + height: 8px !important; + border-radius: 4px; + } + + :global(.ant-progress-outer) { + .ant-progress-inner { + background-color: #F0F0F0; + border-radius: 4px; + } + } + } + + .progressPercent { + font-size: 12px; + color: #333; + font-weight: 500; + min-width: 30px; + text-align: right; + } + } + } + } + + // 数字统计区域样式 + .statsSection { + .statItem { + text-align: center; + padding: 0px 2px 2px 2px; + + .statNumber { + font-size: 22px; + font-weight: 600; + line-height: 1.2; + margin-bottom: 4px; + } + + .statLabel { + font-size: 12px; + color: #666; + font-weight: 400; + } + } + } + } + } + + .thirdBlock { + flex: 1; + background-image: url('@/assets/business_basic/background_lqyj.svg'); + background-color: #fff; + background-repeat: no-repeat; + background-size: cover; + background-position: center; + display: flex; + flex-direction: column; + padding: 10px 16px; + border-radius: 2px; + + .chartHeader { + display: flex; + align-items: center; + margin-bottom: 8px; + + .colorBlock { + width: 2px; + height: 18px; + background-color: #2E4CD4; + margin-right: 8px; + border-radius: 1px; + } + + .chartTitle { + font-size: 14px; + font-weight: 500; + color: #333333; + } + } + + .chartContainer { + flex: 1; + width: 100%; + position: relative; + + // 透明块容器样式 + .transparentBlock { + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + gap: 8px; + padding: 4px 8px; + + .licenseCard { + width: 60%; + height: auto; + background-color: #FFF9F4; + border: 1px solid #FFD7BB; + border-radius: 2px; + padding: 5px 8px; + display: flex; + justify-content: space-between; + align-items: center; + // box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); + + .cardContent { + flex: 1; + display: flex; + flex-direction: column; + gap: 4px; + + .licenseName { + font-size: 12px; + font-weight: 500; + color: #333; + line-height: 1.2; + } + + .licenseNumber { + font-size: 12px; + color: #666; + font-weight: 400; + } + } + + .expiryTag { + width: 38%; + background-color: #FFEDDE; + border-radius: 2px; + padding: 5px 12px; + margin-left: 12px; + + + .expiryText { + font-size: 12px; + font-weight: 500; + display: flex; + align-items: center; + color: #D46B08; + } + } + } + } + } + } + } + + + .listCard { + padding: 0; + padding: 15px 5px 15px 20px; + flex: 1; + // display: flex; + gap: 15px; + background-color: #fff; + // align-items: stretch; + + .chartHeader { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 16px; + + .headerLeft { + display: flex; + align-items: center; + + .colorBlock { + width: 2px; + height: 18px; + background-color: #2E4CD4; + margin-right: 8px; + border-radius: 1px; + } + + .chartTitle { + font-size: 14px; + font-weight: 500; + color: #333333; + line-height: 18px; + } + } + + .headerRight { + display: flex; + align-items: center; + gap: 12px; + + .searchInput { + width: 280px; + + .ant-input { + border-radius: 2px; + border: 1px solid #d9d9d9; + + &:hover { + border-color: #40a9ff; + } + + &:focus { + border-color: #40a9ff; + box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2); + } + } + } + + .typeSelector { + width: 120px; + + .ant-select-selector { + border-radius: 2px; + border: 1px solid #d9d9d9; + + &:hover { + border-color: #40a9ff; + } + } + + &.ant-select-focused .ant-select-selector { + border-color: #40a9ff; + box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2); + } + } + + .addButton { + border-radius: 4px; + background-color: #2E4CD4; + // border-color: #1890ff; + height: 32px; + padding: 4px 15px; + font-size: 14px; + display: flex; + align-items: center; + justify-content: center; + + &:hover { + background-color: #2E4CD4; + // border-color: #40a9ff; + } + + &:focus { + background-color: #2E4CD4; + // border-color: #40a9ff; + } + } + } + } + + // StandardTable 组件样式 + :global(.ant-table) { + font-size: 12px; + } + :global(.ant-pagination-options-quick-jumper input) { + text-align: center !important; + } + + :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-pagination) { + margin-top: 16px; + text-align: right; + } + } +} + +// 覆盖Ant Design默认样式 +.licenseManagementContainer { + .ant-card { + box-shadow: none; + } + + .ant-card-body { + padding: 20px; + } + + .ant-table { + font-size: 14px; + } + + .ant-tag { + border-radius: 4px; + font-size: 12px; + padding: 2px 8px; + } + + .ant-btn-link { + padding: 0; + height: auto; + font-size: 14px; + } + + .ant-input-search { + .ant-input { + border-radius: 6px; + } + } + + .ant-select { + .ant-select-selector { + border-radius: 6px; + } + } + + .ant-btn-primary { + border-radius: 6px; + } +} \ No newline at end of file diff --git a/src/pages/business_basic/module/OnlineMonitoring.js b/src/pages/business_basic/components/OnlineMonitoring.js similarity index 100% rename from src/pages/business_basic/module/OnlineMonitoring.js rename to src/pages/business_basic/components/OnlineMonitoring.js diff --git a/src/pages/business_basic/module/OnlineMonitoring.less b/src/pages/business_basic/components/OnlineMonitoring.less similarity index 100% rename from src/pages/business_basic/module/OnlineMonitoring.less rename to src/pages/business_basic/components/OnlineMonitoring.less diff --git a/src/pages/business_basic/module/ResponsibilityImplementation.js b/src/pages/business_basic/components/ResponsibilityImplementation.js similarity index 100% rename from src/pages/business_basic/module/ResponsibilityImplementation.js rename to src/pages/business_basic/components/ResponsibilityImplementation.js diff --git a/src/pages/business_basic/module/ResponsibilityImplementation.less b/src/pages/business_basic/components/ResponsibilityImplementation.less similarity index 100% rename from src/pages/business_basic/module/ResponsibilityImplementation.less rename to src/pages/business_basic/components/ResponsibilityImplementation.less diff --git a/src/pages/business_basic/module/RiskAssessment.js b/src/pages/business_basic/components/RiskAssessment.js similarity index 100% rename from src/pages/business_basic/module/RiskAssessment.js rename to src/pages/business_basic/components/RiskAssessment.js diff --git a/src/pages/business_basic/module/RiskAssessment.less b/src/pages/business_basic/components/RiskAssessment.less similarity index 100% rename from src/pages/business_basic/module/RiskAssessment.less rename to src/pages/business_basic/components/RiskAssessment.less 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..c52a6b4 --- /dev/null +++ b/src/pages/business_firewarning/components/RealtimeMonitoring.js @@ -0,0 +1,848 @@ +import React, { useEffect, useRef, useState } from 'react'; +import { Card, Result, Select, Button, Segmented } from 'antd'; +import { CheckCircleOutlined, ExportOutlined } from '@ant-design/icons'; +import * as echarts from 'echarts'; +import StandardTable from '@/components/StandardTable'; +import styles from './RealtimeMonitoring.less'; +// import './RealtimeMonitoring.less'; + + +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 eqicon3 from '@/assets/business_basic/iconre2.svg'; +import eqicon4 from '@/assets/business_basic/iconre3.svg'; +// import eqicon4 from '@/assets/business_basic/iconre1.svg'; + + + + +const RealtimeMonitoring = () => { + 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: 5, + total: 0, + }); + + // 饼图初始化 + useEffect(() => { + if (pieChartRef.current) { + const pieChart = echarts.init(pieChartRef.current); + + const pieOption = { + color: ['#4B69F1', '#FFD85A', '#A493FB', '#9AA5D5'], + legend: { + orient: 'vertical', + right: '10%', + top: 'center', + itemWidth: 10, + itemHeight: 3, + textStyle: { + fontSize: 12, + color: '#333' + } + }, + series: [{ + name: '设备状态', + type: 'pie', + radius: ['40%', '70%'], + center: ['35%', '50%'], + avoidLabelOverlap: false, + label: { + show: false, + position: 'center' + }, + emphasis: { + label: { + show: true, + fontSize: '14', + fontWeight: 'bold' + } + }, + labelLine: { + show: false + }, + data: [ + { value: 480, name: '正常运行' }, + { value: 289, name: '待维护' }, + { value: 200, name: '故障' }, + { value: 150, name: '离线' } + ] + }] + }; + + pieChart.setOption(pieOption); + + // 响应式调整 + const handlePieResize = () => { + if (pieChart && !pieChart.isDisposed()) { + pieChart.resize(); + } + }; + + window.addEventListener('resize', handlePieResize); + + return () => { + window.removeEventListener('resize', handlePieResize); + if (pieChart && !pieChart.isDisposed()) { + pieChart.dispose(); + } + }; + } + }, []); + + // 故障类型饼图初始化 + 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(() => { + if (chartRef.current) { + const chart = echarts.init(chartRef.current); + + // 强制初始化时调整大小 + setTimeout(() => { + if (chart && !chart.isDisposed()) { + chart.resize(); + } + }, 100); + + const option = { + color: ['#8979FF', '#3CC3DF'], + + legend: { + // data: ['消防水泵1', '消防水泵2'], + top: "-3px", + // left: "center", + // itemGap: 40, + itemWidth: 20, + itemHeight: 8, + // icon: 'path://M902 472.7H747.9c-19.1-113.3-117.7-200-236.4-200s-217.3 86.7-236.4 200H119.7c-4.4 0-8 3.6-8 8v64c0 4.4 3.6 8 8 8h155.5c19.1 113.3 117.7 200 236.4 200S728.9 666 748 552.7h154c4.4 0 8-3.6 8-8v-64c0-4.4-3.6-8-8-8z m-390.5 200c-88.2 0-160-71.8-160-160s71.8-160 160-160 160 71.8 160 160-71.8 160-160 160z', + textStyle: { + fontSize: 10 + } + }, + grid: { + left: '2%', + right: '4%', + bottom: '2%', + top: '12%', + containLabel: true + }, + 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'], + axisLabel: { + fontSize: 10 + } + }, + yAxis: { + type: 'value', + min: 0, + max: 30, + axisLabel: { + formatter: '{value}', + fontSize: 10 + } + }, + series: [ + { + name: '消防水泵1', + type: 'line', + smooth: false, + lineStyle: { + width: 2, + color: '#8979FF' + }, + areaStyle: { + color: { + type: 'linear', + x: 0, + y: 0, + x2: 0, + y2: 1, + colorStops: [ + { offset: 0, color: 'rgba(137, 121, 255, 0.3)' }, + { offset: 1, color: 'rgba(137, 121, 255, 0.05)' } + ] + } + }, + symbol: 'circle', + symbolSize: 4, + itemStyle: { + color: '#fff', + borderColor: '#8979FF', + borderWidth: 1 + }, + data: [12, 15, 18, 14, 16, 20, 22, 19, 17, 21, 23, 25] + }, + { + name: '消防水泵2', + type: 'line', + smooth: false, + lineStyle: { + width: 2, + color: '#3CC3DF' + }, + areaStyle: { + color: { + type: 'linear', + x: 0, + y: 0, + x2: 0, + y2: 1, + colorStops: [ + { offset: 0, color: 'rgba(60, 195, 223, 0.3)' }, + { offset: 1, color: 'rgba(60, 195, 223, 0.05)' } + ] + } + }, + symbol: 'circle', + symbolSize: 4, + itemStyle: { + color: '#fff', + borderColor: '#3CC3DF', + borderWidth: 1 + }, + data: [8, 11, 14, 10, 13, 17, 19, 16, 14, 18, 20, 22] + } + ] + }; + + 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 || 5; + 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: 140, + }, + { + title: '安装位置', + dataIndex: 'installLocation', + key: 'installLocation', + width: 200, + }, + { + title: '状态', + dataIndex: 'status', + key: 'status', + width: 80, + render: (text) => { + const statusMap = { + '故障': { color: '#FF4D4F', bg: '#FFF2F0' }, + '预警': { color: '#FAAD14', bg: '#FFF3E9' }, + '正常': { 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: 'XBD5.0/30-125', + installLocation: '总部大楼1层大厅', + status: '故障', + lastMaintenance: '2025-09-10', + }, + { + key: '2', + id: '002', + deviceId: 'HQ-XF-01-001', + deviceName: '消防水泵', + modelSpec: 'XBD5.0/30-125', + installLocation: '总部大楼3层 东区', + status: '预警', + lastMaintenance: '2025-09-10', + }, + { + key: '3', + id: '003', + deviceId: 'HQ-XF-01-001', + deviceName: '消防水泵', + modelSpec: 'XBD5.0/30-125', + installLocation: '总部大楼地下一层', + status: '正常', + lastMaintenance: '2025-09-10', + }, + { + key: '4', + id: '004', + deviceId: 'HQ-XF-01-001', + deviceName: '消防水泵', + modelSpec: 'XBD5.0/30-125', + installLocation: '总部大楼地下一层', + status: '故障', + lastMaintenance: '2025-09-10', + }, + { + key: '5', + id: '005', + deviceId: 'HQ-XF-01-001', + deviceName: '消防水泵', + modelSpec: 'XBD5.0/30-125', + installLocation: '总部大楼地下一层', + status: '正常', + lastMaintenance: '2025-09-10', + }, + { + key: '6', + id: '006', + deviceId: 'HQ-XF-01-001', + deviceName: '消防水泵', + modelSpec: 'XBD5.0/30-125', + installLocation: '总部大楼地下一层', + status: '预警', + lastMaintenance: '2025-09-10', + }, + { + key: '7', + id: '007', + deviceId: 'HQ-XF-01-001', + deviceName: '消防水泵', + modelSpec: 'XBD5.0/30-125', + installLocation: '总部大楼地下一层', + status: '故障', + lastMaintenance: '2025-09-10', + }, + { + key: '8', + id: '008', + deviceId: 'HQ-XF-01-001', + deviceName: '消防水泵', + modelSpec: 'XBD5.0/30-125', + installLocation: '总部大楼地下一层', + status: '正常', + lastMaintenance: '2025-09-10', + }, + { + key: '9', + id: '009', + deviceId: 'HQ-XF-01-001', + deviceName: '消防水泵', + modelSpec: 'XBD5.0/30-125', + installLocation: '总部大楼地下一层', + status: '预警', + lastMaintenance: '2025-09-10', + }, + { + key: '10', + id: '010', + deviceId: 'HQ-XF-01-001', + deviceName: '消防水泵', + modelSpec: 'XBD5.0/30-125', + installLocation: '总部大楼地下一层', + status: '故障', + lastMaintenance: '2025-09-10', + }, + { + key: '11', + id: '011', + deviceId: 'HQ-XF-01-001', + deviceName: '消防水泵', + modelSpec: 'XBD5.0/30-125', + installLocation: '总部大楼地下一层', + status: '正常', + lastMaintenance: '2025-09-10', + }, + { + key: '12', + id: '012', + deviceId: 'HQ-XF-01-001', + deviceName: '消防水泵', + modelSpec: 'XBD5.0/30-125', + installLocation: '总部大楼地下一层', + status: '预警', + lastMaintenance: '2025-09-10', + }, + ]; + + // 初始化数据 + 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, + })); + }; + + return ( +
+ {/* 第一个div - 高度20% */} +
+
+
+ {/* 块1 */} +
+
+
设备总数
+
1280
+
+
+ 设备总数 +
+
+ + {/* 块2 */} +
+
+
本月报警
+
32
+
+
+ 高风险设备 +
+
+ + {/* 块3 */} +
+
+
巡检任务
+
158
+
+
+ 今日预警次数 +
+
+ + {/* 块4 */} +
+
+
待处理隐患
+
19
+
+
+ 未处理预警 +
+
+ +
+
+
+ +
+
+ +
+
+
+
+
设备运行参数
+
+
+
+
+
+ + +
+
+
+
+ 设备状态分布 +
+ +
+ {/* 设备状态饼图 */} +
+
+
+ + +
+
+
+
+ 设备故障类型分布 +
+