Files
asd-backend/static/js/afterbody.js

659 lines
25 KiB
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
const version = "0.1.8";
function toggleFormula(element) {
const content = element.nextElementSibling;
content.style.display = content.style.display === "none" ? "block" : "none";
element.textContent = element.textContent.includes("▶")
? element.textContent.replace("▶", "▼")
: element.textContent.replace("▼", "▶");
}
document.addEventListener('DOMContentLoaded', function() {
renderMathInElement(document.body, {
delimiters: [
{left: "$$", right: "$$", display: true},
{left: "$", right: "$", display: false}
],
throwOnError: false
});
});
// 分页功能
document.getElementById('prevPageBtn').addEventListener('click', function() {
const currentPage = parseInt(document.getElementById('currentPage').textContent);
if (currentPage > 1) {
loadPage(currentPage - 1);
}
});
document.getElementById('nextPageBtn').addEventListener('click', function() {
const currentPage = parseInt(document.getElementById('currentPage').textContent);
const totalPages = parseInt(document.getElementById('totalPages').textContent);
if (currentPage < totalPages) {
loadPage(currentPage + 1);
}
});
function loadPage(page) {
const urlParams = new URLSearchParams(window.location.search);
const user_id = urlParams.get('user_id');
fetch(`/weather?user_id=${user_id}&page=${page}`)
.then(response => response.text())
.then(html => {
// 创建一个临时DOM元素来 parse 返回的HTML
const parser = new DOMParser();
const doc = parser.parseFromString(html, 'text/html');
// 获取新的卡片容器内容
const newCardContainer = doc.getElementById('cardContainer');
if (newCardContainer) {
document.getElementById('cardContainer').innerHTML = newCardContainer.innerHTML;
}
// 更新分页信息
const newCurrentPage = doc.getElementById('currentPage');
const newTotalPages = doc.getElementById('totalPages');
if (newCurrentPage && newTotalPages) {
document.getElementById('currentPage').textContent = newCurrentPage.textContent;
document.getElementById('totalPages').textContent = newTotalPages.textContent;
}
// 更新按钮状态
updatePaginationButtons(parseInt(newCurrentPage.textContent), parseInt(newTotalPages.textContent));
// 隐藏详情容器
document.getElementById('detailsContainer').style.display = 'none';
})
.catch(error => {
console.error('Error:', error);
showNotification('加载页面失败', 'error');
});
}
function updatePaginationButtons(currentPage, totalPages) {
const prevBtn = document.getElementById('prevPageBtn');
const nextBtn = document.getElementById('nextPageBtn');
prevBtn.disabled = currentPage <= 1;
nextBtn.disabled = currentPage >= totalPages;
}
// 添加删除按钮事件监听
document.getElementById('deleteBtn').addEventListener('click', function() {
const selectedRadio = document.querySelector('input[name="selectedData"]:checked');
if (!selectedRadio) {
alert('请先选择一条数据');
return;
}
if (!confirm('确定要删除这条记录吗?此操作不可撤销!')) {
return;
}
const selectedId = selectedRadio.value;
fetch('/weather/delete', {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
body: `id=${selectedId}`
})
.then(response => response.json())
.then(data => {
if (data.error) {
showNotification(data.error, 'error');
} else {
showNotification(data.message);
// 移除已删除的卡片
const card = document.querySelector(`.card[data-id="${selectedId}"]`);
if (card) {
card.remove();
}
// 隐藏详情容器
document.getElementById('detailsContainer').style.display = 'none';
}
})
.catch(error => {
console.error('Error:', error);
showNotification('删除失败', 'error');
});
});
let weatherdata = null;
document.getElementById('downloadBtn').addEventListener('click', function() {
// 保存按钮的引用
var btn = this;
// 隐藏按钮(而不是移除)
btn.style.display = 'none';
//
const data = weatherdata;
const areaTypeMap = {
urban: "城市",
rural: "农村",
};
// 等待一小段时间确保按钮已隐藏
setTimeout(function() {
// 假设你的HTML字符串是这样的
var htmlString = `
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>总体适宜度测量报表</title>
<style>
body {
font-family: 'Arial', sans-serif;
line-height: 1.6;
color: #333;
max-width: 800px;
margin: 0 auto;
padding: 20px;
background-color: #f5f5f5;
}
.report-container {
background-color: white;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
padding: 25px;
}
h1 {
color: #2c3e50;
text-align: center;
border-bottom: 2px solid #3498db;
padding-bottom: 10px;
margin-bottom: 20px;
}
.divider {
border-top: 1px solid #ddd;
margin: 20px 0;
}
.data-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-bottom: 15px;
}
.data-row {
display: flex;
align-items: center;
}
.data-row-long {
display: flex;
flex-direction: column;
}
.data-label {
font-weight: bold;
color: #2980b9;
margin-bottom: 4px;
width: 200px; /* 设置你想要的固定宽度 */
white-space: nowrap; /* 防止换行 */
overflow: hidden; /* 隐藏溢出内容 */
text-overflow: ellipsis; /* 添加省略号 */
}
.data-value {
font-weight: normal;
}
.section-title {
font-size: 16px;
font-weight: bold;
margin: 15px 0 5px;
color: #34495e;
}
.ten-values {
background-color: #f9f9f9;
padding: 10px;
border-radius: 4px;
font-family: monospace;
margin-top: 5px;
}
.footer {
position: absolute;
bottom: 0%;
left: 50%;
transform: translateX(-50%); /* 水平居中 */
font-size: 12px;
color: #7f8c8d;
text-align: center; /* 文本居中 */
}
</style>
</head>
<body>
<div class="report-container">
<h1>总体适宜度测量报表</h1>
<div class="data-grid">
<div class="data-row-long">
<div class="data-label">文件编号:</div>
<div class="data-value">${data.id}</div>
</div>
<div class="data-row-long">
<div class="data-label">检测类型:</div>
<div class="data-value">${data.inspectiontype}</div>
</div>
<div class="data-row-long">
<div class="data-label">委托单号:</div>
<div class="data-value">${data.assignmentnumber}</div>
</div>
<div class="data-row-long">
<div class="data-label">项目名称:</div>
<div class="data-value">${data.title}</div>
</div>
<div class="data-row-long">
<div class="data-label">经纬度:</div>
<div class="data-value">E ${data.longitude}, N ${data.latitude}</div>
</div>
<div class="data-row-long">
<div class="data-label">测试时间:</div>
<div class="data-value">${formatDateToYYYYMMDD(data.date)}${data.hour}:${data.min}</div>
</div>
</div>
<div class="divider"></div>
<div class="data-grid">
<div class="data-row">
<div class="data-label">日期序数:</div>
<div class="data-value">${data.daysincejanfirst}</div>
</div>
<div class="data-row">
<div class="data-label">太阳倾角:</div>
<div class="data-value">${data.solardeclination}°</div>
</div>
<div class="data-row">
<div class="data-label">太阳高度角:</div>
<div class="data-value">${data.sunaltitude}°</div>
</div>
<div class="data-row">
<div class="data-label">总云量:</div>
<div class="data-value">${data.overallcloudiness}</div>
</div>
<div class="data-row">
<div class="data-label">低云量:</div>
<div class="data-value">${data.lowcloudiness}</div>
</div>
<div class="data-row">
<div class="data-label">辐射等级:</div>
<div class="data-value">${data.solarradiationlevel}</div>
</div>
<div class="data-row">
<div class="data-label">平均风速:</div>
<div class="data-value">${data.averagewindspeed}m/s</div>
</div>
<div class="data-row">
<div class="data-label">风速适宜度:</div>
<div class="data-value">${data.windspeedsuitability}</div>
</div>
<div class="data-row">
<div class="data-label">平均风向:</div>
<div class="data-value">${data.averagewinddirection}°</div>
</div>
<div class="data-row">
<div class="data-label">风向标准差:</div>
<div class="data-value">${data.winddirectionstandarddeviation}°</div>
</div>
<div class="data-row">
<div class="data-label">风向适宜度:</div>
<div class="data-value">${data.winddirectionsuitability}</div>
</div>
<div class="data-row">
<div class="data-label">大气稳定度:</div>
<div class="data-value">${data.atmosphericstability}</div>
</div>
<div class="data-row">
<div class="data-label">稳定度适宜度:</div>
<div class="data-value">${data.suitabilitydegree}</div>
</div>
<div class="data-row">
<div class="data-label">总体适宜度:</div>
<div class="data-value">${replaceSuitabilityText(data.overallsuitability, "overall")}</div>
</div>
</div>
<!-- tbd
<div class="divider"></div>
<div class="data-row">
<div class="data-label">大气压:</div>
<div class="data-value">tbd kPa</div>
</div>
<div class="data-row">
<div class="data-label">环境温度:</div>
<div class="data-value">tbd ℃</div>
</div>
<div class="data-row">
<div class="data-label">环境湿度:</div>
<div class="data-value">tbd %RH</div>
</div>
-->
<div class="divider"></div>
<div class="data-grid">
<div class="data-row-long">
<div class="data-label">十次风速值:</div>
<div class="data-value">
<div class="ten-values">${data.windspeed}</div>
</div>
</div>
<div class="data-row-long">
<div class="data-label">十次风向值:</div>
<div class="data-value">
<div class="ten-values">${data.winddirection}</div>
</div>
</div>
</div>
<div class="divider"></div>
<div class="data-grid">
`
// 根据条件显示相应的数据
if (data.hasmeasuredwindspeed === true) {
htmlString+=`
<div class="data-row">
<div class="data-label">实测风速:</div>
<div class="data-value">${data.measuredwindspeed} m/s</div>
</div>
<div class="data-row">
<div class="data-label">转换风速:</div>
<div class="data-value">${data.convertedwindspeed} m/s</div>
</div>
`
} else {
htmlString+=`
<div class="data-row">
<div class="data-label">区域类型:</div>
<div class="data-value">${areaTypeMap[data.areatype]}</div>
</div>
<div class="data-row">
<div class="data-label">测点高度:</div>
<div class="data-value">${data.measurementheight} m</div>
</div>
<div class="data-row">
<div class="data-label">点位风速:</div>
<div class="data-value">${data.pointwindspeed} m/s</div>
</div>
<div class="data-row">
<div class="data-label">推算风速:</div>
<div class="data-value">${data.calculatedwindspeed} m/s</div>
</div>
`
};
htmlString += `
</div>
<br>
<div class="footer">----报表结束 version:0.18----</div>
</body>
</html>
`
const filename = `${data.id}-${version}.pdf`
var opt = {
margin: 10,
filename: filename,
image: {
type: 'jpeg',
quality: 0.98
},
html2canvas: {
scale: 2
},
jsPDF: {
unit: 'mm',
format: 'a4',
orientation: 'portrait'
}
};
// 执行下载使用htmlString作为内容源
html2pdf().set(opt).from(htmlString).save();
}, 100);
// 下载完成后恢复按钮显示
setTimeout(function() {
btn.style.display = '';
}, 2000); // 假设下载需要2秒完成你可以根据实际情况调整
});
// 函数用于将日期格式化为 xxxx-xx-xx 形式
function formatDateToYYYYMMDD(date) {
// 使用Date对象解析这个日期字符串
var date = new Date(date);
var year = date.getFullYear(); // 获取年份
var month = (date.getMonth() + 1).toString().padStart(2, '0'); // 获取月份,并确保两位数
var day = date.getDate().toString().padStart(2, '0'); // 获取日期,并确保两位数
return year + '-' + month + '-' + day; // 组合成 xxxx-xx-xx 形式
}
document.getElementById('viewDetailsBtn').addEventListener('click', function() {
const selectedRadio = document.querySelector('input[name="selectedData"]:checked');
if (!selectedRadio) {
alert('请先选择一条数据');
return;
}
const selectedId = selectedRadio.value;
fetch(`/weather/details?id=${selectedId}`)
.then(response => response.json())
.then(data => {
//更新全局变量
weatherdata = data;
const detailsTable = document.getElementById('detailsTable');
detailsTable.innerHTML = '';
const row = document.createElement('div');
row.innerHTML = `
<div class="card">
<div class="card-header">
<h3>${data.title}</h3>
<h3>${data.inspectiontype}</h3>
<h3>${data.assignmentnumber}</h3>
</div>
<div class="card-body">
<div class="info-item">
<span class="info-label">时间:</span>
<span class="info-value">${formatDateToYYYYMMDD(data.date)} ${data.hour}${data.min}分</span>
</div>
<div class="info-item">
<span class="info-label">经纬度:</span>
<span class="info-value">位置: 经度 ${data.longitude}, 纬度 ${data.latitude}</span>
</div>
<div class="info-item">
<span class="info-label">地球公转角:</span>
<span class="info-value">${data.theta}</span>
</div>
<div class="info-item">
<span class="info-label">太阳倾角:</span>
<span class="info-value">${data.solardeclination}</span>
</div>
<div class="info-item">
<span class="info-label">太阳高度角:</span>
<span class="info-value">${data.sunaltitude}</span>
</div>
<div class="info-item">
<span class="info-label">云量指数:${data.cloudindex}</span>
<span class="info-value">低云 ${data.lowcloudiness}, 总云量 ${data.overallcloudiness}</span>
</div>
<div class="info-item">
<span class="info-label">太阳辐射等级:</span>
<span class="info-value">${data.solarradiationlevel}</span>
</div>
<div id="measured-data" style="display: none;">
<div class="info-item">
<span class="info-label">测量风速:</span>
<span class="info-value" id="measured-windspeed">${data.measuredwindspeed}</span>
</div>
<div class="info-item">
<span class="info-label">转换风速:</span>
<span class="info-value" id="converted-windspeed">${data.convertedwindspeed}</span>
</div>
</div>
<div id="calculated-data" style="display: none;">
<div class="info-item">
<span class="info-label">测量高度:</span>
<span class="info-value" id="measurement-height">${data.measurementheight}</span>
</div>
<div class="info-item">
<span class="info-label">区域类型:</span>
<span class="info-value" id="area-type">${data.areatype}</span>
</div>
<div class="info-item">
<span class="info-label">测点风速:</span>
<span class="info-value" id="point-windspeed">${data.pointwindspeed}</span>
</div>
</div>
<div class="info-item">
<span class="info-label">大气稳定度:</span>
<span class="info-value">${data.atmosphericstability}</span>
</div>
<div class="info-item">
<span class="info-label">适宜度:</span>
<span class="info-value">${data.suitabilitydegree}</span>
</div>
<div class="info-item">
<span class="info-label">风速:${data.windspeed}</span>
<span class="info-value">平均风速:${data.averagewindspeed}</span>
<span class="info-value">适宜度:${data.windspeedsuitability}</span>
</div>
<div class="info-item">
<span class="info-label">风向:${data.winddirection}</span>
<span class="info-value">平均风向 ${data.averagewinddirection} 风向标准差 ${data.winddirectionstandarddeviation}</span>
<span class="info-value">适宜度:${data.winddirectionsuitability}</span>
</div>
<div class="info-item">
<span class="info-label">整体适宜度:</span>
<span class="info-value rating-high">${data.overallsuitability}</span>
</div>
</div>
</div>
`;
detailsTable.appendChild(row);
// 根据条件显示相应的数据
if (data.hasmeasuredwindspeed==='true') {
document.getElementById('measured-data').style.display = 'block';
document.getElementById('calculated-data').style.display = 'none';
document.getElementById('measured-windspeed').textContent = data.measuredwindspeed;
document.getElementById('converted-windspeed').textContent = data.convertedwindspeed;
} else {
document.getElementById('measured-data').style.display = 'none';
document.getElementById('calculated-data').style.display = 'block';
document.getElementById('measurement-height').textContent = data.measurementheight;
document.getElementById('area-type').textContent = data.areatype;
document.getElementById('point-windspeed').textContent = data.pointwindspeed;
};
document.getElementById('detailsContainer').style.display = 'block';
})
.catch(error => {
console.error('Error:', error);
alert('获取详细信息失败');
});
});
function selectCard(card) {
// 获取所有卡片
const allCards = document.querySelectorAll('.card');
// 移除所有卡片的选中状态
allCards.forEach(c => {
c.classList.remove('selected');
const radio = c.querySelector('input[type="radio"]');
if (radio) radio.checked = false;
});
// 添加当前卡片的选中状态
card.classList.add('selected');
const radio = card.querySelector('input[type="radio"]');
if (radio) radio.checked = true;
}
// 显示通知
function showNotification(message, type = 'success') {
const notification = document.getElementById('notification');
notification.textContent = message;
notification.style.backgroundColor = type === 'success' ? '#4CAF50' : '#f44336';
notification.style.display = 'block';
setTimeout(() => {
notification.style.display = 'none';
}, 3000);
}
//公式相关
function toggleAccordion(header) {
const content = header.nextElementSibling;
const isOpen = content.style.maxHeight !== '0px' && content.style.maxHeight !== '';
// 关闭所有其他面板
document.querySelectorAll('.accordion-content').forEach(item => {
item.style.maxHeight = '0px';
});
// 切换当前面板
if (!isOpen) {
content.style.maxHeight = content.scrollHeight + 'px';
}
}
//稳定度描述映射
function replaceSuitabilityText(data, type) {
// 定义映射关系
const suitabilityMap = {
'a': '不利于污染物的扩散和稀释,适宜于进行无组织排放监测',
'b': '较不利于污染物的扩散和稀释,较适宜于进行无组织排放监测',
'c': '有利于污染物的扩散和稀释,较不适宜于进行无组织排放监测',
'd': '很有利于污染物的扩散和稀释,不适宜于进行无组织排放监测',
'wind0': '静风',
'overall0': '取消监测或改期'
};
// 将输入转换为小写(或大写)以实现大小写不敏感
const normalizedData = String(data).toLowerCase();
// 处理特殊类型
if (type === 'wind' && normalizedData === '0')
return suitabilityMap['wind0'];
if (type === 'overall' && normalizedData === '0')
return suitabilityMap['overall0'];
// 处理普通类型
if (type === 'normal' || type === "wind" || type === "overall") {
// 检查映射表中是否存在转换后的小写字段
if (suitabilityMap[normalizedData]) {
return suitabilityMap[normalizedData];
}
// 如果找不到,返回原值
return data;
}
// 默认返回原值
return data;
}
// 初始化时关闭所有面板
document.querySelectorAll('.accordion-content').forEach(content => {
content.style.maxHeight = '0px';
});