<!DOCTYPE html>
|
<html lang="zh-CN">
|
<head>
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
<meta name="renderer" content="webkit">
|
<title>智能机房管理平台-UPS</title>
|
<link rel="stylesheet" type="text/css" href="./plugins/layui/css/layui.css"/>
|
<link rel="stylesheet" type="text/css" href="css/page/detail-ups.css"/>
|
</head>
|
|
<body class="pdgxq-body">
|
<div class="i-container">
|
|
<div class="jmkt-main">
|
|
<div class="layui-fluid">
|
<div class="pdgxq-m1 layui-row layui-col-space20">
|
<div class="layui-col-lg5 layui-col-md5">
|
<div class="pdgxq-m1-left pdgxq-m1-box" style="height: 730px">
|
<div class="pdgxq-H">
|
<h3><i></i>实时监控</h3>
|
</div>
|
|
<div class="pdgxq-group clearfix">
|
<div class="pdgxq-group-item jmkt-chuli">
|
<span id="warnStatus">无</span>警告状态
|
</div>
|
<div class="pdgxq-group-item jmkt-yichuli">
|
<span id="connectionState">正常</span>通讯状态
|
</div>
|
</div>
|
|
<div class="pdgxq-table jmkt-table-wrap">
|
<div class="table-thead">
|
<table class="layui-table pdgxq-table1 poptable" lay-skin="nob">
|
<colgroup>
|
<col width="33%">
|
<col width="33%">
|
<col width="33%">
|
</colgroup>
|
<thead>
|
<tr>
|
<th>监控属性</th>
|
<th>监 控 值</th>
|
<th>更新时间</th>
|
</tr>
|
</thead>
|
</table>
|
</div>
|
<div class="table-tbody">
|
<table class="layui-table pdgxq-table1 poptable" lay-skin="nob">
|
<colgroup>
|
<col width="33%">
|
<col width="33%">
|
<col width="33%">
|
</colgroup>
|
<tbody id="tbody">
|
<!-- <tr>-->
|
<!-- <td>通讯状态</td>-->
|
<!-- <td>-->
|
<!-- 正常-->
|
<!-- </td>-->
|
<!-- <td>2020-04-26 12:30</td>-->
|
<!-- </tr>-->
|
<!-- <tr>-->
|
<!-- <td>警告状态</td>-->
|
<!-- <td>无</td>-->
|
<!-- <td>2020-04-26 12:30</td>-->
|
<!-- </tr>-->
|
</tbody>
|
</table>
|
</div>
|
<div style="height: 15px;border-top: 1px solid #444d58;"></div>
|
</div><!--pdgxq-table end-->
|
|
</div>
|
|
</div><!--pdgxq-m1-left end-->
|
|
<div class="layui-col-lg7 layui-col-md7">
|
<div class="pdgxq-m1-right pdgxq-m1-box">
|
<div class="pdgxq-H">
|
<h3><i></i>监控信息</h3>
|
</div>
|
|
<div class="jmkt-jkxx-box">
|
|
<div class="jmkt-picBox">
|
<img src="./images/ups_dianliu-01.gif" id="ups-dianlu1" class="jmkt-pic action"/>
|
<img src="./images/ups_dianliu-02.gif" id="ups-dianlu2" class="jmkt-pic"/>
|
<img src="./images/ups_dianliu-03.gif" id="ups-dianlu3" class="jmkt-pic"/>
|
<div class="jmkt-pic-text jmkt-pic-lnq inputV">
|
<p class="single ups" id="inV">输入电压：<span>##</span> V</p>
|
<p class="three ups" id="a-inV" style="color: #FFFF00;display: none;"></p>
|
<p class="three ups" id="b-inV" style="color: #00FF00;display: none;"></p>
|
<p class="three ups" id="c-inV" style="color: #e45163;display: none;"></p>
|
</div>
|
<div class="jmkt-pic-text jmkt-pic-ysj" style="display: none;">电池剩余容量：<span id="capacity">##</span>%</div>
|
<div class="jmkt-pic-text jmkt-pic-ysj" style="display: none;">电池后备时间：<span id="capacity-date">##</span>min</div>
|
<div class="jmkt-pic-text jmkt-pic-sfwd outputV">
|
<p class="single ups" id="outV">输出电压：<span>##</span> V</p>
|
<p class="three ups" id="a-outV" style="color: #FFFF00;display: none;"></p>
|
<p class="three ups" id="b-outV" style="color: #00FF00;display: none;"></p>
|
<p class="three ups" id="c-outV" style="color: #e45163;display: none;"></p>
|
</div>
|
|
</div>
|
<div class="jmkt-pic-text jmkt-pic-pattern">
|
<p>供电模式：<span id="pattern">##</span></p>
|
</div>
|
|
</div><!--jmkt-jkxx-box end-->
|
|
|
</div>
|
|
<!-- 基本信息 -->
|
<div style="padding-top: 20px">
|
<div class="pdgxq-m2-right pdgxq-m2-box">
|
<h3>设备基本信息</h3>
|
<p>设备名称：<span id="deviceName">UPS#1</span></p>
|
<p>设备状态：<span id="deviceStatus">激活</span></p>
|
<p style="display: none;">运维厂商：<span id="opVendor"></span></p>
|
|
<div class="pdgxq-phone" style="display: none;">
|
<h4>运维电话</h4>
|
<p id="opPhone"></p>
|
</div>
|
</div>
|
</div>
|
|
|
</div><!--pdgxq-m1-left end-->
|
|
</div><!--pdgxq-m1 end-->
|
|
</div>
|
|
</div><!--jmkt-main end-->
|
|
</div> <!--i-container end-->
|
|
|
<script src="./js/jquery.min.js"></script>
|
<!--<script src="./plugins/layui/layui.js"></script>-->
|
|
<script type="text/javascript">
|
//开始渲染
|
function renderInfo(deviceData, device) {
|
//设备信息
|
$("#deviceName").html(device.name);
|
$("#deviceStatus").html(device.vld==0?"激活":"停用");
|
$("#opVendor").html(window.parent.SYS_SET.opVendor);
|
$("#opPhone").html(window.parent.SYS_SET.opPhone);
|
//实时数据
|
var list = deviceData.value;
|
//时间格式化 yyyy-MM-dd hh:mm
|
var time = deviceData.time;
|
time = time.slice(0,4)+"-"+time.slice(4,6)+"-"+time.slice(6,8)+" "+time.slice(8,10)+":"+time.slice(10,12);
|
//单相UPS
|
if(device.type=="1001"){
|
$(".ups").hide();
|
$(".single").show();
|
//市电供电=true;电池供电=false;
|
var utilityPower = false;
|
//正常=true;旁路=false;
|
var normal = false;
|
var cur;
|
var html = "";
|
for (var i = 1; i <= list.length; i++) {
|
cur = list[i - 1];
|
|
//通讯状态
|
if(cur.passcode == 1){
|
$("#connectionState").html(cur.value==0?"正常":"报警");
|
html += "<tr><td>"+cur.name+"</td><td>"+(cur.value==0?"正常":"报警")+"</td><td>"+time+"</td></tr>";
|
}
|
else if(cur.passcode == 2){
|
$("#warnStatus").html(cur.value==0?"无":"报警");
|
html += "<tr><td>"+cur.name+"</td><td>"+(cur.value==0?"无":"报警")+"</td><td>"+time+"</td></tr>";
|
}
|
else if(cur.passcode == 10){//供电方式
|
$("#pattern").html(cur.value == 0 ? "市电供电":"电池供电");
|
html += "<tr><td>"+cur.name+"</td><td>"+(cur.value==0?"市电供电":"电池供电")+"</td><td>"+time+"</td></tr>";
|
}else if(cur.passcode == 11){//工作模式
|
//根据供电方式选择图片
|
$(".jmkt-pic").removeClass("action");
|
var str;
|
if(cur.value == 0) {
|
str = "正常供电";
|
$("#ups-dianlu1").addClass("action");
|
}else if(cur.value == 1){
|
str = "旁路供电";
|
$("#ups-dianlu2").addClass("action");
|
}else if(cur.value == 2){
|
str = "电池供电";
|
$("#ups-dianlu3").addClass("action");
|
}else {
|
str = "正常供电";
|
$("#ups-dianlu1").addClass("action");
|
}
|
html += "<tr><td>"+cur.name+"</td><td>"+str+"</td><td>"+time+"</td></tr>";
|
}else{
|
html += "<tr><td>"+cur.name+"</td><td>"+renderValue(device.type,cur)+"</td><td>"+time+"</td></tr>";
|
|
|
//渲染列表
|
// html += "<tr><td>"+cur.name+"</td><td>"+(cur.value?cur.value:"")+"</td><td>"+time+"</td></tr>";
|
}
|
//输入电压
|
if(cur.passcode == 3){
|
var str = ""+ cur.name +"<span>"+cur.value+"</span>V";
|
$("#inV").html(str);
|
}
|
//输出电压
|
if(cur.passcode == 5){
|
var str = ""+ cur.name +"<span>"+cur.value+"</span>V";
|
$("#outV").html(str);
|
}
|
//电池剩余容量
|
if(cur.passcode == 13){
|
if(cur.value && cur.value != "#" ){
|
$("#capacity").html(cur.value);
|
$("#capacity").show();
|
}
|
}
|
// //电池后备时间
|
// if(cur.passcode == 14){
|
// if(cur.value != null && cur.value != "#" ){
|
// $("#capacity-date").html(cur.value);
|
// // $("#capacity-date").show();
|
// }
|
// }
|
|
|
}
|
|
$("#tbody").html("");
|
$("#tbody").html(html);
|
}
|
//三相UPS
|
if(device.type=="1002"){
|
|
$(".ups").hide();
|
// $(".three").show();
|
|
//市电供电=true;电池供电=false;
|
var utilityPower = false;
|
//正常=true;旁路=false;
|
var normal = false;
|
var cur;
|
var html = "";
|
for (var i = 1; i <= list.length; i++) {
|
cur = list[i - 1];
|
//通讯状态
|
if(cur.passcode == 1){
|
$("#connectionState").html(cur.value==0?"正常":"报警");
|
html += "<tr><td>"+cur.name+"</td><td>"+(cur.value==0?"正常":"报警")+"</td><td>"+time+"</td></tr>";
|
}else if(cur.passcode == 2){//警告状态
|
$("#warnStatus").html(cur.value==0?"无":"报警");
|
html += "<tr><td>"+cur.name+"</td><td>"+(cur.value==0?"无":"报警")+"</td><td>"+time+"</td></tr>";
|
}
|
else if(cur.passcode == 20){//供电方式
|
$("#pattern").html(cur.value == 0 ? "市电供电":"电池供电");
|
html += "<tr><td>"+cur.name+"</td><td>"+(cur.value==0?"市电供电":"电池供电")+"</td><td>"+time+"</td></tr>";
|
}else if(cur.passcode == 21){//工作模式
|
//根据供电方式选择图片
|
$(".jmkt-pic").removeClass("action");
|
var str;
|
if(cur.value == 0) {
|
str = "正常供电";
|
$("#ups-dianlu1").addClass("action");
|
}else if(cur.value == 1){
|
str = "旁路供电";
|
$("#ups-dianlu2").addClass("action");
|
}else if(cur.value == 2){
|
str = "电池供电";
|
$("#ups-dianlu3").addClass("action");
|
}else {
|
str = "正常供电";
|
$("#ups-dianlu1").addClass("action");
|
}
|
html += "<tr><td>"+cur.name+"</td><td>"+str+"</td><td>"+time+"</td></tr>";
|
}else{
|
html += "<tr><td>"+cur.name+"</td><td>"+renderValue(device.type,cur)+"</td><td>"+time+"</td></tr>";
|
|
//渲染列表
|
// html += "<tr><td>"+cur.name+"</td><td>"+(cur.value?cur.value:"")+"</td><td>"+time+"</td></tr>";
|
}
|
|
//A相输入电压
|
if(cur.passcode == 3){
|
var str = ""+ cur.name +"<span>"+cur.value+"</span>V";
|
$("#a-inV").html(str);
|
$("#a-inV").show();
|
}
|
//B相输入电压
|
if(cur.passcode == 4){
|
var str = ""+ cur.name +"<span>"+cur.value+"</span>V";
|
$("#b-inV").html(str);
|
$("#b-inV").show();
|
}
|
//C相输入电压
|
if(cur.passcode == 5){
|
var str = ""+ cur.name +"<span>"+cur.value+"</span>V";
|
$("#c-inV").html(str);
|
$("#c-inV").show();
|
}
|
if(device.id == "22" || device.id == "23"){
|
//A相输出电压
|
if(cur.passcode == 7){
|
var str = ""+ cur.name +"<span>"+cur.value+"</span>V";
|
$("#a-outV").html(str);
|
$("#a-outV").show();
|
}
|
}else{
|
//A相输出电压
|
if(cur.passcode == 9){
|
var str = ""+ cur.name +"<span>"+cur.value+"</span>V";
|
$("#a-outV").html(str);
|
$("#a-outV").show();
|
}
|
//B相输出电压
|
if(cur.passcode == 10){
|
var str = ""+ cur.name +"<span>"+cur.value+"</span>V";
|
$("#b-outV").html(str);
|
$("#b-outV").show();
|
}
|
//C相输出电压
|
if(cur.passcode == 11){
|
var str = ""+ cur.name +"<span>"+cur.value+"</span>V";
|
$("#c-outV").html(str);
|
$("#c-outV").show();
|
}
|
}
|
|
//电池剩余容量
|
if(cur.passcode == 23){
|
if(cur.value && cur.value != "#" ){
|
$("#capacity").html(cur.value);
|
$("#capacity").show();
|
}
|
}
|
//电池后备时间
|
// if(cur.passcode == 24){
|
// if(cur.value != null && cur.value != "#" ){
|
// $("#capacity-date").html(cur.value);
|
// $("#capacity-date").show();
|
// }
|
// }
|
}
|
|
$("#tbody").html("");
|
$("#tbody").html(html);
|
}
|
}
|
|
function renderValue(type,cur) {
|
var res = cur.value;
|
|
var str = "";
|
if(cur.note && cur.note.length > 0){
|
str += cur.note;
|
}else{
|
str += cur.value;
|
}
|
if(cur.unit && cur.unit.length > 0){
|
str += " " + cur.unit;
|
}
|
|
res = str;
|
|
return res;
|
}
|
</script>
|
<script src="./js/page/detail.js"></script>
|
</body>
|
|
</html>
|
