fix gauges
This commit is contained in:
=
@@ -9,6 +9,19 @@
|
||||
|
||||
.box-gauge {
|
||||
width: 68px;
|
||||
position: relative;
|
||||
|
||||
.value {
|
||||
position: absolute;
|
||||
top: 35%;
|
||||
margin: auto;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
/* right: 0; */
|
||||
text-align: center;
|
||||
font-size: 0.8rem;
|
||||
color: @color-darkish-blue;
|
||||
}
|
||||
|
||||
div {
|
||||
|
||||
|
||||
@@ -4801,6 +4801,18 @@ article .box .body {
|
||||
}
|
||||
.arch .box-gauge {
|
||||
width: 68px;
|
||||
position: relative;
|
||||
}
|
||||
.arch .box-gauge .value {
|
||||
position: absolute;
|
||||
top: 35%;
|
||||
margin: auto;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
/* right: 0; */
|
||||
text-align: center;
|
||||
font-size: 0.8rem;
|
||||
color: #002680;
|
||||
}
|
||||
.arch .box-gauge div:last-of-type {
|
||||
margin-top: -25px;
|
||||
|
||||
+13
-6
@@ -18,15 +18,22 @@ export default class archinterface extends Vue {
|
||||
|
||||
@Watch('gaugeData')
|
||||
gaugeDataChanged(n, o) {
|
||||
if (this.gaugePower) this.gaugePower.setValueAnimated(n.power, 1);
|
||||
if (this.gaugeAir) this.gaugeAir.setValueAnimated(n.air, 1);
|
||||
if (this.gaugeVacuum) this.gaugeVacuum.setValueAnimated(n.vacuum, 1);
|
||||
|
||||
if (this.gaugePower) {
|
||||
this.gaugePower.setValueAnimated(n.power.value * 100 / (n.power.maxVal - n.power.minVal), 1)
|
||||
};
|
||||
if (this.gaugeAir) {
|
||||
this.gaugeAir.setValueAnimated(n.air.value * 100 / (n.air.maxVal - n.air.minVal), 1);
|
||||
}
|
||||
if (this.gaugeVacuum) {
|
||||
this.gaugeVacuum.setValueAnimated(n.vacuum.value * 100 / (n.vacuum.maxVal - n.vacuum.minVal), 1);
|
||||
}
|
||||
}
|
||||
|
||||
mounted() {
|
||||
this.gaugePower = Gauge(this.$refs.gauge1, { min: 0, max: 100, value: 0 });
|
||||
this.gaugeAir = Gauge(this.$refs.gauge2, { min: 0, max: 100, value: 0 });
|
||||
this.gaugeVacuum = Gauge(this.$refs.gauge3, { min: 0, max: 100, value: 0 });
|
||||
this.gaugePower = Gauge(this.$refs.gauge1, { min: 0, max: 100, value: 0, showValue: false });
|
||||
this.gaugeAir = Gauge(this.$refs.gauge2, { min: 0, max: 100, value: 0, showValue: false });
|
||||
this.gaugeVacuum = Gauge(this.$refs.gauge3, { min: 0, max: 100, value: 0, showValue: false });
|
||||
}
|
||||
|
||||
|
||||
|
||||
+35
-28
@@ -1,33 +1,40 @@
|
||||
<template>
|
||||
<div class="arch">
|
||||
<div class="arch">
|
||||
<div class="box-gauge">
|
||||
<div ref="gauge1" class="gauge-container three"></div>
|
||||
<div
|
||||
v-if="gaugeData && gaugeData.power"
|
||||
class="value"
|
||||
>{{gaugeData.power.value | round(gaugeData.power.numDec)}}</div>
|
||||
<div v-if="gaugeData && gaugeData.power">
|
||||
<label>{{gaugeData.power.um}}</label>
|
||||
<label>{{gaugeData.power.label | localize("Potenza")}}</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="box-gauge">
|
||||
<div ref="gauge1" class="gauge-container three">
|
||||
</div>
|
||||
<div>
|
||||
<label>Kw</label>
|
||||
<label>Potenza</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-gauge">
|
||||
<div ref="gauge2" class="gauge-container three"></div>
|
||||
<div
|
||||
v-if="gaugeData && gaugeData.air"
|
||||
class="value"
|
||||
>{{gaugeData.air.value | round(gaugeData.air.numDec)}}</div>
|
||||
<div v-if="gaugeData && gaugeData.air">
|
||||
<label>{{gaugeData.air.um}}</label>
|
||||
<label>{{gaugeData.air.label | localize("Aria")}}</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="box-gauge">
|
||||
<div ref="gauge2" class="gauge-container three">
|
||||
</div>
|
||||
<div>
|
||||
<label>bar</label>
|
||||
<label>Aria</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="box-gauge">
|
||||
<div ref="gauge3" class="gauge-container three">
|
||||
</div>
|
||||
<div>
|
||||
<label>bar</label>
|
||||
<label>Vuoto</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="box-gauge">
|
||||
<div ref="gauge3" class="gauge-container three"></div>
|
||||
<div
|
||||
v-if="gaugeData && gaugeData.vacuum"
|
||||
class="value"
|
||||
>{{gaugeData.vacuum.value | round(gaugeData.vacuum.numDec)}}</div>
|
||||
<div v-if="gaugeData && gaugeData.vacuum">
|
||||
<label>{{gaugeData.vacuum.um}}</label>
|
||||
<label>{{gaugeData.vacuum.label | localize("Vuoto")}}</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script src="./arch-interface.ts" lang="ts" ></script>
|
||||
|
||||
@@ -1,104 +1,162 @@
|
||||
<template>
|
||||
<header :class="{'turn-up':isMainViewLiftedUp}">
|
||||
<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" 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>
|
||||
<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>
|
||||
<button class="unclickable over"
|
||||
:class="{ red: mainStatus, blue: !mainStatus}"
|
||||
: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>
|
||||
<header :class="{'turn-up':isMainViewLiftedUp}">
|
||||
<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"
|
||||
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>
|
||||
<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>
|
||||
<button
|
||||
class="unclickable over"
|
||||
:class="{ red: mainStatus, blue: !mainStatus}"
|
||||
: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>
|
||||
|
||||
<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>
|
||||
<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>
|
||||
|
||||
<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>
|
||||
<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>
|
||||
|
||||
<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>
|
||||
<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>
|
||||
|
||||
<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>
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
<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 }">
|
||||
<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>
|
||||
<button class="key over"
|
||||
:disabled="!state.resetAxesAlarm.clickable || checkSecurityDisabled('startupIcons')"
|
||||
v-if=" state.resetAxesAlarm && state.resetAxesAlarm.active"
|
||||
:title="'header_tooltip_zeroing' | localize('Make Zero Axes')"
|
||||
|
||||
@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"
|
||||
|
||||
@click="manageClick(state.waterJet1Alarm)"></button>
|
||||
<button class="key over"
|
||||
:disabled="!state.waterJet2Alarm.clickable || checkSecurityDisabled('startupIcons')"
|
||||
v-if=" state.waterJet2Alarm && state.waterJet2Alarm.active"
|
||||
|
||||
@click="manageClick(state.waterJet2Alarm)"></button>
|
||||
<div class="process-container over" v-for="p in processes" :key="p.id" >
|
||||
<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>
|
||||
<archinterface></archinterface>
|
||||
<user-info></user-info>
|
||||
</header>
|
||||
<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>
|
||||
|
||||
<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 }"
|
||||
>
|
||||
<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>
|
||||
<button
|
||||
class="key over"
|
||||
:disabled="!state.resetAxesAlarm.clickable || checkSecurityDisabled('startupIcons')"
|
||||
v-if=" state.resetAxesAlarm && state.resetAxesAlarm.active"
|
||||
:title="'header_tooltip_zeroing' | localize('Make Zero Axes')"
|
||||
@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"
|
||||
@click="manageClick(state.waterJet1Alarm)"
|
||||
></button>
|
||||
<button
|
||||
class="key over"
|
||||
:disabled="!state.waterJet2Alarm.clickable || checkSecurityDisabled('startupIcons')"
|
||||
v-if=" state.waterJet2Alarm && state.waterJet2Alarm.active"
|
||||
@click="manageClick(state.waterJet2Alarm)"
|
||||
></button>
|
||||
<div class="process-container over" v-for="p in processes" :key="p.id">
|
||||
<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>
|
||||
<archinterface></archinterface>
|
||||
<user-info></user-info>
|
||||
</header>
|
||||
</template>
|
||||
<script lang="ts" src="./app-header.ts"></script>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user