263 lines
8.5 KiB
HTML
263 lines
8.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>LayUI TreeTable Example</title>
|
|
<link rel="stylesheet" type="text/css" href="../../js/core/layui/css/ydlayui.css"/>
|
|
<style>
|
|
html,
|
|
body {
|
|
width: 97%;
|
|
height: 97%;
|
|
margin: 0;
|
|
padding: 0;
|
|
float: left;
|
|
}
|
|
|
|
html {
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
.layui-table-view .layui-table td, .layui-table-view .layui-table th {
|
|
padding: 5px 0;
|
|
border-top: none;
|
|
border-right: none;
|
|
}
|
|
|
|
.layui-table-header {
|
|
margin-bottom: 0.4%;
|
|
}
|
|
|
|
.layui-table-header tr {
|
|
background-image: url(../../img/index/child/titleLong.png);
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.layui-table-header tr th {
|
|
color: #ffffff;
|
|
}
|
|
|
|
.layui-table-main tr {
|
|
background-image: url(../../img/index/child/standardColumnLong.png);
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.layui-table-main tr td {
|
|
color: rgba(255, 255, 255, 0.8);
|
|
}
|
|
|
|
.layui-table-main tr:hover {
|
|
background-image: url(../../img/index/child/standardColumnHoverLong.png);
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.layui-table td, .layui-table th, .layui-table-fixed-r, .layui-table-header, .layui-table-page, .layui-table-tips-main, .layui-table-tool, .layui-table-view, .layui-table[lay-skin=line], .layui-table[lay-skin=row] {
|
|
border-width: 0px;
|
|
}
|
|
|
|
.layui-table tbody tr:hover, .layui-table thead tr, .layui-table-click, .layui-table-header, .layui-table-hover, .layui-table-mend, .layui-table-patch, .layui-table-tool, .layui-table[lay-even] tr:nth-child(even) {
|
|
background-color: rgba(0, 0, 0, 0);
|
|
}
|
|
|
|
.layui-table {
|
|
background-color: rgba(0, 0, 0, 0);
|
|
}
|
|
|
|
.layui-laypage-count {
|
|
color: #FFFFFF !important;
|
|
}
|
|
|
|
.layui-box a {
|
|
color: #FFFFFF !important;
|
|
}
|
|
|
|
.layui-form-label {
|
|
position: relative;
|
|
float: left;
|
|
display: block;
|
|
padding: 12px 6px;
|
|
width: 80px;
|
|
font-weight: 400;
|
|
line-height: 20px;
|
|
text-align: right;
|
|
}
|
|
|
|
.layui-table-tool-self {
|
|
display: none;
|
|
}
|
|
|
|
.layui-table-box {
|
|
margin-left: 1%;
|
|
}
|
|
|
|
.layui-table-tool-self {
|
|
display: none;
|
|
}
|
|
|
|
.layui-table-page .layui-laypage input {
|
|
width: 40px;
|
|
background: transparent;
|
|
color: white;
|
|
}
|
|
|
|
.layui-table-page .layui-laypage button {
|
|
background: transparent;
|
|
color: white;
|
|
}
|
|
|
|
.layui-box, .layui-box * {
|
|
box-sizing: content-box;
|
|
color: #00e0ff;
|
|
}
|
|
|
|
.layui-table-view select[lay-ignore] {
|
|
display: inline-block;
|
|
color: white;
|
|
background: transparent;
|
|
}
|
|
|
|
.layui-layer {
|
|
background-color: rgba(0, 0, 0, 0) !important;
|
|
background-image: url(../../img/bgSecondLevel.png);
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.layui-layer-title {
|
|
border-bottom: 0px solid #f0f0f0 !important;
|
|
}
|
|
.layui-table{width:100%;!important}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="layui-container" style="margin-top: 20px; margin-left:21%;">
|
|
<div class="layui-form-item">
|
|
<div class="layui-inline">
|
|
<button type="button" class="layui-btn layui-btn-primary" lay-event="backBt"
|
|
style="border-color: transparent;color: #00d1bb;" onclick="jump()">
|
|
<i class="layui-icon layui-icon-return"></i>返回
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="widget-body">
|
|
<table id="demo" lay-filter="test"></table>
|
|
</div>
|
|
|
|
</div>
|
|
<script type="text/javascript" src="../../js/core/jquery-3.6.0.js"></script>
|
|
<script src="../../js/core/public.js" type="text/javascript"></script>
|
|
<script src="../../js/home.js"></script>
|
|
<script src="../../js/core/layui/ydlayui.js"></script>
|
|
<script src="../../js/core/layer-v3.1.0/layer/layer.js"></script>
|
|
<script>
|
|
layui.use(['table', 'treeTable','element'], function () {
|
|
var table = layui.table;
|
|
var treeTable = layui.treeTable;
|
|
var element = layui.element;
|
|
// 模拟数据
|
|
/* var data1 = [
|
|
{id:1, name:'项目A22', lightCode:'变电', lightStatus:'张三', children:[
|
|
{id:11, name:'子项目A1', lightCode:'变电子项', lightStatus:'李四'},
|
|
{id:12, name:'子项目A2', lightCode:'变电子项', lightStatus:'王五'}
|
|
]},
|
|
{id:2, name:'项目B', lightCode:'线路', lightStatus:'赵六'},
|
|
{id:3, name:'项目C', lightCode:'配电', lightStatus:'孙七', children:[
|
|
{id:31, name:'子项目C1', lightCode:'配电子项', lightStatus:'周八'},
|
|
{id:32, name:'子项目C2', lightCode:'配电子项', lightStatus:'吴九'}
|
|
]}
|
|
]; */
|
|
$.ajax({
|
|
type: 'post',
|
|
url: dataUrl + "lamp/getLightList",
|
|
async: false,
|
|
success: function (rv) {
|
|
data1 = rv.data;
|
|
}
|
|
})
|
|
// 渲染表格
|
|
treeTable.render({
|
|
elem: '#demo',
|
|
data: data1,
|
|
tree: {
|
|
iconIndex: 1, // 折叠图标显示在第二列
|
|
isPidData: true // 使用父子结构
|
|
},
|
|
cols: [[
|
|
{type: 'numbers', title: '序号', width: 60},
|
|
{field: 'name', title: '设备名称', width: 150},
|
|
{field: 'lightproperty', title: '设备属性', width: 100},
|
|
{field: 'lightCode', title: '设备编号', width: 300},
|
|
{field: 'lightStatus', title: '状态', width: 100},
|
|
{
|
|
title: '操作',
|
|
width: 400,
|
|
autoColWidth: true ,
|
|
templet: function (d) {
|
|
var buttons = '';
|
|
if (d.teamstatus === '1') {
|
|
buttons += '<a class="layui-btn layui-btn-xs" lay-event="edit">路灯</a>';
|
|
} else if (d.teamstatus === '2') {
|
|
buttons += '<a class="layui-btn layui-btn-xs" lay-event="video">视频</a>';
|
|
} else if (d.teamstatus === '3') {
|
|
buttons += '<a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">音频</a>';
|
|
} else {
|
|
buttons += '';
|
|
}
|
|
return buttons;
|
|
}
|
|
}
|
|
|
|
]]
|
|
});
|
|
// 监听工具条
|
|
treeTable.on('tool(test)', function (obj) {
|
|
var data = obj.data;
|
|
if (obj.event === 'del') {
|
|
} else if (obj.event === 'edit') {
|
|
//获取当前行的id
|
|
var id = data.lightCode;
|
|
managementClick(id);
|
|
|
|
}else if(obj.event === 'video'){
|
|
var id = data.lightCode;
|
|
videoSecondaryPage(id);
|
|
}
|
|
});
|
|
});
|
|
|
|
function jump() {
|
|
window.parent.jump('', 18);
|
|
}
|
|
|
|
function managementClick(id) {
|
|
localStorage.setItem("id", id);
|
|
var index = layer.open({
|
|
title: ['设备', 'color: #fff; cursor: move;background: transparent;float: left;'],
|
|
type: 2,
|
|
closeBtn: 2,
|
|
content: '../../page/light/streetLightSecondaryPage.html',
|
|
area: ["50%", "70%"],
|
|
maxmin: false
|
|
});
|
|
}
|
|
function videoSecondaryPage(id) {
|
|
localStorage.setItem("id", id);
|
|
var index = layer.open({
|
|
title: ['设备', 'color: #fff; cursor: move;background: transparent;float: left;'],
|
|
type: 2,
|
|
closeBtn: 2,
|
|
content: '../../page/light/videoLightSecondaryPage.html',
|
|
area: ["50%", "70%"],
|
|
maxmin: false
|
|
});
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|