将静态资源移动到标准位置

This commit is contained in:
2025-09-28 15:00:53 +08:00
parent 2a1847e314
commit 892cface67
13 changed files with 0 additions and 0 deletions

658
static/js/afterbody.js Normal file
View File

@@ -0,0 +1,658 @@
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';
});