326 lines
12 KiB
HTML
326 lines
12 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>TAT监控大屏</title>
|
|||
|
|
<script src="./js/vue.global.prod.js"></script>
|
|||
|
|
<link rel="stylesheet" href="./css/element-plus.css">
|
|||
|
|
<script src="./js/element-plus.js"></script>
|
|||
|
|
<script src="./js/axios.min.js"></script>
|
|||
|
|
<script src="./js/dayjs.min.js"></script>
|
|||
|
|
<link rel="stylesheet" href="./css/index.css">
|
|||
|
|
<style>
|
|||
|
|
/* 右上角关闭叉号按钮 透明悬浮 */
|
|||
|
|
.close-btn-box {
|
|||
|
|
position: fixed;
|
|||
|
|
right: 20px;
|
|||
|
|
top: 30px;
|
|||
|
|
/* z-index: 9999; */
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.close-icon-btn {
|
|||
|
|
width: 44px;
|
|||
|
|
height: 44px;
|
|||
|
|
line-height: 44px;
|
|||
|
|
text-align: center;
|
|||
|
|
background: transparent;
|
|||
|
|
border: 1px solid rgba(255, 255, 255, 0.25);
|
|||
|
|
color: #fff;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
cursor: pointer;
|
|||
|
|
font-size: 24px;
|
|||
|
|
font-weight: bold;
|
|||
|
|
user-select: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.close-icon-btn:hover {
|
|||
|
|
background: rgba(255, 0, 0, 0.35);
|
|||
|
|
border-color: rgba(255, 255, 255, 0.5);
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
</head>
|
|||
|
|
|
|||
|
|
<body>
|
|||
|
|
<div id="app">
|
|||
|
|
<div class="screen-container">
|
|||
|
|
<div class="screen-header">
|
|||
|
|
<div class="screen-title">TAT超时提醒大屏</div>
|
|||
|
|
<div class="screen-time">{{ nowTime }}</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="grid-wrapper">
|
|||
|
|
<div class="card">
|
|||
|
|
<div class="card-header">
|
|||
|
|
<span>已采集待收标本超时</span>
|
|||
|
|
<span class="red-text">共 {{list1.length}}个标本</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="table-box">
|
|||
|
|
<el-table :data="pageList1" border stripe class="table" height="38vh" :header-cell-style="tableHeaderStyle"
|
|||
|
|
:cell-style="tableCellStyle" :row-style="tableRowStyle">
|
|||
|
|
<el-table-column prop="ksdh" label="科室" show-overflow-tooltip></el-table-column>
|
|||
|
|
<el-table-column label="姓名/条码" show-overflow-tooltip>
|
|||
|
|
<template #default="{ row }">
|
|||
|
|
<span>{{ row.brxm }} / {{ row.sqh }}</span>
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
<el-table-column label="标本/项目" show-overflow-tooltip>
|
|||
|
|
<template #default="{ row }">
|
|||
|
|
<span>{{ row.yblx }} / {{ row.jymd }}</span>
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
<el-table-column prop="cysj" label="采样时间" width="200" show-overflow-tooltip></el-table-column>
|
|||
|
|
<el-table-column label="等待时间" width="120" show-overflow-tooltip>
|
|||
|
|
<template #default="{ row }">
|
|||
|
|
<span class="red-text">{{ row.holdtime || 0 }} 分钟</span>
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
</el-table>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="card">
|
|||
|
|
<div class="card-header">
|
|||
|
|
<span>已核收未上机超时</span>
|
|||
|
|
<span class="red-text">共 {{list2.length}}个标本</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="table-box">
|
|||
|
|
<el-table :data="pageList2" border stripe class="table" height="38vh" :header-cell-style="tableHeaderStyle"
|
|||
|
|
:cell-style="tableCellStyle" :row-style="tableRowStyle">
|
|||
|
|
<el-table-column prop="ksdh" label="科室" show-overflow-tooltip></el-table-column>
|
|||
|
|
<el-table-column label="姓名/条码" show-overflow-tooltip>
|
|||
|
|
<template #default="{ row }">
|
|||
|
|
<span>{{ row.brxm }} / {{ row.sqh }}</span>
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
<el-table-column label="标本/项目" show-overflow-tooltip>
|
|||
|
|
<template #default="{ row }">
|
|||
|
|
<span>{{ row.yblx }} / {{ row.jymd }}</span>
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
<el-table-column prop="jssj" label="签收时间" width="200" show-overflow-tooltip></el-table-column>
|
|||
|
|
<el-table-column label="等待时间" width="120" show-overflow-tooltip>
|
|||
|
|
<template #default="{ row }">
|
|||
|
|
<span class="red-text">{{ row.holdtime || 0 }} 分钟</span>
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
</el-table>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="card">
|
|||
|
|
<div class="card-header">
|
|||
|
|
<span>标本报告未完成超时</span>
|
|||
|
|
<span class="red-text">共 {{list3.length}}个标本</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="table-box">
|
|||
|
|
<el-table :data="pageList3" border stripe class="table" height="38vh" :header-cell-style="tableHeaderStyle"
|
|||
|
|
:cell-style="tableCellStyle" :row-style="tableRowStyle">
|
|||
|
|
<el-table-column prop="yq" label="仪器" show-overflow-tooltip></el-table-column>
|
|||
|
|
<el-table-column label="样本号/条码号" show-overflow-tooltip>
|
|||
|
|
<template #default="{ row }">
|
|||
|
|
<span>{{ row.ybh }} / {{ row.sqh }}</span>
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
<el-table-column label="标本/项目" show-overflow-tooltip>
|
|||
|
|
<template #default="{ row }">
|
|||
|
|
<span>{{ row.yblx }} / {{ row.jymd }}</span>
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
<el-table-column prop="sjsj" label="上机时间" width="200" show-overflow-tooltip></el-table-column>
|
|||
|
|
<el-table-column label="等待时间" width="120" show-overflow-tooltip>
|
|||
|
|
<template #default="{ row }">
|
|||
|
|
<span class="red-text">{{ row.holdtime || 0 }} 分钟</span>
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
</el-table>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="card">
|
|||
|
|
<div class="card-header">危急值未处理超时</div>
|
|||
|
|
<div class="table-box">
|
|||
|
|
<el-table :data="pageList4" border stripe class="table" height="38vh" :header-cell-style="tableHeaderStyle"
|
|||
|
|
:cell-style="tableCellStyle" :row-style="tableRowStyle">
|
|||
|
|
<el-table-column prop="yq" label="仪器" show-overflow-tooltip></el-table-column>
|
|||
|
|
<el-table-column prop="ybh" label="样本号" show-overflow-tooltip></el-table-column>
|
|||
|
|
<el-table-column prop="xmmc" label="项目" show-overflow-tooltip></el-table-column>
|
|||
|
|
<el-table-column prop="csjg" label="结果" show-overflow-tooltip></el-table-column>
|
|||
|
|
<el-table-column label="等待时间" width="120" show-overflow-tooltip>
|
|||
|
|
<template #default="{ row }">
|
|||
|
|
<span class="red-text">{{ row.holdtime || 0 }} 分钟</span>
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
</el-table>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 右上角 叉号关闭按钮 无文字 -->
|
|||
|
|
<div class="close-btn-box">
|
|||
|
|
<div class="close-icon-btn" @click="closeCurrentPage">×</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
const { createApp, ref, onMounted, onUnmounted } = Vue;
|
|||
|
|
|
|||
|
|
const app = createApp({
|
|||
|
|
setup() {
|
|||
|
|
const request = axios.create({ baseURL: '' });
|
|||
|
|
|
|||
|
|
// ==================== 从地址栏获取 rows 参数 ====================
|
|||
|
|
function getPageSizeFromUrl() {
|
|||
|
|
const params = new URLSearchParams(window.location.search);
|
|||
|
|
const rows = parseInt(params.get('rows'));
|
|||
|
|
return !isNaN(rows) && rows > 0 ? rows : 13; // 默认13行
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ==================== 配置 ====================
|
|||
|
|
const PAGE_SIZE = getPageSizeFromUrl(); // 从地址栏获取，默认13
|
|||
|
|
const PAGE_DELAY = 5000; // 翻页间隔
|
|||
|
|
const NO_PAGE_DELAY = 5000; // 不足一页刷新间隔
|
|||
|
|
// ===============================================
|
|||
|
|
|
|||
|
|
// 原始数据
|
|||
|
|
const list1 = ref([]);
|
|||
|
|
const list2 = ref([]);
|
|||
|
|
const list3 = ref([]);
|
|||
|
|
const list4 = ref([]);
|
|||
|
|
|
|||
|
|
// 分页展示数据
|
|||
|
|
const pageList1 = ref([]);
|
|||
|
|
const pageList2 = ref([]);
|
|||
|
|
const pageList3 = ref([]);
|
|||
|
|
const pageList4 = ref([]);
|
|||
|
|
|
|||
|
|
// 样式
|
|||
|
|
const tableHeaderStyle = {
|
|||
|
|
background: 'rgba(30, 104, 195, 1)',
|
|||
|
|
color: '#ffffff', fontSize: '16px', fontWeight: 'bold',
|
|||
|
|
borderColor: '#0099ff', padding: '4px 0px'
|
|||
|
|
};
|
|||
|
|
const tableCellStyle = {
|
|||
|
|
background: 'transparent', color: '#ffffff', fontSize: '15px',
|
|||
|
|
borderColor: '#0099ff', padding: '2px 0px'
|
|||
|
|
};
|
|||
|
|
const tableRowStyle = ({ rowIndex }) => ({
|
|||
|
|
background: rowIndex % 2 === 0 ? 'transparent' : 'rgba(0, 153, 255, 0.1)'
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 时间
|
|||
|
|
const nowTime = ref('');
|
|||
|
|
const updateTime = () => {
|
|||
|
|
nowTime.value = dayjs().format('YYYY年MM月DD日 HH:mm:ss');
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 关闭当前网页
|
|||
|
|
const closeCurrentPage = () => {
|
|||
|
|
window.close();
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 安全清除定时器
|
|||
|
|
const safeClear = (timer) => timer && clearTimeout(timer);
|
|||
|
|
|
|||
|
|
// 核心：分页轮播 + 最后一页刷新
|
|||
|
|
function startCarousel(list, pageList, onFinish) {
|
|||
|
|
let currentPage = 0;
|
|||
|
|
let timer = null;
|
|||
|
|
|
|||
|
|
function run() {
|
|||
|
|
safeClear(timer);
|
|||
|
|
const total = list.value.length;
|
|||
|
|
if (total === 0) {
|
|||
|
|
pageList.value = [];
|
|||
|
|
timer = setTimeout(run, NO_PAGE_DELAY);
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 不足一页：不翻页，定时刷新
|
|||
|
|
if (total <= PAGE_SIZE) {
|
|||
|
|
pageList.value = list.value;
|
|||
|
|
timer = setTimeout(run, NO_PAGE_DELAY);
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 计算分页
|
|||
|
|
const start = currentPage * PAGE_SIZE;
|
|||
|
|
const end = start + PAGE_SIZE;
|
|||
|
|
pageList.value = list.value.slice(start, end);
|
|||
|
|
|
|||
|
|
const isLastPage = end >= total;
|
|||
|
|
|
|||
|
|
// 最后一页：停留后刷新数据
|
|||
|
|
if (isLastPage) {
|
|||
|
|
timer = setTimeout(() => {
|
|||
|
|
currentPage = 0;
|
|||
|
|
onFinish(); // 刷新
|
|||
|
|
}, PAGE_DELAY);
|
|||
|
|
} else {
|
|||
|
|
// 下一页
|
|||
|
|
timer = setTimeout(() => {
|
|||
|
|
currentPage++;
|
|||
|
|
run();
|
|||
|
|
}, PAGE_DELAY);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
run();
|
|||
|
|
return () => safeClear(timer);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 加载数据 + 启动轮播
|
|||
|
|
function createLoader(url, list, pageList) {
|
|||
|
|
let stopCarousel = null;
|
|||
|
|
|
|||
|
|
async function load() {
|
|||
|
|
try {
|
|||
|
|
if (stopCarousel) stopCarousel();
|
|||
|
|
const { data: res } = await request.get(url);
|
|||
|
|
list.value = res.data || [];
|
|||
|
|
stopCarousel = startCarousel(list, pageList, load);
|
|||
|
|
} catch (e) {
|
|||
|
|
console.log("加载失败", url);
|
|||
|
|
setTimeout(load, NO_PAGE_DELAY);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
load();
|
|||
|
|
return () => stopCarousel && stopCarousel();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 启动所有表格
|
|||
|
|
let stop1, stop2, stop3, stop4;
|
|||
|
|
onMounted(() => {
|
|||
|
|
updateTime();
|
|||
|
|
setInterval(updateTime, 1000);
|
|||
|
|
|
|||
|
|
stop1 = createLoader('/api/list1', list1, pageList1);
|
|||
|
|
stop2 = createLoader('/api/list2', list2, pageList2);
|
|||
|
|
stop3 = createLoader('/api/list3', list3, pageList3);
|
|||
|
|
stop4 = createLoader('/api/list4', list4, pageList4);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
onUnmounted(() => {
|
|||
|
|
stop1?.();
|
|||
|
|
stop2?.();
|
|||
|
|
stop3?.();
|
|||
|
|
stop4?.();
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
return {
|
|||
|
|
list1, list2, list3, list4,
|
|||
|
|
pageList1, pageList2, pageList3, pageList4,
|
|||
|
|
nowTime, tableHeaderStyle, tableCellStyle, tableRowStyle,
|
|||
|
|
closeCurrentPage
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
app.use(ElementPlus).mount('#app');
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
|
|||
|
|
</html>
|