diff --git a/src/views/monitor/seatMonitor/components/allShow.vue b/src/views/monitor/seatMonitor/components/allShow.vue
index 11fcb74..c1f1e11 100644
--- a/src/views/monitor/seatMonitor/components/allShow.vue
+++ b/src/views/monitor/seatMonitor/components/allShow.vue
@@ -1,15 +1,37 @@
 <template>
   <div class="show-div">
-    <div v-for="item in list" :key="item.value" class="item-div">
-      <svg-icon v-if="item.icon" :class="'seat-'+item.icon" icon-class="icon-seat" class="icon-seat"/>
-      <div class="item-txt">{{ item.label }} : {{ data[item.value] }}</div>
+    <div class="refresh-div">
+      <el-button icon="el-icon-refresh" type="success" size="mini" @click="search">刷新</el-button>
+    </div>
+    <div class="state-div">
+      <div v-for="item in list" :key="item.value" class="item-div">
+        <svg-icon v-if="item.icon" :class="'seat-'+item.icon" icon-class="icon-seat" class="icon-seat"/>
+        <div class="item-txt">{{ item.label }} : {{ data[item.value] }}</div>
+      </div>
     </div>
   </div>
 </template>
 
 <script>
+import { mapState } from 'vuex'
 export default {
   name: 'AllShow',
+  props: {
+    data: {
+      type: Object,
+      default: function() {
+        return {
+          all: 8,
+          signout: 0,
+          signin: 0,
+          showidle: 0,
+          showbusy: 0,
+          busy: 0,
+          wait: 0
+        }
+      }
+    }
+  },
   data() {
     return {
       list: [
@@ -20,16 +42,21 @@
         { label: '示忙总数', value: 'showbusy', icon: 'showbusy' },
         { label: '忙碌总数', value: 'busy', icon: 'busy' },
         { label: '等待总数', value: 'wait', icon: 'wait' }
-      ],
-      data: {
-        all: 8,
-        signout: 0,
-        signin: 1,
-        showidle: 2,
-        showbusy: 5,
-        busy: 1,
-        wait: 0
-      }
+      ]
+    }
+  },
+  computed: {
+    ...mapState({
+      wsStatus: state => state.ivr.wsStatus,
+      extensionList: state => state.ivr.extensionList,
+      webSocket: state => state.ivr.webSocket,
+      websocketObj: state => state.ivr.websocketObj
+    })
+  },
+  methods: {
+    // 查询
+    search() {
+      this.$emit('refresh')
     }
   }
 }
@@ -40,21 +67,31 @@
     width: 100%;
     background-color: #66b1ff;
     padding: 5px 20px;
-    display: flex;
-    justify-content: space-between;
-    .item-div{
-      font-size:16px;
-      line-height: 2;
+    .refresh-div{
       display: inline-block;
-      .icon-seat{
-        width: 30px;
-        text-align: center;
-      }
-      .item-txt{
+      margin-right: 20px;
+      margin-left: -10px;
+    }
+    .state-div{
+      width: calc( 100% - 90px);
+      display: inline-flex;
+      /*display: flex;*/
+      justify-content: space-between;
+      .item-div{
+        font-size:16px;
+        line-height: 2;
         display: inline-block;
-        color:#ffffff;
+        .icon-seat{
+          width: 30px;
+          text-align: center;
+        }
+        .item-txt{
+          display: inline-block;
+          color:#ffffff;
+        }
       }
     }
+
   }
   .seat-offline{
     color:grey;

diff --git a/src/views/monitor/seatMonitor/components/allShow.vue b/src/views/monitor/seatMonitor/components/allShow.vue
index 11fcb74..c1f1e11 100644
--- a/src/views/monitor/seatMonitor/components/allShow.vue
+++ b/src/views/monitor/seatMonitor/components/allShow.vue
@@ -1,15 +1,37 @@
 <template>
   <div class="show-div">
-    <div v-for="item in list" :key="item.value" class="item-div">
-      <svg-icon v-if="item.icon" :class="'seat-'+item.icon" icon-class="icon-seat" class="icon-seat"/>
-      <div class="item-txt">{{ item.label }} : {{ data[item.value] }}</div>
+    <div class="refresh-div">
+      <el-button icon="el-icon-refresh" type="success" size="mini" @click="search">刷新</el-button>
+    </div>
+    <div class="state-div">
+      <div v-for="item in list" :key="item.value" class="item-div">
+        <svg-icon v-if="item.icon" :class="'seat-'+item.icon" icon-class="icon-seat" class="icon-seat"/>
+        <div class="item-txt">{{ item.label }} : {{ data[item.value] }}</div>
+      </div>
     </div>
   </div>
 </template>
 
 <script>
+import { mapState } from 'vuex'
 export default {
   name: 'AllShow',
+  props: {
+    data: {
+      type: Object,
+      default: function() {
+        return {
+          all: 8,
+          signout: 0,
+          signin: 0,
+          showidle: 0,
+          showbusy: 0,
+          busy: 0,
+          wait: 0
+        }
+      }
+    }
+  },
   data() {
     return {
       list: [
@@ -20,16 +42,21 @@
         { label: '示忙总数', value: 'showbusy', icon: 'showbusy' },
         { label: '忙碌总数', value: 'busy', icon: 'busy' },
         { label: '等待总数', value: 'wait', icon: 'wait' }
-      ],
-      data: {
-        all: 8,
-        signout: 0,
-        signin: 1,
-        showidle: 2,
-        showbusy: 5,
-        busy: 1,
-        wait: 0
-      }
+      ]
+    }
+  },
+  computed: {
+    ...mapState({
+      wsStatus: state => state.ivr.wsStatus,
+      extensionList: state => state.ivr.extensionList,
+      webSocket: state => state.ivr.webSocket,
+      websocketObj: state => state.ivr.websocketObj
+    })
+  },
+  methods: {
+    // 查询
+    search() {
+      this.$emit('refresh')
     }
   }
 }
@@ -40,21 +67,31 @@
     width: 100%;
     background-color: #66b1ff;
     padding: 5px 20px;
-    display: flex;
-    justify-content: space-between;
-    .item-div{
-      font-size:16px;
-      line-height: 2;
+    .refresh-div{
       display: inline-block;
-      .icon-seat{
-        width: 30px;
-        text-align: center;
-      }
-      .item-txt{
+      margin-right: 20px;
+      margin-left: -10px;
+    }
+    .state-div{
+      width: calc( 100% - 90px);
+      display: inline-flex;
+      /*display: flex;*/
+      justify-content: space-between;
+      .item-div{
+        font-size:16px;
+        line-height: 2;
         display: inline-block;
-        color:#ffffff;
+        .icon-seat{
+          width: 30px;
+          text-align: center;
+        }
+        .item-txt{
+          display: inline-block;
+          color:#ffffff;
+        }
       }
     }
+
   }
   .seat-offline{
     color:grey;
diff --git a/src/views/monitor/seatMonitor/components/ivrArea.vue b/src/views/monitor/seatMonitor/components/ivrArea.vue
index ebe91a7..912c102 100644
--- a/src/views/monitor/seatMonitor/components/ivrArea.vue
+++ b/src/views/monitor/seatMonitor/components/ivrArea.vue
@@ -1,14 +1,14 @@
 <template>
   <div class="realtime-check-div">
-    <div class="title">实时质检</div>
+    <div class="title">语音功能</div>
     <div class="body">
       <el-row>
-        <ivr-btn name="监听通话" type="warning"/>
-        <ivr-btn name="取消监听" type="info"/>
-        <ivr-btn name="拦截通话"/>
-        <ivr-btn name="强插通话" type="warning"/>
-        <ivr-btn name="取消强插" type="info"/>
-        <ivr-btn name="强拆通话"/>
+        <ivr-btn name="监听通话" @click="spy"/>
+        <!--<ivr-btn name="取消监听" type="info" @click=""/>-->
+        <!--<ivr-btn name="拦截通话"/>-->
+        <ivr-btn name="强插通话" @click="extenInsert"/>
+        <!--<ivr-btn name="取消强插" type="info"/>-->
+        <ivr-btn name="强拆分机" @click="extenCut"/>
       </el-row>
     </div>
   </div>
@@ -18,7 +18,27 @@
 import IvrBtn from './ivrBtn'
 export default {
   name: 'IvrArea',
-  components: { IvrBtn }
+  components: { IvrBtn },
+  props: {
+    currentUser: {
+      type: Object,
+      required: true
+    }
+  },
+  methods: {
+    // 监听
+    spy() {
+      this.$store.dispatch('spy', this.currentUser.exten)
+    },
+    // 强插分机
+    extenInsert() {
+      this.$store.dispatch('extenInsert', this.currentUser.exten)
+    },
+    // 强拆分机
+    extenCut() {
+      this.$store.dispatch('extenCut', this.currentUser.exten)
+    }
+  }
 }
 </script>
 

diff --git a/src/views/monitor/seatMonitor/components/allShow.vue b/src/views/monitor/seatMonitor/components/allShow.vue
index 11fcb74..c1f1e11 100644
--- a/src/views/monitor/seatMonitor/components/allShow.vue
+++ b/src/views/monitor/seatMonitor/components/allShow.vue
@@ -1,15 +1,37 @@
 <template>
   <div class="show-div">
-    <div v-for="item in list" :key="item.value" class="item-div">
-      <svg-icon v-if="item.icon" :class="'seat-'+item.icon" icon-class="icon-seat" class="icon-seat"/>
-      <div class="item-txt">{{ item.label }} : {{ data[item.value] }}</div>
+    <div class="refresh-div">
+      <el-button icon="el-icon-refresh" type="success" size="mini" @click="search">刷新</el-button>
+    </div>
+    <div class="state-div">
+      <div v-for="item in list" :key="item.value" class="item-div">
+        <svg-icon v-if="item.icon" :class="'seat-'+item.icon" icon-class="icon-seat" class="icon-seat"/>
+        <div class="item-txt">{{ item.label }} : {{ data[item.value] }}</div>
+      </div>
     </div>
   </div>
 </template>
 
 <script>
+import { mapState } from 'vuex'
 export default {
   name: 'AllShow',
+  props: {
+    data: {
+      type: Object,
+      default: function() {
+        return {
+          all: 8,
+          signout: 0,
+          signin: 0,
+          showidle: 0,
+          showbusy: 0,
+          busy: 0,
+          wait: 0
+        }
+      }
+    }
+  },
   data() {
     return {
       list: [
@@ -20,16 +42,21 @@
         { label: '示忙总数', value: 'showbusy', icon: 'showbusy' },
         { label: '忙碌总数', value: 'busy', icon: 'busy' },
         { label: '等待总数', value: 'wait', icon: 'wait' }
-      ],
-      data: {
-        all: 8,
-        signout: 0,
-        signin: 1,
-        showidle: 2,
-        showbusy: 5,
-        busy: 1,
-        wait: 0
-      }
+      ]
+    }
+  },
+  computed: {
+    ...mapState({
+      wsStatus: state => state.ivr.wsStatus,
+      extensionList: state => state.ivr.extensionList,
+      webSocket: state => state.ivr.webSocket,
+      websocketObj: state => state.ivr.websocketObj
+    })
+  },
+  methods: {
+    // 查询
+    search() {
+      this.$emit('refresh')
     }
   }
 }
@@ -40,21 +67,31 @@
     width: 100%;
     background-color: #66b1ff;
     padding: 5px 20px;
-    display: flex;
-    justify-content: space-between;
-    .item-div{
-      font-size:16px;
-      line-height: 2;
+    .refresh-div{
       display: inline-block;
-      .icon-seat{
-        width: 30px;
-        text-align: center;
-      }
-      .item-txt{
+      margin-right: 20px;
+      margin-left: -10px;
+    }
+    .state-div{
+      width: calc( 100% - 90px);
+      display: inline-flex;
+      /*display: flex;*/
+      justify-content: space-between;
+      .item-div{
+        font-size:16px;
+        line-height: 2;
         display: inline-block;
-        color:#ffffff;
+        .icon-seat{
+          width: 30px;
+          text-align: center;
+        }
+        .item-txt{
+          display: inline-block;
+          color:#ffffff;
+        }
       }
     }
+
   }
   .seat-offline{
     color:grey;
diff --git a/src/views/monitor/seatMonitor/components/ivrArea.vue b/src/views/monitor/seatMonitor/components/ivrArea.vue
index ebe91a7..912c102 100644
--- a/src/views/monitor/seatMonitor/components/ivrArea.vue
+++ b/src/views/monitor/seatMonitor/components/ivrArea.vue
@@ -1,14 +1,14 @@
 <template>
   <div class="realtime-check-div">
-    <div class="title">实时质检</div>
+    <div class="title">语音功能</div>
     <div class="body">
       <el-row>
-        <ivr-btn name="监听通话" type="warning"/>
-        <ivr-btn name="取消监听" type="info"/>
-        <ivr-btn name="拦截通话"/>
-        <ivr-btn name="强插通话" type="warning"/>
-        <ivr-btn name="取消强插" type="info"/>
-        <ivr-btn name="强拆通话"/>
+        <ivr-btn name="监听通话" @click="spy"/>
+        <!--<ivr-btn name="取消监听" type="info" @click=""/>-->
+        <!--<ivr-btn name="拦截通话"/>-->
+        <ivr-btn name="强插通话" @click="extenInsert"/>
+        <!--<ivr-btn name="取消强插" type="info"/>-->
+        <ivr-btn name="强拆分机" @click="extenCut"/>
       </el-row>
     </div>
   </div>
@@ -18,7 +18,27 @@
 import IvrBtn from './ivrBtn'
 export default {
   name: 'IvrArea',
-  components: { IvrBtn }
+  components: { IvrBtn },
+  props: {
+    currentUser: {
+      type: Object,
+      required: true
+    }
+  },
+  methods: {
+    // 监听
+    spy() {
+      this.$store.dispatch('spy', this.currentUser.exten)
+    },
+    // 强插分机
+    extenInsert() {
+      this.$store.dispatch('extenInsert', this.currentUser.exten)
+    },
+    // 强拆分机
+    extenCut() {
+      this.$store.dispatch('extenCut', this.currentUser.exten)
+    }
+  }
 }
 </script>
 
diff --git a/src/views/monitor/seatMonitor/components/ivrBtn.vue b/src/views/monitor/seatMonitor/components/ivrBtn.vue
index 6187257..aa22d34 100644
--- a/src/views/monitor/seatMonitor/components/ivrBtn.vue
+++ b/src/views/monitor/seatMonitor/components/ivrBtn.vue
@@ -1,7 +1,7 @@
 <template>
   <el-col :span="8">
     <div class="ivr-btn-div">
-      <el-button :type="type" :size="size" class="ivr-btn">{{ name }}</el-button>
+      <el-button :type="type" :size="size" class="ivr-btn" @click="click">{{ name }}</el-button>
     </div>
   </el-col>
 </template>
@@ -22,6 +22,11 @@
       type: String,
       default: 'small'
     }
+  },
+  methods: {
+    click() {
+      this.$emit('click')
+    }
   }
 }
 </script>

diff --git a/src/views/monitor/seatMonitor/components/allShow.vue b/src/views/monitor/seatMonitor/components/allShow.vue
index 11fcb74..c1f1e11 100644
--- a/src/views/monitor/seatMonitor/components/allShow.vue
+++ b/src/views/monitor/seatMonitor/components/allShow.vue
@@ -1,15 +1,37 @@
 <template>
   <div class="show-div">
-    <div v-for="item in list" :key="item.value" class="item-div">
-      <svg-icon v-if="item.icon" :class="'seat-'+item.icon" icon-class="icon-seat" class="icon-seat"/>
-      <div class="item-txt">{{ item.label }} : {{ data[item.value] }}</div>
+    <div class="refresh-div">
+      <el-button icon="el-icon-refresh" type="success" size="mini" @click="search">刷新</el-button>
+    </div>
+    <div class="state-div">
+      <div v-for="item in list" :key="item.value" class="item-div">
+        <svg-icon v-if="item.icon" :class="'seat-'+item.icon" icon-class="icon-seat" class="icon-seat"/>
+        <div class="item-txt">{{ item.label }} : {{ data[item.value] }}</div>
+      </div>
     </div>
   </div>
 </template>
 
 <script>
+import { mapState } from 'vuex'
 export default {
   name: 'AllShow',
+  props: {
+    data: {
+      type: Object,
+      default: function() {
+        return {
+          all: 8,
+          signout: 0,
+          signin: 0,
+          showidle: 0,
+          showbusy: 0,
+          busy: 0,
+          wait: 0
+        }
+      }
+    }
+  },
   data() {
     return {
       list: [
@@ -20,16 +42,21 @@
         { label: '示忙总数', value: 'showbusy', icon: 'showbusy' },
         { label: '忙碌总数', value: 'busy', icon: 'busy' },
         { label: '等待总数', value: 'wait', icon: 'wait' }
-      ],
-      data: {
-        all: 8,
-        signout: 0,
-        signin: 1,
-        showidle: 2,
-        showbusy: 5,
-        busy: 1,
-        wait: 0
-      }
+      ]
+    }
+  },
+  computed: {
+    ...mapState({
+      wsStatus: state => state.ivr.wsStatus,
+      extensionList: state => state.ivr.extensionList,
+      webSocket: state => state.ivr.webSocket,
+      websocketObj: state => state.ivr.websocketObj
+    })
+  },
+  methods: {
+    // 查询
+    search() {
+      this.$emit('refresh')
     }
   }
 }
@@ -40,21 +67,31 @@
     width: 100%;
     background-color: #66b1ff;
     padding: 5px 20px;
-    display: flex;
-    justify-content: space-between;
-    .item-div{
-      font-size:16px;
-      line-height: 2;
+    .refresh-div{
       display: inline-block;
-      .icon-seat{
-        width: 30px;
-        text-align: center;
-      }
-      .item-txt{
+      margin-right: 20px;
+      margin-left: -10px;
+    }
+    .state-div{
+      width: calc( 100% - 90px);
+      display: inline-flex;
+      /*display: flex;*/
+      justify-content: space-between;
+      .item-div{
+        font-size:16px;
+        line-height: 2;
         display: inline-block;
-        color:#ffffff;
+        .icon-seat{
+          width: 30px;
+          text-align: center;
+        }
+        .item-txt{
+          display: inline-block;
+          color:#ffffff;
+        }
       }
     }
+
   }
   .seat-offline{
     color:grey;
diff --git a/src/views/monitor/seatMonitor/components/ivrArea.vue b/src/views/monitor/seatMonitor/components/ivrArea.vue
index ebe91a7..912c102 100644
--- a/src/views/monitor/seatMonitor/components/ivrArea.vue
+++ b/src/views/monitor/seatMonitor/components/ivrArea.vue
@@ -1,14 +1,14 @@
 <template>
   <div class="realtime-check-div">
-    <div class="title">实时质检</div>
+    <div class="title">语音功能</div>
     <div class="body">
       <el-row>
-        <ivr-btn name="监听通话" type="warning"/>
-        <ivr-btn name="取消监听" type="info"/>
-        <ivr-btn name="拦截通话"/>
-        <ivr-btn name="强插通话" type="warning"/>
-        <ivr-btn name="取消强插" type="info"/>
-        <ivr-btn name="强拆通话"/>
+        <ivr-btn name="监听通话" @click="spy"/>
+        <!--<ivr-btn name="取消监听" type="info" @click=""/>-->
+        <!--<ivr-btn name="拦截通话"/>-->
+        <ivr-btn name="强插通话" @click="extenInsert"/>
+        <!--<ivr-btn name="取消强插" type="info"/>-->
+        <ivr-btn name="强拆分机" @click="extenCut"/>
       </el-row>
     </div>
   </div>
@@ -18,7 +18,27 @@
 import IvrBtn from './ivrBtn'
 export default {
   name: 'IvrArea',
-  components: { IvrBtn }
+  components: { IvrBtn },
+  props: {
+    currentUser: {
+      type: Object,
+      required: true
+    }
+  },
+  methods: {
+    // 监听
+    spy() {
+      this.$store.dispatch('spy', this.currentUser.exten)
+    },
+    // 强插分机
+    extenInsert() {
+      this.$store.dispatch('extenInsert', this.currentUser.exten)
+    },
+    // 强拆分机
+    extenCut() {
+      this.$store.dispatch('extenCut', this.currentUser.exten)
+    }
+  }
 }
 </script>
 
diff --git a/src/views/monitor/seatMonitor/components/ivrBtn.vue b/src/views/monitor/seatMonitor/components/ivrBtn.vue
index 6187257..aa22d34 100644
--- a/src/views/monitor/seatMonitor/components/ivrBtn.vue
+++ b/src/views/monitor/seatMonitor/components/ivrBtn.vue
@@ -1,7 +1,7 @@
 <template>
   <el-col :span="8">
     <div class="ivr-btn-div">
-      <el-button :type="type" :size="size" class="ivr-btn">{{ name }}</el-button>
+      <el-button :type="type" :size="size" class="ivr-btn" @click="click">{{ name }}</el-button>
     </div>
   </el-col>
 </template>
@@ -22,6 +22,11 @@
       type: String,
       default: 'small'
     }
+  },
+  methods: {
+    click() {
+      this.$emit('click')
+    }
   }
 }
 </script>
diff --git a/src/views/monitor/seatMonitor/components/realtimeCheck.vue b/src/views/monitor/seatMonitor/components/realtimeCheck.vue
index 86ca9c6..81f96f1 100644
--- a/src/views/monitor/seatMonitor/components/realtimeCheck.vue
+++ b/src/views/monitor/seatMonitor/components/realtimeCheck.vue
@@ -5,32 +5,59 @@
       <div class="line" >座席姓名 ：{{ seatForm.agentUserName }}</div>
       <div class="line" >座席工号 ：{{ seatForm.agentName }}</div>
       <div class="line" >座席电话 ：{{ seatForm.phone }}</div>
-      <div class="line" >座席状态 ：{{ seatForm.signin }}</div>
+      <div class="line" >座席状态 ：{{ seatForm.state }}</div>
       <div class="line" >登录分机 ：{{ seatForm.exten }}</div>
       <div class="line" >主叫号码 ：{{ seatForm.callerNumber }}</div>
       <div class="line" >被叫号码 ：{{ seatForm.calleeNumber }}</div>
       <div class="btns">
-        <el-button type="primary" size="small">实时质检</el-button>
+        <el-button :disabled="canJudge" type="primary" size="small" @click="check">实时质检</el-button>
       </div>
     </div>
+    <quality-check ref="qualitycheck"/>
   </div>
 </template>
 
 <script>
+import QualityCheck from '../../../qualityManage/qualitySound/qualityCheck'
 export default {
   name: 'RealtimeCheck',
-  data() {
-    return {
-      seatForm: {
-        agentUserName: '--',
-        agentName: '--',
-        phone: '--',
-        signin: '--',
-        exten: '--',
-        callerNumber: '--',
-        calleeNumber: '--'
+  components: { QualityCheck },
+  props: {
+    seatForm: {
+      type: Object,
+      default: function() {
+        return {
+          agentUserName: '--',
+          agentName: '--',
+          phone: '--',
+          state: '--',
+          exten: '--',
+          callerNumber: '--',
+          calleeNumber: '--',
+          callid: ''
+        }
       }
     }
+  },
+  computed: {
+    canJudge() { // 判断是否可以进行质检，通话中的可以进行实时质检
+      if (this.seatForm.state && this.seatForm.state.includes('通话')) {
+        return false
+      } else {
+        return true
+      }
+    }
+  },
+  methods: {
+    // 实时质检，打开监听，并弹出质检
+    check() {
+      this.$store.dispatch('spy', this.seatForm.exten)
+      // 弹出质检弹框
+      const row = {
+        callid: this.seatForm.callid
+      }
+      this.$refs.qualitycheck.initDialog('first', true, row)
+    }
   }
 }
 </script>

diff --git a/src/views/monitor/seatMonitor/components/allShow.vue b/src/views/monitor/seatMonitor/components/allShow.vue
index 11fcb74..c1f1e11 100644
--- a/src/views/monitor/seatMonitor/components/allShow.vue
+++ b/src/views/monitor/seatMonitor/components/allShow.vue
@@ -1,15 +1,37 @@
 <template>
   <div class="show-div">
-    <div v-for="item in list" :key="item.value" class="item-div">
-      <svg-icon v-if="item.icon" :class="'seat-'+item.icon" icon-class="icon-seat" class="icon-seat"/>
-      <div class="item-txt">{{ item.label }} : {{ data[item.value] }}</div>
+    <div class="refresh-div">
+      <el-button icon="el-icon-refresh" type="success" size="mini" @click="search">刷新</el-button>
+    </div>
+    <div class="state-div">
+      <div v-for="item in list" :key="item.value" class="item-div">
+        <svg-icon v-if="item.icon" :class="'seat-'+item.icon" icon-class="icon-seat" class="icon-seat"/>
+        <div class="item-txt">{{ item.label }} : {{ data[item.value] }}</div>
+      </div>
     </div>
   </div>
 </template>
 
 <script>
+import { mapState } from 'vuex'
 export default {
   name: 'AllShow',
+  props: {
+    data: {
+      type: Object,
+      default: function() {
+        return {
+          all: 8,
+          signout: 0,
+          signin: 0,
+          showidle: 0,
+          showbusy: 0,
+          busy: 0,
+          wait: 0
+        }
+      }
+    }
+  },
   data() {
     return {
       list: [
@@ -20,16 +42,21 @@
         { label: '示忙总数', value: 'showbusy', icon: 'showbusy' },
         { label: '忙碌总数', value: 'busy', icon: 'busy' },
         { label: '等待总数', value: 'wait', icon: 'wait' }
-      ],
-      data: {
-        all: 8,
-        signout: 0,
-        signin: 1,
-        showidle: 2,
-        showbusy: 5,
-        busy: 1,
-        wait: 0
-      }
+      ]
+    }
+  },
+  computed: {
+    ...mapState({
+      wsStatus: state => state.ivr.wsStatus,
+      extensionList: state => state.ivr.extensionList,
+      webSocket: state => state.ivr.webSocket,
+      websocketObj: state => state.ivr.websocketObj
+    })
+  },
+  methods: {
+    // 查询
+    search() {
+      this.$emit('refresh')
     }
   }
 }
@@ -40,21 +67,31 @@
     width: 100%;
     background-color: #66b1ff;
     padding: 5px 20px;
-    display: flex;
-    justify-content: space-between;
-    .item-div{
-      font-size:16px;
-      line-height: 2;
+    .refresh-div{
       display: inline-block;
-      .icon-seat{
-        width: 30px;
-        text-align: center;
-      }
-      .item-txt{
+      margin-right: 20px;
+      margin-left: -10px;
+    }
+    .state-div{
+      width: calc( 100% - 90px);
+      display: inline-flex;
+      /*display: flex;*/
+      justify-content: space-between;
+      .item-div{
+        font-size:16px;
+        line-height: 2;
         display: inline-block;
-        color:#ffffff;
+        .icon-seat{
+          width: 30px;
+          text-align: center;
+        }
+        .item-txt{
+          display: inline-block;
+          color:#ffffff;
+        }
       }
     }
+
   }
   .seat-offline{
     color:grey;
diff --git a/src/views/monitor/seatMonitor/components/ivrArea.vue b/src/views/monitor/seatMonitor/components/ivrArea.vue
index ebe91a7..912c102 100644
--- a/src/views/monitor/seatMonitor/components/ivrArea.vue
+++ b/src/views/monitor/seatMonitor/components/ivrArea.vue
@@ -1,14 +1,14 @@
 <template>
   <div class="realtime-check-div">
-    <div class="title">实时质检</div>
+    <div class="title">语音功能</div>
     <div class="body">
       <el-row>
-        <ivr-btn name="监听通话" type="warning"/>
-        <ivr-btn name="取消监听" type="info"/>
-        <ivr-btn name="拦截通话"/>
-        <ivr-btn name="强插通话" type="warning"/>
-        <ivr-btn name="取消强插" type="info"/>
-        <ivr-btn name="强拆通话"/>
+        <ivr-btn name="监听通话" @click="spy"/>
+        <!--<ivr-btn name="取消监听" type="info" @click=""/>-->
+        <!--<ivr-btn name="拦截通话"/>-->
+        <ivr-btn name="强插通话" @click="extenInsert"/>
+        <!--<ivr-btn name="取消强插" type="info"/>-->
+        <ivr-btn name="强拆分机" @click="extenCut"/>
       </el-row>
     </div>
   </div>
@@ -18,7 +18,27 @@
 import IvrBtn from './ivrBtn'
 export default {
   name: 'IvrArea',
-  components: { IvrBtn }
+  components: { IvrBtn },
+  props: {
+    currentUser: {
+      type: Object,
+      required: true
+    }
+  },
+  methods: {
+    // 监听
+    spy() {
+      this.$store.dispatch('spy', this.currentUser.exten)
+    },
+    // 强插分机
+    extenInsert() {
+      this.$store.dispatch('extenInsert', this.currentUser.exten)
+    },
+    // 强拆分机
+    extenCut() {
+      this.$store.dispatch('extenCut', this.currentUser.exten)
+    }
+  }
 }
 </script>
 
diff --git a/src/views/monitor/seatMonitor/components/ivrBtn.vue b/src/views/monitor/seatMonitor/components/ivrBtn.vue
index 6187257..aa22d34 100644
--- a/src/views/monitor/seatMonitor/components/ivrBtn.vue
+++ b/src/views/monitor/seatMonitor/components/ivrBtn.vue
@@ -1,7 +1,7 @@
 <template>
   <el-col :span="8">
     <div class="ivr-btn-div">
-      <el-button :type="type" :size="size" class="ivr-btn">{{ name }}</el-button>
+      <el-button :type="type" :size="size" class="ivr-btn" @click="click">{{ name }}</el-button>
     </div>
   </el-col>
 </template>
@@ -22,6 +22,11 @@
       type: String,
       default: 'small'
     }
+  },
+  methods: {
+    click() {
+      this.$emit('click')
+    }
   }
 }
 </script>
diff --git a/src/views/monitor/seatMonitor/components/realtimeCheck.vue b/src/views/monitor/seatMonitor/components/realtimeCheck.vue
index 86ca9c6..81f96f1 100644
--- a/src/views/monitor/seatMonitor/components/realtimeCheck.vue
+++ b/src/views/monitor/seatMonitor/components/realtimeCheck.vue
@@ -5,32 +5,59 @@
       <div class="line" >座席姓名 ：{{ seatForm.agentUserName }}</div>
       <div class="line" >座席工号 ：{{ seatForm.agentName }}</div>
       <div class="line" >座席电话 ：{{ seatForm.phone }}</div>
-      <div class="line" >座席状态 ：{{ seatForm.signin }}</div>
+      <div class="line" >座席状态 ：{{ seatForm.state }}</div>
       <div class="line" >登录分机 ：{{ seatForm.exten }}</div>
       <div class="line" >主叫号码 ：{{ seatForm.callerNumber }}</div>
       <div class="line" >被叫号码 ：{{ seatForm.calleeNumber }}</div>
       <div class="btns">
-        <el-button type="primary" size="small">实时质检</el-button>
+        <el-button :disabled="canJudge" type="primary" size="small" @click="check">实时质检</el-button>
       </div>
     </div>
+    <quality-check ref="qualitycheck"/>
   </div>
 </template>
 
 <script>
+import QualityCheck from '../../../qualityManage/qualitySound/qualityCheck'
 export default {
   name: 'RealtimeCheck',
-  data() {
-    return {
-      seatForm: {
-        agentUserName: '--',
-        agentName: '--',
-        phone: '--',
-        signin: '--',
-        exten: '--',
-        callerNumber: '--',
-        calleeNumber: '--'
+  components: { QualityCheck },
+  props: {
+    seatForm: {
+      type: Object,
+      default: function() {
+        return {
+          agentUserName: '--',
+          agentName: '--',
+          phone: '--',
+          state: '--',
+          exten: '--',
+          callerNumber: '--',
+          calleeNumber: '--',
+          callid: ''
+        }
       }
     }
+  },
+  computed: {
+    canJudge() { // 判断是否可以进行质检，通话中的可以进行实时质检
+      if (this.seatForm.state && this.seatForm.state.includes('通话')) {
+        return false
+      } else {
+        return true
+      }
+    }
+  },
+  methods: {
+    // 实时质检，打开监听，并弹出质检
+    check() {
+      this.$store.dispatch('spy', this.seatForm.exten)
+      // 弹出质检弹框
+      const row = {
+        callid: this.seatForm.callid
+      }
+      this.$refs.qualitycheck.initDialog('first', true, row)
+    }
   }
 }
 </script>
diff --git a/src/views/monitor/seatMonitor/components/seat.vue b/src/views/monitor/seatMonitor/components/seat.vue
index a4b1a9c..c718e1f 100644
--- a/src/views/monitor/seatMonitor/components/seat.vue
+++ b/src/views/monitor/seatMonitor/components/seat.vue
@@ -1,10 +1,10 @@
 <template>
-  <div class="seat-div">
-    <div class="seat-svg">
+  <div :class="current?'current-seat':''" class="seat-div" @click.native="clickSeat">
+    <div class="seat-svg" @click="clickSeat">
       <svg-icon :class="'seat-'+seatStatus" icon-class="icon-seat" class="icon-seat"/>
     </div>
     <div class="seat-text">
-      {{ agentName }}
+      {{ data.exten?data.exten:i }}【{{ data.name?data.name:'--' }}】
     </div>
   </div>
 </template>
@@ -12,14 +12,55 @@
 <script>
 export default {
   name: 'Seat',
+  // filters: {
+  //   statusFilter(val) {
+  //     if (val.state !== '空闲') {
+  //       return 'busy'
+  //     }
+  //   }
+  // },
   props: {
-    seatStatus: {
-      type: String,
-      default: 'busy'
+    data: {
+      type: Object,
+      default: function() {
+        return {
+          state: '',
+          busy: '',
+          exten: '',
+          name: '--',
+          loginId: ''
+        }
+      }
     },
-    agentName: {
+    i: {
       type: String,
-      default: '6042'
+      default: ''
+    },
+    current: {
+      type: Boolean,
+      default: false
+    }
+  },
+  computed: {
+    seatStatus: function() {
+      if (this.data.loginId) {
+        if (this.data.state !== '空闲') {
+          return 'busy'
+        } else {
+          if (this.data.busy) {
+            return 'showbusy'
+          } else {
+            return 'online'
+          }
+        }
+      } else {
+        return 'offline'
+      }
+    }
+  },
+  methods: {
+    clickSeat() {
+      this.$emit('detail', this.data.loginId, this.data.name, this.data.exten, this.data.state)
     }
   }
 }
@@ -29,8 +70,9 @@
 $iconsize:80px;
 .seat-div{
   width:100%;
-  margin-bottom: 20px;
+  margin-bottom: 10px;
   display: inline-block;
+  padding:10px;
   .seat-svg{
     text-align: center;
   }
@@ -56,5 +98,11 @@
     text-align: center;
   }
 }
+  .seat-div:hover{
+    cursor:pointer;
+  }
+  .current-seat{
+    background-color: #deebff;
+  }
 
 </style>

diff --git a/src/views/monitor/seatMonitor/components/allShow.vue b/src/views/monitor/seatMonitor/components/allShow.vue
index 11fcb74..c1f1e11 100644
--- a/src/views/monitor/seatMonitor/components/allShow.vue
+++ b/src/views/monitor/seatMonitor/components/allShow.vue
@@ -1,15 +1,37 @@
 <template>
   <div class="show-div">
-    <div v-for="item in list" :key="item.value" class="item-div">
-      <svg-icon v-if="item.icon" :class="'seat-'+item.icon" icon-class="icon-seat" class="icon-seat"/>
-      <div class="item-txt">{{ item.label }} : {{ data[item.value] }}</div>
+    <div class="refresh-div">
+      <el-button icon="el-icon-refresh" type="success" size="mini" @click="search">刷新</el-button>
+    </div>
+    <div class="state-div">
+      <div v-for="item in list" :key="item.value" class="item-div">
+        <svg-icon v-if="item.icon" :class="'seat-'+item.icon" icon-class="icon-seat" class="icon-seat"/>
+        <div class="item-txt">{{ item.label }} : {{ data[item.value] }}</div>
+      </div>
     </div>
   </div>
 </template>
 
 <script>
+import { mapState } from 'vuex'
 export default {
   name: 'AllShow',
+  props: {
+    data: {
+      type: Object,
+      default: function() {
+        return {
+          all: 8,
+          signout: 0,
+          signin: 0,
+          showidle: 0,
+          showbusy: 0,
+          busy: 0,
+          wait: 0
+        }
+      }
+    }
+  },
   data() {
     return {
       list: [
@@ -20,16 +42,21 @@
         { label: '示忙总数', value: 'showbusy', icon: 'showbusy' },
         { label: '忙碌总数', value: 'busy', icon: 'busy' },
         { label: '等待总数', value: 'wait', icon: 'wait' }
-      ],
-      data: {
-        all: 8,
-        signout: 0,
-        signin: 1,
-        showidle: 2,
-        showbusy: 5,
-        busy: 1,
-        wait: 0
-      }
+      ]
+    }
+  },
+  computed: {
+    ...mapState({
+      wsStatus: state => state.ivr.wsStatus,
+      extensionList: state => state.ivr.extensionList,
+      webSocket: state => state.ivr.webSocket,
+      websocketObj: state => state.ivr.websocketObj
+    })
+  },
+  methods: {
+    // 查询
+    search() {
+      this.$emit('refresh')
     }
   }
 }
@@ -40,21 +67,31 @@
     width: 100%;
     background-color: #66b1ff;
     padding: 5px 20px;
-    display: flex;
-    justify-content: space-between;
-    .item-div{
-      font-size:16px;
-      line-height: 2;
+    .refresh-div{
       display: inline-block;
-      .icon-seat{
-        width: 30px;
-        text-align: center;
-      }
-      .item-txt{
+      margin-right: 20px;
+      margin-left: -10px;
+    }
+    .state-div{
+      width: calc( 100% - 90px);
+      display: inline-flex;
+      /*display: flex;*/
+      justify-content: space-between;
+      .item-div{
+        font-size:16px;
+        line-height: 2;
         display: inline-block;
-        color:#ffffff;
+        .icon-seat{
+          width: 30px;
+          text-align: center;
+        }
+        .item-txt{
+          display: inline-block;
+          color:#ffffff;
+        }
       }
     }
+
   }
   .seat-offline{
     color:grey;
diff --git a/src/views/monitor/seatMonitor/components/ivrArea.vue b/src/views/monitor/seatMonitor/components/ivrArea.vue
index ebe91a7..912c102 100644
--- a/src/views/monitor/seatMonitor/components/ivrArea.vue
+++ b/src/views/monitor/seatMonitor/components/ivrArea.vue
@@ -1,14 +1,14 @@
 <template>
   <div class="realtime-check-div">
-    <div class="title">实时质检</div>
+    <div class="title">语音功能</div>
     <div class="body">
       <el-row>
-        <ivr-btn name="监听通话" type="warning"/>
-        <ivr-btn name="取消监听" type="info"/>
-        <ivr-btn name="拦截通话"/>
-        <ivr-btn name="强插通话" type="warning"/>
-        <ivr-btn name="取消强插" type="info"/>
-        <ivr-btn name="强拆通话"/>
+        <ivr-btn name="监听通话" @click="spy"/>
+        <!--<ivr-btn name="取消监听" type="info" @click=""/>-->
+        <!--<ivr-btn name="拦截通话"/>-->
+        <ivr-btn name="强插通话" @click="extenInsert"/>
+        <!--<ivr-btn name="取消强插" type="info"/>-->
+        <ivr-btn name="强拆分机" @click="extenCut"/>
       </el-row>
     </div>
   </div>
@@ -18,7 +18,27 @@
 import IvrBtn from './ivrBtn'
 export default {
   name: 'IvrArea',
-  components: { IvrBtn }
+  components: { IvrBtn },
+  props: {
+    currentUser: {
+      type: Object,
+      required: true
+    }
+  },
+  methods: {
+    // 监听
+    spy() {
+      this.$store.dispatch('spy', this.currentUser.exten)
+    },
+    // 强插分机
+    extenInsert() {
+      this.$store.dispatch('extenInsert', this.currentUser.exten)
+    },
+    // 强拆分机
+    extenCut() {
+      this.$store.dispatch('extenCut', this.currentUser.exten)
+    }
+  }
 }
 </script>
 
diff --git a/src/views/monitor/seatMonitor/components/ivrBtn.vue b/src/views/monitor/seatMonitor/components/ivrBtn.vue
index 6187257..aa22d34 100644
--- a/src/views/monitor/seatMonitor/components/ivrBtn.vue
+++ b/src/views/monitor/seatMonitor/components/ivrBtn.vue
@@ -1,7 +1,7 @@
 <template>
   <el-col :span="8">
     <div class="ivr-btn-div">
-      <el-button :type="type" :size="size" class="ivr-btn">{{ name }}</el-button>
+      <el-button :type="type" :size="size" class="ivr-btn" @click="click">{{ name }}</el-button>
     </div>
   </el-col>
 </template>
@@ -22,6 +22,11 @@
       type: String,
       default: 'small'
     }
+  },
+  methods: {
+    click() {
+      this.$emit('click')
+    }
   }
 }
 </script>
diff --git a/src/views/monitor/seatMonitor/components/realtimeCheck.vue b/src/views/monitor/seatMonitor/components/realtimeCheck.vue
index 86ca9c6..81f96f1 100644
--- a/src/views/monitor/seatMonitor/components/realtimeCheck.vue
+++ b/src/views/monitor/seatMonitor/components/realtimeCheck.vue
@@ -5,32 +5,59 @@
       <div class="line" >座席姓名 ：{{ seatForm.agentUserName }}</div>
       <div class="line" >座席工号 ：{{ seatForm.agentName }}</div>
       <div class="line" >座席电话 ：{{ seatForm.phone }}</div>
-      <div class="line" >座席状态 ：{{ seatForm.signin }}</div>
+      <div class="line" >座席状态 ：{{ seatForm.state }}</div>
       <div class="line" >登录分机 ：{{ seatForm.exten }}</div>
       <div class="line" >主叫号码 ：{{ seatForm.callerNumber }}</div>
       <div class="line" >被叫号码 ：{{ seatForm.calleeNumber }}</div>
       <div class="btns">
-        <el-button type="primary" size="small">实时质检</el-button>
+        <el-button :disabled="canJudge" type="primary" size="small" @click="check">实时质检</el-button>
       </div>
     </div>
+    <quality-check ref="qualitycheck"/>
   </div>
 </template>
 
 <script>
+import QualityCheck from '../../../qualityManage/qualitySound/qualityCheck'
 export default {
   name: 'RealtimeCheck',
-  data() {
-    return {
-      seatForm: {
-        agentUserName: '--',
-        agentName: '--',
-        phone: '--',
-        signin: '--',
-        exten: '--',
-        callerNumber: '--',
-        calleeNumber: '--'
+  components: { QualityCheck },
+  props: {
+    seatForm: {
+      type: Object,
+      default: function() {
+        return {
+          agentUserName: '--',
+          agentName: '--',
+          phone: '--',
+          state: '--',
+          exten: '--',
+          callerNumber: '--',
+          calleeNumber: '--',
+          callid: ''
+        }
       }
     }
+  },
+  computed: {
+    canJudge() { // 判断是否可以进行质检，通话中的可以进行实时质检
+      if (this.seatForm.state && this.seatForm.state.includes('通话')) {
+        return false
+      } else {
+        return true
+      }
+    }
+  },
+  methods: {
+    // 实时质检，打开监听，并弹出质检
+    check() {
+      this.$store.dispatch('spy', this.seatForm.exten)
+      // 弹出质检弹框
+      const row = {
+        callid: this.seatForm.callid
+      }
+      this.$refs.qualitycheck.initDialog('first', true, row)
+    }
   }
 }
 </script>
diff --git a/src/views/monitor/seatMonitor/components/seat.vue b/src/views/monitor/seatMonitor/components/seat.vue
index a4b1a9c..c718e1f 100644
--- a/src/views/monitor/seatMonitor/components/seat.vue
+++ b/src/views/monitor/seatMonitor/components/seat.vue
@@ -1,10 +1,10 @@
 <template>
-  <div class="seat-div">
-    <div class="seat-svg">
+  <div :class="current?'current-seat':''" class="seat-div" @click.native="clickSeat">
+    <div class="seat-svg" @click="clickSeat">
       <svg-icon :class="'seat-'+seatStatus" icon-class="icon-seat" class="icon-seat"/>
     </div>
     <div class="seat-text">
-      {{ agentName }}
+      {{ data.exten?data.exten:i }}【{{ data.name?data.name:'--' }}】
     </div>
   </div>
 </template>
@@ -12,14 +12,55 @@
 <script>
 export default {
   name: 'Seat',
+  // filters: {
+  //   statusFilter(val) {
+  //     if (val.state !== '空闲') {
+  //       return 'busy'
+  //     }
+  //   }
+  // },
   props: {
-    seatStatus: {
-      type: String,
-      default: 'busy'
+    data: {
+      type: Object,
+      default: function() {
+        return {
+          state: '',
+          busy: '',
+          exten: '',
+          name: '--',
+          loginId: ''
+        }
+      }
     },
-    agentName: {
+    i: {
       type: String,
-      default: '6042'
+      default: ''
+    },
+    current: {
+      type: Boolean,
+      default: false
+    }
+  },
+  computed: {
+    seatStatus: function() {
+      if (this.data.loginId) {
+        if (this.data.state !== '空闲') {
+          return 'busy'
+        } else {
+          if (this.data.busy) {
+            return 'showbusy'
+          } else {
+            return 'online'
+          }
+        }
+      } else {
+        return 'offline'
+      }
+    }
+  },
+  methods: {
+    clickSeat() {
+      this.$emit('detail', this.data.loginId, this.data.name, this.data.exten, this.data.state)
     }
   }
 }
@@ -29,8 +70,9 @@
 $iconsize:80px;
 .seat-div{
   width:100%;
-  margin-bottom: 20px;
+  margin-bottom: 10px;
   display: inline-block;
+  padding:10px;
   .seat-svg{
     text-align: center;
   }
@@ -56,5 +98,11 @@
     text-align: center;
   }
 }
+  .seat-div:hover{
+    cursor:pointer;
+  }
+  .current-seat{
+    background-color: #deebff;
+  }
 
 </style>
diff --git a/src/views/monitor/seatMonitor/seatMonitor.vue b/src/views/monitor/seatMonitor/seatMonitor.vue
index 38e014c..eac078a 100644
--- a/src/views/monitor/seatMonitor/seatMonitor.vue
+++ b/src/views/monitor/seatMonitor/seatMonitor.vue
@@ -1,21 +1,26 @@
 <template>
   <app-container>
-    <all-show/>
+    <all-show :data="showData" @refresh="refreshData"/>
     <el-row>
       <el-col :span="6">
-        <ivr-area/>
+        <ivr-area :seat-form="currentUser"/>
       </el-col>
       <el-col :span="12">
         <el-row>
-          <div class="realtime-seats">
-            <el-col v-for="i in 8" :span="6">
-              <seat/>
+          <div v-show="extensionList.length>0" class="realtime-seats">
+            <el-col v-for="exten in extensionList" :key="exten.exten" :span="6">
+              <seat :data="exten" :current="exten.exten==currentUser.exten" @detail="fetchUserDetail"/>
+            </el-col>
+          </div>
+          <div v-show="extensionList.length==0" class="realtime-seats">
+            <el-col v-for="i in 8" :key="i" :span="6">
+              <seat :i="'600'+i"/>
             </el-col>
           </div>
         </el-row>
       </el-col>
       <el-col :span="6">
-        <realtime-check/>
+        <realtime-check :seat-form="currentUser"/>
       </el-col>
     </el-row>
 
@@ -28,9 +33,177 @@
 import AllShow from './components/allShow'
 import RealtimeCheck from './components/realtimeCheck'
 import IvrArea from './components/ivrArea'
+import { mapState } from 'vuex'
+import { getUserSimpleList } from '@/api/system/user'
+import { getSeatsState, getCurrentCalls } from '@/api/cti'
+
 export default {
   name: 'SeatMonitor',
-  components: { IvrArea, RealtimeCheck, AllShow, Seat, AppContainer }
+  components: { IvrArea, RealtimeCheck, AllShow, Seat, AppContainer },
+  data() {
+    return {
+      showData: {
+        all: 8,
+        signin: 0,
+        signout: 8,
+        showbusy: 0,
+        showidle: 0,
+        busy: 0,
+        wait: 0
+      }, // 总览数据
+      userList: [], // 从后台获取的用户列表
+      currentUser: {
+        agentUserName: '--',
+        agentName: '--',
+        phone: '--',
+        state: '--',
+        exten: '--',
+        callerNumber: '--',
+        calleeNumber: '--',
+        callid: ''
+      },
+      callList: [] // 正在通话列表
+    }
+  },
+  computed: {
+    ...mapState({
+      exten: state => state.user.exten, // 用户绑定的分机号
+      wsStatus: state => state.ivr.wsStatus,
+      signStatus: state => state.ivr.signStatus, // 签入签出状态
+      callStatus: state => state.ivr.callStatus,
+      isInCall: state => state.ivr.isInCall,
+      isInComming: state => state.ivr.isInComming,
+      extensionList: state => state.ivr.extensionList,
+      reg: state => state.ivr.reg,
+      webSocket: state => state.ivr.websocket,
+      websocketObj: state => state.ivr.websocketObj
+    })
+  },
+  watch: {
+    extensionList(val) {
+      this.handleExtensionListChange(val)
+    },
+    signStatus(val) {
+      if (val) {
+        this.getExtentionList()
+      }
+    }
+  },
+  created() {
+    this.fetchUserList()
+    this.refreshData()
+  },
+  methods: {
+    refreshData() {
+      this.getExtentionList()
+      this.fetchCurrentCalls()
+    },
+    // 当extensionList变化之后的处理
+    handleExtensionListChange(val) {
+      const data = {
+        all: val.length,
+        signin: 0,
+        signout: 0,
+        showbusy: 0,
+        showidle: 0,
+        busy: 0,
+        wait: 0
+      }
+      for (const item of val) {
+        if (item.loginId) { // 有loginId表示已签入，否则表示未签入
+          data.signin += 1
+          if (item.state === '空闲') { // 话机为空闲状态,等待数+1，否则忙碌数+1
+            data.wait += 1
+          } else {
+            data.busy += 1
+          }
+          if (item.busy) { // 如果busy不为空,示忙数+1
+            data.showbusy += 1
+          } else {
+            data.showidle += 1
+          }
+        }
+      }
+      data.signout = data.all - data.signin
+      this.showData = data
+    },
+    // 获取已登录坐席列表
+    getExtentionList() {
+      if (this.wsStatus) {
+        const params = {
+          type: 'all'
+        }
+        this.$store.dispatch('getExtensionList', params)
+      }
+      // getSeatsState().then(response => {
+      //   console.log(response)
+      // })
+    },
+    // 获取用户列表
+    fetchUserList() {
+      const params = {
+        roleTips: 'receiver,monitor,administrator'
+      }
+      getUserSimpleList(params).then(response => {
+        if (response.code === 200) {
+          this.userList = response.data
+        }
+      })
+    },
+    // 根据坐席号获取当前用户详情
+    fetchUserDetail(loginId, name, exten, state) {
+      if (loginId) {
+        for (const user of this.userList) {
+          if (user.id === loginId) {
+            this.currentUser.agentUserName = user.name
+            this.currentUser.agentName = name
+            this.currentUser.phone = user.phone
+            this.currentUser.exten = exten
+            this.currentUser.state = state
+            if (state.includes('通话')) {
+              const res = this.fetchCurrentCalls(loginId)
+              if (res) {
+                this.currentUser.callerNumber = res.callerNumber
+                this.currentUser.calleeNumber = res.calleeNumber
+                this.currentUser.callid = res.callid
+              }
+            }
+          }
+        }
+      } else {
+        this.currentUser = {
+          agentUserName: '--',
+          agentName: '--',
+          phone: '--',
+          state: '--',
+          exten: '--',
+          callerNumber: '--',
+          calleeNumber: '--',
+          callid: ''
+        }
+      }
+    },
+    // 获取当前正在通话列表
+    fetchCurrentCalls(loginId) {
+      getCurrentCalls().then(response => {
+        console.log(response)
+        response = {
+          root: [{ 'Call_pbxName': 'spzc_pbx', 'Call_city': '', 'Call_isp': '中国联通', 'Call_number': '18513995803', 'Call_province': '北京', 'Call_callStatus': '接通', 'Call_id': 'b7c32570-8acd-11ea-96b3-89e56eb1026b', 'Call_staySeconds': '8', 'Call_talkSeconds': '4', 'Call_ivrName': '座席组--客服', 'Call_agentName': '888', 'Call_otherLegNumber': '6001', 'Call_agentStaffid': '1', 'Call_sp_entityName': 'Call' }]
+        }
+        this.callList = response.root
+        for (const call of this.callList) {
+          if (call.Call_agentStaffid === loginId) {
+            return {
+              callerNumber: call.Call_number,
+              calleeNumber: call.Call_otherLegNumber,
+              callid: call.Call_id
+            }
+          }
+        }
+        return null
+      })
+    }
+  }
 }
 </script>