index.vue 3.76 KB
<template>
  <div class="home">
    <el-container class="home-box">
      <el-header class="headers">
		  <img class="logoImg" src="../../assets/img/home/logo.png" alt="">
		  <div class="headRight">
			  <span>2019-11-15 16:50 星期一</span>
			  <img src="../../assets/img/home/user.png" alt="">
			  <span class="exit">退出<i class="el-icon-arrow-down"></i></span>
		  </div>
	  </el-header>
      <el-container style="min-height:calc(100vh - 64px);">
        <el-aside :width="menuwidth">
          <menus @setTopBar="setTopBar" ref="leftmenu"></menus>
		    </el-aside>
        <el-main>
          <div class="nav">
            <div class="nav-tag-box">
              <el-tag
                v-for="(tag,index) in topbarArr" :key="index"
                closable
                @close="closetag(tag,index)"
                @click="toPath(tag)"
                >
                <i :class="tag.icon"></i>
                {{tag.name}}
              </el-tag>
            </div>
          </div>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
// import HelloWorld from "@/components/HelloWorld.vue";
import menus from './menu'
export default {
  name: "x",
  data(){
	  return{
			isCollapse: false,
			conHeight:0,
			menuwidth:"254px",
      full:false,
      topbarArr:[]
	  };
  },
  methods:{
    setTopBar(data){
      if(this.topbarArr.length < 1) {
        this.topbarArr.push(data)
      }
      let hasBar = false;
      for(let i = 0; i < this.topbarArr.length; i++) {
        if(this.topbarArr[i].path == data.path){
          hasBar = true
        } 
      }
      if(!hasBar) {
         this.topbarArr.push(data)
      }
    },
    toPath(data){
      this.$refs.leftmenu.handleSelect(data.path)
    },
    closetag(data,index){
      this.topbarArr.splice(index,1)
    }
  },
  created(){
    this.$api.device.getDev().then(m => {
        if(m.length < 1) {
          // this.infoFun('未发现运维服务,请联系相关人员')
          this.$message({
                message: '未发现运维服务,请联系相关人员',
                type: 'error'
          });
				  this.setDevunid('9cb6e39adc5176b81879f6c22f1d963') 
					return
        }
				this.setDevunid(m[0].dev_unid)
      })
  },
  components:{
    menus
  },
  mounted(){
    console.log(this.permission_routers)
	  this.conHeight=window.innerHeight-65;
		console.log(this.conHeight)
		 document.addEventListener("keydown", (event)=>{
				var e = event || window.event || arguments.callee.caller.arguments[0]; 
				if(e && e.keyCode==122 ){ // 按 Esc  
					if(this.full) {
						this.menuwidth = "254px";
						this.full = false
						return 
					}
					this.menuwidth = 0
					this.full = true
				} 
				
		});
	
	},
	beforeMount() {
			//建立ws连接
			let uid = localStorage.getItem('user_unid');
			let clientid = localStorage.getItem('client_unid');
			 this.$api.device.getGlobalWs(uid, clientid).then(data => {
				 this.globalWs =  new WebSocket(data.ws_url);
				let ary = data.ws_url.split('/');
				localStorage.setItem('cennect_unid',ary[ary.length-1])

				//监听成功
				this.globalWs.onopen = function() {
					console.log('全局推送服务连接成功')
				}

				//监听断开
				this.globalWs.onclose = function(){
					console.log('全局推送服务连接断开')
				}

				//监听推送信息
				// this.globalWs.onmessage = this.wsdeal;

				//保持连接
				var $this = this
				setInterval(function() {
					var send_mesage = '{"type":"request","id":"' + new Date().getTime() + '","mts":"' + new Date().getTime() + '","command": "get /wsapi/v1/users/'+localStorage.getItem('cennect_unid')+'/keep_alive"}'
					$this.globalWs.send(send_mesage)
				}, 20000)
      })
		},
 
 
};
</script>
<style lang="stylus" scoped>

</style>