FIx Warmers Under-the-hood (TODO Details modal)
This commit is contained in:
Thermo_SIM
@@ -611,7 +611,8 @@ namespace Thermo.Active.Config
|
||||
{
|
||||
Canale = Convert.ToInt16(y.Attribute("canale").Value),
|
||||
Riga = Convert.ToInt16(y.Attribute("riga").Value),
|
||||
Tipo = Convert.ToInt16(y.Attribute("tipo").Value)
|
||||
Tipo = Convert.ToInt16(y.Attribute("tipo").Value),
|
||||
IdGruppo = Convert.ToInt16(y.Attribute("idGruppo").Value),
|
||||
}
|
||||
)
|
||||
.ToList()
|
||||
@@ -719,7 +720,8 @@ namespace Thermo.Active.Config
|
||||
Column = numCol,
|
||||
IdChannel = resistenza.Canale,
|
||||
Dimension = riferimento.Dimensione,
|
||||
IdReflector = riflettore.Tipo
|
||||
IdReflector = riflettore.Tipo,
|
||||
IdGroup = resistenza.IdGruppo,
|
||||
}); ;
|
||||
maxRow = resistenza.Riga > maxRow ? resistenza.Riga : maxRow;
|
||||
}
|
||||
|
||||
@@ -45,7 +45,8 @@ namespace Thermo.Active.Model.ConfigModels
|
||||
|
||||
public int Canale;
|
||||
public int Riga;
|
||||
public int Tipo;
|
||||
public int Tipo;
|
||||
public int IdGruppo;
|
||||
|
||||
#endregion Public Fields
|
||||
}
|
||||
@@ -59,6 +60,7 @@ namespace Thermo.Active.Model.ConfigModels
|
||||
public int Id { get; set; } = 0;
|
||||
public int IdChannel { get; set; } = 0;
|
||||
public int IdReflector { get; set; } = 0;
|
||||
public int IdGroup { get; set; } = 0;
|
||||
public int Row { get; set; } = 0;
|
||||
|
||||
#endregion Public Fields
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
|
||||
.modal.processo-info {
|
||||
width: 1808px;
|
||||
height: calc(~'100% - 104px');
|
||||
height: calc(~'100% - 115px');
|
||||
margin: 104px auto 0 auto;
|
||||
box-shadow: none;
|
||||
position: relative;
|
||||
|
||||
@@ -5350,7 +5350,7 @@ article .box .body {
|
||||
}
|
||||
.modal.processo-info {
|
||||
width: 1808px;
|
||||
height: calc(100% - 104px);
|
||||
height: calc(100% - 115px);
|
||||
margin: 104px auto 0 auto;
|
||||
box-shadow: none;
|
||||
position: relative;
|
||||
@@ -8067,7 +8067,7 @@ footer .container button.big:before {
|
||||
background: #dddddd;
|
||||
}
|
||||
.alarm-history-container .alarm-history-body .alarm-history-body-left .alarm-history-table tr:nth-child(odd) {
|
||||
background: #FFF;
|
||||
background: #fff;
|
||||
}
|
||||
.alarm-history-container .alarm-history-body .alarm-history-body-left .alarm-history-table th:nth-child(1),
|
||||
.alarm-history-container .alarm-history-body .alarm-history-body-left .alarm-history-table td:nth-child(1) {
|
||||
@@ -8122,14 +8122,14 @@ footer .container button.big:before {
|
||||
}
|
||||
.alarm-history-container .alarm-history-body .alarm-history-body-left .alarm-history-table tbody::-webkit-scrollbar-track {
|
||||
margin: 20px 0px;
|
||||
background-color: #E5E5E5;
|
||||
background-color: #e5e5e5;
|
||||
border-radius: 15px;
|
||||
box-shadow: inset 0 1px 3px 0 #9F9F9F;
|
||||
box-shadow: inset 0 1px 3px 0 #9f9f9f;
|
||||
}
|
||||
.alarm-history-container .alarm-history-body .alarm-history-body-left .alarm-history-table tbody::-webkit-scrollbar-thumb {
|
||||
width: 16px;
|
||||
background: #9F9F9F;
|
||||
border: 4px solid #E5E5E5;
|
||||
background: #9f9f9f;
|
||||
border: 4px solid #e5e5e5;
|
||||
border-radius: 15px;
|
||||
}
|
||||
.alarm-history-container .alarm-history-body .alarm-history-body-left .alarm-history-table tbody tr {
|
||||
@@ -24370,7 +24370,7 @@ body {
|
||||
margin-left: 10px;
|
||||
}
|
||||
body {
|
||||
font-family: 'Work Sans', sans-serif;
|
||||
font-family: "Work Sans", sans-serif;
|
||||
}
|
||||
.t-loading {
|
||||
bottom: 80px;
|
||||
@@ -24427,4 +24427,4 @@ body {
|
||||
font-family: Arial, sans-serif;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
|
||||
+12
@@ -0,0 +1,12 @@
|
||||
.button-details {
|
||||
width: 93px;
|
||||
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4) !important;
|
||||
background-image: linear-gradient(to bottom, #818a8f 0%, #42494e 98%) !important;
|
||||
color: #e8e8e8 !important;
|
||||
}
|
||||
.log-ciclo-automatico-table tbody tr:nth-child(odd) {
|
||||
background-color: #747f85;
|
||||
}
|
||||
.log-ciclo-automatico-table tbody tr:nth-child(even) {
|
||||
background-color: #4e585e;
|
||||
}
|
||||
+4
-13
@@ -2,20 +2,11 @@
|
||||
|
||||
|
||||
.button-details {
|
||||
|
||||
width: 93px;
|
||||
padding: 14px 0px 13px 0px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
|
||||
background-image: linear-gradient(to bottom, #818a8f 0%, #42494e 98%);
|
||||
cursor: pointer;
|
||||
> label {
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
color: @very-light-pink;
|
||||
}
|
||||
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4) !important;
|
||||
background-image: linear-gradient(to bottom, #818a8f 0%, #42494e 98%) !important;
|
||||
color: @very-light-pink !important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
+82
@@ -0,0 +1,82 @@
|
||||
th.riscaldi-set,
|
||||
td.riscaldi-set {
|
||||
width: 10%;
|
||||
max-width: 10%;
|
||||
}
|
||||
th.riscaldi-cell-id,
|
||||
td.riscaldi-cell-id {
|
||||
width: 10%;
|
||||
max-width: 10%;
|
||||
}
|
||||
th.channel-id,
|
||||
td.channel-id {
|
||||
width: 10%;
|
||||
max-width: 10%;
|
||||
}
|
||||
th.board-id,
|
||||
td.board-id {
|
||||
width: 10%;
|
||||
max-width: 10%;
|
||||
}
|
||||
th.output-id,
|
||||
td.output-id {
|
||||
width: 10%;
|
||||
max-width: 10%;
|
||||
}
|
||||
th.reflector-id,
|
||||
td.reflector-id {
|
||||
width: 10%;
|
||||
max-width: 10%;
|
||||
}
|
||||
th.riscaldi-current,
|
||||
td.riscaldi-current {
|
||||
width: 10%;
|
||||
max-width: 10%;
|
||||
}
|
||||
th.riscaldi-status,
|
||||
td.riscaldi-status {
|
||||
width: 20%;
|
||||
max-width: 20%;
|
||||
}
|
||||
th.riscaldi-details,
|
||||
td.riscaldi-details {
|
||||
width: 10%;
|
||||
max-width: 10%;
|
||||
}
|
||||
td > span {
|
||||
padding: 0 10px;
|
||||
}
|
||||
.status-td {
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
.details-td {
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
padding: 0;
|
||||
}
|
||||
.status-buttons {
|
||||
width: 80px;
|
||||
padding: 3px 3px;
|
||||
border-radius: 2px;
|
||||
text-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
|
||||
color: #e8e8e8;
|
||||
text-align: center;
|
||||
}
|
||||
.main-container label {
|
||||
margin: 3px 16px 3px 16px;
|
||||
}
|
||||
.ok-button {
|
||||
background-color: #90c03d;
|
||||
}
|
||||
.broken-button {
|
||||
background-color: #d0021b;
|
||||
}
|
||||
.status-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
+56
-39
@@ -2,28 +2,72 @@
|
||||
|
||||
th,
|
||||
td {
|
||||
&.riscaldi-status {
|
||||
width: 435px;
|
||||
max-width: 435px;
|
||||
padding: 0 0 0 38px;
|
||||
}
|
||||
&.riscaldi-set {
|
||||
width: 378px;
|
||||
max-width: 378px;
|
||||
width: 10%;
|
||||
max-width: 10%;
|
||||
}
|
||||
&.riscaldi-cell-id {
|
||||
width: 254px;
|
||||
max-width: 254px;
|
||||
width: 10%;
|
||||
max-width: 10%;
|
||||
}
|
||||
&.channel-id {
|
||||
width: 10%;
|
||||
max-width: 10%;
|
||||
}
|
||||
&.board-id {
|
||||
width: 10%;
|
||||
max-width: 10%;
|
||||
}
|
||||
&.output-id {
|
||||
width: 10%;
|
||||
max-width: 10%;
|
||||
}
|
||||
&.reflector-id {
|
||||
width: 10%;
|
||||
max-width: 10%;
|
||||
}
|
||||
&.riscaldi-current {
|
||||
width: 308px;
|
||||
max-width: 308px;
|
||||
width: 10%;
|
||||
max-width: 10%;
|
||||
}
|
||||
&.riscaldi-status {
|
||||
width: 20%;
|
||||
max-width: 20%;
|
||||
}
|
||||
&.riscaldi-details {
|
||||
width: 10%;
|
||||
max-width: 10%;
|
||||
}
|
||||
|
||||
}
|
||||
td{
|
||||
>span{
|
||||
padding: 0 10px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.status-td {
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
justify-content:flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
.details-td {
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
justify-content:flex-end;
|
||||
align-items: center;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.status-buttons {
|
||||
padding: 3px 16px;
|
||||
width: 80px;
|
||||
padding: 3px 3px;
|
||||
border-radius: 2px;
|
||||
text-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
|
||||
color: #e8e8e8;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.main-container {
|
||||
@@ -34,40 +78,13 @@ td {
|
||||
|
||||
.ok-button {
|
||||
background-color: @booger;
|
||||
> label {
|
||||
text-shadow: 0 0 4px @black-50;
|
||||
color: @very-light-pink;
|
||||
}
|
||||
}
|
||||
|
||||
.broken-button {
|
||||
background-color: @scarlet;
|
||||
> label {
|
||||
text-shadow: 0 0 4px rgb(0 0 0 / 50%);
|
||||
font-size: 16px;
|
||||
color: @very-light-pink;
|
||||
}
|
||||
}
|
||||
|
||||
.error-button {
|
||||
background-color: @scarlet;
|
||||
> label {
|
||||
text-shadow: 0 0 4px @black-50;
|
||||
color: @very-light-pink;
|
||||
}
|
||||
}
|
||||
|
||||
.warning-button {
|
||||
background-color: @macaroni-and-cheese;
|
||||
> label {
|
||||
margin: 3px 0px 3px 0px;
|
||||
text-shadow: 0 0 4px @black-50;
|
||||
color: @very-light-pink;
|
||||
}
|
||||
}
|
||||
|
||||
.status-container {
|
||||
width: 126px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
+18
-32
@@ -1,42 +1,28 @@
|
||||
import { Component, Vue } from "vue-property-decorator";
|
||||
import { store } from "@/store";
|
||||
|
||||
@Component({})
|
||||
export default class RiscaldiTable extends Vue {
|
||||
rowData = [];
|
||||
typeStatusButton: string;
|
||||
|
||||
|
||||
get resistances() {
|
||||
return store.state.warmers.resistances;
|
||||
}
|
||||
|
||||
getChannelInfo(id) {
|
||||
return store.state.warmers.channels.filter(i => i.idChannel == id)[0];
|
||||
}
|
||||
|
||||
getBoard(id) {
|
||||
return Math.floor((id-1)/16);
|
||||
}
|
||||
|
||||
getOutput(id) {
|
||||
return Math.floor((id-1)%16);
|
||||
}
|
||||
|
||||
mounted() {
|
||||
this.rowData = [
|
||||
{
|
||||
cellId: "1",
|
||||
current: "0.06 A",
|
||||
set: "8%",
|
||||
status: "broken"
|
||||
},
|
||||
{
|
||||
cellId: "1",
|
||||
current: "0.06 A",
|
||||
set: "8%",
|
||||
status: "ok"
|
||||
},
|
||||
{
|
||||
cellId: "1",
|
||||
current: "0.06 A",
|
||||
set: "8%",
|
||||
status: "error 23"
|
||||
},
|
||||
{
|
||||
cellId: "1",
|
||||
current: "0.06 A",
|
||||
set: "8%",
|
||||
status: "error 12"
|
||||
},
|
||||
{
|
||||
cellId: "1",
|
||||
current: "0.06 A",
|
||||
set: "8%",
|
||||
status: "warning 3"
|
||||
}
|
||||
];
|
||||
}
|
||||
}
|
||||
|
||||
+32
-59
@@ -3,75 +3,48 @@
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="riscaldi-cell-id">Cell ID</th>
|
||||
<th class="riscaldi-current">Current</th>
|
||||
<th class="riscaldi-set">Set</th>
|
||||
<th class="riscaldi-cell-id">Cell</th>
|
||||
<th class="reflector-id">Reflector</th>
|
||||
<th class="channel-id">Channel</th>
|
||||
<th class="board-id">Board</th>
|
||||
<th class="output-id">Output</th>
|
||||
<th class="riscaldi-current">Current [A]</th>
|
||||
<th class="riscaldi-set">Current [%]</th>
|
||||
<th class="riscaldi-status">Status</th>
|
||||
<th></th>
|
||||
<th class="riscaldi-details"> </th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="(item, i) of rowData" :key="i">
|
||||
<td>
|
||||
<span>
|
||||
{{ item.cellId }}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<span>
|
||||
{{ item.current }}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<span>
|
||||
{{ item.set }}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="status-container">
|
||||
<span
|
||||
v-if="item.status === 'ok'"
|
||||
class="status-buttons ok-button status-ok"
|
||||
>
|
||||
<label>OK</label>
|
||||
<tr v-for="(item, i) of resistances" :key="i">
|
||||
<td ><span>{{item.idGroup}}</span></td>
|
||||
<td ><span>{{item.idReflector}}</span></td>
|
||||
<td ><span>{{item.idChannel}}</span></td>
|
||||
<td ><span>{{getBoard(item.idChannel)}}</span></td>
|
||||
<td ><span>{{getOutput(item.idChannel)}}</span></td>
|
||||
<td ><span>{{getChannelInfo(item.idChannel).actualCurrent}} A</span></td>
|
||||
<td ><span>{{getChannelInfo(item.idChannel).actualPerc}} %</span></td>
|
||||
<td >
|
||||
<span class="status-td">
|
||||
<span class="status-container" v-if="getChannelInfo(item.idChannel).channelStatus == 0">
|
||||
<span class="status-buttons ok-button">
|
||||
{{getChannelInfo(item.idChannel).channelStatus}}
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
<span>
|
||||
<span class="status-container">
|
||||
<span
|
||||
v-if="item.status === 'broken'"
|
||||
class="status-buttons broken-button"
|
||||
>
|
||||
<label>Broken</label>
|
||||
<span class="status-container" v-else>
|
||||
<span class="status-buttons broken-button">
|
||||
{{getChannelInfo(item.idChannel).channelStatus}}
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
<span
|
||||
v-if="item.status === 'error 23'"
|
||||
class="status-buttons error-button"
|
||||
>
|
||||
<label>Error 23</label>
|
||||
</span>
|
||||
<span
|
||||
v-if="item.status === 'error 12'"
|
||||
class="status-buttons error-button"
|
||||
>
|
||||
<label>Error 12</label>
|
||||
</span>
|
||||
<span class="status-container">
|
||||
<span
|
||||
v-if="item.status === 'warning 3'"
|
||||
class="status-buttons warning-button"
|
||||
>
|
||||
<label>Warning 3</label>
|
||||
</span>
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="button-details" @click="goToDetails()">
|
||||
<span class="button-details-label">Details</span>
|
||||
</td>
|
||||
<td >
|
||||
<span class="details-td">
|
||||
<button class="btn button-details" @click="goToDetails()">
|
||||
Details
|
||||
</button>
|
||||
</span>
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
@@ -0,0 +1,127 @@
|
||||
.main-container {
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
display: grid;
|
||||
grid-template-rows: 193px 1fr;
|
||||
grid-template-columns: 495px 1fr;
|
||||
}
|
||||
.main-container table {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
.main-container table thead {
|
||||
width: 674px;
|
||||
height: 34px;
|
||||
padding: 10px 0 0;
|
||||
background-color: #4e585e;
|
||||
border-bottom: 2px solid #bbbcbc;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.main-container table thead tr th {
|
||||
background-color: #4e585e;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
height: 12px;
|
||||
font-size: 14px;
|
||||
line-height: 34px;
|
||||
text-align: left;
|
||||
color: #ffffff;
|
||||
min-width: 64px;
|
||||
}
|
||||
.main-container table .center {
|
||||
text-align: center;
|
||||
}
|
||||
.main-container table tbody {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0px;
|
||||
margin: 0;
|
||||
}
|
||||
.main-container table tbody td {
|
||||
height: 64px;
|
||||
color: #e8e8e8;
|
||||
}
|
||||
.main-container table tbody tr:nth-child(odd) {
|
||||
background-color: #747f85;
|
||||
}
|
||||
.main-container table tbody tr:nth-child(even) {
|
||||
background-color: #4e585e;
|
||||
}
|
||||
.main-container table tbody::-webkit-scrollbar {
|
||||
width: 16px;
|
||||
}
|
||||
.main-container table tbody::-webkit-scrollbar-track {
|
||||
margin: 20px 0px;
|
||||
background-color: #5a656b;
|
||||
border-radius: 15px;
|
||||
}
|
||||
.main-container table tbody::-webkit-scrollbar-thumb {
|
||||
width: 16px;
|
||||
background: #3e464a;
|
||||
border: 4px solid #5a656b;
|
||||
border-radius: 15px;
|
||||
}
|
||||
.table-container {
|
||||
height: 700px;
|
||||
}
|
||||
.table-container tr.group-row {
|
||||
height: 64px;
|
||||
width: 100%;
|
||||
background: transparent !important;
|
||||
}
|
||||
.table-container tr.group-row td {
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
height: auto;
|
||||
font-size: 16px;
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.table-container td.pointer {
|
||||
text-align: center;
|
||||
}
|
||||
.table-container button.pointer {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
object-fit: contain;
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
|
||||
background-image: linear-gradient(to bottom, #818a8f 0%, #42494e 98%);
|
||||
border: none;
|
||||
}
|
||||
.column-menu {
|
||||
grid-row: 2;
|
||||
border-top: #ffffff 2px solid;
|
||||
}
|
||||
.column-page {
|
||||
grid-row: 2;
|
||||
grid-column: 2;
|
||||
width: 1424px;
|
||||
height: 885px;
|
||||
border-top: #ffffff 2px solid;
|
||||
background-color: #657178;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(600px, 1fr));
|
||||
}
|
||||
.column-page-one-column {
|
||||
grid-row: 2;
|
||||
grid-column: 2;
|
||||
width: 1384px;
|
||||
height: 885px;
|
||||
border-top: #ffffff 2px solid;
|
||||
background-color: #657178;
|
||||
display: grid;
|
||||
}
|
||||
.column-page-one-column > table {
|
||||
margin: 20px 0 0 20px;
|
||||
}
|
||||
.one-column-table-container {
|
||||
height: 750px;
|
||||
margin: 20px 0 0 20px;
|
||||
}
|
||||
.one-column-table-container > table {
|
||||
width: -webkit-fill-available;
|
||||
}
|
||||
.pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
@@ -47,7 +47,6 @@
|
||||
|
||||
td {
|
||||
height: 64px;
|
||||
width: 64px;
|
||||
color: #e8e8e8;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user