diff options
Diffstat (limited to 'src/views/SILA/AnalyticalPanel/AnalyticalPanelPage.vue')
| -rw-r--r-- | src/views/SILA/AnalyticalPanel/AnalyticalPanelPage.vue | 281 |
1 files changed, 218 insertions, 63 deletions
diff --git a/src/views/SILA/AnalyticalPanel/AnalyticalPanelPage.vue b/src/views/SILA/AnalyticalPanel/AnalyticalPanelPage.vue index b736f026..ed4ee19c 100644 --- a/src/views/SILA/AnalyticalPanel/AnalyticalPanelPage.vue +++ b/src/views/SILA/AnalyticalPanel/AnalyticalPanelPage.vue @@ -4,16 +4,18 @@ <div class="main-container"> <div class="tables-container"> <div class="server-table"> - <span class="semi-bold-16px">Состояние сервера</span> + <span class="semi-bold-16px">{{ + $t('global.status.serverStatus') + }}</span> <b-table show-empty responsive="md" class="bootstrap-analytical-table" - :items="server_items" + :items="serverItems" :fields="server_fields" > <template #cell(value)="{ value }"> - <b-col v-if="value" col="1"> + <b-col v-if="value"> <img src="@/assets/images/icon-ok.svg" class="system-network-table__icon" @@ -29,37 +31,144 @@ </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> + <span class="semi-bold-16px">{{ $t('global.action.events') }}</span> + <div id="events-table-wrapper"> + <b-table + show-empty + :sticky-header="stickyHeader" + responsive="md" + class="bootstrap-analytical-table" + :no-border-collapse="true" + :items="eventsItems" + :fields="events_fields" + > + <template #cell(date)="{ value }"> + <img + src="@/assets/images/event-logs/time.svg" + class="sourse__img" + /> + <span class="regular-12px quaternary"> {{ value }} </span> + </template> + <template #cell(type)="{ 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> + <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(eventsItems[index].description.description) }} + </span> + </b-col> + </b-container> + </template> + </b-table> + </div> </div> </div> + <div class="indicators-container"> + <span class="bold-16px">{{ $t('global.status.indicators') }}</span> + <span class="indicators-units regular-12px tretiatry"> + {{ $t('global.units.unit') }}</span + > + <b-button id="popover-choice-1" variant="unstiled"> + <span class="regular-12px units-label"> + {{ + $t(`global.units.${unit === 'Ампераж' ? 'amper' : 'volt'}`) + }}</span + > + <img class="units__icon" src="@/assets/images/icon-chevron-red.svg" /> + </b-button> + </div> + <two-chioce-popover + :id="1" + fitst-option="Ампераж" + second-option="Вольтаж" + :chosen-option="unit" + :first-action="selectAmper" + :second-action="selectVolt" + /> + <!-- <unit-popover + :select-amper="selectAmper" + :select-volt="selectVolt" + :unit="unit" + /> --> + <date-switch + :switch-time-scale="switchTimeScale" + :time-scale="timeScale" + /> + <accessory-table :records="accessoryData.power" /> + <power-table :time-scale="timeScale" /> + <div class="tables-container"> + <span class="semi-bold-16px">Управление</span> + </div> + <control-system /> </div> </b-container> </template> <script> import PageTitle from '@/components/Global/PageTitle'; +import TableRowExpandMixin from '@/components/Mixins/TableRowExpandMixin'; +import DateSwitch from '@/components/Global/SilaComponents/DateSwitch'; +import AccessoryTable from '@/components/Global/SilaComponents/Tables/AccessoryTableWithLabel'; +import ControlSystem from '@/components/Global/SilaComponents/InventoryControlSystem'; +import TwoChiocePopover from '@/components/Global/SilaComponents/TwoChiocePopover'; +import PowerTable from './PowerTable'; +import { AccessoryData, ServerItems, EventsItems } from './helpers'; export default { components: { PageTitle, + DateSwitch, + AccessoryTable, + PowerTable, + ControlSystem, + TwoChiocePopover, }, - + mixins: [TableRowExpandMixin], data() { return { + unit: 'Ампераж', + isActive: false, + timeScale: 'hour', + stickyHeader: '511px', + accessoryData: AccessoryData, + serverItems: ServerItems, + eventsItems: EventsItems, server_fields: [ { key: 'param', label: 'Раздел', formatter: this.dataFormatter, - thClass: 'semi-bold-12px__caps bootstrap-analytical-table__head_bg', + thClass: 'semi-bold-12px__caps bootstrap-analytical-th', class: 'bootstrap-analytical-table__column-first', tdClass: 'regular-12px bootstrap-analytical-table__td', }, @@ -67,33 +176,18 @@ export default { key: 'value', label: 'Статус', formatter: this.dataFormatter, - thClass: 'semi-bold-12px__caps bootstrap-analytical-table__head_bg', + thClass: 'semi-bold-12px__caps bootstrap-analytical-th', 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', + key: 'date', label: 'Время', formatter: this.dataFormatter, - thClass: 'semi-bold-12px__caps bootstrap-analytical-table__head_bg', + thClass: 'semi-bold-12px__caps bootstrap-analytical-th', class: 'bootstrap-analytical-table__column-first', tdClass: 'regular-12px bootstrap-analytical-table__td', }, @@ -101,53 +195,59 @@ export default { key: 'type', label: 'Тип события', formatter: this.dataFormatter, - thClass: 'semi-bold-12px__caps bootstrap-analytical-table__head_bg', + thClass: 'semi-bold-12px__caps bootstrap-analytical-th', + class: 'bootstrap-analytical-table__column-center', tdClass: 'regular-12px bootstrap-analytical-table__td', }, { - key: 'info', + key: 'description', label: 'О событии', formatter: this.dataFormatter, - thClass: 'semi-bold-12px__caps bootstrap-analytical-table__head_bg', - class: 'bootstrap-rounded-table__column-last', + thClass: 'semi-bold-12px__caps bootstrap-analytical-th', + class: 'bootstrap-analytical-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' }, - ], }; }, + methods: { + switchTimeScale(period) { + this.timeScale = period; + }, + selectAmper() { + this.unit = 'Ампераж'; + }, + selectVolt() { + this.unit = 'Вольтаж'; + }, + }, }; </script> <style lang="scss"> .analytical-table__status { width: 10%; } + +#popover-unit-ractive { + padding-left: 5px; +} + +#popover-unit-ampere { + width: 89px; + height: 28px; + border-radius: 8px; + font-weight: 500; + font-size: 12px; +} + +#popover-unit-volt { + width: 89px; + height: 28px; + border-radius: 8px; + font-weight: 500; + font-size: 12px; + // color: $red-brand-primary; +} </style> <style lang="scss" scoped> .tables-container { @@ -164,4 +264,59 @@ export default { .events-table { width: 65%; } + +#events-table-wrapper div { + overflow-y: overlay; + overflow-x: hidden; + &::-webkit-scrollbar { + position: absolute; + width: 10px; + } + &::-webkit-scrollbar-thumb { + border: 4px solid transparent; + border-top: 43px solid transparent; + background: $faint-secondary-primary-20; + border-radius: 16px; + background-clip: content-box; + } +} + +.row-details { + display: block; + height: auto; + width: 30vw; +} + +.errors { + color: $indicators-errors !important; +} + +.warning { + color: $indicators-warning !important; +} + +.information { + color: $indicators-complementary !important; +} + +.indicators-container { + margin-left: 2rem; + display: flex; + align-items: center; + justify-content: flex-start; +} + +.indicators-units { + margin-left: auto; +} + +.units__icon { + margin: 0 32px 0 5px; + cursor: pointer; +} + +.units-label { + cursor: pointer; + color: $red-brand-primary; +} </style> |