grafico di produzione..

Thermo.Active/wwwroot/src/app_modules_thermo/dashboard/base-components/stats.ts

@@ -0,0 +1,52 @@
+import Vue from "vue";
+import Component from "vue-class-component";
+import { Prop } from "vue-property-decorator";
+
+@Component({})
+export default class stats extends Vue {
+
+  @Prop()
+  value: { [id: number]: number };
+
+  get Values(): number[] {
+    var r: number[] = [];
+    if (this.value)
+      for (const i in this.value) {
+        r.push(this.value[i])
+      }
+    return r;
+
+  }
+
+
+  get min() {
+    return Math.min(...this.Values);
+  }
+
+  get max() {
+    return Math.max(...this.Values);
+  }
+
+  get delta() {
+    return this.max - this.min;
+  }
+
+  @Prop({ default: 400 })
+  width: number;
+
+  @Prop({ default: 50 })
+  height: number;
+
+  get pathData() {
+    if (this.Values && this.Values.length) {
+      var d = [
+        "M", 0, (this.Values[0] - this.min) * this.height / this.delta,
+        "S"
+      ]
+      d.push(...this.Values.slice(1).map((v, idx) => `${idx * (this.width / this.Values.length)} ${this.height - (v - this.min) * this.height / this.delta}`))
+      d.push()
+      return d.join(" ");
+    }
+    return null;
+  }
+}

Thermo.Active/wwwroot/src/app_modules_thermo/dashboard/base-components/stats.vue

@@ -0,0 +1,14 @@
+<template>
+	<svg preserveAspectRatio="xMidYMid slice" :viewBox="`0 -20 ${width} ${height+40}`" :key="delta">
+		<g class="chart-axis">
+			<line :x1="0" :x2="width" :y1="0" :y2="0" stroke="#353535" stroke-width="1" />
+			<line :x1="0" :x2="width" :y1="height/3" :y2="height/3" stroke="#353535" stroke-width="1" />
+			<line :x1="0" :x2="width" :y1="height*2/3" :y2="height*2/3" stroke="#353535" stroke-width="1" />
+			<line :x1="0" :x2="width" :y1="height" :y2="height" stroke="#353535" stroke-width="1" />
+		</g>
+		<g>
+			<path fill="none" :d="pathData" stroke="#1791ff" stroke-width="4" />
+		</g>
+	</svg>
+</template>
+<script src="./stats.ts" lang="ts"></script>

Thermo.Active/wwwroot/src/app_modules_thermo/dashboard/dashboard.ts

@@ -10,13 +10,15 @@ 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';
+import stats from "./base-components/stats.vue";
 
 @Component({
   components: {
     appRibbon: AppRibbon,
     archInterface: ArchInterface,
     alarmList,
-    gauge
+    gauge,
+    stats
   }
 })
 export default class Dashboard extends Vue {

Thermo.Active/wwwroot/src/app_modules_thermo/dashboard/dashboard.vue

@@ -136,17 +136,25 @@
 			<div class="piece_time">
 				<div class="piece_hours">
 					<span>{{'dashboard-piece-hours' | localize('pezzi/ora')}}</span>
-					<span v-if="panel.lastCadenza">{{panel.lastCadenza}}</span>
+					<span v-if="panel.lastCadenza">{{panel.lastCadenza | round(1)}}</span>
 					<span v-else>--</span>
 				</div>
 				<div class="time_cycle">
 					<span>{{'dashboard-time-cycle' | localize('tempo/ciclo')}}</span>
-					<span v-if="panel.lastTCiclo">{{panel.lastTCiclo}}</span>
+					<span v-if="panel.lastTCiclo">{{panel.lastTCiclo / 60 | round(0)}}'{{panel.lastTCiclo % 60}}''</span>
 					<span v-else>--</span>
 				</div>
+				<stats class="stats" :width="614" :height="65" :value="panel.tS_TCiclo"></stats>
 			</div>
 		</div>
 	</div>
 </template>
+<style scoped>
+.stats {
+	grid-column-start: 1;
+	grid-column-end: -1;
+	width: 100%;
+}
+</style>
 
 <script lang="ts" src="./dashboard.ts"></script>