Boa tarde,
Existe alguma forma simples de fazer um fluxo de processo no Scriptcase? Seria os vários estágios sequenciais de um processo que represente a andamento do pedido. Os processos deveriam ir ficando verde de acordo com andamento do pedido.
Boa tarde,
Existe alguma forma simples de fazer um fluxo de processo no Scriptcase? Seria os vários estágios sequenciais de um processo que represente a andamento do pedido. Os processos deveriam ir ficando verde de acordo com andamento do pedido.
<html>
<head>
<meta charset="utf-8">
<title>Teste</title>
<link hrefd="css/main.css" rel="stylesheet">
</head>
<body>
<style>
html, body {
height: 100%;
}
.container {
display: flex;
}
.board {
display: flex;
align-items: center;
}
.container_text {
display: flex;
justify-content: left;
}
.espaco_texto {
width: 150px;
height: 0px;
background: #000;
}
.circle {
border-radius:50%;
border:3px solid #000;
display: flex;
justify-content: center;
align-items: center;
}
.botao {
border:3px solid #000;
display: flex;
justify-content: center;
align-items: center;
}
.outer_amarelo {
border-radius: 50%;
height: 40px;
width: 40px;
border: 3px solid #BA9500;
background-color: rgba(10,23,55,0.0);
}
.outer_verde {
border-radius: 50%;
height: 40px;
width: 40px;
border: 3px solid #006633;
background-color: rgba(10,23,55,0.0);
}
.linha_verde {
width: 60px;
height: 3px;
background: #006633;
}
.linha_amarela {
width: 60px;
height: 3px;
background: #ffcc00;
}
.linha_cinza {
width: 60px;
height: 3px;
background: #f0f0f0;
}
.linha_producao {
width: 200px;
height: 3px;
background: #006633;
}
.center_amarelo {
border-radius: 50%;
height: 25px;
width: 25px;
border: 3px solid #d3a900;
background-color: #FFCC00;
box-shadow: inset 10px -10px 10px #BA9500, inset 3px 3px 5px #FFCC00;
}
.center_verde {
border-radius: 50%;
height: 25px;
width: 25px;
border: 3px solid #006633;
background-color: #009424;
box-shadow: inset 10px -10px 10px #070, inset 3px 3px 5px #00f205;
}
.center_botao_verde {
height: 20px;
width: 70px;
border: 2px solid #006633;
background-color: #009424;
box-shadow: inset 10px -10px 10px #070, inset 3px 3px 5px #00f205;
}
.center_botao_amarelo {
height: 20px;
width: 70px;
border: 2px solid #006633;
background-color: #FFCC00;
box-shadow: inset 10px -10px 10px #BA9500, inset 3px 3px 5px #FFCC00;
}
.p1 {
font-family: verdana;
font-size: 11px;
text-align: center;
font-weight: bold;
color: red;
}
.p2 {
font-family: verdana;
font-size: 9px;
text-align: center;
color: grey;
font-weight: bold;
}
.p3 {
font-family: verdana;
font-size: 9px;
text-align: center;
color: white;
font-weight: bold;
}
.espaco_circulo {
width: 114px;
height: 0px;
background: #000;
}
</style>
<table align="center_verde" border="0px" width="70%">
<tr>
<td>
<div class="container_text">
<div style="width:30px; height:1px; background: #fff;"></div>
<p class="p1">Pedido<br>Realizado</p>
<div style="width:25px; height:1px; background: #fff;">
</div>
<p class="p1">Ord. Produção<br>Criada</p>
<div style="width:35px; height:10px; background: #fff;">
</div>
<p class="p1">Em<br>Produção</p>
<div style="width:190px; height:10px; background: #fff;">
</div>
<p class="p1">Elétrica e<br>Testes</p>
<div style="width:50px; height:1px; background: #fff;">
</div>
<p class="p1">Pintura</p>
<div style="width:45px; height:1px; background: #fff;">
</div>
<p class="p1">Embalagem</p>
<div style="width:35px; height:1px; background: #fff;">
</div>
<p class="p1">Pronto para<br>Entrega</p>
</div>
</td>
</tr>
<tr><td>
<div class="container">
<div style="width:30px; height:1px; background: #fff;"></div>
<div class="board">
<div class="circle outer_verde">
<div class="circle center_verde"></div>
</div>
<div class="linha_verde"></div>
</div>
<div class="container">
<div class="board">
<div class="circle outer_verde">
<div class="circle center_verde"></div>
</div>
<div class="linha_verde"></div>
</div>
<div class="container">
<div class="board">
<div class="circle outer_verde">
<div class="circle center_verde"></div>
</div>
<div class="linha_producao"></div>
</div>
</div>
<div class="container">
<div class="board">
<div class="circle outer_verde">
<div class="circle center_verde"></div>
</div>
<div class="linha_verde"></div>
</div>
</div>
<div class="container">
<div class="board">
<div class="circle outer_verde">
<div class="circle center_verde"></div>
</div>
<div class="linha_verde"></div>
</div>
</div>
<div class="container">
<div class="board">
<div class="circle outer_verde">
<div class="circle center_verde"></div>
</div>
<div class="linha_verde"></div>
</div>
</div>
<div class="container">
<div class="board">
<div class="circle outer_amarelo">
<div class="circle center_amarelo"></div>
</div>
</div>
</div>
</div>
</td></tr>
<tr>
<td>
<div class="container_text">
<div style="width:10px; height:1px; background: #fff;">
</div>
<p class="p2">Data: 02/06/2017<br>Hora: 10:55</p>
<div style="width:20px; height:1px; background: #fff;">
</div>
<p class="p2">Data: 02/06/2017<br>Hora: 14:35</p>
<div style="width:16px; height:1px; background: #fff;">
</div>
<p class="p2">Data: 04/06/2017<br>Hora: 19:00</p>
<div style="width:150px; height:1px; background: #fff;">
</div>
<p class="p2">Data: 21/07/2017<br>Hora: 14:35</p>
<div style="width:20px; height:1px; background: #fff;">
</div>
<p class="p2">Data: 24/07/2017<br>Hora: 16:22</p>
<div style="width:20px; height:1px; background: #fff;">
</div>
<p class="p2">Data: 02/06/2017<br>Hora: 14:35</p>
<div style="width:24px; height:1px; background: #fff;">
</div>
<p class="p2">Previsão<br>05/08/2017</p>
</div>
</td>
</tr>
<tr>
<td>
<div class="container">
<div style="width:15px; height:1px; background: #fff;"></div>
<div class="board">
<div class="botao center_botao_verde"><div class="p3">Completo</div></div>
<div style="width:35px; height:1px; background: #fff;"></div>
</div>
<div class="container">
<div class="board">
<div class="botao center_botao_verde"><div class="p3">Completo</div></div>
<div style="width:35px; height:1px; background: #fff;"></div>
</div>
<div class="container">
<div class="board">
<div class="botao center_botao_verde"><div class="p3">Completo</div></div>
<div style="width:165px; height:1px; background: #fff;"></div>
</div>
<div class="container">
<div class="board">
<div class="botao center_botao_verde"><div class="p3">Completo</div></div>
<div style="width:35px; height:1px; background: #fff;"></div>
</div>
<div class="container">
<div class="board">
<div class="botao center_botao_verde"><div class="p3">Completo</div></div>
<div style="width:35px; height:1px; background: #fff;"></div>
</div>
<div class="container">
<div class="board">
<div class="botao center_botao_verde"><div class="p3">Completo</div></div>
<div style="width:35px; height:1px; background: #fff;"></div>
</div>
<div class="container">
<div class="board">
<div class="botao center_botao_amarelo"><div class="p3">Aguardando</div></div>
<div style="width:35px; height:1px; background: #fff;"></div>
</div>
</div>
</td>
</tr>
</table>
</body>
</html>
Muito obrigado. Irei testar.