Merge branch 'develop' of https://bitbucket.org/ncarminati/cms_thermo_active into develop
This commit is contained in:
Samuele Locatelli
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@@ -0,0 +1,70 @@
|
||||
// out: false, sourceMap: false, main: ../style.less
|
||||
@import "colors.less";
|
||||
|
||||
@gauge-h: 610px;
|
||||
@gauge-w: 610px;
|
||||
|
||||
@smallgauge-h: @gauge-h - 30px;
|
||||
@smallgauge-w: @gauge-w - 30px;
|
||||
|
||||
.gauge-container {
|
||||
grid-column: 3;
|
||||
grid-row: 2;
|
||||
display: grid;
|
||||
grid-template-rows: 1fr auto 1fr;
|
||||
|
||||
|
||||
hr {
|
||||
grid-row: 2;
|
||||
grid-column: 1;
|
||||
margin: auto;
|
||||
height: 5px;
|
||||
width: calc(@gauge-w/2);
|
||||
background-color: gray;
|
||||
z-index: 1;
|
||||
border: none;
|
||||
}
|
||||
|
||||
width: @gauge-w;
|
||||
height: @gauge-h;
|
||||
|
||||
.gauge1,
|
||||
.gauge2 {
|
||||
grid-column: 1;
|
||||
grid-row-start: 1;
|
||||
grid-row-end: 3;
|
||||
|
||||
.gauge {
|
||||
.dial {
|
||||
fill: rgba(153, 207, 255, 0.6);
|
||||
stroke: #003366;
|
||||
stroke-width: 2.5;
|
||||
}
|
||||
|
||||
.value {
|
||||
stroke: #90C03D;
|
||||
stroke-width: 2.5;
|
||||
}
|
||||
|
||||
.value-text {
|
||||
fill: black;
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.gauge2 {
|
||||
.gauge {
|
||||
.dial {
|
||||
stroke: rgba(0, 0, 0, .5);
|
||||
stroke-width: 1;
|
||||
}
|
||||
|
||||
.value {
|
||||
stroke: #4caaff;
|
||||
stroke-width: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -5,483 +5,106 @@
|
||||
|
||||
|
||||
.dashboard {
|
||||
height : 100%;
|
||||
width : 100%;
|
||||
background-image: url("../../assets/icons/png/bg.png");
|
||||
position : fixed;
|
||||
z-index : 1001;
|
||||
display : flex;
|
||||
flex-direction : column;
|
||||
justify-content : flex-start;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-image: url("../../assets/icons/png/bg.png");
|
||||
position: fixed;
|
||||
z-index: 1001;
|
||||
display: grid;
|
||||
grid-template-rows: 144px 1fr;
|
||||
grid-template-columns: 152px 1fr 610px 1fr 152px;
|
||||
grid-row-gap: 40px;
|
||||
padding-top: 21px;
|
||||
|
||||
.header {
|
||||
width : 100%;
|
||||
display: flex;
|
||||
header {
|
||||
grid-row: 1;
|
||||
grid-column-start: 1;
|
||||
grid-column-end: -1;
|
||||
width: 100% !important;
|
||||
justify-content: space-between;
|
||||
height: 144px !important;
|
||||
position: relative !important;
|
||||
|
||||
.ribbon-container {
|
||||
height : 80px;
|
||||
z-index: 900;
|
||||
.ribbon-container,
|
||||
.app-ribbon {
|
||||
height: 144px;
|
||||
width: 152px;
|
||||
border-top-right-radius: 72px;
|
||||
border-bottom-right-radius: 72px;
|
||||
|
||||
.status-icon {
|
||||
width: 114px;
|
||||
height: 114px;
|
||||
border-radius: 57px;
|
||||
|
||||
* {
|
||||
font-size: 48px;
|
||||
}
|
||||
|
||||
.box-date {
|
||||
display : flex;
|
||||
width : 70%;
|
||||
margin-left: 100px;
|
||||
|
||||
div {
|
||||
flex-shrink: 0;
|
||||
font-size : 47px;
|
||||
text-align : right;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
time {
|
||||
flex-shrink: 0;
|
||||
transition : color 200ms ease-in-out;
|
||||
margin-left: 28px;
|
||||
display : flex;
|
||||
font-size : 120px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.arch {
|
||||
width: 100%;
|
||||
|
||||
.box-gauge {
|
||||
height: 150px;
|
||||
width : 150px;
|
||||
|
||||
.gauge-container,
|
||||
.three {
|
||||
width : 126px;
|
||||
height: 92px;
|
||||
|
||||
.gauge {
|
||||
|
||||
.value {
|
||||
stroke: #1791ff;
|
||||
}
|
||||
|
||||
.value-text {
|
||||
fill: #4b4b4b;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
div {
|
||||
|
||||
&:last-of-type {
|
||||
margin-top: -10px;
|
||||
|
||||
label {
|
||||
|
||||
&:first-of-type {
|
||||
font-size : 18px;
|
||||
font-weight : 300;
|
||||
font-stretch : normal;
|
||||
font-style : normal;
|
||||
line-height : normal;
|
||||
letter-spacing: normal;
|
||||
text-align : center;
|
||||
color : #4b4b4b;
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
font-size : 26px;
|
||||
font-weight : 500;
|
||||
font-stretch : normal;
|
||||
font-style : normal;
|
||||
line-height : 1.96;
|
||||
letter-spacing: normal;
|
||||
text-align : center;
|
||||
color : #4b4b4b;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.header-buttons {
|
||||
display: inline-block;
|
||||
|
||||
.box-close-dashboard {
|
||||
height : 70px;
|
||||
text-align: right;
|
||||
|
||||
button.modal-close {
|
||||
background-color: #4B4B4B;
|
||||
margin : 23px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.user-info {
|
||||
margin-top : 10px;
|
||||
display : flex;
|
||||
font-size : 25px;
|
||||
color : @color-input-light;
|
||||
flex-grow : 1;
|
||||
justify-content: flex-end;
|
||||
margin-right : 21px;
|
||||
|
||||
button.profile {
|
||||
width : 48px;
|
||||
height : 48px;
|
||||
background-image: url("../profile.png");
|
||||
color : #000;
|
||||
background-size : cover;
|
||||
border : none;
|
||||
background-color: transparent;
|
||||
|
||||
&.colorWhite {
|
||||
color: #FFF;
|
||||
}
|
||||
}
|
||||
|
||||
div {
|
||||
align-self : center;
|
||||
margin-right: 10px;
|
||||
font-size : 18px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
section {
|
||||
margin-top : -400px;
|
||||
height : 722px;
|
||||
display : flex;
|
||||
justify-content: flex-end;
|
||||
padding-right : 15px;
|
||||
padding-bottom : 50px;
|
||||
|
||||
.specific {
|
||||
display : flex;
|
||||
flex-direction : column;
|
||||
justify-content: flex-end;
|
||||
|
||||
div {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
//inizio sezione style del primo specific
|
||||
&:first-of-type {
|
||||
margin-right: 15%;
|
||||
|
||||
div {
|
||||
|
||||
&:first-of-type {
|
||||
|
||||
img {
|
||||
flex-shrink: 0;
|
||||
width : 41px;
|
||||
height : 41px;
|
||||
object-fit : contain;
|
||||
}
|
||||
|
||||
label {
|
||||
flex-shrink : 0;
|
||||
font-size : 54px;
|
||||
font-weight : normal;
|
||||
font-stretch : normal;
|
||||
font-style : normal;
|
||||
line-height : normal;
|
||||
letter-spacing: normal;
|
||||
text-align : right;
|
||||
color : #4b4b4b;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
margin: unset;
|
||||
|
||||
button {
|
||||
flex-shrink : 0;
|
||||
width : 65px;
|
||||
height : 65px;
|
||||
box-shadow : 0 2px 10px 0 rgba(0, 0, 0, 0.5);
|
||||
border : solid 3px #4b4b4b;
|
||||
background-color: rgba(255, 255, 255, 0.2);
|
||||
border-radius : 50%;
|
||||
color : #4b4b4b;
|
||||
font-size : 50px;
|
||||
text-align : center;
|
||||
}
|
||||
|
||||
label {
|
||||
flex-shrink: 0;
|
||||
|
||||
&:first-of-type {
|
||||
|
||||
font-size : 12px;
|
||||
font-weight : 500;
|
||||
font-stretch : normal;
|
||||
font-style : normal;
|
||||
line-height : 1;
|
||||
letter-spacing: normal;
|
||||
text-align : center;
|
||||
color : #4b4b4b;
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
|
||||
font-size : 25px;
|
||||
font-weight : 500;
|
||||
font-stretch : normal;
|
||||
font-style : normal;
|
||||
line-height : 1;
|
||||
letter-spacing: normal;
|
||||
text-align : center;
|
||||
color : #4b4b4b;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
//inizio sezione style del secondo specific
|
||||
label {
|
||||
flex-shrink: 0;
|
||||
|
||||
&:first-of-type {
|
||||
|
||||
font-size : 26px;
|
||||
font-weight : 500;
|
||||
font-stretch : normal;
|
||||
font-style : normal;
|
||||
line-height : 1.96;
|
||||
letter-spacing: normal;
|
||||
text-align : center;
|
||||
color : #4b4b4b;
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
|
||||
font-size : 120px;
|
||||
font-weight : 300;
|
||||
font-stretch : normal;
|
||||
font-style : normal;
|
||||
line-height : normal;
|
||||
letter-spacing: normal;
|
||||
text-align : center;
|
||||
color : #4b4b4b;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
//inizio sezione style del terzo specific
|
||||
&:last-of-type {
|
||||
margin-left: 15%;
|
||||
|
||||
div {
|
||||
flex-shrink : 0;
|
||||
width : 542px;
|
||||
height : 71px;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.actual {
|
||||
background-color: unset;
|
||||
width : unset;
|
||||
height : unset;
|
||||
|
||||
.specific {
|
||||
background-color: unset;
|
||||
width : unset;
|
||||
height : unset;
|
||||
margin : unset;
|
||||
|
||||
label {
|
||||
flex-shrink: 0;
|
||||
|
||||
&:first-of-type {
|
||||
font-size : 26px;
|
||||
font-weight : 500;
|
||||
font-stretch : normal;
|
||||
font-style : normal;
|
||||
line-height : 1.96;
|
||||
letter-spacing: normal;
|
||||
text-align : center;
|
||||
color : #4b4b4b;
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
font-size : 120px;
|
||||
font-weight : 300;
|
||||
font-stretch : normal;
|
||||
font-style : normal;
|
||||
line-height : normal;
|
||||
letter-spacing: normal;
|
||||
text-align : center;
|
||||
color : #4b4b4b;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
aside {
|
||||
margin-top: 5px;
|
||||
width : 641px;
|
||||
height : 100%;
|
||||
overflow-x: hidden;
|
||||
|
||||
.component {
|
||||
width : 621px;
|
||||
height: 77px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.component-info {
|
||||
width : unset;
|
||||
height : unset;
|
||||
background-color: unset;
|
||||
display : flex;
|
||||
flex-direction : column;
|
||||
|
||||
section {
|
||||
margin : unset;
|
||||
padding : unset;
|
||||
height : unset;
|
||||
width : unset;
|
||||
display : flex;
|
||||
justify-content: flex-end;
|
||||
|
||||
section {
|
||||
margin : unset;
|
||||
padding : unset;
|
||||
height : unset;
|
||||
width : unset;
|
||||
display : flex;
|
||||
flex-direction: column;
|
||||
|
||||
.component {
|
||||
width : 478px;
|
||||
height : 60px;
|
||||
background-color: #e8e8e8;
|
||||
|
||||
div {
|
||||
flex-shrink: unset;
|
||||
|
||||
button {
|
||||
border-color : black;
|
||||
width : 50PX;
|
||||
height : 50px;
|
||||
border-radius : 50%;
|
||||
background-color: unset;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.component {
|
||||
width : 641px;
|
||||
height : 84px;
|
||||
background-color: #e8e8e8;
|
||||
display : flex;
|
||||
flex-direction : column;
|
||||
justify-content : flex-end;
|
||||
|
||||
div {
|
||||
flex-shrink : 0;
|
||||
margin : auto;
|
||||
padding : 0px 15px;
|
||||
width : unset;
|
||||
height : unset;
|
||||
background-color: unset;
|
||||
|
||||
|
||||
label {
|
||||
flex-shrink : 0;
|
||||
font-size : 54px;
|
||||
font-weight : 500;
|
||||
font-stretch : normal;
|
||||
font-style : normal;
|
||||
line-height : normal;
|
||||
letter-spacing: normal;
|
||||
text-align : right;
|
||||
color : #4b4b4b;
|
||||
}
|
||||
|
||||
.specific {
|
||||
height : unset;
|
||||
width : unset;
|
||||
background-color: unset;
|
||||
margin : unset;
|
||||
|
||||
label {
|
||||
flex-shrink: 0;
|
||||
|
||||
&:first-of-type {
|
||||
font-size : 12px;
|
||||
font-weight : 500;
|
||||
font-stretch : normal;
|
||||
font-style : normal;
|
||||
line-height : 1;
|
||||
letter-spacing: normal;
|
||||
text-align : center;
|
||||
color : #4b4b4b;
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
font-size : 25px;
|
||||
font-weight : 500;
|
||||
font-stretch : normal;
|
||||
font-style : normal;
|
||||
line-height : 1;
|
||||
letter-spacing: normal;
|
||||
text-align : center;
|
||||
color : #4b4b4b;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
button {
|
||||
height : 20px;
|
||||
width : 20px;
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
span {
|
||||
flex-shrink : 0;
|
||||
width : 100%;
|
||||
height : 1px;
|
||||
background-color: #676767;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.header-buttons {
|
||||
padding-right: 21px;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
height: 100%;
|
||||
|
||||
.user-info {
|
||||
font-size: 14px;
|
||||
|
||||
.name {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
button.modal-close {
|
||||
box-shadow: none;
|
||||
background-color: @color-darkish-blue;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.timing-area {
|
||||
grid-row: 2;
|
||||
grid-column: 2;
|
||||
display: grid;
|
||||
grid-template-rows: 1fr 1fr 1fr;
|
||||
height: 610px;
|
||||
|
||||
.start,
|
||||
.current,
|
||||
.end {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: rgba(153, 207, 255, 0.6);
|
||||
border-top-left-radius: 100px;
|
||||
border-bottom-left-radius: 100px;
|
||||
|
||||
small {
|
||||
font-size: 26px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
time {
|
||||
font-size: 120px;
|
||||
font-weight: 300;
|
||||
}
|
||||
}
|
||||
|
||||
.current {
|
||||
background-color: transparent;
|
||||
|
||||
time {
|
||||
font-size: 54px;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@@ -1,44 +1,58 @@
|
||||
// out: false, sourceMap: false, main: ../style.less
|
||||
|
||||
|
||||
@font-face {
|
||||
font-family: 'Work Sans';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: local('Work Sans'), local('WorkSans-Regular'), url(../fonts/WorkSans-Regular.ttf) format('ttf');
|
||||
unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
|
||||
font-family: 'Work Sans';
|
||||
font-style: normal;
|
||||
font-weight: 200;
|
||||
src: local('Work Sans Thin'), local('WorkSans-Thin'), url(/assets/fonts/WorkSans-Thin.ttf) format('truetype');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Work Sans';
|
||||
font-style: normal;
|
||||
font-weight: 300;
|
||||
src: local('Work Sans Light'), local('WorkSans-Light'), url(/assets/fonts/WorkSans-Light.ttf) format('truetype');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Work Sans';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: local('Work Sans Regular'), local('WorkSans-Regular'), url(/assets/fonts/WorkSans-Regular.ttf) format('truetype');
|
||||
}
|
||||
|
||||
|
||||
/* latin-ext */
|
||||
|
||||
@font-face {
|
||||
font-family: 'Work Sans';
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
src: local('Work Sans Medium'), local('WorkSans-Medium'), url(../fonts/WorkSans-Medium.ttf) format('ttf');
|
||||
font-family: 'Work Sans';
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
src: local('Work Sans Medium'), local('WorkSans-Medium'), url(/assets/fonts/WorkSans-Medium.ttf) format('truetype');
|
||||
}
|
||||
|
||||
|
||||
/* latin-ext */
|
||||
|
||||
@font-face {
|
||||
font-family: 'Work Sans';
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
src: local('Work Sans SemiBold'), local('WorkSans-SemiBold'), url(../fonts/WorkSans-SemiBold.ttf) format('ttf');
|
||||
font-family: 'Work Sans';
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
src: local('Work Sans SemiBold'), local('WorkSans-SemiBold'), url(/assets/fonts/WorkSans-SemiBold.ttf) format('truetype');
|
||||
}
|
||||
|
||||
|
||||
/* latin-ext */
|
||||
|
||||
@font-face {
|
||||
font-family: 'Work Sans';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
src: local('Work Sans Bold'), local('WorkSans-Bold'), url(../fonts/WorkSans-Bold.ttf) format('ttf');
|
||||
unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
|
||||
font-family: 'Work Sans';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
src: local('Work Sans Bold'), local('WorkSans-Bold'), url(/assets/fonts/WorkSans-Bold.ttf) format('truetype');
|
||||
unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
|
||||
}
|
||||
|
||||
.text-22{
|
||||
.text-22 {
|
||||
font-size: 22px !important;
|
||||
}
|
||||
}
|
||||
@@ -1,193 +0,0 @@
|
||||
// out: false, sourceMap: false, main: ../style.less
|
||||
@import "colors.less";
|
||||
|
||||
@gauge-h: 800px;
|
||||
@gauge-w: 800px;
|
||||
|
||||
@smallgauge-h: @gauge-h - 30px;
|
||||
@smallgauge-w: @gauge-w - 30px;
|
||||
|
||||
.box-graph-dashboard {
|
||||
height : 610px;
|
||||
display : flex;
|
||||
align-items : center;
|
||||
justify-content: flex-end;
|
||||
|
||||
.svg-dashboard {
|
||||
background-repeat: no-repeat;
|
||||
display : flex;
|
||||
flex-direction : column;
|
||||
justify-content : center;
|
||||
|
||||
&.dashboard3 {
|
||||
margin-left: -150px;
|
||||
margin-bottom : 250px;
|
||||
height : 100px;
|
||||
width : 900px;
|
||||
background-size : 900px;
|
||||
background-image: url(/assets/icons/svg/svg-dashboard3.svg);
|
||||
|
||||
label {
|
||||
margin : unset;
|
||||
font-size : 35px;
|
||||
font-weight : 500;
|
||||
font-stretch : normal;
|
||||
font-style : normal;
|
||||
line-height : normal;
|
||||
letter-spacing: normal;
|
||||
text-align : center;
|
||||
color : #4b4b4b;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.time-box {
|
||||
display : flex;
|
||||
flex-direction : column;
|
||||
justify-content: center;
|
||||
height : 100%;
|
||||
margin-top: 200px;
|
||||
margin-right: -150px;
|
||||
|
||||
.svg-dashboard {
|
||||
|
||||
label {
|
||||
margin-top : 8px;
|
||||
font-size : 26px;
|
||||
font-weight : 500;
|
||||
font-stretch : normal;
|
||||
font-style : normal;
|
||||
line-height : 1.96;
|
||||
letter-spacing: normal;
|
||||
text-align : center;
|
||||
color : #4b4b4b;
|
||||
}
|
||||
|
||||
time {
|
||||
font-size : 120px;
|
||||
font-weight : 300;
|
||||
font-stretch : normal;
|
||||
font-style : normal;
|
||||
line-height : normal;
|
||||
letter-spacing: normal;
|
||||
text-align : center;
|
||||
color : #4b4b4b;
|
||||
}
|
||||
|
||||
&.dashboard {
|
||||
background-image: url(/assets/icons/svg/svg-dashboard.svg);
|
||||
height : 178px;
|
||||
width : 545px;
|
||||
background-size : 545px;
|
||||
position : relative;
|
||||
}
|
||||
|
||||
&.dashboard2 {
|
||||
height : 178px;
|
||||
background-size : 545px;
|
||||
width : 545px;
|
||||
background-image: url(/assets/icons/svg/svg-dashboard2.svg);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.box-time-passed {
|
||||
height : 117px;
|
||||
margin : 40px 0px;
|
||||
text-align : center;
|
||||
display : flex;
|
||||
justify-content: center;
|
||||
flex-direction : column;
|
||||
|
||||
label {
|
||||
|
||||
&:first-of-type {
|
||||
font-size: 26px;
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
font-size: 54px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.box-circle-piece {
|
||||
margin-top: 200px;
|
||||
display : flex;
|
||||
align-items: center;
|
||||
position : relative;
|
||||
height : @gauge-h;
|
||||
width : @gauge-w;
|
||||
|
||||
hr {
|
||||
margin : auto;
|
||||
height : 5px;
|
||||
width : calc(@gauge-w/2);
|
||||
background-color: gray;
|
||||
z-index : 1;
|
||||
border : none;
|
||||
}
|
||||
|
||||
.gauge-container-dashboard {
|
||||
width : @gauge-w;
|
||||
height : @gauge-h;
|
||||
border-radius: 5px;
|
||||
position : absolute;
|
||||
top : calc(~"50%" - (@gauge-h/2));
|
||||
left: calc(~"50%" - (@gauge-w/2));
|
||||
|
||||
&.gauge1 {
|
||||
width : @smallgauge-w;
|
||||
height: @smallgauge-h;
|
||||
top : calc(~"50%" - (@smallgauge-h/2));
|
||||
left : calc(~"50%" - (@smallgauge-w/2));
|
||||
|
||||
.gauge {
|
||||
.dial {
|
||||
fill : #99CFFF;
|
||||
stroke: #91A2B1;
|
||||
}
|
||||
|
||||
.value {
|
||||
stroke: #4DAAFF;
|
||||
}
|
||||
|
||||
.value-text {
|
||||
fill : black;
|
||||
alignment-baseline: before-edge;
|
||||
font-size : 20px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&.gauge2 {
|
||||
|
||||
.gauge {
|
||||
|
||||
.value-text {
|
||||
fill : black;
|
||||
alignment-baseline: after-edge;
|
||||
font-size : 20px;
|
||||
}
|
||||
|
||||
.dial {
|
||||
stroke: #003264;
|
||||
}
|
||||
|
||||
.value {
|
||||
stroke : #90C03D;
|
||||
stroke-width: 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
@@ -3,7 +3,8 @@
|
||||
@header-height: 80px;
|
||||
@header-button-size: 44px;
|
||||
|
||||
#app>header {
|
||||
#app>header,
|
||||
.dashboard>header {
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
align-items: center;
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
@import "setup.less";
|
||||
@import "colors.less";
|
||||
@import "modals.less";
|
||||
@import "graph-dashboard.less";
|
||||
@import "dashboard-gauge.less";
|
||||
@import "dashboard.less";
|
||||
@import "riscaldi.less";
|
||||
@import "slider.less";
|
||||
|
||||
@@ -3,47 +3,26 @@
|
||||
@import "colors.less";
|
||||
@import "fonts.less";
|
||||
|
||||
html {
|
||||
height : 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
body {
|
||||
border : 0;
|
||||
margin : 0;
|
||||
padding: 0;
|
||||
height : 100%;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.main-nav {
|
||||
position: absolute;
|
||||
top : 50%;
|
||||
right : 0;
|
||||
z-index : 1000;
|
||||
}
|
||||
|
||||
.container {
|
||||
|
||||
#app {
|
||||
|
||||
nav {
|
||||
position: absolute;
|
||||
// top : 50%;
|
||||
right : 0;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position : absolute;
|
||||
right : 0;
|
||||
height : 100%;
|
||||
display : flex;
|
||||
flex-direction : column;
|
||||
justify-content: center;
|
||||
|
||||
|
||||
.active button {
|
||||
transform: translate(-761px, 0px);
|
||||
}
|
||||
|
||||
.active_second_card button {
|
||||
transform: translate(-1522px, 0px);
|
||||
}
|
||||
|
||||
div {
|
||||
|
||||
button {
|
||||
@@ -87,8 +66,6 @@ body {
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.sidebar {
|
||||
width : 100vw;
|
||||
height : 100vh;
|
||||
@@ -96,21 +73,15 @@ body {
|
||||
flex-direction : column;
|
||||
justify-content: center;
|
||||
|
||||
// .sidebar-backdrop {
|
||||
// width: 100vw;
|
||||
// height: 100vh;
|
||||
// // position: fixed;
|
||||
// // top: 0;
|
||||
// // left: 0;
|
||||
// cursor: pointer;
|
||||
// }
|
||||
.active {
|
||||
transform: translate(-761px, 0px);
|
||||
}
|
||||
|
||||
.sidebar-panel {
|
||||
overflow-y : auto;
|
||||
// overflow-y : auto;
|
||||
background-color: #130f40;
|
||||
position: fixed;
|
||||
right: 0;
|
||||
// top: 141px;
|
||||
position : fixed;
|
||||
right : 0;
|
||||
z-index : 900;
|
||||
padding : 3rem 20px 2rem 20px;
|
||||
width : 721px;
|
||||
@@ -119,19 +90,43 @@ body {
|
||||
box-shadow : 2px 10px 15px 0 rgba(0, 0, 0, 0.5);
|
||||
background-color: #dddddd;
|
||||
|
||||
.text-head-sidebar {
|
||||
margin : 10px auto;
|
||||
font-size : 24px;
|
||||
font-weight : 500;
|
||||
font-stretch : normal;
|
||||
font-style : normal;
|
||||
line-height : normal;
|
||||
letter-spacing: normal;
|
||||
text-align : center;
|
||||
color : #002680;
|
||||
.head-sidebar {
|
||||
margin: 10px 0px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
|
||||
button{
|
||||
width: 100px;
|
||||
height: 30px;
|
||||
font-size: 20px;
|
||||
background-color: unset;
|
||||
border: none;
|
||||
|
||||
&.selected{
|
||||
color:#002680;
|
||||
border-bottom: 2px solid #002680;
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
font-size : 24px;
|
||||
font-weight : 500;
|
||||
font-stretch : normal;
|
||||
font-style : normal;
|
||||
line-height : normal;
|
||||
letter-spacing: normal;
|
||||
text-align : center;
|
||||
color : #002680;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.box-sidebar-panel {
|
||||
aside {
|
||||
height: 95%;
|
||||
}
|
||||
|
||||
section {
|
||||
display : grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
align-items : center;
|
||||
@@ -145,11 +140,10 @@ body {
|
||||
background-color: #808e96;
|
||||
margin : 10px 30px;
|
||||
|
||||
.text-box-paddle {
|
||||
div {
|
||||
display : flex;
|
||||
width : 268px;
|
||||
height : 78px;
|
||||
font-family : WorkSans;
|
||||
font-size : 18px;
|
||||
font-weight : 500;
|
||||
font-stretch : normal;
|
||||
@@ -166,19 +160,12 @@ body {
|
||||
}
|
||||
|
||||
label {
|
||||
width : 117px;
|
||||
width : 100%;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.text-box-paddle.text-soft {
|
||||
label {
|
||||
width : 100%;
|
||||
align-self: center;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -5,49 +5,48 @@
|
||||
|
||||
|
||||
.modal.processo-info {
|
||||
width : 1808px;
|
||||
height : 976px;
|
||||
margin : 120px auto;
|
||||
box-shadow: none;
|
||||
position : relative;
|
||||
|
||||
header {
|
||||
font-size: 22px;
|
||||
color: #4b4b4b;
|
||||
font-size : 22px;
|
||||
color : #4b4b4b;
|
||||
display : flex;
|
||||
flex-flow : row nowrap;
|
||||
justify-content: space-evenly;
|
||||
align-items : center;
|
||||
|
||||
.tab-header {
|
||||
padding: 10px 0px;
|
||||
width : 70%;
|
||||
display : flex;
|
||||
align-items : center;
|
||||
justify-content: space-evenly;
|
||||
|
||||
button {
|
||||
padding: 0;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
margin-right: 10px;
|
||||
width: 149px;
|
||||
height: 48px;
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.5);
|
||||
background-image: linear-gradient(to bottom, #f1f1f1 0%, #bbbcbc 98%);
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
font-stretch: normal;
|
||||
font-style: normal;
|
||||
line-height: 1.15;
|
||||
letter-spacing: normal;
|
||||
color: #4b4b4b;
|
||||
border : none;
|
||||
border-radius : 2px;
|
||||
background-image : linear-gradient(to bottom, #f1f1f1 0%, #bbbcbc 98%);
|
||||
display : grid;
|
||||
grid-template-columns: 48px 101px;
|
||||
grid-template-rows : 48px;
|
||||
|
||||
img {
|
||||
margin-right: 20px;
|
||||
span {
|
||||
margin : auto;
|
||||
font-size: 13px;
|
||||
color : #4b4b4b;
|
||||
}
|
||||
|
||||
img {
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
width: 106px;
|
||||
height: 32px;
|
||||
label{
|
||||
font-size: 32px;
|
||||
font-weight: 600;
|
||||
font-stretch: normal;
|
||||
font-style: normal;
|
||||
line-height: 1;
|
||||
letter-spacing: normal;
|
||||
text-align: right;
|
||||
color: #545454;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -11,7 +11,29 @@
|
||||
flex-flow: column nowrap;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
|
||||
|
||||
.tab-header {
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
align-items: stretch;
|
||||
justify-content: flex-start;
|
||||
|
||||
button {
|
||||
background: none;
|
||||
border: 1px solid #bbbcbc;
|
||||
padding: 0 38px;
|
||||
border-bottom: none;
|
||||
font-size: 20px;
|
||||
background-color: #bbbcbc;
|
||||
color: #002680;
|
||||
|
||||
&.active {
|
||||
background-color: #fff;
|
||||
font-weight: bold;
|
||||
border-top: 2px solid #002680;
|
||||
}
|
||||
}
|
||||
}
|
||||
hr {
|
||||
flex-shrink: 0;
|
||||
background-color: #979797;
|
||||
@@ -237,37 +259,11 @@
|
||||
padding-left: 31px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
color: darkblue;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.tab-header {
|
||||
display: flex;
|
||||
|
||||
flex-flow: row;
|
||||
align-items: stretch;
|
||||
justify-content: flex-start;
|
||||
|
||||
button {
|
||||
|
||||
background: none;
|
||||
border: 1px solid #bbbcbc;
|
||||
padding: 0 38px;
|
||||
border-bottom: none;
|
||||
font-size: 20px;
|
||||
background-color: #bbbcbc;
|
||||
color: #002680;
|
||||
|
||||
&.active {
|
||||
background-color: #fff;
|
||||
font-weight: bold;
|
||||
border-top: 2px solid #002680;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.modal.setup-info {
|
||||
@@ -277,7 +273,7 @@
|
||||
margin: 150px auto;
|
||||
box-shadow: none;
|
||||
position: relative;
|
||||
|
||||
|
||||
section {
|
||||
height: 100%;
|
||||
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -5,14 +5,22 @@ import { paddleActions } from '@/store/paddle.store';
|
||||
@Component({ name: 'sidebar' })
|
||||
export default class Sidebar extends Vue {
|
||||
|
||||
azione1: boolean = false;
|
||||
azione2: boolean = false;
|
||||
show:string="tutti";
|
||||
|
||||
isPanelOpen() {
|
||||
return this.$store.state.paddle.isNavOpen;
|
||||
}
|
||||
|
||||
closeSidebarPanel() {
|
||||
paddleActions.Toggle(this.$store);
|
||||
get action1() {
|
||||
return this.$store.state.paddle.action1;
|
||||
}
|
||||
|
||||
get action2() {
|
||||
return this.$store.state.paddle.action2;
|
||||
}
|
||||
|
||||
ConfigPressed(action: string) {
|
||||
paddleActions.ToggleAction(this.$store,action);
|
||||
}
|
||||
|
||||
}
|
||||
@@ -1,71 +1,122 @@
|
||||
<template>
|
||||
<div class="sidebar">
|
||||
<!-- <transition> -->
|
||||
<div v-if="isPanelOpen()" class="sidebar-panel">
|
||||
<div class="text-head-sidebar">
|
||||
<div v-if="isPanelOpen()" class="sidebar-panel" :class="{ 'active' : action1||action2 }">
|
||||
<div class="head-sidebar">
|
||||
<label>Pulsanti personalizzati</label>
|
||||
</div>
|
||||
|
||||
<div class="box-sidebar-panel">
|
||||
<section @click="ConfigPressed('action1')">
|
||||
<div class="sidebar-panel-nav">
|
||||
<div class="text-box-paddle">
|
||||
<div>
|
||||
<img src="assets/icons/svg/paddle-riscaldo.svg" />
|
||||
<label>Estensione riscaldo 20 secondi</label>
|
||||
<i class="fa fa-cog gear-box-paddle"></i>
|
||||
<i class="fa fa-cog"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-panel-nav">
|
||||
<div class="text-box-paddle">
|
||||
<div class="sidebar-panel-nav" @click="ConfigPressed('action2')">
|
||||
<div>
|
||||
<img src="assets/icons/svg/paddle-altra-funzione.svg" />
|
||||
<label>Altra funzione tasto fisico della tastiera</label>
|
||||
<i class="fa fa-cog gear-box-paddle"></i>
|
||||
<i class="fa fa-cog"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="text-head-sidebar">
|
||||
<div class="head-sidebar">
|
||||
<label>Soft keys</label>
|
||||
</div>
|
||||
|
||||
<div class="box-sidebar-panel">
|
||||
<section>
|
||||
<div class="sidebar-panel-nav">
|
||||
<div class="text-box-paddle text-soft">
|
||||
<div>
|
||||
<label>Nome azione soft key</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-panel-nav">
|
||||
<div class="text-box-paddle text-soft">
|
||||
<div>
|
||||
<label>Nome azione soft key</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-panel-nav">
|
||||
<div class="text-box-paddle text-soft">
|
||||
<div>
|
||||
<label>Nome azione soft key</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-panel-nav">
|
||||
<div class="text-box-paddle text-soft">
|
||||
<div>
|
||||
<label>Estensione riscaldo 20 secondi</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-panel-nav">
|
||||
<div class="text-box-paddle text-soft">
|
||||
<toggle-button v-model="azione1"></toggle-button>
|
||||
<div>
|
||||
<toggle-button></toggle-button>
|
||||
<label>Nome azione soft key</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-panel-nav">
|
||||
<div class="text-box-paddle text-soft">
|
||||
<toggle-button v-model="azione2"></toggle-button>
|
||||
<div>
|
||||
<toggle-button></toggle-button>
|
||||
<label>Nome azione soft key</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-panel-nav">
|
||||
<div class="text-box-paddle text-soft">
|
||||
<div>
|
||||
<label>Nome azione soft key</label>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div v-if="(action1||action2) && isPanelOpen()" class="sidebar-panel">
|
||||
<div class="head-sidebar">
|
||||
<button :class="{'selected':show=='tutti'}" @click="show='tutti'">Tutti</button>
|
||||
<button :class="{'selected':show=='one'}" @click="show='one'">Gruppo 1</button>
|
||||
<button :class="{'selected':show=='two'}" @click="show='two'">Gruppo 2</button>
|
||||
<button :class="{'selected':show=='three'}" @click="show='three'">Gruppo 3</button>
|
||||
</div>
|
||||
|
||||
<aside class="scrollable auto">
|
||||
<section>
|
||||
<div class="sidebar-panel-nav">
|
||||
<div>
|
||||
<label>Nome azione soft key</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-panel-nav">
|
||||
<div>
|
||||
<label>Nome azione soft key</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-panel-nav">
|
||||
<div>
|
||||
<label>Nome azione soft key</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-panel-nav">
|
||||
<div>
|
||||
<label>Estensione riscaldo 20 secondi</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-panel-nav">
|
||||
<div>
|
||||
<toggle-button></toggle-button>
|
||||
<label>Nome azione soft key</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-panel-nav">
|
||||
<div>
|
||||
<toggle-button></toggle-button>
|
||||
<label>Nome azione soft key</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-panel-nav">
|
||||
<div>
|
||||
<label>Nome azione soft key</label>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</aside>
|
||||
</div>
|
||||
<!-- </transition> -->
|
||||
</div>
|
||||
|
||||
@@ -9,6 +9,14 @@ export default class SwitchButton extends Vue{
|
||||
return this.$store.state.paddle.isNavOpen;
|
||||
}
|
||||
|
||||
get action1(){
|
||||
return this.$store.state.paddle.action1;
|
||||
}
|
||||
|
||||
get action2(){
|
||||
return this.$store.state.paddle.action2;
|
||||
}
|
||||
|
||||
togglePaddle() {
|
||||
paddleActions.Toggle(this.$store);
|
||||
}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div :class="{ 'active' : isSwitchActive() }" @click="togglePaddle()">
|
||||
<div :class="{ 'active' : isSwitchActive() , 'active_second_card' : action1 || action2}" @click="togglePaddle()">
|
||||
<slot>
|
||||
<button title="Menu">
|
||||
<div>
|
||||
|
||||
@@ -0,0 +1,15 @@
|
||||
import Vue from "vue";
|
||||
import Component from "vue-class-component";
|
||||
|
||||
@Component({})
|
||||
export default class Clock extends Vue {
|
||||
|
||||
today: Date = new Date();
|
||||
|
||||
mounted() {
|
||||
let $this = this;
|
||||
setInterval(() => {
|
||||
$this.today = new Date();
|
||||
}, 1000)
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,42 @@
|
||||
<template>
|
||||
<div class="clock">
|
||||
<div class="day">
|
||||
<span>{{today | date('dddd DD')}}</span>
|
||||
<span>{{today | date('MMMM')}}</span>
|
||||
</div>
|
||||
<time>{{today | date('HH:mm:ss')}}</time>
|
||||
</div>
|
||||
</template>
|
||||
<style scoped>
|
||||
.clock {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-column-gap: 1rem;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.day {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
font-family: "Work Sans";
|
||||
font-size: 47px;
|
||||
font-weight: 500;
|
||||
line-height: 1.01;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
|
||||
time {
|
||||
padding-left: 1rem;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
font-family: "Work Sans";
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
font-size: 120px;
|
||||
font-weight: 300;
|
||||
}
|
||||
</style>
|
||||
<script src="./clock.ts"></script>
|
||||
@@ -1,10 +0,0 @@
|
||||
import Vue from 'vue';
|
||||
import Component from 'vue-class-component';
|
||||
import {Prop} from 'vue-property-decorator';
|
||||
|
||||
@Component({})
|
||||
export default class Componente extends Vue{
|
||||
|
||||
submenù:boolean=false;
|
||||
|
||||
}
|
||||
@@ -1,79 +0,0 @@
|
||||
<template>
|
||||
<div class="component-info">
|
||||
<div class="component">
|
||||
<div>
|
||||
<label>(num)</label>
|
||||
<div class="specific">
|
||||
<label>TEMPO RISCALDO</label>
|
||||
<label>1'12''</label>
|
||||
</div>
|
||||
<div class="specific">
|
||||
<label>VUOTO</label>
|
||||
<label>-0.88 bar</label>
|
||||
</div>
|
||||
<div class="specific">
|
||||
<label>TEMPO CICLO NETTO</label>
|
||||
<label>2'51''</label>
|
||||
</div>
|
||||
<button @click="submenù=!submenù"></button>
|
||||
</div>
|
||||
<span></span>
|
||||
</div>
|
||||
<section v-if="submenù">
|
||||
<section>
|
||||
<div class="component">
|
||||
<div>
|
||||
<button>
|
||||
<img src="assets/icons/png/bt.png" />
|
||||
</button>
|
||||
<div class="specific">
|
||||
<label>TEMPO VENTILAZIONE</label>
|
||||
<label>1'12''</label>
|
||||
</div>
|
||||
<div class="specific">
|
||||
<label>TEMPO CICLO LORDO</label>
|
||||
<label>2'51''</label>
|
||||
</div>
|
||||
</div>
|
||||
<span></span>
|
||||
</div>
|
||||
<div class="component">
|
||||
<div>
|
||||
<div class="specific">
|
||||
<label>TEMPERATURA STAMPO</label>
|
||||
<label>270°C</label>
|
||||
</div>
|
||||
<div class="specific">
|
||||
<label>T. MATERIALE FINE RISCALDO</label>
|
||||
<label>295°C</label>
|
||||
</div>
|
||||
<div class="specific">
|
||||
<label>T. MATERIALE FINE VENTILAZIONE</label>
|
||||
<label>48°C</label>
|
||||
</div>
|
||||
</div>
|
||||
<span></span>
|
||||
</div>
|
||||
<div class="component">
|
||||
<div>
|
||||
<div class="specific">
|
||||
<label>TEMPO VUOTO</label>
|
||||
<label>16''</label>
|
||||
</div>
|
||||
<div class="specific">
|
||||
<label>ENERGIA UTILIZZATA IN</label>
|
||||
<label>2,3kW</label>
|
||||
</div>
|
||||
<div class="specific">
|
||||
<label>ENERGIA UTILIZZATA OUT</label>
|
||||
<label>2,1kW</label>
|
||||
</div>
|
||||
</div>
|
||||
<span></span>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" src="./componente.ts"></script>
|
||||
@@ -0,0 +1,36 @@
|
||||
import Vue from "vue";
|
||||
import Component from "vue-class-component";
|
||||
import Gauge from "svg-gauge";
|
||||
@Component({})
|
||||
export default class MainGauge extends Vue {
|
||||
|
||||
|
||||
gauge1: any = null;
|
||||
gauge2: any = null;
|
||||
|
||||
mounted() {
|
||||
this.gauge1 = Gauge(
|
||||
this.$refs.gauge1, {
|
||||
max: 100,
|
||||
dialStartAngle: -90,
|
||||
dialEndAngle: -90.001,
|
||||
value: 30,
|
||||
showValue: false,
|
||||
viewBox: [8, 8, 84, 84]
|
||||
}
|
||||
);
|
||||
|
||||
this.gauge2 = Gauge(
|
||||
this.$refs.gauge2, {
|
||||
max: 100,
|
||||
dialStartAngle: -90,
|
||||
dialEndAngle: -90.001,
|
||||
value: 70,
|
||||
showValue: false,
|
||||
viewBox: [6, 6, 88, 88]
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,9 @@
|
||||
<template>
|
||||
<div class="gauge-container">
|
||||
<div ref="gauge1" class="gauge1"></div>
|
||||
<div ref="gauge2" class="gauge2"></div>
|
||||
<hr />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" src="./gauge.ts"></script>
|
||||
-48
@@ -1,48 +0,0 @@
|
||||
import Vue from "vue";
|
||||
import Component from "vue-class-component";
|
||||
import Gauge from "svg-gauge";
|
||||
@Component({})
|
||||
export default class dashboard extends Vue{
|
||||
mounted(){
|
||||
var gauge1= Gauge(
|
||||
this.$refs.gauge1, {
|
||||
max: 100,
|
||||
dialStartAngle: -90,
|
||||
dialEndAngle: -90.001,
|
||||
value: 100,
|
||||
label: function(value) {
|
||||
return Math.round(value * 100) / 100;
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
var gauge2= Gauge(
|
||||
this.$refs.gauge2, {
|
||||
max: 100,
|
||||
dialStartAngle: -90,
|
||||
dialEndAngle: -90.001,
|
||||
value: 100,
|
||||
label: function(value) {
|
||||
return Math.round(value * 100) / 100;
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
function loop() {
|
||||
var value1 = Math.random() * 100,
|
||||
value2 = Math.random() * 100,
|
||||
value3 = Math.random() * 100,
|
||||
value4 = Math.random() * 100,
|
||||
value5 = Math.random() * 100;
|
||||
|
||||
// setValueAnimated(value, durationInSecs);
|
||||
gauge1.setValueAnimated(value1, 1);
|
||||
gauge2.setValueAnimated(value2, 1);
|
||||
window.setTimeout(loop, 6000);
|
||||
}
|
||||
loop()
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
-35
@@ -1,35 +0,0 @@
|
||||
<template>
|
||||
|
||||
<div class="box-graph-dashboard">
|
||||
<div class="time-box">
|
||||
<div class="svg-dashboard dashboard">
|
||||
<label>INIZIO</label>
|
||||
<time>10:41</time>
|
||||
</div>
|
||||
|
||||
<div class="box-time-passed">
|
||||
<label>TEMPO TRASCORSO</label>
|
||||
<label>0:21:10</label>
|
||||
</div>
|
||||
|
||||
<div class="svg-dashboard dashboard2">
|
||||
<label>FINE</label>
|
||||
<time>~16:20</time>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="box-circle-piece">
|
||||
<div ref="gauge1" class="gauge-container-dashboard gauge1">
|
||||
</div>
|
||||
<hr/>
|
||||
<div ref="gauge2" class="gauge-container-dashboard gauge2">
|
||||
</div>
|
||||
</div>
|
||||
<div class="svg-dashboard dashboard3">
|
||||
<label>Nome ricetta lungo 8888x8888</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script lang="ts" src="./graph-dashboard.ts"></script>
|
||||
@@ -1,52 +1,29 @@
|
||||
import Vue from 'vue';
|
||||
import Component from 'vue-class-component';
|
||||
import {Prop} from 'vue-property-decorator';
|
||||
import { Prop } from 'vue-property-decorator';
|
||||
import { messageService } from '@/_base';
|
||||
import { ModalHelper } from '@/components/modals';
|
||||
import AppRibbon from "@/components/app-ribbon.vue";
|
||||
import { alarmList } from "@/app_modules/alarms";
|
||||
import moment from "moment";
|
||||
import { AppModel, appModelActions } from '@/store';
|
||||
import { getColorFromName,isDarkColor } from "@/_base/utils";
|
||||
import { getColorFromName, isDarkColor } from "@/_base/utils";
|
||||
import ArchInterface from "../components/arch-interface/arch-interface.vue";
|
||||
import { LocalizationService, localizationService } from "@/services/localizationService";
|
||||
import Componente from "./base-components/componente.vue";
|
||||
import GraphDashboard from "./base-components/graph-dashboard.vue"
|
||||
import gauge from "./base-components/gauge.vue"
|
||||
import clock from "./base-components/clock.vue";
|
||||
|
||||
@Component({
|
||||
components: {
|
||||
appRibbon: AppRibbon,
|
||||
archInterface: ArchInterface,
|
||||
alarmList,
|
||||
componente:Componente,
|
||||
graphdashboard: GraphDashboard
|
||||
gauge, clock
|
||||
}
|
||||
})
|
||||
export default class Dashboard extends Vue{
|
||||
|
||||
@Prop({ default: 9 })
|
||||
components: number;
|
||||
export default class Dashboard extends Vue {
|
||||
|
||||
$store: any;
|
||||
@Prop({ default: 9 })
|
||||
components: number;
|
||||
|
||||
public minutes: string = "";
|
||||
public hours: string = "";
|
||||
public Time: string = "";
|
||||
public date: string = "";
|
||||
public mid: string = "";
|
||||
public dayIt: string = moment(new Date()).locale(this.$store.state.localization.currentLanguage).format('dddd DD');
|
||||
public monthIt: string = moment(new Date()).locale(this.$store.state.localization.currentLanguage).format('MMMM');
|
||||
|
||||
created(){
|
||||
this.updateTime();
|
||||
// Ora aggiornata ogni 10 secondi
|
||||
window.setInterval(() => {
|
||||
this.updateTime();
|
||||
}, 10000);
|
||||
}
|
||||
|
||||
|
||||
// User
|
||||
|
||||
get currentUser() {
|
||||
return (this.$store.state as AppModel).currentUser;
|
||||
@@ -55,50 +32,16 @@ export default class Dashboard extends Vue{
|
||||
get cmsConnectReady() {
|
||||
return (this.$store.state as AppModel).machineInfo.cmsConnectReady;
|
||||
}
|
||||
|
||||
|
||||
getColor(nome,cognome){
|
||||
return getColorFromName(nome,cognome);
|
||||
|
||||
getColor(nome, cognome) {
|
||||
return getColorFromName(nome, cognome);
|
||||
}
|
||||
isDarkColor(color){
|
||||
isDarkColor(color) {
|
||||
return isDarkColor(color);
|
||||
}
|
||||
|
||||
// Clock
|
||||
|
||||
private updateTime() {
|
||||
this.mid = "";
|
||||
let date = moment(new Date()).format('LT');
|
||||
|
||||
let hours: any = date.split(":")[0];
|
||||
let minutesGrez = date.split(":")[1].split(" ");
|
||||
|
||||
//Check if is AM/PM
|
||||
let minutes = "";
|
||||
if(minutesGrez.length>1)
|
||||
minutes = minutesGrez[0] + " " + minutesGrez[1];
|
||||
else{
|
||||
minutes = ("00" + minutesGrez[0]).slice(-2)
|
||||
hours = ("00" + hours).slice(-2)
|
||||
}
|
||||
|
||||
// time non italian
|
||||
if (this.$store.state.localization.currentLanguage != 'it'){
|
||||
hours = (hours+24)%24;
|
||||
this.mid = "AM";
|
||||
if (hours==0){
|
||||
hours=12;
|
||||
}
|
||||
else if (hours>12){
|
||||
hours=hours%12;
|
||||
this.mid = "PM";
|
||||
}
|
||||
}
|
||||
|
||||
this.$set(this, "minutes", minutes);
|
||||
this.$set(this, "hours", hours);
|
||||
this.$set(this, "date", moment(new Date()).format('L'));
|
||||
}
|
||||
|
||||
// Ribbon
|
||||
|
||||
@@ -156,13 +99,13 @@ export default class Dashboard extends Vue{
|
||||
}
|
||||
}
|
||||
|
||||
public sendMessage(name:string) {
|
||||
public sendMessage(name: string) {
|
||||
messageService.publishToChannel(name);
|
||||
}
|
||||
|
||||
|
||||
close() {
|
||||
appModelActions.ShowDashboard(this.$store);
|
||||
};
|
||||
};
|
||||
|
||||
}
|
||||
|
||||
|
||||
@@ -1,102 +1,102 @@
|
||||
<template>
|
||||
<div class="dashboard">
|
||||
<div class="header">
|
||||
<app-ribbon
|
||||
:status="{'alarm': ribbonStatus == 3, 'working': ribbonStatus == 1, 'warning': ribbonStatus == 2}"
|
||||
|
||||
<div class="dashboard">
|
||||
<header>
|
||||
<app-ribbon
|
||||
:status="{'alarm': ribbonStatus == 3, 'working': ribbonStatus == 1, 'warning': ribbonStatus == 2}"
|
||||
:has-service="serviceRequired"
|
||||
>
|
||||
<i
|
||||
class="fa fa-check"
|
||||
slot="icon"
|
||||
v-if="ribbonStatus == 0"
|
||||
:title="'header_tooltip_nc_idle' | localize('Nc in Idle state')"
|
||||
></i>
|
||||
<i
|
||||
class="fa fa-play"
|
||||
slot="icon"
|
||||
v-if="ribbonStatus == 1"
|
||||
:title="'header_tooltip_nc_running' | localize('Nc in Running state')"
|
||||
></i>
|
||||
<i
|
||||
class="fa fa-exclamation"
|
||||
slot="icon"
|
||||
v-if="ribbonStatus >1"
|
||||
:title="'header_tooltip_nc_error' | localize('Open/Close alarm list')"
|
||||
></i>
|
||||
<div
|
||||
slot="content"
|
||||
class="content"
|
||||
v-if="ribbonStatus>1"
|
||||
:title="'header_tooltip_nc_error' | localize('Open/Close alarm list')"
|
||||
>
|
||||
<strong v-if="!showDetails">{{alarmTitle | localize(alarmTitle,alarmCount)}}</strong>
|
||||
<strong v-if="showDetails && alarms[0].title">{{alarms[0].title}}</strong>
|
||||
<strong
|
||||
v-if="showDetails && !alarms[0].title"
|
||||
>{{'alarm_'+ alarms[0].id | localize('alarm_'+ alarms[0].id)}}</strong>
|
||||
<div v-if="showDetails">
|
||||
<span class="processes">{{alarms[0].source}}</span>
|
||||
<span class="processes" v-if="alarms[0].source === 'PLC' && alarms[0].process.length>0">
|
||||
<span v-for="p in alarms[0].process" :key="p">{{ p }}</span>
|
||||
</span>
|
||||
<span
|
||||
class="processes"
|
||||
v-if="alarms[0].source !== 'PLC' && alarms[0].process"
|
||||
>{{ alarms[0].process }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div slot="service" class="content" v-if="serviceRequired">
|
||||
<strong>{{'header_maintainance_request' | localize('Effettuare manutenzione')}}</strong>
|
||||
<span>{{'header_maintainance_request_explanation' | localize('C\'è una procedura da effettuare')}}</span>
|
||||
</div>
|
||||
</app-ribbon>
|
||||
|
||||
:has-service="serviceRequired"
|
||||
>
|
||||
<i class="fa fa-check" slot="icon" v-if="ribbonStatus == 0" :title="'header_tooltip_nc_idle' | localize('Nc in Idle state')"></i>
|
||||
<i class="fa fa-play" slot="icon" v-if="ribbonStatus == 1" :title="'header_tooltip_nc_running' | localize('Nc in Running state')"></i>
|
||||
<i class="fa fa-exclamation" slot="icon" v-if="ribbonStatus >1" :title="'header_tooltip_nc_error' | localize('Open/Close alarm list')"></i>
|
||||
<div slot="content" class="content" v-if="ribbonStatus>1" :title="'header_tooltip_nc_error' | localize('Open/Close alarm list')">
|
||||
<clock></clock>
|
||||
|
||||
<strong v-if="!showDetails">{{alarmTitle | localize(alarmTitle,alarmCount)}}</strong>
|
||||
<strong v-if="showDetails && alarms[0].title">{{alarms[0].title}}</strong>
|
||||
<strong v-if="showDetails && !alarms[0].title">{{'alarm_'+ alarms[0].id | localize('alarm_'+ alarms[0].id)}}</strong>
|
||||
<div v-if="showDetails">
|
||||
<span class="processes">{{alarms[0].source}}</span>
|
||||
<span class="processes" v-if="alarms[0].source === 'PLC' && alarms[0].process.length>0">
|
||||
<span v-for="p in alarms[0].process" :key="p" >{{ p }} </span>
|
||||
</span>
|
||||
<span class="processes" v-if="alarms[0].source !== 'PLC' && alarms[0].process">{{ alarms[0].process }}</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div slot="service" class="content" v-if="serviceRequired">
|
||||
<strong>{{'header_maintainance_request' | localize('Effettuare manutenzione')}}</strong>
|
||||
<span>{{'header_maintainance_request_explanation' | localize('C\'è una procedura da effettuare')}}</span>
|
||||
</div>
|
||||
</app-ribbon>
|
||||
<!-- <alarm-list></alarm-list> -->
|
||||
<div class="header-buttons">
|
||||
<button class="modal-close" @click="close()">
|
||||
<i class="fa fa-remove"></i>
|
||||
</button>
|
||||
|
||||
<div class="box-date">
|
||||
<div>{{dayIt}}<br>{{monthIt}}</div>
|
||||
<time>
|
||||
<span>{{hours}}:{{minutes}} {{mid}}</span>
|
||||
</time>
|
||||
</div>
|
||||
<div class="user-info">
|
||||
<div class="name">
|
||||
{{currentUser.firstName}}
|
||||
<br />
|
||||
{{currentUser.lastName}}
|
||||
</div>
|
||||
<button
|
||||
class="profile dark-blue"
|
||||
v-if="currentUser"
|
||||
@click="sendMessage('show-user-info')"
|
||||
:title="'header_tooltip_btn_usrinfo' | localize('Show User Info')"
|
||||
:class="{'colorWhite':isDarkColor(getColor(currentUser.lastName,currentUser.firstName))}"
|
||||
></button>
|
||||
<button
|
||||
class="profile dark-blue colorWhite"
|
||||
v-else
|
||||
@click="sendMessage('show-user-info')"
|
||||
:title="'header_tooltip_btn_usrinfo' | localize('Show User Info')"
|
||||
></button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<gauge></gauge>
|
||||
|
||||
<archInterface></archInterface>
|
||||
|
||||
<div class="header-buttons">
|
||||
<div class="box-close-dashboard">
|
||||
<button class="modal-close" @click="close()">
|
||||
<i class="fa fa-remove"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="user-info">
|
||||
<div>
|
||||
<span>{{currentUser.firstName}} <br> {{currentUser.lastName}}</span>
|
||||
</div>
|
||||
<button class="profile dark-blue" v-if="currentUser" @click="sendMessage('show-user-info')" :title="'header_tooltip_btn_usrinfo' | localize('Show User Info')" :class="{'colorWhite':isDarkColor(getColor(currentUser.lastName,currentUser.firstName))}">
|
||||
</button>
|
||||
<button class="profile dark-blue colorWhite" v-else @click="sendMessage('show-user-info')" :title="'header_tooltip_btn_usrinfo' | localize('Show User Info')">
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<graphdashboard></graphdashboard>
|
||||
<section>
|
||||
<div class="specific">
|
||||
<div>
|
||||
<img src="assets/icons/png/inv.png">
|
||||
<label>218°C</label>
|
||||
</div>
|
||||
<div>
|
||||
<button>-</button>
|
||||
<div class="specific">
|
||||
<label>setpoint</label>
|
||||
<label>278°C</label>
|
||||
</div>
|
||||
<button>+</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="specific">
|
||||
<label>TEMPO RESTANTE</label>
|
||||
<label>5:18:40</label>
|
||||
</div>
|
||||
<div class="specific">
|
||||
<div class="actual">
|
||||
<div class="specific">
|
||||
<label>PEZZI/ORA</label>
|
||||
<label>18,2</label>
|
||||
</div>
|
||||
<div class="specific">
|
||||
<label>TEMPO/CICLO</label>
|
||||
<label>3'12''</label>
|
||||
</div>
|
||||
</div>
|
||||
<div>GRAFICO</div>
|
||||
<componente></componente>
|
||||
<aside class="scrollable">
|
||||
<componente v-for="iter in components" :key="iter"></componente>
|
||||
</aside>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<div class="timing-area">
|
||||
<div class="start">
|
||||
<small>{{'dashboard-timing-start' | localize('inizio')}}</small>
|
||||
<time>10:53</time>
|
||||
</div>
|
||||
<div class="current">
|
||||
<small>{{'dashboard-timing-elapsed' | localize('tempo trascorso')}}</small>
|
||||
<time>10:53</time>
|
||||
</div>
|
||||
<div class="end">
|
||||
<small>{{'dashboard-timing-end' | localize('fine')}}</small>
|
||||
<time>~10:53</time>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" src="./dashboard.ts"></script>
|
||||
@@ -1,16 +1,15 @@
|
||||
<template>
|
||||
<div class="setup">
|
||||
<div class="container">
|
||||
<modal type="processo-info" :title="'processo_lbl_title' | localize('Attività attuale (es. attesa spostamento assi)')">
|
||||
<div class="tab-header" slot="header-buttons">
|
||||
<button> <img src="assets/icons/png/star.png"> Opzioni di lavorazione </button>
|
||||
<button> <img src="assets/icons/png/star.png"> Pirometro</button>
|
||||
<button> <img src="assets/icons/png/star.png"> Attivazione riscaldi</button>
|
||||
<button> <img src="assets/icons/png/star.png"> Riscaldo +10 secondi</button>
|
||||
<button> <img src="assets/icons/png/star.png"> Risclado -10 secondi</button>
|
||||
<button> <img src="assets/icons/png/star.png"> Label pulsante opzionanle</button>
|
||||
<button> <img src="assets/icons/png/star.png"> <span>Opzioni di lavorazione</span> </button>
|
||||
<button> <img src="assets/icons/png/star.png"> <span>Pirometro</span> </button>
|
||||
<button> <img src="assets/icons/png/star.png"> <span>Attivazione riscaldi</span> </button>
|
||||
<button> <img src="assets/icons/png/star.png"> <span>Riscaldo +10 secondi</span> </button>
|
||||
<button> <img src="assets/icons/png/star.png"> <span>Risclado -10 secondi</span> </button>
|
||||
<button> <img src="assets/icons/png/star.png"> <span>Label pulsante opzionale</span></button>
|
||||
<label>{{actual}}/{{tot}}</label>
|
||||
</div>
|
||||
<circlegantt></circlegantt>
|
||||
</modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -1,20 +1,36 @@
|
||||
|
||||
export interface PaddleModel {
|
||||
isNavOpen: boolean
|
||||
isNavOpen: boolean,
|
||||
action1: boolean,
|
||||
action2:boolean
|
||||
}
|
||||
|
||||
export const paddleStore={
|
||||
state:{
|
||||
isNavOpen:false
|
||||
isNavOpen:false,
|
||||
action1:false,
|
||||
action2:false
|
||||
} as PaddleModel,
|
||||
mutations: {
|
||||
toggleNav(state){
|
||||
state.isNavOpen=!state.isNavOpen
|
||||
state.isNavOpen=!state.isNavOpen,
|
||||
state.action1=false,
|
||||
state.action2=false
|
||||
},
|
||||
toggleAction(state,action:string){
|
||||
if(action=="action1"){
|
||||
state.action1=!state.action1
|
||||
}else{
|
||||
state.action2=!state.action2
|
||||
}
|
||||
}
|
||||
},
|
||||
actions:{
|
||||
Toggle(context){
|
||||
context.commit("toggleNav");
|
||||
},
|
||||
ToggleAction(context,action:string){
|
||||
context.commit("toggleAction",action);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user