From 7c0816dfc3a7e22d69f4ef76872c76e4bc965e4d Mon Sep 17 00:00:00 2001 From: Giacomo Canonico Date: Thu, 14 Mar 2019 13:04:09 +0100 Subject: [PATCH] timeline chart --- Step/Step.csproj | 10 +- Step/packages.config | 2 + Step/wwwroot/assets/styles/base/card.less | 9193 +++++++++-------- Step/wwwroot/assets/styles/base/layout.less | 3 +- Step/wwwroot/assets/styles/base/tooltip.less | 116 + Step/wwwroot/assets/styles/style.css | 385 +- Step/wwwroot/package.json | 125 +- Step/wwwroot/src/@types/report.cs.d.ts | 75 +- .../components/card-report-timeline.ts | 241 +- .../components/card-report-timeline.vue | 322 +- .../src/components/timeline-chart/index.js | 7 + .../timeline-chart/timeline-chart-header.ts | 228 + .../timeline-chart/timeline-chart-header.vue | 32 + .../timeline-chart/timeline-chart-row.ts | 91 + .../timeline-chart/timeline-chart-row.vue | 18 + Step/wwwroot/src/main.js | 75 +- .../base-components/accordion-dropdown.vue | 6 +- Step/wwwroot/src/services/reportService.ts | 11 +- Step/wwwroot/src/store/report.store.ts | 13 +- 19 files changed, 6465 insertions(+), 4488 deletions(-) create mode 100644 Step/wwwroot/assets/styles/base/tooltip.less create mode 100644 Step/wwwroot/src/components/timeline-chart/index.js create mode 100644 Step/wwwroot/src/components/timeline-chart/timeline-chart-header.ts create mode 100644 Step/wwwroot/src/components/timeline-chart/timeline-chart-header.vue create mode 100644 Step/wwwroot/src/components/timeline-chart/timeline-chart-row.ts create mode 100644 Step/wwwroot/src/components/timeline-chart/timeline-chart-row.vue diff --git a/Step/Step.csproj b/Step/Step.csproj index 6351b561..30e6bc53 100644 --- a/Step/Step.csproj +++ b/Step/Step.csproj @@ -110,6 +110,12 @@ + + ..\packages\System.Security.Claims.4.0.1\lib\net46\System.Security.Claims.dll + + + ..\packages\System.Security.Principal.Windows.4.0.0\lib\net46\System.Security.Principal.Windows.dll + ..\packages\Microsoft.AspNet.Cors.5.2.3\lib\net45\System.Web.Cors.dll @@ -197,7 +203,9 @@ - + + Designer + App.config diff --git a/Step/packages.config b/Step/packages.config index df6ee823..3575e940 100644 --- a/Step/packages.config +++ b/Step/packages.config @@ -31,5 +31,7 @@ + + \ No newline at end of file diff --git a/Step/wwwroot/assets/styles/base/card.less b/Step/wwwroot/assets/styles/base/card.less index 980deb2a..55893e2a 100644 --- a/Step/wwwroot/assets/styles/base/card.less +++ b/Step/wwwroot/assets/styles/base/card.less @@ -1,133 +1,146 @@ // out: false, sourceMap: false, main: ../style.less @import "colors.less"; -.card{ +.card { + width: 288px; + height: 216px; + background-color: @color-background-white; + border-radius: 2px; + box-shadow: 0 1px 2px 0 @color-black-40; + margin: 8px; + cursor: pointer; + position: relative; + + >header { width: 288px; - height: 216px; - background-color: @color-background-white; + height: 64px; border-radius: 2px; - box-shadow: 0 1px 2px 0 @color-black-40; - margin:8px; - cursor: pointer; - position: relative; - >header{ - width: 288px; - height: 64px; - border-radius: 2px; - background-color: @color-white2; - span{ - font-size: 18px; - float: left; - color: @color-darkish-blue; - margin-top: 22px; - margin-left: 24px; - } - button{ - float: right; - margin: 8px 8px 8px; - width: 48px; - height: 48px; - // border: none; - // border-radius: 2px; - // background-image: linear-gradient(to bottom,@color-white2,@color-silver); - // box-shadow: 0 0 3px 0 @color-black-50; - color: @color-darkish-blue; - padding: 0; - .fa{ - height: 22px; - font-size: 24px; - width: 25px; - } - } + background-color: @color-white2; + + span { + font-size: 18px; + float: left; + color: @color-darkish-blue; + margin-top: 22px; + margin-left: 24px; } - >i{ - color: #002680; - position: absolute; - bottom: 0px; - right: 9px; - font-size: 74px; - } - >section{ - height: calc(~'100% - 64px'); - display: flex; - justify-content: center; - align-items: center; + + button { + float: right; + margin: 8px 8px 8px; + width: 48px; + height: 48px; + // border: none; + // border-radius: 2px; + // background-image: linear-gradient(to bottom,@color-white2,@color-silver); + // box-shadow: 0 0 3px 0 @color-black-50; + color: @color-darkish-blue; + padding: 0; + + .fa { + height: 22px; + font-size: 24px; + width: 25px; + } } + } + + >i { + color: #002680; + position: absolute; + bottom: 0px; + right: 9px; + font-size: 74px; + } + + >section { + height: calc(~'100% - 64px'); + display: flex; + justify-content: center; + align-items: center; + } } -.detail-card{ +.detail-card { width: 288px; height: 216px; background-color: @color-background-white; border-radius: 2px; box-shadow: 0 1px 2px 0 @color-black-40; margin-right: 32px; - header{ - width: 288px; - height: 64px; - border-radius: 2px; - background-color: @color-white2; - border-bottom: 2px solid @color-background-white; - .title{ - width: 64px; - height: 100%; - display: flex; - align-items: center; - justify-content: center; - font-size: 18px; - font-weight: 600; - float: left; - color: @color-greyish-brown; - border-right: 2px solid @color-background-white; - position: relative; - overflow: hidden; - img{ - height: 45px; - } - &.disabled::after{ - content: "|"; - position: absolute; - width: 100%; - height: 64px; - top: 0; - left: 0; - right: 0; - bottom: 0; - display: block; - line-height: 64px; - text-align: center; - font-size: 22px; - transform: rotate(-46deg)scaleY(5); - overflow: hidden; - color: #ff4d63; - } - } - button{ - float: right; - margin: 8px 8px 8px; - width: 48px; - height: 48px; - color: @color-darkish-blue; - padding: 0; - .fa{ - height: 22px; - font-size: 24px; - width: 25px; - } - } - } - section{ - height: calc(~'100% - 66px'); - width: 100%; + + header { + width: 288px; + height: 64px; + border-radius: 2px; + background-color: @color-white2; + border-bottom: 2px solid @color-background-white; + + .title { + width: 64px; + height: 100%; display: flex; align-items: center; justify-content: center; - background-color: @color-white2; + font-size: 18px; + font-weight: 600; + float: left; + color: @color-greyish-brown; + border-right: 2px solid @color-background-white; + position: relative; + overflow: hidden; + + img { + height: 45px; + } + + &.disabled::after { + content: "|"; + position: absolute; + width: 100%; + height: 64px; + top: 0; + left: 0; + right: 0; + bottom: 0; + display: block; + line-height: 64px; + text-align: center; + font-size: 22px; + transform: rotate(-46deg)scaleY(5); + overflow: hidden; + color: #ff4d63; + } + } + + button { + float: right; + margin: 8px 8px 8px; + width: 48px; + height: 48px; + color: @color-darkish-blue; + padding: 0; + + .fa { + height: 22px; + font-size: 24px; + width: 25px; + } + } + } + + section { + height: calc(~'100% - 66px'); + width: 100%; + display: flex; + align-items: center; + justify-content: center; + background-color: @color-white2; } } -.equipment{ +.equipment { width: 360px; height: 64px; background-color: @color-background-white; @@ -140,55 +153,59 @@ justify-items: center; font-size: 18px; line-height: 1.11; - color:@color-greyish-brown; + color: @color-greyish-brown; margin-bottom: 4px; cursor: pointer; - &.selected{ + &.selected { background-color: rgba(23, 145, 255, 0.75); color: #fff; - .image{ - background-color: #FFF; + + .image { + background-color: #FFF; } - .text-body-position{ - color: #fff; + .text-body-position { + color: #fff; } } - .image{ - display: flex; - align-items: center; - justify-content: center; - margin-top: 8px; - margin-left: 14px; + .image { + display: flex; + align-items: center; + justify-content: center; + margin-top: 8px; + margin-left: 14px; + width: 48px; + height: 48px; + background-color: #DDD; + + img { width: 48px; height: 48px; - background-color: #DDD; - img{ - width: 48px; - height: 48px; - } + } } - .text-body{ - text-align: left; - width:100%; - margin-top: 11px; - margin-left: 14px; + + .text-body { + text-align: left; + width: 100%; + margin-top: 11px; + margin-left: 14px; } - .text-body-position{ - margin-top: 24px; - width: 120px; - height: 20px; - font-size: 16px; - text-align: left; - color: @color-clear-blue; + + .text-body-position { + margin-top: 24px; + width: 120px; + height: 20px; + font-size: 16px; + text-align: left; + color: @color-clear-blue; } } -.input-box{ +.input-box { width: 100%; height: 80px; border-radius: 2px; @@ -196,49 +213,55 @@ flex-flow: row; background-color: @color-background-white; box-shadow: 0 1px 1px 0 @color-black-50; - .title{ + + .title { + font-size: 18px; + line-height: 1.11; + color: @color-greyish-brown; + height: 100%; + display: flex; + align-items: center; + margin-left: 15px; + } + + .control { + height: 100%; + display: flex; + margin-right: 16px; + align-items: center; + margin-left: auto; + + input, + select { + width: 294px; + height: 48px; font-size: 18px; line-height: 1.11; color: @color-greyish-brown; - height: 100%; - display: flex; - align-items: center; - margin-left: 15px; - } - .control{ - height: 100%; - display: flex; - margin-right: 16px; - align-items: center; - margin-left: auto; - input,select{ - width: 294px; - height: 48px; - font-size: 18px; - line-height: 1.11; - color: @color-greyish-brown; - padding: 0 5px; - box-sizing: border-box; - border: solid 1px #ccc; + padding: 0 5px; + box-sizing: border-box; + border: solid 1px #ccc; - &[type=number]{ - text-align: right; - width: 144px; - } - } - input:read-only{ - border: solid 1px transparent; - } - select:disabled{ - border: solid 1px transparent; - -webkit-appearance: menulist-text; - -moz-appearance: menulist-text; + &[type=number] { + text-align: right; + width: 144px; } + } + + input:read-only { + border: solid 1px transparent; + } + + select:disabled { + border: solid 1px transparent; + -webkit-appearance: menulist-text; + -moz-appearance: menulist-text; + } } } -.load-equipment{ +.load-equipment { width: 495px; height: 64px; border-radius: 2px; @@ -248,4122 +271,4990 @@ flex-flow: row; font-size: 18px; line-height: 1.11; - color:@color-greyish-brown; - .image{ - display: flex; - align-items: center; - justify-content: center; - margin-left: 16px; - margin-right: 15px; - } - .text-body{ - display: flex; - align-items: center; - justify-content: center; - } - .arrow{ - display: flex; - align-items: center; - justify-content: center; - margin-left: auto; - margin-right: 20px; - .fa-arrow-up, .fa-arrow-down{ - font-size: 24px; - } - .fa-arrow-up{ - color: #54AEFF; - } - .fa-arrow-down{ - color: #DC4557; - } - } -} + color: @color-greyish-brown; - - -.card-utilities{ - width: 288px; - height: 216px; - border-radius: 2px; - background-color: @color-white2; - box-shadow: 0 1px 2px 0 @color-black-40; - cursor: pointer; - .card-utilities-header{ - height: 64px; - width: 100%; - border-bottom: solid 2px @color-white; - display: flex; - align-items: center; - justify-content: center; - font-size: 18px; - color: @color-darkish-blue; - } - .card-utilities-body{ - height: calc(~'100% - 66px'); - width: 100%; - display: flex; - align-items: center; - justify-content: center; - button{ - width: 272px; - height: 136px; - display: flex; - align-items: center; - justify-content: center; - background: @color-white2; - } - .card-utilities-body-label{ - width: 104px; - height: 104px; - display: flex; - align-items: center; - justify-content: center; - background-color: @color-background-white; - font-size: 48px; - font-weight: 600; - color: @color-darkish-blue; - } - } -} - - -.card-assisted-tooling{ - width: 256px; - height: 249px; - background-color: @color-background-white; - box-shadow: 0 1px 2px 0 @color-black-40; - .card-assisted-tooling-body{ - height: 233px; - display: flex; - flex-flow: column; - align-items: center; - div.icon .fa-arrow-up{ - margin-top: 28px; - font-size: 25px; - color: @color-clear-blue; - } - div.icon .fa-arrow-down{ - margin-top: 28px; - font-size: 25px; - color: red; - } - .image{ - margin-top: 11px; - img{ - width: 108px; - &.anim_up{ - animation: scroll_up 3s infinite; - } - &.anim_dw{ - animation: scroll_dw 3s infinite; - } - @keyframes scroll_dw{ - 0%{ - transform: translateY(-108px); - } - 30%{ - transform: translateY(0px); - } - 70%{ - transform: translateY(0px); - } - 100%{ - transform: translateY(108px); - } - - } - - @keyframes scroll_up{ - 0%{ - transform: translateY(108px); - } - 30%{ - transform: translateY(0px); - } - 70%{ - transform: translateY(0px); - } - 100%{ - transform: translateY(-108px); - } - - } - } - overflow: hidden; - } - .text{ - font-size: 18px; - line-height: 1.11; - color: @color-greyish-brown; - text-align: center; - } - } - .card-assisted-tooling-footer{ - height: 16px; - background-color: @color-darkish-blue; - } -} - - - -.card-tool-depot{ - width: 272px; - height: 136px; + .image { display: flex; - flex-flow: column; - background-color: @color-white2; - box-shadow: 0 1px 2px 0 @color-black-40; - z-index: 1; - - .card-tool-depot-body{ - width: 100%; - height: 100%; - display: flex; - flex-flow: row; - .card-tool-depot-image{ - position: relative; - margin-top: 20px; - margin-left: 10px; - img{ - max-width: 104px; - max-height: 104px; - cursor: pointer; - } - i{ - position: absolute; - right: 0; - bottom: 10px; - font-size: 28px; - cursor: pointer; - } - i.fa{ - color: @color-darkish-blue; - } - } - .card-tool-depot-title{ - display: flex; - height: 100%; - min-width: calc(~'100% - 164px'); - flex-flow: column; - justify-content: center; - margin-left: 20px; - font-size: 18px; - line-height: 1.11; - color: @color-greyish-brown; - overflow: hidden; - ul{ - margin-top: 10px; - -webkit-padding-start: 17px; - font-size: 15px; - line-height: 19px; - white-space: nowrap; - } - } - .card-tool-depot-remove{ - width: 100%; - margin-top: 8px; - margin-right: 8px; - margin-left: auto; - display: flex; - font-size: 24px; - color: @color-darkish-blue; - .btn{ - height: 48px; - width: 48px; - font-size: 24px; - margin: 0 -26px; - padding: 0; - } - } - } -} - -.card-maintenance-wizard{ - width: 408px; - height: 64px; - border-radius: 2px; - background-color: @color-background-white; - box-shadow: 0 1px 2px 0 @color-black-40; - .card-maintenance-wizard-body{ - height: 100%; - display: flex; - flex-flow: row; - align-items: center; - .card-maintenance-wizard-image{ - margin-left: 20px; - img{ - width: 28px !important; - height: 28px !important; - } - } - .card-maintenance-wizard-title{ - height: 100%; - display: flex; - flex-flow: column; - justify-content: center; - div.wizard{ - font-size: 18px; - font-weight: 600; - line-height: 1; - color: @color-cyan-blue; - margin-left: 20px; - } - div{ - font-size: 14px; - line-height: 1.29; - color: @color-cyan-blue; - margin-left: 20px; - } - } - .card-maintenance-wizard-start{ - margin-left: auto; - margin-right: 0; - button div{ - font-size: 18px; - color: @color-cyan-blue; - } - } - } -} - -.softkeys-prefered{ - width: 480px; - min-height: 64px; - display: flex; - flex-flow: row; align-items: center; - background-color: @color-white3; - position: relative; - cursor: pointer; - - &.active{ - box-shadow: inset 0px 0px 0px 3px #1791ff; - } - .star{ - height: 100%; - display: flex; - align-items: center; - margin-left: 16px; - } - .title{ - font-size: 14px; - line-height: 1.43; - color: @color-darkish-blue; - height: 100%; - display: flex; - align-items: center; - margin-left: 14px; - } - .control{ - height: 100%; - display: flex; - margin-right: 16px; - align-items: center; - margin-left: auto; - input,select{ - width: 294px; - height: 48px; - font-size: 18px; - line-height: 1.11; - color: @color-greyish-brown; - padding: 0 5px; - box-sizing: border-box; - border: solid 1px #ccc; - - &[type=number]{ - text-align: right; - width: 144px; - } - } - - input:read-only{ - border: solid 1px transparent; - } - select:disabled{ - border: solid 1px transparent; - -webkit-appearance: menulist-text; - -moz-appearance: menulist-text; - } - .togglebutton{ - label{ - span.toggle{ - width: 92px; - height: 31px; - line-height: 31px; - font-size: 13px; - } - } - } - .togglebutton label .toggle:after { - width: 29px; - height: 29px; - border-radius: 27px; - top: 1px; - } - .togglebutton label input[type=checkbox]:checked+.toggle:after { - left: 48px; - } - .togglebutton label input[type=checkbox]:checked + .toggle:after{ - width: 29px; - height: 29px; - border-radius: 27px; - left: 62px; - } - .multiple{ - display: flex; - flex-flow: row wrap; - border-left: 1px solid @color-label-grey; - width: 144px; - margin-top: -1px; - height: 46px; - overflow-x: visible; - cursor: pointer; - &:active { - background-color: @color-silver; - color: @color-white; - border-color: #fff; - } - &:active span { - background-color: @color-silver; - color: @color-white; - border-color: #fff; - } - span { - display: flex; - background: transparent; - color: @color-label-grey; - flex-grow: 1; - min-width: 48px; - min-height: 22px; - margin-top: -1px; - margin-left: -1px; - box-sizing: border-box; - border: 0.5px solid @color-label-grey; - align-items: center; - position: relative; - justify-content: center; - &.active { - background-color: #1791ff; - color: @color-white; - } - &.empty{ - background: transparent; - } - } - } - .button{ - .fa{ - font-size: 32px; - color: @color-darkish-blue; - } - } - // .pushbutton{ - // width: 144px; - // height: 48px; - - // .key{ - // display: flex; - // align-items: center; - // justify-content: center; - // visibility: visible; - // width: 42px; - // height: 22px; - // padding: 0; - // border: solid 1px @color-label-grey; - // cursor: pointer; - // } - // } - } + justify-content: center; + margin-left: 16px; + margin-right: 15px; } - .card-axes-production{ - height: 558px; - width: 232px; - border-radius: 2px; - box-shadow: 0 1px 2px 0 @color-black-40; - background-color: @color-background-white; - display: flex; - flex-flow: column; - .first-box-axes, .second-box-axes{ - height: 264px; - width: 100%; - display: flex; - flex-flow: column; - overflow: auto; - .axes{ - min-height: 32px; - width: 100%; - display: flex; - flex-flow: row; - align-items: center; - justify-content: space-between; - margin-top: 8px; - - &._7{ - min-height: 26px; - } - &._8{ - min-height: 22px; - } - &._9{ - min-height: 18px; - } - - .variable{ - font-size: 48px; - width: 75px; - line-height: 0; - font-weight: bold; - color: @color-greyish-brown; - text-align: right; - - &._7{ - font-size: 42px; - } - &._8{ - font-size: 36px; - } - &._9{ - font-size: 29px; - } - &.more9{ - width: 69px; - } - } - .number{ - width: 135px; - height: 32px; - border-radius: 2px; - display: flex; - justify-content: flex-end; - align-items: center; - margin-right: 8px; - color: @color-greyish-brown; - padding-right: 8px; - font-size: 20px; - - &._7{ - height: 26px; - } - &._8{ - height: 22px; - } - &._9{ - height: 18px; - font-size: 18px; - } - &.more9{ - margin-right: 5px; - } - } - .umeasure{ - width: 32px; - margin-left: 5px; - text-align: left; - } - } - .axes:nth-child(odd) .number{ - background-color: @color-white4; - } - .axes:nth-child(even) .number{ - background-color: @color-clear-blue-30; - } - .axes:first-child{ - margin-top: 16px; - } - .axes:last-child{ - margin-bottom: 16px; - } - } - .second-box-axes{ - width: 100%; - height: 294px; - .tabs{ - min-height: 30px; - width:100%; - background-color: @color-whitethree; - display: flex; - flex-direction: row; - button{ - visibility: hidden; - border: none; - } - .tab{ - visibility: visible; - width: 77px; - border-right: solid 1px @color-label-grey; - &.active{ - background-color: @color-white; - border-top: solid 2px @color-clear-blue !important; - } - } - .tab:last-child{ - border: none; - } - } - .content-box{ - height: calc(~'100% - 30px'); - width: 100%; - display: flex; - flex-flow: column; - overflow: auto; - } - } - } - - .card-folder-path{ - width: auto; - height: 64px; - display: flex; - align-items: center; - flex-flow: row; - border-radius: 2px; - box-shadow: 0 1px 2px 0 @color-black-40; - background-color: @color-background-white; - margin: 4px 0 4px 5px; - cursor: pointer; - &:not(.disabled):active{ - background-color: @color-black-40; - box-shadow: none; - color: #fff; - .card-folder-path-icon > i, .card-folder-path-arrow > i { - color: #fff; - } - } - label{ - cursor: pointer; - } - .card-folder-path-icon{ - margin-left: 16px; - i{ - width: 16px; - font-size: 22px; - color: @color-darkish-blue; - } - } - .card-folder-path-name{ - width: 100%; - margin-left: 21px; - overflow: hidden; - max-height: 64px; - } - .card-folder-path-arrow{ - width: 21px; - display: flex; - justify-content: flex-end; - i{ - font-size: 28px; - color: @color-darkish-blue; - font-size: 40px; - margin-right: 3px; - } - } - &.disabled{ - content: ''; - background-color: @color-clear-blue-30; - cursor: not-allowed; - } - &.disabled *{ - cursor: not-allowed; - } - } - - .card-element-queue{ - width: 408px; - height: 64px; - display: flex; - flex-flow: row; - border-radius: 2px; - background-color: @color-background-white; - box-shadow: 0 1px 2px 0 @color-black-40; - &.border-green{ - border: solid 2px @color-apple-green; - .card-element-queue-right{ - .square-number{ - width: 112px; - } - } - } - &.border-blue{ - border: solid 2px @color-clear-blue; - } - &.border-orange{ - border: solid 2px @color-squash; - } - &.finished{ - border: none; - font-size: 18px; - .card-element-queue-name{ - color: @color-label-grey; - } - .card-element-queue-right{ - .square-number{ - width: 112px; - label{ - font-size: 25px; - color: @color-clear-blue; - } - } - } - } - .card-element-queue-name{ - width: 100%; - display: flex; - align-items: center; - justify-content: flex-start; - margin-left: 14px; - color: @color-darkish-blue; - } - .card-element-queue-right{ - width: 100%; - display: flex; - align-items: center; - justify-content: flex-end; - position: relative; - .square-number{ - width: 48px; - height: 48px; - background-color: @color-duck-egg-blue; - text-align: center; - line-height: 48px; - margin-right: 8px; - label{ - font-size: 18px; - color: @color-darkish-blue; - } - } - button.btn { - padding: 0 17px; - i.fa.fa-trash{ - font-size: 24px; - } - } - } - } - .smooth-dnd-draggable-wrapper .element-queue:first-child{ - margin-top: 3px; - } - - .card-production-cms{ - width: 1024px; - height: 768px; - display: flex; - background-color: @color-label-grey; - flex-flow: row; - position: relative; - .overlay-noauto{ - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - border-radius: 2px; - background-color: rgba(255, 255, 255, 0.9); - font-size: 30px; - color: #4b4b4b; - box-sizing: border-box; - display: flex; - align-items: center; - justify-content: center; - .messsage{ - text-align:center; - font-weight: bold; - max-width: 60%; - } - .btn{ - margin-top: 20px; - font-size: 24px; - img{ - height: 18px; - filter: brightness(0) invert(); - margin-right: 10px; - } - } - .btn:disabled{ - img { - filter: grayscale(100%) invert(44%); - } - } - } - .card-production-cms-queue{ - width: 100%; - height: 100%; - display: flex; - justify-content: flex-start; - } - .card-production-cms-job{ - width: 100%; - height: 100%; - display: flex; - justify-content: flex-end; - .load-container{ - width: 100%; - background-color: #bbbcbc; - - .center-container{ - text-align: center; - height: 100px; - margin-top: calc(~'384px - 50px'); - } - - .labelLoadPrg{ - color: @color-greyish-brown; - font-size: 36px; - font-weight: 600; - } - button{ - margin-top: 10px; - } - - } - - } - } - - .card-queue-production{ - width: 520px; - height: 768px; - background-color: @color-background-white; - display: flex; - flex-flow: column; - .card-queue-production-header{ - height: 63px; - width: 100%; - display: flex; - flex-flow: row; - border-bottom: solid 2px @color-label-grey; - .title{ - width: 100%; - height: 100%; - display: flex; - align-items: center; - margin-left: 24px; - font-size: 20px; - color: @color-darkish-blue; - justify-content: flex-start; - } - .group-button{ - width: 100%; - height: 100%; - display: flex; - align-items: center; - justify-content: flex-end; - i{ - font-size: 24px; - } - } - } - .card-queue-production-body{ - height: 623px; - width: 100%; - display: flex; - flex-flow: column; - .queue-header{ - height: 64px; - width: 100%; - .tab-box { - height: 64px; - width: 100%; - background-color: @color-whitethree; - display: flex; - flex-direction: row; - border: none !important; - .tab { - flex-grow: 0; - flex-shrink: 0; - float: left !important; - width: 256px !important; - height: 100% !important; - margin: 0 !important; - padding: 0; - border: none !important; - border-right: solid 1px @color-label-grey !important; - background-color: @color-whitethree; - font-size: 18px !important; - line-height: 1 !important; - color: @color-greyish-brown !important; - position: relative; - &.plus { - border-right: none !important; - .btn { - float: left !important; - margin: 0; - width: 48px; - height: 48px; - position: absolute; - top: calc(~"50% - 24px"); - margin-left: 20px; - padding: 0; - .fa { - vertical-align: middle; - font-size: 21px; - } - } - } - } - .tab:last-child { - border-right: none !important; - } - .active { - background-color: @color-white; - border-top: solid 2px @color-clear-blue !important; - } - .tab-box-scroll { - width: 100%; - overflow-y: hidden; - overflow-x: auto; - display: flex; - flex-direction: row; - flex-basis: auto; - &::-webkit-scrollbar { - width: 5px; - height: 5px; - } - &::-webkit-scrollbar-thumb { - border-radius: 5px; - height: 1px; - background-color: rgba(0, 0, 0, 0.3); - } - } - } - } - .queue-body{ - height: calc(~'100% - 63px'); - width: calc(~'100% - 16px'); - display: flex; - flex-flow: column; - align-items: center; - justify-content: flex-start; - margin: 16px 0 0 4px; - .element-queue{ - display: flex; - flex-flow: row; - align-items: center; - margin-bottom: 16px; - width: 432px; - margin-right: 8px; - label.number{ - display: flex; - height: 100%; - margin-right: 16px; - font-size: 20px; - color: @color-greyish-brown; - } - } - & .popup{ - position: absolute; - display: flex; - padding: 4px; - .edit-reps{ - width: 100%; - height: calc(~'100% - 26px');; - display: flex; - align-items: center; - justify-content: space-around; - } - // &:before { - // content: "\f0d8"; - // color: @color-silver; - // position: absolute; - // top: -26px; - // left: calc(~'50% - 10px'); - // font-family: 'fontawesome'; - // font-size: 38px; - // } - .group-button{ - width: 100%; - display: flex; - justify-content: flex-end; - .btn.btn-success.btn-small{ - height: 26px; - font-size: 12px; - } - } - input{ - width: 50px; - height: 30px; - } - } - - } - .queue-footer{ - display: flex; - margin: 20px 0 0 8px; - border-top: solid 2px @color-whitethree; - height: 47px; - width: 97%; - label{ - width: 100%; - height: 100%; - display: flex; - align-items: center; - margin-left: 24px; - font-size: 20px; - color: @color-darkish-blue; - justify-content: flex-start; - } - } - } - .card-queue-production-footer{ - height: 62px; - width: 100%; - display: flex; - border-top: solid 2px @color-label-grey; - .add-item{ - display: flex; - width: 100%; - height: 100%; - flex-flow: row; - align-items: center; - justify-content: center; - label{ - font-size: 20px; - color: @color-darkish-blue; - } - i{ - font-size: 24px; - } - } - } - } - - .card-job-production{ - width: 502px; - height: 768px; - background-color: @color-background-white; - position: relative; - .card-job-production-header{ - height: 63px; - width: 100%; - display: flex; - flex-flow: row; - border-bottom: solid 2px @color-label-grey; - .title{ - width: 100%; - height: 100%; - display: flex; - align-items: center; - margin-left: 24px; - font-size: 20px; - color: @color-darkish-blue; - justify-content: flex-start; - } - .box-right{ - width: 100%; - height: 100%; - display: flex; - align-items: center; - justify-content: flex-end; - margin-right: 8px; - .rectangle{ - width: 152px; - height: 48px; - border-radius: 2px; - background-color: @color-whitethree; - label{ - width: 100%; - height: 100%; - justify-content: center; - display: flex; - align-items: center; - font-size: 20px; - color: @color-darkish-blue; - } - } - } - } - .card-job-production-body{ - width: 100%; - height: calc(~'100% - 63px'); - display: flex; - flex-flow: column; - align-items: center; - justify-content: center; - .card-job-production-body-top{ - - display: flex; - align-items: center; - justify-content: flex-end; - height: 335px; - width: 1000px; - - .var{ - min-height: 32px; - width: 100%; - display: flex; - flex-flow: row; - align-items: center; - justify-content: space-between; - margin-top: 8px; - - .variable{ - font-size: 20px; - line-height: 1; - font-weight: bold; - color: #4b4b4b; - width: 100%; - text-align: right; - padding-right: 10px; - } - .number{ - width: 200px; - height: 32px; - border-radius: 2px; - display: flex; - justify-content: flex-end; - align-items: center; - color: @color-greyish-brown; - padding-right: 8px; - font-size: 20px; - } - .umeasure{ - width: 32px; - margin-left: 5px; - text-align: left; - } - } - .var:nth-child(odd) .number{ - background-color: @color-white4; - } - .var:nth-child(even) .number{ - background-color: @color-clear-blue-30; - } - - - .img-container{ - width: 500px; - display: flex; - margin: auto; - align-content: center; - align-items: center; - } - .info-container{ - width: 500px; - padding-left: 20px; - height: 335px; - text-align: right; - } - .container{ - margin: auto; - overflow: visible; - position: relative; - cursor: pointer; - img { - display: block; - max-height:315px; - box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.4); - max-width: 100%; - } - .eye{ - position: absolute; - bottom: 2px; - right: 10px; - font-size: 25px; - color: @color-darkish-blue; - } - } - - .noimage{ - display: flex; - align-items: center; - justify-content: center; - height: 290px; - width: 100%; - max-width: 100%; - text-align: center; - color: @color-greyish-brown; - font-size: 24px; - box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.4); - border: 1px solid rgba(0, 0, 0, 0.1); - padding-left: 100px; - padding-right: 100px; - - } - } - .card-job-production-body-bottom{ - width: 464px; - height: 337px; - border-radius: 2px; - box-shadow: 0 1px 2px 0 @color-black-40; - display: flex; - flex-flow: column; - .tabs{ - height: 64px; - width:100%; - background-color: @color-whitethree; - display: flex; - flex-direction: row; - button{ - visibility: hidden; - border: none; - } - .tab{ - color: @color-darkish-blue; - font-size: 20px; - visibility: visible; - width: 232px; - border-right: solid 1px @color-label-grey; - &.active{ - color: @color-clear-blue; - background-color: @color-white; - border-top: solid 2px @color-clear-blue !important; - } - } - .tab:last-child{ - border: none; - } - } - .content-box{ - height: calc(~'100% - 64px'); - width: 100%; - display: flex; - flex-flow: column; - font-family: monospace; - .row{ - width: 464px; - height: 32px; - display: flex; - align-items: center; - color: @color-greyish-brown; - line-height: 1.78px; - text-align: justify; - overflow: hidden; - white-space: pre; - font-weight: bold; - label{ - font-size: 18px; - margin-left: 36px; - } - } - .row:nth-child(odd){ - background-color: @color-clear-blue-30; - } - .row:nth-child(even){ - background-color: @color-white4; - } - .row:first-child{ - margin-top: 16px; - } - .row.selected{ - .triangle{ - margin-left: 16px; - width: 0; - height: 0; - border-top: 6px solid transparent; - border-left: 8px solid @color-white; - border-bottom: 6px solid transparent; - } - background-color: @color-clear-blue-75; - color: @color-white; - label{ - margin: 12px; - } - } - .card-production-section-file{ - margin: 4px; - } - } - .content-box.scrollable{ - width: 97%; - } - } - } - - } - - .card-job-production-box-start{ - position: absolute; - z-index: 100; - width: 100%; - height: 100%; - top: 0; - background-color: rgba(255, 255, 255, 0.95); + .text-body { display: flex; align-items: center; justify-content: center; } + .arrow { + display: flex; + align-items: center; + justify-content: center; + margin-left: auto; + margin-right: 20px; - .card-production-section-file{ - width: 400px; - height: 48px; - background-color: @color-background-white; - border: solid 1px @color-white4; - display: flex; - flex-flow: row; - .section-file-header{ - height: 100%; - width: 64px; - background-color: @color-white4; - color: @color-darkish-blue; - font-size: 20px; - display: flex; - align-items: center; - justify-content: center; - } - .section-file-body{ - width: calc(~'100% - 72px'); - height: 100%; - display: flex; - align-items: center; - justify-content: center; - .text{ - width: 100%; - display: flex; - justify-content: flex-start; - font-size: 20px; - color: @color-darkish-blue; - margin-left: 8px; - label{ - width: 260px; - } - } - .icon{ - width: 100%; - display: flex; - justify-content: flex-end; - margin-right: 8px; - .fa{ - width: 25px; - font-size: 25px; - } - .fa.fa-check{ - color: @color-clear-blue; - } - .fa.fa-play{ - color: @color-apple-green; - } - .fa.fa-hourglass-half{ - color: @color-light-orange; + .fa-arrow-up, + .fa-arrow-down { + font-size: 24px; + } - } - } - } + .fa-arrow-up { + color: #54AEFF; + } + + .fa-arrow-down { + color: #DC4557; + } + } +} + + + +.card-utilities { + width: 288px; + height: 216px; + border-radius: 2px; + background-color: @color-white2; + box-shadow: 0 1px 2px 0 @color-black-40; + cursor: pointer; + + .card-utilities-header { + height: 64px; + width: 100%; + border-bottom: solid 2px @color-white; + display: flex; + align-items: center; + justify-content: center; + font-size: 18px; + color: @color-darkish-blue; } + .card-utilities-body { + height: calc(~'100% - 66px'); + width: 100%; + display: flex; + align-items: center; + justify-content: center; + + button { + width: 272px; + height: 136px; + display: flex; + align-items: center; + justify-content: center; + background: @color-white2; + } + + .card-utilities-body-label { + width: 104px; + height: 104px; + display: flex; + align-items: center; + justify-content: center; + background-color: @color-background-white; + font-size: 48px; + font-weight: 600; + color: @color-darkish-blue; + } + } +} + + +.card-assisted-tooling { + width: 256px; + height: 249px; + background-color: @color-background-white; + box-shadow: 0 1px 2px 0 @color-black-40; + + .card-assisted-tooling-body { + height: 233px; + display: flex; + flex-flow: column; + align-items: center; + + div.icon .fa-arrow-up { + margin-top: 28px; + font-size: 25px; + color: @color-clear-blue; + } + + div.icon .fa-arrow-down { + margin-top: 28px; + font-size: 25px; + color: red; + } + + .image { + margin-top: 11px; + + img { + width: 108px; + + &.anim_up { + animation: scroll_up 3s infinite; + } + + &.anim_dw { + animation: scroll_dw 3s infinite; + } + + @keyframes scroll_dw { + 0% { + transform: translateY(-108px); + } + + 30% { + transform: translateY(0px); + } + + 70% { + transform: translateY(0px); + } + + 100% { + transform: translateY(108px); + } + + } + + @keyframes scroll_up { + 0% { + transform: translateY(108px); + } + + 30% { + transform: translateY(0px); + } + + 70% { + transform: translateY(0px); + } + + 100% { + transform: translateY(-108px); + } + + } + } + + overflow: hidden; + } + + .text { + font-size: 18px; + line-height: 1.11; + color: @color-greyish-brown; + text-align: center; + } + } + + .card-assisted-tooling-footer { + height: 16px; + background-color: @color-darkish-blue; + } +} + +.card-tool-depot { + width: 272px; + height: 136px; + display: flex; + flex-flow: column; + background-color: @color-white2; + box-shadow: 0 1px 2px 0 @color-black-40; + z-index: 1; + + .card-tool-depot-body { + width: 100%; + height: 100%; + display: flex; + flex-flow: row; + + .card-tool-depot-image { + position: relative; + margin-top: 20px; + margin-left: 10px; + + img { + max-width: 104px; + max-height: 104px; + cursor: pointer; + } + + i { + position: absolute; + right: 0; + bottom: 10px; + font-size: 28px; + cursor: pointer; + } + + i.fa { + color: @color-darkish-blue; + } + } + + .card-tool-depot-title { + display: flex; + height: 100%; + min-width: calc(~'100% - 164px'); + flex-flow: column; + justify-content: center; + margin-left: 20px; + font-size: 18px; + line-height: 1.11; + color: @color-greyish-brown; + overflow: hidden; + + ul { + margin-top: 10px; + -webkit-padding-start: 17px; + font-size: 15px; + line-height: 19px; + white-space: nowrap; + } + } + + .card-tool-depot-remove { + width: 100%; + margin-top: 8px; + margin-right: 8px; + margin-left: auto; + display: flex; + font-size: 24px; + color: @color-darkish-blue; + + .btn { + height: 48px; + width: 48px; + font-size: 24px; + margin: 0 -26px; + padding: 0; + } + } + } +} + +.card-maintenance-wizard { + width: 408px; + height: 64px; + border-radius: 2px; + background-color: @color-background-white; + box-shadow: 0 1px 2px 0 @color-black-40; + + .card-maintenance-wizard-body { + height: 100%; + display: flex; + flex-flow: row; + align-items: center; + + .card-maintenance-wizard-image { + margin-left: 20px; + + img { + width: 28px !important; + height: 28px !important; + } + } + + .card-maintenance-wizard-title { + height: 100%; + display: flex; + flex-flow: column; + justify-content: center; + + div.wizard { + font-size: 18px; + font-weight: 600; + line-height: 1; + color: @color-cyan-blue; + margin-left: 20px; + } + + div { + font-size: 14px; + line-height: 1.29; + color: @color-cyan-blue; + margin-left: 20px; + } + } + + .card-maintenance-wizard-start { + margin-left: auto; + margin-right: 0; + + button div { + font-size: 18px; + color: @color-cyan-blue; + } + } + } +} + +.softkeys-prefered { + width: 480px; + min-height: 64px; + display: flex; + flex-flow: row; + align-items: center; + background-color: @color-white3; + position: relative; + cursor: pointer; + + &.active { + box-shadow: inset 0px 0px 0px 3px #1791ff; + } + + .star { + height: 100%; + display: flex; + align-items: center; + margin-left: 16px; + } + + .title { + font-size: 14px; + line-height: 1.43; + color: @color-darkish-blue; + height: 100%; + display: flex; + align-items: center; + margin-left: 14px; + } + + .control { + height: 100%; + display: flex; + margin-right: 16px; + align-items: center; + margin-left: auto; + + input, + select { + width: 294px; + height: 48px; + font-size: 18px; + line-height: 1.11; + color: @color-greyish-brown; + padding: 0 5px; + box-sizing: border-box; + border: solid 1px #ccc; + + &[type=number] { + text-align: right; + width: 144px; + } + } + + input:read-only { + border: solid 1px transparent; + } + + select:disabled { + border: solid 1px transparent; + -webkit-appearance: menulist-text; + -moz-appearance: menulist-text; + } + + .togglebutton { + label { + span.toggle { + width: 92px; + height: 31px; + line-height: 31px; + font-size: 13px; + } + } + } + + .togglebutton label .toggle:after { + width: 29px; + height: 29px; + border-radius: 27px; + top: 1px; + } + + .togglebutton label input[type=checkbox]:checked+.toggle:after { + left: 48px; + } + + .togglebutton label input[type=checkbox]:checked+.toggle:after { + width: 29px; + height: 29px; + border-radius: 27px; + left: 62px; + } + + .multiple { + display: flex; + flex-flow: row wrap; + border-left: 1px solid @color-label-grey; + width: 144px; + margin-top: -1px; + height: 46px; + overflow-x: visible; + cursor: pointer; + + &:active { + background-color: @color-silver; + color: @color-white; + border-color: #fff; + } + + &:active span { + background-color: @color-silver; + color: @color-white; + border-color: #fff; + } + + span { + display: flex; + background: transparent; + color: @color-label-grey; + flex-grow: 1; + min-width: 48px; + min-height: 22px; + margin-top: -1px; + margin-left: -1px; + box-sizing: border-box; + border: 0.5px solid @color-label-grey; + align-items: center; + position: relative; + justify-content: center; + + &.active { + background-color: #1791ff; + color: @color-white; + } + + &.empty { + background: transparent; + } + } + } + + .button { + .fa { + font-size: 32px; + color: @color-darkish-blue; + } + } + + // .pushbutton{ + // width: 144px; + // height: 48px; + + // .key{ + // display: flex; + // align-items: center; + // justify-content: center; + // visibility: visible; + // width: 42px; + // height: 22px; + // padding: 0; + // border: solid 1px @color-label-grey; + // cursor: pointer; + // } + // } + } +} + +.card-axes-production { + height: 558px; + width: 232px; + border-radius: 2px; + box-shadow: 0 1px 2px 0 @color-black-40; + background-color: @color-background-white; + display: flex; + flex-flow: column; + + .first-box-axes, + .second-box-axes { + height: 264px; + width: 100%; + display: flex; + flex-flow: column; + overflow: auto; + + .axes { + min-height: 32px; + width: 100%; + display: flex; + flex-flow: row; + align-items: center; + justify-content: space-between; + margin-top: 8px; + + &._7 { + min-height: 26px; + } + + &._8 { + min-height: 22px; + } + + &._9 { + min-height: 18px; + } + + .variable { + font-size: 48px; + width: 75px; + line-height: 0; + font-weight: bold; + color: @color-greyish-brown; + text-align: right; + + &._7 { + font-size: 42px; + } + + &._8 { + font-size: 36px; + } + + &._9 { + font-size: 29px; + } + + &.more9 { + width: 69px; + } + } + + .number { + width: 135px; + height: 32px; + border-radius: 2px; + display: flex; + justify-content: flex-end; + align-items: center; + margin-right: 8px; + color: @color-greyish-brown; + padding-right: 8px; + font-size: 20px; + + &._7 { + height: 26px; + } + + &._8 { + height: 22px; + } + + &._9 { + height: 18px; + font-size: 18px; + } + + &.more9 { + margin-right: 5px; + } + } + + .umeasure { + width: 32px; + margin-left: 5px; + text-align: left; + } + } + + .axes:nth-child(odd) .number { + background-color: @color-white4; + } + + .axes:nth-child(even) .number { + background-color: @color-clear-blue-30; + } + + .axes:first-child { + margin-top: 16px; + } + + .axes:last-child { + margin-bottom: 16px; + } + } + + .second-box-axes { + width: 100%; + height: 294px; + + .tabs { + min-height: 30px; + width: 100%; + background-color: @color-whitethree; + display: flex; + flex-direction: row; + + button { + visibility: hidden; + border: none; + } + + .tab { + visibility: visible; + width: 77px; + border-right: solid 1px @color-label-grey; + + &.active { + background-color: @color-white; + border-top: solid 2px @color-clear-blue !important; + } + } + + .tab:last-child { + border: none; + } + } + + .content-box { + height: calc(~'100% - 30px'); + width: 100%; + display: flex; + flex-flow: column; + overflow: auto; + } + } +} + +.card-folder-path { + width: auto; + height: 64px; + display: flex; + align-items: center; + flex-flow: row; + border-radius: 2px; + box-shadow: 0 1px 2px 0 @color-black-40; + background-color: @color-background-white; + margin: 4px 0 4px 5px; + cursor: pointer; + + &:not(.disabled):active { + background-color: @color-black-40; + box-shadow: none; + color: #fff; + + .card-folder-path-icon>i, + .card-folder-path-arrow>i { + color: #fff; + } + } + + label { + cursor: pointer; + } + + .card-folder-path-icon { + margin-left: 16px; + + i { + width: 16px; + font-size: 22px; + color: @color-darkish-blue; + } + } + + .card-folder-path-name { + width: 100%; + margin-left: 21px; + overflow: hidden; + max-height: 64px; + } + + .card-folder-path-arrow { + width: 21px; + display: flex; + justify-content: flex-end; + + i { + font-size: 28px; + color: @color-darkish-blue; + font-size: 40px; + margin-right: 3px; + } + } + + &.disabled { + content: ''; + background-color: @color-clear-blue-30; + cursor: not-allowed; + } + + &.disabled * { + cursor: not-allowed; + } +} + +.card-element-queue { + width: 408px; + height: 64px; + display: flex; + flex-flow: row; + border-radius: 2px; + background-color: @color-background-white; + box-shadow: 0 1px 2px 0 @color-black-40; + + &.border-green { + border: solid 2px @color-apple-green; + + .card-element-queue-right { + .square-number { + width: 112px; + } + } + } + + &.border-blue { + border: solid 2px @color-clear-blue; + } + + &.border-orange { + border: solid 2px @color-squash; + } + + &.finished { + border: none; + font-size: 18px; + + .card-element-queue-name { + color: @color-label-grey; + } + + .card-element-queue-right { + .square-number { + width: 112px; + + label { + font-size: 25px; + color: @color-clear-blue; + } + } + } + } + + .card-element-queue-name { + width: 100%; + display: flex; + align-items: center; + justify-content: flex-start; + margin-left: 14px; + color: @color-darkish-blue; + } + + .card-element-queue-right { + width: 100%; + display: flex; + align-items: center; + justify-content: flex-end; + position: relative; + + .square-number { + width: 48px; + height: 48px; + background-color: @color-duck-egg-blue; + text-align: center; + line-height: 48px; + margin-right: 8px; + + label { + font-size: 18px; + color: @color-darkish-blue; + } + } + + button.btn { + padding: 0 17px; + + i.fa.fa-trash { + font-size: 24px; + } + } + } +} + +.smooth-dnd-draggable-wrapper .element-queue:first-child { + margin-top: 3px; +} + +.card-production-cms { + width: 1024px; + height: 768px; + display: flex; + background-color: @color-label-grey; + flex-flow: row; + position: relative; + + .overlay-noauto { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + border-radius: 2px; + background-color: rgba(255, 255, 255, 0.9); + font-size: 30px; + color: #4b4b4b; + box-sizing: border-box; + display: flex; + align-items: center; + justify-content: center; + + .messsage { + text-align: center; + font-weight: bold; + max-width: 60%; + } + + .btn { + margin-top: 20px; + font-size: 24px; + + img { + height: 18px; + filter: brightness(0) invert(); + margin-right: 10px; + } + } + + .btn:disabled { + img { + filter: grayscale(100%) invert(44%); + } + } + } + + .card-production-cms-queue { + width: 100%; + height: 100%; + display: flex; + justify-content: flex-start; + } + + .card-production-cms-job { + width: 100%; + height: 100%; + display: flex; + justify-content: flex-end; + + .load-container { + width: 100%; + background-color: #bbbcbc; + + .center-container { + text-align: center; + height: 100px; + margin-top: calc(~'384px - 50px'); + } + + .labelLoadPrg { + color: @color-greyish-brown; + font-size: 36px; + font-weight: 600; + } + + button { + margin-top: 10px; + } + + } + + } +} + +.card-queue-production { + width: 520px; + height: 768px; + background-color: @color-background-white; + display: flex; + flex-flow: column; + + .card-queue-production-header { + height: 63px; + width: 100%; + display: flex; + flex-flow: row; + border-bottom: solid 2px @color-label-grey; + + .title { + width: 100%; + height: 100%; + display: flex; + align-items: center; + margin-left: 24px; + font-size: 20px; + color: @color-darkish-blue; + justify-content: flex-start; + } + + .group-button { + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: flex-end; + + i { + font-size: 24px; + } + } + } + + .card-queue-production-body { + height: 623px; + width: 100%; + display: flex; + flex-flow: column; + + .queue-header { + height: 64px; + width: 100%; + + .tab-box { + height: 64px; + width: 100%; + background-color: @color-whitethree; + display: flex; + flex-direction: row; + border: none !important; + + .tab { + flex-grow: 0; + flex-shrink: 0; + float: left !important; + width: 256px !important; + height: 100% !important; + margin: 0 !important; + padding: 0; + border: none !important; + border-right: solid 1px @color-label-grey !important; + background-color: @color-whitethree; + font-size: 18px !important; + line-height: 1 !important; + color: @color-greyish-brown !important; + position: relative; + + &.plus { + border-right: none !important; + + .btn { + float: left !important; + margin: 0; + width: 48px; + height: 48px; + position: absolute; + top: calc(~"50% - 24px"); + margin-left: 20px; + padding: 0; + + .fa { + vertical-align: middle; + font-size: 21px; + } + } + } + } + + .tab:last-child { + border-right: none !important; + } + + .active { + background-color: @color-white; + border-top: solid 2px @color-clear-blue !important; + } + + .tab-box-scroll { + width: 100%; + overflow-y: hidden; + overflow-x: auto; + display: flex; + flex-direction: row; + flex-basis: auto; + + &::-webkit-scrollbar { + width: 5px; + height: 5px; + } + + &::-webkit-scrollbar-thumb { + border-radius: 5px; + height: 1px; + background-color: rgba(0, 0, 0, 0.3); + } + } + } + } + + .queue-body { + height: calc(~'100% - 63px'); + width: calc(~'100% - 16px'); + display: flex; + flex-flow: column; + align-items: center; + justify-content: flex-start; + margin: 16px 0 0 4px; + + .element-queue { + display: flex; + flex-flow: row; + align-items: center; + margin-bottom: 16px; + width: 432px; + margin-right: 8px; + + label.number { + display: flex; + height: 100%; + margin-right: 16px; + font-size: 20px; + color: @color-greyish-brown; + } + } + + & .popup { + position: absolute; + display: flex; + padding: 4px; + + .edit-reps { + width: 100%; + height: calc(~'100% - 26px'); + ; + display: flex; + align-items: center; + justify-content: space-around; + } + + // &:before { + // content: "\f0d8"; + // color: @color-silver; + // position: absolute; + // top: -26px; + // left: calc(~'50% - 10px'); + // font-family: 'fontawesome'; + // font-size: 38px; + // } + .group-button { + width: 100%; + display: flex; + justify-content: flex-end; + + .btn.btn-success.btn-small { + height: 26px; + font-size: 12px; + } + } + + input { + width: 50px; + height: 30px; + } + } + + } + + .queue-footer { + display: flex; + margin: 20px 0 0 8px; + border-top: solid 2px @color-whitethree; + height: 47px; + width: 97%; + + label { + width: 100%; + height: 100%; + display: flex; + align-items: center; + margin-left: 24px; + font-size: 20px; + color: @color-darkish-blue; + justify-content: flex-start; + } + } + } + + .card-queue-production-footer { + height: 62px; + width: 100%; + display: flex; + border-top: solid 2px @color-label-grey; + + .add-item { + display: flex; + width: 100%; + height: 100%; + flex-flow: row; + align-items: center; + justify-content: center; + + label { + font-size: 20px; + color: @color-darkish-blue; + } + + i { + font-size: 24px; + } + } + } +} + +.card-job-production { + width: 502px; + height: 768px; + background-color: @color-background-white; + position: relative; + + .card-job-production-header { + height: 63px; + width: 100%; + display: flex; + flex-flow: row; + border-bottom: solid 2px @color-label-grey; + + .title { + width: 100%; + height: 100%; + display: flex; + align-items: center; + margin-left: 24px; + font-size: 20px; + color: @color-darkish-blue; + justify-content: flex-start; + } + + .box-right { + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: flex-end; + margin-right: 8px; + + .rectangle { + width: 152px; + height: 48px; + border-radius: 2px; + background-color: @color-whitethree; + + label { + width: 100%; + height: 100%; + justify-content: center; + display: flex; + align-items: center; + font-size: 20px; + color: @color-darkish-blue; + } + } + } + } + + .card-job-production-body { + width: 100%; + height: calc(~'100% - 63px'); + display: flex; + flex-flow: column; + align-items: center; + justify-content: center; + + .card-job-production-body-top { + + display: flex; + align-items: center; + justify-content: flex-end; + height: 335px; + width: 1000px; + + .var { + min-height: 32px; + width: 100%; + display: flex; + flex-flow: row; + align-items: center; + justify-content: space-between; + margin-top: 8px; + + .variable { + font-size: 20px; + line-height: 1; + font-weight: bold; + color: #4b4b4b; + width: 100%; + text-align: right; + padding-right: 10px; + } + + .number { + width: 200px; + height: 32px; + border-radius: 2px; + display: flex; + justify-content: flex-end; + align-items: center; + color: @color-greyish-brown; + padding-right: 8px; + font-size: 20px; + } + + .umeasure { + width: 32px; + margin-left: 5px; + text-align: left; + } + } + + .var:nth-child(odd) .number { + background-color: @color-white4; + } + + .var:nth-child(even) .number { + background-color: @color-clear-blue-30; + } + + + .img-container { + width: 500px; + display: flex; + margin: auto; + align-content: center; + align-items: center; + } + + .info-container { + width: 500px; + padding-left: 20px; + height: 335px; + text-align: right; + } + + .container { + margin: auto; + overflow: visible; + position: relative; + cursor: pointer; + + img { + display: block; + max-height: 315px; + box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.4); + max-width: 100%; + } + + .eye { + position: absolute; + bottom: 2px; + right: 10px; + font-size: 25px; + color: @color-darkish-blue; + } + } + + .noimage { + display: flex; + align-items: center; + justify-content: center; + height: 290px; + width: 100%; + max-width: 100%; + text-align: center; + color: @color-greyish-brown; + font-size: 24px; + box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.4); + border: 1px solid rgba(0, 0, 0, 0.1); + padding-left: 100px; + padding-right: 100px; + + } + } + + .card-job-production-body-bottom { + width: 464px; + height: 337px; + border-radius: 2px; + box-shadow: 0 1px 2px 0 @color-black-40; + display: flex; + flex-flow: column; + + .tabs { + height: 64px; + width: 100%; + background-color: @color-whitethree; + display: flex; + flex-direction: row; + + button { + visibility: hidden; + border: none; + } + + .tab { + color: @color-darkish-blue; + font-size: 20px; + visibility: visible; + width: 232px; + border-right: solid 1px @color-label-grey; + + &.active { + color: @color-clear-blue; + background-color: @color-white; + border-top: solid 2px @color-clear-blue !important; + } + } + + .tab:last-child { + border: none; + } + } + + .content-box { + height: calc(~'100% - 64px'); + width: 100%; + display: flex; + flex-flow: column; + font-family: monospace; + + .row { + width: 464px; + height: 32px; + display: flex; + align-items: center; + color: @color-greyish-brown; + line-height: 1.78px; + text-align: justify; + overflow: hidden; + white-space: pre; + font-weight: bold; + + label { + font-size: 18px; + margin-left: 36px; + } + } + + .row:nth-child(odd) { + background-color: @color-clear-blue-30; + } + + .row:nth-child(even) { + background-color: @color-white4; + } + + .row:first-child { + margin-top: 16px; + } + + .row.selected { + .triangle { + margin-left: 16px; + width: 0; + height: 0; + border-top: 6px solid transparent; + border-left: 8px solid @color-white; + border-bottom: 6px solid transparent; + } + + background-color: @color-clear-blue-75; + color: @color-white; + + label { + margin: 12px; + } + } + + .card-production-section-file { + margin: 4px; + } + } + + .content-box.scrollable { + width: 97%; + } + } + } + +} + +.card-job-production-box-start { + position: absolute; + z-index: 100; + width: 100%; + height: 100%; + top: 0; + background-color: rgba(255, 255, 255, 0.95); + display: flex; + align-items: center; + justify-content: center; +} + +.card-production-section-file { + width: 400px; + height: 48px; + background-color: @color-background-white; + border: solid 1px @color-white4; + display: flex; + flex-flow: row; + + .section-file-header { + height: 100%; + width: 64px; + background-color: @color-white4; + color: @color-darkish-blue; + font-size: 20px; + display: flex; + align-items: center; + justify-content: center; + } + + .section-file-body { + width: calc(~'100% - 72px'); + height: 100%; + display: flex; + align-items: center; + justify-content: center; + + .text { + width: 100%; + display: flex; + justify-content: flex-start; + font-size: 20px; + color: @color-darkish-blue; + margin-left: 8px; + + label { + width: 260px; + } + } + + .icon { + width: 100%; + display: flex; + justify-content: flex-end; + margin-right: 8px; + + .fa { + width: 25px; + font-size: 25px; + } + + .fa.fa-check { + color: @color-clear-blue; + } + + .fa.fa-play { + color: @color-apple-green; + } + + .fa.fa-hourglass-half { + color: @color-light-orange; + + } + } + } +} /* bordo green per card section file*/ -.border-green{ - border: solid 1px @color-apple-green; +.border-green { + border: solid 1px @color-apple-green; } /* larghezza quando gli assi in card axes in production sono maggiori di 5 dopo scrollbar*/ -.first-box-axes.scrollable .axes{ - .number.width-number{ - overflow: visible; - width: 128px; - } +.first-box-axes.scrollable .axes { + .number.width-number { + overflow: visible; + width: 128px; + } } .menu-container { - width: 386px; - top: 80px; - position: absolute; - display: flex; - left: calc(~"50% - 193px"); - justify-content: center; - z-index: 100; - transform: translateZ(0); - cursor: default; - &.top { - top: -88px; - .menu::before { - content: "\f0d7"; - color: @color-white3; - position: absolute; - left: calc(~"50% - 11px"); - top: 60px; - font-family: 'fontawesome'; - font-size: 38px; - } - } - &.left{ + width: 386px; + top: 80px; + position: absolute; + display: flex; + left: calc(~"50% - 193px"); + justify-content: center; + z-index: 100; + transform: translateZ(0); + cursor: default; - left: -2px; - justify-content: flex-start; - } - &.right{ - left: -189px; - justify-content: flex-end; - } - &.bottom { - .menu::before { - content: "\f0d8"; - color: @color-white3; - position: absolute; - left: calc(~"50% - 11px"); - top: -26px; - font-family: 'fontawesome'; - font-size: 38px; - } - } - .menu { - background-color: @color-white3; - position: relative; - padding: 7px; - box-shadow: 0 1px 2px 0 @color-black-40; - button { - background-image: linear-gradient(to bottom, #5f676b, #4e585e); - width: 60px; - height: 60px; - margin: 1px; - font-size: 20px; - color: #fff; - border: none; - position: relative; - cursor: pointer; - &.active { - background-image: none; - background-image: linear-gradient(to bottom,@color-nice-blue,@color-darkish-blue); - } - &:active { - background-image: none; - background-color: #1791ff;; - } - &.active:active { - background-image: none; - background-color: #1791ff;; - } - &.disabled::after, - &:disabled::after { - content: " "; - position: absolute; - display: block; - top: 0; - bottom: 0; - left: 0; - right: 0; - background: rgba(255, 255, 255, 0.5); - cursor: not-allowed; - } - } - } -} + &.top { + top: -88px; -.width-100{ - width: 100% !important; -} - -.width-body-bottom{ - width: 1000px !important; -} -.selected-path-drive{ - background-color: @color-clear-blue-30; - color: #002680; - // color: @color-white; - &.dark { - background-color: rgba(23, 145, 255, 0.75); - color:#fff; - - *{ - color:#fff !important; - } + .menu::before { + content: "\f0d7"; + color: @color-white3; + position: absolute; + left: calc(~"50% - 11px"); + top: 60px; + font-family: 'fontawesome'; + font-size: 38px; } -} + } -.objects-job{ - margin:8px; - width: 456px; - height: 72px; - border-radius: 2px; - background-color: @color-background-white; + &.left { + + left: -2px; + justify-content: flex-start; + } + + &.right { + left: -189px; + justify-content: flex-end; + } + + &.bottom { + .menu::before { + content: "\f0d8"; + color: @color-white3; + position: absolute; + left: calc(~"50% - 11px"); + top: -26px; + font-family: 'fontawesome'; + font-size: 38px; + } + } + + .menu { + background-color: @color-white3; + position: relative; + padding: 7px; box-shadow: 0 1px 2px 0 @color-black-40; - display: flex; - flex-flow: column; - align-items: center; - .main{ - display: flex; - flex-flow: row; - align-items: center; - flex: 1; - width: 100%; - min-height: 62px; - } + button { + background-image: linear-gradient(to bottom, #5f676b, #4e585e); + width: 60px; + height: 60px; + margin: 1px; + font-size: 20px; + color: #fff; + border: none; + position: relative; + cursor: pointer; - .objects-job-image{ - margin-left: 8px; - } - .objects-job-title{ - margin-left: 24px; - font-size: 18px; - font-weight: 600; - line-height: 1.11; - color: @color-greyish-brown; - margin-right: auto; - } + &.active { + background-image: none; + background-image: linear-gradient(to bottom, @color-nice-blue, @color-darkish-blue); + } - .buttons{ - margin-right: 7px; - button{ - margin: 0 4px; + &:active { + background-image: none; + background-color: #1791ff; + ; + } + + &.active:active { + background-image: none; + background-color: #1791ff; + ; + } + + &.disabled::after, + &:disabled::after { + content: " "; + position: absolute; + display: block; + top: 0; + bottom: 0; + left: 0; + right: 0; + background: rgba(255, 255, 255, 0.5); + cursor: not-allowed; } } + } +} - .details{ - flex: 1 100%; - display: flex; - width: calc(~'100% - 4px'); - padding: 16px; - border-top: 1px solid #e7e7e7; +.width-100 { + width: 100% !important; +} - input, select{ - width: 288px; - height: 48px; - font-size: 18px; - border:solid 1px #bbbcbc; - border-radius: 2px; - padding: 5px 10px; - } +.width-body-bottom { + width: 1000px !important; +} + +.selected-path-drive { + background-color: @color-clear-blue-30; + color: #002680; + + // color: @color-white; + &.dark { + background-color: rgba(23, 145, 255, 0.75); + color: #fff; + + * { + color: #fff !important; } -} -.job-expanded{ - width: 623px !important; - height: auto !important; + } } -.min{ - height: 40px !important; - min-height: 40px !important; - .main{ - min-height: auto !important; - } -} +.objects-job { + margin: 8px; + width: 456px; + height: 72px; + border-radius: 2px; + background-color: @color-background-white; + box-shadow: 0 1px 2px 0 @color-black-40; + display: flex; + flex-flow: column; + align-items: center; -.missing-tool{ - margin: auto; - width: 720px; - height: 64px; - background-color: @color-background-white; - border-radius: 2px; - box-shadow: 0 1px 2px 0 @color-black-40; + .main { display: flex; flex-flow: row; - align-self: center; - justify-items: center; - font-size: 18px; - line-height: 1.11; - color:@color-greyish-brown; - margin-bottom: 4px; - .image{ - // display: flex; - // flex-flow: row; - display: flex; - align-items: center; - justify-content: center; - margin-left: 21px; - margin-right: 15px; - img{ - width: 32px; - height: 32px; - } - - } - .text-code{ - display: flex; - align-items: center; - } - .text-title{ - width: 100%; - display: flex; - align-items: center; - margin-left: 16px; - } - .text-right{ - width: 100%; - display: flex; - align-items: center; - justify-content: flex-end; - font-size: 14px; - line-height: 1.29; - color: @color-scarlet; - } - - .fa{ - display: flex; - align-items: center; - font-size: 24px; - margin: 0 20px; - color: @color-darkish-blue; - cursor: pointer; - } -} - - - -.card-report{ - width: 288px; - height: 216px; - background-color: @color-background-white; - border-radius: 2px; - box-shadow: 0 1px 2px 0 @color-black-40; - margin:8px; - position: relative; - >header{ - width: 288px; - height: 64px; - border-radius: 2px; - border-bottom: solid 2px @color-white2; - span{ - font-size: 18px; - float: left; - color: @color-darkish-blue; - margin-top: 22px; - margin-left: 24px; - } - } - >section{ - height: calc(~'100% - 64px'); - display: flex; - justify-content: center; - align-items: center; - } -} - -.card-report-production{ + align-items: center; + flex: 1; width: 100%; - height: 100%; + min-height: 62px; + } + + .objects-job-image { + margin-left: 8px; + } + + .objects-job-title { + margin-left: 24px; + font-size: 18px; + font-weight: 600; + line-height: 1.11; + color: @color-greyish-brown; + margin-right: auto; + } + + .buttons { + margin-right: 7px; + + button { + margin: 0 4px; + } + } + + .details { + flex: 1 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; - } - } + width: calc(~'100% - 4px'); + padding: 16px; + border-top: 1px solid #e7e7e7; + input, + select { + width: 288px; + height: 48px; + font-size: 18px; + border: solid 1px #bbbcbc; + border-radius: 2px; + padding: 5px 10px; + } + } +} - .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; - } - } +.job-expanded { + width: 623px !important; + height: auto !important; +} + +.min { + height: 40px !important; + min-height: 40px !important; + + .main { + min-height: auto !important; + } +} + +.missing-tool { + margin: auto; + width: 720px; + height: 64px; + background-color: @color-background-white; + border-radius: 2px; + box-shadow: 0 1px 2px 0 @color-black-40; + display: flex; + flex-flow: row; + align-self: center; + justify-items: center; + font-size: 18px; + line-height: 1.11; + color: @color-greyish-brown; + margin-bottom: 4px; + + .image { + // display: flex; + // flex-flow: row; + display: flex; + align-items: center; + justify-content: center; + margin-left: 21px; + margin-right: 15px; + + img { + width: 32px; + height: 32px; + } + + } + + .text-code { + display: flex; + align-items: center; + } + + .text-title { + width: 100%; + display: flex; + align-items: center; + margin-left: 16px; + } + + .text-right { + width: 100%; + display: flex; + align-items: center; + justify-content: flex-end; + font-size: 14px; + line-height: 1.29; + color: @color-scarlet; + } + + .fa { + display: flex; + align-items: center; + font-size: 24px; + margin: 0 20px; + color: @color-darkish-blue; + cursor: pointer; + } +} + +.card-report { + width: 288px; + height: 216px; + background-color: @color-background-white; + border-radius: 2px; + box-shadow: 0 1px 2px 0 @color-black-40; + margin: 8px; + position: relative; + + >header { + width: 288px; + height: 64px; + border-radius: 2px; + border-bottom: solid 2px @color-white2; + + span { + font-size: 18px; + float: left; + color: @color-darkish-blue; + margin-top: 22px; + margin-left: 24px; + } + } + + >section { + height: calc(~'100% - 64px'); + display: flex; + justify-content: center; + 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; + } } - .body-left-header-machinestatus{ - border-right: 0px; + } + + >div { + display: flex; + flex-flow: column; + height: 70px; + margin-right: 24px; + + label { + font-size: 14px; + line-height: 1.29; + color: @color-warm-grey; } - .body-left-center { - width: 1448px; - max-height: 681px; + + 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: column; - .body-left-center-container{ - width: 100%; - table{ - table-layout: fixed; - width: 100%; - border-collapse: collapse; - border: solid 1px @color-label-grey; - } - 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 } + flex-flow: row; - // 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: 560px; - 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; - } - &.black{ - color: black; - } - } - td:last-child{ - width: 16px; - display: flex; - } - &.selected{ - background-color: rgba(23, 145, 255, 0.75); - color: @color-white; - font-weight: 600; - } - } - } - - tfoot { - width: 100%; - bottom: 0; - } - tr{ - width: 100%; - display: table; - } - tfoot tr td{ - height: 64px; - width: 100%; - font-size: 18px; - color: @color-darkish-blue; - position: relative; - bottom:0; - border-top: solid 2px @color-silver; - td{ - padding: 0; - text-align: center; - } - div.group-label-button{ - text-align: center; - margin: 8px 0 8px 0; - button{ - width: 60px; - padding: 0px; - } - .freespace{ - width: 60px; - display: inline-block; - margin: 0 8px; - } - } - } - // .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); - } - - } - } - } - } - } + 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; } - .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; - } - } + input[type="time"]:first-child { + margin-right: 16px; + } + + input[type="time"]::-webkit-inner-spin-button { + -webkit-appearance: none; + display: none; + border: none; } } - .hideDiagram{ + + 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; } - } - .reports-box-body-right { - width: 327px; - height: 100%; - .body-right-header{ - width: 100%; - height: 70px; + } + + .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; - 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; - } - } - } - } + + .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; -.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; - } - } + .body-left-center-container { + width: 100%; - - .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; - } - } + table { + table-layout: fixed; + width: 100%; + border-collapse: collapse; + border: solid 1px @color-label-grey; } - .body-left-header-machinestatus{ - border-right: 0px; + + thead { + border-bottom: solid 2px @color-label-grey; + font-size: 14px; + line-height: 1.29; + color: @color-darkish-blue; + display: block; + width: 1431px; } - .body-left-center { - width: 1448px; - max-height: 681px; + + 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; - 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 } + align-items: center; + float: right; + font-size: 23px; + font-weight: bold; + cursor: pointer; + } - // thead tr{ - // width: 1448px; - // } + th, + td { + overflow: hidden; - 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); - } - - } - } - } - } - } + div { + overflow: hidden; + max-height: 64px; } + } - .body-left-center-footer{ + tbody { + display: block; + height: 560px; + width: 1431px; + + tr { + // cursor: pointer; height: 64px; - width: 100%; - border: solid 1px @color-whitegrey; - .header-title{ - width: 360px; - 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; + } + + &.black { + color: black; + } + } + + td:last-child { + width: 16px; 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; - } + } + + &.selected { + background-color: rgba(23, 145, 255, 0.75); + color: @color-white; + font-weight: 600; } } } - } - .reports-box-body-right { - width: 327px; - height: 100%; - .body-right-header{ + + tfoot { 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; - } + bottom: 0; + } + + tr { + width: 100%; + display: table; + } + + tfoot tr td { + height: 64px; + width: 100%; + font-size: 18px; + color: @color-darkish-blue; + position: relative; + bottom: 0; + border-top: solid 2px @color-silver; + + td { + padding: 0; + text-align: center; } - .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; + + div.group-label-button { + text-align: center; + margin: 8px 0 8px 0; + + button { + width: 60px; + padding: 0px; } - 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; + + .freespace { + width: 60px; + display: inline-block; + margin: 0 8px; } } } - .body-right-card{ - width: 100%; - height: calc(~"100% - 70px"); + + // .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; - .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; - } - } + 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; } } - } - } -} - -.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; + .selectBox { 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{ + width: 328px; height: 64px; + } + + .selectBox select { 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; - } + 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; } } - } - } - .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; - } + + .overSelect { + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; } - .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; - } + + .checkboxes, + .checkboxesU { + display: 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; - 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; - justify-content: center; - align-items: center; - .body-left-center-container{ + .checkboxesView, + .checkboxesViewUser { + width: calc(~"100% - 8px"); + ; + background-color: #fff; display: block; - width: 80%; + 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; + } } - } - } - .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; + + div { + select { + width: 328px; 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; + margin-bottom: 24px; + margin-top: 16px; + padding-left: 16px; + font-size: 18px; + line-height: 1.11; + color: @color-greyish-brown; } - 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; + + .accordion-dropdown { + position: relative; + margin-top: 2px; + + 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-right-card{ - width: 100%; - height: calc(~"100% - 70px"); + } + + .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; - .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; - } - } - } + justify-content: center; + + .title { + font-size: 14px; + color: @color-warm-grey; + } + + .data-temporal { + font-size: 18px; + line-height: 1; + color: @color-greyish-brown; } } + } } -} -.card-report-timeline{ - width: 100%; + .hideDiagram { + display: none; + } + } + + .reports-box-body-right { + width: 327px; height: 100%; - display: flex; - .reports-box-body-left { - width: 1455px; + + .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%; - .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; - } - } + 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; } - .body-left-center { - width: 1448px; - max-height: 681px; + + 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; - .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; + background-color: @color-white2; + + label { + font-size: 18px; + color: @color-warm-grey; + margin-bottom: 30px; } - 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; + + span { + font-size: 48px; + font-weight: bold; + line-height: 0.38; + color: @color-clear-blue; } } } - .body-right-card{ + } + } + } +} + +.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%; - height: calc(~"100% - 70px"); + 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; - .card-report{ - > section { + 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; - align-items: center; - justify-content: center; - .rectangle_gray{ - width: 256px; - height: 120px; + 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 { + position: relative; + margin-top: 2px; + + header { + height: 64px; + width: 312px; border-radius: 2px; + box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4); display: flex; - flex-flow: column; + justify-content: space-between; align-items: center; - justify-content: center; - background-color: @color-white2; - label{ - font-size: 18px; - color: @color-warm-grey; - margin-bottom: 30px; + color: @color-darkish-blue; + line-height: 1; + font-size: 18px; + padding-left: 16px; + cursor: pointer; + + span { + width: 100%; } - span{ - font-size: 48px; - font-weight: bold; - line-height: 0.38; - color: @color-clear-blue; + + .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 { + position: relative; + margin-top: 2px; + + 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; + 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; + justify-content: center; + align-items: center; + + .body-left-center-container { + display: block; + width: 80%; + } + } + } + + .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; + 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; + } + } + + .zoom-control { + display: block; + align-items: center; + justify-content: center; + width: 120px; + float: right; + margin: 0px; + position: absolute; + right: 0px; + top: 11px; + + 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-left-center { + width: 1448px; + max-height: 681px; + display: flex; + flex-flow: column; + border: solid 1px #dddddd; + + .body-left-center-header { + width: 100%; + height: 104px; + display: flex; + flex-flow: row; + flex: 1 1 auto; + + .body-left-center-left { + width: 360px; + height: 100%; + display: flex; + flex-flow: column; + align-items: center; + border-right: solid 1px @color-whitegrey; + + .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 { + position: absolute; + width: 320px; + 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; + } + } + } + + .body-left-center-right { + width: 1088px; + height: 100%; + display: block; + position: relative; + .timeline-chart-header + { + width:100%; + height: 100%; + position: relative; + .timeline-chart-header-title { + width: 100%; + height: 20px; + // font-family: WorkSans; + font-size: 18px; + font-weight: 600; + font-style: normal; + font-stretch: normal; + line-height: 1.11; + letter-spacing: normal; + text-align: center; + color: @color-greyish-brown; + position: absolute; + top: 24px; + + } + .timeline-chart-header-items { + display: flex; + flex-flow: row; + flex-wrap: nowrap; + width: 100%; + height: 100%; + text-align: center; + vertical-align: bottom; + + .timeline-chart-header-item { + flex: 1 1 auto; + // font-family: WorkSans; + font-size: 12px; + font-weight: normal; + font-style: normal; + font-stretch: normal; + line-height: 1.43; + letter-spacing: normal; + text-align: center; + color: @color-greyish-brown; + overflow: hidden; + &:first-child{ + border-right: solid 1px #dddddd; + } + &:last-child{ + border-left: solid 1px #dddddd; + } + label{ + position: relative; + line-height: 164px; + display: block; + &.rotate{ + -webkit-transform: rotate(-78deg); + -moz-transform: rotate(-78deg); + -ms-transform: rotate(-78deg); + -o-transform: rotate(-78deg); + filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); + } + } + } + } + .cursone-gantt { + width: 30px; + height: 618px; + position: absolute; + top: 52px; + margin-left: -15px; + z-index: 100; + .oval { + width: 30px; + border-radius: 2px; + color: @color-darkish-blue; + cursor: e-resize; + svg{ + width: 30px; + height: 30px; + fill: @color-darkish-blue; + } + } + .line { + width: 2px; + height: 576px; + border-left: solid 4px @color-darkish-blue; + margin-bottom: 4px; + margin-left: 13px; + cursor: e-resize; + } + &.active{ + .oval{ + background-color: @color-darkish-blue-two + } + .line { + border-color: @color-darkish-blue-two + } + } + } + } + } + } + + .body-left-center-container { + width: 100%; + height: 508px; + display: flex; + flex-flow: row; + overflow-x: hidden; + flex: 1 1 auto; + + .body-left-center-left { + width: 360px; + height: 100%; + display: flex; + flex-flow: column; + align-items: center; + border-right: solid 1px @color-whitegrey; + + .accordion-dropdown { + position: relative; + margin-top: 2px; + + 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; + } + + .row-chart{ + position: absolute; + top: 0px; + left: 345px; + width: 1087px; + + .timeline-chart-row{ + width:100%; + height:64px; + background-color: #ddd; + position: relative; + overflow: hidden; + + .timeline-chart-row-item{ + background-color: #76baf7; + position: absolute; + top: 8px; + bottom: 8px; + left: 10%; + right: 50%; + border-radius: 2px; + height: 48px; + } + } + } + } + + 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; + overflow: visible; + } + + .item { + height: 64px; + width: 100%; + line-height: 64px; + background-color: @color-white2; + position: relative; + } + + .dropdown { + 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 { + background-color: rgba(255, 255, 255, 0.8); + span, + i { + color: #4b4b4b; + } + } + } + + + .row-chart{ + position: absolute; + top: 0px; + left: 345px; + width: 1087px; + + .timeline-chart-row{ + width:100%; + height:64px; + background-color: #ddd; + position: relative; + overflow: hidden; + + .timeline-chart-row-item{ + background-color: #76baf7; + position: absolute; + top: 8px; + bottom: 8px; + left: 10%; + right: 50%; + border-radius: 2px; + height: 48px; + } + } + } + } + } + } + } + + .body-left-center-right { + width: 1088px; + height: 100%; + display: block; + position: relative; + } + } + + .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 @@ -4763,6 +5654,8 @@ color: @color-greyish-brown; } .accordion-dropdown{ + position: relative; + margin-top: 2px; header { height: 64px; width: 312px; diff --git a/Step/wwwroot/assets/styles/base/layout.less b/Step/wwwroot/assets/styles/base/layout.less index 4e5f9b5c..f9ff5f91 100644 --- a/Step/wwwroot/assets/styles/base/layout.less +++ b/Step/wwwroot/assets/styles/base/layout.less @@ -34,6 +34,7 @@ @import "job-editor.less"; @import "scada.less"; @import "report.less"; +@import "tooltip.less"; @background-color: rgb(216, 216, 216); @handle-width: 48px; @@ -209,7 +210,7 @@ body { width: @spinner-loading-height; height: @spinner-loading-width; top: calc(~'50%' - @spinner-loading-height /2); - left: calc(~'50%' - @spinner-loading-width /2); + left: calc(~'50%' - @spinner-loading-width /2); text-align: center; line-height: @spinner-loading-height; font-size: @spinner-loading-height/2; diff --git a/Step/wwwroot/assets/styles/base/tooltip.less b/Step/wwwroot/assets/styles/base/tooltip.less new file mode 100644 index 00000000..431d7194 --- /dev/null +++ b/Step/wwwroot/assets/styles/base/tooltip.less @@ -0,0 +1,116 @@ +// out: false, sourceMap: false, main: ../style.less +@import "colors.less"; + +.tooltip { + display: block !important; + z-index: 10000; + + .tooltip-inner { + min-width: 288px; + min-height: 220px; + border-radius: 2px; + border: solid 2px @color-clear-blue; + background: white; + color: @color-greyish-brown; + border-radius: 16px; + padding: 5px 10px 4px; + } + + .tooltip-arrow { + width: 0; + height: 0; + border-style: solid; + position: absolute; + margin: 5px; + background: transparent; + z-index: 1; + } + + &[x-placement^="top"] { + margin-bottom: 5px; + + .tooltip-arrow { + border-width: 5px 5px 0 5px; + border-left-color: transparent !important; + border-right-color: transparent !important; + border-bottom-color: transparent !important; + bottom: -5px; + left: calc(50% - 5px); + margin-top: 0; + margin-bottom: 0; + } + } + + &[x-placement^="bottom"] { + margin-top: 5px; + + .tooltip-arrow { + border-width: 0 5px 5px 5px; + border-left-color: transparent !important; + border-right-color: transparent !important; + border-top-color: transparent !important; + top: -5px; + left: calc(50% - 5px); + margin-top: 0; + margin-bottom: 0; + } + } + + &[x-placement^="right"] { + margin-left: 5px; + + .tooltip-arrow { + border-width: 5px 5px 5px 0; + border-left-color: transparent !important; + border-top-color: transparent !important; + border-bottom-color: transparent !important; + left: -5px; + top: calc(50% - 5px); + margin-left: 0; + margin-right: 0; + } + } + + &[x-placement^="left"] { + margin-right: 5px; + + .tooltip-arrow { + border-width: 5px 0 5px 5px; + border-top-color: transparent !important; + border-right-color: transparent !important; + border-bottom-color: transparent !important; + right: -5px; + top: calc(50% - 5px); + margin-left: 0; + margin-right: 0; + } + } + + &.popover { + color: #f9f9f9; + + .popover-inner { + background: $color; + color: @color-greyish-brown; + padding: 24px; + border-radius: 5px; + box-shadow: 0 5px 30px rgba(0, 0, 0, 0.1); + } + + .popover-arrow { + border: solid 2px @color-clear-blue; + } + } + + &[aria-hidden='true'] { + visibility: hidden; + opacity: 0; + transition: opacity .15s, visibility .15s; + } + + &[aria-hidden='false'] { + visibility: visible; + opacity: 1; + transition: opacity .15s; + } +} diff --git a/Step/wwwroot/assets/styles/style.css b/Step/wwwroot/assets/styles/style.css index b30a6add..1bdf9214 100644 --- a/Step/wwwroot/assets/styles/style.css +++ b/Step/wwwroot/assets/styles/style.css @@ -8640,6 +8640,10 @@ footer .container button.big:before { 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 { + position: relative; + margin-top: 2px; +} .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; @@ -9229,6 +9233,10 @@ footer .container button.big:before { 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 { + position: relative; + margin-top: 2px; +} .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; @@ -9869,6 +9877,10 @@ footer .container button.big:before { 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 { + position: relative; + margin-top: 2px; +} .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; @@ -10412,7 +10424,6 @@ footer .container button.big:before { .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, @@ -10467,40 +10478,78 @@ footer .container button.big:before { padding-left: 16px; border: none; } +.card-report-timeline .reports-box-body-left .body-left-header .zoom-control, +.card-report-timeline .reports-box-body-left .body-left-header-machinestatus .zoom-control { + display: block; + align-items: center; + justify-content: center; + width: 120px; + float: right; + margin: 0px; + position: absolute; + right: 0px; + top: 11px; +} +.card-report-timeline .reports-box-body-left .body-left-header .zoom-control button, +.card-report-timeline .reports-box-body-left .body-left-header-machinestatus .zoom-control 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-left .body-left-header .zoom-control button:first-child, +.card-report-timeline .reports-box-body-left .body-left-header-machinestatus .zoom-control button:first-child { + margin-right: 16px; +} +.card-report-timeline .reports-box-body-left .body-left-header .zoom-control button:active, +.card-report-timeline .reports-box-body-left .body-left-header-machinestatus .zoom-control 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-left .body-left-center { width: 1448px; max-height: 681px; display: flex; flex-flow: column; + border: solid 1px #dddddd; } -.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container { +.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-header { width: 100%; + height: 104px; + display: flex; + flex-flow: row; + flex: 1 1 auto; } -.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left { +.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-header .body-left-center-left { width: 360px; - height: 616px; + height: 100%; display: flex; flex-flow: column; align-items: center; - border: solid 1px #dddddd; - overflow-y: auto; + border-right: solid 1px #dddddd; } -.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .multiselect { +.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-header .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 { +.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-header .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 { +.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-header .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 { +.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-header .body-left-center-left .selectBox select { width: 100%; padding: 8px; cursor: pointer; @@ -10511,37 +10560,38 @@ footer .container button.big:before { 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 { +.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-header .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 { +.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-header .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 { +.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-header .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); +.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-header .body-left-center-left .checkboxesView { + position: absolute; + width: 320px; 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 { +.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-header .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 { +.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-header .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 { +.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-header .body-left-center-left div select { width: 328px; height: 48px; border-radius: 2px; @@ -10553,7 +10603,124 @@ footer .container button.big:before { 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 { +.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-header .body-left-center-right { + width: 1088px; + height: 100%; + display: block; + position: relative; +} +.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-header .body-left-center-right .timeline-chart-header { + width: 100%; + height: 100%; + position: relative; +} +.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-header .body-left-center-right .timeline-chart-header .timeline-chart-header-title { + width: 100%; + height: 20px; + font-size: 18px; + font-weight: 600; + font-style: normal; + font-stretch: normal; + line-height: 1.11; + letter-spacing: normal; + text-align: center; + color: #4b4b4b; + position: absolute; + top: 24px; +} +.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-header .body-left-center-right .timeline-chart-header .timeline-chart-header-items { + display: flex; + flex-flow: row; + flex-wrap: nowrap; + width: 100%; + height: 100%; + text-align: center; + vertical-align: bottom; +} +.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-header .body-left-center-right .timeline-chart-header .timeline-chart-header-items .timeline-chart-header-item { + flex: 1 1 auto; + font-size: 12px; + font-weight: normal; + font-style: normal; + font-stretch: normal; + line-height: 1.43; + letter-spacing: normal; + text-align: center; + color: #4b4b4b; + overflow: hidden; +} +.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-header .body-left-center-right .timeline-chart-header .timeline-chart-header-items .timeline-chart-header-item:first-child { + border-right: solid 1px #dddddd; +} +.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-header .body-left-center-right .timeline-chart-header .timeline-chart-header-items .timeline-chart-header-item:last-child { + border-left: solid 1px #dddddd; +} +.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-header .body-left-center-right .timeline-chart-header .timeline-chart-header-items .timeline-chart-header-item label { + position: relative; + line-height: 164px; + display: block; +} +.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-header .body-left-center-right .timeline-chart-header .timeline-chart-header-items .timeline-chart-header-item label.rotate { + -webkit-transform: rotate(-78deg); + -moz-transform: rotate(-78deg); + -ms-transform: rotate(-78deg); + -o-transform: rotate(-78deg); + filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); +} +.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-header .body-left-center-right .timeline-chart-header .cursone-gantt { + width: 30px; + height: 618px; + position: absolute; + top: 52px; + margin-left: -15px; + z-index: 100; +} +.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-header .body-left-center-right .timeline-chart-header .cursone-gantt .oval { + width: 30px; + border-radius: 2px; + color: #002680; + cursor: e-resize; +} +.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-header .body-left-center-right .timeline-chart-header .cursone-gantt .oval svg { + width: 30px; + height: 30px; + fill: #002680; +} +.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-header .body-left-center-right .timeline-chart-header .cursone-gantt .line { + width: 2px; + height: 576px; + border-left: solid 4px #002680; + margin-bottom: 4px; + margin-left: 13px; + cursor: e-resize; +} +.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-header .body-left-center-right .timeline-chart-header .cursone-gantt.active .oval { + background-color: #004990; +} +.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-header .body-left-center-right .timeline-chart-header .cursone-gantt.active .line { + border-color: #004990; +} +.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container { + width: 100%; + height: 508px; + display: flex; + flex-flow: row; + overflow-x: hidden; + flex: 1 1 auto; +} +.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left { + width: 360px; + height: 100%; + display: flex; + flex-flow: column; + align-items: center; + border-right: solid 1px #dddddd; +} +.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .accordion-dropdown { + position: relative; + margin-top: 2px; +} +.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .accordion-dropdown header { height: 64px; width: 312px; border-radius: 2px; @@ -10567,60 +10734,114 @@ footer .container button.big:before { 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 { +.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .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 { +.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .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 { +.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .accordion-dropdown header .row-chart { + position: absolute; + top: 0px; + left: 345px; + width: 1087px; +} +.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .accordion-dropdown header .row-chart .timeline-chart-row { + width: 100%; + height: 64px; + background-color: #ddd; + position: relative; + overflow: hidden; +} +.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .accordion-dropdown header .row-chart .timeline-chart-row .timeline-chart-row-item { + background-color: #76baf7; + position: absolute; + top: 8px; + bottom: 8px; + left: 10%; + right: 50%; + border-radius: 2px; + height: 48px; +} +.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .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 { +.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .accordion-dropdown section.expanded { min-height: 64px; background-color: rgba(255, 255, 255, 0.1); max-height: 1000px; + overflow: visible; } -.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .accordion-dropdown section .item { +.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .accordion-dropdown section .item { height: 64px; width: 100%; line-height: 64px; background-color: #f1f1f1; + position: relative; } -.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .accordion-dropdown section .dropdown { +.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .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 { +.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .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 { +.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .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 { +.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .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 { +.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .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-container .body-left-center-left .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 .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-container .body-left-center-left .accordion-dropdown section .dropdown .row-chart { + position: absolute; + top: 0px; + left: 345px; + width: 1087px; +} +.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .accordion-dropdown section .dropdown .row-chart .timeline-chart-row { + width: 100%; + height: 64px; + background-color: #ddd; + position: relative; + overflow: hidden; +} +.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .accordion-dropdown section .dropdown .row-chart .timeline-chart-row .timeline-chart-row-item { + background-color: #76baf7; + position: absolute; + top: 8px; + bottom: 8px; + left: 10%; + right: 50%; + border-radius: 2px; + height: 48px; +} +.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-right { + width: 1088px; + height: 100%; + display: block; + position: relative; } .card-report-timeline .reports-box-body-left .body-left-center .body-left-center-footer { height: 64px; @@ -11112,6 +11333,8 @@ footer .container button.big:before { color: @color-greyish-brown; } .accordion-dropdown{ + position: relative; + margin-top: 2px; header { height: 64px; width: 312px; @@ -18422,6 +18645,104 @@ footer .container button.big:before { display: flex; flex-flow: row; } +.tooltip { + display: block !important; + z-index: 10000; +} +.tooltip .tooltip-inner { + min-width: 288px; + min-height: 220px; + border-radius: 2px; + border: solid 2px #1791ff; + background: white; + color: #4b4b4b; + border-radius: 16px; + padding: 5px 10px 4px; +} +.tooltip .tooltip-arrow { + width: 0; + height: 0; + border-style: solid; + position: absolute; + margin: 5px; + background: transparent; + z-index: 1; +} +.tooltip[x-placement^="top"] { + margin-bottom: 5px; +} +.tooltip[x-placement^="top"] .tooltip-arrow { + border-width: 5px 5px 0 5px; + border-left-color: transparent !important; + border-right-color: transparent !important; + border-bottom-color: transparent !important; + bottom: -5px; + left: calc(45%); + margin-top: 0; + margin-bottom: 0; +} +.tooltip[x-placement^="bottom"] { + margin-top: 5px; +} +.tooltip[x-placement^="bottom"] .tooltip-arrow { + border-width: 0 5px 5px 5px; + border-left-color: transparent !important; + border-right-color: transparent !important; + border-top-color: transparent !important; + top: -5px; + left: calc(45%); + margin-top: 0; + margin-bottom: 0; +} +.tooltip[x-placement^="right"] { + margin-left: 5px; +} +.tooltip[x-placement^="right"] .tooltip-arrow { + border-width: 5px 5px 5px 0; + border-left-color: transparent !important; + border-top-color: transparent !important; + border-bottom-color: transparent !important; + left: -5px; + top: calc(45%); + margin-left: 0; + margin-right: 0; +} +.tooltip[x-placement^="left"] { + margin-right: 5px; +} +.tooltip[x-placement^="left"] .tooltip-arrow { + border-width: 5px 0 5px 5px; + border-top-color: transparent !important; + border-right-color: transparent !important; + border-bottom-color: transparent !important; + right: -5px; + top: calc(45%); + margin-left: 0; + margin-right: 0; +} +.tooltip.popover { + color: #f9f9f9; +} +.tooltip.popover .popover-inner { + background: $color; + color: #4b4b4b; + padding: 24px; + border-radius: 5px; + box-shadow: 0 5px 30px rgba(0, 0, 0, 0.1); +} +.tooltip.popover .popover-arrow { + border: solid 2px #1791ff; +} +.tooltip[aria-hidden='true'] { + visibility: hidden; + opacity: 0; + transition: opacity .15s, visibility .15s; +} +.tooltip[aria-hidden='false'] { + visibility: visible; + opacity: 1; + transition: opacity .15s; +} a, a:visited, a:hover, diff --git a/Step/wwwroot/package.json b/Step/wwwroot/package.json index 47a5238b..44cee2f7 100644 --- a/Step/wwwroot/package.json +++ b/Step/wwwroot/package.json @@ -1,64 +1,65 @@ { - "name": "step", - "version": "1.0.0", - "description": "step", - "author": "Paolo Possanzini ", - "private": true, - "scripts": { - "build": "webpack", - "dev": "webpack --watch" - }, - "dependencies": { - "axios": "0.17.1", - "brace": "0.11.1", - "chart.js": "^2.7.3", - "izitoast": "1.2.0", - "justgage": "^1.2.2", - "moment": "2.20.1", - "raphael": "^2.2.7", - "sprintf-js": "1.1.1", - "vee-validate": "2.0.3", - "vue": "^2.5.2", - "vue-chartjs": "^3.4.0", - "vue-class-component": "6.1.0", - "vue-drag-drop": "1.1.0", - "vue-property-decorator": "6.0.0", - "vue-router": "^3.0.1", - "vue-smooth-dnd": "0.2.1", - "vue2-ace-editor": "0.0.11", - "vue2-datepicker": "2.6.2", - "vuex": "3.0.1" - }, - "devDependencies": { - "autoprefixer": "^7.1.2", - "babel-core": "^6.0.0", - "babel-loader": "7.1.1", - "babel-plugin-transform-decorators-legacy": "^1.3.4", - "babel-plugin-transform-runtime": "^6.0.0", - "babel-polyfill": "^6.23.0", - "babel-preset-es2015": "^6.0.0", - "babel-preset-stage-2": "^6.0.0", - "babel-runtime": "^6.0.0", - "babelify": "^7.2.0", - "chalk": "^2.0.1", - "copy-webpack-plugin": "^4.0.1", - "css-loader": "^0.28.0", - "eventsource-polyfill": "^0.9.6", - "file-loader": "^1.1.4", - "url-loader": "^0.5.8", - "ts-loader": "3.1.1", - "typescript": "2.6.1", - "vue-loader": "^13.3.0", - "vue-template-compiler": "^2.5.2", - "webpack": "^3.6.0" - }, - "engines": { - "node": ">= 4.0.0", - "npm": ">= 3.0.0" - }, - "browserslist": [ - "> 1%", - "last 2 versions", - "not ie <= 8" - ] + "name": "step", + "version": "1.0.0", + "description": "step", + "author": "Paolo Possanzini ", + "private": true, + "scripts": { + "build": "webpack", + "dev": "webpack --watch" + }, + "dependencies": { + "axios": "0.17.1", + "brace": "0.11.1", + "chart.js": "^2.7.3", + "izitoast": "1.2.0", + "justgage": "^1.2.2", + "moment": "2.20.1", + "raphael": "^2.2.7", + "sprintf-js": "1.1.1", + "v-tooltip": "^2.0.0-rc.33", + "vee-validate": "2.0.3", + "vue": "^2.5.2", + "vue-chartjs": "^3.4.0", + "vue-class-component": "6.1.0", + "vue-drag-drop": "1.1.0", + "vue-property-decorator": "6.0.0", + "vue-router": "^3.0.1", + "vue-smooth-dnd": "0.2.1", + "vue2-ace-editor": "0.0.11", + "vue2-datepicker": "2.6.2", + "vuex": "3.0.1" + }, + "devDependencies": { + "autoprefixer": "^7.1.2", + "babel-core": "^6.0.0", + "babel-loader": "7.1.1", + "babel-plugin-transform-decorators-legacy": "^1.3.4", + "babel-plugin-transform-runtime": "^6.0.0", + "babel-polyfill": "^6.23.0", + "babel-preset-es2015": "^6.0.0", + "babel-preset-stage-2": "^6.0.0", + "babel-runtime": "^6.0.0", + "babelify": "^7.2.0", + "chalk": "^2.0.1", + "copy-webpack-plugin": "^4.0.1", + "css-loader": "^0.28.0", + "eventsource-polyfill": "^0.9.6", + "file-loader": "^1.1.4", + "url-loader": "^0.5.8", + "ts-loader": "3.1.1", + "typescript": "2.6.1", + "vue-loader": "^13.3.0", + "vue-template-compiler": "^2.5.2", + "webpack": "^3.6.0" + }, + "engines": { + "node": ">= 4.0.0", + "npm": ">= 3.0.0" + }, + "browserslist": [ + "> 1%", + "last 2 versions", + "not ie <= 8" + ] } diff --git a/Step/wwwroot/src/@types/report.cs.d.ts b/Step/wwwroot/src/@types/report.cs.d.ts index b55bbf2c..3b971a02 100644 --- a/Step/wwwroot/src/@types/report.cs.d.ts +++ b/Step/wwwroot/src/@types/report.cs.d.ts @@ -1,26 +1,57 @@ declare module server { + export interface reportData { + absoluteValue: number; + productedPieces: number; + discardedPieces: number; + } - export interface reportData { - absoluteValue: number, - productedPieces: number, - discardedPieces: number - } + export interface pieChartData { + stop: number; + run: number; + idle: number; + } - export interface pieChartData { - stop: number, - run: number, - idle: number - } + export interface programTableData { + progName: string; + quantity: number; + startDate: Date; + endDate: Date; + actualT: string; + averageT: string; + theoricT: string; + deviation: string; + frequency: number; + } - export interface programTableData { - progName: string, - quantity: number, - startDate: Date, - endDate: Date, - actualT: string, - averageT: string, - theoricT: string, - deviation: string, - frequency: number - } -} \ No newline at end of file + export interface timeLineChartData { + partPrgs: timeLineChartProduzione[]; + statusData: timeLineChartStatoMacchina; + } + + export interface timeLineChartProduzione { + name: string; + executed: string; + frequency: string; + occurrences: timeLineChartTask[]; + } + + export interface timeLineChartStatoMacchina { + run: timeLineChartTask[]; + idle: timeLineChartTask[]; + stop: timeLineChartTask[]; + } + + export interface timeLineChartTask { + from: string; + to: string; + } + + export interface timeLineChartItem { + name: string; + executed: string; + frequency: string; + color: string + from: string, + to: string + } +} 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 index 5a253b82..f6a4262d 100644 --- a/Step/wwwroot/src/app_modules/reports/components/card-report-timeline.ts +++ b/Step/wwwroot/src/app_modules/reports/components/card-report-timeline.ts @@ -1,53 +1,150 @@ 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 { Component, Watch } from "vue-property-decorator"; +import { cardReport } from "src/modules/base-components/cards/index"; +import accordionDropdown from "src/modules/base-components/accordion-dropdown.vue"; import DatePicker from "vue2-datepicker"; -import moment from "moment"; -import { ModalHelper } from "src/components/modals"; -import { ReportGetters } from "../../../store/report.store"; -import { Watch } from "vue-property-decorator"; +import { ReportGetters } from "src/store/report.store"; +import { reportService } from "src/services/reportService"; +import { TimeLineChartHeader, TimeLineChartRow } from "src/components/timeline-chart"; declare let $: any; declare var JustGage: any; -@Component({ components: { datePicker: DatePicker, cardReport: cardReport, accordionDropdown: accordionDropdown } }) + +@Component({ + components: { + datePicker: DatePicker, + cardReport: cardReport, + accordionDropdown: accordionDropdown, + "timeline-chart-row": TimeLineChartRow, + "timeline-chart-header": TimeLineChartHeader + } +}) 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'], + 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' + date: "Select Date", + dateRange: "Select Date Range" } - } + }; - get dataPieces() : server.reportData{ - return (this.$store.getters as ReportGetters).getReportData(); - } + occurrences: any = { + machine_status: { + total: [] as server.timeLineChartItem[], + run: [] as server.timeLineChartItem[], + idle: [] as server.timeLineChartItem[], + stop: [] as server.timeLineChartItem[] + }, + programs: { + total: [] as server.timeLineChartItem[], + items: [] as server.timeLineChartItem[] + } + }; + + private defaultStartDate: Date = new Date(2019, 0, 1); //new Date(new Date().setDate(new Date().getDate() - 6)); + private defaultEndDate: Date = new Date(2019, 0, 31); //new Date(new Date().setDate(new Date().getDate() + 1)); filter: { - interval?: Date[], - timelineMacro: Array, + interval?: Date[]; + timelineMacro: Array; + currentTime: Date; } = { - timelineMacro: ["Allarmi", "Stato macchina", "Programmi"], - interval: [new Date(new Date().setDate(new Date().getDate() - 6)), new Date(new Date().setDate(new Date().getDate() + 1))] + timelineMacro: ["Stato macchina", "Programmi"], + interval: [], + currentTime: null + }; + + interval: { + date?: Date[]; + startTime: Date; + endTime: Date; + } = { + date: [new Date(2019, 0, 1), new Date(2019, 0, 31)], + startTime: null, + endTime: null, }; filterName: string = ""; public searchText: string = ""; + async mounted() { + this.filterIntervalChange(this.interval.date, null); + this.buildGage(); + await this.getData(); + } + + @Watch("searchText") public applyFilter(n) { this.filterName = n.toLowerCase(); } - mounted() { - this.buildGage(); + @Watch("interval.date", { immediate: true }) + public filterIntervalChange(n: Date[], o: Date[]) { + if(!n || (n && n.length < 0)) + { + this.interval.date = [this.defaultStartDate, this.defaultEndDate] + return; + } + if(n && n.length > 0 && n !== o) + { + // let startDate = n[0]; + // let endDate = new Date(n[1].setHours(23, 59, 59)); + + // this.filter.interval = [startDate, endDate]; + this.filter.interval = this.interval.date; + this.filter.currentTime = new Date((this.filter.interval[1].getTime() + this.filter.interval[0].getTime()) / 2); + return; + } + } + + get dataPieces(): server.reportData { + return (this.$store.getters as ReportGetters).getReportData(); + } + + oneDay: number = 24 * 60 * 60 * 1000; + get diffDays(): number { + return Math.round(Math.abs((this.interval.date[1].getTime() - this.interval.date[0].getTime()) / this.oneDay) + ); + } + + + + handleZoomIn(){ + let interval = (this.interval.date[1].getTime() - this.interval.date[0].getTime()) / 2; + this.setZoom(interval) + } + + handleZoomOut(){ + let interval = (this.interval.date[1].getTime() - this.interval.date[0].getTime()) * 2; + this.setZoom(interval); + } + + private setZoom(interval){ + let middle = (interval / 2); + let start = new Date(this.filter.currentTime.getTime() - middle); + let end = new Date(this.filter.currentTime.getTime() + middle); + this.interval.date = [start, end]; } buildGage() { @@ -59,15 +156,93 @@ export default class CardReportTimeline extends Vue { }); } - isVisible(value){ + async getData() { + let occurrences = await reportService.TimeLine(this.filter.interval.map(x => x.toString())); + this.occurrences = { + machine_status: { + total: [] as server.timeLineChartItem[], + run: [] as server.timeLineChartItem[], + idle: [] as server.timeLineChartItem[], + stop: [] as server.timeLineChartItem[] + }, + programs: { + total: [] as server.timeLineChartItem[], + items: [] as server.timeLineChartItem[] + } + }; + + ( + (occurrences.statusData || ({} as server.timeLineChartStatoMacchina)) + .run || ([] as server.timeLineChartTask[]) + ).forEach(m => { + let elem = { + from: m.from, + to: m.to, + name: "run", + color: "#7ed321" + } as server.timeLineChartItem; + this.occurrences.machine_status.run.push(elem); + this.occurrences.machine_status.total.push(elem); + }); + + ( + (occurrences.statusData || ({} as server.timeLineChartStatoMacchina)) + .idle || ([] as server.timeLineChartTask[]) + ).forEach(m => { + let elem = { + from: m.from, + to: m.to, + name: "idle", + color: "#e3d300" + } as server.timeLineChartItem; + this.occurrences.machine_status.idle.push(elem); + this.occurrences.machine_status.total.push(elem); + }); + + ( + (occurrences.statusData || ({} as server.timeLineChartStatoMacchina)) + .stop || ([] as server.timeLineChartTask[]) + ).forEach(m => { + let elem = { + from: m.from, + to: m.to, + name: "stop", + color: "#ff4a60" + } as server.timeLineChartItem; + this.occurrences.machine_status.stop.push(elem); + this.occurrences.machine_status.total.push(elem); + }); + + (occurrences.partPrgs || ([] as server.timeLineChartProduzione[])).forEach( + item => { + let elem = { + name: item.name, + occurrences: [] as server.timeLineChartItem[] + }; + item.occurrences.forEach(m => { + let oc = { + from: m.from, + to: m.to, + name: item.name, + frequency: item.frequency, + executed: item.executed, + color: "#76baf7" + } as server.timeLineChartItem; + elem.occurrences.push(oc); + this.occurrences.programs.total.push(oc); + }); + this.occurrences.programs.items.push(elem); + } + ); + } + + isVisible(value) { return this.filter.timelineMacro.some(c => c == value); } public openSelectState() { - if (!$('.checkboxes').hasClass('checkboxesView')) - $('.checkboxes').addClass('checkboxesView'); - else - $('.checkboxes').removeClass('checkboxesView'); + 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 index c4ea66fb..7dc690e3 100644 --- a/Step/wwwroot/src/app_modules/reports/components/card-report-timeline.vue +++ b/Step/wwwroot/src/app_modules/reports/components/card-report-timeline.vue @@ -1,153 +1,191 @@ - \ No newline at end of file + diff --git a/Step/wwwroot/src/components/timeline-chart/index.js b/Step/wwwroot/src/components/timeline-chart/index.js new file mode 100644 index 00000000..9211f4b5 --- /dev/null +++ b/Step/wwwroot/src/components/timeline-chart/index.js @@ -0,0 +1,7 @@ +import TimeLineChartRow from "./timeline-chart-row.vue"; +import TimeLineChartHeader from "./timeline-chart-header.vue"; + +export { + TimeLineChartRow, + TimeLineChartHeader +} \ No newline at end of file diff --git a/Step/wwwroot/src/components/timeline-chart/timeline-chart-header.ts b/Step/wwwroot/src/components/timeline-chart/timeline-chart-header.ts new file mode 100644 index 00000000..2faeaf02 --- /dev/null +++ b/Step/wwwroot/src/components/timeline-chart/timeline-chart-header.ts @@ -0,0 +1,228 @@ +import Vue from "vue"; +import { Component, Prop, Watch } from "vue-property-decorator"; +import moment from "moment"; +import { Container, Draggable } from "vue-smooth-dnd"; + +@Component({ + components: { + Container, + Draggable + } +}) +export default class TimeLineChartRow extends Vue { + @Prop({ required: true }) + value: Date; + + @Prop({ required: true }) + start: Date; + + @Prop({ required: true }) + end: Date; + + @Prop({ required: false, default: 40 }) + interval: number; + + @Prop({ required: false, default: true }) + showCursor: boolean; + + current: Date = this.value; + formatter = { + title: "MMMM YYYY", + titleInterval: false, + interval: "DD", + showTime: false + }; + isHandlerDragging: boolean = false; + draggingIn: boolean; + draggingPosition: any; + draggingTool: any; + + oneHour: number = 60 * 60 * 1000; + oneDay: number = 24 * this.oneHour; + + @Watch("value") + valueChange(value) { + this.current = value; + } + + get _start(): Date { + let _startTime = this.start.getTime(); + let _endTime = this.end.getTime(); + let _diffDays = Math.round(Math.abs((_endTime - _startTime) / this.oneDay)); + if(_diffDays == 0) + { + _startTime = (new Date(_startTime).setMinutes(0,0)); + _endTime = (new Date(_endTime).setMinutes(59,59)); + return new Date(_startTime - this.oneHour); + } + _startTime = (new Date(_startTime).setHours(0,0,0)); + _endTime = (new Date(_endTime).setHours(23,59,59)); + return new Date(_startTime - this.oneDay); + } + + get _end(): Date { + let _startTime = this.start.getTime(); + let _endTime = this.end.getTime(); + let _diffDays = Math.round(Math.abs((_endTime - _startTime) / this.oneDay)); + + if(_diffDays == 0) + { + _startTime = (new Date(_startTime).setMinutes(0,0)); + _endTime = (new Date(_endTime).setMinutes(59,59)); + return new Date(_endTime + this.oneHour); + } + _startTime = (new Date(_startTime).setHours(0,0,0)); + _endTime = (new Date(_endTime).setHours(23,59,59)); + return new Date(_endTime + this.oneDay); + } + + get intervals(): Date[] { + this.bindFormatter() + let result: Date[] = []; + let step = this.oneDay; + + let diffDays = this.diffDays; + let diffHours = this.diffHours; + + if (diffDays <= 1) { + step = this.oneHour; + let check = Math.ceil(diffHours / this.interval); + if (check > 1) step = this.oneHour * check; + } + else { + step = this.oneDay; + let check = Math.ceil(diffDays / this.interval); + if (check > 1) { + step = this.oneDay * check + }; + } + + let interval = this.startTime; + while (this.endTime >= interval) { + result.push(new Date(interval + (step / 2))); + interval += step; + } + + // if (this._end.setHours(0,0,0,0) != result[result.length - 1].getTime()) + // result.push(this._end); + + return result; + } + + get startTime(): number { + return this.parseToUnixTime(this._start); + } + + get endTime(): number { + return this.parseToUnixTime(this._end); + } + + get diffTime(): number { + return this.endTime - this.startTime; + } + + get diffDays(): number { + return Math.round(Math.abs((this._end.getTime() - this._start.getTime()) / this.oneDay) + ); + } + + get diffHours(): number { + return Math.round( + Math.abs((this._end.getTime() - this._start.getTime()) / this.oneHour) + ); + } + + get cursorPosition(): number { + return this.unixTimeToPercent(this.current.getTime()); + } + + private bindFormatter(): any { + let _startTime = this.start.getTime(); + let _endTime = this.end.getTime(); + let _diffDays = Math.round(Math.abs((_endTime - _startTime) / this.oneDay)); + + if(_diffDays == 0){ + this.formatter.titleInterval = false; + this.formatter.title = "DD MMMM YYYY"; + this.formatter.interval = "HH:mm" + this.formatter.showTime = true; + return new Date(_startTime - this.oneHour); + } + else + { + this.formatter.titleInterval = false; + this.formatter.title = "MMMM YYYY"; + this.formatter.interval = "DD" + this.formatter.showTime = false; + + let _monthDiff = this.monthDiff(this.start, this.end); + if(_monthDiff > 0) + { + this.formatter.titleInterval = true; + this.formatter.title = "MMMM YYYY"; + this.formatter.interval = "DD/MM" + this.formatter.showTime = false; + + let _yearDiff = this.yearDiff(this.start, this.end); + if(_yearDiff > 0) + { + this.formatter.titleInterval = true; + if(_monthDiff > 3) + { + this.formatter.title = "MMMM YYYY"; + this.formatter.interval = "DD/MM/YY" + this.formatter.showTime = false; + } + } + } + } + } + + private monthDiff(start: Date, end: Date) : number { + let months = (end.getFullYear() - start.getFullYear()) * 12; + months -= start.getMonth(); + months += end.getMonth(); + return months <= 0 ? 0 : months; + } + + private yearDiff(start: Date, end: Date) : number { + return end.getFullYear() - start.getFullYear(); +} + + private _moving: boolean = false; + startMove(evt: PointerEvent) { + this._moving = true; + (this.$refs.cursone as HTMLElement).setPointerCapture(evt.pointerId); + } + + moving(evt: PointerEvent) { + if (!this._moving) return; + + let w = (this.$refs.header as HTMLElement).clientWidth; + let step = this.diffTime / w; + var ct = this.current.getTime() + step * evt.movementX; + let currentDate = new Date(Math.max(Math.min(ct, this.endTime), this.startTime)); + this.$emit("input", currentDate); + } + + stopMove(evt: PointerEvent) { + this._moving = false; + (this.$refs.cursone as HTMLElement).releasePointerCapture(evt.pointerId); + } + + private parseToUnixTime(date: string | Date): number { + if (typeof date === "object") return date.getTime(); + + if (typeof date === "string") { + let _date = moment(date, "DD/MM/YYYY").toDate(); + if (!isNaN(_date.getTime())) return _date.getTime(); + } + return 0; + } + + private unixTimeToPercent(unixTime: number): number { + return ( + ((unixTime - this.parseToUnixTime(this._start)) * 100) / this.diffTime + ); + } +} diff --git a/Step/wwwroot/src/components/timeline-chart/timeline-chart-header.vue b/Step/wwwroot/src/components/timeline-chart/timeline-chart-header.vue new file mode 100644 index 00000000..631b4d0d --- /dev/null +++ b/Step/wwwroot/src/components/timeline-chart/timeline-chart-header.vue @@ -0,0 +1,32 @@ + + diff --git a/Step/wwwroot/src/components/timeline-chart/timeline-chart-row.ts b/Step/wwwroot/src/components/timeline-chart/timeline-chart-row.ts new file mode 100644 index 00000000..b81304cb --- /dev/null +++ b/Step/wwwroot/src/components/timeline-chart/timeline-chart-row.ts @@ -0,0 +1,91 @@ +import Vue from "vue"; +import { Component, Prop } from "vue-property-decorator"; +import moment from "moment"; + + +@Component({}) +export default class TimeLineChartRow extends Vue { + @Prop({required: true}) + start: Date; + + @Prop({required: true}) + end: Date; + + @Prop({required: true, default: [] as server.timeLineChartItem[] }) + occurrences: server.timeLineChartItem[]; + + @Prop({required: false, default: "#c9243f"}) + color: string; + + oneHour: number = 60 * 60 * 1000; + oneDay: number = 24 * this.oneHour; + + get tasks(){ + return this.occurrences; + } + + get _start(): Date { + let _startTime = this.start.getTime(); + let _endTime = this.end.getTime(); + let _diffDays = Math.round(Math.abs((_endTime - _startTime) / this.oneDay)); + if(_diffDays == 0) + return new Date(_startTime - this.oneHour); + + _startTime = (new Date(this.start.getTime()).setHours(0,0,0)); + _endTime = (new Date(this.end.getTime()).setHours(23,59,59)); + return new Date(_startTime - this.oneDay); + } + + get _end(): Date { + let _startTime = this.start.getTime(); + let _endTime = this.end.getTime(); + let _diffDays = Math.round(Math.abs((_endTime - _startTime) / this.oneDay)); + + if(_diffDays == 0) + return new Date(_endTime + this.oneHour); + + _startTime = (new Date(this.start.getTime()).setHours(0,0,0)); + _endTime = (new Date(this.end.getTime()).setHours(23,59,59)); + return new Date(_endTime + this.oneDay); + } + + get diff() : number{ + return this.parseDateTime(this._end) - this.parseDateTime(this._start); + } + + from(task: server.timeLineChartItem) : number { + let from = this.parseDateTime(task.from); + return this.computes(from); + } + + to(task: server.timeLineChartItem) : number { + let to = this.parseDateTime(task.to); + return 100 - this.computes(to); + } + + colorOf(task: server.timeLineChartItem) : string { + if(task.color) return task.color; + return this.color; + } + + tooltipOf(task: server.timeLineChartItem) : string { + return `${task.name}!` + } + + private parseDateTime(date: string | Date) : number + { + if (typeof (date) === "object") + return date.getTime(); + + if (typeof (date) === "string") + { + let _date = moment(date, "DD/MM/YYYY").toDate(); + if (!isNaN(_date.getTime())) return _date.getTime(); + } + return 0; + } + + private computes(value: number) : number { + return ((value - this.parseDateTime(this._start)) * 100) / this.diff; + } +} diff --git a/Step/wwwroot/src/components/timeline-chart/timeline-chart-row.vue b/Step/wwwroot/src/components/timeline-chart/timeline-chart-row.vue new file mode 100644 index 00000000..b4baea3a --- /dev/null +++ b/Step/wwwroot/src/components/timeline-chart/timeline-chart-row.vue @@ -0,0 +1,18 @@ + + diff --git a/Step/wwwroot/src/main.js b/Step/wwwroot/src/main.js index ccb18175..0f058083 100644 --- a/Step/wwwroot/src/main.js +++ b/Step/wwwroot/src/main.js @@ -1,7 +1,7 @@ import Vue from "vue"; import VueRouter from "vue-router"; import VeeValidate from "vee-validate"; -import { store, machineStatusActions,machineInfoStore } from "./store"; +import { store, machineStatusActions, machineInfoStore } from "./store"; import "./_base/gestures"; import "./app.business-logic"; import "./app.modules"; @@ -13,7 +13,7 @@ import { Factory, MessageService } from "src/_base"; // var JustGage = require("justgage/justgage.js"); const App = () => - import("./App.vue"); + import ("./App.vue"); import { routes } from "./app.routes"; @@ -22,6 +22,9 @@ Vue.use(VueRouter); Vue.use(VeeValidate); // forms validation for vuejs // Vue.use(VueGesture); +import VTooltip from 'v-tooltip' +Vue.use(VTooltip) + let router = new VueRouter({ linkActiveClass: "inpath", linkExactActiveClass: "active" }); router.addRoutes(routes); @@ -31,29 +34,29 @@ let developerMode = true; // manipulate the title page router.beforeEach((to, from, next) => { - console.log("Navigate To:", to); - if (to.meta && to.meta.area) { - // Check if area is enabled - if (!developerMode && !machineStatusActions.isAreaEnabled(store, to.meta.area)) { - next({ - path: '/' - }) - return; + console.log("Navigate To:", to); + if (to.meta && to.meta.area) { + // Check if area is enabled + if (!developerMode && !machineStatusActions.isAreaEnabled(store, to.meta.area)) { + next({ + path: '/' + }) + return; + } } - } - if (to.meta && to.meta.title) { + if (to.meta && to.meta.title) { - if (typeof cmsClient == "undefined") - window.document.title = "CMS Active - " + to.meta.title; - else - window.document.title = to.meta.title; - } - if(store.state.machineInfo.canChangePages) - next(); - else{ - Factory.Get(MessageService).publishToChannel("show-nochange-page"); - next(false); - } + if (typeof cmsClient == "undefined") + window.document.title = "CMS Active - " + to.meta.title; + else + window.document.title = to.meta.title; + } + if (store.state.machineInfo.canChangePages) + next(); + else { + Factory.Get(MessageService).publishToChannel("show-nochange-page"); + next(false); + } }); @@ -63,10 +66,10 @@ new LocalizationService().init(); let v = new Vue({ - router: router, - store, - el: "app", - render: (h) => h(App), + router: router, + store, + el: "app", + render: (h) => h(App), }); @@ -80,12 +83,12 @@ import "./filters/isValidMixin"; // polyfills !! if (!String.prototype.format) { - String.prototype.format = function () { - var args = arguments; - return this.replace(/{(\d+)}/g, function (match, number) { - return typeof args[number] != 'undefined' ? - args[number] : - match; - }); - }; -} + String.prototype.format = function() { + var args = arguments; + return this.replace(/{(\d+)}/g, function(match, number) { + return typeof args[number] != 'undefined' ? + args[number] : + match; + }); + }; +} \ No newline at end of file diff --git a/Step/wwwroot/src/modules/base-components/accordion-dropdown.vue b/Step/wwwroot/src/modules/base-components/accordion-dropdown.vue index 27c63c13..66327c5b 100644 --- a/Step/wwwroot/src/modules/base-components/accordion-dropdown.vue +++ b/Step/wwwroot/src/modules/base-components/accordion-dropdown.vue @@ -1,8 +1,10 @@