<%@ 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-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 class="col-lg-4 col-md-4">
            <div class="ibox shortcut">
                <div id="divChart5" style="width: 100%;height: 400px;"></div>
            </div>
        </div>
        <div class="col-lg-4 col-md-4">
            <div class="ibox shortcut">
                <div id="divChart6" style="width: 100%;height: 400px;"></div>
            </div>
        </div>
        <div class="col-lg-4 col-md-4">
            <div class="ibox shortcut">
                <div id="divChart7" style="width: 100%;height: 400px;"></div>
            </div>
        </div>
    </div>
    <jsp:include page="../../../common/admin/body_post.jsp"></jsp:include>
    <script type="text/javascript">
        var myChart_0 = echarts.init(document.getElementById('divChart1'));
        var myChart_1 = echarts.init(document.getElementById('divChart2'));
        var myChart_2 = echarts.init(document.getElementById('divChart3'));
        var myChart_3 = echarts.init(document.getElementById('divChart4'));
        var myChart_4 = echarts.init(document.getElementById('divChart5'));
        var myChart_5 = echarts.init(document.getElementById('divChart6'));
        var myChart_6 = echarts.init(document.getElementById('divChart7'));

        option1to4 = {
            tooltip : {
                formatter: "{a} <br/>{b} : {c}%"
            },
            title: {
                text: ''
            },
            toolbox: {
                feature: {
                    restore: {},
                    saveAsImage: {}
                }
            },
            series: [
                {
                    type: 'gauge',
                    axisLine:{
                        show:true,
                        lineStyle:{
                            color:[[0.2, '#91c7ae'], [0.4, '#63869e'],[0.6, 'yellow'],[0.8, 'orange'],[1, '#c23531']]
                        }
                    },
                    detail: {formatter:'{value}%'},
                    data: [{value: 50, name: '完成率'}]
                }
            ]
        };
        option_0 = jQuery.extend(true,  {title: {text: ''}},option1to4);
        option_1 = jQuery.extend(true,  {title: {text: ''}},option1to4);
        option_2 = jQuery.extend(true,  {title: {text: ''}},option1to4);
        option_3 = jQuery.extend(true,  {title: {text: ''}},option1to4);
        option_4 = jQuery.extend(true,  {title: {text: ''}},option1to4);
        option_5 = jQuery.extend(true,  {title: {text: ''}},option1to4);
        option_6 = jQuery.extend(true,  {title: {text: ''}},option1to4);

        var renderFunc = function (result) {
            if(result!=null && result.data.length>0){
                for(var i=0;i<result.data.length;i++){
                    eval('option_'+i).title.text=result.data[i].temp;
                    eval('option_'+i).series[0].name=result.data[i].temp;
                    eval('option_'+i).series[0].data[0]= result.data[i];
                    eval('myChart_'+i).setOption(eval('option_'+i), true);
                }
            }
        };
        $.get('<%=basePath%>/admin/cockpit/index.action',function(result){
            renderFunc(result);
        })
    </script>
</body>
</html>