diff options
Diffstat (limited to 'src/views/_sila/Fans/Dynamic/FanSpeedSystem.vue')
| -rw-r--r-- | src/views/_sila/Fans/Dynamic/FanSpeedSystem.vue | 248 |
1 files changed, 248 insertions, 0 deletions
diff --git a/src/views/_sila/Fans/Dynamic/FanSpeedSystem.vue b/src/views/_sila/Fans/Dynamic/FanSpeedSystem.vue new file mode 100644 index 00000000..06f4dd14 --- /dev/null +++ b/src/views/_sila/Fans/Dynamic/FanSpeedSystem.vue @@ -0,0 +1,248 @@ +<template> + <collapse + id="collapse_FansSystem" + :title="$t('pageFans.speedSystem')" + @opened="onOpened" + > + <template #image> + <img src="@/assets/images/_sila/collapsed/fan.svg" /> + </template> + <page-section> + <!-- <b-row class="align-items-end limit-container"> + <b-col xs="12" md="6" xl="3" class="pt-4"> + <b-form-group :label="$t('pageFans.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" xl="3" class="pt-4"> + <b-form-group :label="$t('pageFans.labels.shutdown')"> + <b-form-input + v-model="shutdown" + :min="warning" + :max="10000" + type="number" + ></b-form-input> + </b-form-group> + </b-col> + <b-col xs="12" md="6" xl="3" class="pt-4"> + <b-button variant="primary" style="height: 35px"> + {{ $t('global.action.save') }} + </b-button> + </b-col> + </b-row> --> + <chart + type="fans" + :colors="colors" + :time-scale="timeScale" + :data="filteredForChart" + :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')" + :bisy="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> + <template #cell(pwm)="{ value }"> + <span> + {{ `${value}%` }} + </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 { fanFilter } from '@/utilities/_sila/psuFilter'; + +export default { + components: { PageSection, Chart, Collapse }, + mixins: [DataFormatterMixin, LoadingBarMixin, TableFilterMixin], + props: { + timeScale: { + type: String, + default: 'hour', + }, + }, + data() { + return { + warning: 8900, + shutdown: 9500, + isBusy: true, + fields: [ + { + key: 'name', + label: this.$t('pageFans.table.name'), + }, + { + key: 'current', + label: this.$t('pageFans.table.current'), + }, + { + key: 'middle', + label: this.$t('pageFans.table.middle'), + }, + { + key: 'pwm', + label: this.$t('pageFans.table.pwm'), + }, + { + key: 'min', + label: this.$t('pageFans.table.min'), + }, + { + key: 'minDate', + label: this.$t('pageFans.table.minDate'), + }, + { + key: 'max', + label: this.$t('pageFans.table.max'), + }, + { + key: 'maxDate', + label: this.$t('pageFans.table.maxDate'), + }, + ], + }; + }, + + computed: { + items() { + const allArr = getItems(this.filteredSensors); + + let pwmArr = allArr.filter((item) => { + return item.name.toLowerCase().includes('pwm'); + }); + + let cpuArr = allArr.filter((item) => { + return !item.name.toLowerCase().includes('pwm'); + }); + + return cpuArr.map((cpu) => { + let pwm = pwmArr.find((pwm) => pwm.name === this.getPwmByCpu(cpu.name)) + .middle; + return { + pwm, + ...cpu, + }; + }); + }, + + allSensors() { + return this.timeScale === 'hour' + ? this.$store.getters['fan/fansLastHour'] + : this.$store.getters['fan/fans']; + }, + + preFiltered() { + return fanFilter(this.allSensors, 'System').concat( + fanFilter(this.allSensors, 'pwm') + ); + }, + + filteredForChart() { + return fanFilter(this.allSensors, 'System'); + }, + + filteredSensors() { + return this.getFilteredTableData(this.preFiltered, this.activeFilters); + }, + + colors() { + return this.$randomColor({ + count: this.items?.length, + hue: 'random', + luminosity: 'random', + }); + }, + }, + + watch: { + timeScale() { + this.loadData(); + }, + }, + + created() { + this.loadData(); + }, + + methods: { + getPwmByCpu(cpu) { + switch (cpu) { + case 'System_Fan_1': + return 'Pwm_1'; + case 'System_Fan_2': + return 'Pwm_5'; + case 'System_Fan_3': + return 'Pwm_6'; + default: + return null; + } + }, + + onOpened(state) { + if (state) { + this.loadData(); + } + }, + + loadData() { + let payload = { lastHour: false }; + if (this.timeScale === 'hour') { + payload = { lastHour: true }; + } + + this.startLoader(); + this.$store.dispatch('fan/getFansDynamic', payload).finally(() => { + this.endLoader(); + this.isBusy = false; + }); + }, + }, +}; +</script> |