diff --git a/Thermo.Active/wwwroot/assets/icons/png/star.png b/Thermo.Active/wwwroot/assets/icons/png/star.png new file mode 100644 index 00000000..51d56b48 Binary files /dev/null and b/Thermo.Active/wwwroot/assets/icons/png/star.png differ diff --git a/Thermo.Active/wwwroot/assets/icons/png/star@2x.png b/Thermo.Active/wwwroot/assets/icons/png/star@2x.png new file mode 100644 index 00000000..4ac4b609 Binary files /dev/null and b/Thermo.Active/wwwroot/assets/icons/png/star@2x.png differ diff --git a/Thermo.Active/wwwroot/assets/icons/png/star@3x.png b/Thermo.Active/wwwroot/assets/icons/png/star@3x.png new file mode 100644 index 00000000..20455aa9 Binary files /dev/null and b/Thermo.Active/wwwroot/assets/icons/png/star@3x.png differ diff --git a/Thermo.Active/wwwroot/assets/icons/png/tast-disable.png b/Thermo.Active/wwwroot/assets/icons/png/tast-disable.png new file mode 100644 index 00000000..95c33ed2 Binary files /dev/null and b/Thermo.Active/wwwroot/assets/icons/png/tast-disable.png differ diff --git a/Thermo.Active/wwwroot/assets/styles/base/avvio-prod.less b/Thermo.Active/wwwroot/assets/styles/base/avvio-prod.less new file mode 100644 index 00000000..da482df2 --- /dev/null +++ b/Thermo.Active/wwwroot/assets/styles/base/avvio-prod.less @@ -0,0 +1,34 @@ +// out: false, sourceMap: false, main: ../style.less +@import "grid-system.less"; +@import "colors.less"; +@import "fonts.less"; +@modal: modal; + +.@{modal}.avvio-produzione-info { + margin-top: 100px; + width: 653px; + height: 616px; + + section.body{ + + section{ + justify-content: center; + + .specific{ + + .disabled{ + width: 420px; + height: 330px; + } + + .tast{ + margin-left: 25%; + } + + } + + } + + } + +} \ No newline at end of file diff --git a/Thermo.Active/wwwroot/assets/styles/base/circlegantt.less b/Thermo.Active/wwwroot/assets/styles/base/circlegantt.less new file mode 100644 index 00000000..83f1a351 --- /dev/null +++ b/Thermo.Active/wwwroot/assets/styles/base/circlegantt.less @@ -0,0 +1,92 @@ +// out: false, sourceMap: false, main: ../style.less +@import "grid-system.less"; +@import "colors.less"; +@import "fonts.less"; + +.circle-gantt{ + height: 70px; + + .specific{ + + div{ + + &:first-of-type{ + display: flex; + flex-direction: column; + justify-content: flex-end; + height: 70px; + object-fit: contain; + border-radius: 2px; + background-color: #57636b; + + label{ + margin-left: 37%; + } + + } + + &:last-of-type{ + display: flex; + flex-direction: column; + justify-content: center; + margin-top: -66px; + height: 40px; + object-fit: contain; + border-radius: 2px; + background-color: #c0c7cc; + + label{ + margin-left: 25%; + } + + } + + } + + &:first-of-type{ + + div{ + + &:first-of-type{ + display: flex; + flex-direction: column; + justify-content: flex-end; + width: 34px; + height: 70px; + object-fit: contain; + border-radius: 2px; + background-color: #57636b; + + label{ + margin-left: 25%; + } + + } + + &:last-of-type{ + display: flex; + flex-direction: column; + justify-content: flex-end; + margin-top: -66px; + width: 34px; + height: 40px; + object-fit: contain; + border-radius: 2px; + background-color: #c0c7cc; + + img{ + margin-left: 25%; + flex-shrink: 0; + width: 20px; + height: 20px; + } + + } + + } + + } + + } + +} \ No newline at end of file diff --git a/Thermo.Active/wwwroot/assets/styles/base/layout.less b/Thermo.Active/wwwroot/assets/styles/base/layout.less index f04c8c32..61a41d28 100644 --- a/Thermo.Active/wwwroot/assets/styles/base/layout.less +++ b/Thermo.Active/wwwroot/assets/styles/base/layout.less @@ -1,4 +1,5 @@ // out: false, sourceMap: false, main: ../style.less +@import "setup.less"; @import "colors.less"; @import "modals.less"; @import "pirometro.less"; @@ -6,8 +7,9 @@ @import "formato.less"; @import "slider.less"; @import "tastierino.less"; +@import "circlegantt.less"; @import "arretramento-riscaldi.less"; -@import "setup.less"; +@import "avvio-prod.less"; @import "ciclo.less"; @import "raffreddamento.less"; @import "processo.less"; diff --git a/Thermo.Active/wwwroot/assets/styles/base/processo.less b/Thermo.Active/wwwroot/assets/styles/base/processo.less index 83652a1c..fac2e2a5 100644 --- a/Thermo.Active/wwwroot/assets/styles/base/processo.less +++ b/Thermo.Active/wwwroot/assets/styles/base/processo.less @@ -7,5 +7,54 @@ .@{modal}.processo-info { width: 1820px; height: 980px; - margin: 150px 193px; + margin-top: 50px; + + header{ + font-size: 22px; + color: #4b4b4b; + + .tab-header{ + padding: 10px 0px; + + button{ + padding: 0; + display: flex; + justify-content: flex-start; + margin-right: 10px; + width: 149px; + height: 48px; + border-radius: 2px; + box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.5); + background-image: linear-gradient(to bottom, #f1f1f1 0%, #bbbcbc 98%); + font-size: 14px; + font-weight: 500; + font-stretch: normal; + font-style: normal; + line-height: 1.15; + letter-spacing: normal; + color: #4b4b4b; + + img{ + margin-right: 20px; + } + + } + + label{ + width: 106px; + height: 32px; + font-size: 32px; + font-weight: 600; + font-stretch: normal; + font-style: normal; + line-height: 1; + letter-spacing: normal; + text-align: right; + color: #545454; + } + + } + + } + } \ No newline at end of file diff --git a/Thermo.Active/wwwroot/assets/styles/base/setup.less b/Thermo.Active/wwwroot/assets/styles/base/setup.less index 039de21d..09ead65d 100644 --- a/Thermo.Active/wwwroot/assets/styles/base/setup.less +++ b/Thermo.Active/wwwroot/assets/styles/base/setup.less @@ -154,12 +154,10 @@ header { background-color: @color-white; color: @color-darkish-blue; - font-weight: 600; font-size: 24px; text-align: left; padding: 0px 23px; - display: flex; flex-flow: row nowrap; justify-content: space-between; diff --git a/Thermo.Active/wwwroot/assets/styles/base/tastierino.less b/Thermo.Active/wwwroot/assets/styles/base/tastierino.less index 276dddb9..1709ee9f 100644 --- a/Thermo.Active/wwwroot/assets/styles/base/tastierino.less +++ b/Thermo.Active/wwwroot/assets/styles/base/tastierino.less @@ -4,86 +4,103 @@ @import "fonts.less"; .tast{ - margin-top: 30px; - margin-left: -350px; height: 261px; width: 293px; background-color:@color-silver; + + .mask{ + display: grid; + grid-template-columns: repeat(4, 52px); + grid-template-rows: repeat(4, 52px); + grid-gap: 5px 8px; + margin-top: 7%; + margin-left: 10%; + + button{ + border:none; + background-image: linear-gradient(to bottom, #f1f1f1 0%, #bbbcbc 98%); + box-shadow: 2px 10px 15px 0 rgba(0, 0, 0, 0.5); + color:@color-darkish-blue; + font-size:20px; + } + .zero{ + grid-column: 1/span 2; + grid-row: 4/5; + border:none; + background-image: linear-gradient(to bottom, #f1f1f1 0%, #bbbcbc 98%); + box-shadow: 2px 10px 15px 0 rgba(0, 0, 0, 0.5); + } + .submit{ + grid-column-start: 4; + grid-column-end: 5; + grid-row-start: 3; + grid-row-end: 5; + border:none; + background-image: linear-gradient(to bottom, #000080 0%, #191970 98%); + box-shadow: 2px 10px 15px 0 rgba(0, 0, 0, 0.5); + + img{ + width: 30px; + height: 30px; + } + + } + .bCanc{ + grid-column: 4/5; + grid-row: 2/3; + + img{ + width: 30px; + height: 25px; + } + + } + .b1{ + grid-column: 1/2; + grid-row: 3/4; + } + .b2{ + grid-column: 2/3; + grid-row: 3/4; + } + .b3{ + grid-column: 3/4; + grid-row: 3/4; + } + .b4{ + grid-column: 1/2; + grid-row: 2/3; + } + .b5{ + grid-column: 2/3; + grid-row: 2/3; + } + .b6{ + grid-column: 3/4; + grid-row: 2/3; + } + .b7{ + grid-column: 1/2; + grid-row: 1/2; + } + .b8{ + grid-column: 2/3; + grid-row: 1/2; + } + .b9{ + grid-column: 3/4; + grid-row: 1/2; + } + + .bPunto{ + grid-column: 3/4; + grid-row: 4/5; + } + .bDel{ + grid-column: 4/5; + grid-row: 1/2; + } + + } + } -.mask{ - display: grid; - grid-template-columns: repeat(4, 52px); - grid-template-rows: repeat(4, 52px); - grid-gap: 5px 8px; - margin-top: 7%; - margin-left: 10%; -} -.tasto{ - border:none; - background-image: linear-gradient(to bottom, #f1f1f1 0%, #bbbcbc 98%); - box-shadow: 2px 10px 15px 0 rgba(0, 0, 0, 0.5); -} -.zero{ - grid-column: 1/span 2; - grid-row: 4/5; - border:none; - background-image: linear-gradient(to bottom, #f1f1f1 0%, #bbbcbc 98%); - box-shadow: 2px 10px 15px 0 rgba(0, 0, 0, 0.5); -} -.submit{ - grid-column-start: 4; - grid-column-end: 5; - grid-row-start: 3; - grid-row-end: 5; - border:none; - background-image: linear-gradient(to bottom, #000080 0%, #191970 98%); - box-shadow: 2px 10px 15px 0 rgba(0, 0, 0, 0.5); -} -.b1{ - grid-column: 1/2; - grid-row: 3/4; -} -.b2{ - grid-column: 2/3; - grid-row: 3/4; -} -.b3{ - grid-column: 3/4; - grid-row: 3/4; -} -.b4{ - grid-column: 1/2; - grid-row: 2/3; -} -.b5{ - grid-column: 2/3; - grid-row: 2/3; -} -.b6{ - grid-column: 3/4; - grid-row: 2/3; -} -.b7{ - grid-column: 1/2; - grid-row: 1/2; -} -.b8{ - grid-column: 2/3; - grid-row: 1/2; -} -.b9{ - grid-column: 3/4; - grid-row: 1/2; -} -.bCanc{ - grid-column: 4/5; - grid-row: 2/3; -} -.bPunto{ - grid-column: 3/4; - grid-row: 4/5; -} -.bDel{ - grid-column: 4/5; - grid-row: 1/2; -} \ No newline at end of file diff --git a/Thermo.Active/wwwroot/assets/styles/style.css b/Thermo.Active/wwwroot/assets/styles/style.css index c7db5ca9..68ddc941 100644 --- a/Thermo.Active/wwwroot/assets/styles/style.css +++ b/Thermo.Active/wwwroot/assets/styles/style.css @@ -1,6 +1,373 @@ @import url(../../libs/font-awesome/css/font-awesome.css); @import url(../../libs/glyphicons/styles/glyphicons.css); @import "iziToast.min.css"; +.setup { + padding-top: 50px; + display: flex; + justify-content: flex-start; + align-items: center; + flex-flow: column nowrap; + width: 100vw; + height: 100vh; +} +.setup hr { + flex-shrink: 0; + background-color: #979797; + width: 2px; + height: 100%; + margin: 0; + margin-left: 5px; +} +.setup .modal { + width: 1820px; + height: 980px; +} +.setup .modal section.body { + height: calc(100% - 66px); +} +.setup .modal section.body section { + height: 100%; + flex-flow: row nowrap; + padding: 14px; + display: flex; + justify-content: flex-start; + width: calc(100% - 28px); + height: calc(100% - 28px - 82px); +} +.setup .modal section.body section .auto { + overflow-y: auto; + overflow-x: hidden; +} +.setup .modal section.body section aside { + display: flex; + justify-content: start; + flex-direction: column; + height: 100%; + width: 520px; + flex: 0 0 520px; + overflow-y: scroll; + padding-right: 10px; +} +.setup .modal section.body section aside hr { + flex-shrink: 0; + background-color: #979797; + width: 100%; + height: 2px; + margin-left: 0px; +} +.setup .modal section.body section .specific { + display: flex; + flex-direction: column; +} +.setup .modal section.body section .specific .svg-area { + display: flex; + justify-content: center; +} +.setup .modal section.body section .specific .svg-area .input-circles { + display: flex; + flex-direction: column; +} +.setup .modal section.body section .specific .svg-area .input-circles span { + object-fit: contain; + font-size: 22px; + font-weight: 500; + font-stretch: normal; + font-style: normal; + line-height: normal; + letter-spacing: normal; + text-align: center; + color: white; + background-color: #979797; +} +.setup .modal section.body section .specific .svg-area .input-circles .circle { + width: 141px; + height: 60px; + box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.5); + background-color: rgba(255, 255, 255, 0.8); + display: flex; + justify-content: flex-start; + object-fit: contain; + border-radius: 40.5px; + border: solid 4px #9b9b9b; +} +.setup .modal section.body section .specific .svg-area .input-circles input { + width: 40px; + height: 21px; + margin: auto; + object-fit: contain; + font-size: 20px; + font-weight: 500; + font-stretch: normal; + font-style: normal; + line-height: normal; + letter-spacing: normal; + color: #6d6d6d; + border: none; +} +.setup .modal section.body section .specific .svg-area .input-circles label { + margin: auto; + object-fit: contain; + font-size: 20px; + font-weight: 500; + font-stretch: normal; + font-style: normal; + line-height: normal; + letter-spacing: normal; + color: #6d6d6d; +} +.setup .modal section.body section .specific .svg-area .input-circles img { + margin: auto; + width: 20px; + height: 20px; + object-fit: contain; +} +.setup .modal section.body footer { + height: 82px; + display: flex; + justify-content: flex-end; + align-items: center; +} +.setup .modal header { + background-color: #fff; + color: #002680; + font-weight: 600; + font-size: 24px; + text-align: left; + padding: 0px 23px; + display: flex; + flex-flow: row nowrap; + justify-content: space-between; + align-items: stretch; +} +.modal.setup-info header { + padding-left: 31px; + display: flex; + align-items: center; + font-size: 20px; + font-weight: bold; + color: darkblue; +} +.tab-header { + display: flex; + flex-flow: row; + align-items: stretch; + justify-content: flex-start; +} +.tab-header button { + background: none; + border: 1px solid #bbbcbc; + padding: 0 38px; + border-bottom: none; + font-size: 20px; + background-color: #bbbcbc; + color: #002680; +} +.tab-header button.active { + background-color: #fff; + font-weight: bold; + border-top: 2px solid #002680; +} +.modal.setup-info { + width: 1639px; + height: 695px; + background-color: #fff; + margin: 150px 193px; + box-shadow: none; +} +.modal.setup-info section { + height: 100%; +} +.modal.setup-info section .Rectangle { + width: calc(100% - 200px); + height: calc(100% - 200px); + background-color: #BBBCBC; + display: grid; + grid-template-columns: repeat(6, 1fr); + grid-template-rows: 1fr 1fr; + align-items: center; + justify-items: center; + padding: 100px; +} +.setup-button { + cursor: pointer; + display: grid; + width: 200px; + height: 128px; + grid-template-columns: 50px 1fr; + grid-template-rows: 1fr 50px; + position: relative; +} +.setup-button span, +.setup-button label { + grid-column: 1; + display: flex; + align-items: flex-end; + color: #fff; + z-index: 2; + justify-content: center; + font-weight: 500; + font-size: 18px; + padding-left: 10px; +} +.setup-button label { + grid-column: 2; + color: #002680; + justify-content: flex-start; +} +.setup-button img { + grid-column: 2; + grid-row: 2; + z-index: 2; + margin: auto; +} +.setup-button i { + grid-column: 2; + grid-row: 2; + z-index: 2; + margin: auto; + transform: scale(1.5); +} +.setup-button i.fa-check-circle { + color: #90BF3D; +} +.setup-button i.fa-minus-circle { + color: #7A7C74; +} +.setup-button .background-top, +.setup-button .background-bottom { + position: absolute; + left: 0; + width: 100%; + height: 50%; + transform: skewX(12px); +} +.setup-button .background-top:after, +.setup-button .background-bottom:after { + content: ""; + display: block; + position: absolute; + left: 0; + top: 0; + height: 100%; + width: 35px; + background-color: #002680; +} +.setup-button .background-top { + background-image: linear-gradient(to bottom, #fff, #e6e6e6); + top: 0; + transform: skewX(20deg); +} +.setup-button .background-bottom { + background-image: linear-gradient(to bottom, #e6e6e6, #e2e2e2); + bottom: 0; + transform: skewX(-20deg); +} +.box { + margin-bottom: 30px; + box-sizing: border-box; + clear: both; +} +.box .header { + display: flex; + align-items: center; + justify-content: center; + height: 44px; + width: 100%; + font-size: 24px; + font-weight: bold; + color: #fff; + background-color: #979797; +} +.box .body { + padding: 20px; + display: flex; + flex-flow: column; + justify-items: center; + padding-bottom: 10px; + border: 2px solid #979797; +} +.box .submit { + margin: auto; + width: 90px; + height: 48px; + object-fit: contain; + border-radius: 8px; + border: none; + box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.5); + background-image: linear-gradient(to bottom, #f1f1f1 0%, #bbbcbc 98%); +} +.box .submit label { + object-fit: contain; + font-size: 18px; + font-weight: 500; + font-stretch: normal; + font-style: normal; + line-height: normal; + letter-spacing: normal; + text-align: center; + color: #002680; +} +.input-area { + margin: 10px auto; + display: flex; + flex-flow: row; + align-items: center; + justify-content: space-between; + width: 100%; + height: 48px; +} +.input-area.col { + flex-flow: column; + align-items: flex-start; + height: auto; +} +.input-area h3 { + font-weight: normal; + color: #002680; + margin: 18px 0; +} +.input-area .buttons { + width: 100%; + display: flex; + flex-flow: row; + margin-bottom: 18px; +} +.input-area .buttons:last-child { + margin-bottom: 0; +} +.input-area label { + color: #002680; + font-size: 24px; + font-weight: 500; + flex: 1; +} +.input-area .rect { + object-fit: contain; + font-size: 20px; + font-weight: 500; + font-stretch: normal; + font-style: normal; + line-height: normal; + letter-spacing: normal; + color: #6d6d6d; + text-align: center; + width: 98px; + height: 48px; + border-radius: 2px; + box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.5); +} +.input-area select { + min-width: 150px; + height: 48px; + background-color: #fff; + padding: 0 20px; + font-size: 1rem; +} +.setup-play { + cursor: pointer; + margin: auto; + display: flex; +} .text-success { color: #002680; } @@ -3986,13 +4353,11 @@ margin: 16px; } .tast { - margin-top: 30px; - margin-left: -350px; height: 261px; width: 293px; background-color: #bbbcbc; } -.mask { +.tast .mask { display: grid; grid-template-columns: repeat(4, 52px); grid-template-rows: repeat(4, 52px); @@ -4000,19 +4365,21 @@ margin-top: 7%; margin-left: 10%; } -.tasto { +.tast .mask button { border: none; background-image: linear-gradient(to bottom, #f1f1f1 0%, #bbbcbc 98%); box-shadow: 2px 10px 15px 0 rgba(0, 0, 0, 0.5); + color: #002680; + font-size: 20px; } -.zero { +.tast .mask .zero { grid-column: 1 / span 2; grid-row: 0.8; border: none; background-image: linear-gradient(to bottom, #f1f1f1 0%, #bbbcbc 98%); box-shadow: 2px 10px 15px 0 rgba(0, 0, 0, 0.5); } -.submit { +.tast .mask .submit { grid-column-start: 4; grid-column-end: 5; grid-row-start: 3; @@ -4021,424 +4388,138 @@ background-image: linear-gradient(to bottom, #000080 0%, #191970 98%); box-shadow: 2px 10px 15px 0 rgba(0, 0, 0, 0.5); } -.b1 { - grid-column: 0.5; - grid-row: 0.75; +.tast .mask .submit img { + width: 30px; + height: 30px; } -.b2 { - grid-column: 0.66666667; - grid-row: 0.75; -} -.b3 { - grid-column: 0.75; - grid-row: 0.75; -} -.b4 { - grid-column: 0.5; - grid-row: 0.66666667; -} -.b5 { - grid-column: 0.66666667; - grid-row: 0.66666667; -} -.b6 { - grid-column: 0.75; - grid-row: 0.66666667; -} -.b7 { - grid-column: 0.5; - grid-row: 0.5; -} -.b8 { - grid-column: 0.66666667; - grid-row: 0.5; -} -.b9 { - grid-column: 0.75; - grid-row: 0.5; -} -.bCanc { +.tast .mask .bCanc { grid-column: 0.8; grid-row: 0.66666667; } -.bPunto { +.tast .mask .bCanc img { + width: 30px; + height: 25px; +} +.tast .mask .b1 { + grid-column: 0.5; + grid-row: 0.75; +} +.tast .mask .b2 { + grid-column: 0.66666667; + grid-row: 0.75; +} +.tast .mask .b3 { + grid-column: 0.75; + grid-row: 0.75; +} +.tast .mask .b4 { + grid-column: 0.5; + grid-row: 0.66666667; +} +.tast .mask .b5 { + grid-column: 0.66666667; + grid-row: 0.66666667; +} +.tast .mask .b6 { + grid-column: 0.75; + grid-row: 0.66666667; +} +.tast .mask .b7 { + grid-column: 0.5; + grid-row: 0.5; +} +.tast .mask .b8 { + grid-column: 0.66666667; + grid-row: 0.5; +} +.tast .mask .b9 { + grid-column: 0.75; + grid-row: 0.5; +} +.tast .mask .bPunto { grid-column: 0.75; grid-row: 0.8; } -.bDel { +.tast .mask .bDel { grid-column: 0.8; grid-row: 0.5; } +.circle-gantt { + height: 70px; +} +.circle-gantt .specific div:first-of-type { + display: flex; + flex-direction: column; + justify-content: flex-end; + height: 70px; + object-fit: contain; + border-radius: 2px; + background-color: #57636b; +} +.circle-gantt .specific div:first-of-type label { + margin-left: 37%; +} +.circle-gantt .specific div:last-of-type { + display: flex; + flex-direction: column; + justify-content: center; + margin-top: -66px; + height: 40px; + object-fit: contain; + border-radius: 2px; + background-color: #c0c7cc; +} +.circle-gantt .specific div:last-of-type label { + margin-left: 25%; +} +.circle-gantt .specific:first-of-type div:first-of-type { + display: flex; + flex-direction: column; + justify-content: flex-end; + width: 34px; + height: 70px; + object-fit: contain; + border-radius: 2px; + background-color: #57636b; +} +.circle-gantt .specific:first-of-type div:first-of-type label { + margin-left: 25%; +} +.circle-gantt .specific:first-of-type div:last-of-type { + display: flex; + flex-direction: column; + justify-content: flex-end; + margin-top: -66px; + width: 34px; + height: 40px; + object-fit: contain; + border-radius: 2px; + background-color: #c0c7cc; +} +.circle-gantt .specific:first-of-type div:last-of-type img { + margin-left: 25%; + flex-shrink: 0; + width: 20px; + height: 20px; +} .modal.estrazione-info { width: 560px; height: 411px; } -.setup { - padding-top: 50px; - display: flex; - justify-content: flex-start; - align-items: center; - flex-flow: column nowrap; - width: 100vw; - height: 100vh; +.modal.avvio-produzione-info { + margin-top: 100px; + width: 653px; + height: 616px; } -.setup hr { - flex-shrink: 0; - background-color: #979797; - width: 2px; - height: 100%; - margin: 0; - margin-left: 5px; -} -.setup .modal { - width: 1820px; - height: 980px; -} -.setup .modal section.body { - height: calc(100% - 66px); -} -.setup .modal section.body section { - height: 100%; - flex-flow: row nowrap; - padding: 14px; - display: flex; - justify-content: flex-start; - width: calc(100% - 28px); - height: calc(100% - 28px - 82px); -} -.setup .modal section.body section .auto { - overflow-y: auto; - overflow-x: hidden; -} -.setup .modal section.body section aside { - display: flex; - justify-content: start; - flex-direction: column; - height: 100%; - width: 520px; - flex: 0 0 520px; - overflow-y: scroll; - padding-right: 10px; -} -.setup .modal section.body section aside hr { - flex-shrink: 0; - background-color: #979797; - width: 100%; - height: 2px; - margin-left: 0px; -} -.setup .modal section.body section .specific { - display: flex; - flex-direction: column; -} -.setup .modal section.body section .specific .svg-area { - display: flex; +.modal.avvio-produzione-info section.body section { justify-content: center; } -.setup .modal section.body section .specific .svg-area .input-circles { - display: flex; - flex-direction: column; +.modal.avvio-produzione-info section.body section .specific .disabled { + width: 420px; + height: 330px; } -.setup .modal section.body section .specific .svg-area .input-circles span { - object-fit: contain; - font-size: 22px; - font-weight: 500; - font-stretch: normal; - font-style: normal; - line-height: normal; - letter-spacing: normal; - text-align: center; - color: white; - background-color: #979797; -} -.setup .modal section.body section .specific .svg-area .input-circles .circle { - width: 141px; - height: 60px; - box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.5); - background-color: rgba(255, 255, 255, 0.8); - display: flex; - justify-content: flex-start; - object-fit: contain; - border-radius: 40.5px; - border: solid 4px #9b9b9b; -} -.setup .modal section.body section .specific .svg-area .input-circles input { - width: 40px; - height: 21px; - margin: auto; - object-fit: contain; - font-size: 20px; - font-weight: 500; - font-stretch: normal; - font-style: normal; - line-height: normal; - letter-spacing: normal; - color: #6d6d6d; - border: none; -} -.setup .modal section.body section .specific .svg-area .input-circles label { - margin: auto; - object-fit: contain; - font-size: 20px; - font-weight: 500; - font-stretch: normal; - font-style: normal; - line-height: normal; - letter-spacing: normal; - color: #6d6d6d; -} -.setup .modal section.body section .specific .svg-area .input-circles img { - margin: auto; - width: 20px; - height: 20px; - object-fit: contain; -} -.setup .modal section.body footer { - height: 82px; - display: flex; - justify-content: flex-end; - align-items: center; -} -.setup .modal header { - background-color: #fff; - color: #002680; - font-weight: 600; - font-size: 24px; - text-align: left; - padding: 0px 23px; - display: flex; - flex-flow: row nowrap; - justify-content: space-between; - align-items: stretch; -} -.modal.setup-info header { - padding-left: 31px; - display: flex; - align-items: center; - font-size: 20px; - font-weight: bold; - color: darkblue; -} -.tab-header { - display: flex; - flex-flow: row; - align-items: stretch; - justify-content: flex-start; -} -.tab-header button { - background: none; - border: 1px solid #bbbcbc; - padding: 0 38px; - border-bottom: none; - font-size: 20px; - background-color: #bbbcbc; - color: #002680; -} -.tab-header button.active { - background-color: #fff; - font-weight: bold; - border-top: 2px solid #002680; -} -.modal.setup-info { - width: 1639px; - height: 695px; - background-color: #fff; - margin: 150px 193px; - box-shadow: none; -} -.modal.setup-info section { - height: 100%; -} -.modal.setup-info section .Rectangle { - width: calc(100% - 200px); - height: calc(100% - 200px); - background-color: #BBBCBC; - display: grid; - grid-template-columns: repeat(6, 1fr); - grid-template-rows: 1fr 1fr; - align-items: center; - justify-items: center; - padding: 100px; -} -.setup-button { - cursor: pointer; - display: grid; - width: 200px; - height: 128px; - grid-template-columns: 50px 1fr; - grid-template-rows: 1fr 50px; - position: relative; -} -.setup-button span, -.setup-button label { - grid-column: 1; - display: flex; - align-items: flex-end; - color: #fff; - z-index: 2; - justify-content: center; - font-weight: 500; - font-size: 18px; - padding-left: 10px; -} -.setup-button label { - grid-column: 2; - color: #002680; - justify-content: flex-start; -} -.setup-button img { - grid-column: 2; - grid-row: 2; - z-index: 2; - margin: auto; -} -.setup-button i { - grid-column: 2; - grid-row: 2; - z-index: 2; - margin: auto; - transform: scale(1.5); -} -.setup-button i.fa-check-circle { - color: #90BF3D; -} -.setup-button i.fa-minus-circle { - color: #7A7C74; -} -.setup-button .background-top, -.setup-button .background-bottom { - position: absolute; - left: 0; - width: 100%; - height: 50%; - transform: skewX(12px); -} -.setup-button .background-top:after, -.setup-button .background-bottom:after { - content: ""; - display: block; - position: absolute; - left: 0; - top: 0; - height: 100%; - width: 35px; - background-color: #002680; -} -.setup-button .background-top { - background-image: linear-gradient(to bottom, #fff, #e6e6e6); - top: 0; - transform: skewX(20deg); -} -.setup-button .background-bottom { - background-image: linear-gradient(to bottom, #e6e6e6, #e2e2e2); - bottom: 0; - transform: skewX(-20deg); -} -.box { - margin-bottom: 30px; - box-sizing: border-box; - clear: both; -} -.box .header { - display: flex; - align-items: center; - justify-content: center; - height: 44px; - width: 100%; - font-size: 24px; - font-weight: bold; - color: #fff; - background-color: #979797; -} -.box .body { - padding: 20px; - display: flex; - flex-flow: column; - justify-items: center; - padding-bottom: 10px; - border: 2px solid #979797; -} -.box .submit { - margin: auto; - width: 90px; - height: 48px; - object-fit: contain; - border-radius: 8px; - border: none; - box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.5); - background-image: linear-gradient(to bottom, #f1f1f1 0%, #bbbcbc 98%); -} -.box .submit label { - object-fit: contain; - font-size: 18px; - font-weight: 500; - font-stretch: normal; - font-style: normal; - line-height: normal; - letter-spacing: normal; - text-align: center; - color: #002680; -} -.input-area { - margin: 10px auto; - display: flex; - flex-flow: row; - align-items: center; - justify-content: space-between; - width: 100%; - height: 48px; -} -.input-area.col { - flex-flow: column; - align-items: flex-start; - height: auto; -} -.input-area h3 { - font-weight: normal; - color: #002680; - margin: 18px 0; -} -.input-area .buttons { - width: 100%; - display: flex; - flex-flow: row; - margin-bottom: 18px; -} -.input-area .buttons:last-child { - margin-bottom: 0; -} -.input-area label { - color: #002680; - font-size: 24px; - font-weight: 500; - flex: 1; -} -.input-area .rect { - object-fit: contain; - font-size: 20px; - font-weight: 500; - font-stretch: normal; - font-style: normal; - line-height: normal; - letter-spacing: normal; - color: #6d6d6d; - text-align: center; - width: 98px; - height: 48px; - border-radius: 2px; - box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.5); -} -.input-area select { - min-width: 150px; - height: 48px; - background-color: #fff; - padding: 0 20px; - font-size: 1rem; -} -.setup-play { - cursor: pointer; - margin: auto; - display: flex; +.modal.avvio-produzione-info section.body section .specific .tast { + margin-left: 25%; } .modal.ciclo-info section .specific { padding: 0 10px; @@ -4507,7 +4588,47 @@ .modal.processo-info { width: 1820px; height: 980px; - margin: 150px 193px; + margin-top: 50px; +} +.modal.processo-info header { + font-size: 22px; + color: #4b4b4b; +} +.modal.processo-info header .tab-header { + padding: 10px 0px; +} +.modal.processo-info header .tab-header button { + padding: 0; + display: flex; + justify-content: flex-start; + margin-right: 10px; + width: 149px; + height: 48px; + border-radius: 2px; + box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.5); + background-image: linear-gradient(to bottom, #f1f1f1 0%, #bbbcbc 98%); + font-size: 14px; + font-weight: 500; + font-stretch: normal; + font-style: normal; + line-height: 1.15; + letter-spacing: normal; + color: #4b4b4b; +} +.modal.processo-info header .tab-header button img { + margin-right: 20px; +} +.modal.processo-info header .tab-header label { + width: 106px; + height: 32px; + font-size: 32px; + font-weight: 600; + font-stretch: normal; + font-style: normal; + line-height: 1; + letter-spacing: normal; + text-align: right; + color: #545454; } .modal.progr-preriscaldo-info { width: 1639px; diff --git a/Thermo.Active/wwwroot/src/app.business-logic.ts b/Thermo.Active/wwwroot/src/app.business-logic.ts index 0ea51ce9..99391de1 100644 --- a/Thermo.Active/wwwroot/src/app.business-logic.ts +++ b/Thermo.Active/wwwroot/src/app.business-logic.ts @@ -16,6 +16,7 @@ import ShowEstrazioneInfo from "@/app_modules_thermo/setup/estrazione/components import ShowVuotoInfo from "@/app_modules_thermo/setup/vuoto/show-vuoto-info.vue"; import ShowImbutituraInfo from "@/app_modules_thermo/setup/imbutitura/show-imbutitura-info.vue"; import ShowOpzioniInfo from "@/app_modules_thermo/setup/opzioni/show-opzioni-info.vue"; +import AvvioProduzione from "@/app_modules_thermo/setup/avvio-pruduzione/avvio-produzione.vue"; import ShowArretramentoRiscaldiInfo from "@/app_modules_thermo/processo/arretramento-riscaldi/show-arretramento-riscladi-info.vue"; // import { DataService } from "./services/dataService"; // import { ToolingService } from "./services/toolingService"; @@ -51,6 +52,7 @@ let HMIScreenshotInterval; let HMIprodTimeout; let RerenderInterval; +messageService.subscribeToChannel("show-avvio-produzione-info", () => { ModalHelper.ShowModal(AvvioProduzione); }); messageService.subscribeToChannel("show-arretramento-riscaldi-info", () => { ModalHelper.ShowModal(ShowArretramentoRiscaldiInfo); }); messageService.subscribeToChannel("show-opzioni-info", () => { ModalHelper.ShowModal(ShowOpzioniInfo); }); messageService.subscribeToChannel("show-vuoto-info", () => { ModalHelper.ShowModal(ShowVuotoInfo); }); diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/processo/circles-gantt/circle-gantt.ts b/Thermo.Active/wwwroot/src/app_modules_thermo/processo/circles-gantt/circle-gantt.ts new file mode 100644 index 00000000..fa85e600 --- /dev/null +++ b/Thermo.Active/wwwroot/src/app_modules_thermo/processo/circles-gantt/circle-gantt.ts @@ -0,0 +1,17 @@ +import Vue from 'vue'; +import Component from 'vue-class-component'; +import {Prop} from 'vue-property-decorator'; + +@Component({name:"circlegantt"}) +export default class CircleGantt extends Vue{ + + @Prop({default:2}) + value:number; + @Prop({default:0}) + late:number; + @Prop({default:'s'}) + unit:string; + @Prop({default:'Discesa cornice'}) + title:string; + +} \ No newline at end of file diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/processo/circles-gantt/circle-gantt.vue b/Thermo.Active/wwwroot/src/app_modules_thermo/processo/circles-gantt/circle-gantt.vue new file mode 100644 index 00000000..e8f71421 --- /dev/null +++ b/Thermo.Active/wwwroot/src/app_modules_thermo/processo/circles-gantt/circle-gantt.vue @@ -0,0 +1,25 @@ + + + \ No newline at end of file diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/processo/components/processo.ts b/Thermo.Active/wwwroot/src/app_modules_thermo/processo/components/processo.ts index 7ffb8c95..383243d1 100644 --- a/Thermo.Active/wwwroot/src/app_modules_thermo/processo/components/processo.ts +++ b/Thermo.Active/wwwroot/src/app_modules_thermo/processo/components/processo.ts @@ -3,13 +3,21 @@ import Component from 'vue-class-component'; import {Prop} from 'vue-property-decorator'; import { messageService } from "@/_base/messageService"; import { Modal, ModalHelper } from "@/components/modals"; +import CircleGantt from "../circles-gantt/circle-gantt.vue" @Component({ components: { - modal: Modal + modal: Modal, + circlegantt: CircleGantt } }) export default class Processo extends Vue{ + + @Prop({default:25}) + actual:number; + @Prop({default:145}) + tot:number; + public sendMessage(name: string) { messageService.publishToChannel(name); } diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/processo/components/processo.vue b/Thermo.Active/wwwroot/src/app_modules_thermo/processo/components/processo.vue index d50267ba..b65e5537 100644 --- a/Thermo.Active/wwwroot/src/app_modules_thermo/processo/components/processo.vue +++ b/Thermo.Active/wwwroot/src/app_modules_thermo/processo/components/processo.vue @@ -1,7 +1,16 @@ diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/avvio-pruduzione/avvio-produzione.ts b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/avvio-pruduzione/avvio-produzione.ts new file mode 100644 index 00000000..2f8e5d7b --- /dev/null +++ b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/avvio-pruduzione/avvio-produzione.ts @@ -0,0 +1,48 @@ +import Vue from "vue"; +import { Modal, ModalHelper } from "@/components/modals"; +import { Factory, messageService, awaiter } from "@/_base"; +import Component from "vue-class-component"; +import { Prop } from 'vue-property-decorator'; +import ToggleButton from "@/components/toggleButton.vue"; +import Tastierino from "@/app_modules_thermo/setup/formato/components/tastierino.vue" + +@Component({ + components: { + modal: Modal, + ToggleButton, + tastierino:Tastierino + } +}) +export default class AvvioProduzione extends Vue { + + enabling:boolean=true; + @Prop({default:0}) + pieces:number; + + mock_pieces:number=this.pieces; + + annulla(){ + ModalHelper.HideModal(); + }; + + conferma(){ + ModalHelper.HideModal(); + }; + + async beforeMount() { + // this.contactInfo = await awaiter(new machineService().getContactConfiguration()); + messageService.subscribeToChannel("esc_pressed", args => { + this.close(); + }); + } + + beforeDestroy() { + messageService.deleteChannel("esc_pressed"); + } + + close() { + messageService.deleteChannel("esc_pressed"); + ModalHelper.HideModal(); + } + +} \ No newline at end of file diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/avvio-pruduzione/avvio-produzione.vue b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/avvio-pruduzione/avvio-produzione.vue new file mode 100644 index 00000000..289dbb0c --- /dev/null +++ b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/avvio-pruduzione/avvio-produzione.vue @@ -0,0 +1,31 @@ + + + \ No newline at end of file diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/components/setup.vue b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/components/setup.vue index 2ddfaebe..9ea6e0a9 100644 --- a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/components/setup.vue +++ b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/components/setup.vue @@ -80,7 +80,7 @@ >
- +
diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/formato/components/tastierino.vue b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/formato/components/tastierino.vue index 237aef50..a404b798 100644 --- a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/formato/components/tastierino.vue +++ b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/formato/components/tastierino.vue @@ -1,20 +1,20 @@