305 lines
12 KiB
HTML
305 lines
12 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<!-- 禁用缓存meta -->
|
|
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
|
|
<meta http-equiv="Pragma" content="no-cache" />
|
|
<meta http-equiv="Expires" content="0" />
|
|
<meta name="viewport"
|
|
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1, user-scalable=no" />
|
|
<title>区域检验数据中心</title>
|
|
<link rel="stylesheet" href="./css/icon.css?v=1.0" />
|
|
<link rel="stylesheet" href="./css/index.css?v=1.0" />
|
|
<link rel="stylesheet" href="./css/index2.css?v=1.0" />
|
|
<link rel="stylesheet" href="./css/public.css?v=1.0" />
|
|
</head>
|
|
|
|
<body>
|
|
<div class="bg">
|
|
<div class="title">区域检验数据中心</div>
|
|
<div class="container">
|
|
<div class="leftMain">
|
|
<div class="leftMain_middle">
|
|
<!-- 左侧上半：项目类别 -->
|
|
<div class="leftMain_middle_leftIn">
|
|
<h3>当月项目类别数量</h3>
|
|
<div class="left_mideele_top">
|
|
<ul id="xmMonthWrap"></ul>
|
|
</div>
|
|
<div class="biaoge">
|
|
<div id="chartProject" style="height: 100%;"></div>
|
|
</div>
|
|
<span class="border_bg_leftTop"></span>
|
|
<span class="border_bg_rightTop"></span>
|
|
<span class="border_bg_leftBottom"></span>
|
|
<span class="border_bg_rightBottom"></span>
|
|
</div>
|
|
<!-- 左侧下半：标本类别 -->
|
|
<div class="leftMain_middle_leftIn leftMain_middle_leftIn_zhe">
|
|
<h3>当月标本类别数量</h3>
|
|
<div class="left_mideele_top">
|
|
<ul id="bbMonthWrap"></ul>
|
|
</div>
|
|
<div class="biaoge">
|
|
<div id="chartSample" style="height: 100%;"></div>
|
|
</div>
|
|
<span class="border_bg_leftTop"></span>
|
|
<span class="border_bg_rightTop"></span>
|
|
<span class="border_bg_leftBottom"></span>
|
|
<span class="border_bg_rightBottom"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 右侧：委托机构项目占比 -->
|
|
<div class="rightMain">
|
|
<div class="rightMain_topIn">
|
|
<h3>委托机构当月项目占比</h3>
|
|
<div class="proportion">
|
|
<ul id="listDataWrap"></ul>
|
|
</div>
|
|
<span class="border_bg_leftTop"></span>
|
|
<span class="border_bg_rightTop"></span>
|
|
<span class="border_bg_leftBottom"></span>
|
|
<span class="border_bg_rightBottom"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script src="./js/echarts.min.js?v=1.0"></script>
|
|
<script>
|
|
// ECharts实例
|
|
let chartProjectIns = null;
|
|
let chartSampleIns = null;
|
|
|
|
|
|
const proData = [
|
|
{ name: '生化项目', num: 120 },
|
|
{ name: '免疫项目', num: 80 },
|
|
{ name: '临检', num: 60 },
|
|
{ name: '微生物', num: 40 },
|
|
{ name: '分子生物学', num: 40 },
|
|
{ name: '细胞学', num: 40 },
|
|
]
|
|
|
|
const bbData = [
|
|
{ name: '血清', num: 120 },
|
|
{ name: '全血', num: 83 },
|
|
{ name: '尿液', num: 120 },
|
|
{ name: '粪便', num: 64 },
|
|
]
|
|
// 项目类别 模拟数据
|
|
const mockProjectData = {
|
|
xAxis: ['1日', '2日', '3日', '4日', '5日', '6日', '7日', '8日', '9日', '10日', '11日', '12日', '13日', '14日', '15日', '16日', '17日', '18日', '19日', '20日', '21日', '22日', '23日', '24日', '25日', '26日', '27日', '28日', '29日', '30日', '31日'],
|
|
series: [
|
|
{ name: '生化项目', data: [120, 132, 101, 134, 90, 230, 210, 28, 872, 120, 132, 101, 134, 90, 230, 210] },
|
|
{ name: '免疫项目', data: [80, 92, 91, 114, 60, 120, 130, 282, 120, 132, 101, 134, 90, 230, 210] },
|
|
{ name: '临检', data: [60, 72, 81, 94, 85, 110, 95, 287, 120, 132, 101, 134, 90, 230, 210] },
|
|
{ name: '微生物', data: [40, 42, 51, 54, 45, 60, 55, 211, 120, 132, 101, 134, 90, 230, 210] },
|
|
{ name: '分子生物学', data: [40, 42, 51, 54, 45, 60, 55, 221, 120, 132, 101, 134, 90, 230, 210] },
|
|
{ name: '细胞学', data: [40, 42, 51, 54, 45, 60, 55, 221, 120, 132, 101, 134, 90, 230, 210] },
|
|
]
|
|
};
|
|
|
|
// 标本类别 模拟数据（数值、分类完全不同）
|
|
const mockSampleData = {
|
|
xAxis: ['1日', '2日', '3日', '4日', '5日', '6日', '7日', '8日', '9日', '10日', '11日', '12日', '13日', '14日', '15日', '16日', '17日', '18日', '19日', '20日', '21日', '22日', '23日', '24日', '25日', '26日', '27日', '28日', '29日', '30日', '31日'],
|
|
series: [
|
|
{ name: '血清', data: [320, 482, 391, 434, 390, 530, 410, 120, 130, 167, 98, 149, 208, 304, 408, 678, 359] },
|
|
{ name: '全血', data: [250, 332, 301, 254, 290, 430, 510, 120, 245, 156, 98, 149, 208, 604, 408, 778, 559] },
|
|
{ name: '尿液', data: [180, 232, 151, 234, 250, 320, 280, 120, 653, 245, 98, 149, 208, 304, 408, 558] },
|
|
{ name: '粪便', data: [60, 90, 70, 85, 98, 110, 95, 120, 130, 189, 245, 149, 208, 408, 558] }
|
|
]
|
|
};
|
|
|
|
// 3. 右侧项目占比列表
|
|
const mockListData = [
|
|
{ groupname: '肝功能', groupsum: 560, percentage: '38%' },
|
|
{ groupname: '肾功能', groupsum: 980, percentage: '29%' },
|
|
{ groupname: '性激素', groupsum: 620, percentage: '18%' },
|
|
{ groupname: '肿瘤标志物', groupsum: 500, percentage: '15%' },
|
|
];
|
|
|
|
// 图表配色数组
|
|
const colorArr = ['#0efdff', '#ff7f50', '#32cd32', '#6495ed', '#ff69b4', '#ffa500', '#ffd700', '#da70d6', '#c71585', '#00ffff', '#00ff7f', '#00ff00', '#7fff00', '#7fffd4', '#00ffff', '#00bfff', '#4169e1',];
|
|
|
|
// 渲染类别数量函数
|
|
function renderNumList(containerId, arr) {
|
|
const wrap = document.getElementById(containerId);
|
|
wrap.innerHTML = '';
|
|
arr.forEach(item => {
|
|
const li = document.createElement('li');
|
|
li.innerHTML = `
|
|
<div class="liIn">
|
|
<h3>${item.name}</h3>
|
|
<p class="shu"><span class="shu1">${item.num}</span></p>
|
|
</div>
|
|
`;
|
|
wrap.appendChild(li);
|
|
})
|
|
}
|
|
|
|
// 渲染右侧机构占比列表
|
|
function renderList() {
|
|
const wrap = document.getElementById('listDataWrap');
|
|
wrap.innerHTML = '';
|
|
mockListData.forEach(item => {
|
|
const li = document.createElement('li');
|
|
li.innerHTML = `
|
|
<div class="liIn">
|
|
<div class="liIn_left"><span class="zi" title="${item.groupname}">${item.groupname}</span></div>
|
|
<div class="liIn_line">
|
|
<div class="line_lineIn" style="width:${item.percentage}">
|
|
<div class="per">${item.percentage}</div>
|
|
</div>
|
|
</div>
|
|
<p class="num">${item.groupsum}</p>
|
|
<div class="clear"></div>
|
|
</div>
|
|
`;
|
|
wrap.appendChild(li);
|
|
})
|
|
}
|
|
|
|
// 折线图轮播变量
|
|
let lineTipTimer = null;
|
|
let lineCurrentIndex = -1;
|
|
const LINE_TIP_INTERVAL = 2500;
|
|
function startLineTipLoop() {
|
|
if (lineTipTimer) clearInterval(lineTipTimer);
|
|
lineCurrentIndex = -1;
|
|
lineTipTimer = setInterval(() => {
|
|
if (!chartProjectIns) return;
|
|
const opt = chartProjectIns.getOption();
|
|
const dataLen = opt.xAxis[0].data.length;
|
|
if (dataLen === 0) return;
|
|
lineCurrentIndex = (lineCurrentIndex + 1) % dataLen;
|
|
opt.series.forEach((_, idx) => chartProjectIns.dispatchAction({ type: 'downplay', seriesIndex: idx }));
|
|
opt.series.forEach((_, idx) => chartProjectIns.dispatchAction({ type: 'highlight', seriesIndex: idx, dataIndex: lineCurrentIndex }));
|
|
chartProjectIns.dispatchAction({ type: 'showTip', seriesIndex: 0, dataIndex: lineCurrentIndex });
|
|
}, LINE_TIP_INTERVAL);
|
|
}
|
|
function stopLineTipLoop() {
|
|
if (lineTipTimer) clearInterval(lineTipTimer);
|
|
lineTipTimer = null;
|
|
}
|
|
|
|
// ========== 初始化：项目类别折线 ==========
|
|
function initProjectChart() {
|
|
const dom = document.getElementById('chartProject');
|
|
chartProjectIns = echarts.init(dom);
|
|
const seriesArr = mockProjectData.series.map((item, idx) => ({
|
|
name: item.name,
|
|
type: 'line',
|
|
data: item.data,
|
|
lineStyle: { width: 2 },
|
|
itemStyle: { color: colorArr[idx % colorArr.length] }
|
|
}))
|
|
const opt = {
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
confine: true, // 限制在图表内
|
|
backgroundColor: 'rgba(0,18,36,0.9)',
|
|
borderColor: '#0efdff',
|
|
padding: [12, 16],
|
|
textStyle: { color: '#fff', fontSize: 14 },
|
|
},
|
|
legend: { type: 'scroll', textStyle: { color: '#fff', fontSize: 12 }, pageIconColor: '#0efdff', data: mockProjectData.series.map(s => s.name) },
|
|
grid: { x: 40, y: 50, x2: 10, y2: 20 },
|
|
xAxis: {
|
|
type: 'category', data: mockProjectData.xAxis,
|
|
axisLine: { show: true, symbol: ['none', 'arrow'], lineStyle: { color: '#fff' } },
|
|
axisLabel: { interval: 0, color: '#fff', fontSize: 12 },
|
|
axisTick: { show: false }
|
|
},
|
|
yAxis: {
|
|
name: '数量(个)',
|
|
nameTextStyle: { color: '#fff' },
|
|
axisLine: { show: true, symbol: ['none', 'arrow'], lineStyle: { color: '#fff' } },
|
|
axisLabel: { color: '#fff' },
|
|
minInterval: 1
|
|
},
|
|
series: seriesArr
|
|
}
|
|
chartProjectIns.setOption(opt);
|
|
dom.addEventListener('mouseenter', stopLineTipLoop);
|
|
dom.addEventListener('mouseleave', startLineTipLoop);
|
|
startLineTipLoop();
|
|
}
|
|
|
|
// ========== 初始化：标本类别折线 ==========
|
|
function initSampleChart() {
|
|
const dom = document.getElementById('chartSample');
|
|
chartSampleIns = echarts.init(dom);
|
|
const seriesArr = mockSampleData.series.map((item, idx) => ({
|
|
name: item.name,
|
|
type: 'line',
|
|
data: item.data,
|
|
lineStyle: { width: 2 },
|
|
itemStyle: { color: colorArr[idx % colorArr.length] }
|
|
}))
|
|
const opt = {
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
confine: true, // 限制在图表内
|
|
backgroundColor: 'rgba(0,18,36,0.9)',
|
|
borderColor: '#0efdff',
|
|
padding: [12, 16],
|
|
textStyle: { color: '#fff', fontSize: 14 }
|
|
},
|
|
legend: { type: 'scroll', textStyle: { color: '#fff', fontSize: 12 }, pageIconColor: '#0efdff', data: mockSampleData.series.map(s => s.name) },
|
|
grid: { x: 40, y: 50, x2: 10, y2: 20 },
|
|
xAxis: {
|
|
type: 'category',
|
|
data: mockSampleData.xAxis,
|
|
axisLine: { show: true, symbol: ['none', 'arrow'], lineStyle: { color: '#fff' } },
|
|
axisLabel: { interval: 0, color: '#fff', fontSize: 12 },
|
|
axisTick: { show: false }
|
|
},
|
|
yAxis: {
|
|
name: '数量(份)',
|
|
nameTextStyle: { color: '#fff' },
|
|
axisLine: { show: true, symbol: ['none', 'arrow'], lineStyle: { color: '#fff' } },
|
|
axisLabel: { color: '#fff' },
|
|
minInterval: 1
|
|
},
|
|
series: seriesArr
|
|
}
|
|
chartSampleIns.setOption(opt);
|
|
}
|
|
|
|
// 窗口自适应
|
|
function resizeAll() {
|
|
if (chartProjectIns) chartProjectIns.resize();
|
|
if (chartSampleIns) chartSampleIns.resize();
|
|
}
|
|
|
|
// setTimeout(function () {
|
|
// window.location.href = "index.html";
|
|
// }, 60000);
|
|
// 页面加载入口
|
|
window.onload = function () {
|
|
renderNumList('xmMonthWrap', proData);
|
|
renderNumList('bbMonthWrap', bbData);
|
|
// 渲染右侧机构占比列表
|
|
renderList();
|
|
initProjectChart();
|
|
initSampleChart();
|
|
window.addEventListener('resize', resizeAll);
|
|
document.addEventListener('fullscreenchange', resizeAll);
|
|
document.addEventListener('webkitfullscreenchange', resizeAll);
|
|
}
|
|
|
|
// 页面卸载释放资源
|
|
window.onbeforeunload = function () {
|
|
window.removeEventListener('resize', resizeAll);
|
|
document.removeEventListener('fullscreenchange');
|
|
document.removeEventListener('webkitfullscreenchange');
|
|
if (chartProjectIns) chartProjectIns.dispose();
|
|
if (chartSampleIns) chartSampleIns.dispose();
|
|
}
|
|
</script>
|
|
</body>
|
|
|
|
</html> |