<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 -->