<%@ 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-3 col-md-3">
            <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 class="col-lg-3 col-md-3">
            <div class="ibox shortcut">
                <div id="divChart7" style="width: 100%;height: 400px;"></div>
            </div>
        </div>
        <div class="col-lg-3 col-md-3">
            <div class="ibox shortcut">
                <div id="divChart8" style="width: 100%;height: 400px;"></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'));
    option = {
        color: ['#3398DB'],
        title:{
            text:'能源消耗总量分析',
            subtext: ''
        },
        tooltip: {},
        legend: {
            right: 10,
            top: 20,
            data:['总量']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis : [
            {
                type : 'category',
                axisTick: {
                    alignWithLabel: true
                },
                data: []
            }
        ],
        yAxis : [
            {
                type : 'value',
            }
        ],
        series : [
            {
                name:'消耗总量',
                type:'bar',
                barWidth: '30%',
                data: []
            }
        ]
    };
    myChart1.setOption(option);
    var fnMyChart1=function() {
        $.get('<%=basePath%>/admin/energy/engeryTotal.action', function (result) {
             myChart1.setOption({
                 title:{
                     subtext: "消耗总量:"+result.data.total +"万吨   同比数据值:"+result.data.growth+" %"
                 },
                 xAxis: {
                     data: result.data.years
                 },
                 series: [{
                     // 根据名字对应到相应的系列
                     data: result.data.amount
                 }]
             });
        })
    }
    fnMyChart1();
    /*//////////////////////////////////*/
    var myChart2 = echarts.init(document.getElementById('divChart2'));
    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%', '65%'],
                data:[],
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
    myChart2.setOption(option);
    var fnMyChart2=function(){
        $.get('<%=basePath%>/admin/energy/engeryScale.action', function (result) {
            myChart2.setOption({
                legend: {
                    data:result.data.name
                },
                series: [{
                    // 根据名字对应到相应的系列
                    data: result.data.list
                }]
            });
        })
    }
    fnMyChart2();
    /*///////////////////////////////////*/
    var myChart3 = echarts.init(document.getElementById('divChart3'));
    option = {
        title : {
            text: '污染、清洁能源比重分析',
            subtext:'单位:%'
        },
        tooltip: {
            formatter: "{a} <br/>{b} : {c} "
        },
        legend: {
            left: 'right',
            top:25,
            data: ['清洁','污染']
        },
        xAxis: {
            type: 'category',
            data: []
        },
        yAxis: {
            type: 'value'
        },
        series: [{
                name:'清洁',
                data: [],
                type: 'line'
            },
            {
                name:'污染',
                data: [],
                type: 'line'
            }]
    };
    myChart3.setOption(option);
    var fnMyChart3=function(){
        $.get('<%=basePath%>/admin/energy/cleanAndpollute.action', function (result) {
            myChart3.setOption({
                xAxis: {
                    data: result.data.years
                },
                series: [{
                    // 根据名字对应到相应的系列
                    data: result.data.cleanAmount
                },{
                    data: result.data.polluteAmount
                }]
            });
        })
    }
    fnMyChart3();
    /*///////////////////////////////////*/
    var myChart4 = echarts.init(document.getElementById('divChart4'));
    option = {
        title : {
            text: '城市新能源基础设施-太阳能路灯',
            subtext:''
        },
        tooltip: {},
        xAxis: {
            type: 'category',
            data: []
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            data: [],
            type: 'line'
        }]
    };
    myChart4.setOption(option);
    /*///////////////////////////////////*/
    var myChart5 = echarts.init(document.getElementById('divChart5'));
    option = {
        title : {
            text: '城市新能源基础设施-光伏发电',
            subtext:''
        },
        tooltip: {},
        xAxis: {
            type: 'category',
            data: []
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            data: [],
            type: 'line'
        }]
    };
    myChart5.setOption(option);
    /*///////////////////////////////////*/
    var myChart6 = echarts.init(document.getElementById('divChart6'));
    option = {
        title : {
            text: '城市新能源基础设施-电动汽车',
            subtext:''
        },
        tooltip: {},
        xAxis: {
            type: 'category',
            data: []
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            data: [],
            type: 'line'
        }]
    };
    myChart6.setOption(option);
    var fnMyChart6=function(){
        $.get('<%=basePath%>/admin/energy/newenergyinfrastructure.action', function (result) {
            myChart4.setOption({
                title : {
                    subtext:"太阳能路灯:"+result.data.lampTotal+"盏  同比数据值:"+result.data.lampGrowth+"%"
                },
                xAxis: {
                    data: result.data.years
                },
                series: [{
                    // 根据名字对应到相应的系列
                    data: result.data.lampAmount
                }]
            });
            myChart5.setOption({
                title : {
                    subtext:"光伏发电量:"+result.data.voliateTotal+"GW  同比数据值:"+result.data.voliateGrowth+"%"
                },
                xAxis: {
                    data: result.data.years
                },
                series: [{
                    // 根据名字对应到相应的系列
                    data: result.data.voliateAmount
                }]
            });
            myChart6.setOption({
                title : {
                    subtext:"电动汽车:"+result.data.carTotal+"辆  同比数据值:"+result.data.catGrowth+"%"
                },
                xAxis: {
                    data: result.data.years
                },
                series: [{
                    // 根据名字对应到相应的系列
                    data: result.data.carAmount
                }]
            });
        })
    }
    fnMyChart6();
    /*///////////////////////////////////*/
    var myChart7 = echarts.init(document.getElementById('divChart7'));
    option = {
        title: {
            text: '原煤消耗分析',
            subtext:''
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            orient: 'vertical',
            left: 'right',
            data: []
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: []
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name:'发电',
                type:'line',
                stack: '总量',
                data:[]
            },
            {
                name:'工业',
                type:'line',
                stack: '总量',
                data:[]
            },
            {
                name:'生活',
                type:'line',
                stack: '总量',
                data:[]
            }
        ]
    };
    myChart7.setOption(option);
    var fnMyChart7=function(){
        $.get('<%=basePath%>/admin/energy/coalconsume.action', function (result) {
            myChart7.setOption({
                title: {
                    subtext: "发电:" + result.data.electricNow + "万吨  工业:" + result.data.industyNow + "万吨  生活:" + result.data.livingNow + "万吨"
                },
                legend: {
                    data: result.data.names
                },
                xAxis: {
                    data: result.data.years
                },
                series: [
                    // 根据名字对应到相应的系列
                    {data: result.data.electricAmount},
                    {data: result.data.industryAmount},
                    {data: result.data.livingAmount}
                ]
            });
        })
    }
    fnMyChart7();
    /*///////////////////////////////////*/
    var myChart8 = echarts.init(document.getElementById('divChart8'));
    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:[]
            },
        ]
    };
    myChart8.setOption(option);
    var fnMyChart8=function(){
        $.get('<%=basePath%>/admin/energy/electricconsume.action', function (result) {
            myChart8.setOption({
                title: {
                    subtext: "发电:"+result.data.electricNow+"亿千瓦时"
                },
                xAxis: {
                    data: result.data.months
                },
                series: [
                    // 根据名字对应到相应的系列
                    {data: result.data.lastAmount},
                    {data: result.data.newAmount}
                ]
            });
        })
    }
    fnMyChart8();
</script>
</html>
