From bbc940e60feb40ea2f2e586e0da3c17730f114de Mon Sep 17 00:00:00 2001 From: Alessandro Date: Wed, 6 Mar 2019 17:17:46 +0100 Subject: [PATCH] production table --- Step/wwwroot/assets/styles/base/card.less | 99 +++++++++++++------ Step/wwwroot/assets/styles/style.css | 57 ++++++----- .../components/card-report-production.ts | 42 ++++++-- .../components/card-report-production.vue | 21 +++- Step/wwwroot/src/services/reportService.ts | 6 +- 5 files changed, 157 insertions(+), 68 deletions(-) diff --git a/Step/wwwroot/assets/styles/base/card.less b/Step/wwwroot/assets/styles/base/card.less index 2024b131..fb5caa75 100644 --- a/Step/wwwroot/assets/styles/base/card.less +++ b/Step/wwwroot/assets/styles/base/card.less @@ -2003,6 +2003,7 @@ table-layout: fixed; width: 100%; border-collapse: collapse; + border: solid 1px @color-label-grey; } thead{ border-bottom: solid 2px @color-label-grey; @@ -2111,7 +2112,7 @@ } tbody{ display: block; - height: 598px; + height: 560px; width: 1431px; tr{ // cursor: pointer; @@ -2128,6 +2129,9 @@ &.red{ color: @color-scarlet; } + &.black{ + color: black; + } } td:last-child{ width: 16px; @@ -2140,38 +2144,73 @@ } } } - .pagination { - display: inline-block; - } - .pagination button { - padding: 0; - border: none; - background: none; - color: @color-black-40; - float: left; - padding: 8px 16px; - text-decoration: none; - border: 1px solid @color-whitegrey; - margin: 0 4px; - } - .pagination button:first-child { - border-top-left-radius: 5px; - border-bottom-left-radius: 5px; - } + tfoot { + width: 100%; + bottom: 0; + } + tr{ + width: 100%; + display: table; + } + tfoot tr td{ + height: 64px; + width: 100%; + font-size: 18px; + color: @color-darkish-blue; + position: relative; + bottom:0; + border-top: solid 2px @color-silver; + td{ + padding: 0; + text-align: center; + } + div.group-label-button{ + text-align: center; + margin: 8px 0 8px 0; + button{ + width: 60px; + padding: 0px; + } + .freespace{ + width: 60px; + display: inline-block; + margin: 0 8px; + } + } + } + // .pagination { + // display: inline-block; + // } - .pagination button:last-child { - border-top-right-radius: 5px; - border-bottom-right-radius: 5px; - } - .pagination button.active { - background-color: @color-warm-grey; - color: @color-white; - } + // .pagination button { + // padding: 0; + // border: none; + // background: none; + // color: @color-black-40; + // float: left; + // padding: 8px 16px; + // text-decoration: none; + // border: 1px solid @color-whitegrey; + // margin: 0 4px; + // } + // .pagination button:first-child { + // border-top-left-radius: 5px; + // border-bottom-left-radius: 5px; + // } - .pagination button:hover:not(.active) { - background-color: @color-whitegrey; - } + // .pagination button:last-child { + // border-top-right-radius: 5px; + // border-bottom-right-radius: 5px; + // } + // .pagination button.active { + // background-color: @color-warm-grey; + // color: @color-white; + // } + + // .pagination button:hover:not(.active) { + // background-color: @color-whitegrey; + // } .body-left-center-left{ width: 360px; height: 616px; diff --git a/Step/wwwroot/assets/styles/style.css b/Step/wwwroot/assets/styles/style.css index 66922b7f..2d0cd0a5 100644 --- a/Step/wwwroot/assets/styles/style.css +++ b/Step/wwwroot/assets/styles/style.css @@ -8426,6 +8426,7 @@ footer .container button.big:before { table-layout: fixed; width: 100%; border-collapse: collapse; + border: solid 1px #979797; } .card-report-production .reports-box-body-left .body-left-center .body-left-center-container thead { border-bottom: solid 2px #979797; @@ -8470,7 +8471,7 @@ footer .container button.big:before { } .card-report-production .reports-box-body-left .body-left-center .body-left-center-container tbody { display: block; - height: 598px; + height: 560px; width: 1431px; } .card-report-production .reports-box-body-left .body-left-center .body-left-center-container tbody tr { @@ -8489,6 +8490,9 @@ footer .container button.big:before { .card-report-production .reports-box-body-left .body-left-center .body-left-center-container tbody tr td.red { color: #d0021b; } +.card-report-production .reports-box-body-left .body-left-center .body-left-center-container tbody tr td.black { + color: black; +} .card-report-production .reports-box-body-left .body-left-center .body-left-center-container tbody tr td:last-child { width: 16px; display: flex; @@ -8498,34 +8502,39 @@ footer .container button.big:before { color: #fff; font-weight: 600; } -.card-report-production .reports-box-body-left .body-left-center .body-left-center-container .pagination { - display: inline-block; +.card-report-production .reports-box-body-left .body-left-center .body-left-center-container tfoot { + width: 100%; + bottom: 0; } -.card-report-production .reports-box-body-left .body-left-center .body-left-center-container .pagination button { +.card-report-production .reports-box-body-left .body-left-center .body-left-center-container tr { + width: 100%; + display: table; +} +.card-report-production .reports-box-body-left .body-left-center .body-left-center-container tfoot tr td { + height: 64px; + width: 100%; + font-size: 18px; + color: #002680; + position: relative; + bottom: 0; + border-top: solid 2px #bbbcbc; +} +.card-report-production .reports-box-body-left .body-left-center .body-left-center-container tfoot tr td td { padding: 0; - border: none; - background: none; - color: rgba(0, 0, 0, 0.4); - float: left; - padding: 8px 16px; - text-decoration: none; - border: 1px solid #dddddd; - margin: 0 4px; + text-align: center; } -.card-report-production .reports-box-body-left .body-left-center .body-left-center-container .pagination button:first-child { - border-top-left-radius: 5px; - border-bottom-left-radius: 5px; +.card-report-production .reports-box-body-left .body-left-center .body-left-center-container tfoot tr td div.group-label-button { + text-align: center; + margin: 8px 0 8px 0; } -.card-report-production .reports-box-body-left .body-left-center .body-left-center-container .pagination button:last-child { - border-top-right-radius: 5px; - border-bottom-right-radius: 5px; +.card-report-production .reports-box-body-left .body-left-center .body-left-center-container tfoot tr td div.group-label-button button { + width: 60px; + padding: 0px; } -.card-report-production .reports-box-body-left .body-left-center .body-left-center-container .pagination button.active { - background-color: #878787; - color: #fff; -} -.card-report-production .reports-box-body-left .body-left-center .body-left-center-container .pagination button:hover:not(.active) { - background-color: #dddddd; +.card-report-production .reports-box-body-left .body-left-center .body-left-center-container tfoot tr td div.group-label-button .freespace { + width: 60px; + display: inline-block; + margin: 0 8px; } .card-report-production .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left { width: 360px; diff --git a/Step/wwwroot/src/app_modules/reports/components/card-report-production.ts b/Step/wwwroot/src/app_modules/reports/components/card-report-production.ts index a516ab4a..38d6bf1b 100644 --- a/Step/wwwroot/src/app_modules/reports/components/card-report-production.ts +++ b/Step/wwwroot/src/app_modules/reports/components/card-report-production.ts @@ -60,7 +60,8 @@ export default class CardReportProduction extends Vue { users: Array = []; ctx: any = null; selectedPage = 1; - paginationData: { firstDate: any, pages: number } = {firstDate: new Date(), pages: 6}; + visiblePages = 3; + paginationData: { firstDate: any, pages: number } = {firstDate: new Date(), pages: 0}; // ctx: any = document.getElementById("myBarChart"); // dataPieces: server.reportData = (this.$store.getters as ReportGetters).getReportData(); @@ -88,6 +89,21 @@ export default class CardReportProduction extends Vue { return { min: min, max: max, count: (max - min) } } + get freeSpaseMinus() { + if(this.selectedPage - (this.visiblePages + 1) < 0) + return ((this.selectedPage - (this.visiblePages + 1)) * (-1)); + return 0; + } + + get freeSpasePlus() { + if(!this.paginationData || !this.paginationData.pages) + return 0; + + if(this.paginationData.pages - this.selectedPage <= this.visiblePages) + return (this.visiblePages - (this.paginationData.pages - this.selectedPage)) + return 0; + } + get currentUser() { return this.$store.state.currentUser; } @@ -100,7 +116,7 @@ export default class CardReportProduction extends Vue { @Watch("filter", { deep: true }) async filterChanged(n, o) { - let result = await awaiter(reportService.ProgramsReport(this.filter.nameProgram, this.filter.interval)); + let result = await awaiter(reportService.ProgramsReport(9,this.selectedPage,this.filter.nameProgram, this.filter.interval)); this.paginationData.pages = result.pages; } @@ -111,7 +127,8 @@ export default class CardReportProduction extends Vue { 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); - await reportService.ProgramsReport(this.filter.nameProgram,this.filter.interval); + let result = await awaiter(reportService.ProgramsReport(9,this.selectedPage,this.filter.nameProgram, this.filter.interval)); + this.paginationData.pages = result.pages; this.ctx = this.$refs.bar; // this.buildChart(); this.buildGage(); @@ -187,13 +204,20 @@ export default class CardReportProduction extends Vue { } let myBarChart = new Chart(this.ctx, { type: 'bar', - data: {labels: ["January", "February", "March", "April", "May", "June", "July", "August"], - datasets: [ - { - data: [65, 59, 80, 81, 56, 55, 40, 70] - } - ]}, + data: [{x:'2016-12-25', y:20}, {x:'2016-12-26', y:10}], options: options }); } + + colorDeviation(deviation){ + if(deviation.startsWith("+")){ + return "red"; + } + else if(deviation.startsWith("-")){ + return "green"; + } + else{ + return "grey"; + } + } } diff --git a/Step/wwwroot/src/app_modules/reports/components/card-report-production.vue b/Step/wwwroot/src/app_modules/reports/components/card-report-production.vue index 415ccc22..6a67d314 100644 --- a/Step/wwwroot/src/app_modules/reports/components/card-report-production.vue +++ b/Step/wwwroot/src/app_modules/reports/components/card-report-production.vue @@ -78,18 +78,33 @@ {{p.actualT}} {{p.averageT}} {{p.theoricT}} - {{p.deviation}} + {{p.deviation}} + + + +
+ +
 
+ +
 
+ +
+ + + -
diff --git a/Step/wwwroot/src/services/reportService.ts b/Step/wwwroot/src/services/reportService.ts index 2d6263c7..fdd3e9de 100644 --- a/Step/wwwroot/src/services/reportService.ts +++ b/Step/wwwroot/src/services/reportService.ts @@ -30,15 +30,17 @@ export class ReportService extends baseRestService { return await this.Post('/api/report/timeLine',filter,true); } - async ProgramsReport(name: string, filterInterval: Array): Promise { + async ProgramsReport(pageSize: number, page: number, name: string, filterInterval: Array): Promise { let filter = { + pageSize: pageSize, + page: page, name: name, startDate: filterInterval[0], endDate: filterInterval[1] } let result = await this.Post('/api/report/programs', filter, true); reportActions.updateReportTableProduction(store,result.occurrences); - return result.occurrences; + return result; }