<%@ 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/jquery/jquery-ui.css">
    <link rel="stylesheet" href="${ctx}/js/plugin/layerui/css/layui.css">
    <link rel="stylesheet" href="${ctx}/css/plugin/bootstrap/bootstrap.css">
    <link rel="stylesheet" href="${ctx}/css/plugin/bootstrap/dataTables.bootstrap.css">
    <link rel="stylesheet" href="${ctx}/css/plugin/bootstrap/bootstrap-datetimepicker.css">
    <link rel="stylesheet" href="${ctx}/css/plugin/ztree/zTreeStyle.css">
    <link rel="stylesheet" href="${ctx}/css/plugin/fontAwesome/font-awesome.min.css">
    <link rel="stylesheet" href="${ctx}/css/basic.css">
    <style>
        html, body {
            background-color: #F9F9F9 !important;
            overflow: hidden;
        }

        .tips {
            color: red;
            font-size: 12px;
            font-weight: bold;
            cursor: pointer;
        }

        #tipTable {
            font-size: 10px !important;
        }

        #tipTable td {
            padding: 2px !important;
            vertical-align: center !important;
        }

        #tips {
            display: none;
            position: absolute;
            top: 30px;
            right: 0px;
            z-index: 999;
            background-color: #F9F9F9;
        }

        #areaTable {
            width: 100% !important;
        }
    </style>
</head>
<body>
<div class="container-fluid">
    <div class="form-inline mt10">
        <div class="form-group has-feedback mr10">
            <label>区域：</label>
            <div class="disinlineb">
                <input id="area" class="form-control" style="width: 140px" readonly>
                <i class="fa fa-caret-down areaicon"></i>
                <i class="fa fa-caret-up treeUpIcon disnone"
                   style="color: #C9CBCE;position: absolute;left: 60px;font-size: 18px;z-index: 9999;top: 20px"></i>
                <div class=" ztree treeUpDiv disnone " id="areaTree"
                     style="position: absolute;width: 140px;height: 147px;border: 2px solid #C9CBCE;overflow: auto;top: 32px;background: #fff;z-index: 100;border-radius: 2px">
                </div>
            </div>
        </div>
        <div class="form-group">
            <%@include file="../../include/time.jsp" %>
            <button type="button" class="btn btn-primary " id="query">
                <i class="glyphicon glyphicon-search"></i>
            </button>
        </div>
        <div class="form-group fr tips">
				<span onMouseOver='divdangerMouseOver()'
                      onMouseOut='divdangerMouseOut()'>详细区域暂降评估等级</span>
        </div>
        <div id="tips">
            <table id="tipTable"
                   class="table table-striped table-bordered dataTable no-footer">
                <thead>
                <tr>
                    <td>区域暂降评估等级</td>
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                    <td>4</td>
                </tr>
                </thead>
            </table>
        </div>
    </div>
</div>

<div class="row">
    <div class="tab-content">
        <div class="col-sm-5 col-md-5" id="map"></div>
        <div class="col-sm-7 col-md-7">
            <div class="row">
                <div class="col-sm-12 col-md-12" id="bar"></div>
                <div class="col-sm-12 col-md-12 pdl30 pdr30 " id="table" >
                    <table id="areaTable"
                           class="table table-striped table-bordered dataTable no-footer">
                        <thead>
                        <tr>
                            <th>区域</th>
                            <th>区域暂降评估</th>
                            <th>等级</th>
                        </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
</div>

<script src="${ctx}/js/plugin/jquery.min.js"></script>
<script src="${ctx}/js/plugin/bootstrap/bootstrap.min.js"></script>
<script src="${ctx}/js/plugin/bootstrap/jquery.dataTables.min.js"></script>
<script src="${ctx}/js/plugin/bootstrap/dataTables.bootstrap.min.js"></script>
<script src="${ctx}/js/plugin/bootstrap/dataTables.buttons.min.js"></script>
<script src="${ctx}/js/plugin/bootstrap/buttons.html5.min.js"></script>
<script src="${ctx}/js/plugin/layerui/layer.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}/jspJS/utils/judgeAjaxStatus.js"></script>
<script src="${ctx}/jspJS/utils/loading.js"></script>
<script src="${ctx}/js/basic.js"></script>
<script src="${ctx}/js/plugin/jquery.gallery.js"></script>
<script src="${ctx}/jspJS/utils/timeControl.js"></script>
<script src="${ctx}/js/plugin/echarts3D/echarts.js"></script>
<script src="${ctx}/js/plugin/ztree/jquery.ztree.core.js"></script>
<script src="${ctx}/js/area.js"></script>
<script src="${ctx}/js/mapCommon.js"></script>
<script src="${ctx}/js/color.js"></script>
<script src="${ctx}/jspJS/utils/barUtil.js"></script>
<script>
    var picHeight, balanceData, mapEvent,cityName;
    var $area = $("#area");
    var $startTime = $("#startTime");
    var $endTime = $("#endTime");
    var powerName = "综合";
    $("#interval").val("月份");
    $(function () {
        picHeight = ($(window).height() - 37);
        $.ajax({
            type: "POST",
            url: "/pqs9200/user/getAreasInfo",
            dataType: 'json',
            success: function (data) {
                $("#area").val(data[0].name);
                $("#area").attr("index", data[0].id);
                areaTree = $.fn.zTree.init($("#areaTree"), settingAreaTree, data);
                //初始化页面内容
                var area = $area.eq(0).attr("index");
                var startTime = $startTime.eq(0).val();
                var endTime = $endTime.eq(0).val();
                cityName=$area.val();
                refresh(area, startTime, endTime);
            }
        })
    });

    function refresh(area, startTime, endTime) {
        var i;
        $.ajax({
            url: '/pqs9200/balance/getBalanceInfo',
            type: 'post',
            data: {
                area: area,
                startTime: startTime,
                endTime: endTime
            },
            beforeSend: function () {
                i = ityzl_SHOW_LOAD_LAYER();
            },
            dataType: 'json',
            success: function (data) {
                if (data.body === null || data.body == []) {
                    balanceData = null;
                } else {
                    balanceData = packageData(data.body);
                }
                startQuery();
                ityzl_CLOSE_LOAD_LAYER(i);
            }
        })
    }

    function packageData(data) {
        var result = [];
        for (var i = 0; i < data.length; i++) {
            var obj = new Object();
            obj.name = data[i].areaName;
            if (data[i].isCount == 1) {
                obj.data = data[i].ci.toFixed(2);
                obj.level = judgeLevel(obj.data).level;
            } else if (data[i].list == null) {
                obj.data = '/';
                obj.level = '/';
            } else {
                obj.data = '(暂无数据)';
                obj.level = '(暂无数据)';
            }
            obj.monitor = (data[i].list == null ? 0 : data[i].list.length);
            result.push(obj);
        }
        return result;
    }

    function judgeLevel(d) {
        var obj = new Object();
        var data = parseFloat(d);

        if (data >= 0 && data <= 0.4) {
            obj.level = 1;
            obj.color = "#2E8B56";
        } else if (data > 0.4 && data <= 0.8) {
            obj.level = 2;
            obj.color = "#919B38";
        } else if (data > 0.8 && data <= 1.2) {
            obj.level = 3;
            obj.color = "#D39320";
        } else if (data > 1.2) {
            obj.level = 4;
            obj.color = "#A52A2A";
        } else if (d == '/') {
            obj.color = noMonitor;
        } else {
            obj.color = noData;
        }

        return obj;
    }

    function initMap(quentityData, name, lineFeed,route) {
        var $map = $("#map");
        $map.css("height", picHeight);
        var $bar = $("#bar");
        $bar.css("height", picHeight * 0.5);
        powerName = name;

        mapEvent = echarts.init(document.getElementById('map'));
        var pNode, node;
        var area = $area.eq(0).attr("index");
        $.ajax({
            url: '/pqs9200/area/getMapInfo',
            type: 'post',
            data: {
                area: area,
            },
            async: false,
            dataType: 'json',
            success: function (data) {
                pNode = data.body.name;
                node = data.body.subName;
            }
        })

        if (quentityData == null) {
            var geoJson = getFullMapData(pNode, node);
            var d = [];
            echarts.registerMap('区域暂降评估', geoJson);
            renderMapEvent(d);
        } else {
            if (quentityData.length > 1) {
                var geoJson = getFullMapData(pNode, node);
                var d = [];
                for (var i = 0; i < quentityData.length; i++) {
                    var color = judgeLevel(quentityData[i].data).color;
                    var dataTemp = quentityData[i].data;
                    d.push({
                        name: quentityData[i].name,
                        value: dataTemp,
                        emphasis: {
                            itemStyle: {
                                areaColor: color,
                                borderColor: "white",
                                borderWidth: "1"
                            }
                        }
                    })
                }
                echarts.registerMap('区域暂降评估', geoJson);
                renderMapEvent(d);
            } else {
                var d = [];
                var color = judgeLevel(quentityData[0].data).color;
                var dataTemp = quentityData[0].data;
                d.push({
                    name: quentityData[0].name,
                    value: dataTemp,
                    emphasis: {
                        itemStyle: {
                            areaColor: color,
                            borderColor: "white",
                            borderWidth: "1"
                        }
                    }
                });
                var data = getFullMapData(pNode, node);
                echarts.registerMap('区域暂降评估', data);
                renderMapEvent(d);
            }
        }
        //绘制柱状图
        var barOption = echarts.init($("#bar")[0]);
        var inte = [];
        var areas = [];
        var colorList = [];
        if (null != quentityData) {
            for (var i = 0; i < quentityData.length; i++) {
                areas[i] = quentityData[i].name +lineFeed+"("
                    + quentityData[i].monitor + ")";
                var singleData = {};
                singleData.value = isNaN(parseInt(quentityData[i].level)) ? 0.2 : quentityData[i].level;
                singleData.des = quentityData[i].level;
                colorList.push(judgeLevel(quentityData[i].data).color);
                inte[i] = singleData;
            }
        }
        var option = {
            backgroundColor: canvasBG,//背景色
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                },
                formatter: function (params) {
                    return params[0].name + '<br/>区域暂降评估等级 : '
                        + params[0].data.des;
                }
            },
            title: {
                text: cityName,
                x: 'center'
            },
            //控制图标在dataroom中的位置大小
            grid: {
                left: '3%',
                right: '10%',
                bottom: '10%',
                containLabel: true
            },
            xAxis: [{
                type: 'category',
                data: areas,
                splitLine: {
                    show: false
                },
                name: '地区\n(监测点数)',
                axisLabel: {
                    interval: 0,
                    show: true,
                    rotate:route,
                    fontSize:10
                }

            }],
            yAxis: [{
                name: '(等级)',
                type: 'value',
                min: 0,
                max: 4
            }],
            series: [{
                name: name,
                type: 'bar',
                barMaxWidth: barMax,
                data: inte,
                itemStyle: {
                    normal: {
                        color: function (params) {
                            return colorList[params.dataIndex];
                        }
                    }
                }
            }]
        };
        barOption.setOption(option);
        //填充表格
        var height = picHeight * 0.5 - 45;
        if (quentityData == null) {
            quentityData = [];
        }
        $("#areaTable").DataTable({
            data: quentityData,
            autoWidth: false,
            order: [],
            columnDefs: [{
                "width": "33%",
                "targets": 0
            }, {
                "width": "33%",
                "targets": 1
            }, {
                "width": "33%",
                "targets": 2
            }],
            paging: false,
            lengthChange: false,
            searching: false,
            destroy: true,
            scrollY: height,
            info: false,
            pageLength: 100,
            language: {
                url: '/pqs9200/json/chine.json',
            },
            columns: [{
                data: 'name'
            }, {
                data: 'data',
                render: function (data, type, full, meta) {
                    return data;
                }
            }, {
                data: 'level'
            }],
        })
    }

    function renderMapEvent(data) {
        var optionEvent = {
            backgroundColor: canvasBG,
            title: {
                text: '区域暂降评估',
                left: 'center'
            },
            animationDuration: 1000,
            animationEasing: 'cubicOut',
            animationDurationUpdate: 1000,
            tooltip: {
                trigger: 'item',
                formatter: function (params) {
                    var tips = "";
                    if (params.data.value == undefined) {
                        tips = '<font style=\'color:' + white + '\'>暂无数据</font><br/>';
                    } else {
                        tips += '<font style=\'color:' + white + '\'>'
                            + params.data.name + '</font><br/>区域暂降评估'
                            + '<font style=\'color:' + white + '\'>：'
                            + params.data.value + '</font><br/>';
                    }
                    return tips;
                }
            }
        };
        optionEvent.visualMap = {
            type: 'piecewise',
            pieces: [{
                gt: 1.2,
                label: '4级(1.2,+∞]'
            }, {
                gt: 0.8,
                lte: 1.2,
                label: '3级(0.8,1.2]'
            }, {
                gt: 0.4,
                lte: 0.8,
                label: '2级(0.4,0.8]'
            }, {
                gt: -1,
                lte: 0.4,
                label: '1级[0,0.4]'
            }],
            color: [red, yellow, green],
            inverse: true
        };
        optionEvent.series = [{
            type: 'map',
            mapType: '区域暂降评估',
            roam: true,
            label: {
                normal: {
                    show: true,
                    textStyle: {
                        ccolor: 'black',
                        fontSize: 10
                    }
                },
                emphasis: {
                    show: true,
                    textStyle: {
                        color: '#fff',
                        fontSize: 10
                    }
                }
            },
            itemStyle: {
                normal: {
                    areaColor: '#CCCCCC',
                    borderColor: 'dodgerblue'
                },
                emphasis: {
                    areaColor: '#B6B5B5'
                }
            },
            data: data
        }];
        mapEvent.dispatchAction({
            type: 'restore'
        })
        mapEvent.setOption(optionEvent);
    }

    $("#query").click(function () {
        var area = $area.eq(0).attr("index");
        var startTime = $startTime.eq(0).val();
        var endTime = $endTime.eq(0).val();
        cityName=$area.val();
        refresh(area, startTime, endTime);
    });

    function divdangerMouseOver() {
        var tab = parent.$("#target").text()
        initTipTable([["相对得分", "[0,0.4]", "(0.4,0.8]", "(0.8,1.2]",
            "(1.2,+∞)"]]);
        $("#tips").css("display", "block");
    }

    function divdangerMouseOut() {
        $("#tips").css("display", "none");
    }

    function initTipTable(data) {
        $("#tipTable").DataTable({
            data: data,
            autoWidth: false,
            ordering: false,
            paging: false,
            lengthChange: false,
            searching: false,
            destroy: true,
            info: false,
            language: {
                url: '/pqs9200/json/chine.json',
            }
        })
    }

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

    function startQuery() {
        it = setInterval('refreshQuery()', 100);
    }

    /* 刷新查询 */
    function refreshQuery() {
        var width = $("#table").width();
        try {
            if (width > 100) {
                if (balanceData === null) {
                    initMap(null, '区域暂降评估', 0);
                } else {
                    var balanceLength = balanceData===null?0:balanceData.length;
                    // balanceLength=8;
                    // balanceData=balanceData.slice(0,8);
                    if (parseInt(balanceLength) > parseInt(barUpperLimit6)) {
                        initMap(balanceData, '区域暂降评估',noLineFeed, barRouteIncline);
                    }
                    else {
                        initMap(balanceData, '区域暂降评估',lineFeed, barRouteZero);
                    }
                }

            }
        } catch (e) {

        } finally {
            window.clearInterval(it);
        }
    }

    //特殊处理，表头紧缩问题--end
</script>
</body>
</html>
