<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>终端运行异常通知详情</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <link rel="stylesheet" href="${ctx}/css/plugin/bootstrap/bootstrap.css">
    <link rel="stylesheet" href="${ctx}/css/basic.css">
    <style>
        .panel-default > .panel-heading{
            background-color:#ddd !important
        }

    </style>
</head>
<body>
<div class="container-fluid">
    <button class="btn btn-primary" style="position: fixed;right:30px;padding: 5px;top: 1px;right: 1px" id="export">导出详情</button>
    <div class="panel-group" id="accordion">


    </div>
</div>

</body>
<script src="${ctx}/js/plugin/jquery/jquery.min.js"></script>
<script src="${ctx}/js/plugin/bootstrap/bootstrap.min.js"></script>
<script src="${ctx}/js/plugin/layui/layer.js"></script>
<script src="${ctx}/jspJS/utils/loading.js"></script>
<script src="${ctx}/jspJS/utils/common.js"></script>
<script src="${ctx}/jspJS/utils/judgeAjaxStatus.js"></script>
<script>
    var dataObject;
    let timeId = getQueryString("timeId")
    let lineGrade = getQueryString("lineGrade")


    $(function () {
        initView()
        $('#collapseFour').collapse({
            toggle: false
        })
    });


    function initView() {
        let loading;
        $.ajax({
            type: "POST",
            url: "/pqs9900/inStrategy/getRunExceptionDetail",
            dataType: 'json',
            data: {
                timeId: timeId,
                lineGrade: lineGrade
            },
            beforeSend: function () {
                loading = ityzl_SHOW_LOAD_LAYER()
            },
            success: function (data) {
                if (data.code == 200) {
                    let da = data.body
                    dataObject = data.body
                    $("#accordion").empty()
                    if (da.length != 0) {
                        let html = '';

                        for (let i = 0; i < da.length; i++) {
                            let clone = '<div><table><tr><td  style="padding-right: 300px;text-align: left"><span class="label {{alarm}}">终端告警信息</span></td><td style="padding-right:300px;text-align: left"><span class="label {{comOut}}">终端通讯信息</span></td><td style="text-align: left;padding-right: 200px"><span class="label {{limit}}">数据完整性</span></td><td style="text-align: left"><span class="label {{flow}}">终端流量信息</span></td></tr>' +
                                '<tr><td style="padding: 5px;text-align: left">{{1}}</td><td style="padding: 5px;text-align: left">{{2}}</td><td style="padding: 5px;text-align: left">{{4}}</td><td style="padding: 5px;text-align: left">{{3}}</td></tr></table></div>'

                            let time = formatTime(da[i].timeId)

                            let dataIn = da[i].overLimit == 1 ? '<span class="label label-danger ml10">数据完整性未达标</span>' : ''
                            let alarm = da[i].alarmNum == 0 ? '' : '<span class="label label-danger ml10">终端告警 ' + da[i].alarmNum + ' 次</span>'

                            let off = da[i].comoutNum == 0 ? '' : '<span class="label label-danger ml10">通讯中断' + da[i].comoutNum + ' 次</span>'
                            let flow = da[i].flowStand == 1 ? '<span class="label label-danger ml10">流量超标! 使用占比 ' + da[i].flowNum + ' %</span>' : ''

                            let limitValue = da[i].limitValue == null ? 0:da[i].limitValue

                            let alarmHtml = '';
                            if (da[i].alarmDesc != null) {
                                let alarmArr = da[i].alarmDesc.split(";")
                                for (let j = 0; j < alarmArr.length; j++) {
                                    let desc = alarmArr[j] + '<br>'
                                    alarmHtml += desc;
                                }
                            } else {
                                let desc = '[暂无告警信息]'
                                alarmHtml += desc
                            }

                            let offHtml = '';
                            if (da[i].comoutDesc != null) {
                                let offArr = da[i].comoutDesc.split(";")
                                for (let j = 0; j < offArr.length; j++) {
                                    let desc = offArr[j] + '<br>'
                                    offHtml += desc;
                                }
                            } else {
                                let desc = '[暂无通讯中断信息]'
                                offHtml += desc
                            }

                            let flowHtml = '终端流量已使用 ' + da[i].flowNum + ' %'

                            clone = clone.replace("{{1}}", alarmHtml)
                            if(da[i].alarmNum == 1){
                                clone = clone.replace("{{alarm}}", "label-danger")
                            }else{
                                clone = clone.replace("{{alarm}}", "themeBGColor")
                            }
                            clone = clone.replaceAll("{{2}}", offHtml)
                            if(da[i].comoutNum != 0){
                                clone = clone.replace("{{comOut}}", "label-danger")
                            }else{
                                clone = clone.replace("{{comOut}}", "themeBGColor")
                            }
                            clone = clone.replaceAll("{{3}}", flowHtml)
                            if(da[i].flowStand == 1){
                                clone = clone.replace("{{flow}}", "label-danger")
                            }else{
                                clone = clone.replace("{{flow}}", "themeBGColor")
                            }
                            if(da[i].overLimit == 1){
                                clone = clone.replaceAll("{{4}}", limitValue+" %")
                                clone = clone.replace("{{limit}}", "label-danger")
                            }else{
                                clone = clone.replaceAll("{{4}}", "合格")
                                clone = clone.replace("{{limit}}", "themeBGColor")
                            }


                            let item = '<div class="panel-default">\n' +
                                '            <div class="panel-heading">\n' +
                                '                <h4 class="panel-title"><li class="glyphicon glyphicon-play">\n' +
                                '                    <a data-toggle="collapse" data-parent="#accordion"\n' +
                                '                       href=#collapse' + da[i].devIndex + '>' + time + ' 供电公司: ' + da[i].gdName + ' , 变电站: ' + da[i].subName + '  , 装置名称: ' + da[i].devName + ' ' + alarm + off + dataIn + flow +

                                '                    </a>\n' +
                                '                </h4>\n' +
                                '            </div>\n' +
                                '            <div id=collapse' + da[i].devIndex + ' class="panel-collapse collapse in">\n' +
                                '                <div class="panel-body">' + clone +
                                '                </div>\n' +
                                '            </div>\n' +
                                '        </div>'

                            html += item;

                        }
                        $("#accordion").append(html)
                        $('.panel-collapse').collapse({
                            toggle: false
                        })
                    }

                } else {
                    layer.msg('获取失败', {icon: 2})

                }
                ityzl_CLOSE_LOAD_LAYER(loading)
            }
        })

    }


    $("#export").click(function () {
        if (dataObject != null) {
            if (dataObject.length != 0) {
                let html = '序号,时间,供电公司,变电站,设备名称,数据完整性是否达标,告警事件,中断详情,流量使用率,终端等级,\n'
                let time = formatTime(dataObject[0].timeId,2)
                for (let i = 0; i < dataObject.length; i++) {

                    let overLimit = dataObject[i].overLimit == 1 ?"否":"/";
                    let alarm = dataObject[i].alarmDesc ==null ?"/":dataObject[i].alarmDesc
                    let off =dataObject[i].comoutDesc==null?"/":dataObject[i].comoutDesc
                    let lineGrade =  toChange(dataObject[i].lineGrade)
                    let item =  i+1+",\t\t"+time+ "\t,"+dataObject[i].gdName + "," + dataObject[i].subName + "," + dataObject[i].devName +","+overLimit+","+alarm+","+off+","+dataObject[i].flowNum+","+lineGrade+",\n"
                    html+=item;
                }
                var aaaa = "data:text/csv;charset=utf-8,\ufeff" + html;
                var link = document.createElement("a");
                link.setAttribute("href", aaaa);
                link.setAttribute("download", time+"终端异常详情" + ".csv");
                link.click();




            }
        }

    })

    function toChange(lineGrade) {
        switch (lineGrade){
            case 0: return "极重要";
            case 1: return "重要";
            case 2: return "普通";
            case 3: return "不重要";
            default : return "/"
        }
    }



</script>
</html>
