2023-07-04 19:57:54 +03:00
<!DOCTYPE html>
< html >
2023-07-04 22:11:39 +03:00
2023-07-05 15:53:17 +03:00
< head >
<!-- Google tag (gtag.js) -->
< script async src = "https://www.googletagmanager.com/gtag/js?id=G-GBWL3K2WMQ" > < / script >
< script >
window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); }
gtag('js', new Date());
gtag('config', 'G-GBWL3K2WMQ');
< / script >
< meta charset = "utf-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1" >
< title > Київ неРадіоактивний! Проект dead.guru< / title >
< meta name = "description" content = "неРадіоактивна ситуація в Києві в реальному часі. Спектр, події, радіаційний фон." >
< 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 = "shortcut icon" href = "https://kmr.gov.ua/sites/default/files/favicon-kyiv.ico"
type="image/vnd.microsoft.icon" />
< link rel = "stylesheet" href = "https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />
< script src = "https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin="">< / script >
< link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css" >
< script defer src = "https://use.fontawesome.com/releases/v5.15.4/js/all.js"
integrity="sha384-rOA1PnstxnOBLzCLMcre8ybwbTmemjzdNlILg8O7z1lUkLXozs4DHonlDtnE7fpc"
crossorigin="anonymous">< / script >
< style >
#app>div {
margin: 5px auto;
width: 80%;
}
#app fieldset {
display: inline-block;
border: 0;
padding: 0;
margin-left: 20px;
}
#app>.notification {
border: none;
}
#map {
height: 180px;
width: 80%;
margin: 5px auto;
}
< / style >
< / head >
< body >
2023-07-04 19:57:54 +03:00
< section class = "section" >
2023-07-05 15:53:17 +03:00
2023-07-04 19:57:54 +03:00
< div class = "container" >
2023-07-05 16:14:47 +03:00
< div id = "app" >
< nav class = "navbar is-transparent" >
< div class = "navbar-brand" >
< a class = "navbar-item" href = "https://kyiv.dead.guru" >
< img src = "https://assada.dead.guru/storage/images/logo.png" alt = "Bulma: a modern CSS framework based on Flexbox" width = "112" height = "28" >
< div > < span style = "opacity: .9; color: #17914a; font-size: x-small;" > не< / span > < span
style="font-size: x-small;">Радіоактивний!< / span > < / div >
2023-07-05 15:53:17 +03:00
< / a >
2023-07-05 16:14:47 +03:00
< div class = "navbar-burger" @ click = "showNav = !showNav" :class = "{ 'is-active': showNav }" >
< span > < / span >
< span > < / span >
< span > < / span >
< / div >
< / div >
< div class = "navbar-menu" :class = "{ 'is-active': showNav }" >
< div class = "navbar-start" >
< a class = "navbar-item" href = "https://www.saveecobot.com/radiation-maps" >
Мапа датчиків
2023-07-05 15:53:17 +03:00
< / a >
2023-07-05 16:14:47 +03:00
< div class = "navbar-item has-dropdown is-hoverable" >
< a class = "navbar-link" href = "#nav" >
Корисні посилання
2023-07-05 15:53:17 +03:00
< / a >
2023-07-05 16:14:47 +03:00
< div class = "navbar-dropdown is-boxed" >
< a class = "navbar-item" href = "https://www.windy.com/?50.321,30.504,9" >
Мапа вітрів
< / a >
< a class = "navbar-item" href = "https://bit.ly/3efbPmc" >
Мапа укриттів
< / a >
< / a >
< a class = "navbar-item" href = "https://alerts.in.ua/" >
Мапа тривог
< / a >
< a class = "navbar-item" href = "https://bit.ly/3egOosD" >
Поради від РНБО
< / a >
< a class = "navbar-item"
href="https://dmbk.kyivcity.gov.ua/content/dii-u-vypadku-zagrozy-vynyknennya-avarii-z-vykydom-rozlyvom-radioaktyvnyh-rechovyn.html">
Поради від департаменту муніципальної безпеки
< / a >
< / div >
2023-07-05 15:53:17 +03:00
< / div >
< / div >
2023-07-05 16:14:47 +03:00
< div class = "navbar-end" >
< div class = "navbar-item" >
< div class = "field is-grouped" >
< p class = "control" >
< a class = "bd-tw-button button" data-social-network = "Twitter" data-social-action = "tweet"
data-social-target="https://bulma.io" target="_blank"
href="https://twitter.com/intent/tweet?text=Київ неРадіоактивний! Перевірити можна на & hashtags=КиївНеРадіоактивний& url=https://kyiv.dead.guru">
< span class = "icon" >
< i class = "fab fa-twitter" > < / i >
< / span >
< span >
Tweet
< / span >
< / a >
< / p >
< / div >
2023-07-05 15:53:17 +03:00
< / div >
< / div >
< / div >
2023-07-05 16:14:47 +03:00
< / nav >
2023-07-05 15:53:17 +03:00
< div v-if = "al" class = "notification is-warning" >
< button class = "delete" @ click = "al = !al" > < / button >
Використовуйте ландшафтну орієнтацію екрану для зручного перегляду. Ще краще — планшет чи комп'ютер.
< / div >
< div style = "text-align: center;" >
2023-07-04 19:57:54 +03:00
< apexchart type = "line" height = "350" :options = "ratesChartOptions" :series = "rates_series" > < / apexchart >
2023-07-05 15:53:17 +03:00
< button @ click = "rates_autoupdate = !rates_autoupdate" class = "button" > Автооновлення: {{ rates_autoupdate ?
"ВКЛ" : "ВИКЛ" }}< / button >
2023-07-04 19:57:54 +03:00
< / div >
2023-07-04 22:11:39 +03:00
< div class = "notification" >
2023-07-05 15:53:17 +03:00
< strong > До 0,3 мк3в/г < / strong >
< p >
Швидкість дози в мікрозівертах на годину вказує, скільки мікрозівертів (одиниця виміру еквівалентної дози)
радіації поглинається організмом а б о
оцінки рівня радіаційного впливу на людей, а і
радіаційних зонах, ядерних установках а б о
< / p >
< p >
Наприклад, якщо швидкість дози становить 10 μSv/h, це означає, що організм а б о
мікрозівертів радіації за кожну годину. Це може вказувати на наявність джерела радіації в цьому місці а б о
необхідність заходів з радіаційного захисту.
< / p >
2023-07-04 22:11:39 +03:00
2023-07-05 15:53:17 +03:00
< / div >
< div style = "text-align: center;" >
< apexchart type = "bar" height = "350" :options = "spectrumChartOptions" :series = "spectrum_series" > < / apexchart >
< div >
< fieldset >
< label class = "checkbox" for = "spectrum_x_accum" > < input type = "checkbox" id = "spectrum_x_accum"
v-model="spectrum_accum"> Акумульований< / label >
< / fieldset >
< fieldset class = "control" >
< label class = "radio" for = "spectrum_x_channel" > < input type = "radio" id = "spectrum_x_channel"
v-bind:value="false" v-model="spectrum_energy"> Канал< / label >
< label class = "radio" for = "spectrum_x_energy" > < input type = "radio" id = "spectrum_x_energy"
v-bind:value="true" v-model="spectrum_energy"> Енергія< / label >
< / fieldset >
< fieldset class = "control" >
< label class = "radio" for = "spectrum_linear" > < input type = "radio" id = "spectrum_linear" v-bind:value = "false"
v-model="spectrum_logarithmic"> Лінійне< / label >
< label class = "radio" for = "spectrum_log" > < input type = "radio" id = "spectrum_log" v-bind:value = "true"
v-model="spectrum_logarithmic"> Логарифмічне< / label >
< / fieldset >
2023-07-04 22:11:39 +03:00
< / div >
2023-07-05 15:53:17 +03:00
< button @ click = "updateSpectrum" class = "button" > Оновити спектр< / button >
< / div >
2023-07-04 19:57:54 +03:00
< / div >
2023-07-05 15:53:17 +03:00
< div id = "map" > < / div >
2023-07-04 19:57:54 +03:00
< / div >
< / section >
2023-07-05 15:53:17 +03:00
< footer class = "footer" >
< div class = "content has-text-centered" >
< p > Важливо зазначити що явище радіоактивності не можна застосувати(вживати в контексті) до міста. Прочитати більше можна на < a href = "https://uk.wikipedia.org/wiki/%D0%A0%D0%B0%D0%B4%D1%96%D0%BE%D0%B0%D0%BA%D1%82%D0%B8%D0%B2%D0%BD%D1%96%D1%81%D1%82%D1%8C" > Вікі< / a > !< / p >
< p >
Частина проекту < a href = "https://dead.guru/" > < strong > dead.guru< / strong > < / a > . Код ліцензований
< a href = "http://opensource.org/licenses/mit-license.php" > MIT< / a > . Вміст сайту
має ліцензію < a href = "http://creativecommons.org/licenses/by-nc-sa/4.0/" > CC BY NC SA 4.0< / a > .
< / p >
< / div >
< / footer >
2023-07-04 19:57:54 +03:00
< script >
const common_options = {
chart: {
2023-07-05 15:53:17 +03:00
animations: { enabled: false },
zoom: { autoScaleYaxis: true },
2023-07-04 19:57:54 +03:00
},
2023-07-05 15:53:17 +03:00
tooltip: { intersect: false },
grid: { xaxis: { lines: { show: true } } },
dataLabels: { enabled: false },
2023-07-04 19:57:54 +03:00
};
var app = new Vue({
el: '#app',
components: {
apexchart: VueApexCharts,
},
2023-07-05 15:53:17 +03:00
data: function () {
2023-07-04 19:57:54 +03:00
return {
ws: null,
spectrum_duration: 0,
rates_autoupdate: true,
2023-07-05 15:53:17 +03:00
al: true,
2023-07-05 16:14:47 +03:00
showNav: false,
2023-07-04 19:57:54 +03:00
rates_series: [],
spectrum_accum: false,
spectrum_series: [],
spectrum_coef: [0, 0, 0],
spectrum_logarithmic: true,
spectrum_energy: true,
ratesChartOptions: {
...common_options,
2023-07-05 15:53:17 +03:00
title: { text: 'Активнсть подій (подій в секунду) і
xaxis: { type: 'datetime' },
2023-07-04 19:57:54 +03:00
yaxis: [
2023-07-05 15:53:17 +03:00
{ seriesName: 'Подій', title: { text: 'ПНС' }, labels: { formatter: (v) => v.toFixed(2) + ' ПНС' } },
{ seriesName: 'Доза', title: { text: 'мк3в/г г
2023-07-04 19:57:54 +03:00
],
},
};
},
watch: {
spectrum_accum() {
this.updateSpectrum();
2023-07-05 15:53:17 +03:00
},
al(newAl) {
localStorage.al = newAl === true ? "ok!" : "no";
2023-07-04 19:57:54 +03:00
}
},
computed: {
spectrumChartOptions() {
const a0 = this.spectrum_coef[0], a1 = this.spectrum_coef[1], a2 = this.spectrum_coef[2];
2023-07-05 15:53:17 +03:00
const fmt = this.spectrum_energy ? ((c) => (a0 + a1 * c + a2 * c * c).toFixed(0)) : undefined;
2023-07-04 19:57:54 +03:00
const title = this.spectrum_energy ? 'кеВ' : 'канал';
2023-07-05 15:53:17 +03:00
return {
2023-07-04 19:57:54 +03:00
...common_options,
2023-07-05 15:53:17 +03:00
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%' } },
2023-07-04 19:57:54 +03:00
};
},
},
created() {
this.ws = new WebSocket('wss://' + window.location.host + '/ws')
this.ws.onmessage = this.onmessage;
this.updateSpectrum();
2023-07-05 15:53:17 +03:00
var map = L.map('map').setView([50.51847778550632, 30.508852993206236], 10);
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 10,
attribution: '© < a href = "http://www.openstreetmap.org/copyright" > OpenStreetMap< / a > '
}).addTo(map);
var circle = L.circle([50.51847778550632, 30.508852993206236], {
color: '#164299',
weight: 1,
opacity: 0.7,
fillColor: '#256FFF',
fillOpacity: 0.2,
radius: 5000
}).addTo(map);
circle.bindPopup("Зона виміру");
2023-07-04 19:57:54 +03:00
},
2023-07-05 15:53:17 +03:00
beforeDestroy: function () {
2023-07-04 19:57:54 +03:00
this.ws.close();
},
2023-07-05 15:53:17 +03:00
mounted() {
if (localStorage.al) {
this.al = localStorage.al === "ok!";
}
},
2023-07-04 19:57:54 +03:00
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())
2023-07-05 15:53:17 +03:00
.then(data => (this.spectrum_duration = data.duration, this.spectrum_coef = data.coef, this.spectrum_series = data.series));
2023-07-04 19:57:54 +03:00
},
},
});
2023-07-05 15:53:17 +03:00
< / script >
< / body >
2023-07-04 19:57:54 +03:00
< / html >
