summaryrefslogtreecommitdiff
path: root/src/views/SILA/AnalyticalPanel/TemperatureTable.vue
diff options
context:
space:
mode:
Diffstat (limited to 'src/views/SILA/AnalyticalPanel/TemperatureTable.vue')
-rw-r--r--src/views/SILA/AnalyticalPanel/TemperatureTable.vue115
1 files changed, 115 insertions, 0 deletions
diff --git a/src/views/SILA/AnalyticalPanel/TemperatureTable.vue b/src/views/SILA/AnalyticalPanel/TemperatureTable.vue
new file mode 100644
index 00000000..ae52062a
--- /dev/null
+++ b/src/views/SILA/AnalyticalPanel/TemperatureTable.vue
@@ -0,0 +1,115 @@
+<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: 'areaspline',
+ 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,
+ },
+ areaspline: {
+ fillOpacity: 0,
+ },
+ },
+ },
+ };
+ },
+ },
+};
+</script>
+<style lang="scss">
+.highcharts-credits {
+ display: none;
+}
+
+.highcharts-plot-line-label {
+ transform: translate(-15px, 0) !important;
+}
+</style>