diff --git a/ruoyi-admin/src/main/java/com/ruoyi/web/controller/section/SectionController.java b/ruoyi-admin/src/main/java/com/ruoyi/web/controller/section/SectionController.java
index 46588c1..1744d55 100644
--- a/ruoyi-admin/src/main/java/com/ruoyi/web/controller/section/SectionController.java
+++ b/ruoyi-admin/src/main/java/com/ruoyi/web/controller/section/SectionController.java
@@ -16,4 +16,9 @@ public class SectionController {
     public String substation() {
         return "section/substation";
     }
+
+    @RequestMapping("/transformer-detail")
+    public String transformerDetail() {
+        return "section/transformer-detail";
+    }
 }
diff --git a/ruoyi-admin/src/main/resources/static/css/main.css b/ruoyi-admin/src/main/resources/static/css/main.css
index 2c9c2e9..6777d70 100644
--- a/ruoyi-admin/src/main/resources/static/css/main.css
+++ b/ruoyi-admin/src/main/resources/static/css/main.css
@@ -39,6 +39,14 @@ body.body-substation-1 {
     background-size: 100% 100%;
 }
 
+body.body-transformer-detail1 {
+    background: url("../img/transformer-detail.png") no-repeat center fixed;
+    -webkit-background-size: cover;
+    -moz-background-size: cover;
+    -o-background-size: cover;
+    background-size: 100% 100%;
+}
+
 .section-button-area {
     position: absolute;
     top: 3.7%;
@@ -136,29 +144,4 @@ body.body-substation-1 {
     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%;
 }
\ No newline at end of file
diff --git a/ruoyi-admin/src/main/resources/static/img/company-block.png b/ruoyi-admin/src/main/resources/static/img/company-block.png
new file mode 100644
index 0000000..c69d88f
Binary files /dev/null and b/ruoyi-admin/src/main/resources/static/img/company-block.png differ
diff --git a/ruoyi-admin/src/main/resources/static/img/index-background.jpg b/ruoyi-admin/src/main/resources/static/img/index-background.jpg
index 7e864b6..8276a0c 100644
Binary files a/ruoyi-admin/src/main/resources/static/img/index-background.jpg and b/ruoyi-admin/src/main/resources/static/img/index-background.jpg differ
diff --git a/ruoyi-admin/src/main/resources/static/img/list-block.png b/ruoyi-admin/src/main/resources/static/img/list-block.png
new file mode 100644
index 0000000..a592c6a
Binary files /dev/null and b/ruoyi-admin/src/main/resources/static/img/list-block.png differ
diff --git a/ruoyi-admin/src/main/resources/static/img/sensor-block-active.png b/ruoyi-admin/src/main/resources/static/img/sensor-block-active.png
new file mode 100644
index 0000000..c2061d5
Binary files /dev/null and b/ruoyi-admin/src/main/resources/static/img/sensor-block-active.png differ
diff --git a/ruoyi-admin/src/main/resources/static/img/sensor-block.png b/ruoyi-admin/src/main/resources/static/img/sensor-block.png
new file mode 100644
index 0000000..509cea0
Binary files /dev/null and b/ruoyi-admin/src/main/resources/static/img/sensor-block.png differ
diff --git a/ruoyi-admin/src/main/resources/static/img/transformer-detail.png b/ruoyi-admin/src/main/resources/static/img/transformer-detail.png
new file mode 100644
index 0000000..1209041
Binary files /dev/null and b/ruoyi-admin/src/main/resources/static/img/transformer-detail.png differ
diff --git a/ruoyi-admin/src/main/resources/static/img/transformer-noshadow-lg.png b/ruoyi-admin/src/main/resources/static/img/transformer-noshadow-lg.png
new file mode 100644
index 0000000..d8cc99d
Binary files /dev/null and b/ruoyi-admin/src/main/resources/static/img/transformer-noshadow-lg.png differ
diff --git a/ruoyi-admin/src/main/resources/templates/index.html b/ruoyi-admin/src/main/resources/templates/index.html
index 9753d4f..aac3af8 100644
--- a/ruoyi-admin/src/main/resources/templates/index.html
+++ b/ruoyi-admin/src/main/resources/templates/index.html
@@ -36,7 +36,7 @@
             <button class="btn section-button">智慧线路</button>
             <button class="btn section-button">分类监测</button>
         </div>
-        <div class="main-title">变电站智慧物联监控平台</div>
+<!--        <div class="main-title">变电站智慧物联监控平台</div>-->
     </header>
 
     <div class="nav nav-tabs tab-group" id="tab-group">
@@ -65,6 +65,7 @@
             "/sections/home",
             [
                 "/sections/substation",
+                "/sections/transformer-detail",
             ],
         ]
         function switchPage(index, subIndex) {
@@ -130,7 +131,7 @@
 
         $(() => {
             queuingMenu.select(0, -1)
-            queuingMenu.select(1, 0)
+            queuingMenu.select(1, 1)
         })
 
         function resize() {
diff --git a/ruoyi-admin/src/main/resources/templates/index.old.html b/ruoyi-admin/src/main/resources/templates/index.old.html
deleted file mode 100644
index 4ce91aa..0000000
--- a/ruoyi-admin/src/main/resources/templates/index.old.html
+++ /dev/null
@@ -1,315 +0,0 @@
-<!DOCTYPE html>
-<html  lang="zh-cn" xmlns:th="http://www.thymeleaf.org">
-<head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta name="renderer" content="webkit">
-    <title>输电智慧物联监控平台</title>
-    <!-- 避免IE使用兼容模式 -->
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <link th:href="@{favicon.ico}" rel="shortcut icon"/>
-    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
-    <link th:href="@{/css/jquery.contextMenu.min.css}" rel="stylesheet"/>
-    <link th:href="@{/css/fontawesome/all.min.css}" rel="stylesheet"/>
-    <link rel="stylesheet" th:href="@{/css/main.css}"/>
-    <link rel="stylesheet" th:href="@{/css/autoscroll-table.css}"/>
-
-    <style>
-        #unconfirmed_grid-current-failure {
-            position: absolute;
-            top: 18.3%;
-            right: 14.22%;
-        }
-
-        #total_grid-current-failure {
-            position: absolute;
-            top: 18.3%;
-            right: 6.3%;
-        }
-
-        #unconfirmed_grid-history-failure {
-            position: absolute;
-            top: 29%;
-            right: 14.22%;
-        }
-
-        #total_grid-history-failure {
-            position: absolute;
-            top: 29%;
-            right: 6.3%;
-        }
-
-        #unconfirmed_monitor-current-failure {
-            position: absolute;
-            top: 48%;
-            right: 14.22%;
-        }
-
-        #total_monitor-current-failure {
-            position: absolute;
-            top: 48%;
-            right: 6.3%;
-        }
-
-        #unconfirmed_monitor-history-failure {
-            position: absolute;
-            top: 58.7%;
-            right: 14.22%;
-        }
-
-        #total_monitor-history-failure {
-            position: absolute;
-            top: 58.7%;
-            right: 6.3%;
-        }
-
-        #unconfirmed_monitor-history-failure, #unconfirmed_monitor-current-failure, #unconfirmed_grid-history-failure, #unconfirmed_grid-current-failure {
-            color: #1992fb;
-        }
-
-        #total_monitor-history-failure, #total_monitor-current-failure, #total_grid-history-failure, #total_grid-current-failure {
-            color: #01f8ff;
-        }
-
-        #alert-trend-stat {
-            position: absolute;
-            width: 24.7%;
-            height: 22%;
-            bottom: 3.5%;
-            right: 3%;
-        }
-
-        #central-map {
-            position: absolute;
-            width: 37%;
-            height: 65%;
-            bottom: 3.5%;
-            left: 31%;
-        }
-
-        .combat-chart {
-            position: absolute;
-            width: 23%;
-            height: 21.5%;
-        }
-
-        .combat-table {
-            position: absolute;
-            width: 23%;
-            height: 13.2%;
-        }
-
-        #wire-device-stat_chart {
-            left: 3.8%;
-            top: 15.8%;
-        }
-
-        #wire-device-stat_table {
-            left: 3.8%;
-            top: 37.5%;
-        }
-
-        #wire-equipment-stat_chart {
-            left: 3.8%;
-            top: 60.2%;
-        }
-
-        #wire-equipment-stat_table {
-            left: 3.8%;
-            top: 81.9%;
-        }
-
-        .combat-display-group {
-            position: absolute;
-            width: 16%;
-            height: 15%;
-        }
-
-        #grid-device-group {
-            left: 32.8%;
-            top: 13.2%;
-        }
-
-        #monitor-equipment-group {
-            top: 13.2%;
-            right: 32.2%;
-        }
-    </style>
-</head>
-<body class="body-bg-1">
-<header>
-    <div class="btn-group section-button-area" id="section-buttons">
-        <button class="btn section-button">监控主页</button>
-        <button class="btn section-button">智慧线路</button>
-        <button class="btn section-button">分类监测</button>
-    </div>
-</header>
-
-<div id="wire-device-stat_chart" class="combat-chart"></div>
-<div id="wire-device-stat_table" class="combat-table"></div>
-
-<div id="wire-equipment-stat_chart" class="combat-chart"></div>
-<div id="wire-equipment-stat_table" class="combat-table"></div>
-
-<div class="combat-display-group" id="grid-device-group">
-    <div></div>
-    <div></div>
-    <div></div>
-    <div></div>
-    <div></div>
-</div>
-<div class="combat-display-group" id="monitor-equipment-group">
-    <div></div>
-    <div></div>
-    <div></div>
-    <div></div>
-    <div></div>
-</div>
-
-<div id="central-map"></div>
-
-<div class="digital-number-block" id="unconfirmed_grid-current-failure">24</div>
-<div class="digital-number-block" id="total_grid-current-failure">35</div>
-<div class="digital-number-block" id="unconfirmed_grid-history-failure">24</div>
-<div class="digital-number-block" id="total_grid-history-failure">35</div>
-<div class="digital-number-block" id="unconfirmed_monitor-current-failure">24</div>
-<div class="digital-number-block" id="total_monitor-current-failure">35</div>
-<div class="digital-number-block" id="unconfirmed_monitor-history-failure">24</div>
-<div class="digital-number-block" id="total_monitor-history-failure">35</div>
-
-<div id="alert-trend-stat"></div>
-
-<!-- 全局js -->
-<script th:src="@{/js/jquery.min.js}"></script>
-<script th:src="@{/js/bootstrap.bundle.min.js}"></script>
-<script th:src="@{/js/fontawesome/all.min.js}"></script>
-<script th:src="@{/js/autoscroll-table.js}"></script>
-<script th:src="@{/js/auto-update.js}"></script>
-<script th:src="@{/js/font-adjust.js}"></script>
-<th:block th:include="include :: echarts-js" />
-<script th:inline="javascript">
-
-    const wireDeviceStatChart = echarts.init(document.getElementById("wire-device-stat_chart"))
-
-    const wireDeviceStatTableColumns = ['名称', '重置', '数量']
-    const wireDeviceStatTable = new AutoScrollTable(document.getElementById("wire-device-stat_table"), wireDeviceStatTableColumns, {
-
-    })
-
-    const wireEquipmentStatTableColumns = ['名称', '重置', '数量']
-    const wireEquipmentStatTable = new AutoScrollTable(document.getElementById("wire-equipment-stat_table"), wireEquipmentStatTableColumns, {
-
-    })
-
-    wireDeviceStatTable.loadData([
-        ['输电通道', '----', 2349],
-        ['杆塔', '----', 1563],
-        ['输电', '----', 2349],
-    ], Object.keys(wireDeviceStatTableColumns))
-
-    wireEquipmentStatTable.loadData([
-        ['输电通道', '----', 2349],
-        ['杆塔', '----', 1563],
-        ['输电', '----', 2349],
-    ], Object.keys(wireEquipmentStatTable))
-
-    const gaugeData = [
-        {
-            value: 20,
-            name: 'Perfect',
-            title: {
-                offsetCenter: ['0%', '-30%']
-            },
-            detail: {
-                valueAnimation: true,
-                offsetCenter: ['0%', '-20%']
-            }
-        },
-        {
-            value: 40,
-            name: 'Good',
-            title: {
-                offsetCenter: ['0%', '0%']
-            },
-            detail: {
-                valueAnimation: true,
-                offsetCenter: ['0%', '10%']
-            }
-        },
-        {
-            value: 60,
-            name: 'Commonly',
-            title: {
-                offsetCenter: ['0%', '30%']
-            },
-            detail: {
-                valueAnimation: true,
-                offsetCenter: ['0%', '40%']
-            }
-        }
-    ];
-    wireDeviceStatChart.setOption({
-        series: [
-            {
-                type: 'gauge',
-                startAngle: 90,
-                endAngle: -270,
-                pointer: {
-                    show: false
-                },
-                progress: {
-                    show: true,
-                    overlap: false,
-                    roundCap: true,
-                    clip: false,
-                    itemStyle: {
-                        borderWidth: 1,
-                        borderColor: '#464646'
-                    }
-                },
-                axisLine: {
-                    lineStyle: {
-                        width: 40
-                    }
-                },
-                splitLine: {
-                    show: false,
-                    distance: 0,
-                    length: 10
-                },
-                axisTick: {
-                    show: false
-                },
-                axisLabel: {
-                    show: false,
-                    distance: 50
-                },
-                data: gaugeData,
-                title: {
-                    fontSize: 14
-                },
-                detail: {
-                    width: 50,
-                    height: 14,
-                    fontSize: 14,
-                    color: 'auto',
-                    borderColor: 'auto',
-                    borderRadius: 20,
-                    borderWidth: 1,
-                    formatter: '{value}%'
-                }
-            }
-        ]
-    })
-
-    function resize() {
-        fontAdjust()
-    }
-
-    window.onresize = resize
-    $(() => {
-        resize()
-    })
-</script>
-</body>
-</html>
diff --git a/ruoyi-admin/src/main/resources/templates/section/substation.html b/ruoyi-admin/src/main/resources/templates/section/substation.html
index 7cf0b75..5a9744a 100644
--- a/ruoyi-admin/src/main/resources/templates/section/substation.html
+++ b/ruoyi-admin/src/main/resources/templates/section/substation.html
@@ -170,6 +170,31 @@
             height: 12rem;
             left: 17%;
         }
+
+        .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%;
+        }
     </style>
 
     <script th:src="@{/js/jquery.min.js}"></script>
diff --git a/ruoyi-admin/src/main/resources/templates/section/transformer-detail.html b/ruoyi-admin/src/main/resources/templates/section/transformer-detail.html
new file mode 100644
index 0000000..ce3c093
--- /dev/null
+++ b/ruoyi-admin/src/main/resources/templates/section/transformer-detail.html
@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="renderer" content="webkit">
+    <title>监控主页</title>
+
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <link th:href="@{favicon.ico}" rel="shortcut icon"/>
+    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
+    <link th:href="@{/css/jquery.contextMenu.min.css}" rel="stylesheet"/>
+    <link th:href="@{/css/fontawesome/all.min.css}" rel="stylesheet"/>
+    <link rel="stylesheet" th:href="@{/css/main.css}"/>
+    <link rel="stylesheet" th:href="@{/css/autoscroll-table.css}"/>
+    <style>
+        #company-name {
+            position: absolute;
+            top: 2%;
+            left: 4.7%;
+            width: 8.6%;
+            color: #FFFFFF;
+            font-size: 80%;
+            letter-spacing: 1px;
+            text-align: center;
+        }
+
+        .ball-text {
+            position: absolute;
+            width: 4%;
+            color: #FFFFFF;
+            font-size: 110%;
+        }
+
+        #launched-count {
+            bottom: 15.8%;
+            left: 21.2%;
+        }
+
+        #error-alert {
+            bottom: 15.8%;
+            left: 29.8%;
+        }
+
+        #online-count {
+            bottom: 15.8%;
+            left: 38.3%;
+        }
+
+        #sensor-list {
+            position: absolute;
+            width: 14%;
+            height: 91.4%;
+            top: 8.5%;
+            left: 0.04%;
+            border-radius: 0.3rem;
+            overflow: scroll;
+        }
+
+        #sensor-list::-webkit-scrollbar {
+            display: none;
+        }
+
+        #transformer-name {
+            position: absolute;
+            width: 30%;
+            top: 1.6%;
+            left: 10%;
+            color: #00e4ff;
+            background: #00FF0039;
+            text-align: center;
+        }
+    </style>
+
+    <script th:src="@{/js/jquery.min.js}"></script>
+    <script th:src="@{/js/bootstrap.bundle.min.js}"></script>
+    <script th:src="@{/js/fontawesome/all.min.js}"></script>
+    <script th:src="@{/js/autoscroll-table.js}"></script>
+    <script th:src="@{/js/auto-update.js}"></script>
+    <script th:src="@{/js/font-adjust.js}"></script>
+    <th:block th:include="include :: echarts-js" />
+    <script th:inline="javascript"></script>
+</head>
+<body class="body-transformer-detail1">
+    <div id="company-name">福建省电力公司</div>
+
+    <div id="sensor-list"></div>
+
+    <div id="transformer-name">变压器1</div>
+    <div id="transformer-model">
+<!--        <img src="" alt="">-->
+    </div>
+
+    <div class="ball-text" id="launched-count">5</div>
+    <div class="ball-text" id="error-alert">5</div>
+    <div class="ball-text" id="online-count">5</div>
+
+    <nav class="nav search-bar" id="main-search-bar"></nav>
+    <div id="sensor-card-group"></div>
+</body>
+</html>
\ No newline at end of file