765 lines
26 KiB
JavaScript
765 lines
26 KiB
JavaScript
// API Base URL (统一使用相对路径，避免跨域问题)
|
||
const API_BASE_URL = '/api';
|
||
|
||
// 数据存储
|
||
let taxonomyData = {};
|
||
let physchemData = {};
|
||
let nutritionData = [];
|
||
let cultureData = [];
|
||
let currentTab = 'phylum';
|
||
let maxValue = 50000;
|
||
let currentPhyschemTab = 'o2';
|
||
|
||
// ECharts 实例存储
|
||
let pieChart = null;
|
||
let phChart = null;
|
||
let tempChart = null;
|
||
|
||
// --- 数据加载函数 ---
|
||
|
||
/**
|
||
// * 加载分类学数据
|
||
// * @param {string} level - 分类级别 (如 phylum, class 等)
|
||
// * @returns {Array} 处理后的分类学数据
|
||
// */
|
||
// async function loadTaxonomyData(level) {
|
||
// try {
|
||
// const response = await fetch(`${API_BASE_URL}/taxonomy-stats?level=${level}`);
|
||
|
||
// if (!response.ok) {
|
||
// throw new Error(`加载失败: HTTP 状态码 ${response.status}`);
|
||
// }
|
||
|
||
// const result = await response.json();
|
||
|
||
// if (result.success) {
|
||
// taxonomyData[level] = {
|
||
// data: result.data,
|
||
// total: result.total
|
||
// };
|
||
// return result.data;
|
||
// } else {
|
||
// console.error('加载分类学数据失败:', result.message);
|
||
// showErrorNotification('分类学数据加载失败');
|
||
// return [];
|
||
// }
|
||
// } catch (error) {
|
||
// console.error('加载分类学数据时出错:', error);
|
||
// showErrorNotification('加载数据时发生错误，请稍后重试');
|
||
// return [];
|
||
// }
|
||
// }
|
||
|
||
/**
|
||
* 加载分类学数据
|
||
* @param {string} level - 分类级别 (如 phylum, class 等)
|
||
* @param {string} culturedType - 培养类型 (默认: cultured，可选: uncultured 等)
|
||
* @returns {Array} 处理后的分类学数据
|
||
*/
|
||
async function loadTaxonomyData(level, culturedType = 'cultured') {
|
||
try {
|
||
// 1. 拼接完整请求URL：补充 cultured_type 参数（和后端默认值一致）
|
||
const params = new URLSearchParams({
|
||
level: level || 'phylum', // 后端默认 phylum
|
||
cultured_type: culturedType // 后端默认 cultured
|
||
});
|
||
const response = await fetch(`${API_BASE_URL}/taxonomy-stats?${params.toString()}`);
|
||
|
||
if (!response.ok) {
|
||
throw new Error(`加载失败: HTTP 状态码 ${response.status}`);
|
||
}
|
||
|
||
const result = await response.json();
|
||
|
||
// 2. 处理后端返回：区分成功/失败场景
|
||
if (result.success) {
|
||
// 后端返回 { success: true, data: [], total: 0 }
|
||
taxonomyData[level] = {
|
||
data: result.data || [], // 兜底空数组，避免undefined
|
||
total: result.total || 0 // 兜底0，避免NaN
|
||
};
|
||
return result.data || [];
|
||
} else if (result.error) {
|
||
// 后端返回 { error: "xxx" }（500错误时）
|
||
console.error('加载分类学数据失败:', result.error);
|
||
showErrorNotification(`分类学数据加载失败: ${result.error}`);
|
||
taxonomyData[level] = { data: [], total: 0 }; // 兜底空数据
|
||
return [];
|
||
} else {
|
||
// 未知返回格式
|
||
console.error('加载分类学数据失败: 未知返回格式', result);
|
||
showErrorNotification('分类学数据加载失败: 返回格式异常');
|
||
taxonomyData[level] = { data: [], total: 0 };
|
||
return [];
|
||
}
|
||
} catch (error) {
|
||
// 网络错误/HTTP状态码错误（如404、500）
|
||
console.error('加载分类学数据时出错:', error);
|
||
showErrorNotification(`加载数据时发生错误: ${error.message}，请稍后重试`);
|
||
taxonomyData[level] = { data: [], total: 0 }; // 兜底空数据
|
||
return [];
|
||
}
|
||
}
|
||
|
||
|
||
|
||
/**
|
||
* 加载理化数据
|
||
* @param {string} type - 数据类型 (o2, ph, temperature)
|
||
* @returns {Object|null} 处理后的理化数据
|
||
*/
|
||
async function loadPhyschemData(type) {
|
||
try {
|
||
const response = await fetch(`${API_BASE_URL}/physchem-stats?type=${type}`);
|
||
|
||
if (!response.ok) {
|
||
throw new Error(`加载失败: HTTP 状态码 ${response.status}`);
|
||
}
|
||
|
||
const result = await response.json();
|
||
|
||
if (result.success) {
|
||
physchemData[type] = result.data;
|
||
return result.data;
|
||
} else {
|
||
console.error('加载理化数据失败:', result.message);
|
||
showErrorNotification('理化数据加载失败');
|
||
return null;
|
||
}
|
||
} catch (error) {
|
||
console.error('加载理化数据时出错:', error);
|
||
showErrorNotification('加载数据时发生错误，请稍后重试');
|
||
return null;
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 加载营养数据
|
||
* @returns {Array} 处理后的营养数据
|
||
*/
|
||
async function loadNutritionData() {
|
||
try {
|
||
const response = await fetch(`${API_BASE_URL}/nutrition-stats`);
|
||
|
||
if (!response.ok) {
|
||
throw new Error(`加载失败: HTTP 状态码 ${response.status}`);
|
||
}
|
||
|
||
const result = await response.json();
|
||
|
||
if (result.success) {
|
||
nutritionData = result.data || [];
|
||
return result.data || [];
|
||
} else {
|
||
console.error('加载营养数据失败:', result.message);
|
||
showErrorNotification('营养数据加载失败');
|
||
return [];
|
||
}
|
||
} catch (error) {
|
||
console.error('加载营养数据时出错:', error);
|
||
showErrorNotification('加载数据时发生错误，请稍后重试');
|
||
return [];
|
||
}
|
||
}
|
||
|
||
// --- 图表渲染函数 ---
|
||
|
||
/**
|
||
* 更新分类学图表
|
||
* @param {string} tabName - 分类级别
|
||
*/
|
||
async function updateTaxonomyChart(tabName) {
|
||
currentTab = tabName;
|
||
const badge = document.getElementById('taxonomyTotalBadge');
|
||
const content = document.getElementById('taxonomyChartContent');
|
||
|
||
// 显示加载状态
|
||
if (badge) badge.textContent = 'Loading...';
|
||
if (content) content.innerHTML = '<div style="text-align: center; padding: 50px; color: #666;">Loading data...</div>';
|
||
|
||
// 加载数据（如果未缓存）
|
||
if (!taxonomyData[tabName]) {
|
||
await loadTaxonomyData(tabName);
|
||
}
|
||
|
||
const data = taxonomyData[tabName]?.data || [];
|
||
const total = taxonomyData[tabName]?.total || 0;
|
||
|
||
// 处理无数据情况
|
||
if (!data || data.length === 0) {
|
||
console.warn(`分类级别 ${tabName} 无数据`);
|
||
if (badge) badge.textContent = 'Total taxa: 0';
|
||
if (content) content.innerHTML = '<div style="text-align: center; padding: 50px; color: #666;">No data available</div>';
|
||
return;
|
||
}
|
||
|
||
// 更新总数显示
|
||
if (badge) badge.textContent = `Total taxa: ${total}`;
|
||
maxValue = Math.max(...data.map(item => item.value)) * 1.1;
|
||
|
||
// 渲染图表内容
|
||
if (content) {
|
||
const availableWidth = Math.max(content.offsetWidth - 220, 600);
|
||
|
||
content.innerHTML = data.map(item => {
|
||
const percentage = (item.value / maxValue) * 100;
|
||
const lineWidth = Math.max(1, (percentage / 100) * availableWidth);
|
||
|
||
return `
|
||
<div class="taxonomy-chart-row">
|
||
<div class="taxonomy-taxa-name" title="${item.name}">${item.name}</div>
|
||
<div class="taxonomy-chart-area">
|
||
<div class="taxonomy-chart-line" style="width: ${lineWidth}px;"></div>
|
||
<div class="taxonomy-chart-dot"
|
||
style="left: ${lineWidth}px;"
|
||
data-name="${item.name}"
|
||
data-value="${item.value.toLocaleString()}"></div>
|
||
</div>
|
||
</div>
|
||
`;
|
||
}).join('');
|
||
}
|
||
|
||
// 使用 requestAnimationFrame 确保 DOM 已更新
|
||
requestAnimationFrame(() => {
|
||
generateTaxonomyGridLines();
|
||
bindTaxonomyTooltipEvents();
|
||
});
|
||
}
|
||
|
||
/**
|
||
* 生成分类学图表网格线
|
||
*/
|
||
function generateTaxonomyGridLines() {
|
||
const gridLines = document.getElementById('taxonomyGridLines');
|
||
const xAxisLabels = document.getElementById('taxonomyXAxisLabels');
|
||
|
||
if (!gridLines || !xAxisLabels) return;
|
||
|
||
const firstChartArea = document.querySelector('.taxonomy-chart-area');
|
||
const chartWidth = firstChartArea ? firstChartArea.offsetWidth : 600;
|
||
|
||
gridLines.innerHTML = '';
|
||
xAxisLabels.innerHTML = '';
|
||
|
||
const maxVal = Math.round(maxValue);
|
||
let gridCount = 5;
|
||
let step;
|
||
|
||
// 动态计算步长，确保坐标轴标签合理
|
||
if (maxVal <= 100) {
|
||
step = Math.ceil(maxVal / 5);
|
||
} else if (maxVal <= 1000) {
|
||
step = Math.ceil(maxVal / 5 / 10) * 10;
|
||
} else if (maxVal <= 10000) {
|
||
step = Math.ceil(maxVal / 5 / 100) * 100;
|
||
} else {
|
||
step = Math.ceil(maxVal / 5 / 1000) * 1000;
|
||
}
|
||
|
||
// 生成网格线和标签
|
||
for (let i = 0; i <= gridCount; i++) {
|
||
const position = (i / gridCount) * chartWidth;
|
||
|
||
const gridLine = document.createElement('div');
|
||
gridLine.className = 'taxonomy-grid-line';
|
||
gridLine.style.left = `${position}px`;
|
||
gridLines.appendChild(gridLine);
|
||
|
||
const label = document.createElement('span');
|
||
label.textContent = (i * step).toLocaleString();
|
||
xAxisLabels.appendChild(label);
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 绑定分类学图表提示框事件
|
||
*/
|
||
function bindTaxonomyTooltipEvents() {
|
||
const dots = document.querySelectorAll('.taxonomy-chart-dot');
|
||
const tooltip = document.getElementById('taxonomyTooltip');
|
||
|
||
if (!tooltip) return;
|
||
|
||
dots.forEach(dot => {
|
||
dot.addEventListener('mouseenter', (e) => {
|
||
const name = e.target.getAttribute('data-name');
|
||
const value = e.target.getAttribute('data-value');
|
||
tooltip.innerHTML = `${name}<br>Strains: ${value}`;
|
||
tooltip.style.display = 'block';
|
||
});
|
||
|
||
dot.addEventListener('mousemove', (e) => {
|
||
tooltip.style.left = `${e.pageX + 10}px`;
|
||
tooltip.style.top = `${e.pageY - 40}px`;
|
||
});
|
||
|
||
dot.addEventListener('mouseleave', () => {
|
||
tooltip.style.display = 'none';
|
||
});
|
||
});
|
||
}
|
||
|
||
/**
|
||
* 初始化分类学标签切换事件
|
||
*/
|
||
function initializeTaxonomyTabEvents() {
|
||
document.querySelectorAll('.taxonomy-container .taxonomy-tab-item').forEach(tab => {
|
||
tab.addEventListener('click', async (e) => {
|
||
// 防止重复点击同一标签
|
||
if (e.target.classList.contains('active')) return;
|
||
|
||
document.querySelectorAll('.taxonomy-container .taxonomy-tab-item')
|
||
.forEach(t => t.classList.remove('active'));
|
||
e.target.classList.add('active');
|
||
|
||
const tabName = e.target.getAttribute('data-tab');
|
||
await updateTaxonomyChart(tabName);
|
||
});
|
||
});
|
||
}
|
||
|
||
/**
|
||
* 初始化分类学图表
|
||
*/
|
||
async function initializeTaxonomy() {
|
||
initializeTaxonomyTabEvents();
|
||
await updateTaxonomyChart('phylum');
|
||
}
|
||
|
||
/**
|
||
* 更新理化性质图表
|
||
* @param {string} tabName - 图表类型 (o2, ph, temperature)
|
||
*/
|
||
async function updatePhyschemChart(tabName) {
|
||
currentPhyschemTab = tabName;
|
||
const badge = document.getElementById('physchem-total-badge');
|
||
|
||
// 显示加载状态
|
||
if (badge) badge.textContent = 'Loading...';
|
||
|
||
// 加载数据（如果未缓存）
|
||
if (!physchemData[tabName]) {
|
||
await loadPhyschemData(tabName);
|
||
}
|
||
|
||
const data = physchemData[tabName];
|
||
|
||
// 处理无数据情况
|
||
if (!data) {
|
||
if (badge) badge.textContent = 'No data available';
|
||
return;
|
||
}
|
||
|
||
// 隐藏所有图表区域，显示当前激活的
|
||
document.querySelectorAll('.physchem-container .chart-area')
|
||
.forEach(area => area.classList.remove('active'));
|
||
|
||
// 氧气需求饼图
|
||
if (tabName === 'o2') {
|
||
const chartArea = document.getElementById('chart-oxygen-pie');
|
||
if (chartArea) chartArea.classList.add('active');
|
||
|
||
if (badge) badge.textContent = `Total count: ${data.total || 0}`;
|
||
|
||
// 初始化 ECharts 实例（确保 echarts 存在且 DOM 元素有效）
|
||
if (window.echarts && !pieChart) {
|
||
const dom = document.getElementById('chart-oxygen-pie');
|
||
if (dom) {
|
||
pieChart = echarts.init(dom);
|
||
// 监听窗口大小变化，自动调整图表
|
||
window.addEventListener('resize', () => pieChart?.resize());
|
||
}
|
||
}
|
||
|
||
if (pieChart) {
|
||
const pieOption = {
|
||
tooltip: {
|
||
trigger: 'item',
|
||
formatter: '{b}: {d}%',
|
||
renderMode: 'html'
|
||
},
|
||
legend: {
|
||
orient: 'horizontal',
|
||
left: 'center',
|
||
top: '2%',
|
||
data: ['Aerobe', 'Anaerobe', 'Facultative anaerobe'],
|
||
textStyle: { fontSize: 18 }
|
||
},
|
||
series: [{
|
||
name: 'O2 Requirements',
|
||
type: 'pie',
|
||
radius: ['40%', '70%'],
|
||
center: ['45%', '50%'],
|
||
label: {
|
||
show: true,
|
||
formatter: '{d}%',
|
||
fontSize: 18,
|
||
fontWeight: 'bold'
|
||
},
|
||
labelLine: {
|
||
show: true,
|
||
length: 1,
|
||
length2: 10,
|
||
smooth: true
|
||
},
|
||
data: [
|
||
{ value: data.aerobe, name: 'Aerobe', itemStyle: { color: '#CCCC99' } },
|
||
{ value: data.anaerobe, name: 'Anaerobe', itemStyle: { color: '#336666' } },
|
||
{ value: data.facultative, name: 'Facultative anaerobe', itemStyle: { color: '#669999' } }
|
||
]
|
||
}]
|
||
};
|
||
pieChart.setOption(pieOption);
|
||
requestAnimationFrame(() => pieChart.resize());
|
||
}
|
||
}
|
||
// pH 直方图
|
||
else if (tabName === 'ph') {
|
||
const chartArea = document.getElementById('chart-ph-hist');
|
||
if (chartArea) chartArea.classList.add('active');
|
||
|
||
const totalCount = data.reduce((sum, item) => sum + item.count, 0);
|
||
if (badge) badge.textContent = `Total count: ${totalCount}`;
|
||
|
||
// 初始化 ECharts 实例
|
||
if (window.echarts && !phChart) {
|
||
const dom = document.getElementById('chart-ph-hist');
|
||
if (dom) {
|
||
phChart = echarts.init(dom);
|
||
window.addEventListener('resize', () => phChart?.resize());
|
||
}
|
||
}
|
||
|
||
if (phChart) {
|
||
const phOption = {
|
||
tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
|
||
grid: {
|
||
left: '3%',
|
||
right: '4%',
|
||
bottom: '15%',
|
||
top: '8%',
|
||
containLabel: true
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
data: data.map(item => item.x),
|
||
name: 'pH',
|
||
nameLocation: 'middle',
|
||
nameGap: 40
|
||
},
|
||
yAxis: { type: 'value', name: 'Count' },
|
||
series: [{
|
||
type: 'bar',
|
||
data: data.map(item => item.count),
|
||
itemStyle: { color: '#669999', borderRadius: [4, 4, 0, 0] }
|
||
}]
|
||
};
|
||
phChart.setOption(phOption);
|
||
requestAnimationFrame(() => phChart.resize());
|
||
}
|
||
}
|
||
// 温度直方图
|
||
else if (tabName === 'temperature') {
|
||
const chartArea = document.getElementById('chart-temp-hist');
|
||
if (chartArea) chartArea.classList.add('active');
|
||
|
||
const totalCount = data.reduce((sum, item) => sum + item.count, 0);
|
||
if (badge) badge.textContent = `Total count: ${totalCount}`;
|
||
|
||
// 初始化 ECharts 实例
|
||
if (window.echarts && !tempChart) {
|
||
const dom = document.getElementById('chart-temp-hist');
|
||
if (dom) {
|
||
tempChart = echarts.init(dom);
|
||
window.addEventListener('resize', () => tempChart?.resize());
|
||
}
|
||
}
|
||
|
||
if (tempChart) {
|
||
const tempOption = {
|
||
tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
|
||
grid: {
|
||
left: '3%',
|
||
right: '4%',
|
||
bottom: '18%',
|
||
top: '8%',
|
||
containLabel: true
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
data: data.map(item => item.x),
|
||
name: 'Temperature (°C)',
|
||
nameLocation: 'middle',
|
||
nameGap: 30
|
||
},
|
||
yAxis: { type: 'value', name: 'Count' },
|
||
series: [{
|
||
type: 'bar',
|
||
data: data.map(item => item.count),
|
||
itemStyle: { color: '#CCCC99', borderRadius: [4, 4, 0, 0] }
|
||
}]
|
||
};
|
||
tempChart.setOption(tempOption);
|
||
requestAnimationFrame(() => tempChart.resize());
|
||
}
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 初始化理化性质标签切换事件
|
||
*/
|
||
function initializePhyschemTabEvents() {
|
||
document.querySelectorAll('#physchem-tabs .taxonomy-tab-item').forEach(tab => {
|
||
tab.addEventListener('click', async (e) => {
|
||
if (e.target.classList.contains('active')) return;
|
||
|
||
document.querySelectorAll('#physchem-tabs .taxonomy-tab-item')
|
||
.forEach(t => t.classList.remove('active'));
|
||
e.target.classList.add('active');
|
||
|
||
const tabName = e.target.getAttribute('data-tab');
|
||
await updatePhyschemChart(tabName);
|
||
});
|
||
});
|
||
}
|
||
|
||
/**
|
||
* 更新营养图表
|
||
*/
|
||
async function updateNutritionChart() {
|
||
const badge = document.getElementById('nutrition-total-badge');
|
||
const content = document.getElementById('nutrition-chart-content');
|
||
|
||
// 显示加载状态
|
||
if (badge) badge.textContent = 'Loading...';
|
||
if (content) content.innerHTML = '<div style="text-align: center; padding: 50px; color: #666;">Loading data...</div>';
|
||
|
||
// 加载数据（如果未缓存）
|
||
if (nutritionData.length === 0) {
|
||
await loadNutritionData();
|
||
}
|
||
|
||
const data = nutritionData || [];
|
||
const total = data.length;
|
||
|
||
// 更新总数显示
|
||
if (badge) badge.textContent = `Total nutrients: ${total}`;
|
||
|
||
// 处理无数据情况
|
||
if (!data || !Array.isArray(data) || data.length === 0) {
|
||
if (content) content.innerHTML = '<div style="text-align: center; padding: 50px; color: #666;">No data available</div>';
|
||
return;
|
||
}
|
||
|
||
const maxValue = data.length > 0 && data.every(item => item && typeof item.value !== 'undefined')
|
||
? Math.max(...data.map(item => item.value || 0)) * 1.1
|
||
: 1;
|
||
|
||
// 渲染图表内容
|
||
if (content) {
|
||
const availableWidth = Math.max(content.offsetWidth - 220, 600);
|
||
|
||
content.innerHTML = data.map(item => {
|
||
const percentage = (item.value / maxValue) * 100;
|
||
const lineWidth = Math.max(1, (percentage / 100) * availableWidth);
|
||
|
||
return `
|
||
<div class="nutrition-chart-row">
|
||
<div class="nutrition-taxa-name" title="${item.name}">${item.name}</div>
|
||
<div class="nutrition-chart-area">
|
||
<div class="nutrition-chart-line" style="width: ${lineWidth}px;"></div>
|
||
<div class="nutrition-chart-dot"
|
||
style="left: ${lineWidth}px;"
|
||
data-name="${item.name}"
|
||
data-value="${item.value.toLocaleString()}"></div>
|
||
</div>
|
||
</div>
|
||
`;
|
||
}).join('');
|
||
}
|
||
|
||
requestAnimationFrame(() => {
|
||
generateNutritionGridLines();
|
||
bindNutritionTooltipEvents();
|
||
});
|
||
}
|
||
|
||
/**
|
||
* 生成营养图表网格线
|
||
*/
|
||
function generateNutritionGridLines() {
|
||
const gridLines = document.getElementById('nutrition-grid-lines');
|
||
const xAxisLabels = document.getElementById('nutrition-x-axis-labels');
|
||
|
||
if (!gridLines || !xAxisLabels) return;
|
||
|
||
const firstChartArea = document.querySelector('.nutrition-chart-area');
|
||
const chartWidth = firstChartArea ? firstChartArea.offsetWidth : 600;
|
||
|
||
const maxNutritionValue = nutritionData.length > 0
|
||
? Math.max(...nutritionData.map(item => item.value)) * 1.001
|
||
: 100;
|
||
const maxVal = Math.round(maxNutritionValue);
|
||
|
||
gridLines.innerHTML = '';
|
||
xAxisLabels.innerHTML = '';
|
||
|
||
const gridCount = 5;
|
||
const rawStep = maxVal / gridCount;
|
||
const magnitude = Math.pow(10, Math.floor(Math.log10(rawStep)));
|
||
const normalizedStep = rawStep / magnitude;
|
||
|
||
// 动态计算步长，确保坐标轴标签美观
|
||
let multiplier;
|
||
if (normalizedStep <= 1) multiplier = 1;
|
||
else if (normalizedStep <= 2) multiplier = 2;
|
||
else if (normalizedStep <= 5) multiplier = 5;
|
||
else multiplier = 10;
|
||
|
||
let step = multiplier * magnitude;
|
||
const minStep = Math.pow(10, Math.floor(Math.log10(maxVal)) - 1);
|
||
if (step < minStep) step = minStep;
|
||
|
||
// 生成网格线和标签
|
||
for (let i = 0; i <= gridCount; i++) {
|
||
const position = (i / gridCount) * chartWidth;
|
||
|
||
const gridLine = document.createElement('div');
|
||
gridLine.className = 'nutrition-grid-line';
|
||
gridLine.style.left = `${position}px`;
|
||
gridLines.appendChild(gridLine);
|
||
|
||
const label = document.createElement('span');
|
||
label.textContent = (i * step).toLocaleString();
|
||
xAxisLabels.appendChild(label);
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 绑定营养图表提示框事件
|
||
*/
|
||
function bindNutritionTooltipEvents() {
|
||
const dots = document.querySelectorAll('.nutrition-chart-dot');
|
||
const tooltip = document.getElementById('nutrition-tooltip');
|
||
|
||
if (!tooltip) return;
|
||
|
||
dots.forEach(dot => {
|
||
dot.addEventListener('mouseenter', (e) => {
|
||
const name = e.target.getAttribute('data-name');
|
||
const value = e.target.getAttribute('data-value');
|
||
tooltip.innerHTML = `${name}<br>Frequency: ${value}`;
|
||
tooltip.style.display = 'block';
|
||
});
|
||
|
||
dot.addEventListener('mousemove', (e) => {
|
||
tooltip.style.left = `${e.pageX + 10}px`;
|
||
tooltip.style.top = `${e.pageY - 40}px`;
|
||
});
|
||
|
||
dot.addEventListener('mouseleave', () => {
|
||
tooltip.style.display = 'none';
|
||
});
|
||
});
|
||
}
|
||
|
||
/**
|
||
* 显示错误通知
|
||
* @param {string} message - 错误信息
|
||
*/
|
||
function showErrorNotification(message) {
|
||
// 检查是否已有错误通知元素
|
||
let notification = document.getElementById('error-notification');
|
||
|
||
if (!notification) {
|
||
// 创建错误通知元素
|
||
notification = document.createElement('div');
|
||
notification.id = 'error-notification';
|
||
notification.style.cssText = `
|
||
position: fixed;
|
||
top: 20px;
|
||
right: 20px;
|
||
padding: 15px 20px;
|
||
background-color: #e74c3c;
|
||
color: white;
|
||
border-radius: 4px;
|
||
box-shadow: 0 2px 10px rgba(0,0,0,0.2);
|
||
z-index: 1000;
|
||
transition: opacity 0.3s ease;
|
||
`;
|
||
document.body.appendChild(notification);
|
||
}
|
||
|
||
// 设置错误信息并显示
|
||
notification.textContent = message;
|
||
notification.style.opacity = '1';
|
||
|
||
// 3秒后自动隐藏
|
||
setTimeout(() => {
|
||
notification.style.opacity = '0';
|
||
}, 3000);
|
||
}
|
||
|
||
// --- 初始化函数 ---
|
||
|
||
/**
|
||
* 初始化所有图表和事件
|
||
*/
|
||
async function initializeAll() {
|
||
try {
|
||
await Promise.all([
|
||
initializeTaxonomy(),
|
||
(async () => {
|
||
initializePhyschemTabEvents();
|
||
await updatePhyschemChart('o2');
|
||
})(),
|
||
updateNutritionChart()
|
||
]);
|
||
} catch (error) {
|
||
console.error('初始化失败:', error);
|
||
showErrorNotification('页面初始化失败，请刷新页面重试');
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 执行 banner 搜索
|
||
*/
|
||
function performBannerSearch() {
|
||
const searchInput = document.getElementById('banner-search-input');
|
||
if (!searchInput) {
|
||
showErrorNotification('搜索框未找到');
|
||
return;
|
||
}
|
||
|
||
const searchValue = searchInput.value.trim();
|
||
if (searchValue) {
|
||
const encodedValue = encodeURIComponent(searchValue);
|
||
window.location.href = `/Search_result.html?microbial=${encodedValue}`;
|
||
} else {
|
||
alert('Please enter a microbial name to search.');
|
||
}
|
||
}
|
||
|
||
// --- 事件监听 ---
|
||
|
||
document.addEventListener('DOMContentLoaded', () => {
|
||
// 初始化仪表盘逻辑
|
||
initializeAll();
|
||
|
||
// 初始化搜索逻辑
|
||
const searchBtn = document.getElementById('banner-search-btn');
|
||
if (searchBtn) {
|
||
searchBtn.addEventListener('click', performBannerSearch);
|
||
}
|
||
|
||
// 为搜索框添加回车事件
|
||
const searchInput = document.getElementById('banner-search-input');
|
||
if (searchInput) {
|
||
searchInput.addEventListener('keypress', (e) => {
|
||
if (e.key === 'Enter') {
|
||
performBannerSearch();
|
||
}
|
||
});
|
||
}
|
||
}); |