Added Frontend

This commit is contained in:
Thermo_SIM
2021-03-19 18:28:07 +01:00
parent 36e0927bd1
commit c7f7c4f9c8
9 changed files with 144 additions and 122 deletions
@@ -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();
}
}
@@ -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">
@@ -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%;
}
@@ -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%;
}
}
}
@@ -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');
}
}
@@ -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();