update

1.添加弹窗提示音

src/App.vue

@@ -7,17 +7,19 @@
     import zhCN from 'ant-design-vue/es/locale/zh_CN';
     import dayjs from 'dayjs';
     import 'dayjs/locale/zh-cn';
-    import { onMounted } from 'vue';
+    import { h, nextTick, onMounted, ref, watch } from 'vue';
     import { getEmergencyCenterApi } from '/@/api/user.ts';
     import { useUserStore } from '/@/store/modules/user.ts';
     import { useRouter } from 'vue-router';
     import { getBaseLogin } from '/@/enum/pageEnum.ts';
+    import { Modal } from 'ant-design-vue';
 
     dayjs.locale('zh-cn');
     const locle = zhCN;
 
     const userStore = useUserStore();
     const router = useRouter();
+    const appRouteView = ref();
 
     onMounted(async () => {
         try {
@@ -31,7 +33,32 @@
                 userStore.setCenterInfo(result);
             }
         } catch (e) {}
+        if (userStore.getUserInfo) {
+        }
+        document.body.addEventListener('click', initAudio);
     });
+
+    watch(
+        () => userStore.getCount,
+        () => {
+            audioPlay();
+        }
+    );
+
+    const audio = new Audio('13203.wav');
+    function initAudio() {
+        audioPlay(true);
+        document.body.addEventListener('remove', initAudio);
+    }
+    function audioPlay(flag: boolean = false) {
+        audio.muted = flag;
+        audio.play();
+    }
 </script>
 <style lang="less" src="./assets/less/index.less"></style>
 <style src="./assets/theme/theme.css"></style>
+<style lang="less">
+    .modal-confirm-d {
+        top: 28% !important;
+    }
+</style>

src/store/modules/user.ts

@@ -21,6 +21,7 @@ export const useUserStore = defineStore({
         flag3: '', //新版大屏标识
         centerId: '', //中心点id
         centerInfo: null, //应急中心信息
+        count: 0,
     }),
     getters: {
         getUserInfo(): UserInfo {
@@ -50,6 +51,9 @@ export const useUserStore = defineStore({
         getCenterInfo(): any {
             return this.centerInfo || getAuthCache('centerInfo');
         },
+        getCount(): any {
+            return this.count || getAuthCache('count');
+        },
     },
     actions: {
         setToken(info: string | undefined) {
@@ -87,6 +91,10 @@ export const useUserStore = defineStore({
             this.centerInfo = info;
             setAuthCache('centerInfo', info);
         },
+        setCount() {
+            this.count++;
+            setAuthCache('count', this.count);
+        },
         /**
          * 登录事件
          */

src/utils/utils.ts

@@ -1,5 +1,7 @@
 import dayjs from 'dayjs';
 import { cloneDeep } from 'lodash-es';
+import { h, nextTick } from 'vue';
+import { Modal } from 'ant-design-vue';
 
 export function getZero(num: any) {
     if (num < 10) {
@@ -69,3 +71,17 @@ export function emptyChart() {
         },
     };
 }
+
+export function openTestModal() {
+    nextTick(() => {
+        Modal.warning({
+            content: h('span', { style: { color: '#ffffff' } }, '点击确定打开提示音'),
+            okText: '确定',
+            class: 'modal-confirm-d',
+            bodyStyle: {
+                background: '#00152b',
+                color: '#ffffff !important',
+            },
+        });
+    });
+}

src/views/centralScreen/centralScreen.vue

@@ -66,7 +66,7 @@
     import PhysicalExaminationData from '/@/views/centralScreen/components/physicalExaminationData.vue';
     import { useRefresh } from '/@/hooks/autoRefresh';
     import { DEFAULT_TIME } from '/@/hooks/autoRefresh/pageRefreshTime.ts';
-    import { useTopTime } from '/@/utils/utils.ts';
+    import { openTestModal, useTopTime } from '/@/utils/utils.ts';
     import { DataType, getSettings, ThemeType } from '/@/utils/settings.ts';
     import { useUserStore } from '/@/store/modules/user.ts';
     import PhoneDialog from '/@/views/centralScreen/components/phoneDialog.vue';
@@ -132,6 +132,7 @@
         console.log([getCenterInfo?.longitude || 106.32, getCenterInfo?.latitude || 38.45]);
         init();
         document.title = title.value;
+        openTestModal();
         document.addEventListener('visibilitychange', checkTabState);
         //设置主题
         store.setThemeType(ThemeType.dark);
@@ -288,6 +289,7 @@
     watch(emergencyData, (nVal) => {
         if (nVal) {
             nextTick(() => {
+                userStore.setCount();
                 setEmergencyData(nVal);
                 emergencyDialogRef.value.openDialog();
             });
@@ -305,18 +307,21 @@
             let { popType } = nVal;
             if (popType == 1) {
                 nextTick(() => {
+                    userStore.setCount();
                     setSocketData(nVal);
                     emergencyDialogRef.value.openDialog();
                 });
             }
             if (popType == 2) {
                 nextTick(() => {
+                    userStore.setCount();
                     setSocketData(nVal);
                     yunZuoXiDialogRef.value.openDialog();
                 });
             }
             if (popType == 3) {
                 nextTick(() => {
+                    userStore.setCount();
                     setSocketData(nVal);
                     employeeDialogRef.value.openDialog();
                 });

src/views/centralScreen/centralScreenD.vue

@@ -66,7 +66,7 @@
     import PhysicalExaminationData from '/@/views/centralScreen/components/physicalExaminationData.vue';
     import { useRefresh } from '/@/hooks/autoRefresh';
     import { DEFAULT_TIME } from '/@/hooks/autoRefresh/pageRefreshTime.ts';
-    import { useTopTime } from '/@/utils/utils.ts';
+    import { openTestModal, useTopTime } from '/@/utils/utils.ts';
     import { DataType, getSettings, ThemeType } from '/@/utils/settings.ts';
     import { useUserStore } from '/@/store/modules/user.ts';
     import PhoneDialog from '/@/views/centralScreen/components/phoneDialog.vue';
@@ -134,6 +134,7 @@
         console.log([getCenterInfo?.longitude || 106.32, getCenterInfo?.latitude || 38.45]);
         init();
         document.title = title.value;
+        openTestModal();
         document.addEventListener('visibilitychange', checkTabState);
         //设置主题
         store.setThemeType(ThemeType.dark);
@@ -290,6 +291,7 @@
     watch(emergencyData, (nVal) => {
         if (nVal) {
             nextTick(() => {
+                userStore.setCount();
                 setEmergencyData(nVal);
                 emergencyDialogRef.value.openDialog();
             });
@@ -307,18 +309,21 @@
             let { popType } = nVal;
             if (popType == 1) {
                 nextTick(() => {
+                    userStore.setCount();
                     setSocketData(nVal);
                     emergencyDialogRef.value.openDialog();
                 });
             }
             if (popType == 2) {
                 nextTick(() => {
+                    userStore.setCount();
                     setSocketData(nVal);
                     yunZuoXiDialogRef.value.openDialog();
                 });
             }
             if (popType == 3) {
                 nextTick(() => {
+                    userStore.setCount();
                     setSocketData(nVal);
                     employeeDialogRef.value.openDialog();
                 });

src/views/centralScreen/centralScreenYinChuan.vue

@@ -67,7 +67,7 @@
     import PhysicalExaminationData from '/@/views/centralScreen/components/physicalExaminationData.vue';
     import { useRefresh } from '/@/hooks/autoRefresh';
     import { DEFAULT_TIME } from '/@/hooks/autoRefresh/pageRefreshTime.ts';
-    import { useTopTime } from '/@/utils/utils.ts';
+    import { openTestModal, useTopTime } from '/@/utils/utils.ts';
     import { DataType, getSettings, ThemeType } from '/@/utils/settings.ts';
     import { useUserStore } from '/@/store/modules/user.ts';
     import PhoneDialog from '/@/views/centralScreen/components/phoneDialog.vue';
@@ -134,6 +134,7 @@
         console.log([getCenterInfo?.longitude || 106.32, getCenterInfo?.latitude || 38.45]);
         init();
         document.title = title.value;
+        openTestModal();
         document.addEventListener('visibilitychange', checkTabState);
         //设置主题
         store.setThemeType(ThemeType.dark);
@@ -289,6 +290,7 @@
 
     watch(emergencyData, (nVal) => {
         if (nVal) {
+            userStore.setCount();
             nextTick(() => {
                 setEmergencyData(nVal);
                 emergencyDialogRef.value.openDialog();
@@ -306,18 +308,21 @@
         if (nVal) {
             let { popType } = nVal;
             if (popType == 1) {
+                userStore.setCount();
                 nextTick(() => {
                     setSocketData(nVal);
                     emergencyDialogRef.value.openDialog();
                 });
             }
             if (popType == 2) {
+                userStore.setCount();
                 nextTick(() => {
                     setSocketData(nVal);
                     yunZuoXiDialogRef.value.openDialog();
                 });
             }
             if (popType == 3) {
+                userStore.setCount();
                 nextTick(() => {
                     setSocketData(nVal);
                     employeeDialogRef.value.openDialog();

src/views/index.vue

@@ -53,7 +53,7 @@
     import EmployeeDialog from '/@/views/components/employeeDialog.vue';
     import EmergencyDialog from '/@/views/components/emergencyDialog.vue';
     import YunZuoXiDialog from '/@/views/components/yunZuoXiDialog.vue';
-    import { useTopTime } from '/@/utils/utils.ts';
+    import { openTestModal, useTopTime } from '/@/utils/utils.ts';
     import { basicPath, emergencyPath, xianYunPath, useSocket } from '/@/utils/socket.ts';
     import { useRefresh } from '/@/hooks/autoRefresh';
     import { DEFAULT_TIME } from '/@/hooks/autoRefresh/pageRefreshTime.ts';
@@ -72,7 +72,6 @@
     const dayTimeT = ref();
     const interval = ref(1);
     const setting = getSettings(DataType.xian);
-
     function init() {
         getTime();
         interval.value = setInterval(() => {
@@ -89,6 +88,7 @@
     const store = useUserStore();
     onMounted(() => {
         init();
+        openTestModal();
         document.addEventListener('visibilitychange', checkTabState);
         //设置主题
         store.setThemeType(ThemeType.light);
@@ -166,6 +166,7 @@
     watch(socketData, (nVal) => {
         if (nVal) {
             nextTick(() => {
+                store.setCount();
                 setSocketData(nVal);
                 employeeDialogRef.value.openDialog();
             });
@@ -179,6 +180,7 @@
     watch(emergencyData, (nVal) => {
         if (nVal) {
             nextTick(() => {
+                store.setCount();
                 setEmergencyData(nVal);
                 emergencyDialogRef.value.openDialog();
             });
@@ -190,6 +192,7 @@
     watch(xianYunData, (nVal) => {
         if (nVal) {
             nextTick(() => {
+                store.setCount();
                 setXianYunData(nVal);
                 yunZuoXiDialogRef.value.openDialog();
             });

src/views/yinChuan/yinChuan.vue

@@ -67,7 +67,7 @@
     import PhoneDialog from '/@/views/components/phoneDialog/phoneDialog.vue';
     import TerminalAlarmDialog from '/@/views/yinChuan/componetns/TerminalAlarmDialog/TerminalAlarmDialog.vue';
     import EmergencyData from '/@/views/yinChuan/componetns/emergencyData/emergencyData.vue';
-    import { useTopTime } from '/@/utils/utils.ts';
+    import { openTestModal, useTopTime } from '/@/utils/utils.ts';
     import { basicPath, emergencyPath, useSocket, yinChuanPath } from '/@/utils/socket.ts';
     import { useRefresh } from '/@/hooks/autoRefresh';
     import { DEFAULT_TIME } from '/@/hooks/autoRefresh/pageRefreshTime.ts';
@@ -85,6 +85,7 @@
     onMounted(() => {
         init();
         document.title = title.value;
+        openTestModal();
         document.addEventListener('visibilitychange', checkTabState);
         //设置主题
         store.setThemeType(ThemeType.dark);
@@ -131,6 +132,7 @@
     watch(socketData, (nVal) => {
         if (nVal) {
             nextTick(() => {
+                store.setCount();
                 setSocketData(nVal);
                 employeeDialogRef.value.openDialog();
             });
@@ -201,6 +203,7 @@
     watch(emergencyData, (nVal) => {
         if (nVal) {
             nextTick(() => {
+                store.setCount();
                 setEmergencyData(nVal);
                 emergencyDialogRef.value.openDialog();
             });
@@ -212,6 +215,7 @@
     watch(yunZuoXiData, (nVal) => {
         if (nVal) {
             nextTick(() => {
+                store.setCount();
                 setYunZuoXiData(nVal);
                 yunZuoXiDialogRef.value.openDialog();
             });