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 /src/views/_sila | |
parent | fb0d2495353d2f45d5d5081155abe0ac7ca9e6c7 (diff) | |
download | webui-vue-829963143d0a4ac3093a81f932b5956872f10cfa.tar.xz |
SILABMC-N206 add power supply page
Diffstat (limited to 'src/views/_sila')
-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 |
4 files changed, 204 insertions, 1 deletions
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; |