1 files changed, 118 insertions, 0 deletions
diff --git a/src/views/_sila/Fans/DynamicInformation/FansDynamicPage.vue b/src/views/_sila/Fans/DynamicInformation/FansDynamicPage.vue
new file mode 100644
index 00000000..fe997c58
--- /dev/null
+++ b/src/views/_sila/Fans/DynamicInformation/FansDynamicPage.vue
@@ -0,0 +1,118 @@
+<template>
+  <b-container
+    :style="{ display: 'flex', 'flex-direction': 'column' }"
+    fluid="xxl pt-0 m-0"
+  >
+    <page-title :description="$t('SystemDescription.FansDynamicInformation')" />
+    <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 />
+  </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>