telephone-clients 3.0.104-5 → 3.0.104-50-lixian

package/src/components/pc/TextService.vue

@@ -1,849 +1,849 @@
-<template>
-  <div class="flex" style="background: #EDF2F9;border: 1px solid #B4BCCC;">
-    <div class="span text-server">
-      <div class='flex-row' id="text-service">
-        <!-- Nav tabs -->
-        <ul class="nav nav-tabs" role="tablist" style="overflow: auto;width: 7%">
-          <li :id="'vc-tabset-li-text-service'+'-'+$index" v-for="user in users"
-              v-bind:class="{'active': ($index === active), 'offline': !user.lineState}"
-              @click.prevent="handleTabListClick($index, user)" :disabled="r.disabled">
-            <a href="javascript:void(0)">
-              {{user.name === "" ? '未' : user.name[0]}}
-              <span class="badge">{{user.unreadNum === 0 ? '' : user.unreadNum}}</span>
-              <span class="glyphicon glyphicon-remove" @click.stop="deleteUser($index, user)"></span>
-            </a>
-
-          </li>
-        </ul>
-        <!-- Tab panes -->
-        <div class="flex" style="width: 90%">
-          <div class="tab-content span" v-el:tab-content style="flex: 1;overflow: scroll" style="height: 100px;" v-el:msgs
-               @scroll="scroll">
-            <div role="tabpanel" v-show="$index === active" :transition="transition" v-for="user in users"
-                 style="padding: 10px;">
-              <chat-msg :msgs="user.msgs"></chat-msg>
-            </div>
-          </div>
-
-          <!-- 消息发送区域 -->
-          <div class="send-msg">
-            <div contentEditable="true" name="name" class="text-editor"
-                 style="max-width: 100%;word-wrap:break-word"
-                 @input="contentChanged" @keydown="handleKeys"
-                 @drop="drop" @dragover="allowDrop" @dragenter="enter" id="pc-text-server-text" v-el:content>
-            </div>
-
-            <!-- <textarea contentEditable="true" name="name" rows="8" cols="80" style="resize: none; padding: 8px;flex: 1;background: #FFF;" v-model="content"
-              @drop="drop" @dragover="allowDrop" @dragenter="enter" id="pc-text-server-text" @keyup.enter.stop="send('text')" v-el:content></textarea> -->
-            <div style="padding: 5px;height: auto;position: relative;">
-              <div style="display: inline-block;">
-                <img :src="'static/wechat/ziyuan.png'" alt="选择素材" v-if="this.typeuser!=='webUser'"
-                     style="height: 20px;cursor: pointer;" @click="selectMater()">
-                <!-- 选择小表情 -->
-                <emoji @select-emoji="contentAddIcon"></emoji>
-              </div>
-              <!-- <button type="button" name="button" class="btn btn-primary" >选择资源</button> -->
-              <button type="button" name="button" class="btn btn-primary btn-xs" @click="send('text')"
-                      style="float: right;">发&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;送
-              </button>
-            </div>
-          </div>
-
-        </div>
-      </div>
-
-    </div>
-	<div id="mediaPane" style="display:flex; flex-direction: column; background-color:white; position: fixed; z-index: 9999; left:0px; right:0px; top: 0px; bottom:0px; padding-bottom: 30px;" v-show="show">
-		<div style="height:auto; background-color:grey;">
-			<button type="button" style="position:absolute; right: 10px; top:20px;" @click="close"><span>关闭</span></button>
-			<h4 class="modal-title">选择发送素材</h4>
-			<div style="position:fixed; bottom:0px; width: 300px; z-index:9999; height:auto;">
-				<button type="button" style="margin: 0 auto; display:block; width: 100px;" @click='sendMater()'>发送</button>
-			</div>
-		</div>
-		<div style="flex: 1; overflow: auto;">
-			<materials use-type="use" v-ref:material>
-			</materials>
-		</div>
-	</div>
-  </div>
-</template>
-
-<script>
-import * as Util from '../Util'
-import co from 'co'
-import {HttpResetClass} from 'vue-client'
-import data from '../../stores/wxconfig'
-import * as emoji from '../../plugins/EmojiData'
-import Vue from "vue";
-let msgGen = function* (self) {
-  try {
-    // 话务员才去登录，维修员不登录
-    if (!self.isRepairman) {
-      console.log('开始登陆')
-      // 话务员登陆
-      let http = new HttpResetClass()
-      let loginMsg = yield http.load('POST', `${self.$androidUtil.getProxyUrl()}/TDual`, {
-        aId: self.dualId,
-        aBzType: "login",
-        aName:self.dualName,
-      }, {resolveMsg: null, rejectMsg: null})
-
-      console.log('登陆返回的信息：', loginMsg)
-      if (loginMsg.data.code !== 200) {
-        self.$showAlert('登陆失败', 'danger', 0)
-        return
-      }
-    }
-    // 轮询获取消息
-    self.getUerMsg()
-  } catch (e) {
-    // self.$showAlert(`登陆失败:${JSON.stringify(e)}`, 'danger', 0)
-    console.log('登陆失败，请重试')
-  }
-
-}
-
-let outGen = function* (self) {
-  //维修员，不存在登出
-  if (self.isRepairman)
-    return
-  // 话务员登出
-  let http = new HttpResetClass()
-
-  let loginMsg = yield http.load('POST', `${self.$androidUtil.getProxyUrl()}/TDual`, {
-    aId: self.dualId,
-    aBzType: "logout",
-    aName:self.dualName,
-  }, {resolveMsg: null, rejectMsg: null})
-  console.log('登出返回的信息：', loginMsg)
-  if (loginMsg.data.code !== 200) {
-    self.$showAlert('登陆失败')
-    return
-  }
-}
-
-export default {
-  title: '文字客服',
-  data() {
-    return {
-      webId: '',
-      content: '',
-      interval: '',
-      fengongsi:'',
-      gh_id:'',
-      users: [
-      ], // 接入用户
-      show: false, // 选择素材
-      // msgs: [],
-      isTop: true, // 是否滚动到顶部
-      dualId: null,
-      dualRole: null,
-      dualName: null,
-    }
-  },
-  props: {
-    active: {
-      type: Number,
-      default: 0
-    },
-    isRepairman: {
-      default: false
-    },
-    typeuser: {
-      type: String,
-      default: 'webUser'
-    }
-  },
-
-  ready() {
-    this.fengongsi=this.$appdata.getSingleValue("分公司")
-    this.gh_id=this.$appdata.getSingleValue("公众号ID")
-    console.log(this.fengongsi)
-    console.log(this.gh_id)
-    console.log('当前是否是维修员：' + this.isRepairman)
-    if (this.typeuser === 'webUser') {
-      this.webId = '________________' + Util.randnum()
-      console.log(this.webId)
-    }
-    if (this.isRepairman) {
-      this.dualId = this.$login.f.name
-      this.dualName = this.$login.f.name
-      this.dualRole = 'repairman'
-    } else {
-      console.log('当前坐席：' + this.$login.f.id)
-      this.dualId = this.$login.f.id
-      this.dualName = this.$login.f.name
-      this.dualRole = null
-    }
-
-    let gen = msgGen(this)
-    co(gen)
-    // document.getElementById("myDIV").addEventListener("wheel", myFunction);
-
-    console.log('监听元素', this.$els.msgs + ':::::' + this.$androidUtil.getProxyUrl())
-
-    this.$els.msgs.addEventListener("wheel", this.wheelUp)
-    // 为Android滑动触屏添加事件
-    this.$els.msgs.addEventListener("touchstart", this.touchStart)
-    this.$els.msgs.addEventListener("touchend", this.touchEnd)
-  },
-  methods: {
-    sendMessage(user, index) {
-      user = {openId: user.openId, gh_id:user.gh_id, userId: user.userId, name: user.name}
-      console.log(user)
-      this.active = index
-      this.$dispatch('user', user)
-    },
-    getUerMsg() {
-      let that = this
-      let http = new HttpResetClass()
-      console.log('轮询取消息')
-      this.interval = setInterval(() => {
-        let params = this.typeuser === 'webUser' ? {openId: this.webId, aBzType: "nvl"} : {
-          aId: this.dualId,
-          aBzType: "nvl",
-          role: this.dualRole,
-          aName:this.dualName,
-        }
-        //load(method,url,data)
-        console.log(JSON.stringify(params))
-        http.load('POST', `${this.$androidUtil.getProxyUrl()}/TDual`, params, {
-          resolveMsg: null,
-          rejectMsg: null
-        }).then((res) => {
-
-          if (typeof res.data === 'string') {
-            window.alert(res.data)
-            // res.data = res.data.replace('"sessionId":', '"sessionId":"')
-            // res.data = res.data.replace(', "msgType"', '", "msgType"')
-            res.data = res.data.replace(/}/g,'},')
-            res.data = res.data.replace(',]},',']}')
-            res.data = res.data.replace('},]','}]')
-            console.log(res.data)
-            res.data = JSON.parse(res.data)
-          }
-          if (res.data.code === 200) {
-            // 有用户离线处理
-            if (res.data.kickedOffList && res.data.kickedOffList.length > 0) {
-              res.data.kickedOffList.forEach((openId) => {
-                that.turnOff(openId)
-              })
-            }
-            if (res.data.msgs.length > 0) { // 有新消息
-              // 将新消息放入到对应用户的消息中
-              console.log('参数拿一下' + res.data.msgs[0].openId.substring(0, 2))
-              //如果有aId说明是坐席接收消息。如果接收到的是web端发来的消息则显示web用户openid
-              if (params.aId && res.data.msgs[0].name === '' && res.data.msgs[0].openId.substring(0, 2) === '__') {
-                res.data.msgs[0].name = 'web客户' + res.data.msgs[0].openId.substring(15)
-              }
-              //如果有openid则说明是web接收消息
-              if (params.openId) {
-                res.data.msgs[0].name = '客服'
-              }
-
-              that.addMsg(res.data.msgs)
-              if("text-server"!=Vue.routes.main.selecttab){
-                this.$showAlert("您有新的客服消息,请注意查看",'success',1000)
-              }
-            }
-            // 处理维修员带过来的所有用户
-            if (res.data.bondedUsers && res.data.bondedUsers.length > 0) {
-              that.addBondedWeUsers(res.data.bondedUsers)
-            }
-          }
-          if (res.data.code === 509) {
-            this.$showAlert('请重新登陆', 'danger', 0)
-          }
-        }).catch((err) => {
-          console.log('提取数据出错', JSON.stringify(err))
-        })
-      }, 1000)
-    },
-    addBondedWeUsers(weusers) {
-      let that = this
-      weusers.forEach((wu) => {
-        // 查找用户
-        let index = that.users.findIndex((user, index, arr) => {
-          return user.openId === wu.f_open_id
-        })
-        // 找到
-        if (index && index !== -1 || index === 0) {
-          // do nothing
-        } else {
-          if (that.users.length === 0) { // 如果是添加的第一户
-
-            that.users.push({
-              name: wu.f_user_name,
-              userId: wu.f_user_name,
-              openId: wu.f_open_id,
-              gh_id:wu.gh_id,
-              msgs: [],
-              unreadNum: 0,
-              lineState: true
-            })
-            this.$dispatch('user', {openId: wu.f_open_id, gh_id:wu.gh_id,userId: wu.f_user_name, name: wu.f_user_name})
-          } else {
-            that.users.push({
-              name: wu.f_user_name,
-              userId: wu.f_user_name,
-              openId: wu.f_open_id,
-              gh_id:wu.gh_id,
-              msgs: [],
-              unreadNum: 0,
-              lineState: true
-            })
-          }
-        }
-      })
-    },
-    addMsg(msgs) {
-      let that = this
-      msgs.forEach((msg) => {
-        let index = that.users.findIndex((user, index, arr) => {
-          return user.openId === msg.openId
-        })
-        if (!msg.aBzType) { // 收到的消息
-          if (msg.msgType === 'image' || msg.msgType === 'video' || msg.msgType === 'voice') { // 有素材
-            msg.src = `${this.$androidUtil.getProxyUrl()}/weixin/image/material/${msg.media}`
-            msg.src_img = `${this.$androidUtil.getProxyUrl()}/weixin/image/material/${msg.thumbnail}`
-          }
-        }
-        if (index && index !== -1 || index === 0) { // 返回的有index,说明有这个用户
-          // 往用户消息里面push消息时，判断当前激活是否是当前用户，不是，要有新消息提示
-          that.users[index].msgs.push(msg)
-          that.users[index].lineState = true  // 将用户改为上线
-          if (that.active !== index) { // 如果当前激活不是该用户，添加消息后，将未读消息加 1
-            this.users[index].unreadNum += 1
-          }
-        } else { // 没有则添加到用户列表中
-          if (that.users.length === 0) { // 如果是添加的第一户
-            that.users.push({
-              name: msg.name,
-              userId: msg.userId,
-              openId: msg.openId,
-              gh_id:msg.gh_id,
-              msgs: [msg],
-              unreadNum: 0,
-              lineState: true
-            })
-            this.$dispatch('user', {openId: msg.openId, gh_id:msg.gh_id,userId: msg.userId, name: msg.name})
-          } else {
-            that.users.push({
-              name: msg.name,
-              userId: msg.userId,
-              openId: msg.openId,
-              gh_id:msg.gh_id,
-              msgs: [msg],
-              unreadNum: 1,
-              lineState: true
-            })
-          }
-        }
-        // that.msgs = that.users[0].msgs
-      })
-      // 有消息加入后滚动到最底部
-      this.scrollBottom()
-    },
-    enter(ev) {
-      ev.preventDefault()
-      ev.stopPropagation()
-    },
-    allowDrop(ev) {
-      // ev.preventDefault()
-      ev.preventDefault()
-      ev.stopPropagation()
-      ev.dataTransfer.dropEffect = 'copy'
-    },
-
-    drop(ev) {
-      ev.preventDefault()
-      // 接收得信息包括图片信息，音频信息，文字信息
-      let files = ev.dataTransfer.files
-      // 循环遍历所有文件
-      if (files.length > 0) { // 如果有文件，取出文件传送文件
-        for (var i = 0; i < files.length; i++) {
-          let type = ''
-          // 判断是不是图片信息
-          if (/image\/\w+/.test(files[i].type)) {
-            type = 'image'
-            // if(file.size / 1024 / 1024 > 2) {
-            //   that.$showAlert('上传图片不能大于2M，请处理后再选择', 'warning', 3000)
-            //   return
-            // }
-
-          } else if (/video\/|ogg$|mp4$/.test(files[i].type)) { // 判断是不是音频信息
-            type = 'video'
-          }
-          this.send(type)
-          // files[i]
-        }
-      } else { // 文字信息
-        let data = ev.dataTransfer.getData("Text")
-        this.content += data
-        this.$els.content.innerHTML = this.$els.content.innerHTML + data
-      }
-
-    },
-    // 选择素材
-    selectMater() {
-      this.show = true
-    },
-    close() {
-      this.$refs.material.clearRows()
-      this.show = false
-    },
-    // 发送选择资源
-    sendMater() {
-      this.$refs.material.rows.forEach((row) => {
-        this.send(row.f_file_type, row)
-      })
-      this.close()
-    },
-    // 发送信息，将内容区域得内容发送出去，图片和文字，拖拽进来后直接发送，不用点击发送按钮
-    send(type, content) {
-      console.log('发送类型', type, this.typeuser)
-
-      if (this.typeuser !== 'webUser' && !this.users[this.active]) {
-        this.$showAlert('当前无通话用户，不能发送消息', 'warning', 2000)
-        return
-      }
-      if (content) {
-        this.content = content
-      }
-      // 如果用户离线，不能发送消息
-      if (this.typeuser !== 'webUser' && !this.users[this.active].lineState) {
-        this.$showAlert('当前用户已离线，不能发送消息', 'warning', 2000)
-        return
-      }
-      let msg = {
-        openId: this.typeuser === 'webUser' ? this.webId : this.users[this.active].openId,
-        gh_id: this.typeuser === 'webUser' ? this.webId : this.users[this.active].gh_id,
-        userId: this.typeuser === 'webUser' ? this.webId : this.users[this.active].userId,
-        aBzType: 'send',
-        aName:this.dualName,
-        branch:this.fengongsi,
-        //gh_id:this.gh_id,
-        name: this.typeuser === 'webUser' ? 'web客户' + this.webId.substring(15) : this.$login.f.name,
-        date: Util.toStandardTimeString().split(' ')[0].substring(2, Util.toStandardTimeString().split(' ')[0].length),
-        time: Util.toStandardTimeString().split(' ')[1],
-      }
-      // web端没有aId
-      if (this.typeuser !== 'webUser') {
-        msg.aId = this.dualId
-        msg.role = this.dualRole
-      }
-      if (this.typeuser === 'webUser') {
-        msg.openId = this.webId
-      }
-      if (type === 'text') {
-        if (!(this.content && this.content.length > 0)) {
-          console.log('发送的内容不能为空');
-          return
-        }
-        msg.msgType = 'text'
-        msg.content = this.content
-      } else if (type === 'image') { // 图片消息
-        msg.msgType = 'image'
-        msg.src = `${this.$androidUtil.getProxyUrl()}/materials/${content.f_file_name}`
-        msg.src_img = `${this.$androidUtil.getProxyUrl()}/materials/${content.f_thumbnail}`
-        msg.content = content.f_mediaid
-      } else if (type === 'video') { // 视频消息
-        msg.msgType = 'video'
-        msg.src = `${this.$androidUtil.getProxyUrl()}/materials/${content.f_file_name}`
-        msg.src_img = `${this.$androidUtil.getProxyUrl()}/materials/${content.f_thumbnail}`
-        msg.content = content.f_mediaid
-      }
-      console.log('发送的消息体为', msg)
-      // 此处将消息发送服务一份，然后添加到自己界面
-      let that = this
-      let http = new HttpResetClass()
-      let url = `${this.$androidUtil.getProxyUrl()}/TDual`
-      http.load('POST', url, msg, {resolveMsg: null, rejectMsg: null}).then((res) => {
-        console.log('发消息返回的消息', res)
-        if (res.data.code === 200 && !res.data.msg) {
-
-        }
-        else if(res.data.code === 500){
-          this.$showAlert('当前用户已离线，不能发送消息', 'warning', 2000)
-
-        }
-        //else if (res.data.code === 200&&res.data.msg!==''){
-        //  this.$showAlert('，暂时无法服务,请拨打96677咨询人工客服', 'warning', 2000)
-        //}
-      })
-      // openId: 微信用户openId
-      // msgType: 消息类别
-      // content：消息内容，只针对text消息
-      // name: 燃气用户姓名
-      // userId: 燃气用户id
-      // time: 消息时间
-      // date: 消息年月日
-      // media: 除text消息外的文件名
-      // thumbnail: media对应的缩略图或转换文件
-      // {"aId":"001", "aBzType":"send", "msgType":"text", "content":"huawuyuangeinidexiaoxi", "openId": "oL5ch0q8MjNEuLcsQw4CsImDkEdA"}
-      this.addMsg([msg])
-      // 消息发送出后，清空输入框
-      this.content = ''
-      // 清空显示
-      this.$els.content.innerHTML = ''
-      this.$els.content.focus()
-      // 消息发出后滚动到最底部
-      // this.scrollBottom()
-    },
-    // 切换用户
-    handleTabListClick(index, user) {
-      this.active = index
-      // 切换激活用户时，将未读消息设置为0
-      this.users[index].unreadNum = 0
-      // user = {openId: user.openId, userId: user.userId, name: user.name}
-      console.log(user)
-      this.active = index
-      // 发送事件，切换用户时重新查询用户
-      this.$dispatch('user', {openId: user.openId, gh_id:user.gh_id, userId: user.userId, name: user.name})
-      this.scrollBottom()
-    },
-    // 关闭用户对话框
-    deleteUser(index, user) {
-      // 话务员直接关闭
-      if (this.isRepairman)
-        return
-      console.log('关闭用户对话框')
-      if (!user.lineState) { // 如果用户已经离线，直接删除,发请求回报错，导致关闭不了
-        this.users.splice(index, 1)
-        return
-      }
-      let http = new HttpResetClass()
-      http.load('POST', `${this.$androidUtil.getProxyUrl()}/TDual`, {
-        aId: this.dualId,
-        aBzType: "abort",
-        aName:this.dualName,
-        openId: user.openId,
-        gh_id:user.gh_id,
-      }, {resolveMsg: null, rejectMsg: null}).then((res) => {
-        console.log('关闭用户对话框', res)
-        this.users.splice(index, 1)
-      })
-    },
-    // 滚动到文字信息底部
-    scrollBottom() {
-      this.$nextTick(() => {
-        this.$els.msgs.scrollTop = this.$els.msgs.scrollHeight
-
-      })
-    },
-    // 处理离线用户
-    turnOff(openId) {
-      let index = this.users.findIndex((user, index, arr) => {
-        return user.openId === openId
-      })
-      this.users[index].lineState = false
-    },
-    // 当有滚动事件时，滚轮事件被屏蔽掉
-    // 滚动事件
-    scroll(e) {
-      // console.log('滚动事件', e)
-      if (e.target.scrollTop === 0) {
-        this.isTop = true
-      } else {
-        this.isTop = false
-      }
-    },
-    // 触屏滑动事件
-    touchStart(e) { // 触屏开始位置
-      this.start_Y = e.changedTouches[0].pageY
-    },
-    touchEnd(e) { // 滑动当前位置
-      let end_Y = e.changedTouches[0].pageY
-      if (end_Y - this.start_Y > 50) {
-        // 下滑加载
-        console.log('发生滑动时间：' + e)
-        this.loadHistory(e)
-      }
-    },
-    // 滚轮事件，为解决刚进来没有滚动时，加载历史记录
-    wheelUp(e) {
-      if (e.wheelDelta > 0) {
-        console.log('发生滚轮时间：' + e)
-        this.loadHistory(e)
-      }
-    },
-    loadHistory(e) {
-      if (this.isTop) { // 加载历史开始了
-        if (this.users.length == 0 || !this.users[this.active].openId)
-          return
-        let dt = ''
-        // 如果维修员想要查看历史消息，但是还没有聊天的情况下，
-        if (this.users[this.active].msgs.length == 0)
-          dt = Util.toStandardTimeString()
-        else
-          dt = `20${this.users[this.active].msgs[0].date} ${this.users[this.active].msgs[0].time}`
-        this.$resetpost(`${this.$androidUtil.getProxyUrl()}/rs/sql/tel_getChatHistory`,
-          {
-            data: {
-              f_dt: dt,
-              f_open_id: this.users[this.active].openId
-            }
-          },
-          {resolveMsg: null, rejectMsg: null}).then((res) => {
-          console.log('加载到的数据是', res)
-          if (res.data.length > 0) {
-            let msgs = []
-            res.data.forEach((item) => {
-              if (item.f_msg_type !== 'system') {
-                let msg = {
-                  content: item.f_content,
-                  date: item.f_dt.split(' ')[0].substring(2, item.f_dt.split(' ')[0].length),
-                  time: item.f_dt.split(' ')[1],
-                  media: "",
-                  msgType: item.f_msg_type,
-                  name: (item.f_msg_direction === '发送') ? (item.f_repairman ? item.f_repairman : null) : item.f_user_name,
-                  openId: item.f_open_id,
-                  gh_id:item.gh_id,
-                  sessionId: item.f_session_id,
-                  thumbnail: item.f_thumbnail,
-                  userId: item.f_user_id
-                }
-                if (item.f_msg_direction === '发送') {
-                  msg.aBzType = "send"
-                  msg.branch = this.fengongsi
-                  msg.gh_id=this.gh_id
-                }
-                if (item.f_msg_type === 'video' || item.f_msg_type === 'voice' || item.f_msg_type === 'image') {
-                  console.log('聊天历史消息：', JSON.stringify(item))
-                  if (item.f_msg_direction === '发送') { // 话务员发送的消息
-                    msg.src = `${this.$androidUtil.getProxyUrl()}/materials/${item.f_file_name}`
-                    msg.src_img = `${this.$androidUtil.getProxyUrl()}/materials/${item.thumbnail}`
-                  } else { // 用户发送的消息
-                    msg.src = `${this.$androidUtil.getProxyUrl()}/umaterials/${item.f_content}`
-                    msg.src_img = `${this.$androidUtil.getProxyUrl()}/umaterials/${item.f_thumbnail}`
-                  }
-                }
-                msgs.push(msg)
-              }
-            })
-            console.log('组成消息组是', msgs)
-            this.users[this.active].msgs.unshift(...msgs)
-          } else { // 没有记录了
-            this.$showAlert('没有记录了', 'warning', 1000)
-          }
-        })
-        // console.log('向上滚')
-        // console.log(e.target.scrollTop)
-      } else {
-        // console.log('向下滚')
-      }
-    },
-    // 自文本内容中加入小图标
-    contentAddIcon(key, emoji) {
-      // 获取焦点，防止选择表情无法输入
-      let el = this.$els.content
-      el.focus() // 获取焦点
-      // 将光标定位到文档最后
-      let range = document.createRange();
-      range.selectNodeContents(el);
-      range.collapse(true);
-      range.setEnd(el, el.childNodes.length);
-      range.setStart(el, el.childNodes.length);
-      let sel = window.getSelection();
-      sel.removeAllRanges();
-      sel.addRange(range);
-      // 定位光标后
-      this.content += key
-      document.execCommand('insertImage', false, `static/wechat/${emoji}`)
-    },
-    // 按键事件
-    handleKeys(event) {
-      if (event.which === 9) event.preventDefault()
-      if (event.which === 13 && event.ctrlKey) {
-        event.preventDefault()
-        this.send('text')
-      }
-      // if (event.which === 13 && event.ctrlKey){
-      // 	this.content = this.$els.content.innerHTML
-      // }
-      // console.log('this.content---->', this.content)
-    },
-    // 内容发生变化
-    contentChanged() {
-      if (this.$els.content.innerHTML === '') {
-        return
-      }
-      this.content = emoji.editorChange(this.$els.content.innerHTML)
-    },
-    // insertTextAtCursor () {
-    //   let sel
-    //   if (window.getSelection) {
-    //       sel = window.getSelection();
-    //       if (sel.getRangeAt && sel.rangeCount) {
-    //           range = sel.getRangeAt(0)
-    //           range.deleteContents()
-    //       }
-    //   }
-    // }
-    // insertTextAtCursor(text) {
-    //     var sel, range, html;
-    //     console.log('11111111111',  window.getSelection())
-    //     if (window.getSelection) {
-    //         sel = window.getSelection();
-    //         if (sel.getRangeAt && sel.rangeCount) {
-    //             range = sel.getRangeAt(0);
-    //             range.deleteContents();
-    //             // range.insertNode( document.createTextNode(text) );
-    //         }
-    //     } else if (document.selection && document.selection.createRange) {
-    //         // document.selection.createRange().text = text;
-    //     }
-    // },
-    // saveSelection () {
-    //   if (window.getSelection) {
-    //     sel = window.getSelection()
-    //     if (sel.getRangeAt && sel.rangeCount) {
-    //       return sel.getRangeAt(0)
-    //     }
-    //   } else if (document.selection && document.selection.createRange) {
-    //     return document.selection.createRange()
-    //   }
-    //   return null
-    // },
-    // restoreSelection(range) {
-    //   if (range) {
-    //     if (window.getSelection) {
-    //       sel = window.getSelection()
-    //       sel.removeAllRanges()
-    //       sel.addRange(range)
-    //     } else if (document.selection && range.select) {
-    //       range.select()
-    //     }
-    //   }
-    // }
-  },
-  beforeDestroy() {
-    clearInterval(this.interval)
-    let gen = outGen(this)
-    co(gen)
-  },
-  computed:{
-    reply() {
-      return this.$appdata.getParam('快速回复')
-    }
-
-  },
-}
-</script>
-<style scoped>
-  .text-editor {
-    flex: 1;
-  }
-
-  div[contenteditable=true] {
-    outline: none;
-    border-top: 1px solid #DDD;
-    overflow: auto;
-    background: #FFF;
-    padding: 5px 10px;
-  }
-
-  div[contenteditable=true] div {
-    height: auto;
-  }
-
-  div[contenteditable=true] img {
-    width: 25px;
-  }
-
-  .send-msg {
-    /*position: relative;*/
-    display: flex;
-    height: 120px;
-    flex-direction: column;
-  }
-
-  .send-msg > button {
-    /*position: absolute;*/
-    right: 20px;
-    bottom: 5px;
-    padding: 3px 20px;
-  }
-
-  /* 文字客服页签样式 */
-  /* .text-server .flex {
-    display: flex;
-    flex-direction: row;
-  } */
-  .text-server .flex-row > ul {
-    background: #009BDB;
-    width: 60px;
-
-  }
-
-  .text-server .flex-row > ul > li {
-    width: 100%;
-    display: flex;
-    justify-content: center;
-  }
-
-  .text-server .flex-row > ul > li > a {
-    border-bottom: none;
-    /* background: #FFF; */
-    padding: 0px;
-    margin-right: 0px;
-    line-height: 40px;
-    text-align: center;
-    font-size: 1.2em;
-    width: 40px;
-    height: 40px;
-    margin: 5px 0px;
-    border-radius: 50%;
-  }
-
-  .text-server .flex-row > ul > li.active {
-    background: rgba(255, 255, 255, 0.3);
-  }
-
-  .text-server ul > li > a > span {
-    display: inherit;
-  }
-
-  /* 关闭按钮  badge glyphicon style="position: absolute;right: -5px;top: 0px;background: #F61003;" */
-  #text-service > ul > li > a {
-    position: relative;
-  }
-
-  #text-service > ul > li > a > .glyphicon {
-    display: none;
-  }
-
-  #text-service > ul > li > a > .badge {
-    /* display: initial; */
-    position: absolute;
-    right: -5px;
-    top: 0px;
-    background: #F61003;
-  }
-
-  #text-service > ul > li > a:hover > .glyphicon {
-    display: initial;
-    position: absolute;
-    /* font-size: 13px; */
-    background-color: rgb(255, 255, 255, 0.5);
-    right: -5px;
-    top: 0px;
-  }
-
-  /* 当鼠标悬停在游湖头像时，未读消息显示隐藏，关闭按钮显示 */
-  #text-service > ul > li > a:hover > .badge {
-    display: none;
-  }
-
-  #text-service > ul > li > a:hover > .glyphicon:hover {
-    background-color: #F61003;
-    color: #FFF;
-    /* color: #5CBDED; */
-  }
-
-  .offline {
-    background: #888 !important;
-  }
-
-</style>
+<template>
+  <div class="flex" style="background: #EDF2F9;border: 1px solid #B4BCCC;">
+    <div class="span text-server">
+      <div class='flex-row' id="text-service">
+        <!-- Nav tabs -->
+        <ul class="nav nav-tabs" role="tablist" style="overflow: auto;width: 7%">
+          <li :id="'vc-tabset-li-text-service'+'-'+$index" v-for="user in users"
+              v-bind:class="{'active': ($index === active), 'offline': !user.lineState}"
+              @click.prevent="handleTabListClick($index, user)" :disabled="r.disabled">
+            <a href="javascript:void(0)">
+              {{user.name === "" ? '未' : user.name[0]}}
+              <span class="badge">{{user.unreadNum === 0 ? '' : user.unreadNum}}</span>
+              <span class="glyphicon glyphicon-remove" @click.stop="deleteUser($index, user)"></span>
+            </a>
+
+          </li>
+        </ul>
+        <!-- Tab panes -->
+        <div class="flex" style="width: 90%">
+          <div class="tab-content span" v-el:tab-content style="flex: 1;overflow: scroll" style="height: 100px;" v-el:msgs
+               @scroll="scroll">
+            <div role="tabpanel" v-show="$index === active" :transition="transition" v-for="user in users"
+                 style="padding: 10px;">
+              <chat-msg :msgs="user.msgs"></chat-msg>
+            </div>
+          </div>
+
+          <!-- 消息发送区域 -->
+          <div class="send-msg">
+            <div contentEditable="true" name="name" class="text-editor"
+                 style="max-width: 100%;word-wrap:break-word"
+                 @input="contentChanged" @keydown="handleKeys"
+                 @drop="drop" @dragover="allowDrop" @dragenter="enter" id="pc-text-server-text" v-el:content>
+            </div>
+
+            <!-- <textarea contentEditable="true" name="name" rows="8" cols="80" style="resize: none; padding: 8px;flex: 1;background: #FFF;" v-model="content"
+              @drop="drop" @dragover="allowDrop" @dragenter="enter" id="pc-text-server-text" @keyup.enter.stop="send('text')" v-el:content></textarea> -->
+            <div style="padding: 5px;height: auto;position: relative;">
+              <div style="display: inline-block;">
+                <img :src="'static/wechat/ziyuan.png'" alt="选择素材" v-if="this.typeuser!=='webUser'"
+                     style="height: 20px;cursor: pointer;" @click="selectMater()">
+                <!-- 选择小表情 -->
+                <emoji @select-emoji="contentAddIcon"></emoji>
+              </div>
+              <!-- <button type="button" name="button" class="btn btn-primary" >选择资源</button> -->
+              <button type="button" name="button" class="btn btn-primary btn-xs" @click="send('text')"
+                      style="float: right;">发&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;送
+              </button>
+            </div>
+          </div>
+
+        </div>
+      </div>
+
+    </div>
+	<div id="mediaPane" style="display:flex; flex-direction: column; background-color:white; position: fixed; z-index: 9999; left:0px; right:0px; top: 0px; bottom:0px; padding-bottom: 30px;" v-show="show">
+		<div style="height:auto; background-color:grey;">
+			<button type="button" style="position:absolute; right: 10px; top:20px;" @click="close"><span>关闭</span></button>
+			<h4 class="modal-title">选择发送素材</h4>
+			<div style="position:fixed; bottom:0px; width: 300px; z-index:9999; height:auto;">
+				<button type="button" style="margin: 0 auto; display:block; width: 100px;" @click='sendMater()'>发送</button>
+			</div>
+		</div>
+		<div style="flex: 1; overflow: auto;">
+			<materials use-type="use" v-ref:material>
+			</materials>
+		</div>
+	</div>
+  </div>
+</template>
+
+<script>
+import * as Util from '../Util'
+import co from 'co'
+import {HttpResetClass} from 'vue-client'
+import data from '../../stores/wxconfig'
+import * as emoji from '../../plugins/EmojiData'
+import Vue from "vue";
+let msgGen = function* (self) {
+  try {
+    // 话务员才去登录，维修员不登录
+    if (!self.isRepairman) {
+      console.log('开始登陆')
+      // 话务员登陆
+      let http = new HttpResetClass()
+      let loginMsg = yield http.load('POST', `${self.$androidUtil.getProxyUrl()}/TDual`, {
+        aId: self.dualId,
+        aBzType: "login",
+        aName:self.dualName,
+      }, {resolveMsg: null, rejectMsg: null})
+
+      console.log('登陆返回的信息：', loginMsg)
+      if (loginMsg.data.code !== 200) {
+        self.$showAlert('登陆失败', 'danger', 0)
+        return
+      }
+    }
+    // 轮询获取消息
+    self.getUerMsg()
+  } catch (e) {
+    // self.$showAlert(`登陆失败:${JSON.stringify(e)}`, 'danger', 0)
+    console.log('登陆失败，请重试')
+  }
+
+}
+
+let outGen = function* (self) {
+  //维修员，不存在登出
+  if (self.isRepairman)
+    return
+  // 话务员登出
+  let http = new HttpResetClass()
+
+  let loginMsg = yield http.load('POST', `${self.$androidUtil.getProxyUrl()}/TDual`, {
+    aId: self.dualId,
+    aBzType: "logout",
+    aName:self.dualName,
+  }, {resolveMsg: null, rejectMsg: null})
+  console.log('登出返回的信息：', loginMsg)
+  if (loginMsg.data.code !== 200) {
+    self.$showAlert('登陆失败')
+    return
+  }
+}
+
+export default {
+  title: '文字客服',
+  data() {
+    return {
+      webId: '',
+      content: '',
+      interval: '',
+      fengongsi:'',
+      gh_id:'',
+      users: [
+      ], // 接入用户
+      show: false, // 选择素材
+      // msgs: [],
+      isTop: true, // 是否滚动到顶部
+      dualId: null,
+      dualRole: null,
+      dualName: null,
+    }
+  },
+  props: {
+    active: {
+      type: Number,
+      default: 0
+    },
+    isRepairman: {
+      default: false
+    },
+    typeuser: {
+      type: String,
+      default: 'webUser'
+    }
+  },
+
+  ready() {
+    this.fengongsi=this.$appdata.getSingleValue("分公司")
+    this.gh_id=this.$appdata.getSingleValue("公众号ID")
+    console.log(this.fengongsi)
+    console.log(this.gh_id)
+    console.log('当前是否是维修员：' + this.isRepairman)
+    if (this.typeuser === 'webUser') {
+      this.webId = '________________' + Util.randnum()
+      console.log(this.webId)
+    }
+    if (this.isRepairman) {
+      this.dualId = this.$login.f.name
+      this.dualName = this.$login.f.name
+      this.dualRole = 'repairman'
+    } else {
+      console.log('当前坐席：' + this.$login.f.id)
+      this.dualId = this.$login.f.id
+      this.dualName = this.$login.f.name
+      this.dualRole = null
+    }
+
+    let gen = msgGen(this)
+    co(gen)
+    // document.getElementById("myDIV").addEventListener("wheel", myFunction);
+
+    console.log('监听元素', this.$els.msgs + ':::::' + this.$androidUtil.getProxyUrl())
+
+    this.$els.msgs.addEventListener("wheel", this.wheelUp)
+    // 为Android滑动触屏添加事件
+    this.$els.msgs.addEventListener("touchstart", this.touchStart)
+    this.$els.msgs.addEventListener("touchend", this.touchEnd)
+  },
+  methods: {
+    sendMessage(user, index) {
+      user = {openId: user.openId, gh_id:user.gh_id, userId: user.userId, name: user.name}
+      console.log(user)
+      this.active = index
+      this.$dispatch('user', user)
+    },
+    getUerMsg() {
+      let that = this
+      let http = new HttpResetClass()
+      console.log('轮询取消息')
+      this.interval = setInterval(() => {
+        let params = this.typeuser === 'webUser' ? {openId: this.webId, aBzType: "nvl"} : {
+          aId: this.dualId,
+          aBzType: "nvl",
+          role: this.dualRole,
+          aName:this.dualName,
+        }
+        //load(method,url,data)
+        console.log(JSON.stringify(params))
+        http.load('POST', `${this.$androidUtil.getProxyUrl()}/TDual`, params, {
+          resolveMsg: null,
+          rejectMsg: null
+        }).then((res) => {
+
+          if (typeof res.data === 'string') {
+            window.alert(res.data)
+            // res.data = res.data.replace('"sessionId":', '"sessionId":"')
+            // res.data = res.data.replace(', "msgType"', '", "msgType"')
+            res.data = res.data.replace(/}/g,'},')
+            res.data = res.data.replace(',]},',']}')
+            res.data = res.data.replace('},]','}]')
+            console.log(res.data)
+            res.data = JSON.parse(res.data)
+          }
+          if (res.data.code === 200) {
+            // 有用户离线处理
+            if (res.data.kickedOffList && res.data.kickedOffList.length > 0) {
+              res.data.kickedOffList.forEach((openId) => {
+                that.turnOff(openId)
+              })
+            }
+            if (res.data.msgs.length > 0) { // 有新消息
+              // 将新消息放入到对应用户的消息中
+              console.log('参数拿一下' + res.data.msgs[0].openId.substring(0, 2))
+              //如果有aId说明是坐席接收消息。如果接收到的是web端发来的消息则显示web用户openid
+              if (params.aId && res.data.msgs[0].name === '' && res.data.msgs[0].openId.substring(0, 2) === '__') {
+                res.data.msgs[0].name = 'web客户' + res.data.msgs[0].openId.substring(15)
+              }
+              //如果有openid则说明是web接收消息
+              if (params.openId) {
+                res.data.msgs[0].name = '客服'
+              }
+
+              that.addMsg(res.data.msgs)
+              if("text-server"!=Vue.routes.main.selecttab){
+                this.$showAlert("您有新的客服消息,请注意查看",'success',1000)
+              }
+            }
+            // 处理维修员带过来的所有用户
+            if (res.data.bondedUsers && res.data.bondedUsers.length > 0) {
+              that.addBondedWeUsers(res.data.bondedUsers)
+            }
+          }
+          if (res.data.code === 509) {
+            this.$showAlert('请重新登陆', 'danger', 0)
+          }
+        }).catch((err) => {
+          console.log('提取数据出错', JSON.stringify(err))
+        })
+      }, 1000)
+    },
+    addBondedWeUsers(weusers) {
+      let that = this
+      weusers.forEach((wu) => {
+        // 查找用户
+        let index = that.users.findIndex((user, index, arr) => {
+          return user.openId === wu.f_open_id
+        })
+        // 找到
+        if (index && index !== -1 || index === 0) {
+          // do nothing
+        } else {
+          if (that.users.length === 0) { // 如果是添加的第一户
+
+            that.users.push({
+              name: wu.f_user_name,
+              userId: wu.f_user_name,
+              openId: wu.f_open_id,
+              gh_id:wu.gh_id,
+              msgs: [],
+              unreadNum: 0,
+              lineState: true
+            })
+            this.$dispatch('user', {openId: wu.f_open_id, gh_id:wu.gh_id,userId: wu.f_user_name, name: wu.f_user_name})
+          } else {
+            that.users.push({
+              name: wu.f_user_name,
+              userId: wu.f_user_name,
+              openId: wu.f_open_id,
+              gh_id:wu.gh_id,
+              msgs: [],
+              unreadNum: 0,
+              lineState: true
+            })
+          }
+        }
+      })
+    },
+    addMsg(msgs) {
+      let that = this
+      msgs.forEach((msg) => {
+        let index = that.users.findIndex((user, index, arr) => {
+          return user.openId === msg.openId
+        })
+        if (!msg.aBzType) { // 收到的消息
+          if (msg.msgType === 'image' || msg.msgType === 'video' || msg.msgType === 'voice') { // 有素材
+            msg.src = `${this.$androidUtil.getProxyUrl()}/weixin/image/material/${msg.media}`
+            msg.src_img = `${this.$androidUtil.getProxyUrl()}/weixin/image/material/${msg.thumbnail}`
+          }
+        }
+        if (index && index !== -1 || index === 0) { // 返回的有index,说明有这个用户
+          // 往用户消息里面push消息时，判断当前激活是否是当前用户，不是，要有新消息提示
+          that.users[index].msgs.push(msg)
+          that.users[index].lineState = true  // 将用户改为上线
+          if (that.active !== index) { // 如果当前激活不是该用户，添加消息后，将未读消息加 1
+            this.users[index].unreadNum += 1
+          }
+        } else { // 没有则添加到用户列表中
+          if (that.users.length === 0) { // 如果是添加的第一户
+            that.users.push({
+              name: msg.name,
+              userId: msg.userId,
+              openId: msg.openId,
+              gh_id:msg.gh_id,
+              msgs: [msg],
+              unreadNum: 0,
+              lineState: true
+            })
+            this.$dispatch('user', {openId: msg.openId, gh_id:msg.gh_id,userId: msg.userId, name: msg.name})
+          } else {
+            that.users.push({
+              name: msg.name,
+              userId: msg.userId,
+              openId: msg.openId,
+              gh_id:msg.gh_id,
+              msgs: [msg],
+              unreadNum: 1,
+              lineState: true
+            })
+          }
+        }
+        // that.msgs = that.users[0].msgs
+      })
+      // 有消息加入后滚动到最底部
+      this.scrollBottom()
+    },
+    enter(ev) {
+      ev.preventDefault()
+      ev.stopPropagation()
+    },
+    allowDrop(ev) {
+      // ev.preventDefault()
+      ev.preventDefault()
+      ev.stopPropagation()
+      ev.dataTransfer.dropEffect = 'copy'
+    },
+
+    drop(ev) {
+      ev.preventDefault()
+      // 接收得信息包括图片信息，音频信息，文字信息
+      let files = ev.dataTransfer.files
+      // 循环遍历所有文件
+      if (files.length > 0) { // 如果有文件，取出文件传送文件
+        for (var i = 0; i < files.length; i++) {
+          let type = ''
+          // 判断是不是图片信息
+          if (/image\/\w+/.test(files[i].type)) {
+            type = 'image'
+            // if(file.size / 1024 / 1024 > 2) {
+            //   that.$showAlert('上传图片不能大于2M，请处理后再选择', 'warning', 3000)
+            //   return
+            // }
+
+          } else if (/video\/|ogg$|mp4$/.test(files[i].type)) { // 判断是不是音频信息
+            type = 'video'
+          }
+          this.send(type)
+          // files[i]
+        }
+      } else { // 文字信息
+        let data = ev.dataTransfer.getData("Text")
+        this.content += data
+        this.$els.content.innerHTML = this.$els.content.innerHTML + data
+      }
+
+    },
+    // 选择素材
+    selectMater() {
+      this.show = true
+    },
+    close() {
+      this.$refs.material.clearRows()
+      this.show = false
+    },
+    // 发送选择资源
+    sendMater() {
+      this.$refs.material.rows.forEach((row) => {
+        this.send(row.f_file_type, row)
+      })
+      this.close()
+    },
+    // 发送信息，将内容区域得内容发送出去，图片和文字，拖拽进来后直接发送，不用点击发送按钮
+    send(type, content) {
+      console.log('发送类型', type, this.typeuser)
+
+      if (this.typeuser !== 'webUser' && !this.users[this.active]) {
+        this.$showAlert('当前无通话用户，不能发送消息', 'warning', 2000)
+        return
+      }
+      if (content) {
+        this.content = content
+      }
+      // 如果用户离线，不能发送消息
+      if (this.typeuser !== 'webUser' && !this.users[this.active].lineState) {
+        this.$showAlert('当前用户已离线，不能发送消息', 'warning', 2000)
+        return
+      }
+      let msg = {
+        openId: this.typeuser === 'webUser' ? this.webId : this.users[this.active].openId,
+        gh_id: this.typeuser === 'webUser' ? this.webId : this.users[this.active].gh_id,
+        userId: this.typeuser === 'webUser' ? this.webId : this.users[this.active].userId,
+        aBzType: 'send',
+        aName:this.dualName,
+        branch:this.fengongsi,
+        //gh_id:this.gh_id,
+        name: this.typeuser === 'webUser' ? 'web客户' + this.webId.substring(15) : this.$login.f.name,
+        date: Util.toStandardTimeString().split(' ')[0].substring(2, Util.toStandardTimeString().split(' ')[0].length),
+        time: Util.toStandardTimeString().split(' ')[1],
+      }
+      // web端没有aId
+      if (this.typeuser !== 'webUser') {
+        msg.aId = this.dualId
+        msg.role = this.dualRole
+      }
+      if (this.typeuser === 'webUser') {
+        msg.openId = this.webId
+      }
+      if (type === 'text') {
+        if (!(this.content && this.content.length > 0)) {
+          console.log('发送的内容不能为空');
+          return
+        }
+        msg.msgType = 'text'
+        msg.content = this.content
+      } else if (type === 'image') { // 图片消息
+        msg.msgType = 'image'
+        msg.src = `${this.$androidUtil.getProxyUrl()}/materials/${content.f_file_name}`
+        msg.src_img = `${this.$androidUtil.getProxyUrl()}/materials/${content.f_thumbnail}`
+        msg.content = content.f_mediaid
+      } else if (type === 'video') { // 视频消息
+        msg.msgType = 'video'
+        msg.src = `${this.$androidUtil.getProxyUrl()}/materials/${content.f_file_name}`
+        msg.src_img = `${this.$androidUtil.getProxyUrl()}/materials/${content.f_thumbnail}`
+        msg.content = content.f_mediaid
+      }
+      console.log('发送的消息体为', msg)
+      // 此处将消息发送服务一份，然后添加到自己界面
+      let that = this
+      let http = new HttpResetClass()
+      let url = `${this.$androidUtil.getProxyUrl()}/TDual`
+      http.load('POST', url, msg, {resolveMsg: null, rejectMsg: null}).then((res) => {
+        console.log('发消息返回的消息', res)
+        if (res.data.code === 200 && !res.data.msg) {
+
+        }
+        else if(res.data.code === 500){
+          this.$showAlert('当前用户已离线，不能发送消息', 'warning', 2000)
+
+        }
+        //else if (res.data.code === 200&&res.data.msg!==''){
+        //  this.$showAlert('，暂时无法服务,请拨打96677咨询人工客服', 'warning', 2000)
+        //}
+      })
+      // openId: 微信用户openId
+      // msgType: 消息类别
+      // content：消息内容，只针对text消息
+      // name: 燃气用户姓名
+      // userId: 燃气用户id
+      // time: 消息时间
+      // date: 消息年月日
+      // media: 除text消息外的文件名
+      // thumbnail: media对应的缩略图或转换文件
+      // {"aId":"001", "aBzType":"send", "msgType":"text", "content":"huawuyuangeinidexiaoxi", "openId": "oL5ch0q8MjNEuLcsQw4CsImDkEdA"}
+      this.addMsg([msg])
+      // 消息发送出后，清空输入框
+      this.content = ''
+      // 清空显示
+      this.$els.content.innerHTML = ''
+      this.$els.content.focus()
+      // 消息发出后滚动到最底部
+      // this.scrollBottom()
+    },
+    // 切换用户
+    handleTabListClick(index, user) {
+      this.active = index
+      // 切换激活用户时，将未读消息设置为0
+      this.users[index].unreadNum = 0
+      // user = {openId: user.openId, userId: user.userId, name: user.name}
+      console.log(user)
+      this.active = index
+      // 发送事件，切换用户时重新查询用户
+      this.$dispatch('user', {openId: user.openId, gh_id:user.gh_id, userId: user.userId, name: user.name})
+      this.scrollBottom()
+    },
+    // 关闭用户对话框
+    deleteUser(index, user) {
+      // 话务员直接关闭
+      if (this.isRepairman)
+        return
+      console.log('关闭用户对话框')
+      if (!user.lineState) { // 如果用户已经离线，直接删除,发请求回报错，导致关闭不了
+        this.users.splice(index, 1)
+        return
+      }
+      let http = new HttpResetClass()
+      http.load('POST', `${this.$androidUtil.getProxyUrl()}/TDual`, {
+        aId: this.dualId,
+        aBzType: "abort",
+        aName:this.dualName,
+        openId: user.openId,
+        gh_id:user.gh_id,
+      }, {resolveMsg: null, rejectMsg: null}).then((res) => {
+        console.log('关闭用户对话框', res)
+        this.users.splice(index, 1)
+      })
+    },
+    // 滚动到文字信息底部
+    scrollBottom() {
+      this.$nextTick(() => {
+        this.$els.msgs.scrollTop = this.$els.msgs.scrollHeight
+
+      })
+    },
+    // 处理离线用户
+    turnOff(openId) {
+      let index = this.users.findIndex((user, index, arr) => {
+        return user.openId === openId
+      })
+      this.users[index].lineState = false
+    },
+    // 当有滚动事件时，滚轮事件被屏蔽掉
+    // 滚动事件
+    scroll(e) {
+      // console.log('滚动事件', e)
+      if (e.target.scrollTop === 0) {
+        this.isTop = true
+      } else {
+        this.isTop = false
+      }
+    },
+    // 触屏滑动事件
+    touchStart(e) { // 触屏开始位置
+      this.start_Y = e.changedTouches[0].pageY
+    },
+    touchEnd(e) { // 滑动当前位置
+      let end_Y = e.changedTouches[0].pageY
+      if (end_Y - this.start_Y > 50) {
+        // 下滑加载
+        console.log('发生滑动时间：' + e)
+        this.loadHistory(e)
+      }
+    },
+    // 滚轮事件，为解决刚进来没有滚动时，加载历史记录
+    wheelUp(e) {
+      if (e.wheelDelta > 0) {
+        console.log('发生滚轮时间：' + e)
+        this.loadHistory(e)
+      }
+    },
+    loadHistory(e) {
+      if (this.isTop) { // 加载历史开始了
+        if (this.users.length == 0 || !this.users[this.active].openId)
+          return
+        let dt = ''
+        // 如果维修员想要查看历史消息，但是还没有聊天的情况下，
+        if (this.users[this.active].msgs.length == 0)
+          dt = Util.toStandardTimeString()
+        else
+          dt = `20${this.users[this.active].msgs[0].date} ${this.users[this.active].msgs[0].time}`
+        this.$resetpost(`${this.$androidUtil.getProxyUrl()}/rs/sql/tel_getChatHistory`,
+          {
+            data: {
+              f_dt: dt,
+              f_open_id: this.users[this.active].openId
+            }
+          },
+          {resolveMsg: null, rejectMsg: null}).then((res) => {
+          console.log('加载到的数据是', res)
+          if (res.data.length > 0) {
+            let msgs = []
+            res.data.forEach((item) => {
+              if (item.f_msg_type !== 'system') {
+                let msg = {
+                  content: item.f_content,
+                  date: item.f_dt.split(' ')[0].substring(2, item.f_dt.split(' ')[0].length),
+                  time: item.f_dt.split(' ')[1],
+                  media: "",
+                  msgType: item.f_msg_type,
+                  name: (item.f_msg_direction === '发送') ? (item.f_repairman ? item.f_repairman : null) : item.f_user_name,
+                  openId: item.f_open_id,
+                  gh_id:item.gh_id,
+                  sessionId: item.f_session_id,
+                  thumbnail: item.f_thumbnail,
+                  userId: item.f_user_id
+                }
+                if (item.f_msg_direction === '发送') {
+                  msg.aBzType = "send"
+                  msg.branch = this.fengongsi
+                  msg.gh_id=this.gh_id
+                }
+                if (item.f_msg_type === 'video' || item.f_msg_type === 'voice' || item.f_msg_type === 'image') {
+                  console.log('聊天历史消息：', JSON.stringify(item))
+                  if (item.f_msg_direction === '发送') { // 话务员发送的消息
+                    msg.src = `${this.$androidUtil.getProxyUrl()}/materials/${item.f_file_name}`
+                    msg.src_img = `${this.$androidUtil.getProxyUrl()}/materials/${item.thumbnail}`
+                  } else { // 用户发送的消息
+                    msg.src = `${this.$androidUtil.getProxyUrl()}/umaterials/${item.f_content}`
+                    msg.src_img = `${this.$androidUtil.getProxyUrl()}/umaterials/${item.f_thumbnail}`
+                  }
+                }
+                msgs.push(msg)
+              }
+            })
+            console.log('组成消息组是', msgs)
+            this.users[this.active].msgs.unshift(...msgs)
+          } else { // 没有记录了
+            this.$showAlert('没有记录了', 'warning', 1000)
+          }
+        })
+        // console.log('向上滚')
+        // console.log(e.target.scrollTop)
+      } else {
+        // console.log('向下滚')
+      }
+    },
+    // 自文本内容中加入小图标
+    contentAddIcon(key, emoji) {
+      // 获取焦点，防止选择表情无法输入
+      let el = this.$els.content
+      el.focus() // 获取焦点
+      // 将光标定位到文档最后
+      let range = document.createRange();
+      range.selectNodeContents(el);
+      range.collapse(true);
+      range.setEnd(el, el.childNodes.length);
+      range.setStart(el, el.childNodes.length);
+      let sel = window.getSelection();
+      sel.removeAllRanges();
+      sel.addRange(range);
+      // 定位光标后
+      this.content += key
+      document.execCommand('insertImage', false, `static/wechat/${emoji}`)
+    },
+    // 按键事件
+    handleKeys(event) {
+      if (event.which === 9) event.preventDefault()
+      if (event.which === 13 && event.ctrlKey) {
+        event.preventDefault()
+        this.send('text')
+      }
+      // if (event.which === 13 && event.ctrlKey){
+      // 	this.content = this.$els.content.innerHTML
+      // }
+      // console.log('this.content---->', this.content)
+    },
+    // 内容发生变化
+    contentChanged() {
+      if (this.$els.content.innerHTML === '') {
+        return
+      }
+      this.content = emoji.editorChange(this.$els.content.innerHTML)
+    },
+    // insertTextAtCursor () {
+    //   let sel
+    //   if (window.getSelection) {
+    //       sel = window.getSelection();
+    //       if (sel.getRangeAt && sel.rangeCount) {
+    //           range = sel.getRangeAt(0)
+    //           range.deleteContents()
+    //       }
+    //   }
+    // }
+    // insertTextAtCursor(text) {
+    //     var sel, range, html;
+    //     console.log('11111111111',  window.getSelection())
+    //     if (window.getSelection) {
+    //         sel = window.getSelection();
+    //         if (sel.getRangeAt && sel.rangeCount) {
+    //             range = sel.getRangeAt(0);
+    //             range.deleteContents();
+    //             // range.insertNode( document.createTextNode(text) );
+    //         }
+    //     } else if (document.selection && document.selection.createRange) {
+    //         // document.selection.createRange().text = text;
+    //     }
+    // },
+    // saveSelection () {
+    //   if (window.getSelection) {
+    //     sel = window.getSelection()
+    //     if (sel.getRangeAt && sel.rangeCount) {
+    //       return sel.getRangeAt(0)
+    //     }
+    //   } else if (document.selection && document.selection.createRange) {
+    //     return document.selection.createRange()
+    //   }
+    //   return null
+    // },
+    // restoreSelection(range) {
+    //   if (range) {
+    //     if (window.getSelection) {
+    //       sel = window.getSelection()
+    //       sel.removeAllRanges()
+    //       sel.addRange(range)
+    //     } else if (document.selection && range.select) {
+    //       range.select()
+    //     }
+    //   }
+    // }
+  },
+  beforeDestroy() {
+    clearInterval(this.interval)
+    let gen = outGen(this)
+    co(gen)
+  },
+  computed:{
+    reply() {
+      return this.$appdata.getParam('快速回复')
+    }
+
+  },
+}
+</script>
+<style scoped>
+  .text-editor {
+    flex: 1;
+  }
+
+  div[contenteditable=true] {
+    outline: none;
+    border-top: 1px solid #DDD;
+    overflow: auto;
+    background: #FFF;
+    padding: 5px 10px;
+  }
+
+  div[contenteditable=true] div {
+    height: auto;
+  }
+
+  div[contenteditable=true] img {
+    width: 25px;
+  }
+
+  .send-msg {
+    /*position: relative;*/
+    display: flex;
+    height: 120px;
+    flex-direction: column;
+  }
+
+  .send-msg > button {
+    /*position: absolute;*/
+    right: 20px;
+    bottom: 5px;
+    padding: 3px 20px;
+  }
+
+  /* 文字客服页签样式 */
+  /* .text-server .flex {
+    display: flex;
+    flex-direction: row;
+  } */
+  .text-server .flex-row > ul {
+    background: #009BDB;
+    width: 60px;
+
+  }
+
+  .text-server .flex-row > ul > li {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+  }
+
+  .text-server .flex-row > ul > li > a {
+    border-bottom: none;
+    /* background: #FFF; */
+    padding: 0px;
+    margin-right: 0px;
+    line-height: 40px;
+    text-align: center;
+    font-size: 1.2em;
+    width: 40px;
+    height: 40px;
+    margin: 5px 0px;
+    border-radius: 50%;
+  }
+
+  .text-server .flex-row > ul > li.active {
+    background: rgba(255, 255, 255, 0.3);
+  }
+
+  .text-server ul > li > a > span {
+    display: inherit;
+  }
+
+  /* 关闭按钮  badge glyphicon style="position: absolute;right: -5px;top: 0px;background: #F61003;" */
+  #text-service > ul > li > a {
+    position: relative;
+  }
+
+  #text-service > ul > li > a > .glyphicon {
+    display: none;
+  }
+
+  #text-service > ul > li > a > .badge {
+    /* display: initial; */
+    position: absolute;
+    right: -5px;
+    top: 0px;
+    background: #F61003;
+  }
+
+  #text-service > ul > li > a:hover > .glyphicon {
+    display: initial;
+    position: absolute;
+    /* font-size: 13px; */
+    background-color: rgb(255, 255, 255, 0.5);
+    right: -5px;
+    top: 0px;
+  }
+
+  /* 当鼠标悬停在游湖头像时，未读消息显示隐藏，关闭按钮显示 */
+  #text-service > ul > li > a:hover > .badge {
+    display: none;
+  }
+
+  #text-service > ul > li > a:hover > .glyphicon:hover {
+    background-color: #F61003;
+    color: #FFF;
+    /* color: #5CBDED; */
+  }
+
+  .offline {
+    background: #888 !important;
+  }
+
+</style>