diff options
Diffstat (limited to 'src/views/_sila/Power/Dynamic')
-rw-r--r-- | src/views/_sila/Power/Dynamic/CurrentInput.vue | 185 | ||||
-rw-r--r-- | src/views/_sila/Power/Dynamic/CurrentOutput.vue | 170 | ||||
-rw-r--r-- | src/views/_sila/Power/Dynamic/PowerDynamicPage.vue | 87 | ||||
-rw-r--r-- | src/views/_sila/Power/Dynamic/PowerInput.vue | 185 | ||||
-rw-r--r-- | src/views/_sila/Power/Dynamic/PowerOutput.vue | 169 | ||||
-rw-r--r-- | src/views/_sila/Power/Dynamic/PowerTemp.vue | 186 | ||||
-rw-r--r-- | src/views/_sila/Power/Dynamic/VoltInput.vue | 184 | ||||
-rw-r--r-- | src/views/_sila/Power/Dynamic/VoltOutput.vue | 169 | ||||
-rw-r--r-- | src/views/_sila/Power/Dynamic/index.js | 2 |
9 files changed, 1337 insertions, 0 deletions
diff --git a/src/views/_sila/Power/Dynamic/CurrentInput.vue b/src/views/_sila/Power/Dynamic/CurrentInput.vue new file mode 100644 index 00000000..ad1a1608 --- /dev/null +++ b/src/views/_sila/Power/Dynamic/CurrentInput.vue @@ -0,0 +1,185 @@ +<template> + <collapse + id="collapse_InputCur" + default-open + :title="$t('pagePowerSup.InputCurrent')" + > + <template #image> + <img src="@/assets/images/_sila/collapsed/current.svg" /> + </template> + <page-section> + <b-row class="align-items-end p-2"> + <b-col xs="12" md="6" lg="4" class="pt-2"> + <b-form-group :label="$t('pagePowerSup.labels.warning')"> + <b-form-input + v-model="warning" + type="number" + :min="0" + :max="shutdown" + ></b-form-input> + </b-form-group> + </b-col> + <b-col xs="12" md="6" lg="4" class="pt-2"> + <b-form-group :label="$t('pagePowerSup.labels.shutdown')"> + <b-form-input + v-model="shutdown" + type="number" + :min="warning" + :max="10" + > + </b-form-input> + </b-form-group> + </b-col> + <b-col xs="12" md="6" lg="3" class="pt-2"> + <b-button variant="primary" style="height: 35px"> + {{ $t('global.action.save') }} + </b-button> + </b-col> + </b-row> + <chart + type="current" + :time-scale="timeScale" + :data="filteredItems" + float + :colors="colors" + :warning="+warning" + :shutdown="+shutdown" + ></chart> + <b-table + responsive="md" + show-empty + table-variant="accessory" + hover + :items="items" + :fields="fields" + :empty-text="$t('global.table.emptyMessage')" + :busy="isBusy" + > + <template #cell(name)="{ value, index }"> + <div + class="item-color" + :style="`background-color: ${colors[index]}`" + ></div> + {{ value }} + </template> + <template #cell(minDate)="{ value }"> + <span style="color: rgb(12, 28, 41)"> + {{ value.time }} + </span> + <span> + {{ value.date }} + </span> + </template> + <template #cell(maxDate)="{ value }"> + <span style="color: rgb(12, 28, 41)"> + {{ value.time }} + </span> + <span> + {{ value.date }} + </span> + </template> + </b-table> + </page-section> + </collapse> +</template> +<script> +import Chart from '@/components/_sila/Global/Chart'; +import PageSection from '@/components/Global/PageSection'; + +import DataFormatterMixin from '@/components/_sila/Mixins/DataFormatterMixin'; +import LoadingBarMixin from '@/components/_sila/Mixins/LoadingBarMixin'; +import TableFilterMixin from '@/components/_sila/Mixins/TableFilterMixin'; +import Collapse from '@/components/_sila/Global/Collapse'; + +import { getItems } from '@/utilities/_sila/metricProperties'; +import { psuFilter } from '@/utilities/_sila/psuFilter'; + +export default { + components: { PageSection, Chart, Collapse }, + mixins: [DataFormatterMixin, LoadingBarMixin, TableFilterMixin], + props: { + timeScale: { + type: String, + default: 'hour', + }, + }, + data() { + return { + warning: 5, + shutdown: 6, + isBusy: true, + fields: [ + { + key: 'name', + label: this.$t('pagePowerSup.table.nameModule'), + thStyle: { width: '25%' }, + }, + { + key: 'current', + label: this.$t('pagePowerSup.table.currentCurrent'), + }, + { + key: 'min', + label: this.$t('pagePowerSup.table.minCurrent'), + }, + { + key: 'minDate', + label: this.$t('pagePowerSup.table.minDate'), + }, + { + key: 'max', + label: this.$t('pagePowerSup.table.maxCurrent'), + }, + { + key: 'maxDate', + label: this.$t('pagePowerSup.table.maxDate'), + }, + ], + }; + }, + computed: { + items() { + return getItems(this.filteredItems, 3); + }, + + filteredItems() { + return psuFilter(this.allSensors, 'Input'); + }, + + allSensors() { + return this.timeScale === 'hour' + ? this.$store.getters['powerSupply/psuCurrentLastHour'] + : this.$store.getters['powerSupply/psuCurrent']; + }, + + colors() { + return this.$randomColor({ + count: this.items?.length, + hue: 'random', + luminosity: 'random', + }); + }, + }, + watch: { + timeScale() { + this.loadData(); + }, + }, + created() { + this.loadData(); + }, + methods: { + loadData() { + let payload = { metricsName: 'psu_current', lastHour: false }; + if (this.timeScale === 'hour') { + payload.lastHour = true; + } + + this.$store.dispatch('powerSupply/getPsu', payload).finally(() => { + this.$root.$emit('psu-current'); + this.isBusy = false; + }); + }, + }, +}; +</script> diff --git a/src/views/_sila/Power/Dynamic/CurrentOutput.vue b/src/views/_sila/Power/Dynamic/CurrentOutput.vue new file mode 100644 index 00000000..a27a5a57 --- /dev/null +++ b/src/views/_sila/Power/Dynamic/CurrentOutput.vue @@ -0,0 +1,170 @@ +<template> + <collapse + id="collapse_OutputCur" + default-open + :title="$t('pagePowerSup.OutputCurrent')" + > + <template #image> + <img src="@/assets/images/_sila/collapsed/current.svg" /> + </template> + <page-section> + <b-row class="align-items-end p-2"> + <b-col xs="12" md="6" lg="4" class="pt-2"> + <b-form-group :label="$t('pagePowerSup.labels.warning')"> + <b-form-input + v-model="warning" + type="number" + :min="0" + :max="shutdown" + ></b-form-input> + </b-form-group> + </b-col> + <b-col xs="12" md="6" lg="4" class="pt-2"> + <b-form-group :label="$t('pagePowerSup.labels.shutdown')"> + <b-form-input + v-model="shutdown" + type="number" + :min="warning" + :max="10" + > + </b-form-input> + </b-form-group> + </b-col> + <b-col xs="12" md="6" lg="3" class="pt-2"> + <b-button variant="primary" style="height: 35px"> + {{ $t('global.action.save') }} + </b-button> + </b-col> + </b-row> + <chart + type="current" + :time-scale="timeScale" + :data="filteredItems" + float + :colors="colors" + :warning="+warning" + :shutdown="+shutdown" + ></chart> + <b-table + responsive="md" + show-empty + table-variant="accessory" + hover + :items="items" + :fields="fields" + :empty-text="$t('global.table.emptyMessage')" + :busy="isBusy" + > + <template #cell(name)="{ value, index }"> + <div + class="item-color" + :style="`background-color: ${colors[index]}`" + ></div> + {{ value }} + </template> + <template #cell(minDate)="{ value }"> + <span style="color: rgb(12, 28, 41)"> + {{ value.time }} + </span> + <span> + {{ value.date }} + </span> + </template> + <template #cell(maxDate)="{ value }"> + <span style="color: rgb(12, 28, 41)"> + {{ value.time }} + </span> + <span> + {{ value.date }} + </span> + </template> + </b-table> + </page-section> + </collapse> +</template> +<script> +import Chart from '@/components/_sila/Global/Chart'; +import PageSection from '@/components/Global/PageSection'; + +import DataFormatterMixin from '@/components/_sila/Mixins/DataFormatterMixin'; +import LoadingBarMixin from '@/components/_sila/Mixins/LoadingBarMixin'; +import TableFilterMixin from '@/components/_sila/Mixins/TableFilterMixin'; +import Collapse from '@/components/_sila/Global/Collapse'; + +import { getItems } from '@/utilities/_sila/metricProperties'; +import { psuFilter } from '@/utilities/_sila/psuFilter'; + +export default { + components: { PageSection, Chart, Collapse }, + mixins: [DataFormatterMixin, LoadingBarMixin, TableFilterMixin], + props: { + timeScale: { + type: String, + default: 'hour', + }, + }, + data() { + return { + warning: 7, + shutdown: 8, + isBusy: true, + fields: [ + { + key: 'name', + label: this.$t('pagePowerSup.table.nameModule'), + thStyle: { width: '25%' }, + }, + { + key: 'current', + label: this.$t('pagePowerSup.table.currentCurrent'), + }, + { + key: 'min', + label: this.$t('pagePowerSup.table.minCurrent'), + }, + { + key: 'minDate', + label: this.$t('pagePowerSup.table.minDate'), + }, + { + key: 'max', + label: this.$t('pagePowerSup.table.maxCurrent'), + }, + { + key: 'maxDate', + label: this.$t('pagePowerSup.table.maxDate'), + }, + ], + }; + }, + + computed: { + items() { + return getItems(this.filteredItems); + }, + + filteredItems() { + return psuFilter(this.allSensors, 'Output'); + }, + + allSensors() { + return this.timeScale === 'hour' + ? this.$store.getters['powerSupply/psuCurrentLastHour'] + : this.$store.getters['powerSupply/psuCurrent']; + }, + + colors() { + return this.$randomColor({ + count: this.items?.length, + hue: 'random', + luminosity: 'random', + }); + }, + }, + watch: { + items() { + this.items.length ? (this.isBusy = false) : (this.isBusy = true); + }, + }, +}; +</script> diff --git a/src/views/_sila/Power/Dynamic/PowerDynamicPage.vue b/src/views/_sila/Power/Dynamic/PowerDynamicPage.vue new file mode 100644 index 00000000..45e7eaf9 --- /dev/null +++ b/src/views/_sila/Power/Dynamic/PowerDynamicPage.vue @@ -0,0 +1,87 @@ +<template> + <b-container fluid="xl"> + <page-title :description="$t('appPageTitle.dynamicInformation')" /> + <table-date-picker :time-scale="timeScale" @changePeriod="onChangePeriod" /> + <power-temp :time-scale="timeScale"></power-temp> + <volt-input :time-scale="timeScale"></volt-input> + <volt-output :time-scale="timeScale"></volt-output> + <power-input :time-scale="timeScale"></power-input> + <power-output :time-scale="timeScale"></power-output> + <current-input :time-scale="timeScale"></current-input> + <current-output :time-scale="timeScale"></current-output> + </b-container> +</template> +<script> +import PageTitle from '@/components/_sila/Global/PageTitle'; + +import DataFormatterMixin from '@/components/_sila/Mixins/DataFormatterMixin'; +import TableDatePicker from '@/components/_sila/Global/TableDatePicker'; +import LoadingBarMixin from '@/components/_sila/Mixins/LoadingBarMixin'; +import TableFilterMixin from '@/components/_sila/Mixins/TableFilterMixin'; + +import PowerTemp from './PowerTemp'; +import VoltInput from './VoltInput'; +import VoltOutput from './VoltOutput'; +import PowerInput from './PowerInput'; +import PowerOutput from './PowerOutput'; +import CurrentInput from './CurrentInput'; +import CurrentOutput from './CurrentOutput'; + +export default { + components: { + PowerTemp, + VoltInput, + VoltOutput, + PowerInput, + PowerOutput, + CurrentInput, + CurrentOutput, + PageTitle, + TableDatePicker, + }, + mixins: [DataFormatterMixin, LoadingBarMixin, TableFilterMixin], + data() { + return { + timeScale: 'hour', + }; + }, + + created() { + this.startProgress(); + }, + methods: { + resetZoom() { + const resetButton = document.querySelector('.highcharts-reset-zoom'); + if (!resetButton) { + return; + } + resetButton.dispatchEvent(new Event('click')); + }, + + onChangePeriod(period) { + this.timeScale = period; + this.startProgress(); + this.resetZoom(); + }, + startProgress() { + this.startLoader(); + const psuTemp = new Promise((resolve) => { + this.$root.$on('psu-temp', () => resolve()); + }); + const psuVolt = new Promise((resolve) => { + this.$root.$on('psu-volt', () => resolve()); + }); + const psuPower = new Promise((resolve) => { + this.$root.$on('psu-power', () => resolve()); + }); + const psuCurrent = new Promise((resolve) => { + this.$root.$on('psu-current', () => resolve()); + }); + + Promise.all([psuTemp, psuVolt, psuPower, psuCurrent]).finally(() => + this.endLoader() + ); + }, + }, +}; +</script> diff --git a/src/views/_sila/Power/Dynamic/PowerInput.vue b/src/views/_sila/Power/Dynamic/PowerInput.vue new file mode 100644 index 00000000..1b633ecb --- /dev/null +++ b/src/views/_sila/Power/Dynamic/PowerInput.vue @@ -0,0 +1,185 @@ +<template> + <collapse + id="collapse_InputPower" + default-open + :title="$t('pagePowerSup.InputPower')" + > + <template #image> + <img src="@/assets/images/_sila/collapsed/power.svg" /> + </template> + <page-section> + <b-row class="align-items-end p-2"> + <b-col xs="12" md="6" lg="4" class="pt-2"> + <b-form-group :label="$t('pagePowerSup.labels.warning')"> + <b-form-input + v-model="warning" + type="number" + :min="0" + :max="shutdown" + ></b-form-input> + </b-form-group> + </b-col> + <b-col xs="12" md="6" lg="4" class="pt-2"> + <b-form-group :label="$t('pagePowerSup.labels.shutdown')"> + <b-form-input + v-model="shutdown" + type="number" + :min="warning" + :max="100" + > + </b-form-input> + </b-form-group> + </b-col> + <b-col xs="12" md="6" lg="3" class="pt-2"> + <b-button variant="primary" style="height: 35px"> + {{ $t('global.action.save') }} + </b-button> + </b-col> + </b-row> + <chart + type="power" + :time-scale="timeScale" + :data="filteredItems" + :colors="colors" + :warning="+warning" + :shutdown="+shutdown" + ></chart> + <b-table + responsive="md" + show-empty + table-variant="accessory" + hover + :items="items" + :fields="fields" + :empty-text="$t('global.table.emptyMessage')" + :busy="isBusy" + > + <template #cell(name)="{ value, index }"> + <div + class="item-color" + :style="`background-color: ${colors[index]}`" + ></div> + {{ value }} + </template> + <template #cell(minDate)="{ value }"> + <span style="color: rgb(12, 28, 41)"> + {{ value.time }} + </span> + <span> + {{ value.date }} + </span> + </template> + <template #cell(maxDate)="{ value }"> + <span style="color: rgb(12, 28, 41)"> + {{ value.time }} + </span> + <span> + {{ value.date }} + </span> + </template> + </b-table> + </page-section> + </collapse> +</template> +<script> +import Chart from '@/components/_sila/Global/Chart'; +import PageSection from '@/components/Global/PageSection'; + +import DataFormatterMixin from '@/components/_sila/Mixins/DataFormatterMixin'; +import LoadingBarMixin from '@/components/_sila/Mixins/LoadingBarMixin'; +import TableFilterMixin from '@/components/_sila/Mixins/TableFilterMixin'; +import Collapse from '@/components/_sila/Global/Collapse'; + +import { getItems } from '@/utilities/_sila/metricProperties'; +import { psuFilter } from '@/utilities/_sila/psuFilter'; + +export default { + components: { PageSection, Chart, Collapse }, + mixins: [DataFormatterMixin, LoadingBarMixin, TableFilterMixin], + props: { + timeScale: { + type: String, + default: 'hour', + }, + }, + data() { + return { + warning: 72, + shutdown: 95, + isBusy: true, + fields: [ + { + key: 'name', + label: this.$t('pagePowerSup.table.nameModule'), + thStyle: { width: '25%' }, + }, + { + key: 'current', + label: this.$t('pagePowerSup.table.currentPower'), + }, + { + key: 'min', + label: this.$t('pagePowerSup.table.minPower'), + }, + { + key: 'minDate', + label: this.$t('pagePowerSup.table.minDate'), + }, + { + key: 'max', + label: this.$t('pagePowerSup.table.maxPower'), + }, + { + key: 'maxDate', + label: this.$t('pagePowerSup.table.maxDate'), + }, + ], + }; + }, + + computed: { + items() { + return getItems(this.filteredItems); + }, + + filteredItems() { + return psuFilter(this.allSensors, 'Input'); + }, + + allSensors() { + return this.timeScale === 'hour' + ? this.$store.getters['powerSupply/psuPowerLastHour'] + : this.$store.getters['powerSupply/psuPower']; + }, + + colors() { + return this.$randomColor({ + count: this.items?.length, + hue: 'random', + luminosity: 'random', + }); + }, + }, + watch: { + timeScale() { + this.loadData(); + }, + }, + created() { + this.loadData(); + }, + methods: { + loadData() { + let payload = { metricsName: 'psu_power', lastHour: false }; + if (this.timeScale === 'hour') { + payload.lastHour = true; + } + + this.$store.dispatch('powerSupply/getPsu', payload).finally(() => { + this.$root.$emit('psu-power'); + this.isBusy = false; + }); + }, + }, +}; +</script> diff --git a/src/views/_sila/Power/Dynamic/PowerOutput.vue b/src/views/_sila/Power/Dynamic/PowerOutput.vue new file mode 100644 index 00000000..6402801e --- /dev/null +++ b/src/views/_sila/Power/Dynamic/PowerOutput.vue @@ -0,0 +1,169 @@ +<template> + <collapse + id="collapse_OutputPower" + default-open + :title="$t('pagePowerSup.OutputPower')" + > + <template #image> + <img src="@/assets/images/_sila/collapsed/power.svg" /> + </template> + <page-section> + <b-row class="align-items-end p-2"> + <b-col xs="12" md="6" lg="4" class="pt-2"> + <b-form-group :label="$t('pagePowerSup.labels.warning')"> + <b-form-input + v-model="warning" + type="number" + :min="0" + :max="shutdown" + ></b-form-input> + </b-form-group> + </b-col> + <b-col xs="12" md="6" lg="4" class="pt-2"> + <b-form-group :label="$t('pagePowerSup.labels.shutdown')"> + <b-form-input + v-model="shutdown" + type="number" + :min="warning" + :max="100" + > + </b-form-input> + </b-form-group> + </b-col> + <b-col xs="12" md="6" lg="3" class="pt-2"> + <b-button variant="primary" style="height: 35px"> + {{ $t('global.action.save') }} + </b-button> + </b-col> + </b-row> + <chart + type="power" + :time-scale="timeScale" + :data="filteredItems" + :colors="colors" + :warning="+warning" + :shutdown="+shutdown" + ></chart> + <b-table + responsive="md" + show-empty + table-variant="accessory" + hover + :items="items" + :fields="fields" + :empty-text="$t('global.table.emptyMessage')" + :busy="isBusy" + > + <template #cell(name)="{ value, index }"> + <div + class="item-color" + :style="`background-color: ${colors[index]}`" + ></div> + {{ value }} + </template> + <template #cell(minDate)="{ value }"> + <span style="color: rgb(12, 28, 41)"> + {{ value.time }} + </span> + <span> + {{ value.date }} + </span> + </template> + <template #cell(maxDate)="{ value }"> + <span style="color: rgb(12, 28, 41)"> + {{ value.time }} + </span> + <span> + {{ value.date }} + </span> + </template> + </b-table> + </page-section> + </collapse> +</template> +<script> +import Chart from '@/components/_sila/Global/Chart'; +import PageSection from '@/components/Global/PageSection'; + +import DataFormatterMixin from '@/components/_sila/Mixins/DataFormatterMixin'; +import LoadingBarMixin from '@/components/_sila/Mixins/LoadingBarMixin'; +import TableFilterMixin from '@/components/_sila/Mixins/TableFilterMixin'; +import Collapse from '@/components/_sila/Global/Collapse'; + +import { getItems } from '@/utilities/_sila/metricProperties'; +import { psuFilter } from '@/utilities/_sila/psuFilter'; + +export default { + components: { PageSection, Chart, Collapse }, + mixins: [DataFormatterMixin, LoadingBarMixin, TableFilterMixin], + props: { + timeScale: { + type: String, + default: 'hour', + }, + }, + data() { + return { + warning: 72, + shutdown: 95, + isBusy: true, + fields: [ + { + key: 'name', + label: this.$t('pagePowerSup.table.nameModule'), + thStyle: { width: '25%' }, + }, + { + key: 'current', + label: this.$t('pagePowerSup.table.currentPower'), + }, + { + key: 'min', + label: this.$t('pagePowerSup.table.minPower'), + }, + { + key: 'minDate', + label: this.$t('pagePowerSup.table.minDate'), + }, + { + key: 'max', + label: this.$t('pagePowerSup.table.maxPower'), + }, + { + key: 'maxDate', + label: this.$t('pagePowerSup.table.maxDate'), + }, + ], + }; + }, + + computed: { + items() { + return getItems(this.filteredItems); + }, + + filteredItems() { + return psuFilter(this.allSensors, 'Output'); + }, + + allSensors() { + return this.timeScale === 'hour' + ? this.$store.getters['powerSupply/psuPowerLastHour'] + : this.$store.getters['powerSupply/psuPower']; + }, + + colors() { + return this.$randomColor({ + count: this.items?.length, + hue: 'random', + luminosity: 'random', + }); + }, + }, + watch: { + items() { + this.items.length ? (this.isBusy = false) : (this.isBusy = true); + }, + }, +}; +</script> diff --git a/src/views/_sila/Power/Dynamic/PowerTemp.vue b/src/views/_sila/Power/Dynamic/PowerTemp.vue new file mode 100644 index 00000000..8ad31451 --- /dev/null +++ b/src/views/_sila/Power/Dynamic/PowerTemp.vue @@ -0,0 +1,186 @@ +<template> + <collapse + id="collapse_psuTempp" + default-open + :title="$t('pagePowerSup.temperature')" + > + <template #image> + <img src="@/assets/images/_sila/collapsed/temperature.svg" /> + </template> + <page-section> + <b-row class="align-items-end p-2"> + <b-col xs="12" md="6" lg="3" class="pt-2"> + <b-form-group :label="$t('pagePowerSup.labels.notNormal')"> + <b-form-input + v-model="notNormal" + type="number" + :min="0" + :max="100" + ></b-form-input> + </b-form-group> + </b-col> + <b-col xs="12" md="6" lg="3" class="pt-2"> + <b-form-group :label="$t('pagePowerSup.labels.critical')"> + <b-form-input v-model="critical" type="number" :min="0" :max="100"> + </b-form-input> + </b-form-group> + </b-col> + <b-col xs="12" md="6" lg="3" class="pt-2"> + <b-form-group :label="$t('pagePowerSup.labels.warning')"> + <b-form-input v-model="warning" type="number" :min="0" :max="100"> + </b-form-input> + </b-form-group> + </b-col> + <b-col xs="12" md="6" lg="3" class="pt-2"> + <b-button variant="primary" style="height: 35px"> + {{ $t('global.action.save') }} + </b-button> + </b-col> + </b-row> + <chart + type="processors" + :time-scale="timeScale" + :data="allSensors" + :colors="colors" + :warning="+warning" + :not-normal="+notNormal" + :critical="+critical" + ></chart> + <b-table + responsive="md" + show-empty + table-variant="accessory" + hover + :items="items" + :fields="fields" + :empty-text="$t('global.table.emptyMessage')" + :busy="isBusy" + > + <template #cell(name)="{ value, index }"> + <div + class="item-color" + :style="`background-color: ${colors[index]}`" + ></div> + {{ value }} + </template> + <template #cell(minDate)="{ value }"> + <span style="color: rgb(12, 28, 41)"> + {{ value.time }} + </span> + <span> + {{ value.date }} + </span> + </template> + <template #cell(maxDate)="{ value }"> + <span style="color: rgb(12, 28, 41)"> + {{ value.time }} + </span> + <span> + {{ value.date }} + </span> + </template> + </b-table> + </page-section> + </collapse> +</template> +<script> +import Chart from '@/components/_sila/Global/Chart'; +import PageSection from '@/components/Global/PageSection'; + +import DataFormatterMixin from '@/components/_sila/Mixins/DataFormatterMixin'; +import TableFilterMixin from '@/components/_sila/Mixins/TableFilterMixin'; +import Collapse from '@/components/_sila/Global/Collapse'; + +import { getItems } from '@/utilities/_sila/metricProperties'; + +export default { + components: { PageSection, Chart, Collapse }, + mixins: [DataFormatterMixin, TableFilterMixin], + props: { + timeScale: { + type: String, + default: 'hour', + }, + }, + data() { + return { + warning: 72, + notNormal: 44, + critical: 55, + isBusy: true, + fields: [ + { + key: 'name', + label: this.$t('pagePowerSup.table.nameModule'), + thStyle: { width: '25%' }, + }, + { + key: 'current', + label: this.$t('pagePowerSup.table.currentTemperature'), + }, + { + key: 'middle', + label: this.$t('pagePowerSup.table.middleTemperature'), + }, + { + key: 'min', + label: this.$t('pagePowerSup.table.minTemperature'), + }, + { + key: 'minDate', + label: this.$t('pagePowerSup.table.minDate'), + }, + { + key: 'max', + label: this.$t('pagePowerSup.table.maxTemperature'), + }, + { + key: 'maxDate', + label: this.$t('pagePowerSup.table.maxDate'), + }, + ], + }; + }, + + computed: { + items() { + return getItems(this.allSensors); + }, + + allSensors() { + return this.timeScale === 'hour' + ? this.$store.getters['powerSupply/psuTempLastHour'] + : this.$store.getters['powerSupply/psuTemp']; + }, + + colors() { + return this.$randomColor({ + count: this.items?.length, + hue: 'random', + luminosity: 'random', + }); + }, + }, + watch: { + timeScale() { + this.loadData(); + }, + }, + created() { + this.loadData(); + }, + methods: { + loadData() { + let payload = { metricsName: 'psu_temp', lastHour: false }; + if (this.timeScale === 'hour') { + payload.lastHour = true; + } + + this.$store.dispatch('powerSupply/getPsu', payload).finally(() => { + this.$root.$emit('psu-temp'); + this.isBusy = false; + }); + }, + }, +}; +</script> diff --git a/src/views/_sila/Power/Dynamic/VoltInput.vue b/src/views/_sila/Power/Dynamic/VoltInput.vue new file mode 100644 index 00000000..5c39a889 --- /dev/null +++ b/src/views/_sila/Power/Dynamic/VoltInput.vue @@ -0,0 +1,184 @@ +<template> + <collapse + id="collapse_InputVolt" + default-open + :title="$t('pagePowerSup.InputVolt')" + > + <template #image> + <img src="@/assets/images/_sila/collapsed/voltage.svg" /> + </template> + <page-section> + <b-row class="align-items-end p-2"> + <b-col xs="12" md="6" lg="4" class="pt-2"> + <b-form-group :label="$t('pagePowerSup.labels.warning')"> + <b-form-input + v-model="warning" + type="number" + :min="0" + :max="shutdown" + ></b-form-input> + </b-form-group> + </b-col> + <b-col xs="12" md="6" lg="4" class="pt-2"> + <b-form-group :label="$t('pagePowerSup.labels.shutdown')"> + <b-form-input + v-model="shutdown" + type="number" + :min="warning" + :max="250" + > + </b-form-input> + </b-form-group> + </b-col> + <b-col xs="12" md="6" lg="3" class="pt-2"> + <b-button variant="primary" style="height: 35px"> + {{ $t('global.action.save') }} + </b-button> + </b-col> + </b-row> + <chart + type="voltage-input" + :time-scale="timeScale" + :data="filteredItems" + :colors="colors" + :warning="+warning" + :shutdown="+shutdown" + ></chart> + <b-table + responsive="md" + show-empty + table-variant="accessory" + hover + :items="items" + :fields="fields" + :empty-text="$t('global.table.emptyMessage')" + :busy="isBusy" + > + <template #cell(name)="{ value, index }"> + <div + class="item-color" + :style="`background-color: ${colors[index]}`" + ></div> + {{ value }} + </template> + <template #cell(minDate)="{ value }"> + <span style="color: rgb(12, 28, 41)"> + {{ value.time }} + </span> + <span> + {{ value.date }} + </span> + </template> + <template #cell(maxDate)="{ value }"> + <span style="color: rgb(12, 28, 41)"> + {{ value.time }} + </span> + <span> + {{ value.date }} + </span> + </template> + </b-table> + </page-section> + </collapse> +</template> +<script> +import Chart from '@/components/_sila/Global/Chart'; +import PageSection from '@/components/Global/PageSection'; + +import DataFormatterMixin from '@/components/_sila/Mixins/DataFormatterMixin'; +import LoadingBarMixin from '@/components/_sila/Mixins/LoadingBarMixin'; +import TableFilterMixin from '@/components/_sila/Mixins/TableFilterMixin'; +import Collapse from '@/components/_sila/Global/Collapse'; + +import { getItems } from '@/utilities/_sila/metricProperties'; +import { psuFilter } from '@/utilities/_sila/psuFilter'; + +export default { + components: { PageSection, Chart, Collapse }, + mixins: [DataFormatterMixin, LoadingBarMixin, TableFilterMixin], + props: { + timeScale: { + type: String, + default: 'hour', + }, + }, + data() { + return { + warning: 235, + shutdown: 245, + isBusy: true, + fields: [ + { + key: 'name', + label: this.$t('pagePowerSup.table.nameModule'), + thStyle: { width: '25%' }, + }, + { + key: 'current', + label: this.$t('pagePowerSup.table.currentVolt'), + }, + { + key: 'min', + label: this.$t('pagePowerSup.table.minVolt'), + }, + { + key: 'minDate', + label: this.$t('pagePowerSup.table.minDate'), + }, + { + key: 'max', + label: this.$t('pagePowerSup.table.maxVolt'), + }, + { + key: 'maxDate', + label: this.$t('pagePowerSup.table.maxDate'), + }, + ], + }; + }, + computed: { + items() { + return getItems(this.filteredItems); + }, + + filteredItems() { + return psuFilter(this.allSensors, 'Input'); + }, + + allSensors() { + return this.timeScale === 'hour' + ? this.$store.getters['powerSupply/psuVoltageLastHour'] + : this.$store.getters['powerSupply/psuVoltage']; + }, + + colors() { + return this.$randomColor({ + count: this.items?.length, + hue: 'random', + luminosity: 'random', + }); + }, + }, + watch: { + timeScale() { + this.loadData(); + }, + }, + created() { + this.loadData(); + }, + methods: { + loadData() { + let payload = { metricsName: 'psu_voltage', lastHour: false }; + if (this.timeScale === 'hour') { + payload.lastHour = true; + } + + this.$store.dispatch('powerSupply/getPsu', payload).finally(() => { + this.$root.$emit('psu-volt'); + this.isBusy = false; + }); + }, + }, +}; +</script> diff --git a/src/views/_sila/Power/Dynamic/VoltOutput.vue b/src/views/_sila/Power/Dynamic/VoltOutput.vue new file mode 100644 index 00000000..191e29fd --- /dev/null +++ b/src/views/_sila/Power/Dynamic/VoltOutput.vue @@ -0,0 +1,169 @@ +<template> + <collapse + id="collapse_OutputVolt" + default-open + :title="$t('pagePowerSup.OutputVolt')" + > + <template #image> + <img src="@/assets/images/_sila/collapsed/voltage.svg" /> + </template> + <page-section> + <b-row class="align-items-end p-2"> + <b-col xs="12" md="6" lg="4" class="pt-2"> + <b-form-group :label="$t('pagePowerSup.labels.warning')"> + <b-form-input + v-model="warning" + type="number" + :min="0" + :max="shutdown" + ></b-form-input> + </b-form-group> + </b-col> + <b-col xs="12" md="6" lg="4" class="pt-2"> + <b-form-group :label="$t('pagePowerSup.labels.shutdown')"> + <b-form-input + v-model="shutdown" + type="number" + :min="warning" + :max="100" + > + </b-form-input> + </b-form-group> + </b-col> + <b-col xs="12" md="6" lg="3" class="pt-2"> + <b-button variant="primary" style="height: 35px"> + {{ $t('global.action.save') }} + </b-button> + </b-col> + </b-row> + <chart + type="voltage-output" + :time-scale="timeScale" + :data="filteredItems" + :colors="colors" + :warning="+warning" + :shutdown="+shutdown" + ></chart> + <b-table + responsive="md" + show-empty + table-variant="accessory" + hover + :items="items" + :fields="fields" + :empty-text="$t('global.table.emptyMessage')" + :busy="isBusy" + > + <template #cell(name)="{ value, index }"> + <div + class="item-color" + :style="`background-color: ${colors[index]}`" + ></div> + {{ value }} + </template> + <template #cell(minDate)="{ value }"> + <span style="color: rgb(12, 28, 41)"> + {{ value.time }} + </span> + <span> + {{ value.date }} + </span> + </template> + <template #cell(maxDate)="{ value }"> + <span style="color: rgb(12, 28, 41)"> + {{ value.time }} + </span> + <span> + {{ value.date }} + </span> + </template> + </b-table> + </page-section> + </collapse> +</template> +<script> +import Chart from '@/components/_sila/Global/Chart'; +import PageSection from '@/components/Global/PageSection'; + +import DataFormatterMixin from '@/components/_sila/Mixins/DataFormatterMixin'; +import LoadingBarMixin from '@/components/_sila/Mixins/LoadingBarMixin'; +import TableFilterMixin from '@/components/_sila/Mixins/TableFilterMixin'; +import Collapse from '@/components/_sila/Global/Collapse'; + +import { getItems } from '@/utilities/_sila/metricProperties'; +import { psuFilter } from '@/utilities/_sila/psuFilter'; + +export default { + components: { PageSection, Chart, Collapse }, + mixins: [DataFormatterMixin, LoadingBarMixin, TableFilterMixin], + props: { + timeScale: { + type: String, + default: 'hour', + }, + }, + data() { + return { + warning: 72, + shutdown: 95, + isBusy: true, + fields: [ + { + key: 'name', + label: this.$t('pagePowerSup.table.nameModule'), + thStyle: { width: '25%' }, + }, + { + key: 'current', + label: this.$t('pagePowerSup.table.currentVolt'), + }, + { + key: 'min', + label: this.$t('pagePowerSup.table.minVolt'), + }, + { + key: 'minDate', + label: this.$t('pagePowerSup.table.minDate'), + }, + { + key: 'max', + label: this.$t('pagePowerSup.table.maxVolt'), + }, + { + key: 'maxDate', + label: this.$t('pagePowerSup.table.maxDate'), + }, + ], + }; + }, + + computed: { + items() { + return getItems(this.filteredItems); + }, + + filteredItems() { + return psuFilter(this.allSensors, 'Output'); + }, + + allSensors() { + return this.timeScale === 'hour' + ? this.$store.getters['powerSupply/psuVoltageLastHour'] + : this.$store.getters['powerSupply/psuVoltage']; + }, + + colors() { + return this.$randomColor({ + count: this.items?.length, + hue: 'random', + luminosity: 'random', + }); + }, + }, + watch: { + items() { + this.items.length ? (this.isBusy = false) : (this.isBusy = true); + }, + }, +}; +</script> diff --git a/src/views/_sila/Power/Dynamic/index.js b/src/views/_sila/Power/Dynamic/index.js new file mode 100644 index 00000000..c45d5c89 --- /dev/null +++ b/src/views/_sila/Power/Dynamic/index.js @@ -0,0 +1,2 @@ +import PowerDynamicPage from './PowerDynamicPage.vue'; +export default PowerDynamicPage; |