@extends('layout.manage')

<style type="text/css">

	.overview {
		width:20%;
		box-shadow:2px 2px 3px rgba(20%,20%,40%,0.5),inset -2px -2px 1px 1px rgba(75%,75%,75%,1) !important;
		border-right-width: 8px !important;
	}point

	.overview > strong{
		font-size: 16px;
	}

	.label_20{
		display:block; 
		font-size: 1vw;
	}
	.label_30{
		display:block; 
		font-size: 30px;
		text-align: center;
	}

	.gray{
		background-color: #EBEBEB;
	}

	table > tbody > tr > td > img{
		width: 40px;
		display:block; 
		margin:auto;
	}

	table > tbody > tr > .first {
		vertical-align: middle !important;
	}

	table > tbody > tr > .other {
		vertical-align: middle !important;
		border-bottom-width: 4px !important;
	}

	table > tbody > tr > .bottom {
		vertical-align: middle !important;
	}

	strong{
		padding-left: 10px;
		font-size: 0.25vw;
		text-align: center;
		font-family: Arial,"微軟正黑體",sans-serif;

	}

	.tabs-left > .nav-tabs {
	  	border-bottom: 0;
	}

	.tab-content > .tab-pane,
	.pill-content > .pill-pane {
	  	display: none;
	}

	.tab-content > .active,
	.pill-content > .active {
	  	display: block;
	}

	.tabs-left > .nav-tabs > li {
	  	float: none;
	}

	.tabs-left > .nav-tabs > li > a {
	  	min-width: 5px;
	  	min-height: 70px;
	  	margin-right: 0;
	  	margin-bottom: 3px;
	  	padding: 5px;
	  	text-align: center;
	}

	.tabs-left > .nav-tabs {
	  	float: left;
	  	border-right: 1px solid #ddd;
	}

	.tabs-left > .nav-tabs > li > a {
	 	margin-right: -1px;
	    -webkit-border-radius: 4px 0 0 4px;
	    -moz-border-radius: 4px 0 0 4px;
	    border-radius: 4px 0 0 4px;
	    font-weight:bold;
	    color:white;
	    background-color: #80A3BC;
	    
	}

	.tabs-left > .nav-tabs > li > a:hover,
	.tabs-left > .nav-tabs > li > a:focus {
	  	border-color: #eeeeee #dddddd #eeeeee #eeeeee;
	}

	.tabs-left > .nav-tabs .active > a,
	.tabs-left > .nav-tabs .active > a:hover,
	.tabs-left > .nav-tabs .active > a:focus {
	  	border-color: #ddd transparent #ddd #ddd;
	  	background-color: #E1E1E1;
	  	color:black;
	  	*border-right-color: #FFFFFF;
	}
</style>
@section('css_page_level')


<link rel="stylesheet" type="text/css" href="{{ asset('assets/global/plugins/datatables/plugins/bootstrap/dataTables.bootstrap.css') }}"/>
<link rel="stylesheet" type="text/css" href="{{ asset('assets/global/plugins/bootstrap-datepicker/css/bootstrap-datepicker3.min.css') }}" />
<link rel="stylesheet" type="text/css" href="{{ asset('assets/global/plugins/bootstrap-fileinput/bootstrap-fileinput.css') }}"/>
<link rel="stylesheet" type="text/css" href="{{ asset('assets/global/plugins/select2/css/select2.css') }}"/>
<link rel="stylesheet" type="text/css" href="{{ asset('assets/global/plugins/select2/css/select2-bootstrap.min.css') }}"/>
<link rel="stylesheet" type="text/css" href="{{ asset('assets/global/plugins/bootstrap-select/1.12.2/bootstrap-select.min.css') }}"/>
<link rel="stylesheet" type="text/css" href="{{ asset('assets/global/plugins/bootstrap-select/bootstrap-select.min.css') }}"/>
<link href="{{ asset('assets/global/plugins/bootstrap-editable/bootstrap-editable/css/bootstrap-editable.css') }}" rel="stylesheet" type="text/css" media="screen"/>
<link href="{{ asset('assets/global/plugins/bootstrap-editable/inputs-ext/address/address.css') }}" rel="stylesheet" type="text/css" media="screen"/>
@endsection


@section('page-content-wrapper')

	<div class="page-content-wrapper" id="main">
		<div class="page-content">
			<!-- BEGIN PAGE HEADER-->
			<h3 class="page-title">
			@inject('setting','anlutro\LaravelSettings\Facade')
			{{ $setting::get('system_name','全方位建築智慧化管理系統') }} <small>{{ $setting::get('company_name','新保科技') }}</small>
			@inject('Setting','anlutro\LaravelSettings\SettingStore')
			</h3>
			<div class="page-bar" >
				<ul class="page-breadcrumb">
					<li>
						<i class="fa fa-home"></i>
						<a href="{{route('manage::index')}}">@lang('messages.homepage')</a>
						<i class="fa fa-angle-right"></i>
					</li>
					<li>
						<a href="{{ route('manage::energy::index') }}">@lang('messages.energy_setting')</a>
					</li>
				</ul>
			</div>

			<div class="tabbable tabs-left">
				<ul class="nav nav-tabs">
					<li class="active" ><a href="#month" data-toggle="tab">月</a></li>
					<li><a href="#year" data-toggle="tab">年</a></li>
				</ul>
				<div class="tab-content">
					@foreach($object as $one)
						<div class="tab-pane active" id="month">                
							<table id="table_month" style="width: 95%;" class="table table-striped table-bordered table-hover">
							<tr>
								<td class="overview" rowspan="6">									
									<strong>{{$one->thisYear}}年{{$one->thisMonth}}月能源消耗總額</strong>
									<div id="container">										
									</div>
									<br>
									<strong>{{$one->thisYear}}年{{$one->thisMonth}}月能源消耗分佈</strong>						
									<div id="container2" >										
									</div>
								</td>
							</tr>
							@if($energySetting->waterSwitch=='open')
							<tr>
								<td class="first gray other" style="width: 5%;">
									<img src="{{ asset('assets/images/power/water.png') }}">
									<label class="label_30">水</label>
								</td>
								<td class="other" style="width: 15%;"">
									<label class="label_20">用水預算:{{$one->budgetWater}}萬元</label>
									<label class="label_20">當前能耗:{{$one->thisMonthWater}}萬元</label>
								</td>
								<td class="other" style="width: 10%;">
									<div id="water_month_pie">
									</div>
								</td>
								<td class="other" style="width: 40%;">
									<div id="water_month_spline">
									</div>
								</td>
							</tr>
							@endif
							@if($energySetting->electricitySwitch=='open')
							<tr>
								<td class="first gray other" >
									<img src="{{ asset('assets/images/power/electric.png') }}">
									<label class="label_30">電</label>
								</td>
								<td class="other">
									<label class="label_20">用電預算:{{$one->budgetElectricity}}萬元</label>
									<label class="label_20">當前能耗:{{$one->thisMonthElectricity}}萬元</label>
								</td>
								<td class="other">
									<div id="electricity_month_pie">
									</div>
								</td>
								<td class="other">
									<div id="electricity_month_spline">
									</div>
								</td>
							</tr>
							@endif
							@if($energySetting->gasSwitch=='open')
							<tr>
								<td class="first gray other">
									<img src="{{ asset('assets/images/power/gas.png') }}">
									<label class="label_30">氣</label>
								</td>
								<td class="other">
									<label class="label_20">用氣預算:{{$one->budgetGas}}萬元</label>
									<label class="label_20">當前能耗:{{$one->thisMonthGas}}萬元</label>
								</td>
								<td class="other">
									<div id="gas_month_pie">
									</div>
								</td>
								<td class="other">
									<div id="gas_month_spline">
									</div>
								</td>
							</tr>
							@endif							
							@if($energySetting->hotSwitch=='open')
							<tr>
								<td class="first gray other">
									<img src="{{ asset('assets/images/power/hot.png') }}">
									<label class="label_30">熱</label>
								</td>
								<td class="other">
									<label class="label_20">用熱預算:{{$one->budgetHot}}萬元</label>
									<label class="label_20">當前能耗:{{$one->thisMonthHot}}萬元</label>
								</td>
								<td class="other">
									<div id="hot_month_pie">
									</div>
								</td>
								<td class="other">
									<div id="hot_month_spline">
									</div>
								</td>
							</tr>
							@endif
							@if($energySetting->oilSwitch=='open')
							<tr>
								<td class="first gray bottom">
									<img src="{{ asset('assets/images/power/oil.png') }}">
									<label class="label_30">油</label>
								</td>
								<td class="bottom">
									<label class="label_20">用油預算:{{$one->budgetOil}}萬元</label>
									<label class="label_20">當前能耗:{{$one->thisMonthOil}}萬元</label>
								</td>
								<td class="bottom">
									<div id="oil_month_pie">
									</div>
								</td>
								<td class="bottom">
									<div id="oil_month_spline">
									</div>
								</td>
							</tr>
							@endif
							</table>			
						</div> 
	
						<div class="tab-pane" id="year"> 
							<table id="table_year" style="width: 95%;" class="table table-striped table-bordered table-hover">
							<tr>
								<td class="overview" rowspan="6">
									
									<strong>{{$one->thisYear}}總年度能源消耗總額</strong>
									<div id="container3">										
									</div>
									<br>
									<strong>{{$one->thisYear}}總年度能源消耗分佈</strong>						
									<div id="container4" >										
									</div>
								</td>
							</tr>
							@if($energySetting->waterSwitch=='open')
							<tr>
								<td class="first gray other" style="width: 5%;">
									<img src="{{ asset('assets/images/power/water.png') }}">
									<label class="label_30">水</label>
								</td>
								<td class="other" style="width: 15%;"">
									<label class="label_20">用水預算:{{$one->budgetWater}}萬元</label>
									<label class="label_20">當前能耗:{{$one->usedWater}}萬元</label>
								</td>
								<td class="other" style="width: 10%;">
									<div id="water_year_pie">
									</div>
								</td>
								<td class="other" style="width: 40%;">
									<div id="water_year_spline">
									
									</div>
								</td>
							</tr>
							@endif
							@if($energySetting->electricitySwitch=='open')
							<tr>
								<td class="first gray other" >
									<img src="{{ asset('assets/images/power/electric.png') }}">
									<label class="label_30">電</label>
								</td>
								<td class="other">
									<label class="label_20">用電預算:{{$one->budgetElectricity}}萬元</label>
									<label class="label_20">當前能耗:{{$one->usedElectricity}}萬元</label>
								</td>
								<td class="other">
									<div id="electricity_year_pie">
									</div>
								</td>
								<td class="other">
									<div id="electricity_year_spline">
									</div>
								</td>
							</tr>
							@endif
							@if($energySetting->gasSwitch=='open')
							<tr>
								<td class="first gray other">
									<img src="{{ asset('assets/images/power/gas.png') }}">
									<label class="label_30">氣</label>
								</td>
								<td class="other">
									<label class="label_20">用氣預算:{{$one->budgetGas}}萬元</label>
									<label class="label_20">當前能耗:{{$one->usedGas}}萬元</label>
								</td>
								<td class="other">
									<div id="gas_year_pie">
									</div>
								</td>
								<td class="other">
									<div id="gas_year_spline">
									</div>
								</td>
							</tr>
							@endif
							@if($energySetting->hotSwitch=='open')
							<tr>
								<td class="first gray other">
									<img src="{{ asset('assets/images/power/hot.png') }}">
									<label class="label_30">熱</label>
								</td>
								<td class="other">
									<label class="label_20">用熱預算:{{$one->budgetHot}}萬元</label>
									<label class="label_20">當前能耗:{{$one->usedHot}}萬元</label>
								</td>
								<td class="other">
									<div id="hot_year_pie">
									</div>
								</td>
								<td class="other">
									<div id="hot_year_spline">
									</div>
								</td>
							</tr>
							@endif
							@if($energySetting->oilSwitch=='open')
							<tr>
								<td class="first gray bottom">
									<img src="{{ asset('assets/images/power/oil.png') }}">
									<label class="label_30">油</label>
								</td>
								<td class="bottom">
									<label class="label_20">用油預算:{{$one->budgetOil}}萬元</label>
									<label class="label_20">當前能耗:{{$one->usedOil}}萬元</label>
								</td>
								<td class="bottom">
									<div id="oil_year_pie">
									</div>
								</td>
								<td class="bottom">
									<div id="oil_year_spline">
									</div>
								</td>
							</tr>
							@endif
							</table>
						</div>
					@endforeach			
				</div>
			</div>
			<!-- /tabs -->
	    </div>
	</div>

@endsection
@section('plugins_page_level')
<script type="text/javascript" src="{{ asset('assets/global/plugins/jquery-validation/js/jquery.validate.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('assets/global/plugins/jquery-validation/js/additional-methods.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('assets/global/plugins/datatables/media/js/jquery.dataTables.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('assets/global/plugins/datatables/plugins/bootstrap/dataTables.bootstrap.js') }}"></script>
<script type="text/javascript" src="{{ asset('assets/global/plugins/bootbox/bootbox.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('assets/global/plugins/bootstrap-datepicker/js/bootstrap-datepicker.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('assets/global/plugins/bootstrap-datepicker/locales/bootstrap-datepicker.zh-TW.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('assets/global/plugins/bootstrap-fileinput/additional-methods.js') }}"></script>
<script type="text/javascript" src="{{ asset('assets/global/plugins/select2/js/select2.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('assets/global/plugins/bootstrap-select/1.12.2/bootstrap-select.min.js') }}"></script>

<!-- BEGIN X-EDITABLE PLUGIN-->
<script src="{{ asset('assets/global/plugins/bootstrap-editable/bootstrap-editable/js/bootstrap-editable.min.js') }}" type="text/javascript"></script>
<script src="{{ asset('assets/global/plugins/bootstrap-editable/inputs-ext/address/address.js') }}" type="text/javascript"></script>
<script src="{{ asset('assets/global/plugins/bootstrap-editable/inputs-ext/wysihtml5/wysihtml5.js') }}" type="text/javascript"></script>
<script type="text/javascript" src="{{ asset('assets/global/plugins/bootstrap-fileinput/bootstrap-fileinput.js') }}"></script>
<!-- END X-EDITABLE PLUGIN-->

<!-- 20181108 趨勢圖套件 START -->
<script src="{{ asset('assets/global/plugins/highcharts/js/highcharts.js')}}"></script>
<script src="{{ asset('assets/global/plugins/highcharts/js/exporting.js')}}"></script>
<script src="{{ asset('assets/global/plugins/highcharts/js/export-data.js')}}"></script>
<!-- 20181108 趨勢圖套件 END -->

@endsection
@section('js_page_level')
<script>
var array = ["water","electricity","gas","hot","oil"];
var cost  = [{{$one->thisMonthWater}},{{$one->thisMonthElectricity}},{{$one->thisMonthGas}},{{$one->thisMonthHot}},{{$one->thisMonthOil}}];
var cost_year  = [{{$one->usedWater}},{{$one->usedElectricity}},{{$one->usedGas}},{{$one->usedHot}},{{$one->usedOil}}];
var total = [{{$one->budgetWater}},{{$one->budgetElectricity}},{{$one->budgetGas}},{{$one->budgetHot}},{{$one->budgetOil}}];
var total_year = [{{$one->budgetWater}},{{$one->budgetElectricity}},{{$one->budgetGas}},{{$one->budgetHot}},{{$one->budgetOil}}];
var width= $("#container").width();
//當月消耗總合
Highcharts.chart('container', {
    chart: {
    	width: width,
        height: width,
        plotBackgroundColor: null,
        plotBorderWidth: 0,
        plotShadow: false,
        spacing: [0, 0, 0, 0],
  		backgroundColor: null
    },
    title: {
        text: '<strong>本月已消耗:{{$one->thisMonthMoneyRate}}%</strong><br><br><strong>本月已花費:{{$one->thisMonthMoney}}萬元</strong><br><br><strong>年度總預算:{{$one->budgetMoney}}萬元</strong>',
        align: 'center',
        verticalAlign: 'middle',
        style:{
        	align: 'right',
        },
        useHTML:true,
        y: -50
    },
    // subtitle:{
    // 	text: '<br><strong>指標值1200<strong><br><br><strong>預算值1200<strong>',
    //     align: 'center',
    //     verticalAlign: 'middle',
    //     useHTML:true,
    //     y: 30
    // }, 
    tooltip: {
    	useHTML: true,
        pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
    },
    plotOptions: {
        pie: {
            dataLabels: {
                enabled: true,
                distance: 0,
                style: {
                    fontWeight: 'bold',
                    color: 'white'
                }
            },
            center: ['50%', '50%'],
            size: '100%'
        }
    },
    //月消耗總合
    series: [{
        type: 'pie',
        name: '總費用',
        innerSize: '80%',
        data: [
            {
                name: '已消耗',
                y: {{$one->thisMonthMoneyRate}},
                dataLabels: {
                    enabled: false
                },
                color:"#94BB5E"
            },
            {
                name: '未消耗',
                y: 100-{{$one->thisMonthMoneyRate}},
                dataLabels: {
                    enabled: false
                },
                color:"#DDDDDD"
                
            }
        ]
    }],
    exporting: {     
	    enabled: false
	}
});
//當月消耗分布
Highcharts.chart('container2', {
    chart: {
    	width: width,
        height: width,
        plotBackgroundColor: null,
        plotBorderWidth: 0,
        plotShadow: false,
        spacing: [0, 0, 0, 0],
  		backgroundColor: null
    },
    title: {
        text: '',
        align: 'center',
        verticalAlign: 'middle',
        style:{
        	align: 'right',
        },
        useHTML:true,
        y: -50
    }, 
    tooltip: {
    	useHTML: true,
        pointFormat: '{point.percentage:.1f}%'
    },
    plotOptions: {
        pie: {
            dataLabels: {
                enabled: true,
                distance: 0,
                style: {
                    fontWeight: 'bold',
                    color: 'white'
                }
            },
            center: ['50%', '50%'],
            size: '100%'
        }
    },
    series: [{
        type: 'pie',
        innerSize: '80%',
        showInLegend: true,
        data: [
            @if($energySetting->waterSwitch=='open') 
            {
                name: '水',
                y: {{$one->thisMonthWaterRate}},
                dataLabels: {
                    enabled: false
                },
                color:"#93C9E0"
            },
            @endif
            @if($energySetting->electricitySwitch=='open') 
            {
                name: '電',
                y: {{$one->thisMonthElectricityRate}},
                dataLabels: {
                    enabled: false
                },
                color:"#FBA72F",
            },
            @endif
            @if($energySetting->gasSwitch=='open')
            {
                name: '氣',
                y: {{$one->thisMonthGasRate}},
                dataLabels: {
                    enabled: false
                },
                color:"#A7B55E",
            },
            @endif
            @if($energySetting->hotSwitch=='open')
            {
                name: '熱',
                y: {{$one->thisMonthHotRate}},
                dataLabels: {
                    enabled: false
                },
                color:"#E57451",
            },
            @endif
            @if($energySetting->oilSwitch=='open')
            {
                name: '油',
                y: {{$one->thisMonthOilRate}},
                dataLabels: {
                    enabled: false
                },
                color:"#546FB1",
            }
            @endif
        ]
    }],
    exporting: {     
	    enabled: false
	},
	legend:{
		labelFormatter:function () {
            return this.name+":" + this.percentage+"%";
        }
	}
});
//總年度消耗總合
Highcharts.chart('container3', {
    chart: {
    	width: width,
        height: width,
        plotBackgroundColor: null,
        plotBorderWidth: 0,
        plotShadow: false,
        spacing: [0, 0, 0, 0],
  		backgroundColor: null
    },
    title: {
        text:'<strong>本年度已消耗:{{$one->usedMoneyRate}}%</strong><br><br><strong>本年度已花費:{{$one->usedMoney}}萬元</strong><br><br><strong>年度總預算:{{$one->budgetMoney}}萬元</strong>',
        align: 'center',
        verticalAlign: 'middle',
        style:{
        	align: 'right',
        },
        useHTML:true,
        y: -50
    },
    // subtitle:{
    // 	text: '<br><strong>指標值1200<strong><br><br><strong>預算值1200<strong>',
    //     align: 'center',
    //     verticalAlign: 'middle',
    //     useHTML:true,
    //     y: 30
    // }, 
    tooltip: {
    	useHTML: true,
        pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
    },
    plotOptions: {
        pie: {
            dataLabels: {
                enabled: true,
                distance: 0,
                style: {
                    fontWeight: 'bold',
                    color: 'white'
                }
            },
            center: ['50%', '50%'],
            size: '100%'
        }
    },
    series: [{
        type: 'pie',
        name: '總費用',
        innerSize: '80%',
        data: [
            {
                name: '已消耗',
                y: {{$one->usedMoneyRate}},
                dataLabels: {
                    enabled: false
                },
                color:"#94BB5E"
            },
            {
                name: '未消耗',
                y: 100-{{$one->usedMoneyRate}},
                dataLabels: {
                    enabled: false
                },
                color:"#DDDDDD"
                
            }
        ]
    }],
    exporting: {     
	    enabled: false
	}
});
//總年度消耗分布
Highcharts.chart('container4', {
    chart: {
    	width: width,
        height: width,
        plotBackgroundColor: null,
        plotBorderWidth: 0,
        plotShadow: false,
        spacing: [0, 0, 0, 0],
  		backgroundColor: null
    },
    title: {
        text: '',
        align: 'center',
        verticalAlign: 'middle',
        style:{
        	align: 'right',
        },
        useHTML:true,
        y: -50
    }, 
    tooltip: {
    	useHTML: true,
        pointFormat: '{point.percentage:.1f}%'
    },
    plotOptions: {
        pie: {
            dataLabels: {
                enabled: true,
                distance: 0,
                style: {
                    fontWeight: 'bold',
                    color: 'white'
                }
            },
            center: ['50%', '50%'],
            size: '100%'
        }
    },
    series: [{
        type: 'pie',
        innerSize: '80%',
        showInLegend: true,
        data: [
            @if($energySetting->waterSwitch=='open') 
            {
                name: '水',
                y: {{$one->usedWaterRate}},
                dataLabels: {
                    enabled: false
                },
                color:"#93C9E0"
            },
            @endif
            @if($energySetting->electricitySwitch=='open') 
            {
                name: '電',
                y: {{$one->usedElectricityRate}},
                dataLabels: {
                    enabled: false
                },
                color:"#FBA72F",
            },
            @endif
            @if($energySetting->gasSwitch=='open')            
            {
                name: '氣',
                y: {{$one->usedGasRate}},
                dataLabels: {
                    enabled: false
                },
                color:"#A7B55E",
            }, 
            @endif
            @if($energySetting->hotSwitch=='open')
            {
                name: '熱',
                y: {{$one->usedHotRate}},
                dataLabels: {
                    enabled: false
                },
                color:"#E57451",
            }, 
            @endif
            @if($energySetting->oilSwitch=='open')
            {
                name: '油',
                y: {{$one->usedOilRate}},
                dataLabels: {
                    enabled: false
                },
                color:"#546FB1",
            } 
            @endif
        ]
    }],
    exporting: {     
	    enabled: false
	},
	legend:{
		labelFormatter:function () {
            return this.name+":" + this.percentage+"%";
        }
	}
});

for (var i = 0; i < array.length; i++) {
	width= $("#"+array[i]+"_month_pie").width();	//小圓餅圖
	setHighChart_Pie(array[i]+"_month_pie",width,cost[i],total[i]);	
	setHighChart_Pie(array[i]+"_year_pie",width,cost_year[i],total_year[i]);

	width= $("#"+array[i]+"_month_spline").width();		//曲線圖
	
	var dayGraph = [];		
  		@foreach($object as $one)
  		dayGraph[0] = {{ json_encode($one->usedDayWater) }};
  		dayGraph[1] = {{ json_encode($one->usedDayElectricity) }};
  		dayGraph[2] = {{ json_encode($one->usedDayGas) }};
  		dayGraph[3] = {{ json_encode($one->usedDayHot) }};
  		dayGraph[4] = {{ json_encode($one->usedDayOil) }};
  		@endforeach
  	setHighChart_Spline(array[i]+"_month_spline",width,dayGraph[i]);
	
	var monthGraph = [];		
  		@foreach($object as $one)
  		monthGraph[0] = {{ json_encode($one->usedMonthWater) }};
  		monthGraph[1] = {{ json_encode($one->usedMonthElectricity) }};
  		monthGraph[2] = {{ json_encode($one->usedMonthGas) }};
  		monthGraph[3] = {{ json_encode($one->usedMonthHot) }};
  		monthGraph[4] = {{ json_encode($one->usedMonthOil) }};
  		@endforeach
  	
  	setHighChart_Spline_year(array[i]+"_year_spline",width,monthGraph[i]);
}

//圓餅圖設定
function setHighChart_Pie(id,width,cost,total){
	if(total >= cost){
		Highcharts.chart(id, {
		    chart: {
		    	width: width,
		        height: width,
		        plotBackgroundColor: null,
		        plotBorderWidth: 0,
		        plotShadow: false,
		        spacing: [0, 0, 0, 0],
		  		backgroundColor: null
		    },
		    title: {
		    	useHTML:true,
		        text: '<strong>'+cost+'萬元</strong>',
		        align: 'center',
		        verticalAlign: 'middle',
		        style:{
		        	align: 'center',
		        },
		        x: -5,
		        y: 5
		    },
		    tooltip: {
		    	useHTML: true,
		        pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
		    },
		    plotOptions: {
		        pie: {
		            dataLabels: {
		                enabled: true,
		                distance: 0,
		                style: {
		                    fontWeight: 'bold',
		                    color: 'white'
		                }
		            },
		            center: ['50%', '50%'],
		            size: '100%'
		        }
		    },
		    series: [{
		        type: 'pie',
		        name: '總費用',
		        innerSize: '80%',
		        data: [
		            {
		                name: '已消耗',
		                y: parseFloat(cost),
		                dataLabels: {
		                    enabled: false
		                },
		                color:"#94BB5E"
		            },
		            {
		                name: '未消耗',
		                y: parseFloat(total-cost) ,
		                dataLabels: {
		                    enabled: false
		                },
		                color:"#DDDDDD"
		            }
		        ]
		    }],
		    exporting: {     
			    enabled: false
			}
		});
  	}else{
  		Highcharts.chart(id, {
		    chart: {
		    	width: width,
		        height: width,
		        plotBackgroundColor: null,
		        plotBorderWidth: 0,
		        plotShadow: false,
		        spacing: [0, 0, 0, 0],
		  		backgroundColor: null
		    },
		    title: {
		    	useHTML:true,
		        text: '<strong> '+cost+' 萬元</strong>',
		        align: 'center',
		        verticalAlign: 'middle',
		        style:{
		        	align: 'center',
		        },
		        x: -5,
		        y: 5
		    },
		    tooltip: {
		    	useHTML: true,
		        pointFormat: '{series.name}: <b>'+parseFloat((cost/total)*100).toFixed(1)+' %</b>'
		    },
		    plotOptions: {
		        pie: {
		            dataLabels: {
		                enabled: true,
		                distance: 0,
		                style: {
		                    fontWeight: 'bold',
		                    color: 'white'
		                }
		            },
		            center: ['50%', '50%'],
		            size: '100%'
		        }
		    },
		    series: [{
		        type: 'pie',
		        name: '總費用',
		        innerSize: '80%',
		        data: [
		            {
		                name:'已消耗',
		                y: parseFloat(cost),
		                dataLabels: {
		                    enabled: false
		                },
		                color:"#ED5050"
		            }
		        ]
		    }],
		    exporting: {     
			    enabled: false
			}
		});
  	}
	
}
//曲線圖設定
function setHighChart_Spline(id,width,data){
	Highcharts.chart(id, {
	    chart: {
	    	width: width,
	    	height: width/3,
	        type: 'spline'
	    },
	    title: { 
	        text: ' '
	    },
	    subtitle: {
	        text: ' '
	    },
	    xAxis: {
	        categories: ['1','2','3','4','5','6','7','8','9','10',
	        			 '11','12','13','14','15','16','17','18','19','20',
	        			 '21','22','23','24','25','26','27','28','29','30','31']
	    },
	    yAxis: {
	        title: {
	            text: '萬元'
	        },
	        labels: {
	            formatter: function () {
	                return this.value ;
	            }
	        }
	    },
	    tooltip: {
	        crosshairs: true,
	        shared: true
	    },
	    plotOptions: {
	        spline: {
	            marker: {
	                radius: 4,
	                lineColor: '#257EBB',
	                lineWidth: 1
	            }
	        }
	    },
	    series: [{
	        name: '日使用量',
	        marker: {
	            symbol: 'square'
	        },
	        data: data

	    }]
	});
}
function setHighChart_Spline_year(id,width,data){
	Highcharts.chart(id, {
	    chart: {
	    	width: width,
	    	height: width/3,
	        type: 'spline'
	    },
	    title: { 
	        text: ' '
	    },
	    subtitle: {
	        text: ' '
	    },
	    xAxis: {
	        categories: ['1','2','3','4','5','6','7','8','9','10',
	        			 '11','12','13','14','15','16','17','18','19','20',
	        			 '21','22','23','24','25','26','27','28','29','30','31']
	    },
	    yAxis: {
	        title: {
	            text: '萬元'
	        },
	        labels: {
	            formatter: function () {
	                return this.value ;
	            }
	        }
	    },
	    tooltip: {
	        crosshairs: true,
	        shared: true
	    },
	    plotOptions: {
	        spline: {
	            marker: {
	                radius: 4,
	                lineColor: '#257EBB',
	                lineWidth: 1
	            }
	        }
	    },
	    series: [{
	        name: '月使用量',
	        marker: {
	            symbol: 'square'
	        },
	        data: data

	    }]
	});
}

	

</script>
@endsection