388 lines
14 KiB
HTML
388 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>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">
|
||
</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="list1" border stripe class="table" height="35vh" ref="table1Ref"
|
||
:header-cell-style="tableHeaderStyle" :cell-style="tableCellStyle" :row-style="tableRowStyle">
|
||
<el-table-column prop="ksdh" label="科室"></el-table-column>
|
||
<el-table-column label="姓名/条码">
|
||
<template #default="{ row }">
|
||
<span>{{ row.brxm }} / {{ row.sqh }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="标本/项目">
|
||
<template #default="{ row }">
|
||
<span>{{ row.yblx }} / {{ row.jymd }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="cysj" label="采样时间"></el-table-column>
|
||
<el-table-column label="等待时间">
|
||
<template #default="{ row }">
|
||
<span class="red-text">{{ row.holdtime }} 分钟</span>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</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="card">
|
||
<div class="card-header">
|
||
<span>已核收还未上机标本</span>
|
||
<span class="red-text">
|
||
共 {{list2.length}}个标本
|
||
</span>
|
||
</div>
|
||
<div class="table-box">
|
||
<el-table :data="list2" border stripe class="table" height="35vh" ref="table2Ref"
|
||
:header-cell-style="tableHeaderStyle" :cell-style="tableCellStyle" :row-style="tableRowStyle">
|
||
<el-table-column prop="ksdh" label="科室"></el-table-column>
|
||
<el-table-column label="姓名/条码">
|
||
<template #default="{ row }">
|
||
<span>{{ row.brxm }} / {{ row.sqh }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="标本/项目">
|
||
<template #default="{ row }">
|
||
<span>{{ row.yblx }} / {{ row.jymd }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="jssj" label="签收时间"></el-table-column>
|
||
<el-table-column label="等待时间">
|
||
<template #default="{ row }">
|
||
<span class="red-text">{{ row.holdtime }} 分钟</span>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</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="card">
|
||
<div class="card-header">
|
||
<span>标本完成效率TAT</span>
|
||
</div>
|
||
<div class="table-box">
|
||
<el-table :data="list3" border stripe class="table" height="35vh" ref="table3Ref"
|
||
:header-cell-style="tableHeaderStyle" :cell-style="tableCellStyle" :row-style="tableRowStyle">
|
||
<el-table-column prop="yq" label="仪器"></el-table-column>
|
||
<el-table-column label="样本号/条码号">
|
||
<template #default="{ row }">
|
||
<span>{{ row.ybh }} / {{ row.sqh }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="标本/项目">
|
||
<template #default="{ row }">
|
||
<span>{{ row.yblx }} / {{ row.jymd }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="sjsj" label="上机时间"></el-table-column>
|
||
<el-table-column label="等待时间">
|
||
<template #default="{ row }">
|
||
<span class="red-text">{{ row.holdtime }} 分钟</span>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</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="card">
|
||
<div class="card-header red-title">危急值结果:(请工作人员及时处理!)</div>
|
||
<div class="table-box">
|
||
<el-table :data="list4" border stripe class="table" height="35vh" ref="table4Ref"
|
||
:header-cell-style="tableHeaderStyle" :cell-style="tableCellStyle" :row-style="tableRowStyle">
|
||
<el-table-column prop="yq" label="仪器"></el-table-column>
|
||
<el-table-column prop="ybh" label="样本号"></el-table-column>
|
||
<el-table-column prop="xmmc" label="项目"></el-table-column>
|
||
<el-table-column prop="csjg" label="结果"></el-table-column>
|
||
<el-table-column prop="confirm" label="确认超时"></el-table-column>
|
||
</el-table>
|
||
</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>
|
||
const { createApp, ref, onMounted, onUnmounted, nextTick } = Vue;
|
||
const app = createApp({
|
||
components: {
|
||
...ElementPlus.components
|
||
},
|
||
setup() {
|
||
// 创建axios实例
|
||
const request = axios.create({
|
||
baseURL: '',
|
||
timeout: 5000 // 请求超时时间
|
||
})
|
||
|
||
// 表格数据
|
||
const list1 = ref([]);
|
||
const list2 = ref([]);
|
||
const list3 = ref([]);
|
||
const list4 = 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 }) => {
|
||
return {
|
||
background: rowIndex % 2 === 0 ? 'transparent' : 'rgba(0, 153, 255, 0.1)',
|
||
hover: 'rgba(0, 153, 255, 0.2)'
|
||
}
|
||
}
|
||
|
||
// 表格引用
|
||
const table1Ref = ref()
|
||
const table2Ref = ref()
|
||
const table3Ref = ref()
|
||
const table4Ref = ref()
|
||
|
||
// 定义各表格对应的接口地址
|
||
const tableApiMap = {
|
||
list1: '/api/list1',
|
||
list2: '/api/list2',
|
||
list3: '/api/list3',
|
||
list4: '/api/list4'
|
||
};
|
||
|
||
// 配置
|
||
const SCROLL_INTERVAL = 100; // 滚动速度
|
||
const SCROLL_PAUSE = 5000; // 到底停顿时间
|
||
const NO_SCROLL_REFRESH = 5000; // 无滚动自动刷新
|
||
const TOP_PAUSE = 3000; // 回到顶部后停顿时间
|
||
|
||
// 锁：防止重复触发
|
||
const locked = ref({
|
||
list1: false,
|
||
list2: false,
|
||
list3: false,
|
||
list4: false
|
||
});
|
||
|
||
const getScrollWrapper = (tableRef) => {
|
||
if (!tableRef.value) return null;
|
||
const bodyWrapper = tableRef.value.layout.table.refs.bodyWrapper;
|
||
return bodyWrapper?.firstElementChild?.firstElementChild || null;
|
||
};
|
||
|
||
// 获取单个表格数据
|
||
const fetchTableData = async (listKey) => {
|
||
try {
|
||
const response = await request.get(tableApiMap[listKey]);
|
||
// 根据列表key更新对应数据
|
||
if (listKey === 'list1') {
|
||
list1.value = response.data.data || [];
|
||
} else if (listKey === 'list2') {
|
||
list2.value = response.data.data || [];
|
||
} else if (listKey === 'list3') {
|
||
list3.value = response.data.data || [];
|
||
} else if (listKey === 'list4') {
|
||
list4.value = response.data.data || [];
|
||
}
|
||
console.log(`成功获取${listKey}数据`, response.data);
|
||
} catch (error) {
|
||
console.error(`获取${listKey}数据失败`, error);
|
||
}
|
||
};
|
||
|
||
// 封装滚动函数，接收表格ref、数据列表key、数据列表
|
||
const createTableScroll = (tableRef, listKey) => {
|
||
let scrollTimer = null;
|
||
let refreshTimer = null;
|
||
|
||
const clear = () => {
|
||
clearInterval(scrollTimer);
|
||
clearInterval(refreshTimer);
|
||
scrollTimer = null;
|
||
refreshTimer = null;
|
||
};
|
||
|
||
const start = () => {
|
||
clear();
|
||
|
||
// 定时检查：是否需要滚动
|
||
const checkAndScroll = () => {
|
||
const wrapper = getScrollWrapper(tableRef);
|
||
if (!wrapper) return;
|
||
|
||
// 内容没有溢出 → 只刷新，不滚动
|
||
if (wrapper.scrollHeight <= wrapper.clientHeight) {
|
||
return;
|
||
}
|
||
|
||
// 锁定中 → 不滚动
|
||
if (locked.value[listKey]) return;
|
||
|
||
// 正常滚动
|
||
wrapper.scrollTop += 1;
|
||
|
||
// 判断到底
|
||
const isBottom = wrapper.scrollTop + wrapper.clientHeight >= wrapper.scrollHeight - 2;
|
||
if (isBottom) {
|
||
locked.value[listKey] = true;
|
||
clearInterval(scrollTimer);
|
||
|
||
// 停顿后刷新 + 重置
|
||
setTimeout(async () => {
|
||
await fetchTableData(listKey);
|
||
await nextTick(); // 等待DOM更新
|
||
|
||
const newWrapper = getScrollWrapper(tableRef);
|
||
if (newWrapper) newWrapper.scrollTop = 0;
|
||
|
||
// 新增：回到顶部后停顿3秒再解锁并重启滚动
|
||
setTimeout(() => {
|
||
locked.value[listKey] = false;
|
||
start(); // 重新启动滚动
|
||
}, TOP_PAUSE);
|
||
}, SCROLL_PAUSE);
|
||
}
|
||
};
|
||
|
||
// 启动滚动定时器
|
||
scrollTimer = setInterval(checkAndScroll, SCROLL_INTERVAL);
|
||
|
||
// 无滚动时定时刷新
|
||
refreshTimer = setInterval(async () => {
|
||
const wrapper = getScrollWrapper(tableRef);
|
||
if (wrapper && wrapper.scrollHeight <= wrapper.clientHeight) {
|
||
await fetchTableData(listKey);
|
||
}
|
||
}, NO_SCROLL_REFRESH);
|
||
};
|
||
|
||
return { start, clear };
|
||
};
|
||
|
||
// 初始化所有表格数据
|
||
const initAllTableData = async () => {
|
||
await Promise.all([
|
||
fetchTableData('list1'),
|
||
fetchTableData('list2'),
|
||
fetchTableData('list3'),
|
||
fetchTableData('list4')
|
||
]);
|
||
};
|
||
|
||
// 每个表格独立实例化滚动
|
||
const table1Scroll = createTableScroll(table1Ref, 'list1');
|
||
const table2Scroll = createTableScroll(table2Ref, 'list2');
|
||
const table3Scroll = createTableScroll(table3Ref, 'list3');
|
||
const table4Scroll = createTableScroll(table4Ref, 'list4');
|
||
|
||
// 动态时间
|
||
const nowTime = ref('');
|
||
const updateTime = () => {
|
||
nowTime.value = dayjs().format('YYYY年MM月DD日 HH:mm:ss');
|
||
};
|
||
let timeTimer = null;
|
||
|
||
onMounted(async () => {
|
||
// 更新时间
|
||
updateTime();
|
||
timeTimer = setInterval(updateTime, 1000);
|
||
|
||
// 初始化加载所有表格数据
|
||
await initAllTableData();
|
||
|
||
// 等待DOM渲染完成后启动表格滚动/刷新
|
||
await nextTick();
|
||
table1Scroll.start();
|
||
table2Scroll.start();
|
||
table3Scroll.start();
|
||
table4Scroll.start();
|
||
});
|
||
|
||
onUnmounted(() => {
|
||
// 清理所有定时器
|
||
clearInterval(timeTimer);
|
||
table1Scroll.clear();
|
||
table2Scroll.clear();
|
||
table3Scroll.clear();
|
||
table4Scroll.clear();
|
||
});
|
||
|
||
return {
|
||
list1,
|
||
list2,
|
||
list3,
|
||
list4,
|
||
table1Ref,
|
||
table2Ref,
|
||
table3Ref,
|
||
table4Ref,
|
||
nowTime,
|
||
tableHeaderStyle,
|
||
tableCellStyle,
|
||
tableRowStyle
|
||
};
|
||
}
|
||
});
|
||
|
||
// 注册Element Plus
|
||
app.use(ElementPlus);
|
||
app.mount('#app');
|
||
</script>
|
||
</body>
|
||
|
||
</html> |