<!DOCTYPE html>
|
<html>
|
|
<head>
|
<meta charset="UTF-8"/>
|
<meta name="renderer" content="webkit"/>
|
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
|
<meta name="full-screen" content="true">
|
<meta name="viewport"
|
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"/>
|
<title>运维管理系统-大屏监控</title>
|
<meta name="description" content="" />
|
<meta name="keywords" content="" />
|
<link rel="shortcut icon" href="favicon.png"/>
|
<script rembox data-design-width="1920" data-max-client-width="4096" src="js/rembox.js"></script>
|
<link rel="stylesheet" href="css/page/single/style.css"/>
|
<link rel="stylesheet" href="css/page/single/single-test.css"/>
|
|
<style>
|
/** 背景动效*/
|
#particles-js {
|
width: 100%;
|
height: 1080px;
|
background-color: #04162d;
|
/*background-image: url('');*/
|
background-size: cover;
|
background-position: 50% 50%;
|
background-repeat: no-repeat;
|
}
|
@media only screen and (max-width:1280px) and (max-height: 800px){
|
/** 背景动效*/
|
#particles-js {
|
width: 100%;
|
height: 800px;
|
background-color: #04162d;
|
/*background-image: url('');*/
|
background-size: cover;
|
background-position: 50% 50%;
|
background-repeat: no-repeat;
|
}
|
}
|
</style>
|
</head>
|
|
<body id="body">
|
<!-- 头部 -->
|
<!-- 头部 -->
|
<!-- banner -->
|
<!-- banner -->
|
<!-- 内容 -->
|
<div class="main" style="position: absolute;left: 0px;top: 0px;right: 0px;bottom: 0px;z-index:2;">
|
<div class="g-box">
|
<div class="m-topl">
|
<!-- <a href="" class="back"><i></i>返回首页</a>-->
|
<div class="date"><i></i><span id="dayTime">2019-11-12 20:30:56</span></div>
|
</div>
|
<div class="m-titl1">
|
<h3 id="main-title" class="tit">安全生产监测预警系统</h3>
|
</div>
|
<div class="m-desc">
|
<p id="main-slogan">严格程序，精心操作，规范行为，保障安全</p>
|
</div>
|
<div class="m-box">
|
<div class="col-l">
|
<div class="g-chart gjjk">
|
<div class="g-titl">
|
<h3 class="tit"><i></i>警告监控</h3>
|
</div>
|
<!-- 警告监控 -->
|
<div class="g-content databoard-monitor databoard-box">
|
|
|
<h2 class="title subtitle">告警总览</h2>
|
<div id="databoardWarnView"></div>
|
<h2 class="title subtitle" style="margin-top: 0;">告警走势</h2>
|
<div id="databoardWarnTrend"></div>
|
<div class="databoard-monitor__list">
|
<table>
|
<thead>
|
<tr>
|
<th>警告说明</th>
|
<th>警告状态</th>
|
<th>报警时间</th>
|
</tr>
|
</thead>
|
<tbody id="warnInfoTBody">
|
<tr>
|
<td>超过伐值警告</td>
|
<td>未处理</td>
|
<td>2020-03-09 16:01:29</td>
|
</tr>
|
<tr>
|
<td>超过伐值警告</td>
|
<td>未处理</td>
|
<td>2020-03-09 16:01:29</td>
|
</tr>
|
<tr>
|
<td>超过伐值警告</td>
|
<td>未处理</td>
|
<td>2020-03-09 16:01:29</td>
|
</tr>
|
<tr>
|
<td>超过伐值警告</td>
|
<td>未处理</td>
|
<td>2020-03-09 16:01:29</td>
|
</tr>
|
<tr>
|
<td>超过伐值警告</td>
|
<td>未处理</td>
|
<td>2020-03-09 16:01:29</td>
|
</tr>
|
<tr>
|
<td>超过伐值警告</td>
|
<td>未处理</td>
|
<td>2020-03-09 16:01:29</td>
|
</tr>
|
<tr>
|
<td>超过伐值警告</td>
|
<td>未处理</td>
|
<td>2020-03-09 16:01:29</td>
|
</tr>
|
<tr>
|
<td>超过伐值警告</td>
|
<td>未处理</td>
|
<td>2020-03-09 16:01:29</td>
|
</tr>
|
|
</tbody>
|
</table>
|
</div>
|
|
|
</div>
|
</div>
|
</div>
|
<div class="col-c">
|
<div class="g-chart l1 jksbsl">
|
<div class="g-titl">
|
<h3 class="tit"><i></i>监测设备数量</h3>
|
</div>
|
<!-- 监控设备数量 -->
|
<div class="g-content">
|
<ul class="ul-listl1">
|
<li>
|
<div class="con">
|
<div class="num"><span id="device-1004">0</span>个</div>
|
<div class="txt">电气火灾</div>
|
</div>
|
</li>
|
<li>
|
<div class="con blue1">
|
<div class="num"><span id="device-1002">0</span>台</div>
|
<div class="txt">有毒有害气体</div>
|
</div>
|
</li>
|
<li>
|
<div class="con powder">
|
<div class="num"><span id="device-1005">0</span>组</div>
|
<div class="txt">温湿度</div>
|
</div>
|
</li>
|
<li>
|
<div class="con blue">
|
<div class="num"><span id="device-2001">0</span>个</div>
|
<div class="txt">粉尘防爆</div>
|
</div>
|
</li>
|
<li>
|
<div class="con yellow">
|
<div class="num"><span id="device-2005">0</span>个</div>
|
<div class="txt">可燃气体</div>
|
</div>
|
</li>
|
<li>
|
<div class="con purple">
|
<div class="num"><span id="device-2002">0</span>台</div>
|
<div class="txt">烟雾明火</div>
|
</div>
|
</li>
|
</ul>
|
</div>
|
</div>
|
|
|
<div class="g-chart l3 hjjk">
|
<div class="g-titl">
|
<h3 class="tit"><i></i>事件总览</h3>
|
</div>
|
<!-- 环境监控 -->
|
<div class="g-content ui-row" style="padding: 10px;">
|
|
<div class="databoard-box">
|
<div class="ui-row main-around">
|
<div class="databoard-pue__liveload">
|
<div class="databoard-pue__circle circle1" id="model_pue_cur">142326</div>
|
<h2 class="title">未处理总量</h2>
|
</div>
|
<div class="databoard-pue__recent7day">
|
<div class="databoard-pue__circle circle2" id="model_pue_avg">11560</div>
|
<h2 class="title">未处理预警</h2>
|
</div>
|
</div>
|
</div>
|
|
<div class="databoard-box">
|
<div class="ui-row main-around">
|
<div class="databoard-pue__liveload">
|
<div class="databoard-pue__circle circle3" id="model_pue_cur">1971</div>
|
<h2 class="title">未处理报警</h2>
|
</div>
|
<div class="databoard-pue__recent7day">
|
<div class="databoard-pue__circle circle4" id="model_pue_avg">795</div>
|
<h2 class="title">未处理故障</h2>
|
</div>
|
</div>
|
</div>
|
|
</div>
|
</div>
|
|
<div class="g-chart l3 hjjk">
|
<div class="g-titl">
|
<h3 class="tit"><i></i>电气火灾</h3>
|
</div>
|
<!-- 环境监控 -->
|
<div class="g-content ui-row" style="padding: 10px;">
|
|
<div class="databoard-box">
|
<div class="ui-row main-around">
|
<div class="databoard-pue__liveload">
|
<div class="databoard-pue__circle circle1" id="model_pue_cur">14</div>
|
<h2 class="title">监控节点</h2>
|
</div>
|
<div class="databoard-pue__recent7day">
|
<div class="databoard-pue__circle circle2" id="model_pue_avg">11560</div>
|
<h2 class="title">预警数量</h2>
|
</div>
|
</div>
|
</div>
|
|
<div class="databoard-box">
|
<div class="ui-row main-around">
|
<div class="databoard-pue__liveload">
|
<div class="databoard-pue__circle circle3" id="model_pue_cur">1971</div>
|
<h2 class="title">报警数量</h2>
|
</div>
|
<div class="databoard-pue__recent7day">
|
<div class="databoard-pue__circle circle4" id="model_pue_avg">795</div>
|
<h2 class="title">故障数量</h2>
|
</div>
|
</div>
|
</div>
|
|
</div>
|
</div>
|
|
</div>
|
<div class="col-r">
|
<div class="g-chart l1 aqyxts">
|
<div class="g-titl">
|
<h3 class="tit"><i></i>安全运行天数</h3>
|
</div>
|
<!-- 安全运行天数 -->
|
<div class="databoard-runday g-content-run-day">
|
<div class="content ui-row main-between">
|
<div class="databoard-runday__day zero" id="run_num_3">0</div>
|
<div class="databoard-runday__day" id="run_num_2">0</div>
|
<div class="databoard-runday__day" id="run_num_1">0</div>
|
<div class="databoard-runday__day" id="run_num_0">0</div>
|
<div class="databoard-runday__unit">天</div>
|
</div>
|
</div>
|
</div>
|
|
|
<div class="g-chart l2 ups">
|
<div class="g-titl">
|
<h3 class="tit"><i></i><span id="model_ups_deviceName">事件统计</span></h3>
|
</div>
|
|
|
<div id="databoardWarnView2"></div>
|
|
|
</div>
|
|
|
<div class="g-chart l3 ups">
|
<div class="g-titl">
|
<h3 class="tit"><i></i><span id="model_air_deviceName">电气火灾统计</span></h3>
|
</div>
|
|
|
<div id="databoardWarnView3"></div>
|
|
|
</div>
|
|
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<!--添加背景动效-->
|
<div id="particles-js"></div>
|
|
|
<!-- 内容 -->
|
<!-- 底部 -->
|
<!-- 底部 -->
|
<script inline="javascript">
|
//设置定时刷新页面，主要为了防止掉线
|
var timerFlush;
|
window.onload = function () {
|
if(timerFlush){
|
clearInterval(timerFlush);
|
}
|
timerFlush = setInterval(function() {
|
window.location.href=window.location.href;
|
}, 60 * 60 * 1000);
|
};
|
</script>
|
<script src="js/jquery.min.js"></script>
|
<script src="./plugins/layui/layui.js"></script>
|
<script src="./plugins/echarts/echarts.min.js"></script>
|
<script src="js/constant.js"></script>
|
<!--<script src="js/common.js"></script>-->
|
<script src="js/page/single/particles.min.js"></script>
|
<script src="js/page/single/single-test.js"></script>
|
</body>
|
|
</html>
|
