diff options
author | Maksim Zakharov <m.zakharov@IBS.RU> | 2022-07-28 16:35:22 +0300 |
---|---|---|
committer | Maksim Zakharov <m.zakharov@IBS.RU> | 2022-07-28 16:35:22 +0300 |
commit | 829963143d0a4ac3093a81f932b5956872f10cfa (patch) | |
tree | 734f82d6eb98efac77799cfb14fc2dd879135d6a | |
parent | fb0d2495353d2f45d5d5081155abe0ac7ca9e6c7 (diff) | |
download | webui-vue-829963143d0a4ac3093a81f932b5956872f10cfa.tar.xz |
SILABMC-N206 add power supply page
-rw-r--r-- | src/env/components/AppNavigation/sila.js | 11 | ||||
-rw-r--r-- | src/env/router/sila.js | 9 | ||||
-rw-r--r-- | src/locales/ru-RU.json | 17 | ||||
-rw-r--r-- | src/views/_sila/Fans/Static/FansStaticPage.vue | 2 | ||||
-rw-r--r-- | src/views/_sila/Power/Static/PowerStaticPage.vue | 131 | ||||
-rw-r--r-- | src/views/_sila/Power/Static/SupplyTabs.vue | 70 | ||||
-rw-r--r-- | src/views/_sila/Power/Static/index.js | 2 |
7 files changed, 241 insertions, 1 deletions
diff --git a/src/env/components/AppNavigation/sila.js b/src/env/components/AppNavigation/sila.js index 3319368b..68ff77e1 100644 --- a/src/env/components/AppNavigation/sila.js +++ b/src/env/components/AppNavigation/sila.js @@ -156,6 +156,17 @@ const AppNavigationMixin = { ], }, { + id: 'power-sup', + label: this.$t('appNavigation.powerSup'), + children: [ + { + id: 'power/static', + label: this.$t('appNavigation.staticInfo'), + route: '/power/static', + }, + ], + }, + { id: 'settings', label: this.$t('appNavigation.settings'), children: [ diff --git a/src/env/router/sila.js b/src/env/router/sila.js index dbf4369f..a5495638 100644 --- a/src/env/router/sila.js +++ b/src/env/router/sila.js @@ -34,6 +34,7 @@ import ProcessorsDynamic from '@/views/_sila/Processors/Dynamic'; import MemoryDynamic from '@/views/_sila/Memory/Dynamic'; import FansDynamic from '@/views/_sila/Fans/Dynamic'; import MotherboardDynamic from '@/views/_sila/Motherboard/Dynamic'; +import PowerStatic from '@/views/_sila/Power/Static'; import i18n from '@/i18n'; const routes = [ @@ -197,6 +198,14 @@ const routes = [ }, }, { + path: 'power/static', + name: 'power-static', + component: PowerStatic, + meta: { + title: i18n.t('appPageTitle.powerSup'), + }, + }, + { path: '/security-and-access/sessions', name: 'sessions', component: Sessions, diff --git a/src/locales/ru-RU.json b/src/locales/ru-RU.json index 8b801958..fb23abf7 100644 --- a/src/locales/ru-RU.json +++ b/src/locales/ru-RU.json @@ -136,6 +136,7 @@ "certificates": "@:appPageTitle.certificates", "virtualMedia": "@:appPageTitle.virtualMedia", "power": "@:appPageTitle.power", + "powerSup": "@:appPageTitle.powerSup", "keyClear": "@:appPageTitle.keyClear", "staticInfo": "Статическая информация", "fans": "@:appPageTitle.fans", @@ -146,6 +147,7 @@ "appPageTitle": { "changePassword": "Изменить пароль", "power": "Питание", + "powerSup": "Источники питания", "sessions": "Сессии", "dateTime": "Дата и время", "dumps": "Дампы", @@ -900,6 +902,21 @@ "warning": "Значение предупреждения" } }, + "pagePowerSup": { + "supplies": "Установленые источники питания", + "table": { + "param": "Параметр", + "value": "Значение", + "name": "Название", + "health": "Состояние", + "statusState": "Статус", + "serialNumber": "Серийный номер", + "manufacturer": "Производитель", + "model": "Модель", + "efficiencyPercent": "Процент эффективности", + "powerInputWatts": "Выходное напряжение, Вт" + } +}, "pageSerialOverLan": { "alert": { "disconnectedAlertMessage" : "Система должна быть включена для соединения" diff --git a/src/views/_sila/Fans/Static/FansStaticPage.vue b/src/views/_sila/Fans/Static/FansStaticPage.vue index 3ce9079e..dba6edb1 100644 --- a/src/views/_sila/Fans/Static/FansStaticPage.vue +++ b/src/views/_sila/Fans/Static/FansStaticPage.vue @@ -1,7 +1,7 @@ <template> <b-container fluid="xl"> <page-title :description="$t('appPageTitle.specification')" /> - <page-section :section-small-title="$t('pageFans.installedFans')"> + <page-section :section-title="$t('pageFans.installedFans')"> <b-table responsive="md" show-empty diff --git a/src/views/_sila/Power/Static/PowerStaticPage.vue b/src/views/_sila/Power/Static/PowerStaticPage.vue new file mode 100644 index 00000000..8021b1d8 --- /dev/null +++ b/src/views/_sila/Power/Static/PowerStaticPage.vue @@ -0,0 +1,131 @@ +<template> + <b-container fluid="xl"> + <page-title :description="$t('appPageTitle.specification')" /> + <supply-tabs + :slots="supplies" + :current-slot="currentSlot" + :switch-tab="switchTab" + ></supply-tabs> + <page-section :section-title="$t('pagePowerSup.supplies')" class="pt-3"> + <b-table + responsive="md" + show-empty + hover + :items="items" + :busy="isBusy" + :fields="fields" + :empty-text="$t('global.table.emptyMessage')" + > + <template #cell(value)="{ index, value }"> + <status-icon v-if="index === 1" :status="statusIcon(value)" /> + {{ value }} + </template> + </b-table> + </page-section> + </b-container> +</template> + +<script> +import PageTitle from '@/components/_sila/Global/PageTitle'; +import PageSection from '@/components/_sila/Global/PageSection'; +import SupplyTabs from './SupplyTabs'; + +import DataFormatterMixin from '@/components/_sila/Mixins/DataFormatterMixin'; +import LoadingBarMixin from '@/components/_sila/Mixins/LoadingBarMixin'; + +import StatusIcon from '@/components/_sila//Global/StatusIcon'; + +export default { + components: { PageTitle, PageSection, SupplyTabs, StatusIcon }, + mixins: [DataFormatterMixin, LoadingBarMixin], + data() { + return { + currentSlot: null, + isBusy: true, + fields: [ + { + key: 'param', + label: this.$t('pagePowerSup.table.param'), + formatter: this.dataFormatter, + thStyle: { width: '50%' }, + }, + { + key: 'value', + label: this.$t('pagePowerSup.table.value'), + formatter: this.dataFormatter, + thStyle: { width: '50%' }, + tdClass: 'text-nowrap', + }, + ], + }; + }, + computed: { + supplies() { + return this.$store.getters['powerSupply/powerSupplies']; + }, + currentItem() { + return this.supplies?.find((el) => { + if (el.id === this.currentSlot) return el; + }); + }, + items() { + return [ + { + param: this.$t('pagePowerSup.table.name'), + value: this.currentItem?.name, + }, + { + param: this.$t('pagePowerSup.table.health'), + value: this.currentItem?.health, + }, + { + param: this.$t('pagePowerSup.table.statusState'), + value: this.currentItem?.statusState, + }, + { + param: this.$t('pagePowerSup.table.serialNumber'), + value: this.currentItem?.serialNumber, + }, + { + param: this.$t('pagePowerSup.table.manufacturer'), + value: this.currentItem?.manufacturer, + }, + { + param: this.$t('pagePowerSup.table.model'), + value: this.currentItem?.model, + }, + { + param: this.$t('pagePowerSup.table.efficiencyPercent'), + value: this.currentItem?.efficiencyPercent, + }, + { + param: this.$t('pagePowerSup.table.powerInputWatts'), + value: this.currentItem?.powerInputWatts, + }, + ]; + }, + }, + + watch: { + supplies() { + if (this.currentSlot === null) { + this.currentSlot = this.supplies[0]?.id; + } + }, + }, + + created() { + this.startLoader(); + this.$store.dispatch('powerSupply/getAllPowerSupplies').finally(() => { + this.endLoader(); + this.isBusy = false; + }); + }, + + methods: { + switchTab(id) { + this.currentSlot = id; + }, + }, +}; +</script> diff --git a/src/views/_sila/Power/Static/SupplyTabs.vue b/src/views/_sila/Power/Static/SupplyTabs.vue new file mode 100644 index 00000000..7a1ea20d --- /dev/null +++ b/src/views/_sila/Power/Static/SupplyTabs.vue @@ -0,0 +1,70 @@ +<template> + <b-col + ref="content" + class="d-flex align-items-center data-tab" + @wheel.prevent="wheelItBetter($event)" + > + <span + v-for="item in slots" + :key="item.id" + :class="{ 'tab-active': currentSlot === item.id }" + @click="switchTab(item.id)" + >{{ item.id }}</span + > + </b-col> +</template> + +<script> +export default { + props: { + slots: { + type: Array, + default: null, + }, + currentSlot: { + type: String, + default: null, + }, + switchTab: { + type: Function, + required: true, + }, + }, + data() { + return { + 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> +.data-tab { + height: 48px; + max-width: 150%; + width: auto; + margin: -2rem -1.95rem 0px -2rem; + padding-left: 2rem; + overflow-x: auto; + @include media-breakpoint-down(md) { + padding-left: 1rem; + padding-right: 1rem; + margin-left: -0.95rem; + } + border-bottom: 1px solid $gray-10; + gap: 24px; +} + +.tab-active { + color: $primary; + transition: ease-in 0.15s; +} +</style> diff --git a/src/views/_sila/Power/Static/index.js b/src/views/_sila/Power/Static/index.js new file mode 100644 index 00000000..14c4ef64 --- /dev/null +++ b/src/views/_sila/Power/Static/index.js @@ -0,0 +1,2 @@ +import PowerStaticPage from './PowerStaticPage.vue'; +export default PowerStaticPage; |