Merge branch 'develop' of https://bitbucket.org/ncarminati/cms_step into develop
This commit is contained in:
Nicola Carminati
@@ -305,3 +305,309 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.alarm-history-container{
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding-top: 104px;
|
||||
.alarm-history-box{
|
||||
width: 1808px;
|
||||
height: 872px;
|
||||
border-radius: 2px;
|
||||
background-color: @color-background-white;
|
||||
box-shadow: 0 1px 2px 0 @color-black-40;
|
||||
.alarm-history-header{
|
||||
height: 64px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-bottom: solid 2px @color-whitethree;
|
||||
.alarm-history-header-label{
|
||||
margin-left: 23px;
|
||||
font-size: 20px;
|
||||
color: @color-darkish-blue;
|
||||
}
|
||||
}
|
||||
}
|
||||
.alarm-history-body{
|
||||
width: 100%;
|
||||
height: 806px;
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.alarm-history-body-left{
|
||||
width: 1241px;
|
||||
height: 766px;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
margin-right: 23px;
|
||||
.alarm-history-left-filter{
|
||||
width: 100%;
|
||||
height: 86px;
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
.filter-text, .filter-state, .filter-type, .filter-date-range, .filter-user{
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
margin: 0 12px;
|
||||
label{
|
||||
font-size: 14px;
|
||||
line-height: 1.29;
|
||||
color: @color-warm-grey;
|
||||
}
|
||||
input{
|
||||
width: 288px;
|
||||
height: 44px;
|
||||
border-radius: 2px;
|
||||
box-shadow: inset 0 1px 3px 0 @color-black-50;
|
||||
border: solid 1px @color-silver;
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
.filter-text{
|
||||
margin-left: 0;
|
||||
}
|
||||
.filter-state select, .filter-type select, .filter-date-range select, .filter-user select{
|
||||
width: 144px;
|
||||
height: 48px;
|
||||
border-radius: 2px;
|
||||
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;
|
||||
}
|
||||
.filter-date-range select{
|
||||
width: 192px;
|
||||
}
|
||||
.group-button{
|
||||
display: flex;
|
||||
height: 100%;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
button.btn{
|
||||
padding: 0;
|
||||
width: 48px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.alarm-history-table{
|
||||
table{
|
||||
width: 1241px;
|
||||
max-height: 680px;
|
||||
border-collapse: collapse;
|
||||
border: solid 1px @color-label-grey;
|
||||
margin-top: 10px;
|
||||
}
|
||||
tbody{
|
||||
min-height: 680px;
|
||||
}
|
||||
tr{
|
||||
min-height: 64px;
|
||||
}
|
||||
td, th {
|
||||
text-align: center;
|
||||
// padding: 8px;
|
||||
height: 64px;
|
||||
font-size: 14px;
|
||||
line-height: 1.43;
|
||||
color: @color-greyish-brown;
|
||||
}
|
||||
td{
|
||||
min-height: 64px;
|
||||
}
|
||||
thead tr th{
|
||||
font-size: 14px;
|
||||
line-height: 1.43;
|
||||
font-weight: 600;
|
||||
color: @color-greyish-brown;
|
||||
background-color: @color-background-white;
|
||||
}
|
||||
tr:nth-child(even) {
|
||||
background-color: @color-white4;
|
||||
}
|
||||
tr:nth-child(odd){
|
||||
background-color: @color-clear-blue-30;
|
||||
}
|
||||
}
|
||||
}
|
||||
.alarm-history-body-right{
|
||||
width: 496px;
|
||||
height: 760px;
|
||||
border-radius: 2px;
|
||||
background-color: @color-whitegrey;
|
||||
box-shadow: 0 1px 2px 0 @color-black-40;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.box-right{
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
height: 675px;
|
||||
width: 443px;
|
||||
.box-right-info{
|
||||
width: 94%;
|
||||
height: 180px;
|
||||
.box-right-info-header{
|
||||
.title{
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
color: @color-scarlet;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
.subtitle{
|
||||
margin-bottom: 3px;
|
||||
label{
|
||||
width: 64px;
|
||||
height: 21px;
|
||||
border: solid 1px @color-warm-grey2;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
line-height: 1.29;
|
||||
color: @color-greyish-brown;
|
||||
}
|
||||
}
|
||||
.date{
|
||||
margin-bottom: 8px;
|
||||
label{
|
||||
font-size: 16px;
|
||||
color: @color-greyish-brown;
|
||||
}
|
||||
}
|
||||
}
|
||||
.box-right-info-body{
|
||||
margin-bottom: 20px;
|
||||
span{
|
||||
font-size: 18px;
|
||||
line-height: 1;
|
||||
color: @color-greyish-brown;
|
||||
}
|
||||
}
|
||||
.box-right-info-footer{
|
||||
border-bottom: solid 2px @color-white;
|
||||
padding-bottom: 12px;
|
||||
span{
|
||||
font-size: 18px;
|
||||
line-height: 1;
|
||||
color: @color-greyish-brown;
|
||||
label{
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.box-right-action{
|
||||
height: 495px;
|
||||
width: 94%;
|
||||
.wizard{
|
||||
.user-help {
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
height: 64px;
|
||||
margin: 23px 0 12px 0;
|
||||
align-items: center;
|
||||
border-radius: 2px;
|
||||
box-shadow: @small-shadow;
|
||||
.detail {
|
||||
width: 100%;
|
||||
strong,
|
||||
span {
|
||||
display: block;
|
||||
color: @color-darkish-blue;
|
||||
font-size: 14px;
|
||||
}
|
||||
strong {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
i.group {
|
||||
min-width: 28px;
|
||||
height: 28px;
|
||||
object-fit: contain;
|
||||
background-image: url(../icons/png/group.png);
|
||||
background-size: cover;
|
||||
margin: 0 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.group-button{
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
}
|
||||
.attach{
|
||||
.accordion{
|
||||
margin-top: 24px;
|
||||
.filename{
|
||||
display: flex;
|
||||
height: 64px;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
i{
|
||||
margin: 0 20px 0 20px;
|
||||
}
|
||||
span{
|
||||
width: 100%;
|
||||
font-size: 18px;
|
||||
line-height: 1;
|
||||
color: @color-greyish-brown;
|
||||
}
|
||||
.right{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
button.btn-hidden{
|
||||
visibility: hidden;
|
||||
i{
|
||||
font-size: 26px;
|
||||
visibility: visible;
|
||||
margin: 0 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.filename.selected{
|
||||
background-color: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
.allattach{
|
||||
display: flex;
|
||||
height: 64px;
|
||||
align-items: center;
|
||||
button.btn-hidden{
|
||||
visibility: hidden;
|
||||
span{
|
||||
font-size: 18px;
|
||||
line-height: 1;
|
||||
visibility: visible;
|
||||
margin: 0 0 0 20px;
|
||||
color: @color-greyish-brown;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.accordion header{
|
||||
color: @color-darkish-blue;
|
||||
}
|
||||
.accordion header small{
|
||||
border: 2px solid @color-darkish-blue;
|
||||
color: @color-darkish-blue;
|
||||
}
|
||||
}
|
||||
.note{
|
||||
.accordion header{
|
||||
color: @color-darkish-blue;
|
||||
}
|
||||
.accordion header small{
|
||||
border: 2px solid @color-darkish-blue;
|
||||
color: @color-darkish-blue;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -38,6 +38,7 @@
|
||||
@color-white: #fff;
|
||||
@color-input-light: #4b4b4b;
|
||||
@color-warm-grey: #878787;
|
||||
@color-warm-grey2: #9b9b9b;
|
||||
@color-label-grey: #979797;
|
||||
@color-input-background: #f8f8f8;
|
||||
@color-squash : #f5a623;
|
||||
|
||||
@@ -2998,6 +2998,315 @@ footer .container button.big:before {
|
||||
color: #d0021b;
|
||||
font-weight: bold;
|
||||
}
|
||||
.alarm-history-container {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding-top: 104px;
|
||||
}
|
||||
.alarm-history-container .alarm-history-box {
|
||||
width: 1808px;
|
||||
height: 872px;
|
||||
border-radius: 2px;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
.alarm-history-container .alarm-history-box .alarm-history-header {
|
||||
height: 64px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-bottom: solid 2px #e7e7e7;
|
||||
}
|
||||
.alarm-history-container .alarm-history-box .alarm-history-header .alarm-history-header-label {
|
||||
margin-left: 23px;
|
||||
font-size: 20px;
|
||||
color: #002680;
|
||||
}
|
||||
.alarm-history-container .alarm-history-body {
|
||||
width: 100%;
|
||||
height: 806px;
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.alarm-history-container .alarm-history-body .alarm-history-body-left {
|
||||
width: 1241px;
|
||||
height: 766px;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
margin-right: 23px;
|
||||
}
|
||||
.alarm-history-container .alarm-history-body .alarm-history-body-left .alarm-history-left-filter {
|
||||
width: 100%;
|
||||
height: 86px;
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
}
|
||||
.alarm-history-container .alarm-history-body .alarm-history-body-left .alarm-history-left-filter .filter-text,
|
||||
.alarm-history-container .alarm-history-body .alarm-history-body-left .alarm-history-left-filter .filter-state,
|
||||
.alarm-history-container .alarm-history-body .alarm-history-body-left .alarm-history-left-filter .filter-type,
|
||||
.alarm-history-container .alarm-history-body .alarm-history-body-left .alarm-history-left-filter .filter-date-range,
|
||||
.alarm-history-container .alarm-history-body .alarm-history-body-left .alarm-history-left-filter .filter-user {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
margin: 0 12px;
|
||||
}
|
||||
.alarm-history-container .alarm-history-body .alarm-history-body-left .alarm-history-left-filter .filter-text label,
|
||||
.alarm-history-container .alarm-history-body .alarm-history-body-left .alarm-history-left-filter .filter-state label,
|
||||
.alarm-history-container .alarm-history-body .alarm-history-body-left .alarm-history-left-filter .filter-type label,
|
||||
.alarm-history-container .alarm-history-body .alarm-history-body-left .alarm-history-left-filter .filter-date-range label,
|
||||
.alarm-history-container .alarm-history-body .alarm-history-body-left .alarm-history-left-filter .filter-user label {
|
||||
font-size: 14px;
|
||||
line-height: 1.29;
|
||||
color: #878787;
|
||||
}
|
||||
.alarm-history-container .alarm-history-body .alarm-history-body-left .alarm-history-left-filter .filter-text input,
|
||||
.alarm-history-container .alarm-history-body .alarm-history-body-left .alarm-history-left-filter .filter-state input,
|
||||
.alarm-history-container .alarm-history-body .alarm-history-body-left .alarm-history-left-filter .filter-type input,
|
||||
.alarm-history-container .alarm-history-body .alarm-history-body-left .alarm-history-left-filter .filter-date-range input,
|
||||
.alarm-history-container .alarm-history-body .alarm-history-body-left .alarm-history-left-filter .filter-user input {
|
||||
width: 288px;
|
||||
height: 44px;
|
||||
border-radius: 2px;
|
||||
box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.5);
|
||||
border: solid 1px #bbbcbc;
|
||||
font-size: 18px;
|
||||
}
|
||||
.alarm-history-container .alarm-history-body .alarm-history-body-left .alarm-history-left-filter .filter-text {
|
||||
margin-left: 0;
|
||||
}
|
||||
.alarm-history-container .alarm-history-body .alarm-history-body-left .alarm-history-left-filter .filter-state select,
|
||||
.alarm-history-container .alarm-history-body .alarm-history-body-left .alarm-history-left-filter .filter-type select,
|
||||
.alarm-history-container .alarm-history-body .alarm-history-body-left .alarm-history-left-filter .filter-date-range select,
|
||||
.alarm-history-container .alarm-history-body .alarm-history-body-left .alarm-history-left-filter .filter-user select {
|
||||
width: 144px;
|
||||
height: 48px;
|
||||
border-radius: 2px;
|
||||
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;
|
||||
}
|
||||
.alarm-history-container .alarm-history-body .alarm-history-body-left .alarm-history-left-filter .filter-date-range select {
|
||||
width: 192px;
|
||||
}
|
||||
.alarm-history-container .alarm-history-body .alarm-history-body-left .alarm-history-left-filter .group-button {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.alarm-history-container .alarm-history-body .alarm-history-body-left .alarm-history-left-filter .group-button button.btn {
|
||||
padding: 0;
|
||||
width: 48px;
|
||||
}
|
||||
.alarm-history-container .alarm-history-body .alarm-history-body-left .alarm-history-table table {
|
||||
width: 1241px;
|
||||
max-height: 680px;
|
||||
border-collapse: collapse;
|
||||
border: solid 1px #979797;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.alarm-history-container .alarm-history-body .alarm-history-body-left .alarm-history-table tbody {
|
||||
min-height: 680px;
|
||||
}
|
||||
.alarm-history-container .alarm-history-body .alarm-history-body-left .alarm-history-table tr {
|
||||
min-height: 64px;
|
||||
}
|
||||
.alarm-history-container .alarm-history-body .alarm-history-body-left .alarm-history-table td,
|
||||
.alarm-history-container .alarm-history-body .alarm-history-body-left .alarm-history-table th {
|
||||
text-align: center;
|
||||
height: 64px;
|
||||
font-size: 14px;
|
||||
line-height: 1.43;
|
||||
color: #4b4b4b;
|
||||
}
|
||||
.alarm-history-container .alarm-history-body .alarm-history-body-left .alarm-history-table td {
|
||||
min-height: 64px;
|
||||
}
|
||||
.alarm-history-container .alarm-history-body .alarm-history-body-left .alarm-history-table thead tr th {
|
||||
font-size: 14px;
|
||||
line-height: 1.43;
|
||||
font-weight: 600;
|
||||
color: #4b4b4b;
|
||||
background-color: #fff;
|
||||
}
|
||||
.alarm-history-container .alarm-history-body .alarm-history-body-left .alarm-history-table tr:nth-child(even) {
|
||||
background-color: #f3f3f3;
|
||||
}
|
||||
.alarm-history-container .alarm-history-body .alarm-history-body-left .alarm-history-table tr:nth-child(odd) {
|
||||
background-color: rgba(23, 145, 255, 0.3);
|
||||
}
|
||||
.alarm-history-container .alarm-history-body .alarm-history-body-right {
|
||||
width: 496px;
|
||||
height: 760px;
|
||||
border-radius: 2px;
|
||||
background-color: #dddddd;
|
||||
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.alarm-history-container .alarm-history-body .alarm-history-body-right .box-right {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
height: 675px;
|
||||
width: 443px;
|
||||
}
|
||||
.alarm-history-container .alarm-history-body .alarm-history-body-right .box-right .box-right-info {
|
||||
width: 94%;
|
||||
height: 180px;
|
||||
}
|
||||
.alarm-history-container .alarm-history-body .alarm-history-body-right .box-right .box-right-info .box-right-info-header .title {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
color: #d0021b;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
.alarm-history-container .alarm-history-body .alarm-history-body-right .box-right .box-right-info .box-right-info-header .subtitle {
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
.alarm-history-container .alarm-history-body .alarm-history-body-right .box-right .box-right-info .box-right-info-header .subtitle label {
|
||||
width: 64px;
|
||||
height: 21px;
|
||||
border: solid 1px #9b9b9b;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
line-height: 1.29;
|
||||
color: #4b4b4b;
|
||||
}
|
||||
.alarm-history-container .alarm-history-body .alarm-history-body-right .box-right .box-right-info .box-right-info-header .date {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.alarm-history-container .alarm-history-body .alarm-history-body-right .box-right .box-right-info .box-right-info-header .date label {
|
||||
font-size: 16px;
|
||||
color: #4b4b4b;
|
||||
}
|
||||
.alarm-history-container .alarm-history-body .alarm-history-body-right .box-right .box-right-info .box-right-info-body {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.alarm-history-container .alarm-history-body .alarm-history-body-right .box-right .box-right-info .box-right-info-body span {
|
||||
font-size: 18px;
|
||||
line-height: 1;
|
||||
color: #4b4b4b;
|
||||
}
|
||||
.alarm-history-container .alarm-history-body .alarm-history-body-right .box-right .box-right-info .box-right-info-footer {
|
||||
border-bottom: solid 2px #fff;
|
||||
padding-bottom: 12px;
|
||||
}
|
||||
.alarm-history-container .alarm-history-body .alarm-history-body-right .box-right .box-right-info .box-right-info-footer span {
|
||||
font-size: 18px;
|
||||
line-height: 1;
|
||||
color: #4b4b4b;
|
||||
}
|
||||
.alarm-history-container .alarm-history-body .alarm-history-body-right .box-right .box-right-info .box-right-info-footer span label {
|
||||
font-weight: bold;
|
||||
}
|
||||
.alarm-history-container .alarm-history-body .alarm-history-body-right .box-right .box-right-action {
|
||||
height: 495px;
|
||||
width: 94%;
|
||||
}
|
||||
.alarm-history-container .alarm-history-body .alarm-history-body-right .box-right .box-right-action .wizard .user-help {
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
height: 64px;
|
||||
margin: 23px 0 12px 0;
|
||||
align-items: center;
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
.alarm-history-container .alarm-history-body .alarm-history-body-right .box-right .box-right-action .wizard .user-help .detail {
|
||||
width: 100%;
|
||||
}
|
||||
.alarm-history-container .alarm-history-body .alarm-history-body-right .box-right .box-right-action .wizard .user-help .detail strong,
|
||||
.alarm-history-container .alarm-history-body .alarm-history-body-right .box-right .box-right-action .wizard .user-help .detail span {
|
||||
display: block;
|
||||
color: #002680;
|
||||
font-size: 14px;
|
||||
}
|
||||
.alarm-history-container .alarm-history-body .alarm-history-body-right .box-right .box-right-action .wizard .user-help .detail strong {
|
||||
font-size: 18px;
|
||||
}
|
||||
.alarm-history-container .alarm-history-body .alarm-history-body-right .box-right .box-right-action .wizard .user-help i.group {
|
||||
min-width: 28px;
|
||||
height: 28px;
|
||||
object-fit: contain;
|
||||
background-image: url(../icons/png/group.png);
|
||||
background-size: cover;
|
||||
margin: 0 12px;
|
||||
}
|
||||
.alarm-history-container .alarm-history-body .alarm-history-body-right .box-right .box-right-action .group-button {
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
}
|
||||
.alarm-history-container .alarm-history-body .alarm-history-body-right .box-right .box-right-action .attach .accordion {
|
||||
margin-top: 24px;
|
||||
}
|
||||
.alarm-history-container .alarm-history-body .alarm-history-body-right .box-right .box-right-action .attach .accordion .filename {
|
||||
display: flex;
|
||||
height: 64px;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
.alarm-history-container .alarm-history-body .alarm-history-body-right .box-right .box-right-action .attach .accordion .filename i {
|
||||
margin: 0 20px 0 20px;
|
||||
}
|
||||
.alarm-history-container .alarm-history-body .alarm-history-body-right .box-right .box-right-action .attach .accordion .filename span {
|
||||
width: 100%;
|
||||
font-size: 18px;
|
||||
line-height: 1;
|
||||
color: #4b4b4b;
|
||||
}
|
||||
.alarm-history-container .alarm-history-body .alarm-history-body-right .box-right .box-right-action .attach .accordion .filename .right {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.alarm-history-container .alarm-history-body .alarm-history-body-right .box-right .box-right-action .attach .accordion .filename .right button.btn-hidden {
|
||||
visibility: hidden;
|
||||
}
|
||||
.alarm-history-container .alarm-history-body .alarm-history-body-right .box-right .box-right-action .attach .accordion .filename .right button.btn-hidden i {
|
||||
font-size: 26px;
|
||||
visibility: visible;
|
||||
margin: 0 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.alarm-history-container .alarm-history-body .alarm-history-body-right .box-right .box-right-action .attach .accordion .filename.selected {
|
||||
background-color: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
.alarm-history-container .alarm-history-body .alarm-history-body-right .box-right .box-right-action .attach .accordion .allattach {
|
||||
display: flex;
|
||||
height: 64px;
|
||||
align-items: center;
|
||||
}
|
||||
.alarm-history-container .alarm-history-body .alarm-history-body-right .box-right .box-right-action .attach .accordion .allattach button.btn-hidden {
|
||||
visibility: hidden;
|
||||
}
|
||||
.alarm-history-container .alarm-history-body .alarm-history-body-right .box-right .box-right-action .attach .accordion .allattach button.btn-hidden span {
|
||||
font-size: 18px;
|
||||
line-height: 1;
|
||||
visibility: visible;
|
||||
margin: 0 0 0 20px;
|
||||
color: #4b4b4b;
|
||||
cursor: pointer;
|
||||
}
|
||||
.alarm-history-container .alarm-history-body .alarm-history-body-right .box-right .box-right-action .attach .accordion header {
|
||||
color: #002680;
|
||||
}
|
||||
.alarm-history-container .alarm-history-body .alarm-history-body-right .box-right .box-right-action .attach .accordion header small {
|
||||
border: 2px solid #002680;
|
||||
color: #002680;
|
||||
}
|
||||
.alarm-history-container .alarm-history-body .alarm-history-body-right .box-right .box-right-action .note .accordion header {
|
||||
color: #002680;
|
||||
}
|
||||
.alarm-history-container .alarm-history-body .alarm-history-body-right .box-right .box-right-action .note .accordion header small {
|
||||
border: 2px solid #002680;
|
||||
color: #002680;
|
||||
}
|
||||
.hmi-container {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
|
||||
@@ -61,6 +61,9 @@ export const ToolingMagPos = () =>
|
||||
export const Maintenance = () =>
|
||||
import ("./components/maintenance.vue");
|
||||
|
||||
export const AlarmHistory = () =>
|
||||
import ("./components/alarm-history.vue");
|
||||
|
||||
export const Production = () =>
|
||||
import ("./components/production.vue");
|
||||
|
||||
|
||||
@@ -48,7 +48,8 @@ import {
|
||||
JobEditor,
|
||||
ObjectsJob,
|
||||
MissingTool,
|
||||
ModalMissingTools
|
||||
ModalMissingTools,
|
||||
AlarmHistory
|
||||
} from "./app.modules";
|
||||
|
||||
export let routes = [
|
||||
@@ -94,6 +95,8 @@ export let routes = [
|
||||
{ path: "/depot-action-unloading", component: DepotActionUnloading, meta: { title: "Step - Depot-Action-Unloading", area: "depot-action-unloading" } },
|
||||
{ path: "/depot-action-generic", component: DepotActionGeneric, meta: { title: "Step - Depot-Action-Generic", area: "depot-action-generic" } },
|
||||
|
||||
{ path: "/alarm-history", component: AlarmHistory, meta: { title: "Step - Alarm-History", area: "alarm-history" } },
|
||||
|
||||
{ path: "/job-editor", component: JobEditor, meta: { title: "Job-Editor", area: "job-editor" } },
|
||||
|
||||
{ path: "/objects-job", component: ObjectsJob, meta: { title: "Objects Job", area: "objects-jobs" } },
|
||||
|
||||
@@ -0,0 +1,7 @@
|
||||
import Vue from "vue";
|
||||
import Component from "vue-class-component";
|
||||
import { Accordion } from "src/modules/base-components";
|
||||
@Component({ components: { accordion: Accordion } })
|
||||
export default class AlarmHistory extends Vue {
|
||||
|
||||
}
|
||||
@@ -0,0 +1,153 @@
|
||||
<template>
|
||||
<div class="alarm-history-container">
|
||||
<div class="alarm-history-box">
|
||||
<div class="alarm-history-header">
|
||||
<div class="alarm-history-header-label">
|
||||
{{'alarm_history_header_title' | localize("Lista allarmi")}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="alarm-history-body">
|
||||
<div class="alarm-history-body-left">
|
||||
<div class="alarm-history-left-filter">
|
||||
<div class="filter-text">
|
||||
<label>Filtro</label>
|
||||
<input type="text">
|
||||
</div>
|
||||
<div class="filter-state">
|
||||
<label>Stato</label>
|
||||
<select>
|
||||
<option>Tutti</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-type">
|
||||
<label>Tipo</label>
|
||||
<select>
|
||||
<option>Tutti</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-date-range">
|
||||
<label>Intervallo date</label>
|
||||
<select>
|
||||
<option>Ultimo mese</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-user">
|
||||
<label>Utente</label>
|
||||
<select>
|
||||
<option>Utente01</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="group-button">
|
||||
<button class="btn"><i class="fa fa-print"></i></button>
|
||||
<button class="btn"><i class="fa fa-upload"></i></button>
|
||||
<button class="btn"><i class="fa fa-envelope"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="alarm-history-table">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>Tipo</th>
|
||||
<th>Descrizione</th>
|
||||
<th>Start</th>
|
||||
<th>Stop</th>
|
||||
<th>T Totale</th>
|
||||
<th>Utente</th>
|
||||
<th>Stato</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="scrollable">
|
||||
<tr>
|
||||
<td colspan="1">001</td>
|
||||
<td colspan="1">Allarme</td>
|
||||
<td colspan="1">Mandrino 1 non bloccato</td>
|
||||
<td colspan="1">15:24:53</td>
|
||||
<td colspan="1">15:24:53</td>
|
||||
<td colspan="1">15:24:53</td>
|
||||
<td colspan="1">User01</td>
|
||||
<td colspan="1">Risolto</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="alarm-history-body-right">
|
||||
<div class="box-right scrollable">
|
||||
<div class="box-right-info">
|
||||
<div class="box-right-info-header">
|
||||
<div class="title">
|
||||
<span>#### La macchina non è tarata</span>
|
||||
</div>
|
||||
<div class="subtitle">
|
||||
<label>3 AUX</label>
|
||||
</div>
|
||||
<div class="date">
|
||||
<label>01/01/2017 - 12:03</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-right-info-body">
|
||||
<span>
|
||||
Lorem ipsum dolor sit amet, consectetur
|
||||
adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.
|
||||
</span>
|
||||
</div>
|
||||
<div class="box-right-info-footer">
|
||||
<span><label>Stato:</label> attivo</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-right-action">
|
||||
<div class="wizard">
|
||||
<div class="user-help">
|
||||
<i class="group"></i>
|
||||
<div class="detail">
|
||||
<strong>{{'alarm_manual_lbl_title' | localize('Procedura guidata')}}</strong>
|
||||
<span>{{'alarm_manual_lbl_description' | localize('Risoluzione dell\'allarme')}}</span>
|
||||
</div>
|
||||
<button class="btn">
|
||||
{{'alarm_manual_btn_start' | localize('Avvia')}}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="group-button">
|
||||
<button class="btn">Vedi manuale</button>
|
||||
<button class="btn">Chiedi aiuto</button>
|
||||
<button class="btn btn-success">Refresh</button>
|
||||
</div>
|
||||
<div class="attach">
|
||||
<accordion :title="'Allegati'" :counter="5">
|
||||
<div class="filename">
|
||||
<i class="fa fa-file-text-o" v-if="false"></i>
|
||||
<i class="fa fa-file-image-o" v-if="false"></i>
|
||||
<i class="fa fa-file-pdf-o" v-if="true"></i>
|
||||
<span>NomeFile.pdf</span>
|
||||
<div class="right">
|
||||
<button class="btn-hidden"><i class="fa fa-file-o"></i></button>
|
||||
<button class="btn-hidden" ><i class="fa fa-trash" ></i></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="allattach">
|
||||
<button class="btn-hidden">
|
||||
<span>Mostra tutti gli allegati</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="item text-success">
|
||||
<strong> Aggiungi un allegato</strong> <button class="btn text-22"><i class="fa fa-plus"></i></button>
|
||||
</div>
|
||||
</accordion>
|
||||
</div>
|
||||
<div class="note">
|
||||
<accordion :title="'Note'" :counter="4">
|
||||
<div class="item text-success">
|
||||
<strong> Aggiungi una nota</strong> <button class="btn text-22"><i class="fa fa-plus"></i></button>
|
||||
</div>
|
||||
</accordion>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script src="./alarm-history.ts" lang="ts"></script>
|
||||
Reference in New Issue
Block a user