393 lines
14 KiB
HTML
393 lines
14 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>IDMCC : Intelligent Design of Microbial Culture Conditions</title>
|
|
<link rel="icon" href="/public/assets/images/logo.png" type="image/png">
|
|
<link rel="stylesheet" href="/public/css/base.css">
|
|
<link rel="stylesheet" href="/public/css/Search_result.css">
|
|
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
|
|
<link rel="stylesheet" href="/public/css/layout.css">
|
|
<link rel="stylesheet" href="/public/assets/iconfont/iconfont.css">
|
|
<style>
|
|
/* 统一的基础样式 */
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.header .logo .title p {
|
|
color: #B3B3B3;
|
|
}
|
|
|
|
/* 统一的自适应设计 */
|
|
|
|
/* 大屏幕 (1400px+) */
|
|
@media (min-width: 1400px) {
|
|
.wrapper {
|
|
max-width: 1400px;
|
|
}
|
|
}
|
|
|
|
/* 中等屏幕 (992px - 1399px) */
|
|
@media (max-width: 1399px) {
|
|
.wrapper {
|
|
width: 95%;
|
|
}
|
|
}
|
|
|
|
/* 平板 (768px - 991px) */
|
|
@media (max-width: 991px) {
|
|
.wrapper {
|
|
width: 98%;
|
|
}
|
|
|
|
.statistics {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
}
|
|
|
|
/* 移动设备 (最大768px) */
|
|
@media (max-width: 768px) {
|
|
.wrapper {
|
|
width: 100%;
|
|
padding: 0 10px;
|
|
}
|
|
|
|
.content {
|
|
padding: 15px 0;
|
|
}
|
|
|
|
.statistics {
|
|
grid-template-columns: 1fr;
|
|
gap: 15px;
|
|
}
|
|
|
|
.related-table {
|
|
font-size: 12px;
|
|
overflow-x: auto;
|
|
display: block;
|
|
}
|
|
|
|
.related-table thead,
|
|
.related-table tbody,
|
|
.related-table tr {
|
|
display: block;
|
|
}
|
|
|
|
.related-table th,
|
|
.related-table td {
|
|
display: block;
|
|
text-align: left;
|
|
padding: 8px;
|
|
}
|
|
|
|
.related-table th {
|
|
border-bottom: 2px solid #ddd;
|
|
}
|
|
}
|
|
|
|
/* 小屏幕移动设备 (最大480px) */
|
|
@media (max-width: 480px) {
|
|
.wrapper {
|
|
padding: 0 5px;
|
|
}
|
|
|
|
.content {
|
|
padding: 10px 0;
|
|
}
|
|
|
|
.statistics {
|
|
gap: 10px;
|
|
}
|
|
}
|
|
|
|
/* 超小屏幕 (最大360px) */
|
|
@media (max-width: 360px) {
|
|
.related-table {
|
|
font-size: 11px;
|
|
}
|
|
}
|
|
|
|
/* Table sort styles */
|
|
.related-table th {
|
|
cursor: pointer;
|
|
position: relative;
|
|
user-select: none;
|
|
transition: background-color 0.2s;
|
|
}
|
|
.related-table th:hover {
|
|
background-color: #f0f0f0;
|
|
}
|
|
.sort-icon {
|
|
display: inline-block;
|
|
width: 0;
|
|
height: 0;
|
|
margin-left: 5px;
|
|
vertical-align: middle;
|
|
border-left: 4px solid transparent;
|
|
border-right: 4px solid transparent;
|
|
}
|
|
.sort-icon.asc {
|
|
border-bottom: 4px solid #333;
|
|
border-top: none;
|
|
}
|
|
.sort-icon.desc {
|
|
border-top: 4px solid #333;
|
|
border-bottom: none;
|
|
}
|
|
|
|
/* --- CSS Grid Layout for Statistics Charts (Replaces Flexbox) --- */
|
|
/* Using Grid fixes the issue where ECharts init before Flexbox expansion completes */
|
|
.statistics {
|
|
display: grid;
|
|
width: 100%;
|
|
/* Create 4 equal columns. 1fr = 1 fraction of available space */
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 15px;
|
|
padding: 0 10px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/* Chart container styles */
|
|
.term {
|
|
width: 100%; /* Fill the grid cell completely */
|
|
height: 280px;
|
|
margin-bottom: 20px;
|
|
box-sizing: border-box;
|
|
background-color: #fff;
|
|
display: flex;
|
|
flex-direction: column;
|
|
/* Removed flex: 1 and min-width logic as Grid handles sizing */
|
|
}
|
|
|
|
.term .type {
|
|
flex-shrink: 0;
|
|
padding: 8px 0;
|
|
}
|
|
|
|
/* Ensure chart canvas fills the container minus the header */
|
|
.chart-pH, .chart-O2, .chart-temp, .chart-nutrition {
|
|
width: 100% !important;
|
|
flex: 1;
|
|
height: auto !important;
|
|
min-height: 0;
|
|
}
|
|
|
|
/* Updated Footer Layout */
|
|
.table-footer {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 15px 20px;
|
|
background-color: #f8f9fa;
|
|
border-top: 1px solid #dee2e6;
|
|
flex-wrap: wrap;
|
|
gap: 15px;
|
|
}
|
|
|
|
.download-section {
|
|
margin-left: auto;
|
|
}
|
|
|
|
.download-btn {
|
|
background: #5B9BB0;
|
|
color: white;
|
|
border: none;
|
|
padding: 8px 16px;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.download-btn:hover {
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 4px 8px rgba(91, 155, 176, 0.3);
|
|
background-color: #4a8a9e;
|
|
}
|
|
|
|
/* Header Layout */
|
|
.related-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
/* Icon Font Style */
|
|
.iconfont.icon-yingyangbaojian {
|
|
font-size: 24px;
|
|
color: #2E5A61;
|
|
transition: color 0.3s ease;
|
|
}
|
|
|
|
.related-table tr:hover .iconfont.icon-yingyangbaojian {
|
|
color: #5B9BB0;
|
|
}
|
|
|
|
/* --- Responsive Grid Adjustments --- */
|
|
@media (max-width: 1200px) {
|
|
.statistics {
|
|
/* Switch to 2 columns on medium screens */
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.statistics {
|
|
/* Switch to 1 column on mobile screens */
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- 头部 -->
|
|
<div id="header-placeholder"></div>
|
|
<!-- 内容 -->
|
|
<div class="content">
|
|
<div class="wrapper">
|
|
<!-- 加载状态 -->
|
|
<div id="loading-state" style="display: none; text-align: center; padding: 50px;">
|
|
<div class="loading-spinner"></div>
|
|
<p>Loading detailed microbial information...</p>
|
|
</div>
|
|
|
|
<!-- 错误消息 -->
|
|
<div id="error-message" style="display: none;"></div>
|
|
|
|
<!-- 详细信息内容 -->
|
|
<div class="detail-content" id="detail-content">
|
|
<div class="detail-header">
|
|
<button class="goback" onclick="goBack()">Go back</button>
|
|
<h1 id="microbial-title">Microbial detail information</h1>
|
|
</div>
|
|
|
|
<div class="target-species">
|
|
<div class="citation-card">
|
|
<div class="citation-banner">
|
|
<span>Culture conditions</span>
|
|
</div>
|
|
</div>
|
|
<!-- 微生物基本信息 -->
|
|
<div class="mic_info">
|
|
<!-- 动态内容 -->
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 统计信息 (Placed ABOVE table per request) -->
|
|
<div class="related_info">
|
|
<div class="citation-card">
|
|
<div class="citation-banner">
|
|
<span>Related species cultured data statistics</span>
|
|
</div>
|
|
</div>
|
|
<div class="statistics">
|
|
<!-- Chart pH - 第一个 -->
|
|
<div class="term">
|
|
<div class="type">
|
|
<span>pH</span>
|
|
</div>
|
|
<div class="chart-pH" id="ph-chart"></div>
|
|
</div>
|
|
|
|
<!-- Chart O2 - 第二个 -->
|
|
<div class="term">
|
|
<div class="type">
|
|
<span>O2 requirement</span>
|
|
</div>
|
|
<div class="chart-O2" id="o2-chart"></div>
|
|
</div>
|
|
|
|
<!-- Chart Temperature - 第三个 -->
|
|
<div class="term">
|
|
<div class="type">
|
|
<span>temperature</span>
|
|
</div>
|
|
<div class="chart-temp" id="temperature-chart"></div>
|
|
</div>
|
|
|
|
<!-- Chart Nutrition - 第四个 -->
|
|
<div class="term">
|
|
<div class="type">
|
|
<span>nutrition</span>
|
|
</div>
|
|
<div class="chart-nutrition" id="nutrition-chart">
|
|
<!-- 营养物质图表内容 -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 近缘物种 (Table moved BELOW charts) -->
|
|
<div class="related_info">
|
|
<div class="related-header">
|
|
<div class="citation-card" style="margin-bottom: 0; flex: 0 auto;">
|
|
<div class="citation-banner">
|
|
<span>Related species data</span>
|
|
</div>
|
|
</div>
|
|
<div class="related-controls" style="margin-top: 0;">
|
|
<div class="taxonomy-selector">
|
|
<label for="taxonomy-level">Classification Level:</label>
|
|
<select id="taxonomy-level">
|
|
<option value="genus" selected>Genus</option>
|
|
<option value="family">Family</option>
|
|
<option value="order">Order</option>
|
|
<option value="class">Class</option>
|
|
<option value="phylum">Phylum</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="table-container">
|
|
<div class="related-table">
|
|
<!-- 动态表格内容 -->
|
|
</div>
|
|
<!-- 表格底部控制区 -->
|
|
<div class="table-footer">
|
|
<div class="left-controls">
|
|
<span id="showing-related-text">Showing 1 to 20 of 0 entries.</span>
|
|
<div class="rows-control">
|
|
<label>Rows per page</label>
|
|
<select name="related_per_page" id="related_per_page">
|
|
<option value="10">10</option>
|
|
<option value="20" selected>20</option>
|
|
<option value="50">50</option>
|
|
<option value="100">100</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="pagination">
|
|
<button id="related-prev-btn" class="page-btn">Previous</button>
|
|
<span id="related-page-numbers" class="page-numbers">
|
|
<button class="page-num active">1</button>
|
|
</span>
|
|
<button id="related-next-btn" class="page-btn">Next</button>
|
|
</div>
|
|
|
|
<div class="download-section">
|
|
<button id="download-related-btn" class="download-btn">
|
|
<i class="iconfont icon-download"></i>
|
|
Download CSV
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 底部 -->
|
|
<div id="footer-placeholder"></div>
|
|
<script src="/public/js/module-loader.js"></script>
|
|
<script src="/public/js/Search_results.js"></script>
|
|
</body>
|
|
</html> |