diff options
author | Maksim Zakharov <m.zakharov@IBS.RU> | 2022-05-24 09:43:34 +0300 |
---|---|---|
committer | Maksim Zakharov <m.zakharov@IBS.RU> | 2022-05-24 09:43:34 +0300 |
commit | 6facd12596ec8b55bab4be04b473de65e1f22018 (patch) | |
tree | 9e82b684a4945431b9d798e2e52293477212ec51 /src/views/Motherboard/DynamicInfo/MotherboardDynamicPage.vue | |
parent | 5c7a1dd3d6a22e02b983a01be39b654b8eaa6ad1 (diff) | |
download | webui-vue-6facd12596ec8b55bab4be04b473de65e1f22018.tar.xz |
Add depend: highcarts. Pages: power, analytical motherboard, memory, fans, event logs, Fix styles, add global components.
Diffstat (limited to 'src/views/Motherboard/DynamicInfo/MotherboardDynamicPage.vue')
-rw-r--r-- | src/views/Motherboard/DynamicInfo/MotherboardDynamicPage.vue | 140 |
1 files changed, 140 insertions, 0 deletions
diff --git a/src/views/Motherboard/DynamicInfo/MotherboardDynamicPage.vue b/src/views/Motherboard/DynamicInfo/MotherboardDynamicPage.vue new file mode 100644 index 00000000..95267ece --- /dev/null +++ b/src/views/Motherboard/DynamicInfo/MotherboardDynamicPage.vue @@ -0,0 +1,140 @@ +<template> + <b-container + :style="{ display: 'flex', 'flex-direction': 'column' }" + fluid="xxl pt-0 m-0" + > + <page-title /> + <div class="main-container"> + <date-switch + :switch-time-scale="switchTimeScale" + :time-scale="timeScale" + /> + <div class="limit-container"> + <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="0" + :max="100" + class="form-control medium-12px" + > + </b-form-input> + </div> + <b-button + class="save-button" + variant="primary" + @click="updateTemperature" + > + {{ $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" /> + </div> + </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 { AccessoryData } from './helpers'; + +export default { + components: { + PageTitle, + DateSwitch, + TemperatureTable, + AccessoryTable, + }, + data() { + return { + timeScale: 'hour', + temperatureWarning: 72, + temperatureWarningInput: 72, + notificationInput: 42, + accessoryData: AccessoryData, + iconChevronUp: iconChevronUp, + }; + }, + methods: { + switchTimeScale(period) { + this.timeScale = period; + }, + updateTemperature() { + this.temperatureWarning = +this.temperatureWarningInput; + }, + }, +}; +</script> +<style lang="scss" scoped> +//nav items style +.nav-item, +.nav-link { + padding: 0; +} +.nav-item { + list-style-type: none; +} + +a { + color: $text-primary !important; + &:hover { + color: $text-primary !important; + } +} + +.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; + &.non-normal { + width: 125px; + } +} +.save-button { + width: 151px; + height: 36px; +} +</style> |