1 files changed, 191 insertions, 0 deletions
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>