From 4325ffc2b655f053abeec3e3413462001092ae46 Mon Sep 17 00:00:00 2001 From: wangyunfei <1224056307@qq,com> Date: Thu, 16 Oct 2025 16:55:52 +0800 Subject: [PATCH] =?UTF-8?q?=E6=8F=90=E4=BA=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/business_basic/background_re.svg | 13 + src/assets/business_basic/iconre1.svg | 6 + src/assets/business_basic/iconre2.svg | 6 + src/assets/business_basic/iconre3.svg | 6 + .../components/RealtimeMonitoring.js | 965 ++++++++------ .../components/RealtimeMonitoring.less | 1145 ++++++----------- 6 files changed, 974 insertions(+), 1167 deletions(-) create mode 100644 src/assets/business_basic/background_re.svg create mode 100644 src/assets/business_basic/iconre1.svg create mode 100644 src/assets/business_basic/iconre2.svg create mode 100644 src/assets/business_basic/iconre3.svg 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/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/pages/business_firewarning/components/RealtimeMonitoring.js b/src/pages/business_firewarning/components/RealtimeMonitoring.js index 152033e..c52a6b4 100644 --- a/src/pages/business_firewarning/components/RealtimeMonitoring.js +++ b/src/pages/business_firewarning/components/RealtimeMonitoring.js @@ -1,18 +1,28 @@ import React, { useEffect, useRef, useState } from 'react'; -import { Card, Result, Select, 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 './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'; + + -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 pieChartRef = useRef(null); + const faultPieChartRef = useRef(null); const [selectedRowKeys, setSelectedRowKeys] = useState([]); const [selectedRows, setSelectedRows] = useState([]); const [loading, setLoading] = useState(false); @@ -23,18 +33,163 @@ const RealtimeMonitoring = () => { 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: ['#04A7F3', '#E7C42C', '#EC6941'], + color: ['#8979FF', '#3CC3DF'], legend: { - data: ['液位', '温度', '压力'], + // data: ['消防水泵1', '消防水泵2'], top: "-3px", - left: "center", - itemGap: 40, // 图例间距 + // 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 } @@ -49,7 +204,7 @@ const RealtimeMonitoring = () => { 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'], + 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 } @@ -57,7 +212,7 @@ const RealtimeMonitoring = () => { yAxis: { type: 'value', min: 0, - max: 500, + max: 30, axisLabel: { formatter: '{value}', fontSize: 10 @@ -65,12 +220,12 @@ const RealtimeMonitoring = () => { }, series: [ { - name: '液位', + name: '消防水泵1', type: 'line', - smooth: true, + smooth: false, lineStyle: { - width: 1.5, - color: '#04A7F3' + width: 2, + color: '#8979FF' }, areaStyle: { color: { @@ -80,21 +235,27 @@ const RealtimeMonitoring = () => { x2: 0, y2: 1, colorStops: [ - { offset: 0, color: 'rgba(4, 167, 243, 0.3)' }, - { offset: 1, color: 'rgba(4, 167, 243, 0)' } + { offset: 0, color: 'rgba(137, 121, 255, 0.3)' }, + { offset: 1, color: 'rgba(137, 121, 255, 0.05)' } ] } }, - symbol: 'none', // 不显示数据点 - data: [120, 200, 150, 300, 250, 400, 350, 280, 320, 180, 220, 160, 140] + 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: '温度', + name: '消防水泵2', type: 'line', - smooth: true, + smooth: false, lineStyle: { - width: 1.5, - color: '#E7C42C' + width: 2, + color: '#3CC3DF' }, areaStyle: { color: { @@ -104,44 +265,26 @@ const RealtimeMonitoring = () => { x2: 0, y2: 1, colorStops: [ - { offset: 0, color: 'rgba(231, 196, 44, 0.3)' }, - { offset: 1, color: 'rgba(231, 196, 44, 0)' } + { offset: 0, color: 'rgba(60, 195, 223, 0.3)' }, + { offset: 1, color: 'rgba(60, 195, 223, 0.05)' } ] } }, - 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' + symbol: 'circle', + symbolSize: 4, + itemStyle: { + color: '#fff', + borderColor: '#3CC3DF', + borderWidth: 1 }, - 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] + data: [8, 11, 14, 10, 13, 17, 19, 16, 14, 18, 20, 22] } ] }; chart.setOption(option); - // 响应式调整 - 使用ResizeObserver监听容器尺寸变化 + // 响应式调整 - 使用多种方式监听容器尺寸变化 let resizeTimer = null; const handleResize = () => { // 防抖处理，避免频繁调用resize @@ -149,34 +292,80 @@ const RealtimeMonitoring = () => { clearTimeout(resizeTimer); } resizeTimer = setTimeout(() => { - chart.resize(); - }, 100); + if (chart && !chart.isDisposed()) { + chart.resize(); + } + }, 50); // 减少延迟时间 }; - + // 监听窗口大小变化 window.addEventListener('resize', handleResize); - + // 监听容器尺寸变化（解决菜单栏伸缩时的自适应问题） let resizeObserver = null; if (window.ResizeObserver) { - resizeObserver = new ResizeObserver(() => { - // 使用setTimeout确保DOM更新完成后再调整图表 - setTimeout(() => { - handleResize(); - }, 0); + 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); } - chart.dispose(); + if (chart && !chart.isDisposed()) { + chart.dispose(); + } }; } }, []); @@ -187,7 +376,7 @@ const RealtimeMonitoring = () => { title: '编号', dataIndex: 'id', key: 'id', - width: 80, + width: 60, render: (text, record, index) => { const page = pagination.current || 1; const pageSize = pagination.pageSize || 5; @@ -196,58 +385,44 @@ const RealtimeMonitoring = () => { } }, { - title: '报警时间', - dataIndex: 'alarmTime', - key: 'alarmTime', - width: 150, + title: '设备编号', + dataIndex: 'deviceId', + key: 'deviceId', + width: 140, }, { - title: '报警传感器名称', - dataIndex: 'sensorName', - key: 'sensorName', - width: 150, + title: '设备名称', + dataIndex: 'deviceName', + key: 'deviceName', + width: 110, }, { - title: '报警类型', - dataIndex: 'alarmType', - key: 'alarmType', - width: 120, + title: '型号规格', + dataIndex: 'modelSpec', + key: 'modelSpec', + width: 140, }, { - title: '报警内容', - dataIndex: 'alarmContent', - key: 'alarmContent', + title: '安装位置', + dataIndex: 'installLocation', + key: 'installLocation', width: 200, }, { - title: '优先级', - dataIndex: 'priority', - key: 'priority', - width: 80, - render: (text) => { - const colorMap = { - '高': '#FF4D4F', - '中': '#FAAD14', - '低': '#52C41A' - }; - return {text}; - } - }, - { - title: '处理状态', + title: '状态', dataIndex: 'status', key: 'status', - width: 100, + width: 80, render: (text) => { const statusMap = { - '未处理': { color: '#FF4D4F', bg: '#FFF2F0' }, - '处理中': { color: '#FAAD14', bg: '#FFFBE6' }, - '已处理': { color: '#52C41A', bg: '#F6FFED' } + '故障': { color: '#FF4D4F', bg: '#FFF2F0' }, + '预警': { color: '#FAAD14', bg: '#FFF3E9' }, + '正常': { color: '#44BB5F', bg: '#D8F7DE' } }; const status = statusMap[text] || { color: '#333', bg: '#F5F5F5' }; return ( - { } }, { - title: '处理时间', - dataIndex: 'processTime', - key: 'processTime', + title: '最后维护', + dataIndex: 'lastMaintenance', + key: 'lastMaintenance', width: 150, }, - { - title: '处理人', - dataIndex: 'processor', - key: 'processor', - width: 100, - }, { title: '操作', key: 'action', - width: 120, + width: 140, render: (_, record) => (
- +
), @@ -289,146 +474,122 @@ const RealtimeMonitoring = () => { { key: '1', id: '001', - alarmTime: '2024-01-15 08:30:25', - sensorName: 'LNG储罐', - alarmType: '温度超限', - alarmContent: '储罐温度超过安全阈值', - priority: '高', - status: '未处理', - processTime: '-', - processor: '-', + deviceId: 'HQ-XF-01-001', + deviceName: '消防水泵', + modelSpec: 'XBD5.0/30-125', + installLocation: '总部大楼1层大厅', + status: '故障', + lastMaintenance: '2025-09-10', }, { 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: '张三', + deviceId: 'HQ-XF-01-001', + deviceName: '消防水泵', + modelSpec: 'XBD5.0/30-125', + installLocation: '总部大楼3层 东区', + status: '预警', + lastMaintenance: '2025-09-10', }, { 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: '李四', + deviceId: 'HQ-XF-01-001', + deviceName: '消防水泵', + modelSpec: 'XBD5.0/30-125', + installLocation: '总部大楼地下一层', + status: '正常', + lastMaintenance: '2025-09-10', }, { key: '4', id: '004', - alarmTime: '2024-01-15 11:20:45', - sensorName: 'LNG储罐', - alarmType: '气体泄漏', - alarmContent: '检测到可燃气体泄漏', - priority: '高', - status: '未处理', - processTime: '-', - processor: '-', + deviceId: 'HQ-XF-01-001', + deviceName: '消防水泵', + modelSpec: 'XBD5.0/30-125', + installLocation: '总部大楼地下一层', + status: '故障', + lastMaintenance: '2025-09-10', }, { 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: '王五', + deviceId: 'HQ-XF-01-001', + deviceName: '消防水泵', + modelSpec: 'XBD5.0/30-125', + installLocation: '总部大楼地下一层', + status: '正常', + lastMaintenance: '2025-09-10', }, { key: '6', id: '006', - alarmTime: '2024-01-15 13:25:15', - sensorName: 'LNG管道', - alarmType: '流量异常', - alarmContent: '管道流量异常波动', - priority: '中', - status: '未处理', - processTime: '-', - processor: '-', + deviceId: 'HQ-XF-01-001', + deviceName: '消防水泵', + modelSpec: 'XBD5.0/30-125', + installLocation: '总部大楼地下一层', + status: '预警', + lastMaintenance: '2025-09-10', }, { 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: '赵六', + deviceId: 'HQ-XF-01-001', + deviceName: '消防水泵', + modelSpec: 'XBD5.0/30-125', + installLocation: '总部大楼地下一层', + status: '故障', + lastMaintenance: '2025-09-10', }, { 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: '孙七', + deviceId: 'HQ-XF-01-001', + deviceName: '消防水泵', + modelSpec: 'XBD5.0/30-125', + installLocation: '总部大楼地下一层', + status: '正常', + lastMaintenance: '2025-09-10', }, { key: '9', id: '009', - alarmTime: '2024-01-15 16:30:45', - sensorName: 'LNG储罐', - alarmType: '液位超限', - alarmContent: '储罐液位超过警戒线', - priority: '中', - status: '未处理', - processTime: '-', - processor: '-', + deviceId: 'HQ-XF-01-001', + deviceName: '消防水泵', + modelSpec: 'XBD5.0/30-125', + installLocation: '总部大楼地下一层', + status: '预警', + lastMaintenance: '2025-09-10', }, { 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: '周八', + deviceId: 'HQ-XF-01-001', + deviceName: '消防水泵', + modelSpec: 'XBD5.0/30-125', + installLocation: '总部大楼地下一层', + status: '故障', + lastMaintenance: '2025-09-10', }, { 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: '吴九', + deviceId: 'HQ-XF-01-001', + deviceName: '消防水泵', + modelSpec: 'XBD5.0/30-125', + installLocation: '总部大楼地下一层', + status: '正常', + lastMaintenance: '2025-09-10', }, { key: '12', id: '012', - alarmTime: '2024-01-15 19:05:50', - sensorName: 'LNG管道', - alarmType: '温度异常', - alarmContent: '管道温度异常下降', - priority: '中', - status: '未处理', - processTime: '-', - processor: '-', + deviceId: 'HQ-XF-01-001', + deviceName: '消防水泵', + modelSpec: 'XBD5.0/30-125', + installLocation: '总部大楼地下一层', + status: '预警', + lastMaintenance: '2025-09-10', }, ]; @@ -451,6 +612,18 @@ const RealtimeMonitoring = () => { setSelectedRows(newSelectedRows); }; + // 新增设备按钮点击事件 + const handleAddDevice = () => { + console.log('新增设备'); + // TODO: 实现新增设备逻辑 + }; + + // 导出数据按钮点击事件 + const handleExportData = () => { + console.log('导出数据'); + // TODO: 实现导出数据逻辑 + }; + // 分页变化处理 const handleTableChange = (pagination) => { setPagination(prev => ({ @@ -460,256 +633,216 @@ const RealtimeMonitoring = () => { })); }; - // 导出功能 - const handleExport = () => { - console.log('导出数据'); - // 这里可以添加导出逻辑 - }; - - // 批量删除功能 - const handleBatchDelete = () => { - if (selectedRowKeys.length === 0) { - console.log('没有选中任何行'); - // 可以在这里添加提示用户选择行的逻辑 - return; - } - console.log('批量删除', selectedRowKeys); - // 这里可以添加批量删除逻辑 - }; - return (
+ {/* 第一个div - 高度20% */}
-
-
-
-
- alarm0 +
+
+ {/* 块1 */} +
+
+
设备总数
+
1280
- -
-
总报警
-
1456
-
-
- 未处理 6 -
-
- 处理中 10 -
-
+
+ 设备总数
-
-
- alarm1 + + {/* 块2 */} +
+
+
本月报警
+
32
-
-
一级报警
-
357
-
-
- 未处理 6 -
-
- 处理中 10 -
-
+
+ 高风险设备
-
-
- alarm2 + + {/* 块3 */} +
+
+
巡检任务
+
158
-
-
二级报警
-
401
-
-
- 未处理 6 -
-
- 处理中 10 -
-
+
+ 今日预警次数
-
-
- alarm3 + + {/* 块4 */} +
+
+
待处理隐患
+
19
-
-
三级报警
-
556
-
-
- 未处理 6 -
-
- 处理中 10 -
-
+
+ 未处理预警
+
-
-
+
+
+ +
+
+ +
+
-
预警看板
-
-
-
检测对象
-
+ + {/* 设备故障类型饼图 */} +
+
+
-
-
-
储罐液化装置区
-
R值: 1765
-
编号:XXXXXXXX
+ +
+
+ + {/* 第三个div - 占满剩余位置 */} +
+
+
+ {/* 第一行块 - 蓝色方块加标题 */} +
+
+
预警信息
-
-
-
-
-
一级
-
危险等级
-
+ +
+
+
+
灭火器压力不足
+
2号楼3层 丨 15分钟前
+
+
+
重要
-
-
-
-
-
储罐液化装置区
-
R值: 1765
-
编号:XXXXXXXX
-
-
-
-
-
-
二级
-
危险等级
-
+
+
+
烟雾探测器电池低电量
+
1号楼5层 丨 1小时前
+
+
+
重要
-
-
-
-
-
储罐液化装置区
-
R值: 1765
-
编号:XXXXXXXX
-
-
-
-
-
-
三级
-
危险等级
-
+
+
+
消防栓维护到期
+
3号楼1层 丨 2小时前
+
+
+
一般
+
+
+
+
+
应急照明故障
+
地下停车场 丨 3小时前
+
+
+
一般
-
-
- {/* 表格 */} -
- {/* 首行 左侧标题左对齐 右侧按钮右对齐 */} -
-
-
-
报警信息列表
-
-
- - - -
-
- {/* 表格 5行10列 带页码 每页5条数据 */} -
- - `共 ${total} 条`, - }} - scroll={{ x: 1200 }} - /> +
+ {/* 表格 */} +
+
+
+
消防设备台账
+
+ +
+ + +
+
+ + {/* 表格 */} +
+ + `共 ${total} 条`, + }} + // scroll={{ x: 1200 }} + /> +
+
); }; -export default RealtimeMonitoring; +export default RealtimeMonitoring; \ No newline at end of file diff --git a/src/pages/business_firewarning/components/RealtimeMonitoring.less b/src/pages/business_firewarning/components/RealtimeMonitoring.less index d623062..a180251 100644 --- a/src/pages/business_firewarning/components/RealtimeMonitoring.less +++ b/src/pages/business_firewarning/components/RealtimeMonitoring.less @@ -3,331 +3,366 @@ height: 100%; display: flex; flex-direction: column; + gap: 10px; + // 第一个div - 高度20% .realtimeContainerTop { + height: 16%; + // background-color: #fff; + border-radius: 4px; display: flex; + flex-direction: column; - height: 50%; - margin-bottom: 5px; - - .realtimeContainerTopLeft { - width: 72%; + .realtimeSectionContent { height: 100%; - // background-color: pink; - margin-right: 10px; - // display: flex; + display: flex; + flex-direction: column; + // padding: 15px; - .realtimeContainerTopLeftTop { - width: 100%; - height: 35%; + .realtimeBlocksContainer { + flex: 1; display: flex; - gap: 12px; + gap: 10px; + height: 100%; - .realtimeAlarmO { + .realtimeBlockItem { flex: 1; height: 100%; - background-color: #F4F7FF; - border: 1px solid #AED3FF; - border-bottom: 0px solid #AED3FF; - border-radius: 4px; - box-shadow: 0px 2px 31px 0px #5382FE33 inset; display: flex; + background: url('@/assets/business_basic/background_re.svg') no-repeat center center; + border-radius: 4px; + border: 2px solid #FFFFFF; - .realtimeAlarmOLeft { - width: 35%; - height: 100%; - display: flex; - justify-content: center; - align-items: center; - } - - .realtimeAlarmORight { - flex: 1; - width: 35%; + .realtimeBlockLeft { + width: 60%; height: 100%; display: flex; flex-direction: column; - margin-left: 2px; - gap: 18px; - - font-family: PingFang SC; - font-weight: 400; - font-style: Regular; - font-size: 12px; - line-height: 100%; - letter-spacing: 0%; - color: #333333; + justify-content: center; + padding: 15px; + padding-left: 20px; + gap: 8px; - .realtimeAlarmORightText1 { - margin-top: 15px; + .realtimeBlockTitle { + font-family: PingFang SC; + font-weight: 400; + font-size: 12px; + color: #333333; + line-height: 1.2; } - - .realtimeAlarmORightText2 { + .realtimeBlockNumber { + font-family: PingFang SC; font-weight: 700; - font-size: 16px; + font-size: 24px; + color: #333333; + line-height: 1.2; } - .realtimeAlarmORightText3 { + .realtimeBlockChange { + font-family: PingFang SC; + font-weight: 400; + font-size: 12px; + color: #1269FF; + line-height: 1.2; display: flex; - gap: 22px; - } - - } - - - - } + align-items: center; + gap: 4px; - .realtimeAlarmTw { - flex: 1; - height: 100%; - background-color: #FFF5f4; - border: 1px solid #FFC5BC; - border-bottom: 0px solid #FFC5BC; - border-radius: 4px; - box-shadow: 0px 2px 31px 0px #FE5F4C33 inset; - display: flex; + .realtimeArrow { + font-size: 14px; + font-weight: bold; + } - .realtimeAlarmTwLeft { - width: 35%; - height: 100%; - display: flex; - justify-content: center; - align-items: center; + .realtimeCheckIcon { + font-size: 16px; + color: #1269FF; + } + } } - .realtimeAlarmTwRight { + .realtimeBlockRight { flex: 1; - width: 35%; height: 100%; + background-color: transparent; + border-radius: 0 4px 4px 0; display: flex; - flex-direction: column; - margin-left: 2px; - gap: 18px; - - font-family: PingFang SC; - font-weight: 400; - font-style: Regular; - font-size: 12px; - line-height: 100%; - letter-spacing: 0%; - color: #333333; - - .realtimeAlarmTwRightText1 { - margin-top: 15px; - } - - .realtimeAlarmTwRightText2 { - font-weight: 700; - font-size: 16px; - } + align-items: center; + justify-content: center; - .realtimeAlarmTwRightText3 { - display: flex; - gap: 22px; + .realtimeBlockImage { + // width: 80%; + height: 65%; + // height: 80%; + object-fit: contain; + margin-right: -5px; } } } + } + } + } - .realtimeAlarmTh { - flex: 1; - height: 100%; - background-color: #FFF7F2; - border: 1px solid #FFD9B2; - border-bottom: 0px solid #FFD9B2; - border-radius: 4px; - box-shadow: 0px 2px 31px 0px #FD883C33 inset; + // 第二个div - 高度39% + .realtimeContainerMiddle { + height: 33%; + border-radius: 4px; + display: flex; + flex-direction: column; + + .realtimeSectionContent { + height: 100%; + display: flex; + display: flex; + gap: 10px; + height: 100%; + + .realtimeMiddleBlock1 { + width: 25%; + height: 100%; + background: #fff; + border: 2px solid #fff; + position: relative; + padding: 0px 10px 10px 2px; + font-family: PingFang SC; + font-size: 14px; + color: #333333; + + .realtimeBlock1Header { + position: absolute; + top: 5px; + left: 10px; + right: 10px; display: flex; + justify-content: space-between; + align-items: center; + z-index: 10; - .realtimeAlarmThLeft { - width: 35%; - height: 100%; + .realtimeBlock1Title { display: flex; - justify-content: center; align-items: center; - } - - .realtimeAlarmThRight { - flex: 1; - width: 35%; - height: 100%; - display: flex; - flex-direction: column; - margin-left: 2px; - gap: 18px; - - font-family: PingFang SC; - font-weight: 400; - font-style: Regular; - font-size: 12px; - line-height: 100%; - letter-spacing: 0%; + gap: 8px; + font-weight: 500; + font-size: 14px; color: #333333; - .realtimeAlarmThRightText1 { - margin-top: 15px; + .realtimeTitleIcon { + width: 3px; + height: 14px; + background-color: #2E4CD4; } + } - .realtimeAlarmThRightText2 { - font-weight: 700; - font-size: 16px; - } + // .realtimeBlock1Segmented { + // 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; + // 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; + // } + // } + } - .realtimeAlarmThRightText3 { - display: flex; - gap: 22px; - } - } + .realtimeDeviceStatusChart { + position: absolute; + top: 35px; + left: 10px; + right: 10px; + bottom: 10px; + z-index: 10; } + } - .realtimeAlarmF { - flex: 1; - height: 100%; - background-color: #EFF9FF; - border: 1px solid #89E1FF; - border-bottom: 0px solid #89E1FF; - border-radius: 4px; - box-shadow: 0px 2px 31px 0px #22A4FD33 inset; + .realtimeMiddleBlock12 { + // flex: 1; + width: 30%; + 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; + + .realtimeBlock1Header { + position: absolute; + top: 5px; + left: 10px; + right: 10px; display: flex; + justify-content: space-between; + align-items: center; + z-index: 10; - .realtimeAlarmFLeft { - width: 35%; - height: 100%; + .realtimeBlock1Title { display: flex; - justify-content: center; align-items: center; + gap: 8px; + font-weight: 500; + font-size: 14px; + color: #333333; + + .realtimeTitleIcon { + width: 3px; + height: 14px; + background-color: #2E4CD4; + } } - .realtimeAlarmFRight { - flex: 1; - width: 35%; - height: 100%; - display: flex; - flex-direction: column; - margin-left: 2px; - gap: 18px; + .realtimeBlock1Segmented { + padding: 0; + margin: 0; + border: 1px solid #E3E3E3; + border-radius: 4px; + height: 28px; - font-family: PingFang SC; - font-weight: 400; - font-style: Regular; - font-size: 12px; - line-height: 100%; - letter-spacing: 0%; - color: #333333; + :global(.ant-segmented) { + padding: 0; + margin: 0; + height: 28px; + } - .realtimeAlarmFRightText1 { - margin-top: 15px; + :global(.ant-segmented-item) { + font-size: 12px; + padding: 2px 8px; + height: 26px; + line-height: 26px; + display: flex; + align-items: center; + justify-content: center; } - .realtimeAlarmFRightText2 { - font-weight: 700; - font-size: 16px; + :global(.ant-segmented-item-selected) { + background-color: #1890ff; + color: #fff; } + } - .realtimeAlarmFRightText3 { - display: flex; - gap: 22px; + .realtimeCustomSelect { + :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; } } } + + .realtimeDeviceStatusChart { + position: absolute; + top: 35px; + left: 10px; + right: 10px; + bottom: 10px; + z-index: 10; + } } - .realtimeContainerTopLeftBottom { - margin-top: 12px; + .realtimeMiddleBlock2 { + flex: 1; + height: 100%; background-color: #fff; - width: 100%; - height: 60%; + display: flex; + flex-direction: column; + font-family: PingFang SC; + font-size: 14px; + color: #333333; + padding: 5px 10px 5px 10px; - .realtimeContainerTopLeftBottomTitle { + .realtimeMiddleBlock2Title { display: flex; justify-content: space-between; align-items: center; - // padding: 8px 15px; - padding: 8px 15px 0px 15px; + // margin-bottom: 10px; .realtimeTitleLeft { display: flex; align-items: center; gap: 8px; - font-family: PingFang SC; font-weight: 500; - font-style: Medium; font-size: 14px; - line-height: 100%; - letter-spacing: 0%; - + color: #333333; .realtimeTitleIcon { width: 3px; - height: 16px; + height: 14px; background-color: #2E4CD4; } } - - .realtimeTitleRight { - display: flex; - align-items: center; - gap: 8px; - - font-family: PingFang SC; - font-style: Medium; - font-size: 13px; - line-height: 100%; - letter-spacing: 0%; - - - .selectBox { - padding: 4px 8px; - border: 1px solid #d9d9d9; - border-radius: 4px; - background-color: #fff; - font-size: 12px; - color: #333; - outline: none; - - &:focus { - border-color: #2E4CD4; - } - } - } } - .realtimeContainerTopLeftBottomChart { - flex: 1; + .realtimeMiddleBlock2Chart { width: 100%; - height: 75%; + height: 100%; + // min-height: 200px; } } + } + } + + // 第三个div - 高度不超过45% + .realtimeContainerBottom { + height: 45%; // 限制高度不超过45% + max-height: 45%; // 确保最大高度不超过45% + display: flex; + flex-direction: column; - .realtimeContainerTopRight { - flex: 1; - height: calc(100% - 3.3px); - background-color: #fff; - background-image: url('@/assets/safe_majorHazard/online_monitoring/backTopRight.png'); - background-size: 100% auto; + .realtimeSectionContent { display: flex; - flex-direction: column; - overflow-y: auto; + flex-direction: row; + gap: 10px; + padding: 0; - .realtimeDataHeader { + .realtimeLeftBlock { + width: 28%; + flex-shrink: 0; + height: 100%; + background: #fff; + // background-size: cover; + padding: 0; display: flex; - justify-content: space-between; - align-items: center; - padding: 8px 15px; - margin-bottom: 10px; + flex-direction: column; + gap: 10px; + padding: 15px; - .realtimeTitleLeft { + .realtimeLeftBlockTitle { display: flex; align-items: center; gap: 8px; font-family: PingFang SC; font-weight: 500; - font-style: Medium; font-size: 14px; - line-height: 100%; - letter-spacing: 0%; + color: #333333; + margin-bottom: 10px; .realtimeTitleIcon { width: 3px; @@ -336,584 +371,192 @@ } } - .realtimeTotalCount { - font-family: PingFang SC; - font-weight: 400; - font-size: 13px; - color: #333333; - } - } - - .realtimeDataItem { - height: 23%; - flex-shrink: 0; - border: 1px solid #89E1FF; - border-radius: 2px; - margin: 0 15px; - margin-bottom: 6px; - display: flex; - align-items: center; - justify-content: center; - font-family: PingFang SC; - font-size: 14px; - // color: #666; - background-color: #EFF9FF; - - &:last-child { - // margin-bottom: 1px; - } - } - - .realtimeDataItem1 { - height: 25%; - flex-shrink: 0; - border: 1px solid #89E1FF; - border-radius: 4px; - margin: 0 15px; - margin-bottom: 6px; - display: flex; - align-items: center; - padding: 0px 15px; - background-color: #EFF9FF; - - .realtimeDataItemLeft { - width: 65%; + .realtimeDevelopmentContainer { + width: 100%; + height: 100%; display: flex; flex-direction: column; gap: 8px; - .realtimeAreaName { - - font-family: PingFang SC; - font-weight: 400; - font-size: 13px; - color: #333333; - line-height: 2.2; - } - - .realtimeRValue { - font-family: PingFang SC; - font-weight: 400; - font-size: 14px; - color: #666666; - line-height: 0.2; - } - - .realtimeCodeNumber { - font-family: PingFang SC; - font-weight: 400; - font-size: 12px; - color: #666666; - } - } - - .realtimeDataItemRight { - width: 35%; - height: 100%; - display: flex; - justify-content: center; - align-items: center; + .realtimeDevelopmentBlock1 { + flex: 1; + background-color: #F1F7FF; + border-radius: 4px; + padding: 15px 20px; + display: flex; + align-items: center; + width: 100%; - .realtimeCircleContainer { - position: relative; - height: 80%; - aspect-ratio: 1; // 强制宽高比1:1 - - .realtimeOuterCircle { - - width: 100%; - height: 100%; - background-color: rgba(51, 176, 253, 0.3); - border-radius: 50%; + .realtimeLeftContent { + flex: 1; display: flex; - justify-content: center; - align-items: center; - - .realtimeInnerCircle { - width: 70%; - height: 70%; - background-color: rgba(4, 128, 251, 0.8); - border-radius: 50%; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; + flex-direction: column; + gap: 8px; + min-width: 0; + + .realtimeMainText { + color: #333333; + font-size: 14px; + font-weight: 500; + font-family: PingFang SC; + width: 100%; + max-width: 500px; + } - .realtimeLevelText { - font-family: PingFang SC; - font-weight: 500; - font-size: 11px; - color: #FFFFFF; - line-height: 1.4; - margin-top: -4px; - } - - .realtimeRiskText { - font-family: PingFang SC; - font-weight: 300; - font-size: 8px; - color: #FFFFFF; - line-height: 1; - } + .realtimeSubText { + color: #666666; + font-size: 12px; + font-weight: 400; + font-family: PingFang SC; + width: 100%; + max-width: 400px; } } - } - } - } - - .realtimeDataItem2 { - height: 25%; - flex-shrink: 0; - border: 1px solid rgba(255, 197, 188, 1); - border-radius: 4px; - margin: 0 15px; - margin-bottom: 6px; - display: flex; - align-items: center; - padding: 0px 15px; - background-color: #fff5f4; - - .realtimeDataItemLeft { - width: 65%; - display: flex; - flex-direction: column; - gap: 8px; - - .realtimeAreaName { - font-family: PingFang SC; - font-weight: 400; - font-size: 13px; - color: #333333; - line-height: 2.2; - } - - .realtimeRValue { - font-family: PingFang SC; - font-weight: 400; - font-size: 14px; - color: #666666; - line-height: 0.2; - } - - .realtimeCodeNumber { - font-family: PingFang SC; - font-weight: 400; - font-size: 12px; - color: #666666; - } - } - - .realtimeDataItemRight { - width: 35%; - height: 100%; - display: flex; - justify-content: center; - align-items: center; - - .realtimeCircleContainer { - position: relative; - height: 80%; - aspect-ratio: 1; - .realtimeOuterCircle { - width: 100%; - height: 100%; - background-color: rgba(254, 214, 209, 1); - border-radius: 50%; + .realtimeRightContent { + flex: 0 0 auto; display: flex; - justify-content: center; + justify-content: flex-end; align-items: center; - - .realtimeInnerCircle { - width: 70%; - height: 70%; - background-color: rgba(253, 41, 14, 1); - border-radius: 50%; + padding-right: 10px; + min-width: 80px; + + .realtimeImportantTag { + background-color: #FFE0E2; + color: #FF3E48; + font-size: 14px; + font-weight: 500; + font-family: PingFang SC; + width: 45px; + height: 25px; display: flex; - flex-direction: column; - justify-content: center; align-items: center; - - .realtimeLevelText { - font-family: PingFang SC; - font-weight: 500; - font-size: 11px; - color: #FFFFFF; - line-height: 1.4; - margin-top: -4px; - } - - .realtimeRiskText { - font-family: PingFang SC; - font-weight: 300; - font-size: 8px; - color: #FFFFFF; - line-height: 1; - } + justify-content: center; + border-radius: 4px; } - } - } - } - } - - .realtimeDataItem3 { - height: 25%; - flex-shrink: 0; - border: 1px solid rgba(255, 217, 178, 1); - border-radius: 4px; - margin: 0 15px; - margin-bottom: 6px; - display: flex; - align-items: center; - padding: 0px 15px; - background-color: #fef6f1; - - .realtimeDataItemLeft { - width: 65%; - display: flex; - flex-direction: column; - gap: 8px; - - .realtimeAreaName { - font-family: PingFang SC; - font-weight: 400; - font-size: 13px; - color: #333333; - line-height: 2.2; - } - - .realtimeRValue { - font-family: PingFang SC; - font-weight: 400; - font-size: 14px; - color: #666666; - line-height: 0.2; - } - - .realtimeCodeNumber { - font-family: PingFang SC; - font-weight: 400; - font-size: 12px; - color: #666666; - } - } - - .realtimeDataItemRight { - width: 35%; - height: 100%; - display: flex; - justify-content: center; - align-items: center; - - .realtimeCircleContainer { - position: relative; - height: 80%; - aspect-ratio: 1; - .realtimeOuterCircle { - width: 100%; - height: 100%; - background-color: rgba(255, 234, 218, 1); - border-radius: 50%; - display: flex; - justify-content: center; - align-items: center; + .realtimeNormalTag { + background-color: #DAF3FF; + color: #00AAFA; + font-size: 14px; + font-weight: 500; + font-family: PingFang SC; + width: 45px; + height: 25px; - .realtimeInnerCircle { - width: 70%; - height: 70%; - background-color: rgba(252, 103, 18, 1); - border-radius: 50%; display: flex; - flex-direction: column; - justify-content: center; align-items: center; - - .realtimeLevelText { - font-family: PingFang SC; - font-weight: 500; - font-size: 11px; - color: #FFFFFF; - line-height: 1.4; - margin-top: -4px; - } - - .realtimeRiskText { - font-family: PingFang SC; - font-weight: 300; - font-size: 8px; - color: #FFFFFF; - line-height: 1; - } + justify-content: center; + border-radius: 4px; } } } } } - .realtimeDataItem4 { - height: 25%; - flex-shrink: 0; - border: 1px solid #89E1FF; - border-radius: 4px; - margin: 0 15px; - margin-bottom: 6px; + .realtimeRightBlock { + width: calc(100% - 28% - 10px); + height: 100%; + background-color: #fff; + padding: 0; display: flex; - align-items: center; - padding: 0px 15px; - background-color: #EFF9FF; + flex-direction: column; - .realtimeDataItemLeft { - width: 65%; + .realtimeTableHeader { display: flex; - flex-direction: column; - gap: 8px; - - .realtimeAreaName { - font-family: PingFang SC; - font-weight: 400; - font-size: 13px; - color: #333333; - line-height: 2.2; - } + justify-content: space-between; + align-items: center; + padding: 8px 15px 5px 15px; - .realtimeRValue { + .realtimeTableTitle { + display: flex; + align-items: center; + gap: 8px; font-family: PingFang SC; - font-weight: 400; + font-weight: 500; font-size: 14px; - color: #666666; - line-height: 0.2; - } + color: #333333; - .realtimeCodeNumber { - font-family: PingFang SC; - font-weight: 400; - font-size: 12px; - color: #666666; + .realtimeTitleIcon { + width: 3px; + height: 16px; + background-color: #2E4CD4; + } } - } - - .realtimeDataItemRight { - width: 35%; - height: 100%; - display: flex; - justify-content: center; - align-items: center; - .realtimeCircleContainer { - position: relative; - height: 80%; - aspect-ratio: 1; + .realtimeTableActions { + display: flex; + gap: 8px; + margin-top: 5px; - .realtimeOuterCircle { - width: 100%; - height: 100%; - background-color: rgba(51, 176, 253, 0.3); - border-radius: 50%; + .realtimeActionButton { display: flex; - justify-content: center; 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; - .realtimeInnerCircle { - width: 70%; - height: 70%; - background-color: rgba(4, 128, 251, 0.8); - border-radius: 50%; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; + &:hover { + background-color: #f0f2ff; + border-color: #2E4CD4; + } + + &:active { + background-color: #e6ebff; + } - .realtimeLevelText { - font-family: PingFang SC; - font-weight: 500; - font-size: 11px; - color: #FFFFFF; - line-height: 1.4; - margin-top: -4px; - } - - .realtimeRiskText { - font-family: PingFang SC; - font-weight: 300; - font-size: 8px; - color: #FFFFFF; - line-height: 1; - } + .realtimeButtonIcon { + font-size: 14px; + font-weight: bold; } } } } - } - } - - } - - .realtimeContainerBottom { - background-color: #fff; - flex: 1; - padding: 8px 15px 5px 15px; - display: flex; - flex-direction: column; - - .realtimeTableHeader { - display: flex; - justify-content: space-between; - align-items: center; - // margin-bottom: 15px; - padding-bottom: 5px; - // border-bottom: 1px solid #f0f0f0; - - .realtimeTableTitle { - display: flex; - align-items: center; - gap: 8px; - font-family: PingFang SC; - font-weight: 500; - font-size: 14px; - color: #333333; - - .realtimeTitleIcon { - width: 3px; - height: 16px; - background-color: #2E4CD4; - } - } - .realtimeTableActions { - display: flex; - gap: 8px; - - // 自定义按钮样式 - :global(.ant-btn) { - background-color: #ffffff !important; - border-color: #DFE4F6 !important; - color: #333333 !important; - box-shadow: none !important; - - &:hover { - background-color: #f5f5f5 !important; - border-color: #DFE4F6 !important; - color: #333333 !important; - box-shadow: none !important; - } + .realtimeTableContainer { + flex: 1; + overflow: hidden; + margin: 10px 15px 0 15px; // 上边距10px，左右边距15px - &:focus { - background-color: #ffffff !important; - border-color: #DFE4F6 !important; - color: #333333 !important; - box-shadow: none !important; + :global(.ant-table) { + font-size: 12px; } - &:active { - background-color: #e6e6e6 !important; - border-color: #DFE4F6 !important; - color: #333333 !important; - box-shadow: none !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; } - // 主要按钮样式 - &.ant-btn-primary { - background-color: #ffffff !important; - border-color: #DFE4F6 !important; - color: #333333 !important; - box-shadow: none !important; - - &:hover { - background-color: #f5f5f5 !important; - border-color: #DFE4F6 !important; - color: #333333 !important; - box-shadow: none !important; - } - - &:focus { - background-color: #ffffff !important; - border-color: #DFE4F6 !important; - color: #333333 !important; - box-shadow: none !important; - } - - &:active { - background-color: #e6e6e6 !important; - border-color: #DFE4F6 !important; - color: #333333 !important; - box-shadow: none !important; - } + :global(.ant-table-tbody > tr > td) { + padding: 8px 12px; + border-bottom: 1px solid #f0f0f0; + text-align: center; + color: #666666; } - // 危险按钮样式 - &.ant-btn-dangerous { - background-color: #ffffff !important; - border-color: #DFE4F6 !important; - color: #333333 !important; - box-shadow: none !important; - - &:hover { - background-color: #f5f5f5 !important; - border-color: #DFE4F6 !important; - color: #333333 !important; - box-shadow: none !important; - } - - &:focus { - background-color: #ffffff !important; - border-color: #DFE4F6 !important; - color: #333333 !important; - box-shadow: none !important; - } - - &:active { - background-color: #e6e6e6 !important; - border-color: #DFE4F6 !important; - color: #333333 !important; - box-shadow: none !important; - } + :global(.ant-table-tbody > tr:hover > td) { + background-color: #f5f5f5; } - // 禁用状态 - &:disabled { - background-color: #f5f5f5 !important; - border-color: #d9d9d9 !important; - color: #bfbfbf !important; - box-shadow: none !important; + :global(.ant-pagination) { + margin-top: 16px; + text-align: right; } } } } - - .realtimeTableContainer { - flex: 1; - overflow: hidden; - - :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; - } - } } - -} +} \ No newline at end of file