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

1 files changed, 308 insertions, 0 deletions

diff --git a/src/views/BMC/Settings/SettingsPage.vue b/src/views/BMC/Settings/SettingsPage.vue
new file mode 100644
index 00000000..c9a0df8d
--- /dev/null
+++ b/src/views/BMC/Settings/SettingsPage.vue
@@ -0,0 +1,308 @@
+<template>
+  <b-container
+    :style="{ display: 'flex', 'flex-direction': 'column' }"
+    fluid="xxl pt-0 m-0"
+  >
+    <page-title />
+    <!-- BMC table -->
+    <div class="main-container">
+      <div class="smnp-section">
+        <div class="smnp-settings-container">
+          <span class="bold-12px__caps section-label">{{
+            $t('BMC.smnp')
+          }}</span>
+          <b-form-group class="form-group">
+            <label class="regular-12px tretiatry">{{ $t('BMC.system') }}</label>
+            <b-form-input
+              v-model="system"
+              type="text"
+              class="form-control medium-16px"
+            >
+            </b-form-input>
+            <img class="clear-icon" src="@/assets/images/popups/x-icon.svg" />
+          </b-form-group>
+          <b-form-group class="form-group">
+            <label class="regular-12px tretiatry">{{
+              $t('BMC.contacts')
+            }}</label>
+            <b-form-input
+              type="text"
+              class="form-control medium-16px"
+              placeholder="Введите значение"
+            >
+            </b-form-input>
+          </b-form-group>
+          <b-form-group class="form-group">
+            <label class="regular-12px tretiatry">{{
+              $t('BMC.community')
+            }}</label>
+            <b-form-input
+              v-model="community"
+              type="text"
+              class="form-control medium-16px"
+            >
+            </b-form-input>
+            <img class="clear-icon" src="@/assets/images/popups/x-icon.svg" />
+          </b-form-group>
+          <b-form-group class="form-group">
+            <label class="regular-12px tretiatry">{{
+              $t('global.status.status')
+            }}</label>
+            <b-form-select
+              v-model="connectionType"
+              :options="connectionTypes"
+              class="select-connection medium-16px"
+            />
+          </b-form-group>
+          <b-form-group class="form-group">
+            <label class="regular-12px tretiatry">{{ $t('BMC.smnpIp') }}</label>
+            <b-form-input
+              v-model="smnpIp"
+              type="text"
+              class="form-control medium-16px"
+            >
+            </b-form-input>
+            <img class="clear-icon" src="@/assets/images/popups/x-icon.svg" />
+          </b-form-group>
+          <b-form-group class="form-group">
+            <label class="regular-12px tretiatry">{{
+              $t('BMC.smnpPort')
+            }}</label>
+            <b-form-input
+              v-model="smnpPort"
+              type="text"
+              class="form-control medium-16px"
+            >
+            </b-form-input>
+            <img class="clear-icon" src="@/assets/images/popups/x-icon.svg" />
+          </b-form-group>
+          <div class="accept-container">
+            <b-button variant="primary" class="accept-button">
+              {{ $t('global.action.acceptChanges') }}
+            </b-button>
+          </div>
+        </div>
+      </div>
+      <div class="smnp-section">
+        <div class="smnp-settings-container">
+          <span class="bold-12px__caps section-label">{{
+            $t('BMC.smnpWarning')
+          }}</span>
+          <div class="table-section">
+            <b-table
+              responsive="md"
+              show-empty
+              class="bootstrap-rounded-table"
+              :items="items"
+              :fields="fields"
+            >
+              <template #cell(value)="{ index }">
+                <b-row>
+                  <b-col>
+                    <span v-if="items[index].value">
+                      {{ $t('global.status.enabled') }}
+                    </span>
+                    <span v-else>
+                      {{ $t('global.status.disabled') }}
+                    </span>
+                  </b-col>
+                  <b-col>
+                    <b-form-checkbox v-model="items[index].value" switch>
+                    </b-form-checkbox>
+                  </b-col>
+                </b-row>
+              </template>
+            </b-table>
+          </div>
+          <div class="accept-container">
+            <b-button variant="secondary" class="test-message-button">
+              {{ $t('BMC.testMessage') }}
+            </b-button>
+            <b-button variant="primary" class="accept-button">
+              {{ $t('global.action.acceptChanges') }}
+            </b-button>
+          </div>
+        </div>
+      </div>
+
+      <div class="smnp-section">
+        <div class="smnp-settings-container">
+          <span class="bold-12px__caps section-label">{{
+            $t('BMC.syslogSettings')
+          }}</span>
+          <b-form-group class="form-group">
+            <label class="regular-12px tretiatry">{{
+              $t('global.status.status')
+            }}</label>
+            <b-form-select
+              v-model="connectionType"
+              :options="connectionTypes"
+              class="select-connection medium-16px"
+            />
+          </b-form-group>
+          <b-form-group class="form-group">
+            <label class="regular-12px tretiatry">{{
+              $t('BMC.syslogIP')
+            }}</label>
+            <b-form-input
+              v-model="syslogIp"
+              type="text"
+              class="form-control medium-16px"
+            >
+            </b-form-input>
+            <img class="clear-icon" src="@/assets/images/popups/x-icon.svg" />
+          </b-form-group>
+          <b-form-group class="form-group">
+            <label class="regular-12px tretiatry">{{
+              $t('BMC.syslogPort')
+            }}</label>
+            <b-form-input
+              v-model="syslogPort"
+              type="text"
+              class="form-control medium-16px"
+            >
+            </b-form-input>
+            <img class="clear-icon" src="@/assets/images/popups/x-icon.svg" />
+          </b-form-group>
+          <div class="accept-container">
+            <b-button variant="primary" class="accept-button">
+              {{ $t('global.action.acceptChanges') }}
+            </b-button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </b-container>
+</template>
+
+<script>
+import PageTitle from '@/components/Global/PageTitle';
+// import PageSection from '@/components/Global/PageSection';
+
+export default {
+  components: {
+    PageTitle,
+    // PageSection,
+  },
+  data() {
+    return {
+      text: '',
+      system: '2КА04.02_г17',
+      community: 'public',
+      smnpIp: '0.0.0.0',
+      smnpPort: '161',
+      syslogIp: '0.0.0.0',
+      syslogPort: '161',
+      fields: [
+        {
+          key: 'name',
+          label: 'Тип предупреждения',
+          formatter: this.dataFormatter,
+          thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg',
+          class: `bootstrap-rounded-table__column-first
+            bootstrap-table_smnp-table`,
+          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 
+            smnp-table-col-last`,
+          tdClass: 'regular-12px bootstrap-rounded-table__td',
+        },
+      ],
+      items: [
+        {
+          name: 'SNMPv1',
+          value: true,
+        },
+        {
+          name: 'SNMPv3',
+          value: true,
+        },
+        {
+          name: 'Постоянные запросы и предупреждения SNMPv1',
+          value: true,
+        },
+      ],
+    };
+  },
+};
+</script>
+<style lang="scss">
+.bootstrap-table_smnp-table {
+  width: 70%;
+}
+.smnp-table-col-last {
+  width: 30%;
+}
+</style>
+<style lang="scss" scoped>
+.main-container {
+  margin-top: 16px;
+}
+.smnp-section {
+  border-bottom: 1px solid $faint-secondary-primary-10;
+}
+.smnp-settings-container {
+  display: flex;
+  flex-flow: row wrap;
+  gap: 16px;
+  justify-content: flex-start;
+  align-items: flex-start;
+  margin: 16px 0 16px 28px;
+}
+
+.section-label {
+  display: block;
+  width: 100%;
+}
+.form-group {
+  width: 341px;
+  height: 35px;
+}
+.form-control {
+  margin: -31px 0px 0 -15px;
+  height: 52px;
+  width: 341px;
+  padding: 17px 0 0 15px;
+}
+.clear-icon {
+  margin: -80px 0px 0px 300px;
+}
+
+.select-connection {
+  height: 52px;
+  width: 341px;
+  padding-top: 30px;
+  border: none;
+  border-radius: 8px;
+  margin: -31px 0 18px -15px;
+  background-color: $faint-secondary-primary-5;
+  background-image: url('../../../assets/images/icon-chevron.svg');
+}
+.accept-container {
+  width: 100%;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.accept-button {
+  width: 245px;
+  height: 36px;
+  margin-right: 33px;
+}
+.test-message-button {
+  width: 245px;
+  height: 36px;
+  margin-right: 16px;
+  background-color: $faint-secondary-primary-5;
+}
+
+.table-section {
+  width: 100%;
+  margin: 0 20px 0 0;
+}
+</style>