|
|
@@ -2,19 +2,18 @@
|
|
|
import {anonymizeName, getHuloColor, InpatientBoardKey} from "@/views/single-page/InpatientBoardV2/index";
|
|
|
import type {InpatientBrief} from "@/views/single-page/InpatientBoardV2/index";
|
|
|
import {ElTag} from 'element-plus';
|
|
|
+import XEUtils from "xe-utils";
|
|
|
+import sleep from "@/utils/sleep";
|
|
|
|
|
|
const {store} = inject(InpatientBoardKey)
|
|
|
|
|
|
const tempInfoKey = {
|
|
|
patNo: '住院号',
|
|
|
- birthDate: '出生日期',
|
|
|
- convertAdmissDate: '入院时间',
|
|
|
- physician: '管床医生',
|
|
|
- medTypeName: '医疗类别',
|
|
|
- indays: '住院天数',
|
|
|
+ convertAdmissDate: '入院',
|
|
|
+ physician: '管床',
|
|
|
+ medTypeName: '类别',
|
|
|
};
|
|
|
|
|
|
-
|
|
|
function sexName(value: any) {
|
|
|
if (value == 1) {
|
|
|
return '男'
|
|
|
@@ -26,44 +25,103 @@ function sexName(value: any) {
|
|
|
}
|
|
|
|
|
|
function huliFunc(value: InpatientBrief) {
|
|
|
-
|
|
|
- const Tag = (name) => {
|
|
|
+ const Tag = (name: string) => {
|
|
|
return <ElTag effect="dark"
|
|
|
round
|
|
|
size="large"
|
|
|
disableTransitions
|
|
|
color={getHuloColor(name)}>{() => name}</ElTag>
|
|
|
}
|
|
|
-
|
|
|
if (value.sickLevelOrderName) {
|
|
|
- return Tag(value.sickLevelOrderName)
|
|
|
+ return Tag(value.sickLevelOrderName);
|
|
|
+ }
|
|
|
+ return null
|
|
|
+}
|
|
|
+
|
|
|
+const scrollingInfo = reactive({
|
|
|
+ rowCount: 5,
|
|
|
+ interval: null,
|
|
|
+ currentIndex: 0,
|
|
|
+ maxDataLength: 25,
|
|
|
+ data: [],
|
|
|
+ clear() {
|
|
|
+ clearTimeout(scrollingInfo.interval)
|
|
|
+ },
|
|
|
+});
|
|
|
+
|
|
|
+function hasScrollDiv(divElement) {
|
|
|
+ // 获取div的总高度（包括内容和任何滚动条）
|
|
|
+ const totalHeight = divElement.scrollHeight;
|
|
|
+ // 获取可见区域的高度（不包含任何滚动条）
|
|
|
+ const clientHeight = divElement.clientHeight;
|
|
|
+ // 如果总高度大于可见区域的高度，则说明该div元素有滚动条
|
|
|
+ return totalHeight > clientHeight;
|
|
|
+}
|
|
|
+
|
|
|
+function 开启滚动动画(value) {
|
|
|
+ scrollingInfo.clear();
|
|
|
+ scrollingInfo.interval = setTimeout(() => 动画(value), store.urlQuery.speedBarDisplay * 1000)
|
|
|
+}
|
|
|
+
|
|
|
+async function 动画(value) {
|
|
|
+ const el = store.infoEl.value
|
|
|
+ const items = el.querySelectorAll('.board-row');
|
|
|
+ const item = items[1];
|
|
|
+ if (item) {
|
|
|
+ item.scrollIntoView({
|
|
|
+ block: 'start',
|
|
|
+ inline: 'nearest',
|
|
|
+ behavior: 'smooth'
|
|
|
+ });
|
|
|
+ await nextTick()
|
|
|
+ await sleep(500)
|
|
|
+ const shiftData = scrollingInfo.data.shift();
|
|
|
+ scrollingInfo.currentIndex++
|
|
|
+ el.scrollTop = 0
|
|
|
+ scrollingInfo.data.push(shiftData);
|
|
|
}
|
|
|
- if (value.nursingLevel) {
|
|
|
- return Tag(value.nursingLevel)
|
|
|
+ 开启滚动动画(value);
|
|
|
+}
|
|
|
+
|
|
|
+const chunkSize = 3
|
|
|
+
|
|
|
+async function start(data: any[]) {
|
|
|
+ scrollingInfo.clear()
|
|
|
+ const chunk = XEUtils.chunk(data, chunkSize);
|
|
|
+ if (chunk.length === chunkSize) {
|
|
|
+ scrollingInfo.data = [...chunk, ...chunk];
|
|
|
+ } else {
|
|
|
+ scrollingInfo.data = chunk;
|
|
|
+ }
|
|
|
+ await nextTick();
|
|
|
+ if (hasScrollDiv(store.infoEl.value)) {
|
|
|
+ 开启滚动动画(scrollingInfo.data)
|
|
|
}
|
|
|
- return Tag('未知')
|
|
|
}
|
|
|
+
|
|
|
+onMounted(() => {
|
|
|
+ store.mutation.boardStart = start
|
|
|
+})
|
|
|
</script>
|
|
|
|
|
|
<template>
|
|
|
<div style="overflow: hidden;flex-wrap: wrap;height: 100%"
|
|
|
- :ref="(el) => store.infoEl.value = el"
|
|
|
+ :ref="(el: any) => store.infoEl.value = el"
|
|
|
>
|
|
|
- <div v-for="father in store.scrollingInfo.data"
|
|
|
+ <div v-for="father in scrollingInfo.data"
|
|
|
class="board-row">
|
|
|
<div class="board-col" v-for="item in father">
|
|
|
<div class="board-card">
|
|
|
<div class="layout_container layout-horizontal board-card-header" style="height: max-content">
|
|
|
<div class="layout_flex_1-x board-col-header">
|
|
|
{{ anonymizeName(item.name) }}
|
|
|
-
|
|
|
<span style="font-size: 1.25rem">{{ sexName(item.gender) }}</span>
|
|
|
+ <span style="font-size: 1.25rem">{{ item.age }}岁</span>
|
|
|
</div>
|
|
|
-
|
|
|
<div style="width: max-content">
|
|
|
<b style="font-size: 1.25rem">
|
|
|
- {{ item.bedNo }}
|
|
|
- </b>
|
|
|
+ {{ item.bedNo }}床
|
|
|
+ </b>
|
|
|
<Component :is="huliFunc(item)"/>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -75,7 +133,6 @@ function huliFunc(value: InpatientBrief) {
|
|
|
<div class="layout_flex_1-x" style="padding-left: 6px">{{ item[infoKey] }}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="board-card-footer"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -86,36 +143,27 @@ function huliFunc(value: InpatientBrief) {
|
|
|
$padding: 0.63rem;
|
|
|
|
|
|
.board-row {
|
|
|
- display: flex;
|
|
|
+ display: grid;
|
|
|
padding: 0.31rem 0;
|
|
|
+ grid-template-columns: 1fr 1fr 1fr;
|
|
|
|
|
|
.board-col {
|
|
|
- flex: 0 0 20%;
|
|
|
+ flex: 0 0 40%;
|
|
|
padding-left: $padding;
|
|
|
padding-right: $padding;
|
|
|
font-size: 0.75rem;
|
|
|
|
|
|
.board-col-header {
|
|
|
- font-size: 1.88rem;
|
|
|
+ font-size: 1.4rem;
|
|
|
}
|
|
|
|
|
|
.board-card {
|
|
|
background: #204698;
|
|
|
}
|
|
|
|
|
|
- .board-card-header {
|
|
|
- padding: 0.50rem 0.31rem 0.31rem 0.31rem;
|
|
|
- }
|
|
|
-
|
|
|
- .board-card-footer {
|
|
|
- height: 0.31rem;
|
|
|
- background-color: #DA5856;
|
|
|
- }
|
|
|
-
|
|
|
.board-card-body {
|
|
|
- font-size: 1rem;
|
|
|
+ font-size: 0.9rem;
|
|
|
background-color: #162858;
|
|
|
- padding: 0.31rem;
|
|
|
}
|
|
|
}
|
|
|
}
|
