301 lines
10 KiB
JavaScript
301 lines
10 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);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
年度用电情况
|
|||
|
|
*/
|
|||
|
|
//年度用电情况接口数据获取
|
|||
|
|
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 + 4}">${device.summerThreshold}</span></div>
|
|||
|
|
<div class="distance">冬季阈值：<span id="item-${itemIndex * 6 + 5}">${device.winterThreshold}</span></div>
|
|||
|
|
<div class="distance">设备类型：<span id="item-${itemIndex * 6 + 6}">${device.type}</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/airThresholdValueForm.html',
|
|||
|
|
area: ["50%", "70%"],
|
|||
|
|
maxmin: false
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function statisticsClick() {
|
|||
|
|
window.parent.jump('', 15);
|
|||
|
|
}
|