From 2b91701228bc62446690d437895337a3469dad04 Mon Sep 17 00:00:00 2001
From: wangyunfei <1224056307@qq,com>
Date: Thu, 25 Sep 2025 15:45:10 +0800
Subject: [PATCH] =?UTF-8?q?=E5=9B=BE=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../module/OnlineMonitoring.js                | 139 ++++++++++++++++--
 .../module/OnlineMonitoring.less              |  94 ++++++++++--
 2 files changed, 210 insertions(+), 23 deletions(-)

diff --git a/src/pages/safe_majorHazard/module/OnlineMonitoring.js b/src/pages/safe_majorHazard/module/OnlineMonitoring.js
index 73e9d43..e97c4f8 100644
--- a/src/pages/safe_majorHazard/module/OnlineMonitoring.js
+++ b/src/pages/safe_majorHazard/module/OnlineMonitoring.js
@@ -1,6 +1,7 @@
 
-import React from 'react';
-import { Card, Result } from 'antd';
+import React, { useEffect, useRef } from 'react';
+import { Card, Result, Select } from 'antd';
+import * as echarts from 'echarts';
 import styles from './OnlineMonitoring.less';
 
 import alarm0 from '@/assets/safe_majorHazard/online_monitoring/alarm0.png';
@@ -11,11 +12,109 @@ import alarm3 from '@/assets/safe_majorHazard/online_monitoring/alarm3.png';
 
 
 const OnlineMonitoring = () => {
+    const chartRef = useRef(null);
+
+    useEffect(() => {
+        if (chartRef.current) {
+            const chart = echarts.init(chartRef.current);
+            
+            const option = {
+                color: ['#04A7F3', '#E7C42C', '#EC6941'],
+                title: {
+                    // text: '实时监测数据',
+                    left: 'center',
+                    // textStyle: {
+                    //     fontSize: 14,
+                    //     color: '#333'
+                    // }
+                },
+                tooltip: {
+                    trigger: 'axis',
+                    axisPointer: {
+                        type: 'cross',
+                        label: {
+                            backgroundColor: '#6a7985'
+                        }
+                    }
+                },
+                legend: {
+                    data: ['液位', '温度', '压力'],
+                    top: 0
+                },
+                grid: {
+                    left: '3%',
+                    right: '4%',
+                    bottom: '3%',
+                    top: '0%',
+                    containLabel: true
+                },
+                xAxis: {
+                    type: 'category',
+                    boundaryGap: false,
+                    data: ['0:00', '2:00', '4:00', '6:00', '8:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00', '22:00', '24:00']
+                },
+                yAxis: {
+                    type: 'value',
+                    min: 0,
+                    max: 900,
+                    axisLabel: {
+                        formatter: '{value}'
+                    }
+                },
+                series: [
+                    {
+                        name: '液位',
+                        type: 'line',
+                        smooth: true,
+                        lineStyle: {
+                            width: 1.5,
+                            color: '#04A7F3'
+                        },
+                        data: [120, 200, 150, 300, 250, 400, 350, 280, 320, 180, 220, 160, 140]
+                    },
+                    {
+                        name: '温度',
+                        type: 'line',
+                        smooth: true,
+                        lineStyle: {
+                            width: 1.5,
+                            color: '#E7C42C'
+                        },
+                        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'
+                        },
+                        data: [200, 300, 250, 450, 400, 600, 550, 420, 480, 280, 320, 260, 240]
+                    }
+                ]
+            };
+
+            chart.setOption(option);
+
+            // 响应式调整
+            const handleResize = () => {
+                chart.resize();
+            };
+            window.addEventListener('resize', handleResize);
+
+            return () => {
+                window.removeEventListener('resize', handleResize);
+                chart.dispose();
+            };
+        }
+    }, []);
+
     return (
-        <div className={styles.Econtainer}>
-            <div className={styles.EcontainerTop}>
-                <div className={styles.EcontainerTopLeft}>
-                    <div className={styles.EcontainerTopLeftTop}>
+        <div className={styles.Ocontainer}>
+            <div className={styles.OcontainerTop}>
+                <div className={styles.OcontainerTopLeft}>
+                    <div className={styles.OcontainerTopLeftTop}>
                         <div className={styles.alarmO}>
                             <div className={styles.alarmOLeft}>
                                 <img style={{ width: 58, height: 47 }} src={alarm0} alt='alarm0' />
@@ -85,11 +184,33 @@ const OnlineMonitoring = () => {
                             </div>
                         </div>
                     </div>
-                    <div className={styles.EcontainerLeftBottom}></div>
+                    <div className={styles.OcontainerTopLeftBottom}>
+                        <div className={styles.OcontainerTopLeftBottomTitle}>
+                            <div className={styles.titleLeft}>
+                                <div className={styles.titleIcon}></div>
+                                <div>预警看板</div>
+                            </div>
+                            <div className={styles.titleRight}>
+                                <div>检测对象</div>
+                                <Select 
+                                    style={{ width: 80 }} 
+                                    defaultValue="储罐"
+                                    options={[
+                                        { value: '储罐', label: '储罐' },
+                                        { value: '管道', label: '管道' },
+                                        { value: '设备', label: '设备' }
+                                    ]}
+                                />
+                            </div>
+                        </div>
+                        <div className={styles.OcontainerTopLeftBottomChart} ref={chartRef}>
+
+                        </div>
+                    </div>
                 </div>
-                <div className={styles.EcontainerRight}></div>
+                <div className={styles.OcontainerRight}></div>
             </div>
-            <div className={styles.EcontainerBottom}></div>
+            <div className={styles.OcontainerBottom}></div>
         </div>
     );
 };
diff --git a/src/pages/safe_majorHazard/module/OnlineMonitoring.less b/src/pages/safe_majorHazard/module/OnlineMonitoring.less
index d433288..4e4ecd3 100644
--- a/src/pages/safe_majorHazard/module/OnlineMonitoring.less
+++ b/src/pages/safe_majorHazard/module/OnlineMonitoring.less
@@ -1,21 +1,22 @@
-.Econtainer {
+.Ocontainer {
     padding: 8px 6px;
     height: 100%;
     display: flex;
     flex-direction: column;
 
-    .EcontainerTop {
+    .OcontainerTop {
         display: flex;
         gap: 12px;
         height: 50%;
         margin-bottom: 5px;
 
-        .EcontainerTopLeft {
-            // background-color: #999;
+        .OcontainerTopLeft {
             width: 72%;
+            height: 100%;
             margin-right: 10px;
+            // display: flex;
 
-            .EcontainerTopLeftTop {
+            .OcontainerTopLeftTop {
                 width: 100%;
                 height: 35%;
                 display: flex;
@@ -46,7 +47,7 @@
                         display: flex;
                         flex-direction: column;
                         margin-left: 2px;
-                        gap:18px;
+                        gap: 18px;
 
                         font-family: PingFang SC;
                         font-weight: 400;
@@ -59,18 +60,18 @@
                         .alarmORightText1 {
                             margin-top: 15px;
                         }
-                        
+
 
                         .alarmORightText2 {
                             font-weight: 700;
                             font-size: 16px;
                         }
-                        
+
                         .alarmORightText3 {
                             display: flex;
                             gap: 22px;
                         }
-                        
+
                     }
 
 
@@ -230,15 +231,80 @@
                     }
                 }
             }
-        }
 
-        .EcontainerLeftBottom {
-            background-color: #999;
-            width: 42%;
+            .OcontainerTopLeftBottom {
+                margin-top: 12px;
+                background-color: #fff;
+                width: 100%;
+                height: 60%;
+
+                .OcontainerTopLeftBottomTitle {
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+                    padding: 8px 15px;
+
+                    .titleLeft {
+                        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%;
+
+
+                        .titleIcon {
+                            width: 3px;
+                            height: 16px;
+                            background-color: #2E4CD4;
+                        }
+                    }
+
+                    .titleRight {
+                        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;
+                            }
+                        }
+                    }
+                }
+
+                .OcontainerTopLeftBottomChart {
+                    flex: 1;
+                    // padding: 15px;
+                    width: 100%;
+                    // height: 100%;
+                    height: 75%;
+                }
+            }
         }
+
+
     }
 
-    .EcontainerBottom {
+    .OcontainerBottom {
         background-color: #666;
         flex: 1;
     }