<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <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"/>
    <title>报表导出</title>
    <link rel="stylesheet" href="${ctx}/css/plugin/bootstrap/bootstrap.css">
    <link rel="stylesheet"
          href="${ctx}/css/plugin/bootstrap/bootstrap-datetimepicker.min.css">
    <link rel="stylesheet" href="${ctx}/css/plugin/jquery/jquery-ui.css">
    <link rel="stylesheet"
          href="${ctx}/css/plugin/metroStyle/metroStyle.css">
    <link rel="stylesheet"
          href="${ctx}/css/plugin/bootstrap/bootstrap-datetimepicker.css">
    <link rel="stylesheet" href="${ctx}/js/plugin/layerui/css/layui.css"
          media="all">
    <link rel="stylesheet" href="${ctx}/css/basic.css">
    <style type="text/css">
        html, body {
            overflow: hidden;
        }

        #rightContent label {
            max-width: none;
        }

        .left-menu {
            top: 65px
        }

        .nav > li > a {
            padding: 3px 15px;
        }

        .table > tbody > tr > td {
            vertical-align: middle;
        }

        .layui-form-item {
            margin-bottom: 0px;
        }


        .title {
            border: 1px solid #C9C9C9;
            height: 31px;
            width: 250PX;
            text-align: center;
            line-height: 32px;
        }

        .title_1 {
            border: 1px solid #C9C9C9;
            height: 31px;
            text-align: center;
            line-height: 32px;
        }


        .reportPic {
            width: 714px;
            height: 300px;
            display: none;
        }
    </style>
</head>
<body class="pd10">
<div class="row" style="background: #fff;">
    <form class="form-inline ml15">
        <%@include file="../../include/time.jsp" %>
        <label class="form-group">模板策略:</label>
        <div class="form-group has-feedback">
            <select class="form-control" id="template">
            </select>
        </div>
        <div class="form-inline pdr15 fr">
            <button type="button" class="btn btn-primary" id="saveReport">
                报告生成
            </button>
        </div>
    </form>

    <ul id="myTab" class="nav nav-tabs">
        <li class="active"><a href="#index" data-toggle="tab">监测点</a></li>
    </ul>
    <form class="layui-form">
        <div id="myTabContent" class="tab-content">
            <div id="index" class="tab-pane fade in active">
                <div id="jcd-index">
                    <div class="left-menu fl"
                         style="color: #333; bottom: 0; overflow-y: scroll;">
                        <div class="">
                            <input style="width: 155px;" id="search_value" type="text"
                                   value="" placeholder="请输入关键词"/> <input type="button"
                                                                          value="搜索"
                                                                          onclick="javascript: searchNode(search_value.value)"
                                                                          style="padding: 0 5px;">
                        </div>
                        <div id="tree" class="ztree" style="padding: 5px 0;"></div>
                    </div>
                    <div id="rightContent"
                         style="position: absolute; left: 270px; right: 20px; top: 65px; bottom: 0; z-index: 1;">
                        <table class="table" id="jcd" frame="border" rules="groups"
                               style="font-size: 15px; border-collapse: initial;">
                            <tr>
                                <td align="center" colspan="2">
                                    <div class="title_1">
                                        监测点名称：<span id="lineName" style="color: red;">暂未选中监测点</span>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td align="center">
                                    <div class="title">监测点详情</div>
                                </td>
                                <td align="left"><input type="checkbox" id="jcdxq"
                                                        lay-skin="primary"></td>
                            </tr>
                            <tr>
                                <td align="center">
                                    <div class="title">暂降事件列表</div>
                                </td>
                                <td align="left"><input type="checkbox" title="表格"
                                                        lay-skin="primary" id="zjsjlb">
                                    <input type="checkbox" title="图形<span style='color: red;'>(事件波形影响报告进度，只生成最新10条波形)</span>"
                                           lay-skin="primary" id="zjsjssbx">
                                </td>
                            </tr>
                            <tr>
                                <td align="center">
                                    <div class="title">暂降密度</div>
                                </td>
                                <td align="left"><input type="checkbox" id="zjmdbg"
                                                        title="表格" lay-skin="primary"> <input
                                        type="checkbox" id="zjmdtx" title="图形" lay-skin="primary">
                                </td>
                            </tr>
                            <tr>
                                <td align="center">
                                    <div class="title">暂降事件点</div>
                                </td>
                                <td align="left"><input type="checkbox" id="zjsjditic"
                                                        title="ITIC" lay-skin="primary"> <input
                                        type="checkbox" id="zjsjdf47" title="F47" lay-skin="primary">
                                </td>
                            </tr>
                            <tr>
                                <td align="center">
                                    <div class="title">概率分布</div>
                                </td>
                                <td align="left"><input type="checkbox" id="glfbzjfz"
                                                        title="暂降幅值" lay-skin="primary"> <input
                                        type="checkbox" id="glfbcxsj" title="持续时间" lay-skin="primary">
                                </td>
                            </tr>
                            <tr>
                                <td align="center">
                                    <div class="title">月份统计</div>
                                </td>
                                <td align="left"><input type="checkbox" id="yftjbg"
                                                        title="表格" lay-skin="primary"> <input
                                        type="checkbox" id="yftjtx" title="图形" lay-skin="primary">
                                </td>
                            </tr>
                            <tr>
                                <td align="center">
                                    <div class="title">暂降原因</div>
                                </td>
                                <td align="left"><input type="checkbox" id="zjyybg"
                                                        title="表格" lay-skin="primary"> <input
                                        type="checkbox" id="zjyytx" title="图形" lay-skin="primary">
                                </td>
                            </tr>
                            <tr>
                                <td align="center">
                                    <div class="title">暂降类型</div>
                                </td>
                                <td align="left"><input type="checkbox" id="zjlxbg"
                                                        title="表格" lay-skin="primary"> <input
                                        type="checkbox" id="zjlxtx" title="图形" lay-skin="primary">
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>
<div class="reportPic" id="density"></div>
<canvas class="reportPic" id="shunshi"></canvas>
<div class="reportPic" id="itic"></div>
<div class="reportPic" id="f47"></div>
<div class="reportPic" id="eventValue"></div>
<div class="reportPic" id="persisttime"></div>
<div class="reportPic" id="time"></div>
<div class="reportPic" id="cause"></div>
<div class="reportPic" id="type"></div>
<input type="hidden" id="lineIndex">
<%--Common Modal --%>
<script src="${ctx}/js/plugin/jquery.min.js"></script>
<script src="${ctx}/js/plugin/bootstrap/bootstrap.min.js"></script>
<script src="${ctx}/js/plugin/layerui/layer.js"></script>
<script src="${ctx}/js/plugin/ztree/jquery.ztree.core.js"></script>
<script src="${ctx}/js/plugin/layerui/layui.js"></script>
<script
        src="${ctx}/js/plugin/bootstrap/bootstrap-datetimepicker.min.js"></script>
<script
        src="${ctx}/js/plugin/bootstrap/bootstrap-datetimepicker.zh-CN.js"></script>
<script src="${ctx}/js/plugin/highchart/highchart.js"></script>
<script src="${ctx}/js/plugin/highchart/highchart-ZH.js"></script>
<script src="${ctx}/js/plugin/highchart/exporting.js"></script>
<script src="${ctx}/js/plugin/canvg/canvg.js"></script>
<script src="${ctx}/js/plugin/canvg/rgbcolor.js"></script>
<script src="${ctx}/js/plugin/echarts3D/echarts.js"></script>
<script src="${ctx}/js/plugin/echarts3D/echarts-gl.min.js"></script>
<script src="${ctx}/js/basic.js"></script>
<script src="${ctx}/jspJS/utils/timeControl.js"></script>
<script src="${ctx}/jspJS/utils/loading.js"></script>
<script src="${ctx}/jspJS/utils/judgeAjaxStatus.js"></script>
<script type="text/javascript">
    var eventValueImage, persisttimeImage, timeImage, causeImage, typeImage, templateDatas;
    var idea;
    var shunSImg = new Array();
    layui.use('form', function () {
        var form = layui.form;
    });
    var treeObj = null;
    var myChart, tolerance, tolerance1;

    var setting = {
        check: {
            enable: true,
            chkDisabledInherit: true
        },
        data: {
            simpleData: {
                enable: true
            }
        },
        view: {
            fontCss: setHighlight
            // 高亮一定要设置，setHighlight是自定义方法
        },
        callback: {
            onClick: zTreeOnClick
        }
    };

    $(document).ready(function () {
        getTree();
        zTreeOnAsyncSuccess();
        getTemplate();

    });

    function getTree() {
        var endTime = getEndTime();
        var startTime = getStartTime("月份", endTime);
        jQuery
            .ajax({
                type: 'POST',
                dataType: "json",
                url: '/pqs9200/device/tree',
                data: {
                    startTime: startTime,
                    endTime: endTime
                },
                async: false,
                error: function () {
                },
                success: function (data) {
                    if (data.code == 500 || data.body == null) {
                        layer.msg("获取终端树内容失败.");
                    } else {

                        var datalist = [];
                        for (var i = 0; i < data.body.length; i++) {
                            var str = '';
                            str += '{' + "id:" + data.body[i].id;
                            str += ',' + "name:'" + data.body[i].name + "'";
                            str += ',' + "nodeIndex:"
                                + data.body[i].nodeIndex;
                            str += ',' + "nodeType:" + data.body[i].nodeType;
                            str += ',' + "ppId:" + data.body[i].ppId;
                            if (data.body[i].nodeType == "0") {
                                str += ',' + "open:" + true;
                            } else {
                                str += ',' + "open:" + false;
                            }
                            str += ',' + "state:" + data.body[i].state;
                            str += ',' + "status:" + data.body[i].status;
                            str += ',' + "pId:" + data.body[i].pId + '}';
                            datalist.push(str);
                        }
                        datalist = eval('[' + datalist + ']');// string->json数组
                        var zNodes = datalist;
                        var k = 0;
                        for (var index = 0; index < zNodes.length; index++) {
                            if (zNodes[index].nodeType == 0) {
                                zNodes[index].icon = "../images/img/base.png";
                            } else if (zNodes[index].nodeType == 1) {
                                zNodes[index].icon = "../images/img/province.png";
                            } else if (zNodes[index].nodeType == 2) {
                                zNodes[index].icon = "../images/img/power.png";
                            } else if (zNodes[index].nodeType == 3) {
                                zNodes[index].icon = "../images/img/substation.png";
                            } else if (zNodes[index].nodeType == 4) {
                                zNodes[index].icon = "../images/img/device.png";
                            } else if (zNodes[index].nodeType == 5) {
                                zNodes[index].icon = "../images/img/subvstation.png";
                            } else if (zNodes[index].nodeType == 6) {
                                if (zNodes[index].state == 2) {
                                    zNodes[index].icon = "../images/img/gray.png";
                                } else if (zNodes[index].state == 1) {
                                    zNodes[index].icon = "../images/img/yellow.png";
                                } else {
                                    if (zNodes[index].status == 1) {
                                        zNodes[index].icon = "../images/img/green.png";
                                    } else {
                                        zNodes[index].icon = "../images/img/red.png";
                                    }
                                }
                            }
                        }
                        treeObj = $.fn.zTree.init($("#tree"), setting,
                            zNodes);
                    }
                }
            });
    }

    function zTreeOnClick() {
        var zTree = $.fn.zTree.getZTreeObj("tree");
        if (zTree != null) {
            var nodes = zTree.getSelectedNodes(); //获取树控件选中对象集合
            // 关闭所有节点的高亮
            var allNodes = treeObj.transformToArray(treeObj.getNodes());
            for (var i = 0; i < allNodes.length; i++) {
                allNodes[i].highlight = false;
                treeObj.updateNode(allNodes[i]);
            }
            // 高亮并展开搜索到的节点
            for (var i = 0; i < nodes.length; i++) {
                nodes[i].highlight = true;
                treeObj.updateNode(nodes[i]); // 更新节点，让高亮生效
            }
            if (nodes[0].level == 4) { //如果选中监测点信息则进行处理，其他信息不处理
                var devname = nodes[0].getParentNode();
                var bdname = nodes[0].getParentNode().getParentNode();
                var gdname = nodes[0].getParentNode().getParentNode().getParentNode();
                var line_index = nodes[0].nodeIndex;
                $("#lineIndex").val(line_index);
                $("#lineName").text(
                    gdname.name + '->' + bdname.name + '->' + devname.name + '->'
                    + nodes[0].name);

            }
        }
    }

    function zTreeOnAsyncSuccess() {
        var zTree = $.fn.zTree.getZTreeObj("tree");

        var nodes = zTree.getNodes();
        zTree.expandNode(nodes[0], true);

        var childNodes = zTree.transformToArray(nodes[0]);

        var i = 0;
        for (i = 0; i < childNodes.length; i++) {
            var type = childNodes[i].level;
            if (type == 4) {
                var devname = childNodes[i].getParentNode();
                var bdname = childNodes[i].getParentNode().getParentNode();
                var gdname = childNodes[i].getParentNode().getParentNode()
                    .getParentNode();

                zTree.expandNode(gdname, true);
                zTree.expandNode(bdname, true);
                zTree.expandNode(devname, true);
                zTree.expandNode(childNodes[i], true);


                var line_index = childNodes[i].nodeIndex;
                $("#lineIndex").val(line_index);
                $("#lineName").text(
                    gdname.name + '->' + bdname.name + '->' + devname.name + '->'
                    + childNodes[i].name);

                // 关闭所有节点的高亮
                var treeObj = $.fn.zTree.getZTreeObj("tree");
                var allNodes = treeObj.transformToArray(treeObj.getNodes());
                for (var n = 0; n < allNodes.length; n++) {
                    allNodes[n].highlight = false;
                    treeObj.updateNode(allNodes[n]);
                }

                // 高亮并展开搜索到的节点
                childNodes[i].highlight = true;
                treeObj.updateNode(childNodes[i]); // 更新节点，让高亮生效

                break;
            }
        }
    }

    // 模糊搜索name满足条件的节点
    function searchNode(value) {
        if (value == "")
            return;
        // 获取搜索的节点
        var nodes = treeObj.getNodesByParamFuzzy("name", value);
        // 关闭所有节点的高亮
        var allNodes = treeObj.transformToArray(treeObj.getNodes());
        for (var i = 0; i < allNodes.length; i++) {
            allNodes[i].highlight = false;
            treeObj.updateNode(allNodes[i]);
        }
        // 展开第一层节点
        treeObj.expandAll(false);
        treeObj.expandNode(treeObj.getNodes()[0], true);
        // 高亮并展开搜索到的节点
        for (var i = 0; i < nodes.length; i++) {
            nodes[i].highlight = true;
            treeObj.updateNode(nodes[i]); // 更新节点，让高亮生效
            treeObj.expandNode(nodes[i].getParentNode(), true);
        }
    }

    // 设置高亮字体
    function setHighlight(treeId, treeNode) {
        return (!!treeNode.highlight) ? {
            color: "#000000",
            "font-weight": "bold"
        } : {
            color: "#666",
            "font-weight": "normal"
        };
    }

    // 延时搜索，用于输入框的按键事件，如果不延时，树就会不断的跳动
    var timeoutId = null;

    function searchNodeLazy(value) {
        if (timeoutId) {
            clearTimeout(timeoutId);
        }
        timeoutId = setTimeout(function () {
            searchNode(value);
        }, 500);
    }

    //初始化所有数据
    var allData = new Array();
    /***
     * 导出报告操作
     */
    $("#saveReport")
        .click(
            function () {
                idea = ityzl_SHOW_LOAD_LAYER();
                var startTime = $("#startTime").val();
                var endTime = $("#endTime").val();
                var lineIndex = $("#lineIndex").val();
                var lineName = $("#lineName").text();
                if ($("#jcdxq").is(":checked")) {
                    var jcdxq = true;
                }
                if ($("#zjsjlb").is(":checked")) {
                    var zjsjlb = true;
                }
                if ($("#zjsjssbx").is(":checked")) {
                    var zjsjssbx = true;
                }
                if ($("#zjmdbg").is(":checked")) {
                    var zjmdbg = true;
                }
                if ($("#zjmdtx").is(":checked")) {
                    var zjmdtx = true;
                }
                if ($("#zjsjditic").is(":checked")) {
                    var zjsjditic = true;
                }
                if ($("#zjsjdf47").is(":checked")) {
                    var zjsjdf47 = true;
                }
                if ($("#glfbzjfz").is(":checked")) {
                    var glfbzjfz = true;
                }
                if ($("#glfbcxsj").is(":checked")) {
                    var glfbcxsj = true;
                }
                if ($("#yftjbg").is(":checked")) {
                    var yftjbg = true;
                }
                if ($("#yftjtx").is(":checked")) {
                    var yftjtx = true;
                }
                if ($("#zjyybg").is(":checked")) {
                    var zjyybg = true;
                }
                if ($("#zjyytx").is(":checked")) {
                    var zjyytx = true;
                }
                if ($("#zjlxbg").is(":checked")) {
                    var zjlxbg = true;
                }
                if ($("#zjlxtx").is(":checked")) {
                    var zjlxtx = true;
                }

                if (lineIndex == "") {
                    layer.msg('请先指定一个监测点', {
                        icon: 5
                    });
                } else {

                    $
                        .ajax({
                            type: "POST",
                            url: '/pqs9200/report/monitor',
                            data: {
                                startTime: startTime,
                                endTime: endTime,
                                lineIndex: lineIndex,
                                lineName: lineName,
                                jcdxq: jcdxq,
                                zjsjlb: zjsjlb,
                                zjsjssbx: zjsjssbx,
                                zjmdbg: zjmdbg,
                                zjmdtx: zjmdtx,
                                zjsjditic: zjsjditic,
                                zjsjdf47: zjsjdf47,
                                glfbzjfz: glfbzjfz,
                                glfbcxsj: glfbcxsj,
                                yftjbg: yftjbg,
                                yftjtx: yftjtx,
                                zjyybg: zjyybg,
                                zjyytx: zjyytx,
                                zjlxbg: zjlxbg,
                                zjlxtx: zjlxtx
                            },
                            dataType: 'json',
                            success: function (data) {
                                var data = data.body;
                                /*先画暂降密度图*/
                                var datalist = []
                                var sydy = ['0-10', '10-20',
                                    '20-30', '30-40',
                                    '40-50', '50-60',
                                    '60-70', '70-80',
                                    '80-90', '90-100'];
                                var cysj = ['0.02', '0.04',
                                    '0.06', '0.08', '0.1',
                                    '0.12~0.2', '0.2~0.4',
                                    '0.4~0.6', '0.6~1.2'];
                                for (var i = 0; i < data[0].length; i++) {
                                    var xxx = data[0][i].x;
                                    var yyy = data[0][i].y;
                                    var zzz = data[0][i].z;
                                    datalist[i] = [xxx, yyy,
                                        zzz]
                                }
                                Harmonic(sydy, cysj, datalist);
                                /*开始画ITIC、F47曲线图*/
                                allData = data[1];
                                initLine();
                                /*概率分布的两张图*/
                                var eventValue = data[2].eventvalue;
                                var pereventvalue = data[2].pereventvalue;
                                var persisttime = data[2].persisttime;
                                var sisttime = data[2].sisttime;
                                initChance(eventValue, pereventvalue,
                                    persisttime, sisttime);
                                /*波形*/
                                shunS(data[6]);
                                /*按时间统计*/
                                timeSta(data[3]);
                                /*按暂降原因统计*/
                                var x2 = [];
                                var y2 = [];
                                for (var i = 0; i < data[4].length; i++) {
                                    x2.push(data[4][i].cause);
                                    y2.push(data[4][i].count);
                                }
                                causeSta(x2, y2);
                                /*按暂降类型统计*/
                                var x3 = [];
                                var y3 = [];
                                for (var i = 0; i < data[5].length; i++) {
                                    x3.push(data[5][i].type);
                                    y3.push(data[5][i].count);
                                }
                                typeSta(x3, y3);
                                setTimeout(function () {
                                    var densityImage = myChart
                                        .getDataURL();
                                    var iticImage = tolerance
                                        .getDataURL();
                                    var f47Image = tolerance1
                                        .getDataURL();
                                    var startTime = $(
                                        "#startTime").val();
                                    var endTime = $(
                                        "#endTime").val();
                                    $
                                        .ajax({
                                            type: 'POST',
                                            url: '/pqs9200/report/exportReport',
                                            data: {
                                                densityImage: densityImage,
                                                iticImage: iticImage,
                                                f47Image: f47Image,
                                                eventValueImage: eventValueImage,
                                                persisttimeImage: persisttimeImage,
                                                timeImage: timeImage,
                                                causeImage: causeImage,
                                                typeImage: typeImage,
                                                shunSImg:JSON.stringify(shunSImg),
                                                startTime: startTime,
                                                endTime: endTime
                                            },
                                            dataType: 'text',
                                            async: false,
                                            success: function (
                                                data) {
                                                //***********关闭loading
                                                ityzl_CLOSE_LOAD_LAYER(idea);
                                                var name = $(
                                                    "#lineName")
                                                    .text();
                                                self.location.href = "/pqs9200/report/downMonitorReport?name="
                                                    + name;
                                            }
                                        });
                                }, 2000)
                            }
                        })

                }

                function nothing() {
                }

                var option = null;

                function Harmonic(sydy, cysj, datalist) {
                    myChart = echarts.init(document
                        .getElementById('density'));
                    option = {
                        tooltip: {
                            trigger: 'axis'
                        },
                        title: {
                            text: '暂降密度图',
                            x: 'center'

                        },
                        animation: false,
                        visualMap: {
                            max: 20,
                            show: false,
                            inRange: {
                                color: ['#313695', '#00BB00',
                                    '#ff8000', '#a50026']
                            }
                        },
                        xAxis3D: {
                            type: 'category',
                            name: '剩余电压(%)',
                            data: sydy
                        },
                        yAxis3D: {
                            type: 'category',
                            name: '持续时间(s)',
                            data: cysj
                        },
                        zAxis3D: {
                            type: 'value',
                            splitNumber: 10,
                            minInterval: 10,
                            name: '次数'
                        },
                        grid3D: {
                            boxWidth: 200,
                            boxDepth: 100,
                            light: {
                                main: {
                                    intensity: 1.2
                                },
                                ambient: {
                                    intensity: 0.8
                                }
                            }
                        },
                        series: [{
                            type: 'bar3D',
                            data: datalist.map(function (item) {
                                return {
                                    value: [item[0], item[1],
                                        item[2]]
                                }
                            }),
                            shading: 'realistic',
                            label: {
                                show: false,
                                textStyle: {
                                    fontSize: 16,
                                    borderWidth: 1
                                }
                            },
                            itemStyle: {
                                opacity: 1
                            },
                            emphasis: {
                                label: {
                                    textStyle: {
                                        fontSize: 20,
                                        color: '#900'
                                    }
                                },
                                itemStyle: {
                                    color: '#900'
                                }
                            }
                        }]
                    }
                    // echarts.dispose($("#density")[0]);/**/
                    // 使用刚指定的配置项和数据显示图表
                    myChart.setOption(option);

                }

                function initLine() {
                    var pointI = [];
                    var pointIun = [];
                    var pointF = [];
                    var pointFun = [];
                    if (allData == null) {
                    } else {
                        for (var i = 0; i < allData.length; i++) {
                            var point = [];
                            var xx = allData[i].persisttime;
                            var yy = allData[i].eventvalue;
                            var time = allData[i].time;
                            point = [xx, yy, time];
                            if (xx <= 0.003) {
                                var line = 0;
                                line = 230 - 30000 * xx;
                                if (yy > line) {
                                } else {
                                    pointI.push({
                                        value: point
                                    });
                                }
                            } else if (xx <= 0.02) {
                                if (yy > 120) {
                                    pointIun.push({
                                        value: point
                                    });
                                } else {
                                    pointI.push({
                                        value: point
                                    });
                                }
                            } else if (xx <= 0.5) {
                                if (yy > 120 || yy < 70) {
                                    pointIun.push({
                                        value: point
                                    });
                                } else {
                                    pointI.push({
                                        value: point
                                    });
                                }
                            } else if (xx <= 10) {
                                if (yy > 110 || yy < 80) {
                                    pointIun.push({
                                        value: point
                                    });
                                } else {
                                    pointI.push({
                                        value: point
                                    });
                                }
                            } else {
                                if (yy > 110 || yy < 90) {
                                    pointIun.push({
                                        value: point
                                    });
                                } else {
                                    pointI.push({
                                        value: point
                                    });
                                }
                            }

                            if (xx < 0.05) {
                                pointF.push({
                                    value: point
                                });
                            } else if (xx < 0.12) {
                                if (yy > 50) {
                                    pointF.push({
                                        value: point
                                    });
                                } else {
                                    pointFun.push({
                                        value: point
                                    });
                                }
                            } else if (xx < 0.16) {
                                if (yy > 70) {
                                    pointF.push({
                                        value: point
                                    });
                                } else {
                                    pointFun.push({
                                        value: point
                                    });
                                }
                            } else {
                                if (yy > 80) {
                                    pointF.push({
                                        value: point
                                    });
                                } else {
                                    pointFun.push({
                                        value: point
                                    });
                                }
                            }
                        }
                    }
                    initItic(pointI, pointIun);
                    initF47(pointF, pointFun);
                }

                function shunS(option) {
                    shunSImg = [];
                    for (var i=0;i<option.length;i++){
                        var shunSImgs = new Array();
                        for (var j=0;j<option[i].length;j++){
                            var titleName= option[i][j].title;
                            var unit= option[i][j].unit;
                            var chart = Highcharts.chart('shunshi',{
                                plotOptions: {
                                    series: {
                                        animation: false
                                    },
                                    line: {
                                        dataGrouping: {
                                            enabled: true
                                        }
                                    }
                                },
                                title: {
                                    text:""+titleName+"",
                                    style: {
                                        fontSize: '14px'
                                    }
                                },
                                chart: {
                                    type: 'spline',
                                    events: {
                                        load: function() {
                                            if (true) {
                                                this.series[2].show();
                                            } else {
                                                this.series[2].hide();
                                            }
                                        }
                                    }
                                },
                                rangeSelector: {
                                    enabled: false,
                                },
                                navigator: {
                                    enabled: false
                                },
                                scrollbar: {
                                    enabled: false
                                },
                                credits: false,
                                colors: ['#DAA520', '#2E8B57', '#A52a2a'],
                                xAxis: {
                                    title: {
                                        text: 'ms',
                                        enabled: true,
                                        align: 'high'
                                    },
                                    labels: {
                                        formatter: function() {
                                            return this.value;
                                        }
                                    }
                                },
                                yAxis: {
                                    title: {
                                        align: 'high',
                                        offset: 0,
                                        text: unit,
                                        rotation: 0,
                                        y: -10
                                    },
                                    max: option[i][j].max,
                                    min: option[i][j].min,
                                    opposite: false
                                },
                                legend: {
                                    align: 'left',
                                    verticalAlign: 'top',
                                    enabled: true
                                },
                                series: [{
                                    marker: {
                                        symbol: 'circle'
                                    },
                                    name: 'A相',
                                    data:option[i][j].dataA
                                }, {
                                    marker: {
                                        symbol: 'circle'
                                    },
                                    name: 'B相',
                                    data:option[i][j].dataB
                                }, {
                                    marker: {
                                        symbol: 'circle'
                                    },
                                    name: 'C相',
                                    data: option[i][j].dataC,
                                    showInLegend: true
                                }]
                            });
                            var chartsvg = chart.getSVG();
                            var svgContainer = document.getElementById("shunshi");
                            canvg(svgContainer, chartsvg);
                            shunSImgs.push(svgContainer.toDataURL("image/png"));
                        }
                        shunSImg.push(shunSImgs);
                    }
                }

                function initItic(pointI, pointIun) {
                    var option = {
                        backgroundColor: '#f9f9f9',// 背景色,
                        title: {
                            text: 'ITIC曲线',
                            x: 'center'
                        },
                        animation: false,
                        //控制图标在dataroom中的位置大小
                        grid: {
                            left: '2%',
                            right: '6%',
                            bottom: '3%',
                            containLabel: true
                        },
                        legend: {
                            data: ['上限', '下限', '可容忍事件', '不可容忍事件'],
                            selectedMode: false,
                            x: 'left'
                        },
                        xAxis: [{
                            type: 'log',
                            min: '0.001',
                            max: '1000',
                            splitLine: {
                                show: false
                            },
                            name: '(时间:s)'
                        }],
                        yAxis: [{
                            type: 'value',
                            splitNumber: 10,
                            minInterval: 3,
                            name: '(%)'
                        }],
                        series: [
                            {
                                name: '可容忍事件',
                                type: 'scatter',
                                symbolSize: 8,
                                symbol: 'circle',
                                data: pointI
                            },
                            {
                                name: '不可容忍事件',
                                type: 'scatter',
                                symbolSize: 8,
                                symbol: 'circle',
                                data: pointIun
                            },
                            {
                                name: '上限',
                                type: 'line',
                                data: [[0.001, 200],
                                    [0.003, 140],
                                    [0.003, 120],
                                    [0.5, 120],
                                    [0.5, 110],
                                    [10, 110],
                                    [100, 110],
                                    [1000, 110]]
                            },
                            {
                                name: '下限',
                                type: 'line',
                                data: [[0.02, 0],
                                    [0.02, 70],
                                    [0.5, 70],
                                    [0.5, 80],
                                    [10, 80], [10, 90],
                                    [100, 90],
                                    [1000, 90]]
                            }

                        ],
                        color: ['#00DB00', '#FF0000', '#FF7E50',
                            '#00E3E3']
                    };
                    echarts.dispose($("#itic")[0]);
                    tolerance = echarts.init(document
                        .getElementById('itic'));
                    tolerance.setOption(option);
                }

                function initF47(pointF, pointFun) {
                    var part = new Array();
                    part[0] = [0.05, 0];
                    part[1] = [0.05, 50];
                    part[2] = [0.12, 50];
                    part[3] = [0.12, 70];
                    part[4] = [0.16, 70];
                    part[5] = [0.16, 80];
                    part[6] = [10, 80];
                    part[7] = [1000, 80];
                    var option = {
                        backgroundColor: '#f9f9f9',//背景色,
                        title: {
                            text: 'SEMI F47曲线',
                            x: 'center'
                        },
                        animation: false,
                        //控制图标在dataroom中的位置大小
                        grid: {
                            left: '2%',
                            right: '6%',
                            bottom: '3%',
                            containLabel: true
                        },
                        legend: {
                            data: ['分割线', '可容忍事件', '不可容忍事件'],
                            selectedMode: false,
                            x: 'left'
                        },
                        xAxis: [{
                            type: 'log',
                            min: '0.001',
                            max: '1000',
                            splitLine: {
                                show: false
                            },
                            name: '(时间:s)'
                        }],
                        yAxis: [{
                            type: 'value',
                            splitNumber: 10
                        }],
                        series: [{
                            name: '可容忍事件',
                            type: 'scatter',
                            symbolSize: 8,
                            symbol: 'circle',
                            data: pointF
                        }, {
                            name: '不可容忍事件',
                            type: 'scatter',
                            symbolSize: 8,
                            symbol: 'circle',
                            data: pointFun
                        }, {
                            name: '分割线',
                            type: 'line',
                            data: part
                        }],
                        color: ['#00DB00', '#FF0000', '#FF7E50']
                    };
                    echarts.dispose($("#f47")[0]);
                    tolerance1 = echarts.init(document
                        .getElementById('f47'));
                    tolerance1.setOption(option);
                }

                function initChance(eventValue, pereventvalue, persisttime, sisttime) {
                    var option1 = {
                        backgroundColor: '#f9f9f9',//背景色,
                        title: {
                            text: '暂降幅值的概率分布函数',
                            x: 'center'
                        },
                        animation: false,
                        legend: {
                            show: false,
                            data: ['暂降幅值']
                        },
                        calculable: true,
                        xAxis: [{
                            type: 'category',
                            boundaryGap: false,
                            name: '暂降幅值',
                            nameLocation: 'center',
                            nameGap: 20,
                            nameTextStyle: {
                                fontSize: 15
                            },
                            data: ['0', '10%', '20%', '30%',
                                '40%', '50%', '60%', '70%',
                                '80%', '90%']
                        }],
                        yAxis: [{
                            type: 'value',
                            name: '概率分布',
                            nameLocation: 'center',
                            nameGap: 40,
                            nameTextStyle: {
                                fontSize: 15
                            },
                            axisLabel: {
                                formatter: '{value} %'
                            }
                        }, {
                            type: 'value',
                            name: '占比',
                            nameLocation: 'center',
                            nameGap: 40,
                            nameTextStyle: {
                                fontSize: 15
                            },
                            axisLabel: {
                                formatter: '{value} %'
                            }
                        }],
                        series: [{
                            name: '暂降幅值',
                            type: 'line',
                            data: eventValue
                        }, {
                            name: '占比',
                            type: 'bar',
                            data: pereventvalue,
                            barWidth: 30
                        }]
                    };

                    var option2 = {
                        backgroundColor: '#f9f9f9',//背景色,
                        title: {
                            text: '持续时间的概率分布函数',
                            x: 'center'
                        },
                        animation: false,
                        legend: {
                            show: false,
                            data: ['持续时间']
                        },
                        calculable: true,
                        xAxis: [{
                            type: 'category',
                            boundaryGap: false,
                            name: '暂降持续时间(s)',
                            nameLocation: 'center',
                            nameGap: 20,
                            nameTextStyle: {
                                fontSize: 15
                            },
                            data: ['0', '0.1', '0.25', '0.5',
                                '1', 'inf']
                        }],
                        yAxis: [{
                            type: 'value',
                            name: '概率分布',
                            nameLocation: 'center',
                            nameGap: 40,
                            nameTextStyle: {
                                fontSize: 15
                            },
                            axisLabel: {
                                formatter: '{value} %'
                            }
                        }, {
                            type: 'value',
                            name: '占比',
                            nameLocation: 'center',
                            nameGap: 40,
                            nameTextStyle: {
                                fontSize: 15
                            },
                            axisLabel: {
                                formatter: '{value} %'
                            }
                        }],
                        series: [{
                            name: '持续时间',
                            type: 'line',
                            data: sisttime
                        }, {
                            name: '占比',
                            type: 'bar',
                            data: persisttime,
                            barWidth: 30
                        }]
                    };
                    echarts.dispose($("#eventValue")[0]);
                    echarts.dispose($("#persisttime")[0]);
                    var eventValueChart = echarts.init(document
                        .getElementById('eventValue'));
                    eventValueChart.setOption(option1);
                    var persisttimeChart = echarts.init(document
                        .getElementById('persisttime'));
                    persisttimeChart.setOption(option2);
                    eventValueImage = eventValueChart.getDataURL();
                    persisttimeImage = persisttimeChart
                        .getDataURL();
                }

                function timeSta(interval) {
                    echarts.dispose($("#time")[0]);
                    var timeChart = echarts.init($("#time")[0]);
                    var months = new Array();
                    var handle = new Array();
                    if (interval != null) {
                        for (var i = 0; i < interval.length; i++) {
                            if (interval[i].month == "01" | i == 0) {
                                months[i] = interval[i].month
                                    + "\n(" + interval[i].year
                                    + ")";
                            } else {
                                months[i] = interval[i].month;
                            }
                            handle[i] = interval[i].times;
                        }
                    }
                    var option = {
                        backgroundColor: '#f9f9f9',//背景色,
                        title: {
                            text: '月份统计',
                            x: 'center'
                        },
                        color: ['#FF7E50'],
                        legend: {
                            data: ['暂降次数'],
                            x: 'left'
                        },
                        grid: {
                            left: '3%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis: [{
                            type: 'category',
                            data: months,
                            name: '月份',
                            splitLine: {
                                show: false
                            },
                            axisLabel: {
                                show: true,
                                interval: 0
                            }
                        }],
                        yAxis: [{
                            type: 'value',
                            name: '次'
                        }],
                        series: [{
                            name: '暂降次数',
                            type: 'bar',
                            barMaxWidth: 50,
                            itemStyle: {
                                normal: {
                                    label: {
                                        show: true,
                                        textStyle: {
                                            label: {
                                                show: true,
                                                position: 'top'
                                            },
                                            color: '#800080'
                                        }
                                    }
                                }
                            },
                            data: handle
                        }]
                    };
                    timeChart.setOption(option);
                    timeImage = timeChart.getDataURL();
                }

                function causeSta(xx, yy) {
                    echarts.dispose($("#cause")[0]);
                    var causeChart = echarts.init($("#cause")[0]);
                    var option = {
                        backgroundColor: '#f9f9f9',//背景色,
                        title: {
                            text: '暂降原因',
                            x: 'center'
                        },
                        legend: {
                            data: ['原因'],
                            selectedMode: false,
                            x: 'left'
                        },
                        xAxis: [{
                            type: 'category',
                            data: xx,
                            splitLine: {
                                show: false
                            },
                            name: '原因'
                        }],
                        yAxis: [{
                            type: 'value',
                            name: '次'
                        }],
                        series: [{
                            name: '原因',
                            type: 'bar',
                            data: yy,
                            itemStyle: {
                                normal: {
                                    label: {
                                        show: true,
                                        position: 'top'
                                    },
                                    color: '#FF7E50'
                                }
                            },
                            barMaxWidth: 50
                        }]
                    };
                    causeChart.setOption(option);
                    causeImage = causeChart.getDataURL();
                }

                function typeSta(xx, yy) {
                    echarts.dispose($("#type")[0]);
                    var typeChart = echarts.init($("#type")[0]);
                    var option = {
                        backgroundColor: '#f9f9f9',//背景色,
                        title: {
                            text: '暂降类型',
                            x: 'center'
                        },
                        legend: {
                            data: ['类型'],
                            selectedMode: false,
                            x: 'left'
                        },
                        xAxis: [{
                            type: 'category',
                            data: xx,
                            splitLine: {
                                show: false
                            },
                            name: '类型'
                        }],
                        yAxis: [{
                            type: 'value',
                            name: '次'
                        }],
                        series: [{
                            name: '类型',
                            type: 'bar',
                            data: yy,
                            itemStyle: {
                                normal: {
                                    label: {
                                        show: true,
                                        position: 'top'
                                    },
                                    color: '#FF7E50'
                                }
                            },
                            barMaxWidth: 50
                        }]
                    };
                    typeChart.setOption(option);
                    typeImage = typeChart.getDataURL();
                }

            });

    /**
     *获取模板策略
     */
    function getTemplate() {
        $.ajax({
            type: "post",
            url: "/pqs9200/report/monitorTemplate",
            dataType: "json",
            success: function (data) {
                if (data.code == 500) {
                    $("#template").append(
                        "<option value='noTemplate'>没有模板策略</option>");
                } else {
                    templateDatas = data.body;
                    for (var i = 0; i < templateDatas.length; i++) {
                        $("#template").append(
                            "<option value='" + templateDatas[i].rpName + "'>"
                            + templateDatas[i].rpName
                            + "</option>");
                    }
                    checkedByTemplate($("#template").val());
                }
            }
        })
    }

    /**
     * 根据模板策略勾选
     */
    function checkedByTemplate(templateName) {
        if (templateName != "noTemplate") {
            for (var i = 0; i < templateDatas.length; i++) {
                if (templateDatas[i].rpName === templateName) {
                    //执行勾选项
                    var rptDatas = templateDatas[i].rptDatas;
                    for (var j = 0; j < rptDatas.length; j++) {
                        $("#" + rptDatas[j].rdName).prop("checked", true);
                        $("#" + rptDatas[j].rdName + "~div:first")
                            .addClass("layui-form-checked");
                    }
                }
            }
        }
    }

    /**
     * 模板切换
     */
    $("#template").change(function () {
        //先清空其他所有的
        $(":checkbox").removeAttr("checked");
        $(".layui-form-checkbox").removeClass("layui-form-checked");
        checkedByTemplate($(this).val());
    });
</script>
</body>
</html>
