270 lines
15 KiB
HTML
270 lines
15 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/logo.png">
|
|
|
|
<!-- 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" />
|
|
<!-- ION Slider -->
|
|
<link href="assets/libs/ion-rangeslider/css/ion.rangeSlider.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" />
|
|
|
|
<!-- 引入vue.js -->
|
|
<script src="assets/js/pages/vue2.6.11.js"></script>
|
|
|
|
</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 -->
|
|
|
|
<div class="main-content" id="app">
|
|
|
|
<div class="page-content">
|
|
<div class="container-fluid">
|
|
|
|
<!-- start page title -->
|
|
<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>
|
|
<!-- end page title -->
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<div class="col-md-3">
|
|
<div class="form-group row">
|
|
<div class="input-daterange input-group" data-provide="datepicker" data-date-format="yyyy-mm-dd" data-date-autoclose="true">
|
|
<input type="text" placeholder="请选择查询开始时间" class="form-control" name="start" id="start_time" style="margin-right: 10px;"/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-3">
|
|
<button type="button" class="btn btn-primary w-sm waves-effect waves-light" @click="clickSelect()">查询</button>
|
|
<button type="button" class="btn btn-danger w-sm waves-effect waves-light" @click="clickReset()">重置</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h4 class="card-title mb-4" style="font-size: 18px;font-weight: 700;">原始数据列表</h4>
|
|
<div class="table-responsive mt-3">
|
|
<table class="table table-centered datatable dt-responsive nowrap " style="border-collapse: collapse; border-spacing: 0; width: 100%;" id="datatable">
|
|
<thead class="thead-light">
|
|
<tr style="text-align: center;font-size: 16px;">
|
|
<th>设备</th>
|
|
<th>时间</th>
|
|
<th>主污泵状态</th>
|
|
<th>雨水泵状态</th>
|
|
<th>自动按钮状态</th>
|
|
<th>备污泵状态</th>
|
|
<th>闸门上升状态</th>
|
|
<th>闸门下降状态</th>
|
|
<th>主污泵运行次数</th>
|
|
<th>备污泵运行次数</th>
|
|
<th>雨水泵运行次数</th>
|
|
<th>闸门上升次数</th>
|
|
<th>闸门下降次数</th>
|
|
<th>动作总次数</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr style="text-align: center;font-size: 16px;" v-for="item in devicStatusList">
|
|
<td>{{item.name}}</td>
|
|
<td>{{item.created_at}}</td>
|
|
<td v-if="item.main_sewage_pump=='开启'" style="color:green;font-weight: 700;">{{item.main_sewage_pump}}</td>
|
|
<td v-else style="color:red;font-weight: 700;">{{item.main_sewage_pump}}</td>
|
|
<td v-if="item.main_rain_pump=='开启'" style="color:green;font-weight: 700;">{{item.main_rain_pump}}</td>
|
|
<td v-else style="color:red;font-weight: 700;">{{item.main_rain_pump}}</td>
|
|
<td v-if="item.automatic_status=='开启'" style="color:green;font-weight: 700;">{{item.automatic_status}}</td>
|
|
<td v-else style="color:red;font-weight: 700;">{{item.automatic_status}}</td>
|
|
<td v-if="item.standby_sewage_pump=='开启'" style="color:green;font-weight: 700;">{{item.standby_sewage_pump}}</td>
|
|
<td v-else style="color:red;font-weight: 700;">{{item.standby_sewage_pump}}</td>
|
|
<td v-if="item.gate_up=='上升'" style="color:green;font-weight: 700;">{{item.gate_up}}</td>
|
|
<td v-else style="color:red;font-weight: 700;">{{item.gate_up}}</td>
|
|
<td v-if="item.gate_down=='下降'" style="color:green;font-weight: 700;">{{item.gate_down}}</td>
|
|
<td v-else style="color:red;font-weight: 700;">{{item.gate_down}}</td>
|
|
<td>{{item.main_sewage_pump_count}}</td>
|
|
<td>{{item.standby_sewage_pump_count}}</td>
|
|
<td>{{item.main_rain_pump_count}}</td>
|
|
<td>{{item.gate_up_count}}</td>
|
|
<td>{{item.gate_down_count}}</td>
|
|
<td>{{item.action_all_count}}</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<div id="loading" style="display:block; position:absolute; left:48%; top:100%;">
|
|
<img src="assets/images/loading1.gif" style="width:120px; height:100px;">
|
|
</div>
|
|
</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>
|
|
|
|
<!-- 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>
|
|
|
|
<script src="assets/libs/bs-custom-file-input/bs-custom-file-input.min.js"></script>
|
|
<script src="assets/js/pages/form-element.init.js"></script>
|
|
|
|
<script src="assets/libs/ion-rangeslider/js/ion.rangeSlider.min.js"></script>
|
|
|
|
<script src="assets/libs/bootstrap-datepicker/js/bootstrap-datepicker.min.js"></script>
|
|
|
|
<!-- init js -->
|
|
<script src="assets/js/pages/product-filter-range.init.js"></script>
|
|
|
|
|
|
<script src="assets/js/app.js"></script>
|
|
|
|
<script type="text/javascript">
|
|
var vm = new Vue({
|
|
el: "#app",
|
|
data: {
|
|
devicStatusList: '',
|
|
time: ''
|
|
},
|
|
methods: {
|
|
// 获取表头信息
|
|
getDevicStatusList: function (start_time) {
|
|
let _this = this;
|
|
$.ajax({
|
|
url: '?c=t&a=getDevicStatusList',
|
|
type: 'get',
|
|
dataType: 'json',
|
|
data:{'start_time':start_time},
|
|
success: function(mes) {
|
|
_this.devicStatusList = mes.data
|
|
console.info(mes.data[0])
|
|
$("#loading").css("display", "none");
|
|
|
|
_this.timer = setTimeout(_this.changeDatatable, 300);
|
|
},
|
|
error: function(msg) {
|
|
console.info('ajax请求失败');
|
|
}
|
|
})
|
|
},
|
|
changeDatatable: function () {
|
|
|
|
$(document).ready(function(){$("#datatable").DataTable({language:{paginate:{previous:"<i class='mdi mdi-chevron-left'>",next:"<i class='mdi mdi-chevron-right'>"}},drawCallback:function(){$(".dataTables_paginate > .pagination").addClass("pagination-rounded")},order:[[1,'desc']]})});
|
|
|
|
},
|
|
clickSelect: function () {
|
|
var start_time = $('#start_time').val();
|
|
let _this = this;
|
|
$.ajax({
|
|
url: '?c=t&a=getDevicStatusList',
|
|
type: 'get',
|
|
dataType: 'json',
|
|
data:{'start_time':start_time},
|
|
success: function(mes) {
|
|
_this.devicStatusList = mes.data
|
|
|
|
$("#loading").css("display", "none");
|
|
$('#datatable').DataTable().destroy();
|
|
|
|
_this.timer = setTimeout(_this.changeDatatable, 300);
|
|
},
|
|
error: function(msg) {
|
|
console.info('ajax请求失败');
|
|
}
|
|
})
|
|
},
|
|
clickReset: function () {
|
|
var start_time = '';
|
|
let _this = this;
|
|
$.ajax({
|
|
url: '?c=t&a=getDevicStatusList',
|
|
type: 'get',
|
|
dataType: 'json',
|
|
data:{'start_time':start_time},
|
|
success: function(mes) {
|
|
_this.devicStatusList = mes.data
|
|
|
|
$("#loading").css("display", "none");
|
|
$('#datatable').DataTable().destroy();
|
|
|
|
_this.timer = setTimeout(_this.changeDatatable, 300);
|
|
},
|
|
error: function(msg) {
|
|
console.info('ajax请求失败');
|
|
}
|
|
})
|
|
}
|
|
},
|
|
created: function () {
|
|
this.getDevicStatusList('');
|
|
}
|
|
})
|
|
</script>
|
|
</body>
|
|
</html>
|