Для закрытия и скачивания созданы кнопки.

Пример кода шаблона:

<a (click)="showPdfFile()" style="cursor: pointer; text-decoration: solid">{{ fileName }}</a>

<pdf-viewer *ngIf="isShow"

id="viewer"

[src]="src"

[original-size]="false"

[autoresize]="true"></pdf-viewer>

<button mat-fab *ngIf="isShow" style="z-index: 9999;

position: fixed;

top: 90%;

right: 0;

bottom: 0;

left: 90%;" (click)="isShow=false">

<mat-icon>close</mat-icon>

</button>

<button mat-fab *ngIf="isShow" style="z-index: 9999;

position: fixed;

top: 80%;

right: 0;

bottom: 0;

left: 90%;" (click)="isShow=false">

<mat-icon>cloud_download</mat-icon>

</button>

При нажатии на названия файла будет открыт документ в режиме просмотра содержимого.

3.3 Развертывание веб-приложения

В соответствии с архитектурой системы была построена Диаграмма развертывания, которая представлена на рисунке 7.

Диаграмма развертывания показывает топологию системы и распределение компонентов системы по ее узлам, а также соединения - маршруты передачи информации между аппаратными узлами.



Рисунок 7 - Диаграмма развертывания

На диаграмме показано как пользователь через браузер взаимодействует с компонентом.

Компонент взаимодействует с провайдером.

Провайдер взаимодействует с сервисом.

Сервис обращается к серверу, который в свою очередь обращается и отправляет данные сервису.

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

Вывод по разделу. Был реализовано веб-приложение с основным функционалам. Построена Диаграмма развертывания.

4. ИНФОРМАЦИОННЫЙ МЕНЕДЖМЕНТ

Информационный менеджмент -- это специальная область менеджмента, выделившаяся как самостоятельное направление в последние годы и все более приобретающая специфические особенности [1].

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

4.1 Инструкция пользователя

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

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

а) инспекторы по контрольно-пропускном пункте (КПП);

б) сотрудники ГУВ;

в) сотрудники складов временного хранения (СВХ);

г) сотрудники территориального управления (ТУ);

д) ветеринарные врачи на предприятиях;

е) уполномоченные хозяйственных субъектов.

Функциональные запросы представлены на рисунке 8 и 9, соответственно для стартовой страницы и страницы с дополнительной информацией об документе:

Рисунок 8 - Функционал стартовой страницы



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

При открытии сайта первое что видит пользователь -- это стартовая страница, которая представлена на рисунке 10.

Рисунок 10 - Стартовая страница

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



Рисунок 11 - Таблица данных

Данная таблица позволяет использовать следующие действия:

а) сортировка данных колонки;

б) перемещение колонок;

в) изменение размера колонки;

г) группировка данных по колонке;

д) настройка колонок;

е) переходить между страницами данных;

ж) выбор одной и больше строк через нажатие на кнопку shift или ctrl;

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

Следующий функционал позволяет настраивать отображение колонок. То есть можно выбрать те колонки, которые необходимо показать. Данный функционал является встроенным функционалом библиотеки. При нажатии на кнопку «Выбор столбцов» открывается диалоговое окно, которое представлено на рисунке 12. Вид кнопки Выбор столбцов представлен на рисунке 13.

Рисунок 12 - Настройка колонок

Рисунок 13 - Кнопка "Выбор столбцов"

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

Так же пользователь может сделать экспорт выбранных данных из таблицы в формате Excel. Данный функционал пользователь может вызвать при помощи нажатия на кнопку «Экспортировать выбранные данные». Вид диалогового окна представлен на рисунке 14. Вид кнопки представлен на рисунке 15. В данном диалоговом окне нужно ввести свое названия файла иначе файл будет сохраняться с заданным именем.



Рисунок 14 - Диалоговое окно с вводом имени для файла

Рисунок 15 - Кнопка "Экспортировать выбранные данные"

Еще одним из функционалом является фильтрация данных, представленный на рисунке 16.

Рисунок 16 - Фильтрация данных

Есть два способа использовать фильтрацию данных. Это выбор нужных данных, и ручной ввод данных.

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

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

Как можно заметить фильтрацию данных можно делать по не скольким колонкам одновременно.

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

Рисунок 17 - Кнопки изменения языка

Данные кнопки располагаются в шапке сайта на правой стороне.

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



Рисунок 18 - Дополнительная информация

На данной странице пользователь так же может посмотреть документ онлайн не скачиваю, нажав на нужный документ. Показ документа показан на рисунке 19.

Рисунок 19 - Показ документа

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

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

4.2 Оценка затрат на разработку программного продукта

Поправочный коэффициент затрат труда

Поправочный коэффициент затрат труда на исследование алгоритма решения задачи определяем с учетом уточнения описания задачи и квалификации программиста.

, (1)

где В - коэффициент увеличения затрат вследствие неполного описания, уточнений и некоторой доработки задачи (1,1-1,5);

К - коэффициент квалификации разработчика (для работающих до двух лет - 0,7, от двух до трех лет - 1,2, от трех до пяти лет - 1,5, от пяти до семи лет - 1,8, свыше семи лет - 2).

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

, (2)

где К - коэффициент квалификации разработчика (для работающих до двух лет - 0,7, от двух до трех лет - 1,2, от трех до пяти лет - 1,5, от пяти до семи лет - 1,8, свыше семи лет - 2).

Временные затраты труда на разработку

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

Общее число рабочих часов, планируемых затратить на разработку:

, (3)

где N^/ ? общее число дней в исследуемом периоде (необходимо указать Ваш период, отводимый на разработку);

N^/_п - число праздничных дней в исследуемом периоде;

N^/_в - число выходных дней в исследуемом периоде;

N^/_см - продолжительность смены;

N^/ - 28 дней (1 месяца);

N^/_п - 4 дня;

N^/_в - 8 день;

N^/_см - 6 часов.

часов.

Учет фактических временных затрат представляем в виде таблицы 27.

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

, (4)

где с - коэффициент сложности программы, р - коэффициент коррекции программы в процессе разработки.

Таблицы 35, 36 будут использованы для расчета.



Таблица 35 - Фактические временные затраты

Этапы разработки	Планируемые затраты	Плани руемые затраты	Фактические затраты	Факти ческие затраты
1. Подготовка и описание задачи		0,96		1,37
2. Исследование алгоритма решения задачи		2,88		5,76
3.Разработка алгоритма решения задачи		9,60		13,71
4. Составление программы по готовой блок-схеме		9,60		13,71
5. Автономная отладка программы на ПК		48,00		68,57
6. Подготовка документации по задаче		25,20		36,00
6.1. Подготовка материала в рукописи		14,40		20,57
6.2. Редактирование, печать и оформление документации		10,80		15,43
ИТОГО	=п1+п2+п3+ +п4+п5+п6	96,24	=п1+п2+п3++п4+п5+п6	139,13

Таблица 36 - Коэффициенты по категориям

Наименование коэффициента	Категория
	1	2	3	4
Коэффициент сложности программы	1,3	1,6	1,9	2,2
Коэффициент коррекции программы	0,1	0,3	0,6	2,0

(@K)_сл=1.6*(1+0.6)=2.56

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

, (5)

часов

Расчет средней часовой оплаты программиста

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

Месячный оклад инженера-программиста определяется согласно тарифной сетки. Учитывается процент премий (20%) и районный коэффициент (15%).

На суммарный фонд заработной платы начисляются страховые взносы 30,2% .

Определяем месячный оклад программиста с учетом квалификации и всех надбавок (оплату труда берем из действующих ЕТС по оплате труда работников бюджетной сферы).

, (6)

где ЗП_ОСН - месячная оплата труда установленного разряда;

К_ДОП - коэффициент надбавок и премий;

К_РЕГ - региональный коэффициент;

К_СВ - коэффициент, учитывающий страховые взносы.

рублей.

Годовой фонд заработной платы с учетом отчислений

Годовой фонд заработной платы вычисляется по следующей формуле:



, (7)

где 12 - количество месяцев в году.

рублей.

Число рабочих часов в году определяется согласно производственному календарю на год.

, (8)

где N - общее число дней в году;

N_П - число праздничных дней в году;

N_В - число выходных дней в году;

N_СМ - продолжительность смены;

1 - величина сокращений предпраздничных рабочих дней.

часов.

Средняя часовая оплата программиста определяется соотношением:

, (9)

где ФЗР_Г - годовой фонд заработной платы с учетом отчислений:

n_Р - число рабочих часов в году.

рублей/час.

Расходы по оплате труда разработчика программы определяются по следующей формуле:

, (10)

где t_{РАЗР.СЛ -} трудоемкость создания программы, с учетом сложности программы, выраженная в часах.

С_РАЗР - средняя часовая оплата труда инженера-программиста. рубля.

Расчет годового фонда времени работы на персональном компьютере

Определив действительный годовой фонд времени работы ПК в часах, получим возможность оценить себестоимость часа машинного времени. Время профилактики: ежедневно - 0.5 часа, ежемесячно - 2 часа, ежегодно - 16 часов.

, (11)

где N - общее число дней в году;

N_П - число праздничных дней в году;

N_В - число выходных дней в году;

N_СМ - продолжительность смены;

1 - величина сокращений предпраздничных рабочих дней;

N_РЕМ - время на проведение профилактических мероприятий.

, (12)

где К_Д - коэффициент ежедневных профилактик (0.5);

К_М - коэффициент ежемесячных профилактик (2);

12 - количество месяцев в году;

К_Г - коэффициент ежегодных профилактик (6).

часов.

часов.

Годовые отчисления на амортизацию персонального компьютера

Балансовая стоимость ПК



, (13)

где Ц_Р - рыночная стоимость ПК (определяется по прайсу);

К_УН - коэффициент, учитывающий затраты на установку и наладку (5?15%).

рублей.

Сумма годовых амортизационных отчислений

Сумма годовых амортизационных отчислений определяется по формуле:

, (14)

где Ц_ПК - балансовая стоимость ПК;

Н_А - норма амортизационных отчислений за год.

, (15)

где ? полезный срок действия ПК.

.

рублей.

Затраты на электроэнергию

Затраты на электроэнергию вычисляются по следующей формуле:

, (16)

где Р_ЧПК - установочная мощность ПК;

Т_ГПК - годовой фонд полезного времени работы машины (n_рпк);

Ц_ЭЛ - стоимость 1 кВт/ч. электроэнергии (Ц_ЭЛ=4.21 руб.);

К_ИНТ - коэффициент интенсивного использования ПК (0,9?1).

рублей.

Текущие затраты на эксплуатацию компьютера

Текущие затраты на эксплуатацию ПК рассчитываются по формуле:

, (17)

где З_ГАМ - годовые отчисления на амортизацию;

З_ГЭЛ - годовые затраты на электроэнергию для компьютера.

рублей.

Себестоимость часа работы на компьютере

Себестоимость часа работы на компьютере вычисляется по следующей формуле:

, (18)

руюлей/час.

Трудоемкость использования компьютера

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

Совокупные затраты машинного времени составляют:

, (19)



часов.

Затраты на оплату машинного времени

Затраты на оплату машинного времени рассчитываются по формуле:

, (20)

рублей.

Общие затраты на создание программы

Общие затраты на создание программы определяем как сумма затрат на разработку программы и затрат на оплату машинного времени.

, (21)

рубля.

Общие затраты на расходные материал

Рассчитаем затраты на расходные материалы с помощью таблицы 37.

Таблица 37 - Расходные материалы

Статьи затрат	Стоимость за единицу, руб./шт.	Количество	Общая стоимость, Руб.
1. Пользование ресурсами Internet	650 руб.	1 оплата.	650 руб.
2. Бумага	10 руб.	150 листов.	1500 руб.
3. Компакт-диск (CD-R)	50 руб.	1 шт.	50 руб.
Итого: (ЗРМ)			2200 руб.

Общие затраты на разработку программного продукта приведены в таблице 38.



Таблица 38 - Общие затраты на разработку программного продукта

Статьи затрат	Условное обозначение	Числовое значение
1. Общие затраты на заработную плату	ЗОБЩ	48969,35
2. Затраты на оплату машинного времени		2595,18
3. Расходные материалы	ЗРМ	2200,00
Итого: (СОБЩ)		53765

Предполагаемая цена программного продукта с учетом нормы прибыли

Вычислим предполагаемую цену продукта с учетом нормы прибыли:

, (24)

где С_ОБЩ - общие затраты на разработку программного продукта;

К_РЕН - коэффициент рентабельности.

рублей.

Предполагаемая цена данного продукта с учетом нормы прибыли составила 64517 рублей.

4.3 SWOT-анализ

SWOT-анализ -- метод стратегического планирования, заключающийся в выявлении факторов внутренней и внешней среды организации и разделении их на четыре категории: Strengths (сильные стороны), Weaknesses (слабые стороны), Opportunities (возможности) и Threats (угрозы).

В данном случае SWOT-анализ будет отражать анализ реализованного веб-приложения. Данный SWOT-анализ показан на таблице 39.



Таблица 39 - Слабые и сильные стороны, возможности и угрозы

Внутренняя среда	Сильные стороны	Интенсивность (Аi)	Слабые стороны	Интенсивность (Аi)
	Возможность повторного использования кода	5	Зависимость в специалистах знающих фреймворк Angular 5	5
	Быстрая загрузка страниц	3	Нет авторизации в системе	3
	Интуитивно понятный интерфейс	4	Нет сохранения состояния компонентов	3
	Локализация сайта на английском и русском языке	4
	Адаптация сайта под телефон	4
Внешняя среда	Возможности	Вероятность появления (Pj)	Коэффициент влияния (Кj)	Угрозы	Вероятность появления (Pj)	Коэффициент влияния (Кj)
	Внедрение или обновление библиотек	0.5	1	При обновлении каких-либо библиотек, возможен временный сбой функционала веб-приложения	0.7	0.5
	Добавление нового функционала	0.7	0.9	Прекращение поддержки фреймворком каких-либо библиотек	0.2	1
	Добавление новых языков для локализации	0.4	0.6	При прекращении поддержки от Россельхознадзора сайт становится не нужным	0.1	1
	Расширение возможностей существующего функционала	0.4	0.7

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

Таблица 40 - Шкала оценки вероятности появления возможностей и угроз

Качественная характеристика вероятности появления события	Значение
Низкая вероятность	0.1-0.3
Средняя вероятность	0.4-0.6
Высокая вероятность	0.7-0.9
Очень высокая вероятность	1

Для оценки факторов влияния возможностей и угроз используются шкала из таблицы 41.

Таблица 41 - Шкала оценки факторов влияния возможностей и угроз

Значение	Интерпретация
0	Влияние отсутствует
0.1-0.3	Влияние слабое
0.4-0.7	Влияние среднее
0.8-1	Влияние высокое

Для оценки интенсивности сильных и слабых сторон используется шкала из таблицы 42.



Таблица 42 - Шкала оценки интенсивности сильных сторон и слабы сторон

Значение	Интерпретация
1-2	Интенсивность низкая
3-4	Интенсивность средняя
5	Интенсивность высокая

Для слабых сторон также используются шкалы из таблицы 41 и 42, но значение следует брать со знаком минус. Шкала оценки взаимосвязи сильных и слабых сторон с возможностью и угрозами представлена в таблице 43.

Таблица 43 - Шкала оценки взаимосвязи

Балльная оценка	Интерпретация
1, 2	Незначительное влияние на использование благоприятных возможностей или защиту от угроз
3, 4	Существенное содействие использованию благоприятных возможностей или защите от угроз
5	Фактор дает полную возможность использовать благоприятные события или предотвратить отрицательные последствия угроз

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

Таблица 44 - Матрица SWOT-анализа

	Интенсивность (Аi)	Возможности (О)		Угрозы (Т)
		О1	О2	O3	O4	Итого	Т1	Т2	T3	Итого
Вероятность появления (Pj)		0.5	0.7	0.4	0.4		0.7	0.2	0.1
Коэффициент влияния (Кj)		1	0.9	0.6	0.7		0.5	1	1
Сильные стороны
S1	5	5	5	1	5	36.45	1	1	1	3.25
S2	3	3	4	1	4	16.14	1	1	1	1.95
S3	4	4	4	2	2	22.24	1	1	1	2.6
S4	4	5	1	5	1	18.44	1	1	1	2.6
S5	4	1	4	1	5	17.52	1	1	1	2.6
Итого		37	45.99	9.6	18. 2		7	4	2
Слабые стороны
W1	-5	5	5	2	5	-37.65	4	1	1	-8.5
W2	-3	1	4	1	4	-13.14	1	1	1	-1.95
W3	-3	1	4	1	4	-13.14	1	1	1	-1.95
Итого		-15.5	-30.87	-3.84	-13.72		-9.1	-2.2	-1.1

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

Наиболее сильными сторонами веб-приложения, которые помогают ему воспользоваться имеющимися возможностями и защититься от угроз, являются «Возможность повторного использования кода» (36.45) и «Интуитивно понятный интерфейс» (22.24).

Наиболее важными возможностями веб-приложения, воспользоваться которыми можно при помощи сильных сторон являются «Добавление нового функционала» (45.99) и «Внедрение или обновление библиотеки» (37).

Самой слабой стороной является «Зависимость в специалистах знающих фреймворк Angular 5» (-37.65).

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

Выводы по разделу. В данном разделе был проведен SWOT-анализ реализованного веб-приложения, в котором были проанализирована сильные стороны, слабые стороны, возможности и угрозы веб-приложения. Была написана инструкция для пользователей, которые будут пользоваться данным веб-приложением.



ЗАКЛЮЧЕНИЕ

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

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

Цель интегрировать систему Аргус в реактивное одностраничное веб-приложение, было полностью достигнута.

Задачи, поставленные перед реализацией проекта, были выполнены.

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



СПИСОК ЛИТЕРАТУРЫ

[1] К. Шасанкар, Zend Framework 2.0. Разработка веб-приложений, СПб.: Питер, 2014.

[2] J. Kremer, «AngularJS,» 14 Сентябрь 2016. [В Интернете]. Available: https://blog.angularjs.org/2016/09/angular2-final.html. [Дата обращения: 16 Мая 2018].

[3] «Документация по продукту Visual Studio Code,» Microsoft, 29 Апреля 2015. [В Интернете]. Available: https://code.visualstudio.com/docs. [Дата обращения: 17 Мая 2018].

[4] «Автоматизированная Система «Аргус»,» Федеральная служба по ветеринарному и фитосанитарному надзору (Россельхознадзор), 2007. [В Интернете]. Available: http://www.fsvps.ru/fsvps/argus. [Дата обращения: 17 Мая 2018].

[5] meritt, «Термины Гита и Гитхаба,» 23 Апреля 2016. [В Интернете]. Available: https://github.com/web-standards-ru/dictionary/issues/234. [Дата обращения: 17 Мая 2018].

[6] «Документация по библиотеке ag-grid,» ag-Grid Ltd., 2015. [В Интернете]. Available: https://www.ag-grid.com/documentation-main/documentation.php. [Дата обращения: 17 Мая 2018].

[7] «The internationalization (i18n) library for Angular,» NGX-Translate, 2016. [В Интернете]. Available: http://www.ngx-translate.com. [Дата обращения: 17 Мая 2018].

[8] «PDF Viewer Component for Angular 5+,» VadimDez, Июня 21 2016. [В Интернете]. Available: https://github.com/VadimDez/ng2-pdf-viewer. [Дата обращения: 17 05 2018].

[9] T. Burleson, «Angular Flex-Layout,» 14 Декабрь 2016. [В Интернете]. Available: https://github.com/angular/flex-layout. [Дата обращения: 17 Мая 2018].

[10] «Angular Material,» Google, 2010. [В Интернете]. Available: https://material.angular.io. [Дата обращения: 17 Мая 2018].

[11] «Документация по Webpack,» 2015. [В Интернете]. Available: http://dev-city.me/webpack-osnovnye-ponyatiya. [Дата обращения: 17 Мая 2018].



Приложение А

Схема базы данных

Рисунок А.1 Схема Базы данных

Размещено на Allbest.ru

...