<!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-test2.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">1</span>个</div>
|
<div class="txt">UPS</div>
|
</div>
|
</li>
|
<li>
|
<div class="con blue1">
|
<div class="num"><span id="device-1002">2</span>个</div>
|
<div class="txt">温湿度</div>
|
</div>
|
</li>
|
<li>
|
<div class="con powder">
|
<div class="num"><span id="device-1005">1</span>个</div>
|
<div class="txt">漏水</div>
|
</div>
|
</li>
|
<li>
|
<div class="con blue">
|
<div class="num"><span id="device-2001">1</span>个</div>
|
<div class="txt">烟感</div>
|
</div>
|
</li>
|
<li>
|
<div class="con yellow">
|
<div class="num"><span id="device-2005">1</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="box">
|
<div class="g-chart l2 db">
|
<div class="g-titl">
|
<h3 class="tit"><i></i>UPS输入</h3>
|
</div>
|
|
|
<!-- 市电 -->
|
<div class="databoard-box databoard-electric">
|
<!-- <h2 class="title" id="model_es_deviceName">设备名称</h2> -->
|
<div class="content ui-row main-between">
|
<div class="databoard-electric__dvc">
|
<h2 class="title">电压</h2>
|
|
<ul class="databoard-electric__list">
|
<li class="databoard-electric__item">
|
<div class="databoard-electric__label" id="model_es_ua">0.0V</div>
|
<div class="databoard-electric__ratio">
|
<div class="databoard-electric__ratio--rate" id="model_es_ua_per" style="width: 0%;"></div>
|
</div>
|
</li>
|
<li class="databoard-electric__item">
|
<div class="databoard-electric__label" id="model_es_ub">0.0V</div>
|
<div class="databoard-electric__ratio">
|
<div class="databoard-electric__ratio--rate" id="model_es_ub_per" style="width: 0%;"></div>
|
</div>
|
</li>
|
<li class="databoard-electric__item">
|
<div class="databoard-electric__label" id="model_es_uc">0.0V</div>
|
<div class="databoard-electric__ratio">
|
<div class="databoard-electric__ratio--rate" id="model_es_uc_per" style="width: 0%;"></div>
|
</div>
|
</li>
|
</ul>
|
</div>
|
|
<div class="databoard-electric__ec">
|
<h2 class="title">电流</h2>
|
|
<ul class="databoard-electric__list">
|
<li class="databoard-electric__item">
|
<div class="databoard-electric__label" id="model_es_ia">0A</div>
|
<div class="databoard-electric__ratio">
|
<div class="databoard-electric__ratio--rate" id="model_es_ia_per" style="width: 0%;"></div>
|
</div>
|
</li>
|
<li class="databoard-electric__item">
|
<div class="databoard-electric__label" id="model_es_ib">0A</div>
|
<div class="databoard-electric__ratio">
|
<div class="databoard-electric__ratio--rate" id="model_es_ib_per" style="width: 0%;"></div>
|
</div>
|
</li>
|
<li class="databoard-electric__item">
|
<div class="databoard-electric__label" id="model_es_ic">0A</div>
|
<div class="databoard-electric__ratio">
|
<div class="databoard-electric__ratio--rate" id="model_es_ic_per" style="width: 0%;"></div>
|
</div>
|
</li>
|
</ul>
|
</div>
|
</div>
|
<div class="ui-row main-between cross-center content databoard-electric__label-text">
|
<div class="ui-row main-around ui-col p0 databoard-electric__ratio-label">
|
<span class="databoard-electric__ratio-label--item">A相</span>
|
<span class="databoard-electric__ratio-label--item">B相</span>
|
<span class="databoard-electric__ratio-label--item">C相</span>
|
</div>
|
<div class="databoard-electric__frequency" id="model_es_fr">频率：0Hz</div>
|
</div>
|
</div>
|
|
|
|
</div>
|
<div class="g-chart l2 db">
|
<div class="g-titl">
|
<h3 class="tit"><i></i><span id="model_es_deviceName">UPS</span></h3>
|
</div>
|
|
|
<!-- #1UPS监控 -->
|
<div class="databoard-box databoard-ups">
|
<!-- <h2 class="title" id="model_ups_deviceName">设备名称</h2> -->
|
<div class="content ui-grid no-padding">
|
<div class="ui-row cross-center databoard-ups__item mode">
|
<span class="databoard-ups__label" style="margin-right: 16px;">供电模式</span>
|
<span class="databoard-ups__input" id="model_ups_esType">市电供电</span>
|
</div>
|
<div class="ui-row cross-center databoard-ups__item power">
|
<span class="databoard-ups__label" style="margin-right: 16px;">负载率</span>
|
<!-- 修改 .databoard-ups__range--progress 元素的宽度(单位：百分比) -->
|
<span class="databoard-ups__range ui-row ui-col">
|
<i class="databoard-ups__range--progress" id="model_ups_power2" style="width: 0%;"></i>
|
</span>
|
<span class="databoard-ups__input" id="model_ups_power">0%</span>
|
</div>
|
<div class="ui-row cross-center databoard-ups__item battery">
|
<span class="databoard-ups__label" id="ups_vpPer_name" style="margin-right: 16px;">电池电量</span>
|
<!-- TODO: 电池 -->
|
<!-- 修改 .databoard-ups__range--progress 元素的宽度(单位：百分比) -->
|
<span class="databoard-ups__range">
|
<i id="model_ups_vpPer2" class="databoard-ups__range--progress" style="width: 90%;"></i>
|
</span>
|
<span class="databoard-ups__input" id="model_ups_vpPer">90%</span>
|
</div>
|
</div>
|
</div>
|
|
<!-- #1UPS监控 -->
|
<div class="databoard-box databoard-ups">
|
<!-- <h2 class="title" id="model_ups_deviceName">设备名称</h2> -->
|
<div class="content ui-grid no-padding">
|
<div class="ui-row cross-center databoard-ups__item mode">
|
<span class="databoard-ups__label" style="margin-right: 16px;">供电模式</span>
|
<span class="databoard-ups__input" id="model_ups_esType">市电供电</span>
|
</div>
|
<div class="ui-row cross-center databoard-ups__item power">
|
<span class="databoard-ups__label" style="margin-right: 16px;">负载率</span>
|
<!-- 修改 .databoard-ups__range--progress 元素的宽度(单位：百分比) -->
|
<span class="databoard-ups__range ui-row ui-col">
|
<i class="databoard-ups__range--progress" id="model_ups_power2" style="width: 0%;"></i>
|
</span>
|
<span class="databoard-ups__input" id="model_ups_power">0%</span>
|
</div>
|
<div class="ui-row cross-center databoard-ups__item battery">
|
<span class="databoard-ups__label" id="ups_vpPer_name" style="margin-right: 16px;">电池电量</span>
|
<!-- TODO: 电池 -->
|
<!-- 修改 .databoard-ups__range--progress 元素的宽度(单位：百分比) -->
|
<span class="databoard-ups__range">
|
<i id="model_ups_vpPer2" class="databoard-ups__range--progress" style="width: 90%;"></i>
|
</span>
|
<span class="databoard-ups__input" id="model_ups_vpPer">90%</span>
|
</div>
|
</div>
|
</div>
|
|
|
<div class="border-box databoard-box databoard-sensor">
|
<div class="content ui-row main-around">
|
<div class="databoard-sensor__breath">
|
<h2 class="title">烟感</h2>
|
<div class="donut">
|
<svg viewBox="0 0 440 440" xmlns="http://www.w3.org/2000/svg" class="donut__svg">
|
<defs>
|
<linearGradient id="donut__blue" x1="0%" y1="0%" x2="100%" y2="0%">
|
<stop offset="0%" stop-color="#6f7ae7" />
|
<stop offset="100%" stop-color="#00faff" />
|
</linearGradient>
|
</defs>
|
<g transform="matrix(0,-1,1,0,0,440)">
|
<circle class="donut__backdrop" cx="220" cy="220" r="170" fill="none" stroke-width="20" stroke="rgba(79,204,255,0.2)"></circle>
|
<circle class="donut__progress" cx="220" cy="220" r="170" fill="none" stroke-width="20" stroke="url('#donut__blue')"
|
stroke-linecap="round"></circle>
|
</g>
|
</svg>
|
<div class="donut__label">
|
<div class="donut__label--percent" id="model_smoke_ss">0/0</div>
|
<div class="donut__label--status">报警</div>
|
</div>
|
</div>
|
|
</div>
|
<div class="databoard-sensor__water">
|
<h2 class="title">漏水</h2>
|
<div class="donut">
|
<svg viewBox="0 0 440 440" xmlns="http://www.w3.org/2000/svg" class="donut__svg">
|
<defs>
|
<linearGradient id="donut__blue" x1="0%" y1="0%" x2="100%" y2="0%">
|
<stop offset="0%" stop-color="#6f7ae7" />
|
<stop offset="100%" stop-color="#00faff" />
|
</linearGradient>
|
</defs>
|
<g transform="matrix(0,-1,1,0,0,440)">
|
<circle class="donut__backdrop" cx="220" cy="220" r="170" fill="none" stroke-width="20" stroke="rgba(79,204,255,0.2)"></circle>
|
<circle class="donut__progress" cx="220" cy="220" r="170" fill="none" stroke-width="20" stroke="url('#donut__blue')"
|
stroke-linecap="round"></circle>
|
</g>
|
</svg>
|
<div class="donut__label">
|
<div class="donut__label--percent" id="model_smoke_mv">0/0</div>
|
<div class="donut__label--status">报警</div>
|
</div>
|
</div>
|
</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">
|
|
<div class="border-box databoard-box databoard-environmental">
|
<h2 class="title" id="model_th_deviceName" style="margin-top: 0px;">温湿度1</h2>
|
<div class="content ui-grid no-padding">
|
<div class="databoard-environmental__box1 ui-row main-around">
|
<div class="ui-col ui-row main-center cross-center databoard-environmental__item temperature">
|
<div class="databoard-environmental__icon"></div>
|
<div class="databoard-environmental__label"><span>温度</span><br />
|
<span class="hot" id="model_th_t01">25.0℃</span></div>
|
</div>
|
<div class="ui-col ui-row main-center cross-center databoard-environmental__item humidity">
|
<div class="databoard-environmental__icon"></div>
|
<div class="databoard-environmental__label"><span>湿度</span><br />
|
<span id="model_th_h01">50.0%</span></div>
|
</div>
|
</div>
|
|
<div id="databoardEnvironmental" style="width: 100%; height: 1.44rem;display: none;"></div>
|
</div>
|
</div>
|
|
<div class="border-box databoard-box databoard-environmental">
|
<h2 class="title" id="model_th_deviceName" style="margin-top: 0px;">温湿度2</h2>
|
<div class="content ui-grid no-padding">
|
<div class="databoard-environmental__box1 ui-row main-around">
|
<div class="ui-col ui-row main-center cross-center databoard-environmental__item temperature">
|
<div class="databoard-environmental__icon"></div>
|
<div class="databoard-environmental__label"><span>温度</span><br />
|
<span class="hot" id="model_th_t01">25.0℃</span></div>
|
</div>
|
<div class="ui-col ui-row main-center cross-center databoard-environmental__item humidity">
|
<div class="databoard-environmental__icon"></div>
|
<div class="databoard-environmental__label"><span>湿度</span><br />
|
<span id="model_th_h01">50.0%</span></div>
|
</div>
|
</div>
|
|
<div id="databoardEnvironmental" style="width: 100%; height: 1.44rem;display: none;"></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 class="g-content ui-row">
|
<div class="border-box databoard-box databoard-sensor">
|
<div class="content ui-row main-around">
|
<div class="databoard-sensor__breath">
|
<h2 class="title">烟感</h2>
|
<div class="donut">
|
<svg viewBox="0 0 440 440" xmlns="http://www.w3.org/2000/svg" class="donut__svg">
|
<defs>
|
<linearGradient id="donut__blue" x1="0%" y1="0%" x2="100%" y2="0%">
|
<stop offset="0%" stop-color="#6f7ae7" />
|
<stop offset="100%" stop-color="#00faff" />
|
</linearGradient>
|
</defs>
|
<g transform="matrix(0,-1,1,0,0,440)">
|
<circle class="donut__backdrop" cx="220" cy="220" r="170" fill="none" stroke-width="20" stroke="rgba(79,204,255,0.2)"></circle>
|
<circle class="donut__progress" cx="220" cy="220" r="170" fill="none" stroke-width="20" stroke="url('#donut__blue')"
|
stroke-linecap="round"></circle>
|
</g>
|
</svg>
|
<div class="donut__label">
|
<div class="donut__label--percent" id="model_smoke_ss">0/0</div>
|
<div class="donut__label--status">报警</div>
|
</div>
|
</div>
|
|
</div>
|
<div class="databoard-sensor__water">
|
<h2 class="title">漏水</h2>
|
<div class="donut">
|
<svg viewBox="0 0 440 440" xmlns="http://www.w3.org/2000/svg" class="donut__svg">
|
<defs>
|
<linearGradient id="donut__blue" x1="0%" y1="0%" x2="100%" y2="0%">
|
<stop offset="0%" stop-color="#6f7ae7" />
|
<stop offset="100%" stop-color="#00faff" />
|
</linearGradient>
|
</defs>
|
<g transform="matrix(0,-1,1,0,0,440)">
|
<circle class="donut__backdrop" cx="220" cy="220" r="170" fill="none" stroke-width="20" stroke="rgba(79,204,255,0.2)"></circle>
|
<circle class="donut__progress" cx="220" cy="220" r="170" fill="none" stroke-width="20" stroke="url('#donut__blue')"
|
stroke-linecap="round"></circle>
|
</g>
|
</svg>
|
<div class="donut__label">
|
<div class="donut__label--percent" id="model_smoke_mv">0/0</div>
|
<div class="donut__label--status">报警</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
|
</div>
|
<div class="g-chart l3 jmkt">
|
<div class="g-titl">
|
<h3 class="tit"><i></i><span id="model_air_deviceName">环境监控</span></h3>
|
</div>
|
|
|
<!-- 环境监控 -->
|
<div class="g-content ui-row">
|
<div class="border-box databoard-box databoard-sensor">
|
<div class="content ui-row main-around">
|
<div class="databoard-sensor__breath">
|
<h2 class="title">消防</h2>
|
<div class="donut">
|
<svg viewBox="0 0 440 440" xmlns="http://www.w3.org/2000/svg" class="donut__svg">
|
<defs>
|
<linearGradient id="donut__blue" x1="0%" y1="0%" x2="100%" y2="0%">
|
<stop offset="0%" stop-color="#6f7ae7" />
|
<stop offset="100%" stop-color="#00faff" />
|
</linearGradient>
|
</defs>
|
<g transform="matrix(0,-1,1,0,0,440)">
|
<circle class="donut__backdrop" cx="220" cy="220" r="170" fill="none" stroke-width="20" stroke="rgba(79,204,255,0.2)"></circle>
|
<circle class="donut__progress" cx="220" cy="220" r="170" fill="none" stroke-width="20" stroke="url('#donut__blue')"
|
stroke-linecap="round"></circle>
|
</g>
|
</svg>
|
<div class="donut__label">
|
<div class="donut__label--percent" id="model_smoke_ss">0/0</div>
|
<div class="donut__label--status">报警</div>
|
</div>
|
</div>
|
|
</div>
|
<!-- <div class="databoard-sensor__water">-->
|
<!-- <h2 class="title">漏水</h2>-->
|
<!-- <div class="donut">-->
|
<!-- <svg viewBox="0 0 440 440" xmlns="http://www.w3.org/2000/svg" class="donut__svg">-->
|
<!-- <defs>-->
|
<!-- <linearGradient id="donut__blue" x1="0%" y1="0%" x2="100%" y2="0%">-->
|
<!-- <stop offset="0%" stop-color="#6f7ae7" />-->
|
<!-- <stop offset="100%" stop-color="#00faff" />-->
|
<!-- </linearGradient>-->
|
<!-- </defs>-->
|
<!-- <g transform="matrix(0,-1,1,0,0,440)">-->
|
<!-- <circle class="donut__backdrop" cx="220" cy="220" r="170" fill="none" stroke-width="20" stroke="rgba(79,204,255,0.2)"></circle>-->
|
<!-- <circle class="donut__progress" cx="220" cy="220" r="170" fill="none" stroke-width="20" stroke="url('#donut__blue')"-->
|
<!-- stroke-linecap="round"></circle>-->
|
<!-- </g>-->
|
<!-- </svg>-->
|
<!-- <div class="donut__label">-->
|
<!-- <div class="donut__label--percent" id="model_smoke_mv">0/0</div>-->
|
<!-- <div class="donut__label--status">报警</div>-->
|
<!-- </div>-->
|
<!-- </div>-->
|
<!-- </div>-->
|
</div>
|
</div>
|
</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>
|
