fix opzioni
This commit is contained in:
=
@@ -1,92 +0,0 @@
|
||||
// out: false, sourceMap: false, main: ../style.less
|
||||
@import "grid-system.less";
|
||||
@import "colors.less";
|
||||
@import "fonts.less";
|
||||
|
||||
.circle-gantt{
|
||||
height: 70px;
|
||||
|
||||
.specific{
|
||||
|
||||
div{
|
||||
|
||||
&:first-of-type{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
height: 70px;
|
||||
object-fit: contain;
|
||||
border-radius: 2px;
|
||||
background-color: #57636b;
|
||||
|
||||
label{
|
||||
margin-left: 37%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&:last-of-type{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
margin-top: -66px;
|
||||
height: 40px;
|
||||
object-fit: contain;
|
||||
border-radius: 2px;
|
||||
background-color: #c0c7cc;
|
||||
|
||||
label{
|
||||
margin-left: 25%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&:first-of-type{
|
||||
|
||||
div{
|
||||
|
||||
&:first-of-type{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
width: 34px;
|
||||
height: 70px;
|
||||
object-fit: contain;
|
||||
border-radius: 2px;
|
||||
background-color: #57636b;
|
||||
|
||||
label{
|
||||
margin-left: 25%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&:last-of-type{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
margin-top: -66px;
|
||||
width: 34px;
|
||||
height: 40px;
|
||||
object-fit: contain;
|
||||
border-radius: 2px;
|
||||
background-color: #c0c7cc;
|
||||
|
||||
img{
|
||||
margin-left: 25%;
|
||||
flex-shrink: 0;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
@@ -9,13 +9,11 @@
|
||||
@import "slider.less";
|
||||
@import "tastierino.less";
|
||||
@import "preriscaldo-dashboard.less";
|
||||
@import "circlegantt.less";
|
||||
@import "paddle.less";
|
||||
@import "arch-interface.less";
|
||||
@import "avvio-prod.less";
|
||||
@import "processo.less";
|
||||
@import "progrprerisc.less";
|
||||
@import "opzioni.less";
|
||||
@import "imbutitura.less";
|
||||
@import "popups.less";
|
||||
@import "grid-system.less";
|
||||
|
||||
@@ -1,91 +0,0 @@
|
||||
// out: false, sourceMap: false, main: ../style.less
|
||||
@import "grid-system.less";
|
||||
@import "colors.less";
|
||||
@import "fonts.less";
|
||||
|
||||
.modal.opzioni-info {
|
||||
|
||||
|
||||
hr {
|
||||
width: 2px;
|
||||
height: 830px;
|
||||
background-color: #979797;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
section.body {
|
||||
|
||||
section {
|
||||
padding: 0px;
|
||||
|
||||
.specific {
|
||||
|
||||
&:last-of-type {
|
||||
margin-left: 100px;
|
||||
width: 471px;
|
||||
}
|
||||
|
||||
&:first-of-type {
|
||||
|
||||
.box-color {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
button {
|
||||
background-color: #dddddd;
|
||||
display: block;
|
||||
color: #000000;
|
||||
padding: 22px 16px;
|
||||
width: 550px;
|
||||
height: 64px;
|
||||
border: none;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
.active {
|
||||
background-color: rgba(23, 145, 255, 0.75);
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
label {
|
||||
font-size: 14px;
|
||||
width: 60px;
|
||||
margin-left: 5px;
|
||||
margin-right: 30px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
aside {
|
||||
|
||||
button {
|
||||
display: block;
|
||||
background-color: #bbbcbc;
|
||||
color: #002680;
|
||||
padding: 22px 16px;
|
||||
margin: 2px 0;
|
||||
width: 547px;
|
||||
height: 70px;
|
||||
border: none;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
.active {
|
||||
background-color: #fff;
|
||||
font-weight: bold;
|
||||
border-top: 2px solid #002680;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
@@ -4708,64 +4708,6 @@ article .box .body {
|
||||
text-align: center;
|
||||
color: #4b4b4b;
|
||||
}
|
||||
.circle-gantt {
|
||||
height: 70px;
|
||||
}
|
||||
.circle-gantt .specific div:first-of-type {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
height: 70px;
|
||||
object-fit: contain;
|
||||
border-radius: 2px;
|
||||
background-color: #57636b;
|
||||
}
|
||||
.circle-gantt .specific div:first-of-type label {
|
||||
margin-left: 37%;
|
||||
}
|
||||
.circle-gantt .specific div:last-of-type {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
margin-top: -66px;
|
||||
height: 40px;
|
||||
object-fit: contain;
|
||||
border-radius: 2px;
|
||||
background-color: #c0c7cc;
|
||||
}
|
||||
.circle-gantt .specific div:last-of-type label {
|
||||
margin-left: 25%;
|
||||
}
|
||||
.circle-gantt .specific:first-of-type div:first-of-type {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
width: 34px;
|
||||
height: 70px;
|
||||
object-fit: contain;
|
||||
border-radius: 2px;
|
||||
background-color: #57636b;
|
||||
}
|
||||
.circle-gantt .specific:first-of-type div:first-of-type label {
|
||||
margin-left: 25%;
|
||||
}
|
||||
.circle-gantt .specific:first-of-type div:last-of-type {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
margin-top: -66px;
|
||||
width: 34px;
|
||||
height: 40px;
|
||||
object-fit: contain;
|
||||
border-radius: 2px;
|
||||
background-color: #c0c7cc;
|
||||
}
|
||||
.circle-gantt .specific:first-of-type div:last-of-type img {
|
||||
margin-left: 25%;
|
||||
flex-shrink: 0;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
.container #app nav {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
@@ -5215,62 +5157,6 @@ article .box .body {
|
||||
letter-spacing: normal;
|
||||
color: #002680;
|
||||
}
|
||||
.modal.opzioni-info hr {
|
||||
width: 2px;
|
||||
height: 830px;
|
||||
background-color: #979797;
|
||||
margin: 0;
|
||||
}
|
||||
.modal.opzioni-info section.body section {
|
||||
padding: 0px;
|
||||
}
|
||||
.modal.opzioni-info section.body section .specific:last-of-type {
|
||||
margin-left: 100px;
|
||||
width: 471px;
|
||||
}
|
||||
.modal.opzioni-info section.body section .specific:first-of-type .box-color {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
.modal.opzioni-info section.body section .specific:first-of-type button {
|
||||
background-color: #dddddd;
|
||||
display: block;
|
||||
color: #000000;
|
||||
padding: 22px 16px;
|
||||
width: 550px;
|
||||
height: 64px;
|
||||
border: none;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
font-size: 17px;
|
||||
}
|
||||
.modal.opzioni-info section.body section .specific:first-of-type .active {
|
||||
background-color: rgba(23, 145, 255, 0.75);
|
||||
color: #ffffff;
|
||||
}
|
||||
.modal.opzioni-info section.body section .specific:first-of-type label {
|
||||
font-size: 14px;
|
||||
width: 60px;
|
||||
margin-left: 5px;
|
||||
margin-right: 30px;
|
||||
}
|
||||
.modal.opzioni-info section.body section aside button {
|
||||
display: block;
|
||||
background-color: #bbbcbc;
|
||||
color: #002680;
|
||||
padding: 22px 16px;
|
||||
margin: 2px 0;
|
||||
width: 547px;
|
||||
height: 70px;
|
||||
border: none;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
font-size: 17px;
|
||||
}
|
||||
.modal.opzioni-info section.body section aside .active {
|
||||
background-color: #fff;
|
||||
font-weight: bold;
|
||||
border-top: 2px solid #002680;
|
||||
}
|
||||
.modal.imbutitura-info section .specific {
|
||||
padding-left: 5px;
|
||||
justify-content: flex-end;
|
||||
|
||||
-41
@@ -1,41 +0,0 @@
|
||||
import Vue from 'vue';
|
||||
import Component from 'vue-class-component';
|
||||
import {Prop} from 'vue-property-decorator';
|
||||
import Slider from "@/app_modules_thermo/components/slider.vue";
|
||||
import { Modal, ModalHelper } from "@/components/modals";
|
||||
import { Factory, messageService, awaiter } from "@/_base";
|
||||
|
||||
@Component({components:{slider:Slider,modal:Modal}})
|
||||
export default class ArretramentoRiscaldi extends Vue{
|
||||
|
||||
@Prop({default:0})
|
||||
ritardo:number;
|
||||
|
||||
mock_ritardo:number=this.ritardo;
|
||||
|
||||
annulla(){
|
||||
ModalHelper.HideModal();
|
||||
};
|
||||
|
||||
conferma(){
|
||||
ModalHelper.HideModal();
|
||||
};
|
||||
|
||||
async beforeMount() {
|
||||
// this.contactInfo = await awaiter(new machineService().getContactConfiguration());
|
||||
messageService.subscribeToChannel("esc_pressed", args => {
|
||||
this.close();
|
||||
});
|
||||
}
|
||||
|
||||
beforeDestroy() {
|
||||
messageService.deleteChannel("esc_pressed");
|
||||
}
|
||||
|
||||
close() {
|
||||
messageService.deleteChannel("esc_pressed");
|
||||
ModalHelper.HideModal();
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
-31
@@ -1,31 +0,0 @@
|
||||
<template>
|
||||
<div class="setup">
|
||||
<modal type="arretramento-riscaldi-info" :title="'arretramentoriscaldiinfo_lbl_title' | localize('Arretramento riscaldi')">
|
||||
<div slot="header-buttons">
|
||||
<button class="modal-close" @click="close()">
|
||||
<i class="fa fa-remove"></i>
|
||||
</button>
|
||||
</div>
|
||||
<section>
|
||||
<div class="specific">
|
||||
<div class="input-area">
|
||||
<img src="assets/icons/png/clessidra.png" />
|
||||
<label>Ritardo</label>
|
||||
<input class="rect" v-model="mock_ritardo">
|
||||
</div>
|
||||
<slider :min="0" :max="10" v-model="mock_ritardo"></slider>
|
||||
</div>
|
||||
</section>
|
||||
<footer>
|
||||
<button class="btn" @click="annulla()">
|
||||
Annulla
|
||||
</button>
|
||||
<button class="btn btn-success" @click="conferma()">
|
||||
Conferma
|
||||
</button>
|
||||
</footer>
|
||||
</modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" src="./show-arretramento-riscladi-info.ts"></script>
|
||||
@@ -1,17 +0,0 @@
|
||||
import Vue from 'vue';
|
||||
import Component from 'vue-class-component';
|
||||
import {Prop} from 'vue-property-decorator';
|
||||
|
||||
@Component({name:"circlegantt"})
|
||||
export default class CircleGantt extends Vue{
|
||||
|
||||
@Prop({default:2})
|
||||
value:number;
|
||||
@Prop({default:0})
|
||||
late:number;
|
||||
@Prop({default:'s'})
|
||||
unit:string;
|
||||
@Prop({default:'Discesa cornice'})
|
||||
title:string;
|
||||
|
||||
}
|
||||
@@ -1,25 +0,0 @@
|
||||
<template>
|
||||
<section class="circle-gantt">
|
||||
<div class="specific">
|
||||
<div>
|
||||
<label>{{late}}s</label>
|
||||
</div>
|
||||
<div>
|
||||
<img src="assets/icons/png/clessidra.png">
|
||||
</div>
|
||||
</div>
|
||||
<div class="specific">
|
||||
<div>
|
||||
<label>{{value}}{{unit}}</label>
|
||||
</div>
|
||||
<div>
|
||||
<label>{{title}}</label>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="specific" v-if>
|
||||
|
||||
</div> parte finale variabile-->
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script lang="ts" src="./circle-gantt.ts"></script>
|
||||
@@ -1,24 +1,22 @@
|
||||
import Vue from 'vue';
|
||||
import Component from 'vue-class-component';
|
||||
import {Prop} from 'vue-property-decorator';
|
||||
import { Prop } from 'vue-property-decorator';
|
||||
import { messageService } from "@/_base/messageService";
|
||||
import { Modal, ModalHelper } from "@/components/modals";
|
||||
import CircleGantt from "../circles-gantt/circle-gantt.vue"
|
||||
|
||||
@Component({
|
||||
components: {
|
||||
modal: Modal,
|
||||
circlegantt: CircleGantt
|
||||
}
|
||||
components: {
|
||||
modal: Modal,
|
||||
}
|
||||
})
|
||||
export default class Processo extends Vue{
|
||||
export default class Processo extends Vue {
|
||||
|
||||
@Prop({default:25})
|
||||
actual:number;
|
||||
@Prop({default:145})
|
||||
tot:number;
|
||||
@Prop({ default: 25 })
|
||||
actual: number;
|
||||
@Prop({ default: 145 })
|
||||
tot: number;
|
||||
|
||||
public sendMessage(name: string) {
|
||||
messageService.publishToChannel(name);
|
||||
}
|
||||
public sendMessage(name: string) {
|
||||
messageService.publishToChannel(name);
|
||||
}
|
||||
}
|
||||
@@ -1,17 +1,38 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<modal type="processo-info" :title="'processo_lbl_title' | localize('Attività attuale (es. attesa spostamento assi)')">
|
||||
<div class="tab-header" slot="header-buttons">
|
||||
<button> <img src="assets/icons/png/star.png"> <span>Opzioni di lavorazione</span> </button>
|
||||
<button> <img src="assets/icons/png/star.png"> <span>Pirometro</span> </button>
|
||||
<button> <img src="assets/icons/png/star.png"> <span>Attivazione riscaldi</span> </button>
|
||||
<button> <img src="assets/icons/png/star.png"> <span>Riscaldo +10 secondi</span> </button>
|
||||
<button> <img src="assets/icons/png/star.png"> <span>Risclado -10 secondi</span> </button>
|
||||
<button> <img src="assets/icons/png/star.png"> <span>Label pulsante opzionale</span></button>
|
||||
<label>{{actual}}/{{tot}}</label>
|
||||
<div class="container">
|
||||
<modal
|
||||
type="processo-info"
|
||||
:title="'processo_lbl_title' | localize('Attività attuale (es. attesa spostamento assi)')"
|
||||
>
|
||||
<div class="tab-header" slot="header-buttons">
|
||||
<button>
|
||||
<img src="assets/icons/png/star.png" />
|
||||
<span>Opzioni di lavorazione</span>
|
||||
</button>
|
||||
<button>
|
||||
<img src="assets/icons/png/star.png" />
|
||||
<span>Pirometro</span>
|
||||
</button>
|
||||
<button>
|
||||
<img src="assets/icons/png/star.png" />
|
||||
<span>Attivazione riscaldi</span>
|
||||
</button>
|
||||
<button>
|
||||
<img src="assets/icons/png/star.png" />
|
||||
<span>Riscaldo +10 secondi</span>
|
||||
</button>
|
||||
<button>
|
||||
<img src="assets/icons/png/star.png" />
|
||||
<span>Risclado -10 secondi</span>
|
||||
</button>
|
||||
<button>
|
||||
<img src="assets/icons/png/star.png" />
|
||||
<span>Label pulsante opzionale</span>
|
||||
</button>
|
||||
<label>{{actual}}/{{tot}}</label>
|
||||
</div>
|
||||
</modal>
|
||||
</div>
|
||||
</modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" src="./processo.ts"></script>
|
||||
+24
-24
@@ -1,33 +1,33 @@
|
||||
<template>
|
||||
<div class="box transparent box-500 center">
|
||||
<div class="body">
|
||||
<template v-if="recipe.modalita.status.visible">
|
||||
<div class="input-area">
|
||||
<label>{{'options_undercutmould__mode'|localize('Modalità')}}</label>
|
||||
<select class="form-control" v-model="modalita"></select>
|
||||
</div>
|
||||
<template v-if="modalita.status.visible">
|
||||
<div class="input-area">
|
||||
<label>{{'options_undercutmould__mode'|localize('Modalità')}}</label>
|
||||
<select class="form-control" v-model="modalita"></select>
|
||||
</div>
|
||||
</template>
|
||||
<template v-if="recipe.quota.status.visible">
|
||||
<div class="input-area">
|
||||
<img src="assets/icons/png/quota.png" />
|
||||
<label>{{'options_undercutupperplate__position'|localize('Quota')}}</label>
|
||||
<numeric v-model="quota" />
|
||||
</div>
|
||||
<slider v-model="quota"></slider>
|
||||
<template v-if="quota.status.visible">
|
||||
<div class="input-area">
|
||||
<img src="assets/icons/png/quota.png" />
|
||||
<label>{{'options_undercutupperplate__position'|localize('Quota')}}</label>
|
||||
<numeric v-model="quota" />
|
||||
</div>
|
||||
<slider v-model="quota"></slider>
|
||||
</template>
|
||||
<template v-if="recipe.ritardoAtt.status.visible">
|
||||
<div class="input-area">
|
||||
<label>{{'options_undercutupperplate__delay_acti'|localize('Ritardo attivazione')}}</label>
|
||||
<numeric v-model="ritardoAtt" />
|
||||
</div>
|
||||
<slider v-model="ritardoAtt"></slider>
|
||||
<template v-if="ritardoAtt.status.visible">
|
||||
<div class="input-area">
|
||||
<label>{{'options_undercutupperplate__delay_acti'|localize('Ritardo attivazione')}}</label>
|
||||
<numeric v-model="ritardoAtt" />
|
||||
</div>
|
||||
<slider v-model="ritardoAtt"></slider>
|
||||
</template>
|
||||
<template v-if="recipe.ritardoDisatt.status.visible">
|
||||
<div class="input-area">
|
||||
<label>{{'options_undercutupperplate__delay_dis'|localize('Ritardo disattivazione')}}</label>
|
||||
<numeric v-model="ritardoDisatt" />
|
||||
</div>
|
||||
<slider v-model="ritardoDisatt"></slider>
|
||||
<template v-if="ritardoDisatt.status.visible">
|
||||
<div class="input-area">
|
||||
<label>{{'options_undercutupperplate__delay_dis'|localize('Ritardo disattivazione')}}</label>
|
||||
<numeric v-model="ritardoDisatt" />
|
||||
</div>
|
||||
<slider v-model="ritardoDisatt"></slider>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
+11
-11
@@ -1,18 +1,18 @@
|
||||
<template>
|
||||
<div class="box box-500 transparent center">
|
||||
<div class="body">
|
||||
<template v-if="recipe.abilitazione.status.visible">
|
||||
<div class="input-area">
|
||||
<label>{{'options_thermoregulator__enabled'|localize('Abilitazione')}}</label>
|
||||
<toggle-button v-model="abilitazione.status.enabled"></toggle-button>
|
||||
</div>
|
||||
<template v-if="abilitazione.status.visible">
|
||||
<div class="input-area">
|
||||
<label>{{'options_thermoregulator__enabled'|localize('Abilitazione')}}</label>
|
||||
<toggle-button v-model="abilitazione.status.enabled"></toggle-button>
|
||||
</div>
|
||||
</template>
|
||||
<template v-if="recipe.setpoint.status.visible">
|
||||
<div class="input-area">
|
||||
<label>{{'options_thermoregulator__setpoint'|localize('Setpoint')}}</label>
|
||||
<numeric v-model="setpoint" />
|
||||
</div>
|
||||
<slider v-model="setpoint"></slider>
|
||||
<template v-if="setpoint.status.visible">
|
||||
<div class="input-area">
|
||||
<label>{{'options_thermoregulator__setpoint'|localize('Setpoint')}}</label>
|
||||
<numeric v-model="setpoint" />
|
||||
</div>
|
||||
<slider v-model="setpoint"></slider>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
+8
-8
@@ -2,17 +2,17 @@
|
||||
<div class="section">
|
||||
<label>{{numSottoSq}}</label>
|
||||
<label>{{status}}</label>
|
||||
<template v-if="recipe.modalita.status.visible">
|
||||
<select class="form-control" v-model="modalita"></select>
|
||||
<template v-if="modalita.status.visible">
|
||||
<select class="form-control" v-model="modalita"></select>
|
||||
</template>
|
||||
<template v-if="recipe.quota.status.visible">
|
||||
<label>{{quota.setpointHMI}} mm</label>
|
||||
<template v-if="quota.status.visible">
|
||||
<label>{{quota.setpointHMI}} mm</label>
|
||||
</template>
|
||||
<template v-if="recipe.ritardoAtt.status.visible">
|
||||
<label>{{ritardoAtt.setpointHMI}} s</label>
|
||||
<template v-if="ritardoAtt.status.visible">
|
||||
<label>{{ritardoAtt.setpointHMI}} s</label>
|
||||
</template>
|
||||
<template v-if="recipe.ritardoDisatt.status.visible">
|
||||
<label>{{ritardoDisatt.setpointHMI}} s</label>
|
||||
<template v-if="ritardoDisatt.status.visible">
|
||||
<label>{{ritardoDisatt.setpointHMI}} s</label>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
+2
-2
@@ -5,11 +5,11 @@ import { Prop } from "vue-property-decorator";
|
||||
@Component({})
|
||||
export default class setupTermo extends Vue {
|
||||
|
||||
@Prop({default:""})
|
||||
@Prop({ default: "" })
|
||||
numTermo: string;
|
||||
|
||||
@Prop()
|
||||
status: Recipe.IValue;
|
||||
status: Recipe.IStatus;
|
||||
|
||||
@Prop()
|
||||
setpoint: Recipe.IValue;
|
||||
|
||||
+10
-5
@@ -1,12 +1,17 @@
|
||||
<template>
|
||||
<div class="section">
|
||||
<div class="option-row" @click="$emit('click')">
|
||||
<label>{{numTermo}}</label>
|
||||
<template v-if="recipe.status.status.visible">
|
||||
<label>{{status.enabled}}</label>
|
||||
<template v-if="status.visible">
|
||||
<label>{{status.enabled}}</label>
|
||||
</template>
|
||||
<template v-if="recipe.setpoint.status.visible">
|
||||
<label>{{setpoint.setpointHMI}} °C</label>
|
||||
<template v-if="setpoint.status.visible">
|
||||
<label>{{setpoint.setpointHMI}} °C</label>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
<style scoped>
|
||||
label {
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
<script src="./setupTermo.ts" lang="ts"></script>
|
||||
+8
-7
@@ -1,19 +1,20 @@
|
||||
import Vue from 'vue';
|
||||
import Component from 'vue-class-component';
|
||||
import {Prop} from 'vue-property-decorator';
|
||||
import { Prop } from 'vue-property-decorator';
|
||||
import SetupTermo from "./base-components/setupTermo.vue";
|
||||
import InputTermo from "./base-components/inputTermo.vue";
|
||||
|
||||
@Component({name:'termoregolatori',
|
||||
components: {
|
||||
@Component({
|
||||
name: 'termoregolatori',
|
||||
components: {
|
||||
setupTermo: SetupTermo,
|
||||
inputTermo: InputTermo
|
||||
}
|
||||
}
|
||||
})
|
||||
export default class Termoragolatori extends Vue {
|
||||
|
||||
@Prop()
|
||||
recipe:Recipe.IRecipe;
|
||||
@Prop()
|
||||
recipe: Recipe.IRecipe;
|
||||
|
||||
showTermo: string = "termo-1";
|
||||
selectedItem: number = 1;
|
||||
}
|
||||
+48
-156
@@ -1,163 +1,55 @@
|
||||
<template>
|
||||
<section>
|
||||
<div class="specific">
|
||||
<button :class="{'active':showTermo == 'termo-1'}" @click="showTermo='termo-1'">
|
||||
<setup-termo
|
||||
:numTermo="1"
|
||||
:status="recipe.options_thermoregulator_1_enabled.status"
|
||||
:setpoint="recipe.options_thermoregulator_1_setpoint"
|
||||
></setup-termo>
|
||||
</button>
|
||||
<button
|
||||
:class="{'active':showTermo == 'termo-2'}"
|
||||
@click="showTermo='termo-2'"
|
||||
class="box-color"
|
||||
>
|
||||
<setup-termo
|
||||
:numTermo="2"
|
||||
:status="recipe.options_thermoregulator_2_enabled.status"
|
||||
:setpoint="recipe.options_thermoregulator_2_setpoint"
|
||||
></setup-termo>
|
||||
</button>
|
||||
<button :class="{'active':showTermo == 'termo-3'}" @click="showTermo='termo-3'">
|
||||
<setup-termo
|
||||
:numTermo="3"
|
||||
:status="recipe.options_thermoregulator_3_enabled.status"
|
||||
:setpoint="recipe.options_thermoregulator_3_setpoint"
|
||||
></setup-termo>
|
||||
</button>
|
||||
<button
|
||||
:class="{'active':showTermo == 'termo-4'}"
|
||||
@click="showTermo='termo-4'"
|
||||
class="box-color"
|
||||
>
|
||||
<setup-termo
|
||||
:numTermo="4"
|
||||
:status="recipe.options_thermoregulator_4_enabled.status"
|
||||
:setpoint="recipe.options_thermoregulator_4_setpoint"
|
||||
></setup-termo>
|
||||
</button>
|
||||
<button :class="{'active':showTermo == 'termo-5'}" @click="showTermo='termo-5'">
|
||||
<setup-termo
|
||||
:numTermo="5"
|
||||
:status="recipe.options_thermoregulator_5_enabled.status"
|
||||
:setpoint="recipe.options_thermoregulator_5_setpoint"
|
||||
></setup-termo>
|
||||
</button>
|
||||
<button
|
||||
:class="{'active':showTermo == 'termo-6'}"
|
||||
@click="showTermo='termo-6'"
|
||||
class="box-color"
|
||||
>
|
||||
<setup-termo
|
||||
:numTermo="6"
|
||||
:status="recipe.options_thermoregulator_6_enabled.status"
|
||||
:setpoint="recipe.options_thermoregulator_6_setpoint"
|
||||
></setup-termo>
|
||||
</button>
|
||||
<button :class="{'active':showTermo == 'termo-7'}" @click="showTermo='termo-7'">
|
||||
<setup-termo
|
||||
:numTermo="7"
|
||||
:status="recipe.options_thermoregulator_7_enabled.status"
|
||||
:setpoint="recipe.options_thermoregulator_7_setpoint"
|
||||
></setup-termo>
|
||||
</button>
|
||||
<button
|
||||
:class="{'active':showTermo == 'termo-8'}"
|
||||
@click="showTermo='termo-8'"
|
||||
class="box-color"
|
||||
>
|
||||
<setup-termo
|
||||
:numTermo="8"
|
||||
:status="recipe.options_thermoregulator_8_enabled.status"
|
||||
:setpoint="recipe.options_thermoregulator_8_setpoint"
|
||||
></setup-termo>
|
||||
</button>
|
||||
<button :class="{'active':showTermo == 'termo-9'}" @click="showTermo='termo-9'">
|
||||
<setup-termo
|
||||
:numTermo="9"
|
||||
:status="recipe.options_thermoregulator_9_enabled.status"
|
||||
:setpoint="recipe.options_thermoregulator_9_setpoint"
|
||||
></setup-termo>
|
||||
</button>
|
||||
<button
|
||||
:class="{'active':showTermo == 'termo-10'}"
|
||||
@click="showTermo='termo-10'"
|
||||
class="box-color"
|
||||
>
|
||||
<setup-termo
|
||||
:numTermo="10"
|
||||
:status="recipe.options_thermoregulator_10_enabled.status"
|
||||
:setpoint="recipe.options_thermoregulator_10_setpoint"
|
||||
></setup-termo>
|
||||
</button>
|
||||
<div class="termoregolatori">
|
||||
<div class="list">
|
||||
<setup-termo
|
||||
:class="{'active': selectedItem == i}"
|
||||
v-for="i in 10"
|
||||
:key="i"
|
||||
@click="selectedItem=i"
|
||||
:numTermo="i"
|
||||
:status="recipe[`options_thermoregulator_${selectedItem}_enabled`].status"
|
||||
:setpoint="recipe[`options_thermoregulator_${i}_setpoint`]"
|
||||
></setup-termo>
|
||||
</div>
|
||||
|
||||
<hr />
|
||||
|
||||
<div class="specific">
|
||||
<div v-if="showTermo=='termo-1'">
|
||||
<input-termo
|
||||
:setpoint="recipe.options_thermoregulator_1_setpoint"
|
||||
:abilitazione="recipe.options_thermoregulator_1_enabled"
|
||||
></input-termo>
|
||||
</div>
|
||||
<div v-if="showTermo=='termo-2'">
|
||||
<input-termo
|
||||
:setpoint="recipe.options_thermoregulator_2_setpoint"
|
||||
:abilitazione="recipe.options_thermoregulator_2_enabled"
|
||||
></input-termo>
|
||||
</div>
|
||||
<div v-if="showTermo=='termo-3'">
|
||||
<input-termo
|
||||
:setpoint="recipe.options_thermoregulator_3_setpoint"
|
||||
:abilitazione="recipe.options_thermoregulator_3_enabled"
|
||||
></input-termo>
|
||||
</div>
|
||||
<div v-if="showTermo=='termo-4'">
|
||||
<input-termo
|
||||
:setpoint="recipe.options_thermoregulator_4_setpoint"
|
||||
:abilitazione="recipe.options_thermoregulator_4_enabled"
|
||||
></input-termo>
|
||||
</div>
|
||||
<div v-if="showTermo=='termo-5'">
|
||||
<input-termo
|
||||
:setpoint="recipe.options_thermoregulator_5_setpoint"
|
||||
:abilitazione="recipe.options_thermoregulator_5_enabled"
|
||||
></input-termo>
|
||||
</div>
|
||||
<div v-if="showTermo=='termo-6'">
|
||||
<input-termo
|
||||
:setpoint="recipe.options_thermoregulator_6_setpoint"
|
||||
:abilitazione="recipe.options_thermoregulator_6_enabled"
|
||||
></input-termo>
|
||||
</div>
|
||||
<div v-if="showTermo=='termo-7'">
|
||||
<input-termo
|
||||
:setpoint="recipe.options_thermoregulator_7_setpoint"
|
||||
:abilitazione="recipe.options_thermoregulator_7_enabled"
|
||||
></input-termo>
|
||||
</div>
|
||||
<div v-if="showTermo=='termo-8'">
|
||||
<input-termo
|
||||
:setpoint="recipe.options_thermoregulator_8_setpoint"
|
||||
:abilitazione="recipe.options_thermoregulator_8_enabled"
|
||||
></input-termo>
|
||||
</div>
|
||||
<div v-if="showTermo=='termo-9'">
|
||||
<input-termo
|
||||
:setpoint="recipe.options_thermoregulator_9_setpoint"
|
||||
:abilitazione="recipe.options_thermoregulator_9_enabled"
|
||||
></input-termo>
|
||||
</div>
|
||||
<div v-if="showTermo=='termo-10'">
|
||||
<input-termo
|
||||
:setpoint="recipe.options_thermoregulator_10_setpoint"
|
||||
:abilitazione="recipe.options_thermoregulator_10_enabled"
|
||||
></input-termo>
|
||||
</div>
|
||||
<div>
|
||||
<input-termo
|
||||
:setpoint="recipe[`options_thermoregulator_${selectedItem}_setpoint`]"
|
||||
:abilitazione="recipe[`options_thermoregulator_${selectedItem}_enabled`]"
|
||||
></input-termo>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
<style scoped>
|
||||
.termoregolatori {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
align-items: flex-start;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.list {
|
||||
border-right: 2px solid #979797;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.option-row {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
height: 64px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.option-row:nth-child(odd) {
|
||||
background-color: #ddd;
|
||||
}
|
||||
|
||||
.option-row.active {
|
||||
background-color: rgba(23, 145, 255, 0.75);
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
<script lang="ts" src="./termoregolatori.ts"></script>
|
||||
@@ -23,7 +23,7 @@ import { recipeService } from "@/services/recipeService";
|
||||
})
|
||||
export default class ShowOpzioniInfo extends Vue {
|
||||
|
||||
recipe: Recipe.IRecipe = this.$store.getters.getCurrent();
|
||||
get recipe(): Recipe.IRecipe { return this.$store.getters.getCurrent(); }
|
||||
showOpzioni: string = "TR";
|
||||
|
||||
@Prop()
|
||||
|
||||
Reference in New Issue
Block a user