diff --git a/Step/wwwroot/assets/styles/base/alarms.less b/Step/wwwroot/assets/styles/base/alarms.less index 131d629c..2e6fa93e 100644 --- a/Step/wwwroot/assets/styles/base/alarms.less +++ b/Step/wwwroot/assets/styles/base/alarms.less @@ -854,7 +854,9 @@ color: @color-white; } - .pagination button:hover:not(.active) {background-color: @color-whitegrey;} + .pagination button:hover:not(.active) { + background-color: @color-whitegrey; + } } } diff --git a/Step/wwwroot/assets/styles/base/card.less b/Step/wwwroot/assets/styles/base/card.less index 5bafcd78..32a0f8d0 100644 --- a/Step/wwwroot/assets/styles/base/card.less +++ b/Step/wwwroot/assets/styles/base/card.less @@ -1793,3 +1793,3454 @@ align-items: center; } } + +.card-report-production{ + width: 100%; + height: 100%; + display: flex; + .reports-box-body-left { + width: 1455px; + height: 100%; + .body-left-header, .body-left-header-machinestatus{ + width: 100%; + height: 70px; + display: flex; + flex-flow: row; + margin-top: 18px; + border-right: solid 2px @color-whitegrey; + position: relative; + margin-bottom: 16px; + .mx-datepicker-range{ + width: 170px; + height: 70px; + .mx-input-wrapper{ + margin-right: 24px; + width: 253px; + .mx-input{ + width: 253px; + 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; + padding-left: 16px; + } + } + } + > div { + display: flex; + flex-flow: column; + height: 70px; + margin-right: 24px; + label{ + font-size: 14px; + line-height: 1.29; + color: @color-warm-grey; + } + label.intervaldate{ + width: 253px; + font-size: 14px; + line-height: 1.29; + color: @color-warm-grey; + } + select{ + width: 192px; + 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; + padding-left: 16px; + } + div.interval-time{ + display: flex; + flex-flow: row; + input[type="time"]{ + width: 96px; + height: 48px; + border-radius: 2px; + box-shadow: inset 0 1px 3px 0 @color-black-50; + font-size: 18px; + line-height: 1.11; + color: @color-silver; + border: none; + padding-left: 16px; + } + input[type="time"]:first-child{ + margin-right: 16px; + } + input[type="time"]::-webkit-inner-spin-button { + -webkit-appearance: none; + display: none; + border:none; + } + } + input.program{ + width: 256px; + height: 46px; + border-radius: 2px; + box-shadow: inset 0 1px 3px 0 @color-black-50; + font-size: 18px; + line-height: 1.11; + color: @color-silver; + padding-left: 16px; + border: none; + } + .reports-select-operator{ + width: 192px; + height: 48px; + border-radius: 2px; + box-shadow: 0 1px 2px 0 @color-black-40; + font-size: 18px; + line-height: 1.11; + color: @color-greyish-brown; + } + .reports-select-shift{ + width: 144px; + height: 48px; + border-radius: 2px; + box-shadow: 0 1px 2px 0 @color-black-40; + } + } + + + .multiselect{ + z-index: 100; + label{ + font-size: 14px; + line-height: 1.29; + color: @color-warm-grey; + } + } + .selectBoxU{ + position: relative; + width: 192px; + } + .selectBoxU select{ + width: 100%; + padding: 8px; + cursor: pointer; + height: 48px; + font-size: 18px; + line-height: 1.11; + color: @color-greyish-brown; + box-shadow: 0 1px 2px @color-black-40; + border-radius: 2px; + option{ + display: none; + } + } + .overSelect{ + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; + } + .checkboxes, .checkboxesU{ + display: none; + } + .checkboxesView, .checkboxesViewUser{ + width: calc(~"100% - 8px");; + background-color: #fff; + display: block; + z-index: 100; + padding: 6px 4px; + box-shadow: 0 3px 5px 0 @color-black-40; + label{ + font-size: 18px; + margin:2px; + display: flex; + flex-flow: row; + } + .label-state{ + margin-left: 12px; + } + } + } + .body-left-header-machinestatus{ + border-right: 0px; + } + .body-left-center { + width: 1448px; + max-height: 681px; + display: flex; + flex-flow: column; + .body-left-center-container{ + width: 100%; + table{ + table-layout: fixed; + width: 100%; + border-collapse: collapse; + } + thead{ + border-bottom: solid 2px @color-label-grey; + font-size: 14px; + line-height: 1.29; + color: @color-darkish-blue; + display: block; + width: 1431px; + } + thead tr th{ + height: 48px; + } + tr:nth-child(even) {background: #FFF } + tr:nth-child(odd) {background: #dddddd } + + // thead tr{ + // width: 1448px; + // } + + thead tr:nth-child(odd){ + background: #FFF + } + + th, td{ + width: auto; + } + // th:nth-child(1), td:nth-child(1){ + // width:162px; + // max-width: 162px; + // text-align: center; + // } + // th:nth-child(2), td:nth-child(2){ + // width:139px; + // max-width: 139px; + // text-align: center; + // } + // th:nth-child(3), td:nth-child(3){ + // width:83px; + // max-width:83px; + // text-align: center; + // } + // th:nth-child(4), td:nth-child(4){ + // width:83px; + // max-width:83px; + // text-align: center; + // } + // th:nth-child(5), td:nth-child(5){ + // width:83px; + // max-width:83px; + // text-align: center; + // } + // th:nth-child(6), td:nth-child(6){ + // width:83px; + // max-width:83px; + // text-align: center; + // } + // th:nth-child(7), td:nth-child(7){ + // width:97px; + // max-width:97px; + // text-align: center; + // } + // th:nth-child(8), td:nth-child(8){ + // width:97px; + // max-width:97px; + // text-align: center; + // } + // th:nth-child(9), td:nth-child(9){ + // width:97px; + // max-width:97px; + // text-align: center; + // } + // th:nth-child(10), td:nth-child(10){ + // width:115px; + // max-width:115px; + // text-align: center; + // } + // th:nth-child(11), td:nth-child(11){ + // width:97px; + // max-width:97px; + // text-align: center; + // } + // th:nth-child(12), td:nth-child(12){ + // width:148px; + // max-width:148px; + // text-align: center; + // } + // th:nth-child(13), td:nth-child(13){ + // width:97px; + // max-width:97px; + // text-align: center; + // } + th:last-child{ + display: flex; + align-items: center; + float: right; + font-size: 23px; + font-weight: bold; + cursor: pointer; + } + th, td{ + overflow: hidden; + div{ + overflow: hidden; + max-height: 64px; + } + } + tbody{ + display: block; + height: 598px; + width: 1431px; + tr{ + // cursor: pointer; + height: 64px; + padding: 10px; + font-size: 14px; + line-height: 1.29; + color: @color-greyish-brown; + td{ + text-align: center; + &.green{ + color: @color-apple-green; + } + &.red{ + color: @color-scarlet; + } + } + td:last-child{ + width: 16px; + display: flex; + } + &.selected{ + background-color: rgba(23, 145, 255, 0.75); + color: @color-white; + font-weight: 600; + } + } + } + .pagination { + display: inline-block; + } + + .pagination button { + padding: 0; + border: none; + background: none; + color: @color-black-40; + float: left; + padding: 8px 16px; + text-decoration: none; + border: 1px solid @color-whitegrey; + margin: 0 4px; + } + .pagination button:first-child { + border-top-left-radius: 5px; + border-bottom-left-radius: 5px; + } + + .pagination button:last-child { + border-top-right-radius: 5px; + border-bottom-right-radius: 5px; + } + .pagination button.active { + background-color: @color-warm-grey; + color: @color-white; + } + + .pagination button:hover:not(.active) { + background-color: @color-whitegrey; + } + .body-left-center-left{ + width: 360px; + height: 616px; + display: flex; + flex-flow: column; + align-items: center; + border: solid 1px @color-whitegrey; + overflow-y: auto; + .multiselect{ + z-index: 100; + margin-bottom: 24px; + margin-top: 16px; + label{ + font-size: 14px; + line-height: 1.29; + color: @color-warm-grey; + } + } + .selectBox{ + position: relative; + width: 328px; + height: 64px; + } + .selectBox select{ + width: 100%; + padding: 8px; + cursor: pointer; + height: 64px; + font-size: 18px; + line-height: 1.11; + color: @color-greyish-brown; + margin-bottom: 0; + margin-top: 0; + option{ + display: none; + } + } + .overSelect{ + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; + } + .checkboxes, .checkboxesU{ + display: none; + } + .checkboxesView, .checkboxesViewUser{ + width: calc(~"100% - 8px");; + background-color: #fff; + display: block; + z-index: 100; + padding: 6px 4px; + box-shadow: 0 3px 5px 0 @color-black-40; + label{ + font-size: 18px; + margin:2px; + display: flex; + flex-flow: row; + } + .label-state{ + margin-left: 12px; + } + } + div{ + select{ + width: 328px; + height: 48px; + border-radius: 2px; + box-shadow: 0 1px 2px 0 @color-black-40; + margin-bottom: 24px; + margin-top: 16px; + padding-left: 16px; + font-size: 18px; + line-height: 1.11; + color: @color-greyish-brown; + } + .accordion-dropdown{ + header { + height: 64px; + width: 312px; + border-radius: 2px; + box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4); + display: flex; + justify-content: space-between; + align-items: center; + color: @color-darkish-blue; + line-height: 1; + font-size: 18px; + padding-left: 16px; + cursor: pointer; + span { + width: 100%; + } + .expander { + margin: 0 12px; + line-height: 28px; + height: 28px; + width: 28px; + font-size: 28px; + } + } + section { + width: 328px; + min-height: 0; + max-height: 0; + transition: max-height 100ms ease-in-out, min-height 200ms ease-in-out; + overflow: hidden; + &.expanded { + min-height: 64px; + background-color: rgba(255, 255, 255, 0.1); + max-height: 1000px; + } + .item { + height: 64px; + width: 100%; + line-height: 64px; + background-color: @color-white2; + } + + .dropdown{ + // background-color: @color-white2; + height: 100%; + margin-top: 2px; + .filename{ + display: flex; + height: 64px; + align-items: center; + cursor: pointer; + i{ + color: @color-cyan-blue; + margin: 0 20px 0 20px; + } + span{ + width: 100%; + font-size: 18px; + line-height: 1; + color: @color-darkish-blue; + } + + &.selected{ + span, i{ + color:#4b4b4b; + } + } + } + .filename.selected{ + background-color: rgba(255, 255, 255, 0.8); + } + + } + } + } + } + } + } + + .body-left-center-footer{ + height: 64px; + width: 100%; + border: solid 1px @color-whitegrey; + .header-title{ + width: 360px; + height: 64px; + display: flex; + flex-flow: column; + align-items: center; + justify-content: center; + .title{ + font-size: 14px; + color: @color-warm-grey; + } + .data-temporal{ + font-size: 18px; + line-height: 1; + color: @color-greyish-brown; + } + } + } + } + } + .reports-box-body-right { + width: 327px; + height: 100%; + .body-right-header{ + width: 100%; + height: 70px; + display: flex; + flex-flow: row; + margin-top: 18px; + justify-content: flex-end; + .body-right-header-left { + width: 158px; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + border-right: solid 2px @color-whitegrey; + button{ + width: 48px; + height: 48px; + border-radius: 2px; + box-shadow: 0 1px 2px 0 @color-black-40; + background-image: linear-gradient(to bottom,@color-white2, @color-silver); + border: none; + } + button.active{ + width: 48px; + height: 48px; + border-radius: 2px; + box-shadow: inset 0 1px 3px 0 @color-black-40; + background-image: linear-gradient(to bottom, @color-silver, @color-white2 ); + color: @color-clear-blue; + border: none; + } + } + .body-right-header-right { + width: calc(~"100% - 158px"); + height: 100%; + display: flex; + align-items: center; + justify-content: center; + button{ + width: 48px; + height: 48px; + border-radius: 2px; + box-shadow: 0 1px 2px 0 @color-black-40; + background-image: linear-gradient(to bottom,@color-white2, @color-silver); + border:none; + } + button:first-child{ + margin-right: 16px; + } + button:active{ + width: 48px; + height: 48px; + border-radius: 2px; + box-shadow: inset 0 1px 3px 0 @color-black-40; + background-image: linear-gradient(to bottom, @color-silver, @color-white2 ); + border: none; + } + } + } + .body-right-card{ + width: 100%; + height: calc(~"100% - 70px"); + display: flex; + flex-flow: column; + align-items: center; + .card-report{ + > section { + display: flex; + align-items: center; + justify-content: center; + .rectangle_gray{ + width: 256px; + height: 120px; + border-radius: 2px; + display: flex; + flex-flow: column; + align-items: center; + justify-content: center; + background-color: @color-white2; + label{ + font-size: 18px; + color: @color-warm-grey; + margin-bottom: 30px; + } + span{ + font-size: 48px; + font-weight: bold; + line-height: 0.38; + color: @color-clear-blue; + } + } + } + } + } + } +} + + + +.card-report-events{ + width: 100%; + height: 100%; + display: flex; + .reports-box-body-left { + width: 1455px; + height: 100%; + .body-left-header, .body-left-header-machinestatus{ + width: 100%; + height: 70px; + display: flex; + flex-flow: row; + margin-top: 18px; + border-right: solid 2px @color-whitegrey; + position: relative; + margin-bottom: 16px; + .mx-datepicker-range{ + width: 170px; + height: 70px; + .mx-input-wrapper{ + margin-right: 24px; + width: 253px; + .mx-input{ + width: 253px; + 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; + padding-left: 16px; + } + } + } + > div { + display: flex; + flex-flow: column; + height: 70px; + margin-right: 24px; + label{ + font-size: 14px; + line-height: 1.29; + color: @color-warm-grey; + } + label.intervaldate{ + width: 253px; + font-size: 14px; + line-height: 1.29; + color: @color-warm-grey; + } + select{ + width: 192px; + 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; + padding-left: 16px; + } + div.interval-time{ + display: flex; + flex-flow: row; + input[type="time"]{ + width: 96px; + height: 48px; + border-radius: 2px; + box-shadow: inset 0 1px 3px 0 @color-black-50; + font-size: 18px; + line-height: 1.11; + color: @color-silver; + border: none; + padding-left: 16px; + } + input[type="time"]:first-child{ + margin-right: 16px; + } + input[type="time"]::-webkit-inner-spin-button { + -webkit-appearance: none; + display: none; + border:none; + } + } + input.program{ + width: 256px; + height: 46px; + border-radius: 2px; + box-shadow: inset 0 1px 3px 0 @color-black-50; + font-size: 18px; + line-height: 1.11; + color: @color-silver; + padding-left: 16px; + border: none; + } + .reports-select-operator{ + width: 192px; + height: 48px; + border-radius: 2px; + box-shadow: 0 1px 2px 0 @color-black-40; + font-size: 18px; + line-height: 1.11; + color: @color-greyish-brown; + } + .reports-select-shift{ + width: 144px; + height: 48px; + border-radius: 2px; + box-shadow: 0 1px 2px 0 @color-black-40; + } + } + + + .multiselect{ + z-index: 100; + label{ + font-size: 14px; + line-height: 1.29; + color: @color-warm-grey; + } + } + .selectBoxU{ + position: relative; + width: 192px; + } + .selectBoxU select{ + width: 100%; + padding: 8px; + cursor: pointer; + height: 48px; + font-size: 18px; + line-height: 1.11; + color: @color-greyish-brown; + box-shadow: 0 1px 2px @color-black-40; + border-radius: 2px; + option{ + display: none; + } + } + .overSelect{ + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; + } + .checkboxes, .checkboxesU{ + display: none; + } + .checkboxesView, .checkboxesViewUser{ + width: calc(~"100% - 8px");; + background-color: #fff; + display: block; + z-index: 100; + padding: 6px 4px; + box-shadow: 0 3px 5px 0 @color-black-40; + label{ + font-size: 18px; + margin:2px; + display: flex; + flex-flow: row; + } + .label-state{ + margin-left: 12px; + } + } + } + .body-left-header-machinestatus{ + border-right: 0px; + } + .body-left-center { + width: 1448px; + max-height: 681px; + display: flex; + flex-flow: column; + .body-left-center-container{ + width: 100%; + table{ + table-layout: fixed; + width: 100%; + border-collapse: collapse; + } + thead{ + border-bottom: solid 2px @color-label-grey; + font-size: 14px; + line-height: 1.29; + color: @color-darkish-blue; + display: block; + width: 1431px; + } + thead tr th{ + height: 48px; + } + tr:nth-child(even) {background: #FFF } + tr:nth-child(odd) {background: #dddddd } + + // thead tr{ + // width: 1448px; + // } + + thead tr:nth-child(odd){ + background: #FFF + } + + th, td{ + width: auto; + } + // th:nth-child(1), td:nth-child(1){ + // width:162px; + // max-width: 162px; + // text-align: center; + // } + // th:nth-child(2), td:nth-child(2){ + // width:139px; + // max-width: 139px; + // text-align: center; + // } + // th:nth-child(3), td:nth-child(3){ + // width:83px; + // max-width:83px; + // text-align: center; + // } + // th:nth-child(4), td:nth-child(4){ + // width:83px; + // max-width:83px; + // text-align: center; + // } + // th:nth-child(5), td:nth-child(5){ + // width:83px; + // max-width:83px; + // text-align: center; + // } + // th:nth-child(6), td:nth-child(6){ + // width:83px; + // max-width:83px; + // text-align: center; + // } + // th:nth-child(7), td:nth-child(7){ + // width:97px; + // max-width:97px; + // text-align: center; + // } + // th:nth-child(8), td:nth-child(8){ + // width:97px; + // max-width:97px; + // text-align: center; + // } + // th:nth-child(9), td:nth-child(9){ + // width:97px; + // max-width:97px; + // text-align: center; + // } + // th:nth-child(10), td:nth-child(10){ + // width:115px; + // max-width:115px; + // text-align: center; + // } + // th:nth-child(11), td:nth-child(11){ + // width:97px; + // max-width:97px; + // text-align: center; + // } + // th:nth-child(12), td:nth-child(12){ + // width:148px; + // max-width:148px; + // text-align: center; + // } + // th:nth-child(13), td:nth-child(13){ + // width:97px; + // max-width:97px; + // text-align: center; + // } + th:last-child{ + display: flex; + align-items: center; + float: right; + font-size: 23px; + font-weight: bold; + cursor: pointer; + } + th, td{ + overflow: hidden; + div{ + overflow: hidden; + max-height: 64px; + } + } + tbody{ + display: block; + height: 598px; + width: 1431px; + tr{ + // cursor: pointer; + height: 64px; + padding: 10px; + font-size: 14px; + line-height: 1.29; + color: @color-greyish-brown; + td{ + text-align: center; + &.green{ + color: @color-apple-green; + } + &.red{ + color: @color-scarlet; + } + } + td:last-child{ + width: 16px; + display: flex; + } + &.selected{ + background-color: rgba(23, 145, 255, 0.75); + color: @color-white; + font-weight: 600; + } + } + } + .pagination { + display: inline-block; + } + + .pagination button { + padding: 0; + border: none; + background: none; + color: @color-black-40; + float: left; + padding: 8px 16px; + text-decoration: none; + border: 1px solid @color-whitegrey; + margin: 0 4px; + } + .pagination button:first-child { + border-top-left-radius: 5px; + border-bottom-left-radius: 5px; + } + + .pagination button:last-child { + border-top-right-radius: 5px; + border-bottom-right-radius: 5px; + } + .pagination button.active { + background-color: @color-warm-grey; + color: @color-white; + } + + .pagination button:hover:not(.active) { + background-color: @color-whitegrey; + } + .body-left-center-left{ + width: 360px; + height: 616px; + display: flex; + flex-flow: column; + align-items: center; + border: solid 1px @color-whitegrey; + overflow-y: auto; + .multiselect{ + z-index: 100; + margin-bottom: 24px; + margin-top: 16px; + label{ + font-size: 14px; + line-height: 1.29; + color: @color-warm-grey; + } + } + .selectBox{ + position: relative; + width: 328px; + height: 64px; + } + .selectBox select{ + width: 100%; + padding: 8px; + cursor: pointer; + height: 64px; + font-size: 18px; + line-height: 1.11; + color: @color-greyish-brown; + margin-bottom: 0; + margin-top: 0; + option{ + display: none; + } + } + .overSelect{ + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; + } + .checkboxes, .checkboxesU{ + display: none; + } + .checkboxesView, .checkboxesViewUser{ + width: calc(~"100% - 8px");; + background-color: #fff; + display: block; + z-index: 100; + padding: 6px 4px; + box-shadow: 0 3px 5px 0 @color-black-40; + label{ + font-size: 18px; + margin:2px; + display: flex; + flex-flow: row; + } + .label-state{ + margin-left: 12px; + } + } + div{ + select{ + width: 328px; + height: 48px; + border-radius: 2px; + box-shadow: 0 1px 2px 0 @color-black-40; + margin-bottom: 24px; + margin-top: 16px; + padding-left: 16px; + font-size: 18px; + line-height: 1.11; + color: @color-greyish-brown; + } + .accordion-dropdown{ + header { + height: 64px; + width: 312px; + border-radius: 2px; + box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4); + display: flex; + justify-content: space-between; + align-items: center; + color: @color-darkish-blue; + line-height: 1; + font-size: 18px; + padding-left: 16px; + cursor: pointer; + span { + width: 100%; + } + .expander { + margin: 0 12px; + line-height: 28px; + height: 28px; + width: 28px; + font-size: 28px; + } + } + section { + width: 328px; + min-height: 0; + max-height: 0; + transition: max-height 100ms ease-in-out, min-height 200ms ease-in-out; + overflow: hidden; + &.expanded { + min-height: 64px; + background-color: rgba(255, 255, 255, 0.1); + max-height: 1000px; + } + .item { + height: 64px; + width: 100%; + line-height: 64px; + background-color: @color-white2; + } + + .dropdown{ + // background-color: @color-white2; + height: 100%; + margin-top: 2px; + .filename{ + display: flex; + height: 64px; + align-items: center; + cursor: pointer; + i{ + color: @color-cyan-blue; + margin: 0 20px 0 20px; + } + span{ + width: 100%; + font-size: 18px; + line-height: 1; + color: @color-darkish-blue; + } + + &.selected{ + span, i{ + color:#4b4b4b; + } + } + } + .filename.selected{ + background-color: rgba(255, 255, 255, 0.8); + } + + } + } + } + } + } + } + + .body-left-center-footer{ + height: 64px; + width: 100%; + border: solid 1px @color-whitegrey; + .header-title{ + width: 360px; + height: 64px; + display: flex; + flex-flow: column; + align-items: center; + justify-content: center; + .title{ + font-size: 14px; + color: @color-warm-grey; + } + .data-temporal{ + font-size: 18px; + line-height: 1; + color: @color-greyish-brown; + } + } + } + } + } + .reports-box-body-right { + width: 327px; + height: 100%; + .body-right-header{ + width: 100%; + height: 70px; + display: flex; + flex-flow: row; + margin-top: 18px; + justify-content: flex-end; + .body-right-header-left { + width: 158px; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + border-right: solid 2px @color-whitegrey; + button{ + width: 48px; + height: 48px; + border-radius: 2px; + box-shadow: 0 1px 2px 0 @color-black-40; + background-image: linear-gradient(to bottom,@color-white2, @color-silver); + border: none; + } + button.active{ + width: 48px; + height: 48px; + border-radius: 2px; + box-shadow: inset 0 1px 3px 0 @color-black-40; + background-image: linear-gradient(to bottom, @color-silver, @color-white2 ); + color: @color-clear-blue; + border: none; + } + } + .body-right-header-right { + width: calc(~"100% - 158px"); + height: 100%; + display: flex; + align-items: center; + justify-content: center; + button{ + width: 48px; + height: 48px; + border-radius: 2px; + box-shadow: 0 1px 2px 0 @color-black-40; + background-image: linear-gradient(to bottom,@color-white2, @color-silver); + border:none; + } + button:first-child{ + margin-right: 16px; + } + button:active{ + width: 48px; + height: 48px; + border-radius: 2px; + box-shadow: inset 0 1px 3px 0 @color-black-40; + background-image: linear-gradient(to bottom, @color-silver, @color-white2 ); + border: none; + } + } + } + .body-right-card{ + width: 100%; + height: calc(~"100% - 70px"); + display: flex; + flex-flow: column; + align-items: center; + .card-report{ + > section { + display: flex; + align-items: center; + justify-content: center; + .rectangle_gray{ + width: 256px; + height: 120px; + border-radius: 2px; + display: flex; + flex-flow: column; + align-items: center; + justify-content: center; + background-color: @color-white2; + label{ + font-size: 18px; + color: @color-warm-grey; + margin-bottom: 30px; + } + span{ + font-size: 48px; + font-weight: bold; + line-height: 0.38; + color: @color-clear-blue; + } + } + } + } + } + } +} + + +.card-report-alarms{ + width: 100%; + height: 100%; + display: flex; + .reports-box-body-left { + width: 1455px; + height: 100%; + .body-left-header, .body-left-header-machinestatus{ + width: 100%; + height: 70px; + display: flex; + flex-flow: row; + margin-top: 18px; + border-right: solid 2px @color-whitegrey; + position: relative; + margin-bottom: 16px; + .mx-datepicker-range{ + width: 170px; + height: 70px; + .mx-input-wrapper{ + margin-right: 24px; + width: 253px; + .mx-input{ + width: 253px; + height: 50px; + 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; + padding-left: 16px; + } + } + } + > div { + display: flex; + flex-flow: column; + height: 70px; + margin-right: 24px; + label.intervaldate{ + width: 253px; + } + select{ + width: 192px; + 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; + padding-left: 16px; + } + div.interval-time{ + display: flex; + flex-flow: row; + input[type="time"]{ + width: 112px; + height: 48px; + border-radius: 2px; + box-shadow: inset 0 1px 3px 0 @color-black-50; + font-size: 18px; + line-height: 1.11; + color: @color-silver; + border: none; + } + input[type="time"]:first-child{ + margin-right: 16px; + } + input[type="time"]::-webkit-inner-spin-button { + -webkit-appearance: none; + display: none; + border:none; + } + } + input.program{ + width: 256px; + height: 48px; + border-radius: 2px; + box-shadow: inset 0 1px 3px 0 @color-black-50; + font-size: 18px; + line-height: 1.11; + color: @color-silver; + padding-left: 16px; + border: none; + } + .reports-select-operator{ + width: 192px; + height: 48px; + border-radius: 2px; + box-shadow: 0 1px 2px 0 @color-black-40; + font-size: 18px; + line-height: 1.11; + color: @color-greyish-brown; + } + .reports-select-shift{ + width: 144px; + height: 48px; + border-radius: 2px; + box-shadow: 0 1px 2px 0 @color-black-40; + } + } + + + .multiselect{ + z-index: 100; + label{ + font-size: 14px; + line-height: 1.29; + color: @color-warm-grey; + } + } + .selectBox{ + position: relative; + width: 144px; + } + .selectBox select{ + width: 100%; + padding: 8px; + cursor: pointer; + height: 49px; + font-size: 18px; + line-height: 1.11; + color: @color-greyish-brown; + box-shadow: 0 1px 2px @color-black-40; + border-radius: 2px; + option{ + display: none; + } + } + .selectBoxU{ + position: relative; + width: 192px; + } + .selectBoxU select{ + width: 100%; + padding: 8px; + cursor: pointer; + height: 49px; + font-size: 18px; + line-height: 1.11; + color: @color-greyish-brown; + box-shadow: 0 1px 2px @color-black-40; + border-radius: 2px; + option{ + display: none; + } + } + .overSelect{ + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; + } + .checkboxes, .checkboxesU{ + display: none; + } + .checkboxesView, .checkboxesViewUser{ + width: calc(~"100% - 8px");; + background-color: #fff; + display: block; + z-index: 100; + padding: 6px 4px; + box-shadow: 0 3px 5px 0 @color-black-40; + label{ + font-size: 18px; + margin:2px; + display: flex; + flex-flow: row; + } + .label-state{ + margin-left: 12px; + } + } + } + .body-left-header-machinestatus{ + border-right: 0px; + } + .body-left-center { + width: 1448px; + max-height: 681px; + display: flex; + flex-flow: column; + .body-left-center-container{ + width: 100%; + table{ + table-layout: fixed; + width: 100%; + border-collapse: collapse; + } + thead{ + border-bottom: solid 2px @color-label-grey; + font-size: 14px; + line-height: 1.29; + color: @color-darkish-blue; + display: block; + width: 1431px; + } + thead tr th{ + height: 48px; + } + tr:nth-child(even) {background: #FFF } + tr:nth-child(odd) {background: #dddddd } + + // thead tr{ + // width: 1448px; + // } + + thead tr:nth-child(odd){ + background: #FFF + } + + th:nth-child(1), td:nth-child(1){ + width:162px; + max-width: 162px; + text-align: center; + } + th:nth-child(2), td:nth-child(2){ + width:139px; + max-width: 139px; + text-align: center; + } + th:nth-child(3), td:nth-child(3){ + width:83px; + max-width:83px; + text-align: center; + } + th:nth-child(4), td:nth-child(4){ + width:83px; + max-width:83px; + text-align: center; + } + th:nth-child(5), td:nth-child(5){ + width:83px; + max-width:83px; + text-align: center; + } + th:nth-child(6), td:nth-child(6){ + width:83px; + max-width:83px; + text-align: center; + } + th:nth-child(7), td:nth-child(7){ + width:97px; + max-width:97px; + text-align: center; + } + th:nth-child(8), td:nth-child(8){ + width:97px; + max-width:97px; + text-align: center; + } + th:nth-child(9), td:nth-child(9){ + width:97px; + max-width:97px; + text-align: center; + } + th:nth-child(10), td:nth-child(10){ + width:115px; + max-width:115px; + text-align: center; + } + th:nth-child(11), td:nth-child(11){ + width:97px; + max-width:97px; + text-align: center; + } + th:nth-child(12), td:nth-child(12){ + width:148px; + max-width:148px; + text-align: center; + } + th:nth-child(13), td:nth-child(13){ + width:97px; + max-width:97px; + text-align: center; + } + th:last-child{ + font-size: 23px; + font-weight: bold; + cursor: pointer; + } + th, td{ + overflow: hidden; + div{ + overflow: hidden; + max-height: 64px; + } + } + tbody{ + display: block; + height: 631px; + width: 1448px; + overflow: scroll; + tr{ + cursor: pointer; + height: 64px; + padding: 10px; + font-size: 14px; + line-height: 1.29; + color: @color-greyish-brown; + td{ + text-align: center; + &.green{ + color: @color-apple-green; + } + &.red{ + color: @color-scarlet; + } + } + td:last-child{ + width: 10px; + } + &.selected{ + background-color: rgba(23, 145, 255, 0.75); + color: @color-white; + font-weight: 600; + } + } + } + .body-left-center-left{ + width: 360px; + height: 616px; + display: flex; + flex-flow: column; + align-items: center; + border: solid 1px @color-whitegrey; + overflow-y: auto; + .multiselect{ + z-index: 100; + margin-bottom: 24px; + margin-top: 16px; + label{ + font-size: 14px; + line-height: 1.29; + color: @color-warm-grey; + } + } + .selectBox{ + position: relative; + width: 328px; + height: 64px; + } + .selectBox select{ + width: 100%; + padding: 8px; + cursor: pointer; + height: 64px; + font-size: 18px; + line-height: 1.11; + color: @color-greyish-brown; + margin-bottom: 0; + margin-top: 0; + option{ + display: none; + } + } + .overSelect{ + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; + } + .checkboxes, .checkboxesU{ + display: none; + } + .checkboxesView, .checkboxesViewUser{ + width: calc(~"100% - 8px");; + background-color: #fff; + display: block; + z-index: 100; + padding: 6px 4px; + box-shadow: 0 3px 5px 0 @color-black-40; + label{ + font-size: 18px; + margin:2px; + display: flex; + flex-flow: row; + } + .label-state{ + margin-left: 12px; + } + } + div{ + select{ + width: 328px; + height: 48px; + border-radius: 2px; + box-shadow: 0 1px 2px 0 @color-black-40; + margin-bottom: 24px; + margin-top: 16px; + padding-left: 16px; + font-size: 18px; + line-height: 1.11; + color: @color-greyish-brown; + } + .accordion-dropdown{ + header { + height: 64px; + width: 312px; + border-radius: 2px; + box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4); + display: flex; + justify-content: space-between; + align-items: center; + color: @color-darkish-blue; + line-height: 1; + font-size: 18px; + padding-left: 16px; + cursor: pointer; + span { + width: 100%; + } + .expander { + margin: 0 12px; + line-height: 28px; + height: 28px; + width: 28px; + font-size: 28px; + } + } + section { + width: 328px; + min-height: 0; + max-height: 0; + transition: max-height 100ms ease-in-out, min-height 200ms ease-in-out; + overflow: hidden; + &.expanded { + min-height: 64px; + background-color: rgba(255, 255, 255, 0.1); + max-height: 1000px; + } + .item { + height: 64px; + width: 100%; + line-height: 64px; + background-color: @color-white2; + } + + .dropdown{ + // background-color: @color-white2; + height: 100%; + margin-top: 2px; + .filename{ + display: flex; + height: 64px; + align-items: center; + cursor: pointer; + i{ + color: @color-cyan-blue; + margin: 0 20px 0 20px; + } + span{ + width: 100%; + font-size: 18px; + line-height: 1; + color: @color-darkish-blue; + } + + &.selected{ + span, i{ + color:#4b4b4b; + } + } + } + .filename.selected{ + background-color: rgba(255, 255, 255, 0.8); + } + + } + } + } + } + } + } + + .body-left-center-footer{ + height: 64px; + width: 100%; + border: solid 1px @color-whitegrey; + .header-title{ + width: 360px; + height: 64px; + display: flex; + flex-flow: column; + align-items: center; + justify-content: center; + .title{ + font-size: 14px; + color: @color-warm-grey; + } + .data-temporal{ + font-size: 18px; + line-height: 1; + color: @color-greyish-brown; + } + } + } + } + } + .reports-box-body-right { + width: 327px; + height: 100%; + .body-right-header{ + width: 100%; + height: 70px; + display: flex; + flex-flow: row; + margin-top: 18px; + justify-content: flex-end; + .body-right-header-left { + width: 158px; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + border-right: solid 2px @color-whitegrey; + button{ + width: 48px; + height: 48px; + border-radius: 2px; + box-shadow: 0 1px 2px 0 @color-black-40; + background-image: linear-gradient(to bottom,@color-white2, @color-silver); + border: none; + } + button.active{ + width: 48px; + height: 48px; + border-radius: 2px; + box-shadow: inset 0 1px 3px 0 @color-black-40; + background-image: linear-gradient(to bottom, @color-silver, @color-white2 ); + color: @color-clear-blue; + border: none; + } + } + .body-right-header-right { + width: calc(~"100% - 158px"); + height: 100%; + display: flex; + align-items: center; + justify-content: center; + button{ + width: 48px; + height: 48px; + border-radius: 2px; + box-shadow: 0 1px 2px 0 @color-black-40; + background-image: linear-gradient(to bottom,@color-white2, @color-silver); + border:none; + } + button:first-child{ + margin-right: 16px; + } + button:active{ + width: 48px; + height: 48px; + border-radius: 2px; + box-shadow: inset 0 1px 3px 0 @color-black-40; + background-image: linear-gradient(to bottom, @color-silver, @color-white2 ); + border: none; + } + } + } + .body-right-card{ + width: 100%; + height: calc(~"100% - 70px"); + display: flex; + flex-flow: column; + align-items: center; + .card-report{ + > section { + display: flex; + align-items: center; + justify-content: center; + .rectangle_gray{ + width: 256px; + height: 120px; + border-radius: 2px; + display: flex; + flex-flow: column; + align-items: center; + justify-content: center; + background-color: @color-white2; + label{ + font-size: 18px; + color: @color-warm-grey; + margin-bottom: 30px; + } + span{ + font-size: 48px; + font-weight: bold; + line-height: 0.38; + color: @color-clear-blue; + } + } + } + } + } + } +} + + +.card-report-machine-status{ + width: 100%; + height: 100%; + display: flex; + .reports-box-body-left { + width: 1455px; + height: 100%; + .body-left-header, .body-left-header-machinestatus{ + width: 100%; + height: 70px; + display: flex; + flex-flow: row; + margin-top: 18px; + border-right: solid 2px @color-whitegrey; + position: relative; + margin-bottom: 16px; + .mx-datepicker-range{ + width: 170px; + height: 70px; + .mx-input-wrapper{ + margin-right: 24px; + width: 253px; + .mx-input{ + width: 253px; + 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; + padding-left: 16px; + } + } + } + > div { + display: flex; + flex-flow: column; + height: 70px; + margin-right: 24px; + label{ + font-size: 14px; + line-height: 1.29; + color: @color-warm-grey; + } + label.intervaldate{ + width: 253px; + font-size: 14px; + line-height: 1.29; + color: @color-warm-grey; + } + select{ + width: 192px; + 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; + padding-left: 16px; + } + div.interval-time{ + display: flex; + flex-flow: row; + input[type="time"]{ + width: 96px; + height: 48px; + border-radius: 2px; + box-shadow: inset 0 1px 3px 0 @color-black-50; + font-size: 18px; + line-height: 1.11; + color: @color-silver; + border: none; + padding-left: 16px; + } + input[type="time"]:first-child{ + margin-right: 16px; + } + input[type="time"]::-webkit-inner-spin-button { + -webkit-appearance: none; + display: none; + border:none; + } + } + input.program{ + width: 256px; + height: 46px; + border-radius: 2px; + box-shadow: inset 0 1px 3px 0 @color-black-50; + font-size: 18px; + line-height: 1.11; + color: @color-silver; + padding-left: 16px; + border: none; + } + .reports-select-operator{ + width: 192px; + height: 48px; + border-radius: 2px; + box-shadow: 0 1px 2px 0 @color-black-40; + font-size: 18px; + line-height: 1.11; + color: @color-greyish-brown; + } + .reports-select-shift{ + width: 144px; + height: 48px; + border-radius: 2px; + box-shadow: 0 1px 2px 0 @color-black-40; + } + } + + + .multiselect{ + z-index: 100; + label{ + font-size: 14px; + line-height: 1.29; + color: @color-warm-grey; + } + } + .selectBoxU{ + position: relative; + width: 192px; + } + .selectBoxU select{ + width: 100%; + padding: 8px; + cursor: pointer; + height: 48px; + font-size: 18px; + line-height: 1.11; + color: @color-greyish-brown; + box-shadow: 0 1px 2px @color-black-40; + border-radius: 2px; + option{ + display: none; + } + } + .overSelect{ + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; + } + .checkboxes, .checkboxesU{ + display: none; + } + .checkboxesView, .checkboxesViewUser{ + width: calc(~"100% - 8px");; + background-color: #fff; + display: block; + z-index: 100; + padding: 6px 4px; + box-shadow: 0 3px 5px 0 @color-black-40; + label{ + font-size: 18px; + margin:2px; + display: flex; + flex-flow: row; + } + .label-state{ + margin-left: 12px; + } + } + } + .body-left-header-machinestatus{ + border-right: 0px; + } + .body-left-center { + width: 1448px; + max-height: 681px; + display: flex; + flex-flow: column; + .body-left-center-container{ + width: 100%; + table{ + table-layout: fixed; + width: 100%; + border-collapse: collapse; + } + thead{ + border-bottom: solid 2px @color-label-grey; + font-size: 14px; + line-height: 1.29; + color: @color-darkish-blue; + display: block; + width: 1431px; + } + thead tr th{ + height: 48px; + } + tr:nth-child(even) {background: #FFF } + tr:nth-child(odd) {background: #dddddd } + + // thead tr{ + // width: 1448px; + // } + + thead tr:nth-child(odd){ + background: #FFF + } + + th, td{ + width: auto; + } + // th:nth-child(1), td:nth-child(1){ + // width:162px; + // max-width: 162px; + // text-align: center; + // } + // th:nth-child(2), td:nth-child(2){ + // width:139px; + // max-width: 139px; + // text-align: center; + // } + // th:nth-child(3), td:nth-child(3){ + // width:83px; + // max-width:83px; + // text-align: center; + // } + // th:nth-child(4), td:nth-child(4){ + // width:83px; + // max-width:83px; + // text-align: center; + // } + // th:nth-child(5), td:nth-child(5){ + // width:83px; + // max-width:83px; + // text-align: center; + // } + // th:nth-child(6), td:nth-child(6){ + // width:83px; + // max-width:83px; + // text-align: center; + // } + // th:nth-child(7), td:nth-child(7){ + // width:97px; + // max-width:97px; + // text-align: center; + // } + // th:nth-child(8), td:nth-child(8){ + // width:97px; + // max-width:97px; + // text-align: center; + // } + // th:nth-child(9), td:nth-child(9){ + // width:97px; + // max-width:97px; + // text-align: center; + // } + // th:nth-child(10), td:nth-child(10){ + // width:115px; + // max-width:115px; + // text-align: center; + // } + // th:nth-child(11), td:nth-child(11){ + // width:97px; + // max-width:97px; + // text-align: center; + // } + // th:nth-child(12), td:nth-child(12){ + // width:148px; + // max-width:148px; + // text-align: center; + // } + // th:nth-child(13), td:nth-child(13){ + // width:97px; + // max-width:97px; + // text-align: center; + // } + th:last-child{ + display: flex; + align-items: center; + float: right; + font-size: 23px; + font-weight: bold; + cursor: pointer; + } + th, td{ + overflow: hidden; + div{ + overflow: hidden; + max-height: 64px; + } + } + tbody{ + display: block; + height: 598px; + width: 1431px; + tr{ + // cursor: pointer; + height: 64px; + padding: 10px; + font-size: 14px; + line-height: 1.29; + color: @color-greyish-brown; + td{ + text-align: center; + &.green{ + color: @color-apple-green; + } + &.red{ + color: @color-scarlet; + } + } + td:last-child{ + width: 16px; + display: flex; + } + &.selected{ + background-color: rgba(23, 145, 255, 0.75); + color: @color-white; + font-weight: 600; + } + } + } + .pagination { + display: inline-block; + } + + .pagination button { + padding: 0; + border: none; + background: none; + color: @color-black-40; + float: left; + padding: 8px 16px; + text-decoration: none; + border: 1px solid @color-whitegrey; + margin: 0 4px; + } + .pagination button:first-child { + border-top-left-radius: 5px; + border-bottom-left-radius: 5px; + } + + .pagination button:last-child { + border-top-right-radius: 5px; + border-bottom-right-radius: 5px; + } + .pagination button.active { + background-color: @color-warm-grey; + color: @color-white; + } + + .pagination button:hover:not(.active) { + background-color: @color-whitegrey; + } + .body-left-center-left{ + width: 360px; + height: 616px; + display: flex; + flex-flow: column; + align-items: center; + border: solid 1px @color-whitegrey; + overflow-y: auto; + .multiselect{ + z-index: 100; + margin-bottom: 24px; + margin-top: 16px; + label{ + font-size: 14px; + line-height: 1.29; + color: @color-warm-grey; + } + } + .selectBox{ + position: relative; + width: 328px; + height: 64px; + } + .selectBox select{ + width: 100%; + padding: 8px; + cursor: pointer; + height: 64px; + font-size: 18px; + line-height: 1.11; + color: @color-greyish-brown; + margin-bottom: 0; + margin-top: 0; + option{ + display: none; + } + } + .overSelect{ + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; + } + .checkboxes, .checkboxesU{ + display: none; + } + .checkboxesView, .checkboxesViewUser{ + width: calc(~"100% - 8px");; + background-color: #fff; + display: block; + z-index: 100; + padding: 6px 4px; + box-shadow: 0 3px 5px 0 @color-black-40; + label{ + font-size: 18px; + margin:2px; + display: flex; + flex-flow: row; + } + .label-state{ + margin-left: 12px; + } + } + div{ + select{ + width: 328px; + height: 48px; + border-radius: 2px; + box-shadow: 0 1px 2px 0 @color-black-40; + margin-bottom: 24px; + margin-top: 16px; + padding-left: 16px; + font-size: 18px; + line-height: 1.11; + color: @color-greyish-brown; + } + .accordion-dropdown{ + header { + height: 64px; + width: 312px; + border-radius: 2px; + box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4); + display: flex; + justify-content: space-between; + align-items: center; + color: @color-darkish-blue; + line-height: 1; + font-size: 18px; + padding-left: 16px; + cursor: pointer; + span { + width: 100%; + } + .expander { + margin: 0 12px; + line-height: 28px; + height: 28px; + width: 28px; + font-size: 28px; + } + } + section { + width: 328px; + min-height: 0; + max-height: 0; + transition: max-height 100ms ease-in-out, min-height 200ms ease-in-out; + overflow: hidden; + &.expanded { + min-height: 64px; + background-color: rgba(255, 255, 255, 0.1); + max-height: 1000px; + } + .item { + height: 64px; + width: 100%; + line-height: 64px; + background-color: @color-white2; + } + + .dropdown{ + // background-color: @color-white2; + height: 100%; + margin-top: 2px; + .filename{ + display: flex; + height: 64px; + align-items: center; + cursor: pointer; + i{ + color: @color-cyan-blue; + margin: 0 20px 0 20px; + } + span{ + width: 100%; + font-size: 18px; + line-height: 1; + color: @color-darkish-blue; + } + + &.selected{ + span, i{ + color:#4b4b4b; + } + } + } + .filename.selected{ + background-color: rgba(255, 255, 255, 0.8); + } + + } + } + } + } + } + } + + .body-left-center-footer{ + height: 64px; + width: 100%; + border: solid 1px @color-whitegrey; + .header-title{ + width: 360px; + height: 64px; + display: flex; + flex-flow: column; + align-items: center; + justify-content: center; + .title{ + font-size: 14px; + color: @color-warm-grey; + } + .data-temporal{ + font-size: 18px; + line-height: 1; + color: @color-greyish-brown; + } + } + } + } + } + .reports-box-body-right { + width: 327px; + height: 100%; + .body-right-header{ + width: 100%; + height: 70px; + display: flex; + flex-flow: row; + margin-top: 18px; + justify-content: flex-end; + .body-right-header-left { + width: 158px; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + border-right: solid 2px @color-whitegrey; + button{ + width: 48px; + height: 48px; + border-radius: 2px; + box-shadow: 0 1px 2px 0 @color-black-40; + background-image: linear-gradient(to bottom,@color-white2, @color-silver); + border: none; + } + button.active{ + width: 48px; + height: 48px; + border-radius: 2px; + box-shadow: inset 0 1px 3px 0 @color-black-40; + background-image: linear-gradient(to bottom, @color-silver, @color-white2 ); + color: @color-clear-blue; + border: none; + } + } + .body-right-header-right { + width: calc(~"100% - 158px"); + height: 100%; + display: flex; + align-items: center; + justify-content: center; + button{ + width: 48px; + height: 48px; + border-radius: 2px; + box-shadow: 0 1px 2px 0 @color-black-40; + background-image: linear-gradient(to bottom,@color-white2, @color-silver); + border:none; + } + button:first-child{ + margin-right: 16px; + } + button:active{ + width: 48px; + height: 48px; + border-radius: 2px; + box-shadow: inset 0 1px 3px 0 @color-black-40; + background-image: linear-gradient(to bottom, @color-silver, @color-white2 ); + border: none; + } + } + } + .body-right-card{ + width: 100%; + height: calc(~"100% - 70px"); + display: flex; + flex-flow: column; + align-items: center; + .card-report{ + > section { + display: flex; + align-items: center; + justify-content: center; + .rectangle_gray{ + width: 256px; + height: 120px; + border-radius: 2px; + display: flex; + flex-flow: column; + align-items: center; + justify-content: center; + background-color: @color-white2; + label{ + font-size: 18px; + color: @color-warm-grey; + margin-bottom: 30px; + } + span{ + font-size: 48px; + font-weight: bold; + line-height: 0.38; + color: @color-clear-blue; + } + } + } + } + } + } +} + +.card-report-timeline{ + width: 100%; + height: 100%; + display: flex; + .reports-box-body-left { + width: 1455px; + height: 100%; + .body-left-header, .body-left-header-machinestatus{ + width: 100%; + height: 70px; + display: flex; + flex-flow: row; + margin-top: 18px; + position: relative; + margin-bottom: 16px; + .mx-datepicker-range{ + width: 170px; + height: 70px; + .mx-input-wrapper{ + margin-right: 24px; + width: 253px; + .mx-input{ + width: 253px; + 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; + padding-left: 16px; + } + } + } + > div { + display: flex; + flex-flow: column; + height: 70px; + margin-right: 24px; + label{ + font-size: 14px; + line-height: 1.29; + color: @color-warm-grey; + } + label.intervaldate{ + width: 253px; + font-size: 14px; + line-height: 1.29; + color: @color-warm-grey; + } + div.interval-time{ + display: flex; + flex-flow: row; + input[type="time"]{ + width: 96px; + height: 48px; + border-radius: 2px; + box-shadow: inset 0 1px 3px 0 @color-black-50; + font-size: 18px; + line-height: 1.11; + color: @color-silver; + border: none; + padding-left: 16px; + } + input[type="time"]:first-child{ + margin-right: 16px; + } + input[type="time"]::-webkit-inner-spin-button { + -webkit-appearance: none; + display: none; + border:none; + } + } + input.program{ + width: 256px; + height: 46px; + border-radius: 2px; + box-shadow: inset 0 1px 3px 0 @color-black-50; + font-size: 18px; + line-height: 1.11; + color: @color-silver; + padding-left: 16px; + border: none; + } + } + } + .body-left-center { + width: 1448px; + max-height: 681px; + display: flex; + flex-flow: column; + .body-left-center-container{ + width: 100%; + .body-left-center-left{ + width: 360px; + height: 616px; + display: flex; + flex-flow: column; + align-items: center; + border: solid 1px @color-whitegrey; + overflow-y: auto; + .multiselect{ + z-index: 100; + margin-bottom: 24px; + margin-top: 16px; + label{ + font-size: 14px; + line-height: 1.29; + color: @color-warm-grey; + } + } + .selectBox{ + position: relative; + width: 328px; + height: 64px; + } + .selectBox select{ + width: 100%; + padding: 8px; + cursor: pointer; + height: 64px; + font-size: 18px; + line-height: 1.11; + color: @color-greyish-brown; + margin-bottom: 0; + margin-top: 0; + option{ + display: none; + } + } + .overSelect{ + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; + } + .checkboxes{ + display: none; + } + .checkboxesView{ + width: calc(~"100% - 8px");; + background-color: #fff; + display: block; + z-index: 100; + padding: 6px 4px; + box-shadow: 0 3px 5px 0 @color-black-40; + label{ + font-size: 18px; + margin:2px; + display: flex; + flex-flow: row; + } + .label-state{ + margin-left: 12px; + } + } + div{ + select{ + width: 328px; + height: 48px; + border-radius: 2px; + box-shadow: 0 1px 2px 0 @color-black-40; + margin-bottom: 24px; + margin-top: 16px; + padding-left: 16px; + font-size: 18px; + line-height: 1.11; + color: @color-greyish-brown; + } + .accordion-dropdown{ + header { + height: 64px; + width: 312px; + border-radius: 2px; + box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4); + display: flex; + justify-content: space-between; + align-items: center; + color: @color-darkish-blue; + line-height: 1; + font-size: 18px; + padding-left: 16px; + cursor: pointer; + span { + width: 100%; + } + .expander { + margin: 0 12px; + line-height: 28px; + height: 28px; + width: 28px; + font-size: 28px; + } + } + section { + width: 328px; + min-height: 0; + max-height: 0; + transition: max-height 100ms ease-in-out, min-height 200ms ease-in-out; + overflow: hidden; + &.expanded { + min-height: 64px; + background-color: rgba(255, 255, 255, 0.1); + max-height: 1000px; + } + .item { + height: 64px; + width: 100%; + line-height: 64px; + background-color: @color-white2; + } + + .dropdown{ + // background-color: @color-white2; + height: 100%; + margin-top: 2px; + .filename{ + display: flex; + height: 64px; + align-items: center; + cursor: pointer; + i{ + color: @color-cyan-blue; + margin: 0 20px 0 20px; + } + span{ + width: 100%; + font-size: 18px; + line-height: 1; + color: @color-darkish-blue; + } + + &.selected{ + span, i{ + color:#4b4b4b; + } + } + } + .filename.selected{ + background-color: rgba(255, 255, 255, 0.8); + } + + } + } + } + } + } + } + + .body-left-center-footer{ + height: 64px; + width: 100%; + border: solid 1px @color-whitegrey; + .header-title{ + width: 360px; + height: 64px; + display: flex; + flex-flow: column; + align-items: center; + justify-content: center; + .title{ + font-size: 14px; + color: @color-warm-grey; + } + .data-temporal{ + font-size: 18px; + line-height: 1; + color: @color-greyish-brown; + } + } + } + } + } + .reports-box-body-right { + width: 327px; + height: 100%; + .body-right-header{ + width: 100%; + height: 70px; + display: flex; + flex-flow: row; + margin-top: 18px; + justify-content: flex-end; + .body-right-header-right { + width: calc(~"100% - 158px"); + height: 100%; + display: flex; + align-items: center; + justify-content: center; + button{ + width: 48px; + height: 48px; + border-radius: 2px; + box-shadow: 0 1px 2px 0 @color-black-40; + background-image: linear-gradient(to bottom,@color-white2, @color-silver); + border:none; + } + button:first-child{ + margin-right: 16px; + } + button:active{ + width: 48px; + height: 48px; + border-radius: 2px; + box-shadow: inset 0 1px 3px 0 @color-black-40; + background-image: linear-gradient(to bottom, @color-silver, @color-white2 ); + border: none; + } + } + } + .body-right-card{ + width: 100%; + height: calc(~"100% - 70px"); + display: flex; + flex-flow: column; + align-items: center; + .card-report{ + > section { + display: flex; + align-items: center; + justify-content: center; + .rectangle_gray{ + width: 256px; + height: 120px; + border-radius: 2px; + display: flex; + flex-flow: column; + align-items: center; + justify-content: center; + background-color: @color-white2; + label{ + font-size: 18px; + color: @color-warm-grey; + margin-bottom: 30px; + } + span{ + font-size: 48px; + font-weight: bold; + line-height: 0.38; + color: @color-clear-blue; + } + } + } + } + } + } +} + +/** Versione zeplin machine status non cancellare + +.card-report-machine-status{ + width: 100%; + height: 100%; + display: flex; + .reports-box-body-left { + width: 1455px; + height: 100%; + .body-left-header, .body-left-header-machinestatus{ + width: 100%; + height: 70px; + display: flex; + flex-flow: row; + margin-top: 18px; + border-right: solid 2px @color-whitegrey; + position: relative; + margin-bottom: 16px; + .mx-datepicker-range{ + width: 170px; + height: 70px; + .mx-input-wrapper{ + margin-right: 24px; + width: 253px; + .mx-input{ + width: 253px; + height: 50px; + 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; + padding-left: 16px; + } + } + } + > div { + display: flex; + flex-flow: column; + height: 70px; + margin-right: 24px; + label.intervaldate{ + width: 253px; + } + select{ + width: 192px; + 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; + padding-left: 16px; + } + div.interval-time{ + display: flex; + flex-flow: row; + input[type="time"]{ + width: 112px; + height: 48px; + border-radius: 2px; + box-shadow: inset 0 1px 3px 0 @color-black-50; + font-size: 18px; + line-height: 1.11; + color: @color-silver; + border: none; + } + input[type="time"]:first-child{ + margin-right: 16px; + } + input[type="time"]::-webkit-inner-spin-button { + -webkit-appearance: none; + display: none; + border:none; + } + } + input.program{ + width: 256px; + height: 48px; + border-radius: 2px; + box-shadow: inset 0 1px 3px 0 @color-black-50; + font-size: 18px; + line-height: 1.11; + color: @color-silver; + padding-left: 16px; + border: none; + } + .reports-select-operator{ + width: 192px; + height: 48px; + border-radius: 2px; + box-shadow: 0 1px 2px 0 @color-black-40; + font-size: 18px; + line-height: 1.11; + color: @color-greyish-brown; + } + .reports-select-shift{ + width: 144px; + height: 48px; + border-radius: 2px; + box-shadow: 0 1px 2px 0 @color-black-40; + } + } + .multiselect{ + z-index: 100; + label{ + font-size: 14px; + line-height: 1.29; + color: @color-warm-grey; + } + } + .selectBox{ + position: relative; + width: 144px; + } + .selectBox select{ + width: 100%; + padding: 8px; + cursor: pointer; + height: 49px; + font-size: 18px; + line-height: 1.11; + color: @color-greyish-brown; + box-shadow: 0 1px 2px @color-black-40; + border-radius: 2px; + option{ + display: none; + } + } + .selectBoxU{ + position: relative; + width: 192px; + } + .selectBoxU select{ + width: 100%; + padding: 8px; + cursor: pointer; + height: 49px; + font-size: 18px; + line-height: 1.11; + color: @color-greyish-brown; + box-shadow: 0 1px 2px @color-black-40; + border-radius: 2px; + option{ + display: none; + } + } + .overSelect{ + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; + } + .checkboxes, .checkboxesU{ + display: none; + } + .checkboxesView, .checkboxesViewUser{ + width: calc(~"100% - 8px");; + background-color: #fff; + display: block; + z-index: 100; + padding: 6px 4px; + box-shadow: 0 3px 5px 0 @color-black-40; + label{ + font-size: 18px; + margin:2px; + display: flex; + flex-flow: row; + } + .label-state{ + margin-left: 12px; + } + } + } + .body-left-header-machinestatus{ + border-right: 0px; + } + .body-left-center { + width: 1448px; + max-height: 681px; + display: flex; + flex-flow: column; + .body-left-center-container{ + width: 100%; + table{ + table-layout: fixed; + width: 100%; + border-collapse: collapse; + } + thead{ + border-bottom: solid 2px @color-label-grey; + font-size: 14px; + line-height: 1.29; + color: @color-darkish-blue; + display: block; + width: 1431px; + } + thead tr th{ + height: 48px; + } + tr:nth-child(even) {background: #FFF } + tr:nth-child(odd) {background: #dddddd } + // thead tr{ + // width: 1448px; + // } + thead tr:nth-child(odd){ + background: #FFF + } + th:nth-child(1), td:nth-child(1){ + width:162px; + max-width: 162px; + text-align: center; + } + th:nth-child(2), td:nth-child(2){ + width:139px; + max-width: 139px; + text-align: center; + } + th:nth-child(3), td:nth-child(3){ + width:83px; + max-width:83px; + text-align: center; + } + th:nth-child(4), td:nth-child(4){ + width:83px; + max-width:83px; + text-align: center; + } + th:nth-child(5), td:nth-child(5){ + width:83px; + max-width:83px; + text-align: center; + } + th:nth-child(6), td:nth-child(6){ + width:83px; + max-width:83px; + text-align: center; + } + th:nth-child(7), td:nth-child(7){ + width:97px; + max-width:97px; + text-align: center; + } + th:nth-child(8), td:nth-child(8){ + width:97px; + max-width:97px; + text-align: center; + } + th:nth-child(9), td:nth-child(9){ + width:97px; + max-width:97px; + text-align: center; + } + th:nth-child(10), td:nth-child(10){ + width:115px; + max-width:115px; + text-align: center; + } + th:nth-child(11), td:nth-child(11){ + width:97px; + max-width:97px; + text-align: center; + } + th:nth-child(12), td:nth-child(12){ + width:148px; + max-width:148px; + text-align: center; + } + th:nth-child(13), td:nth-child(13){ + width:97px; + max-width:97px; + text-align: center; + } + th:last-child{ + font-size: 23px; + font-weight: bold; + cursor: pointer; + } + th, td{ + overflow: hidden; + div{ + overflow: hidden; + max-height: 64px; + } + } + tbody{ + display: block; + height: 631px; + width: 1448px; + overflow: scroll; + tr{ + cursor: pointer; + height: 64px; + padding: 10px; + font-size: 14px; + line-height: 1.29; + color: @color-greyish-brown; + td{ + text-align: center; + &.green{ + color: @color-apple-green; + } + &.red{ + color: @color-scarlet; + } + } + td:last-child{ + width: 10px; + } + &.selected{ + background-color: rgba(23, 145, 255, 0.75); + color: @color-white; + font-weight: 600; + } + } + } + .body-left-center-left{ + width: 360px; + height: 616px; + display: flex; + flex-flow: column; + align-items: center; + border: solid 1px @color-whitegrey; + overflow-y: auto; + .multiselect{ + z-index: 100; + margin-bottom: 24px; + margin-top: 16px; + label{ + font-size: 14px; + line-height: 1.29; + color: @color-warm-grey; + } + } + .selectBox{ + position: relative; + width: 328px; + height: 64px; + } + .selectBox select{ + width: 100%; + padding: 8px; + cursor: pointer; + height: 64px; + font-size: 18px; + line-height: 1.11; + color: @color-greyish-brown; + margin-bottom: 0; + margin-top: 0; + option{ + display: none; + } + } + .overSelect{ + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; + } + .checkboxes, .checkboxesU{ + display: none; + } + .checkboxesView, .checkboxesViewUser{ + width: calc(~"100% - 8px");; + background-color: #fff; + display: block; + z-index: 100; + padding: 6px 4px; + box-shadow: 0 3px 5px 0 @color-black-40; + label{ + font-size: 18px; + margin:2px; + display: flex; + flex-flow: row; + } + .label-state{ + margin-left: 12px; + } + } + div{ + select{ + width: 328px; + height: 48px; + border-radius: 2px; + box-shadow: 0 1px 2px 0 @color-black-40; + margin-bottom: 24px; + margin-top: 16px; + padding-left: 16px; + font-size: 18px; + line-height: 1.11; + color: @color-greyish-brown; + } + .accordion-dropdown{ + header { + height: 64px; + width: 312px; + border-radius: 2px; + box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4); + display: flex; + justify-content: space-between; + align-items: center; + color: @color-darkish-blue; + line-height: 1; + font-size: 18px; + padding-left: 16px; + cursor: pointer; + span { + width: 100%; + } + .expander { + margin: 0 12px; + line-height: 28px; + height: 28px; + width: 28px; + font-size: 28px; + } + } + section { + width: 328px; + min-height: 0; + max-height: 0; + transition: max-height 100ms ease-in-out, min-height 200ms ease-in-out; + overflow: hidden; + &.expanded { + min-height: 64px; + background-color: rgba(255, 255, 255, 0.1); + max-height: 1000px; + } + .item { + height: 64px; + width: 100%; + line-height: 64px; + background-color: @color-white2; + } + + .dropdown{ + // background-color: @color-white2; + height: 100%; + margin-top: 2px; + .filename{ + display: flex; + height: 64px; + align-items: center; + cursor: pointer; + i{ + color: @color-cyan-blue; + margin: 0 20px 0 20px; + } + span{ + width: 100%; + font-size: 18px; + line-height: 1; + color: @color-darkish-blue; + } + + &.selected{ + span, i{ + color:#4b4b4b; + } + } + } + .filename.selected{ + background-color: rgba(255, 255, 255, 0.8); + } + + } + } + } + } + } + } + .body-left-center-footer{ + height: 64px; + width: 100%; + border: solid 1px @color-whitegrey; + .header-title{ + width: 360px; + height: 64px; + display: flex; + flex-flow: column; + align-items: center; + justify-content: center; + .title{ + font-size: 14px; + color: @color-warm-grey; + } + .data-temporal{ + font-size: 18px; + line-height: 1; + color: @color-greyish-brown; + } + } + } + } + } + .reports-box-body-right { + width: 327px; + height: 100%; + .body-right-header{ + width: 100%; + height: 70px; + display: flex; + flex-flow: row; + margin-top: 18px; + justify-content: flex-end; + .body-right-header-left { + width: 158px; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + border-right: solid 2px @color-whitegrey; + button{ + width: 48px; + height: 48px; + border-radius: 2px; + box-shadow: 0 1px 2px 0 @color-black-40; + background-image: linear-gradient(to bottom,@color-white2, @color-silver); + border: none; + } + button.active{ + width: 48px; + height: 48px; + border-radius: 2px; + box-shadow: inset 0 1px 3px 0 @color-black-40; + background-image: linear-gradient(to bottom, @color-silver, @color-white2 ); + color: @color-clear-blue; + border: none; + } + } + .body-right-header-right { + width: calc(~"100% - 158px"); + height: 100%; + display: flex; + align-items: center; + justify-content: center; + button{ + width: 48px; + height: 48px; + border-radius: 2px; + box-shadow: 0 1px 2px 0 @color-black-40; + background-image: linear-gradient(to bottom,@color-white2, @color-silver); + border:none; + } + button:first-child{ + margin-right: 16px; + } + button:active{ + width: 48px; + height: 48px; + border-radius: 2px; + box-shadow: inset 0 1px 3px 0 @color-black-40; + background-image: linear-gradient(to bottom, @color-silver, @color-white2 ); + border: none; + } + } + } + .body-right-card{ + width: 100%; + height: calc(~"100% - 70px"); + display: flex; + flex-flow: column; + align-items: center; + .card-report{ + > section { + display: flex; + align-items: center; + justify-content: center; + .rectangle_gray{ + width: 256px; + height: 120px; + border-radius: 2px; + display: flex; + flex-flow: column; + align-items: center; + justify-content: center; + background-color: @color-white2; + label{ + font-size: 18px; + color: @color-warm-grey; + margin-bottom: 30px; + } + span{ + font-size: 48px; + font-weight: bold; + line-height: 0.38; + color: @color-clear-blue; + } + } + } + } + } + } +} */ \ No newline at end of file diff --git a/Step/wwwroot/assets/styles/base/report.less b/Step/wwwroot/assets/styles/base/report.less index 698cd2e1..609e6b21 100644 --- a/Step/wwwroot/assets/styles/base/report.less +++ b/Step/wwwroot/assets/styles/base/report.less @@ -81,631 +81,6 @@ padding: 0 24px 24px 24px; display: flex; flex-flow: row; - .reports-box-body-left { - width: 1455px; - height: 100%; - .body-left-header, .body-left-header-machinestatus{ - width: 100%; - height: 70px; - display: flex; - flex-flow: row; - margin-top: 18px; - border-right: solid 2px @color-whitegrey; - position: relative; - margin-bottom: 16px; - .mx-datepicker-range{ - width: 170px; - height: 70px; - .mx-input-wrapper{ - margin-right: 24px; - width: 253px; - .mx-input{ - width: 253px; - height: 50px; - 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; - padding-left: 16px; - } - } - } - > div { - display: flex; - flex-flow: column; - height: 70px; - margin-right: 24px; - label.intervaldate{ - width: 253px; - } - select{ - width: 192px; - 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; - padding-left: 16px; - } - div.interval-time{ - display: flex; - flex-flow: row; - input[type="time"]{ - width: 112px; - height: 48px; - border-radius: 2px; - box-shadow: inset 0 1px 3px 0 @color-black-50; - font-size: 18px; - line-height: 1.11; - color: @color-silver; - border: none; - } - input[type="time"]:first-child{ - margin-right: 16px; - } - input[type="time"]::-webkit-inner-spin-button { - -webkit-appearance: none; - display: none; - border:none; - } - } - input.program{ - width: 256px; - height: 48px; - border-radius: 2px; - box-shadow: inset 0 1px 3px 0 @color-black-50; - font-size: 18px; - line-height: 1.11; - color: @color-silver; - padding-left: 16px; - border: none; - } - .reports-select-operator{ - width: 192px; - height: 48px; - border-radius: 2px; - box-shadow: 0 1px 2px 0 @color-black-40; - font-size: 18px; - line-height: 1.11; - color: @color-greyish-brown; - } - .reports-select-shift{ - width: 144px; - height: 48px; - border-radius: 2px; - box-shadow: 0 1px 2px 0 @color-black-40; - } - label.label_advanced_filters{ - margin-top: 35px; - font-size: 18px; - line-height: 1; - color: @color-darkish-blue; - cursor: pointer; - span{ - text-decoration-line: underline; - text-decoration-color: @color-darkish-blue; - text-decoration-style: solid; - } - } - } - div.advanced-filters{ - z-index: 100; - height: 80px; - width: 100%; - display: flex; - flex-flow: row; - background-color: @color-background-white; - position: absolute; - top: 80px; - > div { - display: flex; - flex-flow: column; - height: 70px; - margin-right: 24px; - label.intervaldate{ - width: 253px; - } - select{ - width: 192px; - 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; - padding-left: 16px; - } - div.interval-time{ - display: flex; - flex-flow: row; - input[type="time"]{ - width: 112px; - height: 48px; - border-radius: 2px; - box-shadow: inset 0 1px 3px 0 @color-black-50; - font-size: 18px; - line-height: 1.11; - color: @color-silver; - border: none; - } - input[type="time"]:first-child{ - margin-right: 16px; - } - input[type="time"]::-webkit-inner-spin-button { - -webkit-appearance: none; - display: none; - border:none; - } - } - input.program{ - width: 256px; - height: 48px; - border-radius: 2px; - box-shadow: inset 0 1px 3px 0 @color-black-50; - font-size: 18px; - line-height: 1.11; - color: @color-silver; - padding-left: 16px; - border: none; - } - .reports-select-operator{ - width: 192px; - height: 48px; - border-radius: 2px; - box-shadow: 0 1px 2px 0 @color-black-40; - font-size: 18px; - line-height: 1.11; - color: @color-greyish-brown; - } - .reports-select-shift{ - width: 144px; - height: 48px; - border-radius: 2px; - box-shadow: 0 1px 2px 0 @color-black-40; - } - label.label_advanced_filters{ - margin-top: 35px; - font-size: 18px; - line-height: 1; - color: @color-darkish-blue; - span{ - text-decoration-line: underline; - text-decoration-color: @color-darkish-blue; - text-decoration-style: solid; - } - } - } - } - } - .body-left-header-machinestatus{ - border-right: 0px; - } - .body-left-center { - width: 1448px; - max-height: 681px; - display: flex; - flex-flow: column; - .body-left-center-container{ - width: 100%; - table{ - table-layout: fixed; - width: 100%; - border-collapse: collapse; - } - thead{ - border-bottom: solid 2px @color-label-grey; - font-size: 14px; - line-height: 1.29; - color: @color-darkish-blue; - display: block; - width: 1431px; - } - thead tr th{ - height: 48px; - } - tr:nth-child(even) {background: #FFF } - tr:nth-child(odd) {background: #dddddd } - - // thead tr{ - // width: 1448px; - // } - - thead tr:nth-child(odd){ - background: #FFF - } - - th:nth-child(1), td:nth-child(1){ - width:162px; - max-width: 162px; - text-align: center; - } - th:nth-child(2), td:nth-child(2){ - width:139px; - max-width: 139px; - text-align: center; - } - th:nth-child(3), td:nth-child(3){ - width:83px; - max-width:83px; - text-align: center; - } - th:nth-child(4), td:nth-child(4){ - width:83px; - max-width:83px; - text-align: center; - } - th:nth-child(5), td:nth-child(5){ - width:83px; - max-width:83px; - text-align: center; - } - th:nth-child(6), td:nth-child(6){ - width:83px; - max-width:83px; - text-align: center; - } - th:nth-child(7), td:nth-child(7){ - width:97px; - max-width:97px; - text-align: center; - } - th:nth-child(8), td:nth-child(8){ - width:97px; - max-width:97px; - text-align: center; - } - th:nth-child(9), td:nth-child(9){ - width:97px; - max-width:97px; - text-align: center; - } - th:nth-child(10), td:nth-child(10){ - width:115px; - max-width:115px; - text-align: center; - } - th:nth-child(11), td:nth-child(11){ - width:97px; - max-width:97px; - text-align: center; - } - th:nth-child(12), td:nth-child(12){ - width:148px; - max-width:148px; - text-align: center; - } - th:nth-child(13), td:nth-child(13){ - width:97px; - max-width:97px; - text-align: center; - } - th:last-child{ - font-size: 23px; - font-weight: bold; - cursor: pointer; - } - th, td{ - overflow: hidden; - div{ - overflow: hidden; - max-height: 64px; - } - } - tbody{ - display: block; - height: 631px; - width: 1448px; - overflow: scroll; - tr{ - cursor: pointer; - height: 64px; - padding: 10px; - font-size: 14px; - line-height: 1.29; - color: @color-greyish-brown; - td{ - text-align: center; - &.green{ - color: @color-apple-green; - } - &.red{ - color: @color-scarlet; - } - } - td:last-child{ - width: 10px; - } - &.selected{ - background-color: rgba(23, 145, 255, 0.75); - color: @color-white; - font-weight: 600; - } - } - } - .body-left-center-left{ - width: 360px; - height: 616px; - display: flex; - flex-flow: column; - align-items: center; - border: solid 1px @color-whitegrey; - overflow-y: auto; - .multiselect{ - z-index: 100; - margin-bottom: 24px; - margin-top: 16px; - label{ - font-size: 14px; - line-height: 1.29; - color: @color-warm-grey; - } - } - .selectBox{ - position: relative; - width: 328px; - height: 64px; - } - .selectBox select{ - width: 100%; - padding: 8px; - cursor: pointer; - height: 64px; - font-size: 18px; - line-height: 1.11; - color: @color-greyish-brown; - margin-bottom: 0; - margin-top: 0; - option{ - display: none; - } - } - .overSelect{ - position: absolute; - left: 0; - right: 0; - top: 0; - bottom: 0; - } - .checkboxes, .checkboxesU{ - display: none; - } - .checkboxesView, .checkboxesViewUser{ - width: calc(~"100% - 8px");; - background-color: #fff; - display: block; - z-index: 100; - padding: 6px 4px; - box-shadow: 0 3px 5px 0 @color-black-40; - label{ - font-size: 18px; - margin:2px; - display: flex; - flex-flow: row; - } - .label-state{ - margin-left: 12px; - } - } - div{ - select{ - width: 328px; - height: 48px; - border-radius: 2px; - box-shadow: 0 1px 2px 0 @color-black-40; - margin-bottom: 24px; - margin-top: 16px; - padding-left: 16px; - font-size: 18px; - line-height: 1.11; - color: @color-greyish-brown; - } - .accordion-dropdown{ - header { - height: 64px; - width: 312px; - border-radius: 2px; - box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4); - display: flex; - justify-content: space-between; - align-items: center; - color: @color-darkish-blue; - line-height: 1; - font-size: 18px; - padding-left: 16px; - cursor: pointer; - span { - width: 100%; - } - .expander { - margin: 0 12px; - line-height: 28px; - height: 28px; - width: 28px; - font-size: 28px; - } - } - section { - width: 328px; - min-height: 0; - max-height: 0; - transition: max-height 100ms ease-in-out, min-height 200ms ease-in-out; - overflow: hidden; - &.expanded { - min-height: 64px; - background-color: rgba(255, 255, 255, 0.1); - max-height: 1000px; - } - .item { - height: 64px; - width: 100%; - line-height: 64px; - background-color: @color-white2; - } - - .dropdown{ - // background-color: @color-white2; - height: 100%; - margin-top: 2px; - .filename{ - display: flex; - height: 64px; - align-items: center; - cursor: pointer; - i{ - color: @color-cyan-blue; - margin: 0 20px 0 20px; - } - span{ - width: 100%; - font-size: 18px; - line-height: 1; - color: @color-darkish-blue; - } - - &.selected{ - span, i{ - color:#4b4b4b; - } - } - } - .filename.selected{ - background-color: rgba(255, 255, 255, 0.8); - } - - } - } - } - } - } - } - - .body-left-center-footer{ - height: 64px; - width: 100%; - border: solid 1px @color-whitegrey; - .header-title{ - width: 360px; - height: 64px; - display: flex; - flex-flow: column; - align-items: center; - justify-content: center; - .title{ - font-size: 14px; - color: @color-warm-grey; - } - .data-temporal{ - font-size: 18px; - line-height: 1; - color: @color-greyish-brown; - } - } - } - } - } - .reports-box-body-right { - width: 327px; - height: 100%; - .body-right-header{ - width: 100%; - height: 70px; - display: flex; - flex-flow: row; - margin-top: 18px; - justify-content: flex-end; - .body-right-header-left { - width: 158px; - height: 100%; - display: flex; - align-items: center; - justify-content: center; - border-right: solid 2px @color-whitegrey; - button{ - width: 48px; - height: 48px; - border-radius: 2px; - box-shadow: 0 1px 2px 0 @color-black-40; - background-image: linear-gradient(to bottom,@color-white2, @color-silver); - border: none; - } - button.active{ - width: 48px; - height: 48px; - border-radius: 2px; - box-shadow: inset 0 1px 3px 0 @color-black-40; - background-image: linear-gradient(to bottom, @color-silver, @color-white2 ); - color: @color-clear-blue; - border: none; - } - } - .body-right-header-right { - width: calc(~"100% - 158px"); - height: 100%; - display: flex; - align-items: center; - justify-content: center; - button{ - width: 48px; - height: 48px; - border-radius: 2px; - box-shadow: 0 1px 2px 0 @color-black-40; - background-image: linear-gradient(to bottom,@color-white2, @color-silver); - border:none; - } - button:first-child{ - margin-right: 16px; - } - button:active{ - width: 48px; - height: 48px; - border-radius: 2px; - box-shadow: inset 0 1px 3px 0 @color-black-40; - background-image: linear-gradient(to bottom, @color-silver, @color-white2 ); - border: none; - } - } - } - .body-right-card{ - width: 100%; - height: calc(~"100% - 70px"); - display: flex; - flex-flow: column; - align-items: center; - .card-report{ - > section { - display: flex; - align-items: center; - justify-content: center; - .rectangle_gray{ - width: 256px; - height: 120px; - border-radius: 2px; - display: flex; - flex-flow: column; - align-items: center; - justify-content: center; - background-color: @color-white2; - label{ - font-size: 18px; - color: @color-warm-grey; - margin-bottom: 30px; - } - span{ - font-size: 48px; - font-weight: bold; - line-height: 0.38; - color: @color-clear-blue; - } - } - } - } - } - } } } } \ No newline at end of file diff --git a/Step/wwwroot/assets/styles/style.css b/Step/wwwroot/assets/styles/style.css index d3981096..70e4c6c1 100644 --- a/Step/wwwroot/assets/styles/style.css +++ b/Step/wwwroot/assets/styles/style.css @@ -8111,6 +8111,3350 @@ footer .container button.big:before { justify-content: center; align-items: center; } +.card-report-production { + width: 100%; + height: 100%; + display: flex; +} +.card-report-production .reports-box-body-left { + width: 1455px; + height: 100%; +} +.card-report-production .reports-box-body-left .body-left-header, +.card-report-production .reports-box-body-left .body-left-header-machinestatus { + width: 100%; + height: 70px; + display: flex; + flex-flow: row; + margin-top: 18px; + border-right: solid 2px #dddddd; + position: relative; + margin-bottom: 16px; +} +.card-report-production .reports-box-body-left .body-left-header .mx-datepicker-range, +.card-report-production .reports-box-body-left .body-left-header-machinestatus .mx-datepicker-range { + width: 170px; + height: 70px; +} +.card-report-production .reports-box-body-left .body-left-header .mx-datepicker-range .mx-input-wrapper, +.card-report-production .reports-box-body-left .body-left-header-machinestatus .mx-datepicker-range .mx-input-wrapper { + margin-right: 24px; + width: 253px; +} +.card-report-production .reports-box-body-left .body-left-header .mx-datepicker-range .mx-input-wrapper .mx-input, +.card-report-production .reports-box-body-left .body-left-header-machinestatus .mx-datepicker-range .mx-input-wrapper .mx-input { + width: 253px; + 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; + padding-left: 16px; +} +.card-report-production .reports-box-body-left .body-left-header > div, +.card-report-production .reports-box-body-left .body-left-header-machinestatus > div { + display: flex; + flex-flow: column; + height: 70px; + margin-right: 24px; +} +.card-report-production .reports-box-body-left .body-left-header > div label, +.card-report-production .reports-box-body-left .body-left-header-machinestatus > div label { + font-size: 14px; + line-height: 1.29; + color: #878787; +} +.card-report-production .reports-box-body-left .body-left-header > div label.intervaldate, +.card-report-production .reports-box-body-left .body-left-header-machinestatus > div label.intervaldate { + width: 253px; + font-size: 14px; + line-height: 1.29; + color: #878787; +} +.card-report-production .reports-box-body-left .body-left-header > div select, +.card-report-production .reports-box-body-left .body-left-header-machinestatus > div select { + width: 192px; + 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; + padding-left: 16px; +} +.card-report-production .reports-box-body-left .body-left-header > div div.interval-time, +.card-report-production .reports-box-body-left .body-left-header-machinestatus > div div.interval-time { + display: flex; + flex-flow: row; +} +.card-report-production .reports-box-body-left .body-left-header > div div.interval-time input[type="time"], +.card-report-production .reports-box-body-left .body-left-header-machinestatus > div div.interval-time input[type="time"] { + width: 96px; + height: 48px; + border-radius: 2px; + box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.5); + font-size: 18px; + line-height: 1.11; + color: #bbbcbc; + border: none; + padding-left: 16px; +} +.card-report-production .reports-box-body-left .body-left-header > div div.interval-time input[type="time"]:first-child, +.card-report-production .reports-box-body-left .body-left-header-machinestatus > div div.interval-time input[type="time"]:first-child { + margin-right: 16px; +} +.card-report-production .reports-box-body-left .body-left-header > div div.interval-time input[type="time"]::-webkit-inner-spin-button, +.card-report-production .reports-box-body-left .body-left-header-machinestatus > div div.interval-time input[type="time"]::-webkit-inner-spin-button { + -webkit-appearance: none; + display: none; + border: none; +} +.card-report-production .reports-box-body-left .body-left-header > div input.program, +.card-report-production .reports-box-body-left .body-left-header-machinestatus > div input.program { + width: 256px; + height: 46px; + border-radius: 2px; + box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.5); + font-size: 18px; + line-height: 1.11; + color: #bbbcbc; + padding-left: 16px; + border: none; +} +.card-report-production .reports-box-body-left .body-left-header > div .reports-select-operator, +.card-report-production .reports-box-body-left .body-left-header-machinestatus > div .reports-select-operator { + width: 192px; + height: 48px; + border-radius: 2px; + box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4); + font-size: 18px; + line-height: 1.11; + color: #4b4b4b; +} +.card-report-production .reports-box-body-left .body-left-header > div .reports-select-shift, +.card-report-production .reports-box-body-left .body-left-header-machinestatus > div .reports-select-shift { + width: 144px; + height: 48px; + border-radius: 2px; + box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4); +} +.card-report-production .reports-box-body-left .body-left-header .multiselect, +.card-report-production .reports-box-body-left .body-left-header-machinestatus .multiselect { + z-index: 100; +} +.card-report-production .reports-box-body-left .body-left-header .multiselect label, +.card-report-production .reports-box-body-left .body-left-header-machinestatus .multiselect label { + font-size: 14px; + line-height: 1.29; + color: #878787; +} +.card-report-production .reports-box-body-left .body-left-header .selectBoxU, +.card-report-production .reports-box-body-left .body-left-header-machinestatus .selectBoxU { + position: relative; + width: 192px; +} +.card-report-production .reports-box-body-left .body-left-header .selectBoxU select, +.card-report-production .reports-box-body-left .body-left-header-machinestatus .selectBoxU select { + width: 100%; + padding: 8px; + cursor: pointer; + height: 48px; + font-size: 18px; + line-height: 1.11; + color: #4b4b4b; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); + border-radius: 2px; +} +.card-report-production .reports-box-body-left .body-left-header .selectBoxU select option, +.card-report-production .reports-box-body-left .body-left-header-machinestatus .selectBoxU select option { + display: none; +} +.card-report-production .reports-box-body-left .body-left-header .overSelect, +.card-report-production .reports-box-body-left .body-left-header-machinestatus .overSelect { + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; +} +.card-report-production .reports-box-body-left .body-left-header .checkboxes, +.card-report-production .reports-box-body-left .body-left-header-machinestatus .checkboxes, +.card-report-production .reports-box-body-left .body-left-header .checkboxesU, +.card-report-production .reports-box-body-left .body-left-header-machinestatus .checkboxesU { + display: none; +} +.card-report-production .reports-box-body-left .body-left-header .checkboxesView, +.card-report-production .reports-box-body-left .body-left-header-machinestatus .checkboxesView, +.card-report-production .reports-box-body-left .body-left-header .checkboxesViewUser, +.card-report-production .reports-box-body-left .body-left-header-machinestatus .checkboxesViewUser { + width: calc(100% - 8px); + background-color: #fff; + display: block; + z-index: 100; + padding: 6px 4px; + box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.4); +} +.card-report-production .reports-box-body-left .body-left-header .checkboxesView label, +.card-report-production .reports-box-body-left .body-left-header-machinestatus .checkboxesView label, +.card-report-production .reports-box-body-left .body-left-header .checkboxesViewUser label, +.card-report-production .reports-box-body-left .body-left-header-machinestatus .checkboxesViewUser label { + font-size: 18px; + margin: 2px; + display: flex; + flex-flow: row; +} +.card-report-production .reports-box-body-left .body-left-header .checkboxesView .label-state, +.card-report-production .reports-box-body-left .body-left-header-machinestatus .checkboxesView .label-state, +.card-report-production .reports-box-body-left .body-left-header .checkboxesViewUser .label-state, +.card-report-production .reports-box-body-left .body-left-header-machinestatus .checkboxesViewUser .label-state { + margin-left: 12px; +} +.card-report-production .reports-box-body-left .body-left-header-machinestatus { + border-right: 0px; +} +.card-report-production .reports-box-body-left .body-left-center { + width: 1448px; + max-height: 681px; + display: flex; + flex-flow: column; +} +.card-report-production .reports-box-body-left .body-left-center .body-left-center-container { + width: 100%; +} +.card-report-production .reports-box-body-left .body-left-center .body-left-center-container table { + table-layout: fixed; + width: 100%; + border-collapse: collapse; +} +.card-report-production .reports-box-body-left .body-left-center .body-left-center-container thead { + border-bottom: solid 2px #979797; + font-size: 14px; + line-height: 1.29; + color: #002680; + display: block; + width: 1431px; +} +.card-report-production .reports-box-body-left .body-left-center .body-left-center-container thead tr th { + height: 48px; +} +.card-report-production .reports-box-body-left .body-left-center .body-left-center-container tr:nth-child(even) { + background: #FFF; +} +.card-report-production .reports-box-body-left .body-left-center .body-left-center-container tr:nth-child(odd) { + background: #dddddd; +} +.card-report-production .reports-box-body-left .body-left-center .body-left-center-container thead tr:nth-child(odd) { + background: #FFF; +} +.card-report-production .reports-box-body-left .body-left-center .body-left-center-container th, +.card-report-production .reports-box-body-left .body-left-center .body-left-center-container td { + width: auto; +} +.card-report-production .reports-box-body-left .body-left-center .body-left-center-container th:last-child { + display: flex; + align-items: center; + float: right; + font-size: 23px; + font-weight: bold; + cursor: pointer; +} +.card-report-production .reports-box-body-left .body-left-center .body-left-center-container th, +.card-report-production .reports-box-body-left .body-left-center .body-left-center-container td { + overflow: hidden; +} +.card-report-production .reports-box-body-left .body-left-center .body-left-center-container th div, +.card-report-production .reports-box-body-left .body-left-center .body-left-center-container td div { + overflow: hidden; + max-height: 64px; +} +.card-report-production .reports-box-body-left .body-left-center .body-left-center-container tbody { + display: block; + height: 598px; + width: 1431px; +} +.card-report-production .reports-box-body-left .body-left-center .body-left-center-container tbody tr { + height: 64px; + padding: 10px; + font-size: 14px; + line-height: 1.29; + color: #4b4b4b; +} +.card-report-production .reports-box-body-left .body-left-center .body-left-center-container tbody tr td { + text-align: center; +} +.card-report-production .reports-box-body-left .body-left-center .body-left-center-container tbody tr td.green { + color: #7ed321; +} +.card-report-production .reports-box-body-left .body-left-center .body-left-center-container tbody tr td.red { + color: #d0021b; +} +.card-report-production .reports-box-body-left .body-left-center .body-left-center-container tbody tr td:last-child { + width: 16px; + display: flex; +} +.card-report-production .reports-box-body-left .body-left-center .body-left-center-container tbody tr.selected { + background-color: rgba(23, 145, 255, 0.75); + color: #fff; + font-weight: 600; +} +.card-report-production .reports-box-body-left .body-left-center .body-left-center-container .pagination { + display: inline-block; +} +.card-report-production .reports-box-body-left .body-left-center .body-left-center-container .pagination button { + padding: 0; + border: none; + background: none; + color: rgba(0, 0, 0, 0.4); + float: left; + padding: 8px 16px; + text-decoration: none; + border: 1px solid #dddddd; + margin: 0 4px; +} +.card-report-production .reports-box-body-left .body-left-center .body-left-center-container .pagination button:first-child { + border-top-left-radius: 5px; + border-bottom-left-radius: 5px; +} +.card-report-production .reports-box-body-left .body-left-center .body-left-center-container .pagination button:last-child { + border-top-right-radius: 5px; + border-bottom-right-radius: 5px; +} +.card-report-production .reports-box-body-left .body-left-center .body-left-center-container .pagination button.active { + background-color: #878787; + color: #fff; +} +.card-report-production .reports-box-body-left .body-left-center .body-left-center-container .pagination button:hover:not(.active) { + background-color: #dddddd; +} +.card-report-production .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left { + width: 360px; + height: 616px; + display: flex; + flex-flow: column; + align-items: center; + border: solid 1px #dddddd; + overflow-y: auto; +} +.card-report-production .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .multiselect { + z-index: 100; + margin-bottom: 24px; + margin-top: 16px; +} +.card-report-production .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .multiselect label { + font-size: 14px; + line-height: 1.29; + color: #878787; +} +.card-report-production .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .selectBox { + position: relative; + width: 328px; + height: 64px; +} +.card-report-production .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .selectBox select { + width: 100%; + padding: 8px; + cursor: pointer; + height: 64px; + font-size: 18px; + line-height: 1.11; + color: #4b4b4b; + margin-bottom: 0; + margin-top: 0; +} +.card-report-production .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .selectBox select option { + display: none; +} +.card-report-production .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .overSelect { + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; +} +.card-report-production .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .checkboxes, +.card-report-production .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .checkboxesU { + display: none; +} +.card-report-production .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .checkboxesView, +.card-report-production .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .checkboxesViewUser { + width: calc(100% - 8px); + background-color: #fff; + display: block; + z-index: 100; + padding: 6px 4px; + box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.4); +} +.card-report-production .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .checkboxesView label, +.card-report-production .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .checkboxesViewUser label { + font-size: 18px; + margin: 2px; + display: flex; + flex-flow: row; +} +.card-report-production .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .checkboxesView .label-state, +.card-report-production .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .checkboxesViewUser .label-state { + margin-left: 12px; +} +.card-report-production .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div select { + width: 328px; + height: 48px; + border-radius: 2px; + box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4); + margin-bottom: 24px; + margin-top: 16px; + padding-left: 16px; + font-size: 18px; + line-height: 1.11; + color: #4b4b4b; +} +.card-report-production .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .accordion-dropdown header { + height: 64px; + width: 312px; + border-radius: 2px; + box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4); + display: flex; + justify-content: space-between; + align-items: center; + color: #002680; + line-height: 1; + font-size: 18px; + padding-left: 16px; + cursor: pointer; +} +.card-report-production .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .accordion-dropdown header span { + width: 100%; +} +.card-report-production .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .accordion-dropdown header .expander { + margin: 0 12px; + line-height: 28px; + height: 28px; + width: 28px; + font-size: 28px; +} +.card-report-production .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .accordion-dropdown section { + width: 328px; + min-height: 0; + max-height: 0; + transition: max-height 100ms ease-in-out, min-height 200ms ease-in-out; + overflow: hidden; +} +.card-report-production .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .accordion-dropdown section.expanded { + min-height: 64px; + background-color: rgba(255, 255, 255, 0.1); + max-height: 1000px; +} +.card-report-production .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .accordion-dropdown section .item { + height: 64px; + width: 100%; + line-height: 64px; + background-color: #f1f1f1; +} +.card-report-production .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .accordion-dropdown section .dropdown { + height: 100%; + margin-top: 2px; +} +.card-report-production .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .accordion-dropdown section .dropdown .filename { + display: flex; + height: 64px; + align-items: center; + cursor: pointer; +} +.card-report-production .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .accordion-dropdown section .dropdown .filename i { + color: #002e6e; + margin: 0 20px 0 20px; +} +.card-report-production .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .accordion-dropdown section .dropdown .filename span { + width: 100%; + font-size: 18px; + line-height: 1; + color: #002680; +} +.card-report-production .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .accordion-dropdown section .dropdown .filename.selected span, +.card-report-production .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .accordion-dropdown section .dropdown .filename.selected i { + color: #4b4b4b; +} +.card-report-production .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .accordion-dropdown section .dropdown .filename.selected { + background-color: rgba(255, 255, 255, 0.8); +} +.card-report-production .reports-box-body-left .body-left-center .body-left-center-footer { + height: 64px; + width: 100%; + border: solid 1px #dddddd; +} +.card-report-production .reports-box-body-left .body-left-center .body-left-center-footer .header-title { + width: 360px; + height: 64px; + display: flex; + flex-flow: column; + align-items: center; + justify-content: center; +} +.card-report-production .reports-box-body-left .body-left-center .body-left-center-footer .header-title .title { + font-size: 14px; + color: #878787; +} +.card-report-production .reports-box-body-left .body-left-center .body-left-center-footer .header-title .data-temporal { + font-size: 18px; + line-height: 1; + color: #4b4b4b; +} +.card-report-production .reports-box-body-right { + width: 327px; + height: 100%; +} +.card-report-production .reports-box-body-right .body-right-header { + width: 100%; + height: 70px; + display: flex; + flex-flow: row; + margin-top: 18px; + justify-content: flex-end; +} +.card-report-production .reports-box-body-right .body-right-header .body-right-header-left { + width: 158px; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + border-right: solid 2px #dddddd; +} +.card-report-production .reports-box-body-right .body-right-header .body-right-header-left button { + width: 48px; + height: 48px; + border-radius: 2px; + box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4); + background-image: linear-gradient(to bottom, #f1f1f1, #bbbcbc); + border: none; +} +.card-report-production .reports-box-body-right .body-right-header .body-right-header-left button.active { + width: 48px; + height: 48px; + border-radius: 2px; + box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.4); + background-image: linear-gradient(to bottom, #bbbcbc, #f1f1f1); + color: #1791ff; + border: none; +} +.card-report-production .reports-box-body-right .body-right-header .body-right-header-right { + width: calc(100% - 158px); + height: 100%; + display: flex; + align-items: center; + justify-content: center; +} +.card-report-production .reports-box-body-right .body-right-header .body-right-header-right button { + width: 48px; + height: 48px; + border-radius: 2px; + box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4); + background-image: linear-gradient(to bottom, #f1f1f1, #bbbcbc); + border: none; +} +.card-report-production .reports-box-body-right .body-right-header .body-right-header-right button:first-child { + margin-right: 16px; +} +.card-report-production .reports-box-body-right .body-right-header .body-right-header-right button:active { + width: 48px; + height: 48px; + border-radius: 2px; + box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.4); + background-image: linear-gradient(to bottom, #bbbcbc, #f1f1f1); + border: none; +} +.card-report-production .reports-box-body-right .body-right-card { + width: 100%; + height: calc(100% - 70px); + display: flex; + flex-flow: column; + align-items: center; +} +.card-report-production .reports-box-body-right .body-right-card .card-report > section { + display: flex; + align-items: center; + justify-content: center; +} +.card-report-production .reports-box-body-right .body-right-card .card-report > section .rectangle_gray { + width: 256px; + height: 120px; + border-radius: 2px; + display: flex; + flex-flow: column; + align-items: center; + justify-content: center; + background-color: #f1f1f1; +} +.card-report-production .reports-box-body-right .body-right-card .card-report > section .rectangle_gray label { + font-size: 18px; + color: #878787; + margin-bottom: 30px; +} +.card-report-production .reports-box-body-right .body-right-card .card-report > section .rectangle_gray span { + font-size: 48px; + font-weight: bold; + line-height: 0.38; + color: #1791ff; +} +.card-report-events { + width: 100%; + height: 100%; + display: flex; +} +.card-report-events .reports-box-body-left { + width: 1455px; + height: 100%; +} +.card-report-events .reports-box-body-left .body-left-header, +.card-report-events .reports-box-body-left .body-left-header-machinestatus { + width: 100%; + height: 70px; + display: flex; + flex-flow: row; + margin-top: 18px; + border-right: solid 2px #dddddd; + position: relative; + margin-bottom: 16px; +} +.card-report-events .reports-box-body-left .body-left-header .mx-datepicker-range, +.card-report-events .reports-box-body-left .body-left-header-machinestatus .mx-datepicker-range { + width: 170px; + height: 70px; +} +.card-report-events .reports-box-body-left .body-left-header .mx-datepicker-range .mx-input-wrapper, +.card-report-events .reports-box-body-left .body-left-header-machinestatus .mx-datepicker-range .mx-input-wrapper { + margin-right: 24px; + width: 253px; +} +.card-report-events .reports-box-body-left .body-left-header .mx-datepicker-range .mx-input-wrapper .mx-input, +.card-report-events .reports-box-body-left .body-left-header-machinestatus .mx-datepicker-range .mx-input-wrapper .mx-input { + width: 253px; + 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; + padding-left: 16px; +} +.card-report-events .reports-box-body-left .body-left-header > div, +.card-report-events .reports-box-body-left .body-left-header-machinestatus > div { + display: flex; + flex-flow: column; + height: 70px; + margin-right: 24px; +} +.card-report-events .reports-box-body-left .body-left-header > div label, +.card-report-events .reports-box-body-left .body-left-header-machinestatus > div label { + font-size: 14px; + line-height: 1.29; + color: #878787; +} +.card-report-events .reports-box-body-left .body-left-header > div label.intervaldate, +.card-report-events .reports-box-body-left .body-left-header-machinestatus > div label.intervaldate { + width: 253px; + font-size: 14px; + line-height: 1.29; + color: #878787; +} +.card-report-events .reports-box-body-left .body-left-header > div select, +.card-report-events .reports-box-body-left .body-left-header-machinestatus > div select { + width: 192px; + 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; + padding-left: 16px; +} +.card-report-events .reports-box-body-left .body-left-header > div div.interval-time, +.card-report-events .reports-box-body-left .body-left-header-machinestatus > div div.interval-time { + display: flex; + flex-flow: row; +} +.card-report-events .reports-box-body-left .body-left-header > div div.interval-time input[type="time"], +.card-report-events .reports-box-body-left .body-left-header-machinestatus > div div.interval-time input[type="time"] { + width: 96px; + height: 48px; + border-radius: 2px; + box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.5); + font-size: 18px; + line-height: 1.11; + color: #bbbcbc; + border: none; + padding-left: 16px; +} +.card-report-events .reports-box-body-left .body-left-header > div div.interval-time input[type="time"]:first-child, +.card-report-events .reports-box-body-left .body-left-header-machinestatus > div div.interval-time input[type="time"]:first-child { + margin-right: 16px; +} +.card-report-events .reports-box-body-left .body-left-header > div div.interval-time input[type="time"]::-webkit-inner-spin-button, +.card-report-events .reports-box-body-left .body-left-header-machinestatus > div div.interval-time input[type="time"]::-webkit-inner-spin-button { + -webkit-appearance: none; + display: none; + border: none; +} +.card-report-events .reports-box-body-left .body-left-header > div input.program, +.card-report-events .reports-box-body-left .body-left-header-machinestatus > div input.program { + width: 256px; + height: 46px; + border-radius: 2px; + box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.5); + font-size: 18px; + line-height: 1.11; + color: #bbbcbc; + padding-left: 16px; + border: none; +} +.card-report-events .reports-box-body-left .body-left-header > div .reports-select-operator, +.card-report-events .reports-box-body-left .body-left-header-machinestatus > div .reports-select-operator { + width: 192px; + height: 48px; + border-radius: 2px; + box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4); + font-size: 18px; + line-height: 1.11; + color: #4b4b4b; +} +.card-report-events .reports-box-body-left .body-left-header > div .reports-select-shift, +.card-report-events .reports-box-body-left .body-left-header-machinestatus > div .reports-select-shift { + width: 144px; + height: 48px; + border-radius: 2px; + box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4); +} +.card-report-events .reports-box-body-left .body-left-header .multiselect, +.card-report-events .reports-box-body-left .body-left-header-machinestatus .multiselect { + z-index: 100; +} +.card-report-events .reports-box-body-left .body-left-header .multiselect label, +.card-report-events .reports-box-body-left .body-left-header-machinestatus .multiselect label { + font-size: 14px; + line-height: 1.29; + color: #878787; +} +.card-report-events .reports-box-body-left .body-left-header .selectBoxU, +.card-report-events .reports-box-body-left .body-left-header-machinestatus .selectBoxU { + position: relative; + width: 192px; +} +.card-report-events .reports-box-body-left .body-left-header .selectBoxU select, +.card-report-events .reports-box-body-left .body-left-header-machinestatus .selectBoxU select { + width: 100%; + padding: 8px; + cursor: pointer; + height: 48px; + font-size: 18px; + line-height: 1.11; + color: #4b4b4b; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); + border-radius: 2px; +} +.card-report-events .reports-box-body-left .body-left-header .selectBoxU select option, +.card-report-events .reports-box-body-left .body-left-header-machinestatus .selectBoxU select option { + display: none; +} +.card-report-events .reports-box-body-left .body-left-header .overSelect, +.card-report-events .reports-box-body-left .body-left-header-machinestatus .overSelect { + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; +} +.card-report-events .reports-box-body-left .body-left-header .checkboxes, +.card-report-events .reports-box-body-left .body-left-header-machinestatus .checkboxes, +.card-report-events .reports-box-body-left .body-left-header .checkboxesU, +.card-report-events .reports-box-body-left .body-left-header-machinestatus .checkboxesU { + display: none; +} +.card-report-events .reports-box-body-left .body-left-header .checkboxesView, +.card-report-events .reports-box-body-left .body-left-header-machinestatus .checkboxesView, +.card-report-events .reports-box-body-left .body-left-header .checkboxesViewUser, +.card-report-events .reports-box-body-left .body-left-header-machinestatus .checkboxesViewUser { + width: calc(100% - 8px); + background-color: #fff; + display: block; + z-index: 100; + padding: 6px 4px; + box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.4); +} +.card-report-events .reports-box-body-left .body-left-header .checkboxesView label, +.card-report-events .reports-box-body-left .body-left-header-machinestatus .checkboxesView label, +.card-report-events .reports-box-body-left .body-left-header .checkboxesViewUser label, +.card-report-events .reports-box-body-left .body-left-header-machinestatus .checkboxesViewUser label { + font-size: 18px; + margin: 2px; + display: flex; + flex-flow: row; +} +.card-report-events .reports-box-body-left .body-left-header .checkboxesView .label-state, +.card-report-events .reports-box-body-left .body-left-header-machinestatus .checkboxesView .label-state, +.card-report-events .reports-box-body-left .body-left-header .checkboxesViewUser .label-state, +.card-report-events .reports-box-body-left .body-left-header-machinestatus .checkboxesViewUser .label-state { + margin-left: 12px; +} +.card-report-events .reports-box-body-left .body-left-header-machinestatus { + border-right: 0px; +} +.card-report-events .reports-box-body-left .body-left-center { + width: 1448px; + max-height: 681px; + display: flex; + flex-flow: column; +} +.card-report-events .reports-box-body-left .body-left-center .body-left-center-container { + width: 100%; +} +.card-report-events .reports-box-body-left .body-left-center .body-left-center-container table { + table-layout: fixed; + width: 100%; + border-collapse: collapse; +} +.card-report-events .reports-box-body-left .body-left-center .body-left-center-container thead { + border-bottom: solid 2px #979797; + font-size: 14px; + line-height: 1.29; + color: #002680; + display: block; + width: 1431px; +} +.card-report-events .reports-box-body-left .body-left-center .body-left-center-container thead tr th { + height: 48px; +} +.card-report-events .reports-box-body-left .body-left-center .body-left-center-container tr:nth-child(even) { + background: #FFF; +} +.card-report-events .reports-box-body-left .body-left-center .body-left-center-container tr:nth-child(odd) { + background: #dddddd; +} +.card-report-events .reports-box-body-left .body-left-center .body-left-center-container thead tr:nth-child(odd) { + background: #FFF; +} +.card-report-events .reports-box-body-left .body-left-center .body-left-center-container th, +.card-report-events .reports-box-body-left .body-left-center .body-left-center-container td { + width: auto; +} +.card-report-events .reports-box-body-left .body-left-center .body-left-center-container th:last-child { + display: flex; + align-items: center; + float: right; + font-size: 23px; + font-weight: bold; + cursor: pointer; +} +.card-report-events .reports-box-body-left .body-left-center .body-left-center-container th, +.card-report-events .reports-box-body-left .body-left-center .body-left-center-container td { + overflow: hidden; +} +.card-report-events .reports-box-body-left .body-left-center .body-left-center-container th div, +.card-report-events .reports-box-body-left .body-left-center .body-left-center-container td div { + overflow: hidden; + max-height: 64px; +} +.card-report-events .reports-box-body-left .body-left-center .body-left-center-container tbody { + display: block; + height: 598px; + width: 1431px; +} +.card-report-events .reports-box-body-left .body-left-center .body-left-center-container tbody tr { + height: 64px; + padding: 10px; + font-size: 14px; + line-height: 1.29; + color: #4b4b4b; +} +.card-report-events .reports-box-body-left .body-left-center .body-left-center-container tbody tr td { + text-align: center; +} +.card-report-events .reports-box-body-left .body-left-center .body-left-center-container tbody tr td.green { + color: #7ed321; +} +.card-report-events .reports-box-body-left .body-left-center .body-left-center-container tbody tr td.red { + color: #d0021b; +} +.card-report-events .reports-box-body-left .body-left-center .body-left-center-container tbody tr td:last-child { + width: 16px; + display: flex; +} +.card-report-events .reports-box-body-left .body-left-center .body-left-center-container tbody tr.selected { + background-color: rgba(23, 145, 255, 0.75); + color: #fff; + font-weight: 600; +} +.card-report-events .reports-box-body-left .body-left-center .body-left-center-container .pagination { + display: inline-block; +} +.card-report-events .reports-box-body-left .body-left-center .body-left-center-container .pagination button { + padding: 0; + border: none; + background: none; + color: rgba(0, 0, 0, 0.4); + float: left; + padding: 8px 16px; + text-decoration: none; + border: 1px solid #dddddd; + margin: 0 4px; +} +.card-report-events .reports-box-body-left .body-left-center .body-left-center-container .pagination button:first-child { + border-top-left-radius: 5px; + border-bottom-left-radius: 5px; +} +.card-report-events .reports-box-body-left .body-left-center .body-left-center-container .pagination button:last-child { + border-top-right-radius: 5px; + border-bottom-right-radius: 5px; +} +.card-report-events .reports-box-body-left .body-left-center .body-left-center-container .pagination button.active { + background-color: #878787; + color: #fff; +} +.card-report-events .reports-box-body-left .body-left-center .body-left-center-container .pagination button:hover:not(.active) { + background-color: #dddddd; +} +.card-report-events .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left { + width: 360px; + height: 616px; + display: flex; + flex-flow: column; + align-items: center; + border: solid 1px #dddddd; + overflow-y: auto; +} +.card-report-events .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .multiselect { + z-index: 100; + margin-bottom: 24px; + margin-top: 16px; +} +.card-report-events .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .multiselect label { + font-size: 14px; + line-height: 1.29; + color: #878787; +} +.card-report-events .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .selectBox { + position: relative; + width: 328px; + height: 64px; +} +.card-report-events .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .selectBox select { + width: 100%; + padding: 8px; + cursor: pointer; + height: 64px; + font-size: 18px; + line-height: 1.11; + color: #4b4b4b; + margin-bottom: 0; + margin-top: 0; +} +.card-report-events .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .selectBox select option { + display: none; +} +.card-report-events .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .overSelect { + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; +} +.card-report-events .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .checkboxes, +.card-report-events .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .checkboxesU { + display: none; +} +.card-report-events .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .checkboxesView, +.card-report-events .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .checkboxesViewUser { + width: calc(100% - 8px); + background-color: #fff; + display: block; + z-index: 100; + padding: 6px 4px; + box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.4); +} +.card-report-events .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .checkboxesView label, +.card-report-events .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .checkboxesViewUser label { + font-size: 18px; + margin: 2px; + display: flex; + flex-flow: row; +} +.card-report-events .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .checkboxesView .label-state, +.card-report-events .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .checkboxesViewUser .label-state { + margin-left: 12px; +} +.card-report-events .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div select { + width: 328px; + height: 48px; + border-radius: 2px; + box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4); + margin-bottom: 24px; + margin-top: 16px; + padding-left: 16px; + font-size: 18px; + line-height: 1.11; + color: #4b4b4b; +} +.card-report-events .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .accordion-dropdown header { + height: 64px; + width: 312px; + border-radius: 2px; + box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4); + display: flex; + justify-content: space-between; + align-items: center; + color: #002680; + line-height: 1; + font-size: 18px; + padding-left: 16px; + cursor: pointer; +} +.card-report-events .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .accordion-dropdown header span { + width: 100%; +} +.card-report-events .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .accordion-dropdown header .expander { + margin: 0 12px; + line-height: 28px; + height: 28px; + width: 28px; + font-size: 28px; +} +.card-report-events .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .accordion-dropdown section { + width: 328px; + min-height: 0; + max-height: 0; + transition: max-height 100ms ease-in-out, min-height 200ms ease-in-out; + overflow: hidden; +} +.card-report-events .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .accordion-dropdown section.expanded { + min-height: 64px; + background-color: rgba(255, 255, 255, 0.1); + max-height: 1000px; +} +.card-report-events .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .accordion-dropdown section .item { + height: 64px; + width: 100%; + line-height: 64px; + background-color: #f1f1f1; +} +.card-report-events .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .accordion-dropdown section .dropdown { + height: 100%; + margin-top: 2px; +} +.card-report-events .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .accordion-dropdown section .dropdown .filename { + display: flex; + height: 64px; + align-items: center; + cursor: pointer; +} +.card-report-events .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .accordion-dropdown section .dropdown .filename i { + color: #002e6e; + margin: 0 20px 0 20px; +} +.card-report-events .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .accordion-dropdown section .dropdown .filename span { + width: 100%; + font-size: 18px; + line-height: 1; + color: #002680; +} +.card-report-events .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .accordion-dropdown section .dropdown .filename.selected span, +.card-report-events .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .accordion-dropdown section .dropdown .filename.selected i { + color: #4b4b4b; +} +.card-report-events .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .accordion-dropdown section .dropdown .filename.selected { + background-color: rgba(255, 255, 255, 0.8); +} +.card-report-events .reports-box-body-left .body-left-center .body-left-center-footer { + height: 64px; + width: 100%; + border: solid 1px #dddddd; +} +.card-report-events .reports-box-body-left .body-left-center .body-left-center-footer .header-title { + width: 360px; + height: 64px; + display: flex; + flex-flow: column; + align-items: center; + justify-content: center; +} +.card-report-events .reports-box-body-left .body-left-center .body-left-center-footer .header-title .title { + font-size: 14px; + color: #878787; +} +.card-report-events .reports-box-body-left .body-left-center .body-left-center-footer .header-title .data-temporal { + font-size: 18px; + line-height: 1; + color: #4b4b4b; +} +.card-report-events .reports-box-body-right { + width: 327px; + height: 100%; +} +.card-report-events .reports-box-body-right .body-right-header { + width: 100%; + height: 70px; + display: flex; + flex-flow: row; + margin-top: 18px; + justify-content: flex-end; +} +.card-report-events .reports-box-body-right .body-right-header .body-right-header-left { + width: 158px; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + border-right: solid 2px #dddddd; +} +.card-report-events .reports-box-body-right .body-right-header .body-right-header-left button { + width: 48px; + height: 48px; + border-radius: 2px; + box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4); + background-image: linear-gradient(to bottom, #f1f1f1, #bbbcbc); + border: none; +} +.card-report-events .reports-box-body-right .body-right-header .body-right-header-left button.active { + width: 48px; + height: 48px; + border-radius: 2px; + box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.4); + background-image: linear-gradient(to bottom, #bbbcbc, #f1f1f1); + color: #1791ff; + border: none; +} +.card-report-events .reports-box-body-right .body-right-header .body-right-header-right { + width: calc(100% - 158px); + height: 100%; + display: flex; + align-items: center; + justify-content: center; +} +.card-report-events .reports-box-body-right .body-right-header .body-right-header-right button { + width: 48px; + height: 48px; + border-radius: 2px; + box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4); + background-image: linear-gradient(to bottom, #f1f1f1, #bbbcbc); + border: none; +} +.card-report-events .reports-box-body-right .body-right-header .body-right-header-right button:first-child { + margin-right: 16px; +} +.card-report-events .reports-box-body-right .body-right-header .body-right-header-right button:active { + width: 48px; + height: 48px; + border-radius: 2px; + box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.4); + background-image: linear-gradient(to bottom, #bbbcbc, #f1f1f1); + border: none; +} +.card-report-events .reports-box-body-right .body-right-card { + width: 100%; + height: calc(100% - 70px); + display: flex; + flex-flow: column; + align-items: center; +} +.card-report-events .reports-box-body-right .body-right-card .card-report > section { + display: flex; + align-items: center; + justify-content: center; +} +.card-report-events .reports-box-body-right .body-right-card .card-report > section .rectangle_gray { + width: 256px; + height: 120px; + border-radius: 2px; + display: flex; + flex-flow: column; + align-items: center; + justify-content: center; + background-color: #f1f1f1; +} +.card-report-events .reports-box-body-right .body-right-card .card-report > section .rectangle_gray label { + font-size: 18px; + color: #878787; + margin-bottom: 30px; +} +.card-report-events .reports-box-body-right .body-right-card .card-report > section .rectangle_gray span { + font-size: 48px; + font-weight: bold; + line-height: 0.38; + color: #1791ff; +} +.card-report-alarms { + width: 100%; + height: 100%; + display: flex; +} +.card-report-alarms .reports-box-body-left { + width: 1455px; + height: 100%; +} +.card-report-alarms .reports-box-body-left .body-left-header, +.card-report-alarms .reports-box-body-left .body-left-header-machinestatus { + width: 100%; + height: 70px; + display: flex; + flex-flow: row; + margin-top: 18px; + border-right: solid 2px #dddddd; + position: relative; + margin-bottom: 16px; +} +.card-report-alarms .reports-box-body-left .body-left-header .mx-datepicker-range, +.card-report-alarms .reports-box-body-left .body-left-header-machinestatus .mx-datepicker-range { + width: 170px; + height: 70px; +} +.card-report-alarms .reports-box-body-left .body-left-header .mx-datepicker-range .mx-input-wrapper, +.card-report-alarms .reports-box-body-left .body-left-header-machinestatus .mx-datepicker-range .mx-input-wrapper { + margin-right: 24px; + width: 253px; +} +.card-report-alarms .reports-box-body-left .body-left-header .mx-datepicker-range .mx-input-wrapper .mx-input, +.card-report-alarms .reports-box-body-left .body-left-header-machinestatus .mx-datepicker-range .mx-input-wrapper .mx-input { + width: 253px; + height: 50px; + 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; + padding-left: 16px; +} +.card-report-alarms .reports-box-body-left .body-left-header > div, +.card-report-alarms .reports-box-body-left .body-left-header-machinestatus > div { + display: flex; + flex-flow: column; + height: 70px; + margin-right: 24px; +} +.card-report-alarms .reports-box-body-left .body-left-header > div label.intervaldate, +.card-report-alarms .reports-box-body-left .body-left-header-machinestatus > div label.intervaldate { + width: 253px; +} +.card-report-alarms .reports-box-body-left .body-left-header > div select, +.card-report-alarms .reports-box-body-left .body-left-header-machinestatus > div select { + width: 192px; + 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; + padding-left: 16px; +} +.card-report-alarms .reports-box-body-left .body-left-header > div div.interval-time, +.card-report-alarms .reports-box-body-left .body-left-header-machinestatus > div div.interval-time { + display: flex; + flex-flow: row; +} +.card-report-alarms .reports-box-body-left .body-left-header > div div.interval-time input[type="time"], +.card-report-alarms .reports-box-body-left .body-left-header-machinestatus > div div.interval-time input[type="time"] { + width: 112px; + height: 48px; + border-radius: 2px; + box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.5); + font-size: 18px; + line-height: 1.11; + color: #bbbcbc; + border: none; +} +.card-report-alarms .reports-box-body-left .body-left-header > div div.interval-time input[type="time"]:first-child, +.card-report-alarms .reports-box-body-left .body-left-header-machinestatus > div div.interval-time input[type="time"]:first-child { + margin-right: 16px; +} +.card-report-alarms .reports-box-body-left .body-left-header > div div.interval-time input[type="time"]::-webkit-inner-spin-button, +.card-report-alarms .reports-box-body-left .body-left-header-machinestatus > div div.interval-time input[type="time"]::-webkit-inner-spin-button { + -webkit-appearance: none; + display: none; + border: none; +} +.card-report-alarms .reports-box-body-left .body-left-header > div input.program, +.card-report-alarms .reports-box-body-left .body-left-header-machinestatus > div input.program { + width: 256px; + height: 48px; + border-radius: 2px; + box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.5); + font-size: 18px; + line-height: 1.11; + color: #bbbcbc; + padding-left: 16px; + border: none; +} +.card-report-alarms .reports-box-body-left .body-left-header > div .reports-select-operator, +.card-report-alarms .reports-box-body-left .body-left-header-machinestatus > div .reports-select-operator { + width: 192px; + height: 48px; + border-radius: 2px; + box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4); + font-size: 18px; + line-height: 1.11; + color: #4b4b4b; +} +.card-report-alarms .reports-box-body-left .body-left-header > div .reports-select-shift, +.card-report-alarms .reports-box-body-left .body-left-header-machinestatus > div .reports-select-shift { + width: 144px; + height: 48px; + border-radius: 2px; + box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4); +} +.card-report-alarms .reports-box-body-left .body-left-header .multiselect, +.card-report-alarms .reports-box-body-left .body-left-header-machinestatus .multiselect { + z-index: 100; +} +.card-report-alarms .reports-box-body-left .body-left-header .multiselect label, +.card-report-alarms .reports-box-body-left .body-left-header-machinestatus .multiselect label { + font-size: 14px; + line-height: 1.29; + color: #878787; +} +.card-report-alarms .reports-box-body-left .body-left-header .selectBox, +.card-report-alarms .reports-box-body-left .body-left-header-machinestatus .selectBox { + position: relative; + width: 144px; +} +.card-report-alarms .reports-box-body-left .body-left-header .selectBox select, +.card-report-alarms .reports-box-body-left .body-left-header-machinestatus .selectBox select { + width: 100%; + padding: 8px; + cursor: pointer; + height: 49px; + font-size: 18px; + line-height: 1.11; + color: #4b4b4b; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); + border-radius: 2px; +} +.card-report-alarms .reports-box-body-left .body-left-header .selectBox select option, +.card-report-alarms .reports-box-body-left .body-left-header-machinestatus .selectBox select option { + display: none; +} +.card-report-alarms .reports-box-body-left .body-left-header .selectBoxU, +.card-report-alarms .reports-box-body-left .body-left-header-machinestatus .selectBoxU { + position: relative; + width: 192px; +} +.card-report-alarms .reports-box-body-left .body-left-header .selectBoxU select, +.card-report-alarms .reports-box-body-left .body-left-header-machinestatus .selectBoxU select { + width: 100%; + padding: 8px; + cursor: pointer; + height: 49px; + font-size: 18px; + line-height: 1.11; + color: #4b4b4b; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); + border-radius: 2px; +} +.card-report-alarms .reports-box-body-left .body-left-header .selectBoxU select option, +.card-report-alarms .reports-box-body-left .body-left-header-machinestatus .selectBoxU select option { + display: none; +} +.card-report-alarms .reports-box-body-left .body-left-header .overSelect, +.card-report-alarms .reports-box-body-left .body-left-header-machinestatus .overSelect { + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; +} +.card-report-alarms .reports-box-body-left .body-left-header .checkboxes, +.card-report-alarms .reports-box-body-left .body-left-header-machinestatus .checkboxes, +.card-report-alarms .reports-box-body-left .body-left-header .checkboxesU, +.card-report-alarms .reports-box-body-left .body-left-header-machinestatus .checkboxesU { + display: none; +} +.card-report-alarms .reports-box-body-left .body-left-header .checkboxesView, +.card-report-alarms .reports-box-body-left .body-left-header-machinestatus .checkboxesView, +.card-report-alarms .reports-box-body-left .body-left-header .checkboxesViewUser, +.card-report-alarms .reports-box-body-left .body-left-header-machinestatus .checkboxesViewUser { + width: calc(100% - 8px); + background-color: #fff; + display: block; + z-index: 100; + padding: 6px 4px; + box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.4); +} +.card-report-alarms .reports-box-body-left .body-left-header .checkboxesView label, +.card-report-alarms .reports-box-body-left .body-left-header-machinestatus .checkboxesView label, +.card-report-alarms .reports-box-body-left .body-left-header .checkboxesViewUser label, +.card-report-alarms .reports-box-body-left .body-left-header-machinestatus .checkboxesViewUser label { + font-size: 18px; + margin: 2px; + display: flex; + flex-flow: row; +} +.card-report-alarms .reports-box-body-left .body-left-header .checkboxesView .label-state, +.card-report-alarms .reports-box-body-left .body-left-header-machinestatus .checkboxesView .label-state, +.card-report-alarms .reports-box-body-left .body-left-header .checkboxesViewUser .label-state, +.card-report-alarms .reports-box-body-left .body-left-header-machinestatus .checkboxesViewUser .label-state { + margin-left: 12px; +} +.card-report-alarms .reports-box-body-left .body-left-header-machinestatus { + border-right: 0px; +} +.card-report-alarms .reports-box-body-left .body-left-center { + width: 1448px; + max-height: 681px; + display: flex; + flex-flow: column; +} +.card-report-alarms .reports-box-body-left .body-left-center .body-left-center-container { + width: 100%; +} +.card-report-alarms .reports-box-body-left .body-left-center .body-left-center-container table { + table-layout: fixed; + width: 100%; + border-collapse: collapse; +} +.card-report-alarms .reports-box-body-left .body-left-center .body-left-center-container thead { + border-bottom: solid 2px #979797; + font-size: 14px; + line-height: 1.29; + color: #002680; + display: block; + width: 1431px; +} +.card-report-alarms .reports-box-body-left .body-left-center .body-left-center-container thead tr th { + height: 48px; +} +.card-report-alarms .reports-box-body-left .body-left-center .body-left-center-container tr:nth-child(even) { + background: #FFF; +} +.card-report-alarms .reports-box-body-left .body-left-center .body-left-center-container tr:nth-child(odd) { + background: #dddddd; +} +.card-report-alarms .reports-box-body-left .body-left-center .body-left-center-container thead tr:nth-child(odd) { + background: #FFF; +} +.card-report-alarms .reports-box-body-left .body-left-center .body-left-center-container th:nth-child(1), +.card-report-alarms .reports-box-body-left .body-left-center .body-left-center-container td:nth-child(1) { + width: 162px; + max-width: 162px; + text-align: center; +} +.card-report-alarms .reports-box-body-left .body-left-center .body-left-center-container th:nth-child(2), +.card-report-alarms .reports-box-body-left .body-left-center .body-left-center-container td:nth-child(2) { + width: 139px; + max-width: 139px; + text-align: center; +} +.card-report-alarms .reports-box-body-left .body-left-center .body-left-center-container th:nth-child(3), +.card-report-alarms .reports-box-body-left .body-left-center .body-left-center-container td:nth-child(3) { + width: 83px; + max-width: 83px; + text-align: center; +} +.card-report-alarms .reports-box-body-left .body-left-center .body-left-center-container th:nth-child(4), +.card-report-alarms .reports-box-body-left .body-left-center .body-left-center-container td:nth-child(4) { + width: 83px; + max-width: 83px; + text-align: center; +} +.card-report-alarms .reports-box-body-left .body-left-center .body-left-center-container th:nth-child(5), +.card-report-alarms .reports-box-body-left .body-left-center .body-left-center-container td:nth-child(5) { + width: 83px; + max-width: 83px; + text-align: center; +} +.card-report-alarms .reports-box-body-left .body-left-center .body-left-center-container th:nth-child(6), +.card-report-alarms .reports-box-body-left .body-left-center .body-left-center-container td:nth-child(6) { + width: 83px; + max-width: 83px; + text-align: center; +} +.card-report-alarms .reports-box-body-left .body-left-center .body-left-center-container th:nth-child(7), +.card-report-alarms .reports-box-body-left .body-left-center .body-left-center-container td:nth-child(7) { + width: 97px; + max-width: 97px; + text-align: center; +} +.card-report-alarms .reports-box-body-left .body-left-center .body-left-center-container th:nth-child(8), +.card-report-alarms .reports-box-body-left .body-left-center .body-left-center-container td:nth-child(8) { + width: 97px; + max-width: 97px; + text-align: center; +} +.card-report-alarms .reports-box-body-left .body-left-center .body-left-center-container th:nth-child(9), +.card-report-alarms .reports-box-body-left .body-left-center .body-left-center-container td:nth-child(9) { + width: 97px; + max-width: 97px; + text-align: center; +} +.card-report-alarms .reports-box-body-left .body-left-center .body-left-center-container th:nth-child(10), +.card-report-alarms .reports-box-body-left .body-left-center .body-left-center-container td:nth-child(10) { + width: 115px; + max-width: 115px; + text-align: center; +} +.card-report-alarms .reports-box-body-left .body-left-center .body-left-center-container th:nth-child(11), +.card-report-alarms .reports-box-body-left .body-left-center .body-left-center-container td:nth-child(11) { + width: 97px; + max-width: 97px; + text-align: center; +} +.card-report-alarms .reports-box-body-left .body-left-center .body-left-center-container th:nth-child(12), +.card-report-alarms .reports-box-body-left .body-left-center .body-left-center-container td:nth-child(12) { + width: 148px; + max-width: 148px; + text-align: center; +} +.card-report-alarms .reports-box-body-left .body-left-center .body-left-center-container th:nth-child(13), +.card-report-alarms .reports-box-body-left .body-left-center .body-left-center-container td:nth-child(13) { + width: 97px; + max-width: 97px; + text-align: center; +} +.card-report-alarms .reports-box-body-left .body-left-center .body-left-center-container th:last-child { + font-size: 23px; + font-weight: bold; + cursor: pointer; +} +.card-report-alarms .reports-box-body-left .body-left-center .body-left-center-container th, +.card-report-alarms .reports-box-body-left .body-left-center .body-left-center-container td { + overflow: hidden; +} +.card-report-alarms .reports-box-body-left .body-left-center .body-left-center-container th div, +.card-report-alarms .reports-box-body-left .body-left-center .body-left-center-container td div { + overflow: hidden; + max-height: 64px; +} +.card-report-alarms .reports-box-body-left .body-left-center .body-left-center-container tbody { + display: block; + height: 631px; + width: 1448px; + overflow: scroll; +} +.card-report-alarms .reports-box-body-left .body-left-center .body-left-center-container tbody tr { + cursor: pointer; + height: 64px; + padding: 10px; + font-size: 14px; + line-height: 1.29; + color: #4b4b4b; +} +.card-report-alarms .reports-box-body-left .body-left-center .body-left-center-container tbody tr td { + text-align: center; +} +.card-report-alarms .reports-box-body-left .body-left-center .body-left-center-container tbody tr td.green { + color: #7ed321; +} +.card-report-alarms .reports-box-body-left .body-left-center .body-left-center-container tbody tr td.red { + color: #d0021b; +} +.card-report-alarms .reports-box-body-left .body-left-center .body-left-center-container tbody tr td:last-child { + width: 10px; +} +.card-report-alarms .reports-box-body-left .body-left-center .body-left-center-container tbody tr.selected { + background-color: rgba(23, 145, 255, 0.75); + color: #fff; + font-weight: 600; +} +.card-report-alarms .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left { + width: 360px; + height: 616px; + display: flex; + flex-flow: column; + align-items: center; + border: solid 1px #dddddd; + overflow-y: auto; +} +.card-report-alarms .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .multiselect { + z-index: 100; + margin-bottom: 24px; + margin-top: 16px; +} +.card-report-alarms .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .multiselect label { + font-size: 14px; + line-height: 1.29; + color: #878787; +} +.card-report-alarms .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .selectBox { + position: relative; + width: 328px; + height: 64px; +} +.card-report-alarms .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .selectBox select { + width: 100%; + padding: 8px; + cursor: pointer; + height: 64px; + font-size: 18px; + line-height: 1.11; + color: #4b4b4b; + margin-bottom: 0; + margin-top: 0; +} +.card-report-alarms .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .selectBox select option { + display: none; +} +.card-report-alarms .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .overSelect { + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; +} +.card-report-alarms .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .checkboxes, +.card-report-alarms .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .checkboxesU { + display: none; +} +.card-report-alarms .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .checkboxesView, +.card-report-alarms .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .checkboxesViewUser { + width: calc(100% - 8px); + background-color: #fff; + display: block; + z-index: 100; + padding: 6px 4px; + box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.4); +} +.card-report-alarms .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .checkboxesView label, +.card-report-alarms .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .checkboxesViewUser label { + font-size: 18px; + margin: 2px; + display: flex; + flex-flow: row; +} +.card-report-alarms .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .checkboxesView .label-state, +.card-report-alarms .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .checkboxesViewUser .label-state { + margin-left: 12px; +} +.card-report-alarms .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div select { + width: 328px; + height: 48px; + border-radius: 2px; + box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4); + margin-bottom: 24px; + margin-top: 16px; + padding-left: 16px; + font-size: 18px; + line-height: 1.11; + color: #4b4b4b; +} +.card-report-alarms .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .accordion-dropdown header { + height: 64px; + width: 312px; + border-radius: 2px; + box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4); + display: flex; + justify-content: space-between; + align-items: center; + color: #002680; + line-height: 1; + font-size: 18px; + padding-left: 16px; + cursor: pointer; +} +.card-report-alarms .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .accordion-dropdown header span { + width: 100%; +} +.card-report-alarms .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .accordion-dropdown header .expander { + margin: 0 12px; + line-height: 28px; + height: 28px; + width: 28px; + font-size: 28px; +} +.card-report-alarms .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .accordion-dropdown section { + width: 328px; + min-height: 0; + max-height: 0; + transition: max-height 100ms ease-in-out, min-height 200ms ease-in-out; + overflow: hidden; +} +.card-report-alarms .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .accordion-dropdown section.expanded { + min-height: 64px; + background-color: rgba(255, 255, 255, 0.1); + max-height: 1000px; +} +.card-report-alarms .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .accordion-dropdown section .item { + height: 64px; + width: 100%; + line-height: 64px; + background-color: #f1f1f1; +} +.card-report-alarms .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .accordion-dropdown section .dropdown { + height: 100%; + margin-top: 2px; +} +.card-report-alarms .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .accordion-dropdown section .dropdown .filename { + display: flex; + height: 64px; + align-items: center; + cursor: pointer; +} +.card-report-alarms .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .accordion-dropdown section .dropdown .filename i { + color: #002e6e; + margin: 0 20px 0 20px; +} +.card-report-alarms .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .accordion-dropdown section .dropdown .filename span { + width: 100%; + font-size: 18px; + line-height: 1; + color: #002680; +} +.card-report-alarms .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .accordion-dropdown section .dropdown .filename.selected span, +.card-report-alarms .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .accordion-dropdown section .dropdown .filename.selected i { + color: #4b4b4b; +} +.card-report-alarms .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .accordion-dropdown section .dropdown .filename.selected { + background-color: rgba(255, 255, 255, 0.8); +} +.card-report-alarms .reports-box-body-left .body-left-center .body-left-center-footer { + height: 64px; + width: 100%; + border: solid 1px #dddddd; +} +.card-report-alarms .reports-box-body-left .body-left-center .body-left-center-footer .header-title { + width: 360px; + height: 64px; + display: flex; + flex-flow: column; + align-items: center; + justify-content: center; +} +.card-report-alarms .reports-box-body-left .body-left-center .body-left-center-footer .header-title .title { + font-size: 14px; + color: #878787; +} +.card-report-alarms .reports-box-body-left .body-left-center .body-left-center-footer .header-title .data-temporal { + font-size: 18px; + line-height: 1; + color: #4b4b4b; +} +.card-report-alarms .reports-box-body-right { + width: 327px; + height: 100%; +} +.card-report-alarms .reports-box-body-right .body-right-header { + width: 100%; + height: 70px; + display: flex; + flex-flow: row; + margin-top: 18px; + justify-content: flex-end; +} +.card-report-alarms .reports-box-body-right .body-right-header .body-right-header-left { + width: 158px; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + border-right: solid 2px #dddddd; +} +.card-report-alarms .reports-box-body-right .body-right-header .body-right-header-left button { + width: 48px; + height: 48px; + border-radius: 2px; + box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4); + background-image: linear-gradient(to bottom, #f1f1f1, #bbbcbc); + border: none; +} +.card-report-alarms .reports-box-body-right .body-right-header .body-right-header-left button.active { + width: 48px; + height: 48px; + border-radius: 2px; + box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.4); + background-image: linear-gradient(to bottom, #bbbcbc, #f1f1f1); + color: #1791ff; + border: none; +} +.card-report-alarms .reports-box-body-right .body-right-header .body-right-header-right { + width: calc(100% - 158px); + height: 100%; + display: flex; + align-items: center; + justify-content: center; +} +.card-report-alarms .reports-box-body-right .body-right-header .body-right-header-right button { + width: 48px; + height: 48px; + border-radius: 2px; + box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4); + background-image: linear-gradient(to bottom, #f1f1f1, #bbbcbc); + border: none; +} +.card-report-alarms .reports-box-body-right .body-right-header .body-right-header-right button:first-child { + margin-right: 16px; +} +.card-report-alarms .reports-box-body-right .body-right-header .body-right-header-right button:active { + width: 48px; + height: 48px; + border-radius: 2px; + box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.4); + background-image: linear-gradient(to bottom, #bbbcbc, #f1f1f1); + border: none; +} +.card-report-alarms .reports-box-body-right .body-right-card { + width: 100%; + height: calc(100% - 70px); + display: flex; + flex-flow: column; + align-items: center; +} +.card-report-alarms .reports-box-body-right .body-right-card .card-report > section { + display: flex; + align-items: center; + justify-content: center; +} +.card-report-alarms .reports-box-body-right .body-right-card .card-report > section .rectangle_gray { + width: 256px; + height: 120px; + border-radius: 2px; + display: flex; + flex-flow: column; + align-items: center; + justify-content: center; + background-color: #f1f1f1; +} +.card-report-alarms .reports-box-body-right .body-right-card .card-report > section .rectangle_gray label { + font-size: 18px; + color: #878787; + margin-bottom: 30px; +} +.card-report-alarms .reports-box-body-right .body-right-card .card-report > section .rectangle_gray span { + font-size: 48px; + font-weight: bold; + line-height: 0.38; + color: #1791ff; +} +.card-report-machine-status { + width: 100%; + height: 100%; + display: flex; +} +.card-report-machine-status .reports-box-body-left { + width: 1455px; + height: 100%; +} +.card-report-machine-status .reports-box-body-left .body-left-header, +.card-report-machine-status .reports-box-body-left .body-left-header-machinestatus { + width: 100%; + height: 70px; + display: flex; + flex-flow: row; + margin-top: 18px; + border-right: solid 2px #dddddd; + position: relative; + margin-bottom: 16px; +} +.card-report-machine-status .reports-box-body-left .body-left-header .mx-datepicker-range, +.card-report-machine-status .reports-box-body-left .body-left-header-machinestatus .mx-datepicker-range { + width: 170px; + height: 70px; +} +.card-report-machine-status .reports-box-body-left .body-left-header .mx-datepicker-range .mx-input-wrapper, +.card-report-machine-status .reports-box-body-left .body-left-header-machinestatus .mx-datepicker-range .mx-input-wrapper { + margin-right: 24px; + width: 253px; +} +.card-report-machine-status .reports-box-body-left .body-left-header .mx-datepicker-range .mx-input-wrapper .mx-input, +.card-report-machine-status .reports-box-body-left .body-left-header-machinestatus .mx-datepicker-range .mx-input-wrapper .mx-input { + width: 253px; + 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; + padding-left: 16px; +} +.card-report-machine-status .reports-box-body-left .body-left-header > div, +.card-report-machine-status .reports-box-body-left .body-left-header-machinestatus > div { + display: flex; + flex-flow: column; + height: 70px; + margin-right: 24px; +} +.card-report-machine-status .reports-box-body-left .body-left-header > div label, +.card-report-machine-status .reports-box-body-left .body-left-header-machinestatus > div label { + font-size: 14px; + line-height: 1.29; + color: #878787; +} +.card-report-machine-status .reports-box-body-left .body-left-header > div label.intervaldate, +.card-report-machine-status .reports-box-body-left .body-left-header-machinestatus > div label.intervaldate { + width: 253px; + font-size: 14px; + line-height: 1.29; + color: #878787; +} +.card-report-machine-status .reports-box-body-left .body-left-header > div select, +.card-report-machine-status .reports-box-body-left .body-left-header-machinestatus > div select { + width: 192px; + 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; + padding-left: 16px; +} +.card-report-machine-status .reports-box-body-left .body-left-header > div div.interval-time, +.card-report-machine-status .reports-box-body-left .body-left-header-machinestatus > div div.interval-time { + display: flex; + flex-flow: row; +} +.card-report-machine-status .reports-box-body-left .body-left-header > div div.interval-time input[type="time"], +.card-report-machine-status .reports-box-body-left .body-left-header-machinestatus > div div.interval-time input[type="time"] { + width: 96px; + height: 48px; + border-radius: 2px; + box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.5); + font-size: 18px; + line-height: 1.11; + color: #bbbcbc; + border: none; + padding-left: 16px; +} +.card-report-machine-status .reports-box-body-left .body-left-header > div div.interval-time input[type="time"]:first-child, +.card-report-machine-status .reports-box-body-left .body-left-header-machinestatus > div div.interval-time input[type="time"]:first-child { + margin-right: 16px; +} +.card-report-machine-status .reports-box-body-left .body-left-header > div div.interval-time input[type="time"]::-webkit-inner-spin-button, +.card-report-machine-status .reports-box-body-left .body-left-header-machinestatus > div div.interval-time input[type="time"]::-webkit-inner-spin-button { + -webkit-appearance: none; + display: none; + border: none; +} +.card-report-machine-status .reports-box-body-left .body-left-header > div input.program, +.card-report-machine-status .reports-box-body-left .body-left-header-machinestatus > div input.program { + width: 256px; + height: 46px; + border-radius: 2px; + box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.5); + font-size: 18px; + line-height: 1.11; + color: #bbbcbc; + padding-left: 16px; + border: none; +} +.card-report-machine-status .reports-box-body-left .body-left-header > div .reports-select-operator, +.card-report-machine-status .reports-box-body-left .body-left-header-machinestatus > div .reports-select-operator { + width: 192px; + height: 48px; + border-radius: 2px; + box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4); + font-size: 18px; + line-height: 1.11; + color: #4b4b4b; +} +.card-report-machine-status .reports-box-body-left .body-left-header > div .reports-select-shift, +.card-report-machine-status .reports-box-body-left .body-left-header-machinestatus > div .reports-select-shift { + width: 144px; + height: 48px; + border-radius: 2px; + box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4); +} +.card-report-machine-status .reports-box-body-left .body-left-header .multiselect, +.card-report-machine-status .reports-box-body-left .body-left-header-machinestatus .multiselect { + z-index: 100; +} +.card-report-machine-status .reports-box-body-left .body-left-header .multiselect label, +.card-report-machine-status .reports-box-body-left .body-left-header-machinestatus .multiselect label { + font-size: 14px; + line-height: 1.29; + color: #878787; +} +.card-report-machine-status .reports-box-body-left .body-left-header .selectBoxU, +.card-report-machine-status .reports-box-body-left .body-left-header-machinestatus .selectBoxU { + position: relative; + width: 192px; +} +.card-report-machine-status .reports-box-body-left .body-left-header .selectBoxU select, +.card-report-machine-status .reports-box-body-left .body-left-header-machinestatus .selectBoxU select { + width: 100%; + padding: 8px; + cursor: pointer; + height: 48px; + font-size: 18px; + line-height: 1.11; + color: #4b4b4b; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); + border-radius: 2px; +} +.card-report-machine-status .reports-box-body-left .body-left-header .selectBoxU select option, +.card-report-machine-status .reports-box-body-left .body-left-header-machinestatus .selectBoxU select option { + display: none; +} +.card-report-machine-status .reports-box-body-left .body-left-header .overSelect, +.card-report-machine-status .reports-box-body-left .body-left-header-machinestatus .overSelect { + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; +} +.card-report-machine-status .reports-box-body-left .body-left-header .checkboxes, +.card-report-machine-status .reports-box-body-left .body-left-header-machinestatus .checkboxes, +.card-report-machine-status .reports-box-body-left .body-left-header .checkboxesU, +.card-report-machine-status .reports-box-body-left .body-left-header-machinestatus .checkboxesU { + display: none; +} +.card-report-machine-status .reports-box-body-left .body-left-header .checkboxesView, +.card-report-machine-status .reports-box-body-left .body-left-header-machinestatus .checkboxesView, +.card-report-machine-status .reports-box-body-left .body-left-header .checkboxesViewUser, +.card-report-machine-status .reports-box-body-left .body-left-header-machinestatus .checkboxesViewUser { + width: calc(100% - 8px); + background-color: #fff; + display: block; + z-index: 100; + padding: 6px 4px; + box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.4); +} +.card-report-machine-status .reports-box-body-left .body-left-header .checkboxesView label, +.card-report-machine-status .reports-box-body-left .body-left-header-machinestatus .checkboxesView label, +.card-report-machine-status .reports-box-body-left .body-left-header .checkboxesViewUser label, +.card-report-machine-status .reports-box-body-left .body-left-header-machinestatus .checkboxesViewUser label { + font-size: 18px; + margin: 2px; + display: flex; + flex-flow: row; +} +.card-report-machine-status .reports-box-body-left .body-left-header .checkboxesView .label-state, +.card-report-machine-status .reports-box-body-left .body-left-header-machinestatus .checkboxesView .label-state, +.card-report-machine-status .reports-box-body-left .body-left-header .checkboxesViewUser .label-state, +.card-report-machine-status .reports-box-body-left .body-left-header-machinestatus .checkboxesViewUser .label-state { + margin-left: 12px; +} +.card-report-machine-status .reports-box-body-left .body-left-header-machinestatus { + border-right: 0px; +} +.card-report-machine-status .reports-box-body-left .body-left-center { + width: 1448px; + max-height: 681px; + display: flex; + flex-flow: column; +} +.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container { + width: 100%; +} +.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container table { + table-layout: fixed; + width: 100%; + border-collapse: collapse; +} +.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container thead { + border-bottom: solid 2px #979797; + font-size: 14px; + line-height: 1.29; + color: #002680; + display: block; + width: 1431px; +} +.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container thead tr th { + height: 48px; +} +.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container tr:nth-child(even) { + background: #FFF; +} +.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container tr:nth-child(odd) { + background: #dddddd; +} +.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container thead tr:nth-child(odd) { + background: #FFF; +} +.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container th, +.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container td { + width: auto; +} +.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container th:last-child { + display: flex; + align-items: center; + float: right; + font-size: 23px; + font-weight: bold; + cursor: pointer; +} +.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container th, +.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container td { + overflow: hidden; +} +.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container th div, +.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container td div { + overflow: hidden; + max-height: 64px; +} +.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container tbody { + display: block; + height: 598px; + width: 1431px; +} +.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container tbody tr { + height: 64px; + padding: 10px; + font-size: 14px; + line-height: 1.29; + color: #4b4b4b; +} +.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container tbody tr td { + text-align: center; +} +.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container tbody tr td.green { + color: #7ed321; +} +.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container tbody tr td.red { + color: #d0021b; +} +.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container tbody tr td:last-child { + width: 16px; + display: flex; +} +.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container tbody tr.selected { + background-color: rgba(23, 145, 255, 0.75); + color: #fff; + font-weight: 600; +} +.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container .pagination { + display: inline-block; +} +.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container .pagination button { + padding: 0; + border: none; + background: none; + color: rgba(0, 0, 0, 0.4); + float: left; + padding: 8px 16px; + text-decoration: none; + border: 1px solid #dddddd; + margin: 0 4px; +} +.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container .pagination button:first-child { + border-top-left-radius: 5px; + border-bottom-left-radius: 5px; +} +.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container .pagination button:last-child { + border-top-right-radius: 5px; + border-bottom-right-radius: 5px; +} +.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container .pagination button.active { + background-color: #878787; + color: #fff; +} +.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container .pagination button:hover:not(.active) { + background-color: #dddddd; +} +.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left { + width: 360px; + height: 616px; + display: flex; + flex-flow: column; + align-items: center; + border: solid 1px #dddddd; + overflow-y: auto; +} +.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .multiselect { + z-index: 100; + margin-bottom: 24px; + margin-top: 16px; +} +.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .multiselect label { + font-size: 14px; + line-height: 1.29; + color: #878787; +} +.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .selectBox { + position: relative; + width: 328px; + height: 64px; +} +.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .selectBox select { + width: 100%; + padding: 8px; + cursor: pointer; + height: 64px; + font-size: 18px; + line-height: 1.11; + color: #4b4b4b; + margin-bottom: 0; + margin-top: 0; +} +.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .selectBox select option { + display: none; +} +.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .overSelect { + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; +} +.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .checkboxes, +.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .checkboxesU { + display: none; +} +.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .checkboxesView, +.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .checkboxesViewUser { + width: calc(100% - 8px); + background-color: #fff; + display: block; + z-index: 100; + padding: 6px 4px; + box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.4); +} +.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .checkboxesView label, +.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .checkboxesViewUser label { + font-size: 18px; + margin: 2px; + display: flex; + flex-flow: row; +} +.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .checkboxesView .label-state, +.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .checkboxesViewUser .label-state { + margin-left: 12px; +} +.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div select { + width: 328px; + height: 48px; + border-radius: 2px; + box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4); + margin-bottom: 24px; + margin-top: 16px; + padding-left: 16px; + font-size: 18px; + line-height: 1.11; + color: #4b4b4b; +} +.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .accordion-dropdown header { + height: 64px; + width: 312px; + border-radius: 2px; + box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4); + display: flex; + justify-content: space-between; + align-items: center; + color: #002680; + line-height: 1; + font-size: 18px; + padding-left: 16px; + cursor: pointer; +} +.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .accordion-dropdown header span { + width: 100%; +} +.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .accordion-dropdown header .expander { + margin: 0 12px; + line-height: 28px; + height: 28px; + width: 28px; + font-size: 28px; +} +.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .accordion-dropdown section { + width: 328px; + min-height: 0; + max-height: 0; + transition: max-height 100ms ease-in-out, min-height 200ms ease-in-out; + overflow: hidden; +} +.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .accordion-dropdown section.expanded { + min-height: 64px; + background-color: rgba(255, 255, 255, 0.1); + max-height: 1000px; +} +.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .accordion-dropdown section .item { + height: 64px; + width: 100%; + line-height: 64px; + background-color: #f1f1f1; +} +.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .accordion-dropdown section .dropdown { + height: 100%; + margin-top: 2px; +} +.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .accordion-dropdown section .dropdown .filename { + display: flex; + height: 64px; + align-items: center; + cursor: pointer; +} +.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .accordion-dropdown section .dropdown .filename i { + color: #002e6e; + margin: 0 20px 0 20px; +} +.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .accordion-dropdown section .dropdown .filename span { + width: 100%; + font-size: 18px; + line-height: 1; + color: #002680; +} +.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .accordion-dropdown section .dropdown .filename.selected span, +.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .accordion-dropdown section .dropdown .filename.selected i { + color: #4b4b4b; +} +.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .accordion-dropdown section .dropdown .filename.selected { + background-color: rgba(255, 255, 255, 0.8); +} +.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-footer { + height: 64px; + width: 100%; + border: solid 1px #dddddd; +} +.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-footer .header-title { + width: 360px; + height: 64px; + display: flex; + flex-flow: column; + align-items: center; + justify-content: center; +} +.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-footer .header-title .title { + font-size: 14px; + color: #878787; +} +.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-footer .header-title .data-temporal { + font-size: 18px; + line-height: 1; + color: #4b4b4b; +} +.card-report-machine-status .reports-box-body-right { + width: 327px; + height: 100%; +} +.card-report-machine-status .reports-box-body-right .body-right-header { + width: 100%; + height: 70px; + display: flex; + flex-flow: row; + margin-top: 18px; + justify-content: flex-end; +} +.card-report-machine-status .reports-box-body-right .body-right-header .body-right-header-left { + width: 158px; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + border-right: solid 2px #dddddd; +} +.card-report-machine-status .reports-box-body-right .body-right-header .body-right-header-left button { + width: 48px; + height: 48px; + border-radius: 2px; + box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4); + background-image: linear-gradient(to bottom, #f1f1f1, #bbbcbc); + border: none; +} +.card-report-machine-status .reports-box-body-right .body-right-header .body-right-header-left button.active { + width: 48px; + height: 48px; + border-radius: 2px; + box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.4); + background-image: linear-gradient(to bottom, #bbbcbc, #f1f1f1); + color: #1791ff; + border: none; +} +.card-report-machine-status .reports-box-body-right .body-right-header .body-right-header-right { + width: calc(100% - 158px); + height: 100%; + display: flex; + align-items: center; + justify-content: center; +} +.card-report-machine-status .reports-box-body-right .body-right-header .body-right-header-right button { + width: 48px; + height: 48px; + border-radius: 2px; + box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4); + background-image: linear-gradient(to bottom, #f1f1f1, #bbbcbc); + border: none; +} +.card-report-machine-status .reports-box-body-right .body-right-header .body-right-header-right button:first-child { + margin-right: 16px; +} +.card-report-machine-status .reports-box-body-right .body-right-header .body-right-header-right button:active { + width: 48px; + height: 48px; + border-radius: 2px; + box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.4); + background-image: linear-gradient(to bottom, #bbbcbc, #f1f1f1); + border: none; +} +.card-report-machine-status .reports-box-body-right .body-right-card { + width: 100%; + height: calc(100% - 70px); + display: flex; + flex-flow: column; + align-items: center; +} +.card-report-machine-status .reports-box-body-right .body-right-card .card-report > section { + display: flex; + align-items: center; + justify-content: center; +} +.card-report-machine-status .reports-box-body-right .body-right-card .card-report > section .rectangle_gray { + width: 256px; + height: 120px; + border-radius: 2px; + display: flex; + flex-flow: column; + align-items: center; + justify-content: center; + background-color: #f1f1f1; +} +.card-report-machine-status .reports-box-body-right .body-right-card .card-report > section .rectangle_gray label { + font-size: 18px; + color: #878787; + margin-bottom: 30px; +} +.card-report-machine-status .reports-box-body-right .body-right-card .card-report > section .rectangle_gray span { + font-size: 48px; + font-weight: bold; + line-height: 0.38; + color: #1791ff; +} +.card-report-timeline { + width: 100%; + height: 100%; + display: flex; +} +.card-report-timeline .reports-box-body-left { + width: 1455px; + height: 100%; +} +.card-report-timeline .reports-box-body-left .body-left-header, +.card-report-timeline .reports-box-body-left .body-left-header-machinestatus { + width: 100%; + height: 70px; + display: flex; + flex-flow: row; + margin-top: 18px; + position: relative; + margin-bottom: 16px; +} +.card-report-timeline .reports-box-body-left .body-left-header .mx-datepicker-range, +.card-report-timeline .reports-box-body-left .body-left-header-machinestatus .mx-datepicker-range { + width: 170px; + height: 70px; +} +.card-report-timeline .reports-box-body-left .body-left-header .mx-datepicker-range .mx-input-wrapper, +.card-report-timeline .reports-box-body-left .body-left-header-machinestatus .mx-datepicker-range .mx-input-wrapper { + margin-right: 24px; + width: 253px; +} +.card-report-timeline .reports-box-body-left .body-left-header .mx-datepicker-range .mx-input-wrapper .mx-input, +.card-report-timeline .reports-box-body-left .body-left-header-machinestatus .mx-datepicker-range .mx-input-wrapper .mx-input { + width: 253px; + 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; + padding-left: 16px; +} +.card-report-timeline .reports-box-body-left .body-left-header > div, +.card-report-timeline .reports-box-body-left .body-left-header-machinestatus > div { + display: flex; + flex-flow: column; + height: 70px; + margin-right: 24px; +} +.card-report-timeline .reports-box-body-left .body-left-header > div label, +.card-report-timeline .reports-box-body-left .body-left-header-machinestatus > div label { + font-size: 14px; + line-height: 1.29; + color: #878787; +} +.card-report-timeline .reports-box-body-left .body-left-header > div label.intervaldate, +.card-report-timeline .reports-box-body-left .body-left-header-machinestatus > div label.intervaldate { + width: 253px; + font-size: 14px; + line-height: 1.29; + color: #878787; +} +.card-report-timeline .reports-box-body-left .body-left-header > div div.interval-time, +.card-report-timeline .reports-box-body-left .body-left-header-machinestatus > div div.interval-time { + display: flex; + flex-flow: row; +} +.card-report-timeline .reports-box-body-left .body-left-header > div div.interval-time input[type="time"], +.card-report-timeline .reports-box-body-left .body-left-header-machinestatus > div div.interval-time input[type="time"] { + width: 96px; + height: 48px; + border-radius: 2px; + box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.5); + font-size: 18px; + line-height: 1.11; + color: #bbbcbc; + border: none; + padding-left: 16px; +} +.card-report-timeline .reports-box-body-left .body-left-header > div div.interval-time input[type="time"]:first-child, +.card-report-timeline .reports-box-body-left .body-left-header-machinestatus > div div.interval-time input[type="time"]:first-child { + margin-right: 16px; +} +.card-report-timeline .reports-box-body-left .body-left-header > div div.interval-time input[type="time"]::-webkit-inner-spin-button, +.card-report-timeline .reports-box-body-left .body-left-header-machinestatus > div div.interval-time input[type="time"]::-webkit-inner-spin-button { + -webkit-appearance: none; + display: none; + border: none; +} +.card-report-timeline .reports-box-body-left .body-left-header > div input.program, +.card-report-timeline .reports-box-body-left .body-left-header-machinestatus > div input.program { + width: 256px; + height: 46px; + border-radius: 2px; + box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.5); + font-size: 18px; + line-height: 1.11; + color: #bbbcbc; + padding-left: 16px; + border: none; +} +.card-report-timeline .reports-box-body-left .body-left-center { + width: 1448px; + max-height: 681px; + display: flex; + flex-flow: column; +} +.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container { + width: 100%; +} +.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left { + width: 360px; + height: 616px; + display: flex; + flex-flow: column; + align-items: center; + border: solid 1px #dddddd; + overflow-y: auto; +} +.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .multiselect { + z-index: 100; + margin-bottom: 24px; + margin-top: 16px; +} +.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .multiselect label { + font-size: 14px; + line-height: 1.29; + color: #878787; +} +.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .selectBox { + position: relative; + width: 328px; + height: 64px; +} +.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .selectBox select { + width: 100%; + padding: 8px; + cursor: pointer; + height: 64px; + font-size: 18px; + line-height: 1.11; + color: #4b4b4b; + margin-bottom: 0; + margin-top: 0; +} +.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .selectBox select option { + display: none; +} +.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .overSelect { + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; +} +.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .checkboxes { + display: none; +} +.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .checkboxesView { + width: calc(100% - 8px); + background-color: #fff; + display: block; + z-index: 100; + padding: 6px 4px; + box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.4); +} +.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .checkboxesView label { + font-size: 18px; + margin: 2px; + display: flex; + flex-flow: row; +} +.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .checkboxesView .label-state { + margin-left: 12px; +} +.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div select { + width: 328px; + height: 48px; + border-radius: 2px; + box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4); + margin-bottom: 24px; + margin-top: 16px; + padding-left: 16px; + font-size: 18px; + line-height: 1.11; + color: #4b4b4b; +} +.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .accordion-dropdown header { + height: 64px; + width: 312px; + border-radius: 2px; + box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4); + display: flex; + justify-content: space-between; + align-items: center; + color: #002680; + line-height: 1; + font-size: 18px; + padding-left: 16px; + cursor: pointer; +} +.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .accordion-dropdown header span { + width: 100%; +} +.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .accordion-dropdown header .expander { + margin: 0 12px; + line-height: 28px; + height: 28px; + width: 28px; + font-size: 28px; +} +.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .accordion-dropdown section { + width: 328px; + min-height: 0; + max-height: 0; + transition: max-height 100ms ease-in-out, min-height 200ms ease-in-out; + overflow: hidden; +} +.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .accordion-dropdown section.expanded { + min-height: 64px; + background-color: rgba(255, 255, 255, 0.1); + max-height: 1000px; +} +.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .accordion-dropdown section .item { + height: 64px; + width: 100%; + line-height: 64px; + background-color: #f1f1f1; +} +.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .accordion-dropdown section .dropdown { + height: 100%; + margin-top: 2px; +} +.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .accordion-dropdown section .dropdown .filename { + display: flex; + height: 64px; + align-items: center; + cursor: pointer; +} +.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .accordion-dropdown section .dropdown .filename i { + color: #002e6e; + margin: 0 20px 0 20px; +} +.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .accordion-dropdown section .dropdown .filename span { + width: 100%; + font-size: 18px; + line-height: 1; + color: #002680; +} +.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .accordion-dropdown section .dropdown .filename.selected span, +.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .accordion-dropdown section .dropdown .filename.selected i { + color: #4b4b4b; +} +.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .accordion-dropdown section .dropdown .filename.selected { + background-color: rgba(255, 255, 255, 0.8); +} +.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-footer { + height: 64px; + width: 100%; + border: solid 1px #dddddd; +} +.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-footer .header-title { + width: 360px; + height: 64px; + display: flex; + flex-flow: column; + align-items: center; + justify-content: center; +} +.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-footer .header-title .title { + font-size: 14px; + color: #878787; +} +.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-footer .header-title .data-temporal { + font-size: 18px; + line-height: 1; + color: #4b4b4b; +} +.card-report-timeline .reports-box-body-right { + width: 327px; + height: 100%; +} +.card-report-timeline .reports-box-body-right .body-right-header { + width: 100%; + height: 70px; + display: flex; + flex-flow: row; + margin-top: 18px; + justify-content: flex-end; +} +.card-report-timeline .reports-box-body-right .body-right-header .body-right-header-right { + width: calc(100% - 158px); + height: 100%; + display: flex; + align-items: center; + justify-content: center; +} +.card-report-timeline .reports-box-body-right .body-right-header .body-right-header-right button { + width: 48px; + height: 48px; + border-radius: 2px; + box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4); + background-image: linear-gradient(to bottom, #f1f1f1, #bbbcbc); + border: none; +} +.card-report-timeline .reports-box-body-right .body-right-header .body-right-header-right button:first-child { + margin-right: 16px; +} +.card-report-timeline .reports-box-body-right .body-right-header .body-right-header-right button:active { + width: 48px; + height: 48px; + border-radius: 2px; + box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.4); + background-image: linear-gradient(to bottom, #bbbcbc, #f1f1f1); + border: none; +} +.card-report-timeline .reports-box-body-right .body-right-card { + width: 100%; + height: calc(100% - 70px); + display: flex; + flex-flow: column; + align-items: center; +} +.card-report-timeline .reports-box-body-right .body-right-card .card-report > section { + display: flex; + align-items: center; + justify-content: center; +} +.card-report-timeline .reports-box-body-right .body-right-card .card-report > section .rectangle_gray { + width: 256px; + height: 120px; + border-radius: 2px; + display: flex; + flex-flow: column; + align-items: center; + justify-content: center; + background-color: #f1f1f1; +} +.card-report-timeline .reports-box-body-right .body-right-card .card-report > section .rectangle_gray label { + font-size: 18px; + color: #878787; + margin-bottom: 30px; +} +.card-report-timeline .reports-box-body-right .body-right-card .card-report > section .rectangle_gray span { + font-size: 48px; + font-weight: bold; + line-height: 0.38; + color: #1791ff; +} +/** Versione zeplin machine status non cancellare + +.card-report-machine-status{ + width: 100%; + height: 100%; + display: flex; + .reports-box-body-left { + width: 1455px; + height: 100%; + .body-left-header, .body-left-header-machinestatus{ + width: 100%; + height: 70px; + display: flex; + flex-flow: row; + margin-top: 18px; + border-right: solid 2px @color-whitegrey; + position: relative; + margin-bottom: 16px; + .mx-datepicker-range{ + width: 170px; + height: 70px; + .mx-input-wrapper{ + margin-right: 24px; + width: 253px; + .mx-input{ + width: 253px; + height: 50px; + 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; + padding-left: 16px; + } + } + } + > div { + display: flex; + flex-flow: column; + height: 70px; + margin-right: 24px; + label.intervaldate{ + width: 253px; + } + select{ + width: 192px; + 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; + padding-left: 16px; + } + div.interval-time{ + display: flex; + flex-flow: row; + input[type="time"]{ + width: 112px; + height: 48px; + border-radius: 2px; + box-shadow: inset 0 1px 3px 0 @color-black-50; + font-size: 18px; + line-height: 1.11; + color: @color-silver; + border: none; + } + input[type="time"]:first-child{ + margin-right: 16px; + } + input[type="time"]::-webkit-inner-spin-button { + -webkit-appearance: none; + display: none; + border:none; + } + } + input.program{ + width: 256px; + height: 48px; + border-radius: 2px; + box-shadow: inset 0 1px 3px 0 @color-black-50; + font-size: 18px; + line-height: 1.11; + color: @color-silver; + padding-left: 16px; + border: none; + } + .reports-select-operator{ + width: 192px; + height: 48px; + border-radius: 2px; + box-shadow: 0 1px 2px 0 @color-black-40; + font-size: 18px; + line-height: 1.11; + color: @color-greyish-brown; + } + .reports-select-shift{ + width: 144px; + height: 48px; + border-radius: 2px; + box-shadow: 0 1px 2px 0 @color-black-40; + } + } + .multiselect{ + z-index: 100; + label{ + font-size: 14px; + line-height: 1.29; + color: @color-warm-grey; + } + } + .selectBox{ + position: relative; + width: 144px; + } + .selectBox select{ + width: 100%; + padding: 8px; + cursor: pointer; + height: 49px; + font-size: 18px; + line-height: 1.11; + color: @color-greyish-brown; + box-shadow: 0 1px 2px @color-black-40; + border-radius: 2px; + option{ + display: none; + } + } + .selectBoxU{ + position: relative; + width: 192px; + } + .selectBoxU select{ + width: 100%; + padding: 8px; + cursor: pointer; + height: 49px; + font-size: 18px; + line-height: 1.11; + color: @color-greyish-brown; + box-shadow: 0 1px 2px @color-black-40; + border-radius: 2px; + option{ + display: none; + } + } + .overSelect{ + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; + } + .checkboxes, .checkboxesU{ + display: none; + } + .checkboxesView, .checkboxesViewUser{ + width: calc(~"100% - 8px");; + background-color: #fff; + display: block; + z-index: 100; + padding: 6px 4px; + box-shadow: 0 3px 5px 0 @color-black-40; + label{ + font-size: 18px; + margin:2px; + display: flex; + flex-flow: row; + } + .label-state{ + margin-left: 12px; + } + } + } + .body-left-header-machinestatus{ + border-right: 0px; + } + .body-left-center { + width: 1448px; + max-height: 681px; + display: flex; + flex-flow: column; + .body-left-center-container{ + width: 100%; + table{ + table-layout: fixed; + width: 100%; + border-collapse: collapse; + } + thead{ + border-bottom: solid 2px @color-label-grey; + font-size: 14px; + line-height: 1.29; + color: @color-darkish-blue; + display: block; + width: 1431px; + } + thead tr th{ + height: 48px; + } + tr:nth-child(even) {background: #FFF } + tr:nth-child(odd) {background: #dddddd } + // thead tr{ + // width: 1448px; + // } + thead tr:nth-child(odd){ + background: #FFF + } + th:nth-child(1), td:nth-child(1){ + width:162px; + max-width: 162px; + text-align: center; + } + th:nth-child(2), td:nth-child(2){ + width:139px; + max-width: 139px; + text-align: center; + } + th:nth-child(3), td:nth-child(3){ + width:83px; + max-width:83px; + text-align: center; + } + th:nth-child(4), td:nth-child(4){ + width:83px; + max-width:83px; + text-align: center; + } + th:nth-child(5), td:nth-child(5){ + width:83px; + max-width:83px; + text-align: center; + } + th:nth-child(6), td:nth-child(6){ + width:83px; + max-width:83px; + text-align: center; + } + th:nth-child(7), td:nth-child(7){ + width:97px; + max-width:97px; + text-align: center; + } + th:nth-child(8), td:nth-child(8){ + width:97px; + max-width:97px; + text-align: center; + } + th:nth-child(9), td:nth-child(9){ + width:97px; + max-width:97px; + text-align: center; + } + th:nth-child(10), td:nth-child(10){ + width:115px; + max-width:115px; + text-align: center; + } + th:nth-child(11), td:nth-child(11){ + width:97px; + max-width:97px; + text-align: center; + } + th:nth-child(12), td:nth-child(12){ + width:148px; + max-width:148px; + text-align: center; + } + th:nth-child(13), td:nth-child(13){ + width:97px; + max-width:97px; + text-align: center; + } + th:last-child{ + font-size: 23px; + font-weight: bold; + cursor: pointer; + } + th, td{ + overflow: hidden; + div{ + overflow: hidden; + max-height: 64px; + } + } + tbody{ + display: block; + height: 631px; + width: 1448px; + overflow: scroll; + tr{ + cursor: pointer; + height: 64px; + padding: 10px; + font-size: 14px; + line-height: 1.29; + color: @color-greyish-brown; + td{ + text-align: center; + &.green{ + color: @color-apple-green; + } + &.red{ + color: @color-scarlet; + } + } + td:last-child{ + width: 10px; + } + &.selected{ + background-color: rgba(23, 145, 255, 0.75); + color: @color-white; + font-weight: 600; + } + } + } + .body-left-center-left{ + width: 360px; + height: 616px; + display: flex; + flex-flow: column; + align-items: center; + border: solid 1px @color-whitegrey; + overflow-y: auto; + .multiselect{ + z-index: 100; + margin-bottom: 24px; + margin-top: 16px; + label{ + font-size: 14px; + line-height: 1.29; + color: @color-warm-grey; + } + } + .selectBox{ + position: relative; + width: 328px; + height: 64px; + } + .selectBox select{ + width: 100%; + padding: 8px; + cursor: pointer; + height: 64px; + font-size: 18px; + line-height: 1.11; + color: @color-greyish-brown; + margin-bottom: 0; + margin-top: 0; + option{ + display: none; + } + } + .overSelect{ + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; + } + .checkboxes, .checkboxesU{ + display: none; + } + .checkboxesView, .checkboxesViewUser{ + width: calc(~"100% - 8px");; + background-color: #fff; + display: block; + z-index: 100; + padding: 6px 4px; + box-shadow: 0 3px 5px 0 @color-black-40; + label{ + font-size: 18px; + margin:2px; + display: flex; + flex-flow: row; + } + .label-state{ + margin-left: 12px; + } + } + div{ + select{ + width: 328px; + height: 48px; + border-radius: 2px; + box-shadow: 0 1px 2px 0 @color-black-40; + margin-bottom: 24px; + margin-top: 16px; + padding-left: 16px; + font-size: 18px; + line-height: 1.11; + color: @color-greyish-brown; + } + .accordion-dropdown{ + header { + height: 64px; + width: 312px; + border-radius: 2px; + box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4); + display: flex; + justify-content: space-between; + align-items: center; + color: @color-darkish-blue; + line-height: 1; + font-size: 18px; + padding-left: 16px; + cursor: pointer; + span { + width: 100%; + } + .expander { + margin: 0 12px; + line-height: 28px; + height: 28px; + width: 28px; + font-size: 28px; + } + } + section { + width: 328px; + min-height: 0; + max-height: 0; + transition: max-height 100ms ease-in-out, min-height 200ms ease-in-out; + overflow: hidden; + &.expanded { + min-height: 64px; + background-color: rgba(255, 255, 255, 0.1); + max-height: 1000px; + } + .item { + height: 64px; + width: 100%; + line-height: 64px; + background-color: @color-white2; + } + + .dropdown{ + // background-color: @color-white2; + height: 100%; + margin-top: 2px; + .filename{ + display: flex; + height: 64px; + align-items: center; + cursor: pointer; + i{ + color: @color-cyan-blue; + margin: 0 20px 0 20px; + } + span{ + width: 100%; + font-size: 18px; + line-height: 1; + color: @color-darkish-blue; + } + + &.selected{ + span, i{ + color:#4b4b4b; + } + } + } + .filename.selected{ + background-color: rgba(255, 255, 255, 0.8); + } + + } + } + } + } + } + } + .body-left-center-footer{ + height: 64px; + width: 100%; + border: solid 1px @color-whitegrey; + .header-title{ + width: 360px; + height: 64px; + display: flex; + flex-flow: column; + align-items: center; + justify-content: center; + .title{ + font-size: 14px; + color: @color-warm-grey; + } + .data-temporal{ + font-size: 18px; + line-height: 1; + color: @color-greyish-brown; + } + } + } + } + } + .reports-box-body-right { + width: 327px; + height: 100%; + .body-right-header{ + width: 100%; + height: 70px; + display: flex; + flex-flow: row; + margin-top: 18px; + justify-content: flex-end; + .body-right-header-left { + width: 158px; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + border-right: solid 2px @color-whitegrey; + button{ + width: 48px; + height: 48px; + border-radius: 2px; + box-shadow: 0 1px 2px 0 @color-black-40; + background-image: linear-gradient(to bottom,@color-white2, @color-silver); + border: none; + } + button.active{ + width: 48px; + height: 48px; + border-radius: 2px; + box-shadow: inset 0 1px 3px 0 @color-black-40; + background-image: linear-gradient(to bottom, @color-silver, @color-white2 ); + color: @color-clear-blue; + border: none; + } + } + .body-right-header-right { + width: calc(~"100% - 158px"); + height: 100%; + display: flex; + align-items: center; + justify-content: center; + button{ + width: 48px; + height: 48px; + border-radius: 2px; + box-shadow: 0 1px 2px 0 @color-black-40; + background-image: linear-gradient(to bottom,@color-white2, @color-silver); + border:none; + } + button:first-child{ + margin-right: 16px; + } + button:active{ + width: 48px; + height: 48px; + border-radius: 2px; + box-shadow: inset 0 1px 3px 0 @color-black-40; + background-image: linear-gradient(to bottom, @color-silver, @color-white2 ); + border: none; + } + } + } + .body-right-card{ + width: 100%; + height: calc(~"100% - 70px"); + display: flex; + flex-flow: column; + align-items: center; + .card-report{ + > section { + display: flex; + align-items: center; + justify-content: center; + .rectangle_gray{ + width: 256px; + height: 120px; + border-radius: 2px; + display: flex; + flex-flow: column; + align-items: center; + justify-content: center; + background-color: @color-white2; + label{ + font-size: 18px; + color: @color-warm-grey; + margin-bottom: 30px; + } + span{ + font-size: 48px; + font-weight: bold; + line-height: 0.38; + color: @color-clear-blue; + } + } + } + } + } + } +} */ @keyframes selectedanimation { 0% { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4); @@ -15150,665 +18494,6 @@ footer .container button.big:before { display: flex; flex-flow: row; } -.reports-container .reports-box .reports-box-body .reports-box-body-left { - width: 1455px; - height: 100%; -} -.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-header, -.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-header-machinestatus { - width: 100%; - height: 70px; - display: flex; - flex-flow: row; - margin-top: 18px; - border-right: solid 2px #dddddd; - position: relative; - margin-bottom: 16px; -} -.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-header .mx-datepicker-range, -.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-header-machinestatus .mx-datepicker-range { - width: 170px; - height: 70px; -} -.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-header .mx-datepicker-range .mx-input-wrapper, -.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-header-machinestatus .mx-datepicker-range .mx-input-wrapper { - margin-right: 24px; - width: 253px; -} -.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-header .mx-datepicker-range .mx-input-wrapper .mx-input, -.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-header-machinestatus .mx-datepicker-range .mx-input-wrapper .mx-input { - width: 253px; - height: 50px; - 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; - padding-left: 16px; -} -.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-header > div, -.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-header-machinestatus > div { - display: flex; - flex-flow: column; - height: 70px; - margin-right: 24px; -} -.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-header > div label.intervaldate, -.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-header-machinestatus > div label.intervaldate { - width: 253px; -} -.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-header > div select, -.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-header-machinestatus > div select { - width: 192px; - 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; - padding-left: 16px; -} -.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-header > div div.interval-time, -.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-header-machinestatus > div div.interval-time { - display: flex; - flex-flow: row; -} -.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-header > div div.interval-time input[type="time"], -.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-header-machinestatus > div div.interval-time input[type="time"] { - width: 112px; - height: 48px; - border-radius: 2px; - box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.5); - font-size: 18px; - line-height: 1.11; - color: #bbbcbc; - border: none; -} -.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-header > div div.interval-time input[type="time"]:first-child, -.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-header-machinestatus > div div.interval-time input[type="time"]:first-child { - margin-right: 16px; -} -.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-header > div div.interval-time input[type="time"]::-webkit-inner-spin-button, -.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-header-machinestatus > div div.interval-time input[type="time"]::-webkit-inner-spin-button { - -webkit-appearance: none; - display: none; - border: none; -} -.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-header > div input.program, -.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-header-machinestatus > div input.program { - width: 256px; - height: 48px; - border-radius: 2px; - box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.5); - font-size: 18px; - line-height: 1.11; - color: #bbbcbc; - padding-left: 16px; - border: none; -} -.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-header > div .reports-select-operator, -.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-header-machinestatus > div .reports-select-operator { - width: 192px; - height: 48px; - border-radius: 2px; - box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4); - font-size: 18px; - line-height: 1.11; - color: #4b4b4b; -} -.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-header > div .reports-select-shift, -.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-header-machinestatus > div .reports-select-shift { - width: 144px; - height: 48px; - border-radius: 2px; - box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4); -} -.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-header > div label.label_advanced_filters, -.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-header-machinestatus > div label.label_advanced_filters { - margin-top: 35px; - font-size: 18px; - line-height: 1; - color: #002680; - cursor: pointer; -} -.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-header > div label.label_advanced_filters span, -.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-header-machinestatus > div label.label_advanced_filters span { - text-decoration-line: underline; - text-decoration-color: #002680; - text-decoration-style: solid; -} -.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-header div.advanced-filters, -.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-header-machinestatus div.advanced-filters { - z-index: 100; - height: 80px; - width: 100%; - display: flex; - flex-flow: row; - background-color: #fff; - position: absolute; - top: 80px; -} -.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-header div.advanced-filters > div, -.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-header-machinestatus div.advanced-filters > div { - display: flex; - flex-flow: column; - height: 70px; - margin-right: 24px; -} -.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-header div.advanced-filters > div label.intervaldate, -.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-header-machinestatus div.advanced-filters > div label.intervaldate { - width: 253px; -} -.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-header div.advanced-filters > div select, -.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-header-machinestatus div.advanced-filters > div select { - width: 192px; - 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; - padding-left: 16px; -} -.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-header div.advanced-filters > div div.interval-time, -.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-header-machinestatus div.advanced-filters > div div.interval-time { - display: flex; - flex-flow: row; -} -.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-header div.advanced-filters > div div.interval-time input[type="time"], -.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-header-machinestatus div.advanced-filters > div div.interval-time input[type="time"] { - width: 112px; - height: 48px; - border-radius: 2px; - box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.5); - font-size: 18px; - line-height: 1.11; - color: #bbbcbc; - border: none; -} -.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-header div.advanced-filters > div div.interval-time input[type="time"]:first-child, -.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-header-machinestatus div.advanced-filters > div div.interval-time input[type="time"]:first-child { - margin-right: 16px; -} -.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-header div.advanced-filters > div div.interval-time input[type="time"]::-webkit-inner-spin-button, -.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-header-machinestatus div.advanced-filters > div div.interval-time input[type="time"]::-webkit-inner-spin-button { - -webkit-appearance: none; - display: none; - border: none; -} -.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-header div.advanced-filters > div input.program, -.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-header-machinestatus div.advanced-filters > div input.program { - width: 256px; - height: 48px; - border-radius: 2px; - box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.5); - font-size: 18px; - line-height: 1.11; - color: #bbbcbc; - padding-left: 16px; - border: none; -} -.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-header div.advanced-filters > div .reports-select-operator, -.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-header-machinestatus div.advanced-filters > div .reports-select-operator { - width: 192px; - height: 48px; - border-radius: 2px; - box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4); - font-size: 18px; - line-height: 1.11; - color: #4b4b4b; -} -.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-header div.advanced-filters > div .reports-select-shift, -.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-header-machinestatus div.advanced-filters > div .reports-select-shift { - width: 144px; - height: 48px; - border-radius: 2px; - box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4); -} -.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-header div.advanced-filters > div label.label_advanced_filters, -.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-header-machinestatus div.advanced-filters > div label.label_advanced_filters { - margin-top: 35px; - font-size: 18px; - line-height: 1; - color: #002680; -} -.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-header div.advanced-filters > div label.label_advanced_filters span, -.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-header-machinestatus div.advanced-filters > div label.label_advanced_filters span { - text-decoration-line: underline; - text-decoration-color: #002680; - text-decoration-style: solid; -} -.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-header-machinestatus { - border-right: 0px; -} -.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center { - width: 1448px; - max-height: 681px; - display: flex; - flex-flow: column; -} -.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center .body-left-center-container { - width: 100%; -} -.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center .body-left-center-container table { - table-layout: fixed; - width: 100%; - border-collapse: collapse; -} -.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center .body-left-center-container thead { - border-bottom: solid 2px #979797; - font-size: 14px; - line-height: 1.29; - color: #002680; - display: block; - width: 1431px; -} -.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center .body-left-center-container thead tr th { - height: 48px; -} -.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center .body-left-center-container tr:nth-child(even) { - background: #FFF; -} -.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center .body-left-center-container tr:nth-child(odd) { - background: #dddddd; -} -.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center .body-left-center-container thead tr:nth-child(odd) { - background: #FFF; -} -.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center .body-left-center-container th:nth-child(1), -.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center .body-left-center-container td:nth-child(1) { - width: 162px; - max-width: 162px; - text-align: center; -} -.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center .body-left-center-container th:nth-child(2), -.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center .body-left-center-container td:nth-child(2) { - width: 139px; - max-width: 139px; - text-align: center; -} -.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center .body-left-center-container th:nth-child(3), -.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center .body-left-center-container td:nth-child(3) { - width: 83px; - max-width: 83px; - text-align: center; -} -.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center .body-left-center-container th:nth-child(4), -.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center .body-left-center-container td:nth-child(4) { - width: 83px; - max-width: 83px; - text-align: center; -} -.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center .body-left-center-container th:nth-child(5), -.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center .body-left-center-container td:nth-child(5) { - width: 83px; - max-width: 83px; - text-align: center; -} -.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center .body-left-center-container th:nth-child(6), -.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center .body-left-center-container td:nth-child(6) { - width: 83px; - max-width: 83px; - text-align: center; -} -.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center .body-left-center-container th:nth-child(7), -.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center .body-left-center-container td:nth-child(7) { - width: 97px; - max-width: 97px; - text-align: center; -} -.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center .body-left-center-container th:nth-child(8), -.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center .body-left-center-container td:nth-child(8) { - width: 97px; - max-width: 97px; - text-align: center; -} -.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center .body-left-center-container th:nth-child(9), -.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center .body-left-center-container td:nth-child(9) { - width: 97px; - max-width: 97px; - text-align: center; -} -.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center .body-left-center-container th:nth-child(10), -.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center .body-left-center-container td:nth-child(10) { - width: 115px; - max-width: 115px; - text-align: center; -} -.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center .body-left-center-container th:nth-child(11), -.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center .body-left-center-container td:nth-child(11) { - width: 97px; - max-width: 97px; - text-align: center; -} -.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center .body-left-center-container th:nth-child(12), -.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center .body-left-center-container td:nth-child(12) { - width: 148px; - max-width: 148px; - text-align: center; -} -.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center .body-left-center-container th:nth-child(13), -.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center .body-left-center-container td:nth-child(13) { - width: 97px; - max-width: 97px; - text-align: center; -} -.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center .body-left-center-container th:last-child { - font-size: 23px; - font-weight: bold; - cursor: pointer; -} -.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center .body-left-center-container th, -.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center .body-left-center-container td { - overflow: hidden; -} -.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center .body-left-center-container th div, -.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center .body-left-center-container td div { - overflow: hidden; - max-height: 64px; -} -.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center .body-left-center-container tbody { - display: block; - height: 631px; - width: 1448px; - overflow: scroll; -} -.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center .body-left-center-container tbody tr { - cursor: pointer; - height: 64px; - padding: 10px; - font-size: 14px; - line-height: 1.29; - color: #4b4b4b; -} -.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center .body-left-center-container tbody tr td { - text-align: center; -} -.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center .body-left-center-container tbody tr td.green { - color: #7ed321; -} -.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center .body-left-center-container tbody tr td.red { - color: #d0021b; -} -.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center .body-left-center-container tbody tr td:last-child { - width: 10px; -} -.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center .body-left-center-container tbody tr.selected { - background-color: rgba(23, 145, 255, 0.75); - color: #fff; - font-weight: 600; -} -.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left { - width: 360px; - height: 616px; - display: flex; - flex-flow: column; - align-items: center; - border: solid 1px #dddddd; - overflow-y: auto; -} -.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .multiselect { - z-index: 100; - margin-bottom: 24px; - margin-top: 16px; -} -.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .multiselect label { - font-size: 14px; - line-height: 1.29; - color: #878787; -} -.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .selectBox { - position: relative; - width: 328px; - height: 64px; -} -.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .selectBox select { - width: 100%; - padding: 8px; - cursor: pointer; - height: 64px; - font-size: 18px; - line-height: 1.11; - color: #4b4b4b; - margin-bottom: 0; - margin-top: 0; -} -.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .selectBox select option { - display: none; -} -.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .overSelect { - position: absolute; - left: 0; - right: 0; - top: 0; - bottom: 0; -} -.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .checkboxes, -.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .checkboxesU { - display: none; -} -.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .checkboxesView, -.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .checkboxesViewUser { - width: calc(100% - 8px); - background-color: #fff; - display: block; - z-index: 100; - padding: 6px 4px; - box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.4); -} -.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .checkboxesView label, -.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .checkboxesViewUser label { - font-size: 18px; - margin: 2px; - display: flex; - flex-flow: row; -} -.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .checkboxesView .label-state, -.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .checkboxesViewUser .label-state { - margin-left: 12px; -} -.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div select { - width: 328px; - height: 48px; - border-radius: 2px; - box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4); - margin-bottom: 24px; - margin-top: 16px; - padding-left: 16px; - font-size: 18px; - line-height: 1.11; - color: #4b4b4b; -} -.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .accordion-dropdown header { - height: 64px; - width: 312px; - border-radius: 2px; - box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4); - display: flex; - justify-content: space-between; - align-items: center; - color: #002680; - line-height: 1; - font-size: 18px; - padding-left: 16px; - cursor: pointer; -} -.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .accordion-dropdown header span { - width: 100%; -} -.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .accordion-dropdown header .expander { - margin: 0 12px; - line-height: 28px; - height: 28px; - width: 28px; - font-size: 28px; -} -.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .accordion-dropdown section { - width: 328px; - min-height: 0; - max-height: 0; - transition: max-height 100ms ease-in-out, min-height 200ms ease-in-out; - overflow: hidden; -} -.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .accordion-dropdown section.expanded { - min-height: 64px; - background-color: rgba(255, 255, 255, 0.1); - max-height: 1000px; -} -.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .accordion-dropdown section .item { - height: 64px; - width: 100%; - line-height: 64px; - background-color: #f1f1f1; -} -.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .accordion-dropdown section .dropdown { - height: 100%; - margin-top: 2px; -} -.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .accordion-dropdown section .dropdown .filename { - display: flex; - height: 64px; - align-items: center; - cursor: pointer; -} -.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .accordion-dropdown section .dropdown .filename i { - color: #002e6e; - margin: 0 20px 0 20px; -} -.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .accordion-dropdown section .dropdown .filename span { - width: 100%; - font-size: 18px; - line-height: 1; - color: #002680; -} -.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .accordion-dropdown section .dropdown .filename.selected span, -.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .accordion-dropdown section .dropdown .filename.selected i { - color: #4b4b4b; -} -.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .accordion-dropdown section .dropdown .filename.selected { - background-color: rgba(255, 255, 255, 0.8); -} -.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center .body-left-center-footer { - height: 64px; - width: 100%; - border: solid 1px #dddddd; -} -.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center .body-left-center-footer .header-title { - width: 360px; - height: 64px; - display: flex; - flex-flow: column; - align-items: center; - justify-content: center; -} -.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center .body-left-center-footer .header-title .title { - font-size: 14px; - color: #878787; -} -.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center .body-left-center-footer .header-title .data-temporal { - font-size: 18px; - line-height: 1; - color: #4b4b4b; -} -.reports-container .reports-box .reports-box-body .reports-box-body-right { - width: 327px; - height: 100%; -} -.reports-container .reports-box .reports-box-body .reports-box-body-right .body-right-header { - width: 100%; - height: 70px; - display: flex; - flex-flow: row; - margin-top: 18px; - justify-content: flex-end; -} -.reports-container .reports-box .reports-box-body .reports-box-body-right .body-right-header .body-right-header-left { - width: 158px; - height: 100%; - display: flex; - align-items: center; - justify-content: center; - border-right: solid 2px #dddddd; -} -.reports-container .reports-box .reports-box-body .reports-box-body-right .body-right-header .body-right-header-left button { - width: 48px; - height: 48px; - border-radius: 2px; - box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4); - background-image: linear-gradient(to bottom, #f1f1f1, #bbbcbc); - border: none; -} -.reports-container .reports-box .reports-box-body .reports-box-body-right .body-right-header .body-right-header-left button.active { - width: 48px; - height: 48px; - border-radius: 2px; - box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.4); - background-image: linear-gradient(to bottom, #bbbcbc, #f1f1f1); - color: #1791ff; - border: none; -} -.reports-container .reports-box .reports-box-body .reports-box-body-right .body-right-header .body-right-header-right { - width: calc(100% - 158px); - height: 100%; - display: flex; - align-items: center; - justify-content: center; -} -.reports-container .reports-box .reports-box-body .reports-box-body-right .body-right-header .body-right-header-right button { - width: 48px; - height: 48px; - border-radius: 2px; - box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4); - background-image: linear-gradient(to bottom, #f1f1f1, #bbbcbc); - border: none; -} -.reports-container .reports-box .reports-box-body .reports-box-body-right .body-right-header .body-right-header-right button:first-child { - margin-right: 16px; -} -.reports-container .reports-box .reports-box-body .reports-box-body-right .body-right-header .body-right-header-right button:active { - width: 48px; - height: 48px; - border-radius: 2px; - box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.4); - background-image: linear-gradient(to bottom, #bbbcbc, #f1f1f1); - border: none; -} -.reports-container .reports-box .reports-box-body .reports-box-body-right .body-right-card { - width: 100%; - height: calc(100% - 70px); - display: flex; - flex-flow: column; - align-items: center; -} -.reports-container .reports-box .reports-box-body .reports-box-body-right .body-right-card .card-report > section { - display: flex; - align-items: center; - justify-content: center; -} -.reports-container .reports-box .reports-box-body .reports-box-body-right .body-right-card .card-report > section .rectangle_gray { - width: 256px; - height: 120px; - border-radius: 2px; - display: flex; - flex-flow: column; - align-items: center; - justify-content: center; - background-color: #f1f1f1; -} -.reports-container .reports-box .reports-box-body .reports-box-body-right .body-right-card .card-report > section .rectangle_gray label { - font-size: 18px; - color: #878787; - margin-bottom: 30px; -} -.reports-container .reports-box .reports-box-body .reports-box-body-right .body-right-card .card-report > section .rectangle_gray span { - font-size: 48px; - font-weight: bold; - line-height: 0.38; - color: #1791ff; -} a, a:visited, a:hover, diff --git a/Step/wwwroot/src/app_modules/reports/components/card-report-alarms.ts b/Step/wwwroot/src/app_modules/reports/components/card-report-alarms.ts new file mode 100644 index 00000000..cb8ced5f --- /dev/null +++ b/Step/wwwroot/src/app_modules/reports/components/card-report-alarms.ts @@ -0,0 +1,94 @@ +import Vue from "vue"; +import Component from "vue-class-component"; +import {cardReport} from "../../../modules/base-components/cards/index"; +import accordionDropdown from "../../../modules/base-components/accordion-dropdown.vue"; +import modalReportSelectColumn from "../../../modules/base-components/modal-report-select-column.vue"; +import { Accordion } from "src/modules/base-components"; +import { loginService } from "src/services"; +import DatePicker from "vue2-datepicker"; +import moment from "moment"; +import { ModalHelper } from "src/components/modals"; + +declare let $: any; +@Component({ components: { datePicker: DatePicker, cardReport: cardReport, accordionDropdown: accordionDropdown, accordion: Accordion } }) +export default class CardReportAlarms extends Vue { + + lang = { + days: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'], + months: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], + pickers: ['next 7 days', 'next 30 days', 'previous 7 days', 'previous 30 days'], + placeholder: { + date: 'Select Date', + dateRange: 'Select Date Range' + } + } + + filter: { + interval?: Date[], + timelineMacro: Array, + multiUser: Array + } = { + timelineMacro: ["Eventi","Allarmi","Stato macchina","Programmi"], + multiUser: [], + interval: [new Date(new Date().setDate(new Date().getDate() - 6)), new Date(new Date().setDate(new Date().getDate() + 1))] + }; + + + public selectedTab: string = "Production"; + selectDiagram: boolean = false; + selectMoreFilter: boolean = false; + selectTable: boolean = true; + users: Array = []; + + get currentUser() { + return this.$store.state.currentUser; + } + + async mounted() { + this.users = await loginService.getAllUsers(); + this.users.unshift({ id: -1, username: this.$options.filters.localize("alarm_history_users_not_user", "Nessun utente") }); + this.filter.multiUser.push(this.currentUser.username); + } + + public selectTab(value){ + this.selectedTab = value; + } + timeformat() { + return (moment() as any)._locale._longDateFormat.LT; + } + + viewDiagram(){ + if(!this.selectDiagram){ + this.selectDiagram = true; + this.selectTable = false; + } + console.log("Diagram active"); + } + + viewTable(){ + if(!this.selectTable){ + this.selectDiagram = false; + this.selectTable = true; + } + console.log("Diagram active"); + } + + viewMoreFilter(){ + if(!this.selectMoreFilter){ + this.selectMoreFilter = true; + } + else{ + this.selectMoreFilter = false; + } + } + + openModalSelectField(){ + ModalHelper.ShowModal(modalReportSelectColumn); + } + public openSelectStateU() { + if (!$('.checkboxesU').hasClass('checkboxesViewUser')) + $('.checkboxesU').addClass('checkboxesViewUser'); + else + $('.checkboxesU').removeClass('checkboxesViewUser'); + } +} \ No newline at end of file diff --git a/Step/wwwroot/src/app_modules/reports/components/card-report-alarms.vue b/Step/wwwroot/src/app_modules/reports/components/card-report-alarms.vue new file mode 100644 index 00000000..9d2b8ab5 --- /dev/null +++ b/Step/wwwroot/src/app_modules/reports/components/card-report-alarms.vue @@ -0,0 +1,155 @@ + + + \ No newline at end of file diff --git a/Step/wwwroot/src/app_modules/reports/components/card-report-events.ts b/Step/wwwroot/src/app_modules/reports/components/card-report-events.ts new file mode 100644 index 00000000..f2942b19 --- /dev/null +++ b/Step/wwwroot/src/app_modules/reports/components/card-report-events.ts @@ -0,0 +1,118 @@ +import Vue from "vue"; +import Component from "vue-class-component"; +import { cardReport } from "../../../modules/base-components/cards/index"; +import accordionDropdown from "../../../modules/base-components/accordion-dropdown.vue"; +import modalReportSelectColumn from "../../../modules/base-components/modal-report-select-column.vue"; +import { Accordion } from "src/modules/base-components"; +import { loginService } from "src/services"; +import DatePicker from "vue2-datepicker"; +import moment from "moment"; +import { ModalHelper } from "src/components/modals"; + +declare let $: any; +@Component({ components: { datePicker: DatePicker, cardReport: cardReport, accordionDropdown: accordionDropdown, accordion: Accordion } }) +export default class CardReportEvents extends Vue { + + lang = { + days: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'], + months: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], + pickers: ['next 7 days', 'next 30 days', 'previous 7 days', 'previous 30 days'], + placeholder: { + date: 'Select Date', + dateRange: 'Select Date Range' + } + } + + filter: { + interval?: Date[], + timelineMacro: Array, + multiUser: Array + } = { + timelineMacro: ["Eventi", "Allarmi", "Stato macchina", "Programmi"], + multiUser: [], + interval: [new Date(new Date().setDate(new Date().getDate() - 6)), new Date(new Date().setDate(new Date().getDate() + 1))] + }; + + + visibleColumns: string[] = ["ProgramName","Date","Deviation","Dimensions","EffectiveTime","Quality","Quantity","AverageTime","OperatorName","StartTime","TheoreticalTime","EndTime",]; + + isVisible(value){ + return this.visibleColumns.some(c => c == value); + } + + public selectedTab: string = "Production"; + selectDiagram: boolean = false; + selectMoreFilter: boolean = false; + selectTable: boolean = true; + users: Array = []; + selectedPage = 1; + paginationData: { firstDate: any, pages: number } = {firstDate: new Date(), pages: 6}; + + get paginator() { + + let min = Math.max(this.selectedPage - 4, 0); + let max = Math.min(this.selectedPage + 5, this.paginationData.pages); + + return { min: min, max: max, count: (max - min) } + + } + + get currentUser() { + return this.$store.state.currentUser; + } + + async mounted() { + this.users = await loginService.getAllUsers(); + this.users.unshift({ id: -1, username: this.$options.filters.localize("alarm_history_users_not_user", "Nessun utente") }); + this.filter.multiUser.push(this.currentUser.username); + } + + public selectTab(value) { + this.selectedTab = value; + } + timeformat() { + return (moment() as any)._locale._longDateFormat.LT; + } + + viewDiagram() { + if (!this.selectDiagram) { + this.selectDiagram = true; + this.selectTable = false; + } + console.log("Diagram active"); + } + + viewTable() { + if (!this.selectTable) { + this.selectDiagram = false; + this.selectTable = true; + } + console.log("Diagram active"); + } + + viewMoreFilter() { + if (!this.selectMoreFilter) { + this.selectMoreFilter = true; + } + else { + this.selectMoreFilter = false; + } + } + + async openModalSelectField() { + this.visibleColumns = await ModalHelper.ShowModalAsync(modalReportSelectColumn, this.visibleColumns); + + console.log(this.visibleColumns); + } + public openSelectStateU() { + if (!$('.checkboxesU').hasClass('checkboxesViewUser')) + $('.checkboxesU').addClass('checkboxesViewUser'); + else + $('.checkboxesU').removeClass('checkboxesViewUser'); + } + + public selectPage(page) { + debugger + this.selectedPage = Math.min(Math.max(page,1), this.paginationData.pages); + } +} diff --git a/Step/wwwroot/src/app_modules/reports/components/card-report-events.vue b/Step/wwwroot/src/app_modules/reports/components/card-report-events.vue new file mode 100644 index 00000000..485160ea --- /dev/null +++ b/Step/wwwroot/src/app_modules/reports/components/card-report-events.vue @@ -0,0 +1,146 @@ + + + \ No newline at end of file diff --git a/Step/wwwroot/src/app_modules/reports/components/card-report-machine-status.ts b/Step/wwwroot/src/app_modules/reports/components/card-report-machine-status.ts new file mode 100644 index 00000000..73564554 --- /dev/null +++ b/Step/wwwroot/src/app_modules/reports/components/card-report-machine-status.ts @@ -0,0 +1,219 @@ +import Vue from "vue"; +import Component from "vue-class-component"; +import { cardReport } from "../../../modules/base-components/cards/index"; +import accordionDropdown from "../../../modules/base-components/accordion-dropdown.vue"; +import modalReportSelectColumn from "../../../modules/base-components/modal-report-select-column.vue"; +import { Accordion } from "src/modules/base-components"; +import { loginService } from "src/services"; +import DatePicker from "vue2-datepicker"; +import moment from "moment"; +import { ModalHelper } from "src/components/modals"; + +declare let $: any; +@Component({ components: { datePicker: DatePicker, cardReport: cardReport, accordionDropdown: accordionDropdown, accordion: Accordion } }) +export default class CardReportMachineStatus extends Vue { + + lang = { + days: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'], + months: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], + pickers: ['next 7 days', 'next 30 days', 'previous 7 days', 'previous 30 days'], + placeholder: { + date: 'Select Date', + dateRange: 'Select Date Range' + } + } + + filter: { + interval?: Date[], + timelineMacro: Array, + multiUser: Array + } = { + timelineMacro: ["Eventi", "Allarmi", "Stato macchina", "Programmi"], + multiUser: [], + interval: [new Date(new Date().setDate(new Date().getDate() - 6)), new Date(new Date().setDate(new Date().getDate() + 1))] + }; + + + visibleColumns: string[] = ["ProgramName","Date","Deviation","Dimensions","EffectiveTime","Quality","Quantity","AverageTime","OperatorName","StartTime","TheoreticalTime","EndTime",]; + + isVisible(value){ + return this.visibleColumns.some(c => c == value); + } + + public selectedTab: string = "Production"; + selectDiagram: boolean = false; + selectMoreFilter: boolean = false; + selectTable: boolean = true; + users: Array = []; + selectedPage = 1; + paginationData: { firstDate: any, pages: number } = {firstDate: new Date(), pages: 6}; + + get paginator() { + + let min = Math.max(this.selectedPage - 4, 0); + let max = Math.min(this.selectedPage + 5, this.paginationData.pages); + + return { min: min, max: max, count: (max - min) } + + } + + get currentUser() { + return this.$store.state.currentUser; + } + + async mounted() { + this.users = await loginService.getAllUsers(); + this.users.unshift({ id: -1, username: this.$options.filters.localize("alarm_history_users_not_user", "Nessun utente") }); + this.filter.multiUser.push(this.currentUser.username); + } + + public selectTab(value) { + this.selectedTab = value; + } + timeformat() { + return (moment() as any)._locale._longDateFormat.LT; + } + + viewDiagram() { + if (!this.selectDiagram) { + this.selectDiagram = true; + this.selectTable = false; + } + console.log("Diagram active"); + } + + viewTable() { + if (!this.selectTable) { + this.selectDiagram = false; + this.selectTable = true; + } + console.log("Diagram active"); + } + + viewMoreFilter() { + if (!this.selectMoreFilter) { + this.selectMoreFilter = true; + } + else { + this.selectMoreFilter = false; + } + } + + async openModalSelectField() { + this.visibleColumns = await ModalHelper.ShowModalAsync(modalReportSelectColumn, this.visibleColumns); + + console.log(this.visibleColumns); + } + public openSelectStateU() { + if (!$('.checkboxesU').hasClass('checkboxesViewUser')) + $('.checkboxesU').addClass('checkboxesViewUser'); + else + $('.checkboxesU').removeClass('checkboxesViewUser'); + } + + public selectPage(page) { + debugger + this.selectedPage = Math.min(Math.max(page,1), this.paginationData.pages); + } +} + + + + + +/** versione zeplin non cancellare */ + +// import Vue from "vue"; +// import Component from "vue-class-component"; +// import {cardReport} from "../../../modules/base-components/cards/index"; +// import accordionDropdown from "../../../modules/base-components/accordion-dropdown.vue"; +// import modalReportSelectColumn from "../../../modules/base-components/modal-report-select-column.vue"; +// import { Accordion } from "src/modules/base-components"; +// import { loginService } from "src/services"; +// import DatePicker from "vue2-datepicker"; +// import moment from "moment"; +// import { ModalHelper } from "src/components/modals"; + +// declare let $: any; +// @Component({ components: { datePicker: DatePicker, cardReport: cardReport, accordionDropdown: accordionDropdown, accordion: Accordion } }) +// export default class CardReportMachineStatus extends Vue { + +// lang = { +// days: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'], +// months: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], +// pickers: ['next 7 days', 'next 30 days', 'previous 7 days', 'previous 30 days'], +// placeholder: { +// date: 'Select Date', +// dateRange: 'Select Date Range' +// } +// } + +// filter: { +// interval?: Date[], +// timelineMacro: Array, +// multiUser: Array +// } = { +// timelineMacro: ["Eventi","Allarmi","Stato macchina","Programmi"], +// multiUser: [], +// interval: [new Date(new Date().setDate(new Date().getDate() - 6)), new Date(new Date().setDate(new Date().getDate() + 1))] +// }; + + +// public selectedTab: string = "Production"; +// selectDiagram: boolean = false; +// selectMoreFilter: boolean = false; +// selectTable: boolean = true; +// users: Array = []; + +// get currentUser() { +// return this.$store.state.currentUser; +// } + +// async mounted() { +// this.users = await loginService.getAllUsers(); +// this.users.unshift({ id: -1, username: this.$options.filters.localize("alarm_history_users_not_user", "Nessun utente") }); +// this.filter.multiUser.push(this.currentUser.username); +// } + +// public selectTab(value){ +// this.selectedTab = value; +// } +// timeformat() { +// return (moment() as any)._locale._longDateFormat.LT; +// } + +// viewDiagram(){ +// if(!this.selectDiagram){ +// this.selectDiagram = true; +// this.selectTable = false; +// } +// console.log("Diagram active"); +// } + +// viewTable(){ +// if(!this.selectTable){ +// this.selectDiagram = false; +// this.selectTable = true; +// } +// console.log("Diagram active"); +// } + +// viewMoreFilter(){ +// if(!this.selectMoreFilter){ +// this.selectMoreFilter = true; +// } +// else{ +// this.selectMoreFilter = false; +// } +// } + +// openModalSelectField(){ +// ModalHelper.ShowModal(modalReportSelectColumn); +// } +// public openSelectStateU() { +// if (!$('.checkboxesU').hasClass('checkboxesViewUser')) +// $('.checkboxesU').addClass('checkboxesViewUser'); +// else +// $('.checkboxesU').removeClass('checkboxesViewUser'); +// } +// } \ No newline at end of file diff --git a/Step/wwwroot/src/app_modules/reports/components/card-report-machine-status.vue b/Step/wwwroot/src/app_modules/reports/components/card-report-machine-status.vue new file mode 100644 index 00000000..ea4da612 --- /dev/null +++ b/Step/wwwroot/src/app_modules/reports/components/card-report-machine-status.vue @@ -0,0 +1,188 @@ + + + \ No newline at end of file diff --git a/Step/wwwroot/src/app_modules/reports/components/card-report-production.ts b/Step/wwwroot/src/app_modules/reports/components/card-report-production.ts new file mode 100644 index 00000000..aab4a78c --- /dev/null +++ b/Step/wwwroot/src/app_modules/reports/components/card-report-production.ts @@ -0,0 +1,118 @@ +import Vue from "vue"; +import Component from "vue-class-component"; +import { cardReport } from "../../../modules/base-components/cards/index"; +import accordionDropdown from "../../../modules/base-components/accordion-dropdown.vue"; +import modalReportSelectColumn from "../../../modules/base-components/modal-report-select-column.vue"; +import { Accordion } from "src/modules/base-components"; +import { loginService } from "src/services"; +import DatePicker from "vue2-datepicker"; +import moment from "moment"; +import { ModalHelper } from "src/components/modals"; + +declare let $: any; +@Component({ components: { datePicker: DatePicker, cardReport: cardReport, accordionDropdown: accordionDropdown, accordion: Accordion } }) +export default class CardReportProduction extends Vue { + + lang = { + days: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'], + months: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], + pickers: ['next 7 days', 'next 30 days', 'previous 7 days', 'previous 30 days'], + placeholder: { + date: 'Select Date', + dateRange: 'Select Date Range' + } + } + + filter: { + interval?: Date[], + timelineMacro: Array, + multiUser: Array + } = { + timelineMacro: ["Eventi", "Allarmi", "Stato macchina", "Programmi"], + multiUser: [], + interval: [new Date(new Date().setDate(new Date().getDate() - 6)), new Date(new Date().setDate(new Date().getDate() + 1))] + }; + + + visibleColumns: string[] = ["ProgramName","Date","Deviation","Dimensions","EffectiveTime","Quality","Quantity","AverageTime","OperatorName","StartTime","TheoreticalTime","EndTime",]; + + isVisible(value){ + return this.visibleColumns.some(c => c == value); + } + + public selectedTab: string = "Production"; + selectDiagram: boolean = false; + selectMoreFilter: boolean = false; + selectTable: boolean = true; + users: Array = []; + selectedPage = 1; + paginationData: { firstDate: any, pages: number } = {firstDate: new Date(), pages: 6}; + + get paginator() { + + let min = Math.max(this.selectedPage - 4, 0); + let max = Math.min(this.selectedPage + 5, this.paginationData.pages); + + return { min: min, max: max, count: (max - min) } + + } + + get currentUser() { + return this.$store.state.currentUser; + } + + async mounted() { + this.users = await loginService.getAllUsers(); + this.users.unshift({ id: -1, username: this.$options.filters.localize("alarm_history_users_not_user", "Nessun utente") }); + this.filter.multiUser.push(this.currentUser.username); + } + + public selectTab(value) { + this.selectedTab = value; + } + timeformat() { + return (moment() as any)._locale._longDateFormat.LT; + } + + viewDiagram() { + if (!this.selectDiagram) { + this.selectDiagram = true; + this.selectTable = false; + } + console.log("Diagram active"); + } + + viewTable() { + if (!this.selectTable) { + this.selectDiagram = false; + this.selectTable = true; + } + console.log("Diagram active"); + } + + viewMoreFilter() { + if (!this.selectMoreFilter) { + this.selectMoreFilter = true; + } + else { + this.selectMoreFilter = false; + } + } + + async openModalSelectField() { + this.visibleColumns = await ModalHelper.ShowModalAsync(modalReportSelectColumn, this.visibleColumns); + + console.log(this.visibleColumns); + } + public openSelectStateU() { + if (!$('.checkboxesU').hasClass('checkboxesViewUser')) + $('.checkboxesU').addClass('checkboxesViewUser'); + else + $('.checkboxesU').removeClass('checkboxesViewUser'); + } + + public selectPage(page) { + debugger + this.selectedPage = Math.min(Math.max(page,1), this.paginationData.pages); + } +} diff --git a/Step/wwwroot/src/app_modules/reports/components/card-report-production.vue b/Step/wwwroot/src/app_modules/reports/components/card-report-production.vue new file mode 100644 index 00000000..7e96849c --- /dev/null +++ b/Step/wwwroot/src/app_modules/reports/components/card-report-production.vue @@ -0,0 +1,146 @@ + + + diff --git a/Step/wwwroot/src/app_modules/reports/components/card-report-timeline.ts b/Step/wwwroot/src/app_modules/reports/components/card-report-timeline.ts new file mode 100644 index 00000000..4340ca78 --- /dev/null +++ b/Step/wwwroot/src/app_modules/reports/components/card-report-timeline.ts @@ -0,0 +1,47 @@ +import Vue from "vue"; +import Component from "vue-class-component"; +import { cardReport } from "../../../modules/base-components/cards/index"; +import accordionDropdown from "../../../modules/base-components/accordion-dropdown.vue"; +import modalReportSelectColumn from "../../../modules/base-components/modal-report-select-column.vue"; +import { Accordion } from "src/modules/base-components"; +import { loginService } from "src/services"; +import DatePicker from "vue2-datepicker"; +import moment from "moment"; +import { ModalHelper } from "src/components/modals"; + +declare let $: any; +@Component({ components: { datePicker: DatePicker, cardReport: cardReport, accordionDropdown: accordionDropdown } }) +export default class CardReportTimeline extends Vue { + + lang = { + days: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'], + months: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], + pickers: ['next 7 days', 'next 30 days', 'previous 7 days', 'previous 30 days'], + placeholder: { + date: 'Select Date', + dateRange: 'Select Date Range' + } + } + + filter: { + interval?: Date[], + timelineMacro: Array, + } = { + timelineMacro: ["Eventi", "Allarmi", "Stato macchina", "Programmi"], + interval: [new Date(new Date().setDate(new Date().getDate() - 6)), new Date(new Date().setDate(new Date().getDate() + 1))] + }; + + + + isVisible(value){ + return this.filter.timelineMacro.some(c => c == value); + } + + public openSelectState() { + if (!$('.checkboxes').hasClass('checkboxesView')) + $('.checkboxes').addClass('checkboxesView'); + else + $('.checkboxes').removeClass('checkboxesView'); + } + +} diff --git a/Step/wwwroot/src/app_modules/reports/components/card-report-timeline.vue b/Step/wwwroot/src/app_modules/reports/components/card-report-timeline.vue new file mode 100644 index 00000000..00f88a78 --- /dev/null +++ b/Step/wwwroot/src/app_modules/reports/components/card-report-timeline.vue @@ -0,0 +1,152 @@ + + + \ No newline at end of file diff --git a/Step/wwwroot/src/app_modules/reports/components/reports.ts b/Step/wwwroot/src/app_modules/reports/components/reports.ts index e1da5ca9..893ac18b 100644 --- a/Step/wwwroot/src/app_modules/reports/components/reports.ts +++ b/Step/wwwroot/src/app_modules/reports/components/reports.ts @@ -8,8 +8,17 @@ import DatePicker from "vue2-datepicker"; import moment from "moment"; import { ModalHelper } from "src/components/modals"; +import cardReportProduction from "src/app_modules/reports/components/card-report-production.vue"; +import cardReportEvents from "src/app_modules/reports/components/card-report-events.vue"; +import cardReportAlarms from "src/app_modules/reports/components/card-report-alarms.vue"; +import cardReportMachineStatus from "src/app_modules/reports/components/card-report-machine-status.vue"; +import cardReportTimeline from "src/app_modules/reports/components/card-report-timeline.vue"; + declare let $: any; -@Component({ components: { datePicker: DatePicker, cardReport: cardReport, accordionDropdown: accordionDropdown, accordion: Accordion } }) +@Component({ components: { datePicker: DatePicker, cardReport: cardReport, + accordionDropdown: accordionDropdown, accordion: Accordion, cardReportProduction: cardReportProduction, + cardReportEvents: cardReportEvents, cardReportAlarms: cardReportAlarms, cardReportMachineStatus: cardReportMachineStatus, + cardReportTimeline: cardReportTimeline } }) export default class Reports extends Vue { lang = { diff --git a/Step/wwwroot/src/app_modules/reports/components/reports.vue b/Step/wwwroot/src/app_modules/reports/components/reports.vue index 74d7b5cf..e6ceeb95 100644 --- a/Step/wwwroot/src/app_modules/reports/components/reports.vue +++ b/Step/wwwroot/src/app_modules/reports/components/reports.vue @@ -9,9 +9,9 @@ - @@ -20,519 +20,17 @@
-
-
-
- - -
-
- - -
-
- - -
-
- - -
-
-
- -
- - -
-
-
- - -
-
- - -
-
- - -
-
-
-
-
- - -
-
- -
- - -
-
-
- - -
-
- - -
-
- - -
-
- -
-
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
{{'reports_table_program_name' | localize("Nome programma")}}{{'reports_table_dimensions' | localize("Dimensioni")}}{{'reports_table_quantity' | localize("Quantity")}}{{'reports_table_start_now' | localize("Ora inizio")}}{{'reports_table_end_time' | localize("Ora fine")}}{{'reports_table_date' | localize("Data")}}{{'reports_table_effective_time' | localize("T effettivo")}}{{'reports_table_average_time' | localize("T medio")}}{{'reports_table_theoretical_time' | localize("T teorico")}}{{'reports_table_deviation' | localize("Scostamento")}}{{'reports_table_quality' | localize("Qualità")}}{{'reports_table_operator_name' | localize("Nome operatore")}}{{'reports_table_shift' | localize("Turno")}}
Finestra02.pgmX: 1210; Y:900; Z: 63111:25:0013:10:0012/04/201701:45:0001:25:0001:20:00+00:20:00BuonoNome utente1°
Finestra02.pgmX: 1210; Y:900; Z: 63111:25:0013:10:0012/04/201701:45:0001:25:0001:20:00+00:20:00BuonoNome utente1°
Finestra02.pgmX: 1210; Y:900; Z: 63111:25:0013:10:0012/04/201701:45:0001:25:0001:20:00+00:20:00BuonoNome utente1°
Finestra02.pgmX: 1210; Y:900; Z: 63111:25:0013:10:0012/04/201701:45:0001:25:0001:20:00+00:20:00BuonoNome utente1°
Finestra02.pgmX: 1210; Y:900; Z: 63111:25:0013:10:0012/04/201701:45:0001:25:0001:20:00+00:20:00BuonoNome utente1°
Finestra02.pgmX: 1210; Y:900; Z: 63111:25:0013:10:0012/04/201701:45:0001:25:0001:20:00+00:20:00BuonoNome utente1°
Finestra02.pgmX: 1210; Y:900; Z: 63111:25:0013:10:0012/04/201701:45:0001:25:0001:20:00+00:20:00BuonoNome utente1°
Finestra02.pgmX: 1210; Y:900; Z: 63111:25:0013:10:0012/04/201701:45:0001:25:0001:20:00+00:20:00BuonoNome utente1°
Finestra02.pgmX: 1210; Y:900; Z: 63111:25:0013:10:0012/04/201701:45:0001:25:0001:20:00+00:20:00BuonoNome utente1°
Finestra02.pgmX: 1210; Y:900; Z: 63111:25:0013:10:0012/04/201701:45:0001:25:0001:20:00+00:20:00BuonoNome utente1°
Finestra02.pgmX: 1210; Y:900; Z: 63111:25:0013:10:0012/04/201701:45:0001:25:0001:20:00+00:20:00BuonoNome utente1°
Finestra02.pgmX: 1210; Y:900; Z: 63111:25:0013:10:0012/04/201701:45:0001:25:0001:20:00+00:20:00BuonoNome utente1°
Finestra02.pgmX: 1210; Y:900; Z: 63111:25:0013:10:0012/04/201701:45:0001:25:0001:20:00+00:20:00BuonoNome utente1°
Finestra02.pgmX: 1210; Y:900; Z: 63111:25:0013:10:0012/04/201701:45:0001:25:0001:20:00+00:20:00BuonoNome utente1°
Finestra02.pgmX: 1210; Y:900; Z: 63111:25:0013:10:0012/04/201701:45:0001:25:0001:20:00+00:20:00BuonoNome utente1°
-
-
-
-
-
-
- - -
-
- - -
-
-
- - - - -
- - 10.000 -
- - -
- - 4 -
- -
-
+
-
-
-
- - -
-
- -
- - -
-
-
- - -
-
- - -
-
- - -
-
- -
-
-
- Events -
-
-
-
-
- - -
-
- - -
-
-
- - - - -
- - 10.000 -
- - -
- - 4 -
- -
-
-
-
-
-
-
- - -
- -
- -
- - -
-
-
- - -
-
- - -
-
- - -
-
- -
-
-
- Alarms -
-
-
-
-
- - -
-
- - -
-
-
- - - - -
- - 10.000 -
- - -
- - 4 -
- -
-
+
+
-
+ +
-
+ +
@@ -771,7 +267,7 @@
-
+
-->
diff --git a/Step/wwwroot/src/modules/base-components/modal-report-select-column.ts b/Step/wwwroot/src/modules/base-components/modal-report-select-column.ts index 55f9bc16..dbe2589c 100644 --- a/Step/wwwroot/src/modules/base-components/modal-report-select-column.ts +++ b/Step/wwwroot/src/modules/base-components/modal-report-select-column.ts @@ -2,6 +2,8 @@ import Vue from "vue"; import Component from "vue-class-component"; import { ModalHelper,Modal } from "src/components/modals"; import { Factory, MessageService } from "src/_base"; +import { Watch, Prop } from "vue-property-decorator"; +import { Deferred } from "src/services"; declare var cmsClient: any; @@ -13,9 +15,66 @@ declare var cmsClient: any; export default class ModalReportSelectColumn extends Vue { + // gestisce la risposta + @Prop() + deferred: Deferred; + + // gestisce il parametro in ingresso + @Prop() + value: any[]; + + maxRow: number = 3; + + checkboxes: Array = [{id: "ProgramName", label: this.$options.filters.localize("modal_report_select_column_program_name", "Nome programma")}, + {id: "Date", label: this.$options.filters.localize("modal_report_select_column_date", "Data")}, + {id: "Deviation", label: this.$options.filters.localize("modal_report_select_column_deviation", "Scostamento")}, + {id: "Dimensions", label: this.$options.filters.localize("modal_report_select_column_dimensions", "Dimensioni")}, + {id: "EffectiveTime", label: this.$options.filters.localize("modal_report_select_column_effective_time", "Tempo effettivo")}, + {id: "Quality", label: this.$options.filters.localize("modal_report_select_column_quality", "Qualità")}, + {id: "Quantity", label: this.$options.filters.localize("modal_report_select_column_quantity", "Quantità")}, + {id: "AverageTime", label: this.$options.filters.localize("modal_report_select_column_average_time", "Tempo medio")}, + {id: "OperatorName", label: this.$options.filters.localize("modal_report_select_column_operator_name", "Nome operatore")}, + {id: "StartTime", label: this.$options.filters.localize("modal_report_select_column_start_time", "Ora inizio")}, + {id: "TheoreticalTime", label: this.$options.filters.localize("modal_report_select_column_theoretical_time", "Tempo teorico")}, + // {id: "Shift", label: this.$options.filters.localize("modal_report_select_column_shift", "Turno")}, + {id: "EndTime", label: this.$options.filters.localize("modal_report_select_column_end_time", "Ora fine")}]; + + allSelectedColumn = false; + columnSelected = []; + + @Watch("value") + initializeSelectedcolums(){ + this.columnSelected.splice(0, this.columnSelected.length); + + this.value.forEach(element => { + this.columnSelected.push(element); + }); + } + + mounted() { + this.initializeSelectedcolums(); + } + + selectAll() { + this.columnSelected = []; + + if (!this.allSelectedColumn) { + for (let checkbox in this.checkboxes) { + this.columnSelected.push(this.checkboxes[checkbox].id); + } + } + } + close() { Factory.Get(MessageService).deleteChannel("esc_pressed"); ModalHelper.HideModal(); + this.deferred.resolve(this.value); + } + + confirm(){ + Factory.Get(MessageService).deleteChannel("esc_pressed"); + ModalHelper.HideModal(); + this.deferred.resolve(this.columnSelected); } } diff --git a/Step/wwwroot/src/modules/base-components/modal-report-select-column.vue b/Step/wwwroot/src/modules/base-components/modal-report-select-column.vue index 887fc887..a8fce786 100644 --- a/Step/wwwroot/src/modules/base-components/modal-report-select-column.vue +++ b/Step/wwwroot/src/modules/base-components/modal-report-select-column.vue @@ -5,119 +5,27 @@
- +
-
-
+
+
- - + +
- -
-
-
- - -
- -
-
-
- - -
- -
-
-
-
-
- - -
- -
-
-
- - -
- -
-
-
- - -
- -
-
-
-
-
- - -
- -
-
-
- - -
- -
-
-
- - -
- -
-
-
-
-
- - -
- -
-
-
- - -
- -
-
-
- - -
- -
-
-
-
-
- - -
- +
- - + +
- \ No newline at end of file +