<!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>智能机房管理平台-PDU</title>
|
<link rel="stylesheet" type="text/css" href="./plugins/layui/css/layui.css"/>
|
<link rel="stylesheet" type="text/css" href="css/page/detail-pdu.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">
|
<table class="layui-table pdgxq-table1" lay-skin="nob">
|
<colgroup>
|
<col width="33%">
|
<col width="33%">
|
<col width="33%">
|
</colgroup>
|
<thead>
|
<tr>
|
<th>监控属性</th>
|
<th>监 控 值</th>
|
<th>更新时间</th>
|
</tr>
|
</thead>
|
<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>-->
|
<!-- <tr>-->
|
<!-- <td>温度</td>-->
|
<!-- <td>22.1</td>-->
|
<!-- <td>2020-04-26 12:30</td>-->
|
<!-- </tr>-->
|
<!-- <tr>-->
|
<!-- <td>湿度</td>-->
|
<!-- <td>36.4</td>-->
|
<!-- <td>2020-04-26 12:30</td>-->
|
<!-- </tr>-->
|
|
</tbody>
|
</table>
|
<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="lsyg-jkxx-box">
|
|
<div class=" layui-row">
|
|
<div class="layui-col-lg6 layui-col-md6">
|
<div class="mj-item mj-item1">
|
<div id="i-echart1" style="width: 450px; height: 400px;"></div>
|
</div>
|
|
</div>
|
|
<div class="layui-col-lg6 layui-col-md6">
|
<div class="mj-item mj-item2">
|
<div class="pos">
|
<p>视在功率：<span id="apparent">0KW</span></p>
|
<p>有功功率：<span id="active">0KW</span></p>
|
<p>无功功率：<span id="reactive">0KW</span></p>
|
<p>额定功率：<span id="rated">0KW</span></p>
|
<p>剩余功率：<span id="residual">0KW</span></p>
|
<p>电能：<span id="energy">0KWH</span></p>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
</div><!--lsyg-jkxx-box end-->
|
</div>
|
|
<!-- 基本信息 -->
|
<div style="padding-top: 20px">
|
<div class="pdgxq-m2-right pdgxq-m2-box">
|
<h3>设备基本信息</h3>
|
<p>设备名称：<span id="deviceName">PDU</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/echarts/echarts.min.js"></script>
|
<script type="text/javascript">
|
$(document).ready(function () {
|
var param = {maxV:350,data:250,name:"电压"};
|
initEchart(param);
|
});
|
function initEchart(param) {
|
var chart1 ={};
|
var myChart1;
|
//仪表盘1
|
var dom = document.getElementById("i-echart1");
|
myChart1 = echarts.init(dom);
|
|
var app = {};
|
var option = null;
|
app.title = '';
|
|
option = {
|
tooltip: {
|
formatter: '{a} <br/>{c} {b}',
|
show: false,
|
},
|
toolbox: {
|
show: true,
|
|
},
|
series: [
|
{
|
name: '电压',
|
type: 'gauge',
|
min: 0,
|
max: param.maxV,
|
|
splitNumber: 10,
|
radius: '85%',
|
"center": ["50%", "55%"],
|
axisLine: { // 坐标轴线
|
lineStyle: { // 属性lineStyle控制线条样式
|
color: [[0.09, 'lime'], [0.82, '#1e90ff'], [1, '#ff4500']],
|
width: 3,
|
shadowColor: '#fff', //默认透明
|
shadowBlur: 15
|
}
|
},
|
axisLabel: { // 坐标轴小标记
|
fontWeight: 'bolder',
|
color: '#fff',
|
shadowColor: '#fff', //默认透明
|
shadowBlur: 3
|
},
|
axisTick: { // 坐标轴小标记
|
length: 10, // 属性length控制线长
|
lineStyle: { // 属性lineStyle控制线条样式
|
color: 'auto',
|
shadowColor: '#fff', //默认透明
|
shadowBlur: 10
|
}
|
},
|
splitLine: { // 分隔线
|
length: 15, // 属性length控制线长
|
lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
|
width: 2,
|
color: '#fff',
|
shadowColor: '#fff', //默认透明
|
shadowBlur: 10
|
}
|
},
|
pointer: { // 分隔线
|
shadowColor: '#fff', //默认透明
|
shadowBlur: 3,
|
length: "70%",
|
width: 8,
|
z: 1,
|
},
|
itemStyle: {
|
// 表盘指针的颜色
|
color: "#268fd9",
|
z: 1,
|
},
|
title: {
|
offsetCenter: ['0', '70'],
|
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
|
// fontWeight: 'bolder',
|
fontSize: 18,
|
// fontStyle: 'italic',
|
color: '#fff',
|
shadowColor: '#fff', //默认透明
|
shadowBlur: 0
|
}
|
},
|
|
detail: {
|
// backgroundColor: 'rgba(38,44,51,0.8)',
|
// borderWidth: 4,
|
borderColor: '#268fd9',
|
symbol: 'circle',
|
height: 20,
|
shadowColor: '#2672a8', //默认透明
|
shadowBlur: 10,
|
z: 10,
|
offsetCenter: [0, '0'], // x, y，单位px
|
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
|
fontWeight: 'bolder',
|
fontSize: 16,
|
z: 10,
|
color: '#fff'
|
}
|
},
|
data: [{value: param.data, name: param.name}],
|
markPoint: {
|
|
symbol: 'circle',
|
symbolSize: 80,
|
data: [
|
//跟你的仪表盘的中心位置对应上，颜色可以和画板底色一样
|
{
|
value: param.data,
|
x: 'center',
|
y: '55%',
|
itemStyle: {
|
borderWidth: 4,
|
color: '#262c33',
|
borderColor: '#268fd9',
|
}
|
}
|
],
|
itemStyle: {
|
normal: {
|
label: {
|
show: true,
|
color: '#FFF',//气泡中字体颜色
|
fontSize: 18
|
}
|
}
|
},
|
},
|
},
|
]
|
};
|
if (option && typeof option === "object") {
|
myChart1.setOption(option, true);
|
};
|
window.onresize = function () {
|
myChart1.resize();
|
};
|
chart1.option = option;
|
chart1.chart= myChart1;
|
}
|
|
</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);
|
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 == 3){
|
// html += "<tr><td>"+cur.name+"</td><td>"+(cur.value?cur.value:"")+" V</td><td>"+time+"</td></tr>";
|
// }
|
// else if(cur.passcode >= 4 && cur.passcode <= 6){
|
// html += "<tr><td>"+cur.name+"</td><td>"+(cur.value?cur.value:"")+" KW</td><td>"+time+"</td></tr>";
|
// }
|
// else if(cur.passcode == 8){
|
// html += "<tr><td>"+cur.name+"</td><td>"+(cur.value?cur.value:"")+" KW·H</td><td>"+time+"</td></tr>";
|
// }
|
// else if(cur.passcode == 9 ||cur.passcode == 10){
|
// html += "<tr><td>"+cur.name+"</td><td>"+(cur.value?cur.value:"")+" KW</td><td>"+time+"</td></tr>";
|
// }
|
// else{
|
// html += "<tr><td>"+cur.name+"</td><td>"+(cur.value?cur.value:"")+" </td><td>"+time+"</td></tr>";
|
// }
|
|
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;
|
}
|
|
html += "<tr><td>"+cur.name+"</td><td>"+(str)+"</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 v = cur.value ? cur.value : 0;
|
var maxV = v > 350 ? (v * 1.2) : 350;
|
var param = {maxV:maxV,data:v,name:"电压"};
|
initEchart(param);
|
}
|
if(cur.passcode == 4){
|
$("#apparent").html(cur.value + ((cur.unit && cur.unit.length > 0) ? (" "+ cur.unit): ""));
|
}
|
if(cur.passcode == 5){
|
$("#active").html(cur.value + ((cur.unit && cur.unit.length > 0) ? (" "+ cur.unit): ""));
|
}
|
if(cur.passcode == 6){
|
$("#reactive").html(cur.value + ((cur.unit && cur.unit.length > 0) ? (" "+ cur.unit): ""));
|
}
|
if(cur.passcode == 7){
|
// $("#hum").html(cur.value + "KW");
|
}
|
if(cur.passcode == 8){
|
$("#energy").html(cur.value + ((cur.unit && cur.unit.length > 0) ? (" "+ cur.unit): ""));
|
}
|
if(cur.passcode == 9){
|
$("#rated").html(cur.value + ((cur.unit && cur.unit.length > 0) ? (" "+ cur.unit): ""));
|
}
|
if(cur.passcode == 10){
|
$("#residual").html(cur.value + ((cur.unit && cur.unit.length > 0) ? (" "+ cur.unit): ""));
|
}
|
//更新时间
|
// $(".time").html(time);
|
}
|
$("#tbody").html("");
|
$("#tbody").html(html);
|
}
|
|
|
|
|
</script>
|
|
<script src="./js/page/detail.js"></script>
|
</body>
|
</html>
|
