|
|
|
|
@ -9,22 +9,68 @@
|
|
|
|
|
|
|
|
|
|
<style>
|
|
|
|
|
body.gray-bg {
|
|
|
|
|
background: #000;
|
|
|
|
|
background: linear-gradient(90deg, #365280 0%, #1B4CAF 50%, #202845 100%);
|
|
|
|
|
color: #fff;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.ui-layout-center,
|
|
|
|
|
.container-div,
|
|
|
|
|
.search-collapse {
|
|
|
|
|
background: linear-gradient(90deg, #365280 0%, #1B4CAF 50%, #202845 100%);
|
|
|
|
|
color: #fff;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.ui-layout-west,
|
|
|
|
|
.ui-layout-center,
|
|
|
|
|
.container-div,
|
|
|
|
|
.search-collapse,
|
|
|
|
|
.box,
|
|
|
|
|
.box-main,
|
|
|
|
|
.box-header,
|
|
|
|
|
.ui-layout-content {
|
|
|
|
|
.ui-layout-west .box,
|
|
|
|
|
.ui-layout-west .box-main,
|
|
|
|
|
.ui-layout-west .box-header,
|
|
|
|
|
.ui-layout-west .ui-layout-content {
|
|
|
|
|
background: #012447;
|
|
|
|
|
color: #fff;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.monitor-header {
|
|
|
|
|
position: relative;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
width: 100%;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
height: 3.2vw;
|
|
|
|
|
min-height: 44px;
|
|
|
|
|
margin: 0 0 0.8vw;
|
|
|
|
|
padding: 0 1.4vw;
|
|
|
|
|
border: 1px solid rgba(255, 255, 255, 0.18);
|
|
|
|
|
background: rgba(1, 36, 71, 0.42);
|
|
|
|
|
color: #fff;
|
|
|
|
|
box-shadow: 0 0.3vw 1vw rgba(0, 0, 0, 0.12);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.monitor-header::after {
|
|
|
|
|
content: "";
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 1.2vw;
|
|
|
|
|
right: 1.2vw;
|
|
|
|
|
bottom: -1px;
|
|
|
|
|
height: 2px;
|
|
|
|
|
background: linear-gradient(90deg, rgba(255, 255, 255, 0), #fff, rgba(255, 255, 255, 0));
|
|
|
|
|
box-shadow: 0 0 0.8vw rgba(255, 255, 255, 0.75);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.monitor-header-title {
|
|
|
|
|
font-size: 1.35vw;
|
|
|
|
|
font-weight: 700;
|
|
|
|
|
line-height: 1;
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.monitor-header-time {
|
|
|
|
|
font-size: 1vw;
|
|
|
|
|
line-height: 1;
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
color: rgba(255, 255, 255, 0.92);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.box {
|
|
|
|
|
border-color: #333;
|
|
|
|
|
}
|
|
|
|
|
@ -60,8 +106,10 @@
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.border {
|
|
|
|
|
min-height: 10.5vw;
|
|
|
|
|
min-height: 11.5vw;
|
|
|
|
|
border: 0;
|
|
|
|
|
box-shadow: none;
|
|
|
|
|
filter: none;
|
|
|
|
|
background-color: transparent;
|
|
|
|
|
background-position: center;
|
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
|
@ -100,6 +148,7 @@
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
gap: 0.65vw;
|
|
|
|
|
min-height: 6.6vw;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.chartDiv .card-image {
|
|
|
|
|
@ -119,6 +168,8 @@
|
|
|
|
|
.chartDiv .card-info {
|
|
|
|
|
flex: 1;
|
|
|
|
|
min-width: 0;
|
|
|
|
|
min-height: 7vw;
|
|
|
|
|
position: relative;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.chartDiv .mileage {
|
|
|
|
|
@ -145,6 +196,59 @@
|
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.chartDiv .temperature-min,
|
|
|
|
|
.chartDiv .temperature-max {
|
|
|
|
|
position: absolute;
|
|
|
|
|
right: 0;
|
|
|
|
|
font-size: 0.75vw;
|
|
|
|
|
line-height: 1.1vw;
|
|
|
|
|
color: #d9d9d9;
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.chartDiv .temperature-min {
|
|
|
|
|
top: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.chartDiv .temperature-max {
|
|
|
|
|
bottom: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.chartDiv .temperature-average {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 30%;
|
|
|
|
|
left: 0%;
|
|
|
|
|
color: #fff;
|
|
|
|
|
font-size: 1.8vw;
|
|
|
|
|
line-height: 2vw;
|
|
|
|
|
font-weight: 700;
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.chartDiv .temperature-average .unit {
|
|
|
|
|
font-size: 0.85vw;
|
|
|
|
|
margin-left: 0.1vw;
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.chartDiv .temperature-progress {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: calc(56% + 1.25vw);
|
|
|
|
|
left: 0%;
|
|
|
|
|
width: 90%;
|
|
|
|
|
height: 0.42vw;
|
|
|
|
|
border-radius: 999px;
|
|
|
|
|
background: rgba(255, 255, 255, 0.18);
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.chartDiv .temperature-progress-bar {
|
|
|
|
|
height: 100%;
|
|
|
|
|
width: 0;
|
|
|
|
|
border-radius: inherit;
|
|
|
|
|
background: linear-gradient(90deg, #f6c343, #ffd86b);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.chartDiv .mileage .num {
|
|
|
|
|
font-size: 1vw;
|
|
|
|
|
margin: 0 0.1vw;
|
|
|
|
|
@ -180,6 +284,11 @@
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="ui-layout-center">
|
|
|
|
|
<div class="monitor-header">
|
|
|
|
|
<div class="monitor-header-title">实时监控平台</div>
|
|
|
|
|
<div class="monitor-header-time" id="currentTime"></div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="container-div">
|
|
|
|
|
<div class="row">
|
|
|
|
|
<div class="col-sm-12 search-collapse">
|
|
|
|
|
@ -206,6 +315,8 @@
|
|
|
|
|
panehHidden = true;
|
|
|
|
|
}
|
|
|
|
|
$('body').layout({initClosed: panehHidden, west__size: 245});
|
|
|
|
|
updateHeaderTime();
|
|
|
|
|
setInterval(updateHeaderTime, 1000);
|
|
|
|
|
queryDeptTree();
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
@ -215,21 +326,56 @@
|
|
|
|
|
return (value === null || value === undefined || value === "") ? "-" : value;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function padTime(value) {
|
|
|
|
|
return value < 10 ? "0" + value : value;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function updateHeaderTime() {
|
|
|
|
|
var now = new Date();
|
|
|
|
|
var text = now.getFullYear() + "-"
|
|
|
|
|
+ padTime(now.getMonth() + 1) + "-"
|
|
|
|
|
+ padTime(now.getDate()) + " "
|
|
|
|
|
+ padTime(now.getHours()) + ":"
|
|
|
|
|
+ padTime(now.getMinutes()) + ":"
|
|
|
|
|
+ padTime(now.getSeconds());
|
|
|
|
|
$("#currentTime").text(text);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function parseTemperature(value) {
|
|
|
|
|
var num = parseFloat(value);
|
|
|
|
|
return isNaN(num) ? null : num;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function getTemperatureProgress(min, max, avg) {
|
|
|
|
|
if (min === null || max === null || avg === null) {
|
|
|
|
|
return 0;
|
|
|
|
|
}
|
|
|
|
|
if (max === min) {
|
|
|
|
|
return 50;
|
|
|
|
|
}
|
|
|
|
|
var progress = (avg - min) / (max - min) * 100;
|
|
|
|
|
return Math.max(0, Math.min(100, progress));
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function renderMonitorCards(data) {
|
|
|
|
|
$("#chartDivs").html("");
|
|
|
|
|
data.forEach(function (v) {
|
|
|
|
|
var cardImg = ctx + "img/card.png";
|
|
|
|
|
var cabinetImg = ctx + "img/dg.png";
|
|
|
|
|
var minTemperature = parseTemperature(v.humidity);
|
|
|
|
|
var maxTemperature = parseTemperature(v.illuminance);
|
|
|
|
|
var avgTemperature = parseTemperature(v.tempreture);
|
|
|
|
|
var progress = getTemperatureProgress(minTemperature, maxTemperature, avgTemperature);
|
|
|
|
|
var html = ""
|
|
|
|
|
+ "<div class=\"chartDiv border\" style=\"background-image: url('" + cardImg + "');\">"
|
|
|
|
|
+ "<div class=\"title\">" + (v.monitorName || v.monitorId || "-") + "</div>"
|
|
|
|
|
+ "<div class=\"card-body\">"
|
|
|
|
|
+ "<div class=\"card-image\"><img src=\"" + cabinetImg + "\" alt=\"配电柜\"></div>"
|
|
|
|
|
+ "<div class=\"card-info\">"
|
|
|
|
|
+ "<div class=\"time\">" + formatValue(v.collectTime) + "</div>"
|
|
|
|
|
+ "<div class=\"text1\">最低温度：" + formatValue(v.humidity) + "℃</div>"
|
|
|
|
|
+ "<div class=\"text1\">最高温度：" + formatValue(v.illuminance) + "℃</div>"
|
|
|
|
|
+ "<div class=\"text1\">平均温度：" + formatValue(v.tempreture) + "℃</div>"
|
|
|
|
|
+ "<div class=\"temperature-min\">最低温度：" + formatValue(v.humidity) + "℃</div>"
|
|
|
|
|
+ "<div class=\"temperature-average\">" + formatValue(v.tempreture) + "<span class=\"unit\">℃</span></div>"
|
|
|
|
|
+ "<div class=\"temperature-progress\"><div class=\"temperature-progress-bar\" style=\"width: " + progress + "%;\"></div></div>"
|
|
|
|
|
+ "<div class=\"temperature-max\">最高温度：" + formatValue(v.illuminance) + "℃</div>"
|
|
|
|
|
+ "</div>"
|
|
|
|
|
+ "</div>"
|
|
|
|
|
+ "</div>";
|
|
|
|
|
|
suixy
15 hours ago
