diff options
-rw-r--r-- | src/components/_sila/Global/Chart.vue | 66 | ||||
-rw-r--r-- | src/store/modules/HardwareStatus/ProcessorStore.js | 8 | ||||
-rw-r--r-- | src/views/_sila/Processors/Dynamic/CpuPower.vue (renamed from src/views/_sila/Processors/Dynamic/Power.vue) | 17 | ||||
-rw-r--r-- | src/views/_sila/Processors/Dynamic/CpuTemp.vue | 192 | ||||
-rw-r--r-- | src/views/_sila/Processors/Dynamic/ProcessorsDynamicPage.vue | 209 |
5 files changed, 256 insertions, 236 deletions
diff --git a/src/components/_sila/Global/Chart.vue b/src/components/_sila/Global/Chart.vue index 8cee2497..e0dfd952 100644 --- a/src/components/_sila/Global/Chart.vue +++ b/src/components/_sila/Global/Chart.vue @@ -50,6 +50,27 @@ export default { yMax: null, minTickInterval: null, plotBands: null, + plotLines: [ + { + color: '#E11717', + dashStyle: 'solid', + value: this.warning, + zIndex: '1000', + width: 2, + label: { + text: 'Пороговое значение предупреждения', + align: 'right', + style: { + fontFamily: 'Inter, sans-serif', + fontSize: '12px', + fontStyle: 'normal', + fontWeight: '400', + lineHeight: '16px', + color: '#0C1C2999', + }, + }, + }, + ], }; }, computed: { @@ -152,27 +173,7 @@ export default { minRange: this.minRange, minTickInterval: this.minTickInterval, minorGridLineColor: '#1A3E5B1A', - plotLines: [ - { - color: '#E11717', - dashStyle: 'solid', - value: this.warning, - zIndex: '1000', - width: 2, - label: { - text: 'Пороговое значение предупреждения', - align: 'right', - style: { - fontFamily: 'Inter, sans-serif', - fontSize: '12px', - fontStyle: 'normal', - fontWeight: '400', - lineHeight: '16px', - color: '#0C1C2999', - }, - }, - }, - ], + plotLines: this.plotLines, plotBands: this.plotBands, }, series: this.metricData.map((item) => ({ @@ -266,6 +267,29 @@ export default { this.yMax = 100; this.minTickInterval = 25; break; + case 'power': + this.categories = this.setCategories(101, 'Вт'); + this.yMax = 100; + this.minTickInterval = 25; + this.plotLines.push({ + color: '#1A3E5B', + dashStyle: 'solid', + value: this.shutdown, + width: 2, + label: { + text: 'Пороговое значения отказ', + align: 'right', + style: { + fontFamily: 'Inter', + fontSize: '12px', + fontStyle: 'normal', + fontWeight: '400', + lineHeight: '16px', + color: '#0C1C2999', + }, + }, + }); + break; } }, setCategories(count, desc) { diff --git a/src/store/modules/HardwareStatus/ProcessorStore.js b/src/store/modules/HardwareStatus/ProcessorStore.js index 5d014ab9..ddf9db4a 100644 --- a/src/store/modules/HardwareStatus/ProcessorStore.js +++ b/src/store/modules/HardwareStatus/ProcessorStore.js @@ -4,16 +4,16 @@ import i18n from '@/i18n'; const ProcessorStore = { namespaced: true, state: { - processors: [], + cpuTemp: [], cpuPower: [], }, getters: { - processors: (state) => state.processors, + cpuTemp: (state) => state.cpuTemp, cpuPower: (state) => state.cpuPower, }, mutations: { setProcessorsInfo: (state, data) => { - state.processors = data.map((processor) => { + state.cpuTemp = data.map((processor) => { const { Id, Status = {}, @@ -63,7 +63,7 @@ const ProcessorStore = { }, setProcessorsDynamic: (state, data) => { - state.processors = data; + state.cpuTemp = data; }, setCpuPowerDynamic: (state, data) => { state.cpuPower = data; diff --git a/src/views/_sila/Processors/Dynamic/Power.vue b/src/views/_sila/Processors/Dynamic/CpuPower.vue index 4f486f6b..dffea20f 100644 --- a/src/views/_sila/Processors/Dynamic/Power.vue +++ b/src/views/_sila/Processors/Dynamic/CpuPower.vue @@ -33,12 +33,12 @@ </b-col> </b-row> <chart - type="processors" + type="power" :time-scale="timeScale" :data="filteredSensors" :colors="colors" - :warning="warning" - :shutdown="shutdown" + :warning="+warning" + :shutdown="+shutdown" ></chart> <b-table v-if="items && items.length > 0" @@ -91,9 +91,14 @@ import { getItems } from '@/utilities/_sila/metricProperties'; export default { components: { PageSection, Chart, Collapse }, mixins: [DataFormatterMixin, LoadingBarMixin, TableFilterMixin], + props: { + timeScale: { + type: String, + default: 'hour', + }, + }, data() { return { - timeScale: 'hour', warning: 66, shutdown: 88, items: [], @@ -140,10 +145,6 @@ export default { this.loadData(); } }, - switchTimeScale(period) { - this.timeScale = period; - this.loadData(); - }, loadData() { let payload = null; diff --git a/src/views/_sila/Processors/Dynamic/CpuTemp.vue b/src/views/_sila/Processors/Dynamic/CpuTemp.vue new file mode 100644 index 00000000..671b3d7b --- /dev/null +++ b/src/views/_sila/Processors/Dynamic/CpuTemp.vue @@ -0,0 +1,192 @@ +<template> + <collapse + id="collapse_temp" + :title="$t('pageProcessors.temperature')" + style="margin-top: 0" + @opened="onOpened" + > + <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('pageProcessors.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('pageProcessors.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('pageProcessors.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"> + {{ 'Сохранить' }} + </b-button> + </b-col> + </b-row> + <chart + type="processors" + :time-scale="timeScale" + :data="filteredSensors" + :colors="colors" + :warning="+warning" + :not-normal="+notNormal" + :critical="+critical" + ></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> + </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'; + +export default { + components: { PageSection, Chart, Collapse }, + mixins: [DataFormatterMixin, LoadingBarMixin, TableFilterMixin], + props: { + timeScale: { + type: String, + default: 'hour', + }, + }, + data() { + return { + warning: 72, + notNormal: 44, + critical: 55, + items: [], + fields: [ + { + key: 'name', + label: this.$t('pageProcessors.table.name'), + thStyle: { width: '25%' }, + }, + { + key: 'current', + label: this.$t('pageProcessors.table.currentTemperature'), + }, + { + key: 'middle', + label: this.$t('pageProcessors.table.middleTemperature'), + }, + { + key: 'min', + label: this.$t('pageProcessors.table.minTemperature'), + }, + { + key: 'minDate', + label: this.$t('pageProcessors.table.minDate'), + }, + { + key: 'max', + label: this.$t('pageProcessors.table.maxTemperature'), + }, + { + key: 'maxDate', + label: this.$t('pageProcessors.table.maxDate'), + }, + ], + }; + }, + + computed: { + allSensors() { + return this.$store.getters['processors/cpuTemp']; + }, + + 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); + }, + }, + + methods: { + onOpened(state) { + if (state) { + this.loadData(); + } + }, + + loadData() { + let payload = null; + if (this.timeScale === 'hour') { + payload = { lastHour: true }; + } + + this.startLoader(); + this.$store + .dispatch('processors/getCpuTempDynamic', payload) + .finally(() => { + this.endLoader(); + }); + }, + }, +}; +</script> diff --git a/src/views/_sila/Processors/Dynamic/ProcessorsDynamicPage.vue b/src/views/_sila/Processors/Dynamic/ProcessorsDynamicPage.vue index 24163bcc..e2e1505c 100644 --- a/src/views/_sila/Processors/Dynamic/ProcessorsDynamicPage.vue +++ b/src/views/_sila/Processors/Dynamic/ProcessorsDynamicPage.vue @@ -6,235 +6,38 @@ :time-scale="timeScale" style="margin: -2rem -2rem 0 -2rem" /> - <collapse - id="collapse_1" - :title="$t('pageProcessors.temperature')" - style="margin-top: 0" - > - <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('pageProcessors.labels.notNormal')"> - <b-form-input - v-model="temperatureNonNormalInput" - type="number" - :min="0" - :max="temperatureCriticalInput" - ></b-form-input> - </b-form-group> - </b-col> - <b-col xs="12" md="6" lg="3" class="pt-2"> - <b-form-group :label="$t('pageProcessors.labels.critical')"> - <b-form-input - v-model="temperatureCriticalInput" - type="number" - :min="temperatureNonNormalInput" - :max="temperatureWarningInput" - > - </b-form-input> - </b-form-group> - </b-col> - <b-col xs="12" md="6" lg="3" class="pt-2"> - <b-form-group :label="$t('pageProcessors.labels.warning')"> - <b-form-input - v-model="temperatureWarningInput" - type="number" - :min="temperatureCriticalInput" - :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" - @click="updateTemperature" - > - {{ 'Сохранить' }} - </b-button> - </b-col> - </b-row> - <chart - type="processors" - :time-scale="timeScale" - :data="filteredSensors" - :colors="colors" - :warning="temperatureWarning" - :non-normal="temperatureNonNormal" - :critical-start="temperatureCritical" - ></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> - </page-section> - </collapse> - - <power></power> + <cpu-temp :time-scale="timeScale"></cpu-temp> + <cpu-power :time-scale="timeScale"></cpu-power> </b-container> </template> <script> import PageTitle from '@/components/_sila/Global/PageTitle'; -import Chart from '@/components/_sila/Global/Chart'; -import PageSection from '@/components/Global/PageSection'; 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 Collapse from '@/components/_sila/Global/Collapse'; -import { getItems } from '@/utilities/_sila/metricProperties'; -import Power from './Power'; +import CpuPower from './CpuPower'; +import CpuTemp from './CpuTemp'; export default { components: { - Power, + CpuPower, + CpuTemp, PageTitle, - Collapse, - PageSection, - Chart, TableDatePicker, }, mixins: [DataFormatterMixin, LoadingBarMixin, TableFilterMixin], data() { return { - activeFilters: [], timeScale: 'hour', - temperatureWarning: 72, - temperatureWarningInput: 72, - temperatureNonNormal: 44, - temperatureNonNormalInput: 44, - temperatureCritical: 55, - temperatureCriticalInput: 55, - frequencyWarning: 660, - frequencyWarningInput: 660, - powerWarning: 66, - powerWarningInput: 66, - powerShutdown: 88, - powerShutdownInput: 88, - notificationInput: 42, - fields: [ - { - key: 'name', - label: this.$t('pageProcessors.table.name'), - thStyle: { width: '25%' }, - }, - { - key: 'current', - label: this.$t('pageProcessors.table.currentTemperature'), - }, - { - key: 'middle', - label: this.$t('pageProcessors.table.middleTemperature'), - }, - { - key: 'min', - label: this.$t('pageProcessors.table.minTemperature'), - }, - { - key: 'minDate', - label: this.$t('pageProcessors.table.minDate'), - }, - { - key: 'max', - label: this.$t('pageProcessors.table.maxTemperature'), - }, - { - key: 'maxDate', - label: this.$t('pageProcessors.table.maxDate'), - }, - ], - items: [], }; }, - computed: { - allSensors() { - let sensors = this.$store.getters['processors/processors']; - return sensors; - }, - - 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() { - this.loadData('hour'); - }, - methods: { switchTimeScale(period) { this.timeScale = period; - this.loadData(period); - }, - - updateTemperature() { - this.temperatureWarning = +this.temperatureWarningInput; - this.temperatureNonNormal = +this.temperatureNonNormalInput; - this.temperatureCritical = +this.temperatureCriticalInput; - }, - - loadData(period) { - if (period === 'hour') { - this.startLoader(); - this.$store - .dispatch('processors/getCpuTempDynamic', { lastHour: true }) - .finally(() => { - this.endLoader(); - }); - } else { - this.startLoader(); - this.$store.dispatch('processors/getCpuTempDynamic').finally(() => { - this.endLoader(); - }); - } }, }, }; |