diff options
Diffstat (limited to 'src/views/SILA/AnalyticalPanel')
-rw-r--r-- | src/views/SILA/AnalyticalPanel/AnalyticalPanelPage.vue | 281 | ||||
-rw-r--r-- | src/views/SILA/AnalyticalPanel/PowerTable.vue | 82 | ||||
-rw-r--r-- | src/views/SILA/AnalyticalPanel/TemperatureTable.vue | 115 | ||||
-rw-r--r-- | src/views/SILA/AnalyticalPanel/helpers.js | 200 |
4 files changed, 615 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> diff --git a/src/views/SILA/AnalyticalPanel/PowerTable.vue b/src/views/SILA/AnalyticalPanel/PowerTable.vue new file mode 100644 index 00000000..27bb4efa --- /dev/null +++ b/src/views/SILA/AnalyticalPanel/PowerTable.vue @@ -0,0 +1,82 @@ +<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', + }, + }, + computed: { + chartOptions() { + return { + line: { + chart: { + type: 'areaspline', + margin: [12, 50, 32, 60], + height: '320px', + }, + title: null, + xAxis: { + categories: setTime(6, this.timeScale), + title: null, + labels: { + step: 1, + }, + minorGridLineColor: '#1A3E5B1A', + }, + yAxis: { + categories: setCategories(2.5, 'A'), + min: 0, + max: 4, + title: null, + tickInterval: 1, + minorGridLineColor: '#1A3E5B1A', + }, + series: Series['power'].map((item) => ({ + ...item, + marker: { + enabled: false, + }, + })), + legend: { + enabled: false, + }, + tooltip: { + enabled: false, + crosshairs: false, + }, + plotOptions: { + series: { + showInLegend: true, + }, + areaspline: { + fillOpacity: 0, + }, + }, + }, + }; + }, + }, +}; +</script> +<style lang="scss"> +.highcharts-credits { + display: none; +} + +.highcharts-plot-line-label { + transform: translate(-15px, 0) !important; +} +</style> diff --git a/src/views/SILA/AnalyticalPanel/TemperatureTable.vue b/src/views/SILA/AnalyticalPanel/TemperatureTable.vue new file mode 100644 index 00000000..ae52062a --- /dev/null +++ b/src/views/SILA/AnalyticalPanel/TemperatureTable.vue @@ -0,0 +1,115 @@ +<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: 'areaspline', + 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, + }, + areaspline: { + fillOpacity: 0, + }, + }, + }, + }; + }, + }, +}; +</script> +<style lang="scss"> +.highcharts-credits { + display: none; +} + +.highcharts-plot-line-label { + transform: translate(-15px, 0) !important; +} +</style> diff --git a/src/views/SILA/AnalyticalPanel/helpers.js b/src/views/SILA/AnalyticalPanel/helpers.js new file mode 100644 index 00000000..8655afc3 --- /dev/null +++ b/src/views/SILA/AnalyticalPanel/helpers.js @@ -0,0 +1,200 @@ +export const colors = [ + '#CB32F1', + '#F18638', + '#139BB9', + '#E1AB17', + '#175AE1', + '#13B937', +]; + +export const Series = { + power: [ + { + name: 'Sean', + data: [1, 1, 2.7, 0.5, 0.2, 1], + color: '#CB32F1', + }, + { + name: 'Ivan', + data: [0.4, 0.3, 1, 1.4, 2, 0.4], + color: '#F18638', + }, + { + name: 'Brendan', + data: [0.5, 2.5, 1, 0.4, 1, 3], + color: '#139BB9', + }, + ], +}; + +export const setTime = (count) => { + const arr = [...new Array(count)].map(() => ''); + for (let i = 0; i < arr.length; i++) { + arr[i] = `15:${i}0`; + } + return arr; +}; + +export const setCategories = (count, desc) => { + const arr = []; + for (let i = 0; i < count; i += 0.5) { + arr.push(`${i} ${desc}`); + } + return arr; +}; + +export const AccessoryData = { + power: { + fields: [ + { + key: 'name', + label: 'Наименование', + thClass: 'bootstrap-fans-table__th semi-bold-12px', + tdClass: 'bootstrap-fans-table__td light-12px', + }, + { + key: 'power', + label: 'Текущее значение тока, А', + thClass: 'bootstrap-fans-table__th semi-bold-12px', + tdClass: 'bootstrap-fans-table__td light-12px', + }, + ], + items: [ + { + name: 'Источникк питания 1', + power: '1,3 A', + }, + { + name: 'Источникк питания 2', + power: '1,8 A', + }, + { + name: 'Источникк питания 3', + power: '1,6 A', + }, + ], + }, +}; + +export const ServerItems = [ + { 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 }, +]; + +export const EventsItems = [ + { + date: '23.11.2021 в 13.36', + type: 'Критические', + description: { + name: 'Имя источника событий', + description: 'Краткое описание ошибки или сообщени....', + }, + }, + { + date: '23.11.2021 в 13.36', + type: 'Критические', + description: { + name: 'Имя источника событий', + description: 'Краткое описание ошибки или сообщени....', + }, + }, + { + date: '23.11.2021 в 13.36', + type: 'Критические', + description: { + name: 'Имя источника событий', + description: 'Краткое описание ошибки или сообщени....', + }, + }, + { + date: '23.11.2021 в 13.36', + type: 'Критические', + description: { + name: 'Имя источника событий', + description: 'Краткое описание ошибки или сообщени....', + }, + }, + { + date: '23.11.2021 в 13.36', + type: 'Критические', + description: { + name: 'Имя источника событий', + description: 'Краткое описание ошибки или сообщени....', + }, + }, + { + date: '23.11.2021 в 13.36', + type: 'Критические', + description: { + name: 'Имя источника событий', + description: 'Краткое описание ошибки или сообщени....', + }, + }, + { + date: '23.11.2021 в 13.36', + type: 'Критические', + description: { + name: 'Имя источника событий', + description: 'Краткое описание ошибки или сообщени....', + }, + }, + { + date: '23.11.2021 в 13.36', + type: 'Критические', + description: { + name: 'Имя источника событий', + description: 'Краткое описание ошибки или сообщени....', + }, + }, + { + date: '23.11.2021 в 13.36', + type: 'Критические', + description: { + name: 'Имя источника событий', + description: 'Краткое описание ошибки или сообщени....', + }, + }, + { + date: '23.11.2021 в 13.36', + type: 'Критические', + description: { + name: 'Имя источника событий', + description: 'Краткое описание ошибки или сообщени....', + }, + }, + { + date: '23.11.2021 в 13.36', + type: 'Критические', + description: { + name: 'Имя источника событий', + description: 'Краткое описание ошибки или сообщени....', + }, + }, + { + date: '23.11.2021 в 13.36', + type: 'Критические', + description: { + name: 'Имя источника событий', + description: 'Краткое описание ошибки или сообщени....', + }, + }, + { + date: '23.11.2021 в 13.36', + type: 'Критические', + description: { + name: 'Имя источника событий', + description: 'Краткое описание ошибки или сообщени....', + }, + }, +]; |