jyyhq/witDisplay/js/airConditioner/electricityConsumption.js

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);
}