diff options
Diffstat (limited to 'src/views/PowerSupplies/DynamicInfo/PowerDynamicPage.vue')
-rw-r--r-- | src/views/PowerSupplies/DynamicInfo/PowerDynamicPage.vue | 625 |
1 files changed, 625 insertions, 0 deletions
diff --git a/src/views/PowerSupplies/DynamicInfo/PowerDynamicPage.vue b/src/views/PowerSupplies/DynamicInfo/PowerDynamicPage.vue new file mode 100644 index 00000000..3039bebb --- /dev/null +++ b/src/views/PowerSupplies/DynamicInfo/PowerDynamicPage.vue @@ -0,0 +1,625 @@ +<template> + <b-container + :style="{ display: 'flex', 'flex-direction': 'column' }" + fluid="xxl pt-0 m-0" + > + <page-title /> + <div class="notification-time__container"> + <span class="semi-bold-12px">{{ + $t('global.ariaLabel.notificationTime') + }}</span> + <div class="form-control notification-time"> + <b-form-input + v-model="notificationInput" + type="number" + class="notification-time__input" + > + </b-form-input> + <button class="notification-button"> + <img + class="notification-time__icon" + src="@/assets/images/refresh.svg" + /> + </button> + </div> + </div> + <div class="main-container"> + <date-switch + :switch-time-scale="switchTimeScale" + :time-scale="timeScale" + /> + <!-- Temperature Section --> + <div class="page-collapse-decorator"> + <b-button + v-b-toggle.toggle-collapse_1 + variant="link" + class="collapse-button semi-bold-16px" + > + <img src="@/assets/images/temperature-icon.svg" /> + <span class="bold-16px">{{ $t('subHeader.temperature') }}</span> + <component :is="iconChevronUp" class="icon-expand" /> + </b-button> + <b-collapse id="toggle-collapse_1" class="nav-item__nav"> + <!-- Temperature Limit Inputs --> + <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="updateTemperature" + > + {{ $t('global.action.save') }} + </b-button> + </div> + <!-- Temperature Tables --> + <temperature-table + :time-scale="timeScale" + :warning="temperatureWarning" + :non-normal="temperatureNonNormal" + :critical="temperatureCritical" + /> + <accessory-table :records="accessoryData.temperatureTable" /> + </b-collapse> + </div> + <!-- using Section --> + <div class="page-collapse-decorator"> + <b-button + v-b-toggle.toggle-collapse_2 + variant="link" + class="collapse-button semi-bold-16px" + > + <img src="@/assets/images/usage-icon.svg" /> + <span class="bold-16px">{{ $t('pagePower.usingPercent') }}</span> + <component :is="iconChevronUp" class="icon-expand" /> + </b-button> + <b-collapse id="toggle-collapse_2" class="nav-item__nav"> + <!-- using Limit Inputs --> + <div class="limit-container"> + <div class="trmperature-limt"> + <img src="@/assets/images/labels/warning.svg" /> + <span class="semi-bold-12px">{{ + $t('tablesDescription.warningPercent') + }}</span> + <b-form-input + v-model="usingNonNormalInput" + type="number" + :min="0" + :max="usingCritical" + class="form-control medium-12px" + > + </b-form-input> + </div> + <div class="trmperature-limt"> + <img src="@/assets/images/labels/non-normal.svg" /> + <span class="semi-bold-12px">{{ + $t('tablesDescription.nonNormalModePercent') + }}</span> + <b-form-input + v-model="usingCritical" + type="number" + :min="usingNonNormalInput" + :max="usingWarningInput" + 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.criticalModePercent') + }}</span> + <b-form-input + v-model="usingWarningInput" + type="number" + :min="usingCritical" + :max="100" + class="form-control medium-12px" + > + </b-form-input> + </div> + <b-button + class="save-button" + variant="primary" + @click="updateUsage" + > + {{ $t('global.action.save') }} + </b-button> + </div> + <!-- using Tables --> + <using-table + :time-scale="timeScale" + :warning="usingWarning" + :non-normal="usingNonNormal" + :critical-start="usingCritical" + /> + <accessory-table :records="accessoryData.usingTable" /> + </b-collapse> + </div> + <!-- Input Voltage Section --> + <div class="page-collapse-decorator"> + <b-button + v-b-toggle.toggle-collapse_3 + variant="link" + class="collapse-button semi-bold-16px" + > + <img src="@/assets/images/voltage-icon.svg" /> + <span class="bold-16px">{{ + $t('tablesDescription.inputVoltage') + }}</span> + <component :is="iconChevronUp" class="icon-expand" /> + </b-button> + <b-collapse id="toggle-collapse_3" class="nav-item__nav"> + <div class="limit-container"> + <div class="frequency-limt"> + <img src="@/assets/images/labels/warning.svg" /> + <span class="semi-bold-12px">{{ + $t('tablesDescription.voltageWarning') + }}</span> + <b-form-input + v-model="powerWarningInput" + type="number" + class="form-control medium-12px" + > + </b-form-input> + </div> + <div class="frequency-limt"> + <img src="@/assets/images/labels/shutdown.svg" /> + <span class="semi-bold-12px">{{ + $t('tablesDescription.voltageShutdown') + }}</span> + <b-form-input + v-model="powerShutdownInput" + type="number" + class="form-control medium-12px" + > + </b-form-input> + </div> + <b-button + class="save-button" + variant="primary" + @click="updatePower" + > + {{ $t('global.action.save') }} + </b-button> + </div> + <!-- Input Voltage Tables --> + <voltage-table :time-scale="timeScale" :warning="frequencyWarning" /> + <accessory-table :records="accessoryData.voltageTable" /> + </b-collapse> + </div> + <!-- Input Power Section --> + <div class="page-collapse-decorator"> + <b-button + v-b-toggle.toggle-collapse_4 + variant="link" + class="collapse-button semi-bold-16px" + > + <img src="@/assets/images/power-icon.svg" /> + <span class="bold-16px">{{ + $t('tablesDescription.inputPower') + }}</span> + <component :is="iconChevronUp" class="icon-expand" /> + </b-button> + <b-collapse id="toggle-collapse_4" class="nav-item__nav"> + <div class="limit-container"> + <div class="frequency-limt"> + <img src="@/assets/images/labels/warning.svg" /> + <span class="semi-bold-12px">{{ + $t('tablesDescription.powerWarning') + }}</span> + <b-form-input + v-model="powerWarningInput" + type="number" + class="form-control medium-12px" + > + </b-form-input> + </div> + <div class="frequency-limt"> + <img src="@/assets/images/labels/shutdown.svg" /> + <span class="semi-bold-12px">{{ + $t('tablesDescription.powerShutdown') + }}</span> + <b-form-input + v-model="powerShutdownInput" + type="number" + class="form-control medium-12px" + > + </b-form-input> + </div> + <b-button + class="save-button" + variant="primary" + @click="updatePower" + > + {{ $t('global.action.save') }} + </b-button> + </div> + <!-- Input Power Table --> + <power-table + :time-scale="timeScale" + :warning="powerWarning" + :shutdown="powerShutdown" + /> + <accessory-table :records="accessoryData.powerTable" /> + </b-collapse> + </div> + <!-- Output Voltage Section --> + <div class="page-collapse-decorator"> + <b-button + v-b-toggle.toggle-collapse_5 + variant="link" + class="collapse-button semi-bold-16px" + > + <img src="@/assets/images/voltage-icon.svg" /> + <span class="bold-16px">{{ + $t('tablesDescription.outputVoltage') + }}</span> + <component :is="iconChevronUp" class="icon-expand" /> + </b-button> + <b-collapse id="toggle-collapse_5" class="nav-item__nav"> + <div class="limit-container"> + <div class="frequency-limt"> + <img src="@/assets/images/labels/warning.svg" /> + <span class="semi-bold-12px">{{ + $t('tablesDescription.voltageWarning') + }}</span> + <b-form-input + v-model="powerWarningInput" + type="number" + class="form-control medium-12px" + > + </b-form-input> + </div> + <div class="frequency-limt"> + <img src="@/assets/images/labels/shutdown.svg" /> + <span class="semi-bold-12px">{{ + $t('tablesDescription.voltageShutdown') + }}</span> + <b-form-input + v-model="powerShutdownInput" + type="number" + class="form-control medium-12px" + > + </b-form-input> + </div> + <b-button + class="save-button" + variant="primary" + @click="updatePower" + > + {{ $t('global.action.save') }} + </b-button> + </div> + <!-- Output Voltage Tables --> + <voltage-table :time-scale="timeScale" :warning="frequencyWarning" /> + <accessory-table :records="accessoryData.voltageTable" /> + </b-collapse> + </div> + <!-- Output Power Section --> + <div class="page-collapse-decorator"> + <b-button + v-b-toggle.toggle-collapse_6 + variant="link" + class="collapse-button semi-bold-16px" + > + <img src="@/assets/images/power-icon.svg" /> + <span class="bold-16px">{{ + $t('tablesDescription.outputPower') + }}</span> + <component :is="iconChevronUp" class="icon-expand" /> + </b-button> + <b-collapse id="toggle-collapse_6" class="nav-item__nav"> + <div class="limit-container"> + <div class="frequency-limt"> + <img src="@/assets/images/labels/warning.svg" /> + <span class="semi-bold-12px">{{ + $t('tablesDescription.powerWarning') + }}</span> + <b-form-input + v-model="powerWarningInput" + type="number" + class="form-control medium-12px" + > + </b-form-input> + </div> + <div class="frequency-limt"> + <img src="@/assets/images/labels/shutdown.svg" /> + <span class="semi-bold-12px">{{ + $t('tablesDescription.powerShutdown') + }}</span> + <b-form-input + v-model="powerShutdownInput" + type="number" + class="form-control medium-12px" + > + </b-form-input> + </div> + <b-button + class="save-button" + variant="primary" + @click="updatePower" + > + {{ $t('global.action.save') }} + </b-button> + </div> + <!-- Output Power Table --> + <power-table + :time-scale="timeScale" + :warning="powerWarning" + :shutdown="powerShutdown" + /> + <accessory-table :records="accessoryData.powerTable" /> + </b-collapse> + </div> + <!-- Amperage Section --> + <div class="page-collapse-decorator"> + <b-button + v-b-toggle.toggle-collapse_7 + variant="link" + class="collapse-button semi-bold-16px" + > + <img src="@/assets/images/amperage-icon.svg" /> + <span class="bold-16px">{{ $t('tablesDescription.amperage') }}</span> + <component :is="iconChevronUp" class="icon-expand" /> + </b-button> + <b-collapse id="toggle-collapse_7" class="nav-item__nav"> + <div class="limit-container"> + <div class="frequency-limt"> + <img src="@/assets/images/labels/warning.svg" /> + <span class="semi-bold-12px">{{ + $t('tablesDescription.voltageWarning') + }}</span> + <b-form-input + v-model="powerWarningInput" + type="number" + class="form-control medium-12px" + > + </b-form-input> + </div> + <div class="frequency-limt"> + <img src="@/assets/images/labels/shutdown.svg" /> + <span class="semi-bold-12px">{{ + $t('tablesDescription.voltageShutdown') + }}</span> + <b-form-input + v-model="powerShutdownInput" + type="number" + class="form-control medium-12px" + > + </b-form-input> + </div> + <b-button + class="save-button" + variant="primary" + @click="updatePower" + > + {{ $t('global.action.save') }} + </b-button> + </div> + <!-- Amperage Table --> + <voltage-table :time-scale="timeScale" :warning="frequencyWarning" /> + <accessory-table :records="accessoryData.voltageTable" /> + </b-collapse> + </div> + </div> + </b-container> +</template> +<script> +import PageTitle from '@/components/Global/PageTitle'; +import PageSection from '@/components/Global/PageSection'; +import DateSwitch from '@/components/Global/SilaComponents/DateSwitch'; + +import TemperatureTable from './TemperatureTable'; +import UsingTable from './UsingTable'; +import PowerTable from './PowerTable'; +import VoltageTable from './VoltageTable'; +import AccessoryTable from '@/components/Global/SilaComponents/Tables/AccessoryTablePower'; +import iconChevronUp from '@carbon/icons-vue/es/chevron--up/16'; + +import { AccessoryData } from './helpers'; + +export default { + components: { + PageTitle, + PageSection, + DateSwitch, + TemperatureTable, + UsingTable, + PowerTable, + VoltageTable, + AccessoryTable, + }, + data() { + return { + timeScale: 'hour', + temperatureNonNormalInput: 44, + temperatureNonNormal: 44, + temperatureCriticalInput: 55, + temperatureCritical: 55, + temperatureWarningInput: 72, + temperatureWarning: 72, + usingNonNormalInput: 50, + usingNonNormal: 50, + usingCriticalInput: 55, + usingCritical: 55, + usingWarningInput: 72, + usingWarning: 72, + // frequencyWarning: 660, + // frequencyWarningInput: 660, + powerWarning: 66, + powerWarningInput: 66, + powerShutdown: 88, + powerShutdownInput: 88, + notificationInput: 42, + accessoryData: AccessoryData, + iconChevronUp: iconChevronUp, + }; + }, + methods: { + switchTimeScale(period) { + this.timeScale = period; + }, + updateTemperature() { + this.temperatureNonNormal = +this.temperatureNonNormalInput; + this.temperatureCritical = +this.temperatureCriticalInput; + this.temperatureWarning = +this.temperatureWarningInput; + }, + updateUsage() { + this.usingNonNormal = +this.usingNonNormalInput; + this.usingCritical = +this.usingCriticalInput; + this.usingWarning = +this.usingWarningInput; + }, + updateFrequency() { + this.frequencyWarning = +this.frequencyWarningInput; + }, + updatePower() { + this.powerWarning = +this.powerWarningInput; + this.powerShutdown = +this.powerShutdownInput; + }, + }, +}; +</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-time__container { + position: absolute; + top: calc(#{$header-height}); + right: 0px; + display: flex; + flex-flow: row nowrap; + justify-content: flex-start; + align-items: center; +} + +.notification-time { + 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-time__icon { + width: 20px; + height: 20px; +} + +.notification-time__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; + &.non-normal { + width: 125px; + } +} +.save-button { + width: 151px; + height: 36px; +} + +.frequency-limt { + height: 60px; + width: 100%; + max-width: 288px; + display: flex; + align-items: baseline; + flex-flow: row wrap; + gap: 8px; +} +</style> |