告警管理
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>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>告警管理</title>
|
||||
</head>
|
||||
<body>
|
||||
告警管理
|
||||
</body>
|
||||
<head>
|
||||
<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">
|
||||
<link rel="stylesheet" href="../../css/font.css">
|
||||
<link rel="stylesheet" href="../../plugin/layui-v2.9.7/layui/css/layui.css">
|
||||
<link rel="stylesheet" href="../../css/alarmMge/alarmMge.css">
|
||||
<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>
|
||||
|
|
@ -2354,7 +2354,7 @@ a cite {
|
|||
.layui-tab-title,
|
||||
.layui-tab-title .layui-this:after,
|
||||
.layui-textarea {
|
||||
border-color: #eee
|
||||
border-color: #298B83
|
||||
}
|
||||
|
||||
.layui-border {
|
||||
|
|
@ -2775,8 +2775,8 @@ hr.layui-border-red {
|
|||
line-height: 38px\9;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
background-color: #fff;
|
||||
color: rgba(0, 0, 0, .85);
|
||||
background-color: transparent;
|
||||
color: #ffffff;
|
||||
border-radius: 2px
|
||||
}
|
||||
|
||||
|
|
@ -3141,10 +3141,11 @@ hr.layui-border-red {
|
|||
border: 1px solid #eee;
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
background-color: #fff;
|
||||
background-color: transparent;
|
||||
border-radius: 2px;
|
||||
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,
|
||||
|
|
@ -3166,7 +3167,7 @@ hr.layui-border-red {
|
|||
}
|
||||
|
||||
.layui-form-select dl dd:hover {
|
||||
background-color: #f8f8f8;
|
||||
background-color: #298B83;
|
||||
-webkit-transition: .5s all;
|
||||
transition: .5s all
|
||||
}
|
||||
|
|
@ -3181,7 +3182,7 @@ hr.layui-border-red {
|
|||
}
|
||||
|
||||
.layui-form-select dl dd.layui-this {
|
||||
background-color: #f8f8f8;
|
||||
background-color: #298B83;
|
||||
color: #16b777;
|
||||
font-weight: 700
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue