diff options
author | Vitalii Lysak <v.lysak@dunice.net> | 2022-07-25 10:36:05 +0300 |
---|---|---|
committer | Vitalii Lysak <v.lysak@dunice.net> | 2022-07-25 10:36:05 +0300 |
commit | 5367ddb90fef12f6fc1258aaf56dc978168ec07b (patch) | |
tree | db5465de71a6657f5a257d69a6016c0b9c8a429d /src/views/_sila | |
parent | a9a840960d97d161429ddf37a6431f42a9ecb7a5 (diff) | |
download | webui-vue-5367ddb90fef12f6fc1258aaf56dc978168ec07b.tar.xz |
add tables for dynamic
Diffstat (limited to 'src/views/_sila')
4 files changed, 251 insertions, 60 deletions
diff --git a/src/views/_sila/Fans/Dynamic/FansDynamicPage.vue b/src/views/_sila/Fans/Dynamic/FansDynamicPage.vue index 22374fa7..37e759bc 100644 --- a/src/views/_sila/Fans/Dynamic/FansDynamicPage.vue +++ b/src/views/_sila/Fans/Dynamic/FansDynamicPage.vue @@ -4,10 +4,46 @@ <chart type="fans" + :colors="colors" :data="filteredSensors" :warning="fanSpeedWarninig" :shutdown="fanSpeedShutdown" ></chart> + + <b-table + v-if="items && items.length > 0" + responsive="md" + show-empty + table-variant="accessory" + hover + :items="items" + :fields="fields" + :empty-text="$t('global.table.emptyMessage')" + > + <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> </b-container> </template> @@ -18,6 +54,7 @@ import Chart from '@/components/_sila/Global/Chart'; import DataFormatterMixin from '@/components/_sila/Mixins/DataFormatterMixin'; import LoadingBarMixin from '@/components/_sila/Mixins/LoadingBarMixin'; import TableFilterMixin from '@/components/_sila/Mixins/TableFilterMixin'; +import { getItems } from '@/utilities/_sila/metricProperties'; export default { components: { PageTitle, Chart }, @@ -27,6 +64,37 @@ export default { activeFilters: [], fanSpeedWarninig: 2450, fanSpeedShutdown: 3150, + 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: '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'), + }, + ], + items: [], }; }, @@ -39,6 +107,20 @@ export default { filteredSensors() { return this.getFilteredTableData(this.allSensors, this.activeFilters); }, + + colors() { + return this.$randomColor({ + count: this.items?.length, + hue: 'random', + luminosity: 'random', + }); + }, + }, + + watch: { + filteredSensors(data) { + this.items = getItems(data); + }, }, created() { diff --git a/src/views/_sila/Memory/Dynamic/MemoryDynamicPage.vue b/src/views/_sila/Memory/Dynamic/MemoryDynamicPage.vue index 21e18fe1..db304d24 100644 --- a/src/views/_sila/Memory/Dynamic/MemoryDynamicPage.vue +++ b/src/views/_sila/Memory/Dynamic/MemoryDynamicPage.vue @@ -4,11 +4,46 @@ <chart type="memory" + :colors="colors" :data="filteredSensors" :warning="temperatureWarning" :non-normal="temperatureNonNormal" :critical-start="temperatureCriticalStart" ></chart> + <b-table + v-if="items && items.length > 0" + responsive="md" + show-empty + table-variant="accessory" + hover + :items="items" + :fields="fields" + :empty-text="$t('global.table.emptyMessage')" + > + <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> </b-container> </template> @@ -19,6 +54,7 @@ import Chart from '@/components/_sila/Global/Chart'; import DataFormatterMixin from '@/components/_sila/Mixins/DataFormatterMixin'; import LoadingBarMixin from '@/components/_sila/Mixins/LoadingBarMixin'; import TableFilterMixin from '@/components/_sila/Mixins/TableFilterMixin'; +import { getItems } from '@/utilities/_sila/metricProperties'; export default { components: { PageTitle, Chart }, @@ -29,6 +65,37 @@ export default { temperatureWarning: 72, temperatureNonNormal: 44, temperatureCriticalStart: 55, + fields: [ + { + key: 'name', + label: this.$t('pageMemory.table.name'), + }, + { + key: 'current', + label: this.$t('pageMemory.table.currentTemperature'), + }, + { + key: 'middle', + label: this.$t('pageMemory.table.middleTemperature'), + }, + { + key: 'min', + label: this.$t('pageMemory.table.minTemperature'), + }, + { + key: 'minDate', + label: this.$t('pageMemory.table.minDate'), + }, + { + key: 'max', + label: this.$t('pageMemory.table.maxTemperature'), + }, + { + key: 'maxDate', + label: this.$t('pageMemory.table.maxDate'), + }, + ], + items: [], }; }, @@ -41,6 +108,20 @@ export default { filteredSensors() { return this.getFilteredTableData(this.allSensors, this.activeFilters); }, + + colors() { + return this.$randomColor({ + count: this.items?.length, + hue: 'random', + luminosity: 'random', + }); + }, + }, + + watch: { + filteredSensors(data) { + this.items = getItems(data); + }, }, created() { diff --git a/src/views/_sila/Motherboard/Dynamic/MotherboardDynamicPage.vue b/src/views/_sila/Motherboard/Dynamic/MotherboardDynamicPage.vue index b4d13f3f..e08fab38 100644 --- a/src/views/_sila/Motherboard/Dynamic/MotherboardDynamicPage.vue +++ b/src/views/_sila/Motherboard/Dynamic/MotherboardDynamicPage.vue @@ -4,11 +4,46 @@ <chart type="motherboard" + :colors="colors" :data="filteredSensors" :warning="temperatureWarning" :non-normal="temperatureNonNormal" :critical-start="temperatureCriticalStart" ></chart> + <b-table + v-if="items && items.length > 0" + responsive="md" + show-empty + table-variant="accessory" + hover + :items="items" + :fields="fields" + :empty-text="$t('global.table.emptyMessage')" + > + <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> </b-container> </template> @@ -19,6 +54,7 @@ import Chart from '@/components/_sila/Global/Chart'; import DataFormatterMixin from '@/components/_sila/Mixins/DataFormatterMixin'; import LoadingBarMixin from '@/components/_sila/Mixins/LoadingBarMixin'; import TableFilterMixin from '@/components/_sila/Mixins/TableFilterMixin'; +import { getItems } from '@/utilities/_sila/metricProperties'; export default { components: { PageTitle, Chart }, @@ -29,6 +65,37 @@ export default { temperatureWarning: 72, temperatureNonNormal: 44, temperatureCriticalStart: 55, + fields: [ + { + key: 'name', + label: this.$t('pageMemory.table.name'), + }, + { + key: 'current', + label: this.$t('pageMemory.table.currentTemperature'), + }, + { + key: 'middle', + label: this.$t('pageMemory.table.middleTemperature'), + }, + { + key: 'min', + label: this.$t('pageMemory.table.minTemperature'), + }, + { + key: 'minDate', + label: this.$t('pageMemory.table.minDate'), + }, + { + key: 'max', + label: this.$t('pageMemory.table.maxTemperature'), + }, + { + key: 'maxDate', + label: this.$t('pageMemory.table.maxDate'), + }, + ], + items: [], }; }, @@ -41,6 +108,20 @@ export default { filteredSensors() { return this.getFilteredTableData(this.allSensors, this.activeFilters); }, + + colors() { + return this.$randomColor({ + count: this.items?.length, + hue: 'random', + luminosity: 'random', + }); + }, + }, + + watch: { + filteredSensors(data) { + this.items = getItems(data); + }, }, created() { diff --git a/src/views/_sila/Processors/Dynamic/ProcessorsDynamicPage.vue b/src/views/_sila/Processors/Dynamic/ProcessorsDynamicPage.vue index 54f8e284..fa98e951 100644 --- a/src/views/_sila/Processors/Dynamic/ProcessorsDynamicPage.vue +++ b/src/views/_sila/Processors/Dynamic/ProcessorsDynamicPage.vue @@ -35,11 +35,13 @@ <chart type="processors" :data="filteredSensors" + :colors="colors" :warning="temperatureWarning" :non-normal="temperatureNonNormal" :critical-start="temperatureCriticalStart" ></chart> <b-table + v-if="items && items.length > 0" responsive="md" show-empty table-variant="accessory" @@ -103,15 +105,15 @@ export default { label: this.$t('pageProcessors.table.name'), }, { - key: 'currentTemperature', + key: 'current', label: this.$t('pageProcessors.table.currentTemperature'), }, { - key: 'middleTemperature', + key: 'middle', label: this.$t('pageProcessors.table.middleTemperature'), }, { - key: 'minTemperature', + key: 'min', label: this.$t('pageProcessors.table.minTemperature'), }, { @@ -119,7 +121,7 @@ export default { label: this.$t('pageProcessors.table.minDate'), }, { - key: 'maxTemperature', + key: 'max', label: this.$t('pageProcessors.table.maxTemperature'), }, { @@ -127,62 +129,7 @@ export default { label: this.$t('pageProcessors.table.maxDate'), }, ], - items: [ - { - name: 'Процессор 1', - currentTemperature: 19, - middleTemperature: 40, - minTemperature: 31, - minDate: { time: '15:15', date: '11.11.2021' }, - maxTemperature: 88, - maxDate: { time: '10:26', date: '15.11.2021' }, - }, - { - name: 'Процессор 2', - currentTemperature: 29, - middleTemperature: 40, - minTemperature: 20, - minDate: { time: '15:45', date: '11.11.2021' }, - maxTemperature: 76, - maxDate: { time: '16:59', date: '16.11.2021' }, - }, - { - name: 'Процессор 3', - currentTemperature: 48, - middleTemperature: 46, - minTemperature: 31, - minDate: { time: '15:23', date: '11.11.2021' }, - maxTemperature: 69, - maxDate: { time: '15:26', date: '15.11.2021' }, - }, - { - name: 'Процессор 4', - currentTemperature: 48, - middleTemperature: 45, - minTemperature: 5, - minDate: { time: '16:45', date: '25.11.2021' }, - maxTemperature: 75, - maxDate: { time: '11:26', date: '16.11.2021' }, - }, - { - name: 'Процессор 5', - currentTemperature: 39, - middleTemperature: 44, - minTemperature: 30, - minDate: { time: '15:23', date: '11.11.2021' }, - maxTemperature: 80, - maxDate: { time: '15:26', date: '17.11.2021' }, - }, - { - name: 'Процессор 6', - currentTemperature: 39, - middleTemperature: 44, - minTemperature: 5, - minDate: { time: '16:45', date: '25.11.2021' }, - maxTemperature: 80, - maxDate: { time: '15:26', date: '15.11.2021' }, - }, - ], + items: [], }; }, |