[Mod 0000] 公司端添加语音播报

src/layouts/default/header/components/VoiceBroadcast.vue

@@ -39,7 +39,7 @@
             <div>{{ item['isok'] ? '已解决' : '未解决' }}</div>
           </div>
         </div>
-        <div v-if="broadcastList.length > 0" class="more" @click="toMore">更多>></div>
+        <div class="more" @click="toMore">更多>></div>
         <!-- <div v-if="broadcastList.length > 0" class="more" @click.self="test()">测试>></div> -->
       </div>
     </div>
@@ -129,7 +129,6 @@
           if (isBroad.value) {
             await speakVoice.getSpeechCnVoices();
             const messageText = data['warndata'];
-            // const messageText = '这是一个测试';
             speakVoice.handleReply(messageText);
             const time = dayjs().format('YYYY-MM-DD HH:mm:ss');
             console.log(time + '语音播报开始报警------>', data);

src/layouts/default/header/components/VoiceBroadcastGsd.vue

@@ -11,7 +11,7 @@
         <div class="message-title">预警通知</div>
         <div class="badge-box">
           <ClearOutlined style="font-size: 20px; color: #fff" @click="clearInfo" />
-          <!-- <SoundOutlined :class="{ 'no-play': !isBroad }" style="font-size: 20px; color: #fff" @click="handleBroad" /> -->
+          <SoundOutlined :class="{ 'no-play': !isBroad }" style="font-size: 20px; color: #fff" @click="handleBroad" />
         </div>
       </div>
       <div class="broadcast-context">
@@ -38,36 +38,36 @@
                         <div>{{ item['isok'] ? '已解决' : '未解决' }}</div> -->
           </div>
         </div>
-        <div v-if="broadcastList" class="more" @click="toMore">更多>></div>
+        <div class="more" @click="toMore">更多>></div>
         <!-- <div v-if="broadcastList.length > 0" class="more" @click.self="test()">测试>></div> -->
       </div>
     </div>
   </div>
 </template>
 <script lang="ts">
-  import { Tooltip, Badge } from 'ant-design-vue';
   import { SoundOutlined, ClearOutlined, BellOutlined, WarningOutlined } from '@ant-design/icons-vue';
-  import Icon from '/@/components/Icon';
   import { defineComponent, ref, unref, onMounted, nextTick, computed } from 'vue';
-  import { defHttp } from '/@/utils/http/axios';
   import { useRouter } from 'vue-router';
   import { connectWebSocket, onWebSocket } from '/@/hooks/web/useWebSocket';
   import { getToken } from '/@/utils/auth';
   import { useUserStore } from '/@/store/modules/user';
   import { useGlobSetting } from '/@/hooks/setting';
+  import SpeakVoice from './notify/speakVoice';
 
   import { useDrag } from '@/hooks/event/useDrag';
   export default defineComponent({
     name: 'VoiceBroadcast',
-    components: { Icon, Tooltip, Badge, SoundOutlined, ClearOutlined, BellOutlined, WarningOutlined },
+    components: { SoundOutlined, ClearOutlined, BellOutlined, WarningOutlined },
 
     setup() {
+      let speakVoice;
       let websocketMsg = ref<any[]>([]);
       const userStore = useUserStore();
       const glob = useGlobSetting();
       const router = useRouter();
       const activeKey = ref(0);
       const isShowWarningBroad = ref(false);
+      const isBroad = ref(true);
       const isWarningDot = ref(false);
       let broadcastList = computed(() => {
         return localStorage.getItem('messageArr');
@@ -83,7 +83,9 @@
           });
         }
       }
-
+      function handleBroad() {
+        isBroad.value = !isBroad.value;
+      }
       async function clearInfo() {
         localStorage.removeItem('messageArr');
       }
@@ -108,7 +110,6 @@
       }
 
       async function onWebSocketMessage(data) {
-        debugger;
         console.log('WebSocket 监测消息--------------》', data);
         if (data.topic === 'warn' || data.cmd === 'user') {
           const messageText = data['warndata'];
@@ -117,11 +118,17 @@
             localStorage.removeItem('messageArr');
             localStorage.setItem('messageArr', websocketMsg.value as any);
           } else {
+            websocketMsg.value.shift();
             websocketMsg.value.push({ label: messageText });
-            websocketMsg.value.splice(0, 1);
             localStorage.removeItem('messageArr');
             localStorage.setItem('messageArr', websocketMsg.value as any);
           }
+          if (isBroad.value) {
+            await speakVoice.getSpeechCnVoices();
+            speakVoice.handleReply(messageText);
+            const time = dayjs().format('YYYY-MM-DD HH:mm:ss');
+            console.log(time + '语音播报开始报警------>', data);
+          }
           //   const messageText = '这是一个测试';
           if (!isShowWarningBroad.value) {
             isWarningDot.value = true;
@@ -131,12 +138,13 @@
         }
       }
       onMounted(() => {
+        speakVoice = new SpeakVoice();
         nextTick(async () => {
           initWebSocket();
         });
-        // window.speechSynthesis.onvoiceschanged = () => {
-        //     console.log('语音列表已更新');
-        // };
+        window.speechSynthesis.onvoiceschanged = () => {
+          console.log('语音列表已更新');
+        };
       });
 
       return {
@@ -147,6 +155,7 @@
         toMore,
         clearInfo,
         isWarningDot,
+        handleBroad,
       };
     },
   });