diff --git a/src/icons/svg/icon-seat.svg b/src/icons/svg/icon-seat.svg
new file mode 100644
index 0000000..85943e0
--- /dev/null
+++ b/src/icons/svg/icon-seat.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1587379467199" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5323" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M236.8 519.04a293.12 293.12 0 0 0 71.68 111.36 29.44 29.44 0 0 0 13.44 28.16l24.96 16a29.44 29.44 0 1 0 32.64-49.92l-25.6-15.36000001a29.44 29.44 0 0 0-26.24 1e-8 261.76 261.76 0 0 1-58.24-87.68000001L288.63999999 521.6l1e-8-58.24a23.68 23.68 0 0 0 19.84 9.6 17.92 17.92 0 0 0 8.96-3.84A216.32 216.32 0 0 0 512 618.88a179.84 179.84 0 0 0 56.32-8.96 231.68 231.68 0 0 0 139.52-146.56 17.92 17.92 0 0 0 8.96 3.84 21.76 21.76 0 0 0 17.92-7.04l1e-8 55.68L780.16 515.84a42.88 42.88 0 0 0 44.8-40.96l5.12-128a42.88 42.88 0 0 0-24.32-40.32 377.6 377.6 0 0 0-8.32-45.44 349.44 349.44 0 0 0-74.24-144A286.72 286.72 0 0 0 567.68 24.96 267.52 267.52 0 0 0 512 18.56a278.4 278.4 0 0 0-211.2 100.48 350.08 350.08 0 0 0-77.44 144.64 376.32 376.32 0 0 0-8.96 46.72 42.88 42.88 0 0 0-22.4 39.04l5.76 128a42.88 42.88 0 0 0 39.04 41.6z m330.88 48A142.08 142.08 0 0 1 512 576.00000001C416 576 337.92 481.92 337.92 362.88a261.76 261.76 0 0 1 7.04-59.52 112 112 0 0 1 64-39.68 123.52 123.52 0 0 1 64 0 128 128 0 0 1 69.76 45.44 204.16 204.16 0 0 0 30.72000001 30.72 181.76 181.76 0 0 0 110.71999999 44.16 214.4 214.4 0 0 1-116.48 183.04zM272 263.68A256 256 0 0 1 512 64a216.96 216.96 0 0 1 58.88 8.32 270.72 270.72 0 0 1 178.56 192 330.88 330.88 0 0 1 8.96 39.68l-17.92 0 1e-8 48.64-6.4 0a17.28 17.28 0 0 0-8.32 0 298.88 298.88 0 0 0-16.64000001-88.32 232.32 232.32 0 0 0-140.16-147.2A179.84 179.84 0 0 0 512 106.88000001a216.96 216.96 0 0 0-197.12 156.79999999 298.24 298.24 0 0 0-16.64000001 88.32 17.28 17.28 0 0 0-8.32 0 17.92 17.92 0 0 0-8.32 3.84l1e-8-49.92L262.4 305.92a326.4 326.4 0 0 1 9.6-42.24z" p-id="5324"></path><path d="M864 752.64a272 272 0 0 0-21.76-29.44A262.4 262.4 0 0 0 640 625.28l-6.4 0a112 112 0 0 1-51.2 26.24000001l-24.96 101.11999999L512 945.92l-45.44-192-23.68-100.47999999-17.92-7.04000001a64 64 0 0 1-64 64 64 64 0 0 1-32-6.4l-25.6-16a64 64 0 0 1-25.6-33.91999999A269.44 269.44 0 0 0 117.12 896l0 97.91999999a14.08 14.08 0 0 1 5.12 14.72000001l779.52 0a14.08 14.08 0 0 1 5.12-14.72000001l0-101.11999999a264.96 264.96 0 0 0-42.88-140.16z" p-id="5325"></path></svg>

diff --git a/src/icons/svg/icon-seat.svg b/src/icons/svg/icon-seat.svg
new file mode 100644
index 0000000..85943e0
--- /dev/null
+++ b/src/icons/svg/icon-seat.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1587379467199" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5323" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M236.8 519.04a293.12 293.12 0 0 0 71.68 111.36 29.44 29.44 0 0 0 13.44 28.16l24.96 16a29.44 29.44 0 1 0 32.64-49.92l-25.6-15.36000001a29.44 29.44 0 0 0-26.24 1e-8 261.76 261.76 0 0 1-58.24-87.68000001L288.63999999 521.6l1e-8-58.24a23.68 23.68 0 0 0 19.84 9.6 17.92 17.92 0 0 0 8.96-3.84A216.32 216.32 0 0 0 512 618.88a179.84 179.84 0 0 0 56.32-8.96 231.68 231.68 0 0 0 139.52-146.56 17.92 17.92 0 0 0 8.96 3.84 21.76 21.76 0 0 0 17.92-7.04l1e-8 55.68L780.16 515.84a42.88 42.88 0 0 0 44.8-40.96l5.12-128a42.88 42.88 0 0 0-24.32-40.32 377.6 377.6 0 0 0-8.32-45.44 349.44 349.44 0 0 0-74.24-144A286.72 286.72 0 0 0 567.68 24.96 267.52 267.52 0 0 0 512 18.56a278.4 278.4 0 0 0-211.2 100.48 350.08 350.08 0 0 0-77.44 144.64 376.32 376.32 0 0 0-8.96 46.72 42.88 42.88 0 0 0-22.4 39.04l5.76 128a42.88 42.88 0 0 0 39.04 41.6z m330.88 48A142.08 142.08 0 0 1 512 576.00000001C416 576 337.92 481.92 337.92 362.88a261.76 261.76 0 0 1 7.04-59.52 112 112 0 0 1 64-39.68 123.52 123.52 0 0 1 64 0 128 128 0 0 1 69.76 45.44 204.16 204.16 0 0 0 30.72000001 30.72 181.76 181.76 0 0 0 110.71999999 44.16 214.4 214.4 0 0 1-116.48 183.04zM272 263.68A256 256 0 0 1 512 64a216.96 216.96 0 0 1 58.88 8.32 270.72 270.72 0 0 1 178.56 192 330.88 330.88 0 0 1 8.96 39.68l-17.92 0 1e-8 48.64-6.4 0a17.28 17.28 0 0 0-8.32 0 298.88 298.88 0 0 0-16.64000001-88.32 232.32 232.32 0 0 0-140.16-147.2A179.84 179.84 0 0 0 512 106.88000001a216.96 216.96 0 0 0-197.12 156.79999999 298.24 298.24 0 0 0-16.64000001 88.32 17.28 17.28 0 0 0-8.32 0 17.92 17.92 0 0 0-8.32 3.84l1e-8-49.92L262.4 305.92a326.4 326.4 0 0 1 9.6-42.24z" p-id="5324"></path><path d="M864 752.64a272 272 0 0 0-21.76-29.44A262.4 262.4 0 0 0 640 625.28l-6.4 0a112 112 0 0 1-51.2 26.24000001l-24.96 101.11999999L512 945.92l-45.44-192-23.68-100.47999999-17.92-7.04000001a64 64 0 0 1-64 64 64 64 0 0 1-32-6.4l-25.6-16a64 64 0 0 1-25.6-33.91999999A269.44 269.44 0 0 0 117.12 896l0 97.91999999a14.08 14.08 0 0 1 5.12 14.72000001l779.52 0a14.08 14.08 0 0 1 5.12-14.72000001l0-101.11999999a264.96 264.96 0 0 0-42.88-140.16z" p-id="5325"></path></svg>
diff --git a/src/views/monitor/seatMonitor/components/allShow.vue b/src/views/monitor/seatMonitor/components/allShow.vue
new file mode 100644
index 0000000..11fcb74
--- /dev/null
+++ b/src/views/monitor/seatMonitor/components/allShow.vue
@@ -0,0 +1,77 @@
+<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>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AllShow',
+  data() {
+    return {
+      list: [
+        { label: '座席总数', value: 'all', icon: '' },
+        { label: '签出总数', value: 'signout', icon: 'offline' },
+        { label: '签入总数', value: 'signin', icon: 'online' },
+        { label: '示闲总数', value: 'showidle', icon: 'showidle' },
+        { 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
+      }
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .show-div{
+    width: 100%;
+    background-color: #66b1ff;
+    padding: 5px 20px;
+    display: flex;
+    justify-content: space-between;
+    .item-div{
+      font-size:16px;
+      line-height: 2;
+      display: inline-block;
+      .icon-seat{
+        width: 30px;
+        text-align: center;
+      }
+      .item-txt{
+        display: inline-block;
+        color:#ffffff;
+      }
+    }
+  }
+  .seat-offline{
+    color:grey;
+  }
+  .seat-online{
+    color:#409EFF;
+  }
+  .seat-busy{
+    color:#ff0000;
+  }
+  .seat-showbusy{
+    color:#ffff00;
+  }
+  .seat-showidle{
+    color: #58da50;
+  }
+  .seat-wait{
+    color:#fab6b6;
+  }
+</style>

diff --git a/src/icons/svg/icon-seat.svg b/src/icons/svg/icon-seat.svg
new file mode 100644
index 0000000..85943e0
--- /dev/null
+++ b/src/icons/svg/icon-seat.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1587379467199" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5323" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M236.8 519.04a293.12 293.12 0 0 0 71.68 111.36 29.44 29.44 0 0 0 13.44 28.16l24.96 16a29.44 29.44 0 1 0 32.64-49.92l-25.6-15.36000001a29.44 29.44 0 0 0-26.24 1e-8 261.76 261.76 0 0 1-58.24-87.68000001L288.63999999 521.6l1e-8-58.24a23.68 23.68 0 0 0 19.84 9.6 17.92 17.92 0 0 0 8.96-3.84A216.32 216.32 0 0 0 512 618.88a179.84 179.84 0 0 0 56.32-8.96 231.68 231.68 0 0 0 139.52-146.56 17.92 17.92 0 0 0 8.96 3.84 21.76 21.76 0 0 0 17.92-7.04l1e-8 55.68L780.16 515.84a42.88 42.88 0 0 0 44.8-40.96l5.12-128a42.88 42.88 0 0 0-24.32-40.32 377.6 377.6 0 0 0-8.32-45.44 349.44 349.44 0 0 0-74.24-144A286.72 286.72 0 0 0 567.68 24.96 267.52 267.52 0 0 0 512 18.56a278.4 278.4 0 0 0-211.2 100.48 350.08 350.08 0 0 0-77.44 144.64 376.32 376.32 0 0 0-8.96 46.72 42.88 42.88 0 0 0-22.4 39.04l5.76 128a42.88 42.88 0 0 0 39.04 41.6z m330.88 48A142.08 142.08 0 0 1 512 576.00000001C416 576 337.92 481.92 337.92 362.88a261.76 261.76 0 0 1 7.04-59.52 112 112 0 0 1 64-39.68 123.52 123.52 0 0 1 64 0 128 128 0 0 1 69.76 45.44 204.16 204.16 0 0 0 30.72000001 30.72 181.76 181.76 0 0 0 110.71999999 44.16 214.4 214.4 0 0 1-116.48 183.04zM272 263.68A256 256 0 0 1 512 64a216.96 216.96 0 0 1 58.88 8.32 270.72 270.72 0 0 1 178.56 192 330.88 330.88 0 0 1 8.96 39.68l-17.92 0 1e-8 48.64-6.4 0a17.28 17.28 0 0 0-8.32 0 298.88 298.88 0 0 0-16.64000001-88.32 232.32 232.32 0 0 0-140.16-147.2A179.84 179.84 0 0 0 512 106.88000001a216.96 216.96 0 0 0-197.12 156.79999999 298.24 298.24 0 0 0-16.64000001 88.32 17.28 17.28 0 0 0-8.32 0 17.92 17.92 0 0 0-8.32 3.84l1e-8-49.92L262.4 305.92a326.4 326.4 0 0 1 9.6-42.24z" p-id="5324"></path><path d="M864 752.64a272 272 0 0 0-21.76-29.44A262.4 262.4 0 0 0 640 625.28l-6.4 0a112 112 0 0 1-51.2 26.24000001l-24.96 101.11999999L512 945.92l-45.44-192-23.68-100.47999999-17.92-7.04000001a64 64 0 0 1-64 64 64 64 0 0 1-32-6.4l-25.6-16a64 64 0 0 1-25.6-33.91999999A269.44 269.44 0 0 0 117.12 896l0 97.91999999a14.08 14.08 0 0 1 5.12 14.72000001l779.52 0a14.08 14.08 0 0 1 5.12-14.72000001l0-101.11999999a264.96 264.96 0 0 0-42.88-140.16z" p-id="5325"></path></svg>
diff --git a/src/views/monitor/seatMonitor/components/allShow.vue b/src/views/monitor/seatMonitor/components/allShow.vue
new file mode 100644
index 0000000..11fcb74
--- /dev/null
+++ b/src/views/monitor/seatMonitor/components/allShow.vue
@@ -0,0 +1,77 @@
+<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>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AllShow',
+  data() {
+    return {
+      list: [
+        { label: '座席总数', value: 'all', icon: '' },
+        { label: '签出总数', value: 'signout', icon: 'offline' },
+        { label: '签入总数', value: 'signin', icon: 'online' },
+        { label: '示闲总数', value: 'showidle', icon: 'showidle' },
+        { 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
+      }
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .show-div{
+    width: 100%;
+    background-color: #66b1ff;
+    padding: 5px 20px;
+    display: flex;
+    justify-content: space-between;
+    .item-div{
+      font-size:16px;
+      line-height: 2;
+      display: inline-block;
+      .icon-seat{
+        width: 30px;
+        text-align: center;
+      }
+      .item-txt{
+        display: inline-block;
+        color:#ffffff;
+      }
+    }
+  }
+  .seat-offline{
+    color:grey;
+  }
+  .seat-online{
+    color:#409EFF;
+  }
+  .seat-busy{
+    color:#ff0000;
+  }
+  .seat-showbusy{
+    color:#ffff00;
+  }
+  .seat-showidle{
+    color: #58da50;
+  }
+  .seat-wait{
+    color:#fab6b6;
+  }
+</style>
diff --git a/src/views/monitor/seatMonitor/components/ivrArea.vue b/src/views/monitor/seatMonitor/components/ivrArea.vue
new file mode 100644
index 0000000..ebe91a7
--- /dev/null
+++ b/src/views/monitor/seatMonitor/components/ivrArea.vue
@@ -0,0 +1,49 @@
+<template>
+  <div class="realtime-check-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="强拆通话"/>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script>
+import IvrBtn from './ivrBtn'
+export default {
+  name: 'IvrArea',
+  components: { IvrBtn }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .realtime-check-div{
+    padding: 10px 0px;
+    height: 100%;
+    .title{
+      padding-left: 15px;
+      line-height: 2;
+      width: 100%;
+      background-color: #3a8ee6;
+      color:#ffffff;
+    }
+    .body{
+      height: 100%;
+      border-right:1px solid #f0f0f0;
+      padding-top: 10px;
+      .line{
+        line-height: 2
+      }
+      .btns{
+        margin-top: 20px;
+        text-align: center;
+      }
+    }
+  }
+</style>

diff --git a/src/icons/svg/icon-seat.svg b/src/icons/svg/icon-seat.svg
new file mode 100644
index 0000000..85943e0
--- /dev/null
+++ b/src/icons/svg/icon-seat.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1587379467199" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5323" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M236.8 519.04a293.12 293.12 0 0 0 71.68 111.36 29.44 29.44 0 0 0 13.44 28.16l24.96 16a29.44 29.44 0 1 0 32.64-49.92l-25.6-15.36000001a29.44 29.44 0 0 0-26.24 1e-8 261.76 261.76 0 0 1-58.24-87.68000001L288.63999999 521.6l1e-8-58.24a23.68 23.68 0 0 0 19.84 9.6 17.92 17.92 0 0 0 8.96-3.84A216.32 216.32 0 0 0 512 618.88a179.84 179.84 0 0 0 56.32-8.96 231.68 231.68 0 0 0 139.52-146.56 17.92 17.92 0 0 0 8.96 3.84 21.76 21.76 0 0 0 17.92-7.04l1e-8 55.68L780.16 515.84a42.88 42.88 0 0 0 44.8-40.96l5.12-128a42.88 42.88 0 0 0-24.32-40.32 377.6 377.6 0 0 0-8.32-45.44 349.44 349.44 0 0 0-74.24-144A286.72 286.72 0 0 0 567.68 24.96 267.52 267.52 0 0 0 512 18.56a278.4 278.4 0 0 0-211.2 100.48 350.08 350.08 0 0 0-77.44 144.64 376.32 376.32 0 0 0-8.96 46.72 42.88 42.88 0 0 0-22.4 39.04l5.76 128a42.88 42.88 0 0 0 39.04 41.6z m330.88 48A142.08 142.08 0 0 1 512 576.00000001C416 576 337.92 481.92 337.92 362.88a261.76 261.76 0 0 1 7.04-59.52 112 112 0 0 1 64-39.68 123.52 123.52 0 0 1 64 0 128 128 0 0 1 69.76 45.44 204.16 204.16 0 0 0 30.72000001 30.72 181.76 181.76 0 0 0 110.71999999 44.16 214.4 214.4 0 0 1-116.48 183.04zM272 263.68A256 256 0 0 1 512 64a216.96 216.96 0 0 1 58.88 8.32 270.72 270.72 0 0 1 178.56 192 330.88 330.88 0 0 1 8.96 39.68l-17.92 0 1e-8 48.64-6.4 0a17.28 17.28 0 0 0-8.32 0 298.88 298.88 0 0 0-16.64000001-88.32 232.32 232.32 0 0 0-140.16-147.2A179.84 179.84 0 0 0 512 106.88000001a216.96 216.96 0 0 0-197.12 156.79999999 298.24 298.24 0 0 0-16.64000001 88.32 17.28 17.28 0 0 0-8.32 0 17.92 17.92 0 0 0-8.32 3.84l1e-8-49.92L262.4 305.92a326.4 326.4 0 0 1 9.6-42.24z" p-id="5324"></path><path d="M864 752.64a272 272 0 0 0-21.76-29.44A262.4 262.4 0 0 0 640 625.28l-6.4 0a112 112 0 0 1-51.2 26.24000001l-24.96 101.11999999L512 945.92l-45.44-192-23.68-100.47999999-17.92-7.04000001a64 64 0 0 1-64 64 64 64 0 0 1-32-6.4l-25.6-16a64 64 0 0 1-25.6-33.91999999A269.44 269.44 0 0 0 117.12 896l0 97.91999999a14.08 14.08 0 0 1 5.12 14.72000001l779.52 0a14.08 14.08 0 0 1 5.12-14.72000001l0-101.11999999a264.96 264.96 0 0 0-42.88-140.16z" p-id="5325"></path></svg>
diff --git a/src/views/monitor/seatMonitor/components/allShow.vue b/src/views/monitor/seatMonitor/components/allShow.vue
new file mode 100644
index 0000000..11fcb74
--- /dev/null
+++ b/src/views/monitor/seatMonitor/components/allShow.vue
@@ -0,0 +1,77 @@
+<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>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AllShow',
+  data() {
+    return {
+      list: [
+        { label: '座席总数', value: 'all', icon: '' },
+        { label: '签出总数', value: 'signout', icon: 'offline' },
+        { label: '签入总数', value: 'signin', icon: 'online' },
+        { label: '示闲总数', value: 'showidle', icon: 'showidle' },
+        { 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
+      }
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .show-div{
+    width: 100%;
+    background-color: #66b1ff;
+    padding: 5px 20px;
+    display: flex;
+    justify-content: space-between;
+    .item-div{
+      font-size:16px;
+      line-height: 2;
+      display: inline-block;
+      .icon-seat{
+        width: 30px;
+        text-align: center;
+      }
+      .item-txt{
+        display: inline-block;
+        color:#ffffff;
+      }
+    }
+  }
+  .seat-offline{
+    color:grey;
+  }
+  .seat-online{
+    color:#409EFF;
+  }
+  .seat-busy{
+    color:#ff0000;
+  }
+  .seat-showbusy{
+    color:#ffff00;
+  }
+  .seat-showidle{
+    color: #58da50;
+  }
+  .seat-wait{
+    color:#fab6b6;
+  }
+</style>
diff --git a/src/views/monitor/seatMonitor/components/ivrArea.vue b/src/views/monitor/seatMonitor/components/ivrArea.vue
new file mode 100644
index 0000000..ebe91a7
--- /dev/null
+++ b/src/views/monitor/seatMonitor/components/ivrArea.vue
@@ -0,0 +1,49 @@
+<template>
+  <div class="realtime-check-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="强拆通话"/>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script>
+import IvrBtn from './ivrBtn'
+export default {
+  name: 'IvrArea',
+  components: { IvrBtn }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .realtime-check-div{
+    padding: 10px 0px;
+    height: 100%;
+    .title{
+      padding-left: 15px;
+      line-height: 2;
+      width: 100%;
+      background-color: #3a8ee6;
+      color:#ffffff;
+    }
+    .body{
+      height: 100%;
+      border-right:1px solid #f0f0f0;
+      padding-top: 10px;
+      .line{
+        line-height: 2
+      }
+      .btns{
+        margin-top: 20px;
+        text-align: center;
+      }
+    }
+  }
+</style>
diff --git a/src/views/monitor/seatMonitor/components/ivrBtn.vue b/src/views/monitor/seatMonitor/components/ivrBtn.vue
new file mode 100644
index 0000000..6187257
--- /dev/null
+++ b/src/views/monitor/seatMonitor/components/ivrBtn.vue
@@ -0,0 +1,39 @@
+<template>
+  <el-col :span="8">
+    <div class="ivr-btn-div">
+      <el-button :type="type" :size="size" class="ivr-btn">{{ name }}</el-button>
+    </div>
+  </el-col>
+</template>
+
+<script>
+export default {
+  name: 'IvrBtn',
+  props: {
+    name: {
+      type: String,
+      default: ''
+    },
+    type: {
+      type: String,
+      default: 'primary'
+    },
+    size: {
+      type: String,
+      default: 'small'
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .ivr-btn-div{
+    width: 100%;
+    padding: 5px;
+  }
+.ivr-btn{
+  width: 100%;
+  /*margin: 5px;*/
+  box-sizing: border-box;
+}
+</style>

diff --git a/src/icons/svg/icon-seat.svg b/src/icons/svg/icon-seat.svg
new file mode 100644
index 0000000..85943e0
--- /dev/null
+++ b/src/icons/svg/icon-seat.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1587379467199" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5323" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M236.8 519.04a293.12 293.12 0 0 0 71.68 111.36 29.44 29.44 0 0 0 13.44 28.16l24.96 16a29.44 29.44 0 1 0 32.64-49.92l-25.6-15.36000001a29.44 29.44 0 0 0-26.24 1e-8 261.76 261.76 0 0 1-58.24-87.68000001L288.63999999 521.6l1e-8-58.24a23.68 23.68 0 0 0 19.84 9.6 17.92 17.92 0 0 0 8.96-3.84A216.32 216.32 0 0 0 512 618.88a179.84 179.84 0 0 0 56.32-8.96 231.68 231.68 0 0 0 139.52-146.56 17.92 17.92 0 0 0 8.96 3.84 21.76 21.76 0 0 0 17.92-7.04l1e-8 55.68L780.16 515.84a42.88 42.88 0 0 0 44.8-40.96l5.12-128a42.88 42.88 0 0 0-24.32-40.32 377.6 377.6 0 0 0-8.32-45.44 349.44 349.44 0 0 0-74.24-144A286.72 286.72 0 0 0 567.68 24.96 267.52 267.52 0 0 0 512 18.56a278.4 278.4 0 0 0-211.2 100.48 350.08 350.08 0 0 0-77.44 144.64 376.32 376.32 0 0 0-8.96 46.72 42.88 42.88 0 0 0-22.4 39.04l5.76 128a42.88 42.88 0 0 0 39.04 41.6z m330.88 48A142.08 142.08 0 0 1 512 576.00000001C416 576 337.92 481.92 337.92 362.88a261.76 261.76 0 0 1 7.04-59.52 112 112 0 0 1 64-39.68 123.52 123.52 0 0 1 64 0 128 128 0 0 1 69.76 45.44 204.16 204.16 0 0 0 30.72000001 30.72 181.76 181.76 0 0 0 110.71999999 44.16 214.4 214.4 0 0 1-116.48 183.04zM272 263.68A256 256 0 0 1 512 64a216.96 216.96 0 0 1 58.88 8.32 270.72 270.72 0 0 1 178.56 192 330.88 330.88 0 0 1 8.96 39.68l-17.92 0 1e-8 48.64-6.4 0a17.28 17.28 0 0 0-8.32 0 298.88 298.88 0 0 0-16.64000001-88.32 232.32 232.32 0 0 0-140.16-147.2A179.84 179.84 0 0 0 512 106.88000001a216.96 216.96 0 0 0-197.12 156.79999999 298.24 298.24 0 0 0-16.64000001 88.32 17.28 17.28 0 0 0-8.32 0 17.92 17.92 0 0 0-8.32 3.84l1e-8-49.92L262.4 305.92a326.4 326.4 0 0 1 9.6-42.24z" p-id="5324"></path><path d="M864 752.64a272 272 0 0 0-21.76-29.44A262.4 262.4 0 0 0 640 625.28l-6.4 0a112 112 0 0 1-51.2 26.24000001l-24.96 101.11999999L512 945.92l-45.44-192-23.68-100.47999999-17.92-7.04000001a64 64 0 0 1-64 64 64 64 0 0 1-32-6.4l-25.6-16a64 64 0 0 1-25.6-33.91999999A269.44 269.44 0 0 0 117.12 896l0 97.91999999a14.08 14.08 0 0 1 5.12 14.72000001l779.52 0a14.08 14.08 0 0 1 5.12-14.72000001l0-101.11999999a264.96 264.96 0 0 0-42.88-140.16z" p-id="5325"></path></svg>
diff --git a/src/views/monitor/seatMonitor/components/allShow.vue b/src/views/monitor/seatMonitor/components/allShow.vue
new file mode 100644
index 0000000..11fcb74
--- /dev/null
+++ b/src/views/monitor/seatMonitor/components/allShow.vue
@@ -0,0 +1,77 @@
+<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>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AllShow',
+  data() {
+    return {
+      list: [
+        { label: '座席总数', value: 'all', icon: '' },
+        { label: '签出总数', value: 'signout', icon: 'offline' },
+        { label: '签入总数', value: 'signin', icon: 'online' },
+        { label: '示闲总数', value: 'showidle', icon: 'showidle' },
+        { 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
+      }
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .show-div{
+    width: 100%;
+    background-color: #66b1ff;
+    padding: 5px 20px;
+    display: flex;
+    justify-content: space-between;
+    .item-div{
+      font-size:16px;
+      line-height: 2;
+      display: inline-block;
+      .icon-seat{
+        width: 30px;
+        text-align: center;
+      }
+      .item-txt{
+        display: inline-block;
+        color:#ffffff;
+      }
+    }
+  }
+  .seat-offline{
+    color:grey;
+  }
+  .seat-online{
+    color:#409EFF;
+  }
+  .seat-busy{
+    color:#ff0000;
+  }
+  .seat-showbusy{
+    color:#ffff00;
+  }
+  .seat-showidle{
+    color: #58da50;
+  }
+  .seat-wait{
+    color:#fab6b6;
+  }
+</style>
diff --git a/src/views/monitor/seatMonitor/components/ivrArea.vue b/src/views/monitor/seatMonitor/components/ivrArea.vue
new file mode 100644
index 0000000..ebe91a7
--- /dev/null
+++ b/src/views/monitor/seatMonitor/components/ivrArea.vue
@@ -0,0 +1,49 @@
+<template>
+  <div class="realtime-check-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="强拆通话"/>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script>
+import IvrBtn from './ivrBtn'
+export default {
+  name: 'IvrArea',
+  components: { IvrBtn }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .realtime-check-div{
+    padding: 10px 0px;
+    height: 100%;
+    .title{
+      padding-left: 15px;
+      line-height: 2;
+      width: 100%;
+      background-color: #3a8ee6;
+      color:#ffffff;
+    }
+    .body{
+      height: 100%;
+      border-right:1px solid #f0f0f0;
+      padding-top: 10px;
+      .line{
+        line-height: 2
+      }
+      .btns{
+        margin-top: 20px;
+        text-align: center;
+      }
+    }
+  }
+</style>
diff --git a/src/views/monitor/seatMonitor/components/ivrBtn.vue b/src/views/monitor/seatMonitor/components/ivrBtn.vue
new file mode 100644
index 0000000..6187257
--- /dev/null
+++ b/src/views/monitor/seatMonitor/components/ivrBtn.vue
@@ -0,0 +1,39 @@
+<template>
+  <el-col :span="8">
+    <div class="ivr-btn-div">
+      <el-button :type="type" :size="size" class="ivr-btn">{{ name }}</el-button>
+    </div>
+  </el-col>
+</template>
+
+<script>
+export default {
+  name: 'IvrBtn',
+  props: {
+    name: {
+      type: String,
+      default: ''
+    },
+    type: {
+      type: String,
+      default: 'primary'
+    },
+    size: {
+      type: String,
+      default: 'small'
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .ivr-btn-div{
+    width: 100%;
+    padding: 5px;
+  }
+.ivr-btn{
+  width: 100%;
+  /*margin: 5px;*/
+  box-sizing: border-box;
+}
+</style>
diff --git a/src/views/monitor/seatMonitor/components/realtimeCheck.vue b/src/views/monitor/seatMonitor/components/realtimeCheck.vue
new file mode 100644
index 0000000..86ca9c6
--- /dev/null
+++ b/src/views/monitor/seatMonitor/components/realtimeCheck.vue
@@ -0,0 +1,63 @@
+<template>
+  <div class="realtime-check-div">
+    <div class="title">实时质检</div>
+    <div class="body">
+      <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.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>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'RealtimeCheck',
+  data() {
+    return {
+      seatForm: {
+        agentUserName: '--',
+        agentName: '--',
+        phone: '--',
+        signin: '--',
+        exten: '--',
+        callerNumber: '--',
+        calleeNumber: '--'
+      }
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.realtime-check-div{
+  padding: 10px 0px;
+  height: 100%;
+  .title{
+    padding-left: 15px;
+    line-height: 2;
+    width: 100%;
+    background-color: #3a8ee6;
+    color:#ffffff;
+  }
+  .body{
+    height: 100%;
+    border-left:1px solid #f0f0f0;
+    padding-left: 20px;
+    padding-top: 10px;
+    .line{
+      line-height: 2
+    }
+    .btns{
+      margin-top: 20px;
+      text-align: center;
+    }
+  }
+}
+</style>

diff --git a/src/icons/svg/icon-seat.svg b/src/icons/svg/icon-seat.svg
new file mode 100644
index 0000000..85943e0
--- /dev/null
+++ b/src/icons/svg/icon-seat.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1587379467199" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5323" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M236.8 519.04a293.12 293.12 0 0 0 71.68 111.36 29.44 29.44 0 0 0 13.44 28.16l24.96 16a29.44 29.44 0 1 0 32.64-49.92l-25.6-15.36000001a29.44 29.44 0 0 0-26.24 1e-8 261.76 261.76 0 0 1-58.24-87.68000001L288.63999999 521.6l1e-8-58.24a23.68 23.68 0 0 0 19.84 9.6 17.92 17.92 0 0 0 8.96-3.84A216.32 216.32 0 0 0 512 618.88a179.84 179.84 0 0 0 56.32-8.96 231.68 231.68 0 0 0 139.52-146.56 17.92 17.92 0 0 0 8.96 3.84 21.76 21.76 0 0 0 17.92-7.04l1e-8 55.68L780.16 515.84a42.88 42.88 0 0 0 44.8-40.96l5.12-128a42.88 42.88 0 0 0-24.32-40.32 377.6 377.6 0 0 0-8.32-45.44 349.44 349.44 0 0 0-74.24-144A286.72 286.72 0 0 0 567.68 24.96 267.52 267.52 0 0 0 512 18.56a278.4 278.4 0 0 0-211.2 100.48 350.08 350.08 0 0 0-77.44 144.64 376.32 376.32 0 0 0-8.96 46.72 42.88 42.88 0 0 0-22.4 39.04l5.76 128a42.88 42.88 0 0 0 39.04 41.6z m330.88 48A142.08 142.08 0 0 1 512 576.00000001C416 576 337.92 481.92 337.92 362.88a261.76 261.76 0 0 1 7.04-59.52 112 112 0 0 1 64-39.68 123.52 123.52 0 0 1 64 0 128 128 0 0 1 69.76 45.44 204.16 204.16 0 0 0 30.72000001 30.72 181.76 181.76 0 0 0 110.71999999 44.16 214.4 214.4 0 0 1-116.48 183.04zM272 263.68A256 256 0 0 1 512 64a216.96 216.96 0 0 1 58.88 8.32 270.72 270.72 0 0 1 178.56 192 330.88 330.88 0 0 1 8.96 39.68l-17.92 0 1e-8 48.64-6.4 0a17.28 17.28 0 0 0-8.32 0 298.88 298.88 0 0 0-16.64000001-88.32 232.32 232.32 0 0 0-140.16-147.2A179.84 179.84 0 0 0 512 106.88000001a216.96 216.96 0 0 0-197.12 156.79999999 298.24 298.24 0 0 0-16.64000001 88.32 17.28 17.28 0 0 0-8.32 0 17.92 17.92 0 0 0-8.32 3.84l1e-8-49.92L262.4 305.92a326.4 326.4 0 0 1 9.6-42.24z" p-id="5324"></path><path d="M864 752.64a272 272 0 0 0-21.76-29.44A262.4 262.4 0 0 0 640 625.28l-6.4 0a112 112 0 0 1-51.2 26.24000001l-24.96 101.11999999L512 945.92l-45.44-192-23.68-100.47999999-17.92-7.04000001a64 64 0 0 1-64 64 64 64 0 0 1-32-6.4l-25.6-16a64 64 0 0 1-25.6-33.91999999A269.44 269.44 0 0 0 117.12 896l0 97.91999999a14.08 14.08 0 0 1 5.12 14.72000001l779.52 0a14.08 14.08 0 0 1 5.12-14.72000001l0-101.11999999a264.96 264.96 0 0 0-42.88-140.16z" p-id="5325"></path></svg>
diff --git a/src/views/monitor/seatMonitor/components/allShow.vue b/src/views/monitor/seatMonitor/components/allShow.vue
new file mode 100644
index 0000000..11fcb74
--- /dev/null
+++ b/src/views/monitor/seatMonitor/components/allShow.vue
@@ -0,0 +1,77 @@
+<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>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AllShow',
+  data() {
+    return {
+      list: [
+        { label: '座席总数', value: 'all', icon: '' },
+        { label: '签出总数', value: 'signout', icon: 'offline' },
+        { label: '签入总数', value: 'signin', icon: 'online' },
+        { label: '示闲总数', value: 'showidle', icon: 'showidle' },
+        { 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
+      }
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .show-div{
+    width: 100%;
+    background-color: #66b1ff;
+    padding: 5px 20px;
+    display: flex;
+    justify-content: space-between;
+    .item-div{
+      font-size:16px;
+      line-height: 2;
+      display: inline-block;
+      .icon-seat{
+        width: 30px;
+        text-align: center;
+      }
+      .item-txt{
+        display: inline-block;
+        color:#ffffff;
+      }
+    }
+  }
+  .seat-offline{
+    color:grey;
+  }
+  .seat-online{
+    color:#409EFF;
+  }
+  .seat-busy{
+    color:#ff0000;
+  }
+  .seat-showbusy{
+    color:#ffff00;
+  }
+  .seat-showidle{
+    color: #58da50;
+  }
+  .seat-wait{
+    color:#fab6b6;
+  }
+</style>
diff --git a/src/views/monitor/seatMonitor/components/ivrArea.vue b/src/views/monitor/seatMonitor/components/ivrArea.vue
new file mode 100644
index 0000000..ebe91a7
--- /dev/null
+++ b/src/views/monitor/seatMonitor/components/ivrArea.vue
@@ -0,0 +1,49 @@
+<template>
+  <div class="realtime-check-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="强拆通话"/>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script>
+import IvrBtn from './ivrBtn'
+export default {
+  name: 'IvrArea',
+  components: { IvrBtn }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .realtime-check-div{
+    padding: 10px 0px;
+    height: 100%;
+    .title{
+      padding-left: 15px;
+      line-height: 2;
+      width: 100%;
+      background-color: #3a8ee6;
+      color:#ffffff;
+    }
+    .body{
+      height: 100%;
+      border-right:1px solid #f0f0f0;
+      padding-top: 10px;
+      .line{
+        line-height: 2
+      }
+      .btns{
+        margin-top: 20px;
+        text-align: center;
+      }
+    }
+  }
+</style>
diff --git a/src/views/monitor/seatMonitor/components/ivrBtn.vue b/src/views/monitor/seatMonitor/components/ivrBtn.vue
new file mode 100644
index 0000000..6187257
--- /dev/null
+++ b/src/views/monitor/seatMonitor/components/ivrBtn.vue
@@ -0,0 +1,39 @@
+<template>
+  <el-col :span="8">
+    <div class="ivr-btn-div">
+      <el-button :type="type" :size="size" class="ivr-btn">{{ name }}</el-button>
+    </div>
+  </el-col>
+</template>
+
+<script>
+export default {
+  name: 'IvrBtn',
+  props: {
+    name: {
+      type: String,
+      default: ''
+    },
+    type: {
+      type: String,
+      default: 'primary'
+    },
+    size: {
+      type: String,
+      default: 'small'
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .ivr-btn-div{
+    width: 100%;
+    padding: 5px;
+  }
+.ivr-btn{
+  width: 100%;
+  /*margin: 5px;*/
+  box-sizing: border-box;
+}
+</style>
diff --git a/src/views/monitor/seatMonitor/components/realtimeCheck.vue b/src/views/monitor/seatMonitor/components/realtimeCheck.vue
new file mode 100644
index 0000000..86ca9c6
--- /dev/null
+++ b/src/views/monitor/seatMonitor/components/realtimeCheck.vue
@@ -0,0 +1,63 @@
+<template>
+  <div class="realtime-check-div">
+    <div class="title">实时质检</div>
+    <div class="body">
+      <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.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>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'RealtimeCheck',
+  data() {
+    return {
+      seatForm: {
+        agentUserName: '--',
+        agentName: '--',
+        phone: '--',
+        signin: '--',
+        exten: '--',
+        callerNumber: '--',
+        calleeNumber: '--'
+      }
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.realtime-check-div{
+  padding: 10px 0px;
+  height: 100%;
+  .title{
+    padding-left: 15px;
+    line-height: 2;
+    width: 100%;
+    background-color: #3a8ee6;
+    color:#ffffff;
+  }
+  .body{
+    height: 100%;
+    border-left:1px solid #f0f0f0;
+    padding-left: 20px;
+    padding-top: 10px;
+    .line{
+      line-height: 2
+    }
+    .btns{
+      margin-top: 20px;
+      text-align: center;
+    }
+  }
+}
+</style>
diff --git a/src/views/monitor/seatMonitor/components/seat.vue b/src/views/monitor/seatMonitor/components/seat.vue
new file mode 100644
index 0000000..a4b1a9c
--- /dev/null
+++ b/src/views/monitor/seatMonitor/components/seat.vue
@@ -0,0 +1,60 @@
+<template>
+  <div class="seat-div">
+    <div class="seat-svg">
+      <svg-icon :class="'seat-'+seatStatus" icon-class="icon-seat" class="icon-seat"/>
+    </div>
+    <div class="seat-text">
+      {{ agentName }}
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Seat',
+  props: {
+    seatStatus: {
+      type: String,
+      default: 'busy'
+    },
+    agentName: {
+      type: String,
+      default: '6042'
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+$iconsize:80px;
+.seat-div{
+  width:100%;
+  margin-bottom: 20px;
+  display: inline-block;
+  .seat-svg{
+    text-align: center;
+  }
+  .icon-seat{
+    width: $iconsize;
+    height:$iconsize;
+    font-size:$iconsize;
+  }
+  .seat-offline{
+    color:grey;
+  }
+  .seat-online{
+    color:#409EFF;
+  }
+  .seat-busy{
+    color:#ff0000;
+  }
+  .seat-showbusy{
+    color:#ffff00;
+  }
+  .seat-text{
+    margin-top: 10px;
+    text-align: center;
+  }
+}
+
+</style>

diff --git a/src/icons/svg/icon-seat.svg b/src/icons/svg/icon-seat.svg
new file mode 100644
index 0000000..85943e0
--- /dev/null
+++ b/src/icons/svg/icon-seat.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1587379467199" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5323" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M236.8 519.04a293.12 293.12 0 0 0 71.68 111.36 29.44 29.44 0 0 0 13.44 28.16l24.96 16a29.44 29.44 0 1 0 32.64-49.92l-25.6-15.36000001a29.44 29.44 0 0 0-26.24 1e-8 261.76 261.76 0 0 1-58.24-87.68000001L288.63999999 521.6l1e-8-58.24a23.68 23.68 0 0 0 19.84 9.6 17.92 17.92 0 0 0 8.96-3.84A216.32 216.32 0 0 0 512 618.88a179.84 179.84 0 0 0 56.32-8.96 231.68 231.68 0 0 0 139.52-146.56 17.92 17.92 0 0 0 8.96 3.84 21.76 21.76 0 0 0 17.92-7.04l1e-8 55.68L780.16 515.84a42.88 42.88 0 0 0 44.8-40.96l5.12-128a42.88 42.88 0 0 0-24.32-40.32 377.6 377.6 0 0 0-8.32-45.44 349.44 349.44 0 0 0-74.24-144A286.72 286.72 0 0 0 567.68 24.96 267.52 267.52 0 0 0 512 18.56a278.4 278.4 0 0 0-211.2 100.48 350.08 350.08 0 0 0-77.44 144.64 376.32 376.32 0 0 0-8.96 46.72 42.88 42.88 0 0 0-22.4 39.04l5.76 128a42.88 42.88 0 0 0 39.04 41.6z m330.88 48A142.08 142.08 0 0 1 512 576.00000001C416 576 337.92 481.92 337.92 362.88a261.76 261.76 0 0 1 7.04-59.52 112 112 0 0 1 64-39.68 123.52 123.52 0 0 1 64 0 128 128 0 0 1 69.76 45.44 204.16 204.16 0 0 0 30.72000001 30.72 181.76 181.76 0 0 0 110.71999999 44.16 214.4 214.4 0 0 1-116.48 183.04zM272 263.68A256 256 0 0 1 512 64a216.96 216.96 0 0 1 58.88 8.32 270.72 270.72 0 0 1 178.56 192 330.88 330.88 0 0 1 8.96 39.68l-17.92 0 1e-8 48.64-6.4 0a17.28 17.28 0 0 0-8.32 0 298.88 298.88 0 0 0-16.64000001-88.32 232.32 232.32 0 0 0-140.16-147.2A179.84 179.84 0 0 0 512 106.88000001a216.96 216.96 0 0 0-197.12 156.79999999 298.24 298.24 0 0 0-16.64000001 88.32 17.28 17.28 0 0 0-8.32 0 17.92 17.92 0 0 0-8.32 3.84l1e-8-49.92L262.4 305.92a326.4 326.4 0 0 1 9.6-42.24z" p-id="5324"></path><path d="M864 752.64a272 272 0 0 0-21.76-29.44A262.4 262.4 0 0 0 640 625.28l-6.4 0a112 112 0 0 1-51.2 26.24000001l-24.96 101.11999999L512 945.92l-45.44-192-23.68-100.47999999-17.92-7.04000001a64 64 0 0 1-64 64 64 64 0 0 1-32-6.4l-25.6-16a64 64 0 0 1-25.6-33.91999999A269.44 269.44 0 0 0 117.12 896l0 97.91999999a14.08 14.08 0 0 1 5.12 14.72000001l779.52 0a14.08 14.08 0 0 1 5.12-14.72000001l0-101.11999999a264.96 264.96 0 0 0-42.88-140.16z" p-id="5325"></path></svg>
diff --git a/src/views/monitor/seatMonitor/components/allShow.vue b/src/views/monitor/seatMonitor/components/allShow.vue
new file mode 100644
index 0000000..11fcb74
--- /dev/null
+++ b/src/views/monitor/seatMonitor/components/allShow.vue
@@ -0,0 +1,77 @@
+<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>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AllShow',
+  data() {
+    return {
+      list: [
+        { label: '座席总数', value: 'all', icon: '' },
+        { label: '签出总数', value: 'signout', icon: 'offline' },
+        { label: '签入总数', value: 'signin', icon: 'online' },
+        { label: '示闲总数', value: 'showidle', icon: 'showidle' },
+        { 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
+      }
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .show-div{
+    width: 100%;
+    background-color: #66b1ff;
+    padding: 5px 20px;
+    display: flex;
+    justify-content: space-between;
+    .item-div{
+      font-size:16px;
+      line-height: 2;
+      display: inline-block;
+      .icon-seat{
+        width: 30px;
+        text-align: center;
+      }
+      .item-txt{
+        display: inline-block;
+        color:#ffffff;
+      }
+    }
+  }
+  .seat-offline{
+    color:grey;
+  }
+  .seat-online{
+    color:#409EFF;
+  }
+  .seat-busy{
+    color:#ff0000;
+  }
+  .seat-showbusy{
+    color:#ffff00;
+  }
+  .seat-showidle{
+    color: #58da50;
+  }
+  .seat-wait{
+    color:#fab6b6;
+  }
+</style>
diff --git a/src/views/monitor/seatMonitor/components/ivrArea.vue b/src/views/monitor/seatMonitor/components/ivrArea.vue
new file mode 100644
index 0000000..ebe91a7
--- /dev/null
+++ b/src/views/monitor/seatMonitor/components/ivrArea.vue
@@ -0,0 +1,49 @@
+<template>
+  <div class="realtime-check-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="强拆通话"/>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script>
+import IvrBtn from './ivrBtn'
+export default {
+  name: 'IvrArea',
+  components: { IvrBtn }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .realtime-check-div{
+    padding: 10px 0px;
+    height: 100%;
+    .title{
+      padding-left: 15px;
+      line-height: 2;
+      width: 100%;
+      background-color: #3a8ee6;
+      color:#ffffff;
+    }
+    .body{
+      height: 100%;
+      border-right:1px solid #f0f0f0;
+      padding-top: 10px;
+      .line{
+        line-height: 2
+      }
+      .btns{
+        margin-top: 20px;
+        text-align: center;
+      }
+    }
+  }
+</style>
diff --git a/src/views/monitor/seatMonitor/components/ivrBtn.vue b/src/views/monitor/seatMonitor/components/ivrBtn.vue
new file mode 100644
index 0000000..6187257
--- /dev/null
+++ b/src/views/monitor/seatMonitor/components/ivrBtn.vue
@@ -0,0 +1,39 @@
+<template>
+  <el-col :span="8">
+    <div class="ivr-btn-div">
+      <el-button :type="type" :size="size" class="ivr-btn">{{ name }}</el-button>
+    </div>
+  </el-col>
+</template>
+
+<script>
+export default {
+  name: 'IvrBtn',
+  props: {
+    name: {
+      type: String,
+      default: ''
+    },
+    type: {
+      type: String,
+      default: 'primary'
+    },
+    size: {
+      type: String,
+      default: 'small'
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .ivr-btn-div{
+    width: 100%;
+    padding: 5px;
+  }
+.ivr-btn{
+  width: 100%;
+  /*margin: 5px;*/
+  box-sizing: border-box;
+}
+</style>
diff --git a/src/views/monitor/seatMonitor/components/realtimeCheck.vue b/src/views/monitor/seatMonitor/components/realtimeCheck.vue
new file mode 100644
index 0000000..86ca9c6
--- /dev/null
+++ b/src/views/monitor/seatMonitor/components/realtimeCheck.vue
@@ -0,0 +1,63 @@
+<template>
+  <div class="realtime-check-div">
+    <div class="title">实时质检</div>
+    <div class="body">
+      <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.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>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'RealtimeCheck',
+  data() {
+    return {
+      seatForm: {
+        agentUserName: '--',
+        agentName: '--',
+        phone: '--',
+        signin: '--',
+        exten: '--',
+        callerNumber: '--',
+        calleeNumber: '--'
+      }
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.realtime-check-div{
+  padding: 10px 0px;
+  height: 100%;
+  .title{
+    padding-left: 15px;
+    line-height: 2;
+    width: 100%;
+    background-color: #3a8ee6;
+    color:#ffffff;
+  }
+  .body{
+    height: 100%;
+    border-left:1px solid #f0f0f0;
+    padding-left: 20px;
+    padding-top: 10px;
+    .line{
+      line-height: 2
+    }
+    .btns{
+      margin-top: 20px;
+      text-align: center;
+    }
+  }
+}
+</style>
diff --git a/src/views/monitor/seatMonitor/components/seat.vue b/src/views/monitor/seatMonitor/components/seat.vue
new file mode 100644
index 0000000..a4b1a9c
--- /dev/null
+++ b/src/views/monitor/seatMonitor/components/seat.vue
@@ -0,0 +1,60 @@
+<template>
+  <div class="seat-div">
+    <div class="seat-svg">
+      <svg-icon :class="'seat-'+seatStatus" icon-class="icon-seat" class="icon-seat"/>
+    </div>
+    <div class="seat-text">
+      {{ agentName }}
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Seat',
+  props: {
+    seatStatus: {
+      type: String,
+      default: 'busy'
+    },
+    agentName: {
+      type: String,
+      default: '6042'
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+$iconsize:80px;
+.seat-div{
+  width:100%;
+  margin-bottom: 20px;
+  display: inline-block;
+  .seat-svg{
+    text-align: center;
+  }
+  .icon-seat{
+    width: $iconsize;
+    height:$iconsize;
+    font-size:$iconsize;
+  }
+  .seat-offline{
+    color:grey;
+  }
+  .seat-online{
+    color:#409EFF;
+  }
+  .seat-busy{
+    color:#ff0000;
+  }
+  .seat-showbusy{
+    color:#ffff00;
+  }
+  .seat-text{
+    margin-top: 10px;
+    text-align: center;
+  }
+}
+
+</style>
diff --git a/src/views/monitor/seatMonitor/seatMonitor.vue b/src/views/monitor/seatMonitor/seatMonitor.vue
new file mode 100644
index 0000000..38e014c
--- /dev/null
+++ b/src/views/monitor/seatMonitor/seatMonitor.vue
@@ -0,0 +1,41 @@
+<template>
+  <app-container>
+    <all-show/>
+    <el-row>
+      <el-col :span="6">
+        <ivr-area/>
+      </el-col>
+      <el-col :span="12">
+        <el-row>
+          <div class="realtime-seats">
+            <el-col v-for="i in 8" :span="6">
+              <seat/>
+            </el-col>
+          </div>
+        </el-row>
+      </el-col>
+      <el-col :span="6">
+        <realtime-check/>
+      </el-col>
+    </el-row>
+
+  </app-container>
+</template>
+
+<script>
+import AppContainer from '../../../components/layout/AppContainer'
+import Seat from './components/seat'
+import AllShow from './components/allShow'
+import RealtimeCheck from './components/realtimeCheck'
+import IvrArea from './components/ivrArea'
+export default {
+  name: 'SeatMonitor',
+  components: { IvrArea, RealtimeCheck, AllShow, Seat, AppContainer }
+}
+</script>
+
+<style scoped>
+.realtime-seats{
+  padding:30px 20px;
+}
+</style>