告警管理
This commit is contained in:
sliang
parent
174307c19d
commit
2c0de24ede
|
|
@ -0,0 +1,80 @@
|
||||||
|
html,
|
||||||
|
body {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
color: #fff;
|
||||||
|
font-family: 'Alibaba PuHuiTi R';
|
||||||
|
}
|
||||||
|
|
||||||
|
.layout {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-box {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
}
|
||||||
|
|
||||||
|
.left-box {
|
||||||
|
width: 20%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right-box {
|
||||||
|
width: 75%;
|
||||||
|
height: 100%;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.select {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
padding: 8% 2% 2% 2%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
background: url("../../img/alarmMge/select.png") no-repeat 0 0 / 100% 100%;
|
||||||
|
background-position: center center !important;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: flex-start;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.alarm{
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
padding: 5% 2% 2% 2%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
background: url("../../img/alarmMge/alarm.png") no-repeat 0 0 / 100% 100%;
|
||||||
|
background-position: center center !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark{
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
height: 4.5%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
background: url("../../img/alarmMge/dark.png") no-repeat 0 0 / 100% 100%;
|
||||||
|
background-position: center center !important;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: 4%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bright{
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
height: 4.5%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
background: url("../../img/alarmMge/bright.png") no-repeat 0 0 / 100% 100%;
|
||||||
|
background-position: center center !important;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: 4%;
|
||||||
|
}
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 48 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 41 KiB |
|
|
@ -0,0 +1,36 @@
|
||||||
|
let layer;
|
||||||
|
layui.use(['layer'], function () {
|
||||||
|
layer = layui.layer;
|
||||||
|
|
||||||
|
getSelect();
|
||||||
|
updateSelection();
|
||||||
|
});
|
||||||
|
|
||||||
|
function getSelect(){
|
||||||
|
$("#selection").empty();
|
||||||
|
var data = [
|
||||||
|
{ a: 1, b: 2,c:1 },
|
||||||
|
{ a: 2, b: 2,c:2 },
|
||||||
|
{ a: 2, b: 2,c:3 }
|
||||||
|
];
|
||||||
|
var html ="";
|
||||||
|
data = JSON.parse(JSON.stringify(data)); // 创建一个新的变量存储 JSON 化后的数据
|
||||||
|
for (var i = 0; i < data.length; i++) {
|
||||||
|
if(data[i].a == 1){
|
||||||
|
html += '<div class="item bright" id="'+data[i].c+'">'+data[i].b+'</div>' ;
|
||||||
|
}else{
|
||||||
|
html += '<div class="item dark" id="'+data[i].c+'">'+data[i].b+'</div>' ;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
console.log(html)
|
||||||
|
$("#selection").append(html);
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateSelection() {
|
||||||
|
$(".item").on("click", function() {
|
||||||
|
$(".item").removeClass("bright").addClass("dark"); // 点击时将所有元素设置为 dark 类
|
||||||
|
$(this).removeClass("dark").addClass("bright"); // 点击的元素设置为 bright 类
|
||||||
|
var clickedId = $(this).attr('id'); // 获取被点击的 div 元素的 id 值
|
||||||
|
console.log("选中的值为: " + clickedId);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
@ -1,11 +1,84 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>告警管理</title>
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
</head>
|
<link rel="stylesheet" href="../../css/font.css">
|
||||||
<body>
|
<link rel="stylesheet" href="../../plugin/layui-v2.9.7/layui/css/layui.css">
|
||||||
告警管理
|
<link rel="stylesheet" href="../../css/alarmMge/alarmMge.css">
|
||||||
</body>
|
<link rel="stylesheet" href="../../plugin/toolTip/mTips.css">
|
||||||
|
<script src="../../js/publics/jquery-3.6.0.min.js" type="text/javascript"></script>
|
||||||
|
<script src="../../js/publics/public.js"></script>
|
||||||
|
<script src="../../plugin/layui-v2.9.7/layui/layui.js"></script>
|
||||||
|
<script src="../../plugin/toolTip/mTips.js"></script>
|
||||||
|
<script src="../../js/publics/aes.js"></script>
|
||||||
|
<script src="../../js/publics/sm3.js"></script>
|
||||||
|
<title>告警管理</title>
|
||||||
|
<style>
|
||||||
|
.single-option {
|
||||||
|
width: 90%;
|
||||||
|
height: 5vh;
|
||||||
|
background: linear-gradient(90deg, red, green, blue);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="layout main-box">
|
||||||
|
<div class="left-box">
|
||||||
|
<div class="layout select" >
|
||||||
|
<div style="width: 100%;height: 100%;" id="selection"></div>
|
||||||
|
<!-- <div class="dark">qqq</div>
|
||||||
|
<div class="dark">qqq</div>
|
||||||
|
|
||||||
|
<div class="bright">qqq</div> -->
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="right-box">
|
||||||
|
<div class="alarm">
|
||||||
|
<form class="layui-form ">
|
||||||
|
<div class="layui-form-item">
|
||||||
|
<div class="layui-inline">
|
||||||
|
<label class="layui-form-label">建管单位：</label>
|
||||||
|
<div class="layui-input-inline">
|
||||||
|
<select>
|
||||||
|
<option value="">请选择</option>
|
||||||
|
<option value="AAA">选项 A</option>
|
||||||
|
<option value="BBB">选项 B</option>
|
||||||
|
<option value="CCC">选项 C</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="layui-inline">
|
||||||
|
<label class="layui-form-label">工程名称：</label>
|
||||||
|
<div class="layui-input-inline">
|
||||||
|
<input type="text" id="searchKey" placeholder="请输入工程名称" autocomplete="off"
|
||||||
|
class="layui-input">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="layui-inline">
|
||||||
|
<label class="layui-form-label">班组长：</label>
|
||||||
|
<div class="layui-input-inline">
|
||||||
|
<input type="text" id="searchKey" placeholder="请输入班组长" autocomplete="off"
|
||||||
|
class="layui-input">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="layui-inline">
|
||||||
|
<div class="layui-col-xs12">
|
||||||
|
<button class="layui-btn" lay-submit lay-filter="demo-table-search">查询</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
<script src="../../js/pages/alarmMge/alarmMge.js" type="text/javascript"></script>
|
||||||
</html>
|
</html>
|
||||||
|
|
@ -2354,7 +2354,7 @@ a cite {
|
||||||
.layui-tab-title,
|
.layui-tab-title,
|
||||||
.layui-tab-title .layui-this:after,
|
.layui-tab-title .layui-this:after,
|
||||||
.layui-textarea {
|
.layui-textarea {
|
||||||
border-color: #eee
|
border-color: #298B83
|
||||||
}
|
}
|
||||||
|
|
||||||
.layui-border {
|
.layui-border {
|
||||||
|
|
@ -2775,8 +2775,8 @@ hr.layui-border-red {
|
||||||
line-height: 38px\9;
|
line-height: 38px\9;
|
||||||
border-width: 1px;
|
border-width: 1px;
|
||||||
border-style: solid;
|
border-style: solid;
|
||||||
background-color: #fff;
|
background-color: transparent;
|
||||||
color: rgba(0, 0, 0, .85);
|
color: #ffffff;
|
||||||
border-radius: 2px
|
border-radius: 2px
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -3141,10 +3141,11 @@ hr.layui-border-red {
|
||||||
border: 1px solid #eee;
|
border: 1px solid #eee;
|
||||||
max-height: 300px;
|
max-height: 300px;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
background-color: #fff;
|
background-color: transparent;
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
box-shadow: 1px 1px 4px rgb(0 0 0 / 8%);
|
box-shadow: 1px 1px 4px rgb(0 0 0 / 8%);
|
||||||
box-sizing: border-box
|
box-sizing: border-box;
|
||||||
|
color: #ffffff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.layui-form-select dl dd,
|
.layui-form-select dl dd,
|
||||||
|
|
@ -3166,7 +3167,7 @@ hr.layui-border-red {
|
||||||
}
|
}
|
||||||
|
|
||||||
.layui-form-select dl dd:hover {
|
.layui-form-select dl dd:hover {
|
||||||
background-color: #f8f8f8;
|
background-color: #298B83;
|
||||||
-webkit-transition: .5s all;
|
-webkit-transition: .5s all;
|
||||||
transition: .5s all
|
transition: .5s all
|
||||||
}
|
}
|
||||||
|
|
@ -3181,7 +3182,7 @@ hr.layui-border-red {
|
||||||
}
|
}
|
||||||
|
|
||||||
.layui-form-select dl dd.layui-this {
|
.layui-form-select dl dd.layui-this {
|
||||||
background-color: #f8f8f8;
|
background-color: #298B83;
|
||||||
color: #16b777;
|
color: #16b777;
|
||||||
font-weight: 700
|
font-weight: 700
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue