diff options
Diffstat (limited to 'src/views/_sila/MemoryModules')
6 files changed, 1040 insertions, 0 deletions
diff --git a/src/views/_sila/MemoryModules/DynamicInfo/MemoryDynamicPage.vue b/src/views/_sila/MemoryModules/DynamicInfo/MemoryDynamicPage.vue new file mode 100644 index 00000000..489784e2 --- /dev/null +++ b/src/views/_sila/MemoryModules/DynamicInfo/MemoryDynamicPage.vue @@ -0,0 +1,224 @@ +<template> + <b-container + :style="{ display: 'flex', 'flex-direction': 'column' }" + fluid="xxl pt-0 m-0" + > + <page-title :description="$t('appNavigation.analyticalPanel')" /> + <div class="notification__container"> + <span class="semi-bold-12px">{{ + $t('global.ariaLabel.notificationTime') + }}</span> + <div class="form-control notification"> + <b-form-input + v-model="notificationInput" + type="number" + class="notification__input" + > + </b-form-input> + <button class="notification_button"> + <img class="notification__icon" src="@/assets/images/refresh.svg" /> + </button> + </div> + </div> + <date-switch :switch-time-scale="switchTimeScale" :time-scale="timeScale" /> + <div class="limit-container"> + <div class="trmperature-limt"> + <img src="@/assets/images/labels/non-normal.svg" /> + <span class="semi-bold-12px">{{ + $t('tablesDescription.nonNormalMode') + }}</span> + <b-form-input + v-model="temperatureNonNormalInput" + type="number" + :min="0" + :max="temperatureCritical" + class="form-control medium-12px" + > + </b-form-input> + </div> + <div class="trmperature-limt"> + <img src="@/assets/images/labels/critical.svg" /> + <span class="semi-bold-12px">{{ + $t('tablesDescription.criticalMode') + }}</span> + <b-form-input + v-model="temperatureCritical" + type="number" + :min="temperatureNonNormalInput" + :max="temperatureWarningInput" + class="form-control medium-12px" + > + </b-form-input> + </div> + <div class="trmperature-limt"> + <img src="@/assets/images/labels/warning.svg" /> + <span class="semi-bold-12px">{{ + $t('tablesDescription.temperatureWarning') + }}</span> + <b-form-input + v-model="temperatureWarningInput" + type="number" + :min="temperatureCritical" + :max="100" + class="form-control medium-12px" + > + </b-form-input> + </div> + <b-button + class="save-button" + variant="primary" + @click="updateTemperatureLimits" + > + {{ $t('global.action.save') }} + </b-button> + </div> + <!-- Temperature Table --> + <temperature-table + :time-scale="timeScale" + :warning="temperatureWarning" + :non-normal="temperatureNonNormal" + :critical-start="temperatureCriticalStart" + /> + <accessory-table :records="accessoryData.temperatureTable" /> + </b-container> +</template> +<script> +import PageTitle from '@/components/Global/PageTitle'; +import DateSwitch from '@/components/Global/SilaComponents/DateSwitch'; +import TemperatureTable from './TemperatureTable'; +import AccessoryTable from '@/components/Global/SilaComponents/Tables/AccessoryTableWithLabel'; +import iconChevronUp from '@carbon/icons-vue/es/chevron--up/16'; + +import TableFilterMixin from '@/components/Mixins/TableFilterMixin'; +import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin'; + +import { AccessoryData } from './helpers'; + +export default { + components: { + PageTitle, + DateSwitch, + TemperatureTable, + AccessoryTable, + }, + mixins: [TableFilterMixin, LoadingBarMixin], + data() { + return { + isBusy: true, + timeScale: 'hour', + temperatureWarning: 72, + temperatureWarningInput: 72, + temperatureNonNormal: 44, + temperatureNonNormalInput: 44, + temperatureCriticalStart: 55, + temperatureCritical: 55, + notificationInput: 42, + accessoryData: AccessoryData, + iconChevronUp: iconChevronUp, + activeFilters: [], + }; + }, + computed: { + allSensors() { + let sensors = this.$store.getters['sensors/memorySensors']; + return sensors; + }, + }, + created() { + this.startLoader(); + this.$store.dispatch('sensors/getMemorySensors').finally(() => { + this.endLoader(); + this.accessoryData.temperatureTable.items = this.getFilteredTableData( + this.allSensors, + this.activeFilters + ); + this.isBusy = false; + }); + }, + methods: { + switchTimeScale(period) { + this.timeScale = period; + }, + updateTemperatureLimits() { + this.temperatureWarning = +this.temperatureWarningInput; + this.temperatureNonNormal = +this.temperatureNonNormalInput; + this.temperatureCriticalStart = +this.temperatureCritical; + }, + }, +}; +</script> +<style lang="scss" scoped> +.notification__container { + position: absolute; + top: calc(#{$header-height}); + right: 0px; + display: flex; + flex-flow: row nowrap; + justify-content: flex-start; + align-items: center; +} + +.notification { + display: flex; + flex-flow: row nowrap; + justify-content: flex-start; + align-items: center; + border: none; + box-shadow: none; + border-radius: 8px; + margin: 12px 32px 12px 8px; + width: 236px; + height: 40px; + z-index: 1001; +} + +.notification__icon { + width: 20px; + height: 20px; +} + +.notification__input { + border: none; + background: none; + box-shadow: none; +} + +.notification_button { + border: none; + background: none; +} + +.semi-bold-12px { + z-index: 1001; +} + +// temperature limit comtainer +.limit-container { + height: 85px; + width: 100%; + padding: 0 32px 10px 32px; + display: flex; + flex-flow: row nowrap; + justify-content: flex-start; + align-items: flex-end; + gap: 24px; +} + +.trmperature-limt { + height: 60px; + width: 100%; + max-width: 270px; + display: flex; + align-items: baseline; + flex-flow: row wrap; + gap: 8px; +} + +.form-control { + height: 36px; +} +.save-button { + width: 151px; + height: 36px; +} +</style> diff --git a/src/views/_sila/MemoryModules/DynamicInfo/TemperatureTable.vue b/src/views/_sila/MemoryModules/DynamicInfo/TemperatureTable.vue new file mode 100644 index 00000000..f9c149c3 --- /dev/null +++ b/src/views/_sila/MemoryModules/DynamicInfo/TemperatureTable.vue @@ -0,0 +1,126 @@ +<template> + <div> + <highcharts :options="chartOptions.line" /> + </div> +</template> + +<script> +import { setTime, Series, setCategories } from './helpers'; +import { Chart } from 'highcharts-vue'; + +export default { + components: { + highcharts: Chart, + }, + props: { + timeScale: { + type: String, + default: 'hour', + }, + warning: { + type: Number, + default: 70, + }, + nonNormal: { + type: Number, + default: 70, + }, + criticalStart: { + type: Number, + default: 70, + }, + }, + computed: { + chartOptions() { + return { + line: { + chart: { + type: 'line', + margin: [12, 50, 32, 60], + height: '320px', + }, + title: null, + xAxis: { + categories: setTime(60, 'hour'), + title: null, + labels: { + step: 6, + }, + minorGridLineColor: '#1A3E5B1A', + }, + yAxis: { + categories: setCategories(101, 'С°'), + min: 0, + max: 100, + title: null, + minTickInterval: 25, + 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', + }, + }, + }, + ], + plotBands: [ + { + color: '#F0AC0C1A', + dashStyle: 'solid', + from: this.nonNormal, + to: this.criticalStart, + }, + { + color: '#FF41411A', + dashStyle: 'solid', + from: this.criticalStart, + to: this.warning, + }, + ], + }, + series: Series['temperature'].map((item) => ({ + ...item, + marker: { + enabled: false, + }, + })), + legend: { + enabled: false, + }, + tooltip: { + enabled: false, + crosshairs: false, + }, + plotOptions: { + series: { + showInLegend: true, + }, + }, + }, + }; + }, + }, +}; +</script> +<style lang="scss"> +.highcharts-credits { + display: none; +} + +.highcharts-plot-line-label { + transform: translate(-15px, 0) !important; +} +</style> diff --git a/src/views/_sila/MemoryModules/DynamicInfo/helpers.js b/src/views/_sila/MemoryModules/DynamicInfo/helpers.js new file mode 100644 index 00000000..3cbca867 --- /dev/null +++ b/src/views/_sila/MemoryModules/DynamicInfo/helpers.js @@ -0,0 +1,458 @@ +export const colors = [ + '#CB32F1', + '#F18638', + '#139BB9', + '#E1AB17', + '#175AE1', + '#13B937', +]; + +export const Series = { + temperature: [ + { + name: 'Sean', + data: [ + 15, + 15, + 45, + 15, + 65, + 15, + 75, + 15, + 15, + 15, + 55, + 15, + 25, + 15, + 45, + 15, + 55, + 15, + 75, + 15, + 35, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 65, + 15, + 45, + 15, + 25, + 15, + 45, + 15, + 65, + 15, + 35, + 35, + 35, + 15, + 55, + 15, + 15, + 35, + 15, + 25, + 15, + 35, + 15, + ], + color: '#CB32F1', + }, + { + name: 'Ivan', + data: [ + 62, + 12, + 12, + 12, + 12, + 12, + 12, + 12, + 12, + 12, + 12, + 12, + 22, + 12, + 42, + 12, + 52, + 12, + 72, + 12, + 52, + 12, + 62, + 12, + 72, + 12, + 82, + 12, + 12, + 42, + 12, + 12, + 52, + 12, + 42, + 12, + 12, + 62, + 12, + 42, + 12, + 22, + 12, + 42, + 12, + 62, + 12, + 12, + 32, + 12, + 62, + 12, + 52, + 12, + 32, + 12, + 22, + 12, + 32, + 12, + ], + color: '#175AE1', + }, + { + name: 'Brendan', + data: [ + 13, + 13, + 33, + 13, + 23, + 13, + 33, + 13, + 63, + 13, + 63, + 13, + 13, + 13, + 43, + 13, + 13, + 13, + 53, + 13, + 23, + 13, + 43, + 13, + 53, + 13, + 63, + 13, + 53, + 13, + 13, + 13, + 13, + 13, + 13, + 13, + 13, + 13, + 13, + 13, + 53, + 13, + 43, + 13, + 13, + 63, + 13, + 43, + 13, + 23, + 13, + 43, + 13, + 63, + 13, + 13, + 13, + 53, + 13, + 53, + ], + color: '#B98D13', + }, + { + name: 'Matteo', + data: [ + 24, + 14, + 44, + 14, + 64, + 14, + 64, + 14, + 34, + 14, + 54, + 14, + 14, + 34, + 14, + 24, + 14, + 34, + 14, + 64, + 14, + 64, + 14, + 14, + 14, + 44, + 14, + 14, + 14, + 54, + 14, + 14, + 14, + 44, + 14, + 54, + 14, + 14, + 14, + 54, + 14, + 64, + 14, + 14, + 14, + 84, + 14, + 94, + 14, + 54, + 4, + 54, + 14, + 44, + 14, + 44, + 64, + 14, + 44, + 14, + ], + color: '#13B937', + }, + { + name: 'Joan', + data: [ + 16, + 46, + 16, + 26, + 16, + 46, + 16, + 66, + 16, + 16, + 16, + 16, + 16, + 56, + 16, + 16, + 36, + 16, + 26, + 16, + 36, + 16, + 66, + 16, + 76, + 16, + 16, + 16, + 46, + 16, + 16, + 16, + 56, + 16, + 26, + 16, + 46, + 16, + 56, + 16, + 76, + 16, + 56, + 16, + 66, + 16, + 76, + 16, + 16, + 16, + 96, + 16, + 16, + 16, + 56, + 16, + 46, + 16, + 46, + 16, + ], + color: '#F18638', + }, + { + name: 'Avinash', + data: [ + 49, + 19, + 19, + 69, + 19, + 49, + 19, + 29, + 19, + 49, + 19, + 69, + 19, + 39, + 39, + 39, + 19, + 59, + 19, + 19, + 39, + 19, + 29, + 19, + 39, + 19, + 69, + 19, + 69, + 19, + 19, + 19, + 49, + 19, + 19, + 19, + 59, + 19, + 29, + 19, + 49, + 19, + 59, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + ], + color: '#139BB9', + }, + ], +}; + +export const setTime = (count) => { + const arr = [...new Array(count)].map(() => ''); + for (let i = 0; i < arr.length; i++) { + arr[i] = `15:${String(i).padStart(2, '0')}`; + } + return arr; +}; + +export const setCategories = (count, desc) => { + const arr = [...new Array(count)].map((i, k) => `${k} ${desc}`); + return arr; +}; + +export const AccessoryData = { + temperatureTable: { + fields: [ + { + key: 'name', + label: 'Имя модуля', + }, + { + key: 'currentValue', + label: 'Текущее, С°', + }, + { + key: 'middleTemperature', + label: 'Среднее, С°', + }, + { + key: 'lowerCaution', + label: 'Минимальное, С°', + }, + { + key: 'minDate', + label: 'Дата минимального', + }, + { + key: 'upperCaution', + label: 'Максимальное, С°', + }, + { + key: 'maxDate', + label: 'Дата максимального', + }, + ], + items: [], + }, +}; diff --git a/src/views/_sila/MemoryModules/DynamicInfo/index.js b/src/views/_sila/MemoryModules/DynamicInfo/index.js new file mode 100644 index 00000000..b840772c --- /dev/null +++ b/src/views/_sila/MemoryModules/DynamicInfo/index.js @@ -0,0 +1,2 @@ +import MemoryDynamicPage from './MemoryDynamicPage.vue'; +export default MemoryDynamicPage; diff --git a/src/views/_sila/MemoryModules/Specification/MemoryStaticPage.vue b/src/views/_sila/MemoryModules/Specification/MemoryStaticPage.vue new file mode 100644 index 00000000..5e544868 --- /dev/null +++ b/src/views/_sila/MemoryModules/Specification/MemoryStaticPage.vue @@ -0,0 +1,228 @@ +<template> + <b-container + id="page-memory-specification" + :style="{ display: 'flex', 'flex-direction': 'column' }" + fluid="xxl pt-0 m-0" + > + <page-title :description="$t('appNavigation.specification')" /> + <page-section class="bootstrap-table__section info_section"> + <span class="bold-16px">{{ $t('global.table.info') }}</span> + <b-table + responsive="md" + show-empty + no-border-collapse + :items="items" + :fields="fields" + :empty-text="$t('global.table.emptyMessage')" + > + </b-table> + <span class="bold-16px">{{ $t('global.table.memorySlots') }}</span> + </page-section> + <data-tabs + :slots="memorySlots" + :switch-tab="switchMemorySlot" + :current-tab="currentMemorySlot" + :slot-width="120" + :slider-width="97" + /> + <page-section class="bootstrap-table__section"> + <b-table + responsive="md" + show-empty + no-border-collapse + :items="items_slots" + :fields="fields" + :empty-text="$t('global.table.emptyMessage')" + > + <template #cell(value)="{ index, value }"> + <b-row v-if="index === 0"> + <b-col cols="11"> + <span> + {{ 'Работоспособность' }} + </span> + </b-col> + <b-col cols="1"> + <img src="@/assets/images/status/on.svg" class="icon-chevron" /> + </b-col> + </b-row> + <b-row v-else> + <b-col> + <span>{{ value }}</span> + </b-col> + </b-row> + </template> + </b-table> + </page-section> + <page-section class="bootstrap-table__section"> + <span class="bold-16px">{{ $t('global.table.memoryModules') }}</span> + <b-table + responsive="md" + show-empty + no-border-collapse + :items="items_modules" + :fields="fields" + :empty-text="$t('global.table.emptyMessage')" + > + <template #cell(value)="{ index, value }"> + <b-row v-if="index === 0"> + <b-col cols="11"> + <span> + {{ 'Работоспособность' }} + </span> + </b-col> + <b-col cols="1"> + <img src="@/assets/images/status/on.svg" class="icon-chevron" /> + </b-col> + </b-row> + <b-row v-else> + <b-col> + <span>{{ value }}</span> + </b-col> + </b-row> + </template> + </b-table> + </page-section> + </b-container> +</template> + +<script> +import PageTitle from '@/components/Global/PageTitle'; +import PageSection from '@/components/Global/PageSection'; +import DataTabs from '@/components/Global/SilaComponents/DataTabs'; + +export default { + components: { PageTitle, PageSection, DataTabs }, + data() { + return { + currentMemorySlot: 1, + memorySlots: [ + { id: 1, name: 'CPU_1-DIMM_A1' }, + { id: 2, name: 'CPU_1-DIMM_A2' }, + { id: 3, name: 'CPU_1-DIMM_A3' }, + { id: 4, name: 'CPU_1-DIMM_B1' }, + { id: 5, name: 'CPU_1-DIMM_B2' }, + { id: 6, name: 'CPU_1-DIMM_B3' }, + { id: 7, name: 'CPU_1-DIMM_C1' }, + { id: 8, name: 'CPU_1-DIMM_C2' }, + { id: 9, name: 'CPU_1-DIMM_C3' }, + { id: 10, name: 'CPU_1-DIMM_D1' }, + { id: 11, name: 'CPU_1-DIMM_D2' }, + { id: 12, name: 'CPU_1-DIMM_D3' }, + { id: 13, name: 'CPU_1-DIMM_E1' }, + { id: 14, name: 'CPU_1-DIMM_E2' }, + { id: 15, name: 'CPU_1-DIMM_E3' }, + ], + fields: [ + { + key: 'parametr', + label: 'Статус', + formatter: this.dataFormatter, + thStyle: { width: '50%' }, + }, + { + key: 'value', + label: 'Значение', + formatter: this.dataFormatter, + }, + ], + items: [ + { + parametr: 'Установленный объем памяти', + value: '8096 мб', + }, + { + parametr: 'Максимальный объем', + value: '4048 мб', + }, + { + parametr: 'Общее количество слотов', + value: '10', + }, + { + parametr: 'Используемое количество слотов', + value: '10', + }, + ], + items_slots: [ + { + parametr: 'Статус', + value: true, + }, + { + parametr: 'Имя слота', + value: 'Cлот 2', + }, + { + parametr: 'Технология', + value: 'Название технологии', + }, + { + parametr: 'Тип памяти', + value: 'Оперативная', + }, + { + parametr: 'Объем', + value: '2024', + }, + { + parametr: 'Состояние', + value: 'Отлично', + }, + { + parametr: 'Класс', + value: '1', + }, + { + parametr: 'Скорость', + value: '2000 МТ/сек', + }, + ], + items_modules: [ + { + parametr: 'Статус', + value: true, + }, + { + parametr: 'Имя коннектора', + value: 'DIMM A2', + }, + { + parametr: 'Тип памяти', + value: 'DDR-4', + }, + { + parametr: 'Объем', + value: '32 GB', + }, + { + parametr: 'Состояние', + value: 'Presence Detected', + }, + { + parametr: 'Ранг', + value: 'Dual Rank', + }, + { + parametr: 'Скорость', + value: '2400 MHz', + }, + ], + }; + }, + methods: { + switchMemorySlot(period) { + this.currentMemorySlot = period; + }, + }, +}; +</script> +<style lang="scss" scoped> +.info_section { + margin-bottom: 0px; +} + +.bold-16px { + display: block; + margin: 25px 0 16px 0; +} +</style> diff --git a/src/views/_sila/MemoryModules/Specification/index.js b/src/views/_sila/MemoryModules/Specification/index.js new file mode 100644 index 00000000..4916f58a --- /dev/null +++ b/src/views/_sila/MemoryModules/Specification/index.js @@ -0,0 +1,2 @@ +import MemoryStaticPage from './MemoryStaticPage.vue'; +export default MemoryStaticPage; |