From c53d08fce4dc2b47462defe81a4fc30c5caf7eb0 Mon Sep 17 00:00:00 2001 From: Giacomo Canonico Date: Tue, 26 Mar 2019 18:17:27 +0100 Subject: [PATCH] Commit bugfix grafica WP10 --- Step/wwwroot/assets/styles/base/alarms.less | 2297 +++++++++-------- Step/wwwroot/assets/styles/base/card.less | 73 +- Step/wwwroot/assets/styles/base/layout.less | 4 +- Step/wwwroot/assets/styles/base/tooltip.less | 81 +- Step/wwwroot/assets/styles/style.css | 478 +++- Step/wwwroot/index.html | 3 +- Step/wwwroot/package.json | 127 +- .../alarms/components/alarm-history.vue | 7 +- .../components/card-report-machine-status.ts | 35 +- .../components/card-report-machine-status.vue | 4 +- .../components/card-report-production.ts | 28 +- .../components/card-report-production.vue | 8 +- .../components/card-report-timeline.ts | 22 +- .../components/card-report-timeline.vue | 4 +- .../doughnut-chart/doughnut-chart.ts | 136 + .../doughnut-chart/doughnut-chart.vue | 46 + .../src/components/doughnut-chart/index.js | 5 + .../timeline-chart/timeline-chart-header.ts | 1 + Step/wwwroot/src/main.js | 2 - 19 files changed, 2098 insertions(+), 1263 deletions(-) create mode 100644 Step/wwwroot/src/components/doughnut-chart/doughnut-chart.ts create mode 100644 Step/wwwroot/src/components/doughnut-chart/doughnut-chart.vue create mode 100644 Step/wwwroot/src/components/doughnut-chart/index.js diff --git a/Step/wwwroot/assets/styles/base/alarms.less b/Step/wwwroot/assets/styles/base/alarms.less index 26556e17..511c62f3 100644 --- a/Step/wwwroot/assets/styles/base/alarms.less +++ b/Step/wwwroot/assets/styles/base/alarms.less @@ -1,1092 +1,1323 @@ // out: false, sourceMap: false, main: ../style.less @import "colors.less"; + #alarm-list, #service-list { - position: absolute; - left: 0; - width: 0; - height: 0; - top: 40px; - background-color: #fff; - padding: 0 0; - z-index: 800; - box-sizing: border-box; - display: flex; - flex-wrap: nowrap; - overflow: hidden; - transition: width 200ms ease-in-out, height 200ms ease-in-out, padding 200ms ease-in-out, background-color 200ms ease-in-out,box-shadow 0ms 0ms; + position: absolute; + left: 0; + width: 0; + height: 0; + top: 40px; + background-color: #fff; + padding: 0 0; + z-index: 800; + box-sizing: border-box; + display: flex; + flex-wrap: nowrap; + overflow: hidden; + transition: width 200ms ease-in-out, height 200ms ease-in-out, padding 200ms ease-in-out, background-color 200ms ease-in-out, box-shadow 0ms 0ms; - &.expanded { - width: 494px; - padding: 0 24px; + &.expanded { + width: 494px; + padding: 0 24px; + } + + &.expanded.opened { + padding: 72px 24px 24px 0px; + height: calc(~"100vh - 120px"); + box-shadow: @color-alarm-list-shadow; + transition: width 200ms ease-in-out, height 200ms ease-in-out, padding 200ms ease-in-out, background-color 200ms ease-in-out, box-shadow 20ms 180ms; + } + + &.alarm { + background-color: @color-faded-red; + color: @color-greyish-brown; + } + + &.warning { + background-color: @color-sandy; + color: @color-greyish-brown; + } + + &>.content { + height: calc(~"100% - 60px"); + padding-right: 24px; + padding-left: 24px; + min-width: calc(~"100% - 48px"); + // transition: margin-left 200ms ease-in-out 200ms; + transition: margin-left 200ms ease-in-out; + + &.collapsed { + margin-left: -100%; } - &.expanded.opened { - padding: 72px 24px 24px 0px; - height: calc(~"100vh - 120px"); - box-shadow: @color-alarm-list-shadow; - transition: width 200ms ease-in-out, height 200ms ease-in-out, padding 200ms ease-in-out, background-color 200ms ease-in-out,box-shadow 20ms 180ms; + + &>.general-buttons { + display: flex; + justify-content: space-between; + position: absolute; + bottom: 10px; + left: 16px; + height: 50px; + margin-bottom: 12px; + width: calc(~"100% - 72px"); + transition: margin-left 200ms ease-in-out; + // transition: margin-left 200ms ease-in-out 200ms; + + &.collapsed { + margin-left: -100%; + } + + .btn { + font-size: 16px; + } + } + } + + .alarm-detail.content { + color: #fff; + + // height: 100%; + &.warning { + color: @color-greyish-brown; + + .sources { + span.source { + border: 1px solid @color-greyish-brown !important; + color: @color-greyish-brown; + } + } + } + + & h2 { + // height: 21px; + font-size: 18px; + line-height: 21px; + margin: 0; + } + + .btn-back { + position: absolute; + bottom: 12px; + } + + .general-buttons { + display: flex; + justify-content: space-between; + position: unset; + width: auto; + left: 0; + + .btn { + font-size: 16px; + } + } + + .sources { + margin-top: 10px; + + span.source { + font-size: 14px; + float: left; + display: block; + border: 1px solid #fff !important; + color: #fff; + font-weight: 600; + min-height: 20px; + padding: 0 5px; + line-height: 20px; + margin-bottom: 3px; + margin-right: 5px; + } + + &:after { + content: " "; + display: block; + clear: both; + } + } + + time { + display: block; + } + + span.summary { + margin: 20px 0; + display: block; + } + + hr { + border-style: solid; + } + + .user-help { + background-color: #fff; + display: flex; + height: 64px; + margin: 12px 0; + align-items: center; + border-radius: 2px; + box-shadow: @small-shadow; + + .detail { + width: 100%; + + strong, + span { + display: block; + color: @color-darkish-blue; + font-size: 14px; + } + + strong { + font-size: 18px; + } + } + + i.group { + min-width: 28px; + height: 28px; + object-fit: contain; + background-image: url(../icons/png/group.png); + background-size: cover; + margin: 0 12px; + } + } + } + + .alarm-item { + width: 100%; + background-color: #fff; + display: flex; + box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4); + border-radius: 2px; + flex-flow: row; + margin-bottom: 8px; + + &.warning { + + .content h2, + .content .summary { + color: @color-squash; + } } &.alarm { - background-color: @color-faded-red; - color: @color-greyish-brown; - } - &.warning { - background-color: @color-sandy; - color: @color-greyish-brown; - } - &>.content { - height: calc(~"100% - 60px"); - padding-right: 24px; - padding-left: 24px; - min-width: calc(~"100% - 48px"); - // transition: margin-left 200ms ease-in-out 200ms; - transition: margin-left 200ms ease-in-out; - &.collapsed { - margin-left: -100%; + .content h2, + .content .summary { + color: @color-scarlet; + } + } + + .content { + width: 240px; + margin: 8px; + margin-left: 24px; + display: flex; + flex-flow: column; + justify-content: space-between; + align-content: space-between; + + h2 { + // height: 21px; + font-size: 18px; + line-height: 21px; + margin: 0; + } + + .summary { + font-size: 16px; + line-height: 22px; + margin: 0; + display: flex; + flex-flow: row; + justify-content: space-between; + } + + .sourcecontainer { + font-size: 14px; + display: block; + color: @color-greyish-brown ; + font-weight: 600; + + .source { + border: 1px solid @color-warm-grey !important; + padding: 0 5px; + margin-right: 3px; } - &>.general-buttons { + } + } + + button { + cursor: pointer; + border-radius: 2px; + font-size: 18px; + border: 1px solid #ccc; + margin: 8px; + width: 120px; + color: @color-darkish-blue; + height: 48px; + background-image: linear-gradient(to bottom, #f1f1f1, #bbbcbc); + + &:active { + background-image: linear-gradient(to bottom, #bbbcbc, #f1f1f1); + } + } + } +} + +.accordion { + header { + height: 64px; + border-radius: 2px; + box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4); + display: flex; + justify-content: space-between; + align-items: center; + cursor: pointer; + + small { + border: 2px solid #fff; + border-radius: 100px; + min-width: 28px; + min-height: 28px; + font-size: 12px; + display: block; + text-align: center; + line-height: 28px; + margin: 0 12px; + } + + strong { + width: 100%; + } + + .expander { + margin: 0 12px; + line-height: 28px; + height: 28px; + width: 28px; + font-size: 28px; + } + } + + section { + 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%; + text-align: center; + line-height: 64px; + } + + .dropdown { + // background-color: @color-white2; + height: 100%; + margin-top: 2px; + + .filename { + display: flex; + height: 64px; + align-items: center; + cursor: pointer; + + i { + margin: 0 20px 0 20px; + } + + span { + width: 100%; + font-size: 18px; + line-height: 1; + // color: @color-greyish-brown; + } + + &.selected { + + span, + i { + color: #4b4b4b; + } + } + + .right { + width: 100%; + display: flex; + justify-content: flex-end; + + button.btn-hidden { + visibility: hidden; + + i { + font-size: 26px; + visibility: visible; + margin: 0 12px; + cursor: pointer; + } + } + } + } + + .filename.selected { + background-color: rgba(255, 255, 255, 0.8); + } + + .all-message-box { + max-height: 310px; + + .message-box { + width: 390px; + min-height: 96px; + display: flex; + flex-flow: column; + align-items: center; + justify-content: center; + margin: 0 auto; + cursor: pointer; + + .message-box-header { + height: calc(~'100% - 20px'); + width: 100%; display: flex; - justify-content: space-between; - position: absolute; - bottom: 10px; - left: 16px; - height: 50px; - margin-bottom: 12px; - width: calc(~"100% - 72px"); - transition: margin-left 200ms ease-in-out; - // transition: margin-left 200ms ease-in-out 200ms; + flex-flow: row; - &.collapsed { - margin-left: -100%; + textarea { + border: none; + resize: none; + // background-color: transparent; + padding: 3px; + box-sizing: border-box; + cursor: pointer; } - .btn { - font-size: 16px; + + .avatar { + width: 40px; + height: 40px; + margin-left: 16px; + margin-top: 8px; + float: left; + background-color: @color-harmonies; + color: black; + line-height: 40px; + border-radius: 20px; + text-align: center; + font-family: Arial, sans-serif; + font-size: 18px; + font-weight: bold; + text-transform: uppercase; } + + .text-message { + margin-left: 8px; + width: 328px; + height: 40px; + border-radius: 2px; + box-shadow: 0 1px 2px 0 @color-black-50; + margin-top: 8px; + float: right; + cursor: pointer; + } + } + + .message-box-body { + display: flex; + width: 100%; + height: 14px; + margin-left: 132px; + + &.my { + margin-left: 15px; + } + + .text-date { + font-size: 12px; + color: @color-greyish-brown; + float: left; + width: 100%; + height: 100%; + cursor: pointer; + } + } + + .groupbutton { + width: 100%; + height: 32px; + display: flex; + justify-content: flex-end; + + &.enablemodify { + height: 100%; + + } + + + button.btn-hidden { + visibility: hidden; + + i { + font-size: 26px; + visibility: visible; + margin: 0 12px; + cursor: pointer; + } + } + + .modify-padding { + padding: 9px 0px; + } + } } - } - .alarm-detail.content { - color: #fff; - // height: 100%; - &.warning { - color: @color-greyish-brown; - .sources { - span.source { - border: 1px solid @color-greyish-brown !important; - color: @color-greyish-brown; - } - } + + .message-box.selected { + background-color: rgba(255, 255, 255, 0.8); } - & h2 { - // height: 21px; + } + + .allattach { + display: flex; + height: 64px; + align-items: center; + + button.btn-hidden { + visibility: hidden; + + span { font-size: 18px; - line-height: 21px; - margin: 0; + line-height: 1; + visibility: visible; + margin: 0 0 0 20px; + // color: @color-greyish-brown; + cursor: pointer; + } + } + } + + .allnotes { + display: flex; + height: 20px; + width: 408px; + margin: 23px auto; + + button.btn-hidden { + visibility: hidden; + + span { + font-size: 18px; + line-height: 1; + visibility: visible; + margin: 0 0 0 20px; + color: @color-greyish-brown; + cursor: pointer; + } } - .btn-back{ - position: absolute; - bottom: 12px; + } + + .addattach { + display: flex; + height: 64px; + align-items: center; + justify-content: center; + border-top: solid 1px rgba(255, 255, 255, 0.1); + + .btn { + box-sizing: border-box; + border-radius: 2px; + margin: 0 8px; + text-align: center; + font-size: 18px; + font-weight: bold; + box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4); + padding: 14px 17px; + border: none; + background-image: linear-gradient(to bottom, @color-white2, @color-silver); + color: @color-darkish-blue; + + &:active { + background-image: linear-gradient(to bottom, @color-silver, @color-white2); + border: none !important; + box-shadow: inset @button-shadow !important; + } + + &:hover { + box-shadow: inset 0px 0px 0px 2px #8eb5e2; + } + + &.dark-blue { + background-color: @color-blue; + color: white; + } + + &.btn-danger { + color: @color-scarlet; + } } - .general-buttons { - display: flex; - justify-content: space-between; - position: unset; - width: auto; - left: 0; - .btn { - font-size: 16px; - } + .group-button-add-attach { + font-size: 18px; + line-height: 1; + // color: @color-greyish-brown; + color: @button-success-color-to; } - .sources { - margin-top: 10px; - span.source { - font-size: 14px; - float: left; - display: block; - border: 1px solid #fff !important; - color: #fff; - font-weight: 600; - min-height: 20px; - padding: 0 5px; - line-height: 20px; - margin-bottom: 3px; - margin-right: 5px; - } - &:after { - content: " "; - display: block; - clear: both; - } - } - time { - display: block; - } - span.summary { - margin: 20px 0; - display: block; - } - hr { - border-style: solid; - } - .user-help { - background-color: #fff; - display: flex; - height: 64px; - margin: 12px 0; - align-items: center; + } + + .addnote { + height: 160px; + width: 408px; + display: flex; + flex-flow: column; + justify-content: center; + align-items: center; + margin: 0 auto; + border-top: solid 2px @color-white; + + .addnote-header { + display: flex; + flex-flow: row; + height: 58px; + + textarea { + border: none; + resize: none; + padding: 3px; + box-sizing: border-box; + } + + .avatar { + width: 40px; + height: 40px; + margin-left: 16px; + margin-top: 8px; + float: left; + background-color: @color-harmonies; + color: black; + line-height: 40px; + border-radius: 20px; + text-align: center; + font-family: Arial, sans-serif; + font-size: 18px; + font-weight: bold; + text-transform: uppercase; + } + + .text-add-note { + margin-left: 8px; + width: 328px; + height: 40px; border-radius: 2px; - box-shadow: @small-shadow; - .detail { + box-shadow: 0 1px 2px 0 @color-black-50; + margin-top: 8px; + float: right; + } + } + + .addnote-buttons { + display: flex; + width: 100%; + justify-content: flex-end; + } + } + } + } +} + +#service-list { + width: 584px; + height: 0; + padding: 0 24px; + + &.expanded { + width: 618px; + } + + &.opened { + padding: 72px 24px 24px 24px; + height: calc(~"100vh - 120px"); + box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2); + } + + &>.content { + height: 100%; + } + + .alarm-item.service .content { + width: 100%; + color: @color-greyish-brown; + justify-content: space-between; + + .summary { + color: @color-scarlet; + font-weight: bold; + } + } +} + + +.alarm-history-container { + height: 100%; + width: 100%; + display: flex; + justify-content: center; + padding-top: 104px; + + .alarm-history-box { + width: 1808px; + height: 872px; + border-radius: 2px; + background-color: @color-background-white; + box-shadow: 0 1px 2px 0 @color-black-40; + + .alarm-history-header { + height: 64px; + display: flex; + align-items: center; + border-bottom: solid 2px @color-whitethree; + + .alarm-history-header-label { + margin-left: 23px; + font-size: 20px; + color: @color-darkish-blue; + } + } + } + + .alarm-history-body { + width: 100%; + height: 806px; + display: flex; + flex-flow: row; + align-items: center; + justify-content: center; + + .alarm-history-body-left { + width: 1241px; + height: 766px; + display: flex; + flex-flow: column; + margin-right: 23px; + + .alarm-history-left-filter { + width: 100%; + height: 86px; + display: flex; + flex-flow: row; + + .filter-text, + .filter-state, + .filter-type, + .filter-date-range, + .filter-user { + display: flex; + flex-flow: column; + margin: 0 12px; + + label { + font-size: 14px; + line-height: 1.29; + color: @color-warm-grey; + } + + input { + width: 272px; + height: 44px; + border-radius: 2px; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); + border: solid 1px @color-silver; + font-size: 18px; + line-height: 1.11; + color: @color-greyish-brown; + padding-left: 16px; + } + + input::placeholder { + color: @color-silver; + } + + input.mx-input { + height: 48px; + width: 288px; + box-shadow: 0 1px 2px @color-black-40; + color: @color-greyish-brown; + } + } + + .filter-text { + margin-left: 0; + } + + .filter-state select, + .filter-type select, + .filter-date-range select, + .filter-user select { + width: 144px; + height: 48px; + border-radius: 2px; + box-shadow: 0 1px 2px 0 @color-black-40; + border: solid 1px @color-silver; + font-size: 18px; + line-height: 1.11; + color: @color-greyish-brown; + } + + .filter-date-range select { + width: 192px; + } + + .group-button { + display: flex; + height: 100%; + justify-content: center; + align-items: center; + margin-left: auto; + + .btn:last-child { + margin-right: 0; + } + } + + .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: 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; + } + } + + .selectBoxU { + position: relative; + width: 320px; + } + + .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; + } + } + } + + .alarm-history-table { + width: 1241px; + height: 680px; + border-radius: 2px; + position: relative; + border: solid 1px @color-label-grey; + + .loading { + display: flex; + align-items: center; + position: absolute; + top: 0px; + left: 0px; + right: 0px; + bottom: 0px; + height: 100%; + line-height: 100%; + background-color: #ffffff; + font-size: 5em; + color: #4b4b4b; + justify-content: center; + } + + table { + table-layout: fixed; + width: 100%; + border-collapse: collapse; + } + + thead { + border-bottom: solid 2px @color-label-grey; + } + + thead tr th { + height: 46px; + } + + tr:nth-child(even) { + background: #dddddd + } + + tr:nth-child(odd) { + background: #FFF + } + + th:nth-child(1), + td:nth-child(1) { + width: 100px; + max-width: 100px; + } + + th:nth-child(2), + td:nth-child(2) { + width: 550px; + max-width: 550px; + text-align: left; + } + + th:nth-child(3), + td:nth-child(3) { + width: 150px; + max-width: 150px; + text-align: left; + } + + th:nth-child(4), + td:nth-child(4) { + width: 100px; + max-width: 100px; + text-align: left; + } + + th:nth-child(5), + td:nth-child(5) { + width: 100px; + max-width: 100px; + } + + th, + td { + overflow: hidden; + + div { + overflow: hidden; + max-height: 64px; + } + } + + tbody { + display: block; + height: 552px; + width: 1230px; + overflow-y: auto; + padding-right: 10px; + + + &::-webkit-scrollbar { + width: 16px; + } + + &::-webkit-scrollbar-track { + margin-bottom: 4px; + margin-top: 4px; + background-color: #E5E5E5; + border-radius: 15px; + box-shadow: inset 0 1px 3px 0 #9F9F9F; + } + + &::-webkit-scrollbar-thumb { + width: 16px; + background: #9F9F9F; + border: 4px solid #E5E5E5; + border-radius: 15px; + } + + tr { + cursor: pointer; + height: 64px; + padding: 10px; + + td { + text-align: center; + + .users { + background: #657178; + color: white; + padding: 6px 8px; + margin-right: 8px; + border-radius: 3px; + } + + .type { + color: white; + padding: 6px 8px; + border-radius: 3px; + font-weight: bold; + background-color: #d0021b; + width: 34px; + display: block; + margin: auto; + + + &.warning { + background-color: #f5a623; + color: #4b4b4b; + } + } + } + + &.selected { + background-color: rgba(23, 145, 255, 0.75); + color: @color-white; + } + } + } + + tr { + width: 100%; + display: table; + } + + tfoot { + position: absolute; + 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; + + &.disabled { + opacity: .65; + cursor: default; + box-shadow: none !important; + pointer-events: none; + + i.fa { + color: #838383; + } + } + } + + .freespace { + width: 60px; + display: inline-block; + margin: 0 8px; + } + } + } + } + } + + .alarm-disable-box-right { + width: 496px; + height: 760px; + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 200; + background-color: #ffffffcc; + font-size: 24px; + font-weight: bold; + color: #4b4b4b; + } + + .alarm-history-body-right { + width: 496px; + height: 760px; + border-radius: 2px; + background-color: @color-whitegrey; + box-shadow: 0 1px 2px 0 @color-black-40; + display: flex; + align-items: center; + justify-content: center; + + .box-right { + display: flex; + flex-flow: column; + height: 675px; + width: 443px; + + .box-right-info { + width: 94%; + height: 180px; + + .box-right-info-header { + .title { + font-size: 18px; + font-weight: bold; + color: @color-scarlet; + margin-bottom: 6px; + } + + .subtitle { + margin-bottom: 15px; + + .inside { + height: 21px; + border: solid 1px @color-warm-grey2; + font-size: 14px; + font-weight: 600; + line-height: 1.29; + color: @color-greyish-brown; + padding: 0 5px; + margin: 0 3px 0 0px; + } + } + + .date { + margin-bottom: 8px; + + label { + font-size: 16px; + color: @color-greyish-brown; + } + } + } + + .box-right-info-body { + margin-bottom: 20px; + + span { + font-size: 18px; + line-height: 1; + color: @color-greyish-brown; + } + } + + .box-right-info-footer { + border-bottom: solid 2px @color-white; + padding-bottom: 12px; + + span { + font-size: 18px; + line-height: 1; + color: @color-greyish-brown; + + label { + font-weight: bold; + } + } + } + } + + .box-right-action { + height: 495px; + width: 94%; + + .wizard { + .user-help { + background-color: #fff; + display: flex; + height: 64px; + margin: 23px 0 12px 0; + align-items: center; + border-radius: 2px; + box-shadow: @small-shadow; + + .detail { width: 100%; + strong, span { - display: block; - color: @color-darkish-blue; - font-size: 14px; + display: block; + color: @color-darkish-blue; + font-size: 14px; } + strong { - font-size: 18px; + font-size: 18px; } - } - i.group { + } + + i.group { min-width: 28px; height: 28px; object-fit: contain; background-image: url(../icons/png/group.png); background-size: cover; margin: 0 12px; + } } - } - } - .alarm-item { - width: 100%; - background-color: #fff; - display: flex; - box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4); - border-radius: 2px; - flex-flow: row; - margin-bottom: 8px; - &.warning { - .content h2, - .content .summary { - color: @color-squash; - } - } - &.alarm { - .content h2, - .content .summary { - color: @color-scarlet; - } - } - .content { - width: 240px; - margin: 8px; - margin-left: 24px; + } + + .group-button { display: flex; - flex-flow: column; - justify-content: space-between; - align-content: space-between; - h2 { - // height: 21px; - font-size: 18px; - line-height: 21px; - margin: 0; - } - .summary { - font-size: 16px; - line-height: 22px; - margin: 0; + flex-flow: row; + } + + .attach, + .note { + .accordion { + margin-top: 24px; + + .filename { display: flex; - flex-flow: row; - justify-content: space-between; - } - .sourcecontainer { - font-size: 14px; - display: block; - color: @color-greyish-brown ; - font-weight: 600; - .source { - border: 1px solid @color-warm-grey !important; - padding: 0 5px; - margin-right: 3px; - } - } - } - button { - cursor: pointer; - border-radius: 2px; - font-size: 18px; - border: 1px solid #ccc; - margin: 8px; - width: 120px; - color: @color-darkish-blue; - height: 48px; - background-image: linear-gradient(to bottom, #f1f1f1, #bbbcbc); - &:active { - background-image: linear-gradient(to bottom, #bbbcbc, #f1f1f1); - } - } - } -} + height: 64px; + align-items: center; + cursor: pointer; -.accordion { - header { - height: 64px; - border-radius: 2px; - box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4); - display: flex; - justify-content: space-between; - align-items: center; - cursor: pointer; - small { - border: 2px solid #fff; - border-radius: 100px; - min-width: 28px; - min-height: 28px; - font-size: 12px; - display: block; - text-align: center; - line-height: 28px; - margin: 0 12px; - } - strong { - width: 100%; - } - .expander { - margin: 0 12px; - line-height: 28px; - height: 28px; - width: 28px; - font-size: 28px; - } - } - section { - 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%; - text-align: center; - line-height: 64px; - } - - .dropdown{ - // background-color: @color-white2; - height: 100%; - margin-top: 2px; - .filename{ - display: flex; - height: 64px; - align-items: center; - cursor: pointer; - i{ + i { margin: 0 20px 0 20px; - } - span{ + } + + span { width: 100%; font-size: 18px; line-height: 1; - // color: @color-greyish-brown; - } + color: @color-greyish-brown; + } - &.selected{ - span, i{ - color:#4b4b4b; + .right { + width: 100%; + display: flex; + justify-content: flex-end; + + button.btn-hidden { + visibility: hidden; + + i { + font-size: 26px; + visibility: visible; + margin: 0 12px; + cursor: pointer; + } + } } } - .right{ - width: 100%; - display: flex; - justify-content: flex-end; - button.btn-hidden{ - visibility: hidden; - i{ - font-size: 26px; - visibility: visible; - margin: 0 12px; - cursor: pointer; - } - } + + .filename.selected { + background-color: rgba(255, 255, 255, 0.8); } - } - .filename.selected{ - background-color: rgba(255, 255, 255, 0.8); - } - .all-message-box{ - max-height: 310px; - .message-box{ - width: 390px; - min-height: 96px; - display: flex; - flex-flow: column; - align-items: center; - justify-content: center; - margin: 0 auto; - cursor: pointer; - .message-box-header{ - height: calc(~'100% - 20px'); - width: 100%; - display: flex; - flex-flow: row; - textarea{ - border: none; - resize: none; - // background-color: transparent; - padding: 3px; - box-sizing: border-box; - cursor: pointer; - } - .avatar{ - width: 40px; - height: 40px; - margin-left: 16px; - margin-top: 8px; - float: left; - background-color: @color-harmonies; - color: black; - line-height: 40px; - border-radius: 20px; - text-align: center; - font-family: Arial, sans-serif; - font-size: 18px; - font-weight: bold; - text-transform: uppercase; - } - .text-message{ - margin-left: 8px; - width: 328px; - height: 40px; - border-radius: 2px; - box-shadow: 0 1px 2px 0 @color-black-50; - margin-top: 8px; - float: right; - cursor: pointer; - } - } - .message-box-body{ - display: flex; - width: 100%; - height: 14px; - margin-left: 132px; - &.my{ - margin-left: 15px; - } - .text-date{ - font-size: 12px; - color: @color-greyish-brown; - float: left; - width: 100%; - height: 100%; - cursor: pointer; - } - } - .groupbutton{ - width: 100%; - height: 32px; - display: flex; - justify-content: flex-end; - &.enablemodify{ - height: 100%; + .allattach, + .allnote { + display: flex; + height: 64px; + align-items: center; - } - - - button.btn-hidden{ - visibility: hidden; - i{ - font-size: 26px; - visibility: visible; - margin: 0 12px; - cursor: pointer; - } - } - .modify-padding{ - padding: 9px 0px; - } - } - } - .message-box.selected{ - background-color: rgba(255, 255, 255, 0.8); - } - } - .allattach{ - display: flex; - height: 64px; - align-items: center; - button.btn-hidden{ + button.btn-hidden { visibility: hidden; - span{ - font-size: 18px; - line-height: 1; - visibility: visible; - margin: 0 0 0 20px; - // color: @color-greyish-brown; - cursor: pointer; - } - } - } - .allnotes{ - display: flex; - height: 20px; - width: 408px; - margin: 23px auto; - button.btn-hidden{ - visibility: hidden; - span{ - font-size: 18px; - line-height: 1; - visibility: visible; - margin: 0 0 0 20px; - color: @color-greyish-brown; - cursor: pointer; - } - } - } - .addattach{ - display: flex; - height: 64px; - align-items: center; - justify-content: center; - border-top: solid 1px rgba(255, 255, 255, 0.1); - .btn{ - box-sizing: border-box; - border-radius: 2px; - margin: 0 8px; - text-align: center; - font-size: 18px; - font-weight: bold; - box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4); - padding: 14px 17px; - border: none; - background-image: linear-gradient(to bottom, @color-white2, @color-silver); - color: @color-darkish-blue; - &:active { - background-image: linear-gradient(to bottom, @color-silver, @color-white2); - border: none !important; - box-shadow: inset @button-shadow !important; - } - &:hover { - box-shadow: inset 0px 0px 0px 2px #8eb5e2; - } - &.dark-blue { - background-color: @color-blue; - color: white; + span { + font-size: 18px; + line-height: 1; + visibility: visible; + margin: 0 0 0 20px; + color: @color-greyish-brown; + cursor: pointer; } + } + } + } - &.btn-danger{ - color:@color-scarlet; - } - } - .group-button-add-attach{ - font-size: 18px; - line-height: 1; - // color: @color-greyish-brown; - color: @button-success-color-to; - } + .accordion header { + color: @color-darkish-blue; + } + + .accordion header small { + border: 2px solid @color-darkish-blue; + color: @color-darkish-blue; + } } - .addnote{ - height: 160px; - width: 408px; - display: flex; - flex-flow: column; - justify-content: center; - align-items: center; - margin: 0 auto; - border-top: solid 2px @color-white; - .addnote-header{ - display: flex; - flex-flow: row; - height: 58px; - textarea{ - border: none; - resize: none; - padding: 3px; - box-sizing: border-box; - } - .avatar{ - width: 40px; - height: 40px; - margin-left: 16px; - margin-top: 8px; - float: left; - background-color: @color-harmonies; - color: black; - line-height: 40px; - border-radius: 20px; - text-align: center; - font-family: Arial, sans-serif; - font-size: 18px; - font-weight: bold; - text-transform: uppercase; - } - .text-add-note{ - margin-left: 8px; - width: 328px; - height: 40px; - border-radius: 2px; - box-shadow: 0 1px 2px 0 @color-black-50; - margin-top: 8px; - float: right; - } - } - .addnote-buttons{ - display: flex; - width: 100%; - justify-content: flex-end; - } + + .note { + .accordion header { + color: @color-darkish-blue; + } + + .accordion header small { + border: 2px solid @color-darkish-blue; + color: @color-darkish-blue; + } + + .message-box { + width: 370px; + } } + } } } -} - -#service-list { - width: 584px; - height: 0; - padding: 0 24px; - &.expanded { - width: 618px; - } - &.opened { - padding: 72px 24px 24px 24px; - height: calc(~"100vh - 120px"); - box-shadow: 2px 2px 2px rgba(0,0,0,0.2); - } - &>.content { - height: 100%; - } - .alarm-item.service .content { - width: 100%; - color: @color-greyish-brown; - justify-content: space-between; - .summary{ - color: @color-scarlet; - font-weight: bold; - } - } -} - - -.alarm-history-container{ - height: 100%; - width: 100%; - display: flex; - justify-content: center; - padding-top: 104px; - .alarm-history-box{ - width: 1808px; - height: 872px; - border-radius: 2px; - background-color: @color-background-white; - box-shadow: 0 1px 2px 0 @color-black-40; - .alarm-history-header{ - height: 64px; - display: flex; - align-items: center; - border-bottom: solid 2px @color-whitethree; - .alarm-history-header-label{ - margin-left: 23px; - font-size: 20px; - color: @color-darkish-blue; - } - } - } - .alarm-history-body{ - width: 100%; - height: 806px; - display: flex; - flex-flow: row; - align-items: center; - justify-content: center; - .alarm-history-body-left{ - width: 1241px; - height: 766px; - display: flex; - flex-flow: column; - margin-right: 23px; - .alarm-history-left-filter{ - width: 100%; - height: 86px; - display: flex; - flex-flow: row; - .filter-text, .filter-state, .filter-type, .filter-date-range, .filter-user{ - display: flex; - flex-flow: column; - margin: 0 12px; - label{ - font-size: 14px; - line-height: 1.29; - color: @color-warm-grey; - } - input{ - width: 272px; - height: 44px; - border-radius: 2px; - box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); - border: solid 1px @color-silver; - font-size: 18px; - line-height: 1.11; - color: @color-greyish-brown; - padding-left: 16px; - } - input::placeholder{ - color: @color-silver; - } - input.mx-input{ - height: 48px; - width: 288px; - box-shadow: 0 1px 2px @color-black-40; - color: @color-greyish-brown; - } - } - .filter-text{ - margin-left: 0; - } - .filter-state select, .filter-type select, .filter-date-range select, .filter-user select{ - width: 144px; - height: 48px; - border-radius: 2px; - box-shadow: 0 1px 2px 0 @color-black-40; - border: solid 1px @color-silver; - font-size: 18px; - line-height: 1.11; - color: @color-greyish-brown; - } - .filter-date-range select{ - width: 192px; - } - .group-button{ - display: flex; - height: 100%; - justify-content: center; - align-items: center; - margin-left: auto; - .btn:last-child{ - margin-right: 0; - } - } - .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: 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; - } - } - .selectBoxU{ - position: relative; - width: 320px; - } - .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; - } - } - } - .alarm-history-table{ - width: 1241px; - height: 680px; - border-radius: 2px; - position: relative; - border: solid 1px @color-label-grey; - .loading{ - display: flex; - align-items: center; - position: absolute; - top: 0px; - left: 0px; - right: 0px; - bottom: 0px; - height: 100%; - line-height: 100%; - background-color: #ffffff; - font-size: 5em; - color: #4b4b4b; - justify-content: center; - } - table{ - table-layout: fixed; - width: 100%; - border-collapse: collapse; - } - thead{ - border-bottom: solid 2px @color-label-grey; - } - thead tr th{ - height: 46px; - } - tr:nth-child(even) {background: #dddddd} - tr:nth-child(odd) {background: #FFF} - th:nth-child(1), td:nth-child(1){ - width:100px; - max-width:100px; - } - th:nth-child(2), td:nth-child(2){ - width:550px; - max-width:550px; - text-align: left; - } - th:nth-child(3), td:nth-child(3){ - width:150px; - max-width:150px; - text-align: left; - } - th:nth-child(4),td:nth-child(4){ - width:100px; - max-width:100px; - text-align: left; - } - th:nth-child(5), td:nth-child(5){ - width:100px; - max-width: 100px; - } - th, td{ - overflow: hidden; - div{ - overflow: hidden; - max-height: 64px; - } - } - tbody{ - height: 560px; - width: 1241px; - tr{ - cursor: pointer; - height: 64px; - padding: 10px; - td{ - text-align: center; - .users{ - background: #657178; - color: white; - padding: 6px 8px; - margin-right: 8px; - border-radius: 3px; - } - .type{ - color: white; - padding: 6px 8px; - border-radius: 3px; - font-weight: bold; - background-color: #d0021b; - width: 34px; - display: block; - margin: auto; - - - &.warning{ - background-color: #f5a623; - color: #4b4b4b; - } - } - } - &.selected{ - background-color: rgba(23, 145, 255, 0.75); - color: @color-white; - } - } - } - tr{ - width: 100%; - display: table; - } - - tfoot{ - position:absolute; - 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; - } - } - } - } - } - - .alarm-disable-box-right{ - width: 496px; - height: 760px; - position: absolute; - display: flex; - align-items: center; - justify-content: center; - z-index: 200; - background-color: #ffffffcc; - font-size: 24px; - font-weight: bold; - color: #4b4b4b; - } - - .alarm-history-body-right{ - width: 496px; - height: 760px; - border-radius: 2px; - background-color: @color-whitegrey; - box-shadow: 0 1px 2px 0 @color-black-40; - display: flex; - align-items: center; - justify-content: center; - .box-right{ - display: flex; - flex-flow: column; - height: 675px; - width: 443px; - .box-right-info{ - width: 94%; - height: 180px; - .box-right-info-header{ - .title{ - font-size: 18px; - font-weight: bold; - color: @color-scarlet; - margin-bottom: 6px; - } - .subtitle{ - margin-bottom: 15px; - .inside{ - height: 21px; - border: solid 1px @color-warm-grey2; - font-size: 14px; - font-weight: 600; - line-height: 1.29; - color: @color-greyish-brown; - padding: 0 5px; - margin: 0 3px 0 0px; - } - } - .date{ - margin-bottom: 8px; - label{ - font-size: 16px; - color: @color-greyish-brown; - } - } - } - .box-right-info-body{ - margin-bottom: 20px; - span{ - font-size: 18px; - line-height: 1; - color: @color-greyish-brown; - } - } - .box-right-info-footer{ - border-bottom: solid 2px @color-white; - padding-bottom: 12px; - span{ - font-size: 18px; - line-height: 1; - color: @color-greyish-brown; - label{ - font-weight: bold; - } - } - } - } - .box-right-action{ - height: 495px; - width: 94%; - .wizard{ - .user-help { - background-color: #fff; - display: flex; - height: 64px; - margin: 23px 0 12px 0; - align-items: center; - border-radius: 2px; - box-shadow: @small-shadow; - .detail { - width: 100%; - strong, - span { - display: block; - color: @color-darkish-blue; - font-size: 14px; - } - strong { - font-size: 18px; - } - } - i.group { - min-width: 28px; - height: 28px; - object-fit: contain; - background-image: url(../icons/png/group.png); - background-size: cover; - margin: 0 12px; - } - } - } - .group-button{ - display: flex; - flex-flow: row; - } - .attach, .note{ - .accordion{ - margin-top: 24px; - .filename{ - display: flex; - height: 64px; - align-items: center; - cursor: pointer; - i{ - margin: 0 20px 0 20px; - } - span{ - width: 100%; - font-size: 18px; - line-height: 1; - color: @color-greyish-brown; - } - .right{ - width: 100%; - display: flex; - justify-content: flex-end; - button.btn-hidden{ - visibility: hidden; - i{ - font-size: 26px; - visibility: visible; - margin: 0 12px; - cursor: pointer; - } - } - } - } - .filename.selected{ - background-color: rgba(255, 255, 255, 0.8); - } - .allattach, .allnote{ - display: flex; - height: 64px; - align-items: center; - button.btn-hidden{ - visibility: hidden; - span{ - font-size: 18px; - line-height: 1; - visibility: visible; - margin: 0 0 0 20px; - color: @color-greyish-brown; - cursor: pointer; - } - } - } - } - .accordion header{ - color: @color-darkish-blue; - } - .accordion header small{ - border: 2px solid @color-darkish-blue; - color: @color-darkish-blue; - } - } - .note{ - .accordion header{ - color: @color-darkish-blue; - } - .accordion header small{ - border: 2px solid @color-darkish-blue; - color: @color-darkish-blue; - } - - .message-box{ - width: 370px; - } - } - } - } - } - } + } } diff --git a/Step/wwwroot/assets/styles/base/card.less b/Step/wwwroot/assets/styles/base/card.less index 7876c3dd..cb4b6f7a 100644 --- a/Step/wwwroot/assets/styles/base/card.less +++ b/Step/wwwroot/assets/styles/base/card.less @@ -2393,8 +2393,31 @@ tbody { display: block; - height: 560px; - width: 1431px; + height: 552px; + width: 1420px; + overflow-y: auto; + padding-right: 10px; + + + &::-webkit-scrollbar{ + width: 16px; + } + + &::-webkit-scrollbar-track{ + margin-bottom: 4px; + margin-top: 4px; + background-color: #E5E5E5; + border-radius: 15px; + box-shadow: inset 0 1px 3px 0 #9F9F9F; + } + + &::-webkit-scrollbar-thumb{ + width: 16px; + background: #9F9F9F; + border: 4px solid #E5E5E5; + border-radius: 15px; + } + tr { // cursor: pointer; @@ -2464,6 +2487,17 @@ button { width: 60px; padding: 0px; + + &.disabled { + opacity: .65; + cursor: default; + box-shadow: none !important; + pointer-events: none; + + i.fa { + color: #838383; + } + } } .freespace { @@ -4874,10 +4908,21 @@ padding-left: 16px; cursor: pointer; - span { - width: 100%; + div.title { + display: flex; + flex-direction: row; + flex-wrap: wrap; + + span { + display: block; + flex: 0 1 auto; + align-content: center; + text-align: left; + margin-right: 7px; + } } + .expander { margin: 0 12px; line-height: 28px; @@ -4929,7 +4974,7 @@ .custom-checkbox { label { - background-color: @color-background-white !important; + background-color: @color-background-white !important; border: solid 1px @color-clear-blue; } } @@ -5042,16 +5087,15 @@ .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; + position: relative; &:first-child { border-right: solid 1px #dddddd; @@ -5062,11 +5106,22 @@ } label { - position: relative; - line-height: 164px; display: block; + overflow: hidden; + text-align: center; + position: absolute; + bottom: 4px; + left: 0px; + width: 100%; &.rotate { + display: block; + width: 50px; + overflow: hidden; + text-align: left; + position: absolute; + bottom: 20px; + left: -10px; transform: rotate(-78deg); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); } diff --git a/Step/wwwroot/assets/styles/base/layout.less b/Step/wwwroot/assets/styles/base/layout.less index b7413708..8e2126b6 100644 --- a/Step/wwwroot/assets/styles/base/layout.less +++ b/Step/wwwroot/assets/styles/base/layout.less @@ -35,6 +35,8 @@ @import "scada.less"; @import "report.less"; @import "users.less"; +@import "tooltip.less"; + @background-color: rgb(216, 216, 216); @handle-width: 48px; @@ -210,7 +212,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 index d7c1fcc8..8778afbf 100644 --- a/Step/wwwroot/assets/styles/base/tooltip.less +++ b/Step/wwwroot/assets/styles/base/tooltip.less @@ -159,11 +159,10 @@ color: @color-warm-grey; padding: 0; .header { - height: 63px; + height: 62px; display: flex; align-items: center; - padding-left: 16px; - font-size: 20px; + padding-left: 14px; font-size: 16px; font-weight: normal; font-style: normal; @@ -173,7 +172,6 @@ text-align: left; color: @color-darkish-blue; - label { width: 234px; } @@ -191,9 +189,9 @@ cursor: pointer; z-index: 1000; .fa { - display: flex; - margin-left: auto; - margin-right: auto; + margin: auto; + margin-right: auto; + margin-top: -1px; } &:active{ @@ -388,11 +386,10 @@ } .header { - height: 63px; + height: 62px; display: flex; align-items: center; - padding-left: 16px; - font-size: 20px; + padding-left: 14px; font-size: 16px; font-weight: normal; font-style: normal; @@ -420,9 +417,9 @@ cursor: pointer; z-index: 1000; .fa { - display: flex; - margin-left: auto; - margin-right: auto; + margin: auto; + margin-right: auto; + margin-top: -1px; } &:active{ @@ -478,61 +475,3 @@ } } } -// .card-report-tooltip-header{ -// height: 63px; -// border-bottom: 2px solid #d8d8d8; -// display: flex; -// align-items: center; -// padding-left: 16px; -// font-size: 20px; -// color: @color-darkish-blue; -// label{ -// width: 234px; -// } -// button.close { -// display: flex; -// width: 28px; -// height: 28px; -// border-radius: 50%; -// border: none; -// background-color: #002680; -// color: #fff; -// font-size: 16px; -// float: right; -// cursor: pointer; -// .fa { -// display: flex; -// margin-left: auto; -// margin-right: auto; -// } -// } -// button.close:active { -// background-color: @color-clear-blue ; -// color: #fff; -// } -// } - -// .card-report-tooltip-body{ -// height: calc(~"100% - 65px"); -// display: flex; -// flex-flow: row; -// background-color: @color-white2; -// } -// .card-report-tooltip-body-left, .card-report-tooltip-body-right{ -// display: flex; -// flex-flow: column; -// width: 50%; -// align-items: center; -// justify-content: center; -// label:first-child{ -// font-size: 18px; -// font-weight: normal; -// color: @color-warm-grey; -// } -// label{ -// font-size: 18px; -// font-weight: 800; -// color: @color-greyish-brown; -// } -// } -/**END - TOOLTIP COLUMN CHART PRODUZIONE**/ diff --git a/Step/wwwroot/assets/styles/style.css b/Step/wwwroot/assets/styles/style.css index f57f37b3..a23f3e2e 100644 --- a/Step/wwwroot/assets/styles/style.css +++ b/Step/wwwroot/assets/styles/style.css @@ -5017,8 +5017,27 @@ footer .container button.big:before { max-height: 64px; } .alarm-history-container .alarm-history-body .alarm-history-body-left .alarm-history-table tbody { - height: 560px; - width: 1241px; + display: block; + height: 552px; + width: 1230px; + overflow-y: auto; + padding-right: 10px; +} +.alarm-history-container .alarm-history-body .alarm-history-body-left .alarm-history-table tbody::-webkit-scrollbar { + width: 16px; +} +.alarm-history-container .alarm-history-body .alarm-history-body-left .alarm-history-table tbody::-webkit-scrollbar-track { + margin-bottom: 4px; + margin-top: 4px; + background-color: #E5E5E5; + border-radius: 15px; + box-shadow: inset 0 1px 3px 0 #9F9F9F; +} +.alarm-history-container .alarm-history-body .alarm-history-body-left .alarm-history-table tbody::-webkit-scrollbar-thumb { + width: 16px; + background: #9F9F9F; + border: 4px solid #E5E5E5; + border-radius: 15px; } .alarm-history-container .alarm-history-body .alarm-history-body-left .alarm-history-table tbody tr { cursor: pointer; @@ -5087,6 +5106,15 @@ footer .container button.big:before { width: 60px; padding: 0px; } +.alarm-history-container .alarm-history-body .alarm-history-body-left .alarm-history-table tfoot tr td div.group-label-button button.disabled { + opacity: .65; + cursor: default; + box-shadow: none !important; + pointer-events: none; +} +.alarm-history-container .alarm-history-body .alarm-history-body-left .alarm-history-table tfoot tr td div.group-label-button button.disabled i.fa { + color: #838383; +} .alarm-history-container .alarm-history-body .alarm-history-body-left .alarm-history-table tfoot tr td div.group-label-button .freespace { width: 60px; display: inline-block; @@ -8784,8 +8812,26 @@ footer .container button.big:before { } .card-report-production .reports-box-body-left .body-left-center .body-left-center-container tbody { display: block; - height: 560px; - width: 1431px; + height: 552px; + width: 1420px; + overflow-y: auto; + padding-right: 10px; +} +.card-report-production .reports-box-body-left .body-left-center .body-left-center-container tbody::-webkit-scrollbar { + width: 16px; +} +.card-report-production .reports-box-body-left .body-left-center .body-left-center-container tbody::-webkit-scrollbar-track { + margin-bottom: 4px; + margin-top: 4px; + background-color: #E5E5E5; + border-radius: 15px; + box-shadow: inset 0 1px 3px 0 #9F9F9F; +} +.card-report-production .reports-box-body-left .body-left-center .body-left-center-container tbody::-webkit-scrollbar-thumb { + width: 16px; + background: #9F9F9F; + border: 4px solid #E5E5E5; + border-radius: 15px; } .card-report-production .reports-box-body-left .body-left-center .body-left-center-container tbody tr { height: 64px; @@ -8844,6 +8890,15 @@ footer .container button.big:before { width: 60px; padding: 0px; } +.card-report-production .reports-box-body-left .body-left-center .body-left-center-container tfoot tr td div.group-label-button button.disabled { + opacity: .65; + cursor: default; + box-shadow: none !important; + pointer-events: none; +} +.card-report-production .reports-box-body-left .body-left-center .body-left-center-container tfoot tr td div.group-label-button button.disabled i.fa { + color: #838383; +} .card-report-production .reports-box-body-left .body-left-center .body-left-center-container tfoot tr td div.group-label-button .freespace { width: 60px; display: inline-block; @@ -10925,8 +10980,17 @@ footer .container button.big:before { padding-left: 16px; cursor: pointer; } -.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-header .body-left-center-left .accordion-dropdown header span { - width: 100%; +.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-header .body-left-center-left .accordion-dropdown header div.title { + display: flex; + flex-direction: row; + flex-wrap: wrap; +} +.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-header .body-left-center-left .accordion-dropdown header div.title span { + display: block; + flex: 0 1 auto; + align-content: center; + text-align: left; + margin-right: 7px; } .card-report-timeline .reports-box-body-left .body-left-center .body-left-center-header .body-left-center-left .accordion-dropdown header .expander { margin: 0 12px; @@ -11069,11 +11133,11 @@ footer .container button.big:before { font-weight: normal; font-style: normal; font-stretch: normal; - line-height: 1.43; letter-spacing: normal; text-align: center; color: #4b4b4b; overflow: hidden; + 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-items .timeline-chart-header-item:first-child { border-right: solid 1px #dddddd; @@ -11082,11 +11146,22 @@ footer .container button.big:before { 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; + overflow: hidden; + text-align: center; + position: absolute; + bottom: 4px; + left: 0px; + width: 100%; } .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 { + display: block; + width: 50px; + overflow: hidden; + text-align: left; + position: absolute; + bottom: 20px; + left: -10px; transform: rotate(-78deg); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); } @@ -19543,6 +19618,391 @@ footer .container button.big:before { width: 100%; display: table; } +.tooltip { + display: block !important; + z-index: 10000; +} +.tooltip .wrapper { + width: 100%; + height: 100%; + border: solid 2px #1791ff; + background-color: #fff; + border-radius: 2px; +} +.tooltip .wrapper .tooltip-arrow { + width: 0; + height: 0; + border-style: solid; + position: absolute; + margin: 5px; + border-color: #1791ff; + z-index: 1; +} +.tooltip .wrapper .tooltip-inner { + color: #878787; + padding: 5px 10px 4px; +} +.tooltip[x-placement^="top"] { + margin-bottom: 5px; +} +.tooltip[x-placement^="top"] .tooltip-arrow { + border-width: 18px 18px 0 18px; + border-left-color: transparent !important; + border-right-color: transparent !important; + border-bottom-color: transparent !important; + bottom: -16px; + left: calc(45%); + margin-top: 0; + margin-bottom: 0; +} +.tooltip[x-placement^="top"] .tooltip-arrow::before { + border-color: #f1f1f1 !important; + border-width: 15px 14px 0 14px; + border-left-color: transparent !important; + border-right-color: transparent !important; + border-bottom-color: transparent !important; + bottom: 3px; + left: -14px; + margin-top: 0; + margin-bottom: 0; +} +.tooltip[x-placement^="bottom"] { + margin-top: 5px; +} +.tooltip[x-placement^="bottom"] .tooltip-arrow { + border-width: 0 18px 18px 18px; + border-left-color: transparent !important; + border-right-color: transparent !important; + border-top-color: transparent !important; + top: -16px; + left: calc(45%); + margin-top: 0; + margin-bottom: 0; +} +.tooltip[x-placement^="bottom"] .tooltip-arrow::before { + border-width: 0 14px 15px 14px; + border-left-color: transparent !important; + border-right-color: transparent !important; + border-top-color: transparent !important; + top: 3px; + left: -14px; + margin-top: 0; + margin-bottom: 0; +} +.tooltip.popover .wrapper { + width: 100%; + height: 100%; + border: solid 2px #1791ff; + background-color: #fff; + border-radius: 2px; +} +.tooltip.popover .wrapper .popover-arrow { + border-color: #1791ff; +} +.tooltip.popover .wrapper .popover-arrow::before { + content: ''; + width: 0; + height: 0; + border-style: solid; + position: absolute; + border-color: #fff; + z-index: 1; +} +.tooltip.popover .wrapper .popover-inner { + background: #fff; + color: #878787; + padding: 0; +} +.tooltip.popover .wrapper .popover-inner .header { + height: 62px; + display: flex; + align-items: center; + padding-left: 14px; + font-size: 16px; + font-weight: normal; + font-style: normal; + font-stretch: normal; + line-height: normal; + letter-spacing: normal; + text-align: left; + color: #002680; +} +.tooltip.popover .wrapper .popover-inner .header label { + width: 234px; +} +.tooltip.popover .wrapper .popover-inner .header button.close { + display: flex; + width: 28px; + height: 28px; + border-radius: 50%; + border: none; + background-color: #002680; + color: #fff; + font-size: 16px; + float: right; + cursor: pointer; + z-index: 1000; +} +.tooltip.popover .wrapper .popover-inner .header button.close .fa { + margin: auto; + margin-right: auto; + margin-top: -1px; +} +.tooltip.popover .wrapper .popover-inner .header button.close:active { + background-color: #1791ff; + color: #fff; +} +.tooltip.popover .wrapper .popover-inner .body { + color: #878787; + border-top: 2px solid #d8d8d8; +} +.tooltip.popover .wrapper .popover-inner .body .date { + display: flex; + flex-flow: row; + padding: 15px 0px; + color: #878787; +} +.tooltip.popover .wrapper .popover-inner .body .date .column { + display: flex; + flex-flow: column; + flex: 1 1 auto; + width: 50%; + align-items: center; + justify-content: center; +} +.tooltip.popover .wrapper .popover-inner .body .date .column span.title { + display: block; + font-size: 12px; + font-weight: normal; + font-style: normal; + font-stretch: normal; + line-height: normal; + letter-spacing: normal; + text-align: center; + color: #878787; +} +.tooltip.popover .wrapper .popover-inner .body .date .column span.value { + display: block; + font-size: 14px; + font-weight: normal; + font-style: normal; + font-stretch: normal; + line-height: 1.43; + letter-spacing: normal; + text-align: left; + color: #4b4b4b; +} +.tooltip.popover .wrapper .popover-inner .body .footer { + padding: 15px 0px; + display: flex; + flex-flow: row; + background-color: #f1f1f1; + color: #878787; +} +.tooltip.popover .wrapper .popover-inner .body .footer .column { + display: flex; + flex-flow: column; + flex: 1 1 auto; + width: 50%; + align-items: center; + justify-content: center; +} +.tooltip.popover .wrapper .popover-inner .body .footer .column span.title { + display: block; + font-size: 12px; + font-weight: normal; + font-style: normal; + font-stretch: normal; + line-height: normal; + letter-spacing: normal; + text-align: center; + color: #878787; +} +.tooltip.popover .wrapper .popover-inner .body .footer .column span.value { + display: block; + font-size: 20px; + font-weight: normal; + font-style: normal; + font-stretch: normal; + line-height: 0.9; + letter-spacing: normal; + text-align: center; + color: #4b4b4b; +} +.tooltip[aria-hidden='true'] { + visibility: hidden; + opacity: 0; + transition: opacity .15s, visibility .15s; +} +.tooltip[aria-hidden='false'] { + visibility: visible; + opacity: 1; + transition: opacity .15s; +} +/**START - TOOLTIP COLUMN CHART PRODUZIONE**/ +.card-report-tooltip-top { + opacity: 1; + position: absolute; + width: 288px; + border: solid 2px #1791ff; + border-radius: 2px; + background-color: #fff; + z-index: 100; +} +.card-report-tooltip-top:before { + content: ''; + display: block; + position: absolute; + left: 138px; + bottom: 100%; + width: 4px; + height: 0px; + border: 14px solid transparent; + border-bottom-color: #1791ff; +} +.card-report-tooltip-top:after { + content: ''; + display: block; + position: absolute; + left: 141px; + bottom: 100%; + width: 0; + height: 0; + border: 13px solid transparent; + border-bottom-color: white; +} +.card-report-tooltip-bottom { + opacity: 1; + position: absolute; + width: 288px; + border: solid 2px #1791ff; + border-radius: 2px; + background-color: #fff; + z-index: 100; +} +.card-report-tooltip-bottom:before { + content: ''; + display: block; + position: absolute; + left: 132px; + top: 100%; + width: 4px; + height: 0px; + border: 14px solid transparent; + border-top-color: #1791ff; +} +.card-report-tooltip-bottom:after { + content: ''; + display: block; + position: absolute; + left: 135px; + top: 100%; + width: 0; + height: 0; + border: 13px solid transparent; + border-top-color: #f1f1f1; +} +.card-report-tooltip-bottom, +.card-report-tooltip-top { + pointer-events: all !important; + background: #fff; + color: #878787; + padding: 0; +} +.card-report-tooltip-bottom.hidden, +.card-report-tooltip-top.hidden { + visibility: hidden; +} +.card-report-tooltip-bottom .header, +.card-report-tooltip-top .header { + height: 62px; + display: flex; + align-items: center; + padding-left: 14px; + font-size: 16px; + font-weight: normal; + font-style: normal; + font-stretch: normal; + line-height: normal; + letter-spacing: normal; + text-align: left; + color: #002680; +} +.card-report-tooltip-bottom .header label, +.card-report-tooltip-top .header label { + width: 234px; +} +.card-report-tooltip-bottom .header button.close, +.card-report-tooltip-top .header button.close { + display: flex; + width: 28px; + height: 28px; + border-radius: 50%; + border: none; + background-color: #002680; + color: #fff; + font-size: 16px; + float: right; + cursor: pointer; + z-index: 1000; +} +.card-report-tooltip-bottom .header button.close .fa, +.card-report-tooltip-top .header button.close .fa { + margin: auto; + margin-right: auto; + margin-top: -1px; +} +.card-report-tooltip-bottom .header button.close:active, +.card-report-tooltip-top .header button.close:active { + background-color: #1791ff; + color: #fff; +} +.card-report-tooltip-bottom .body, +.card-report-tooltip-top .body { + color: #878787; + border-top: 2px solid #d8d8d8; +} +.card-report-tooltip-bottom .body .footer, +.card-report-tooltip-top .body .footer { + padding: 15px 0px; + display: flex; + flex-flow: row; + background-color: #f1f1f1; + color: #878787; +} +.card-report-tooltip-bottom .body .footer .column, +.card-report-tooltip-top .body .footer .column { + display: flex; + flex-flow: column; + flex: 1 1 auto; + width: 50%; + align-items: center; + justify-content: center; +} +.card-report-tooltip-bottom .body .footer .column span.title, +.card-report-tooltip-top .body .footer .column span.title { + display: block; + font-size: 12px; + font-weight: normal; + font-style: normal; + font-stretch: normal; + line-height: normal; + letter-spacing: normal; + text-align: center; + color: #878787; +} +.card-report-tooltip-bottom .body .footer .column span.value, +.card-report-tooltip-top .body .footer .column span.value { + display: block; + font-size: 20px; + font-weight: normal; + font-style: normal; + font-stretch: normal; + line-height: 0.9; + letter-spacing: normal; + text-align: center; + color: #4b4b4b; +} a, a:visited, a:hover, diff --git a/Step/wwwroot/index.html b/Step/wwwroot/index.html index 639ba192..8473fa3e 100644 --- a/Step/wwwroot/index.html +++ b/Step/wwwroot/index.html @@ -13,9 +13,8 @@ - - + diff --git a/Step/wwwroot/package.json b/Step/wwwroot/package.json index 44cee2f7..d94e55d4 100644 --- a/Step/wwwroot/package.json +++ b/Step/wwwroot/package.json @@ -1,65 +1,64 @@ { - "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" - ] -} + "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", + "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" + ] +} \ No newline at end of file diff --git a/Step/wwwroot/src/app_modules/alarms/components/alarm-history.vue b/Step/wwwroot/src/app_modules/alarms/components/alarm-history.vue index 584db813..7332ea9d 100644 --- a/Step/wwwroot/src/app_modules/alarms/components/alarm-history.vue +++ b/Step/wwwroot/src/app_modules/alarms/components/alarm-history.vue @@ -108,19 +108,18 @@ {{user(iduser).username}} - -
- +
+
 
 
- +
diff --git a/Step/wwwroot/src/app_modules/reports/components/card-report-machine-status.ts b/Step/wwwroot/src/app_modules/reports/components/card-report-machine-status.ts index 39c2fee5..2d9f9073 100644 --- a/Step/wwwroot/src/app_modules/reports/components/card-report-machine-status.ts +++ b/Step/wwwroot/src/app_modules/reports/components/card-report-machine-status.ts @@ -1,8 +1,8 @@ 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 { cardReport } from "src/modules/base-components/cards/index"; +import accordionDropdown from "src/modules/base-components/accordion-dropdown.vue"; +import modalReportSelectColumn from "src/modules/base-components/modal-report-select-column.vue"; import { Accordion } from "src/modules/base-components"; import { loginService } from "src/services"; import DatePicker from "vue2-datepicker"; @@ -12,12 +12,12 @@ import { ReportGetters } from "@/src/store/report.store"; import Chart from "chart.js"; -declare var JustGage: any; -import { reportService } from "../../../services/reportService"; +import { reportService } from "src/services/reportService"; import { Watch } from "vue-property-decorator"; +import { DoughnutChart } from "src/components/doughnut-chart"; declare let $: any; -@Component({ components: { datePicker: DatePicker, cardReport: cardReport, accordionDropdown: accordionDropdown, accordion: Accordion } }) +@Component({ components: { datePicker: DatePicker, cardReport: cardReport, accordionDropdown: accordionDropdown, accordion: Accordion, DoughnutChart } }) export default class CardReportMachineStatus extends Vue { lang = { @@ -87,7 +87,7 @@ export default class CardReportMachineStatus extends Vue { this.users.unshift({ id: -1, username: this.$options.filters.localize("alarm_history_users_not_user", "Nessun utente") }); this.filter.multiUser.push(this.currentUser.username); await reportService.PieChart(this.filter.interval); - this.buildGage(); + this.buildChart(); } @@ -109,9 +109,8 @@ export default class CardReportMachineStatus extends Vue { async openModalSelectField() { this.visibleColumns = await ModalHelper.ShowModalAsync(modalReportSelectColumn, this.visibleColumns); - - console.log(this.visibleColumns); } + public openSelectStateU() { if (!$('.checkboxesU').hasClass('checkboxesViewUser')) $('.checkboxesU').addClass('checkboxesViewUser'); @@ -123,18 +122,6 @@ export default class CardReportMachineStatus extends Vue { this.selectedPage = Math.min(Math.max(page, 1), this.paginationData.pages); } - - - buildGage() { - let p = new JustGage({ - id: "gauge", - value: this.dataPieces.absoluteValue, - min: 0, - max: 100 - }); - } - - buildChart() { let $this = this; let dataNumber: Array = []; @@ -193,9 +180,9 @@ export default class CardReportMachineStatus extends Vue { // 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 {cardReport} from "src/modules/base-components/cards/index"; +// import accordionDropdown from "src/modules/base-components/accordion-dropdown.vue"; +// import modalReportSelectColumn from "src/modules/base-components/modal-report-select-column.vue"; // import { Accordion } from "src/modules/base-components"; // import { loginService } from "src/services"; // import DatePicker from "vue2-datepicker"; diff --git a/Step/wwwroot/src/app_modules/reports/components/card-report-machine-status.vue b/Step/wwwroot/src/app_modules/reports/components/card-report-machine-status.vue index 9d877fee..9061566e 100644 --- a/Step/wwwroot/src/app_modules/reports/components/card-report-machine-status.vue +++ b/Step/wwwroot/src/app_modules/reports/components/card-report-machine-status.vue @@ -34,7 +34,7 @@
-
+
@@ -96,4 +96,4 @@ - \ No newline at end of file + diff --git a/Step/wwwroot/src/app_modules/reports/components/card-report-production.ts b/Step/wwwroot/src/app_modules/reports/components/card-report-production.ts index bdc6967b..9357e9f1 100644 --- a/Step/wwwroot/src/app_modules/reports/components/card-report-production.ts +++ b/Step/wwwroot/src/app_modules/reports/components/card-report-production.ts @@ -1,8 +1,8 @@ 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 { cardReport } from "src/modules/base-components/cards/index"; +import accordionDropdown from "src/modules/base-components/accordion-dropdown.vue"; +import modalReportSelectColumn from "src/modules/base-components/modal-report-select-column.vue"; import { Accordion } from "src/modules/base-components"; import { loginService } from "src/services"; import DatePicker from "vue2-datepicker"; @@ -12,14 +12,11 @@ import { ReportGetters } from "@/src/store/report.store"; import { Watch } from "vue-property-decorator"; import Chart from "chart.js"; -import { reportService } from "../../../services/reportService"; -import { awaiter } from "../../../_base"; -import { toolingStore } from "@/src/store/tooling.store"; - -declare var JustGage: any; +import { reportService } from "src/services/reportService"; +import { DoughnutChart } from "src/components/doughnut-chart"; declare let $: any; -@Component({ components: { datePicker: DatePicker, cardReport: cardReport, accordionDropdown: accordionDropdown, accordion: Accordion } }) +@Component({ components: { datePicker: DatePicker, cardReport: cardReport, accordionDropdown: accordionDropdown, accordion: Accordion, DoughnutChart } }) export default class CardReportProduction extends Vue { lang = { @@ -117,7 +114,6 @@ export default class CardReportProduction extends Vue { // this.resultPrograms = await reportService.ProgramsReport(9,this.selectedPage,this.filter.nameProgram, this.filter.interval); // this.paginationData.pages = this.resultPrograms.pages; this.buildChart(); - this.buildGage(); } public selectTab(value) { @@ -127,16 +123,6 @@ export default class CardReportProduction extends Vue { return (moment() as any)._locale._longDateFormat.LT; } - - buildGage() { - let p = new JustGage({ - id: "gauge", - value: this.dataPieces.absoluteValue, - min: 0, - max: 100 - }); - } - viewDiagram() { if (!this.selectDiagram) { this.selectDiagram = true; @@ -226,7 +212,7 @@ export default class CardReportProduction extends Vue { (_self.$refs.tooltip_executed as HTMLElement).innerHTML = barSelected.quantity.toString(); (_self.$refs.tooltip_frequency as HTMLElement).innerHTML = barSelected.frequency.toString(); - + debugger; var positionY = this._chart.canvas.offsetTop; var positionX = this._chart.canvas.offsetLeft; if(tooltip.caretY > 350){ diff --git a/Step/wwwroot/src/app_modules/reports/components/card-report-production.vue b/Step/wwwroot/src/app_modules/reports/components/card-report-production.vue index dd981941..d5dd4b0c 100644 --- a/Step/wwwroot/src/app_modules/reports/components/card-report-production.vue +++ b/Step/wwwroot/src/app_modules/reports/components/card-report-production.vue @@ -88,14 +88,14 @@ -
- +
+
 
 
- +
@@ -149,7 +149,7 @@
-
+
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 7e85db78..14d0441f 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 @@ -6,17 +6,17 @@ import DatePicker from "vue2-datepicker"; import { ReportGetters } from "src/store/report.store"; import { reportService } from "src/services/reportService"; import { TimeLineChartHeader, TimeLineChartRow } from "src/components/timeline-chart"; +import { DoughnutChart } from "src/components/doughnut-chart"; declare let $: any; -declare var JustGage: any; - @Component({ components: { datePicker: DatePicker, cardReport: cardReport, accordionDropdown: accordionDropdown, "timeline-chart-row": TimeLineChartRow, - "timeline-chart-header": TimeLineChartHeader + "timeline-chart-header": TimeLineChartHeader, + DoughnutChart } }) export default class CardReportTimeline extends Vue { @@ -61,8 +61,8 @@ export default class CardReportTimeline extends Vue { } }; - private defaultStartDate: Date = new Date(2019, 1, 1); //new Date(new Date().setDate(new Date().getDate() - 6)); - private defaultEndDate: Date = new Date(2019, 1, 28); //new Date(new Date().setDate(new Date().getDate() + 1)); + private defaultStartDate: Date = new Date(new Date().setDate(new Date().getDate() - 6)); + private defaultEndDate: Date = new Date(new Date().setDate(new Date().getDate() + 1)); filter: { name: string, @@ -81,14 +81,13 @@ export default class CardReportTimeline extends Vue { startTime: Date; endTime: Date; } = { - date: [new Date(2019, 1, 1), new Date(2019, 1, 28)], + date: [new Date(new Date().setDate(new Date().getDate() - 6)), new Date(new Date().setDate(new Date().getDate() + 1))], startTime: null, endTime: null, }; async mounted() { this.filterIntervalChange(this.interval.date, null); - this.buildGage(); } @Watch("filter.name", { immediate: true }) @@ -139,15 +138,6 @@ export default class CardReportTimeline extends Vue { this.interval.date = [start, end]; } - buildGage() { - let p = new JustGage({ - id: "gauge", - value: this.dataPieces.absoluteValue, - min: 0, - max: 100 - }); - } - async getData() { let occurrences = await reportService.TimeLine(this.filter.interval.map(x => x.toString()), this.filter.name); this.occurrences = { 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 caf579f4..76091ccd 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 @@ -31,9 +31,11 @@