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="">&nbsp;</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="Посмотреть журнал" />&nbsp;&nbsp;<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>&nbsp;<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>Код&nbsp;сигнала</i></td><td><i>Наименование&nbsp;сигнала</i></td><td><i>Ед.&nbsp;измерения</i></td><td><i>Значение</i></td><td><i>Отчетность&nbsp;достоверности</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; }