添加模块
chardon55
3 years ago
parent
58cb5de7d6
commit
d41facf8fb
Binary file not shown.
|
After Width: | Height: | Size: 9.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 541 KiB After Width: | Height: | Size: 448 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 146 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 263 KiB |
@ -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>
|
||||
@ -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>
|
||||
Loading…
Reference in New Issue