<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>HomePage</title>
<link rel="stylesheet" href="./layui/css/layui.css">
<link rel="stylesheet" href="./demo.css">
</head>
<body>
<div class="wrapper">
<div class="top">
<div class="top-left">
<p>管理系统</p>
</div>
<div class="top-right">
<span class="daily">日常运维</span>
<ul class="nav">
<li>
<a href="#">门户</a>
</li>
<li>
<a href="#">日常运维</a>
</li>
<li>
<a href="#">支撑流程</a>
</li>
<li>
<a href="#">现场管理</a>
</li>
<li>
<a href="#">资源管理</a>
</li>
<li>
<a href="#">知识管理</a>
</li>
<li>
<a href="#">供应商及客户</a>
</li>
<li>
<a href="#">质检管理</a>
</li>
<a class="ellipsis" href="#">...</a>
</ul>
</div>
</div>
<div class="content">
<div class="content-left">
<div class="img-box">
<img src="./imgs/portrait.jpg" alt="">
</div>
<p class="name">张晓峰</p>
<ul class="information">
<li class="a">
<a href="#">账号管理</a>
</li>
<li class="a">
<a href="#">权限管理</a>
<i class="down"></i>
<ul class="authority">
<li>
<a href="#">角色</a>
</li>
<li>
<a href="#">区域</a>
</li>
<li>
<a href="#">设备类型</a>
</li>
<li>
<a href="#">通道类型</a>
</li>
<li>
<a href="#">局站类型管理权限</a>
</li>
</ul>
</li>
<li class="a">
<span></span>
<a href="#">日志管理</a>
</li>
<li class="a">
<span></span>
<a href="#">系统状态监控</a>
</li>
</ul>
</div>
<div class="main-part">
<div class="all-type">
<div class="all">
<div>
<img src="./imgs/全部_选中.png" alt="">
<p><strong>772</strong>电力</p>
</div>
<div>
<img src="./imgs/动环-选中.png" alt="">
<p><strong>772</strong>电力</p>
</div>
<div>
<img src="./imgs/电力_选中.png" alt="">
<p><strong>772</strong>电力</p>
</div>
<div>
<img src="./imgs/暖通_选中.png" alt="">
<p><strong>772</strong>电力</p>
</div>
<div>
<img src="./imgs/网络_选中.png" alt="">
<p><strong>772</strong>电力</p>
</div>
<div>
<img src="./imgs/门禁_选中.png" alt="">
<p><strong>772</strong>电力</p>
</div>
<div>
<img src="./imgs/全部_选中.png" alt="">
<p><strong>772</strong>电力</p>
</div>
</div>
<div class="alarm">
<div class="all-alarm">
<span>所有告警 :</span>
<span class="img-box">
<span>
<img src="./imgs/list_alarm_1.png" alt="">
<i>256</i>
</span>
<span>
<img src="./imgs/list_alarm_2.png" alt="">
<i>825</i>
</span>
<span>
<img src="./imgs/list_alarm_3.png" alt="">
<i>41</i>
</span>
<span>
<img src="./imgs/list_alarm_4.png" alt="">
<i>123</i>
</span>
</span>
</div>
<div class="shield">
<p>屏蔽与工程告警 ：
<i>639</i>
</p>
</div>
</div>
</div>
<!-- 选项卡 -->
<div class="layui-tab layui-tab-brief tab-wrap" lay-filter="docDemoTabBrief">
<ul class="layui-tab-title">
<li>设备列表</li>
<li>局站组态</li>
<li class="layui-this">近期动态</li>
</ul>
<div class="layui-tab-content">
<div class="layui-tab-item">
1
</div>
<div class="layui-tab-item">2</div>
<div class="layui-tab-item layui-show">
<div class="layui-tab">
<ul class="layui-tab-title title">
<li class="layui-this">告警</li>
<li>门禁事件</li>
<li>遥控/摇调记录</li>
</ul>
<div class="layui-tab-content">
<div class="layui-tab-item layui-show">
<table>
<thead class="head">
<tr>
<td>开始时间</td>
<td>设备名称</td>
<td>测点</td>
<td>告警</td>
<td>状态</td>
<td>操作</td>
</tr>
</thead>
<tbody>
</tbody>
<tr>
<td>
<span>2012-12-12 12:00:00</span>
<input type="text" />
</td>
<td>
<span>ATS</span>
<input type="text" />
</td>
<td>
<span>是</span>
<input type="text" />
</td>
<td>
<span>红外</span>
<input type="text" />
</td>
<td>
<span>已确认</span>
<input type="text" />
</td>
<td>
<button class="btn btn-red change">
<img src="./imgs/icon_list_edit_nor.png" alt="">
</button>
<button class="btn btn-red .del_change"><img src="./imgs/icon_list_del_nor.png"
alt=""></button>
</td>
</tr>
<tr>
<td>
<span>2012-12-12 12:00:00</span>
<input type="text" />
</td>
<td>
<span>ATS</span>
<input type="text" />
</td>
<td>
<span>是</span>
<input type="text" />
</td>
<td>
<span>红外</span>
<input type="text" />
</td>
<td>
<span>已确认</span>
<input type="text" />
</td>
<td>
<button class="btn btn-red change">
<img src="./imgs/icon_list_edit_nor.png" alt="">
</button>
<button class="btn btn-red .del_change"><img src="./imgs/icon_list_del_nor.png"
alt=""></button>
</td>
</tr>
<tr>
<td>
<span>2012-12-12 12:00:00</span>
<input type="text" />
</td>
<td>
<span>ATS</span>
<input type="text" />
</td>
<td>
<span>是</span>
<input type="text" />
</td>
<td>
<span>红外</span>
<input type="text" />
</td>
<td>
<span>已确认</span>
<input type="text" />
</td>
<td>
<button class="btn btn-red change">
<img src="./imgs/icon_list_edit_nor.png" alt="">
</button>
<button class="btn btn-red .del_change"><img src="./imgs/icon_list_del_sel.png"
alt=""></button>
</td>
</tr>
<tr>
<td>
<span>2012-12-12 12:00:00</span>
<input type="text" />
</td>
<td>
<span>ATS</span>
<input type="text" />
</td>
<td>
<span>是</span>
<input type="text" />
</td>
<td>
<span>红外</span>
<input type="text" />
</td>
<td>
<span>已确认</span>
<input type="text" />
</td>
<td>
<button class="btn btn-red change">
<img src="./imgs/icon_list_edit_nor.png" alt="">
</button>
<button class="btn btn-red .del_change"><img src="./imgs/icon_list_del_nor.png"
alt=""></button>
</td>
</tr>
<tr>
<td>
<span>2012-12-12 12:00:00</span>
<input type="text" />
</td>
<td>
<span>ATS</span>
<input type="text" />
</td>
<td>
<span>是</span>
<input type="text" />
</td>
<td>
<span>红外</span>
<input type="text" />
</td>
<td>
<span>已确认</span>
<input type="text" />
</td>
<td>
<button class="btn btn-red change">
<img src="./imgs/icon_list_edit_nor.png" alt="">
</button>
<button class="btn btn-red .del_change"><img src="./imgs/icon_list_del_nor.png"
alt=""></button>
</td>
</tr>
<tr>
<td>
<span>2012-12-12 12:00:00</span>
<input type="text" />
</td>
<td>
<span>ATS</span>
<input type="text" />
</td>
<td>
<span>是</span>
<input type="text" />
</td>
<td>
<span>红外</span>
<input type="text" />
</td>
<td>
<span>已确认</span>
<input type="text" />
</td>
<td>
<button class="btn btn-red change">
<img src="./imgs/icon_list_edit_nor.png" alt="">
</button>
<button class="btn btn-red .del_change"><img src="./imgs/icon_list_del_nor.png"
alt=""></button>
</td>
</tr>
</table>
</div>
<div class="layui-tab-item">门禁事件表格数据</div>
<div class="layui-tab-item">遥控/摇调记录表格数据</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="test1"></div>
<script src="./layui/layui.js"></script>
<script src="./jquery.js"></script>
<script src="./demo.js"></script>
</body>
</html>
html,
body {
height: 100%;
}
.wrapper {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.top {
width: 100%;
height: 50px;
overflow: hidden;
box-sizing: border-box;
}
.top-left {
float: left;
background: rgb(50, 135, 255);
width: 228px;
height: 50px;
}
.top-left p {
font-size: 24px;
color: #fff;
line-height: 50px;
text-align: center;
}
.top-right {
margin-left: 228px;
height: 50px;
border-bottom: 1px solid #bbb;
}
.daily {
margin-left: 70px;
display: inline-block;
line-height: 50px;
font-size: 16px;
font-weight: 600;
}
.nav {
position: absolute;
right: 30px;
top: 0;
display: inline-block;
height: 50px;
}
.nav li {
display: inline-block;
list-style: none;
line-height: 50px;
margin-right: 10px;
}
.nav li a {
display: inline-block;
list-style: none;
text-decoration: none;
}
.ellipsis {
display: inline-block;
line-height: 50px;
font-size: 20px;
font-weight: 600;
text-align: center;
}
.content {
width: 100%;
height: 100%;
}
.content .content-left {
float: left;
width: 228px;
height: 100%;
background: rgb(33, 77, 150);
}
.content .content-left .img-box {
width: 100%;
height: 80px;
margin: 30px 0 10px;
}
.content .content-left .img-box img {
width: 80px;
height: 80px;
margin-left: 74px;
border-radius: 50%;
}
.content-left .name {
width: 100%;
text-align: center;
color: rgb(141, 168, 212);
}
.content-left .information {
width: 100%;
margin-top: 30px;
}
.information .down {
position: absolute;
top: 18px;
right: 15px;
display: inline-block;
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 6px solid rgb(141, 168, 212);
}
.content-left .information li {
display: block;
position: relative;
box-sizing: border-box;
width: 100%;
list-style: none;
padding: 10px 25px;
}
.content-left .information .authority {
/* position: absolute;
top: 30px;
left: 10px; */
display: none;
overflow: hidden;
}
.content-left .information li a {
display: block;
text-decoration: none;
color: rgb(141, 168, 212);
}
.information li:hover .authority {
display: block;
}
.content-left .information .a:hover {
background: rgb(23, 56, 109);
border-left: 2px solid rgb(50, 135, 255);
width: 100%;
}
.content .main-part {
margin-left: 228px;
height: 100%;
background: rgb(234, 240, 240);
}
.main-part .all-type {
box-sizing: border-box;
width: 100%;
background: #fbfcfc;
border-top: 1px solid #e4e8eb;
}
.main-part .all-type .all {
padding-left: 70px;
border-bottom: 1px dotted #e4e4e4;
}
.main-part .all-type .all div {
width: 13.9%;
padding: 22px 0;
display: inline-block;
}
.main-part .all-type .all div p {
margin-top: 16px;
font-size: 12px;
color: #333;
}
.main-part .all-type .all div p strong {
margin-right: 2px;
font-size: 24px;
font-weight: 500;
}
.main-part .all-type .alarm {
position: relative;
width: 100%;
height: 48px;
}
.all-type .alarm .all-alarm {
margin-left: 42px;
line-height: 48px;
}
.all-type .alarm .all-alarm .img-box {
margin-left: 50px;
}
.alarm .all-alarm .img-box span {
margin-right: 50px;
}
.alarm .all-alarm .img-box span i {
font-style: normal;
font-size: 14px;
color: #333;
}
.all-type .alarm .shield {
position: absolute;
right: 42px;
top: 16px;
}
.all-type .alarm .shield p {
font-size: 14px;
color: #333;
}
.all-type .alarm .shield p i {
font-style: normal;
font-size: 14px;
color: #de0000;
}
/* 选项卡 */
.tab-wrap {
height: 140px;
}
.layui-tab-title {
margin-left: 10px;
border-bottom: 2px solid #dedede;
}
.layui-tab-title li {
width: 157px;
/* height: 78px; */
margin-right: 26px;
font-size: 16px;
color: #000;
}
.layui-tab-title {
color: #3285ff;
}
.layui-tab-content .layui-tab-item .ayui-tab-title .this {
border-bottom: none;
}
.layui-tab-content {
padding: 0 15px;
}
.layui-tab-item .layui-tab .title {
border-bottom: 0;
margin-left: 10px;
}
.layui-tab .title li {
width: 80px;
/* height: 78px; */
font-size: 14px;
color: #333;
}
.layui-tab .title .layui-this {
color: #3285ff;
}
/* 表格 */
table {
width: 100%;
margin-left: 15px;
border: 1px solid #ddd;
border-collapse: collapse;
text-align: center;
}
.head {
background: rgb(62,179,111);
color: #fff;
}
td {
height: 40px;
border: 1px solid #ddd;
}
input {
width: 100px;
border: 1px solid #ddd;
outline: none;
padding: 6px;
border-radius: 4px;
display: none;
}
.btn {
border: none;
outline: none;
cursor: pointer;
padding: 2px 5px;
background: none;
border-radius: 4px;
}
.que_change {
display: none;
background: #9e9e9e;
}
.del_change {
background: #FF6428;
}
.btn-add {
background: green;
width: 200px;
}
layui.use('element', function () {
var element = layui.element;
});
// $.ajax({
// type: "get",
// url: "./data.json",
// dataType:"json",
// success: function(res) {
// var str = ""
// for(var i = 0; i < res.length; i++) {
// str += '<tr><td><span>' + res[i].time + '</span><input type="text" /></td><td><span>' + res[i].equipment + '</span><input type="text" /></td><td><span>' + res[i].isTest + '<tr><td><span>' + res[i].alarm +'<tr><td><span>' + res[i].state +'</span><input type="text" /></td><td><button class="btn btn-red change">修改</button> <button class="btn que_change">确定</button> <button class="btn del_change">删除</button></td></tr>'
// }
// $("tbody").append(str)
// }
// })
// 修改
var arrInfo = []
$(document).on("click", ".change", function() {
arrInfo = []
$(this).hide()
$(this).siblings(".que_change").show()
$(this).parent().siblings().find("span").each(function() {
arrInfo.push($(this).text())
})
$(this).parent().siblings().find("input").each(function(i) {
$(this).val(arrInfo[i])
})
$(this).parent().siblings().find("span").hide()
$(this).parent().siblings().find("input").show()
})
// 确定
var arrList = []
$(document).on("click", ".que_change", function() {
arrList = []
$(this).hide()
$(this).siblings(".change").show()
$(this).parent().siblings().find("input").each(function() {
arrList.push($(this).val())
})
$(this).parent().siblings().find("span").each(function(i) {
$(this).text(arrList[i])
})
$(this).parent().siblings().find("span").show()
$(this).parent().siblings().find("input").hide()
})
// 增加
$(".btn-add").click(function() {
var str = '<tr><td><span style="display: none;"></span><input type="text" class="re_name" style="display: block;"/></td><td><span style="display: none";></span><input type="text" class="re_age" style="display:block"/></td><td><span style="display:none"></span><input type="text" class="re_score" style="display:block"/></td><td><button class="btn btn-red change" style="display:none">修改</button> <button class="btn que_change" style="display:inline-block">确定</button> <button class="btn del_change">删除</button></td></tr>'
$("tbody").append(str)
$(this).parents("tr").prev().find(".que_change").text("确定")
$(this).parents("tr").prev().find(".re_name").show().siblings().hide()
$(this).parents("tr").prev().find(".re_age").show().siblings().hide()
$(this).parents("tr").prev().find(".re_score").show().siblings().hide()
})
//删除
$(function() {
$(document).on("click", ".del_change", function() {
$(this).parents("tr").remove()
})
})
//分页
layui.use('laypage', function(){
var laypage = layui.laypage;
//执行一个laypage实例
laypage.render({
elem: 'test1' //注意，这里的 test1 是 ID，不用加 # 号
,count: 50 //数据总数，从服务端得到
});
});
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
