From 82b1d1d7bfc9ef78e885a81f195807528935c0d9 Mon Sep 17 00:00:00 2001
From: wangyunfei <1224056307@qq,com>
Date: Thu, 25 Sep 2025 14:11:47 +0800
Subject: [PATCH] =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../module/OnlineMonitoring.js                |  72 +++++++--
 .../module/OnlineMonitoring.less              | 149 +++++++++++++++++-
 2 files changed, 204 insertions(+), 17 deletions(-)

diff --git a/src/pages/safe_majorHazard/module/OnlineMonitoring.js b/src/pages/safe_majorHazard/module/OnlineMonitoring.js
index be11243..73e9d43 100644
--- a/src/pages/safe_majorHazard/module/OnlineMonitoring.js
+++ b/src/pages/safe_majorHazard/module/OnlineMonitoring.js
@@ -17,25 +17,73 @@ const OnlineMonitoring = () => {
                 <div className={styles.EcontainerTopLeft}>
                     <div className={styles.EcontainerTopLeftTop}>
                         <div className={styles.alarmO}>
-
                             <div className={styles.alarmOLeft}>
                                 <img style={{ width: 58, height: 47 }} src={alarm0} alt='alarm0' />
                             </div>
                             <div className={styles.alarmORight}>
-                              <div>总报警</div>
-                              <div>1456</div>
-                              <div>
-                                <div>
-                                    未处理 <text style={{ color: '#FF4D4F' }}>6</text>
+                                <div className={styles.alarmORightText1}>总报警</div>
+                                <div className={styles.alarmORightText2}>1456</div>
+                                <div className={styles.alarmORightText3}>
+                                    <div>
+                                        未处理 <text style={{ color: '#FF4D4F' }}>6</text>
+                                    </div>
+                                    <div>
+                                        处理中 <text style={{ color: '#2e4cd4' }}>10</text>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div className={styles.alarmTw}>
+                            <div className={styles.alarmTwLeft}>
+                                <img style={{ width: 58, height: 47 }} src={alarm1} alt='alarm1' />
+                            </div>
+                            <div className={styles.alarmTwRight}>
+                                <div className={styles.alarmTwRightText1}>一级报警</div>
+                                <div className={styles.alarmTwRightText2}>357</div>
+                                <div className={styles.alarmTwRightText3}>
+                                    <div>
+                                        未处理 <text style={{ color: '#FF4D4F' }}>6</text>
+                                    </div>
+                                    <div>
+                                        处理中 <text style={{ color: '#2e4cd4' }}>10</text>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div className={styles.alarmTh}>
+                            <div className={styles.alarmThLeft}>
+                                <img style={{ width: 58, height: 47 }} src={alarm2} alt='alarm2' />
+                            </div>
+                            <div className={styles.alarmThRight}>
+                                <div className={styles.alarmThRightText1}>二级报警</div>
+                                <div className={styles.alarmThRightText2}>401</div>
+                                <div className={styles.alarmThRightText3}>
+                                    <div>
+                                        未处理 <text style={{ color: '#FF4D4F' }}>6</text>
+                                    </div>
+                                    <div>
+                                        处理中 <text style={{ color: '#2e4cd4' }}>10</text>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div className={styles.alarmF}>
+                            <div className={styles.alarmFLeft}>
+                                <img style={{ width: 58, height: 47 }} src={alarm3} alt='alarm3' />
+                            </div>
+                            <div className={styles.alarmFRight}>
+                                <div className={styles.alarmFRightText1}>三级报警</div>
+                                <div className={styles.alarmFRightText2}>556</div>
+                                <div className={styles.alarmFRightText3}>
+                                    <div>
+                                        未处理 <text style={{ color: '#FF4D4F' }}>6</text>
+                                    </div>
+                                    <div>
+                                        处理中 <text style={{ color: '#2e4cd4' }}>10</text>
+                                    </div>
                                 </div>
-                                <div>处理中 <text>10</text></div>
-                              </div>
                             </div>
-
                         </div>
-                        <div className={styles.alarmTw}></div>
-                        <div className={styles.alarmTh}></div>
-                        <div className={styles.alarmF}></div>
                     </div>
                     <div className={styles.EcontainerLeftBottom}></div>
                 </div>
diff --git a/src/pages/safe_majorHazard/module/OnlineMonitoring.less b/src/pages/safe_majorHazard/module/OnlineMonitoring.less
index 6f49aab..d433288 100644
--- a/src/pages/safe_majorHazard/module/OnlineMonitoring.less
+++ b/src/pages/safe_majorHazard/module/OnlineMonitoring.less
@@ -11,8 +11,8 @@
         margin-bottom: 5px;
 
         .EcontainerTopLeft {
-            background-color: #999;
-            width: 68%;
+            // background-color: #999;
+            width: 72%;
             margin-right: 10px;
 
             .EcontainerTopLeftTop {
@@ -31,7 +31,6 @@
                     box-shadow: 0px 2px 31px 0px #5382FE33 inset;
                     display: flex;
 
-
                     .alarmOLeft {
                         width: 35%;
                         height: 100%;
@@ -46,15 +45,32 @@
                         height: 100%;
                         display: flex;
                         flex-direction: column;
-                        background-color: pink;
+                        margin-left: 2px;
+                        gap:18px;
 
                         font-family: PingFang SC;
                         font-weight: 400;
                         font-style: Regular;
-                        font-size: 14px;
+                        font-size: 12px;
                         line-height: 100%;
                         letter-spacing: 0%;
                         color: #333333;
+
+                        .alarmORightText1 {
+                            margin-top: 15px;
+                        }
+                        
+
+                        .alarmORightText2 {
+                            font-weight: 700;
+                            font-size: 16px;
+                        }
+                        
+                        .alarmORightText3 {
+                            display: flex;
+                            gap: 22px;
+                        }
+                        
                     }
 
 
@@ -69,6 +85,47 @@
                     border-bottom: 0px solid #FFC5BC;
                     border-radius: 4px;
                     box-shadow: 0px 2px 31px 0px #FE5F4C33 inset;
+                    display: flex;
+
+                    .alarmTwLeft {
+                        width: 35%;
+                        height: 100%;
+                        display: flex;
+                        justify-content: center;
+                        align-items: center;
+                    }
+
+                    .alarmTwRight {
+                        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%;
+                        color: #333333;
+
+                        .alarmTwRightText1 {
+                            margin-top: 15px;
+                        }
+
+                        .alarmTwRightText2 {
+                            font-weight: 700;
+                            font-size: 16px;
+                        }
+
+                        .alarmTwRightText3 {
+                            display: flex;
+                            gap: 22px;
+                        }
+                    }
                 }
 
                 .alarmTh {
@@ -79,6 +136,47 @@
                     border-bottom: 0px solid #FFD9B2;
                     border-radius: 4px;
                     box-shadow: 0px 2px 31px 0px #FD883C33 inset;
+                    display: flex;
+
+                    .alarmThLeft {
+                        width: 35%;
+                        height: 100%;
+                        display: flex;
+                        justify-content: center;
+                        align-items: center;
+                    }
+
+                    .alarmThRight {
+                        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%;
+                        color: #333333;
+
+                        .alarmThRightText1 {
+                            margin-top: 15px;
+                        }
+
+                        .alarmThRightText2 {
+                            font-weight: 700;
+                            font-size: 16px;
+                        }
+
+                        .alarmThRightText3 {
+                            display: flex;
+                            gap: 22px;
+                        }
+                    }
                 }
 
                 .alarmF {
@@ -89,6 +187,47 @@
                     border-bottom: 0px solid #89E1FF;
                     border-radius: 4px;
                     box-shadow: 0px 2px 31px 0px #22A4FD33 inset;
+                    display: flex;
+
+                    .alarmFLeft {
+                        width: 35%;
+                        height: 100%;
+                        display: flex;
+                        justify-content: center;
+                        align-items: center;
+                    }
+
+                    .alarmFRight {
+                        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%;
+                        color: #333333;
+
+                        .alarmFRightText1 {
+                            margin-top: 15px;
+                        }
+
+                        .alarmFRightText2 {
+                            font-weight: 700;
+                            font-size: 16px;
+                        }
+
+                        .alarmFRightText3 {
+                            display: flex;
+                            gap: 22px;
+                        }
+                    }
                 }
             }
         }