1 files changed, 167 insertions, 0 deletions
diff --git a/src/views/SILA/AnalyticalPanel/AnalyticalPanelPage.vue b/src/views/SILA/AnalyticalPanel/AnalyticalPanelPage.vue
new file mode 100644
index 00000000..b736f026
--- /dev/null
+++ b/src/views/SILA/AnalyticalPanel/AnalyticalPanelPage.vue
@@ -0,0 +1,167 @@
+<template>
+  <b-container fluid="xxl pt-0 m-0">
+    <page-title />
+    <div class="main-container">
+      <div class="tables-container">
+        <div class="server-table">
+          <span class="semi-bold-16px">Состояние сервера</span>
+          <b-table
+            show-empty
+            responsive="md"
+            class="bootstrap-analytical-table"
+            :items="server_items"
+            :fields="server_fields"
+          >
+            <template #cell(value)="{ value }">
+              <b-col v-if="value" col="1">
+                <img
+                  src="@/assets/images/icon-ok.svg"
+                  class="system-network-table__icon"
+                />
+              </b-col>
+              <b-col v-else>
+                <img
+                  src="@/assets/images/icon-no.svg"
+                  class="system-network-table__icon"
+                />
+              </b-col>
+            </template>
+          </b-table>
+        </div>
+        <div class="events-table">
+          <span class="semi-bold-16px">События</span>
+          <b-table
+            show-empty
+            responsive="md"
+            class="bootstrap-analytical-table"
+            :items="events_items"
+            :fields="events_fields"
+          >
+          </b-table>
+        </div>
+      </div>
+    </div>
+  </b-container>
+</template>
+
+<script>
+import PageTitle from '@/components/Global/PageTitle';
+
+export default {
+  components: {
+    PageTitle,
+  },
+
+  data() {
+    return {
+      server_fields: [
+        {
+          key: 'param',
+          label: 'Раздел',
+          formatter: this.dataFormatter,
+          thClass: 'semi-bold-12px__caps bootstrap-analytical-table__head_bg',
+          class: 'bootstrap-analytical-table__column-first',
+          tdClass: 'regular-12px bootstrap-analytical-table__td',
+        },
+        {
+          key: 'value',
+          label: 'Статус',
+          formatter: this.dataFormatter,
+          thClass: 'semi-bold-12px__caps bootstrap-analytical-table__head_bg',
+          class:
+            'bootstrap-rounded-table__column-last analytical-table__status',
+          tdClass: 'regular-12px bootstrap-analytical-table__td',
+        },
+      ],
+      server_items: [
+        { param: 'Сервер №1', value: true },
+        { param: 'ВМС', value: true },
+        { param: 'Аналитическая панель', value: true },
+        { param: 'RAID-контроллеры', value: false },
+        { param: 'Модули памяти', value: true },
+        { param: 'Процессоры', value: true },
+        { param: 'Источники питания', value: true },
+        { param: 'Вентиляторы', value: true },
+        { param: 'Физические накопители', value: true },
+        { param: 'Виртуальные накопители', value: true },
+        { param: 'Материнская плата', value: true },
+        { param: 'Сетевые адаптеры', value: true },
+        { param: 'PCI устройства', value: true },
+      ],
+      events_fields: [
+        {
+          key: 'time',
+          label: 'Время',
+          formatter: this.dataFormatter,
+          thClass: 'semi-bold-12px__caps bootstrap-analytical-table__head_bg',
+          class: 'bootstrap-analytical-table__column-first',
+          tdClass: 'regular-12px bootstrap-analytical-table__td',
+        },
+        {
+          key: 'type',
+          label: 'Тип события',
+          formatter: this.dataFormatter,
+          thClass: 'semi-bold-12px__caps bootstrap-analytical-table__head_bg',
+          tdClass: 'regular-12px bootstrap-analytical-table__td',
+        },
+        {
+          key: 'info',
+          label: 'О событии',
+          formatter: this.dataFormatter,
+          thClass: 'semi-bold-12px__caps bootstrap-analytical-table__head_bg',
+          class: 'bootstrap-rounded-table__column-last',
+          tdClass: 'regular-12px bootstrap-analytical-table__td',
+        },
+      ],
+      events_items: [
+        { time: 'Сервер №1', type: 'Критические', info: 'true' },
+        { time: 'ВМС', type: 'Критические', info: 'true' },
+        {
+          time: 'Аналитическая панель',
+          type: 'Критические',
+          info: 'true',
+        },
+        {
+          time: 'RAID-контроллеры',
+          type: 'Критические',
+          info: 'false',
+        },
+        {
+          time: 'Модули памяти',
+          type: 'Критические',
+          info: 'true',
+        },
+        { time: 'Процессоры', type: 'Критические', info: 'true' },
+        {
+          time: 'Источники питания',
+          type: 'Критические',
+          info: 'true',
+        },
+        { time: 'Вентиляторы', type: 'Критические', info: 'true' },
+        { time: 'Физические накопители', type: 'Критические', info: 'true' },
+      ],
+    };
+  },
+};
+</script>
+<style lang="scss">
+.analytical-table__status {
+  width: 10%;
+}
+</style>
+<style lang="scss" scoped>
+.tables-container {
+  display: flex;
+  flex-flow: row nowrap;
+  margin: 16px 32px;
+  gap: 24px;
+}
+
+.server-table {
+  width: 35%;
+}
+
+.events-table {
+  width: 65%;
+}
+</style>