summaryrefslogtreecommitdiff
path: root/src/views/Processors/DynamicInfo
diff options
context:
space:
mode:
Diffstat (limited to 'src/views/Processors/DynamicInfo')
-rw-r--r--src/views/Processors/DynamicInfo/FrequencyTable.vue107
-rw-r--r--src/views/Processors/DynamicInfo/PowerTable.vue126
-rw-r--r--src/views/Processors/DynamicInfo/ProcessorsDynamicPage.vue373
-rw-r--r--src/views/Processors/DynamicInfo/TemperatureTable.vue126
-rw-r--r--src/views/Processors/DynamicInfo/helpers.js1422
-rw-r--r--src/views/Processors/DynamicInfo/index.js2
6 files changed, 2156 insertions, 0 deletions
diff --git a/src/views/Processors/DynamicInfo/FrequencyTable.vue b/src/views/Processors/DynamicInfo/FrequencyTable.vue
new file mode 100644
index 00000000..c749905d
--- /dev/null
+++ b/src/views/Processors/DynamicInfo/FrequencyTable.vue
@@ -0,0 +1,107 @@
+<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,
+ },
+ },
+ 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(1001, 'Hz'),
+ min: 0,
+ max: 1000,
+ title: null,
+ minTickInterval: 250,
+ minorGridLineColor: '#1A3E5B1A',
+ labels: {
+ padding: 4,
+ },
+ 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['frequency'].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/Processors/DynamicInfo/PowerTable.vue b/src/views/Processors/DynamicInfo/PowerTable.vue
new file mode 100644
index 00000000..4ccb8aac
--- /dev/null
+++ b/src/views/Processors/DynamicInfo/PowerTable.vue
@@ -0,0 +1,126 @@
+<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: 66,
+ },
+ shutdown: {
+ type: Number,
+ default: 88,
+ },
+ },
+ computed: {
+ chartOptions() {
+ return {
+ line: {
+ chart: {
+ type: 'line',
+ margin: [12, 50, 32, 60],
+ height: '320px',
+ },
+ title: null,
+ xAxis: {
+ categories: setTime(60, this.timeScale),
+ 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',
+ fontSize: '12px',
+ fontStyle: 'normal',
+ fontWeight: '400',
+ lineHeight: '16px',
+ color: '#0C1C2999',
+ },
+ },
+ },
+ {
+ color: '#1A3E5B',
+ dashStyle: 'solid',
+ value: this.shutdown,
+ width: 2,
+ label: {
+ text: 'Пороговое значения отказ',
+ align: 'right',
+ style: {
+ fontFamily: 'Inter',
+ fontSize: '12px',
+ fontStyle: 'normal',
+ fontWeight: '400',
+ lineHeight: '16px',
+ color: '#0C1C2999',
+ },
+ },
+ },
+ ],
+ },
+ series: Series['power'].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/Processors/DynamicInfo/ProcessorsDynamicPage.vue b/src/views/Processors/DynamicInfo/ProcessorsDynamicPage.vue
new file mode 100644
index 00000000..9ba32a4d
--- /dev/null
+++ b/src/views/Processors/DynamicInfo/ProcessorsDynamicPage.vue
@@ -0,0 +1,373 @@
+<template>
+ <b-container
+ :style="{ display: 'flex', 'flex-direction': 'column' }"
+ fluid="xxl pt-0 m-0"
+ >
+ <page-title />
+ <div class="notification-time__container">
+ <span class="semi-bold-12px">{{
+ $t('global.ariaLabel.notificationTime')
+ }}</span>
+ <div class="form-control notification-time">
+ <b-form-input
+ v-model="notificationInput"
+ type="number"
+ class="notification-time__input"
+ >
+ </b-form-input>
+ <button class="notification-button">
+ <img
+ class="notification-time__icon"
+ src="@/assets/images/refresh.svg"
+ />
+ </button>
+ </div>
+ </div>
+ <div class="main-container">
+ <date-switch
+ :switch-time-scale="switchTimeScale"
+ :time-scale="timeScale"
+ />
+ <!-- Temperature Section -->
+ <div class="page-collapse-decorator">
+ <b-button
+ v-b-toggle.toggle-collapse_1
+ variant="link"
+ class="collapse-button semi-bold-16px"
+ >
+ <img src="@/assets/images/temperature-icon.svg" />
+ <span class="bold-16px">{{ $t('subHeader.temperature') }}</span>
+ <component :is="iconChevronUp" class="icon-expand" />
+ </b-button>
+ <b-collapse id="toggle-collapse_1" class="nav-item__nav">
+ <!-- Temperature Limit Inputs -->
+ <div class="limit-container">
+ <div class="trmperature-limt">
+ <img src="@/assets/images/labels/non-normal.svg" />
+ <span class="semi-bold-12px">{{
+ $t('tablesDescription.nonNormalMode')
+ }}</span>
+ <b-form-input
+ v-model="temperatureNonNormalInput"
+ type="number"
+ :min="0"
+ :max="temperatureCriticalInput"
+ class="form-control medium-12px"
+ >
+ </b-form-input>
+ </div>
+ <div class="trmperature-limt">
+ <img src="@/assets/images/labels/critical.svg" />
+ <span class="semi-bold-12px">{{
+ $t('tablesDescription.criticalMode')
+ }}</span>
+ <b-form-input
+ v-model="temperatureCriticalInput"
+ type="number"
+ :min="temperatureNonNormalInput"
+ :max="temperatureWarningInput"
+ class="form-control medium-12px"
+ >
+ </b-form-input>
+ </div>
+ <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="temperatureCriticalInput"
+ :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 Tables -->
+ <temperature-table
+ :time-scale="timeScale"
+ :warning="temperatureWarning"
+ :non-normal="temperatureNonNormal"
+ :critical-start="temperatureCritical"
+ />
+ <accessory-table :records="accessoryData.temperatureTable" />
+ </b-collapse>
+ </div>
+ <!-- Frequency Section -->
+ <div class="page-collapse-decorator">
+ <b-button
+ v-b-toggle.toggle-collapse_2
+ variant="link"
+ class="collapse-button semi-bold-16px"
+ >
+ <img src="@/assets/images/frequency-icon.svg" />
+ <span class="bold-16px">{{ $t('subHeader.frequency') }}</span>
+ <component :is="iconChevronUp" class="icon-expand" />
+ </b-button>
+ <b-collapse id="toggle-collapse_2" class="nav-item__nav">
+ <div class="limit-container">
+ <div class="frequency-limt">
+ <img src="@/assets/images/labels/warning.svg" />
+ <span class="semi-bold-12px">{{
+ $t('tablesDescription.frequencyWarning')
+ }}</span>
+ <b-form-input
+ v-model="frequencyWarningInput"
+ :min="0"
+ :max="1000"
+ type="number"
+ class="form-control medium-12px"
+ >
+ </b-form-input>
+ </div>
+ <b-button
+ class="save-button"
+ variant="primary"
+ @click="updateFrequency"
+ >
+ {{ $t('global.action.save') }}
+ </b-button>
+ </div>
+ <!-- Frequency Table -->
+ <frequency-table
+ :time-scale="timeScale"
+ :warning="frequencyWarning"
+ />
+ <accessory-table :records="accessoryData.frequencyTable" />
+ <!-- <frequency-table /> -->
+ </b-collapse>
+ </div>
+ <!-- Power Consumption Section -->
+ <div class="page-collapse-decorator">
+ <b-button
+ v-b-toggle.toggle-collapse_3
+ variant="link"
+ class="collapse-button semi-bold-16px"
+ >
+ <img src="@/assets/images/power-icon.svg" />
+ <span class="bold-16px">{{ $t('subHeader.powerConsumption') }}</span>
+ <component :is="iconChevronUp" class="icon-expand" />
+ </b-button>
+ <b-collapse id="toggle-collapse_3" class="nav-item__nav">
+ <div class="limit-container">
+ <div class="frequency-limt">
+ <img src="@/assets/images/labels/warning.svg" />
+ <span class="semi-bold-12px">{{
+ $t('tablesDescription.powerWarning')
+ }}</span>
+ <b-form-input
+ v-model="powerWarningInput"
+ type="number"
+ :min="0"
+ :max="100"
+ class="form-control medium-12px"
+ >
+ </b-form-input>
+ </div>
+ <div class="frequency-limt">
+ <img src="@/assets/images/labels/shutdown.svg" />
+ <span class="semi-bold-12px">{{
+ $t('tablesDescription.powerShutdown')
+ }}</span>
+ <b-form-input
+ v-model="powerShutdownInput"
+ type="number"
+ :min="0"
+ :max="100"
+ class="form-control medium-12px"
+ >
+ </b-form-input>
+ </div>
+ <b-button
+ class="save-button"
+ variant="primary"
+ @click="updatePower"
+ >
+ {{ $t('global.action.save') }}
+ </b-button>
+ </div>
+ <!-- Power Consumption Table -->
+ <power-table
+ :time-scale="timeScale"
+ :warning="powerWarning"
+ :shutdown="powerShutdown"
+ />
+ <!-- <power-table /> -->
+ <accessory-table :records="accessoryData.powerTable" />
+ </b-collapse>
+ </div>
+ <!-- <page-section class="bootstrap-table__section"> </page-section> -->
+ </div>
+ </b-container>
+</template>
+<script>
+import PageTitle from '@/components/Global/PageTitle';
+import PageSection from '@/components/Global/PageSection';
+import DateSwitch from '@/components/Global/SilaComponents/DateSwitch';
+import FrequencyTable from './FrequencyTable';
+import PowerTable from './PowerTable';
+import TemperatureTable from './TemperatureTable';
+import AccessoryTable from '@/components/Global/SilaComponents/Tables/AccessoryTablePower';
+
+import iconChevronUp from '@carbon/icons-vue/es/chevron--up/16';
+
+import { AccessoryData } from './helpers';
+
+export default {
+ components: {
+ PageTitle,
+ PageSection,
+ DateSwitch,
+ FrequencyTable,
+ TemperatureTable,
+ PowerTable,
+ AccessoryTable,
+ },
+ data() {
+ return {
+ timeScale: 'hour',
+ temperatureWarning: 72,
+ temperatureWarningInput: 72,
+ temperatureNonNormal: 44,
+ temperatureNonNormalInput: 44,
+ temperatureCritical: 55,
+ temperatureCriticalInput: 55,
+ frequencyWarning: 660,
+ frequencyWarningInput: 660,
+ powerWarning: 66,
+ powerWarningInput: 66,
+ powerShutdown: 88,
+ powerShutdownInput: 88,
+ notificationInput: 42,
+ accessoryData: AccessoryData,
+ iconChevronUp: iconChevronUp,
+ };
+ },
+ methods: {
+ switchTimeScale(period) {
+ this.timeScale = period;
+ },
+ updateTemperature() {
+ this.temperatureWarning = +this.temperatureWarningInput;
+ this.temperatureNonNormal = +this.temperatureNonNormalInput;
+ this.temperatureCritical = +this.temperatureCriticalInput;
+ },
+ updateFrequency() {
+ this.frequencyWarning = +this.frequencyWarningInput;
+ },
+ updatePower() {
+ this.powerWarning = +this.powerWarningInput;
+ this.powerShutdown = +this.powerShutdownInput;
+ },
+ },
+};
+</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-time__container {
+ position: absolute;
+ top: calc(#{$header-height});
+ right: 0px;
+ display: flex;
+ flex-flow: row nowrap;
+ justify-content: flex-start;
+ align-items: center;
+}
+
+.notification-time {
+ display: flex;
+ flex-flow: row nowrap;
+ justify-content: flex-start;
+ align-items: center;
+ border: none;
+ box-shadow: none;
+ border-radius: 8px;
+ margin: 12px 32px 12px 8px;
+ width: 236px;
+ height: 40px;
+ z-index: 1001;
+}
+
+.notification-time__icon {
+ width: 20px;
+ height: 20px;
+}
+
+.notification-time__input {
+ border: none;
+ background: none;
+ box-shadow: none;
+}
+
+.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;
+}
+.save-button {
+ width: 151px;
+ height: 36px;
+}
+
+.frequency-limt {
+ height: 60px;
+ width: 100%;
+ max-width: 288px;
+ display: flex;
+ align-items: baseline;
+ flex-flow: row wrap;
+ gap: 8px;
+}
+</style>
diff --git a/src/views/Processors/DynamicInfo/TemperatureTable.vue b/src/views/Processors/DynamicInfo/TemperatureTable.vue
new file mode 100644
index 00000000..f9c149c3
--- /dev/null
+++ b/src/views/Processors/DynamicInfo/TemperatureTable.vue
@@ -0,0 +1,126 @@
+<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',
+ },
+ },
+ },
+ ],
+ plotBands: [
+ {
+ color: '#F0AC0C1A',
+ dashStyle: 'solid',
+ from: this.nonNormal,
+ to: this.criticalStart,
+ },
+ {
+ color: '#FF41411A',
+ dashStyle: 'solid',
+ from: this.criticalStart,
+ to: this.warning,
+ },
+ ],
+ },
+ 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/Processors/DynamicInfo/helpers.js b/src/views/Processors/DynamicInfo/helpers.js
new file mode 100644
index 00000000..bc62bfa0
--- /dev/null
+++ b/src/views/Processors/DynamicInfo/helpers.js
@@ -0,0 +1,1422 @@
+export const colors = [
+ '#CB32F1',
+ '#F18638',
+ '#139BB9',
+ '#E1AB17',
+ '#175AE1',
+ '#13B937',
+];
+
+export const Series = {
+ temperature: [
+ {
+ name: 'Sean',
+ data: [
+ 10,
+ 10,
+ 10,
+ 30,
+ 10,
+ 10,
+ 10,
+ 37,
+ 10,
+ 10,
+ 10,
+ 10,
+ 10,
+ 25,
+ 10,
+ 10,
+ 10,
+ 10,
+ 10,
+ 10,
+ 10,
+ 10,
+ 10,
+ 10,
+ 10,
+ 10,
+ 10,
+ 10,
+ 10,
+ 10,
+ 10,
+ 10,
+ 10,
+ 10,
+ 35,
+ 10,
+ 10,
+ 10,
+ 10,
+ 10,
+ 45,
+ 10,
+ 10,
+ 10,
+ 10,
+ 10,
+ 10,
+ 10,
+ 10,
+ 10,
+ 10,
+ 10,
+ 10,
+ 50,
+ 10,
+ 10,
+ 10,
+ 10,
+ 10,
+ 10,
+ ],
+ color: '#CB32F1',
+ },
+ {
+ name: 'Ivan',
+ data: [
+ 11,
+ 11,
+ 11,
+ 30,
+ 11,
+ 11,
+ 11,
+ 11,
+ 57,
+ 11,
+ 11,
+ 11,
+ 11,
+ 25,
+ 11,
+ 11,
+ 11,
+ 11,
+ 11,
+ 11,
+ 11,
+ 11,
+ 11,
+ 11,
+ 11,
+ 61,
+ 11,
+ 11,
+ 11,
+ 11,
+ 11,
+ 11,
+ 11,
+ 11,
+ 31,
+ 11,
+ 11,
+ 11,
+ 11,
+ 11,
+ 11,
+ 11,
+ 21,
+ 11,
+ 11,
+ 11,
+ 11,
+ 11,
+ 11,
+ 11,
+ 11,
+ 11,
+ 11,
+ 51,
+ 11,
+ 11,
+ 11,
+ 11,
+ 11,
+ 11,
+ ],
+ color: '#175AE1',
+ },
+ {
+ name: 'Brendan',
+ data: [
+ 15,
+ 15,
+ 15,
+ 35,
+ 15,
+ 15,
+ 15,
+ 15,
+ 15,
+ 15,
+ 15,
+ 15,
+ 15,
+ 25,
+ 15,
+ 15,
+ 15,
+ 15,
+ 15,
+ 15,
+ 15,
+ 15,
+ 15,
+ 15,
+ 15,
+ 15,
+ 15,
+ 15,
+ 15,
+ 15,
+ 15,
+ 15,
+ 15,
+ 45,
+ 15,
+ 15,
+ 15,
+ 15,
+ 15,
+ 15,
+ 15,
+ 15,
+ 15,
+ 15,
+ 15,
+ 15,
+ 15,
+ 15,
+ 15,
+ 15,
+ 35,
+ 15,
+ 15,
+ 55,
+ 15,
+ 15,
+ 15,
+ 15,
+ 15,
+ 15,
+ ],
+ color: '#B98D13',
+ },
+ {
+ name: 'Matteo',
+ data: [
+ 21,
+ 21,
+ 21,
+ 51,
+ 21,
+ 21,
+ 21,
+ 21,
+ 21,
+ 21,
+ 21,
+ 21,
+ 21,
+ 40,
+ 21,
+ 21,
+ 21,
+ 21,
+ 21,
+ 21,
+ 21,
+ 21,
+ 21,
+ 21,
+ 21,
+ 21,
+ 21,
+ 21,
+ 21,
+ 21,
+ 21,
+ 21,
+ 21,
+ 35,
+ 21,
+ 21,
+ 21,
+ 21,
+ 21,
+ 21,
+ 21,
+ 21,
+ 21,
+ 21,
+ 21,
+ 21,
+ 53,
+ 21,
+ 21,
+ 30,
+ 21,
+ 21,
+ 21,
+ 21,
+ 21,
+ 21,
+ 21,
+ 21,
+ 21,
+ 21,
+ ],
+ color: '#13B937',
+ },
+ {
+ name: 'Joan',
+ data: [
+ 19,
+ 19,
+ 19,
+ 39,
+ 19,
+ 19,
+ 19,
+ 19,
+ 19,
+ 19,
+ 19,
+ 19,
+ 19,
+ 29,
+ 19,
+ 19,
+ 19,
+ 19,
+ 19,
+ 19,
+ 19,
+ 19,
+ 19,
+ 19,
+ 19,
+ 39,
+ 19,
+ 19,
+ 19,
+ 19,
+ 19,
+ 19,
+ 19,
+ 19,
+ 39,
+ 19,
+ 19,
+ 19,
+ 19,
+ 19,
+ 19,
+ 19,
+ 19,
+ 19,
+ 19,
+ 19,
+ 19,
+ 19,
+ 19,
+ 19,
+ 19,
+ 19,
+ 19,
+ 59,
+ 19,
+ 19,
+ 19,
+ 19,
+ 19,
+ 19,
+ ],
+ color: '#F18638',
+ },
+ {
+ name: 'Avinash',
+ data: [
+ 16,
+ 16,
+ 16,
+ 56,
+ 16,
+ 16,
+ 16,
+ 16,
+ 16,
+ 16,
+ 16,
+ 16,
+ 16,
+ 26,
+ 16,
+ 16,
+ 16,
+ 16,
+ 16,
+ 16,
+ 26,
+ 16,
+ 16,
+ 16,
+ 16,
+ 16,
+ 16,
+ 16,
+ 16,
+ 76,
+ 16,
+ 16,
+ 16,
+ 16,
+ 46,
+ 16,
+ 16,
+ 16,
+ 16,
+ 16,
+ 16,
+ 16,
+ 16,
+ 16,
+ 16,
+ 16,
+ 46,
+ 16,
+ 16,
+ 16,
+ 16,
+ 16,
+ 16,
+ 16,
+ 16,
+ 16,
+ 16,
+ 16,
+ 16,
+ 16,
+ ],
+ color: '#139BB9',
+ },
+ ],
+ //////////////////////////////frequency////////////////
+ frequency: [
+ {
+ name: 'Sean',
+ data: [
+ 100,
+ 100,
+ 450,
+ 100,
+ 100,
+ 100,
+ 100,
+ 137,
+ 100,
+ 100,
+ 100,
+ 100,
+ 100,
+ 100,
+ 100,
+ 100,
+ 100,
+ 100,
+ 125,
+ 100,
+ 100,
+ 100,
+ 100,
+ 100,
+ 100,
+ 100,
+ 100,
+ 100,
+ 100,
+ 100,
+ 100,
+ 100,
+ 100,
+ 100,
+ 100,
+ 100,
+ 100,
+ 100,
+ 100,
+ 135,
+ 100,
+ 100,
+ 100,
+ 100,
+ 100,
+ 145,
+ 100,
+ 100,
+ 360,
+ 100,
+ 100,
+ 450,
+ 100,
+ 100,
+ 100,
+ 100,
+ 100,
+ 100,
+ 150,
+ 100,
+ ],
+ color: '#CB32F1',
+ },
+ {
+ name: 'Ivan',
+ data: [
+ 120,
+ 120,
+ 120,
+ 140,
+ 120,
+ 157,
+ 120,
+ 120,
+ 120,
+ 210,
+ 120,
+ 125,
+ 120,
+ 120,
+ 120,
+ 350,
+ 120,
+ 120,
+ 120,
+ 120,
+ 120,
+ 590,
+ 120,
+ 120,
+ 120,
+ 120,
+ 450,
+ 120,
+ 120,
+ 120,
+ 120,
+ 120,
+ 125,
+ 120,
+ 120,
+ 120,
+ 120,
+ 120,
+ 162,
+ 120,
+ 120,
+ 120,
+ 120,
+ 120,
+ 220,
+ 120,
+ 120,
+ 120,
+ 120,
+ 120,
+ 360,
+ 120,
+ 210,
+ 120,
+ 200,
+ 120,
+ 120,
+ 120,
+ 120,
+ 120,
+ ],
+ color: '#175AE1',
+ },
+ {
+ name: 'Brendan',
+ data: [
+ 110,
+ 110,
+ 110,
+ 450,
+ 110,
+ 110,
+ 110,
+ 157,
+ 110,
+ 110,
+ 110,
+ 110,
+ 110,
+ 165,
+ 110,
+ 110,
+ 110,
+ 110,
+ 110,
+ 310,
+ 110,
+ 110,
+ 110,
+ 590,
+ 110,
+ 110,
+ 175,
+ 110,
+ 110,
+ 110,
+ 110,
+ 110,
+ 110,
+ 110,
+ 110,
+ 110,
+ 110,
+ 110,
+ 110,
+ 110,
+ 152,
+ 110,
+ 310,
+ 110,
+ 110,
+ 210,
+ 110,
+ 110,
+ 110,
+ 110,
+ 110,
+ 110,
+ 360,
+ 110,
+ 110,
+ 110,
+ 210,
+ 110,
+ 110,
+ 110,
+ ],
+ color: '#B98D13',
+ },
+ {
+ name: 'Matteo',
+ data: [
+ 221,
+ 221,
+ 221,
+ 251,
+ 221,
+ 221,
+ 221,
+ 221,
+ 221,
+ 590,
+ 221,
+ 221,
+ 421,
+ 221,
+ 221,
+ 221,
+ 221,
+ 221,
+ 221,
+ 221,
+ 221,
+ 221,
+ 221,
+ 221,
+ 221,
+ 221,
+ 450,
+ 221,
+ 221,
+ 221,
+ 221,
+ 421,
+ 221,
+ 235,
+ 221,
+ 221,
+ 221,
+ 221,
+ 221,
+ 421,
+ 221,
+ 360,
+ 221,
+ 221,
+ 221,
+ 210,
+ 253,
+ 221,
+ 221,
+ 230,
+ 221,
+ 221,
+ 221,
+ 590,
+ 221,
+ 221,
+ 221,
+ 221,
+ 221,
+ 221,
+ ],
+ color: '#13B937',
+ },
+ {
+ name: 'Joan',
+ data: [
+ 159,
+ 159,
+ 159,
+ 159,
+ 159,
+ 159,
+ 159,
+ 159,
+ 159,
+ 159,
+ 159,
+ 159,
+ 159,
+ 590,
+ 159,
+ 159,
+ 159,
+ 159,
+ 159,
+ 159,
+ 159,
+ 159,
+ 159,
+ 159,
+ 159,
+ 159,
+ 159,
+ 159,
+ 159,
+ 159,
+ 159,
+ 159,
+ 159,
+ 159,
+ 159,
+ 159,
+ 159,
+ 159,
+ 159,
+ 590,
+ 159,
+ 159,
+ 159,
+ 159,
+ 159,
+ 159,
+ 159,
+ 159,
+ 159,
+ 159,
+ 159,
+ 159,
+ 159,
+ 159,
+ 159,
+ 159,
+ 159,
+ 159,
+ 159,
+ 159,
+ ],
+ color: '#F18638',
+ },
+ {
+ name: 'Avinash',
+ data: [
+ 176,
+ 176,
+ 176,
+ 156,
+ 176,
+ 176,
+ 176,
+ 176,
+ 176,
+ 176,
+ 176,
+ 176,
+ 176,
+ 176,
+ 176,
+ 176,
+ 276,
+ 176,
+ 176,
+ 176,
+ 176,
+ 176,
+ 176,
+ 210,
+ 176,
+ 176,
+ 176,
+ 590,
+ 176,
+ 176,
+ 176,
+ 176,
+ 176,
+ 590,
+ 176,
+ 176,
+ 176,
+ 176,
+ 176,
+ 176,
+ 176,
+ 176,
+ 176,
+ 570,
+ 176,
+ 176,
+ 176,
+ 176,
+ 176,
+ 770,
+ 176,
+ 176,
+ 176,
+ 176,
+ 176,
+ 176,
+ 176,
+ 176,
+ 176,
+ 176,
+ ],
+ color: '#139BB9',
+ },
+ ],
+ //////////////////////////////power////////////////
+ power: [
+ {
+ name: 'Sean',
+ data: [
+ 15,
+ 15,
+ 45,
+ 15,
+ 65,
+ 15,
+ 75,
+ 15,
+ 15,
+ 15,
+ 55,
+ 15,
+ 25,
+ 15,
+ 45,
+ 15,
+ 55,
+ 15,
+ 75,
+ 15,
+ 35,
+ 15,
+ 55,
+ 15,
+ 75,
+ 15,
+ 85,
+ 15,
+ 15,
+ 45,
+ 15,
+ 15,
+ 45,
+ 15,
+ 45,
+ 15,
+ 15,
+ 65,
+ 15,
+ 45,
+ 15,
+ 25,
+ 15,
+ 45,
+ 15,
+ 65,
+ 15,
+ 35,
+ 35,
+ 35,
+ 15,
+ 55,
+ 15,
+ 15,
+ 35,
+ 15,
+ 25,
+ 15,
+ 35,
+ 15,
+ ],
+ color: '#CB32F1',
+ },
+ {
+ name: 'Ivan',
+ data: [
+ 62,
+ 12,
+ 72,
+ 12,
+ 12,
+ 12,
+ 42,
+ 12,
+ 12,
+ 12,
+ 52,
+ 12,
+ 22,
+ 12,
+ 42,
+ 12,
+ 52,
+ 12,
+ 72,
+ 12,
+ 52,
+ 12,
+ 62,
+ 12,
+ 72,
+ 12,
+ 82,
+ 12,
+ 12,
+ 42,
+ 12,
+ 12,
+ 52,
+ 12,
+ 42,
+ 12,
+ 12,
+ 62,
+ 12,
+ 42,
+ 12,
+ 22,
+ 12,
+ 42,
+ 12,
+ 62,
+ 12,
+ 12,
+ 32,
+ 12,
+ 62,
+ 12,
+ 52,
+ 12,
+ 32,
+ 12,
+ 22,
+ 12,
+ 32,
+ 12,
+ ],
+ color: '#175AE1',
+ },
+ {
+ name: 'Brendan',
+ data: [
+ 14,
+ 14,
+ 34,
+ 14,
+ 24,
+ 14,
+ 34,
+ 14,
+ 64,
+ 14,
+ 74,
+ 14,
+ 14,
+ 14,
+ 44,
+ 14,
+ 14,
+ 14,
+ 54,
+ 14,
+ 24,
+ 14,
+ 44,
+ 14,
+ 54,
+ 14,
+ 74,
+ 14,
+ 54,
+ 14,
+ 64,
+ 14,
+ 74,
+ 14,
+ 84,
+ 14,
+ 14,
+ 44,
+ 14,
+ 14,
+ 54,
+ 14,
+ 44,
+ 14,
+ 14,
+ 64,
+ 14,
+ 44,
+ 14,
+ 24,
+ 14,
+ 44,
+ 14,
+ 64,
+ 14,
+ 14,
+ 14,
+ 54,
+ 14,
+ 54,
+ ],
+ color: '#B98D13',
+ },
+ {
+ name: 'Matteo',
+ data: [
+ 24,
+ 14,
+ 44,
+ 14,
+ 64,
+ 14,
+ 64,
+ 14,
+ 34,
+ 14,
+ 54,
+ 14,
+ 14,
+ 34,
+ 14,
+ 24,
+ 14,
+ 34,
+ 14,
+ 64,
+ 14,
+ 74,
+ 14,
+ 14,
+ 14,
+ 44,
+ 14,
+ 14,
+ 14,
+ 54,
+ 14,
+ 14,
+ 14,
+ 44,
+ 14,
+ 54,
+ 14,
+ 74,
+ 14,
+ 54,
+ 14,
+ 64,
+ 14,
+ 74,
+ 14,
+ 84,
+ 14,
+ 94,
+ 14,
+ 54,
+ 4,
+ 54,
+ 14,
+ 44,
+ 14,
+ 44,
+ 64,
+ 14,
+ 44,
+ 14,
+ ],
+ color: '#13B937',
+ },
+ {
+ name: 'Joan',
+ data: [
+ 16,
+ 46,
+ 16,
+ 26,
+ 16,
+ 46,
+ 16,
+ 66,
+ 16,
+ 16,
+ 16,
+ 36,
+ 16,
+ 56,
+ 16,
+ 16,
+ 36,
+ 16,
+ 26,
+ 16,
+ 36,
+ 16,
+ 66,
+ 16,
+ 76,
+ 16,
+ 16,
+ 16,
+ 46,
+ 16,
+ 16,
+ 16,
+ 56,
+ 16,
+ 26,
+ 16,
+ 46,
+ 16,
+ 56,
+ 16,
+ 76,
+ 16,
+ 56,
+ 16,
+ 66,
+ 16,
+ 76,
+ 16,
+ 86,
+ 16,
+ 96,
+ 16,
+ 16,
+ 16,
+ 56,
+ 16,
+ 46,
+ 16,
+ 46,
+ 16,
+ ],
+ color: '#F18638',
+ },
+ {
+ name: 'Avinash',
+ data: [
+ 49,
+ 19,
+ 19,
+ 69,
+ 19,
+ 49,
+ 19,
+ 29,
+ 19,
+ 49,
+ 19,
+ 69,
+ 19,
+ 39,
+ 39,
+ 39,
+ 19,
+ 59,
+ 19,
+ 19,
+ 39,
+ 19,
+ 29,
+ 19,
+ 39,
+ 19,
+ 69,
+ 19,
+ 79,
+ 19,
+ 19,
+ 19,
+ 49,
+ 19,
+ 19,
+ 19,
+ 59,
+ 19,
+ 29,
+ 19,
+ 49,
+ 19,
+ 59,
+ 19,
+ 79,
+ 19,
+ 59,
+ 19,
+ 69,
+ 19,
+ 79,
+ 19,
+ 89,
+ 19,
+ 99,
+ 19,
+ 19,
+ 69,
+ 59,
+ 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' },
+ },
+ ],
+ },
+ frequencyTable: {
+ fields: [
+ {
+ key: 'name',
+ label: 'Имя модуля',
+ thClass: 'bootstrap-fans-table__th semi-bold-12px',
+ tdClass: 'bootstrap-fans-table__td light-12px',
+ },
+ {
+ key: 'currentFrequency',
+ label: 'Текущее, Hz',
+ thClass: 'bootstrap-fans-table__th semi-bold-12px',
+ tdClass: 'bootstrap-fans-table__td light-12px',
+ },
+ {
+ key: 'baseFrequency',
+ label: 'Базовое, Hz',
+ thClass: 'bootstrap-fans-table__th semi-bold-12px',
+ tdClass: 'bootstrap-fans-table__td light-12px',
+ },
+ ],
+ items: [
+ {
+ name: 'Процессор 1',
+ currentFrequency: 600,
+ baseFrequency: 400,
+ },
+ {
+ name: 'Процессор 2',
+ currentFrequency: 500,
+ baseFrequency: 470,
+ },
+ {
+ name: 'Процессор 3',
+ currentFrequency: 500,
+ baseFrequency: 450,
+ },
+ {
+ name: 'Процессор 4',
+ currentFrequency: 500,
+ baseFrequency: 470,
+ },
+ {
+ name: 'Процессор 5',
+ currentFrequency: 600,
+ baseFrequency: 470,
+ },
+ {
+ name: 'Процессор 6',
+ currentFrequency: 500,
+ baseFrequency: 400,
+ },
+ ],
+ },
+ powerTable: {
+ fields: [
+ {
+ key: 'name',
+ label: 'Имя модуля',
+ thClass: 'bootstrap-fans-table__th semi-bold-12px',
+ tdClass: 'bootstrap-fans-table__td light-12px',
+ },
+ {
+ key: 'currentPower',
+ label: 'Текущее, Вт',
+ label2: '',
+ thClass: 'bootstrap-fans-table__th semi-bold-12px',
+ tdClass: 'bootstrap-fans-table__td light-12px',
+ },
+ ],
+ items: [
+ {
+ name: 'Процессор 1',
+ currentPower: 91,
+ },
+ {
+ name: 'Процессор 2',
+ currentPower: 77,
+ },
+ {
+ name: 'Процессор 3',
+ currentPower: 76,
+ },
+ {
+ name: 'Процессор 4',
+ currentPower: 74,
+ },
+ {
+ name: 'Процессор 5',
+ currentPower: 73,
+ },
+ {
+ name: 'Процессор 6',
+ currentPower: 71,
+ },
+ ],
+ },
+};
diff --git a/src/views/Processors/DynamicInfo/index.js b/src/views/Processors/DynamicInfo/index.js
new file mode 100644
index 00000000..121c0316
--- /dev/null
+++ b/src/views/Processors/DynamicInfo/index.js
@@ -0,0 +1,2 @@
+import ProcessorsDynamicPage from './ProcessorsDynamicPage.vue';
+export default ProcessorsDynamicPage;
generated by cgit v1.2.3 (git 2.39.0) at 2024-07-16 14:17:46 +0300