From a5406f7ded2b9125f5857f602716a435f957b9c3 Mon Sep 17 00:00:00 2001 From: wangyunfei <1224056307@qq,com> Date: Mon, 20 Oct 2025 17:10:45 +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 --- .../components/DataAnalysisWarning.js | 800 ++++++++---------- .../components/DataAnalysisWarning.less | 402 +++------ .../components/RealtimeMonitoring.js | 6 +- 3 files changed, 506 insertions(+), 702 deletions(-) diff --git a/src/pages/business_firewarning/components/DataAnalysisWarning.js b/src/pages/business_firewarning/components/DataAnalysisWarning.js index 79c8258..aede0f5 100644 --- a/src/pages/business_firewarning/components/DataAnalysisWarning.js +++ b/src/pages/business_firewarning/components/DataAnalysisWarning.js @@ -27,7 +27,7 @@ const DataAnalysisWarning = () => { const [dataSource, setDataSource] = useState([]); const [pagination, setPagination] = useState({ current: 1, - pageSize: 8, + pageSize: 5, total: 0, }); const [searchText, setSearchText] = useState(''); @@ -42,12 +42,12 @@ const DataAnalysisWarning = () => { left: '5%', right: '5%', bottom: '10%', - top: '20%', + top: '18%', containLabel: true }, xAxis: { type: 'category', - data: ['灭火器', '消火栓', '报警器', '疏散灯', '排烟设备'], + data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'], axisLabel: { fontSize: 12, color: '#333', @@ -64,8 +64,8 @@ const DataAnalysisWarning = () => { yAxis: { type: 'value', min: 0, - max: 50, - interval: 10, + max: 35, + interval: 5, axisLabel: { fontSize: 12, color: '#666', @@ -84,57 +84,71 @@ const DataAnalysisWarning = () => { } } }, - 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' } - ] + series: [ + { + name: '火灾报警', + type: 'bar', + stack: 'total', + barWidth: 20, + data: [12, 8, 15, 10, 18, 14, 16, 13, 11, 17, 19, 15], + itemStyle: { + color: '#8979FF' } }, - emphasis: { + { + name: '故障报警', + type: 'bar', + stack: 'total', + barWidth: 20, + data: [6, 9, 7, 12, 8, 11, 9, 14, 10, 7, 8, 6], itemStyle: { - color: { - type: 'linear', - x: 0, - y: 0, - x2: 0, - y2: 1, - colorStops: [ - { offset: 0, color: '#0D7AE8' }, - { offset: 1, color: '#0F5BC7' } - ] - } + color: '#FF928A' + } + }, + { + name: '误报', + type: 'bar', + stack: 'total', + barWidth: 20, + data: [3, 5, 4, 7, 6, 8, 5, 9, 7, 4, 6, 5], + itemStyle: { + color: '#3CC3DF' } } - }], + ], legend: { show: true, - top: '5%', + top: '8%', left: 'center', - itemWidth: 15, - itemHeight: 3, + itemWidth: 8, + itemHeight: 8, textStyle: { fontSize: 12, color: '#333' }, - data: [{ - name: '使用次数', - icon: 'rect', - itemStyle: { - color: '#4B69F1' + data: [ + { + name: '火灾报警', + icon: 'rect', + itemStyle: { + color: '#8979FF' + } + }, + { + name: '故障报警', + icon: 'rect', + itemStyle: { + color: '#FF928A' + } + }, + { + name: '误报', + icon: 'rect', + itemStyle: { + color: '#3CC3DF' + } } - }] + ] }, tooltip: { trigger: 'axis', @@ -142,7 +156,11 @@ const DataAnalysisWarning = () => { type: 'shadow' }, formatter: function (params) { - return `${params[0].name}
使用次数: ${params[0].value}`; + let result = `${params[0].name}
`; + params.forEach(param => { + result += `${param.seriesName}: ${param.value}
`; + }); + return result; } } }; @@ -167,13 +185,12 @@ const DataAnalysisWarning = () => { } }, []); - // 维护费用趋势折线图初始化 + // 设备运行状态趋势折线图初始化 useEffect(() => { if (faultPieChartRef.current) { const faultPieChart = echarts.init(faultPieChartRef.current); const faultPieOption = { - legend: { show: true, top: '5%', @@ -211,9 +228,9 @@ const DataAnalysisWarning = () => { }, yAxis: { type: 'value', - min: 20000, - max: 30000, - interval: 2000, + min: 0, + max: 100, + interval: 20, axisLine: { show: false }, @@ -223,7 +240,7 @@ const DataAnalysisWarning = () => { axisLabel: { color: '#666', fontSize: 12, - formatter: '¥{value}' + formatter: '{value}%' }, splitLine: { lineStyle: { @@ -232,39 +249,87 @@ const DataAnalysisWarning = () => { } } }, - 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 + series: [ + { + name: '正常运行率', + type: 'line', + data: [85, 78, 92, 88, 95, 90, 87, 93, 89, 91, 86, 88], + smooth: false, + symbol: 'circle', + symbolSize: 6, + lineStyle: { + color: '#3CC3DF', + width: 1 + }, + itemStyle: { + color: '#FFF', + borderColor: '#3CC3DF', + borderWidth: 1 + }, + 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)' + }] + } + } }, - 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)' - }] + { + name: '故障率', + type: 'line', + data: [15, 22, 8, 12, 5, 10, 13, 7, 11, 9, 14, 12], + smooth: false, + symbol: 'circle', + symbolSize: 6, + lineStyle: { + color: '#8979FF', + width: 1 + }, + itemStyle: { + color: '#fff', + borderColor: '#8979FF', + borderWidth: 1 + }, + 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)' + }] + } } } - }] + ], + tooltip: { + trigger: 'axis', + axisPointer: { + type: 'cross' + }, + formatter: function (params) { + let result = `${params[0].name}
`; + params.forEach(param => { + result += `${param.seriesName}: ${param.value}%
`; + }); + return result; + } + } }; faultPieChart.setOption(faultPieOption); @@ -299,51 +364,51 @@ const DataAnalysisWarning = () => { }, 100); const option = { - color: ['#3C7EFF', '#FF8800', '#FFC403', '#31BCFF'], + tooltip: { + trigger: 'item' + }, legend: { - orient: 'vertical', - right: '2%', - top: 'middle', - itemWidth: 14, + bottom: '4%', + left: 'center', + itemWidth: 16, itemHeight: 5, textStyle: { - fontSize: 10, - color: '#666' + fontSize: 12, } }, - tooltip: { - trigger: 'item', - formatter: '{b}
{d}%' - }, series: [ { - name: '设备类型占比', + name: '设备故障原因', type: 'pie', - radius: '70%', - center: ['40%', '55%'], + radius: ['20%', '65%'], + center: ['50%', '40%'], avoidLabelOverlap: false, + padAngle: 5, itemStyle: { - borderRadius: 0, + borderRadius: 8, borderColor: '#fff', - borderWidth: 1 + borderWidth: 2 }, label: { show: false, position: 'center' }, - emphasis: { - label: { - show: false - } - }, + // emphasis: { + // label: { + // show: true, + // fontSize: 40, + // fontWeight: 'bold' + // } + // }, labelLine: { show: false }, data: [ - { value: 25, name: '灭火器' }, - { value: 30, name: '消防栓' }, - { value: 20, name: '报警器' }, - { value: 25, name: '烟雾探测器' } + { value: 1048, name: '环境因素（粉尘）', itemStyle: { color: '#44BB5F' } }, + { value: 735, name: '环境因素（湿度）', itemStyle: { color: '#F8C541' } }, + { value: 580, name: '设备故障', itemStyle: { color: '#A493FB' } }, + { value: 484, name: '施工干扰', itemStyle: { color: '#4B69F1' } }, + { value: 300, name: '其他', itemStyle: { color: '#949FD0' } } ] } ] @@ -440,265 +505,166 @@ const DataAnalysisWarning = () => { // 表格列定义 const columns = [ { - title: '编号', + title: '序号', dataIndex: 'id', key: 'id', width: 60, render: (text, record, index) => { const page = pagination.current || 1; - const pageSize = pagination.pageSize || 8; + const pageSize = pagination.pageSize || 5; const number = (page - 1) * pageSize + index + 1; - return `0${number}`.slice(-2); + return number; } }, { - title: '设备编号', - dataIndex: 'deviceId', - key: 'deviceId', - width: 140, + title: '区域', + dataIndex: 'area', + key: 'area', + width: 120, }, { - title: '设备名称', - dataIndex: 'deviceName', - key: 'deviceName', - width: 110, + title: '火灾报警', + dataIndex: 'fireAlarm', + key: 'fireAlarm', + width: 100, }, { - title: '类型', - dataIndex: 'modelSpec', - key: 'modelSpec', - width: 120, + title: '故障报警', + dataIndex: 'faultAlarm', + key: 'faultAlarm', + width: 100, }, { - title: '安装位置', - dataIndex: 'installLocation', - key: 'installLocation', + title: '误报', + dataIndex: 'falseAlarm', + key: 'falseAlarm', width: 100, }, { - title: '状态', - dataIndex: 'status', - key: 'status', + title: '总计', + dataIndex: 'total', + key: 'total', width: 100, + }, + { + title: '同比变化', + dataIndex: 'yearOverYear', + key: 'yearOverYear', + width: 120, 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' }; + const isPositive = text.includes('↑'); + const color = isPositive ? '#FF3E48' : '#44BB5F'; + const icon = isPositive ? '↑' : '↓'; 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', + id: '1', + area: 'A栋', + fireAlarm: 3, + faultAlarm: 7, + falseAlarm: 10, + total: 23, + yearOverYear: '↓ 12%', }, { key: '2', - id: '002', - deviceId: 'HQ-XF-02-015', - deviceName: '室内消火栓', - modelSpec: '灭火设备', - installLocation: '3层东区', - status: '已使用', - lastMaintenance: '2025-09-10', + id: '2', + area: 'B栋', + fireAlarm: 2, + faultAlarm: 9, + falseAlarm: 6, + total: 18, + yearOverYear: '↑ 8%', }, { key: '3', - id: '003', - deviceId: 'HQ-XF-03-007', - deviceName: '火警报警器', - modelSpec: '报警设备', - installLocation: '地下一层', - status: '正常', - lastMaintenance: '2025-09-10', + id: '3', + area: 'C栋', + fireAlarm: 1, + faultAlarm: 5, + falseAlarm: 8, + total: 16, + yearOverYear: '↓ 15%', }, { key: '4', - id: '004', - deviceId: 'HQ-XF-03-008', - deviceName: '火警报警器', - modelSpec: '报警设备', - installLocation: '地下一层', - status: '待维修', - lastMaintenance: '2025-09-10', + id: '4', + area: 'D栋', + fireAlarm: 0, + faultAlarm: 2, + falseAlarm: 7, + total: 11, + yearOverYear: '↓ 16%', }, { key: '5', - id: '005', - deviceId: 'HQ-XF-01-009', - deviceName: '干粉灭火器', - modelSpec: '灭火设备', - installLocation: '地下一层', - status: '报废', - lastMaintenance: '2025-09-10', + id: '5', + area: 'E栋', + fireAlarm: 4, + faultAlarm: 6, + falseAlarm: 5, + total: 15, + yearOverYear: '↓ 5%', }, { key: '6', - id: '006', - deviceId: 'HQ-XF-01-010', - deviceName: '室内消火栓', - modelSpec: '灭火设备', - installLocation: '地下一层', - status: '已使用', - lastMaintenance: '2025-09-10', + id: '6', + area: 'F栋', + fireAlarm: 2, + faultAlarm: 8, + falseAlarm: 9, + total: 19, + yearOverYear: '↑ 3%', }, { key: '7', - id: '007', - deviceId: 'HQ-XF-01-011', - deviceName: '火警报警器', - modelSpec: '报警设备', - installLocation: '地下一层', - status: '待维修', - lastMaintenance: '2025-09-10', + id: '7', + area: 'G栋', + fireAlarm: 1, + faultAlarm: 4, + falseAlarm: 6, + total: 11, + yearOverYear: '↓ 8%', }, { key: '8', - id: '008', - deviceId: 'HQ-XF-01-012', - deviceName: '火警报警器', - modelSpec: '报警设备', - installLocation: '地下一层', - status: '正常', - lastMaintenance: '2025-09-10', + id: '8', + area: 'H栋', + fireAlarm: 3, + faultAlarm: 3, + falseAlarm: 4, + total: 10, + yearOverYear: '↓ 20%', }, { key: '9', - id: '009', - deviceId: 'HQ-XF-01-013', - deviceName: '干粉灭火器', - modelSpec: '灭火设备', - installLocation: '地下一层', - status: '已使用', - lastMaintenance: '2025-09-10', + id: '9', + area: 'I栋', + fireAlarm: 0, + faultAlarm: 1, + falseAlarm: 3, + total: 4, + yearOverYear: '↓ 25%', }, { 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', + id: '10', + area: 'J栋', + fireAlarm: 2, + faultAlarm: 5, + falseAlarm: 7, + total: 14, + yearOverYear: '↑ 2%', }, ]; @@ -751,17 +717,29 @@ const DataAnalysisWarning = () => { return (
- {/* 第1个div - 高度39% */} +
+ +
+
+
+
+
误报原因分析
+
+
+
+
+
+ +
- 设备使用频率分析 + 报表统计生成
- {/* 设备状态饼图 */}
@@ -770,149 +748,105 @@ const DataAnalysisWarning = () => {
- 近一年维护费用趋势 + 设备运行状态趋势
- {/* 维护费用趋势折线图 */}
-
-
-
-
-
设备类型占比
-
-
-
-
-
+
- {/* 第2个div - 占满剩余位置 */} -
-
-
-
-
-
-
-
近期维护提醒
-
-
-
-
-
SH-MHQ-023-C 干粉灭火器
-
位置: 4楼办公区丨维护类型: 季度检查
-
负责人: 张三
-
-
-
3天后到期
-
-
-
-
-
SH-XHS-045-D 室内消火栓
-
位置: 2楼东侧走廊丨维护类型: 水压测试
-
负责人: 李四
-
-
-
8天后到期
-
-
-
+ {/* 底部区域 */} +
+ {/* 左侧维护提醒 */} +
+
+
+
实时预警信息
+
+
+
+
+
电路线路过载预警
+
B动丨维护类型: 季度检查
+
负责人: 张三
-
-
-
-
维护任务进度
-
-
- {/* 进度条区域 */} -
- -
月度维护计划
- - -
季度维护计划
- - - -
年度维护计划
- - - - {/* 警告提示框 */} -
- - 本月有5项维护任务即将到期 -
- -
-
+
+
3天后到期
-
- -
- {/* 表格 */} -
-
-
-
消防设施与器材列表
+
+
+
SH-XHS-045-D 室内消火栓
+
位置: 2楼东侧走廊丨维护类型: 水压测试
+
负责人: 李四
+
+
+
8天后到期
+
+
+
+
+
电路线路过载预警
+
B动丨维护类型: 季度检查
+
负责人: 张三
+
+
+
3天后到期
+
+
+
电路线路过载预警
+
B动丨维护类型: 季度检查
+
负责人: 张三
+
+
+
3天后到期
+
+
+
+
- - {/* 操作按钮 */} -
-
- } - /> -
-
- - -
-
- - {/* 表格 */} -
- - `共 ${total} 条`, - }} - /> + {/* 右侧表格 */} +
+
+
+
+
月度报警统计
+
+
+
+ +
+ + `共 ${total} 条`, + }} + /> +
diff --git a/src/pages/business_firewarning/components/DataAnalysisWarning.less b/src/pages/business_firewarning/components/DataAnalysisWarning.less index b036170..b865d9e 100644 --- a/src/pages/business_firewarning/components/DataAnalysisWarning.less +++ b/src/pages/business_firewarning/components/DataAnalysisWarning.less @@ -8,7 +8,7 @@ // 第二个div - 高度35% .analysisContainerMiddle { // height: 400px; - min-height: 35%; + min-height: 46%; border-radius: 4px; display: flex; flex-direction: column; @@ -21,7 +21,7 @@ height: 100%; .analysisMiddleBlock1 { - width: 30%; + width: 39%; height: 100%; background: #fff; border: 2px solid #fff; @@ -120,7 +120,7 @@ } .analysisMiddleBlock12 { - width: 45%; + width: 40%; height: 100%; background-color: #fff; display: flex; @@ -170,7 +170,7 @@ .analysisMiddleBlock2 { // flex: 1; - width: calc(100% - 75% - 15px); + width: calc(100% - 76% - 15px); height: 100%; // background: linear-gradient(170.5deg, #EBEFF4 6.87%, #FFFFFF 53.01%); // border: 2px solid #fff; @@ -214,277 +214,147 @@ } } - // 第三个div - 占满剩余位置 - .analysisContainerBottom { + // 底部区域 + .analysisBottom { display: flex; - flex-direction: column; - flex-shrink: 0; - - .analysisSectionContent { + flex-direction: row; + gap: 10px; + flex: 1; + + .analysisMaintenanceSection { + width: 30%; + background: #FFF; + border-radius: 4px; display: flex; - flex-direction: row; - flex: 1; - gap: 10px; - padding: 0; + flex-direction: column; + padding: 12px 14px; - .analysisLeftBlock { - width: 30%; - flex-shrink: 0; - height: 100%; - padding: 0; + .analysisMaintenanceTitle { 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; + 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; - } + .analysisTitleIcon { + width: 3px; + height: 16px; + background-color: #2E4CD4; } + } - .analysisMaintenanceStack { - width: 100%; - height: 100%; + .analysisMaintenanceContent { + flex: 1; + width: 100%; + display: flex; + flex-direction: column; + gap: 8px; + + .analysisMaintenanceItem { display: flex; - flex-direction: column; - gap: 10px; + align-items: center; + justify-content: space-between; + background-color: #F1F7FF; + border-radius: 4px; + padding: 16px 16px; - .analysisMaintenanceSection { - width: 100%; - height: 50%; - background: #FFF; - border-radius: 4px; + .analysisMaintenanceLeft { + flex: 1; display: flex; flex-direction: column; - padding: 12px 14px; + gap: 4px; - .analysisMaintenanceTitle { - display: flex; - align-items: center; - gap: 8px; - font-family: PingFang SC; - font-weight: 500; + .analysisMaintenanceText1 { font-size: 14px; + font-weight: 500; color: #333333; - margin-bottom: 8px; + font-family: PingFang SC; } - .analysisTitleIcon { - width: 3px; - height: 16px; - background-color: #2E4CD4; + .analysisMaintenanceText2 { + font-size: 12px; + color: #666666; + font-family: PingFang SC; } - .analysisMaintenanceContent { - flex: 1; - width: 100%; + .analysisMaintenanceText3 { + font-size: 12px; + color: #666666; + font-family: PingFang SC; } + } + + .analysisMaintenanceRight { + flex: 0 0 auto; + display: flex; + align-items: center; + justify-content: center; - .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; - } - } - } + .analysisMaintenanceStatus { + font-size: 12px; + color: #FF3E48; + font-weight: 500; + font-family: PingFang SC; + background-color: #FFE0E2; + padding: 4px 8px; + border-radius: 4px; } + } - .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; - } - } - - } + .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; } } } } + } - .analysisRightBlock { - width: calc(100% - 28% - 10px); - height: 100%; - background-color: #fff; - padding: 0; + .analysisTableSection { + width: calc(100% - 30% - 10px); + background-color: #fff; + display: flex; + flex-direction: column; + + .analysisTableHeader { display: flex; - flex-direction: column; + justify-content: space-between; + align-items: center; + padding: 11px 15px 5px 15px; - .analysisTableHeader { + .analysisTableTitle { 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; + gap: 8px; + font-family: PingFang SC; + font-weight: 500; + font-size: 14px; + color: #333333; - .analysisTitleIcon { - width: 3px; - height: 16px; - background-color: #2E4CD4; - } + .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; @@ -516,41 +386,41 @@ } } } + } - .analysisTableContainer { - flex: 1; - overflow: hidden; - margin: 10px 15px 0 15px; // 上边距10px，左右边距15px + .analysisTableContainer { + flex: 1; + overflow: hidden; + margin: 10px 15px 0 15px; - :global(.ant-table) { - font-size: 12px; - } + :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-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 > 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-table-tbody > tr:hover > td) { + background-color: #f5f5f5; + } - :global(.ant-pagination) { - margin-top: 16px; - text-align: right; - } + :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 index d9a7b5d..0359d73 100644 --- a/src/pages/business_firewarning/components/RealtimeMonitoring.js +++ b/src/pages/business_firewarning/components/RealtimeMonitoring.js @@ -336,7 +336,7 @@ const RealtimeMonitoring = () => { title: '设备名称', dataIndex: 'deviceName', key: 'deviceName', - width: 110, + width: 130, }, { title: '所在位置', @@ -370,7 +370,7 @@ const RealtimeMonitoring = () => { } }, { - title: '最后维护', + title: '最后更新', dataIndex: 'lastMaintenance', key: 'lastMaintenance', width: 150, @@ -378,7 +378,7 @@ const RealtimeMonitoring = () => { { title: '操作', key: 'action', - width: 140, + width: 100, render: (_, record) => (