more card-report events alarms machine status
This commit is contained in:
Alessandro
File diff suppressed because it is too large
Load Diff
@@ -101,7 +101,7 @@
|
||||
width: 253px;
|
||||
.mx-input{
|
||||
width: 253px;
|
||||
height: 50px;
|
||||
height: 48px;
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 1px 2px 0 @color-black-40;
|
||||
border: solid 1px @color-silver;
|
||||
@@ -155,7 +155,7 @@
|
||||
}
|
||||
input.program{
|
||||
width: 256px;
|
||||
height: 48px;
|
||||
height: 46px;
|
||||
border-radius: 2px;
|
||||
box-shadow: inset 0 1px 3px 0 @color-black-50;
|
||||
font-size: 18px;
|
||||
@@ -402,7 +402,7 @@
|
||||
width: 1448px;
|
||||
overflow: scroll;
|
||||
tr{
|
||||
cursor: pointer;
|
||||
// cursor: pointer;
|
||||
height: 64px;
|
||||
padding: 10px;
|
||||
font-size: 14px;
|
||||
|
||||
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,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 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))]
|
||||
};
|
||||
|
||||
|
||||
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-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>{{'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-events.ts" lang="ts"></script>
|
||||
@@ -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 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,43 @@
|
||||
<template>
|
||||
<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>
|
||||
@@ -9,10 +9,14 @@ 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";
|
||||
|
||||
declare let $: any;
|
||||
@Component({ components: { datePicker: DatePicker, cardReport: cardReport,
|
||||
accordionDropdown: accordionDropdown, accordion: Accordion, cardReportProduction: cardReportProduction } })
|
||||
accordionDropdown: accordionDropdown, accordion: Accordion, cardReportProduction: cardReportProduction,
|
||||
cardReportEvents: cardReportEvents, cardReportAlarms: cardReportAlarms, cardReportMachineStatus: cardReportMachineStatus } })
|
||||
export default class Reports extends Vue {
|
||||
|
||||
lang = {
|
||||
|
||||
@@ -23,134 +23,13 @@
|
||||
<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> -->
|
||||
<card-report-events></card-report-events>
|
||||
</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_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-alarms></card-report-alarms>
|
||||
</div>
|
||||
<div class="reports-box-body" v-if="selectedTab == 'MachineStatus'">
|
||||
<card-report-machine-status></card-report-machine-status>
|
||||
<!-- <div class="reports-box-body-left">
|
||||
<div class="body-left-header-machinestatus">
|
||||
<div>
|
||||
|
||||
Reference in New Issue
Block a user