diff --git a/Thermo.Active/wwwroot/assets/styles/base/dashboard.less b/Thermo.Active/wwwroot/assets/styles/base/dashboard.less index 46fefbf9..ee9d4de9 100644 --- a/Thermo.Active/wwwroot/assets/styles/base/dashboard.less +++ b/Thermo.Active/wwwroot/assets/styles/base/dashboard.less @@ -298,6 +298,9 @@ .recipe { height: 97px; position: relative; + display: flex; + align-items: center; + justify-content: center; &::before { content: ""; @@ -314,6 +317,11 @@ background-image: url(/assets/svg/dashboard-top-right.svg); } + label { + font-size: 36px; + z-index: 1; + } + } .piece_time { diff --git a/Thermo.Active/wwwroot/assets/styles/style.css b/Thermo.Active/wwwroot/assets/styles/style.css index 186c561b..5bcf45dc 100644 --- a/Thermo.Active/wwwroot/assets/styles/style.css +++ b/Thermo.Active/wwwroot/assets/styles/style.css @@ -4371,6 +4371,9 @@ article .box .body { .dashboard .third_col .recipe { height: 97px; position: relative; + display: flex; + align-items: center; + justify-content: center; } .dashboard .third_col .recipe::before { content: ""; @@ -4386,6 +4389,10 @@ article .box .body { z-index: 0; background-image: url(/assets/svg/dashboard-top-right.svg); } +.dashboard .third_col .recipe label { + font-size: 36px; + z-index: 1; +} .dashboard .third_col .piece_time { display: grid; grid-template-rows: repeat(2, auto); diff --git a/Thermo.Active/wwwroot/assets/svg/disegno-controstampo-quote-velocita.svg b/Thermo.Active/wwwroot/assets/svg/disegno-controstampo-quote-velocita.svg index fd1149e0..2e04baa0 100644 --- a/Thermo.Active/wwwroot/assets/svg/disegno-controstampo-quote-velocita.svg +++ b/Thermo.Active/wwwroot/assets/svg/disegno-controstampo-quote-velocita.svg @@ -1,14 +1,13 @@ - - + diff --git a/Thermo.Active/wwwroot/src/@types/prod.cs.d.ts b/Thermo.Active/wwwroot/src/@types/prod.cs.d.ts index 761899d5..6021837e 100644 --- a/Thermo.Active/wwwroot/src/@types/prod.cs.d.ts +++ b/Thermo.Active/wwwroot/src/@types/prod.cs.d.ts @@ -1,19 +1,31 @@ -declare module Prod{ +declare module Prod { - interface IProd{ - numTarget: number; - numDone: number; - timeWarm: number; - timeVent: number; - timeVacuum: number; - timeCycleGross: number; - timeCycleNet: number; - materialTempEndWarm: number; - materialTempEndVent: number; - moldTemp: number; - vacuumReadVal: number; - mouldEnergyOUT: number; - mouldEnergyIN: number; - } + interface IProd { + numTarget: number; + numDone: number; + timeWarm: number; + timeVent: number; + timeVacuum: number; + timeCycleGross: number; + timeCycleNet: number; + materialTempEndWarm: number; + materialTempEndVent: number; + moldTemp: number; + vacuumReadVal: number; + mouldEnergyOUT: number;// Generated by https://quicktype.io + } + interface IProdPanel { + numTarget: number; + numDone: number; + inizioProd: string; + stimaDurata: number; + tempAct: number; + tempSetpoint: number; + nomeRicetta: string; + lastCadenza: number; + lastTCiclo: number; + tS_Cadenza: { [key: string]: number }; + tS_TCiclo: { [key: string]: number }; + } } \ No newline at end of file diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/dashboard/base-components/gauge.ts b/Thermo.Active/wwwroot/src/app_modules_thermo/dashboard/base-components/gauge.ts index 160a3079..139d9576 100644 --- a/Thermo.Active/wwwroot/src/app_modules_thermo/dashboard/base-components/gauge.ts +++ b/Thermo.Active/wwwroot/src/app_modules_thermo/dashboard/base-components/gauge.ts @@ -32,6 +32,9 @@ export default class MainGauge extends Vue { viewBox: [6, 6, 88, 88] } ); + + this.gaugeDataChanged(this.gaugeData, null); + this.gaugeChanged(); } get gaugeData() { @@ -46,7 +49,7 @@ export default class MainGauge extends Vue { }; } - get prod() { return store.state.prod.prod } + get prod() { return store.state.prod.panel } @Watch('prod.numDone') @Watch('prod.numTarget') diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/dashboard/dashboard.ts b/Thermo.Active/wwwroot/src/app_modules_thermo/dashboard/dashboard.ts index 7242c36c..365ad22d 100644 --- a/Thermo.Active/wwwroot/src/app_modules_thermo/dashboard/dashboard.ts +++ b/Thermo.Active/wwwroot/src/app_modules_thermo/dashboard/dashboard.ts @@ -8,6 +8,8 @@ import { AppModel, appModelActions } from '@/store'; import { getColorFromName, isDarkColor } from "@/_base/utils"; import ArchInterface from "../components/arch-interface/arch-interface.vue"; import gauge from "./base-components/gauge.vue"; +import { prodService } from '@/services/prodService'; +import moment from 'moment'; @Component({ components: { @@ -19,18 +21,25 @@ import gauge from "./base-components/gauge.vue"; }) export default class Dashboard extends Vue { - @Prop({ default: "18,2" }) - piece_hours: string; - @Prop({ default: "3'12''" }) - time_cycle: string; - @Prop({ default: 10 }) - pieces: number; - @Prop({ default: 280 }) - temperature: number; - @Prop({ default: 0 }) - t_setpoint: number; - @Prop() - remaining_time: Date = new Date(); + + get panel() { + return (this.$store.state as AppModel).prod.panel; + } + + now = moment(); + + get elapsed() { + var from = moment(this.panel.inizioProd); + return this.now.diff(from); + } + + get endEstimation() { + return moment(this.panel.inizioProd).add(this.panel.stimaDurata, 'minutes'); + } + + get remainingTime() { + return this.endEstimation.diff(this.now); + } get currentUser() { return (this.$store.state as AppModel).currentUser; @@ -49,8 +58,14 @@ export default class Dashboard extends Vue { } + async mounted() { + await prodService.GetProdPanel(); - // Ribbon + let $this = this; + setInterval(() => { + $this.now = moment(); + }, 1000); + } public get ribbonStatus(): ribbonStatusEnum { diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/dashboard/dashboard.vue b/Thermo.Active/wwwroot/src/app_modules_thermo/dashboard/dashboard.vue index 583f5939..2bcef384 100644 --- a/Thermo.Active/wwwroot/src/app_modules_thermo/dashboard/dashboard.vue +++ b/Thermo.Active/wwwroot/src/app_modules_thermo/dashboard/dashboard.vue @@ -91,27 +91,28 @@
{{'dashboard-timing-start' | localize('inizio')}} - +
{{'dashboard-timing-elapsed' | localize('tempo trascorso')}} - +
{{'dashboard-timing-end' | localize('fine')}} - + +
- +
{{'dashboard-setpoint' | localize('set point')}} - {{t_setpoint}}°C + {{panel.tempSetpoint}}°C
-
+
+ +
{{'dashboard-piece-hours' | localize('pezzi/ora')}} - {{piece_hours}} + {{panel.lastCadenza}} + --
{{'dashboard-time-cycle' | localize('tempo/ciclo')}} - {{time_cycle}} + {{panel.lastTCiclo}} + --
diff --git a/Thermo.Active/wwwroot/src/services/hub.ts b/Thermo.Active/wwwroot/src/services/hub.ts index fbaee24b..48c79536 100644 --- a/Thermo.Active/wwwroot/src/services/hub.ts +++ b/Thermo.Active/wwwroot/src/services/hub.ts @@ -103,6 +103,7 @@ export class Hub { this._hub.client.recipeFullData = Hub.recipeFullData; this._hub.client.recipeOverData = Hub.recipeOverData; this._hub.client.prodInfoData = Hub.prodData; + this._hub.client.prodPanelData = Hub.prodPanelData; this._hub.client.modulesData = Hub.modulesData; // this._hub.client.warmersData = Hub.warmersData; this._hub.client.gaugeData = Hub.gaugeData; @@ -159,7 +160,13 @@ export class Hub { recipeActions.setOverview(store, data); } + public static prodPanelData(data) { + console.log('prodPanelData', data); + prodActions.setProdPanel(store, data); + } + public static prodData(data) { + console.log('prod', data); prodActions.setProd(store, data); } diff --git a/Thermo.Active/wwwroot/src/services/prodService.ts b/Thermo.Active/wwwroot/src/services/prodService.ts index 87861038..ec1f6ceb 100644 --- a/Thermo.Active/wwwroot/src/services/prodService.ts +++ b/Thermo.Active/wwwroot/src/services/prodService.ts @@ -8,10 +8,16 @@ export class ProdService extends baseRestService { BASE_URL = async () => (await CONFIGURATION).api.apiServerUrl + "/api/prod/"; async GetProd() { - let result = await this.Put((await this.BASE_URL()) + "get", true); + let result = await this.Get((await this.BASE_URL()) + "get", true); prodActions.setProd(store, result); return result; } + async GetProdPanel() { + let result = await this.Get((await this.BASE_URL()) + "prodPanel", true); + prodActions.setProdPanel(store, result); + return result; + } + } export const prodService = new ProdService(); \ No newline at end of file diff --git a/Thermo.Active/wwwroot/src/store/prod.store.ts b/Thermo.Active/wwwroot/src/store/prod.store.ts index 18fd3651..bead1f7c 100644 --- a/Thermo.Active/wwwroot/src/store/prod.store.ts +++ b/Thermo.Active/wwwroot/src/store/prod.store.ts @@ -2,25 +2,30 @@ import Vue from "vue"; export interface ProdStoreModel { prod: Prod.IProd; + panel: Prod.IProdPanel; } export interface ProdActions { setProd(context, model: Prod.IProd); + setProdPanel(context, model: Prod.IProdPanel); } export interface ProdGetters { getProd: () => Prod.IProd; + getProdPanel: () => Prod.IProdPanel; } export const prodStore = { state: { prod: {}, + panel: {} } as ProdStoreModel, getters: { getProd: (state) => (): Prod.IProd => (state as ProdStoreModel).prod, + getProdPanel: (state) => (): Prod.IProdPanel => (state as ProdStoreModel).panel, }, mutations: { @@ -28,12 +33,18 @@ export const prodStore = { SetProd(state, model: Prod.IProd) { for (const key in model) { if (model.hasOwnProperty(key)) { - if (model[key]) - Vue.set(state.prod, key, model[key]); + Vue.set(state.prod, key, model[key]); } } }, + SetProdPanel(state, model: Prod.IProdPanel) { + for (const key in model) { + if (model.hasOwnProperty(key)) { + Vue.set(state.panel, key, model[key]); + } + } + }, }, actions: { @@ -42,6 +53,9 @@ export const prodStore = { context.commit("SetProd", model); }, + setProdPanel(context, model: Prod.IProdPanel) { + context.commit("SetProdPanel", model); + }, } as ProdActions }