1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
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>
|
