Customer-Service-Web/service/src/components/hader.vue

<template>
	<div>
		<div class="header row allAlignment">
			<div class="row item-center box_div" style="color:#666;font-size:14px;font-weight:bold;">
				<img style="width:38px;height:38px;margin: 0 10px;" src="@/assets/img/headerPortrait.png">
				你好，<span>{{user_info.user_name}}--{{user_info.group}}</span>
			</div>
			<div class="row item-center rightAlignment msg box_div" style="padding: 0 30px;font-size:12px;color:#999">
				<div>
					<el-dropdown @command="handleCommand">
                        <span class="el-span-1">
                            <i style="font-size:14px;color:#5399F5;" class="el-icon-user"></i>
                            {{value}}
                        </span>
						<el-dropdown-menu slot="dropdown">
							<el-dropdown-item command='0'>在线</el-dropdown-item>
							<el-dropdown-item command=1>隐身</el-dropdown-item>
							<el-dropdown-item command=2>休息</el-dropdown-item>
						</el-dropdown-menu>
					</el-dropdown>
				</div>
				<el-badge :value="12" class="item">
					<el-button @click="openDrawer" style="margin:0 15px"><i style="font-size:14px; color:#5399F5;"
																			class="el-icon-chat-dot-square"> </i>消息中心
					</el-button>
				</el-badge>
				<span @click="isExit()" class="el-span-1"><i style="font-size:13px; margin-right: 3px; color:#5399F5;"
															 class="el-icon-switch-button"></i>退出</span>
			</div>
		</div>
	</div>
</template>

<script>
	import Vue from 'vue';
	import '@/css/index.css'

	export default {
		name: 'hader',
		data() {
			return {
				state: true,//在线状态
				announcement: true,//公告
				network: true,
				HeadPortrait: '',
				loginTo: false,//登录状态
				options: ['在线', '隐身', '休息'],
				value: '隐身',
				user_info: '',//
			}
		},
		methods: {
			openDrawer() {
				this.$store.dispatch("SET_DRAWER", true);
			},
			/**********************************************/
			//切换用户状态
			handleCommand(e) {
				//console.log(e)
				this.websocketsend(JSON.stringify({
					type: 'kfOnline',
					data: {
						uid: 'KF' + this.user_info.id,
						status: e * 1 + 1,
					}
				}));
				//Vue.prototype.$stateValue =  this.options[e];
				this.$store.dispatch("SET_STATEVALUE", this.options[e]);
				this.value = this.options[e];
			},

			/************************************************/
			//退出系统
			isExit() {
				this.$store.dispatch("SET_STATEVALUE", '隐身');
				this.$store.dispatch("SET_SESSION", []);
				this.$store.dispatch("SET_OFFLINE", []);
				this.$websocket.close();
				this.$token = '';
				this.$router.push('/login')
			},

			/**************************************/
			//数据发送
			websocketsend(Data) {
				this.$websocket.send(Data);
			},
		},
		mounted() {
			if (this.$store.getters.get_stateValue) {
				this.value = this.$store.getters.get_stateValue;
			}
			this.user_info = this.$store.getters.get_user_info;
		}
	}
</script>

<style scoped>
	.header {
		width: 90vw;
		height: 7vh;
		border-bottom: 1px solid #D5E5FF;
	}

	.box_div {
		width: 50%;
		height: 100%;
		background: #ECF4FF;
	}

	.msg p {
		margin-left: 30px;
		display: flex;
		align-items: center;
	}

	.msg p img {
		margin-right: 6px;
	}

	.el-span-1 {
		margin-left: 6px;
		font-size: 14px;
		color: #666;
	}

	.el-span-1:hover {
		color: #5399f5;
		cursor: pointer;
		font-weight: 400;
	}

	button {
		outline: none;
		/* border: 1px solid #ECF4FF; */
	}

	.el-button {
		background: #ECF4FF;
		font-size: 14px;
		color: #666;
	}

	.el-button:hover {
		color: #5399f5;
	}

	.msg_left {
		width: 360px;
		height: 400px !important
	}

	.msg_right {
		width: 440px;
	}

	.el-popover {
		height: 700px !important;
	}

	/* .el-dropdown{
		border: 1px solid #ECF4FF;
	} */
</style>

<style>
	.el-badge__content.is-fixed {
		position: absolute;
		top: -2px !important;
		right: 18px !important;
	}
</style>