428 lines
26 KiB
HTML
428 lines
26 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="Premium Multipurpose Admin & Dashboard Template" name="description" />
|
||
<meta content="Themesdesign" name="author" />
|
||
<!-- App favicon -->
|
||
<link rel="shortcut icon" href="assets/images/tub1.png">
|
||
|
||
<!-- 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-dark.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-dark.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-topbar="dark" data-layout="horizontal">
|
||
|
||
<!-- Begin page -->
|
||
<div id="layout-wrapper">
|
||
|
||
<!-- 头部开始 -->
|
||
<?php include_once('header_admin.tpl.html'); ?>
|
||
<!-- 头部结束 -->
|
||
<!-- 头部导航栏 -->
|
||
<!-- ============================================================== -->
|
||
<!-- Start right Content here -->
|
||
<!-- ============================================================== -->
|
||
<div class="main-content" id="app">
|
||
|
||
<div class="page-content" style="margin-top: 10px;">
|
||
<div class="container-fluid" style="max-width: 100%;">
|
||
<div class="row">
|
||
<div class="col-xl-3">
|
||
<div class="card">
|
||
<div class="card-body" style="padding: 15px;">
|
||
<div class="media">
|
||
<div class="media-body overflow-hidden">
|
||
<h6 class="mb-2" style="font-size:16px;">消毒灭菌概况</h6>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="card-body" style="padding-top: 5px;">
|
||
<div class="media">
|
||
<div class="media-body overflow-hidden" style="text-align: center;height: 90px;background: #1E232F;">
|
||
<div style="margin-top: 10px;">
|
||
<a href="?c=device&a=returnDeviceRunPage"><h2 title="展示消毒灭菌传感器今日消毒次数" class="mb-2" style="font-weight: 600;">{{indexCount.todayCount}}</h2></a>
|
||
<a href="?c=device&a=returnDeviceRunPage"><h4 title="展示消毒灭菌传感器今日消毒次数" class="text-truncate font-size-14 mb-2">今日次数</h4></a>
|
||
</div>
|
||
</div>
|
||
<div class="media-body overflow-hidden" style="text-align: center;margin-left: 20px;height: 90px;background: #1E232F;">
|
||
<div style="margin-top: 10px;">
|
||
<a href="?c=device&a=returnDeviceRunPage"><h2 title="展示消毒灭菌传感器本周消毒次数" class="mb-2" style="font-weight: 600;">{{indexCount.weekCount}}</h2></a>
|
||
<a href="?c=device&a=returnDeviceRunPage"><h4 title="展示消毒灭菌传感器本周消毒次数" class="text-truncate font-size-14 mb-2">本周次数</h4></a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="card-body" style="padding-top: 5px;">
|
||
<div class="media">
|
||
<div class="media-body overflow-hidden" style="text-align: center;height: 90px;background: #1E232F;">
|
||
<div style="margin-top: 10px;">
|
||
<a href="?c=device&a=returnDeviceRunPage"><h2 title="展示消毒灭菌传感器本月消毒次数" class="mb-2" style="font-weight: 600;">{{indexCount.monthCount}}</h2></a>
|
||
<a href="?c=device&a=returnDeviceRunPage"><h4 title="展示消毒灭菌传感器本月消毒次数" class="text-truncate font-size-14 mb-2">本月次数</h4></a>
|
||
</div>
|
||
</div>
|
||
<div class="media-body overflow-hidden" style="text-align: center;margin-left: 20px;height: 90px;background: #1E232F;">
|
||
<div style="margin-top: 10px;">
|
||
<a href="?c=device&a=returnDeviceRunPage"><h2 title="展示消毒灭菌传感器本年消毒次数" class="mb-2" style="font-weight: 600;">{{indexCount.yearCount}}</h2></a>
|
||
<a href="?c=device&a=returnDeviceRunPage"><h4 title="展示消毒灭菌传感器本年消毒次数" class="text-truncate font-size-14 mb-2">本年次数</h4></a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="card-body" style="padding: 15px;">
|
||
<div class="media">
|
||
<div class="media-body overflow-hidden">
|
||
<h6 class="mb-2" style="font-size:16px;">消毒灭菌锅概况</h6>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="card-body" style="padding-top: 5px;">
|
||
<div class="media" v-for="item in indexRunStatus">
|
||
<div class="media-body overflow-hidden" style="height: 60px;border: 2px solid #1E232F;border-radius: 10px;">
|
||
<div style="float: left;">
|
||
<p style="font-size: 13px;margin-top: 10px;margin-left: 10px;margin-bottom: 0px;">{{item.description}}</p>
|
||
<p style="font-size: 13px;margin-top: 2px;margin-left: 10px;margin-bottom: 0px;color: white;">{{item.name}}</p>
|
||
</div>
|
||
<a href="?c=device&a=returnDeviceRunPage"><div style="float: right;border: 2px solid #5663D2;margin-top: 15px;margin-right: 10px;width: 60px;height: 30px;text-align: center;border-radius: 15px;line-height: 30px;font-size: 12px;font-weight: 700;color: #5663D2;">
|
||
{{item.status}}
|
||
</div></a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-xl-6">
|
||
<div class="card">
|
||
<div class="card-body">
|
||
<div class="media">
|
||
<div class="media-body overflow-hidden">
|
||
<h6 class="mb-2" style="font-size:16px;">消毒灭菌统计</h6>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="card-body">
|
||
<div>
|
||
<div id="line-column-chart" class="apex-charts"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="card">
|
||
<div class="card-body">
|
||
<div class="media">
|
||
<div class="media-body overflow-hidden">
|
||
<h6 class="mb-2" style="font-size:16px;">事件数据</h6>
|
||
</div>
|
||
</div>
|
||
<div class="card-body">
|
||
<div class="media">
|
||
<div style="height: 100px;width: 25%;text-align: center;background: rgb(30, 35, 47);border-radius: 10px;margin-left:-20px;">
|
||
<div style="margin-top: 10px;">
|
||
<h1 style="font-weight: 600;">{{indexEvent.noStandard}}</h1>
|
||
<h4 class="text-truncate font-size-14 mb-2">灭菌不达标</h4>
|
||
</div>
|
||
</div>
|
||
<div style="height: 100px;width: 25%;text-align: center;background: rgb(30, 35, 47);border-radius: 10px;margin-left:20px;">
|
||
<div style="margin-top: 10px;">
|
||
<h1 style="font-weight: 600;">{{indexEvent.LowFrequency}}</h1>
|
||
<h4 class="text-truncate font-size-14 mb-2">灭菌频率低</h4>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-xl-3">
|
||
<div class="card">
|
||
<div class="card-body" style="padding: 15px;">
|
||
<div class="media">
|
||
<div class="media-body overflow-hidden">
|
||
<h6 class="mb-2" style="font-size:16px;">预警概览</h6>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="card-body" style="padding-top: 5px;">
|
||
<div class="media">
|
||
<div class="media-body overflow-hidden" style="text-align: center;height: 90px;background: #1E232F;">
|
||
<div style="margin-top: 10px;">
|
||
<a href="?c=warn&a=returnWarnRecordPage"><h2 class="mb-2" style="font-weight: 600;">{{indexWarnCount.warnCount}}</h2></a>
|
||
<a href="?c=warn&a=returnWarnRecordPage"><h4 class="text-truncate font-size-14 mb-2">预警次数</h4></a>
|
||
</div>
|
||
</div>
|
||
<div class="media-body overflow-hidden" style="text-align: center;margin-left: 20px;height: 90px;background: #1E232F;">
|
||
<div style="margin-top: 10px;">
|
||
<a href="?c=warn&a=returnWarnRecordPage"><h2 class="mb-2" style="font-weight: 600;">{{indexWarnCount.warnDealCount}}</h2></a>
|
||
<a href="?c=warn&a=returnWarnRecordPage"><h4 class="text-truncate font-size-14 mb-2">处理次数</h4></a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="card-body" style="padding: 15px;">
|
||
<div class="media">
|
||
<div class="media-body overflow-hidden">
|
||
<h6 class="mb-2" style="font-size:16px;">预警分布</h6>
|
||
</div>
|
||
</div>
|
||
<div class="card-body">
|
||
|
||
<div id="donut-chart" class="apex-charts"></div>
|
||
|
||
<div class="row">
|
||
<div class="col-4">
|
||
<div class="text-center mt-4">
|
||
<h6 class="mb-2 text-truncate"><i class="mdi mdi-circle text-primary font-size-2"></i> 温度预警</h6>
|
||
<h5>{{indexWarnTypePieInfo.temperature}} %</h5>
|
||
</div>
|
||
</div>
|
||
<div class="col-4">
|
||
<div class="text-center mt-4">
|
||
<h6 class="mb-2 text-truncate"><i class="mdi mdi-circle text-success font-size-2"></i> 压力预警</h6>
|
||
<h5>{{indexWarnTypePieInfo.pressure}} %</h5>
|
||
</div>
|
||
</div>
|
||
<div class="col-4">
|
||
<div class="text-center mt-4">
|
||
<h6 class="mb-2 text-truncate"><i class="mdi mdi-circle text-warning font-size-2"></i> 时间预警</h6>
|
||
<h5>{{indexWarnTypePieInfo.time}} %</h5>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="card-body" style="padding: 15px;">
|
||
<div class="media">
|
||
<div class="media-body overflow-hidden">
|
||
<h6 class="mb-2" style="font-size:16px;">预警设备</h6>
|
||
</div>
|
||
</div>
|
||
<div class="card-body" style="padding-top: 5px;padding-left:0px;">
|
||
<div class="media" v-for="item in IndexWarnDeviceList">
|
||
<div class="media-body overflow-hidden" style="height: 60px;">
|
||
<div style="float: left;">
|
||
<p style="font-size: 13px;margin-top: 10px;margin-left: 10px;margin-bottom: 0px;color: white;">{{item.hospital}} {{item.name}}</p>
|
||
<p style="font-size: 13px;margin-top: 2px;margin-left: 10px;margin-bottom: 0px;">{{item.type}}（{{item.level}}） {{item.notification_time}}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<!-- 尾部开始 -->
|
||
<?php include_once('footer.tpl.html'); ?>
|
||
<!-- 尾部结束 -->
|
||
</div>
|
||
|
||
|
||
</div>
|
||
|
||
|
||
<!-- Right Sidebar -->
|
||
<!-- /Right-bar -->
|
||
|
||
<!-- 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>
|
||
<script src="assets/libs/chart.js/Chart.bundle.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_1.init.js"></script>
|
||
|
||
<script src="assets/js/app.js"></script>
|
||
|
||
<!--数据绑定-->
|
||
<script type="text/javascript">
|
||
var vm = new Vue({
|
||
el: '#app',
|
||
data: {
|
||
indexCount: [],
|
||
indexRunStatus: [],
|
||
indexWarnCount: [],
|
||
indexWarnTypePieInfo: [],
|
||
IndexWarnDeviceList: [],
|
||
indexEvent:[]
|
||
},
|
||
created: function () {
|
||
this.getIndexCount();
|
||
this.getIndexRunStatus();
|
||
this.getIndexWarnCount();
|
||
this.getIndexWarnTypePie();
|
||
this.getIndexWarnTypePieInfo();
|
||
this.getIndexWarnDeviceList();
|
||
this.getIndexEvent();
|
||
this.getIndexLine();
|
||
},
|
||
methods: {
|
||
// 消毒灭菌次数详情
|
||
getIndexCount: function () {
|
||
let _this = this;
|
||
$.ajax({
|
||
url: '?c=index&a=getIndexCount',
|
||
type: 'get',
|
||
dataType: 'json',
|
||
success: function(mes) {
|
||
_this.indexCount = mes.data
|
||
},
|
||
error: function (msg) {
|
||
console.info('ajax请求失败!')
|
||
}
|
||
})
|
||
},
|
||
// 查看当前设备运行状态
|
||
getIndexRunStatus: function () {
|
||
let _this = this;
|
||
$.ajax({
|
||
url: '?c=index&a=getIndexRunStatus',
|
||
type: 'get',
|
||
dataType: 'json',
|
||
success: function(mes) {
|
||
_this.indexRunStatus = mes.data
|
||
},
|
||
error: function (msg) {
|
||
console.info('ajax请求失败!')
|
||
}
|
||
})
|
||
},
|
||
// 查看消毒灭菌统计
|
||
getIndexLine: function () {
|
||
let _this = this;
|
||
$.ajax({
|
||
url: '?c=index&a=getIndexLine',
|
||
type: 'get',
|
||
dataType: 'json',
|
||
success: function(mes) {
|
||
var options={chart:{height:350,type:"bar",toolbar:{show:!1}},plotOptions:{bar:{horizontal:!1,columnWidth:"45%",endingShape:"rounded"}},dataLabels:{enabled:!1},stroke:{show:!0,width:2,colors:["transparent"]},series:[{name:"灭菌次数",data:mes.data.count},{name:"合格灭菌次数",data:mes.data.qualifiedCount}],colors:["#5664d2","#1cbb8c","#fcb92c"],xaxis:{categories:mes.data.time},grid:{borderColor:"#f1f1f1",padding:{bottom:10}},fill:{opacity:1},tooltip:{y:{formatter:function(e){return e}}},legend:{offsetY:7}};(chart=new ApexCharts(document.querySelector("#line-column-chart"),options)).render();
|
||
},
|
||
error: function (msg) {
|
||
console.info('ajax请求失败!')
|
||
}
|
||
})
|
||
},
|
||
// 预警详情
|
||
getIndexWarnCount: function () {
|
||
let _this = this;
|
||
$.ajax({
|
||
url: '?c=index&a=getIndexWarnCount',
|
||
type: 'get',
|
||
dataType: 'json',
|
||
success: function(mes) {
|
||
_this.indexWarnCount = mes.data
|
||
},
|
||
error: function (msg) {
|
||
console.info('ajax请求失败!')
|
||
}
|
||
})
|
||
},
|
||
getIndexWarnTypePie: function () {
|
||
let _this = this;
|
||
$.ajax({
|
||
url: '?c=index&a=getIndexWarnTypePie',
|
||
type: 'get',
|
||
dataType: 'json',
|
||
success: function(mes) {
|
||
var options={series:mes.data,chart:{height:230,type:"donut"},labels:["温度预警","压力预警","时间预警"],plotOptions:{pie:{donut:{size:"75%"}}},dataLabels:{enabled:!1},legend:{show:!1},colors:["#5664d2","#1cbb8c","#eeb902"]};(chart=new ApexCharts(document.querySelector("#donut-chart"),options)).render();
|
||
},
|
||
error: function (msg) {
|
||
console.info('ajax请求失败!')
|
||
}
|
||
})
|
||
},
|
||
getIndexWarnTypePieInfo: function () {
|
||
let _this = this;
|
||
$.ajax({
|
||
url: '?c=index&a=getIndexWarnTypePieInfo',
|
||
type: 'get',
|
||
dataType: 'json',
|
||
success: function(mes) {
|
||
_this.indexWarnTypePieInfo = mes.data
|
||
},
|
||
error: function (msg) {
|
||
console.info('ajax请求失败!')
|
||
}
|
||
})
|
||
},
|
||
// 报警设备列表
|
||
getIndexWarnDeviceList: function () {
|
||
let _this = this;
|
||
$.ajax({
|
||
url: '?c=index&a=getIndexWarnDeviceList',
|
||
type: 'get',
|
||
dataType: 'json',
|
||
success: function(mes) {
|
||
_this.IndexWarnDeviceList = mes.data
|
||
},
|
||
error: function (msg) {
|
||
console.info('ajax请求失败!')
|
||
}
|
||
})
|
||
},
|
||
// 事件数据
|
||
getIndexEvent: function () {
|
||
let _this = this;
|
||
$.ajax({
|
||
url: '?c=index&a=getIndexEvent',
|
||
type: 'get',
|
||
dataType: 'json',
|
||
success: function(mes) {
|
||
_this.indexEvent = mes.data
|
||
},
|
||
error: function (msg) {
|
||
console.info('ajax请求失败!')
|
||
}
|
||
})
|
||
}
|
||
}
|
||
})
|
||
|
||
</script>
|
||
<!--数据绑定-->
|
||
</body>
|
||
</html>
|