lshcomment 1.0.0

package/src/components/call-popup/index.vue

@@ -0,0 +1,1318 @@
+<template>
+  <div id="callCenter_demo">
+    <div class="telephone-box">
+      <div class="left-box">
+		  <div v-show="storeShow" class="store-name">
+			  {{ transferStoreName + '转入' }}
+        <div v-show="isCalling" class="ringing">
+          通话中
+        </div>
+		  </div>
+		  
+
+		  <div class="right-box">
+			  <!-- <img src="../../assets/img/call-conference-end.png" alt=""/>
+			  <img src="../../assets/img/call-conference.png" @click="getPhone('发起会议')" alt=""/>
+			  <img src="../../assets/img/call-consult-end.png" alt="" />
+			  <img src="../../assets/img/call-consult.png" alt="" />
+			  <img src="../../assets/img/call-hang-up.png" alt="" @click="cancelmakecall"/>
+			  <img src="../../assets/img/call-hold.png" alt="" />
+			  <img src="../../assets/img/call-holding.png" alt=""/>
+			  <img src="../../assets/img/call-transfer-end.png" alt="" />
+			  <img src="../../assets/img/cancle-keep.png" alt="" />
+			  <img src="../../assets/img/call-transfer.png" alt="" />
+			  <img src="../../assets/img/call.png" alt="" @click="callout" />
+			  <p>1122222</p> -->
+			  <div>
+				  <img
+					  v-if="!huiyi"
+					  src="../../assets/img/call-conference-end.png"
+					  alt=""
+					  title="会议"
+				  />
+				  <img
+					  v-if="huiyi"
+					  src="../../assets/img/call-conference.png"
+					  alt=""
+					  title="发起会议"
+					  @click="talk"
+				  />
+			  </div>
+			  <div>
+				  <img
+					  v-show="!conferenceConfigOut"
+					  v-if="!conferenceConfig"
+					  src="../../assets/img/call-consult-end.png"
+					  alt=""
+					  title="咨询"
+				  />
+			  </div>
+			  <div>
+				  <img
+					  v-show="!conferenceConfigOut"
+					  v-if="conferenceConfig"
+					  src="../../assets/img/call-consult.png"
+					  alt=""
+					  title="发起咨询"
+					  @click="getPhone('发起咨询')"
+				  />
+				  <img
+					  v-if="conferenceConfigOut"
+					  src="../../assets/img/call-consult-out.png"
+					  alt=""
+					  title="结束咨询"
+					  @click="consultback"
+				  />
+			  </div>
+			  <div>
+				  <img
+					  v-if="!quxiaobaochiFlag && quxiaobaochi"
+					  src="../../assets/img/call-hold.png"
+					  alt=""
+					  title="保持"
+					  @click="keep"
+				  />
+			  </div>
+			  <div>
+				  <img
+					  v-if="!quxiaobaochi"
+					  src="../../assets/img/call-holding.png"
+					  alt=""
+					  title="保持"
+				  />
+			  </div>
+			  <div>
+				  <img
+					  v-if="quxiaobaochiFlag && quxiaobaochi"
+					  src="../../assets/img/cancle-keep.png"
+					  alt=""
+					  title="取消保持"
+					  @click="unkeep"
+				  />
+			  </div>
+			  <div>
+				  <img
+					  v-if="!conferenceConfig"
+					  src="../../assets/img/call-transfer-end.png"
+					  alt=""
+					  title="转接"
+				  />
+			  </div>
+			  <div>
+				  <img
+					  v-if="conferenceConfig"
+					  src="../../assets/img/call-transfer.png"
+					  alt=""
+					  title="发起转接"
+					  @click="getPhone('发起转接')"
+				  />
+			  </div>
+			  <div>
+				  <img
+					  v-if="callConfig"
+					  src="../../assets/img/call.png"
+					  alt=""
+					  title="呼叫"
+					  @click="callout"
+				  />
+			  </div>
+			  <!-- ||!outFlag -->
+			  <div>
+				  <img
+					  src="../../assets/img/call-hang-up.png"
+					  alt=""
+					  title="挂机"
+					  v-if="!callConfig ||!outFlag "
+					  v-show="close"
+					  @click="cancelmakecall"
+				  />
+			  </div>
+			  <!-- <img src="../../assets/img/call-holding.png" alt=""/>
+			  <img src="../../assets/img/call-transfer-end.png" alt=""/> -->
+			  <!-- <img :src="getUrl('/src/assets/img/call.png')" alt="" /> -->
+		  </div>
+
+      </div>
+    </div>
+    <!--		<el-select style="position: absolute; bottom: -36px" v-model="statusValue" placeholder="请选择" @change="changeValue">-->
+    <!--			<el-option-->
+    <!--			v-for="item in status"-->
+    <!--			:key="item.value"-->
+    <!--			:label="item.label"-->
+    <!--			:value="item.value">-->
+    <!--			</el-option>-->
+    <!--		</el-select>-->
+    <!-- 呼叫 输入框+按钮 -->
+    <el-row style="position: absolute; top:-50px; left: 88px;width: 300px;z-index: 1;" v-show="inputVisible" :gutter="3">
+     <el-col :span="15">
+       <el-input class="photoinput" size="small" v-model="inputNumber" placeholder="请输入手机号" @keyup.enter.native="enterQuery" />
+     </el-col>
+      <el-col :span="6">
+       <el-button size="small" style="height: 30px;background: #1A6BE6;color: #fff;border: 1px solid #1A6BE6;" @click="calloutConfirm">呼叫</el-button>
+     </el-col>
+    </el-row>
+    <!-- 转接 @change="changePhone" v-show="showPhoneList" -->
+    <el-row  :gutter="3" v-show="showPhoneList" style="position: absolute;top:-10px; left: 88px;width: 300px;z-index: 1;">
+     <el-col :span="15">
+       <!-- <el-select
+		   size="small"
+         v-model="transferPhone"
+         filterable
+         :filter-method="inputTransferPhone"
+         placeholder="请选择"
+       >
+         <el-option v-for="item in phoneList" :key="item.value" :label="item.label" :value="item.value" />
+       </el-select> -->
+       <el-input size="small" v-model="transferPhone" placeholder="请输入手机号"/>
+     </el-col>
+     <el-col :span="6">
+       <el-button size="small" style="height: 30px;" @click="transfercallUp">
+         {{ btnText}}
+       </el-button>
+     </el-col>
+    </el-row>
+    <el-row v-show="showPhoneList"  style="position: absolute;top:40px; left: 88px;width: 300px;z-index: 1;">
+      <el-col :span="24">
+        <div class="phlist">
+          <div v-for="(item, index) in phoneList" :key="index">
+            <h2>{{ item.groupname }}<span class="green">[空闲坐席{{ item.agents.length }}]</span></h2>
+            <p v-for="(em, index) in item.agents" :key="index" @click="setUpPhone(em.agent)" class="flex"> 
+              <span>{{ em.agent }}</span>
+              <span style="margin-left: 30px;">{{ em.name }}</span>
+            </p>
+          </div>
+       </div>
+      </el-col>
+    </el-row>
+    <!-- <el-button @click="consultup">咨询</el-button>
+    <el-button @click="talk">发启会议</el-button> -->
+    <!--		<div style="color:red">{{ error }}</div>-->
+    <!-- <div id="CallCenter_title">
+      <el-button @click="callout" v-if="statusValue === 1">外呼</el-button>
+      <el-button @click="cancelmakecall">挂机</el-button>
+      <el-button @click="getPhone">获取空闲坐席</el-button>
+      <el-button @click="getPhone">转接(通话中状态)</el-button>
+      <el-button @click="answers">接听</el-button>
+      <el-button @click="getPhone">会议</el-button>
+      <el-button @click="consultback">咨询结束</el-button>
+      <el-button @click="getPhone">发起咨询</el-button>
+      <el-button @click="keep">保持</el-button>
+      <el-button @click="unkeep">取消保持</el-button>
+    </div> -->
+    <div id="CallCenter_body">
+      <!-- -->      <br />
+      <!-- <el-button type="primary" @click="getIdleagents">获取空闲坐席</el-button>
+      <el-button type="primary" @click="cancelmakecall">坐席挂机</el-button> -->
+    </div>
+  </div>
+</template>
+
+<script>
+/*
+ * 手机号码需要加前缀9，非泰安号码需要加90.。回呼拨打05386591817 转到这5位坐席，泰安本地拨打6591817 转到这5位坐席
+ * */
+import Vue from 'vue'
+import { mapState, mapGetters, mapActions, mapMutations } from 'vuex'
+import api from 'common/api'
+const $message = Vue.prototype.$message
+const CallCenter = window.CallCenter
+import {ASSISTANT_SERVICE } from 'common/resource-btn'
+	import { showBtn ,getType} from 'common/api-common'
+
+const eventCallinfo = (json) => {
+  // 监听callinfo事件获取初始化的通话信息
+  console.log('<===================eventCallinfo=======================>')
+  // aftertime_today: 3520
+  // avgtimes: 0
+  // busytime_today: 546
+  // cmdtype: 1
+  // totalservicetime: 0
+  // totaltimes: 0
+  // totaltimes_today: 13
+  // type: "callinfo"
+  console.log(json)
+}
+
+CallCenter.opLogin_callback = (json) => {
+  console.log('<===================eventLogon=======================>')
+  console.log(json)
+  $message({
+    type: 'error',
+    message: `${json.code + ": " + json.info}`
+  })
+}
+// 外呼
+CallCenter.addEventListener('callinfo', eventCallinfo)
+/*外呼 文档6.1*/
+// makecall --> outringing --> outcall --> calledringring --> answer --> cancelmakecall --> after
+// 监听外呼坐席振铃事件
+// CallCenter.addEventListener('outringing',(json) => {
+//   console.log('zl66678888',json)
+//   this.statusValue = 0
+//   this.error = '0000000000000'
+//   this.$set(this, 'statusValue', 0)
+//   // this.$set(this.statusValue, '', 0)
+//   console.log(555, this, this.$data, window, this.statusValue)
+// })
+/*保持*/
+/*班长坐席功能*/
+/*转接、咨询*/
+
+// 转接IVR
+CallCenter.addEventListener('transferservice', function (json) {
+  // json 响应数据
+  console.log('转接transferservice', json)
+  if (json.status && json.status != 0) {// 状态码 0 正常 非0 错误
+    // this.error = json.reason
+    $message({
+      type: 'error',
+      message: json.reason
+    })
+  }
+})
+/*呼入 文档6.2*/
+export default {
+  props: {
+    statusValue: {
+      type: Number || String,
+      default: 0
+    },
+    statusListValue: {
+      type: Number
+    },
+    mobileNo: {
+      type: String,
+      default: ''
+    }
+  },
+
+  data() {
+    return {
+      loginUrl:'',
+      close: true,
+      // statusValue: 0,
+      // error: '错误消息提示',
+      loginInfo: {},
+      userInfo: {
+        preNum: '9', // 9
+        telephone: '02153520069', //02153520069
+        callType: '', // 手机号码需要加前缀9，非泰安号码需要加90
+        data: {
+          userData: { caller: '1234567', called: '1234567',...this.setFollowData() },
+          uuiData: '1542587745887744',
+          autoAnswer:"intercom",
+        }
+      },
+      // status: [{
+      // 	value: 1,
+      // 	label: '示闲'
+      // },{
+      // 	value: 0,
+      // 	label: '示忙'
+      // },{
+      // 	value: 2,
+      // 	label: '登录'
+      // },{
+      // 	value: 3,
+      // 	label: '休息'
+      // }],
+      phoneList: [], // 转接的电话集合
+      transferPhone: '',
+      conferenceConfig: false,
+      // conferenceEndConfig: true,
+      callConfig: true,
+      huiyi: false,
+      outFlag: true, // 呼入外呼flag,默认外呼
+      quxiaobaochi: false,
+      zixun: false,
+      showPhoneList: false,
+      btnText: '',
+      quxiaobaochiFlag: false,
+      isCalling: false,
+      storeShow: false,
+      inputVisible: false,
+      inputNumber: '',
+      istransfer: false,
+      origcaller:'',
+      callid:'',
+      conferenceConfigOut: false, // 结束咨询
+      transferStoreName: '',
+      addCallLog:[]
+    }
+  },
+
+  computed: {
+    ...mapState('customerPortrayal', [
+      'customerPhoneNo',
+      'portrayalVisible',
+      'customerInfo'
+    ]),
+    userInfos () {
+      return JSON.parse(sessionStorage.getItem('userInfo'))
+    },
+    hasAssistantService(){
+				return showBtn(ASSISTANT_SERVICE)
+			}
+  },
+
+  watch: {
+     portrayalVisible: {
+      handler(val) {
+        if(val === false) {
+          this.$nextTick(() => {
+            // 查询空的电话号码
+            this.inputVisible = false
+            this.inputNumber = '9' + ''
+          })
+        }
+      },
+      deep: true,
+      immediate: true
+    },
+    statusValue: {
+      immediate: true,
+      handler(val) {
+        console.log(val, '示闲1,示忙0')
+        // 示闲
+        if (val === 1) this.free()
+        // 示忙
+        if (val === 0) this.busy()
+      }
+    },
+    statusListValue: {
+      immediate: true,
+      handler(val) {
+        console.log(val, '登出3,登录2')
+        // 登出
+        if (val == 3) this.opLogout()
+        // 登录
+        if (val == 2) this.opLogin()
+      }
+    }
+  },
+
+  mounted() {
+     getType("CtiLoginUrl", items => {
+                this.loginUrl = items.map(item => {
+                    return {
+                        text: item.refDetailName,
+                        value: item.refDetailValue
+                    }
+                })
+                console.log(this.loginUrl,'loginUrl=============================');
+            })
+    this.getNowStatus()
+    console.log(222, this.userInfos)
+    console.log('环境变量',window.location.protocol)
+    this.$nextTick(() => {
+      console.log("->>>>>>>>>>>>>>>>>>");
+      CallCenter.addEventListener('outringing', (json) => { this.eventOutringing(json)})
+
+      // 监听外呼坐席摘机事件
+      CallCenter.addEventListener('outcall', (json) => {this.eventOutcall(json)})
+      // 监听外呼用户振铃事件
+      CallCenter.addEventListener('calledringing', (json) => {this.eventCalledringing(json)})
+      // 监听外呼用户摘机事件
+      CallCenter.addEventListener('answer', (json) => { this.eventAnswer(json)})
+      // 坐席主动挂机
+      CallCenter.addEventListener('cancelmakecall', (json) => { this.eventCancelmakeCall(json)})
+      // 结束
+      CallCenter.addEventListener('after', (json) => { this.eventAfter(json)})
+      // 呼入流程
+      // 座席端振铃
+      CallCenter.addEventListener('inringing', (json) => { this.eventInringing(json) })
+      // 坐席呼叫坐席，监听振铃
+      CallCenter.addEventListener('innerringing', (json) => { this.eventInnercall(json) })
+      // 坐席转接坐席，坐席接通
+      // CallCenter.addEventListener('innerringing', (json) => { this.eventInnerringing(json) })
+
+      // 播放TTS
+      CallCenter.addEventListener('playtts', (json) => { this.eventPlaytts(json)})
+      // 坐席端摘机事件
+      CallCenter.addEventListener('incall', (json) => { this.eventIncall(json) })
+      // 坐席摘机事件
+      CallCenter.addEventListener('innercall', (json) => { this.eventInnercall(json) })
+      // 转接
+      CallCenter.addEventListener('transfercall', (json) => { this.eventTransfercall(json) })
+      // 被转接方接听时间
+      CallCenter.addEventListener('transferinringing', (json) => { this.eventTransferinringing(json) })
+      CallCenter.addEventListener('transferincall', (json) => { this.eventTransferincall(json) })
+      // 被咨询方
+      CallCenter.addEventListener('consultinringing', (json) => { this.eventConsultinringing(json) })
+      CallCenter.addEventListener('consultincall', (json) => { this.eventConsultincall(json) })
+      // 监听转接处理中事件
+      CallCenter.addEventListener('transfering', (json) => { this.eventTransfering(json) })
+      // 监听获取空闲坐席电话
+      CallCenter.addEventListener('idleagents', (json) => { this.eventIdleagents(json)})
+      // 保持
+      CallCenter.addEventListener('mute', (json) => { this.eventMute(json) })
+      CallCenter.addEventListener('unmute', (json) => { this.eventUnMute(json) })
+      // 监听咨询到号码事件获取响应
+      CallCenter.addEventListener('agentconsult', (json) => { this.eventAgentconsult(json)})
+      // 监听被咨方摘机事件
+      CallCenter.addEventListener('consultationcalls', (json) => { this.eventConsultationcalls(json)})
+      // 监听咨询结束
+      CallCenter.addEventListener('agentconsultback', (json) => { this.eventAgentconsultback(json)})
+      // 会议
+      // 监听事件获取三方通话响应
+      CallCenter.addEventListener('tripartitetalk', (json) => { this.eventTripartitetalk(json)})
+      // 监听三方通话中事件，各路通话都能收到 sanfangcall 事件，表示三方会话已建立
+      CallCenter.addEventListener('sanfangcall', (json) => { this.eventSanfangcall(json) })
+      // 监听第三房挂断
+      CallCenter.addEventListener('leaveconf', (json) => { this.eventLeaveConf(json) })
+      // 随录事件
+      CallCenter.addEventListener('saveOrUpdataFollowData', (json) => {this.eventSaveOrUpdataFollowData(json)})
+      CallCenter.addEventListener('followDataUpdated', (json) => {this.eventFollowDataUpdated(json)})
+      // 外呼事件响应
+      CallCenter.addEventListener('makecall', (json) => {this.eventMakecall(json)})
+      // 示闲事件响应
+      CallCenter.addEventListener('agentidle', (json) => {this.eventAgentidle(json)})
+      // 示忙事件响应
+      CallCenter.addEventListener('agentbusy', (json) => {this.eventAgentbusy(json)})
+      // 登录事件响应
+      CallCenter.addEventListener('logon', (json) => {this.eventLogon(json)})
+      // 登出事件响应
+      CallCenter.addEventListener('logout', (json) => {this.eventLogout(json)})
+    })
+    // 自动登录
+    // // this.opLogin()
+    // document.addEventListener('click', (e) => {
+    //     
+    //     this.phoneList = []
+    // })
+  },
+
+  methods: {
+    hidePhoneList(){
+      this.showPhoneList = false
+    },
+    setUpPhone (num) {
+      this.transferPhone = num
+    },
+    // 获取当前的电话状态
+    getNowStatus() {
+      const status = CallCenter.getStatus()
+      const islogin = CallCenter.isLogin ()
+      console.log('当前状态测试', status)
+      console.log('当前登录状态', islogin)
+      this.$emit('',islogin, status)
+      this.saveStatus(status)
+      this.savelogin(islogin)
+    },
+    // 获取登录状态
+    
+    // input 回车事件， 1：呼叫
+    enterQuery () {
+      if (this.inputNumber.length === 12){
+        this.savePhoneNo(this.inputNumber.slice(1,this.inputNumber.length))
+        this.$emit('handleQueryPortrayal', this.inputNumber.slice(1,this.inputNumber.length))
+
+      }
+      if (this.inputNumber.length === 13) {
+         this.savePhoneNo(this.inputNumber.slice(2,this.inputNumber.length))
+         this.$emit('handleQueryPortrayal', this.inputNumber.slice(2,this.inputNumber.length))
+      }
+    },
+    ...mapActions({
+      savePhoneNo: 'customerPortrayal/getCustomerPhoneNo',
+      savePortrayalVisible: 'customerPortrayal/getPortrayalVisible',
+      saveStatus: 'customerPortrayal/getStatus',
+      savelogin: 'customerPortrayal/isLogin',
+      saveStoreInfo: 'customerPortrayal/getStoreInfo',
+    }),
+	  postEmpInfo(){
+    	const param = { caller: "1234567", called: "1234567" ,...this.setFollowData()}
+    	// console.log(api)
+    	api.liApi.callLog.postEmpInfo(param,res=>{})
+      // 保存客户信息
+      if (this.customerInfo.custName) {
+        api.liApi.portrayal.postCustInfo({ ...this.customerInfo, callId: this.callid }, res=>{})
+      }
+	  },
+    eventConsultincall (json) {
+      // console.log('被咨询方', json)
+      // 监听被咨询方
+      this.istransfer = true
+      this.eventTransferincall(json)
+      this.conferenceConfig = false
+      this.quxiaobaochi = false
+      this.quxiaobaochiFlag = true
+    },
+    getUrl(path) {
+      const env = process.env.NODE_ENV
+      const origin = window.location.origin
+      return env == 'development' ? path : `${origin}/livecs${path}`
+    },
+    eventTransferincall (json) {
+      // console.log('eventTransferincall',json)
+      if(this.hasAssistantService){
+          this.$emit('open',true)
+      }
+      this.callConfig = false
+      this.conferenceConfig = true
+      this.quxiaobaochi = true
+      this.quxiaobaochiFlag = false
+    },
+    eventInnerringing (json) {
+      console.log('eventInnerringing',json)
+      console.log('呼入Innerringing=================================+++++', json)
+      this.outFlag = false
+      this.savePortrayalVisible(true)
+      if (json.origcaller.length === 12){
+        this.savePhoneNo(json.origcaller.slice(1,json.origcaller.length))
+      }
+      else if (json.origcaller.length === 13) {
+          this.savePhoneNo(json.origcaller.slice(2,json.origcaller.length))
+      }
+      else {
+        this.savePhoneNo(json.origcaller)
+      }
+      // 
+      this.$emit('isCallingTrue')
+      $message({
+        type: 'success',
+        message: `${json.origcaller} 来电, 请接听`
+      })
+    // 查询信息
+    this.$emit('handleQueryPortrayal')
+		this.callid = json.callid
+    this.$emit('makeCallid', json.callid)
+		this.origcaller =json.origcaller
+    },
+    eventTransferinringing (json) {
+     
+      this.storeShow = true
+      this.transferStoreName = json.followData.storeName
+      console.log('eventTransferinringing',json)
+      this.outFlag = false
+      this.savePortrayalVisible(true)
+      // this.savePhoneNo(json.caller)
+      if (json.dir == 0 || !json.dir) {
+        if (json.caller.length === 12){
+          this.savePhoneNo(json.caller.slice(1,json.caller.length))
+        } else if (json.caller.length === 13) {
+          this.savePhoneNo(json.caller.slice(2,json.caller.length))
+        }else {
+          this.savePhoneNo(json.caller)
+        }
+      } else {
+        if (json.called.length === 12){
+          this.savePhoneNo(json.called.slice(1,json.called.length))
+        } else if (json.called.length === 13) {
+          this.savePhoneNo(json.called.slice(2,json.called.length))
+        }else {
+          this.savePhoneNo(json.called)
+        }
+      }
+      this.$emit('isCallingTrue')
+      this.$emit('handleQueryPortrayal')
+      this.$emit('makeCallid', json.callid)
+
+    },
+    eventConsultinringing (json) {
+      this.eventTransferinringing(json)
+    },
+    eventSaveOrUpdataFollowData(json) {
+      console.log("==========SaveOrUpdataFollowData=========")
+      console.log(json)
+    },
+
+    eventFollowDataUpdated(json) {
+      console.log("==========FollowDataUpdated=========")
+      console.log(json)
+    },
+
+    // 电话切换
+    changePhone(val) {
+      if (this.btnText == '发起转接') {
+        // 转接
+        CallCenter.transfercall(val, null, {
+          userData: {caller: '1234567', called: '1234567',...this.setFollowData()},
+          uuiData: '1542587745887744',
+          // outCall: true, //对内不需要，对外才加
+        })
+      } else {
+        // 咨询
+        this.consultup(val)
+      }
+    },
+
+    //监听会议结束
+    eventLeaveConf(json) {
+      console.log('监听会议结束')
+      this.huiyi = false
+      this.conferenceConfigOut = false
+      // 第三方会议模式下，结束会议，不弹窗
+      // this.istransfer = true
+    },
+
+    eventTripartitetalk(json) {
+      console.log('发起会议')
+    },
+
+    eventSanfangcall(json) {
+      console.log('三方通话已建立')
+    },
+
+    // 咨询
+    eventAgentconsult(json) {
+      if (json.status && json.status != 0) {// 状态码 0 正常 非0 错误
+        // this.error = json.reason
+        $message({
+          type: 'error',
+          message: json.reason
+        })
+      }
+      console.log('发起咨询333')
+      //this.huiyi = true
+    },
+
+    eventConsultationcalls(json) {
+      this.huiyi = true
+      this.conferenceConfigOut = true
+      // this.conferenceConfig = false
+      console.log(json, '发起咨询摘机')
+      if (json.status && json.status != 0) {// 状态码 0 正常 非0 错误
+        // this.error = json.reason
+        $message({
+          type: 'error',
+          message: json.reason
+        })
+      }
+    },
+
+    // 咨询结束
+    eventAgentconsultback(json) {
+      this.conferenceConfigOut = false
+      if (json.status && json.status != 0) {// 状态码 0 正常 非0 错误
+        // this.error = json.reason
+        $message({
+          type: 'error',
+          message: json.reason
+        })
+      }
+      console.log(json, '发起咨询结束')
+      this.showPhoneList = false
+      // this.btnText = '发起咨询'
+      this.huiyi = false
+    },
+
+    // 保持通话
+    eventMute(json) {
+      
+      console.log('保持')
+      // 除会议外其他都可点击
+      this.conferenceConfig = false
+      this.huiyi = false
+      this.quxiaobaochi = true
+      this.quxiaobaochiFlag = true
+      // 保持通话不可点击挂机按钮
+      this.close = false
+    },
+
+    // 取消保持通话
+    eventUnMute(json) {
+      console.log('取消保持, 状态有疑问，取消保持后转接，咨询为什么不能点击？')
+      // 除挂机，取消保持外其他都不可点击
+      this.conferenceConfig = true
+      this.huiyi = false
+      this.quxiaobaochi = true
+      this.quxiaobaochiFlag = false
+      // 保持通话不可点击挂机按钮
+      this.close = true
+    },
+
+    eventIdleagents(json) {
+      console.log('<===================获取空闲坐席=======================>')
+      console.log(json)
+      this.phoneList = json.data
+      // this.phoneList = json.data.map(({ groupname: label, groupid: value }) => ({ label: value + ' ' + label, value }))
+      console.log(this.phoneList)
+      // 显示电话列表
+      this.showPhoneList = true
+    },
+
+    eventTransfering(json) {
+      console.log('转接transfering', json)
+      $message({
+        type: 'success',
+        message: '正在转接，请稍后'
+      })
+      this.istransfer = true
+      if (json.status && json.status != 0) {// 状态码 0 正常 非0 错误
+        // this.error = json.reason
+        $message({
+          type: 'error',
+          message: json.reason
+        })
+      }
+    },
+
+    eventTransfercall(json) {
+      // console.log('我草我我熬殴打哇哦哇哦多按我的殴打哇哦欧狄沃哇哦++++++++++++++', json)
+      if (json.status && json.status != 0) {// 状态码 0 正常 非0 错误
+        // this.error = json.reason
+        // $message({
+        // 	type: 'success',
+        // 	message: json.reason
+        // })
+        $message({
+          type: 'error',
+          message: json.reason
+        })
+      }
+    },
+    // 呼入坐席摘机事件，除会议外其他都可点击
+    eventIncall(json) {
+      console.log(123123,json);
+      let time;
+      if(!time){
+      time = setTimeout(()=>{
+      time = null;
+      const arr = JSON.parse(sessionStorage.getItem('userInfo')).empVo
+      const orgName = JSON.parse(sessionStorage.getItem('userInfo')).inCharegOrgVo.orgName
+      const empToken =JSON.parse(sessionStorage.getItem('userInfo')).empToken
+      if(arr.orgCode){
+        api.liApi.callLog.addCall({
+        store:orgName,
+        staffId:arr.empCode,
+        job:arr.orgCode,
+        empToken:empToken,
+        type:"呼入",
+      },res=>{
+      })
+      }
+        },2000)
+      }
+      if(this.hasAssistantService){
+          this.$emit('open',true)
+      }
+      
+      this.conferenceConfig = true
+      this.huiyi = false
+      this.quxiaobaochi = true
+      this.callConfig = false
+      // this.$emit('changeHeaderStatusValue', 0)
+    },
+    // 坐席呼叫坐席，摘机事件
+    eventInnercall(json) {
+      console.log('呼入Innercall', json)
+      
+      this.conferenceConfig = true
+      this.huiyi = false
+      this.quxiaobaochi = true
+      this.callConfig = false
+      // this.$emit('changeHeaderStatusValue', 0)
+    },
+    eventPlaytts(json) {
+      // json 响应数据
+      console.log('呼入playtts', json)
+      if (json.status && json.status != 0) {// 状态码 0 正常 非0 错误
+        // this.error = json.reason
+        $message({
+          type: 'error',
+          message: json.reason
+        })
+      }
+    },
+
+    eventInringing(json) {
+      console.log('呼入inringing', json)
+      this.outFlag = false
+      this.savePortrayalVisible(true)
+      if (json.origcaller.length === 12){
+        this.savePhoneNo(json.origcaller.slice(1,json.origcaller.length))
+      }
+      else if (json.origcaller.length === 13) {
+          this.savePhoneNo(json.origcaller.slice(2,json.origcaller.length))
+      }
+      else {
+        this.savePhoneNo(json.origcaller)
+      }
+
+      this.$emit('isCallingTrue')
+      $message({
+        type: 'success',
+        message: `${json.origcaller} 来电, 请接听`
+      })
+
+    // 查询信息
+    this.$emit('handleQueryPortrayal')
+		this.callid = json.callid
+        this.$emit('makeCallid', json.callid)
+		this.origcaller =json.origcaller
+     
+    },
+    //呼出事件 蒋书浩
+    eventOutcall(json) {
+      
+      let arr = json.followData
+      api.liApi.callLog.addCall({
+        store:arr.storeName,
+        staffId:arr.empCode,
+        empToken:JSON.parse(sessionStorage.getItem('userInfo')),
+        type:"呼出",
+        empToken:JSON.parse(sessionStorage.getItem('userInfo')).empToken,
+      },res=>{
+
+      })
+       if(this.hasAssistantService){
+        this.$emit('open',true)
+      }
+      this.callConfig = false
+      this.conferenceConfig = false
+      // this.conferenceEndConfig = true
+      
+      // this.$emit('changeHeaderStatusValue', 0)
+    },
+
+    eventCalledringing(json) {
+      console.log('<===================eventCalledringing=======================>')
+      console.log(json)
+      if (json.status && json.status != 0) { // 状态码 0 正常 非0 错误
+        // this.error = json.reason
+        $message({
+          type: 'error',
+          message: json.reason
+        })
+      }
+      this.origcaller = json.origcaller
+    },
+
+    eventAnswer(json) {
+      
+      console.log('<===================eventAnswer=======================>')
+      console.log('呼叫', json)
+      // if(json.status != 0){ // 状态码 0 正常 非0 错误
+      // 	this.error = json.reason
+      // }
+      this.conferenceConfig = !this.conferenceConfig
+      this.quxiaobaochi = !this.quxiaobaochi
+      this.huiyi = false
+      // this.$emit('changeHeaderStatusValue', 0)
+      
+    },
+
+    // 坐席主动挂机，估计后不可在点击挂机
+    eventCancelmakeCall(json) {
+      console.log('<===================eventCancelmakeCall=======================>')
+      if (json.status && json.status != 0) {// 状态码 0 正常 非0 错误
+        // this.error = json.reason
+        $message({
+          type: 'error',
+          message: json.reason
+        })
+      }
+      // this.statusValue = 0
+      // this.$emit('changeHeaderStatusValue')
+      // this.saveStatus('agentbusy')
+      this.callConfig = !this.callConfig
+      this.conferenceConfig = false
+      if (!this.istransfer) this.$emit('showDialog')
+      this.showPhoneList = false
+      // this.istransfer = false
+      this.transferStoreName = ''
+      this.$emit('clearData')
+      setTimeout(()=>{
+        this.$emit('changeHeaderStatusValue', 1)
+        // this.saveStatus('agentbusy')
+        // this.saveStatus('agentidle')
+        this.free()
+      }, 1000)
+    },
+
+    eventAfter(json) {
+      // json 响应数据
+      // json.cause 挂机原因码，详见【附1：挂机原因说明】
+      console.log('<===================eventAfter=======================>')
+      $message({
+        type: 'success',
+        message: json.causeMsg
+      })
+      this.transferStoreName = ''
+      this.outFlag = true
+      this.conferenceConfig = false
+      this.conferenceConfigOut = false
+      this.callConfig = true
+      this.huiyi = false
+      if (!this.istransfer) this.$emit('showDialog')
+      this.quxiaobaochi = false
+      console.log(json)
+      this.showPhoneList = false
+      this.$emit('isCallingFalse')
+      this.istransfer = false
+      this.storeShow = false
+      // post
+      this.postEmpInfo()
+      // 通话结束后，状态转为示忙
+      
+      setTimeout(()=>{
+        this.$emit('changeHeaderStatusValue', 1)
+        // this.saveStatus('agentbusy')
+        // this.saveStatus('agentidle')
+        this.free()
+        
+      }, 1000)
+      this.$emit('clearData')
+    },
+
+    eventOutringing(json) {
+      console.log('<===================eventOutringing=======================>')
+      console.log(222, json)
+      this.$emit('changeHeaderStatusValue', 0)
+      // setTimeout(()=>{
+      //   this.$emit('changeHeaderStatusValue', 0)
+      //   this.saveStatus('agentbusy')
+      //   this.busy()
+      // }, 1000)
+		this.origcaller = json.origcaller
+	},
+
+    eventMakecall(json) {
+      if (json.status && json.status != 0) { // 状态码 0 正常 非0 错误
+        // this.error = json.reason
+        this.$message({
+          type: 'error',
+          message: json.reason
+        })
+      }
+      console.log(json, json.callid)
+      if (json.status == 0) {
+      	this.callid = json.callid
+        this.$emit('makeCallid', json.callid)
+      }
+      // // {"callid":"24542515792953347","reason":"Success","type":"makecall","status":0}
+    },
+
+    // changeValue (val) {
+    // 	console.log(2333, val)
+    // 	// 示闲
+    // 	if (val == 1) this.free()
+    // 	// 登出
+    // 	if (val == 3)  this.opLogout()
+    // 	// 登录
+    // 	if (val == 2)  this.opLogin()
+    // 	// 示忙
+    // 	if (val == 0) this.busy()
+    // },
+
+    initUserInfo() {
+    },
+
+    opLogin() {
+      const userCode = this.userInfos.empVo  && this.userInfos.empVo.orgCode
+      const account = this.userInfos.empVo.hotline && this.userInfos.empVo.hotline.split('@')[0] || ''
+      const companyId =  this.userInfos.userAvailableInfo && this.userInfos.userAvailableInfo.storeInfoVo.companyId || ''
+      const url = `'${window.location.protocol}//10.150.24.40:18898/3cs/'`
+      api.liApi.portrayal.getStoreInfoByHotline({ hotlinePrefix: this.userInfos.empVo.hotline}, (res)=>{
+        console.log(res,"----------->")
+        if(res && res.data.code === 'success') {
+          this.saveStoreInfo(res.data.obj)
+           if(this.hasAssistantService){
+          this.$emit('companyId',res.data.obj.companyAbbr)
+           }
+          // 在登录方法里面直接写URL，解析出来有问题，只能分开判断 account
+          // 1为硬话机 2为软化机
+          if (window.location.protocol === 'http:') {
+            CallCenter.opLogin( account, '96e79218965eb72c92a549dd5a330112',res.data.obj.companyId, 2, 0, '', this.loginUrl[0].value, 1, 1, account)
+          } else {
+            CallCenter.opLogin( account, '96e79218965eb72c92a549dd5a330112',res.data.obj.companyId, 1, 0, '', this.loginUrl[0].value, 1, 1, account)
+          }
+        }
+      })
+    },
+
+    opLogout() {
+      CallCenter.logout()
+    },
+
+    free() {
+      CallCenter.free()
+    },
+
+    busy() {
+      // 签入座席才能发起示忙操作。
+      const status = CallCenter.getStatus()
+      if (status === 'agentbusy') return
+      CallCenter.busy()
+    },
+
+    // websocket 功能检查连接和重连功能
+    eventLogon(json) {
+      console.log('<===================eventLogon=======================>')
+      console.log(json)
+      if (json.status && json.status != 0) { // 状态码 0 正常 非0 错误
+        $message({
+          type: 'error',
+          message: json.reason
+        })
+      }
+      $message({
+        type: 'success',
+        message: '登录成功'
+      })
+    },
+
+    eventLogout(json) {
+      if (json.status && json.status != 0) { // 状态码 0 正常 非0 错误
+        $message({
+          type: 'error',
+          message: json.reason
+        })
+      }
+      $message({
+        type: 'success',
+        message: '登出成功'
+      })
+    },
+
+    eventAgentidle(json) {
+      if (json.status && json.status != 0) { // 状态码 0 正常 非0 错误
+        $message({
+          type: 'error',
+          message: json.reason
+        })
+      }
+      $message({
+        type: 'success',
+        message: '示闲成功'
+      })
+      // 空闲时发起的外呼
+      CallCenter.addEventListener("idleagents", function (json) {
+      });
+    },
+
+    eventAgentbusy(json) {
+      if (json.status && json.status != 0) { // 状态码 0 正常 非0 错误
+        // this.error = json.reason
+        $message({
+          type: 'error',
+          message: json.reason
+        })
+      }
+      $message({
+        type: 'success',
+        message: '示忙成功'
+      })
+    },
+
+    callout() {
+      if (this.outFlag) {
+        // 外呼
+        this.inputVisible = !this.inputVisible
+        this.inputNumber = '9' + this.mobileNo
+        console.log(123);
+        
+      } else {
+        // 呼入接听
+        this.answers()
+      }
+    },
+
+    // 呼叫按钮确定
+    calloutConfirm() {
+      console.log(11, this.inputNumber)
+
+      // 根据手机号查询客户信息
+      //const num =  ? this.inputNumber.slice(10,-1)
+      // console.log(222, this.inputNumber.slice(1,this.inputNumber.length ))
+      // console.log(333, this.inputNumber.slice(2,this.inputNumber.length))
+
+      if (this.inputNumber.length === 12){
+        this.$emit('handleQueryPortrayal', this.inputNumber.slice(1,this.inputNumber.length))
+      }
+      if (this.inputNumber.length === 13) {
+         this.$emit('handleQueryPortrayal', this.inputNumber.slice(2,this.inputNumber.length))
+      }
+
+      console.log(this.inputNumber)
+      CallCenter.callout(this.inputNumber, null, "", null, null, this.userInfo.data)
+      this.inputVisible = false
+      this.$emit('isCallingTrue')
+      console.log(this.hasAssistantService,'this.hasAssistantService================');
+    },
+
+    cancelmakecall() {
+      // 坐席挂机
+      setTimeout (()=> {
+        CallCenter.cancelmakecall()
+        this.$emit('isCallingFalse')
+      }, 10)
+    },
+
+    // 获取空闲坐席
+    getPhone(text) {
+      this.btnText = text
+      CallCenter.idleagents(3)
+    },
+
+    // 转接
+    transfercall1() {
+      // 获取空闲电话集合
+      // this.idleagents_()
+    },
+
+    inputTransferPhone(val) {
+      this.transferPhone = val
+    },
+
+    // 发起转接
+    transfercallUp() {
+      if (this.btnText == '发起咨询') {
+        this.consultup()
+        this.showPhoneList = false
+      }
+      if (this.btnText == '发起转接') {
+        // this.transferPhone
+        console.log(this.transferPhone)
+        CallCenter.transfercall(this.transferPhone, null, {
+          userData: { caller: "1234567", called: "1234567",...this.setFollowData() },
+          uuiData: "1542587745887744",
+          // outCall: true, //对内不需要，对外才加
+        })
+        this.showPhoneList = false
+      }
+      // if (this.btnText == '发起会议') {
+      // 	CallCenter.tripartitetalk()
+      // }
+    },
+
+    // 请求第三方通话
+    talk() {
+      CallCenter.tripartitetalk()
+    },
+
+    // 咨询结束
+    consultback() {
+      CallCenter.agentconsultback()
+    },
+
+    // 发起咨询请求
+    consultup() {
+      //
+      if (CallCenter.isLeaveConf()) {
+        // this.transferPhone
+        CallCenter.handle_agentconsult(this.transferPhone, null, {
+          userData: { caller: "1234567", called: "1234567",...this.setFollowData() },
+          uuiData: '1542587745887744'
+        })
+      } else {
+        // 请求咨询到号码this.transferPhone
+        CallCenter.agentconsult(this.transferPhone, null, {
+          userData: { caller: "1234567", called: "1234567" ,...this.setFollowData()},
+          uuiData: '1542587745887744'
+        });
+      }
+    },
+
+    setFollowData() {
+      const userInfo = JSON.parse(sessionStorage.getItem('userInfo'))
+      const { empCnName, empCode } = userInfo.empVo
+      const { storeCode, storeName } = userInfo.userAvailableInfo.storeInfoVo
+      const { orgCode, orgName } = userInfo.inCharegOrgVo
+
+		console.log("============随录数据==============");
+		console.log(empCnName, empCode, storeCode, storeName, orgCode, orgName);
+        console.log("============随录数据==============")
+
+    return {
+        	empName:empCnName, empCode, storeCode, storeName, orgCode, orgName,
+			origcaller : this.origcaller,
+			callId : this.callid,
+        }
+      // CallCenter.setFollowData({ empName:empCnName, empCode, storeCode, storeName, orgCode, orgName })
+    },
+
+    answers() {
+      CallCenter.acceptcall()
+      //  this.$emit('open',true)
+    },
+
+    // 保持通话
+    keep() {
+      CallCenter.mute()
+    },
+
+    unkeep() {
+      CallCenter.unmute()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+#callCenter_demo {
+  /*background-color: #1470F1;*/
+  .telephone-box {
+    .left-box {
+      padding: 3px 0 0 5px;
+      color: #FFF;
+      font-size: 14px;
+      font-weight: 500;
+      .store-name {
+        /*min-height: 21px;*/
+		  min-height: 21px;
+		  margin-top: 3px;
+      line-height: 20px;
+      position: absolute;
+      top: 70px;
+      }
+      .ringing {
+        min-height: 21px;
+        margin-top: 3px;
+      }
+    }
+    .right-box {
+		margin-top: 180px;
+      img {
+        width: 34px;
+        height: 34px;
+        margin-right: 1px;
+        cursor: pointer;
+      }
+    }
+  }
+  #CallCenter_title {
+    width: 100%;
+    background: #FFF;
+  }
+  #CallCenter_body {
+    width: 100%;
+    //height: 90vh;
+    overflow: auto;
+  }
+  .phlist {
+    height: auto;
+    max-height: 400px;
+    overflow: auto;
+    background: #FFF;
+    border: 1px solid #999;
+    font-size: 14px;
+    line-height: 30px;
+    text-align: left;
+    padding: 10px;
+    h2 {
+      font-size: 14px;
+      font-weight: bold;
+    }
+    p{
+      margin-bottom: 10px;
+      display: flex;
+      span {
+        justify-content: space-between;
+      }
+    }
+    .green{
+      color: lightgreen;
+    }
+    ul{
+      li {
+        cursor: pointer;
+      }
+    }
+  }
+  .photoinput /deep/ .el-input__inner {
+    border: 1px solid #22B8DD !important;
+  }
+}
+</style>