Egalware/cms_thermo_active
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add dashboard component

Browse Source
This commit is contained in:
francesco.guerrieri
2020-05-11 14:11:17 +02:00
parent 9c1928c7ae
commit 3532ef89f5
18 changed files with 316 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Thermo.Active/wwwroot/assets/icons/png/bg.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 406 KiB

Thermo.Active/wwwroot/assets/icons/png/bg@2x.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.0 MiB

Thermo.Active/wwwroot/assets/icons/png/bg@3x.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.6 MiB

Thermo.Active/wwwroot/assets/icons/png/inv.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

Thermo.Active/wwwroot/assets/icons/png/inv@2x.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.6 KiB

Thermo.Active/wwwroot/assets/icons/png/inv@3x.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.2 KiB

Thermo.Active/wwwroot/assets/styles/base/dashboard.less
+21
View File
@@ -0,0 +1,21 @@
// out: false, sourceMap: false, main: ../style.less
@import "grid-system.less";
@import "colors.less";
@import "fonts.less";
@modal: modal;
.dashboard{
height: 100%;
width: 100%;
background-image: url("../../assets/icons/png/bg.png");
section{
display: flex;
.specific{
display: flex;
flex-direction: column;
div{
display: flex;
}
}
}
}
Thermo.Active/wwwroot/assets/styles/base/layout.less
+1
View File
@@ -1,6 +1,7 @@
// out: false, sourceMap: false, main: ../style.less
@import "colors.less";
@import "modals.less";
@import "dashboard.less";
@import "pirometro.less";
@import "riscaldi.less";
@import "formato.less";
Thermo.Active/wwwroot/assets/styles/style.css
+15
View File
@@ -3670,6 +3670,21 @@
box-sizing: border-box;
resize: none;
}
.dashboard {
height: 100%;
width: 100%;
background-image: url("../../assets/icons/png/bg.png");
}
.dashboard section {
display: flex;
}
.dashboard section .specific {
display: flex;
flex-direction: column;
}
.dashboard section .specific div {
display: flex;
}
.modal.pirometro-info {
width: 1820px;
height: 980px;
Thermo.Active/wwwroot/src/App.vue
+1 -1
View File
@@ -1,7 +1,7 @@
<template>
<div class="container">
<div id="app">
<app-header :class="{'blur':applyBlur}"></app-header>
<app-header :blurHeader="applyBlur"></app-header>
<alarm-list :applyBlur="applyBlur"></alarm-list>
<under-the-hood :class="{'blur':(applyBlur || applyBlurNc)}"></under-the-hood>
Thermo.Active/wwwroot/src/addMockData.ts
+24 -24
View File
@@ -216,31 +216,31 @@ function addMockData(){
reps: 12324
}
alarm={
id:1,
guid:"ILYGYFC",
source:"PLC",
message:"allarmeprove1",
Message:"allarmeprova1",
dateTime:null,
DateTime:null,
isWarning:false,
restorationIsEnabled:false,
process:1
}
// alarm={
// id:1,
// guid:"ILYGYFC",
// source:"PLC",
// message:"allarmeprove1",
// Message:"allarmeprova1",
// dateTime:null,
// DateTime:null,
// isWarning:false,
// restorationIsEnabled:false,
// process:1
// }
alarm2={
id:2,
guid:"VKYCOLUV",
source:"PLC",
message:"allarmeprova2",
Message:"allarmeprova2",
dateTime:null,
DateTime:null,
isWarning:false,
restorationIsEnabled:false,
process:2
}
// alarm2={
// id:2,
// guid:"VKYCOLUV",
// source:"PLC",
// message:"allarmeprova2",
// Message:"allarmeprova2",
// dateTime:null,
// DateTime:null,
// isWarning:false,
// restorationIsEnabled:false,
// process:2
// }
processModelActions.addProcess(store,process);
machineInfoActions.updateMachineInfo(store,machineInfo);
Thermo.Active/wwwroot/src/app.business-logic.ts
+2
View File
@@ -16,6 +16,7 @@ import ShowEstrazioneInfo from "@/app_modules_thermo/setup/estrazione/components
import ShowVuotoInfo from "@/app_modules_thermo/setup/vuoto/show-vuoto-info.vue";
import ShowImbutituraInfo from "@/app_modules_thermo/setup/imbutitura/show-imbutitura-info.vue";
import ShowOpzioniInfo from "@/app_modules_thermo/setup/opzioni/show-opzioni-info.vue";
import Dashboard from "@/app_modules_thermo/dashboard/dashboard.vue";
import ShowArretramentoRiscaldiInfo from "@/app_modules_thermo/processo/arretramento-riscaldi/show-arretramento-riscladi-info.vue";
// import { DataService } from "./services/dataService";
// import { ToolingService } from "./services/toolingService";
@@ -51,6 +52,7 @@ let HMIScreenshotInterval;
let HMIprodTimeout;
let RerenderInterval;
messageService.subscribeToChannel("show-dashboard-info", () => { ModalHelper.ShowModal(Dashboard); });
messageService.subscribeToChannel("show-arretramento-riscaldi-info", () => { ModalHelper.ShowModal(ShowArretramentoRiscaldiInfo); });
messageService.subscribeToChannel("show-opzioni-info", () => { ModalHelper.ShowModal(ShowOpzioniInfo); });
messageService.subscribeToChannel("show-vuoto-info", () => { ModalHelper.ShowModal(ShowVuotoInfo); });
Thermo.Active/wwwroot/src/app_modules_thermo/dashboard/dashboard.ts
+60
View File
@@ -0,0 +1,60 @@
import Vue from 'vue';
import Component from 'vue-class-component';
import {Prop} from 'vue-property-decorator';
import { messageService } from '@/_base';
import { ModalHelper } from '@/components/modals';
import AppRibbon from "@/components/app-ribbon.vue";
import { AppModel } from '@/store';
@Component({
components: {
appRibbon: AppRibbon
}
})
export default class Dashboard extends Vue{
$store: any;
public get state() { return this.$store.state.machineStatus; };
public get isMainViewLiftedUp() { return this.$store.state.isMainViewLiftedUp; }
public get mainStatus() { return this.$store.getters.mainStatus; };
public get powerOnStatus() { return this.$store.getters.powerOnAlarms; };
public get ribbonStatus(): ribbonStatusEnum {
// Controllo se ci sono allarmi
let s = this.$store.state as AppModel;
if (s.alarms.alarms.length > 0) return ribbonStatusEnum.Alarm;
if (s.alarms.warnings.length > 0) return ribbonStatusEnum.Warning;
if (s.process.running) return ribbonStatusEnum.Working;
return ribbonStatusEnum.Idle;
}
public get showDetails(): boolean {
let s = this.$store.state as AppModel;
switch (this.ribbonStatus) {
case ribbonStatusEnum.Warning:
return s.alarms.warnings.length == 1;
case ribbonStatusEnum.Alarm:
return s.alarms.alarms.length == 1;
default: return false;
}
}
close() {
messageService.deleteChannel("esc_pressed");
ModalHelper.HideModal();
};
}
enum ribbonStatusEnum {
Idle = 0,
Working = 1,
Warning = 2,
Alarm = 3
}
Thermo.Active/wwwroot/src/app_modules_thermo/dashboard/dashboard.vue
+80
View File
@@ -0,0 +1,80 @@
<template>
<div class="dashboard">
<!-- <div class="header">
<div slot="header-buttons">
<button class="modal-close" @click="close()">
<i class="fa fa-remove"></i>
</button>
</div>
</div> -->
<div slot="header-buttons">
<button class="modal-close" @click="close()">
<i class="fa fa-remove"></i>
</button>
</div>
<!--
<app-ribbon :status="{'alarm': ribbonStatus == 3, 'working': ribbonStatus == 1, 'warning': ribbonStatus == 2}"
:expanded="ribbonStatus>1"
:show-expander="ribbonStatus>1"
:has-service="serviceRequired">
<i class="fa fa-check" slot="icon" :title="'header_tooltip_nc_idle' | localize('Nc in Idle state')"></i>
<div slot="content" class="content" v-if="ribbonStatus>1" :title="'header_tooltip_nc_error' | localize('Open/Close alarm list')">
<strong v-if="!showDetails">{{alarmTitle | localize(alarmTitle,alarmCount)}}</strong>
<strong v-if="showDetails && alarms[0].title">{{alarms[0].title}}</strong>
<strong v-if="showDetails && !alarms[0].title">{{'alarm_'+ alarms[0].id | localize('alarm_'+ alarms[0].id)}}</strong>
<div v-if="showDetails">
<span class="processes">{{alarms[0].source}}</span>
<span class="processes" v-if="alarms[0].source === 'PLC' && alarms[0].process.length>0">
<span v-for="p in alarms[0].process" :key="p" >{{ p }} </span>
</span>
<span class="processes" v-if="alarms[0].source !== 'PLC' && alarms[0].process">{{ alarms[0].process }}</span>
</div>
</div>
<div slot="service" class="content" v-if="serviceRequired">
<strong>{{'header_maintainance_request' | localize('Effettuare manutenzione')}}</strong>
<span>{{'header_maintainance_request_explanation' | localize('C\'è una procedura da effettuare')}}</span>
</div>
</app-ribbon> -->
<!-- <app-header :class="{'blur':applyBlur}"></app-header> -->
<!-- <section>
<div class="specific">
<div>
<img src="assets/icons/png/inv.png">
<label>(temperatura)</label>
</div>
<div>
<button>-</button>
<div class="specific">
<label>setpoint</label>
<label>(temperatura)</label>
</div>
<button>+</button>
</div>
</div>
<div class="specific">
<label>TEMPO RESTANTE</label>
<label>(tempo)</label>
</div>
<div class="specific">
<div>
<div class="specific">
<label>PEZZI/ORA</label>
<label>(rapporto)</label>
</div>
<div class="specific">
<label>TEMPO/CICLO</label>
<label>(rapporto)</label>
</div>
</div>
<div></div>
<aside class="scrollable">
</aside>
</div>
</section> -->
</div>
</template>
<script lang="ts" src="./dashboard.ts"></script>
Thermo.Active/wwwroot/src/app_modules_thermo/setup/components/setup.vue
+1 -1
View File
@@ -80,7 +80,7 @@
></setup-button>
<div class="setup-play">
<img class="dim" src="assets/icons/svg/setup-play.svg" />
<img class="dim" src="assets/icons/svg/setup-play.svg" @click="sendMessage('show-dashboard-info')"/>
</div>
</div>
</modal>
Thermo.Active/wwwroot/src/components/app-ribbon.ts
+85
View File
@@ -0,0 +1,85 @@
// import Vue from "vue";
// import { alarmsModelActions } from "src/store";
// import { Factory, messageService } from "src/_base";
// import { Prop, Watch } from "vue-property-decorator";
// export default class AppRibbon extends Vue {
// @Prop({ default: false })
// showExpander: boolean;
// @Prop({ default: null })
// status;
// @Prop({ default: false })
// expanded: boolean;
// @Prop({ default: false })
// hasService: boolean;
// serviceExpanded: boolean = false;
// @Watch("hasService")
// hasServiceChanged(oldV,newV) {
// this.serviceExpanded = !this.expanded;
// }
// @Watch("opened")
// hasOpened(){
// if(this.$store.state.alarms.opened || this.$store.state.alarms.serviceOpened)
// messageService.publishToChannel("HMI-show-alarms");
// else
// messageService.publishToChannel("HMI-hide-alarms",300);
// }
// @Watch("serviceOpened")
// hasServiceOpened(){
// if(this.$store.state.alarms.opened || this.$store.state.alarms.serviceOpened)
// messageService.publishToChannel("HMI-show-alarms");
// else
// messageService.publishToChannel("HMI-hide-alarms",300);
// }
// // hasService() {
// // return !this.$slots["service"];
// // },
// toggleServiceExpanded() {
// if(this.$store.state.alarms.opened && !this.serviceExpanded)
// alarmsModelActions.toggleServiceOpened(this.$store,true);
// else if(this.serviceExpanded)
// alarmsModelActions.toggleServiceOpened(this.$store,!this.$store.state.alarms.serviceOpened);
// this.serviceExpanded = true;
// alarmsModelActions.toggleOpened(this.$store, false);
// }
// toggleExpanded() {
// if(this.status.alarm || this.status.warning)
// {
// if(this.$store.state.alarms.serviceOpened && this.serviceExpanded)
// alarmsModelActions.toggleOpened(this.$store,true);
// else if(!this.serviceExpanded)
// alarmsModelActions.toggleOpened(this.$store,!this.$store.state.alarms.opened);
// this.serviceExpanded = false;
// alarmsModelActions.toggleServiceOpened(this.$store, false);
// }
// }
// opened() {
// return this.$store.state.alarms.opened;
// }
// serviceOpened() {
// return this.$store.state.alarms.serviceOpened;
// }
// mainExpanded() {
// if (!this.hasService) return this.expanded;
// return !this.serviceExpanded && this.expanded;
// }
// };
Thermo.Active/wwwroot/src/modules/app-header.ts
+4
View File
@@ -7,6 +7,7 @@ import { /*Factory,*/ messageService } from "@/_base";
//import { Watch } from "vue-property-decorator";
import AppRibbon from "@/components/app-ribbon.vue";
import UserInfo from "@/app_modules/machine/components/user-info.vue";
import { Prop } from "vue-property-decorator";
declare let $: any;
@@ -20,6 +21,9 @@ declare let $: any;
export default class AppHeader extends Vue {
$store: any;
@Prop({ default:false })
blurHeader:boolean;
public get state() { return this.$store.state.machineStatus; };
public get isMainViewLiftedUp() { return this.$store.state.isMainViewLiftedUp; }
public get mainStatus() { return this.$store.getters.mainStatus; };
Thermo.Active/wwwroot/src/modules/app-header.vue
+22 -12
View File
@@ -3,7 +3,8 @@
<app-ribbon :status="{'alarm': ribbonStatus == 3, 'working': ribbonStatus == 1, 'warning': ribbonStatus == 2}"
:expanded="ribbonStatus>1"
:show-expander="ribbonStatus>1"
:has-service="serviceRequired">
:has-service="serviceRequired"
>
<i class="fa fa-check" slot="icon" v-if="ribbonStatus == 0" :title="'header_tooltip_nc_idle' | localize('Nc in Idle state')"></i>
<i class="fa fa-play" slot="icon" v-if="ribbonStatus == 1" :title="'header_tooltip_nc_running' | localize('Nc in Running state')"></i>
<i class="fa fa-exclamation" slot="icon" v-if="ribbonStatus >1" :title="'header_tooltip_nc_error' | localize('Open/Close alarm list')"></i>
@@ -17,7 +18,7 @@
<span v-for="p in alarms[0].process" :key="p" >{{ p }} </span>
</span>
<span class="processes" v-if="alarms[0].source !== 'PLC' && alarms[0].process">{{ alarms[0].process }}</span>
</div>
</div>
</div>
<div slot="service" class="content" v-if="serviceRequired">
<strong>{{'header_maintainance_request' | localize('Effettuare manutenzione')}}</strong>
@@ -25,43 +26,49 @@
</div>
</app-ribbon>
<button class="unclickable over"
:class="{ red: mainStatus, blue: !mainStatus}"
:class="{ red: mainStatus, blue: !mainStatus, blur: blurHeader}"
:title=" mainStatus ? $options.filters.localize('header_tooltip_mainstat_ko','Machine Hardware not Ready') : $options.filters.localize('header_tooltip_mainstat_ok','Machine Hardware is running correctly') " >
<img class="h-24" src="assets/icons/png/switch-icon@2x.png">
</button>
<button class="power-on unclickable over"
:title="'header_tooltip_power-on' | localize('Power On')"
:disabled="!state.powerOnAlarm.clickable || checkSecurityDisabled('startupIcons')"
v-if=" state.powerOnAlarm && state.powerOnAlarm.active" @click="manageClick(state.powerOnAlarm)"><img src="assets/icons/png/control-icon-error@2x.png"></button>
v-if=" state.powerOnAlarm && state.powerOnAlarm.active" @click="manageClick(state.powerOnAlarm)"
:class="{'blur':blurHeader}"><img src="assets/icons/png/control-icon-error@2x.png"></button>
<button class="airflow unclickable over"
:title="'header_tooltip_air-flow' | localize('Air Flow')"
:disabled="!state.airPressureAlarm.clickable || checkSecurityDisabled('startupIcons')"
v-if=" state.airPressureAlarm && state.airPressureAlarm.active" @click="manageClick(state.airPressureAlarm)"><img src="assets/icons/png/air-icon@2x.png"></button>
v-if=" state.airPressureAlarm && state.airPressureAlarm.active" @click="manageClick(state.airPressureAlarm)"
:class="{'blur':blurHeader}"><img src="assets/icons/png/air-icon@2x.png"></button>
<button class="protections unclickable over"
:title="'header_tooltip_protections' | localize('Protections')"
:disabled="!state.protectionsAlarm.clickable || checkSecurityDisabled('startupIcons')"
v-if=" state.protectionsAlarm && state.protectionsAlarm.active" @click="manageClick(state.protectionsAlarm)"><img src="assets/icons/png/lock-icon-error@2x.png"></button>
v-if=" state.protectionsAlarm && state.protectionsAlarm.active" @click="manageClick(state.protectionsAlarm)"
:class="{'blur':blurHeader}"><img src="assets/icons/png/lock-icon-error@2x.png"></button>
<button class="emergency unclickable over"
:title="'header_tooltip_emergency' | localize('Emergency')"
:disabled="!state.emergencyAlarm.clickable || checkSecurityDisabled('startupIcons')"
v-if=" state.emergencyAlarm && state.emergencyAlarm.active" @click="manageClick(state.emergencyAlarm)"><img src="assets/icons/png/refresh-icon-error@2x.png"></button>
v-if=" state.emergencyAlarm && state.emergencyAlarm.active" @click="manageClick(state.emergencyAlarm)"
:class="{'blur':blurHeader}"><img src="assets/icons/png/refresh-icon-error@2x.png"></button>
<button class="settings-mode unclickable over"
:title="'header_tooltip_settings-mode' | localize('Settings Mode')"
:disabled="!state.settingsModeAlarm.clickable || checkSecurityDisabled('startupIcons')"
v-if=" state.settingsModeAlarm && state.settingsModeAlarm.active" @click="manageClick(state.settingsModeAlarm)"><img src="assets/icons/png/no-settings@2x.png"></button>
v-if=" state.settingsModeAlarm && state.settingsModeAlarm.active" @click="manageClick(state.settingsModeAlarm)"
:class="{'blur':blurHeader}"><img src="assets/icons/png/no-settings@2x.png"></button>
<button class="key unclickable over"
:title="'header_tooltip_key' | localize('Startup')"
:disabled="!state.keyReadyAlarm.clickable || checkSecurityDisabled('startupIcons')"
v-if=" state.keyReadyAlarm && state.keyReadyAlarm.active" @click="manageClick(state.keyReadyAlarm)"><img src="assets/icons/png/key-icon-error@2x.png"></button>
v-if=" state.keyReadyAlarm && state.keyReadyAlarm.active" @click="manageClick(state.keyReadyAlarm)"
:class="{'blur':blurHeader}"><img src="assets/icons/png/key-icon-error@2x.png"></button>
<button class="unclickable over"
:title=" powerOnStatus ? $options.filters.localize('header_tooltip_powstat_ko','Machine Not Ready to work') : $options.filters.localize('header_tooltip_powstat_ok','Machine Is Ready to worky') "
:class="{ red: powerOnStatus, blue: !powerOnStatus}">
:class="{ red: powerOnStatus, blue: !powerOnStatus, blur: blurHeader }">
<img src="assets/icons/png/ok-white.png" class="h-20" v-if="!powerOnStatus">
<img src="assets/icons/png/not-ok-white.png" class="h-20" v-if="powerOnStatus">
</button>
@@ -69,23 +76,26 @@
:disabled="!state.resetAxesAlarm.clickable || checkSecurityDisabled('startupIcons')"
v-if=" state.resetAxesAlarm && state.resetAxesAlarm.active"
:title="'header_tooltip_zeroing' | localize('Make Zero Axes')"
:class="{'blur':blurHeader}"
@click="manageClick(state.resetAxesAlarm)"><img src="assets/icons/png/taratura-icon-error@2x.png"></button>
<button class="key over"
:disabled="!state.waterJet1Alarm.clickable || checkSecurityDisabled('startupIcons')"
v-if=" state.waterJet1Alarm && state.waterJet1Alarm.active"
:class="{'blur':blurHeader}"
@click="manageClick(state.waterJet1Alarm)"></button>
<button class="key over"
:disabled="!state.waterJet2Alarm.clickable || checkSecurityDisabled('startupIcons')"
v-if=" state.waterJet2Alarm && state.waterJet2Alarm.active"
:class="{'blur':blurHeader}"
@click="manageClick(state.waterJet2Alarm)"></button>
<div class="process-container over" v-for="p in processes" :key="p.id">
<div class="process-container over" v-for="p in processes" :key="p.id" :class="{'blur':blurHeader}">
<process-info :counter="p.reps" :status="p.status" :id="p.id">
<strong v-if="p.visible && !mainStatus">{{p.partProgramName}}</strong>
</process-info>
<button v-if="p.visible && !mainStatus" class="save-circle"></button>
<button v-if="p.visible && !mainStatus" class="dot-circle"></button>
</div>
<user-info></user-info>
<user-info :class="{'blur':blurHeader}"></user-info>
</header>
</template>