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-active="xycb"
					:collapse-transition="false"
					class="el-menu-vertical-demo"
					unique-opened
					:router="isRouter"
					 text-color="#333"
					active-text-color="#fff"
				>
					<el-menu-item
						: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: {
				20: 'iconfont icon-shujuzhanshi',
				22: 'iconfont icon-shebei',
				25: 'iconfont icon-jidi',
				28: 'iconfont icon-xitong',
			},

			menuList1: [], //首页菜单
			// 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' }]
			},
		}
	},
	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'
			) {
			}
		}
	},
	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: 'GET',
				url: '/api/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/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
					}
				})
			})
		},
	
		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(../../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: 0.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>