diff options
Diffstat (limited to 'src/views/_sila/SILA/AnalyticalPanel/AnalyticalPanelPage.vue')
| -rw-r--r-- | src/views/_sila/SILA/AnalyticalPanel/AnalyticalPanelPage.vue | 272 |
1 files changed, 272 insertions, 0 deletions
diff --git a/src/views/_sila/SILA/AnalyticalPanel/AnalyticalPanelPage.vue b/src/views/_sila/SILA/AnalyticalPanel/AnalyticalPanelPage.vue new file mode 100644 index 00000000..533fbfa1 --- /dev/null +++ b/src/views/_sila/SILA/AnalyticalPanel/AnalyticalPanelPage.vue @@ -0,0 +1,272 @@ +<template> + <b-container fluid="xxl pt-0 m-0"> + <page-title :description="$t('appNavigation.analyticalPanel')" /> + <div class="tables-container"> + <div class="server-table"> + <span class="semi-bold-16px">{{ + $t('global.status.serverStatus') + }}</span> + <b-table + show-empty + responsive="md" + class="table-analytical" + no-border-collapse + :items="serverItems" + :fields="server_fields" + > + <template #cell(value)="{ value }"> + <b-col v-if="value"> + <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">{{ $t('global.action.events') }}</span> + <div id="events-table-wrapper"> + <b-table + show-empty + :sticky-header="stickyHeader" + responsive="md" + class="table-analytical" + no-border-collapse + :items="eventsItems" + :fields="events_fields" + > + <template #cell(date)="{ value }"> + <img + src="@/assets/images/_sila/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="unstyled"> + <span class="regular-12px units-label"> + {{ + $t(`global.units.${unit === 'Ампераж' ? 'amper' : 'volt'}`) + }}</span + > + <img class="units__icon" src="@/assets/images/_sila/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" + /> + <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 /> + </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, + }, + { + key: 'value', + label: 'Статус', + formatter: this.dataFormatter, + thStyle: { width: '10%' }, + }, + ], + events_fields: [ + { + key: 'date', + label: 'Время', + formatter: this.dataFormatter, + }, + { + key: 'type', + label: 'Тип события', + formatter: this.dataFormatter, + }, + { + key: 'description', + label: 'О событии', + formatter: this.dataFormatter, + }, + ], + }; + }, + methods: { + switchTimeScale(period) { + this.timeScale = period; + }, + selectAmper() { + this.unit = 'Ампераж'; + }, + selectVolt() { + this.unit = 'Вольтаж'; + }, + }, +}; +</script> +<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%; +} + +#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> |