监测

src/pages/safe_majorHazard/module/EvaluationReport.js

@@ -1,18 +1,32 @@
-import React from 'react';  // ======== 导入React库，用于创建React组件 ========
+import React from 'react';
-import { Card, Result } from 'antd';  // ======== 导入Ant Design的Card和Result组件 ========
+import { Card, Result } from 'antd';
-
+import styles from './EvaluationReport.less';
-const EvaluationReport = () => {  // ======== 定义评估报告及隐患处理组件函数 ========
+
-    return (  // ======== 返回JSX结构 ========
+const EvaluationReport = () => {
-        <div style={{ padding: '8px' }}>  // ======== 外层容器，设置24px内边距 ========
+    return (
-            <Card title="评估报告及隐患处理" style={{ height: '100%' }}>  // ======== Card组件，标题为"评估报告及隐患处理"，高度为父级100% ========
+        <div className={styles.Econtainer}>
-                <Result  // ======== Result组件，用于显示状态页面 ========
+            <div className={styles.EcontainerTop}>
-                    status="info"  // ======== 设置状态为info（信息类型） ========
+                <div className={styles.EcontainerLeft}>
-                    title="评估报告及隐患处理模块"  // ======== 设置标题 ========
+                    <div className={styles.EcontainerLeftTop}>
-                    subTitle="此功能正在开发中，敬请期待..."  // ======== 设置副标题，提示开发中 ========
+                        <div className={styles.EcontainerLeftTopLeft}></div>
-                />  // ======== Result组件结束 ========
+
-            </Card>  
+                    </div>
-        </div>  // ======== 外层容器结束 ========
+                    <div className={styles.EcontainerLeftBottom}></div>
-    );  // ======== return语句结束 ========
+
-};  // ======== 组件函数结束 ========
+                </div>
-
+                <div className={styles.EcontainerRight}></div>
-export default EvaluationReport;  // ======== 导出组件供其他文件使用 ========
+
+            </div>
+
+
+            <div className={styles.EcontainerBottom}></div>
+
+
+        </div>
+
+
+
+    );
+};
+
+export default EvaluationReport;  

src/pages/safe_majorHazard/module/OnlineMonitoring.js

@@ -1,19 +1,49 @@
 
-import React from 'react';  // ======== 导入React库，用于创建React组件 ========
+import React from 'react';
-import { Card, Result } from 'antd';  // ======== 导入Ant Design的Card和Result组件 ========
+import { Card, Result } from 'antd';
-
+import styles from './OnlineMonitoring.less';
-const OnlineMonitoring = () => {  // ======== 定义在线监测预警组件函数 ========
+
-    return (  // ======== 返回JSX结构 ========
+import alarm0 from '@/assets/safe_majorHazard/online_monitoring/alarm0.png';
-        <div style={{ padding: '24px' }}>  // ======== 外层容器，设置24px内边距 ========
+import alarm1 from '@/assets/safe_majorHazard/online_monitoring/alarm1.png';
-            <Card title="在线监测预警" style={{ height: '100%' }}>  // ======== Card组件，标题为"在线监测预警"，高度为父级100% ========
+import alarm2 from '@/assets/safe_majorHazard/online_monitoring/alarm2.png';
-                <Result  // ======== Result组件，用于显示状态页面 ========
+import alarm3 from '@/assets/safe_majorHazard/online_monitoring/alarm3.png';
-                    status="info"  // ======== 设置状态为info（信息类型） ========
+
-                    title="在线监测预警模块"  // ======== 设置标题 ========
+
-                    subTitle="此功能正在开发中，敬请期待..."  // ======== 设置副标题，提示开发中 ========
+
-                />  // ======== Result组件结束 ========
+const OnlineMonitoring = () => {
-            </Card>  // ======== Card组件结束 ========
+    return (
-        </div>  // ======== 外层容器结束 ========
+        <div className={styles.Econtainer}>
-    );  // ======== return语句结束 ========
+            <div className={styles.EcontainerTop}>
-};  // ======== 组件函数结束 ========
+                <div className={styles.EcontainerTopLeft}>
-
+                    <div className={styles.EcontainerTopLeftTop}>
-export default OnlineMonitoring;  // ======== 导出组件供其他文件使用 ========
+                        <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>
+                                <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>
+                <div className={styles.EcontainerRight}></div>
+            </div>
+            <div className={styles.EcontainerBottom}></div>
+        </div>
+    );
+};
+
+export default OnlineMonitoring;  

src/pages/safe_majorHazard/module/OnlineMonitoring.less

@@ -0,0 +1,107 @@
+.Econtainer {
+    padding: 8px 6px;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+
+    .EcontainerTop {
+        display: flex;
+        gap: 12px;
+        height: 50%;
+        margin-bottom: 5px;
+
+        .EcontainerTopLeft {
+            background-color: #999;
+            width: 68%;
+            margin-right: 10px;
+
+            .EcontainerTopLeftTop {
+                width: 100%;
+                height: 35%;
+                display: flex;
+                gap: 12px;
+
+                .alarmO {
+                    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;
+
+
+                    .alarmOLeft {
+                        width: 35%;
+                        height: 100%;
+                        display: flex;
+                        justify-content: center;
+                        align-items: center;
+                    }
+
+                    .alarmORight {
+                        flex: 1;
+                        width: 35%;
+                        height: 100%;
+                        display: flex;
+                        flex-direction: column;
+                        background-color: pink;
+
+                        font-family: PingFang SC;
+                        font-weight: 400;
+                        font-style: Regular;
+                        font-size: 14px;
+                        line-height: 100%;
+                        letter-spacing: 0%;
+                        color: #333333;
+                    }
+
+
+
+                }
+
+                .alarmTw {
+                    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;
+                }
+
+                .alarmTh {
+                    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;
+                }
+
+                .alarmF {
+                    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;
+                }
+            }
+        }
+
+        .EcontainerLeftBottom {
+            background-color: #999;
+            width: 42%;
+        }
+    }
+
+    .EcontainerBottom {
+        background-color: #666;
+        flex: 1;
+    }
+
+}