|
|
@@ -0,0 +1,344 @@
|
|
|
+<script setup lang="tsx">
|
|
|
+import {
|
|
|
+ anonymizeName,
|
|
|
+ getHuloColor,
|
|
|
+ InpatientBoardKey,
|
|
|
+ InpatientBoardType,
|
|
|
+} 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) as InpatientBoardType;
|
|
|
+
|
|
|
+const tempInfoKey = {
|
|
|
+ patNo: "住院号1111",
|
|
|
+ convertAdmissDate: "入院",
|
|
|
+ physician: "管床",
|
|
|
+ medTypeName: "类别",
|
|
|
+};
|
|
|
+
|
|
|
+function sexName(value: any) {
|
|
|
+ if (value == 1) {
|
|
|
+ return "男";
|
|
|
+ }
|
|
|
+ if (value == 2) {
|
|
|
+ return "女";
|
|
|
+ }
|
|
|
+ return "";
|
|
|
+}
|
|
|
+
|
|
|
+const handleNursingImg = (item)=>{
|
|
|
+ console.log(item,'item');
|
|
|
+ let url = ""
|
|
|
+ switch (item.nursingLevel) {
|
|
|
+ case "特级护理":
|
|
|
+ url = "/src/assets/dashboard/nursingLevel4.png"
|
|
|
+ break;
|
|
|
+ case "一级护理":
|
|
|
+ url = "/src/assets/dashboard/nursingLevel1.png"
|
|
|
+ break;
|
|
|
+ case "二级护理":
|
|
|
+ url = "/src/assets/dashboard/nursingLevel2.png"
|
|
|
+ break;
|
|
|
+ case "三级护理":
|
|
|
+ url = "/src/assets/dashboard/nursingLevel3.png"
|
|
|
+ break;
|
|
|
+ default:
|
|
|
+ break;
|
|
|
+ }
|
|
|
+
|
|
|
+ return url
|
|
|
+ // console.log("item",item.name);
|
|
|
+}
|
|
|
+
|
|
|
+const daysDistance = (date1,date2) => {
|
|
|
+ console.log('date1',date1);
|
|
|
+ console.log('date2',date2);
|
|
|
+ //date格式为字符串 2025-6-27
|
|
|
+ date1 = Date.parse(date1);
|
|
|
+ date2 = Date.parse(date2);
|
|
|
+ let ms = Math.abs(date1-date2); // 相差的毫秒数
|
|
|
+ return Math.floor(ms/(1000 * 60 * 60 * 24)); // 相差的天数
|
|
|
+};
|
|
|
+
|
|
|
+function huliFunc(value: InpatientBrief) {
|
|
|
+ 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 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);
|
|
|
+ }
|
|
|
+ 开启滚动动画(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);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+onMounted(() => {
|
|
|
+ store.mutation.boardStart = start;
|
|
|
+});
|
|
|
+</script>
|
|
|
+
|
|
|
+<template>
|
|
|
+ <div
|
|
|
+ style="overflow: hidden; flex-wrap: wrap; height: 100%"
|
|
|
+ :ref="(el: any) => store.infoEl.value = el"
|
|
|
+ >
|
|
|
+ <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="card-top flex-center-row">
|
|
|
+ <div class="card-top-area-1 flex-center-row">
|
|
|
+ <img
|
|
|
+ style="width: 20px; height: 20px"
|
|
|
+ :src="handleNursingImg(item)"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ <!-- <img src="../../../assets/dashboard/nursingLevel4.png"
|
|
|
+ style="width: 20px;height: 20px;"
|
|
|
+ alt="" /> -->
|
|
|
+ </div>
|
|
|
+ <div class="card-top-area-2 flex-center-row">
|
|
|
+ <span>{{ item.bedNo }}</span>
|
|
|
+ <span>{{ anonymizeName(item.name) }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="card-top-area-3 flex-center-row">
|
|
|
+ <img src="../../../assets/dashboard/bed.png" alt="" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="card-content flex-center-column">
|
|
|
+ <div class="card-content-1">
|
|
|
+ <span>{{ item.patNo }}</span>
|
|
|
+ <span>{{ sexName(item.gender) }} {{ item.age }}岁</span>
|
|
|
+ </div>
|
|
|
+ <div class="card-content-2">
|
|
|
+ <span>
|
|
|
+ 住院天数 : {{ daysDistance(item.admissDate, new Date()) }} 天
|
|
|
+ </span>
|
|
|
+ <span> </span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="card-bottom">
|
|
|
+ <div class="card-bottom-left">
|
|
|
+ {{ item.physician }}
|
|
|
+ </div>
|
|
|
+ <div class="card-bottom-right">
|
|
|
+ {{ item.dutyNurseName }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- <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>
|
|
|
+ <Component :is="huliFunc(item)" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="board-card-body">
|
|
|
+ <div
|
|
|
+ class="layout_display_flex"
|
|
|
+ v-for="(infoValue, infoKey) in tempInfoKey"
|
|
|
+ style="height: max-content; margin: 0.31rem 0"
|
|
|
+ >
|
|
|
+ <div style="width: 40%; text-align: right">{{ infoValue }}：</div>
|
|
|
+ <div class="layout_flex_1-x" style="padding-left: 6px">
|
|
|
+ {{ item[infoKey] }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div> -->
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+$padding: 0.63rem;
|
|
|
+
|
|
|
+.board-row {
|
|
|
+ display: grid;
|
|
|
+ padding: 0.31rem 0;
|
|
|
+ grid-template-columns: 1fr 1fr 1fr;
|
|
|
+
|
|
|
+ .board-col {
|
|
|
+ flex: 0 0 40%;
|
|
|
+ padding-left: $padding;
|
|
|
+ padding-right: $padding;
|
|
|
+ font-size: 0.75rem;
|
|
|
+
|
|
|
+ .board-col-header {
|
|
|
+ font-size: 1.4rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .board-card {
|
|
|
+ height: 12rem;
|
|
|
+ border: 1px solid #7684ca;
|
|
|
+ border-radius: 15px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background-color: #ffffff;
|
|
|
+ color: #747e92;
|
|
|
+ img {
|
|
|
+ width: 30px;
|
|
|
+ height: 30px;
|
|
|
+ }
|
|
|
+ .card-top {
|
|
|
+ width: 100%;
|
|
|
+ height: 25%;
|
|
|
+ border-bottom: 1px solid #e6e6e6;
|
|
|
+ display: flex;
|
|
|
+ // display: flex;
|
|
|
+ .card-top-area-1 {
|
|
|
+ width: 20%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ .card-top-area-2 {
|
|
|
+ width: 60%;
|
|
|
+ height: 100%;
|
|
|
+ justify-content: space-around;
|
|
|
+ font-size: 1.5rem;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ .card-top-area-3 {
|
|
|
+ width: 20%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .card-content {
|
|
|
+ width: 100%;
|
|
|
+ height: 50%;
|
|
|
+ border-bottom: 1px solid #e6e6e6;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 5px 20px;
|
|
|
+ font-size: 1.2rem;
|
|
|
+
|
|
|
+ .card-content-1 {
|
|
|
+ width: 100%;
|
|
|
+ height: 50%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ .card-content-2 {
|
|
|
+ width: 100%;
|
|
|
+ height: 50%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .card-bottom {
|
|
|
+ width: 100%;
|
|
|
+ height: 25%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ padding: 5px 20px;
|
|
|
+ font-size: 1rem;
|
|
|
+ }
|
|
|
+ // background: #204698;
|
|
|
+ // border-radius: 15px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .board-card-body {
|
|
|
+ font-size: 0.9rem;
|
|
|
+ background-color: #162858;
|
|
|
+ border-radius: 15px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.flex-center-row {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+.flex-center-column {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+</style>
|
