Commit bugfix grafica WP10
This commit is contained in:
Giacomo Canonico
+1264
-1033
File diff suppressed because it is too large
Load Diff
@@ -2393,8 +2393,31 @@
|
||||
|
||||
tbody {
|
||||
display: block;
|
||||
height: 560px;
|
||||
width: 1431px;
|
||||
height: 552px;
|
||||
width: 1420px;
|
||||
overflow-y: auto;
|
||||
padding-right: 10px;
|
||||
|
||||
|
||||
&::-webkit-scrollbar{
|
||||
width: 16px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track{
|
||||
margin-bottom: 4px;
|
||||
margin-top: 4px;
|
||||
background-color: #E5E5E5;
|
||||
border-radius: 15px;
|
||||
box-shadow: inset 0 1px 3px 0 #9F9F9F;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb{
|
||||
width: 16px;
|
||||
background: #9F9F9F;
|
||||
border: 4px solid #E5E5E5;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
|
||||
tr {
|
||||
// cursor: pointer;
|
||||
@@ -2464,6 +2487,17 @@
|
||||
button {
|
||||
width: 60px;
|
||||
padding: 0px;
|
||||
|
||||
&.disabled {
|
||||
opacity: .65;
|
||||
cursor: default;
|
||||
box-shadow: none !important;
|
||||
pointer-events: none;
|
||||
|
||||
i.fa {
|
||||
color: #838383;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.freespace {
|
||||
@@ -4874,10 +4908,21 @@
|
||||
padding-left: 16px;
|
||||
cursor: pointer;
|
||||
|
||||
span {
|
||||
width: 100%;
|
||||
div.title {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
|
||||
span {
|
||||
display: block;
|
||||
flex: 0 1 auto;
|
||||
align-content: center;
|
||||
text-align: left;
|
||||
margin-right: 7px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.expander {
|
||||
margin: 0 12px;
|
||||
line-height: 28px;
|
||||
@@ -4929,7 +4974,7 @@
|
||||
|
||||
.custom-checkbox {
|
||||
label {
|
||||
background-color: @color-background-white !important;
|
||||
background-color: @color-background-white !important;
|
||||
border: solid 1px @color-clear-blue;
|
||||
}
|
||||
}
|
||||
@@ -5042,16 +5087,15 @@
|
||||
|
||||
.timeline-chart-header-item {
|
||||
flex: 1 1 auto;
|
||||
// font-family: WorkSans;
|
||||
font-size: 12px;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-stretch: normal;
|
||||
line-height: 1.43;
|
||||
letter-spacing: normal;
|
||||
text-align: center;
|
||||
color: @color-greyish-brown;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
|
||||
&:first-child {
|
||||
border-right: solid 1px #dddddd;
|
||||
@@ -5062,11 +5106,22 @@
|
||||
}
|
||||
|
||||
label {
|
||||
position: relative;
|
||||
line-height: 164px;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
bottom: 4px;
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
|
||||
&.rotate {
|
||||
display: block;
|
||||
width: 50px;
|
||||
overflow: hidden;
|
||||
text-align: left;
|
||||
position: absolute;
|
||||
bottom: 20px;
|
||||
left: -10px;
|
||||
transform: rotate(-78deg);
|
||||
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
|
||||
}
|
||||
|
||||
@@ -35,6 +35,8 @@
|
||||
@import "scada.less";
|
||||
@import "report.less";
|
||||
@import "users.less";
|
||||
@import "tooltip.less";
|
||||
|
||||
|
||||
@background-color: rgb(216, 216, 216);
|
||||
@handle-width: 48px;
|
||||
@@ -210,7 +212,7 @@ body {
|
||||
width: @spinner-loading-height;
|
||||
height: @spinner-loading-width;
|
||||
top: calc(~'50%' - @spinner-loading-height /2);
|
||||
left: calc(~'50%' - @spinner-loading-width /2);
|
||||
left: calc(~'50%' - @spinner-loading-width /2);
|
||||
text-align: center;
|
||||
line-height: @spinner-loading-height;
|
||||
font-size: @spinner-loading-height/2;
|
||||
|
||||
@@ -159,11 +159,10 @@
|
||||
color: @color-warm-grey;
|
||||
padding: 0;
|
||||
.header {
|
||||
height: 63px;
|
||||
height: 62px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 16px;
|
||||
font-size: 20px;
|
||||
padding-left: 14px;
|
||||
font-size: 16px;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
@@ -173,7 +172,6 @@
|
||||
text-align: left;
|
||||
color: @color-darkish-blue;
|
||||
|
||||
|
||||
label {
|
||||
width: 234px;
|
||||
}
|
||||
@@ -191,9 +189,9 @@
|
||||
cursor: pointer;
|
||||
z-index: 1000;
|
||||
.fa {
|
||||
display: flex;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin: auto;
|
||||
margin-right: auto;
|
||||
margin-top: -1px;
|
||||
}
|
||||
|
||||
&:active{
|
||||
@@ -388,11 +386,10 @@
|
||||
}
|
||||
|
||||
.header {
|
||||
height: 63px;
|
||||
height: 62px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 16px;
|
||||
font-size: 20px;
|
||||
padding-left: 14px;
|
||||
font-size: 16px;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
@@ -420,9 +417,9 @@
|
||||
cursor: pointer;
|
||||
z-index: 1000;
|
||||
.fa {
|
||||
display: flex;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin: auto;
|
||||
margin-right: auto;
|
||||
margin-top: -1px;
|
||||
}
|
||||
|
||||
&:active{
|
||||
@@ -478,61 +475,3 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
// .card-report-tooltip-header{
|
||||
// height: 63px;
|
||||
// border-bottom: 2px solid #d8d8d8;
|
||||
// display: flex;
|
||||
// align-items: center;
|
||||
// padding-left: 16px;
|
||||
// font-size: 20px;
|
||||
// color: @color-darkish-blue;
|
||||
// label{
|
||||
// width: 234px;
|
||||
// }
|
||||
// button.close {
|
||||
// display: flex;
|
||||
// width: 28px;
|
||||
// height: 28px;
|
||||
// border-radius: 50%;
|
||||
// border: none;
|
||||
// background-color: #002680;
|
||||
// color: #fff;
|
||||
// font-size: 16px;
|
||||
// float: right;
|
||||
// cursor: pointer;
|
||||
// .fa {
|
||||
// display: flex;
|
||||
// margin-left: auto;
|
||||
// margin-right: auto;
|
||||
// }
|
||||
// }
|
||||
// button.close:active {
|
||||
// background-color: @color-clear-blue ;
|
||||
// color: #fff;
|
||||
// }
|
||||
// }
|
||||
|
||||
// .card-report-tooltip-body{
|
||||
// height: calc(~"100% - 65px");
|
||||
// display: flex;
|
||||
// flex-flow: row;
|
||||
// background-color: @color-white2;
|
||||
// }
|
||||
// .card-report-tooltip-body-left, .card-report-tooltip-body-right{
|
||||
// display: flex;
|
||||
// flex-flow: column;
|
||||
// width: 50%;
|
||||
// align-items: center;
|
||||
// justify-content: center;
|
||||
// label:first-child{
|
||||
// font-size: 18px;
|
||||
// font-weight: normal;
|
||||
// color: @color-warm-grey;
|
||||
// }
|
||||
// label{
|
||||
// font-size: 18px;
|
||||
// font-weight: 800;
|
||||
// color: @color-greyish-brown;
|
||||
// }
|
||||
// }
|
||||
/**END - TOOLTIP COLUMN CHART PRODUZIONE**/
|
||||
|
||||
@@ -5017,8 +5017,27 @@ footer .container button.big:before {
|
||||
max-height: 64px;
|
||||
}
|
||||
.alarm-history-container .alarm-history-body .alarm-history-body-left .alarm-history-table tbody {
|
||||
height: 560px;
|
||||
width: 1241px;
|
||||
display: block;
|
||||
height: 552px;
|
||||
width: 1230px;
|
||||
overflow-y: auto;
|
||||
padding-right: 10px;
|
||||
}
|
||||
.alarm-history-container .alarm-history-body .alarm-history-body-left .alarm-history-table tbody::-webkit-scrollbar {
|
||||
width: 16px;
|
||||
}
|
||||
.alarm-history-container .alarm-history-body .alarm-history-body-left .alarm-history-table tbody::-webkit-scrollbar-track {
|
||||
margin-bottom: 4px;
|
||||
margin-top: 4px;
|
||||
background-color: #E5E5E5;
|
||||
border-radius: 15px;
|
||||
box-shadow: inset 0 1px 3px 0 #9F9F9F;
|
||||
}
|
||||
.alarm-history-container .alarm-history-body .alarm-history-body-left .alarm-history-table tbody::-webkit-scrollbar-thumb {
|
||||
width: 16px;
|
||||
background: #9F9F9F;
|
||||
border: 4px solid #E5E5E5;
|
||||
border-radius: 15px;
|
||||
}
|
||||
.alarm-history-container .alarm-history-body .alarm-history-body-left .alarm-history-table tbody tr {
|
||||
cursor: pointer;
|
||||
@@ -5087,6 +5106,15 @@ footer .container button.big:before {
|
||||
width: 60px;
|
||||
padding: 0px;
|
||||
}
|
||||
.alarm-history-container .alarm-history-body .alarm-history-body-left .alarm-history-table tfoot tr td div.group-label-button button.disabled {
|
||||
opacity: .65;
|
||||
cursor: default;
|
||||
box-shadow: none !important;
|
||||
pointer-events: none;
|
||||
}
|
||||
.alarm-history-container .alarm-history-body .alarm-history-body-left .alarm-history-table tfoot tr td div.group-label-button button.disabled i.fa {
|
||||
color: #838383;
|
||||
}
|
||||
.alarm-history-container .alarm-history-body .alarm-history-body-left .alarm-history-table tfoot tr td div.group-label-button .freespace {
|
||||
width: 60px;
|
||||
display: inline-block;
|
||||
@@ -8784,8 +8812,26 @@ footer .container button.big:before {
|
||||
}
|
||||
.card-report-production .reports-box-body-left .body-left-center .body-left-center-container tbody {
|
||||
display: block;
|
||||
height: 560px;
|
||||
width: 1431px;
|
||||
height: 552px;
|
||||
width: 1420px;
|
||||
overflow-y: auto;
|
||||
padding-right: 10px;
|
||||
}
|
||||
.card-report-production .reports-box-body-left .body-left-center .body-left-center-container tbody::-webkit-scrollbar {
|
||||
width: 16px;
|
||||
}
|
||||
.card-report-production .reports-box-body-left .body-left-center .body-left-center-container tbody::-webkit-scrollbar-track {
|
||||
margin-bottom: 4px;
|
||||
margin-top: 4px;
|
||||
background-color: #E5E5E5;
|
||||
border-radius: 15px;
|
||||
box-shadow: inset 0 1px 3px 0 #9F9F9F;
|
||||
}
|
||||
.card-report-production .reports-box-body-left .body-left-center .body-left-center-container tbody::-webkit-scrollbar-thumb {
|
||||
width: 16px;
|
||||
background: #9F9F9F;
|
||||
border: 4px solid #E5E5E5;
|
||||
border-radius: 15px;
|
||||
}
|
||||
.card-report-production .reports-box-body-left .body-left-center .body-left-center-container tbody tr {
|
||||
height: 64px;
|
||||
@@ -8844,6 +8890,15 @@ footer .container button.big:before {
|
||||
width: 60px;
|
||||
padding: 0px;
|
||||
}
|
||||
.card-report-production .reports-box-body-left .body-left-center .body-left-center-container tfoot tr td div.group-label-button button.disabled {
|
||||
opacity: .65;
|
||||
cursor: default;
|
||||
box-shadow: none !important;
|
||||
pointer-events: none;
|
||||
}
|
||||
.card-report-production .reports-box-body-left .body-left-center .body-left-center-container tfoot tr td div.group-label-button button.disabled i.fa {
|
||||
color: #838383;
|
||||
}
|
||||
.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;
|
||||
@@ -10925,8 +10980,17 @@ footer .container button.big:before {
|
||||
padding-left: 16px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-header .body-left-center-left .accordion-dropdown header span {
|
||||
width: 100%;
|
||||
.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-header .body-left-center-left .accordion-dropdown header div.title {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-header .body-left-center-left .accordion-dropdown header div.title span {
|
||||
display: block;
|
||||
flex: 0 1 auto;
|
||||
align-content: center;
|
||||
text-align: left;
|
||||
margin-right: 7px;
|
||||
}
|
||||
.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-header .body-left-center-left .accordion-dropdown header .expander {
|
||||
margin: 0 12px;
|
||||
@@ -11069,11 +11133,11 @@ footer .container button.big:before {
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-stretch: normal;
|
||||
line-height: 1.43;
|
||||
letter-spacing: normal;
|
||||
text-align: center;
|
||||
color: #4b4b4b;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-header .body-left-center-right .timeline-chart-header .timeline-chart-header-items .timeline-chart-header-item:first-child {
|
||||
border-right: solid 1px #dddddd;
|
||||
@@ -11082,11 +11146,22 @@ footer .container button.big:before {
|
||||
border-left: solid 1px #dddddd;
|
||||
}
|
||||
.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-header .body-left-center-right .timeline-chart-header .timeline-chart-header-items .timeline-chart-header-item label {
|
||||
position: relative;
|
||||
line-height: 164px;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
bottom: 4px;
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
}
|
||||
.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-header .body-left-center-right .timeline-chart-header .timeline-chart-header-items .timeline-chart-header-item label.rotate {
|
||||
display: block;
|
||||
width: 50px;
|
||||
overflow: hidden;
|
||||
text-align: left;
|
||||
position: absolute;
|
||||
bottom: 20px;
|
||||
left: -10px;
|
||||
transform: rotate(-78deg);
|
||||
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
|
||||
}
|
||||
@@ -19543,6 +19618,391 @@ footer .container button.big:before {
|
||||
width: 100%;
|
||||
display: table;
|
||||
}
|
||||
.tooltip {
|
||||
display: block !important;
|
||||
z-index: 10000;
|
||||
}
|
||||
.tooltip .wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: solid 2px #1791ff;
|
||||
background-color: #fff;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.tooltip .wrapper .tooltip-arrow {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
position: absolute;
|
||||
margin: 5px;
|
||||
border-color: #1791ff;
|
||||
z-index: 1;
|
||||
}
|
||||
.tooltip .wrapper .tooltip-inner {
|
||||
color: #878787;
|
||||
padding: 5px 10px 4px;
|
||||
}
|
||||
.tooltip[x-placement^="top"] {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.tooltip[x-placement^="top"] .tooltip-arrow {
|
||||
border-width: 18px 18px 0 18px;
|
||||
border-left-color: transparent !important;
|
||||
border-right-color: transparent !important;
|
||||
border-bottom-color: transparent !important;
|
||||
bottom: -16px;
|
||||
left: calc(45%);
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.tooltip[x-placement^="top"] .tooltip-arrow::before {
|
||||
border-color: #f1f1f1 !important;
|
||||
border-width: 15px 14px 0 14px;
|
||||
border-left-color: transparent !important;
|
||||
border-right-color: transparent !important;
|
||||
border-bottom-color: transparent !important;
|
||||
bottom: 3px;
|
||||
left: -14px;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.tooltip[x-placement^="bottom"] {
|
||||
margin-top: 5px;
|
||||
}
|
||||
.tooltip[x-placement^="bottom"] .tooltip-arrow {
|
||||
border-width: 0 18px 18px 18px;
|
||||
border-left-color: transparent !important;
|
||||
border-right-color: transparent !important;
|
||||
border-top-color: transparent !important;
|
||||
top: -16px;
|
||||
left: calc(45%);
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.tooltip[x-placement^="bottom"] .tooltip-arrow::before {
|
||||
border-width: 0 14px 15px 14px;
|
||||
border-left-color: transparent !important;
|
||||
border-right-color: transparent !important;
|
||||
border-top-color: transparent !important;
|
||||
top: 3px;
|
||||
left: -14px;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.tooltip.popover .wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: solid 2px #1791ff;
|
||||
background-color: #fff;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.tooltip.popover .wrapper .popover-arrow {
|
||||
border-color: #1791ff;
|
||||
}
|
||||
.tooltip.popover .wrapper .popover-arrow::before {
|
||||
content: '';
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
position: absolute;
|
||||
border-color: #fff;
|
||||
z-index: 1;
|
||||
}
|
||||
.tooltip.popover .wrapper .popover-inner {
|
||||
background: #fff;
|
||||
color: #878787;
|
||||
padding: 0;
|
||||
}
|
||||
.tooltip.popover .wrapper .popover-inner .header {
|
||||
height: 62px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 14px;
|
||||
font-size: 16px;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-stretch: normal;
|
||||
line-height: normal;
|
||||
letter-spacing: normal;
|
||||
text-align: left;
|
||||
color: #002680;
|
||||
}
|
||||
.tooltip.popover .wrapper .popover-inner .header label {
|
||||
width: 234px;
|
||||
}
|
||||
.tooltip.popover .wrapper .popover-inner .header button.close {
|
||||
display: flex;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 50%;
|
||||
border: none;
|
||||
background-color: #002680;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
float: right;
|
||||
cursor: pointer;
|
||||
z-index: 1000;
|
||||
}
|
||||
.tooltip.popover .wrapper .popover-inner .header button.close .fa {
|
||||
margin: auto;
|
||||
margin-right: auto;
|
||||
margin-top: -1px;
|
||||
}
|
||||
.tooltip.popover .wrapper .popover-inner .header button.close:active {
|
||||
background-color: #1791ff;
|
||||
color: #fff;
|
||||
}
|
||||
.tooltip.popover .wrapper .popover-inner .body {
|
||||
color: #878787;
|
||||
border-top: 2px solid #d8d8d8;
|
||||
}
|
||||
.tooltip.popover .wrapper .popover-inner .body .date {
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
padding: 15px 0px;
|
||||
color: #878787;
|
||||
}
|
||||
.tooltip.popover .wrapper .popover-inner .body .date .column {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
flex: 1 1 auto;
|
||||
width: 50%;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.tooltip.popover .wrapper .popover-inner .body .date .column span.title {
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-stretch: normal;
|
||||
line-height: normal;
|
||||
letter-spacing: normal;
|
||||
text-align: center;
|
||||
color: #878787;
|
||||
}
|
||||
.tooltip.popover .wrapper .popover-inner .body .date .column span.value {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-stretch: normal;
|
||||
line-height: 1.43;
|
||||
letter-spacing: normal;
|
||||
text-align: left;
|
||||
color: #4b4b4b;
|
||||
}
|
||||
.tooltip.popover .wrapper .popover-inner .body .footer {
|
||||
padding: 15px 0px;
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
background-color: #f1f1f1;
|
||||
color: #878787;
|
||||
}
|
||||
.tooltip.popover .wrapper .popover-inner .body .footer .column {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
flex: 1 1 auto;
|
||||
width: 50%;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.tooltip.popover .wrapper .popover-inner .body .footer .column span.title {
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-stretch: normal;
|
||||
line-height: normal;
|
||||
letter-spacing: normal;
|
||||
text-align: center;
|
||||
color: #878787;
|
||||
}
|
||||
.tooltip.popover .wrapper .popover-inner .body .footer .column span.value {
|
||||
display: block;
|
||||
font-size: 20px;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-stretch: normal;
|
||||
line-height: 0.9;
|
||||
letter-spacing: normal;
|
||||
text-align: center;
|
||||
color: #4b4b4b;
|
||||
}
|
||||
.tooltip[aria-hidden='true'] {
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
transition: opacity .15s, visibility .15s;
|
||||
}
|
||||
.tooltip[aria-hidden='false'] {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
transition: opacity .15s;
|
||||
}
|
||||
/**START - TOOLTIP COLUMN CHART PRODUZIONE**/
|
||||
.card-report-tooltip-top {
|
||||
opacity: 1;
|
||||
position: absolute;
|
||||
width: 288px;
|
||||
border: solid 2px #1791ff;
|
||||
border-radius: 2px;
|
||||
background-color: #fff;
|
||||
z-index: 100;
|
||||
}
|
||||
.card-report-tooltip-top:before {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 138px;
|
||||
bottom: 100%;
|
||||
width: 4px;
|
||||
height: 0px;
|
||||
border: 14px solid transparent;
|
||||
border-bottom-color: #1791ff;
|
||||
}
|
||||
.card-report-tooltip-top:after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 141px;
|
||||
bottom: 100%;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border: 13px solid transparent;
|
||||
border-bottom-color: white;
|
||||
}
|
||||
.card-report-tooltip-bottom {
|
||||
opacity: 1;
|
||||
position: absolute;
|
||||
width: 288px;
|
||||
border: solid 2px #1791ff;
|
||||
border-radius: 2px;
|
||||
background-color: #fff;
|
||||
z-index: 100;
|
||||
}
|
||||
.card-report-tooltip-bottom:before {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 132px;
|
||||
top: 100%;
|
||||
width: 4px;
|
||||
height: 0px;
|
||||
border: 14px solid transparent;
|
||||
border-top-color: #1791ff;
|
||||
}
|
||||
.card-report-tooltip-bottom:after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 135px;
|
||||
top: 100%;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border: 13px solid transparent;
|
||||
border-top-color: #f1f1f1;
|
||||
}
|
||||
.card-report-tooltip-bottom,
|
||||
.card-report-tooltip-top {
|
||||
pointer-events: all !important;
|
||||
background: #fff;
|
||||
color: #878787;
|
||||
padding: 0;
|
||||
}
|
||||
.card-report-tooltip-bottom.hidden,
|
||||
.card-report-tooltip-top.hidden {
|
||||
visibility: hidden;
|
||||
}
|
||||
.card-report-tooltip-bottom .header,
|
||||
.card-report-tooltip-top .header {
|
||||
height: 62px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 14px;
|
||||
font-size: 16px;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-stretch: normal;
|
||||
line-height: normal;
|
||||
letter-spacing: normal;
|
||||
text-align: left;
|
||||
color: #002680;
|
||||
}
|
||||
.card-report-tooltip-bottom .header label,
|
||||
.card-report-tooltip-top .header label {
|
||||
width: 234px;
|
||||
}
|
||||
.card-report-tooltip-bottom .header button.close,
|
||||
.card-report-tooltip-top .header button.close {
|
||||
display: flex;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 50%;
|
||||
border: none;
|
||||
background-color: #002680;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
float: right;
|
||||
cursor: pointer;
|
||||
z-index: 1000;
|
||||
}
|
||||
.card-report-tooltip-bottom .header button.close .fa,
|
||||
.card-report-tooltip-top .header button.close .fa {
|
||||
margin: auto;
|
||||
margin-right: auto;
|
||||
margin-top: -1px;
|
||||
}
|
||||
.card-report-tooltip-bottom .header button.close:active,
|
||||
.card-report-tooltip-top .header button.close:active {
|
||||
background-color: #1791ff;
|
||||
color: #fff;
|
||||
}
|
||||
.card-report-tooltip-bottom .body,
|
||||
.card-report-tooltip-top .body {
|
||||
color: #878787;
|
||||
border-top: 2px solid #d8d8d8;
|
||||
}
|
||||
.card-report-tooltip-bottom .body .footer,
|
||||
.card-report-tooltip-top .body .footer {
|
||||
padding: 15px 0px;
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
background-color: #f1f1f1;
|
||||
color: #878787;
|
||||
}
|
||||
.card-report-tooltip-bottom .body .footer .column,
|
||||
.card-report-tooltip-top .body .footer .column {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
flex: 1 1 auto;
|
||||
width: 50%;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.card-report-tooltip-bottom .body .footer .column span.title,
|
||||
.card-report-tooltip-top .body .footer .column span.title {
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-stretch: normal;
|
||||
line-height: normal;
|
||||
letter-spacing: normal;
|
||||
text-align: center;
|
||||
color: #878787;
|
||||
}
|
||||
.card-report-tooltip-bottom .body .footer .column span.value,
|
||||
.card-report-tooltip-top .body .footer .column span.value {
|
||||
display: block;
|
||||
font-size: 20px;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-stretch: normal;
|
||||
line-height: 0.9;
|
||||
letter-spacing: normal;
|
||||
text-align: center;
|
||||
color: #4b4b4b;
|
||||
}
|
||||
a,
|
||||
a:visited,
|
||||
a:hover,
|
||||
|
||||
@@ -13,9 +13,8 @@
|
||||
<script src="Scripts/jquery.mousewheel.js"></script>
|
||||
<script src="Scripts/jquery.signalR-2.2.2.min.js"></script>
|
||||
<script src="Scripts/raphael-2.1.4.min.js"></script>
|
||||
<script src="Scripts/justgage.js"></script>
|
||||
<script src="signalr/hubs"></script>
|
||||
|
||||
|
||||
<link href="assets/styles/style.css" rel="stylesheet" />
|
||||
</head>
|
||||
|
||||
|
||||
+63
-64
@@ -1,65 +1,64 @@
|
||||
{
|
||||
"name": "step",
|
||||
"version": "1.0.0",
|
||||
"description": "step",
|
||||
"author": "Paolo Possanzini <paolo@teamdev.it>",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"build": "webpack",
|
||||
"dev": "webpack --watch"
|
||||
},
|
||||
"dependencies": {
|
||||
"axios": "0.17.1",
|
||||
"brace": "0.11.1",
|
||||
"chart.js": "^2.7.3",
|
||||
"izitoast": "1.2.0",
|
||||
"justgage": "^1.2.2",
|
||||
"moment": "2.20.1",
|
||||
"raphael": "^2.2.7",
|
||||
"sprintf-js": "1.1.1",
|
||||
"v-tooltip": "^2.0.0-rc.33",
|
||||
"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",
|
||||
"vue-smooth-dnd": "0.2.1",
|
||||
"vue2-ace-editor": "0.0.11",
|
||||
"vue2-datepicker": "2.6.2",
|
||||
"vuex": "3.0.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"autoprefixer": "^7.1.2",
|
||||
"babel-core": "^6.0.0",
|
||||
"babel-loader": "7.1.1",
|
||||
"babel-plugin-transform-decorators-legacy": "^1.3.4",
|
||||
"babel-plugin-transform-runtime": "^6.0.0",
|
||||
"babel-polyfill": "^6.23.0",
|
||||
"babel-preset-es2015": "^6.0.0",
|
||||
"babel-preset-stage-2": "^6.0.0",
|
||||
"babel-runtime": "^6.0.0",
|
||||
"babelify": "^7.2.0",
|
||||
"chalk": "^2.0.1",
|
||||
"copy-webpack-plugin": "^4.0.1",
|
||||
"css-loader": "^0.28.0",
|
||||
"eventsource-polyfill": "^0.9.6",
|
||||
"file-loader": "^1.1.4",
|
||||
"url-loader": "^0.5.8",
|
||||
"ts-loader": "3.1.1",
|
||||
"typescript": "2.6.1",
|
||||
"vue-loader": "^13.3.0",
|
||||
"vue-template-compiler": "^2.5.2",
|
||||
"webpack": "^3.6.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 4.0.0",
|
||||
"npm": ">= 3.0.0"
|
||||
},
|
||||
"browserslist": [
|
||||
"> 1%",
|
||||
"last 2 versions",
|
||||
"not ie <= 8"
|
||||
]
|
||||
}
|
||||
"name": "step",
|
||||
"version": "1.0.0",
|
||||
"description": "step",
|
||||
"author": "Paolo Possanzini <paolo@teamdev.it>",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"build": "webpack",
|
||||
"dev": "webpack --watch"
|
||||
},
|
||||
"dependencies": {
|
||||
"axios": "0.17.1",
|
||||
"brace": "0.11.1",
|
||||
"chart.js": "^2.7.3",
|
||||
"izitoast": "1.2.0",
|
||||
"moment": "2.20.1",
|
||||
"raphael": "^2.2.7",
|
||||
"sprintf-js": "1.1.1",
|
||||
"v-tooltip": "^2.0.0-rc.33",
|
||||
"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",
|
||||
"vue-smooth-dnd": "0.2.1",
|
||||
"vue2-ace-editor": "0.0.11",
|
||||
"vue2-datepicker": "2.6.2",
|
||||
"vuex": "3.0.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"autoprefixer": "^7.1.2",
|
||||
"babel-core": "^6.0.0",
|
||||
"babel-loader": "7.1.1",
|
||||
"babel-plugin-transform-decorators-legacy": "^1.3.4",
|
||||
"babel-plugin-transform-runtime": "^6.0.0",
|
||||
"babel-polyfill": "^6.23.0",
|
||||
"babel-preset-es2015": "^6.0.0",
|
||||
"babel-preset-stage-2": "^6.0.0",
|
||||
"babel-runtime": "^6.0.0",
|
||||
"babelify": "^7.2.0",
|
||||
"chalk": "^2.0.1",
|
||||
"copy-webpack-plugin": "^4.0.1",
|
||||
"css-loader": "^0.28.0",
|
||||
"eventsource-polyfill": "^0.9.6",
|
||||
"file-loader": "^1.1.4",
|
||||
"url-loader": "^0.5.8",
|
||||
"ts-loader": "3.1.1",
|
||||
"typescript": "2.6.1",
|
||||
"vue-loader": "^13.3.0",
|
||||
"vue-template-compiler": "^2.5.2",
|
||||
"webpack": "^3.6.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 4.0.0",
|
||||
"npm": ">= 3.0.0"
|
||||
},
|
||||
"browserslist": [
|
||||
"> 1%",
|
||||
"last 2 versions",
|
||||
"not ie <= 8"
|
||||
]
|
||||
}
|
||||
@@ -108,19 +108,18 @@
|
||||
<span v-for="(iduser) in row.users" class="users" :key="iduser">{{user(iduser).username}}</span>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td colspan="4">
|
||||
<div class="group-label-button">
|
||||
<button class="btn" @click="selectPage(paginator.min)"><i class="fa fa-angle-double-left"></i></button>
|
||||
<div class="group-label-button" v-if="data && data.length > 0">
|
||||
<button class="btn" :class="{'disabled': paginator.count <= 1}" @click="selectPage(paginator.min)"><i class="fa fa-angle-double-left"></i></button>
|
||||
<div class="freespace" v-for="(p, idx) in freeSpaseMinus" :key="'fakeMinus' + idx" > </div>
|
||||
<button class="btn" :class="{'btn-success': selectedPage == paginator.min + p}"
|
||||
v-for="(p, idx) in paginator.count" :key="'page' + idx"
|
||||
@click="selectPage(paginator.min + p)">{{paginator.min + p}}</button>
|
||||
<div class="freespace" v-for="(p, idx) in freeSpasePlus" :key="'fakePlus' + idx" > </div>
|
||||
<button class="btn" @click="selectPage(paginator.max)"><i class="fa fa-angle-double-right"></i></button>
|
||||
<button class="btn" :class="{'disabled': paginator.count <= 1}" @click="selectPage(paginator.max)"><i class="fa fa-angle-double-right"></i></button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
import Vue from "vue";
|
||||
import Component from "vue-class-component";
|
||||
import { cardReport } from "../../../modules/base-components/cards/index";
|
||||
import accordionDropdown from "../../../modules/base-components/accordion-dropdown.vue";
|
||||
import modalReportSelectColumn from "../../../modules/base-components/modal-report-select-column.vue";
|
||||
import { cardReport } from "src/modules/base-components/cards/index";
|
||||
import accordionDropdown from "src/modules/base-components/accordion-dropdown.vue";
|
||||
import modalReportSelectColumn from "src/modules/base-components/modal-report-select-column.vue";
|
||||
import { Accordion } from "src/modules/base-components";
|
||||
import { loginService } from "src/services";
|
||||
import DatePicker from "vue2-datepicker";
|
||||
@@ -12,12 +12,12 @@ import { ReportGetters } from "@/src/store/report.store";
|
||||
|
||||
import Chart from "chart.js";
|
||||
|
||||
declare var JustGage: any;
|
||||
import { reportService } from "../../../services/reportService";
|
||||
import { reportService } from "src/services/reportService";
|
||||
import { Watch } from "vue-property-decorator";
|
||||
import { DoughnutChart } from "src/components/doughnut-chart";
|
||||
|
||||
declare let $: any;
|
||||
@Component({ components: { datePicker: DatePicker, cardReport: cardReport, accordionDropdown: accordionDropdown, accordion: Accordion } })
|
||||
@Component({ components: { datePicker: DatePicker, cardReport: cardReport, accordionDropdown: accordionDropdown, accordion: Accordion, DoughnutChart } })
|
||||
export default class CardReportMachineStatus extends Vue {
|
||||
|
||||
lang = {
|
||||
@@ -87,7 +87,7 @@ export default class CardReportMachineStatus extends Vue {
|
||||
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.buildGage();
|
||||
|
||||
this.buildChart();
|
||||
}
|
||||
|
||||
@@ -109,9 +109,8 @@ export default class CardReportMachineStatus extends Vue {
|
||||
|
||||
async openModalSelectField() {
|
||||
this.visibleColumns = await ModalHelper.ShowModalAsync(modalReportSelectColumn, this.visibleColumns);
|
||||
|
||||
console.log(this.visibleColumns);
|
||||
}
|
||||
|
||||
public openSelectStateU() {
|
||||
if (!$('.checkboxesU').hasClass('checkboxesViewUser'))
|
||||
$('.checkboxesU').addClass('checkboxesViewUser');
|
||||
@@ -123,18 +122,6 @@ export default class CardReportMachineStatus extends Vue {
|
||||
this.selectedPage = Math.min(Math.max(page, 1), this.paginationData.pages);
|
||||
}
|
||||
|
||||
|
||||
|
||||
buildGage() {
|
||||
let p = new JustGage({
|
||||
id: "gauge",
|
||||
value: this.dataPieces.absoluteValue,
|
||||
min: 0,
|
||||
max: 100
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
buildChart() {
|
||||
let $this = this;
|
||||
let dataNumber: Array<number> = [];
|
||||
@@ -193,9 +180,9 @@ export default class CardReportMachineStatus extends Vue {
|
||||
|
||||
// import Vue from "vue";
|
||||
// import Component from "vue-class-component";
|
||||
// import {cardReport} from "../../../modules/base-components/cards/index";
|
||||
// import accordionDropdown from "../../../modules/base-components/accordion-dropdown.vue";
|
||||
// import modalReportSelectColumn from "../../../modules/base-components/modal-report-select-column.vue";
|
||||
// import {cardReport} from "src/modules/base-components/cards/index";
|
||||
// import accordionDropdown from "src/modules/base-components/accordion-dropdown.vue";
|
||||
// import modalReportSelectColumn from "src/modules/base-components/modal-report-select-column.vue";
|
||||
// import { Accordion } from "src/modules/base-components";
|
||||
// import { loginService } from "src/services";
|
||||
// import DatePicker from "vue2-datepicker";
|
||||
|
||||
@@ -34,7 +34,7 @@
|
||||
</div>
|
||||
<div class="body-right-card">
|
||||
<card-report :title="'Valore assoluto (%)'">
|
||||
<div id="gauge" class="gauge"></div>
|
||||
<doughnut-chart :value="dataPieces.absoluteValue" :angle-size="270" :interval="5"></doughnut-chart>
|
||||
</card-report>
|
||||
<card-report :title="'Valore assoluto'">
|
||||
<div class="rectangle_gray">
|
||||
@@ -96,4 +96,4 @@
|
||||
|
||||
</template>
|
||||
|
||||
<script src="./card-report-machine-status.ts" lang="ts"></script>
|
||||
<script src="./card-report-machine-status.ts" lang="ts"></script>
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
import Vue from "vue";
|
||||
import Component from "vue-class-component";
|
||||
import { cardReport } from "../../../modules/base-components/cards/index";
|
||||
import accordionDropdown from "../../../modules/base-components/accordion-dropdown.vue";
|
||||
import modalReportSelectColumn from "../../../modules/base-components/modal-report-select-column.vue";
|
||||
import { cardReport } from "src/modules/base-components/cards/index";
|
||||
import accordionDropdown from "src/modules/base-components/accordion-dropdown.vue";
|
||||
import modalReportSelectColumn from "src/modules/base-components/modal-report-select-column.vue";
|
||||
import { Accordion } from "src/modules/base-components";
|
||||
import { loginService } from "src/services";
|
||||
import DatePicker from "vue2-datepicker";
|
||||
@@ -12,14 +12,11 @@ import { ReportGetters } from "@/src/store/report.store";
|
||||
import { Watch } from "vue-property-decorator";
|
||||
|
||||
import Chart from "chart.js";
|
||||
import { reportService } from "../../../services/reportService";
|
||||
import { awaiter } from "../../../_base";
|
||||
import { toolingStore } from "@/src/store/tooling.store";
|
||||
|
||||
declare var JustGage: any;
|
||||
import { reportService } from "src/services/reportService";
|
||||
import { DoughnutChart } from "src/components/doughnut-chart";
|
||||
|
||||
declare let $: any;
|
||||
@Component({ components: { datePicker: DatePicker, cardReport: cardReport, accordionDropdown: accordionDropdown, accordion: Accordion } })
|
||||
@Component({ components: { datePicker: DatePicker, cardReport: cardReport, accordionDropdown: accordionDropdown, accordion: Accordion, DoughnutChart } })
|
||||
export default class CardReportProduction extends Vue {
|
||||
|
||||
lang = {
|
||||
@@ -117,7 +114,6 @@ export default class CardReportProduction extends Vue {
|
||||
// this.resultPrograms = await reportService.ProgramsReport(9,this.selectedPage,this.filter.nameProgram, this.filter.interval);
|
||||
// this.paginationData.pages = this.resultPrograms.pages;
|
||||
this.buildChart();
|
||||
this.buildGage();
|
||||
}
|
||||
|
||||
public selectTab(value) {
|
||||
@@ -127,16 +123,6 @@ export default class CardReportProduction extends Vue {
|
||||
return (moment() as any)._locale._longDateFormat.LT;
|
||||
}
|
||||
|
||||
|
||||
buildGage() {
|
||||
let p = new JustGage({
|
||||
id: "gauge",
|
||||
value: this.dataPieces.absoluteValue,
|
||||
min: 0,
|
||||
max: 100
|
||||
});
|
||||
}
|
||||
|
||||
viewDiagram() {
|
||||
if (!this.selectDiagram) {
|
||||
this.selectDiagram = true;
|
||||
@@ -226,7 +212,7 @@ export default class CardReportProduction extends Vue {
|
||||
(_self.$refs.tooltip_executed as HTMLElement).innerHTML = barSelected.quantity.toString();
|
||||
(_self.$refs.tooltip_frequency as HTMLElement).innerHTML = barSelected.frequency.toString();
|
||||
|
||||
|
||||
debugger;
|
||||
var positionY = this._chart.canvas.offsetTop;
|
||||
var positionX = this._chart.canvas.offsetLeft;
|
||||
if(tooltip.caretY > 350){
|
||||
|
||||
@@ -88,14 +88,14 @@
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td colspan="4">
|
||||
<div class="group-label-button">
|
||||
<button class="btn" @click="selectPage(paginator.min)"><i class="fa fa-angle-double-left"></i></button>
|
||||
<div class="group-label-button" v-if="programs && programs.length > 0">
|
||||
<button class="btn" :class="{'disabled': paginator.count <= 1}" @click="selectPage(paginator.min)"><i class="fa fa-angle-double-left"></i></button>
|
||||
<div class="freespace" v-for="(p, idx) in freeSpaseMinus" :key="'fakeMinus' + idx" > </div>
|
||||
<button class="btn" :class="{'btn-success': selectedPage == paginator.min + p}"
|
||||
v-for="(p, idx) in paginator.count" :key="'page' + idx"
|
||||
@click="selectPage(paginator.min + p)">{{paginator.min + p}}</button>
|
||||
<div class="freespace" v-for="(p, idx) in freeSpasePlus" :key="'fakePlus' + idx" > </div>
|
||||
<button class="btn" @click="selectPage(paginator.max)"><i class="fa fa-angle-double-right"></i></button>
|
||||
<button class="btn" :class="{'disabled': paginator.count <= 1}" @click="selectPage(paginator.max)"><i class="fa fa-angle-double-right"></i></button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
@@ -149,7 +149,7 @@
|
||||
</div>
|
||||
<div class="body-right-card">
|
||||
<card-report :title="'Valore assoluto (%)'">
|
||||
<div id="gauge" class="gauge"></div>
|
||||
<doughnut-chart :value="dataPieces.absoluteValue" :angle-size="270" :interval="5"></doughnut-chart>
|
||||
</card-report>
|
||||
<card-report :title="'Valore assoluto'">
|
||||
<div class="rectangle_gray">
|
||||
|
||||
@@ -6,17 +6,17 @@ import DatePicker from "vue2-datepicker";
|
||||
import { ReportGetters } from "src/store/report.store";
|
||||
import { reportService } from "src/services/reportService";
|
||||
import { TimeLineChartHeader, TimeLineChartRow } from "src/components/timeline-chart";
|
||||
import { DoughnutChart } from "src/components/doughnut-chart";
|
||||
|
||||
declare let $: any;
|
||||
declare var JustGage: any;
|
||||
|
||||
@Component({
|
||||
components: {
|
||||
datePicker: DatePicker,
|
||||
cardReport: cardReport,
|
||||
accordionDropdown: accordionDropdown,
|
||||
"timeline-chart-row": TimeLineChartRow,
|
||||
"timeline-chart-header": TimeLineChartHeader
|
||||
"timeline-chart-header": TimeLineChartHeader,
|
||||
DoughnutChart
|
||||
}
|
||||
})
|
||||
export default class CardReportTimeline extends Vue {
|
||||
@@ -61,8 +61,8 @@ export default class CardReportTimeline extends Vue {
|
||||
}
|
||||
};
|
||||
|
||||
private defaultStartDate: Date = new Date(2019, 1, 1); //new Date(new Date().setDate(new Date().getDate() - 6));
|
||||
private defaultEndDate: Date = new Date(2019, 1, 28); //new Date(new Date().setDate(new Date().getDate() + 1));
|
||||
private defaultStartDate: Date = new Date(new Date().setDate(new Date().getDate() - 6));
|
||||
private defaultEndDate: Date = new Date(new Date().setDate(new Date().getDate() + 1));
|
||||
|
||||
filter: {
|
||||
name: string,
|
||||
@@ -81,14 +81,13 @@ export default class CardReportTimeline extends Vue {
|
||||
startTime: Date;
|
||||
endTime: Date;
|
||||
} = {
|
||||
date: [new Date(2019, 1, 1), new Date(2019, 1, 28)],
|
||||
date: [new Date(new Date().setDate(new Date().getDate() - 6)), new Date(new Date().setDate(new Date().getDate() + 1))],
|
||||
startTime: null,
|
||||
endTime: null,
|
||||
};
|
||||
|
||||
async mounted() {
|
||||
this.filterIntervalChange(this.interval.date, null);
|
||||
this.buildGage();
|
||||
}
|
||||
|
||||
@Watch("filter.name", { immediate: true })
|
||||
@@ -139,15 +138,6 @@ export default class CardReportTimeline extends Vue {
|
||||
this.interval.date = [start, end];
|
||||
}
|
||||
|
||||
buildGage() {
|
||||
let p = new JustGage({
|
||||
id: "gauge",
|
||||
value: this.dataPieces.absoluteValue,
|
||||
min: 0,
|
||||
max: 100
|
||||
});
|
||||
}
|
||||
|
||||
async getData() {
|
||||
let occurrences = await reportService.TimeLine(this.filter.interval.map(x => x.toString()), this.filter.name);
|
||||
this.occurrences = {
|
||||
|
||||
@@ -31,9 +31,11 @@
|
||||
<div class="body-left-center-left">
|
||||
<accordion-dropdown>
|
||||
<template slot="header" v-if="filter.timelineMacro.length > 0">
|
||||
<div class="title">
|
||||
<span v-for="(item, index) in filter.timelineMacro" :key="item" >
|
||||
{{'report_state_'+item | localize(item)}}{{(index==filter.timelineMacro.length-1)?'':', '}}
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<template slot="header" v-else>
|
||||
<i>{{'report_timeline_filter_required' | localize("Abilita almeno un filtro di ricerca")}}</i>
|
||||
@@ -163,7 +165,7 @@
|
||||
</div>
|
||||
<div class="body-right-card">
|
||||
<card-report :title="'Valore assoluto (%)'">
|
||||
<div id="gauge" class="gauge"></div>
|
||||
<doughnut-chart :value="dataPieces.absoluteValue" :angle-size="270" :interval="5"></doughnut-chart>
|
||||
</card-report>
|
||||
<card-report :title="'Valore assoluto'">
|
||||
<div class="rectangle_gray">
|
||||
|
||||
@@ -0,0 +1,136 @@
|
||||
import Vue from "vue";
|
||||
import { Component, Prop, Watch } from "vue-property-decorator";
|
||||
|
||||
@Component({})
|
||||
export default class DoughnutChart extends Vue {
|
||||
@Prop({ required: true, default: 0 })
|
||||
value: number;
|
||||
|
||||
@Prop({ required: false, default: "#1791ff" })
|
||||
valueColor: string;
|
||||
|
||||
@Prop({ required: false, default: 8 })
|
||||
valueWidth: number;
|
||||
|
||||
@Prop({ required: false, default: "%" })
|
||||
valueMisure: string;
|
||||
|
||||
@Prop({ required: false, default: 300 })
|
||||
angleSize: number;
|
||||
|
||||
@Prop({ required: false, default: 5 })
|
||||
interval: number;
|
||||
|
||||
@Prop({ required: false, default: 2 })
|
||||
intervalSpace: number;
|
||||
|
||||
@Prop({ required: false, default: "#bbbcbc" })
|
||||
intervalColor: string;
|
||||
|
||||
@Prop({ required: false, default: 4 })
|
||||
intervalWidth: number;
|
||||
|
||||
|
||||
cx: number = 56;
|
||||
cy: number = 54;
|
||||
radius: number = 40;
|
||||
|
||||
gtorad: number = 0.0174533;
|
||||
// totalSize: number = 360 - 62;
|
||||
|
||||
get totalSize(){
|
||||
return this.angleSize;
|
||||
}
|
||||
|
||||
get differenceAngleSize(){
|
||||
return (360 - this.angleSize);
|
||||
}
|
||||
|
||||
get zeroAngle()
|
||||
{
|
||||
return 90 + (this.angleSize / 2);
|
||||
}
|
||||
|
||||
get fullAngle()
|
||||
{
|
||||
return 90 - (this.angleSize / 2);
|
||||
}
|
||||
|
||||
get middleIntervalSpace(){
|
||||
return this.intervalSpace / 2;
|
||||
}
|
||||
|
||||
get getValue(){
|
||||
let radius = (this.radius - (this.valueWidth - (this.intervalWidth - 2)));
|
||||
let size = this.size(this.value);
|
||||
let longArc = size >= 180;
|
||||
return this.getArcPath(this.cx, this.cy, radius, this.zeroAngle * this.gtorad, (this.zeroAngle - size) * this.gtorad, longArc, true);
|
||||
}
|
||||
|
||||
get intervals(){
|
||||
|
||||
if(this.interval <= 0)
|
||||
return null
|
||||
|
||||
let intervals: string[] = [];
|
||||
|
||||
let step = (this.angleSize / this.interval);
|
||||
let current = this.fullAngle;
|
||||
|
||||
|
||||
while(current < (this.zeroAngle))
|
||||
{
|
||||
let start = current + this.middleIntervalSpace;
|
||||
let end = ((current + step) - this.middleIntervalSpace);
|
||||
intervals.push(this.getArcPath(this.cx, this.cy, this.radius, start * this.gtorad, end * this.gtorad, false, false));
|
||||
current = (current + step);
|
||||
|
||||
// this.intervals.push(this.getArcPath(this.cx, this.cy, this.radius, -59 * this.gtorad, -1 * this.gtorad, false, false));
|
||||
// this.intervals.push(this.getArcPath(this.cx, this.cy, this.radius, 1 * this.gtorad, 59 * this.gtorad, false, false));
|
||||
// this.intervals.push(this.getArcPath(this.cx, this.cy, this.radius, 61 * this.gtorad, 119 * this.gtorad, false, false));
|
||||
// this.intervals.push(this.getArcPath(this.cx, this.cy, this.radius, 121 * this.gtorad, 179 * this.gtorad, false, false));
|
||||
// this.intervals.push(this.getArcPath(this.cx, this.cy, this.radius, 181 * this.gtorad, 239 * this.gtorad, false, false));
|
||||
}
|
||||
return intervals;
|
||||
}
|
||||
|
||||
get steps(){
|
||||
if(this.interval <= 0)
|
||||
return null
|
||||
|
||||
let intervals: {x: number, y: number, value: number}[] = [];
|
||||
|
||||
let step = (this.angleSize / this.interval);
|
||||
let current = this.fullAngle;
|
||||
|
||||
|
||||
for (let index = (this.interval); index >= 0; index--) {
|
||||
let point = this.getPoint(this.cx, this.cy, current * this.gtorad, this.radius + (this.intervalWidth * 2));
|
||||
intervals.push({x: point[0], y: point[1], value: Math.floor((100 / this.interval) * index)});
|
||||
current += step
|
||||
}
|
||||
return intervals;
|
||||
}
|
||||
|
||||
size(percentage){
|
||||
return (this.totalSize * percentage / 100);
|
||||
}
|
||||
|
||||
getArcPath(cx: number, cy: number, radius: number, from: number, to:number, largeArcFlag: boolean = false, clockWise: boolean = true) : string{
|
||||
radius = radius - this.intervalWidth;
|
||||
let result: string = `M${this.getPoint(cx, cy, from, radius).join(" ")} `; //start point
|
||||
result += `A ${radius} ${radius} `; //radius
|
||||
result += `0 `; //x-axis-rotation
|
||||
result += `${largeArcFlag ? 1 : 0} `; //large-arc-flag
|
||||
result += `${clockWise ? 1 : 0} `; //sweep-flag
|
||||
result += `${this.getPoint(cx, cy, to, radius).join(" ")}`; //end point;
|
||||
return result;
|
||||
}
|
||||
|
||||
getPoint(x: number, y: number, angle: number, radius: number)
|
||||
{
|
||||
return [((radius * Math.cos(angle)) + x), (y - (radius * Math.sin(angle)))];
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
@@ -0,0 +1,46 @@
|
||||
<template>
|
||||
<svg :viewBox="`0 0 116 100`" class="donut-chart" width="100%" height="100%">
|
||||
<g>
|
||||
<path
|
||||
v-for="(interval, index) in intervals"
|
||||
:key="`${index}-interval`"
|
||||
:d="interval"
|
||||
:stroke="intervalColor"
|
||||
:stroke-width="intervalWidth"
|
||||
fill="rgba(0,0,0,0)"
|
||||
class="donut-chart-interval"
|
||||
></path>
|
||||
<text
|
||||
:x="step.x"
|
||||
:y="step.y"
|
||||
font-size="10"
|
||||
v-for="(step, index) in steps"
|
||||
:key="`${index}-interval-label`"
|
||||
text-anchor="middle"
|
||||
:fill="intervalColor"
|
||||
:stroke="intervalColor"
|
||||
stroke-width="0"
|
||||
dy=".3em"
|
||||
>{{step.value}}</text>
|
||||
</g>
|
||||
<g>
|
||||
<path
|
||||
:d="getValue"
|
||||
:stroke="valueColor"
|
||||
:stroke-width="valueWidth"
|
||||
fill="rgba(0,0,0,0)"
|
||||
class="donut-chart-value"
|
||||
></path>
|
||||
<text
|
||||
:x="cx"
|
||||
:y="cy"
|
||||
text-anchor="middle"
|
||||
:fill="valueColor"
|
||||
:stroke="valueColor"
|
||||
dy=".3em"
|
||||
>{{value}}{{valueMisure}}</text>
|
||||
</g>
|
||||
</svg>
|
||||
</template>
|
||||
<script src="./doughnut-chart.ts" lang="ts"></script>
|
||||
|
||||
@@ -0,0 +1,5 @@
|
||||
import DoughnutChart from "./doughnut-chart.vue";
|
||||
|
||||
export {
|
||||
DoughnutChart
|
||||
}
|
||||
@@ -84,6 +84,7 @@ export default class TimeLineChartRow extends Vue {
|
||||
let diffDays = this.diffDays;
|
||||
let diffHours = this.diffHours;
|
||||
|
||||
debugger;
|
||||
if (diffDays <= 1) {
|
||||
step = this.oneHour;
|
||||
let check = Math.ceil(diffHours / this.interval);
|
||||
|
||||
@@ -10,8 +10,6 @@ import { Factory, MessageService } from "src/_base";
|
||||
// import VueDragDrop from 'vue-drag-drop';
|
||||
// Vue.use(VueDragDrop);
|
||||
|
||||
// var JustGage = require("justgage/justgage.js");
|
||||
|
||||
const App = () =>
|
||||
import ("./App.vue");
|
||||
|
||||
|
||||
Reference in New Issue
Block a user