telephone-clients 3.0.104-15 → 3.0.104-17

package/src/filiale/gehua/pc/Console.vue

@@ -1,676 +1,676 @@
-<template>
-  <div class="auto" id="hujiao-pc-console">
-    <div class="flex btn-console" style="overflow: auto;">
-      <!-- 异常信息 -->
-      <div class="auto" style="max-width: 60px;">
-        <!--        <table class="table table-bordered">-->
-        <!--          <thead class="text-left">-->
-        <!--          <tr>-->
-        <!--            <th>-->
-        <!--              <nobr>号码</nobr>-->
-        <!--            </th>-->
-        <!--          </tr>-->
-        <!--          </thead>-->
-        <!--        </table>-->
-
-        <h6 v-if="false" style="color: #333333;font-weight: bold;font-size:18px;word-break:break-all;" class="text-center">{{ext_no}}</h6>
-        <a v-show="showclick" href="javascript:void(0)" @click.prevent="loggin()"><h6 style="color: #333333;font-weight: bold;font-size:18px;"
-                                                                                      class="text-center">{{currentState}} </h6></a>
-        <h6 v-show="shownotclick" style="color: #333333;font-weight: bold;word-break:break-all;font-size:18px;" class="text-center">{{currentState}} </h6>
-        <h6 style="color: red;font-weight: bold;word-break:break-all;font-size:18px;" class="text-center">{{initPhone}}</h6>
-        <h6 style="color: cornflowerblue;font-weight: bold;word-break:break-all;font-size:18px;" class="text-center" v-show="msg">{{msg}}</h6>
-
-        <h6 style="color: cornflowerblue;font-weight: bold;word-break:break-all;font-size:18px;" class="text-center" v-show="waitingQuantity">{{waitingQuantity}}条等待</h6>
-
-      </div>
-      <a href="javascript:void(0)" @click.prevent="zhimang()" >
-        <img
-          src="../../../../src/assets/zhimang.png">
-        <span class="chrome_adjust" v-if= "!mang" style="font-size: 16px;color: #333333">置忙</span>
-        <span class="chrome_adjust" v-else style="font-size: 16px;color: #FF0000">置忙</span>
-      </a>
-      <a href="javascript:void(0)" @click.prevent="zhixian()">
-        <img
-          src="../../../../src/assets/zhixian.png">
-        <span class="chrome_adjust" v-if="!xian" style="font-size: 16px;color: #333333">置闲</span>
-        <span class="chrome_adjust" v-else style="font-size: 16px;color: #FF0000">置闲</span>
-      </a>
-    </div>
-    <a href="javascript:void(0)" @click.prevent="huchu()">
-      <img
-        src="../../../../src/assets/huchu.png">
-      <span class="chrome_adjust" style="font-size: 16px;color: #333333">呼出</span>
-    </a>
-    <a href="#" v-show="currentState=='通话中'">
-      <span class="chrome_adjust">{{ time }}</span>
-    </a>
-    <a href="#" @click.prevent="zzuoxi()" v-show="currentState=='通话中' && tel_zhuanhu=='是'">
-      <img
-        src="../../../../src/assets/zhuanjie.png">
-      <span class="chrome_adjust">转坐席</span>
-    </a>
-    <a href="#" @click.prevent="zwaihu()" v-show="currentState=='通话中' && tel_zhuanhu=='是'">
-      <img
-        src="../../../../src/assets/zhuanyi.png">
-      <span class="chrome_adjust">转外呼</span>
-    </a>
-    <h6 style="color: cornflowerblue;font-weight: bold;word-break:break-all;font-size:14px;" class="text-center" >通话时长</h6>
-    <h6 style="color: #575656;font-weight: bold;word-break:break-all;font-size:15px;" class="text-center" >{{one}}:{{two}}:{{three}}</h6>
-    <modal :show.sync="show" width="50%" v-ref:calloutmodal backdrop="false">
-      <header slot="modal-header" class="modal-header">
-        <center><h4 class="modal-title ">呼出面板</h4></center>
-      </header>
-      <article slot="modal-body" class="modal-body" style="height: 100px;padding-top: 15px!important;">
-        <div style="text-align:center">
-          <input type="text" class="form-control" @keyup.enter='callout()' v-model="teleNum"  placeholder="请输入呼叫电话">
-        </div>
-      </article>
-      <footer slot="modal-footer" class="modal-footer">
-        <button v-show="show" type="button" class="btn btn-default" @click='closeModal'>取消</button>
-        <button v-show="show" type="button" class="btn btn-success" @click='callout()'>呼出</button>
-      </footer>
-    </modal>
-    <modal v-if="showip" :show.sync="showip" width="50%" v-ref:modal large backdrop="false">
-      <header slot="modal-header" class="modal-header">
-        <center><h4 class="modal-title ">坐席面板</h4></center>
-      </header>
-      <article slot="modal-body" class="modal-body" style="height: 100px;padding-top: 15px!important;">
-        <div style="text-align:center">
-          <label :style="aChannel ? 'color: green' : 'color: red'">坐席号:</label>
-          <input type="number" :style="aChannel ?  'color: green' : 'color: red'" v-model="aChannel"
-          >
-        </div>
-      </article>
-      <footer slot="modal-footer" class="modal-footer">
-        <div class="span" style="float:right;">
-          <button type="button" class="button_spacing button_search"
-                  v-if="hasip" @click="confirm()"
-          >确认
-          </button>
-        </div>
-      </footer>
-    </modal>
-    <modal v-if="showzhuanjie" :show.sync="showzhuanjie" width="50%" v-ref:zhuanjiemodal large backdrop="false">
-      <header slot="modal-header" class="modal-header">
-        <center><h4 class="modal-title ">转呼面板</h4></center>
-      </header>
-      <article slot="modal-body" class="modal-body" style="height: 100px;padding-top: 15px!important;">
-        <div style="text-align:center">
-          <label :style="zjaChannel ? 'color: green' : 'color: red'">坐席号:</label>
-          <input type="number" :style="zjaChannel ?  'color: green' : 'color: red'" v-model="zjaChannel"
-          >
-        </div>
-      </article>
-      <footer slot="modal-footer" class="modal-footer">
-        <button type="button" class="btn btn-default" @click='closeModalzhuanjie'>取消</button>
-        <button v-if='zjaChannel' type="button" class="btn btn-success" @click='zhuanjieconfirm()'>确认</button>
-      </footer>
-    </modal>
-    <modal :show.sync="showzhuanhu" v-if="showzhuanhu" width="50%" backdrop="false">
-      <header slot="modal-header" class="modal-header">
-        <center><h4 class="modal-title ">转呼面板</h4></center>
-      </header>
-      <article slot="modal-body" class="modal-body" style="height: 100px;padding-top: 15px!important;">
-        <div class="row">
-          <div class="col-sm-6">
-            <label class="control-label">&nbsp;&nbsp;&nbsp;公司</label>
-            <right-tree @re-res="getRes" :userid.sync='$login.f.id'
-                        :resobj.sync="defaultRes"
-                        :source.sync='source'>
-            </right-tree>
-          </div>
-          <div class="col-sm-6">
-            <input type="text" class="form-control" v-model="zhteleNum" placeholder="转呼电话" readonly>
-          </div>
-        </div>
-        <!--<div style="text-align:center">-->
-
-        <!--</div>-->
-      </article>
-      <footer slot="modal-footer" class="modal-footer">
-        <button type="button" class="btn btn-default" @click='closeModalzhuanhu'>取消</button>
-        <button v-if='zhteleNum' type="button" class="btn btn-success" @click='calloutzhuanhu()'>确认</button>
-      </footer>
-    </modal>
-    <modal :show.sync="showcalloutResult" width="50%"  backdrop="false">
-      <header slot="modal-header" class="modal-header">
-        <center><h4 class="modal-title ">{{showTitle}}结果</h4></center>
-      </header>
-      <article slot="modal-body" class="modal-body" style="height: 100px;padding-top: 15px!important;">
-        <div v-show="!calloutResult"><label>正在{{ showTitle }}，请稍后。。。。。。</label></div>
-        <div v-show="calloutResult">
-          <div class="row auto" v-show="calloutResult.area">
-            <label>真实归属地:</label><span>{{calloutResult.area}}</span>
-          </div>
-          <div class="row auto" v-show="calloutResult.calloutNo">
-            <label>真实呼出号码:</label><span>{{calloutResult.calloutNo}}</span>
-          </div>
-          <div class="row auto" v-show="calloutResult.err">
-            <label>其他信息:</label><span>{{calloutResult.err}}</span>
-          </div>
-        </div>
-      </article>
-      <footer slot="modal-footer" class="modal-footer">
-        <button type="button" id="calloutConfirmid" class="btn btn-success" @click='calloutConfirm()'>确认</button>
-      </footer>
-    </modal>
-
-  </div>
-</template>
-
-<script>
-  import co from 'co'
-  import * as Util from '../../../components/Util'
-  import {HttpResetClass} from 'vue-client'
-  import data from '../../../stores/wxconfig'
-  import $ from 'jquery'
-  $(document).keydown(function (event) {
-    if(event.keyCode==13){
-      document.getElementById('calloutConfirmid').click()
-    }
-  })
-  let stateGen = function* (self) {
-    let sql = 'tel_singleTable_OrderBy'
-    let condition = {
-      items: 'tongdao,mokuai',
-      tablename: 'T_IPTONGDAO',
-      condition: `loginip = '${self.ip}'`,
-      orderitem: 'id'
-    }
-    try {
-      //tag
-
-      if (self.ip && self.flagip == true) {
-        let http = new HttpResetClass()
-        let resChannel = yield http.load('POST', `rs/logic/tel_getOneData`, {
-          data: {
-            sql: sql,
-            params: condition
-          }
-        }, {resolveMsg: null, rejectMsg: null})
-        self.aChannel = parseInt(resChannel.data.tongdao)
-        self.aModule = parseInt(resChannel.data.mokuai)
-      } else (
-        self.aChannel = parseInt(self.aChannel)
-      )
-      Util.attendant.aChannel = self.aChannel
-
-      Util.attendant.aModule = self.aModule
-      self.ext_no = self.$login.f.ename
-      let loginMsg = yield self.unifiedRequest('logon')
-      self.currentState = loginMsg.data.aState
-
-      //tag
-      self.getUserState()
-    } catch (e) {
-      //tag
-      self.$showAlert('语音话务登陆失败，请重新登陆', 'warning', 2000)
-      self.showclick = true
-      self.shownotclick = false
-    }
-  }
-
-  export default {
-    title: '话务员控制台',
-    props: {
-      inlinemodel: {
-        type: Object,
-        default: null
-      },
-      deltelephone: ''
-    },
-    data() {
-      return {
-        reid: '',
-        f_filiale: '',
-        defaultRes: {}, //默认组织机构
-        waitingQuantity:0,
-        source: `tool.getFullTree(this.getRights().where(row.getType() != $zone$).where(row.getType() == $organization$))`,//获取公司
-        showzhuanhu: false,
-        zhteleNum: '',
-        msg:'',
-        zjaChannel: '',
-        showzhuanjie: false,
-        flagip: true,
-        showclick: false,
-        shownotclick: true,
-        show: false,
-        currentState: '未登录',
-        initPhone: '',
-        phonelist: [],
-        list: [],
-        calloutResult:null,
-        showcalloutResult:false,
-        showTitle:'',
-        newPhone: '',
-        interval: null, // 循环函数返回值，用来停止循环
-        ext_no: "", // 登录人
-        teleNum: '',
-        callContent: '',
-        http: new HttpResetClass(),
-        showip: false,
-        hasip: false,
-        ip: null,
-        theModuleId: null,
-        aChannel: null,
-        aModule: 1,
-        tel_zhuanhu:'否',
-        xian: false,
-        mang: false,
-        flag: null,
-        one : '00', // 时
-        two : '00', // 分
-        three : '00', // 秒
-        abc : 0, // 秒的计数
-        cde : 0, // 分的计数
-        efg : 0 // 时的计数
-      }
-    },
-    ready() {
-      //获取当前用户的ip地址
-      this.getYourIP(this)
-      this.tel_zhuanhu=this.$appdata.getSingleValue('开通转呼');
-    },
-    methods: {
-      // 开始计时
-      startHandler(){
-        this.flag = setInterval(()=>{
-          if(this.three === 60 || this.three === '60'){
-            this.three = '00';
-            this.abc = 0;
-            if(this.two === 60 || this.two === '60'){
-              this.two = '00';
-              this.cde = 0;
-              if(this.efg+1 <= 9){
-                this.efg++;
-                this.one = '0' + this.efg;
-              }else{
-                this.efg++;
-                this.one = this.efg;
-              }
-            }else{
-              if(this.cde+1 <= 9){
-                this.cde++;
-                this.two = '0' + this.cde;
-              }else{
-                this.cde++;
-                this.two = this.cde;
-              }
-            }
-          }else{
-            if(this.abc+1 <= 9){
-              this.abc++;
-              this.three = '0' + this.abc;
-            }else{
-              this.abc++;
-              this.three=this.abc;
-            }
-          }
-
-        },1000)
-      },
-      // 重置计时
-      endHandler(){
-        clearInterval(this.flag)
-        this.flag = null
-        this.one = '00'
-        this.two = '00'
-        this.three = '00'
-        this.abc = 0
-        this.cde = 0
-        this.efg = 0
-      },
-      // 根据分公司名称获取单值分公司电话
-      getRes(obj) {
-        if (obj && obj.res) {
-          var res = obj.res.split('.')
-          console.log(`---------------${res[1]}电话`)
-          this.zhteleNum = this.$appdata.getSingleValue(`${res[1]}电话`);
-        }
-      },
-      closeModalzhuanhu() {
-        this.zhteleNum = ''
-        this.showzhuanhu = false
-      },
-      zwaihu() {
-        this.showzhuanhu = true
-      },
-      calloutConfirm(){
-        this.calloutResult=null
-        this.showcalloutResult=false
-      },
-      // 转呼
-      calloutzhuanhu() {
-        this.unifiedRequest('reconnect', this.zhteleNum, this.zhteleNum).then((res) => {
-          this.showzhuanhu = false
-          this.calloutResult = res.data.calloutResult
-          this.zhteleNum = ''
-          if (res.data.err) {
-            this.$showAlert('调用接口失败，失败信息' + res.data.err, 'warning', 2000)
-          } else {
-            this.currentState = res.data.aState
-            this.showcalloutResult=true
-            this.showTitle='转呼'
-          }
-        }).catch((e) => {
-          this.currentState = '话务服务异常'
-        })
-      },
-      zzuoxi() {
-        this.showzhuanjie = true
-      },
-      closeModalzhuanjie() {
-        this.zjaChannel = ''
-        this.showzhuanjie = false
-      },
-      // 转接
-      zhuanjieconfirm() {
-        this.unifiedRequest('transfer', this.zjaChannel, this.zjaChannel).then((res) => {
-          this.showzhuanjie = false
-          this.zjaChannel = ''
-          this.calloutResult = res.data.calloutResult
-          if (res.data.err) {
-            this.$showAlert('调用接口失败，失败信息' + res.data.err, 'warning', 2000)
-          } else {
-            this.currentState = res.data.aState
-            this.showcalloutResult=true
-            this.showTitle='转接'
-          }
-        }).catch((e) => {
-          this.currentState = '话务服务异常'
-        })
-      },
-      loggin() {
-        //打开通道弹窗
-        this.showip = true
-      },
-      closeModal() {
-        this.show = false
-      },
-      openModal() {
-        this.show = true
-      },
-      // 循环获取通道状态
-      getUserState() {
-        let that = this
-        this.interval = setInterval(() => {
-          that.unifiedRequest('nvl').then((res) => {
-            that.currentState = res.data.aState
-            that.msg = res.data.msg
-            that.initPhone = res.data.callingNo
-            that.waitingQuantity = res.data.waitingQuantity
-            if(that.reid != res.data.ReID ){
-              that.reid = res.data.ReID
-              if(res.data.ReID  && res.data.callingNo ){
-                that.$emit('call-in', {callNum: res.data.callingNo,ext_no: that.ext_no,aId: Util.f.id,RecordsID:res.data.ReID})
-              }
-            }
-          }).catch((res) => {
-              //tag)
-              this.currentState = '话务服务异常'
-            }
-          )
-        }, 1000)
-      },
-      //置忙
-      zhimang() {
-        this.unifiedRequest('unavailable').then((res) => {
-          if (res.data.err) {
-            this.$showAlert('调用接口失败，失败信息' + res.data.err, 'warning', 2000)
-          } else {
-            this.currentState = res.data.aState
-            this.xian = false
-            this.mang = true
-          }
-        }).catch((e) => {
-          this.currentState = '话务服务异常'
-        })
-      },
-      // 置闲
-      zhixian() {
-        this.unifiedRequest('forceavailable').then((res) => {
-          if (res.data.err) {
-            this.$showAlert('调用接口失败，失败信息' + res.data.err, 'warning', 2000)
-          } else {
-            this.currentState = res.data.aState
-            this.xian = true
-            this.mang = false
-          }
-        }).catch((e) => {
-          this.currentState = '话务服务异常'
-        })
-      },
-      // 呼出
-      huchu() {
-        this.show = true
-        this.callContent = '输入号码中'
-        this.$refs.calloutmodal.$el.getElementsByTagName('input')[0].focus()
-      },
-      callout() {
-        this.callContent = '话务接通中...'
-        this.unifiedRequest('callout', this.teleNum, this.teleNum).then((res) => {
-          this.$console.info('呼出返回信息', res)
-          this.calloutResult = res.data.calloutResult
-          if (res.data.desc === '呼出失败') {
-            this.$showAlert(`呼出${this.teleNum}失败`, 'danger', 0)
-          }else{
-            this.show = false
-            this.currentState = res.data.aState
-            this.showcalloutResult=true
-            this.showTitle='呼出'
-          }
-        }).catch((e) => {
-          this.$showAlert(`${e.data},呼出失败`, 'danger', 0)
-          this.callContent = '呼出失败'
-        })
-      },
-      close() {
-        this.show = false
-        this.teleNum = ''
-        this.callContent = ''
-      },
-      // 登出
-      dengchu() {
-        this.unifiedRequest('loginout').then((res) => {
-          this.$console.info('登出返回信息', res)
-        }).catch((e) => {
-          this.$showAlert(`${e.data},登出失败`, 'danger', 0)
-          this.callContent = '登出失败'
-        })
-      },
-
-      // 统一请求函数
-
-      unifiedRequest(aBzType, bzId, bzExtra) {
-        let http = new HttpResetClass()
-        return http.load('POST', data.voiceUrl, {
-          aId: this.$login.f.id,
-          aChannel: this.aChannel,
-          aModule: this.aModule,
-          aName: this.$login.f.name,
-          aBzType: aBzType,
-          bzExtra: bzExtra,
-          bzId: bzId,
-          RoleId: this.$login.f.rolesnames
-        }, {resolveMsg: null, rejectMsg: null})
-      },
-      // 获取本地内网IP (使用Chrome浏览器) 强烈推荐使用小智浏览器
-      /** 如果弹出 请输入通道号，说明未获取到IP，请按以下步骤修改浏览器设置:
-       1.打开地址chrome://flags/
-       2.搜索 #enable-webrtc-hide-local-ips-with-mdns 该配置 并将属性改为disabled
-       3.修改成功后重启浏览器并刷新网页即可
-       **/
-      getYourIP(val) {
-        var RTCPeerConnection = window.RTCPeerConnection || window.webkitRTCPeerConnection || window.mozRTCPeerConnection;
-        if (RTCPeerConnection) (function () {
-
-            var rtc = new RTCPeerConnection({iceServers: []});
-            if (1 || window.mozRTCPeerConnection) {
-              rtc.createDataChannel('', {reliable: false});
-            }
-            ;
-
-            rtc.onicecandidate = function (evt) {
-              if (evt.candidate) grepSDP("a=" + evt.candidate.candidate);
-            };
-            rtc.createOffer(function (offerDesc) {
-              grepSDP(offerDesc.sdp);
-              rtc.setLocalDescription(offerDesc);
-            }, function (e) {
-              console.warn("offer failed", e);
-            });
-
-            var addrs = Object.create(null);
-            addrs["0.0.0.0"] = false;
-
-            function updateDisplay(newAddr) {
-              if (newAddr in addrs) return;
-              else addrs[newAddr] = true;
-              var displayAddrs = Object.keys(addrs).filter(function (k) {
-                return addrs[k];
-              });
-              for (var i = 0; i < displayAddrs.length; i++) {
-                if (displayAddrs[i].length > 16) {
-                  displayAddrs.splice(i, 1);
-                  i--;
-                }
-              }
-              val.ip = displayAddrs[0]
-              if (val.ip) {
-                // 登录
-                let gen = stateGen(val)
-                co(gen)
-              } else {
-                // 通道号弹窗
-                val.showip = true
-
-              }
-
-            }
-
-            function grepSDP(sdp) {
-              var hosts = [];
-              sdp.split('\r\n').forEach(function (line, index, arr) {
-                if (~line.indexOf("a=candidate")) {
-                  var parts = line.split(' '),
-                    addr = parts[4],
-                    type = parts[7];
-                  if (type === 'host') updateDisplay(addr);
-                } else if (~line.indexOf("c=")) {
-                  var parts = line.split(' '),
-                    addr = parts[2];
-                  updateDisplay(addr);
-
-                }
-              });
-            }
-          }
-        )();
-
-      },
-
-      // 确认
-      confirm() {
-        this.flagip = false
-        let gen = stateGen(this)
-        co(gen)
-        this.showip = false
-        this.showclick = false
-        this.shownotclick = true
-      }
-    },
-
-    watch: {
-      'currentState'(val) {
-        console.log('val=', val)
-        if (['通话中','已保存', '转接中','呼叫转移','回访通话','正在保存'].indexOf(val) >= 0) {
-          if (!this.flag){
-            this.startHandler()
-            console.log("进入时长开始计时")
-          }
-        } else {
-          this.endHandler()
-          console.log("进入时长重置")
-        }
-      },
-      // reid是话务内线唯一ID，除过呼入状态时有值，其他均为空串''
-      // 'reid'(val){
-      //   if(val && this.initPhone){
-      //     //新建一个对象
-      //     var callObj = new Object();
-      //     callObj = {
-      //       callNum: this.initPhone,
-      //       ext_no: this.ext_no,
-      //       aId: Util.f.id,
-      //       RecordsID:val
-      //     }
-      //     this.$emit('call-in', callObj)
-      //   }
-      // },
-      // 'initPhone'(val) {
-      //   if (this.initPhone&&this.flgwaihu== false) {
-      //     //新建一个对象
-      //     var callObj = new Object();
-      //     callObj = {
-      //       callNum: this.initPhone,
-      //       ext_no: this.ext_no,
-      //       aId: Util.f.id,
-      //       RecordsID: ''
-      //     }
-      //     this.$emit('call-in', callObj)
-      //   }
-      // },
-
-      'aChannel'(val) {
-        if (val) {
-          this.hasip = true
-        } else {
-          this.hasip = false
-        }
-      }
-    },
-    beforeDestroy() {
-      this.interval = clearInterval(this.interval)
-      this.dengchu();
-    }
-  }
-</script>
-<style lang="less">
-  #hujiao-pc-console {
-    img {
-      width: 40px;
-      height: 40px;
-      border-radius: 12px;
-    }
-
-    a {
-      color: #000000;
-      padding: 0px;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      // padding: 5px;
-      border-radius: 5px;
-      margin-bottom: 15px;
-      font-size: 8px;
-    }
-
-    .call-close {
-      color: #000;
-      text-shadow: 0 1px 0 #fff;
-      opacity: 0.2;
-      cursor: not-allowed;
-      pointer-events: none;
-      border-color: #aaa;
-    }
-  }
-  .tel_fontsize{
-    font-family: PingFang-SC-Bold;
-    font-size: 18px;
-    font-weight: normal;
-    font-stretch: normal;
-    line-height: 30px;
-    letter-spacing: 0px;
-    color: #333333;
-  }
-</style>
+<template>
+  <div class="auto" id="hujiao-pc-console">
+    <div class="flex btn-console" style="overflow: auto;">
+      <!-- 异常信息 -->
+      <div class="auto" style="max-width: 60px;">
+        <!--        <table class="table table-bordered">-->
+        <!--          <thead class="text-left">-->
+        <!--          <tr>-->
+        <!--            <th>-->
+        <!--              <nobr>号码</nobr>-->
+        <!--            </th>-->
+        <!--          </tr>-->
+        <!--          </thead>-->
+        <!--        </table>-->
+
+        <h6 v-if="false" style="color: #333333;font-weight: bold;font-size:18px;word-break:break-all;" class="text-center">{{ext_no}}</h6>
+        <a v-show="showclick" href="javascript:void(0)" @click.prevent="loggin()"><h6 style="color: #333333;font-weight: bold;font-size:18px;"
+                                                                                      class="text-center">{{currentState}} </h6></a>
+        <h6 v-show="shownotclick" style="color: #333333;font-weight: bold;word-break:break-all;font-size:18px;" class="text-center">{{currentState}} </h6>
+        <h6 style="color: red;font-weight: bold;word-break:break-all;font-size:18px;" class="text-center">{{initPhone}}</h6>
+        <h6 style="color: cornflowerblue;font-weight: bold;word-break:break-all;font-size:18px;" class="text-center" v-show="msg">{{msg}}</h6>
+
+        <h6 style="color: cornflowerblue;font-weight: bold;word-break:break-all;font-size:18px;" class="text-center" v-show="waitingQuantity">{{waitingQuantity}}条等待</h6>
+
+      </div>
+      <a href="javascript:void(0)" @click.prevent="zhimang()" >
+        <img
+          src="../../../../src/assets/zhimang.png">
+        <span class="chrome_adjust" v-if= "!mang" style="font-size: 16px;color: #333333">置忙</span>
+        <span class="chrome_adjust" v-else style="font-size: 16px;color: #FF0000">置忙</span>
+      </a>
+      <a href="javascript:void(0)" @click.prevent="zhixian()">
+        <img
+          src="../../../../src/assets/zhixian.png">
+        <span class="chrome_adjust" v-if="!xian" style="font-size: 16px;color: #333333">置闲</span>
+        <span class="chrome_adjust" v-else style="font-size: 16px;color: #FF0000">置闲</span>
+      </a>
+    </div>
+    <a href="javascript:void(0)" @click.prevent="huchu()">
+      <img
+        src="../../../../src/assets/huchu.png">
+      <span class="chrome_adjust" style="font-size: 16px;color: #333333">呼出</span>
+    </a>
+    <a href="#" v-show="currentState=='通话中'">
+      <span class="chrome_adjust">{{ time }}</span>
+    </a>
+    <a href="#" @click.prevent="zzuoxi()" v-show="currentState=='通话中' && tel_zhuanhu=='是'">
+      <img
+        src="../../../../src/assets/zhuanjie.png">
+      <span class="chrome_adjust">转坐席</span>
+    </a>
+    <a href="#" @click.prevent="zwaihu()" v-show="currentState=='通话中' && tel_zhuanhu=='是'">
+      <img
+        src="../../../../src/assets/zhuanyi.png">
+      <span class="chrome_adjust">转外呼</span>
+    </a>
+    <h6 style="color: cornflowerblue;font-weight: bold;word-break:break-all;font-size:14px;" class="text-center" >通话时长</h6>
+    <h6 style="color: #575656;font-weight: bold;word-break:break-all;font-size:15px;" class="text-center" >{{one}}:{{two}}:{{three}}</h6>
+    <modal :show.sync="show" width="50%" v-ref:calloutmodal backdrop="false">
+      <header slot="modal-header" class="modal-header">
+        <center><h4 class="modal-title ">呼出面板</h4></center>
+      </header>
+      <article slot="modal-body" class="modal-body" style="height: 100px;padding-top: 15px!important;">
+        <div style="text-align:center">
+          <input type="text" class="form-control" @keyup.enter='callout()' v-model="teleNum"  placeholder="请输入呼叫电话">
+        </div>
+      </article>
+      <footer slot="modal-footer" class="modal-footer">
+        <button v-show="show" type="button" class="btn btn-default" @click='closeModal'>取消</button>
+        <button v-show="show" type="button" class="btn btn-success" @click='callout()'>呼出</button>
+      </footer>
+    </modal>
+    <modal v-if="showip" :show.sync="showip" width="50%" v-ref:modal large backdrop="false">
+      <header slot="modal-header" class="modal-header">
+        <center><h4 class="modal-title ">坐席面板</h4></center>
+      </header>
+      <article slot="modal-body" class="modal-body" style="height: 100px;padding-top: 15px!important;">
+        <div style="text-align:center">
+          <label :style="aChannel ? 'color: green' : 'color: red'">坐席号:</label>
+          <input type="number" :style="aChannel ?  'color: green' : 'color: red'" v-model="aChannel"
+          >
+        </div>
+      </article>
+      <footer slot="modal-footer" class="modal-footer">
+        <div class="span" style="float:right;">
+          <button type="button" class="button_spacing button_search"
+                  v-if="hasip" @click="confirm()"
+          >确认
+          </button>
+        </div>
+      </footer>
+    </modal>
+    <modal v-if="showzhuanjie" :show.sync="showzhuanjie" width="50%" v-ref:zhuanjiemodal large backdrop="false">
+      <header slot="modal-header" class="modal-header">
+        <center><h4 class="modal-title ">转呼面板</h4></center>
+      </header>
+      <article slot="modal-body" class="modal-body" style="height: 100px;padding-top: 15px!important;">
+        <div style="text-align:center">
+          <label :style="zjaChannel ? 'color: green' : 'color: red'">坐席号:</label>
+          <input type="number" :style="zjaChannel ?  'color: green' : 'color: red'" v-model="zjaChannel"
+          >
+        </div>
+      </article>
+      <footer slot="modal-footer" class="modal-footer">
+        <button type="button" class="btn btn-default" @click='closeModalzhuanjie'>取消</button>
+        <button v-if='zjaChannel' type="button" class="btn btn-success" @click='zhuanjieconfirm()'>确认</button>
+      </footer>
+    </modal>
+    <modal :show.sync="showzhuanhu" v-if="showzhuanhu" width="50%" backdrop="false">
+      <header slot="modal-header" class="modal-header">
+        <center><h4 class="modal-title ">转呼面板</h4></center>
+      </header>
+      <article slot="modal-body" class="modal-body" style="height: 100px;padding-top: 15px!important;">
+        <div class="row">
+          <div class="col-sm-6">
+            <label class="control-label">&nbsp;&nbsp;&nbsp;公司</label>
+            <right-tree @re-res="getRes" :userid.sync='$login.f.id'
+                        :resobj.sync="defaultRes"
+                        :source.sync='source'>
+            </right-tree>
+          </div>
+          <div class="col-sm-6">
+            <input type="text" class="form-control" v-model="zhteleNum" placeholder="转呼电话" readonly>
+          </div>
+        </div>
+        <!--<div style="text-align:center">-->
+
+        <!--</div>-->
+      </article>
+      <footer slot="modal-footer" class="modal-footer">
+        <button type="button" class="btn btn-default" @click='closeModalzhuanhu'>取消</button>
+        <button v-if='zhteleNum' type="button" class="btn btn-success" @click='calloutzhuanhu()'>确认</button>
+      </footer>
+    </modal>
+    <modal :show.sync="showcalloutResult" width="50%"  backdrop="false">
+      <header slot="modal-header" class="modal-header">
+        <center><h4 class="modal-title ">{{showTitle}}结果</h4></center>
+      </header>
+      <article slot="modal-body" class="modal-body" style="height: 100px;padding-top: 15px!important;">
+        <div v-show="!calloutResult"><label>正在{{ showTitle }}，请稍后。。。。。。</label></div>
+        <div v-show="calloutResult">
+          <div class="row auto" v-show="calloutResult.area">
+            <label>真实归属地:</label><span>{{calloutResult.area}}</span>
+          </div>
+          <div class="row auto" v-show="calloutResult.calloutNo">
+            <label>真实呼出号码:</label><span>{{calloutResult.calloutNo}}</span>
+          </div>
+          <div class="row auto" v-show="calloutResult.err">
+            <label>其他信息:</label><span>{{calloutResult.err}}</span>
+          </div>
+        </div>
+      </article>
+      <footer slot="modal-footer" class="modal-footer">
+        <button type="button" id="calloutConfirmid" class="btn btn-success" @click='calloutConfirm()'>确认</button>
+      </footer>
+    </modal>
+
+  </div>
+</template>
+
+<script>
+  import co from 'co'
+  import * as Util from '../../../components/Util'
+  import {HttpResetClass} from 'vue-client'
+  import data from '../../../stores/wxconfig'
+  import $ from 'jquery'
+  $(document).keydown(function (event) {
+    if(event.keyCode==13){
+      document.getElementById('calloutConfirmid').click()
+    }
+  })
+  let stateGen = function* (self) {
+    let sql = 'tel_singleTable_OrderBy'
+    let condition = {
+      items: 'tongdao,mokuai',
+      tablename: 'T_IPTONGDAO',
+      condition: `loginip = '${self.ip}'`,
+      orderitem: 'id'
+    }
+    try {
+      //tag
+
+      if (self.ip && self.flagip == true) {
+        let http = new HttpResetClass()
+        let resChannel = yield http.load('POST', `rs/logic/tel_getOneData`, {
+          data: {
+            sql: sql,
+            params: condition
+          }
+        }, {resolveMsg: null, rejectMsg: null})
+        self.aChannel = parseInt(resChannel.data.tongdao)
+        self.aModule = parseInt(resChannel.data.mokuai)
+      } else (
+        self.aChannel = parseInt(self.aChannel)
+      )
+      Util.attendant.aChannel = self.aChannel
+
+      Util.attendant.aModule = self.aModule
+      self.ext_no = self.$login.f.ename
+      let loginMsg = yield self.unifiedRequest('logon')
+      self.currentState = loginMsg.data.aState
+
+      //tag
+      self.getUserState()
+    } catch (e) {
+      //tag
+      self.$showAlert('语音话务登陆失败，请重新登陆', 'warning', 2000)
+      self.showclick = true
+      self.shownotclick = false
+    }
+  }
+
+  export default {
+    title: '话务员控制台',
+    props: {
+      inlinemodel: {
+        type: Object,
+        default: null
+      },
+      deltelephone: ''
+    },
+    data() {
+      return {
+        reid: '',
+        f_filiale: '',
+        defaultRes: {}, //默认组织机构
+        waitingQuantity:0,
+        source: `tool.getFullTree(this.getRights().where(row.getType() != $zone$).where(row.getType() == $organization$))`,//获取公司
+        showzhuanhu: false,
+        zhteleNum: '',
+        msg:'',
+        zjaChannel: '',
+        showzhuanjie: false,
+        flagip: true,
+        showclick: false,
+        shownotclick: true,
+        show: false,
+        currentState: '未登录',
+        initPhone: '',
+        phonelist: [],
+        list: [],
+        calloutResult:null,
+        showcalloutResult:false,
+        showTitle:'',
+        newPhone: '',
+        interval: null, // 循环函数返回值，用来停止循环
+        ext_no: "", // 登录人
+        teleNum: '',
+        callContent: '',
+        http: new HttpResetClass(),
+        showip: false,
+        hasip: false,
+        ip: null,
+        theModuleId: null,
+        aChannel: null,
+        aModule: 1,
+        tel_zhuanhu:'否',
+        xian: false,
+        mang: false,
+        flag: null,
+        one : '00', // 时
+        two : '00', // 分
+        three : '00', // 秒
+        abc : 0, // 秒的计数
+        cde : 0, // 分的计数
+        efg : 0 // 时的计数
+      }
+    },
+    ready() {
+      //获取当前用户的ip地址
+      this.getYourIP(this)
+      this.tel_zhuanhu=this.$appdata.getSingleValue('开通转呼');
+    },
+    methods: {
+      // 开始计时
+      startHandler(){
+        this.flag = setInterval(()=>{
+          if(this.three === 60 || this.three === '60'){
+            this.three = '00';
+            this.abc = 0;
+            if(this.two === 60 || this.two === '60'){
+              this.two = '00';
+              this.cde = 0;
+              if(this.efg+1 <= 9){
+                this.efg++;
+                this.one = '0' + this.efg;
+              }else{
+                this.efg++;
+                this.one = this.efg;
+              }
+            }else{
+              if(this.cde+1 <= 9){
+                this.cde++;
+                this.two = '0' + this.cde;
+              }else{
+                this.cde++;
+                this.two = this.cde;
+              }
+            }
+          }else{
+            if(this.abc+1 <= 9){
+              this.abc++;
+              this.three = '0' + this.abc;
+            }else{
+              this.abc++;
+              this.three=this.abc;
+            }
+          }
+
+        },1000)
+      },
+      // 重置计时
+      endHandler(){
+        clearInterval(this.flag)
+        this.flag = null
+        this.one = '00'
+        this.two = '00'
+        this.three = '00'
+        this.abc = 0
+        this.cde = 0
+        this.efg = 0
+      },
+      // 根据分公司名称获取单值分公司电话
+      getRes(obj) {
+        if (obj && obj.res) {
+          var res = obj.res.split('.')
+          console.log(`---------------${res[1]}电话`)
+          this.zhteleNum = this.$appdata.getSingleValue(`${res[1]}电话`);
+        }
+      },
+      closeModalzhuanhu() {
+        this.zhteleNum = ''
+        this.showzhuanhu = false
+      },
+      zwaihu() {
+        this.showzhuanhu = true
+      },
+      calloutConfirm(){
+        this.calloutResult=null
+        this.showcalloutResult=false
+      },
+      // 转呼
+      calloutzhuanhu() {
+        this.unifiedRequest('reconnect', this.zhteleNum, this.zhteleNum).then((res) => {
+          this.showzhuanhu = false
+          this.calloutResult = res.data.calloutResult
+          this.zhteleNum = ''
+          if (res.data.err) {
+            this.$showAlert('调用接口失败，失败信息' + res.data.err, 'warning', 2000)
+          } else {
+            this.currentState = res.data.aState
+            this.showcalloutResult=true
+            this.showTitle='转呼'
+          }
+        }).catch((e) => {
+          this.currentState = '话务服务异常'
+        })
+      },
+      zzuoxi() {
+        this.showzhuanjie = true
+      },
+      closeModalzhuanjie() {
+        this.zjaChannel = ''
+        this.showzhuanjie = false
+      },
+      // 转接
+      zhuanjieconfirm() {
+        this.unifiedRequest('transfer', this.zjaChannel, this.zjaChannel).then((res) => {
+          this.showzhuanjie = false
+          this.zjaChannel = ''
+          this.calloutResult = res.data.calloutResult
+          if (res.data.err) {
+            this.$showAlert('调用接口失败，失败信息' + res.data.err, 'warning', 2000)
+          } else {
+            this.currentState = res.data.aState
+            this.showcalloutResult=true
+            this.showTitle='转接'
+          }
+        }).catch((e) => {
+          this.currentState = '话务服务异常'
+        })
+      },
+      loggin() {
+        //打开通道弹窗
+        this.showip = true
+      },
+      closeModal() {
+        this.show = false
+      },
+      openModal() {
+        this.show = true
+      },
+      // 循环获取通道状态
+      getUserState() {
+        let that = this
+        this.interval = setInterval(() => {
+          that.unifiedRequest('nvl').then((res) => {
+            that.currentState = res.data.aState
+            that.msg = res.data.msg
+            that.initPhone = res.data.callingNo
+            that.waitingQuantity = res.data.waitingQuantity
+            if(that.reid != res.data.ReID ){
+              that.reid = res.data.ReID
+              if(res.data.ReID  && res.data.callingNo ){
+                that.$emit('call-in', {callNum: res.data.callingNo,ext_no: that.ext_no,aId: Util.f.id,RecordsID:res.data.ReID})
+              }
+            }
+          }).catch((res) => {
+              //tag)
+              this.currentState = '话务服务异常'
+            }
+          )
+        }, 1000)
+      },
+      //置忙
+      zhimang() {
+        this.unifiedRequest('unavailable').then((res) => {
+          if (res.data.err) {
+            this.$showAlert('调用接口失败，失败信息' + res.data.err, 'warning', 2000)
+          } else {
+            this.currentState = res.data.aState
+            this.xian = false
+            this.mang = true
+          }
+        }).catch((e) => {
+          this.currentState = '话务服务异常'
+        })
+      },
+      // 置闲
+      zhixian() {
+        this.unifiedRequest('forceavailable').then((res) => {
+          if (res.data.err) {
+            this.$showAlert('调用接口失败，失败信息' + res.data.err, 'warning', 2000)
+          } else {
+            this.currentState = res.data.aState
+            this.xian = true
+            this.mang = false
+          }
+        }).catch((e) => {
+          this.currentState = '话务服务异常'
+        })
+      },
+      // 呼出
+      huchu() {
+        this.show = true
+        this.callContent = '输入号码中'
+        this.$refs.calloutmodal.$el.getElementsByTagName('input')[0].focus()
+      },
+      callout() {
+        this.callContent = '话务接通中...'
+        this.unifiedRequest('callout', this.teleNum, this.teleNum).then((res) => {
+          this.$console.info('呼出返回信息', res)
+          this.calloutResult = res.data.calloutResult
+          if (res.data.desc === '呼出失败') {
+            this.$showAlert(`呼出${this.teleNum}失败`, 'danger', 0)
+          }else{
+            this.show = false
+            this.currentState = res.data.aState
+            this.showcalloutResult=true
+            this.showTitle='呼出'
+          }
+        }).catch((e) => {
+          this.$showAlert(`${e.data},呼出失败`, 'danger', 0)
+          this.callContent = '呼出失败'
+        })
+      },
+      close() {
+        this.show = false
+        this.teleNum = ''
+        this.callContent = ''
+      },
+      // 登出
+      dengchu() {
+        this.unifiedRequest('loginout').then((res) => {
+          this.$console.info('登出返回信息', res)
+        }).catch((e) => {
+          this.$showAlert(`${e.data},登出失败`, 'danger', 0)
+          this.callContent = '登出失败'
+        })
+      },
+
+      // 统一请求函数
+
+      unifiedRequest(aBzType, bzId, bzExtra) {
+        let http = new HttpResetClass()
+        return http.load('POST', data.voiceUrl, {
+          aId: this.$login.f.id,
+          aChannel: this.aChannel,
+          aModule: this.aModule,
+          aName: this.$login.f.name,
+          aBzType: aBzType,
+          bzExtra: bzExtra,
+          bzId: bzId,
+          RoleId: this.$login.f.rolesnames
+        }, {resolveMsg: null, rejectMsg: null})
+      },
+      // 获取本地内网IP (使用Chrome浏览器) 强烈推荐使用小智浏览器
+      /** 如果弹出 请输入通道号，说明未获取到IP，请按以下步骤修改浏览器设置:
+       1.打开地址chrome://flags/
+       2.搜索 #enable-webrtc-hide-local-ips-with-mdns 该配置 并将属性改为disabled
+       3.修改成功后重启浏览器并刷新网页即可
+       **/
+      getYourIP(val) {
+        var RTCPeerConnection = window.RTCPeerConnection || window.webkitRTCPeerConnection || window.mozRTCPeerConnection;
+        if (RTCPeerConnection) (function () {
+
+            var rtc = new RTCPeerConnection({iceServers: []});
+            if (1 || window.mozRTCPeerConnection) {
+              rtc.createDataChannel('', {reliable: false});
+            }
+            ;
+
+            rtc.onicecandidate = function (evt) {
+              if (evt.candidate) grepSDP("a=" + evt.candidate.candidate);
+            };
+            rtc.createOffer(function (offerDesc) {
+              grepSDP(offerDesc.sdp);
+              rtc.setLocalDescription(offerDesc);
+            }, function (e) {
+              console.warn("offer failed", e);
+            });
+
+            var addrs = Object.create(null);
+            addrs["0.0.0.0"] = false;
+
+            function updateDisplay(newAddr) {
+              if (newAddr in addrs) return;
+              else addrs[newAddr] = true;
+              var displayAddrs = Object.keys(addrs).filter(function (k) {
+                return addrs[k];
+              });
+              for (var i = 0; i < displayAddrs.length; i++) {
+                if (displayAddrs[i].length > 16) {
+                  displayAddrs.splice(i, 1);
+                  i--;
+                }
+              }
+              val.ip = displayAddrs[0]
+              if (val.ip) {
+                // 登录
+                let gen = stateGen(val)
+                co(gen)
+              } else {
+                // 通道号弹窗
+                val.showip = true
+
+              }
+
+            }
+
+            function grepSDP(sdp) {
+              var hosts = [];
+              sdp.split('\r\n').forEach(function (line, index, arr) {
+                if (~line.indexOf("a=candidate")) {
+                  var parts = line.split(' '),
+                    addr = parts[4],
+                    type = parts[7];
+                  if (type === 'host') updateDisplay(addr);
+                } else if (~line.indexOf("c=")) {
+                  var parts = line.split(' '),
+                    addr = parts[2];
+                  updateDisplay(addr);
+
+                }
+              });
+            }
+          }
+        )();
+
+      },
+
+      // 确认
+      confirm() {
+        this.flagip = false
+        let gen = stateGen(this)
+        co(gen)
+        this.showip = false
+        this.showclick = false
+        this.shownotclick = true
+      }
+    },
+
+    watch: {
+      'currentState'(val) {
+        console.log('val=', val)
+        if (['通话中','已保存', '转接中','呼叫转移','回访通话','正在保存'].indexOf(val) >= 0) {
+          if (!this.flag){
+            this.startHandler()
+            console.log("进入时长开始计时")
+          }
+        } else {
+          this.endHandler()
+          console.log("进入时长重置")
+        }
+      },
+      // reid是话务内线唯一ID，除过呼入状态时有值，其他均为空串''
+      // 'reid'(val){
+      //   if(val && this.initPhone){
+      //     //新建一个对象
+      //     var callObj = new Object();
+      //     callObj = {
+      //       callNum: this.initPhone,
+      //       ext_no: this.ext_no,
+      //       aId: Util.f.id,
+      //       RecordsID:val
+      //     }
+      //     this.$emit('call-in', callObj)
+      //   }
+      // },
+      // 'initPhone'(val) {
+      //   if (this.initPhone&&this.flgwaihu== false) {
+      //     //新建一个对象
+      //     var callObj = new Object();
+      //     callObj = {
+      //       callNum: this.initPhone,
+      //       ext_no: this.ext_no,
+      //       aId: Util.f.id,
+      //       RecordsID: ''
+      //     }
+      //     this.$emit('call-in', callObj)
+      //   }
+      // },
+
+      'aChannel'(val) {
+        if (val) {
+          this.hasip = true
+        } else {
+          this.hasip = false
+        }
+      }
+    },
+    beforeDestroy() {
+      this.interval = clearInterval(this.interval)
+      this.dengchu();
+    }
+  }
+</script>
+<style lang="less">
+  #hujiao-pc-console {
+    img {
+      width: 40px;
+      height: 40px;
+      border-radius: 12px;
+    }
+
+    a {
+      color: #000000;
+      padding: 0px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      // padding: 5px;
+      border-radius: 5px;
+      margin-bottom: 15px;
+      font-size: 8px;
+    }
+
+    .call-close {
+      color: #000;
+      text-shadow: 0 1px 0 #fff;
+      opacity: 0.2;
+      cursor: not-allowed;
+      pointer-events: none;
+      border-color: #aaa;
+    }
+  }
+  .tel_fontsize{
+    font-family: PingFang-SC-Bold;
+    font-size: 18px;
+    font-weight: normal;
+    font-stretch: normal;
+    line-height: 30px;
+    letter-spacing: 0px;
+    color: #333333;
+  }
+</style>