hotWaterManagerWeb/src/components/index/Index.vue

<template>
	<el-row type="flex" class="container" justify="space-between">
		<el-col :span="4" class="menu-left">
			<el-row>
				<el-col :span="24" class="logo-col">
					<div class="logo"></div>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="24" class="title-col">
					<div class="title">南昌交通学院热水管理系统</div>
				</el-col>
			</el-row>
			<el-row class="menu-row">
				<el-col :span="24">
					<el-menu router :default-active="$route.path" class="el-menu-vertical-demo"
						background-color="#1D3251" text-color="#fff" active-text-color="#fff">
						<router-link to="devmgr">
							<el-menu-item index="/index/devmgr">
								<i class="el-icon-sbgl"></i>
								<span slot="title">设备管理</span>
							</el-menu-item>
						</router-link>
						<router-link to="balan">
							<el-menu-item index="/index/balan">
								<i class="el-icon-yue"></i>
								<span slot="title">余额管理</span>
							</el-menu-item>
						</router-link>
						<router-link to="czjl">
							<el-menu-item index="/index/czjl">
								<i class="el-icon-cong"></i>
								<span slot="title">充值记录</span>
							</el-menu-item>
						</router-link>
						<router-link to="sjdz">
							<el-menu-item index="/index/sjdz">
								<i class="el-icon-sjdz"></i>
								<span slot="title">商家对账</span>
							</el-menu-item>
						</router-link>
						<router-link to="ysfx">
							<el-menu-item index="/index/ysfx">
								<i class="el-icon-ysfx"></i>
								<span slot="title">用水分析</span>
							</el-menu-item>
						</router-link>
						<router-link to="flsz">
							<el-menu-item index="/index/flsz">
								<i class="el-icon-flsz"></i>
								<span slot="title">费率设置</span>
							</el-menu-item>
						</router-link>
						<router-link to="ysyc">
							<el-menu-item index="/index/ysyc">
								<i class="el-icon-ysyc"></i>
								<span slot="title">用水异常</span>
							</el-menu-item>
						</router-link>
						<router-link to="zfyc">
							<el-menu-item index="/index/zfyc">
								<i class="el-icon-zfyc"></i>
								<span slot="title">支付异常</span>
							</el-menu-item>
						</router-link>
						<router-link to="zhgl">
							<el-menu-item index="/index/zhgl">
								<i class="el-icon-zhgl"></i>
								<span slot="title">账号管理</span>
							</el-menu-item>
						</router-link>
					</el-menu>
				</el-col>
			</el-row>
			<div class="diwen"></div>
		</el-col>
		<el-col :span="20">
			<el-row>
				<el-col :span="24" class="right-top">
					<div class="wecome-text">{{userName}} 您好，欢迎登陆！</div>
					<div class="right-items">
						<div class="tx"></div>
						<div class="user-name">我是【{{unic}}】</div>
						<div class="shuxian"></div>
						<div class="logout-btn" @click="logout"></div>
					</div>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="24" class="right-main">
					<router-view @sonFun='indexFun'></router-view>
				</el-col>
			</el-row>
		</el-col>
	</el-row>
</template>

<script>
	export default {
		data() {
			return {
				userName: '',
				unic: ''
			}
		},
		created() {
			var statue = sessionStorage.getItem('uname')
			var unic = sessionStorage.getItem('unic')
			if (!statue || typeof(statue) == 'undefined' || statue == '' || statue == 'null') {
				this.$router.replace('/')
				return
			} else {
				this.userName = statue
				this.unic = unic
			}
		},
		methods: {
			// 通过子组件更新昵称
			indexFun(param) {
				if (typeof(param) == 'undefined' || !param) {
					this.unic = sessionStorage.getItem('unic')
				} else {
					this.unic = param
				}
			},
			// 退出登陆
			logout() {
				var _this = this
				this.$confirm('确认退出？', '提示', {
						confirmButtonText: '是，退出',
						cancelButtonText: '否，不退出',
						type: 'warning'
					})
					.then(_ => {
						// console.log(_);
						sessionStorage.removeItem('uname')
						_this.$router.replace('/')
					})
					.catch(_ => {
						// console.log(_);
					});
			}
		}
	}
</script>

<style scoped>
	@import url("Index.css");
</style>