diff options
-rw-r--r-- | src/assets/styles/bmc/_sila/_section-divider.scss | 2 | ||||
-rw-r--r-- | src/components/_sila/Global/Collapse.vue | 4 | ||||
-rw-r--r-- | src/components/_sila/Global/TableDatePicker.vue | 123 | ||||
-rw-r--r-- | src/locales/ru-RU.json | 10 | ||||
-rw-r--r-- | src/views/_sila/Motherboard/Dynamic/MotherboardDynamicPage.vue | 114 | ||||
-rw-r--r-- | src/views/_sila/Processors/Dynamic/ProcessorsDynamicPage.vue | 9 |
6 files changed, 213 insertions, 49 deletions
diff --git a/src/assets/styles/bmc/_sila/_section-divider.scss b/src/assets/styles/bmc/_sila/_section-divider.scss index 23000e5c..78415435 100644 --- a/src/assets/styles/bmc/_sila/_section-divider.scss +++ b/src/assets/styles/bmc/_sila/_section-divider.scss @@ -2,7 +2,7 @@ border-bottom: 1px solid gray('400'); } -.custom-collapse { +.custom-divider { margin: 0 -1.95rem 0 -2rem; @include media-breakpoint-down(md) { margin-left: -0.95rem; diff --git a/src/components/_sila/Global/Collapse.vue b/src/components/_sila/Global/Collapse.vue index 141da639..4a3694bd 100644 --- a/src/components/_sila/Global/Collapse.vue +++ b/src/components/_sila/Global/Collapse.vue @@ -1,5 +1,5 @@ <template> - <div class="custom-collapse"> + <div class="custom-divider"> <b-button v-b-toggle="id" variant="collapse" @@ -9,7 +9,7 @@ {{ title }} <component :is="iconChevronUp" class="icon-expand" /> </b-button> - <b-collapse :id="id" class="nav-item__nav"> + <b-collapse :id="id"> <slot></slot> </b-collapse> </div> diff --git a/src/components/_sila/Global/TableDatePicker.vue b/src/components/_sila/Global/TableDatePicker.vue new file mode 100644 index 00000000..c2b693ab --- /dev/null +++ b/src/components/_sila/Global/TableDatePicker.vue @@ -0,0 +1,123 @@ +<template> + <div class="fans-date-switch"> + <span + class="medium-12px scale-item" + :class="{ 'switch-active': timeScale === 'hour' }" + @click="switchTimeScale('hour')" + >{{ $t('global.datePicker.lastHour') }}</span + > + <span + class="medium-12px scale-item" + :class="{ 'switch-active': timeScale === 'day' }" + @click="switchTimeScale('day')" + >{{ $t('global.datePicker.lastDay') }}</span + > + <!--<span + class="medium-12px scale-item" + :class="{ 'switch-active': timeScale === 'week' }" + @click="switchTimeScale('week')" + >{{ $t('global.date.lastWeek') }}</span + > + <span + class="medium-12px scale-item" + :class="{ 'switch-active': timeScale === 'mounth' }" + @click="switchTimeScale('mounth')" + >{{ $t('global.date.lastMounth') }}</span + > + <span + class="medium-12px scale-item" + :class="{ 'switch-active': timeScale === 'year' }" + @click="switchTimeScale('year')" + >{{ $t('global.date.lastYear') }}</span + > + <div class="slider" /> + <div class="date-picker"> + <img src="@/assets/images/calendar-icon.svg" /> + <span class="medium-12px scale-item">{{ + $t('global.date.selectDate') + }}</span> + </div>--> + <!-- <img class="date-clear" src="@/assets/images/icon-clear-red.svg" /> --> + </div> +</template> + +<script> +export default { + props: { + timeScale: { + type: String, + default: 'hour', + }, + switchTimeScale: { + type: Function, + required: true, + }, + }, +}; +</script> +<style lang="scss" scoped> +.fans-date-switch { + position: relative; + + height: 48px; + padding: 0 16px 0 32px; + display: flex; + flex-flow: row nowrap; + align-items: center; + gap: 24px; + border-bottom: 1px solid $gray-10; +} + +.switch-active { + color: $primary; + transition: ease-in 0.15s; +} + +.slider { + position: absolute; + height: 0px; + border-bottom: 4px solid $primary; + transition: ease-in 0.2s; + bottom: 0px; +} + +.scale-item { + cursor: pointer; +} + +.scale-item:nth-child(1).switch-active ~ .slider { + width: 92px; + left: 31px; +} + +.scale-item:nth-child(2).switch-active ~ .slider { + left: 135px; + width: 105px; +} + +.scale-item:nth-child(3).switch-active ~ .slider { + left: 255px; + width: 112px; +} + +.scale-item:nth-child(4).switch-active ~ .slider { + left: 383px; + width: 107px; +} + +.scale-item:nth-child(5).switch-active ~ .slider { + left: 508px; + width: 90px; +} + +.date-picker { + display: flex; + align-items: center; + gap: 9px; +} + +.date-clear { + margin-left: auto; + cursor: pointer; +} +</style> diff --git a/src/locales/ru-RU.json b/src/locales/ru-RU.json index b996c8bd..a8b68791 100644 --- a/src/locales/ru-RU.json +++ b/src/locales/ru-RU.json @@ -85,6 +85,10 @@ "toast": { "unAuthTitle": "Недоступно", "unAuthDescription": "Действие недоступно из текущей учётной записи. Свяжитесь с Вашим системным администратором для проверки прав доступа." + }, + "datePicker": { + "lastHour": "Последнй час", + "lastDay": "Последние сутки" } }, "appHeader": { @@ -875,6 +879,12 @@ "maxDate": "Дата максимального" } }, + "pageMotherboard": { + "temperature": "Показатели температуры", + "labels": { + "warning": "Значение предупреждения" + } + }, "pageSerialOverLan": { "alert": { "disconnectedAlertMessage" : "Система должна быть включена для соединения" diff --git a/src/views/_sila/Motherboard/Dynamic/MotherboardDynamicPage.vue b/src/views/_sila/Motherboard/Dynamic/MotherboardDynamicPage.vue index e08fab38..9c92a974 100644 --- a/src/views/_sila/Motherboard/Dynamic/MotherboardDynamicPage.vue +++ b/src/views/_sila/Motherboard/Dynamic/MotherboardDynamicPage.vue @@ -1,49 +1,77 @@ <template> <b-container fluid="xl"> <page-title :description="$t('appPageTitle.dynamicInformation')" /> - - <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> + <div class="custom-divider" style="margin-top: -2rem"> + <b-button + v-b-toggle="id" + variant="collapse" + class="d-flex flex-nowrap justify-content-start" + > + <img src="@/assets/images/_sila/collapsed/temperature.svg" /> + {{ $t('pageMotherboard.temperature') }} + </b-button> + <b-row class="align-items-end p-2"> + <b-col xs="12" md="3" class="pt-2"> + <b-form-group :label="$t('pageMotherboard.labels.warning')"> + <b-form-input> </b-form-input> + </b-form-group> + </b-col> + <b-col xs="12" md="6" class="pt-2"> + <b-button variant="primary" style="height: 35px"> + {{ 'Сохранить' }} + </b-button> + </b-col> + </b-row> + <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> + <chart + type="motherboard" + :data="filteredSensors" + :warning="temperatureWarning" + :non-normal="temperatureNonNormal" + :critical-start="temperatureCriticalStart" + ></chart> + </div> </b-container> </template> diff --git a/src/views/_sila/Processors/Dynamic/ProcessorsDynamicPage.vue b/src/views/_sila/Processors/Dynamic/ProcessorsDynamicPage.vue index 1d6dc597..63133249 100644 --- a/src/views/_sila/Processors/Dynamic/ProcessorsDynamicPage.vue +++ b/src/views/_sila/Processors/Dynamic/ProcessorsDynamicPage.vue @@ -1,16 +1,17 @@ <template> <b-container fluid="xl"> <page-title :description="$t('appPageTitle.dynamicInformation')" /> + <table-date-picker style="margin: -2rem 0 0 -2rem" /> <collapse id="collapse_1" :title="$t('pageProcessors.temperature')" - style="margin-top: -2rem" + style="margin-top: 0" > <template #image> <img src="@/assets/images/_sila/collapsed/temperature.svg" /> </template> <page-section> - <b-row class="align-items-end pt-2"> + <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 @@ -105,6 +106,7 @@ 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'; @@ -112,7 +114,7 @@ import Collapse from '@/components/_sila/Global/Collapse'; import { getItems } from '@/utilities/_sila/metricProperties'; export default { - components: { PageTitle, Collapse, PageSection, Chart }, + components: { PageTitle, Collapse, PageSection, Chart, TableDatePicker }, mixins: [DataFormatterMixin, LoadingBarMixin, TableFilterMixin], data() { return { @@ -135,6 +137,7 @@ export default { { key: 'name', label: this.$t('pageProcessors.table.name'), + thStyle: { width: '25%' }, }, { key: 'current', |