护理看板

src/components/nursing-dashboard/RenderTable.vue

@@ -7,6 +7,7 @@ import {
   type InpatientBoardType,
 } from "@/views/single-page/InpatientBoardV2/index";
 import XEUtils from "xe-utils";
+import { clear } from "console";
 
 defineOptions({
   name: "RenderTable",
@@ -28,9 +29,9 @@ const store = reactive({
   businessData: {},
 });
 
-const divRaf = ref<HTMLDivElement>();
+const divRef = ref<HTMLDivElement>();
 
-useResizeObserver(divRaf, () => {
+useResizeObserver(divRef, () => {
   if (stringIsBlank(props.htmlData)) return;
   nextTick(() => {
     if (props.htmlData) renderTable(false);
@@ -118,12 +119,25 @@ function getBusiness(spans: HTMLSpanElement[]) {
 }
 
 async function renderTable(query = true) {
+  containerRef.value.scrollTop = 0;
+  console.log("renderTable");
+  clearTimeout(time1.value);
+  time1.value = null;
+  clearTimeout(time2.value);
+  time2.value = null;
+  clearInterval(scrollTimer.value);
+  scrollTimer.value = null;
   await nextTick();
   store.business = new Set();
   store.spans = [];
-  divRaf.value.innerHTML = store.htmlData;
-
-  const table = divRaf.value.querySelector("table");
+  let insertStr = "id=tableDiv ref=tableRef ";
+  let position = 7; // 因为索引从0开始，第五位对应索引4
+  store.htmlData =
+    store.htmlData.substring(0, position) +
+    insertStr +
+    store.htmlData.substring(position);
+  divRef.value.innerHTML = store.htmlData;
+  const table = divRef.value.querySelector("table");
   const trs = table.querySelectorAll("tr");
 
   trs.forEach(tr => {
@@ -137,8 +151,66 @@ async function renderTable(query = true) {
     });
   });
   replace(query);
+  checkAndScroll();
 }
 
+const containerRef = ref(null);
+let resizeObserver = null;
+let scrollTimer = ref(null);
+
+// 检查并滚动到底部
+const checkAndScroll = () => {
+  // return
+  console.log("scrollTimer", scrollTimer.value);
+  if (!containerRef.value || !divRef.value) return;
+  const table = document.getElementById("tableDiv");
+  const parentHeight = containerRef.value.clientHeight;
+  const childHeight = divRef.value.scrollHeight;
+  nextTick(() => {
+    console.log("table", table.offsetHeight);
+  });
+  // console.log("tableHeight", tableHeight);
+  // 当子元素高度超过父容器时滚动到底部
+  if (childHeight > parentHeight && scrollTimer.value == null) {
+    startScroll();
+  }
+};
+
+let time1 = ref(null);
+let time2 = ref(null);
+
+const startScroll = () => {
+  console.log("startScroll");
+  // if (scrollTimer.value) {
+  //   console.log(111);
+  //   clearTimeout(time1.value);
+  //   clearTimeout(time2.value);
+  //   clearInterval(scrollTimer.value);
+  // }
+  //
+  scrollTimer.value = setInterval(() => {
+    const parentHeight = containerRef.value.clientHeight;
+    const childHeight = divRef.value.scrollHeight;
+    const scrollHeight = childHeight - parentHeight;
+    if (containerRef.value.scrollTop == scrollHeight) {
+      clearInterval(scrollTimer.value);
+      time1.value = setTimeout(() => {
+        containerRef.value.scrollTop = 0;
+        if (scrollTimer.value) {
+          time2.value = setTimeout(() => {
+            startScroll();
+          }, 2000);
+        }
+      }, 2000);
+      console.log(222);
+    } else {
+      console.log(333);
+      containerRef.value.scrollTop += scrollHeight / 2;
+    }
+  }, 2000);
+  //
+};
+
 watch(
   () => props.htmlData,
   async () => {
@@ -150,22 +222,45 @@ watch(
 
 defineExpose({
   reloadData() {
+    console.log("reloadData");
     renderTable();
   },
 });
+
+onMounted(() => {
+  // 初始化 ResizeObserver 监听子元素尺寸变化
+  resizeObserver = new ResizeObserver(checkAndScroll);
+  if (divRef.value) {
+    resizeObserver.observe(divRef.value);
+  }
+  // 初始检查一次
+  checkAndScroll();
+});
+
+onBeforeUnmount(() => {
+  // 组件卸载时断开监听
+  if (resizeObserver) {
+    resizeObserver.disconnect();
+  }
+  // if (scrollTimer.value) clearInterval(scrollTimer.value);
+  // if (time1.value) clearTimeout(time1.value);
+  // if (time2.value) clearTimeout(time2.value);
+});
 </script>
 
 <template>
   <div class="container" id="container" ref="containerRef">
-    <div class="layout_container render-table" ref="divRaf"></div>
+    <div class="layout_container render-table" ref="divRef"></div>
   </div>
 </template>
 
 <style lang="scss">
-.container{
+.container {
   width: 100%;
   height: 100%;
-  // overflow: auto
+  overflow: auto;
+  // transition: all 2s linear;
+  scroll-behavior: smooth;
 }
 .render-table {
   background: #0f1628;
@@ -209,7 +304,7 @@ defineExpose({
   }
 }
 ::-webkit-scrollbar {
-width: 0 !important;
-height: 0 !important;
+  width: 0 !important;
+  height: 0 !important;
 }
 </style>

src/views/single-page/InpatientBoardV2/BoardCardNew.vue

@@ -192,10 +192,12 @@ onMounted(() => {
             </div>
           </div>
           <div class="card-bottom">
-            <div class="card-bottom-left">
+            <div class="card-bottom-left flex-center-row">
+              <img src="../../../assets/dashboard/doctor.png" alt="" />
               {{ item.physician }}
             </div>
-            <div class="card-bottom-right">
+            <div class="card-bottom-right flex-center-row">
+              <img src="../../../assets/dashboard/nurse.png" alt="" />
               {{ item.dutyNurseName }}
             </div>
           </div>
@@ -317,6 +319,14 @@ $padding: 0.63rem;
         align-items: center;
         padding: 5px 20px;
         font-size: 1rem;
+
+        .card-bottom-left{
+
+        }
+
+        .card-bottom-right{
+
+        }
       }
       //   background: #204698;
       //   border-radius: 15px;