目录结构
效果图
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>项目结题报告</title>
<style lang="scss">
::-webkit-scrollbar {
width: 6px;
height: 6px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background: #d4d4d4;
border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
background: #adadad;
}
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
.common-layout {
width: 100%;
height: 100%;
/* overflow: hidden; */
.header {
height: 70px;
background-color: #083a55;
color: #fff;
box-shadow: 0px 0px 10px 2px #0000003d;
z-index: 1;
padding: 0 20px;
display: flex;
align-items: center;
justify-content: space-between;
.title {
font-weight: bold;
font-size: 28px;
}
.header-content {
.common- {
height: 70%;
font-size: 18px;
border-right: 1px solid rgb(70, 70, 70);
margin-left: 20px;
padding-right: 20px;
cursor: pointer;
.current {
outline: none;
font-size: 16px;
}
.iconfont {
padding-right: 10px;
color: #ffffff;
}
&:last-child {
border: 0;
}
}
}
}
.el-container {
height: calc(100% - 70px);
background-color: #f9f6ee;
display: flex;
.aside {
margin: 10px 10px;
width: 350px;
position: relative;
isolation: isolate;
background-color: #ffffff;
box-shadow: 1px 1px 5px 0px rgba(89, 89, 89, 0.2784313725);
.nav {
height: 100%;
padding: 25px 20px;
box-sizing: border-box;
font-size: 15px;
text-align: left;
p {
margin-top: 0;
font-size: 18px;
font-weight: bold;
}
.list_item {
margin: 0 0 0 25px;
a {
padding: 4px 0;
display: inline-block;
text-decoration: none;
font-size: 15px;
color: #5d5d5d;
&:hover {
color: #409eff;
}
}
}
.nav_item {
padding: 5px 0;
&:hover {
cursor: pointer;
color: rgb(0, 140, 255);
}
.active {
color: #008cff
}
}
.active {
color: #008cff !important;
}
}
}
.main {
margin: 10px 10px 10px 0;
width: calc(100% - 370px);
height: calc(100% - 20px);
background-color: #ffffff;
box-shadow: 1px 1px 5px 0px rgba(89, 89, 89, 0.2784313725);
text-align: left;
padding: 0;
.ref_container {
height: 100%;
overflow-y: auto;
}
.content_cover {
width: 100%;
height: calc(100vh - 90px);
display: flex;
margin-bottom: 100px;
box-shadow: 0px 3px 10px 5px #ededed70;
padding: 0 0 0 20px;
box-sizing: border-box;
.before {
width: 55%;
display: flex;
flex-direction: column;
.logo {
height: 35%;
img {
height: 70%;
padding-top: 20px;
}
}
.title {
height: 63%;
h1 {
color: #616161;
font-weight: 600;
}
h4 {
margin: 10px 20px;
color: #4e4e4e;
font-weight: 500;
}
}
.footer {
height: 8%;
p {
margin: 5px 20px;
font-size: 16px;
}
}
}
.behind {
width: 45%;
height: 100%;
overflow: hidden;
img {
height: 100%;
}
}
}
.content {
padding: 0 20px;
}
.content_first {
text-align: left;
.cont {
font-size: 15px;
}
.tips {
margin: 15px 0;
color: cadetblue;
}
.tip {
margin: 0 0 0 10px;
font-size: 14px;
&:first-child {
margin: 0;
}
}
h6 {
margin: 10px;
text-align: center;
}
.echarts {
display: flex;
justify-content: space-between;
margin: 40px 5px 0;
box-shadow: 0px 0px 15px 2px #e0e0e057;
.echart {
width: calc(100% - 150px);
}
.echart2 {
display: flex;
@media screen and (min-width: 1851px) {
iframe {
width: 45%;
max-width: 700px;
}
}
@media screen and (max-width: 1850px) {
flex-direction: column;
iframe {
width: 100%;
max-width: 700px;
}
}
}
.echarts_nav {
width: 300px;
margin-left: 5px;
padding: 15px;
font-size: 16px;
box-sizing: border-box;
border-right: 1px solid #e1e1e1;
.echarts_nav_item {
margin: 10px 0;
cursor: pointer;
&:hover {
color: #008cff
}
}
.item_active {
color: #008cff
}
}
}
:deep .my-table-header {
background-color: #647687;
color: white;
}
}
.table7 {
height: 420px;
overflow-y: auto;
}
.table_container {
height: 420px;
overflow-y: auto;
}
table {
width: 100%;
border-collapse: collapse;
thead {
position: sticky;
top: 0;
background: #647687;
z-index: 100;
color: white;
font-size: 14px;
z-index: 100;
th {
padding: 8px 12px;
border-right: 2px solid #ebeef5;
&:last-child {
border: 0;
}
}
}
tbody {
border: 1px solid #ebeef5
}
tr {
border-bottom: 1px solid #ebeef5;
&:nth-of-type(even) {
background-color: #fafafa;
}
&:hover {
background-color: #cacfdd3d;
}
}
td {
font-size: 14px;
padding: 8px 12px;
border-right: 1px solid #ebeef5;
}
}
}
select {
align-items: center;
border-radius: 5px;
box-sizing: border-box;
cursor: pointer;
display: flex;
font-size: 14px;
gap: 6px;
line-height: 24px;
min-height: 32px;
padding: 4px 12px;
position: relative;
text-align: left;
outline: none;
}
}
}
.print {
display: none;
}
@media print {
.print {
display: contents;
}
@page {
margin: 20px 10px;
}
body {
overflow: visible;
}
.table_container {
height: auto !important;
overflow-y: auto;
}
.el-container {
height: auto !important;
}
.no_print {
display: none !important;
}
.content_cover {
box-shadow: unset !important;
margin-bottom: 0 !important;
height: calc(100vh - 20px) !important;
}
.main {
width: 100% !important;
height: 100% !important;
box-shadow: unset !important;
}
.echart2 {
display: flex;
flex-direction: column !important;
iframe {
width: 100% !important;
}
}
.ref_container {
overflow-y: unset !important;
}
table {
border-collapse: collapse;
border: 2px solid #ebeef5;
tr {
page-break-inside: avoid;
break-inside: avoid;
border-top: 2px solid #ebeef5;
border-bottom: 2px solid #ebeef5;
}
th {
color: #363636 !important;
border-right: 0 !important;
}
}
.table_7 {
/* page-break-before: always; */
}
.table7 {
th,
td {
font-size: 12px !important;
padding: 8px 9px !important;
}
}
.echarts {
justify-content: center !important;
box-shadow: unset !important;
margin: 0 !important;
.echart {
width: 100% !important;
min-width: 100% !important;
}
}
}
</style>
</head>
<body>
<div class="common-layout">
<div class="header no_print">
<div class="title">***报告</div>
<div class="header-content">
<div class="common-">
<span class="iconfont icon-human1"></span><span>客户单位：XX科学院</span>
</div>
</div>
</div>
<div class="el-container">
<div class="aside no_print">
<div class="nav">
<p>目录</p>
<div id="navList"></div>
</div>
</div>
<div class="main">
<div class="ref_container" id="content">
<div>
<div class="content_cover">
<div class="before">
<div class="logo"><img src="image/1.png"></div>
<div class="title">
<h1>项目结题报告</h1>
<h4>测序报告</h4>
<h4>客户单位：XX科学院</h4>
</div>
<div class="footer">
<p>***有限公司</p>
<p>服务热线：***</p>
</div>
</div>
<div class="behind"><img src="image/2.png" alt=""></div>
</div>
<div class="content" style="page-break-after: always;">
<div class="content_first" id="id1">
<h3>1.项目概况</h3>
<img src="image/report/1.png" alt="" title="">
</div>
<div class="content_first">
<h3 id="id2">2.流程说明</h3>
<div class="content_second">
<h4 id="id21">2.1.实验流程</h4>
<div>
<img src="image/report/2.1.png" alt="">
<div id="id211">
<h5>2.1.1.aa</h5>
<p class="cont">************</p>
</div>
<div id="id212">
<h5>2.1.2.bb</h5>
<div class="cont">************
</div>
</div>
<div id="id213">
<h5>2.1.3.cc</h5>
<div class="cont">************************************************</div>
</div>
<div id="id214">
<h5>2.1.4.dd</h5>
<p class="cont">************************************************************************************************</p>
</div>
<div id="id215">
<h5>2.1.5.ee</h5>
<div class="cont">************************************************************************************************
</div>
</div>
</div>
</div>
<div class="content_second" id="id22">
<h4>2.2.信息分析流程</h4>
<p class="cont">************************************************************************************************
</p>
<img src="image/report/2.2.png" alt="">
</div>
</div>
<div class="content_first">
<h3 id="id3">3.数据质控</h3>
<div class="content_second">
<div id="id31">
<h4>3.1 测序数据统计</h4>
<div>
<p class="cont">结果见表1。</p>
<h6 class="table_1">表1 ***</h6>
<div class="table_container table1">
<table>
<thead class="thead">
<tr>
<th>Sample</th>
<th>Raw reads</th>
<th>Raw bases</th>
<th>Q30(%)</th>
<th>GC(%)</th>
<th>Duplication(%)</th>
</tr>
</thead>
<tbody class="no_print">
<tr>
<td>S1</td>
<td>2</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
</tbody>
</table>
</div>
<div class="tips">
<p class="tip">注：</p>
<p class="tip">************</p>
<p class="tip">************</p>
<p class="tip">************</p>
<p class="tip">************</p>
<p class="tip">************</p>
<p class="tip">************</p>
</div>
</div>
</div>
<h4 id="id32">3.2.质量控制</h4>
<div id="id321">
<h5>3.2.1.质量分布</h5>
<div>
<div class="cont">************结果见图1。</div>
<div class="echarts">
<div class="no_print" style="font-size: 16px;margin: 40px 0 0 20px;">
<select name="cars" id="select1"
onchange="selectChange('select1','iframe1','fig1_quality_boxplot')">
</select>
</div>
<div class="echart">
<iframe id="iframe1"
src="public/fig1_quality_boxplot/9-16_quality_boxplot.html"
width="100%" height="600px" scrolling="no" frameborder="0">
</iframe>
</div>
</div>
<h6 class="h62">图1 </h6>
<div class="tips">
<p class="tip">注：</p>
<p class="tip">************</p>
<p class="tip">************</p>
<p class="tip">************</p>
</div>
</div>
</div>
<div id="id322">
<h5>3.2.2.Base Content分布</h5>
<div>
<div class="cont">************</div>
<div class="echarts" id="echart2">
<div class="no_print" style="font-size: 16px;margin: 40px 0 0 20px;">
<select id="select2" name="cars"
onchange="selectChange2('select2','fig2_base_content')">
<option value="16-122" selected>16-122</option>
<option value="16-146">16-146</option>
<option value="16-161">16-161</option>
<option value="16-176">16-176</option>
<option value="16-182">16-182</option>
<option value="16-183">16-183</option>
<option value="16-200">16-200</option>
<option value="16-201">16-201</option>
<option value="16F">16F</option>
<option value="16M">16M</option>
</select>
</div>
<div class="echart echart2">
<iframe id="iframe21"
src="public/fig2_base_content/16-122_read1_base_content.html"
width="100%" height="600px" scrolling="no" frameborder="0">
</iframe>
<iframe id="iframe22"
src="public/fig2_base_content/16-122_read2_base_content.html"
width="100%" height="600px" scrolling="no" frameborder="0">
</iframe>
</div>
</div>
<h6 class="h62">图2 </h6>
<div class="tips">
<p class="tip">注：</p>
<p class="tip">************，</p>
<p class="tip">************</p>
<p class="tip">************</p>
</div>
</div>
</div>
<div id="id33">
<h4>3.3.过滤数据统计</h4>
<div>
<div class="cont">************</div>
<p class="cont">1)************</p>
<p class="cont">2)************</p>
<div class="cont">************数据处理的步骤如下：
</div>
<p class="cont">1)************</p>
<p class="cont">2)************</p>
<p class="cont">3)************
</p>
<div class="cont">数据过滤的基本情况见表2。</div>
<h6 class="h61">表2 </h6>
<div class="table_container table2">
<table>
<thead>
<tr>
<th>Sample</th>
<th>Clean reads</th>
<th>Clean bases</th>
<th>Clean reads(%)</th>
<th>Clean bases(%)</th>
</tr>
</thead>
<tbody class="no_print">
<tr>
<td>S1</td>
<td>70367889</td>
<td>5595586</td>
<td>0.838</td>
<td>1</td>
</tr>
<tr>
<td>S1</td>
<td>70367889</td>
<td>5595586</td>
<td>0.838</td>
<td>1</td>
</tr>
</tbody>
</table>
</div>
<div class="tips">
<p class="tip">注：</p>
<p class="tip">************，</p>
<p class="tip">************，</p>
<p class="tip">************，</p>
<p class="tip">************，</p>
<p class="tip">************</p>
</div>
<div>
<div class="echarts">
<div class="no_print"
style="font-size: 16px;margin: 40px 0 0 20px;">
<select name="cars" id="select3"
onchange="selectChange('select3','iframe3','fig3_piecharts')">
</select>
</div>
<div class="echart">
<iframe id="iframe3" src="public/fig3_piecharts/9-3_pie.html"
width="100%" height="600px" scrolling="no" frameborder="0">
</iframe>
</div>
</div>
</div>
<h6 class="h62">图3 数据过滤统计</h6>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
</script>
</body>
<script>
let navList = [
{
'id': 'id1',
'title': '1. 项目概况'
},
{
'id': 'id2',
'title': '2. 流程说明',
'children': [
{
'id': 'id21',
'title': '2.1 实验流程',
'children': [
{
'id': 'id211',
'title': '2.1.1 aa'
},
{
'id': 'id212',
'title': '2.1.2 bb'
},
{
'id': 'id213',
'title': '2.1.3 cc'
},
{
'id': 'id214',
'title': '2.1.4 dd'
},
{
'id': 'id215',
'title': '2.1.5 ee'
}
]
},
{
'id': 'id22',
'title': '2.2 信息分析流程'
}
]
},
{
'id': 'id3',
'title': '3. 数据质控',
'children': [
{
'id': 'id31',
'title': '3.1 测序数据统计'
},
{
'id': 'id32',
'title': '3.2 质量控制',
'children': [
{
'id': 'id321',
'title': '3.2.1 质量分布'
},
{
'id': 'id322',
'title': '3.2.2 Base Content分布'
}
]
},
{
'id': 'id33',
'title': '3.3 过滤数据统计'
}
]
}
]
//生成目录
const titles = []
function nav(list, id) {
let divElement = document.getElementById(id);
list.forEach((item, index) => {
let div = document.createElement('div');
let a = document.createElement('a');
a.textContent = item.title;
a.href = '#' + item.id;
a.className = 'box';
div.id = item.id + '_';
div.className = 'list_item';
divElement.appendChild(div);
div.appendChild(a)
titles.push(item)
if (item.children) {
nav(item.children, div.id)
}
});
}
//下拉选择改变后 iframe中的图改变
function selectChange(id, iframeId, url) {
let selectedValue = document.getElementById(id).value
document.getElementById(iframeId).src = 'public/' + url + '/' + selectedValue + '.html';
}
function selectChange2(id, url) {
let selectedValue = document.getElementById(id).value
document.getElementById('iframe21').src = 'public/' + url + '/' + selectedValue + '_read1_base_content.html';
document.getElementById('iframe22').src = 'public/' + url + '/' + selectedValue + '_read2_base_content.html';
}
//给每个下拉选择赋值
function ceratdOption() {
let options = [
{ value: '9-3', text: '9-3' },
{ value: '9-5', text: '9-5' },
{ value: '9-6', text: '9-6' },
{ value: '9-16', text: '9-16' },
{ value: '9-20', text: '9-20' },
{ value: '9-21', text: '9-21' },
{ value: '9-26', text: '9-26' },
{ value: '9-51', text: '9-51' },
{ value: '9-55', text: '9-55' },
{ value: '9-56', text: '9-56' }
]
options.forEach(function (option, index) {
document.getElementById('select1').add(new Option(option.text + '_quality_boxplot', option.value + '_quality_boxplot'))
document.getElementById('select3').add(new Option(option.text + '_pie', option.value + '_pie'))
document.getElementById('select4').add(new Option(option.text + '_coverage', option.value + '_coverage'))
document.getElementById('select5').add(new Option(option.text + '_snp_anno_pie', option.value + '_snp_anno_pie'))
document.getElementById('select6').add(new Option(option.text + '_indel_anno_pie', option.value + '_indel_anno_pie'))
});
}
//点击菜单高亮
const menu = document.getElementById('navList')
menu.addEventListener('click', (e) => {
highlight(e.target)
})
// 设置当前菜单高亮
function highlight(id) {
document.querySelectorAll('.box').forEach(a =>
a.classList.remove('active')
);
// 如果传递的是一个元素
if (id instanceof HTMLElement) {
id.classList.add('active')
return
}
if (id.startsWith('#')) {
id = id.substring(1)
}
document.querySelector(`a[href="#${id}"]`).classList.add('active')
}
// 锚点滚动 菜单高亮
const handScroll = () => {
for (let i = 0; i < titles.length; i++) {
// 获取锚点对应内容元素的位置
const rect = document.getElementById(titles[i].id).getBoundingClientRect()
// rect.top 当前元素距离页面顶部的距离 rect.bottom 当前元素底部距离页面顶部的距离
if ((rect.top >= 70 && rect.top < 100) || (rect.bottom > 90 && rect.bottom < 120)) {
highlight(`#${titles[i].id}`)
break;
}
}
}
const contentele = document.getElementById('content')
contentele.addEventListener('scroll', handScroll)
window.onload = function () {
nav(navList, 'navList'); // 页面加载完成后调用函数
console.log('onload', titles)
ceratdOption()
}
</script>
</html>
![[FE] React 初窥门径（五）：React 组件的加载过程（commit 阶段）](https://img-blog.csdnimg.cn/direct/67c64049147741939b85489caefbb597.png)