Home.vue 3.52 KB
<template>
  <div class="home"  @keyup.esc="KeyUpF11">
    <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">
			<el-menu default-active="/trficcshow" class="el-menu-vertical-demo" :collapse="isCollapse"  @select="handleSelect">
			  <el-submenu index="1">
			    <template slot="title">
			      <i class="el-icon-location"></i>
			      <span slot="title">首页</span>
			    </template>
						<el-menu-item index="/trficcshow"> <i class="el-icon-location"></i>交通展示</el-menu-item>
			      <el-menu-item index="/behaviorshow"> <i class="el-icon-location"></i>综治展示</el-menu-item>
			  </el-submenu>
			  <el-submenu index="2">
			    <template slot="title">
			      <i class="el-icon-location"></i>
			      <span slot="title">任务管理</span>
			    </template>
				<el-menu-item index="/task/sceneSet"> <i class="el-icon-location"></i>场景配置</el-menu-item>
			      <el-menu-item index="/task/taskSet"> <i class="el-icon-location"></i>任务配置</el-menu-item>
			  </el-submenu>
			  <el-submenu index="3">
			    <template slot="title">
			      <i class="el-icon-document"></i>
			      <span slot="title">智能检索</span>
			    </template>
				<el-menu-item index="/search/vehicleSearch"> <i class="el-icon-location"></i>过车记录检索</el-menu-item>
				<el-menu-item index="/search/xcycle"> <i class="el-icon-location"></i>非机动车检索</el-menu-item>
				<el-menu-item index="/search/pedestrian"> <i class="el-icon-location"></i>行人检索</el-menu-item>
				<el-menu-item index="/search/event"> <i class="el-icon-location"></i>事件查询</el-menu-item>
				<el-menu-item index="/search/illegal"> <i class="el-icon-location"></i>违法记录查询</el-menu-item>
				<el-menu-item index="/search/publicFlow"> <i class="el-icon-location"></i>公共客流</el-menu-item>
				<el-menu-item index="/search/traficflow"> <i class="el-icon-location"></i>交通流量</el-menu-item>
			  </el-submenu>
			  <el-submenu index="4">
			    <template slot="title">
			      <i class="el-icon-document"></i>
			      <span slot="title">资源管理</span>
			    </template>
			  </el-submenu>
			</el-menu>
		</el-aside>
        <el-main>
			<div class="nav"></div>
			<router-view></router-view>
		</el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
// import HelloWorld from "@/components/HelloWorld.vue";

export default {
  name: "home",
  data(){
	  return{
			isCollapse: false,
			conHeight:0,
			menuwidth:"254px",
			full:false
	  };
  },
  created(){
	  this.$router.push('/trficcshow')
  },
  mounted(){
	  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
				} 
				
		});
	
  },
  components: {
    // HelloWorld
  },
  methods:{
	   handleSelect(key, keyPath) {
		   this.$router.push(key)
		  console.log(key, keyPath);
		}
  }
};
</script>
<style lang="stylus" scoped>

</style>