$(() => {

    //班组计划统计
    // onDutyPlan(1234, 1202, 33);
    $.getJSON('/foamBox/getTeamStatisticsJson', function (result) {
        onDutyPlan( result.planAmount, result.actualAmount, result.differenceAmount,)
    });

    //设备运行状态
    $.getJSON(`/foamBox/getRunStatusJson?ids=${ids}`, function (result) {
        deviceStatus(result);
    });
   

    //库存统计
    $.getJSON(`/foamBox/getMaterialStoreJson`, function (result) {
        threeDimensionalCylindrical(result, document.getElementById("inventoryStatistics"));
    });

    //按型号统计产量
    $.getJSON('/foamBox/getMaterialProdutionJson', function (result) {
        horizontalBarChart(result, document.getElementById("statisticalOutputByModel"));
    });

    //小时产量
    $.getJSON('/foamBox/getHourProdutionJson', function (result) {
        brokenLineAreaDiagram(result, document.getElementById("hourlyOutputStatistics"));
    });

    //发泡参数
    multipleBrokenLineAreaDiagram(null, document.getElementById("foamingParameters"));

    // 模具温度1

    const temperature = (res, ids) => {
        let mycharts = echarts.init(ids);


        let option = {
            grid: {
                top: '10%',
                left: '6%',
                right: '6%',
                bottom: '0',
                containLabel: true
            },
            xAxis: [
                {
                    interval: 0,
                    type: 'category',
                    data: ['066', '066', '066', '066', '066'],
                    axisPointer: {
                        type: 'shadow'
                    }
                }
            ],
            yAxis: [
                {
                    splitLine: {
                        show: false,
                    },
                    type: 'value',
                    name: 'Precipitation',
                    min: 0,
                    max: 50,
                    interval: 10,
                    axisLabel: {
                        formatter: '{value} ml'
                    }
                },
                {
                    splitLine: {
                        show: false,
                    },
                    type: 'value',
                    name: 'Temperature',
                    min: 0,
                    max: 5,
                    interval: 1,
                    axisLabel: {
                        formatter: '{value} °C'
                    }
                }
            ],
            series: [
                {
                    name: 'Evaporation',
                    type: 'bar',
                    tooltip: {
                        valueFormatter: function (value) {
                            return value + ' ml';
                        }
                    },
                    data: [
                        2.0, 4.9, 7.0, 23.2, 25.6
                    ]
                },
                {
                    name: 'Precipitation',
                    type: 'bar',
                    tooltip: {
                        valueFormatter: function (value) {
                            return value + ' ml';
                        }
                    },
                    data: [
                        2.6, 5.9, 9.0, 26.4, 28.7
                    ]
                },
            ]
        };

        mycharts.setOption(option);
        $(window).resize(mycharts.resize);
    }
    
    $.getJSON('/foamBox/getStatisticalOutputByModel', function (result) {
        temperature(result, document.getElementById("temperatureOne"));
    });
    $.getJSON('/foamBox/getStatisticalOutputByModel', function (result) {
        temperature(result, document.getElementById("temperatureTwo"));
    });
    $.getJSON('/foamBox/getStatisticalOutputByModel', function (result) {
        temperature(result, document.getElementById("temperatureThree"));
    });
    $.getJSON('/foamBox/getStatisticalOutputByModel', function (result) {
        temperature(result, document.getElementById("temperatureFour"));
    });
    

})

const deviceStatus = (statusArray) => {
    let info = `<table style="width: 100%;height:100%;">
            <tr style="width: 100%;">
                <td style="border:0px solid red;text-align:center;"><img src="../../img/foamBox/${statusArray[0] == 0 ? "deviceopen.png" : "deviceclose.png"}" style="width: 30px;height: 30px;"/></td>
                <td style="border:0px solid red;text-align:center;"><img src="../../img/foamBox/${statusArray[1] == 0 ? "deviceopen.png" : "deviceclose.png"}" style="width: 30px;height: 30px;"/></td>
                <td style="border:0px solid red;text-align:center;"><img src="../../img/foamBox/${statusArray[2] == 0 ? "deviceopen.png" : "deviceclose.png"}" style="width: 30px;height: 30px;"/></td>
                <td style="border:0px solid red;text-align:center;"><img src="../../img/foamBox/${statusArray[3] == 0 ? "deviceopen.png" : "deviceclose.png"}" style="width: 30px;height: 30px;"/></td>
                <td style="border:0px solid red;text-align:right;padding-right: 12px;"><img src="../../img/foamBox/${statusArray[4] == 0 ? "deviceopen.png" : "deviceclose.png"}" style="width: 30px;height: 30px;"/></td>
                <td style="border:0px solid red;text-align:right;"><img src="../../img/foamBox/${statusArray[5] == 0 ? "deviceopen.png" : "deviceclose.png"}" style="width: 30px;height: 30px;"/></td>
            </tr>
        </table>`;

    $(".foamingLineRunStatus table tr").append(info);

}