Fix UI components

2020-10-08 18:09:46 +02:00
parent ccb3054ec7
commit 592984bd22
10 changed files with 51 additions and 18 deletions
@@ -57,9 +57,15 @@

     .gauge {
       .dial {
-         fill: rgba(153, 207, 255, 0.6);
         stroke: #003366;
         stroke-width: 2.5;
+         fill: rgba(153, 207, 255, 0.0);
+         &.ok{
+          fill: rgba(153, 207, 255, 0.6);
+         }
+         &.pre{
+          fill: rgba(250, 163, 70, 0.6);
+         }
       }

       .value {
@@ -404,6 +404,7 @@
  flex-flow: column nowrap;
  align-items: center;
  justify-content: flex-end;
+  cursor: pointer;

  .body {
    display: grid;
@@ -462,7 +463,6 @@

    i {
      font-size: 32px;
-      cursor: pointer;
    }
  }

@@ -4193,9 +4193,17 @@ article .box .body {
 }
 .gauge-container .gauge1 .gauge .dial,
 .gauge-container .gauge2 .gauge .dial {
-  fill: rgba(153, 207, 255, 0.6);
  stroke: #003366;
  stroke-width: 2.5;
+  fill: rgba(153, 207, 255, 0);
+}
+.gauge-container .gauge1 .gauge .dial.ok,
+.gauge-container .gauge2 .gauge .dial.ok {
+  fill: rgba(153, 207, 255, 0.6);
+}
+.gauge-container .gauge1 .gauge .dial.pre,
+.gauge-container .gauge2 .gauge .dial.pre {
+  fill: rgba(250, 163, 70, 0.6);
 }
 .gauge-container .gauge1 .gauge .value,
 .gauge-container .gauge2 .gauge .value {
@@ -4546,6 +4554,7 @@ article .box .body {
  flex-flow: column nowrap;
  align-items: center;
  justify-content: flex-end;
+  cursor: pointer;
 }
 .history-item .body {
  display: grid;
@@ -4595,7 +4604,6 @@ article .box .body {
 }
 .history-item .col i {
  font-size: 32px;
-  cursor: pointer;
 }
 .history-item button.trash {
  border-radius: 25px;
@@ -55,23 +55,23 @@ export default class Slider extends Vue {
  startIncrement() {
    if (!this.value.status.enabled) return;
    this.incrementValue();
-    this.incrementing = setInterval(this.incrementValue, 100);
+    this.incrementing = setInterval(this.incrementValue, 500);
  } 

  startDecrement() {
    if (!this.value.status.enabled) return;    
    this.decrementValue();
-    this.incrementing = setInterval(this.decrementValue, 100);
+    this.incrementing = setInterval(this.decrementValue, 500);
  }
  
  decrementValue(){
    var v = this.value.setpointHMI;
-    if (v < this.value.range.max) {
+    if (v > this.value.range.min) {
      v -= this.step;
      this.step += this.incrementingStep * this.initalStep;
    }
-    if (v > this.value.range.max) {
-      v = this.value.range.max;
+    if (v < this.value.range.min) {
+      v = this.value.range.min;
    }
    this.actualvalue = parseFloat(v.toFixed(this.value.numDec));
  }
@@ -5,6 +5,7 @@
 			<svg viewBox="8,8,84,84" class="gauge">
 				<path
 					class="dial"
+					:class="{'ok': (prod.numDone >=0), 'pre': (prod.numDone <0) }"
 					fill="none"
 					stroke="#eee"
 					stroke-width="2"
@@ -1,6 +1,6 @@
  <template>
 	<div class="history-item">
-		<div class="body">
+		<div class="body" @click="showDetails = !showDetails">
 			<label :class="{red: value.isScrap}">{{value.numDone}}</label>
 			<div class="col">
 				<small>{{'history-item_warmup' | localize("tempo riscaldo")}}</small>
@@ -15,8 +15,8 @@
 				<span>{{Math.floor(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>
+				<i class="fa fa-caret-left" v-if="!showDetails"></i>
+				<i class="fa fa-caret-down" v-if="showDetails"></i>
 			</div>
 		</div>
 		<div class="subitems" v-if="showDetails">
@@ -27,6 +27,8 @@ import { SoftKeysConfigurationModel } from '@/store/machineInfo.store';
 })
 export default class Dashboard extends Vue {

+  recipe: Recipe.IRecipe = this.$store.getters.getCurrent();
+  
  selectedChart: 'tempociclo' | 'pezziora' = "pezziora";

  get panel() {
@@ -109,15 +109,15 @@
 				</div>
 			</div>

-			<div class="setpoint">
+			<div class="setpoint" v-if="recipe && recipe.pyrometer_pyrometer_setpoint">
 				<img src="assets/icons/png/inv.png" />
-				<label>{{panel.tempAct}}°C</label>
+				<label>{{recipe.pyrometer_pyrometer_setpoint.valueAct}}{{recipe.pyrometer_pyrometer_setpoint.unitMeasure}}</label>
 				<button @click="sendSoftKey('dash_setpoint_minus')">
 					<i class="fa fa-minus"></i>
 				</button>
 				<div>
 					<small>{{'dashboard-setpoint' | localize('set point')}}</small>
-					<span>{{panel.tempSetpoint}}°C</span>
+					<span>{{recipe.pyrometer_pyrometer_setpoint.setpointHMI}}{{recipe.pyrometer_pyrometer_setpoint.unitMeasure}}</span>
 				</div>
 				<button @click="sendSoftKey('dash_setpoint_plus')">
 					<i class="fa fa-plus"></i>
@@ -27,6 +27,9 @@ export default class GanttComponent extends Vue {
  @InjectReactive()
  ganttOptions: IGanttOptions;

+  mousePosX = 0;
+  mousePosY = 0;
+
  get blockType() {
    switch (this.value.type) {
      case 1: return 'heating';
@@ -45,6 +48,16 @@ export default class GanttComponent extends Vue {
    return null;
  }

+  mouseDw(evt){
+    this.mousePosX = evt.clientX;    
+    this.mousePosY = evt.clientY;
+  }
+  
+  mouseUp(evt){
+    if(Math.abs(this.mousePosX - evt.clientX) < 20 && Math.abs(this.mousePosY - evt.clientY) < 20)
+      this.openModal();
+  }
+
  get duration() {
    let value = 0
    switch (this.value.type) {
@@ -6,7 +6,12 @@
 		:width="ganttOptions.secondSize * (delayDuration + duration)"
 		:height="ganttOptions.elementHeight + 5"
 	>
-		<g transform="translate(0 5)">
+		<g transform="translate(0 5)" 
+		@mousedown="mouseDw" 
+		@mouseup="mouseUp"
+		v-on:touchstart="mouseDw"
+		v-on:touchend="mouseUp"		
+		 >
 			<rect x="0" y="0" width="100%" height="70" class="body" />
 			<rect x="0" y="0" width="100%" height="44" class="header" />

@@ -38,8 +43,6 @@
 				>
 					<div
 						class="body-header"
-						@mousedown.stop.prevent
-						@click="openModal()"
 					>{{value.label | localize(value.label)}}</div>
 				</foreignObject>
 				<foreignObject