var parent = window.parent;
|
var layer;
|
|
(function () {
|
|
layui.use(['laypage', 'layer', 'laydate'], function () {
|
layer = layui.layer;
|
});
|
|
var svg = document.querySelector('#menu')
|
var items = svg.querySelectorAll('.item')
|
var trigger = document.querySelector('.menu-trigger')
|
var open = false
|
var angle = 45
|
var playComplete = true
|
|
function show() {
|
open = true
|
var tl = new TimelineLite()
|
tl.to(items, 0.2, {scale: 1, ease: Back.easeOut.config(4)}, 0.1)
|
|
for (var i = 0; i < items.length; i++) {
|
tl.to(items[i], 0.7, {rotation: -i * angle + 'deg', ease: Bounce.easeOut}, 0.35)
|
}
|
|
trigger.classList.add('active')
|
svg.style.pointerEvents = 'auto'
|
|
// close the nav when document is clicked
|
document.addEventListener('click', hide)
|
};
|
|
function hide() {
|
open = false
|
var tl = new TimelineLite()
|
for (var i = 0; i < items.length; i++) {
|
tl.to(items[i], 0.3, {rotation: 0, ease: Circ.easeOut}, 0.05)
|
}
|
|
tl.to(items, 0.3, {scale: 0, ease: Back.easeIn}, 0.3)
|
tl.call(function () {
|
trigger.classList.remove('active')
|
})
|
svg.style.pointerEvents = 'none'
|
|
// remove document click event
|
document.removeEventListener('click', hide)
|
};
|
|
function toggle(evn) {
|
if (!event) var event = window.event
|
event.stopPropagation()
|
open ? hide() : show()
|
};
|
|
// set up event handler
|
trigger.onclick = toggle
|
svg.onclick = function (e) {
|
e.stopPropagation()
|
};
|
|
// 更新按钮点击
|
document.querySelector('.circle-menu .update').onclick = function () {
|
layer.msg("暂不支持该功能！");
|
|
};
|
|
// 透传按钮点击
|
document.querySelector('.circle-menu .passthrough').onclick = function () {
|
layer.msg("暂不支持该功能！");
|
// layer.open({
|
// type: 1,
|
// skin: 'circle-menu-layer layer-passthrough-wrap',
|
// shade: 0.65,
|
// resize: false,
|
// move: false,
|
// area: ['600px', '500px'],
|
// title: '命令透传',
|
// content:
|
// '<div class="layer-passthrough">' +
|
// '<label>响应信息</label>' +
|
// '<div class="layer-passthrough__str notedit" id="orderResposeStr">不可编辑文本</div>' +
|
// '<label>输入指令：</label>' +
|
// '<div class="layer-passthrough__str"><textarea placeholder="请输入“透传指令”" id="tranValue"></textarea></div>' +
|
// '</div>'
|
// ,
|
// btn: ['透传', '关闭'],
|
// btnAlign: 'c',
|
// yes: function () {
|
// transCommand(deviceId);
|
// },
|
// btn2: function () {
|
// layer.closeAll();
|
// }
|
// });
|
}
|
|
// 动作按钮点击
|
document.querySelector('.circle-menu .action').onclick = function () {
|
console.log(category);
|
// renderActionInfo();
|
if(category == "2002" || category == "2003" || category == "2017"){
|
//layer.alert("暂不支持远程操作！");
|
// loadDeviceActionList(deviceId, companyId);
|
renderActionInfo();
|
}else {
|
layer.msg("暂不支持该功能！");
|
}
|
};
|
|
// 定时按钮点击
|
document.querySelector('.circle-menu .timing').onclick = function () {
|
layer.msg("暂不支持该功能！");
|
// layer.open({
|
// type: 1,
|
// skin: 'circle-menu-layer layer-timing-wrap',
|
// shade: 0.65,
|
// resize: false,
|
// move: false,
|
// area: ['600px', '450px'],
|
// title: '定时信息',
|
// content: "<table class=\"layui-table layer-timing\" style='color: #FFFFFF'>" +
|
// "<thead>" +
|
// "<tr>" +
|
// "<th>定时器说明</th>" +
|
// "<th>动作名称</th>" +
|
// "</tr>" +
|
// "</thead>" +
|
// "<tbody>" +
|
//
|
// // "<tr>\n" +
|
// // "<td>每天下午17：30分执行</td>" +
|
// // "<td>关闭</td>" +
|
// // "</tr>" +
|
// // "<tr>" +
|
// // "<td>每天下午17：30分执行</td>" +
|
// // "<td>关闭</td>" +
|
// // "</tr>" +
|
// // "<tr>" +
|
// // "<td>每天下午17：30分执行</td>" +
|
// // " <td>关闭</td>" +
|
// // " </tr>" +
|
//
|
// "</tbody>" +
|
// "</table>",
|
// btn: ['关闭'],
|
// btnAlign: 'c',
|
// yes: function () {
|
// layer.closeAll();
|
// }
|
// });
|
}
|
|
})();
|
|
|
|
executeAction = function(actionId,newValue) {
|
layer.msg("开始执行动作……");
|
var data = {"deviceId": deviceId, "actionId": actionId, "newValue":newValue};
|
$.ajax({
|
type: 'POST',
|
url: '../../basic/device/control/do-action',
|
dataType: 'JSON',
|
contentType: 'application/json',
|
data: JSON.stringify(data),
|
success: function (result) {
|
layer.close(1);
|
if ("0000" == result.code) {
|
layer.msg("动作指令发送成功……");
|
} else {
|
layer.msg(result.msg);
|
}
|
}
|
});
|
};
|
|
//根据业务设备ID更新监控信息
|
function queryAttr(deviceId) {
|
var data = {"deviceId": deviceId};
|
$.ajax({
|
type: 'POST',
|
url: '../../basic/device/control/query-attr',
|
dataType: 'JSON',
|
contentType: 'application/json',
|
data: JSON.stringify(data),
|
success: function (result) {
|
// console.log(result);
|
layer.close(1);
|
if ("0000" == result.code) {
|
layer.msg("指令发送成功……");
|
} else {
|
layer.msg(result.msg);
|
}
|
}
|
});
|
};
|
//根据业务设备ID更新监控信息
|
function transCommand(deviceId) {
|
var tranValue = $("#tranValue").val();
|
var data = {"deviceId": deviceId,"tranValue":tranValue};
|
$.ajax({
|
type: 'GET',
|
url: 'control/trans-command',
|
dataType: 'JSON',
|
contentType: 'application/json',
|
data: data,
|
success: function (result) {
|
$("#orderResposeStr").html(JSON.stringify(result));
|
}
|
});
|
};
|
function loadDeviceActionList(deviceId, companyId) {
|
var data = {"companyId": companyId, "deviceId": deviceId};
|
$.ajax({
|
type: 'POST',
|
url: '../../basic/device/control/list-action',
|
dataType: 'JSON',
|
contentType: 'application/json',
|
data: JSON.stringify(data),
|
success: function (result) {
|
if (result.code != "0000") {
|
layer.alert(result.msg);
|
return;
|
}
|
var list = result.data;
|
renderActionButton(list);
|
}
|
});
|
}
|
|
function renderActionButton(list) {
|
var parent = window.parent;
|
var config = {
|
type: 1,
|
skin: 'circle-menu-layer layer-action-wrap',
|
shade: 0.65,
|
resize: false,
|
move: true,
|
area: ['600px', '400px'],
|
title: '设备动作',
|
content:
|
'<div class="layer-action">' +
|
|
'<div class="layer-action__btns">' +
|
'<span class="layer-action__btn">动作1</span>' +
|
'<span class="layer-action__btn">动作2</span>' +
|
'<span class="layer-action__btn">动作3</span>' +
|
'</div>' +
|
|
'<div class="layer-action__btns">' +
|
'<span class="layer-action__btn">动作4</span>' +
|
'<span class="layer-action__btn">动作5</span>' +
|
'<span class="layer-action__btn">动作6</span>' +
|
'</div>' +
|
|
'<div class="layer-action__btns">' +
|
'<span class="layer-action__btn">动作7</span>' +
|
'<span class="layer-action__btn">动作8</span>' +
|
'<span class="layer-action__btn">动作9</span>' +
|
'</div>' +
|
|
'</div>'
|
,
|
btn: ['关闭'],
|
btnAlign: 'c',
|
yes: function () {
|
layer.closeAll();
|
}
|
};
|
|
//根据配置动作重新调整内容
|
var content = '<div class="layer-action">';
|
if (list) {
|
var height = 350;
|
var tag = 0;
|
list.forEach(function (data, index) {
|
if (tag == 0) {
|
if (index > 5) {
|
height += 64;
|
}
|
content += '<div class="layer-action__btns">';
|
}
|
if(companyId == "3126"){
|
content += '<span class="layer-action__btn layui-btn" ' +
|
'onClick="confirm(\'' + data.id + '\',\'' + data.passcode + '\',\'' + data.actionName + '\')">' + data.actionName + '</span>';
|
}else{
|
content += '<span class="layer-action__btn layui-btn" ' +
|
'onClick="executeAction(\'' + data.id + '\',\'' + data.targetValue + '\')">' + data.actionName + '</span>';
|
}
|
|
// content += '<span class="layer-action__btn layui-btn" ' +
|
// 'onClick="confirm(\'' + data.id + '\',\'' + data.passcode + '\',\'' + data.actionName + '\')">' + data.actionName + '</span>';
|
|
tag++;
|
if (tag == 3) {
|
content += '</div>';
|
tag = 0;
|
}
|
if (0 != tag && index == (list.length - 1)) {
|
content += '</div>';
|
}
|
});
|
content += '</div>';
|
config.content = content;
|
config.area = ["600px", (height + "px")];
|
layer.open(config);
|
}
|
}
|
|
|
function confirm(id, passcode, name) {
|
var content = "<div class=\"layer-action\" style='color: white;'>";
|
if(category == "2002" && passcode == "11"){
|
content += "<div class=\"layer-action__btns\"><span class=\"layer-action__btn\">请输入温度值</span></div>";
|
content += "<div class=\"layer-action__btns\"><input type='text' id='text' style='width: 200px;height: 30px;' placeholder='16~30'></div>";
|
content += "<div class=\"layer-action__btns\"><span class=\"layer-action__btn\" id='msg'></span></div>";
|
}else{
|
content += "<div class=\"layer-action__btns\"><span class=\"layer-action__btn\">确认执行操作“ " + name + " ”吗？</span></div>";
|
}
|
content += "</div>";
|
|
var config = {
|
type: 1,
|
skin: 'circle-menu-layer layer-action-confirm',
|
shade: 0.65,
|
resize: false,
|
move: true,
|
area: ['480px', '300px'],
|
title: '提示',
|
content: content,
|
btn: ['确认','关闭'],
|
btnAlign: 'c',
|
yes: function () {
|
if(category == "2002" && passcode == "11"){
|
var value = $("#text").val();
|
if(value >= 16 && value <= 30){
|
layer.closeAll();
|
$("#msg").text("");
|
executeAction(id,value);
|
}else {
|
$("#msg").text("提示：空调温度设定范围是16~30！");
|
}
|
}else {
|
layer.closeAll();
|
executeAction(id,0);
|
}
|
},
|
btn2: function(index, layero){
|
layer.close(1);
|
$("#msg").text("");
|
}
|
};
|
|
layer.open(config);
|
}
|
|
|
function renderActionInfo(){
|
action();
|
}
|
