jcxt_qd/src/components/admin.vue

<template>
	<div style="height: 100%; width: 100%;" @click="checkTimeOut()" @mouseenter="checkTimeOut()"
		@mousemove="checkTimeOut()">
		<el-container class="admin-container">
			<!--页面头部(上边)-->
			<el-header>
				<div class="admin-logo-container">
					<span  >安徽省农产品质量安全监测系统——监管平台</span>
				</div>
			</el-header>
			<!-- 页面个人中心 -->
				<div class="hello">
					<span>您好，{{name}}!</span>
					<div class="btn">
						<el-button  class="btns"  icon="el-icon-user-solid" @click="userInform()" size="small">个人信息</el-button>
						<el-button  class="btns" @click="logout" icon="el-icon-switch-button" size="small">退出</el-button>
					</div>
				</div>
			<!--页面主体部分-->
			<el-container>
				
				<!--页面侧边栏(左边)-->
				<el-aside style="width: 210px;">
					<!--        页面左侧菜单区域-->
					<el-menu :default-active="$route.path" background-color="#EEF1F6" text-color="#48576a"
						active-text-color="#187bdd"  :collapse-transition="false" :router="true">
						           <!-- <el-menu-item index="/admin"  @click="addTab('首页', '/admin')">
    									<i class="el-icon-s-home" />
             					 		<span slot="title">首页</span>
           							</el-menu-item> -->
						
						<!--一级菜单-->
						<el-submenu :index="index+''" v-for="(item, index) in menuList" :key="index"  class="font">
						<!--一级菜单模板区-->
								<template slot="title" class="font">
									<!--              图标-->
									<!-- <i :class="item.icon" /> -->
									<!--              文本-->
									<span>{{ item.subMenuName }}</span>
								</template>
						<!--二级菜单-->
							<el-menu-item :index="subItem.path+''" v-for="subItem in item.children" :key="subItem.id"
								@click="addTab(subItem.subMenuName, subItem.path)"  class="font">
								<!--          二级菜单模板区-->
								<template slot="title">
									<!--              图标-->
									<i class="el-icon-bangzhu" />
									<!--              文本-->
									<span>{{ subItem.subMenuName }}</span>
								</template>
							</el-menu-item>
						</el-submenu>
					</el-menu>
				</el-aside>
				<!-- 页面主内容(右边)-->
				<el-main>
					<el-tabs v-model="activeTabas" type="card" @tab-remove="removeTab" @tab-click="tabClick">
						<el-tab-pane v-for="item in Tabs" :key="item.name" :label="item.title" :name="item.name"
							:closable="item.isClose">
							<el-container>
								<el-main>
									<el-card shadow="always">
										<!--内容显示-->
										<router-view :key="item.name" />
									</el-card>
								</el-main>
							</el-container>
						</el-tab-pane>
					</el-tabs>
				</el-main>
			</el-container>
			 <el-footer id="foot">
				<p>主办单位：安徽省农业农村厅</p>
				<p>技术支持：安徽省北斗精准农业信息工程实验室 农产品安全安徽省重点实验室</p>
			</el-footer>
		</el-container>
	</div>
</template>

<script>
	export default {
		name: 'Admin',
		data() {
			return {
				rymc:'',
				name:'',
				lastTime: null, // 最后一次点击的时间
				currentTime: null, // 当前点击的时间
				timeOut: 30 * 60 * 1000, // 设置超时时间： 30分钟
				/** tabs标签相关属性 */
				// 当前打开的tabs名称
				activeTabas: '/admin',
				Tabs: [],
				// 左侧菜单数据
				menuList: []
			}
		},
		mounted:function(){
		this.addTab("首页",'/admin/conSole')
		},
		created() {
			this.getJgAccount()
			this.lastTime = new Date().getTime() // 网页第一次打开时，记录当前时间
			// 保证admin中的页面刷新后重置到/admin路由下
			if (this.$route.path !== '/admin/conSole') this.$router.push('/admin/conSole')
			let groupname = window.sessionStorage.getItem('groupname')
			let data1 = []
			let data = [
				{
					//  subMenuName: '首页',
					//  id: '6-1',
					//  path: '/admin/conSole'
					icon: 'el-icon-user-solid',
					subMenuName: '首页',
					children: [{
							id: '6-1',
							subMenuName: '控制台',
							path: '/admin/conSole'
					}]
				},
				{
					// icon: 'el-icon-user-solid',
					subMenuName: '机构查询',
					children: [{
							id: '4-1',
							subMenuName: '检测机构',
							path: '/admin/getOrganization'
					},{
							id: '4-2',
							subMenuName: '监管机构',
							path: '/admin/getMonitor'
					}]
				},
				{	
					subMenuName: '监测任务',
					children: [{
							id: '5-1',
							subMenuName: '例行监测',
							path: '/admin/routineMonitor'
						}, {
							id: '5-2',
							subMenuName: '专项监测',
							path: '/admin/specialMonitor'
						},
						// {
						//      id: '5-3',
						//      subMenuName: '监督抽查',
						//      path: '/admin/checkMonitor'
						// },
						// {
						//      id: '5-4',
						//      subMenuName: '退回任务',
						//      path: '/admin/retask'
						// },
						// {
						//      id: '5-5',
						//      subMenuName: '数据统计',
						//      path: '/admin/dataEchart'
						// },
						]
				},
				
			]
			this.menuList = data
		},
		methods: {
			async getJgAccount() {
				const result = await this.$http.post('getJgAccount')
				this.name = result.data.data.rymc
				console.log(this.name)
			},
			async userInform() {
				this.$router.push('userAccount')
			},		
			handleOpen(index) {
				console.log(index)
			},
			/** tabs标签相关函数 */
			// tab切换时，动态的切换路由
			tabClick(tab) {
				if (this.$route.path == tab.name) return
				this.$router.push(tab.name)
			},
			addTab(title, name) {
				for (let i = 0; i < this.Tabs.length; i++) {
					if (this.Tabs[i].name == name) {
						this.activeTabas = name
						return
					}
				}
				this.Tabs.push({
					title: title,
					name: name,
					isClose: 'closable'
				})
				this.activeTabas = name
			},
			removeTab(targetName) {
				const tabs = this.Tabs
				let activeName = this.activeTabas
				if (activeName == targetName) {
					tabs.forEach((tab, index) => {
						if (tab.name == targetName) {
							const nextTab = tabs[index + 1] || tabs[index - 1]
							if (nextTab) {
								activeName = nextTab.name
							}
						}
					})
				}
				this.activeTabas = activeName
				this.$router.push(activeName)
				this.Tabs = tabs.filter(tab => tab.name !== targetName)
			},
			/** 设置用户为登出状态 */
			async logout() {
				// const formData = { 'token': window.sessionStorage.getItem('token') }
				// // 提交登出请求
				// const result = await this.$http.post('/loginOut', formData)
				// if (result.data.code == 0) {
				// 清除seesion信息
				window.sessionStorage.clear()
				this.$router.push('/login')
				//}

			},
			
			async checkTimeOut() {
				this.currentTime = new Date().getTime() // 记录这次点击的时间
				// 如果当前页面不是登录，初始化界面就可以执行是否退出
				if (!(this.$route.path == '/login')) {
					/** 判断是否因为超时可以退出 */
					// 判断时间是否过期（判断上次最后一次点击的时间和这次点击的时间间隔是否大于10分钟）
					var isExit = this.currentTime - this.lastTime > this.timeOut
					if (isExit) {
						isExit = false
						// 这里写状态已过期后执行的操作
						this.lastTime = new Date().getTime() // 如果在10分钟内点击，则把这次点击的时间记录覆盖掉之前存的最后一次点击的时间
						this.$router.push('/login')
						// 设置用户为登出状态
						// const formData = {
						//   'token': window.sessionStorage.getItem('token')
						// }
						// 提交登出请求
						// const result = await this.$http.post('login_out', formData)
						// if (result.data.code == 0) {
						//   // 清除seesion信息
						//   window.sessionStorage.removeItem('token')
						// }
						// this.$message({
						//   message: '长时间未操作，请重新登录',
						//   type: 'warning',
						//   showClose: true,
						//   center: true
						// })
					} else {
						/** 判断是否因为用户未登录可以退出 */
						// const token = window.sessionStorage.getItem('token')
						// if (token == null || token == undefined || token == '') {
						//   this.$router.push('/login')
						//   this.$message({
						//     message: '用户未登录，请重新登录',
						//     type: 'warning',
						//     showClose: true,
						//     center: true
						//   })
						// }
						this.lastTime = new Date().getTime() // 如果在10分钟内点击，则把这次点击的时间记录覆盖掉之前存的最后一次点击的时间
					}
				} else {
					this.lastTime = new Date().getTime() // 如果在10分钟内点击，则把这次点击的时间记录覆盖掉之前存的最后一次点击的时间
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	.admin-container {
		height: 100%;
		// overflow: hidden;
	}

	.el-main {
		padding-top: 8px !important;
	}
	.font{
		font-size: 15px;
	}
	// .el-menu-item.is-active {

		// background-color: #3ace04 !important;

	// 	// background-color: #3ace04 !important;
	// }


	// .admin-logo-container {
	// 	text-shadow: 0px 5px 5px #0024f3;
	// }

	.admin-logo {
		margin-left: 5px;
		height: 55px;
		width: 55px;
		/*自动等比缩放*/
		background-size: 100% 100%;
	}

	.el-header {
		background-color: #145faa;
		width: 100%;
		color: white;
		font-size: 25px;
		display: flex;
		padding-left: 0;
	}

	.admin-logo-container {
		display: flex;
		align-items: center;

		span {
			margin-left: 20px;
		}
	}

	.el-aside {
		// width: 200px;
		background-color: #EEF1F6;
	}

	.toggle-button-container {
		width: 180px;
		display: flex;
		justify-content: left;
	}

	// .toggle-button {
	//     width: 50px;
	//     line-height: 60px;
	//     color: #fff;
	//     text-align: center;
	//     cursor: pointer;
	// }

	.right-function-container {
		width: 400px;
		line-height: 50px;
		text-align: right;
		position: absolute;
		right: 15px;
	}
	.el-icon-s-custom{
		padding: 5px;
		float: right;
		margin-top:10px;
	}
	.hello{
		border: 0.5px solid rgb(233, 233, 233);
		height: 32px;
		// position: relative;
		float: right;
		padding: 3px;
		// margin: .625rem ;
		font-size: .9375rem;
     	font-weight: 600;
		 
	}
	.btn{
		// text-align: right;	
		float: right;
		box-shadow: #145faa;
	}
	.btns{
		border-style: solid;
  		border-color: rgb(199, 199, 199);
	}
	/deep/ #foot {
        color: #413b3b;
        width: 100%;
        text-align: center;
        font-size: .875rem;
        font-weight: 550;
        margin-bottom: 1%;
      }
</style>