Add depend: highcarts. Pages: power, analytical motherboard, memory, fans, event logs, Fix styles, add global components.

6 files changed, 880 insertions, 0 deletions

diff --git a/src/views/Motherboard/DynamicInfo/MotherboardDynamicPage.vue b/src/views/Motherboard/DynamicInfo/MotherboardDynamicPage.vue
new file mode 100644
index 00000000..95267ece
--- /dev/null
+++ b/src/views/Motherboard/DynamicInfo/MotherboardDynamicPage.vue
@@ -0,0 +1,140 @@
+<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="limit-container">
+        <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="0"
+            :max="100"
+            class="form-control medium-12px"
+          >
+          </b-form-input>
+        </div>
+        <b-button
+          class="save-button"
+          variant="primary"
+          @click="updateTemperature"
+        >
+          {{ $t('global.action.save') }}
+        </b-button>
+      </div>
+      <!-- Temperature Table -->
+      <temperature-table
+        :time-scale="timeScale"
+        :warning="temperatureWarning"
+        :non-normal="temperatureNonNormal"
+        :critical-start="temperatureCriticalStart"
+      />
+      <accessory-table :records="accessoryData.temperatureTable" />
+    </div>
+  </b-container>
+</template>
+<script>
+import PageTitle from '@/components/Global/PageTitle';
+import DateSwitch from '@/components/Global/SilaComponents/DateSwitch';
+import TemperatureTable from './TemperatureTable';
+import AccessoryTable from '@/components/Global/SilaComponents/Tables/AccessoryTableWithLabel';
+import iconChevronUp from '@carbon/icons-vue/es/chevron--up/16';
+
+import { AccessoryData } from './helpers';
+
+export default {
+  components: {
+    PageTitle,
+    DateSwitch,
+    TemperatureTable,
+    AccessoryTable,
+  },
+  data() {
+    return {
+      timeScale: 'hour',
+      temperatureWarning: 72,
+      temperatureWarningInput: 72,
+      notificationInput: 42,
+      accessoryData: AccessoryData,
+      iconChevronUp: iconChevronUp,
+    };
+  },
+  methods: {
+    switchTimeScale(period) {
+      this.timeScale = period;
+    },
+    updateTemperature() {
+      this.temperatureWarning = +this.temperatureWarningInput;
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+//nav items style
+.nav-item,
+.nav-link {
+  padding: 0;
+}
+.nav-item {
+  list-style-type: none;
+}
+
+a {
+  color: $text-primary !important;
+  &:hover {
+    color: $text-primary !important;
+  }
+}
+
+.notification-button {
+  border: none;
+  background: none;
+}
+
+.semi-bold-12px {
+  z-index: 1001;
+}
+
+// temperature limit comtainer
+.limit-container {
+  height: 85px;
+  width: 100%;
+  padding: 0 32px 10px 32px;
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: flex-start;
+  align-items: flex-end;
+  gap: 24px;
+}
+
+.trmperature-limt {
+  height: 60px;
+  width: 100%;
+  max-width: 270px;
+  display: flex;
+  align-items: baseline;
+  flex-flow: row wrap;
+  gap: 8px;
+}
+
+.form-control {
+  height: 36px;
+  &.non-normal {
+    width: 125px;
+  }
+}
+.save-button {
+  width: 151px;
+  height: 36px;
+}
+</style>
diff --git a/src/views/Motherboard/DynamicInfo/TemperatureTable.vue b/src/views/Motherboard/DynamicInfo/TemperatureTable.vue
new file mode 100644
index 00000000..1bbf7e08
--- /dev/null
+++ b/src/views/Motherboard/DynamicInfo/TemperatureTable.vue
@@ -0,0 +1,112 @@
+<template>
+  <div>
+    <highcharts :options="chartOptions.line" />
+  </div>
+</template>
+
+<script>
+import { setTime, Series, setCategories } from './helpers';
+import { Chart } from 'highcharts-vue';
+
+export default {
+  components: {
+    highcharts: Chart,
+  },
+  props: {
+    timeScale: {
+      type: String,
+      default: 'hour',
+    },
+    warning: {
+      type: Number,
+      default: 70,
+    },
+    nonNormal: {
+      type: Number,
+      default: 70,
+    },
+    criticalStart: {
+      type: Number,
+      default: 70,
+    },
+  },
+  computed: {
+    chartOptions() {
+      return {
+        line: {
+          chart: {
+            type: 'line',
+            margin: [12, 50, 32, 60],
+            height: '320px',
+          },
+          title: null,
+          xAxis: {
+            categories: setTime(60, 'hour'),
+            title: null,
+            labels: {
+              step: 6,
+            },
+            minorGridLineColor: '#1A3E5B1A',
+          },
+          yAxis: {
+            categories: setCategories(101, 'С°'),
+            min: 0,
+            max: 100,
+            title: null,
+            minTickInterval: 25,
+            minorGridLineColor: '#1A3E5B1A',
+            plotLines: [
+              {
+                color: '#E11717',
+                dashStyle: 'solid',
+                value: this.warning,
+                zIndex: '1000',
+                width: 2,
+                label: {
+                  text: 'Пороговое значение предупреждения, С°',
+                  align: 'right',
+                  style: {
+                    fontFamily: 'Inter, sans-serif',
+                    fontSize: '12px',
+                    fontStyle: 'normal',
+                    fontWeight: '400',
+                    lineHeight: '16px',
+                    color: '#0C1C2999',
+                  },
+                },
+              },
+            ],
+          },
+          series: Series['temperature'].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/Motherboard/DynamicInfo/helpers.js b/src/views/Motherboard/DynamicInfo/helpers.js
new file mode 100644
index 00000000..807de83a
--- /dev/null
+++ b/src/views/Motherboard/DynamicInfo/helpers.js
@@ -0,0 +1,527 @@
+export const colors = [
+  '#CB32F1',
+  '#F18638',
+  '#139BB9',
+  '#E1AB17',
+  '#175AE1',
+  '#13B937',
+];
+
+export const Series = {
+  temperature: [
+    {
+      name: 'Sean',
+      data: [
+        7,
+        7,
+        7,
+        17,
+        7,
+        27,
+        7,
+        7,
+        47,
+        7,
+        7,
+        7,
+        37,
+        7,
+        7,
+        7,
+        27,
+        7,
+        7,
+        7,
+        27,
+        7,
+        7,
+        7,
+        47,
+        7,
+        7,
+        7,
+        7,
+        7,
+        7,
+        7,
+        7,
+        7,
+        7,
+        7,
+        27,
+        7,
+        7,
+        7,
+        7,
+        7,
+        27,
+        7,
+        7,
+        7,
+        7,
+        7,
+        7,
+        37,
+        7,
+        7,
+        7,
+        7,
+        7,
+        7,
+        7,
+        7,
+        7,
+        7,
+      ],
+      color: '#CB32F1',
+    },
+    {
+      name: 'Ivan',
+      data: [
+        10,
+        10,
+        10,
+        10,
+        10,
+        10,
+        10,
+        10,
+        10,
+        10,
+        20,
+        10,
+        10,
+        30,
+        10,
+        10,
+        10,
+        10,
+        10,
+        10,
+        10,
+        10,
+        10,
+        10,
+        50,
+        10,
+        10,
+        10,
+        10,
+        10,
+        10,
+        10,
+        10,
+        10,
+        10,
+        20,
+        10,
+        10,
+        10,
+        10,
+        10,
+        30,
+        10,
+        10,
+        10,
+        10,
+        10,
+        10,
+        19,
+        10,
+        10,
+        10,
+        10,
+        10,
+        10,
+        10,
+        10,
+        10,
+        10,
+        10,
+      ],
+      color: '#175AE1',
+    },
+    {
+      name: 'Brendan',
+      data: [
+        13,
+        13,
+        13,
+        13,
+        23,
+        13,
+        33,
+        13,
+        13,
+        13,
+        13,
+        13,
+        13,
+        13,
+        13,
+        13,
+        13,
+        13,
+        13,
+        13,
+        23,
+        13,
+        43,
+        13,
+        53,
+        13,
+        13,
+        13,
+        53,
+        13,
+        13,
+        13,
+        13,
+        13,
+        13,
+        13,
+        13,
+        13,
+        13,
+        13,
+        53,
+        13,
+        43,
+        13,
+        13,
+        63,
+        13,
+        43,
+        13,
+        23,
+        13,
+        43,
+        13,
+        13,
+        13,
+        13,
+        13,
+        13,
+        13,
+        13,
+      ],
+      color: '#B98D13',
+    },
+    {
+      name: 'Matteo',
+      data: [
+        24,
+        14,
+        44,
+        14,
+        14,
+        14,
+        14,
+        14,
+        34,
+        14,
+        14,
+        14,
+        14,
+        34,
+        14,
+        24,
+        14,
+        34,
+        14,
+        14,
+        14,
+        14,
+        14,
+        14,
+        14,
+        44,
+        14,
+        14,
+        14,
+        14,
+        14,
+        14,
+        14,
+        44,
+        14,
+        54,
+        14,
+        14,
+        14,
+        14,
+        14,
+        14,
+        14,
+        14,
+        14,
+        84,
+        14,
+        94,
+        14,
+        14,
+        14,
+        54,
+        14,
+        44,
+        14,
+        44,
+        14,
+        14,
+        44,
+        14,
+      ],
+      color: '#13B937',
+    },
+    {
+      name: 'Joan',
+      data: [
+        16,
+        16,
+        16,
+        26,
+        16,
+        46,
+        16,
+        66,
+        16,
+        16,
+        16,
+        16,
+        16,
+        16,
+        16,
+        16,
+        16,
+        16,
+        26,
+        16,
+        36,
+        16,
+        66,
+        16,
+        76,
+        16,
+        16,
+        16,
+        16,
+        16,
+        16,
+        16,
+        16,
+        16,
+        26,
+        16,
+        16,
+        16,
+        56,
+        16,
+        16,
+        16,
+        56,
+        16,
+        66,
+        16,
+        76,
+        16,
+        16,
+        16,
+        96,
+        16,
+        16,
+        16,
+        16,
+        16,
+        16,
+        16,
+        16,
+        16,
+      ],
+      color: '#F18638',
+    },
+    {
+      name: 'Avinash',
+      data: [
+        19,
+        19,
+        19,
+        19,
+        19,
+        19,
+        19,
+        29,
+        19,
+        19,
+        19,
+        19,
+        19,
+        39,
+        39,
+        39,
+        19,
+        59,
+        19,
+        19,
+        39,
+        19,
+        29,
+        19,
+        39,
+        19,
+        19,
+        19,
+        19,
+        19,
+        19,
+        19,
+        19,
+        19,
+        19,
+        19,
+        19,
+        19,
+        29,
+        19,
+        19,
+        19,
+        19,
+        19,
+        19,
+        19,
+        19,
+        19,
+        19,
+        19,
+        19,
+        19,
+        19,
+        19,
+        19,
+        19,
+        19,
+        19,
+        19,
+        19,
+      ],
+      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 setCategories = (count, desc) => {
+  const arr = [...new Array(count)].map((i, k) => `${k} ${desc}`);
+  return arr;
+};
+
+export const AccessoryData = {
+  temperatureTable: {
+    fields: [
+      {
+        key: 'name',
+        label: 'Имя модуля',
+        thClass: 'bootstrap-fans-table__th semi-bold-12px',
+        tdClass: 'bootstrap-fans-table__td light-12px',
+      },
+      {
+        key: 'currentTemperature',
+        label: 'Текущее, С°',
+        thClass: 'bootstrap-fans-table__th semi-bold-12px',
+        tdClass: 'bootstrap-fans-table__td light-12px',
+      },
+      {
+        key: 'middleTemperature',
+        label: 'Среднее, С°',
+        thClass: 'bootstrap-fans-table__th semi-bold-12px',
+        tdClass: 'bootstrap-fans-table__td light-12px',
+      },
+      {
+        key: 'minTemperature',
+        label: 'Минимальное, С°',
+        thClass: 'bootstrap-fans-table__th semi-bold-12px',
+        tdClass: 'bootstrap-fans-table__td light-12px',
+      },
+      {
+        key: 'minDate',
+        label: 'Дата минимального',
+        thClass: 'bootstrap-fans-table__th semi-bold-12px',
+        tdClass: 'bootstrap-fans-table__td light-12px',
+      },
+      {
+        key: 'maxTemperature',
+        label: 'Максимальное, С°',
+        thClass: 'bootstrap-fans-table__th semi-bold-12px',
+        tdClass: 'bootstrap-fans-table__td light-12px',
+      },
+      {
+        key: 'maxDate',
+        label: 'Дата максимального',
+        thClass: 'bootstrap-fans-table__th semi-bold-12px',
+        tdClass: 'bootstrap-fans-table__td light-12px',
+      },
+    ],
+    items: [
+      {
+        name: 'Материнская плата 1',
+        currentTemperature: 19,
+        middleTemperature: 40,
+        minTemperature: 31,
+        minDate: { time: '15:15', date: '11.11.2021' },
+        maxTemperature: 88,
+        maxDate: { time: '10:26', date: '15.11.2021' },
+      },
+      {
+        name: 'Материнская плата 2',
+        currentTemperature: 29,
+        middleTemperature: 40,
+        minTemperature: 20,
+        minDate: { time: '15:45', date: '11.11.2021' },
+        maxTemperature: 76,
+        maxDate: { time: '16:59', date: '16.11.2021' },
+      },
+      {
+        name: 'Материнская плата 3',
+        currentTemperature: 48,
+        middleTemperature: 46,
+        minTemperature: 31,
+        minDate: { time: '15:23', date: '11.11.2021' },
+        maxTemperature: 69,
+        maxDate: { time: '15:26', date: '15.11.2021' },
+      },
+      {
+        name: 'Материнская плата 4',
+        currentTemperature: 48,
+        middleTemperature: 45,
+        minTemperature: 5,
+        minDate: { time: '16:45', date: '25.11.2021' },
+        maxTemperature: 75,
+        maxDate: { time: '11:26', date: '16.11.2021' },
+      },
+      {
+        name: 'Материнская плата 5',
+        currentTemperature: 39,
+        middleTemperature: 44,
+        minTemperature: 30,
+        minDate: { time: '15:23', date: '11.11.2021' },
+        maxTemperature: 80,
+        maxDate: { time: '15:26', date: '17.11.2021' },
+      },
+      {
+        name: 'Материнская плата 6',
+        currentTemperature: 39,
+        middleTemperature: 44,
+        minTemperature: 5,
+        minDate: { time: '16:45', date: '25.11.2021' },
+        maxTemperature: 80,
+        maxDate: { time: '15:26', date: '15.11.2021' },
+      },
+    ],
+  },
+};
diff --git a/src/views/Motherboard/DynamicInfo/index.js b/src/views/Motherboard/DynamicInfo/index.js
new file mode 100644
index 00000000..bd155997
--- /dev/null
+++ b/src/views/Motherboard/DynamicInfo/index.js
@@ -0,0 +1,2 @@
+import MotherboardDynamicPage from './MotherboardDynamicPage.vue';
+export default MotherboardDynamicPage;
diff --git a/src/views/Motherboard/Specification/MotherboardSpecificationPage.vue b/src/views/Motherboard/Specification/MotherboardSpecificationPage.vue
new file mode 100644
index 00000000..2146663d
--- /dev/null
+++ b/src/views/Motherboard/Specification/MotherboardSpecificationPage.vue
@@ -0,0 +1,97 @@
+<template>
+  <b-container
+    :style="{ display: 'flex', 'flex-direction': 'column' }"
+    fluid="xxl pt-0 m-0"
+  >
+    <page-title />
+    <div class="main-container">
+      <page-section class="bootstrap-table__section">
+        <span class="bold-16px">{{ $t('global.table.info') }}</span>
+        <b-table
+          responsive="md"
+          show-empty
+          class="bootstrap-rounded-table"
+          :items="items"
+          :fields="fields"
+          :empty-text="$t('global.table.emptyMessage')"
+        >
+        </b-table>
+        <span class="bold-16px">{{
+          $t('appNavigation.motherboardParam')
+        }}</span>
+        <popover
+          id="popover-reactive-1"
+          description="SystemDescription.onBootRom"
+          popup="SystemDescription.onBootRom_popup"
+          button="global.action.refresh"
+        />
+        <popover
+          id="popover-reactive-2"
+          description="SystemDescription.offBootRom"
+          popup="SystemDescription.offBootRom_popup"
+          button="global.action.refresh"
+        />
+      </page-section>
+    </div>
+  </b-container>
+</template>
+
+<script>
+import PageTitle from '@/components/Global/PageTitle';
+import PageSection from '@/components/Global/PageSection';
+
+import Popover from '@/components/Global/Popover';
+
+export default {
+  components: { PageTitle, PageSection, Popover },
+  data() {
+    return {
+      fields: [
+        {
+          key: 'parametr',
+          label: 'Параметр',
+          formatter: this.dataFormatter,
+          thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg',
+          class: 'bootstrap-rounded-table__column-first',
+          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',
+          tdClass: 'regular-12px bootstrap-rounded-table__td',
+        },
+      ],
+      items: [
+        {
+          parametr: 'Модель',
+          value: 'R2132',
+        },
+        {
+          parametr: 'Производитель',
+          value: 'Asus',
+        },
+        {
+          parametr: 'Версия',
+          value: '4.2',
+        },
+        {
+          parametr: 'Серийный номер',
+          value: '231232132133',
+        },
+        {
+          parametr: 'Версия BIOS',
+          value: '2',
+        },
+      ],
+    };
+  },
+};
+</script>
+<style lang="scss" scoped>
+.bootstrap-rounded-table {
+  margin: 16px 0;
+}
+</style>
diff --git a/src/views/Motherboard/Specification/index.js b/src/views/Motherboard/Specification/index.js
new file mode 100644
index 00000000..5458039a
--- /dev/null
+++ b/src/views/Motherboard/Specification/index.js
@@ -0,0 +1,2 @@
+import MotherboardSpecificationPage from './MotherboardSpecificationPage.vue';
+export default MotherboardSpecificationPage;