添加模块

ruoyi-admin/src/main/java/com/ruoyi/web/controller/section/SectionController.java

@@ -11,4 +11,9 @@ public class SectionController {
     public String index() {
         return "section/home";
     }
+
+    @RequestMapping("/substation")
+    public String substation() {
+        return "section/substation";
+    }
 }

ruoyi-admin/src/main/resources/application-druid.yml

@@ -6,9 +6,9 @@ spring:
         druid:
             # 主库数据源
             master:
-                url: jdbc:mysql://localhost:3306/power_iot?useUnicode=true&characterEncoding=utf8&zeroDateTimeBehavior=convertToNull&useSSL=true&serverTimezone=GMT%2B8
+                url: jdbc:mysql://121.36.58.109:3306/power_iot?useUnicode=true&characterEncoding=utf8&zeroDateTimeBehavior=convertToNull&useSSL=true&serverTimezone=GMT%2B8
                 username: root
-                password: 123456
+                password: Haiwei123456
             # 从库数据源
             slave:
                 # 从数据源开关/默认关闭

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

@@ -2,6 +2,19 @@
     font-family: Arial, Calibri, DengXian, "Microsoft YaHei", SimSun, monospace;
 }
 
+.main-title {
+    position: absolute;
+    text-align: center;
+    color: #FFFFFF;
+    font-size: 160%;
+    width: 100%;
+    top: 1.5%;
+    font-weight: bold;
+    text-shadow: rgba(195, 255, 250, 0.5) 0 0 5px;
+    letter-spacing: 1px;
+    z-index: 0;
+}
+
 body.body-bg-1 {
     background: url("../img/index-background.jpg") no-repeat center fixed;
     -webkit-background-size: cover;
@@ -10,10 +23,27 @@ body.body-bg-1 {
     background-size: 100% 100%;
 }
 
+body.body-home-1 {
+    background: url("../img/home-background.png") no-repeat center fixed;
+    -webkit-background-size: cover;
+    -moz-background-size: cover;
+    -o-background-size: cover;
+    background-size: 100% 100%;
+}
+
+body.body-substation-1 {
+    background: url("../img/wire-background.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%;
     left: 2.7%;
+    z-index: 1;
 }
 
 .section-button {
@@ -39,7 +69,7 @@ body.body-bg-1 {
     font-family: "Agency FB", Arial, Calibri, DengXian, "Microsoft YaHei", SimSun, monospace;
     font-weight: bold;
     font-size: 130%;
-    width: 5%;
+    width: 5.5%;
     text-align: center;
     color: #FFFFFF;
     letter-spacing: 2px;
@@ -48,28 +78,44 @@ body.body-bg-1 {
 .tab-group {
     width: 100%;
     padding: 0 1rem;
+    border-bottom: #23C1FF 1px solid;
 }
 
 .tab-group-item {
     display: inline-block;
-    min-width: 7rem;
+    min-width: 6.125rem;
-    min-height: 1.6rem;
+    min-height: 1.4rem;
-    padding: 0;
+    padding: 0 0 0 6px;
-    color: #FFFFFF;
+    color: #01f8ff;
-    border: #FFFFFF solid 1px;
+    font-size: 0.7rem;
+    letter-spacing: 1px;
+    /*border: #FFFFFF solid 1px;*/
     border-radius: 0;
+    background: url("../img/tab-background.png");
+    text-align: left;
 }
 
 .tab-group-item:hover, .tab-group-item.active {
-    color: #004b4b;
+    color: #01f8ff;
     font-weight: bold;
-    background-color: #0dcaf0;
+    background-color: #23C1FF3F;
 }
 
 .tab-group-item .close-btn {
     opacity: 0;
+    color: #FFFFFF;
+    font-size: 80%;
+    /*margin-left: 20%;*/
+    float: right;
+    margin-right: 7%;
+    z-index: 1;
 }
 
 .tab-group-item:hover .close-btn, .tab-group-item.active .close-btn {
     opacity: 1;
-}
+}
+
+.text-success-light {
+    color: #3bfd00 !important;
+}
+

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

@@ -2,9 +2,8 @@ class QueuingMenu {
 
     constructor(menuParent, queueParent, menu, {
         onRenderMenuItem = (parent, index, menuName, submenuNames) => {},
-        onLinkMenuItem = (parent, el, index, menuName, submenuNames) => {},
+        onLinkMenu = (parent, menu) => {},
         onRenderQueueItem = (parent, index, item) => {},
-        onLinkQueueItem = (parent, el, index, item) => {},
         onLinkQueue = (parent, queue) => {},
         onSelect = (menuParent, name, index, subIndex) => {},
         onEnqueue = (queueParent, name, queueindex, menuIndex, menuSubindex) => {},
@@ -15,9 +14,8 @@ class QueuingMenu {
         this.queueParent = queueParent
         this.menu = menu
         this.onRenderMenuItem = onRenderMenuItem
-        this.onLinkMenuItem = onLinkMenuItem
+        this.onLinkMenu = onLinkMenu
         this.onRenderQueueItem = onRenderQueueItem
-        this.onLinkQueueItem = onLinkQueueItem
         this.onLinkQueue = onLinkQueue
         this.onSelect = onSelect
         this.onEnqueue = onEnqueue
@@ -33,14 +31,14 @@ class QueuingMenu {
         if (menu) {
             for (let entry of Object.entries(this.menu)) {
                 this.menuParent.innerHTML += this.onRenderMenuItem(this.menuParent, parseInt(entry[0]), entry[1].name, entry[1].submenu)
-                this.onLinkMenuItem(this.menuParent, this.menuParent.children[this.menuParent.children.length - 1], parseInt(entry[0]), entry[1].name, entry[1].submenu)
             }
+
+            this.onLinkMenu(parent, this.menu)
         }
 
         if (queue) {
             for (let entry of Object.entries(this.queue)) {
                 this.queueParent.innerHTML += this.onRenderQueueItem(this.queueParent, parseInt(entry[0]), entry[1])
-                this.onLinkQueueItem(this.queueParent, this.queueParent.children[this.queueParent.children.length - 1], parseInt(entry[0]), entry[1])
             }
 
             this.onLinkQueue(this.queueParent, this.queue)

ruoyi-admin/src/main/resources/templates/index.html

@@ -19,6 +19,14 @@
             position: absolute;
             top: 8%;
         }
+
+        #main-display-frame {
+            position: absolute;
+            width: 95%;
+            bottom: 0;
+            left: 2.5%;
+            height: 87%;
+        }
     </style>
 </head>
 <body class="body-bg-1">
@@ -28,15 +36,18 @@
             <button class="btn section-button">智慧线路</button>
             <button class="btn section-button">分类监测</button>
         </div>
-        <div class="nav nav-tabs tab-group" id="tab-group">
+        <div class="main-title">变电站智慧物联监控平台</div>
-            <button class="btn tab-group-item">主页<i class="fa-solid fa-times close-btn"></i></button>
-            <button class="btn tab-group-item">主页<i class="fa-solid fa-times close-btn"></i></button>
-            <button class="btn tab-group-item">主页<i class="fa-solid fa-times close-btn"></i></button>
-            <button class="btn tab-group-item">主页<i class="fa-solid fa-times close-btn"></i></button>
-            <button class="btn tab-group-item">主页<i class="fa-solid fa-times close-btn"></i></button>
-        </div>
     </header>
 
+    <div class="nav nav-tabs tab-group" id="tab-group">
+        <button class="btn tab-group-item">正在加载<i class="fa-solid fa-times close-btn"></i></button>
+        <button class="btn tab-group-item">正在加载<i class="fa-solid fa-times close-btn"></i></button>
+        <button class="btn tab-group-item">正在加载<i class="fa-solid fa-times close-btn"></i></button>
+        <button class="btn tab-group-item">正在加载<i class="fa-solid fa-times close-btn"></i></button>
+        <button class="btn tab-group-item">正在加载<i class="fa-solid fa-times close-btn"></i></button>
+    </div>
+    <iframe id="main-display-frame"></iframe>
+
     <!-- 全局js -->
     <script th:src="@{/js/jquery.min.js}"></script>
     <script th:src="@{/js/bootstrap.bundle.min.js}"></script>
@@ -48,8 +59,16 @@
     <script th:src="@{/js/queuing-menu.js}"></script>
     <script th:inline="javascript">
 
-        function switchPage(url) {
+        const mainFrame = document.getElementById("main-display-frame")
 
+        const pages = [
+            "/sections/home",
+            [
+                "/sections/substation",
+            ],
+        ]
+        function switchPage(index, subIndex) {
+            mainFrame.setAttribute("src", subIndex === -1 ? pages[index] : pages[index][subIndex])
         }
 
         const queuingMenu = new QueuingMenu(
@@ -63,21 +82,14 @@
                 {
                     name: "智慧线路",
                     submenu: [
-                        "智慧线路1",
+                        "智慧线路",
-                        "智慧线路2",
+                        "变压器",
-                        "智慧线路3",
+                        "传感器",
-                        "智慧线路4",
-                        "智慧线路5",
                     ],
                 },
                 {
                     name: "分类监测",
-                    submenu: [
+                    submenu: [],
-                        "监测1",
-                        "监测2",
-                        "监测3",
-                        "监测4",
-                    ],
                 },
             ],
             {
@@ -111,16 +123,14 @@
                     }
                 },
                 onSwitch(queueParent, name, oldQueueIndex, queueIndex, menuIndex, menuSubIndex) {
-                    switch (menuIndex) {
+                    switchPage(menuIndex, menuSubIndex)
-                        case 0:
-                            switchPage("/sections/home")
-                    }
                 },
             },
         )
 
         $(() => {
             queuingMenu.select(0, -1)
+            queuingMenu.select(1, 0)
         })
 
         function resize() {

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

@@ -14,7 +14,192 @@
     <link rel="stylesheet" th:href="@{/css/main.css}"/>
     <link rel="stylesheet" th:href="@{/css/autoscroll-table.css}"/>
 
-    <style></style>
+    <style>
+        #unconfirmed_grid-current-failure {
+            position: absolute;
+            top: 8%;
+            right: 10.7%;
+        }
+
+        #total_grid-current-failure {
+            position: absolute;
+            top: 8%;
+            right: 2.5%;
+        }
+
+        #unconfirmed_grid-history-failure {
+            position: absolute;
+            top: 20%;
+            right: 10.7%;
+        }
+
+        #total_grid-history-failure {
+            position: absolute;
+            top: 20%;
+            right: 2.5%;
+        }
+
+        #unconfirmed_monitor-current-failure {
+            position: absolute;
+            top: 41.32%;
+            right: 10.7%;
+        }
+
+        #total_monitor-current-failure {
+            position: absolute;
+            top: 41.32%;
+            right: 2.5%;
+        }
+
+        #unconfirmed_monitor-history-failure {
+            position: absolute;
+            top: 53.33%;
+            right: 10.7%;
+        }
+
+        #total_monitor-history-failure {
+            position: absolute;
+            top: 53.33%;
+            right: 2.5%;
+        }
+
+        #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: 23.5%;
+            height: 24.8%;
+            bottom: 3.5%;
+            right: 0.3%;
+        }
+
+        #central-map {
+            position: absolute;
+            width: 37%;
+            height: 65%;
+            bottom: 3.5%;
+            left: 31%;
+        }
+
+        .combat-chart {
+            position: absolute;
+            width: 21.6%;
+            height: 24.5%;
+        }
+
+        .combat-table {
+            position: absolute;
+            width: 21.6%;
+            height: 14%;
+        }
+
+        #wire-device-stat_chart {
+            left: 1.2%;
+            top: 5.4%;
+        }
+
+        #wire-device-stat_table {
+            left: 1.2%;
+            top: 29.8%;
+        }
+
+        #wire-equipment-stat_chart {
+            left: 1.2%;
+            top: 55%;
+        }
+
+        #wire-equipment-stat_table {
+            left: 1.2%;
+            top: 80%;
+        }
+
+        .combat-display-group {
+            position: absolute;
+            width: 21%;
+            height: 22%;
+        }
+
+        #grid-device-group {
+            left: 27%;
+            top: 5.2%;
+        }
+
+        #monitor-equipment-group {
+            top: 5.2%;
+            right: 26.6%;
+        }
+
+        .combat-display-group div:nth-child(odd) {
+            position: absolute;
+            color: #FFFFFF;
+            font-size: 85%;
+        }
+
+        .combat-display-group div:nth-child(even) {
+            position: absolute;
+            color: #1fcff6;
+            font-size: 120%;
+            width: 30%;
+            text-align: center;
+        }
+
+        .combat-display-group div:first-child {
+            top: 8%;
+            left: 9%;
+        }
+
+        .combat-display-group div:nth-child(2) {
+            top: 20%;
+            left: 3%;
+        }
+
+        .combat-display-group div:nth-child(3) {
+            top: 8%;
+            right: 10%;
+        }
+
+        .combat-display-group div:nth-child(4) {
+            top: 20%;
+            right: 3%;
+        }
+
+        .combat-display-group div:nth-child(5) {
+            top: 56%;
+            left: 39%;
+        }
+
+        .combat-display-group div:nth-child(6) {
+            top: 34%;
+            left: 34%;
+            font-size: 140%;
+        }
+
+        .combat-display-group div:nth-child(7) {
+            top: 58%;
+            left: 9%;
+        }
+
+        .combat-display-group div:nth-child(8) {
+            top: 74%;
+            left: 3%;
+        }
+
+        .combat-display-group div:nth-child(9) {
+            top: 58%;
+            right: 10%;
+        }
+
+        .combat-display-group div:nth-child(10) {
+            top: 74%;
+            right: 3%;
+        }
+    </style>
 
     <script th:src="@{/js/jquery.min.js}"></script>
     <script th:src="@{/js/bootstrap.bundle.min.js}"></script>
@@ -25,7 +210,315 @@
     <th:block th:include="include :: echarts-js" />
     <script th:inline="javascript"></script>
 </head>
-<body>
+<body class="body-home-1">
+    <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>3</div>
+
+        <div>预警状态</div>
+        <div>0</div>
+
+        <div>电网设备</div>
+        <div>1574</div>
+
+        <div>报警状态</div>
+        <div class="text-danger">0</div>
+
+        <div>未知状态</div>
+        <div>1571</div>
+    </div>
+    <div class="combat-display-group" id="monitor-equipment-group">
+        <div>装置正常</div>
+        <div>2</div>
+
+        <div>装置异常</div>
+        <div>334</div>
+
+        <div>监控装置</div>
+        <div class="text-success-light">336</div>
+
+        <div>装置调试</div>
+        <div>0</div>
+
+        <div>装置故障</div>
+        <div class="text-danger">0</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>
+    <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, {
+
+        })
+
+        const wireEquipmentStatChart = echarts.init(document.getElementById("wire-equipment-stat_chart"))
+        const alertTrendStatChart = echarts.init(document.getElementById("alert-trend-stat"))
+
+        wireDeviceStatTable.loadData([
+            ['输电通道', '----', 2349],
+            ['杆塔', '----', 1563],
+            ['输电', '----', 2349],
+        ], Object.keys(wireDeviceStatTableColumns))
+
+        wireEquipmentStatTable.loadData([
+            ['输电通道', '----', 2349],
+            ['杆塔', '----', 1563],
+            ['输电', '----', 2349],
+        ], Object.keys(wireEquipmentStatTableColumns))
+
+        wireDeviceStatChart.setOption({
+            polar: {
+                radius: [30, '80%']
+            },
+            angleAxis: {
+                max: 10,
+                startAngle: 90,
+                axisLabel: {
+                    show: false,
+                },
+                splitLine: {
+                    show: false,
+                },
+                axisLine: {
+                    show: false,
+                },
+            },
+            radiusAxis: {
+                type: 'category',
+                data: ['正常状态', '预警状态', '警告状态'],
+                axisLabel: {
+                    show: false,
+                },
+            },
+            tooltip: {},
+            series: {
+                type: 'bar',
+                data: [5, 0, 0],
+                coordinateSystem: 'polar',
+                showBackground: true,
+                backgroundStyle: {
+                    color: '#094874',
+                },
+                itemStyle: {
+                    color: '#1eaef4',
+                },
+                label: {
+                    show: false,
+                },
+            },
+        })
+
+        const wescColorMap = {
+            "装置异常": new echarts.graphic.LinearGradient(1, 0, 0, 0,
+                [
+                    {offset: 0, color: '#00f9ff'},
+                    {offset: 1, color: '#1facf4'}
+                ]),
+            "装置测试": new echarts.graphic.LinearGradient(1, 0, 0, 0,
+                [
+                    {offset: 0, color: '#87ffd1'},
+                    {offset: 1, color: '#00f9ff'}
+                ]),
+            "装置故障": new echarts.graphic.LinearGradient(1, 0, 0, 0,
+                [
+                    {offset: 0, color: '#ff8e01'},
+                    {offset: 1, color: '#f4421e'}
+                ]),
+            "装置正常": new echarts.graphic.LinearGradient(1, 0, 0, 0,
+                [
+                    {offset: 0, color: '#00b8fe'},
+                    {offset: 1, color: '#1f61f5'}
+                ]),
+        }
+
+        wireEquipmentStatChart.setOption({
+            yAxis: {
+                type: 'category',
+                data: ['装置异常', '装置测试', '装置故障', '装置正常'].reverse(),
+                splitLine: {
+                    show: true,
+                    lineStyle: {
+                        color: 'rgba(76,146,195,0.32)',
+                        width: 1,
+                        type: 'dashed',
+                    },
+                },
+                axisLabel: {
+                    color: '#afafaf',
+                    fontSize: 10,
+                },
+            },
+            xAxis: {
+                type: 'value',
+                max: 350,
+                min: 0,
+                interval: 50,
+                splitLine: {
+                    show: true,
+                    lineStyle: {
+                        color: 'rgba(76,146,195,0.32)',
+                        width: 1,
+                        type: 'dashed',
+                    },
+                },
+                axisLabel: {
+                    color: '#afafaf',
+                    fontSize: 10,
+                },
+            },
+            series: [
+                {
+                    data: [270, 140, 40, 120].reverse(),
+                    type: 'bar',
+                    barWidth: 16,
+                    itemStyle: {
+                        color(param) {
+                            return wescColorMap[param.name]
+                        },
+                    },
+                },
+            ],
+            grid: {
+                left: 10,
+                right: 10,
+                top: 5,
+                bottom: 5,
+                containLabel: true,
+            },
+        })
+
+        alertTrendStatChart.setOption({
+            xAxis: {
+                type: 'category',
+                data: ['2021-10-30', '2021-10-30', '2021-10-30', '2021-10-30', '2021-10-30'],
+                splitLine: {
+                    show: true,
+                    lineStyle: {
+                        color: 'rgba(76,146,195,0.32)',
+                        width: 1,
+                        type: 'dashed',
+                    },
+                },
+                axisLabel: {
+                    color: '#afafaf',
+                    fontSize: 6,
+                },
+            },
+            yAxis: {
+                type: 'value',
+                splitLine: {
+                    show: true,
+                    lineStyle: {
+                        color: 'rgba(76,146,195,0.32)',
+                        width: 1,
+                        type: 'dashed',
+                    },
+                },
+                axisLabel: {
+                    show: false,
+                    color: '#afafaf',
+                    fontSize: 10,
+                },
+                max: 90,
+                min: 0,
+                interval: 30,
+            },
+            legend: {
+                textStyle: {
+                    color: '#FFFFFF',
+                },
+                right: 0,
+            },
+            series: [
+                {
+                    data: [30, 60, 50, 80, 70],
+                    name: "电网设备",
+                    type: 'line',
+                    itemStyle: {
+                        color: '#00f8fe',
+                    },
+                    areaStyle: {
+                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                            {
+                                offset: 0,
+                                color: '#00f8fe7F'
+                            },
+                            {
+                                offset: 1,
+                                color: '#00f8fe00'
+                            }
+                        ])
+                    },
+                },
+                {
+                    data: [25, 28, 35, 20, 40],
+                    name: "监控装置",
+                    type: 'line',
+                    itemStyle: {
+                        color: '#fec81e',
+                    },
+                    areaStyle: {
+                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                            {
+                                offset: 0,
+                                color: '#fec81e7f'
+                            },
+                            {
+                                offset: 1,
+                                color: '#fec81e00'
+                            }
+                        ])
+                    },
+                },
+            ],
+            tooltip: {},
+            grid: {
+                left: 10,
+                right: 10,
+                top: 30,
+                bottom: 5,
+                containLabel: true,
+            },
+        })
+
+        function resize() {
+            fontAdjust()
+            wireDeviceStatTable.resize()
+            wireDeviceStatChart.resize()
+            wireEquipmentStatTable.resize()
+            wireEquipmentStatChart.resize()
+            alertTrendStatChart.resize()
+        }
 
+        window.onresize = resize
+        $(() => {
+            resize()
+        })
+    </script>
 </body>
 </html>

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

@@ -0,0 +1,161 @@
+<!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>
+        .display-text-1 {
+            position: absolute;
+            font-size: 200%;
+            width: 12%;
+            text-align: center;
+        }
+
+        #transformer {
+            color: #16f84e;
+            top: 8%;
+            left: 13%;
+        }
+
+        #sensor {
+            color: #01fff0;
+            top: 8%;
+            left: 27%;
+        }
+
+        .float-ball {
+            position: absolute;
+            width: 4%;
+            text-align: center;
+            font-size: 120%;
+        }
+
+        #access {
+            top: 35.2%;
+            left: 5.7%;
+            color: #4e9cff;
+        }
+
+        #running {
+            top: 35.2%;
+            left: 13.1%;
+            color: #24ff1f;
+        }
+
+        #standby {
+            top: 35.2%;
+            left: 20.6%;
+            color: #00e4ff;
+        }
+
+        #failure {
+            top: 35.2%;
+            left: 28.1%;
+            color: #fb1a16;
+        }
+
+        #repairing {
+            top: 35.2%;
+            left: 35.7%;
+            color: #f58e2f;
+        }
+
+        #communication-failure {
+            top: 35.2%;
+            left: 43.2%;
+            color: #e9fe01;
+        }
+
+        .alert-message {
+            position: absolute;
+            width: 6.5%;
+            text-align: center;
+            font-size: 120%;
+        }
+
+        #device-overheat {
+            top: 64.2%;
+            left: 4.3%;
+            color: #fb1a16;
+        }
+
+        #device-vibration {
+            top: 64.2%;
+            left: 12.1%;
+            color: #24ff1f;
+        }
+
+        #smoke-fire {
+            top: 64.2%;
+            left: 19.8%;
+            color: #f58e2f;
+        }
+
+        #windy-environment {
+            top: 64.2%;
+            left: 27.6%;
+            color: #4e9cff;
+        }
+
+        #water-leakage {
+            top: 64.2%;
+            left: 35.4%;
+            color: #00e4ff;
+        }
+
+        #security-vision {
+            top: 64.2%;
+            left: 43.1%;
+            color: #e9fe01;
+        }
+    </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-substation-1">
+    <div class="display-text-1" id="transformer">78</div>
+    <div class="display-text-1" id="sensor">78</div>
+
+    <div class="float-ball" id="access">3</div>
+    <div class="float-ball" id="running">0</div>
+    <div class="float-ball" id="standby">1</div>
+    <div class="float-ball" id="failure">0</div>
+    <div class="float-ball" id="repairing">0</div>
+    <div class="float-ball" id="communication-failure">8</div>
+
+    <div class="alert-message" id="device-overheat">3</div>
+    <div class="alert-message" id="device-vibration">3</div>
+    <div class="alert-message" id="smoke-fire">0</div>
+    <div class="alert-message" id="windy-environment">3</div>
+    <div class="alert-message" id="water-leakage">3</div>
+    <div class="alert-message" id="security-vision">3</div>
+
+    <div id="alert-list"></div>
+
+    <div id="monitor-tabs"></div>
+
+    <iframe id="monitor-display-frame"></iframe>
+
+    <script>
+
+    </script>
+</body>
+</html>