Customer-Service-Web/pc_chat/src/components/chat.vue

<template>
	<div v-loading="allLoading" element-loading-text="系统加载中，请稍候">
		<div class="chatBox">
			<!-- ************************* 头部消息 ************************* -->
			<el-header height='80px'>
				<el-row type="flex" justify='space-between' align='middle' style="height:100%;">
					<el-col class="tit nopd" v-if="machineAndAtl == 10">
						<img id="logo" :src="url + logo" alt="">
						<span>智能客服</span>
						<span style="margin-left: 5px;"><img src="./../assets/st-img/on_icon.png" alt=""></span>
					</el-col>
					<el-col class="tit nopd" v-else-if="machineAndAtl == 100">
						<img id="logo" :src="url + logo" alt="">
						<span v-if="service">{{service.serverInfo.name}}</span>
						<span v-if="service_on" style="margin-left: 5px;"><img src="./../assets/st-img/on_icon.png"
																			   alt=""></span>
						<span v-if="!service_on" style="margin-left: 5px;"><img src="./../assets/st-img/off_icon.png"
																				alt=""></span>
					</el-col>
					<el-col>
						<div class="imgBox">
							<!-- <el-button v-if="!service_on"  size="mini" type="primary" @click="exit" style="margin-right: 10px;">退出聊天</el-button>-->
							<el-button v-if="machineAndAtl == 100" size="mini" type="primary" @click="exit"
									   style="margin-right: 10px;">退出聊天
							</el-button>
							<i v-if="(selNum + tokNum)  + hisLength > chatNum" @click="ejectEvl(10)" class="sc pointer"
							   :class="selType?'scActy':''"></i>
							<div v-if="showleaveIcon" style="float: right" class="pointer" @click="leaveMsg()">
								<span style="font-size: 25px; color: #b3c1e7; vertical-align: middle;" @click="back()"
									  class="el-icon-chat-line-round"></span>
							</div>
							<div v-if="!showleaveIcon" style="float: right; cursor: not-allowed">
								<span style="font-size: 25px; color: #d6d1c4; vertical-align: middle;"
									  class="el-icon-chat-line-round"></span>
							</div>
						</div>
					</el-col>
				</el-row>
			</el-header>
			<div class="cationer">

				<!--****************************** 聊天会话框模块 *****************************-->
				<el-main>
					<!-- 广告展示隐藏按钮 -->
					<div class="retract pointer" @click="retract()">
						<img src="./../assets/st-img/retract.png" alt="" v-if="retractShow">
						<img src="./../assets/st-img/retract2.png" alt="" v-else>
					</div>

					<el-row class="pd informationBox scroll" id="main">

						<!-------------------机器人聊天板块 ----------------------->
						<div v-if="machineAndAtl == 10">
							<!--··············· 欢迎语 ············-->
							<div id="welcome" class="conversationBox">
								<div class="row" v-for="(item,index) in machine" :key="index">
									<div class="conversation row">
										<div class="headImg">
											<img src="./../assets/st-img/headAdvent.png" alt="">
										</div>
										<div class="cont left">
											<div v-html="item"></div>
										</div>
									</div>
									<div style="width:66px;"></div>
								</div>
							</div>

							<!--··········· 快捷问题回答模块 ············-->
							<div class="questionList" v-if="questionShow">
								<section v-for="(item,idx) in problem" :key="item.id">
									<div @click="answers(idx)">
										<span class="pointer gl">{{item.robot_name}}</span>
									</div>
								</section>
								<section>
									<div>
										<span class="col6">上面问题都不是</span>
										<span class="pointer ly" @click="changeService()">转人工客服</span>
									</div>
								</section>
							</div>

							<!--················ 和机器人会话发送消息 ·············-->
							<div v-for="item in chatCont" :key="item.id">
								<!-- 用户发文本信息 -->
								<div class="conversationBox" v-if="item.type =='user'">
									<div class="timer">{{item.time}}</div>
									<div class="customer row allAlignment">
										<div style="width:66px;"></div>
										<div class="row">
											<!-- 显示内容 -->
											<div v-if="item.chat" class="cont right">
												<div v-html="item.chat"></div>
											</div>
											<div v-else class=" right noafter" style="width:200px;margin-right:10px; ">
												<div slot="file">
													<img class="el-upload-list__item-thumbnail"
														 @click="handlePictureCardPreview(url+item.imgUrl)"
														 style="width:100%;height:auto;border-radius: 10px;"
														 :src="url+item.imgUrl" alt="">
												</div>
											</div>

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

											<!-- 头像 -->
											<div class="headImg">
												<img :src="require('@/assets/st-img/timg.jpg') " alt="">
											</div>
										</div>
									</div>
								</div>

								<!-- 机器人无法回答转人工 -->
								<div class="conversationBox" v-if="item.type == 1001">
									<div class=" row">
										<div class="conversation row">
											<div class="headImg">
												<img src="./../assets/st-img/headAdvent.png" alt="">
											</div>
											<div class="cont left">
												<div>您的问题暂时无法处理</div>
												<div>
													<span class="col">问题没有解决？</span>
													<span class="change pointer ly"
														  @click="changeService()">转人工客服</span>
												</div>
											</div>
										</div>
										<div style="width:66px;"></div>
									</div>
								</div>

								<!-- 机器人回答 -->
								<div class="conversationBox" v-else-if='item.type == "service"'>
									<div class="row">
										<div class="conversation row">
											<div class="headImg">
												<img src="./../assets/st-img/headAdvent.png" alt="">
											</div>
											<div class="cont left">
												<div>{{item.cont}}</div>
											</div>
										</div>
										<div style="width:66px;"></div>
									</div>
								</div>

								<!-- 快捷问题回答 -->
								<div class="conversationBox" v-else-if="item.type == 'machine'">
									<div class="timer">
										{{item.robot_addTime}}
									</div>
									<div class=" row">
										<div class="conversation row">
											<div class="headImg">
												<img src="./../assets/st-img/headAdvent.png" alt="">
											</div>
											<div class="cont left">
												<div>{{item.robot_content}}</div>
												<div>
													<span class="col">问题没有解决</span>
													<span class="change pointer ly"
														  @click="changeService()">转人工客服</span>
												</div>
											</div>
										</div>
										<div style="width:66px;"></div>
									</div>
								</div>

								<!-- 转接客服列表 -->
								<div class="changeService" v-else-if="item.type == 'artService'">
									<div v-for="(itemList,idx) in serviceList" :key="idx">
										<span class="col6">人工客服:</span>
										<span class="colE5 pointer gl" @click="jumpService(itemList.id, itemList.name)">{{itemList.name}}</span>
									</div>
								</div>
								<div v-if="item.type == 'tips'">
									<div class="promptBox" v-if="item.str == 'resigtermsg'">
										<div class="prompt help">
											<span>本次会话已关闭，如需继续咨询请重新连接客服</span>
										</div>
									</div>

								</div>
							</div>

							<!--············· 各种消息提示框 ··············-->

							<!-- 客服不在线帮助提示框 -->
							<div class="promptBox" v-if="artAndLeave==100">
								<div class="prompt help">
									<span>{{jumpName + Onlinemsg}}</span>
									<span class="colE5 ly pointer" @click="leaveMsg()">留言</span>
								</div>
							</div>

							<!-- 客服会话超时 -->
							<!--							<div class="promptBox" v-if="resigtermsg">-->
							<!--								<div class="prompt help">-->
							<!--									<span>客服已经关闭会话，如需继续咨询请重新连接客服</span>-->
							<!--								</div>-->
							<!--							</div>-->


							<!-- 排队等待 -->
							<div class="evaluate" v-if="waitingMsg">
								<span>{{waitingText}}</span>
								<el-button type="primary" style="margin: 10px auto; display: block;"
										   @click="closedWating">退出排队
								</el-button>
							</div>

						</div>

						<!--············ 和人工会话聊天模块 ··············-->
						<div v-if="machineAndAtl == 100">
							<!--历史消息-->
							<div v-for="(item,index) in hisSviceChat" :key="index">
								<!-- 客服信息 -->
								<div class="conversationBox" v-if="item.from_id.startsWith('KF')">
									<div class="timer">{{item.time_line | formatDate}}</div>
									<div class="row">
										<div class="conversation row">
											<div class="headImg">
												<img :src="serviceImg?url+serviceImg:require('@/assets/st-img/kf.png')"
													 alt="">
											</div>
											<div class="cont left">
												<div v-if="item.content != ''" v-html="item.content.text"></div>
												<div v-if="item.content.img != ''" slot="file">
													<img class="el-upload-list__item-thumbnail"
														 @click="handlePictureCardPreview(url+item.content.img)"
														 style="width:100%;height:auto;border-radius: 10px;"
														 :src="url+item.content.img" alt="">
												</div>
											</div>
										</div>
										<div style="width:66px;"></div>
									</div>
								</div>
								<!-- 用户信息 -->
								<div class="conversationBox" v-else>
									<div>
										<div class="timer">{{item.time_line | formatDate}}</div>
										<div class="customer row allAlignment">
											<div style="width:66px;"></div>
											<div class="row">
												<div class="cont right">
													<div v-if="item.content != ''" v-html="item.content.text"></div>
													<div v-if="item.content.img != ''" slot="file">
														<img class="el-upload-list__item-thumbnail"
															 @click="handlePictureCardPreview(url+item.content.img)"
															 style="width:100%;height:auto;border-radius: 10px;"
															 :src="url+item.content.img" alt="">
													</div>
												</div>
												<div class="headImg">
													<img :src="require('@/assets/st-img/timg.jpg') " alt="">
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>

							<!-- 人工客服回复消息 -->
							<div v-for="item in customerSviceChat" :key="item.id">
								<div class="conversationBox" v-if="item.type == 'service' ">
									<div class="timer" v-html="item.time"></div>
									<div class="row">
										<div class="conversation row">
											<div class="headImg">
												<img :src="serviceImg?url+serviceImg:require('@/assets/st-img/kf.png')"
													 alt="">
											</div>
											<div class="cont left">
												<div v-if="item.content != ''" v-html="item.content"></div>
												<div v-else slot="file">
													<img class="el-upload-list__item-thumbnail"
														 @click="handlePictureCardPreview(url+item.imgUrl)"
														 style="width:100%;height:auto;border-radius: 10px;"
														 :src="url+item.imgUrl" alt="">
												</div>
											</div>
										</div>
										<div style="width:66px;"></div>
									</div>
								</div>


								<!-- 用户发送文本消息 -->
								<div class="conversationBox" v-if="item.type == 'user' ">
									<div>
										<div class="timer">{{item.time}}</div>
										<div class="customer row allAlignment">
											<div style="width:66px;"></div>
											<div class="row">
												<div class="cont right">
													<div v-if="item.content != ''" v-html="item.content"></div>
													<div v-else slot="file">
														<img class="el-upload-list__item-thumbnail"
															 @click="handlePictureCardPreview(url+item.imgUrl)"
															 style="width:100%;height:auto;border-radius: 10px;"
															 :src="url+item.imgUrl" alt="">
													</div>
												</div>
												<div class="headImg">
													<img :src="require('@/assets/st-img/timg.jpg') " alt="">
												</div>
											</div>
										</div>
									</div>
								</div>

								<div v-if="item.type == 'system' ">
									<!-- 客服会话转接 -->
									<div class="promptBox" v-if="item.str == 'changeKeFu'">
										<div class="prompt help">
											<span>会话转接成功</span>
										</div>
									</div>

									<!-- 历史会话 -->
									<div class="promptBox" v-if="item.str == 'historyMsg'">
										<div class="prompt help">
											<span>{{historyMsgtext}}</span>
										</div>
									</div>


								</div>

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

							<!-- 评价 -->
							<div class="evaluate" @click="ejectEvl(10)" v-if="consult">
								<span>欢迎你的咨询，请对我们的服务做出评价</span>
								<span class="btn seek">评价</span>
							</div>

							<div class="promptBox" v-if="comtSuccess">
								<div class="prompt help">
									<span>您对我们的服务评价为： {{comtCount}}。非常感谢！</span>
								</div>
							</div>


							<!-- 客服会话超时 -->
							<div class="promptBox" v-if="willOverTime">
								<div class="prompt help">
									<span>{{overTimeMsg}}</span>
								</div>
							</div>


						</div>

						<!-- 发送消息音频提示 -->
						<audio id="send" src="../../static/send.wav"></audio>
						<!-- 接收消息音频提示 -->
						<audio id="receive" src="../../static/receive.wav"></audio>

					</el-row>


					<!--·········· 文本编辑框 ···········-->
					<el-row class="chatting">
						<el-col>
							<!-- 发送图和表情按钮 -->
							<div style="height:18px; display:flex;">
								<el-popover id="pop" placement="top-start" width="200" trigger="hover">
									<ul>
										<li class="emoticon" v-for="(item,index) in frceArr" :key="item.id">
											<img class="pointer" :src="require(`@/assets/st-img/${index}.gif`)"
												 @click="memeImg(index)" alt="">
										</li>
									</ul>
									<el-button class="expression" slot="reference"></el-button>
								</el-popover>
								<el-upload class="avatar-uploader" action="/api/index/upload/uploadImg"
										   :on-success="handleAvatarSuccess"
										   :before-upload="beforeAvatarUpload"
										   :on-error='handError'
										   list-type='no' accept="image/jpeg,image/jpg,image/png,image/svg">
									<!-- <img v-if="imageUrl" :src="imageUrl" class="avatar"> -->
									<i slot="default" class=" photo"></i>
								</el-upload>
							</div>

							<div class="row center allAlignment chattingBox">
								<div style="width:300px;">
									<el-input
											type="textarea"
											maxlength="450"
											show-word-limit
											class="scroll"
											id="information"
											v-model.trim="information"
											autofocus
											placeholder="请输入你的问题："
											@keyup.enter.native="listenEnter($event)">
									</el-input>
								</div>
								<div>
									<!-- 准备修改 -->
									<div @click="sendCol?(!closeByServer||artAndLeave==0||artAndLeave==100?sendInfo():''):''"
										 class="sendOut pointer"
										 :class="sendCol?(!closeByServer||artAndLeave==0||artAndLeave==100?'sendCol':'netSendCol'):'netSendCol'">
										<span class="">发送</span>
									</div>
								</div>
							</div>
						</el-col>
					</el-row>
				</el-main>


				<el-aside width='255px' v-if="retractShow">
					<el-row class="rt">
						<div v-if="machineAndAtl == 10">
							<el-col :span='24' class="artificial pd20">
								<div class="infor">
									<div>
										<span>姓名:</span>
										<span>智能客服</span>
									</div>
									<div>
										<span>工号:</span>
										<span>001</span>
									</div>
									<div>
										<span>性别:</span>
										<span>保密</span>
									</div>
									<div>
										<span>职务:</span>
										<span>咨询客服</span>
									</div>
								</div>
								<div class="headPortrait">
									<img :src="require('@/assets/st-img/headPortrait.png')" alt="">
								</div>
							</el-col>
							<el-col class="autograph pd20">
								<div>
									<span>个性签名:</span>
									<span></span>
								</div>
							</el-col>
						</div>
						<div v-if="machineAndAtl == 100">
							<el-col :span='24' class="artificial pd20">
								<div class="infor">
									<div>
										<span>姓名:</span>
										<span v-if="service.serverInfo"
											  :title="service.serverInfo.name ? service.serverInfo.name : '001客服' ">{{ service.serverInfo.name ? service.serverInfo.name : '001客服' }}</span>
									</div>

									<div>
										<span>工号:</span>
										<span :title="service.serverInfo ? service.serverInfo.job_name : '001'">{{service.serverInfo ? service.serverInfo.job_name : '001'}}</span>
									</div>
									<div>
										<span>性别:</span>
										<span :title="service.serverInfo ? service.serverInfo.gender : '保密'">{{service.serverInfo ? service.serverInfo.gender : '保密'}}</span>
									</div>
									<div>
										<span>职务:</span>
										<span class="duty"
											  :title="service.serverInfo ? service.serverInfo.groupname : '咨询客服'">{{service.serverInfo ? service.serverInfo.groupname : '咨询客服'}}</span>
									</div>
								</div>
								<div class="headPortrait">
									<img :src="service.serverInfo ? service.serverInfo.avatar ?  (url+service.serverInfo.avatar) :require('@/assets/st-img/kf.png') : require('@/assets/st-img/kf.png')"
										 alt="">
								</div>
							</el-col>
							<el-col class="autograph pd20">
								<div>
									<span>个性签名:</span>
									<span :title="service.serverInfo ? service.serverInfo.signature :'' ">{{service.serverInfo ? service.serverInfo.signature :'' }}</span>
								</div>
							</el-col>
						</div>

						<el-col class="advent" v-for="imgs in advert" :key="imgs.id">
							<a :href="'http://'+imgs.advertisement_url" target="_blank" rel="noopener noreferrer">
								<img :src="url + imgs.advertisement_img" alt="">
							</a>
						</el-col>
					</el-row>
				</el-aside>

			</div>
			<!-- 评价框 -->
			<el-card id="box_card" class="box-card" v-if="evlShow">
				<div class="close"><i @click="closeEvl()"></i></div>
				<div class="tit">
					<span>感谢您的咨询，请对我们的服务做出评价</span>
				</div>
				<div class="selIcon row allAlignment">
					<div @click="chage(1)">
						<i :class="changeIcon == 10? '':'sfd'"></i>
						<span>满意</span>
					</div>
					<div @click="chage(2)">
						<i class="comm" :class="changeIcon == 100?'comm2':''"></i>
						<span>一般</span>
					</div>
					<div @click="chage(3)">
						<i class="notSfd" :class="changeIcon == 1000?'notSfd2':''"></i>
						<span>不满意</span>
					</div>
				</div>
				<div class="sure" @click="evaluateSure()">
					<span>确定</span>
				</div>
			</el-card>

			<div class="zzBox" v-if="zzShow"></div>


			<el-dialog
					:close-on-click-modal="true"
					:close-on-press-escape="true"
					title="是否发送图片"
					:visible.sync="dialogPaste"
					width="35%">
				<el-image :src="pasteUrl" :fit="fit"></el-image>
				<span slot="footer" class="dialog-footer">
					<el-button @click="dialogPaste = false">取 消</el-button>
					<el-button type="primary" style="color: #333" @click="handleClose()">确 定</el-button>
				</span>
			</el-dialog>
		</div>
	</div>
</template>
<script>
	import '../css/index.css';
	import frce from '../assets/frce.js';
	import fk from '../assets/st-img/kf.png'

	export default {
		data() {
			return {
				textarea: '',//备注
				evlShow: false, // 评价框显示
				zzShow: false, // 遮罩层显示
				vertion: '',//图形验证码
				provShow: true, // 验证框显示
				changeIcon: 10,
				name: '', // 验证框姓名model
				phone: '',// 验证框电话model
				email: '',// 验证框邮箱model
				frceArr: [], //表情包代码
				information: '',//发送的文本信息
				sendCol: false, // 发送按钮切换样式
				selType: false, //图标选中样式 true为选中，false为未选中
				selNum: 0, // 服务端消息数量
				tokNum: 0, // 用户端消息数量
				// syType : false,
				// sqType : false,
				error: false,
				emlError: false,
				artAndLeave: 0, // 默认为100，转人工为10，人工不在转留言为100
				chatCont: [], // 机器人会话数据
				imageUrl: [],//上传图片
				img: '', //上传的单个图片路径
				dialogVisible: false, //图片放大
				dialogImageUrl: '', // 放大的图片
				dialogUrl: false,
				serviceInfor: '', //客服信息
				websock: null, //会话初始值
				// currTime: "", //获取系统时间
				apiToken: '',//系统Token
				machine: [], //机器会话信息

				advert: '', // 广告语
				problem: '', //机器智能问题
				macNotPro: false, //机器人问题无法解决显示
				answer: [], //解答问题的答案
				questionShow: true, // 问题显示
				consult: false, //评价模块显示
				type: 1001, //自增
				jumpArtl: false, // 跳转人工客服状态
				group: '', //客服组
				userConversation: {}, //用户当前会话
				machineAndAtl: 10, //默认为机器人，100为人工
				satisfaction: 1, //评价满意度,1为满意，2为一般，3为不满意
				url: 'http://kfadmin.bocai186.com', // 域名地址
				// url: 'http://192.168.2.187:8090', // 域名地址
				user_info: '', // 用户信息
				// 人工客服信息
				service: '',
				serviceList: [], //后台推送的人工客服列表
				customerWelCome: '', // 客服欢迎语
				customerSviceChat: [], // 客服会话信息
				hisSviceChat: [],
				serviceImg: '',
				timerVote: '', //存储上一次时间
				curtTimer: '',//当前时间
				returnTimer: '',//返回当前时间

				// isConnection:true,//人工分组列表开关
				chatNum: '', // 会话数量
				comtSuccess: false, // 评论发送成功显示
				comtCount: '', // 评论成功返回的满意度
				retractShow: true, // 展开侧边栏
				sensitive: [], //敏感词1
				senType: false,//敏感词状态
				sensitiveNumber: 0,//敏感词次数
				doubSensitive: [],//重复的敏感词
				senInfo: '', //敏感词数据

				hourse: '', //返回时间，小时
				closeByServer: false, //客服关闭会话
				serverNotOnlin: false, //客服掉线
				willOverTime: false, //超时关闭会话
				overTimeMsg: '', // 超时提示内容
				allLoading: true, //整个页面加载中
				webTime: '',//网络时间
				changeKeFu: false, //客服转接
				historyMsg: false, // 是否展示历史信息
				historyMsgtext: "", // 历史信息内容提示
				/*****************websockt心跳变量*******************/
				reconnectData: null,
				lockReconnect: false,    //避免重复连接，因为onerror之后会立即触发 onclose
				timeout: 10000,          //10s一次心跳检测
				timeoutObj: null,
				serverTimeoutObj: null,

				logo: '', // logo 图片
				Onlinemsg: "", // 系统留言信息
				showleaveIcon: true, // 留言按钮触发条件
				jumpName: '', // 根据类型提示售后服务名称
				waitingMsg: false, // 是否显示等待排队
				waitingText: "", // 等待内容

				service_on: true, // 现在状态
				avatarImg: fk,

				dialogPaste: false,
				pasteUrl: '',//截屏图片
				fit: 'contain', // 图片样式
				resigtermsg: false, //提示重连
				evaluateNum: false,
				jumps: false,
				customerTime: "",
				helloNum: true, // 欢迎语限制
				hisLength:0, // 历史数量
			}
		},
		filters: {
			/**
			 * 时间戳转日期自定义时间格式
			 * timeStamp:时间戳
			 * custom:转换日期时定义年月日用是什么符号隔开
			 * isDtae:0=月份、1=日期、3=时间
			 */

			formatDate: function (value, custom = '', isDtae = 3) {
				let timeStamp = value;
				var date = new Date();
				date.setTime(timeStamp * 1000);
				var y = date.getFullYear();
				var m = date.getMonth() + 1;
				m = m < 10 ? ('0' + m) : m;
				var d = date.getDate();
				d = d < 10 ? ('0' + d) : d;
				var h = date.getHours();
				h = h < 10 ? ('0' + h) : h;
				var minute = date.getMinutes();
				var second = date.getSeconds();
				minute = minute < 10 ? ('0' + minute) : minute;
				second = second < 10 ? ('0' + second) : second;
				if (isDtae == 0) {
					return y + custom + m //+'student';
				} else if (isDtae == 1) {
					return y + custom + m + custom + d;
				} else if (isDtae == 3) {
					return h + ':' + minute;
				} else {
					return y + '-' + m + '-' + d + ' ' + h + ':' + minute //+ ':' + second;
				}
			}
		},
		methods: {
			/******************qq截图粘贴---获取剪切板数据*****************/
			getClipboardData(e) {
				// 添加到事件对象中的访问系统剪贴板的接口
				let clipboardData = e.clipboardData,
					i = 0,
					items, item, types;

				if (clipboardData) {
					items = clipboardData.items;
					if (!items) {
						return;
					}
					item = items[0];
					// 保存在剪贴板中的数据类型
					types = clipboardData.types || [];
					for (; i < types.length; i++) {
						if (types[i] === 'Files') {
							item = items[i];
							break;
						}
					}
					// 判断是否为图片数据
					if (item && item.kind === 'file' && item.type.match(/^image\//i)) {
						this.imgReader(item);
					}
				}
			},

			/**********qq截图粘贴---获取剪切板图片信息进行转换blob***********/
			imgReader(item) {
				let _this = this;
				var blob = item.getAsFile(), reader = new FileReader();
				// 读取文件后将其显示在网页中
				reader.onload = function (e) {
					var img = new Image();
					img.src = e.target.result;
					_this.dialogPaste = true;
					_this.pasteUrl = e.target.result;
					// console.log(img.src)
					//document.body.appendChild( img );
				};
				// 读取文件
				reader.readAsDataURL(blob);
			},

			/***qq截图粘贴************/
			paste() {
				document.getElementById('information').addEventListener('paste', this.getClipboardData)
			},

			/*****发送截图******/
			handleClose(done) {
				this.dialogPaste = false;
				let blob = this.$public.dataURItoBlob(this.pasteUrl)
				let self = this;
				var formData = new FormData();
				formData.append("file", blob);
				self.upImg(formData);
			},

			upImg(formData) {
				let self = this;
				// 数据结构请求
				this.$axios.post('/api/index/upload/uploadImg', formData).then(res => {
					// console.log(res.data.data)
					// console.log(res.data.data.src);
					let str = this.information;
					let formatStr = str.replace(/\n/g, '<br/>');
					if (res.data.code == 1) {
						let isFirst = true;
						let str = this.information;
						let formatStr = str.replace(/\n/g, '<br/>');
						// 给机器人发送文本消息
						if (this.machineAndAtl == 10) {
							//给机器人发送文本消息-本地储存
							let datas = {
								time: '',
								chat: this.turnFace(this.shieldingKeyword(formatStr)),
								imgUrl: res.data.data.src,
								type: 'user'
							}

							this.chatCont.push(datas)
							//消息发送-机器人
							this.websocketsend(JSON.stringify({
								type: 'toRobot',
								data: {
									groups_id: '1',
									robot_name: this.shieldingKeyword(formatStr),
									webTime: '',
									robotgroups_id: '1',
								}
							}))
						} else if (this.machineAndAtl == 100) { //人工聊天
							// 人工聊天超时隐藏
							this.willOverTime = false;

							//发送给客服消息-本地储存
							this.customerSviceChat.push({
								time: '',
								content: this.turnFace(this.shieldingKeyword(formatStr)),
								imgUrl: res.data.data.src,
								type: 'user',
							});

							//消息发送-客服
							this.websocketsend(JSON.stringify({
								type: 'chatMessage',
								data: {
									from_name: this.user_info.name,
									from_avatar: this.user_info.avatar,
									from_id: this.user_info.id,
									content: JSON.stringify({
										text: formatStr,
										img: res.data.data.src,
										type: 'user'
									}),
									webTime: '',
									to_id: this.service.kf_id,
									to_name: this.service.kf_name,
									sensitiveNumber: this.sensitiveNumber,
									conversationId: this.service.conversationId
								}
							}))
							this.tokNum++;
						}
						// 发送之后清空发送数据
						this.img = '';
						this.information = '';
						//高度自动向上滑动
						this.automaticRolling();
					}
				})
			},


			// 退出聊天
			exit() {

				this.websocketsend(JSON.stringify({
					type: 'kfCloseUser',
					data: {
						to_id: this.service.kf_id,
						kf_id: this.user_info.id,
						group_id: this.service.serverInfo.group,
						conversationId: this.service.conversationId,
						type: 6,
					}
				}))
				// this.goBack();
				this.machineAndAtl = 10;
				const loading = this.$loading({
					lock: true,
					text: '本次会话正在关闭',
					spinner: 'el-icon-loading',
				});
				setTimeout(() => {
					loading.close();
				}, 4000);

			},

			// 关闭评价框按钮
			closeEvl() {
				this.evlShow = false;
				this.zzShow = false;
			},
			// 消息发送
			sendAudio() {
				let send = document.getElementById('send')
				send.play()
			},
			// 消息接收
			receiveAudio() {
				let receive = document.getElementById('receive')
				receive.play();
			},
			// 回车提交
			listenEnter(event) {
				let text = document.getElementById('information');
				if (event.keyCode == 13 && event.ctrlKey == true) {
					text.value = text.value + '\n'
				} else if (event.keyCode == 13) {
					if (this.information == "") {
						text.value = '';
						return false
					} else {
						this.sendInfo();
						event.preventDefault()
					}
				}
			},
			// 切换留言板返回
			back() {
				document.getElementById('information').removeEventListener('paste', this.getClipboardData)
				this.$emit('value', 100)
			},
			/******************文字信息转表情******************/
			turnFace(data) {
				let str = data.match(/\#\[.*?\]\//g);
				let arr = Array.from(new Set(str));
				arr.forEach(e => {
					let imgsrc = '';
					for (let i = 0; i < this.frceArr.length; i++) {
						let expText = e.slice(1, e.length - 1);
						if (expText == this.frceArr[i]) {
							imgsrc = '<img class="hover" src="' + require(`@/assets/st-img/${i}.gif`) + '"/>'
							break;
						}
					}
					data = data.replace(new RegExp(`\\#\\[${e.substring(2, e.length - 2)}\\]\\/`, 'g'), imgsrc);
				})
				return data;
			},

			// 关闭加载中
			allLoadingClose() {
				this.allLoading = false;
			},

			/**************切换显示客服信息**************** */
			retract() {
				this.retractShow = !this.retractShow;
			},

			/***************发送图片***************/
			beforeAvatarUpload(file) {
				let self = this
				const isJPG = file.type == 'image/jpeg' || 'image/jpg' || 'image/png' || 'image/svg';
				const isLt2M = file.size / 1024 / 1024 < 2;

				if (!isJPG) {
					this.$message.error('上传只能是图片格式!');
					return false;
				}
				if (!isLt2M) {
					this.$message.error('上传图片大小不能超过 2MB!');
					return false;
				}
				//对图片进行压缩
				const imgSize = file.size / 1024 / 1024;
				if (imgSize > 0.5) {
					const _this = this
					return new Promise(resolve => {
						const reader = new FileReader()
						const image = new Image()
						image.onload = (imageEvent) => {
							const canvas = document.createElement('canvas');
							const context = canvas.getContext('2d');
							const width = image.width * 0.4;
							const height = image.height * 0.4;
							canvas.width = width;
							canvas.height = height;
							context.clearRect(0, 0, width, height);
							context.drawImage(image, 0, 0, width, height);
							const dataUrl = canvas.toDataURL(file.type);
							const blobData = _this.dataURItoBlob(dataUrl, file.type);
							resolve(blobData)
						}
						reader.onload = (e => {
							image.src = e.target.result;
						});
						reader.readAsDataURL(file);
					})
				}
			},

			dataURItoBlob(dataURI, type) {
				var binary = atob(dataURI.split(',')[1]);
				var array = [];
				for (var i = 0; i < binary.length; i++) {
					array.push(binary.charCodeAt(i));
				}
				return new Blob([new Uint8Array(array)], {type: type});
			},

			handError(err, file, fileList) {
				// 获取当前发送时间
				// console.log(err, '上传图片报错！')
			},


			/***************传输成功之后返回图片*************** */
			handleAvatarSuccess(res, file) {
				// console.log(res)
				this.dialogUrl = true;
				this.img = res.data.src;
				this.sendMessage();
			},
			/***************图片放大*************** */
			handlePictureCardPreview(url) {
				this.dialogImageUrl = url;
				this.dialogVisible = true;
			},

			/***************弹出评价框*************** */
			ejectEvl(type) {
				if (this.comtSuccess) return;
				this.changeIcon = 10;
				if (type == 10) {
					this.evlShow = true
				}
				this.zzShow = true;
			},

			/***************传入父组件进行组件切换*************** */
			leaveMsg() {
				this.$emit('value', 100)
			},
			//回到初始页面
			goBack(type) {
				if (type === 1) {
					this.artAndLeave = 0;
					this.chatCont = [];
				} else {
					this.closeByServer = true;
					this.machineAndAtl = 10;
					this.macNotPro = false;
					this.jumpArtl = false;
					this.willOverTime = false;
					this.waitingMsg = false;
					this.time = '';
					this.returnTimer = '';
					this.service_on = true;
					this.historyMsg = false,
					// this.automaticRolling();
					this.customerSviceChat = [];
					this.reconnect();
					this.selNum = 0;
					this.tokNum = 0;
				}
			},


			/*******发送消息按钮*******/
			sendInfo() {
				this.closeByServer = false;
				this.artAndLeave = 0;
				this.jumpArtl = false;
				this.dialogUrl = false;
				this.sendMessage();
				this.sendAudio();
			},

			/***************改变评价框的满意度*************** */
			chage(type) {
				this.satisfaction = type;
				if (type == 1) {
					this.comtCount = '满意'
					this.changeIcon = 10;
				} else if (type == 2) {
					this.comtCount = '一般'
					this.changeIcon = 100;
				} else {
					this.comtCount = '不满意'
					this.changeIcon = 1000;
				}
			},

			/***************图标样式切换*************** */
			select(type) {
				if (type == 1) {
					this.selType = !this.selType;
				} else if (type == 2) {
					this.syType = !this.syType;
				} else {
					this.sqType = !this.sqType;
				}
			},

			/***************评价确认*************** */
			evaluateSure() {
				this.websocketsend(JSON.stringify({
					type: 'evaluate',
					data: {
						evaluate_id: this.satisfaction,
						conversationId: this.service.conversationId,
						evaluate_content: this.textarea
					}
				}))
				this.evlShow = false;
				this.zzShow = false;
				this.textarea = '';
				this.consult = false;
				if (this.changeIcon == 10) {
					this.comtCount = '满意'
				}
			},

			/***************验证框确认*************** */
			yySure() {
				this.provShow = false;
				this.zzShow = false;
			},

			/***************转人工客服列表*************** */
			changeService() {
				// if(!this.isConnection) return
				this.$axios.post('/api/index/groups/index', {}, {
					headers: {
						'Content-Type': 'application/x-www-form-urlencoded',
						'apiToken': this.setApiToken('index', 'groups', 'index')
					}
				}).then(res => {
					if (res.data.code == 1) {
						this.serviceList = res.data.data;
						this.chatCont.push({
							'type': 'artService'
						})
						this.automaticRolling();
					}
				})
				// this.isConnection = false;
			},

			/***************表情点击*************** */
			memeImg(i) {
				//当表情被点击
				this.information = this.information + "#" + this.frceArr[i] + "/";
			},

			/***************失去焦点做正则验证*************** */
			sureInfor(type) {
				if (type == 1) {
					if (!/^1[34578]\d{9}$/.test(this.phone)) {
						this.error = true;
						this.phone = '';
					} else {
						this.error = false;
					}
				} else if (type == 10) {
					if (!/^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/.test(this.email)) {
						this.emlError = true;
						this.email = '';
					} else {
						this.emlError = false;
					}
				}
			},

			/***************获取热点智能问题*************** */
			getProblem() {
				this.$axios.post('/api/index/robot/index', {groups_id: 1, robotgroups_id: 1}, {
					headers: {
						'Content-Type': 'application/x-www-form-urlencoded',
						'apiToken': this.setApiToken('index', 'robot', 'index')
					}
				}).then(res => {
					if (res.data.code == 1) {
						this.problem = res.data.data;
					}
				})
			},

			/*****************获取聊天次数*******************/
			getChatNum() {
				this.$axios.post('/api/index/evaluate/minRound', '', {
					headers: {
						'Content-Type': 'application/x-www-form-urlencoded',
						'apiToken': this.setApiToken('minround', 'evaluate', 'index')
					}
				}).then(res => {
					if (res.data.code == 1) {
						this.chatNum = res.data.data.systemconfig_data
					}
				})
			},

			/*****************屏蔽关键字******************/
			shieldingKeyword(data) {
				//将敏感词组用|转换字符串
				let snstive = this.sensitive.join('|');
				//console.log(snstive);
				this.sensitiveNumber = 0;
				//匹配出会话中的敏感词
				return data.replace(eval('/' + snstive + '/g'), (res) => {
					var str = '';
					for (var i = 0; i < res.length; i++) {
						str += '*';
					}
					this.sensitiveNumber++;
					return str;
				})
			},

			/*---------------------------------------------------------------------------------*/
			/**************初始化WebSocket****************/
			initWebSocket() {
				let _this = this;
				let apiToken = this.$md5.hex_md5('customer-service' + window.location.origin);
				this.websock = new WebSocket('ws://103.108.43.176:9101?apiToken=' + apiToken);
				// this.websock = new WebSocket('ws://192.168.2.187:9101?apiToken=' + apiToken);
				this.websock.debug = true;
				// 数据接收
				this.websock.onmessage = this.websocketonmessage;
				// 连接建立之后
				this.websock.onopen = this.websocketonopen;
				// 连接建立失败重连
				this.websock.onerror = this.websocketonerror;
				// 关闭会话
				this.websock.onclose = this.websocketclose;
			},

			/****************连接建立成功***************/
			websocketonopen() {
				console.log('链接成功');
				// 如果有传 group_id 直接跳转人工客服
				let group_id = this.$public.getQueryString("group_id");
				if (group_id) {
					this.jumpService(group_id);
				}

				//心跳检测
				this.heatBeat()
			},

			/*************连接建立失败重连***************** */
			websocketonerror(e) {
				console.log('连接建立失败重连:', e)
				this.goBack(1);
			},

			/**************数据接收***************** */
			websocketonmessage(e) {
				let redata = e
				if (e.data) {
					redata = JSON.parse(e.data);
				}
				//心跳检测
				this.heatBeat();

				// 心跳检测
				if (redata.message_type == "ping") {
					this.websock.send('{"type":"pong"}')
					return false;
				}
				if (redata.type == 'pong') return false;

				if (redata.type != 'pong' || redata.message_type != "ping") {
					console.log(redata)
				}
				// 欢迎语
				if (redata.message_type == 'helloMessage') {
					if(this.helloNum){
						this.machine.push(redata.data.content);
					}
				}
				// 广告语
				if (redata.message_type == 'advertisement') {
					this.helloNum = false
					this.advert = redata.data;
				}
				// 评价
				if (redata.message_type == 'getEvaluate') {
					this.consult = true;
				}
				//返回的会话时间
				if (redata.message_type == 'webTime') {

					//处理会话时间大于两分钟显示会话时间并且储存本次会话时间
					if (this.machineAndAtl == 100) {
						let num = this.customerTime;
						// console.log(this.customerSviceChat[num]);
						if (this.customerSviceChat[num].type == "user") {
							if (this.webTime) {
								let  newTime = redata.data.webTime.split(":");
								let  oldTime = this.webTime.split(":");
								// console.log(newTime[1] - oldTime[1] >= 2 , newTime[0]> oldTime[0])
								// console.log(newTime[1] - oldTime[1] >= 2 , newTime[0]> oldTime[0])
								if (newTime[1] - oldTime[1] >= 2 || newTime[0]> oldTime[0]) {
									this.$set(this.customerSviceChat[num], 'time', redata.data.webTime);
									this.webTime = redata.data.webTime;
								}else{
									this.$set(this.customerSviceChat[num], 'time', '');
								}
							} else {
								this.$set(this.customerSviceChat[num], 'time',redata.data.webTime);
							}
						} else {
							this.$set(this.customerSviceChat[this.customerTime], 'time', redata.data.webTime);
						}
						//console.log(this.customerSviceChat)
					}

				}
				//会话超时提示
				if (redata.message_type == 'overtime') {
					console.log('接收会话超时');
				}
				// 链接客服信息
				if (redata.message_type == 'connect') {
					const loading = this.$loading({
						lock: true,
						text: '正在连接人工客服，请稍候',
						spinner: 'el-icon-loading',
					});
					setTimeout(() => {

						let server = {};
						if (redata.data) {
							server = redata.data
						} else {
							server = {
								conversationId: redata.data.conversationId,
								kf_id: redata.data.kf_id,
								kf_name: "",
								serverInfo: {
									avatar: this.avatarImg,
									client_id: "",
									group: "",
									id: "",
									intime: "",
									job_name: "",
									name: "tank",
									signature: "",
									status: 0,
									task: 0,
								}

							}
						}

						// this.webTime = ''
						this.artAndLeave = 10;
						this.machineAndAtl = 100;
						// console.log(server, '============客服信息')
						this.service = server;
						// console.log();
						this.serviceImg = server.serverInfo.avatar;
						if (server.serverInfo.gender == 1) {
							server.serverInfo.gender = "男"
						} else if (server.serverInfo.gender == 2) {
							server.serverInfo.gender = "女"
						} else {
							server.serverInfo.gender = "保密"
						}

						this.serviceImg = server.serverInfo.avatar;
						this.consult = false;
						this.evlShow = false;
						this.comtSuccess = false;
						this.showleaveIcon = false;
						this.waitingMsg = false;
						this.selNum = this.selNum;
						this.tokNum = this.tokNum;
						this.service_on = true;
						this.closeByServer = false;
						// console.log(redata.data.evaluate_id,"评价数量")
						if (redata.data.evaluate_id > 0) {
							this.evaluateNum = true;
						}

						loading.close();
					}, 2000);

				}
				// 暂无客服
				if (redata.message_type == 'wait') {
					let content = JSON.parse(redata.data.content)
					this.artAndLeave = 100;
					// console.log("暂无客服")
					// this.chatCont.push({type:"tips",str:"artAndLeave100"})
				}
				//接收客服会话
				if (redata.message_type == 'chatMessage') {
					
					// 接收提示音
					this.receiveAudio();
					
					//会话大于两分钟显示
					let timer = ''
					let contType = this.isJSON(redata.data.content);
					let content = {};
					if (contType == false) {
						content.text = redata.data.content;
						timer = ''
					} else {
						content = JSON.parse(redata.data.content)

						if (this.webTime == '') {
							timer = redata.data.time;
							this.webTime = redata.data.time;
						} else {
							let timeStamp = this.webTime.split(":");
							let rdtime = redata.data.time.split(":");
							if (timeStamp[0] < rdtime[0]  ||  (timeStamp[0] == rdtime[0] && rdtime[1] -timeStamp[1] >=2)) {
								timer = redata.data.time;
							}else{
								timer = ''
							}
						}
						//存储会话超时间
						this.webTime = redata.data.time;
					}
					let obj = {
						time: timer,
						content: content.text ? this.turnFace(content.text) : '',
						imgUrl: content.img ? content.img : '',
						type: 'service'
					}
					this.customerSviceChat.push(obj);
					// console.log(this.customerSviceChat);
					this.selNum++;
					this.automaticRolling();
				}
				//接收机器会话
				if (redata.message_type == 'robotMessage') {
					if (redata.data.content == 'error') {
						let _this = this;
						this.chatCont.push({type: 1001})
						this.automaticRolling();
					} else {
						this.chatCont.push({
							'robot_content': redata.data.content,
							'type': 'machine'
						})
						this.automaticRolling();
					}

					let num = this.chatCont.length - 2;
					if (this.webTime) {
						if (redata.data.time.split(":")[1] - this.webTime.split(":")[1] > 2) {
							this.$set(this.chatCont[num], 'time', redata.data.time);
							this.webTime = redata.data.time;
						} else {
							this.$set(this.chatCont[num], 'time', '');
						}
					} else {
						this.webTime = redata.data.time = redata.data.time;
						this.$set(this.chatCont[num], 'time', redata.data.time);
					}

				}
				// 没有客服上线.
				if (redata.message_type == 'notice') {
					this.artAndLeave = 100;
					this.automaticRolling();
					this.machineAndAtl = 10;
					this.jumpArtl = false;
					// console.log(redata.content);
					this.Onlinemsg = redata.content;

					this.$alert(this.jumpName + this.Onlinemsg,'系统提示', {
						confirmButtonText: '确定',
						dangerouslyUseHTMLString: true
					});
				}
				// 客服关闭会话.
				if (redata.message_type == 'closeBysever') {
					this.jumps = false;
					this.machineAndAtl = 10;
					this.selNum = 0;
					this.showleaveIcon = true;
					this.chatCont = []
					this.chatCont.push({type: 'tips', str: 'resigtermsg'})
					// 关闭清除历史信息
					this.hisSviceChat = [];
					this.customerSviceChat = [];
					this.selNum = 0;
					this.tokNum = 0;
				}
				// 客服掉线.
				if (redata.message_type == 'serviceoffline') {
					this.serviceNotOnlineText = redata.msg;
					this.service_on = false;
					this.serverNotOnlin = true;
					this.chatCont = []
					this.chatCont.push({type: "tips", str: "serverNotOnlin"})
					this.closeByServer = true;
				}
				// 客服转接
				if (redata.message_type == 'changeKeFuSuccess') {
					this.changeKeFu = true;
					// this.goBack();
					this.customerSviceChat.push({type: 'system', str: 'changeKeFu'})
					this.consult = false;
				}
				// 客服会话超时
				if (redata.message_type == 'overtime') {
					this.willOverTime = true;
					this.automaticRolling();
					// this.goBack();
					this.overTimeMsg = redata.data.content;
				}
				// 客服等待排队
				if (redata.message_type == "inqueue") {
					this.jumps = true;
					this.waitingMsg = true;
					this.automaticRolling();
					this.waitingText = redata.content;
				}
				// 客服不在线请稍后再试
				if (redata.message_type == 'kfNotOnlin') {
					this.service_on = false;
				}
				// 评价返回
				if (redata.message_type == "evaluate") {
					if (redata.data.status == 1) {
						this.comtSuccess = true;
					}
				}
				// 历史信息
				if (redata.message_type == 'toOld') {
					let obj = redata;
					this.historyMsgtext = obj.data.content;
					obj.data.chatLog.forEach(res => {
						let content = JSON.parse(res.content)
						res.content = content;
						if (content.text) {
							content.text = this.turnFace(content.text)
							res.content = content
						}
						this.hisSviceChat.push(res)
					})



					this.customerSviceChat.push({type: 'system', str: 'historyMsg'})
					this.hisLength =obj.data.chatLog.length

				}

				// 退出排队
				if (redata.message_type == 'cancelqueueret') {
					this.jumps = false;
				}
			},

			closedWating() {
				this.jumps = true;
				this.waitingMsg = false;
				let data = {
					"type": "cancelqueue",
					"data": {
						"uid": localStorage.getItem('uid')
					}
				}
				this.websock.send(JSON.stringify(data));
			},


			/************关闭会话*******************/
			websocketclose(e) {
				console.log('websocket 关闭会话: ' + e.code, e)
				this.goBack();
			},

			/*************数据发送***************** */
			websocketsend(data) {
				this.websock.send(data);
			},


			/***************************************/
			//socket重连
			reconnect() {
				if (this.lockReconnect) {       //这里很关键，因为连接失败之后之后会相继触发 连接关闭，不然会连接上两个 WebSocket
					return
				}
				this.lockReconnect = true;
				this.reconnectData && clearTimeout(this.reconnectData);
				this.reconnectData = setTimeout(() => {
					this.initWebSocket();
					console.log('-----socket重连-----');
					this.lockReconnect = false;
				}, 3000)
			},

			/*************************************/
			//心跳检测
			heatBeat() {
				this.timeoutObj && clearTimeout(this.timeoutObj);
				this.serverTimeoutObj && clearTimeout(this.serverTimeoutObj);
				this.timeoutObj = setTimeout(() => {
					// console.log('发送', {type: 'ping'});
					this.websocketsend(JSON.stringify({type: 'ping'}))   //根据后台要求发送
					this.serverTimeoutObj = setTimeout(() => {
						// console.log('------心跳检测close-------')
						this.websock.close(); //如果 5秒之后我们没有收到 后台返回的心跳检测数据 断开socket，断开后会启动重连机制

					}, 5000);
				}, this.timeout)
			},


			/******************消息发送数据处理********************/
			sendMessage() {
				let str = this.information;
				let formatStr = str.replace(/\n/g, '<br/>');
				if (str.length > 450) {
					this.$message.error('输入内容不能大于450个字符');
					this.information = '';
					return false;
				}
				// 给机器人发送文本消息
				if (this.machineAndAtl == 10) {
					//给机器人发送文本消息-本地储存
					let datas = {
						time: '',
						chat: this.turnFace(this.shieldingKeyword(formatStr)),
						imgUrl: this.img,
						type: 'user'
					}
					this.chatCont.push(datas)
					//消息发送-机器人
					this.websocketsend(JSON.stringify({
						type: 'toRobot',
						data: {
							groups_id: '1',
							robot_name: this.shieldingKeyword(formatStr),
							webTime: this.webTime,
							robotgroups_id: '1',
						}
					}))
				} else if (this.machineAndAtl == 100) { //人工聊天

					// 人工聊天超时隐藏
					this.willOverTime = false;
					// 发送给客服消息-本地储存
					this.customerSviceChat.push({
						time: '',
						content: this.turnFace(this.shieldingKeyword(formatStr)),
						imgUrl: this.img,
						type: 'user',
					});
					//储存本次发送下标
					this.customerTime = this.customerSviceChat.length - 1;
					
					//消息发送-客服
					this.websocketsend(JSON.stringify({
						type: 'chatMessage',
						data: {
							from_name: this.user_info.name,
							from_avatar: this.user_info.avatar,
							from_id: this.user_info.id,
							content: JSON.stringify({
								text: formatStr,
								img: this.img,
								type: 'user'
							}),
							webTime: this.webTime,
							to_id: this.service.kf_id,
							to_name: this.service.kf_name,
							sensitiveNumber: this.sensitiveNumber,
							conversationId: this.service.conversationId
						}
					}))
					this.tokNum++;
					// console.log(this.tokNum,"我发的消息");

				}
				// 发送之后清空发送数据
				this.img = '';
				this.information = '';
				//高度自动向上滑动
				this.automaticRolling();
			},

			/*************设置token加密***************** */
			setApiToken(name, controller, modules) {
				return this.$md5.hex_md5(name + 'customer-service' + controller + modules)
			},

			/*************跳转人工客服***************** */
			jumpService(id, name) {
				if (this.jumps) {
					this.$alert('请先退出排队，再进行操作。', '提示信息', {
						confirmButtonText: '确定',
					});
					return false
				}
				this.jumpArtl = true;
				this.closeByServer = false;
				this.group = id;
				//人工会话登陆
				let data = {
					'type': 'userInit',
					data: {
						'uid': this.user_info.id,
						'name': this.user_info.name,
						'avatar': this.user_info.avatar,
						'group': this.group
					}
				}
				this.websock.send(JSON.stringify(data));
				// 客服类型名称
				this.jumpName = name;
			},

			/*************机器智能回答问题***************** */
			answers(idx) {
				let obj = {
					'robot_addTime': this.problem[idx].robot_addTime,
					'robot_content': this.problem[idx].robot_content,
					'type': 'machine'
				}
				this.information = this.problem[idx].robot_name
				this.sendMessage();
				this.automaticRolling();
			},

			/**************匿名注册**************** */
			registered() {
				let token = localStorage.getItem('token');
				let appuid = this.$public.getQueryString('appuid');
				let tutype = localStorage.getItem('tutype');
				if (appuid && tutype >= 1) {
					token = localStorage.getItem('token');
				} else if (!appuid && tutype < 1) {
					token = localStorage.getItem('token');
				} else {
					token = '';
				}
				let data = {
					token: token != null ? token : '',
					appid: this.$public.getQueryString('appid'),
					appuid: this.$public.getQueryString('appuid'),
				}
				this.$http.post('/index/register/autoReg', data).then(res => {
					if (res.data.code == 0) {
						this.$message({
							showClose: true,
							message: res.data.msg,
							type: 'error'
						});
					}
					if (res.data.code == 1) {
						this.user_info = res.data.data;
						// console.log(this.user_info,"用户信息")
						localStorage.setItem('uid', res.data.data.id)
						// 游客 token
						localStorage.setItem("token", res.data.data.token);
						localStorage.setItem("tutype", res.data.tutype);
						setTimeout(() => {
							//关闭加载条
							this.allLoadingClose();
							// 初始化websocket
							this.initWebSocket();
						}, 2000);
					}
				});
			},

			/***********聊天滑动的时候滑动滚动条到底部******************* */
			automaticRolling() {
				this.$nextTick(() => {
					let msg = document.getElementById('main') // 获取对象
					msg.scrollTop = msg.scrollHeight // 滚动高度
				})
			},

			/**************获取敏感词**************** */
			getSensitive() {
				let obj = {
					headers: {
						'Content-Type': 'application/x-www-form-urlencoded',
						"apiToken": this.setApiToken('sensitivewords', 'index', 'index')
					}
				};
				let data = {
					userToken: ''
				}
				this.$axios.post('/api/index/index/sensitiveWords', '', obj).then(res => {
					if (res.data.code == 1) {
						// console.log(res.data.data);
						res.data.data.userSensitive.forEach(res => {
							this.sensitive.push(res.sensitivewords_word)
						})
					}
				})
			},

			/**********判定是否是JSON格式*********** */
			isJSON(str) {
				if (typeof str == 'string') {
					try {
						JSON.parse(str);
						return true;
					} catch (e) {
						//console.log(e);
						return false;
					}
				}
			},

		},

		/**************页面加载中挂载**************** */
		mounted() {
			let self = this;
			this.frceArr = frce.frce;
			this.$axios.get('api/index/index/systime?t=' + new Date()).then(res => {
				if (res.data.code == 1) {
					// 获取系统时间
					let date = res.data.data.time.split(" ");
					date[0] = (new Date(date[0].replace(/-/g, '/')).getTime()) / 1000;
					// this.currTime = date[0];
					this.hourse = date[1];
					this.logo = res.data.data.logo;
					// 获取机器智能问题
					this.getProblem();
					// 匿名注册
					this.registered();

					// 获取聊天次数
					this.getChatNum();
					// 获取敏感词
					this.getSensitive();
				}
			})

			this.paste();
		},

		beforeDestroy() {

		},
		destroyed() {
			this.websock.close() //离开路由之后断开websocket连接
			this.lockReconnect = true;
			clearTimeout(this.reconnectData);      //离开清除 timeout
			clearTimeout(this.timeoutObj);         //离开清除 timeout
			clearTimeout(this.serverTimeoutObj);   //离开清除 timeout
		},
		computed: {
			inforLeng() {
				return this.information.length;
			}
		},
		watch: {
			inforLeng(val) {
				if (val > 0) {
					this.sendCol = true;
				} else {
					this.sendCol = false;
				}
			}
		}

	}
</script>
<style scoped>
	#welcome .row {
		margin-bottom: 5px;
	}

	.chatBox {
		width: 700px;
		position: relative;
	}

	.el-header {
		background: linear-gradient(90deg, rgba(22, 84, 209, 1) 0%, rgba(9, 52, 173, 1) 100%);
		box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.2);
	}

	.tit {
		height: 100%;
		line-height: 80px;
		text-align: left;
		padding-left: 20px;
	}

	.el-col span {
		font-size: 18px;
		color: #FFFFFF;
	}

	.imgBox {
		text-align: right;
	}

	.imgBox img {
		margin-right: 20px;
	}

	.imgBox img:nth-last-child(1) {
		margin-right: 0
	}

	.el-main {
		background: #fff;
		width: 63%;
		padding: 0;
	}

	.el-aside {
		background: #F5F5F5;
		width: 37%;
		overflow: hidden;
	}

	.cationer {
		height: 570px;
	}

	.cationer, .artificial {
		display: flex;
		justify-content: space-between;
		/* align-items: center; */

	}

	.rt {
		width: 100%;
		box-sizing: inherit;
	}

	.artificial {
		/* width: 150px; */
		/* padding:0 20px; */
		margin-top: 23px;
		margin-bottom: 9px;
		vertical-align: middle;
		/* flex-direction: column;*/

	}

	.infor div {
		margin-bottom: 3px;
	}

	.infor div span, .autograph span {
		color: #999999;
		font-size: 14px;
		font-weight: 400;
	}

	.infor div span:nth-child(2), .autograph span:nth-child(2) {
		color: #666666;
		margin-left: 4px;
	}

	.headPortrait {
		width: 46%;
		height: 100px;
	}

	.headPortrait img {
		width: 100%;
		height: 100%;
	}

	.autograph {
		margin-bottom: 11px;
	}

	.advent {
		border-top: 1px solid #DDDDDD;
		padding: 20px;
	}

	.advent img {
		margin-top: 25px;
		width: 100%;
	}

	.pd {
		padding: 20px;
	}

	.pd20 {
		padding: 0 20px;
	}

	/* 会话 */
	.conversationBox {
		margin-top: 13px;
		margin-bottom: 13px;
	}

	.timer {
		text-align: center;
		margin: 10px 0;
		color: #999999;
		font-size: 12px;
	}

	.headImg {
		width: 40px;
		height: 40px;
		margin-right: 13px;
	}

	.headImg img {
		display: inline-block;
		width: 40px;
		height: 40px;
	}

	.conversation .cont, .customer .cont {
		background: #ffffff;
		padding: 9px 8px 12px 10px;
		display: inline-block;
		border: 1px solid rgba(223, 223, 223, 1);
		border-radius: 5px;
		position: relative;
		max-width: 260px;
		word-wrap: break-word;
		word-break: normal;
	}

	.left::after {
		position: absolute;
		content: "";
		display: inline-block;
		left: -4px;
		top: 5px;
		width: 5px;
		height: 9px;
		background: #fff;
		-webkit-transform: skewX(30deg);
		transform: skewX(30deg);
		/* z-index: -1; */
		border-left: 1px solid #dfdfdf;
		border-top: 1px solid #dfdfdf;
	}

	div.noafter::after {
		content: '';
		width: 0;
		height: 0;;
		display: inline;
		position: relative;
		border: 0;
	}

	.conversation .cont div, .customer .cont div {
		color: #666666;
		font-size: 16px;
	}

	.customer {
		justify-content: space-between;
	}

	.customer .cont {
		margin-right: 13px;
		border: 0;
		background: #5EA0F7;
		max-width: 260px;
		word-wrap: break-word;
		word-break: normal;
	}

	.customer .cont div {
		color: #FFFFFF;
	}

	.right::after {
		position: absolute;
		content: "";
		display: inline-block;
		right: -2px;
		top: 6px;
		width: 5px;
		height: 9px;
		background: #5ea0f7;
		-webkit-transform: skewX(-30deg);
		transform: skewX(-30deg);
		border-left: 1px solid #5ea0f7;
		border-top: 1px solid #5ea0f7;
	}

	.col {
		color: #999999;
	}

	.change {
		color: #5ea0f7;
	}

	.questionList, .changeService {
		margin: 10px;
		border: 1px solid rgba(223, 223, 223, 1);
		border-radius: 5px;
	}

	.questionList div, .changeService div {
		height: 40px;
		line-height: 40px;
		padding-left: 15px;
	}

	.questionList div span {
		color: #5EA0F7;
		font-size: 14px;
	}

	.questionList section:nth-child(odd), .changeService div:nth-child(odd) {
		background: #F6F6F6;
	}

	.changeService div span {
		font-size: 14px;
	}

	.changeService div span:nth-child(1) {
		margin-right: 5px;
	}

	.col6 {
		color: #666666 !important;
	}

	.colE5 {
		color: #5EA0F7;
	}

	.promptBox {
		display: flex;
		justify-content: center;
		height: 26px;
		margin: 10px 0 10px;
		/* line-height: 26px; */
	}

	.promptBoxH {
		display: flex;
		justify-content: center;
		height: 50px;
		margin: 10px 0 10px;
		/* line-height: 26px; */
	}

	.prompt {
		line-height: 25px;
		text-align: center;
		background: #DDDDDD;
		border-radius: 30px;
		width: 140px;
		color: #FFFFFF;
		font-size: 12px;
	}

	.help {
		width: 90%;
	}

	.help .prompt {
		width: 100%;
	}

	/* 评论 */
	.evaluate {
		height: 101px;
		padding: 19px 0 16px;
		background: rgba(255, 255, 255, 1);
		border: 1px solid rgba(223, 223, 223, 1);
		border-radius: 10px;
		margin-top: 15px;
		text-align: center;
		position: relative;
		box-sizing: border-box;
	}

	.evaluate span {
		font-size: 14px;
		color: #666666;
	}

	.nopd {
		padding: 0;
	}

	.nopd i {
		margin-left: 10px;
		width: 8px;
		height: 8px;
		background: #cdcdcd;
		background: #81d981;
		display: inline-block;
		border-radius: 50%;
	}


	.evaluate .btn {
		display: block;
		background: #F04992;
		border-radius: 10px;
		margin-top: 10px;
		color: #FFFFFF;
		height: 36px;
		line-height: 36px;
		width: 100px;
		position: absolute;
		bottom: 16px;
		left: 35%;
		cursor: pointer;
	}

	/* 聊天框 */
	.chatting {
		width: 100%;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0px -5px 5px rgba(0, 0, 0, 0.05);
		height: 100px;
		padding: 10px 20px;
	}

	.informationBox {
		height: 450px;
		overflow-y: auto;
		overflow-x: hidden;
	}

	.expression, .photo {
		display: inline-block;
		width: 18px;
		height: 18px;
		background: url("./../assets/st-img/expression.png") no-repeat;
		background-size: 100% 100%;
		cursor: pointer;
		margin-right: 18px;
	}

	.expression:hover {
		background: url("./../assets/st-img/expressionHover.png") no-repeat;
		background-size: 100% 100%;
	}

	.photo {
		background: url("./../assets/st-img/photo.png") no-repeat;
		background-size: 100% 100%;
	}

	.photo:hover {
		background: url("./../assets/st-img/photoHover.png") no-repeat;
		background-size: 100% 100%;
	}

	textarea {
		height: 40px;
		width: 300px;
		border: 0;
		-webkit-user-select: auto;
		user-select: auto;
		-o-user-select: auto;
		-ms-user-select: auto;
		resize: none;
		outline: none;
		padding-top: 10px;
		overflow-y: auto;

	}

	.sendOut {
		width: 80px;
		height: 44px;
		line-height: 40px;
		border: 1px solid rgba(221, 221, 221, 1);
		border-radius: 5px;
		text-align: center;
		margin-left: 20px;
		margin-top: 25px;
	}

	.sendOut span {
		color: #CCCCCC;
		font-size: 16px;
	}

	.chattingBox {
		margin-top: 12px;
	}

	/* 评论弹框 */
	.zzBox {
		position: absolute;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.3);
		top: 0;
		left: 0;
	}

	.box-card, .proving {
		width: 494px;
		height: 300px;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		z-index: 999;
		border-radius: 10px;
		padding: 20px 20px 30px 50px;
		box-sizing: border-box;
	}

	.proving {
		padding: 20px 20px 30px 47px;
	}

	.close {
		text-align: right;
		cursor: pointer;
	}

	.close i {
		display: inline-block;
		width: 18px;
		height: 18px;
		background: url("./../assets/st-img/close.png") no-repeat;
		background-size: 100% 100%;
	}

	.box-card .tit {
		text-align: center;
		padding-right: 65px;
		margin-bottom: 40px;
	}

	.box-card .tit span {
		font-size: 18px;
		color: #666666;
	}

	.selIcon {
		padding-right: 30px;
		margin-bottom: 30px;
	}

	.selIcon div {
		text-align: center;
		cursor: pointer;
	}

	.selIcon div i {
		display: block;
		width: 44px;
		height: 44px;
		background: url("./../assets/st-img/satisfied.png") no-repeat;
		background-size: 100% 100%;
		margin-bottom: 10px;
	}

	.selIcon div span {
		/* display: block; */
	}

	.selIcon div .comm {
		background: url("./../assets/st-img/comm2.png") no-repeat;
	}

	.selIcon div .sfd {
		background: url("./../assets/st-img/Satisfied2.png") no-repeat;
	}

	.selIcon div .comm2 {
		background: url("./../assets/st-img/comm.png") no-repeat;
	}

	.selIcon div .notSfd {
		background: url("./../assets/st-img/notSatisfied2.png")
	}

	.selIcon div .notSfd2 {
		background: url("./../assets/st-img/notSatisfied.png")
	}

	.levMsg {
		padding-right: 30px;
		margin-bottom: 20px;
	}

	.sure {
		text-align: center;
		background: linear-gradient(90deg, rgba(22, 84, 209, 1) 0%, rgba(9, 52, 173, 1) 100%);
		box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.2);
		border-radius: 10px;
		width: 100px;
		height: 48px;
		line-height: 48px;
		color: #fff;
		position: absolute;
		bottom: 30px;
		left: 37%;
		cursor: pointer;
	}

	/* 验证框 */
	.logo {
		text-align: center;
		margin-bottom: 20px;
	}

	.logo span {
		font-size: 38px;
		font-weight: bold;
		color: #5EA0F7;
		font-family: Microsoft YaHei;
	}

	.logo span:nth-child(1) {
		color: #F04992;
	}

	.formBox {
		padding: 0 27px 0 0;
	}

	.formBox .el-input {
		margin-bottom: 21px;
	}

	.formBox .phone .el-input, .formBox .email .el-input {
		margin-bottom: 0;
	}

	.formBox .phone, .formBox .email {
		margin-bottom: 10px;
	}

	.vertion {
		vertical-align: middle;
		/* margin-bottom: 28px; */
	}

	.vertion .el-input {
		width: 250px;
		margin-right: 15px;
		display: inline-block;
	}

	.vertion span {
		display: inline-block;
		width: 128px;
		height: 40px;;
		vertical-align: middle;
		background: rgba(241, 225, 224, 1);
	}

	.formBox .sure {
		bottom: 21px;
	}

	.el-card__body .tit {
		line-height: 25px;
	}

	.chatting .el-button {
		border: none;
		padding: 0;
		border-radius: 0
	}

	.emoticon {
		width: 30px;
		height: 30px;
		display: inline-block;
	}

	.pointer {
		cursor: pointer;
	}

	.ly:hover {
		border-bottom: 1px solid #5EA0F7;
		/* 高亮效果 */
		filter: brightness(0.9);
	}

	.gl:hover {
		filter: brightness(0.9);
	}

	.seek:hover {
		background: #860c60
	}

	.sendCol {
		background: linear-gradient(90deg, rgba(22, 84, 209, 1) 0%, rgba(9, 52, 173, 1) 100%);
	}

	.netSendCol {
		cursor: not-allowed;
	}

	/* 修改滚动条 */
	::-webkit-scrollbar-button {
		background: transparent;
		border: 0;
	}

	/* 顶部三个图标 */
	.imgBox i {
		display: inline-block;
		width: 25px;
		height: 25px;
		margin-right: 20px;
		background: url("./../assets/st-img/pj.png") no-repeat;
		background-size: 100% 100%;
		vertical-align: middle;
	}

	.imgBox .sy {
		background: url("./../assets/st-img/sy.png") no-repeat;
	}

	.imgBox .sq {
		background: url("./../assets/st-img/sq.png") no-repeat;
	}

	/* .sc:hover{
	  background: url("./../assets/st-img/pjhover.png") no-repeat;
	}
	.sy:hover{
	  background: url("./../assets/st-img/sy2.png")no-repeat;
	}
	.sq:hover{
	  background: url("./../assets/st-img/sq2.png") no-repeat;
	} */
	i.scActy {
		background: #1654D1 url("./../assets/st-img/pjhover.png") no-repeat;
		width: 33px;
		height: 33px;
		background-position: 5px;
	}

	/* .imgBox .syActy{
	  background:#1654D1 url("./../assets/st-img/jzsy.png") no-repeat;
	  width: 33px;
	  height: 33px;
	  background-position: 5px;
	}
	.imgBox  .sqActy{
	  background: #1654D1 url("./../assets/st-img/sq2.png") no-repeat;
	  width: 33px;
	  height: 33px;
	  transform: rotate(180deg);
	  background-position: 5px;
	} */
	.tips {
		font-size: 12px;
		color: #F04992;
	}

	#main {
		position: relative;
	}

	.retract {
		position: absolute;
		right: 0;
		top: 290px;
		z-index: 999;
	}

	/* 滚动条样式 */

	.scroll::-webkit-scrollbar {
		border: 5px solid #fff;
	}

	.scroll::-webkit-scrollbar {
		width: 5px;
		height: 20px;
	}

	.scroll::-webkit-scrollbar-button {
		width: 0px;
		height: 0px;
	}

	.scroll::-webkit-scrollbar-thumb {
		border-radius: 5px;
		box-shadow: inset 0 0 0 5px #aaa;
		border: .02rem solid transparent;
	}

	.scroll::-webkit-scrollbar-track {
		display: block;
		background: rgba(0, 0, 0, 0.1);
	}

	#logo {
		margin-right: 10px;
		width: 40px;
		height: 40px;
		line-height: 40px;
		display: inline-block;
		border-radius: 50%;
		vertical-align: sub;
		position: relative;
		top: 10px;
	}

	.duty {
		display: inline-block;
		width: 60px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		vertical-align: bottom;
	}
</style>