<%@ 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">
</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-4 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>
        </div>
    </div>

    <div class="col-lg-4 col-md-3">
        <div class="ibox shortcut">
            <div class="ibox-title-noline">
                <span>医疗卫计</span>
            </div>
            <div class="ibox-content-noline">
                <div id="divChart2" style="width: 100%;height: 400px;"></div>
            </div>
        </div>
    </div>

    <%--<div class="col-lg-4 col-md-3">--%>
        <%--<div class="ibox shortcut">--%>
            <%--<div class="ibox-title-noline">--%>
                <%--<span>绿化环境</span>--%>
            <%--</div>--%>
            <%--<div class="ibox-content-noline">--%>
                <%--<div id="divChart3" style="width: 100%;height: 400px;"></div>--%>
            <%--</div>--%>
        <%--</div>--%>
    <%--</div>--%>
    <div class="col-lg-4 col-md-3">
        <div class="ibox shortcut">
            <div class="ibox-title-noline">
                <span>社会治安统计</span>
            </div>
            <div class="ibox-content-noline">
                <div  style="width: 100%;height: 400px;">
                    <table class="table table-striped table-bordered table-hover ">
                        <tbody>
                            <tr id="tr">
                                <th>年份</th>
                                <th>刑事立案</th>
                                <th>犯罪人数</th>
                                <th>事故死亡率</th>
                                <th>事故发生数</th>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <div class="col-lg-4 col-md-3">
        <div class="ibox shortcut">
            <div class="ibox-title-noline">
                <span>每万人交通出行</span>
            </div>
            <div class="ibox-content-noline">
                <div  style="width: 100%;height: 400px;">
                    <div>
                    <img src="<%=basePath%>/resource/images/u1278.png" width="150px" alt="" >
                        <span >10000人</span>
                    </div>
                    <div>
                        <span id="aa"></span>辆
                    <img src="<%=basePath%>/resource/images/u1280.png" alt="" width="140px" >
                        <span id="aaa"></span>辆
                        <img src="<%=basePath%>/resource/images/u1282.png" width="140px" alt="">
                    </div>
                </div>
            </div>
        </div>
    </div>


</div>

<jsp:include page="../../../common/admin/body_post.jsp"></jsp:include>
</body>
<script>
    var myChart1 = echarts.init(document.getElementById('divChart1'));
    var myChart2 = echarts.init(document.getElementById('divChart2'));
   //var myChart3 = echarts.init(document.getElementById('divChart3'));


        $.get('<%=basePath%>/json/1.json', function (geoJson) {

            echarts.registerMap('HK', geoJson);


        myChart3.setOption(option = {
            // title: {
            //     text: '绿化环境',
            // },
            tooltip: {
                trigger: 'item',
                formatter: '{b}<br/>{c} (p / km2)'
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data:["绿化","森林"]
            },
            toolbox: {
                show: true,
                orient: 'vertical',
                left: 'right',
                top: 'center',
                feature: {
                    dataView: {readOnly: false},
                    restore: {},
                    saveAsImage: {}
                }
            },
            visualMap: {
                min: 800,
                max: 50000,
                text:['High','Low'],
                realtime: false,
                calculable: true,
                inRange: {
                    color: ['lightskyblue','yellow', 'orangered']
                }
            },
            series: [
                {
                    name: '绿化',
                    type: 'map',
                    mapType: 'HK', // 自定义扩展图表类型
                    itemStyle:{
                        normal:{label:{show:true}},
                        emphasis:{label:{show:true}}
                    },
                    data:[
                        {name: '中西区', value: 20057.34},
                        {name: '湾仔', value: 15477.48},
                        {name: '东区', value: 31686.1},
                        {name: '南区', value: 6992.6},
                        {name: '油尖旺', value: 44045.49},
                        {name: '深水埗', value: 40689.64},
                        {name: '九龙城', value: 37659.78},
                        {name: '黄大仙', value: 45180.97},
                        {name: '观塘', value: 55204.26},
                        {name: '葵青', value: 21900.9},
                        {name: '荃湾', value: 4918.26},
                        {name: '屯门', value: 5881.84},
                        {name: '元朗', value: 2.01},
                        {name: '去去去', value: 2227.92},
                        {name: '大埔', value: 2180.98},
                        {name: '沙田', value: 9172.94},
                        {name: '西贡', value: 3368},
                        {name: '离岛', value: 806.98}
                    ],
                    // 自定义名称映射
                    nameMap: {
                        'Central and Western': '中西区',
                        'Eastern': '东区',
                        'Islands': '离岛',
                        'Kowloon City': '九龙城',
                        'Kwai Tsing': '葵青',
                        'Kwun Tong': '观塘',
                        'North': '去去去',
                        'Sai Kung': '西贡',
                        'Sha Tin': '沙田',
                        'Sham Shui Po': '深水埗',
                        'Southern': '南区',
                        'Tai Po': '大埔',
                        'Tsuen Wan': '荃湾',
                        'Tuen Mun': '屯门',
                        'Wan Chai': '湾仔',
                        'Wong Tai Sin': '黄大仙',
                        'Yau Tsim Mong': '油尖旺',
                        'Yuen Long': '元朗'
                    }
                },
                {
                    name: '森林',
                    type: 'map',
                    mapType: 'HK', // 自定义扩展图表类型
                    itemStyle:{
                        normal:{label:{show:true}},
                        emphasis:{label:{show:true}}
                    },
                    data:[
                        {name: '嗷嗷啊', value: 20057.34},
                        {name: '湾仔', value: 15477.48},
                        {name: '东区', value: 31686.1},
                        {name: '南区', value: 6992.6},
                        {name: '油尖旺', value: 44045.49},
                        {name: '深水埗', value: 40689.64},
                        {name: '九龙城', value: 37659.78},
                        {name: '黄大仙', value: 45180.97},
                        {name: '观塘', value: 55204.26},
                        {name: '葵青', value: 21900.9},
                        {name: '荃湾', value: 4918.26},
                        {name: '屯门', value: 5881.84},
                        {name: '元朗', value: 4178.01},
                        {name: '去去去', value: 2227.92},
                        {name: '大埔', value: 2180.98},
                        {name: '沙田', value: 9172.94},
                        {name: '西贡', value: 3368},
                        {name: '离岛', value: 806.98}
                    ],
                    // 自定义名称映射
                    nameMap: {
                        'Central and Western': '嗷嗷啊',
                        'Eastern': '东区',
                        'Islands': '离岛',
                        'Kowloon City': '九龙城',
                        'Kwai Tsing': '葵青',
                        'Kwun Tong': '观塘',
                        'North': '去去去',
                        'Sai Kung': '西贡',
                        'Sha Tin': '沙田',
                        'Sham Shui Po': '深水埗',
                        'Southern': '南区',
                        'Tai Po': '大埔',
                        'Tsuen Wan': '荃湾',
                        'Tuen Mun': '屯门',
                        'Wan Chai': '湾仔',
                        'Wong Tai Sin': '黄大仙',
                        'Yau Tsim Mong': '油尖旺',
                        'Yuen Long': '元朗'
                    }
                }
            ]

        });

        });
    var renderFunc = function () {
        $.get('<%=basePath%>/admin/publishService/getEducationalPortrait.action').done(function (data) {
            // 填入数据

            myChart1.setOption({
                    // title: {
                    //     text: '教育画像'
                    // },
                    tooltip: {},
                    // legend: {
                    //     data: ['预算分配（Allocated Budget）', '实际开销（Actual Spending）']
                    // },
                    radar: {
                        // shape: 'circle',
                        name: {
                            textStyle: {
                                color: 'red',

                                borderRadius: 3,
                                padding: [3, 5]
                            }
                        },
                        indicator: data.listName    //[
                        //     { name: '教育支出', max: 6500},
                        //     { name: '教师负担学生量', max: 16000},
                        //     { name: '学前入园率', max: 30000},
                        //     { name: '义教巩固率随迁子女在公就读', max: 38000},
                        //     { name: '万人学校', max: 52000},
                        //     { name: '物理', max: 25000}
                        // ]
                    },
                    series: [{
                        name: '数值',
                        type: 'radar',
                        // areaStyle: {normal: {}},
                        data : [
                            // {
                            //     value : [4300, 10000, 28000, 35000, 50000, 19000],
                            //     name : '预算分配（Allocated Budget）'
                            // },
                            // {
                            //     value : [5000, 14000, 28000, 31000, 42000, 21000],
                            //     name : '数值'
                            // }
                            data.value
                        ]
                    }]
                    });
        })
        $.get('<%=basePath%>/admin/publishService/geHealthCarePlan.action').done(function (data) {
            // 填入数据
            myChart2.setOption({
                // title: {
                //     text: '教育画像'
                // },
                tooltip: {},
                // legend: {
                //     data: ['预算分配（Allocated Budget）', '实际开销（Actual Spending）']
                // },
                radar: {
                    // shape: 'circle',
                    name: {
                        textStyle: {
                            color: 'red',

                            borderRadius: 3,
                            padding: [3, 5]
                        }
                    },
                    indicator: data.listName
                    // indicator: [
                    //     { name: '语文'},
                    //     { name: '数学'},
                    //     { name: '英语'},
                    //     { name: '生物'},
                    //     { name: '化学'},
                    //     { name: '物理'}
                    // ]
                },
                series: [{
                    name: '数值',
                    type: 'radar',
                    // areaStyle: {normal: {}},
                    data : [
                        data.value
                        // {
                        //     value : [4300, 10000, 28000, 35000, 50000, 19000],
                        //     name : '预算分配（Allocated Budget）'
                        // },

                    ]
                }]
            });
        })
        $.get('<%=basePath%>/admin/publishService/gePublicSecurity.action').done(function (data) {
            // 填入数据

            var dataList =data;
            var v_book_table_body = "";

            for (var i = 0; i< dataList.length; i++) {
                var tr ='<tr>';
                var item = dataList[i];
                tr += '<td>'+item.dataYear+'</td>';
                tr += '<td>'+item.crimesNumber+'</td>';
                tr += '<td>'+item.accidentDeath+'</td>';
                tr += '<td>'+item.criminalCase+'</td>';
                tr += '<td>'+item.accident+'</td>';
                tr += '</tr>';
                v_book_table_body +=tr;
            }
            $("#tr").after(v_book_table_body);
        });
        $.get('<%=basePath%>/admin/publishService/getTrafficTravel.action').done(function (data) {
            $("#aa").html(data.car);
            $("#aaa").html(data.bus);
        });
        <%--// myChart3.setOption(option3, true);--%>
        <%--$.get('<%=basePath%>/admin/peopleGrowth/getAgeStructure.action').done(function (data) {--%>
            <%--// 填入数据--%>
            <%--myChart4.setOption({--%>
                <%--legend: {--%>
                    <%--data: data.ageName--%>
                <%--},--%>
                <%--series: [{--%>
                    <%--// 根据名字对应到相应的系列--%>
                    <%--name: '年龄结构',--%>
                    <%--data: data.ageStructureNameAndValueModels--%>
                <%--}]--%>
            <%--});--%>
        <%--})--%>
        <%--$.get('<%=basePath%>/admin/peopleGrowth/getDependencyRatio.action').done(function (data) {--%>
            <%--// 填入数据--%>
            <%--myChart5.setOption({--%>
                <%--xAxis: {--%>
                    <%--data: data.categories--%>
                <%--},--%>
                <%--series: [{--%>
                    <%--// 根据名字对应到相应的系列--%>
                    <%--name: '抚养比',--%>
                    <%--data: data.value--%>
                <%--}]--%>
            <%--});--%>
        <%--})--%>
        <%--$.get('<%=basePath%>/admin/peopleGrowth/getPopulationRegionPicture.action').done(function (data) {--%>
            <%--// 填入数据--%>
            <%--myChart6.setOption({--%>
                <%--yAxis: {--%>
                    <%--data: data.categories--%>
                <%--},--%>
                <%--series: [{--%>
                    <%--// 根据名字对应到相应的系列--%>
                    <%--name: '区域人口',--%>
                    <%--data: data.value--%>
                <%--}]--%>
            <%--});--%>
        <%--})--%>
    };
    renderFunc();

</script>
</html>
