$(() => {
    let fun = () => {
        //设备OEE统计
        $.getJSON('/tankShellDevice/getOeeStatistics', function (result) {
            OEEStatistics(result, document.getElementById("OEEStatistics"));
        });

        //设备故障排名
        $.getJSON('/tankShellDevice/getStatisticalOutputByModel', function (result) {
            equipmentFailure(result, document.getElementById("equipmentFailure"));
        });

        //loss
        $.getJSON('/tankShellDevice/getLossStatistics', function (result) {
            loss(result, document.getElementById("loss"));
        });

        //设备产量能耗对比
        $.getJSON('/tankShellDevice/getEnergyConsumption', function (result) {
            energyConsumption(result, document.getElementById("energyConsumption"));
        });

        /*数据信息*/
        $.getJSON('/tankShellDevice/getDataInformation', function (result) {
            dataInformationFunction(result)
        });
        $.getJSON('/tankShellDevice/getRunParameters', function (result) {
            console.log(result);
            energyProductionStatisticsFunction(result)
            runParamStatisticsFunction(result)
            $("#lossParam").text(result[8]);

            $("#meterParam").text(result[9]);
        });
        return setTimeout(fun,10000)
    }
    fun()

    const tableRes = {}
    //设备信息
    const getTable = () => {
        $.ajax({
            url: '/tankShellDevice/getDeviceParameterValue',
            type: 'GET',
            dataType: 'JSON',
            success: function (res) {
                if (res.length === tableRes.data?.length) return
                $('#productionPlan').remove()
                $('.scrollTable').html('<div class="productionPlan" id="productionPlan"></div>')
                tableRes.data = res.map(val => [val.prameterName, val.prameterValue, val.createTime,])
                tableRes.header = ['参数名称', '当前值', '时间',]
                dynamicTable({
                    el: '#productionPlan',
                    rowNum: 5,
                    timeout: 0,
                    header: tableRes.header,
                    data: tableRes.data,
                    index: false,
                    fontColor: '#B4B7BF ',
                    indexBGC: '#86F3FF',
                    headerBGC: 'rgba(8,36,75,0.2)',
                    oddRowBGC: 'rgba(8,36,75,0.2)',
                    evenRowBGC: 'rgba(6,25,57,0.2)',
                    colWidth: ['70%', '15%', '15%',]
                });
            },
            error: function (e) {
                console.log(e)
            }
        });
    }
    getTable()
    setInterval(() => {
        getTable()
    }, 10000);
    tableAnimation('#productionPlan')
})

/*数据信息*/
const dataInformationFunction = (statusArray) => {
    let res = statusArray[0]
    console.log(res);
    let info = `<table style="position: absolute;top: 8%;width: 100%;height:100%;">
            <tr style="width: 100%; height: 50%;">
                <td style="border:0px solid red;text-align:center;width: 50%;"><i ${res.deviceStatus == 1 ? 'style="color:rgb(107, 253, 110);"' : 'style="color: rgb(255, 105, 106);"'}  class="fa-regular ${res.deviceStatus == 1 ? "fa-circle-check" : "fa-circle-xmark"}"></i>${res.deviceStatus == 1 ? `<span style="color:rgb(107, 253, 110);margin-left: 10px">正常</span>` : `<span style="color:rgb(255, 105, 106);margin-left: 10px">异常</span>`}</td>
                <td style="border:0px solid red;text-align:center;width: 50%;color: #FFEF76;"> ${test(res.devicePower,1000)} kW</td>
            </tr>
            <tr style="width: 100%; height: 50%;">
            
                <td style="border:0px solid red;text-align:center;width: 50%;color: #59B2F6;"> ${test(res.deviceEnergy,100)}kW·h</td>
                <td style="border:0px solid red;text-align:center;width: 50%;color: red;">0</td>
            </tr>
        </table>`;

    $("#dataInformation").html(info);

}

const test = (number,flag) =>{
    var info = Math.floor(number / flag);
    return info.toFixed(2);
}

/*能耗产量统计*/
const energyProductionStatisticsFunction = (statusArray) => {
    let info = `<table style="position: absolute;top: 8%;width: 100%;height:100%;">
            <tr style="width: 100%; height: 100%;">
                <td style="font-size:175%;border:0px solid red;width: 25%;text-align:center;color: #59B2F6;">${statusArray[0]}</td>
                <td style="font-size:175%;border:0px solid red;width: 25%;text-align:center;color: #63F659;">${statusArray[1]}</td>
                <td style="font-size:175%;border:0px solid red;width: 25%;text-align:center;color: #59B2F6;">${statusArray[2]}</td>
                <td style="font-size:175%;border:0px solid red;width: 25%;text-align:center;color: #FF696A;">${statusArray[3]}</td>
            </tr>
        </table>`;

    $("#energyProductionStatistics").html(info);
}

const runParamStatisticsFunction = (statusArray) => {
    console.log(statusArray)
    let info = `
        <div style="font-size:175%;left: 9%;color:#59B2F6">${statusArray[4]}</div>
        <div style="font-size:175%;left: 35%;color:#FF696A">${statusArray[5]}</div>
        <div style="font-size:175%;left: 61%;color:#63F659">${statusArray[6]}</div>
        <div style="font-size:175%;left: 87%;color:#FF696A">${statusArray[7]}</div>
    `;

    $("#runParamStatistics").append(info);
}