<%@ page import="org.apache.commons.lang.StringUtils" %>
<%@ page language="java" pageEncoding="UTF-8" contentType="text/html; charset=UTF-8" %>
<%@ page isELIgnored="false" %>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
    <%
    String basePath = request.getContextPath();
%>
<!DOCTYPE html>
<html>
<head>
    <jsp:include page="../../../common/admin/head.jsp"></jsp:include>
    <link  rel="stylesheet" type="text/css" href="<%=basePath%>/resource/css/admin/home/index.css">

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
        body, html {width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}
        #allmap{width:100%;height:500px;}
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=RleRpI1DQegNo17XGsVvUUS1e3oiubUG"></script>

</head>
<body>
<jsp:include page="../../../common/admin/body_pre.jsp"></jsp:include>
<div class="row hidden-print">
    <div class="col-lg-12">
        <div class="ibox">
            <div class="ibox-title">
                <h2>城市运行监测预警</h2>
                <ol class="breadcrumb">
                    <li>
                        <a href="javascript:void(0);" >公共安全</a>
                    </li>
                    <li class="active">
                        <strong>交通安全</strong>
                    </li>
                </ol>
            </div>
        </div>
    </div>
</div>
<%--////////////////--%>
<div class="row hidden-print">
    <div class="col-lg-3 col-md-3">
        <div class="ibox shortcut">
            <div id="divChart1" style="width: 100%;height: 400px;"></div>
        </div>
    </div>
    <div class="col-lg-3 col-md-3">
        <div class="ibox shortcut">
            <div id="divChart2" style="width: 100%;height: 400px;"></div>
        </div>
    </div>
    <div class="col-lg-3 col-md-3">
        <div class="ibox shortcut">
            <div id="divChart3" style="width: 100%;height: 400px;"></div>
        </div>
    </div>
    <div class="col-lg-3 col-md-3">
        <div class="ibox shortcut">
            <div id="divChart4" style="width: 100%;height: 400px;"></div>
        </div>
    </div>
</div>
<div class="row hidden-print">
    <div style="position: absolute;z-index: 999; font-weight: bold;font-size: 20px;background: #fff;left:26px">交通事故分布</div>
    <div class="col-lg-9 col-md-9">
        <div class="ibox shortcut">
            <div id="divChart5" style="width: 100%;height: 400px;"></div>
        </div>
    </div>
    <div class="col-lg-3 col-md-3">
        <div class="ibox shortcut">
            <div id="divChart6" style="width: 100%;height: 400px;"></div>
        </div>
    </div>
</div>
<jsp:include page="../../../common/admin/body_post.jsp"></jsp:include>
<script type="text/javascript" src="<%=basePath%>/resource/plugins/echarts/echarts-liquidfill.js"></script>
</body>
<script type="text/javascript">
    var myChart1 = echarts.init(document.getElementById('divChart1'));
    option = {
        title : {
            text: '万人交通事故死亡率'
        },
        series: [{
            name: '处理率',
            type: 'liquidFill',
            data: [],
            radius: '80%'
        }]
    };
    myChart1.setOption(option);
    var fnChart1=function(){
        $.get('<%=basePath%>/admin/trafficSecurity/trafficdeathrate.action').done(function (result) {
            // 填入数据
            myChart1.setOption({
                series: [{
                    data: [result.data]
                }]
            });
        })
    }
    fnChart1();
    /*//////////////////////////////////*/
    var myChart2 = echarts.init(document.getElementById('divChart2'));
    option = {
        title : {
            text: '交通事故类型占比',
            subtext:''
        },
        legend: {
            orient: 'vertical',
            left: 'right',
            top:15,
            data:  []
        },
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        series: [
            {
                name:'区域工伤事故占比',
                type:'pie',
                radius: ['50%', '70%'],
                avoidLabelOverlap: false,
                label: {
                    normal: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        show: true,
                        textStyle: {
                            fontSize: '30',
                            fontWeight: 'bold'
                        }
                    }
                },
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                data:[]
            }
        ]
    };
    myChart2.setOption(option);
    var fnMyChart2=function() {
        $.get('<%=basePath%>/admin/trafficSecurity/trafficaccidentpro.action', function (result) {
            myChart2.setOption({
                title:{
                    subtext: "最新总事故数:"+result.data.total +"起"
                },
                legend: {
                    data: result.data.names
                },
                series: [{
                    // 根据名字对应到相应的系列
                    data: result.data.list
                }]
            });
        })
    }
    fnMyChart2();
    /*///////////////////////////////////*/
    var myChart3 = echarts.init(document.getElementById('divChart3'));
    var colors = ['#5793f3', '#d14a61', '#675bba'];
    option = {
        title: {
            text: '交通事故趋势',
        },
        tooltip : {
            trigger: 'axis',
            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        legend: {
            orient:'horizontal',
            left: 'right',
            itemWidth:5,
            itemHeight:5,
            top:23,
            data: ['死亡人数(人)','死亡率(%)']
        },
        grid: {
            left:'15%',
            top:'20%'
        },
        xAxis:  {
            type: 'category',
            data: []

        },
        yAxis: [
            {
                type: 'value',
                name: '死亡人数(人)',
                min: 0,
                max: 100,
                position: 'left',
                axisLine: {
                    lineStyle: {
                        color: colors[1]
                    }
                }
            },
            {
                type: 'value',
                name: '死亡率(%)',
                min: 0,
                max: 100,
                position: 'right',
                offset: 0,
                axisLine: {
                    lineStyle: {
                        color: colors[0]
                    }
                }
            }
        ],

        series: [
            {
                name: '死亡人数(人)',
                type: 'bar',
                stack: '总量',
                label: {
                    normal: {
                        show: true,
                        position: 'insideRight'
                    }
                },
                data: []
            },
            {
                name: '死亡率(%)',
                type: 'line',
                stack: '总量',
                label: {
                    normal: {
                        show: true,
                        position: 'insideRight'
                    }
                },
                data: []
            }
        ]
    };
    myChart3.setOption(option);
    var fnMyChart3=function() {
        $.get('<%=basePath%>/admin/trafficSecurity/trafficaccidentten.action', function (result) {
            myChart3.setOption({
                xAxis : [{
                    data : result.data.years
                }],
                series: [{
                    // 根据名字对应到相应的系列
                    data: result.data.deathAmount
                },{
                    data: result.data.proportionAmount
                }]
            });
        })
    }
    fnMyChart3();
    /*///////////////////////////////////*/
    var myChart4 = echarts.init(document.getElementById('divChart4'));
    option = {
        title: {
            text: '交通事故区域排名',
            subtext:'单位（起）'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'value',
            boundaryGap: [0, 0.01]
        },
        yAxis: {
            type: 'category',
            data: []
        },
        series: [
            {
                name: '',
                type: 'bar',
                data: []
            }
        ]
    };
    myChart4.setOption(option);
    var fnMyChart4=function() {
        $.get('<%=basePath%>/admin/trafficSecurity/trafficaccidentrank.action', function (result) {
            myChart4.setOption({
                yAxis: {
                    data: result.data.names
                },
                series: [{
                    name: new Date().getFullYear()-1,
                    // 根据名字对应到相应的系列
                    data: result.data.amount
                }]
            });
        })
    }
    fnMyChart4();
    /*///////////////////////////////////*/
    var myChart5 = echarts.init(document.getElementById('divChart5'));
    var map = new BMap.Map("divChart5",{enableMapClick:false,mapType: BMAP_NORMAL_MAP});            // 创建Map实例
    map.setCurrentCity("衡水市");
    map.centerAndZoom(new BMap.Point(115.675402, 37.745191), 15);
    map.enableScrollWheelZoom();                 //启用滚轮放大缩小

    // 自定义一个控件类
    function ZoomControl(){
        // 默认停靠位置和偏移量
        this.defaultAnchor = BMAP_ANCHOR_TOP_RIGHT;
        this.defaultOffset = new BMap.Size(10, 5);
    }
    // 通过JavaScript的prototype属性继承于BMap.Control
    ZoomControl.prototype = new BMap.Control();
    // 自定义控件必须实现自己的initialize方法,并且将控件的DOM元素返回
    // 在本方法中创建个div元素作为控件的容器,并将其添加到地图容器中
    ZoomControl.prototype.initialize = function(map){
        // 创建一个DOM元素
        var div = document.createElement("div");
        // 添加文字说明
        div.innerHTML+="<a href='javascript:void(0)' style='background: green;color: #fff';text:>&nbsp;轻微事故&nbsp;</a>" +
                        "<a href='javascript:void(0)' style='background: yellowgreen;color: #fff' >&nbsp;一般事故&nbsp;</a>" +
                        "<a href='javascript:void(0)' style='background: red;color: #fff';text:>&nbsp;特大事故&nbsp;</a>";
        // 设置样式
        div.style.cursor = "pointer";
        div.style.border = "1px solid";
        // 添加DOM元素到地图中
        map.getContainer().appendChild(div);
        // 将DOM元素返回
        return div;
    }
    // 创建控件
    var myZoomCtrl = new ZoomControl();
    // 添加到地图当中
    map.addControl(myZoomCtrl);
    /*/////////////////////////////////////////////////////////*/
    // 编写自定义函数,创建标注
    function addMarker(point){
        var marker = new BMap.Marker(point);
        map.addOverlay(marker);
    }

    //添加信息窗口
    var opts = {
        width : 250,     // 信息窗口宽度
        height: 80,     // 信息窗口高度
        title : "详细信息" , // 信息窗口标题
    };
    //添加点击事件监听器
    function addClickHandler(content,marker){
        marker.addEventListener("click",function(e){
            openInfo(content,e)}
        );
    }
    function openInfo(content,e){
        var p = e.target;
        var infoPoint = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
        var infoWindow = new BMap.InfoWindow(content,opts);  // 创建信息窗口对象
        map.openInfoWindow(infoWindow,infoPoint); //开启信息窗口
    }
    //轻伤事故1
    function fnNormal() {
        for (var j = 0; j < normalArray.length; j++) {
            var vectorMarker = new BMap.Marker(new BMap.Point(normalArray[j].lng,normalArray[j].lat),{
                // 指定Marker的icon属性为Symbol
                icon: new BMap.Symbol(BMap_Symbol_SHAPE_POINT, {
                    scale: 1,//图标缩放大小
                    fillColor: "green",//填充颜色
                    fillOpacity: 0.8//填充透明度
                })
            });
            var content = normalArray[j].degree+"<br/> 地址:"+normalArray[j].address;
            map.addOverlay(vectorMarker);
            addClickHandler(content,vectorMarker);
        }
        vectorMarker.show();
    }
    //一般事故
    function fnBreak() {
        for (var j = 0; j <breakArray.length; j++) {
            var vectorMarker = new BMap.Marker(new BMap.Point(breakArray[j].lng,breakArray[j].lat),{
                // 指定Marker的icon属性为Symbol
                icon: new BMap.Symbol(BMap_Symbol_SHAPE_POINT, {
                    scale: 1,//图标缩放大小
                    fillColor: "yellowgreen",//填充颜色
                    fillOpacity: 0.8//填充透明度
                })
            });
            var content = breakArray[j].degree+"<br/> 地址:"+breakArray[j].address;
            map.addOverlay(vectorMarker);
            addClickHandler(content,vectorMarker);
        }
        vectorMarker.show();
    }
    //特大事故
    function fnBreak3() {
        for (var j = 0; j <breakArray3.length; j++) {
            var vectorMarker = new BMap.Marker(new BMap.Point(breakArray3[j].lng,breakArray3[j].lat),{
                // 指定Marker的icon属性为Symbol
                icon: new BMap.Symbol(BMap_Symbol_SHAPE_POINT, {
                    scale: 1,//图标缩放大小
                    fillColor: "red",//填充颜色
                    fillOpacity: 0.8//填充透明度
                })
            });
            var content = breakArray3[j].degree+"<br/> 地址:"+breakArray3[j].address;
            map.addOverlay(vectorMarker);
            addClickHandler(content,vectorMarker);
        }
        vectorMarker.show();
    }
   /* //只显示正常
    function fnShowNormal(){
        map.clearOverlays();
        fnNormal();
    }*/
    //只显示故障
    /*function fnShowBreak(){
        map.clearOverlays();
        fnBreak();
    }*/
    $.get('<%=basePath%>/admin/trafficSecurity/trafficaccidentdistri.action',function(result){
        normalArray=result.data.slightDegree;
        breakArray=result.data.genernalDegree;
        breakArray3=result.data.seriousDegree;
        //breakArray=result.data.break;
        fnNormal();
        fnBreak();
        fnBreak3();
    });
    /*///////////////////////////*/
    var myChart6 = echarts.init(document.getElementById('divChart6'));
    var colors = ['#5793f3', '#d14a61', '#675bba'];
    option = {
        title: {
            text: '交通事故结案情况',
        },
        tooltip : {
            trigger: 'axis',
            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        legend: {
            orient:'horizontal',
            left: 'right',
            itemWidth:5,
            itemHeight:5,
            top:23,
            data: ['案发总数(起)', '结案总数(起)','结案率(%)']
        },
        grid: {
            left:'15%',
            top:'20%'
        },
        xAxis:  {
            type: 'category',
            data: []

        },
        yAxis: [
            {
                type: 'value',
                name: '案发总数(起)',
                min: 0,
                max: 250,
                position: 'left',
                axisLine: {
                    lineStyle: {
                        color: colors[1]
                    }
                }
            },
            {
                type: 'value',
                name: '结案总数(起)',
                min: 0,
                max: 250,
                position: 'right',
                offset: 0,
                axisLine: {
                    lineStyle: {
                        color: colors[0]
                    }
                }
            },
            {
                type: 'value',
                name: '结案率(%)',
                show:false,
                min: 0,
                max: 250,
                position: 'left',
                axisLine: {
                    lineStyle: {
                        color: colors[2]
                    }
                },
                axisLabel: {
                    formatter: '{value} %'
                }
            }
        ],

        series: [
            {
                name: '案发总数(起)',
                type: 'bar',
                stack: '总量',
                label: {
                    normal: {
                        show: true,
                        position: 'insideRight'
                    }
                },
                data: []
            },
            {
                name: '结案总数(起)',
                type: 'bar',
                stack: '总量',
                label: {
                    normal: {
                        show: true,
                        position: 'insideRight'
                    }
                },
                data: []
            },
            {
                name:'结案率(%)',
                type:'line',
                yAxisIndex: 2,
                data:[]
            }
        ]
    };
    myChart6.setOption(option);
    var fnMyChart6=function() {
        $.get('<%=basePath%>/admin/trafficSecurity/trafficaccidentcomplete.action', function (result) {
            myChart6.setOption({
                xAxis: {
                    data: result.data.years
                },
                series: [
                    // 根据名字对应到相应的系列
                    {data: result.data.totalAmount},
                    {data: result.data.completeAmount},
                    {data: result.data.proportionAmount}
                ]
            });
        })
    }
    fnMyChart6();
</script>
</html>

