VladislavOstapov/terminal-web-server
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

визуальные изменения в вебе

Browse Source
This commit is contained in:
Vladislav Ostapov 2024-11-08 15:34:05 +03:00
parent a833c0f68a
commit 16b9776bfd
3 changed files with 463 additions and 450 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
static/fields.css
View File

@ -105,6 +105,14 @@ select * {
color: var(--text-color); color: var(--text-color);
} }
.settings-set-container tr > * {
border-bottom: solid 1px var(--text-color2);
}
.settings-set-container tr:hover {
background: var(--bg-selected);
}
/*********************** Стили для красивых 'switch' ***********************/ /*********************** Стили для красивых 'switch' ***********************/
.toggle-input { .toggle-input {

881
static/main.html
View File

@ -6,17 +6,33 @@
<title>RSCM-101</title> <title>RSCM-101</title>
<link rel="stylesheet" type="text/css" href="/style.css"> <link rel="stylesheet" type="text/css" href="/style.css">
<link rel="stylesheet" type="text/css" href="/fields.css"> <link rel="stylesheet" type="text/css" href="/fields.css">
<style>
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 10;
background: var(--bg-selected);
}
body { /* значение по-умолчанию */ --header-height: 60px; }
#content {
padding-top: var(--header-height);
}
</style>
</head> </head>
<body> <body>
<div id="app" hidden> <div id="app" hidden>
<div> <header>
<span class="nav-bar-element">Прием: <span :class="{ indicator_bad: stat_rx.state === false, indicator_good: stat_rx.state === true, indicator: true }"></span></span> <span class="nav-bar-element">Прием: <span :class="{ indicator_bad: stat_rx.state === false, indicator_good: stat_rx.state === true, indicator: true }"></span></span>
<span class="nav-bar-element">Передача: <span :class="{ indicator_good: stat_tx.state === true, indicator: true }"></span></span> <span class="nav-bar-element">Передача: <span :class="{ indicator_good: stat_tx.state === true, indicator: true }"></span></span>
<span class="nav-bar-element">Тест: <span :class="{ indicator_good: (param.general.isTestInputData === true || param.general.modulatorMode === 'test'), indicator: true }"></span></span> <span class="nav-bar-element">Тест: <span :class="{ indicator_good: (param.general.isTestInputData === true || param.general.modulatorMode === 'test'), indicator: true }"></span></span>
<!-- Последнее обновление: {{ lastUpdateTime }}--> <!-- Последнее обновление: {{ lastUpdateTime }}-->
</div> <div :class="{ value_bad: initState !== 'Успешная инициализация системы' }">{{ initState }}</div>
<div class="tabs">
<div class="tabs-header"> <div class="tabs-header">
<span style="font-weight:bold">RSCM-101</span> <span style="font-weight:bold">RSCM-101</span>
<a href="#monitoring" class="tabs-btn" @click="activeTab = 'monitoring'" :class="{ active: activeTab === 'monitoring' }">Мониторинг</a> <a href="#monitoring" class="tabs-btn" @click="activeTab = 'monitoring'" :class="{ active: activeTab === 'monitoring' }">Мониторинг</a>
@ -25,162 +41,166 @@
<a href="#admin" class="tabs-btn" @click="activeTab = 'admin'" :class="{ active: activeTab === 'admin' }">Администрирование</a> <a href="#admin" class="tabs-btn" @click="activeTab = 'admin'" :class="{ active: activeTab === 'admin' }">Администрирование</a>
<a href="/logout" class="tabs-btn">Выход</a> <a href="/logout" class="tabs-btn">Выход</a>
</div> </div>
<div :class="{ value_bad: initState !== 'Успешная инициализация системы' }">{{ initState }}</div> </header>
<div id="content"> <div id="content">
<div class="tabs-body-item tabs-item-flex-container" v-show="activeTab === 'monitoring'"> <div class="tabs-body-item tabs-item-flex-container" v-show="activeTab === 'monitoring'">
<div class="settings-set-container"> <div class="settings-set-container">
<h2>Статистика приема</h2> <h2>Статистика приема</h2>
<table> <table>
<tbody> <tbody>
<tr><th>Прием</th><td><span :class="{ indicator_bad: stat_rx.state === false, indicator_good: stat_rx.state === true, indicator: true }"></span></td></tr> <tr><th>Прием</th><td><span :class="{ indicator_bad: stat_rx.state === false, indicator_good: stat_rx.state === true, indicator: true }"></span></td></tr>
<tr><th>Захват символьной</th><td><span :class="{ indicator_bad: stat_rx.sym_sync_lock === false, indicator_good: stat_rx.sym_sync_lock === true, indicator: true }"></span></td></tr> <tr><th>Захват символьной</th><td><span :class="{ indicator_bad: stat_rx.sym_sync_lock === false, indicator_good: stat_rx.sym_sync_lock === true, indicator: true }"></span></td></tr>
<tr><th>Захват ФАПЧ</th><td><span :class="{ indicator_bad: stat_rx.afc_lock === false, indicator_good: stat_rx.afc_lock === true, indicator: true }"></span></td></tr> <tr><th>Захват ФАПЧ</th><td><span :class="{ indicator_bad: stat_rx.afc_lock === false, indicator_good: stat_rx.afc_lock === true, indicator: true }"></span></td></tr>
<tr><th>Захват поиска по частоте</th><td><span :class="{ indicator_bad: stat_rx.freq_search_lock === false, indicator_good: stat_rx.freq_search_lock === true, indicator: true }"></span></td></tr> <tr><th>Захват поиска по частоте</th><td><span :class="{ indicator_bad: stat_rx.freq_search_lock === false, indicator_good: stat_rx.freq_search_lock === true, indicator: true }"></span></td></tr>
<tr><th>Захват пакетной синхр.</th><td><span :class="{ indicator_bad: stat_rx.pkt_sync === false, indicator_good: stat_rx.pkt_sync === true, indicator: true }"></span></td></tr> <tr><th>Захват пакетной синхр.</th><td><span :class="{ indicator_bad: stat_rx.pkt_sync === false, indicator_good: stat_rx.pkt_sync === true, indicator: true }"></span></td></tr>
<tr><th>ОСШ/RSSI</th><td>{{ stat_rx.snr }} / {{ stat_rx.rssi }}</td></tr> <tr><th>ОСШ/RSSI</th><td>{{ stat_rx.snr }} / {{ stat_rx.rssi }}</td></tr>
<tr><th>Modcod</th><td>{{ stat_rx.modcod }}</td></tr> <tr><th>Modcod</th><td>{{ stat_rx.modcod }}</td></tr>
<tr><th>Размер кадра</th><td>{{ stat_rx.frameSize }}</td></tr> <tr><th>Размер кадра</th><td>{{ stat_rx.frameSize }}</td></tr>
<tr><th>Пилот-символы</th><td>{{ stat_rx.pilots }}</td></tr> <tr><th>Пилот-символы</th><td>{{ stat_rx.pilots }}</td></tr>
<tr><th>Символьная ошибка</th><td>{{ stat_rx.symError }}</td></tr> <tr><th>Символьная ошибка</th><td>{{ stat_rx.symError }}</td></tr>
<tr><th>Грубая/точная част. ошибка, Гц</th><td>{{ stat_rx.freqErr }} / {{ stat_rx.freqErrAcc }}</td></tr> <tr><th>Грубая/точная част. ошибка, Гц</th><td>{{ stat_rx.freqErr }} / {{ stat_rx.freqErrAcc }}</td></tr>
<tr><th>Ур. входного сигнала</th><td>{{ stat_rx.inputSignalLevel }}</td></tr> <tr><th>Ур. входного сигнала</th><td>{{ stat_rx.inputSignalLevel }}</td></tr>
<tr><th>Ошибка ФАПЧ</th><td>{{ stat_rx.pllError }}</td></tr> <tr><th>Ошибка ФАПЧ</th><td>{{ stat_rx.pllError }}</td></tr>
<tr><th>Инф. скорость на приеме</th><td>{{ stat_rx.speedOnRxKbit }} kbit/s</td></tr> <tr><th>Инф. скорость на приеме</th><td>{{ stat_rx.speedOnRxKbit }} kbit/s</td></tr>
<tr><th>Инф. скорость на интерфейсе</th><td>{{ stat_rx.speedOnIifKbit }} kbit/s</td></tr> <tr><th>Инф. скорость на интерфейсе</th><td>{{ stat_rx.speedOnIifKbit }} kbit/s</td></tr>
</tbody> </tbody>
</table> </table>
<p> Статистика пакетов </p> <p> Статистика пакетов </p>
<table> <table>
<tbody> <tbody>
<tr><th>Качественных пакетов</th><td>{{ stat_rx.packetsOk }}</td></tr> <tr><th>Качественных пакетов</th><td>{{ stat_rx.packetsOk }}</td></tr>
<tr><th>Поврежденных пакетов</th><td>{{ stat_rx.packetsBad }}</td></tr> <tr><th>Поврежденных пакетов</th><td>{{ stat_rx.packetsBad }}</td></tr>
<tr><th>DUMMY</th><td>{{ stat_rx.packetsDummy }}</td></tr> <tr><th>DUMMY</th><td>{{ stat_rx.packetsDummy }}</td></tr>
</tbody> </tbody>
</table> </table>
<button @click="resetPacketsStatistics()"> Сброс статистики </button> <button @click="resetPacketsStatistics()"> Сброс статистики </button>
</div>
<div class="settings-set-container">
<h2>Статистика передачи</h2>
<table>
<tbody>
<tr><th>Передача</th><td><span :class="{ indicator_bad: stat_tx.state === false, indicator_good: stat_tx.state === true, indicator: true }"></span></td></tr>
<tr><th>ОСШ дальнего приема</th><td>{{ stat_tx.snr }}</td></tr>
<tr><th>Modcod</th><td>{{ stat_tx.modcod }}</td></tr>
<tr><th>Размер кадра</th><td>{{ stat_tx.frameSize }}</td></tr>
<tr><th>Пилот-символы</th><td>{{ stat_tx.pilots }}</td></tr>
<tr><th>Инф. скорость на передаче</th><td>{{ stat_tx.speedOnTxKbit }} kbit/s</td></tr>
<tr><th>Инф. скорость на интерфейсе</th><td>{{ stat_tx.speedOnIifKbit }} kbit/s</td></tr>
</tbody>
</table>
</div>
<div class="settings-set-container" v-if="isCinC === true">
<h2>Статистика режима CinC</h2>
<table>
<tbody>
<tr><th>ОСС</th><td>{{ stat_cinc.occ }}</td></tr>
<tr><th>Захват коррелятора</th><td><span :class="{ indicator_bad: stat_cinc.correlator === false, indicator_good: stat_cinc.correlator === true, indicator: true }"></span></td></tr>
<tr><th>Кол-во срывов коррелятора</th><td>{{ stat_cinc.correlatorFails }}</td></tr>
<tr><th>Грубая/точная част. ошибка, Гц</th><td>{{ stat_cinc.freqErr }} / {{ stat_cinc.freqErrAcc }}</td></tr>
<tr><th>Задержка в канале, мс</th><td>{{ stat_cinc.channelDelay }}</td></tr>
</tbody>
</table>
</div>
<div class="settings-set-container">
<h2>Состояние устройства</h2>
<table>
<tbody>
<tr><th>Температура ADRV</th><td>{{ stat_device.adrv }} °C</td></tr>
<tr><th>Температура ZYNQ ULTRASUCK</th><td>{{ stat_device.zynq }} °C</td></tr>
<tr><th>Температура FPGA</th><td>{{ stat_device.fpga }} °C</td></tr>
</tbody>
</table>
</div>
</div> </div>
<div class="tabs-body-item" v-show="activeTab === 'setup' && settingFetchComplete"> <div class="settings-set-container">
<h2>Настройки приема/передачи</h2> <h2>Статистика передачи</h2>
<table>
<tbody>
<tr><th>Передача</th><td><span :class="{ indicator_bad: stat_tx.state === false, indicator_good: stat_tx.state === true, indicator: true }"></span></td></tr>
<tr><th>ОСШ дальнего приема</th><td>{{ stat_tx.snr }}</td></tr>
<tr><th>Modcod</th><td>{{ stat_tx.modcod }}</td></tr>
<tr><th>Размер кадра</th><td>{{ stat_tx.frameSize }}</td></tr>
<tr><th>Пилот-символы</th><td>{{ stat_tx.pilots }}</td></tr>
<tr><th>Инф. скорость на передаче</th><td>{{ stat_tx.speedOnTxKbit }} kbit/s</td></tr>
<tr><th>Инф. скорость на интерфейсе</th><td>{{ stat_tx.speedOnIifKbit }} kbit/s</td></tr>
</tbody>
</table>
</div>
<div class="settings-set-container" v-if="isCinC === true">
<h2>Статистика режима CinC</h2>
<table>
<tbody>
<tr><th>ОСС</th><td>{{ stat_cinc.occ }}</td></tr>
<tr><th>Захват коррелятора</th><td><span :class="{ indicator_bad: stat_cinc.correlator === false, indicator_good: stat_cinc.correlator === true, indicator: true }"></span></td></tr>
<tr><th>Кол-во срывов коррелятора</th><td>{{ stat_cinc.correlatorFails }}</td></tr>
<tr><th>Грубая/точная част. ошибка, Гц</th><td>{{ stat_cinc.freqErr }} / {{ stat_cinc.freqErrAcc }}</td></tr>
<tr><th>Задержка в канале, мс</th><td>{{ stat_cinc.channelDelay }}</td></tr>
</tbody>
</table>
</div>
<div class="settings-set-container">
<h2>Состояние устройства</h2>
<table>
<tbody>
<tr><th>Температура ADRV</th><td>{{ stat_device.adrv }} °C</td></tr>
<tr><th>Температура ZYNQ ULTRASUCK</th><td>{{ stat_device.zynq }} °C</td></tr>
<tr><th>Температура FPGA</th><td>{{ stat_device.fpga }} °C</td></tr>
</tbody>
</table>
</div>
</div>
<div class="tabs-body-item" v-show="activeTab === 'setup' && settingFetchComplete">
<h2>Настройки приема/передачи</h2>
<div class="settings-set-container">
<label>
<span>Режим работы</span>
<select v-model="param.general.isCinC">
<option value="false">SCPC</option>
<option value="true">CinC</option>
</select>
</label>
</div>
<div class="tabs-item-flex-container">
<div class="settings-set-container"> <div class="settings-set-container">
<h3>Настройки передатчика</h3>
<label> <label>
<span>Режим работы</span> <span>Включить передатчик</span>
<select v-model="param.general.isCinC"> <span class="toggle-input">
<option value="false">SCPC</option> <input type="checkbox" v-model="param.general.txEn" />
<option value="true">CinC</option> <span class="slider"></span>
</span>
</label>
<label>
<span>Автоматический запуск передатчика</span>
<span class="toggle-input">
<input type="checkbox" v-model="param.general.autoStartTx" />
<span class="slider"></span>
</span>
</label>
<label>
<span>Режим работы модулятора</span>
<select v-model="param.general.modulatorMode">
<option value="normal">Нормальный</option>
<option value="test">Тест (CW)</option>
</select>
</label>
<label>
<span>Входные данные</span>
<select v-model="param.general.isTestInputData">
<option value="false">Ethernet</option>
<option value="true">Тест (CW)</option>
</select> </select>
</label> </label>
</div> </div>
<div class="tabs-item-flex-container"> <div class="settings-set-container">
<div class="settings-set-container"> <h3>Параметры передачи</h3>
<h3>Настройки передатчика</h3> <label>
<label> <span>Центральная частота, КГц</span>
<span>Включить передатчик</span> <input v-model="param.tx.centerFreq" type="number"/>
<span class="toggle-input"> </label>
<input type="checkbox" v-model="param.general.txEn" /> <label>
<span class="slider"></span> <span>Символьная скорость, Бод</span>
</span> <input v-model="param.tx.cymRate" type="number"/>
</label> </label>
<label> <label>
<span>Автоматический запуск передатчика</span> <span>Roll-off</span>
<span class="toggle-input"> <select v-model="param.tx.rolloff">
<input type="checkbox" v-model="param.general.autoStartTx" /> <option value="5">0.05</option>
<span class="slider"></span> <option value="10">0.10</option>
</span> <option value="15">0.15</option>
</label> <option value="20">0.20</option>
<label> <option value="25">0.25</option>
<span>Режим работы модулятора</span> </select>
<select v-model="param.general.modulatorMode"> </label>
<option value="normal">Нормальный</option> <label>
<option value="test">Тест (CW)</option> <span>Ослабление, дБ</span>
</select> <input v-model="param.tx.attenuation" type="number"/>
</label> </label>
<label>
<span>Входные данные</span>
<select v-model="param.general.isTestInputData">
<option value="false">Ethernet</option>
<option value="true">Тест (CW)</option>
</select>
</label>
</div>
<div class="settings-set-container">
<h3>Параметры передачи</h3>
<label>
<span>Центральная частота, КГц</span>
<input v-model="param.tx.centerFreq"/>
</label>
<label>
<span>Символьная скорость, Бод</span>
<input v-model="param.tx.cymRate"/>
</label>
<label>
<span>Roll-off</span>
<select v-model="param.tx.rolloff">
<option value="5">0.05</option>
<option value="10">0.10</option>
<option value="15">0.15</option>
<option value="20">0.20</option>
<option value="25">0.25</option>
</select>
</label>
<label>
<span>Ослабление, дБ</span>
<input v-model="param.tx.attenuation"/>
</label>
</div> </div>
<div class="settings-set-container"> <div class="settings-set-container">
<h3>Режим работы DVB-S2</h3> <h3>Режим работы DVB-S2</h3>
<label> <label>
<span>Режим</span> <span>Период служебных пакетов, сек</span>
<select v-model="param.dvbs2.mode"> <input v-model="param.dvbs2.servicePacketPeriod" type="number">
<option value="ccm">CCM</option> </label>
<option value="acm">ACM</option> <label>
</select> <span>Режим</span>
</label> <select v-model="param.dvbs2.mode">
<label> <option value="ccm">CCM</option>
<span>Размер кадра</span> <option value="acm">ACM</option>
<select v-model="param.dvbs2.frameSize"> </select>
<option value="normal">normal</option> </label>
<option value="short">short</option> <label>
</select> <span>Размер кадра</span>
</label> <select v-model="param.dvbs2.frameSize">
<option value="normal">normal</option>
<option value="short">short</option>
</select>
</label>
<!-- <label>--> <!-- <label>-->
<!-- <span>Пилот-символы</span>--> <!-- <span>Пилот-символы</span>-->
<!-- <select v-model="param.dvbs2.pilots">--> <!-- <select v-model="param.dvbs2.pilots">-->
@ -189,301 +209,300 @@
<!-- </select>--> <!-- </select>-->
<!-- </label>--> <!-- </label>-->
<label v-show="param.dvbs2.mode === 'ccm'"> <label v-show="param.dvbs2.mode === 'ccm'">
<span>Модуляция</span> <span>Модуляция</span>
<select v-model="param.dvbs2.ccm_modulation"> <select v-model="param.dvbs2.ccm_modulation">
<option value="qpsk">QPSK</option> <option value="qpsk">QPSK</option>
<option value="8psk">8PSK</option> <option value="8psk">8PSK</option>
<option value="16apsk">16APSK</option> <option value="16apsk">16APSK</option>
<option value="32apsk">32APSK</option> <option value="32apsk">32APSK</option>
</select> </select>
</label> </label>
<label v-show="param.dvbs2.mode === 'ccm'"> <label v-show="param.dvbs2.mode === 'ccm'">
<span>Скорость кода</span> <span>Скорость кода</span>
<select v-model="param.dvbs2.ccm_speed"> <select v-model="param.dvbs2.ccm_speed">
<option v-for="speed in getAvailableModcods(param.dvbs2.ccm_modulation)" v-bind:value="speed">{{ speed }}</option> <option v-for="speed in getAvailableModcods(param.dvbs2.ccm_modulation)" v-bind:value="speed">{{ speed }}</option>
</select>
</label>
<label v-show="param.dvbs2.mode === 'acm'">
<span>Текущий модкод</span>
<input v-model="stat_rx.modcod" readonly>
</label>
<label v-show="param.dvbs2.mode === 'acm'">
<span>Модуляция (макс. режим)</span>
<select v-model="param.dvbs2.acm_maxModulation">
<option value="qpsk">QPSK</option>
<option value="8psk">8PSK</option>
<option value="16apsk">16APSK</option>
<option value="32apsk">32APSK</option>
</select>
</label>
<label v-show="param.dvbs2.mode === 'acm'">
<span>Скорость кода (макс. режим)</span>
<select v-model="param.dvbs2.acm_maxSpeed">
<option v-for="speed in getAvailableModcods(param.dvbs2.acm_maxModulation)" v-bind:value="speed">{{ speed }}</option>
</select>
</label>
<label v-show="param.dvbs2.mode === 'acm'">
<span>Модуляция (мин. режим)</span>
<select v-model="param.dvbs2.acm_minModulation">
<option value="qpsk">QPSK</option>
<option value="8psk">8PSK</option>
<option value="16apsk">16APSK</option>
<option value="32apsk">32APSK</option>
</select>
</label>
<label v-show="param.dvbs2.mode === 'acm'">
<span>Скорость кода (мин. режим)</span>
<select v-model="param.dvbs2.acm_minSpeed">
<option v-for="speed in getAvailableModcods(param.dvbs2.acm_minModulation)" v-bind:value="speed">{{ speed }}</option>
</select>
</label>
</div>
<div class="settings-set-container">
<h3>Авто-регулировка мощности</h3>
<label>
<span>Авто-регулировка мощности</span>
<span class="toggle-input">
<input type="checkbox" v-model="param.acm.en" />
<span class="slider"></span>
</span>
</label>
<label>
<span>Максимальное ослабление</span>
<input v-model="param.acm.maxAttenuation"/>
</label>
<label>
<span>Минимальное ослабление</span>
<input v-model="param.acm.minAttenuation"/>
</label>
<label>
<span>Требуемое ОСШ</span>
<input v-model="param.acm.requiredSnr"/>
</label>
</div>
<div class="settings-set-container">
<h3>Настройка приемника</h3>
<label>
<span>Режим управления усилением</span>
<select v-model="param.rx.gainMode">
<option value="auto">АРУ</option>
<option value="manual">РРУ</option>
</select>
</label>
<label v-show="param.rx.gainMode === 'manual'">
<span>Усиление, dB</span>
<input v-model="param.rx.manualGain"/>
</label>
<label>
<span>Инверсия спектра</span>
<span class="toggle-input">
<input type="checkbox" v-model="param.rx.spectrumInversion" />
<span class="slider"></span>
</span>
</label>
<label>
<span>Центральная частота, кГц</span>
<input v-model="param.rx.centerFreq"/>
</label>
<label>
<span>Символьная скорость, Бод</span>
<input v-model="param.rx.cymRate"/>
</label>
<label>
<span>Roll-off</span>
<select v-model="param.rx.rolloff">
<option value="5">0.05</option>
<option value="10">0.10</option>
<option value="15">0.15</option>
<option value="20">0.20</option>
<option value="25">0.25</option>
</select>
</label>
<label>
<span>Ослабление, dB</span>
<input v-model="param.rx.attenuation"/>
</label>
</div>
</div>
<button>Сохранить</button>
<h2 v-show="param.general.isCinC">Настройки режима CinC</h2>
<div v-show="param.general.isCinC" class="settings-set-container">
<label>
<span>Метод расчета задержки</span>
<select v-model="param.cinc.mode">
<option value="positional">Позиционированием</option>
<option value="delay">Окном задержки</option>
</select> </select>
</label> </label>
<h3 v-show="param.cinc.mode === 'positional'">Настройки позиционирования</h3> <label v-show="param.dvbs2.mode === 'acm'">
<label v-show="param.cinc.mode === 'positional'"> <span>Текущий модкод</span>
<span>Широта станции</span> <input v-model="stat_rx.modcod" readonly>
<input v-model="param.cinc.position.station.latitude"/>
</label>
<label v-show="param.cinc.mode === 'positional'">
<span>Долгота станции</span>
<input v-model="param.cinc.position.station.longitude"/>
</label>
<label v-show="param.cinc.mode === 'positional'">
<span>Долгота спутника</span>
<input v-model="param.cinc.position.satelliteLongitude"/>
</label> </label>
<h3 v-show="param.cinc.mode === 'delay'">Задержка до спутника</h3> <label v-show="param.dvbs2.mode === 'acm'">
<label v-show="param.cinc.mode === 'delay'"> <span>Модуляция (макс. режим)</span>
<span>от, мс</span> <select v-model="param.dvbs2.acm_maxModulation">
<input v-model="param.cinc.delayMin"/> <option value="qpsk">QPSK</option>
<option value="8psk">8PSK</option>
<option value="16apsk">16APSK</option>
<option value="32apsk">32APSK</option>
</select>
</label> </label>
<label v-show="param.cinc.mode === 'delay'"> <label v-show="param.dvbs2.mode === 'acm'">
<span>до, мс</span> <span>Скорость кода (макс. режим)</span>
<input v-model="param.cinc.delayMax"/> <select v-model="param.dvbs2.acm_maxSpeed">
<option v-for="speed in getAvailableModcods(param.dvbs2.acm_maxModulation)" v-bind:value="speed">{{ speed }}</option>
</select>
</label>
<label v-show="param.dvbs2.mode === 'acm'">
<span>Модуляция (мин. режим)</span>
<select v-model="param.dvbs2.acm_minModulation">
<option value="qpsk">QPSK</option>
<option value="8psk">8PSK</option>
<option value="16apsk">16APSK</option>
<option value="32apsk">32APSK</option>
</select>
</label>
<label v-show="param.dvbs2.mode === 'acm'">
<span>Скорость кода (мин. режим)</span>
<select v-model="param.dvbs2.acm_minSpeed">
<option v-for="speed in getAvailableModcods(param.dvbs2.acm_minModulation)" v-bind:value="speed">{{ speed }}</option>
</select>
</label>
<label v-show="param.dvbs2.mode === 'acm'">
<span>Запас ОСШ</span>
<input v-model="param.dvbs2.snrReserve" type="number">
</label> </label>
</div> </div>
<button v-show="param.general.isCinC" type="submit">Сохранить</button>
<h2>Настройки питания и опорного генератора</h2>
<div class="tabs-item-flex-container">
<div class="settings-set-container">
<h3>Настройки BUC</h3>
<label>
<span>Подача опоры 10МГц</span>
<span class="toggle-input">
<input type="checkbox" v-model="param.buc.refClk10M" />
<span class="slider"></span>
</span>
</label>
<label>
<span>Питание BUC</span>
<select v-model="param.buc.powering">
<option value="0">выкл</option>
<option value="24">24В</option>
<option value="48">48В</option>
</select>
</label>
</div>
<div class="settings-set-container">
<h3>Настройки LNB</h3>
<label>
<span>Подача опоры 10МГц</span>
<span class="toggle-input">
<input type="checkbox" v-model="param.lnb.refClk10M" />
<span class="slider"></span>
</span>
</label>
<label>
<span>Питание LNB</span>
<select v-model="param.lnb.powering">
<option value="0">выкл</option>
<option value="13">13В</option>
<option value="18">18В</option>
<option value="24">24В</option>
</select>
</label>
</div>
<div class="settings-set-container">
<h3>Сервисные настройки</h3>
<label>
<span>Подача опоры 10МГц на 'Выход 10МГц'</span>
<span class="toggle-input">
<input type="checkbox" v-model="param.serviceSettings.refClk10M" />
<span class="slider"></span>
</span>
</label>
<label>
<span>Автозапуск BUC и LNB при включении</span>
<span class="toggle-input">
<input type="checkbox" v-model="param.serviceSettings.autoStart" />
<span class="slider"></span>
</span>
</label>
</div>
</div>
<button type="submit">Сохранить</button>
</div>
<div class="tabs-body-item" v-show="activeTab === 'qos'">
<h2>Настройки QoS</h2>
<div class="settings-set-container"> <div class="settings-set-container">
<h3>Авто-регулировка мощности</h3>
<label> <label>
<span>Активировать QoS</span> <span>Авто-регулировка мощности</span>
<span class="toggle-input"><input type="checkbox" v-model="qos.en" /><span class="slider"></span></span> <span class="toggle-input">
<input type="checkbox" v-model="param.acm.en" />
<span class="slider"></span>
</span>
</label>
<label>
<span>Максимальное ослабление</span>
<input v-model="param.acm.maxAttenuation" type="number"/>
</label>
<label>
<span>Минимальное ослабление</span>
<input v-model="param.acm.minAttenuation" type="number"/>
</label>
<label>
<span>Требуемое ОСШ</span>
<input v-model="param.acm.requiredSnr" type="number"/>
</label> </label>
</div> </div>
<div class="settings-set-container">
<h3>Настройка приемника</h3>
<label>
<span>Режим управления усилением</span>
<select v-model="param.rx.gainMode">
<option value="auto">АРУ</option>
<option value="manual">РРУ</option>
</select>
</label>
<label v-show="param.rx.gainMode === 'manual'">
<span>Усиление, dB</span>
<input v-model="param.rx.manualGain" type="number"/>
</label>
<label>
<span>Инверсия спектра</span>
<span class="toggle-input">
<input type="checkbox" v-model="param.rx.spectrumInversion" />
<span class="slider"></span>
</span>
</label>
<label>
<span>Центральная частота, кГц</span>
<input v-model="param.rx.centerFreq" type="number"/>
</label>
<label>
<span>Символьная скорость, Бод</span>
<input v-model="param.rx.cymRate" type="number"/>
</label>
<label>
<span>Roll-off</span>
<select v-model="param.rx.rolloff">
<option value="5">0.05</option>
<option value="10">0.10</option>
<option value="15">0.15</option>
<option value="20">0.20</option>
<option value="25">0.25</option>
</select>
</label>
</div>
</div>
<button>Сохранить</button>
<h3>Классы CD</h3> <h2 v-show="param.general.isCinC">Настройки режима CinC</h2>
<button @click="qosAddClass('cd')">Добавить класс CD</button> <div v-show="param.general.isCinC" class="settings-set-container">
<details v-for="(rule, index) in qos.cd" :key="index" class="settings-set-container"> <label>
<summary >#{{ index }} CIR={{ rule.cir }}кбит, PIR={{ rule.pir }}кбит {{ rule.description }}</summary> <span>Метод расчета задержки</span>
<label> <select v-model="param.cinc.mode">
<span>CIR</span> <option value="positional">Позиционированием</option>
<input v-model="rule.cir" type="number"/> <option value="delay">Окном задержки</option>
</label> </select>
<label> </label>
<span>PIR</span>
<input v-model="rule.pir" type="number"/>
</label>
<label>
<span>Описание</span>
<input v-model="rule.description"/>
</label>
<h3>Фильтры ({{ rule.filters.length }})</h3> <h3 v-show="param.cinc.mode === 'positional'">Настройки позиционирования</h3>
<button @click="qosClassAddRule('cd', index)">Добавить правило</button> <label v-show="param.cinc.mode === 'positional'">
<details v-for="filter in rule.filters" class="settings-set-container"> <span>Широта станции</span>
<input v-model="param.cinc.position.station.latitude" type="number"/>
</label>
<label v-show="param.cinc.mode === 'positional'">
<span>Долгота станции</span>
<input v-model="param.cinc.position.station.longitude" type="number"/>
</label>
<label v-show="param.cinc.mode === 'positional'">
<span>Долгота спутника</span>
<input v-model="param.cinc.position.satelliteLongitude" type="number"/>
</label>
<h3 v-show="param.cinc.mode === 'delay'">Задержка до спутника</h3>
<label v-show="param.cinc.mode === 'delay'">
<span>от, мс</span>
<input v-model="param.cinc.delayMin" type="number"/>
</label>
<label v-show="param.cinc.mode === 'delay'">
<span>до, мс</span>
<input v-model="param.cinc.delayMax" type="number"/>
</label>
</div>
<button v-show="param.general.isCinC" type="submit">Сохранить</button>
<h2>Настройки питания и опорного генератора</h2>
<div class="tabs-item-flex-container">
<div class="settings-set-container">
<h3>Настройки BUC</h3>
<label>
<span>Подача опоры 10МГц</span>
<span class="toggle-input">
<input type="checkbox" v-model="param.buc.refClk10M" />
<span class="slider"></span>
</span>
</label>
<label>
<span>Питание BUC</span>
<select v-model="param.buc.powering">
<option value="0">выкл</option>
<option value="24">24В</option>
<option value="48">48В</option>
</select>
</label>
</div>
<div class="settings-set-container">
<h3>Настройки LNB</h3>
<label>
<span>Подача опоры 10МГц</span>
<span class="toggle-input">
<input type="checkbox" v-model="param.lnb.refClk10M" />
<span class="slider"></span>
</span>
</label>
<label>
<span>Питание LNB</span>
<select v-model="param.lnb.powering">
<option value="0">выкл</option>
<option value="13">13В</option>
<option value="18">18В</option>
<option value="24">24В</option>
</select>
</label>
</div>
<div class="settings-set-container">
<h3>Сервисные настройки</h3>
<label>
<span>Подача опоры 10МГц на 'Выход 10МГц'</span>
<span class="toggle-input">
<input type="checkbox" v-model="param.serviceSettings.refClk10M" />
<span class="slider"></span>
</span>
</label>
<label>
<span>Автозапуск BUC и LNB при включении</span>
<span class="toggle-input">
<input type="checkbox" v-model="param.serviceSettings.autoStart" />
<span class="slider"></span>
</span>
</label>
</div>
</div>
<button type="submit">Сохранить</button>
</div>
<div class="tabs-body-item" v-show="activeTab === 'qos'">
<h2>Настройки QoS</h2>
<div class="settings-set-container">
<label>
<span>Активировать QoS</span>
<span class="toggle-input"><input type="checkbox" v-model="qos.en" /><span class="slider"></span></span>
</label>
</div>
<h3>Классы CD</h3>
<button @click="qosAddClass('cd')">Добавить класс CD</button>
<details v-for="(rule, index) in qos.cd" :key="index" class="settings-set-container">
<summary >#{{ index }} CIR={{ rule.cir }}кбит, PIR={{ rule.pir }}кбит {{ rule.description }}</summary>
<label>
<span>CIR</span>
<input v-model="rule.cir" type="number"/>
</label>
<label>
<span>PIR</span>
<input v-model="rule.pir" type="number"/>
</label>
<label>
<span>Описание</span>
<input v-model="rule.description"/>
</label>
<h3>Фильтры ({{ rule.filters.length }})</h3>
<button @click="qosClassAddRule('cd', index)">Добавить правило</button>
<details v-for="filter in rule.filters" class="settings-set-container">
<!-- :key="filterIndex"--> <!-- :key="filterIndex"-->
<!-- <summary>Правило #{{ filterIndex }}</summary>--> <!-- <summary>Правило #{{ filterIndex }}</summary>-->
<label> <label>
<span>vlan</span> <span>vlan</span>
<input v-model="filter.vlan" type="text"> <input v-model="filter.vlan" type="text">
</label> </label>
<label> <label>
<span>proto</span> <span>proto</span>
<input v-model="filter.proto" type="text"> <input v-model="filter.proto" type="text">
</label> </label>
<label> <label>
<span>sport</span> <span>sport</span>
<input v-model="filter.sport" type="text"> <input v-model="filter.sport" type="text">
</label> </label>
<label> <label>
<span>dport</span> <span>dport</span>
<input v-model="filter.dport" type="text"> <input v-model="filter.dport" type="text">
</label> </label>
<label> <label>
<span>ip_src</span> <span>ip_src</span>
<input v-model="filter.ip_src" type="text"> <input v-model="filter.ip_src" type="text">
</label> </label>
<label> <label>
<span>ip_dest</span> <span>ip_dest</span>
<input v-model="filter.ip_dest" type="text"> <input v-model="filter.ip_dest" type="text">
</label> </label>
<label> <label>
<span>dscp</span> <span>dscp</span>
<input v-model="filter.dscp" type="text"> <input v-model="filter.dscp" type="text">
</label> </label>
</details>
<button @click="qosDelClass('cd', index)">Del</button>
</details> </details>
<button>Применить</button> <button @click="qosDelClass('cd', index)">Del</button>
</details>
<p> <button>Применить</button>
Эти настройки пока недоступны, но скоро разработчик это поправит. А пока купи разработчику банку <strike>пива</strike> колы)
</p> <p>
<video preload="auto" controls style="max-width: 100%"> Эти настройки пока недоступны, но скоро разработчик это поправит. А пока купи разработчику банку <strike>пива</strike> колы)
<source src="/vid/video_2024-11-06_15-49-35.mp4" type="video/mp4" /> </p>
</video> <video preload="auto" controls style="max-width: 100%">
</div> <source src="/vid/video_2024-11-06_15-49-35.mp4" type="video/mp4" />
<div class="tabs-body-item" v-show="activeTab === 'admin'"> </video>
<p> </div>
Эти настройки пока недоступны, но скоро разработчик это поправит. А пока смотри на крокодила <div class="tabs-body-item" v-show="activeTab === 'admin'">
</p> <p>
<img loading="lazy" src="/images/krokodil_vzryvaetsya_hd.gif" alt="krokodil"> Эти настройки пока недоступны, но скоро разработчик это поправит. А пока смотри на крокодила
</div> </p>
<img loading="lazy" src="/images/krokodil_vzryvaetsya_hd.gif" alt="krokodil">
</div> </div>
<p>Последнее обновление статистики: {{ lastUpdateTime }}</p> <p>Последнее обновление статистики: {{ lastUpdateTime }}</p>
</div> </div>
@ -492,6 +511,14 @@
<!-- Версия для разработки включает в себя возможность вывода в консоль полезных уведомлений --> <!-- Версия для разработки включает в себя возможность вывода в консоль полезных уведомлений -->
<script src="/js/vue.js"></script> <script src="/js/vue.js"></script>
<script> <script>
window.addEventListener('load', updateHeaderHeight);
window.addEventListener('resize', updateHeaderHeight);
function updateHeaderHeight() {
const header = document.querySelector('header');
document.body.style.setProperty('--header-height', `${header.offsetHeight}px`);
}
// const router = useRouter(); // const router = useRouter();
const availableTabs = ['monitoring', 'setup', 'qos', 'admin'] const availableTabs = ['monitoring', 'setup', 'qos', 'admin']
const defaultTab = availableTabs[0] const defaultTab = availableTabs[0]

24
static/style.css
View File

@ -42,6 +42,7 @@ body {
} }
body { body {
overflow-y: visible;
background: var(--bg-color); background: var(--bg-color);
margin: 0; /* браузеры зачем-то ставят свое значение */ margin: 0; /* браузеры зачем-то ставят свое значение */
} }
@ -52,29 +53,6 @@ body {
/* ========== MAIN STYLES ========== */ /* ========== MAIN STYLES ========== */
header > h1 {
text-align: center;
background-color: var(--brand-bg);
padding: 0.5em;
margin: 0;
}
header * {
color: var(--brand-text);
}
header > nav {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
header > nav > a {
margin: 0.5em;
}
.value-good { .value-good {
color: var(--text-good); color: var(--text-good);
} }