Browse Source

增加告警提示音

develop
fuguobin 11 months ago
parent
commit
3a94e96bdb
  1. 1
      package.json
  2. 13
      src/api/waring/index.ts
  3. 3
      src/api/waring/types.ts
  4. 1
      src/assets/icons/alarm.svg
  5. BIN
      src/assets/media/alarm.mp3
  6. BIN
      src/assets/media/alarm1.mp3
  7. BIN
      src/assets/media/alarm2.mp3
  8. 40
      src/components/Widgets/button.vue
  9. 10
      src/styles/index.scss
  10. 2
      src/types/auto-imports.d.ts
  11. 1
      src/types/components.d.ts
  12. 95
      src/views/monitoring/components/header.vue
  13. 2
      src/views/monitoring/screen/components/main.vue
  14. 2
      vite.config.ts

1
package.json

@ -17,6 +17,7 @@
"@wangeditor/editor-for-vue": "^5.1.10",
"animate.css": "^4.1.1",
"axios": "^1.3.4",
"can-autoplay": "^3.0.2",
"crypto-js": "^4.2.0",
"echarts": "^5.2.2",
"element-plus": "^2.2.32",

13
src/api/waring/index.ts

@ -37,3 +37,16 @@ export function process(id: string) {
method: 'post'
});
}
/**
*
*
* @param data
*/
export function setAlarm(data: any) {
return request({
url: '/dc/dcBusiAlertJob/alertSwith',
method: 'post',
data: data
});
}

3
src/api/waring/types.ts

@ -6,7 +6,8 @@ export interface waringVo {
alertLastTime: string;
alertLevel: number;
alertName: string;
alertTime:string
alertSwitch: string;
alertTime: string;
alertReadTime: string;
deviceName: string;
deviceUuid: string;

1
src/assets/icons/alarm.svg

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1703641634745" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2841" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M804.93945313 922.18554688c-7.64648438-7.64648438-17.49023438-13.09570313-28.47656251-15.29296876-6.59179688-1.31835938-11.33789063-6.94335938-11.33789062-13.62304687V570.18359375c0-139.74609375-114.34570313-255.5859375-254.09179688-255.05859375-139.30664063 0.52734375-252.15820313 113.64257813-252.15820312 253.125v325.01953125c0 6.6796875-4.74609375 12.3046875-11.33789063 13.62304688-25.6640625 5.2734375-44.91210938 27.94921875-44.91210937 55.10742187h618.75c0-15.55664063-6.328125-29.61914063-16.43554688-39.81445313zM560.60351563 469.8125l-17.05078125 152.31445313H610.4375L463.484375 835.4375l17.05078125-152.31445313H413.5625L560.60351563 469.8125zM512 244.8125c-15.55664063 0-28.125-12.56835938-28.125-28.125V90.125c0-15.55664063 12.56835938-28.125 28.125-28.125s28.125 12.56835938 28.125 28.125v126.5625c0 15.55664063-12.56835938 28.125-28.125 28.125zM308.09375 322.24414062c-13.44726563 7.734375-30.67382813 3.1640625-38.40820313-10.28320312l-63.28125-109.59960938c-7.734375-13.44726563-3.1640625-30.67382813 10.28320313-38.40820312 13.44726563-7.734375 30.67382813-3.1640625 38.40820313 10.28320313l63.28125 109.59960937c7.734375 13.44726563 3.1640625 30.5859375-10.28320313 38.40820313zM715.90625 322.24414062c13.44726563 7.734375 30.67382813 3.1640625 38.40820313-10.28320312l63.28125-109.59960938c7.734375-13.44726563 3.1640625-30.67382813-10.28320313-38.40820312-13.44726563-7.734375-30.67382813-3.1640625-38.40820313 10.28320313l-63.28125 109.59960937c-7.734375 13.44726563-3.1640625 30.5859375 10.28320313 38.40820313zM239.97851562 453.02539062c-4.04296875 15.02929688-19.42382813 23.90625-34.45312499 19.86328125L83.26953125 440.19335937C68.24023437 436.15039062 59.36328125 420.76953125 63.31835937 405.74023437c4.04296875-15.02929688 19.42382813-23.90625 34.45312501-19.86328124l122.25585937 32.78320312c15.02929688 3.95507813 23.90625 19.3359375 19.95117188 34.36523438zM784.02148438 453.02539062c4.04296875 15.02929688 19.42382813 23.90625 34.45312499 19.86328125l122.25585938-32.78320312c15.02929688-4.04296875 23.90625-19.42382813 19.86328125-34.453125-4.04296875-15.02929688-19.42382813-23.90625-34.453125-19.86328125l-122.25585938 32.78320313c-14.94140625 4.04296875-23.81835938 19.42382813-19.86328124 34.453125z" fill="#d81e06" p-id="2842"></path></svg>

After

Width:  |  Height:  |  Size: 2.6 KiB

BIN
src/assets/media/alarm.mp3

Binary file not shown.

BIN
src/assets/media/alarm1.mp3

Binary file not shown.

BIN
src/assets/media/alarm2.mp3

Binary file not shown.

40
src/components/Widgets/button.vue

@ -0,0 +1,40 @@
<template>
<button class="btn-donate">确认</button>
</template>
<style scoped>
.btn-donate {
--clr-font-main: hsla(0 0% 20% / 100);
--btn-bg-1: hsla(194 100% 69% / 1);
--btn-bg-2: hsla(217 100% 56% / 1);
--btn-bg-color: hsla(360 100% 100% / 1);
--radii: 0.5em;
cursor: pointer;
padding: 8px 15px;
font-size: var(--size, 1rem);
font-family: 'Segoe UI', system-ui, sans-serif;
font-weight: 500;
transition: 0.8s;
background-size: 280% auto;
background-image: linear-gradient(325deg, var(--btn-bg-2) 0%, var(--btn-bg-1) 55%, var(--btn-bg-2) 90%);
border: none;
border-radius: var(--radii);
color: var(--btn-bg-color);
box-shadow: 0px 0px 20px rgba(71, 184, 255, 0.5), 0px 5px 5px -1px rgba(58, 125, 233, 0.25),
inset 4px 4px 8px rgba(175, 230, 255, 0.5), inset -4px -4px 8px rgba(19, 95, 216, 0.35);
}
.btn-donate:hover {
background-position: right top;
}
.btn-donate:is(:focus, :focus-visible, :active) {
outline: none;
box-shadow: 0 0 0 3px var(--btn-bg-color), 0 0 0 6px var(--btn-bg-2);
}
@media (prefers-reduced-motion: reduce) {
.btn-donate {
transition: linear;
}
}
</style>

10
src/styles/index.scss

@ -64,6 +64,15 @@
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
.title {
display: flex;
align-items: center;
.svg-icon {
width: 16px !important;
height: 16px !important;
margin-right: 5px;
}
}
span {
font-size: 16px;
@ -139,6 +148,7 @@
.confirm {
background-color: #022a5a !important;
border: 1px solid #114073;
margin-left: 10px;
}
}
}

2
src/types/auto-imports.d.ts

@ -2,7 +2,6 @@
export {}
declare global {
const EffectScope: typeof import('vue')['EffectScope']
const ElForm: typeof import('element-plus/es')['ElForm']
const ElMessage: typeof import('element-plus/es')['ElMessage']
const ElMessageBox: typeof import('element-plus/es')['ElMessageBox']
const ElNotification: typeof import('element-plus/es')['ElNotification']
@ -273,7 +272,6 @@ import { UnwrapRef } from 'vue'
declare module 'vue' {
interface ComponentCustomProperties {
readonly EffectScope: UnwrapRef<typeof import('vue')['EffectScope']>
readonly ElForm: UnwrapRef<typeof import('element-plus/es')['ElForm']>
readonly ElMessage: UnwrapRef<typeof import('element-plus/es')['ElMessage']>
readonly ElMessageBox: UnwrapRef<typeof import('element-plus/es')['ElMessageBox']>
readonly ElNotification: UnwrapRef<typeof import('element-plus/es')['ElNotification']>

1
src/types/components.d.ts

@ -8,6 +8,7 @@ export {}
declare module '@vue/runtime-core' {
export interface GlobalComponents {
Breadcrumb: typeof import('./../components/Breadcrumb/index.vue')['default']
Button: typeof import('./../components/Widgets/button.vue')['default']
ElBreadcrumb: typeof import('element-plus/es')['ElBreadcrumb']
ElBreadcrumbItem: typeof import('element-plus/es')['ElBreadcrumbItem']
ElButton: typeof import('element-plus/es')['ElButton']

95
src/views/monitoring/components/header.vue

@ -77,7 +77,10 @@
<div class="waringList">
<div class="item" v-for="(item, index) in waringData" :key="index">
<div class="name">
<span>{{ item.deviceName }}</span>
<div class="title">
<svg-icon icon-class="alarm" v-if="audioType === true && item.alertSwitch === '1'" />
<span>{{ item.deviceName }}</span>
</div>
<span class="time">{{ item.alertTime }}</span>
</div>
<div class="info">
@ -114,6 +117,13 @@
</el-table-column>
<el-table-column fixed="right" label="操作" align="center">
<template #default="scope">
<el-switch
v-model="scope.row.alertSwitchBoolean"
inline-prompt
active-text="开"
inactive-text="关"
@change="alarrmChange($event, scope.row)"
/>
<el-button class="confirm" type="info" size="small" @click="waringConfirm(scope.row)">确认</el-button>
</template>
</el-table-column>
@ -132,19 +142,24 @@
</div>
</n-card>
</n-modal>
<div class="alarm">
<audio loop autoplay muted ref="alarmRef" ebkit-playsinline="true" playsinline="true" :src="audioUrl"></audio>
</div>
</template>
<script lang="ts" setup>
<script setup>
import { useRoute, useRouter } from 'vue-router';
import { useUserStore } from '@/store/modules/user';
import { getWeather } from '@/api/user/index';
import { getWarList, process } from '@/api/waring/index';
import { waringVo } from '@/api/waring/types';
import { getWarList, process, setAlarm } from '@/api/waring/index';
// import { waringVo } from '@/api/waring/types';
import { Filter, Maximize, Settings, Power, Bell, ChartLine } from '@vicons/tabler';
import { CloseCircleOutline, ReturnDownBack } from '@vicons/ionicons5';
import { useDateFormat, useNow } from '@vueuse/core';
import { uniqueArrayObject } from '@/utils/index';
// import { uniqueArrayObject } from '@/utils/index';
import canAutoPlay from 'can-autoplay';
import mitt from '@/plugins/bus';
import calendar from '@/utils/lunar';
import audioUrl from '@/assets/media/alarm.mp3';
const userStore = useUserStore();
const hoursNow = useNow().value.getHours();
@ -157,8 +172,10 @@ const timer = ref();
const isCurrentRoute = ref(true);
const waringDrawer = ref(false);
const waringModal = ref(false);
const waringData = ref<waringVo[]>([]);
const waringList = ref<waringVo[]>([]);
// const waringData = ref<waringVo[]>([]);
// const waringList = ref<waringVo[]>([]);
const waringData = ref([]);
const waringList = ref([]);
const routerType = ref('');
const deptId = ref(0);
const params = reactive({
@ -167,9 +184,12 @@ const params = reactive({
pageNum: 1
});
const alarmRef = ref();
const audioType = ref(false);
const weatherData = ref({ city: '', weather: '', temperature: '', weatherImg: '' });
const lunarDay: any = calendar.solarToLunar(
const lunarDay = calendar.solarToLunar(
useNow().value.getUTCFullYear(),
useNow().value.getUTCMonth() + 1,
useNow().value.getUTCDate()
@ -211,10 +231,41 @@ const timePeriod = computed(() => {
}
});
mitt.on('waringMessage', (res: any) => {
mitt.on('waringMessage', res => {
//
console.log('waringMessage--', res.data);
waringData.value = res.data;
res.data.map(item => {
// console.log(item.deviceName, item.alertSwitch);
if (item.alertSwitch === '1') {
canAutoPlay.audio().then(({ result }) => {
if (result === true) {
audioType.value = true;
alarmRef.value.play();
alarmRef.value.muted = false;
} else {
ElMessageBox.alert('检测到您的浏览器不支持媒体自动播放,是否同意播放测试音?', '提示', {
// if you want to disable its autofocus
// autofocus: false,
showclose: false,
confirmButtonText: '同意',
callback: action => {
audioType.value = true;
alarmRef.value.play();
alarmRef.value.muted = false;
}
});
// this.$alert('', '', {
// confirmButtonText: '',
// callback: action => {
// alarmRef.value.play();
// }
// });
}
});
return;
}
});
// waringData.value.push(res.data)
// console.log("waringData--", waringData.value);
// waringData.value = uniqueArrayObject(waringData.value, "id")
@ -257,7 +308,7 @@ function lineClick() {
});
}
function handleCurrentChange(val: any) {
function handleCurrentChange(val) {
//
params.pageNum = val;
getwaringList();
@ -265,7 +316,7 @@ function handleCurrentChange(val: any) {
function getWeatherData() {
//
getWeather().then((res: any) => {
getWeather().then(res => {
if (res.code === 200) {
if (isCurrentRoute.value) {
timer.value = setTimeout(async () => {
@ -294,7 +345,7 @@ function getwaringList() {
orgCode: sessionStorage.getItem('deptId') === null ? 0 : Number(sessionStorage.getItem('deptId')),
params
};
getWarList(paramsr).then((res: any) => {
getWarList(paramsr).then(res => {
if (res.code === 200) {
waringList.value = res.rows;
params.total = res.total;
@ -303,7 +354,23 @@ function getwaringList() {
}
});
}
function waringConfirm(item: any) {
function alarrmChange(val, row) {
//
const paramsr = {
id: row.id,
flag: val === true ? '1' : '0'
};
setAlarm(paramsr).then(res => {
if (res.code === 200) {
if (val === false) {
audioType.value = false;
alarmRef.value.pause();
alarmRef.value.muted = true;
}
}
});
}
function waringConfirm(item) {
//
ElMessageBox.confirm('是否确认操作?', '提示', {
confirmButtonText: '确认',
@ -312,7 +379,7 @@ function waringConfirm(item: any) {
})
.then(() => {
const params = item.id;
process(params).then((res: any) => {
process(params).then(res => {
if (res.code === 200) {
waringList.value = res.data;
// waringDrawer.value = false

2
src/views/monitoring/screen/components/main.vue

@ -211,7 +211,7 @@ const userInfo = JSON.parse(userStorageInfo === null ? '' : userStorageInfo);
//const baseApi = import.meta.env.VITE_APP_BASE_API
//const apiUrl = baseApi.replace(/https?:/, '');
const wsUrl = `ws://${window.location.host}/ws/websocket/${userInfo.userName}`; //websocket
// const wsUrl = `ws://10.10.10.55:8021/ws/websocket/${userInfo.userName}`; //websocket
// const wsUrl = `ws://172.1.2.39:9010/websocket/${userInfo.userName}`; //websocket
const emit = defineEmits(['tableHeaderData']);
// const listData = ref([

2
vite.config.ts

@ -45,7 +45,7 @@ export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
hmr: true, //配置HMR
proxy: {
'/dev-api': {
// target: 'http://172.1.2.146:9010/', //本地接口地址
// target: 'http://172.1.2.39:9010/', //本地接口地址
// target: 'http://172.1.2.90:9010/', //本地接口地址
target: 'http://10.10.10.56:9010/', //线上测试接口地址
changeOrigin: true,

Loading…
Cancel
Save