ngds/frontendEle/src/views/layout/layout.vue

<template>
  <el-container>
    <el-aside :class="menuClass" width="">
      <el-menu :default-active="menuActiveIndex" :router="true" :collapse="isCollapse" :unique-opened="true">
        <div class="site-title">
          <h1>{{siteTitle}}</h1>
        </div>
        <div class="user-profile">
          <!--<img :src="userAvatar" alt="" class="profile-avatar img-circle">-->
          <img src="../../static/img/avatar/1.png" alt="" class="profile-avatar img-circle">

          <el-dropdown>
      <span class="el-dropdown-link">
        {{userName}} <i class="el-icon-caret-bottom el-icon--right"></i>
      </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item icon="el-icon-user" @click.native="onGo('/user/index')">Personal Information</el-dropdown-item><!--个人资料-->
              <!--<el-dropdown-item icon="el-icon-message" @click.native="onGo('/message/list')">站内信</el-dropdown-item>-->
<!--              <el-dropdown-item icon="el-icon-setting" @click.native="onGo('/config/base')">个人设置</el-dropdown-item>-->
              <el-dropdown-item icon="el-icon-switch-button" @click.native="onLogout">Log Out</el-dropdown-item><!--安全退出-->
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <template v-for="parent in menu">
          <el-submenu :index="'/'+parent.routePath" v-if="parent.child.length">
            <template slot="title">
              <i :class="parent.icon"></i>
              <span>{{parent.name}}</span>
              <span v-show="parent.routePath==='message'&&notifyShow" class="text-danger">new</span>
            </template>
            <el-menu-item-group title="">
              <el-menu-item :index="'/'+child.routePath" v-for="child in parent.child" :key="'/'+child.routePath">
                {{child.name}}
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-menu-item :index="'/'+parent.routePath" v-else>
            <i :class="parent.icon"></i>
            <span>{{parent.name}}</span>
          </el-menu-item>
        </template>
      </el-menu>
    </el-aside>
    <el-container>
      <el-header>
        <ul class="al-left layout-menu-left">
          <li class="mobile-menu">
            <el-button type="text" @click="onMobileMenu"><i class="el-icon-s-fold"></i></el-button>
          </li>
          <li class="scale-menu">
            <el-button type="text" @click="onMenu"><i class="el-icon-s-fold"></i></el-button>
          </li>
          <li class="top-message button">
            <el-button type="text" @click="onMessage"><i class="el-icon-message"></i>
              <div class="notify" v-show="notifyShow"><span class="heartbit"></span><span class="point"></span></div>
            </el-button>

            <transition name="custom-classes-transition" enter-active-class="animated bounceInDown">
              <div class="top-message-card" v-if="messageShow" v-loading="messageLoading">
                <ul v-if="unreadMessage !== null">
                  <li v-for="(item,index) in unreadMessage" :key="index" @click="toMessage(item.ID)">
                    <h5>{{item.TITLE}}</h5>
                    <span>{{tool.formatDate(item.CREATED_AT)}}</span>
                  </li>
                </ul>
              </div>
            </transition>
          </li>
        </ul>
        <div style="text-align: right">
          <el-button type="text" @click.native="onLogout">Log Out</el-button><!--安全退出-->
        </div>
      </el-header>
      <div :class="'breadcrumb-box '+menuClass">
        <h4>{{contentTitle}}</h4>
        <div class="breadcrumb-content">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item v-for="(item, index) in breadcrumb" :to="{ path: item.path }" :key="index">
              {{item.title}}
            </el-breadcrumb-item>
          </el-breadcrumb>
        </div>
      </div>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import {WEBSOCKET_HOST, CDN_IMG_URL} from '@/utils/config'
import websocketHelper from '@/utils/websocketHelper';
import userInfo from '@/utils/userInfo'
import network from '@/utils/network'
import tool from '@/utils/tool'
import Waves from '@/static/plugins/waves/waves.js'
import store from '@/utils/vuexStore'
import baseInfo from '@/utils/baseInfo'
import initRegion from '@/utils/region'

export default {
  name: 'layout',
  beforeCreate () {
    let thisObj = this
    // 检测用户是否已经登录，如果已经登录则直接跳转到控制台页
    if (!userInfo.hasLogin()) {
      this.$router.push('/login')
      return
    }
    // 获取未读消息数量
    if (store.state.baseInfo.messageUnreadNum === null) {
      network.getUnreadMessage()
    }
    let baseInfo = userInfo.baseData()
    //链接websocket 服务器
    this.$webSocket.onOpen(thisObj, function(evt){
      thisObj.$webSocket.onSend(thisObj, JSON.stringify({
        cmd: websocketHelper.HAND_SHAKE,
        app: websocketHelper.WS_APP_BONUS,
        userId: baseInfo.ID
      }));
    });
    this.$webSocket.onMessage(thisObj, function(res){
      websocketHelper.onMessage(res,baseInfo);
    });
    // websocket连接
    /*let wsServer = WEBSOCKET_HOST
    let webSocket = new WebSocket(wsServer)
    store.state.socket.socketObj = webSocket
    webSocket.onopen = function (evt) {
      let userId = userInfo.userId()
      let sendData = {app: 'userPc', userId: userId}
      webSocket.send(JSON.stringify(sendData))
    }
    webSocket.onmessage = function (env) {
      let data = JSON.parse(env.data)
      if (data.handle === 'userPullMsg') {
        // vueObj.$message({
        //     message: data.message,
        //     type: data.success ? 'success' : 'error',
        // });
        // if(store.state.socket.onMessageCallback !== null){
        //     store.state.socket.onMessageCallback();
        // }
        // 请求服务器拉取信息
        network.getData('message/pull').then(response => {
          // 请求服务器，获取未读站内信数量
          return network.getUnreadMessage()
        })
      }
    }*/
    // 获取地区信息
    initRegion(thisObj)
  },
  mounted () {
    let promise = network.getSiteInfo().then(response => {
      this.siteTitle = response.siteTitle
    })
    Waves.init()
    Waves.attach('.waves-btn')
  },
  data () {
    return {
      isCollapse: false,
      menuActiveIndex: this.$route.meta.highLight || this.$route.path,
      mainTitle: this.$route.meta.title,
      messageShow: false,
      profileShow: false,
      userNameShow: true,
      menuClass: '',
      userName: userInfo.userName(),
      userAvatar: userInfo.baseData().AVATAR,
      messageLoading: true,
      unreadMessage: null,
      tool: tool,
      siteTitle: '',
    }
  },
  computed: {
    menu: function () {
      return baseInfo.menu()
    },
    contentTitle: function () {
      return this.$route.meta.title
    },
    breadcrumb: function () {
      let breadcrumbArr = []
      for (let i in this.$route.meta.breadcrumb) {
        breadcrumbArr.push(this.$route.meta.breadcrumb[i])
      }
      breadcrumbArr.push({title: this.$route.meta.title, path: ''})
      return breadcrumbArr
    },
    notifyShow: function () {
      if (store.state.baseInfo.messageUnreadNum > 0) {
        return true
      } else {
        return false
      }
    }
  },
  methods: {
    onMenu () {
      if (this.isCollapse) {
        this.isCollapse = false
        document.getElementsByTagName('body')[0].className = ''
      } else {
        this.isCollapse = true
        document.getElementsByTagName('body')[0].className = 'content-wrapper'
      }
    },
    onMobileMenu () {
      if (this.menuClass === 'show-menu') {
        this.menuClass = ''
      } else {
        this.menuClass = 'show-menu'
      }
    },
    onMessage () {
      if (store.state.baseInfo.messageUnreadNum > 0) {
        this.messageShow = !this.messageShow
        network.getData(`message/unread-text`).then(response => {
          this.unreadMessage = response
          this.messageLoading = false
        })
      } else {
        this.$message({
          message: 'No Unread Message',//暂无未读消息
          type: 'warning'
        })
      }
    },
    onProfile () {
      this.profileShow = !this.profileShow
    },
    onGo(url) {
      this.$router.push(url)
    },
    onLogout () {
      userInfo.clear()
      this.$router.push('/login')
    },
    onCloseProfile () {
      this.profileShow = false
    },
    toMessage (id) {
      this.$router.push(`/message/detail/${id}`)
      this.messageShow = !this.messageShow
      network.getData(`message/unread-text`).then(response => {
        this.unreadMessage = response
        this.messageLoading = false
      })
    }
  }
}
</script>

<style>
  @import '../../static/css/animate.css';
  @import '../../static/plugins/waves/waves.css';
  @import '../../static/css/style.css';

  .el-menu-item-group__title{display: none;}

  .top-message {
    position: relative
  }

  .top-message .notify {
    position: relative;
    margin-top: -8px;
  }

  .top-message .notify .heartbit {
    position: absolute;
    top: -24px;
    right: -20px;
    height: 25px;
    width: 25px;
    z-index: 10;
    border: 5px solid #f75b36;
    border-radius: 70px;
    animation: heartbit 1s ease-out;
    animation-iteration-count: infinite;
  }

  .top-message .notify .point {
    width: 6px;
    height: 6px;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
    background-color: #f75b36;
    position: absolute;
    right: -5px;
    top: -9px;
  }

  @keyframes heartbit {
    0% {
      transform: scale(0);
      opacity: 0
    }
    25% {
      transform: scale(.1);
      opacity: .1
    }
    50% {
      transform: scale(.5);
      opacity: .3
    }
    75% {
      transform: scale(.65);
      opacity: .5
    }
    100% {
      transform: scale(.8);
      opacity: 0
    }
  }
</style>