From 64852d23aea314a0ee4b37e367acde03eaee1594 Mon Sep 17 00:00:00 2001 From: Alessandro Date: Tue, 12 Feb 2019 18:04:03 +0100 Subject: [PATCH] pie chart --- Step/wwwroot/assets/styles/base/card.less | 359 +----------------- Step/wwwroot/assets/styles/style.css | 281 +------------- Step/wwwroot/package-lock.json | 41 +- Step/wwwroot/package.json | 10 +- Step/wwwroot/src/@types/report.cs.d.ts | 6 + .../components/card-report-machine-status.ts | 80 +++- .../components/card-report-machine-status.vue | 104 +---- .../app_modules/reports/components/reports.ts | 2 +- Step/wwwroot/src/services/reportService.ts | 7 +- Step/wwwroot/src/store/report.store.ts | 17 +- 10 files changed, 149 insertions(+), 758 deletions(-) diff --git a/Step/wwwroot/assets/styles/base/card.less b/Step/wwwroot/assets/styles/base/card.less index 10e2c259..a84fd521 100644 --- a/Step/wwwroot/assets/styles/base/card.less +++ b/Step/wwwroot/assets/styles/base/card.less @@ -826,7 +826,7 @@ background-color: @color-black-40; box-shadow: none; color: #fff; - .card-folder-path-icon > i, .card-folder-path-arrow > i, { + .card-folder-path-icon > i, .card-folder-path-arrow > i { color: #fff; } } @@ -3647,7 +3647,6 @@ display: flex; flex-flow: row; margin-top: 18px; - border-right: solid 2px @color-whitegrey; position: relative; margin-bottom: 16px; .mx-datepicker-range{ @@ -3810,359 +3809,11 @@ max-height: 681px; display: flex; flex-flow: column; + justify-content: center; + align-items: center; .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, td{ - width: auto; - } - // 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{ - display: flex; - align-items: center; - float: right; - font-size: 23px; - font-weight: bold; - cursor: pointer; - } - th, td{ - overflow: hidden; - div{ - overflow: hidden; - max-height: 64px; - } - } - tbody{ - display: block; - height: 598px; - width: 1431px; - 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: 16px; - display: flex; - } - &.selected{ - background-color: rgba(23, 145, 255, 0.75); - color: @color-white; - font-weight: 600; - } - } - } - .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; - } - - .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; - 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; - } - } + display: block; + width: 80%; } } } diff --git a/Step/wwwroot/assets/styles/style.css b/Step/wwwroot/assets/styles/style.css index 38ce58f9..cc4465a9 100644 --- a/Step/wwwroot/assets/styles/style.css +++ b/Step/wwwroot/assets/styles/style.css @@ -9948,7 +9948,6 @@ footer .container button.big:before { display: flex; flex-flow: row; margin-top: 18px; - border-right: solid 2px #dddddd; position: relative; margin-bottom: 16px; } @@ -10141,286 +10140,12 @@ footer .container button.big:before { max-height: 681px; display: flex; flex-flow: column; + justify-content: center; + align-items: center; } .card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container { - width: 100%; -} -.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container table { - table-layout: fixed; - width: 100%; - border-collapse: collapse; -} -.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container thead { - border-bottom: solid 2px #979797; - font-size: 14px; - line-height: 1.29; - color: #002680; display: block; - width: 1431px; -} -.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container thead tr th { - height: 48px; -} -.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container tr:nth-child(even) { - background: #FFF; -} -.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container tr:nth-child(odd) { - background: #dddddd; -} -.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container thead tr:nth-child(odd) { - background: #FFF; -} -.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container th, -.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container td { - width: auto; -} -.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container th:last-child { - display: flex; - align-items: center; - float: right; - font-size: 23px; - font-weight: bold; - cursor: pointer; -} -.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container th, -.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container td { - overflow: hidden; -} -.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container th div, -.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container td div { - overflow: hidden; - max-height: 64px; -} -.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container tbody { - display: block; - height: 598px; - width: 1431px; -} -.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container tbody tr { - height: 64px; - padding: 10px; - font-size: 14px; - line-height: 1.29; - color: #4b4b4b; -} -.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container tbody tr td { - text-align: center; -} -.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container tbody tr td.green { - color: #7ed321; -} -.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container tbody tr td.red { - color: #d0021b; -} -.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container tbody tr td:last-child { - width: 16px; - display: flex; -} -.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container tbody tr.selected { - background-color: rgba(23, 145, 255, 0.75); - color: #fff; - font-weight: 600; -} -.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container .pagination { - display: inline-block; -} -.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container .pagination button { - 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; -} -.card-report-machine-status .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-machine-status .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-machine-status .reports-box-body-left .body-left-center .body-left-center-container .pagination button.active { - background-color: #878787; - color: #fff; -} -.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container .pagination button:hover:not(.active) { - background-color: #dddddd; -} -.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left { - width: 360px; - height: 616px; - display: flex; - flex-flow: column; - align-items: center; - border: solid 1px #dddddd; - overflow-y: auto; -} -.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .multiselect { - z-index: 100; - margin-bottom: 24px; - margin-top: 16px; -} -.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .multiselect label { - font-size: 14px; - line-height: 1.29; - color: #878787; -} -.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .selectBox { - position: relative; - width: 328px; - height: 64px; -} -.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .selectBox select { - width: 100%; - padding: 8px; - cursor: pointer; - height: 64px; - font-size: 18px; - line-height: 1.11; - color: #4b4b4b; - margin-bottom: 0; - margin-top: 0; -} -.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .selectBox select option { - display: none; -} -.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .overSelect { - position: absolute; - left: 0; - right: 0; - top: 0; - bottom: 0; -} -.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .checkboxes, -.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .checkboxesU { - display: none; -} -.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .checkboxesView, -.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .checkboxesViewUser { - width: calc(100% - 8px); - background-color: #fff; - display: block; - z-index: 100; - padding: 6px 4px; - box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.4); -} -.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .checkboxesView label, -.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .checkboxesViewUser label { - font-size: 18px; - margin: 2px; - display: flex; - flex-flow: row; -} -.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .checkboxesView .label-state, -.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .checkboxesViewUser .label-state { - margin-left: 12px; -} -.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div select { - width: 328px; - height: 48px; - border-radius: 2px; - box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4); - margin-bottom: 24px; - margin-top: 16px; - padding-left: 16px; - font-size: 18px; - line-height: 1.11; - color: #4b4b4b; -} -.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .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: #002680; - line-height: 1; - font-size: 18px; - padding-left: 16px; - cursor: pointer; -} -.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .accordion-dropdown header span { - width: 100%; -} -.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .accordion-dropdown header .expander { - margin: 0 12px; - line-height: 28px; - height: 28px; - width: 28px; - font-size: 28px; -} -.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .accordion-dropdown section { - width: 328px; - min-height: 0; - max-height: 0; - transition: max-height 100ms ease-in-out, min-height 200ms ease-in-out; - overflow: hidden; -} -.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .accordion-dropdown section.expanded { - min-height: 64px; - background-color: rgba(255, 255, 255, 0.1); - max-height: 1000px; -} -.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .accordion-dropdown section .item { - height: 64px; - width: 100%; - line-height: 64px; - background-color: #f1f1f1; -} -.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .accordion-dropdown section .dropdown { - height: 100%; - margin-top: 2px; -} -.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .accordion-dropdown section .dropdown .filename { - display: flex; - height: 64px; - align-items: center; - cursor: pointer; -} -.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .accordion-dropdown section .dropdown .filename i { - color: #002e6e; - margin: 0 20px 0 20px; -} -.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .accordion-dropdown section .dropdown .filename span { - width: 100%; - font-size: 18px; - line-height: 1; - color: #002680; -} -.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .accordion-dropdown section .dropdown .filename.selected span, -.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .accordion-dropdown section .dropdown .filename.selected i { - color: #4b4b4b; -} -.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .accordion-dropdown section .dropdown .filename.selected { - background-color: rgba(255, 255, 255, 0.8); -} -.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-footer { - height: 64px; - width: 100%; - border: solid 1px #dddddd; -} -.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-footer .header-title { - width: 360px; - height: 64px; - display: flex; - flex-flow: column; - align-items: center; - justify-content: center; -} -.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-footer .header-title .title { - font-size: 14px; - color: #878787; -} -.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-footer .header-title .data-temporal { - font-size: 18px; - line-height: 1; - color: #4b4b4b; + width: 80%; } .card-report-machine-status .reports-box-body-right { width: 327px; diff --git a/Step/wwwroot/package-lock.json b/Step/wwwroot/package-lock.json index 3a83dd3e..0f8329c5 100644 --- a/Step/wwwroot/package-lock.json +++ b/Step/wwwroot/package-lock.json @@ -1454,6 +1454,39 @@ "supports-color": "^5.3.0" } }, + "chart.js": { + "version": "2.7.3", + "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-2.7.3.tgz", + "integrity": "sha512-3+7k/DbR92m6BsMUYP6M0dMsMVZpMnwkUyNSAbqolHKsbIzH2Q4LWVEHHYq7v0fmEV8whXE0DrjANulw9j2K5g==", + "requires": { + "chartjs-color": "^2.1.0", + "moment": "^2.10.2" + } + }, + "chartjs-color": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/chartjs-color/-/chartjs-color-2.2.0.tgz", + "integrity": "sha1-hKL7dVeH7YXDndbdjHsdiEKbrq4=", + "requires": { + "chartjs-color-string": "^0.5.0", + "color-convert": "^0.5.3" + }, + "dependencies": { + "color-convert": { + "version": "0.5.3", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-0.5.3.tgz", + "integrity": "sha1-vbbGnOZg+t/+CwAHzER+G59ygr0=" + } + } + }, + "chartjs-color-string": { + "version": "0.5.0", + "resolved": "https://registry.npmjs.org/chartjs-color-string/-/chartjs-color-string-0.5.0.tgz", + "integrity": "sha512-amWNvCOXlOUYxZVDSa0YOab5K/lmEhbFNKI55PWc4mlv28BDzA7zaoQTGxSBgJMHIW+hGX8YUrvw/FH4LyhwSQ==", + "requires": { + "color-name": "^1.0.0" + } + }, "chokidar": { "version": "2.0.4", "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-2.0.4.tgz", @@ -1615,8 +1648,7 @@ "color-name": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz", - "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=", - "dev": true + "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=" }, "color-string": { "version": "0.3.0", @@ -7805,6 +7837,11 @@ "resolved": "https://registry.npmjs.org/vue/-/vue-2.5.22.tgz", "integrity": "sha512-pxY3ZHlXNJMFQbkjEgGVMaMMkSV1ONpz+4qB55kZuJzyJOhn6MSy/YZdzhdnumegNzVTL/Dn3Pp4UrVBYt1j/g==" }, + "vue-chartjs": { + "version": "3.4.0", + "resolved": "https://registry.npmjs.org/vue-chartjs/-/vue-chartjs-3.4.0.tgz", + "integrity": "sha512-uikAXl66g49rawH7Uto3gKh/7vxflcd5xyYbnQVGKSYEh9VI9JGMZ1KNPAEr+8ViRd2FX1hPDVevKBONK6v1fw==" + }, "vue-class-component": { "version": "6.1.0", "resolved": "https://registry.npmjs.org/vue-class-component/-/vue-class-component-6.1.0.tgz", diff --git a/Step/wwwroot/package.json b/Step/wwwroot/package.json index e36c0215..5bd28523 100644 --- a/Step/wwwroot/package.json +++ b/Step/wwwroot/package.json @@ -10,20 +10,22 @@ }, "dependencies": { "axios": "0.17.1", + "brace": "0.11.1", + "chart.js": "^2.7.3", "izitoast": "1.2.0", "moment": "2.20.1", "sprintf-js": "1.1.1", "vee-validate": "2.0.3", "vue": "^2.5.2", + "vue-chartjs": "^3.4.0", "vue-class-component": "6.1.0", + "vue-drag-drop": "1.1.0", "vue-property-decorator": "6.0.0", "vue-router": "^3.0.1", - "vuex": "3.0.1", - "vue-drag-drop": "1.1.0", "vue-smooth-dnd": "0.2.1", "vue2-ace-editor": "0.0.11", - "brace": "0.11.1", - "vue2-datepicker": "2.6.2" + "vue2-datepicker": "2.6.2", + "vuex": "3.0.1" }, "devDependencies": { "autoprefixer": "^7.1.2", diff --git a/Step/wwwroot/src/@types/report.cs.d.ts b/Step/wwwroot/src/@types/report.cs.d.ts index 443929ba..d5902ae1 100644 --- a/Step/wwwroot/src/@types/report.cs.d.ts +++ b/Step/wwwroot/src/@types/report.cs.d.ts @@ -5,4 +5,10 @@ declare module server { productedPieces: number, discardedPieces: number } + + export interface pieChartData { + stop: number, + run: number, + idle: number + } } \ No newline at end of file diff --git a/Step/wwwroot/src/app_modules/reports/components/card-report-machine-status.ts b/Step/wwwroot/src/app_modules/reports/components/card-report-machine-status.ts index e3d95e16..bd365289 100644 --- a/Step/wwwroot/src/app_modules/reports/components/card-report-machine-status.ts +++ b/Step/wwwroot/src/app_modules/reports/components/card-report-machine-status.ts @@ -10,6 +10,9 @@ import moment from "moment"; import { ModalHelper } from "src/components/modals"; import { ReportGetters } from "@/src/store/report.store"; +import Chart from "chart.js"; +import { reportService } from "../../../services/reportService"; + declare let $: any; @Component({ components: { datePicker: DatePicker, cardReport: cardReport, accordionDropdown: accordionDropdown, accordion: Accordion } }) export default class CardReportMachineStatus extends Vue { @@ -42,7 +45,6 @@ export default class CardReportMachineStatus extends Vue { } public selectedTab: string = "Production"; - selectDiagram: boolean = false; selectMoreFilter: boolean = false; selectTable: boolean = true; users: Array = []; @@ -53,6 +55,10 @@ export default class CardReportMachineStatus extends Vue { return (this.$store.getters as ReportGetters).getReportData(); } + get dataPieChart(): server.pieChartData{ + return (this.$store.getters as ReportGetters).getPieChartData(); + } + get paginator() { let min = Math.max(this.selectedPage - 4, 0); @@ -70,6 +76,8 @@ export default class CardReportMachineStatus 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.PieChart(this.filter.interval); + this.buildChart(); } public selectTab(value) { @@ -79,22 +87,6 @@ export default class CardReportMachineStatus extends Vue { 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; @@ -120,6 +112,60 @@ export default class CardReportMachineStatus extends Vue { debugger this.selectedPage = Math.min(Math.max(page,1), this.paginationData.pages); } + + + buildChart(){ + let $this = this; + let dataNumber: Array = []; + let dataString: Array = []; + + + var result2 = Object.keys(this.dataPieChart).map(function(key,value,a) { + dataString = a; + dataNumber.push($this.dataPieChart[key]); + }); + + + let ctx = document.getElementById("myChart"); + + let options = { + cutoutPercentage: 0, + responsive: true, + aspectRatio: 1, + maintainAspectRatio: true, + legend: { + display: true, + labels: { + fontSize:18 + } + }, + layout: { + padding: { + left: 50, + right: 0, + top: 0, + bottom: 0 + } + } + } + + let data = { + datasets:[{ + data:dataNumber, + backgroundColor: [ + "#f5ec45", + '#d62e42', + '#6cb432' + ] + }], + labels: dataString + } + let myPieChart = new Chart(ctx,{ + type: 'pie', + data: data, + options: options + },); + } } diff --git a/Step/wwwroot/src/app_modules/reports/components/card-report-machine-status.vue b/Step/wwwroot/src/app_modules/reports/components/card-report-machine-status.vue index 6839603f..7803b252 100644 --- a/Step/wwwroot/src/app_modules/reports/components/card-report-machine-status.vue +++ b/Step/wwwroot/src/app_modules/reports/components/card-report-machine-status.vue @@ -1,122 +1,32 @@