Show/Hide Toolbars

Справочник по интерфейсу администратора



Индикатор прогресса

Ссылки Назад Вверх Вперед E-mail

Индикатор прогресса (progress bar) позволяет визуально отобразить текущее состояние проекта или задачи (процент выполнения, процент освоенного бюджета и т.п.). Индикатор прогресса можно реализовать в блоке Smart Html.

На скриншоте ниже индикатор прогресса отображается в цветовой схеме "светофор".

portal_block_progress_bar_1

Индикаторы прогресса для задач.

Данные

Данные для блока отбираются по одной категории "Текущие задачи" с ID=111. Выполненная часть рассчитывается как текущий процент от времени между началом работы над задачей и сроком выполнения задачи.

select t.TaskID,
 t.TaskText,
 CAST((DATEDIFF(dd, t.TaskStartTime, GETDATE()) * 100 / DATEDIFF(dd, t.TaskStartTime, t.OrderedTime)) as int) TaskReady,
 (100 - CAST((DATEDIFF(dd, t.TaskStartTime, GETDATE()) * 100 / DATEDIFF(dd, t.TaskStartTime, t.OrderedTime)) as int)) TaskNotReady,
 case when StateID = 1 then 1 else 0 end IsNew
from TasksInSubcat111Denormalized t
where t.IsClosed = 0 and t.OrderedTime is not null and t.TaskStartTime is not null

Шаблон

В шаблоне блока Smart Html настраиваются стили и макет.

Слева от текста задачи выводится иконка, отображающая статус задачи: новая или не новая (выполняется). Справа от текста задачи отображается иконка, по клику на которую задача открывается в новой вкладке. Для иконок используется шрифт font awesome, который подключается к порталу.

Индикатор прогресса выводится под строкой с задачей.

<style type="text/css">
   .projects-el{margin-bottom:5px;}
   .projects-content-lt {float:left;}
   .projects-content-rt {float:right;}
   .projects-progress-bar{height:2px;background: linear-gradient(to right, #f70f0f, #ffef14,#5cce39);}
   .projects-progress-bar .progress-tail{float:right;height:2px;color:#fff;text-align:center;background:#f1f1f1;}
   .projects-btn {color:#a6ce39;}
   .projects-btn:hover {text-decoration: none;color: #006c43;}
   .fa.new{color:#ffaa14;}    
   .fa.proc{color:#a6ce39;}  
</style>
<div class="projects-list">
   {{#smart14956}}
  <div class="projects-el">
      <div class="projects-content">
          <div class="projects-content-lt">
                   {{#isNew }} <i><i class="fa fa-pause-circle new" title="Новая"></i></i> {{/isNew }}
                   {{^isNew }} <i class="fa fa-play-circle proc" title="Выполняется"></i> {{/isNew }}
                   {{taskText}} &nbsp
          </div>
          <div class="projects-content-rt">
                  <a href="/MainTaskForm.aspx?TaskID={{taskID}}" target="_blank" class="projects-btn">
                  <i class="fa fa-external-link" title="Открыть в новом окне"></i>
                  </a>
          </div>
      </div>
      <div class="clearfix"></div>
      <div class="projects-progress-bar">
          <div style="width:{{taskNotReady}}%;" class="progress-tail"></div>
      </div>
  </div>
   {{/smart14956}}
</div>

 

Полезные ссылки