382 lines
22 KiB
HTML
382 lines
22 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ru">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta name="description" content="Панель управления системой ВНА для сбора и обработки данных в реальном времени">
|
|
<meta name="keywords" content="ВНА, Vector Network Analyzer, РФ, микроволны, сбор данных, реальное время">
|
|
<meta name="author" content="VNA System">
|
|
<title>Система ВНА — Панель управления</title>
|
|
|
|
<!-- Favicon -->
|
|
<link rel="icon" type="image/svg+xml" href="/static/assets/favicon.svg">
|
|
<link rel="alternate icon" href="/static/assets/favicon.svg">
|
|
|
|
<!-- Theme color for mobile browsers -->
|
|
<meta name="theme-color" content="#1e293b">
|
|
|
|
<!-- Plotly.js -->
|
|
<script src="/static/js/vendor/plotly-2.26.0.min.js"></script>
|
|
|
|
<!-- Styles -->
|
|
<link rel="stylesheet" href="/static/css/normalize.css">
|
|
<link rel="stylesheet" href="/static/css/variables.css">
|
|
<link rel="stylesheet" href="/static/css/layout.css">
|
|
<link rel="stylesheet" href="/static/css/components.css">
|
|
<link rel="stylesheet" href="/static/css/charts.css">
|
|
<link rel="stylesheet" href="/static/css/settings.css">
|
|
<link rel="stylesheet" href="/static/css/acquisition.css">
|
|
</head>
|
|
<body>
|
|
<!-- Header -->
|
|
<header class="header">
|
|
<div class="header__container">
|
|
<div class="header__brand">
|
|
<span data-icon="activity" class="header__icon"></span>
|
|
<h1 class="header__title">МФТИ</h1>
|
|
</div>
|
|
|
|
<div class="header__status">
|
|
<div class="status-indicator" id="connectionStatus">
|
|
<div class="status-indicator__dot"></div>
|
|
<span class="status-indicator__text">Подключение...</span>
|
|
</div>
|
|
</div>
|
|
|
|
<nav class="header__nav">
|
|
<button class="nav-btn nav-btn--active" data-view="dashboard">
|
|
<span data-icon="bar-chart-3"></span>
|
|
<span>Панель</span>
|
|
</button>
|
|
<button class="nav-btn" data-view="settings">
|
|
<span data-icon="settings"></span>
|
|
<span>Настройки</span>
|
|
</button>
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Main Content -->
|
|
<main class="main">
|
|
<!-- Dashboard View -->
|
|
<div class="view view--active" id="dashboardView">
|
|
<!-- Controls Panel -->
|
|
<div class="controls-panel">
|
|
<div class="controls-panel__container">
|
|
<div class="controls-group">
|
|
<label class="controls-label">Управление сбором</label>
|
|
<div class="acquisition-controls">
|
|
<div class="acquisition-controls__buttons">
|
|
<button class="btn btn--primary" id="startBtn" title="Запустить непрерывный сбор">
|
|
<span data-icon="play"></span>
|
|
Запуск
|
|
</button>
|
|
<button class="btn btn--secondary" id="stopBtn" title="Остановить сбор">
|
|
<span data-icon="square"></span>
|
|
Стоп
|
|
</button>
|
|
<button class="btn btn--accent" id="singleSweepBtn" title="Запустить одиночный свип">
|
|
<span data-icon="zap"></span>
|
|
Одиночный
|
|
</button>
|
|
</div>
|
|
<div class="acquisition-summary header__summary" id="headerSummary">
|
|
<div class="header-summary__item">
|
|
<span class="header-summary__label">Пресет</span>
|
|
<span class="header-summary__value" id="headerPresetSummary">Не выбран</span>
|
|
</div>
|
|
<span class="header-summary__divider" aria-hidden="true"></span>
|
|
<div class="header-summary__item">
|
|
<span class="header-summary__label">Калибровка</span>
|
|
<span class="header-summary__value" id="headerCalibrationSummary">Не задана</span>
|
|
</div>
|
|
<span class="header-summary__divider" aria-hidden="true"></span>
|
|
<div class="header-summary__item">
|
|
<span class="header-summary__label">Эталон</span>
|
|
<span class="header-summary__value" id="headerReferenceSummary">Не снят</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="acquisition-status" id="acquisitionStatus">
|
|
<div class="status-indicator">
|
|
<div class="status-indicator__dot status-indicator__dot--idle"></div>
|
|
<span class="status-indicator__text" id="acquisitionStatusText">Ожидание</span>
|
|
</div>
|
|
<div class="acquisition-mode" id="acquisitionMode">
|
|
<span class="mode-label">Режим:</span>
|
|
<span class="mode-value" id="acquisitionModeText">Непрерывный</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="controls-group">
|
|
<label class="controls-label">Процессоры</label>
|
|
<div class="processor-toggles" id="processorToggles">
|
|
<!-- Переключатели процессоров создаются динамически -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Charts Grid -->
|
|
<div class="charts-container">
|
|
<div class="charts-grid" id="chartsGrid">
|
|
<!-- Графики создаются динамически -->
|
|
</div>
|
|
|
|
<div class="empty-state" id="emptyState">
|
|
<div class="empty-state__content">
|
|
<span data-icon="activity" class="empty-state__icon"></span>
|
|
<h3 class="empty-state__title">Нет данных</h3>
|
|
<p class="empty-state__description">
|
|
Ожидаем данные свипа от системы ВНА...
|
|
</p>
|
|
<div class="loading-spinner">
|
|
<div class="spinner"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Settings View -->
|
|
<div class="view" id="settingsView">
|
|
<div class="settings-container">
|
|
<div class="settings-section">
|
|
<h2 class="settings-title">
|
|
<span data-icon="settings" class="settings-icon"></span>
|
|
Настройки системы
|
|
</h2>
|
|
|
|
<!-- Configuration Presets Section -->
|
|
<div class="settings-card">
|
|
<h3 class="settings-card-title">Конфигурационные пресеты</h3>
|
|
<p class="settings-card-description">Выберите конфигурацию измерений из доступных пресетов</p>
|
|
|
|
<div class="preset-controls">
|
|
<div class="control-group">
|
|
<label class="control-label">Доступные пресеты:</label>
|
|
<div class="preset-selector" id="presetSelector">
|
|
<select class="preset-dropdown settings-select" id="presetDropdown" disabled>
|
|
<option value="">Загрузка пресетов...</option>
|
|
</select>
|
|
<button class="btn btn--primary" id="setPresetBtn" disabled>
|
|
<span data-icon="check"></span>
|
|
Сделать активным
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="preset-info" id="presetInfo">
|
|
<div class="preset-details">
|
|
<div class="preset-param">
|
|
<span class="param-label">Текущий:</span>
|
|
<span class="param-value" id="currentPreset">Нет</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Calibration Section -->
|
|
<div class="settings-card">
|
|
<h3 class="settings-card-title">Управление калибровкой</h3>
|
|
<p class="settings-card-description">Управление калибровочными данными для точных измерений</p>
|
|
|
|
<!-- Current Calibration Status -->
|
|
<div class="calibration-status" id="calibrationStatus">
|
|
<div class="status-item">
|
|
<span class="status-label">Текущая калибровка:</span>
|
|
<span class="status-value" id="currentCalibration">Нет</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Calibration Workflow -->
|
|
<div class="calibration-workflow">
|
|
<!-- Start New Calibration -->
|
|
<div class="workflow-section">
|
|
<h4 class="workflow-title">Новая калибровка</h4>
|
|
<div class="workflow-controls">
|
|
<button class="btn btn--primary" id="startCalibrationBtn" disabled>
|
|
<span data-icon="play"></span>
|
|
Начать калибровку
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Calibration Steps -->
|
|
<div class="workflow-section" id="calibrationSteps" style="display: none;">
|
|
<h4 class="workflow-title">Шаги калибровки</h4>
|
|
<div class="calibration-progress" id="calibrationProgress">
|
|
<div class="progress-info">
|
|
<span class="progress-text" id="progressText">0/0</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="calibration-standards" id="calibrationStandards">
|
|
<!-- Кнопки стандартов создаются динамически -->
|
|
</div>
|
|
|
|
<div class="calibration-actions settings-action-group">
|
|
<button class="btn btn--secondary" id="viewCurrentPlotsBtn" disabled>
|
|
<span data-icon="bar-chart-3"></span>
|
|
Графики текущей калибровки
|
|
</button>
|
|
<input type="text" class="calibration-name-input settings-input" id="calibrationNameInput" placeholder="Введите имя калибровки" disabled>
|
|
<button class="btn btn--success" id="saveCalibrationBtn" disabled>
|
|
<span data-icon="save"></span>
|
|
Сохранить калибровку
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Existing Calibrations -->
|
|
<div class="workflow-section">
|
|
<h4 class="workflow-title">Существующие калибровки</h4>
|
|
<div class="existing-calibrations" id="existingCalibrations">
|
|
<select class="calibration-dropdown settings-select" id="calibrationDropdown" disabled>
|
|
<option value="">Калибровки отсутствуют</option>
|
|
</select>
|
|
<div class="calibration-actions settings-action-group">
|
|
<button class="btn btn--primary" id="setCalibrationBtn" disabled>
|
|
<span data-icon="check"></span>
|
|
Сделать активной
|
|
</button>
|
|
<button class="btn btn--secondary" id="viewPlotsBtn" disabled>
|
|
<span data-icon="bar-chart-3"></span>
|
|
Показать графики
|
|
</button>
|
|
<button class="btn btn--secondary" id="deleteCalibrationBtn" disabled>
|
|
<span data-icon="trash-2"></span>
|
|
Удалить
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Open Air Reference -->
|
|
<div class="settings-card">
|
|
<h3 class="settings-card-title">Эталон открытого пространства</h3>
|
|
<div class="settings-card-content">
|
|
|
|
<!-- Create Reference -->
|
|
<div class="workflow-section">
|
|
<h4 class="workflow-title">Создать эталон</h4>
|
|
<div class="reference-creation">
|
|
<input type="text" class="reference-name-input settings-input" id="referenceNameInput" placeholder="Введите имя эталона">
|
|
<input type="text" class="reference-description-input settings-input" id="referenceDescriptionInput" placeholder="Описание (необязательно)">
|
|
<button class="btn btn--primary" id="createReferenceBtn">
|
|
<span data-icon="target"></span>
|
|
Снять эталон
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Existing References -->
|
|
<div class="workflow-section">
|
|
<h4 class="workflow-title">Существующие эталоны</h4>
|
|
<div class="reference-list" id="referenceList">
|
|
<select class="reference-dropdown settings-select" id="referenceDropdown" disabled>
|
|
<option value="">Эталоны отсутствуют</option>
|
|
</select>
|
|
<div class="reference-actions settings-action-group">
|
|
<button class="btn btn--primary" id="setReferenceBtn" disabled>
|
|
<span data-icon="check"></span>
|
|
Использовать
|
|
</button>
|
|
<button class="btn btn--secondary" id="previewReferenceBtn" disabled>
|
|
<span data-icon="bar-chart-3"></span>
|
|
Просмотр
|
|
</button>
|
|
<button class="btn btn--secondary" id="deleteReferenceBtn" disabled>
|
|
<span data-icon="trash-2"></span>
|
|
Удалить
|
|
</button>
|
|
</div>
|
|
<div class="reference-details" id="currentReferenceInfo" style="display: none;">
|
|
<div class="reference-details__row">
|
|
<span class="reference-details__label">Имя:</span>
|
|
<span class="reference-details__value" id="currentReferenceName">—</span>
|
|
</div>
|
|
<div class="reference-details__row">
|
|
<span class="reference-details__label">Дата:</span>
|
|
<span class="reference-details__value" id="currentReferenceTimestamp">—</span>
|
|
</div>
|
|
<div class="reference-details__row reference-details__row--description">
|
|
<span class="reference-details__label">Описание:</span>
|
|
<span class="reference-details__value" id="currentReferenceDescription">—</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- System Summary -->
|
|
<div class="settings-card">
|
|
<h3 class="settings-card-title">Сводка системы</h3>
|
|
<div class="system-summary" id="systemSummary">
|
|
<div class="status-item">
|
|
<span class="status-label">Получено свипов:</span>
|
|
<span class="status-value" id="sweepCount">-</span>
|
|
</div>
|
|
<div class="status-item">
|
|
<span class="status-label">Калибровок сохранено:</span>
|
|
<span class="status-value" id="calibrationCount">-</span>
|
|
</div>
|
|
<div class="status-item">
|
|
<span class="status-label">Эталонов сохранено:</span>
|
|
<span class="status-value" id="referenceCount">-</span>
|
|
</div>
|
|
<div class="status-item">
|
|
<span class="status-label">Статус системы:</span>
|
|
<span class="status-value" id="systemStatus">Режим: —</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<!-- Calibration Plots Modal -->
|
|
<div class="modal" id="plotsModal">
|
|
<div class="modal__backdrop" data-modal-close></div>
|
|
<div class="modal__content modal__content--large">
|
|
<div class="modal__header">
|
|
<h2 class="modal__title">
|
|
<span data-icon="bar-chart-3"></span>
|
|
Графики стандартов калибровки
|
|
</h2>
|
|
<div class="modal__actions">
|
|
<button class="btn btn--secondary btn--sm" id="downloadAllBtn" title="Скачать все данные калибровки">
|
|
<span data-icon="download-cloud"></span>
|
|
Скачать всё
|
|
</button>
|
|
<button class="modal__close" data-modal-close title="Закрыть">
|
|
<span data-icon="x"></span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="modal__body" id="plotsModalBody">
|
|
<div class="plots-container">
|
|
<div class="plots-content">
|
|
<div class="plots-grid" id="plotsGrid">
|
|
<!-- Здесь появятся отдельные графики -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Notification System -->
|
|
<div class="notifications" id="notifications"></div>
|
|
|
|
<!-- Scripts -->
|
|
<script type="module" src="/static/js/main.js"></script>
|
|
</body>
|
|
</html>
|