523 lines
25 KiB
HTML
523 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="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=event&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-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"><?php echo $data['event_count'];?></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="badge badge-soft-success font-size-11"></span>
|
|
<span class="text-muted ml-2">累计事件总数</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="card" style="height: 150px;">
|
|
<div class="card-body">
|
|
<div class="float-right d-none d-md-inline-block">
|
|
</div>
|
|
<h4 class="card-title" style="font-weight: 400;">变化趋势</h4>
|
|
<div>
|
|
<div id="line-column-chart" class="apex-charts" dir="ltr"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 设备类型占比 -->
|
|
<div class="col-md-3">
|
|
<div class="card">
|
|
<div class="card-body" style="margin-bottom:-40px;">
|
|
<div class="media">
|
|
<div class="media-body overflow-hidden">
|
|
<p class="text-truncate font-size-14 mb-2">设备类型占比</p>
|
|
<!-- <h4 class="mb-0">15.4</h4> -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="pie" style="height:120px;"></div>
|
|
</div>
|
|
</div>
|
|
<!-- <div class="col-md-3">
|
|
<div class="card">
|
|
<div id="pie" style="height:150px;"></div>
|
|
</div>
|
|
</div> -->
|
|
</div>
|
|
<!-- 右中 马赛克贡献图-->
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<div id="chart-container" style="height:420px;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 右下 -->
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<!-- <h4 class="card-title mb-4" style="margin-bottom:-20px!important">执行事件</h4> -->
|
|
<div class="table-responsive">
|
|
<div style="margin: 20px 20px 20px 1px;">
|
|
<!-- <input type="text" id="project" class="form-control" style="width: 20%; float: left" placeholder="所属项目"> -->
|
|
<input type="text" id="terminal" class="form-control" style="width: 20%; float: left" placeholder="场站名称">
|
|
<input type="text" id="name" class="form-control" style="width: 20%; float: left;margin-left:15px;" placeholder="设备名称">
|
|
<span id="search"><button class="btn btn-primary waves-effect waves-light" type="button" style="margin-left:15px;">搜索</button></span>
|
|
</div>
|
|
<div class="mytab">
|
|
<table id="mytab" class="table table-hover"></table>
|
|
</div>
|
|
</div>
|
|
</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>
|
|
|
|
<!-- apexcharts -->
|
|
<script src="assets/libs/apexcharts/apexcharts.min.js"></script>
|
|
<script src="https://fastly.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.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="https://fastly.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.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='';
|
|
}
|
|
$('#mytab').bootstrapTable({
|
|
method: 'get',
|
|
// url: "http://localhost/47.75.142.244/rs.opmonitor.com/view/layout/web/test.json", // 请求路径
|
|
url: "?c=event&a=eventDataTable&id="+id, // 请求路径
|
|
striped: true, // 是否显示行间隔色
|
|
pageNumber: 1, // 初始化加载第一页
|
|
pagination: true, // 是否分页
|
|
sidePagination: 'client', // server:服务器端分页|client：前端分页
|
|
pageSize: 15, // 单页记录数
|
|
pageList: [5, 20, 30],
|
|
// showRefresh : true,// 刷新按钮
|
|
queryParams: function(params) { // 上传服务器的参数
|
|
var temp = {
|
|
// project: $("#project").val(),
|
|
terminal: $("#terminal").val(),
|
|
name: $("#name").val(),
|
|
// buildingId: $("#buildingId").val(),
|
|
limit: params.limit, // 每页显示数量
|
|
offset: params.offset, // SQL语句起始索引
|
|
};
|
|
return temp;
|
|
},
|
|
columns: [
|
|
{
|
|
title: '序号',
|
|
field: 'id',
|
|
}, {
|
|
title: '所属项目',
|
|
field: 'project',
|
|
}, {
|
|
title: '所属场站',
|
|
field: 'terminal',
|
|
// formatter: formatMode
|
|
}, {
|
|
title: '设备名称',
|
|
field: 'name',
|
|
}, {
|
|
title: '事件说明',
|
|
field: 'event',
|
|
},{
|
|
title: '上传时间',
|
|
field: 'created_at',
|
|
}
|
|
]
|
|
})
|
|
|
|
// 查询按钮事件
|
|
$('#search').click(function() {
|
|
$('#mytab').bootstrapTable('refresh', {
|
|
// url: "http://localhost/47.75.142.244/rs.opmonitor.com/view/layout/web/test.json"
|
|
url: "?c=event&a=eventDataTable", // 请求路径
|
|
});
|
|
})
|
|
</script>
|
|
<script>
|
|
|
|
//设备类型占比
|
|
$.ajax({
|
|
url: '?c=event&a=eventPie&id='+id,
|
|
type: 'get',
|
|
dataType: 'json',
|
|
success: function(mes) {
|
|
//饼状图
|
|
var dom = document.getElementById('pie');
|
|
var myChart = echarts.init(dom, null, {
|
|
renderer: 'canvas',
|
|
useDirtyRect: false
|
|
});
|
|
var app = {};
|
|
var option;
|
|
option = {
|
|
legend: {
|
|
top: '5%',
|
|
right: '10',
|
|
orient:'vertical'
|
|
},
|
|
series: [
|
|
{
|
|
type: 'pie',
|
|
radius: ['40%', '70%'],
|
|
center: ['30%', '50%'],
|
|
avoidLabelOverlap: false,
|
|
itemStyle: {
|
|
borderRadius: 10,
|
|
borderColor: '#fff',
|
|
borderWidth: 2
|
|
},
|
|
label: {
|
|
show: false,
|
|
position: 'center'
|
|
},
|
|
emphasis: {
|
|
label: {
|
|
show: true,
|
|
fontSize: '14',
|
|
fontWeight: 'bold'
|
|
}
|
|
},
|
|
data:mes.data
|
|
}
|
|
]
|
|
};
|
|
if (option && typeof option === 'object') {
|
|
myChart.setOption(option);
|
|
}
|
|
window.addEventListener('resize', myChart.resize);
|
|
},
|
|
error: function (msg) {
|
|
console.info('ajax请求失败!')
|
|
}
|
|
})
|
|
//变化趋势
|
|
$.ajax({
|
|
url: '?c=event&a=eventline&id='+id,
|
|
type: 'get',
|
|
dataType: 'json',
|
|
success: function(mes) {
|
|
$("#line-column-chart").empty();
|
|
options3 = {
|
|
zoom: {
|
|
enabled: false
|
|
},
|
|
chart: {
|
|
height: 130,
|
|
type: "line",//折线阴影部分
|
|
toolbar: {//设置不显示右上角的下载、放大等按钮
|
|
show: false,
|
|
tools: {
|
|
download: false,
|
|
selection: false,
|
|
zoom: false,
|
|
zoomin: false,
|
|
zoomout: false,
|
|
pan: false,
|
|
reset: false
|
|
},
|
|
autoSelected: 'zoom'
|
|
}
|
|
|
|
},
|
|
dataLabels: {
|
|
enabled: false //是否显示折线得每个节点
|
|
},
|
|
stroke: {
|
|
curve: "smooth",//折线的类型
|
|
width: 3//折线的宽度
|
|
},
|
|
series: [
|
|
{
|
|
name: "事件总数",
|
|
data:mes.data.line
|
|
// data:[12,4,33,9,50,1]
|
|
}
|
|
],
|
|
colors: ["#5664d2"],
|
|
xaxis: {
|
|
type: "时间",
|
|
categories:mes.data.times
|
|
// categories: ['11-24','11-25','11-26','11-27','11-28','11-29'],
|
|
},
|
|
yaxis:{
|
|
show:false,
|
|
},
|
|
grid: {
|
|
borderColor: "#f1f1f1",
|
|
padding: {
|
|
bottom: 30
|
|
}
|
|
},
|
|
legend: {
|
|
offsetY: 7
|
|
}
|
|
}; (chart = new ApexCharts(document.querySelector("#line-column-chart"), options3)).render();
|
|
|
|
},
|
|
error: function (msg) {
|
|
console.info('ajax请求失败!')
|
|
}
|
|
})
|
|
//贡献图
|
|
$.ajax({
|
|
url: '?c=event&a=getHeatMap&id='+id,
|
|
type: 'get',
|
|
dataType: 'json',
|
|
// async: true,
|
|
success: function(mes) {
|
|
var dom = document.getElementById('chart-container');
|
|
var myChart = echarts.init(dom, null, {
|
|
renderer: 'canvas',
|
|
useDirtyRect: false
|
|
});
|
|
var app = {};
|
|
|
|
var option;
|
|
const days = ['周日', '周一', '周二','周三', '周四', '周五', '周六'];
|
|
function getVirtualData(year) {
|
|
const date = +echarts.time.parse(year + '-01-01');//某年的第一天
|
|
const end = +echarts.time.parse(+year + 1 + '-01-01');//365天之后的结束日期
|
|
const dayTime = 3600 * 24 * 1000;//以 每一天为 分界线
|
|
const data = [];
|
|
// var k= 0;
|
|
// var f = 0;
|
|
for (let i = date,j=0; i < end; i += dayTime,j++) {
|
|
var yuansu1 = echarts.time.format(i, '{yyyy}-{MM}-{dd}', false);
|
|
var yuansu2 =mes.data[j];
|
|
// f = k+1;
|
|
// var yuansu2 =parseInt(mes.data[j]);
|
|
// var yuansu2 = Math.floor(Math.random() * 10000);//每一天的数值
|
|
data.push([yuansu1,yuansu2]);
|
|
}
|
|
// console.log(data)
|
|
return data;
|
|
}
|
|
option = {
|
|
tooltip: {
|
|
// show: true,
|
|
// position: "right",
|
|
formatter: function (p) {
|
|
var format = echarts.format.formatTime("yyyy-MM-dd", p.data[0]);
|
|
return format + "<br/>" + " 事件: " + p.data[1] + "条";
|
|
},
|
|
},//鼠标点击提示框展示的形式
|
|
visualMap: {//视觉映射组件，用于进行『视觉编码』，也就是将数据映射到视觉元素（视觉通道）
|
|
min: 0,
|
|
max: 250,
|
|
calculable: true,
|
|
type: 'piecewise',//piecewise分段型 continuous连续型 数据自定义分段
|
|
orient: 'horizontal',//水平放置 visualMap 组件 horizontal水平 vertical 竖直
|
|
left: 'right', //'left', 'center', 'right'
|
|
color: ['#196127','#239a3b','#7bc96f','#c6e48b'], // 瓦片颜色
|
|
textStyle: {
|
|
color: '#000'
|
|
},
|
|
bottom: -5//图标的图例距离容器的底部的距离
|
|
},
|
|
calendar: {
|
|
top: 20,
|
|
left: 30,
|
|
right: 30,
|
|
height: 360,
|
|
cellSize: ['auto',18],//日历每格框的大小 设置宽自适应，高为13
|
|
range: '2024',//日历坐标的范围 ['2017-01-02', '2017-02-23']
|
|
itemStyle: {
|
|
borderWidth: 0.3,//calendar描边线宽
|
|
},
|
|
yearLabel: { show: false },
|
|
dayLabel: {//纵轴 星期的显示 显示为 中文
|
|
firstDay: 1,
|
|
nameMap: "ZH",//快捷设置显示
|
|
// nameMap: ['周一', '周二', '周三', '周四', '周五', '周六','周日'],
|
|
},
|
|
monthLabel: {//横轴 月份的显示 设置为中文
|
|
nameMap: "ZH",
|
|
},
|
|
splitLine: {
|
|
show: false
|
|
}
|
|
},
|
|
series: {
|
|
type: 'heatmap',//热力图
|
|
coordinateSystem: 'calendar',//该系列使用的坐标系 使用日历坐标系
|
|
// data: mes.data,
|
|
data: getVirtualData('2024'),
|
|
symbolSize: 15,
|
|
// itemStyle: {
|
|
// color: '#ddb926'
|
|
// }
|
|
},
|
|
};
|
|
|
|
if (option && typeof option === 'object') {
|
|
myChart.setOption(option);
|
|
}
|
|
window.addEventListener('resize', myChart.resize);
|
|
},
|
|
error: function (msg) {
|
|
console.info('ajax请求失败!')
|
|
}
|
|
})
|
|
</script>
|
|
</body>
|
|
</html>
|