миграция на vue.js 2.7->3.5; рабочий front-generator (только для мониторинга и QoS)

2025-01-10 14:28:53 +03:00
parent 872b5e7b3d
commit 44aec3a114
24 changed files with 20106 additions and 15350 deletions
--- a/static/dev.html
+++ b/static/dev.html
@@ -2,9 +2,103 @@
 <html lang="en">
 <head>
    <meta charset="UTF-8">
-    <title>Title</title>
+    <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>