Доброго времени суток.
Возможно вопрос задан не совсем корректно.
На работе получил от руководства следующее задание:
Получаем данные с оборудования через SNMP.
Выглядит это все следующим
образом.
Мониторим 13 единиц и необходимо чтобы они постоянно были на виду. Переключаться между вкладками неудобно и нужно сделать так, чтобы вся нужная информация была на одной вкладке. Как там это в java всё хранится и передается посмотреть не можем. Всё заблокировано. Поставить доп. программы или использовать, что то не стандартное тоже. Поэтому я так понимаю, что в моем распоряжении только блокнот, а вместе с ним HTML+CSS.
До меня "умельцы" изобрели нечто
подобное.
Не устраивало наличие горизонтального скролла (при обновлении надо все их передвинуть до конца вправо) и то что не всё оборудование влезло.
Я пока накидал
вот такой вариант.
Код наипростейший. Просто куча iframe с маленькой шириной и с каждого тяну именно место с цифрами.
spoiler
HTML:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>ForPost</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<table>
<tr>
<td></td>
<td class="name">УППГ</td>
<td class="name">ГМП №2</td>
<td class="name">ГМП №3</td>
<td class="name">ГМП №4</td>
<td class="name">ГМП №5</td>
<td class="name">ГМП №6</td>
<td class="name">КГП</td>
<td class="name">ГМП №1 (УЗОУ)</td>
<td class="name">КГС №1</td>
<td class="name">КГС №2</td>
<td class="name">КГС №3</td>
<td class="name">КГС №4</td>
<td class="name">ГМП №7 (УПОУ)</td>
</tr>
<tr>
<td><img src="465.png"></td>
<td class="cell"><iframe src="http://XX.XX.XXX.XXX" class='frame1' scrolling=no></iframe></td>
<td class="cell"><iframe src="http://XX.XX.XXX.XXX" class='frame1' scrolling=no></iframe></td>
<td class="cell"><iframe src="http://XX.XX.XXX.XXX" class='frame1' scrolling=no></iframe></td>
<td class="cell2"><iframe src="http://XX.XX.XXX.XXX" class='frame2' scrolling=no></iframe></td>
<td class="cell"><iframe src="http://XX.XX.XXX.XXX" class='frame1' scrolling=no></iframe></td>
<td class="cell"><iframe src="http://XX.XX.XXX.XXX" class='frame1' scrolling=no></iframe></td>
<td class="cell2"><iframe src="http://XX.XX.XXX.XXX" class='frame2' scrolling=no></iframe></td>
<td class="cell"><iframe src="http://XX.XX.XXX.XXX" class='frame1' scrolling=no></iframe></td>
<td class="cell"><iframe src="http://XX.XX.XXX.XXX" class='frame1' scrolling=no></iframe></td>
<td class="cell"><iframe src="http://XX.XX.XXX.XXX" class='frame1' scrolling=no></iframe></td>
<td class="cell"><iframe src="http://XX.XX.XXX.XXX" class='frame1' scrolling=no></iframe></td>
<td class="cell"><iframe src="http://XX.XX.XXX.XXX" class='frame1' scrolling=no></iframe></td>
<td class="cell"><iframe src="http://XX.XX.XXX.XXX" class='frame1' scrolling=no></iframe></td>
</tr>
</table>
</body>
</html>
CSS:
.cell
{
width:100px;
height:600px;
overflow:hidden;
position:relative;
}
.cell2
{
width:175px;
height:600px;
overflow:hidden;
position:relative;
}
table {
border-collapse: collapse;
}
td {
border: 1px solid black;
}
tr:first-child td:first-child {
border: none;
}
.name {
text-align: center;
font-weight: bold;
}
.frame1
{
position:absolute;
top:-360px;
left:-600px;
width:1200px;
height:1200px;
}
.frame2
{
position:absolute;
top:-360px;
left:-524px;
width:1200px;
height:1200px;
}
От скролла избавились, оборудование влезло, но видно, что из-за разного количества блоков питания и количество групп АКБ значения, начиная с середины смещаются. Поэтому просто подправить позиционирование не получается.
Я так понимаю, что если я вместо одного iframe на одну единицу оборудования буду использовать 4 и красиво их расположу, то он 4 раза будет через этот IP данные тянуть и это сильно затормозит процесс загрузки и обновления страницы, учитывая наши фаерволы. Подскажите, пожалуйста, есть ли у меня еще какие то варианты?
p.S может будут какие то замечания по коду.
p.p.S извините за кривую орфографию.
Простой
