bigdataCut/bigdata2/src/components/Index.vue

<template>
	<el-container style="height: 100%">
		<el-header>
			<div v-if="userinfo.logo">
				<img :src="userinfo.logo" alt=""  style="position: absolute;left: 20px;top: 20px;width: 136px;">
			</div>
			<div class="navbarBtn">
				<!-- 用户 -->
				<div class="userinfo">
					<img :src="userphoto" class="userheadImg" alt="" />{{ username }}
				</div>
				<!-- 标题 -->
				<div class="caption">
					<div v-if="userinfo.user_header" class="tit">{{userinfo.user_header}}</div>
					<div v-else class="tit">农业植保监测系统 智慧农业信息化</div>
					<div>
						Agricultural plant protection monitoring system intelligent
						agricultural informatization
					</div>
				</div>
			</div>
		</el-header>
		<div class="site" v-if="userinfo.site">
			<i class="iconfont icon-jidi"></i>
			<span>{{userinfo.site}}</span>
		</div>
		<el-container style="overflow: auto">
			<!-- 菜单 -->
			<el-aside width="200px">
				<el-menu
					default-active="/index/xycb"
					:collapse-transition="false"
					class="el-menu-vertical-demo"
					unique-opened
					:router="isRouter"
					 text-color="#333"
					active-text-color="#fff"
				>
					<el-menu-item
						:index="'/index/'+item.menu"
						v-for="item in menuList1"
						:key="item.pur_id"
					>
						<i :class="iconObj[item.pur_id]"></i>
						<span slot="title">{{ item.purview_name }}</span>
					</el-menu-item>
				</el-menu>
			</el-aside>
			<el-container>
				<el-main>
					<router-view></router-view>
				</el-main>
			</el-container>
		</el-container>
	</el-container>
</template>

<script>
export default {
	data() {
		var validateNewPass = (rule, value, callback) => {
			if (value === '') {
				callback(new Error('请输入新密码'))
			} else {
				if (this.resetPassForm.checkPass !== '') {
					this.$refs.resetPassFormRef.validateField('checkNewPass')
				}
				callback()
			}
		}
		var validateCheckPass = (rule, value, callback) => {
			if (value === '') {
				callback(new Error('请再次输入密码'))
			} else if (value !== this.resetPassForm.newPass) {
				callback(new Error('两次输入密码不一致!'))
			} else {
				callback()
			}
		}
		return {
			isRouter: true,
			// 被激活导航地址
			// activePath:this.$store.state.activePath,
			changeHomedialogVisible: false,
			iconObj: {
				1: 'iconfont icon-chouchongbug',
				2: 'iconfont icon-weimingming-34',
				3: 'iconfont icon-cebaoguanli',
				4: 'iconfont icon-fangzhi',
				5: 'iconfont icon-shebei',
				6: 'iconfont icon-xitong'
			},
			userinfo:'',
			menuList1: [{
			"purview_name": "智能性诱测报",
			"menu": "xycb",
			"parent_perm_id": 1,
			"pur_id": 1
			},
			{
			"purview_name": "植物孢子捕捉仪",
			"menu": "bzy",
			"parent_perm_id": 2,
			"pur_id": 2
			},
			{
			"purview_name": "物联网虫情测报",
			"menu": "cbd",
			"parent_perm_id": 3,
			"pur_id": 3
			},
			{
			"purview_name": "物联网杀虫灯",
			"menu": "scd",
			"parent_perm_id": 4,
			"pur_id": 4
			},
			{
			"purview_name": "设备管理",
			"menu": "equipList",
			"parent_perm_id": 5,
			"pur_id": 5
			},{
			"purview_name": "用户列表",
			"menu": "userManger",
			"parent_perm_id": 6,
			"pur_id": 6
			},], //首页菜单
			// activePath:'',
			username: '',
			userphoto:'',
			userHeadImg: '',
			resetPassDialogVisible: false,
			resetPassForm: {
				oldPass: '',
				newPass: '',
				checkNewPass: ''
			},
			resetPassFormRules: {
				oldPass: [
					{ required: true, message: '请输入原始密码', trigger: 'blur' }
				],
				newPass: [{ validator: validateNewPass, trigger: 'blur' }],
				checkNewPass: [{ validator: validateCheckPass, trigger: 'blur' }]
			},
		}
	},
	created: function () {
		this.getuserinfo()
		// this.$router.push('xycb')
	},
	computed: {
	},
	watch: {
	},
	mounted() {
	},
	methods: {
		dropdownHandle(command) {
			if (command == 'editPwd') {
				this.changePass()
			} else if (command == 'outSys') {
				this.outSys()
			} else {
				this.$router.push({ path: command })
			}
		},
		getuserinfo() {
			this.$axios({
				method: 'post',
				url: '/userinfo_'
			}).then((res) => {
				this.username = res.data.username
				this.userphoto = res.data.userphoto
				localStorage.setItem('username', res.data.username)  // 0管理员  1用户
			})
			this.$axios({
				method: 'get',
				url: '/user_detail'
			}).then((res) => {
				this.userinfo = res.data
				localStorage.setItem('have_type', this.userinfo.have_type)  // 0管理员  1用户
				localStorage.setItem('staff', this.userinfo.staff)  // 1是admin
			})
		},
		getNavList() {
			this.$axios({
				method: 'GET',
				url: '/home'
			}).then((res) => {
				let navList = res.data
				this.menuList1 = navList
			})
		},
		dropdownHandle(command) {
			if (command == 'editPwd') {
				this.changePass()
			} else if (command == 'outSys') {
				this.outSys()
			} else {
				this.$router.push({ path: command })
			}
		},
		handleCommand(command) {
			// this.$message('click on item ' + command);
			document.body.className = 'custom-' + command
			window.sessionStorage.setItem('bodyCalss', 'custom-' + command)
		},
		outSys() {
			this.$axios({
				method: 'POST',
				url: '/api_gateway?method=user.login.logout_user'
			}).then((res) => {
				if (res.data.message == '') {
					window.localStorage.removeItem('isLogin')
					window.localStorage.removeItem('session')
					this.$router.push('/login')
					// window.sessionStorage.setItem('activePath', '/index/home')
				}
			})
		},
		changePass() {
			this.resetPassDialogVisible = true
		},
		resetPassDialogClosed() {},
		resetPassSubm() {
			this.$refs.resetPassFormRef.validate((valid) => {
				if (!valid) return
				this.$axios({
					method: 'POST',
					url: '/api_gateway?method=user.login.changepwd',
					data: this.qs.stringify({
						old_password: this.resetPassForm.oldPass,
						new_password: this.resetPassForm.newPass,
						confirm_password: this.resetPassForm.checkNewPass
					})
				}).then((res) => {
					if (res.data.message == '') {
						this.$message({
							message: '密码修改成功！',
							type: 'success'
						})
						this.resetPassDialogVisible = false
					}
				})
			})
		},
	
		menuIndex(menu) {
			if (menu == 'bFourSituations') {
				return ''
			} else if (menu == 'equipDistribute') {
				return ''
			} else if (menu == 'bCbd') {
				return ''
			} else if (menu == 'bQxz') {
				return ''
			} else if (menu == 'bSy') {
				return ''
			} else if (menu == 'bBzy') {
				return ''
			} else {
				return '/index/' + menu
			}
		},
		//保存菜单的激活地址
		saveNavState(activePath) {
			// let path='/'+activePath.split('/')[activePath.split('/').length-1]
			let path = activePath.slice(6)
			// console.log(path)
			// console.log(activePath)
			if (activePath == '/index/bFourSituations') {
				// this.$router.replace('/index/home')
				this.BFourSituations(path) //跳转到大数据平台
			} else if (activePath == '/index/equipDistribute') {
				// this.$router.push('/index/home')
				this.BFourSituations(path) //跳转到大数据平台
			} else if (activePath == '/index/bCbd') {
				this.BFourSituations(path) //跳转到大数据平台
				// this.$router.push('/index/home')
			} else if (activePath == '/index/bQxz') {
				// this.$router.push('/index/home')
				this.BFourSituations(path) //跳转到大数据平台
			} else if (activePath == '/index/bSy') {
				// this.$router.push('/index/home')
				this.BFourSituations(path) //跳转到大数据平台
			} else if (activePath == '/index/bBzy') {
				// this.$router.push('/index/home')
				this.BFourSituations(path) //跳转到大数据平台
			}
		},
		BFourSituations(path) {
			const { href } = this.$router.resolve({
				path: path
			})
			window.open(href, '_blank')
		},
		goBD(path) {
			const { href } = this.$router.resolve({
				path: path
			})
			window.open(href, '_blank')
		}
	}
}
</script>

<style scoped lang="less">
@keyframes ringing {
	0% {
		transform: rotate(-15deg);
	}
	2% {
		transform: rotate(15deg);
	}
	12%,
	4% {
		transform: rotate(-18deg);
	}
	14%,
	6% {
		transform: rotate(18deg);
	}
	8% {
		transform: rotate(-22deg);
	}
	10% {
		transform: rotate(22deg);
	}
	16% {
		transform: rotate(-12deg);
	}
	18% {
		transform: rotate(12deg);
	}
	20% {
		transform: rotate(0);
	}
}
.el-header {
	height: 189px !important;
	background: url(../assets/images/headBj.png) no-repeat center;
	background-size: 100% 100%;
	.navbarBtn {
		color: #fff;
		.userinfo {
			text-align: right;
			margin-top: 10px;
			.userheadImg {
				width: 35px;
				height: 35px;
				border-radius: 50%;
				vertical-align: middle;
				margin-right: 6px;
			}
		}
		.caption {
			margin-top: 7px;
			text-align: center;
			font-size: 16px;
			letter-spacing: 0.5px;
			.tit {
				font-size: 20px;
				line-height: 46px;
				font-weight: 700;
				letter-spacing: 7px;
			}
		}
	}
}
.site{
	position: absolute;
    right: 10px;
    top: 199px;
    z-index: 888;
	font-size: 14px;
	color: #226a4d;
	span{
		color: #333;
		letter-spacing: 1px;
		font-size: 13px;
	}
}
/deep/.el-dropdown-menu__item {
	padding: 0 10px;
}
.el-popper.newsDropdown {
	padding: 0;
	margin: 0;
	h5 {
		background: #35a478;
		color: #fff;
		padding: 15px;
		text-transform: uppercase;
		font-size: 11px;
		margin: 0;
	}
	/deep/.popper__arrow {
		border-bottom-color: #35a478;
		&::after {
			border-bottom-color: #35a478;
		}
	}
	ul {
		border: 1px solid #ddd;
		border-top: 0;
		padding: 0 10px;
		.news {
			display: block;
			margin: 0;
			float: none;
			background: none;
			padding: 5px 5px;
			border-bottom: 1px solid #eee;
			.txtContent {
				max-width: 250px;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				display: inline-block;
				min-width: 250px;
				// display: flex;
				a {
					color: #333;
					font-size: 12px;
					padding: 7px 10px;
					-moz-border-radius: 2px;
					-webkit-border-radius: 2px;
					border-radius: 2px;
					-moz-transition: all 0.2s ease-out 0s;
					-webkit-transition: all 0.2s ease-out 0s;
					transition: all 0.2s ease-out 0s;
				}
				a:hover {
					background: none;
					color: #428bca;
					text-decoration: none;
				}
			}
		}
	}
}
.sysAside {
	position: absolute;
	z-index: 999;
	left: 0;
	top: 60px;
	bottom: 0;
	z-index: 999;
	transition: all 0.5s;
}
.el-aside {
	// background-color: #3D4C5A;
	color: #333;
	// line-height: 200px;
	// .el-menu-item.is-active{background:#17BB89!important}
	// .el-submenu__title i{color:#fff}
	.el-menu {
		border: none;
	}
	.iconfont {font-size:18px;margin-right:10px;}
	.icon-chouchongbug{font-size:22px;}
}
.changeHomeItem {
	text-align: center;
	img {
		width: 100%;
		height: 110px;
	}
	.tit {
		margin-top: 10px;
	}
}
</style>