diff options
Diffstat (limited to 'src/views/PowerSupplies/Specification')
-rw-r--r-- | src/views/PowerSupplies/Specification/PowerStaticPage.vue | 22 | ||||
-rw-r--r-- | src/views/PowerSupplies/Specification/PowerSwitch.vue | 112 |
2 files changed, 12 insertions, 122 deletions
diff --git a/src/views/PowerSupplies/Specification/PowerStaticPage.vue b/src/views/PowerSupplies/Specification/PowerStaticPage.vue index 463e9ea2..8ff1aa1b 100644 --- a/src/views/PowerSupplies/Specification/PowerStaticPage.vue +++ b/src/views/PowerSupplies/Specification/PowerStaticPage.vue @@ -8,10 +8,12 @@ <page-section class="bootstrap-table__section info_section"> <span class="bold-16px">{{ $t('pageInventory.powerSources') }}</span> </page-section> - <power-switch - :slots="memorySlots" - :switch-memory="switchMemorySlot" - :current-memory="currentMemorySlot" + <data-tabs + :slots="sourceSlots" + :switch-tab="switchSourceSlot" + :current-tab="currentSourceSlot" + :slot-width="100" + :slider-width="68" /> <page-section class="bootstrap-table__section"> <b-table @@ -51,14 +53,14 @@ <script> import PageTitle from '@/components/Global/PageTitle'; import PageSection from '@/components/Global/PageSection'; -import PowerSwitch from './PowerSwitch'; +import DataTabs from '@/components/Global/SilaComponents/DataTabs'; export default { - components: { PageTitle, PageSection, PowerSwitch }, + components: { PageTitle, PageSection, DataTabs }, data() { return { - currentMemorySlot: 1, - memorySlots: [ + currentSourceSlot: 1, + sourceSlots: [ { id: 1, name: 'Источник 1' }, { id: 2, name: 'Источник 2' }, { id: 3, name: 'Источник 3' }, @@ -127,8 +129,8 @@ export default { }; }, methods: { - switchMemorySlot(period) { - this.currentMemorySlot = period; + switchSourceSlot(period) { + this.currentSourceSlot = period; }, }, }; diff --git a/src/views/PowerSupplies/Specification/PowerSwitch.vue b/src/views/PowerSupplies/Specification/PowerSwitch.vue deleted file mode 100644 index 824c2549..00000000 --- a/src/views/PowerSupplies/Specification/PowerSwitch.vue +++ /dev/null @@ -1,112 +0,0 @@ -<template> - <div - ref="content" - class="memory-switch" - @wheel.prevent="wheelItBetter($event)" - > - <span - v-for="item in slots" - :key="item.id" - class="medium-12px scale-item" - :class="{ 'switch-active': currentMemory === item.id }" - @click="switchMemory(item.id)" - >{{ $t(item.name) }}</span - > - <div - class="slider" - :style="`width: 68px; left: ${ - ((currentMemory ? currentMemory : 1) - 1) * 100 + 30 - }px`" - /> - </div> -</template> - -<script> -export default { - props: { - slots: { - type: Array, - default: null, - }, - currentMemory: { - type: Number, - default: 1, - }, - switchMemory: { - type: Function, - required: true, - }, - }, - data() { - return { - upHere: false, - container: this.$refs.content, - }; - }, - methods: { - wheelItBetter(event) { - if (event.deltaY < 0) { - this.$refs.content.scrollLeft -= 25; - } else { - this.$refs.content.scrollLeft += 25; - } - }, - }, -}; -</script> -<style lang="scss" scoped> -.memory-switch { - position: relative; - width: calc(100vw - 320px); - height: 50px; - padding: 0 16px 0 32px; - display: grid; - grid-auto-flow: column; - grid-auto-columns: 100px; - grid-template-rows: 32px; - align-items: end; - border-bottom: 1px solid $faint-secondary-primary-10; - overflow-x: auto; - white-space: nowrap; - &::-webkit-scrollbar { - height: 2px; - } - &::-webkit-scrollbar-thumb { - background: rgba(26, 62, 91, 0.2); - border-radius: 16px; - background-clip: content-box; - height: 10px; - } -} - -.switch-active { - color: $red-brand-primary; - transition: ease-in 0.15s; -} - -.slider { - position: absolute; - height: 0px; - border-bottom: 4px solid $red-brand-primary; - transition: ease-in 0.2s; - bottom: 0px; -} - -.scale-item { - display: inline-block; - width: 100px; - margin-right: 6px; - cursor: pointer; -} - -.date-picker { - display: flex; - align-items: center; - gap: 9px; -} - -.date-clear { - margin-left: auto; - cursor: pointer; -} -</style> |