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="img_http + user_info.user_avatar">
				你好，<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" v-if="value == '在线'" style="color: #00eb00">
                            <i class="el-icon-user"></i>
                            {{value}}
                        </span>
                        <span class="el-span-1" v-if="value == '隐身'" style="color: gray">
                            <i class="el-icon-user"></i>
                            {{value}}
                        </span>
						<span class="el-span-1" v-if="value == '休息'" style="color: #f4f400">
                            <i 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 class="item">
					<!-- el-icon-menu -->
					<el-button @click="getInnerDrawer()">
						<i style="font-size:14px; color:#5aa0fbbd ;" class="el-icon-menu"> </i>会话总览
					</el-button>
					<el-drawer
							id="huihua"
						title="会话总览"
						:modal="false"
						:show-close="true"
						size="90%"
						style="margin-top: 7vh"
						:before-close="handleClose"
						:visible.sync="innerDrawer">
						<div class="session_overview">
							<!-- 会话列表 -->
							<el-col :span="6">
								<el-tree class="session_list"
								:data="dataTree"
								:props="defaultProps"
								default-expand-all
								@node-click="handleNodeClick">
								</el-tree>
							</el-col>
							<!-- 会话消息 -->
							<el-col class="session_box" :span="12">
								<div class="session_box_title">{{session_litle ? session_litle :'未选择会话'}}</div>
								<div class="session_box_content">
								<!-- <div class="chatWindow"  >  -->
									<div v-for="(item,index) in dataList " :key="index">
										<!-- 模拟用户 -->
										<div v-if="item.to_id.startsWith('KF')" style="padding-top:10px;">
											<div class="title_time">
												<span>{{item.time_line}}</span>
											</div>
											<div v-if="item.content.text" class=" row  wrap" >
											<div class="left_session  item-center" v-html="item.content.text"></div> 
											</div>
											<div v-if="item.content.img" class="row " >
												<div class="left_session item-center " >
													<el-image
															:src="img_http+item.content.img"
															@click="handlePictureCardPreview(img_http+item.content.img)">
													</el-image>
												</div>
											</div>
										</div>
										<!-- 模拟客户 -->
										<div v-else style="padding-top:10px;">
											<div  class="row  rightAlignment title_time" style="width: 100%;">
												<span>{{item.time_line}}</span>
											</div>
											<div v-if="item.content.text"  class="row rightAlignment">
												<div class="right_session item-center wrap" v-html="item.content.text"></div>
											</div>
											<div v-if="item.content.img" class="row rightAlignment" >
												<div class="right_session item-center ">
													<el-image
															:src="img_http+item.content.img"
															@click="handlePictureCardPreview(img_http+item.content.img)">
													</el-image>
												</div>
											</div>
										</div>
									</div>
								</div>
							</el-col>
							<!-- 用户信息 -->
							<el-col class="user_info" :span="6">
								<!-- 用户信息展示框 -->
								<div>
									<ul style="padding-inline-start:0px; margin-block-start:0; margin-top:30px;">
										<li style="font-weight:bold;font-weight:bold; color:#666666;">访问信息</li>
										<li>IP地址：{{visitorsInfo.user_ip}}</li>
										<li>来源终端：{{visitorsInfo.system}}-{{visitorsInfo.browse}}</li>
									</ul>
									<ul style="padding-inline-start:0px; margin-block-start: 0; margin-top:30px;">
										<li style="font-weight:bold;font-weight:bold; color:#666666;">用户信息</li>
										<li>账号：{{visitorsInfo.account_name}}</li>
										<li>标签：{{visitorsInfo.label}}</li>
										<li>昵称：{{visitorsInfo.nick_name}}</li>
										<li>手机：{{visitorsInfo.visitorsInfo_phone}}</li>
										<li>邮箱：{{visitorsInfo.visitorsInfo_email}}</li>
										<li>地址：{{visitorsInfo.address}}</li>
										<li>备注：{{visitorsInfo.remark}}</li>
									</ul>        
								</div>
								
							</el-col>
						</div>

					</el-drawer>

				</el-badge>

				<!-- 点击图片放大 -->
				<el-dialog :visible.sync="dialogVisible">
					<img width="100%" :src="dialogImageUrl" alt="">
				</el-dialog>

				<!-- 消息中心 -->
				<el-badge :value="unreadNum" class="item">
					<el-button @click="openDrawer">
						<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'
	import { Loading } from 'element-ui';
	export default {
		name: 'hader',
		data() {
			return {
				state: true,//在线状态
				announcement: true,//公告
				network: true,
				HeadPortrait: '',
				loginTo: false,//登录状态
				options: ['在线', '隐身', '休息'],
				value: '在线',
				user_info: '',//
				userID:null,
				unreadNum:null, // 未读数量
				img_http:window.url_https_ajax,//图片路径域
				innerDrawer:false,//会话总览抽屉开关
				dataTree: [],
				defaultProps: {
					children: 'children',
					label: 'label',
				},
				interval:'',//列表循环定时器
				ession_int:'',//会话信息循环定时器
				visitorsInfo:{},//访客信息
				dataList:[],//会话信息列表
				servicelog:'',//当前会话工单信息
				session_litle:'',//会话标题
				newTime:'',//本次最新时间
				isGetList:false,//点击获取会话信息
				dialogVisible: false, //图片放大
				dialogImageUrl: '', // 放大的图片
				serverList:[],
				get_num:'',
				loadingobj:{},//
			}
		},

		mounted() {
        	// this.img_http = window.url_https_ajax;
			if (this.$store.getters.get_stateValue) {
				this.value = this.$store.getters.get_stateValue;
			}
			if(typeof this.$store.getters.get_user_info  != 'string'){
				this.user_info = this.$store.getters.get_user_info
			}else if(this.$store.getters.get_user_info!= ""){
				this.user_info = JSON.parse(this.$store.getters.get_user_info)
			}
			this.userID = this.user_info.id;
			// console.log(this.userID);
			this.unreadnotice();
			let _this = this;
			this.get_num = setInterval(function(){
				_this.unreadnotice();
			},1000*30)



		},
		beforeDestroy() {
			clearInterval(this.get_num);
		},

		computed: {
			get_drawer() {
				return this.$store.getters.get_drawer;
			},

		},
		watch: {
			get_drawer(data) {
				this.unreadnotice();
			},
		},
		methods: {
			/***************图片放大*************** */
			handlePictureCardPreview(url) {
				this.dialogImageUrl = url;
				this.dialogVisible = true;
			},


			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_USER",'');//用户退出
				this.$store.dispatch("SET_OFFLINE",[]);//离线列表
		  		this.$store.dispatch("SET_TYPE",1);//选择类型(会话/离线)
				this.$store.dispatch("SET_NUM",0);//列表下标
				this.$store.dispatch("SET_CURRENT",[]);//当前会话数据
      			this.$store.dispatch("SET_SESSION_NAME",'');//当前会话对象名
				this.$store.dispatch("SET_SESSION_MESSAGE",{});
				this.$store.dispatch("SET_SOCKET_OPEN",false);//列表下标 
				this.$store.dispatch("SET_NAVSTATE", 'TheCurrentSession'); 
				this.websocketsend(JSON.stringify({
					type:'kfzdclose',
					data: {
						uid: 'KF' + this.user_info.id,
					}
				}));
				this.$websocket.close();
				this.$token = '';
				this.$router.push({path:'/login',query: { pid:escape("这就是一个编码没有什么用啊") }})
			},

			/**************************************/
			//数据发送
			websocketsend(Data) {
				this.$websocket.send(Data);
			},
		
			/****************未读信息**************/
			unreadnotice(){
				let str = "unreadnotice" + "customer-service" + "index" + "service";
				let obj = {
					headers: {
						"Content-Type": "application/x-www-form-urlencoded",
						apiToken: this.$md5(str),
						userToken: this.user_info.token
					},
				};
				this.$http.post(this.$ports.center.unreadnotice,{
					user_id: this.userID
				},obj).then(res => {
					if(res.data.code === 1){
						// console.log(res.data.data)
						this.unreadNum =  res.data.data.length;
					}
				});
			},

			/************获取客服和用户会话信息************/
			handleNodeClick(data,i,j){
				if(!data.children){
					if(this.isGetList) return false
					clearInterval(this.ession_int);
					this.servicelog = data;
					// console.log(this.servicelog)
					this.init();
					this.get_session_lise();
					this.loadingobj = this.$loading({
						lock: true,
						text: '拼命加载中...',
						spinner: 'el-icon-loading',
					});
					this.ession_int = setInterval(()=>{
						this.get_session_lise(this.newTime,10000);
					},1000*5)
				}
			},

			/***************会话总览关闭前回掉处理************/
			handleClose(){
				this.innerDrawer =  false;
				//清除列表定时请求
				clearInterval(this.interval);
				//
				clearInterval(this.ession_int);
				this.init();
			},

			/*************获取会话总览数据************/
			getInnerDrawer(){
				if(this.innerDrawer) return false;
				this.innerDrawer = true;
				setTimeout(()=>{
					// Loading.service({text:'拼命加载中',background:'rgba(0, 0, 0, 0.8)'});
					this.loadingobj = this.$loading({
						lock: true,
						text: '拼命加载中...',
						spinner: 'el-icon-loading',
					});
					let obj = {
						headers: {
							apiToken: this.$md5("allconversation" + "customer-service" + "history" + "service"),
							userToken: this.user_info.token
						}
					};
					this.$http.post(this.$ports.overview.allConversation,'',obj).then(res => {
						this.loadingobj.close()
						if(res.data.code === 1){
							// console.log('会话',res.data)
							this.dataTree = res.data.data;
							this.interval =  setInterval(()=>{
								this.$http.post(this.$ports.overview.allConversation,'',obj).then(res => {
									if(res.data.code === 1){
										this.serverList = res.data.serverList;
										this.dataTree = res.data.data;
										//this.unreadNum =  res.data.data.length;
										let step;
										for (let i = 0; i < this.serverList.length; i++) {
											if (this.servicelog.servicelog_id == this.serverList) {
												step = false;
												break;
											} else {
												step = true;
											}
										}
										if (step == true) {
											this.init();
										}
									}
								});
							},1000*60);
							
						}
					});
				},200)
			},

			/******************会话详情列表******************/
			get_session_lise(time,type){
				// if() return false
				let str ="chatbytime" + "customer-service" + "history" + "service";
				this.$http.get(this.$ports.overview.chatByTime,{
					params:{
						servicelog_id:this.servicelog.servicelog_id,
						lastTime:time,
					},
					headers:{
						'apiToken': this.$md5(str),
						'userToken':  this.user_info.token
					}
				}).then(res => {
					if(res.data.code == 1){
						res.data.data.list = res.data.data.list.reverse();
						// console.log(res.data.data.list,'详情列表')
						this.isGetList = false;
						//本次最新时间
						// console.log(res.data.data.list.length, res.data.data.list)
						if(res.data.data.list.length > 0){
							this.newTime = res.data.data.list[res.data.data.list.length -1].time_line;
						}
						this.alarm = res.data.data.alarm;
						//访客信息
						this.visitorsInfo = res.data.data.account;
						let name = this.visitorsInfo.nick_name ? this.visitorsInfo.nick_name : this.visitorsInfo.account_name
						this.session_litle = '(组)'+res.data.data.groupName +'->(客服)'+ res.data.data.serverName +'->(会话)'+name
						res.data.data.list.forEach(e => {
							//时间戳转时间
							e.time_line = this.$public.customFormatDateTime(e.time_line);
							//字符串转换成对象
							e.content =JSON.parse(e.content);
							//文字转表情符号
							e.content.text = this.$public.turnFace(e.content.text,this.$frce);
							this.dataList.push(e)
						});
					}
					this.loadingobj.close()
				});
			},

			/*******************会话总览数据初始化****************/
			init(){
				this.visitorsInfo = {};//访客信息
				this.dataList = [];//会话信息列表
				this.servicelog_id = '';//会话工单号
				this.session_litle = '';//会话标题
				this.newTime = '';
			}

		}

	}
</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: 14px;
		margin-right: 14px;
		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;
	}
	/* 会话总览 */
	.session_overview{
		/* padding:0 20px; */
		border: 1px solid #d5e5ff !important;
		/* border-top:1px solid #d5e5ff; */
		height: 92vh;
	}
	.session_list{
		/* margin-top: 10px; */
		padding: 10px 20px;
		height: 92vh;
	}
	.session_box{
		border-left: 1px solid #d5e5ff !important;
		border-right: 1px solid #d5e5ff !important;
		height: 92vh;
		padding:10px 0;
	}
	.session_box_title{
		padding: 0 20px;
		padding-bottom:10px;
		border-bottom: 1px solid  #d5e5ff !important;
		font-size: 14px;
		font-weight:400;
		color:rgba(102,102,102,1);
	}
	.session_box_content{
		padding: 10px 20px;
		height: 70vh;
		border-bottom: 1px solid  #d5e5ff !important;
		font-size: 14px;
		font-weight:400;
		color:rgba(102,102,102,1);
		overflow:auto
	}
	.user_info{
		padding:10px 20px;
		height: 92vh;
		font-size:14px;
		color:rgba(153,153,153,1);
		font-weight:400;
	}
	.user_info li{
		margin: 5px 0;
	}
	.title_time{
		font-size:12px;
		font-weight:400;
		color:rgba(187,187,187,1);
	}
	.left_session{
		border:1px solid rgba(221,221,221,1);
		margin-right: 50px;
		max-width: 100%;
		min-height: 20px;
		padding: 6px;
		background:rgba(245,245,245,1);
		border-radius:0px 10px 10px 10px;
		margin-top:6px;
		word-wrap: break-word;
	}
	.right_session{
		margin-top:6px;
		border:1px solid rgba(221,221,221,1);
		margin-left: 50px;
		max-width: 100%;
		min-height: 20px;
		padding: 6px;
		background:rgba(223,240,255,1);
		justify-content: flex-end;
		border-radius:10px 0px 10px 10px;
		word-wrap: break-word;
	}
</style>

<style>
	.el-badge__content.is-fixed {
		top: 8px !important;
		right: 20px !important;
	}
</style>