diff --git a/src/pages/business_basic/module/EvaluationReport.js b/src/pages/business_basic/module/EvaluationReport.js index 6c1f076..44299b9 100644 --- a/src/pages/business_basic/module/EvaluationReport.js +++ b/src/pages/business_basic/module/EvaluationReport.js @@ -1,5 +1,6 @@ import React, { useEffect, useRef, useState } from 'react'; -import { Card, Result, CheckCircleOutlined, Button } from 'antd'; +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 './EvaluationReport.less'; @@ -7,14 +8,19 @@ import styles from './EvaluationReport.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 EvaluationReport = () => { - const trendChartRef = useRef(null); + const chartRef = useRef(null); const pieChartRef = useRef(null); - const barChartRef = useRef(null); - - // 表格相关状态 + const faultPieChartRef = useRef(null); const [selectedRowKeys, setSelectedRowKeys] = useState([]); const [selectedRows, setSelectedRows] = useState([]); const [loading, setLoading] = useState(false); @@ -25,232 +31,333 @@ const EvaluationReport = () => { total: 0, }); - // 隐患趋势分析折线图 + // 饼图初始化 useEffect(() => { - if (trendChartRef.current) { - const chart = echarts.init(trendChartRef.current); - - const option = { - color: ['#FF4D4F', '#FAAD14', '#52C41A'], + if (pieChartRef.current) { + const pieChart = echarts.init(pieChartRef.current); + + const pieOption = { + color: ['#44BB5F', '#F8C541', '#A493FB', '#4B69F1', '#949FD0'], legend: { - data: ['重大隐患', '一般隐患', '轻微隐患'], - top: "5px", - left: "center", - itemGap: 20, + orient: 'vertical', + right: '10%', + top: 'center', + itemWidth: 8, + itemHeight: 8, textStyle: { - fontSize: 10 - } - }, - grid: { - left: '3%', - right: '4%', - bottom: '3%', - top: '20%', - containLabel: true - }, - xAxis: { - type: 'category', - boundaryGap: false, - data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'], - axisLabel: { - fontSize: 10 - } - }, - yAxis: { - type: 'value', - axisLabel: { - fontSize: 10 + fontSize: 12, + color: '#333' } }, - series: [ - { - name: '重大隐患', - type: 'line', - smooth: true, - symbol: 'circle', - symbolSize: 6, - lineStyle: { - width: 2, - color: '#FF4D4F' - }, - itemStyle: { - color: '#FF4D4F', - borderColor: '#FF4D4F', - borderWidth: 2 - }, - data: [12, 8, 15, 10, 18, 14, 20, 16, 22, 19, 25, 21] + series: [{ + name: '设备状态', + type: 'pie', + radius: ['40%', '70%'], + center: ['35%', '50%'], + avoidLabelOverlap: false, + label: { + show: false, + position: 'center' }, - { - name: '一般隐患', - type: 'line', - smooth: true, - symbol: 'circle', - symbolSize: 6, - lineStyle: { - width: 2, - color: '#FAAD14' - }, - itemStyle: { - color: '#FAAD14', - borderColor: '#FAAD14', - borderWidth: 2 - }, - data: [25, 30, 28, 35, 32, 38, 40, 36, 42, 38, 45, 41] + emphasis: { + label: { + show: true, + fontSize: '14', + fontWeight: 'bold' + } }, - { - name: '轻微隐患', - type: 'line', - smooth: true, - symbol: 'circle', - symbolSize: 6, - lineStyle: { - width: 2, - color: '#52C41A' - }, - itemStyle: { - color: '#52C41A', - borderColor: '#52C41A', - borderWidth: 2 - }, - data: [45, 50, 48, 55, 52, 58, 60, 56, 62, 58, 65, 61] - } - ] + labelLine: { + show: false + }, + data: [ + { value: 480, name: '正常' }, + { value: 289, name: '故障' }, + { value: 200, name: '维修中' }, + { value: 150, name: '待验收' }, + { value: 161, name: '停用' } + ] + }] }; - chart.setOption(option); + pieChart.setOption(pieOption); - const handleResize = () => { - if (chart && !chart.isDisposed()) { - chart.resize(); + // 响应式调整 + const handlePieResize = () => { + if (pieChart && !pieChart.isDisposed()) { + pieChart.resize(); } }; - window.addEventListener('resize', handleResize); + window.addEventListener('resize', handlePieResize); return () => { - window.removeEventListener('resize', handleResize); - if (chart && !chart.isDisposed()) { - chart.dispose(); + window.removeEventListener('resize', handlePieResize); + if (pieChart && !pieChart.isDisposed()) { + pieChart.dispose(); } }; } }, []); - // 隐患类型分布玫瑰饼图 + // 故障类型饼图初始化 useEffect(() => { - if (pieChartRef.current) { - const chart = echarts.init(pieChartRef.current); - - const option = { - color: ['#FF4D4F', '#FAAD14', '#52C41A', '#1890FF', '#722ED1', '#13C2C2'], + if (faultPieChartRef.current) { + const faultPieChart = echarts.init(faultPieChartRef.current); + + const faultPieOption = { + color: ['#FF3E48', '#FF8800', '#FFC403'], legend: { orient: 'vertical', - left: 'left', + right: '10%', top: 'center', + itemWidth: 8, + itemHeight: 8, textStyle: { - fontSize: 10 + fontSize: 12, + color: '#333' } }, - series: [ - { - name: '隐患类型', - type: 'pie', - radius: ['20%', '70%'], - center: ['60%', '50%'], - roseType: 'area', - itemStyle: { - borderRadius: 5, - borderColor: '#fff', - borderWidth: 2 - }, + 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, - formatter: '{b}: {c}', - fontSize: 10 - }, - data: [ - { value: 35, name: '设备故障' }, - { value: 28, name: '操作失误' }, - { value: 22, name: '环境因素' }, - { value: 18, name: '管理缺陷' }, - { value: 15, name: '设计缺陷' }, - { value: 12, name: '其他' } - ] - } - ] + fontSize: '14', + fontWeight: 'bold' + } + }, + labelLine: { + show: true + }, + data: [ + { value: 120, name: '紧急' }, + { value: 80, name: '重要' }, + { value: 60, name: '一般' } + ] + }] }; - chart.setOption(option); + faultPieChart.setOption(faultPieOption); - const handleResize = () => { - if (chart && !chart.isDisposed()) { - chart.resize(); + // 响应式调整 + const handleFaultPieResize = () => { + if (faultPieChart && !faultPieChart.isDisposed()) { + faultPieChart.resize(); } }; - window.addEventListener('resize', handleResize); + window.addEventListener('resize', handleFaultPieResize); return () => { - window.removeEventListener('resize', handleResize); - if (chart && !chart.isDisposed()) { - chart.dispose(); + window.removeEventListener('resize', handleFaultPieResize); + if (faultPieChart && !faultPieChart.isDisposed()) { + faultPieChart.dispose(); } }; } }, []); - // 隐患整改情况柱状图 useEffect(() => { - if (barChartRef.current) { - const chart = echarts.init(barChartRef.current); - + if (chartRef.current) { + const chart = echarts.init(chartRef.current); + + // 强制初始化时调整大小 + setTimeout(() => { + if (chart && !chart.isDisposed()) { + chart.resize(); + } + }, 100); + const option = { - color: ['#FF4D4F', '#FAAD14', '#1890FF', '#52C41A', '#722ED1'], + color: ['#8979FF', '#3CC3DF'], + + legend: { + top: "-3px", + itemWidth: 20, + itemHeight: 8, + textStyle: { + fontSize: 10 + } + }, grid: { - left: '3%', + left: '2%', right: '4%', - bottom: '3%', - top: '10%', + bottom: '2%', + top: '12%', containLabel: true }, xAxis: { type: 'category', - data: ['待处理', '处理中', '待审核', '已完成', '已关闭'], + 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: '数量', - type: 'bar', - data: [25, 18, 12, 35, 8], + 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: { - borderRadius: [4, 4, 0, 0] + color: '#fff', + borderColor: '#8979FF', + borderWidth: 1 }, - barWidth: '60%' + 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 = () => { - if (chart && !chart.isDisposed()) { - chart.resize(); + // 防抖处理，避免频繁调用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(); } @@ -264,7 +371,7 @@ const EvaluationReport = () => { title: '编号', dataIndex: 'id', key: 'id', - width: 80, + width: 60, render: (text, record, index) => { const page = pagination.current || 1; const pageSize = pagination.pageSize || 5; @@ -273,44 +380,44 @@ const EvaluationReport = () => { } }, { - title: '报告名称', - dataIndex: 'reportName', - key: 'reportName', - width: 200, + title: '设备编号', + dataIndex: 'deviceId', + key: 'deviceId', + width: 140, }, { - title: '类型', - dataIndex: 'type', - key: 'type', - width: 120, + title: '设备名称', + dataIndex: 'deviceName', + key: 'deviceName', + width: 110, }, { - title: '上传时间', - dataIndex: 'uploadTime', - key: 'uploadTime', - width: 150, + title: '型号规格', + dataIndex: 'modelSpec', + key: 'modelSpec', + width: 140, }, { - title: '版本', - dataIndex: 'version', - key: 'version', - width: 80, + title: '安装位置', + dataIndex: 'installLocation', + key: 'installLocation', + width: 200, }, { title: '状态', dataIndex: 'status', key: 'status', - width: 100, + width: 80, render: (text) => { const statusMap = { - '已完成': { color: '#52C41A', bg: '#F6FFED' }, - '处理中': { color: '#FAAD14', bg: '#FFFBE6' }, - '待审核': { color: '#1890FF', bg: '#E6F7FF' } + '故障': { color: '#FF4D4F', bg: '#FFF2F0' }, + '预警': { color: '#FAAD14', bg: '#FFF3E9' }, + '正常': { color: '#44BB5F', bg: '#D8F7DE' } }; const status = statusMap[text] || { color: '#333', bg: '#F5F5F5' }; return ( - { } }, { - title: '上传人', - dataIndex: 'uploader', - key: 'uploader', - width: 100, + title: '最后维护', + dataIndex: 'lastMaintenance', + key: 'lastMaintenance', + width: 150, }, { title: '操作', key: 'action', - width: 80, + width: 140, render: (_, record) => (
- +
), @@ -346,122 +469,122 @@ const EvaluationReport = () => { { key: '1', id: '001', - reportName: '2024年第一季度安全评估报告', - type: '季度报告', - uploadTime: '2024-01-15 08:30:25', - version: 'V1.0', - status: '已完成', - uploader: '张三', + deviceId: 'HQ-XF-01-001', + deviceName: '消防水泵', + modelSpec: 'XBD5.0/30-125', + installLocation: '总部大楼1层大厅', + status: '故障', + lastMaintenance: '2025-09-10', }, { key: '2', id: '002', - reportName: '重大危险源专项评估报告', - type: '专项报告', - uploadTime: '2024-01-15 09:15:10', - version: 'V2.1', - status: '处理中', - uploader: '李四', + deviceId: 'HQ-XF-01-001', + deviceName: '消防水泵', + modelSpec: 'XBD5.0/30-125', + installLocation: '总部大楼3层 东区', + status: '预警', + lastMaintenance: '2025-09-10', }, { key: '3', id: '003', - reportName: '年度安全风险评估报告', - type: '年度报告', - uploadTime: '2024-01-15 10:45:30', - version: 'V1.5', - status: '待审核', - uploader: '王五', + deviceId: 'HQ-XF-01-001', + deviceName: '消防水泵', + modelSpec: 'XBD5.0/30-125', + installLocation: '总部大楼地下一层', + status: '正常', + lastMaintenance: '2025-09-10', }, { key: '4', id: '004', - reportName: '设备安全评估报告', - type: '设备报告', - uploadTime: '2024-01-15 11:20:45', - version: 'V1.2', - status: '已完成', - uploader: '赵六', + deviceId: 'HQ-XF-01-001', + deviceName: '消防水泵', + modelSpec: 'XBD5.0/30-125', + installLocation: '总部大楼地下一层', + status: '故障', + lastMaintenance: '2025-09-10', }, { key: '5', id: '005', - reportName: '应急预案评估报告', - type: '应急报告', - uploadTime: '2024-01-15 12:10:20', - version: 'V3.0', - status: '已完成', - uploader: '孙七', + deviceId: 'HQ-XF-01-001', + deviceName: '消防水泵', + modelSpec: 'XBD5.0/30-125', + installLocation: '总部大楼地下一层', + status: '正常', + lastMaintenance: '2025-09-10', }, { key: '6', id: '006', - reportName: '环境安全评估报告', - type: '环境报告', - uploadTime: '2024-01-15 13:25:15', - version: 'V1.8', - status: '处理中', - uploader: '周八', + deviceId: 'HQ-XF-01-001', + deviceName: '消防水泵', + modelSpec: 'XBD5.0/30-125', + installLocation: '总部大楼地下一层', + status: '预警', + lastMaintenance: '2025-09-10', }, { key: '7', id: '007', - reportName: '人员安全培训评估报告', - type: '培训报告', - uploadTime: '2024-01-15 14:10:30', - version: 'V2.3', - status: '待审核', - uploader: '吴九', + deviceId: 'HQ-XF-01-001', + deviceName: '消防水泵', + modelSpec: 'XBD5.0/30-125', + installLocation: '总部大楼地下一层', + status: '故障', + lastMaintenance: '2025-09-10', }, { key: '8', id: '008', - reportName: '消防安全评估报告', - type: '消防报告', - uploadTime: '2024-01-15 15:45:20', - version: 'V1.1', - status: '已完成', - uploader: '郑十', + deviceId: 'HQ-XF-01-001', + deviceName: '消防水泵', + modelSpec: 'XBD5.0/30-125', + installLocation: '总部大楼地下一层', + status: '正常', + lastMaintenance: '2025-09-10', }, { key: '9', id: '009', - reportName: '化学品安全评估报告', - type: '化学品报告', - uploadTime: '2024-01-15 16:30:45', - version: 'V2.0', - status: '处理中', - uploader: '钱十一', + deviceId: 'HQ-XF-01-001', + deviceName: '消防水泵', + modelSpec: 'XBD5.0/30-125', + installLocation: '总部大楼地下一层', + status: '预警', + lastMaintenance: '2025-09-10', }, { key: '10', id: '010', - reportName: '职业健康安全评估报告', - type: '职业健康报告', - uploadTime: '2024-01-15 17:15:10', - version: 'V1.6', - status: '已完成', - uploader: '陈十二', + deviceId: 'HQ-XF-01-001', + deviceName: '消防水泵', + modelSpec: 'XBD5.0/30-125', + installLocation: '总部大楼地下一层', + status: '故障', + lastMaintenance: '2025-09-10', }, { key: '11', id: '011', - reportName: '安全管理制度评估报告', - type: '制度报告', - uploadTime: '2024-01-15 18:20:35', - version: 'V1.3', - status: '待审核', - uploader: '刘十三', + deviceId: 'HQ-XF-01-001', + deviceName: '消防水泵', + modelSpec: 'XBD5.0/30-125', + installLocation: '总部大楼地下一层', + status: '正常', + lastMaintenance: '2025-09-10', }, { key: '12', id: '012', - reportName: '安全投入评估报告', - type: '投入报告', - uploadTime: '2024-01-15 19:05:50', - version: 'V1.9', - status: '已完成', - uploader: '黄十四', + deviceId: 'HQ-XF-01-001', + deviceName: '消防水泵', + modelSpec: 'XBD5.0/30-125', + installLocation: '总部大楼地下一层', + status: '预警', + lastMaintenance: '2025-09-10', }, ]; @@ -484,6 +607,18 @@ const EvaluationReport = () => { setSelectedRows(newSelectedRows); }; + // 新增设备按钮点击事件 + const handleAddDevice = () => { + console.log('新增设备'); + // TODO: 实现新增设备逻辑 + }; + + // 导出数据按钮点击事件 + const handleExportData = () => { + console.log('导出数据'); + // TODO: 实现导出数据逻辑 + }; + // 分页变化处理 const handleTableChange = (pagination) => { setPagination(prev => ({ @@ -495,126 +630,169 @@ const EvaluationReport = () => { return (
- {/* 第一个大块 - 高度16% */} -
+ {/* 第二个div - 高度39% */} +
-
- {/* 块1 */} -
-
-
总危险源数量
-
65
-
- ↑ - 较昨日 +2 -
-
-
- 总危险源数量 +
+
+
+
+ 设备状态分布
+ { + console.log(value); + }} + /> +
+ {/* 设备状态饼图 */} +
+
- {/* 块2 */} -
-
-
高风险设备
-
65
-
- ↑ - 较昨日 +2 -
-
-
- 高风险设备 +
+
+
+
+ 设备故障类型分布
+
- +
+
- {/* 第二个大块 - 三个图表块 */} -
+ {/* 第三个div - 占满剩余位置 */} +
- {/* 第一个小块 - 隐患趋势分析 */} -
-
+
+ {/* 第一行块 - 蓝色方块加标题 */} +
-
隐患趋势分析
+
预警信息
-
-
- {/* 第二个小块 - 隐患类型分布 */} -
-
-
-
隐患类型分布
+
+
+
+
灭火器压力不足
+
2号楼3层 丨 15分钟前
+
+
+
重要
+
+
+
+
+
烟雾探测器电池低电量
+
1号楼5层 丨 1小时前
+
+
+
重要
+
+
+
+
+
消防栓维护到期
+
3号楼1层 丨 2小时前
+
+
+
一般
+
+
+
+
+
应急照明故障
+
地下停车场 丨 3小时前
+
+
+
一般
+
+
-
- {/* 第三小块 - 隐患整改情况 */} -
-
-
-
隐患整改情况
+
+ {/* 表格 */} +
+
+
+
消防设备台账
+
+ +
+ + +
-
-
-
-
- {/* 第三大块 - 评估报告表格 */} -
- {/* 首行 左侧标题左对齐 右侧按钮右对齐 */} -
-
-
-
评估报告
+ {/* 表格 */} +
+ + `共 ${total} 条`, + }} + /> +
- - {/* 表格 5行8列 带页码 每页5条数据 */} -
- - `共 ${total} 条`, - }} - scroll={{ x: 1000 }} - /> -
); }; -export default EvaluationReport; \ No newline at end of file +export default EvaluationReport; diff --git a/src/pages/business_basic/module/EvaluationReport.less b/src/pages/business_basic/module/EvaluationReport.less index 5c71c1e..6293138 100644 --- a/src/pages/business_basic/module/EvaluationReport.less +++ b/src/pages/business_basic/module/EvaluationReport.less @@ -5,9 +5,9 @@ flex-direction: column; gap: 10px; - // 第一个大块 - 高度16% - .EcontainerTop { - height: 16%; + // 第二个div - 高度39% + .EcontainerMiddle { + height: 33%; border-radius: 4px; display: flex; flex-direction: column; @@ -15,210 +15,460 @@ .sectionContent { height: 100%; display: flex; - flex-direction: column; + display: flex; + gap: 10px; + height: 100%; - .blocksContainer { - flex: 1; - display: flex; - gap: 10px; + .middleBlock1 { + // flex: 1; + width: 28%; height: 100%; + background: #fff; - .blockItem { - flex: 1; - height: 100%; + border: 2px solid #fff; + // border-radius: 4px; + position: relative; + padding: 0px 10px 10px 2px; + font-family: PingFang SC; + font-size: 14px; + color: #333333; + + .block1Header { + position: absolute; + top: 5px; + left: 10px; + right: 10px; display: flex; - background: linear-gradient(170.5deg, #F5F7FF 6.87%, #FFFFFF 47.65%); - border-radius: 4px; - border: 2px solid #FFFFFF; + justify-content: space-between; + align-items: center; + z-index: 10; - .blockLeft { - width: 60%; - height: 100%; + .block1Title { display: flex; - flex-direction: column; - justify-content: center; - padding: 15px; - padding-left: 20px; + align-items: center; gap: 8px; + font-weight: 500; + font-size: 14px; + color: #333333; - .blockTitle { - font-family: PingFang SC; - font-weight: 400; + .titleIcon { + width: 3px; + height: 14px; + background-color: #2E4CD4; + } + } + + .block1Segmented { + padding: 0; + margin: 0; + border: 1px solid #E3E3E3; + border-radius: 4px; + height: 28px; + + :global(.ant-segmented) { + padding: 0; + margin: 0; + height: 28px; + } + + :global(.ant-segmented-item) { font-size: 12px; - color: #666666; - line-height: 1.2; + padding: 2px 8px; + height: 26px; + line-height: 26px; + display: flex; + align-items: center; + justify-content: center; + } + + :global(.ant-segmented-item-selected) { + background-color: #1890ff; + color: #fff; + } + } + } + + .deviceStatusChart { + position: absolute; + top: 35px; + left: 10px; + right: 10px; + bottom: 10px; + z-index: 10; + } + } + + .middleBlock12 { + 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; + + .block1Header { + position: absolute; + top: 5px; + left: 10px; + right: 10px; + display: flex; + justify-content: space-between; + align-items: center; + z-index: 10; + + .block1Title { + display: flex; + align-items: center; + gap: 8px; + font-weight: 500; + font-size: 14px; + color: #333333; + + .titleIcon { + width: 3px; + height: 14px; + background-color: #2E4CD4; } + } + + .block1Segmented { + padding: 0; + margin: 0; + border: 1px solid #E3E3E3; + border-radius: 4px; + height: 28px; - .blockNumber { - font-family: PingFang SC; - font-weight: 700; - font-size: 24px; - color: #333333; - line-height: 1.2; + :global(.ant-segmented) { + padding: 0; + margin: 0; + height: 28px; } - .blockChange { - font-family: PingFang SC; - font-weight: 400; + :global(.ant-segmented-item) { font-size: 12px; - color: #1269FF; - line-height: 1.2; + padding: 2px 8px; + height: 26px; + line-height: 26px; display: flex; align-items: center; - gap: 4px; + justify-content: center; + } - .arrow { - font-size: 14px; - font-weight: bold; - } + :global(.ant-segmented-item-selected) { + background-color: #1890ff; + color: #fff; + } + } - .checkIcon { - font-size: 16px; - color: #1269FF; - } + .customSelect { + :global(.ant-select-single:not(.ant-select-customize-input) .ant-select-selector) { + height: 26px !important; + display: flex !important; + align-items: center !important; + } + + :global(.ant-select-selection-item) { + line-height: 24px !important; + height: 24px !important; + display: flex !important; + align-items: center !important; } } + } - .blockRight { - flex: 1; - height: 100%; - background-color: transparent; - border-radius: 0 4px 4px 0; + .deviceStatusChart { + position: absolute; + top: 35px; + left: 10px; + right: 10px; + bottom: 10px; + z-index: 10; + } + } + + .middleBlock2 { + flex: 1; + 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; + + .middleBlock2Title { + display: flex; + justify-content: space-between; + align-items: center; + // margin-bottom: 10px; + + .titleLeft { display: flex; align-items: center; - justify-content: center; + gap: 8px; + font-weight: 500; + font-size: 14px; + color: #333333; - .blockImage { - height: 130%; - object-fit: contain; - margin-right: -10px; + .titleIcon { + width: 3px; + height: 14px; + background-color: #2E4CD4; } } + + .titleRight { + display: flex; + align-items: center; + gap: 8px; + font-size: 12px; + color: #666; + } + } + + .middleBlock2Chart { + width: 100%; + height: 100%; + // min-height: 200px; } } } } - // 第二个大块 - 三个图表块 - .EcontainerMiddle { - height: 30%; - border-radius: 4px; - background-color: #fff; + // 第三个div - 高度不超过45% + .EcontainerBottom { + height: 45%; // 限制高度不超过45% + max-height: 45%; // 确保最大高度不超过45% display: flex; flex-direction: column; .sectionContent { - height: 100%; display: flex; flex-direction: row; gap: 10px; - padding: 10px; + padding: 0; - .chartBlock { - flex: 1; + .leftBlock { + width: 28%; + flex-shrink: 0; height: 100%; - background: linear-gradient(170.5deg, #EBEFF4 6.87%, #FFFFFF 53.01%); - border: 2px solid #fff; - border-radius: 4px; + background: #fff; + // background-size: cover; + padding: 0; display: flex; flex-direction: column; - font-family: PingFang SC; - font-size: 14px; - color: #333333; + gap: 10px; + padding: 15px; - .chartTitle { + .leftBlockTitle { display: flex; align-items: center; gap: 8px; + font-family: PingFang SC; font-weight: 500; font-size: 14px; color: #333333; - padding: 10px 15px 5px 15px; + margin-bottom: 10px; .titleIcon { width: 3px; - height: 14px; + height: 16px; background-color: #2E4CD4; } } - .chartContainer { - flex: 1; + .developmentContainer { width: 100%; - height: 120%; - // // min-height: 200px; - } - } - } - } + height: 100%; + display: flex; + flex-direction: column; + gap: 8px; - // 第三大块 - 评估报告表格 - .EcontainerBottom { - flex: 1; - background-color: #fff; - border-radius: 4px; - display: flex; - flex-direction: column; - padding: 10px; + .developmentBlock1 { + flex: 1; + background-color: #F1F7FF; + border-radius: 4px; + padding: 15px 20px; + display: flex; + align-items: center; + width: 100%; - .tableHeader { - display: flex; - justify-content: space-between; - align-items: center; - margin-bottom: 10px; + .leftContent { + flex: 1; + display: flex; + flex-direction: column; + gap: 8px; + min-width: 0; - .tableTitle { - display: flex; - align-items: center; - gap: 8px; - font-weight: 500; - font-size: 14px; - color: #333333; + .mainText { + color: #333333; + font-size: 14px; + font-weight: 500; + font-family: PingFang SC; + width: 100%; + max-width: 500px; + } - .titleIcon { - width: 3px; - height: 14px; - background-color: #2E4CD4; - } - } - } + .subText { + color: #666666; + font-size: 12px; + font-weight: 400; + font-family: PingFang SC; + width: 100%; + max-width: 400px; + } + } - .tableContainer { - flex: 1; - overflow: hidden; + .rightContent { + flex: 0 0 auto; + display: flex; + justify-content: flex-end; + align-items: center; + padding-right: 10px; + min-width: 80px; - :global(.ant-table-wrapper) { - height: 100%; - } + .importantTag { + background-color: #FFE0E2; + color: #FF3E48; + font-size: 14px; + font-weight: 500; + font-family: PingFang SC; + width: 45px; + height: 25px; + display: flex; + align-items: center; + justify-content: center; + border-radius: 4px; + } - :global(.ant-table) { - height: 100%; + .normalTag { + background-color: #DAF3FF; + color: #00AAFA; + font-size: 14px; + font-weight: 500; + font-family: PingFang SC; + width: 45px; + height: 25px; + + display: flex; + align-items: center; + justify-content: center; + border-radius: 4px; + } + } + } + } } - :global(.ant-table-container) { + .rightBlock { + width: calc(100% - 28% - 10px); height: 100%; - } + background-color: #fff; + padding: 0; + display: flex; + flex-direction: column; - :global(.ant-table-body) { - height: calc(100% - 55px); // 减去表头高度 - overflow-y: auto; - } + .tableHeader { + display: flex; + justify-content: space-between; + align-items: center; + padding: 8px 15px 5px 15px; - :global(.ant-table-tbody > tr > td) { - padding: 8px 16px; - font-size: 12px; - } + .tableTitle { + display: flex; + align-items: center; + gap: 8px; + font-family: PingFang SC; + font-weight: 500; + font-size: 14px; + color: #333333; - :global(.ant-table-thead > tr > th) { - padding: 8px 16px; - font-size: 12px; - font-weight: 500; - background-color: #fafafa; - } + .titleIcon { + width: 3px; + height: 16px; + background-color: #2E4CD4; + } + } + + .tableActions { + display: flex; + gap: 8px; + margin-top: 5px; + + .actionButton { + 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; + } + + .buttonIcon { + font-size: 14px; + font-weight: bold; + } + } + } + } + + .tableContainer { + flex: 1; + overflow: hidden; + margin: 10px 15px 0 15px; // 上边距10px，左右边距15px - :global(.ant-pagination) { - margin-top: 10px; - text-align: right; + :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; + } + + :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_basic/module/OnlineMonitoring.js b/src/pages/business_basic/module/OnlineMonitoring.js index 047b795..3e4b6b5 100644 --- a/src/pages/business_basic/module/OnlineMonitoring.js +++ b/src/pages/business_basic/module/OnlineMonitoring.js @@ -487,6 +487,7 @@ const OnlineMonitoring = () => {
alarm0
+
总报警
1456