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