system-jibei/pqs9000/src/main/webapp/jspJS/area/steadystat.js

$(function () {
    getMonitorType();

    $('#bx').css('height', $(window).height() - 44);
    deleteOption();
    getDataByTime();

    $("#query").click(function () {
        getDataByTime();
    });
});

$("#helper").click(function () {
    toHelper("#jcdyxts");
});

function initPic(hours, days, data, name, xname, yname) {
    var myChart = echarts.init(document.getElementById('bx'));
    myChart.clear();

    data = data.map(function (item) {
        if (item[2] == null) {
            return [item[1], item[0], item[2] || '-', item[3], item[4], item[2] || '-'];
        } else {
            return [item[1], item[0], item[2] || '0', item[3], item[4], item[2] || '0'];
        }

    });

    var option = {
        tooltip: {
            position: 'top',
            formatter: function (param) {
                return days[param.data[1]] + '：' + param.data[2] + '%';
            }
        },
        title: {
            text: '稳态指标超标点占比',
            subtext: '统计类型：' + name,
            x: 'center'
        },
        animation: false,
        grid: {
            left: '6%',
            right: '4%',
            bottom: '15%'
        },
        xAxis: {
            type: 'category',
            data: hours,
            splitArea: {
                show: true
            },
            name: xname
        },
        yAxis: {
            type: 'category',
            data: days,
            splitArea: {
                show: true
            },
            name: yname,
            axisLabel: {
                formatter: function (value) {
                    if (name != '电压等级') {
                        value = value.toString();
                        var maxlength = 5;

                        if (value.length > maxlength) {
                            return value.substring(0, maxlength - 1) + '...';
                        } else {
                            return value;
                        }
                    } else {
                        return value;
                    }
                }
            }, triggerEvent: true
        },
        visualMap: {
            min: 0,
            max: 100,
            calculable: true,
            orient: 'horizontal',
            left: 'center',
            text: ['', '稳态指标超标点占比(%)'],
            inRange: {
                color: ['green', 'yellow', 'red']
            }
        },
        series: [{
            type: 'heatmap',
            data: data,
            label: {
                show: true
            },
            emphasis: {
                itemStyle: {
                    shadowBlur: 100,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }]
    };

    myChart.setOption(option);
    myChart.off('click');

    myChart.on('mouseover', function (params) {
        if (params.componentType == 'yAxis') {
            var tt = $('#tip');
            tt.html(params.value);
            tt.css("left", params.event.event.clientX + document.documentElement.scrollLeft + 10 + "px");
            tt.css("top", params.event.event.clientY + document.documentElement.scrollTop + 10 + "px");
            tt.css("display", "block");
        }
    });

    myChart.on('mouseout', function (params) {
        $('#tip').hide();
    });

    myChart.on('click', function (params) {
        if (params.componentType != 'yAxis') {
            layer.open({
                type: 2,
                title: '越限详情',
                maxmin: false,
                shadeClose: true, // 点击遮罩关闭层
                area: ['100%', '100%'],
                content: 'steadystatTable',
                scrollbar: false,
                success: function (layero, index) {
                    var time;
                    var type;
                    var array = gloableStart.split("-");
                    if (gloableDate == '(天数)') {
                        time = array[0] + "-" + array[1] + "-" + (params.data[4] < 10 ? "0" + params.data[4] : params.data[4]);
                        type = 0;
                    } else {
                        time = array[0] + "-" + (params.data[4] < 10 ? "0" + params.data[4] : params.data[4]) + "-" + array[2];
                        type = 1;
                    }

                    $(layero).find("iframe")[0].contentWindow.getSteadystatTable(params.data[3], time, type, gloableType);
                }
            });
        }
    });
}

var gloableStart;
var gloableType;
var gloableDate;

function getDataByTime() {
    var start = $("#startTime").val();
    gloableStart = start;
    var end = $("#endTime").val();
    var type = $("#total option:selected").val();
    gloableType = type;

    $.ajax({
        type: "POST",
        url: "/pqs9000/area/getDataByTime",
        data: {
            name: areaName,
            start: start,
            end: end,
            type: type

        },
        dataType: 'json',
        success: function (data) {
            if (data.code === 200) {
                console.log(data.body)
                initData(data.body);
            } else {
                initPic([], [], [], '', '', '');
            }
        }
    });
}

function initData(d) {
    var hours = [];
    var days = [];
    var data = [];


    for (var i = 0; i < d.length; i++) {
        days.push(d[i].name);

        for (var k = 0; k < d[i].list.length; k++) {
            if (i == 0) {
                hours.push($("#interval option:selected").text() == '月份' ? d[i].list[k].day : d[i].list[k].month);
            }

            var arr1 = [];
            arr1.push(i);
            arr1.push(k);
            arr1.push(d[i].list[k].target);
            arr1.push(d[i].index);
            arr1.push($("#interval option:selected").text() == '月份' ? d[i].list[k].day : d[i].list[k].month);
            data.push(arr1);
        }
    }

    var name = $("#total option:selected").text();
    var xname = ($("#interval option:selected").text() == '月份' ? '(天数)' : '(月份)');
    gloableDate = xname;
    var yname = "(" + $("#total option:selected").text() + ")";

    initPic(hours, days, data, name, xname, yname);
}

$("#interval").val("月份");

function deleteOption() {
    $("#interval option[value='周']").remove();
    $("#interval option[value='自定义']").remove();
}

let areaName;
function getMonitorType(){
    $.ajax({
        type: "POST",
        url: "/pqs9000/theme/getThemeInfo",
        async: false,
        data: {},
        dataType: 'json',
        success: function (data) {
            areaName = data.body.name;
            var name = data.body.name + "上报";
            loadColor = data.body.value;
            var option = $("<option value='3'>"
                + name + "</option>");
            $('#total').append(option);
        }
    })
}