<style type="text/css">

     ::-webkit-input-placeholder { color:#B9B9B9; }
     input:-moz-placeholder { color:fff; }
	.select_box{ width: 200px;
   height: 34px;
   overflow: hidden;
   border: 1px solid #ccc;
   font-size: 16px;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <!--[if IE]><script lang="javascript" type="text/javascript" src="../../js/excanvas.js"></script><![endif]-->
  		<hr class="noscreen" />
		<!-- Content (Right Column) -->
		<div id="content" class="box">
			<h3 class="tit"><? echo gettext('歷史曲線圖查詢'); ?></h3>
			<fieldset>
				<legend><? echo gettext('查詢參數'); ?></legend>
				<form method="post" enctype="multipart/form-data" action="../ajax/query/project_sensor_chart_query_edit.php">
                <table class="nostyle">
					<tr>
                    	<td><? echo gettext('報表名稱'); ?></td>
                        <td colspan="2" style="text-align:left">
                        	<input class="input-text" type="text" name="query_name" required="required" value="<?=$query_name ?>">
                        </td>
                    </tr>
                    <tr>
						<td><? echo gettext('選擇儀器種類'); ?></td>
						<td colspan="4" style="text-align:left">
                           <? 
                                $name = explode(',',$array['0']['sensor_name']);
                                $totoal_sensor = count($name);
                           		/*if(device_list != ""){
                                    foreach($device_list as $key => $value){
                                    	$state = ($value['device_code'] == $array['0']['device_code']) ? 'checked=checked':'';
                                    	if($value['device_code'] == $array['0']['device_code']) { $chart_title = $value['device_name']; }
                                        echo "<input type='radio' name='device_code' value='".$value['device_code']."' ".$state." />".$value['device_name'];
                                        
                                        $sensor_name = $Device->get_sensor_data($_GET['project_number'],$value['device_code']);
                                        foreach($sensor_name as $k => $v){
                                            if($value['device_code'] == $array['0']['device_code']) { 
												$checked = (in_array($v['sensor_id'], $name)) ? 'checked':'';
                                            	echo "<span class='sensor_name ".$value['device_code']."' ><input type='checkbox' name='".$value['device_code']."[]' style='margin:5px' value='".$v['sensor_id']."'  ".$checked.">".$v['sensor_id']."</span>";
                                            }else{
                                            	echo "<span class='sensor_name ".$value['device_code']."'  style='display:none'><input type='checkbox' name='".$value['device_code']."[]' style='margin:5px' value='".$v['sensor_id']."'  checked>".$v['sensor_id']."</span>";
                                            }
                                        }
                                        echo "<br>";
                                    }
                                }*/
                                
                                if($device_list != ""){
                                	echo "<select name='device_code' id='select_option' class='select_box'>";
                                	foreach($device_list as $key => $value){
                                		if($value['device_code'] == $array['0']['device_code']) { $chart_title = $value['device_name']; }
                                		$state = ($value['device_code'] == $array['0']['device_code']) ? 'selected':'';
                                		echo "<option value='".$value['device_code']."'".$state .">".$value['device_name']."</option>";
                                	}
                                	echo "</select>";
                                	echo "<div style='border-width: 1px;border-style:solid;width:350px;height: 100px;display: -webkit-inline-box;float: right;overflow-y:auto;'>";
                                	foreach($device_list as $key => $value){
                                		$sensor_name = $Device->get_sensor_data($_GET['project_number'],$value['device_code']);
                                		foreach($sensor_name as $k => $v){
                                            if($value['device_code'] == $array['0']['device_code']) { 
												$checked = (in_array($v['sensor_id'], $name)) ? 'checked':'';
                                            	echo "<span class='sensor_name ".$value['device_code']."' ><input type='checkbox' name='".$value['device_code']."[]' style='margin:5px' value='".$v['sensor_id']."'  ".$checked.">".$v['sensor_id']."</span>";
                                            }else{
                                            	echo "<span class='sensor_name ".$value['device_code']."'  style='display:none'><input type='checkbox' name='".$value['device_code']."[]' style='margin:5px' value='".$v['sensor_id']."'  checked>".$v['sensor_id']."</span>";
                                            }
                                        }
                                	}
                                	echo "</div>";
                                }
                                
                                
                                
                           ?>
                           
                        </td>
					</tr>
                    <tr>
                        <td><? echo gettext('設定X軸間距'); ?></td>
                        <td colspan="2" style="text-align:left">
                            <input class="input-text" type="text" name="x_tickInterval" value="<?=$array['0']['x_tickInterval']?>">
                        </td>
                    </tr>
                    <tr>
                        <td><? echo gettext('設定Y軸間距'); ?></td>
                        <td colspan="2" style="text-align:left">
                            <input class="input-text" type="text" name="y_tickInterval" value="<?=$array['0']['y_tickInterval'] ?>">
                        </td>
                    </tr>
                    <tr>
                        <td><? echo gettext('設定Y軸最大值'); ?></td>
                        <td colspan="2" style="text-align:left">
                            <input class="input-text" type="text" name="y_max" value="<?=$array['0']['y_max'] ?>">
                        </td>
                    </tr>
                    <tr>
                        <td><? echo gettext('設定Y軸最小值'); ?></td>
                        <td colspan="2" style="text-align:left">
                            <input class="input-text" type="text" name="y_min" value="<?=$array['0']['y_min'] ?>">
                        </td>
                        <td><? echo gettext('查詢圖表類型'); ?></td>
                        <td style="text-align:left">
                        	<select name="chart_type" class='select_box'>
                        		<?php foreach($chart_type as $key =>$value){ ?>
                        			<option value="<?=$key?>" <? echo ($array[0]['chart_type'] == $key) ? "selected":""; ?>><?php echo $value ?></option>
                        		<?php } ?>
                        		
                        	</select>
                        </td>
                    </tr>
                    <tr>
						<td><? echo gettext('查詢起始日'); ?></td>
                        <td><input class="date input-text" type="date" name="query_date_start" required="required" value="<? echo date('Y-m-d',$array['0']['query_date_start']); ?>"></td>
						<td><? echo gettext('查詢終止日'); ?></td>
                        <td><input class="date input-text" type="date" name="query_date_end" required="required" value="<? echo date('Y-m-d',$array['0']['query_date_end']); ?>"></td>
                        <td class="t-right">
                        	<input type="submit" class="input-submit buttonblue" value="<? echo gettext('更改'); ?>" />
							<a href="<?=INDEX ?>sanlien/ajax/query/project_chart_del.php?project_number=<?=$_GET['project_number'] ?>&id=<?=$_GET['id'] ?>"><input type="button" class="input-submit buttonred" value="<? echo gettext('刪除'); ?>" /></a>                        
                        </td>
					</tr>
				</table>
                    <input type="hidden" name="creater" value="<?=$_SESSION['user']['manager'] ?>" />
                    <input type="hidden"  name="project_code" value="<?=$_GET['project_number'] ?>" />
                    <input type="hidden"  name="id" value="<?=$_GET['id'] ?>" />
                </form>
			</fieldset>
            
            <h3 class="tit"><? echo gettext('歷史曲線圖'); ?></h3>
            <input type="button" id="buttonPrint" class="buttonred" value="<? echo gettext('列印曲線圖'); ?>"/>
            <select id="ExportOption" class="select_box" >
			  <option value="PNG">PNG Image</option>
			  <option value="JPEG">JPEG Image</option>
			  <option value="PDF">PDF Document</option>
			  <option value="SVG">SVG Vector Image</option>
			</select>
			<input type="button" id="buttonExport" class="buttongreen" value="<? echo gettext('匯出檔案'); ?>"/>
			<?php
				switch($array[0]['chart_type']){
					case "0":
	            	if($device_load != ""){
	                    foreach($device_load as $key => $value){
	                    	//echo date('Y-m-d H:i',$value['date'])."|".$value['date']."<br>";
	                        $date_xAxis[] = "'".date('Y-m-d H:i',$value['date'])."'";
	                        $device_date[date('Y-m-d H:i',$value['date'])][$value['name']] = ($value['formula_val'] != "") ? number_format($value['formula_val'],2,".",""):'null';
	                    }
	                    
	                    $xAxis = implode(',',array_unique($date_xAxis)); //列軸時間換算
	                    //將sensor的值 存為陣列
	                    foreach($device_date as $key => $value){
		                   foreach($name as $k => $v){
			                   	$device_name_1[$v][] = ($value[$v] != "") ? $value[$v]:'null';
			               }
		                }
	                   
	                    
	                    //解析sensor的陣列 提供給圖內的查詢
	                    $i = 0;
	                    foreach($device_name_1 as $key => $value){
	                        if(in_array($key,$name)){
	                            $Y_Axisp[] = "{name: '".$key."', marker: {symbol: '".$chart_symbol[$i]."'}, data: [".implode(',',$value)."]}";                    
	                            $i++;
	                        }
	                    }
	                    $series = implode(',',$Y_Axisp);  //值的時間換算
	    
	                    $unit =  "'".$array['0']['unit']."'";
	                   
	                }else{
	                	echo gettext('查詢內容不正確');
	                }
	                
	                $range = implode(',',$alert_range);
					$total_number = count($date_xAxis);
	                $x_tickInterval  = ($array['0']['x_tickInterval'] != "") ? ",tickInterval:".round($total_number/$array['0']['x_tickInterval']/$totoal_sensor):"";

	                $y_tickInterval  = ($array['0']['y_tickInterval'] != "") ? ",tickInterval:".$array['0']['y_tickInterval']:"";
	                $y_max  = ($array['0']['y_max'] != "") ? ",max:".$array['0']['y_max']:"";
	                $y_min  = ($array['0']['y_min'] != "") ? ",min:".$array['0']['y_min']:"";
	                
	                break;
	                
	                case "1":
	                	//print_r($device_load);
	                	$date_xAxis = implode("','",$name);
	                	$xAxis = "'".$date_xAxis."'"; //列軸時間換算
	                	foreach($device_load as $key => $value){
		                        $device_date[date('Y-m-d H:i',$value['date'])][$value['name']] = ($value['formula_val'] != "") ? number_format($value['formula_val'],2,'.',''):'null';
		               	}
		               	
		               	foreach($device_date as $key => $value){
		               		$totoal_number = 0;
		               		ksort($value);
		               		
		               		foreach($name as $k => $v){
		               			$totoal_number += ($value[$v] != "") ? $value[$v]:0;
				                $device_name_1[$key][] =  $totoal_number;
				            }
		               	}
		               	$i = 0;
	                    foreach($device_name_1 as $key => $value){
	                            $Y_Axisp[] = "{name: '".$key."', marker: {symbol: '".$chart_symbol[$i]."'}, data: [".implode(',',$value)."]}";                    
	                            $i++;
	                    }
	                    
	                    $series = implode(',',$Y_Axisp);  //值的時間換算
	                    $unit =  "'".$device_name['0']['unit']."'";
	                break;
                
                }

            ?>
<script type="text/javascript">
$(function () {
        var chart = new Highcharts.Chart({
            chart: {
            	renderTo: 'container', 
                type: 'spline',
				zoomType: 'xy'
            },
            title: {
                text: '<?php echo $chart_title; ?>'
            },
            xAxis: {
                categories: [<?php echo $xAxis; ?>]
                <?php echo $x_tickInterval; ?>
            },
            yAxis: {
                title: {
                    text: <?php echo $unit; ?>
                },
	            plotLines: [{
		            value: <?php echo ($device_name[0]['top_alert'] != "") ? $device_name[0]['top_alert']:0; ?>,
		            color: 'blue',
		            width: 2,
		            label: {
		            text: 'T-WARRING:<?php echo ($device_name[0]['top_alert'] != "") ? $device_name[0]['top_alert']:0; ?>',
		            align: 'left',
		            style: {
		            	color: 'black'
		                   }
		               }
	            },{
		            value: <?php echo ($device_name[0]['down_alert'] != "") ? $device_name[0]['down_alert']:0; ?>,
		            color: 'blue',
		            width: 2,
		            label: {
		            text: 'B-WARRING:<?php echo ($device_name[0]['down_alert'] != "") ? $device_name[0]['down_alert']:0; ?>',
		            align: 'left',
		            style: {
		            	color: 'black'
		                   }
		               }
	            },{
		            value: <?php echo ($device_name[0]['top_active'] != "") ? $device_name[0]['top_active']:0; ?>,
		            color: 'red',
		            width: 2,
		            label: {
		            text: 'T-ACTION:<?php echo ($device_name[0]['top_active'] != "") ? $device_name[0]['top_active']:0; ?>',
		            align: 'left',
		            style: {
		            	color: 'gray'
		                   }
		               }
	            },{
		            value: <?php echo ($device_name[0]['down_active'] != "") ? $device_name[0]['down_active']:0; ?>,
		            color: 'red',
		            width: 2,
		            label: {
		            text: 'B-ACTION:<?php echo ($device_name[0]['down_active'] != "") ? $device_name[0]['down_active']:0; ?>',
		            align: 'left',
		            style: {
		            	color: 'gray'
		                   }
		               }
	            }],
                labels: {
                    formatter: function() {
                        return this.value
                    }
                }
                <?php echo $y_tickInterval.$y_max.$y_min; ?>
            },
            tooltip: {
                crosshairs: true,
                shared: true
            },
            plotOptions: {
                spline: {
                    marker: {
                        radius: 4,
                        lineColor: '#666666',
                        lineWidth: 1
                    }
                }
            },
            series: [<?php echo $series; ?>],
			navigation: {
	            buttonOptions: {
	                enabled: false
	            }
	        } 
        });
        
        $('#buttonExport').click(function() {
	        var e = document.getElementById("ExportOption");
	        var ExportAs = e.options[e.selectedIndex].value;   
	        
	        if(ExportAs == 'PNG')
	        {
	            chart.exportChart({type: 'image/png', filename: 'my-png'}, {subtitle: {text:''}});
	        }
	        if(ExportAs == 'JPEG')
	        {
	            chart.exportChart({type: 'image/jpeg', filename: 'my-jpg'}, {subtitle: {text:''}});
	        }
	        if(ExportAs == 'PDF')
	        {
	            chart.exportChart({type: 'application/pdf', filename: 'my-pdf'}, {subtitle: {text:''}});
	        }
	        if(ExportAs == 'SVG')
	        {
	            chart.exportChart({type: 'image/svg+xml', filename: 'my-svg'}, {subtitle: {text:''}});
	        }
	    });
	    
	    $('#buttonPrint').click(function() {
	        chart.setTitle(null, { text: ' ' });
	        chart.print();
	        chart.setTitle(null, { text: '' });
	    });
    });
    

		</script>
<script src="../gui/js/chart/highcharts.js"></script>
<script src="../gui/js/chart/exporting.js"></script>
    <script>
        $("#select_option").change(function (){
            var device_code = $(this).val();
            $('.sensor_name').hide();
            $('.'+device_code).show();
                                
        });      
        
    </script>
            <div class="table" id='block'>
				<div id="container" style="min-width: 400px; height: 600px; margin: 0 auto"></div>
        		</div>
			</div>
		</div> <!-- /content -->

	</div> <!-- /cols -->