添加模块

pom.xml

@@ -218,6 +218,29 @@
                 <version>${ruoyi.version}</version>
             </dependency>
 
+            <!-- Log4j更新 -->
+            <dependency>
+                <groupId>org.apache.logging.log4j</groupId>
+                <artifactId>log4j-core</artifactId>
+                <version>2.15.0</version>
+            </dependency>
+            <dependency>
+                <groupId>org.apache.logging.log4j</groupId>
+                <artifactId>log4j-api</artifactId>
+                <version>2.15.0</version>
+            </dependency>
+            <dependency>
+                <groupId>org.apache.logging.log4j</groupId>
+                <artifactId>log4j-slf4j-impl</artifactId>
+                <version>2.15.0</version>
+                <scope>test</scope>
+            </dependency>
+            <dependency>
+                <groupId>org.apache.logging.log4j</groupId>
+                <artifactId>log4j-web</artifactId>
+                <version>2.15.0</version>
+            </dependency>
+
         </dependencies>
     </dependencyManagement>
 

ruoyi-admin/src/main/resources/static/css/autoscroll-table.css

@@ -68,12 +68,12 @@
     font-size: 0.9rem;
 }
 
-.autoscroll-table > tbody > tr:nth-child(odd) > td {
+.autoscroll-table > tbody > tr:nth-child(even) > td {
     background-color: rgba(9, 63, 98, 0.1);
     outline: rgba(9, 63, 98, 0.1) solid 0.1044444444em;
 }
 
-.autoscroll-table > tbody > tr:nth-child(even) > td {
+.autoscroll-table > tbody > tr:nth-child(odd) > td {
     background-color: #1077BC19;
     outline: #1077BC19 solid 0.1044444445em;
 }

ruoyi-admin/src/main/resources/static/css/main.css

@@ -115,7 +115,50 @@ body.body-substation-1 {
     opacity: 1;
 }
 
-.text-success-light {
+.text-success {
     color: #3bfd00 !important;
 }
 
+.transformer-btn {
+    color: #D6D6D6;
+    font-size: 75%;
+    background: url("../img/section-btn-blurred.png") no-repeat;
+    background-size: 100% 100%;
+    width: 5.2rem;
+    height: 1.6rem;
+    border: none;
+    box-shadow: none;
+    margin-right: 0.4rem;
+    padding: 0;
+}
+
+.transformer-btn:hover, .transformer-btn.active {
+    color: #D6D6D6;
+    background: url("../img/section-btn-selected.png") no-repeat;
+    background-size: 100% 100%;
+}
+
+.card {
+    border-radius: 0;
+    border: #01f8ff 1px solid;
+    background: none;
+}
+
+.card-header {
+    text-align: center;
+    background: #063b5bcf;
+    border-radius: 0 !important;
+    color: #FAFAFA;
+}
+
+.card-body {
+    background: #0a4378;
+    border-radius: 0 !important;
+}
+
+.status-badge {
+    position: absolute;
+    float: right;
+    right: 10%;
+    top: 4%;
+}

ruoyi-admin/src/main/resources/static/js/queuing-menu.js

@@ -88,6 +88,7 @@ class QueuingMenu {
 
     pop() {
         this.queue.pop()
+        this.ensureActive()
         this.render(false, true)
     }
 

ruoyi-admin/src/main/resources/templates/section/home.html

@@ -241,7 +241,7 @@
         <div>334</div>
 
         <div>监控装置</div>
-        <div class="text-success-light">336</div>
+        <div class="text-success">336</div>
 
         <div>装置调试</div>
         <div>0</div>

ruoyi-admin/src/main/resources/templates/section/substation.html

@@ -119,6 +119,57 @@
             left: 43.1%;
             color: #e9fe01;
         }
+
+        #alert-list {
+            position: absolute;
+            top: 71%;
+            left: 3%;
+            width: 48%;
+            height: 25%;
+        }
+
+        #alert-list td, #alert-list th {
+            padding: 0.4% 0;
+        }
+
+        #monitor-tabs {
+            position: absolute;
+            top: 5.6%;
+            left: 55%;
+        }
+
+        #transformer-card-group {
+            position: absolute;
+            top: 13%;
+            left: 54.5%;
+            width: 44%;
+            height: 81%;
+            overflow-y: scroll;
+        }
+
+        #transformer-card-group::-webkit-scrollbar {
+            display: none;
+        }
+
+        #transformer-card-group .card {
+            width: 49%;
+            height: 48%;
+            display: inline-block;
+            overflow: hidden;
+            margin-bottom: 0.3rem;
+        }
+
+        #transformer-card-group .card .card-body {
+            text-align: center;
+            height: 13.3rem;
+        }
+
+        #transformer-card-group .card img {
+            position: absolute;
+            /*width: 100%;*/
+            height: 12rem;
+            left: 17%;
+        }
     </style>
 
     <script th:src="@{/js/jquery.min.js}"></script>
@@ -150,12 +201,93 @@
 
     <div id="alert-list"></div>
 
-    <div id="monitor-tabs"></div>
+    <div id="monitor-tabs" class="btn-group">
+        <button class="btn transformer-btn active" id="btn_all-transformers">全部</button>
+        <button class="btn transformer-btn" id="btn_transformer1">变压器1</button>
+        <button class="btn transformer-btn" id="btn_transformer2">变压器2</button>
+        <button class="btn transformer-btn" id="btn_transformer3">变压器3</button>
+        <button class="btn transformer-btn" id="btn_transformer4">变压器4</button>
+        <button class="btn transformer-btn" id="btn_transformer5">变压器5</button>
+    </div>
 
-    <iframe id="monitor-display-frame"></iframe>
+    <div id="transformer-card-group"></div>
 
     <script>
+        const transformerCardGroup = document.getElementById("transformer-card-group")
+        function loadTransformerList(data) {
+            for (let entry of Object.entries(data)) {
+                let html = ''
+                html += `
+<div class="card" id="transformer-card${entry[0]}">
+    <div class="card-header">
+        <span class="card-title">${entry[1].name}</span>`
+                switch (entry[1].status) {
+                    case '正常':
+                        html += `<span class="badge bg-success status-badge">正常</span>`
+                        break
+                    case '异常':
+                        html += `<span class="badge bg-danger status-badge">异常</span>`
+                        break
+                    default:
+                        html += `<span class="badge bg-light status-badge">未知</span>`
+                        break
+                }
+
+                html += `
+        <span class="badge bg-danger status-badge">异常</span>
+    </div>
+    <div class="card-body">
+        <img src="/img/transformer.png" alt="变压器" />
+    </div>
+</div>`
+                transformerCardGroup.innerHTML += html
+            }
+        }
+
+        const alertListColumns = ['序号', '告警信息', '类型', '告警时间', '处理情况']
+        const alertList = new AutoScrollTable(document.getElementById("alert-list"), alertListColumns, {
+            width: ['10%', '50%', '10%', '20%', '10%'],
+        })
+
+        alertList.loadData([
+            ['01', '无线检测 相对检测值为10°-20°，其值为21°-25°', '越限', '2021.01.01 10:00:00', '<span class="text-success">已处理</span>'],
+            ['02', '无线检测 相对检测值为10°-20°，其值为21°-25°', '越限', '2021.01.01 10:00:00', '<span class="text-danger">未处理</span>'],
+            ['03', '无线检测 相对检测值为10°-20°，其值为21°-25°', '越限', '2021.01.01 10:00:00', '<span class="text-success">已处理</span>'],
+            ['04', '无线检测 相对检测值为10°-20°，其值为21°-25°', '越限', '2021.01.01 10:00:00', '<span class="text-danger">未处理</span>'],
+            ['05', '无线检测 相对检测值为10°-20°，其值为21°-25°', '越限', '2021.01.01 10:00:00', '<span class="text-success">已处理</span>'],
+            ['06', '无线检测 相对检测值为10°-20°，其值为21°-25°', '越限', '2021.01.01 10:00:00', '<span class="text-success">已处理</span>'],
+        ], Object.keys(alertListColumns))
+
+        $(() => {
+            loadTransformerList([
+                {
+                    name: '变压器1',
+                    status: '正常',
+                },
+                {
+                    name: '变压器2',
+                    status: '异常',
+                },
+                {
+                    name: '变压器3',
+                    status: '正常',
+                },
+                {
+                    name: '变压器4',
+                    status: '正常',
+                },
+            ])
+        })
+
+        function resize() {
+            fontAdjust()
+            alertList.resize()
+        }
 
+        window.onresize = resize
+        $(() => {
+            resize()
+        })
     </script>
 </body>
 </html>