- Разработать дисплей с графическим представлением показателей работы одного из отделов компании.
- Данные для системы брать из Clickview.
- Интерфейс должен представлять собой различные графики, на которые приятно смотреть и интересно изучать.
- Результат вывести на телевизоры, которые расположены в здании компании и подключены к внутренней сети.
- Способом "на усмотрение" решить задачу с получением данных из Clickview.
- Способом "на усмотрение" решить задачу с хостингом и обращением к нему из внутренней сети.
- Проект расположен по адресу
172.16.252.240:81
. - В качестве сервера используется
OpenServer
.
Основные моменты конфигурации сервера:
- Версия PHP - 7.4.
- Фреймворк - Laravel 8.
- Графическая библиотека: AnyChart.
- Порт пришлось изменить на 81, чтобы избежать конфликта с софтом, который работает на 80 порту.
- Специфика Laravel требует использовать точку входа из
\public
, поэтому имя домена -krasyar.dashboard
использует директорию\krasyar.dashboard\public
. - Также задан алиас
krasyar.dashboard
использующий172.16.252.240
, поэтому проект доступен в том числе по адресу http://krasyar.dashboard:81. - Файлы проекта расположены в
C:\OSPanel\domains\krasyar.dashboard
.
Осуществляется по RDP.
- Вызов клиента: Win + R -> mstsc.exe.
- Компьютер: w-web.
- Дальнейший вход реализуется под своей учётной записью с префиксом
ETC\
.
Все настройки расположены в конфигурационном файле \config\dashboard.php
и покрыты комментариями.
Путь к директории, в которой расположены исходные файлы.
'source' => '//k5/Public/1/dashboard/',
Палитра дашборда. Полный перечень цветовых схем находится в конфигурационном файле.
'theme' => 'wines',
Цвет чётных строк таблицы настраивается отдельно от выбора цветовой схемы и подбирается опытным путем.
'table_odd' => 'F5BD64',
Частота обновления интерфейса (мсек.). Под капотом происходит перекомпиляция графиков. Такова специфика работы библиотеки AnyChart. На уровне представления, все графики являются .svg изображениями.
'time_reload_page' => 600000,
Код кнопки перехода в полноэкранный режим (Enter). На телевизоре в полноэкранный режим можно перейти лишь мануально. Система безопасности блокирует всевозможные эмуляции поведения нажатия на клавишу.
'fullscreen_key' => 13,
- Отдел аналитики производит выгрузку информации из Clickview в виде .csv файлов на сетевой диск
P:\Public\1\dashboard
. - Периодичность выгрузки - в 40 минут каждого часа.
- Dashboard обращается к этим файлам, производит их распарсинг в массив и передает эти данные в представление.
- Представление использует библиотеку AnyChart, и обновляет рендеринг каждые 10 минут. Это значение можно менять в настройках.
Интерфейс app\Interfaces\DataProvider.php
определяет устройство поставщика данных, обязуя реализовать в нем требуемые методы.
Сделано это для возможности полиморфной реализации других поставщиков данных. Вдруг на замену Clickview придёт другая аналитическая система. Тогда понадобится просто дописать еще одного поставщика данных на основе этого интерфейса.
Поставщик данных app\Services\NetDisk.php
осуществляет преобразование .csv-файлов в массив для дальнейшей передачи.
Иногда требуется скорректировать данные и удалить "шапку" таблицы. Для этого у метода
dataTransform()
есть аргументwith_header
, значение которого может бытьfalse
, что означает "без шапки". Этот метод реализован вapp\Http\Controllers\GetDataApiController.php
.
Затем в дело вступает app\Http\Controllers\GetDataApiController.php
, который формирует эндпоинты API, отдающие данные в JSON, из которых в дальнейшем формируются графики. Список эндпоинтов находится в маршрутизаторе routes\api.php
. Так по запросу http://172.16.252.240:81/api/pie можно получить данные для формирования круговой диаграммы.
Контроллер app\Http\Controllers\DashboardController.php
просто передаёт настройки из конфигурационного файла в представление. Именно настройки, не данные. Данные забирыют .js-скрипты непосредственно с API.
Точкой вхождения в интерфейс является resources\views\layout.blade.php
. Он использует resources\views\components\foot.blade.php
и resources\views\components\head.blade.php
в качестве постоянных компонентов любой страницы и само тело страницы resources\views\pages\dashboard.blade.php
.
Скрипты, компилирующие данные с эндпоинтов API в графики находятся в директории resources\views\charts
.
Их правка имеет существенные ограничения. Названия таблиц и некоторые другие значения можно править из кода. А вот оси, подписи, позиционирование элементов и многое другое определяется через методы библиотеки https://docs.anychart.com/
Исходный код находится в репозитории https://github.com/PontiiPilates/krasyar.dashboard
Поскольку хост не имеет выхода в интернет, рекомендую скачать проект на свое рабочее место и развернуть его на локальном сервере, внести требуемые изменения, проверить работоспособность и упаковать проект в архив. К C:\OSPanel\domains\krasyar.dashboard
добавить .back
, создать \krasyar.dashboard
и распаковать архив в созданную директорию. Получив при этом свежую версию и backup-версию.
Также можно обновлять только файлы, подвергшиеся изменению.
Допустимо редактировать файлы сразу на боевом сервере. Но нужно помнить, что при таком подходе будет накапливаться расхождение версий, находящихся в продакшене и в репозитории.