«Бастион» — единый интерактивный прототип
Самодостаточный интерактивный макет поиска по реестру и карточек организаций. Все материалы находятся в этой папке: руководителю достаточно распаковать архив и открыть index.html.
Структура проекта
.
├── index.html
├── README.md
├── ОКБ МЭИ — готовый прототип/ # самостоятельные карточки и исходные данные ОКБ МЭИ
├── Сатурн — готовый прототип/ # самостоятельные карточки и исходные данные ОДК-Сатурн
└── assets
├── css
│ └── main.css
├── js
│ └── app.js
└── pictures
└── изображения проекта
Запуск
Установите зависимости и запустите Vite:
npm install
npm run dev
После этого откройте http://localhost:5176. Изменения HTML, CSS и JavaScript автоматически отображаются в браузере.
Прототип остаётся автономным: готовый index.html также можно открыть напрямую в браузере без dev-сервера.
Технологии
- HTML5
- CSS3
- JavaScript без внешних библиотек
- Vite для локальной разработки
- SVG-графики, создаваемые JavaScript
Проверочные поисковые запросы
На стартовой странице воспроизводятся три переданных сценария поиска:
| Запрос | Условия | Ожидаемая строка в таблице |
|---|---|---|
| ОДК‑Сатурн | «Входящие в Реестр ОПК», Ярославская обл., «Производство с наукой», Минпромторг России | ПАО «ОДК‑Сатурн», ИНН 7610052644 |
| ОКБ МЭИ | «Входящие в Реестр ОПК», Роскосмос, ФИО «Емельянов Константин Владимирович» | АО «ОКБ МЭИ», ИНН 7722701431; также АО «НИИ ТП» |
| УАЗ | «Входящие в Реестр ОПК», «Системообразующие организации», Ульяновская обл. | ООО «Ульяновский автомобильный завод», ИНН 7327077188; также три связанные организации из примера |
Щелчок по строке результата открывает карточку в новой внутренней вкладке приложения. Карточки, графики и связи доступны без сети.
Алгоритм «Переделай карточку»
- Привести краткую и подробную карточки к блокам, стилям, вкладкам и модальным окнам эталонной карточки ЛОМО.
- Открывать найденные организации, подробные карточки и связанные сущности во внутренних вкладках программы; внешние ссылки открывать отдельно.
- Показывать подробное содержимое каждого блока в модальном окне и не выводить блоки, для которых нет исходных сведений.
- Переносить связи из всех вложенных HTML-карточек; для каждой существующей страницы создавать отдельную карточку.
- Строить структуру собственности по предоставленной SVG-схеме в оформлении ЛОМО; недостающие только для графика данные допустимо моделировать.
- Не задавать блокам фиксированную высоту: она определяется содержимым.
Разрешённые разделы карточки организации
Краткая и полная карточки используют один закрытый набор разделов:
- Реквизиты организации и контактная информация.
- Правовой статус.
- Информация.
- Финансовые показатели.
- Структура собственности.
- Виды деятельности.
- Финансовая устойчивость.
Раздел без данных пропускается. Руководители входят в реквизиты, а акционеры, участие в капитале, филиалы и ссылки на другие карточки — в структуру собственности; отдельные блоки для них не создаются. Модельные финансовые ряды, численность и подготовленные для прототипа внешние классификаторы сохраняются.