AssociateDetails.jsp 21 KB
<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2017/12/9 0009
  Time: 下午 3:29
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="tags" tagdir="/WEB-INF/tags" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<html>
<head>
    <title>全网监控智能分析平台</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">

    <script src="${ctx}/static/artDialog4.1.7/artDialog.source.js?skin=default"></script>
    <script src="${ctx}/static/artDialog4.1.7/plugins/iframeTools.source.js"></script>
    <script type="text/javascript" src="${ctx}/static/js/associatediagosisdetail.js"></script>
    <script>

        //格式化日期
        function Format(){
            this.jsjava_class="jsjava.text.Format";
        }
        function DateFormat(){
            this.jsjava_class="jsjava.text.DateFormat";
        }
        DateFormat.prototype=new Format();
        DateFormat.prototype.constructor=DateFormat;
        DateFormat.zh_cn_month2=["01","02","03","04","05","06","07","08","09","10","11","12"];
        DateFormat.zh_cn_month3=["\u4e00\u6708","\u4e8c\u6708","\u4e09\u6708","\u56db\u6708","\u4e94\u6708","\u516d\u6708","\u4e03\u6708","\u516b\u6708","\u4e5d\u6708","\u5341\u6708","\u5341\u4e00\u6708","\u5341\u4e8c\u6708",];
        DateFormat.zh_cn_month4=["\u4e00\u6708","\u4e8c\u6708","\u4e09\u6708","\u56db\u6708","\u4e94\u6708","\u516d\u6708","\u4e03\u6708","\u516b\u6708","\u4e5d\u6708","\u5341\u6708","\u5341\u4e00\u6708","\u5341\u4e8c\u6708",];
        DateFormat.en_us_month4=["Janu","Febr","Marc","Apri","May","Juhn","July","Augu","Sept","Octo","Nove","Dece"];
        DateFormat.en_us_month3=["Jan","Feb","Mar","Apr","May","Juh","Jul","Aug","Sep","Oct","Nov","Dec"];
        DateFormat.en_us_month2=["01","02","03","04","05","06","07","08","09","10","11","12"];
        DateFormat.zh_cn_week=["\u661f\u671f\u65e5","\u661f\u671f\u4e00","\u661f\u671f\u4e8c","\u661f\u671f\u4e09","\u661f\u671f\u56db","\u661f\u671f\u4e94","\u661f\u671f\u516d"];
        DateFormat.zh_cn_am="\u4e0b\u5348";
        DateFormat.zh_cn_pm="\u4e0a\u5348";
        DateFormat.language=(navigator.userLanguage==undefined?navigator.language:navigator.userLanguage).replace("-","_").toLowerCase();

        DateFormat.prototype.format=function(date){
            var year4=date.getFullYear();
            var year2=year4.toString().substring(2);
            var pattern=this.pattern;
            pattern=pattern.replace(/yyyy/,year4);
            pattern=pattern.replace(/yy/,year2);
            var month=date.getMonth();
            pattern=pattern.replace(/MMMM/,eval("DateFormat."+DateFormat.language+"_month4[month]"));
            pattern=pattern.replace(/MMM/,eval("DateFormat."+DateFormat.language+"_month3[month]"));
            pattern=pattern.replace(/MM/,eval("DateFormat."+DateFormat.language+"_month2[month]"));
            var dayOfMonth=date.getDate();
            var dayOfMonth2=dayOfMonth;
            var dayOfMonthLength=dayOfMonth.toString().length;
            if(dayOfMonthLength==1){
                dayOfMonth2="0"+dayOfMonth;
            }
            pattern=pattern.replace(/dd/,dayOfMonth2);
            pattern=pattern.replace(/d/,dayOfMonth);
            var hours=date.getHours();
            var hours2=hours;
            var hoursLength=hours.toString().length;
            if(hoursLength==1){
                hours2="0"+hours;
            }
            pattern=pattern.replace(/HH/,hours2);
            pattern=pattern.replace(/H/,hours);
            var minutes=date.getMinutes();
            var minutes2=minutes;
            var minutesLength=minutes.toString().length;
            if(minutesLength==1){
                minutes2="0"+minutes;
            }
            pattern=pattern.replace(/mm/,minutes2);
            pattern=pattern.replace(/m/,minutes);
            var seconds=date.getSeconds();
            var seconds2=seconds;
            var secondsLength=seconds.toString().length;
            if(secondsLength==1){
                seconds2="0"+seconds;
            }
            pattern=pattern.replace(/ss/,seconds2);
            pattern=pattern.replace(/s/,seconds);
            var milliSeconds=date.getMilliseconds();
            pattern=pattern.replace(/S+/,milliSeconds);
            var day=date.getDay();
            // pattern=pattern.replace(/E+/,eval("DateFormat."+DateFormat.language+"_week[day]"));
            if(hours>12){
                pattern=pattern.replace(/a+/,eval("DateFormat."+DateFormat.language+"_am"));
            }else{
                pattern=pattern.replace(/a+/,eval("DateFormat."+DateFormat.language+"_pm"));
            }
            var kHours=hours;
            if(kHours==0){
                kHours=24;
            }
            var kHours2=kHours;
            var kHoursLength=kHours.toString().length;
            if(kHoursLength==1){
                kHours2="0"+kHours;
            }
            pattern=pattern.replace(/kk/,kHours2);
            pattern=pattern.replace(/k/,kHours);
            var KHours=hours;
            if(hours>11){
                KHours=hours-12;
            }
            var KHours2=KHours;
            var KHoursLength=KHours.toString().length;
            if(KHoursLength==1){
                KHours2="0"+KHours;
            }
            pattern=pattern.replace(/KK/,KHours2);
            pattern=pattern.replace(/K/,KHours);
            var hHours=KHours;
            if(hHours==0){
                hHours=12;
            }
            var hHours2=hHours;
            var hHoursLength=hHours.toString().length;
            if(KHoursLength==1){
                hHours2="0"+hHours;
            }
            pattern=pattern.replace(/hh/,hHours2);
            pattern=pattern.replace(/h/,hHours);
            return pattern;
        };

        function SimpleDateFormat(){
            this.jsjava_class="jsjava.text.SimpleDateFormat";
        }

        SimpleDateFormat.prototype=new DateFormat();
        SimpleDateFormat.prototype.constructor=SimpleDateFormat;

        SimpleDateFormat.prototype.applyPattern=function(pattern){
            this.pattern=pattern;
        };

        var df=new SimpleDateFormat();
        df.applyPattern("yyyy-MM-dd HH:mm:ss");


    </script>
</head>
<body>
<div>
    <div class="container">
        <ol class="breadcrumb">
            <li><a href="${ctx}/index">首页</a></li>
            <li>监控运营</li>
            <li class="active">告警关联诊断</li>
        </ol>
    </div>
</div>

<div id="main-container main-tab-container">
    <div id="content" class="container">
        <div class="section">

            <div class="tab-content">
                <div class="tab-pane fade in active" id="detail">

                    <div class="row me-row">
                        <div id="slidePushMenus2" class="cbp-spmenu-push">


                            <div class="main col-xs-12">
                                <!-- <table id="mainm2" class="mainm" onclick="hideMenu('showLeftPush2','slidePushMenus2')"></table> -->
                                <div id="mainm2" class="mainm"></div>
                                <div class="content clearfix">


                                    <div class="row">
                                        <div class="col-xs-12">
                                            <table class='table table-vertical'>
                                                <tr>
                                                    <td><label>开始时间:</label>${beginTime}</td>
                                                    <td><label>结束时间:</label>${endTime}</td>
                                                </tr>
                                                <tr>
                                                    <td><label>省份:</label>${provinceName}</td>
                                                    <td><label>类型:</label>${associationType}</td>
                                                </tr>
                                                <tr>
                                                    <td><label>名称:</label>${associationDesc}</td>
                                                    <td><label>告警个数:</label>${warningNum}</td>
                                                </tr>
                                            </table>
                                            <br>
                                            <table class='table table-vertical'>
                                                <tr>
                                                   <th style='vertical-align: middle !important;text-align: center;'>省份</th>
                                                   <th style='vertical-align: middle !important;text-align: center;'>指标名称</th>
                                                   <th style='vertical-align: middle !important;text-align: center;'>指标编码</th>
                                                   <th style='vertical-align: middle !important;text-align: center;'>类型</th>
                                                   <th style='vertical-align: middle !important;text-align: center;'>名称</th>
                                                   <th style='vertical-align: middle !important;text-align: center;'>告警个数</th>
                                                   <th style='vertical-align: middle !important;text-align: center;'>异常程度</th>
                                                   <th style='vertical-align: middle !important;text-align: center;'>指标告警明细</th>

                                                </tr>
                                                <c:forEach items="${warningDetailList}" var="item">
                                                    <tr>
                                                        <td style='vertical-align: middle !important;text-align: center;'>${item.PROVINCE_NAME}</td>
                                                        <td style='vertical-align: middle !important;text-align: center;'>${item.KPI_NAME}</td>
                                                        <td style='vertical-align: middle !important;text-align: center;'>${item.KPI_CODE}</td>
                                                        <td style='vertical-align: middle !important;text-align: center;'>
                                                            <c:if test="${item.ASSOCIATION_TYPE == 'c'}">
                                                                业务
                                                            </c:if>
                                                            <c:if test="${item.ASSOCIATION_TYPE == 'y'}">
                                                                渠道
                                                            </c:if>
                                                        </td>
                                                        <td style='vertical-align: middle !important;text-align: center;'>${item.ASSOCIATION_DESC}</td>
                                                        <td style='vertical-align: middle !important;text-align: center;'>${item.WARNING_NUM}</td>
                                                        <td style='vertical-align: middle !important;text-align: center;'>${item.INFLUENCE_LEVEL}</td>
                                                        <td style='vertical-align: middle !important;text-align: center;'><a
                                                                <%--href="${ctx}/MonitorOperation/AssociateDiagosisDetailgetDetail?kpiId=${item.KPI_ID}&provinceId=${item.PROVINCE_ID}&beginTime=${beginTime}&endTime=${endTime}"--%>
                                                                onclick="getdetails(this)" name="${item.KPI_ID}_${item.PROVINCE_ID}_${beginTime}_${endTime}">告警明细</a></td>
                                                    </tr>
                                                </c:forEach>
                                            </table>


                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>

                </div>
                <form action="#" method="get" id="listForm"></form>
                <input type="hidden" id="gzfxDetail" name="gzfxDetail" value='${gzfxDetailInfos}' />
                <%-- <input type="hidden" id="listDimKpi" name="listDimKpi" value='${listDimKpi}' />--%><%-- 所有指标--%>
                <input type="hidden" id="provinceAll" name="provinceAll" value='${provinces}' />
                <input type="hidden" id="indicatorsAll" name="indicatorsAll" value='${indicatorsAll}' />
                <input type="hidden" id="anaInfoSelected" name="anaInfoSelected" value='' />
            </div>
        </div>
    </div>
</div>
<script>

    function getdetails(e){

//        alert($(e).name);
        var params=e.name.split("_");
        var kpiId=params[0];
        var proviceId=params[1];
        var beginTime=params[2];
        var endTime=params[3];


        $.dialog({
            title:"",
            content:"<div id='paramList' class='container' >"+
            "<div class='col-xs-12'><div class='panel panel-default'><div class='panel-heading' >指标告警明细</div><div class='panel-body'> <table class='table  table-striped  table-bordered '> <thead> <tr align='center'> " +
            "<th  style='vertical-align: middle !important;text-align: center;'>编号</th>" +
            "<th  style='vertical-align: middle !important;text-align: center;'>省份</th> " +
            "<th  style='vertical-align: middle !important;text-align: center;' >渠道</th> " +
            "<th  style='vertical-align: middle !important;text-align: center;' >数据来源</th> " +
            "<th  style='vertical-align: middle !important;text-align: center;' >告警来源</th>" +
            "<th  style='vertical-align: middle !important;text-align: center;' >指标</th>" +
            "<th  style='vertical-align: middle !important;text-align: center;' >告警类型</th>" +
            "<th  style='vertical-align: middle !important;text-align: center;' >发生时间</th>" +
            "<th  style='vertical-align: middle !important;text-align: center;' >告警影响结束时间</th>" +
            "<th  style='vertical-align: middle !important;text-align: center;' >结束时间</th>" +

            "<th  style='vertical-align: middle !important;text-align: center;' >协查单号</th>" +
            "<th  style='vertical-align: middle !important;text-align: center;' >故障单号</th>" +
            "<th  style='vertical-align: middle !important;text-align: center;' >告警状态</th>" +
            "<th  style='vertical-align: middle !important;text-align: center;' >关闭类型</th>" +
            "</tr> </thead> <tbody> </tbody> </table> </div> </div> </div>"+
            "</div>",
            lock:true,
            width:"1200px",
            height : "600px",
            initialize:function(){
                var paramTbody = $('#paramList tbody');
                $.ajax({
                    type : 'GET',
                    async : false,
                    contentType : 'application/json',
                    url: "${ctx}/MonitorOperation/AssociateDiagosisDetail/getDetail?kpiId="+kpiId+"&provinceId="+proviceId+"&beginTime="+beginTime+"&endTime="+endTime,
                    dataType : 'text',
                    success: function(data){
                       var jsonDa=eval('('+data+')');

//                        console.log("data   "+data);
                        $.each(jsonDa,function(n,val){
//                            alert(df.format(val.closeTime));
                            console.log(" val.closeTime  "+val.closeTime);
                            console.log(" df.format(new Date(val.closeTime))  "+df.format(new Date(val.closeTime)));
                            console.log(" new Date(val.closeTime))  "+new Date(val.closeTime));

                            var warningId=val.warningId;
                            if(typeof warningId === 'undefined'){warningId=''}
                            var provinceName=val.provinceName;
                            if(typeof provinceName ==='undefined'){provinceName=''}
                            var channelName=val.channelName;
                            if(typeof channelName ==='undefined'){channelName=''}
                            var dataSourceName=val.dataSourceName;
                            if(typeof dataSourceName ==='undefined'){dataSourceName=''}

                            var warningSourceName=val.warningSourceName;
                            if(typeof warningSourceName ==='undefined'){warningSourceName=''}
                            var kpiName=val.dataSourceName;
                            if(typeof kpiName ==='undefined'){kpiName=''}
                            var riskEarlyWarningTypeName=val.riskEarlyWarningTypeName;
                            if(typeof riskEarlyWarningTypeName ==='undefined'){riskEarlyWarningTypeName=''}
                            var occurTime=val.occurTime;
                            if(typeof occurTime ==='undefined'){occurTime=''}else{ occurTime=df.format(new Date(val.occurTime));}
                            var influenceEndTime=val.influenceEndTime;
                            if(typeof influenceEndTime ==='undefined'){influenceEndTime=''}
                            var closeTime=val.closeTime;
                            if(typeof closeTime ==='undefined'){closeTime=''}else{closeTime=df.format(new Date(val.closeTime));}



                            var dataSourceName=val.dataSourceName;
                            if(typeof dataSourceName ==='undefined'){dataSourceName=''}



                            var relevantWorkingOrderId= val.relevantWorkingOrderId;
                            if(typeof relevantWorkingOrderId === 'undefined' ){relevantWorkingOrderId=''}
                            var relevantFailureId=val.relevantFailureId;
                            if( typeof relevantFailureId === 'undefined' ){relevantFailureId=''}

                            var type=val.type;
                            if( typeof type === 'undefined' ){type=''}
                            var status=val.status;
                            if( typeof status === 'undefined' ){status=''}

                            paramTbody.append($("<tr align='center' ></tr>")
                                .append("<td  style='vertical-align: middle !important;text-align: center;' ><a>"+warningId+"</a></td>")
                                .append("<td  style='vertical-align: middle !important;text-align: center;' >"+provinceName+"</td>")
                                .append("<td  style='vertical-align: middle !important;text-align: center;' >"+channelName+"</td>")
                                .append("<td  style='vertical-align: middle !important;text-align: center;' >"+dataSourceName+"</td>")
                                .append("<td  style='vertical-align: middle !important;text-align: center;' >"+warningSourceName+"</td>")
                                .append("<td  style='vertical-align: middle !important;text-align: center;' >"+kpiName+"</td>")
                                .append("<td  style='vertical-align: middle !important;text-align: center;' >"+riskEarlyWarningTypeName+"</td>")
                                .append("<td  style='vertical-align: middle !important;text-align: center;' >"+occurTime+"</td>")
                                .append("<td  style='vertical-align: middle !important;text-align: center;' >"+influenceEndTime+"</td>")
                                .append("<td   style='vertical-align: middle !important;text-align: center;' >"+closeTime+"</td>")


                                .append("<td  style='vertical-align: middle !important;text-align: center;' >"+relevantWorkingOrderId+"</td>")

                                .append("<td  style='vertical-align: middle !important;text-align: center;' >"+relevantFailureId+"</td>")
                                .append("<td  style='vertical-align: middle !important;text-align: center;' >"+type+"</td>")
                                .append("<td  style='vertical-align: middle !important;text-align: center;' >"+status+"</td>")

                            );
                        });
                        //关闭类型 status
                        // 告警状态 type
                        //级别  imporiance_level_name
                        //数据来源 data_source_name
                        //告警来源   waringing_source_name
                        //告警类型  risk_early_warning_type_name
                    }

                });
            }

        });
    }


</script>
</body>
</html>