Egalware/cms_thermo_active
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

pie chart

Browse Source
This commit is contained in:
Alessandro
2019-02-12 18:04:03 +01:00
parent 5c536ed0ba
commit 64852d23ae
10 changed files with 149 additions and 758 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Step/wwwroot/assets/styles/base/card.less
+5 -354
View File
@@ -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%;
}
}
}
Step/wwwroot/assets/styles/style.css
+3 -278
View File
@@ -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;
Step/wwwroot/package-lock.json
Generated
+39 -2
View File
@@ -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",
Step/wwwroot/package.json
+6 -4
View File
@@ -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",
Step/wwwroot/src/@types/report.cs.d.ts
Vendored
+6
View File
@@ -5,4 +5,10 @@ declare module server {
productedPieces: number,
discardedPieces: number
}
export interface pieChartData {
stop: number,
run: number,
idle: number
}
}
Step/wwwroot/src/app_modules/reports/components/card-report-machine-status.ts
+63 -17
View File
@@ -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<any> = [];
@@ -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<number> = [];
let dataString: Array<string> = [];
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
},);
}
}
Step/wwwroot/src/app_modules/reports/components/card-report-machine-status.vue
+7 -97
View File
@@ -1,122 +1,32 @@
<template>
<div class="card-report-machine-status">
<div class="reports-box-body-left">
<div class="body-left-header" v-if="selectDiagram">
<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>
<!-- <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>
<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 :style="{width:(100/visibleColumns.length)+'%'}" v-if="isVisible('ProgramName')">{{'reports_table_program_name' | localize("Nome programma")}}</th>
<th :style="{width:(100/visibleColumns.length)+'%'}" v-if="isVisible('Dimensions')">{{'reports_table_dimensions' | localize("Dimensioni")}}</th>
<th :style="{width:(100/visibleColumns.length)+'%'}" v-if="isVisible('Quantity')">{{'reports_table_quantity' | localize("Quantity")}}</th>
<th :style="{width:(100/visibleColumns.length)+'%'}" v-if="isVisible('StartTime')">{{'reports_table_start_now' | localize("Ora inizio")}}</th>
<th :style="{width:(100/visibleColumns.length)+'%'}" v-if="isVisible('EndTime')">{{'reports_table_end_time' | localize("Ora fine")}}</th>
<th :style="{width:(100/visibleColumns.length)+'%'}" v-if="isVisible('Date')">{{'reports_table_date' | localize("Data")}}</th>
<th :style="{width:(100/visibleColumns.length)+'%'}" v-if="isVisible('EffectiveTime')">{{'reports_table_effective_time' | localize("T effettivo")}}</th>
<th :style="{width:(100/visibleColumns.length)+'%'}" v-if="isVisible('AverageTime')">{{'reports_table_average_time' | localize("T medio")}}</th>
<th :style="{width:(100/visibleColumns.length)+'%'}" v-if="isVisible('TheoreticalTime')">{{'reports_table_theoretical_time' | localize("T teorico")}}</th>
<th :style="{width:(100/visibleColumns.length)+'%'}" v-if="isVisible('Deviation')">{{'reports_table_deviation' | localize("Scostamento")}}</th>
<th :style="{width:(100/visibleColumns.length)+'%'}" v-if="isVisible('Quality')">{{'reports_table_quality' | localize("Qualità")}}</th>
<th :style="{width:(100/visibleColumns.length)+'%'}" v-if="isVisible('OperatorName')">{{'reports_table_operator_name' | localize("Nome operatore")}}</th>
<!-- <th v-if="isVisible('Shift')">{{'reports_table_shift' | localize("Turno")}}</th> -->
<th @click="openModalSelectField()"><i class="fa fa-angle-double-right"></i></th>
</tr>
</thead>
<tbody>
<tr>
<td :style="{width:(100/visibleColumns.length)+'%'}" v-if="isVisible('ProgramName')">Finestra02.pgm</td>
<td :style="{width:(100/visibleColumns.length)+'%'}" v-if="isVisible('Dimensions')">X: 1210; Y:900; Z: 63</td>
<td :style="{width:(100/visibleColumns.length)+'%'}" v-if="isVisible('Quantity')">1</td>
<td :style="{width:(100/visibleColumns.length)+'%'}" v-if="isVisible('StartTime')">11:25:00</td>
<td :style="{width:(100/visibleColumns.length)+'%'}" v-if="isVisible('EndTime')">13:10:00</td>
<td :style="{width:(100/visibleColumns.length)+'%'}" v-if="isVisible('Date')">12/04/2017</td>
<td :style="{width:(100/visibleColumns.length)+'%'}" v-if="isVisible('EffectiveTime')">01:45:00</td>
<td :style="{width:(100/visibleColumns.length)+'%'}" v-if="isVisible('AverageTime')">01:25:00</td>
<td :style="{width:(100/visibleColumns.length)+'%'}" v-if="isVisible('TheoreticalTime')">01:20:00</td>
<td :style="{width:(100/visibleColumns.length)+'%'}" v-if="isVisible('Deviation')" :class="{'green': false, 'red': true}">+00:20:00</td>
<td :style="{width:(100/visibleColumns.length)+'%'}" v-if="isVisible('Quality')">Buono</td>
<td :style="{width:(100/visibleColumns.length)+'%'}" v-if="isVisible('OperatorName')">Nome utente</td>
<!-- <td v-if="isVisible('Shift')">1°</td> -->
<td></td>
</tr>
</tbody>
</table>
<div class="pagination">
<button @click="selectPage(selectedPage-1)"><i class="fa fa-angle-double-left"></i></button>
<button class="page" :class="{active: selectedPage == paginator.min + p}"
v-for="(p, idx) in paginator.count" :key="'page' + idx"
@click="selectPage(paginator.min + p)">{{paginator.min + p}}</button>
<button @click="selectPage(selectedPage+1)"><i class="fa fa-angle-double-right"></i></button>
</div>
</div>
<canvas id="myChart" width="1405" height="681px"></canvas>
</div>
</div>
</div>
<div class="reports-box-body-right">
<div class="body-right-header">
<div class="body-right-header-left">
<!-- <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> -->
<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>
Step/wwwroot/src/app_modules/reports/components/reports.ts
+1 -1
View File
@@ -40,7 +40,7 @@ export default class Reports extends Vue {
};
public selectedTab: string = "Production";
public selectedTab: string = "MachineStatus";
selectDiagram: boolean = false;
selectMoreFilter: boolean = false;
selectTable: boolean = true;
Step/wwwroot/src/services/reportService.ts
+5 -2
View File
@@ -11,12 +11,15 @@ export class ReportService extends baseRestService {
return result;
}
async PieChart(filterInterval: Array<string>): Promise<any> {
async PieChart(filterInterval: Array<Date>): Promise<any> {
let filter = {
startDate: filterInterval[0],
endDate: filterInterval[1]
}
return await this.Post<any>('/api/report/pieChart',filter,true);
let result = await this.Post<any>('/api/report/pieChart',filter,true);
reportActions.updateReportPieChart(store,result);
return result;
}
async TimeLine(filterInterval: Array<string>): Promise<any> {
Step/wwwroot/src/store/report.store.ts
+14 -3
View File
@@ -1,32 +1,43 @@
export interface ReportStoreModel {
reportData: server.reportData
reportPieChart: server.pieChartData
}
export interface ReportActions {
updateReportData(context, model: server.reportData);
updateReportPieChart(context, model: server.pieChartData);
}
export interface ReportGetters{
getReportData: () => server.reportData;
getPieChartData: () => server.pieChartData;
}
export const reportStore = {
state: {
reportData: {},
reportPieChart: {}
} as ReportStoreModel,
getters:{
getReportData: (state) => (): server.reportData => (state as ReportStoreModel).reportData
getReportData: (state) => (): server.reportData => (state as ReportStoreModel).reportData,
getPieChartData: (state) => (): server.pieChartData => (state as ReportStoreModel).reportPieChart
},
mutations: {
UpdateReportData(store, model: server.reportData){
store.reportData = model;
},
UpdateReportPieChart(store, model: server.pieChartData){
store.reportPieChart = model;
}
},
actions: {
updateReportData(context, model: server.reportData){
context.commit("UpdateReportData", model);
},
context.commit("UpdateReportData", model);
},
updateReportPieChart(context, model: server.pieChartData){
context.commit("UpdateReportPieChart", model);
}
} as ReportActions
}