hi-ucs/front/src/App.vue

<!--
 * @Author: hisense.wuhongjian
 * @Date: 2022-05-06 11:12:00
 * @LastEditors: Light
 * @LastEditTime: 2022-11-21 10:45:07
 * @Description: 告诉大家这是什么
-->
<template>
  <div id="vue-admin-beautiful">
    <a-config-provider :locale="locale">
      <router-view />
    </a-config-provider>
  </div>
</template>
<script setup>
  import onWholeWaterMark from '@/utils/waterMark'
  import * as moment from 'moment'
  import { getUser } from '@/api/home'
  import { getCategoryTreePage } from '@/api/personalCenter'
  import zhCN from 'ant-design-vue/es/locale/zh_CN'
  import Cookies from 'js-cookie'
  import { onBeforeUnmount, onMounted, watch, nextTick } from 'vue'
  import { useRouter } from 'vue-router'
  import mybus from '@/myplugins/mybus'
  const router = useRouter()

  const locale = zhCN
  const token = Cookies.get('ucsToken')
  console.log('token=================>', token)
  let ws = new WebSocket(
    `ws://${window.SITE_CONFIG['websocketURL']}/websocket?token=${token}`
  )
  // ws.send()给服务器发送信息
  // 服务器每次返回信息都会执行一次onmessage方法
  ws.onmessage = function (e) {
    console.log('WebSocket服务器返回的信息: ' + e.data)
    mybus.emit('getMynotice')
    // 判断当前路由是否是消息中心
    if (router.currentRoute.value.name === 'mynoticeView') {
      mybus.emit('noticeListInit')
    }
  }
  ws.onerror = function (e) {
    console.log('WebSocket连接异常============================>', e)
    ws = new WebSocket(
      `ws://${window.SITE_CONFIG['websocketURL']}/websocket?token=${token}`
    )
  }
  ws.onclose = function (e) {
    console.log('WebSocket连接断开============================>', e)
  }
  let realName = '默认水印'
  const arr = []
  const changeWaterMark = (newValue) => {
    console.log('监听', newValue, arr)
    if (document.getElementById(realName.charCodeAt())) {
      if (arr.indexOf(newValue) > -1) {
        document.getElementById(realName.charCodeAt()).style.opacity = 1
        document.getElementById(
          moment().format('YYYY-MM-DD').charCodeAt()
        ).style.opacity = 1
      } else {
        document.getElementById(realName.charCodeAt()).style.opacity = 0
        document.getElementById(
          moment().format('YYYY-MM-DD').charCodeAt()
        ).style.opacity = 0
      }
    } else if (document.getElementById('默认水印'.charCodeAt())) {
      if (arr.indexOf(newValue) > -1) {
        document.getElementById('默认水印'.charCodeAt()).style.opacity = 1
        document.getElementById(
          moment().format('YYYY-MM-DD').charCodeAt()
        ).style.opacity = 1
      } else {
        document.getElementById('默认水印'.charCodeAt()).style.opacity = 0
        document.getElementById(
          moment().format('YYYY-MM-DD').charCodeAt()
        ).style.opacity = 0
      }
    }
  }
  const waterMarkInit = (newValue) => {
    getUser().then((res) => {
      if (res.data.code == 0) {
        realName = res.data.data.realName
      }
      onWholeWaterMark(
        [realName, moment().format('YYYY-MM-DD')],
        600,
        300,
        30,
        50
      )
      getCategoryTreePage({
        page: 1,
        limit: 999,
        dictTypeId: '1592357067014803457',
      }).then((res) => {
        arr.length = 0
        res.data.data.list.map((val) => {
          arr.push(val.dictValue)
        })
        if (newValue) {
          changeWaterMark(newValue)
        }
      })
    })
  }
  watch(
    () => router.currentRoute.value.path,
    (newValue, oldValue) => {
      console.log(
        '路由变化',
        newValue,
        oldValue,
        realName,
        realName.charCodeAt()
      )
      // 如果刚登陆  初始化水印
      if (newValue == '/home') {
        waterMarkInit(newValue)
      }
      changeWaterMark(newValue)
    },
    { immediate: true }
  )
  onMounted(() => {
    // waterMarkInit()
  })
  onBeforeUnmount(() => {
    // 4.卸载前, 关闭链接
    ws.close()
  })
</script>
<style lang="less">
  @import '~@/vab/styles/vab.less';

  #vue-admin-beautiful {
    max-width: 1920px;
    // max-height: 1080px;
    margin: auto;
    height: 100%;
    position: relative;
    background-color: #fff;
  }

  body {
    font-size: 0.14rem;
  }
</style>