Início > Artigos > Componente Agendamento (Linha do Tempo)

Componente Agendamento (Linha do Tempo)

Disponibilizamos o componente "Linha do Tempo", que permite exibir apontamentos de tempos para visualizar de forma homogênea , por diversas  opções  de visão como mês, dia, hora, semana, Gantt.

Na imagem abaixo, vemos o tempo em horas do dia atual que levou desde o início e fim de ligação das máquinas da linha de uma determinada empresa de produção, de acordo com o seu grupo: Baixo Rendimento, Ociosa ou Operando.

 

Para utilizar o componente, siga os passos a seguir:

1 - Criar uma nova aba no sistema.

2 - Arrastar do Navbar o item "Linha do Tempo" para a aba criada:

3 - A partir deste momento, é necessário vincular o select (query) que será utilizado para exibir os dados desejados. Clicar no menu Arquivo e posteriormente no botão "Datasource" conforme imagem abaixo:

4 - O select necessário deve ter uma sintaxe semelhante a imagem abaixo. Deve conter os campos DataInicial, DataFinal, Resource, Apontamento, Imagem, Cor e Corlabel.

DataInicial: Deve ser um campo do tipo Datetime ou semelhante, de acordo com a sintaxe do banco de dados utilizado.

DataFinal: Deve ser um campo do tipo Datetime ou semelhante, de acordo com a sintaxe do banco de dados utilizado.

Resource: Resource é o campo que irá agrupar os dados, por exemplo, para ver o tempo levado por vendedor em cada Estado do país, o campo Estado (UF) pode ser o Resource.

Apontamento: É o campo no qual deve ser feito o apontamento, por exemplo: linha a, linha b, ou produto a, produto b, ou ainda vendedor a, vendedor b, etc.

Imagem: Esse campo, caso não tenha imagem , pode estar na query (obrigatoriamente) sem a imagem, somente do seguinte modo: '' as imagem. 

Cor: Esse campo é o responsável por exibir a cor que terá de fundo para o campo Resource. É um campo opcional, no qual caso não seja utilizado, pode ser informado da seguinte forma no select: ''as cor. 

Corlabel: Esse campo é o responsável por exibir a cor do apontamento (campo apontamento). É um campo opcional, no qual caso não seja utilizado, pode ser informado da seguinte forma no select: ''as corlabel. 

Obs. Caso deseje exibir a imagem, deve-se trazer na query (select) o nome da imagem, e a imagem deve conter dentro da pasta "images" que se encontra na raiz do sistema.
 

Os nomes DataInicial, DataFinal, Resource, Apontamento, Imagem, Cor, Corlabel devem sempre possuir este nome, ou seja, caso o select retornado contenha outros nomes, deve ser renomeado para os nomes informados utilizando um "AS" por exemplo.

Exemplo de Query:

Select             
Inicio as DataInicial,          
Fim as DataFinal,         
nome as resource,             
apontamento,             
cor, 
corlabel,    
'' as imagem 
from 
  Agendamento, recurso       
where 
  agendamento.idrecurso = recurso.id  

order by nome              

O exemplo acima nos traz o seguinte resultado:

 

5 - Após colocar a query conforme imagem abaixo, clicar no botão Salvar e Sair, e clicar em "Atualizar" ou apertar o botão F5 do teclado para atualizar a tela.

 

6 - O resultado deverá aparecer na tela, com os apontamentos selecionados sendo exibidos na tela. Caso não seja mostrado, verifique se a data correspondente que esta sendo exibida é a mesma do apontamento, caso contrário, navegue até a(s) data(s)  que foram selecionados. Após o passo acima, o resultado obtido no caso do exemplo, é o mostrado na imagem abaixo:

No exemplo acima é exibido os apontamentos por horários, com 3 resources, cada um de uma cor (definidos pelo campo cor) e alguns apontamentos com cores (definidos pelo campo corlabel).

7 - Para verificar qual o melhor modo de visualização, na barra superior, clicar sobre o item "Calendário" e "Visualização", conforme imagens abaixo, onde pode ser definido zoom, agrupamentos por Recurso ou Data, diversos tipo de visões, espaçamento dos intervalos exibidos, dentre outras opções:

Aba Calendário:

Aba Visualização: