Fix a lot of UI

2020-10-15 12:07:17 +02:00
parent b64446e68e
commit f842773efc
17 changed files with 160 additions and 93 deletions
@@ -224,12 +224,11 @@
      }

      .notenabled{    
-        color: #d0021b;
+        opacity: 0.5;
      }

      .strike{
        text-decoration: line-through;
-        color: #d0021b;
      }

      div {
@@ -165,11 +165,12 @@
            flex: 1;
            flex-flow: column;
            align-items: center;
-            .volantino{              
+            .volantino{
              height: 48px;
+              width: 48px;
              position: absolute;
              bottom: 101px;
-              right: 492px;
+              left: 100px;
            }
            .load-label{
              width: 100%;
@@ -147,9 +147,10 @@
 }
 .setup .modal section.body section article .svg-area .volantino {
  height: 48px;
+  width: 48px;
  position: absolute;
  bottom: 101px;
-  right: 492px;
+  left: 100px;
 }
 .setup .modal section.body section article .svg-area .load-label {
  width: 100%;
@@ -4436,11 +4437,10 @@ article .box .body {
  text-align: right;
 }
 .dashboard .first_col .setpoint .notenabled {
-  color: #d0021b;
+  opacity: 0.5;
 }
 .dashboard .first_col .setpoint .strike {
  text-decoration: line-through;
-  color: #d0021b;
 }
 .dashboard .first_col .setpoint div {
  display: flex;
@@ -71,61 +71,6 @@
       height="2.995194"
       x="15.595546"
       y="289.87576" />
-    <path
-       style="fill:#bbbcbc;fill-opacity:0;stroke:#bbbcbc;stroke-width:0.5291667;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.92936802"
-       d="M 37.253586,292.77887 V 239.86218"
-       id="path849"
-       inkscape:connector-curvature="0" />
-    <path
-       style="fill:none;stroke:#bbbcbc;stroke-width:0.44944954;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
-       d="m 35.676304,240.09202 h 3.151188"
-       id="path855"
-       inkscape:connector-curvature="0" />
-    <path
-       sodipodi:type="star"
-       style="fill:#bbbcbc;fill-opacity:1;stroke:#bbbcbc;stroke-width:0.26458332;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.92936802"
-       id="path857"
-       sodipodi:sides="3"
-       sodipodi:cx="62.114742"
-       sodipodi:cy="292.18243"
-       sodipodi:r1="1.8131941"
-       sodipodi:r2="0.90659708"
-       sodipodi:arg1="1.5707963"
-       sodipodi:arg2="2.6179939"
-       inkscape:flatsided="false"
-       inkscape:rounded="0"
-       inkscape:randomized="0"
-       d="m 62.114742,293.99563 -0.785136,-1.3599 -0.785136,-1.35989 1.570272,0 1.570272,0 -0.785136,1.35989 z"
-       inkscape:transform-center-y="0.45329498"
-       transform="matrix(0.99999994,0,0,1.000002,-24.861164,-1.0321708)" />
-    <path
-       style="fill:#bbbcbc;fill-opacity:0;stroke:#bbbcbc;stroke-width:0.34999999;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.92936802"
-       d="M 59.09758,289.27334 V 275.4386"
-       id="path849-1"
-       inkscape:connector-curvature="0" />
-    <path
-       style="fill:none;stroke:#bbbcbc;stroke-width:0.34999999;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
-       d="m 57.414584,275.3528 h 3.362391"
-       id="path855-0"
-       inkscape:connector-curvature="0" />
-    <path
-       sodipodi:type="star"
-       style="fill:#bbbcbc;fill-opacity:1;stroke:#bbbcbc;stroke-width:0.26458332;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.92936802"
-       id="path857-7"
-       sodipodi:sides="3"
-       sodipodi:cx="62.114742"
-       sodipodi:cy="292.18243"
-       sodipodi:r1="1.8131942"
-       sodipodi:r2="0.90659708"
-       sodipodi:arg1="1.5707963"
-       sodipodi:arg2="2.6179939"
-       inkscape:flatsided="false"
-       inkscape:rounded="0"
-       inkscape:randomized="0"
-       d="m 62.114742,293.99563 -0.785136,-1.3599 -0.785136,-1.35989 1.570272,0 1.570272,0 -0.785136,1.35989 z"
-       inkscape:transform-center-y="0.48678308"
-       transform="matrix(0.92838376,0,0,1.0738472,1.4312439,-26.446198)"
-       inkscape:transform-center-x="-2.0583999e-06" />
    <path
       style="fill:#bbbcbc;fill-opacity:0;stroke:#bbbcbc;stroke-width:0.3924405;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.92936802"
       d="M 99.430686,292.77887 V 263.6747"
@@ -37,7 +37,8 @@
 		</span>
 		<span class="done" v-if="prod.numPreHot && prod.numPreHot != 0">-{{prod.numPreHot}}</span>
 		<hr />
-		<span class="target">{{prod.numTarget}}</span>
+		<span class="target" v-if="prod.numTarget != 0">{{prod.numTarget}}</span>
+		<span class="target" v-else>--</span>
 	</div>
 </template>
 <script lang="ts" src="./gauge.ts"></script>
@@ -13,10 +13,15 @@ export default class Item extends Vue {
  panel: Prod.IProdPanel

  get noDisplayNumber(){ 
-      return this.panel && this.value.numDone > this.panel.numTarget;
+      return this.panel && this.panel.numTarget != 0 && this.value.numDone > this.panel.numTarget;
  }

  showDetails: boolean = false;
+  openCloseDetails(){
+    this.showDetails = !this.showDetails;
+    //if(this.showDetails)
+    //  this.$emit("close-detail",this.value.numDone);
+  }

  async setScrap(num: number) {
    this.value.isScrap = !this.value.isScrap;
@@ -1,6 +1,6 @@
  <template>
 	<div class="history-item">
-		<div class="body" @click="showDetails = !showDetails">
+		<div class="body" @click="openCloseDetails">
 			<label v-if="noDisplayNumber">--</label>
 			<label :class="{red: value.isScrap}" v-else>{{value.numDone}}</label>
 			<div class="col">
@@ -58,6 +58,19 @@ export default class stats extends Vue {
      return "--"
  }

+  get calcPointFill(){
+    let str = "0," + this.height + " ";
+
+    for (let index = 0; index < this.Values.length; index++) {
+      let x = index * (this.width / 19);
+      let y = this.height - (this.Values[index] - this.min) * this.height / this.delta
+      str += x + "," + y + " ";
+    }
+    let x = (this.Values.length -1) * (this.width / 19);
+    let y = this.height
+    str += x + "," + y + " ";
+    return str;
+  }
  get delta() {
    return Math.max(this.max - this.min, 1);
  }
@@ -23,6 +23,7 @@
 			/>
 		</g>-->
 		<g>
+ 			<polygon :points="calcPointFill" style="fill:#1791ff;stroke-width:0" fill-opacity="0.3" />
 			<path fill="none" :d="pathData" v-if="pathData" stroke="#1791ff" stroke-width="4" />
 			<circle 
 				v-for="(i,idx) in Values"
@@ -32,7 +33,7 @@
 				r="5" 
 				stroke="#1791ff" 
 				stroke-width="0" 
-				fill="#1791ff" />
+				fill="#1791ff" />				
 			<foreignObject
 				v-for="(i,idx) in Values"
 				:key="'val_'+idx" 
@@ -9,6 +9,7 @@ import gantt from "./gantt/gantt.vue";
 import zoom from "./gantt/zoomLevel.vue";
 import softKey from "./softkey.vue";
 import { Hub } from '@/services';
+import EditProduzione from "@/app_modules_thermo/setup/avvio-produzione/edit-produzione.vue";

@Component({
  components: {
@@ -39,6 +40,10 @@ export default class Processo extends Vue {
    return store.state.machineStatus.gaugeData;
  }

+  async editProd(){    
+    await ModalHelper.ShowModalAsync(EditProduzione);
+  }
+
  public sendMessage(name: string) {
    messageService.publishToChannel(name);
  }
@@ -21,7 +21,9 @@
 					></soft-key>
 				</template>
 				<label>
-					<div>{{actual}}/</div><button class="btn">{{tot}}</button>
+					<div>{{actual}}/</div>
+					<button @click="editProd" class="btn" v-if="tot != 0">{{tot}}</button>
+					<button @click="editProd" class="btn" v-else>--</button>
 				</label>
 			</div>
 			<gantt
@@ -2,7 +2,7 @@ import Vue from "vue";
 import { Modal, ModalHelper } from "@/components/modals";
 import { Factory, messageService, awaiter } from "@/_base";
 import Component from "vue-class-component";
-import { Prop } from 'vue-property-decorator';
+import { Prop,Watch } from 'vue-property-decorator';
 import { appModelActions, store } from "@/store/app.store";
 import { prodService } from "@/services/prodService";
 import { prodActions } from "@/store/prod.store";
@@ -37,6 +37,15 @@ export default class AvvioProduzione extends Vue {
    }
  } as Recipe.IValue;

+  
+  
+  @Watch("pieces.status.enabled")
+  changeMaxPieces(){
+    if(!this.pieces.status.enabled)
+    {
+      this.pieces.setpointHMI = 0;
+    }
+  }
  annulla() {
    ModalHelper.HideModal();
  };
@@ -32,7 +32,7 @@
 						</div>
 						<article class="body">
 							<div class="input-area mb-10">
-								<label>{{'production_enabling'|localize('Modifica numero pezzi')}}</label>
+								<label>{{'production_enabling'|localize('Set numero max di pezzi')}}</label>
 								<toggle-button v-model="pieces.status.enabled"></toggle-button>
 							</div>
 							<div class="input-area mb-10">
@@ -0,0 +1,68 @@
+import Vue from "vue";
+import { Modal, ModalHelper } from "@/components/modals";
+import { Factory, messageService, awaiter } from "@/_base";
+import Component from "vue-class-component";
+import { Prop,Watch } from 'vue-property-decorator';
+import { appModelActions, store } from "@/store/app.store";
+import { prodService } from "@/services/prodService";
+import { prodActions } from "@/store/prod.store";
+
+@Component({
+  components: {
+    modal: Modal,
+  }
+})
+export default class EditProduzione extends Vue {
+
+  pieces: Recipe.IValue = {
+    setpointHMI: 0,
+    range: { min: 0, max: 999999 },
+    status: {
+      enabled: true,
+      hasError: false,
+      visible: true
+    }
+  } as Recipe.IValue;
+  
+  @Watch("pieces.status.enabled")
+  changeMaxPieces(){
+    if(!this.pieces.status.enabled)
+    {
+      this.pieces.setpointHMI = 0;
+    }
+  }
+  annulla() {
+    ModalHelper.HideModal();
+  };
+
+  get prod() { return store.state.prod.panel }
+
+  async showDashboard() {
+
+    await prodService.Start(this.pieces.setpointHMI, false, 0);
+
+
+    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();
+  }
+
+  mounted() {
+    this.pieces.setpointHMI = this.prod.numTarget;
+  }
+
+}
@@ -0,0 +1,40 @@
+<template>
+	<div class="setup">
+		<modal
+			type="avvio-produzione-info"
+			:title="'edit_prod_lbl_title' | localize('Edit produzione')"
+		>
+			<div slot="header-buttons">
+				<button class="modal-close" @click="close()">
+					<i class="fa fa-remove"></i>
+				</button>
+			</div>
+			<section>
+				<article>
+					<div class="box mt-10">
+						<div class="header">
+							<label>{{'production_management' | localize("Gestione produzione")}}</label>
+						</div>
+						<article class="body">
+							<div class="input-area mb-10">
+								<label>{{'production_enabling'|localize('Set numero max di pezzi')}}</label>
+								<toggle-button v-model="pieces.status.enabled"></toggle-button>
+							</div>
+							<div class="input-area mb-10">
+								<label style="flex:1;">{{'mock_pieces'|localize('Numero pezzi')}}</label>
+								<label>{{prod.numDone}}/</label>
+								<numeric v-model="pieces" :keyboardPosition="'bottom'" />
+							</div>
+						</article>
+					</div>
+				</article>
+			</section>
+			<footer>
+				<button class="btn" @click="annulla()">{{'modal_cancel_button' | localize("Annulla")}}</button>
+				<button class="btn btn-success" @click="showDashboard()">{{'confirm' | localize("Conferma")}}</button>
+			</footer>
+		</modal>
+	</div>
+</template>
+
+<script lang="ts" src="./edit-produzione.ts"></script>
@@ -46,6 +46,7 @@ export default class ControlBox extends Vue {

  ontouchmove(event: TouchEvent) {
    if (!this.touching) return;
+    if(!this.value.status.enabled) return;

    let newtouch: { x: number, y: number } = null;
    for (const touch of Array.from(event.touches).slice(0, 1)) {
@@ -58,6 +59,7 @@ export default class ControlBox extends Vue {
    if (this.moveVertical)
      this.value.setpointHMI -= (newtouch.y - this.touching.y) * this.scale;

+    this.value.setpointHMI = parseFloat(this.value.setpointHMI.toFixed(this.value.numDec));
    this.value.setpointHMI = Math.min(Math.max(this.value.setpointHMI, this.value.range.min), this.value.range.max);

    // console.log(event, newtouch, this.touching);
@@ -25,30 +25,6 @@
 				<small>{{recipe.positions_frame_lower_speed.unitMeasure}}</small>
 			</div>
 		</div>
-		<div class="borded_label" id="quota3">
-			<div>
-				<img src="assets/icons/png/discesa.png" />
-				<span>00</span>
-				<small>mm</small>
-			</div>
-			<div>
-				<img src="assets/icons/png/alta.png" />
-				<span>00</span>
-				<small>mm</small>
-			</div>
-		</div>
-		<div class="borded_label" id="quota4">
-			<div>
-				<img src="assets/icons/png/discesa.png" />
-				<span>00</span>
-				<small>mm</small>
-			</div>
-			<div>
-				<img src="assets/icons/png/bassa.png" />
-				<span>00</span>
-				<small>mm</small>
-			</div>
-		</div>
 		<div class="borded_label" id="quota2">
 			<div v-focus-on:positions_frame_upper_position>
 				<img src="assets/icons/png/salita.png" />