diff --git a/Step/wwwroot/assets/styles/base/alarms.less b/Step/wwwroot/assets/styles/base/alarms.less index 4c4d6c6e..dbd08534 100644 --- a/Step/wwwroot/assets/styles/base/alarms.less +++ b/Step/wwwroot/assets/styles/base/alarms.less @@ -305,3 +305,309 @@ } } } + + +.alarm-history-container{ + height: 100%; + width: 100%; + display: flex; + justify-content: center; + padding-top: 104px; + .alarm-history-box{ + width: 1808px; + height: 872px; + border-radius: 2px; + background-color: @color-background-white; + box-shadow: 0 1px 2px 0 @color-black-40; + .alarm-history-header{ + height: 64px; + display: flex; + align-items: center; + border-bottom: solid 2px @color-whitethree; + .alarm-history-header-label{ + margin-left: 23px; + font-size: 20px; + color: @color-darkish-blue; + } + } + } + .alarm-history-body{ + width: 100%; + height: 806px; + display: flex; + flex-flow: row; + align-items: center; + justify-content: center; + .alarm-history-body-left{ + width: 1241px; + height: 766px; + display: flex; + flex-flow: column; + margin-right: 23px; + .alarm-history-left-filter{ + width: 100%; + height: 86px; + display: flex; + flex-flow: row; + .filter-text, .filter-state, .filter-type, .filter-date-range, .filter-user{ + display: flex; + flex-flow: column; + margin: 0 12px; + label{ + font-size: 14px; + line-height: 1.29; + color: @color-warm-grey; + } + input{ + width: 288px; + height: 44px; + border-radius: 2px; + box-shadow: inset 0 1px 3px 0 @color-black-50; + border: solid 1px @color-silver; + font-size: 18px; + } + } + .filter-text{ + margin-left: 0; + } + .filter-state select, .filter-type select, .filter-date-range select, .filter-user select{ + width: 144px; + height: 48px; + border-radius: 2px; + box-shadow: 0 1px 2px 0 @color-black-40; + border: solid 1px @color-silver; + font-size: 18px; + line-height: 1.11; + color: @color-greyish-brown; + } + .filter-date-range select{ + width: 192px; + } + .group-button{ + display: flex; + height: 100%; + justify-content: center; + align-items: center; + button.btn{ + padding: 0; + width: 48px; + } + } + } + .alarm-history-table{ + table{ + width: 1241px; + max-height: 680px; + border-collapse: collapse; + border: solid 1px @color-label-grey; + margin-top: 10px; + } + tbody{ + min-height: 680px; + } + tr{ + min-height: 64px; + } + td, th { + text-align: center; + // padding: 8px; + height: 64px; + font-size: 14px; + line-height: 1.43; + color: @color-greyish-brown; + } + td{ + min-height: 64px; + } + thead tr th{ + font-size: 14px; + line-height: 1.43; + font-weight: 600; + color: @color-greyish-brown; + background-color: @color-background-white; + } + tr:nth-child(even) { + background-color: @color-white4; + } + tr:nth-child(odd){ + background-color: @color-clear-blue-30; + } + } + } + .alarm-history-body-right{ + width: 496px; + height: 760px; + border-radius: 2px; + background-color: @color-whitegrey; + box-shadow: 0 1px 2px 0 @color-black-40; + display: flex; + align-items: center; + justify-content: center; + .box-right{ + display: flex; + flex-flow: column; + height: 675px; + width: 443px; + .box-right-info{ + width: 94%; + height: 180px; + .box-right-info-header{ + .title{ + font-size: 18px; + font-weight: bold; + color: @color-scarlet; + margin-bottom: 2px; + } + .subtitle{ + margin-bottom: 3px; + label{ + width: 64px; + height: 21px; + border: solid 1px @color-warm-grey2; + font-size: 14px; + font-weight: 600; + line-height: 1.29; + color: @color-greyish-brown; + } + } + .date{ + margin-bottom: 8px; + label{ + font-size: 16px; + color: @color-greyish-brown; + } + } + } + .box-right-info-body{ + margin-bottom: 20px; + span{ + font-size: 18px; + line-height: 1; + color: @color-greyish-brown; + } + } + .box-right-info-footer{ + border-bottom: solid 2px @color-white; + padding-bottom: 12px; + span{ + font-size: 18px; + line-height: 1; + color: @color-greyish-brown; + label{ + font-weight: bold; + } + } + } + } + .box-right-action{ + height: 495px; + width: 94%; + .wizard{ + .user-help { + background-color: #fff; + display: flex; + height: 64px; + margin: 23px 0 12px 0; + align-items: center; + border-radius: 2px; + box-shadow: @small-shadow; + .detail { + width: 100%; + strong, + span { + display: block; + color: @color-darkish-blue; + font-size: 14px; + } + strong { + font-size: 18px; + } + } + i.group { + min-width: 28px; + height: 28px; + object-fit: contain; + background-image: url(../icons/png/group.png); + background-size: cover; + margin: 0 12px; + } + } + } + .group-button{ + display: flex; + flex-flow: row; + } + .attach{ + .accordion{ + margin-top: 24px; + .filename{ + display: flex; + height: 64px; + align-items: center; + cursor: pointer; + i{ + margin: 0 20px 0 20px; + } + span{ + width: 100%; + font-size: 18px; + line-height: 1; + color: @color-greyish-brown; + } + .right{ + width: 100%; + display: flex; + justify-content: flex-end; + button.btn-hidden{ + visibility: hidden; + i{ + font-size: 26px; + visibility: visible; + margin: 0 12px; + cursor: pointer; + } + } + } + } + .filename.selected{ + background-color: rgba(255, 255, 255, 0.8); + } + .allattach{ + display: flex; + height: 64px; + align-items: center; + button.btn-hidden{ + visibility: hidden; + span{ + font-size: 18px; + line-height: 1; + visibility: visible; + margin: 0 0 0 20px; + color: @color-greyish-brown; + cursor: pointer; + } + } + } + } + .accordion header{ + color: @color-darkish-blue; + } + .accordion header small{ + border: 2px solid @color-darkish-blue; + color: @color-darkish-blue; + } + } + .note{ + .accordion header{ + color: @color-darkish-blue; + } + .accordion header small{ + border: 2px solid @color-darkish-blue; + color: @color-darkish-blue; + } + } + } + } + } + } +} \ No newline at end of file diff --git a/Step/wwwroot/assets/styles/base/colors.less b/Step/wwwroot/assets/styles/base/colors.less index fe408604..49c1ed5c 100644 --- a/Step/wwwroot/assets/styles/base/colors.less +++ b/Step/wwwroot/assets/styles/base/colors.less @@ -38,6 +38,7 @@ @color-white: #fff; @color-input-light: #4b4b4b; @color-warm-grey: #878787; +@color-warm-grey2: #9b9b9b; @color-label-grey: #979797; @color-input-background: #f8f8f8; @color-squash : #f5a623; diff --git a/Step/wwwroot/assets/styles/style.css b/Step/wwwroot/assets/styles/style.css index 23a33f1e..97c818d2 100644 --- a/Step/wwwroot/assets/styles/style.css +++ b/Step/wwwroot/assets/styles/style.css @@ -2998,6 +2998,315 @@ footer .container button.big:before { color: #d0021b; font-weight: bold; } +.alarm-history-container { + height: 100%; + width: 100%; + display: flex; + justify-content: center; + padding-top: 104px; +} +.alarm-history-container .alarm-history-box { + width: 1808px; + height: 872px; + border-radius: 2px; + background-color: #fff; + box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4); +} +.alarm-history-container .alarm-history-box .alarm-history-header { + height: 64px; + display: flex; + align-items: center; + border-bottom: solid 2px #e7e7e7; +} +.alarm-history-container .alarm-history-box .alarm-history-header .alarm-history-header-label { + margin-left: 23px; + font-size: 20px; + color: #002680; +} +.alarm-history-container .alarm-history-body { + width: 100%; + height: 806px; + display: flex; + flex-flow: row; + align-items: center; + justify-content: center; +} +.alarm-history-container .alarm-history-body .alarm-history-body-left { + width: 1241px; + height: 766px; + display: flex; + flex-flow: column; + margin-right: 23px; +} +.alarm-history-container .alarm-history-body .alarm-history-body-left .alarm-history-left-filter { + width: 100%; + height: 86px; + display: flex; + flex-flow: row; +} +.alarm-history-container .alarm-history-body .alarm-history-body-left .alarm-history-left-filter .filter-text, +.alarm-history-container .alarm-history-body .alarm-history-body-left .alarm-history-left-filter .filter-state, +.alarm-history-container .alarm-history-body .alarm-history-body-left .alarm-history-left-filter .filter-type, +.alarm-history-container .alarm-history-body .alarm-history-body-left .alarm-history-left-filter .filter-date-range, +.alarm-history-container .alarm-history-body .alarm-history-body-left .alarm-history-left-filter .filter-user { + display: flex; + flex-flow: column; + margin: 0 12px; +} +.alarm-history-container .alarm-history-body .alarm-history-body-left .alarm-history-left-filter .filter-text label, +.alarm-history-container .alarm-history-body .alarm-history-body-left .alarm-history-left-filter .filter-state label, +.alarm-history-container .alarm-history-body .alarm-history-body-left .alarm-history-left-filter .filter-type label, +.alarm-history-container .alarm-history-body .alarm-history-body-left .alarm-history-left-filter .filter-date-range label, +.alarm-history-container .alarm-history-body .alarm-history-body-left .alarm-history-left-filter .filter-user label { + font-size: 14px; + line-height: 1.29; + color: #878787; +} +.alarm-history-container .alarm-history-body .alarm-history-body-left .alarm-history-left-filter .filter-text input, +.alarm-history-container .alarm-history-body .alarm-history-body-left .alarm-history-left-filter .filter-state input, +.alarm-history-container .alarm-history-body .alarm-history-body-left .alarm-history-left-filter .filter-type input, +.alarm-history-container .alarm-history-body .alarm-history-body-left .alarm-history-left-filter .filter-date-range input, +.alarm-history-container .alarm-history-body .alarm-history-body-left .alarm-history-left-filter .filter-user input { + width: 288px; + height: 44px; + border-radius: 2px; + box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.5); + border: solid 1px #bbbcbc; + font-size: 18px; +} +.alarm-history-container .alarm-history-body .alarm-history-body-left .alarm-history-left-filter .filter-text { + margin-left: 0; +} +.alarm-history-container .alarm-history-body .alarm-history-body-left .alarm-history-left-filter .filter-state select, +.alarm-history-container .alarm-history-body .alarm-history-body-left .alarm-history-left-filter .filter-type select, +.alarm-history-container .alarm-history-body .alarm-history-body-left .alarm-history-left-filter .filter-date-range select, +.alarm-history-container .alarm-history-body .alarm-history-body-left .alarm-history-left-filter .filter-user select { + width: 144px; + height: 48px; + border-radius: 2px; + box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4); + border: solid 1px #bbbcbc; + font-size: 18px; + line-height: 1.11; + color: #4b4b4b; +} +.alarm-history-container .alarm-history-body .alarm-history-body-left .alarm-history-left-filter .filter-date-range select { + width: 192px; +} +.alarm-history-container .alarm-history-body .alarm-history-body-left .alarm-history-left-filter .group-button { + display: flex; + height: 100%; + justify-content: center; + align-items: center; +} +.alarm-history-container .alarm-history-body .alarm-history-body-left .alarm-history-left-filter .group-button button.btn { + padding: 0; + width: 48px; +} +.alarm-history-container .alarm-history-body .alarm-history-body-left .alarm-history-table table { + width: 1241px; + max-height: 680px; + border-collapse: collapse; + border: solid 1px #979797; + margin-top: 10px; +} +.alarm-history-container .alarm-history-body .alarm-history-body-left .alarm-history-table tbody { + min-height: 680px; +} +.alarm-history-container .alarm-history-body .alarm-history-body-left .alarm-history-table tr { + min-height: 64px; +} +.alarm-history-container .alarm-history-body .alarm-history-body-left .alarm-history-table td, +.alarm-history-container .alarm-history-body .alarm-history-body-left .alarm-history-table th { + text-align: center; + height: 64px; + font-size: 14px; + line-height: 1.43; + color: #4b4b4b; +} +.alarm-history-container .alarm-history-body .alarm-history-body-left .alarm-history-table td { + min-height: 64px; +} +.alarm-history-container .alarm-history-body .alarm-history-body-left .alarm-history-table thead tr th { + font-size: 14px; + line-height: 1.43; + font-weight: 600; + color: #4b4b4b; + background-color: #fff; +} +.alarm-history-container .alarm-history-body .alarm-history-body-left .alarm-history-table tr:nth-child(even) { + background-color: #f3f3f3; +} +.alarm-history-container .alarm-history-body .alarm-history-body-left .alarm-history-table tr:nth-child(odd) { + background-color: rgba(23, 145, 255, 0.3); +} +.alarm-history-container .alarm-history-body .alarm-history-body-right { + width: 496px; + height: 760px; + border-radius: 2px; + background-color: #dddddd; + box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4); + display: flex; + align-items: center; + justify-content: center; +} +.alarm-history-container .alarm-history-body .alarm-history-body-right .box-right { + display: flex; + flex-flow: column; + height: 675px; + width: 443px; +} +.alarm-history-container .alarm-history-body .alarm-history-body-right .box-right .box-right-info { + width: 94%; + height: 180px; +} +.alarm-history-container .alarm-history-body .alarm-history-body-right .box-right .box-right-info .box-right-info-header .title { + font-size: 18px; + font-weight: bold; + color: #d0021b; + margin-bottom: 2px; +} +.alarm-history-container .alarm-history-body .alarm-history-body-right .box-right .box-right-info .box-right-info-header .subtitle { + margin-bottom: 3px; +} +.alarm-history-container .alarm-history-body .alarm-history-body-right .box-right .box-right-info .box-right-info-header .subtitle label { + width: 64px; + height: 21px; + border: solid 1px #9b9b9b; + font-size: 14px; + font-weight: 600; + line-height: 1.29; + color: #4b4b4b; +} +.alarm-history-container .alarm-history-body .alarm-history-body-right .box-right .box-right-info .box-right-info-header .date { + margin-bottom: 8px; +} +.alarm-history-container .alarm-history-body .alarm-history-body-right .box-right .box-right-info .box-right-info-header .date label { + font-size: 16px; + color: #4b4b4b; +} +.alarm-history-container .alarm-history-body .alarm-history-body-right .box-right .box-right-info .box-right-info-body { + margin-bottom: 20px; +} +.alarm-history-container .alarm-history-body .alarm-history-body-right .box-right .box-right-info .box-right-info-body span { + font-size: 18px; + line-height: 1; + color: #4b4b4b; +} +.alarm-history-container .alarm-history-body .alarm-history-body-right .box-right .box-right-info .box-right-info-footer { + border-bottom: solid 2px #fff; + padding-bottom: 12px; +} +.alarm-history-container .alarm-history-body .alarm-history-body-right .box-right .box-right-info .box-right-info-footer span { + font-size: 18px; + line-height: 1; + color: #4b4b4b; +} +.alarm-history-container .alarm-history-body .alarm-history-body-right .box-right .box-right-info .box-right-info-footer span label { + font-weight: bold; +} +.alarm-history-container .alarm-history-body .alarm-history-body-right .box-right .box-right-action { + height: 495px; + width: 94%; +} +.alarm-history-container .alarm-history-body .alarm-history-body-right .box-right .box-right-action .wizard .user-help { + background-color: #fff; + display: flex; + height: 64px; + margin: 23px 0 12px 0; + align-items: center; + border-radius: 2px; + box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4); +} +.alarm-history-container .alarm-history-body .alarm-history-body-right .box-right .box-right-action .wizard .user-help .detail { + width: 100%; +} +.alarm-history-container .alarm-history-body .alarm-history-body-right .box-right .box-right-action .wizard .user-help .detail strong, +.alarm-history-container .alarm-history-body .alarm-history-body-right .box-right .box-right-action .wizard .user-help .detail span { + display: block; + color: #002680; + font-size: 14px; +} +.alarm-history-container .alarm-history-body .alarm-history-body-right .box-right .box-right-action .wizard .user-help .detail strong { + font-size: 18px; +} +.alarm-history-container .alarm-history-body .alarm-history-body-right .box-right .box-right-action .wizard .user-help i.group { + min-width: 28px; + height: 28px; + object-fit: contain; + background-image: url(../icons/png/group.png); + background-size: cover; + margin: 0 12px; +} +.alarm-history-container .alarm-history-body .alarm-history-body-right .box-right .box-right-action .group-button { + display: flex; + flex-flow: row; +} +.alarm-history-container .alarm-history-body .alarm-history-body-right .box-right .box-right-action .attach .accordion { + margin-top: 24px; +} +.alarm-history-container .alarm-history-body .alarm-history-body-right .box-right .box-right-action .attach .accordion .filename { + display: flex; + height: 64px; + align-items: center; + cursor: pointer; +} +.alarm-history-container .alarm-history-body .alarm-history-body-right .box-right .box-right-action .attach .accordion .filename i { + margin: 0 20px 0 20px; +} +.alarm-history-container .alarm-history-body .alarm-history-body-right .box-right .box-right-action .attach .accordion .filename span { + width: 100%; + font-size: 18px; + line-height: 1; + color: #4b4b4b; +} +.alarm-history-container .alarm-history-body .alarm-history-body-right .box-right .box-right-action .attach .accordion .filename .right { + width: 100%; + display: flex; + justify-content: flex-end; +} +.alarm-history-container .alarm-history-body .alarm-history-body-right .box-right .box-right-action .attach .accordion .filename .right button.btn-hidden { + visibility: hidden; +} +.alarm-history-container .alarm-history-body .alarm-history-body-right .box-right .box-right-action .attach .accordion .filename .right button.btn-hidden i { + font-size: 26px; + visibility: visible; + margin: 0 12px; + cursor: pointer; +} +.alarm-history-container .alarm-history-body .alarm-history-body-right .box-right .box-right-action .attach .accordion .filename.selected { + background-color: rgba(255, 255, 255, 0.8); +} +.alarm-history-container .alarm-history-body .alarm-history-body-right .box-right .box-right-action .attach .accordion .allattach { + display: flex; + height: 64px; + align-items: center; +} +.alarm-history-container .alarm-history-body .alarm-history-body-right .box-right .box-right-action .attach .accordion .allattach button.btn-hidden { + visibility: hidden; +} +.alarm-history-container .alarm-history-body .alarm-history-body-right .box-right .box-right-action .attach .accordion .allattach button.btn-hidden span { + font-size: 18px; + line-height: 1; + visibility: visible; + margin: 0 0 0 20px; + color: #4b4b4b; + cursor: pointer; +} +.alarm-history-container .alarm-history-body .alarm-history-body-right .box-right .box-right-action .attach .accordion header { + color: #002680; +} +.alarm-history-container .alarm-history-body .alarm-history-body-right .box-right .box-right-action .attach .accordion header small { + border: 2px solid #002680; + color: #002680; +} +.alarm-history-container .alarm-history-body .alarm-history-body-right .box-right .box-right-action .note .accordion header { + color: #002680; +} +.alarm-history-container .alarm-history-body .alarm-history-body-right .box-right .box-right-action .note .accordion header small { + border: 2px solid #002680; + color: #002680; +} .hmi-container { position: absolute; left: 0; diff --git a/Step/wwwroot/src/app.modules.js b/Step/wwwroot/src/app.modules.js index fe80d37d..b97d3afc 100644 --- a/Step/wwwroot/src/app.modules.js +++ b/Step/wwwroot/src/app.modules.js @@ -61,6 +61,9 @@ export const ToolingMagPos = () => export const Maintenance = () => import ("./components/maintenance.vue"); +export const AlarmHistory = () => + import ("./components/alarm-history.vue"); + export const Production = () => import ("./components/production.vue"); diff --git a/Step/wwwroot/src/app.routes.js b/Step/wwwroot/src/app.routes.js index 08c55caa..81da5285 100644 --- a/Step/wwwroot/src/app.routes.js +++ b/Step/wwwroot/src/app.routes.js @@ -48,7 +48,8 @@ import { JobEditor, ObjectsJob, MissingTool, - ModalMissingTools + ModalMissingTools, + AlarmHistory } from "./app.modules"; export let routes = [ @@ -94,6 +95,8 @@ export let routes = [ { path: "/depot-action-unloading", component: DepotActionUnloading, meta: { title: "Step - Depot-Action-Unloading", area: "depot-action-unloading" } }, { path: "/depot-action-generic", component: DepotActionGeneric, meta: { title: "Step - Depot-Action-Generic", area: "depot-action-generic" } }, + { path: "/alarm-history", component: AlarmHistory, meta: { title: "Step - Alarm-History", area: "alarm-history" } }, + { path: "/job-editor", component: JobEditor, meta: { title: "Job-Editor", area: "job-editor" } }, { path: "/objects-job", component: ObjectsJob, meta: { title: "Objects Job", area: "objects-jobs" } }, diff --git a/Step/wwwroot/src/components/alarm-history.ts b/Step/wwwroot/src/components/alarm-history.ts new file mode 100644 index 00000000..bb2320b0 --- /dev/null +++ b/Step/wwwroot/src/components/alarm-history.ts @@ -0,0 +1,7 @@ +import Vue from "vue"; +import Component from "vue-class-component"; +import { Accordion } from "src/modules/base-components"; +@Component({ components: { accordion: Accordion } }) +export default class AlarmHistory extends Vue { + +} \ No newline at end of file diff --git a/Step/wwwroot/src/components/alarm-history.vue b/Step/wwwroot/src/components/alarm-history.vue new file mode 100644 index 00000000..2d24ac31 --- /dev/null +++ b/Step/wwwroot/src/components/alarm-history.vue @@ -0,0 +1,153 @@ + + \ No newline at end of file