Painel Tabela de Conectores

Neste painel, faz-se a customização da Lista de Conectores presente no Informações da página, no qual tem a função de listar os Conectores do contrato no formato de uma tabela.

Além disso, este painel permite que os Conectores do contrato sejam agrupados por determinadas características comuns entre eles, um conceito chamado de Agregação por colunas.

O recurso se encontra nas opções de painéis de Telas denominado como Tabela de Conectores. Para mais detalhes de configuração de telas, acesse Criando uma nova Tela (dashboard) para um Conector.

Propriedades Especificas

É possível substituir a tabela de Conectores padrão do Informações da página pelo painel customizado.

Para mais informações, acesse: Substituindo a tabela de Conectores padrão do Dashboard de Contrato.

Lista de Itens

Seleciona a origem dos itens a serem apresentados neste painel:

Mostrar todos: Exibe todos os itens mesmo com o conector de referência configurado;
Conector selecionado: Exibe os itens do conector de referência configurado;
Instância de modelo: Exibe os itens da instância de modelo do conector de referência configurado (se o modelo utilizar diversos dispositivos tera um seletor para escolher qual dispositivo da instância do modelo deseja exibir os itens).

As opções de colunas(padrão) são as seguintes:

Conector: indica o nome do conector;
S/N: indica o Número de Série cadastrado para o conector;
Localização indica o “label” informado para a localização do conector;
Área de processo: indica o nome da Área de Processo do Conector;

O botão Adicionar coluna permite adicionar colunas customizáveis na tabela.

Nota

Para mais informações, acesse: Painel Tabela de Dispositivos que possuem as mesmas configurações de estilo e conteúdo da tabela.

Substituindo a tabela de Conectores padrão do Dashboard de Contrato

É possível substituir a tabela de Conectores padrão das Informações da página da Home pelo painel customizado:

../../../_images/connector_table_custom.png

Para isso, basta clicar na opção Definir como padrão presente no topo do editor de propriedades do painel. Está opção só estará disponível caso a tela já esteja publicada.

Já para restaurar o painel original(padrão), clique no botão de restaurar (botão ao lado do texto “Este painel é o padrão”).

Atenção

As modificações só estarão disponíveis para Telas já publicadas.

Exibir Medições Importantes dos Conectores dos Dados com o Mesmo Nome

O Portal de Telemetria permite apresentar valores de Dados diretamente nas colunas da Lista de Conectores, utilizando os controles de exibição do Painel Sinótico dentro das células da tabela.

Nota

Para mais informações, acesse: Propriedades do Conteúdo da Coluna (Tipo Controle).

Esse recurso permite criar visões centralizadas para acompanhamento operacional, combinando as informações já disponíveis na Lista de Conectores, como Nome, Área de Processo e Status de Conexão e de Alarmes, com os principais valores de medição dos Conectores.

Dessa forma, é possível acompanhar lado a lado e em tempo real as principais medições de diversos Conectores, sem a necessidade de acessar individualmente os respectivos dashboards.

Localização dos Dados

Para localizar os valores que devem ser apresentados em cada Conector, o Portal utiliza o nome do Dado definido na configuração da coluna.

Assim, qualquer Conector, seja de uma instância de Modelo ou não, que possua um Dado com o mesmo nome terá seu valor apresentado na respectiva coluna. A comparação do nome é realizada de forma independente de letras maiúsculas e minúsculas (case insensitive).

Por exemplo, ao configurar uma coluna para apresentar o Dado Temperatura, o Portal localizará esse Dado em cada Conector que possua um Dado com esse mesmo nome e apresentará seu respectivo valor.

Atenção

A configuração da coluna é realizada apenas uma vez. A partir dela, o Portal identifica dinamicamente os Conectores que possuem um Dado com o nome configurado e apresenta seus valores automaticamente.

Dessa forma, novos Conectores que possuam um Dado com esse mesmo nome também poderão passar a ser contemplados pela tabela, sem a necessidade de alterar novamente sua configuração.

../../../_images/connector_table_with_datas_main.png

Utilize o recurso com moderação

Embora seja possível adicionar diversos Dados às colunas da tabela, recomenda-se utilizar esse recurso de forma criteriosa, priorizando apenas as informações realmente importantes para o acompanhamento da operação.

A inclusão excessiva de Dados pode tornar a tabela visualmente carregada, dificultar a identificação das informações relevantes, reduzir a eficiência da consulta ou mesmo causar lentidões nas cargas/atualizações.

O objetivo do recurso é facilitar o acompanhamento das principais medições, e não substituir os dashboards e Painéis Sinóticos destinados a análises mais detalhadas.

Ao customizar uma tabela, procure priorizar:

Dados essenciais para o acompanhamento operacional;
Indicadores que precisam ser consultados com frequência;
Informações que permitam identificar rapidamente situações que exigem atenção;
Uma quantidade de colunas que mantenha a tabela simples e fácil de interpretar.

Atenção

Evite adicionar Dados apenas porque estão disponíveis. Prefira utilizar a tabela para apresentar um conjunto reduzido de informações relevantes e utilize os dashboards e Painéis Sinóticos quando for necessário acompanhar um número maior de medições ou realizar uma análise mais detalhada.

Lembre-se também de que a identificação dos Dados é dinâmica. Portanto, a criação de novos Conectores com Dados que possuam os mesmos nomes configurados na tabela pode fazer com que novos valores passem a ser apresentados automaticamente.

Painel Tabela de Conectores Baseado em um Modelo com Controles (Dados)

É possível criar um painel de Tabela de Conectores baseado em um modelo, utilizando os controles de exibição de Dados para personalizar a visualização dos Conectores de instâncias exibindo os principais indicadores, facilitando a análise de Dados em conjunto. Essa tela pode ser utilizada na Aba da Homepage, associada ao conector de modelo ou no evento de abertura de tela.

Nota

Acesse Conectores de Modelo e Conectores de Instância para entender o que são Conectores cadastrados como Modelo ou Instância.

Por exemplo, utilizar o dado local para exibir uma imagem dinâmica (logotipo) e lista de imagens para os estados de conexão e alarme do conector em apenas uma tabela:

../../../_images/connector_table_model_based_with_data_display_controls_images.png

Atenção

A configuração dos controles é realizada apenas uma vez no recurso baseado em Modelo. Os Conectores de Instância são contemplados dinamicamente, permitindo que novos Conectores sejam adicionados e passem a exibir os mesmos Dados e controles automaticamente, sem a necessidade de configurar cada Conector individualmente.

Caso de uso

Um caso de uso do recurso pode ser observado abaixo no contexto de oxigênio nos hospitais:

Coluna	Conteúdo
ID	Índice de exibição inicial das linhas da tabela unido com o indicador de edição do Conector.
Conector	Nome do Conector cadastrado unido com o indicador de conexão.
Alarmado	Exibe a existência de algum alarme ativo no Conector (Alarmado ou Normal) com o ícone indicador.
Modelo	Valor do Campo Customizado nos conectores de instâncias.
UF	Estado cadastrado no endereço do Conector.
Cidade	Cidade cadastrada no endereço do Conector.
Área de Processo	Definição de visualização do Conector.
Pureza	Porcentagem de pureza do oxigênio.
Linha	Valor da pressão da linha de oxigênio (Bar).
Nível	Porcentagem Total da quantidade de gás nos bancos em relação a quantidade máxima.
Tela	Exibe a tela configurada para o modelo carregando os dados da instância.

Neste caso, a ideia é mostrar a maior quantidade de Conectores no monitor, por isso a tabela foi dividida em 2 colunas. Segue alguns exemplos abaixo:

Exemplo Básico (coluna dividida pela quantidade de itens):

../../../_images/connector_table_model_based_with_data_display_controls_basic.png

Exemplo Estilizado (coluna dividida pelos itens alarmados):

../../../_images/connector_table_model_based_with_data_display_controls_stylized.png

Exemplo com Formatação Condicional (coluna dividida pelo campo customizado do modelo da máquina X ou Y):

../../../_images/connector_table_model_based_with_data_display_controls_conditional.png

Exemplo com Animação Pulsante (coluna dividida pelos estados):

../../../_images/connector_table_model_based_with_data_display_controls_animation.gif

Abaixo segue o passo a passo para criação do exemplo básico, e depois as customizações para os outros exemplos:

Exemplo Básico

Criando a Tela

Para este exemplo, utilizaremos a tela com conector de modelo associado ao conector de referência com o layout de dois paineis alinhados e um painel largo, contendo:

Painel Imagem (topo esquerdo);
Painel Texto (topo direito);
Painel Tabela de Conectores (conteúdo).

Painel Imagem

Selecione a imagem que será utilizada e nas propriedades do painel, configure a altura mínima e máxima para 100px.

Painel Texto

Em propriedades específicas em edição avançada (utilizando código HTML). Adicione o código abaixo simplificado para adicionar um título grande em negrito com um emoji de pulmão:

<h1>
  <strong>🫁 LINHA DE OXIGÊNIO</strong>
</h1>

Painel Tabela de Conectores

Propriedades Gerais

Deixe a altura mínima e máxima como automática para que a tabela ocupe o espaço necessário para exibir os itens e as barras de rolagem na vertical com automático para aparecer quando necessário (por exemplo quando a quantidade de itens for maior que a altura do Painel, e quando o painel do lado direito tiver mais itens do que o painel esquerdo que é a referência do tamanho automático).

Lista de itens

Em propriedades específicas, na seção origem, selecione Instâncias do modelo, dessa maneira a tabela exibirá todos os Conectores Baseados ao conector de modelo associado na tela como conector de referência.

Habilite a Pesquisa por texto para poder pesquisar algum item.

Desabilitar a opção Ordenar por Alarmes para utilizar ordenação aninhada (por exemplo, primeiro pelo Estado e depois pela Cidade, configurado nas colunas).

Estilo da tabela

Configure a altura da linha com o valor 0,75 para ocupar menos espaço e caber mais itens na visualização do monitor.

Exclusão de Colunas não utilizadas

Na seção Colunas: Exclua as colunas Localização e S/N.

Estilo da coluna

Em cada coluna, na seção Estilo da coluna, desabilite a opção quebra de linha para que o redimensionamento na tabela não permita quebra de linha no conteúdo pois assim apresenta mais itens no monitor.

Coluna Conector

Na seção Indicadores de estado, exclua os ícones de Conector Em Alarme, Conector Habilitado e Conector Editor.

Coluna Índice

Clonamos a coluna Área de processo, alteramos o título da coluna para Índice.

Na seção Indicadores de estado, adicionamos o ícone de Conector Editor na posição a direita.

Na expressão utilizamos o atributo índice da linha da coluna (ou seja, não segue a ordem de criação (id) e sim da exibição inicial):

item.index + 1 | %03d

Coluna Alarmado

Clonamos a coluna Área de processo, alteramos o título da coluna para Alarmado.

Na seção Indicadores de estado, adicionamos o ícone de Conector em Alarme na posição a esquerda.

Na expressão utilizamos o atributo existe alarme ativo pra retornar sim ou não:

${item.has_active_alarms ? 'Sim' : 'Não'}

Coluna Modelo (Campo Customizado)

Clonamos a coluna Área de processo, alteramos o título da coluna para Modelo.

Na expressão utilizamos o atributo do campo customizado do Conector:

${item.user_data.extended_properties.model}

Coluna Estado (UF)

Clonamos a coluna Área de processo, alteramos o título da coluna para UF.

Na expressão utilizamos o atributo do endereço do Conector:

${item.location_address.state}

Coluna Cidade

Clonamos a coluna Área de processo, alteramos o título da coluna para Cidade.

Na expressão utilizamos o atributo do endereço do Conector:

${item.location_address.city}

Ordenação Inicial das Colunas

Iremos alterar a ordenação padrão para que a tabela inicie ordenada pelo Estado e Cidade.

Para isso nas configurações desses colunas, abaixo da opção de agrupamento, adicionamos a ordenação ascendente () com a prioridade 1 para Estado e prioridade 2 para Cidade.

Nota

Ordenação e sua prioridade são indicadas na frente do nome da coluna nas configurações.

Coluna Pureza

Clonamos a coluna Área de processo, alteramos o título da coluna para Pureza.

Definimos o tipo da informação como Controle, ativando o ícone . O tipo do Controle vai ser TagDisplay.

Na seção Dado, selecionamos o Conector modelo do Hospital e o Dado Pureza.

Na seção Informação, adicionamos uma dica para exibir no tooltip ao passar o mouse sobre essa coluna: “Concentração (%): Nível de pureza do oxigênio fornecido.”

Coluna Linha

Clonamos a coluna Pureza, alteramos o título da coluna para Linha.

Na seção Dado, alteramos o Dado para Linha.

Na seção Informação, alteramos a dica: “Pressão (Bar) atual da rede de oxigênio.”

Coluna Nível

Clonamos a coluna Linha, alteramos o título da coluna para Nível.

Na seção Dado, alteramos o Dado para Nível.

Na seção Informação, alteramos a dica: “Percentual total de gás disponível em relação a capacidade máxima.”

Coluna Tela

Criamos uma nova coluna pelo botão: Adicionar coluna. Alteramos o título da coluna para Tela.

Definimos o tipo da informação como Controle, ativando o ícone . O tipo do Controle vai ser StaticLabel com aparência definida sem borda.

Na seção propriedades específicas, em edição avançada (utilizando código HTML). Adicione o código abaixo para criar um ícone de dashboard:

<span class="fa fa-tachometer" style="font-size: inherit;"></span>

Atenção

Ao utilizar o seletor de ícones, precisa tirar a tag <p></p> para que fique centralizado verticalmente na célula da tabela.

Na seção evento, adicionamos o evento de clique com a ação de abertura da tela Sinótico Hospitais (detalhe criada com os dados de modelo), na opção de selecionar o Conector para a abertura da tela, deixe o padrão Manter o selecionado, pois assim o ítem que ativar a ação, vai alterar os Dados do Modelo.

Dividir em duas Tabelas

Adicione uma coluna ao lado da tabela no layout, na aba layout, na seção Painéis na tela, arraste o painel tabela de Conectores para o layout vazio na tela, criando uma cópia.

Primeira Tabela

Na seção lista de itens, adicione o limite de 5.

Segunda Tabela

Na seção lista de itens, adicione o offset de 5.

Exemplo com Estilização

Vamos utilizar o exemplo básico.

Estilo da tabela

Habilitamos as bordas, modificamos as cores da tabela listrada:

Cor das linhas ímpares: #E4E4E4
Cor das linhas pares: #CACACA

Título das colunas

Na cor de fundo, utilizo o conta-gotas () para pegar a cor do texto padrão da tabela: #31708F e na cor de texto, utilizo a cor branca.

Coluna Conector e UF

Na seção estilo da coluna, deixo o texto em negrito para dar destaque.

Coluna Pureza, Linha e Nível

Na seção aparência, adicionamos a cor branca para o texto, cor preta para o fundo, nenhum tipo de preenchimento da borda, arredondamos a borda com 10px. Na seção texto, deixo o texto em negrito para dar destaque com o tamanho de 11pt.

Dividir em duas Tabelas

Adicione uma coluna ao lado da tabela no layout, na aba layout, na seção Painéis na tela, arraste o painel tabela de Conectores para o layout vazio na tela, criando uma cópia.

Primeira Tabela

Na seção lista de itens, removo o limite e adiciono o filtro para exibir os itens alarmados:

has_active_alarms == true

Segunda Tabela

Na seção lista de itens, removo o offset e adiciono o filtro para exibir os itens que não possuem alarmes ativos:

has_active_alarms == false

Exemplo com Formatação Condicional

Vamos utilizar o exemplo anterior.

Coluna Pureza

Na seção de eventos, adicionamos o evento ao alterar valor, selecionamos o Conector modelo do Hospital e o Dado Pureza.

Condições para disparo do grupo estilo da ação de cor:

>= 98: azul (#2E81FF);
>= 93: verde (#134E07);
>= 90: amarelo (#FFE623);
< 90: vermelho (#FF1900).

Coluna Linha

Na seção de eventos, adicionamos o evento ao alterar valor, selecionamos o Conector modelo do Hospital e o Dado Linha.

Condições para disparo do grupo estilo da ação de cor:

$a >= 4.4 && $a <= 4.7: azul (#2E81FF);
($a > 4.2 && $a < 4.4) || ($a > 4.7 && $a < 4.8): verde (#134E07);
($a >= 4 && $a <= 4.2) || ($a >= 4.8 && $a <= 5): amarelo (#FFE623);
$a < 4 || $a > 5: vermelho (#FF1900).

Coluna Nível

Na seção de eventos, adicionamos o evento ao alterar valor, selecionamos o Conector modelo do Hospital e o Dado Nível.

Condições para disparo do grupo estilo da ação de cor:

> 85: azul (#2E81FF);
>= 70: verde (#134E07);
>= 40: amarelo (#FFE623);
< 40: vermelho (#FF1900).

Dividir em duas Tabelas

Na aba layout, na seção Painéis na tela, arraste o painel tabela de Conectores para o layout da direita, criando uma cópia.

Primeira Tabela

Na seção lista de itens, troco o filtro para exibir os itens com modelo da máquina X:

user_data.extended_properties.model == 'X'

Segunda Tabela

Na seção lista de itens, troco o filtro para exibir os itens com modelo da máquina Y:

user_data.extended_properties.model == 'Y'

Exemplo com Animação

Vamos utilizar o exemplo anterior.

Coluna Pureza, Linha e Nível

Em cada coluna, na seção de eventos, dentro das condições para disparo do estilo de cor vermelha, adicionamos a ação de animação que fica dentro do grupo de estilo:

Tipo da animação: Pulsar (pulse);
Repetição: Infinito;
Atraso: Padrão;
Velocidade: Muito Rápido.

Já para a condição de cor amarela, adicionamos a mesma ação de animação, porém com a velocidade definida como Rápido.

Dividir em duas Tabelas

Na aba layout, na seção Painéis na tela, arraste o painel tabela de Conectores para o layout da direita, criando uma cópia.

Primeira Tabela

Na seção lista de itens, troco o filtro para exibir os itens localizados no estado de São Paulo:

location_address.state == 'SP'

Segunda Tabela

Na seção lista de itens, troco o filtro para exibir os itens que não estão localizados no estado de São Paulo:

location_address.state != 'SP'