wip:家属等候-动态布局

src/api/waitList.js

@@ -0,0 +1,16 @@
+import _axios from '@/utils/_axios';
+
+/**
+ * 麻醉管理患者列表
+ */
+export const getAnesPatientList = data => {
+  return _axios({
+    method: 'post',
+    url: '/api/ScheduleMicroservice/OperationRecord/AnesPatientList',
+    params: {
+      pageIndex: 1,
+      pageSize: 999,
+    },
+    data,
+  });
+};

src/assets/svg/Wait/footText.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="162" height="40" viewBox="0 0 162 40"><g><rect x="0" y="0" width="162" height="40" rx="0" fill="#FFFFFF" fill-opacity="1"/></g></svg>

src/views/waitList/index.vue

@@ -13,11 +13,22 @@
         <p class="text-[1.66vh]">2024-07-09 星期二</p>
       </div>
     </nav>
-    <main class="h-[calc(100vh-18.51vh)] p-[2.22vh] pb-0"></main>
+    <main class="h-[calc(100vh-18.51vh)] p-[2.22vh] pb-0" ref="mainRef">
+      <div class="bg-[#9A82FF] flex text-center" :style="carouselNav">
+        <div class="flex-1 border-r">手术间</div>
+        <div class="flex-1 border-r">患者姓名</div>
+        <div class="flex-1 border-r">床号</div>
+        <div class="flex-1 border-r">科室</div>
+        <div class="flex-1">状态</div>
+      </div>
+      <div :style="carouselOuterWrap" v-loading="isLoading">
+        <div :style="carouselIneerWrap" class="border border-[#9A82FF] border-t-0"></div>
+      </div>
+    </main>
     <footer class="h-[7.4vh] flex items-center justify-around bg-[#5D49AF]">
       <div class="flex items-center">
         <div class="logBox w-[15vh] h-[3.7vh] mr-[1.48vh]">
-          <img class="h-full" src="@/assets/svg/Wait/footText.svg" />
+          <img class="h-full" src="@/assets/svg/Wait/footText.png" />
         </div>
         <p class="text-[2.59vh]">请勿吸烟，请照顾好自己随身携带的物品，请耐心等待，我们将竭诚为您服务</p>
       </div>
@@ -25,6 +36,74 @@
   </section>
 </template>
 
-<script></script>
+<script>
+import { getAnesPatientList } from '@/api/waitList';
+import dayjs from 'dayjs';
+
+export default {
+  data() {
+    return {
+      isLoading: true,
+      mainRefHeight: 0,
+      showItemNum: 9,
+      carouselNav: {},
+      carouselOuterWrap: {},
+      carouselIneerWrap: {},
+      patientList: [],
+    };
+  },
+  methods: {
+    onGetPageData() {
+      let today = dayjs().format('YYYY-MM-DD');
+      today = '2024-06-06';
+      getAnesPatientList({
+        ScheduledDateTime: today,
+        Status: -1,
+        IsPacu: false,
+        IsEOperation: false,
+        IsAnesManage: true,
+        IsInfect: false,
+        IsRadiation: false,
+        IsPostoperativeAnalgesia: false,
+        IsSurgicalFreezing: false,
+        IsType: false,
+      })
+        .then(res => {
+          this.patientList = [];
+          for (let index = 0; index < res['Data']['Data']['AnesPatientLists'].length; index++) {
+            const element = res['Data']['Data']['AnesPatientLists'][index];
+            const groupIndex = parseInt(index / this.showItemNum);
+            if (this.patientList[groupIndex]) {
+              this.patientList[groupIndex].push(element);
+            } else {
+              this.patientList[groupIndex] = [element];
+            }
+          }
+          console.log(this.patientList);
+        })
+        .finally(() => {
+          this.isLoading = false;
+        });
+    },
+  },
+  mounted() {
+    const mainEl = window.getComputedStyle(this.$refs.mainRef);
+    this.mainRefHeight = parseInt(this.$refs.mainRef.clientHeight - parseFloat(mainEl['paddingTop'])) - 40;
+    const itemHeight = this.mainRefHeight / (this.showItemNum + 1);
+    const rowHeight = itemHeight / 1080;
+    this.carouselNav = {
+      'font-size': `${(rowHeight * 43).toFixed(2)}vh`,
+      'line-height': `${(rowHeight * 100).toFixed(2)}vh`,
+    };
+    this.carouselOuterWrap = {
+      height: `calc(100% - ${(rowHeight * 100).toFixed(2)}vh)`,
+    };
+    this.carouselIneerWrap = {
+      height: `calc(100% - 40px)`,
+    };
+    this.onGetPageData();
+  },
+};
+</script>
 
 <style lang="scss" scoped></style>