@ -1,19 +1,40 @@
<!DOCTYPE html>
< html lang = "zh-cn" xmlns:th = "http://www.thymeleaf.org" >
< 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" >
< 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/main.css}" / >
< link rel = "stylesheet" th:href = "@{/css/autoscroll-table.css}" / >
< link th:href = "@{/css/animate.css}" rel = "stylesheet" / >
< link th:href = "@{/css/style.css}" rel = "stylesheet" / >
< link th:href = "@{/css/skins.css}" rel = "stylesheet" / >
< link th:href = "@{/ruoyi/css/ry-ui.css?v=4.3.1}" rel = "stylesheet" / >
< style type = "text/css" >
* {
padding: 0px;
margin: 0px;
font-family: "微软雅黑";
}
.tipfloat {
display: none;
z-index: 999;
border: 0px #8e9cde solid;
position: absolute;
bottom: 0px;
right: 17px;
width: 268px;
height: auto;
}
< / style >
< style >
#tab-group {
position: absolute;
@ -28,164 +49,288 @@
height: 87%;
}
div::-webkit-scrollbar {
/*滚动条整体样式*/
width: 5px;
/*高宽分别对应横竖滚动条的尺寸*/
height: 1px;
}
div::-webkit-scrollbar-thumb {
/*滚动条里面小方块*/
border-radius: 10px;
-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
background: #004EA1;
}
div::-webkit-scrollbar-track {
/*滚动条里面轨道*/
-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
border-radius: 10px;
background: white;
}
< / 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 >
< div class = "main-title" > 智慧物联监控平台< / div >
< div style = "position: absolute ;
< header >
< div class = "btn-group section-button-area" id = "section-buttons" >
< / div >
< div class = "main-title" > 智慧物联监控平台< / div >
< div style = "position: absolute ;
border: 0px solid red;
width: 28%;
height: 5%;
top: 3%;
right: 2.7%;">
< div style = "position: absolute;width: 10%;height:100%;right:15%;border: 0px solid yellow;" >
< img onclick = "userInfoOnclick()" th:src = "(${#strings.isEmpty(user.avatar)}) ? @{/img/userInfo.png} : @{${user.avatar}}" th:onerror = "this.src='img/userInfo.png'" alt = "User Image" title = "用户信息" style = "height:80%;width:80%;cursor: pointer;" >
< / div >
< div style = "position: absolute;width: 10%;height:100%;right:5%;border: 0px solid yellow;" >
< a th:href = "@{logout}" style = "padding-left:5px;" title = "注销" > < i class = "fa fa-sign-out text-danger" > < / i > < / a >
< / div >
< div style = "position: absolute;width: 10%;height:100%;right:15%;border: 0px solid yellow;" >
< img onclick = "userInfoOnclick()"
th:src="(${#strings.isEmpty(user.avatar)}) ? @{/img/userInfo.png} : @{${user.avatar}}"
th:onerror="this.src='img/userInfo.png'" alt="User Image" title="用户信息"
style="height:80%;width:80%;cursor: pointer;">
< / div >
< div style = "position: absolute;width: 10%;height:100%;right:5%;border: 0px solid yellow;" >
< a th:href = "@{logout}" style = "padding-left:5px;" title = "注销" > < i class = "fa fa-sign-out text-danger" > < / i > < / a >
< / div >
< / 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 >
< div >
<!-- 弹出信息 右下角 -->
< div class = "tipfloat" data-num = "3" style = "background-color: #083E70;color:white" >
< div class = "modal-header" style = "border-color: #1FACF4" >
< h2 class = "modal-title" > 告警提示< / h2 >
< input type = "hidden" id = "alarmuid" name = "alarmuid" >
< / div >
< div class = "modal-body" id = "alarmWindow" style = "height:170px;overflow-y:auto;border-color: red" > < / div >
< div class = "modal-footer" style = "border-color: #1FACF4" >
< button type = "button" onclick = "closeButton()" data-dismiss = "modal"
style="color: black;height: 40px;width: 100px;border-radius: 5px">关闭
< / button >
< button type = "button" onclick = "alarmDispose()"
style="height: 40px;width: 100px;background-color: #1AB394;border-radius: 5px">处理
< / 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 >
< / 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:src = "@{/js/queuing-menu.js}" > < / script >
< script th:inline = "javascript" >
<!-- 全局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:src = "@{/js/queuing-menu.js}" > < / script >
< script th:src = "@{/js/Iot-ui/MiniDialog-es5.min.js}" > < / script >
< script th:inline = "javascript" >
const pages = [[${menuInfo.url}]];
const pages = [[${menuInfo.url}]];
const menuStr = [[${menuInfo.menuStr}]];
const menuStr = [[${menuInfo.menuStr}]];
const mainFrame = document.getElementById("main-display-frame")
const mainFrame = document.getElementById("main-display-frame")
function switchPage(index, subIndex) {
mainFrame.setAttribute("src", subIndex === -1 ? pages[index] : pages[index][subIndex])
}
function searchPageByPath(pathName) {
for (let entry1 of Object.entries(pages) ) {
if (typeof entry1[1] === 'string' ) {
if (pathName === entry1[1] ) {
return [entry1[0], -1]
}
} else {
for (let entry2 of Object.entries(entry1[1])) {
if (pathName === entry2[0] ) {
return [entry1[0], entry2[0]]
}
function switchPage(index, subIndex) {
mainFrame.setAttribute("src", subIndex === -1 ? pages[index] : pages[index][subIndex])
}
function searchPageByPath(pathName ) {
for (let entry1 of Object.entries(pages) ) {
if (typeof entry1[1] === 'string' ) {
if (pathName === entry1[1]) {
return [entry1[0], -1]
}
} else {
for (let entry2 of Object.entries(entry1[1]) ) {
if (pathName === entry2[0]) {
return [entry1[0], entry2[0]]
}
}
}
return [-1, -1]
}
const queuingMenu = new QueuingMenu(
document.getElementById("section-buttons"),
document.getElementById("tab-group"),
menuStr,
{
onRenderMenuItem(parent, index, menuName, submenuNames) {
let html = ''
html += `< button class = "btn section-button ${submenuNames.length > 0 ? " dropdown-toggle " : " " } " id = "section-${index}" data-bs-toggle = "dropdown" aria-expanded = "false" $ { submenuNames . length = == 0 ? " onclick = \"queuingMenu.select(" + index + " , " + -1 + " ) \ " " : " " } > ${menuName}< / button > `
if (submenuNames.length > 0) {
html += `< ul class = "dropdown-menu" aria-labelledby = "section-${index}" > `
for (let entry of Object.entries(submenuNames)) {
html += `< li > < a class = "dropdown-item" href = "javascript:queuingMenu.select(${index}, ${entry[0]})" > ${entry[1]}< / a > < / li > `
}
html += `< / ul > `
}
return [-1, -1]
}
return html
},
onRenderQueueItem(parent, index, item) {
let info = `< button class = "btn tab-group-item ${item.active ? " active " : " " } " id = "queue-item-${index}" > ${item.name}< span class = "close-btn" > < i class = "fa-solid fa-times" > < / i > < / span > < / button > `;
return info;
},
onLinkQueue(parent, queue) {
for (let index in queue) {
const el = parent.children[index]
el.addEventListener("click", evt => {
queuingMenu.switch(index)
})
el.querySelector(".close-btn").addEventListener("click", evt => {
queuingMenu.close(index, true)
})
const queuingMenu = new QueuingMenu(
document.getElementById("section-buttons"),
document.getElementById("tab-group"),
menuStr,
{
onRenderMenuItem(parent, index, menuName, submenuNames) {
let html = ''
html += `< button class = "btn section-button ${submenuNames.length > 0 ? " dropdown-toggle " : " " } " id = "section-${index}" data-bs-toggle = "dropdown" aria-expanded = "false" $ { submenuNames . length = == 0 ? " onclick = \"queuingMenu.select(" + index + " , " + -1 + " ) \ " " : " " } > ${menuName}< / button > `
if (submenuNames.length > 0) {
html += `< ul class = "dropdown-menu" aria-labelledby = "section-${index}" > `
for (let entry of Object.entries(submenuNames)) {
html += `< li > < a class = "dropdown-item" href = "javascript:queuingMenu.select(${index}, ${entry[0]})" > ${entry[1]}< / a > < / li > `
}
},
onSwitch(queueParent, name, oldQueueIndex, queueIndex, menuIndex, menuSubIndex) {
switchPage(menuIndex, menuSubIndex)
},
html += `< / ul > `
}
return html
},
)
mainFrame.addEventListener("load", ev => {
const path = mainFrame.contentWindow.location.pathname
const entry = searchPageByPath(path)
queuingMenu.select(entry[0], entry[1], {
defaultPageName: "新标签页",
dirtySwitch: true,
})
onRenderQueueItem(parent, index, item) {
let info = `< button class = "btn tab-group-item ${item.active ? " active " : " " } " id = "queue-item-${index}" > ${item.name}< span class = "close-btn" > < i class = "fa-solid fa-times" > < / i > < / span > < / button > `;
return info;
},
onLinkQueue(parent, queue) {
for (let index in queue) {
const el = parent.children[index]
el.addEventListener("click", evt => {
queuingMenu.switch(index)
})
el.querySelector(".close-btn").addEventListener("click", evt => {
queuingMenu.close(index, true)
})
}
},
onSwitch(queueParent, name, oldQueueIndex, queueIndex, menuIndex, menuSubIndex) {
switchPage(menuIndex, menuSubIndex)
},
},
)
mainFrame.addEventListener("load", ev => {
const path = mainFrame.contentWindow.location.pathname
const entry = searchPageByPath(path)
queuingMenu.select(entry[0], entry[1], {
defaultPageName: "新标签页",
dirtySwitch: true,
})
})
$(() => {
queuingMenu.select(0, -1)
// queuingMenu.select(1, 1)
$(() => {
queuingMenu.select(0, -1)
// queuingMenu.select(1, 1)
})
function resize() {
fontAdjust()
}
window.onresize = resize
$(() => {
resize()
})
< / script >
< script type = "text/javascript" >
function userInfoOnclick() {
location.href = '/indexInfo/index';
}
const getAlarmWindow = function () {
$.ajax({
url: "/iot/wisdomScenario/getAlarmWindow",
type: "get",
dataType: 'JSON',
async: false,
success: (res) => {
if (res.length > 0) {
$("#alarmWindow").html("");
let html = `< h3 > 告警位置: ${res[0].sensorLocation}< / h3 >
< h3 > 告警时间: ${res[0].collectTime}< / h3 >
< h3 > 告警信息: ${"无线检测 相对检测值为:" + res[0].minValue + "-" + res[0].maxValue + ",其值为:" + res[0].alarmValue}< / h3 > `
$("#alarmWindow").append(html);
$("#alarmuid").val(res[0].alarmuid);
showToggle();
}
},
error: () => {
console.log("失败");
}
})
}
setInterval(`getAlarmWindow()`, 1000 * 20);
const showToggle = function () {
$(".tipfloat").animate({height: "show"}, 800);
setTimeout(`$(".tipfloat").animate({height: "hide"}, 800)`, 8000);
}
function resize() {
fontAdjust()
}
window.onresize = resize
$(() => {
resize()
function closeButton() {
$(".tipfloat").animate({height: "hide"}, 800);
}
function closeIcon() {
$(".tipfloat").animate({height: "hide"}, 800);
}
const alarmDispose = function () {
$.getJSON('/iot/wisdomScenario/getAlarmByUid?alarmuid=' + $("#alarmuid").val(), function (result) {
alarmDisposeInfo(result);
})
< / script >
< script type = "text/javascript" >
}
/*function myClick(hre) {
let num = new Object;
num.cp_keynum = "wisdmoScenario_Key";
num.cp_num_value = hre;
var str = JSON.stringify(num); // 将对象转换为字符串
localStorage.setItem(num.cp_keynum, str);
}
const alarmDisposeInfo = function (res) {
let html = `< div >
< p style = "margin-top: 13px;" >
< label > 告警编号:${res.alarmuid}< / label >
< / p >
< p style = "margin-top: 13px;" >
< label > 告警信息:${"无线检测相对检测值为:" + res.minValue + "-" + res.maxValue + ",实际值为:" + res.alarmValue}< / label >
< / p >
< p style = "margin-top: 13px;" >
< label > 告警原因< / label >
< input type = "text" name = "alarmReason" id = "alarmReason" style = "width: 70%;" >
< / p >
< p style = "margin-top: 13px;" >
< label > 处理方式< / label >
< input type = "text" name = "disposeMode" id = "disposeMode" style = "width: 70%;" >
< / p >
< / div > `
function buttonClick(href) {
let num = new Object;
num.cp_keynum = "wisdmoScenario_Key";
num.cp_num_value = href.innerText;
var str = JSON.stringify(num); // 将对象转换为字符串
localStorage.setItem(num.cp_keynum, str);
}*/
Dialog({
title: "告警处理",
width: 600,
content: html,
ok: {
callback: function () {
$.post("/iot/wisdomScenario/disposeAlarm",
{
alarmuid: res.alarmuid,
disposeMode: $("#disposeMode").val(),
alarmReason: $("#alarmReason").val()
},
function (data, status) {
// alert(+status.includes("succ") ? "告警处理成功" : "告警处理失败");
});
}
}
});
}
function userInfoOnclick() {
location.href = '/indexInfo/index';
}
< / script >
< / script >
< / body >
< style type = "text/css" >
.mini-dialog-footer {
text-align: right;
height: 34px;
padding: 1px 0;
border-top: #e6e6e6 solid 1px;
}
< / style >
< / html >
