<%@ 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-6 col-md-6">
            <div class="ibox shortcut">
                <div id="divChart2" style="width: 100%;height: 400px;"></div>
            </div>
        </div>
        <div class="col-lg-6 col-md-6">
            <div class="ibox shortcut">
                <div id="divChart3" style="width: 100%;height: 400px;"></div>
            </div>
        </div>
        <div class="col-lg-6 col-md-6">
            <div class="ibox shortcut">
                <div id="divChart4" style="width: 100%;height: 400px;"></div>
            </div>
        </div>
        <div class="col-lg-6 col-md-6">
            <div class="ibox shortcut">
                <div id="divChart5" style="width: 100%;height: 400px;"></div>
            </div>
        </div>
    </div>
    <div class="row hidden-print">
        <div class="col-lg-12 col-md-3">
            <div class="ibox shortcut">
                <div class="ibox-title-noline">
                    <span>项目分布</span>
                </div>
                <div class="ibox-content-noline">
                    <div id="divChart1" style="width: 100%;height: 400px;"></div>
                    <div id="divChart1_1" style="width: 100%;height: 400px;"></div>
                </div>
            </div>
        </div>
    </div>
    <jsp:include page="../../../common/admin/body_post.jsp"></jsp:include>
</body>
    <script type="text/javascript">
        var myChart1 = echarts.init(document.getElementById('divChart1'));
        var map = new BMap.Map("divChart1",{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 onclick='fnShowNormal()' style='background: green;color: #fff';text:>&nbsp;正&nbsp;&nbsp;常&nbsp;</a><a style='background: red;color: #fff' onclick='fnShowBreak()'>&nbsp;故&nbsp;&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); //开启信息窗口
        }
        //正常
        function fnNormal() {
            for (var i = 0; i < normalArray.length; i++) {
                var vectorMarker = new BMap.Marker(new BMap.Point(normalArray[i].lng,normalArray[i].lat),{
                    // 指定Marker的icon属性为Symbol
                    icon: new BMap.Symbol(BMap_Symbol_SHAPE_POINT, {
                        scale: 1,//图标缩放大小
                        fillColor: "green",//填充颜色
                        fillOpacity: 0.8//填充透明度
                    })
                });
                var content = "所属部门："+normalArray[i].sectorName+"<br/>电话："+ normalArray[i].phone;
                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: "red",//填充颜色
                        fillOpacity: 0.8//填充透明度
                    })
                });
                var content = "所属部门："+breakArray[j].sectorName+"<br/>电话："+ breakArray[j].phone;
                map.addOverlay(vectorMarker);
                addClickHandler(content,vectorMarker);
            }
            vectorMarker.show();
        }
        //只显示正常
        function fnShowNormal(){
            map.clearOverlays();
            fnNormal();
        }
        //只显示故障
        function fnShowBreak(){
            map.clearOverlays();
            fnBreak();
        }
        $.get('',function(result){
             normalArray=result.data.normal;
            breakArray=result.data.break;
            fnNormal();
            fnBreak();
        });

        var myChart1_1 = echarts.init(document.getElementById('divChart1_1'));
        option = {
            title: {
                text: '项目投入资金top5排名',
            },
            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: [
                {
                    type: 'bar',
                    data: []
                }
            ]
        };
        myChart1_1.setOption(option);
        var fnMyChart1_1=function() {
            $.get('<%=basePath%>/admin/building/project.action', function (result) {
                myChart1_1.setOption({
                    yAxis: {
                        data: result.data.names
                    },
                    series: [{
                        // 根据名字对应到相应的系列
                        data: result.data.values
                    }]
                });
            })
        }
        fnMyChart1_1();
        /*////////////////////////////*/
        var myChart2 = echarts.init(document.getElementById('divChart2'));
        option = {
            tooltip: {
                trigger: 'axis'
            },
            title: {
                text: '项目类型',
                subtext:''
            },
            legend: {
                orient: 'vertical',
                left: 'right',
                top:10,
                data:['农业','重工','交通']
            },
            xAxis: [
                {
                    type: 'category',
                    data: [],
                    axisPointer: {
                        type: 'shadow'
                    }
                }
            ],
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name:'农业',
                    type:'bar',
                    data:[]
                },
                {
                    name:'重工',
                    type:'bar',
                    data:[]
                },
                {
                    name:'交通',
                    type:'bar',
                    data:[]
                }
            ]
        };
        myChart2.setOption(option);
        var fnMyChart2=function(){
            $.get('<%=basePath%>/admin/building/projectType.action', function (result) {
                myChart2.setOption({
                    xAxis: {
                        data: result.data.years
                    },
                    series: [
                        // 根据名字对应到相应的系列
                        {data: result.data.ny},
                        {data: result.data.zg},
                        {data: result.data.jt}
                    ]
                });
            })
        }
        fnMyChart2();
        /*////////////////////////////*/
        var myChart3 = echarts.init(document.getElementById('divChart3'));
        option = {
            title:{
                text:'投资项目统计',
                subtext: '',
            },
            tooltip: {},
            legend: {
                orient: 'vertical',
                right: 10,
                top: 10,
                data:['项目总数','同比']
            },
            xAxis: [
                {
                    type: 'category',
                    data: [],
                    axisPointer: {
                        type: 'shadow'
                    }
                }
            ],
            yAxis: [
                {
                    type: 'value'

                },
                {
                    type: 'value',
                    axisLabel: {
                        formatter: '{value}%'
                    }

                }
            ],
            series: [
                {
                    name:'项目总数',
                    type:'bar',
                    data:[]
                },
                {
                    name:'同比',
                    type:'line',
                    yAxisIndex: 1,
                    data:[]
                },
                {
                    name:'环比',
                    type:'line',
                    yAxisIndex: 1,
                    data:[]
                }
            ]
        };
        myChart3.setOption(option);
        var fnMyChart3=function(){
            $.get('<%=basePath%>/admin/building/projectStatistics.action', function (result) {
                myChart3.setOption({
                    title: {
                        subtext: "项目总数:"+result.data.total+"个  同比数据值:"+result.data.newGrowth+"%"
                    },
                    xAxis: {
                        data: result.data.years
                    },
                    series: [
                        // 根据名字对应到相应的系列
                        {data: result.data.value},
                        {data: result.data.growths},
                        {data: result.data.rings}
                    ]
                });
            })
        }
        fnMyChart3();
        /*////////////////////////////*/
        var myChart4 = echarts.init(document.getElementById('divChart4'));
        option = {
            title : {
                text: '项目进展分析',
                subtext:'单位:个'
            },
            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                left: 'right',
                top:15,
                data: []
            },
            series : [
                {
                    name: '',
                    type: 'pie',
                    radius : '55%',
                    center: ['50%', '60%'],
                    data:[],
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        myChart4.setOption(option);
        var fnMyChart4=function(){
            $.get('<%=basePath%>/admin/building/projectanalysis.action', function (result) {
                myChart4.setOption({
                    legend: {
                        data:result.data.name
                    },
                    series: [{
                        // 根据名字对应到相应的系列
                        data: result.data.list
                    }]
                });
            })
        }
        fnMyChart4();
        /*////////////////////////////*/
        var myChart5 = echarts.init(document.getElementById('divChart5'));
        var colors = ['#5793f3', '#d14a61', '#675bba'];
        option = {
            title : {
                text: '项目事故分析',
                subtext:'单位:个'
            },
            tooltip : {
                trigger: 'axis',
                axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                    type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            legend: {
                data: ['特别重大','重大','较大','一般']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis:  {
                type: 'value'
            },
            yAxis: {
                type: 'category',
                data: []
            },
            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: 'bar',
                    stack: '总量',
                    label: {
                        normal: {
                            show: true,
                            position: 'insideRight'
                        }
                    },
                    data: []
                },
                {
                    name: '一般',
                    type: 'bar',
                    stack: '总量',
                    label: {
                        normal: {
                            show: true,
                            position: 'insideRight'
                        }
                    },
                    data: []
                }
            ]
        };
        myChart5.setOption(option);
        var fnMyChart5=function() {
            $.get('<%=basePath%>/admin/building/projectAccidentAnalyse.action', function (result) {
                myChart5.setOption({
                    yAxis: {
                        data: result.data.years
                    },
                    series: [
                        // 根据名字对应到相应的系列
                        {data: result.data.tbzd},
                        {data: result.data.zd},
                        {data: result.data.jd},
                        {data: result.data.yb}
                    ]
                });
            })
        }
        fnMyChart5();
        /*////////////////////////////*/
    </script>
</html>
