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

Layout WP4

Browse Source
This commit is contained in:
Alessandro Francia
2018-04-11 13:10:08 +02:00
parent 9a0b45104b
commit b29bc84143
24 changed files with 1346 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Step/wwwroot/assets/styles/base/assisted-tooling.less
+20 -3
View File
@@ -22,11 +22,28 @@
font-size: 20px;
padding: 19px 0 0 24px;
}
>.fa{
float: right;
font-size: 28px;
button.close{
display: flex;
width: 28px;
height: 28px;
border-radius: 50%;
border: none;
background-color: #002680;
color: #fff;
margin-top: 15px;
margin-right: 14px;
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;
}
}
.assisted-tooling-body{
Step/wwwroot/assets/styles/base/card.less
+46
View File
@@ -202,3 +202,49 @@
}
}
}
.card-utilities{
width: 288px;
height: 216px;
border-radius: 2px;
background-color: @color-white2;
box-shadow: 0 1px 2px 0 @color-black-40;
.card-utilities-header{
height: 64px;
width: 100%;
border-bottom: solid 2px @color-white;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
color: @color-darkish-blue;
}
.card-utilities-body{
height: calc(~'100% - 66px');
width: 100%;
display: flex;
align-items: center;
justify-content: center;
button{
width: 272px;
height: 136px;
display: flex;
align-items: center;
justify-content: center;
background: @color-white2;
}
.card-utilities-body-label{
width: 104px;
height: 104px;
display: flex;
align-items: center;
justify-content: center;
background-color: @color-background-white;
font-size: 48px;
font-weight: 600;
color: @color-darkish-blue;
}
}
}
Step/wwwroot/assets/styles/base/colors.less
+1 -1
View File
@@ -16,9 +16,9 @@
@color-white3: #dfdfdf;
@color-white4:#f3f3f3;
@color-whitegrey: #dddddd;
@color-whitethree: #e7e7e7;
@color-silver: #bbbcbc;
@color-battleship-grey: #657178;
@color-nice-blue: #1756ad;
@color-slate-gray:#5c656b;
@color-gunmetal: #4e585e;
Step/wwwroot/assets/styles/base/depot.less
+91 -17
View File
@@ -14,12 +14,20 @@
border-radius: 2px;
background-color: @color-background-white;
box-shadow: 0 1px 2px 0 @color-black-40;
.header{
font-size: 20px;
color: @color-darkish-blue;
height: 81px;
display: flex;
align-items: center;
.depot-header{
.depot-header-left, .depot-header-right{
height: 81px;
display: flex;
align-items: center;
}
.depot-header-left{
float:left;
font-size: 20px;
color: @color-darkish-blue;
}
.depot-header-right{
float: right;
}
.fa{
height: 18px;
width: 13px;
@@ -78,8 +86,9 @@
}
.box-right{
height: 100%;
width:100%;
min-width: calc(~'100% - 440px');
max-width: calc(~'100% - 92px');
// max-width: calc(~'100% - 92px');
display: flex;
flex-flow: column;
align-items: center;
@@ -106,7 +115,9 @@
button{
width: 48px;
height: 48px;
padding:0;
display: flex;
align-items: center;
justify-content: center;
}
span{
margin: 0 30px 0 30px;
@@ -171,17 +182,80 @@
}
}
.footer{
.depot-footer{
height:80px;
float: right;
display: flex;
align-items: center;
button.blue-reverse{
background-image: linear-gradient(to bottom,@color-nice-blue,@color-darkish-blue);
color: @color-background-white;
font-size: 18px;
font-weight: 600;
width: 100%;
.depot-footer-left, .depot-footer-right{
height: 100%;
display: flex;
align-items: center;
}
.depot-footer-left{
float: left;
input[type=checkbox]{
visibility: hidden;
}
.depot-checkbox {
width: 24px;
height: 24px;
display: flex;
margin-left: 16px;
align-items: center;
position: relative;
}
.depot-checkbox label {
cursor: pointer;
position: absolute;
width: 24px;
height: 24px;
top: 0;
left: 0;
background: #fff;
border:1px solid @color-clear-blue;
border-radius: 2px;
}
.depot-checkbox label:after {
opacity: 0.2;
content: '';
position: absolute;
width: 16px;
height: 9px;
background: transparent;
top: 3px;
left: 2px;
border: 5px solid #1791ff;
border-top: none;
border-right: none;
transform: rotate(-48deg);
}
.depot-checkbox label:hover::after {
opacity: 0.5;
}
.depot-checkbox input[type=checkbox]:checked + label:after {
opacity: 1;
}
.depot-checkbox-label{
display: flex;
margin-left: 8px;
font-size: 18px;
line-height: 1.11;
color: @color-greyish-brown;
}
}
.depot-footer-right{
float: right;
button.blue-reverse{
background-image: linear-gradient(to bottom,@color-nice-blue,@color-darkish-blue);
color: @color-background-white;
font-size: 18px;
font-weight: 600;
}
}
}
}
}
Step/wwwroot/assets/styles/base/info-equipment.less
+89
View File
@@ -0,0 +1,89 @@
// out: false, sourceMap: false, main: ../style.less
@import "colors.less";
.info-equipment-container{
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
.info-equipment-box{
width: 896px;
height: 680px;
border-radius: 2px;
background-color: @color-background-white;
box-shadow: 0 3px 5px 0 @color-black-40;
.info-equipment-header{
width: 100%;
height: 50px;
color: @color-darkish-blue;
border-bottom: solid 2px @color-white2;
.info-equipment-header-label{
font-size: 20px;
padding: 16px 0 0 24px;
}
>.fa{
float: right;
font-size: 28px;
margin-top: 16px;
margin-right: 16px;
}
}
.info-equipment-body{
height: calc(~'100% - 52px');
width: 100%;
display: flex;
flex-flow: row;
.info-equipment-body-left{
width: 320px;
height: 100%;
display: flex;
justify-content: center;
img{
width: 280px;
height: 280px;
margin-top: 36px;
background-color: @color-whitegrey;
}
}
.info-equipment-body-right{
width: calc(~'100% - 320px');
height: calc(~'100% - 52px');
table{
width: 97%;
height: calc(~'100% - 32px');
overflow-y: auto;
display: flex;
margin-top: 32px;
tbody{
tr{
display: flex;
width:100%;
flex-flow: row;
td.columnleft,td.columnright{
height: 32px;
background-color: @color-white2;
margin: 4px;
font-size: 18px;
line-height: 1.11;
display: flex;
align-items: center;
color: @color-greyish-brown;
span{
margin-left: 16px;
}
}
td.columnleft{
width: 256px;
font-weight: 600;
}
td.columnright{
width: 216px;
}
}
}
}
}
}
}
}
Step/wwwroot/assets/styles/base/layout.less
+4 -2
View File
@@ -15,14 +15,16 @@
@import "keypad.less";
@import "back-view.less";
@import "head.less";
@import "tooling.less";
@import "card.less";
@import "depot.less";
@import "summary-depot.less";
@import "assisted-tooling.less";
@import "tooling-equipment.less";
@import "info-equipment.less";
@import "utilities.less";
@import "maintenance.less";
@import "maintenance-progress.less";
@background-color: rgb(216, 216, 216);
@handle-width: 48px;
Step/wwwroot/assets/styles/base/maintenance-progress.less
+43
View File
@@ -0,0 +1,43 @@
// out: false, sourceMap: false, main: ../style.less
@import "colors.less";
.maintenance-progress{
width: 297px;
height: 36px;
display: flex;
flex-flow: row;
background-color: @color-background-white;
.progress, .yellow, .red{
width: 16px;
height: 32px;
border-radius: 2px;
margin: 0 2px 0 2px;
}
.progress{
border: solid 2px #8eb5e2;
}
.yellow{
border: solid 2px @color-squash;
}
.red{
border: solid 2px @color-scarlet;
}
.progress.fill{
background-color: #8eb5e2;
}
.yellow.fill{
background-color: @color-squash;
}
.red.fill{
background-color: @color-scarlet;
}
label{
display: flex;
align-items: center;
font-size: 14px;
line-height: 1.29;
margin-left: 16px;
color: @color-greyish-brown;
}
}
Step/wwwroot/assets/styles/base/maintenance.less
+148
View File
@@ -0,0 +1,148 @@
// out: false, sourceMap: false, main: ../style.less
@import "colors.less";
.maintenance-container{
height: 100%;
width: 100%;
display: flex;
justify-content: center;
padding-top: 104px;
.maintenance-box{
width: 1808px;
height: 872px;
border-radius: 2px;
background-color: @color-background-white;
box-shadow: 0 1px 2px 0 @color-black-40;
.maintenance-header{
height: 64px;
display: flex;
align-items: center;
border-bottom: solid 2px @color-whitethree;
.maintenance-header-label{
margin-left: 23px;
font-size: 20px;
color: @color-darkish-blue;
}
}
.maintenance-body{
width: 1808px;
height: calc(~'100% - 66px');
display: flex;
flex-flow: row;
align-items: center;
justify-content: center;
.maintenance-box-left{
width: 952px;
height: 100%;
display: flex;
flex-flow: column;
margin: 0 24px 0 24px;
.maintenance-box-left-head{
display: flex;
flex-flow: row;
margin: 16px 0 16px 0;
> div {
height: 70px;
display: flex;
flex-flow: column;
margin-right: 12px;
label{
font-size: 14px;
line-height: 1.29;
color: @color-warm-grey;
margin-bottom: 4px;
}
select{
border-radius: 2px;
height: 48px;
box-shadow: 0 1px 2px 0 @color-black-40;
border: solid 1px @color-silver;
font-size: 18px;
line-height: 1.11;
color: @color-greyish-brown;
padding-left: 16px;
}
select.maintenance-select-interval-date{
width: 192px;
}
select.maintenance-select-state{
width: 144px;
}
input{
width: 288px;
height: 48px;
border-radius: 2px;
box-shadow: 0 1px 3px 0 @color-black-50;
border: solid 1px @color-silver;
font-size: 18px;
line-height: 1.11;
color: @color-silver;
padding-left: 16px;
}
}
}
.maintenance-box-left-body{
width: 952px;
height: 680px;
border-radius: 2px;
border: solid 1px @color-label-grey;
table{
height: 100%;
width: 100%;
border-collapse: collapse;
thead tr th{
border-bottom: solid 2px @color-label-grey;
height: 46px;
}
tbody{
height: 100%;
tr{
padding: 0;
}
}
tbody tr td{
text-align: center;
div.maintenance-progress{
margin: 0 auto;
}
}
tfoot tr td{
height: 64px;
width: 100%;
font-size: 18px;
color: @color-darkish-blue;
border-top: solid 2px @color-silver;
td{
padding: 0;
}
div.group-label-button{
text-align: center;
margin: 8px 0 8px 0;
button{
background-image: linear-gradient(to bottom,@color-nice-blue,@color-darkish-blue);
color: @color-white;
width: 48px;
height: 48px;
padding: 0;
.fa{
width: 22px;
height: 22px;
}
}
}
}
}
}
}
.maintenance-box-right{
width: 784px;
height: 760px;
display: flex;
background-color: white;
margin-right: 24px;
}
}
}
}
Step/wwwroot/assets/styles/base/tooling-equipment.less
+15 -2
View File
@@ -139,8 +139,21 @@
align-items: center;
justify-content: center;
overflow-y: auto;
div.skill-equipment{
margin: 8px;
.list-skill-equipment-category{
display: flex;
flex-flow: column;
.skill-equipment-category{
display: flex;
align-items: center;
justify-content: center;
margin-top: 32px;
font-size: 18px;
line-height: 1.11;
color: @color-greyish-brown;
}
div.skill-equipment{
margin: 8px;
}
}
}
}
Step/wwwroot/assets/styles/base/utilities.less
+40
View File
@@ -0,0 +1,40 @@
// out: false, sourceMap: false, main: ../style.less
@import "colors.less";
.utilities-container{
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
.utilities-box{
height: 759px;
width: 1504px;
background-color: @color-background-white;
border-radius: 2px;
box-shadow: 0 1px 2px 0 @color-black-40;
.utilities-header{
height: 65px;
width: 100%;
display: flex;
align-items: center;
span{
font-size: 24px;
font-weight: 600;
color: @color-darkish-blue;
margin-left: 24px;
}
}
.utilities-body{
height: calc(~'100% - 65px');
width: 100%;
background-color: @color-silver;
display: flex;
flex-flow: row;
.card-utilities{
margin-left:24px;
margin-top: 35px;
}
}
}
}
Step/wwwroot/assets/styles/style.css
+461 -13
View File
@@ -2765,6 +2765,49 @@ footer .container button.big:before {
.load-equipment .arrow .fa-arrow-down {
color: #DC4557;
}
.card-utilities {
width: 288px;
height: 216px;
border-radius: 2px;
background-color: #f1f1f1;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
}
.card-utilities .card-utilities-header {
height: 64px;
width: 100%;
border-bottom: solid 2px #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
color: #002680;
}
.card-utilities .card-utilities-body {
height: calc(100% - 66px);
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.card-utilities .card-utilities-body button {
width: 272px;
height: 136px;
display: flex;
align-items: center;
justify-content: center;
background: #f1f1f1;
}
.card-utilities .card-utilities-body .card-utilities-body-label {
width: 104px;
height: 104px;
display: flex;
align-items: center;
justify-content: center;
background-color: #fff;
font-size: 48px;
font-weight: 600;
color: #002680;
}
.depot-container {
height: 100%;
width: 100%;
@@ -2780,14 +2823,21 @@ footer .container button.big:before {
background-color: #fff;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
}
.depot-container .depot-box .header {
font-size: 20px;
color: #002680;
.depot-container .depot-box .depot-header .depot-header-left,
.depot-container .depot-box .depot-header .depot-header-right {
height: 81px;
display: flex;
align-items: center;
}
.depot-container .depot-box .header .fa {
.depot-container .depot-box .depot-header .depot-header-left {
float: left;
font-size: 20px;
color: #002680;
}
.depot-container .depot-box .depot-header .depot-header-right {
float: right;
}
.depot-container .depot-box .depot-header .fa {
height: 18px;
width: 13px;
margin: 0 22px 0 29px;
@@ -2845,8 +2895,8 @@ footer .container button.big:before {
}
.depot-container .depot-box .depot-boxbody .box-right {
height: 100%;
width: 100%;
min-width: calc(100% - 440px);
max-width: calc(100% - 92px);
display: flex;
flex-flow: column;
align-items: center;
@@ -2875,7 +2925,9 @@ footer .container button.big:before {
.depot-container .depot-box .depot-boxbody .box-right .single-depot .sd-header button {
width: 48px;
height: 48px;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
}
.depot-container .depot-box .depot-boxbody .box-right .single-depot .sd-header span {
margin: 0 30px 0 30px;
@@ -2927,13 +2979,72 @@ footer .container button.big:before {
justify-content: space-between;
background-color: #002680;
}
.depot-container .depot-box .footer {
.depot-container .depot-box .depot-footer {
height: 80px;
float: right;
width: 100%;
}
.depot-container .depot-box .depot-footer .depot-footer-left,
.depot-container .depot-box .depot-footer .depot-footer-right {
height: 100%;
display: flex;
align-items: center;
}
.depot-container .depot-box .footer button.blue-reverse {
.depot-container .depot-box .depot-footer .depot-footer-left {
float: left;
}
.depot-container .depot-box .depot-footer .depot-footer-left input[type=checkbox] {
visibility: hidden;
}
.depot-container .depot-box .depot-footer .depot-footer-left .depot-checkbox {
width: 24px;
height: 24px;
display: flex;
margin-left: 16px;
align-items: center;
position: relative;
}
.depot-container .depot-box .depot-footer .depot-footer-left .depot-checkbox label {
cursor: pointer;
position: absolute;
width: 24px;
height: 24px;
top: 0;
left: 0;
background: #fff;
border: 1px solid #1791ff;
border-radius: 2px;
}
.depot-container .depot-box .depot-footer .depot-footer-left .depot-checkbox label:after {
opacity: 0.2;
content: '';
position: absolute;
width: 16px;
height: 9px;
background: transparent;
top: 3px;
left: 2px;
border: 5px solid #1791ff;
border-top: none;
border-right: none;
transform: rotate(-48deg);
}
.depot-container .depot-box .depot-footer .depot-footer-left .depot-checkbox label:hover::after {
opacity: 0.5;
}
.depot-container .depot-box .depot-footer .depot-footer-left .depot-checkbox input[type=checkbox]:checked + label:after {
opacity: 1;
}
.depot-container .depot-box .depot-footer .depot-footer-left .depot-checkbox-label {
display: flex;
margin-left: 8px;
font-size: 18px;
line-height: 1.11;
color: #4b4b4b;
}
.depot-container .depot-box .depot-footer .depot-footer-right {
float: right;
}
.depot-container .depot-box .depot-footer .depot-footer-right button.blue-reverse {
background-image: linear-gradient(to bottom, #1756ad, #002680);
color: #fff;
font-size: 18px;
@@ -3092,11 +3203,28 @@ footer .container button.big:before {
font-size: 20px;
padding: 19px 0 0 24px;
}
.assisted-tooling-container .assisted-tooling-box .assisted-tooling-header > .fa {
float: right;
font-size: 28px;
.assisted-tooling-container .assisted-tooling-box .assisted-tooling-header button.close {
display: flex;
width: 28px;
height: 28px;
border-radius: 50%;
border: none;
background-color: #002680;
color: #fff;
margin-top: 15px;
margin-right: 14px;
font-size: 16px;
float: right;
cursor: pointer;
}
.assisted-tooling-container .assisted-tooling-box .assisted-tooling-header button.close .fa {
display: flex;
margin-left: auto;
margin-right: auto;
}
.assisted-tooling-container .assisted-tooling-box .assisted-tooling-header button.close:active {
background-color: #1791ff;
color: #fff;
}
.assisted-tooling-container .assisted-tooling-box .assisted-tooling-body {
width: 100%;
@@ -3266,7 +3394,20 @@ footer .container button.big:before {
justify-content: center;
overflow-y: auto;
}
.tooling-equipment-container .tooling-equipment-box .tooling-equipment-body .box-right .list-skill-equipment div.skill-equipment {
.tooling-equipment-container .tooling-equipment-box .tooling-equipment-body .box-right .list-skill-equipment .list-skill-equipment-category {
display: flex;
flex-flow: column;
}
.tooling-equipment-container .tooling-equipment-box .tooling-equipment-body .box-right .list-skill-equipment .list-skill-equipment-category .skill-equipment-category {
display: flex;
align-items: center;
justify-content: center;
margin-top: 32px;
font-size: 18px;
line-height: 1.11;
color: #4b4b4b;
}
.tooling-equipment-container .tooling-equipment-box .tooling-equipment-body .box-right .list-skill-equipment .list-skill-equipment-category div.skill-equipment {
margin: 8px;
}
.tooling-equipment-container .tooling-equipment-box .tooling-equipment-footer {
@@ -3281,6 +3422,313 @@ footer .container button.big:before {
font-size: 18px;
font-weight: 600;
}
.info-equipment-container {
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.info-equipment-container .info-equipment-box {
width: 896px;
height: 680px;
border-radius: 2px;
background-color: #fff;
box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.4);
}
.info-equipment-container .info-equipment-box .info-equipment-header {
width: 100%;
height: 50px;
color: #002680;
border-bottom: solid 2px #f1f1f1;
}
.info-equipment-container .info-equipment-box .info-equipment-header .info-equipment-header-label {
font-size: 20px;
padding: 16px 0 0 24px;
}
.info-equipment-container .info-equipment-box .info-equipment-header > .fa {
float: right;
font-size: 28px;
margin-top: 16px;
margin-right: 16px;
}
.info-equipment-container .info-equipment-box .info-equipment-body {
height: calc(100% - 52px);
width: 100%;
display: flex;
flex-flow: row;
}
.info-equipment-container .info-equipment-box .info-equipment-body .info-equipment-body-left {
width: 320px;
height: 100%;
display: flex;
justify-content: center;
}
.info-equipment-container .info-equipment-box .info-equipment-body .info-equipment-body-left img {
width: 280px;
height: 280px;
margin-top: 36px;
background-color: #dddddd;
}
.info-equipment-container .info-equipment-box .info-equipment-body .info-equipment-body-right {
width: calc(100% - 320px);
height: calc(100% - 52px);
}
.info-equipment-container .info-equipment-box .info-equipment-body .info-equipment-body-right table {
width: 97%;
height: calc(100% - 32px);
overflow-y: auto;
display: flex;
margin-top: 32px;
}
.info-equipment-container .info-equipment-box .info-equipment-body .info-equipment-body-right table tbody tr {
display: flex;
width: 100%;
flex-flow: row;
}
.info-equipment-container .info-equipment-box .info-equipment-body .info-equipment-body-right table tbody tr td.columnleft,
.info-equipment-container .info-equipment-box .info-equipment-body .info-equipment-body-right table tbody tr td.columnright {
height: 32px;
background-color: #f1f1f1;
margin: 4px;
font-size: 18px;
line-height: 1.11;
display: flex;
align-items: center;
color: #4b4b4b;
}
.info-equipment-container .info-equipment-box .info-equipment-body .info-equipment-body-right table tbody tr td.columnleft span,
.info-equipment-container .info-equipment-box .info-equipment-body .info-equipment-body-right table tbody tr td.columnright span {
margin-left: 16px;
}
.info-equipment-container .info-equipment-box .info-equipment-body .info-equipment-body-right table tbody tr td.columnleft {
width: 256px;
font-weight: 600;
}
.info-equipment-container .info-equipment-box .info-equipment-body .info-equipment-body-right table tbody tr td.columnright {
width: 216px;
}
.utilities-container {
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.utilities-container .utilities-box {
height: 759px;
width: 1504px;
background-color: #fff;
border-radius: 2px;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
}
.utilities-container .utilities-box .utilities-header {
height: 65px;
width: 100%;
display: flex;
align-items: center;
}
.utilities-container .utilities-box .utilities-header span {
font-size: 24px;
font-weight: 600;
color: #002680;
margin-left: 24px;
}
.utilities-container .utilities-box .utilities-body {
height: calc(100% - 65px);
width: 100%;
background-color: #bbbcbc;
display: flex;
flex-flow: row;
}
.utilities-container .utilities-box .utilities-body .card-utilities {
margin-left: 24px;
margin-top: 35px;
}
.maintenance-container {
height: 100%;
width: 100%;
display: flex;
justify-content: center;
padding-top: 104px;
}
.maintenance-container .maintenance-box {
width: 1808px;
height: 872px;
border-radius: 2px;
background-color: #fff;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
}
.maintenance-container .maintenance-box .maintenance-header {
height: 64px;
display: flex;
align-items: center;
border-bottom: solid 2px #e7e7e7;
}
.maintenance-container .maintenance-box .maintenance-header .maintenance-header-label {
margin-left: 23px;
font-size: 20px;
color: #002680;
}
.maintenance-container .maintenance-box .maintenance-body {
width: 1808px;
height: calc(100% - 66px);
display: flex;
flex-flow: row;
align-items: center;
justify-content: center;
}
.maintenance-container .maintenance-box .maintenance-body .maintenance-box-left {
width: 952px;
height: 100%;
display: flex;
flex-flow: column;
margin: 0 24px 0 24px;
}
.maintenance-container .maintenance-box .maintenance-body .maintenance-box-left .maintenance-box-left-head {
display: flex;
flex-flow: row;
margin: 16px 0 16px 0;
}
.maintenance-container .maintenance-box .maintenance-body .maintenance-box-left .maintenance-box-left-head > div {
height: 70px;
display: flex;
flex-flow: column;
margin-right: 12px;
}
.maintenance-container .maintenance-box .maintenance-body .maintenance-box-left .maintenance-box-left-head > div label {
font-size: 14px;
line-height: 1.29;
color: #878787;
margin-bottom: 4px;
}
.maintenance-container .maintenance-box .maintenance-body .maintenance-box-left .maintenance-box-left-head > div select {
border-radius: 2px;
height: 48px;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
border: solid 1px #bbbcbc;
font-size: 18px;
line-height: 1.11;
color: #4b4b4b;
padding-left: 16px;
}
.maintenance-container .maintenance-box .maintenance-body .maintenance-box-left .maintenance-box-left-head > div select.maintenance-select-interval-date {
width: 192px;
}
.maintenance-container .maintenance-box .maintenance-body .maintenance-box-left .maintenance-box-left-head > div select.maintenance-select-state {
width: 144px;
}
.maintenance-container .maintenance-box .maintenance-body .maintenance-box-left .maintenance-box-left-head > div input {
width: 288px;
height: 48px;
border-radius: 2px;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.5);
border: solid 1px #bbbcbc;
font-size: 18px;
line-height: 1.11;
color: #bbbcbc;
padding-left: 16px;
}
.maintenance-container .maintenance-box .maintenance-body .maintenance-box-left .maintenance-box-left-body {
width: 952px;
height: 680px;
border-radius: 2px;
border: solid 1px #979797;
}
.maintenance-container .maintenance-box .maintenance-body .maintenance-box-left .maintenance-box-left-body table {
height: 100%;
width: 100%;
border-collapse: collapse;
}
.maintenance-container .maintenance-box .maintenance-body .maintenance-box-left .maintenance-box-left-body table thead tr th {
border-bottom: solid 2px #979797;
height: 46px;
}
.maintenance-container .maintenance-box .maintenance-body .maintenance-box-left .maintenance-box-left-body table tbody {
height: 100%;
}
.maintenance-container .maintenance-box .maintenance-body .maintenance-box-left .maintenance-box-left-body table tbody tr {
padding: 0;
}
.maintenance-container .maintenance-box .maintenance-body .maintenance-box-left .maintenance-box-left-body table tbody tr td {
text-align: center;
}
.maintenance-container .maintenance-box .maintenance-body .maintenance-box-left .maintenance-box-left-body table tbody tr td div.maintenance-progress {
margin: 0 auto;
}
.maintenance-container .maintenance-box .maintenance-body .maintenance-box-left .maintenance-box-left-body table tfoot tr td {
height: 64px;
width: 100%;
font-size: 18px;
color: #002680;
border-top: solid 2px #bbbcbc;
}
.maintenance-container .maintenance-box .maintenance-body .maintenance-box-left .maintenance-box-left-body table tfoot tr td td {
padding: 0;
}
.maintenance-container .maintenance-box .maintenance-body .maintenance-box-left .maintenance-box-left-body table tfoot tr td div.group-label-button {
text-align: center;
margin: 8px 0 8px 0;
}
.maintenance-container .maintenance-box .maintenance-body .maintenance-box-left .maintenance-box-left-body table tfoot tr td div.group-label-button button {
background-image: linear-gradient(to bottom, #1756ad, #002680);
color: #fff;
width: 48px;
height: 48px;
padding: 0;
}
.maintenance-container .maintenance-box .maintenance-body .maintenance-box-left .maintenance-box-left-body table tfoot tr td div.group-label-button button .fa {
width: 22px;
height: 22px;
}
.maintenance-container .maintenance-box .maintenance-body .maintenance-box-right {
width: 784px;
height: 760px;
display: flex;
background-color: white;
margin-right: 24px;
}
.maintenance-progress {
width: 297px;
height: 36px;
display: flex;
flex-flow: row;
background-color: #fff;
}
.maintenance-progress .progress,
.maintenance-progress .yellow,
.maintenance-progress .red {
width: 16px;
height: 32px;
border-radius: 2px;
margin: 0 2px 0 2px;
}
.maintenance-progress .progress {
border: solid 2px #8eb5e2;
}
.maintenance-progress .yellow {
border: solid 2px #f5a623;
}
.maintenance-progress .red {
border: solid 2px #d0021b;
}
.maintenance-progress .progress.fill {
background-color: #8eb5e2;
}
.maintenance-progress .yellow.fill {
background-color: #f5a623;
}
.maintenance-progress .red.fill {
background-color: #d0021b;
}
.maintenance-progress label {
display: flex;
align-items: center;
font-size: 14px;
line-height: 1.29;
margin-left: 16px;
color: #4b4b4b;
}
.persona {
height: 88px;
width: 88px;
Step/wwwroot/src/app.modules.js
+15
View File
@@ -41,6 +41,21 @@ export const AssistedTooling = () =>
export const ToolingEquipment = () =>
import ("./components/tooling-equipment.vue");
export const InfoEquipment = () =>
import ("./components/info-equipment.vue");
export const Maintenance = () =>
import ("./components/maintenance.vue");
/* Da cancellare dopo sviluppo */
export const MaintenanceProgress = () =>
import ("./modules/base-components/maintenance-progress.vue");
export const Utilities = () =>
import ("./components/utilities.vue");
export const CardUtilities = () =>
import ("./modules/base-components/cards/card-utilities.vue");
// Test pages
Step/wwwroot/src/app.routes.js
+14 -2
View File
@@ -8,6 +8,11 @@ import {
SummaryDepot,
AssistedTooling,
ToolingEquipment,
InfoEquipment,
Utilities,
CardUtilities,
Maintenance,
MaintenanceProgress
} from "./app.modules";
@@ -20,11 +25,18 @@ export let routes = [
{ path: "/summary-depot", component: SummaryDepot, meta: { title: "Step - Summary-Depot", area: "summary-depot" } },
{ path: "/assisted-tooling", component: AssistedTooling, meta: { title: "Step - Assisted-Tooling", area: "assisted-tooling" } },
{ path: "/tooling-equipment", component: ToolingEquipment, meta: { title: "Step - Tooling-Equipment", area: "tooling-equipment" } },
{ path: "/info-equipment", component: InfoEquipment, meta: { title: "Step - Info-Equipment", area: "info-equipment" } },
{ path: "/utilities", component: Utilities, meta: { title: "Step - Utilities", area: "utilities" } },
{ path: "/card-utilities", component: CardUtilities, meta: { title: "Step - Card-Utilities", area: "card-utilities" } },
/* Da cancellare dopo sviluppo */
{ path: "/maintenance-progress", component: MaintenanceProgress, meta: { title: "Step - Maintenance-Progress", area: "maintenance-progress" } },
{ path: "/report", meta: { title: "Step - Reports", area: "report" } },
{ path: "/alarms", meta: { title: "Step - Alarms", area: "alarms" } },
{ path: "/maintenance", meta: { title: "Step - Maintenance", area: "maintenance" } },
{ path: "/utilities", meta: { title: "Step - Utility", area: "utilities" } },
{ path: "/maintenance", component: Maintenance, meta: { title: "Step - Maintenance", area: "maintenance" } },
/* path precedente cosa fare? Non ha il component */
// { path: "/utilities", meta: { title: "Step - Utility", area: "utilities" } },
{ path: "/scada", meta: { title: "", area: "scada" } },
{ path: "/test/loader", component: TestLoader, name: "testloader" },
{ path: "/test/empty", component: TestEmpty, name: "testloader" },
Step/wwwroot/src/components/assisted-tooling.vue
+1 -1
View File
@@ -2,7 +2,7 @@
<div class="assisted-tooling-container">
<div class="assisted-tooling-box">
<div class="assisted-tooling-header">
<i class="fa fa-times-circle"></i>
<button class="close"><i class="fa fa-remove"></i></button>
<div class="assisted-tooling-header-label">Attrezzaggio assistito - Magazzino 1</div>
</div>
<div class="assisted-tooling-body">
Step/wwwroot/src/components/depot.vue
+29 -9
View File
@@ -1,11 +1,16 @@
<template>
<div class="depot-container">
<div class="depot-box">
<div class="header">
<i class="fa fa-chevron-left"></i>Magazzino 1 - Lineare
<div class="depot-header">
<div class="depot-header-left">
<i class="fa fa-chevron-left"></i>Magazzino 1 - Lineare
</div>
<div class="depot-header-right">
<button class="btn" v-if="true">{{'depot_button_assistedtooling' | localize("Attrezzaggio automatico")}}</button>
</div>
</div>
<div class="depot-boxbody">
<div class="list-left">
<div class="list-left" v-if="true">
<span class="depot-search-label">{{'depot_label_search' | localize("Seleziona un utensile e posizionalo nel magazzino corrispondente:")}}</span>
<div class="depot-search">
<input type="text">
@@ -32,9 +37,9 @@
<div class="box-right">
<div class="single-depot">
<div class="sd-header">
<button class="btn"><i class="fa fa-chevron-left"></i></button>
<button class="btn" :v-if="false"><i class="fa fa-chevron-left"></i></button>
<span>Magazzino 1 - Lineare</span>
<button class="btn"><i class="fa fa-chevron-right"></i></button>
<button class="btn" :v-if="false"><i class="fa fa-chevron-right"></i></button>
</div>
<div class="sd-section scrollable">
<detail-card number="2">Inserisci</detail-card>
@@ -56,9 +61,24 @@
</div>
</div>
<div class="footer">
<button class="btn">{{'depot_button_cancel' | localize("Annulla")}}</button>
<button class="btn blue-reverse">{{'depot_button_save' | localize("Salva")}}</button>
<div class="depot-footer">
<div class="depot-footer-left">
<!-- <div class="depot-checkbox" >
<input type="checkbox">
<label></label>
{{'depot_checkbox_viewstate_equipment' | localize('Visualizza stato utensili')}}
</div> -->
<div class="depot-checkbox">
<input type="checkbox" value="1" id="depotCheckbox" name="" />
<label for="depotCheckbox"></label>
</div>
<label class="depot-checkbox-label">{{'depot_checkbox_viewstate_equipment' | localize('Visualizza stato utensili')}}</label>
</div>
<div class="depot-footer-right">
<button class="btn" v-if="true">{{'depot_button_cancel' | localize("Annulla")}}</button>
<button class="btn blue-reverse" v-if="true">{{'depot_button_save' | localize("Salva")}}</button>
<button class="btn" v-if="false">{{'depot_button_modify' | localize("Modifica")}}</button>
</div>
</div>
</div>
</div>
@@ -67,6 +87,6 @@
import tool from "src/modules/base-components/cards/tool.vue";
import detailCard from "src/modules/base-components/cards/detail-card.vue";
export default {
components:{tool, detailCard}
components:{tool, detailCard},
}
</script>
Step/wwwroot/src/components/info-equipment.vue
+48
View File
@@ -0,0 +1,48 @@
<template>
<div class="info-equipment-container">
<div class="info-equipment-box">
<div class="info-equipment-header">
<i class="fa fa-times-circle"></i>
<div class="info-equipment-header-label">Attrezzaggio assistito - Magazzino 1</div>
</div>
<div class="info-equipment-body">
<div class="info-equipment-body-left">
<img :src="imgSource" alt="">
</div>
<div class="info-equipment-body-right">
<table class="scrollable">
<tbody>
<tr>
<td class="columnleft"><span>Nome</span></td>
<td class="columnright"><span>Test</span></td>
</tr>
<tr>
<td class="columnleft"><span>Prova</span></td>
<td class="columnright"><span>Test2</span></td>
</tr>
<tr>
<td class="columnleft"><span>Prova</span></td>
<td class="columnright"><span>Test2</span></td>
</tr>
<tr>
<td class="columnleft"><span>Prova</span></td>
<td class="columnright"><span>Test2</span></td>
</tr>
<tr>
<td class="columnleft"><span>Prova</span></td>
<td class="columnright"><span>Test2</span></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
props:{
imgSource: {default:"../assets/icons/png/attrezzaggio-BIG@3x.png"}
}
}
</script>
Step/wwwroot/src/components/maintenance.vue
+74
View File
@@ -0,0 +1,74 @@
<template>
<div class="maintenance-container">
<div class="maintenance-box">
<div class="maintenance-header">
<div class="maintenance-header-label">
{{'maintenance_header_title' | localize("Manutenzione")}}
</div>
</div>
<div class="maintenance-body">
<div class="maintenance-box-left">
<div class="maintenance-box-left-head">
<div>
<label>{{'maintenance_header_label_date' | localize("Intervallo date")}}</label>
<select class="maintenance-select-interval-date"><option>Ultimo mese</option></select>
</div>
<div>
<label>{{'maintenance_header_label_procedure' | localize("Nome procedura")}}</label>
<input class="maintenance-input-procedure" type="text" placeholder="Nome della procedura">
</div>
<div>
<label>{{'maintenance_header_label_state' | localize("Stato")}}</label>
<select class="maintenance-select-state"><option>Tutti</option></select>
</div>
</div>
<div class="maintenance-box-left-body">
<table>
<thead>
<tr>
<th>Titolo</th>
<th>Contatore</th>
<th>Scadenza</th>
<th>Stato</th>
</tr>
</thead>
<tbody>
<tr>
<td>Effettuare la pulizia</td>
<td><maintenanceprogress></maintenanceprogress></td>
<td>7 gg</td>
<td>In scadenza</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4"><div class="group-label-button">{{'maintenance_label_create_intervention' | localize("Crea un intervento di manutenzione")}}<button class="btn"><i class="fa fa-plus"></i></button></div></td>
</tr>
</tfoot>
</table>
</div>
<div class="maintenance-box-left-footer">
</div>
</div>
<div class="maintenance-box-right">
<div class="maintenance-box-right-head">
</div>
<div class="maintenance-box-right-body">
</div>
<div class="maintenance-box-right-footer">
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import maintenanceprogress from "src/modules/base-components/maintenance-progress.vue";
export default {
components:{maintenanceprogress}
}
</script>
Step/wwwroot/src/components/tooling-equipment.vue
+110 -14
View File
@@ -32,23 +32,119 @@
<div class="group-label-button">{{'tooling_equipment_label_add' | localize("Aggiungi utensile")}}<button class="btn"><i class="fa fa-plus"></i></button></div>
</div>
</div>
<div class="box-right">
<!-- Siemens -->
<div class="box-right" v-if="false">
<button class="btn"><i class="fa fa-trash"></i></button>
<div class="box-right-label-header">Modifica di E13 utensile XYZ</div>
<div class="list-skill-equipment scrollable">
<skillequipment title="Utensile" is-input="true"></skillequipment>
<skillequipment title="Famiglia" is-select="true"></skillequipment>
<skillequipment></skillequipment>
<skillequipment></skillequipment>
<skillequipment></skillequipment>
<skillequipment></skillequipment>
<skillequipment></skillequipment>
<skillequipment></skillequipment>
<skillequipment></skillequipment>
<skillequipment></skillequipment>
<skillequipment></skillequipment>
<skillequipment></skillequipment>
<skillequipment></skillequipment>
<div class="list-skill-equipment-category">
<div class="skill-equipment-category">Generali</div>
<skillequipment title="Id" is-input-number-read-only="true"></skillequipment>
<skillequipment title="Tipo Utensile" is-select="true"></skillequipment>
</div>
<div class="list-skill-equipment-category">
<div class="skill-equipment-category">Famiglia</div>
<skillequipment title="Nome" is-input-read-only="true"></skillequipment>
<skillequipment title="Id Figlio" is-input-number-read-only="true"></skillequipment>
</div>
<div class="list-skill-equipment-category">
<div class="skill-equipment-category">Stato</div>
<skillequipment title="Ut. Attivato" is-toggle="true"></skillequipment>
<skillequipment title="Ut. Inibito" is-toggle="true"></skillequipment>
<skillequipment title="Ut. Misurato" is-toggle="true"></skillequipment>
<skillequipment title="Ut. in Preali" is-toggle="true"></skillequipment>
<skillequipment title="Ut. in CU" is-toggle="true"></skillequipment>
<skillequipment title="Ut. Posto fisso" is-toggle="true"></skillequipment>
<skillequipment title="Ut. in uso" is-toggle="true"></skillequipment>
</div>
<div class="list-skill-equipment-category">
<div class="skill-equipment-category">Testa</div>
<skillequipment title="Rotazione" is-select="true"></skillequipment>
</div>
<div class="list-skill-equipment-category">
<div class="skill-equipment-category"></div>
<skillequipment title="Raffredd 1" is-toggle="true"></skillequipment>
<skillequipment title="Raffredd 2" is-toggle="true"></skillequipment>
</div>
<div class="list-skill-equipment-category">
<div class="skill-equipment-category">Dimensione in magazzino</div>
<skillequipment title="N. Manine Dx" is-toggle="true"></skillequipment>
<skillequipment title="N. Manine Sx" is-toggle="true"></skillequipment>
</div>
<div class="list-skill-equipment-category">
<div class="skill-equipment-category">Generali</div>
<skillequipment title="Id" is-input-number-read-only="true"></skillequipment>
</div>
<div class="list-skill-equipment-category">
<div class="skill-equipment-category">Geometria</div>
<skillequipment title="Parameter 1..N" is-input-number="true"></skillequipment>
</div>
<div class="list-skill-equipment-category">
<div class="skill-equipment-category">Vita Ut.</div>
<skillequipment title="Tipo Vita" is-select="true"></skillequipment>
<skillequipment title="Vita residua" is-input-number="true"></skillequipment>
<skillequipment title="Vita Nominale" is-input-number="true"></skillequipment>
<skillequipment title="Vita Preallarme" is-input-number="true"></skillequipment>
</div>
</div>
</div>
<!-- Osai - Fanuc -->
<div class="box-right" v-if="true">
<button class="btn"><i class="fa fa-trash"></i></button>
<div class="box-right-label-header">Modifica di E13 utensile XYZ</div>
<div class="list-skill-equipment scrollable">
<div class="list-skill-equipment-category">
<div class="skill-equipment-category">Generali</div>
<skillequipment title="Id" is-input-number-read-only="true"></skillequipment>
<skillequipment title="Tipo Utensile" is-select="true"></skillequipment>
<skillequipment title="Ut. Disabilitato" is-toggle="true"></skillequipment>
<skillequipment title="Ut. Rotto" is-toggle="true"></skillequipment>
<skillequipment title="Ut. Misurato" is-toggle="true"></skillequipment>
</div>
<div class="list-skill-equipment-category">
<div class="skill-equipment-category">Famiglia</div>
<skillequipment title="Id" is-input-number-read-only="true"></skillequipment>
<skillequipment title="Descrizione" is-input="true"></skillequipment>
<skillequipment title="Rotazione" is-select="true"></skillequipment>
<skillequipment title="Tcp Associata" is-select="true"></skillequipment>
<skillequipment title="Raffredd 1" is-toggle="true"></skillequipment>
<skillequipment title="Raffredd 2" is-toggle="true"></skillequipment>
<skillequipment title="Raffredd 3" is-toggle="true"></skillequipment>
<skillequipment title="Raffredd 4" is-toggle="true"></skillequipment>
<skillequipment title="Raffredd 5" is-toggle="true"></skillequipment>
<skillequipment title="Raffredd 6" is-toggle="true"></skillequipment>
<skillequipment title="Raffredd 7" is-toggle="true"></skillequipment>
<skillequipment title="Raffredd 8" is-toggle="true"></skillequipment>
<skillequipment title="Vita Nominale" is-input-number="true"></skillequipment>
<skillequipment title="Delta Ravvivat" is-input-number="true"></skillequipment>
<skillequipment title="Inverter Dataset" is-select="true"></skillequipment>
<skillequipment title="Carico Min P.A." is-input-number="true"></skillequipment>
<skillequipment title="Carico Max P.A." is-input-number="true"></skillequipment>
<skillequipment title="Caric Min C Din" is-input-number="true"></skillequipment>
<skillequipment title="Caric Max C Din" is-input-number="true"></skillequipment>
<skillequipment title="N. Manine Dx" is-input-number="true"></skillequipment>
<skillequipment title="N. Manine Sx" is-input-number="true"></skillequipment>
</div>
<div class="list-skill-equipment-category">
<div class="skill-equipment-category">Geometria</div>
<skillequipment title="Id Correttore" is-select="true"></skillequipment>
<skillequipment title="Lunghezza" is-input-number="true"></skillequipment>
<skillequipment title="Raggio" is-input-number="true"></skillequipment>
<skillequipment title="Usura Lungh." is-input-number="true"></skillequipment>
<skillequipment title="Usura Raggio" is-input-number="true"></skillequipment>
<skillequipment title="Ravviv Residua" is-input-number="true"></skillequipment>
</div>
<div class="list-skill-equipment-category">
<div class="skill-equipment-category">Vita Ut.</div>
<skillequipment title="Tipo Vita" is-select="true"></skillequipment>
<skillequipment title="Vita residua" is-input-number="true"></skillequipment>
<skillequipment title="Val Preallarme" is-input-number="true"></skillequipment>
</div>
<div class="list-skill-equipment-category">
<div class="skill-equipment-category">Codolo</div>
<skillequipment title="Tipo man rich" is-select="true"></skillequipment>
<skillequipment title="Pastiglia" is-input-number="true"></skillequipment>
</div>
</div>
</div>
</div>
Step/wwwroot/src/components/utilities.vue
+21
View File
@@ -0,0 +1,21 @@
<template>
<div class="utilities-container">
<div class="utilities-box">
<div class="utilities-header">
<span>{{'utilities_header_label' | localize("Utilities")}}</span>
</div>
<div class="utilities-body">
<cardutilities title="CMS Copy" letters="CC"></cardutilities>
<cardutilities title="Presetting Tool" letters="PT"></cardutilities>
<cardutilities title="Easystone" letters="ES"></cardutilities>
<cardutilities title="Easyglass" letters="EG"></cardutilities>
</div>
</div>
</div>
</template>
<script>
import cardutilities from "src/modules/base-components/cards/card-utilities.vue";
export default {
components:{cardutilities}
}
</script>
Step/wwwroot/src/filters/cnFilter.ts
+17
View File
@@ -0,0 +1,17 @@
import Vue from "vue";
Vue.mixin( {
methods: {
isDemo:function() {
return ( ! this.$store.state.machineInfo.isSiemens && ! this.$store.state.machineInfo.isFanuc && ! this.$store.state.machineInfo.isOsai);
},
isSiemens:function() {
return this.$store.state.machineInfo.isSiemens;
},
isFanuc:function() {
return this.$store.state.machineInfo.isFanuc;
},
isOsai:function() {
return this.$store.state.machineInfo.isOsai;
}
}
});
Step/wwwroot/src/main.js
+2 -1
View File
@@ -20,7 +20,7 @@ let router = new VueRouter({ linkActiveClass: "inpath", linkExactActiveClass: "a
router.addRoutes(routes);
// ATTENZIONE : mettere a true durante lo sviluppo e riportare a false per la pubblicazione
let developerMode = false;
let developerMode = true;
// manipulate the title page
router.beforeEach((to, from, next) => {
@@ -58,6 +58,7 @@ import "./filters/searchFilter";
import "./filters/localizeFilter";
import "./filters/dateFilter";
import "./filters/securityFilter";
import "./filters/cnFilter";
// polyfills !!
Step/wwwroot/src/modules/base-components/cards/card-utilities.vue
+20
View File
@@ -0,0 +1,20 @@
<template>
<!-- <div class="test-container"> -->
<div class="card-utilities">
<div class="card-utilities-header">
<span>{{title}}</span>
</div>
<div class="card-utilities-body">
<button class="btn"><div class="card-utilities-body-label">{{letters}}</div></button>
</div>
</div>
<!-- </div> -->
</template>
<script>
export default {
props:{
title: {default:""},
letters: {default:""}
}
}
</script>
Step/wwwroot/src/modules/base-components/cards/skill-equipment.vue
+4
View File
@@ -6,8 +6,10 @@
</div>
<div class="skill-equipment-control">
<input v-if="isInput">
<input v-if="isInputReadOnly" readonly>
<select class="arrow" v-if="isSelect"></select>
<input v-if="isInputNumber" v-model.number="number" type="number">
<input v-if="isInputNumberReadOnly" v-model.number="number" type="number" readonly>
<div class="togglebutton" v-if="isToggle"><label>
<input type="checkbox" :checked="ischecked" @click="toggleCheck()">
<span class="toggle">{{checked ? onLabel : offLabel}}</span>
@@ -23,6 +25,8 @@ export default {
isInput: {default: false},
isSelect: {default: false},
isInputNumber: {default: false},
isInputReadOnly: {default: false},
isInputNumberReadOnly: {default:false},
isToggle: {default: false},
onLabel: { default: "SI" },
offLabel: { default: "NO" },
Step/wwwroot/src/modules/base-components/maintenance-progress.vue
+33
View File
@@ -0,0 +1,33 @@
<template>
<!-- <div class="test-container"> -->
<div class="maintenance-progress">
<div class="progress" :class="{fill: progress >= 10, yellow: 10 >= warningValue, red: 10 >= alertValue }"></div>
<div class="progress" :class="{fill: progress >= 20, yellow: 20 >= warningValue, red: 20 >= alertValue }"></div>
<div class="progress" :class="{fill: progress >= 30, yellow: 30 >= warningValue, red: 30>= alertValue }"></div>
<div class="progress" :class="{fill: progress >= 40, yellow: 40 >= warningValue, red: 40 >= alertValue }"></div>
<div class="progress" :class="{fill: progress >= 50, yellow: 50 >= warningValue, red: 50 >= alertValue }"></div>
<div class="progress" :class="{fill: progress >= 60, yellow: 60 >= warningValue, red: 60 >= alertValue }"></div>
<div class="progress" :class="{fill: progress >= 70, yellow: 70 >= warningValue, red: 70>= alertValue }"></div>
<div class="progress" :class="{fill: progress >= 80, yellow: 80 >= warningValue, red: 80 >= alertValue }"></div>
<div class="progress" :class="{fill: progress >= 90, yellow: 90 >= warningValue, red: 90 >= alertValue }"></div>
<div class="progress" :class="{fill: progress >= 100, yellow: 100 >= warningValue, red: 100 >= alertValue }"></div>
<label>{{progress}}%</label>
</div>
<!-- </div> -->
</template>
<script>
export default {
props:{
warningValue:{default: 50},
alertValue:{default: 80},
progress: {default: 20}
},
data(){
return{
fill: 'fill',
yellow: 'yellow',
red: 'red',
}
}
}
</script>