080801
ОтЧЕТ О ВЫПОЛНЕННОЙ РАБОТЕ:
1) Ссылка на репозиторий JasperServer: http://50.17.231.99:8080/jasperserver/flow.html
Логин: jasperadmin
Пароль: jasperadmin
2) Ссылка на пользовательский интерфейс к разработанному отчету: http://50.17.231.99/
- index.php - основной файл, в котором обрабатывается внешний вид пользовательского интерфейса, формируются запросы к сервисам:
код :
<html>
<head>
<title>Журнал недостоверных значений</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.1.js"></script>
<script type="text/javascript" src="selects.js"></script>
<script type="text/javascript" src="tables.js"></script>
<!-- Сброс CSS -->
<link href="http://www.crucialwebhost.com/uploads/blog/2007/04/master.css" type="text/css" rel="stylesheet" />
<!-- Установка своих стилей CSS -->
<style>
body {
font-family: Arial, Verdana;
font-size: 12px;
}
h1 {
font-size: 24px;
padding: 10px 0 15px 10px;
font-family: Arial, Verdana;
}
div.parameter {
background:none repeat scroll 0 0 #F8F7EF;
border-top:1px solid #DDDDDD;
margin-bottom:0px;
padding:10px;
}
div.window {
background:none repeat scroll 0 0 #ede7cd;
border-bottom:1px solid #DDDDDD;
padding:10px;
}
div.jasper {
background:none repeat scroll 0 0 #ede7cd;
border-bottom:1px solid #DDDDDD;
padding: 10px;
}
table.param {
border-collapse:collapse;
border-spacing:0;
font-family: Arial, Verdana;
font-size: 12px;
letter-spacing: 0.5px;
margin: 0;
}
table.param td {
height:30px;
}
table.log {
border-collapse:collapse;
border: 1px solid #DDDDDD;
border-spacing:0;
font-family: Arial, Verdana;
font-size: 12px;
letter-spacing: 0.5px;
}
table.log td {
border-collapse:collapse;
border: 1px solid #DDDDDD;
border-spacing:0;
}
table.log tr {
border-collapse:collapse;
border: 1px solid #DDDDDD;
border-spacing:0;
}
div.log {
padding:10px;
}
input {
margin-top: 10px;
}
a.type {
color: red;
text-decoration: none;
border-bottom: 1px dashed red;
}
a.type:hover {
color: blue;
text-decoration: none;
border-bottom: 1px dashed blue;
}
select.par {
width: 230px;
}
div.load_time {
display: none;
}
</style>
<script language="javascript" type="text/javascript">
// Функции переключения между вариантами показа отчета
function OpenJasper() {
document.getElementById("jasper").style.display='block';
document.getElementById("window").style.display='none';
};
function OpenWindow() {
document.getElementById("window").style.display='block';
document.getElementById("jasper").style.display='none';
};
// Принудительная загрузка временных рядов "по умолчанию" при загрузке страницы (иммитация события OnChange для выпадающего списка "уровень истории")
$(document).ready(function(){
$('#ph').trigger("change");
});
</script>
</head>
<body>
<div id="test"></div>
<h1>Журнал недостоверных значений</h1>
<div class="parameter">
<form action="http://50.17.231.99:8080/jasperserver/flow.html" method="post" name="form" target="_blank">
<!-- Скрытые параметры для передачи в JasperServer -->
<input type="hidden" name="_flowId" value="viewReportFlow">
<input type="hidden" name="ParentFolderUri" value="/journal">
<input type="hidden" name="standAlone" value="true">
<input type="hidden" name="reportUnit" value="/journal/report">
<input type="hidden" name="j_username" value="jasperadmin">
<input type="hidden" name="j_password" value="jasperadmin">
<table class="param">
<tr>
<td>Уровень истории</td>
<td>
<select id="ph" name="pH" class="par">
<option value="h2">Часовой уровень</option>
<option value="h3">Уровень за смену</option>
<option value="h4">Уровень за сутки</option>
<option value="h5">Уровень за месяц</option>
</select>
</td>
</tr>
<tr>
<td>Тип сигнала</td>
<td><select id="ptype" name="pType" class="par">
<option value="a">Aналоговые сигналы</option>
<option value="m">Расчетные значения</option>
<option value="d">Дискретные сигналы</option>
<option value="s">Специальные значения</option>
</select></td>
</tr>
<tr>
<td>Группа оборудования</td>
<td><select id="pserv" name="pServ" class="par">
<option value="0">Общестанционное оборудование</option>
<option value="1">Оборудование блока №1</option>
<option value="2">Оборудование блока №2</option>
<option value="3">Оборудование блока №3</option>
</select></td>
<tr>
<td>Временные ряды</td>
<td>
<div id="load_time" class="load_time"><img src="load.gif" align="absmiddle" /></div>
<div id="times">
<select id="pstamp" name="pStamp" class="par">
<option value=""> </option>
</select>
</div>
</td>
</tr>
</table>
</div>
<!-- Просмотр журнала в текущем окне -->
<div id="window" class="window" style="display:block;">в текущем окне | <a href="javascript:void(0);"onclick="OpenJasper();" class="type">в JasperServer</a><br/>
<input type="button" id="logwindow" value="Посмотреть журнал" /> <img src="load_table.gif" align="absmiddle" style="display:none;" id="load_table" /></div>
<!-- Просмотр журнала в JasperServer -->
<div id="jasper" class="jasper" style="display:none;"><a href="javascript:void(0);" onclick="OpenWindow();" class="type">в текущем окне</a> | в JasperServer<br/>
Формат <select id="output" name="output">
<option value="html">HTML</option>
<option value="pdf">PDF</option>
<option value="xls">EXCEL</option>
<option value="rtf">WORD</option>
<option value="csv">CSV</option>
<option value="swf">FLASH</option>
</select> <input type="submit" name="submit" value="Посмотреть журнал" /></div>
</form>
<div id="log" class="log"></div>
</body>
</html>
- get_table.php - посылает запрос к базе данных для выборки данных для отчета, обрабатывает полученную информацию, перекодирует полученную информацию из кодировки cp1251 в utf-8, так как php-функция json_encode(), которая компонует полученные данные в JSON-формат, умеет работать только с utf-8
код:
// Назначаем переменные $ph = $_GET['ph']; $ptype = $_GET['ptype']; $pserv = $_GET['pserv']; $pstamp = $_GET['pstamp']; // Функция конвертации получаемых данных из кодировки cp1251 в utf-8, так как функция упаковки json_encode работает только с utf-8 function convert($from, $to, $var) { if (is_array($var)) { $new = array(); foreach ($var as $key => $val) { $new[convert($from, $to, $key)] = convert($from, $to, $val); } $var = $new; } else if (is_string($var)) { $var = iconv($from, $to, $var); } return $var; } // Соединение с базой данных $db = mysql_connect("advanta.homeip.net", "userairs", "userairs"); mysql_select_db("airs",$db); mysql_query('SET NAMES cp1251'); // Запрос к базе данных на выборку временного ряда в соответствии с выбранным уровнем истории $sql = "select s.code, s.name, s.unit, h.a_val, h.a_count from svodcode s left outer join ".$ph." h on s.code=h.code where s.type='".$ptype."' and s.nserv='".$pserv."' and h.tstamp='".$pstamp."' and h.a_stat=1"; $result = mysql_query($sql,$db); $sdata = mysql_fetch_array($result); if ($sdata == null) { // Проверяем есть ли результат запроса $mdata = null; // Присваиваем нулевое значение // Упаковка данных с помощью JSON print json_encode($mdata); } else { // Если информация в запросе есть // Цикл для сбора информации, полученной из базы данных, в массив do { $mdata[] = array('code' => $sdata['code'], 'name' => $sdata['name'], 'unit' => $sdata['unit'], 'a_val' => $sdata['a_val'], 'a_count' => $sdata['a_count']); } while ($sdata = mysql_fetch_array($result)); // Упаковка данных с помощью JSON print json_encode(convert('cp1251', 'utf-8', $mdata)); }
select.js:
$(document).ready(function () { $('#ph').change(function () { var ph = $(this).val(); // Присваиваем переменной значение выбранного уровня истории (h2, h3, h4,h5) $('#pstamp').attr('disabled', true); // Блокируем выпадающий список с временным рядом $('#pstamp').html('<option>Загрузка...</option>'); // Пишем в заблокированном списке, что происходит загрузка информации $.get("get_time.php", {ph: ph}, // Отправляем GET запрос к специальному PHP файлу, который выдергивает из базы данных временные ряды, в запросе также передается параметр в соответсвии с выбранным уровнем истории function(data){ // Обрабатываем полученные данные в JSON формате var options = ''; $(data).each(function() { options += '<option value="' + $(this).attr('id') + '">' + $(this).attr('tstamp') + '</option>'; });// Вставляем в выпадающий список выборку из базы данных $('#pstamp').html(options); $('#pstamp').attr('disabled', false);} // Разблокируем выпадающий список ,"json"); }); });
tables.js:
$(document).ready(function () { $('#logwindow').click(function () { // Событие при нажатии кнопки "Посмотреть журнал" $('#log').html(""); // Чистим поле с таблицей $('#load_table').show(); // Показываем картинку загрузки var ph = $('#ph').val(); // Присваиваем значения переменных var ptype = $('#ptype').val(); var pserv = $('#pserv').val(); var pstamp = $('#pstamp').val(); $.get("get_table.php", {ph: ph, ptype: ptype, pserv: pserv, pstamp: pstamp}, // Отправляем GET запрос к специальному PHP файлу, который выдергивает из базы данных информацию недостоверным значениям, в запросе также передаются все необхходимые параметры function(data){ // Обрабатываем полученные данные в JSON формате if (data == null) { // Проверяем есть ли информация по запросу $('#log').html("Нет данных для построения журнала"); $('#load_table').hide(); // Убираем картинку загрузки return(false); } else { var tables = '<table class=log><thead><tr><th colspan=5 align=center valign=center>Журнал недостоверных значений</th></tr></thead><tbody><tr><td><i>Код сигнала</i></td><td><i>Наименование сигнала</i></td><td><i>Ед. измерения</i></td><td><i>Значение</i></td><td><i>Отчетность достоверности</i></td></tr>'; // Шапка таблицы $(data).each(function() { tables += '<tr><td>' + $(this).attr('code') + '</td><td>' + $(this).attr('name') + '</td><td>' + $(this).attr('unit') + '</td><td>' + $(this).attr('a_val') + '</td><td>' + $(this).attr('a_count') + '</td></tr>'; }); // Вставляем в таблицу выборку из базы данных tables += '</tbody></table>'; // Подвал таблицы $('#load_table').hide(); // Убираем картинку загрузки $('#log').html(tables);}} // Показываем таблицу ,"json"); }); });
master.css:
/***** Global Settings *****/ html, body { border:0; margin:0; padding:0; } body { font:100%/1.25 Arial, Helvetica, sans-serif; } /***** Headings *****/ h1, h2, h3, h4, h5, h6 { margin:0; padding:0; font-weight:normal; } h1 { padding:30px 0 25px 0; letter-spacing:-1px; font-size:2em; } h2 { padding:20px 0; letter-spacing:-1px; font-size:1.5em; } h3 { font-size:1em; font-weight:bold; } /***** Common Formatting *****/ p, ul, ol { margin:0; padding:0 0 1.25em 0; } ul, ol { padding:0 0 1.25em 2.5em; } blockquote { margin:1.25em; padding:1.25em 1.25em 0 1.25em; } small { font-size:0.85em; } img { border:0; } sup { position:relative; bottom:0.3em; vertical-align:baseline; } sub { position:relative; bottom:-0.2em; vertical-align:baseline; } acronym, abbr { cursor:help; letter-spacing:1px; border-bottom:1px dashed; } /***** Links *****/ a, a:link, a:visited, a:hover { text-decoration:underline; } /***** Forms *****/ form { margin:0; padding:0; display:inline; } input, select, textarea { font:1em Arial, Helvetica, sans-serif; } textarea { width:100%; line-height:1.25; } label { cursor:pointer; } /***** Tables *****/ table { border:0; margin:0 0 1.25em 0; padding:0; } table tr td { padding:2px; } /***** Wrapper *****/ #wrap { width:960px; margin:0 auto; } /***** Global Classes *****/ .clear { clear:both; } .float-left { float:left; } .float-right { float:right; } .text-left { text-align:left; } .text-right { text-align:right; } .text-center { text-align:center; } .text-justify { text-align:justify; } .bold { font-weight:bold; } .italic { font-style:italic; } .underline { border-bottom:1px solid; } .highlight { background:#ffc; } .wrap { width:960px;margin:0 auto; } .img-left { float:left;margin:4px 10px 4px 0; } .img-right { float:right;margin:4px 0 4px 10px; } .nopadding { padding:0; } .noindent { margin-left:0;padding-left:0; } .nobullet { list-style:none;list-style-image:none; }