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/Fans | |
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/Fans')
-rw-r--r-- | src/views/Fans/DynamicInformation/FansDynamicPage.vue | 127 | ||||
-rw-r--r-- | src/views/Fans/DynamicInformation/FansDynamicTable.vue | 126 | ||||
-rw-r--r-- | src/views/Fans/DynamicInformation/IndicatorsTable.vue | 191 | ||||
-rw-r--r-- | src/views/Fans/DynamicInformation/helpers.js | 820 | ||||
-rw-r--r-- | src/views/Fans/DynamicInformation/index.js | 2 | ||||
-rw-r--r-- | src/views/Fans/StaticInformation/FansStaticPage.vue | 147 | ||||
-rw-r--r-- | src/views/Fans/StaticInformation/index.js | 2 |
7 files changed, 1415 insertions, 0 deletions
diff --git a/src/views/Fans/DynamicInformation/FansDynamicPage.vue b/src/views/Fans/DynamicInformation/FansDynamicPage.vue new file mode 100644 index 00000000..c56d2f83 --- /dev/null +++ b/src/views/Fans/DynamicInformation/FansDynamicPage.vue @@ -0,0 +1,127 @@ +<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="speed-description"> + <img src="@/assets/images/fans-page/fans-icon.svg" /> + <span class="bold-16px">{{ $t('fansPage.speedDescription') }}</span> + </div> + <div class="limit-speed-container"> + <div class="speed-limt"> + <img src="@/assets/images/labels/warning.svg" /> + <span class="semi-bold-12px">{{ $t('fansPage.speedWarhihg') }}</span> + <b-form-input + v-model="fanSpeedWarninigInput" + type="number" + :min="0" + :max="fanSpeedShutdownInput" + class="form-control medium-12px" + > + </b-form-input> + </div> + <div class="speed-limt"> + <img src="@/assets/images/labels/shutdown.svg" /> + <span class="semi-bold-12px">{{ $t('fansPage.speedShutdown') }}</span> + <b-form-input + v-model="fanSpeedShutdownInput" + :min="fanSpeedWarninigInput" + :max="4000" + type="number" + class="form-control medium-12px" + > + </b-form-input> + </div> + <b-button + class="save-button" + variant="primary" + @click="updateFansSpeed" + > + {{ $t('global.action.save') }} + </b-button> + </div> + + <fans-dynamic-table + :speed-warninig="fanSpeedWarninig" + :speed-shutdown="fanSpeedShutdown" + :time-scale="timeScale" + /> + <indicators-table /> + </div> + </b-container> +</template> + +<script> +import PageTitle from '@/components/Global/PageTitle'; +import DateSwitch from '@/components/Global/SilaComponents/DateSwitch'; +import FansDynamicTable from './FansDynamicTable'; +import IndicatorsTable from './IndicatorsTable'; + +export default { + components: { PageTitle, DateSwitch, FansDynamicTable, IndicatorsTable }, + data() { + return { + timeScale: 'hour', + fanSpeedWarninigInput: 2450, + fanSpeedShutdownInput: 3150, + fanSpeedWarninig: 2450, + fanSpeedShutdown: 3150, + }; + }, + methods: { + switchTimeScale(period) { + this.timeScale = period; + }, + updateFansSpeed() { + this.fanSpeedWarninig = +this.fanSpeedWarninigInput; + this.fanSpeedShutdown = +this.fanSpeedShutdownInput; + }, + }, +}; +</script> +<style lang="scss" scoped> +.speed-description { + height: 56px; + padding-left: 36px; + display: flex; + align-items: center; + gap: 8px; + border-bottom: 1px solid $faint-secondary-primary-10; +} + +.limit-speed-container { + height: 85px; + padding: 0 0 10px 32px; + display: flex; + align-items: flex-end; + gap: 24px; +} + +.speed-limt { + height: 60px; + max-width: 312px; + display: flex; + align-items: baseline; + flex-flow: row wrap; + gap: 8px; +} + +.save-button { + width: 151px; + height: 36px; +} + +.form-control { + height: 36px; +} + +.main-container { + overflow: auto; +} +</style> diff --git a/src/views/Fans/DynamicInformation/FansDynamicTable.vue b/src/views/Fans/DynamicInformation/FansDynamicTable.vue new file mode 100644 index 00000000..b0818255 --- /dev/null +++ b/src/views/Fans/DynamicInformation/FansDynamicTable.vue @@ -0,0 +1,126 @@ +<template> + <div> + <highcharts :options="chartOptions.line" /> + </div> +</template> + +<script> +import { setTime, Series, setSpeed } from './helpers'; +import { Chart } from 'highcharts-vue'; + +export default { + components: { + highcharts: Chart, + }, + props: { + timeScale: { + type: String, + default: 'hour', + }, + speedWarninig: { + type: Number, + default: 2450, + }, + speedShutdown: { + type: Number, + default: 3150, + }, + }, + computed: { + chartOptions() { + return { + line: { + chart: { + type: 'line', + margin: [12, 50, 32, 60], + height: '320px', + }, + title: null, + xAxis: { + categories: setTime(60, this.timeScale), + title: null, + labels: { + step: 6, + }, + minorGridLineColor: '#1A3E5B1A', + }, + yAxis: { + categories: setSpeed(4000), + min: 0, + title: null, + minRange: 4000, + minTickInterval: 1000, + minorGridLineColor: '#1A3E5B1A', + plotLines: [ + { + color: '#E11717', + dashStyle: 'solid', + value: this.speedWarninig, + zIndex: '1000', + width: 2, + label: { + text: 'Пороговое значения предупреждение', + align: 'right', + style: { + fontFamily: 'Inter, sans-serif', + fontSize: '12px', + fontStyle: 'normal', + fontWeight: '400', + lineHeight: '16px', + color: '#0C1C2999', + }, + }, + }, + { + color: '#1A3E5B', + dashStyle: 'solid', + value: this.speedShutdown, + width: 2, + label: { + text: 'Пороговое значения отказ', + align: 'right', + style: { + fontFamily: 'Inter, sans-serif', + fontSize: '12px', + fontStyle: 'normal', + fontWeight: '400', + lineHeight: '16px', + color: '#0C1C2999', + }, + }, + }, + ], + }, + series: Series[this.timeScale].map((item) => ({ + ...item, + marker: { + enabled: false, + }, + })), + legend: { + enabled: false, + }, + tooltip: { + enabled: false, + crosshairs: false, + }, + plotOptions: { + series: { + showInLegend: true, + }, + }, + }, + }; + }, + }, +}; +</script> +<style lang="scss"> +.highcharts-credits { + display: none; +} + +.highcharts-plot-line-label { + transform: translate(-15px, 0) !important; +} +</style> diff --git a/src/views/Fans/DynamicInformation/IndicatorsTable.vue b/src/views/Fans/DynamicInformation/IndicatorsTable.vue new file mode 100644 index 00000000..de0823c0 --- /dev/null +++ b/src/views/Fans/DynamicInformation/IndicatorsTable.vue @@ -0,0 +1,191 @@ +<template> + <page-section class="bootstrap-table__section"> + <span class="bold-12px__caps"> + {{ $t('fansPage.valueIndicators') }} + </span> + <b-table + responsive="md" + class="bootstrap-fans-table bootstrap-fans-table__stripes" + :items="items" + :fields="fields" + > + <template #cell(name)="{ value, index }"> + <div + class="fans-colors" + :style="`background-color: ${colors[index]}`" + ></div> + <span class="regular-12px tretiatry"> + {{ value }} + </span> + </template> + <template #cell(minSpeedDate)="{ value }"> + <span class="regular-12px"> + {{ value.time }} + </span> + <span class="regular-12px tretiatry"> + {{ value.date }} + </span> + </template> + <template #cell(maxSpeedDate)="{ value }"> + <span class="regular-12px"> + {{ value.time }} + </span> + <span class="regular-12px tretiatry"> + {{ value.date }} + </span> + </template> + </b-table> + </page-section> +</template> + +<script> +import PageSection from '@/components/Global/PageSection'; +import { colors } from './helpers'; + +export default { + components: { PageSection }, + data() { + return { + colors, + fields: [ + { + key: 'name', + label: 'Имя модуля', + formatter: this.dataFormatter, + thClass: 'bootstrap-fans-table__th medium-12px', + tdClass: 'bootstrap-fans-table__td light-12px', + }, + { + key: 'currentSpeed', + label: 'Текущая', + formatter: this.dataFormatter, + thClass: 'bootstrap-fans-table__th medium-12px', + tdClass: 'bootstrap-fans-table__td light-12px', + }, + { + key: 'middleSpeed', + label: 'Средняя', + formatter: this.dataFormatter, + thClass: 'bootstrap-fans-table__th medium-12px', + tdClass: 'bootstrap-fans-table__td light-12px', + }, + { + key: 'minSpeed', + label: 'Минимальная', + formatter: this.dataFormatter, + thClass: 'bootstrap-fans-table__th medium-12px', + tdClass: 'bootstrap-fans-table__td light-12px', + }, + { + key: 'minSpeedDate', + label: 'Дата минимальной', + formatter: this.dataFormatter, + thClass: 'bootstrap-fans-table__th medium-12px', + tdClass: 'bootstrap-fans-table__td light-12px', + }, + { + key: 'maxSpeed', + label: 'Максимальная', + formatter: this.dataFormatter, + thClass: 'bootstrap-fans-table__th medium-12px', + tdClass: 'bootstrap-fans-table__td light-12px', + }, + { + key: 'maxSpeedDate', + label: 'Дата максимальной', + formatter: this.dataFormatter, + thClass: 'bootstrap-fans-table__th medium-12px', + tdClass: 'bootstrap-fans-table__td light-12px', + }, + ], + items: [ + { + name: 'Вентилятор 1', + currentSpeed: 1900, + middleSpeed: 1200, + minSpeed: 950, + minSpeedDate: { time: '15:15', date: '11.11.2021' }, + maxSpeed: 2100, + maxSpeedDate: { time: '10:26', date: '15.11.2021' }, + }, + { + name: 'Вентилятор 2', + currentSpeed: 1850, + middleSpeed: 1450, + minSpeed: 850, + minSpeedDate: { time: '15:45', date: '11.11.2021' }, + maxSpeed: 2150, + maxSpeedDate: { time: '16:59', date: '16.11.2021' }, + }, + { + name: 'Вентилятор 3', + currentSpeed: 1870, + middleSpeed: 1450, + minSpeed: 1000, + minSpeedDate: { time: '15:23', date: '11.11.2021' }, + maxSpeed: 2050, + maxSpeedDate: { time: '15:26', date: '15.11.2021' }, + }, + { + name: 'Вентилятор 4', + currentSpeed: 1790, + middleSpeed: 780, + minSpeed: 950, + minSpeedDate: { time: '16:45', date: '25.11.2021' }, + maxSpeed: 1800, + maxSpeedDate: { time: '11:26', date: '16.11.2021' }, + }, + { + name: 'Вентилятор 5', + currentSpeed: 1950, + middleSpeed: 1260, + minSpeed: 880, + minSpeedDate: { time: '15:23', date: '11.11.2021' }, + maxSpeed: 1950, + maxSpeedDate: { time: '15:26', date: '17.11.2021' }, + }, + { + name: 'Вентилятор 6', + currentSpeed: 1900, + middleSpeed: 1300, + minSpeed: 960, + minSpeedDate: { time: '16:45', date: '25.11.2021' }, + maxSpeed: 2000, + maxSpeedDate: { time: '15:26', date: '15.11.2021' }, + }, + ], + }; + }, +}; +</script> +<style lang="scss"> +.bootstrap-fans-table__th { + background-color: transparent !important; + color: $text-primary !important; + border-top: none !important; + padding: 10px 5px !important; + border-bottom: 1px solid $faint-secondary-primary-10; +} + +.bootstrap-fans-table__td { + padding: 5px !important; + border-top: none !important; +} +</style> + +<style lang="scss" scoped> +.fans-colors { + display: inline-block; + width: 8px; + height: 8px; + border-radius: 2px; +} +.row { + align-items: center; + flex-wrap: nowrap; + justify-content: flex-end; +} +.medium-12px { + color: $text-primary !important; +} +</style> diff --git a/src/views/Fans/DynamicInformation/helpers.js b/src/views/Fans/DynamicInformation/helpers.js new file mode 100644 index 00000000..1268d34a --- /dev/null +++ b/src/views/Fans/DynamicInformation/helpers.js @@ -0,0 +1,820 @@ +export const colors = [ + '#CB32F1', + '#F18638', + '#139BB9', + '#E1AB17', + '#175AE1', + '#13B937', +]; + +export const Series = { + hour: [ + { + name: 'Sean', + data: [ + 526, + 526, + 526, + 526, + 526, + 1100, + 526, + 526, + 526, + 526, + 526, + 526, + 526, + 526, + 526, + 526, + 526, + 526, + 526, + 526, + 526, + 526, + 2100, + 526, + 526, + 526, + 526, + 526, + 526, + 526, + 526, + 526, + 526, + 526, + 1526, + 526, + 526, + 526, + 526, + 526, + 526, + 526, + 526, + 526, + 526, + 526, + 526, + 526, + 526, + 526, + 526, + 526, + 526, + 1526, + 526, + 526, + 526, + 526, + 526, + 526, + ], + color: '#CB32F1', + }, + { + name: 'Ivan', + data: [ + 315, + 315, + 315, + 315, + 315, + 315, + 1315, + 315, + 315, + 315, + 315, + 315, + 315, + 2200, + 315, + 315, + 315, + 315, + 315, + 315, + 1100, + 315, + 315, + 315, + 315, + 315, + 315, + 315, + 315, + 315, + 315, + 315, + 315, + 315, + 315, + 1600, + 315, + 315, + 315, + 315, + 315, + 315, + 315, + 315, + 315, + 315, + 315, + 315, + 315, + 315, + 315, + 1400, + 315, + 315, + 315, + 315, + 315, + 315, + 315, + 315, + ], + color: '#175AE1', + }, + { + name: 'Brendan', + data: [ + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 1359, + 359, + 359, + 359, + 359, + 2000, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 2100, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 1400, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + ], + color: '#B98D13', + }, + { + name: 'Matteo', + data: [ + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 1350, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 1590, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 1490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + ], + color: '#13B937', + }, + { + name: 'Joan', + data: [ + 467, + 467, + 467, + 467, + 467, + 467, + 467, + 467, + 467, + 467, + 1487, + 467, + 467, + 467, + 467, + 467, + 467, + 467, + 467, + 794, + 467, + 467, + 467, + 467, + 467, + 1924, + 467, + 467, + 467, + 467, + 467, + 467, + 467, + 1924, + 467, + 467, + 794, + 467, + 467, + 467, + 467, + 467, + 1924, + 467, + 467, + 467, + 467, + 467, + 467, + 467, + 467, + 467, + 794, + 467, + 467, + 467, + 467, + 467, + 467, + 467, + ], + color: '#F18638', + }, + { + name: 'Avinash', + data: [ + 410, + 410, + 410, + 410, + 1300, + 410, + 410, + 410, + 410, + 410, + 410, + 410, + 410, + 410, + 410, + 2110, + 410, + 410, + 410, + 410, + 410, + 410, + 410, + 410, + 410, + 410, + 410, + 410, + 410, + 410, + 410, + 1410, + 410, + 410, + 410, + 410, + 410, + 410, + 410, + 410, + 410, + 410, + 410, + 410, + 410, + 410, + 410, + 410, + 410, + 410, + 410, + 410, + 410, + 1410, + 410, + 410, + 410, + 410, + 410, + 410, + ], + color: '#139BB9', + }, + ], + day: [ + { + name: 'Sean', + data: [ + 526, + 526, + 526, + 526, + 626, + 626, + 626, + 526, + 526, + 526, + 526, + 526, + 526, + 526, + 526, + 526, + 526, + 526, + 526, + 526, + 526, + 526, + 526, + 526, + 526, + 526, + 526, + 526, + 526, + 526, + 526, + 526, + 526, + 526, + 526, + 526, + 526, + 526, + 726, + 1026, + 726, + 526, + 526, + 526, + 526, + 526, + 526, + 526, + 526, + 526, + 526, + 1326, + 1526, + 1326, + 526, + 526, + 526, + 526, + 526, + 526, + ], + color: '#CB32F1', + }, + { + name: 'Ivan', + data: [ + 315, + 315, + 315, + 315, + 315, + 315, + 815, + 315, + 315, + 315, + 315, + 315, + 315, + 1100, + 315, + 315, + 315, + 315, + 315, + 315, + 800, + 315, + 315, + 315, + 315, + 315, + 315, + 315, + 315, + 315, + 315, + 315, + 315, + 315, + 315, + 900, + 315, + 315, + 315, + 315, + 315, + 315, + 315, + 315, + 315, + 315, + 315, + 315, + 315, + 315, + 315, + 900, + 315, + 315, + 315, + 315, + 315, + 315, + 315, + 315, + ], + color: '#175AE1', + }, + { + name: 'Brendan', + data: [ + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 1500, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 1500, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 500, + 1200, + 500, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + ], + color: '#B98D13', + }, + { + name: 'Matteo', + data: [ + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 950, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 890, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 990, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + ], + color: '#13B937', + }, + { + name: 'Joan', + data: [ + 467, + 467, + 467, + 467, + 467, + 467, + 467, + 467, + 467, + 467, + 1087, + 467, + 467, + 467, + 467, + 467, + 467, + 467, + 467, + 794, + 467, + 467, + 467, + 467, + 467, + 1424, + 467, + 467, + 467, + 467, + 467, + 467, + 467, + 1424, + 467, + 467, + 794, + 467, + 467, + 467, + 467, + 467, + 1224, + 467, + 467, + 467, + 467, + 467, + 467, + 467, + 467, + 467, + 794, + 467, + 467, + 467, + 467, + 467, + 467, + 467, + ], + color: '#F18638', + }, + { + name: 'Avinash', + data: [ + 410, + 1410, + 410, + 410, + 1300, + 410, + 410, + 410, + 410, + 1410, + 410, + 410, + 410, + 410, + 410, + 2110, + 410, + 410, + 1410, + 410, + 410, + 410, + 410, + 1410, + 410, + 410, + 410, + 410, + 410, + 410, + 410, + 1410, + 410, + 410, + 410, + 410, + 1410, + 410, + 410, + 410, + 410, + 410, + 410, + 1410, + 410, + 410, + 410, + 410, + 1410, + 410, + 410, + 410, + 410, + 1410, + 410, + 410, + 410, + 1410, + 410, + 410, + ], + color: '#139BB9', + }, + ], +}; + +export const setTime = (count) => { + const arr = [...new Array(count)].map(() => ''); + for (let i = 0; i < arr.length; i++) { + arr[i] = `15:${String(i).padStart(2, '0')}`; + } + return arr; +}; + +export const setSpeed = (count) => { + const arr = [...new Array(count)].map((i, k) => `${k}`); + return arr; +}; diff --git a/src/views/Fans/DynamicInformation/index.js b/src/views/Fans/DynamicInformation/index.js new file mode 100644 index 00000000..a3dadd5a --- /dev/null +++ b/src/views/Fans/DynamicInformation/index.js @@ -0,0 +1,2 @@ +import FansDynamicPage from './FansDynamicPage.vue'; +export default FansDynamicPage; diff --git a/src/views/Fans/StaticInformation/FansStaticPage.vue b/src/views/Fans/StaticInformation/FansStaticPage.vue new file mode 100644 index 00000000..45bd1914 --- /dev/null +++ b/src/views/Fans/StaticInformation/FansStaticPage.vue @@ -0,0 +1,147 @@ +<template> + <b-container + :style="{ display: 'flex', 'flex-direction': 'column' }" + fluid="xxl pt-0 m-0" + > + <page-title /> + <span class="bold-16px">{{ $t('tablesDescription.installedFans') }}</span> + <page-section class="bootstrap-table__section"> + <b-table + responsive="md" + show-empty + class="bootstrap-rounded-table" + :items="items" + :fields="fields" + :empty-text="$t('global.table.emptyMessage')" + > + <template #cell(status)="{ value }"> + <div v-if="value" class="fans-table-col-first__cell"> + <img + class="status__img" + src="@/assets/images/fans-page/working.svg" + /> + <span> + {{ $t('fansPage.inWork') }} + </span> + </div> + <div v-else class="fans-table-col-first__cell"> + <img + class="status__img" + src="@/assets/images/fans-page/notWorking.svg" + /> + <span> + {{ $t('fansPage.notWorking') }} + </span> + </div> + </template> + </b-table> + </page-section> + </b-container> +</template> + +<script> +import PageTitle from '@/components/Global/PageTitle'; +import PageSection from '@/components/Global/PageSection'; + +export default { + components: { PageTitle, PageSection }, + data() { + return { + isBusy: true, + isAddersСolon: false, + fields: [ + { + key: 'status', + label: 'Статус', + formatter: this.dataFormatter, + thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg', + class: `bootstrap-rounded-table__column-first + fans-table-col-first`, + tdClass: 'regular-12px bootstrap-rounded-table__td', + }, + { + key: 'name', + label: 'Имя', + formatter: this.dataFormatter, + thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg', + class: `bootstrap-rounded-table__column-center + fans-table-col-second`, + tdClass: 'regular-12px bootstrap-rounded-table__td', + }, + { + key: 'type', + label: 'Тип', + formatter: this.dataFormatter, + thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg', + class: `bootstrap-rounded-table__column-center + fans-table-col-third`, + tdClass: 'regular-12px bootstrap-rounded-table__td', + }, + { + key: 'value', + label: 'Номинальная скорость, об/мин', + formatter: this.dataFormatter, + thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg', + class: `bootstrap-rounded-table__column-last + fans-table-col-third`, + tdClass: 'regular-12px bootstrap-rounded-table__td', + }, + ], + items: [ + { + status: true, + name: 'Венититор 1', + type: 'Системная плата', + value: '2100', + }, + { + status: true, + name: 'Венититор 2', + type: 'Системная плата', + value: '2300', + }, + { + status: false, + name: 'Венититор 3', + type: 'Системная плата', + value: '2400', + }, + ], + }; + }, +}; +</script> +<style lang="scss"> +.fans-table-col-first { + width: 25%; +} + +.fans-table-col-second { + width: 25%; +} + +.fans-table-col-third { + width: 25%; +} +</style> + +<style lang="scss" scoped> +.row { + margin: 0px; +} + +.fans-table-col-first__cell { + display: flex; + flex-flow: row nowrap; + align-items: center; + justify-content: flex-start; +} + +.status__img { + margin-right: 7px; +} + +.bold-16px { + margin: 24px 0 0 2rem; +} +</style> diff --git a/src/views/Fans/StaticInformation/index.js b/src/views/Fans/StaticInformation/index.js new file mode 100644 index 00000000..9a5d913d --- /dev/null +++ b/src/views/Fans/StaticInformation/index.js @@ -0,0 +1,2 @@ +import FansStaticPage from './FansStaticPage.vue'; +export default FansStaticPage; |