Merge branch 'develop' into feature/recipe
This commit is contained in:
Samuele Locatelli
@@ -1,2 +0,0 @@
|
||||
// out: false, sourceMap: false, main: ../style.less
|
||||
|
||||
@@ -53,6 +53,7 @@
|
||||
@import "users.less";
|
||||
@import "tooltip.less";
|
||||
|
||||
|
||||
@background-color: rgb(216, 216, 216);
|
||||
@handle-width: 48px;
|
||||
@handle-height: 32px;
|
||||
|
||||
@@ -2,6 +2,6 @@
|
||||
"env": "development",
|
||||
"api": {
|
||||
"enabled": true,
|
||||
"apiServerUrl": "http://localhost:9000/"
|
||||
"apiServerUrl": "http://seriate.steamware.net:9000/"
|
||||
}
|
||||
}
|
||||
@@ -13,7 +13,7 @@
|
||||
<script src="Scripts/jquery.mousewheel.js"></script>
|
||||
<script src="Scripts/jquery.signalR-2.2.2.min.js"></script>
|
||||
<script src="Scripts/raphael-2.1.4.min.js"></script>
|
||||
<script src="http://localhost:9000/signalr/hubs" async></script>
|
||||
<script src="http://seriate.steamware.net:9000/signalr/hubs" async></script>
|
||||
|
||||
<link href="assets/styles/style.css" rel="stylesheet" />
|
||||
</head>
|
||||
@@ -28,4 +28,4 @@
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
</html>
|
||||
-22
@@ -1,22 +0,0 @@
|
||||
import Vue from 'vue';
|
||||
import Component from 'vue-class-component';
|
||||
import { Prop } from 'vue-property-decorator';
|
||||
|
||||
@Component({})
|
||||
export default class GanttComponent extends Vue{
|
||||
|
||||
@Prop({default:0})
|
||||
estimated_delay:number;
|
||||
@Prop({default:0})
|
||||
estimated_duration:number;
|
||||
@Prop({default:"null"})
|
||||
tag:string;
|
||||
@Prop({default:"#57636b"})
|
||||
color:string;
|
||||
@Prop({default:"#c0c7cc"})
|
||||
overlapping_color:string;
|
||||
|
||||
visible:boolean=true;
|
||||
|
||||
|
||||
}
|
||||
-74
@@ -1,74 +0,0 @@
|
||||
<template>
|
||||
<div class="gantt_component">
|
||||
<svg>
|
||||
<rect x="0" y="0" width="100%" height="100%" rx="15" :fill="color" />
|
||||
<rect x="0" y="10%" width="100%" height="60%" rx="6" :fill="overlapping_color" />
|
||||
<g v-if="visible">
|
||||
<foreignObject
|
||||
width="45"
|
||||
height="60%"
|
||||
x="0"
|
||||
y="10%"
|
||||
>
|
||||
<img src="assets/icons/png/clessidra.png">
|
||||
</foreignObject>
|
||||
<foreignObject
|
||||
width="45"
|
||||
height="30%"
|
||||
x="0"
|
||||
y="70%"
|
||||
>
|
||||
<label>{{estimated_delay}}s</label>
|
||||
</foreignObject>
|
||||
</g>
|
||||
<g v-if="visible">
|
||||
<foreignObject
|
||||
width="45"
|
||||
height="60%"
|
||||
x="40%"
|
||||
y="10%"
|
||||
>
|
||||
<label>{{tag}}</label>
|
||||
</foreignObject>
|
||||
<foreignObject
|
||||
width="45"
|
||||
height="30%"
|
||||
x="40%"
|
||||
y="70%"
|
||||
>
|
||||
<label>{{estimated_duration}}s</label>
|
||||
</foreignObject>
|
||||
</g>
|
||||
<g v-if="visible">
|
||||
<foreignObject
|
||||
width="80"
|
||||
height="60%"
|
||||
x="75%"
|
||||
y="10%"
|
||||
>
|
||||
<label>{{tag}}</label>
|
||||
</foreignObject>
|
||||
<foreignObject
|
||||
width="80"
|
||||
height="30%"
|
||||
x="75%"
|
||||
y="70%"
|
||||
>
|
||||
<label>{{estimated_duration}}s</label>
|
||||
</foreignObject>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
</template>
|
||||
<style scoped>
|
||||
.gantt_component {
|
||||
height: 70px;
|
||||
width : 500px;
|
||||
}
|
||||
|
||||
svg {
|
||||
height: 100%;
|
||||
width : 100%;
|
||||
}
|
||||
</style>
|
||||
<script lang="ts" src="./gantt-component.ts"></script>
|
||||
+51
@@ -0,0 +1,51 @@
|
||||
import Vue from 'vue';
|
||||
import Component from 'vue-class-component';
|
||||
import { Prop, InjectReactive } from 'vue-property-decorator';
|
||||
import { IGanttOptions } from './gantt';
|
||||
|
||||
@Component({})
|
||||
export default class GanttComponent extends Vue {
|
||||
|
||||
@Prop()
|
||||
value: server.Modblock;
|
||||
|
||||
@InjectReactive()
|
||||
ganttOptions: IGanttOptions;
|
||||
|
||||
get blockType() {
|
||||
switch (this.value.type) {
|
||||
case 1: return 'heating';
|
||||
case 2: return 'drawing';
|
||||
case 3: return 'movement';
|
||||
case 4: return 'vacuum';
|
||||
case 5: return 'cooling';
|
||||
case 6: return 'extraction';
|
||||
}
|
||||
return 'nd';
|
||||
}
|
||||
|
||||
get duration() {
|
||||
let value = 0
|
||||
switch (this.value.type) {
|
||||
case 1: value = this.ganttOptions.block_body_Heating_minDuration;
|
||||
case 2: value = this.ganttOptions.block_body_Drawing_minDuration;
|
||||
case 3: value = this.ganttOptions.block_body_Movement_minDuration;
|
||||
case 4: value = this.ganttOptions.block_body_Vacuum_minDuration;
|
||||
case 5: value = this.ganttOptions.block_body_Cooling_minDuration;
|
||||
case 6: value = this.ganttOptions.block_body_Extraction_minDuration;
|
||||
}
|
||||
return Math.max(value, this.value.estimatedDuration / 1000);
|
||||
}
|
||||
|
||||
get showStatus() {
|
||||
return this.value.idParam > 0
|
||||
}
|
||||
|
||||
get delayDuration() {
|
||||
return this.value.showDelay ? Math.max(this.value.estimatedDelay / 1000, this.ganttOptions.block_delay_minDuration) : 0;
|
||||
}
|
||||
|
||||
mounted() {
|
||||
this.value.showDelay = true;
|
||||
}
|
||||
}
|
||||
+39
@@ -0,0 +1,39 @@
|
||||
<template>
|
||||
<svg class="gantt-block" :class="blockType">
|
||||
<rect x="0" y="0" width="100%" height="70" class="body" />
|
||||
<rect x="0" y="0" width="100%" height="44" class="header" />
|
||||
|
||||
<!-- gestione del delay -->
|
||||
<g v-if="value.showDelay">
|
||||
<foreignObject :width="delayDuration * ganttOptions.secondSize" height="44" x="0" y="0">
|
||||
<div class="delay-header">
|
||||
<i class="fa fa-hourglass-half" aria-hidden="true" />
|
||||
</div>
|
||||
</foreignObject>
|
||||
<foreignObject :width="delayDuration * ganttOptions.secondSize" height="26" x="0" y="44">
|
||||
<div class="delay-footer">{{(value.estimatedDelay / 1000) | round(1)}}s</div>
|
||||
</foreignObject>
|
||||
<line
|
||||
class="vertical-line"
|
||||
:x1="delayDuration * ganttOptions.secondSize"
|
||||
:x2="delayDuration * ganttOptions.secondSize"
|
||||
:y1="0"
|
||||
:y2="70"
|
||||
/>
|
||||
</g>
|
||||
|
||||
<g :transform="`translate(${delayDuration * ganttOptions.secondSize} 0`">
|
||||
<foreignObject :width="duration * ganttOptions.secondSize" height="44" x="40%" y="0">
|
||||
<div class="body-header">{{value.localizedLabel}}</div>
|
||||
</foreignObject>
|
||||
<foreignObject :width="duration * ganttOptions.secondSize" height="26" x="40%" y="44">
|
||||
<div class="body-footer">{{(value.estimatedDuration / 1000) | round(1)}}s</div>
|
||||
</foreignObject>
|
||||
</g>
|
||||
<g v-if="showStatus" />
|
||||
</svg>
|
||||
</template>
|
||||
<style scoped>
|
||||
@import "./gantt.css";
|
||||
</style>
|
||||
<script lang="ts" src="./gantt-component.ts"></script>
|
||||
@@ -15,5 +15,8 @@ export default class ganttHeader extends Vue {
|
||||
}
|
||||
|
||||
|
||||
get stepSize() {
|
||||
return this.ganttOptions.stepDuration * this.ganttOptions.secondSize;
|
||||
}
|
||||
|
||||
}
|
||||
+5
-5
@@ -2,18 +2,18 @@
|
||||
<g class="gantt-header">
|
||||
<rect :height="38" :width="ganttOptions.width" :x="0" :y="0"></rect>
|
||||
<line
|
||||
:x1="ganttOptions.stepSize * (idx-1) + ganttOptions.stepSize"
|
||||
:x2="ganttOptions.stepSize * (idx-1) + ganttOptions.stepSize"
|
||||
:x1="stepSize * (idx-1) + stepSize"
|
||||
:x2="stepSize * (idx-1) + stepSize"
|
||||
y1="0"
|
||||
y2="25"
|
||||
v-for="idx in ganttOptions.width / (ganttOptions.stepSize)"
|
||||
v-for="idx in ganttOptions.width / (stepSize)"
|
||||
:key="`hr-${idx}`"
|
||||
></line>
|
||||
<foreignObject
|
||||
:x="(idx-1) * ganttOptions.stepSize * ganttOptions.labelInterval + ganttOptions.stepSize"
|
||||
:x="(idx-1) * stepSize * ganttOptions.labelInterval + stepSize"
|
||||
y="15"
|
||||
height="20"
|
||||
:width="ganttOptions.stepSize * ganttOptions.labelInterval"
|
||||
:width="stepSize * ganttOptions.labelInterval"
|
||||
v-for="idx in (ganttOptions.maxGanttDuration / (ganttOptions.labelInterval * ganttOptions.stepDuration))"
|
||||
:key="`hl-${idx}`"
|
||||
>{{getDuration((idx-1) *ganttOptions.labelInterval * ganttOptions.stepDuration) | date("m'ss''")}}</foreignObject>
|
||||
|
||||
+52
-5
@@ -1,12 +1,59 @@
|
||||
import Component from "vue-class-component";
|
||||
import Vue from "vue";
|
||||
import { Prop } from "vue-property-decorator";
|
||||
import { Prop, InjectReactive } from "vue-property-decorator";
|
||||
import { IGanttOptions } from "./gantt";
|
||||
import block from "./gantt-component.vue";
|
||||
|
||||
@Component({})
|
||||
@Component({ components: { block } })
|
||||
export default class GanttRow extends Vue {
|
||||
@Prop()
|
||||
rowHeight: number;
|
||||
@InjectReactive()
|
||||
ganttOptions: IGanttOptions;
|
||||
|
||||
@Prop({ default: "" })
|
||||
header: string;
|
||||
|
||||
@Prop()
|
||||
header: string;
|
||||
section: number;
|
||||
|
||||
@Prop()
|
||||
blocks: server.Modblock[];
|
||||
|
||||
get blocksInSection() {
|
||||
return Array.from(this.blocks.values()).filter(i => i.section == this.section).sort((a, b) => a.priority - b.priority);
|
||||
}
|
||||
|
||||
startPosition(block: server.Modblock) {
|
||||
return blockStartPosition(block, this.blocks) * this.ganttOptions.secondSize;
|
||||
}
|
||||
|
||||
verticalPosition(block: server.Modblock) {
|
||||
let idx = this.blocksInSection.indexOf(block);
|
||||
let myStartPosition = this.startPosition(block);
|
||||
|
||||
let result = this.blocksInSection.slice(0, idx).filter(p => {
|
||||
let sp = this.startPosition(p);
|
||||
let ep = sp + p.estimatedDuration / 1000;
|
||||
|
||||
return sp <= myStartPosition && ep >= myStartPosition;
|
||||
}).length * (this.ganttOptions.elementHeight + this.ganttOptions.elementPadding * 2);
|
||||
|
||||
|
||||
return result;
|
||||
}
|
||||
|
||||
get rowHeight() {
|
||||
return Math.max(...this.blocksInSection.map(b => this.verticalPosition(b) + this.ganttOptions.elementHeight + this.ganttOptions.elementPadding * 2))
|
||||
}
|
||||
}
|
||||
|
||||
function blockEndPosition(block: server.Modblock, blocks: server.Modblock[]) {
|
||||
let ids = block.precedingId.filter(i => i > 0);
|
||||
let duration = Math.max(0, ...blocks.filter(i => ids.indexOf(i.id) >= 0).map(i => blockEndPosition(i, blocks)));
|
||||
return duration + (block.estimatedDuration / 1000);
|
||||
}
|
||||
|
||||
function blockStartPosition(block: server.Modblock, blocks: server.Modblock[]) {
|
||||
let ids = block.precedingId.filter(i => i > 0);
|
||||
let duration = Math.max(0, ...blocks.filter(i => ids.indexOf(i.id) >= 0).map(i => blockEndPosition(i, blocks)));
|
||||
return duration;
|
||||
}
|
||||
+40
-9
@@ -1,11 +1,42 @@
|
||||
<template>
|
||||
<svg class="gantt-row">
|
||||
<foreignObject x="0" y="0" width="25" :height="rowHeight">
|
||||
<div class="rowHeader">{{header | localize}}</div>
|
||||
</foreignObject>
|
||||
<g transform="" >
|
||||
<slot>
|
||||
</g>
|
||||
</svg>
|
||||
<g class="gantt-row">
|
||||
<g>
|
||||
<rect x="0" y="0" width="25" :height="rowHeight" fill="#cfcfcf"></rect>
|
||||
<foreignObject x="0" y="0" width="25" :height="rowHeight">
|
||||
<div class="rowHeader">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</foreignObject>
|
||||
</g>
|
||||
<g :transform="`translate(${ganttOptions.stepDuration * ganttOptions.secondSize} 0)`">
|
||||
<block
|
||||
:value="b"
|
||||
:x="startPosition(b)"
|
||||
:width="ganttOptions.secondSize * b.estimatedDuration / 1000"
|
||||
:height="ganttOptions.elementHeight"
|
||||
:y="verticalPosition(b) + ganttOptions.elementPadding"
|
||||
v-for="b in blocksInSection"
|
||||
:key="b.id"
|
||||
stroke="#999"
|
||||
stroke-width="2"
|
||||
/>
|
||||
</g>
|
||||
</g>
|
||||
</template>
|
||||
<script src="gantt-row.ts" lang="ts"></script>
|
||||
<style scoped>
|
||||
.rowHeader {
|
||||
transform: rotate(-90deg);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
|
||||
width: 100%;
|
||||
}
|
||||
.rowHeader span {
|
||||
background-color: #cfcfcf;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 5px;
|
||||
}
|
||||
</style>
|
||||
<script src="./gantt-row.ts" lang="ts"></script>
|
||||
@@ -0,0 +1,69 @@
|
||||
.gantt-block {
|
||||
fill: none;
|
||||
stroke: none;
|
||||
}
|
||||
.gantt-block .vertical-line {
|
||||
stroke: rgba(0, 0, 0, 0.5);
|
||||
stroke-width: 1;
|
||||
}
|
||||
.gantt-block .delay-header,
|
||||
.gantt-block .delay-footer {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
}
|
||||
.gantt-block .delay-header {
|
||||
height: calc(100% - 10px);
|
||||
padding: 5px;
|
||||
align-items: flex-end;
|
||||
justify-content: flex-start;
|
||||
color: #545454;
|
||||
}
|
||||
.gantt-block .delay-footer {
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
color: #fff;
|
||||
padding: 0 5px;
|
||||
}
|
||||
.gantt-block .body {
|
||||
color: #fff;
|
||||
}
|
||||
.gantt-block .header {
|
||||
color: #545454;
|
||||
}
|
||||
.gantt-block.heating .body {
|
||||
fill: #913030;
|
||||
}
|
||||
.gantt-block.heating .header {
|
||||
fill: #ff8d8d;
|
||||
}
|
||||
.gantt-block.drawing .body {
|
||||
fill: #465d18;
|
||||
}
|
||||
.gantt-block.drawing .header {
|
||||
fill: #b0db57;
|
||||
}
|
||||
.gantt-block.movement .body {
|
||||
fill: #57636b;
|
||||
}
|
||||
.gantt-block.movement .header {
|
||||
fill: #c0c7cc;
|
||||
}
|
||||
.gantt-block.vacuum .body {
|
||||
fill: #916330;
|
||||
}
|
||||
.gantt-block.vacuum .header {
|
||||
fill: #ffc78d;
|
||||
}
|
||||
.gantt-block.cooling .body {
|
||||
fill: #306c91;
|
||||
}
|
||||
.gantt-block.cooling .header {
|
||||
fill: #8dd3ff;
|
||||
}
|
||||
.gantt-block.extraction .body {
|
||||
fill: #30916b;
|
||||
}
|
||||
.gantt-block.extraction .header {
|
||||
fill: #75f0bf;
|
||||
}
|
||||
@@ -0,0 +1,101 @@
|
||||
.gantt-block {
|
||||
fill: none;
|
||||
stroke: none;
|
||||
|
||||
.vertical-line {
|
||||
stroke: rgba(0, 0, 0, .5);
|
||||
stroke-width: 1;
|
||||
}
|
||||
|
||||
.delay-header,
|
||||
.delay-footer {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
|
||||
}
|
||||
|
||||
.delay-header {
|
||||
height: calc(~'100% - 10px');
|
||||
padding: 5px;
|
||||
align-items: flex-end;
|
||||
justify-content: flex-start;
|
||||
color: #545454;
|
||||
}
|
||||
|
||||
.delay-footer {
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
color: #fff;
|
||||
padding: 0 5px;
|
||||
}
|
||||
|
||||
.body {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.header {
|
||||
color: #545454;
|
||||
}
|
||||
|
||||
&.heating {
|
||||
.body {
|
||||
fill: #913030;
|
||||
|
||||
}
|
||||
|
||||
.header {
|
||||
fill: #ff8d8d;
|
||||
}
|
||||
}
|
||||
|
||||
&.drawing {
|
||||
.body {
|
||||
fill: #465d18;
|
||||
}
|
||||
|
||||
.header {
|
||||
fill: #b0db57;
|
||||
}
|
||||
}
|
||||
|
||||
&.movement {
|
||||
.body {
|
||||
fill: #57636b;
|
||||
}
|
||||
|
||||
.header {
|
||||
fill: #c0c7cc;
|
||||
}
|
||||
}
|
||||
|
||||
&.vacuum {
|
||||
.body {
|
||||
fill: #916330;
|
||||
}
|
||||
|
||||
.header {
|
||||
fill: #ffc78d;
|
||||
}
|
||||
}
|
||||
|
||||
&.cooling {
|
||||
.body {
|
||||
fill: #306c91;
|
||||
}
|
||||
|
||||
.header {
|
||||
fill: #8dd3ff;
|
||||
}
|
||||
}
|
||||
|
||||
&.extraction {
|
||||
.body {
|
||||
fill: #30916b;
|
||||
}
|
||||
|
||||
.header {
|
||||
fill: #75f0bf;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -2,31 +2,51 @@ import Vue from "vue";
|
||||
import { Component, Prop, Provide, Watch, ProvideReactive } from "vue-property-decorator";
|
||||
import moment from "moment";
|
||||
import ganttHeader from "./gantt-header.vue";
|
||||
import ganttRow from "./gantt-row.vue"
|
||||
|
||||
@Component({
|
||||
components: {
|
||||
ganttHeader
|
||||
ganttHeader, ganttRow
|
||||
}
|
||||
})
|
||||
export default class Gantt extends Vue {
|
||||
|
||||
@Prop()
|
||||
blocks: server.Modblock[];
|
||||
|
||||
@ProvideReactive()
|
||||
ganttOptions: IGanttOptions = {
|
||||
width: 2000,
|
||||
stepSize: 40,
|
||||
elementHeight: 70,
|
||||
elementPadding: 5,
|
||||
secondSize: 20,
|
||||
stepDuration: 2,
|
||||
labelInterval: 10,
|
||||
maxGanttDuration: 500
|
||||
maxGanttDuration: 500,
|
||||
block_status_minDuration: 1.5,
|
||||
block_delay_minDuration: 1.5,
|
||||
block_body_Heating_minDuration: 5,
|
||||
block_body_Drawing_minDuration: 5,
|
||||
block_body_Movement_minDuration: 5,
|
||||
block_body_Vacuum_minDuration: 5,
|
||||
block_body_Cooling_minDuration: 5,
|
||||
block_body_Extraction_minDuration: 5,
|
||||
};
|
||||
|
||||
|
||||
|
||||
currentDate: Date = null;
|
||||
|
||||
getRowHeight(element) {
|
||||
return element?.rowHeight || 0;
|
||||
}
|
||||
|
||||
mounted() {
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
export interface IGanttElement {
|
||||
from: Date,
|
||||
to?: Date,
|
||||
@@ -35,8 +55,19 @@ export interface IGanttElement {
|
||||
|
||||
export interface IGanttOptions {
|
||||
width: number;
|
||||
stepSize: number; // dimensione del singolo step
|
||||
elementHeight: number;
|
||||
elementPadding: number;
|
||||
secondSize: number; // dimensione del singolo step
|
||||
stepDuration: number; // durata in secondi del singolo step
|
||||
labelInterval: number;
|
||||
maxGanttDuration: number;
|
||||
|
||||
block_status_minDuration: number;
|
||||
block_delay_minDuration: number;
|
||||
block_body_Heating_minDuration: number;
|
||||
block_body_Drawing_minDuration: number;
|
||||
block_body_Movement_minDuration: number;
|
||||
block_body_Vacuum_minDuration: number;
|
||||
block_body_Cooling_minDuration: number;
|
||||
block_body_Extraction_minDuration: number;
|
||||
}
|
||||
|
||||
@@ -1,7 +1,24 @@
|
||||
<template>
|
||||
<svg :height="totalHeight" ref="mainContainer" preserveAspectRation="xMinYMax" width="100%">
|
||||
<svg ref="mainContainer" preserveAspectRation="xMinYMax" width="100%" height="100%">
|
||||
<gantt-header />
|
||||
<svg x="0" y="36" />
|
||||
<g :transform="`translate(0 ${ganttOptions.stepDuration * ganttOptions.secondSize})`">
|
||||
<gantt-row :section="1" :blocks="blocks" ref="section1">
|
||||
<span>{{`process-heating` | localize('Riscaldo')}}</span>
|
||||
</gantt-row>
|
||||
<gantt-row
|
||||
:section="2"
|
||||
:blocks="blocks"
|
||||
ref="section2"
|
||||
:transform="`translate(0 ${getRowHeight($refs.section1) + ganttOptions.elementPadding})`"
|
||||
>
|
||||
<span>{{`process-forming` | localize('Formatura')}}</span>
|
||||
</gantt-row>
|
||||
<gantt-row
|
||||
:section="3"
|
||||
:blocks="blocks"
|
||||
:transform="`translate(0 ${getRowHeight($refs.section1) + getRowHeight($refs.section2) + ganttOptions.elementPadding*2})`"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -4,6 +4,7 @@ import { Prop } from 'vue-property-decorator';
|
||||
import { messageService } from "@/_base/messageService";
|
||||
import { Modal, ModalHelper } from "@/components/modals";
|
||||
import gantt from "./gantt/gantt.vue";
|
||||
import { moduleService } from '@/services/moduleService';
|
||||
|
||||
@Component({
|
||||
components: {
|
||||
@@ -17,13 +18,21 @@ export default class Processo extends Vue {
|
||||
@Prop({ default: 145 })
|
||||
tot: number;
|
||||
|
||||
blocks: { [id: number]: server.Modblock } = null;
|
||||
blocks: server.Modblock[] = [];
|
||||
|
||||
|
||||
public sendMessage(name: string) {
|
||||
messageService.publishToChannel(name);
|
||||
}
|
||||
|
||||
async mounted() {
|
||||
let result = await moduleService.GetCurrent();
|
||||
|
||||
for (const key in result) {
|
||||
if (result.hasOwnProperty(key)) {
|
||||
this.blocks.push(result[key]);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@@ -31,7 +31,7 @@
|
||||
</button>
|
||||
<label>{{actual}}/{{tot}}</label>
|
||||
</div>
|
||||
<gantt></gantt>
|
||||
<gantt :blocks="blocks"></gantt>
|
||||
</modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
+1
-1
@@ -53,7 +53,7 @@ export default class ShowCicloInfo extends Vue {
|
||||
cycle_loader_manualunloading_enabled: this.recipe.cycle_loader_manualunloading_enabled,
|
||||
}
|
||||
);
|
||||
//await recipeService.Confirm();
|
||||
await recipeService.Confirm('Cycle');
|
||||
ModalHelper.HideModal();
|
||||
this.deferred.resolve(1);
|
||||
};
|
||||
|
||||
@@ -16,7 +16,7 @@ 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 AvvioProduzione from "@/app_modules_thermo/setup/avvio-produzione/avvio-produzione.vue";
|
||||
import ShowArretramentoRiscaldiInfo from "@/app_modules_thermo/processo/arretramento-riscaldi/show-arretramento-riscladi-info.vue";
|
||||
import { store } from '@/store';
|
||||
|
||||
|
||||
@Component({
|
||||
@@ -37,6 +37,10 @@ export default class Setup extends Vue {
|
||||
}
|
||||
}
|
||||
|
||||
get overview() {
|
||||
return store.state.recipe.overview;
|
||||
}
|
||||
|
||||
showModalStep(step: number): Promise<number> {
|
||||
switch (step) {
|
||||
case 0: return ModalHelper.ShowModalAsync(ShowFormatoInfo);
|
||||
|
||||
@@ -5,78 +5,78 @@
|
||||
<setup-button
|
||||
@click="showModalAtStep(0);"
|
||||
:phase="1"
|
||||
title="Formato"
|
||||
statusImage="fa fa-check-circle"
|
||||
:title="'overview.general' | localize('Formato')"
|
||||
:status="overview.general"
|
||||
></setup-button>
|
||||
|
||||
<setup-button
|
||||
@click="showModalAtStep(1);"
|
||||
:phase="2"
|
||||
title="Quota e velocità"
|
||||
statusImage="fa fa-check-circle"
|
||||
:title="'overview.positions' | localize('Quota e velocità')"
|
||||
:status="overview.positions"
|
||||
></setup-button>
|
||||
|
||||
<setup-button
|
||||
@click="showModalAtStep(2);"
|
||||
:phase="3"
|
||||
title="Ciclo"
|
||||
statusImage="fa fa-check-circle undone-step"
|
||||
:title="'overview.cycle' | localize('Ciclo')"
|
||||
:status="overview.cycle"
|
||||
></setup-button>
|
||||
|
||||
<setup-button
|
||||
@click="showModalAtStep(3);"
|
||||
:phase="4"
|
||||
title="Riscaldi"
|
||||
statusImage="fa fa-check-circle undone-step"
|
||||
:title="'overview.heats' | localize('Riscaldi')"
|
||||
:status="overview.heats"
|
||||
></setup-button>
|
||||
|
||||
<setup-button
|
||||
@click="showModalAtStep(4);"
|
||||
:phase="5"
|
||||
title="Pirometro"
|
||||
statusImage="fa fa-check-circle undone-step"
|
||||
:title="'overview.pyrometer' | localize('Pirometro')"
|
||||
:status="overview.pyrometer"
|
||||
></setup-button>
|
||||
|
||||
<setup-button
|
||||
@click="showModalAtStep(5);"
|
||||
:phase="6"
|
||||
title="Imbutitura"
|
||||
statusImage="fa fa-check-circle undone-step"
|
||||
:title="'overview.drawing' | localize('Imbutitura')"
|
||||
:status="overview.drawing"
|
||||
></setup-button>
|
||||
|
||||
<setup-button
|
||||
@click="showModalAtStep(6);"
|
||||
:phase="7"
|
||||
title="Controstampo"
|
||||
statusImage="fa fa-check-circle undone-step"
|
||||
:title="'overview.upperPlate' | localize('Controstampo')"
|
||||
:status="overview.upperPlate"
|
||||
></setup-button>
|
||||
|
||||
<setup-button
|
||||
@click="showModalAtStep(7);"
|
||||
:phase="8"
|
||||
title="Raffreddamento"
|
||||
statusImage="fa fa-check-circle undone-step"
|
||||
:title="'overview.cooling' | localize('Raffreddamento')"
|
||||
:status="overview.cooling"
|
||||
></setup-button>
|
||||
|
||||
<setup-button
|
||||
@click="showModalAtStep(8);"
|
||||
:phase="9"
|
||||
title="Vuoto"
|
||||
statusImage="fa fa-check-circle undone-step"
|
||||
:title="'overview.vacuum' | localize('Vuoto')"
|
||||
:status="overview.vacuum"
|
||||
></setup-button>
|
||||
|
||||
<setup-button
|
||||
@click="showModalAtStep(9);"
|
||||
:phase="10"
|
||||
title="Estrazione"
|
||||
statusImage="fa fa-check-circle undone-step"
|
||||
:title="'overview.extraction' | localize('Estrazione')"
|
||||
:status="overview.extraction"
|
||||
></setup-button>
|
||||
|
||||
<setup-button
|
||||
@click="showModalAtStep(10);"
|
||||
:phase="11"
|
||||
title="Opzioni di lavorazione"
|
||||
statusImage="fa fa-check-circle undone-step"
|
||||
:title="'overview.options' | localize('Opzioni di lavorazione')"
|
||||
:status="overview.options"
|
||||
></setup-button>
|
||||
|
||||
<div class="setup-play" @click="showModalAtStep(11);">
|
||||
|
||||
@@ -14,4 +14,7 @@ export default class setupButton extends Vue {
|
||||
|
||||
@Prop()
|
||||
statusImage: string;
|
||||
|
||||
@Prop()
|
||||
status: string;
|
||||
}
|
||||
@@ -4,7 +4,9 @@
|
||||
<div class="background-bottom"></div>
|
||||
<span>{{phase}}</span>
|
||||
<label>{{title}}</label>
|
||||
<i v-if="statusImage" :class="statusImage"></i>
|
||||
<i v-if="status == 'Unchanged'" class="fa fa-check-circle undone-step"></i>
|
||||
<i v-if="status == 'ChangedOk'" class="fa fa-check-circle"></i>
|
||||
<i v-if="status == 'HasError'" class="fa fa-exclamation-triangle warning"></i>
|
||||
</div>
|
||||
</template>
|
||||
<script src="./setupButton.ts" lang="ts"></script>
|
||||
|
||||
+1
-1
@@ -70,7 +70,7 @@ export default class ShowControstampoInfo extends Vue {
|
||||
upperplate_extraction_manual: this.recipe.upperplate_extraction_manual,
|
||||
}
|
||||
);
|
||||
//await recipeService.Confirm();
|
||||
await recipeService.Confirm('UpperPlate');
|
||||
ModalHelper.HideModal();
|
||||
this.deferred.resolve(1);
|
||||
};
|
||||
|
||||
+1
-1
@@ -50,7 +50,7 @@ export default class ShowEstrazioneInfo extends Vue {
|
||||
extraction_aux_manual: this.recipe.extraction_aux_manual,
|
||||
}
|
||||
);
|
||||
//await recipeService.Confirm();
|
||||
await recipeService.Confirm('Extraction');
|
||||
ModalHelper.HideModal();
|
||||
this.deferred.resolve(1);
|
||||
};
|
||||
|
||||
+1
-1
@@ -78,7 +78,7 @@ export default class ShowFormatoInfo extends Vue {
|
||||
general_area_working_dxsx: this.recipe.general_area_working_dxsx,
|
||||
}
|
||||
);
|
||||
await recipeService.Confirm();
|
||||
await recipeService.Confirm('General');
|
||||
ModalHelper.HideModal();
|
||||
this.deferred.resolve(1);
|
||||
};
|
||||
|
||||
+5
-5
@@ -27,11 +27,11 @@ export default class ShowImbutituraInfo extends Vue {
|
||||
|
||||
get bars() {
|
||||
return [
|
||||
{
|
||||
backgroundColor: "#b3dbff",
|
||||
borderColor: "#848484",
|
||||
{
|
||||
backgroundColor: "#b3dbff",
|
||||
borderColor: "#848484",
|
||||
height: this.recipe.drawing_1_chart_setpointx.setpointHMI,
|
||||
width: this.recipe.drawing_1_chart_setpointy.setpointHMI
|
||||
width: this.recipe.drawing_1_chart_setpointy.setpointHMI
|
||||
}
|
||||
] as svg.BarChartInfo[]
|
||||
}
|
||||
@@ -59,7 +59,7 @@ export default class ShowImbutituraInfo extends Vue {
|
||||
drawing_mould_up_delay: this.recipe.drawing_mould_up_delay,
|
||||
}
|
||||
);
|
||||
//await recipeService.Confirm();
|
||||
await recipeService.Confirm('Drawing');
|
||||
ModalHelper.HideModal();
|
||||
this.deferred.resolve(1);
|
||||
};
|
||||
|
||||
@@ -140,7 +140,7 @@ export default class ShowOpzioniInfo extends Vue {
|
||||
options_thermoregulator_10_setpoint: this.recipe.options_thermoregulator_10_setpoint,
|
||||
}
|
||||
);
|
||||
await recipeService.Confirm();
|
||||
await recipeService.Confirm('Options');
|
||||
ModalHelper.HideModal();
|
||||
this.deferred.resolve(1);
|
||||
};
|
||||
|
||||
+1
-1
@@ -51,7 +51,7 @@ export default class ShowPirometroInfo extends Vue {
|
||||
pyrometer_lowerthermoregulator_working_temperature: this.recipe.pyrometer_lowerthermoregulator_working_temperature,
|
||||
}
|
||||
);
|
||||
//await recipeService.Confirm();
|
||||
await recipeService.Confirm('Pyrometer');
|
||||
ModalHelper.HideModal();
|
||||
this.deferred.resolve(1);
|
||||
};
|
||||
|
||||
+4
-4
@@ -8,28 +8,28 @@
|
||||
<small>{{recipe.positions_mould_intermediate_position.unitMeasure}}</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="borded_label" id="quota2" v-focus-on="">
|
||||
<div class="borded_label" id="quota2" v-focus-on>
|
||||
<div>
|
||||
<img src="assets/icons/png/quota.png" />
|
||||
<span>00</span>
|
||||
<small>mm</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="borded_label" id="quota3" v-focus-on="">
|
||||
<div class="borded_label" id="quota3" v-focus-on>
|
||||
<div>
|
||||
<img src="assets/icons/png/quota.png" />
|
||||
<span>00</span>
|
||||
<small>mm</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="borded_label" id="quota4" v-focus-on="">
|
||||
<div class="borded_label" id="quota4" v-focus-on>
|
||||
<div>
|
||||
<img src="assets/icons/png/quota.png" />
|
||||
<span>00</span>
|
||||
<small>mm</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="borded_label" id="quota5" v-focus-on="">
|
||||
<div class="borded_label" id="quota5" v-focus-on>
|
||||
<div>
|
||||
<img src="assets/icons/png/quota.png" />
|
||||
<span>00</span>
|
||||
|
||||
+66
-45
@@ -7,71 +7,92 @@
|
||||
</div>
|
||||
<div class="body">
|
||||
<template v-if="recipe.positions_mould_lower_position.status.visible">
|
||||
<div class="input-area">
|
||||
<label>{{'positions_mould_lower_position' | localize('Quota inferiore')}}</label>
|
||||
<numeric v-model="recipe.positions_mould_lower_position" id="positions_mould_lower_position"/>
|
||||
</div>
|
||||
<slider v-model="recipe.positions_mould_lower_position"></slider>
|
||||
<div class="input-area">
|
||||
<label>{{'positions_mould_lower_position' | localize('Quota inferiore')}}</label>
|
||||
<numeric
|
||||
v-model="recipe.positions_mould_lower_position"
|
||||
id="positions_mould_lower_position"
|
||||
/>
|
||||
</div>
|
||||
<slider v-model="recipe.positions_mould_lower_position"></slider>
|
||||
</template>
|
||||
<template v-if="recipe.positions_mould_lower_speed.status.visible">
|
||||
<div class="input-area">
|
||||
<label>{{'positions_mould_lower_speed' | localize('Velocità discesa')}}</label>
|
||||
<numeric v-model="recipe.positions_mould_lower_speed" id="positions_mould_lower_speed"/>
|
||||
</div>
|
||||
<slider v-model="recipe.positions_mould_lower_speed"></slider>
|
||||
<div class="input-area">
|
||||
<label>{{'positions_mould_lower_speed' | localize('Velocità discesa')}}</label>
|
||||
<numeric v-model="recipe.positions_mould_lower_speed" id="positions_mould_lower_speed" />
|
||||
</div>
|
||||
<slider v-model="recipe.positions_mould_lower_speed"></slider>
|
||||
</template>
|
||||
<hr />
|
||||
<template v-if="recipe.positions_mould_intermediate_position.status.visible">
|
||||
<div class="input-area">
|
||||
<label>{{'positions_mould_intermediate_position' | localize('Quota intermedia')}}</label>
|
||||
<numeric v-model="recipe.positions_mould_intermediate_position" id="positions_mould_intermediate_position"/>
|
||||
</div>
|
||||
<slider v-model="recipe.positions_mould_intermediate_position"></slider>
|
||||
<div class="input-area">
|
||||
<label>{{'positions_mould_intermediate_position' | localize('Quota intermedia')}}</label>
|
||||
<numeric
|
||||
v-model="recipe.positions_mould_intermediate_position"
|
||||
id="positions_mould_intermediate_position"
|
||||
/>
|
||||
</div>
|
||||
<slider v-model="recipe.positions_mould_intermediate_position"></slider>
|
||||
</template>
|
||||
<hr />
|
||||
<template v-if="recipe.positions_mould_upper_position.status.visible">
|
||||
<div class="input-area">
|
||||
<label>{{'positions_mould_upper_position' | localize('Quota superiore')}}</label>
|
||||
<numeric v-model="recipe.positions_mould_upper_position" id="positions_mould_upper_position"/>
|
||||
</div>
|
||||
<slider v-model="recipe.positions_mould_upper_position"></slider>
|
||||
<div class="input-area">
|
||||
<label>{{'positions_mould_upper_position' | localize('Quota superiore')}}</label>
|
||||
<numeric
|
||||
v-model="recipe.positions_mould_upper_position"
|
||||
id="positions_mould_upper_position"
|
||||
/>
|
||||
</div>
|
||||
<slider v-model="recipe.positions_mould_upper_position"></slider>
|
||||
</template>
|
||||
<template v-if="recipe.positions_mould_upper_speed.status.visible">
|
||||
<div class="input-area">
|
||||
<label>{{'positions_mould_upper_speed' | localize('Velocità salita')}}</label>
|
||||
<numeric v-model="recipe.positions_mould_upper_speed" id="positions_mould_upper_speed"/>
|
||||
</div>
|
||||
<slider v-model="recipe.positions_mould_upper_speed"></slider>
|
||||
<div class="input-area">
|
||||
<label>{{'positions_mould_upper_speed' | localize('Velocità salita')}}</label>
|
||||
<numeric v-model="recipe.positions_mould_upper_speed" id="positions_mould_upper_speed" />
|
||||
</div>
|
||||
<slider v-model="recipe.positions_mould_upper_speed"></slider>
|
||||
</template>
|
||||
<hr />
|
||||
<template v-if="recipe.positions_mould_upperdeceleration_position.status.visible">
|
||||
<div class="input-area">
|
||||
<label>{{'positions_mould_upperdeceleration_position' | localize('Corsa')}}</label>
|
||||
<numeric v-model="recipe.positions_mould_upperdeceleration_position" id="positions_mould_upperdeceleration_position"/>
|
||||
</div>
|
||||
<slider v-model="recipe.positions_mould_upperdeceleration_position"></slider>
|
||||
<div class="input-area">
|
||||
<label>{{'positions_mould_upperdeceleration_position' | localize('Corsa')}}</label>
|
||||
<numeric
|
||||
v-model="recipe.positions_mould_upperdeceleration_position"
|
||||
id="positions_mould_upperdeceleration_position"
|
||||
/>
|
||||
</div>
|
||||
<slider v-model="recipe.positions_mould_upperdeceleration_position"></slider>
|
||||
</template>
|
||||
<template v-if="recipe.positions_mould_upperdeceleration_speed.status.visible">
|
||||
<div class="input-area">
|
||||
<label>{{'positions_mould_upperdeceleration_speed' | localize('Velocità di rallentamento salita')}}</label>
|
||||
<numeric v-model="recipe.positions_mould_upperdeceleration_speed" id="positions_mould_upperdeceleration_speed"/>
|
||||
</div>
|
||||
<slider v-model="recipe.positions_mould_upperdeceleration_speed"></slider>
|
||||
<div class="input-area">
|
||||
<label>{{'positions_mould_upperdeceleration_speed' | localize('Velocità di rallentamento salita')}}</label>
|
||||
<numeric
|
||||
v-model="recipe.positions_mould_upperdeceleration_speed"
|
||||
id="positions_mould_upperdeceleration_speed"
|
||||
/>
|
||||
</div>
|
||||
<slider v-model="recipe.positions_mould_upperdeceleration_speed"></slider>
|
||||
</template>
|
||||
<hr />
|
||||
<template v-if="recipe.positions_mould_lowerdeceleration_position.status.visible">
|
||||
<div class="input-area">
|
||||
<label>{{'positions_mould_lowerdeceleration_position' | localize('Corsa')}}</label>
|
||||
<numeric v-model="recipe.positions_mould_lowerdeceleration_position" id="positions_mould_lowerdeceleration_position"/>
|
||||
</div>
|
||||
<slider v-model="recipe.positions_mould_lowerdeceleration_position"></slider>
|
||||
<div class="input-area">
|
||||
<label>{{'positions_mould_lowerdeceleration_position' | localize('Corsa')}}</label>
|
||||
<numeric
|
||||
v-model="recipe.positions_mould_lowerdeceleration_position"
|
||||
id="positions_mould_lowerdeceleration_position"
|
||||
/>
|
||||
</div>
|
||||
<slider v-model="recipe.positions_mould_lowerdeceleration_position"></slider>
|
||||
</template>
|
||||
<template v-if="recipe.positions_mould_lowerdeceleration_speed.status.visible">
|
||||
<div class="input-area">
|
||||
<label>{{'positions_mould_lowerdeceleration_speed' | localize('Velocità di rallentamento discesa')}}</label>
|
||||
<numeric v-model="recipe.positions_mould_lowerdeceleration_speed" id="positions_mould_lowerdeceleration_speed"/>
|
||||
</div>
|
||||
<slider v-model="recipe.positions_mould_lowerdeceleration_speed"></slider>
|
||||
<div class="input-area">
|
||||
<label>{{'positions_mould_lowerdeceleration_speed' | localize('Velocità di rallentamento discesa')}}</label>
|
||||
<numeric
|
||||
v-model="recipe.positions_mould_lowerdeceleration_speed"
|
||||
id="positions_mould_lowerdeceleration_speed"
|
||||
/>
|
||||
</div>
|
||||
<slider v-model="recipe.positions_mould_lowerdeceleration_speed"></slider>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
+1
-1
@@ -64,7 +64,7 @@ export default class ShowQuoteVelocitaInfo extends Vue {
|
||||
positions_upperplate_lowerdeceleration_speed: this.recipe.positions_upperplate_lowerdeceleration_speed,
|
||||
}
|
||||
);
|
||||
//await recipeService.Confirm();
|
||||
await recipeService.Confirm('Positions');
|
||||
ModalHelper.HideModal();
|
||||
this.deferred.resolve(1);
|
||||
};
|
||||
|
||||
+1
-1
@@ -73,7 +73,7 @@ export default class Raffreddamento extends Vue {
|
||||
cooling_shutter_16_opening_perc: this.recipe.cooling_shutter_16_opening_perc,
|
||||
}
|
||||
);
|
||||
//await recipeService.Confirm();
|
||||
await recipeService.Confirm('Cooling');
|
||||
ModalHelper.HideModal();
|
||||
this.deferred.resolve(1);
|
||||
};
|
||||
|
||||
+1
-1
@@ -47,7 +47,7 @@ export default class ShowRiscaldamentoSuperioreInfo extends Vue {
|
||||
heats_decomsustain_smoke_function_enabled: this.recipe.heats_decomsustain_smoke_function_enabled,
|
||||
}
|
||||
);
|
||||
//await recipeService.Confirm();
|
||||
await recipeService.Confirm('Heats');
|
||||
ModalHelper.HideModal();
|
||||
this.deferred.resolve(1);
|
||||
};
|
||||
|
||||
@@ -75,7 +75,7 @@ export default class ShowVuotoInfo extends Vue {
|
||||
vacuum_pre_3_chart_setpointy: this.recipe.vacuum_pre_3_chart_setpointy,
|
||||
}
|
||||
);
|
||||
//await recipeService.Confirm();
|
||||
await recipeService.Confirm('Vacuum');
|
||||
ModalHelper.HideModal();
|
||||
this.deferred.resolve(1);
|
||||
};
|
||||
|
||||
@@ -2,7 +2,7 @@ import Vue from "vue";
|
||||
import moment from "moment";
|
||||
|
||||
Vue.filter("date", function (value: Date, format: string): string {
|
||||
debugger
|
||||
|
||||
if (value)
|
||||
return moment(value).format(format);
|
||||
return null;
|
||||
|
||||
@@ -8,7 +8,7 @@ export class ProdService extends baseRestService {
|
||||
BASE_URL = async () => (await CONFIGURATION).api.apiServerUrl + "/api/prod/";
|
||||
|
||||
async GetProd() {
|
||||
let result = await this.Put<any>((await this.BASE_URL()) + "prod/get", true);
|
||||
let result = await this.Put<any>((await this.BASE_URL()) + "get", true);
|
||||
prodActions.setProd(store, result);
|
||||
return result;
|
||||
}
|
||||
|
||||
@@ -33,8 +33,8 @@ export class RecipeService extends baseRestService {
|
||||
return result;
|
||||
}
|
||||
|
||||
async Confirm() {
|
||||
let result = await this.Put<any>((await this.BASE_URL()) + "confirm", true);
|
||||
async Confirm(section: string) {
|
||||
let result = await this.Put<any>((await this.BASE_URL()) + "confirm?section=" + section, true);
|
||||
return result;
|
||||
}
|
||||
|
||||
|
||||
@@ -20,7 +20,19 @@ export const recipeStore = {
|
||||
|
||||
state: {
|
||||
current: {},
|
||||
overview: {},
|
||||
overview: {
|
||||
general: "",
|
||||
heats: "",
|
||||
cooling: "",
|
||||
cycle: "",
|
||||
drawing: "",
|
||||
extraction: "",
|
||||
options: "",
|
||||
positions: "",
|
||||
pyrometer: "",
|
||||
upperPlate: "",
|
||||
vacuum: ""
|
||||
},
|
||||
} as RecipeStoreModel,
|
||||
|
||||
getters: {
|
||||
|
||||
Reference in New Issue
Block a user