devicesmgt/sgzb-ui/src/App.vue

<template>
    <div id="app">
        <router-view />
        <theme-picker />

        <!-- <Notice :noticeDialog="noticeDialog"></Notice> -->
    </div>
</template>

<script>
import ThemePicker from '@/components/ThemePicker'
import { getHomeNoticeApi, setQueryNoticeApi } from '@/api/system/notice.js'
import Notice from '@/components/Notice'

export default {
    name: 'App',
    components: { ThemePicker, Notice },
    metaInfo() {
        return {
            title:
                this.$store.state.settings.dynamicTitle &&
                this.$store.state.settings.title,
            titleTemplate: (title) => {
                return title
                    ? `${title} - ${process.env.VUE_APP_TITLE}`
                    : process.env.VUE_APP_TITLE
            },
        }
    },
    data() {
        return {
            notifyPromise: Promise.resolve(),
            whiteList: [
                '/login',
                '/register',
                '/auth/sendCode',
                '/qrCode/qrCodePage',
            ],
            isWindowRefresh: false,
            noticeDialog: {
                outerTitle: '重要通知',
                outerWidth: '70%',
                outerVisible: false,
            },
        }
    },
    mounted() {
        // window.addEventListener('beforeunload', this.handleBeforeUnload)
        // if (this.isWindowRefresh) {
        //     this.getHomeNoticeFun()
        // }
        // this.noticeDialog.outerVisible = true
    },

    updated() {
        // if (!this.isWindowRefresh) {
        //     this.getHomeNoticeFun()
        // }
    },

    methods: {
        async getHomeNoticeFun() {
            const urlHref = window.location.href
            const isWhite = this.whiteList.some((e) => urlHref.indexOf(e) > 1)

            if (isWhite) {
                return
            }
            const res = await getHomeNoticeApi()
            if (res.code == 200) {
                res.data.forEach((item) => {
                    this.notifyPromise = this.notifyPromise.then(() => {
                        this.$notify({
                            title: `通知公告`,
                            dangerouslyUseHTMLString: true,
                            message: `${item.noticeContent}`,
                            duration: 0,
                            onClose: async () => {
                                const params = {
                                    noticeId: item.noticeId,
                                    userId: sessionStorage.getItem('userId'),
                                }
                                const res = await setQueryNoticeApi(params)
                            },
                        })
                    })
                })
            }
        },
    },
}
</script>
<style scoped >
#app .theme-picker {
    display: none;
}
</style>

<style lang="scss">
.el-notification {
    width: 440px;
}
.el-notification__title {
    font-size: 18px;
}
.el-notification__content {
    margin: 15px 0;
    font-size: 16px;
    line-height: 1.5;
}
</style>