diff options
Diffstat (limited to 'src/views')
69 files changed, 12420 insertions, 1152 deletions
diff --git a/src/views/BMC/Configuration/BMCConfiguration.vue b/src/views/BMC/Configuration/BMCConfiguration.vue index 92f4f051..8202f225 100644 --- a/src/views/BMC/Configuration/BMCConfiguration.vue +++ b/src/views/BMC/Configuration/BMCConfiguration.vue @@ -10,7 +10,7 @@ <b-button v-b-toggle.toggle-collapse_1 variant="link" - class="bmc-collapse__button semi-bold-16px" + class="collapse-button semi-bold-16px" > {{ $t('BMC.BmcTitle') }} <component :is="iconChevronUp" class="icon-expand" /> @@ -32,7 +32,7 @@ <b-button v-b-toggle.toggle-collapse_2 variant="link" - class="bmc-collapse__button semi-bold-16px" + class="collapse-button semi-bold-16px" > {{ $t('BMC.ControlTitle') }} <component :is="iconChevronUp" class="icon-expand" /> @@ -74,23 +74,6 @@ export default { padding: 0; } -.bmc-collapse__button { - height: 56px; - width: 100%; - padding: 0 0 0 2rem; - margin: 0; - display: flex; - flex-flow: row nowrap; - justify-content: flex-start; - &:active, - &:focus { - box-shadow: none; - } - &:hover { - color: $text-primary; - } -} - .nav-item { list-style-type: none; } diff --git a/src/views/BMC/Configuration/BMCConfigurationControl.vue b/src/views/BMC/Configuration/BMCConfigurationControl.vue index cacd54ed..7f3de021 100644 --- a/src/views/BMC/Configuration/BMCConfigurationControl.vue +++ b/src/views/BMC/Configuration/BMCConfigurationControl.vue @@ -11,13 +11,18 @@ popup="BMC.ReloadBmc_popup" button="BMC.ReloadBmc" /> + <settings-import-popup + id="popover-reactive-2" + description="BMC.ExportImport" + popup="BMC.ExportImport" + button="BMC.ExportImport_button" + /> <div> - <span class="regular-12px underline">{{ - $t('BMC.ExportImport') - }}</span> - </div> - <div> - <span class="regular-12px underline">{{ $t('BMC.Parametrs') }}</span> + <span + class="regular-12px underline pointer" + @click="redirectNetworkParametrs" + >{{ $t('BMC.Parametrs') }}</span + > </div> </div> @@ -26,18 +31,18 @@ <span class="semi-bold-12px">{{ $t('BMC.microcode') }}</span> </div> <popover - id="popover-reactive-2" + id="popover-reactive-3" description="BMC.ReloadMicrocodeBios" popup="BMC.ReloadMicrocodeBios" button="global.action.refresh" - :microcode="true" + :is-microcode="true" /> <popover - id="popover-reactive-3" + id="popover-reactive-4" description="BMC.ReloadicrocodeBmc" popup="BMC.ReloadicrocodeBmc" button="global.action.refresh" - :microcode="true" + :is-microcode="true" /> </div> </div> @@ -45,11 +50,16 @@ </template> <script> +import SettingsImportPopup from './SettingsImportPopup'; import PageSection from '@/components/Global/PageSection'; import Popover from '@/components/Global/Popover'; export default { - components: { PageSection, Popover }, + components: { + PageSection, + Popover, + SettingsImportPopup, + }, data() { return { timeOption: 'resetBios', @@ -66,6 +76,11 @@ export default { }, }; }, + methods: { + redirectNetworkParametrs() { + this.$router.push('/network-parametrs'); + }, + }, }; </script> <style lang="scss" scoped> @@ -100,4 +115,8 @@ a { label { padding-top: 5px; } + +.pointer { + cursor: pointer; +} </style> diff --git a/src/views/BMC/Configuration/BMCConfigurationTable.vue b/src/views/BMC/Configuration/BMCConfigurationTable.vue index dd0033e7..a550743e 100644 --- a/src/views/BMC/Configuration/BMCConfigurationTable.vue +++ b/src/views/BMC/Configuration/BMCConfigurationTable.vue @@ -8,6 +8,23 @@ :fields="fields" :empty-text="$t('global.table.emptyMessage')" > + <template #cell(value)="data"> + <b-row v-if="data.index === 2"> + <b-col> + <span v-if="isAddersСolon"> + {{ '487566942332' }} + </span> + <span v-else> + {{ data.value }} + </span> + </b-col> + <b-col class="macAddresCol"> + <b-form-checkbox v-model="isAddersСolon"> </b-form-checkbox> + <span> {{ 'XXXX формат' }} </span> + </b-col> + </b-row> + <span v-else>{{ data.value }}</span> + </template> </b-table> </page-section> </template> @@ -26,6 +43,7 @@ export default { data() { return { isBusy: true, + isAddersСolon: false, fields: [ { key: 'param', @@ -52,7 +70,7 @@ export default { value: '14:20', }, { param: 'Версия прошивки', value: '1.214.248 beta' }, - { param: 'MAC - адреса', value: '487566947' }, + { param: 'MAC - адреса', value: '48:75:66:94:23:32' }, { param: 'IP - адреса', value: '192.168.48.1' }, { param: 'Имя ВМС', value: 'ВМС-007' }, ], @@ -64,4 +82,12 @@ export default { .bootstrap-rounded-table__column-first___bmc_conf { width: 50%; } + +.macAddresCol { + height: 15px; + display: flex; + flex-flow: row nowrap; + justify-content: flex-end; + align-items: center; +} </style> diff --git a/src/views/BMC/Configuration/SettingsImportPopup.vue b/src/views/BMC/Configuration/SettingsImportPopup.vue new file mode 100644 index 00000000..c7309ba3 --- /dev/null +++ b/src/views/BMC/Configuration/SettingsImportPopup.vue @@ -0,0 +1,295 @@ +<template> + <div id="my-container"> + <span + :id="id" + ref="button" + class="regular-12px underline pointer" + variant="primary" + > + {{ $t(description) }} + </span> + <!-- Our popover title and content render container --> + <b-popover + id="export-popup" + ref="popover" + :target="id" + triggers="click" + :show.sync="popoverShow" + placement="auto" + container="my-container" + @show="onShow" + @shown="onShown" + @hidden="onHidden" + > + <template #title> + <div class="popup-title"> + <span class="semi-bold-20px">{{ $t(popup) }}</span> + <b-button class="popup-title__button_close" @click="onClose"> + <img src="@/assets/images/popups/x-icon.svg" /> + </b-button> + </div> + </template> + <div class="popup-switch"> + <span + class="medium-16px popup-item" + :class="{ 'switch-active': isExport }" + @click="switchExport" + >{{ $t('global.action.export') }}</span + > + <span + class="medium-16px popup-item" + :class="{ 'switch-active': !isExport }" + @click="switchImport" + >{{ $t('global.action.import') }}</span + > + <div class="slider" /> + </div> + <div v-if="isExport" class="popup-body"> + <div class="ip-container"> + <span class="regular-16px" + >Оставить IP адрес из настроек сервера</span + > + <b-form-checkbox switch> </b-form-checkbox> + </div> + <b-button class="popover-button" variant="primary" @click="onClose"> + {{ $t(button) }} + </b-button> + </div> + <div v-else class="settings-import_container"> + <b-form-file + id="settings-import__file-input" + placeholder="Нажмите на область или перетащите в нее файл с настройками" + ></b-form-file> + </div> + </b-popover> + </div> +</template> + +<script> +export default { + props: { + description: { + type: String, + default: '', + }, + id: { + type: String, + default: '', + }, + button: { + type: String, + default: 'global.action.reload', + }, + popup: { + type: String, + default: '', + }, + }, + data() { + return { + input1: '', + input1state: null, + input1Return: '', + popoverShow: false, + isExport: true, + }; + }, + watch: { + input1(val) { + if (val) { + this.input1state = true; + } + }, + }, + methods: { + onClose() { + this.popoverShow = false; + }, + onOk() { + if (!this.input1) { + this.input1state = false; + } + if (this.input1) { + this.onClose(); + // Return our popover form results + this.input1Return = this.input1; + } + }, + onShow() { + this.$root.$emit('bv::hide::popover'); + // This is called just before the popover is shown + // Reset our popover form variables + this.input1 = ''; + this.input1state = null; + this.input1Return = ''; + }, + onShown() { + // Called just after the popover has been shown + // Transfer focus to the first input + this.focusRef(this.$refs.input1); + }, + onHidden() { + // Called just after the popover has finished hiding + // Bring focus back to the button + this.focusRef(this.$refs.button); + }, + focusRef(ref) { + // Some references may be a component, functional component, or plain element + // This handles that check before focusing, assuming a `focus()` method exists + // We do this in a double `$nextTick()` to ensure components have + // updated & popover positioned first + this.$nextTick(() => { + this.$nextTick(() => { + (ref.$el || ref).focus(); + }); + }); + }, + switchExport() { + this.isExport = true; + }, + switchImport() { + this.isExport = false; + }, + }, +}; +</script> +<style lang="scss"> +.custom-file { + width: 432px; + height: 108px; +} + +#settings-import__file-input ~ .custom-file-label { + background-color: transparent; + border: 1px dashed rgba(12, 28, 41, 0.6); + box-sizing: border-box; + border-radius: 8px; + width: 432px; + height: 108px; + display: flex; + justify-content: center; + align-items: center; + text-align: center; + white-space: normal; + padding: 0 65px; +} + +#settings-import__file-input ~ .custom-file-label::after { + display: none; +} +</style> +<style lang="scss" scoped> +#export-popup { + flex-direction: column; + align-items: flex-start; + background: #ffffff; + box-shadow: 0px -4px 12px rgb(0 0 0 / 5%); + border-radius: 16px !important; + border-radius: 4px; + max-width: 480px; + width: 480px; + height: auto; +} + +.form-group { + margin: 0; +} + +.popup-title { + display: flex; + align-items: baseline; + width: 465px; +} + +.popup-title__button_close { + margin: 0 28px 0 auto; + background: none; + border: none; + &:active { + background-color: $faint-secondary-primary-5-hover !important; + box-shadow: none !important; + border-radius: 8px; + } + &:focus-visible { + border: none !important; + border-radius: 8px; + } + &:focus { + box-shadow: none; + border-radius: 8px; + } +} + +.popup-body { + display: flex; + flex-direction: column; + align-content: center; + justify-content: center; +} + +.pointer { + cursor: pointer; +} + +.medium-16px { + display: inline-block; + height: 45px; + margin: 10px; + cursor: pointer; +} + +.popup-switch { + position: relative; + display: flex; + flex-flow: row nowrap; + border-bottom: 1px solid #f3f4f5; +} + +.switch-active { + color: $red-brand-primary; + transition: ease-in 0.15s; +} + +.slider { + position: absolute; + width: 130px; + height: 0px; + border-bottom: 4px solid $red-brand-primary; + transition: ease-in 0.2s; + bottom: 14px; + left: 10px; +} + +.popup-item:nth-child(1).switch-active ~ .slider { + left: 10px; +} + +.popup-item:nth-child(2).switch-active ~ .slider { + left: 160px; +} + +.ip-container { + display: flex; + width: 461px; + height: 75px; + padding: 30px 15px 25px 15px; +} + +.popover-button { + width: 432px; + height: 52px; + margin: 0 auto 10px; +} + +.settings-import_container { + width: 478px; + height: 160px; + background-color: $surface-secondary; + margin: -15px -15px -8px -12px; + border-radius: 0 0 16px 16px; + + display: flex; + align-items: center; + justify-content: center; +} +</style> diff --git a/src/views/BMC/Firmware/FirmwarePage.vue b/src/views/BMC/Firmware/FirmwarePage.vue new file mode 100644 index 00000000..c9d2ab70 --- /dev/null +++ b/src/views/BMC/Firmware/FirmwarePage.vue @@ -0,0 +1,309 @@ +<template> + <b-container + :style="{ display: 'flex', 'flex-direction': 'column' }" + fluid="xxl pt-0 m-0" + > + <page-title /> + <!-- BMC table --> + <div class="main-container"> + <page-section class="bootstrap-table__section"> + <b-table + responsive="md" + sort-by="id" + class="bootstrap-fans-table bootstrap-fans-table__stripes" + sort-icon-left + no-sort-reset + :sort-desc="sortDesc" + :items="items" + :fields="fields" + > + <template #cell(name)="{ value }"> + <span class="regular-12px tretiatry"> + {{ value }} + </span> + </template> + <template #cell(minSpeedDate)="{ value }"> + <span class="regular-12px"> + {{ value.time }} + </span> + <span class="regular-12px tretiatry"> + {{ value.date }} + </span> + </template> + <template #cell(maxSpeedDate)="{ value }"> + <span class="regular-12px"> + {{ value.time }} + </span> + <span class="regular-12px tretiatry"> + {{ value.date }} + </span> + </template> + </b-table> + </page-section> + </div> + </b-container> +</template> + +<script> +import TableSortMixin from '@/components/Mixins/TableSortMixin'; +import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin'; +import TableFilterMixin from '@/components/Mixins/TableFilterMixin'; +import BVPaginationMixin from '@/components/Mixins/BVPaginationMixin'; +import BVTableSelectableMixin from '@/components/Mixins/BVTableSelectableMixin'; +import BVToastMixin from '@/components/Mixins/BVToastMixin'; +import DataFormatterMixin from '@/components/Mixins/DataFormatterMixin'; +import TableRowExpandMixin from '@/components/Mixins/TableRowExpandMixin'; + +import PageTitle from '@/components/Global/PageTitle'; +import PageSection from '@/components/Global/PageSection'; +import iconChevronUp from '@carbon/icons-vue/es/chevron--up/16'; + +export default { + components: { + PageTitle, + PageSection, + }, + mixins: [ + BVPaginationMixin, + BVTableSelectableMixin, + BVToastMixin, + LoadingBarMixin, + TableFilterMixin, + DataFormatterMixin, + TableSortMixin, + TableRowExpandMixin, + ], + data() { + return { + text: '', + iconChevronUp: iconChevronUp, + sortDesc: true, + fields: [ + { + key: 'name', + label: 'Устройство', + sortable: true, + formatter: this.dataFormatter, + thClass: 'bootstrap-fans-table__th medium-12px', + tdClass: 'bootstrap-fans-table__td light-12px', + }, + { + key: 'version', + label: 'Версия прошивки', + sortable: false, + formatter: this.dataFormatter, + thClass: 'bootstrap-fans-table__th medium-12px', + tdClass: 'bootstrap-fans-table__td light-12px', + }, + { + key: 'date', + label: 'Дата прошивки', + sortable: true, + formatter: this.dataFormatter, + thClass: 'bootstrap-fans-table__th medium-12px', + tdClass: 'bootstrap-fans-table__td light-12px', + }, + ], + items: [ + { + name: 'Встроенный контроллер Порт 1|Бокс 1|Вау 1', + version: 'HGP1', + date: '03.11.2021', + }, + { + name: 'Встроенный девайс', + version: '2.5', + date: '03.11.2021', + }, + { + name: 'Встроенный ALOM', + version: '10.52.7', + date: '03.11.2021', + }, + { + name: 'Встроенный RAID', + version: '3.00', + date: '03.11.2021', + }, + { + name: 'Системная плата', + version: '2.30 Aug 24 2020', + date: '03.11.2021', + }, + + { + name: 'Системная плата', + version: '11.0.0 Build 23', + date: '03.11.2021', + }, + { + name: 'Системная плата', + version: '3.46.4', + date: '03.11.2021', + }, + { + name: 'Системная плата', + version: '1.0.7', + date: '03.11.2021', + }, + { + name: 'Встроенный контроллер Порт 1|Бокс 1|Вау 1', + version: 'HPG0.9', + date: '02.11.2021', + }, + { + name: 'Встроенный девайс', + version: '2.5', + date: '02.11.2021', + }, + { + name: 'Встроенный ALOM', + version: '10.52.7', + date: '02.11.2021', + }, + { + name: 'Встроенный RAID', + version: '3.00', + date: '02.11.2021', + }, + { + name: 'Системная плата', + version: '2.30 Aug 24 2020', + date: '02.11.2021', + }, + { + name: 'Системная плата', + version: '11.0.0 Build 23', + date: '02.11.2021', + }, + { + name: 'Системная плата', + version: '3.46.4', + date: '02.11.2021', + }, + { + name: 'Системная плата', + version: '1.0.7', + date: '02.11.2021', + }, + { + name: 'Встроенный контроллер Порт 1|Бокс 1|Вау 1', + version: 'HPG0.8', + date: '01.11.2021', + }, + { + name: 'Встроенный девайс', + version: '2.5', + date: '01.11.2021', + }, + { + name: 'Встроенный ALOM', + version: '10.52.7', + date: '01.11.2021', + }, + { + name: 'Встроенный RAID', + version: '3.00', + date: '01.11.2021', + }, + { + name: 'Системная плата', + version: '2.30 Aug 24 2020', + date: '01.11.2021', + }, + + { + name: 'Системная плата', + version: '11.0.0 Build 23', + date: '01.11.2021', + }, + { + name: 'Системная плата', + version: '3.46.4', + date: '01.11.2021', + }, + { + name: 'Системная плата', + version: '1.0.7', + date: '01.11.2021', + }, + ], + }; + }, +}; +</script> +<style lang="scss"> +.bootstrap-table__section + .table.b-table + > thead + > tr + > [aria-sort='ascending'] { + background-image: url('../../../assets/images/event-logs/sort-icon-rotate.svg'); +} + +.bootstrap-table__section + .table.b-table + > thead + > tr + > [aria-sort='descending'], +.table.b-table > thead > tr > [aria-sort='none'] { + background-image: url('../../../assets/images/event-logs/sort-icon.svg'); +} + +.bootstrap-fans-table__th { + background-color: transparent !important; + color: $text-primary !important; + border-top: none !important; + padding: 10px 5px !important; + border-bottom: 1px solid $faint-secondary-primary-10; +} + +.bootstrap-fans-table__td { + padding: 5px !important; + border-top: none !important; +} +</style> +<style lang="scss" scoped> +//nav items style +.nav-item, +.nav-link { + padding: 0; +} + +.nav-item { + list-style-type: none; +} + +.semi-bold-12px { + display: inline-block; + padding: 16px 0 0 2rem; +} + +.bmc-configuration__bios-version { + display: inline-block; + color: #0c1c29; + padding: 8px 2px 2rem 2rem; +} + +a { + color: $text-primary !important; + &:hover { + color: $text-primary !important; + } +} + +.fans-colors { + display: inline-block; + width: 8px; + height: 8px; + border-radius: 2px; +} +.row { + align-items: center; + flex-wrap: nowrap; + justify-content: flex-end; +} +.medium-12px { + color: $text-primary !important; +} +</style> diff --git a/src/views/BMC/Firmware/index.js b/src/views/BMC/Firmware/index.js new file mode 100644 index 00000000..55a8c296 --- /dev/null +++ b/src/views/BMC/Firmware/index.js @@ -0,0 +1,2 @@ +import FirmwarePage from './FirmwarePage.vue'; +export default FirmwarePage; diff --git a/src/views/BMC/Settings/SettingsPage.vue b/src/views/BMC/Settings/SettingsPage.vue new file mode 100644 index 00000000..c9a0df8d --- /dev/null +++ b/src/views/BMC/Settings/SettingsPage.vue @@ -0,0 +1,308 @@ +<template> + <b-container + :style="{ display: 'flex', 'flex-direction': 'column' }" + fluid="xxl pt-0 m-0" + > + <page-title /> + <!-- BMC table --> + <div class="main-container"> + <div class="smnp-section"> + <div class="smnp-settings-container"> + <span class="bold-12px__caps section-label">{{ + $t('BMC.smnp') + }}</span> + <b-form-group class="form-group"> + <label class="regular-12px tretiatry">{{ $t('BMC.system') }}</label> + <b-form-input + v-model="system" + type="text" + class="form-control medium-16px" + > + </b-form-input> + <img class="clear-icon" src="@/assets/images/popups/x-icon.svg" /> + </b-form-group> + <b-form-group class="form-group"> + <label class="regular-12px tretiatry">{{ + $t('BMC.contacts') + }}</label> + <b-form-input + type="text" + class="form-control medium-16px" + placeholder="Введите значение" + > + </b-form-input> + </b-form-group> + <b-form-group class="form-group"> + <label class="regular-12px tretiatry">{{ + $t('BMC.community') + }}</label> + <b-form-input + v-model="community" + type="text" + class="form-control medium-16px" + > + </b-form-input> + <img class="clear-icon" src="@/assets/images/popups/x-icon.svg" /> + </b-form-group> + <b-form-group class="form-group"> + <label class="regular-12px tretiatry">{{ + $t('global.status.status') + }}</label> + <b-form-select + v-model="connectionType" + :options="connectionTypes" + class="select-connection medium-16px" + /> + </b-form-group> + <b-form-group class="form-group"> + <label class="regular-12px tretiatry">{{ $t('BMC.smnpIp') }}</label> + <b-form-input + v-model="smnpIp" + type="text" + class="form-control medium-16px" + > + </b-form-input> + <img class="clear-icon" src="@/assets/images/popups/x-icon.svg" /> + </b-form-group> + <b-form-group class="form-group"> + <label class="regular-12px tretiatry">{{ + $t('BMC.smnpPort') + }}</label> + <b-form-input + v-model="smnpPort" + type="text" + class="form-control medium-16px" + > + </b-form-input> + <img class="clear-icon" src="@/assets/images/popups/x-icon.svg" /> + </b-form-group> + <div class="accept-container"> + <b-button variant="primary" class="accept-button"> + {{ $t('global.action.acceptChanges') }} + </b-button> + </div> + </div> + </div> + <div class="smnp-section"> + <div class="smnp-settings-container"> + <span class="bold-12px__caps section-label">{{ + $t('BMC.smnpWarning') + }}</span> + <div class="table-section"> + <b-table + responsive="md" + show-empty + class="bootstrap-rounded-table" + :items="items" + :fields="fields" + > + <template #cell(value)="{ index }"> + <b-row> + <b-col> + <span v-if="items[index].value"> + {{ $t('global.status.enabled') }} + </span> + <span v-else> + {{ $t('global.status.disabled') }} + </span> + </b-col> + <b-col> + <b-form-checkbox v-model="items[index].value" switch> + </b-form-checkbox> + </b-col> + </b-row> + </template> + </b-table> + </div> + <div class="accept-container"> + <b-button variant="secondary" class="test-message-button"> + {{ $t('BMC.testMessage') }} + </b-button> + <b-button variant="primary" class="accept-button"> + {{ $t('global.action.acceptChanges') }} + </b-button> + </div> + </div> + </div> + + <div class="smnp-section"> + <div class="smnp-settings-container"> + <span class="bold-12px__caps section-label">{{ + $t('BMC.syslogSettings') + }}</span> + <b-form-group class="form-group"> + <label class="regular-12px tretiatry">{{ + $t('global.status.status') + }}</label> + <b-form-select + v-model="connectionType" + :options="connectionTypes" + class="select-connection medium-16px" + /> + </b-form-group> + <b-form-group class="form-group"> + <label class="regular-12px tretiatry">{{ + $t('BMC.syslogIP') + }}</label> + <b-form-input + v-model="syslogIp" + type="text" + class="form-control medium-16px" + > + </b-form-input> + <img class="clear-icon" src="@/assets/images/popups/x-icon.svg" /> + </b-form-group> + <b-form-group class="form-group"> + <label class="regular-12px tretiatry">{{ + $t('BMC.syslogPort') + }}</label> + <b-form-input + v-model="syslogPort" + type="text" + class="form-control medium-16px" + > + </b-form-input> + <img class="clear-icon" src="@/assets/images/popups/x-icon.svg" /> + </b-form-group> + <div class="accept-container"> + <b-button variant="primary" class="accept-button"> + {{ $t('global.action.acceptChanges') }} + </b-button> + </div> + </div> + </div> + </div> + </b-container> +</template> + +<script> +import PageTitle from '@/components/Global/PageTitle'; +// import PageSection from '@/components/Global/PageSection'; + +export default { + components: { + PageTitle, + // PageSection, + }, + data() { + return { + text: '', + system: '2КА04.02_г17', + community: 'public', + smnpIp: '0.0.0.0', + smnpPort: '161', + syslogIp: '0.0.0.0', + syslogPort: '161', + fields: [ + { + key: 'name', + label: 'Тип предупреждения', + formatter: this.dataFormatter, + thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg', + class: `bootstrap-rounded-table__column-first + bootstrap-table_smnp-table`, + tdClass: 'regular-12px bootstrap-rounded-table__td', + }, + { + key: 'value', + label: 'Значение', + formatter: this.dataFormatter, + thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg', + class: `bootstrap-rounded-table__column-last + smnp-table-col-last`, + tdClass: 'regular-12px bootstrap-rounded-table__td', + }, + ], + items: [ + { + name: 'SNMPv1', + value: true, + }, + { + name: 'SNMPv3', + value: true, + }, + { + name: 'Постоянные запросы и предупреждения SNMPv1', + value: true, + }, + ], + }; + }, +}; +</script> +<style lang="scss"> +.bootstrap-table_smnp-table { + width: 70%; +} +.smnp-table-col-last { + width: 30%; +} +</style> +<style lang="scss" scoped> +.main-container { + margin-top: 16px; +} +.smnp-section { + border-bottom: 1px solid $faint-secondary-primary-10; +} +.smnp-settings-container { + display: flex; + flex-flow: row wrap; + gap: 16px; + justify-content: flex-start; + align-items: flex-start; + margin: 16px 0 16px 28px; +} + +.section-label { + display: block; + width: 100%; +} +.form-group { + width: 341px; + height: 35px; +} +.form-control { + margin: -31px 0px 0 -15px; + height: 52px; + width: 341px; + padding: 17px 0 0 15px; +} +.clear-icon { + margin: -80px 0px 0px 300px; +} + +.select-connection { + height: 52px; + width: 341px; + padding-top: 30px; + border: none; + border-radius: 8px; + margin: -31px 0 18px -15px; + background-color: $faint-secondary-primary-5; + background-image: url('../../../assets/images/icon-chevron.svg'); +} +.accept-container { + width: 100%; + display: flex; + justify-content: flex-end; +} + +.accept-button { + width: 245px; + height: 36px; + margin-right: 33px; +} +.test-message-button { + width: 245px; + height: 36px; + margin-right: 16px; + background-color: $faint-secondary-primary-5; +} + +.table-section { + width: 100%; + margin: 0 20px 0 0; +} +</style> diff --git a/src/views/BMC/Settings/index.js b/src/views/BMC/Settings/index.js new file mode 100644 index 00000000..f74e1f4d --- /dev/null +++ b/src/views/BMC/Settings/index.js @@ -0,0 +1,2 @@ +import SettingsPage from './SettingsPage.vue'; +export default SettingsPage; diff --git a/src/views/Fans/DynamicInformation/FansDynamicPage.vue b/src/views/Fans/DynamicInformation/FansDynamicPage.vue new file mode 100644 index 00000000..c56d2f83 --- /dev/null +++ b/src/views/Fans/DynamicInformation/FansDynamicPage.vue @@ -0,0 +1,127 @@ +<template> + <b-container + :style="{ display: 'flex', 'flex-direction': 'column' }" + fluid="xxl pt-0 m-0" + > + <page-title /> + <div class="main-container"> + <date-switch + :switch-time-scale="switchTimeScale" + :time-scale="timeScale" + /> + <div class="speed-description"> + <img src="@/assets/images/fans-page/fans-icon.svg" /> + <span class="bold-16px">{{ $t('fansPage.speedDescription') }}</span> + </div> + <div class="limit-speed-container"> + <div class="speed-limt"> + <img src="@/assets/images/labels/warning.svg" /> + <span class="semi-bold-12px">{{ $t('fansPage.speedWarhihg') }}</span> + <b-form-input + v-model="fanSpeedWarninigInput" + type="number" + :min="0" + :max="fanSpeedShutdownInput" + class="form-control medium-12px" + > + </b-form-input> + </div> + <div class="speed-limt"> + <img src="@/assets/images/labels/shutdown.svg" /> + <span class="semi-bold-12px">{{ $t('fansPage.speedShutdown') }}</span> + <b-form-input + v-model="fanSpeedShutdownInput" + :min="fanSpeedWarninigInput" + :max="4000" + type="number" + class="form-control medium-12px" + > + </b-form-input> + </div> + <b-button + class="save-button" + variant="primary" + @click="updateFansSpeed" + > + {{ $t('global.action.save') }} + </b-button> + </div> + + <fans-dynamic-table + :speed-warninig="fanSpeedWarninig" + :speed-shutdown="fanSpeedShutdown" + :time-scale="timeScale" + /> + <indicators-table /> + </div> + </b-container> +</template> + +<script> +import PageTitle from '@/components/Global/PageTitle'; +import DateSwitch from '@/components/Global/SilaComponents/DateSwitch'; +import FansDynamicTable from './FansDynamicTable'; +import IndicatorsTable from './IndicatorsTable'; + +export default { + components: { PageTitle, DateSwitch, FansDynamicTable, IndicatorsTable }, + data() { + return { + timeScale: 'hour', + fanSpeedWarninigInput: 2450, + fanSpeedShutdownInput: 3150, + fanSpeedWarninig: 2450, + fanSpeedShutdown: 3150, + }; + }, + methods: { + switchTimeScale(period) { + this.timeScale = period; + }, + updateFansSpeed() { + this.fanSpeedWarninig = +this.fanSpeedWarninigInput; + this.fanSpeedShutdown = +this.fanSpeedShutdownInput; + }, + }, +}; +</script> +<style lang="scss" scoped> +.speed-description { + height: 56px; + padding-left: 36px; + display: flex; + align-items: center; + gap: 8px; + border-bottom: 1px solid $faint-secondary-primary-10; +} + +.limit-speed-container { + height: 85px; + padding: 0 0 10px 32px; + display: flex; + align-items: flex-end; + gap: 24px; +} + +.speed-limt { + height: 60px; + max-width: 312px; + display: flex; + align-items: baseline; + flex-flow: row wrap; + gap: 8px; +} + +.save-button { + width: 151px; + height: 36px; +} + +.form-control { + height: 36px; +} + +.main-container { + overflow: auto; +} +</style> diff --git a/src/views/Fans/DynamicInformation/FansDynamicTable.vue b/src/views/Fans/DynamicInformation/FansDynamicTable.vue new file mode 100644 index 00000000..b0818255 --- /dev/null +++ b/src/views/Fans/DynamicInformation/FansDynamicTable.vue @@ -0,0 +1,126 @@ +<template> + <div> + <highcharts :options="chartOptions.line" /> + </div> +</template> + +<script> +import { setTime, Series, setSpeed } from './helpers'; +import { Chart } from 'highcharts-vue'; + +export default { + components: { + highcharts: Chart, + }, + props: { + timeScale: { + type: String, + default: 'hour', + }, + speedWarninig: { + type: Number, + default: 2450, + }, + speedShutdown: { + type: Number, + default: 3150, + }, + }, + computed: { + chartOptions() { + return { + line: { + chart: { + type: 'line', + margin: [12, 50, 32, 60], + height: '320px', + }, + title: null, + xAxis: { + categories: setTime(60, this.timeScale), + title: null, + labels: { + step: 6, + }, + minorGridLineColor: '#1A3E5B1A', + }, + yAxis: { + categories: setSpeed(4000), + min: 0, + title: null, + minRange: 4000, + minTickInterval: 1000, + minorGridLineColor: '#1A3E5B1A', + plotLines: [ + { + color: '#E11717', + dashStyle: 'solid', + value: this.speedWarninig, + zIndex: '1000', + width: 2, + label: { + text: 'Пороговое значения предупреждение', + align: 'right', + style: { + fontFamily: 'Inter, sans-serif', + fontSize: '12px', + fontStyle: 'normal', + fontWeight: '400', + lineHeight: '16px', + color: '#0C1C2999', + }, + }, + }, + { + color: '#1A3E5B', + dashStyle: 'solid', + value: this.speedShutdown, + width: 2, + label: { + text: 'Пороговое значения отказ', + align: 'right', + style: { + fontFamily: 'Inter, sans-serif', + fontSize: '12px', + fontStyle: 'normal', + fontWeight: '400', + lineHeight: '16px', + color: '#0C1C2999', + }, + }, + }, + ], + }, + series: Series[this.timeScale].map((item) => ({ + ...item, + marker: { + enabled: false, + }, + })), + legend: { + enabled: false, + }, + tooltip: { + enabled: false, + crosshairs: false, + }, + plotOptions: { + series: { + showInLegend: true, + }, + }, + }, + }; + }, + }, +}; +</script> +<style lang="scss"> +.highcharts-credits { + display: none; +} + +.highcharts-plot-line-label { + transform: translate(-15px, 0) !important; +} +</style> diff --git a/src/views/Fans/DynamicInformation/IndicatorsTable.vue b/src/views/Fans/DynamicInformation/IndicatorsTable.vue new file mode 100644 index 00000000..de0823c0 --- /dev/null +++ b/src/views/Fans/DynamicInformation/IndicatorsTable.vue @@ -0,0 +1,191 @@ +<template> + <page-section class="bootstrap-table__section"> + <span class="bold-12px__caps"> + {{ $t('fansPage.valueIndicators') }} + </span> + <b-table + responsive="md" + class="bootstrap-fans-table bootstrap-fans-table__stripes" + :items="items" + :fields="fields" + > + <template #cell(name)="{ value, index }"> + <div + class="fans-colors" + :style="`background-color: ${colors[index]}`" + ></div> + <span class="regular-12px tretiatry"> + {{ value }} + </span> + </template> + <template #cell(minSpeedDate)="{ value }"> + <span class="regular-12px"> + {{ value.time }} + </span> + <span class="regular-12px tretiatry"> + {{ value.date }} + </span> + </template> + <template #cell(maxSpeedDate)="{ value }"> + <span class="regular-12px"> + {{ value.time }} + </span> + <span class="regular-12px tretiatry"> + {{ value.date }} + </span> + </template> + </b-table> + </page-section> +</template> + +<script> +import PageSection from '@/components/Global/PageSection'; +import { colors } from './helpers'; + +export default { + components: { PageSection }, + data() { + return { + colors, + fields: [ + { + key: 'name', + label: 'Имя модуля', + formatter: this.dataFormatter, + thClass: 'bootstrap-fans-table__th medium-12px', + tdClass: 'bootstrap-fans-table__td light-12px', + }, + { + key: 'currentSpeed', + label: 'Текущая', + formatter: this.dataFormatter, + thClass: 'bootstrap-fans-table__th medium-12px', + tdClass: 'bootstrap-fans-table__td light-12px', + }, + { + key: 'middleSpeed', + label: 'Средняя', + formatter: this.dataFormatter, + thClass: 'bootstrap-fans-table__th medium-12px', + tdClass: 'bootstrap-fans-table__td light-12px', + }, + { + key: 'minSpeed', + label: 'Минимальная', + formatter: this.dataFormatter, + thClass: 'bootstrap-fans-table__th medium-12px', + tdClass: 'bootstrap-fans-table__td light-12px', + }, + { + key: 'minSpeedDate', + label: 'Дата минимальной', + formatter: this.dataFormatter, + thClass: 'bootstrap-fans-table__th medium-12px', + tdClass: 'bootstrap-fans-table__td light-12px', + }, + { + key: 'maxSpeed', + label: 'Максимальная', + formatter: this.dataFormatter, + thClass: 'bootstrap-fans-table__th medium-12px', + tdClass: 'bootstrap-fans-table__td light-12px', + }, + { + key: 'maxSpeedDate', + label: 'Дата максимальной', + formatter: this.dataFormatter, + thClass: 'bootstrap-fans-table__th medium-12px', + tdClass: 'bootstrap-fans-table__td light-12px', + }, + ], + items: [ + { + name: 'Вентилятор 1', + currentSpeed: 1900, + middleSpeed: 1200, + minSpeed: 950, + minSpeedDate: { time: '15:15', date: '11.11.2021' }, + maxSpeed: 2100, + maxSpeedDate: { time: '10:26', date: '15.11.2021' }, + }, + { + name: 'Вентилятор 2', + currentSpeed: 1850, + middleSpeed: 1450, + minSpeed: 850, + minSpeedDate: { time: '15:45', date: '11.11.2021' }, + maxSpeed: 2150, + maxSpeedDate: { time: '16:59', date: '16.11.2021' }, + }, + { + name: 'Вентилятор 3', + currentSpeed: 1870, + middleSpeed: 1450, + minSpeed: 1000, + minSpeedDate: { time: '15:23', date: '11.11.2021' }, + maxSpeed: 2050, + maxSpeedDate: { time: '15:26', date: '15.11.2021' }, + }, + { + name: 'Вентилятор 4', + currentSpeed: 1790, + middleSpeed: 780, + minSpeed: 950, + minSpeedDate: { time: '16:45', date: '25.11.2021' }, + maxSpeed: 1800, + maxSpeedDate: { time: '11:26', date: '16.11.2021' }, + }, + { + name: 'Вентилятор 5', + currentSpeed: 1950, + middleSpeed: 1260, + minSpeed: 880, + minSpeedDate: { time: '15:23', date: '11.11.2021' }, + maxSpeed: 1950, + maxSpeedDate: { time: '15:26', date: '17.11.2021' }, + }, + { + name: 'Вентилятор 6', + currentSpeed: 1900, + middleSpeed: 1300, + minSpeed: 960, + minSpeedDate: { time: '16:45', date: '25.11.2021' }, + maxSpeed: 2000, + maxSpeedDate: { time: '15:26', date: '15.11.2021' }, + }, + ], + }; + }, +}; +</script> +<style lang="scss"> +.bootstrap-fans-table__th { + background-color: transparent !important; + color: $text-primary !important; + border-top: none !important; + padding: 10px 5px !important; + border-bottom: 1px solid $faint-secondary-primary-10; +} + +.bootstrap-fans-table__td { + padding: 5px !important; + border-top: none !important; +} +</style> + +<style lang="scss" scoped> +.fans-colors { + display: inline-block; + width: 8px; + height: 8px; + border-radius: 2px; +} +.row { + align-items: center; + flex-wrap: nowrap; + justify-content: flex-end; +} +.medium-12px { + color: $text-primary !important; +} +</style> diff --git a/src/views/Fans/DynamicInformation/helpers.js b/src/views/Fans/DynamicInformation/helpers.js new file mode 100644 index 00000000..1268d34a --- /dev/null +++ b/src/views/Fans/DynamicInformation/helpers.js @@ -0,0 +1,820 @@ +export const colors = [ + '#CB32F1', + '#F18638', + '#139BB9', + '#E1AB17', + '#175AE1', + '#13B937', +]; + +export const Series = { + hour: [ + { + name: 'Sean', + data: [ + 526, + 526, + 526, + 526, + 526, + 1100, + 526, + 526, + 526, + 526, + 526, + 526, + 526, + 526, + 526, + 526, + 526, + 526, + 526, + 526, + 526, + 526, + 2100, + 526, + 526, + 526, + 526, + 526, + 526, + 526, + 526, + 526, + 526, + 526, + 1526, + 526, + 526, + 526, + 526, + 526, + 526, + 526, + 526, + 526, + 526, + 526, + 526, + 526, + 526, + 526, + 526, + 526, + 526, + 1526, + 526, + 526, + 526, + 526, + 526, + 526, + ], + color: '#CB32F1', + }, + { + name: 'Ivan', + data: [ + 315, + 315, + 315, + 315, + 315, + 315, + 1315, + 315, + 315, + 315, + 315, + 315, + 315, + 2200, + 315, + 315, + 315, + 315, + 315, + 315, + 1100, + 315, + 315, + 315, + 315, + 315, + 315, + 315, + 315, + 315, + 315, + 315, + 315, + 315, + 315, + 1600, + 315, + 315, + 315, + 315, + 315, + 315, + 315, + 315, + 315, + 315, + 315, + 315, + 315, + 315, + 315, + 1400, + 315, + 315, + 315, + 315, + 315, + 315, + 315, + 315, + ], + color: '#175AE1', + }, + { + name: 'Brendan', + data: [ + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 1359, + 359, + 359, + 359, + 359, + 2000, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 2100, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 1400, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + ], + color: '#B98D13', + }, + { + name: 'Matteo', + data: [ + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 1350, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 1590, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 1490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + ], + color: '#13B937', + }, + { + name: 'Joan', + data: [ + 467, + 467, + 467, + 467, + 467, + 467, + 467, + 467, + 467, + 467, + 1487, + 467, + 467, + 467, + 467, + 467, + 467, + 467, + 467, + 794, + 467, + 467, + 467, + 467, + 467, + 1924, + 467, + 467, + 467, + 467, + 467, + 467, + 467, + 1924, + 467, + 467, + 794, + 467, + 467, + 467, + 467, + 467, + 1924, + 467, + 467, + 467, + 467, + 467, + 467, + 467, + 467, + 467, + 794, + 467, + 467, + 467, + 467, + 467, + 467, + 467, + ], + color: '#F18638', + }, + { + name: 'Avinash', + data: [ + 410, + 410, + 410, + 410, + 1300, + 410, + 410, + 410, + 410, + 410, + 410, + 410, + 410, + 410, + 410, + 2110, + 410, + 410, + 410, + 410, + 410, + 410, + 410, + 410, + 410, + 410, + 410, + 410, + 410, + 410, + 410, + 1410, + 410, + 410, + 410, + 410, + 410, + 410, + 410, + 410, + 410, + 410, + 410, + 410, + 410, + 410, + 410, + 410, + 410, + 410, + 410, + 410, + 410, + 1410, + 410, + 410, + 410, + 410, + 410, + 410, + ], + color: '#139BB9', + }, + ], + day: [ + { + name: 'Sean', + data: [ + 526, + 526, + 526, + 526, + 626, + 626, + 626, + 526, + 526, + 526, + 526, + 526, + 526, + 526, + 526, + 526, + 526, + 526, + 526, + 526, + 526, + 526, + 526, + 526, + 526, + 526, + 526, + 526, + 526, + 526, + 526, + 526, + 526, + 526, + 526, + 526, + 526, + 526, + 726, + 1026, + 726, + 526, + 526, + 526, + 526, + 526, + 526, + 526, + 526, + 526, + 526, + 1326, + 1526, + 1326, + 526, + 526, + 526, + 526, + 526, + 526, + ], + color: '#CB32F1', + }, + { + name: 'Ivan', + data: [ + 315, + 315, + 315, + 315, + 315, + 315, + 815, + 315, + 315, + 315, + 315, + 315, + 315, + 1100, + 315, + 315, + 315, + 315, + 315, + 315, + 800, + 315, + 315, + 315, + 315, + 315, + 315, + 315, + 315, + 315, + 315, + 315, + 315, + 315, + 315, + 900, + 315, + 315, + 315, + 315, + 315, + 315, + 315, + 315, + 315, + 315, + 315, + 315, + 315, + 315, + 315, + 900, + 315, + 315, + 315, + 315, + 315, + 315, + 315, + 315, + ], + color: '#175AE1', + }, + { + name: 'Brendan', + data: [ + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 1500, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 1500, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 500, + 1200, + 500, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + ], + color: '#B98D13', + }, + { + name: 'Matteo', + data: [ + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 950, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 890, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 990, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + ], + color: '#13B937', + }, + { + name: 'Joan', + data: [ + 467, + 467, + 467, + 467, + 467, + 467, + 467, + 467, + 467, + 467, + 1087, + 467, + 467, + 467, + 467, + 467, + 467, + 467, + 467, + 794, + 467, + 467, + 467, + 467, + 467, + 1424, + 467, + 467, + 467, + 467, + 467, + 467, + 467, + 1424, + 467, + 467, + 794, + 467, + 467, + 467, + 467, + 467, + 1224, + 467, + 467, + 467, + 467, + 467, + 467, + 467, + 467, + 467, + 794, + 467, + 467, + 467, + 467, + 467, + 467, + 467, + ], + color: '#F18638', + }, + { + name: 'Avinash', + data: [ + 410, + 1410, + 410, + 410, + 1300, + 410, + 410, + 410, + 410, + 1410, + 410, + 410, + 410, + 410, + 410, + 2110, + 410, + 410, + 1410, + 410, + 410, + 410, + 410, + 1410, + 410, + 410, + 410, + 410, + 410, + 410, + 410, + 1410, + 410, + 410, + 410, + 410, + 1410, + 410, + 410, + 410, + 410, + 410, + 410, + 1410, + 410, + 410, + 410, + 410, + 1410, + 410, + 410, + 410, + 410, + 1410, + 410, + 410, + 410, + 1410, + 410, + 410, + ], + color: '#139BB9', + }, + ], +}; + +export const setTime = (count) => { + const arr = [...new Array(count)].map(() => ''); + for (let i = 0; i < arr.length; i++) { + arr[i] = `15:${String(i).padStart(2, '0')}`; + } + return arr; +}; + +export const setSpeed = (count) => { + const arr = [...new Array(count)].map((i, k) => `${k}`); + return arr; +}; diff --git a/src/views/Fans/DynamicInformation/index.js b/src/views/Fans/DynamicInformation/index.js new file mode 100644 index 00000000..a3dadd5a --- /dev/null +++ b/src/views/Fans/DynamicInformation/index.js @@ -0,0 +1,2 @@ +import FansDynamicPage from './FansDynamicPage.vue'; +export default FansDynamicPage; diff --git a/src/views/Fans/StaticInformation/FansStaticPage.vue b/src/views/Fans/StaticInformation/FansStaticPage.vue new file mode 100644 index 00000000..45bd1914 --- /dev/null +++ b/src/views/Fans/StaticInformation/FansStaticPage.vue @@ -0,0 +1,147 @@ +<template> + <b-container + :style="{ display: 'flex', 'flex-direction': 'column' }" + fluid="xxl pt-0 m-0" + > + <page-title /> + <span class="bold-16px">{{ $t('tablesDescription.installedFans') }}</span> + <page-section class="bootstrap-table__section"> + <b-table + responsive="md" + show-empty + class="bootstrap-rounded-table" + :items="items" + :fields="fields" + :empty-text="$t('global.table.emptyMessage')" + > + <template #cell(status)="{ value }"> + <div v-if="value" class="fans-table-col-first__cell"> + <img + class="status__img" + src="@/assets/images/fans-page/working.svg" + /> + <span> + {{ $t('fansPage.inWork') }} + </span> + </div> + <div v-else class="fans-table-col-first__cell"> + <img + class="status__img" + src="@/assets/images/fans-page/notWorking.svg" + /> + <span> + {{ $t('fansPage.notWorking') }} + </span> + </div> + </template> + </b-table> + </page-section> + </b-container> +</template> + +<script> +import PageTitle from '@/components/Global/PageTitle'; +import PageSection from '@/components/Global/PageSection'; + +export default { + components: { PageTitle, PageSection }, + data() { + return { + isBusy: true, + isAddersСolon: false, + fields: [ + { + key: 'status', + label: 'Статус', + formatter: this.dataFormatter, + thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg', + class: `bootstrap-rounded-table__column-first + fans-table-col-first`, + tdClass: 'regular-12px bootstrap-rounded-table__td', + }, + { + key: 'name', + label: 'Имя', + formatter: this.dataFormatter, + thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg', + class: `bootstrap-rounded-table__column-center + fans-table-col-second`, + tdClass: 'regular-12px bootstrap-rounded-table__td', + }, + { + key: 'type', + label: 'Тип', + formatter: this.dataFormatter, + thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg', + class: `bootstrap-rounded-table__column-center + fans-table-col-third`, + tdClass: 'regular-12px bootstrap-rounded-table__td', + }, + { + key: 'value', + label: 'Номинальная скорость, об/мин', + formatter: this.dataFormatter, + thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg', + class: `bootstrap-rounded-table__column-last + fans-table-col-third`, + tdClass: 'regular-12px bootstrap-rounded-table__td', + }, + ], + items: [ + { + status: true, + name: 'Венититор 1', + type: 'Системная плата', + value: '2100', + }, + { + status: true, + name: 'Венититор 2', + type: 'Системная плата', + value: '2300', + }, + { + status: false, + name: 'Венититор 3', + type: 'Системная плата', + value: '2400', + }, + ], + }; + }, +}; +</script> +<style lang="scss"> +.fans-table-col-first { + width: 25%; +} + +.fans-table-col-second { + width: 25%; +} + +.fans-table-col-third { + width: 25%; +} +</style> + +<style lang="scss" scoped> +.row { + margin: 0px; +} + +.fans-table-col-first__cell { + display: flex; + flex-flow: row nowrap; + align-items: center; + justify-content: flex-start; +} + +.status__img { + margin-right: 7px; +} + +.bold-16px { + margin: 24px 0 0 2rem; +} +</style> diff --git a/src/views/Fans/StaticInformation/index.js b/src/views/Fans/StaticInformation/index.js new file mode 100644 index 00000000..9a5d913d --- /dev/null +++ b/src/views/Fans/StaticInformation/index.js @@ -0,0 +1,2 @@ +import FansStaticPage from './FansStaticPage.vue'; +export default FansStaticPage; diff --git a/src/views/HardwareStatus/Inventory/InventoryTableProcessors.vue b/src/views/HardwareStatus/Inventory/InventoryTableProcessors.vue index 7d5dd700..49281e14 100644 --- a/src/views/HardwareStatus/Inventory/InventoryTableProcessors.vue +++ b/src/views/HardwareStatus/Inventory/InventoryTableProcessors.vue @@ -207,6 +207,20 @@ export default { sortable: false, }, ], + processors: [ + { + id: 'Процессор №1', + health: 'v3.1.5', + locationNumber: '2.4', + identifyLed: '4', + }, + { + id: 'Процессор №1', + health: 'v3.1.5', + locationNumber: '2.4', + identifyLed: '4', + }, + ], searchFilter: searchFilter, searchTotalFilteredRows: 0, expandRowLabel: expandRowLabel, @@ -218,9 +232,9 @@ export default { ? this.searchTotalFilteredRows : this.processors.length; }, - processors() { - return this.$store.getters['processors/processors']; - }, + // processors() { + // return this.$store.getters['processors/processors']; + // }, }, created() { this.$store.dispatch('processors/getProcessorsInfo').finally(() => { diff --git a/src/views/Login/Login.vue b/src/views/Login/Login.vue index 520daf60..244fdcd7 100644 --- a/src/views/Login/Login.vue +++ b/src/views/Login/Login.vue @@ -26,7 +26,7 @@ ></b-form-group> <b-form-group> - <label class="text-login" for="username">{{ + <label class="regular-12px tretiatry" for="username">{{ $t('pageLogin.username') }}</label> <b-form-input @@ -50,7 +50,7 @@ <b-form-group> <input-password-toggle> - <label class="text-login" for="password">{{ + <label class="regular-12px tretiatry" for="password">{{ $t('pageLogin.password') }}</label> <b-form-input @@ -170,7 +170,7 @@ export default { height: 56px; margin: -30px 0 0 0; padding-top: 30px; - font-family: Inter; + font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 500; line-height: 20px; diff --git a/src/views/MemoryModules/DynamicInfo/MemoryDynamicPage.vue b/src/views/MemoryModules/DynamicInfo/MemoryDynamicPage.vue new file mode 100644 index 00000000..640513f5 --- /dev/null +++ b/src/views/MemoryModules/DynamicInfo/MemoryDynamicPage.vue @@ -0,0 +1,206 @@ +<template> + <b-container + :style="{ display: 'flex', 'flex-direction': 'column' }" + fluid="xxl pt-0 m-0" + > + <page-title /> + <div class="notification__container"> + <span class="semi-bold-12px">{{ + $t('global.ariaLabel.notificationTime') + }}</span> + <div class="form-control notification"> + <b-form-input + v-model="notificationInput" + type="number" + class="notification__input" + > + </b-form-input> + <button class="notification_button"> + <img class="notification__icon" src="@/assets/images/refresh.svg" /> + </button> + </div> + </div> + <div class="main-container"> + <date-switch + :switch-time-scale="switchTimeScale" + :time-scale="timeScale" + /> + <div class="limit-container"> + <div class="trmperature-limt"> + <img src="@/assets/images/labels/non-normal.svg" /> + <span class="semi-bold-12px">{{ + $t('tablesDescription.nonNormalMode') + }}</span> + <b-form-input + v-model="temperatureNonNormalInput" + type="number" + :min="0" + :max="temperatureCritical" + class="form-control medium-12px" + > + </b-form-input> + </div> + <div class="trmperature-limt"> + <img src="@/assets/images/labels/critical.svg" /> + <span class="semi-bold-12px">{{ + $t('tablesDescription.criticalMode') + }}</span> + <b-form-input + v-model="temperatureCritical" + type="number" + :min="temperatureNonNormalInput" + :max="temperatureWarningInput" + class="form-control medium-12px" + > + </b-form-input> + </div> + <div class="trmperature-limt"> + <img src="@/assets/images/labels/warning.svg" /> + <span class="semi-bold-12px">{{ + $t('tablesDescription.temperatureWarning') + }}</span> + <b-form-input + v-model="temperatureWarningInput" + type="number" + :min="temperatureCritical" + :max="100" + class="form-control medium-12px" + > + </b-form-input> + </div> + <b-button + class="save-button" + variant="primary" + @click="updateTemperatureLimits" + > + {{ $t('global.action.save') }} + </b-button> + </div> + <!-- Temperature Table --> + <temperature-table + :time-scale="timeScale" + :warning="temperatureWarning" + :non-normal="temperatureNonNormal" + :critical-start="temperatureCriticalStart" + /> + <accessory-table :records="accessoryData.temperatureTable" /> + </div> + </b-container> +</template> +<script> +import PageTitle from '@/components/Global/PageTitle'; +import DateSwitch from '@/components/Global/SilaComponents/DateSwitch'; +import TemperatureTable from './TemperatureTable'; +import AccessoryTable from '@/components/Global/SilaComponents/Tables/AccessoryTableWithLabel'; +import iconChevronUp from '@carbon/icons-vue/es/chevron--up/16'; + +import { AccessoryData } from './helpers'; + +export default { + components: { + PageTitle, + DateSwitch, + TemperatureTable, + AccessoryTable, + }, + data() { + return { + timeScale: 'hour', + temperatureWarning: 72, + temperatureWarningInput: 72, + temperatureNonNormal: 44, + temperatureNonNormalInput: 44, + temperatureCriticalStart: 55, + temperatureCritical: 55, + notificationInput: 42, + accessoryData: AccessoryData, + iconChevronUp: iconChevronUp, + }; + }, + methods: { + switchTimeScale(period) { + this.timeScale = period; + }, + updateTemperatureLimits() { + this.temperatureWarning = +this.temperatureWarningInput; + this.temperatureNonNormal = +this.temperatureNonNormalInput; + this.temperatureCriticalStart = +this.temperatureCritical; + }, + }, +}; +</script> +<style lang="scss" scoped> +.notification__container { + position: absolute; + top: calc(#{$header-height}); + right: 0px; + display: flex; + flex-flow: row nowrap; + justify-content: flex-start; + align-items: center; +} + +.notification { + display: flex; + flex-flow: row nowrap; + justify-content: flex-start; + align-items: center; + border: none; + box-shadow: none; + border-radius: 8px; + margin: 12px 32px 12px 8px; + width: 236px; + height: 40px; + z-index: 1001; +} + +.notification__icon { + width: 20px; + height: 20px; +} + +.notification__input { + border: none; + background: none; + box-shadow: none; +} + +.notification_button { + border: none; + background: none; +} + +.semi-bold-12px { + z-index: 1001; +} + +// temperature limit comtainer +.limit-container { + height: 85px; + width: 100%; + padding: 0 32px 10px 32px; + display: flex; + flex-flow: row nowrap; + justify-content: flex-start; + align-items: flex-end; + gap: 24px; +} + +.trmperature-limt { + height: 60px; + width: 100%; + max-width: 270px; + display: flex; + align-items: baseline; + flex-flow: row wrap; + gap: 8px; +} + +.form-control { + height: 36px; +} +.save-button { + width: 151px; + height: 36px; +} +</style> diff --git a/src/views/MemoryModules/DynamicInfo/TemperatureTable.vue b/src/views/MemoryModules/DynamicInfo/TemperatureTable.vue new file mode 100644 index 00000000..f9c149c3 --- /dev/null +++ b/src/views/MemoryModules/DynamicInfo/TemperatureTable.vue @@ -0,0 +1,126 @@ +<template> + <div> + <highcharts :options="chartOptions.line" /> + </div> +</template> + +<script> +import { setTime, Series, setCategories } from './helpers'; +import { Chart } from 'highcharts-vue'; + +export default { + components: { + highcharts: Chart, + }, + props: { + timeScale: { + type: String, + default: 'hour', + }, + warning: { + type: Number, + default: 70, + }, + nonNormal: { + type: Number, + default: 70, + }, + criticalStart: { + type: Number, + default: 70, + }, + }, + computed: { + chartOptions() { + return { + line: { + chart: { + type: 'line', + margin: [12, 50, 32, 60], + height: '320px', + }, + title: null, + xAxis: { + categories: setTime(60, 'hour'), + title: null, + labels: { + step: 6, + }, + minorGridLineColor: '#1A3E5B1A', + }, + yAxis: { + categories: setCategories(101, 'С°'), + min: 0, + max: 100, + title: null, + minTickInterval: 25, + minorGridLineColor: '#1A3E5B1A', + plotLines: [ + { + color: '#E11717', + dashStyle: 'solid', + value: this.warning, + zIndex: '1000', + width: 2, + label: { + text: 'Пороговое значение предупреждения, С°', + align: 'right', + style: { + fontFamily: 'Inter, sans-serif', + fontSize: '12px', + fontStyle: 'normal', + fontWeight: '400', + lineHeight: '16px', + color: '#0C1C2999', + }, + }, + }, + ], + plotBands: [ + { + color: '#F0AC0C1A', + dashStyle: 'solid', + from: this.nonNormal, + to: this.criticalStart, + }, + { + color: '#FF41411A', + dashStyle: 'solid', + from: this.criticalStart, + to: this.warning, + }, + ], + }, + series: Series['temperature'].map((item) => ({ + ...item, + marker: { + enabled: false, + }, + })), + legend: { + enabled: false, + }, + tooltip: { + enabled: false, + crosshairs: false, + }, + plotOptions: { + series: { + showInLegend: true, + }, + }, + }, + }; + }, + }, +}; +</script> +<style lang="scss"> +.highcharts-credits { + display: none; +} + +.highcharts-plot-line-label { + transform: translate(-15px, 0) !important; +} +</style> diff --git a/src/views/MemoryModules/DynamicInfo/helpers.js b/src/views/MemoryModules/DynamicInfo/helpers.js new file mode 100644 index 00000000..8e54e01f --- /dev/null +++ b/src/views/MemoryModules/DynamicInfo/helpers.js @@ -0,0 +1,527 @@ +export const colors = [ + '#CB32F1', + '#F18638', + '#139BB9', + '#E1AB17', + '#175AE1', + '#13B937', +]; + +export const Series = { + temperature: [ + { + name: 'Sean', + data: [ + 15, + 15, + 45, + 15, + 65, + 15, + 75, + 15, + 15, + 15, + 55, + 15, + 25, + 15, + 45, + 15, + 55, + 15, + 75, + 15, + 35, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 65, + 15, + 45, + 15, + 25, + 15, + 45, + 15, + 65, + 15, + 35, + 35, + 35, + 15, + 55, + 15, + 15, + 35, + 15, + 25, + 15, + 35, + 15, + ], + color: '#CB32F1', + }, + { + name: 'Ivan', + data: [ + 62, + 12, + 12, + 12, + 12, + 12, + 12, + 12, + 12, + 12, + 12, + 12, + 22, + 12, + 42, + 12, + 52, + 12, + 72, + 12, + 52, + 12, + 62, + 12, + 72, + 12, + 82, + 12, + 12, + 42, + 12, + 12, + 52, + 12, + 42, + 12, + 12, + 62, + 12, + 42, + 12, + 22, + 12, + 42, + 12, + 62, + 12, + 12, + 32, + 12, + 62, + 12, + 52, + 12, + 32, + 12, + 22, + 12, + 32, + 12, + ], + color: '#175AE1', + }, + { + name: 'Brendan', + data: [ + 13, + 13, + 33, + 13, + 23, + 13, + 33, + 13, + 63, + 13, + 63, + 13, + 13, + 13, + 43, + 13, + 13, + 13, + 53, + 13, + 23, + 13, + 43, + 13, + 53, + 13, + 63, + 13, + 53, + 13, + 13, + 13, + 13, + 13, + 13, + 13, + 13, + 13, + 13, + 13, + 53, + 13, + 43, + 13, + 13, + 63, + 13, + 43, + 13, + 23, + 13, + 43, + 13, + 63, + 13, + 13, + 13, + 53, + 13, + 53, + ], + color: '#B98D13', + }, + { + name: 'Matteo', + data: [ + 24, + 14, + 44, + 14, + 64, + 14, + 64, + 14, + 34, + 14, + 54, + 14, + 14, + 34, + 14, + 24, + 14, + 34, + 14, + 64, + 14, + 64, + 14, + 14, + 14, + 44, + 14, + 14, + 14, + 54, + 14, + 14, + 14, + 44, + 14, + 54, + 14, + 14, + 14, + 54, + 14, + 64, + 14, + 14, + 14, + 84, + 14, + 94, + 14, + 54, + 4, + 54, + 14, + 44, + 14, + 44, + 64, + 14, + 44, + 14, + ], + color: '#13B937', + }, + { + name: 'Joan', + data: [ + 16, + 46, + 16, + 26, + 16, + 46, + 16, + 66, + 16, + 16, + 16, + 16, + 16, + 56, + 16, + 16, + 36, + 16, + 26, + 16, + 36, + 16, + 66, + 16, + 76, + 16, + 16, + 16, + 46, + 16, + 16, + 16, + 56, + 16, + 26, + 16, + 46, + 16, + 56, + 16, + 76, + 16, + 56, + 16, + 66, + 16, + 76, + 16, + 16, + 16, + 96, + 16, + 16, + 16, + 56, + 16, + 46, + 16, + 46, + 16, + ], + color: '#F18638', + }, + { + name: 'Avinash', + data: [ + 49, + 19, + 19, + 69, + 19, + 49, + 19, + 29, + 19, + 49, + 19, + 69, + 19, + 39, + 39, + 39, + 19, + 59, + 19, + 19, + 39, + 19, + 29, + 19, + 39, + 19, + 69, + 19, + 69, + 19, + 19, + 19, + 49, + 19, + 19, + 19, + 59, + 19, + 29, + 19, + 49, + 19, + 59, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + ], + color: '#139BB9', + }, + ], +}; + +export const setTime = (count) => { + const arr = [...new Array(count)].map(() => ''); + for (let i = 0; i < arr.length; i++) { + arr[i] = `15:${String(i).padStart(2, '0')}`; + } + return arr; +}; + +export const setCategories = (count, desc) => { + const arr = [...new Array(count)].map((i, k) => `${k} ${desc}`); + return arr; +}; + +export const AccessoryData = { + temperatureTable: { + fields: [ + { + key: 'name', + label: 'Имя модуля', + thClass: 'bootstrap-fans-table__th semi-bold-12px', + tdClass: 'bootstrap-fans-table__td light-12px', + }, + { + key: 'currentTemperature', + label: 'Текущее, С°', + thClass: 'bootstrap-fans-table__th semi-bold-12px', + tdClass: 'bootstrap-fans-table__td light-12px', + }, + { + key: 'middleTemperature', + label: 'Среднее, С°', + thClass: 'bootstrap-fans-table__th semi-bold-12px', + tdClass: 'bootstrap-fans-table__td light-12px', + }, + { + key: 'minTemperature', + label: 'Минимальное, С°', + thClass: 'bootstrap-fans-table__th semi-bold-12px', + tdClass: 'bootstrap-fans-table__td light-12px', + }, + { + key: 'minDate', + label: 'Дата минимального', + thClass: 'bootstrap-fans-table__th semi-bold-12px', + tdClass: 'bootstrap-fans-table__td light-12px', + }, + { + key: 'maxTemperature', + label: 'Максимальное, С°', + thClass: 'bootstrap-fans-table__th semi-bold-12px', + tdClass: 'bootstrap-fans-table__td light-12px', + }, + { + key: 'maxDate', + label: 'Дата максимального', + thClass: 'bootstrap-fans-table__th semi-bold-12px', + tdClass: 'bootstrap-fans-table__td light-12px', + }, + ], + items: [ + { + name: 'Модуль памяти 1', + currentTemperature: 19, + middleTemperature: 40, + minTemperature: 31, + minDate: { time: '15:15', date: '11.11.2021' }, + maxTemperature: 88, + maxDate: { time: '10:26', date: '15.11.2021' }, + }, + { + name: 'Модуль памяти 2', + currentTemperature: 29, + middleTemperature: 40, + minTemperature: 20, + minDate: { time: '15:45', date: '11.11.2021' }, + maxTemperature: 76, + maxDate: { time: '16:59', date: '16.11.2021' }, + }, + { + name: 'Модуль памяти 3', + currentTemperature: 48, + middleTemperature: 46, + minTemperature: 31, + minDate: { time: '15:23', date: '11.11.2021' }, + maxTemperature: 69, + maxDate: { time: '15:26', date: '15.11.2021' }, + }, + { + name: 'Модуль памяти 4', + currentTemperature: 48, + middleTemperature: 45, + minTemperature: 5, + minDate: { time: '16:45', date: '25.11.2021' }, + maxTemperature: 75, + maxDate: { time: '11:26', date: '16.11.2021' }, + }, + { + name: 'Модуль памяти 5', + currentTemperature: 39, + middleTemperature: 44, + minTemperature: 30, + minDate: { time: '15:23', date: '11.11.2021' }, + maxTemperature: 80, + maxDate: { time: '15:26', date: '17.11.2021' }, + }, + { + name: 'Модуль памяти 6', + currentTemperature: 39, + middleTemperature: 44, + minTemperature: 5, + minDate: { time: '16:45', date: '25.11.2021' }, + maxTemperature: 80, + maxDate: { time: '15:26', date: '15.11.2021' }, + }, + ], + }, +}; diff --git a/src/views/MemoryModules/DynamicInfo/index.js b/src/views/MemoryModules/DynamicInfo/index.js new file mode 100644 index 00000000..b840772c --- /dev/null +++ b/src/views/MemoryModules/DynamicInfo/index.js @@ -0,0 +1,2 @@ +import MemoryDynamicPage from './MemoryDynamicPage.vue'; +export default MemoryDynamicPage; diff --git a/src/views/MemoryModules/Specification/MemoryStaticPage.vue b/src/views/MemoryModules/Specification/MemoryStaticPage.vue new file mode 100644 index 00000000..09ef7f23 --- /dev/null +++ b/src/views/MemoryModules/Specification/MemoryStaticPage.vue @@ -0,0 +1,248 @@ +<template> + <b-container + :style="{ display: 'flex', 'flex-direction': 'column' }" + fluid="xxl pt-0 m-0" + > + <page-title /> + <div class="main-container"> + <page-section class="bootstrap-table__section info_section"> + <span class="bold-16px">{{ $t('global.table.info') }}</span> + <b-table + responsive="md" + show-empty + class="bootstrap-rounded-table" + :items="items" + :fields="fields" + :empty-text="$t('global.table.emptyMessage')" + > + </b-table> + <span class="bold-16px">{{ $t('global.table.memorySlots') }}</span> + </page-section> + <memory-switch + :slots="memorySlots" + :switch-memory="switchMemorySlot" + :current-memory="currentMemorySlot" + /> + <page-section class="bootstrap-table__section"> + <b-table + responsive="md" + show-empty + class="bootstrap-rounded-table" + :items="items_slots" + :fields="fields" + :empty-text="$t('global.table.emptyMessage')" + > + <template #cell(value)="{ index, value }"> + <b-row v-if="index === 0"> + <b-col cols="11"> + <span> + {{ 'Работоспособность' }} + </span> + </b-col> + <b-col cols="1"> + <img + src="@/assets/images/fans-page/working.svg" + class="icon-chevron" + /> + </b-col> + </b-row> + <b-row v-else> + <b-col> + <span>{{ value }}</span> + </b-col> + </b-row> + </template> + </b-table> + </page-section> + <page-section class="bootstrap-table__section"> + <span class="bold-16px">{{ $t('global.table.memoryModules') }}</span> + <b-table + responsive="md" + show-empty + class="bootstrap-rounded-table" + :items="items_modules" + :fields="fields" + :empty-text="$t('global.table.emptyMessage')" + > + <template #cell(value)="{ index, value }"> + <b-row v-if="index === 0"> + <b-col cols="11"> + <span> + {{ 'Работоспособность' }} + </span> + </b-col> + <b-col cols="1"> + <img + src="@/assets/images/fans-page/working.svg" + class="icon-chevron" + /> + </b-col> + </b-row> + <b-row v-else> + <b-col> + <span>{{ value }}</span> + </b-col> + </b-row> + </template> + </b-table> + </page-section> + </div> + </b-container> +</template> + +<script> +import PageTitle from '@/components/Global/PageTitle'; +import PageSection from '@/components/Global/PageSection'; +import MemorySwitch from './MemorySwitch'; + +export default { + components: { PageTitle, PageSection, MemorySwitch }, + data() { + return { + currentMemorySlot: 1, + memorySlots: [ + { id: 1, name: 'CPU_1-DIMM_A1' }, + { id: 2, name: 'CPU_1-DIMM_A2' }, + { id: 3, name: 'CPU_1-DIMM_A3' }, + { id: 4, name: 'CPU_1-DIMM_B1' }, + { id: 5, name: 'CPU_1-DIMM_B2' }, + { id: 6, name: 'CPU_1-DIMM_B3' }, + { id: 7, name: 'CPU_1-DIMM_C1' }, + { id: 8, name: 'CPU_1-DIMM_C2' }, + { id: 9, name: 'CPU_1-DIMM_C3' }, + { id: 10, name: 'CPU_1-DIMM_D1' }, + { id: 11, name: 'CPU_1-DIMM_D2' }, + { id: 12, name: 'CPU_1-DIMM_D3' }, + { id: 13, name: 'CPU_1-DIMM_E1' }, + { id: 14, name: 'CPU_1-DIMM_E2' }, + { id: 15, name: 'CPU_1-DIMM_E3' }, + ], + fields: [ + { + key: 'parametr', + label: 'Статус', + formatter: this.dataFormatter, + thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg', + class: `bootstrap-rounded-table__column-first + memory-table-col-first`, + tdClass: 'regular-12px bootstrap-rounded-table__td', + }, + { + key: 'value', + label: 'Значение', + formatter: this.dataFormatter, + thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg', + class: 'bootstrap-rounded-table__column-last', + tdClass: 'regular-12px bootstrap-rounded-table__td', + }, + ], + items: [ + { + parametr: 'Установленный объем памяти', + value: '8096 мб', + }, + { + parametr: 'Максимальный объем', + value: '4048 мб', + }, + { + parametr: 'Общее количество слотов', + value: '10', + }, + { + parametr: 'Используемое количество слотов', + value: '10', + }, + ], + items_slots: [ + { + parametr: 'Статус', + value: true, + }, + { + parametr: 'Имя слота', + value: 'Cлот 2', + }, + { + parametr: 'Технология', + value: 'Название технологии', + }, + { + parametr: 'Тип памяти', + value: 'Оперативная', + }, + { + parametr: 'Объем', + value: '2024', + }, + { + parametr: 'Состояние', + value: 'Отлично', + }, + { + parametr: 'Класс', + value: '1', + }, + { + parametr: 'Скорость', + value: '2000 МТ/сек', + }, + ], + items_modules: [ + { + parametr: 'Статус', + value: true, + }, + { + parametr: 'Имя коннектора', + value: 'DIMM A2', + }, + { + parametr: 'Тип памяти', + value: 'DDR-4', + }, + { + parametr: 'Объем', + value: '32 GB', + }, + { + parametr: 'Состояние', + value: 'Presence Detected', + }, + { + parametr: 'Ранг', + value: 'Dual Rank', + }, + { + parametr: 'Скорость', + value: '2400 MHz', + }, + ], + }; + }, + methods: { + switchMemorySlot(period) { + this.currentMemorySlot = period; + }, + }, +}; +</script> +<style lang="scss"> +.memory-table-col-first { + width: 50%; +} +</style> + +<style lang="scss" scoped> +.bootstrap-table__section { + margin-bottom: 24px; +} +.info_section { + margin-bottom: 0px; +} + +.bold-16px { + display: block; + margin: 25px 0 16px 0; +} +</style> diff --git a/src/views/MemoryModules/Specification/MemorySwitch.vue b/src/views/MemoryModules/Specification/MemorySwitch.vue new file mode 100644 index 00000000..27101daa --- /dev/null +++ b/src/views/MemoryModules/Specification/MemorySwitch.vue @@ -0,0 +1,112 @@ +<template> + <div + ref="content" + class="memory-switch" + @wheel.prevent="wheelItBetter($event)" + > + <span + v-for="item in slots" + :key="item.id" + class="medium-12px scale-item" + :class="{ 'switch-active': currentMemory === item.id }" + @click="switchMemory(item.id)" + >{{ $t(item.name) }}</span + > + <div + class="slider" + :style="`width: 98px; left: ${ + ((currentMemory ? currentMemory : 1) - 1) * 120 + 32 + }px`" + /> + </div> +</template> + +<script> +export default { + props: { + slots: { + type: Array, + default: null, + }, + currentMemory: { + type: Number, + default: 1, + }, + switchMemory: { + type: Function, + required: true, + }, + }, + data() { + return { + upHere: false, + container: this.$refs.content, + }; + }, + methods: { + wheelItBetter(event) { + if (event.deltaY < 0) { + this.$refs.content.scrollLeft -= 25; + } else { + this.$refs.content.scrollLeft += 25; + } + }, + }, +}; +</script> +<style lang="scss" scoped> +.memory-switch { + position: relative; + width: calc(93vw - 320px); + height: 50px; + padding: 0 16px 0 32px; + display: grid; + grid-auto-flow: column; + grid-auto-columns: 120px; + grid-template-rows: 32px; + align-items: end; + border-bottom: 1px solid $faint-secondary-primary-10; + overflow-x: auto; + white-space: nowrap; + &::-webkit-scrollbar { + height: 2px; + } + &::-webkit-scrollbar-thumb { + background: rgba(26, 62, 91, 0.2); + border-radius: 16px; + background-clip: content-box; + height: 10px; + } +} + +.switch-active { + color: $red-brand-primary; + transition: ease-in 0.15s; +} + +.slider { + position: absolute; + height: 0px; + border-bottom: 4px solid $red-brand-primary; + transition: ease-in 0.2s; + bottom: 0px; +} + +.scale-item { + display: inline-block; + width: 120px; + margin-right: 6px; + cursor: pointer; +} + +.date-picker { + display: flex; + align-items: center; + gap: 9px; +} + +.date-clear { + margin-left: auto; + cursor: pointer; +} +</style> diff --git a/src/views/MemoryModules/Specification/index.js b/src/views/MemoryModules/Specification/index.js new file mode 100644 index 00000000..4916f58a --- /dev/null +++ b/src/views/MemoryModules/Specification/index.js @@ -0,0 +1,2 @@ +import MemoryStaticPage from './MemoryStaticPage.vue'; +export default MemoryStaticPage; diff --git a/src/views/Motherboard/DynamicInfo/MotherboardDynamicPage.vue b/src/views/Motherboard/DynamicInfo/MotherboardDynamicPage.vue new file mode 100644 index 00000000..95267ece --- /dev/null +++ b/src/views/Motherboard/DynamicInfo/MotherboardDynamicPage.vue @@ -0,0 +1,140 @@ +<template> + <b-container + :style="{ display: 'flex', 'flex-direction': 'column' }" + fluid="xxl pt-0 m-0" + > + <page-title /> + <div class="main-container"> + <date-switch + :switch-time-scale="switchTimeScale" + :time-scale="timeScale" + /> + <div class="limit-container"> + <div class="trmperature-limt"> + <img src="@/assets/images/labels/warning.svg" /> + <span class="semi-bold-12px">{{ + $t('tablesDescription.temperatureWarning') + }}</span> + <b-form-input + v-model="temperatureWarningInput" + type="number" + :min="0" + :max="100" + class="form-control medium-12px" + > + </b-form-input> + </div> + <b-button + class="save-button" + variant="primary" + @click="updateTemperature" + > + {{ $t('global.action.save') }} + </b-button> + </div> + <!-- Temperature Table --> + <temperature-table + :time-scale="timeScale" + :warning="temperatureWarning" + :non-normal="temperatureNonNormal" + :critical-start="temperatureCriticalStart" + /> + <accessory-table :records="accessoryData.temperatureTable" /> + </div> + </b-container> +</template> +<script> +import PageTitle from '@/components/Global/PageTitle'; +import DateSwitch from '@/components/Global/SilaComponents/DateSwitch'; +import TemperatureTable from './TemperatureTable'; +import AccessoryTable from '@/components/Global/SilaComponents/Tables/AccessoryTableWithLabel'; +import iconChevronUp from '@carbon/icons-vue/es/chevron--up/16'; + +import { AccessoryData } from './helpers'; + +export default { + components: { + PageTitle, + DateSwitch, + TemperatureTable, + AccessoryTable, + }, + data() { + return { + timeScale: 'hour', + temperatureWarning: 72, + temperatureWarningInput: 72, + notificationInput: 42, + accessoryData: AccessoryData, + iconChevronUp: iconChevronUp, + }; + }, + methods: { + switchTimeScale(period) { + this.timeScale = period; + }, + updateTemperature() { + this.temperatureWarning = +this.temperatureWarningInput; + }, + }, +}; +</script> +<style lang="scss" scoped> +//nav items style +.nav-item, +.nav-link { + padding: 0; +} +.nav-item { + list-style-type: none; +} + +a { + color: $text-primary !important; + &:hover { + color: $text-primary !important; + } +} + +.notification-button { + border: none; + background: none; +} + +.semi-bold-12px { + z-index: 1001; +} + +// temperature limit comtainer +.limit-container { + height: 85px; + width: 100%; + padding: 0 32px 10px 32px; + display: flex; + flex-flow: row nowrap; + justify-content: flex-start; + align-items: flex-end; + gap: 24px; +} + +.trmperature-limt { + height: 60px; + width: 100%; + max-width: 270px; + display: flex; + align-items: baseline; + flex-flow: row wrap; + gap: 8px; +} + +.form-control { + height: 36px; + &.non-normal { + width: 125px; + } +} +.save-button { + width: 151px; + height: 36px; +} +</style> diff --git a/src/views/Motherboard/DynamicInfo/TemperatureTable.vue b/src/views/Motherboard/DynamicInfo/TemperatureTable.vue new file mode 100644 index 00000000..1bbf7e08 --- /dev/null +++ b/src/views/Motherboard/DynamicInfo/TemperatureTable.vue @@ -0,0 +1,112 @@ +<template> + <div> + <highcharts :options="chartOptions.line" /> + </div> +</template> + +<script> +import { setTime, Series, setCategories } from './helpers'; +import { Chart } from 'highcharts-vue'; + +export default { + components: { + highcharts: Chart, + }, + props: { + timeScale: { + type: String, + default: 'hour', + }, + warning: { + type: Number, + default: 70, + }, + nonNormal: { + type: Number, + default: 70, + }, + criticalStart: { + type: Number, + default: 70, + }, + }, + computed: { + chartOptions() { + return { + line: { + chart: { + type: 'line', + margin: [12, 50, 32, 60], + height: '320px', + }, + title: null, + xAxis: { + categories: setTime(60, 'hour'), + title: null, + labels: { + step: 6, + }, + minorGridLineColor: '#1A3E5B1A', + }, + yAxis: { + categories: setCategories(101, 'С°'), + min: 0, + max: 100, + title: null, + minTickInterval: 25, + minorGridLineColor: '#1A3E5B1A', + plotLines: [ + { + color: '#E11717', + dashStyle: 'solid', + value: this.warning, + zIndex: '1000', + width: 2, + label: { + text: 'Пороговое значение предупреждения, С°', + align: 'right', + style: { + fontFamily: 'Inter, sans-serif', + fontSize: '12px', + fontStyle: 'normal', + fontWeight: '400', + lineHeight: '16px', + color: '#0C1C2999', + }, + }, + }, + ], + }, + series: Series['temperature'].map((item) => ({ + ...item, + marker: { + enabled: false, + }, + })), + legend: { + enabled: false, + }, + tooltip: { + enabled: false, + crosshairs: false, + }, + plotOptions: { + series: { + showInLegend: true, + }, + }, + }, + }; + }, + }, +}; +</script> +<style lang="scss"> +.highcharts-credits { + display: none; +} + +.highcharts-plot-line-label { + transform: translate(-15px, 0) !important; +} +</style> diff --git a/src/views/Motherboard/DynamicInfo/helpers.js b/src/views/Motherboard/DynamicInfo/helpers.js new file mode 100644 index 00000000..807de83a --- /dev/null +++ b/src/views/Motherboard/DynamicInfo/helpers.js @@ -0,0 +1,527 @@ +export const colors = [ + '#CB32F1', + '#F18638', + '#139BB9', + '#E1AB17', + '#175AE1', + '#13B937', +]; + +export const Series = { + temperature: [ + { + name: 'Sean', + data: [ + 7, + 7, + 7, + 17, + 7, + 27, + 7, + 7, + 47, + 7, + 7, + 7, + 37, + 7, + 7, + 7, + 27, + 7, + 7, + 7, + 27, + 7, + 7, + 7, + 47, + 7, + 7, + 7, + 7, + 7, + 7, + 7, + 7, + 7, + 7, + 7, + 27, + 7, + 7, + 7, + 7, + 7, + 27, + 7, + 7, + 7, + 7, + 7, + 7, + 37, + 7, + 7, + 7, + 7, + 7, + 7, + 7, + 7, + 7, + 7, + ], + color: '#CB32F1', + }, + { + name: 'Ivan', + data: [ + 10, + 10, + 10, + 10, + 10, + 10, + 10, + 10, + 10, + 10, + 20, + 10, + 10, + 30, + 10, + 10, + 10, + 10, + 10, + 10, + 10, + 10, + 10, + 10, + 50, + 10, + 10, + 10, + 10, + 10, + 10, + 10, + 10, + 10, + 10, + 20, + 10, + 10, + 10, + 10, + 10, + 30, + 10, + 10, + 10, + 10, + 10, + 10, + 19, + 10, + 10, + 10, + 10, + 10, + 10, + 10, + 10, + 10, + 10, + 10, + ], + color: '#175AE1', + }, + { + name: 'Brendan', + data: [ + 13, + 13, + 13, + 13, + 23, + 13, + 33, + 13, + 13, + 13, + 13, + 13, + 13, + 13, + 13, + 13, + 13, + 13, + 13, + 13, + 23, + 13, + 43, + 13, + 53, + 13, + 13, + 13, + 53, + 13, + 13, + 13, + 13, + 13, + 13, + 13, + 13, + 13, + 13, + 13, + 53, + 13, + 43, + 13, + 13, + 63, + 13, + 43, + 13, + 23, + 13, + 43, + 13, + 13, + 13, + 13, + 13, + 13, + 13, + 13, + ], + color: '#B98D13', + }, + { + name: 'Matteo', + data: [ + 24, + 14, + 44, + 14, + 14, + 14, + 14, + 14, + 34, + 14, + 14, + 14, + 14, + 34, + 14, + 24, + 14, + 34, + 14, + 14, + 14, + 14, + 14, + 14, + 14, + 44, + 14, + 14, + 14, + 14, + 14, + 14, + 14, + 44, + 14, + 54, + 14, + 14, + 14, + 14, + 14, + 14, + 14, + 14, + 14, + 84, + 14, + 94, + 14, + 14, + 14, + 54, + 14, + 44, + 14, + 44, + 14, + 14, + 44, + 14, + ], + color: '#13B937', + }, + { + name: 'Joan', + data: [ + 16, + 16, + 16, + 26, + 16, + 46, + 16, + 66, + 16, + 16, + 16, + 16, + 16, + 16, + 16, + 16, + 16, + 16, + 26, + 16, + 36, + 16, + 66, + 16, + 76, + 16, + 16, + 16, + 16, + 16, + 16, + 16, + 16, + 16, + 26, + 16, + 16, + 16, + 56, + 16, + 16, + 16, + 56, + 16, + 66, + 16, + 76, + 16, + 16, + 16, + 96, + 16, + 16, + 16, + 16, + 16, + 16, + 16, + 16, + 16, + ], + color: '#F18638', + }, + { + name: 'Avinash', + data: [ + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 29, + 19, + 19, + 19, + 19, + 19, + 39, + 39, + 39, + 19, + 59, + 19, + 19, + 39, + 19, + 29, + 19, + 39, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 29, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + ], + color: '#139BB9', + }, + ], +}; + +export const setTime = (count) => { + const arr = [...new Array(count)].map(() => ''); + for (let i = 0; i < arr.length; i++) { + arr[i] = `15:${String(i).padStart(2, '0')}`; + } + return arr; +}; + +export const setCategories = (count, desc) => { + const arr = [...new Array(count)].map((i, k) => `${k} ${desc}`); + return arr; +}; + +export const AccessoryData = { + temperatureTable: { + fields: [ + { + key: 'name', + label: 'Имя модуля', + thClass: 'bootstrap-fans-table__th semi-bold-12px', + tdClass: 'bootstrap-fans-table__td light-12px', + }, + { + key: 'currentTemperature', + label: 'Текущее, С°', + thClass: 'bootstrap-fans-table__th semi-bold-12px', + tdClass: 'bootstrap-fans-table__td light-12px', + }, + { + key: 'middleTemperature', + label: 'Среднее, С°', + thClass: 'bootstrap-fans-table__th semi-bold-12px', + tdClass: 'bootstrap-fans-table__td light-12px', + }, + { + key: 'minTemperature', + label: 'Минимальное, С°', + thClass: 'bootstrap-fans-table__th semi-bold-12px', + tdClass: 'bootstrap-fans-table__td light-12px', + }, + { + key: 'minDate', + label: 'Дата минимального', + thClass: 'bootstrap-fans-table__th semi-bold-12px', + tdClass: 'bootstrap-fans-table__td light-12px', + }, + { + key: 'maxTemperature', + label: 'Максимальное, С°', + thClass: 'bootstrap-fans-table__th semi-bold-12px', + tdClass: 'bootstrap-fans-table__td light-12px', + }, + { + key: 'maxDate', + label: 'Дата максимального', + thClass: 'bootstrap-fans-table__th semi-bold-12px', + tdClass: 'bootstrap-fans-table__td light-12px', + }, + ], + items: [ + { + name: 'Материнская плата 1', + currentTemperature: 19, + middleTemperature: 40, + minTemperature: 31, + minDate: { time: '15:15', date: '11.11.2021' }, + maxTemperature: 88, + maxDate: { time: '10:26', date: '15.11.2021' }, + }, + { + name: 'Материнская плата 2', + currentTemperature: 29, + middleTemperature: 40, + minTemperature: 20, + minDate: { time: '15:45', date: '11.11.2021' }, + maxTemperature: 76, + maxDate: { time: '16:59', date: '16.11.2021' }, + }, + { + name: 'Материнская плата 3', + currentTemperature: 48, + middleTemperature: 46, + minTemperature: 31, + minDate: { time: '15:23', date: '11.11.2021' }, + maxTemperature: 69, + maxDate: { time: '15:26', date: '15.11.2021' }, + }, + { + name: 'Материнская плата 4', + currentTemperature: 48, + middleTemperature: 45, + minTemperature: 5, + minDate: { time: '16:45', date: '25.11.2021' }, + maxTemperature: 75, + maxDate: { time: '11:26', date: '16.11.2021' }, + }, + { + name: 'Материнская плата 5', + currentTemperature: 39, + middleTemperature: 44, + minTemperature: 30, + minDate: { time: '15:23', date: '11.11.2021' }, + maxTemperature: 80, + maxDate: { time: '15:26', date: '17.11.2021' }, + }, + { + name: 'Материнская плата 6', + currentTemperature: 39, + middleTemperature: 44, + minTemperature: 5, + minDate: { time: '16:45', date: '25.11.2021' }, + maxTemperature: 80, + maxDate: { time: '15:26', date: '15.11.2021' }, + }, + ], + }, +}; diff --git a/src/views/Motherboard/DynamicInfo/index.js b/src/views/Motherboard/DynamicInfo/index.js new file mode 100644 index 00000000..bd155997 --- /dev/null +++ b/src/views/Motherboard/DynamicInfo/index.js @@ -0,0 +1,2 @@ +import MotherboardDynamicPage from './MotherboardDynamicPage.vue'; +export default MotherboardDynamicPage; diff --git a/src/views/Motherboard/Specification/MotherboardSpecificationPage.vue b/src/views/Motherboard/Specification/MotherboardSpecificationPage.vue new file mode 100644 index 00000000..2146663d --- /dev/null +++ b/src/views/Motherboard/Specification/MotherboardSpecificationPage.vue @@ -0,0 +1,97 @@ +<template> + <b-container + :style="{ display: 'flex', 'flex-direction': 'column' }" + fluid="xxl pt-0 m-0" + > + <page-title /> + <div class="main-container"> + <page-section class="bootstrap-table__section"> + <span class="bold-16px">{{ $t('global.table.info') }}</span> + <b-table + responsive="md" + show-empty + class="bootstrap-rounded-table" + :items="items" + :fields="fields" + :empty-text="$t('global.table.emptyMessage')" + > + </b-table> + <span class="bold-16px">{{ + $t('appNavigation.motherboardParam') + }}</span> + <popover + id="popover-reactive-1" + description="SystemDescription.onBootRom" + popup="SystemDescription.onBootRom_popup" + button="global.action.refresh" + /> + <popover + id="popover-reactive-2" + description="SystemDescription.offBootRom" + popup="SystemDescription.offBootRom_popup" + button="global.action.refresh" + /> + </page-section> + </div> + </b-container> +</template> + +<script> +import PageTitle from '@/components/Global/PageTitle'; +import PageSection from '@/components/Global/PageSection'; + +import Popover from '@/components/Global/Popover'; + +export default { + components: { PageTitle, PageSection, Popover }, + data() { + return { + fields: [ + { + key: 'parametr', + label: 'Параметр', + formatter: this.dataFormatter, + thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg', + class: 'bootstrap-rounded-table__column-first', + tdClass: 'regular-12px bootstrap-rounded-table__td', + }, + { + key: 'value', + label: 'Значение', + formatter: this.dataFormatter, + thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg', + class: 'bootstrap-rounded-table__column-last', + tdClass: 'regular-12px bootstrap-rounded-table__td', + }, + ], + items: [ + { + parametr: 'Модель', + value: 'R2132', + }, + { + parametr: 'Производитель', + value: 'Asus', + }, + { + parametr: 'Версия', + value: '4.2', + }, + { + parametr: 'Серийный номер', + value: '231232132133', + }, + { + parametr: 'Версия BIOS', + value: '2', + }, + ], + }; + }, +}; +</script> +<style lang="scss" scoped> +.bootstrap-rounded-table { + margin: 16px 0; +} +</style> diff --git a/src/views/Motherboard/Specification/index.js b/src/views/Motherboard/Specification/index.js new file mode 100644 index 00000000..5458039a --- /dev/null +++ b/src/views/Motherboard/Specification/index.js @@ -0,0 +1,2 @@ +import MotherboardSpecificationPage from './MotherboardSpecificationPage.vue'; +export default MotherboardSpecificationPage; diff --git a/src/views/Operations/ConsoleSettings/ConsoleSettings.vue b/src/views/Operations/ConsoleSettings/ConsoleSettings.vue index bd95fa46..21b3ead9 100644 --- a/src/views/Operations/ConsoleSettings/ConsoleSettings.vue +++ b/src/views/Operations/ConsoleSettings/ConsoleSettings.vue @@ -4,20 +4,63 @@ fluid="xxl pt-0 m-0" > <page-title /> - <!-- BMC table --> - <div class="main-container"> - <page-section class="bootstrap-table__section"> - <b-table - responsive="md" - show-empty - class="bootstrap-rounded-table" - :items="systems" - :fields="fields" - :empty-text="$t('global.table.emptyMessage')" - > - </b-table> - </page-section> - </div> + <page-section class="bootstrap-table__section"> + <b-table + responsive="md" + show-empty + class="bootstrap-rounded-table" + :items="systems" + :fields="fields" + :empty-text="$t('global.table.emptyMessage')" + > + <template #cell(value)="data"> + <b-row v-if="typeof data.value === 'boolean'"> + <b-col> + <span v-if="systems[data.index].value"> + {{ $t('global.status.enabled') }} + </span> + <span v-else> + {{ $t('global.status.disabled') }} + </span> + </b-col> + <b-col> + <b-form-checkbox v-model="systems[data.index].value" switch> + </b-form-checkbox> + </b-col> + </b-row> + <b-row + v-else-if="data.index === 1 || data.index === 6 || data.index === 8" + > + <b-col> + <span> + {{ data.value }} + </span> + </b-col> + <b-col> + <img :is="iconChevron" class="icon-chevron" /> + </b-col> + </b-row> + <b-row v-else-if="data.index === 3"> + <b-col> + <span> + {{ data.value }} + </span> + </b-col> + <b-col> + <img src="@/assets/images/icon-edit.svg" class="icon-chevron" /> + </b-col> + </b-row> + <b-row v-else> + <span>{{ data.value }}</span></b-row + > + </template> + </b-table> + <div class="save-button"> + <b-button variant="primary" class="console-settings__save-button"> + {{ $t('global.action.saveChanges') }} + </b-button> + </div> + </page-section> </b-container> </template> @@ -31,6 +74,7 @@ import BVToastMixin from '@/components/Mixins/BVToastMixin'; import TableRowExpandMixin, { expandRowLabel, } from '@/components/Mixins/TableRowExpandMixin'; +import iconChevron from '@carbon/icons-vue/es/chevron--down/16'; export default { components: { @@ -63,14 +107,15 @@ export default { tdClass: 'regular-12px bootstrap-rounded-table__td', }, ], + iconChevron, expandRowLabel: expandRowLabel, systems: [ - { attributes: 'Включена', value: 'Включено' }, + { attributes: 'Состояние', value: true }, { attributes: 'Максимальное количество сеансов', value: '6' }, { attributes: 'Активные сеансы', value: '0' }, { attributes: 'Порт удаленного доступа', value: '5900' }, - { attributes: 'Статус шифрования видео', value: 'Включено' }, - { attributes: 'Видео с локального сервера', value: 'Включено' }, + { attributes: 'Статус шифрования видео', value: true }, + { attributes: 'Видео с локального сервера', value: true }, { attributes: 'Действие по умолчанию при истечении времени ожидания запроса на общий доступ к сеансу', @@ -78,7 +123,7 @@ export default { }, { attributes: 'Автоматическая блокировка системы', - value: 'Не включено', + value: false, }, { attributes: 'Состояние подключения клавиатуры/мыши', @@ -95,3 +140,34 @@ export default { width: 30%; } </style> +<style lang="scss" scoped> +.row { + margin: 0px; + height: 15px; + flex-wrap: nowrap; + align-items: center; +} +.col { + padding: 0; +} + +.icon-chevron { + margin: 0 0 0 85%; + cursor: pointer; +} + +.save-button { + display: flex; + justify-content: flex-end; +} + +.console-settings__save-button { + width: 241px; + height: 36px; + margin-right: 0.5rem; +} + +.bootstrap-table__section { + width: auto; +} +</style> diff --git a/src/views/Operations/Kvm/ImagesModal.vue b/src/views/Operations/Kvm/ImagesModal.vue new file mode 100644 index 00000000..ce4e6ebf --- /dev/null +++ b/src/views/Operations/Kvm/ImagesModal.vue @@ -0,0 +1,296 @@ +<template> + <b-modal id="modal-images" class="modal-images" hide-footer> + <template #modal-title> + <div class="popup-title"> + <span class="semi-bold-20px">{{ $t('pageKvm.addImage_modal') }}</span> + </div> + </template> + <div class="popup-switch"> + <span + class="medium-16px popup-item" + :class="{ 'switch-active': isImportFromPC }" + @click="switchExport" + >{{ $t('pageKvm.fromPC') }}</span + > + <span + class="medium-16px popup-item" + :class="{ 'switch-active': !isImportFromPC }" + @click="switchImport" + >{{ $t('pageKvm.fromServer') }}</span + > + <div class="slider" /> + </div> + <div v-if="isImportFromPC" class="images-import_container"> + <b-form-file + id="images-import__file-input" + placeholder="Нажмите на область или перетащите в нее файл образа" + ></b-form-file> + </div> + <div v-else class="popup-body"> + <div class="connection-type-container"> + <span class="regular-12px tretiatry select-label" for="username">{{ + $t('pageKvm.urlAdress') + }}</span> + <b-form-select + v-model="connectionType" + :options="connectionTypes" + class="select-connection regular-14px" + /> + <label class="regular-12px tretiatry" for="username">{{ + $t('pageKvm.connectionType') + }}</label> + <b-form-input id="url" type="text" class="form-control url-input"> + </b-form-input> + <b-form-group> + <label class="regular-12px tretiatry" for="username">{{ + $t('pageLogin.username') + }}</label> + <b-form-input + id="username" + v-model="userInfo.username" + aria-describedby="login-error-alert username-required" + :state="getValidationState($v.userInfo.username)" + type="text" + data-test-id="login-input-username" + class="form-control image-username-input" + @input="$v.userInfo.username.$touch()" + > + </b-form-input> + <b-form-invalid-feedback id="username-required" role="alert"> + <template v-if="!$v.userInfo.username.required"> + {{ $t('global.form.fieldRequired') }} + </template> + </b-form-invalid-feedback> + </b-form-group> + + <b-form-group> + <input-password-toggle> + <label class="regular-12px tretiatry" for="password">{{ + $t('pageLogin.password') + }}</label> + <b-form-input + id="password" + v-model="userInfo.password" + aria-describedby="login-error-alert password-required" + :state="getValidationState($v.userInfo.password)" + type="password" + data-test-id="login-input-password" + class="form-control image-password-input" + @input="$v.userInfo.password.$touch()" + > + </b-form-input> + <b-form-invalid-feedback id="password-required" role="alert"> + <template v-if="!$v.userInfo.password.required"> + {{ $t('global.form.fieldRequired') }} + </template> + </b-form-invalid-feedback> + </input-password-toggle> + </b-form-group> + <b-button class="upload-button" variant="primary"> + {{ $t('pageKvm.upload') }} + </b-button> + </div> + </div> + </b-modal> +</template> +<script> +import { required } from 'vuelidate/lib/validators'; +import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js'; +import InputPasswordToggle from '@/components/Global/InputPasswordToggle'; + +export default { + components: { InputPasswordToggle }, + mixins: [VuelidateMixin], + data() { + return { + isImportFromPC: true, + userInfo: { + username: null, + password: null, + }, + connectionType: 1, + connectionTypes: [ + { + value: 1, + text: 'HTTPS', + }, + ], + }; + }, + validations: { + userInfo: { + username: { + required, + }, + password: { + required, + }, + }, + }, + methods: { + switchExport() { + this.isImportFromPC = true; + }, + switchImport() { + this.isImportFromPC = false; + }, + }, +}; +</script> +<style lang="scss"> +.modal-dialog { + margin: 25vh auto; +} +.modal-content { + border-radius: 16px; + width: 480px; +} +.modal-header { + border-bottom: none; +} + +.images-import_container > .custom-file { + width: 432px; + height: 357px; +} + +#images-import__file-input ~ .custom-file-label { + background-color: transparent; + border: 1px dashed rgba(12, 28, 41, 0.6); + box-sizing: border-box; + border-radius: 8px; + width: 432px; + height: 357px; + display: flex; + justify-content: center; + align-items: center; + text-align: center; + white-space: normal; + padding: 0 65px; +} + +#images-import__file-input ~ .custom-file-label::after { + display: none; +} +</style> +<style lang="scss" scoped> +.popup-switch { + position: relative; + display: flex; + flex-flow: row nowrap; + border-bottom: 1px solid #f3f4f5; + width: 100%; + height: 36px; +} + +.switch-active { + color: $red-brand-primary; + transition: ease-in 0.15s; +} + +.medium-16px { + margin-left: 20px; +} + +.slider { + position: absolute; + height: 0px; + border-bottom: 4px solid $red-brand-primary; + transition: ease-in 0.2s; + bottom: 0px; +} + +.popup-item:nth-child(1).switch-active ~ .slider { + width: 110px; + left: 21px; +} + +.popup-item:nth-child(2).switch-active ~ .slider { + left: 157px; + width: 82px; +} + +.popup-body { + margin: 24px 0 0 0; +} + +.images-import_container { + width: 478px; + height: 405px; + background-color: $surface-secondary; + margin: 0px 0px -16px -16px; + border-radius: 0 0 16px 16px; + + display: flex; + align-items: center; + justify-content: center; +} + +.image-username-input, +.image-password-input { + height: 56px; + margin: -30px 0 5px 0; + padding-top: 30px; + font-family: 'Inter', sans-serif; + font-size: 14px; + font-weight: 500; + line-height: 20px; + letter-spacing: 0em; +} + +.url-input { + height: 56px; + padding-top: 30px; + font-family: 'Inter', sans-serif; + font-size: 14px; + font-weight: 500; + line-height: 20px; + letter-spacing: 0em; + margin: -30px 0 20px 0; +} + +.connection-type-container { + width: 446px; +} + +.caption-12px { + padding-left: 10px; +} + +.text-input { + margin: 0 0 0 50px; + padding: 0 0 0 5px; +} + +.login-button { + height: 36px; + width: 380px; +} + +.select-connection { + height: 56px; + padding-top: 30px; + border: none; + border-radius: 8px; + margin: -0px 0 18px 0; + background-color: $surface-secondary; + background-image: url('../../../assets/images/icon-chevron.svg'); +} +.select-label { + position: absolute; + top: 84px; +} + +.form-background .custom-select, +.form-background .form-control { + border-radius: 8px; + border: none; + background-color: rgba(26, 62, 91, 0.05); +} + +.upload-button { + width: 100%; + height: 52px; + margin: 0 auto 10px; +} +</style> diff --git a/src/views/Operations/Kvm/Kvm.vue b/src/views/Operations/Kvm/Kvm.vue index 1a41baaf..8c51ace4 100644 --- a/src/views/Operations/Kvm/Kvm.vue +++ b/src/views/Operations/Kvm/Kvm.vue @@ -1,24 +1,121 @@ <template> - <b-container fluid="xl"> + <b-container fluid="xxl pt-0 m-0"> + <b-button + class="btn-primary semi-bold-16px images_add-image-button" + @click="$bvModal.show('modal-images')" + > + {{ $t('pageKvm.addImage') }}</b-button + > <page-title /> - <div class="terminal-container"> - <kvm-console :is-full-window="false" /> + <div class="images"> + <div class="images_desc"> + <span class="regular-12px tretiatry">Подключенные образы:</span> + </div> + <div class="images-container"> + <div class="images-container_image"> + <img src="@/assets/images/console-images.svg" class="images-image" /> + <span class="semi-bold-12px">Win-11-2022</span> + <span class="light-12px">с носителя</span> + </div> + <div class="images-container_image"> + <img src="@/assets/images/console-images.svg" class="images-image" /> + <span class="semi-bold-12px">Win-10-2017</span> + <span class="light-12px">с сервера</span> + </div> + <div class="images-container_image"> + <img src="@/assets/images/console-images.svg" class="images-image" /> + <span class="semi-bold-12px">Win-7-2010</span> + <span class="light-12px">с сервера</span> + </div> + </div> </div> + <div class="console"></div> + <!-- <kvm-console :is-full-window="false" /> --> + <images-modal /> </b-container> </template> <script> import PageTitle from '@/components/Global/PageTitle'; -import KvmConsole from './KvmConsole'; +import ImagesModal from './ImagesModal'; +// import KvmConsole from './KvmConsole'; export default { name: 'Kvm', - components: { PageTitle, KvmConsole }, + components: { + PageTitle, + ImagesModal, + // KvmConsole + }, }; </script> +<style lang="scss" scoped> +.images_add-image-button { + position: absolute; + top: calc(#{$header-height}); + right: 0px; + border: none; + box-shadow: none; + background-color: $faint-secondary-primary-5; + color: $red-brand-primary; + border-radius: 8px; + margin: 12px 32px; + width: 236px; + height: 40px; + z-index: 1001; + &:active { + background-color: $faint-secondary-primary-5-hover !important; + color: $red-brand-primary-active !important; + border: none; + } + &:focus { + box-shadow: none !important; + } + &:focus-visible { + box-shadow: none !important; + } +} + +.images { + display: flex; + flex-flow: row wrap; + height: 144px; +} + +.images_desc { + margin: 16px 0 16px 32px; + width: 100%; +} + +.images-container { + display: flex; + flex-flow: row nowrap; + justify-content: flex-start; + align-items: center; + margin: 0 0 16px 32px; +} + +.images-container_image { + display: flex; + flex-flow: column nowrap; + justify-content: flex-start; + align-items: center; + margin-right: 24px; +} + +.images-image { + width: 40px; + height: 40px; + margin-bottom: 8px; +} + +.semi-bold-12px { + color: $text-primary; +} -<style scoped> -.terminal-container { +.console { + background-color: black; width: 100%; + height: 70vh; } </style> diff --git a/src/views/Operations/SerialOverLan/SerialOverLan.vue b/src/views/Operations/SerialOverLan/SerialOverLan.vue index 08a67d84..6f6852cf 100644 --- a/src/views/Operations/SerialOverLan/SerialOverLan.vue +++ b/src/views/Operations/SerialOverLan/SerialOverLan.vue @@ -1,23 +1,133 @@ <template> - <b-container fluid="xl"> + <b-container fluid="xxl pt-0 m-0"> <page-title /> + <b-button + class="btn-primary semi-bold-16px images_add-image-button" + @click="$bvModal.show('modal-images')" + > + {{ $t('pageKvm.addImage') }}</b-button + > <page-section class="mb-0"> - <serial-over-lan-console :is-full-window="false" /> + <div class="images"> + <div class="images_desc"> + <span class="regular-12px tretiatry">Подключенные образы:</span> + </div> + <div class="images-container"> + <div class="images-container_image"> + <img + src="@/assets/images/console-images.svg" + class="images-image" + /> + <span class="semi-bold-12px">Win-11-2022</span> + <span class="light-12px">с носителя</span> + </div> + <div class="images-container_image"> + <img + src="@/assets/images/console-images.svg" + class="images-image" + /> + <span class="semi-bold-12px">Win-10-2017</span> + <span class="light-12px">с сервера</span> + </div> + <div class="images-container_image"> + <img + src="@/assets/images/console-images.svg" + class="images-image" + /> + <span class="semi-bold-12px">Win-7-2010</span> + <span class="light-12px">с сервера</span> + </div> + </div> + </div> + <div class="console"></div> + <!-- <serial-over-lan-console :is-full-window="false" /> --> </page-section> + <images-modal /> </b-container> </template> <script> import PageTitle from '@/components/Global/PageTitle'; import PageSection from '@/components/Global/PageSection'; -import SerialOverLanConsole from './SerialOverLanConsole'; +// import SerialOverLanConsole from './SerialOverLanConsole'; +import ImagesModal from '../Kvm/ImagesModal'; export default { name: 'SerialOverLan', components: { PageSection, PageTitle, - SerialOverLanConsole, + ImagesModal, + // SerialOverLanConsole, }, }; </script> +<style lang="scss" scoped> +.images_add-image-button { + position: absolute; + top: 95px; + right: 0px; + border: none; + box-shadow: none; + background-color: $faint-secondary-primary-5; + color: $red-brand-primary; + border-radius: 8px; + margin: 12px 32px; + width: 236px; + height: 40px; + z-index: 1001; + &:active { + background-color: $faint-secondary-primary-5-hover !important; + color: $red-brand-primary-active !important; + border: none; + } + &:focus { + box-shadow: none !important; + } + &:focus-visible { + box-shadow: none !important; + } +} +.images { + display: flex; + flex-flow: row wrap; + height: 144px; +} + +.images_desc { + margin: 16px 0 16px 32px; + width: 100%; +} + +.images-container { + display: flex; + flex-flow: row nowrap; + justify-content: flex-start; + align-items: center; + margin: 0 0 16px 32px; +} + +.images-container_image { + display: flex; + flex-flow: column nowrap; + justify-content: flex-start; + align-items: center; + margin-right: 24px; +} + +.images-image { + width: 40px; + height: 40px; + margin-bottom: 8px; +} + +.semi-bold-12px { + color: $text-primary; +} + +.console { + background-color: black; + width: 100%; + height: 70vh; +} +</style> diff --git a/src/views/PowerSupplies/DynamicInfo/PowerDynamicPage.vue b/src/views/PowerSupplies/DynamicInfo/PowerDynamicPage.vue new file mode 100644 index 00000000..3039bebb --- /dev/null +++ b/src/views/PowerSupplies/DynamicInfo/PowerDynamicPage.vue @@ -0,0 +1,625 @@ +<template> + <b-container + :style="{ display: 'flex', 'flex-direction': 'column' }" + fluid="xxl pt-0 m-0" + > + <page-title /> + <div class="notification-time__container"> + <span class="semi-bold-12px">{{ + $t('global.ariaLabel.notificationTime') + }}</span> + <div class="form-control notification-time"> + <b-form-input + v-model="notificationInput" + type="number" + class="notification-time__input" + > + </b-form-input> + <button class="notification-button"> + <img + class="notification-time__icon" + src="@/assets/images/refresh.svg" + /> + </button> + </div> + </div> + <div class="main-container"> + <date-switch + :switch-time-scale="switchTimeScale" + :time-scale="timeScale" + /> + <!-- Temperature Section --> + <div class="page-collapse-decorator"> + <b-button + v-b-toggle.toggle-collapse_1 + variant="link" + class="collapse-button semi-bold-16px" + > + <img src="@/assets/images/temperature-icon.svg" /> + <span class="bold-16px">{{ $t('subHeader.temperature') }}</span> + <component :is="iconChevronUp" class="icon-expand" /> + </b-button> + <b-collapse id="toggle-collapse_1" class="nav-item__nav"> + <!-- Temperature Limit Inputs --> + <div class="limit-container"> + <div class="trmperature-limt"> + <img src="@/assets/images/labels/non-normal.svg" /> + <span class="semi-bold-12px">{{ + $t('tablesDescription.nonNormalMode') + }}</span> + <b-form-input + v-model="temperatureNonNormalInput" + type="number" + :min="0" + :max="temperatureCritical" + class="form-control medium-12px" + > + </b-form-input> + </div> + <div class="trmperature-limt"> + <img src="@/assets/images/labels/critical.svg" /> + <span class="semi-bold-12px">{{ + $t('tablesDescription.criticalMode') + }}</span> + <b-form-input + v-model="temperatureCritical" + type="number" + :min="temperatureNonNormalInput" + :max="temperatureWarningInput" + class="form-control medium-12px" + > + </b-form-input> + </div> + <div class="trmperature-limt"> + <img src="@/assets/images/labels/warning.svg" /> + <span class="semi-bold-12px">{{ + $t('tablesDescription.temperatureWarning') + }}</span> + <b-form-input + v-model="temperatureWarningInput" + type="number" + :min="temperatureCritical" + :max="100" + class="form-control medium-12px" + > + </b-form-input> + </div> + <b-button + class="save-button" + variant="primary" + @click="updateTemperature" + > + {{ $t('global.action.save') }} + </b-button> + </div> + <!-- Temperature Tables --> + <temperature-table + :time-scale="timeScale" + :warning="temperatureWarning" + :non-normal="temperatureNonNormal" + :critical="temperatureCritical" + /> + <accessory-table :records="accessoryData.temperatureTable" /> + </b-collapse> + </div> + <!-- using Section --> + <div class="page-collapse-decorator"> + <b-button + v-b-toggle.toggle-collapse_2 + variant="link" + class="collapse-button semi-bold-16px" + > + <img src="@/assets/images/usage-icon.svg" /> + <span class="bold-16px">{{ $t('pagePower.usingPercent') }}</span> + <component :is="iconChevronUp" class="icon-expand" /> + </b-button> + <b-collapse id="toggle-collapse_2" class="nav-item__nav"> + <!-- using Limit Inputs --> + <div class="limit-container"> + <div class="trmperature-limt"> + <img src="@/assets/images/labels/warning.svg" /> + <span class="semi-bold-12px">{{ + $t('tablesDescription.warningPercent') + }}</span> + <b-form-input + v-model="usingNonNormalInput" + type="number" + :min="0" + :max="usingCritical" + class="form-control medium-12px" + > + </b-form-input> + </div> + <div class="trmperature-limt"> + <img src="@/assets/images/labels/non-normal.svg" /> + <span class="semi-bold-12px">{{ + $t('tablesDescription.nonNormalModePercent') + }}</span> + <b-form-input + v-model="usingCritical" + type="number" + :min="usingNonNormalInput" + :max="usingWarningInput" + class="form-control medium-12px" + > + </b-form-input> + </div> + <div class="trmperature-limt"> + <img src="@/assets/images/labels/critical.svg" /> + <span class="semi-bold-12px">{{ + $t('tablesDescription.criticalModePercent') + }}</span> + <b-form-input + v-model="usingWarningInput" + type="number" + :min="usingCritical" + :max="100" + class="form-control medium-12px" + > + </b-form-input> + </div> + <b-button + class="save-button" + variant="primary" + @click="updateUsage" + > + {{ $t('global.action.save') }} + </b-button> + </div> + <!-- using Tables --> + <using-table + :time-scale="timeScale" + :warning="usingWarning" + :non-normal="usingNonNormal" + :critical-start="usingCritical" + /> + <accessory-table :records="accessoryData.usingTable" /> + </b-collapse> + </div> + <!-- Input Voltage Section --> + <div class="page-collapse-decorator"> + <b-button + v-b-toggle.toggle-collapse_3 + variant="link" + class="collapse-button semi-bold-16px" + > + <img src="@/assets/images/voltage-icon.svg" /> + <span class="bold-16px">{{ + $t('tablesDescription.inputVoltage') + }}</span> + <component :is="iconChevronUp" class="icon-expand" /> + </b-button> + <b-collapse id="toggle-collapse_3" class="nav-item__nav"> + <div class="limit-container"> + <div class="frequency-limt"> + <img src="@/assets/images/labels/warning.svg" /> + <span class="semi-bold-12px">{{ + $t('tablesDescription.voltageWarning') + }}</span> + <b-form-input + v-model="powerWarningInput" + type="number" + class="form-control medium-12px" + > + </b-form-input> + </div> + <div class="frequency-limt"> + <img src="@/assets/images/labels/shutdown.svg" /> + <span class="semi-bold-12px">{{ + $t('tablesDescription.voltageShutdown') + }}</span> + <b-form-input + v-model="powerShutdownInput" + type="number" + class="form-control medium-12px" + > + </b-form-input> + </div> + <b-button + class="save-button" + variant="primary" + @click="updatePower" + > + {{ $t('global.action.save') }} + </b-button> + </div> + <!-- Input Voltage Tables --> + <voltage-table :time-scale="timeScale" :warning="frequencyWarning" /> + <accessory-table :records="accessoryData.voltageTable" /> + </b-collapse> + </div> + <!-- Input Power Section --> + <div class="page-collapse-decorator"> + <b-button + v-b-toggle.toggle-collapse_4 + variant="link" + class="collapse-button semi-bold-16px" + > + <img src="@/assets/images/power-icon.svg" /> + <span class="bold-16px">{{ + $t('tablesDescription.inputPower') + }}</span> + <component :is="iconChevronUp" class="icon-expand" /> + </b-button> + <b-collapse id="toggle-collapse_4" class="nav-item__nav"> + <div class="limit-container"> + <div class="frequency-limt"> + <img src="@/assets/images/labels/warning.svg" /> + <span class="semi-bold-12px">{{ + $t('tablesDescription.powerWarning') + }}</span> + <b-form-input + v-model="powerWarningInput" + type="number" + class="form-control medium-12px" + > + </b-form-input> + </div> + <div class="frequency-limt"> + <img src="@/assets/images/labels/shutdown.svg" /> + <span class="semi-bold-12px">{{ + $t('tablesDescription.powerShutdown') + }}</span> + <b-form-input + v-model="powerShutdownInput" + type="number" + class="form-control medium-12px" + > + </b-form-input> + </div> + <b-button + class="save-button" + variant="primary" + @click="updatePower" + > + {{ $t('global.action.save') }} + </b-button> + </div> + <!-- Input Power Table --> + <power-table + :time-scale="timeScale" + :warning="powerWarning" + :shutdown="powerShutdown" + /> + <accessory-table :records="accessoryData.powerTable" /> + </b-collapse> + </div> + <!-- Output Voltage Section --> + <div class="page-collapse-decorator"> + <b-button + v-b-toggle.toggle-collapse_5 + variant="link" + class="collapse-button semi-bold-16px" + > + <img src="@/assets/images/voltage-icon.svg" /> + <span class="bold-16px">{{ + $t('tablesDescription.outputVoltage') + }}</span> + <component :is="iconChevronUp" class="icon-expand" /> + </b-button> + <b-collapse id="toggle-collapse_5" class="nav-item__nav"> + <div class="limit-container"> + <div class="frequency-limt"> + <img src="@/assets/images/labels/warning.svg" /> + <span class="semi-bold-12px">{{ + $t('tablesDescription.voltageWarning') + }}</span> + <b-form-input + v-model="powerWarningInput" + type="number" + class="form-control medium-12px" + > + </b-form-input> + </div> + <div class="frequency-limt"> + <img src="@/assets/images/labels/shutdown.svg" /> + <span class="semi-bold-12px">{{ + $t('tablesDescription.voltageShutdown') + }}</span> + <b-form-input + v-model="powerShutdownInput" + type="number" + class="form-control medium-12px" + > + </b-form-input> + </div> + <b-button + class="save-button" + variant="primary" + @click="updatePower" + > + {{ $t('global.action.save') }} + </b-button> + </div> + <!-- Output Voltage Tables --> + <voltage-table :time-scale="timeScale" :warning="frequencyWarning" /> + <accessory-table :records="accessoryData.voltageTable" /> + </b-collapse> + </div> + <!-- Output Power Section --> + <div class="page-collapse-decorator"> + <b-button + v-b-toggle.toggle-collapse_6 + variant="link" + class="collapse-button semi-bold-16px" + > + <img src="@/assets/images/power-icon.svg" /> + <span class="bold-16px">{{ + $t('tablesDescription.outputPower') + }}</span> + <component :is="iconChevronUp" class="icon-expand" /> + </b-button> + <b-collapse id="toggle-collapse_6" class="nav-item__nav"> + <div class="limit-container"> + <div class="frequency-limt"> + <img src="@/assets/images/labels/warning.svg" /> + <span class="semi-bold-12px">{{ + $t('tablesDescription.powerWarning') + }}</span> + <b-form-input + v-model="powerWarningInput" + type="number" + class="form-control medium-12px" + > + </b-form-input> + </div> + <div class="frequency-limt"> + <img src="@/assets/images/labels/shutdown.svg" /> + <span class="semi-bold-12px">{{ + $t('tablesDescription.powerShutdown') + }}</span> + <b-form-input + v-model="powerShutdownInput" + type="number" + class="form-control medium-12px" + > + </b-form-input> + </div> + <b-button + class="save-button" + variant="primary" + @click="updatePower" + > + {{ $t('global.action.save') }} + </b-button> + </div> + <!-- Output Power Table --> + <power-table + :time-scale="timeScale" + :warning="powerWarning" + :shutdown="powerShutdown" + /> + <accessory-table :records="accessoryData.powerTable" /> + </b-collapse> + </div> + <!-- Amperage Section --> + <div class="page-collapse-decorator"> + <b-button + v-b-toggle.toggle-collapse_7 + variant="link" + class="collapse-button semi-bold-16px" + > + <img src="@/assets/images/amperage-icon.svg" /> + <span class="bold-16px">{{ $t('tablesDescription.amperage') }}</span> + <component :is="iconChevronUp" class="icon-expand" /> + </b-button> + <b-collapse id="toggle-collapse_7" class="nav-item__nav"> + <div class="limit-container"> + <div class="frequency-limt"> + <img src="@/assets/images/labels/warning.svg" /> + <span class="semi-bold-12px">{{ + $t('tablesDescription.voltageWarning') + }}</span> + <b-form-input + v-model="powerWarningInput" + type="number" + class="form-control medium-12px" + > + </b-form-input> + </div> + <div class="frequency-limt"> + <img src="@/assets/images/labels/shutdown.svg" /> + <span class="semi-bold-12px">{{ + $t('tablesDescription.voltageShutdown') + }}</span> + <b-form-input + v-model="powerShutdownInput" + type="number" + class="form-control medium-12px" + > + </b-form-input> + </div> + <b-button + class="save-button" + variant="primary" + @click="updatePower" + > + {{ $t('global.action.save') }} + </b-button> + </div> + <!-- Amperage Table --> + <voltage-table :time-scale="timeScale" :warning="frequencyWarning" /> + <accessory-table :records="accessoryData.voltageTable" /> + </b-collapse> + </div> + </div> + </b-container> +</template> +<script> +import PageTitle from '@/components/Global/PageTitle'; +import PageSection from '@/components/Global/PageSection'; +import DateSwitch from '@/components/Global/SilaComponents/DateSwitch'; + +import TemperatureTable from './TemperatureTable'; +import UsingTable from './UsingTable'; +import PowerTable from './PowerTable'; +import VoltageTable from './VoltageTable'; +import AccessoryTable from '@/components/Global/SilaComponents/Tables/AccessoryTablePower'; +import iconChevronUp from '@carbon/icons-vue/es/chevron--up/16'; + +import { AccessoryData } from './helpers'; + +export default { + components: { + PageTitle, + PageSection, + DateSwitch, + TemperatureTable, + UsingTable, + PowerTable, + VoltageTable, + AccessoryTable, + }, + data() { + return { + timeScale: 'hour', + temperatureNonNormalInput: 44, + temperatureNonNormal: 44, + temperatureCriticalInput: 55, + temperatureCritical: 55, + temperatureWarningInput: 72, + temperatureWarning: 72, + usingNonNormalInput: 50, + usingNonNormal: 50, + usingCriticalInput: 55, + usingCritical: 55, + usingWarningInput: 72, + usingWarning: 72, + // frequencyWarning: 660, + // frequencyWarningInput: 660, + powerWarning: 66, + powerWarningInput: 66, + powerShutdown: 88, + powerShutdownInput: 88, + notificationInput: 42, + accessoryData: AccessoryData, + iconChevronUp: iconChevronUp, + }; + }, + methods: { + switchTimeScale(period) { + this.timeScale = period; + }, + updateTemperature() { + this.temperatureNonNormal = +this.temperatureNonNormalInput; + this.temperatureCritical = +this.temperatureCriticalInput; + this.temperatureWarning = +this.temperatureWarningInput; + }, + updateUsage() { + this.usingNonNormal = +this.usingNonNormalInput; + this.usingCritical = +this.usingCriticalInput; + this.usingWarning = +this.usingWarningInput; + }, + updateFrequency() { + this.frequencyWarning = +this.frequencyWarningInput; + }, + updatePower() { + this.powerWarning = +this.powerWarningInput; + this.powerShutdown = +this.powerShutdownInput; + }, + }, +}; +</script> +<style lang="scss" scoped> +//nav items style +.nav-item, +.nav-link { + padding: 0; +} +.nav-item { + list-style-type: none; +} + +a { + color: $text-primary !important; + &:hover { + color: $text-primary !important; + } +} + +.notification-time__container { + position: absolute; + top: calc(#{$header-height}); + right: 0px; + display: flex; + flex-flow: row nowrap; + justify-content: flex-start; + align-items: center; +} + +.notification-time { + display: flex; + flex-flow: row nowrap; + justify-content: flex-start; + align-items: center; + border: none; + box-shadow: none; + border-radius: 8px; + margin: 12px 32px 12px 8px; + width: 236px; + height: 40px; + z-index: 1001; +} + +.notification-time__icon { + width: 20px; + height: 20px; +} + +.notification-time__input { + border: none; + background: none; + box-shadow: none; +} + +.notification-button { + border: none; + background: none; +} + +.semi-bold-12px { + z-index: 1001; +} +// temperature limit comtainer +.limit-container { + height: 85px; + width: 100%; + padding: 0 32px 10px 32px; + display: flex; + flex-flow: row nowrap; + justify-content: flex-start; + align-items: flex-end; + gap: 24px; +} + +.trmperature-limt { + height: 60px; + width: 100%; + max-width: 270px; + display: flex; + align-items: baseline; + flex-flow: row wrap; + gap: 8px; +} + +.form-control { + height: 36px; + &.non-normal { + width: 125px; + } +} +.save-button { + width: 151px; + height: 36px; +} + +.frequency-limt { + height: 60px; + width: 100%; + max-width: 288px; + display: flex; + align-items: baseline; + flex-flow: row wrap; + gap: 8px; +} +</style> diff --git a/src/views/PowerSupplies/DynamicInfo/PowerTable.vue b/src/views/PowerSupplies/DynamicInfo/PowerTable.vue new file mode 100644 index 00000000..4ccb8aac --- /dev/null +++ b/src/views/PowerSupplies/DynamicInfo/PowerTable.vue @@ -0,0 +1,126 @@ +<template> + <div> + <highcharts :options="chartOptions.line" /> + </div> +</template> + +<script> +import { setTime, Series, setCategories } from './helpers'; +import { Chart } from 'highcharts-vue'; + +export default { + components: { + highcharts: Chart, + }, + props: { + timeScale: { + type: String, + default: 'hour', + }, + warning: { + type: Number, + default: 66, + }, + shutdown: { + type: Number, + default: 88, + }, + }, + computed: { + chartOptions() { + return { + line: { + chart: { + type: 'line', + margin: [12, 50, 32, 60], + height: '320px', + }, + title: null, + xAxis: { + categories: setTime(60, this.timeScale), + title: null, + labels: { + step: 6, + }, + minorGridLineColor: '#1A3E5B1A', + }, + yAxis: { + categories: setCategories(101, 'Вт'), + min: 0, + max: 100, + title: null, + minTickInterval: 25, + minorGridLineColor: '#1A3E5B1A', + plotLines: [ + { + color: '#E11717', + dashStyle: 'solid', + value: this.warning, + zIndex: '1000', + width: 2, + label: { + text: 'Пороговое значения предупреждение', + align: 'right', + style: { + fontFamily: 'Inter', + fontSize: '12px', + fontStyle: 'normal', + fontWeight: '400', + lineHeight: '16px', + color: '#0C1C2999', + }, + }, + }, + { + color: '#1A3E5B', + dashStyle: 'solid', + value: this.shutdown, + width: 2, + label: { + text: 'Пороговое значения отказ', + align: 'right', + style: { + fontFamily: 'Inter', + fontSize: '12px', + fontStyle: 'normal', + fontWeight: '400', + lineHeight: '16px', + color: '#0C1C2999', + }, + }, + }, + ], + }, + series: Series['power'].map((item) => ({ + ...item, + marker: { + enabled: false, + }, + })), + legend: { + enabled: false, + }, + tooltip: { + enabled: false, + crosshairs: false, + }, + plotOptions: { + series: { + showInLegend: true, + }, + }, + }, + }; + }, + }, +}; +</script> +<style lang="scss"> +.highcharts-credits { + display: none; +} + +.highcharts-plot-line-label { + transform: translate(-15px, 0) !important; +} +</style> diff --git a/src/views/PowerSupplies/DynamicInfo/TemperatureTable.vue b/src/views/PowerSupplies/DynamicInfo/TemperatureTable.vue new file mode 100644 index 00000000..9ae92c06 --- /dev/null +++ b/src/views/PowerSupplies/DynamicInfo/TemperatureTable.vue @@ -0,0 +1,126 @@ +<template> + <div> + <highcharts :options="chartOptions.line" /> + </div> +</template> + +<script> +import { setTime, Series, setCategories } from './helpers'; +import { Chart } from 'highcharts-vue'; + +export default { + components: { + highcharts: Chart, + }, + props: { + timeScale: { + type: String, + default: 'hour', + }, + warning: { + type: Number, + default: 70, + }, + nonNormal: { + type: Number, + default: 70, + }, + critical: { + type: Number, + default: 70, + }, + }, + computed: { + chartOptions() { + return { + line: { + chart: { + type: 'line', + margin: [12, 50, 32, 60], + height: '320px', + }, + title: null, + xAxis: { + categories: setTime(60, 'hour'), + title: null, + labels: { + step: 6, + }, + minorGridLineColor: '#1A3E5B1A', + }, + yAxis: { + categories: setCategories(101, 'С°'), + min: 0, + max: 100, + title: null, + minTickInterval: 25, + minorGridLineColor: '#1A3E5B1A', + plotLines: [ + { + color: '#E11717', + dashStyle: 'solid', + value: this.warning, + zIndex: '1000', + width: 2, + label: { + text: 'Пороговое значение предупреждения, С°', + align: 'right', + style: { + fontFamily: 'Inter, sans-serif', + fontSize: '12px', + fontStyle: 'normal', + fontWeight: '400', + lineHeight: '16px', + color: '#0C1C2999', + }, + }, + }, + ], + plotBands: [ + { + color: '#F0AC0C1A', + dashStyle: 'solid', + from: this.nonNormal, + to: this.criticalStart, + }, + { + color: '#FF41411A', + dashStyle: 'solid', + from: this.criticalStart, + to: this.warning, + }, + ], + }, + series: Series['temperature'].map((item) => ({ + ...item, + marker: { + enabled: false, + }, + })), + legend: { + enabled: false, + }, + tooltip: { + enabled: false, + crosshairs: false, + }, + plotOptions: { + series: { + showInLegend: true, + }, + }, + }, + }; + }, + }, +}; +</script> +<style lang="scss"> +.highcharts-credits { + display: none; +} + +.highcharts-plot-line-label { + transform: translate(-15px, 0) !important; +} +</style> diff --git a/src/views/PowerSupplies/DynamicInfo/UsingTable.vue b/src/views/PowerSupplies/DynamicInfo/UsingTable.vue new file mode 100644 index 00000000..322a7f7b --- /dev/null +++ b/src/views/PowerSupplies/DynamicInfo/UsingTable.vue @@ -0,0 +1,126 @@ +<template> + <div> + <highcharts :options="chartOptions.line" /> + </div> +</template> + +<script> +import { setTime, Series, setCategories } from './helpers'; +import { Chart } from 'highcharts-vue'; + +export default { + components: { + highcharts: Chart, + }, + props: { + timeScale: { + type: String, + default: 'hour', + }, + warning: { + type: Number, + default: 70, + }, + nonNormal: { + type: Number, + default: 70, + }, + criticalStart: { + type: Number, + default: 70, + }, + }, + computed: { + chartOptions() { + return { + line: { + chart: { + type: 'line', + margin: [12, 50, 32, 60], + height: '320px', + }, + title: null, + xAxis: { + categories: setTime(60, 'hour'), + title: null, + labels: { + step: 6, + }, + minorGridLineColor: '#1A3E5B1A', + }, + yAxis: { + categories: setCategories(101, '%'), + min: 0, + max: 100, + title: null, + minTickInterval: 25, + minorGridLineColor: '#1A3E5B1A', + plotLines: [ + { + color: '#E11717', + dashStyle: 'solid', + value: this.warning, + zIndex: '1000', + width: 2, + label: { + text: 'Пороговое значение предупреждения, %', + align: 'right', + style: { + fontFamily: 'Inter, sans-serif', + fontSize: '12px', + fontStyle: 'normal', + fontWeight: '400', + lineHeight: '16px', + color: '#0C1C2999', + }, + }, + }, + ], + plotBands: [ + { + color: '#F0AC0C1A', + dashStyle: 'solid', + from: this.nonNormal, + to: this.criticalStart, + }, + { + color: '#FF41411A', + dashStyle: 'solid', + from: this.criticalStart, + to: this.warning, + }, + ], + }, + series: Series['temperature'].map((item) => ({ + ...item, + marker: { + enabled: false, + }, + })), + legend: { + enabled: false, + }, + tooltip: { + enabled: false, + crosshairs: false, + }, + plotOptions: { + series: { + showInLegend: true, + }, + }, + }, + }; + }, + }, +}; +</script> +<style lang="scss"> +.highcharts-credits { + display: none; +} + +.highcharts-plot-line-label { + transform: translate(-15px, 0) !important; +} +</style> diff --git a/src/views/PowerSupplies/DynamicInfo/VoltageTable.vue b/src/views/PowerSupplies/DynamicInfo/VoltageTable.vue new file mode 100644 index 00000000..b7b2a973 --- /dev/null +++ b/src/views/PowerSupplies/DynamicInfo/VoltageTable.vue @@ -0,0 +1,126 @@ +<template> + <div> + <highcharts :options="chartOptions.line" /> + </div> +</template> + +<script> +import { setTime, Series, setCategories } from './helpers'; +import { Chart } from 'highcharts-vue'; + +export default { + components: { + highcharts: Chart, + }, + props: { + timeScale: { + type: String, + default: 'hour', + }, + warning: { + type: Number, + default: 66, + }, + shutdown: { + type: Number, + default: 88, + }, + }, + computed: { + chartOptions() { + return { + line: { + chart: { + type: 'line', + margin: [12, 50, 32, 60], + height: '320px', + }, + title: null, + xAxis: { + categories: setTime(60, this.timeScale), + title: null, + labels: { + step: 6, + }, + minorGridLineColor: '#1A3E5B1A', + }, + yAxis: { + categories: setCategories(101, 'В'), + min: 0, + max: 100, + title: null, + minTickInterval: 25, + minorGridLineColor: '#1A3E5B1A', + plotLines: [ + { + color: '#E11717', + dashStyle: 'solid', + value: this.warning, + zIndex: '1000', + width: 2, + label: { + text: 'Пороговое значения предупреждение', + align: 'right', + style: { + fontFamily: 'Inter', + fontSize: '12px', + fontStyle: 'normal', + fontWeight: '400', + lineHeight: '16px', + color: '#0C1C2999', + }, + }, + }, + { + color: '#1A3E5B', + dashStyle: 'solid', + value: this.shutdown, + width: 2, + label: { + text: 'Пороговое значения отказ', + align: 'right', + style: { + fontFamily: 'Inter', + fontSize: '12px', + fontStyle: 'normal', + fontWeight: '400', + lineHeight: '16px', + color: '#0C1C2999', + }, + }, + }, + ], + }, + series: Series['voltage'].map((item) => ({ + ...item, + marker: { + enabled: false, + }, + })), + legend: { + enabled: false, + }, + tooltip: { + enabled: false, + crosshairs: false, + }, + plotOptions: { + series: { + showInLegend: true, + }, + }, + }, + }; + }, + }, +}; +</script> +<style lang="scss"> +.highcharts-credits { + display: none; +} + +.highcharts-plot-line-label { + transform: translate(-15px, 0) !important; +} +</style> diff --git a/src/views/PowerSupplies/DynamicInfo/helpers.js b/src/views/PowerSupplies/DynamicInfo/helpers.js new file mode 100644 index 00000000..f5d2aee7 --- /dev/null +++ b/src/views/PowerSupplies/DynamicInfo/helpers.js @@ -0,0 +1,1572 @@ +export const colors = [ + '#CB32F1', + '#F18638', + '#139BB9', + '#E1AB17', + '#175AE1', + '#13B937', +]; + +export const Series = { + temperature: [ + { + name: 'Sean', + data: [ + 10, + 10, + 10, + 30, + 10, + 10, + 10, + 37, + 10, + 10, + 10, + 10, + 10, + 25, + 10, + 10, + 10, + 10, + 10, + 10, + 10, + 10, + 10, + 10, + 10, + 10, + 10, + 10, + 10, + 10, + 10, + 10, + 10, + 10, + 35, + 10, + 10, + 10, + 10, + 10, + 45, + 10, + 10, + 10, + 10, + 10, + 10, + 10, + 10, + 10, + 10, + 10, + 10, + 50, + 10, + 10, + 10, + 10, + 10, + 10, + ], + color: '#CB32F1', + }, + { + name: 'Ivan', + data: [ + 11, + 11, + 11, + 30, + 11, + 11, + 11, + 11, + 57, + 11, + 11, + 11, + 11, + 25, + 11, + 11, + 11, + 11, + 11, + 11, + 11, + 11, + 11, + 11, + 11, + 61, + 11, + 11, + 11, + 11, + 11, + 11, + 11, + 11, + 31, + 11, + 11, + 11, + 11, + 11, + 11, + 11, + 21, + 11, + 11, + 11, + 11, + 11, + 11, + 11, + 11, + 11, + 11, + 51, + 11, + 11, + 11, + 11, + 11, + 11, + ], + color: '#175AE1', + }, + { + name: 'Brendan', + data: [ + 15, + 15, + 15, + 35, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 25, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 45, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 35, + 15, + 15, + 55, + 15, + 15, + 15, + 15, + 15, + 15, + ], + color: '#B98D13', + }, + { + name: 'Matteo', + data: [ + 21, + 21, + 21, + 51, + 21, + 21, + 21, + 21, + 21, + 21, + 21, + 21, + 21, + 40, + 21, + 21, + 21, + 21, + 21, + 21, + 21, + 21, + 21, + 21, + 21, + 21, + 21, + 21, + 21, + 21, + 21, + 21, + 21, + 35, + 21, + 21, + 21, + 21, + 21, + 21, + 21, + 21, + 21, + 21, + 21, + 21, + 53, + 21, + 21, + 30, + 21, + 21, + 21, + 21, + 21, + 21, + 21, + 21, + 21, + 21, + ], + color: '#13B937', + }, + { + name: 'Joan', + data: [ + 19, + 19, + 19, + 39, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 29, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 39, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 39, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 59, + 19, + 19, + 19, + 19, + 19, + 19, + ], + color: '#F18638', + }, + { + name: 'Avinash', + data: [ + 16, + 16, + 16, + 56, + 16, + 16, + 16, + 16, + 16, + 16, + 16, + 16, + 16, + 26, + 16, + 16, + 16, + 16, + 16, + 16, + 26, + 16, + 16, + 16, + 16, + 16, + 16, + 16, + 16, + 76, + 16, + 16, + 16, + 16, + 46, + 16, + 16, + 16, + 16, + 16, + 16, + 16, + 16, + 16, + 16, + 16, + 46, + 16, + 16, + 16, + 16, + 16, + 16, + 16, + 16, + 16, + 16, + 16, + 16, + 16, + ], + color: '#139BB9', + }, + ], + //////////////////////////////voltage//////////////// + voltage: [ + { + name: 'Sean', + data: [ + 16, + 16, + 16, + 46, + 16, + 16, + 16, + 16, + 16, + 16, + 16, + 16, + 16, + 26, + 16, + 16, + 16, + 16, + 16, + 16, + 26, + 16, + 16, + 16, + 16, + 16, + 16, + 16, + 16, + 56, + 16, + 26, + 16, + 16, + 36, + 16, + 16, + 16, + 16, + 16, + 16, + 16, + 16, + 16, + 16, + 16, + 46, + 16, + 16, + 16, + 16, + 16, + 16, + 16, + 36, + 16, + 16, + 16, + 16, + 16, + ], + color: '#CB32F1', + }, + { + name: 'Ivan', + data: [ + 11, + 11, + 11, + 44, + 11, + 11, + 11, + 11, + 11, + 11, + 11, + 11, + 11, + 21, + 11, + 11, + 11, + 11, + 11, + 11, + 21, + 11, + 31, + 11, + 11, + 11, + 11, + 11, + 11, + 55, + 11, + 21, + 11, + 11, + 31, + 11, + 11, + 11, + 11, + 11, + 11, + 11, + 11, + 31, + 11, + 11, + 41, + 11, + 11, + 11, + 21, + 11, + 11, + 11, + 35, + 11, + 11, + 11, + 11, + 11, + ], + color: '#175AE1', + }, + { + name: 'Brendan', + data: [ + 31, + 31, + 31, + 51, + 31, + 31, + 31, + 31, + 31, + 90, + 31, + 31, + 31, + 31, + 31, + 31, + 31, + 31, + 31, + 31, + 31, + 31, + 31, + 31, + 31, + 31, + 50, + 31, + 31, + 31, + 31, + 31, + 31, + 35, + 31, + 31, + 31, + 31, + 31, + 31, + 31, + 40, + 31, + 31, + 31, + 31, + 53, + 31, + 31, + 31, + 31, + 31, + 31, + 31, + 31, + 31, + 31, + 31, + 31, + 31, + ], + color: '#B98D13', + }, + { + name: 'Matteo', + data: [ + 21, + 21, + 21, + 51, + 21, + 21, + 21, + 21, + 21, + 40, + 21, + 21, + 21, + 21, + 21, + 21, + 21, + 21, + 21, + 21, + 21, + 21, + 21, + 21, + 21, + 21, + 50, + 21, + 21, + 21, + 21, + 21, + 21, + 35, + 21, + 21, + 21, + 21, + 21, + 21, + 21, + 60, + 21, + 21, + 21, + 10, + 53, + 21, + 21, + 30, + 21, + 21, + 21, + 21, + 21, + 21, + 21, + 21, + 21, + 21, + ], + color: '#13B937', + }, + { + name: 'Joan', + data: [ + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 39, + 19, + 19, + 39, + 19, + 19, + 19, + 29, + 19, + 19, + 59, + 19, + 19, + 69, + 19, + 19, + 19, + 19, + 29, + 19, + 19, + 49, + 19, + 19, + 59, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + ], + color: '#F18638', + }, + { + name: 'Avinash', + data: [ + 17, + 17, + 17, + 15, + 17, + 17, + 17, + 17, + 17, + 17, + 17, + 17, + 17, + 17, + 17, + 17, + 27, + 17, + 17, + 17, + 17, + 17, + 17, + 21, + 17, + 17, + 17, + 59, + 17, + 17, + 17, + 17, + 17, + 59, + 17, + 17, + 17, + 17, + 17, + 17, + 17, + 17, + 17, + 57, + 17, + 17, + 17, + 17, + 17, + 77, + 17, + 17, + 17, + 17, + 17, + 17, + 17, + 17, + 17, + 17, + ], + color: '#139BB9', + }, + ], + //////////////////////////////power//////////////// + power: [ + { + name: 'Sean', + data: [ + 15, + 15, + 45, + 15, + 65, + 15, + 75, + 15, + 15, + 15, + 55, + 15, + 25, + 15, + 45, + 15, + 55, + 15, + 75, + 15, + 35, + 15, + 55, + 15, + 75, + 15, + 85, + 15, + 15, + 45, + 15, + 15, + 45, + 15, + 45, + 15, + 15, + 65, + 15, + 45, + 15, + 25, + 15, + 45, + 15, + 65, + 15, + 35, + 35, + 35, + 15, + 55, + 15, + 15, + 35, + 15, + 25, + 15, + 35, + 15, + ], + color: '#CB32F1', + }, + { + name: 'Ivan', + data: [ + 62, + 12, + 72, + 12, + 12, + 12, + 42, + 12, + 12, + 12, + 52, + 12, + 22, + 12, + 42, + 12, + 52, + 12, + 72, + 12, + 52, + 12, + 62, + 12, + 72, + 12, + 82, + 12, + 12, + 42, + 12, + 12, + 52, + 12, + 42, + 12, + 12, + 62, + 12, + 42, + 12, + 22, + 12, + 42, + 12, + 62, + 12, + 12, + 32, + 12, + 62, + 12, + 52, + 12, + 32, + 12, + 22, + 12, + 32, + 12, + ], + color: '#175AE1', + }, + { + name: 'Brendan', + data: [ + 14, + 14, + 34, + 14, + 24, + 14, + 34, + 14, + 64, + 14, + 74, + 14, + 14, + 14, + 44, + 14, + 14, + 14, + 54, + 14, + 24, + 14, + 44, + 14, + 54, + 14, + 74, + 14, + 54, + 14, + 64, + 14, + 74, + 14, + 84, + 14, + 14, + 44, + 14, + 14, + 54, + 14, + 44, + 14, + 14, + 64, + 14, + 44, + 14, + 24, + 14, + 44, + 14, + 64, + 14, + 14, + 14, + 54, + 14, + 54, + ], + color: '#B98D13', + }, + { + name: 'Matteo', + data: [ + 24, + 14, + 44, + 14, + 64, + 14, + 64, + 14, + 34, + 14, + 54, + 14, + 14, + 34, + 14, + 24, + 14, + 34, + 14, + 64, + 14, + 74, + 14, + 14, + 14, + 44, + 14, + 14, + 14, + 54, + 14, + 14, + 14, + 44, + 14, + 54, + 14, + 74, + 14, + 54, + 14, + 64, + 14, + 74, + 14, + 84, + 14, + 94, + 14, + 54, + 4, + 54, + 14, + 44, + 14, + 44, + 64, + 14, + 44, + 14, + ], + color: '#13B937', + }, + { + name: 'Joan', + data: [ + 16, + 46, + 16, + 26, + 16, + 46, + 16, + 66, + 16, + 16, + 16, + 36, + 16, + 56, + 16, + 16, + 36, + 16, + 26, + 16, + 36, + 16, + 66, + 16, + 76, + 16, + 16, + 16, + 46, + 16, + 16, + 16, + 56, + 16, + 26, + 16, + 46, + 16, + 56, + 16, + 76, + 16, + 56, + 16, + 66, + 16, + 76, + 16, + 86, + 16, + 96, + 16, + 16, + 16, + 56, + 16, + 46, + 16, + 46, + 16, + ], + color: '#F18638', + }, + { + name: 'Avinash', + data: [ + 49, + 19, + 19, + 69, + 19, + 49, + 19, + 29, + 19, + 49, + 19, + 69, + 19, + 39, + 39, + 39, + 19, + 59, + 19, + 19, + 39, + 19, + 29, + 19, + 39, + 19, + 69, + 19, + 79, + 19, + 19, + 19, + 49, + 19, + 19, + 19, + 59, + 19, + 29, + 19, + 49, + 19, + 59, + 19, + 79, + 19, + 59, + 19, + 69, + 19, + 79, + 19, + 89, + 19, + 99, + 19, + 19, + 69, + 59, + 19, + ], + color: '#139BB9', + }, + ], +}; + +export const setTime = (count) => { + const arr = [...new Array(count)].map(() => ''); + for (let i = 0; i < arr.length; i++) { + arr[i] = `15:${String(i).padStart(2, '0')}`; + } + return arr; +}; + +export const setCategories = (count, desc) => { + const arr = [...new Array(count)].map((i, k) => `${k} ${desc}`); + return arr; +}; + +export const AccessoryData = { + temperatureTable: { + fields: [ + { + key: 'name', + label: 'Имя модуля', + thClass: 'bootstrap-fans-table__th semi-bold-12px', + tdClass: 'bootstrap-fans-table__td light-12px', + }, + { + key: 'currentTemperature', + label: 'Текущее, С°', + thClass: 'bootstrap-fans-table__th semi-bold-12px', + tdClass: 'bootstrap-fans-table__td light-12px', + }, + { + key: 'middleTemperature', + label: 'Среднее, С°', + thClass: 'bootstrap-fans-table__th semi-bold-12px', + tdClass: 'bootstrap-fans-table__td light-12px', + }, + { + key: 'minTemperature', + label: 'Минимальное, С°', + thClass: 'bootstrap-fans-table__th semi-bold-12px', + tdClass: 'bootstrap-fans-table__td light-12px', + }, + { + key: 'minDate', + label: 'Дата минимального', + thClass: 'bootstrap-fans-table__th semi-bold-12px', + tdClass: 'bootstrap-fans-table__td light-12px', + }, + { + key: 'maxTemperature', + label: 'Максимальное, С°', + thClass: 'bootstrap-fans-table__th semi-bold-12px', + tdClass: 'bootstrap-fans-table__td light-12px', + }, + { + key: 'maxDate', + label: 'Дата максимального', + thClass: 'bootstrap-fans-table__th semi-bold-12px', + tdClass: 'bootstrap-fans-table__td light-12px', + }, + ], + items: [ + { + name: 'Источник 1', + currentTemperature: 19, + middleTemperature: 40, + minTemperature: 31, + minDate: { time: '15:15', date: '11.11.2021' }, + maxTemperature: 88, + maxDate: { time: '10:26', date: '15.11.2021' }, + }, + { + name: 'Источник 2', + currentTemperature: 29, + middleTemperature: 40, + minTemperature: 20, + minDate: { time: '15:45', date: '11.11.2021' }, + maxTemperature: 76, + maxDate: { time: '16:59', date: '16.11.2021' }, + }, + { + name: 'Источник 3', + currentTemperature: 48, + middleTemperature: 46, + minTemperature: 31, + minDate: { time: '15:23', date: '11.11.2021' }, + maxTemperature: 69, + maxDate: { time: '15:26', date: '15.11.2021' }, + }, + { + name: 'Источник 4', + currentTemperature: 48, + middleTemperature: 45, + minTemperature: 5, + minDate: { time: '16:45', date: '25.11.2021' }, + maxTemperature: 75, + maxDate: { time: '11:26', date: '16.11.2021' }, + }, + { + name: 'Источник 5', + currentTemperature: 39, + middleTemperature: 44, + minTemperature: 30, + minDate: { time: '15:23', date: '11.11.2021' }, + maxTemperature: 80, + maxDate: { time: '15:26', date: '17.11.2021' }, + }, + { + name: 'Источник 6', + currentTemperature: 39, + middleTemperature: 44, + minTemperature: 5, + minDate: { time: '16:45', date: '25.11.2021' }, + maxTemperature: 80, + maxDate: { time: '15:26', date: '15.11.2021' }, + }, + ], + }, + usingTable: { + fields: [ + { + key: 'name', + label: 'Имя модуля', + thClass: 'bootstrap-fans-table__th semi-bold-12px', + tdClass: 'bootstrap-fans-table__td light-12px', + }, + { + key: 'currentTemperature', + label: 'Текущее, %', + thClass: 'bootstrap-fans-table__th semi-bold-12px', + tdClass: 'bootstrap-fans-table__td light-12px', + }, + { + key: 'middleTemperature', + label: 'Среднее, %', + thClass: 'bootstrap-fans-table__th semi-bold-12px', + tdClass: 'bootstrap-fans-table__td light-12px', + }, + { + key: 'minTemperature', + label: 'Минимальное, %', + thClass: 'bootstrap-fans-table__th semi-bold-12px', + tdClass: 'bootstrap-fans-table__td light-12px', + }, + { + key: 'minDate', + label: 'Дата минимального', + thClass: 'bootstrap-fans-table__th semi-bold-12px', + tdClass: 'bootstrap-fans-table__td light-12px', + }, + { + key: 'maxTemperature', + label: 'Максимальное, %', + thClass: 'bootstrap-fans-table__th semi-bold-12px', + tdClass: 'bootstrap-fans-table__td light-12px', + }, + { + key: 'maxDate', + label: 'Дата максимального', + thClass: 'bootstrap-fans-table__th semi-bold-12px', + tdClass: 'bootstrap-fans-table__td light-12px', + }, + ], + items: [ + { + name: 'Источник 1', + currentTemperature: 19, + middleTemperature: 40, + minTemperature: 31, + minDate: { time: '15:15', date: '11.11.2021' }, + maxTemperature: 88, + maxDate: { time: '10:26', date: '15.11.2021' }, + }, + { + name: 'Источник 2', + currentTemperature: 29, + middleTemperature: 40, + minTemperature: 20, + minDate: { time: '15:45', date: '11.11.2021' }, + maxTemperature: 76, + maxDate: { time: '16:59', date: '16.11.2021' }, + }, + { + name: 'Источник 3', + currentTemperature: 48, + middleTemperature: 46, + minTemperature: 31, + minDate: { time: '15:23', date: '11.11.2021' }, + maxTemperature: 69, + maxDate: { time: '15:26', date: '15.11.2021' }, + }, + { + name: 'Источник 4', + currentTemperature: 48, + middleTemperature: 45, + minTemperature: 5, + minDate: { time: '16:45', date: '25.11.2021' }, + maxTemperature: 75, + maxDate: { time: '11:26', date: '16.11.2021' }, + }, + { + name: 'Источник 5', + currentTemperature: 39, + middleTemperature: 44, + minTemperature: 30, + minDate: { time: '15:23', date: '11.11.2021' }, + maxTemperature: 80, + maxDate: { time: '15:26', date: '17.11.2021' }, + }, + { + name: 'Источник 6', + currentTemperature: 39, + middleTemperature: 44, + minTemperature: 5, + minDate: { time: '16:45', date: '25.11.2021' }, + maxTemperature: 80, + maxDate: { time: '15:26', date: '15.11.2021' }, + }, + ], + }, + voltageTable: { + fields: [ + { + key: 'name', + label: 'Имя модуля', + thClass: 'bootstrap-fans-table__th semi-bold-12px', + tdClass: 'bootstrap-fans-table__td light-12px', + }, + { + key: 'currentTemperature', + label: 'Текущее, В', + thClass: 'bootstrap-fans-table__th semi-bold-12px', + tdClass: 'bootstrap-fans-table__td light-12px', + }, + { + key: 'middleTemperature', + label: 'Среднее, В', + thClass: 'bootstrap-fans-table__th semi-bold-12px', + tdClass: 'bootstrap-fans-table__td light-12px', + }, + { + key: 'minTemperature', + label: 'Минимальное, В', + thClass: 'bootstrap-fans-table__th semi-bold-12px', + tdClass: 'bootstrap-fans-table__td light-12px', + }, + { + key: 'minDate', + label: 'Дата минимального', + thClass: 'bootstrap-fans-table__th semi-bold-12px', + tdClass: 'bootstrap-fans-table__td light-12px', + }, + { + key: 'maxTemperature', + label: 'Максимальное, В', + thClass: 'bootstrap-fans-table__th semi-bold-12px', + tdClass: 'bootstrap-fans-table__td light-12px', + }, + { + key: 'maxDate', + label: 'Дата максимального', + thClass: 'bootstrap-fans-table__th semi-bold-12px', + tdClass: 'bootstrap-fans-table__td light-12px', + }, + ], + items: [ + { + name: 'Источник 1', + currentTemperature: 19, + middleTemperature: 40, + minTemperature: 31, + minDate: { time: '15:15', date: '11.11.2021' }, + maxTemperature: 88, + maxDate: { time: '10:26', date: '15.11.2021' }, + }, + { + name: 'Источник 2', + currentTemperature: 29, + middleTemperature: 40, + minTemperature: 20, + minDate: { time: '15:45', date: '11.11.2021' }, + maxTemperature: 76, + maxDate: { time: '16:59', date: '16.11.2021' }, + }, + { + name: 'Источник 3', + currentTemperature: 48, + middleTemperature: 46, + minTemperature: 31, + minDate: { time: '15:23', date: '11.11.2021' }, + maxTemperature: 69, + maxDate: { time: '15:26', date: '15.11.2021' }, + }, + { + name: 'Источник 4', + currentTemperature: 48, + middleTemperature: 45, + minTemperature: 5, + minDate: { time: '16:45', date: '25.11.2021' }, + maxTemperature: 75, + maxDate: { time: '11:26', date: '16.11.2021' }, + }, + { + name: 'Источник 5', + currentTemperature: 39, + middleTemperature: 44, + minTemperature: 30, + minDate: { time: '15:23', date: '11.11.2021' }, + maxTemperature: 80, + maxDate: { time: '15:26', date: '17.11.2021' }, + }, + { + name: 'Источник 6', + currentTemperature: 39, + middleTemperature: 44, + minTemperature: 5, + minDate: { time: '16:45', date: '25.11.2021' }, + maxTemperature: 80, + maxDate: { time: '15:26', date: '15.11.2021' }, + }, + ], + }, + powerTable: { + fields: [ + { + key: 'name', + label: 'Имя модуля', + thClass: 'bootstrap-fans-table__th semi-bold-12px', + tdClass: 'bootstrap-fans-table__td light-12px', + }, + { + key: 'currentPower', + label: 'Текущее, Вт', + label2: '', + thClass: 'bootstrap-fans-table__th semi-bold-12px', + tdClass: 'bootstrap-fans-table__td light-12px', + }, + ], + items: [ + { + name: 'Источник 1', + currentPower: 91, + }, + { + name: 'Источник 2', + currentPower: 77, + }, + { + name: 'Источник 3', + currentPower: 76, + }, + { + name: 'Источник 4', + currentPower: 74, + }, + { + name: 'Источник 5', + currentPower: 73, + }, + { + name: 'Источник 6', + currentPower: 71, + }, + ], + }, +}; diff --git a/src/views/PowerSupplies/DynamicInfo/index.js b/src/views/PowerSupplies/DynamicInfo/index.js new file mode 100644 index 00000000..c45d5c89 --- /dev/null +++ b/src/views/PowerSupplies/DynamicInfo/index.js @@ -0,0 +1,2 @@ +import PowerDynamicPage from './PowerDynamicPage.vue'; +export default PowerDynamicPage; diff --git a/src/views/PowerSupplies/Specification/PowerStaticPage.vue b/src/views/PowerSupplies/Specification/PowerStaticPage.vue new file mode 100644 index 00000000..463e9ea2 --- /dev/null +++ b/src/views/PowerSupplies/Specification/PowerStaticPage.vue @@ -0,0 +1,154 @@ +<template> + <b-container + :style="{ display: 'flex', 'flex-direction': 'column' }" + fluid="xxl pt-0 m-0" + > + <page-title /> + <div class="main-container"> + <page-section class="bootstrap-table__section info_section"> + <span class="bold-16px">{{ $t('pageInventory.powerSources') }}</span> + </page-section> + <power-switch + :slots="memorySlots" + :switch-memory="switchMemorySlot" + :current-memory="currentMemorySlot" + /> + <page-section class="bootstrap-table__section"> + <b-table + responsive="md" + show-empty + class="bootstrap-rounded-table" + :items="items_slots" + :fields="fields" + :empty-text="$t('global.table.emptyMessage')" + > + <template #cell(value)="{ index, value }"> + <b-row v-if="index === 0"> + <b-col cols="11"> + <span> + {{ 'Работоспособность' }} + </span> + </b-col> + <b-col cols="1"> + <img + src="@/assets/images/fans-page/working.svg" + class="icon-chevron" + /> + </b-col> + </b-row> + <b-row v-else> + <b-col> + <span>{{ value }}</span> + </b-col> + </b-row> + </template> + </b-table> + </page-section> + </div> + </b-container> +</template> + +<script> +import PageTitle from '@/components/Global/PageTitle'; +import PageSection from '@/components/Global/PageSection'; +import PowerSwitch from './PowerSwitch'; + +export default { + components: { PageTitle, PageSection, PowerSwitch }, + data() { + return { + currentMemorySlot: 1, + memorySlots: [ + { id: 1, name: 'Источник 1' }, + { id: 2, name: 'Источник 2' }, + { id: 3, name: 'Источник 3' }, + { id: 4, name: 'Источник 4' }, + { id: 5, name: 'Источник 5' }, + { id: 6, name: 'Источник 6' }, + { id: 7, name: 'Источник 7' }, + { id: 8, name: 'Источник 8' }, + { id: 9, name: 'Источник 9' }, + { id: 10, name: 'Источник 10' }, + { id: 11, name: 'Источник 11' }, + { id: 12, name: 'Источник 12' }, + { id: 13, name: 'Источник 13' }, + { id: 14, name: 'Источник 14' }, + { id: 15, name: 'Источник 15' }, + ], + fields: [ + { + key: 'parametr', + label: 'Параметр', + formatter: this.dataFormatter, + thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg', + class: `bootstrap-rounded-table__column-first + memory-table-col-first`, + tdClass: 'regular-12px bootstrap-rounded-table__td', + }, + { + key: 'value', + label: 'Значение', + formatter: this.dataFormatter, + thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg', + class: 'bootstrap-rounded-table__column-last', + tdClass: 'regular-12px bootstrap-rounded-table__td', + }, + ], + items_slots: [ + { + parametr: 'Статус', + value: true, + }, + { + parametr: 'Название', + value: 'Источник 1', + }, + { + parametr: 'Версия прошивки', + value: '1.1.2257', + }, + { + parametr: 'Серийный номер', + value: '4789564478551', + }, + { + parametr: 'Номинальное напряжение', + value: '220 В', + }, + { + parametr: 'Номинальная мощность', + value: '400 Вт', + }, + { + parametr: 'Поддержка горячей замены', + value: 'Есть', + }, + ], + }; + }, + methods: { + switchMemorySlot(period) { + this.currentMemorySlot = period; + }, + }, +}; +</script> +<style lang="scss"> +.memory-table-col-first { + width: 50%; +} +</style> + +<style lang="scss" scoped> +.bootstrap-table__section { + margin-bottom: 24px; +} +.info_section { + margin-bottom: 0px; +} + +.bold-16px { + display: block; + margin: 25px 0 16px 0; +} +</style> diff --git a/src/views/PowerSupplies/Specification/PowerSwitch.vue b/src/views/PowerSupplies/Specification/PowerSwitch.vue new file mode 100644 index 00000000..824c2549 --- /dev/null +++ b/src/views/PowerSupplies/Specification/PowerSwitch.vue @@ -0,0 +1,112 @@ +<template> + <div + ref="content" + class="memory-switch" + @wheel.prevent="wheelItBetter($event)" + > + <span + v-for="item in slots" + :key="item.id" + class="medium-12px scale-item" + :class="{ 'switch-active': currentMemory === item.id }" + @click="switchMemory(item.id)" + >{{ $t(item.name) }}</span + > + <div + class="slider" + :style="`width: 68px; left: ${ + ((currentMemory ? currentMemory : 1) - 1) * 100 + 30 + }px`" + /> + </div> +</template> + +<script> +export default { + props: { + slots: { + type: Array, + default: null, + }, + currentMemory: { + type: Number, + default: 1, + }, + switchMemory: { + type: Function, + required: true, + }, + }, + data() { + return { + upHere: false, + container: this.$refs.content, + }; + }, + methods: { + wheelItBetter(event) { + if (event.deltaY < 0) { + this.$refs.content.scrollLeft -= 25; + } else { + this.$refs.content.scrollLeft += 25; + } + }, + }, +}; +</script> +<style lang="scss" scoped> +.memory-switch { + position: relative; + width: calc(100vw - 320px); + height: 50px; + padding: 0 16px 0 32px; + display: grid; + grid-auto-flow: column; + grid-auto-columns: 100px; + grid-template-rows: 32px; + align-items: end; + border-bottom: 1px solid $faint-secondary-primary-10; + overflow-x: auto; + white-space: nowrap; + &::-webkit-scrollbar { + height: 2px; + } + &::-webkit-scrollbar-thumb { + background: rgba(26, 62, 91, 0.2); + border-radius: 16px; + background-clip: content-box; + height: 10px; + } +} + +.switch-active { + color: $red-brand-primary; + transition: ease-in 0.15s; +} + +.slider { + position: absolute; + height: 0px; + border-bottom: 4px solid $red-brand-primary; + transition: ease-in 0.2s; + bottom: 0px; +} + +.scale-item { + display: inline-block; + width: 100px; + margin-right: 6px; + cursor: pointer; +} + +.date-picker { + display: flex; + align-items: center; + gap: 9px; +} + +.date-clear { + margin-left: auto; + cursor: pointer; +} +</style> diff --git a/src/views/PowerSupplies/Specification/index.js b/src/views/PowerSupplies/Specification/index.js new file mode 100644 index 00000000..14c4ef64 --- /dev/null +++ b/src/views/PowerSupplies/Specification/index.js @@ -0,0 +1,2 @@ +import PowerStaticPage from './PowerStaticPage.vue'; +export default PowerStaticPage; diff --git a/src/views/Processors/DynamicInfo/FrequencyTable.vue b/src/views/Processors/DynamicInfo/FrequencyTable.vue new file mode 100644 index 00000000..c749905d --- /dev/null +++ b/src/views/Processors/DynamicInfo/FrequencyTable.vue @@ -0,0 +1,107 @@ +<template> + <div> + <highcharts :options="chartOptions.line" /> + </div> +</template> + +<script> +import { setTime, Series, setCategories } from './helpers'; +import { Chart } from 'highcharts-vue'; + +export default { + components: { + highcharts: Chart, + }, + props: { + timeScale: { + type: String, + default: 'hour', + }, + warning: { + type: Number, + default: 70, + }, + }, + computed: { + chartOptions() { + return { + line: { + chart: { + type: 'line', + margin: [12, 50, 32, 60], + height: '320px', + }, + title: null, + xAxis: { + categories: setTime(60, 'hour'), + title: null, + labels: { + step: 6, + }, + minorGridLineColor: '#1A3E5B1A', + }, + yAxis: { + categories: setCategories(1001, 'Hz'), + min: 0, + max: 1000, + title: null, + minTickInterval: 250, + minorGridLineColor: '#1A3E5B1A', + labels: { + padding: 4, + }, + plotLines: [ + { + color: '#E11717', + dashStyle: 'solid', + value: this.warning, + zIndex: '1000', + width: 2, + label: { + text: 'Пороговое значение предупреждения', + align: 'right', + style: { + fontFamily: 'Inter, sans-serif', + fontSize: '12px', + fontStyle: 'normal', + fontWeight: '400', + lineHeight: '16px', + color: '#0C1C2999', + }, + }, + }, + ], + }, + series: Series['frequency'].map((item) => ({ + ...item, + marker: { + enabled: false, + }, + })), + legend: { + enabled: false, + }, + tooltip: { + enabled: false, + crosshairs: false, + }, + plotOptions: { + series: { + showInLegend: true, + }, + }, + }, + }; + }, + }, +}; +</script> +<style lang="scss"> +.highcharts-credits { + display: none; +} + +.highcharts-plot-line-label { + transform: translate(-15px, 0) !important; +} +</style> diff --git a/src/views/Processors/DynamicInfo/PowerTable.vue b/src/views/Processors/DynamicInfo/PowerTable.vue new file mode 100644 index 00000000..4ccb8aac --- /dev/null +++ b/src/views/Processors/DynamicInfo/PowerTable.vue @@ -0,0 +1,126 @@ +<template> + <div> + <highcharts :options="chartOptions.line" /> + </div> +</template> + +<script> +import { setTime, Series, setCategories } from './helpers'; +import { Chart } from 'highcharts-vue'; + +export default { + components: { + highcharts: Chart, + }, + props: { + timeScale: { + type: String, + default: 'hour', + }, + warning: { + type: Number, + default: 66, + }, + shutdown: { + type: Number, + default: 88, + }, + }, + computed: { + chartOptions() { + return { + line: { + chart: { + type: 'line', + margin: [12, 50, 32, 60], + height: '320px', + }, + title: null, + xAxis: { + categories: setTime(60, this.timeScale), + title: null, + labels: { + step: 6, + }, + minorGridLineColor: '#1A3E5B1A', + }, + yAxis: { + categories: setCategories(101, 'Вт'), + min: 0, + max: 100, + title: null, + minTickInterval: 25, + minorGridLineColor: '#1A3E5B1A', + plotLines: [ + { + color: '#E11717', + dashStyle: 'solid', + value: this.warning, + zIndex: '1000', + width: 2, + label: { + text: 'Пороговое значения предупреждение', + align: 'right', + style: { + fontFamily: 'Inter', + fontSize: '12px', + fontStyle: 'normal', + fontWeight: '400', + lineHeight: '16px', + color: '#0C1C2999', + }, + }, + }, + { + color: '#1A3E5B', + dashStyle: 'solid', + value: this.shutdown, + width: 2, + label: { + text: 'Пороговое значения отказ', + align: 'right', + style: { + fontFamily: 'Inter', + fontSize: '12px', + fontStyle: 'normal', + fontWeight: '400', + lineHeight: '16px', + color: '#0C1C2999', + }, + }, + }, + ], + }, + series: Series['power'].map((item) => ({ + ...item, + marker: { + enabled: false, + }, + })), + legend: { + enabled: false, + }, + tooltip: { + enabled: false, + crosshairs: false, + }, + plotOptions: { + series: { + showInLegend: true, + }, + }, + }, + }; + }, + }, +}; +</script> +<style lang="scss"> +.highcharts-credits { + display: none; +} + +.highcharts-plot-line-label { + transform: translate(-15px, 0) !important; +} +</style> diff --git a/src/views/Processors/DynamicInfo/ProcessorsDynamicPage.vue b/src/views/Processors/DynamicInfo/ProcessorsDynamicPage.vue new file mode 100644 index 00000000..9ba32a4d --- /dev/null +++ b/src/views/Processors/DynamicInfo/ProcessorsDynamicPage.vue @@ -0,0 +1,373 @@ +<template> + <b-container + :style="{ display: 'flex', 'flex-direction': 'column' }" + fluid="xxl pt-0 m-0" + > + <page-title /> + <div class="notification-time__container"> + <span class="semi-bold-12px">{{ + $t('global.ariaLabel.notificationTime') + }}</span> + <div class="form-control notification-time"> + <b-form-input + v-model="notificationInput" + type="number" + class="notification-time__input" + > + </b-form-input> + <button class="notification-button"> + <img + class="notification-time__icon" + src="@/assets/images/refresh.svg" + /> + </button> + </div> + </div> + <div class="main-container"> + <date-switch + :switch-time-scale="switchTimeScale" + :time-scale="timeScale" + /> + <!-- Temperature Section --> + <div class="page-collapse-decorator"> + <b-button + v-b-toggle.toggle-collapse_1 + variant="link" + class="collapse-button semi-bold-16px" + > + <img src="@/assets/images/temperature-icon.svg" /> + <span class="bold-16px">{{ $t('subHeader.temperature') }}</span> + <component :is="iconChevronUp" class="icon-expand" /> + </b-button> + <b-collapse id="toggle-collapse_1" class="nav-item__nav"> + <!-- Temperature Limit Inputs --> + <div class="limit-container"> + <div class="trmperature-limt"> + <img src="@/assets/images/labels/non-normal.svg" /> + <span class="semi-bold-12px">{{ + $t('tablesDescription.nonNormalMode') + }}</span> + <b-form-input + v-model="temperatureNonNormalInput" + type="number" + :min="0" + :max="temperatureCriticalInput" + class="form-control medium-12px" + > + </b-form-input> + </div> + <div class="trmperature-limt"> + <img src="@/assets/images/labels/critical.svg" /> + <span class="semi-bold-12px">{{ + $t('tablesDescription.criticalMode') + }}</span> + <b-form-input + v-model="temperatureCriticalInput" + type="number" + :min="temperatureNonNormalInput" + :max="temperatureWarningInput" + class="form-control medium-12px" + > + </b-form-input> + </div> + <div class="trmperature-limt"> + <img src="@/assets/images/labels/warning.svg" /> + <span class="semi-bold-12px">{{ + $t('tablesDescription.temperatureWarning') + }}</span> + <b-form-input + v-model="temperatureWarningInput" + type="number" + :min="temperatureCriticalInput" + :max="100" + class="form-control medium-12px" + > + </b-form-input> + </div> + <b-button + class="save-button" + variant="primary" + @click="updateTemperature" + > + {{ $t('global.action.save') }} + </b-button> + </div> + <!-- Temperature Tables --> + <temperature-table + :time-scale="timeScale" + :warning="temperatureWarning" + :non-normal="temperatureNonNormal" + :critical-start="temperatureCritical" + /> + <accessory-table :records="accessoryData.temperatureTable" /> + </b-collapse> + </div> + <!-- Frequency Section --> + <div class="page-collapse-decorator"> + <b-button + v-b-toggle.toggle-collapse_2 + variant="link" + class="collapse-button semi-bold-16px" + > + <img src="@/assets/images/frequency-icon.svg" /> + <span class="bold-16px">{{ $t('subHeader.frequency') }}</span> + <component :is="iconChevronUp" class="icon-expand" /> + </b-button> + <b-collapse id="toggle-collapse_2" class="nav-item__nav"> + <div class="limit-container"> + <div class="frequency-limt"> + <img src="@/assets/images/labels/warning.svg" /> + <span class="semi-bold-12px">{{ + $t('tablesDescription.frequencyWarning') + }}</span> + <b-form-input + v-model="frequencyWarningInput" + :min="0" + :max="1000" + type="number" + class="form-control medium-12px" + > + </b-form-input> + </div> + <b-button + class="save-button" + variant="primary" + @click="updateFrequency" + > + {{ $t('global.action.save') }} + </b-button> + </div> + <!-- Frequency Table --> + <frequency-table + :time-scale="timeScale" + :warning="frequencyWarning" + /> + <accessory-table :records="accessoryData.frequencyTable" /> + <!-- <frequency-table /> --> + </b-collapse> + </div> + <!-- Power Consumption Section --> + <div class="page-collapse-decorator"> + <b-button + v-b-toggle.toggle-collapse_3 + variant="link" + class="collapse-button semi-bold-16px" + > + <img src="@/assets/images/power-icon.svg" /> + <span class="bold-16px">{{ $t('subHeader.powerConsumption') }}</span> + <component :is="iconChevronUp" class="icon-expand" /> + </b-button> + <b-collapse id="toggle-collapse_3" class="nav-item__nav"> + <div class="limit-container"> + <div class="frequency-limt"> + <img src="@/assets/images/labels/warning.svg" /> + <span class="semi-bold-12px">{{ + $t('tablesDescription.powerWarning') + }}</span> + <b-form-input + v-model="powerWarningInput" + type="number" + :min="0" + :max="100" + class="form-control medium-12px" + > + </b-form-input> + </div> + <div class="frequency-limt"> + <img src="@/assets/images/labels/shutdown.svg" /> + <span class="semi-bold-12px">{{ + $t('tablesDescription.powerShutdown') + }}</span> + <b-form-input + v-model="powerShutdownInput" + type="number" + :min="0" + :max="100" + class="form-control medium-12px" + > + </b-form-input> + </div> + <b-button + class="save-button" + variant="primary" + @click="updatePower" + > + {{ $t('global.action.save') }} + </b-button> + </div> + <!-- Power Consumption Table --> + <power-table + :time-scale="timeScale" + :warning="powerWarning" + :shutdown="powerShutdown" + /> + <!-- <power-table /> --> + <accessory-table :records="accessoryData.powerTable" /> + </b-collapse> + </div> + <!-- <page-section class="bootstrap-table__section"> </page-section> --> + </div> + </b-container> +</template> +<script> +import PageTitle from '@/components/Global/PageTitle'; +import PageSection from '@/components/Global/PageSection'; +import DateSwitch from '@/components/Global/SilaComponents/DateSwitch'; +import FrequencyTable from './FrequencyTable'; +import PowerTable from './PowerTable'; +import TemperatureTable from './TemperatureTable'; +import AccessoryTable from '@/components/Global/SilaComponents/Tables/AccessoryTablePower'; + +import iconChevronUp from '@carbon/icons-vue/es/chevron--up/16'; + +import { AccessoryData } from './helpers'; + +export default { + components: { + PageTitle, + PageSection, + DateSwitch, + FrequencyTable, + TemperatureTable, + PowerTable, + AccessoryTable, + }, + data() { + return { + timeScale: 'hour', + temperatureWarning: 72, + temperatureWarningInput: 72, + temperatureNonNormal: 44, + temperatureNonNormalInput: 44, + temperatureCritical: 55, + temperatureCriticalInput: 55, + frequencyWarning: 660, + frequencyWarningInput: 660, + powerWarning: 66, + powerWarningInput: 66, + powerShutdown: 88, + powerShutdownInput: 88, + notificationInput: 42, + accessoryData: AccessoryData, + iconChevronUp: iconChevronUp, + }; + }, + methods: { + switchTimeScale(period) { + this.timeScale = period; + }, + updateTemperature() { + this.temperatureWarning = +this.temperatureWarningInput; + this.temperatureNonNormal = +this.temperatureNonNormalInput; + this.temperatureCritical = +this.temperatureCriticalInput; + }, + updateFrequency() { + this.frequencyWarning = +this.frequencyWarningInput; + }, + updatePower() { + this.powerWarning = +this.powerWarningInput; + this.powerShutdown = +this.powerShutdownInput; + }, + }, +}; +</script> +<style lang="scss" scoped> +//nav items style +.nav-item, +.nav-link { + padding: 0; +} +.nav-item { + list-style-type: none; +} + +a { + color: $text-primary !important; + &:hover { + color: $text-primary !important; + } +} + +.notification-time__container { + position: absolute; + top: calc(#{$header-height}); + right: 0px; + display: flex; + flex-flow: row nowrap; + justify-content: flex-start; + align-items: center; +} + +.notification-time { + display: flex; + flex-flow: row nowrap; + justify-content: flex-start; + align-items: center; + border: none; + box-shadow: none; + border-radius: 8px; + margin: 12px 32px 12px 8px; + width: 236px; + height: 40px; + z-index: 1001; +} + +.notification-time__icon { + width: 20px; + height: 20px; +} + +.notification-time__input { + border: none; + background: none; + box-shadow: none; +} + +.notification-button { + border: none; + background: none; +} + +.semi-bold-12px { + z-index: 1001; +} +// temperature limit comtainer +.limit-container { + height: 85px; + width: 100%; + padding: 0 32px 10px 32px; + display: flex; + flex-flow: row nowrap; + justify-content: flex-start; + align-items: flex-end; + gap: 24px; +} + +.trmperature-limt { + height: 60px; + width: 100%; + max-width: 270px; + display: flex; + align-items: baseline; + flex-flow: row wrap; + gap: 8px; +} + +.form-control { + height: 36px; +} +.save-button { + width: 151px; + height: 36px; +} + +.frequency-limt { + height: 60px; + width: 100%; + max-width: 288px; + display: flex; + align-items: baseline; + flex-flow: row wrap; + gap: 8px; +} +</style> diff --git a/src/views/Processors/DynamicInfo/TemperatureTable.vue b/src/views/Processors/DynamicInfo/TemperatureTable.vue new file mode 100644 index 00000000..f9c149c3 --- /dev/null +++ b/src/views/Processors/DynamicInfo/TemperatureTable.vue @@ -0,0 +1,126 @@ +<template> + <div> + <highcharts :options="chartOptions.line" /> + </div> +</template> + +<script> +import { setTime, Series, setCategories } from './helpers'; +import { Chart } from 'highcharts-vue'; + +export default { + components: { + highcharts: Chart, + }, + props: { + timeScale: { + type: String, + default: 'hour', + }, + warning: { + type: Number, + default: 70, + }, + nonNormal: { + type: Number, + default: 70, + }, + criticalStart: { + type: Number, + default: 70, + }, + }, + computed: { + chartOptions() { + return { + line: { + chart: { + type: 'line', + margin: [12, 50, 32, 60], + height: '320px', + }, + title: null, + xAxis: { + categories: setTime(60, 'hour'), + title: null, + labels: { + step: 6, + }, + minorGridLineColor: '#1A3E5B1A', + }, + yAxis: { + categories: setCategories(101, 'С°'), + min: 0, + max: 100, + title: null, + minTickInterval: 25, + minorGridLineColor: '#1A3E5B1A', + plotLines: [ + { + color: '#E11717', + dashStyle: 'solid', + value: this.warning, + zIndex: '1000', + width: 2, + label: { + text: 'Пороговое значение предупреждения, С°', + align: 'right', + style: { + fontFamily: 'Inter, sans-serif', + fontSize: '12px', + fontStyle: 'normal', + fontWeight: '400', + lineHeight: '16px', + color: '#0C1C2999', + }, + }, + }, + ], + plotBands: [ + { + color: '#F0AC0C1A', + dashStyle: 'solid', + from: this.nonNormal, + to: this.criticalStart, + }, + { + color: '#FF41411A', + dashStyle: 'solid', + from: this.criticalStart, + to: this.warning, + }, + ], + }, + series: Series['temperature'].map((item) => ({ + ...item, + marker: { + enabled: false, + }, + })), + legend: { + enabled: false, + }, + tooltip: { + enabled: false, + crosshairs: false, + }, + plotOptions: { + series: { + showInLegend: true, + }, + }, + }, + }; + }, + }, +}; +</script> +<style lang="scss"> +.highcharts-credits { + display: none; +} + +.highcharts-plot-line-label { + transform: translate(-15px, 0) !important; +} +</style> diff --git a/src/views/Processors/DynamicInfo/helpers.js b/src/views/Processors/DynamicInfo/helpers.js new file mode 100644 index 00000000..bc62bfa0 --- /dev/null +++ b/src/views/Processors/DynamicInfo/helpers.js @@ -0,0 +1,1422 @@ +export const colors = [ + '#CB32F1', + '#F18638', + '#139BB9', + '#E1AB17', + '#175AE1', + '#13B937', +]; + +export const Series = { + temperature: [ + { + name: 'Sean', + data: [ + 10, + 10, + 10, + 30, + 10, + 10, + 10, + 37, + 10, + 10, + 10, + 10, + 10, + 25, + 10, + 10, + 10, + 10, + 10, + 10, + 10, + 10, + 10, + 10, + 10, + 10, + 10, + 10, + 10, + 10, + 10, + 10, + 10, + 10, + 35, + 10, + 10, + 10, + 10, + 10, + 45, + 10, + 10, + 10, + 10, + 10, + 10, + 10, + 10, + 10, + 10, + 10, + 10, + 50, + 10, + 10, + 10, + 10, + 10, + 10, + ], + color: '#CB32F1', + }, + { + name: 'Ivan', + data: [ + 11, + 11, + 11, + 30, + 11, + 11, + 11, + 11, + 57, + 11, + 11, + 11, + 11, + 25, + 11, + 11, + 11, + 11, + 11, + 11, + 11, + 11, + 11, + 11, + 11, + 61, + 11, + 11, + 11, + 11, + 11, + 11, + 11, + 11, + 31, + 11, + 11, + 11, + 11, + 11, + 11, + 11, + 21, + 11, + 11, + 11, + 11, + 11, + 11, + 11, + 11, + 11, + 11, + 51, + 11, + 11, + 11, + 11, + 11, + 11, + ], + color: '#175AE1', + }, + { + name: 'Brendan', + data: [ + 15, + 15, + 15, + 35, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 25, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 45, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 35, + 15, + 15, + 55, + 15, + 15, + 15, + 15, + 15, + 15, + ], + color: '#B98D13', + }, + { + name: 'Matteo', + data: [ + 21, + 21, + 21, + 51, + 21, + 21, + 21, + 21, + 21, + 21, + 21, + 21, + 21, + 40, + 21, + 21, + 21, + 21, + 21, + 21, + 21, + 21, + 21, + 21, + 21, + 21, + 21, + 21, + 21, + 21, + 21, + 21, + 21, + 35, + 21, + 21, + 21, + 21, + 21, + 21, + 21, + 21, + 21, + 21, + 21, + 21, + 53, + 21, + 21, + 30, + 21, + 21, + 21, + 21, + 21, + 21, + 21, + 21, + 21, + 21, + ], + color: '#13B937', + }, + { + name: 'Joan', + data: [ + 19, + 19, + 19, + 39, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 29, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 39, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 39, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 59, + 19, + 19, + 19, + 19, + 19, + 19, + ], + color: '#F18638', + }, + { + name: 'Avinash', + data: [ + 16, + 16, + 16, + 56, + 16, + 16, + 16, + 16, + 16, + 16, + 16, + 16, + 16, + 26, + 16, + 16, + 16, + 16, + 16, + 16, + 26, + 16, + 16, + 16, + 16, + 16, + 16, + 16, + 16, + 76, + 16, + 16, + 16, + 16, + 46, + 16, + 16, + 16, + 16, + 16, + 16, + 16, + 16, + 16, + 16, + 16, + 46, + 16, + 16, + 16, + 16, + 16, + 16, + 16, + 16, + 16, + 16, + 16, + 16, + 16, + ], + color: '#139BB9', + }, + ], + //////////////////////////////frequency//////////////// + frequency: [ + { + name: 'Sean', + data: [ + 100, + 100, + 450, + 100, + 100, + 100, + 100, + 137, + 100, + 100, + 100, + 100, + 100, + 100, + 100, + 100, + 100, + 100, + 125, + 100, + 100, + 100, + 100, + 100, + 100, + 100, + 100, + 100, + 100, + 100, + 100, + 100, + 100, + 100, + 100, + 100, + 100, + 100, + 100, + 135, + 100, + 100, + 100, + 100, + 100, + 145, + 100, + 100, + 360, + 100, + 100, + 450, + 100, + 100, + 100, + 100, + 100, + 100, + 150, + 100, + ], + color: '#CB32F1', + }, + { + name: 'Ivan', + data: [ + 120, + 120, + 120, + 140, + 120, + 157, + 120, + 120, + 120, + 210, + 120, + 125, + 120, + 120, + 120, + 350, + 120, + 120, + 120, + 120, + 120, + 590, + 120, + 120, + 120, + 120, + 450, + 120, + 120, + 120, + 120, + 120, + 125, + 120, + 120, + 120, + 120, + 120, + 162, + 120, + 120, + 120, + 120, + 120, + 220, + 120, + 120, + 120, + 120, + 120, + 360, + 120, + 210, + 120, + 200, + 120, + 120, + 120, + 120, + 120, + ], + color: '#175AE1', + }, + { + name: 'Brendan', + data: [ + 110, + 110, + 110, + 450, + 110, + 110, + 110, + 157, + 110, + 110, + 110, + 110, + 110, + 165, + 110, + 110, + 110, + 110, + 110, + 310, + 110, + 110, + 110, + 590, + 110, + 110, + 175, + 110, + 110, + 110, + 110, + 110, + 110, + 110, + 110, + 110, + 110, + 110, + 110, + 110, + 152, + 110, + 310, + 110, + 110, + 210, + 110, + 110, + 110, + 110, + 110, + 110, + 360, + 110, + 110, + 110, + 210, + 110, + 110, + 110, + ], + color: '#B98D13', + }, + { + name: 'Matteo', + data: [ + 221, + 221, + 221, + 251, + 221, + 221, + 221, + 221, + 221, + 590, + 221, + 221, + 421, + 221, + 221, + 221, + 221, + 221, + 221, + 221, + 221, + 221, + 221, + 221, + 221, + 221, + 450, + 221, + 221, + 221, + 221, + 421, + 221, + 235, + 221, + 221, + 221, + 221, + 221, + 421, + 221, + 360, + 221, + 221, + 221, + 210, + 253, + 221, + 221, + 230, + 221, + 221, + 221, + 590, + 221, + 221, + 221, + 221, + 221, + 221, + ], + color: '#13B937', + }, + { + name: 'Joan', + data: [ + 159, + 159, + 159, + 159, + 159, + 159, + 159, + 159, + 159, + 159, + 159, + 159, + 159, + 590, + 159, + 159, + 159, + 159, + 159, + 159, + 159, + 159, + 159, + 159, + 159, + 159, + 159, + 159, + 159, + 159, + 159, + 159, + 159, + 159, + 159, + 159, + 159, + 159, + 159, + 590, + 159, + 159, + 159, + 159, + 159, + 159, + 159, + 159, + 159, + 159, + 159, + 159, + 159, + 159, + 159, + 159, + 159, + 159, + 159, + 159, + ], + color: '#F18638', + }, + { + name: 'Avinash', + data: [ + 176, + 176, + 176, + 156, + 176, + 176, + 176, + 176, + 176, + 176, + 176, + 176, + 176, + 176, + 176, + 176, + 276, + 176, + 176, + 176, + 176, + 176, + 176, + 210, + 176, + 176, + 176, + 590, + 176, + 176, + 176, + 176, + 176, + 590, + 176, + 176, + 176, + 176, + 176, + 176, + 176, + 176, + 176, + 570, + 176, + 176, + 176, + 176, + 176, + 770, + 176, + 176, + 176, + 176, + 176, + 176, + 176, + 176, + 176, + 176, + ], + color: '#139BB9', + }, + ], + //////////////////////////////power//////////////// + power: [ + { + name: 'Sean', + data: [ + 15, + 15, + 45, + 15, + 65, + 15, + 75, + 15, + 15, + 15, + 55, + 15, + 25, + 15, + 45, + 15, + 55, + 15, + 75, + 15, + 35, + 15, + 55, + 15, + 75, + 15, + 85, + 15, + 15, + 45, + 15, + 15, + 45, + 15, + 45, + 15, + 15, + 65, + 15, + 45, + 15, + 25, + 15, + 45, + 15, + 65, + 15, + 35, + 35, + 35, + 15, + 55, + 15, + 15, + 35, + 15, + 25, + 15, + 35, + 15, + ], + color: '#CB32F1', + }, + { + name: 'Ivan', + data: [ + 62, + 12, + 72, + 12, + 12, + 12, + 42, + 12, + 12, + 12, + 52, + 12, + 22, + 12, + 42, + 12, + 52, + 12, + 72, + 12, + 52, + 12, + 62, + 12, + 72, + 12, + 82, + 12, + 12, + 42, + 12, + 12, + 52, + 12, + 42, + 12, + 12, + 62, + 12, + 42, + 12, + 22, + 12, + 42, + 12, + 62, + 12, + 12, + 32, + 12, + 62, + 12, + 52, + 12, + 32, + 12, + 22, + 12, + 32, + 12, + ], + color: '#175AE1', + }, + { + name: 'Brendan', + data: [ + 14, + 14, + 34, + 14, + 24, + 14, + 34, + 14, + 64, + 14, + 74, + 14, + 14, + 14, + 44, + 14, + 14, + 14, + 54, + 14, + 24, + 14, + 44, + 14, + 54, + 14, + 74, + 14, + 54, + 14, + 64, + 14, + 74, + 14, + 84, + 14, + 14, + 44, + 14, + 14, + 54, + 14, + 44, + 14, + 14, + 64, + 14, + 44, + 14, + 24, + 14, + 44, + 14, + 64, + 14, + 14, + 14, + 54, + 14, + 54, + ], + color: '#B98D13', + }, + { + name: 'Matteo', + data: [ + 24, + 14, + 44, + 14, + 64, + 14, + 64, + 14, + 34, + 14, + 54, + 14, + 14, + 34, + 14, + 24, + 14, + 34, + 14, + 64, + 14, + 74, + 14, + 14, + 14, + 44, + 14, + 14, + 14, + 54, + 14, + 14, + 14, + 44, + 14, + 54, + 14, + 74, + 14, + 54, + 14, + 64, + 14, + 74, + 14, + 84, + 14, + 94, + 14, + 54, + 4, + 54, + 14, + 44, + 14, + 44, + 64, + 14, + 44, + 14, + ], + color: '#13B937', + }, + { + name: 'Joan', + data: [ + 16, + 46, + 16, + 26, + 16, + 46, + 16, + 66, + 16, + 16, + 16, + 36, + 16, + 56, + 16, + 16, + 36, + 16, + 26, + 16, + 36, + 16, + 66, + 16, + 76, + 16, + 16, + 16, + 46, + 16, + 16, + 16, + 56, + 16, + 26, + 16, + 46, + 16, + 56, + 16, + 76, + 16, + 56, + 16, + 66, + 16, + 76, + 16, + 86, + 16, + 96, + 16, + 16, + 16, + 56, + 16, + 46, + 16, + 46, + 16, + ], + color: '#F18638', + }, + { + name: 'Avinash', + data: [ + 49, + 19, + 19, + 69, + 19, + 49, + 19, + 29, + 19, + 49, + 19, + 69, + 19, + 39, + 39, + 39, + 19, + 59, + 19, + 19, + 39, + 19, + 29, + 19, + 39, + 19, + 69, + 19, + 79, + 19, + 19, + 19, + 49, + 19, + 19, + 19, + 59, + 19, + 29, + 19, + 49, + 19, + 59, + 19, + 79, + 19, + 59, + 19, + 69, + 19, + 79, + 19, + 89, + 19, + 99, + 19, + 19, + 69, + 59, + 19, + ], + color: '#139BB9', + }, + ], +}; + +export const setTime = (count) => { + const arr = [...new Array(count)].map(() => ''); + for (let i = 0; i < arr.length; i++) { + arr[i] = `15:${String(i).padStart(2, '0')}`; + } + return arr; +}; + +export const setCategories = (count, desc) => { + const arr = [...new Array(count)].map((i, k) => `${k} ${desc}`); + return arr; +}; + +export const AccessoryData = { + temperatureTable: { + fields: [ + { + key: 'name', + label: 'Имя модуля', + thClass: 'bootstrap-fans-table__th semi-bold-12px', + tdClass: 'bootstrap-fans-table__td light-12px', + }, + { + key: 'currentTemperature', + label: 'Текущее, С°', + thClass: 'bootstrap-fans-table__th semi-bold-12px', + tdClass: 'bootstrap-fans-table__td light-12px', + }, + { + key: 'middleTemperature', + label: 'Среднее, С°', + thClass: 'bootstrap-fans-table__th semi-bold-12px', + tdClass: 'bootstrap-fans-table__td light-12px', + }, + { + key: 'minTemperature', + label: 'Минимальное, С°', + thClass: 'bootstrap-fans-table__th semi-bold-12px', + tdClass: 'bootstrap-fans-table__td light-12px', + }, + { + key: 'minDate', + label: 'Дата минимального', + thClass: 'bootstrap-fans-table__th semi-bold-12px', + tdClass: 'bootstrap-fans-table__td light-12px', + }, + { + key: 'maxTemperature', + label: 'Максимальное, С°', + thClass: 'bootstrap-fans-table__th semi-bold-12px', + tdClass: 'bootstrap-fans-table__td light-12px', + }, + { + key: 'maxDate', + label: 'Дата максимального', + thClass: 'bootstrap-fans-table__th semi-bold-12px', + tdClass: 'bootstrap-fans-table__td light-12px', + }, + ], + items: [ + { + name: 'Процессор 1', + currentTemperature: 19, + middleTemperature: 40, + minTemperature: 31, + minDate: { time: '15:15', date: '11.11.2021' }, + maxTemperature: 88, + maxDate: { time: '10:26', date: '15.11.2021' }, + }, + { + name: 'Процессор 2', + currentTemperature: 29, + middleTemperature: 40, + minTemperature: 20, + minDate: { time: '15:45', date: '11.11.2021' }, + maxTemperature: 76, + maxDate: { time: '16:59', date: '16.11.2021' }, + }, + { + name: 'Процессор 3', + currentTemperature: 48, + middleTemperature: 46, + minTemperature: 31, + minDate: { time: '15:23', date: '11.11.2021' }, + maxTemperature: 69, + maxDate: { time: '15:26', date: '15.11.2021' }, + }, + { + name: 'Процессор 4', + currentTemperature: 48, + middleTemperature: 45, + minTemperature: 5, + minDate: { time: '16:45', date: '25.11.2021' }, + maxTemperature: 75, + maxDate: { time: '11:26', date: '16.11.2021' }, + }, + { + name: 'Процессор 5', + currentTemperature: 39, + middleTemperature: 44, + minTemperature: 30, + minDate: { time: '15:23', date: '11.11.2021' }, + maxTemperature: 80, + maxDate: { time: '15:26', date: '17.11.2021' }, + }, + { + name: 'Процессор 6', + currentTemperature: 39, + middleTemperature: 44, + minTemperature: 5, + minDate: { time: '16:45', date: '25.11.2021' }, + maxTemperature: 80, + maxDate: { time: '15:26', date: '15.11.2021' }, + }, + ], + }, + frequencyTable: { + fields: [ + { + key: 'name', + label: 'Имя модуля', + thClass: 'bootstrap-fans-table__th semi-bold-12px', + tdClass: 'bootstrap-fans-table__td light-12px', + }, + { + key: 'currentFrequency', + label: 'Текущее, Hz', + thClass: 'bootstrap-fans-table__th semi-bold-12px', + tdClass: 'bootstrap-fans-table__td light-12px', + }, + { + key: 'baseFrequency', + label: 'Базовое, Hz', + thClass: 'bootstrap-fans-table__th semi-bold-12px', + tdClass: 'bootstrap-fans-table__td light-12px', + }, + ], + items: [ + { + name: 'Процессор 1', + currentFrequency: 600, + baseFrequency: 400, + }, + { + name: 'Процессор 2', + currentFrequency: 500, + baseFrequency: 470, + }, + { + name: 'Процессор 3', + currentFrequency: 500, + baseFrequency: 450, + }, + { + name: 'Процессор 4', + currentFrequency: 500, + baseFrequency: 470, + }, + { + name: 'Процессор 5', + currentFrequency: 600, + baseFrequency: 470, + }, + { + name: 'Процессор 6', + currentFrequency: 500, + baseFrequency: 400, + }, + ], + }, + powerTable: { + fields: [ + { + key: 'name', + label: 'Имя модуля', + thClass: 'bootstrap-fans-table__th semi-bold-12px', + tdClass: 'bootstrap-fans-table__td light-12px', + }, + { + key: 'currentPower', + label: 'Текущее, Вт', + label2: '', + thClass: 'bootstrap-fans-table__th semi-bold-12px', + tdClass: 'bootstrap-fans-table__td light-12px', + }, + ], + items: [ + { + name: 'Процессор 1', + currentPower: 91, + }, + { + name: 'Процессор 2', + currentPower: 77, + }, + { + name: 'Процессор 3', + currentPower: 76, + }, + { + name: 'Процессор 4', + currentPower: 74, + }, + { + name: 'Процессор 5', + currentPower: 73, + }, + { + name: 'Процессор 6', + currentPower: 71, + }, + ], + }, +}; diff --git a/src/views/Processors/DynamicInfo/index.js b/src/views/Processors/DynamicInfo/index.js new file mode 100644 index 00000000..121c0316 --- /dev/null +++ b/src/views/Processors/DynamicInfo/index.js @@ -0,0 +1,2 @@ +import ProcessorsDynamicPage from './ProcessorsDynamicPage.vue'; +export default ProcessorsDynamicPage; diff --git a/src/views/Processors/Specification/AcceleratorSpecificationTable.vue b/src/views/Processors/Specification/AcceleratorSpecificationTable.vue new file mode 100644 index 00000000..2baa7d5d --- /dev/null +++ b/src/views/Processors/Specification/AcceleratorSpecificationTable.vue @@ -0,0 +1,194 @@ +<template> + <b-table + responsive="md" + show-empty + class="bootstrap-rounded-table" + :items="accelerators" + :fields="fields" + > + <template #cell(expandRow)=""> + <b-button + variant="link" + data-test-id="hardwareStatus-button-expandAccelerators" + :title="expandRowLabel" + > + <icon-chevron /> + <span class="sr-only">{{ expandRowLabel }}</span> + </b-button> + </template> + <template #cell(status)="{ value }"> + <div v-if="value" class="fans-table-col-first__cell"> + <img class="status__img" src="@/assets/images/fans-page/working.svg" /> + <span> + {{ $t('fansPage.inWork') }} + </span> + </div> + <div v-else class="fans-table-col-first__cell"> + <img + class="status__img" + src="@/assets/images/fans-page/notWorking.svg" + /> + <span> + {{ $t('fansPage.notWorking') }} + </span> + </div> + </template> + </b-table> +</template> + +<script> +import TableRowExpandMixin, { + expandRowLabel, +} from '@/components/Mixins/TableRowExpandMixin'; +import IconChevron from '@carbon/icons-vue/es/chevron--down/20'; +import BVToastMixin from '@/components/Mixins/BVToastMixin'; +import DataFormatterMixin from '@/components/Mixins/DataFormatterMixin'; + +import { Accelerators } from './mock'; +export default { + components: { IconChevron }, + mixins: [BVToastMixin, TableRowExpandMixin, DataFormatterMixin], + data() { + return { + isBusy: true, + isAddersСolon: false, + accelerators: Accelerators, + fields: [ + { + key: 'expandRow', + label: '', + thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg', + class: `bootstrap-rounded-table__without-border + fans-table-col-expand`, + tdClass: 'table-row-expand bootstrap-rounded-table__td', + sortable: false, + }, + { + key: 'status', + label: 'Статус', + formatter: this.dataFormatter, + thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg', + class: `bootstrap-rounded-table__without-border + fans-table-col-first`, + tdClass: 'regular-12px bootstrap-rounded-table__td', + }, + { + key: 'name', + label: 'Имя', + formatter: this.dataFormatter, + thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg', + class: `bootstrap-rounded-table__without-border + fans-table-col-third`, + tdClass: 'regular-12px bootstrap-rounded-table__td', + }, + { + key: 'slot_number', + label: '№ Слота', + formatter: this.dataFormatter, + thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg', + class: `bootstrap-rounded-table__without-border + fans-table-col-fourth`, + tdClass: 'regular-12px bootstrap-rounded-table__td', + }, + { + key: 'board_number', + label: '№ Платы', + formatter: this.dataFormatter, + thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg', + class: `bootstrap-rounded-table__without-border + fans-table-col-fourth`, + tdClass: 'regular-12px bootstrap-rounded-table__td', + }, + { + key: 'serial_number', + label: 'Серийный номер', + formatter: this.dataFormatter, + thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg', + class: `bootstrap-rounded-table__without-border + fans-table-col-first`, + tdClass: 'regular-12px bootstrap-rounded-table__td', + }, + { + key: 'frequency', + label: '№ Детали', + formatter: this.dataFormatter, + thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg', + class: `bootstrap-rounded-table__without-border + fans-table-col-fourth`, + tdClass: 'regular-12px bootstrap-rounded-table__td', + }, + { + key: 'cores', + label: 'Версия прошивки', + formatter: this.dataFormatter, + thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg', + class: `bootstrap-rounded-table__column-last + fans-table-col-third`, + tdClass: 'regular-12px bootstrap-rounded-table__td', + }, + ], + expandRowLabel: expandRowLabel, + }; + }, +}; +</script> +<style lang="scss"> +.fans-table-col-expand { + width: 3%; +} +.fans-table-col-first { + width: 15%; +} + +.fans-table-col-second { + width: 12%; +} + +.fans-table-col-third { + width: 10%; +} + +.fans-table-col-fourth { + width: 8%; +} +</style> + +<style lang="scss" scoped> +.row { + margin: 0px; + flex-wrap: nowrap; +} +.fans-table-col-first__cell { + display: flex; + flex-flow: row nowrap; + align-items: center; + justify-content: flex-start; +} + +.status__img { + margin-right: 7px; +} + +.bold-16px { + margin: 24px 0 0 2rem; +} + +.bold-12px__caps { + color: $text-secondary; +} + +.attrib-names { + border-bottom: 1px solid $faint-secondary-primary-10; + color: $text-secondary !important; + font-weight: 600; +} + +.custom-switch { + margin: 0; +} + +.btn-link { + width: 30px !important; + height: 20px !important; +} +</style> diff --git a/src/views/Processors/Specification/ProcessorsSpecificationPage.vue b/src/views/Processors/Specification/ProcessorsSpecificationPage.vue new file mode 100644 index 00000000..3f9525ae --- /dev/null +++ b/src/views/Processors/Specification/ProcessorsSpecificationPage.vue @@ -0,0 +1,44 @@ +<template> + <b-container + :style="{ display: 'flex', 'flex-direction': 'column' }" + fluid="xxl pt-0 m-0" + > + <page-title /> + <div class="main-container"> + <page-section class="bootstrap-table__section"> + <span class="bold-16px">{{ + $t('pageInventory.installedProcessors') + }}</span> + <!-- Processors Specification Table --> + <processors-specification-table /> + <span class="bold-16px">{{ + $t('pageInventory.installedAccelerator') + }}</span> + <!-- Accelerators Specification Table --> + <accelerator-specification-table /> + </page-section> + </div> + </b-container> +</template> + +<script> +import PageTitle from '@/components/Global/PageTitle'; +import PageSection from '@/components/Global/PageSection'; + +import ProcessorsSpecificationTable from './ProcessorsSpecificationTable'; +import AcceleratorSpecificationTable from './AcceleratorSpecificationTable'; +export default { + components: { + PageTitle, + PageSection, + ProcessorsSpecificationTable, + AcceleratorSpecificationTable, + }, +}; +</script> +<style lang="scss" scoped> +.bold-16px { + display: block; + margin: 25px 0 16px 0; +} +</style> diff --git a/src/views/Processors/Specification/ProcessorsSpecificationTable.vue b/src/views/Processors/Specification/ProcessorsSpecificationTable.vue new file mode 100644 index 00000000..6efc2e21 --- /dev/null +++ b/src/views/Processors/Specification/ProcessorsSpecificationTable.vue @@ -0,0 +1,352 @@ +<template> + <b-table + sort-icon-left + no-sort-reset + :sort-desc="true" + responsive="md" + show-empty + class="bootstrap-rounded-table" + :items="processors" + :fields="fields" + :empty-text="$t('global.table.emptyMessage')" + :empty-filtered-text="$t('global.table.emptySearchMessage')" + > + <template #cell(expandRow)="row"> + <b-button + variant="link" + data-test-id="hardwareStatus-button-expandProcessors" + :title="expandRowLabel" + class="btn-icon-only" + @click="toggleRowDetails(row)" + > + <icon-chevron /> + <span class="sr-only">{{ expandRowLabel }}</span> + </b-button> + </template> + <template #cell(status)="{ value }"> + <div v-if="value" class="fans-table-col-first__cell"> + <img class="status__img" src="@/assets/images/fans-page/working.svg" /> + <span> + {{ $t('fansPage.inWork') }} + </span> + </div> + <div v-else class="fans-table-col-first__cell"> + <img + class="status__img" + src="@/assets/images/fans-page/notWorking.svg" + /> + <span> + {{ $t('fansPage.notWorking') }} + </span> + </div> + </template> + + <template #row-details="{ index }"> + <b-container fluid> + <!-- ProcessorCapabilityInfo --> + <b-row> + <b-col class="mt-0 mb-2 p-0 bold-12px__caps"> + {{ $t('pageInventory.table.processorCapabilityInfo') }} + </b-col> + </b-row> + <b-row> + <b-col class="mt-2 p-0" sm="3" xl="3"> + <dl class="light-12px"> + <dd class="attrib-names">{{ $t('global.table.attributes') }}</dd> + <dd>{{ 'Многопоточность' }}</dd> + <dd>{{ 'Виртуализация' }}</dd> + <dd>{{ 'Турбо режим' }}</dd> + </dl> + </b-col> + <b-col class="mt-2 p-0" sm="3" xl="3"> + <dl class="light-12px"> + <dd class="attrib-names">{{ 'Состояние присутсвия' }}</dd> + <dd + v-for="item in processors[index].presence_status" + :key="item.presence_status" + > + {{ dataFormatter(item) }} + </dd> + </dl> + </b-col> + <b-col class="mt-2 p-0" sm="3" xl="3"> + <dl class="light-12px"> + <!-- Status state --> + <dd class="attrib-names">{{ 'Включен' }}</dd> + <dd> + <b-form-checkbox + v-model="processors[index].statuses.multithreading" + switch + > + </b-form-checkbox> + </dd> + <dd> + <b-form-checkbox + v-model="processors[index].statuses.virtualization" + switch + > + </b-form-checkbox> + </dd> + <dd> + <b-form-checkbox + v-model="processors[index].statuses.turbo" + switch + > + </b-form-checkbox> + </dd> + </dl> + </b-col> + </b-row> + <b-row> + <b-col class="mt-3 mb-2 p-0 bold-12px__caps"> + {{ $t('pageInventory.table.processorCacheInfo') }} + </b-col> + </b-row> + <b-row> + <b-col class="mt-2 p-0" sm="3" xl="3"> + <dl class="light-12px"> + <!-- Attributes Names --> + <dd class="attrib-names">{{ $t('global.table.attributes') }}</dd> + <dd>{{ 'Уровень кеша' }}</dd> + <dd>{{ 'Максимальный объем' }}</dd> + <dd>{{ 'Установленный объем' }}</dd> + <dd>{{ 'Тип кэша' }}</dd> + <dd>{{ 'Локализация' }}</dd> + <dd>{{ 'Политика записи' }}</dd> + <dd>{{ 'Ассоциативность' }}</dd> + <dd>{{ 'Тип исправления ошибки' }}</dd> + </dl> + </b-col> + <b-col class="mt-2 p-0" sm="3" xl="3"> + <dl class="light-12px"> + <!-- Status КЭШ-1 --> + <dd class="attrib-names">{{ 'КЭШ-1' }}</dd> + <dd v-for="item in processors[index].cache_1" :key="item.cache_1"> + {{ dataFormatter(item) }} + </dd> + </dl> + </b-col> + <b-col class="mt-2 p-0" sm="3" xl="3"> + <dl class="light-12px"> + <!-- Status state --> + <dd class="attrib-names">{{ 'КЭШ-2' }}</dd> + <dd v-for="item in processors[index].cache_2" :key="item.cache_2"> + {{ dataFormatter(item) }} + </dd> + </dl> + </b-col> + <b-col class="mt-2 p-0" sm="3" xl="3"> + <dl class="light-12px"> + <dd class="attrib-names">{{ 'КЭШ-3' }}</dd> + <dd v-for="item in processors[index].cache_3" :key="item.cache_3"> + {{ dataFormatter(item) }} + </dd> + </dl> + </b-col> + </b-row> + <b-row> + <b-col class="mt-3 mb-2 p-0 bold-12px__caps"> + {{ $t('pageInventory.table.SupportedTechnologies') }} + </b-col> + </b-row> + <b-row> + <b-col class="mt-2 p-0" sm="6" xl="6"> + <dl class="light-12px"> + <dd class="attrib-names">{{ $t('global.table.attributes') }}</dd> + <dd></dd> + <dd>{{ 'processor' }}</dd> + <dd>{{ 'vendor_id' }}</dd> + <dd>{{ 'cpu family' }}</dd> + <dd>{{ 'model' }}</dd> + <dd>{{ 'model name' }}</dd> + <dd>{{ 'stepping' }}</dd> + <dd>{{ 'microcode' }}</dd> + <dd>{{ 'cpu MHz' }}</dd> + <dd>{{ 'cache size' }}</dd> + <dd>{{ 'physical id' }}</dd> + <dd>{{ 'siblings' }}</dd> + <dd>{{ 'core id' }}</dd> + <dd>{{ 'cpu cores' }}</dd> + <dd>{{ 'apicid' }}</dd> + <dd>{{ 'initial apicid' }}</dd> + <dd>{{ 'fpu' }}</dd> + <dd>{{ 'fpu_exception' }}</dd> + <dd>{{ 'cpuid level' }}</dd> + <dd>{{ 'wp' }}</dd> + <dd>{{ 'flags' }}</dd> + <dd>{{ 'bugs' }}</dd> + </dl> + </b-col> + <b-col class="mt-2 p-0" sm="6" xl="6"> + <dl class="light-12px"> + <dd class="attrib-names">{{ $t('global.table.value') }}</dd> + <dd + v-for="item in processors[index].description" + :key="item.description" + > + {{ dataFormatter(item) }} + </dd> + </dl> + </b-col> + </b-row> + </b-container> + </template> + </b-table> +</template> + +<script> +import TableRowExpandMixin, { + expandRowLabel, +} from '@/components/Mixins/TableRowExpandMixin'; +import IconChevron from '@carbon/icons-vue/es/chevron--down/20'; +import BVToastMixin from '@/components/Mixins/BVToastMixin'; +import DataFormatterMixin from '@/components/Mixins/DataFormatterMixin'; + +import { Processors } from './mock'; +export default { + components: { IconChevron }, + mixins: [BVToastMixin, TableRowExpandMixin, DataFormatterMixin], + data() { + return { + isBusy: true, + isAddersСolon: false, + processors: Processors, + fields: [ + { + key: 'expandRow', + label: '', + thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg', + class: `bootstrap-rounded-table__without-border + fans-table-col-expand`, + tdClass: 'table-row-expand bootstrap-rounded-table__td', + sortable: false, + }, + { + key: 'status', + label: 'Статус', + formatter: this.dataFormatter, + thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg', + class: `bootstrap-rounded-table__without-border + fans-table-col-first`, + tdClass: 'regular-12px bootstrap-rounded-table__td', + }, + { + key: 'name', + label: 'Имя', + formatter: this.dataFormatter, + thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg', + class: `bootstrap-rounded-table__without-border + fans-table-col-second`, + tdClass: 'regular-12px bootstrap-rounded-table__td', + }, + { + key: 'model', + label: 'Модель', + formatter: this.dataFormatter, + thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg', + class: `bootstrap-rounded-table__without-border + fans-table-col-third`, + tdClass: 'regular-12px bootstrap-rounded-table__td', + }, + { + key: 'serialNumber', + label: 'Серийный номер', + formatter: this.dataFormatter, + thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg', + class: `bootstrap-rounded-table__without-border + fans-table-col-second`, + tdClass: 'regular-12px bootstrap-rounded-table__td', + }, + { + key: 'version', + label: 'Версия', + formatter: this.dataFormatter, + thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg', + class: `bootstrap-rounded-table__without-border + fans-table-col-fourth`, + tdClass: 'regular-12px bootstrap-rounded-table__td', + }, + { + key: 'frequency', + label: 'Частота', + formatter: this.dataFormatter, + thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg', + class: `bootstrap-rounded-table__without-border + fans-table-col-fourth`, + tdClass: 'regular-12px bootstrap-rounded-table__td', + }, + { + key: 'cores', + label: 'Ядра', + formatter: this.dataFormatter, + thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg', + class: `bootstrap-rounded-table__column-last + fans-table-col-fourth`, + tdClass: 'regular-12px bootstrap-rounded-table__td', + }, + ], + expandRowLabel: expandRowLabel, + }; + }, +}; +</script> +<style lang="scss"> +.fans-table-col-expand { + width: 3%; +} +.fans-table-col-first { + width: 17%; +} + +.fans-table-col-second { + width: 15%; +} + +.fans-table-col-third { + width: 12%; +} + +.fans-table-col-fourth { + width: 10%; +} +</style> + +<style lang="scss" scoped> +.row { + margin: 0px; + flex-wrap: nowrap; +} +.fans-table-col-first__cell { + display: flex; + flex-flow: row nowrap; + align-items: center; + justify-content: flex-start; +} + +.status__img { + margin-right: 7px; +} + +.bold-16px { + margin: 24px 0 0 2rem; +} + +.bold-12px__caps { + color: $text-secondary; +} + +.attrib-names { + border-bottom: 1px solid $faint-secondary-primary-10; + color: $text-secondary !important; + font-weight: 600; +} + +.custom-switch { + margin: 0; +} + +.btn-link { + width: 30px !important; + height: 20px !important; +} +</style> diff --git a/src/views/Processors/Specification/index.js b/src/views/Processors/Specification/index.js new file mode 100644 index 00000000..93bbbf10 --- /dev/null +++ b/src/views/Processors/Specification/index.js @@ -0,0 +1,2 @@ +import ProcessorsSpecificationPage from './ProcessorsSpecificationPage.vue'; +export default ProcessorsSpecificationPage; diff --git a/src/views/Processors/Specification/mock.js b/src/views/Processors/Specification/mock.js new file mode 100644 index 00000000..42ca1c30 --- /dev/null +++ b/src/views/Processors/Specification/mock.js @@ -0,0 +1,254 @@ +export const Processors = [ + { + expandRow: false, + status: true, + name: 'Процессор №1', + model: 'Core i5', + serialNumber: '789578456698', + version: 'v3.1.5', + frequency: '2.4', + cores: '4', + presence_status: { + multithreading: 'Нет', + virtualization: 'Да', + turbo: 'Да', + }, + statuses: { + multithreading: false, + virtualization: true, + turbo: true, + }, + cache_1: { + level: 'L1', + max_value: '1MB', + current_value: '1MB', + cache_type: 'Unified', + localization: 'Internal', + politics: 'Write Back', + associativity: '8-Way Set-Associativity', + fix_type: 'Parity', + }, + cache_2: { + level: 'L2', + max_value: '32MB', + current_value: '32MB', + cache_type: 'Unified', + localization: 'Internal', + politics: 'Write Back', + associativity: '8-Way Set-Associativity', + fix_type: 'Multiple-bit ECC', + }, + cache_3: { + level: 'L3', + max_value: '64MB', + current_value: '64MB', + cache_type: 'Unified', + localization: 'Internal', + politics: 'Write Back', + associativity: '8-Way Set-Associativity', + fix_type: 'Multiple-bit ECC', + }, + description: { + processor: '79', + vendor_id: 'GenuineIntel', + cpu_family: '6', + model: '85', + model_name: 'Intel(R) Xeon(R) Gold 6242R CPU @ 3.10GHz', + stepping: '7', + microcode: '0x5002f00', + cpu_MHz: '2955.939', + cache_size: '36608 KB', + physical_id: '1', + siblings: '40', + core_id: '29', + cpu_cores: '20', + apicid: '123', + initial_apicid: '123', + fpu: 'yes', + fpu_exception: 'yes', + cpuid_level: '22', + wp: 'yes', + flags: 'fpu, vme, de, pse, tsc, pat, pse36....', + bugs: 'spectre_v1 spectre_v2, spec_store_bypass', + }, + }, + { + expandRow: false, + status: true, + name: 'Процессор №2', + model: 'Core i3', + serialNumber: '425546788976', + version: 'v2.1.5', + frequency: '1.4', + cores: '2', + presence_status: { + multithreading: 'Нет', + virtualization: 'Да', + turbo: 'Да', + }, + statuses: { + multithreading: false, + virtualization: true, + turbo: true, + }, + cache_1: { + level: 'L1', + max_value: '1MB', + current_value: '1MB', + cache_type: 'Unified', + localization: 'Internal', + politics: 'Write Back', + associativity: '8-Way Set-Associativity', + fix_type: 'Parity', + }, + cache_2: { + level: 'L2', + max_value: '32MB', + current_value: '32MB', + cache_type: 'Unified', + localization: 'Internal', + politics: 'Write Back', + associativity: '8-Way Set-Associativity', + fix_type: 'Multiple-bit ECC', + }, + cache_3: { + level: 'L3', + max_value: '64MB', + current_value: '64MB', + cache_type: 'Unified', + localization: 'Internal', + politics: 'Write Back', + associativity: '8-Way Set-Associativity', + fix_type: 'Multiple-bit ECC', + }, + description: { + processor: '79', + vendor_id: 'GenuineIntel', + cpu_family: '6', + model: '85', + model_name: 'Intel(R) Xeon(R) Gold 6242R CPU @ 3.10GHz', + stepping: '7', + microcode: '0x5002f00', + cpu_MHz: '2955.939', + cache_size: '36608 KB', + physical_id: '1', + siblings: '40', + core_id: '29', + cpu_cores: '20', + apicid: '123', + initial_apicid: '123', + fpu: 'yes', + fpu_exception: 'yes', + cpuid_level: '22', + wp: 'yes', + flags: 'fpu, vme, de, pse, tsc, pat, pse36....', + bugs: 'spectre_v1 spectre_v2, spec_store_bypass', + }, + }, + { + expandRow: false, + status: false, + name: 'Процессор №3', + model: 'Core i7', + serialNumber: '454555556698', + version: 'v6.1.5', + frequency: '3.4', + cores: '6', + presence_status: { + multithreading: 'Нет', + virtualization: 'Да', + turbo: 'Да', + }, + statuses: { + multithreading: false, + virtualization: true, + turbo: true, + }, + cache_1: { + level: 'L1', + max_value: '1MB', + current_value: '1MB', + cache_type: 'Unified', + localization: 'Internal', + politics: 'Write Back', + associativity: '8-Way Set-Associativity', + fix_type: 'Parity', + }, + cache_2: { + level: 'L2', + max_value: '32MB', + current_value: '32MB', + cache_type: 'Unified', + localization: 'Internal', + politics: 'Write Back', + associativity: '8-Way Set-Associativity', + fix_type: 'Multiple-bit ECC', + }, + cache_3: { + level: 'L3', + max_value: '64MB', + current_value: '64MB', + cache_type: 'Unified', + localization: 'Internal', + politics: 'Write Back', + associativity: '8-Way Set-Associativity', + fix_type: 'Multiple-bit ECC', + }, + description: { + processor: '79', + vendor_id: 'GenuineIntel', + cpu_family: '6', + model: '85', + model_name: 'Intel(R) Xeon(R) Gold 6242R CPU @ 3.10GHz', + stepping: '7', + microcode: '0x5002f00', + cpu_MHz: '2955.939', + cache_size: '36608 KB', + physical_id: '1', + siblings: '40', + core_id: '29', + cpu_cores: '20', + apicid: '123', + initial_apicid: '123', + fpu: 'yes', + fpu_exception: 'yes', + cpuid_level: '22', + wp: 'yes', + flags: 'fpu, vme, de, pse, tsc, pat, pse36....', + bugs: 'spectre_v1 spectre_v2, spec_store_bypass', + }, + }, +]; + +export const Accelerators = [ + { + expandRow: false, + status: true, + name: 'Процессор №1', + slot_number: '789578456698', + board_number: '789578456698', + serial_number: '425546788976', + frequency: '2213', + cores: '4', + }, + { + expandRow: false, + status: true, + name: 'Процессор №2', + slot_number: '425546788976', + board_number: '425546788976', + serial_number: '425546788976', + frequency: '1332', + cores: '2', + }, + { + expandRow: false, + status: false, + name: 'Процессор №3', + slot_number: '454555556698', + board_number: '454555556698', + serial_number: '425546788976', + frequency: '3213', + cores: '6', + }, +]; diff --git a/src/views/SILA/AnalyticalPanel/AnalyticalPanelPage.vue b/src/views/SILA/AnalyticalPanel/AnalyticalPanelPage.vue new file mode 100644 index 00000000..b736f026 --- /dev/null +++ b/src/views/SILA/AnalyticalPanel/AnalyticalPanelPage.vue @@ -0,0 +1,167 @@ +<template> + <b-container fluid="xxl pt-0 m-0"> + <page-title /> + <div class="main-container"> + <div class="tables-container"> + <div class="server-table"> + <span class="semi-bold-16px">Состояние сервера</span> + <b-table + show-empty + responsive="md" + class="bootstrap-analytical-table" + :items="server_items" + :fields="server_fields" + > + <template #cell(value)="{ value }"> + <b-col v-if="value" col="1"> + <img + src="@/assets/images/icon-ok.svg" + class="system-network-table__icon" + /> + </b-col> + <b-col v-else> + <img + src="@/assets/images/icon-no.svg" + class="system-network-table__icon" + /> + </b-col> + </template> + </b-table> + </div> + <div class="events-table"> + <span class="semi-bold-16px">События</span> + <b-table + show-empty + responsive="md" + class="bootstrap-analytical-table" + :items="events_items" + :fields="events_fields" + > + </b-table> + </div> + </div> + </div> + </b-container> +</template> + +<script> +import PageTitle from '@/components/Global/PageTitle'; + +export default { + components: { + PageTitle, + }, + + data() { + return { + server_fields: [ + { + key: 'param', + label: 'Раздел', + formatter: this.dataFormatter, + thClass: 'semi-bold-12px__caps bootstrap-analytical-table__head_bg', + class: 'bootstrap-analytical-table__column-first', + tdClass: 'regular-12px bootstrap-analytical-table__td', + }, + { + key: 'value', + label: 'Статус', + formatter: this.dataFormatter, + thClass: 'semi-bold-12px__caps bootstrap-analytical-table__head_bg', + class: + 'bootstrap-rounded-table__column-last analytical-table__status', + tdClass: 'regular-12px bootstrap-analytical-table__td', + }, + ], + server_items: [ + { param: 'Сервер №1', value: true }, + { param: 'ВМС', value: true }, + { param: 'Аналитическая панель', value: true }, + { param: 'RAID-контроллеры', value: false }, + { param: 'Модули памяти', value: true }, + { param: 'Процессоры', value: true }, + { param: 'Источники питания', value: true }, + { param: 'Вентиляторы', value: true }, + { param: 'Физические накопители', value: true }, + { param: 'Виртуальные накопители', value: true }, + { param: 'Материнская плата', value: true }, + { param: 'Сетевые адаптеры', value: true }, + { param: 'PCI устройства', value: true }, + ], + events_fields: [ + { + key: 'time', + label: 'Время', + formatter: this.dataFormatter, + thClass: 'semi-bold-12px__caps bootstrap-analytical-table__head_bg', + class: 'bootstrap-analytical-table__column-first', + tdClass: 'regular-12px bootstrap-analytical-table__td', + }, + { + key: 'type', + label: 'Тип события', + formatter: this.dataFormatter, + thClass: 'semi-bold-12px__caps bootstrap-analytical-table__head_bg', + tdClass: 'regular-12px bootstrap-analytical-table__td', + }, + { + key: 'info', + label: 'О событии', + formatter: this.dataFormatter, + thClass: 'semi-bold-12px__caps bootstrap-analytical-table__head_bg', + class: 'bootstrap-rounded-table__column-last', + tdClass: 'regular-12px bootstrap-analytical-table__td', + }, + ], + events_items: [ + { time: 'Сервер №1', type: 'Критические', info: 'true' }, + { time: 'ВМС', type: 'Критические', info: 'true' }, + { + time: 'Аналитическая панель', + type: 'Критические', + info: 'true', + }, + { + time: 'RAID-контроллеры', + type: 'Критические', + info: 'false', + }, + { + time: 'Модули памяти', + type: 'Критические', + info: 'true', + }, + { time: 'Процессоры', type: 'Критические', info: 'true' }, + { + time: 'Источники питания', + type: 'Критические', + info: 'true', + }, + { time: 'Вентиляторы', type: 'Критические', info: 'true' }, + { time: 'Физические накопители', type: 'Критические', info: 'true' }, + ], + }; + }, +}; +</script> +<style lang="scss"> +.analytical-table__status { + width: 10%; +} +</style> +<style lang="scss" scoped> +.tables-container { + display: flex; + flex-flow: row nowrap; + margin: 16px 32px; + gap: 24px; +} + +.server-table { + width: 35%; +} + +.events-table { + width: 65%; +} +</style> diff --git a/src/views/SILA/AnalyticalPanel/index.js b/src/views/SILA/AnalyticalPanel/index.js new file mode 100644 index 00000000..7da2938e --- /dev/null +++ b/src/views/SILA/AnalyticalPanel/index.js @@ -0,0 +1,2 @@ +import AnalyticalPanelPage from './AnalyticalPanelPage.vue'; +export default AnalyticalPanelPage; diff --git a/src/views/SILA/EventLogs/EventLogs.vue b/src/views/SILA/EventLogs/EventLogs.vue new file mode 100644 index 00000000..0d5ce428 --- /dev/null +++ b/src/views/SILA/EventLogs/EventLogs.vue @@ -0,0 +1,1082 @@ +<template> + <b-container + :style="{ display: 'flex', 'flex-direction': 'column' }" + fluid="xxl pt-0 m-0" + class="event-logs-section" + > + <page-title /> + <div class="form-control event-log-search"> + <button class="search-button"> + <img + class="event-log-search__icon" + src="@/assets/images/search-icon.svg" + /> + </button> + <b-form-input + v-model="searchInput" + type="text" + class="event-log-search__input" + placeholder="Поиск по журналу" + @input="onChangeSearchInput" + @clear-search="onClearSearchInput" + > + </b-form-input> + </div> + <div class="event-logs__section"> + <div class="event-logs__filter-container"> + <span class="caption-12px">{{ $t('pageEventLogs.eventFilter') }}</span> + <b-form-select + v-model="eventFilter" + :options="eventFilters" + class="event-logs__filter regular-14px" + /> + </div> + <div class="event-logs__filter-container"> + <span class="caption-12px">{{ + $t('pageEventLogs.eventTypeFilter') + }}</span> + <b-form-select + v-model="eventTypeFilter" + :options="eventTypeFilters" + class="event-logs__filter regular-14px" + /> + </div> + <div class="event-logs__filter-container"> + <span class="caption-12px">{{ + $t('pageEventLogs.eventSourseFilter') + }}</span> + <b-form-select + v-model="eventSourseFilter" + :options="eventSourseFilters" + class="event-logs__filter regular-14px" + /> + </div> + <div class="event-logs__filter-container"> + <span class="caption-12px">{{ + $t('pageEventLogs.eventDateFilter') + }}</span> + <b-form-select + v-model="eventDateFilter" + :options="eventDateFilters" + class="event-logs__filter-date regular-14px" + /> + </div> + <popover + id="popover-reactive-1" + description="pageEventLogs.clearLogs" + popup="pageEventLogs.clearLogs_popup" + button="pageEventLogs.clear" + :isclear="true" + class="clear-popover" + /> + </div> + <table-toolbar + ref="toolbar" + :selected-items-count="selectedRows.length" + :actions="batchActions" + @clear-selected="clearSelectedRows($refs.table)" + > + <template #toolbar-buttons> + <b-button + variant="primary" + class="table-toolbar__resolved-button" + @click="resolveLogs" + > + <img + class="sourse__img" + src="@/assets/images/event-logs/resolved-button.svg" + /> + {{ $t('pageEventLogs.event_resolve') }} + </b-button> + <b-button + variant="primary" + class="table-toolbar__unresolved-button" + @click="unresolveLogs" + > + <img + class="sourse__img" + src="@/assets/images/event-logs/archive.svg" + /> + {{ $t('pageEventLogs.archive') }} + </b-button> + </template> + </table-toolbar> + <div id="event-logs-table-wrapper"> + <b-table + id="event-logs-table" + ref="table" + responsive="md" + class="event-logs-table" + selectable + no-select-on-click + sort-icon-left + :sticky-header="stickyHeader" + :no-border-collapse="true" + no-sort-reset + :sort-desc="sortDesc" + sort-by="id" + :fields="fields" + :items="filteredLogs" + :sort-compare="onSortCompare" + :empty-text="$t('global.table.emptyMessage')" + :empty-filtered-text="$t('global.table.emptySearchMessage')" + :filter="searchFilter" + @filtered="onFiltered" + @row-selected="onRowSelected($event, filteredLogs.length)" + > + <!-- Checkbox column --> + <template #head(checkbox)> + <b-form-checkbox + v-model="tableHeaderCheckboxModel" + data-test-id="eventLogs-checkbox-selectAll" + :indeterminate="tableHeaderCheckboxIndeterminate" + @change="onChangeHeaderCheckbox($refs.table)" + > + <span class="sr-only">{{ $t('global.table.selectAll') }}</span> + </b-form-checkbox> + </template> + <template #cell(checkbox)="row"> + <b-form-checkbox + v-model="row.rowSelected" + :data-test-id="`eventLogs-checkbox-selectRow-${row.index}`" + @change="toggleSelectRow($refs.table, row.index)" + > + <span class="sr-only">{{ $t('global.table.selectItem') }}</span> + </b-form-checkbox> + </template> + <template #cell(description)="data"> + <b-row class="semi-bold-16px tretiatry"> + {{ data.item.description.name }} + </b-row> + <b-row + class="regular-12px tretiatry pointer" + @click="toggleRowDetails(data)" + > + {{ data.item.description.description }}</b-row + > + </template> + <template #row-details="{ index }"> + <b-container fluid> + <b-col class="mt-1 mb-2 regular-12px tretiatry"> + <span class="row-details"> + {{ + `Краткое описание ошибки или сообщение которое состоит из текста указывающего на предмет ошибки.Краткое описание ошибки или сообщение которое состоит из текста указывающего на предмет ошибки. + Краткое описание ошибки или сообщение которое состоит из текста указывающего на предмет ошибки.Краткое описание ошибки или сообщение которое состоит из текста указывающего на предмет ошибки.` + }} + {{ $t(filteredLogs[index].description.description) }} + </span> + </b-col> + </b-container> + </template> + <!-- Severity column --> + <template #cell(severity)="{ value }"> + <span v-if="value === 'Критические'" class="bold-12px__caps errors">{{ + value + }}</span> + <span + v-else-if="value === 'Предупреждения'" + class="bold-12px__caps warning" + > + {{ value }} + </span> + <span v-else class="bold-12px__caps information">{{ value }}</span> + </template> + <!-- Date column --> + <template #cell(source)="{ value }"> + <b-row v-if="value === 'Процессоры'"> + <img + class="sourse__img" + src="@/assets/images/event-logs/processor.svg" + /> + <span>{{ value }}</span> + </b-row> + <b-row v-else-if="value === 'Вентиляторы'"> + <img + class="sourse__img" + src="@/assets/images/event-logs/fans.svg" + /> + <span class="pointer" @click="redirectFans">{{ value }}</span> + </b-row> + <b-row v-else-if="value === 'RAID-контролеры'"> + <img + class="sourse__img" + src="@/assets/images/event-logs/raid-controllers.svg" + /> + <span>{{ value }}</span> + </b-row> + <b-row v-else> + <img + src="@/assets/images/event-logs/memory-module.svg" + class="sourse__img" + /> + <span>{{ value }}</span> + </b-row> + </template> + + <template #cell(date)="{ value }"> + <img src="@/assets/images/event-logs/time.svg" class="sourse__img" /> + <span class="regular-12px quaternary"> {{ value }} </span> + </template> + + <!-- Status column --> + <template #cell(status)="{ value }"> + <b-row v-if="value === true"> + <img + class="sourse__img" + src="@/assets/images/event-logs/resolved.svg" + /> + <span class="semi-bold-12px__caps resolved"> + {{ $t('pageEventLogs.resolved') }} + </span> + </b-row> + <b-row v-else> + <img + class="sourse__img" + src="@/assets/images/event-logs/not-resolved.svg" + /> + <span class="semi-bold-12px__caps not-resolved"> + {{ $t('pageEventLogs.unresolved') }}</span + > + </b-row> + </template> + </b-table> + </div> + <div class="pagination-container"> + <div class="pagination-content"> + <span class="semi-bold-16px"> Страница </span> + <img class="sourse__img" src="@/assets/images/arrow-left.svg" /> + <span class="semi-bold-16px page-input"> 1 </span> + <span class="semi-bold-16px"> из </span> + <span class="semi-bold-16px"> 123 </span> + <img class="sourse__img" src="@/assets/images/arrow-right.svg" /> + </div> + <div class="pagination-items-limit"> + <span class="semi-bold-16px"> Показывать по </span> + <b-form-select + v-model="itemsPerPage" + :options="itemsPerPageOptions" + class="event-logs__filter items-per-page semi-bold-16px" + /> + <span class="semi-bold-16px"> записей на странице </span> + </div> + </div> + </b-container> +</template> + +<script> +import { omit } from 'lodash'; +import PageTitle from '@/components/Global/PageTitle'; +import Popover from '@/components/Global/Popover'; +import TableToolbar from '@/components/Global/TableToolbar'; +import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin'; +import TableFilterMixin from '@/components/Mixins/TableFilterMixin'; +import BVTableSelectableMixin, { + selectedRows, + tableHeaderCheckboxModel, + tableHeaderCheckboxIndeterminate, +} from '@/components/Mixins/BVTableSelectableMixin'; +import BVToastMixin from '@/components/Mixins/BVToastMixin'; +import DataFormatterMixin from '@/components/Mixins/DataFormatterMixin'; +import TableSortMixin from '@/components/Mixins/TableSortMixin'; +import TableRowExpandMixin, { + expandRowLabel, +} from '@/components/Mixins/TableRowExpandMixin'; +import SearchFilterMixin, { + searchFilter, +} from '@/components/Mixins/SearchFilterMixin'; + +export default { + components: { + PageTitle, + Popover, + TableToolbar, + }, + mixins: [ + BVTableSelectableMixin, + BVToastMixin, + LoadingBarMixin, + TableFilterMixin, + DataFormatterMixin, + TableSortMixin, + TableRowExpandMixin, + SearchFilterMixin, + ], + beforeRouteLeave(to, from, next) { + // Hide loader if the user navigates to another page + // before request is fulfilled. + this.hideLoader(); + next(); + }, + data() { + return { + sortDesc: true, + stickyHeader: 'calc(100vh - 243px)', + itemsPerPage: 50, + itemsPerPageOptions: [ + { + value: 10, + text: '10', + }, + { + value: 50, + text: '50', + }, + { + value: 100, + text: '100', + }, + ], + fields: [ + { + key: 'checkbox', + sortable: false, + thClass: ' event-logs-table__th', + class: 'event-logs-table__id', + tdClass: 'event-logs-table__td', + }, + { + key: 'id', + label: this.$t('pageEventLogs.table.id'), + sortable: true, + thClass: 'bold-12px__caps event-logs-table__th', + tdClass: 'semi-bold-12px event-logs-table__td', + }, + { + key: 'description', + label: this.$t('pageEventLogs.table.about_event'), + thClass: 'bold-12px__caps event-logs-table__th', + tdClass: 'event-logs-table__td', + }, + { + key: 'severity', + label: this.$t('pageEventLogs.table.severity'), + thClass: 'bold-12px__caps event-logs-table__th', + tdClass: 'event-logs-table__td', + }, + { + key: 'source', + label: this.$t('pageEventLogs.table.source'), + thClass: 'bold-12px__caps event-logs-table__th', + tdClass: 'semi-bold-12px__caps tretiatry event-logs-table__td', + }, + { + key: 'date', + label: this.$t('pageEventLogs.table.date'), + sortable: true, + thClass: `bold-12px__caps event-logs-table__th event-logs-table__th__date`, + tdClass: 'event-logs-table__td', + }, + { + key: 'status', + sortable: true, + label: this.$t('pageEventLogs.table.status'), + thClass: 'bold-12px__caps event-logs-table__th', + tdClass: 'event-logs-table__td', + }, + ], + allLogs: [ + { + checkbox: false, + id: 1, + description: { + name: 'Имя источника событий', + description: 'Краткое описание ошибки или сообщени....', + full_description: '', + }, + severity: 'Критические', + source: 'Вентиляторы', + date: '23.11.2021 в 13.36', + status: true, + }, + { + checkbox: false, + id: 2, + description: { + name: 'Имя источника событий', + description: 'Краткое описание ошибки или сообщени....', + }, + severity: 'Информационное', + source: 'Модули памяти', + date: '23.11.2021 в 13.36', + status: false, + }, + { + checkbox: false, + id: 3, + description: { + name: 'Имя источника событий', + description: 'Краткое описание ошибки или сообщени....', + }, + severity: 'Критические', + source: 'Процессоры', + date: '23.11.2021 в 13.36', + status: true, + }, + { + checkbox: false, + id: 4, + description: { + name: 'Имя источника событий', + description: 'Краткое описание ошибки или сообщени....', + }, + severity: 'Предупреждения', + source: 'RAID-контролеры', + date: '23.11.2021 в 13.36', + status: 'expandRow', + }, + { + checkbox: false, + id: 5, + description: { + name: 'Имя источника событий', + description: 'Краткое описание ошибки или сообщени....', + }, + severity: 'Критические', + source: 'Процессоры', + date: '23.11.2021 в 13.36', + status: true, + }, + { + checkbox: false, + id: 6, + description: { + name: 'Имя источника событий', + description: 'Краткое описание ошибки или сообщени....', + }, + severity: 'Предупреждения', + source: 'RAID-контролеры', + date: '23.11.2021 в 13.36', + status: false, + }, + { + checkbox: false, + id: 7, + description: { + name: 'Имя источника событий', + description: 'Краткое описание ошибки или сообщени....', + }, + severity: 'Информационное', + source: 'Модули памяти', + date: '23.11.2021 в 13.36', + status: false, + }, + { + checkbox: false, + id: 8, + description: { + name: 'Имя источника событий', + description: 'Краткое описание ошибки или сообщени....', + }, + severity: 'Критические', + source: 'Вентиляторы', + date: '23.11.2021 в 13.36', + status: true, + }, + { + checkbox: false, + id: 9, + description: { + name: 'Имя источника событий', + description: 'Краткое описание ошибки или сообщени....', + }, + severity: 'Информационное', + source: 'Модули памяти', + date: '23.11.2021 в 13.36', + status: false, + }, + { + checkbox: false, + id: 10, + description: { + name: 'Имя источника событий', + description: 'Краткое описание ошибки или сообщени....', + }, + severity: 'Критические', + source: 'Процессоры', + date: '23.11.2021 в 13.36', + status: true, + }, + { + checkbox: false, + id: 11, + description: { + name: 'Имя источника событий', + description: 'Краткое описание ошибки или сообщени....', + }, + severity: 'Предупреждения', + source: 'RAID-контролеры', + date: '23.11.2021 в 13.36', + status: 'expandRow', + }, + { + checkbox: false, + id: 12, + description: { + name: 'Имя источника событий', + description: 'Краткое описание ошибки или сообщени....', + }, + severity: 'Критические', + source: 'Процессоры', + date: '23.11.2021 в 13.36', + status: true, + }, + { + checkbox: false, + id: 13, + description: { + name: 'Имя источника событий', + description: 'Краткое описание ошибки или сообщени....', + }, + severity: 'Предупреждения', + source: 'RAID-контролеры', + date: '23.11.2021 в 13.36', + status: false, + }, + { + checkbox: false, + id: 14, + description: { + name: 'Имя источника событий', + description: 'Краткое описание ошибки или сообщени....', + }, + severity: 'Информационное', + source: 'Модули памяти', + date: '23.11.2021 в 13.36', + status: false, + }, + ], + tableFilters: [ + { + key: 'severity', + label: this.$t('pageEventLogs.table.severity'), + values: ['Информационное', 'Предупреждения', 'Критические'], + }, + { + key: 'filterByStatus', + label: this.$t('pageEventLogs.table.status'), + values: ['Resolved', 'Unresolved'], + }, + { + key: 'status', + label: this.$t('pageEventLogs.table.status'), + values: [false, true], + }, + ], + eventFilter: 1, + eventFilters: [ + { + value: 1, + text: 'Все события', + }, + ], + eventTypeFilter: 'all', + eventTypeFilters: [ + { + value: 'all', + text: 'Все события', + }, + { + value: 'info', + text: 'Информационное', + }, + { + value: 'warning', + text: 'Предупреждения', + }, + { + value: 'critical', + text: 'Критические', + }, + ], + eventSourseFilter: 1, + eventSourseFilters: [ + { + value: 1, + text: 'Все события', + }, + ], + eventDateFilter: 1, + eventDateFilters: [ + { + value: 1, + text: 'События за последний час', + }, + ], + expandRowLabel, + activeFilters: [], + batchActions: [ + { + value: 'delete', + label: this.$t('global.action.delete'), + }, + ], + filterStartDate: null, + filterEndDate: null, + searchInput: null, + searchFilter: searchFilter, + searchTotalFilteredRows: 0, + selectedRows: selectedRows, + tableHeaderCheckboxModel: tableHeaderCheckboxModel, + tableHeaderCheckboxIndeterminate: tableHeaderCheckboxIndeterminate, + }; + }, + computed: { + href() { + return `data:text/json;charset=utf-8,${this.exportAllLogs()}`; + }, + filteredRows() { + return this.searchFilter + ? this.searchTotalFilteredRows + : this.filteredLogs.length; + }, + // allLogs() { + // return this.$store.getters['eventLog/allEvents'].map((event) => { + // return { + // ...event, + // actions: [ + // { + // value: 'export', + // title: this.$t('global.action.export'), + // }, + // { + // value: 'delete', + // title: this.$t('global.action.delete'), + // }, + // ], + // }; + // }); + // }, + batchExportData() { + return this.selectedRows.map((row) => omit(row, 'actions')); + }, + filteredLogsByDate() { + return this.getFilteredTableDataByDate( + this.allLogs, + this.filterStartDate, + this.filterEndDate + ); + }, + filteredLogs() { + return this.getFilteredTableData( + this.filteredLogsByDate, + this.activeFilters + ); + }, + }, + created() { + // this.startLoader(); + // this.$store.dispatch('eventLog/getEventLogData').finally(() => { + // this.endLoader(); + // this.isBusy = false; + // }); + }, + methods: { + redirectFans() { + this.$router.push('/fans'); + }, + changelogStatus(row) { + this.$store + .dispatch('eventLog/updateEventLogStatus', { + uri: row.uri, + status: row.status, + }) + .then((success) => { + this.successToast(success); + }) + .catch(({ message }) => this.errorToast(message)); + }, + deleteAllLogs() { + this.$bvModal + .msgBoxConfirm(this.$t('pageEventLogs.modal.deleteAllMessage'), { + title: this.$t('pageEventLogs.modal.deleteAllTitle'), + okTitle: this.$t('global.action.delete'), + okVariant: 'danger', + cancelTitle: this.$t('global.action.cancel'), + }) + .then((deleteConfirmed) => { + if (deleteConfirmed) { + this.$store + .dispatch('eventLog/deleteAllEventLogs', this.allLogs) + .then((message) => this.successToast(message)) + .catch(({ message }) => this.errorToast(message)); + } + }); + }, + deleteLogs(uris) { + this.$store + .dispatch('eventLog/deleteEventLogs', uris) + .then((messages) => { + messages.forEach(({ type, message }) => { + if (type === 'success') { + this.successToast(message); + } else if (type === 'error') { + this.errorToast(message); + } + }); + }); + }, + exportAllLogs() { + { + return this.$store.getters['eventLog/allEvents'].map((eventLogs) => { + const allEventLogsString = JSON.stringify(eventLogs); + return allEventLogsString; + }); + } + }, + onFilterChange({ activeFilters }) { + this.activeFilters = activeFilters; + }, + onSortCompare(a, b, key) { + if (key === 'severity') { + return this.sortStatus(a, b, key); + } + }, + // onTableRowAction(action, { uri }) { + // if (action === 'delete') { + // this.$bvModal + // .msgBoxConfirm(this.$tc('pageEventLogs.modal.deleteMessage'), { + // title: this.$tc('pageEventLogs.modal.deleteTitle'), + // okTitle: this.$t('global.action.delete'), + // cancelTitle: this.$t('global.action.cancel'), + // }) + // .then((deleteConfirmed) => { + // if (deleteConfirmed) this.deleteLogs([uri]); + // }); + // } + // }, + onBatchAction(action) { + if (action === 'delete') { + const uris = this.selectedRows.map((row) => row.uri); + this.$bvModal + .msgBoxConfirm( + this.$tc( + 'pageEventLogs.modal.deleteMessage', + this.selectedRows.length + ), + { + title: this.$tc( + 'pageEventLogs.modal.deleteTitle', + this.selectedRows.length + ), + okTitle: this.$t('global.action.delete'), + cancelTitle: this.$t('global.action.cancel'), + } + ) + .then((deleteConfirmed) => { + if (deleteConfirmed) { + if (this.selectedRows.length === this.allLogs.length) { + this.$store + .dispatch( + 'eventLog/deleteAllEventLogs', + this.selectedRows.length + ) + .then((message) => this.successToast(message)) + .catch(({ message }) => this.errorToast(message)); + } else { + this.deleteLogs(uris); + } + } + }); + } + }, + onChangeDateTimeFilter({ fromDate, toDate }) { + this.filterStartDate = fromDate; + this.filterEndDate = toDate; + }, + onFiltered(filteredItems) { + this.searchTotalFilteredRows = filteredItems.length; + }, + // Create export file name based on date + exportFileNameByDate(value) { + let date = new Date(); + date = + date.toISOString().slice(0, 10) + + '_' + + date.toString().split(':').join('-').split(' ')[4]; + let fileName; + if (value === 'export') { + fileName = 'event_log_'; + } else { + fileName = 'all_event_logs_'; + } + return fileName + date; + }, + resolveLogs() { + this.$store + .dispatch('eventLog/resolveEventLogs', this.selectedRows) + .then((messages) => { + messages.forEach(({ type, message }) => { + if (type === 'success') { + this.successToast(message); + } else if (type === 'error') { + this.errorToast(message); + } + }); + }); + }, + unresolveLogs() { + this.$store + .dispatch('eventLog/unresolveEventLogs', this.selectedRows) + .then((messages) => { + messages.forEach(({ type, message }) => { + if (type === 'success') { + this.successToast(message); + } else if (type === 'error') { + this.errorToast(message); + } + }); + }); + }, + }, +}; +</script> +<style lang="scss"> +#event-logs-table { + margin: 0 !important; +} + +.event-logs-table__th { + background-color: #f8f8f8 !important; + border-bottom: 1px solid $faint-secondary-primary-20 !important; + border-top: 1px solid $faint-secondary-primary-20 !important; + color: $text-primary !important; +} + +.event-logs-section .table.b-table > thead > tr > [aria-sort='ascending'] { + background-image: url('../../../assets/images/event-logs/sort-icon-rotate.svg'); +} + +.event-logs-section .table.b-table > thead > tr > [aria-sort='descending'], +.table.b-table > thead > tr > [aria-sort='none'] { + background-image: url('../../../assets/images/event-logs/sort-icon.svg'); +} + +.event-logs-section .b-table-sort-icon-left { + background-position: left 57% center !important; + background-size: 15px !important; + padding-left: 0.75rem !important; + padding-right: 2rem !important; + &.event-logs-table__th__date { + background-position: left 33% center !important; + } +} + +.event-logs-table__id { + padding-left: 38px !important; +} + +.event-logs-table__td { + border-bottom: 1px solid $faint-secondary-primary-10 !important; + height: 64px; +} +</style> +<style lang="scss" scoped> +$toolbar-height: 64px; +.row { + margin: 0px; +} + +.clear-popover { + margin-left: auto; +} + +.event-logs__section { + display: flex; + flex-flow: row nowrap; + justify-content: flex-start; + align-items: center; + height: 84px; + gap: 16px; + margin: 0 32px; +} + +.event-log-search { + position: absolute; + top: calc(#{$header-height}); + right: 0px; + display: flex; + flex-flow: row nowrap; + justify-content: flex-start; + align-items: center; + border: none; + box-shadow: none; + border-radius: 8px; + margin: 12px 32px; + width: 236px; + height: 40px; + z-index: 1001; +} + +.search-button { + border: none; + background: none; +} + +.event-log-search__icon { + width: 20px; + height: 20px; +} + +.event-log-search__input { + border: none; + background: none; + box-shadow: none; +} + +.event-logs__filter-container { + width: 183px; +} + +.event-logs__filter, +.event-logs__filter-date { + height: 40px; + border: none; + border-radius: 8px; + background-image: url('../../../assets/images/icon-chevron.svg'); +} + +.caption-12px { + padding-left: 10px; +} + +.event-logs__filter { + width: 171px; +} + +.event-logs__filter-date { + width: 236px; +} + +.bold-12px__caps { + color: $text-primary !important; +} + +.custom-checkbox { + background-color: none; +} + +#event-logs-table-wrapper div { + overflow-y: overlay; + &::-webkit-scrollbar { + position: absolute; + width: 10px; + } + &::-webkit-scrollbar-thumb { + border: 4px solid transparent; + border-top: 52px solid transparent; + background: $faint-secondary-primary-20; + border-radius: 16px; + background-clip: content-box; + } +} + +.table-toolbar__resolved-button { + width: 226px; + height: 36px; + background-color: $faint-secondary-primary-5; + border-radius: 8px; + color: $red-brand-primary; + margin-right: 1rem; + justify-content: center; +} + +.table-toolbar__unresolved-button { + width: 226px; + height: 36px; + background-color: $red-brand-primary; + border-radius: 8px; + color: $white; + margin-right: 2rem; + justify-content: center; +} + +.sourse__img { + padding-right: 8px; +} + +.errors { + color: $indicators-errors !important; +} + +.warning { + color: $indicators-warning !important; +} + +.information { + color: $indicators-complementary !important; +} + +.resolved { + color: $indicators-succes; +} + +.not-resolved { + color: $text-quaternary; +} + +.pointer { + cursor: pointer; +} + +.pagination-container { + width: calc(100% - #{$navigation-width}); + height: $toolbar-height; + position: fixed; + bottom: 0; + right: 0; + display: flex; + flex-direction: row; + align-items: center; + justify-content: flex-start; + box-shadow: 0px -4px 12px rgba(0, 0, 0, 0.06); + z-index: $zindex-dropdown; + background-color: $white; +} + +.pagination-content { + width: 300px; + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-evenly; +} + +.page-input { + display: inline-block; + width: 55px; + height: 24px; + border: 1px solid $on-surface-tretiatry; + border-radius: 4px; + display: flex; + align-items: center; + justify-content: center; +} + +.pagination-items-limit { + margin-left: auto; + width: 400px; + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-evenly; +} + +.items-per-page { + padding: 0 0 0 5px; + width: 55px; + height: 24px; + background-color: transparent; + border: 1px solid $on-surface-tretiatry; + border-radius: 4px; +} + +.row-details { + display: block; + height: auto; + width: 70vw; +} + +.pointer { + cursor: pointer; +} +</style> diff --git a/src/views/SILA/EventLogs/index.js b/src/views/SILA/EventLogs/index.js new file mode 100644 index 00000000..521efde4 --- /dev/null +++ b/src/views/SILA/EventLogs/index.js @@ -0,0 +1,2 @@ +import EventLogs from './EventLogs.vue'; +export default EventLogs; diff --git a/src/views/SystemDescription/Info/InventoryControlSystem.vue b/src/views/SystemDescription/Info/InventoryControlSystem.vue deleted file mode 100644 index f47b4868..00000000 --- a/src/views/SystemDescription/Info/InventoryControlSystem.vue +++ /dev/null @@ -1,228 +0,0 @@ -<template> - <page-section class="system-control-section"> - <div class="system-control__table"> - <div class="system-control__table__row"> - <div class="system-control__table__cell"> - <div> - <span class="semi-bold-12px"> - {{ $t('SystemDescription.title.ReloadServer') }} - </span> - </div> - <popover - id="popover-reactive-1" - description="SystemDescription.ReloadOSAndServer" - popup="SystemDescription.ReloadOSAndServer_popup" - /> - <popover - id="popover-reactive-2" - description="SystemDescription.ReloadServer" - popup="SystemDescription.ReloadServer_popup" - /> - <div> - <span class="regular-12px underline"> - {{ $t('SystemDescription.ConnectToDesktop') }} - </span> - </div> - </div> - - <div class="system-control__table__cell system-control__table__cell__2"> - <div class="reload-progress__container"> - <span class="regular-12px"> - {{ $t('SystemDescription.status') }} - </span> - <span class="semi-bold-12px progress_bar_percent" - >{{ progress1.value }}%</span - > - <b-progress - class="reload-progress" - :value="progress1.value" - ></b-progress> - </div> - <div class="reload-progress__container"> - <span class="regular-12px"> - {{ $t('SystemDescription.status') }} - </span> - <span - v-if="progress2.value === null" - class="semi-bold-12px progress_bar_percent" - >{{ $t('SystemDescription.NotRunning') }}</span - > - <span v-else class="semi-bold-12px progress_bar_percent" - >{{ progress2.value }}%</span - > - <b-progress - class="reload-progress" - :value="progress2.value" - ></b-progress> - </div> - </div> - - <div class="system-control__table__cell"> - <div> - <span class="semi-bold-12px"> - {{ $t('SystemDescription.title.OnOffServer') }} - </span> - </div> - <div> - <popover - id="popover-reactive-3" - description="SystemDescription.OffOsAndServer" - popup="SystemDescription.OffOsAndServer_popup" - button="global.action.off" - /> - <popover - id="popover-reactive-4" - description="SystemDescription.OffServer" - popup="SystemDescription.OffServer_popup" - button="global.action.off" - /> - </div> - </div> - </div> - <div class="system-control__table__row"> - <div class="system-control__table__cell system-control__table__cell__4"> - <div> - <span class="semi-bold-12px"> - {{ $t('SystemDescription.title.setupDatetime') }} - </span> - </div> - <b-form @submit.prevent="onResetSubmit"> - <b-form-radio-group - v-model="timeOption" - class="system-control__radio regular-12px" - > - <b-form-radio value="NTP"> - {{ $t('SystemDescription.GetNtpFromServer') }} - </b-form-radio> - <b-form-radio value="serverDate"> - {{ $t('SystemDescription.UseServerDatettime') }} - </b-form-radio> - </b-form-radio-group> - </b-form> - <ntp-popover - id="popover-reactive-5" - description="SystemDescription.NtpSettings" - /> - </div> - </div> - </div> - </page-section> -</template> - -<script> -import PageSection from '@/components/Global/PageSection'; -import Popover from '@/components/Global/Popover'; -import NtpPopover from './NtpPopover'; - -export default { - components: { - PageSection, - NtpPopover, - Popover, - }, - data() { - return { - timeOption: 'resetBios', - picked: '', - options: [ - { text: 'Toggle this custom radio', value: 'first' }, - { text: 'Or toggle this other custom radio', value: 'second' }, - ], - progress1: { - value: 90, - }, - progress2: { - value: null, - }, - }; - }, -}; -</script> -<style lang="scss" scoped> -a { - list-style-type: none; -} - -.system-control-section { - position: relative; - margin: 16px 2rem 2rem !important; - width: 90%; -} - -.system-control__table__row { - display: flex; - flex-flow: row nowrap; - justify-content: space-between; - width: 85%; -} - -.system-control__table__cell { - display: flex; - flex-flow: column nowrap; - align-items: flex-start; - row-gap: 6px; -} - -.system-control__table__cell__2 { - margin-top: 37px; - row-gap: 14px; -} - -.reload-progress__container { - display: flex; - flex-flow: row nowrap; - align-items: baseline; - justify-content: space-between; - width: 100%; - column-gap: 4px; -} - -.semi-bold-12px { - display: inline-block; -} - -label { - padding-top: 5px; -} -.system-control__table__cell__4 { - margin-top: 26px; -} - -.custom-radio ::before { - border: 1px solid $red-brand-primary; - background-color: #fff; - border-radius: 100%; -} - -.system-control-section::v-deep - .custom-control-input:checked - ~ .custom-control-label::before { - border: 2px solid $red-brand-primary; - background-color: $red-brand-primary; - box-shadow: 0px 0px 0px 2.5px $white inset; - border-radius: 100%; -} - -.system-control-section::v-deep - .custom-control-input:hover - ~ .custom-control-label::before { - background-color: $red-brand-primary-hover !important; - box-shadow: 0px 0px 0px 2.5px $white inset; - border-color: $red-brand-primary-hover; -} - -.system-control-section::v-deep - .custom-control-input:checked - ~ .custom-control-label::after { - background-image: none !important; - border-radius: 100%; -} - -.system-control-section::v-deep - .custom-control-input:active - ~ .custom-control-label::before { - background-color: $red-brand-primary-active !important; - box-shadow: 0px 0px 0px 2.5px $white inset; - border-color: $red-brand-primary-active; -} -</style> diff --git a/src/views/SystemDescription/Info/InventoryTableSystem.vue b/src/views/SystemDescription/Info/InventoryTableSystem.vue index b022fd6d..f903a46b 100644 --- a/src/views/SystemDescription/Info/InventoryTableSystem.vue +++ b/src/views/SystemDescription/Info/InventoryTableSystem.vue @@ -7,7 +7,6 @@ :items="systems" :fields="fields" :empty-text="$t('global.table.emptyMessage')" - :busy="isBusy" > </b-table> </page-section> @@ -26,7 +25,6 @@ export default { mixins: [BVToastMixin, TableRowExpandMixin], data() { return { - isBusy: true, fields: [ { key: 'param', diff --git a/src/views/SystemDescription/Info/NtpPopover.vue b/src/views/SystemDescription/Info/NtpPopover.vue deleted file mode 100644 index 81e95e4d..00000000 --- a/src/views/SystemDescription/Info/NtpPopover.vue +++ /dev/null @@ -1,141 +0,0 @@ -<template> - <div id="my-container"> - <span :id="id" class="regular-12px underline" variant="primary"> - {{ $t(description) }} - </span> - <!-- Our popover title and content render container --> - <b-popover - :target="id" - placement="auto" - container="my-container" - :show.sync="popoverShow" - @show="onShow" - @shown="onShown" - @hidden="onHidden" - > - <template #title> - <div class="popup-title"> - <span class="bold-16px__caps">{{ $t(description) }}</span> - <b-button class="popup-title__button_close" @click="onClose"> - <img src="@/assets/images/popups/x-icon.svg" /> - </b-button> - </div> - </template> - - <div class="popup-body"> - <div class="popup-body__input-container"> - <span class="regular-12px tretiatry" - >Введите адрес сервера (IP, FQDM)</span - > - <b-form-input - id="popover-input-1" - v-model="input1" - class="medium-12px" - ></b-form-input> - </div> - <b-button class="popover-button" variant="primary" @click="onClose"> - {{ $t('global.action.save') }} - </b-button> - </div> - </b-popover> - </div> -</template> - -<script> -export default { - props: { - description: { - type: String, - default: '', - }, - id: { - type: String, - default: '', - }, - button: { - type: String, - default: 'Reload', - }, - }, - data() { - return { - input1: '', - popoverShow: false, - }; - }, - methods: { - onShow() { - this.$root.$emit('bv::hide::popover'); - }, - onClose() { - this.popoverShow = false; - }, - }, -}; -</script> -<style lang="scss" scoped> -.form-group { - margin: 0; -} - -.popup-title { - display: flex; - flex-flow: row nowrap; - align-items: baseline; -} - -.popup-title__button_close { - margin: 0 28px 0 auto; - background: none; - border: none; - &:active { - background-color: $faint-secondary-primary-5-hover !important; - box-shadow: none !important; - border-radius: 8px; - } - &:focus-visible { - border: none !important; - border-radius: 8px; - } - &:focus { - box-shadow: none; - border-radius: 8px; - } -} - -.popup-body { - display: flex; - flex-direction: column; - align-content: center; - justify-content: center; -} - -.form-control { - width: 341px; - height: 52px; - background: rgba(26, 62, 91, 0.05); - border-radius: 8px; - border: none; - margin: -25px auto; - padding-top: 30px; -} - -.popover-button { - width: 341px; - height: 40px; - margin: 0 auto 10px; -} - -.popup-body__input-container { - height: 52px; - margin: 24px auto 16px auto; -} - -.tretiatry { - margin-left: 12px; -} - -.underline { - cursor: pointer; -} -</style> diff --git a/src/views/SystemDescription/Info/SystemDescription.vue b/src/views/SystemDescription/Info/SystemDescription.vue index 7322d03e..558c70ef 100644 --- a/src/views/SystemDescription/Info/SystemDescription.vue +++ b/src/views/SystemDescription/Info/SystemDescription.vue @@ -10,7 +10,7 @@ <b-button v-b-toggle.toggle-collapse_1 variant="link" - class="server-info-collapse__button semi-bold-16px" + class="collapse-button semi-bold-16px" > {{ $t('SystemDescription.title.ServerConfig') }} <component :is="iconChevronUp" class="icon-expand" /> @@ -78,7 +78,7 @@ <b-button v-b-toggle.toggle-collapse_2 variant="link" - class="server-info-collapse__button semi-bold-16px" + class="collapse-button semi-bold-16px" > {{ $t('SystemDescription.title.Control') }} <component :is="iconChevronUp" class="icon-expand" /> @@ -94,8 +94,7 @@ <script> import PageTitle from '@/components/Global/PageTitle'; import TableSystem from './InventoryTableSystem'; -import ControlSystem from './InventoryControlSystem'; -// import PageSection from '@/components/Global/PageSection'; +import ControlSystem from '@/components/Global/SilaComponents/InventoryControlSystem'; import iconChevronUp from '@carbon/icons-vue/es/chevron--up/16'; export default { @@ -103,7 +102,6 @@ export default { PageTitle, ControlSystem, TableSystem, - // PageSection, }, data() { return { @@ -120,22 +118,6 @@ export default { padding: 0; } -.server-info-collapse__button { - height: 56px; - width: 100%; - padding: 0 0 0 2rem; - margin: 0; - display: flex; - flex-flow: row nowrap; - justify-content: flex-start; - &:active, - &:focus { - box-shadow: none; - } - &:hover { - color: $text-primary; - } -} .nav-item { list-style-type: none; } diff --git a/src/views/SystemDescription/Network/InventoryIPv4Settings.vue b/src/views/SystemDescription/Network/InventoryIPv4Settings.vue index 69807762..b96c9251 100644 --- a/src/views/SystemDescription/Network/InventoryIPv4Settings.vue +++ b/src/views/SystemDescription/Network/InventoryIPv4Settings.vue @@ -11,33 +11,34 @@ <template #cell(value)="data"> <b-row v-if="!(typeof data.value === 'boolean')"> <b-form-input - v-if="systems[data.index].isEdit && selectedCell === 'value'" + v-if="systems[data.index].isEdit" ref="input" - v-model="systems[data.index].value" + v-model="selectedCell" class="regular-12px" + :class="{ validateIP: isIpInvalid }" type="text" + @keydown.enter="clickOk(data)" + @keydown.escape="clickCancel(data)" ></b-form-input> <b-col v-else>{{ data.value }}</b-col> <b-col class="system-network-table__icon-col"> - <b-row - v-if="systems[data.index].isEdit && selectedCell === 'value'" - > + <b-row v-if="systems[data.index].isEdit"> <img src="@/assets/images/edit-ok.svg" class="system-network-table__icon pointer" - @click="clickOk" + @click="clickOk(data)" /> <img src="@/assets/images/edit-no.svg" class="system-network-table__icon close_icon pointer" - @click="clickCancel" + @click="clickCancel(data)" /> </b-row> <img v-else src="@/assets/images/icon-edit.svg" class="system-network-table__icon pointer" - @click="editCellHandler(data, 'value')" + @click="editCellHandler(data)" /> </b-col> </b-row> @@ -85,6 +86,7 @@ export default { return { selectedCell: null, isActive: false, + isIpInvalid: false, fields: [ { key: 'param', @@ -144,22 +146,33 @@ export default { ], }; }, - mounted() { - this.systems = this.systems.map((item) => ({ ...item, isEdit: false })); - }, methods: { - editCellHandler(data, value) { + editCellHandler(data) { this.systems = this.systems.map((item) => ({ ...item, isEdit: false })); this.systems[data.index].isEdit = true; - this.selectedCell = value; + this.selectedCell = this.systems[data.index].value; this.$nextTick(() => this.$refs.input.focus()); }, clickOk(data) { - this.selectedCell = null; - this.systems[data.index].value = this.$refs.input.value; + const EDIT_VALUE = this.selectedCell.trim(); + if (this.validateIP(EDIT_VALUE)) { + this.systems[data.index].value = EDIT_VALUE; + this.isIpInvalid = false; + this.selectedCell = null; + this.systems[data.index].isEdit = false; + } else { + this.isIpInvalid = true; + } }, - clickCancel() { + clickCancel(data) { + this.isIpInvalid = false; this.selectedCell = null; + this.systems[data.index].isEdit = false; + }, + validateIP(ipCheck) { + return /^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/.test( + ipCheck + ); }, DHCPoff() { this.systems[0].value = false; @@ -205,14 +218,15 @@ export default { } .form-control { - border: none; max-height: 16px; width: 60%; - border: none; background-color: transparent; &:focus { box-shadow: none; } + &.validateIP { + color: $red-brand-primary; + } } .popup-container { position: relative; diff --git a/src/views/SystemDescription/Network/InventoryIPv6Settings.vue b/src/views/SystemDescription/Network/InventoryIPv6Settings.vue index 4ff0897a..3de1c414 100644 --- a/src/views/SystemDescription/Network/InventoryIPv6Settings.vue +++ b/src/views/SystemDescription/Network/InventoryIPv6Settings.vue @@ -11,33 +11,34 @@ <template #cell(value)="data"> <b-row v-if="!(typeof data.value === 'boolean')"> <b-form-input - v-if="systems[data.index].isEdit && selectedCell === 'value'" + v-if="systems[data.index].isEdit" ref="input" - v-model="systems[data.index].value" + v-model="selectedCell" class="regular-12px" + :class="{ validateIP: isIpInvalid }" type="text" + @keydown.enter="clickOk(data)" + @keydown.escape="clickCancel(data)" ></b-form-input> <b-col v-else>{{ data.value }}</b-col> <b-col class="system-network-table__icon-col"> - <b-row - v-if="systems[data.index].isEdit && selectedCell === 'value'" - > + <b-row v-if="systems[data.index].isEdit"> <img src="@/assets/images/edit-ok.svg" class="system-network-table__icon pointer" - @click="clickOk" + @click="clickOk(data)" /> <img src="@/assets/images/edit-no.svg" class="system-network-table__icon close_icon pointer" - @click="clickCancel" + @click="clickCancel(data)" /> </b-row> <img v-else src="@/assets/images/icon-edit.svg" class="system-network-table__icon pointer" - @click="editCellHandler(data, 'value')" + @click="editCellHandler(data)" /> </b-col> </b-row> @@ -85,6 +86,7 @@ export default { return { isBusy: true, selectedCell: null, + isIpInvalid: false, isActive: false, fields: [ { @@ -124,43 +126,54 @@ export default { }, { param: 'IP-адрес', - value: '192.168.1.1', + value: 'fe80::1ff:fe23:4567:890a', comment: 'Введите IP адрес', }, { param: 'Маска', - value: '192.168.0.1', + value: 'fe80::1ff:fe23:4567:890a', comment: 'Введите маску сети', }, { param: 'Сетевой шлюз', - value: '192.168.0.1', + value: 'fe80::1ff:fe23:4567:890a', comment: 'Введите сетевой шлюз', }, { param: 'DNS', - value: '8.8.8.8', + value: 'fe80::1ff:fe23:4567:890a', comment: 'Введите DNS', }, ], }; }, - mounted() { - this.systems = this.systems.map((item) => ({ ...item, isEdit: false })); - }, methods: { - editCellHandler(data, value) { + editCellHandler(data) { this.systems = this.systems.map((item) => ({ ...item, isEdit: false })); this.systems[data.index].isEdit = true; - this.selectedCell = value; + this.selectedCell = this.systems[data.index].value; this.$nextTick(() => this.$refs.input.focus()); }, clickOk(data) { - this.selectedCell = null; - this.systems[data.index].value = this.$refs.input.value; + const EDIT_VALUE = this.selectedCell.trim(); + if (this.validateIP(EDIT_VALUE)) { + this.systems[data.index].value = EDIT_VALUE; + this.isIpInvalid = false; + this.selectedCell = null; + this.systems[data.index].isEdit = false; + } else { + this.isIpInvalid = true; + } }, - clickCancel() { + clickCancel(data) { + this.isIpInvalid = false; this.selectedCell = null; + this.systems[data.index].isEdit = false; + }, + validateIP(ipCheck) { + return /(([0-9a-fA-F]{1,4}:){7,7}[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,7}:|([0-9a-fA-F]{1,4}:){1,6}:[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,5}(:[0-9a-fA-F]{1,4}){1,2}|([0-9a-fA-F]{1,4}:){1,4}(:[0-9a-fA-F]{1,4}){1,3}|([0-9a-fA-F]{1,4}:){1,3}(:[0-9a-fA-F]{1,4}){1,4}|([0-9a-fA-F]{1,4}:){1,2}(:[0-9a-fA-F]{1,4}){1,5}|[0-9a-fA-F]{1,4}:((:[0-9a-fA-F]{1,4}){1,6})|:((:[0-9a-fA-F]{1,4}){1,7}|:)|fe80:(:[0-9a-fA-F]{0,4}){0,4}%[0-9a-zA-Z]{1,}|::(ffff(:0{1,4}){0,1}:){0,1}((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])\.){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])|([0-9a-fA-F]{1,4}:){1,4}:((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])\.){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9]))/gi.test( + ipCheck + ); }, DHCPoff() { this.systems[0].value = false; @@ -191,14 +204,15 @@ export default { } .form-control { - border: none; max-height: 16px; width: 60%; - border: none; background-color: transparent; &:focus { box-shadow: none; } + &.validateIP { + color: $red-brand-primary; + } } .popup-container { diff --git a/src/views/SystemDescription/Network/SystemNetwork.vue b/src/views/SystemDescription/Network/SystemNetwork.vue index 4cf264cf..17b48794 100644 --- a/src/views/SystemDescription/Network/SystemNetwork.vue +++ b/src/views/SystemDescription/Network/SystemNetwork.vue @@ -10,7 +10,7 @@ <b-button v-b-toggle.toggle-collapse_1 variant="link" - class="server-info-collapse__button semi-bold-16px" + class="collapse-button semi-bold-16px" @click="ipv4Handler" > {{ $t('SystemDescription.title.Ipv4Settings') }} @@ -29,7 +29,7 @@ <b-button v-b-toggle.toggle-collapse_2 variant="link" - class="server-info-collapse__button semi-bold-16px" + class="collapse-button semi-bold-16px" @click="ipv6Handler" > {{ $t('SystemDescription.title.Ipv6Settings') }} @@ -43,7 +43,6 @@ <i-pv6-settings ref="system" /> </b-collapse> </div> - <modal-user @hidden="activeUser = null" /> </div> </b-container> </template> @@ -85,23 +84,6 @@ export default { padding: 0; } -.server-info-collapse__button { - height: 56px; - width: 100%; - padding: 0 0 0 2rem; - margin: 0; - display: flex; - flex-flow: row nowrap; - justify-content: flex-start; - &:active, - &:focus { - box-shadow: none; - } - &:hover { - color: $text-primary; - } -} - .nav-item { list-style-type: none; } @@ -117,11 +99,4 @@ a { background-color: none; margin: 0 20px 0 auto; } - -.custom-checkbox ::before { - box-shadow: none !important; - border: 2px solid rgba(4, 10, 15, 0.6); - background-color: #fff; - border-radius: 3px; -} </style> diff --git a/src/views/SystemDescription/ServerParametrs/ServereParametrsSection.vue b/src/views/SystemDescription/ServerParametrs/ServereParametrsSection.vue index e9868b05..a40edb41 100644 --- a/src/views/SystemDescription/ServerParametrs/ServereParametrsSection.vue +++ b/src/views/SystemDescription/ServerParametrs/ServereParametrsSection.vue @@ -22,7 +22,6 @@ <b-col> <b-form-checkbox v-model="queueItems[data.index].active" - class="switch-input" switch @change="toggleLoad" > diff --git a/src/views/SystemDescription/SystemEventLogs/SystemEventLogs.vue b/src/views/SystemDescription/SystemEventLogs/SystemEventLogs.vue deleted file mode 100644 index e84d23db..00000000 --- a/src/views/SystemDescription/SystemEventLogs/SystemEventLogs.vue +++ /dev/null @@ -1,624 +0,0 @@ -<template> - <b-container - :style="{ display: 'flex', 'flex-direction': 'column' }" - fluid="xxl pt-0 m-0" - > - <page-title /> - <b-row class="align-items-start"> - <b-col sm="8" xl="6" class="d-sm-flex align-items-end mb-4"> - <search - :placeholder="$t('pageEventLogs.table.searchLogs')" - data-test-id="eventLogs-input-searchLogs" - @change-search="onChangeSearchInput" - @clear-search="onClearSearchInput" - /> - <div class="ml-sm-4"> - <table-cell-count - :filtered-items-count="filteredRows" - :total-number-of-cells="allLogs.length" - ></table-cell-count> - </div> - </b-col> - <b-col sm="8" md="7" xl="6"> - <table-date-filter @change="onChangeDateTimeFilter" /> - </b-col> - </b-row> - <b-row> - <b-col class="text-right"> - <table-filter :filters="tableFilters" @filter-change="onFilterChange" /> - <b-button - variant="link" - :disabled="allLogs.length === 0" - @click="deleteAllLogs" - > - <icon-delete /> {{ $t('global.action.deleteAll') }} - </b-button> - <b-button - variant="primary" - :class="{ disabled: allLogs.length === 0 }" - :download="exportFileNameByDate()" - :href="href" - > - <icon-export /> {{ $t('global.action.exportAll') }} - </b-button> - </b-col> - </b-row> - <b-row> - <b-col> - <table-toolbar - ref="toolbar" - :selected-items-count="selectedRows.length" - :actions="batchActions" - @clear-selected="clearSelectedRows($refs.table)" - @batch-action="onBatchAction" - > - <template #toolbar-buttons> - <b-button variant="primary" @click="resolveLogs"> - {{ $t('pageEventLogs.resolve') }} - </b-button> - <b-button variant="primary" @click="unresolveLogs"> - {{ $t('pageEventLogs.unresolve') }} - </b-button> - <table-toolbar-export - :data="batchExportData" - :file-name="exportFileNameByDate()" - /> - </template> - </table-toolbar> - <b-table - id="table-event-logs" - ref="table" - responsive="md" - selectable - no-select-on-click - sort-icon-left - hover - no-sort-reset - sort-desc - show-empty - sort-by="id" - :fields="fields" - :items="filteredLogs" - :sort-compare="onSortCompare" - :empty-text="$t('global.table.emptyMessage')" - :empty-filtered-text="$t('global.table.emptySearchMessage')" - :per-page="perPage" - :current-page="currentPage" - :filter="searchFilter" - :busy="isBusy" - @filtered="onFiltered" - @row-selected="onRowSelected($event, filteredLogs.length)" - > - <!-- Checkbox column --> - <template #head(checkbox)> - <b-form-checkbox - v-model="tableHeaderCheckboxModel" - data-test-id="eventLogs-checkbox-selectAll" - :indeterminate="tableHeaderCheckboxIndeterminate" - @change="onChangeHeaderCheckbox($refs.table)" - > - <span class="sr-only">{{ $t('global.table.selectAll') }}</span> - </b-form-checkbox> - </template> - <template #cell(checkbox)="row"> - <b-form-checkbox - v-model="row.rowSelected" - :data-test-id="`eventLogs-checkbox-selectRow-${row.index}`" - @change="toggleSelectRow($refs.table, row.index)" - > - <span class="sr-only">{{ $t('global.table.selectItem') }}</span> - </b-form-checkbox> - </template> - - <!-- Expand chevron icon --> - <template #cell(expandRow)="row"> - <b-button - variant="link" - :aria-label="expandRowLabel" - :title="expandRowLabel" - class="btn-icon-only" - @click="toggleRowDetails(row)" - > - <icon-chevron /> - </b-button> - </template> - - <template #row-details="{ item }"> - <b-container fluid> - <b-row> - <b-col> - <dl> - <!-- Name --> - <dt>{{ $t('pageEventLogs.table.name') }}:</dt> - <dd>{{ dataFormatter(item.name) }}</dd> - </dl> - <dl> - <!-- Type --> - <dt>{{ $t('pageEventLogs.table.type') }}:</dt> - <dd>{{ dataFormatter(item.type) }}</dd> - </dl> - </b-col> - <b-col> - <dl> - <!-- Modified date --> - <dt>{{ $t('pageEventLogs.table.modifiedDate') }}:</dt> - <dd v-if="item.modifiedDate"> - {{ item.modifiedDate | formatDate }} - {{ item.modifiedDate | formatTime }} - </dd> - <dd v-else>--</dd> - </dl> - </b-col> - <b-col class="text-nowrap"> - <b-button - class="btn btn-secondary float-right" - :href="item.additionalDataUri" - target="_blank" - > - <icon-download />{{ $t('pageEventLogs.additionalDataUri') }} - </b-button> - </b-col> - </b-row> - </b-container> - </template> - - <!-- Severity column --> - <template #cell(severity)="{ value }"> - <status-icon v-if="value" :status="statusIcon(value)" /> - {{ value }} - </template> - <!-- Date column --> - <template #cell(date)="{ value }"> - <p class="mb-0">{{ value | formatDate }}</p> - <p class="mb-0">{{ value | formatTime }}</p> - </template> - - <!-- Status column --> - <template #cell(status)="row"> - <b-form-checkbox - v-model="row.item.status" - name="switch" - switch - @change="changelogStatus(row.item)" - > - <span v-if="row.item.status"> - {{ $t('pageEventLogs.resolved') }} - </span> - <span v-else> {{ $t('pageEventLogs.unresolved') }} </span> - </b-form-checkbox> - </template> - <template #cell(filterByStatus)="{ value }"> - {{ value }} - </template> - - <!-- Actions column --> - <template #cell(actions)="row"> - <table-row-action - v-for="(action, index) in row.item.actions" - :key="index" - :value="action.value" - :title="action.title" - :row-data="row.item" - :export-name="exportFileNameByDate('export')" - :data-test-id="`eventLogs-button-deleteRow-${row.index}`" - @click-table-action="onTableRowAction($event, row.item)" - > - <template #icon> - <icon-export v-if="action.value === 'export'" /> - <icon-trashcan v-if="action.value === 'delete'" /> - </template> - </table-row-action> - </template> - </b-table> - </b-col> - </b-row> - - <!-- Table pagination --> - <b-row> - <b-col sm="6"> - <b-form-group - class="table-pagination-select" - :label="$t('global.table.itemsPerPage')" - label-for="pagination-items-per-page" - > - <b-form-select - id="pagination-items-per-page" - v-model="perPage" - :options="itemsPerPageOptions" - /> - </b-form-group> - </b-col> - <b-col sm="6"> - <b-pagination - v-model="currentPage" - first-number - last-number - :per-page="perPage" - :total-rows="getTotalRowCount(filteredRows)" - aria-controls="table-event-logs" - /> - </b-col> - </b-row> - </b-container> -</template> - -<script> -import IconDelete from '@carbon/icons-vue/es/trash-can/20'; -import IconTrashcan from '@carbon/icons-vue/es/trash-can/20'; -import IconExport from '@carbon/icons-vue/es/document--export/20'; -import IconChevron from '@carbon/icons-vue/es/chevron--down/20'; -import IconDownload from '@carbon/icons-vue/es/download/20'; -import { omit } from 'lodash'; - -import PageTitle from '@/components/Global/PageTitle'; -import StatusIcon from '@/components/Global/StatusIcon'; -import Search from '@/components/Global/Search'; -import TableCellCount from '@/components/Global/TableCellCount'; -import TableDateFilter from '@/components/Global/TableDateFilter'; -import TableFilter from '@/components/Global/TableFilter'; -import TableRowAction from '@/components/Global/TableRowAction'; -import TableToolbar from '@/components/Global/TableToolbar'; -import TableToolbarExport from '@/components/Global/TableToolbarExport'; - -import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin'; -import TableFilterMixin from '@/components/Mixins/TableFilterMixin'; -import BVPaginationMixin, { - currentPage, - perPage, - itemsPerPageOptions, -} from '@/components/Mixins/BVPaginationMixin'; -import BVTableSelectableMixin, { - selectedRows, - tableHeaderCheckboxModel, - tableHeaderCheckboxIndeterminate, -} from '@/components/Mixins/BVTableSelectableMixin'; -import BVToastMixin from '@/components/Mixins/BVToastMixin'; -import DataFormatterMixin from '@/components/Mixins/DataFormatterMixin'; -import TableSortMixin from '@/components/Mixins/TableSortMixin'; -import TableRowExpandMixin, { - expandRowLabel, -} from '@/components/Mixins/TableRowExpandMixin'; -import SearchFilterMixin, { - searchFilter, -} from '@/components/Mixins/SearchFilterMixin'; - -export default { - components: { - IconDelete, - IconExport, - IconTrashcan, - IconChevron, - IconDownload, - PageTitle, - Search, - StatusIcon, - TableCellCount, - TableFilter, - TableRowAction, - TableToolbar, - TableToolbarExport, - TableDateFilter, - }, - mixins: [ - BVPaginationMixin, - BVTableSelectableMixin, - BVToastMixin, - LoadingBarMixin, - TableFilterMixin, - DataFormatterMixin, - TableSortMixin, - TableRowExpandMixin, - SearchFilterMixin, - ], - beforeRouteLeave(to, from, next) { - // Hide loader if the user navigates to another page - // before request is fulfilled. - this.hideLoader(); - next(); - }, - data() { - return { - isBusy: true, - fields: [ - { - key: 'expandRow', - label: '', - tdClass: 'table-row-expand', - }, - { - key: 'checkbox', - sortable: false, - }, - { - key: 'id', - label: this.$t('pageEventLogs.table.id'), - sortable: true, - }, - { - key: 'severity', - label: this.$t('pageEventLogs.table.severity'), - sortable: true, - tdClass: 'text-nowrap', - }, - { - key: 'date', - label: this.$t('pageEventLogs.table.date'), - sortable: true, - tdClass: 'text-nowrap', - }, - { - key: 'description', - label: this.$t('pageEventLogs.table.description'), - tdClass: 'text-break', - }, - { - key: 'status', - label: this.$t('pageEventLogs.table.status'), - }, - { - key: 'actions', - sortable: false, - label: '', - tdClass: 'text-right text-nowrap', - }, - ], - allLogs: [ - { - expandRow: 'expandRow', - checkbox: false, - id: 1, - severity: 'dfjgsdjlk', - date: '12-23-1220', - status: 'expandRow', - description: 'expandRow', - actions: [ - { - value: 'export', - title: this.$t('global.action.export'), - }, - { - value: 'delete', - title: this.$t('global.action.delete'), - }, - ], - }, - ], - tableFilters: [ - { - key: 'severity', - label: this.$t('pageEventLogs.table.severity'), - values: ['OK', 'Warning', 'Critical'], - }, - { - key: 'filterByStatus', - label: this.$t('pageEventLogs.table.status'), - values: ['Resolved', 'Unresolved'], - }, - ], - expandRowLabel, - activeFilters: [], - batchActions: [ - { - value: 'delete', - label: this.$t('global.action.delete'), - }, - ], - currentPage: currentPage, - filterStartDate: null, - filterEndDate: null, - itemsPerPageOptions: itemsPerPageOptions, - perPage: perPage, - searchFilter: searchFilter, - searchTotalFilteredRows: 0, - selectedRows: selectedRows, - tableHeaderCheckboxModel: tableHeaderCheckboxModel, - tableHeaderCheckboxIndeterminate: tableHeaderCheckboxIndeterminate, - }; - }, - computed: { - href() { - return `data:text/json;charset=utf-8,${this.exportAllLogs()}`; - }, - filteredRows() { - return this.searchFilter - ? this.searchTotalFilteredRows - : this.filteredLogs.length; - }, - // allLogs() { - // return this.$store.getters['eventLog/allEvents'].map((event) => { - // return { - // ...event, - // actions: [ - // { - // value: 'export', - // title: this.$t('global.action.export'), - // }, - // { - // value: 'delete', - // title: this.$t('global.action.delete'), - // }, - // ], - // }; - // }); - // }, - batchExportData() { - return this.selectedRows.map((row) => omit(row, 'actions')); - }, - filteredLogsByDate() { - return this.getFilteredTableDataByDate( - this.allLogs, - this.filterStartDate, - this.filterEndDate - ); - }, - filteredLogs() { - return this.getFilteredTableData( - this.filteredLogsByDate, - this.activeFilters - ); - }, - }, - created() { - this.startLoader(); - this.$store.dispatch('eventLog/getEventLogData').finally(() => { - this.endLoader(); - this.isBusy = false; - }); - }, - methods: { - changelogStatus(row) { - this.$store - .dispatch('eventLog/updateEventLogStatus', { - uri: row.uri, - status: row.status, - }) - .then((success) => { - this.successToast(success); - }) - .catch(({ message }) => this.errorToast(message)); - }, - deleteAllLogs() { - this.$bvModal - .msgBoxConfirm(this.$t('pageEventLogs.modal.deleteAllMessage'), { - title: this.$t('pageEventLogs.modal.deleteAllTitle'), - okTitle: this.$t('global.action.delete'), - okVariant: 'danger', - cancelTitle: this.$t('global.action.cancel'), - }) - .then((deleteConfirmed) => { - if (deleteConfirmed) { - this.$store - .dispatch('eventLog/deleteAllEventLogs', this.allLogs) - .then((message) => this.successToast(message)) - .catch(({ message }) => this.errorToast(message)); - } - }); - }, - deleteLogs(uris) { - this.$store - .dispatch('eventLog/deleteEventLogs', uris) - .then((messages) => { - messages.forEach(({ type, message }) => { - if (type === 'success') { - this.successToast(message); - } else if (type === 'error') { - this.errorToast(message); - } - }); - }); - }, - exportAllLogs() { - { - return this.$store.getters['eventLog/allEvents'].map((eventLogs) => { - const allEventLogsString = JSON.stringify(eventLogs); - return allEventLogsString; - }); - } - }, - onFilterChange({ activeFilters }) { - this.activeFilters = activeFilters; - }, - onSortCompare(a, b, key) { - if (key === 'severity') { - return this.sortStatus(a, b, key); - } - }, - onTableRowAction(action, { uri }) { - if (action === 'delete') { - this.$bvModal - .msgBoxConfirm(this.$tc('pageEventLogs.modal.deleteMessage'), { - title: this.$tc('pageEventLogs.modal.deleteTitle'), - okTitle: this.$t('global.action.delete'), - cancelTitle: this.$t('global.action.cancel'), - }) - .then((deleteConfirmed) => { - if (deleteConfirmed) this.deleteLogs([uri]); - }); - } - }, - onBatchAction(action) { - if (action === 'delete') { - const uris = this.selectedRows.map((row) => row.uri); - this.$bvModal - .msgBoxConfirm( - this.$tc( - 'pageEventLogs.modal.deleteMessage', - this.selectedRows.length - ), - { - title: this.$tc( - 'pageEventLogs.modal.deleteTitle', - this.selectedRows.length - ), - okTitle: this.$t('global.action.delete'), - cancelTitle: this.$t('global.action.cancel'), - } - ) - .then((deleteConfirmed) => { - if (deleteConfirmed) { - if (this.selectedRows.length === this.allLogs.length) { - this.$store - .dispatch( - 'eventLog/deleteAllEventLogs', - this.selectedRows.length - ) - .then((message) => this.successToast(message)) - .catch(({ message }) => this.errorToast(message)); - } else { - this.deleteLogs(uris); - } - } - }); - } - }, - onChangeDateTimeFilter({ fromDate, toDate }) { - this.filterStartDate = fromDate; - this.filterEndDate = toDate; - }, - onFiltered(filteredItems) { - this.searchTotalFilteredRows = filteredItems.length; - }, - // Create export file name based on date - exportFileNameByDate(value) { - let date = new Date(); - date = - date.toISOString().slice(0, 10) + - '_' + - date.toString().split(':').join('-').split(' ')[4]; - let fileName; - if (value === 'export') { - fileName = 'event_log_'; - } else { - fileName = 'all_event_logs_'; - } - return fileName + date; - }, - resolveLogs() { - this.$store - .dispatch('eventLog/resolveEventLogs', this.selectedRows) - .then((messages) => { - messages.forEach(({ type, message }) => { - if (type === 'success') { - this.successToast(message); - } else if (type === 'error') { - this.errorToast(message); - } - }); - }); - }, - unresolveLogs() { - this.$store - .dispatch('eventLog/unresolveEventLogs', this.selectedRows) - .then((messages) => { - messages.forEach(({ type, message }) => { - if (type === 'success') { - this.successToast(message); - } else if (type === 'error') { - this.errorToast(message); - } - }); - }); - }, - }, -}; -</script> diff --git a/src/views/SystemDescription/SystemEventLogs/index.js b/src/views/SystemDescription/SystemEventLogs/index.js deleted file mode 100644 index abe245ae..00000000 --- a/src/views/SystemDescription/SystemEventLogs/index.js +++ /dev/null @@ -1,2 +0,0 @@ -import SystemEventLogs from './SystemEventLogs.vue'; -export default SystemEventLogs; |