104 lines
3.5 KiB
HTML
104 lines
3.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>RSCM-101</title>
|
|
<link rel="stylesheet" type="text/css" href="/style.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);
|
|
}
|
|
|
|
.l3-proto-label {
|
|
margin: 0 0 0 0.5em;
|
|
}
|
|
.l3-proto-label > * {
|
|
display: inline-block;
|
|
}
|
|
.l3-proto-label input[type=checkbox] {
|
|
width: auto;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="app" hidden>
|
|
<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="{ value_bad: initState !== 'Успешная инициализация системы' }">{{ initState }}</span>
|
|
<div class="tabs-header">
|
|
<span style="font-weight:bold">RSCM-101</span>
|
|
<a href="#monitoring" class="tabs-btn" @click="activeTab = 'monitoring'" :class="{ active: activeTab === 'monitoring' }">Мониторинг</a>
|
|
<a href="#setup" class="tabs-btn" @click="activeTab = 'setup'" :class="{ active: activeTab === 'setup' }">Настройки</a>
|
|
<a href="#qos" class="tabs-btn" @click="activeTab = 'qos'" :class="{ active: activeTab === 'qos' }">QoS</a>
|
|
<a href="#admin" class="tabs-btn" @click="activeTab = 'admin'" :class="{ active: activeTab === 'admin' }">Администрирование</a>
|
|
<a href="/logout" class="tabs-btn">Выход</a>
|
|
</div>
|
|
</header>
|
|
<div id="content">
|
|
<p>Прием: <span :class="{ indicator_bad: stat_rx.state === false, indicator_good: stat_rx.state === true, indicator: true }"></span></p>
|
|
<p>Скорость: <span>{{ stat_rx.speedOnRxKbit }}</span></p>
|
|
|
|
<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>
|
|
<label>
|
|
<span>Полоса поиска, кгц ±</span>
|
|
<input v-model="param.num" type="number" min="0" max="100" step="1"/>
|
|
</label>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<script src="/js/vue.js"></script>
|
|
<script>
|
|
const app = Vue.createApp({
|
|
data() {
|
|
return {
|
|
stat_rx: {
|
|
state: false,
|
|
},
|
|
param: {
|
|
general: {
|
|
isCinC: true,
|
|
isTestInputData: false,
|
|
modulatorMode: 'test'
|
|
},
|
|
num: 1
|
|
},
|
|
|
|
initState: '?',
|
|
activeTab: 'setup'
|
|
}
|
|
},
|
|
methods: {
|
|
|
|
},
|
|
mounted() {
|
|
document.getElementById("app").removeAttribute("hidden")
|
|
}
|
|
});
|
|
app.mount('#app')
|
|
</script>
|
|
|
|
</body>
|
|
</html> |