146 lines
5.4 KiB
HTML
146 lines
5.4 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html>
|
|||
|
|
<head>
|
|||
|
|
<meta charset="utf-8">
|
|||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|||
|
|
<title>Kyiv Radioactive!</title>
|
|||
|
|
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
|
|||
|
|
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
|
|||
|
|
<script src="https://cdn.jsdelivr.net/npm/vue-apexcharts"></script>
|
|||
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
|
|||
|
|
<style>
|
|||
|
|
#app > div {
|
|||
|
|
margin: 5px auto;
|
|||
|
|
width: 80%;
|
|||
|
|
text-align: center;
|
|||
|
|
padding: 5px;
|
|||
|
|
border: 1px #aaa dashed;
|
|||
|
|
}
|
|||
|
|
#app fieldset {
|
|||
|
|
display: inline-block;
|
|||
|
|
border: 0;
|
|||
|
|
padding: 0;
|
|||
|
|
margin-left: 20px;
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<section class="section">
|
|||
|
|
<div class="container">
|
|||
|
|
<h1 class="title">
|
|||
|
|
неРадіоактивна ситуація в Києві.
|
|||
|
|
</h1>
|
|||
|
|
<h2 class="subtitle">В реальному часі.</h2>
|
|||
|
|
<div id="app">
|
|||
|
|
<div>
|
|||
|
|
<apexchart type="bar" height="350" :options="spectrumChartOptions" :series="spectrum_series"></apexchart>
|
|||
|
|
<div>
|
|||
|
|
<fieldset>
|
|||
|
|
<input type="checkbox" id="spectrum_x_accum" v-model="spectrum_accum">
|
|||
|
|
<label for="spectrum_x_accum">Акумульований</label>
|
|||
|
|
</fieldset>
|
|||
|
|
<fieldset>
|
|||
|
|
<input type="radio" id="spectrum_x_channel" v-bind:value="false" v-model="spectrum_energy">
|
|||
|
|
<label for="spectrum_x_channel">Канал</label>
|
|||
|
|
|
|||
|
|
<input type="radio" id="spectrum_x_energy" v-bind:value="true" v-model="spectrum_energy">
|
|||
|
|
<label for="spectrum_x_energy">Енергія</label>
|
|||
|
|
</fieldset>
|
|||
|
|
<fieldset>
|
|||
|
|
<input type="radio" id="spectrum_linear" v-bind:value="false" v-model="spectrum_logarithmic">
|
|||
|
|
<label for="spectrum_linear">Лінійне</label>
|
|||
|
|
<input type="radio" id="spectrum_log" v-bind:value="true" v-model="spectrum_logarithmic">
|
|||
|
|
<label for="spectrum_log">Логарифмічне</label>
|
|||
|
|
</fieldset>
|
|||
|
|
</div>
|
|||
|
|
<button @click="updateSpectrum">Оновити спектр</button>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<apexchart type="line" height="350" :options="ratesChartOptions" :series="rates_series"></apexchart>
|
|||
|
|
<button @click="rates_autoupdate = !rates_autoupdate">Автооновлення: {{ rates_autoupdate ? "ВКЛ" : "ВИКЛ" }}</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
<script>
|
|||
|
|
const common_options = {
|
|||
|
|
chart: {
|
|||
|
|
animations: {enabled: false},
|
|||
|
|
zoom: {autoScaleYaxis: true},
|
|||
|
|
},
|
|||
|
|
tooltip: {intersect: false},
|
|||
|
|
grid: {xaxis: {lines: {show: true}}},
|
|||
|
|
dataLabels: {enabled: false},
|
|||
|
|
};
|
|||
|
|
var app = new Vue({
|
|||
|
|
el: '#app',
|
|||
|
|
components: {
|
|||
|
|
apexchart: VueApexCharts,
|
|||
|
|
},
|
|||
|
|
data: function() {
|
|||
|
|
return {
|
|||
|
|
ws: null,
|
|||
|
|
spectrum_duration: 0,
|
|||
|
|
rates_autoupdate: true,
|
|||
|
|
rates_series: [],
|
|||
|
|
spectrum_accum: false,
|
|||
|
|
spectrum_series: [],
|
|||
|
|
spectrum_coef: [0, 0, 0],
|
|||
|
|
spectrum_logarithmic: true,
|
|||
|
|
spectrum_energy: true,
|
|||
|
|
ratesChartOptions: {
|
|||
|
|
...common_options,
|
|||
|
|
title: {text: 'Активнсть подій (подій в секунду) і доза'},
|
|||
|
|
xaxis: {type: 'datetime'},
|
|||
|
|
yaxis: [
|
|||
|
|
{seriesName: 'Подій', title: {text: 'ПНС'}, labels: {formatter:(v) => v.toFixed(2) + ' ПНС'}},
|
|||
|
|
{seriesName: 'Доза', title: {text: 'мк3в/г'}, labels: {formatter:(v) => v.toFixed(4) + ' мк3в/г'}, opposite: true},
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
watch: {
|
|||
|
|
spectrum_accum() {
|
|||
|
|
this.updateSpectrum();
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
computed: {
|
|||
|
|
spectrumChartOptions() {
|
|||
|
|
const a0 = this.spectrum_coef[0], a1 = this.spectrum_coef[1], a2 = this.spectrum_coef[2];
|
|||
|
|
const fmt = this.spectrum_energy ? ((c) => (a0 + a1*c + a2*c*c).toFixed(0)) : undefined;
|
|||
|
|
const title = this.spectrum_energy ? 'кеВ' : 'канал';
|
|||
|
|
return{
|
|||
|
|
...common_options,
|
|||
|
|
title: {text: `Спектр, ${this.spectrum_duration} секунд`},
|
|||
|
|
xaxis: {type: 'numeric', title: {text: title}, tickAmount: 25, labels: {formatter:fmt}},
|
|||
|
|
yaxis: {logarithmic: this.spectrum_logarithmic, decimalsInFloat: 0},
|
|||
|
|
plotOptions: {bar: {columnWidth: '95%'}},
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
created() {
|
|||
|
|
this.ws = new WebSocket('wss://' + window.location.host + '/ws')
|
|||
|
|
this.ws.onmessage = this.onmessage;
|
|||
|
|
this.updateSpectrum();
|
|||
|
|
},
|
|||
|
|
beforeDestroy: function() {
|
|||
|
|
this.ws.close();
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
onmessage(ev) {
|
|||
|
|
if (!this.rates_autoupdate) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
const d = JSON.parse(ev.data);
|
|||
|
|
this.rates_series = d.series;
|
|||
|
|
},
|
|||
|
|
updateSpectrum() {
|
|||
|
|
fetch(`/spectrum?accum=${this.spectrum_accum}`)
|
|||
|
|
.then(response => response.json())
|
|||
|
|
.then(data => (this.spectrum_duration=data.duration, this.spectrum_coef=data.coef, this.spectrum_series=data.series));
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|