Merge branch 'feature/wp10' into develop
This commit is contained in:
Alessandro
@@ -854,7 +854,9 @@
|
||||
color: @color-white;
|
||||
}
|
||||
|
||||
.pagination button:hover:not(.active) {background-color: @color-whitegrey;}
|
||||
.pagination button:hover:not(.active) {
|
||||
background-color: @color-whitegrey;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -81,631 +81,6 @@
|
||||
padding: 0 24px 24px 24px;
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
.reports-box-body-left {
|
||||
width: 1455px;
|
||||
height: 100%;
|
||||
.body-left-header, .body-left-header-machinestatus{
|
||||
width: 100%;
|
||||
height: 70px;
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
margin-top: 18px;
|
||||
border-right: solid 2px @color-whitegrey;
|
||||
position: relative;
|
||||
margin-bottom: 16px;
|
||||
.mx-datepicker-range{
|
||||
width: 170px;
|
||||
height: 70px;
|
||||
.mx-input-wrapper{
|
||||
margin-right: 24px;
|
||||
width: 253px;
|
||||
.mx-input{
|
||||
width: 253px;
|
||||
height: 50px;
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 1px 2px 0 @color-black-40;
|
||||
border: solid 1px @color-silver;
|
||||
font-size: 18px;
|
||||
line-height: 1.11;
|
||||
color: @color-greyish-brown;
|
||||
padding-left: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
> div {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
height: 70px;
|
||||
margin-right: 24px;
|
||||
label.intervaldate{
|
||||
width: 253px;
|
||||
}
|
||||
select{
|
||||
width: 192px;
|
||||
height: 48px;
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 1px 2px 0 @color-black-40;
|
||||
border: solid 1px @color-silver;
|
||||
font-size: 18px;
|
||||
line-height: 1.11;
|
||||
color: @color-greyish-brown;
|
||||
padding-left: 16px;
|
||||
}
|
||||
div.interval-time{
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
input[type="time"]{
|
||||
width: 112px;
|
||||
height: 48px;
|
||||
border-radius: 2px;
|
||||
box-shadow: inset 0 1px 3px 0 @color-black-50;
|
||||
font-size: 18px;
|
||||
line-height: 1.11;
|
||||
color: @color-silver;
|
||||
border: none;
|
||||
}
|
||||
input[type="time"]:first-child{
|
||||
margin-right: 16px;
|
||||
}
|
||||
input[type="time"]::-webkit-inner-spin-button {
|
||||
-webkit-appearance: none;
|
||||
display: none;
|
||||
border:none;
|
||||
}
|
||||
}
|
||||
input.program{
|
||||
width: 256px;
|
||||
height: 48px;
|
||||
border-radius: 2px;
|
||||
box-shadow: inset 0 1px 3px 0 @color-black-50;
|
||||
font-size: 18px;
|
||||
line-height: 1.11;
|
||||
color: @color-silver;
|
||||
padding-left: 16px;
|
||||
border: none;
|
||||
}
|
||||
.reports-select-operator{
|
||||
width: 192px;
|
||||
height: 48px;
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 1px 2px 0 @color-black-40;
|
||||
font-size: 18px;
|
||||
line-height: 1.11;
|
||||
color: @color-greyish-brown;
|
||||
}
|
||||
.reports-select-shift{
|
||||
width: 144px;
|
||||
height: 48px;
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 1px 2px 0 @color-black-40;
|
||||
}
|
||||
label.label_advanced_filters{
|
||||
margin-top: 35px;
|
||||
font-size: 18px;
|
||||
line-height: 1;
|
||||
color: @color-darkish-blue;
|
||||
cursor: pointer;
|
||||
span{
|
||||
text-decoration-line: underline;
|
||||
text-decoration-color: @color-darkish-blue;
|
||||
text-decoration-style: solid;
|
||||
}
|
||||
}
|
||||
}
|
||||
div.advanced-filters{
|
||||
z-index: 100;
|
||||
height: 80px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
background-color: @color-background-white;
|
||||
position: absolute;
|
||||
top: 80px;
|
||||
> div {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
height: 70px;
|
||||
margin-right: 24px;
|
||||
label.intervaldate{
|
||||
width: 253px;
|
||||
}
|
||||
select{
|
||||
width: 192px;
|
||||
height: 48px;
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 1px 2px 0 @color-black-40;
|
||||
border: solid 1px @color-silver;
|
||||
font-size: 18px;
|
||||
line-height: 1.11;
|
||||
color: @color-greyish-brown;
|
||||
padding-left: 16px;
|
||||
}
|
||||
div.interval-time{
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
input[type="time"]{
|
||||
width: 112px;
|
||||
height: 48px;
|
||||
border-radius: 2px;
|
||||
box-shadow: inset 0 1px 3px 0 @color-black-50;
|
||||
font-size: 18px;
|
||||
line-height: 1.11;
|
||||
color: @color-silver;
|
||||
border: none;
|
||||
}
|
||||
input[type="time"]:first-child{
|
||||
margin-right: 16px;
|
||||
}
|
||||
input[type="time"]::-webkit-inner-spin-button {
|
||||
-webkit-appearance: none;
|
||||
display: none;
|
||||
border:none;
|
||||
}
|
||||
}
|
||||
input.program{
|
||||
width: 256px;
|
||||
height: 48px;
|
||||
border-radius: 2px;
|
||||
box-shadow: inset 0 1px 3px 0 @color-black-50;
|
||||
font-size: 18px;
|
||||
line-height: 1.11;
|
||||
color: @color-silver;
|
||||
padding-left: 16px;
|
||||
border: none;
|
||||
}
|
||||
.reports-select-operator{
|
||||
width: 192px;
|
||||
height: 48px;
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 1px 2px 0 @color-black-40;
|
||||
font-size: 18px;
|
||||
line-height: 1.11;
|
||||
color: @color-greyish-brown;
|
||||
}
|
||||
.reports-select-shift{
|
||||
width: 144px;
|
||||
height: 48px;
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 1px 2px 0 @color-black-40;
|
||||
}
|
||||
label.label_advanced_filters{
|
||||
margin-top: 35px;
|
||||
font-size: 18px;
|
||||
line-height: 1;
|
||||
color: @color-darkish-blue;
|
||||
span{
|
||||
text-decoration-line: underline;
|
||||
text-decoration-color: @color-darkish-blue;
|
||||
text-decoration-style: solid;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.body-left-header-machinestatus{
|
||||
border-right: 0px;
|
||||
}
|
||||
.body-left-center {
|
||||
width: 1448px;
|
||||
max-height: 681px;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
.body-left-center-container{
|
||||
width: 100%;
|
||||
table{
|
||||
table-layout: fixed;
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
thead{
|
||||
border-bottom: solid 2px @color-label-grey;
|
||||
font-size: 14px;
|
||||
line-height: 1.29;
|
||||
color: @color-darkish-blue;
|
||||
display: block;
|
||||
width: 1431px;
|
||||
}
|
||||
thead tr th{
|
||||
height: 48px;
|
||||
}
|
||||
tr:nth-child(even) {background: #FFF }
|
||||
tr:nth-child(odd) {background: #dddddd }
|
||||
|
||||
// thead tr{
|
||||
// width: 1448px;
|
||||
// }
|
||||
|
||||
thead tr:nth-child(odd){
|
||||
background: #FFF
|
||||
}
|
||||
|
||||
th:nth-child(1), td:nth-child(1){
|
||||
width:162px;
|
||||
max-width: 162px;
|
||||
text-align: center;
|
||||
}
|
||||
th:nth-child(2), td:nth-child(2){
|
||||
width:139px;
|
||||
max-width: 139px;
|
||||
text-align: center;
|
||||
}
|
||||
th:nth-child(3), td:nth-child(3){
|
||||
width:83px;
|
||||
max-width:83px;
|
||||
text-align: center;
|
||||
}
|
||||
th:nth-child(4), td:nth-child(4){
|
||||
width:83px;
|
||||
max-width:83px;
|
||||
text-align: center;
|
||||
}
|
||||
th:nth-child(5), td:nth-child(5){
|
||||
width:83px;
|
||||
max-width:83px;
|
||||
text-align: center;
|
||||
}
|
||||
th:nth-child(6), td:nth-child(6){
|
||||
width:83px;
|
||||
max-width:83px;
|
||||
text-align: center;
|
||||
}
|
||||
th:nth-child(7), td:nth-child(7){
|
||||
width:97px;
|
||||
max-width:97px;
|
||||
text-align: center;
|
||||
}
|
||||
th:nth-child(8), td:nth-child(8){
|
||||
width:97px;
|
||||
max-width:97px;
|
||||
text-align: center;
|
||||
}
|
||||
th:nth-child(9), td:nth-child(9){
|
||||
width:97px;
|
||||
max-width:97px;
|
||||
text-align: center;
|
||||
}
|
||||
th:nth-child(10), td:nth-child(10){
|
||||
width:115px;
|
||||
max-width:115px;
|
||||
text-align: center;
|
||||
}
|
||||
th:nth-child(11), td:nth-child(11){
|
||||
width:97px;
|
||||
max-width:97px;
|
||||
text-align: center;
|
||||
}
|
||||
th:nth-child(12), td:nth-child(12){
|
||||
width:148px;
|
||||
max-width:148px;
|
||||
text-align: center;
|
||||
}
|
||||
th:nth-child(13), td:nth-child(13){
|
||||
width:97px;
|
||||
max-width:97px;
|
||||
text-align: center;
|
||||
}
|
||||
th:last-child{
|
||||
font-size: 23px;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
}
|
||||
th, td{
|
||||
overflow: hidden;
|
||||
div{
|
||||
overflow: hidden;
|
||||
max-height: 64px;
|
||||
}
|
||||
}
|
||||
tbody{
|
||||
display: block;
|
||||
height: 631px;
|
||||
width: 1448px;
|
||||
overflow: scroll;
|
||||
tr{
|
||||
cursor: pointer;
|
||||
height: 64px;
|
||||
padding: 10px;
|
||||
font-size: 14px;
|
||||
line-height: 1.29;
|
||||
color: @color-greyish-brown;
|
||||
td{
|
||||
text-align: center;
|
||||
&.green{
|
||||
color: @color-apple-green;
|
||||
}
|
||||
&.red{
|
||||
color: @color-scarlet;
|
||||
}
|
||||
}
|
||||
td:last-child{
|
||||
width: 10px;
|
||||
}
|
||||
&.selected{
|
||||
background-color: rgba(23, 145, 255, 0.75);
|
||||
color: @color-white;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
.body-left-center-left{
|
||||
width: 360px;
|
||||
height: 616px;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
align-items: center;
|
||||
border: solid 1px @color-whitegrey;
|
||||
overflow-y: auto;
|
||||
.multiselect{
|
||||
z-index: 100;
|
||||
margin-bottom: 24px;
|
||||
margin-top: 16px;
|
||||
label{
|
||||
font-size: 14px;
|
||||
line-height: 1.29;
|
||||
color: @color-warm-grey;
|
||||
}
|
||||
}
|
||||
.selectBox{
|
||||
position: relative;
|
||||
width: 328px;
|
||||
height: 64px;
|
||||
}
|
||||
.selectBox select{
|
||||
width: 100%;
|
||||
padding: 8px;
|
||||
cursor: pointer;
|
||||
height: 64px;
|
||||
font-size: 18px;
|
||||
line-height: 1.11;
|
||||
color: @color-greyish-brown;
|
||||
margin-bottom: 0;
|
||||
margin-top: 0;
|
||||
option{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.overSelect{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
.checkboxes, .checkboxesU{
|
||||
display: none;
|
||||
}
|
||||
.checkboxesView, .checkboxesViewUser{
|
||||
width: calc(~"100% - 8px");;
|
||||
background-color: #fff;
|
||||
display: block;
|
||||
z-index: 100;
|
||||
padding: 6px 4px;
|
||||
box-shadow: 0 3px 5px 0 @color-black-40;
|
||||
label{
|
||||
font-size: 18px;
|
||||
margin:2px;
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
}
|
||||
.label-state{
|
||||
margin-left: 12px;
|
||||
}
|
||||
}
|
||||
div{
|
||||
select{
|
||||
width: 328px;
|
||||
height: 48px;
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 1px 2px 0 @color-black-40;
|
||||
margin-bottom: 24px;
|
||||
margin-top: 16px;
|
||||
padding-left: 16px;
|
||||
font-size: 18px;
|
||||
line-height: 1.11;
|
||||
color: @color-greyish-brown;
|
||||
}
|
||||
.accordion-dropdown{
|
||||
header {
|
||||
height: 64px;
|
||||
width: 312px;
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
color: @color-darkish-blue;
|
||||
line-height: 1;
|
||||
font-size: 18px;
|
||||
padding-left: 16px;
|
||||
cursor: pointer;
|
||||
span {
|
||||
width: 100%;
|
||||
}
|
||||
.expander {
|
||||
margin: 0 12px;
|
||||
line-height: 28px;
|
||||
height: 28px;
|
||||
width: 28px;
|
||||
font-size: 28px;
|
||||
}
|
||||
}
|
||||
section {
|
||||
width: 328px;
|
||||
min-height: 0;
|
||||
max-height: 0;
|
||||
transition: max-height 100ms ease-in-out, min-height 200ms ease-in-out;
|
||||
overflow: hidden;
|
||||
&.expanded {
|
||||
min-height: 64px;
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
max-height: 1000px;
|
||||
}
|
||||
.item {
|
||||
height: 64px;
|
||||
width: 100%;
|
||||
line-height: 64px;
|
||||
background-color: @color-white2;
|
||||
}
|
||||
|
||||
.dropdown{
|
||||
// background-color: @color-white2;
|
||||
height: 100%;
|
||||
margin-top: 2px;
|
||||
.filename{
|
||||
display: flex;
|
||||
height: 64px;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
i{
|
||||
color: @color-cyan-blue;
|
||||
margin: 0 20px 0 20px;
|
||||
}
|
||||
span{
|
||||
width: 100%;
|
||||
font-size: 18px;
|
||||
line-height: 1;
|
||||
color: @color-darkish-blue;
|
||||
}
|
||||
|
||||
&.selected{
|
||||
span, i{
|
||||
color:#4b4b4b;
|
||||
}
|
||||
}
|
||||
}
|
||||
.filename.selected{
|
||||
background-color: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.body-left-center-footer{
|
||||
height: 64px;
|
||||
width: 100%;
|
||||
border: solid 1px @color-whitegrey;
|
||||
.header-title{
|
||||
width: 360px;
|
||||
height: 64px;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.title{
|
||||
font-size: 14px;
|
||||
color: @color-warm-grey;
|
||||
}
|
||||
.data-temporal{
|
||||
font-size: 18px;
|
||||
line-height: 1;
|
||||
color: @color-greyish-brown;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.reports-box-body-right {
|
||||
width: 327px;
|
||||
height: 100%;
|
||||
.body-right-header{
|
||||
width: 100%;
|
||||
height: 70px;
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
margin-top: 18px;
|
||||
justify-content: flex-end;
|
||||
.body-right-header-left {
|
||||
width: 158px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-right: solid 2px @color-whitegrey;
|
||||
button{
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 1px 2px 0 @color-black-40;
|
||||
background-image: linear-gradient(to bottom,@color-white2, @color-silver);
|
||||
border: none;
|
||||
}
|
||||
button.active{
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 2px;
|
||||
box-shadow: inset 0 1px 3px 0 @color-black-40;
|
||||
background-image: linear-gradient(to bottom, @color-silver, @color-white2 );
|
||||
color: @color-clear-blue;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
.body-right-header-right {
|
||||
width: calc(~"100% - 158px");
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
button{
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 1px 2px 0 @color-black-40;
|
||||
background-image: linear-gradient(to bottom,@color-white2, @color-silver);
|
||||
border:none;
|
||||
}
|
||||
button:first-child{
|
||||
margin-right: 16px;
|
||||
}
|
||||
button:active{
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 2px;
|
||||
box-shadow: inset 0 1px 3px 0 @color-black-40;
|
||||
background-image: linear-gradient(to bottom, @color-silver, @color-white2 );
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
.body-right-card{
|
||||
width: 100%;
|
||||
height: calc(~"100% - 70px");
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
align-items: center;
|
||||
.card-report{
|
||||
> section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.rectangle_gray{
|
||||
width: 256px;
|
||||
height: 120px;
|
||||
border-radius: 2px;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: @color-white2;
|
||||
label{
|
||||
font-size: 18px;
|
||||
color: @color-warm-grey;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
span{
|
||||
font-size: 48px;
|
||||
font-weight: bold;
|
||||
line-height: 0.38;
|
||||
color: @color-clear-blue;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
+3344
-659
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,94 @@
|
||||
import Vue from "vue";
|
||||
import Component from "vue-class-component";
|
||||
import {cardReport} from "../../../modules/base-components/cards/index";
|
||||
import accordionDropdown from "../../../modules/base-components/accordion-dropdown.vue";
|
||||
import modalReportSelectColumn from "../../../modules/base-components/modal-report-select-column.vue";
|
||||
import { Accordion } from "src/modules/base-components";
|
||||
import { loginService } from "src/services";
|
||||
import DatePicker from "vue2-datepicker";
|
||||
import moment from "moment";
|
||||
import { ModalHelper } from "src/components/modals";
|
||||
|
||||
declare let $: any;
|
||||
@Component({ components: { datePicker: DatePicker, cardReport: cardReport, accordionDropdown: accordionDropdown, accordion: Accordion } })
|
||||
export default class CardReportAlarms extends Vue {
|
||||
|
||||
lang = {
|
||||
days: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
|
||||
months: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
|
||||
pickers: ['next 7 days', 'next 30 days', 'previous 7 days', 'previous 30 days'],
|
||||
placeholder: {
|
||||
date: 'Select Date',
|
||||
dateRange: 'Select Date Range'
|
||||
}
|
||||
}
|
||||
|
||||
filter: {
|
||||
interval?: Date[],
|
||||
timelineMacro: Array<string>,
|
||||
multiUser: Array<any>
|
||||
} = {
|
||||
timelineMacro: ["Eventi","Allarmi","Stato macchina","Programmi"],
|
||||
multiUser: [],
|
||||
interval: [new Date(new Date().setDate(new Date().getDate() - 6)), new Date(new Date().setDate(new Date().getDate() + 1))]
|
||||
};
|
||||
|
||||
|
||||
public selectedTab: string = "Production";
|
||||
selectDiagram: boolean = false;
|
||||
selectMoreFilter: boolean = false;
|
||||
selectTable: boolean = true;
|
||||
users: Array<any> = [];
|
||||
|
||||
get currentUser() {
|
||||
return this.$store.state.currentUser;
|
||||
}
|
||||
|
||||
async mounted() {
|
||||
this.users = await loginService.getAllUsers();
|
||||
this.users.unshift({ id: -1, username: this.$options.filters.localize("alarm_history_users_not_user", "Nessun utente") });
|
||||
this.filter.multiUser.push(this.currentUser.username);
|
||||
}
|
||||
|
||||
public selectTab(value){
|
||||
this.selectedTab = value;
|
||||
}
|
||||
timeformat() {
|
||||
return (moment() as any)._locale._longDateFormat.LT;
|
||||
}
|
||||
|
||||
viewDiagram(){
|
||||
if(!this.selectDiagram){
|
||||
this.selectDiagram = true;
|
||||
this.selectTable = false;
|
||||
}
|
||||
console.log("Diagram active");
|
||||
}
|
||||
|
||||
viewTable(){
|
||||
if(!this.selectTable){
|
||||
this.selectDiagram = false;
|
||||
this.selectTable = true;
|
||||
}
|
||||
console.log("Diagram active");
|
||||
}
|
||||
|
||||
viewMoreFilter(){
|
||||
if(!this.selectMoreFilter){
|
||||
this.selectMoreFilter = true;
|
||||
}
|
||||
else{
|
||||
this.selectMoreFilter = false;
|
||||
}
|
||||
}
|
||||
|
||||
openModalSelectField(){
|
||||
ModalHelper.ShowModal(modalReportSelectColumn);
|
||||
}
|
||||
public openSelectStateU() {
|
||||
if (!$('.checkboxesU').hasClass('checkboxesViewUser'))
|
||||
$('.checkboxesU').addClass('checkboxesViewUser');
|
||||
else
|
||||
$('.checkboxesU').removeClass('checkboxesViewUser');
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,155 @@
|
||||
<template>
|
||||
<div class="card-report-alarms">
|
||||
<div class="reports-box-body-left">
|
||||
<div class="body-left-header" v-if="selectDiagram">
|
||||
<div>
|
||||
<label class="intervaldate">{{'reports_body_header_date_range' | localize("Intervallo date")}}</label>
|
||||
<date-picker v-model="filter.interval" range type="daterange" :lang="lang"></date-picker>
|
||||
</div>
|
||||
<div>
|
||||
<label>{{'reports_body_header_axes_x' | localize("Asse X")}}</label>
|
||||
<select><option>{{'reports_body_header_option_axes_x_program_name' | localize("Nome Programma")}}</option></select>
|
||||
</div>
|
||||
<div>
|
||||
<label>{{'reports_body_header_axes_y' | localize("Asse Y")}}</label>
|
||||
<select><option>{{'reports_body_header_option_axes_y_frequency' | localize("Frequenza")}}</option></select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="body-left-header" v-if="!selectDiagram">
|
||||
<div>
|
||||
<label class="intervaldate">{{'reports_body_header_date_range' | localize("Intervallo date")}}</label>
|
||||
<date-picker v-model="filter.interval" range type="daterange" :lang="lang"></date-picker>
|
||||
</div>
|
||||
<div>
|
||||
<label>{{'reports_body_header_label_hour' | localize("Intervallo orario")}}</label>
|
||||
<div class="interval-time">
|
||||
<input type="time"/>
|
||||
<input type="time"/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label>{{'reports_body_header_label_program' | localize("Programma")}}</label>
|
||||
<input type="text" class="program" :placeholder="'reports_body_header_placeholder_program' | localize('Nome del programma')" />
|
||||
</div>
|
||||
<div class="multiselect">
|
||||
<label>{{'reports_body_header_label_operator' | localize("Operatore")}}</label>
|
||||
<div class="selectBoxU" @click="openSelectStateU()">
|
||||
<select id="selectListCheckboxes">
|
||||
<option><span v-for="(item, index) in filter.multiUser" :key="item" >{{'reports_filter_operator_'+item | localize(item)}}{{(index==filter.multiUser.length-1)?'':', '}}</span></option>
|
||||
<div class="overSelect"></div>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="checkboxesU">
|
||||
<div v-for="item in users" :key="item.id">
|
||||
<label :for="item.username">
|
||||
<div class="custom-checkbox">
|
||||
<input type="checkbox" v-model="filter.multiUser" :value="item.username" :id="item.username" />
|
||||
<label :for="item.username"></label>
|
||||
</div>
|
||||
<label class="label-state">{{item.username}}</label>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div>
|
||||
<label>{{'reports_body_header_label_operator' | localize("Operatore")}}</label>
|
||||
<select class="reports-select-operator"><option>{{'reports_body_header_option_operator_all' | localize("tutti")}}</option></select>
|
||||
</div> -->
|
||||
<div>
|
||||
<label>{{'reports_body_header_label_shift' | localize("Turno")}}</label>
|
||||
<select class="reports-select-shift"><option>{{'reports_body_header_option_shift_first' | localize("1°")}}</option></select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="body-left-center">
|
||||
<div class="body-left-center-container">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>{{'reports_table_program_name' | localize("Nome programma")}}</th>
|
||||
<th>{{'reports_table_dimensions' | localize("Dimensioni")}}</th>
|
||||
<th>{{'reports_table_quantity' | localize("Quantity")}}</th>
|
||||
<th>{{'reports_table_start_now' | localize("Ora inizio")}}</th>
|
||||
<th>{{'reports_table_end_time' | localize("Ora fine")}}</th>
|
||||
<th>{{'reports_table_date' | localize("Data")}}</th>
|
||||
<th>{{'reports_table_effective_time' | localize("T effettivo")}}</th>
|
||||
<th>{{'reports_table_average_time' | localize("T medio")}}</th>
|
||||
<th>{{'reports_table_theoretical_time' | localize("T teorico")}}</th>
|
||||
<th>{{'reports_table_deviation' | localize("Scostamento")}}</th>
|
||||
<th>{{'reports_table_quality' | localize("Qualità")}}</th>
|
||||
<th>{{'reports_table_operator_name' | localize("Nome operatore")}}</th>
|
||||
<th>{{'reports_table_shift' | localize("Turno")}}</th>
|
||||
<th @click="openModalSelectField()"><i class="fa fa-angle-double-right"></i></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td colspan="1">Finestra02.pgm</td>
|
||||
<td colspan="1">X: 1210; Y:900; Z: 63</td>
|
||||
<td colspan="1">1</td>
|
||||
<td colspan="1">11:25:00</td>
|
||||
<td colspan="1">13:10:00</td>
|
||||
<td colspan="1">12/04/2017</td>
|
||||
<td colspan="1">01:45:00</td>
|
||||
<td colspan="1">01:25:00</td>
|
||||
<td colspan="1">01:20:00</td>
|
||||
<td colspan="1" :class="{'green': false, 'red': true}">+00:20:00</td>
|
||||
<td colspan="1">Buono</td>
|
||||
<td colspan="1">Nome utente</td>
|
||||
<td colspan="1">1°</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="1">Finestra02.pgm</td>
|
||||
<td colspan="1">X: 1210; Y:900; Z: 63</td>
|
||||
<td colspan="1">1</td>
|
||||
<td colspan="1">11:25:00</td>
|
||||
<td colspan="1">13:10:00</td>
|
||||
<td colspan="1">12/04/2017</td>
|
||||
<td colspan="1">01:45:00</td>
|
||||
<td colspan="1">01:25:00</td>
|
||||
<td colspan="1">01:20:00</td>
|
||||
<td colspan="1" :class="{'green': false, 'red': true}">+00:20:00</td>
|
||||
<td colspan="1">Buono</td>
|
||||
<td colspan="1">Nome utente</td>
|
||||
<td colspan="1">1°</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="reports-box-body-right">
|
||||
<div class="body-right-header">
|
||||
<div class="body-right-header-left">
|
||||
<button :class="{'active': selectTable}" @click="viewTable()"><i class="fa fa-bars fa-2x"></i></button>
|
||||
<button :class="{'active': selectDiagram}" @click="viewDiagram()"><i class="fa fa-signal fa-2x"></i></button>
|
||||
</div>
|
||||
<div class="body-right-header-right">
|
||||
<button><i class="fa fa-print fa-2x"></i></button>
|
||||
<button><i class="fa fa-upload fa-2x"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="body-right-card">
|
||||
<card-report :title="'Valore assoluto (%)'">
|
||||
</card-report>
|
||||
<card-report :title="'Valore assoluto'">
|
||||
<div class="rectangle_gray">
|
||||
<label>{{'reports_body_rectangle_label_pieces produced' | localize("Pezzi prodotti")}}</label>
|
||||
<span>10.000</span>
|
||||
</div>
|
||||
</card-report>
|
||||
<card-report :title="'Valore assoluto'">
|
||||
<div class="rectangle_gray">
|
||||
<label>{{'reports_body_rectangle_label_discarded_pieces' | localize("Pezzi scartati")}}</label>
|
||||
<span>4</span>
|
||||
</div>
|
||||
</card-report>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script src="./card-report-alarms.ts" lang="ts"></script>
|
||||
@@ -0,0 +1,118 @@
|
||||
import Vue from "vue";
|
||||
import Component from "vue-class-component";
|
||||
import { cardReport } from "../../../modules/base-components/cards/index";
|
||||
import accordionDropdown from "../../../modules/base-components/accordion-dropdown.vue";
|
||||
import modalReportSelectColumn from "../../../modules/base-components/modal-report-select-column.vue";
|
||||
import { Accordion } from "src/modules/base-components";
|
||||
import { loginService } from "src/services";
|
||||
import DatePicker from "vue2-datepicker";
|
||||
import moment from "moment";
|
||||
import { ModalHelper } from "src/components/modals";
|
||||
|
||||
declare let $: any;
|
||||
@Component({ components: { datePicker: DatePicker, cardReport: cardReport, accordionDropdown: accordionDropdown, accordion: Accordion } })
|
||||
export default class CardReportEvents extends Vue {
|
||||
|
||||
lang = {
|
||||
days: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
|
||||
months: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
|
||||
pickers: ['next 7 days', 'next 30 days', 'previous 7 days', 'previous 30 days'],
|
||||
placeholder: {
|
||||
date: 'Select Date',
|
||||
dateRange: 'Select Date Range'
|
||||
}
|
||||
}
|
||||
|
||||
filter: {
|
||||
interval?: Date[],
|
||||
timelineMacro: Array<string>,
|
||||
multiUser: Array<any>
|
||||
} = {
|
||||
timelineMacro: ["Eventi", "Allarmi", "Stato macchina", "Programmi"],
|
||||
multiUser: [],
|
||||
interval: [new Date(new Date().setDate(new Date().getDate() - 6)), new Date(new Date().setDate(new Date().getDate() + 1))]
|
||||
};
|
||||
|
||||
|
||||
visibleColumns: string[] = ["ProgramName","Date","Deviation","Dimensions","EffectiveTime","Quality","Quantity","AverageTime","OperatorName","StartTime","TheoreticalTime","EndTime",];
|
||||
|
||||
isVisible(value){
|
||||
return this.visibleColumns.some(c => c == value);
|
||||
}
|
||||
|
||||
public selectedTab: string = "Production";
|
||||
selectDiagram: boolean = false;
|
||||
selectMoreFilter: boolean = false;
|
||||
selectTable: boolean = true;
|
||||
users: Array<any> = [];
|
||||
selectedPage = 1;
|
||||
paginationData: { firstDate: any, pages: number } = {firstDate: new Date(), pages: 6};
|
||||
|
||||
get paginator() {
|
||||
|
||||
let min = Math.max(this.selectedPage - 4, 0);
|
||||
let max = Math.min(this.selectedPage + 5, this.paginationData.pages);
|
||||
|
||||
return { min: min, max: max, count: (max - min) }
|
||||
|
||||
}
|
||||
|
||||
get currentUser() {
|
||||
return this.$store.state.currentUser;
|
||||
}
|
||||
|
||||
async mounted() {
|
||||
this.users = await loginService.getAllUsers();
|
||||
this.users.unshift({ id: -1, username: this.$options.filters.localize("alarm_history_users_not_user", "Nessun utente") });
|
||||
this.filter.multiUser.push(this.currentUser.username);
|
||||
}
|
||||
|
||||
public selectTab(value) {
|
||||
this.selectedTab = value;
|
||||
}
|
||||
timeformat() {
|
||||
return (moment() as any)._locale._longDateFormat.LT;
|
||||
}
|
||||
|
||||
viewDiagram() {
|
||||
if (!this.selectDiagram) {
|
||||
this.selectDiagram = true;
|
||||
this.selectTable = false;
|
||||
}
|
||||
console.log("Diagram active");
|
||||
}
|
||||
|
||||
viewTable() {
|
||||
if (!this.selectTable) {
|
||||
this.selectDiagram = false;
|
||||
this.selectTable = true;
|
||||
}
|
||||
console.log("Diagram active");
|
||||
}
|
||||
|
||||
viewMoreFilter() {
|
||||
if (!this.selectMoreFilter) {
|
||||
this.selectMoreFilter = true;
|
||||
}
|
||||
else {
|
||||
this.selectMoreFilter = false;
|
||||
}
|
||||
}
|
||||
|
||||
async openModalSelectField() {
|
||||
this.visibleColumns = await ModalHelper.ShowModalAsync(modalReportSelectColumn, this.visibleColumns);
|
||||
|
||||
console.log(this.visibleColumns);
|
||||
}
|
||||
public openSelectStateU() {
|
||||
if (!$('.checkboxesU').hasClass('checkboxesViewUser'))
|
||||
$('.checkboxesU').addClass('checkboxesViewUser');
|
||||
else
|
||||
$('.checkboxesU').removeClass('checkboxesViewUser');
|
||||
}
|
||||
|
||||
public selectPage(page) {
|
||||
debugger
|
||||
this.selectedPage = Math.min(Math.max(page,1), this.paginationData.pages);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,146 @@
|
||||
<template>
|
||||
<div class="card-report-events">
|
||||
<div class="reports-box-body-left">
|
||||
<div class="body-left-header" v-if="selectDiagram">
|
||||
<div>
|
||||
<label class="intervaldate">{{'reports_body_header_date_range' | localize("Intervallo date")}}</label>
|
||||
<date-picker v-model="filter.interval" range type="daterange" :lang="lang"></date-picker>
|
||||
</div>
|
||||
<div>
|
||||
<label>{{'reports_body_header_axes_x' | localize("Asse X")}}</label>
|
||||
<select><option>{{'reports_body_header_option_axes_x_program_name' | localize("Nome Programma")}}</option></select>
|
||||
</div>
|
||||
<div>
|
||||
<label>{{'reports_body_header_axes_y' | localize("Asse Y")}}</label>
|
||||
<select><option>{{'reports_body_header_option_axes_y_frequency' | localize("Frequenza")}}</option></select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="body-left-header" v-if="!selectDiagram">
|
||||
<div>
|
||||
<label class="intervaldate">{{'reports_body_header_date_range' | localize("Intervallo date")}}</label>
|
||||
<date-picker v-model="filter.interval" range type="daterange" :lang="lang"></date-picker>
|
||||
</div>
|
||||
<div>
|
||||
<label>{{'reports_body_header_label_hour' | localize("Intervallo orario")}}</label>
|
||||
<div class="interval-time">
|
||||
<input type="time"/>
|
||||
<input type="time"/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label>{{'reports_body_header_label_program' | localize("Programma")}}</label>
|
||||
<input type="text" class="program" :placeholder="'reports_body_header_placeholder_program' | localize('Nome del programma')" />
|
||||
</div>
|
||||
<div class="multiselect">
|
||||
<label>{{'reports_body_header_label_operator' | localize("Operatore")}}</label>
|
||||
<div class="selectBoxU" @click="openSelectStateU()">
|
||||
<select id="selectListCheckboxes">
|
||||
<option><span v-for="(item, index) in filter.multiUser" :key="item" >{{'reports_filter_operator_'+item | localize(item)}}{{(index==filter.multiUser.length-1)?'':', '}}</span></option>
|
||||
<div class="overSelect"></div>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="checkboxesU">
|
||||
<div v-for="item in users" :key="item.id">
|
||||
<label :for="item.username">
|
||||
<div class="custom-checkbox">
|
||||
<input type="checkbox" v-model="filter.multiUser" :value="item.username" :id="item.username" />
|
||||
<label :for="item.username"></label>
|
||||
</div>
|
||||
<label class="label-state">{{item.username}}</label>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div>
|
||||
<label>{{'reports_body_header_label_operator' | localize("Operatore")}}</label>
|
||||
<select class="reports-select-operator"><option>{{'reports_body_header_option_operator_all' | localize("tutti")}}</option></select>
|
||||
</div> -->
|
||||
<!-- <div>
|
||||
<label>{{'reports_body_header_label_shift' | localize("Turno")}}</label>
|
||||
<select class="reports-select-shift"><option>{{'reports_body_header_option_shift_first' | localize("1°")}}</option></select>
|
||||
</div> -->
|
||||
</div>
|
||||
<div class="body-left-center">
|
||||
<div class="body-left-center-container">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th :style="{width:(100/visibleColumns.length)+'%'}" v-if="isVisible('ProgramName')">{{'reports_table_program_name' | localize("Nome programma")}}</th>
|
||||
<th :style="{width:(100/visibleColumns.length)+'%'}" v-if="isVisible('Dimensions')">{{'reports_table_dimensions' | localize("Dimensioni")}}</th>
|
||||
<th :style="{width:(100/visibleColumns.length)+'%'}" v-if="isVisible('Quantity')">{{'reports_table_quantity' | localize("Quantity")}}</th>
|
||||
<th :style="{width:(100/visibleColumns.length)+'%'}" v-if="isVisible('StartTime')">{{'reports_table_start_now' | localize("Ora inizio")}}</th>
|
||||
<th :style="{width:(100/visibleColumns.length)+'%'}" v-if="isVisible('EndTime')">{{'reports_table_end_time' | localize("Ora fine")}}</th>
|
||||
<th :style="{width:(100/visibleColumns.length)+'%'}" v-if="isVisible('Date')">{{'reports_table_date' | localize("Data")}}</th>
|
||||
<th :style="{width:(100/visibleColumns.length)+'%'}" v-if="isVisible('EffectiveTime')">{{'reports_table_effective_time' | localize("T effettivo")}}</th>
|
||||
<th :style="{width:(100/visibleColumns.length)+'%'}" v-if="isVisible('AverageTime')">{{'reports_table_average_time' | localize("T medio")}}</th>
|
||||
<th :style="{width:(100/visibleColumns.length)+'%'}" v-if="isVisible('TheoreticalTime')">{{'reports_table_theoretical_time' | localize("T teorico")}}</th>
|
||||
<th :style="{width:(100/visibleColumns.length)+'%'}" v-if="isVisible('Deviation')">{{'reports_table_deviation' | localize("Scostamento")}}</th>
|
||||
<th :style="{width:(100/visibleColumns.length)+'%'}" v-if="isVisible('Quality')">{{'reports_table_quality' | localize("Qualità")}}</th>
|
||||
<th :style="{width:(100/visibleColumns.length)+'%'}" v-if="isVisible('OperatorName')">{{'reports_table_operator_name' | localize("Nome operatore")}}</th>
|
||||
<!-- <th v-if="isVisible('Shift')">{{'reports_table_shift' | localize("Turno")}}</th> -->
|
||||
<th @click="openModalSelectField()"><i class="fa fa-angle-double-right"></i></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td :style="{width:(100/visibleColumns.length)+'%'}" v-if="isVisible('ProgramName')">Finestra02.pgm</td>
|
||||
<td :style="{width:(100/visibleColumns.length)+'%'}" v-if="isVisible('Dimensions')">X: 1210; Y:900; Z: 63</td>
|
||||
<td :style="{width:(100/visibleColumns.length)+'%'}" v-if="isVisible('Quantity')">1</td>
|
||||
<td :style="{width:(100/visibleColumns.length)+'%'}" v-if="isVisible('StartTime')">11:25:00</td>
|
||||
<td :style="{width:(100/visibleColumns.length)+'%'}" v-if="isVisible('EndTime')">13:10:00</td>
|
||||
<td :style="{width:(100/visibleColumns.length)+'%'}" v-if="isVisible('Date')">12/04/2017</td>
|
||||
<td :style="{width:(100/visibleColumns.length)+'%'}" v-if="isVisible('EffectiveTime')">01:45:00</td>
|
||||
<td :style="{width:(100/visibleColumns.length)+'%'}" v-if="isVisible('AverageTime')">01:25:00</td>
|
||||
<td :style="{width:(100/visibleColumns.length)+'%'}" v-if="isVisible('TheoreticalTime')">01:20:00</td>
|
||||
<td :style="{width:(100/visibleColumns.length)+'%'}" v-if="isVisible('Deviation')" :class="{'green': false, 'red': true}">+00:20:00</td>
|
||||
<td :style="{width:(100/visibleColumns.length)+'%'}" v-if="isVisible('Quality')">Buono</td>
|
||||
<td :style="{width:(100/visibleColumns.length)+'%'}" v-if="isVisible('OperatorName')">Nome utente</td>
|
||||
<!-- <td v-if="isVisible('Shift')">1°</td> -->
|
||||
<td></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="pagination">
|
||||
<button @click="selectPage(selectedPage-1)"><i class="fa fa-angle-double-left"></i></button>
|
||||
<button class="page" :class="{active: selectedPage == paginator.min + p}"
|
||||
v-for="(p, idx) in paginator.count" :key="'page' + idx"
|
||||
@click="selectPage(paginator.min + p)">{{paginator.min + p}}</button>
|
||||
<button @click="selectPage(selectedPage+1)"><i class="fa fa-angle-double-right"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="reports-box-body-right">
|
||||
<div class="body-right-header">
|
||||
<div class="body-right-header-left">
|
||||
<button :class="{'active': selectTable}" @click="viewTable()"><i class="fa fa-bars fa-2x"></i></button>
|
||||
<button :class="{'active': selectDiagram}" @click="viewDiagram()"><i class="fa fa-signal fa-2x"></i></button>
|
||||
</div>
|
||||
<div class="body-right-header-right">
|
||||
<button><i class="fa fa-print fa-2x"></i></button>
|
||||
<button><i class="fa fa-upload fa-2x"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="body-right-card">
|
||||
<card-report :title="'Valore assoluto (%)'">
|
||||
</card-report>
|
||||
<card-report :title="'Valore assoluto'">
|
||||
<div class="rectangle_gray">
|
||||
<label>{{'reports_body_rectangle_label_pieces produced' | localize("Pezzi prodotti")}}</label>
|
||||
<span>10.000</span>
|
||||
</div>
|
||||
</card-report>
|
||||
<card-report :title="'Valore assoluto'">
|
||||
<div class="rectangle_gray">
|
||||
<label>{{'reports_body_rectangle_label_discarded_pieces' | localize("Pezzi scartati")}}</label>
|
||||
<span>4</span>
|
||||
</div>
|
||||
</card-report>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script src="./card-report-events.ts" lang="ts"></script>
|
||||
@@ -0,0 +1,219 @@
|
||||
import Vue from "vue";
|
||||
import Component from "vue-class-component";
|
||||
import { cardReport } from "../../../modules/base-components/cards/index";
|
||||
import accordionDropdown from "../../../modules/base-components/accordion-dropdown.vue";
|
||||
import modalReportSelectColumn from "../../../modules/base-components/modal-report-select-column.vue";
|
||||
import { Accordion } from "src/modules/base-components";
|
||||
import { loginService } from "src/services";
|
||||
import DatePicker from "vue2-datepicker";
|
||||
import moment from "moment";
|
||||
import { ModalHelper } from "src/components/modals";
|
||||
|
||||
declare let $: any;
|
||||
@Component({ components: { datePicker: DatePicker, cardReport: cardReport, accordionDropdown: accordionDropdown, accordion: Accordion } })
|
||||
export default class CardReportMachineStatus extends Vue {
|
||||
|
||||
lang = {
|
||||
days: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
|
||||
months: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
|
||||
pickers: ['next 7 days', 'next 30 days', 'previous 7 days', 'previous 30 days'],
|
||||
placeholder: {
|
||||
date: 'Select Date',
|
||||
dateRange: 'Select Date Range'
|
||||
}
|
||||
}
|
||||
|
||||
filter: {
|
||||
interval?: Date[],
|
||||
timelineMacro: Array<string>,
|
||||
multiUser: Array<any>
|
||||
} = {
|
||||
timelineMacro: ["Eventi", "Allarmi", "Stato macchina", "Programmi"],
|
||||
multiUser: [],
|
||||
interval: [new Date(new Date().setDate(new Date().getDate() - 6)), new Date(new Date().setDate(new Date().getDate() + 1))]
|
||||
};
|
||||
|
||||
|
||||
visibleColumns: string[] = ["ProgramName","Date","Deviation","Dimensions","EffectiveTime","Quality","Quantity","AverageTime","OperatorName","StartTime","TheoreticalTime","EndTime",];
|
||||
|
||||
isVisible(value){
|
||||
return this.visibleColumns.some(c => c == value);
|
||||
}
|
||||
|
||||
public selectedTab: string = "Production";
|
||||
selectDiagram: boolean = false;
|
||||
selectMoreFilter: boolean = false;
|
||||
selectTable: boolean = true;
|
||||
users: Array<any> = [];
|
||||
selectedPage = 1;
|
||||
paginationData: { firstDate: any, pages: number } = {firstDate: new Date(), pages: 6};
|
||||
|
||||
get paginator() {
|
||||
|
||||
let min = Math.max(this.selectedPage - 4, 0);
|
||||
let max = Math.min(this.selectedPage + 5, this.paginationData.pages);
|
||||
|
||||
return { min: min, max: max, count: (max - min) }
|
||||
|
||||
}
|
||||
|
||||
get currentUser() {
|
||||
return this.$store.state.currentUser;
|
||||
}
|
||||
|
||||
async mounted() {
|
||||
this.users = await loginService.getAllUsers();
|
||||
this.users.unshift({ id: -1, username: this.$options.filters.localize("alarm_history_users_not_user", "Nessun utente") });
|
||||
this.filter.multiUser.push(this.currentUser.username);
|
||||
}
|
||||
|
||||
public selectTab(value) {
|
||||
this.selectedTab = value;
|
||||
}
|
||||
timeformat() {
|
||||
return (moment() as any)._locale._longDateFormat.LT;
|
||||
}
|
||||
|
||||
viewDiagram() {
|
||||
if (!this.selectDiagram) {
|
||||
this.selectDiagram = true;
|
||||
this.selectTable = false;
|
||||
}
|
||||
console.log("Diagram active");
|
||||
}
|
||||
|
||||
viewTable() {
|
||||
if (!this.selectTable) {
|
||||
this.selectDiagram = false;
|
||||
this.selectTable = true;
|
||||
}
|
||||
console.log("Diagram active");
|
||||
}
|
||||
|
||||
viewMoreFilter() {
|
||||
if (!this.selectMoreFilter) {
|
||||
this.selectMoreFilter = true;
|
||||
}
|
||||
else {
|
||||
this.selectMoreFilter = false;
|
||||
}
|
||||
}
|
||||
|
||||
async openModalSelectField() {
|
||||
this.visibleColumns = await ModalHelper.ShowModalAsync(modalReportSelectColumn, this.visibleColumns);
|
||||
|
||||
console.log(this.visibleColumns);
|
||||
}
|
||||
public openSelectStateU() {
|
||||
if (!$('.checkboxesU').hasClass('checkboxesViewUser'))
|
||||
$('.checkboxesU').addClass('checkboxesViewUser');
|
||||
else
|
||||
$('.checkboxesU').removeClass('checkboxesViewUser');
|
||||
}
|
||||
|
||||
public selectPage(page) {
|
||||
debugger
|
||||
this.selectedPage = Math.min(Math.max(page,1), this.paginationData.pages);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/** versione zeplin non cancellare */
|
||||
|
||||
// import Vue from "vue";
|
||||
// import Component from "vue-class-component";
|
||||
// import {cardReport} from "../../../modules/base-components/cards/index";
|
||||
// import accordionDropdown from "../../../modules/base-components/accordion-dropdown.vue";
|
||||
// import modalReportSelectColumn from "../../../modules/base-components/modal-report-select-column.vue";
|
||||
// import { Accordion } from "src/modules/base-components";
|
||||
// import { loginService } from "src/services";
|
||||
// import DatePicker from "vue2-datepicker";
|
||||
// import moment from "moment";
|
||||
// import { ModalHelper } from "src/components/modals";
|
||||
|
||||
// declare let $: any;
|
||||
// @Component({ components: { datePicker: DatePicker, cardReport: cardReport, accordionDropdown: accordionDropdown, accordion: Accordion } })
|
||||
// export default class CardReportMachineStatus extends Vue {
|
||||
|
||||
// lang = {
|
||||
// days: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
|
||||
// months: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
|
||||
// pickers: ['next 7 days', 'next 30 days', 'previous 7 days', 'previous 30 days'],
|
||||
// placeholder: {
|
||||
// date: 'Select Date',
|
||||
// dateRange: 'Select Date Range'
|
||||
// }
|
||||
// }
|
||||
|
||||
// filter: {
|
||||
// interval?: Date[],
|
||||
// timelineMacro: Array<string>,
|
||||
// multiUser: Array<any>
|
||||
// } = {
|
||||
// timelineMacro: ["Eventi","Allarmi","Stato macchina","Programmi"],
|
||||
// multiUser: [],
|
||||
// interval: [new Date(new Date().setDate(new Date().getDate() - 6)), new Date(new Date().setDate(new Date().getDate() + 1))]
|
||||
// };
|
||||
|
||||
|
||||
// public selectedTab: string = "Production";
|
||||
// selectDiagram: boolean = false;
|
||||
// selectMoreFilter: boolean = false;
|
||||
// selectTable: boolean = true;
|
||||
// users: Array<any> = [];
|
||||
|
||||
// get currentUser() {
|
||||
// return this.$store.state.currentUser;
|
||||
// }
|
||||
|
||||
// async mounted() {
|
||||
// this.users = await loginService.getAllUsers();
|
||||
// this.users.unshift({ id: -1, username: this.$options.filters.localize("alarm_history_users_not_user", "Nessun utente") });
|
||||
// this.filter.multiUser.push(this.currentUser.username);
|
||||
// }
|
||||
|
||||
// public selectTab(value){
|
||||
// this.selectedTab = value;
|
||||
// }
|
||||
// timeformat() {
|
||||
// return (moment() as any)._locale._longDateFormat.LT;
|
||||
// }
|
||||
|
||||
// viewDiagram(){
|
||||
// if(!this.selectDiagram){
|
||||
// this.selectDiagram = true;
|
||||
// this.selectTable = false;
|
||||
// }
|
||||
// console.log("Diagram active");
|
||||
// }
|
||||
|
||||
// viewTable(){
|
||||
// if(!this.selectTable){
|
||||
// this.selectDiagram = false;
|
||||
// this.selectTable = true;
|
||||
// }
|
||||
// console.log("Diagram active");
|
||||
// }
|
||||
|
||||
// viewMoreFilter(){
|
||||
// if(!this.selectMoreFilter){
|
||||
// this.selectMoreFilter = true;
|
||||
// }
|
||||
// else{
|
||||
// this.selectMoreFilter = false;
|
||||
// }
|
||||
// }
|
||||
|
||||
// openModalSelectField(){
|
||||
// ModalHelper.ShowModal(modalReportSelectColumn);
|
||||
// }
|
||||
// public openSelectStateU() {
|
||||
// if (!$('.checkboxesU').hasClass('checkboxesViewUser'))
|
||||
// $('.checkboxesU').addClass('checkboxesViewUser');
|
||||
// else
|
||||
// $('.checkboxesU').removeClass('checkboxesViewUser');
|
||||
// }
|
||||
// }
|
||||
@@ -0,0 +1,188 @@
|
||||
<template>
|
||||
<div class="card-report-machine-status">
|
||||
<div class="reports-box-body-left">
|
||||
<div class="body-left-header" v-if="selectDiagram">
|
||||
<div>
|
||||
<label class="intervaldate">{{'reports_body_header_date_range' | localize("Intervallo date")}}</label>
|
||||
<date-picker v-model="filter.interval" range type="daterange" :lang="lang"></date-picker>
|
||||
</div>
|
||||
<div>
|
||||
<label>{{'reports_body_header_axes_x' | localize("Asse X")}}</label>
|
||||
<select><option>{{'reports_body_header_option_axes_x_program_name' | localize("Nome Programma")}}</option></select>
|
||||
</div>
|
||||
<div>
|
||||
<label>{{'reports_body_header_axes_y' | localize("Asse Y")}}</label>
|
||||
<select><option>{{'reports_body_header_option_axes_y_frequency' | localize("Frequenza")}}</option></select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="body-left-header" v-if="!selectDiagram">
|
||||
<div>
|
||||
<label class="intervaldate">{{'reports_body_header_date_range' | localize("Intervallo date")}}</label>
|
||||
<date-picker v-model="filter.interval" range type="daterange" :lang="lang"></date-picker>
|
||||
</div>
|
||||
<div>
|
||||
<label>{{'reports_body_header_label_hour' | localize("Intervallo orario")}}</label>
|
||||
<div class="interval-time">
|
||||
<input type="time"/>
|
||||
<input type="time"/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label>{{'reports_body_header_label_program' | localize("Programma")}}</label>
|
||||
<input type="text" class="program" :placeholder="'reports_body_header_placeholder_program' | localize('Nome del programma')" />
|
||||
</div>
|
||||
<div class="multiselect">
|
||||
<label>{{'reports_body_header_label_operator' | localize("Operatore")}}</label>
|
||||
<div class="selectBoxU" @click="openSelectStateU()">
|
||||
<select id="selectListCheckboxes">
|
||||
<option><span v-for="(item, index) in filter.multiUser" :key="item" >{{'reports_filter_operator_'+item | localize(item)}}{{(index==filter.multiUser.length-1)?'':', '}}</span></option>
|
||||
<div class="overSelect"></div>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="checkboxesU">
|
||||
<div v-for="item in users" :key="item.id">
|
||||
<label :for="item.username">
|
||||
<div class="custom-checkbox">
|
||||
<input type="checkbox" v-model="filter.multiUser" :value="item.username" :id="item.username" />
|
||||
<label :for="item.username"></label>
|
||||
</div>
|
||||
<label class="label-state">{{item.username}}</label>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div>
|
||||
<label>{{'reports_body_header_label_operator' | localize("Operatore")}}</label>
|
||||
<select class="reports-select-operator"><option>{{'reports_body_header_option_operator_all' | localize("tutti")}}</option></select>
|
||||
</div> -->
|
||||
<!-- <div>
|
||||
<label>{{'reports_body_header_label_shift' | localize("Turno")}}</label>
|
||||
<select class="reports-select-shift"><option>{{'reports_body_header_option_shift_first' | localize("1°")}}</option></select>
|
||||
</div> -->
|
||||
</div>
|
||||
<div class="body-left-center">
|
||||
<div class="body-left-center-container">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th :style="{width:(100/visibleColumns.length)+'%'}" v-if="isVisible('ProgramName')">{{'reports_table_program_name' | localize("Nome programma")}}</th>
|
||||
<th :style="{width:(100/visibleColumns.length)+'%'}" v-if="isVisible('Dimensions')">{{'reports_table_dimensions' | localize("Dimensioni")}}</th>
|
||||
<th :style="{width:(100/visibleColumns.length)+'%'}" v-if="isVisible('Quantity')">{{'reports_table_quantity' | localize("Quantity")}}</th>
|
||||
<th :style="{width:(100/visibleColumns.length)+'%'}" v-if="isVisible('StartTime')">{{'reports_table_start_now' | localize("Ora inizio")}}</th>
|
||||
<th :style="{width:(100/visibleColumns.length)+'%'}" v-if="isVisible('EndTime')">{{'reports_table_end_time' | localize("Ora fine")}}</th>
|
||||
<th :style="{width:(100/visibleColumns.length)+'%'}" v-if="isVisible('Date')">{{'reports_table_date' | localize("Data")}}</th>
|
||||
<th :style="{width:(100/visibleColumns.length)+'%'}" v-if="isVisible('EffectiveTime')">{{'reports_table_effective_time' | localize("T effettivo")}}</th>
|
||||
<th :style="{width:(100/visibleColumns.length)+'%'}" v-if="isVisible('AverageTime')">{{'reports_table_average_time' | localize("T medio")}}</th>
|
||||
<th :style="{width:(100/visibleColumns.length)+'%'}" v-if="isVisible('TheoreticalTime')">{{'reports_table_theoretical_time' | localize("T teorico")}}</th>
|
||||
<th :style="{width:(100/visibleColumns.length)+'%'}" v-if="isVisible('Deviation')">{{'reports_table_deviation' | localize("Scostamento")}}</th>
|
||||
<th :style="{width:(100/visibleColumns.length)+'%'}" v-if="isVisible('Quality')">{{'reports_table_quality' | localize("Qualità")}}</th>
|
||||
<th :style="{width:(100/visibleColumns.length)+'%'}" v-if="isVisible('OperatorName')">{{'reports_table_operator_name' | localize("Nome operatore")}}</th>
|
||||
<!-- <th v-if="isVisible('Shift')">{{'reports_table_shift' | localize("Turno")}}</th> -->
|
||||
<th @click="openModalSelectField()"><i class="fa fa-angle-double-right"></i></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td :style="{width:(100/visibleColumns.length)+'%'}" v-if="isVisible('ProgramName')">Finestra02.pgm</td>
|
||||
<td :style="{width:(100/visibleColumns.length)+'%'}" v-if="isVisible('Dimensions')">X: 1210; Y:900; Z: 63</td>
|
||||
<td :style="{width:(100/visibleColumns.length)+'%'}" v-if="isVisible('Quantity')">1</td>
|
||||
<td :style="{width:(100/visibleColumns.length)+'%'}" v-if="isVisible('StartTime')">11:25:00</td>
|
||||
<td :style="{width:(100/visibleColumns.length)+'%'}" v-if="isVisible('EndTime')">13:10:00</td>
|
||||
<td :style="{width:(100/visibleColumns.length)+'%'}" v-if="isVisible('Date')">12/04/2017</td>
|
||||
<td :style="{width:(100/visibleColumns.length)+'%'}" v-if="isVisible('EffectiveTime')">01:45:00</td>
|
||||
<td :style="{width:(100/visibleColumns.length)+'%'}" v-if="isVisible('AverageTime')">01:25:00</td>
|
||||
<td :style="{width:(100/visibleColumns.length)+'%'}" v-if="isVisible('TheoreticalTime')">01:20:00</td>
|
||||
<td :style="{width:(100/visibleColumns.length)+'%'}" v-if="isVisible('Deviation')" :class="{'green': false, 'red': true}">+00:20:00</td>
|
||||
<td :style="{width:(100/visibleColumns.length)+'%'}" v-if="isVisible('Quality')">Buono</td>
|
||||
<td :style="{width:(100/visibleColumns.length)+'%'}" v-if="isVisible('OperatorName')">Nome utente</td>
|
||||
<!-- <td v-if="isVisible('Shift')">1°</td> -->
|
||||
<td></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="pagination">
|
||||
<button @click="selectPage(selectedPage-1)"><i class="fa fa-angle-double-left"></i></button>
|
||||
<button class="page" :class="{active: selectedPage == paginator.min + p}"
|
||||
v-for="(p, idx) in paginator.count" :key="'page' + idx"
|
||||
@click="selectPage(paginator.min + p)">{{paginator.min + p}}</button>
|
||||
<button @click="selectPage(selectedPage+1)"><i class="fa fa-angle-double-right"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="reports-box-body-right">
|
||||
<div class="body-right-header">
|
||||
<div class="body-right-header-left">
|
||||
<button :class="{'active': selectTable}" @click="viewTable()"><i class="fa fa-bars fa-2x"></i></button>
|
||||
<button :class="{'active': selectDiagram}" @click="viewDiagram()"><i class="fa fa-signal fa-2x"></i></button>
|
||||
</div>
|
||||
<div class="body-right-header-right">
|
||||
<button><i class="fa fa-print fa-2x"></i></button>
|
||||
<button><i class="fa fa-upload fa-2x"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="body-right-card">
|
||||
<card-report :title="'Valore assoluto (%)'">
|
||||
</card-report>
|
||||
<card-report :title="'Valore assoluto'">
|
||||
<div class="rectangle_gray">
|
||||
<label>{{'reports_body_rectangle_label_pieces produced' | localize("Pezzi prodotti")}}</label>
|
||||
<span>10.000</span>
|
||||
</div>
|
||||
</card-report>
|
||||
<card-report :title="'Valore assoluto'">
|
||||
<div class="rectangle_gray">
|
||||
<label>{{'reports_body_rectangle_label_discarded_pieces' | localize("Pezzi scartati")}}</label>
|
||||
<span>4</span>
|
||||
</div>
|
||||
</card-report>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- VERSIONE ZEPLIN non cancellare -->
|
||||
|
||||
<!-- <div class="card-report-machine-status">
|
||||
<div class="reports-box-body-left">
|
||||
<div class="body-left-header-machinestatus">
|
||||
<div>
|
||||
<label class="intervaldate">{{'reports_body_header_date_range' | localize("Intervallo date")}}</label>
|
||||
<date-picker v-model="filter.interval" range type="daterange" :lang="lang"></date-picker>
|
||||
</div>
|
||||
</div>
|
||||
<div class="body-left-center">
|
||||
MachineStatus
|
||||
</div>
|
||||
</div>
|
||||
<div class="reports-box-body-right">
|
||||
<div class="body-right-header">
|
||||
<div class="body-right-header-right">
|
||||
<button><i class="fa fa-print fa-2x"></i></button>
|
||||
<button><i class="fa fa-upload fa-2x"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="body-right-card">
|
||||
<card-report :title="'Valore assoluto (%)'">
|
||||
|
||||
</card-report>
|
||||
<card-report :title="'Valore assoluto'">
|
||||
<div class="rectangle_gray">
|
||||
<label>{{'reports_body_rectangle_label_pieces produced' | localize("Pezzi prodotti")}}</label>
|
||||
<span>10.000</span>
|
||||
</div>
|
||||
</card-report>
|
||||
<card-report :title="'Valore assoluto'">
|
||||
<div class="rectangle_gray">
|
||||
<label>{{'reports_body_rectangle_label_discarded_pieces' | localize("Pezzi scartati")}}</label>
|
||||
<span>4</span>
|
||||
</div>
|
||||
</card-report>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
</template>
|
||||
|
||||
<script src="./card-report-machine-status.ts" lang="ts"></script>
|
||||
@@ -0,0 +1,118 @@
|
||||
import Vue from "vue";
|
||||
import Component from "vue-class-component";
|
||||
import { cardReport } from "../../../modules/base-components/cards/index";
|
||||
import accordionDropdown from "../../../modules/base-components/accordion-dropdown.vue";
|
||||
import modalReportSelectColumn from "../../../modules/base-components/modal-report-select-column.vue";
|
||||
import { Accordion } from "src/modules/base-components";
|
||||
import { loginService } from "src/services";
|
||||
import DatePicker from "vue2-datepicker";
|
||||
import moment from "moment";
|
||||
import { ModalHelper } from "src/components/modals";
|
||||
|
||||
declare let $: any;
|
||||
@Component({ components: { datePicker: DatePicker, cardReport: cardReport, accordionDropdown: accordionDropdown, accordion: Accordion } })
|
||||
export default class CardReportProduction extends Vue {
|
||||
|
||||
lang = {
|
||||
days: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
|
||||
months: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
|
||||
pickers: ['next 7 days', 'next 30 days', 'previous 7 days', 'previous 30 days'],
|
||||
placeholder: {
|
||||
date: 'Select Date',
|
||||
dateRange: 'Select Date Range'
|
||||
}
|
||||
}
|
||||
|
||||
filter: {
|
||||
interval?: Date[],
|
||||
timelineMacro: Array<string>,
|
||||
multiUser: Array<any>
|
||||
} = {
|
||||
timelineMacro: ["Eventi", "Allarmi", "Stato macchina", "Programmi"],
|
||||
multiUser: [],
|
||||
interval: [new Date(new Date().setDate(new Date().getDate() - 6)), new Date(new Date().setDate(new Date().getDate() + 1))]
|
||||
};
|
||||
|
||||
|
||||
visibleColumns: string[] = ["ProgramName","Date","Deviation","Dimensions","EffectiveTime","Quality","Quantity","AverageTime","OperatorName","StartTime","TheoreticalTime","EndTime",];
|
||||
|
||||
isVisible(value){
|
||||
return this.visibleColumns.some(c => c == value);
|
||||
}
|
||||
|
||||
public selectedTab: string = "Production";
|
||||
selectDiagram: boolean = false;
|
||||
selectMoreFilter: boolean = false;
|
||||
selectTable: boolean = true;
|
||||
users: Array<any> = [];
|
||||
selectedPage = 1;
|
||||
paginationData: { firstDate: any, pages: number } = {firstDate: new Date(), pages: 6};
|
||||
|
||||
get paginator() {
|
||||
|
||||
let min = Math.max(this.selectedPage - 4, 0);
|
||||
let max = Math.min(this.selectedPage + 5, this.paginationData.pages);
|
||||
|
||||
return { min: min, max: max, count: (max - min) }
|
||||
|
||||
}
|
||||
|
||||
get currentUser() {
|
||||
return this.$store.state.currentUser;
|
||||
}
|
||||
|
||||
async mounted() {
|
||||
this.users = await loginService.getAllUsers();
|
||||
this.users.unshift({ id: -1, username: this.$options.filters.localize("alarm_history_users_not_user", "Nessun utente") });
|
||||
this.filter.multiUser.push(this.currentUser.username);
|
||||
}
|
||||
|
||||
public selectTab(value) {
|
||||
this.selectedTab = value;
|
||||
}
|
||||
timeformat() {
|
||||
return (moment() as any)._locale._longDateFormat.LT;
|
||||
}
|
||||
|
||||
viewDiagram() {
|
||||
if (!this.selectDiagram) {
|
||||
this.selectDiagram = true;
|
||||
this.selectTable = false;
|
||||
}
|
||||
console.log("Diagram active");
|
||||
}
|
||||
|
||||
viewTable() {
|
||||
if (!this.selectTable) {
|
||||
this.selectDiagram = false;
|
||||
this.selectTable = true;
|
||||
}
|
||||
console.log("Diagram active");
|
||||
}
|
||||
|
||||
viewMoreFilter() {
|
||||
if (!this.selectMoreFilter) {
|
||||
this.selectMoreFilter = true;
|
||||
}
|
||||
else {
|
||||
this.selectMoreFilter = false;
|
||||
}
|
||||
}
|
||||
|
||||
async openModalSelectField() {
|
||||
this.visibleColumns = await ModalHelper.ShowModalAsync(modalReportSelectColumn, this.visibleColumns);
|
||||
|
||||
console.log(this.visibleColumns);
|
||||
}
|
||||
public openSelectStateU() {
|
||||
if (!$('.checkboxesU').hasClass('checkboxesViewUser'))
|
||||
$('.checkboxesU').addClass('checkboxesViewUser');
|
||||
else
|
||||
$('.checkboxesU').removeClass('checkboxesViewUser');
|
||||
}
|
||||
|
||||
public selectPage(page) {
|
||||
debugger
|
||||
this.selectedPage = Math.min(Math.max(page,1), this.paginationData.pages);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,146 @@
|
||||
<template>
|
||||
<div class="card-report-production">
|
||||
<div class="reports-box-body-left">
|
||||
<div class="body-left-header" v-if="selectDiagram">
|
||||
<div>
|
||||
<label class="intervaldate">{{'reports_body_header_date_range' | localize("Intervallo date")}}</label>
|
||||
<date-picker v-model="filter.interval" range type="daterange" :lang="lang"></date-picker>
|
||||
</div>
|
||||
<div>
|
||||
<label>{{'reports_body_header_axes_x' | localize("Asse X")}}</label>
|
||||
<select><option>{{'reports_body_header_option_axes_x_program_name' | localize("Nome Programma")}}</option></select>
|
||||
</div>
|
||||
<div>
|
||||
<label>{{'reports_body_header_axes_y' | localize("Asse Y")}}</label>
|
||||
<select><option>{{'reports_body_header_option_axes_y_frequency' | localize("Frequenza")}}</option></select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="body-left-header" v-if="!selectDiagram">
|
||||
<div>
|
||||
<label class="intervaldate">{{'reports_body_header_date_range' | localize("Intervallo date")}}</label>
|
||||
<date-picker v-model="filter.interval" range type="daterange" :lang="lang"></date-picker>
|
||||
</div>
|
||||
<div>
|
||||
<label>{{'reports_body_header_label_hour' | localize("Intervallo orario")}}</label>
|
||||
<div class="interval-time">
|
||||
<input type="time"/>
|
||||
<input type="time"/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label>{{'reports_body_header_label_program' | localize("Programma")}}</label>
|
||||
<input type="text" class="program" :placeholder="'reports_body_header_placeholder_program' | localize('Nome del programma')" />
|
||||
</div>
|
||||
<div class="multiselect">
|
||||
<label>{{'reports_body_header_label_operator' | localize("Operatore")}}</label>
|
||||
<div class="selectBoxU" @click="openSelectStateU()">
|
||||
<select id="selectListCheckboxes">
|
||||
<option><span v-for="(item, index) in filter.multiUser" :key="item" >{{'reports_filter_operator_'+item | localize(item)}}{{(index==filter.multiUser.length-1)?'':', '}}</span></option>
|
||||
<div class="overSelect"></div>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="checkboxesU">
|
||||
<div v-for="item in users" :key="item.id">
|
||||
<label :for="item.username">
|
||||
<div class="custom-checkbox">
|
||||
<input type="checkbox" v-model="filter.multiUser" :value="item.username" :id="item.username" />
|
||||
<label :for="item.username"></label>
|
||||
</div>
|
||||
<label class="label-state">{{item.username}}</label>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div>
|
||||
<label>{{'reports_body_header_label_operator' | localize("Operatore")}}</label>
|
||||
<select class="reports-select-operator"><option>{{'reports_body_header_option_operator_all' | localize("tutti")}}</option></select>
|
||||
</div> -->
|
||||
<!-- <div>
|
||||
<label>{{'reports_body_header_label_shift' | localize("Turno")}}</label>
|
||||
<select class="reports-select-shift"><option>{{'reports_body_header_option_shift_first' | localize("1°")}}</option></select>
|
||||
</div> -->
|
||||
</div>
|
||||
<div class="body-left-center">
|
||||
<div class="body-left-center-container">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th :style="{width:(100/visibleColumns.length)+'%'}" v-if="isVisible('ProgramName')">{{'reports_table_program_name' | localize("Nome programma")}}</th>
|
||||
<th :style="{width:(100/visibleColumns.length)+'%'}" v-if="isVisible('Dimensions')">{{'reports_table_dimensions' | localize("Dimensioni")}}</th>
|
||||
<th :style="{width:(100/visibleColumns.length)+'%'}" v-if="isVisible('Quantity')">{{'reports_table_quantity' | localize("Quantity")}}</th>
|
||||
<th :style="{width:(100/visibleColumns.length)+'%'}" v-if="isVisible('StartTime')">{{'reports_table_start_now' | localize("Ora inizio")}}</th>
|
||||
<th :style="{width:(100/visibleColumns.length)+'%'}" v-if="isVisible('EndTime')">{{'reports_table_end_time' | localize("Ora fine")}}</th>
|
||||
<th :style="{width:(100/visibleColumns.length)+'%'}" v-if="isVisible('Date')">{{'reports_table_date' | localize("Data")}}</th>
|
||||
<th :style="{width:(100/visibleColumns.length)+'%'}" v-if="isVisible('EffectiveTime')">{{'reports_table_effective_time' | localize("T effettivo")}}</th>
|
||||
<th :style="{width:(100/visibleColumns.length)+'%'}" v-if="isVisible('AverageTime')">{{'reports_table_average_time' | localize("T medio")}}</th>
|
||||
<th :style="{width:(100/visibleColumns.length)+'%'}" v-if="isVisible('TheoreticalTime')">{{'reports_table_theoretical_time' | localize("T teorico")}}</th>
|
||||
<th :style="{width:(100/visibleColumns.length)+'%'}" v-if="isVisible('Deviation')">{{'reports_table_deviation' | localize("Scostamento")}}</th>
|
||||
<th :style="{width:(100/visibleColumns.length)+'%'}" v-if="isVisible('Quality')">{{'reports_table_quality' | localize("Qualità")}}</th>
|
||||
<th :style="{width:(100/visibleColumns.length)+'%'}" v-if="isVisible('OperatorName')">{{'reports_table_operator_name' | localize("Nome operatore")}}</th>
|
||||
<!-- <th v-if="isVisible('Shift')">{{'reports_table_shift' | localize("Turno")}}</th> -->
|
||||
<th @click="openModalSelectField()"><i class="fa fa-angle-double-right"></i></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td :style="{width:(100/visibleColumns.length)+'%'}" v-if="isVisible('ProgramName')">Finestra02.pgm</td>
|
||||
<td :style="{width:(100/visibleColumns.length)+'%'}" v-if="isVisible('Dimensions')">X: 1210; Y:900; Z: 63</td>
|
||||
<td :style="{width:(100/visibleColumns.length)+'%'}" v-if="isVisible('Quantity')">1</td>
|
||||
<td :style="{width:(100/visibleColumns.length)+'%'}" v-if="isVisible('StartTime')">11:25:00</td>
|
||||
<td :style="{width:(100/visibleColumns.length)+'%'}" v-if="isVisible('EndTime')">13:10:00</td>
|
||||
<td :style="{width:(100/visibleColumns.length)+'%'}" v-if="isVisible('Date')">12/04/2017</td>
|
||||
<td :style="{width:(100/visibleColumns.length)+'%'}" v-if="isVisible('EffectiveTime')">01:45:00</td>
|
||||
<td :style="{width:(100/visibleColumns.length)+'%'}" v-if="isVisible('AverageTime')">01:25:00</td>
|
||||
<td :style="{width:(100/visibleColumns.length)+'%'}" v-if="isVisible('TheoreticalTime')">01:20:00</td>
|
||||
<td :style="{width:(100/visibleColumns.length)+'%'}" v-if="isVisible('Deviation')" :class="{'green': false, 'red': true}">+00:20:00</td>
|
||||
<td :style="{width:(100/visibleColumns.length)+'%'}" v-if="isVisible('Quality')">Buono</td>
|
||||
<td :style="{width:(100/visibleColumns.length)+'%'}" v-if="isVisible('OperatorName')">Nome utente</td>
|
||||
<!-- <td v-if="isVisible('Shift')">1°</td> -->
|
||||
<td></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="pagination">
|
||||
<button @click="selectPage(selectedPage-1)"><i class="fa fa-angle-double-left"></i></button>
|
||||
<button class="page" :class="{active: selectedPage == paginator.min + p}"
|
||||
v-for="(p, idx) in paginator.count" :key="'page' + idx"
|
||||
@click="selectPage(paginator.min + p)">{{paginator.min + p}}</button>
|
||||
<button @click="selectPage(selectedPage+1)"><i class="fa fa-angle-double-right"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="reports-box-body-right">
|
||||
<div class="body-right-header">
|
||||
<div class="body-right-header-left">
|
||||
<button :class="{'active': selectTable}" @click="viewTable()"><i class="fa fa-bars fa-2x"></i></button>
|
||||
<button :class="{'active': selectDiagram}" @click="viewDiagram()"><i class="fa fa-signal fa-2x"></i></button>
|
||||
</div>
|
||||
<div class="body-right-header-right">
|
||||
<button><i class="fa fa-print fa-2x"></i></button>
|
||||
<button><i class="fa fa-upload fa-2x"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="body-right-card">
|
||||
<card-report :title="'Valore assoluto (%)'">
|
||||
</card-report>
|
||||
<card-report :title="'Valore assoluto'">
|
||||
<div class="rectangle_gray">
|
||||
<label>{{'reports_body_rectangle_label_pieces produced' | localize("Pezzi prodotti")}}</label>
|
||||
<span>10.000</span>
|
||||
</div>
|
||||
</card-report>
|
||||
<card-report :title="'Valore assoluto'">
|
||||
<div class="rectangle_gray">
|
||||
<label>{{'reports_body_rectangle_label_discarded_pieces' | localize("Pezzi scartati")}}</label>
|
||||
<span>4</span>
|
||||
</div>
|
||||
</card-report>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script src="./card-report-production.ts" lang="ts"></script>
|
||||
@@ -0,0 +1,47 @@
|
||||
import Vue from "vue";
|
||||
import Component from "vue-class-component";
|
||||
import { cardReport } from "../../../modules/base-components/cards/index";
|
||||
import accordionDropdown from "../../../modules/base-components/accordion-dropdown.vue";
|
||||
import modalReportSelectColumn from "../../../modules/base-components/modal-report-select-column.vue";
|
||||
import { Accordion } from "src/modules/base-components";
|
||||
import { loginService } from "src/services";
|
||||
import DatePicker from "vue2-datepicker";
|
||||
import moment from "moment";
|
||||
import { ModalHelper } from "src/components/modals";
|
||||
|
||||
declare let $: any;
|
||||
@Component({ components: { datePicker: DatePicker, cardReport: cardReport, accordionDropdown: accordionDropdown } })
|
||||
export default class CardReportTimeline extends Vue {
|
||||
|
||||
lang = {
|
||||
days: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
|
||||
months: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
|
||||
pickers: ['next 7 days', 'next 30 days', 'previous 7 days', 'previous 30 days'],
|
||||
placeholder: {
|
||||
date: 'Select Date',
|
||||
dateRange: 'Select Date Range'
|
||||
}
|
||||
}
|
||||
|
||||
filter: {
|
||||
interval?: Date[],
|
||||
timelineMacro: Array<string>,
|
||||
} = {
|
||||
timelineMacro: ["Eventi", "Allarmi", "Stato macchina", "Programmi"],
|
||||
interval: [new Date(new Date().setDate(new Date().getDate() - 6)), new Date(new Date().setDate(new Date().getDate() + 1))]
|
||||
};
|
||||
|
||||
|
||||
|
||||
isVisible(value){
|
||||
return this.filter.timelineMacro.some(c => c == value);
|
||||
}
|
||||
|
||||
public openSelectState() {
|
||||
if (!$('.checkboxes').hasClass('checkboxesView'))
|
||||
$('.checkboxes').addClass('checkboxesView');
|
||||
else
|
||||
$('.checkboxes').removeClass('checkboxesView');
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,152 @@
|
||||
<template>
|
||||
<div class="card-report-timeline">
|
||||
<div class="reports-box-body-left">
|
||||
<div class="body-left-header">
|
||||
<div>
|
||||
<label class="intervaldate">{{'reports_body_header_date_range' | localize("Intervallo date")}}</label>
|
||||
<date-picker v-model="filter.interval" range type="daterange" :lang="lang"></date-picker>
|
||||
</div>
|
||||
<div>
|
||||
<label>{{'reports_body_header_label_hour' | localize("Intervallo orario")}}</label>
|
||||
<div class="interval-time">
|
||||
<input type="time"/>
|
||||
<input type="time"/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label>{{'reports_body_header_label_program' | localize("Programma")}}</label>
|
||||
<input type="text" class="program" :placeholder="'reports_body_header_placeholder_program' | localize('Nome del programma')" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="body-left-center">
|
||||
<div class="body-left-center-container">
|
||||
<div class="body-left-center-left">
|
||||
<div class="multiselect">
|
||||
<div class="selectBox" @click="openSelectState()">
|
||||
<select id="selectListCheckboxes">
|
||||
<option><span v-for="(item, index) in filter.timelineMacro" :key="item" >{{'report_state_'+item | localize(item)}}{{(index==filter.timelineMacro.length-1)?'':', '}}</span></option>
|
||||
<div class="overSelect"></div>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="checkboxes">
|
||||
<div>
|
||||
<label for="Eventi">
|
||||
<div class="custom-checkbox">
|
||||
<input type="checkbox" v-model="filter.timelineMacro" value="Eventi" id="Eventi" />
|
||||
<label for="Eventi"></label>
|
||||
</div>
|
||||
<label class="label-state">{{'report_timeline_filter_events' | localize("Eventi")}}</label>
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<label for="Allarmi">
|
||||
<div class="custom-checkbox">
|
||||
<input type="checkbox" v-model="filter.timelineMacro" value="Allarmi" id="Allarmi" />
|
||||
<label for="Allarmi"></label>
|
||||
</div>
|
||||
<label class="label-state">{{'report_timeline_filter_alarms' | localize("Allarmi")}}</label>
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<label for="Stato macchina">
|
||||
<div class="custom-checkbox">
|
||||
<input type="checkbox" v-model="filter.timelineMacro" value="Stato macchina" id="Stato macchina" />
|
||||
<label for="Stato macchina"></label>
|
||||
</div>
|
||||
<label class="label-state">{{'report_timeline_filter_machine_status' | localize("Stato macchina")}}</label>
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<label for="Programmi">
|
||||
<div class="custom-checkbox">
|
||||
<input type="checkbox" v-model="filter.timelineMacro" value="Programmi" id="Programmi" />
|
||||
<label for="Programmi"></label>
|
||||
</div>
|
||||
<label class="label-state">{{'report_timeline_filter_programs' | localize("Programmi")}}</label>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="isVisible('Eventi')">
|
||||
<accordion-dropdown :title="'reports_body_left_center_left_dropdown_title_events' | localize('Eventi')">
|
||||
<div class="dropdown">
|
||||
<div class="item">
|
||||
<div class="filename"><i class="fa fa-file"></i><span>Test</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</accordion-dropdown>
|
||||
</div>
|
||||
<div v-if="isVisible('Allarmi')">
|
||||
<accordion-dropdown :title="'reports_body_left_center_left_dropdown_title_alarms' | localize('Allarmi')">
|
||||
<div class="dropdown">
|
||||
<div class="item">
|
||||
<div class="filename"><i class="fa fa-file"></i><span>Test</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</accordion-dropdown>
|
||||
</div>
|
||||
<div v-if="isVisible('Stato macchina')">
|
||||
<accordion-dropdown :title="'reports_body_left_center_left_dropdown_title_machine_status' | localize('Stato macchina')">
|
||||
<div class="dropdown">
|
||||
<div class="item">
|
||||
<div class="filename"><i class="fa fa-file"></i><span>Test</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</accordion-dropdown>
|
||||
</div>
|
||||
<div v-if="isVisible('Programmi')">
|
||||
<accordion-dropdown :title="'reports_body_left_center_left_dropdown_title_programs' | localize('Programmi')">
|
||||
<div class="dropdown">
|
||||
<div class="item">
|
||||
<div class="filename"><i class="fa fa-file"></i><span>Test</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</accordion-dropdown>
|
||||
</div>
|
||||
</div>
|
||||
<div class="body-left-center-right">
|
||||
</div>
|
||||
</div>
|
||||
<div class="body-left-center-footer">
|
||||
<div class="header-title">
|
||||
<div class="title">
|
||||
{{'reports_body_left_center_footer_title_time_slider' | localize('Cursore temporale')}}
|
||||
</div>
|
||||
<div class="data-temporal">
|
||||
09 Aprile 2017 - 23:14
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="reports-box-body-right">
|
||||
<div class="body-right-header">
|
||||
<div class="body-right-header-right">
|
||||
<button><i class="fa fa-print fa-2x"></i></button>
|
||||
<button><i class="fa fa-upload fa-2x"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="body-right-card">
|
||||
<card-report :title="'Valore assoluto (%)'">
|
||||
|
||||
</card-report>
|
||||
<card-report :title="'Valore assoluto'">
|
||||
<div class="rectangle_gray">
|
||||
<label>{{'reports_body_rectangle_label_pieces produced' | localize("Pezzi prodotti")}}</label>
|
||||
<span>10.000</span>
|
||||
</div>
|
||||
</card-report>
|
||||
<card-report :title="'Valore assoluto'">
|
||||
<div class="rectangle_gray">
|
||||
<label>{{'reports_body_rectangle_label_discarded_pieces' | localize("Pezzi scartati")}}</label>
|
||||
<span>4</span>
|
||||
</div>
|
||||
</card-report>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script src="./card-report-timeline.ts" lang="ts"></script>
|
||||
@@ -8,8 +8,17 @@ import DatePicker from "vue2-datepicker";
|
||||
import moment from "moment";
|
||||
import { ModalHelper } from "src/components/modals";
|
||||
|
||||
import cardReportProduction from "src/app_modules/reports/components/card-report-production.vue";
|
||||
import cardReportEvents from "src/app_modules/reports/components/card-report-events.vue";
|
||||
import cardReportAlarms from "src/app_modules/reports/components/card-report-alarms.vue";
|
||||
import cardReportMachineStatus from "src/app_modules/reports/components/card-report-machine-status.vue";
|
||||
import cardReportTimeline from "src/app_modules/reports/components/card-report-timeline.vue";
|
||||
|
||||
declare let $: any;
|
||||
@Component({ components: { datePicker: DatePicker, cardReport: cardReport, accordionDropdown: accordionDropdown, accordion: Accordion } })
|
||||
@Component({ components: { datePicker: DatePicker, cardReport: cardReport,
|
||||
accordionDropdown: accordionDropdown, accordion: Accordion, cardReportProduction: cardReportProduction,
|
||||
cardReportEvents: cardReportEvents, cardReportAlarms: cardReportAlarms, cardReportMachineStatus: cardReportMachineStatus,
|
||||
cardReportTimeline: cardReportTimeline } })
|
||||
export default class Reports extends Vue {
|
||||
|
||||
lang = {
|
||||
|
||||
@@ -9,9 +9,9 @@
|
||||
<button class="tab" :class="{'active': selectedTab == 'Events'}" @click="selectTab('Events')">
|
||||
<span>{{'reports_lbl_events' | localize("Eventi")}}</span>
|
||||
</button>
|
||||
<button class="tab" :class="{'active': selectedTab == 'Alarms'}" @click="selectTab('Alarms')">
|
||||
<!-- <button class="tab" :class="{'active': selectedTab == 'Alarms'}" @click="selectTab('Alarms')">
|
||||
<span>{{'reports_lbl_alarms' | localize("Allarmi")}}</span>
|
||||
</button>
|
||||
</button> -->
|
||||
<button class="tab" :class="{'active': selectedTab == 'MachineStatus'}" @click="selectTab('MachineStatus')">
|
||||
<span>{{'reports_lbl_machine_status' | localize("Stato Macchina")}}</span>
|
||||
</button>
|
||||
@@ -20,519 +20,17 @@
|
||||
</button>
|
||||
</div>
|
||||
<div class="reports-box-body" v-if="selectedTab == 'Production'">
|
||||
<div class="reports-box-body-left">
|
||||
<div class="body-left-header" v-if="selectDiagram">
|
||||
<div>
|
||||
<label class="intervaldate">{{'reports_body_header_date_range' | localize("Intervallo date")}}</label>
|
||||
<date-picker v-model="filter.interval" range type="daterange" :lang="lang"></date-picker>
|
||||
</div>
|
||||
<div>
|
||||
<label>{{'reports_body_header_axes_x' | localize("Asse X")}}</label>
|
||||
<select><option>{{'reports_body_header_option_axes_x_program_name' | localize("Nome Programma")}}</option></select>
|
||||
</div>
|
||||
<div>
|
||||
<label>{{'reports_body_header_axes_y' | localize("Asse Y")}}</label>
|
||||
<select><option>{{'reports_body_header_option_axes_y_frequency' | localize("Frequenza")}}</option></select>
|
||||
</div>
|
||||
<div>
|
||||
<label class="label_advanced_filters" @click="viewMoreFilter()" v-if="!selectMoreFilter"><span>{{'reports_body_header_diagram_label_advanced_filters' | localize("Mostra filtri avanzati")}}</span> <i class="fa fa-caret-down"></i></label>
|
||||
<label class="label_advanced_filters" @click="viewMoreFilter()" v-if="selectMoreFilter"><span>{{'reports_body_header_diagram_label_hide_advanced_filters' | localize("Nascondi filtri avanzati")}}</span> <i class="fa fa-caret-up"></i></label>
|
||||
</div>
|
||||
<div class="advanced-filters" v-if="selectMoreFilter">
|
||||
<div>
|
||||
<label>{{'reports_body_header_label_hour' | localize("Intervallo orario")}}</label>
|
||||
<div class="interval-time">
|
||||
<input type="time"/>
|
||||
<input type="time"/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label>{{'reports_body_header_label_program' | localize("Programma")}}</label>
|
||||
<input type="text" class="program" :placeholder="'reports_body_header_placeholder_program' | localize('Nome del programma')" />
|
||||
</div>
|
||||
<div>
|
||||
<label>{{'reports_body_header_label_operator' | localize("Operatore")}}</label>
|
||||
<select class="reports-select-operator"><option>{{'reports_body_header_option_operator_all' | localize("tutti")}}</option></select>
|
||||
</div>
|
||||
<div>
|
||||
<label>{{'reports_body_header_label_shift' | localize("Turno")}}</label>
|
||||
<select class="reports-select-shift"><option>{{'reports_body_header_option_shift_first' | localize("1°")}}</option></select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="body-left-header" v-if="!selectDiagram">
|
||||
<div>
|
||||
<label class="intervaldate">{{'reports_body_header_date_range' | localize("Intervallo date")}}</label>
|
||||
<date-picker v-model="filter.interval" range type="daterange" :lang="lang"></date-picker>
|
||||
</div>
|
||||
<div>
|
||||
<label>{{'reports_body_header_label_hour' | localize("Intervallo orario")}}</label>
|
||||
<div class="interval-time">
|
||||
<input type="time"/>
|
||||
<input type="time"/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label>{{'reports_body_header_label_program' | localize("Programma")}}</label>
|
||||
<input type="text" class="program" :placeholder="'reports_body_header_placeholder_program' | localize('Nome del programma')" />
|
||||
</div>
|
||||
<div>
|
||||
<label>{{'reports_body_header_label_operator' | localize("Operatore")}}</label>
|
||||
<select class="reports-select-operator"><option>{{'reports_body_header_option_operator_all' | localize("tutti")}}</option></select>
|
||||
</div>
|
||||
<div>
|
||||
<label>{{'reports_body_header_label_shift' | localize("Turno")}}</label>
|
||||
<select class="reports-select-shift"><option>{{'reports_body_header_option_shift_first' | localize("1°")}}</option></select>
|
||||
</div>
|
||||
<div>
|
||||
<label class="label_advanced_filters"><span>{{'reports_body_header_label_advanced_filters' | localize("Mostra filtri avanzati")}}</span> <i class="fa fa-caret-down"></i></label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="body-left-center">
|
||||
<div class="body-left-center-container">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>{{'reports_table_program_name' | localize("Nome programma")}}</th>
|
||||
<th>{{'reports_table_dimensions' | localize("Dimensioni")}}</th>
|
||||
<th>{{'reports_table_quantity' | localize("Quantity")}}</th>
|
||||
<th>{{'reports_table_start_now' | localize("Ora inizio")}}</th>
|
||||
<th>{{'reports_table_end_time' | localize("Ora fine")}}</th>
|
||||
<th>{{'reports_table_date' | localize("Data")}}</th>
|
||||
<th>{{'reports_table_effective_time' | localize("T effettivo")}}</th>
|
||||
<th>{{'reports_table_average_time' | localize("T medio")}}</th>
|
||||
<th>{{'reports_table_theoretical_time' | localize("T teorico")}}</th>
|
||||
<th>{{'reports_table_deviation' | localize("Scostamento")}}</th>
|
||||
<th>{{'reports_table_quality' | localize("Qualità")}}</th>
|
||||
<th>{{'reports_table_operator_name' | localize("Nome operatore")}}</th>
|
||||
<th>{{'reports_table_shift' | localize("Turno")}}</th>
|
||||
<th @click="openModalSelectField()"><i class="fa fa-angle-double-right"></i></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td colspan="1">Finestra02.pgm</td>
|
||||
<td colspan="1">X: 1210; Y:900; Z: 63</td>
|
||||
<td colspan="1">1</td>
|
||||
<td colspan="1">11:25:00</td>
|
||||
<td colspan="1">13:10:00</td>
|
||||
<td colspan="1">12/04/2017</td>
|
||||
<td colspan="1">01:45:00</td>
|
||||
<td colspan="1">01:25:00</td>
|
||||
<td colspan="1">01:20:00</td>
|
||||
<td colspan="1" :class="{'green': false, 'red': true}">+00:20:00</td>
|
||||
<td colspan="1">Buono</td>
|
||||
<td colspan="1">Nome utente</td>
|
||||
<td colspan="1">1°</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="1">Finestra02.pgm</td>
|
||||
<td colspan="1">X: 1210; Y:900; Z: 63</td>
|
||||
<td colspan="1">1</td>
|
||||
<td colspan="1">11:25:00</td>
|
||||
<td colspan="1">13:10:00</td>
|
||||
<td colspan="1">12/04/2017</td>
|
||||
<td colspan="1">01:45:00</td>
|
||||
<td colspan="1">01:25:00</td>
|
||||
<td colspan="1">01:20:00</td>
|
||||
<td colspan="1" :class="{'green': false, 'red': true}">+00:20:00</td>
|
||||
<td colspan="1">Buono</td>
|
||||
<td colspan="1">Nome utente</td>
|
||||
<td colspan="1">1°</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="1">Finestra02.pgm</td>
|
||||
<td colspan="1">X: 1210; Y:900; Z: 63</td>
|
||||
<td colspan="1">1</td>
|
||||
<td colspan="1">11:25:00</td>
|
||||
<td colspan="1">13:10:00</td>
|
||||
<td colspan="1">12/04/2017</td>
|
||||
<td colspan="1">01:45:00</td>
|
||||
<td colspan="1">01:25:00</td>
|
||||
<td colspan="1">01:20:00</td>
|
||||
<td colspan="1" :class="{'green': false, 'red': true}">+00:20:00</td>
|
||||
<td colspan="1">Buono</td>
|
||||
<td colspan="1">Nome utente</td>
|
||||
<td colspan="1">1°</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="1">Finestra02.pgm</td>
|
||||
<td colspan="1">X: 1210; Y:900; Z: 63</td>
|
||||
<td colspan="1">1</td>
|
||||
<td colspan="1">11:25:00</td>
|
||||
<td colspan="1">13:10:00</td>
|
||||
<td colspan="1">12/04/2017</td>
|
||||
<td colspan="1">01:45:00</td>
|
||||
<td colspan="1">01:25:00</td>
|
||||
<td colspan="1">01:20:00</td>
|
||||
<td colspan="1" :class="{'green': false, 'red': true}">+00:20:00</td>
|
||||
<td colspan="1">Buono</td>
|
||||
<td colspan="1">Nome utente</td>
|
||||
<td colspan="1">1°</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="1">Finestra02.pgm</td>
|
||||
<td colspan="1">X: 1210; Y:900; Z: 63</td>
|
||||
<td colspan="1">1</td>
|
||||
<td colspan="1">11:25:00</td>
|
||||
<td colspan="1">13:10:00</td>
|
||||
<td colspan="1">12/04/2017</td>
|
||||
<td colspan="1">01:45:00</td>
|
||||
<td colspan="1">01:25:00</td>
|
||||
<td colspan="1">01:20:00</td>
|
||||
<td colspan="1" :class="{'green': false, 'red': true}">+00:20:00</td>
|
||||
<td colspan="1">Buono</td>
|
||||
<td colspan="1">Nome utente</td>
|
||||
<td colspan="1">1°</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="1">Finestra02.pgm</td>
|
||||
<td colspan="1">X: 1210; Y:900; Z: 63</td>
|
||||
<td colspan="1">1</td>
|
||||
<td colspan="1">11:25:00</td>
|
||||
<td colspan="1">13:10:00</td>
|
||||
<td colspan="1">12/04/2017</td>
|
||||
<td colspan="1">01:45:00</td>
|
||||
<td colspan="1">01:25:00</td>
|
||||
<td colspan="1">01:20:00</td>
|
||||
<td colspan="1" :class="{'green': false, 'red': true}">+00:20:00</td>
|
||||
<td colspan="1">Buono</td>
|
||||
<td colspan="1">Nome utente</td>
|
||||
<td colspan="1">1°</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="1">Finestra02.pgm</td>
|
||||
<td colspan="1">X: 1210; Y:900; Z: 63</td>
|
||||
<td colspan="1">1</td>
|
||||
<td colspan="1">11:25:00</td>
|
||||
<td colspan="1">13:10:00</td>
|
||||
<td colspan="1">12/04/2017</td>
|
||||
<td colspan="1">01:45:00</td>
|
||||
<td colspan="1">01:25:00</td>
|
||||
<td colspan="1">01:20:00</td>
|
||||
<td colspan="1" :class="{'green': false, 'red': true}">+00:20:00</td>
|
||||
<td colspan="1">Buono</td>
|
||||
<td colspan="1">Nome utente</td>
|
||||
<td colspan="1">1°</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="1">Finestra02.pgm</td>
|
||||
<td colspan="1">X: 1210; Y:900; Z: 63</td>
|
||||
<td colspan="1">1</td>
|
||||
<td colspan="1">11:25:00</td>
|
||||
<td colspan="1">13:10:00</td>
|
||||
<td colspan="1">12/04/2017</td>
|
||||
<td colspan="1">01:45:00</td>
|
||||
<td colspan="1">01:25:00</td>
|
||||
<td colspan="1">01:20:00</td>
|
||||
<td colspan="1" :class="{'green': false, 'red': true}">+00:20:00</td>
|
||||
<td colspan="1">Buono</td>
|
||||
<td colspan="1">Nome utente</td>
|
||||
<td colspan="1">1°</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="1">Finestra02.pgm</td>
|
||||
<td colspan="1">X: 1210; Y:900; Z: 63</td>
|
||||
<td colspan="1">1</td>
|
||||
<td colspan="1">11:25:00</td>
|
||||
<td colspan="1">13:10:00</td>
|
||||
<td colspan="1">12/04/2017</td>
|
||||
<td colspan="1">01:45:00</td>
|
||||
<td colspan="1">01:25:00</td>
|
||||
<td colspan="1">01:20:00</td>
|
||||
<td colspan="1" :class="{'green': false, 'red': true}">+00:20:00</td>
|
||||
<td colspan="1">Buono</td>
|
||||
<td colspan="1">Nome utente</td>
|
||||
<td colspan="1">1°</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="1">Finestra02.pgm</td>
|
||||
<td colspan="1">X: 1210; Y:900; Z: 63</td>
|
||||
<td colspan="1">1</td>
|
||||
<td colspan="1">11:25:00</td>
|
||||
<td colspan="1">13:10:00</td>
|
||||
<td colspan="1">12/04/2017</td>
|
||||
<td colspan="1">01:45:00</td>
|
||||
<td colspan="1">01:25:00</td>
|
||||
<td colspan="1">01:20:00</td>
|
||||
<td colspan="1" :class="{'green': false, 'red': true}">+00:20:00</td>
|
||||
<td colspan="1">Buono</td>
|
||||
<td colspan="1">Nome utente</td>
|
||||
<td colspan="1">1°</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="1">Finestra02.pgm</td>
|
||||
<td colspan="1">X: 1210; Y:900; Z: 63</td>
|
||||
<td colspan="1">1</td>
|
||||
<td colspan="1">11:25:00</td>
|
||||
<td colspan="1">13:10:00</td>
|
||||
<td colspan="1">12/04/2017</td>
|
||||
<td colspan="1">01:45:00</td>
|
||||
<td colspan="1">01:25:00</td>
|
||||
<td colspan="1">01:20:00</td>
|
||||
<td colspan="1" :class="{'green': false, 'red': true}">+00:20:00</td>
|
||||
<td colspan="1">Buono</td>
|
||||
<td colspan="1">Nome utente</td>
|
||||
<td colspan="1">1°</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="1">Finestra02.pgm</td>
|
||||
<td colspan="1">X: 1210; Y:900; Z: 63</td>
|
||||
<td colspan="1">1</td>
|
||||
<td colspan="1">11:25:00</td>
|
||||
<td colspan="1">13:10:00</td>
|
||||
<td colspan="1">12/04/2017</td>
|
||||
<td colspan="1">01:45:00</td>
|
||||
<td colspan="1">01:25:00</td>
|
||||
<td colspan="1">01:20:00</td>
|
||||
<td colspan="1" :class="{'green': false, 'red': true}">+00:20:00</td>
|
||||
<td colspan="1">Buono</td>
|
||||
<td colspan="1">Nome utente</td>
|
||||
<td colspan="1">1°</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="1">Finestra02.pgm</td>
|
||||
<td colspan="1">X: 1210; Y:900; Z: 63</td>
|
||||
<td colspan="1">1</td>
|
||||
<td colspan="1">11:25:00</td>
|
||||
<td colspan="1">13:10:00</td>
|
||||
<td colspan="1">12/04/2017</td>
|
||||
<td colspan="1">01:45:00</td>
|
||||
<td colspan="1">01:25:00</td>
|
||||
<td colspan="1">01:20:00</td>
|
||||
<td colspan="1" :class="{'green': false, 'red': true}">+00:20:00</td>
|
||||
<td colspan="1">Buono</td>
|
||||
<td colspan="1">Nome utente</td>
|
||||
<td colspan="1">1°</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="1">Finestra02.pgm</td>
|
||||
<td colspan="1">X: 1210; Y:900; Z: 63</td>
|
||||
<td colspan="1">1</td>
|
||||
<td colspan="1">11:25:00</td>
|
||||
<td colspan="1">13:10:00</td>
|
||||
<td colspan="1">12/04/2017</td>
|
||||
<td colspan="1">01:45:00</td>
|
||||
<td colspan="1">01:25:00</td>
|
||||
<td colspan="1">01:20:00</td>
|
||||
<td colspan="1" :class="{'green': false, 'red': true}">+00:20:00</td>
|
||||
<td colspan="1">Buono</td>
|
||||
<td colspan="1">Nome utente</td>
|
||||
<td colspan="1">1°</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="1">Finestra02.pgm</td>
|
||||
<td colspan="1">X: 1210; Y:900; Z: 63</td>
|
||||
<td colspan="1">1</td>
|
||||
<td colspan="1">11:25:00</td>
|
||||
<td colspan="1">13:10:00</td>
|
||||
<td colspan="1">12/04/2017</td>
|
||||
<td colspan="1">01:45:00</td>
|
||||
<td colspan="1">01:25:00</td>
|
||||
<td colspan="1">01:20:00</td>
|
||||
<td colspan="1" :class="{'green': false, 'red': true}">+00:20:00</td>
|
||||
<td colspan="1">Buono</td>
|
||||
<td colspan="1">Nome utente</td>
|
||||
<td colspan="1">1°</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<!-- <tr v-for="(row,index) in data" :key="index" @click="selectAlarm(row)" :class="{selected: selectedAlarm == row}">
|
||||
<td colspan="1">{{row.id}}</td>
|
||||
<td colspan="1">{{filter.sources[row.source]}}</td>
|
||||
<td colspan="1" v-if="row.source == 0 ">{{row.title}}</td>
|
||||
<td colspan="1" v-if="row.source == 1 ">{{'alarm_'+ row.alarmId | localize('alarm_'+ row.alarmId)}}</td>
|
||||
<td colspan="1">{{row.description}}</td>
|
||||
<td colspan="1">{{row.timeStamp | date('DD-MM-YYYY HH:mm:ss')}}</td>
|
||||
<td colspan="1">
|
||||
<span v-for="(iduser, index) in row.users" :key="iduser">
|
||||
{{user(iduser).username}}
|
||||
<text v-if="index < row.users.length -1">, </text>
|
||||
</span>
|
||||
</td>
|
||||
</tr> -->
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="reports-box-body-right">
|
||||
<div class="body-right-header">
|
||||
<div class="body-right-header-left">
|
||||
<button :class="{'active': selectTable}" @click="viewTable()"><i class="fa fa-bars fa-2x"></i></button>
|
||||
<button :class="{'active': selectDiagram}" @click="viewDiagram()"><i class="fa fa-signal fa-2x"></i></button>
|
||||
</div>
|
||||
<div class="body-right-header-right">
|
||||
<button><i class="fa fa-print fa-2x"></i></button>
|
||||
<button><i class="fa fa-upload fa-2x"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="body-right-card">
|
||||
<card-report :title="'Valore assoluto (%)'">
|
||||
|
||||
</card-report>
|
||||
<card-report :title="'Valore assoluto'">
|
||||
<div class="rectangle_gray">
|
||||
<label>{{'reports_body_rectangle_label_pieces produced' | localize("Pezzi prodotti")}}</label>
|
||||
<span>10.000</span>
|
||||
</div>
|
||||
</card-report>
|
||||
<card-report :title="'Valore assoluto'">
|
||||
<div class="rectangle_gray">
|
||||
<label>{{'reports_body_rectangle_label_discarded_pieces' | localize("Pezzi scartati")}}</label>
|
||||
<span>4</span>
|
||||
</div>
|
||||
</card-report>
|
||||
</div>
|
||||
</div>
|
||||
<card-report-production></card-report-production>
|
||||
</div>
|
||||
<div class="reports-box-body" v-if="selectedTab == 'Events'">
|
||||
<div class="reports-box-body-left">
|
||||
<div class="body-left-header">
|
||||
<div>
|
||||
<label class="intervaldate">{{'reports_body_header_date_range' | localize("Intervallo date")}}</label>
|
||||
<date-picker v-model="filter.interval" range type="daterange" :lang="lang"></date-picker>
|
||||
</div>
|
||||
<div>
|
||||
<label>{{'reports_body_header_label_hour' | localize("Intervallo orario")}}</label>
|
||||
<div class="interval-time">
|
||||
<input type="time"/>
|
||||
<input type="time"/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label>{{'reports_body_header_label_program' | localize("Programma")}}</label>
|
||||
<input type="text" class="program" :placeholder="'reports_body_header_placeholder_program' | localize('Nome del programma')" />
|
||||
</div>
|
||||
<div>
|
||||
<label>{{'reports_body_header_label_operator' | localize("Operatore")}}</label>
|
||||
<select class="reports-select-operator"><option>{{'reports_body_header_option_operator_all' | localize("tutti")}}</option></select>
|
||||
</div>
|
||||
<div>
|
||||
<label>{{'reports_body_header_label_shift' | localize("Turno")}}</label>
|
||||
<select class="reports-select-shift"><option>{{'reports_body_header_option_shift_first' | localize("1°")}}</option></select>
|
||||
</div>
|
||||
<div>
|
||||
<label class="label_advanced_filters"><span>{{'reports_body_header_label_advanced_filters' | localize("Mostra filtri avanzati")}}</span> <i class="fa fa-caret-down"></i></label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="body-left-center">
|
||||
Events
|
||||
</div>
|
||||
</div>
|
||||
<div class="reports-box-body-right">
|
||||
<div class="body-right-header">
|
||||
<div class="body-right-header-left">
|
||||
<button><i class="fa fa-bars fa-2x"></i></button>
|
||||
<button><i class="fa fa-signal fa-2x"></i></button>
|
||||
</div>
|
||||
<div class="body-right-header-right">
|
||||
<button><i class="fa fa-print fa-2x"></i></button>
|
||||
<button><i class="fa fa-upload fa-2x"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="body-right-card">
|
||||
<card-report :title="'Valore assoluto (%)'">
|
||||
|
||||
</card-report>
|
||||
<card-report :title="'Valore assoluto'">
|
||||
<div class="rectangle_gray">
|
||||
<label>{{'reports_body_rectangle_label_pieces produced' | localize("Pezzi prodotti")}}</label>
|
||||
<span>10.000</span>
|
||||
</div>
|
||||
</card-report>
|
||||
<card-report :title="'Valore assoluto'">
|
||||
<div class="rectangle_gray">
|
||||
<label>{{'reports_body_rectangle_label_discarded_pieces' | localize("Pezzi scartati")}}</label>
|
||||
<span>4</span>
|
||||
</div>
|
||||
</card-report>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="reports-box-body" v-if="selectedTab == 'Alarms'">
|
||||
<div class="reports-box-body-left">
|
||||
<div class="body-left-header">
|
||||
<div>
|
||||
<label class="intervaldate">{{'reports_body_header_date_range' | localize("Intervallo date")}}</label>
|
||||
<date-picker v-model="filter.interval" range type="daterange" :lang="lang"></date-picker>
|
||||
</div>
|
||||
<!-- <div>
|
||||
<label>{{'reports_body_header_label_date' | localize("Intervallo date")}}</label>
|
||||
<select class="reports-select-interval-date"><option>{{'reports_body_header_option_date_lastmonth' | localize("Ultimo mese")}}</option></select>
|
||||
</div> -->
|
||||
<div>
|
||||
<label>{{'reports_body_header_label_hour' | localize("Intervallo orario")}}</label>
|
||||
<div class="interval-time">
|
||||
<input type="time"/>
|
||||
<input type="time"/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label>{{'reports_body_header_label_program' | localize("Programma")}}</label>
|
||||
<input type="text" class="program" :placeholder="'reports_body_header_placeholder_program' | localize('Nome del programma')" />
|
||||
</div>
|
||||
<div>
|
||||
<label>{{'reports_body_header_label_operator' | localize("Operatore")}}</label>
|
||||
<select class="reports-select-operator"><option>{{'reports_body_header_option_operator_all' | localize("tutti")}}</option></select>
|
||||
</div>
|
||||
<div>
|
||||
<label>{{'reports_body_header_label_shift' | localize("Turno")}}</label>
|
||||
<select class="reports-select-shift"><option>{{'reports_body_header_option_shift_first' | localize("1°")}}</option></select>
|
||||
</div>
|
||||
<div>
|
||||
<label class="label_advanced_filters"><span>{{'reports_body_header_label_advanced_filters' | localize("Mostra filtri avanzati")}}</span> <i class="fa fa-caret-down"></i></label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="body-left-center">
|
||||
Alarms
|
||||
</div>
|
||||
</div>
|
||||
<div class="reports-box-body-right">
|
||||
<div class="body-right-header">
|
||||
<div class="body-right-header-left">
|
||||
<button><i class="fa fa-bars fa-2x"></i></button>
|
||||
<button><i class="fa fa-signal fa-2x"></i></button>
|
||||
</div>
|
||||
<div class="body-right-header-right">
|
||||
<button><i class="fa fa-print fa-2x"></i></button>
|
||||
<button><i class="fa fa-upload fa-2x"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="body-right-card">
|
||||
<card-report :title="'Valore assoluto (%)'">
|
||||
|
||||
</card-report>
|
||||
<card-report :title="'Valore assoluto'">
|
||||
<div class="rectangle_gray">
|
||||
<label>{{'reports_body_rectangle_label_pieces produced' | localize("Pezzi prodotti")}}</label>
|
||||
<span>10.000</span>
|
||||
</div>
|
||||
</card-report>
|
||||
<card-report :title="'Valore assoluto'">
|
||||
<div class="rectangle_gray">
|
||||
<label>{{'reports_body_rectangle_label_discarded_pieces' | localize("Pezzi scartati")}}</label>
|
||||
<span>4</span>
|
||||
</div>
|
||||
</card-report>
|
||||
</div>
|
||||
</div>
|
||||
<card-report-events></card-report-events>
|
||||
</div>
|
||||
<!-- <div class="reports-box-body" v-if="selectedTab == 'Alarms'">
|
||||
<card-report-alarms></card-report-alarms>
|
||||
</div> -->
|
||||
<div class="reports-box-body" v-if="selectedTab == 'MachineStatus'">
|
||||
<div class="reports-box-body-left">
|
||||
<card-report-machine-status></card-report-machine-status>
|
||||
<!-- <div class="reports-box-body-left">
|
||||
<div class="body-left-header-machinestatus">
|
||||
<div>
|
||||
<label class="intervaldate">{{'reports_body_header_date_range' | localize("Intervallo date")}}</label>
|
||||
@@ -567,10 +65,11 @@
|
||||
</div>
|
||||
</card-report>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
<div class="reports-box-body" v-if="selectedTab == 'Timeline'">
|
||||
<div class="reports-box-body-left">
|
||||
<card-report-timeline></card-report-timeline>
|
||||
<!-- <div class="reports-box-body-left">
|
||||
<div class="body-left-header" v-if="selectDiagram">
|
||||
<div>
|
||||
<label class="intervaldate">{{'reports_body_header_date_range' | localize("Intervallo date")}}</label>
|
||||
@@ -688,9 +187,6 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div>
|
||||
<select><option disabled selected>{{'reports_body_left_center_left_placeholder_select_object' | localize('Seleziona oggetti')}}</option></select>
|
||||
</div> -->
|
||||
<div>
|
||||
<accordion-dropdown :title="'reports_body_left_center_left_dropdown_title_events' | localize('Eventi')">
|
||||
<div class="dropdown">
|
||||
@@ -771,7 +267,7 @@
|
||||
</div>
|
||||
</card-report>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -2,6 +2,8 @@ import Vue from "vue";
|
||||
import Component from "vue-class-component";
|
||||
import { ModalHelper,Modal } from "src/components/modals";
|
||||
import { Factory, MessageService } from "src/_base";
|
||||
import { Watch, Prop } from "vue-property-decorator";
|
||||
import { Deferred } from "src/services";
|
||||
|
||||
declare var cmsClient: any;
|
||||
|
||||
@@ -13,9 +15,66 @@ declare var cmsClient: any;
|
||||
|
||||
export default class ModalReportSelectColumn extends Vue {
|
||||
|
||||
// gestisce la risposta
|
||||
@Prop()
|
||||
deferred: Deferred<any>;
|
||||
|
||||
// gestisce il parametro in ingresso
|
||||
@Prop()
|
||||
value: any[];
|
||||
|
||||
maxRow: number = 3;
|
||||
|
||||
checkboxes: Array<any> = [{id: "ProgramName", label: this.$options.filters.localize("modal_report_select_column_program_name", "Nome programma")},
|
||||
{id: "Date", label: this.$options.filters.localize("modal_report_select_column_date", "Data")},
|
||||
{id: "Deviation", label: this.$options.filters.localize("modal_report_select_column_deviation", "Scostamento")},
|
||||
{id: "Dimensions", label: this.$options.filters.localize("modal_report_select_column_dimensions", "Dimensioni")},
|
||||
{id: "EffectiveTime", label: this.$options.filters.localize("modal_report_select_column_effective_time", "Tempo effettivo")},
|
||||
{id: "Quality", label: this.$options.filters.localize("modal_report_select_column_quality", "Qualità")},
|
||||
{id: "Quantity", label: this.$options.filters.localize("modal_report_select_column_quantity", "Quantità")},
|
||||
{id: "AverageTime", label: this.$options.filters.localize("modal_report_select_column_average_time", "Tempo medio")},
|
||||
{id: "OperatorName", label: this.$options.filters.localize("modal_report_select_column_operator_name", "Nome operatore")},
|
||||
{id: "StartTime", label: this.$options.filters.localize("modal_report_select_column_start_time", "Ora inizio")},
|
||||
{id: "TheoreticalTime", label: this.$options.filters.localize("modal_report_select_column_theoretical_time", "Tempo teorico")},
|
||||
// {id: "Shift", label: this.$options.filters.localize("modal_report_select_column_shift", "Turno")},
|
||||
{id: "EndTime", label: this.$options.filters.localize("modal_report_select_column_end_time", "Ora fine")}];
|
||||
|
||||
allSelectedColumn = false;
|
||||
columnSelected = [];
|
||||
|
||||
@Watch("value")
|
||||
initializeSelectedcolums(){
|
||||
this.columnSelected.splice(0, this.columnSelected.length);
|
||||
|
||||
this.value.forEach(element => {
|
||||
this.columnSelected.push(element);
|
||||
});
|
||||
}
|
||||
|
||||
mounted() {
|
||||
this.initializeSelectedcolums();
|
||||
}
|
||||
|
||||
selectAll() {
|
||||
this.columnSelected = [];
|
||||
|
||||
if (!this.allSelectedColumn) {
|
||||
for (let checkbox in this.checkboxes) {
|
||||
this.columnSelected.push(this.checkboxes[checkbox].id);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
close() {
|
||||
Factory.Get(MessageService).deleteChannel("esc_pressed");
|
||||
ModalHelper.HideModal();
|
||||
this.deferred.resolve(this.value);
|
||||
}
|
||||
|
||||
confirm(){
|
||||
Factory.Get(MessageService).deleteChannel("esc_pressed");
|
||||
ModalHelper.HideModal();
|
||||
this.deferred.resolve(this.columnSelected);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -5,119 +5,27 @@
|
||||
<label>{{'modal_report_select_column_body_title' | localize("Scegli le colonne che vuoi visualizzare:")}}</label>
|
||||
<div>
|
||||
<div class="modal-report-select-column-checkbox">
|
||||
<input type="checkbox" value="1" id="modalReportSelectAll" name="" />
|
||||
<input type="checkbox" @click="selectAll()" v-model="allSelectedColumn" value="1" id="modalReportSelectAll" name="" />
|
||||
<label for="modalReportSelectAll"></label>
|
||||
</div>
|
||||
<label for="modalReportSelectAll" class="modal-report-select-column-checkbox-label">{{'modal_report_select_column_select_all' | localize("Seleziona tutte")}}</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-report-body-center">
|
||||
<div class="modal-report-body-center-row">
|
||||
<div>
|
||||
<div class="modal-report-body-center-row" v-for="i in Math.ceil(checkboxes.length / maxRow)" :key="i">
|
||||
<div v-for="(checkbox, idx) in checkboxes.slice((i-1) * maxRow, i * maxRow)" :key="idx">
|
||||
<div class="modal-report-select-column-checkbox">
|
||||
<input type="checkbox" value="1" id="modalReportProgramName" name="" />
|
||||
<label for="modalReportProgramName"></label>
|
||||
<input type="checkbox" v-model="columnSelected" :value="checkbox.id" :id="checkbox.id" />
|
||||
<label :for="checkbox.id"></label>
|
||||
</div>
|
||||
<label for="modalReportProgramName" class="modal-report-select-column-checkbox-label">{{'modal_report_select_column_program_name' | localize("Nome programma")}}</label>
|
||||
</div>
|
||||
<div>
|
||||
<div class="modal-report-select-column-checkbox">
|
||||
<input type="checkbox" value="1" id="modalReportDate" name="" />
|
||||
<label for="modalReportDate"></label>
|
||||
</div>
|
||||
<label for="modalReportDate" class="modal-report-select-column-checkbox-label">{{'modal_report_select_column_date' | localize("Data")}}</label>
|
||||
</div>
|
||||
<div>
|
||||
<div class="modal-report-select-column-checkbox">
|
||||
<input type="checkbox" value="1" id="modalReportDeviation" name="" />
|
||||
<label for="modalReportDeviation"></label>
|
||||
</div>
|
||||
<label for="modalReportDeviation" class="modal-report-select-column-checkbox-label">{{'modal_report_select_column_deviation' | localize("Scostamento")}}</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-report-body-center-row">
|
||||
<div>
|
||||
<div class="modal-report-select-column-checkbox">
|
||||
<input type="checkbox" value="1" id="modalReportDimensions" name="" />
|
||||
<label for="modalReportDimensions"></label>
|
||||
</div>
|
||||
<label for="modalReportDimensions" class="modal-report-select-column-checkbox-label">{{'modal_report_select_column_dimensions' | localize("Dimensioni")}}</label>
|
||||
</div>
|
||||
<div>
|
||||
<div class="modal-report-select-column-checkbox">
|
||||
<input type="checkbox" value="1" id="modalReportEffectiveTime" name="" />
|
||||
<label for="modalReportEffectiveTime"></label>
|
||||
</div>
|
||||
<label for="modalReportEffectiveTime" class="modal-report-select-column-checkbox-label">{{'modal_report_select_column_effective_time' | localize("Tempo effettivo")}}</label>
|
||||
</div>
|
||||
<div>
|
||||
<div class="modal-report-select-column-checkbox">
|
||||
<input type="checkbox" value="1" id="modalReportQuality" name="" />
|
||||
<label for="modalReportQuality"></label>
|
||||
</div>
|
||||
<label for="modalReportQuality" class="modal-report-select-column-checkbox-label">{{'modal_report_select_column_quality' | localize("Qualità")}}</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-report-body-center-row">
|
||||
<div>
|
||||
<div class="modal-report-select-column-checkbox">
|
||||
<input type="checkbox" value="1" id="modalReportQuantity" name="" />
|
||||
<label for="modalReportQuantity"></label>
|
||||
</div>
|
||||
<label for="modalReportQuantity" class="modal-report-select-column-checkbox-label">{{'modal_report_select_column_quantity' | localize("Quantità")}}</label>
|
||||
</div>
|
||||
<div>
|
||||
<div class="modal-report-select-column-checkbox">
|
||||
<input type="checkbox" value="1" id="modalReportAverageTime" name="" />
|
||||
<label for="modalReportAverageTime"></label>
|
||||
</div>
|
||||
<label for="modalReportAverageTime" class="modal-report-select-column-checkbox-label">{{'modal_report_select_column_average_time' | localize("Tempo medio")}}</label>
|
||||
</div>
|
||||
<div>
|
||||
<div class="modal-report-select-column-checkbox">
|
||||
<input type="checkbox" value="1" id="modalReportOperatorName" name="" />
|
||||
<label for="modalReportOperatorName"></label>
|
||||
</div>
|
||||
<label for="modalReportOperatorName" class="modal-report-select-column-checkbox-label">{{'modal_report_select_column_operator_name' | localize("Nome operatore")}}</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-report-body-center-row">
|
||||
<div>
|
||||
<div class="modal-report-select-column-checkbox">
|
||||
<input type="checkbox" value="1" id="modalReportStartNow" name="" />
|
||||
<label for="modalReportStartNow"></label>
|
||||
</div>
|
||||
<label for="modalReportStartNow" class="modal-report-select-column-checkbox-label">{{'modal_report_select_column_start_now' | localize("Ora inizio")}}</label>
|
||||
</div>
|
||||
<div>
|
||||
<div class="modal-report-select-column-checkbox">
|
||||
<input type="checkbox" value="1" id="modalReportTheoreticalTime" name="" />
|
||||
<label for="modalReportTheoreticalTime"></label>
|
||||
</div>
|
||||
<label for="modalReportTheoreticalTime" class="modal-report-select-column-checkbox-label">{{'modal_report_select_column_theoretical_time' | localize("Tempo teorico")}}</label>
|
||||
</div>
|
||||
<div>
|
||||
<div class="modal-report-select-column-checkbox">
|
||||
<input type="checkbox" value="1" id="modalReportShift" name="" />
|
||||
<label for="modalReportShift"></label>
|
||||
</div>
|
||||
<label for="modalReportShift" class="modal-report-select-column-checkbox-label">{{'modal_report_select_column_shift' | localize("Turno")}}</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-report-body-center-row">
|
||||
<div>
|
||||
<div class="modal-report-select-column-checkbox">
|
||||
<input type="checkbox" value="1" id="modalReportEndTime" name="" />
|
||||
<label for="modalReportEndTime"></label>
|
||||
</div>
|
||||
<label for="modalReportEndTime" class="modal-report-select-column-checkbox-label">{{'modal_report_select_column_end_time' | localize("Ora fine")}}</label>
|
||||
<label :for="checkbox.id" class="modal-report-select-column-checkbox-label">{{checkbox.label}}</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-report-body-footer">
|
||||
<button class="btn btn-primary">{{'modal_report_select_column_btn_cancel' | localize("Annulla")}}</button>
|
||||
<button class="btn btn-success">{{'modal_report_select_column_btn_confirm' | localize("Conferma")}}</button>
|
||||
<button class="btn btn-primary" @click="close()">{{'modal_report_select_column_btn_cancel' | localize("Annulla")}}</button>
|
||||
<button class="btn btn-success" @click="confirm()">{{'modal_report_select_column_btn_confirm' | localize("Conferma")}}</button>
|
||||
</div>
|
||||
</modal>
|
||||
</template>
|
||||
<script src="./modal-report-select-column.ts" lang="ts"></script>
|
||||
<script src="./modal-report-select-column.ts" lang="ts"></script>
|
||||
|
||||
Reference in New Issue
Block a user