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