<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<%@ taglib prefix="cui" tagdir="/WEB-INF/tags"%>

<!--滚动内容开始-->
<div class="scrollbar1 contentScroll">
	<div class="scrollbar">
		<div class="track">
			<div class="thumb">
				<div class="end"></div>
			</div>
		</div>
	</div>
	<div class="viewport">
		<div class="overview">

			<div class="mainContent">
				<div class="mainContentDecript">
					<h1>摘要概况</h1>
					<p>摘要概况（Limit
						Summary）是由管理员给当前项目分配的资源上限，和该项目已分配的资源。当新创建的资源超过上限时，将会创建失败或者被拒绝创建。</p>
				</div>
				<div class="mainContentMessage">
					<div class="chartView clearfix">
						<h1>
							<span class="icon cui-icon-up"></span> <span>计算资源上限摘要</span>
						</h1>
						<ul class="chartsList clearfix">
							<li>
								<div id="neicunChart" class="charts"></div>
								<div class="chartDescript">
									<h2>内存(G)</h2>
									<p>
										<span class="doneCount"><%=Integer.valueOf(request.getAttribute("memory_used").toString())*100/1024/100f%></span>
										<span>/</span> <span class="totalCount"><%=Integer.valueOf(request.getAttribute("memory_max").toString())*100/1024/100f%></span>
									</p>
								</div>
							</li>
							<li>
								<div id="cpuChart" class="charts"></div>
								<div class="chartDescript">
									<h2>CPU(核)</h2>
									<p>
										<span class="doneCount">${cpu_used}</span> <span>/</span> <span
											class="totalCount">${cpu_max}</span>
									</p>
								</div>
							</li>
							<li>
								<div id="cloudChart" class="charts"></div>
								<div class="chartDescript">
									<h2>云主机(个)</h2>
									<p>
										<span class="doneCount">${server_used}</span> <span>/</span> <span
											class="totalCount">${server_max}</span>
									</p>
								</div>
							</li>
						</ul>
					</div>


					<div class="chartView clearfix">
						<h1>
							<span class="icon cui-icon-up"></span> <span>存储资源上限摘要</span>
						</h1>
						<ul class="chartsList clearfix">
							<li>
								<div id="cunchuChart" class="charts"></div>
								<div class="chartDescript">
									<h2>存储(G)</h2>
									<p>
										<span class="doneCount">${volumnSize_used}</span> <span>/</span>
										<span class="totalCount">${volumnSize_max}</span>
									</p>
								</div>
							</li>
							<li>
								<div id="yunpanChart" class="charts"></div>
								<div class="chartDescript">
									<h2>云硬盘(个)</h2>
									<p>
										<span class="doneCount">${volumn_used}</span> <span>/</span> <span
											class="totalCount">${volumn_max}</span>
									</p>
								</div>
							</li>
							<li>
								<div id="yunpanChart2" class="charts"></div>
								<div class="chartDescript">
									<h2>云硬盘快照(个)</h2>
									<p>
										<span class="doneCount">${snapshot_used}</span> <span>/</span>
										<span class="totalCount">${snapshot_max}</span>
									</p>
								</div>
							</li>
						</ul>
					</div>


					<div class="chartView clearfix">
						<h1>
							<span class="icon cui-icon-up"></span> <span>网络资源上限摘要</span>
						</h1>
						<ul class="chartsList clearfix">
							<li>
								<div id="IPChart" class="charts"></div>
								<div class="chartDescript">
									<h2>浮动IP(个)</h2>
									<p>
										<span class="doneCount">${floatingIp_used}</span> <span>/</span>
										<span class="totalCount">${floatingIp_max}</span>
									</p>
								</div>
							</li>
							<li>
								<div id="safeChart" class="charts"></div>
								<div class="chartDescript">
									<h2>安全组规则(条)</h2>
									<p>
										<span class="doneCount">${securityGroupRule_used}</span> <span>/</span>
										<span class="totalCount">${securityGroupRule_max}</span>
									</p>
								</div>
							</li>
						</ul>
					</div>

				</div>
			</div>


		</div>
	</div>
</div>

<script type="text/javascript">

function toColor(max,used){
	var p=used*100/max;
	if(p>80){
		return "#f27352" //red
	}else if(p>50){
		return "#ffa500" //orange
	}else{
		return "#16ca82";//"green";
	}
}

$(function(){
	//帮助
	$('.help').tooltip();

    // 内存
    $('#neicunChart').highcharts({
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false
        },
        title: {
            text: ''
        },
        credits:{
        	enabled:false //去除版权信息
        },
        legend:{
        	enabled:false
        },
        tooltip: {
            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: false
                },
                showInLegend: true
            }
        },
        series: [{
            type: 'pie',
            name: '内存',
            data: [
                {
                	name:'已用内存',
                	y:${memory_used},
                	//selected: true,
                	sliced: true,
                	color:toColor(${memory_max},${memory_used})
                },
                {
                    name: '可用内存',
                    y: ${memory_max}-${memory_used},
                    color: "#e0e7f1"
                },
            ]
        }]
    });


	// cpu
    $('#cpuChart').highcharts({
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false
        },
        title: {
            text: ''
        },
        credits:{
        	enabled:false //去除版权信息
        },
        legend:{
        	enabled:false
        },
        tooltip: {
            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: false
                },
                showInLegend: true
            }
        },
        series: [{
            type: 'pie',
            name: 'CPU',
            data: [
                {
                	name:'可用核数',
                	y:${cpu_max}-${cpu_used},
                	color:"#e0e7f1"
                },
                {
                    name: '已用核数',
                    y: ${cpu_used},
                    sliced: true,
                    selected: true,
                    color: toColor(${cpu_max},${cpu_used})
                },
            ]
        }]
    });


	// 云主机
    $('#cloudChart').highcharts({
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false
        },
        title: {
            text: ''
        },
        credits:{
        	enabled:false //去除版权信息
        },
        legend:{
        	enabled:false
        },
        tooltip: {
            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: false
                },
                showInLegend: true
            }
        },
        series: [{
            type: 'pie',
            name: '云主机',
            data: [
                {
                	name:'还可创建数量',
                	y:${server_max}-${server_used},
                	color:"#e0e7f1"
                },
                {
                    name: '已创建数量',
                    y: ${server_used},
                    sliced: true,
                    selected: true,
                    color: toColor(${server_max},${server_used})
                },
            ]
        }]
    });


	// 存储
    $('#cunchuChart').highcharts({
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false
        },
        title: {
            text: ''
        },
        credits:{
        	enabled:false //去除版权信息
        },
        legend:{
        	enabled:false
        },
        tooltip: {
            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: false
                },
                showInLegend: true
            }
        },
        series: [{
            type: 'pie',
            name: '存储(GB)',
            data: [
                {
                	name:'可用空间',
                	y:${volumnSize_max}-${volumnSize_used},
                	color:"#e0e7f1"
                },
                {
                    name: '已用空间',
                    y: ${volumnSize_used},
                    sliced: true,
                    selected: true,
                    color: toColor(${volumnSize_max},${volumnSize_used})
                },
            ]
        }]
    });

 // 云硬盘
    $('#yunpanChart').highcharts({
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false
        },
        title: {
            text: ''
        },
        credits:{
        	enabled:false //去除版权信息
        },
        legend:{
        	enabled:false
        },
        tooltip: {
            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: false
                },
                showInLegend: true
            }
        },
        series: [{
            type: 'pie',
            name: '云硬盘(个)',
            data: [
                {
                	name:'还可创建数量',
                	y:${volumn_max}-${volumn_used},
                	color:"#e0e7f1"
                },
                {
                    name: '已创建数量',
                    y: ${volumn_used},
                    sliced: true,
                    selected: true,
                    color: toColor(${volumn_max},${volumn_used})
                },
            ]
        }]
    });


	
	// 云硬盘快照
    $('#yunpanChart2').highcharts({
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false
        },
        title: {
            text: ''
        },
        credits:{
        	enabled:false //去除版权信息
        },
        legend:{
        	enabled:false
        },
        tooltip: {
            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: false
                },
                showInLegend: true
            }
        },
        series: [{
            type: 'pie',
            name: '云硬盘快照(个)',
            data: [
                {
                	name:'还可创建数量',
                	y:${snapshot_max}-${snapshot_used},
                	color:"#e0e7f1"
                },
                {
                    name: '已创建数量',
                    y: ${snapshot_used},
                    sliced: true,
                    selected: true,
                    color: toColor(${snapshot_max},${snapshot_used})
                },
            ]
        }]
    });


	//浮动IP
    $('#IPChart').highcharts({
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false
        },
        title: {
            text: ''
        },
        credits:{
        	enabled:false //去除版权信息
        },
        legend:{
        	enabled:false
        },
        tooltip: {
            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: false
                },
                showInLegend: true
            }
        },
        series: [{
            type: 'pie',
            name: '浮动IP(个)',
            data: [
                {
                	name:'还可创建数量',
                	y:${floatingIp_max}-${floatingIp_used},
                	color:"#e0e7f1"
                },
                {
                    name: '已创建数量',
                    y: ${floatingIp_used},
                    sliced: true,
                    selected: true,
                    color: toColor(${floatingIp_max},${floatingIp_used})
                },
            ]
        }]
    });


	//安全组规则
    $('#safeChart').highcharts({
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false
        },
        title: {
            text: ''
        },
        credits:{
        	enabled:false //去除版权信息
        },
        legend:{
        	enabled:false
        },
        tooltip: {
            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: false
                },
                showInLegend: true
            }
        },
        series: [{
            type: 'pie',
            name: '安全组规则(条)',
            data: [
                {
                	name:'还可创建数量',
                	y: (${securityGroupRule_max} - ${securityGroupRule_used}),
                	color:"#e0e7f1"
                },
                {
                    name: '已创建数量',
                    y: ${securityGroupRule_used},
                    sliced: true,
                    selected: true,
                    color: toColor(${securityGroupRule_max} , ${securityGroupRule_used})
                },
            ]
        }]
    });

});
</script>