560 lines
25 KiB
HTML
560 lines
25 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="opmaster" name="author" />
|
|
<!-- App favicon -->
|
|
<link rel="shortcut icon" href="assets/images/logo-light-C.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.min.css" id="bootstrap-style" rel="stylesheet" type="text/css" />
|
|
|
|
<!-- -->
|
|
<link rel="stylesheet" href="assets/masaike/style.css" />
|
|
<link rel="stylesheet" href="assets/masaike/heatMap.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'); ?>
|
|
<!-- 头部结束 -->
|
|
|
|
<!-- 导航栏开始 -->
|
|
<?php include_once('leftsidebar.tpl.html'); ?>
|
|
<!-- 导航栏结束 -->
|
|
|
|
<!-- ============================================================== -->
|
|
<!-- Start right Content here -->
|
|
<!-- ============================================================== -->
|
|
<div class="main-content" id="app">
|
|
|
|
<div class="page-content">
|
|
<div class="container-fluid">
|
|
|
|
<div class="row">
|
|
<div class="col-xl-12">
|
|
<div class="row">
|
|
<div class="col-xl-2">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<ul class="list-unstyled chat-list">
|
|
<li v-for="">
|
|
<a style="max-width: 100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-top:0px solid #ffffff;">
|
|
<h5 class="font-size-14 mb-0">延安项目</h5>
|
|
</a>
|
|
</li>
|
|
<li v-for="">
|
|
<a style="max-width: 100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-top:0px solid #ffffff;">
|
|
<h5 class="font-size-14 mb-0">西宁项目</h5>
|
|
</a>
|
|
</li>
|
|
<li v-for="">
|
|
<a style="max-width: 100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-top:0px solid #ffffff;">
|
|
<h5 class="font-size-14 mb-0">其他项目</h5>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-xl-10">
|
|
<div class="row">
|
|
<div class="col-xl-4">
|
|
<div class="card" style="height: 200px;">
|
|
<div class="card-body">
|
|
<h4 class="card-title mb-4" style="font-weight: 600;">事件占比</h4>
|
|
<div id="donut-chart" class="apex-charts"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-xl-8">
|
|
<div class="card" style="height: 200px;">
|
|
<div class="card-body">
|
|
<div class="float-right d-none d-md-inline-block">
|
|
</div>
|
|
<h4 class="card-title mb-4" style="font-weight: 600;">变化趋势</h4>
|
|
<div>
|
|
<div id="line-column-chart" class="apex-charts" dir="ltr"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row" style="">
|
|
<div class="col-md-12" style="">
|
|
<div class="heat-map-container" id="heat-map" style="display:block;background-color:#ffffff;">
|
|
<div id="mySvg"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row" style="margin-top:15px;">
|
|
<div class="col-md-12">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<div calss="row">
|
|
<ul class="col-lg-12" style="padding-right:0px;padding-left:0px;">
|
|
<a class="font-weight-bold" href="#" style="font-size:600;">事件明细</a>
|
|
</ul>
|
|
</div>
|
|
<div calss="row">
|
|
<div class="table-responsive">
|
|
<table class="table table-centered datatable dt-responsive nowrap" style="border-collapse: collapse; border-spacing: 0; width: 100%;" id="datatable">
|
|
<thead class="thead-light" style="text-align: center;">
|
|
<tr style="text-align: center;">
|
|
<th>序号</th>
|
|
<th>场站</th>
|
|
<th>设备</th>
|
|
<th>事件</th>
|
|
<th>时间</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr style="text-align: center;" v-for="">
|
|
<td>1</td>
|
|
<td>3号场站</td>
|
|
<td>闸门</td>
|
|
<td>闸门开启</td>
|
|
<td>22022-08-17 15:49:00</td>
|
|
</tr>
|
|
<tr style="text-align: center;" v-for="">
|
|
<td>1</td>
|
|
<td>3号场站</td>
|
|
<td>闸门</td>
|
|
<td>闸门开启</td>
|
|
<td>22022-08-17 15:49:00</td>
|
|
</tr>
|
|
<tr style="text-align: center;" v-for="">
|
|
<td>1</td>
|
|
<td>3号场站</td>
|
|
<td>闸门</td>
|
|
<td>闸门开启</td>
|
|
<td>22022-08-17 15:49:00</td>
|
|
</tr>
|
|
<tr style="text-align: center;" v-for="">
|
|
<td>1</td>
|
|
<td>3号场站</td>
|
|
<td>闸门</td>
|
|
<td>闸门开启</td>
|
|
<td>22022-08-17 15:49:00</td>
|
|
</tr>
|
|
<tr style="text-align: center;" v-for="">
|
|
<td>1</td>
|
|
<td>3号场站</td>
|
|
<td>闸门</td>
|
|
<td>闸门开启</td>
|
|
<td>22022-08-17 15:49:00</td>
|
|
</tr>
|
|
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</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/masaike/heatMap.js"></script>
|
|
|
|
<script src="assets/js/app.js"></script>
|
|
|
|
<script>
|
|
window.onload = function() {
|
|
var heatMap = new HeatMapDate()
|
|
var option = {
|
|
gap: 2,
|
|
type: 'custom',
|
|
xAxis: ['1', '2', '3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23'],
|
|
yAxis: ['周一','周二','周三','周四','周五','周六','周日'],
|
|
data: [
|
|
// 横 竖 值
|
|
[0, 0, 10],
|
|
[0, 1, 2],
|
|
[0, 2, 3],
|
|
[0, 3, 3],
|
|
[0, 4, 9],
|
|
[0, 5, 3],
|
|
[0, 6, 3],
|
|
|
|
[1, 0, 0],
|
|
[1, 1, 3],
|
|
[1, 2, 3],
|
|
[1, 3, 4],
|
|
[1, 4, 5],
|
|
[1, 5, 2],
|
|
[1, 6, 10],
|
|
|
|
[2, 0, 3],
|
|
[2, 1, 2],
|
|
[2, 2, 7],
|
|
[2, 3, 3],
|
|
[2, 4, 5],
|
|
[2, 5, 3],
|
|
[2, 6, 1],
|
|
|
|
[3, 0, 9],
|
|
[3, 1, 12],
|
|
[3, 2, 3],
|
|
[3, 3, 3],
|
|
[3, 4, 3],
|
|
[3, 5, 3],
|
|
[3, 6, 3],
|
|
|
|
[4, 0, 10],
|
|
[4, 1, 2],
|
|
[4, 2, 3],
|
|
[4, 3, 5],
|
|
[4, 4, 1],
|
|
[4, 5, 3],
|
|
[4, 6, 6],
|
|
|
|
[5, 0, 3],
|
|
[5, 1, 9],
|
|
[5, 2, 3],
|
|
[5, 3, 6],
|
|
[5, 4, 3],
|
|
[5, 5, 2],
|
|
[5, 6, 0],
|
|
|
|
[6, 0, 0],
|
|
[6, 1, 2],
|
|
[6, 2, 3],
|
|
[6, 3, 3],
|
|
[6, 4, 6],
|
|
[6, 5, 8],
|
|
[6, 6, 10],
|
|
|
|
[7, 0, 1],
|
|
[7, 1, 3],
|
|
[7, 2, 5],
|
|
[7, 3, 7],
|
|
[7, 4, 3],
|
|
[7, 5, 9],
|
|
[7, 6, 3],
|
|
|
|
[8, 0, 6],
|
|
[8, 1, 12],
|
|
[8, 2, 4],
|
|
[8, 3, 3],
|
|
[8, 4, 0],
|
|
[8, 5, 3],
|
|
[8, 6, 8],
|
|
|
|
[9, 0, 3],
|
|
[9, 1, 3],
|
|
[9, 2, 6],
|
|
[9, 3, 8],
|
|
[9, 4, 3],
|
|
[9, 5, 9],
|
|
[9, 6, 3],
|
|
|
|
[10, 0, 12],
|
|
[10, 1, 2],
|
|
[10, 2, 3],
|
|
[10, 3, 9],
|
|
[10, 4, 3],
|
|
[10, 5, 0],
|
|
[10, 6, 3],
|
|
|
|
[11, 0, 1],
|
|
[11, 1, 3],
|
|
[11, 2, 5],
|
|
[11, 3, 3],
|
|
[11, 4, 1],
|
|
[11, 5, 3],
|
|
[11, 6, 6],
|
|
|
|
[12, 0, 3],
|
|
[12, 1, 12],
|
|
[12, 2, 6],
|
|
[12, 3, 9],
|
|
[12, 4, 3],
|
|
[12, 5, 7],
|
|
[12, 6, 3],
|
|
|
|
[13, 0, 4],
|
|
[13, 1, 12],
|
|
[13, 2, 1],
|
|
[13, 3, 3],
|
|
[13, 4, 6],
|
|
[13, 5, 2],
|
|
[13, 6, 9],
|
|
|
|
[14, 0, 1],
|
|
[14, 1, 12],
|
|
[14, 2, 3],
|
|
[14, 3, 3],
|
|
[14, 4, 6],
|
|
[14, 5, 0],
|
|
[14, 6, 3],
|
|
|
|
[15, 0, 1],
|
|
[15, 1, 8],
|
|
[15, 2, 7],
|
|
[15, 3, 6],
|
|
[15, 4, 5],
|
|
[15, 5, 4],
|
|
[15, 6, 3],
|
|
|
|
[16, 0, 10],
|
|
[16, 1, 12],
|
|
[16, 2, 2],
|
|
[16, 3, 3],
|
|
[16, 4, 5],
|
|
[16, 5, 7],
|
|
[16, 6, 9],
|
|
|
|
[17, 0, 0],
|
|
[17, 1, 2],
|
|
[17, 2, 9],
|
|
[17, 3, 3],
|
|
[17, 4, 6],
|
|
[17, 5, 0],
|
|
[17, 6, 3],
|
|
|
|
[18, 0, 3],
|
|
[18, 1, 12],
|
|
[18, 2, 3],
|
|
[18, 3, 7],
|
|
[18, 4, 8],
|
|
[18, 5, 5],
|
|
[18, 6, 0],
|
|
|
|
[19, 0, 1],
|
|
[19, 1, 2],
|
|
[19, 2, 4],
|
|
[19, 3, 6],
|
|
[19, 4, 8],
|
|
[19, 5, 10],
|
|
[19, 6, 12],
|
|
|
|
[20, 0, 4],
|
|
[20, 1, 12],
|
|
[20, 2, 1],
|
|
[20, 3, 5],
|
|
[20, 4, 3],
|
|
[20, 5, 4],
|
|
[20, 6, 2],
|
|
|
|
[21, 0, 9],
|
|
[21, 1, 0],
|
|
[21, 2, 3],
|
|
[21, 3, 2],
|
|
[21, 4, 5],
|
|
[21, 5, 6],
|
|
[21, 6, 7],
|
|
|
|
[22, 0, 7],
|
|
[22, 1, 6],
|
|
[22, 2, 5],
|
|
[22, 3, 2],
|
|
[22, 4, 5],
|
|
[22, 5, 6],
|
|
[22, 6, 7],
|
|
|
|
],
|
|
min: 0,
|
|
max: 6,
|
|
tip: {
|
|
show: true,
|
|
formatter: '第{x}天有{b}个提交'
|
|
}
|
|
}
|
|
heatMap.setOption(option)
|
|
heatMap.init(document.getElementById('mySvg'))
|
|
}
|
|
</script>
|
|
|
|
<script>
|
|
var _hmt = _hmt || [];
|
|
(function() {
|
|
var hm = document.createElement("script");
|
|
hm.src = "https://hm.baidu.com/hm.js?bffbeed2dde4891d848718f01f8e3da8";
|
|
var s = document.getElementsByTagName("script")[0];
|
|
s.parentNode.insertBefore(hm, s);
|
|
})();
|
|
</script>
|
|
|
|
<script type="text/javascript">
|
|
var vm = new Vue({
|
|
el: "#app",
|
|
data: {
|
|
areaDashboardProductionLine: {},
|
|
areaDashboardMwTypePie: {},
|
|
areaDashboardWarnList: {},
|
|
},
|
|
methods: {
|
|
// 通过时间参数 获取区域基本医废产量
|
|
getAreaDashboardProductionLine: function () {
|
|
let _this = this;
|
|
$.ajax({
|
|
url: '?c=event&a=getAreaDashboardProductionLine',
|
|
type: 'get',
|
|
dataType: 'json',
|
|
// data: {'time': time},
|
|
success: function(mes) {
|
|
_this.areaDashboardProductionLine = mes.data
|
|
$("#line-column-chart").empty();
|
|
options = {
|
|
chart: {
|
|
height: 160,
|
|
type: "area"//折线阴影部分
|
|
},
|
|
dataLabels: {
|
|
enabled: !1 //是否显示折线得每个节点
|
|
},
|
|
stroke: {
|
|
curve: "smooth",//折线的类型
|
|
width: 3//折线的宽度
|
|
},
|
|
series: [
|
|
{
|
|
name: "个数",
|
|
data:mes.data.data
|
|
}
|
|
],
|
|
colors: ["#5664d2"],
|
|
xaxis: {
|
|
type: "datetime",
|
|
categories: mes.data.time,
|
|
},
|
|
grid: {
|
|
borderColor: "#f1f1f1",
|
|
padding: {
|
|
bottom: 15
|
|
}
|
|
},
|
|
|
|
legend: {
|
|
offsetY: 7
|
|
}
|
|
}; (chart = new ApexCharts(document.querySelector("#line-column-chart"), options)).render();
|
|
},
|
|
error: function (msg) {
|
|
console.info('ajax请求失败!')
|
|
}
|
|
})
|
|
},
|
|
// 通过时间参数 获取整个区域的医废类型分布图
|
|
getAreaDashboardMwTypePie: function () {
|
|
let _this = this;
|
|
$.ajax({
|
|
url: '?c=event&a=getAreaDashboardMwTypePie',
|
|
type: 'get',
|
|
dataType: 'json',
|
|
// data: {'time': time},
|
|
success: function(mes) {
|
|
_this.areaDashboardMwTypePie = mes.data
|
|
$("#donut-chart").empty();
|
|
var options={series:mes.data,chart:{height:110,type:"donut"},labels:["闸门开启","闸门关闭"],plotOptions:{pie:{donut:{size:"0%"}}},dataLabels:{enabled:!1},legend:{show:!1},colors:["#5664D2","#1CBB8C","#EEB902","#FF4500","#74788D"]};(chart=new ApexCharts(document.querySelector("#donut-chart"),options)).render();
|
|
},
|
|
error: function (msg) {
|
|
console.info('ajax请求失败!')
|
|
}
|
|
})
|
|
},
|
|
// 获取预警列表
|
|
getAreaDashboardWarnList: function () {
|
|
let _this = this;
|
|
$.ajax({
|
|
url: '?c=event&a=getAreaDashboardWarnList',
|
|
type: 'get',
|
|
dataType: 'json',
|
|
success: function(mes) {
|
|
_this.areaDashboardWarnList = mes.data
|
|
|
|
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")}})});
|
|
|
|
}
|
|
},
|
|
created: function () {
|
|
this.getAreaDashboardProductionLine();
|
|
this.getAreaDashboardMwTypePie();
|
|
// this.getAreaDashboardWarnList();
|
|
}
|
|
})
|
|
</script>
|
|
</body>
|
|
</html>
|