app-station-control-frontend_v1/components/Navbar/Navbar.vue

<template>
	<view class="navbar">
		<view class="logo">
			<image src="/static/left/logo.png"></image>
		</view>
		<view class="station_box">
			{{'No.'+codeState || '-'}}
			<image class="station_box_img" :src="cloud?`/static/left/link.png`:`/static/left/close.png`">
			</image>
		</view>
		<view class="routList">
			<view class="category" v-for="(item,index) in categoryList"
				:class="item.name==$store.state.currentpage?'active':''" @click="getPage(item.name)">
				<image
					:src="item.name==$store.state.currentpage?`/static/left/tab${index+1}-active.png`:`/static/left/tab${index+1}.png`">
				</image>
				<view>{{item.name}}</view>
			</view>
		</view>

		<view class="fiexd_footer">
			<view class="left_footer">
				<view class="box_click" @click="goTo">

				</view>
				<view class="left_footer_woring">
					{{alarmNum}}
				</view>
				<view class="left_footer_title">
					智锂物联V1.0<br />
					重卡换电智能站控系统
				</view>
				<view class="left_footer_btn" @click="login_off">
					{{userName}}
					<image src="../../static/login_img/login_off.png" mode="" class="login_off"></image>
				</view>
			</view>
		</view>
		<!-- 顶部公共提示信息 -->
		<uni-popup ref="Exchangepopup" type="message">
			<uni-popup-message :type="popupType" :message="popupMessage" :duration="2000"></uni-popup-message>
		</uni-popup>
		<!-- 顶部提示信息结束-->
	</view>
</template>

<script>
	export default {
		name: "Navbar",
		data() {
			return {
				currentPage: 0,
				popupType: '',
				popupMessage: '',
				userName: '',
				categoryList: [{
					name: '首页',
					url: '/pages/index/index',
					pathName: 'index'
				}, {
					name: '换电监控',
					url: '/pages/power-changer/index',
					pathName: 'powerchange'
				}, {
					name: '设备监控',
					url: '/pages/equipment-monitoring/index',
					pathName: 'equipment'
				}, {
					name: '服务记录',
					url: '/pages/service-recode/index'
				}, {
					name: '故障告警',
					url: '/pages/fault-alarm/index'
				}, {
					name: '基础数据',
					url: '/pages/basic-data/index'
				}],
				alarmNum: 0, //消防告警数量
				cloud: 0, //云端
				codeState: 0, //编号
				curAlarmNum:null,
			};
		},
		mounted() {
			// this.getRoute()
			this.getuserinfo()
			this.getState()
			this.curAlarmNum=setInterval(()=>{
				this.cloudConnState()
				this.getnum()
			},1000)
		},
		destroyed() {
			clearInterval(this.curAlarmNum)
		},
		methods: {
			//编号
			getState() {
				this.$http.getStationCode().then(res => {
					if (res.code === 0) {
						this.codeState = res.data
					}
				});
			},
			//云端
			cloudConnState() {
				this.$http.getcloudConnState().then(res => {
					if (res.code === 0) {
						this.cloud = res.data
					}
				});
			},
			getPage(name) {
				this.$store.commit("UPDATEPAGE", name);
				this.$storage.setJson("pageName", name)
			},
			login_off() {
				let that = this
				uni.showModal({
					title: "是否退出登录",
					content: "",
					success: function(res) {
						if (res.confirm) {
							that.$storage.clear(); //清除所有本地存储
							uni.navigateTo({
								url: "../../pages/login/index"
							})
							//用户点击确认按钮触发
						} else if (res.cancel) {
							return
							//用户点击取消按钮触发
						}
					}
				})
			},
			//根据用户id得到用户信息
			getuserinfo() {
				let userId = this.$storage.getJson("userId")
				let token = this.$storage.getJson("token")
				let data = {
					id: userId
				}
				this.$http.getInfo(data).then(res => {
					if (res.code == 0) {
						this.userName = res.data.userAccount
					} else {
						this.ExchangeMessage('error', res.msg)
					}

				})
			},
			//顶部公共消息提示
			ExchangeMessage(type, message) {
				this.popupType = type
				this.popupMessage = message ? message : '后端接口404错误!'
				this.$refs.Exchangepopup.open()
			},
			//跳转到消防告警列表
			goTo() {
				this.getPage('故障告警')
				this.$storage.setJson('gotoname', 1) //存本地用于判断显示的告警页面
			},
			//当前实时消防告警数量
			getnum() {
				this.$http.getToDayAlarm().then(res => {
					if (res.code == 0) {
						this.alarmNum = res.data.length
					}
				});
			}
		},
	}
</script>

<style lang="scss" scoped>
	.navbar {
		height: 100vh;
		width: 180px;
		padding-right: 20px;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		border-right: 1px solid rgba(255, 255, 255, 0.1);

		.logo {
			width: 150px;
			height: 42px;
			margin-top: 24px;

			image {
				width: 150px;
				height: 42px;
			}
		}

		.routList {
			width: 160px;
			height: 336px;
			justify-content: space-between;
			display: flex;
			flex-direction: column;
			margin-top: 20px;

			.category {
				width: 100%;
				height: 36px;
				font-weight: 500;
				color: #636C97;
				letter-spacing: 1px;
				font-size: 16px;
				display: flex;
				box-sizing: border-box;
				align-items: center;
				padding-left: 16px;

				image {
					width: 18px;
					height: 18px;
					margin-right: 10px;
				}
			}

			.active {
				background-color: #2A3855;
				color: #91FDB9;
				border-radius: 4px;
			}
		}

		.fiexd_footer {
			position: fixed;
			bottom: 10px;
			left: 20px;
		}

		.left_footer {
			width: 160px;
			height: 120px;
			background-image: url(../../static/login_img/left_footer_bg.png);
			background-repeat: no-repeat;
			background-size: 100%;
			padding-top: 53px;
			position: relative;

			.box_click {
				position: absolute;
				// border: 1px solid red;
				width: 60px;
				height: 50px;
				top: 0px;
				left: 50px;
			}

			.left_footer_woring {
				position: absolute;
				min-width: 20px;
				min-height: 20px;
				background: #FF4D4F;
				font-size: 12px;
				font-family: PingFang SC-Semibold, PingFang SC;
				font-weight: 600;
				color: #FFFFFF;
				border-radius: 50%;
				text-align: center;
				line-height: 20px;
				right: 50px;
				top: 0px;
			}

			.left_footer_title {
				width: 100%;
				text-align: center;
				font-size: 12px;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #636C97;
				line-height: 20px;
			}

			.left_footer_btn {
				width: 120px;
				height: 28px;
				background: #2A3855;
				border-radius: 6px 6px 6px 6px;
				color: #fff;
				text-align: center;
				line-height: 28px;
				margin-left: 20px;
				margin-top: 10px;
				font-size: 14px;

				.login_off {
					width: 14px;
					height: 14px;
					margin-left: 5px;
					vertical-align: middle;
				}
			}
		}
	}

	.station_box {
		width: 150px;
		// background: #1C263A;
		// border: 1px solid #26334C;
		font-size: 16px;
		font-weight: 500;
		color: rgba(153, 174, 197, 0.65);
		text-shadow: 0px 0px 4px rgba(39, 69, 201, 0.5);
		border-radius: 4px;
		margin-top: 10px;
		position: relative;

		.station_box_img {
			position: absolute;
			width: 20px;
			height: 20px;
			right: 20px;
			top: 3px;
		}
	}
</style>