209 lines
9.5 KiB
HTML
209 lines
9.5 KiB
HTML
<html>
|
||
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<title>辐射环境历史数据查询</title>
|
||
</head>
|
||
|
||
<body>
|
||
<h1>辐射环境历史数据查询</h1>
|
||
<p>可查询自 2023-08-25 起的国家核安全局辐射环境监测数据历史数据</p>
|
||
<hr>
|
||
<form id="form">
|
||
<label for="type">监测点：</label>
|
||
<select id="type" name="type" required>
|
||
<option value="0">环境质量监测点</option>
|
||
<option value="1">核电厂监测点</option>
|
||
</select><br>
|
||
|
||
<label for="name">名称：</label>
|
||
<select id="name" name="name" required></select><br>
|
||
|
||
<label for="location">位置：</label>
|
||
<select id="location" name="location" required></select><br>
|
||
|
||
<label for="date">日期：</label>
|
||
<input type="date" id="date" name="date" required min="2023-08-25"><br>
|
||
<button type="submit" id="submit-btn">查询</button>
|
||
</form>
|
||
<hr>
|
||
|
||
<div id="result"></div>
|
||
|
||
<div class="footer">
|
||
<p>
|
||
开放接口：按月批量查询所有点位数据接口<br>
|
||
|
||
备注：目前数据较少。
|
||
</p>
|
||
<p>
|
||
开源项目：本项目由程序员小墨开发并开源，仅作学习研究使用。<br>
|
||
<a target="_blank" href="#">GitHub</a>
|
||
<a target="_blank" href="#">Gitee</a>
|
||
<a target="_blank" href="#">自建仓库</a>
|
||
</p>
|
||
<p>
|
||
特别说明：请勿使用爬虫爬取本站接口，感谢！如需全部历史数据，请<a href="https://www.only4.work/about/feedback/"
|
||
target="_blank">点击留言</a>，我会尽量在当日将数据打包发送回您的邮箱。
|
||
</p>
|
||
<p>
|
||
|
||
</p>
|
||
<p>
|
||
数据来源：<a href="https://nnsa.mee.gov.cn/" target="_blank">国家核安全局</a>
|
||
-
|
||
<a href="https://data.rmtc.org.cn/gis" target="_blank">辐射环境监测数据</a>
|
||
</p>
|
||
<p>
|
||
免责声明：本站仅记录自 2023-08-25 起的辐射环境监测数据历史值，不对数据来源真实性做保证，数据使用权请查阅上方数据来源自行获取，仅通过技术层面保存监测数据历史记录，方便学术研究使用。
|
||
</p>
|
||
</div>
|
||
<script src="./jquery.min.js"></script>
|
||
<!-- <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> -->
|
||
<script>
|
||
const host = location.host.includes('localhost') || location.host.includes('127.0.0.1')
|
||
? 'http://localhost:35590/'
|
||
: '/api/'
|
||
console.log('host', host)
|
||
|
||
function setDefalutValue() {
|
||
// 日期当前值 2天前
|
||
var today = new Date(Date.now() - 2 * 24 * 3600 * 1000); // 获取当前的日期对象
|
||
var day = today.getDate(); // 获取当前的日
|
||
var month = today.getMonth() + 1; // 获取当前的月，需要加1
|
||
var year = today.getFullYear(); // 获取当前的年
|
||
if (day < 10) { // 如果日小于10，前面补0
|
||
day = "0" + day;
|
||
}
|
||
if (month < 10) { // 如果月小于10，前面补0
|
||
month = "0" + month;
|
||
}
|
||
var date = year + "-" + month + "-" + day; // 拼接成 yyyy-MM-dd 格式的字符串
|
||
document.getElementById("date").value = date; // 将字符串赋值给日期输入框
|
||
|
||
// 日期最大值 1天前
|
||
var today = new Date(Date.now() - 24 * 3600 * 1000); // 获取当前的日期对象
|
||
var day = today.getDate(); // 获取当前的日
|
||
var month = today.getMonth() + 1; // 获取当前的月，需要加1
|
||
var year = today.getFullYear(); // 获取当前的年
|
||
if (day < 10) { // 如果日小于10，前面补0
|
||
day = "0" + day;
|
||
}
|
||
if (month < 10) { // 如果月小于10，前面补0
|
||
month = "0" + month;
|
||
}
|
||
var date = year + "-" + month + "-" + day; // 拼接成 yyyy-MM-dd 格式的字符串
|
||
document.getElementById("date").max = date; // 将字符串赋值给日期输入框
|
||
}
|
||
|
||
// // 在页面加载时发送get请求，获取所有的名称和位置，并填充到下拉框中
|
||
// $(document).ready(function () {
|
||
// $.get(host + 'nuclear_data/options', function (res) {
|
||
// // 遍历返回的数组，将每个名称和位置添加到对应的下拉框中
|
||
// for (let item of res) {
|
||
// $('#name').append(`<option value="${item.name}">${item.name}</option>`);
|
||
// $('#location').append(`<option value="${item.location}">${item.location}</option>`);
|
||
// }
|
||
// });
|
||
// });
|
||
|
||
// // 在页面加载时发送get请求，获取所有的名称，并填充到名称的下拉框中
|
||
// $(document).ready(function () {
|
||
// $.get(host + 'nuclear_data/options', function (res) {
|
||
// // 遍历返回的数组，将每个名称添加到名称的下拉框中
|
||
// for (let item of res) {
|
||
// $('#name').append(`<option value="${item.name}">${item.name}</option>`);
|
||
// }
|
||
// // 触发名称的下拉框的change事件，以获取对应的位置
|
||
// $('#name').trigger('change');
|
||
// });
|
||
// });
|
||
|
||
// 在页面加载时发送get请求，获取所有的名称，并填充到名称的下拉框中
|
||
$(document).ready(function () {
|
||
|
||
setDefalutValue()
|
||
|
||
// 触发名称的下拉框的change事件，以获取对应的位置
|
||
$('#type').trigger('change');
|
||
});
|
||
|
||
// 绑定名称的下拉框的change事件，当选择某个名称时，发送post请求，获取对应的名称，并填充到名称的下拉框中
|
||
$('#type').on('change', function () {
|
||
// 获取选择的名称
|
||
let type = $(this).val();
|
||
// 发送post请求
|
||
$.post(host + 'nuclear_data/options/names', { type: type }, function (res) {
|
||
// 清空位置的下拉框
|
||
$('#name').empty();
|
||
// 遍历返回的数组，将每个位置添加到位置的下拉框中
|
||
for (let item of res) {
|
||
$('#name').append(`<option value="${item.name}">${item.name}</option>`);
|
||
}
|
||
// 触发名称的下拉框的change事件，以获取对应的位置
|
||
$('#name').trigger('change');
|
||
});
|
||
});
|
||
|
||
// 绑定名称的下拉框的change事件，当选择某个名称时，发送post请求，获取对应的位置，并填充到位置的下拉框中
|
||
$('#name').on('change', function () {
|
||
// 获取选择的名称
|
||
let type = $('#type').val();
|
||
let name = $(this).val();
|
||
// 发送post请求
|
||
$.post(host + 'nuclear_data/options/locations', { type: type, name: name }, function (res) {
|
||
// 清空位置的下拉框
|
||
$('#location').empty();
|
||
// 遍历返回的数组，将每个位置添加到位置的下拉框中
|
||
for (let item of res) {
|
||
$('#location').append(`<option value="${item.location}">${item.location}</option>`);
|
||
}
|
||
});
|
||
});
|
||
|
||
$('#location').on('change', function () {
|
||
$('#submit-btn').trigger('click');
|
||
});
|
||
|
||
$('#date').on('change', function () {
|
||
$('#submit-btn').trigger('click');
|
||
});
|
||
|
||
|
||
function rtime(timeStr) {
|
||
let date = new Date(timeStr)
|
||
// return new Date(date.getTime() + 8 * 3600 * 1000).toISOString().replace('T', ' ').replace('Z', '')
|
||
return new Date(date.getTime() + 8 * 3600 * 1000).toISOString().substring(0, 10)
|
||
}
|
||
|
||
// 绑定表单提交事件
|
||
$('#form').on('submit', function (e) {
|
||
e.preventDefault(); // 阻止默认行为
|
||
// 获取表单数据
|
||
let data = $(this).serialize();
|
||
// 发送post请求
|
||
$.post(host + 'nuclear_data', data, function (res) {
|
||
// 清空结果区域
|
||
$('#result').empty();
|
||
// 判断是否有数据返回
|
||
if (res.length > 0) {
|
||
// 遍历返回的数组，显示每条数据的信息
|
||
for (let item of res) {
|
||
$('#result').append(`<p>名称：${item.name}</p>`);
|
||
$('#result').append(`<p>位置：${item.location}</p>`);
|
||
$('#result').append(`<p>值：${item.value}</p>`);
|
||
$('#result').append(`<p>日期：${rtime(item.date)} <span style="color: grey; font-size: small;">(${item.date})</span></p>`);
|
||
$('#result').append(`<p>类型：${item.type}</p>`);
|
||
$('#result').append(`<p>数据更新日期：${item.time || '暂无'}</p>`);
|
||
$('#result').append(`<hr>`); // 分隔线
|
||
}
|
||
} else {
|
||
// 没有数据返回，显示提示信息
|
||
$('#result').text('没有找到符合条件的数据');
|
||
}
|
||
});
|
||
});
|
||
</script>
|
||
</body>
|
||
|
||
</html> |