499 lines
28 KiB
HTML
499 lines
28 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
|
|
<meta charset="utf-8" />
|
|
<title>设备管理 | 智能截流闸管理平台</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta content="智能截流闸管理平台" name="description" />
|
|
<meta content="Themesdesign" name="author" />
|
|
<!-- App favicon -->
|
|
<link rel="shortcut icon" href="assets/images/favicon.ico">
|
|
|
|
<!-- jquery.vectormap css -->
|
|
<link href="assets/libs/admin-resources/jquery.vectormap/jquery-jvectormap-1.2.2.css" rel="stylesheet" type="text/css" />
|
|
|
|
<!-- DataTables -->
|
|
<link href="assets/libs/datatables.net-bs4/css/dataTables.bootstrap4.min.css" rel="stylesheet" type="text/css" />
|
|
|
|
<!-- Responsive datatable examples -->
|
|
<link href="assets/libs/datatables.net-responsive-bs4/css/responsive.bootstrap4.min.css" rel="stylesheet" type="text/css" />
|
|
|
|
<!-- Bootstrap Css -->
|
|
<link href="assets/css/bootstrap.min.css" id="bootstrap-style" rel="stylesheet" type="text/css" />
|
|
<!-- Icons Css -->
|
|
<link href="assets/css/icons.min.css" rel="stylesheet" type="text/css" />
|
|
<!-- App Css-->
|
|
<link href="assets/css/app.min.css" id="app-style" rel="stylesheet" type="text/css" />
|
|
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap-table/1.15.4/bootstrap-table.min.css">
|
|
<style type="text/css">
|
|
.pagination {
|
|
position: absolute;
|
|
bottom: 0;
|
|
right: 0;
|
|
padding: 10px;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body data-sidebar="dark">
|
|
|
|
<!-- Begin page -->
|
|
<div id="layout-wrapper">
|
|
|
|
<!-- 头部开始 -->
|
|
<?php include_once('header.tpl.html'); ?>
|
|
<!-- 头部结束 -->
|
|
<!-- ========== Left Sidebar Start ========== -->
|
|
<?php include_once('leftsidebar.tpl.html'); ?>
|
|
<!-- Left Sidebar End -->
|
|
|
|
<!-- ============================================================== -->
|
|
<!-- Start right Content here -->
|
|
<!-- ============================================================== -->
|
|
<div class="main-content">
|
|
|
|
<div class="page-content">
|
|
<div class="container-fluid">
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="page-title-box d-flex align-items-center justify-content-between">
|
|
<h4 class="mb-0">设备管理</h4>
|
|
|
|
<div class="page-title-right">
|
|
<ol class="breadcrumb m-0">
|
|
<li class="breadcrumb-item"><a href="javascript: void(0);">设备管理</a></li>
|
|
<li class="breadcrumb-item active">设备管理</li>
|
|
</ol>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<!-- 左边 -->
|
|
<div class="col-xl-2">
|
|
<div class="card">
|
|
<div class="card-header bg-transparent border-bottom">
|
|
<h5 class="mb-0">项目</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<ul class="sub-menu mm-collapse mm-show">
|
|
<?php foreach($data['projects'] as $key=>$value){?>
|
|
<li><a class="categories-group-list collapsed" href="?c=home&a=device&id=<?php echo $value['id'];?>" <?php if(v('id')==$value['id']){?> aria-expanded="true" <?php }?>><i class="mdi mdi-desktop-classic font-size-16 align-middle mr-2"></i><?php echo $value['name'];?></a></li>
|
|
<?php } ?>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 右边 -->
|
|
<div class="col-xl-10">
|
|
<!-- 筛选条件 所在场站 类型 状态 -->
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<div class="button-items" style="padding-top:8px;border:1px solid #ebe1e1;">
|
|
<span type="" class="btn btn-link" style=" text-decoration: none;color:black;">场站：</span>
|
|
<!-- <button type="button" class="btn btn-primary_2" value=""></button> -->
|
|
<!-- <?php foreach($data['terminals'] as $k=>$v){?>
|
|
<button type="button" class="btn btn-primary_2" value="<?php echo $v['id'];?>"><?php echo $v['name'];?></button>
|
|
<?php } ?> -->
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-xl-12">
|
|
<div class="row">
|
|
<div class="col-md-3">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<div class="media">
|
|
<div class="media-body overflow-hidden">
|
|
<p class="text-truncate font-size-14 mb-2">设备总数量</p>
|
|
<h4 class="mb-0" id="total">0</h4>
|
|
</div>
|
|
<div class="text-primary">
|
|
<i class="ri-stack-line font-size-24"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card-body border-top py-3">
|
|
<div class="text-truncate">
|
|
<span class="text-muted ml-2">设备总数量</span>
|
|
<span class="badge badge-soft-success font-size-11"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<div class="media">
|
|
<div class="media-body overflow-hidden">
|
|
<p class="text-truncate font-size-14 mb-2">控制柜数量</p>
|
|
<h4 class="mb-0" id="total_1">0</h4>
|
|
</div>
|
|
<div class="text-primary">
|
|
<i class="ri-stack-line font-size-24"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-body border-top py-3">
|
|
<div class="text-truncate">
|
|
<span class="text-muted ml-2">控制柜总数量</span>
|
|
<span class="badge badge-soft-success font-size-11"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<div class="media">
|
|
<div class="media-body overflow-hidden">
|
|
<p class="text-truncate font-size-14 mb-2">曝气机数量</p>
|
|
<h4 class="mb-0" id="total_2">0</h4>
|
|
</div>
|
|
<div class="text-primary">
|
|
<i class="ri-stack-line font-size-24"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-body border-top py-3">
|
|
<div class="text-truncate">
|
|
<span class="text-muted ml-2">曝气机总数量</span>
|
|
<span class="badge badge-soft-success font-size-11"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<div class="media">
|
|
<div class="media-body overflow-hidden">
|
|
<p class="text-truncate font-size-14 mb-2">管网设备数量</p>
|
|
<h4 class="mb-0" id="total_3">0</h4>
|
|
</div>
|
|
<div class="text-primary">
|
|
<i class="ri-stack-line font-size-24"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-body border-top py-3">
|
|
<div class="text-truncate">
|
|
<span class="text-muted ml-2">管网设备总数量</span>
|
|
<span class="badge badge-soft-success font-size-11"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<div class="table-responsive">
|
|
<div class="mytab">
|
|
<table id="mytab" class="table table-hover"></table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<!-- end row -->
|
|
</div>
|
|
</div>
|
|
</div> <!-- container-fluid -->
|
|
</div>
|
|
<!-- End Page-content -->
|
|
|
|
<!-- 尾部开始 -->
|
|
<?php include_once('footer.tpl.html'); ?>
|
|
<!-- 尾部结束 -->
|
|
|
|
</div>
|
|
<!-- end main content-->
|
|
|
|
</div>
|
|
<!-- END layout-wrapper -->
|
|
|
|
|
|
<!-- Right bar overlay-->
|
|
<div class="rightbar-overlay"></div>
|
|
|
|
<!-- JAVASCRIPT -->
|
|
<script src="assets/libs/jquery/jquery.min.js"></script>
|
|
<script src="assets/libs/bootstrap/js/bootstrap.bundle.min.js"></script>
|
|
<script src="assets/libs/metismenu/metisMenu.min.js"></script>
|
|
<script src="assets/libs/simplebar/simplebar.min.js"></script>
|
|
<script src="assets/libs/node-waves/waves.min.js"></script>
|
|
|
|
<!-- apexcharts -->
|
|
<!-- <script src="assets/libs/apexcharts/apexcharts.min.js"></script> -->
|
|
|
|
<!-- jquery.vectormap map -->
|
|
<script src="assets/libs/admin-resources/jquery.vectormap/jquery-jvectormap-1.2.2.min.js"></script>
|
|
<script src="assets/libs/admin-resources/jquery.vectormap/maps/jquery-jvectormap-us-merc-en.js"></script>
|
|
|
|
<!-- Required datatable js -->
|
|
<script src="assets/libs/datatables.net/js/jquery.dataTables.min.js"></script>
|
|
<script src="assets/libs/datatables.net-bs4/js/dataTables.bootstrap4.min.js"></script>
|
|
|
|
<!-- Responsive examples -->
|
|
<script src="assets/libs/datatables.net-responsive/js/dataTables.responsive.min.js"></script>
|
|
<script src="assets/libs/datatables.net-responsive-bs4/js/responsive.bootstrap4.min.js"></script>
|
|
|
|
<!-- <script src="assets/js/pages/dashboard.init.js"></script> -->
|
|
|
|
<script src="assets/js/app.js"></script>
|
|
<script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
|
|
<script src="https://cdn.bootcss.com/bootstrap-table/1.15.4/bootstrap-table.min.js"></script>
|
|
<script src="https://cdn.bootcss.com/bootstrap-table/1.15.4/locale/bootstrap-table-zh-CN.min.js"></script>
|
|
<script>
|
|
//获取 id
|
|
var currentUrl = $(location).attr('href');
|
|
var splitArray = currentUrl.split("=");
|
|
|
|
if(splitArray.length >3){
|
|
var id = splitArray[splitArray.length - 1];
|
|
}else{
|
|
var id='';
|
|
}
|
|
terminal='';
|
|
//页面开始请求 bootstrap-table
|
|
$.ajax({
|
|
url: "?c=device&a=deviceDataTable&id="+id+"&terminal="+terminal,
|
|
type: "GET",
|
|
success: function(response) {
|
|
var columns = []; // 创建一个空数组来存储列信息
|
|
var data = response.rows; // 假设返回的数据在响应中的data属性中
|
|
// console.log(data)
|
|
// 动态生成列信息
|
|
columns.push({ field: 'id', title: '序号' });
|
|
columns.push({ field: 'project', title: '所属项目' });
|
|
columns.push({ field: 'terminal', title: '所属场站' });
|
|
columns.push({ field: 'name', title: '设备名称' });
|
|
columns.push({ field: 'sn', title: '设备SN' });
|
|
columns.push({ field: 'type', title: '设备类型',formatter: formatMode });
|
|
columns.push({ field: 'register_address', title: '地址' });
|
|
columns.push({ field: 'longitude', title: '经度' });
|
|
columns.push({ field: 'latitude', title: '纬度' });
|
|
columns.push({ field: 'status', title: '当前状态',formatter: formatMode1 });
|
|
columns.push({ field: 'update', title: '修改',formatter: linkFormatter1 });
|
|
columns.push({ field: 'details', title: '详情',formatter: linkFormatter });
|
|
|
|
//跳转详情界面
|
|
function linkFormatter(value, row)
|
|
{
|
|
return '<a href="?c=device&a=device_details&id=' + row.id + '" target="_blank">详情</a>';
|
|
}
|
|
|
|
//跳转修改界面
|
|
function linkFormatter1(value, row)
|
|
{
|
|
return '<a href="?c=device&a=device_edit&id=' + row.id + '" target="_blank">修改</a>';
|
|
}
|
|
|
|
// 设置表格并填充数据
|
|
$('#mytab').bootstrapTable('destroy').bootstrapTable({
|
|
striped: true, // 是否显示行间隔色
|
|
pageNumber: 1, // 初始化加载第一页
|
|
pagination: true, // 是否分页
|
|
sidePagination: 'client', // server:服务器端分页|client：前端分页
|
|
pageSize: 10, // 单页记录数
|
|
pageList: [5, 20, 30],
|
|
queryParams: function(params) { // 上传服务器的参数
|
|
var temp = {
|
|
// level_data: $("#level_data").val(),
|
|
// Rainsnow: $("#Rainsnow").val(),
|
|
// created_at: $("#created_at").val(),
|
|
// buildingId: $("#buildingId").val(),
|
|
limit: params.limit, // 每页显示数量
|
|
offset: params.offset, // SQL语句起始索引
|
|
};
|
|
return temp;
|
|
},
|
|
columns: columns,
|
|
data: data
|
|
});
|
|
// 设备类型
|
|
function formatMode(value, row, index) {
|
|
if (value == '1'){
|
|
return "控制柜";
|
|
}else if(value == '2'){
|
|
return "曝气机";
|
|
}else if(value == '3'){
|
|
return "管网监测";
|
|
}else{
|
|
return "摄像头";
|
|
}
|
|
}
|
|
//状态
|
|
function formatMode1(value, row, index) {
|
|
if (value == '1'){
|
|
return "开启";
|
|
}else{
|
|
return "关闭";
|
|
}
|
|
}
|
|
},
|
|
error: function(xhr, status, error) {
|
|
console.info('ajax请求失败!')
|
|
}
|
|
});
|
|
//设备总数量 控制柜数量 曝气机数量 管网设备数量
|
|
$.ajax({
|
|
url: '?c=device&a=total&id='+id,
|
|
type: 'get',
|
|
dataType: 'json',
|
|
success: function(mes) {
|
|
// console.log(mes);
|
|
$("#total").text(mes.data.total);//设备总数量
|
|
$("#total_1").text(mes.data.total_1);//设备总数量
|
|
$("#total_2").text(mes.data.total_2);//设备总数量
|
|
$("#total_3").text(mes.data.total_3);//设备总数量
|
|
},
|
|
error: function (msg) {
|
|
console.info('ajax请求失败!')
|
|
}
|
|
})
|
|
//场站
|
|
$.ajax({
|
|
url: '?c=device&a=terminal&id='+id,
|
|
type: 'get',
|
|
dataType: 'json',
|
|
success: function(mes) {
|
|
// console.log(mes);
|
|
var data = mes.data;
|
|
$.each(data, function(index, value) {
|
|
// 创建一个新的按钮元素，并将数组元素的值作为按钮的文本 <button type="button" class="btn btn-primary_2" value=""></button>
|
|
var button = $("<button class='btn btn-primary_2' style='margin-bottom:0px;'>").text(value['name']);
|
|
// console.log(value['id'])
|
|
// $(".btn-primary_2").attr("id",index);
|
|
// 将新按钮添加到页面中的某个容器元素中（例如id为"container"的元素）
|
|
$(".btn-link").append(button);
|
|
});
|
|
|
|
},
|
|
error: function (msg) {
|
|
console.info('ajax请求失败!')
|
|
}
|
|
})
|
|
$(document).ready(function() {
|
|
$(document).on('click', '.btn-primary_2', function() {
|
|
var buttonText = $(this).text();
|
|
// alert(buttonText)
|
|
// 在此处添加点击事件的处理逻辑
|
|
//设备总数量 控制柜数量 曝气机数量 管网设备数量
|
|
$.ajax({
|
|
url: '?c=device&a=total&terminal='+buttonText+'&id='+id,
|
|
type: 'get',
|
|
dataType: 'json',
|
|
success: function(mes) {
|
|
// console.log(mes);
|
|
$("#total").text(mes.data.total);//设备总数量
|
|
$("#total_1").text(mes.data.total_1);//设备总数量
|
|
$("#total_2").text(mes.data.total_2);//设备总数量
|
|
$("#total_3").text(mes.data.total_3);//设备总数量
|
|
},
|
|
error: function (msg) {
|
|
console.info('ajax请求失败!')
|
|
}
|
|
})
|
|
|
|
//页面开始请求 bootstrap-table
|
|
$.ajax({
|
|
url: "?c=device&a=deviceDataTable&id="+id+"&terminal="+buttonText,
|
|
type: "GET",
|
|
success: function(response) {
|
|
var columns = []; // 创建一个空数组来存储列信息
|
|
var data = response.rows; // 假设返回的数据在响应中的data属性中
|
|
// console.log(data)
|
|
// 动态生成列信息
|
|
columns.push({ field: 'project', title: '所属项目' });
|
|
columns.push({ field: 'terminal', title: '所属场站' });
|
|
columns.push({ field: 'name', title: '设备名称' });
|
|
columns.push({ field: 'sn', title: '设备SN' });
|
|
columns.push({ field: 'type', title: '设备类型',formatter: formatMode });
|
|
columns.push({ field: 'register_address', title: '地址' });
|
|
columns.push({ field: 'status', title: '当前状态',formatter: formatMode1 });
|
|
columns.push({ field: 'note', title: '备注' });
|
|
|
|
|
|
// 设置表格并填充数据
|
|
$('#mytab').bootstrapTable('destroy').bootstrapTable({
|
|
striped: true, // 是否显示行间隔色
|
|
pageNumber: 1, // 初始化加载第一页
|
|
pagination: true, // 是否分页
|
|
sidePagination: 'client', // server:服务器端分页|client：前端分页
|
|
pageSize: 5, // 单页记录数
|
|
pageList: [5, 20, 30],
|
|
queryParams: function(params) { // 上传服务器的参数
|
|
var temp = {
|
|
// level_data: $("#level_data").val(),
|
|
// Rainsnow: $("#Rainsnow").val(),
|
|
// created_at: $("#created_at").val(),
|
|
// buildingId: $("#buildingId").val(),
|
|
limit: params.limit, // 每页显示数量
|
|
offset: params.offset, // SQL语句起始索引
|
|
};
|
|
return temp;
|
|
},
|
|
columns: columns,
|
|
data: data
|
|
});
|
|
// 设备类型
|
|
function formatMode(value, row, index) {
|
|
if (value == '1'){
|
|
return "控制柜";
|
|
}else if(value == '2'){
|
|
return "曝气机";
|
|
}else if(value == '3'){
|
|
return "管网监测";
|
|
}else{
|
|
return "摄像头";
|
|
}
|
|
}
|
|
//状态
|
|
function formatMode1(value, row, index) {
|
|
if (value == '1'){
|
|
return "开启";
|
|
}else{
|
|
return "关闭";
|
|
}
|
|
}
|
|
},
|
|
error: function(xhr, status, error) {
|
|
console.info('ajax请求失败!')
|
|
}
|
|
});
|
|
|
|
});
|
|
});
|
|
|
|
// $(".btn-primary_2").on('click', function() {
|
|
// // 在此处添加点击事件的处理逻辑
|
|
// alert(1)
|
|
// });
|
|
//点击事件
|
|
// $(".btn-primary_2").click(function() {
|
|
// // 在此处添加点击事件的处理逻辑
|
|
// alert(1)
|
|
// });
|
|
</script>
|
|
<script type="text/javascript">
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|