|
@@ -1,20 +1,21 @@
|
|
<template>
|
|
<template>
|
|
- <div style="position: fixed; z-index: 999; right: 100px; top: 18px; color: #fff">
|
|
|
|
|
|
+ <div style="position: fixed; z-index: 999; right: 95px; top: 18px; color: #fff">
|
|
<div class="btn" @click="showWarningBroad">
|
|
<div class="btn" @click="showWarningBroad">
|
|
<!-- <div>语音播报</div>
|
|
<!-- <div>语音播报</div>
|
|
<a-badge :count="10">
|
|
<a-badge :count="10">
|
|
<a href="#" class="head-example"></a>
|
|
<a href="#" class="head-example"></a>
|
|
</a-badge> -->
|
|
</a-badge> -->
|
|
- <a-badge dot>
|
|
|
|
- <BellOutlined style="font-size: 20px; color: #fff" />
|
|
|
|
|
|
+ <a-badge :dot="isWarningDot">
|
|
|
|
+ <!-- <BellOutlined style="font-size: 22px; color: #fff; margin-right: 20px" /> -->
|
|
|
|
+ <WarningOutlined style="font-size: 22px; color: #fff" />
|
|
</a-badge>
|
|
</a-badge>
|
|
</div>
|
|
</div>
|
|
<div v-if="isShowWarningBroad" class="broadcast">
|
|
<div v-if="isShowWarningBroad" class="broadcast">
|
|
<div class="title">
|
|
<div class="title">
|
|
- <div class="message-title">消息通知</div>
|
|
|
|
- <!-- <div class="badge-box">
|
|
|
|
- <SoundOutlined style="font-size: 20px; color: #000" />
|
|
|
|
- </div> -->
|
|
|
|
|
|
+ <div class="message-title">预警通知</div>
|
|
|
|
+ <div class="badge-box">
|
|
|
|
+ <SoundOutlined :class="{ 'no-play': !isBroad }" style="font-size: 20px; color: #000" @click="handleBroad" />
|
|
|
|
+ </div>
|
|
</div>
|
|
</div>
|
|
<div class="broadcast-context">
|
|
<div class="broadcast-context">
|
|
<div class="context-tab">
|
|
<div class="context-tab">
|
|
@@ -36,7 +37,7 @@
|
|
<div>{{ item['wardescrip'] || item['nwartype_dictText'] }}</div>
|
|
<div>{{ item['wardescrip'] || item['nwartype_dictText'] }}</div>
|
|
<div>{{ item['isok'] ? '已解决' : '未解决' }}</div>
|
|
<div>{{ item['isok'] ? '已解决' : '未解决' }}</div>
|
|
</div>
|
|
</div>
|
|
- <div v-if="broadcastList.length > 5" class="more" @click="toMore">更多</div>
|
|
|
|
|
|
+ <div v-if="broadcastList.length > 0" class="more" @click="toMore">更多>></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@@ -44,28 +45,31 @@
|
|
</template>
|
|
</template>
|
|
<script lang="ts">
|
|
<script lang="ts">
|
|
import { Tooltip, Badge } from 'ant-design-vue';
|
|
import { Tooltip, Badge } from 'ant-design-vue';
|
|
- import { SoundOutlined, BellOutlined } from '@ant-design/icons-vue';
|
|
|
|
|
|
+ import { SoundOutlined, BellOutlined, WarningOutlined } from '@ant-design/icons-vue';
|
|
import Icon from '/@/components/Icon';
|
|
import Icon from '/@/components/Icon';
|
|
import { defineComponent, ref, unref, onMounted } from 'vue';
|
|
import { defineComponent, ref, unref, onMounted } from 'vue';
|
|
import { defHttp } from '/@/utils/http/axios';
|
|
import { defHttp } from '/@/utils/http/axios';
|
|
import { useRouter } from 'vue-router';
|
|
import { useRouter } from 'vue-router';
|
|
import { connectWebSocket, onWebSocket } from '/@/hooks/web/useWebSocket';
|
|
import { connectWebSocket, onWebSocket } from '/@/hooks/web/useWebSocket';
|
|
import { getToken } from '/@/utils/auth';
|
|
import { getToken } from '/@/utils/auth';
|
|
- import md5 from 'crypto-js/md5';
|
|
|
|
import { useUserStore } from '/@/store/modules/user';
|
|
import { useUserStore } from '/@/store/modules/user';
|
|
import { useGlobSetting } from '/@/hooks/setting';
|
|
import { useGlobSetting } from '/@/hooks/setting';
|
|
|
|
+ import SpeakVoice from './notify/speakVoice';
|
|
|
|
|
|
export default defineComponent({
|
|
export default defineComponent({
|
|
name: 'VoiceBroadcast',
|
|
name: 'VoiceBroadcast',
|
|
- components: { Icon, Tooltip, Badge, SoundOutlined, BellOutlined },
|
|
|
|
|
|
+ components: { Icon, Tooltip, Badge, SoundOutlined, BellOutlined, WarningOutlined },
|
|
|
|
|
|
setup() {
|
|
setup() {
|
|
|
|
+ const speakVoice = new SpeakVoice();
|
|
const userStore = useUserStore();
|
|
const userStore = useUserStore();
|
|
const glob = useGlobSetting();
|
|
const glob = useGlobSetting();
|
|
const router = useRouter();
|
|
const router = useRouter();
|
|
const list = (params) => defHttp.get({ url: '/safety/ventanalyAlarmLog/list', params });
|
|
const list = (params) => defHttp.get({ url: '/safety/ventanalyAlarmLog/list', params });
|
|
const activeKey = ref(0);
|
|
const activeKey = ref(0);
|
|
const isShowWarningBroad = ref(false);
|
|
const isShowWarningBroad = ref(false);
|
|
|
|
+ const isBroad = ref(true);
|
|
|
|
+ const isWarningDot = ref(false);
|
|
const broadcastList = ref([]);
|
|
const broadcastList = ref([]);
|
|
function showWarningBroad() {
|
|
function showWarningBroad() {
|
|
isShowWarningBroad.value = !isShowWarningBroad.value;
|
|
isShowWarningBroad.value = !isShowWarningBroad.value;
|
|
@@ -74,10 +78,16 @@
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|
|
+ function handleBroad() {
|
|
|
|
+ isBroad.value = !isBroad.value;
|
|
|
|
+ }
|
|
|
|
+
|
|
async function toSelectList(key) {
|
|
async function toSelectList(key) {
|
|
activeKey.value = key;
|
|
activeKey.value = key;
|
|
const res = await list({ pageSize: 20, devicetype: '', isok: key == 1 ? 0 : key == 2 ? 1 : null });
|
|
const res = await list({ pageSize: 20, devicetype: '', isok: key == 1 ? 0 : key == 2 ? 1 : null });
|
|
broadcastList.value = res['records'];
|
|
broadcastList.value = res['records'];
|
|
|
|
+ // const isHasWarning = broadcastList.value.findIndex((item) => !item['isok']);
|
|
|
|
+ // isWarningDot.value = isHasWarning > -1 ? true : false;
|
|
}
|
|
}
|
|
|
|
|
|
async function toMore() {
|
|
async function toMore() {
|
|
@@ -99,9 +109,18 @@
|
|
}
|
|
}
|
|
|
|
|
|
function onWebSocketMessage(data) {
|
|
function onWebSocketMessage(data) {
|
|
- console.log('WebSocket 监测消息--------------》', data);
|
|
|
|
- if (data.cmd === 'topic' || data.cmd === 'user') {
|
|
|
|
- //
|
|
|
|
|
|
+ // console.log('WebSocket 监测消息--------------》', data);
|
|
|
|
+ if (data.topic === 'warn' || data.cmd === 'user') {
|
|
|
|
+ if (isBroad.value) {
|
|
|
|
+ const messageText = data['warndata'];
|
|
|
|
+ // const messageText = '这是一个测试';
|
|
|
|
+ speakVoice.handleReply(messageText);
|
|
|
|
+ }
|
|
|
|
+ if (!isShowWarningBroad.value) {
|
|
|
|
+ isWarningDot.value = true;
|
|
|
|
+ } else {
|
|
|
|
+ isWarningDot.value = false;
|
|
|
|
+ }
|
|
setTimeout(() => {
|
|
setTimeout(() => {
|
|
if (isShowWarningBroad.value) {
|
|
if (isShowWarningBroad.value) {
|
|
toSelectList(0);
|
|
toSelectList(0);
|
|
@@ -113,7 +132,7 @@
|
|
initWebSocket();
|
|
initWebSocket();
|
|
});
|
|
});
|
|
|
|
|
|
- return { showWarningBroad, isShowWarningBroad, activeKey, toSelectList, broadcastList, toMore };
|
|
|
|
|
|
+ return { showWarningBroad, isShowWarningBroad, activeKey, toSelectList, broadcastList, toMore, isBroad, handleBroad, isWarningDot };
|
|
},
|
|
},
|
|
});
|
|
});
|
|
</script>
|
|
</script>
|
|
@@ -124,9 +143,20 @@
|
|
cursor: pointer;
|
|
cursor: pointer;
|
|
display: flex;
|
|
display: flex;
|
|
}
|
|
}
|
|
|
|
+ .no-play {
|
|
|
|
+ background: linear-gradient(
|
|
|
|
+ to bottom left,
|
|
|
|
+ transparent 0%,
|
|
|
|
+ transparent calc(50% - 1px),
|
|
|
|
+ #000000 50%,
|
|
|
|
+ transparent calc(50% + 1px),
|
|
|
|
+ transparent 100%
|
|
|
|
+ );
|
|
|
|
+ }
|
|
.broadcast {
|
|
.broadcast {
|
|
width: 400px;
|
|
width: 400px;
|
|
height: 250px;
|
|
height: 250px;
|
|
|
|
+ border-radius: 4px;
|
|
position: fixed;
|
|
position: fixed;
|
|
top: 42px;
|
|
top: 42px;
|
|
right: 20px;
|
|
right: 20px;
|
|
@@ -200,6 +230,9 @@
|
|
}
|
|
}
|
|
.more {
|
|
.more {
|
|
cursor: pointer;
|
|
cursor: pointer;
|
|
|
|
+ &:hover {
|
|
|
|
+ color: #2174f0;
|
|
|
|
+ }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|