var deptspic;
var deptsevent;
var voltagepic;
var voltageevent;
var sagpic;
var width;
var oTable;
var layer = null;

layui.use(['element', 'layer'], function () {
    document.getElementById("myTab").style.height = document.body.clientHeight
        - document.getElementById("myLi").offsetHeight - 3 + "px";

    var element = layui.element, layer = layui.layer;

    element.on('tab(tab)', function (data) {
        oTable.draw();
    });
});

function initGloableData() {
    deptspic = null;
    deptsevent = null;
    voltagepic = null;
    voltageevent = null;
}

$(function () {
    //切换时间控件为周选项
    $('#interval').val('周');
    var endTime = getEndTime();
    var interval = $("#interval").val();
    var startTime = getStartTime(interval, endTime);

    $("#startTime").val(startTime);
    $("#endTime").val(endTime);
    $("#next").attr("class", "njcn btn");
    $("#next").unbind();
    // 除了自定义其他时间间隔用户可以选择日期
    $("#startTime").prop("disabled", "true");
    $("#endTime").prop("disabled", "true");

    width = document.body.clientWidth;
    getData();

    // 查询按钮
    $("#query").click(function () {
        getData();
    });

    // 表格切换
    $("#table").click(function () {
        showDiv(true);
    });

    // 图表切换
    $("#pic").click(function () {
        showDiv(false);
    });

    // 报表导出
    $("#export").click(function () {
        $.post("/pqs9200/weeklyreport/createExcel", {
            "deptspic": deptspic.getDataURL('png'),
            "deptsevent": deptsevent.getDataURL('png'),
            "voltagepic": voltagepic.getDataURL('png'),
            "voltageevent": voltageevent.getDataURL('png'),
            "sagpic": sagpic.getDataURL('png')
        }, function () {
            window.location.href = "/pqs9200/weeklyreport/exportExcel";
        }, "json");
    });
});

function getData() {
    initGloableData();
    var startTime = $("#startTime").val();
    var endTime = $("#endTime").val();
    let statFlag = $('#allLineCheck').is(":checked")
    getPointData(startTime, endTime,statFlag); // 按部门统计
    getVoltageData(startTime, endTime,statFlag); // 按电压等级统计
    getSagData(startTime, endTime,statFlag);// 获取暂降严重度前五统计
    getSagReasonData(startTime, endTime,statFlag); // 获取暂降原因统计
    getSagEvents(startTime, endTime,statFlag);// 详细暂降事件
    getTenList(startTime, endTime,statFlag);// 暂降次数前十条
    getTenUpList(startTime, endTime,statFlag);// 暂升次数前十条
    getTenBreakList(startTime, endTime,statFlag);// 中断次数前十条
}

let detailData
function getSagEvents(startTime, endTime,statFlag) {
    $.post("/pqs9200/weeklyreport/getSagEvents", {
        "startTime": startTime,
        "endTime": endTime,
        "statFlag":statFlag
    }, function (data) {
        if (data.code === 200) {
            detailData = data.body
            startQuery();
        }
    });
}


//特殊处理，表头紧缩问题--start
var its = null;

function startQuery() {
    //实时刷新时间单位为毫秒
    its = setInterval('refreshQuery()', 100);

}

/* 刷新查询 */
function refreshQuery() {
    var width = $("#tableId").width();
    if (width > 100) {
        initSagEventsTable(detailData);
        window.clearInterval(its)
    }
}

//特殊处理，表头紧缩问题--end

function initSagEventsTable(data) {
    var obj = $('#tableId');
    var tableData = [];
    var offset = 0;

    $("#sagEvents").css('width', width - 25);

    while (offset < data.length) {
        var temp=[];
        temp.push("");
        temp.push(data[offset].strTime);
        temp.push(data[offset].plantInfo.nameGD);
        temp.push(data[offset].plantInfo.nameBD);
        temp.push(data[offset].plantInfo.namePoint);
        temp.push(data[offset].plantInfo.monitorVoltageLevel);
        temp.push(data[offset].plantInfo.monitorLoadType);
        temp.push(data[offset].plantInfo.objName);
        temp.push(data[offset].strEventValue);
        temp.push(data[offset].persistTime);
        temp.push(data[offset].sagTypeDes);
        switch (data[offset].waveType){
            case 0:
                temp.push("扰动");
            case 1:
                temp.push("暂降");
            case 2:
                temp.push("暂升");
            case 3:
                temp.push("中断");
            case 4:
                temp.push("其他");
            default:
                temp.push("录波");
        }
        tableData.push(temp);
        offset++;
    }
    var $height = $("body").height() * 0.70;
    var height = $(window).height() - 155;
    var length = Math.floor(height / 28);
    if (length < 1) {
        length = 1;
    }
    oTable = obj
        .DataTable({
            data: tableData,
            lengthChange: false,
            bDestroy: true,
            ordering: true,
            scrollY: $height,
            scrollCollapse: true,
            pageLength: length,
            'searching': false,
            language: {
                url: '/pqs9200/json/chine.json'
            },
            fnDrawCallback: function (oTable) {
                $("#tableId_paginate")
                    .append(
                        "<div style='float:right;padding-top:4px;padding-left:10px'>到第 <input type='text' id='changePage' class='input-text' style='width:50px;height:28px;'> 页  <button class='btn btn-primary' id='dataTable-btn'>确定</button></div>");
                var table = $("#tableId").dataTable();
                $('#dataTable-btn')
                    .click(
                        function (e) {
                            if ($("#changePage").val()
                                && $("#changePage").val() > 0) {
                                var redirectpage = $("#changePage")
                                    .val() - 1;
                            } else {
                                var redirectpage = 0;
                            }
                            table.fnPageChange(redirectpage);
                        });
            }
        });

    oTable.on('draw.dt', function () {
        oTable.column(0, {
            draw: 'applied',
        }).nodes().each(function (cell, i) {
            cell.innerHTML = i + 1;
        });
    }).draw();
}

function getTenList(startTime, endTime,statFlag) {
    $.post("/pqs9200/weeklyreport/getTenList", {
        "startTime": startTime,
        "endTime": endTime,
        "statFlag":statFlag
    }, function (data) {
        if (data.code === 200) {
            initTenList(data.body);
        }
    });
}
function initTenList(data) {
    var obj = $('#tableId2');
    var tableData = [];
    var offset = 0;

    $("#tenList").css('width', width - 25);

    while (offset < data.length) {
        var temp=[];
        temp.push("");
        temp.push(data[offset].name);
        temp.push(data[offset].loadType);
        temp.push(data[offset].powerSubstationName);
        temp.push(data[offset].objName);
        temp.push(data[offset].scale);
        temp.push(data[offset].subName);
        temp.push(data[offset].subScale);
        temp.push(data[offset].gdName);
        temp.push(data[offset].eventcount);
        tableData.push(temp);
        offset++;
    }
    oTable = obj
        .DataTable({
            data: tableData,
            lengthChange: false,
            bDestroy: true,
            ordering: true,
            'searching': false,
            language: {
                url: '/pqs9200/json/chine.json'
            }
        });

    oTable.on('draw.dt', function () {
        oTable.column(0, {
            draw: 'applied',
        }).nodes().each(function (cell, i) {
            cell.innerHTML = i + 1;
        });
    }).draw();
}

function getTenUpList(startTime, endTime,statFlag) {
    $.post("/pqs9200/weeklyreport/getTenUpList", {
        "startTime": startTime,
        "endTime": endTime,
        "statFlag":statFlag
    }, function (data) {
        if (data.code === 200) {
            initTenUpList(data.body);
        }
    });
}
function initTenUpList(data) {
    var obj = $('#tableId3');
    var tableData = [];
    var offset = 0;

    $("#tenUpList").css('width', width - 25);

    while (offset < data.length) {
        var temp=[];
        temp.push("");
        temp.push(data[offset].name);
        temp.push(data[offset].loadType);
        temp.push(data[offset].powerSubstationName);
        temp.push(data[offset].objName);
        temp.push(data[offset].scale);
        temp.push(data[offset].subName);
        temp.push(data[offset].subScale);
        temp.push(data[offset].gdName);
        temp.push(data[offset].eventcount);
        tableData.push(temp);
        offset++;
    }
    oTable = obj
        .DataTable({
            data: tableData,
            lengthChange: false,
            bDestroy: true,
            ordering: true,
            'searching': false,
            language: {
                url: '/pqs9200/json/chine.json'
            }
        });

    oTable.on('draw.dt', function () {
        oTable.column(0, {
            draw: 'applied',
        }).nodes().each(function (cell, i) {
            cell.innerHTML = i + 1;
        });
    }).draw();
}

function getTenBreakList(startTime, endTime,statFlag) {
    $.post("/pqs9200/weeklyreport/getTenBreakList", {
        "startTime": startTime,
        "endTime": endTime,
        "statFlag":statFlag
    }, function (data) {
        if (data.code === 200) {
            initTenBreakList(data.body);
        }
    });
}
function initTenBreakList(data) {
    var obj = $('#tableId4');
    var tableData = [];
    var offset = 0;

    $("#tenBreakList").css('width', width - 25);

    while (offset < data.length) {
        var temp=[];
        temp.push("");
        temp.push(data[offset].name);
        temp.push(data[offset].loadType);
        temp.push(data[offset].powerSubstationName);
        temp.push(data[offset].objName);
        temp.push(data[offset].scale);
        temp.push(data[offset].subName);
        temp.push(data[offset].subScale);
        temp.push(data[offset].gdName);
        temp.push(data[offset].eventcount);
        tableData.push(temp);
        offset++;
    }
    oTable = obj
        .DataTable({
            data: tableData,
            lengthChange: false,
            bDestroy: true,
            ordering: true,
            'searching': false,
            language: {
                url: '/pqs9200/json/chine.json'
            }
        });

    oTable.on('draw.dt', function () {
        oTable.column(0, {
            draw: 'applied',
        }).nodes().each(function (cell, i) {
            cell.innerHTML = i + 1;
        });
    }).draw();
}

function getSagReasonData(startTime, endTime,statFlag) {
    $.post("/pqs9200/weeklyreport/getSagReasonData", {
        "startTime": startTime,
        "endTime": endTime,
        "statFlag":statFlag
    }, function (data) {
        if (data.code === 200) {
            initSagReasonTable(data.body);
        }
    });
}

function initSagReasonTable(data) {
    // 初始化表格
    var sagReason = document.getElementById("sagReason");
    var code = '<table class="self-td table table-bordered styleFixd">';
    code += '<tr><td colspan = '
        + (data.length + 1)
        + ' class="text-center fontStyle1">暂态原因统计表</td></tr>';

    if (data.length === 0) {
        code += '<tr><td colspan = '
            + (data.length + 1)
            + ' class="text-center fontStyle2">暂无数据</td></tr>';
        code=filterXSS(code);
        sagReason.innerHTML = code + '</table>';

        var sagPic = document.getElementById("sagPic");
        sagPic.innerHTML = '';
        return;
    }

    code += '<tr><td class="text-center fontStyle0">暂态原因</td>';

    for (var i = 0; i < data.length; i++) {
        code += '<td class="text-center fontStyle0">'
            + data[i].name + '</td>';
    }

    code += '</tr>';
    code += '<tr><td class="text-center fontStyle0">次数</td>';

    for (var i = 0; i < data.length; i++) {
        code += '<td class="text-center">' + data[i].count + '</td>';
    }

    code += '</tr>';
    code += '<tr><td class="text-center fontStyle0">占比(%)</td>';

    for (var i = 0; i < data.length; i++) {
        code += '<td class="text-center">' + data[i].rate + '</td>';
    }

    code += '</tr>';
    code=filterXSS(code);
    sagReason.innerHTML = code + '</table>';

    // 初始化图表
    var picHeight = $(window).height() * 0.6;
    $("#sagPic").css('height', picHeight);
    $("#sagPic").css('width', width - 10);
    echarts.dispose(document.getElementById("sagPic"));
    var sagPic = echarts.init(document.getElementById("sagPic"));

    var reaArray = [];
    var valueArray = [];

    for (var i = 0; i < data.length; i++) {
        reaArray.push(data[i].name);
        var causeValue = {};
        causeValue.name = data[i].name;
        causeValue.value = data[i].count;
        valueArray.push(causeValue);
    }

    var option = {
        backgroundColor: '#fff',
        animation: false,
        title: {
            text: '暂态原因统计',
            x: 'center'
        },
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            orient: 'vertical',
            left: '25%',
            data: reaArray,
            top: 'middle'
        },
        series: [{
            name: '暂态原因',
            type: 'pie',
            radius: '70%',
            center: ['50%', '53%'],
            data: valueArray,
            itemStyle: {
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                },
                normal: {
                    label: {
                        position: 'inner',
                        formatter: function (params) {
                            if (params.percent == 0) {
                                return '';
                            }

                            return params.percent + '%'
                        }
                    },
                    labelLine: {
                        show: false
                    }
                }
            }
        }]
    };

    sagPic.setOption(option);
    sagpic = sagPic;
}

function getSagData(startTime, endTime,statFlag) {
    $.post("/pqs9200/weeklyreport/getSagData", {
        "startTime": startTime,
        "endTime": endTime,
        "statFlag":statFlag
    }, function (data) {
        if (data.code === 200) {
            initSagTable(data.body);
        }
    });
}

function initSagTable(data) {
    var sagData = document.getElementById("sagData");
    var code = '<table class="self-td table table-bordered styleFixd">';
    code += '<tr><td colspan = "10" class="text-center fontStyle1">暂态事件严重度(前二十)</td></tr>';
    code += '<tr><td class="text-center fontStyle0">序号</td>';
    code += '<td class="text-center fontStyle0">暂态事件发生时刻</td>';
    code += '<td class="text-center fontStyle0">供电公司</td>';
    code += '<td class="text-center fontStyle0">变电站</td>';
    code += '<td class="text-center fontStyle0">监测点</td>';
    code += '<td class="text-center fontStyle0">监测点电压等级</td>';
    code += '<td class="text-center fontStyle0">干扰源类型</td>';
    code += '<td class="text-center fontStyle0">暂降(骤升)幅值(%)</td>';
    code += '<td class="text-center fontStyle0">持续时间(s)</td>';
    code += '<td class="text-center fontStyle0">暂态事件严重度</td></tr>';

    for (var i = 0; i < data.length; i++) {
        code += '<tr><td class="text-center">' + (i + 1)
            + '</td><td class="text-center">' + data[i].strTime
            + '</td><td class="text-center">' + data[i].plantInfo.nameGD
            + '</td><td class="text-center">' + data[i].plantInfo.nameBD
            + '</td><td class="text-center">' + data[i].plantInfo.namePoint
            + '</td><td class="text-center">' + data[i].plantInfo.monitorVoltageLevel
            + '</td><td class="text-center">' + data[i].plantInfo.monitorLoadType
            + '</td><td class="text-center">' + data[i].strEventValue
            + '</td><td class="text-center">' + data[i].persistTime
            + '</td><td class="text-center">' + data[i].severity
            + '</td></tr>';
    }

    if (data.length === 0) {
        code += '<tr><td colspan = "10" class="text-center fontStyle2">暂无数据</td></tr>';
    }
    code=filterXSS(code);
    sagData.innerHTML = code + '</table>';
}

function showDiv(b) {
    var state = b ? "block" : "none";
    $("#tableData").css("display", state);

    if ($("#tableData").css("display") == 'none') {
        $("#picData").css("display", "block");
    } else {
        $("#picData").css("display", "none");
    }
}

// 电压等级统计监测点在线/离线，暂降发生次数
function getVoltageData(startTime, endTime,statFlag) {
    $.post("/pqs9200/weeklyreport/getVoltageData", {
        "startTime": startTime,
        "endTime": endTime,
        "statFlag":statFlag
    }, function (data) {
        if (data.code === 200) {
            initVoltageDataTable(data.body);
            initVoltagePic(data.body); // 电压等级统计监测点运行状态
            initVoltageEvent(data.body); // 暂降事件统计
        } else {
            layer.msg('暂无电压等级数据');
            var voltage = document.getElementById("voltage");
            voltage.innerHTML = '';
            var voltagePic = document.getElementById("voltagePic");
            voltagePic.innerHTML = '';
            var voltageEvent = document.getElementById("voltageEvent");
            voltageEvent.innerHTML = '';
        }
    });
}

function initVoltagePic(data) {
    initPointDataPic(data, '电压等级统计', 'voltagePic', '(电压等级)', 0); // 电压等级统计监测点运行状态
}

function initVoltageEvent(data) {
    initDeptsEvent(data, '电压等级统计', 'voltageEvent', '(电压等级)', 0); // 暂降事件统计
}

function initVoltageDataTable(data) {
    var voltage = document.getElementById("voltage");
    var code = '<table class="self-td table table-bordered styleFixd">';
    code += '<tr><td colspan = "6" class="text-center fontStyle3">按电压等级统计</td></tr>';
    code += '<tr><td rowspan = "2" class="text-center vermiddle fontStyle0">电压等级</td>';
    code += '<td colspan = "2" class="text-center fontStyle0">监测点数量</td>';
    code += '<td rowspan = "2" class="text-center vermiddle fontStyle3 wd50">暂降次数</td>';
    code += '<td rowspan = "2" class="text-center vermiddle fontStyle3 wd50">中断次数</td>';
    code += '<td rowspan = "2" class="text-center vermiddle fontStyle3 wd50">暂升次数</td></tr>';
    code += '<tr><td class="text-center fontStyle0">在线</td><td class="text-center fontStyle0"style="border-right: 1px solid #ddd">离线</td></tr>';

    for (var i = 0; i < data.length; i++) {
        code += '<tr><td class="text-center">' + data[i].name
            + '</td><td class="text-center">' + data[i].onLine
            + '</td><td class="text-center">' + data[i].offLine
            + '</td><td class="text-center">' + data[i].eventCount
            + '</td><td class="text-center">' + data[i].breakCount
            + '</td><td class="text-center">' + data[i].upCount
            + '</tr>';
    }
    code=filterXSS(code);
    voltage.innerHTML = code + '</table>';
}

// 统计各部门监测点在线/离线，暂降发生次数
function getPointData(startTime, endTime,statFlag) {
    $.post("/pqs9200/weeklyreport/getPointData", {
        "startTime": startTime,
        "endTime": endTime,
        "statFlag":statFlag
    }, function (data) {
        if (data.code === 200) {
            initPointDataTable(data.body);
            initPointDataPic(data.body, '区域统计', 'deptsPic', '(区域)', 25); // 部门统计监测点运行状态
            initDeptsEvent(data.body, '区域统计', 'deptsEvent', '(区域)', 25); // 暂降事件统计
        } else {
            layer.msg('暂无区域数据');
            var depts = document.getElementById("depts");
            depts.innerHTML = '';
            var deptsPic = document.getElementById("deptsPic");
            deptsPic.innerHTML = '';
            var deptsEvent = document.getElementById("deptsEvent");
            deptsEvent.innerHTML = '';
        }
    });
}

function initDeptsEvent(data, subtext, elementId, xName, rotate) {
    var picHeight = $(window).height() * 0.6;
    $("#" + elementId).css('height', picHeight);
    $("#" + elementId).css('width', width - 25);

    echarts.dispose(document.getElementById(elementId));
    var deptsEvent = echarts.init(document.getElementById(elementId));

    // 整合数据
    var xData = [];
    var breakData = [];
    var upData = [];
    var name = [];

    for (var i = 0; i < data.length; i++) {
        name.push(data[i].name);
        xData.push(data[i].eventCount);
        breakData.push(data[i].breakCount);
        upData.push(data[i].upCount);
    }

    var deptsEventOption = {
        backgroundColor: canvasBG,// 背景色,
        title: {
            text: '暂态事件次数',
            subtext: subtext,
            subtextStyle: {
                fontWeight: 'bold',
                fontSize: 12,
                color: '#000000'
            },
            x: 'center'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            },
            formatter: function (params) {
                var tips = "";

                for (var i = 0; i < params.length; i++) {
                    tips += params[i].seriesName + ":" + params[i].value
                        + "<br/>";
                }

                return tips;
            }
        },
        color: [orange,'#00FF00','#1E90FF'],
        legend: {
            data: ['暂降次数','中断次数','暂升次数'],
            x: 'left'
        },
        grid: {
            left: '3%',
            bottom: '10%',
            containLabel: true
        },
        xAxis: [{
            type: 'category',
            data: name,
            name: xName,
            splitLine: {
                show: false
            },
            axisLabel: {
                show: true,
                interval: 0,
                rotate: rotate
            }
        }],
        yAxis: [{
            type: 'value',
            name: '(次)',
            splitLine: {
                show: false
            },
        }],
        series: [{
            name: '暂降次数',
            type: 'bar',
            barMaxWidth: 30,
            itemStyle: {
                normal: {
                    label: {
                        show: true,
                        textStyle: {
                            color: purple
                        }
                    }
                }
            },
            data: xData,
            stack: 'one'
        },{
            name: '中断次数',
            type: 'bar',
            barMaxWidth: 30,
            itemStyle: {
                normal: {
                    label: {
                        show: true,
                        textStyle: {
                            color: purple
                        }
                    }
                }
            },
            data: breakData,
            stack: 'one'
        },{
            name: '暂升次数',
            type: 'bar',
            barMaxWidth: 30,
            itemStyle: {
                normal: {
                    label: {
                        show: true,
                        textStyle: {
                            color: purple
                        }
                    }
                }
            },
            data: upData,
            stack: 'one'
        }]
    };

    deptsEvent.setOption(deptsEventOption);

    if (elementId === 'deptsEvent') {
        deptsevent = deptsEvent;
    } else {
        voltageevent = deptsEvent;
    }

}

function initPointDataTable(data) {
    var depts = document.getElementById("depts");
    var code = '<table class="self-td table table-bordered styleFixd">';
    code += '<tr><td colspan = "6" class="text-center fontStyle1">暂态统计</td></tr>';
    code += '<tr><td colspan = "6" class="text-center fontStyle3">按区域统计</td></tr>';
    code += '<tr><td rowspan = "2" class="text-center vermiddle">区域</td>';
    code += '<td colspan = "2" class="text-center fontStyle0">监测点数量</td>';
    code += '<td rowspan = "2" class="text-center fontStyle3 vermiddle wd50">暂降次数</td>';
    code += '<td rowspan = "2" class="text-center fontStyle3 vermiddle wd50">中断次数</td>';
    code += '<td rowspan = "2" class="text-center fontStyle3 vermiddle wd50">暂升次数</td></tr>';
    code += '<tr><td class="text-center fontStyle0">在线</td><td class="text-center fontStyle0" style="border-right:1px solid #ddd">离线</td></tr>';

    for (var i = 0; i < data.length; i++) {
        code += '<tr><td class="text-center">'
            + data[i].name
            + '</td><td class="text-center">'
            + data[i].onLine
            + '</td><td class="text-center">'
            + data[i].offLine
            + '</td><td class="text-center">'
            + data[i].eventCount
            + '</td><td class="text-center">'
            + data[i].breakCount
            + '</td><td class="text-center">'
            + data[i].upCount + '</tr>';
    }
    code=filterXSS(code);
    depts.innerHTML = code + '</table>';
}

function initPointDataPic(data, subtext, elementId, xName, rotate) {
    var picHeight = $(window).height() * 0.6;
    $("#" + elementId).css('height', picHeight);
    $("#" + elementId).css('width', width - 25);
    echarts.dispose(document.getElementById(elementId));
    var deptsPic = echarts.init(document.getElementById(elementId));

    // 整合数据
    var name = [];
    var onLine = [];
    var offLine = [];

    for (var i = 0; i < data.length; i++) {
        name.push(data[i].name);
        onLine.push(data[i].onLine);
        offLine.push(data[i].offLine);
    }

    var deptsPicOption = {
        backgroundColor: canvasBG,// 背景色,
        title: {
            text: '设备运行情况',
            subtext: subtext,
            subtextStyle: {
                fontWeight: 'bold',
                fontSize: 12,
                color: '#000000'
            },
            x: 'center'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            },
            formatter: function (params) {
                var tips = "";

                for (var i = 0; i < params.length; i++) {
                    tips += params[i].seriesName + ":" + params[i].value
                        + "<br/>";
                }

                return tips;
            }
        },
        color: [green, orange],
        legend: {
            data: ['在线', '离线'],
            x: 'left'
        },
        grid: {
            left: '3%',
            bottom: '10%',
            containLabel: true
        },
        xAxis: [{
            type: 'category',
            data: name,
            name: xName,
            splitLine: {
                show: false
            },
            axisLabel: {
                show: true,
                interval: 0,
                rotate: rotate
            }
        }],
        yAxis: [{
            type: 'value',
            name: '(个)',
            splitLine: {
                show: false
            },
        }],
        series: [{
            name: '在线',
            type: 'bar',
            barMaxWidth: 30,
            itemStyle: {
                normal: {
                    label: {
                        show: true,
                        textStyle: {
                            color: purple
                        }
                    }
                }
            },
            data: onLine,
            stack: 'one'
        }, {
            name: '离线',
            type: 'bar',
            barMaxWidth: 30,
            itemStyle: {
                normal: {
                    label: {
                        show: true,
                        textStyle: {
                            color: purple
                        }
                    }
                }
            },
            data: offLine,
            stack: 'one'
        }]
    };

    deptsPic.setOption(deptsPicOption);

    if (elementId === 'deptsPic') {
        deptspic = deptsPic;
    } else {
        voltagepic = deptsPic;
    }
}
