From d19ead7d0faa934954a6b7151c0dc5b77d0f485b Mon Sep 17 00:00:00 2001
From: "@0Melon0" <576788380@qq.com>
Date: Thu, 11 Jul 2024 13:48:46 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E6=95=B4=E6=92=AD=E6=94=BE=E9=80=9F?=
 =?UTF-8?q?=E5=BA=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 1.html                           |  1 -
 src/router/index.js              |  6 +++
 src/views/pageMelon/index.vue    | 65 +++++++++++++++++++++++
 src/views/scheduleList/index.vue | 28 +++++-----
 src/views/waitList/index.vue     | 89 +++++++++++++++++++-------------
 5 files changed, 138 insertions(+), 51 deletions(-)
 create mode 100644 src/views/pageMelon/index.vue

diff --git a/1.html b/1.html
index e205cd0..8708f7c 100644
--- a/1.html
+++ b/1.html
@@ -28,7 +28,6 @@
       // 添加 onend 事件处理器
       utterance.onend = function(event) {
         console.log('Speech has finished.');
-        alert('Speech has finished.');
       };
 
       window.speechSynthesis.speak(utterance);
diff --git a/src/router/index.js b/src/router/index.js
index 819c434..3e38e77 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -52,6 +52,12 @@ const routes = [
     meta: { title: '手术排程' },
     component: () => import('@/views/scheduleList/index.vue'),
   },
+  {
+    path: '/melon',
+    name: 'melon',
+    meta: { title: '手术排程' },
+    component: () => import('@/views/pageMelon/index.vue'),
+  },
 ];
 
 const router = new VueRouter({
diff --git a/src/views/pageMelon/index.vue b/src/views/pageMelon/index.vue
new file mode 100644
index 0000000..5346f20
--- /dev/null
+++ b/src/views/pageMelon/index.vue
@@ -0,0 +1,65 @@
+<template>
+  <section></section>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      popupMsg: '',
+      synth: window.speechSynthesis,
+    };
+  },
+  mounted() {
+    this.$nextTick(() => {
+      setTimeout(() => {
+        this.popupMsg = `请您的家属到手术室门口接病人${Date.now()}`;
+      }, 1000);
+    });
+  },
+  watch: {
+    popupMsg(newVal) {
+      if (newVal) {
+        console.log(newVal);
+        this.speakText(newVal);
+      }
+    },
+  },
+  methods: {
+    speakText(text) {
+      if (this.synth) {
+        // 清除之前的语音合成
+        this.synth.cancel();
+
+        // 等待语音列表加载完成
+        const checkVoices = () => {
+          const voices = this.synth.getVoices();
+          if (voices.length !== 0) {
+            clearInterval(voicesCheckInterval);
+
+            // 创建 SpeechSynthesisUtterance 实例
+            const utterance = new SpeechSynthesisUtterance(text);
+            utterance.rate = 0.6;
+            const selectedVoice = voices.find(voice => voice.lang === 'zh-CN');
+            if (selectedVoice) {
+              utterance.voice = selectedVoice;
+            }
+
+            // 添加 onend 事件处理器
+            utterance.onend = function () {
+              this.popupMsg = '';
+              console.log('Speech has finished.');
+            };
+
+            // 播放语音
+            this.synth.speak(utterance);
+          }
+        };
+
+        // 定期检查语音列表是否加载完成
+        const voicesCheckInterval = setInterval(checkVoices, 100);
+      }
+    },
+  },
+};
+</script>
diff --git a/src/views/scheduleList/index.vue b/src/views/scheduleList/index.vue
index dbcbda9..802f94c 100644
--- a/src/views/scheduleList/index.vue
+++ b/src/views/scheduleList/index.vue
@@ -18,13 +18,13 @@
     <main class="h-[calc(100vh-18.51vh)] p-[24px] pb-0 relative" ref="mainRef">
       <div class="absolute top-[24px] left-1/2 -translate-x-1/2 w-[calc(100%-48px)]">
         <div class="bg-[#9A82FF] flex text-center" :style="carouselNav">
-          <div class="w-[7%] border-r">手术间</div>
-          <div class="w-[7%] border-r">台次</div>
-          <div class="w-[8%] border-r truncate">患者姓名</div>
-          <div class="w-[16%] border-r">科室</div>
-          <div class="w-[27%] border-r">手术名称</div>
-          <div class="w-[27%] border-r">手术医生</div>
-          <div class="w-[8%]">状态</div>
+          <div class="w-[7%] font-semibold border-r">手术间</div>
+          <div class="w-[7%] font-semibold border-r">台次</div>
+          <div class="w-[8%] font-semibold border-r truncate">患者姓名</div>
+          <div class="w-[16%] font-semibold border-r">科室</div>
+          <div class="w-[27%] font-semibold border-r">手术名称</div>
+          <div class="w-[27%] font-semibold border-r">手术医生</div>
+          <div class="w-[8%] font-semibold">状态</div>
         </div>
         <div :style="carouselWrap" class="border border-[#9A82FF] border-t-0" v-loading="isLoading">
           <template v-if="patientList['length']">
@@ -33,18 +33,18 @@
                 <section class="carouselItemBox">
                   <div v-for="(subItem, index) in item" :key="index" :style="carouselItemStyle">
                     <div class="flex text-center">
-                      <div class="w-[7%] border-r text-[#333] truncate px-3">{{ subItem['RoomName'] }}</div>
-                      <div class="w-[7%] border-r text-[#333] truncate px-3">{{ subItem['Sequence'] }}</div>
-                      <div class="w-[8%] border-r text-[#333] truncate px-3">{{ subItem['PatientName'] }}</div>
-                      <div class="w-[16%] border-r text-[#333] truncate px-3">{{ subItem['DeptName'] }}</div>
-                      <div class="w-[27%] border-r text-[#333] px-3">
+                      <div class="w-[7%] border-r text-[#333] font-semibold truncate px-3">{{ subItem['RoomName'] }}</div>
+                      <div class="w-[7%] border-r text-[#333] font-semibold truncate px-3">{{ subItem['Sequence'] }}</div>
+                      <div class="w-[8%] border-r text-[#333] font-semibold truncate px-3">{{ subItem['PatientName'] }}</div>
+                      <div class="w-[16%] border-r text-[#333] font-semibold truncate px-3">{{ subItem['DeptName'] }}</div>
+                      <div class="w-[27%] border-r text-[#333] font-semibold px-3">
                         <marquee scrollamount="3" class="text-[#333]" :style="carouselItemStyle">{{ subItem['OperationName'] }}</marquee>
                       </div>
-                      <div class="w-[27%] border-r text-[#333] px-3 truncate">
+                      <div class="w-[27%] border-r text-[#333] font-semibold px-3 truncate">
                         <!-- <marquee scrollamount="2" class="text-[#333]" :style="carouselItemStyle">{{ subItem['SurgeonLists'] }}</marquee> -->
                         {{ subItem['SurgeonLists'] }}
                       </div>
-                      <div class="w-[8%] text-[#333]" :style="{ color: `${textToColor(subItem['ProcStatusName'])}` }">
+                      <div class="w-[8%] font-semibold text-[#333]" :style="{ color: `${textToColor(subItem['ProcStatusName'])}` }">
                         {{ subItem['ProcStatusName'] }}
                       </div>
                     </div>
diff --git a/src/views/waitList/index.vue b/src/views/waitList/index.vue
index 0dd5191..df5a17b 100644
--- a/src/views/waitList/index.vue
+++ b/src/views/waitList/index.vue
@@ -15,14 +15,14 @@
         <p class="text-[1.66vh]">{{ formatDate }}</p>
       </div>
     </nav>
-    <main class="h-[calc(100vh-18.51vh)] p-[24px] pb-0 relative" ref="mainRef">
-      <div class="absolute top-[24px] left-1/2 -translate-x-1/2 w-[calc(100%-48px)]">
+    <main class="h-[calc(100vh-18.51vh)] p-[15px] pb-0 relative overflow-hidden" ref="mainRef">
+      <div class="absolute top-[24px] left-1/2 -translate-x-1/2 w-[calc(100%-30px)]">
         <div class="bg-[#9A82FF] flex text-center" :style="carouselNav">
-          <div class="w-[16%] border-r">手术间</div>
-          <div class="w-[20%] border-r">患者姓名</div>
-          <div class="w-[16%] border-r">床号</div>
-          <div class="w-[28%] border-r">科室</div>
-          <div class="w-[20%]">状态</div>
+          <div class="w-[16%] font-semibold border-r">手术间</div>
+          <div class="w-[20%] font-semibold border-r">患者姓名</div>
+          <div class="w-[16%] font-semibold border-r">床号</div>
+          <div class="w-[28%] font-semibold border-r">科室</div>
+          <div class="w-[20%] font-semibold">状态</div>
         </div>
         <div :style="carouselWrap" class="border border-[#9A82FF] border-t-0" v-loading="isLoading">
           <template v-if="patientList['length']">
@@ -32,11 +32,11 @@
                   <template v-for="(subItem, index) in item">
                     <div :key="index" :style="carouselItemStyle">
                       <div class="flex text-center">
-                        <div class="w-[16%] border-r text-[#333] truncate">{{ subItem['RoomName'] }}</div>
-                        <div class="w-[20%] border-r text-[#333] truncate">{{ subItem['PatientName'] }}</div>
-                        <div class="w-[16%] border-r text-[#333] truncate">{{ subItem['BedNo'] }}</div>
-                        <div class="w-[28%] border-r text-[#333] truncate">{{ subItem['DeptName'] }}</div>
-                        <div class="w-[20%] text-[#333]" :style="{ color: `${textWaitToColor(subItem['ProcStatusName'])}` }">
+                        <div class="w-[16%] border-r text-[#333] font-semibold truncate">{{ subItem['RoomName'] }}</div>
+                        <div class="w-[20%] border-r text-[#333] font-semibold truncate">{{ subItem['PatientName'] }}</div>
+                        <div class="w-[16%] border-r text-[#333] font-semibold truncate">{{ subItem['BedNo'] }}</div>
+                        <div class="w-[28%] border-r text-[#333] font-semibold truncate">{{ subItem['DeptName'] }}</div>
+                        <div class="w-[20%] text-[#333] font-semibold" :style="{ color: `${textWaitToColor(subItem['ProcStatusName'])}` }">
                           {{ subItem['ProcStatusName'] }}
                         </div>
                       </div>
@@ -49,13 +49,13 @@
         </div>
       </div>
 
-      <div class="absolute bottom-4 left-1/2 -translate-x-1/2 flex">
+      <div class="absolute bottom-2 left-1/2 -translate-x-1/2 flex">
         <template v-for="(item, index) in patientList">
           <div class="w-3 h-3 rounded-full bg-[#D8D8D8] mx-1" :class="{ '!bg-[#8C8D92]': index == activeIndex }" :key="index" />
         </template>
       </div>
     </main>
-    <footer class="h-[7.4vh] flex items-center justify-around bg-[#5D49AF]">
+    <footer class="h-[7.4vh] flex items-center justify-around bg-[#5D49AF] overflow-hidden">
       <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.png" />
@@ -68,7 +68,7 @@
 
 <script>
 import { getAnesPatientList } from '@/api/waitList';
-import { Carousel, CarouselItem } from 'element-ui';
+import { Carousel, CarouselItem, Notification } from 'element-ui';
 import dayjs from 'dayjs';
 import { statusToTxt, textWaitToColor } from '@/utils/common';
 import Stomp from 'stompjs';
@@ -137,7 +137,7 @@ export default {
     },
     onCalculate() {
       // 根据展示数量计算高度
-      this.mainRefHeight = parseInt(this.$refs.mainRef.clientHeight - 24 - 40);
+      this.mainRefHeight = parseInt(this.$refs.mainRef.clientHeight - 15 - 40);
       const rowHeight = this.mainRefHeight / (this.showItemNum + 1);
       this.carouselNav = {
         'font-size': `${(rowHeight * 0.53).toFixed(2)}px`,
@@ -202,9 +202,9 @@ export default {
       }, 35000);
       window.addEventListener('resize', this.onCalculate);
       this.setRabitMQ();
-      setTimeout(() => {
-        this.popupMsg = `请0的家属到手术室门口接病人`;
-      }, 1000);
+      // setTimeout(() => {
+      //   this.popupMsg = `请0的家属到手术室门口接病人`;
+      // }, 1000);
     });
   },
   components: {
@@ -214,23 +214,40 @@ export default {
   watch: {
     popupMsg(newVal) {
       if (newVal) {
-        // const h = this.$createElement;
-        // Notification({
-        //   title: '呼叫信息',
-        //   message: h('i', { style: 'color: teal;font-size:24px' }, newVal),
-        //   duration: 12000,
-        // });
-        // if (this.synth) {
-        //   const utterance = new SpeechSynthesisUtterance([newVal, newVal, newVal].join(''));
-        //   const voices = synth.getVoices();
-        //   utterance.onend = function () {
-        //     Notification.closeAll();
-        //     this.newVal = '';
-        //   };
-        //   window.speechSynthesis.speak(utterance);
-        // } else {
-        //   alert('您的浏览器不支持语音合成');
-        // }
+        const h = this.$createElement;
+        Notification({
+          title: '呼叫信息',
+          message: h('i', { style: 'color: teal;font-size:24px' }, newVal),
+          duration: 12000,
+        });
+        if (this.synth) {
+          console.log(this.synth);
+          const utterance = new SpeechSynthesisUtterance([newVal, newVal, newVal].join(''));
+          utterance.rate = 0.6;
+          const voices = this.synth.getVoices();
+          const selectedVoice = voices.find(voice => voice.lang === 'zh-CN');
+          if (selectedVoice) {
+            utterance.voice = selectedVoice;
+          }
+
+          // 添加 onend 事件处理器
+          utterance.onend = function () {
+            this.popupMsg = '';
+            Notification.colseAll();
+            console.log('Speech has finished.');
+          };
+
+          this.synth.speak(utterance);
+
+          // 等待语音列表加载完成
+          const checkVoices = () => {
+            if (this.synth.getVoices().length !== 0) {
+              clearInterval(voicesCheckInterval);
+            }
+          };
+
+          const voicesCheckInterval = setInterval(checkVoices, 100);
+        }
       }
     },
   },