411 lines
15 KiB
JavaScript
411 lines
15 KiB
JavaScript
let element, layer, table, util, dtree, form;
|
||
$(function () {
|
||
layui.extend({
|
||
dtree: '{/}../../js/dtree/dtree',
|
||
}).use(['element', 'layer', 'table', 'code', 'util', 'dtree', 'form'], function () {
|
||
element = layui.element;
|
||
layer = layui.layer;
|
||
table = layui.table;
|
||
util = layui.util;
|
||
dtree = layui.dtree;
|
||
form = layui.form;
|
||
dtree.on("node(demoTree)", function (obj) {
|
||
// layer.msg(JSON.stringify(obj.param));
|
||
generatePortal(obj.param.nodeId);
|
||
})
|
||
});
|
||
getTree();
|
||
generatePortal("1");
|
||
deviceStatus();
|
||
|
||
});
|
||
|
||
/**
|
||
* 获取设备树
|
||
*/
|
||
function getTree() {
|
||
$.ajax({
|
||
type: 'POST',
|
||
url: dataUrl + 'conditioning/getAirTreeData',
|
||
data: "",
|
||
dataType: 'json',
|
||
success: function (res) {
|
||
console.log(res);
|
||
const DTree = dtree.render({
|
||
elem: "#demoTree",
|
||
data: res.obj,
|
||
dataFormat: "list",
|
||
// url: "please input your url"
|
||
nodeIconArray: {"3": {"open": "dtree-icon-jian1", "close": "dtree-icon-jia1"}},
|
||
ficon: ["1", "-1"],
|
||
iconfont: ["dtreefont", "layui-icon"],
|
||
iconfontStyle: [
|
||
{
|
||
snode: {
|
||
node: {
|
||
open: "",
|
||
close: ""
|
||
},
|
||
leaf: "dtree-icon-xinxipilu" //叶子节点
|
||
},
|
||
}
|
||
],
|
||
});
|
||
}
|
||
})
|
||
}
|
||
|
||
/**
|
||
* 设备状态
|
||
*/
|
||
function deviceStatus() {
|
||
$.ajax({
|
||
type: 'GET',
|
||
url: dataUrl + 'conditioning/getAirStatus',
|
||
data: "",
|
||
dataType: 'json',
|
||
success: function (res) {
|
||
$("#totalNum").text(res.obj.totalNum);
|
||
$("#online").text(res.obj.online);
|
||
$("#offline").text(res.obj.offline);
|
||
$("#haveNo").text(res.obj.havaNo);
|
||
|
||
}
|
||
});
|
||
}
|
||
|
||
/**
|
||
年度用电情况
|
||
*/
|
||
//年度用电情况接口数据获取
|
||
function yearElect() {
|
||
$.ajax({
|
||
type: 'POST',
|
||
url: dataUrl + 'electricity/yearElect',
|
||
data: "",
|
||
dataType: 'json',
|
||
success: function (res) {
|
||
yearElects(res.obj.yearElect)
|
||
}
|
||
});
|
||
}
|
||
|
||
//年度用电情况ECharts
|
||
function yearElects(data) {
|
||
let yearChart = echarts.init(document.getElementById('year-chart'));
|
||
const payload = {
|
||
id: 'liquid-fill-5',
|
||
color: ['#1791ff', '#1791ff'],
|
||
data: {data: Number(data[0].totalElectricity)}
|
||
};
|
||
let yearElectData = payload.data.data;
|
||
const color = payload.color
|
||
|
||
yearOption = {
|
||
backgroundColor: 'transparent',
|
||
series: [
|
||
{
|
||
name: '水球图',
|
||
type: 'liquidFill',
|
||
radius: '95%',
|
||
center: ['50%', '50%'],
|
||
waveAnimation: 10, // 动画时长
|
||
amplitude: 5, // 振幅
|
||
// 注释上面2行, 并开启下面三行, 则关闭动画
|
||
// waveAnimation: false,
|
||
// animationDuration: 0,
|
||
// animationDurationUpdate: 0,
|
||
data: [0.55, 0.45],
|
||
itemStyle: {
|
||
//渐变色设置
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{
|
||
offset: 0,
|
||
color: color[0]
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: color[1]
|
||
}
|
||
])
|
||
},
|
||
color: {
|
||
type: 'linear',
|
||
x: 0,
|
||
y: 0,
|
||
x2: 1,
|
||
y2: 1,
|
||
colorStops: [
|
||
{
|
||
offset: 1,
|
||
color: color[0]
|
||
},
|
||
{
|
||
offset: 0,
|
||
color: color[1]
|
||
}
|
||
],
|
||
globalCoord: false
|
||
},
|
||
outline: {
|
||
show: true,
|
||
borderDistance: 0,
|
||
itemStyle: {
|
||
borderWidth: 0,
|
||
}
|
||
},
|
||
backgroundStyle: {
|
||
color: '#001c22'
|
||
},
|
||
label: {
|
||
color: '#ffffff',
|
||
insideColor: '#ffffff',
|
||
fontSize: 18,
|
||
lineHeight: 30,
|
||
formatter: params => {
|
||
var reg = new RegExp(/^\d+(?:\.\d{0,2})?/)
|
||
return '' + data[0].totalElectricity.match(reg) + '\n' + '空调高负荷'
|
||
}
|
||
}
|
||
}
|
||
]
|
||
}
|
||
yearChart.setOption(yearOption);
|
||
}
|
||
|
||
function generatePortal(floor) {
|
||
$.ajax({
|
||
type: 'POST',
|
||
url: dataUrl + 'conditioning/getNodeDevice',
|
||
data: {
|
||
floor: floor
|
||
},
|
||
dataType: 'json',
|
||
success: function (res) {
|
||
generateContent(res.obj)
|
||
}
|
||
});
|
||
}
|
||
|
||
//动态生成空调状态
|
||
function generateContent(data) {
|
||
$(".right>.right-down").empty();
|
||
const totalItems = data.length; // 假设 data 是一个 JSON 数组
|
||
const container = document.getElementById('container');
|
||
const itemsPerContent = 5; // 每个内容块显示的项数
|
||
const totalContents = Math.ceil(totalItems / itemsPerContent);
|
||
|
||
// 遍历总内容块
|
||
for (let contentIndex = 0; contentIndex < totalContents; contentIndex++) {
|
||
const contentDiv = document.createElement('div');
|
||
contentDiv.className = 'content';
|
||
|
||
// 遍历每个内容块里的项
|
||
for (let itemIndex = 0; itemIndex < itemsPerContent; itemIndex++) {
|
||
const itemNumber = contentIndex * itemsPerContent + itemIndex;
|
||
if (itemNumber >= totalItems) break; // 如果已经到达数据末尾，则停止
|
||
|
||
const device = data[itemNumber]; // 获取对应的设备数据
|
||
|
||
const contentOnDiv = document.createElement('div');
|
||
contentOnDiv.className = 'content-on';
|
||
|
||
// 创建标题上部分
|
||
const titleUpDiv = document.createElement('div');
|
||
titleUpDiv.classList.add('title', 'title-up');
|
||
if (device.status === '1') {
|
||
titleUpDiv.style.backgroundImage = 'url(../../img/air/greenBar.png)';
|
||
} else {
|
||
titleUpDiv.style.backgroundImage = 'url(../../img/air/yellowBar.png)';
|
||
}
|
||
titleUpDiv.innerHTML = `
|
||
<span id="item-${itemIndex * 6 + 1}" style="margin-left: 12%;">${device.name}</span>
|
||
<div id="${device.id}-${device.status}" class="icon-button icon-1" style="margin-left: 33%;" onclick="control(event)"></div>
|
||
<div class="icon-button icon-2" style="margin-left: 5%;" onclick="toggleVisibility(event)"></div>
|
||
`;
|
||
|
||
// 创建标题下部分
|
||
const titleDownDiv = document.createElement('div');
|
||
titleDownDiv.classList.add('title', 'title-down');
|
||
if (device.status === '1') {
|
||
titleDownDiv.style.backgroundImage = 'url(../../img/air/greenFrame.png)';
|
||
} else {
|
||
titleDownDiv.style.backgroundImage = 'url(../../img/air/yellowFrame.png)';
|
||
}
|
||
titleDownDiv.innerHTML = `
|
||
<div class="distance">当前模式：<span id="item-${itemIndex * 6 + 2}">${device.controlMode}</span></div>
|
||
<div class="distance">运行温度：<span id="item-${itemIndex * 6 + 3}">${device.temp}℃</span></div>
|
||
<div class="distance">设备类型：<span id="item-${itemIndex * 6 + 6}">${device.type}</span></div>
|
||
`;
|
||
|
||
// <div className="distance">夏季阈值：<span id="item-${itemIndex * 6 + 4}">${device.summerThreshold}</span></div>
|
||
// <div className="distance">冬季阈值：<span id="item-${itemIndex * 6 + 5}">${device.winterThreshold}</span></div>
|
||
|
||
// 将上下部分的内容添加到 `contentOnDiv` 中
|
||
contentOnDiv.appendChild(titleUpDiv);
|
||
contentOnDiv.appendChild(titleDownDiv);
|
||
|
||
// 将每个 `contentOnDiv` 添加到 `contentDiv` 中
|
||
contentDiv.appendChild(contentOnDiv);
|
||
}
|
||
|
||
// 将每个 `contentDiv` 添加到容器中
|
||
container.appendChild(contentDiv);
|
||
}
|
||
}
|
||
|
||
function toggleVisibility(event) {
|
||
const contentOnDiv = event.target.closest('.content-on');
|
||
const titleDownDiv = contentOnDiv.querySelector('.title-down');
|
||
titleDownDiv.style.display = titleDownDiv.style.display === 'none' ? 'block' : 'none';
|
||
const iconButton = event.target;
|
||
if (iconButton.classList.contains('icon-2')) {
|
||
iconButton.classList.remove('icon-2');
|
||
iconButton.classList.add('icon-3');
|
||
} else {
|
||
iconButton.classList.remove('icon-3');
|
||
iconButton.classList.add('icon-2');
|
||
}
|
||
}
|
||
|
||
function control(event) {
|
||
const styleId = event.target.id;
|
||
const [id, deviceStatus] = styleId.split('-');
|
||
// 点击事件处理逻辑
|
||
if (deviceStatus === '1'){
|
||
localStorage.setItem("id", id);
|
||
var index = layer.open({
|
||
title: ['设备控制', 'color: #fff; cursor: move;background: transparent;float: left;'],
|
||
type: 2,
|
||
closeBtn: 2,
|
||
content: '../../page/airConditioner/airForm.html',
|
||
area: ["50%", "70%"],
|
||
maxmin: false
|
||
});
|
||
}else{
|
||
layer.msg("设备已关闭，无法进行操作！");
|
||
}
|
||
}
|
||
|
||
function thresholdValueClick() {
|
||
// var index = layer.open({
|
||
// title: ['阈值设定', 'color: #fff; cursor: move;background: transparent;float: left;'],
|
||
// type: 2,
|
||
// closeBtn: 2,
|
||
// content: '../../page/airConditioner/airConditionerSet.html',
|
||
// //content: '../../page/airConditioner/airThresholdValueForm.html',
|
||
// area: ["90%", "90%"],
|
||
// maxmin: false
|
||
// });
|
||
|
||
$.ajax({
|
||
type: 'POST',
|
||
url: dataUrl + 'conditioning/getAlreadySetTemperature',
|
||
data: {},
|
||
dataType: 'json',
|
||
success: function (res) {
|
||
layer.open({
|
||
// 基本层类型：0（信息框，默认）1（页面层）2（iframe层，也就是解析content）3（加载层）4（tips层）
|
||
type: 1,
|
||
title: '温度设定',
|
||
// 当type: 2时就是url
|
||
content:$("#updateSetDiv"),
|
||
// 宽高：如果是100%就是满屏
|
||
area: ['583px', '300px'],
|
||
// 坐标：auto（默认坐标，即垂直水平居中），具体当文档：https://www.layui.com/doc/modules/layer.html#offset
|
||
offset: 'auto',
|
||
// 按钮：按钮1的回调是yes（也可以是btn1），而从按钮2开始，则回调为btn2: function(){}，以此类推
|
||
btn: ['确定', '取消'],
|
||
// 关闭按钮：layer提供了两种风格的关闭按钮，可通过配置1和2来展示，如果不显示，则0
|
||
closeBtn: 1,
|
||
// 遮罩：默认：0.3透明度的黑色背景（'#000'）
|
||
shade: 0.3,
|
||
// 是否点击遮罩关闭：默认：false
|
||
shadeClose: false,
|
||
// 自动关闭所需毫秒：默认：0不会自动关闭
|
||
time: 0,
|
||
// 最大最小化：默认：false
|
||
maxmin: false,
|
||
// 固定：默认：true
|
||
fixed: true,
|
||
// 是否允许拉伸：默认：true
|
||
resize: true,
|
||
// 层叠顺序：默认：19891014，一般用于解决和其它组件的层叠冲突
|
||
zIndex: 19891014,
|
||
// 层弹出后的成功回调方法：layero前层DOM，index当前层索引
|
||
success: function(layero, index){
|
||
var obj = res.obj;
|
||
if(obj !=null && obj.length>0){
|
||
for(let i=0;i<obj.length;i++){
|
||
let ii = obj[i];
|
||
let id = ii.id;
|
||
let k = ii.k;
|
||
let val = ii.val;
|
||
if(k == 'sum'){
|
||
$("#summerMax").val(val);
|
||
}else{
|
||
$("#winterMin").val(val);
|
||
}
|
||
|
||
}
|
||
}
|
||
},
|
||
// 第一个按钮事件，也可以叫btn1
|
||
yes: function (index, layero) {
|
||
var winterMin=$("#winterMin").val();
|
||
var summerMax=$("#summerMax").val();
|
||
if(""==winterMin||""==summerMax){
|
||
layer.msg("请设定温度！");
|
||
return;
|
||
}
|
||
// // updateSetValue(winterMin,summerMax,updateSetType);
|
||
updateAlreadySetTemperature(winterMin,summerMax);
|
||
layer.close(index);
|
||
},
|
||
btn2: function (index, layero) {
|
||
layer.close(index);
|
||
},
|
||
// 右上角关闭按钮触发的回调：默认会自动触发关闭。如果不想关闭，return false即可
|
||
cancel: function(index, layero){
|
||
// if(layer.confirm('确定要关闭么')){ //只有当点击confirm框的确定时，该层才会关闭
|
||
// layer.close(index);
|
||
// }
|
||
layer.close(index);
|
||
return false;
|
||
},
|
||
// 层销毁后触发的回调：无论是确认还是取消，只要层被销毁了，end都会执行，不携带任何参数。
|
||
end: function(){
|
||
},
|
||
// 最大化后触发的回调：携带一个参数，即当前层DOM
|
||
full: function(layero){
|
||
},
|
||
// 最小化后触发的回调：携带一个参数，即当前层DOM
|
||
min: function(layero){
|
||
},
|
||
// 还原后触发的回调：携带一个参数，即当前层DOM
|
||
restore: function(layero){
|
||
},
|
||
});
|
||
}
|
||
});
|
||
}
|
||
|
||
function updateAlreadySetTemperature(winterT,summerT){
|
||
$.ajax({
|
||
type: 'POST',
|
||
url: dataUrl + 'conditioning/updateAlreadySetTemperature',
|
||
data: {
|
||
"summerTemperature":summerT,"winterTemperature": winterT
|
||
},
|
||
dataType: 'json',
|
||
success: function (res) {
|
||
//initSet();
|
||
layer.closeAll();
|
||
}
|
||
});
|
||
}
|
||
|
||
function statisticsClick() {
|
||
window.parent.jump('', 15);
|
||
}
|