<!DOCTYPE html>
|
<html>
|
<head>
|
<meta charset="utf-8">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="renderer" content="webkit">
|
<meta http-equiv="Cache-Control" content="no-siteapp"/>
|
<title>智能机房管理平台-联动控制</title>
|
|
<link rel="shortcut icon" href="favicon.ico">
|
<link rel="stylesheet" type="text/css" href="./plugins/layui/css/layui.css"/>
|
<link rel="stylesheet" type="text/css" href="css/page/device-common.css"/>
|
<style>
|
.td-input{
|
width: 100%;
|
}
|
.layui-btn{
|
height: 29px;
|
line-height: 29px;
|
}
|
.td-hide{
|
display: none;
|
}
|
</style>
|
</head>
|
|
<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="padding: 5px 0 5px 0;">
|
<div style="margin: 0 20px;">
|
<div class="layui-col-md4">
|
<div class="layui-inline">
|
<div class="layui-input-block btns" style="margin-left: 15px">
|
<button class="layui-btn layui-btn-normal"
|
onclick="add()">新增
|
</button>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="layui-col-lg7 layui-col-md7">
|
<div class="pdgxq-m1-right pdgxq-m1-box">
|
<div class="pdgxq-table jmkt-table-wrap">
|
<i class="i"></i>
|
<div class="pdgxq-table-box" style="">
|
<div class="table-thead">
|
<table class="layui-table pdgxq-table1" lay-skin="nob">
|
<colgroup>
|
<col width="3%">
|
<col width="13%">
|
<col width="10%">
|
<col width="13%">
|
<col width="13%">
|
<col width="13%">
|
<col width="8%">
|
<col>
|
</colgroup>
|
<thead>
|
<tr>
|
<th>序号</th>
|
<th>联动名称</th>
|
<th>条件配置</th>
|
<th>联动设备</th>
|
<th>联动通道</th>
|
<th>写入数据</th>
|
<th>当前状态</th>
|
<th>操作</th>
|
</tr>
|
</thead>
|
</table>
|
</div>
|
<div class="table-tbody">
|
<table class="layui-table pdgxq-table1" lay-skin="nob">
|
<colgroup>
|
<col width="3%">
|
<col width="13%">
|
<col width="10%">
|
<col width="13%">
|
<col width="13%">
|
<col width="13%">
|
<col width="8%">
|
<col>
|
</colgroup>
|
<tbody id="tbodyList">
|
<!-- <tr>-->
|
<!-- <td>-->
|
<!-- 1-->
|
<!-- </td>-->
|
<!-- <td>-->
|
<!-- <input type="text" class="layui-input td-input">-->
|
<!-- </td>-->
|
<!-- <td>-->
|
<!-- <button style="height: 29px;line-height: 29px;"-->
|
<!-- class="layui-btn layui-btn-normal" onclick="conditionPop()">-->
|
<!-- 条件配置-->
|
<!-- </button>-->
|
<!-- </td>-->
|
<!-- <td>-->
|
<!-- <select lay-ignore="" name="devChn" class="layui-input td-input" name='level'>-->
|
<!-- <option value="">请选择</option>-->
|
<!-- </select>-->
|
<!-- </td>-->
|
<!-- <td>-->
|
<!-- <select lay-ignore="" name="devChn" class="layui-input td-input" name='level'>-->
|
<!-- <option value="">请选择</option>-->
|
<!-- </select>-->
|
<!-- </td>-->
|
<!-- <td>-->
|
<!-- <input type="text" class="layui-input td-input">-->
|
<!-- </td>-->
|
<!-- <td>-->
|
<!-- 启用-->
|
<!-- </td>-->
|
<!-- <td>-->
|
<!-- <button style="height: 29px;line-height: 29px;"-->
|
<!-- class="layui-btn layui-btn-warm" onclick="edit('1')">启用-->
|
<!-- </button>-->
|
<!-- <button style="height: 29px;line-height: 29px;"-->
|
<!-- class="layui-btn layui-btn-normal" onclick="edit('1')">保存-->
|
<!-- </button>-->
|
<!-- <button style="height: 29px;line-height: 29px;"-->
|
<!-- class="layui-btn layui-btn-danger" onclick="edit('1')">删除-->
|
<!-- </button>-->
|
<!-- </td>-->
|
<!-- </tr>-->
|
</tbody>
|
</table>
|
</div>
|
|
</div>
|
<div style="height: 15px;border-top: 1px solid #444d58;"></div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<script type="text/javascript" src="./js/jquery.min.js"></script>
|
<script src="./plugins/layui/layui.js"></script>
|
<script src="js/constant.js"></script>
|
<script type="text/javascript">
|
var layer;
|
var deviceList = [];
|
var passCodeAll = [];
|
var passCodeMap = {};
|
var indexTag = 0;
|
var condtionCur = [];
|
var condFlag = "-1";
|
var list = [
|
// {
|
// enable:true,
|
// actName:"设备名称",
|
// devId:"3",
|
// devChn:"8",
|
// value:"1",
|
// condFlag:"0",
|
// condtion:[
|
// {
|
// devId:"3",
|
// devVhn:"8",
|
// flag:"0",
|
// value:"1",
|
// }
|
// ],
|
// },
|
// {
|
// enable:true,
|
// actName:"设备名称",
|
// devId:"3",
|
// devChn:"8",
|
// value:"1",
|
// condFlag:"0",
|
// condtion:[
|
// {
|
// devId:"3",
|
// devVhn:"8",
|
// flag:"0",
|
// value:"1",
|
// }
|
// ],
|
// },
|
];
|
|
|
init_();
|
function init_() {
|
layui.use(['layer'], function () {
|
layer = layui.layer;
|
});
|
queryDevice();
|
queryData(-1);
|
// renderData();
|
}
|
|
function queryDevice() {
|
$.ajaxSettings.async = false;
|
$.get("./cgi-bin/device/query-all", function (data, status) {
|
if ("success" == status) {
|
deviceList = data;
|
queryPassCodeAll();
|
} else {
|
window.parent.notify("系统获取监控设备信息失败！");
|
}
|
}, "json");
|
}
|
|
function queryPassCodeAll() {
|
$.ajaxSettings.async = false;
|
$.get("./cgi-bin/linkage/get", function (data, status) {
|
if ("success" == status) {
|
passCodeAll = data;
|
if(passCodeAll && passCodeAll.length > 0){
|
$.each(passCodeAll,function (i,it) {
|
passCodeMap[it.devId] = it;
|
});
|
}
|
} else {
|
window.parent.notify("系统获取监控设备信息失败！");
|
}
|
}, "json");
|
}
|
|
function queryData(i) {
|
$.get("./cgi-bin/linkage/query", function (data, status) {
|
if ("success" == status) {
|
var obj = data;
|
if(i == -1){
|
list = obj;
|
}else{
|
list[i] = obj[i];
|
}
|
renderData(false);
|
} else {
|
window.parent.notify("系统获取基础设备列表出错！");
|
}
|
}, "json");
|
}
|
|
function renderData(tag) {
|
$("#tbodyList").html('');
|
if(list && list.length > 0){
|
$.each(list,function (index,it) {
|
var html = '';
|
html += '<tr class="data">';
|
html += '<td>'+(index+1)+'</td>';
|
if(tag){
|
if(index == (list.length-1)){
|
html += '<td><input type="text" id="actName'+index+'" name="'+index+'" tag="actName" class="layui-input td-input"></td>';
|
}else{
|
html += '<td><input type="text" id="actName'+index+'" name="'+index+'" tag="actName" class="layui-input td-input" readonly></td>';
|
}
|
}else{
|
html += '<td><input type="text" id="actName'+index+'" name="'+index+'" tag="actName" class="layui-input td-input" readonly></td>';
|
}
|
|
|
html += '<td><button class="layui-btn layui-btn-normal" onclick="conditionPop('+index+')">条件配置</button></td>';
|
html += '<td>';
|
html += '<select lay-ignore="" id="devId'+index+'" name="'+index+'" tag="devId" class="layui-input td-input td-devId">';
|
html += '<option value="">请选择</option>';
|
html += '</select>';
|
html += '</td>';
|
html += '<td>';
|
html += '<select lay-ignore="" id="devChn'+index+'" name="'+index+'" tag="devChn" class="layui-input td-input">';
|
html += '<option value="">请选择</option>';
|
html += '</select>';
|
html += '</td>';
|
html += '<td>';
|
html += '<input type="text" id="value'+index+'" name="'+index+'" tag="value" class="layui-input td-input">';
|
html += '<input type="text" id="condFlag'+index+'" name="'+index+'" tag="condFlag" class="layui-input td-input td-hide">';
|
html += '</td>';
|
html += '<td id="enableState'+index+'"></td>';
|
html += '<td>';
|
html += '<button class="layui-btn layui-btn-warm" id="enableState2'+index+'" onclick="changeEnable('+index+')">启用</button>';
|
html += '<button class="layui-btn layui-btn-normal" onclick="save('+index+')">保存</button>';
|
html += '<button class="layui-btn layui-btn-danger" onclick="del('+index+')">删除</button>';
|
html += '</td>';
|
html += '</tr>';
|
$("#tbodyList").append(html);
|
|
//设置参数
|
$("#actName"+index).val(it.actName);
|
$("#value"+index).val(it.value);
|
if(it.enable == "true"){
|
$("#enableState"+index).text("启用");
|
$("#enableState2"+index).text("停用");
|
}else{
|
$("#enableState"+index).text("停用");
|
$("#enableState2"+index).text("启用");
|
}
|
//设置设备下拉框
|
var divId1 = "devId" + index;
|
renderDeviceList(divId1,it.devId);
|
$("#devId"+index).val(it.devId);
|
|
//设置通道下拉框
|
var divId2 = "devChn" + index;
|
renderPassCode(it.devId,it.devChn,divId2);
|
$("#devChn"+index).val(it.devChn);
|
});
|
|
$(".td-devId").change(function () {
|
var i = $(this).attr("name");
|
// var cur = list[i];
|
var devId = $(this).val();
|
var divId = "devChn"+i;
|
renderPassCode(devId,0,divId);
|
});
|
|
$(".data .td-input").change(function () {
|
var i = $(this).attr("name");
|
var tag = $(this).attr("tag");
|
var cur = list[i];
|
cur[tag] = $("#"+tag+i).val();
|
list[i] = cur;
|
});
|
}
|
}
|
|
function renderDeviceList(divId,devId) {
|
if(deviceList && deviceList.length > 0){
|
$("#"+divId).html('');
|
var html = '<option value="0">请选择</option>';
|
$("#"+divId).append(html);
|
$.each(deviceList,function (index,it) {
|
var name = it.name;
|
if(it.id == 257){
|
name = "Do输出";
|
}
|
var html = '<option value="'+it.id+'">'+name+'</option>';
|
if(devId == it.id){
|
html = '<option value="'+it.id+'" selected>'+name+'</option>';
|
}
|
|
$("#"+divId).append(html);
|
});
|
}
|
}
|
|
|
|
function renderPassCode(devId,devChn,divId) {
|
var data = passCodeMap[devId];
|
if(data){
|
var codes = data.passcode;
|
if(codes && codes.length > 0){
|
$("#"+divId).html('');
|
var html = '<option value="0">请选择</option>';
|
$("#"+divId).append(html);
|
$.each(codes,function (index,it) {
|
var html = '<option value="'+it.passcode+'">'+it.name+'</option>';
|
if(devChn == it.passcode){
|
html = '<option value="'+it.passcode+'" selected>'+it.name+'</option>';
|
}
|
$("#"+divId).append(html);
|
});
|
}
|
}
|
|
}
|
|
|
function add() {
|
// var index = 0;
|
if(list && list.length > 0){
|
// index = list.length;
|
}else{
|
list = [];
|
}
|
|
var it = {
|
enable:"true",
|
actName:"",
|
devId:"",
|
devChn:"",
|
value:"",
|
condFlag:"0",
|
condtion:[
|
// {
|
// devId:"",
|
// devVhn:"",
|
// flag:"",
|
// value:"",
|
// }
|
],
|
};
|
list.push(it);
|
|
renderData(true);
|
}
|
|
function changeEnable(i) {
|
var cur = list[i];
|
if(cur.enable == "true"){
|
cur.enable = "false";
|
$("#enableState"+i).text("停用(未保存)");
|
$("#enableState2"+i).text("启用");
|
}else{
|
cur.enable = "true";
|
$("#enableState"+i).text("启用(未保存)");
|
$("#enableState2"+i).text("停用");
|
}
|
}
|
|
function save(i) {
|
var obj = list[i];
|
obj.actName = $("#actName"+i).val();
|
obj.devId = $("#devId"+i).val();
|
obj.devChn = $("#devChn"+i).val();
|
obj.value = $("#value"+i).val();
|
if(condFlag != "-1"){
|
obj.condFlag = condFlag;
|
}
|
|
var data = {
|
actName:obj.actName,
|
data:obj
|
};
|
//执行保存
|
$.post("./cgi-bin/linkage/saveAct", JSON.stringify(data), function (data, status) {
|
if (data.code == "success") {
|
queryData(i);
|
window.parent.notify("数据保存成功");
|
} else {
|
window.parent.notify("数据保存出错，请重新操作！"+data.msg+"！");
|
}
|
}, "json");
|
}
|
|
function del(i) {
|
var cur = list[i];
|
// cur.actName = $("#actName"+i).val();
|
// cur.devId = $("#devId"+i).val();
|
// cur.devChn = $("#devChn"+i).val();
|
// cur.value = $("#value"+i).val();
|
// cur.condFlag = $("#condFlag"+i).val();
|
|
var data = {
|
actName:cur.actName,
|
};
|
|
//执行保存
|
$.post("./cgi-bin/linkage/delAct", JSON.stringify(data), function (data, status) {
|
if (data.code == "success") {
|
queryData(-1);
|
window.parent.notify("数据保存成功");
|
} else {
|
window.parent.notify("数据保存出错，请重新操作！"+data.msg+"！");
|
}
|
}, "json");
|
}
|
|
|
|
function conditionPop(i) {
|
indexTag = i;
|
var cur = list[i];
|
var condtions = cur.condtion;
|
condtionCur = condtions;
|
$("#condFlag").val(cur.condFlag);
|
condFlag = cur.condFlag;
|
renderCondtion(condtions);
|
|
|
//弹出框
|
layer.open({
|
skin: 'mypop',
|
type: 1,
|
title: false,
|
area: ['85%', '92%'],
|
closeBtn: 0,
|
shade: 0,
|
scrollbar: false,
|
content: $('#dialog-device')
|
});
|
|
};
|
|
function renderCondtion(condtions) {
|
$("#tbodyList2").html('');
|
if(condtions && condtions.length > 0){
|
$.each(condtions,function (index,it) {
|
var html = '';
|
html += '<tr class="condtion">';
|
html += '<td>'+(index+1)+'</td>';
|
html += '<td>';
|
html += '<select lay-ignore="" id="condtion-devId'+index+'" name="'+index+'" tag="devId" class="layui-input td-input td-condtion-devId">';
|
html += '<option value="">请选择</option>';
|
html += '</select>';
|
html += '</td>';
|
html += '<td>';
|
html += '<select lay-ignore="" id="condtion-devChn'+index+'" name="'+index+'" tag="devChn" class="layui-input td-input">';
|
html += '<option value="">请选择</option>';
|
html += '</select>';
|
html += '</td>';
|
html += '<td>';
|
html += '<select lay-ignore="" id="condtion-flag'+index+'" name="'+index+'" tag="flag" class="layui-input td-input" >';
|
html += '<option value="1">大于</option>';
|
html += '<option value="2">小于</option>';
|
html += '<option value="3">等于</option>';
|
html += '<option value="4">不等于</option>';
|
html += '</select>';
|
html += '</td>';
|
html += '<td><input type="text" id="condtion-value'+index+'" name="'+index+'" tag="value" class="layui-input td-input"></td>';
|
html += '<td><button class="layui-btn layui-btn-danger" onclick="delCondtion('+index+')">删除</button></td>';
|
html += '</tr>';
|
$("#tbodyList2").append(html);
|
|
var divId1 = "condtion-devId"+index;
|
renderDeviceList(divId1,it.devId);
|
$("#condtion-devId"+index).val(it.devId);
|
|
var divId2 = "condtion-devChn"+index;
|
renderPassCode(it.devId,it.devChn,divId2);
|
$("#condtion-devChn"+index).val(it.devChn);
|
|
$("#condtion-flag"+index).val(it.flag);
|
$("#condtion-value"+index).val(it.value);
|
|
});
|
|
$(".condtion .td-condtion-devId").change(function () {
|
var i = $(this).attr("name");
|
// var cur = condtions[i];
|
var devId = $(this).val();
|
var divId = "condtion-devChn"+i;
|
renderPassCode(devId,0,divId);
|
});
|
|
$(".condtion .td-input").change(function () {
|
var i = $(this).attr("name");
|
var tag = $(this).attr("tag");
|
var cur = condtionCur[i];
|
cur[tag] = $("#condtion-"+tag+i).val();
|
condtionCur[i] = cur;
|
});
|
}
|
}
|
|
function addCondtion() {
|
var index = 0;
|
if(condtionCur && condtionCur.length){
|
index = condtionCur.length;
|
}
|
var it = {
|
devId:"",
|
devChn:"",
|
flag:"",
|
value:"",
|
};
|
condtionCur.push(it);
|
|
renderCondtion(condtionCur);
|
|
}
|
|
function delCondtion(i) {
|
condtionCur.splice(i,1);
|
renderCondtion(condtionCur);
|
}
|
|
//关闭
|
function closeBtn() {
|
var cur = list[indexTag];
|
if(condtionCur && condtionCur.length > 0){
|
var arr = [];
|
for(var i = 0;i<condtionCur.length;i++){
|
var obj = {};
|
obj.devId = $("#condtion-devId"+i).val();
|
obj.devChn = $("#condtion-devChn"+i).val();
|
obj.flag = $("#condtion-flag"+i).val();
|
obj.value = $("#condtion-value"+i).val();
|
arr.push(obj);
|
}
|
condtionCur = arr;
|
cur.condtion = condtionCur;
|
}
|
condFlag = $("#condFlag").val();
|
if(condFlag != "-1"){
|
cur.condFlag = condFlag;
|
}
|
$("#condFlag"+indexTag).val(cur.condFlag);
|
list[indexTag] = cur;
|
condtionCur = [];
|
indexTag = 0;
|
condFlag = "-1";
|
|
// console.log(list);
|
|
layer.closeAll();
|
}
|
</script>
|
</body>
|
|
<!--弹出框-->
|
<div id="dialog-device" class="pophide" style="width:100%; display: none;overflow: hidden;">
|
<div class="i-popBox-tit layui-clear bor-b-1">
|
<div class="pdgxq-H">
|
<h3><i></i>条件配置</h3>
|
</div>
|
</div>
|
|
<div class="popCon">
|
|
<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="padding: 5px 0 5px 0;">
|
<div style="margin: 0 20px;">
|
<div class="layui-col-md4">
|
<div class="layui-inline">
|
<div class="layui-input-block btns" style="margin-left: 15px">
|
<button class="layui-btn layui-btn-normal"
|
onclick="addCondtion()">新增
|
</button>
|
<button class="layui-btn layui-btn-warm"
|
onclick="closeBtn()">关闭
|
</button>
|
</div>
|
</div>
|
</div>
|
<div class="layui-col-md1" style="color: #ffffff;font-size: 16px;line-height: 40px;">
|
条件关系：
|
</div>
|
<div class="layui-col-md2" style="line-height: 40px;">
|
<select lay-ignore="" id="condFlag" class="layui-input td-input">
|
<option value="1" selected>与</option>
|
<option value="0">或</option>
|
</select>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="layui-col-lg7 layui-col-md7">
|
<div class="pdgxq-m1-right pdgxq-m1-box">
|
<div class="pdgxq-table jmkt-table-wrap">
|
<i class="i"></i>
|
<div class="pdgxq-table-box" style="height: 550px;">
|
<div class="table-thead">
|
<table class="layui-table pdgxq-table1" lay-skin="nob">
|
<colgroup>
|
<col width="5%">
|
<col width="15%">
|
<col width="15%">
|
<col width="15%">
|
<col width="15%">
|
<col>
|
</colgroup>
|
<thead>
|
<tr>
|
<th>序号</th>
|
<th>设备名称</th>
|
<th>监测通道</th>
|
<th>条件判断</th>
|
<th>判断阈值</th>
|
<th>操作</th>
|
</tr>
|
</thead>
|
</table>
|
</div>
|
<div class="table-tbody" style="height: 470px;">
|
<table class="layui-table pdgxq-table1" lay-skin="nob">
|
<colgroup>
|
<col width="5%">
|
<col width="15%">
|
<col width="15%">
|
<col width="15%">
|
<col width="15%">
|
<col>
|
</colgroup>
|
<tbody id="tbodyList2">
|
<!-- <tr>-->
|
<!-- <td>-->
|
<!-- 1-->
|
<!-- </td>-->
|
<!-- <td>-->
|
<!-- <select lay-ignore="" name="devChn" class="layui-input td-input" name='level'>-->
|
<!-- <option value="">请选择</option>-->
|
<!-- </select>-->
|
<!-- </td>-->
|
<!-- <td>-->
|
<!-- <select lay-ignore="" name="devChn" class="layui-input td-input" name='level'>-->
|
<!-- <option value="">请选择</option>-->
|
<!-- </select>-->
|
<!-- </td>-->
|
<!-- <td>-->
|
<!-- <select lay-ignore="" name="devChn" class="layui-input td-input" name='level'>-->
|
<!-- <option value="">请选择</option>-->
|
<!-- </select>-->
|
<!-- </td>-->
|
<!-- <td>-->
|
<!-- <input type="text" class="layui-input td-input">-->
|
<!-- </td>-->
|
<!-- <td>-->
|
<!-- <button style="height: 29px;line-height: 29px;"-->
|
<!-- class="layui-btn layui-btn-danger" >删除-->
|
<!-- </button>-->
|
<!-- </td>-->
|
<!-- </tr>-->
|
</tbody>
|
</table>
|
</div>
|
|
</div>
|
<div style="height: 15px;border-top: 1px solid #444d58;"></div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div><!--popCon end-->
|
</div>
|
</html>
|
