From 81d7140c3590a24a140eb42f1a4f06750e9284fe Mon Sep 17 00:00:00 2001
From: "@0Melon0" <576788380@qq.com>
Date: Thu, 11 Jul 2024 16:21:05 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E5=AE=8C=E6=88=90=E5=A4=A7=E5=B1=8F?=
 =?UTF-8?q?=E6=92=AD=E6=8A=A5=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 1.html                           |  99 +++++++++++++++---------
 src/views/scheduleList/index.vue |   2 +-
 src/views/waitList/index.vue     | 129 ++++++++++++++++++++-----------
 3 files changed, 145 insertions(+), 85 deletions(-)
diff --git a/1.html b/1.html
index 8708f7c..521fb16 100644
--- a/1.html
+++ b/1.html
@@ -1,46 +1,69 @@
 <!DOCTYPE html>
 <html>
-<head>
-  <title>Speech Synthesis Example</title>
-</head>
-<body>
-  <h1>Speech Synthesis Example</h1>
-  <input type="text" id="text" value="请0的家属到手术室门口接病人">
-  <br>
-  <button onclick="speakText()">Speak</button>
-
-  <script>
-    const synth = window.speechSynthesis;
-
-    function speakText() {
-      const textInput = document.getElementById('text').value;
-      const utterance = new SpeechSynthesisUtterance(textInput);
-
-      // 固定播放速度和语音
-      utterance.rate = 1.0; // 播放速度
-      const voices = synth.getVoices();
-      const selectedVoice = voices.find(voice => voice.lang === 'zh-CN'); // 固定选择中文（普通话）的语音
-
-      if (selectedVoice) {
-        utterance.voice = selectedVoice;
-      }
+  <head>
+    <title>Speech Synthesis Example</title>
+  </head>
+  <body>
+    <h1>Speech Synthesis Example</h1>
+    <input type="text" id="text" value="请0的家属到手术室门口接病人" />
+    <br />
+    <label for="rate">Rate:</label>
+    <input type="number" id="rate" value="1" step="0.1" min="0.1" max="10" />
+    <br />
+    <label for="voice">Voice:</label>
+    <select id="voiceSelect"></select>
+    <br />
+    <button onclick="speakText()">Speak</button>
 
-      // 添加 onend 事件处理器
-      utterance.onend = function(event) {
-        console.log('Speech has finished.');
-      };
+    <script>
+      const synth = window.speechSynthesis;
+      const voiceSelect = document.getElementById('voiceSelect');
 
-      window.speechSynthesis.speak(utterance);
-    }
+      function populateVoiceList() {
+        const voices = synth.getVoices();
+        console.log(voices);
+        if (voices.length === 0) {
+          synth.onvoiceschanged = populateVoiceList;
+        } else {
+          voiceSelect.innerHTML = ''; // 清空之前的选项
+          voices.forEach((voice, index) => {
+            const option = document.createElement('option');
+            option.textContent = `${voice.name} (${voice.lang})`;
+            console.log(`${voice.name} (${voice.lang})`);
+            option.value = index;
+            voiceSelect.appendChild(option);
+          });
+        }
+      }
 
-    // 等待语音列表加载完成
-    function checkVoices() {
-      if (synth.getVoices().length !== 0) {
-        clearInterval(voicesCheckInterval);
+      populateVoiceList();
+      if (typeof synth.onvoiceschanged !== 'undefined') {
+        synth.onvoiceschanged = populateVoiceList;
       }
-    }
 
-    const voicesCheckInterval = setInterval(checkVoices, 100);
-  </script>
-</body>
+      function speakText() {
+        window.speechSynthesis.cancel(); // 清除之前的语音合成
+
+        setTimeout(() => {
+          const textInput = document.getElementById('text').value;
+          const rate = parseFloat(document.getElementById('rate').value);
+
+          
+          const utterance = new SpeechSynthesisUtterance([textInput, textInput, textInput].join(''));
+
+          const selectedVoiceIndex = voiceSelect.selectedOptions[0].value;
+          const voices = synth.getVoices();
+          utterance.voice = voices[selectedVoiceIndex];
+          utterance.rate = rate;
+
+          utterance.onend = function (event) {
+            console.log('Speech has finished.');
+            alert('Speech has finished.');
+          };
+
+          window.speechSynthesis.speak(utterance);
+        }, 100); // 延迟 100 毫秒
+      }
+    </script>
+  </body>
 </html>
diff --git a/src/views/scheduleList/index.vue b/src/views/scheduleList/index.vue
index 802f94c..ab06ddb 100644
--- a/src/views/scheduleList/index.vue
+++ b/src/views/scheduleList/index.vue
@@ -116,7 +116,7 @@ export default {
                 this.patientList[groupIndex] = [element];
               }
             }
-            if (!this.carouselTimer) {
+            if (!this.carouselTimer && res['Data']['length'] > this.showItemNum) {
               this.onCarouselTimer();
             }
           } else {
diff --git a/src/views/waitList/index.vue b/src/views/waitList/index.vue
index 3b213c7..c516ca3 100644
--- a/src/views/waitList/index.vue
+++ b/src/views/waitList/index.vue
@@ -47,6 +47,13 @@
             </el-carousel>
           </template>
         </div>
+        <div class="popupBox" v-if="showPopup">
+          <div>
+            <p v-for="(item, index) in popupMag" :key="index">
+              {{ item }}
+            </p>
+          </div>
+        </div>
       </div>
 
       <div class="absolute bottom-2 left-1/2 -translate-x-1/2 flex">
@@ -68,7 +75,7 @@
 
 <script>
 import { getAnesPatientList } from '@/api/waitList';
-import { Carousel, CarouselItem, Notification } from 'element-ui';
+import { Carousel, CarouselItem } from 'element-ui';
 import dayjs from 'dayjs';
 import { statusToTxt, textWaitToColor } from '@/utils/common';
 import Stomp from 'stompjs';
@@ -90,7 +97,11 @@ export default {
       carouselTimer: null,
       activeIndex: 0,
       getDataTimer: null,
-      popupMsg: '',
+      popupMsgList: [],
+      showPopup: false,
+      hasPlay: false,
+      popupMag: [],
+      popupTimer: null,
       synth: window.speechSynthesis,
     };
   },
@@ -113,7 +124,7 @@ export default {
                 this.patientList[groupIndex] = [element];
               }
             }
-            if (!this.carouselTimer) {
+            if (!this.carouselTimer && res['Data']['length'] > this.showItemNum) {
               this.onCarouselTimer();
             }
           } else {
@@ -172,7 +183,7 @@ export default {
       try {
         if (frame.body) {
           let data = JSON.parse(frame.body);
-          this.popupMsg = data['msg'];
+          this.popupMsgList.push(data['msg'].replaceAll('，', ','));
         }
       } catch (e) {
         console.log(e);
@@ -186,56 +197,29 @@ export default {
         this.connect();
       }, 5000);
     },
-  },
-  mounted() {
-    this.$nextTick(() => {
-      this.onCalculate();
-
-      // 每秒更新一次当前时间
-      this.dateTimer = setInterval(() => {
-        this.currentDateTime = dayjs().format('YYYY-MM-DD HH:mm dddd');
-      }, 10000);
-
-      this.onGetPageData();
-      this.getDataTimer = setInterval(() => {
-        this.onGetPageData();
-      }, 35000);
-      window.addEventListener('resize', this.onCalculate);
-      this.setRabitMQ();
-      // setTimeout(() => {
-      //   this.popupMsg = `请0的家属到手术室门口接病人`;
-      // }, 1000);
-    });
-  },
-  components: {
-    'el-carousel': Carousel,
-    'el-carousel-item': CarouselItem,
-  },
-  watch: {
-    popupMsg(newVal) {
-      if (newVal) {
-        const h = this.$createElement;
-        Notification({
-          title: '呼叫信息',
-          message: h('i', { style: 'color: teal;font-size:24px' }, newVal),
-          duration: 12000,
-        });
+    onPopupPlay() {
+      if (!this.hasPlay && this.popupMsgList.length) {
+        this.hasPlay = true;
+        this.popupMag = this.popupMsgList[0].replace(/[,，]/g, '').split('#');
+        this.showPopup = true;
         if (this.synth) {
-          console.log(this.synth);
-          const utterance = new SpeechSynthesisUtterance([newVal, newVal, newVal].join(''));
-          utterance.rate = 0.6;
+          const utterance = new SpeechSynthesisUtterance([this.popupMsgList[0]].join(''));
+          utterance.rate = 0.4;
           const voices = this.synth.getVoices();
-          const selectedVoice = voices.find(voice => voice.lang === 'zh-CN');
+          const selectedVoice = voices.find(voice => voice.lang === 'zh-TW');
           if (selectedVoice) {
             utterance.voice = selectedVoice;
+          } else {
+            console.log('voices not fount');
           }
 
           // 添加 onend 事件处理器
           utterance.onend = function () {
-            this.popupMsg = '';
-            // Notification.colseAll();
-            console.log('Speech has finished.');
-          };
+            this.popupMag = [];
+            this.showPopup = false;
+            this.hasPlay = false;
+            this.popupMsgList.shift();
+          }.bind(this);
 
           this.synth.speak(utterance);
 
@@ -251,6 +235,34 @@ export default {
       }
     },
   },
+  mounted() {
+    this.$nextTick(() => {
+      this.onCalculate();
+
+      // 每秒更新一次当前时间
+      this.dateTimer = setInterval(() => {
+        this.currentDateTime = dayjs().format('YYYY-MM-DD HH:mm dddd');
+      }, 10000);
+
+      this.onGetPageData();
+      this.getDataTimer = setInterval(() => {
+        this.onGetPageData();
+      }, 35000);
+      this.popupTimer = setInterval(() => {
+        this.onPopupPlay();
+      }, 2000);
+      window.addEventListener('resize', this.onCalculate);
+      this.setRabitMQ();
+
+      // setTimeout(() => {
+      //   this.popupMsgList.push('请,金尧仙,的家属#到,手术室门口接病人');
+      // }, 3000);
+    });
+  },
+  components: {
+    'el-carousel': Carousel,
+    'el-carousel-item': CarouselItem,
+  },
   computed: {
     formatDate() {
       const timeArr = this.currentDateTime.split(' ');
@@ -284,6 +296,7 @@ export default {
     clearInterval(this.dateTimer);
     clearInterval(this.carouselTimer);
     clearInterval(this.getDataTimer);
+    clearInterval(this.popupTimer);
     // 组件销毁前移除 resize 事件监听器
     window.removeEventListener('resize', this.onCalculate);
   },
@@ -306,4 +319,28 @@ export default {
     }
   }
 }
+.popupBox {
+  position: absolute;
+  top: 0%;
+  left: 0%;
+  width: 100%;
+  height: 100%;
+  z-index: 9999;
+  div {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    box-shadow: 0px 3px 14px 0px rgba(0, 0, 0, 0.2);
+    font-size: 9vh;
+    white-space: nowrap;
+    padding: 3vh;
+    backdrop-filter: blur(2px);
+    background: #ece5ffe6;
+    p {
+      color: #333;
+      text-align: center;
+    }
+  }
+}
 </style>
