Added Frontend
This commit is contained in:
+33
-2
@@ -2,8 +2,39 @@ import { Component, Vue } from "vue-property-decorator";
|
||||
import Header from "../../../header/my-header.vue";
|
||||
import MenuSx from "../../../menu-sx/menu-sx.vue";
|
||||
import LogMisurazioniTable from "../../../LogMisurazioni/components/tables/log-misurazioni-table/log-misurazioni-table.vue";
|
||||
import { awaiter, messageService } from "@/_base";
|
||||
import { CustomPagination } from "@/components/pagination";
|
||||
import { Watch } from "vue-property-decorator";
|
||||
import { underTheHoodService } from "@/services/underTheHoodService";
|
||||
|
||||
@Component({
|
||||
components: { Header, MenuSx, LogMisurazioniTable }
|
||||
components: { Header, MenuSx, LogMisurazioniTable,CustomPagination }
|
||||
})
|
||||
export default class LogMisurazioni extends Vue {}
|
||||
export default class LogMisurazioni extends Vue {
|
||||
|
||||
currentPage: number = 0;
|
||||
itemsPerPage: number = 10;
|
||||
totalPages: number = 1;
|
||||
|
||||
rowData = [];
|
||||
|
||||
async mounted(){
|
||||
this.currentPage = 0;
|
||||
this.totalPages = await awaiter(underTheHoodService.GetHistorySheetsCount());
|
||||
this.getLogs();
|
||||
}
|
||||
|
||||
@Watch("currentPage", { deep: true })
|
||||
async getLogs(){
|
||||
var from = ((this.currentPage) * 10);
|
||||
this.rowData = (await awaiter(underTheHoodService.GetHistorySheetsFitered(from,this.itemsPerPage)));
|
||||
}
|
||||
|
||||
|
||||
async reload(){
|
||||
this.currentPage = 0;
|
||||
this.totalPages = await awaiter(underTheHoodService.GetHistorySheetsCount());
|
||||
this.getLogs();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
+13
-1
@@ -1,6 +1,18 @@
|
||||
<template>
|
||||
<div class="column-page-one-column">
|
||||
<LogMisurazioniTable></LogMisurazioniTable>
|
||||
<LogMisurazioniTable :rowData="rowData"></LogMisurazioniTable>
|
||||
<div class="menu">
|
||||
<div class="load">
|
||||
<custom-pagination
|
||||
v-model="currentPage"
|
||||
:items-per-page="itemsPerPage"
|
||||
:total-pages="totalPages"
|
||||
></custom-pagination>
|
||||
</div>
|
||||
<div class="toReload">
|
||||
<button class="btn" @click="reload()"><i class="fa fa-refresh"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<style lang="less">
|
||||
|
||||
+32
@@ -0,0 +1,32 @@
|
||||
.main-container th,
|
||||
.main-container td {
|
||||
padding: 0 5px;
|
||||
}
|
||||
.main-container th.left,
|
||||
.main-container td.left {
|
||||
text-align: end;
|
||||
}
|
||||
.main-container th.lastre-date,
|
||||
.main-container td.lastre-date {
|
||||
width: 20%;
|
||||
}
|
||||
.main-container th.lastre-recipe,
|
||||
.main-container td.lastre-recipe {
|
||||
width: 40%;
|
||||
}
|
||||
.main-container th.lastre-numpezzo,
|
||||
.main-container td.lastre-numpezzo {
|
||||
width: 10%;
|
||||
}
|
||||
.main-container th.lastre-firstval,
|
||||
.main-container td.lastre-firstval {
|
||||
width: 10%;
|
||||
}
|
||||
.main-container th.lastre-secondval,
|
||||
.main-container td.lastre-secondval {
|
||||
width: 10%;
|
||||
}
|
||||
.main-container th.lastre-thirdval,
|
||||
.main-container td.lastre-thirdval {
|
||||
width: 10%;
|
||||
}
|
||||
+18
-12
@@ -3,21 +3,27 @@
|
||||
.main-container {
|
||||
th,
|
||||
td {
|
||||
&.misurazioni-value {
|
||||
width: 322px;
|
||||
max-width: 322px;
|
||||
padding: 0 5px;
|
||||
&.left{
|
||||
text-align: end;
|
||||
}
|
||||
&.misurazioni-recipe {
|
||||
width: 539px;
|
||||
max-width: 539px;
|
||||
&.lastre-date {
|
||||
width: 20%;
|
||||
}
|
||||
&.misurazioni-date {
|
||||
width: 313px;
|
||||
max-width: 313px;
|
||||
&.lastre-recipe {
|
||||
width: 40%;
|
||||
}
|
||||
&.misurazioni-type {
|
||||
width: 187px;
|
||||
max-width: 187px;
|
||||
&.lastre-numpezzo {
|
||||
width: 10%;
|
||||
}
|
||||
&.lastre-firstval {
|
||||
width: 10%;
|
||||
}
|
||||
&.lastre-secondval {
|
||||
width: 10%;
|
||||
}
|
||||
&.lastre-thirdval {
|
||||
width: 10%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
+15
-75
@@ -1,83 +1,23 @@
|
||||
import { Component, Vue } from "vue-property-decorator";
|
||||
import { Prop } from "vue-property-decorator";
|
||||
import moment from "moment";
|
||||
|
||||
@Component({})
|
||||
export default class LogMisurazioniTable extends Vue {
|
||||
rowData = [];
|
||||
|
||||
@Prop({ default: []})
|
||||
rowData:any;
|
||||
|
||||
mounted() {
|
||||
this.rowData = [
|
||||
{
|
||||
date: "2020-09-16 00:23:20 UTC",
|
||||
recipe: "Recipe name [30]",
|
||||
type: "Lenght",
|
||||
value: "568.08 mm [589.92 mm - 21.84 mm]"
|
||||
},
|
||||
{
|
||||
date: "2020-09-16 00:23:20 UTC",
|
||||
recipe: "Recipe name [30]",
|
||||
type: "Lenght",
|
||||
value: "568.08 mm [589.92 mm - 21.84 mm]"
|
||||
},
|
||||
{
|
||||
date: "2020-09-16 00:23:20 UTC",
|
||||
recipe: "Recipe name [30]",
|
||||
type: "Lenght",
|
||||
value: "568.08 mm [589.92 mm - 21.84 mm]"
|
||||
},
|
||||
{
|
||||
date: "2020-09-16 00:23:20 UTC",
|
||||
recipe: "Recipe name [30]",
|
||||
type: "Lenght",
|
||||
value: "568.08 mm [589.92 mm - 21.84 mm]"
|
||||
},
|
||||
{
|
||||
date: "2020-09-16 00:23:20 UTC",
|
||||
recipe: "Recipe name [30]",
|
||||
type: "Lenght",
|
||||
value: "568.08 mm [589.92 mm - 21.84 mm]"
|
||||
},
|
||||
{
|
||||
date: "2020-09-16 00:23:20 UTC",
|
||||
recipe: "Recipe name [30]",
|
||||
type: "Lenght",
|
||||
value: "568.08 mm [589.92 mm - 21.84 mm]"
|
||||
},
|
||||
{
|
||||
date: "2020-09-16 00:23:20 UTC",
|
||||
recipe: "Recipe name [30]",
|
||||
type: "Lenght",
|
||||
value: "568.08 mm [589.92 mm - 21.84 mm]"
|
||||
},
|
||||
{
|
||||
date: "2020-09-16 00:23:20 UTC",
|
||||
recipe: "Recipe name [30]",
|
||||
type: "Lenght",
|
||||
value: "568.08 mm [589.92 mm - 21.84 mm]"
|
||||
},
|
||||
{
|
||||
date: "2020-09-16 00:23:20 UTC",
|
||||
recipe: "Recipe name [30]",
|
||||
type: "Lenght",
|
||||
value: "568.08 mm [589.92 mm - 21.84 mm]"
|
||||
},
|
||||
{
|
||||
date: "2020-09-16 00:23:20 UTC",
|
||||
recipe: "Recipe name [30]",
|
||||
type: "Lenght",
|
||||
value: "568.08 mm [589.92 mm - 21.84 mm]"
|
||||
},
|
||||
{
|
||||
date: "2020-09-16 00:23:20 UTC",
|
||||
recipe: "Recipe name [30]",
|
||||
type: "Lenght",
|
||||
value: "568.08 mm [589.92 mm - 21.84 mm]"
|
||||
},
|
||||
{
|
||||
date: "2020-09-16 00:23:20 UTC",
|
||||
recipe: "Recipe name [30]",
|
||||
type: "Lenght",
|
||||
value: "568.08 mm [589.92 mm - 21.84 mm]"
|
||||
}
|
||||
];
|
||||
|
||||
}
|
||||
|
||||
|
||||
convertDate(date) {
|
||||
return moment(date).format('L');
|
||||
}
|
||||
convertDateToTime(date) {
|
||||
return moment(date).format('HH:mm:ss.SSS');
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
+18
-28
@@ -3,40 +3,30 @@
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="misurazioni-date">Date</th>
|
||||
<th class="misurazioni-recipe">Recipe</th>
|
||||
<th class="misurazioni-type">Type</th>
|
||||
<th class="misurazioni-value">Value</th>
|
||||
<th class="lastre-date ">{{'underthehood_label_date' | localize("Date")}}</th>
|
||||
<th class="lastre-recipe">{{'underthehood_label_recipe' | localize("Ricetta")}}</th>
|
||||
<th class="lastre-numpezzo left">{{'underthehood_label_numpiece' | localize("N. Pezzo")}}</th>
|
||||
<th class="lastre-firstval left">{{'underthehood_label_firsvtal' | localize("firstVal")}}</th>
|
||||
<th class="lastre-secondval left">{{'underthehood_label_secondval' | localize("secondVal")}}</th>
|
||||
<th class="lastre-thirdval left">{{'underthehood_label_thirdval' | localize("thirdVal")}}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="autocolor">
|
||||
<tr v-for="(item, i) of rowData" :key="i" class="tr-inner">
|
||||
<td>
|
||||
<span>
|
||||
{{ item.date }}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<span>
|
||||
{{ item.recipe }}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<span>
|
||||
{{ item.type }}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<span>
|
||||
{{ item.value }}
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
<template v-for="(item, idx) in rowData">
|
||||
<tr :key="`c-${idx}`">
|
||||
<td>{{convertDate(item.dtEvent)}} - {{convertDateToTime(item.dtEvent)}}</td>
|
||||
<td>{{item.recipeName}}</td>
|
||||
<td class="left">{{item.numDone}}</td>
|
||||
<td class="left">{{item.firstVal}}</td>
|
||||
<td class="left">{{item.secondVal}}</td>
|
||||
<td class="left">{{item.thirdVal}}</td>
|
||||
</tr>
|
||||
</template>
|
||||
</tbody>
|
||||
</table>
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
<style lang="less">
|
||||
@import "log-misurazioni-table.less";
|
||||
</style>
|
||||
<script lang="ts" src="./log-misurazioni-table.ts"></script>
|
||||
<script lang="ts" src="./log-misurazioni-table.ts"></script>
|
||||
@@ -10,11 +10,11 @@
|
||||
@click="go('log-ciclo-automatico')"
|
||||
:class="{white: this.value == 'log-ciclo-automatico'}"
|
||||
>{{'underthehood_label_loga' | localize("Log ciclo automatico")}}</div>
|
||||
<!-- <div
|
||||
<div
|
||||
class="rettangle"
|
||||
@click="go('log-misurazioni')"
|
||||
:class="{white: this.value == 'log-misurazioni'}"
|
||||
>{{'underthehood_label_logm' | localize("Log misurazioni")}}</div>-->
|
||||
>{{'underthehood_label_logm' | localize("Log misurazioni")}}</div>
|
||||
<div
|
||||
class="rettangle"
|
||||
@click="go('assi')"
|
||||
|
||||
@@ -43,6 +43,17 @@ export class UnderTheHoodService extends baseRestService {
|
||||
return result;
|
||||
}
|
||||
|
||||
|
||||
async GetHistorySheetsCount() {
|
||||
let result = await this.Get<number>((await this.BASE_URL()) + "/api/underthehood/SheetHistoryCount", true);
|
||||
return result;
|
||||
}
|
||||
|
||||
async GetHistorySheetsFitered(from,num) {
|
||||
let result = await this.Get<number>((await this.BASE_URL()) + `/api/underthehood/SheetHistoryFiltered?start=${from}&number=${num}`, true);
|
||||
return result;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
export const underTheHoodService = new UnderTheHoodService();
|
||||
Reference in New Issue
Block a user