items lavorati... last
This commit is contained in:
=
@@ -377,4 +377,76 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.history-item {
|
||||
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
|
||||
.body {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr 25px;
|
||||
width: 630px;
|
||||
align-items: center;
|
||||
height: 84px;
|
||||
background-color: #e8e8e8;
|
||||
border-bottom: 1px solid #4b4b4b;
|
||||
}
|
||||
|
||||
.subitems {
|
||||
|
||||
width: 630px;
|
||||
|
||||
.row {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
height: 60px;
|
||||
margin-left: 151px;
|
||||
width: calc(100% - 151px - 25px);
|
||||
background-color: #e8e8e8;
|
||||
border-bottom: 1px solid #4b4b4b;
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
text-align: right;
|
||||
font-size: 54px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.col {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
height: 100%;
|
||||
|
||||
small {
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 25px;
|
||||
font-weight: 500px;
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 32px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
button.trash {
|
||||
border-radius: 25px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border: 2px solid #4b4b4b;
|
||||
box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
}
|
||||
@@ -4433,6 +4433,66 @@ article .box .body {
|
||||
margin-top: 10px;
|
||||
height: calc(100% - 78px);
|
||||
}
|
||||
.history-item {
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.history-item .body {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr 25px;
|
||||
width: 630px;
|
||||
align-items: center;
|
||||
height: 84px;
|
||||
background-color: #e8e8e8;
|
||||
border-bottom: 1px solid #4b4b4b;
|
||||
}
|
||||
.history-item .subitems {
|
||||
width: 630px;
|
||||
}
|
||||
.history-item .subitems .row {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
height: 60px;
|
||||
margin-left: 151px;
|
||||
width: calc(100% - 151px - 25px);
|
||||
background-color: #e8e8e8;
|
||||
border-bottom: 1px solid #4b4b4b;
|
||||
}
|
||||
.history-item label {
|
||||
text-align: right;
|
||||
font-size: 54px;
|
||||
font-weight: 500;
|
||||
}
|
||||
.history-item .col {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
height: 100%;
|
||||
}
|
||||
.history-item .col small {
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
}
|
||||
.history-item .col span {
|
||||
font-size: 25px;
|
||||
font-weight: 500px;
|
||||
}
|
||||
.history-item .col i {
|
||||
font-size: 32px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.history-item button.trash {
|
||||
border-radius: 25px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border: 2px solid #4b4b4b;
|
||||
box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
.warmers {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,12 @@
|
||||
import Component from "vue-class-component";
|
||||
import Vue from "vue";
|
||||
import { Prop } from "vue-property-decorator";
|
||||
|
||||
@Component({})
|
||||
export default class Item extends Vue {
|
||||
|
||||
@Prop()
|
||||
value: Prod.IProd;
|
||||
|
||||
showDetails: boolean = false;
|
||||
}
|
||||
@@ -0,0 +1,69 @@
|
||||
<template>
|
||||
<div class="history-item">
|
||||
<div class="body">
|
||||
<label>{{value.numDone}}</label>
|
||||
<div class="col">
|
||||
<small>{{'history-item_warmup' | localize("tempo riscaldo")}}</small>
|
||||
<span>{{value.timeWarm / 60 | round(0)}}'{{value.timeWarm % 60 | round(0)}}''</span>
|
||||
</div>
|
||||
<div class="col">
|
||||
<small>{{'history-item_vacuum' | localize("vuoto")}}</small>
|
||||
<span>{{value.vacuumReadVal | round(1)}} bar</span>
|
||||
</div>
|
||||
<div class="col">
|
||||
<small>{{'history-item_cycletime' | localize("tempo ciclo netto")}}</small>
|
||||
<span>{{value.timeCycleNet / 60 | round(0)}}'{{value.timeCycleNet % 60 | round(0)}}''</span>
|
||||
</div>
|
||||
<div class="col">
|
||||
<i class="fa fa-caret-left" @click="showDetails = !showDetails" v-if="!showDetails"></i>
|
||||
<i class="fa fa-caret-down" @click="showDetails = !showDetails" v-if="showDetails"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="subitems" v-if="showDetails">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<button class="trash">
|
||||
<i class="fa fa-trash-o" aria-hidden="true"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="col">
|
||||
<small>{{'history-item_venttime' | localize("tempo ventilazione")}}</small>
|
||||
<span>{{value.timeVent / 60 | round(0)}}'{{value.timeVent % 60 | round(0)}}''</span>
|
||||
</div>
|
||||
<div class="col">
|
||||
<small>{{'history-item_cycletimegross' | localize("tempo ciclo lordo")}}</small>
|
||||
<span>{{value.timeCycleGross / 60 | round(0)}}'{{value.timeCycleGross % 60 | round(0)}}''</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<small>{{'history-item_tempstampo' | localize("Temperatura stampo")}}</small>
|
||||
<span>{{value.moldTemp | round(0)}}°C</span>
|
||||
</div>
|
||||
<div class="col">
|
||||
<small>{{'history-item_materialTempEndWarm' | localize("T. Materiale fine riscaldo")}}</small>
|
||||
<span>{{value.materialTempEndWarm | round(0)}}°C</span>
|
||||
</div>
|
||||
<div class="col">
|
||||
<small>{{'history-item_materialTempEndVent' | localize("T. Materiale fine ventilazione")}}</small>
|
||||
<span>{{value.materialTempEndVent | round(0)}}°C</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<small>{{'history-item_vacuumtime' | localize("tempo vuoto")}}</small>
|
||||
<span>{{value.timeVacuum / 60 | round(0)}}'{{value.timeVacuum % 60 | round(0)}}''</span>
|
||||
</div>
|
||||
<div class="col">
|
||||
<small>{{'history-item_mouldEnergyIN' | localize("energia utilizzata in")}}</small>
|
||||
<span>{{value.mouldEnergyIN | round(1)}}kW</span>
|
||||
</div>
|
||||
<div class="col">
|
||||
<small>{{'history-item_mouldEnergyOUT' | localize("energia utilizzata out")}}</small>
|
||||
<span>{{value.mouldEnergyOUT | round(1)}}kW</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script src="./item.ts" lang="ts"></script>
|
||||
@@ -11,6 +11,7 @@ import gauge from "./base-components/gauge.vue";
|
||||
import { prodService } from '@/services/prodService';
|
||||
import moment from 'moment';
|
||||
import stats from "./base-components/stats.vue";
|
||||
import hitem from "./base-components/item.vue";
|
||||
|
||||
@Component({
|
||||
components: {
|
||||
@@ -18,7 +19,8 @@ import stats from "./base-components/stats.vue";
|
||||
archInterface: ArchInterface,
|
||||
alarmList,
|
||||
gauge,
|
||||
stats
|
||||
stats,
|
||||
hitem
|
||||
}
|
||||
})
|
||||
export default class Dashboard extends Vue {
|
||||
@@ -28,6 +30,10 @@ export default class Dashboard extends Vue {
|
||||
return (this.$store.state as AppModel).prod.panel;
|
||||
}
|
||||
|
||||
get lastItem() {
|
||||
return (this.$store.state as AppModel).prod.prod;
|
||||
}
|
||||
|
||||
now = moment();
|
||||
|
||||
get elapsed() {
|
||||
|
||||
@@ -148,6 +148,7 @@
|
||||
</div>
|
||||
<stats class="stats" :width="614" :height="65" :value="panel.tS_TCiclo"></stats>
|
||||
</div>
|
||||
<hitem :value="lastItem"></hitem>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user