<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>
<?php $__env->startSection('css_page_level'); ?>


<link rel="stylesheet" type="text/css" href="<?php echo e(asset('assets/global/plugins/datatables/plugins/bootstrap/dataTables.bootstrap.css')); ?>"/>
<link rel="stylesheet" type="text/css" href="<?php echo e(asset('assets/global/plugins/bootstrap-datepicker/css/bootstrap-datepicker3.min.css')); ?>" />
<link rel="stylesheet" type="text/css" href="<?php echo e(asset('assets/global/plugins/bootstrap-fileinput/bootstrap-fileinput.css')); ?>"/>
<link rel="stylesheet" type="text/css" href="<?php echo e(asset('assets/global/plugins/select2/css/select2.css')); ?>"/>
<link rel="stylesheet" type="text/css" href="<?php echo e(asset('assets/global/plugins/select2/css/select2-bootstrap.min.css')); ?>"/>
<link rel="stylesheet" type="text/css" href="<?php echo e(asset('assets/global/plugins/bootstrap-select/1.12.2/bootstrap-select.min.css')); ?>"/>
<link rel="stylesheet" type="text/css" href="<?php echo e(asset('assets/global/plugins/bootstrap-select/bootstrap-select.min.css')); ?>"/>
<link href="<?php echo e(asset('assets/global/plugins/bootstrap-editable/bootstrap-editable/css/bootstrap-editable.css')); ?>" rel="stylesheet" type="text/css" media="screen"/>
<link href="<?php echo e(asset('assets/global/plugins/bootstrap-editable/inputs-ext/address/address.css')); ?>" rel="stylesheet" type="text/css" media="screen"/>
<?php $__env->stopSection(); ?>


<?php $__env->startSection('page-content-wrapper'); ?>

	<div class="page-content-wrapper" id="main">
		<div class="page-content">
			<!-- BEGIN PAGE HEADER-->
			<h3 class="page-title">
			<?php $setting = app('anlutro\LaravelSettings\Facade'); ?>
			<?php echo e($setting::get('system_name','全方位建築智慧化管理系統')); ?> <small><?php echo e($setting::get('company_name','新保科技')); ?></small>
			<?php $Setting = app('anlutro\LaravelSettings\SettingStore'); ?>
			</h3>
			<div class="page-bar" >
				<ul class="page-breadcrumb">
					<li>
						<i class="fa fa-home"></i>
						<a href="<?php echo e(route('manage::index')); ?>"><?php echo app('translator')->get('messages.homepage'); ?></a>
						<i class="fa fa-angle-right"></i>
					</li>
					<li>
						<a href="<?php echo e(route('manage::energy::index')); ?>"><?php echo app('translator')->get('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">
					<?php 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><?php echo e($one->thisYear); ?>年<?php echo e($one->thisMonth); ?>月能源消耗總額</strong>
									<div id="container">										
									</div>
									<br>
									<strong><?php echo e($one->thisYear); ?>年<?php echo e($one->thisMonth); ?>月能源消耗分佈</strong>						
									<div id="container2" >										
									</div>
								</td>
							</tr>
							<?php if($energySetting->waterSwitch=='open'): ?>
							<tr>
								<td class="first gray other" style="width: 5%;">
									<img src="<?php echo e(asset('assets/images/power/water.png')); ?>">
									<label class="label_30">水</label>
								</td>
								<td class="other" style="width: 15%;"">
									<label class="label_20">用水預算:<?php echo e($one->budgetWater); ?>萬元</label>
									<label class="label_20">當前能耗:<?php echo e($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>
							<?php endif; ?>
							<?php if($energySetting->electricitySwitch=='open'): ?>
							<tr>
								<td class="first gray other" >
									<img src="<?php echo e(asset('assets/images/power/electric.png')); ?>">
									<label class="label_30">電</label>
								</td>
								<td class="other">
									<label class="label_20">用電預算:<?php echo e($one->budgetElectricity); ?>萬元</label>
									<label class="label_20">當前能耗:<?php echo e($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>
							<?php endif; ?>
							<?php if($energySetting->gasSwitch=='open'): ?>
							<tr>
								<td class="first gray other">
									<img src="<?php echo e(asset('assets/images/power/gas.png')); ?>">
									<label class="label_30">氣</label>
								</td>
								<td class="other">
									<label class="label_20">用氣預算:<?php echo e($one->budgetGas); ?>萬元</label>
									<label class="label_20">當前能耗:<?php echo e($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>
							<?php endif; ?>							
							<?php if($energySetting->hotSwitch=='open'): ?>
							<tr>
								<td class="first gray other">
									<img src="<?php echo e(asset('assets/images/power/hot.png')); ?>">
									<label class="label_30">熱</label>
								</td>
								<td class="other">
									<label class="label_20">用熱預算:<?php echo e($one->budgetHot); ?>萬元</label>
									<label class="label_20">當前能耗:<?php echo e($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>
							<?php endif; ?>
							<?php if($energySetting->oilSwitch=='open'): ?>
							<tr>
								<td class="first gray bottom">
									<img src="<?php echo e(asset('assets/images/power/oil.png')); ?>">
									<label class="label_30">油</label>
								</td>
								<td class="bottom">
									<label class="label_20">用油預算:<?php echo e($one->budgetOil); ?>萬元</label>
									<label class="label_20">當前能耗:<?php echo e($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>
							<?php 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><?php echo e($one->thisYear); ?>總年度能源消耗總額</strong>
									<div id="container3">										
									</div>
									<br>
									<strong><?php echo e($one->thisYear); ?>總年度能源消耗分佈</strong>						
									<div id="container4" >										
									</div>
								</td>
							</tr>
							<?php if($energySetting->waterSwitch=='open'): ?>
							<tr>
								<td class="first gray other" style="width: 5%;">
									<img src="<?php echo e(asset('assets/images/power/water.png')); ?>">
									<label class="label_30">水</label>
								</td>
								<td class="other" style="width: 15%;"">
									<label class="label_20">用水預算:<?php echo e($one->budgetWater); ?>萬元</label>
									<label class="label_20">當前能耗:<?php echo e($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>
							<?php endif; ?>
							<?php if($energySetting->electricitySwitch=='open'): ?>
							<tr>
								<td class="first gray other" >
									<img src="<?php echo e(asset('assets/images/power/electric.png')); ?>">
									<label class="label_30">電</label>
								</td>
								<td class="other">
									<label class="label_20">用電預算:<?php echo e($one->budgetElectricity); ?>萬元</label>
									<label class="label_20">當前能耗:<?php echo e($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>
							<?php endif; ?>
							<?php if($energySetting->gasSwitch=='open'): ?>
							<tr>
								<td class="first gray other">
									<img src="<?php echo e(asset('assets/images/power/gas.png')); ?>">
									<label class="label_30">氣</label>
								</td>
								<td class="other">
									<label class="label_20">用氣預算:<?php echo e($one->budgetGas); ?>萬元</label>
									<label class="label_20">當前能耗:<?php echo e($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>
							<?php endif; ?>
							<?php if($energySetting->hotSwitch=='open'): ?>
							<tr>
								<td class="first gray other">
									<img src="<?php echo e(asset('assets/images/power/hot.png')); ?>">
									<label class="label_30">熱</label>
								</td>
								<td class="other">
									<label class="label_20">用熱預算:<?php echo e($one->budgetHot); ?>萬元</label>
									<label class="label_20">當前能耗:<?php echo e($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>
							<?php endif; ?>
							<?php if($energySetting->oilSwitch=='open'): ?>
							<tr>
								<td class="first gray bottom">
									<img src="<?php echo e(asset('assets/images/power/oil.png')); ?>">
									<label class="label_30">油</label>
								</td>
								<td class="bottom">
									<label class="label_20">用油預算:<?php echo e($one->budgetOil); ?>萬元</label>
									<label class="label_20">當前能耗:<?php echo e($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>
							<?php endif; ?>
							</table>
						</div>
					<?php endforeach; ?>			
				</div>
			</div>
			<!-- /tabs -->
	    </div>
	</div>

<?php $__env->stopSection(); ?>
<?php $__env->startSection('plugins_page_level'); ?>
<script type="text/javascript" src="<?php echo e(asset('assets/global/plugins/jquery-validation/js/jquery.validate.min.js')); ?>"></script>
<script type="text/javascript" src="<?php echo e(asset('assets/global/plugins/jquery-validation/js/additional-methods.min.js')); ?>"></script>
<script type="text/javascript" src="<?php echo e(asset('assets/global/plugins/datatables/media/js/jquery.dataTables.min.js')); ?>"></script>
<script type="text/javascript" src="<?php echo e(asset('assets/global/plugins/datatables/plugins/bootstrap/dataTables.bootstrap.js')); ?>"></script>
<script type="text/javascript" src="<?php echo e(asset('assets/global/plugins/bootbox/bootbox.min.js')); ?>"></script>
<script type="text/javascript" src="<?php echo e(asset('assets/global/plugins/bootstrap-datepicker/js/bootstrap-datepicker.min.js')); ?>"></script>
<script type="text/javascript" src="<?php echo e(asset('assets/global/plugins/bootstrap-datepicker/locales/bootstrap-datepicker.zh-TW.min.js')); ?>"></script>
<script type="text/javascript" src="<?php echo e(asset('assets/global/plugins/bootstrap-fileinput/additional-methods.js')); ?>"></script>
<script type="text/javascript" src="<?php echo e(asset('assets/global/plugins/select2/js/select2.min.js')); ?>"></script>
<script type="text/javascript" src="<?php echo e(asset('assets/global/plugins/bootstrap-select/1.12.2/bootstrap-select.min.js')); ?>"></script>

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

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

<?php $__env->stopSection(); ?>
<?php $__env->startSection('js_page_level'); ?>
<script>
var array = ["water","electricity","gas","hot","oil"];
var cost  = [<?php echo e($one->thisMonthWater); ?>,<?php echo e($one->thisMonthElectricity); ?>,<?php echo e($one->thisMonthGas); ?>,<?php echo e($one->thisMonthHot); ?>,<?php echo e($one->thisMonthOil); ?>];
var cost_year  = [<?php echo e($one->usedWater); ?>,<?php echo e($one->usedElectricity); ?>,<?php echo e($one->usedGas); ?>,<?php echo e($one->usedHot); ?>,<?php echo e($one->usedOil); ?>];
var total = [<?php echo e($one->budgetWater); ?>,<?php echo e($one->budgetElectricity); ?>,<?php echo e($one->budgetGas); ?>,<?php echo e($one->budgetHot); ?>,<?php echo e($one->budgetOil); ?>];
var total_year = [<?php echo e($one->budgetWater); ?>,<?php echo e($one->budgetElectricity); ?>,<?php echo e($one->budgetGas); ?>,<?php echo e($one->budgetHot); ?>,<?php echo e($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>本月已消耗:<?php echo e($one->thisMonthMoneyRate); ?>%</strong><br><br><strong>本月已花費:<?php echo e($one->thisMonthMoney); ?>萬元</strong><br><br><strong>年度總預算:<?php echo e($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: <?php echo e($one->thisMonthMoneyRate); ?>,
                dataLabels: {
                    enabled: false
                },
                color:"#94BB5E"
            },
            {
                name: '未消耗',
                y: 100-<?php echo e($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: [
            <?php if($energySetting->waterSwitch=='open'): ?> 
            {
                name: '水',
                y: <?php echo e($one->thisMonthWaterRate); ?>,
                dataLabels: {
                    enabled: false
                },
                color:"#93C9E0"
            },
            <?php endif; ?>
            <?php if($energySetting->electricitySwitch=='open'): ?> 
            {
                name: '電',
                y: <?php echo e($one->thisMonthElectricityRate); ?>,
                dataLabels: {
                    enabled: false
                },
                color:"#FBA72F",
            },
            <?php endif; ?>
            <?php if($energySetting->gasSwitch=='open'): ?>
            {
                name: '氣',
                y: <?php echo e($one->thisMonthGasRate); ?>,
                dataLabels: {
                    enabled: false
                },
                color:"#A7B55E",
            },
            <?php endif; ?>
            <?php if($energySetting->hotSwitch=='open'): ?>
            {
                name: '熱',
                y: <?php echo e($one->thisMonthHotRate); ?>,
                dataLabels: {
                    enabled: false
                },
                color:"#E57451",
            },
            <?php endif; ?>
            <?php if($energySetting->oilSwitch=='open'): ?>
            {
                name: '油',
                y: <?php echo e($one->thisMonthOilRate); ?>,
                dataLabels: {
                    enabled: false
                },
                color:"#546FB1",
            }
            <?php 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>本年度已消耗:<?php echo e($one->usedMoneyRate); ?>%</strong><br><br><strong>本年度已花費:<?php echo e($one->usedMoney); ?>萬元</strong><br><br><strong>年度總預算:<?php echo e($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: <?php echo e($one->usedMoneyRate); ?>,
                dataLabels: {
                    enabled: false
                },
                color:"#94BB5E"
            },
            {
                name: '未消耗',
                y: 100-<?php echo e($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: [
            <?php if($energySetting->waterSwitch=='open'): ?> 
            {
                name: '水',
                y: <?php echo e($one->usedWaterRate); ?>,
                dataLabels: {
                    enabled: false
                },
                color:"#93C9E0"
            },
            <?php endif; ?>
            <?php if($energySetting->electricitySwitch=='open'): ?> 
            {
                name: '電',
                y: <?php echo e($one->usedElectricityRate); ?>,
                dataLabels: {
                    enabled: false
                },
                color:"#FBA72F",
            },
            <?php endif; ?>
            <?php if($energySetting->gasSwitch=='open'): ?>            
            {
                name: '氣',
                y: <?php echo e($one->usedGasRate); ?>,
                dataLabels: {
                    enabled: false
                },
                color:"#A7B55E",
            }, 
            <?php endif; ?>
            <?php if($energySetting->hotSwitch=='open'): ?>
            {
                name: '熱',
                y: <?php echo e($one->usedHotRate); ?>,
                dataLabels: {
                    enabled: false
                },
                color:"#E57451",
            }, 
            <?php endif; ?>
            <?php if($energySetting->oilSwitch=='open'): ?>
            {
                name: '油',
                y: <?php echo e($one->usedOilRate); ?>,
                dataLabels: {
                    enabled: false
                },
                color:"#546FB1",
            } 
            <?php 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 = [];		
  		<?php foreach($object as $one): ?>
  		dayGraph[0] = <?php echo e(json_encode($one->usedDayWater)); ?>;
  		dayGraph[1] = <?php echo e(json_encode($one->usedDayElectricity)); ?>;
  		dayGraph[2] = <?php echo e(json_encode($one->usedDayGas)); ?>;
  		dayGraph[3] = <?php echo e(json_encode($one->usedDayHot)); ?>;
  		dayGraph[4] = <?php echo e(json_encode($one->usedDayOil)); ?>;
  		<?php endforeach; ?>
  	setHighChart_Spline(array[i]+"_month_spline",width,dayGraph[i]);
	
	var monthGraph = [];		
  		<?php foreach($object as $one): ?>
  		monthGraph[0] = <?php echo e(json_encode($one->usedMonthWater)); ?>;
  		monthGraph[1] = <?php echo e(json_encode($one->usedMonthElectricity)); ?>;
  		monthGraph[2] = <?php echo e(json_encode($one->usedMonthGas)); ?>;
  		monthGraph[3] = <?php echo e(json_encode($one->usedMonthHot)); ?>;
  		monthGraph[4] = <?php echo e(json_encode($one->usedMonthOil)); ?>;
  		<?php 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>
<?php $__env->stopSection(); ?>
<?php echo $__env->make('layout.manage', array_except(get_defined_vars(), array('__data', '__path')))->render(); ?>