Размещено на http://www.allbest.ru/



СОДЕРЖАНИЕ

ВВЕДЕНИЕ

1. АНАЛИТИЧЕСКИЙ ОБЗОР ПРЕДМЕТНОЙ ОБЛАСТИ

1.1 Исследование промышленного интернета вещей

1.2 Аналитический обзор существующих систем автоматизации

1.3 SEDMAX - решение для промышленного интернета вещей

1.4 Постановка задачи ВКР

2. РАЗРАБОТКА РЕШЕНИЙ ДЛЯ СИСТЕМЫ АВТОМАТИЗАЦИИ

2.1 Описание используемой системы

2.2 Разработка структуры системы

2.3 Определение технологий для разработки

2.4 Разработка алгоритмов

2.5 Разработка программных модулей

3. АНАЛИЗ ПОЛУЧЕННЫХ РЕЗУЛЬТАТОВ

3.1 Тестирование

3.2 Внедрение

4. РАЗРАБОТКА МЕТОДИЧЕСКИХ УКАЗАНИЙ ПО РАБОТЕ С СИСТЕМОЙ

4.1 Виджеты

4.2 Паспорт и диспетчерские метки на мнемосхемах

4.3 Редактор наборов

4.4 Анализ полноты данных

ЗАКЛЮЧЕНИЕ

СПИСОК ИСПОЛЬЗОВАННЫХ ИСТОЧНИКОВ

ПРИЛОЖЕНИЕ



ВВЕДЕНИЕ

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

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

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

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

Целью данной выпускной квалификационной работы является реализация потоковой визуализации данных в системе автоматизации SEDMAX.



1. АНАЛИТИЧЕСКИЙ ОБЗОР ПРЕДМЕТНОЙ ОБЛАСТИ

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

При обработке огромного массива неструктурированных данных их фильтрация и адекватная интерпретация является приоритетной задачей для предприятий. В данном контексте особую значимость приобретает корректное представление информации в понятном пользователю виде, для чего сегодня на рынке представлены передовые аналитические платформы, предназначенные для сбора, хранения и анализа данных о технологических процессах и событиях в реальном времени.

1.1 Исследование промышленного интернета вещей

Промышленный интернет вещей (Industrial Internet of Things) - это сложная многоуровневая структура, включающая в себя датчики, устройства, регуляторы, средства передачи и обработки собираемых данных и их визуализации, мощные инструменты аналитики данных и наиболее удобная и эргономичная интерпретация данных в пользовательском интерфейсе.

Ключевая задача IIOT - автоматизация, оптимизация, сокращение материальных и временных затрат, постоянный и безошибочный сбор информации.

Основной принцип технологии заключается в следующем: первоначально устанавливаются датчики, исполнительные механизмы, контроллеры и человеко-машинные интерфейсы на ключевые части оборудования, после чего осуществляется сбор информации, которая впоследствии позволяет приобрести объективные и точные данные о состоянии предприятия.

Структура технологии от уровня «железа» до клиентского уровня представлена на рисунке 1

Рисунок 1.1 - Технологический цикл Industrial Internet of Things

Уровень 1 - уровень датчиков и контроллеров.

Уровень 2 - сервис сборщик - устанавливает связь с уровнем 1 с помощью сетевых протоколов транспортного уровня (например, TCP, ModBus, UDP, МЭК104 и т.д.), преобразует сообщения от счетчиков к нужному виду и отправляет их в брокер сообщений.

Уровень 3 - брокер сообщений - выступает в роли посредника между различными сервисами (веб-приложениями). Они существенно снижают нагрузку и сокращают время доставки сообщений, поскольку задачи, на обработку которых уходит некоторое время, распределяются между рабочими процессами.

Брокер отдает данные в микросервисную архитектуру: сервисы на уровне 4 и 7 служат для связи с базами данных, уровень 5 - для непосредственной потоковой обработки данных и их преобразования к требуемому виду. Так же необходим сервис для кеширования данных.

На самом верхнем уровне находится клиентское приложение, которое через специальный интерфейс (API) позволяет связаться с системой.

Основные проблемы данной технологии заключаются в том, что:

1) Нужно связывать огромное количество устройств и сервисов между собой и обрабатываю огромное количество данных.

2) Часто приходится иметь дело с временными метками

3) Нужно предоставлять пользователю актуальные данные в реальном времени

4) Нельзя терять данные

Поэтому работать с интернетом вещей стоит очень осторожно, нужно выбирать правильные инструменты. Главными аспектами выбора должны стать скорость работы с большими объемами данных, эффективность и многозадачность. Отлично подходит язык Go.

Так как приходится работать с временными рядами, то лучше использовать специализированные базы данных. Лучше всего подойдут NoSQL базы, например, InfluxDB и MongoDB.

Так как технология очень перспективная, крупнейшие компании давно начали ее прорабатывать. Готовые решения есть у Amazon, Microsoft, IBM и Google.

Таким образом, одним из эффективных способов к автоматизации производства является Industrial Internet of Things.

1.2 Аналитический обзор существующих систем автоматизации

Из существующих сейчас средств автоматизации (АСУ ТП, АСКУЭ) можно выделить ОИК Диспетчер, Энергосфера, Пульсар, Матрикс, СК-2007, функционал которых различен, но наиболее приближен к разрабатываемой системе.

При этом Энергосфера и Пульсар обеспечивают гораздо больший функционал, нежели Матрикс и СК-2007, поэтому сравнивать будем по функциональным группам.

Рассмотрим каждое из них и приведем сравнительную таблицу.

АРМ Энергосфера

Программа АРМ Энергосфера предназначена для представления пользователям системы информации о параметрах объекта учета в виде мнемосхем, таблиц, графиков, журналов событий.

В программе АРМ Энергосфера реализованы следующие возможности:

- работа с тарифными счетчиками - представление информации о показаниях и расходе электроэнергии по тарифам с помощью специально разработанных шаблонов графиков и отчетов;

- просмотр журналов счетчиков -отображение событий счетчика или набора счетчиков, согласно заданным критериям;

- оперативный контроль данных представлен интерфейсом окна конфигурирования условий проверки событий, улучшено представление текущих и архивных событий;

- возможность работать с мнемосхемами низкого уровня

Пульсар

Программный комплекс «Пульсар» предназначен для работы на верхнем уровне измерительной автоматизированной системы контроля и учета энергоресурсов "Пульсар" и обеспечивает сбор показаний с различных типов счетчиков энергоресурсов (воды, тепла, газа, электроэнергии), ведения архивов потребления ресурсов, формирования отчетов различного вида, а также технологического, контроля параметров энергосбережения и мониторинга нештатных ситуаций. Подходит для автоматизированного учета больших управляющих компаний, поставщиков ресурсов

ОИК Диспетчер

«ОИК Диспетчер НТ» (альтернативное название ARIS SCADA) -- это программный комплекс, предназначенный для создания информационно-управляющих (SCADA) систем для автоматизации технологического процесса передачи и распределения электрической энергии. Применяется на предприятиях электрических сетей, в районах предприятий электрических сетей, на крупных энергообъектах с круглосуточно работающим оперативным обслуживающим персоналом.

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

СК-2007

Оперативно-информационный комплекс СК-2007 - это высокопроизводительная масштабируемая система SCADA, поставляющаяся с набором приложений для различных применений. Комплекс используется в качестве основы для построения систем оперативного и технологического управления в ситуационных центрах и центрах управления в энергетике.

СК-2007 является универсальной многофункциональной системой для построения автоматизированных систем коммерческой и технологической диспетчеризации в генерирующих компаниях.

Результаты сравнения по наиболее важным показателям для производства представлены в таблице 1.1 и таблице 1.2. Данные получены из открытых источников.

Таблица 1.1 - Результат сравнения приложений меньшей функциональности

Перечень функций	SEDMAX	СК-2007	ОИК Диспетчер
Оперативное управление и диспетчеризация электроснабжения	+	+	+
Оперативное управление и диспетчеризация других процессов (энергоресурсов, технологических процессов основных и вспомогательных производств и т.п.)	+	-	-
Учет электроэнергии и энергоресурсов (воды, тепла, газа, пара, стоков и т.п.) с поддержкой стандартных и проприетарных протоколов.	+	-	-
Контроль качества электроэнергии	+	-	-
Аналитические инструменты (анализ рисков отказов оборудования, прогнозирования параметров и событий, нахождения зависимостей.	+	-	-
Интеграция с ERP системами и системами бухгалтерского учета	+	-	-
Сбор осциллограмм	+	-	-
Сбор и ведение журналов событий приборов и устройств	+	-	-
Геоинформационный сервис	+	-	-
Возможность поддержки 24/7	+	-	-
Квитирование событий	+	+	+
Настраиваемые оповещения пользова-телей по e-mail и SMS	+	-	+

Таблица 1.2 - Результат сравнения приложений большей функциональности

Перечень функций	SEDMAX	Энергосфера	Пульсар
Учет энергоресурсов	+	+	+
Учет электроэнергии	+	+	+
Диспетчеризация энергоресурсов	+	+	+
Диспетчеризация электроснабжения	+	+	+
Система оперативного управления и диспетчеризации (энергоснабжение, кондиционирование и вентиляция и т.д.)	+	-	-
Диагностика состояния системы (протоколы SNMP, ICMP)	+	-	-
Система событий и настраиваемые оповещения пользователей	+	+	+
Единое время в системе, синхронизация приборов учета	+	+	+
Работа серверов в режиме горячего резерва или кластера	+	-	-
Нет ограничений на количество пользователей	+	+	-
Web-интерфейс для визуализации данных	+	+	+
Web-интерфейс для настройки системы	+	-	-
Редактор и отображение информации в виде мнемосхем	+	+	+
Геоинформационный сервис	+	+	-
Передача данных в сторонние системы по стандартным протоколам обмена	+	-	-

Так же стоит отметить, что СК-2007, ОИК Диспетчер и Энергосфера используют MS SQL (платная) и Windows (платная).

Пульсар использует PostgreSQL (бесплатная) и Windows (платная).

В тоже время SEDMAX использует нереляционные гибкие СУБД InfluxDB и MongoDB (бесплатные), а располагаться может не только на Windows, но и на Linux.

На основе данного анализа было выявлено что система автоматизации SEDMAX имеет ряд сильных преимуществ, по сравнению с аналогами.

1.3 SEDMAX - решение для промышленного интернета вещей

SEDMAX - это универсальная промышленная информационно-аналитическая платформа, которая подходит для создания локальных или единых систем автоматизации и диспетчеризации на предприятиях (как система для IIOT), где уже накопилось много разных систем автоматизации, IT-оборудования, приборов полевого уровня и т. д. Это система, которая объединяет в себе следующие термины: АСУ ТП, АСКУЭ, Scada-системы.

АСКУЭ - обеспечивает коммерческий учёт электроэнергии (мощности). Это автоматизированная система коммерческого учета электроэнергии, полноценным образом обеспечивающей дистанционный сбор информации со специально оборудованных приборов учета, передачу сведений на верхнюю ступень при условии их обработки [1].

АСУ ТП - это группа решений технических и программных средств, предназначенных для автоматизации управления технологическим оборудованием на промышленных предприятиях[1].

SCADA (аббр. от англ. Supervisory Control And Data Acquisition --

диспетчерское управление и сбор данных) - это программный, предназначенный для разработки или обеспечения работы в реальном времени систем сбора, обработки, отображения и архивирования информации об объекте мониторинга или управления [2].

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

В качестве источников информации могут применяться измерительные преобразователи, приборы учета, устройства сбора и передачи данных (УСПД), ИТ оборудование, программные комплексы.

SEDMAX поддерживает как стандартные протоколы обмена информацией, так и собственные протоколы производителей устройств. Для отображения информации на рабочих местах не требуется установка специальных клиентских приложений.

Система имеет удобный web-интерфейс, позволяющий получать информацию как с помощью стационарного ПК, так и с любого мобильного устройства, подключенного к локальной сети или сети Интернет.

SEDMAX - это одновременно и АСУ ТП, и АСКУЭ, и даже нечто большее, чем SCADA система. При этом все перечисленное объединяется промышленный интернет вещей.

1.4 Постановка задачи ВКР

Целью данной выпускной квалификационной работы является реализация потоковой визуализации данных в системе автоматизации производств SEDMAX.

Для выполнения цели ВКР должны быть выполнены следующие задачи:

1. Переработка существующего инструмента «Виджеты»:

1.1. Улучшение работы веб-сокетов;

1.2. Переработка фронтенда.

2. Доработка мнемосхем:

2.1. Доработка паспорта объекта;

2.2. Возможность ручного ввода в паспорте;

2.3. Получение оперативной информации с устройств;

2.4. Создание «диспетчерских меток» на фронтенде.

3. Создание модуля «Анализ полноты данных»:

3.1. Реализовать возможность анализа данных по датам в месяцах;

3.2. Реализовать возможность анализа данных по часам в датах.

4. Создание модуля «Редактор наборов»:

4.1. Возможность создания наборов по протоколу Modbus;

4.2. Возможность создания наборов по протоколу МЭК-104.



2. РАЗРАБОТКА РЕШЕНИЙ ДЛЯ СИСТЕМЫ АВТОМАТИЗАЦИИ

2.1 Описание используемой системы

SEDMAX представляет из себя многокомпонентную систему, в которой функционал распределен между множеством взаимодействующих между собой компонентов (сервисов). Это, так называемая, микросервисная архитектура, которая позволяет строить приложение на слабо связанных модулях, которые взаимодействуют между собой с помощью специального API (Application Program Interface).

В отличии от монолитной архитектуры, микросервисы:

- создаются из независимых частей и изолированы друг от друга, что позволяет приложению работать корректно при неисправности в каком-то отдельном модуле

- позволяют создавать модули с помощью разных технологических стеков

- более просты в понимании, так как слабо связанны, при том что каждый микросервис выполняет 1 или 2 конкретных функции.

В составе SEDMAX можно выделить следующие основные группы сервисов:

1. Сервисы сбора и передачи данных, выполняющие сбор данных с внешних устройств и систем и осуществляющие передачу данных во внешние устройства/системы;

2. Сервисы web приложения, осуществляющие предоставление пользователям интерфейсов взаимодействия с системой и данных, а также разграничивающие права доступа;

3. Сервисы обработки данных, выполняющие прием данных, их потоковую обработку и пост-обработку;

4. Системные сервисы, выполняющие задачи концентрации потоков данных, хранения данных и конфигурации системы, резервирования, мониторинга и объединения сервисов и передачи специфических сигналов между сервисами.

Для реализации цели ВКР понадобятся следующие сервисы:

Таблица 2.1 - Результат сравнения приложений меньшей функциональности

Имя сервиса	Назначение
SedmaxBackendUI sed_ui	Сервис обработки запросов за webресурсами (js, css, html файлы)
SedmaxBackendWidgets sed_widgets	Сервис, обслуживающий пользовательские интерфейсы drag'n'drop виджетов
SedmaxBackendMnemonicDiagrams sed_mnemonic_diagrams	Сервис, обслуживающий пользовательские интерфейсы мнемосхем v2
nginx nginx	Web-сервер
SedmaxBackendArchive sed_archive	Сервис, обслуживающий пользовательские интерфейсы анализа учета электроэнергии и энергоресурсов

Так же, данные сервисы внутри себя обращаются уже к другим сервисам.

2.2 Разработка структуры системы

Для выполнения ВКР нужно будет создать и переработать пользовательские интерфейсы, а также дорабатывать их бэкенд.

Так же нужно:

- Улучшить cтабильность React-компонентов;

- Улучшить стабильность веб-сокетов;

- Поддерживать верстку при различных размерах окна браузера;

- Ограничить некоторые действия пользователя, которые могут привести к некорректному отображению интерфейса.

Структурная схема элементов, которые в которых будут вестись работы представлена на рисунке 2.1.

Реализация на уровне пользовательского интерфейса

Начиная новый проект, программист сталкивается с выбором: какой JavaScript фреймворк выбрать для сайта - Vue.js, React или Angular? Различия между ними есть, и довольно существенные. Однако каждый из них подходит для решения задач. Поэтому остается открытым вопрос эффективности работы.

Рисунок 2.1 - структура работы с модулями для решения задач ВКР

2.3 Определение технологий для разработки

Преимущества использования JavaScript фреймворков:

- Эффективность - проекты, которые раньше заняли бы месяцы и сотни строчек кода, сейчас могут быть реализованы намного быстрее с хорошо структурированными готовыми шаблонами и функциями.

- Безопасность - лучшие JavaScript фреймворки имеют фирменную систему безопасности и поддерживаются крупным сообществом, члены которого и просто пользователи выступают в роли тестировщиков.

- Расходы - большинство фреймворков с открытым кодом и бесплатны. Поскольку они помогают программистам быстрее разрабатывать пользовательские решения, итоговая цена веб приложения будет ниже.

Возможные варианты фреймворков:

1. Angular.js

Angular.js часто называют MVW (Model-View-Whatever) фреймворк и среди главных выгод называют: быстрое написание кода, быстрое тестирование любой части приложения и двухсторонняя привязка данных (изменения в бэкэнде сразу же отражаются на пользовательском интерфейсе). С момента выхода его экосистема вышла за пределы воображения. Сейчас его заслуженно называют наиболее используемым JS фреймворком для разработки одностраничных приложений (SPA Single-Page-Applications) и он может похвастаться крупнейшим сообществом разработчиков.

2. React.js

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

Он по праву считается самым быстрорастущим JS фреймвком: на сегодня насчитывается около 1000 авторов Github. В MVC (Model-View-Controller) моделе React.js действует как “V” и может быть легко интегрирован в любую архитектуру. Благодаря использованию виртуального DOM дерева он обеспечивает больший рост производительности в сравнении с Angular 1.x. В дополнение к этому, компоненты React могут быть созданы и повторно использованы в других приложениях или даже переданы для общественного использования.

Не смотря на тот факт, что React более сложен в изучении, он делает разработку приложений простой и легкой для понимания. Кроме того, он может идеально подойти для сложных, внушительных программных решений с высокой степенью нагрузки.

3. Vue.js

Углубляясь, Vue.js предлагает двухстороннюю привязку данных (как в AngularJS), визуализацию на стороне сервера (как в Angular2 и ReactJS), Vue-cli (scaffolding инструмент для быстрого старта) и опционально поддержку JSX. Его создатель утверждает, что Vue2 один из самых быстрых фрейворков в целом.

Vue.js лучший выбор для быстрой разработки кроссплатформенных приложений. Он может стать прочной основой для высокопроизводительных приложений в одну страницу (SPAs) и выгодным решением для тех случаев, когда производительность важнее, чем хорошая организация кода или структура приложения.

Реализация на программном уровне

Go - это язык программирования, который был разработан корпорацией Google. Часто его еще называют “Golang” - сокращение от “Google language”. Это компилируемый и многопоточный язык, релиз которого состоялся в ноябре 2009 года.

Одной из ключевых фигур, которые принимали участие в создании Go, является Роб Пайк, известный разработчик языков программирования, а также операционных систем, в данный момент работающий в Google. Выступая на одной из конференций, он отметил, что язык Go - это попытка перенять лучшие стороны таких языков, как C++ и Java [3].

У языка Go есть несколько положительных черт, выделяемых программистами, которые на нем пишут.

Во-первых, это его простота. Язык Go разрабатывался в качестве замены C: его высокая производительность почти сопоставима с языком Си, но более простой синтаксис дает возможность разрабатывать приложения гораздо быстрее (к примеру, как на Python). При этом многие разработчики изучают этот язык после Python или PHP либо используют два языка в связке (Python/Go и PHP/Go). Упрощенный синтаксис облегчает не только написание своего собственного кода, но и чтение кода, написанного другими программистами, что особенно важно в командной работе. Эта особенность Go, в свою очередь, ведет к другому важному факту: быстрое освоение Go позволяет перевести внимание с изучения самого языка на изучение программирования в целом.

Во-вторых, Go имеет большое количество библиотек, благодаря которым можно выполнить практически любую поставленную задачу. Многое можно реализовать, используя только стандартную библиотеку Go, которая легко читается, а также отличается хорошим качеством и скоростью. Отдельного внимания заслуживает эффективное взаимодействие с библиотеками языка Си; некоторые отмечают, что Go-библиотеки по факту являются просто обертками над С-библиотеками.

В-третьих, Go это компилируемый язык, на котором можно быстро написать необходимое приложение. Go имеет такую же строгую статическую типизацию, как Pascal, но в то же время он имеет гораздо больший прикладной характер (и это роднит его с Python). Тут необходимо отметить высокую производительность Golang, которая характерна для компилируемых языков.

Также в Go значительно облегчена кроссплатформенность [3].

База данных - MongoDB

MongoDB - документно-ориентированная система управления базами данных (СУБД) с открытым исходным кодом, не требующая описания схемы таблиц. Классифицирована как NoSQL, использует JSON - подобные документы и схему базы данных.

Ниже приведены преимущества MongoDB по сравнению с другими СУБД:

- данные хранятся в JSON формате;

- поддержка динамических запросов;

- отсутствие сложных запросов;

- отсутствие схемы, различные сущности не идентичны по структуре;

- понятная структура каждого объекта;

- для хранения используемых в данный момент данных используется;

- внутренняя память, что позволяет получать более быстрый доступ;

- легко масштабируется;

- имеется поддержка индексов.

Так же MongoDB может работать с наборами реплик, то есть поддерживать копии данных в актуальном состоянии, при этом каждый набор реплик может выступать в роли или главной, или вспомогательной реплики. Вспомогательные реплики поддерживаются в актуальном состоянии и, если основная реплика дает сбой, то СУБД проводит выбор, которая из вспомогательных реплик станет основной.

2.4 Разработка алгоритмов

В разработке используются следующие основные инструменты: React JS, Redux, Golang, MongoDB.

Так как с помощью фреймворка Redux, как правило, обрабатывается большая часть логики, то нужно представить алгоритм его работы.

Redux предназначен для работы с состоянием приложения. Его используют для упрощения взаимодействия нескольких компонентов с одним хранилищем. С его помощью синхронизировать данные достаточно просто.

Теперь объясним, как работает Redux в нашем проекте.

Принцип работы показан на рисунке 2.2.

Цикл начинается, когда пользователь, на уровне представления взаимодействует с приложение, и при этом срабатывает экшен. В тоже время экшен изменяет глобальное состояние приложения, и в результате происходит перерендер представления в соответствии с изменениями.



Рисунок 2.2 - принцип работы REDUX

Redux является реализацией Flux-архитектуры -- паттерна для организации передачи данных в React-приложениях.

Таким образом реализовано практически каждое действие, совершаемое пользователем.

Теперь перейдем к типовым алгоритмам, которые были использованы при разработке. На рисунке 2.3 представлен алгоритм для построение календарной тепловой карты для модуля полноты данных:

Так как для решения задач требуется потоковое динамическое обновление данных для их актуальности, в каждом модуле есть веб-сокеты. Соединение становится защищенным и помехоустойчивым с помощью библиотеки Redux,



Рисунок 2.3 - блок-схема алгоритма построения тепловой карты

На рисунке 2.4 приведен обобщенный алгоритм работы с веб-сокетами.

«Анализ полноты данных»

Модуль «Анализ полноты данных» позволит специалистам визуально оценивать какая доля в объеме данных пришла с устройства некорректно или совсем не пришла (все ли данные собраны системой с устройств).

Это поможет оценить какие устройства работали в выделенный промежуток исправно, а какие нет и локализировать проблему. Поэтому данный модуль станет важным инструментом системы SEDMAX.



Рисунок 2.4 - блок-схема алгоритма организации работы веб-сокетов

2.5 Разработка программных модулей

Интерфейс визуализируется в виде так называемой «тепловой карты» (Heatmap), которая позволяет оценить плотность распределения данных, на временном промежутке. интернет автоматизация модуль интерфейс

Требовалось разработать два типа модуля для разных форматов.

1. Формат «Даты по месяцам»

Формат и структура данных, приходящих с бэкенда - это массив месяцев, где месяц - это массив из объектов с двумя полями: дата и значение в процентах за эту дату.

Следует сразу пояснить, что пользователь может выбирать не полные месяцы, но в ответе приходят полные, а даты, которые не нужны пользователю имеют значение «-1».

Если пользователь запрашивает данные за период с 11 апреля 2018 по 20 октября 2018, то в ответ на запрос придет структура:

[ // выбранные даты формируют массив месяцев

[ // месяц - массив дат

{

value: -1, // невыбранная пользователем дата месяца

date: '2018-04-01'

},

...

{

value: -1,

date: '2018-04-10'

},

{

value: 100, // выбран период с началом 2018-04-11

date: '2018-04-11'

},

...

{

value: 69,

date: '2018-04-30'

}

],

[

{

value: 55,

date: '2018-05-01'

},

...

/// МАЙ

],

[ { ИЮНЬ(Полный) } ], // данные от 2018-04-01 до '2018-10-31'

... // в ответе 7 месяцев

[ { СЕНТЯБРЬ(Полный) } ],

[

///ОКТЯБРЬ(Не полный)

...

{

value: 69, // выбранный период до 2018-10-20

date: '2018-10-20'

},

{

value: -1,

date: '2018-10-21'

},

...

{

value: -1,

date: '2018-10-31'

}

]

];

Логика построения компонента «Календарной тепловой карты»:

<Layout>

<Title gridArea="Title">

<h3>Календарная тепловая карта</h3>

</Title>

<Content gridArea="Heatmap">

{Data.map((month, indexMonth) => (

<MonthBlock

key={indexMonth}

width={this.getCountOfWeeks(

month[0].date,

month[month.length - 1].date

)}

>

<MonthContent>

{this.drawOffset(month)}

{month.map(date => (

<CalendarHeatmapCell

key={date.date}

cellValue={date.value}

cellColor={this.valuesToColorHSL(date.value)}

cellDate={date.date}

/>

))}

</MonthContent>

<MonthLabel

width={this.getCountOfWeeks(

month[0].date, month[month.length - 1].date)}

>

{format(new Date(month[0].date), 'MMMM', { locale: ru })}

</MonthLabel>

</MonthBlock>

))}

</Content>

<Content gridArea="XAxis" />

</Layout>

В результате получаем интерфейс, представленный на рисунке 2.3.

Рисунок 2.3 - тепловая карта оценки полноты данных «даты по месяцам»

2. Формат «часы в датах»

Позволяет оценить потери данных в конкретные часы в сутках.

Для данного формата структура данных выглядит почти так же, но добавляется разбиение на даты на часы:

[

[

{

value: 55,

date: '2018-11-29', //выбран период с 2018-11-29

hour: '00:00'

},

{

value: 54, // значение за

date: '2018-11-29', // дату

hour: '01:00' // и час

},

…

{

value: 50,

date: '2018-11-29',

hour: '23:00'

}

],

[ { 2018-11-30 } ],

[ { 2018-12-01 } ] //выбран период по 2018-12-01

]

Результат представлен на рисунке 2.4

Рисунок 2.4 - тепловая карта оценки полноты данных «часы по датам»

«Виджеты»

Инструмент «Виджеты» предназначен для отображения важных актуальных данных с различных устройств. Виджеты - это перетаскиваемые элементы, при этом отображение данных виджета оперативного контроля выполняется поверх всех остальных данных, включение/отключение отображения выполняется нажатием на кнопку в меню.

В результате работы над данным инструментов:

- были улучшены и оптимизированы react-компоненты;

- улучшена общая стабильность WebSocket подписок;

- добавлена возможность добавлять псевдонимы для параметров устройств, которые при этом сохраняются в localstorage браузера;

- исправлено отображение элементов: для отображения и скрытия виджетов в шапке страницы есть специальная кнопка, и теперь ее состояние привязывается к пользователю.

На рисунке 2.5 представлено модальное окно создания/редактирования виджетов. Форма для ввода названия, дерево для выбора устройств, доступные и выбранные параметры и дополнительные настройки.

Рисунок 2.5 - модальное окно создания нового виджета.

При создании нового виджета сработает цепочка функций.функция - сага (из библиотеки Redux). Проследим работу стандартных функций и работу библиотеки Redux на этом примере.

В результате заполнения полей и нажатия на кнопку «Создать» сработает обработчик handleCreateWidgetRequest(params) с выбранными параметрами.

Обработчик вызывает Redux-action CREATE_WIDGET_REQUEST:

export const createWidgetRequest = params => ({

type: CREATE_WIDGET_REQUEST,

params

});

Redux-action вызывает redux-saga:

function* watchCreateWidget() {

yield takeEvery(CREATE_WIDGET_REQUEST, requestCreateWidget);

}

После, функция-сага отправляет запрос на создание виджета и пере- запрашивает список всех виджетов(с только что созданным элементом), а так же обрабатывает ошибки:

export function* requestCreateWidget(action) {

const { params } = action;

try {

const response = yield call(createWidget, params);

const { data } = response;

yield put(createWidgetResponse(fromJS(data)));

yield* requestWidgetsList();

} catch (error) {

const statusCode = error.response.status;

errorsHandling(statusCode, 'action');

yield put(createWidgetFailed(error));

}

}

Функция, для отправки POST - запроса на создание виджета:

export const createWidget = params =>axios.post(

'/sedmax/web/widgets/drag/create', JSON.stringify(params)

);

На рисунке 2.6 представлены созданные виджеты с различными параметрами и с разных устройств.



Рисунок 2.6 - созданный перетаскиваемый виджет

«Мнемосхемы»

Инструмент «Мнемосхемы» имеет важную роль и обширный функционал. На мнемосхемах отражается основное оборудование, сигналы, состояние регулирующих органов.

Мнемосхемы помогают оператору, работающему в условиях большого количества поступающей информации, облегчить процесс информационного поиска, подчинив его определенной логике, диктуемой реальными связями параметров контролируемого объекта. Они облегчают оператору логическую систематизацию и обработку поступающей информации, помогают осуществлению технической диагностики при отклонениях процесса от нормы, обеспечивают внешнюю опору для выработки оптимальных решений и формирования управляющих воздействий.

На рисунке 2.7 представлена тестовая мнемосхема.

На рисунке 2.8 представлены паспорт и диспетчерские метки для объектов тестовой мнемосхемы.



Рисунок 2.7 - просмотр мнемосхем

Рисунок 2.8 - паспорт и диспетчерские метки объекта

«Редактор наборов»

Редактор наборов формирует наборы с выбранными параметрами устройств. Но при этом разные типы устройств поддерживают разные протоколы.

SEDMAX опрашивает устройства по разносторонним протоколам, группирует их и может передать другой системе уже по конкретному, нужному ей протоколу.

То есть редактор наборов позволяет унифицировать получение данных с устройств.

При создании данного модуля, на уровне представления использовались специальные компоненты высшего порядка (Higher order components).

Они позволяют создать единственный компонент, который динамически подстраивается под различные данные (в данном случае - под разные протоколы). То есть позволяет не создавать множество различных компонентов для множества протоколов, что уменьшает дублирование кода и улучшает его читабельность.

На рисунке 2.9 представлен список наборов с возможностью добавления, удаления и изменения его элементов.

Рисунок 2.9 - список наборов

На рисунке 2.10 представлены настройки набора для протокола Modbus.

Рисунок 2.10 - настройка набора



3. АНАЛИЗ ПОЛУЧЕННЫХ РЕЗУЛЬТАТОВ

3.1 Тестирование

Тестирование - это процесс исследования программного продукта, позволяющий проверить соответствия между реальным поведением программы и ожидаемым поведением. Стоит понимать, что это важнейший этап жизненного цикла программного обеспечения, который позволяет:

- найти программные ошибки

- проверить качество кода

- проверить стойкость работы программы при разных степенях нагрузки

- исследовать связность компонентов программы и взаимодействие с внешними системами

Существует огромное количество видов тестирования, а также эталонная модель тестирования, так называемая «пирамиду тестирования», которая подразумевает использование четырех видов тестов.

На рисунке 3.1 представлена «пирамида тестирования».

Пирамида демонстрирует характеристики тестов: их важность, сложность, скорость и стоимость.

1) Модульное тестирование или Unit testing.

Юнит-тест - это код, который тестирует части кода: отдельные функции, классы и другие модули. Этот тип тестов лежит в основе пирамиды, они простые и легкие для написания. Суть теста в том, чтобы подать на вход функции какие-то данные, и на выходе получить нужный корректный результат. Это дают уверенность, что ваша программа работает как задумано. Такие тесты можно запускать многократно. Успешное выполнение тестов покажет разработчику, что его изменения не сломали ничего, что ломать не планировалось.



Рисунок 3.1 - «пирамида тестирования»

2) Интеграционное тестирование.

Фаза тестирования, при которой отдельные модули объединяются и тестируются в совокупности.

Интеграционное тестирование в качестве входных данных использует модули, над которыми было проведено юнит-тестирование, группирует их в более крупные множества, выполняет тесты, определённые в плане тестирования для этих множеств, и представляет их в качестве выходных данных и входных для последующего системного тестирования.

Интеграционное тестирование проводится после модульного тестирования и предшествует системному тестированию.

3) Системное тестирование.

Системное тестирование программного обеспечения -- это тестирование, выполняемое на полной, интегрированной системе, с целью проверки соответствия системы исходным требованиям. Системное тестирование относится к методам тестирования чёрного ящика, и, тем самым, не требует знаний о внутреннем устройстве системы.

4) Сквозное, End-to-End тестирование

Это тестирование приложения с точки зрения пользователя, и по сути - автоматизация его действий. Это самый затратный и долговременный метод тестирования, но при этом он очень важен, ведь он целиком проверяет работу приложения. Поэтому он находится на вершине пирамиды.

Очень важно понимать, что «пирамида тестирования» - это эталонная идеальная модель. У реальных систем дела обстоят по-другому. И тестирование не должно быть избыточным. Как правило, сам разработчик должен определять, что точно должно быть покрыто тестами, а что не нужно. То есть стопроцентного покрытия тестами быть не должно.

У системы SEDMAX автоматизированное тестирование на данном этапе является не обязательным этапом. Так как архитектура микросервисная, и сейчас находится на этапе модернизации под новые технологии и нужды, системные тесты проводить невозможно.

Поэтому при тестировании новых модулей для SEDMAX, использовалось модульное и сквозное тестирование.

Для End-to-end (сквозного) тестирования WEB-приложений существует много различных фреймворков. Но выбран был CYPRESS, так как по сравнению с аналогами он имеет ряд преимуществ:

- простая установка без лишних зависимостей

- позволяет легко и быстро писать тестовые сценарии

- запуск тестов в реальном времени локально или в CI

- дает возможность записать выполение тестов с отладочной информацией на видео или скриншоты.

- имеет широкий набор инструментов, открытый исходный код и множество дополнительных библиотек (например, будет так же использоваться cypress-testing-library), облегчающих написание тестов.

Ниже приведен пример тестового сценария для сквозного тестирования «Редактора наборов» с тестами для создания набора, удаления одного и удаления всех наборов:

describe('Редактор наборов', () => {

beforeEach(() => {

return cy.login();

});

it('Создание набора modbus', function() {

cy.visit('/sedmax/web/ui/sets_data_server/editor/index')

.wait(1000)

.getByText(/Создать набор/i)

.click({ force: true })

.wait(500)

.get('.ant-modal-content .ant-btn-primary')

.click();

});

it('Удаляем набор modbus', function() {

cy.visit('/sedmax/web/ui/sets_data_server/editor/index')

.wait(1000)

.get('.ant-table-row.ant-table-row-level-0 td')

.first()

.click()

.getByText(/Удалить выбранное/i)

.click({ force: true })

.get('.ant-modal-confirm-btns button.ant-btn.ant-btn-primary')

.click()

.wait(1000);

});

it('Удалить все наборы modbus', function() {

cy.request('POST', '/sedmax/configuration/data_server_set/create', {

protocolID: 2

});

cy.request('POST', '/sedmax/configuration/data_server_set/create', {

protocolID: 2

});

cy.visit('/sedmax/web/ui/sets_data_server/editor/index')

.wait(1000)

.get('thead.ant-table-thead input[type=checkbox]')

.click()

.getByText(/Удалить выбранное/i)

.click({ force: true })

.get('.ant-modal-confirm-btns button.ant-btn.ant-btn-primary')

.click()

.wait(1000);

});

});

Так же были написаны сквозные тесты для изменения настроек в наборах Modbus и МЭК-104.

Для Unit-тестирования использован фреймворк Jest - лидер тестовых библиотек, так как:

- умеет распараллеливать тестирование для ускорения процесса

- позволяет оценить покрытие кода

- имеет возможность имитировать любые объекты за пределами области действия теста (в виде тестовых данных)

- умеет анализировать типы появляющихся ошибок.

Пример модульного теста для проверки создания компонента модального окна «Создание набора» и его функционала приведен ниже:

import React from 'react';

import ModalCreateSetConnect, { ModalCreateSet } from '../ModalCreateSet';

import {

renderWithIntlAndRedux,

cleanup,

render,

intl

} from '../../../../tests/setupTests';

import { mockProtocols } from '../../../../tests/__mock__/classifiers.mock';

describe('ModalCreateSet', () => {

afterEach(cleanup);

it('should render a ModalCreateSet, visibility', () => {

// Arrange

const createSet = jest.fn();

const changeStateModalCreateSet = jest.fn();

const { container, getByText } = render(

<ModalCreateSet

set={{ id: 1, created: undefined }}

intl={intl}

isFetching={false}

modalState

protocols={[mockProtocols]}

createSet={createSet}

changeStateModalCreateSet={changeStateModalCreateSet}

/>

);

// Act

const submitButton = getByText('OK');

const cancelButton = getByText('Cancel');

submitButton.click();

cancelButton.click();

// Assert

expect(createSet).toHaveBeenCalledTimes(1);

expect(changeStateModalCreateSet).toHaveBeenCalledTimes(1);

expect(container).toMatchSnapshot();

});

it('should render a ModalCreateSet', () => {

const { container } = renderWithIntlAndRedux(<ModalCreateSetConnect />);

expect(container).toMatchSnapshot();

});

});

Где, mockProtocols это тестовые данные:

export const mockProtocols = {

id: 2,

code: '',

name: 'Modbus TCP',

state: 0

};

На рисунке 3.2 представлен процесс подготовки внесенных изменений к внедрению на тестовый сервер, но что-то пошло не так и была обнаружена ошибка на этапе Unit-тестирования.

Рисунок 3.2 - обнаружена ошибка при автоматическом тестировании.

3.2 Внедрение

Вся система обслуживается специальным сервисом GitLab. Это сайт и система управления проектами с возможностью ведения документации и системой отслеживания ошибок.

Разработчики используют распределенную систему контроля версий Git и с помощью нее они изменяют модули системы и заливают на сервер GitLab.

При этом когда изменения заливаются на сервер, происходит отработка тестов, сборка бандлов (организация и компилирование множества ресурсов и библиотек, необходимых для современного веб-проекта в минимизированный файл), и экспортирование на сервер и в зависимые репозитории.

На рисунке 3.3 представлено успешное выполнение всех этапов обновления модуля «Редактор наборов». В результате все изменения были перенесены на тестовый сервер.

Рисунок 3.3 - тесты, сборка бандла и обновление сервера успешно выполнены

После этапа тестирования на серверах SEDMAX, новые модули отправляются на тестирование к заказчику.



4. РАЗРАБОТКА МЕТОДИЧЕСКИХ УКАЗАНИЙ ПО РАБОТЕ С СИСТЕМОЙ

4.1 Виджеты

Для создания новых виджетов в правой части главного меню есть кнопка в виде глаза. При нажатии правой кнопкой мыши открывается контекстное меню со списком уже имеющихся виджетов, в котором нужно нажать «Добавить виджет». Меню представлено на рисунке 4.1.

Рисунок 4.1 - меню виджетов.

Откроется модальное окно создания нового виджета. Нужно ввести название нового виджета. Слева в дереве нужно выбрать устройства. Параметры выбранных устройств окажутся в таблице «Доступные параметры». В данной таблице доступен поиск по устройствам и тегам.

После выбора доступных параметров нужно нажать на кнопку «Переместить выбранное». В результате выбранные параметры окажутся в таблице «Выбранные параметры». В этой таблице можно воспользоваться поиском по всем полям таблицы и ввести псевдонимы для параметров.

После всех проделанных шагов нужно нажать на кнопку «Создать». Модальное окно представлено на рисунке 4.2.



Рисунок 4.2 - модальное окно создания нового виджета.

Теперь, вызвав контекстное меню, нажав на иконку глаза можно увидеть список всех виджетов, включить/отключить отображение конкретного виджета.

В списке виджетов можно удалить виджет или его редактировать при нажатии на соответствующие иконки.

При нажатии на иконку глаза левой кнопкой мыши можно включить и отключить глобальную видимость всех виджетов.

Созданные виджеты можно перетаскивать по всему экрану. Их параметры, позиции и видимость сохраняются для конкретного пользователя.

4.2 Паспорт и диспетчерские метки на мнемосхемах

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

В паспорте объекта есть информация о его параметрах. В таблице, в соответствующем поле можно отправить команду ручного ввода или сбросить его.

Паспорт представлен на рисунке 4.3.

Рисунок 4.3 - паспорт объекта в модуле мнемосхем

В окне диспетчерских меток можно установить или снять соответствующие метки и оставить комментарий к действию. На рисунке 4.4 представлено окно диспетчерских меток.

Рисунок 4.4 - паспорт и диспетчерские метки в мнемосхемах



4.3 Редактор наборов

Редактор наборов представляет таблица наборов, которые можно редактировать и удалять. Для создания нового набора нужно нажать на соответствующую кнопку в редакторе наборов. Появится модальное окно с выбором протокола для набора: Modbus или МЭК-104.

Модальное окно представлено на рисунке 4.5.

Рисунок 4.5 - модальное окно для выбора протокола для набора

На рисунке 4.6 представлен список наборов.

Рисунок 4.6 - список наборов

После создания набора, пользователь попадает в настройки созданного набора, где нужно выбрать устройства из дерева, выбрать параметры нужных устройств из «доступных параметров» и добавить их в «параметры набора», а также заполнить главные поля набора и дополнительные поля параметров набора. На рисунке 4.7 представлена «настройка набора».



Рисунок 4.7 - настройка набора

На рисунке 4.8 представлено модальное окно расширенных настроек для протокола МЭК-104.

Рисунок 4.8 - настройка набора

4.4 Анализ полноты данных

Для того чтобы воспользоваться нужным инструментом, нужно выбрать тип отчета: «часы в датах» или «даты в месяцах», далее устройство из дерева устройств и нужные даты в выпадающем календаре.

На рисунке 4.9 представлен календарь для выбора диапазона дат.

Рисунок 4.9 - выпадающий календарь для выбора нужных дат

При наведении курсора на конкретную ячейку диаграммы, появляется подсказка с датой и соответствующим ей значением.

Рисунок 4.10 - выпадающий календарь для выбора нужных дат

Все модули задокументированы и протестированы с помощью GitLab.



ЗАКЛЮЧЕНИЕ

Во ходе выполнения выпускной квалификационной работы был реализован функционал новых модулей и доработаны старые

Разработка на базе ReactJS, Redux, Golang, MongoDB позволила обеспечить:

- высокую надежность модулей;

- стабильность высоконагруженных модулей

- реализацию требуемого функционала;

- быструю скорость взаимодействия пользователя с приложением;

- читаемость кода.

В будущем планируется добавить поддержку новых протоколов для редактора наборов, переписать модуль «виджеты» под новые технологии и продолжить улучшать другие модули системы SEDMAX

В настоящий момент новые модули внедрены на тестовые серверы для апробации, дальнейшего развития и подготовке к отправке к заказчикам.



СПИСОК ИСПОЛЬЗОВАННЫХ ИСТОЧНИКОВ

1. Бэнкс, А. И. React и Redux: функциональная веб-разработка / А. Бэнкс, Е. Порселло. - СПб.: Питер, 2019. - 336 с.

2. СТО ВоГУ-МУ.1-2019. Выпускная квалификационная работа. Требования к структуре, содержанию и оформлению: - Введ. 19.02.2019. - Вологда: Вогу, 2019. - 67 c.

3. Дж. Резиг, Б. Бибо. Секреты JavaScript ниндзя : Пер. с англ. - М. : ООО «И.Д. Вильямс», 2013. - 416с. : ил. - Парал. тит. англ.



ПРИЛОЖЕНИЕ

Запросы к Application Program Interface для модуля «Виджеты»

export function* requestCreateWidget(action) {

const { params } = action;

try {

const response = yield call(createWidget, params);

const { data } = response;

yield put(createWidgetResponse(fromJS(data)));

yield* requestWidgetsList();

} catch (error) {

const statusCode = error.response.status;

errorsHandling(statusCode, 'action');

yield put(createWidgetFailed(error));

}

}

export function* requestWidget(action) {

const { id } = action;

try {

const response = yield call(getWidget, id);

const { data } = response;

let selectedOptions;

if (data.parameters !== null) {

selectedOptions = data.parameters.map(parameter =>

`${parameter.object_id}_${parameter.device_id}_${parameter.ti_id}`

);

} else {

selectedOptions = new Set();

}

const dataModified = {

...data,

selectedOptions: new Set(selectedOptions),

selectedNodes: []

};

yield put(widgetResponse(fromJS(dataModified)));

}

catch (error) {

const statusCode = error.response.status;

errorsHandling(statusCode);

yield put(widgetFailed(error));

}

}

export function* requestUpdateWidget(action) {

const { id, params } = action;

try {

const response = yield call(updateWidget, id, params);

const { data } = response;

yield put(updateWidgetResponse(fromJS(data)));

yield* requestWidgetsList();

} catch (error) {

const statusCode = error.response.status;

errorsHandling(statusCode, 'action');

yield put(updateWidgetFailed(error));

}

}

export function* requestDeleteWidget(action) {

const { id } = action;

try {

const response = yield call(deleteWidget, id);

const { data } = response;

yield put(deleteWidgetResponse(fromJS(data)));

successfulNotification(locale, 'deleteWidget');

yield* requestWidgetsList();

} catch (error) {

const statusCode = error.response.status;

errorsHandling(statusCode, 'action');

yield put(deleteWidgetFailed(error));

}

}

Создание веб-сокета для модуля «Виджеты»

export function* watchSocket() {

const socket = yield call(createSocket);

const socketChannel = yield call(createSocketChannel, socket);

while (true) {

const payload = yield take(socketChannel);

if (payload === 'connection') {

yield* firstSending(socket);

yield fork(sendingToSocket, socket);

} else if (Array.isArray(payload)) {

const finalValueList = fromJS(yield select(getValuesList)).merge(

Map(convertData(payload))

);

yield put(changeWidgetsValuesList(finalValueList.toJS()));

}

}

}

function convertData(data) {

return data.reduce(

(result, { id, value }) => ({

...result, [id]: value

}), {}

);

}

function createSocket() {

const socket = new SockJS(getSocket);

socket.onerror = error => {

throwErrorMessage(error, 'CONNECTION ERROR');

socket.close();

};

socket.onclose = event => {

if (event.wasClean) {

throwSuccessMessage('Соединение закрыто чисто', 'Connection closed');

} else {

throwErrorMessage('Обрыв соединения', 'ERROR');

}

};

return socket;

}

function createSocketChannel(socket) {

return eventChannel(emit => {

socket.onopen = () => {

emit('connection');

};

socket.onmessage = e => {

emit(JSON.parse(e.data));

};

const unsubscribe = () => {

socket.close();

};

return unsubscribe;

});

}

function* sendingToSocket(socket) {

while (yield take(CHANGE_WIDGETS_TI_LIST)) {

const visibleTi = yield select(getVisibleTi);

if (visibleTi.length !== 0) {

socket.send(

JSON.stringify([

{

class: 'rtd',

attributes: ['value'],

filters: [

{

ids: visibleTi

}

]

}

])

);

}

}

}

Функция подбора цвета для ячейки тепловой карты

valuesToColorHSL = value => {

const { maxValueOfData } = this.props;

const { maxValue = maxValueOfData, minValue, gamma } = this.props;

const maxColor = this.getColors(gamma)[0];

const minColor = this.getColors(gamma)[1];

const offset = this.getColors(gamma)[2];

...