ht_screen

Введение

На рынке существует множество проектов, предоставляющих возможность демонстрации данных на большом экране. Чтобы уменьшить потребность в разработке большого экрана, было решено реализовать подобный проект. В качестве основы для дизайна пользовательского интерфейса была взята библиотека Avue. На данный момент уже создана базовая архитектура проекта.

Уже реализованы следующие функции:

• перетаскивание и масштабирование компонентов большого экрана;
• динамическая настройка параметров;
• полноэкранный просмотр;
• адаптация разрешения;
• кэширование данных;
• взаимодействие с серверной частью. Разработка оставшихся компонентов будет продолжена.

Архитектура программного обеспечения

Проект использует архитектурный шаблон «клиент-сервер». В качестве базовой структуры используется проект ht_base (собственный открытый исходный код). Клиентская часть проекта построена с использованием vue-cli3. Для кэширования параметров большого экрана используется vuex. Это позволило оптимизировать производительность проекта. Кэширование основных данных большого экрана осуществляется с помощью Redis, без использования базы данных.

Инструкция по установке

1. Установите MySQL версии 5.7 (используемая версия) и импортируйте базу данных.
2. Запустите Redis.
3. Измените конфигурацию файла конфигурации на стороне сервера и подключите собственные MySQL и Redis.
4. Запустите серверный проект.
5. Импортируйте необходимые зависимости на клиентской стороне с помощью команды npm i.
6. Запустите клиентский проект с помощью команды npm run dev.

Связанные технологии

Клиентская сторона

1. Echarts.
2. Avue.
3. Vuex.
4. DataV.
5. ElementUI.

Серверная сторона

1. Spring.
2. Spring Boot.
3. Spring MVC.
4. Spring Security.
5. JWT.
6. Redis.
7. Mybatis-plus.

Использование

1. Войдите в систему с учётными данными администратора admin/123456.
2. Откройте свой большой экран, создайте данные для большого экрана и начните его построение.

Демонстрационные изображения

Страница управления:

Редактирование основной информации большого экрана:

Операционная страница:

Страницы настройки:

Предварительный просмотр: