RT_ZB/bigdata2/src/components/Index.vue

<template>
	<el-container style="height: 100%">
		<el-header>
			
			<div class="navbarBtn">
				<!-- 用户 -->
				<div class="userinfo">
					<img src="@/assets/images/12.jpg" class="userheadImg" alt="">
					<el-dropdown trigger="click"  @command="dropdownHandle" placement="top">
						<span class="el-dropdown-link" style="cursor: pointer;color:#fff;">
							{{ username }}
							<i class="el-icon-arrow-down el-icon--right"></i>
						</span>
						<el-dropdown-menu slot="dropdown">
							<el-dropdown-item command="personMsg">个人中心</el-dropdown-item>
							<el-dropdown-item command="editPwd">修改密码</el-dropdown-item>
							<el-dropdown-item command="outSys">退出</el-dropdown-item>
						</el-dropdown-menu>
					</el-dropdown>
				</div>
				<!-- 标题 -->
				<div class="caption">
					<div class="tit">农业植保监测系统  智慧农业信息化</div>
					<div>Agricultural plant protection monitoring system intelligent agricultural informatization</div>
				</div>
			</div>
		</el-header>

		<!-- 修改密码对话框 -->
		<el-dialog
			title="重置密码"
			:visible.sync="resetPassDialogVisible"
			width="500px"
			@close="resetPassDialogClosed">
			<el-form
				ref="resetPassFormRef"
				:model="resetPassForm"
				label-width="90px"
				:rules="resetPassFormRules"
			>
				<el-form-item label="原始密码 : " prop="oldPass">
					<el-input type="password" v-model="resetPassForm.oldPass"></el-input>
				</el-form-item>
				<el-form-item label="新密码 : " prop="newPass">
					<el-input type="password" v-model="resetPassForm.newPass"></el-input>
				</el-form-item>
				<el-form-item label="确认新密码 : " prop="checkNewPass">
					<el-input
						type="password"
						v-model="resetPassForm.checkNewPass"
					></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="resetPassDialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="resetPassSubm">确认</el-button>
			</span>
		</el-dialog>
		<el-container style="overflow: auto">
			<!-- 菜单 -->
			<el-aside width="200px">
				<el-menu
					:default-openeds="menuOpeneds"
					:default-active="$route.path"
					:collapse-transition="false"
					class="el-menu-vertical-demo"
					unique-opened
					:router="isRouter"
					active-text-color="#fff"
				>
					<el-menu-item
						:index="selHome()"
						v-for="item in menuList1"
						:key="item.pur_id"
					>
						<i class="iconfont icon-shouye"></i>
						<span slot="title">{{ item.purview_name }}</span>
					</el-menu-item>
					<el-submenu
						:index="item.pur_id.toString()"
						v-for="item in menuList2"
						:key="item.pur_id"
					>
						<template slot="title">
							<i :class="iconObj[item.pur_id]"></i>
							<span>{{ item.purview_name }}</span>
						</template>
						<el-menu-item
							:index="menuIndex(subItem.menu)"
							v-for="subItem in item.children"
							:key="subItem.pur_id"
							@click="saveNavState('/index/' + subItem.menu)"
						>
							<template slot="title">
								<span>{{ subItem.purview_name }}</span>
							</template>
						</el-menu-item>
					</el-submenu>
				</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 {
			// refresh: true, //控制整个页面刷新
			isCollapse: true,
			widthHover: '0px',
			isRouter: true,
			// 被激活导航地址
			// activePath:this.$store.state.activePath,
			changeHomedialogVisible: false,
			iconObj: {
				20: 'iconfont icon-shujuzhanshi',
				22: 'iconfont icon-shebei',
				25: 'iconfont icon-jidi',
				28: 'iconfont icon-xitong',
				36: 'iconfont icon-cebaoguanli',
				40: 'iconfont icon-huanjingjiance',
				42: 'iconfont icon-jiankong',
				44: 'iconfont icon-fangzhi',
				46: 'iconfont icon-nongchangguanli',
				48: 'iconfont icon-nongshiguanli',
				58: 'iconfont icon-suyuan',
				124: 'iconfont icon-zhuanjia',
				129: 'iconfont icon-shouhou'
			},
			homeList: [
				{
					img: require('@/assets/images/home/1.jpg'),
					name: '首页一',
					url: '/index/home'
				},
				{
					img: require('@/assets/images/home/2.jpg'),
					name: '首页二',
					url: '/index/mapView'
				},
				{
					img: require('@/assets/images/home/3.jpg'),
					name: '首页三',
					url: '/index/home02'
				}
			],
			menuList1: [], //首页菜单
			menuList2: [], //出首页的其他菜单
			// 被激活导航地址
			// activePath:'',
			username: '',
			userHeadImg: '',
			resetPassDialogVisible: false,
			resetPassForm: {
				oldPass: '',
				newPass: '',
				checkNewPass: ''
			},
			resetPassFormRules: {
				oldPass: [
					{ required: true, message: '请输入原始密码', trigger: 'blur' }
				],
				newPass: [{ validator: validateNewPass, trigger: 'blur' }],
				checkNewPass: [{ validator: validateCheckPass, trigger: 'blur' }]
			},
			menuOpeneds: []
		}
	},
	created: function () {
		// this.username = localStorage.getItem('username')
		// this.getNavList()
		// this.activePath=window.sessionStorage.getItem('activePath')
		// document.body.className = window.sessionStorage.getItem('bodyCalss')
	},
	computed: {
		activePath: function () {
			return this.$store.state.activePath
		},
		homePath: function () {
			return this.$store.state.homePath
		}
	},
	watch: {
		'$route.path': function (newVal) {
			if (
				newVal == '/index/home' ||
				newVal == '/index/home02' ||
				newVal == '/index/mapView'
			) {
				this.menuOpeneds = []
			}
		}
	},
	mounted() {
		// this.$EventBus.$on('refresh', (data) => {
		// 	console.log('bus')
		// 	this.refresh = false
		// 	this.$nextTick( ()=> {
		// 		this.refresh = true
		// 	})
		// })
		this.username = localStorage.getItem('username')
		this.getNavList()
	},
	methods: {
		dropdownHandle(command){
			if(command == 'editPwd'){
				this.changePass()
			}else if(command == 'outSys'){
				this.outSys()
			}else{
				this.$router.push({ path: command })
			}
		},
		getNavList() {
			this.$axios({
				method: 'POST',
				url: '/api/api_gateway?method=user.login.user_login_info'
			}).then((res) => {
				if (res.data.message == '') {
					let navList = res.data.data.children
					navList.forEach((item) => {
						if (item.children) {
							this.menuList2.push(item)
						} else {
							this.menuList1.push(item)
						}
					})
					let firstPage = '' //左侧菜单第一项
					if (this.menuList1.length > 0) {
						firstPage = this.menuList1[0].menu
					} else {
						firstPage = this.menuList2[0].children[0].menu
					}
					this.$EventBus.$emit('firstPage', firstPage) //第一个页面

					let userType = res.data.data.myuser_type //用户类型
					let userName = res.data.data.username //用户名
					localStorage.setItem(
						'lastEnter',
						this.formatTime(res.data.data.user_login_time * 1000)
					)
					window.sessionStorage.setItem('myuser_type', userType)
					this.$EventBus.$emit('userName', userName) //事件总线
				}
			})
		},
		changeHome(index) {
			this.changeHomedialogVisible = false
			var url = this.homeList[index].url
			sessionStorage.setItem('selHome', url) //保存选择的首页路由
			this.$router.push({ path: url })
		},
		changeHomeDialogClosed(done) {
			// this.$confirm('确认关闭？')
			// .then(_ => {
			//     done();
			// })
			// .catch(_ => {});
		},
		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/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/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
					}
				})
			})
		},
		collapseFun() {
			this.isCollapse = !this.isCollapse
			return this.isCollapse
		},
		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')
		},
		selHome() {
			let selHome = sessionStorage.getItem('selHome')
			if (selHome) {
				return selHome
			} else {
				return '/index/home'
			}
		},
		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(../../static/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: .5px;
			.tit{
				font-size: 20px;
				line-height: 46px;
				font-weight: 700;
				letter-spacing: 7px;
			}
		}
		
	}
}
/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;
	}
}
.changeHomeItem {
	text-align: center;
	img {
		width: 100%;
		height: 110px;
	}
	.tit {
		margin-top: 10px;
	}
}
</style>