diff options
Diffstat (limited to 'src/views/PowerSupplies/DynamicInfo/PowerDynamicPage.vue')
| -rw-r--r-- | src/views/PowerSupplies/DynamicInfo/PowerDynamicPage.vue | 777 |
1 files changed, 372 insertions, 405 deletions
diff --git a/src/views/PowerSupplies/DynamicInfo/PowerDynamicPage.vue b/src/views/PowerSupplies/DynamicInfo/PowerDynamicPage.vue index 3039bebb..02a209d5 100644 --- a/src/views/PowerSupplies/DynamicInfo/PowerDynamicPage.vue +++ b/src/views/PowerSupplies/DynamicInfo/PowerDynamicPage.vue @@ -23,425 +23,392 @@ </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" + <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" > - {{ $t('global.action.save') }} - </b-button> + </b-form-input> </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" + <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" > - {{ $t('global.action.save') }} - </b-button> + </b-form-input> </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" + <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" > - {{ $t('global.action.save') }} - </b-button> + </b-form-input> </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" + <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" > - {{ $t('global.action.save') }} - </b-button> + </b-form-input> </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" + <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" > - {{ $t('global.action.save') }} - </b-button> + </b-form-input> </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" + <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" > - {{ $t('global.action.save') }} - </b-button> + </b-form-input> </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" + <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" > - {{ $t('global.action.save') }} - </b-button> + </b-form-input> </div> - <!-- Amperage Table --> - <voltage-table :time-scale="timeScale" :warning="frequencyWarning" /> - <accessory-table :records="accessoryData.voltageTable" /> - </b-collapse> - </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> </b-container> </template> |