457 lines
27 KiB
HTML
457 lines
27 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">
|
|
<script src="assets/js/pages/vue2.6.11.js"></script>
|
|
<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-8">
|
|
<!-- 三个框 -->
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<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"><?php echo $data['control_count'];?></h4>
|
|
</div>
|
|
<div class="text-primary">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card-body border-top py-3">
|
|
<div class="text-truncate">
|
|
<span class="text-muted ml-2">运行累计调控次数</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<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"><?php echo $data['warn_count'];?></h4>
|
|
</div>
|
|
<div class="text-primary">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-body border-top py-3">
|
|
<div class="text-truncate">
|
|
<span class="text-muted ml-2">运行累计报警</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 折线 -->
|
|
<!-- <div class="card" id="app">
|
|
<div class="card-body">
|
|
<div class="float-right d-none d-md-inline-block">
|
|
<div class="btn-group mb-2">
|
|
<div class="card-body" style="" v-if="time=='week'" >
|
|
<button type="button" id="week" @click="clickWeeky()" class="btn btn-sm btn-light">本周</button>
|
|
<button type="button" id="month" @click="clickMonth()" class="btn btn-sm btn-light">本月</button>
|
|
<button type="button" id="year" @click="clickYear()" class="btn btn-sm btn-light">本年</button>
|
|
</div>
|
|
<div class="card-body" style="" v-if="time=='month'" >
|
|
<button type="button" id="week" @click="clickWeeky()" class="btn btn-sm btn-light">本周</button>
|
|
<button type="button" id="month" @click="clickMonth()" class="btn btn-sm btn-light">本月</button>
|
|
<button type="button" id="year" @click="clickYear()" class="btn btn-sm btn-light">本年</button>
|
|
|
|
</div>
|
|
<div class="card-body" style="" v-if="time=='year'" >
|
|
<button type="button" id="week" @click="clickWeeky()" class="btn btn-sm btn-light">本周</button>
|
|
<button type="button" id="month" @click="clickMonth()" class="btn btn-sm btn-light">本月</button>
|
|
<button type="button" id="year" @click="clickYear()" class="btn btn-sm btn-light">本年</button>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<h4 class="card-title mb-4">调控次数与能耗统计</h4>
|
|
<div>
|
|
<div id="stationdetails" class="apex-charts" dir="ltr"></div>
|
|
</div>
|
|
</div>
|
|
</div> -->
|
|
<!-- 表 -->
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h4 class="card-title mb-4" style="margin-bottom:10px!important">上传数据明细</h4>
|
|
<div class="table-responsive">
|
|
<div class="mytab">
|
|
<table id="mytab" class="table table-hover"></table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-xl-4">
|
|
<!-- 右中 -->
|
|
<div class="card checkout-order-summary">
|
|
<div class="card-body">
|
|
<h4 class="card-title mb-4">设备情况</h4>
|
|
<div class="table-responsive">
|
|
<table class="table table-borderless mb-0">
|
|
<tbody>
|
|
<tr>
|
|
<td>
|
|
<h5 class="font-size-14 text-truncate">控制状态：</h5>
|
|
</td>
|
|
<td>
|
|
<?php if($data['strategy'] == '晴天模式'){ ?>
|
|
<div class="text-success">
|
|
<i class=" ri-sun-line">晴天模式</i>
|
|
</div>
|
|
<?php }else{ ?>
|
|
<div class="text-primary">
|
|
<i class="fas fa-cloud-rain">雨天模式</i>
|
|
</div>
|
|
<?php }?>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<h5 class="font-size-14 text-truncate">控制模式：</h5>
|
|
</td>
|
|
<td>
|
|
<?php if($data['controlmodel'] == '手动模式'){ ?>
|
|
<div class="badge badge-soft-info font-size-12">自动控制</div>
|
|
<?php }else{ ?>
|
|
<div class="badge badge-soft-success font-size-12">手动控制</div>
|
|
<?php }?>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<h5 class="font-size-14 text-truncate">闸门上升状态：</h5>
|
|
</td>
|
|
<td>
|
|
<?php if($data['gate_up'] == '闸门上升'){ ?>
|
|
<div class="badge badge-soft-success font-size-12">闸门上升</div>
|
|
<?php }else{ ?>
|
|
<div class="badge badge-soft-danger font-size-12">闸门上升停止</div>
|
|
<?php }?>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<h5 class="font-size-14 text-truncate">闸门下降状态：</h5>
|
|
</td>
|
|
<td>
|
|
<?php if($data['gate_down'] == '闸门下降'){ ?>
|
|
<div class="badge badge-soft-success font-size-12">闸门下降</div>
|
|
<?php }else{ ?>
|
|
<div class="badge badge-soft-danger font-size-12">闸门下降停止</div>
|
|
<?php }?>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<h5 class="font-size-14 text-truncate">主污泵状态：</h5>
|
|
</td>
|
|
<td>
|
|
<?php if($data['main_sewage_pump'] == '开启'){ ?>
|
|
<div class="badge badge-soft-success font-size-12">开启</div>
|
|
<?php }else{ ?>
|
|
<div class="badge badge-soft-danger font-size-12">关闭</div>
|
|
<?php }?>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<h5 class="font-size-14 text-truncate">备污泵状态：</h5>
|
|
</td>
|
|
<td>
|
|
<?php if($data['standby_sewage_pump'] == '开启'){ ?>
|
|
<div class="badge badge-soft-success font-size-12">开启</div>
|
|
<?php }else{ ?>
|
|
<div class="badge badge-soft-danger font-size-12">关闭</div>
|
|
<?php }?>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<h5 class="font-size-14 text-truncate">雨水泵状态：</h5>
|
|
</td>
|
|
<td>
|
|
<?php if($data['main_rain_pump'] == '开启'){ ?>
|
|
<div class="badge badge-soft-success font-size-12">开启</div>
|
|
<?php }else{ ?>
|
|
<div class="badge badge-soft-danger font-size-12">关闭</div>
|
|
<?php }?>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 右下 -->
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h4 class="card-title mb-4">基本信息</h4>
|
|
<div class="table-responsive">
|
|
<table class="table table-bordered mb-0">
|
|
<tbody>
|
|
<tr>
|
|
<td>
|
|
<h5 class="font-size-14 text-truncate">项目名称：</h5>
|
|
</td>
|
|
<td><?php echo $data['info']['project_name'];?></td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<h5 class="font-size-14 text-truncate">场站名称：</h5>
|
|
</td>
|
|
<td><?php echo $data['info']['terminal_name'];?></td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<h5 class="font-size-14 text-truncate">位置：</h5>
|
|
</td>
|
|
<td><?php echo $data['info']['register_address'];?></td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<h5 class="font-size-14 text-truncate">当前状态：</h5>
|
|
</td>
|
|
<td><?php echo $data['info']['status'];?></td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<h5 class="font-size-14 text-truncate">创建时间：</h5>
|
|
</td>
|
|
<td><?php echo $data['info']['created_at'];?></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- end row -->
|
|
|
|
</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("=");
|
|
var id = splitArray[splitArray.length - 1];
|
|
console.log(id);
|
|
$('#mytab').bootstrapTable({
|
|
method: 'get',
|
|
// url: "http://localhost/47.75.142.244/rs.opmonitor.com/view/layout/web/test.json", // 请求路径
|
|
url: "?c=device&a=deviceDetailsDataTable&id="+id, // 请求路径
|
|
striped: true, // 是否显示行间隔色
|
|
pageNumber: 1, // 初始化加载第一页
|
|
pagination: true, // 是否分页
|
|
sidePagination: 'client', // server:服务器端分页|client：前端分页
|
|
pageSize: 10, // 单页记录数
|
|
pageList: [5, 20, 30],
|
|
columns: [
|
|
{
|
|
title: '上传时间',
|
|
field: 'created_at',
|
|
}, {
|
|
title: '液位',
|
|
field: 'level_data',
|
|
}, {
|
|
title: 'PH',
|
|
field: 'ph_data',
|
|
}, {
|
|
title: '降雨量(mm/min)',
|
|
field: 'rainfall_data',
|
|
}, {
|
|
title: '雨雪值',
|
|
field: 'rainsnow',
|
|
}, {
|
|
title: '氨氮(ppm)',
|
|
field: 'ammonia_data',
|
|
}, {
|
|
title: '电导率(S/m)',
|
|
field: 'elec_conductivity_data',
|
|
}, {
|
|
title: '电阻率',
|
|
field: 'elec_resistivity_data',
|
|
}, {
|
|
title: '电导率TDS',
|
|
field: 'elec_conductivity_tds_data',
|
|
}
|
|
]
|
|
})
|
|
$("#mytab").bootstrapTable("hideLoading");
|
|
</script>
|
|
<script>
|
|
var vm = new Vue({
|
|
el: "#app",
|
|
data: {
|
|
time: 'month',
|
|
Line: {},
|
|
},
|
|
methods: {
|
|
getAreaDashboardProductionLine: function (id,time) {
|
|
let _this = this;
|
|
$.ajax({
|
|
url: '?c=station&a=getdatadetailsline',
|
|
type: 'get',
|
|
dataType: 'json',
|
|
data: {'time': time,'id':id},
|
|
success: function(mes) {
|
|
_this.Line = mes.data
|
|
$("#stationdetails").empty();
|
|
var options={
|
|
series:[
|
|
{name:"调控",type:"column",data:mes.data.event},
|
|
{name:"能耗",type:"line",data:mes.data.plc}],
|
|
chart:{height:290,type:"line",toolbar:{show:!1}},stroke:{width:[0,3],curve:"smooth"},plotOptions:{bar:{horizontal:!1,columnWidth:"20%"}},yaxis: {show:false},dataLabels:{enabled:!1},legend:{show:!1},colors:["#5664d2","#1cbb8c"],labels:mes.data.times},chart=new ApexCharts(document.querySelector("#stationdetails"),options);chart.render();
|
|
},
|
|
error: function (msg) {
|
|
console.info('ajax请求失败!')
|
|
}
|
|
})
|
|
},
|
|
// 点击按钮 本周
|
|
clickWeeky: function () {
|
|
this.time = 'week';
|
|
this.getAreaDashboardProductionLine(id,'week');
|
|
},
|
|
// 点击按钮 本月
|
|
clickMonth: function () {
|
|
this.time = 'month';
|
|
this.getAreaDashboardProductionLine(id,'month');
|
|
},
|
|
// 点击按钮 本年
|
|
clickYear: function () {
|
|
this.time = 'year';
|
|
this.getAreaDashboardProductionLine(id,'year');
|
|
},
|
|
},
|
|
created: function () {
|
|
var time = this.time;
|
|
this.getAreaDashboardProductionLine(id,time);
|
|
}
|
|
})
|
|
</script>
|
|
</body>
|
|
</html>
|