up

chat/src/components/index.vue

@@ -1,3698 +1,1918 @@
-<<<<<<< HEAD
-<template>
-	<div>
-		<!-- 聊天 -->
-		<div class="service" v-if="!knowledge">
-			<!-- 头部信息 -->
-			<div class="header row allAlignment item-center">
-
-				<div class="row item-center" v-if="!link_success">
-					<img class="icon" style="margin-right:.2rem;" src="@/assets/Service1.png" @click="leftShow = true">
-					<img class="logo" :src="img_http + logo" alt="">
-					<p>{{service_info.name}}</p>
-          <span style="margin-left: 5px;"><img src="@/assets/on_icon.png" alt=""></span>
-				</div>
-        <div class="row item-center" v-else>
-          <img class="icon" style="margin-right:.2rem;" src="@/assets/Service1.png" @click="leftShow = true">
-          <img class="logo" :src="img_http + logo" alt="">
-          <p>{{service_info.name}}</p>
-          <span v-if="service_on" style="margin-left: 5px;"><img src="@/assets/on_icon.png" alt=""></span>
-          <span v-if="!service_on" style="margin-left: 5px;"><img src="@/assets/off_icon.png" alt=""></span>
-        </div>
-
-				<div class="row">
-					<yd-button v-if="isExit" color="#fff" bgcolor="#1d57dd" class="exit" size="mini" type="primary"
-							   @click.native="is_exit()">退出聊天
-					</yd-button>
-
-					<img class="icon-msg" v-show=" (chat.length -1) > chatNum " @click="is_show_evaluate()"
-						 src="@/assets/Service2.png">
-					<img class="icon-msg" @click="knowledge = true,flag = false" src="@/assets/leaveSwitch.png"  v-if="!isExit">
-				</div>
-			</div>
-			<div class="main" id="main">
-
-				<!-- ********************************************************** -->
-				<!-- 机器人聊天板块 -->
-				<div v-if="!link_success">
-					<!-- 系统欢迎语 -->
-					<div v-if="welcome.length > 0" v-for="(item,i) in  welcome" :key="'w'+i">
-						<div class="row allAlignment" style="margin-top:.3rem;">
-							<div class="HeadPortrait row center">
-								<img :src="require('@/assets/headAdvent.png')">
-							</div>
-							<div class="messageWindow dialogueA col-w">
-								<div class="customerService left" v-html="item"></div>
-							</div>
-						</div>
-					</div>
-
-					<!-- 系统消息下拉选择 -->
-					<div class="artificial" v-if="problem.length > 0 && welcome.length > 0">
-						<div class="row item-center allAlignment" style="height:.75rem;border-bottom:.01rem solid #EEE;"
-							 v-for="(item,index) in problem" :key="index" @click="pushMessage(item.robot_content)">
-							<span>{{item.robot_name}}</span>
-							<img style="width:.3rem;height:.3rem;" src="@/assets/addright.png">
-						</div>
-						<div class="row item-center" style="height:.72rem;">
-							<p>以上问题都不是</p>
-							<div style="color:#5EA0F7;padding-left:.1rem;" @click="connectionService">转人工客服</div>
-						</div>
-					</div>
-
-					<!-- 和机器人会话 -->
-					<div v-for="(item,i) in robot" :key="'r'+i">
-						<!-- 和机器人会话互动 -->
-						<div v-if="item.type == 'service' || item.type == 'user'" class="row allAlignment"
-							 style="margin-top:.3rem;">
-							<div class="HeadPortrait row center">
-								<img v-if="item.type == 'service'" :src="require('@/assets/headAdvent.png')">
-							</div>
-							<div class="messageWindow dialogueA col-w"
-								 :style="item.type == 'user'?'text-align: right;':''">
-								<div v-if="item.type == 'service'" class="customerService left"
-									 v-html="item.content.text"></div>
-								<div v-if="item.type == 'user'" class="user right imgSrc">
-									<yd-lightbox v-if="item.content.img" style="display:inline-block"
-												 class="row rightAlignment box-img">
-										<yd-lightbox-img :src=" img_http + item.content.img"></yd-lightbox-img>
-									</yd-lightbox>
-									<div v-else v-html="item.content"></div>
-								</div>
-							</div>
-							<div class="HeadPortrait row center">
-								<img v-if="item.type == 'user'"
-									 :src="require('@/assets/timg.jpg') ">
-							</div>
-						</div>
-						<!-- 转人工分组 -->
-						<div class="artificial" v-if="item.type == 'artificial_service' ">
-							<div @click="turnArtificial(items.id)" v-for="(items,indexs) in item.content"
-								 :key="'r'+indexs" class="row item-center allAlignment"
-								 style="height:.75rem;border-bottom:.01rem solid #EEE;">
-								<p>
-									人工客服:
-									<span style="color:#5EA0F7;padding-left:.1rem;">{{items.name}}</span>
-								</p>
-								<img style="width:.3rem;height:.3rem;" src="@/assets/addright.png">
-							</div>
-						</div>
-					</div>
-				</div>
-
-				<!--历史消息-->
-				<div v-if="showHistory"  v-for="item in hisSviceChat" >
-					<!-- 客服信息 -->
-					<div v-if="item.to_id.startsWith('KF')">
-						<div class="row allAlignment" style="margin-top:.3rem;">
-							<div class="HeadPortrait row center">
-								<img v-if="service_info.avatar == '' " :src="avatar_imgs">
-								<img v-if="service_info.avatar != ''" :src="img_http + service_info.avatar ? img_http + service_info.avatar : require('@/assets/user2.png')">
-							</div>
-							<div class="messageWindow dialogueA col-w">
-								<div class="customerService left imgSrc">
-									<yd-lightbox v-if="item.content.img" style="display:inline-block"
-												 class="row rightAlignment">
-										<yd-lightbox-img :src=" img_http + item.content.img"></yd-lightbox-img>
-									</yd-lightbox>
-									<div v-html="item.content.text" v-else></div>
-								</div>
-							</div>
-							<div class="HeadPortrait row center">
-
-							</div>
-						</div>
-					</div>
-					<!-- 用户信息 -->
-					<div v-else>
-
-						<div class="row allAlignment" style="margin-top:.3rem;">
-							<div class="HeadPortrait row center">
-
-							</div>
-							<div class="messageWindow dialogueA col-w" style="text-align: right;">
-								<div class="user right imgSrc">
-									<yd-lightbox v-if="item.content.img" style="display:inline-block"
-												 class="row rightAlignment">
-										<yd-lightbox-img :src="img_http+item.content.img"></yd-lightbox-img>
-									</yd-lightbox>
-									<span v-html="item.content.text" v-else>{{item.content.text}}</span>
-								</div>
-							</div>
-							<div class="HeadPortrait row center">
-								<img :src="require('@/assets/timg.jpg') ">
-							</div>
-						</div>
-					</div>
-				</div>
-
-
-				<!-- ********************************************************** -->
-				<!-- 人工会话模版 -->
-				<div v-if="link_success" v-for="(item,index) in chat" :key="index">
-
-					<!-- 历史消息 -->
-					<div class="promptBox" v-if="item.type == 'historyMsg'">
-						<div class="prompt help">
-							<span>{{historyMsgtext}}</span>
-						</div>
-					</div>
-					<!-- 客服会话 -->
-					<div v-if="item.type == 'service'">
-						<div class="row allAlignment" style="margin-top:.3rem;">
-							<div class="HeadPortrait row center">
-								<img id="123" v-if="service_info.avatar == '' " :src="avatar_imgs">
-								<img id="321" v-if="service_info.avatar != '' " :src="img_http + service_info.avatar ? img_http + service_info.avatar : img_http + service_info.avatar">
-							</div>
-							<div class="messageWindow dialogueA col-w">
-								<div class="customerService left imgSrc">
-									<yd-lightbox v-if="item.content.img" style="display:inline-block"
-												 class="row rightAlignment">
-										<yd-lightbox-img :src="img_http + item.content.img"></yd-lightbox-img>
-									</yd-lightbox>
-									<div v-html="item.content.text" v-else></div>
-								</div>
-							</div>
-							<div class="HeadPortrait row center">
-
-							</div>
-						</div>
-					</div>
-
-					<!-- 用户会话 -->
-					<div v-if="item.type == 'user'">
-
-						<div class="row allAlignment" style="margin-top:.3rem;">
-							<div class="HeadPortrait row center">
-
-							</div>
-							<div class="messageWindow dialogueA col-w" style="text-align: right;">
-								<div class="user right imgSrc">
-									<yd-lightbox v-if="item.content.img" style="display:inline-block"
-												 class="row rightAlignment">
-										<yd-lightbox-img :src="img_http+item.content.img"></yd-lightbox-img>
-									</yd-lightbox>
-									<span v-html="item.content.text" v-else>{{item.content.text}}</span>
-								</div>
-							</div>
-							<div class="HeadPortrait row center">
-								<img v-if="item.type == 'user'"
-									 :src="require('@/assets/timg.jpg') ">
-							</div>
-						</div>
-					</div>
-
-					<!-- 常规系统消息评价 -->
-					<div class="row center " v-if="item.type== 'system' ">
-						<div class="column item-center "
-							 style="margin: 0.3rem 0; background: #fff; width:100% ;padding: 0.1rem 0;"
-							 v-if="item.content.state  =='getEvaluate' && !haveEvaluation ">
-							<p class="row center wrap">{{item.content.text}}</p>
-							<button class="evaluateBtn" style="margin-top:.2rem;" @click="is_show_evaluate()">评价
-							</button>
-						</div>
-
-						<div class="column item-center"
-							 style="margin: 0.3rem 0; background: #fff; width:100% ;padding: 0.1rem 0.5rem;"
-							 v-if="item.content.state  == 'closeInform' ">
-							<p class="row center wrap">{{item.content.text}}</p>
-						</div>
-
-
-					</div>
-				</div>
-
-				<div v-if="box_height" style="height:65px">
-
-				</div>
-			</div>
-			<!-- 中间弹窗登录 -->
-			<!-- <yd-popup
-			  v-model="centerShow"
-			  position="center"
-			  width="6.9rem"
-			  height="8rem"
-			  :masker-opacity=".2"
-			>
-			  <div class="row rightAlignment" style="padding-top:.2rem;padding-right:.2rem;">
-				<img
-				  @click="centerShow = false"
-				  style="width: 0.32rem;height: 0.32rem;"
-				  src="@/assets/Service5.png"
-				>
-			  </div>
-			  <div class="row center" style="font-size:.56rem;">
-				<p style="color:#F04992;">HX</p>
-				<span style="color:#5EA0F7;">669</span>
-			  </div>
-			  <input class="loginInput" type="text" placeholder="姓名">
-			  <input class="loginInput" type="text" placeholder="手机号">
-			  <input class="loginInput" type="email" placeholder="邮箱地址">
-			  <div class="row" style="margin:0 .2rem;">
-				<input class="loginInput" placeholder="输入验证码" type="text" style="margin:.5rem 0 0 0;">
-				<p
-				  @click="initialLoginCode"
-				  class="row center"
-				  style="width:100%;height:.8rem;margin-top:.5rem;background:#F1E1E0;border-radius: .1rem;margin-left:.2rem;font-size:.3rem;color:#666;"
-				>{{loginCode}}</p>
-			  </div>
-			  <div class="row center sub" style="margin:.5rem .2rem .2rem .2rem;">登录</div>
-			</yd-popup> -->
-
-			<!-- 底部弹窗评价 -->
-			<yd-popup v-model="bottomShow" position="bottom" height="6.5rem" :masker-opacity=".2">
-				<div class="row rightAlignment" style="padding-top:.2rem;padding-right:.2rem;">
-					<img @click.stop="bottomShow = false" style="width: 0.32rem;height: 0.32rem;"
-						 src="@/assets/Service5.png">
-				</div>
-				<div style="color:#666;text-align: center;font-size:.28rem;">感谢您的咨询，请对我们的服务做出评价</div>
-				<div style="height:2.3rem;" class="row allAlignment evaluatebtn">
-					<div style="width:33%;height:100%;">
-						<div class="row wrap center" @click="evaluateClick(1)">
-							<img style="width:.66rem;height:.66rem;"
-								 :src="evaluateState =='1'?require('@/assets/evaluate1a.png'):require('@/assets/evaluate1.png')">
-							<p>满意</p>
-						</div>
-					</div>
-					<div style="width:33%;height:100%;" @click="evaluateClick(2)">
-						<div class="row wrap center">
-							<img style="width:.66rem;height:.66rem;"
-								 :src="evaluateState =='2'?require('@/assets/evaluate2a.png'):require('@/assets/evaluate2.png')">
-							<p>一般</p>
-						</div>
-					</div>
-					<div style="width:33%;height:100%;" @click="evaluateClick(3)">
-						<div class="row wrap center">
-							<img style="width:.66rem;height:.66rem;"
-								 :src="evaluateState =='3'?require('@/assets/evaluate3a.png'):require('@/assets/evaluate3.png')">
-							<p>不满意</p>
-						</div>
-					</div>
-				</div>
-				<!-- <div class="evaluateBox">
-				  <textarea placeholder="评价备注" v-model="evalArea"></textarea>
-				</div> -->
-				<div class="row center sub" @click="evaluateEsc">确定</div>
-			</yd-popup>
-
-			<!-- 左侧弹窗客服信息 -->
-			<yd-popup v-model="leftShow" position="left" width="4.8rem" :masker-opacity=".2">
-				<div class="leftHader row item-center">
-					<img @click="leftShow = false" class="icon" src="@/assets/Service4.png">
-					<img class="logo" :src="img_http + logo" alt="">
-					<p style="color:#FFF;font-size:.34rem;">{{service_info.name}}</p>
-
-
-				</div>
-				<div>
-					<div class="leftMain-top row">
-						<div>
-							<p>
-								<!-- 客服名字 -->
-								<span>姓名:</span>
-								{{service_info.name}}
-							</p>
-							<p>
-								<!-- 客服工号 -->
-								<span>工号:</span>
-								{{service_info.job_name}}
-							</p>
-							<p>
-								<!-- 客服性别 -->
-								<span>性别:</span>
-								保密
-							</p>
-							<p>
-								<!-- 客服职务 -->
-								<span>职务:</span>
-								咨询服务
-							</p>
-						</div>
-						<div class="row center">
-							<img style="width:1.8rem;height:1.8rem;" v-if="service_info.avatar == ''" :src="avatar_imgs">
-							<img style="width:1.8rem;height:1.8rem;" v-if="service_info.avatar != ''" :src="img_http + service_info.avatar">
-						</div>
-					</div>
-					<div class="leftMain-chenter"
-						 style="padding:0 .3rem;margin-top:.3rem;padding-bottom:.6rem;border-bottom:.01rem solid #ddd;"
-					>
-						<!-- 客服个性签名 -->
-						<span>个性签名：</span>
-						{{service_info.signature}}
-					</div>
-					<!-- 广告图 -->
-					<div class="leftMain-bottom row center" style="padding:0 .3rem;margin-top:.6rem;">
-						<a :href="'http://'+advertisement.advertisement_url" target="_blank" rel="noopener noreferrer">
-							<img style="width:4.2rem;height:7rem;" :src="img_http+advertisement.advertisement_img">
-						</a>
-					</div>
-				</div>
-			</yd-popup>
-			<!-- 底部输入框 -->
-			<div class="footer row wrap" id='input_box'>
-				<textarea
-						id="textarea"
-					v-model.trim="text_info"
-					@keydown="inputNumFun()"
-					placeholder="请输入你的问题："
-					maxlength="100"
-				>
-				</textarea>
-
-				<div class="send row item-center" style="border-bottom:.01rem solid #ddd">
-					<img
-							:src="meme?require('@/assets/faceActive.png'):require('@/assets/face.png')"
-							@click="faceClick"
-							style="width:.48rem;height:.48rem"
-					>
-					<input type="file" id="file" @change="uploadIMG" accept="image/jpeg,image/jpg,image/png,image/svg"
-						   style="display:none">
-					<label for="file">
-						<img src="@/assets/imge.png" style="width:.46rem;height:.42rem">
-					</label>
-					<div
-							@click="send()"
-							style="color:#ccc;border:.02rem solid #ddd;width:1rem;height:.66rem;border-radius:.1rem;"
-							:style="text_info.length>0?'background:#5EA0F7;color:#fff;':''"
-							class="row center"
-					>发送
-					</div>
-				</div>
-				<!-- 表情包 -->
-				<div v-show="meme" class="memeBox">
-					<yd-slider autoplay="0" :loop="false">
-						<yd-slider-item>
-							<div>
-								<ul style="width:100%;padding-bottom:.3rem;" class="row average wrap">
-									<li v-for="(item,index) in frceArr" :key="index" v-show="index<15">
-										<img
-												class="memeImg"
-												:src="require(`@/assets/${index}.gif`)"
-												@click="memeImg(index)"
-										>
-									</li>
-								</ul>
-							</div>
-						</yd-slider-item>
-						<yd-slider-item>
-							<div>
-								<ul style="width:100%;padding-bottom:.3rem;" class="row average wrap">
-									<li v-for="(item,index) in frceArr" :key="index" v-show="index>15&&index<=30">
-										<img
-												class="memeImg"
-												:src="require(`@/assets/${index}.gif`)"
-												@click="memeImg(index)"
-										>
-									</li>
-								</ul>
-							</div>
-						</yd-slider-item>
-						<yd-slider-item>
-							<div>
-								<ul style="width:100%;padding-bottom:.3rem;" class="row average wrap">
-									<li v-for="(item,index) in frceArr" :key="index" v-show="index>30&&index<=45">
-										<img
-												class="memeImg"
-												:src="require(`@/assets/${index}.gif`)"
-												@click="memeImg(index)"
-										>
-									</li>
-								</ul>
-							</div>
-						</yd-slider-item>
-						<yd-slider-item>
-							<div>
-								<ul style="width:100%;padding-bottom:.3rem;" class="row average wrap">
-									<li v-for="(item,index) in frceArr" :key="index" v-show="index>45&&index<=60">
-										<img
-												class="memeImg"
-												:src="require(`@/assets/${index}.gif`)"
-												@click="memeImg(index)"
-										>
-									</li>
-								</ul>
-							</div>
-						</yd-slider-item>
-						<yd-slider-item>
-							<div>
-								<ul style="width:100%;padding-bottom:.3rem;" class="row average wrap">
-									<li v-for="(item,index) in frceArr" :key="index" v-show="index>60">
-										<img
-												class="memeImg"
-												:src="require(`@/assets/${index}.gif`)"
-												@click="memeImg(index)"
-										>
-									</li>
-								</ul>
-							</div>
-						</yd-slider-item>
-					</yd-slider>
-				</div>
-			</div>
-		</div>
-		<!-- 留言知识库 -->
-		<div v-if="knowledge">
-			<!-- 接收返回消息 -->
-			<knowledgeLibrary @returnIndex="returnIndex" :currentTime="currentTime"/>
-		</div>
-	</div>
-</template>
-
-<script>
-	import "../css/index.css";
-	import knowledgeLibrary from './knowledgeLibrary'
-	import frce from "./frce.js";
-	import avatarImgs from "./../assets/user.png"
-	import defaultImgs from "./../assets/timg.jpg"
-
-	export default {
-		name: "service",
-		// 模板注册
-		components: {
-			knowledgeLibrary
-		},
-		data() {
-			return {
-				/*-----------------------------------------------*/
-				text_info: "", //输入框内容
-				knowledge: false,//留言知识库开关
-				leftShow: false, //左侧详细开关
-				evaluateOnOff: false, //人工客服评价通知
-				bottomShow: false, //底部评价弹窗开关
-				meme: false, // 表情包开关
-				frceArr: [], //表情包代码
-				evaluateState: 100,//评价状态
-				websock: null,//创建websock
-				user_info: '',//用户信息
-				apiToken: '',//通话调用凭证
-				currentTime: '',//接口调用服务器时间
-				problem: [],//机器人问题
-				welcome: [],//欢迎语
-				advertisement: '', //广告
-				img_http: 'http://103.108.43.176:8080',//图片路径域
-				//img_http:'http://192.168.2.186:8090',//图片路径域
-
-				robot: [],//和机器人聊天临时数据
-				chat: [],//人工会话
-				error_num: 1001,//机器人回答超出能力之外编号
-				isConnection: true,//人工分组列表开关
-				//客服信息
-				service_info: {
-					avatar: '/static/customer/images/robot.png',
-					job_name: '001',
-					name: '智能客服',
-					signature: "万人在线，万人赛事，告别拼爹，只拼实力！注册就送5000游戏币！"
-				},
-				link_success: false,//人工链接成功
-				conversationId: '',//会话工单
-				chatNum: 0,//触发评价按钮条件
-				haveEvaluation: false,//是否已评价
-				evalArea: '', //评价备注
-				source: {},//来源信息
-				initData: 1,//
-				isTurnArtifcial: true,
-				box_height: false,//苹果浏览器增加会话框高度
-				logo: '',
-				isExit: false,
-				historyMsg: false, // 是否展示历史信息
-				historyMsgtext: "", // 历史信息内容提示
-				hisSviceChat: [],
-				showHistory:true,
-				avatar_imgs:avatarImgs,
-        service_on: true,
-        closeByServer: false, //客服关闭会话
-        serverNotOnlin: false, //客服掉线
-			};
-		},
-		// 方法
-		methods: {
-			// 退出聊天
-			is_exit() {
-				this.socket_send(JSON.stringify({
-					type: 'kfCloseUser',
-					data: {
-						to_id: this.user_info.id,
-						kf_id: this.service_info.id,
-						group_id: this.service_info.group,
-						conversationId: this.conversationId,
-						type: 6,
-					}
-				}));
-				this.socket_close(this.user_info.id);
-				this.setInit();
-				this.initWebsocket()
-				this.isExit = false;
-
-			},
-			/*******************************************/
-			//设置token加密
-			setApiToken(name, controller, time, modules) {
-				let txetVal = name + 'customer-service' + controller + time + modules;
-				let sssd = txetVal.toLowerCase();
-				return this.$md5(txetVal.toLowerCase());
-			},
-
-			/*******************************************/
-			//初始化Websocket链接
-			initWebsocket() {
-
-				let sock_ip = 'ws://103.108.43.176:9101'; // 线上
-				// let sock_ip = 'ws://192.168.2.187:9101';  // 本地
-
-				this.websock = new WebSocket(sock_ip + "?apiToken=" + this.apiToken);
-				//数据返回
-				this.websock.onmessage = this.socket_message;
-				//数据发送
-				this.websock.onopen = this.socket_open;
-				//重新链接
-				this.websock.onerror = this.socket_error;
-				//关闭链接
-				this.websock.onclose = this.socket_close;
-			},
-
-			/*******************************************/
-			//连接建立之后执行send方法发送数据
-			socket_open() {
-				// let actions = {"test":"12345"};
-				console.log('我链接了');
-				//this.socket_send(JSON.stringify(actions));
-			},
-
-			/*******************************************/
-			//连接建立失败重连
-			socket_error() {
-				this.initWebSocket();
-			},
-
-			/*******************************************/
-			//数据接收
-			socket_message(e) {
-				if (!e.data) return;
-				const redata = JSON.parse(e.data);
-				console.log(redata);
-				//欢迎语
-				if (redata.message_type == 'helloMessage') {
-					this.isTurnArtifcial = true;
-					if (this.initData == 1) {
-						this.welcome.push(redata.data.content);
-						//this.welcome.push('请点击您想咨询的问题，若都不是，请在输入框直接输入');
-					}
-				}
-				//广告语
-				if (redata.message_type == 'advertisement') {
-					this.advertisement = redata.data[0]
-				}
-
-				//机器人回复
-				if (redata.message_type == "robotMessage") {
-					// console.log(redata);
-					if (redata.data.content == "error") {
-						this.robot.push({
-							type: this.error_num,
-						})
-						this.error_num++;
-					} else {
-						this.robot.push({
-							type: 'service',
-							content: {text: redata.data.content}
-						})
-					}
-					this.automaticRolling();
-					//data
-					//this.robot =
-				}
-
-
-				//人工链接
-				if (redata.message_type == 'connect') {
-					let server= {};
-					if (redata.data) {
-						server = redata.data
-					} else {
-						server = {
-							conversationId: redata.data.conversationId,
-							kf_id: redata.data.kf_id,
-							kf_name: "",
-							serverInfo: {
-								avatar: avatarImgs,
-								client_id:"",
-								group:"",
-								id: "",
-								intime:"",
-								job_name: "",
-								name: "tank",
-								signature: "",
-								status: 0,
-								task: 0,
-							}
-
-						}
-					}
-					this.service_on = true;
-					this.isExit = true;
-					this.link_success = true;
-					this.$dialog.loading.close();
-					this.service_info = server.serverInfo;
-					this.conversationId = server.conversationId;
-				}
-
-          // 客服掉线.
-          if (redata.message_type == 'serviceoffline') {
-              this.service_on = false;
-              this.serverNotOnlin = true;
-              this.closeByServer = true;
-          }
-          // 客服不在线请稍后再试
-          if (redata.message_type == 'kfNotOnlin'){
-              this.service_on = false;
-          }
-				//人工会话回复
-				if (redata.message_type == "chatMessage") {
-					// 转接的时候清除历史信息
-					this.hisSviceChat = [];
-					// this.getHistory = false;
-					this.$dialog.loading.close();
-					let obj = {};
-					if (this.$public.isJSON(redata.data.content)) {
-						obj = JSON.parse(redata.data.content);
-						obj.text = this.turnFace(obj.text)
-					} else {
-						obj.text = redata.data.content;
-					}
-					this.chat.push({
-						type: 'service',
-						content: obj
-					})
-					// this.setNum++;
-				}
-
-				//系统消息通知客户结束通话
-				if (redata.message_type == 'closeBysever') {
-					this.showHistory = false
-					this.setInit();
-				}
-				if(redata.message_type == "changeKeFuSuccess"){
-					this.$dialog.alert({
-						mes: redata.data.content
-					});
-				}
-
-				//系统消息通转人工
-				if (redata.message_type == 'notice') {
-					this.$dialog.loading.close();
-					this.isTurnArtifcial = true;
-					let _this = this;
-					this.$dialog.alert({
-						mes: redata.content, callback: () => {
-							this.initData = 100;
-							_this.$dialog.loading.open('数据加载中...');
-							setTimeout(() => {
-								_this.$dialog.loading.close();
-								_this.registered();
-							}, 2000);
-						}
-					});
-				}
-
-				//系统消息评价
-				if (redata.message_type == "getEvaluate") {
-					// this.evaluateOnOff = true;
-					// console.log( this.chat)
-					this.chat.push({
-						type: 'system',
-						content: {
-							text: redata.data.content,
-							state: 'getEvaluate',
-						}
-					})
-				}
-
-				//会话关闭前通知用户
-				if (redata.message_type == 'overtime') {
-					this.chat.push({
-						type: 'system',
-						content: {
-							text: redata.data.content,
-							state: 'closeInform',
-						}
-					})
-				}
-
-				// 历史信息
-				if (redata.message_type == 'toOld') {
-					console.log(redata, '历史信息')
-					this.hisSviceChat = [];
-					let obj = redata;
-					this.historyMsgtext = obj.data.content;
-					this.chat.push({
-						type: 'historyMsg',
-						content: {
-							text: this.historyMsgtext,
-						}
-					})
-					obj.data.chatLog.forEach(res => {
-						res.content = JSON.parse(res.content)
-						this.hisSviceChat.push(res)
-					})
-
-
-				}
-
-				//屏幕滚动
-				this.automaticRolling();
-			},
-
-			/*******************************************/
-			//数据发送
-			socket_send(Data) {
-				this.websock.send(Data);
-			},
-
-
-			/*******************************************/
-			//关闭
-			socket_close(e) {
-				// console.log('断开连接', e);
-				this.initData = 100;
-				this.link_success = false;
-				this.registered();
-				// this.websock.close()
-			},
-
-			/*****************************************/
-			//用户匿名注册
-			registered() {
-				let token = localStorage.getItem('token');
-
-				let appuid = this.$public.getQueryString('appuid');
-				let tutype = this.$public.getQueryString('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'),
-				}
-
-				let obj = {
-					headers: {
-						"apiToken": this.setApiToken('autoReg', 'register', this.currentTime[0], 'index')
-					}
-				}
-
-				this.post('api/index/register/autoReg', data, obj).then(res => {
-					if(res.data.code == 0){
-						this.$dialog.alert({
-							mes: res.data.msg
-						});
-					}else if (res.data.code == 1) {
-						this.user_info = res.data.data;
-						console.log(this.user_info)
-						// 游客 token
-						localStorage.setItem("token", res.data.data.token);
-						localStorage.setItem("tutype", res.data.tutype);
-						//Websocket链接
-
-						setTimeout(() => {
-							this.$dialog.loading.close();
-							this.initWebsocket();
-						}, 2000)
-						//console.log(res.data.data)
-					}
-				})
-			},
-
-			/******************************************/
-			//获取热门问题
-			getProblem() {
-				let obj = {
-					headers: {
-						// 'Content-Type': 'application/x-www-form-urlencoded',
-						"apiToken": this.setApiToken('index', 'robot', this.currentTime[0], 'index')
-					}
-				}
-				this.post('api/index/robot/index', {groups_id: 1, robotgroups_id: 1}, obj).then(res => {
-					//console.log(res.data.data);
-					this.problem = res.data.data;
-				})
-			},
-
-			/*******************************************/
-			//推送机器人消息
-			pushMessage(e) {
-				this.robot.push({
-					type: 'service',
-					content: {text: e}
-				});
-				this.automaticRolling();
-			},
-
-			/*******************************************/
-			//转人工
-			turnArtificial(id) {
-				this.group = id;
-				this.$dialog.loading.open('转接中...')
-				if (this.isTurnArtifcial) {
-
-					let data = {
-						'type': 'userInit',
-						data: {
-							'uid': this.user_info.id,
-							'name': this.user_info.name,
-							'avatar': this.user_info.avatar,
-							'group': this.group
-						}
-					}
-					this.socket_send(JSON.stringify(data));
-					this.isTurnArtifcial = false
-				}
-			},
-
-			/******************************************/
-			// 消息发送
-			send() {
-				if (this.text_info == '') return;
-				let str = this.text_info;
-				let formatStr = str.replace(/\n|\r\n/g, "<br>");
-
-				let type = 'toRobot';
-				let data = {};
-				let obj = {
-					text: formatStr,
-					img: '',
-					type: ''
-				}
-				this.meme = false;
-				// console.log(JSON.stringify(obj))
-				//和人工发送消息
-				if (this.link_success) {
-					// if(this.getHistory){
-					// 	this.getHistory = false;
-					// }
-					data = {
-						from_name: this.user_info.name,
-						content: JSON.stringify(obj),
-						from_id: this.user_info.id,
-						avatar: '',
-						to_id: this.service_info.id,
-						to_name: this.service_info.name,
-						conversationId: this.conversationId,
-					}
-					type = 'chatMessage';
-					this.chat.push({
-						type: 'user',
-						content: {text: this.turnFace(obj.text)}
-					})
-				} else {//和机器人聊天
-					data = {
-						groups_id: '1',
-						robot_name: formatStr,
-						robotgroups_id: '1',
-					}
-
-					console.log(this.turnFace(formatStr));
-					type = 'toRobot';
-					//本地存放数据
-					this.robot.push({
-						type: 'user',
-						content: this.turnFace(formatStr) //obj
-					})
-				}
-				this.socket_send(JSON.stringify({type, data}))
-				this.text_info = '';
-				this.automaticRolling();
-				// console.log(data)
-			},
-
-			/*******************************************/
-			//获取转接人工客服列表
-			connectionService() {
-				if (!this.isConnection) return
-				let obj = {
-					headers: {
-						"apiToken": this.setApiToken('index', 'groups', this.currentTime[0], 'index')
-					}
-				}
-				this.isConnection = false;
-				//api
-				this.get('api/index/groups/index', obj).then(res => {
-					if (res.data.code == 1) {
-						this.robot.push({
-							type: 'artificial_service',
-							content: res.data.data
-						});
-						this.automaticRolling();
-					}
-				})
-				//this.hintSwitch.connection = true; //系统提示开关激活
-				// 此处为请求
-			},
-
-			/*******************************************/
-			//发送消息后自动滚动高度
-			automaticRolling() {
-				this.$nextTick(() => {
-					let msg = document.getElementById('main') // 获取对象
-					// let input_box = document.getElementById('input_box') // 获取对象
-
-					//判断是否是苹果手机自代浏览器
-					if (/Safari/.test(navigator.userAgent) && !/Chrome/.test(navigator.userAgent)) {
-						this.box_height = true; //input_box+'px';
-					}
-
-					msg.scrollTop = msg.scrollHeight // 滚动高度
-
-				})
-			},
-
-			/*******************************************/
-			//图片发送
-			uploadIMG(e) {
-				//console.log(e);
-				let self = this;
-				let files = e.target.files || e.dataTransfer.files;
-				if (!files.length) return;
-				let picavalue = files[0];
-				//console.log(picavalue);
-				if (picavalue.size / 1000 > 20000) {
-					this.$message({
-						message: "图片过大不支持上传",
-						type: "warning"
-					});
-				} else {
-					this.$public.imgPreview(picavalue, function (imgSrc, formData) {
-						// let img = imgSrc;
-
-						// 数据结构请求
-						self.post('api/index/upload/uploadImg', formData).then(res => {
-							// console.log(res.data.code)
-							if (res.data.code == 1) {
-								let type = 'toRobot';
-								let data = {};
-								let obj = {
-									text: '',
-									img: res.data.data.src,
-									type: ''
-								}
-								if (self.link_success) {
-									//和人工聊天发送图片
-									data = {
-										from_name: self.user_info.name,
-										content: JSON.stringify(obj),
-										from_id: self.user_info.id,
-										avatar: '',
-										to_id: self.service_info.id,
-										to_name: self.service_info.name,
-										conversationId: self.conversationId,
-									}
-									type = 'chatMessage';
-									//本地储存
-									self.chat.push({
-										type: 'user',
-										content: {img: res.data.data.src}
-									});
-								} else {
-									//和机器发送图片
-									data = {
-										groups_id: '1',
-										robot_name: res.data.data.src,
-										robotgroups_id: '1',
-									}
-									type = 'toRobot';
-									//本地储存
-									self.robot.push({
-										type: 'user',
-										content: {img: res.data.data.src}
-									});
-								}
-								self.socket_send(JSON.stringify({type, data}))
-								this.automaticRolling();
-							}
-						})
-					});
-				}
-			},
-
-			/*******************************************/
-			//手机弹窗处理
-			inputShow(e) {
-				//console.log('a')
-				let ua = navigator.userAgent.toLowerCase();
-				if (ua.match(/iPhone\sOS/i) == "iphone os") {
-					var nowClientHeight = document.documentElement.clientHeight || document.body.clientHeight;
-
-					setTimeout(() => {
-						document.body.scrollTop = document.body.scrollHeight - (nowClientHeight / 2)
-					}, 200);
-				} else {
-					setTimeout(function () {
-						e.target.scrollIntoView({behavior: "smooth", block: "end"});
-					}, 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/${i}.gif`) + '"/>'
-							break;
-						}
-					}
-
-					data = data.replace(new RegExp(`\\#\\[${e.substring(2, e.length - 2)}\\]\\/`, 'g'), imgsrc);
-				})
-				return data;
-			},
-
-
-			/*******************************************/
-			// 表情包开关
-			faceClick() {
-				this.meme = !this.meme;
-			},
-
-			/*******************************************/
-			//当表情被点击
-			memeImg(i) {
-				this.text_info = this.text_info + "#" + this.frceArr[i] + "/";
-				//this.text_info = this.text_info + '<img  :src="' + require(`@/assets/${i}.gif`) +'"/>';
-				// console.log( this.text_info);
-			},
-
-			// /*******************************************/
-			// //验证码
-			// initialLoginCode() {
-			//   this.loginCode = "";
-			//   for (let i = 1; i <= 4; i++) {
-			//     this.loginCode =
-			//       this.loginCode + frce.arr[Math.floor(Math.random() * 32)];
-			//   }
-			// },
-
-			/********************************************/
-			//显示隐藏评价
-			is_show_evaluate() {
-				if (this.evaluateState == 100) {
-					this.bottomShow = true;
-				} else {
-					if (!this.haveEvaluation) {
-						this.bottomShow = false;
-					} else {
-						this.$dialog.notify({
-							mes: '亲，您已经评价了...',
-							timeout: 5000,
-							callback: () => {
-								//console.log('我走咯！');
-							}
-						});
-					}
-				}
-			},
-
-			/*******************************************/
-			//切换评价状态
-			evaluateClick(type) {
-				// console.log(type);
-				this.evaluateState = type;
-			},
-
-			/*******************************************/
-			//提交评价信息
-			evaluateEsc() {
-				this.get('/api/index/evaluate/putEvaluate', {
-					params: {
-						'evaluateId': this.evaluateState,
-						'conversationId': this.conversationId,
-					}, headers: {
-						'Content-Type': 'application/x-www-form-urlencoded',
-						'apiToken': this.setApiToken('putevaluate', 'evaluate', this.currentTime[0], 'index')
-					}
-				}).then(res => {
-					if (res.data.code == 1) {
-						console.log(res.data.data,'评价')
-						this.bottomShow = false;
-						//this.hintSwitch.evaluateOnOff = true;
-						this.haveEvaluation = true; // 标识已评价
-
-					}
-				})
-
-			},
-
-			/************************************************/
-			//人工聊天初始化
-			setInit() {
-				this.haveEvaluation = false;
-				this.chat = [];
-				this.evaluateState = 100;
-				this.meme = false
-				this.frceArr = [];//表情包代码
-				this.isConnection = true;
-				this.service_info = {
-					avatar: '/static/customer/images/robot.png',
-					job_name: '001',
-					name: '智能客服',
-					signature: "万人在线，万人赛事，告别拼爹，只拼实力！注册就送5000游戏币！"
-				}
-			},
-
-			/* ****************获取聊天次数****************** */
-			getChatNum() {
-				this.get('/api/index/evaluate/minRound', {
-					headers: {
-						'Content-Type': 'application/x-www-form-urlencoded',
-						'apiToken': this.setApiToken('minround', 'evaluate', this.currentTime[0], 'index')
-					}
-				}).then(res => {
-					if (res.data.code == 1) {
-						this.chatNum = res.data.data.systemconfig_data
-					}
-				})
-			},
-			// 留言知识库返回到主页
-			returnIndex(data) {
-				this.knowledge = data
-			}
-
-		},
-
-		/**
-		 * 组件挂载阶段
-		 */
-		created() {
-			this.frceArr = frce.frce;
-			// this.initialLoginCode();
-		},
-
-		/**
-		 * 视图挂载前
-		 */
-		mounted() {
-			this.source.appuid = this.$public.getQueryString('appuid');//用户标识
-			this.source.appid = this.$public.getQueryString('appid');//用户来源
-			//console.log(this.source);
-			//页面初始化获取系统时间第一步
-			//console.log(this.$md5('userwordscustomer-servicewords1562169600service'));
-			this.$dialog.loading.open('网络连接中...')
-
-			this.$axios.get('api/index/index/systime?t=' + 100).then(res => {
-				if (res.data.code == 1) {
-					this.logo = res.data.data.logo;
-					this.currentTime = res.data.data.time.split(' ')
-					this.currentTime[0] = (new Date(this.currentTime[0].replace(/-/g, '/')).getTime()) / 1000;
-
-					// console.log( this.currentTime[0] );
-					this.apiToken = this.$md5('customer-service' + this.currentTime[0] + window.location.origin);
-					//匿名注册
-					this.registered();
-					//获取机器人热门问题
-					this.getProblem();
-					//获取配置信息
-					this.getChatNum();
-				}
-			})
-		},
-		// 计算
-		computed: {
-			inputmsg() {
-				return this.text_info;
-			}
-		},
-		// 监听
-		watch: {},
-		// 组件生命周期结束销毁阶段
-		beforeDestroy() {
-			this.timers = false;
-		}
-	};
-</script>
-
-<style scoped>
-	#textarea {
-		margin: 15px;
-		width: 50%;
-		border: none;
-	}
-	.logo {
-		margin: 0 0.1rem;
-		width: 0.4rem;
-		height: 0.4rem;
-	}
-
-	/* 聊天 */
-	.memeImg {
-		width: 0.6rem;
-		height: 0.6rem;
-		margin: 0.15rem 0.4rem;
-	}
-
-	.dialogueA {
-		padding-left: 0.3rem;
-		padding-right: 0.3rem;
-	}
-
-	.dialogueB {
-		padding-right: 0.3rem;
-		padding-left: 0.3rem;
-	}
-
-	.left {
-		position: relative;
-		z-index: 99;
-		background: #fff;
-	}
-
-	.left::after {
-		position: absolute;
-		content: "";
-		display: inline-block;
-		left: -0.08rem;
-		top: 0.2rem;
-		width: 0.125rem;
-		height: 0.2rem;
-		background: #fff;
-		transform: skewX(30deg);
-		z-index: -1;
-		border-left: 0.02rem solid #dfdfdf;
-		border-top: 0.02rem solid #dfdfdf;
-	}
-
-	.right {
-		position: relative;
-		z-index: 99;
-		background: #5ea0f7;
-		border: 0.02rem solid #5ea0f7;
-	}
-
-	.right::after {
-		position: absolute;
-		content: "";
-		display: inline-block;
-		right: -0.07rem;
-		top: 0.2rem;
-		width: 0.125rem;
-
-		height: 0.2rem;
-		background: #5ea0f7;
-		transform: skewX(-30deg);
-		z-index: -1;
-		border-left: 0.02rem solid #5ea0f7;
-		border-top: 0.02rem solid #5ea0f7;
-	}
-
-	.service {
-		width: 100%;
-		color: #555;
-		font-size: 0.28rem;
-		padding-top: 1rem;
-		background: #f5f5f5;
-	}
-
-	.header {
-		position: fixed;
-		left: 0;
-		top: 0;
-		width: 100%;
-		z-index: 999;
-		height: 1rem;
-		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);
-		font-size: 0.34rem;
-		color: #fff;
-		padding: 0 0.3rem;
-	}
-
-	.main {
-		height: 83vh;
-		overflow-x: hidden;
-		overflow-y: auto;
-		padding: 0 0.3rem;
-	}
-
-	.btn {
-		display: inline-block;
-		padding: 0 0.36rem;
-		text-align: center;
-		line-height: 0.4rem;
-		background: rgba(221, 221, 221, 1);
-		border-radius: 0.3rem;
-		color: #fff;
-		font-size: 0.24rem;
-		max-width: 6rem;
-		margin: 0 auto;
-		margin-top: 0.3rem;
-	}
-
-	.btn .click {
-		color: #5ea0f7;
-	}
-
-	.btnRouter {
-		color: #5ea0f7;
-	}
-
-	.systemDialogue {
-		min-height: 0.8rem;
-		width: 100%;
-	}
-
-	.manUserDialogue {
-		min-height: 1rem;
-	}
-
-	.manPlatformDialogue {
-		min-height: 1rem;
-	}
-
-	.user {
-		padding: 0.2rem;
-		display: inline-block;
-		border-radius: 0.1rem;
-		font-size: 0.28rem;
-		color: #fff;
-	}
-
-	.HeadPortrait {
-		width: 1rem;
-		height: 1rem;
-		/* background: #ddd; */
-		border-radius: 0.1rem;
-	}
-
-	.HeadPortrait img {
-		width: 100%;
-		height: 100%;
-	}
-
-	.icon {
-		width: 0.32rem;
-		height: 0.32rem;
-	}
-
-	.icon-msg {
-		width: 0.32rem;
-		height: 0.32rem;
-		margin: 0 0.1rem;
-	}
-
-	.customerService {
-		background: #ffffff;
-		padding: 0.2rem;
-		display: inline-block;
-		border-radius: 0.1rem;
-		font-size: 0.28rem;
-		border: 1px solid rgba(223, 223, 223, 1);
-	}
-
-	.customerService {
-		/* min-height: 1rem; */
-	}
-
-	.system {
-		width: 100%;
-		border: 0.01rem solid rgba(223, 223, 223, 1);
-		border-radius: 0.1rem;
-	}
-
-	div /deep/ .yd-accordion-head {
-		/* border-radius: 0.1rem; */
-		border-bottom: 0.01rem solid rgb(238, 238, 238);
-		padding: 0 0.2rem;
-	}
-
-	div /deep/ .yd-accordion-title, div /deep/ .yd-accordion-head-arrow {
-		min-height: 0.8rem !important;
-	}
-
-	div /deep/ .yd-textarea textarea {
-		-webkit-user-select: auto;
-	}
-
-	.footer {
-		min-height: 1.2rem;
-		box-shadow: 0px -5px 5px rgba(0, 0, 0, 0.05);
-		background: #fff;
-		width: 100%;
-		position: fixed;
-		bottom: 0;
-		left: 0;
-		z-index: 1000;
-	}
-
-	.input {
-		width: 60%;
-		min-height: 1.2rem;
-		padding-top: 0.4rem;
-		padding-bottom: 0.4rem;
-		border: none;
-		padding-right: 0.3rem;
-		padding-left: 0.3rem;
-		font-size: 0.28rem;
-	}
-
-	.send {
-		width: 40%;
-		position: absolute;
-		right: 0;
-		top: 0;
-		background: #fff;
-		height: 1.2rem;
-	}
-
-	.memeBox {
-		height: 3rem;
-		width: 100%;
-	}
-
-	.send img {
-		vertical-align: middle;
-		margin-right: 0.4rem;
-	}
-
-	.artificial {
-		margin-top: 0.3rem;
-		border: 0.01rem solid #dfdfdf;
-		background: #fff;
-		border-radius: 0.1rem;
-		padding: 0 0.2rem;
-	}
-
-	div /deep/ .yd-accordion-head-arrow:after {
-		border: none;
-		width: 0.3rem;
-		height: 0.3rem;
-		background: url("../assets/addright.png") no-repeat;
-		background-size: 100% 100%;
-		transform: rotate(0deg);
-	}
-
-	div /deep/ .yd-accordion-head-arrow.yd-accordion-rotated:after {
-		transform: rotate(-270deg);
-	}
-
-	div /deep/ .yd-accordion {
-		border-radius: 0.1rem;
-	}
-
-	div /deep/ .yd-accordion-content {
-		border-radius: 0.1rem;
-	}
-
-	.imgSrc img {
-		width: 1.2rem;
-	}
-
-	.leftHader {
-		height: 1rem;
-		background: linear-gradient(
-				90deg,
-				rgba(22, 84, 209, 1) 0%,
-				rgba(9, 52, 173, 1) 100%
-		);
-		box-shadow: 0 0.03rem 0.03rem rgba(0, 0, 0, 0.2);
-		padding: 0 0.3rem;
-	}
-
-	.leftMain-top {
-		margin-top: 0.4rem;
-		font-size: 0.28rem;
-		line-height: 0.45rem;
-		padding: 0 0.3rem;
-		color: #666;
-	}
-
-	.leftMain-top span {
-		color: #999;
-	}
-
-	.leftMain-top > div {
-		width: 50%;
-	}
-
-	.leftMain-center {
-		margin-top: 0.3rem;
-		color: #666;
-		line-height: 0.5rem;
-	}
-
-	.leftMain-chenter span {
-		color: #999;
-		font-size: 0.28rem;
-	}
-
-	.evaluate {
-		height: 1.7rem;
-		background: #fff;
-		border: 0.01rem solid #ddd;
-		border-radius: 0.1rem;
-		color: #666;
-		margin-top: 0.3rem;
-	}
-
-	.evaluateBtn {
-		width: 1.4rem;
-		height: 0.6rem;
-		border: none;
-		background: #f04992;
-		color: #fff;
-		border-radius: 0.1rem;
-	}
-
-	div /deep/ .yd-popup {
-		border-radius: 0.2rem 0.2rem 0 0;
-	}
-
-	div /deep/ .yd-popup-content {
-	}
-
-	.evaluatebtn > div p {
-		height: 50%;
-		width: 100%;
-		text-align: center;
-		margin-top: 0.14rem;
-	}
-
-	.evaluatebtn > div {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-	}
-
-	.evaluateBox {
-		margin: 0 0.2rem;
-		height: 1.5rem;
-		border: 0.01rem solid #ddd;
-		border-radius: 0.1rem;
-		background: #f5f5f5;
-	}
-
-	.evaluateBox textarea {
-		width: 100%;
-		height: 100%;
-		background: #f5f5f5;
-		border: none;
-		border-radius: 0.1rem;
-		padding: 0.2rem;
-		color: #999;
-		font-size: 0.28rem;
-	}
-
-	.sub {
-		margin: 0 0.2rem;
-		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);
-		height: 1rem;
-		font-size: 0.34rem;
-		color: #fff;
-		border-radius: 0.1rem;
-		margin-top: 0.4rem;
-	}
-
-	div /deep/ .yd-popup-content {
-		background: #fff;
-		border-radius: 0.1rem;
-	}
-
-	.loginInput {
-		height: 0.8rem;
-		border: 0.01rem solid #ddd;
-		background: #f5f5f5;
-		border-radius: 0.1rem;
-		margin-top: 0.5rem;
-		padding: 0.2rem;
-		font-size: 0.28rem;
-		margin: 0.2rem;
-		margin-top: 0.5rem;
-		width: 94%;
-		color: #999;
-	}
-
-	/* 留言 */
-	.leave-header {
-		height: 1rem;
-		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);
-		color: #fff;
-		font-size: 0.34rem;
-		padding: 0 0.3rem;
-	}
-
-	.leave-main {
-		height: 10rem;
-		background: #f5f5f5;
-		font-size: 0.28rem;
-		padding: 0.3rem 0.3rem 0.2rem 0.3rem;
-	}
-
-	.leave-main > div {
-		height: 1.3rem;
-		margin-bottom: 0.2rem;
-	}
-
-	.leave-main > div input {
-		height: 0.8rem;
-		border: 0.01rem solid #ddd;
-		border-radius: 0.1rem;
-		background: #fff;
-		padding: 0.2rem;
-		width: 100%;
-		margin-top: 0.1rem;
-	}
-
-	.leave-main-txt {
-		background: #fff;
-		padding: 0.2rem;
-		border: 0.01rem solid #ddd;
-		border-radius: 0.1rem;
-	}
-
-	.imgMsg {
-		height: 1.5rem;
-		padding: 0 0.2rem;
-		margin-top: 0.1rem;
-		font-size: 0.24rem;
-		background: #fff;
-		border: 0.01rem solid #ddd;
-		border-radius: 0.1rem;
-	}
-
-	.yd-cell-box {
-		width: 60%;
-		min-height: 1.2rem;
-
-		border: none;
-		padding-right: 0.3rem;
-		padding-left: 0.3rem;
-		border-bottom: 0.01rem solid rgb(221, 221, 221);
-	}
-
-	div /deep/ .yd-textarea > textarea {
-		height: 1.2rem;
-		font-size: 0.28rem;
-		padding-top: 0.2rem;
-	}
-
-	.yd-textarea {
-		padding: 0;
-	}
-
-	.yd-cell-box {
-		margin: 0;
-	}
-
-	.yd-cell-item {
-		padding: 0;
-	}
-
-	div /deep/ .yd-cell:after {
-		height: 0;
-	}
-
-	div /deep/ .yd-textarea-counter {
-		display: none;
-	}
-
-
-	.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: 80%;
-	}
-
-	.help .prompt {
-		width: 100%;
-	}
-
-	/*
-	*留言知识库
-	 */
-
-</style>
-=======
-<template>
-	<div>
-		<!-- 聊天 -->
-		<div class="service" v-if="!knowledge">
-			<!-- 头部信息 -->
-			<div class="header row allAlignment item-center">
-				<div class="row item-center">
-					<img class="icon" style="margin-right:.2rem;" src="@/assets/Service1.png" @click="leftShow = true">
-					<img class="logo" :src="img_http + logo" alt="">
-					<p>{{service_info.name}}</p>
-
-				</div>
-				<div class="row">
-					<yd-button v-if="isExit" color="#fff" bgcolor="#1d57dd" class="exit" size="mini" type="primary"
-							   @click.native="is_exit()">退出聊天
-					</yd-button>
-					<img class="icon-msg" v-show=" (chat.length -1) > chatNum " @click="is_show_evaluate()"
-						 src="@/assets/Service2.png">
-					<img class="icon-msg" @click="knowledge = true,flag = false" src="@/assets/leaveSwitch.png">
-				</div>
-			</div>
-			<div class="main" id="main">
-
-				<!-- ********************************************************** -->
-				<!-- 机器人聊天板块 -->
-				<div v-if="!link_success">
-					<!-- 系统欢迎语 -->
-					<div v-if="welcome.length > 0" v-for="(item,i) in  welcome" :key="'w'+i">
-						<div class="row allAlignment" style="margin-top:.3rem;">
-							<div class="HeadPortrait row center">
-								<img :src="require('@/assets/headAdvent.png')">
-							</div>
-							<div class="messageWindow dialogueA col-w">
-								<div class="customerService left" v-html="item"></div>
-							</div>
-						</div>
-					</div>
-
-					<!-- 系统消息下拉选择 -->
-					<div class="artificial" v-if="problem.length > 0 && welcome.length > 0">
-						<div class="row item-center allAlignment" style="height:.75rem;border-bottom:.01rem solid #EEE;"
-							 v-for="(item,index) in problem" :key="index" @click="pushMessage(item.robot_content)">
-							<span>{{item.robot_name}}</span>
-							<img style="width:.3rem;height:.3rem;" src="@/assets/addright.png">
-						</div>
-						<div class="row item-center" style="height:.72rem;">
-							<p>以上问题都不是</p>
-							<div style="color:#5EA0F7;padding-left:.1rem;" @click="connectionService">转人工客服</div>
-						</div>
-					</div>
-
-					<!-- 和机器人会话 -->
-					<div v-for="(item,i) in robot" :key="'r'+i">
-						<!-- 和机器人会话互动 -->
-						<div v-if="item.type == 'error'" class="row allAlignment"
-							 style="margin-top:.3rem;">
-							<div class="HeadPortrait row center">
-								<img v-if="item.type == 'error'" :src="require('@/assets/headAdvent.png')">
-							</div>
-							<div class="messageWindow dialogueA col-w">
-								<!-- <div v-if="item.type == '1001'" class="customerService left"
-									 v-html="item.content.text"></div> -->
-								<!-- <div v-if="item.type == 'user'" class="user right imgSrc">
-									<yd-lightbox v-if="item.content.img" style="display:inline-block"
-												 class="row rightAlignment box-img">
-										<yd-lightbox-img :src=" img_http + item.content.img"></yd-lightbox-img>
-									</yd-lightbox> -->
-									<div v-if="item.type == 'error'" class="customerService left">{{item.content.text}}<div style="color:#5EA0F7;padding-left:.1rem;cursor:pointer;" @click="connectionService">转人工客服</div></div>
-								<!-- </div> -->
-							</div>
-							<div class="HeadPortrait row center">
-								<img v-if="item.type == 'user'"
-									 :src="require('@/assets/timg.jpg') ">
-							</div>
-						</div>
-
-
-						<!-- 和机器人会话互动 -->
-						<div v-if="item.type == 'service' || item.type == 'user'" class="row allAlignment"
-							 style="margin-top:.3rem;">
-							<div class="HeadPortrait row center">
-								<img v-if="item.type == 'service'" :src="require('@/assets/headAdvent.png')">
-							</div>
-							<div class="messageWindow dialogueA col-w"
-								 :style="item.type == 'user'?'text-align: right;':''">
-								<div v-if="item.type == 'service'" class="customerService left"
-									 v-html="item.content.text"></div>
-								<div v-if="item.type == 'user'" class="user right imgSrc">
-									<yd-lightbox v-if="item.content.img" style="display:inline-block"
-												 class="row rightAlignment box-img">
-										<yd-lightbox-img :src=" img_http + item.content.img"></yd-lightbox-img>
-									</yd-lightbox>
-									<div v-else v-html="item.content"></div>
-								</div>
-							</div>
-							<div class="HeadPortrait row center">
-								<img v-if="item.type == 'user'"
-									 :src="require('@/assets/timg.jpg') ">
-							</div>
-						</div>
-						<!-- 转人工分组 -->
-						<div class="artificial" v-if="item.type == 'artificial_service' ">
-							<div @click="turnArtificial(items.id)" v-for="(items,indexs) in item.content"
-								 :key="'r'+indexs" class="row item-center allAlignment"
-								 style="height:.75rem;border-bottom:.01rem solid #EEE;">
-								<p>
-									人工客服:
-									<span style="color:#5EA0F7;padding-left:.1rem;">{{items.name}}</span>
-								</p>
-								<img style="width:.3rem;height:.3rem;" src="@/assets/addright.png">
-							</div>
-						</div>
-					</div>
-				</div>
-
-				<!-- ********************************************************** -->
-				<!-- 人工会话模版 -->
-				<div v-if="link_success">
-					<!--历史消息-->
-					<div v-if="showHistory"  v-for="item in hisSviceChat" >
-						<!-- 客服信息 -->
-						<div v-if="item.from_id.startsWith('KF')">
-							<div style="width: 100%;text-align: center;">
-								<span v-if="item.time_line">{{item.time_line}}</span>
-							</div>
-							<div class="row allAlignment" style="margin-top:.3rem;margin-top: 0.3rem;">
-								<div class="HeadPortrait row center">
-									<img v-if="service_info.avatar == '' " :src="avatar_imgs">
-									<img v-if="service_info.avatar != ''" :src="img_http + service_info.avatar ? img_http + service_info.avatar : require('@/assets/user2.png')">
-								</div>
-								<div class="messageWindow dialogueA col-w">
-									<div class="customerService left imgSrc">
-										<yd-lightbox v-if="item.content.img" style="display:inline-block"
-												class="row rightAlignment">
-											<yd-lightbox-img :src=" img_http + item.content.img"></yd-lightbox-img>
-										</yd-lightbox>
-										<div v-html="item.content.text" v-else></div>
-									</div>
-								</div>
-								<div class="HeadPortrait row center">
-
-								</div>
-							</div>
-						</div>
-						<!-- 用户信息 -->
-						<div v-else>
-							<div style="width: 100%;text-align: center;margin-top: 0.3rem;">
-								<span v-if="item.time_line">{{item.time_line}}</span>
-							</div>
-							<div class="row allAlignment" style="margin-top:.3rem;">
-								<div class="HeadPortrait row center">
-
-								</div>
-								<div class="messageWindow dialogueA col-w" style="text-align: right;">
-									<div class="user right imgSrc">
-						
-										<yd-lightbox v-if="item.content.img" style="display:inline-block" class="row rightAlignment">
-											<yd-lightbox-img :src="img_http+item.content.img"></yd-lightbox-img>
-										</yd-lightbox>
-										<span v-html="item.content.text" v-else></span>
-									</div>
-								</div>
-								<div class="HeadPortrait row center">
-									<img :src="require('@/assets/timg.jpg') ">
-								</div>
-							</div>
-						</div>
-					</div>
-			
-					<div  v-for="(item,index) in chat" :key="index">
-
-						<!-- 历史消息 -->
-						<div class="promptBox" v-if="item.type == 'historyMsg'">
-							<div class="prompt help">
-								<span>{{historyMsgtext}}</span>
-							</div>
-						</div>
-						<!-- 客服会话 -->
-						<div v-if="item.type == 'service'">
-							<div style="width: 100%;text-align: center;margin-top: 0.3rem;">
-								<span v-if="item.time ">{{item.time}}</span>
-							</div>
-							<div class="row allAlignment" style="margin-top:.3rem;">
-								<div class="HeadPortrait row center">
-									<img id="123" v-if="service_info.avatar == '' " :src="avatar_imgs">
-									<img id="321" v-if="service_info.avatar != '' " :src="img_http + service_info.avatar ? img_http + service_info.avatar : img_http + service_info.avatar">
-								</div>
-								<div class="messageWindow dialogueA col-w">
-									<div class="customerService left imgSrc">
-										
-										<yd-lightbox v-if="item.content.img" style="display:inline-block"
-													class="row rightAlignment">
-											<yd-lightbox-img :src="img_http + item.content.img"></yd-lightbox-img>
-										</yd-lightbox>
-										<div v-html="item.content.text" v-else></div>
-									</div>
-								</div>
-								<div class="HeadPortrait row center">
-
-								</div>
-							</div>
-						</div>
-
-						<!-- 用户会话 -->
-						<div v-if="item.type == 'user'">
-							<div style="width: 100%;text-align: center;margin-top: 0.3rem;">
-								<span v-if="item.time">{{item.time}}</span>
-							</div>
-							<div class="row allAlignment" style="margin-top:.3rem;">
-								<div class="HeadPortrait row center">
-
-								</div>
-								<div class="messageWindow dialogueA col-w" style="text-align: right;">
-									
-									<div class="user right imgSrc">
-										<yd-lightbox v-if="item.content.img" style="display:inline-block"
-													class="row rightAlignment">
-											<yd-lightbox-img :src="img_http+item.content.img"></yd-lightbox-img>
-										</yd-lightbox>
-										<span v-html="item.content.text" v-else>{{item.content.text}}</span>
-									</div>
-								</div>
-								<div class="HeadPortrait row center">
-									<img v-if="item.type == 'user'"
-										:src="require('@/assets/timg.jpg') ">
-								</div>
-							</div>
-						</div>
-
-						<!-- 常规系统消息评价 -->
-						<div class="row center " v-if="item.type== 'system' ">
-							<div class="column item-center "
-								style="margin: 0.3rem 0; background: #fff; width:100% ;padding: 0.1rem 0;"
-								v-if="item.content.state  =='getEvaluate' && !haveEvaluation ">
-								<p class="row center wrap">{{item.content.text}}</p>
-								<button class="evaluateBtn" style="margin-top:.2rem;" @click="is_show_evaluate()">评价
-								</button>
-							</div>
-
-							<div class="column item-center"
-								style="margin: 0.3rem 0; background: #fff; width:100% ;padding: 0.1rem 0.5rem;"
-								v-if="item.content.state  == 'closeInform' ">
-								<p class="row center wrap">{{item.content.text}}</p>
-							</div>
-
-
-						</div>
-					</div>
-				</div>
-
-				<div v-if="box_height" style="height:65px">
-
-				</div>
-			</div>
-			<!-- 中间弹窗登录 -->
-			<!-- <yd-popup
-			  v-model="centerShow"
-			  position="center"
-			  width="6.9rem"
-			  height="8rem"
-			  :masker-opacity=".2"
-			>
-			  <div class="row rightAlignment" style="padding-top:.2rem;padding-right:.2rem;">
-				<img
-				  @click="centerShow = false"
-				  style="width: 0.32rem;height: 0.32rem;"
-				  src="@/assets/Service5.png"
-				>
-			  </div>
-			  <div class="row center" style="font-size:.56rem;">
-				<p style="color:#F04992;">HX</p>
-				<span style="color:#5EA0F7;">669</span>
-			  </div>
-			  <input class="loginInput" type="text" placeholder="姓名">
-			  <input class="loginInput" type="text" placeholder="手机号">
-			  <input class="loginInput" type="email" placeholder="邮箱地址">
-			  <div class="row" style="margin:0 .2rem;">
-				<input class="loginInput" placeholder="输入验证码" type="text" style="margin:.5rem 0 0 0;">
-				<p
-				  @click="initialLoginCode"
-				  class="row center"
-				  style="width:100%;height:.8rem;margin-top:.5rem;background:#F1E1E0;border-radius: .1rem;margin-left:.2rem;font-size:.3rem;color:#666;"
-				>{{loginCode}}</p>
-			  </div>
-			  <div class="row center sub" style="margin:.5rem .2rem .2rem .2rem;">登录</div>
-			</yd-popup> -->
-
-			<!-- 底部弹窗评价 -->
-			<yd-popup v-model="bottomShow" position="bottom" height="6.5rem" :masker-opacity=".2">
-				<div class="row rightAlignment" style="padding-top:.2rem;padding-right:.2rem;">
-					<img @click.stop="bottomShow = false" style="width: 0.32rem;height: 0.32rem;"
-						 src="@/assets/Service5.png">
-				</div>
-				<div style="color:#666;text-align: center;font-size:.28rem;">感谢您的咨询，请对我们的服务做出评价</div>
-				<div style="height:2.3rem;" class="row allAlignment evaluatebtn">
-					<div style="width:33%;height:100%;">
-						<div class="row wrap center" @click="evaluateClick(1)">
-							<img style="width:.66rem;height:.66rem;"
-								 :src="evaluateState =='1'?require('@/assets/evaluate1a.png'):require('@/assets/evaluate1.png')">
-							<p>满意</p>
-						</div>
-					</div>
-					<div style="width:33%;height:100%;" @click="evaluateClick(2)">
-						<div class="row wrap center">
-							<img style="width:.66rem;height:.66rem;"
-								 :src="evaluateState =='2'?require('@/assets/evaluate2a.png'):require('@/assets/evaluate2.png')">
-							<p>一般</p>
-						</div>
-					</div>
-					<div style="width:33%;height:100%;" @click="evaluateClick(3)">
-						<div class="row wrap center">
-							<img style="width:.66rem;height:.66rem;"
-								 :src="evaluateState =='3'?require('@/assets/evaluate3a.png'):require('@/assets/evaluate3.png')">
-							<p>不满意</p>
-						</div>
-					</div>
-				</div>
-				<!-- <div class="evaluateBox">
-				  <textarea placeholder="评价备注" v-model="evalArea"></textarea>
-				</div> -->
-				<div class="row center sub" @click="evaluateEsc">确定</div>
-			</yd-popup>
-
-			<!-- 左侧弹窗客服信息 -->
-			<yd-popup v-model="leftShow" position="left" width="4.8rem" :masker-opacity=".2">
-				<div class="leftHader row item-center">
-					<img @click="leftShow = false" class="icon" src="@/assets/Service4.png">
-					<img class="logo" :src="img_http + logo" alt="">
-					<p style="color:#FFF;font-size:.34rem;">{{service_info.name}}</p>
-
-
-				</div>
-				<div>
-					<div class="leftMain-top row">
-						<div>
-							<p>
-								<!-- 客服名字 -->
-								<span>姓名:</span>
-								{{service_info.name}}
-							</p>
-							<p>
-								<!-- 客服工号 -->
-								<span>工号:</span>
-								{{service_info.job_name}}
-							</p>
-							<p>
-								<!-- 客服性别 -->
-								<span>性别:</span>
-								保密
-							</p>
-							<p>
-								<!-- 客服职务 -->
-								<span>职务:</span>
-								咨询服务
-							</p>
-						</div>
-						<div class="row center">
-							<img style="width:1.8rem;height:1.8rem;" v-if="service_info.avatar == ''" :src="avatar_imgs">
-							<img style="width:1.8rem;height:1.8rem;" v-if="service_info.avatar != ''" :src="img_http + service_info.avatar">
-						</div>
-					</div>
-					<div class="leftMain-chenter"
-						 style="padding:0 .3rem;margin-top:.3rem;padding-bottom:.6rem;border-bottom:.01rem solid #ddd;"
-					>
-						<!-- 客服个性签名 -->
-						<span>个性签名：</span>
-						{{service_info.signature}}
-					</div>
-					<!-- 广告图 -->
-					<div class="leftMain-bottom row center" style="padding:0 .3rem;margin-top:.6rem;">
-						<a :href="'http://'+advertisement.advertisement_url" target="_blank" rel="noopener noreferrer">
-							<img style="width:4.2rem;height:7rem;" :src="img_http+advertisement.advertisement_img">
-						</a>
-					</div>
-				</div>
-			</yd-popup>
-			<!-- 底部输入框 -->
-			<div class="footer row wrap" id='input_box'>
-					<!-- @keydown="inputNumFun()" -->
-				<textarea
-					id="textarea"
-					v-model.trim="text_info"
-					placeholder="请输入你的问题："
-					maxlength="100"
-				>
-				</textarea>
-
-				<div class="send row item-center" style="border-bottom:.01rem solid #ddd">
-					<img
-							:src="meme?require('@/assets/faceActive.png'):require('@/assets/face.png')"
-							@click="faceClick"
-							style="width:.48rem;height:.48rem"
-					>
-					<input type="file" id="file" @change="uploadIMG" accept="image/jpeg,image/jpg,image/png,image/svg"
-						   style="display:none">
-					<label for="file">
-						<img src="@/assets/imge.png" style="width:.46rem;height:.42rem">
-					</label>
-					<div
-							@click="send()"
-							style="color:#ccc;border:.02rem solid #ddd;width:1rem;height:.66rem;border-radius:.1rem;"
-							:style="text_info.length>0?'background:#5EA0F7;color:#fff;':''"
-							class="row center"
-					>发送
-					</div>
-				</div>
-				<!-- 表情包 -->
-				<div v-show="meme" class="memeBox">
-					<yd-slider autoplay="0" :loop="false">
-						<yd-slider-item>
-							<div>
-								<ul style="width:100%;padding-bottom:.3rem;" class="row average wrap">
-									<li v-for="(item,index) in frceArr" :key="index" v-show="index<15">
-										<img
-												class="memeImg"
-												:src="require(`@/assets/${index}.gif`)"
-												@click="memeImg(index)"
-										>
-									</li>
-								</ul>
-							</div>
-						</yd-slider-item>
-						<yd-slider-item>
-							<div>
-								<ul style="width:100%;padding-bottom:.3rem;" class="row average wrap">
-									<li v-for="(item,index) in frceArr" :key="index" v-show="index>15&&index<=30">
-										<img
-												class="memeImg"
-												:src="require(`@/assets/${index}.gif`)"
-												@click="memeImg(index)"
-										>
-									</li>
-								</ul>
-							</div>
-						</yd-slider-item>
-						<yd-slider-item>
-							<div>
-								<ul style="width:100%;padding-bottom:.3rem;" class="row average wrap">
-									<li v-for="(item,index) in frceArr" :key="index" v-show="index>30&&index<=45">
-										<img
-												class="memeImg"
-												:src="require(`@/assets/${index}.gif`)"
-												@click="memeImg(index)"
-										>
-									</li>
-								</ul>
-							</div>
-						</yd-slider-item>
-						<yd-slider-item>
-							<div>
-								<ul style="width:100%;padding-bottom:.3rem;" class="row average wrap">
-									<li v-for="(item,index) in frceArr" :key="index" v-show="index>45&&index<=60">
-										<img
-												class="memeImg"
-												:src="require(`@/assets/${index}.gif`)"
-												@click="memeImg(index)"
-										>
-									</li>
-								</ul>
-							</div>
-						</yd-slider-item>
-						<yd-slider-item>
-							<div>
-								<ul style="width:100%;padding-bottom:.3rem;" class="row average wrap">
-									<li v-for="(item,index) in frceArr" :key="index" v-show="index>60">
-										<img
-												class="memeImg"
-												:src="require(`@/assets/${index}.gif`)"
-												@click="memeImg(index)"
-										>
-									</li>
-								</ul>
-							</div>
-						</yd-slider-item>
-					</yd-slider>
-				</div>
-			</div>
-		</div>
-		<!-- 留言知识库 -->
-		<div v-if="knowledge">
-			<!-- 接收返回消息 -->
-			<knowledgeLibrary @returnIndex="returnIndex" :currentTime="currentTime"/>
-		</div>
-	</div>
-</template>
-
-<script>
-	import "../css/index.css";
-	import knowledgeLibrary from './knowledgeLibrary'
-	import frce from "./frce.js";
-	import avatarImgs from "./../assets/user.png"
-	import defaultImgs from "./../assets/timg.jpg"
-
-	export default {
-		name: "service",
-		// 模板注册
-		components: {
-			knowledgeLibrary
-		},
-		data() {
-			return {
-				/*-----------------------------------------------*/
-				text_info: "", //输入框内容
-				knowledge: false,//留言知识库开关
-				leftShow: false, //左侧详细开关
-				evaluateOnOff: false, //人工客服评价通知
-				bottomShow: false, //底部评价弹窗开关
-				meme: false, // 表情包开关
-				frceArr: [], //表情包代码
-				evaluateState: 100,//评价状态
-				websock: null,//创建websock
-				user_info: '',//用户信息
-				apiToken: '',//通话调用凭证
-				currentTime: '',//接口调用服务器时间
-				problem: [],//机器人问题
-				welcome: [],//欢迎语
-				advertisement: '', //广告
-				img_http: 'http://103.108.43.176:8080',//图片路径域
-				//img_http:'http://192.168.2.186:8090',//图片路径域
-
-				robot: [],//和机器人聊天临时数据
-				chat: [],//人工会话
-				error_num: 1001,//机器人回答超出能力之外编号
-				isConnection: true,//人工分组列表开关
-				//客服信息
-				service_info: {
-					avatar: '/static/customer/images/robot.png',
-					job_name: '001',
-					name: '智能客服',
-					signature: ""
-				},
-				link_success: false,//人工链接成功
-				conversationId: '',//会话工单
-				chatNum: 0,//触发评价按钮条件
-				haveEvaluation: false,//是否已评价
-				evalArea: '', //评价备注
-				source: {},//来源信息
-				initData: 1,//
-				isTurnArtifcial: true,
-				box_height: false,//苹果浏览器增加会话框高度
-				logo: '',
-				isExit: false,
-				historyMsg: false, // 是否展示历史信息
-				historyMsgtext: "", // 历史信息内容提示
-				hisSviceChat: [],
-				showHistory:true,
-				avatar_imgs:avatarImgs,
-				webTime:'',//人工会话上一次发送消息时间
-				chatIndex:'',//人工会话上一次下标
-				/*****************websockt心跳变量*******************/
-				reconnectData: null,
-				lockReconnect: false,    //避免重复连接，因为onerror之后会立即触发 onclose
-				timeout: 5000,          //5s一次心跳检测
-				timeoutObj: null,
-				serverTimeoutObj: null,
-			};
-		},
-		// 方法
-		methods: {
-			// 退出聊天
-			is_exit() {
-				this.socket_send(JSON.stringify({
-					type: 'kfCloseUser',
-					data: {
-						to_id: this.user_info.id,
-						kf_id: this.service_info.id,
-						group_id: this.service_info.group,
-						conversationId: this.conversationId,
-						type: 6,
-					}
-				}));
-
-
-				// this.websock.close()
-				// this.setInit();
-				// this.initWebsocket()
-				
-
-			},
-			/*******************************************/
-			//设置token加密
-			setApiToken(name, controller, time, modules) {
-				let txetVal = name + 'customer-service' + controller + time + modules;
-				let sssd = txetVal.toLowerCase();
-				return this.$md5(txetVal.toLowerCase());
-			},
-
-			/*******************************************/
-			//初始化Websocket链接
-			initWebsocket(apiToken) {
-				let sock_ip = ''; // 线上
-				// let sock_ip = 'ws://192.168.2.187:9101';  // 本地
-
-				this.websock = new WebSocket("ws://103.108.43.176:9101?apiToken=" + apiToken);
-				//数据返回
-				this.websock.onmessage = this.socket_message;
-				//数据发送
-				this.websock.onopen = this.socket_open;
-				//重新链接
-				this.websock.onerror = this.socket_error;
-				//关闭链接
-				this.websock.onclose = this.socket_close;
-			},
-
-			/*******************************************/
-			//连接建立之后执行send方法发送数据
-			socket_open() {
-				console.log('我链接了');
-			},
-
-			/*******************************************/
-			//连接建立失败重连
-			socket_error() {
-				console.log('连接建立失败重连');
-				// this.initWebSocket();
-				// this.setInit();
-				// this.reconnect();
-			},
-
-			/*******************************************/
-			//数据接收
-			socket_message(e) {
-				if (!e.data) return;
-				const redata = JSON.parse(e.data);
-				console.log(redata);
-				//心跳检测
-				this.heatBeat();
-				//欢迎语
-				if (redata.message_type == 'helloMessage') {
-					this.isTurnArtifcial = true;
-					if (this.initData == 1) {
-						this.welcome.push(redata.data.content);
-						//this.welcome.push('请点击您想咨询的问题，若都不是，请在输入框直接输入');
-					}
-				}
-				//广告语
-				if (redata.message_type == 'advertisement') {
-					this.advertisement = redata.data[0]
-				}
-
-				//机器人回复
-				if (redata.message_type == "robotMessage") {
-					// console.log(redata);
-					if (redata.data.content == "error") {
-						this.robot.push({
-							type:'error',
-							content: {text: "您的问题暂无法处理"}
-						})
-						// this.error_num++;
-					} else {
-						this.robot.push({
-							type: 'service',
-							content: {text: redata.data.content}
-						})
-					}
-					console.log(this.robot);
-					// this.automaticRolling();
-					//data
-					//this.robot =
-				}
-
-
-				//人工链接
-				if (redata.message_type == 'connect') {
-					let server= {};
-					if (redata.data) {
-						server = redata.data
-					} else {
-						server = {
-							conversationId: redata.data.conversationId,
-							kf_id: redata.data.kf_id,
-							kf_name: "",
-							serverInfo: {
-								avatar: avatarImgs,
-								client_id:"",
-								group:"",
-								id: "",
-								intime:"",
-								job_name: "",
-								name: "tank",
-								signature: "",
-								status: 0,
-								task: 0,
-							}
-
-						}
-					}
-					this.isExit = true;
-					this.link_success = true;
-					this.$dialog.loading.close();
-					this.service_info = server.serverInfo;
-					this.conversationId = server.conversationId;
-				}
-
-				//人工会话回复
-				if (redata.message_type == "chatMessage") {
-					// 转接的时候清除历史信息
-					// this.hisSviceChat = [];
-					// this.getHistory = false;
-					this.$dialog.loading.close();
-					let obj = {};
-					let isSession = false;
-					if (this.$public.isJSON(redata.data.content)) {
-						obj = JSON.parse(redata.data.content);
-						obj.text = this.turnFace(obj.text);
-						isSession = true;
-					} else {
-						obj.text = redata.data.content;
-					}
-
-					let thisTime ='';
-					let newTime = redata.data.time.split(':');
-					if(this.webTime){
-						let lastTime  = this.webTime.split(":");
-							if(newTime[0] == lastTime[0] &&  newTime[1] < (lastTime[1]+2)){
-								thisTime = ''
-							}else{
-								thisTime = redata.data.time;
-							}
-					}else{
-						if(isSession){
-							thisTime = redata.data.time;
-						}
-					}
-					if(isSession){
-						this.webTime = redata.data.time;
-					}
-					this.chat.push({
-						type: 'service',
-						time: thisTime  ? thisTime: '',
-						content: obj
-					})
-					// this.setNum++;
-				}
-				//系统消息通知客户结束通话
-				if (redata.message_type == 'closeBysever') {
-					this.setInit();
-					this.showHistory = false;
-					this.link_success = false;
-					this.isTurnArtifcial =true;
-				}
-
-				if(redata.message_type == "changeKeFuSuccess"){
-					this.$dialog.alert({
-						mes: redata.data.content
-					});
-				}
-
-				//系统消息通转人工
-				if (redata.message_type == 'notice') {
-					this.$dialog.loading.close();
-					this.isTurnArtifcial = true;
-					let _this = this;
-					this.$dialog.alert({
-						mes: redata.content, callback: () => {
-							this.initData = 100;
-							// _this.$dialog.loading.open('数据加载中...');
-							// setTimeout(() => {
-							// 	_this.$dialog.loading.close();
-							// 	// _this.registered();
-							// }, 2000);
-						}
-					});
-				}
-
-				//系统消息评价
-				if (redata.message_type == "getEvaluate") {
-					// this.evaluateOnOff = true;
-					// console.log( this.chat)
-					this.chat.push({
-						type: 'system',
-						content: {
-							text: redata.data.content,
-							state: 'getEvaluate',
-						}
-					})
-				}
-
-				//会话关闭前通知用户
-				if (redata.message_type == 'overtime') {
-					this.chat.push({
-						type: 'system',
-						content: {
-							text: redata.data.content,
-							state: 'closeInform',
-						}
-					})
-				}
-
-				// 历史信息
-				if (redata.message_type == 'toOld') {
-					// console.log(redata, '历史信息')
-					this.hisSviceChat = [];
-					let obj = redata;
-					this.historyMsgtext = obj.data.content;
-					this.chat.push({
-						type: 'historyMsg',
-						content: {
-							text: this.historyMsgtext,
-						}
-					})
-					let historyTime = '';
-					obj.data.chatLog.forEach(res => {
-						// console.log(res,'历史信息');
-						res.content = JSON.parse(res.content);
-						let time_line = this.$public.customFormatDateTime(res.time_line,'',3);
-						// res.time_line  = 
-						if(!historyTime){
-							res.time_line  = time_line
-						}else{
-							let newTime = time_line.split(':');
-							let lastTime = historyTime.split(':');
-							if(newTime[0]==lastTime[0] && newTime[1] < (lastTime[1]+2)){
-								res.time_line = '';
-							}else{
-								res.time_line  = time_line
-							}
-						}
-						historyTime = time_line; 
-						this.hisSviceChat.push(res);
-					})
-
-
-				}
-
-				//获取发送时间
-				if(redata.message_type  == "webTime"){
-					if(this.webTime){
-						let newTime = redata.data.webTime.split(':');
-						let time = this.webTime.split(':');
-					
-						if(newTime[0]*1 > time[0]*1 ){
-							// console.log('newTime[0]')
-							this.$set(this.chat[this.chatIndex],'time',redata.data.webTime);
-						}else if(newTime[0]*1  ==  time[0]*1 && (newTime[1]*1 - time[1]*1) > 2 ){
-							this.$set(this.chat[this.chatIndex],'time',redata.data.webTime);
-							// console.log('newTime[1]')
-						}
-					}else{
-						this.chat[this.chatIndex].time =  redata.data.webTime;
-						// this.$set(this.chat[this.chatIndex],'time',redata.data.webTime);	
-					}
-					this.webTime = redata.data.webTime
-				}
-
-				//屏幕滚动
-				this.automaticRolling();
-			},
-
-			/*******************************************/
-			//数据发送
-			socket_send(Data) {
-				this.websock.send(Data);
-			},
-
-
-
-			/*******************************************/
-			//关闭
-			socket_close(e) {
-				console.log('断开连接', e);
-				this.initData = 100;
-				this.link_success = false;
-				this.setInit();
-				this.reconnect();
-				// this.registered();
-				// this.websock.close()
-			},
-
-
-			/***************************************/
-			//socket重连
-			reconnect() {
-				if (this.lockReconnect) {       //这里很关键，因为连接失败之后之后会相继触发 连接关闭，不然会连接上两个 WebSocket
-					return
-				}
-				this.lockReconnect = true;
-				this.reconnectData && clearTimeout(this.reconnectData);
-				this.reconnectData = setTimeout(() => {
-					this.initWebSocket(this.apiToken);
-					//this.registered()
-					console.log('-----lail-----');
-					this.lockReconnect = false;
-				}, 2000)
-			},
-
-			/*************************************/
-			//心跳检测
-			heatBeat() {
-				this.timeoutObj && clearTimeout(this.timeoutObj);
-				this.serverTimeoutObj && clearTimeout(this.serverTimeoutObj);
-				this.timeoutObj = setTimeout(() => {
-					// console.log('发送', {type: 'ping'});
-					this.socket_send(JSON.stringify({type: 'ping'}))   //根据后台要求发送
-					this.serverTimeoutObj = setTimeout(() => {
-						// console.log('------close-------') 
-						this.websock.close(); //如果 4秒之后我们没有收到 后台返回的心跳检测数据 断开socket，断开后会启动重连机制
-					}, 4000);
-				}, this.timeout)
-			},
-
-			/*****************************************/
-			//用户匿名注册
-			registered() {
-				let token = localStorage.getItem('token');
-
-				let appuid = this.$public.getQueryString('appuid');
-				let tutype = this.$public.getQueryString('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'),
-				}
-
-				let obj = {
-					headers: {
-						"apiToken": this.setApiToken('autoReg', 'register', this.currentTime[0], 'index')
-					}
-				}
-
-				this.post('api/index/register/autoReg', data, obj).then(res => {
-					if(res.data.code == 0){
-						this.$dialog.alert({
-							mes: res.data.msg
-						});
-					}else if (res.data.code == 1) {
-						this.user_info = res.data.data;
-						// console.log(this.user_info)
-						// 游客 token
-						localStorage.setItem("token", res.data.data.token);
-						localStorage.setItem("tutype", res.data.tutype);
-						//Websocket链接
-
-						setTimeout(() => {
-							this.$dialog.loading.close();
-							this.initWebsocket(this.apiToken);
-						}, 2000)
-						//console.log(res.data.data)
-					}
-				})
-			},
-
-			/******************************************/
-			//获取热门问题
-			getProblem() {
-				let obj = {
-					headers: {
-						// 'Content-Type': 'application/x-www-form-urlencoded',
-						"apiToken": this.setApiToken('index', 'robot', this.currentTime[0], 'index')
-					}
-				}
-				this.post('api/index/robot/index', {groups_id: 1, robotgroups_id: 1}, obj).then(res => {
-					//console.log(res.data.data);
-					this.problem = res.data.data;
-				})
-			},
-
-			/*******************************************/
-			//推送机器人消息
-			pushMessage(e) {
-				this.robot.push({
-					type: 'service',
-					content: {text: e}
-				});
-				this.automaticRolling();
-			},
-
-			/*******************************************/
-			//转人工
-			turnArtificial(id) {
-				this.group = id;
-				this.$dialog.loading.open('转接中...')
-				if (this.isTurnArtifcial) {
-					let data = {
-						'type': 'userInit',
-						data: {
-							'uid': this.user_info.id,
-							'name': this.user_info.name,
-							'avatar': this.user_info.avatar,
-							'group': this.group
-						}
-					}
-					this.socket_send(JSON.stringify(data));
-					this.isTurnArtifcial = false
-				}
-			},
-
-			/******************************************/
-			// 消息发送
-			send() {
-				if (this.text_info == '') return;
-				let str = this.text_info;
-				let formatStr = str.replace(/\n|\r\n/g, "<br>");
-				let type = 'toRobot';
-				let data = {};
-				let obj = {
-					text: formatStr,
-					img: '',
-					type: ''
-				}
-				this.meme = false;
-				// console.log(JSON.stringify(obj))
-				//和人工发送消息
-				if (this.link_success) {
-					// if(this.getHistory){
-					// 	this.getHistory = false;
-					// }
-					data = {
-						from_name: this.user_info.name,
-						content: JSON.stringify(obj),
-						from_id: this.user_info.id,
-						avatar: '',
-						to_id: this.service_info.id,
-						to_name: this.service_info.name,
-						conversationId: this.conversationId,
-					}
-					type = 'chatMessage';
-					this.chatIndex = this.chat.length;
-					this.chat.push({
-						type: 'user',
-						time:'',
-						content: {text: this.turnFace(obj.text)}
-					})
-				} else {//和机器人聊天
-					data = {
-						groups_id: '1',
-						robot_name: formatStr,
-						robotgroups_id: '1',
-					}
-
-					// console.log(this.turnFace(formatStr));
-					type = 'toRobot';
-					//本地存放数据
-					this.robot.push({
-						type: 'user',
-						content: this.turnFace(formatStr) //obj
-					})
-				}
-				this.socket_send(JSON.stringify({type, data}))
-				this.text_info = '';
-				this.automaticRolling();
-				// console.log(data)
-			},
-
-			/*******************************************/
-			//获取转接人工客服列表
-			connectionService() {
-				// if (!this.isConnection) return
-				let obj = {
-					headers: {
-						"apiToken": this.setApiToken('index', 'groups', this.currentTime[0], 'index')
-					}
-				}
-				// this.isConnection = false;
-				//api
-				this.get('api/index/groups/index', obj).then(res => {
-					if (res.data.code == 1) {
-						this.robot.push({
-							type: 'artificial_service',
-							content: res.data.data
-						});
-						this.automaticRolling();
-					}
-				})
-				//this.hintSwitch.connection = true; //系统提示开关激活
-				// 此处为请求
-			},
-
-			/*******************************************/
-			//发送消息后自动滚动高度
-			automaticRolling() {
-				this.$nextTick(() => {
-					let msg = document.getElementById('main') // 获取对象
-					// let input_box = document.getElementById('input_box') // 获取对象
-
-					//判断是否是苹果手机自代浏览器
-					if (/Safari/.test(navigator.userAgent) && /Chrome/.test(navigator.userAgent)) {
-						this.box_height = true; //input_box+'px';
-					}
-
-					msg.scrollTop = msg.scrollHeight // 滚动高度
-
-				})
-			},
-
-			/*******************************************/
-			//图片发送
-			uploadIMG(e) {
-				//console.log(e);
-				let self = this;
-				let files = e.target.files || e.dataTransfer.files;
-				if (!files.length) return;
-				let picavalue = files[0];
-				const isJPG = file.type == 'image/jpeg' || 'image/jpg' || 'image/png' || 'image/svg';
-				const isLt2M = picavalue.size / 1000 / 1000 > 2;
-
-				if (isLt2M) {
-					this.$dialog.notify({
-						mes: '图片过大不支持上传哦！',
-						timeout: 2000,
-					});
-				}else if(!isJPG){
-					this.$dialog.notify({
-						mes: '只能上传图片哦！',
-						timeout: 2000,
-					});
-				}else {
-					this.$public.imgPreview(picavalue, function (imgSrc, formData) {
-						// let img = imgSrc;
-
-						// 数据结构请求
-						self.post('api/index/upload/uploadImg', formData).then(res => {
-							// console.log(res.data.code)
-							if (res.data.code == 1) {
-								let type = 'toRobot';
-								let data = {};
-								let obj = {
-									text: '',
-									img: res.data.data.src,
-									type: ''
-								}
-								if (self.link_success) {
-									//和人工聊天发送图片
-									data = {
-										from_name: self.user_info.name,
-										content: JSON.stringify(obj),
-										from_id: self.user_info.id,
-										avatar: '',
-										to_id: self.service_info.id,
-										to_name: self.service_info.name,
-										conversationId: self.conversationId,
-									}
-									type = 'chatMessage';
-									//本地储存
-									self.chat.push({
-										type: 'user',
-										content: {img: res.data.data.src}
-									});
-								} else {
-									//和机器发送图片
-									data = {
-										groups_id: '1',
-										robot_name: res.data.data.src,
-										robotgroups_id: '1',
-									}
-									type = 'toRobot';
-									//本地储存
-									self.robot.push({
-										type: 'user',
-										content: {img: res.data.data.src}
-									});
-								}
-								self.socket_send(JSON.stringify({type, data}))
-								self.automaticRolling();
-							}
-						})
-					});
-				}
-			},
-
-			/*******************************************/
-			//手机弹窗处理
-			inputShow(e) {
-				//console.log('a')
-				let ua = navigator.userAgent.toLowerCase();
-				if (ua.match(/iPhone\sOS/i) == "iphone os") {
-					var nowClientHeight = document.documentElement.clientHeight || document.body.clientHeight;
-
-					setTimeout(() => {
-						document.body.scrollTop = document.body.scrollHeight - (nowClientHeight / 2)
-					}, 200);
-				} else {
-					setTimeout(function () {
-						e.target.scrollIntoView({behavior: "smooth", block: "end"});
-					}, 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/${i}.gif`) + '"/>'
-							break;
-						}
-					}
-
-					data = data.replace(new RegExp(`\\#\\[${e.substring(2, e.length - 2)}\\]\\/`, 'g'), imgsrc);
-				})
-				return data;
-			},
-
-
-			/*******************************************/
-			// 表情包开关
-			faceClick() {
-				this.meme = !this.meme;
-			},
-
-			/*******************************************/
-			//当表情被点击
-			memeImg(i) {
-				this.text_info = this.text_info + "#" + this.frceArr[i] + "/";
-				//this.text_info = this.text_info + '<img  :src="' + require(`@/assets/${i}.gif`) +'"/>';
-				// console.log( this.text_info);
-			},
-
-			// /*******************************************/
-			// //验证码
-			// initialLoginCode() {
-			//   this.loginCode = "";
-			//   for (let i = 1; i <= 4; i++) {
-			//     this.loginCode =
-			//       this.loginCode + frce.arr[Math.floor(Math.random() * 32)];
-			//   }
-			// },
-
-			/********************************************/
-			//显示隐藏评价
-			is_show_evaluate() {
-				if (this.evaluateState == 100) {
-					this.bottomShow = true;
-				} else {
-					if (!this.haveEvaluation) {
-						this.bottomShow = false;
-					} else {
-						this.$dialog.notify({
-							mes: '亲，您已经评价了...',
-							timeout: 5000,
-							callback: () => {
-								//console.log('我走咯！');
-							}
-						});
-					}
-				}
-			},
-
-			/*******************************************/
-			//切换评价状态
-			evaluateClick(type) {
-				// console.log(type);
-				this.evaluateState = type;
-			},
-
-			/*******************************************/
-			//提交评价信息
-			evaluateEsc() {
-				console.log();
-				if(this.evaluateState != 100){
-					this.bottomShow = false;
-					this.haveEvaluation = true; // 标识已评价
-					this.socket_send(JSON.stringify({type:'evaluate', data:{
-						evaluate_id:this.evaluateState,
-						conversationId:this.conversationId ,
-						// evaluate_content:'' 
-					}}))
-
-					this.$dialog.notify({
-						mes: '感谢你的评价！',
-						timeout: 2000,
-						callback: () => {
-							//console.log('我走咯！');
-						}
-					});
-				}else{
-					this.$dialog.notify({
-						mes: '亲，请选择评价类型...',
-						timeout: 2000,
-						callback: () => {
-							//console.log('我走咯！');
-						}
-					});
-				}
-			},
-
-			/************************************************/
-			//人工聊天初始化
-			setInit() {
-				this.haveEvaluation = false;
-				this.chat = [];
-				this.evaluateState = 100;
-				this.hisSviceChat = [];
-				this.meme = false
-				// this.frceArr = [];//表情包代码
-				this.isConnection = true;
-				this.isExit = false;
-				this.service_info = {
-					avatar: '/static/customer/images/robot.png',
-					job_name: '001',
-					name: '智能客服',
-					signature: " "
-				}
-			},
-
-			/* ****************获取聊天次数****************** */
-			getChatNum() {
-				this.get('/api/index/evaluate/minRound', {
-					headers: {
-						'Content-Type': 'application/x-www-form-urlencoded',
-						'apiToken': this.setApiToken('minround', 'evaluate', this.currentTime[0], 'index')
-					}
-				}).then(res => {
-					if (res.data.code == 1) {
-						this.chatNum = res.data.data.systemconfig_data
-					}
-				})
-			},
-			// 留言知识库返回到主页
-			returnIndex(data) {
-				console.log(data)
-				this.knowledge = data
-			}
-
-		},
-
-		/**
-		 * 视图挂载前
-		 */
-		mounted() {
-			this.source.appuid = this.$public.getQueryString('appuid');//用户标识
-			this.source.appid = this.$public.getQueryString('appid');//用户来源
-			this.frceArr = frce.frce;
-			//console.log(this.source);
-			//页面初始化获取系统时间第一步
-			//console.log(this.$md5('userwordscustomer-servicewords1562169600service'));
-			this.$dialog.loading.open('网络连接中...')
-
-			this.$axios.get('api/index/index/systime?t=' + 100).then(res => {
-				if (res.data.code == 1) {
-					this.logo = res.data.data.logo;
-					this.currentTime = res.data.data.time.split(' ')
-					this.currentTime[0] = (new Date(this.currentTime[0].replace(/-/g, '/')).getTime()) / 1000;
-
-					// console.log( this.currentTime[0] );
-					this.apiToken = this.$md5('customer-service' + this.currentTime[0] + window.location.origin);
-					//匿名注册
-					this.registered();
-					//获取机器人热门问题
-					this.getProblem();
-					//获取配置信息
-					this.getChatNum();
-				}
-			})
-		},
-
-		destroyed() {
-			this.setInit();
-			this.websock.close() //离开路由之后断开websocket连接
-			this.lockReconnect = true;
-			clearTimeout(this.reconnectData);      //离开清除 timeout
-			clearTimeout(this.timeoutObj);         //离开清除 timeout
-			clearTimeout(this.serverTimeoutObj);   //离开清除 timeout
-		},
-		// 计算
-		computed: {
-			inputmsg() {
-				return this.text_info;
-			}
-		},
-		// 监听
-		watch: {},
-		// 组件生命周期结束销毁阶段
-		beforeDestroy() {
-			this.timers = false;
-		}
-	};
-</script>
-
-<style scoped>
-	#textarea {
-		margin: 15px;
-		width: 50%;
-		border: none;
-	}
-	.logo {
-		margin: 0 0.1rem;
-		width: 0.4rem;
-		height: 0.4rem;
-	}
-
-	/* 聊天 */
-	.memeImg {
-		width: 0.6rem;
-		height: 0.6rem;
-		margin: 0.15rem 0.4rem;
-	}
-
-	.dialogueA {
-		padding-left: 0.3rem;
-		padding-right: 0.3rem;
-	}
-
-	.dialogueB {
-		padding-right: 0.3rem;
-		padding-left: 0.3rem;
-	}
-
-	.left {
-		position: relative;
-		z-index: 99;
-		background: #fff;
-	}
-
-	.left::after {
-		position: absolute;
-		content: "";
-		display: inline-block;
-		left: -0.08rem;
-		top: 0.2rem;
-		width: 0.125rem;
-		height: 0.2rem;
-		background: #fff;
-		transform: skewX(30deg);
-		z-index: -1;
-		border-left: 0.02rem solid #dfdfdf;
-		border-top: 0.02rem solid #dfdfdf;
-	}
-
-	.right {
-		position: relative;
-		z-index: 99;
-		background: #5ea0f7;
-		border: 0.02rem solid #5ea0f7;
-	}
-
-	.right::after {
-		position: absolute;
-		content: "";
-		display: inline-block;
-		right: -0.07rem;
-		top: 0.2rem;
-		width: 0.125rem;
-
-		height: 0.2rem;
-		background: #5ea0f7;
-		transform: skewX(-30deg);
-		z-index: -1;
-		border-left: 0.02rem solid #5ea0f7;
-		border-top: 0.02rem solid #5ea0f7;
-	}
-
-	.service {
-		width: 100%;
-		color: #555;
-		font-size: 0.28rem;
-		padding-top: 1rem;
-		background: #f5f5f5;
-	}
-
-	.header {
-		position: fixed;
-		left: 0;
-		top: 0;
-		width: 100%;
-		z-index: 999;
-		height: 1rem;
-		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);
-		font-size: 0.34rem;
-		color: #fff;
-		padding: 0 0.3rem;
-	}
-
-	.main {
-		height: 83vh;
-		overflow-x: hidden;
-		overflow-y: auto;
-		padding: 0 0.3rem;
-	}
-
-	.btn {
-		display: inline-block;
-		padding: 0 0.36rem;
-		text-align: center;
-		line-height: 0.4rem;
-		background: rgba(221, 221, 221, 1);
-		border-radius: 0.3rem;
-		color: #fff;
-		font-size: 0.24rem;
-		max-width: 6rem;
-		margin: 0 auto;
-		margin-top: 0.3rem;
-	}
-
-	.btn .click {
-		color: #5ea0f7;
-	}
-
-	.btnRouter {
-		color: #5ea0f7;
-	}
-
-	.systemDialogue {
-		min-height: 0.8rem;
-		width: 100%;
-	}
-
-	.manUserDialogue {
-		min-height: 1rem;
-	}
-
-	.manPlatformDialogue {
-		min-height: 1rem;
-	}
-
-	.user {
-		padding: 0.2rem;
-		display: inline-block;
-		border-radius: 0.1rem;
-		font-size: 0.28rem;
-		color: #fff;
-	}
-
-	.HeadPortrait {
-		width: 1rem;
-		height: 1rem;
-		/* background: #ddd; */
-		border-radius: 0.1rem;
-	}
-
-	.HeadPortrait img {
-		width: 100%;
-		height: 100%;
-	}
-
-	.icon {
-		width: 0.32rem;
-		height: 0.32rem;
-	}
-
-	.icon-msg {
-		width: 0.32rem;
-		height: 0.32rem;
-		margin: 0 0.1rem;
-	}
-
-	.customerService {
-		background: #ffffff;
-		padding: 0.2rem;
-		display: inline-block;
-		border-radius: 0.1rem;
-		font-size: 0.28rem;
-		border: 1px solid rgba(223, 223, 223, 1);
-	}
-
-	.customerService {
-		/* min-height: 1rem; */
-	}
-
-	.system {
-		width: 100%;
-		border: 0.01rem solid rgba(223, 223, 223, 1);
-		border-radius: 0.1rem;
-	}
-
-	div /deep/ .yd-accordion-head {
-		/* border-radius: 0.1rem; */
-		border-bottom: 0.01rem solid rgb(238, 238, 238);
-		padding: 0 0.2rem;
-	}
-
-	div /deep/ .yd-accordion-title, div /deep/ .yd-accordion-head-arrow {
-		min-height: 0.8rem !important;
-	}
-
-	div /deep/ .yd-textarea textarea {
-		-webkit-user-select: auto;
-	}
-
-	.footer {
-		min-height: 1.2rem;
-		box-shadow: 0px -5px 5px rgba(0, 0, 0, 0.05);
-		background: #fff;
-		width: 100%;
-		position: fixed;
-		bottom: 0;
-		left: 0;
-		z-index: 1000;
-	}
-
-	.input {
-		width: 60%;
-		min-height: 1.2rem;
-		padding-top: 0.4rem;
-		padding-bottom: 0.4rem;
-		border: none;
-		padding-right: 0.3rem;
-		padding-left: 0.3rem;
-		font-size: 0.28rem;
-	}
-
-	.send {
-		width: 40%;
-		position: absolute;
-		right: 0;
-		top: 0;
-		background: #fff;
-		height: 1.2rem;
-	}
-
-	.memeBox {
-		height: 3rem;
-		width: 100%;
-	}
-
-	.send img {
-		vertical-align: middle;
-		margin-right: 0.4rem;
-	}
-
-	.artificial {
-		margin-top: 0.3rem;
-		border: 0.01rem solid #dfdfdf;
-		background: #fff;
-		border-radius: 0.1rem;
-		padding: 0 0.2rem;
-	}
-
-	div /deep/ .yd-accordion-head-arrow:after {
-		border: none;
-		width: 0.3rem;
-		height: 0.3rem;
-		background: url("../assets/addright.png") no-repeat;
-		background-size: 100% 100%;
-		transform: rotate(0deg);
-	}
-
-	div /deep/ .yd-accordion-head-arrow.yd-accordion-rotated:after {
-		transform: rotate(-270deg);
-	}
-
-	div /deep/ .yd-accordion {
-		border-radius: 0.1rem;
-	}
-
-	div /deep/ .yd-accordion-content {
-		border-radius: 0.1rem;
-	}
-
-	.imgSrc img {
-		width: 1.2rem;
-	}
-
-	.leftHader {
-		height: 1rem;
-		background: linear-gradient(
-				90deg,
-				rgba(22, 84, 209, 1) 0%,
-				rgba(9, 52, 173, 1) 100%
-		);
-		box-shadow: 0 0.03rem 0.03rem rgba(0, 0, 0, 0.2);
-		padding: 0 0.3rem;
-	}
-
-	.leftMain-top {
-		margin-top: 0.4rem;
-		font-size: 0.28rem;
-		line-height: 0.45rem;
-		padding: 0 0.3rem;
-		color: #666;
-	}
-
-	.leftMain-top span {
-		color: #999;
-	}
-
-	.leftMain-top > div {
-		width: 50%;
-	}
-
-	.leftMain-center {
-		margin-top: 0.3rem;
-		color: #666;
-		line-height: 0.5rem;
-	}
-
-	.leftMain-chenter span {
-		color: #999;
-		font-size: 0.28rem;
-	}
-
-	.evaluate {
-		height: 1.7rem;
-		background: #fff;
-		border: 0.01rem solid #ddd;
-		border-radius: 0.1rem;
-		color: #666;
-		margin-top: 0.3rem;
-	}
-
-	.evaluateBtn {
-		width: 1.4rem;
-		height: 0.6rem;
-		border: none;
-		background: #f04992;
-		color: #fff;
-		border-radius: 0.1rem;
-	}
-
-	div /deep/ .yd-popup {
-		border-radius: 0.2rem 0.2rem 0 0;
-	}
-
-	div /deep/ .yd-popup-content {
-	}
-
-	.evaluatebtn > div p {
-		height: 50%;
-		width: 100%;
-		text-align: center;
-		margin-top: 0.14rem;
-	}
-
-	.evaluatebtn > div {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-	}
-
-	.evaluateBox {
-		margin: 0 0.2rem;
-		height: 1.5rem;
-		border: 0.01rem solid #ddd;
-		border-radius: 0.1rem;
-		background: #f5f5f5;
-	}
-
-	.evaluateBox textarea {
-		width: 100%;
-		height: 100%;
-		background: #f5f5f5;
-		border: none;
-		border-radius: 0.1rem;
-		padding: 0.2rem;
-		color: #999;
-		font-size: 0.28rem;
-	}
-
-	.sub {
-		margin: 0 0.2rem;
-		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);
-		height: 1rem;
-		font-size: 0.34rem;
-		color: #fff;
-		border-radius: 0.1rem;
-		margin-top: 0.4rem;
-	}
-
-	div /deep/ .yd-popup-content {
-		background: #fff;
-		border-radius: 0.1rem;
-	}
-
-	.loginInput {
-		height: 0.8rem;
-		border: 0.01rem solid #ddd;
-		background: #f5f5f5;
-		border-radius: 0.1rem;
-		margin-top: 0.5rem;
-		padding: 0.2rem;
-		font-size: 0.28rem;
-		margin: 0.2rem;
-		margin-top: 0.5rem;
-		width: 94%;
-		color: #999;
-	}
-
-	/* 留言 */
-	.leave-header {
-		height: 1rem;
-		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);
-		color: #fff;
-		font-size: 0.34rem;
-		padding: 0 0.3rem;
-	}
-
-	.leave-main {
-		height: 10rem;
-		background: #f5f5f5;
-		font-size: 0.28rem;
-		padding: 0.3rem 0.3rem 0.2rem 0.3rem;
-	}
-
-	.leave-main > div {
-		height: 1.3rem;
-		margin-bottom: 0.2rem;
-	}
-
-	.leave-main > div input {
-		height: 0.8rem;
-		border: 0.01rem solid #ddd;
-		border-radius: 0.1rem;
-		background: #fff;
-		padding: 0.2rem;
-		width: 100%;
-		margin-top: 0.1rem;
-	}
-
-	.leave-main-txt {
-		background: #fff;
-		padding: 0.2rem;
-		border: 0.01rem solid #ddd;
-		border-radius: 0.1rem;
-	}
-
-	.imgMsg {
-		height: 1.5rem;
-		padding: 0 0.2rem;
-		margin-top: 0.1rem;
-		font-size: 0.24rem;
-		background: #fff;
-		border: 0.01rem solid #ddd;
-		border-radius: 0.1rem;
-	}
-
-	.yd-cell-box {
-		width: 60%;
-		min-height: 1.2rem;
-
-		border: none;
-		padding-right: 0.3rem;
-		padding-left: 0.3rem;
-		border-bottom: 0.01rem solid rgb(221, 221, 221);
-	}
-
-	div /deep/ .yd-textarea > textarea {
-		height: 1.2rem;
-		font-size: 0.28rem;
-		padding-top: 0.2rem;
-	}
-
-	.yd-textarea {
-		padding: 0;
-	}
-
-	.yd-cell-box {
-		margin: 0;
-	}
-
-	.yd-cell-item {
-		padding: 0;
-	}
-
-	div /deep/ .yd-cell:after {
-		height: 0;
-	}
-
-	div /deep/ .yd-textarea-counter {
-		display: none;
-	}
-
-
-	.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: 80%;
-	}
-
-	.help .prompt {
-		width: 100%;
-	}
-
-	/*
-	*留言知识库
-	 */
-
-</style>
->>>>>>> 5a2030a74cb83271650c3584f527c7613649870a
+<template>
+	<div>
+		<!-- 聊天 -->
+		<div class="service" v-if="!knowledge">
+			<!-- 头部信息 -->
+			<div class="header row allAlignment item-center">
+				<div class="row item-center">
+					<img class="icon" style="margin-right:.2rem;" src="@/assets/Service1.png" @click="leftShow = true">
+					<img class="logo" :src="img_http + logo" alt="">
+					<p>{{service_info.name}}</p>
+
+				</div>
+				<div class="row">
+					<yd-button v-if="isExit" color="#fff" bgcolor="#1d57dd" class="exit" size="mini" type="primary"
+							   @click.native="is_exit()">退出聊天
+					</yd-button>
+					<img class="icon-msg" v-show=" (chat.length -1) > chatNum " @click="is_show_evaluate()"
+						 src="@/assets/Service2.png">
+					<img class="icon-msg" @click="knowledge = true,flag = false" src="@/assets/leaveSwitch.png">
+				</div>
+			</div>
+			<div class="main" id="main">
+
+				<!-- ********************************************************** -->
+				<!-- 机器人聊天板块 -->
+				<div v-if="!link_success">
+					<!-- 系统欢迎语 -->
+					<div v-if="welcome.length > 0" v-for="(item,i) in  welcome" :key="'w'+i">
+						<div class="row allAlignment" style="margin-top:.3rem;">
+							<div class="HeadPortrait row center">
+								<img :src="require('@/assets/headAdvent.png')">
+							</div>
+							<div class="messageWindow dialogueA col-w">
+								<div class="customerService left" v-html="item"></div>
+							</div>
+						</div>
+					</div>
+
+					<!-- 系统消息下拉选择 -->
+					<div class="artificial" v-if="problem.length > 0 && welcome.length > 0">
+						<div class="row item-center allAlignment" style="height:.75rem;border-bottom:.01rem solid #EEE;"
+							 v-for="(item,index) in problem" :key="index" @click="pushMessage(item.robot_content)">
+							<span>{{item.robot_name}}</span>
+							<img style="width:.3rem;height:.3rem;" src="@/assets/addright.png">
+						</div>
+						<div class="row item-center" style="height:.72rem;">
+							<p>以上问题都不是</p>
+							<div style="color:#5EA0F7;padding-left:.1rem;" @click="connectionService">转人工客服</div>
+						</div>
+					</div>
+
+					<!-- 和机器人会话 -->
+					<div v-for="(item,i) in robot" :key="'r'+i">
+						<!-- 和机器人会话互动 -->
+						<div v-if="item.type == 'error'" class="row allAlignment"
+							 style="margin-top:.3rem;">
+							<div class="HeadPortrait row center">
+								<img v-if="item.type == 'error'" :src="require('@/assets/headAdvent.png')">
+							</div>
+							<div class="messageWindow dialogueA col-w">
+								<!-- <div v-if="item.type == '1001'" class="customerService left"
+									 v-html="item.content.text"></div> -->
+								<!-- <div v-if="item.type == 'user'" class="user right imgSrc">
+									<yd-lightbox v-if="item.content.img" style="display:inline-block"
+												 class="row rightAlignment box-img">
+										<yd-lightbox-img :src=" img_http + item.content.img"></yd-lightbox-img>
+									</yd-lightbox> -->
+									<div v-if="item.type == 'error'" class="customerService left">{{item.content.text}}<div style="color:#5EA0F7;padding-left:.1rem;cursor:pointer;" @click="connectionService">转人工客服</div></div>
+								<!-- </div> -->
+							</div>
+							<div class="HeadPortrait row center">
+								<img v-if="item.type == 'user'"
+									 :src="require('@/assets/timg.jpg') ">
+							</div>
+						</div>
+
+
+						<!-- 和机器人会话互动 -->
+						<div v-if="item.type == 'service' || item.type == 'user'" class="row allAlignment"
+							 style="margin-top:.3rem;">
+							<div class="HeadPortrait row center">
+								<img v-if="item.type == 'service'" :src="require('@/assets/headAdvent.png')">
+							</div>
+							<div class="messageWindow dialogueA col-w"
+								 :style="item.type == 'user'?'text-align: right;':''">
+								<div v-if="item.type == 'service'" class="customerService left"
+									 v-html="item.content.text"></div>
+								<div v-if="item.type == 'user'" class="user right imgSrc">
+									<yd-lightbox v-if="item.content.img" style="display:inline-block"
+												 class="row rightAlignment box-img">
+										<yd-lightbox-img :src=" img_http + item.content.img"></yd-lightbox-img>
+									</yd-lightbox>
+									<div v-else v-html="item.content"></div>
+								</div>
+							</div>
+							<div class="HeadPortrait row center">
+								<img v-if="item.type == 'user'"
+									 :src="require('@/assets/timg.jpg') ">
+							</div>
+						</div>
+						<!-- 转人工分组 -->
+						<div class="artificial" v-if="item.type == 'artificial_service' ">
+							<div @click="turnArtificial(items.id)" v-for="(items,indexs) in item.content"
+								 :key="'r'+indexs" class="row item-center allAlignment"
+								 style="height:.75rem;border-bottom:.01rem solid #EEE;">
+								<p>
+									人工客服:
+									<span style="color:#5EA0F7;padding-left:.1rem;">{{items.name}}</span>
+								</p>
+								<img style="width:.3rem;height:.3rem;" src="@/assets/addright.png">
+							</div>
+						</div>
+					</div>
+				</div>
+
+				<!-- ********************************************************** -->
+				<!-- 人工会话模版 -->
+				<div v-if="link_success">
+					<!--历史消息-->
+					<div v-if="showHistory"  v-for="item in hisSviceChat" >
+						<!-- 客服信息 -->
+						<div v-if="item.from_id.startsWith('KF')">
+							<div style="width: 100%;text-align: center;">
+								<span v-if="item.time_line">{{item.time_line}}</span>
+							</div>
+							<div class="row allAlignment" style="margin-top:.3rem;margin-top: 0.3rem;">
+								<div class="HeadPortrait row center">
+									<img v-if="service_info.avatar == '' " :src="avatar_imgs">
+									<img v-if="service_info.avatar != ''" :src="img_http + service_info.avatar ? img_http + service_info.avatar : require('@/assets/user2.png')">
+								</div>
+								<div class="messageWindow dialogueA col-w">
+									<div class="customerService left imgSrc">
+										<yd-lightbox v-if="item.content.img" style="display:inline-block"
+												class="row rightAlignment">
+											<yd-lightbox-img :src=" img_http + item.content.img"></yd-lightbox-img>
+										</yd-lightbox>
+										<div v-html="item.content.text" v-else></div>
+									</div>
+								</div>
+								<div class="HeadPortrait row center">
+
+								</div>
+							</div>
+						</div>
+						<!-- 用户信息 -->
+						<div v-else>
+							<div style="width: 100%;text-align: center;margin-top: 0.3rem;">
+								<span v-if="item.time_line">{{item.time_line}}</span>
+							</div>
+							<div class="row allAlignment" style="margin-top:.3rem;">
+								<div class="HeadPortrait row center">
+
+								</div>
+								<div class="messageWindow dialogueA col-w" style="text-align: right;">
+									<div class="user right imgSrc">
+						
+										<yd-lightbox v-if="item.content.img" style="display:inline-block" class="row rightAlignment">
+											<yd-lightbox-img :src="img_http+item.content.img"></yd-lightbox-img>
+										</yd-lightbox>
+										<span v-html="item.content.text" v-else></span>
+									</div>
+								</div>
+								<div class="HeadPortrait row center">
+									<img :src="require('@/assets/timg.jpg') ">
+								</div>
+							</div>
+						</div>
+					</div>
+			
+					<div  v-for="(item,index) in chat" :key="index">
+
+						<!-- 历史消息 -->
+						<div class="promptBox" v-if="item.type == 'historyMsg'">
+							<div class="prompt help">
+								<span>{{historyMsgtext}}</span>
+							</div>
+						</div>
+						<!-- 客服会话 -->
+						<div v-if="item.type == 'service'">
+							<div style="width: 100%;text-align: center;margin-top: 0.3rem;">
+								<span v-if="item.time ">{{item.time}}</span>
+							</div>
+							<div class="row allAlignment" style="margin-top:.3rem;">
+								<div class="HeadPortrait row center">
+									<img id="123" v-if="service_info.avatar == '' " :src="avatar_imgs">
+									<img id="321" v-if="service_info.avatar != '' " :src="img_http + service_info.avatar ? img_http + service_info.avatar : img_http + service_info.avatar">
+								</div>
+								<div class="messageWindow dialogueA col-w">
+									<div class="customerService left imgSrc">
+										
+										<yd-lightbox v-if="item.content.img" style="display:inline-block"
+													class="row rightAlignment">
+											<yd-lightbox-img :src="img_http + item.content.img"></yd-lightbox-img>
+										</yd-lightbox>
+										<div v-html="item.content.text" v-else></div>
+									</div>
+								</div>
+								<div class="HeadPortrait row center">
+
+								</div>
+							</div>
+						</div>
+
+						<!-- 用户会话 -->
+						<div v-if="item.type == 'user'">
+							<div style="width: 100%;text-align: center;margin-top: 0.3rem;">
+								<span v-if="item.time">{{item.time}}</span>
+							</div>
+							<div class="row allAlignment" style="margin-top:.3rem;">
+								<div class="HeadPortrait row center">
+
+								</div>
+								<div class="messageWindow dialogueA col-w" style="text-align: right;">
+									
+									<div class="user right imgSrc">
+										<yd-lightbox v-if="item.content.img" style="display:inline-block"
+													class="row rightAlignment">
+											<yd-lightbox-img :src="img_http+item.content.img"></yd-lightbox-img>
+										</yd-lightbox>
+										<span v-html="item.content.text" v-else>{{item.content.text}}</span>
+									</div>
+								</div>
+								<div class="HeadPortrait row center">
+									<img v-if="item.type == 'user'"
+										:src="require('@/assets/timg.jpg') ">
+								</div>
+							</div>
+						</div>
+
+						<!-- 常规系统消息评价 -->
+						<div class="row center " v-if="item.type== 'system' ">
+							<div class="column item-center "
+								style="margin: 0.3rem 0; background: #fff; width:100% ;padding: 0.1rem 0;"
+								v-if="item.content.state  =='getEvaluate' && !haveEvaluation ">
+								<p class="row center wrap">{{item.content.text}}</p>
+								<button class="evaluateBtn" style="margin-top:.2rem;" @click="is_show_evaluate()">评价
+								</button>
+							</div>
+
+							<div class="column item-center"
+								style="margin: 0.3rem 0; background: #fff; width:100% ;padding: 0.1rem 0.5rem;"
+								v-if="item.content.state  == 'closeInform' ">
+								<p class="row center wrap">{{item.content.text}}</p>
+							</div>
+
+
+						</div>
+					</div>
+				</div>
+
+				<div v-if="box_height" style="height:65px">
+
+				</div>
+			</div>
+			<!-- 中间弹窗登录 -->
+			<!-- <yd-popup
+			  v-model="centerShow"
+			  position="center"
+			  width="6.9rem"
+			  height="8rem"
+			  :masker-opacity=".2"
+			>
+			  <div class="row rightAlignment" style="padding-top:.2rem;padding-right:.2rem;">
+				<img
+				  @click="centerShow = false"
+				  style="width: 0.32rem;height: 0.32rem;"
+				  src="@/assets/Service5.png"
+				>
+			  </div>
+			  <div class="row center" style="font-size:.56rem;">
+				<p style="color:#F04992;">HX</p>
+				<span style="color:#5EA0F7;">669</span>
+			  </div>
+			  <input class="loginInput" type="text" placeholder="姓名">
+			  <input class="loginInput" type="text" placeholder="手机号">
+			  <input class="loginInput" type="email" placeholder="邮箱地址">
+			  <div class="row" style="margin:0 .2rem;">
+				<input class="loginInput" placeholder="输入验证码" type="text" style="margin:.5rem 0 0 0;">
+				<p
+				  @click="initialLoginCode"
+				  class="row center"
+				  style="width:100%;height:.8rem;margin-top:.5rem;background:#F1E1E0;border-radius: .1rem;margin-left:.2rem;font-size:.3rem;color:#666;"
+				>{{loginCode}}</p>
+			  </div>
+			  <div class="row center sub" style="margin:.5rem .2rem .2rem .2rem;">登录</div>
+			</yd-popup> -->
+
+			<!-- 底部弹窗评价 -->
+			<yd-popup v-model="bottomShow" position="bottom" height="6.5rem" :masker-opacity=".2">
+				<div class="row rightAlignment" style="padding-top:.2rem;padding-right:.2rem;">
+					<img @click.stop="bottomShow = false" style="width: 0.32rem;height: 0.32rem;"
+						 src="@/assets/Service5.png">
+				</div>
+				<div style="color:#666;text-align: center;font-size:.28rem;">感谢您的咨询，请对我们的服务做出评价</div>
+				<div style="height:2.3rem;" class="row allAlignment evaluatebtn">
+					<div style="width:33%;height:100%;">
+						<div class="row wrap center" @click="evaluateClick(1)">
+							<img style="width:.66rem;height:.66rem;"
+								 :src="evaluateState =='1'?require('@/assets/evaluate1a.png'):require('@/assets/evaluate1.png')">
+							<p>满意</p>
+						</div>
+					</div>
+					<div style="width:33%;height:100%;" @click="evaluateClick(2)">
+						<div class="row wrap center">
+							<img style="width:.66rem;height:.66rem;"
+								 :src="evaluateState =='2'?require('@/assets/evaluate2a.png'):require('@/assets/evaluate2.png')">
+							<p>一般</p>
+						</div>
+					</div>
+					<div style="width:33%;height:100%;" @click="evaluateClick(3)">
+						<div class="row wrap center">
+							<img style="width:.66rem;height:.66rem;"
+								 :src="evaluateState =='3'?require('@/assets/evaluate3a.png'):require('@/assets/evaluate3.png')">
+							<p>不满意</p>
+						</div>
+					</div>
+				</div>
+				<!-- <div class="evaluateBox">
+				  <textarea placeholder="评价备注" v-model="evalArea"></textarea>
+				</div> -->
+				<div class="row center sub" @click="evaluateEsc">确定</div>
+			</yd-popup>
+
+			<!-- 左侧弹窗客服信息 -->
+			<yd-popup v-model="leftShow" position="left" width="4.8rem" :masker-opacity=".2">
+				<div class="leftHader row item-center">
+					<img @click="leftShow = false" class="icon" src="@/assets/Service4.png">
+					<img class="logo" :src="img_http + logo" alt="">
+					<p style="color:#FFF;font-size:.34rem;">{{service_info.name}}</p>
+
+
+				</div>
+				<div>
+					<div class="leftMain-top row">
+						<div>
+							<p>
+								<!-- 客服名字 -->
+								<span>姓名:</span>
+								{{service_info.name}}
+							</p>
+							<p>
+								<!-- 客服工号 -->
+								<span>工号:</span>
+								{{service_info.job_name}}
+							</p>
+							<p>
+								<!-- 客服性别 -->
+								<span>性别:</span>
+								保密
+							</p>
+							<p>
+								<!-- 客服职务 -->
+								<span>职务:</span>
+								咨询服务
+							</p>
+						</div>
+						<div class="row center">
+							<img style="width:1.8rem;height:1.8rem;" v-if="service_info.avatar == ''" :src="avatar_imgs">
+							<img style="width:1.8rem;height:1.8rem;" v-if="service_info.avatar != ''" :src="img_http + service_info.avatar">
+						</div>
+					</div>
+					<div class="leftMain-chenter"
+						 style="padding:0 .3rem;margin-top:.3rem;padding-bottom:.6rem;border-bottom:.01rem solid #ddd;"
+					>
+						<!-- 客服个性签名 -->
+						<span>个性签名：</span>
+						{{service_info.signature}}
+					</div>
+					<!-- 广告图 -->
+					<div class="leftMain-bottom row center" style="padding:0 .3rem;margin-top:.6rem;">
+						<a :href="'http://'+advertisement.advertisement_url" target="_blank" rel="noopener noreferrer">
+							<img style="width:4.2rem;height:7rem;" :src="img_http+advertisement.advertisement_img">
+						</a>
+					</div>
+				</div>
+			</yd-popup>
+			<!-- 底部输入框 -->
+			<div class="footer row wrap" id='input_box'>
+					<!-- @keydown="inputNumFun()" -->
+				<textarea
+					id="textarea"
+					v-model.trim="text_info"
+					placeholder="请输入你的问题："
+					maxlength="100"
+				>
+				</textarea>
+
+				<div class="send row item-center" style="border-bottom:.01rem solid #ddd">
+					<img
+							:src="meme?require('@/assets/faceActive.png'):require('@/assets/face.png')"
+							@click="faceClick"
+							style="width:.48rem;height:.48rem"
+					>
+					<input type="file" id="file" @change="uploadIMG" accept="image/jpeg,image/jpg,image/png,image/svg"
+						   style="display:none">
+					<label for="file">
+						<img src="@/assets/imge.png" style="width:.46rem;height:.42rem">
+					</label>
+					<div
+							@click="send()"
+							style="color:#ccc;border:.02rem solid #ddd;width:1rem;height:.66rem;border-radius:.1rem;"
+							:style="text_info.length>0?'background:#5EA0F7;color:#fff;':''"
+							class="row center"
+					>发送
+					</div>
+				</div>
+				<!-- 表情包 -->
+				<div v-show="meme" class="memeBox">
+					<yd-slider autoplay="0" :loop="false">
+						<yd-slider-item>
+							<div>
+								<ul style="width:100%;padding-bottom:.3rem;" class="row average wrap">
+									<li v-for="(item,index) in frceArr" :key="index" v-show="index<15">
+										<img
+												class="memeImg"
+												:src="require(`@/assets/${index}.gif`)"
+												@click="memeImg(index)"
+										>
+									</li>
+								</ul>
+							</div>
+						</yd-slider-item>
+						<yd-slider-item>
+							<div>
+								<ul style="width:100%;padding-bottom:.3rem;" class="row average wrap">
+									<li v-for="(item,index) in frceArr" :key="index" v-show="index>15&&index<=30">
+										<img
+												class="memeImg"
+												:src="require(`@/assets/${index}.gif`)"
+												@click="memeImg(index)"
+										>
+									</li>
+								</ul>
+							</div>
+						</yd-slider-item>
+						<yd-slider-item>
+							<div>
+								<ul style="width:100%;padding-bottom:.3rem;" class="row average wrap">
+									<li v-for="(item,index) in frceArr" :key="index" v-show="index>30&&index<=45">
+										<img
+												class="memeImg"
+												:src="require(`@/assets/${index}.gif`)"
+												@click="memeImg(index)"
+										>
+									</li>
+								</ul>
+							</div>
+						</yd-slider-item>
+						<yd-slider-item>
+							<div>
+								<ul style="width:100%;padding-bottom:.3rem;" class="row average wrap">
+									<li v-for="(item,index) in frceArr" :key="index" v-show="index>45&&index<=60">
+										<img
+												class="memeImg"
+												:src="require(`@/assets/${index}.gif`)"
+												@click="memeImg(index)"
+										>
+									</li>
+								</ul>
+							</div>
+						</yd-slider-item>
+						<yd-slider-item>
+							<div>
+								<ul style="width:100%;padding-bottom:.3rem;" class="row average wrap">
+									<li v-for="(item,index) in frceArr" :key="index" v-show="index>60">
+										<img
+												class="memeImg"
+												:src="require(`@/assets/${index}.gif`)"
+												@click="memeImg(index)"
+										>
+									</li>
+								</ul>
+							</div>
+						</yd-slider-item>
+					</yd-slider>
+				</div>
+			</div>
+		</div>
+		<!-- 留言知识库 -->
+		<div v-if="knowledge">
+			<!-- 接收返回消息 -->
+			<knowledgeLibrary @returnIndex="returnIndex" :currentTime="currentTime"/>
+		</div>
+	</div>
+</template>
+
+<script>
+	import "../css/index.css";
+	import knowledgeLibrary from './knowledgeLibrary'
+	import frce from "./frce.js";
+	import avatarImgs from "./../assets/user.png"
+	import defaultImgs from "./../assets/timg.jpg"
+
+	export default {
+		name: "service",
+		// 模板注册
+		components: {
+			knowledgeLibrary
+		},
+		data() {
+			return {
+				/*-----------------------------------------------*/
+				text_info: "", //输入框内容
+				knowledge: false,//留言知识库开关
+				leftShow: false, //左侧详细开关
+				evaluateOnOff: false, //人工客服评价通知
+				bottomShow: false, //底部评价弹窗开关
+				meme: false, // 表情包开关
+				frceArr: [], //表情包代码
+				evaluateState: 100,//评价状态
+				websock: null,//创建websock
+				user_info: '',//用户信息
+				apiToken: '',//通话调用凭证
+				currentTime: '',//接口调用服务器时间
+				problem: [],//机器人问题
+				welcome: [],//欢迎语
+				advertisement: '', //广告
+				img_http: 'http://103.108.43.176:8080',//图片路径域
+				//img_http:'http://192.168.2.186:8090',//图片路径域
+
+				robot: [],//和机器人聊天临时数据
+				chat: [],//人工会话
+				error_num: 1001,//机器人回答超出能力之外编号
+				isConnection: true,//人工分组列表开关
+				//客服信息
+				service_info: {
+					avatar: '/static/customer/images/robot.png',
+					job_name: '001',
+					name: '智能客服',
+					signature: ""
+				},
+				link_success: false,//人工链接成功
+				conversationId: '',//会话工单
+				chatNum: 0,//触发评价按钮条件
+				haveEvaluation: false,//是否已评价
+				evalArea: '', //评价备注
+				source: {},//来源信息
+				initData: 1,//
+				isTurnArtifcial: true,
+				box_height: false,//苹果浏览器增加会话框高度
+				logo: '',
+				isExit: false,
+				historyMsg: false, // 是否展示历史信息
+				historyMsgtext: "", // 历史信息内容提示
+				hisSviceChat: [],
+				showHistory:true,
+				avatar_imgs:avatarImgs,
+				webTime:'',//人工会话上一次发送消息时间
+				chatIndex:'',//人工会话上一次下标
+				/*****************websockt心跳变量*******************/
+				reconnectData: null,
+				lockReconnect: false,    //避免重复连接，因为onerror之后会立即触发 onclose
+				timeout: 5000,          //5s一次心跳检测
+				timeoutObj: null,
+				serverTimeoutObj: null,
+			};
+		},
+		// 方法
+		methods: {
+			// 退出聊天
+			is_exit() {
+				this.socket_send(JSON.stringify({
+					type: 'kfCloseUser',
+					data: {
+						to_id: this.user_info.id,
+						kf_id: this.service_info.id,
+						group_id: this.service_info.group,
+						conversationId: this.conversationId,
+						type: 6,
+					}
+				}));
+
+
+				// this.websock.close()
+				// this.setInit();
+				// this.initWebsocket()
+				
+
+			},
+			/*******************************************/
+			//设置token加密
+			setApiToken(name, controller, time, modules) {
+				let txetVal = name + 'customer-service' + controller + time + modules;
+				let sssd = txetVal.toLowerCase();
+				return this.$md5(txetVal.toLowerCase());
+			},
+
+			/*******************************************/
+			//初始化Websocket链接
+			initWebsocket(apiToken) {
+				let sock_ip = ''; // 线上
+				// let sock_ip = 'ws://192.168.2.187:9101';  // 本地
+
+				this.websock = new WebSocket("ws://103.108.43.176:9101?apiToken=" + apiToken);
+				//数据返回
+				this.websock.onmessage = this.socket_message;
+				//数据发送
+				this.websock.onopen = this.socket_open;
+				//重新链接
+				this.websock.onerror = this.socket_error;
+				//关闭链接
+				this.websock.onclose = this.socket_close;
+			},
+
+			/*******************************************/
+			//连接建立之后执行send方法发送数据
+			socket_open() {
+				console.log('我链接了');
+			},
+
+			/*******************************************/
+			//连接建立失败重连
+			socket_error() {
+				console.log('连接建立失败重连');
+				// this.initWebSocket();
+				// this.setInit();
+				// this.reconnect();
+			},
+
+			/*******************************************/
+			//数据接收
+			socket_message(e) {
+				if (!e.data) return;
+				const redata = JSON.parse(e.data);
+				console.log(redata);
+				//心跳检测
+				this.heatBeat();
+				//欢迎语
+				if (redata.message_type == 'helloMessage') {
+					this.isTurnArtifcial = true;
+					if (this.initData == 1) {
+						this.welcome.push(redata.data.content);
+						//this.welcome.push('请点击您想咨询的问题，若都不是，请在输入框直接输入');
+					}
+				}
+				//广告语
+				if (redata.message_type == 'advertisement') {
+					this.advertisement = redata.data[0]
+				}
+
+				//机器人回复
+				if (redata.message_type == "robotMessage") {
+					// console.log(redata);
+					if (redata.data.content == "error") {
+						this.robot.push({
+							type:'error',
+							content: {text: "您的问题暂无法处理"}
+						})
+						// this.error_num++;
+					} else {
+						this.robot.push({
+							type: 'service',
+							content: {text: redata.data.content}
+						})
+					}
+					console.log(this.robot);
+					// this.automaticRolling();
+					//data
+					//this.robot =
+				}
+
+
+				//人工链接
+				if (redata.message_type == 'connect') {
+					let server= {};
+					if (redata.data) {
+						server = redata.data
+					} else {
+						server = {
+							conversationId: redata.data.conversationId,
+							kf_id: redata.data.kf_id,
+							kf_name: "",
+							serverInfo: {
+								avatar: avatarImgs,
+								client_id:"",
+								group:"",
+								id: "",
+								intime:"",
+								job_name: "",
+								name: "tank",
+								signature: "",
+								status: 0,
+								task: 0,
+							}
+
+						}
+					}
+					this.isExit = true;
+					this.link_success = true;
+					this.$dialog.loading.close();
+					this.service_info = server.serverInfo;
+					this.conversationId = server.conversationId;
+				}
+
+				//人工会话回复
+				if (redata.message_type == "chatMessage") {
+					// 转接的时候清除历史信息
+					// this.hisSviceChat = [];
+					// this.getHistory = false;
+					this.$dialog.loading.close();
+					let obj = {};
+					let isSession = false;
+					if (this.$public.isJSON(redata.data.content)) {
+						obj = JSON.parse(redata.data.content);
+						obj.text = this.turnFace(obj.text);
+						isSession = true;
+					} else {
+						obj.text = redata.data.content;
+					}
+
+					let thisTime ='';
+					let newTime = redata.data.time.split(':');
+					if(this.webTime){
+						let lastTime  = this.webTime.split(":");
+							if(newTime[0] == lastTime[0] &&  newTime[1] < (lastTime[1]+2)){
+								thisTime = ''
+							}else{
+								thisTime = redata.data.time;
+							}
+					}else{
+						if(isSession){
+							thisTime = redata.data.time;
+						}
+					}
+					if(isSession){
+						this.webTime = redata.data.time;
+					}
+					this.chat.push({
+						type: 'service',
+						time: thisTime  ? thisTime: '',
+						content: obj
+					})
+					// this.setNum++;
+				}
+				//系统消息通知客户结束通话
+				if (redata.message_type == 'closeBysever') {
+					this.setInit();
+					this.showHistory = false;
+					this.link_success = false;
+					this.isTurnArtifcial =true;
+				}
+
+				if(redata.message_type == "changeKeFuSuccess"){
+					this.$dialog.alert({
+						mes: redata.data.content
+					});
+				}
+
+				//系统消息通转人工
+				if (redata.message_type == 'notice') {
+					this.$dialog.loading.close();
+					this.isTurnArtifcial = true;
+					let _this = this;
+					this.$dialog.alert({
+						mes: redata.content, callback: () => {
+							this.initData = 100;
+							// _this.$dialog.loading.open('数据加载中...');
+							// setTimeout(() => {
+							// 	_this.$dialog.loading.close();
+							// 	// _this.registered();
+							// }, 2000);
+						}
+					});
+				}
+
+				//系统消息评价
+				if (redata.message_type == "getEvaluate") {
+					// this.evaluateOnOff = true;
+					// console.log( this.chat)
+					this.chat.push({
+						type: 'system',
+						content: {
+							text: redata.data.content,
+							state: 'getEvaluate',
+						}
+					})
+				}
+
+				//会话关闭前通知用户
+				if (redata.message_type == 'overtime') {
+					this.chat.push({
+						type: 'system',
+						content: {
+							text: redata.data.content,
+							state: 'closeInform',
+						}
+					})
+				}
+
+				// 历史信息
+				if (redata.message_type == 'toOld') {
+					// console.log(redata, '历史信息')
+					this.hisSviceChat = [];
+					let obj = redata;
+					this.historyMsgtext = obj.data.content;
+					this.chat.push({
+						type: 'historyMsg',
+						content: {
+							text: this.historyMsgtext,
+						}
+					})
+					let historyTime = '';
+					obj.data.chatLog.forEach(res => {
+						// console.log(res,'历史信息');
+						res.content = JSON.parse(res.content);
+						let time_line = this.$public.customFormatDateTime(res.time_line,'',3);
+						// res.time_line  = 
+						if(!historyTime){
+							res.time_line  = time_line
+						}else{
+							let newTime = time_line.split(':');
+							let lastTime = historyTime.split(':');
+							if(newTime[0]==lastTime[0] && newTime[1] < (lastTime[1]+2)){
+								res.time_line = '';
+							}else{
+								res.time_line  = time_line
+							}
+						}
+						historyTime = time_line; 
+						this.hisSviceChat.push(res);
+					})
+
+
+				}
+
+				//获取发送时间
+				if(redata.message_type  == "webTime"){
+					if(this.webTime){
+						let newTime = redata.data.webTime.split(':');
+						let time = this.webTime.split(':');
+					
+						if(newTime[0]*1 > time[0]*1 ){
+							// console.log('newTime[0]')
+							this.$set(this.chat[this.chatIndex],'time',redata.data.webTime);
+						}else if(newTime[0]*1  ==  time[0]*1 && (newTime[1]*1 - time[1]*1) > 2 ){
+							this.$set(this.chat[this.chatIndex],'time',redata.data.webTime);
+							// console.log('newTime[1]')
+						}
+					}else{
+						this.chat[this.chatIndex].time =  redata.data.webTime;
+						// this.$set(this.chat[this.chatIndex],'time',redata.data.webTime);	
+					}
+					this.webTime = redata.data.webTime
+				}
+
+				//屏幕滚动
+				this.automaticRolling();
+			},
+
+			/*******************************************/
+			//数据发送
+			socket_send(Data) {
+				this.websock.send(Data);
+			},
+
+
+
+			/*******************************************/
+			//关闭
+			socket_close(e) {
+				console.log('断开连接', e);
+				this.initData = 100;
+				this.link_success = false;
+				this.setInit();
+				this.reconnect();
+				// this.registered();
+				// this.websock.close()
+			},
+
+
+			/***************************************/
+			//socket重连
+			reconnect() {
+				if (this.lockReconnect) {       //这里很关键，因为连接失败之后之后会相继触发 连接关闭，不然会连接上两个 WebSocket
+					return
+				}
+				this.lockReconnect = true;
+				this.reconnectData && clearTimeout(this.reconnectData);
+				this.reconnectData = setTimeout(() => {
+					this.initWebSocket(this.apiToken);
+					//this.registered()
+					console.log('-----lail-----');
+					this.lockReconnect = false;
+				}, 2000)
+			},
+
+			/*************************************/
+			//心跳检测
+			heatBeat() {
+				this.timeoutObj && clearTimeout(this.timeoutObj);
+				this.serverTimeoutObj && clearTimeout(this.serverTimeoutObj);
+				this.timeoutObj = setTimeout(() => {
+					// console.log('发送', {type: 'ping'});
+					this.socket_send(JSON.stringify({type: 'ping'}))   //根据后台要求发送
+					this.serverTimeoutObj = setTimeout(() => {
+						// console.log('------close-------') 
+						this.websock.close(); //如果 4秒之后我们没有收到 后台返回的心跳检测数据 断开socket，断开后会启动重连机制
+					}, 4000);
+				}, this.timeout)
+			},
+
+			/*****************************************/
+			//用户匿名注册
+			registered() {
+				let token = localStorage.getItem('token');
+
+				let appuid = this.$public.getQueryString('appuid');
+				let tutype = this.$public.getQueryString('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'),
+				}
+
+				let obj = {
+					headers: {
+						"apiToken": this.setApiToken('autoReg', 'register', this.currentTime[0], 'index')
+					}
+				}
+
+				this.post('api/index/register/autoReg', data, obj).then(res => {
+					if(res.data.code == 0){
+						this.$dialog.alert({
+							mes: res.data.msg
+						});
+					}else if (res.data.code == 1) {
+						this.user_info = res.data.data;
+						// console.log(this.user_info)
+						// 游客 token
+						localStorage.setItem("token", res.data.data.token);
+						localStorage.setItem("tutype", res.data.tutype);
+						//Websocket链接
+
+						setTimeout(() => {
+							this.$dialog.loading.close();
+							this.initWebsocket(this.apiToken);
+						}, 2000)
+						//console.log(res.data.data)
+					}
+				})
+			},
+
+			/******************************************/
+			//获取热门问题
+			getProblem() {
+				let obj = {
+					headers: {
+						// 'Content-Type': 'application/x-www-form-urlencoded',
+						"apiToken": this.setApiToken('index', 'robot', this.currentTime[0], 'index')
+					}
+				}
+				this.post('api/index/robot/index', {groups_id: 1, robotgroups_id: 1}, obj).then(res => {
+					//console.log(res.data.data);
+					this.problem = res.data.data;
+				})
+			},
+
+			/*******************************************/
+			//推送机器人消息
+			pushMessage(e) {
+				this.robot.push({
+					type: 'service',
+					content: {text: e}
+				});
+				this.automaticRolling();
+			},
+
+			/*******************************************/
+			//转人工
+			turnArtificial(id) {
+				this.group = id;
+				this.$dialog.loading.open('转接中...')
+				if (this.isTurnArtifcial) {
+					let data = {
+						'type': 'userInit',
+						data: {
+							'uid': this.user_info.id,
+							'name': this.user_info.name,
+							'avatar': this.user_info.avatar,
+							'group': this.group
+						}
+					}
+					this.socket_send(JSON.stringify(data));
+					this.isTurnArtifcial = false
+				}
+			},
+
+			/******************************************/
+			// 消息发送
+			send() {
+				if (this.text_info == '') return;
+				let str = this.text_info;
+				let formatStr = str.replace(/\n|\r\n/g, "<br>");
+				let type = 'toRobot';
+				let data = {};
+				let obj = {
+					text: formatStr,
+					img: '',
+					type: ''
+				}
+				this.meme = false;
+				// console.log(JSON.stringify(obj))
+				//和人工发送消息
+				if (this.link_success) {
+					// if(this.getHistory){
+					// 	this.getHistory = false;
+					// }
+					data = {
+						from_name: this.user_info.name,
+						content: JSON.stringify(obj),
+						from_id: this.user_info.id,
+						avatar: '',
+						to_id: this.service_info.id,
+						to_name: this.service_info.name,
+						conversationId: this.conversationId,
+					}
+					type = 'chatMessage';
+					this.chatIndex = this.chat.length;
+					this.chat.push({
+						type: 'user',
+						time:'',
+						content: {text: this.turnFace(obj.text)}
+					})
+				} else {//和机器人聊天
+					data = {
+						groups_id: '1',
+						robot_name: formatStr,
+						robotgroups_id: '1',
+					}
+
+					// console.log(this.turnFace(formatStr));
+					type = 'toRobot';
+					//本地存放数据
+					this.robot.push({
+						type: 'user',
+						content: this.turnFace(formatStr) //obj
+					})
+				}
+				this.socket_send(JSON.stringify({type, data}))
+				this.text_info = '';
+				this.automaticRolling();
+				// console.log(data)
+			},
+
+			/*******************************************/
+			//获取转接人工客服列表
+			connectionService() {
+				// if (!this.isConnection) return
+				let obj = {
+					headers: {
+						"apiToken": this.setApiToken('index', 'groups', this.currentTime[0], 'index')
+					}
+				}
+				// this.isConnection = false;
+				//api
+				this.get('api/index/groups/index', obj).then(res => {
+					if (res.data.code == 1) {
+						this.robot.push({
+							type: 'artificial_service',
+							content: res.data.data
+						});
+						this.automaticRolling();
+					}
+				})
+				//this.hintSwitch.connection = true; //系统提示开关激活
+				// 此处为请求
+			},
+
+			/*******************************************/
+			//发送消息后自动滚动高度
+			automaticRolling() {
+				this.$nextTick(() => {
+					let msg = document.getElementById('main') // 获取对象
+					// let input_box = document.getElementById('input_box') // 获取对象
+
+					//判断是否是苹果手机自代浏览器
+					if (/Safari/.test(navigator.userAgent) && /Chrome/.test(navigator.userAgent)) {
+						this.box_height = true; //input_box+'px';
+					}
+
+					msg.scrollTop = msg.scrollHeight // 滚动高度
+
+				})
+			},
+
+			/*******************************************/
+			//图片发送
+			uploadIMG(e) {
+				//console.log(e);
+				let self = this;
+				let files = e.target.files || e.dataTransfer.files;
+				if (!files.length) return;
+				let picavalue = files[0];
+				const isJPG = file.type == 'image/jpeg' || 'image/jpg' || 'image/png' || 'image/svg';
+				const isLt2M = picavalue.size / 1000 / 1000 > 2;
+
+				if (isLt2M) {
+					this.$dialog.notify({
+						mes: '图片过大不支持上传哦！',
+						timeout: 2000,
+					});
+				}else if(!isJPG){
+					this.$dialog.notify({
+						mes: '只能上传图片哦！',
+						timeout: 2000,
+					});
+				}else {
+					this.$public.imgPreview(picavalue, function (imgSrc, formData) {
+						// let img = imgSrc;
+
+						// 数据结构请求
+						self.post('api/index/upload/uploadImg', formData).then(res => {
+							// console.log(res.data.code)
+							if (res.data.code == 1) {
+								let type = 'toRobot';
+								let data = {};
+								let obj = {
+									text: '',
+									img: res.data.data.src,
+									type: ''
+								}
+								if (self.link_success) {
+									//和人工聊天发送图片
+									data = {
+										from_name: self.user_info.name,
+										content: JSON.stringify(obj),
+										from_id: self.user_info.id,
+										avatar: '',
+										to_id: self.service_info.id,
+										to_name: self.service_info.name,
+										conversationId: self.conversationId,
+									}
+									type = 'chatMessage';
+									//本地储存
+									self.chat.push({
+										type: 'user',
+										content: {img: res.data.data.src}
+									});
+								} else {
+									//和机器发送图片
+									data = {
+										groups_id: '1',
+										robot_name: res.data.data.src,
+										robotgroups_id: '1',
+									}
+									type = 'toRobot';
+									//本地储存
+									self.robot.push({
+										type: 'user',
+										content: {img: res.data.data.src}
+									});
+								}
+								self.socket_send(JSON.stringify({type, data}))
+								self.automaticRolling();
+							}
+						})
+					});
+				}
+			},
+
+			/*******************************************/
+			//手机弹窗处理
+			inputShow(e) {
+				//console.log('a')
+				let ua = navigator.userAgent.toLowerCase();
+				if (ua.match(/iPhone\sOS/i) == "iphone os") {
+					var nowClientHeight = document.documentElement.clientHeight || document.body.clientHeight;
+
+					setTimeout(() => {
+						document.body.scrollTop = document.body.scrollHeight - (nowClientHeight / 2)
+					}, 200);
+				} else {
+					setTimeout(function () {
+						e.target.scrollIntoView({behavior: "smooth", block: "end"});
+					}, 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/${i}.gif`) + '"/>'
+							break;
+						}
+					}
+
+					data = data.replace(new RegExp(`\\#\\[${e.substring(2, e.length - 2)}\\]\\/`, 'g'), imgsrc);
+				})
+				return data;
+			},
+
+
+			/*******************************************/
+			// 表情包开关
+			faceClick() {
+				this.meme = !this.meme;
+			},
+
+			/*******************************************/
+			//当表情被点击
+			memeImg(i) {
+				this.text_info = this.text_info + "#" + this.frceArr[i] + "/";
+				//this.text_info = this.text_info + '<img  :src="' + require(`@/assets/${i}.gif`) +'"/>';
+				// console.log( this.text_info);
+			},
+
+			// /*******************************************/
+			// //验证码
+			// initialLoginCode() {
+			//   this.loginCode = "";
+			//   for (let i = 1; i <= 4; i++) {
+			//     this.loginCode =
+			//       this.loginCode + frce.arr[Math.floor(Math.random() * 32)];
+			//   }
+			// },
+
+			/********************************************/
+			//显示隐藏评价
+			is_show_evaluate() {
+				if (this.evaluateState == 100) {
+					this.bottomShow = true;
+				} else {
+					if (!this.haveEvaluation) {
+						this.bottomShow = false;
+					} else {
+						this.$dialog.notify({
+							mes: '亲，您已经评价了...',
+							timeout: 5000,
+							callback: () => {
+								//console.log('我走咯！');
+							}
+						});
+					}
+				}
+			},
+
+			/*******************************************/
+			//切换评价状态
+			evaluateClick(type) {
+				// console.log(type);
+				this.evaluateState = type;
+			},
+
+			/*******************************************/
+			//提交评价信息
+			evaluateEsc() {
+				console.log();
+				if(this.evaluateState != 100){
+					this.bottomShow = false;
+					this.haveEvaluation = true; // 标识已评价
+					this.socket_send(JSON.stringify({type:'evaluate', data:{
+						evaluate_id:this.evaluateState,
+						conversationId:this.conversationId ,
+						// evaluate_content:'' 
+					}}))
+
+					this.$dialog.notify({
+						mes: '感谢你的评价！',
+						timeout: 2000,
+						callback: () => {
+							//console.log('我走咯！');
+						}
+					});
+				}else{
+					this.$dialog.notify({
+						mes: '亲，请选择评价类型...',
+						timeout: 2000,
+						callback: () => {
+							//console.log('我走咯！');
+						}
+					});
+				}
+			},
+
+			/************************************************/
+			//人工聊天初始化
+			setInit() {
+				this.haveEvaluation = false;
+				this.chat = [];
+				this.evaluateState = 100;
+				this.hisSviceChat = [];
+				this.meme = false
+				// this.frceArr = [];//表情包代码
+				this.isConnection = true;
+				this.isExit = false;
+				this.service_info = {
+					avatar: '/static/customer/images/robot.png',
+					job_name: '001',
+					name: '智能客服',
+					signature: " "
+				}
+			},
+
+			/* ****************获取聊天次数****************** */
+			getChatNum() {
+				this.get('/api/index/evaluate/minRound', {
+					headers: {
+						'Content-Type': 'application/x-www-form-urlencoded',
+						'apiToken': this.setApiToken('minround', 'evaluate', this.currentTime[0], 'index')
+					}
+				}).then(res => {
+					if (res.data.code == 1) {
+						this.chatNum = res.data.data.systemconfig_data
+					}
+				})
+			},
+			// 留言知识库返回到主页
+			returnIndex(data) {
+				console.log(data)
+				this.knowledge = data
+			}
+
+		},
+
+		/**
+		 * 视图挂载前
+		 */
+		mounted() {
+			this.source.appuid = this.$public.getQueryString('appuid');//用户标识
+			this.source.appid = this.$public.getQueryString('appid');//用户来源
+			this.frceArr = frce.frce;
+			//console.log(this.source);
+			//页面初始化获取系统时间第一步
+			//console.log(this.$md5('userwordscustomer-servicewords1562169600service'));
+			this.$dialog.loading.open('网络连接中...')
+
+			this.$axios.get('api/index/index/systime?t=' + 100).then(res => {
+				if (res.data.code == 1) {
+					this.logo = res.data.data.logo;
+					this.currentTime = res.data.data.time.split(' ')
+					this.currentTime[0] = (new Date(this.currentTime[0].replace(/-/g, '/')).getTime()) / 1000;
+
+					// console.log( this.currentTime[0] );
+					this.apiToken = this.$md5('customer-service' + this.currentTime[0] + window.location.origin);
+					//匿名注册
+					this.registered();
+					//获取机器人热门问题
+					this.getProblem();
+					//获取配置信息
+					this.getChatNum();
+				}
+			})
+		},
+
+		destroyed() {
+			this.setInit();
+			this.websock.close() //离开路由之后断开websocket连接
+			this.lockReconnect = true;
+			clearTimeout(this.reconnectData);      //离开清除 timeout
+			clearTimeout(this.timeoutObj);         //离开清除 timeout
+			clearTimeout(this.serverTimeoutObj);   //离开清除 timeout
+		},
+		// 计算
+		computed: {
+			inputmsg() {
+				return this.text_info;
+			}
+		},
+		// 监听
+		watch: {},
+		// 组件生命周期结束销毁阶段
+		beforeDestroy() {
+			this.timers = false;
+		}
+	};
+</script>
+
+<style scoped>
+	#textarea {
+		margin: 15px;
+		width: 50%;
+		border: none;
+	}
+	.logo {
+		margin: 0 0.1rem;
+		width: 0.4rem;
+		height: 0.4rem;
+	}
+
+	/* 聊天 */
+	.memeImg {
+		width: 0.6rem;
+		height: 0.6rem;
+		margin: 0.15rem 0.4rem;
+	}
+
+	.dialogueA {
+		padding-left: 0.3rem;
+		padding-right: 0.3rem;
+	}
+
+	.dialogueB {
+		padding-right: 0.3rem;
+		padding-left: 0.3rem;
+	}
+
+	.left {
+		position: relative;
+		z-index: 99;
+		background: #fff;
+	}
+
+	.left::after {
+		position: absolute;
+		content: "";
+		display: inline-block;
+		left: -0.08rem;
+		top: 0.2rem;
+		width: 0.125rem;
+		height: 0.2rem;
+		background: #fff;
+		transform: skewX(30deg);
+		z-index: -1;
+		border-left: 0.02rem solid #dfdfdf;
+		border-top: 0.02rem solid #dfdfdf;
+	}
+
+	.right {
+		position: relative;
+		z-index: 99;
+		background: #5ea0f7;
+		border: 0.02rem solid #5ea0f7;
+	}
+
+	.right::after {
+		position: absolute;
+		content: "";
+		display: inline-block;
+		right: -0.07rem;
+		top: 0.2rem;
+		width: 0.125rem;
+
+		height: 0.2rem;
+		background: #5ea0f7;
+		transform: skewX(-30deg);
+		z-index: -1;
+		border-left: 0.02rem solid #5ea0f7;
+		border-top: 0.02rem solid #5ea0f7;
+	}
+
+	.service {
+		width: 100%;
+		color: #555;
+		font-size: 0.28rem;
+		padding-top: 1rem;
+		background: #f5f5f5;
+	}
+
+	.header {
+		position: fixed;
+		left: 0;
+		top: 0;
+		width: 100%;
+		z-index: 999;
+		height: 1rem;
+		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);
+		font-size: 0.34rem;
+		color: #fff;
+		padding: 0 0.3rem;
+	}
+
+	.main {
+		height: 83vh;
+		overflow-x: hidden;
+		overflow-y: auto;
+		padding: 0 0.3rem;
+	}
+
+	.btn {
+		display: inline-block;
+		padding: 0 0.36rem;
+		text-align: center;
+		line-height: 0.4rem;
+		background: rgba(221, 221, 221, 1);
+		border-radius: 0.3rem;
+		color: #fff;
+		font-size: 0.24rem;
+		max-width: 6rem;
+		margin: 0 auto;
+		margin-top: 0.3rem;
+	}
+
+	.btn .click {
+		color: #5ea0f7;
+	}
+
+	.btnRouter {
+		color: #5ea0f7;
+	}
+
+	.systemDialogue {
+		min-height: 0.8rem;
+		width: 100%;
+	}
+
+	.manUserDialogue {
+		min-height: 1rem;
+	}
+
+	.manPlatformDialogue {
+		min-height: 1rem;
+	}
+
+	.user {
+		padding: 0.2rem;
+		display: inline-block;
+		border-radius: 0.1rem;
+		font-size: 0.28rem;
+		color: #fff;
+	}
+
+	.HeadPortrait {
+		width: 1rem;
+		height: 1rem;
+		/* background: #ddd; */
+		border-radius: 0.1rem;
+	}
+
+	.HeadPortrait img {
+		width: 100%;
+		height: 100%;
+	}
+
+	.icon {
+		width: 0.32rem;
+		height: 0.32rem;
+	}
+
+	.icon-msg {
+		width: 0.32rem;
+		height: 0.32rem;
+		margin: 0 0.1rem;
+	}
+
+	.customerService {
+		background: #ffffff;
+		padding: 0.2rem;
+		display: inline-block;
+		border-radius: 0.1rem;
+		font-size: 0.28rem;
+		border: 1px solid rgba(223, 223, 223, 1);
+	}
+
+	.customerService {
+		/* min-height: 1rem; */
+	}
+
+	.system {
+		width: 100%;
+		border: 0.01rem solid rgba(223, 223, 223, 1);
+		border-radius: 0.1rem;
+	}
+
+	div /deep/ .yd-accordion-head {
+		/* border-radius: 0.1rem; */
+		border-bottom: 0.01rem solid rgb(238, 238, 238);
+		padding: 0 0.2rem;
+	}
+
+	div /deep/ .yd-accordion-title, div /deep/ .yd-accordion-head-arrow {
+		min-height: 0.8rem !important;
+	}
+
+	div /deep/ .yd-textarea textarea {
+		-webkit-user-select: auto;
+	}
+
+	.footer {
+		min-height: 1.2rem;
+		box-shadow: 0px -5px 5px rgba(0, 0, 0, 0.05);
+		background: #fff;
+		width: 100%;
+		position: fixed;
+		bottom: 0;
+		left: 0;
+		z-index: 1000;
+	}
+
+	.input {
+		width: 60%;
+		min-height: 1.2rem;
+		padding-top: 0.4rem;
+		padding-bottom: 0.4rem;
+		border: none;
+		padding-right: 0.3rem;
+		padding-left: 0.3rem;
+		font-size: 0.28rem;
+	}
+
+	.send {
+		width: 40%;
+		position: absolute;
+		right: 0;
+		top: 0;
+		background: #fff;
+		height: 1.2rem;
+	}
+
+	.memeBox {
+		height: 3rem;
+		width: 100%;
+	}
+
+	.send img {
+		vertical-align: middle;
+		margin-right: 0.4rem;
+	}
+
+	.artificial {
+		margin-top: 0.3rem;
+		border: 0.01rem solid #dfdfdf;
+		background: #fff;
+		border-radius: 0.1rem;
+		padding: 0 0.2rem;
+	}
+
+	div /deep/ .yd-accordion-head-arrow:after {
+		border: none;
+		width: 0.3rem;
+		height: 0.3rem;
+		background: url("../assets/addright.png") no-repeat;
+		background-size: 100% 100%;
+		transform: rotate(0deg);
+	}
+
+	div /deep/ .yd-accordion-head-arrow.yd-accordion-rotated:after {
+		transform: rotate(-270deg);
+	}
+
+	div /deep/ .yd-accordion {
+		border-radius: 0.1rem;
+	}
+
+	div /deep/ .yd-accordion-content {
+		border-radius: 0.1rem;
+	}
+
+	.imgSrc img {
+		width: 1.2rem;
+	}
+
+	.leftHader {
+		height: 1rem;
+		background: linear-gradient(
+				90deg,
+				rgba(22, 84, 209, 1) 0%,
+				rgba(9, 52, 173, 1) 100%
+		);
+		box-shadow: 0 0.03rem 0.03rem rgba(0, 0, 0, 0.2);
+		padding: 0 0.3rem;
+	}
+
+	.leftMain-top {
+		margin-top: 0.4rem;
+		font-size: 0.28rem;
+		line-height: 0.45rem;
+		padding: 0 0.3rem;
+		color: #666;
+	}
+
+	.leftMain-top span {
+		color: #999;
+	}
+
+	.leftMain-top > div {
+		width: 50%;
+	}
+
+	.leftMain-center {
+		margin-top: 0.3rem;
+		color: #666;
+		line-height: 0.5rem;
+	}
+
+	.leftMain-chenter span {
+		color: #999;
+		font-size: 0.28rem;
+	}
+
+	.evaluate {
+		height: 1.7rem;
+		background: #fff;
+		border: 0.01rem solid #ddd;
+		border-radius: 0.1rem;
+		color: #666;
+		margin-top: 0.3rem;
+	}
+
+	.evaluateBtn {
+		width: 1.4rem;
+		height: 0.6rem;
+		border: none;
+		background: #f04992;
+		color: #fff;
+		border-radius: 0.1rem;
+	}
+
+	div /deep/ .yd-popup {
+		border-radius: 0.2rem 0.2rem 0 0;
+	}
+
+	div /deep/ .yd-popup-content {
+	}
+
+	.evaluatebtn > div p {
+		height: 50%;
+		width: 100%;
+		text-align: center;
+		margin-top: 0.14rem;
+	}
+
+	.evaluatebtn > div {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.evaluateBox {
+		margin: 0 0.2rem;
+		height: 1.5rem;
+		border: 0.01rem solid #ddd;
+		border-radius: 0.1rem;
+		background: #f5f5f5;
+	}
+
+	.evaluateBox textarea {
+		width: 100%;
+		height: 100%;
+		background: #f5f5f5;
+		border: none;
+		border-radius: 0.1rem;
+		padding: 0.2rem;
+		color: #999;
+		font-size: 0.28rem;
+	}
+
+	.sub {
+		margin: 0 0.2rem;
+		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);
+		height: 1rem;
+		font-size: 0.34rem;
+		color: #fff;
+		border-radius: 0.1rem;
+		margin-top: 0.4rem;
+	}
+
+	div /deep/ .yd-popup-content {
+		background: #fff;
+		border-radius: 0.1rem;
+	}
+
+	.loginInput {
+		height: 0.8rem;
+		border: 0.01rem solid #ddd;
+		background: #f5f5f5;
+		border-radius: 0.1rem;
+		margin-top: 0.5rem;
+		padding: 0.2rem;
+		font-size: 0.28rem;
+		margin: 0.2rem;
+		margin-top: 0.5rem;
+		width: 94%;
+		color: #999;
+	}
+
+	/* 留言 */
+	.leave-header {
+		height: 1rem;
+		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);
+		color: #fff;
+		font-size: 0.34rem;
+		padding: 0 0.3rem;
+	}
+
+	.leave-main {
+		height: 10rem;
+		background: #f5f5f5;
+		font-size: 0.28rem;
+		padding: 0.3rem 0.3rem 0.2rem 0.3rem;
+	}
+
+	.leave-main > div {
+		height: 1.3rem;
+		margin-bottom: 0.2rem;
+	}
+
+	.leave-main > div input {
+		height: 0.8rem;
+		border: 0.01rem solid #ddd;
+		border-radius: 0.1rem;
+		background: #fff;
+		padding: 0.2rem;
+		width: 100%;
+		margin-top: 0.1rem;
+	}
+
+	.leave-main-txt {
+		background: #fff;
+		padding: 0.2rem;
+		border: 0.01rem solid #ddd;
+		border-radius: 0.1rem;
+	}
+
+	.imgMsg {
+		height: 1.5rem;
+		padding: 0 0.2rem;
+		margin-top: 0.1rem;
+		font-size: 0.24rem;
+		background: #fff;
+		border: 0.01rem solid #ddd;
+		border-radius: 0.1rem;
+	}
+
+	.yd-cell-box {
+		width: 60%;
+		min-height: 1.2rem;
+
+		border: none;
+		padding-right: 0.3rem;
+		padding-left: 0.3rem;
+		border-bottom: 0.01rem solid rgb(221, 221, 221);
+	}
+
+	div /deep/ .yd-textarea > textarea {
+		height: 1.2rem;
+		font-size: 0.28rem;
+		padding-top: 0.2rem;
+	}
+
+	.yd-textarea {
+		padding: 0;
+	}
+
+	.yd-cell-box {
+		margin: 0;
+	}
+
+	.yd-cell-item {
+		padding: 0;
+	}
+
+	div /deep/ .yd-cell:after {
+		height: 0;
+	}
+
+	div /deep/ .yd-textarea-counter {
+		display: none;
+	}
+
+
+	.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: 80%;
+	}
+
+	.help .prompt {
+		width: 100%;
+	}
+
+	/*
+	*留言知识库
+	 */
+
+</style>