diff --git a/src/views/monitor/components/callLine.vue b/src/views/monitor/components/callLine.vue
new file mode 100644
index 0000000..08eb5a0
--- /dev/null
+++ b/src/views/monitor/components/callLine.vue
@@ -0,0 +1,212 @@
+<!--通话统计曲线-->
+<template>
+  <div class="app-container">
+    <div v-show="chartShow" class="chart-container">
+      <div class="chart-body">
+        <ve-line ref="linechart" :loading="loading" :title="title" :data="chartData" :settings="chartSettings" :extend="extend"/>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+// import { collectStatics, collectStaticsContrast, exportCollectStatics, exportCollectStaticsContrast } from '@/api/statistics'
+
+export default {
+  name: 'CollectStatics',
+  data() {
+    return {
+      listQuery: {
+        analysisType: 'other', // 统计方式（yesterday\today\week\month\other）
+        collReason: '', // 采集原因
+        stId: '', // 采集站点
+        startDate: '', // 开始时间
+        endDate: '', // 结束时间
+        compare: false, // 是否进行对比
+        startDate2: '', // 比较开始时间
+        endDate2: '', // 比较结束时间
+        analysisDate: 'hour' // 统计方式
+      },
+      chartShow: true,
+      personTypeList: [],
+      timeRange1: [],
+      timeRange2: [],
+      startDateDisabled: {
+        disabledDate: ''
+      }, // 限制可选范围
+      endDateDisabled: {
+        disabledDate: ''
+      }, // 限制可选范围
+      chartData: {
+        columns: ['colDate', 'colCount'],
+        rows: []
+      }, // 表格数据
+      chartSettings: {
+        labelMap: {
+          'colCount': '总话务量',
+          'colAlarmCount': '成功接通话务量',
+          'colDate': '时间'
+        },
+        metrics: ['colCount', 'colAlarmCount'],
+        dimension: ['colDate']
+      },
+      extend: {
+        series: {
+          smooth: false
+        },
+        yAxis: {
+          minInterval: 1
+        }
+      },
+      title: {
+        text: '',
+        show: false
+      },
+      rerenderFlag: false, // 需要重绘的标志
+      loading: true
+    }
+  },
+  computed: {
+    labels() {
+      const labels = {
+        colCount1: this.listQuery.startDate + ' ~ ' + this.listQuery.endDate + ' 采集总量',
+        colAlarmCount1: this.listQuery.startDate + ' ~ ' + this.listQuery.endDate + ' 采集报警量',
+        colCount2: this.listQuery.startDate2 + ' ~ ' + this.listQuery.endDate2 + ' 采集总量',
+        colAlarmCount2: this.listQuery.startDate2 + ' ~ ' + this.listQuery.endDate2 + ' 采集报警量'
+      }
+      return labels
+    }
+  },
+  watch: {
+    'listQuery.compare'(val) {
+      if (val === true) {
+        this.timeRange2 = []
+      } else {
+        this.fetchData()
+      }
+    }
+  },
+  created() {
+    this.fetchData()
+  },
+  methods: {
+    // 获取数据
+    fetchData() {
+      // 刷新日期
+      this.refreshDate()
+      // 不需要对比
+      const params = {
+        analysisType: this.listQuery.analysisType,
+        startDate: this.listQuery.startDate,
+        endDate: this.listQuery.endDate,
+        collReason: this.listQuery.collReason, // 采集原因
+        analysisDate: this.listQuery.analysisDate,
+        stId: this.listQuery.stId // 采集站点
+      }
+      this.loading = true
+      this.chartData.rows = [
+        { colCount: 0, colAlarmCount: 0, colDate: '00:00:00' },
+        { colCount: 10, colAlarmCount: 8, colDate: '01:00:00' },
+        { colCount: 20, colAlarmCount: 13, colDate: '02:00:00' },
+        { colCount: 0, colAlarmCount: 0, colDate: '03:00:00' },
+        { colCount: 0, colAlarmCount: 0, colDate: '04:00:00' },
+        { colCount: 0, colAlarmCount: 0, colDate: '05:00:00' }
+      ]
+      // collectStatics(params).then(response => {
+      //   if (response.code === 200) {
+      //     this.chartData.rows = response.data
+      //     this.judgeMaxValue(response.data)
+      //     if (this.rerenderFlag) {
+      //       this.$refs['linechart'].echarts.resize()
+      //     }
+      //     console.log('refreshChart')
+      //     this.loading = false
+      //   }
+      // })
+    },
+    // 判断曲线的最大值
+    judgeMaxValue(data) {
+      let maxValue = -1
+      // 非对比数据
+      if (!this.listQuery.compare) {
+        maxValue = Math.max.apply(Math, data.map(function(item) { return item.colCount }))
+      } else { // 对比数据
+        const maxValue1 = Math.max.apply(Math, data.map(function(item) { return item.colCount1 }))
+        const maxValue2 = Math.max.apply(Math, data.map(function(item) { return item.colCount2 }))
+        maxValue = maxValue1 > maxValue2 ? maxValue1 : maxValue2
+      }
+      if (maxValue < 10) {
+        this.extend.yAxis = { max: 10 }
+      } else {
+        this.extend.yAxis = {}
+      }
+    }
+  }
+}
+</script>
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .app-container{
+    padding: 15px 10px 10px 10px;
+    .chart-container{
+      padding:0px;
+      border: 1px solid #d3dce6;
+      .chart-tools{
+        background-color: #f2f2f2;
+        line-height: 35px;
+        padding-left: 10px;
+        padding-right: 5px;
+        .chart-tool-button{
+          padding: 5px;
+          line-height: 16px;
+          margin-top:5px;
+          font-size:13px;
+        }
+        .form-item{
+          width:200px;
+          float:left;
+          margin-right: 10px;
+          margin-top:10px;
+          margin-bottom:10px;
+        }
+        .chart-tool-button:hover{
+          background-color: #8cc5ff;
+          cursor: pointer;
+          color:white
+        }
+        .chart-tool-button:active{
+          background-color: #8cc5ff;
+          color:white
+        }
+        .editor--datetimerange.el-input__inner{
+          width: 300px;
+        }
+      }
+      .chart-title{
+        text-align: center;
+        font-size:19px;
+        font-weight:600;
+        margin-top: 20px
+      }
+      .chart-btns{
+        padding-right:50px;
+        text-align: right;
+      }
+      .chart-body{
+        padding:15px 50px;
+        height:400px;
+      }
+    }
+    .statistic-table-div{
+      padding:30px 70px 60px;
+    }
+    .introduce{
+      color:dimgrey;
+      margin: 0px 20px;
+      .el-image{
+        margin: 30px 10px;
+      }
+    }
+  }
+</style>
+

diff --git a/src/views/monitor/components/callLine.vue b/src/views/monitor/components/callLine.vue
new file mode 100644
index 0000000..08eb5a0
--- /dev/null
+++ b/src/views/monitor/components/callLine.vue
@@ -0,0 +1,212 @@
+<!--通话统计曲线-->
+<template>
+  <div class="app-container">
+    <div v-show="chartShow" class="chart-container">
+      <div class="chart-body">
+        <ve-line ref="linechart" :loading="loading" :title="title" :data="chartData" :settings="chartSettings" :extend="extend"/>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+// import { collectStatics, collectStaticsContrast, exportCollectStatics, exportCollectStaticsContrast } from '@/api/statistics'
+
+export default {
+  name: 'CollectStatics',
+  data() {
+    return {
+      listQuery: {
+        analysisType: 'other', // 统计方式（yesterday\today\week\month\other）
+        collReason: '', // 采集原因
+        stId: '', // 采集站点
+        startDate: '', // 开始时间
+        endDate: '', // 结束时间
+        compare: false, // 是否进行对比
+        startDate2: '', // 比较开始时间
+        endDate2: '', // 比较结束时间
+        analysisDate: 'hour' // 统计方式
+      },
+      chartShow: true,
+      personTypeList: [],
+      timeRange1: [],
+      timeRange2: [],
+      startDateDisabled: {
+        disabledDate: ''
+      }, // 限制可选范围
+      endDateDisabled: {
+        disabledDate: ''
+      }, // 限制可选范围
+      chartData: {
+        columns: ['colDate', 'colCount'],
+        rows: []
+      }, // 表格数据
+      chartSettings: {
+        labelMap: {
+          'colCount': '总话务量',
+          'colAlarmCount': '成功接通话务量',
+          'colDate': '时间'
+        },
+        metrics: ['colCount', 'colAlarmCount'],
+        dimension: ['colDate']
+      },
+      extend: {
+        series: {
+          smooth: false
+        },
+        yAxis: {
+          minInterval: 1
+        }
+      },
+      title: {
+        text: '',
+        show: false
+      },
+      rerenderFlag: false, // 需要重绘的标志
+      loading: true
+    }
+  },
+  computed: {
+    labels() {
+      const labels = {
+        colCount1: this.listQuery.startDate + ' ~ ' + this.listQuery.endDate + ' 采集总量',
+        colAlarmCount1: this.listQuery.startDate + ' ~ ' + this.listQuery.endDate + ' 采集报警量',
+        colCount2: this.listQuery.startDate2 + ' ~ ' + this.listQuery.endDate2 + ' 采集总量',
+        colAlarmCount2: this.listQuery.startDate2 + ' ~ ' + this.listQuery.endDate2 + ' 采集报警量'
+      }
+      return labels
+    }
+  },
+  watch: {
+    'listQuery.compare'(val) {
+      if (val === true) {
+        this.timeRange2 = []
+      } else {
+        this.fetchData()
+      }
+    }
+  },
+  created() {
+    this.fetchData()
+  },
+  methods: {
+    // 获取数据
+    fetchData() {
+      // 刷新日期
+      this.refreshDate()
+      // 不需要对比
+      const params = {
+        analysisType: this.listQuery.analysisType,
+        startDate: this.listQuery.startDate,
+        endDate: this.listQuery.endDate,
+        collReason: this.listQuery.collReason, // 采集原因
+        analysisDate: this.listQuery.analysisDate,
+        stId: this.listQuery.stId // 采集站点
+      }
+      this.loading = true
+      this.chartData.rows = [
+        { colCount: 0, colAlarmCount: 0, colDate: '00:00:00' },
+        { colCount: 10, colAlarmCount: 8, colDate: '01:00:00' },
+        { colCount: 20, colAlarmCount: 13, colDate: '02:00:00' },
+        { colCount: 0, colAlarmCount: 0, colDate: '03:00:00' },
+        { colCount: 0, colAlarmCount: 0, colDate: '04:00:00' },
+        { colCount: 0, colAlarmCount: 0, colDate: '05:00:00' }
+      ]
+      // collectStatics(params).then(response => {
+      //   if (response.code === 200) {
+      //     this.chartData.rows = response.data
+      //     this.judgeMaxValue(response.data)
+      //     if (this.rerenderFlag) {
+      //       this.$refs['linechart'].echarts.resize()
+      //     }
+      //     console.log('refreshChart')
+      //     this.loading = false
+      //   }
+      // })
+    },
+    // 判断曲线的最大值
+    judgeMaxValue(data) {
+      let maxValue = -1
+      // 非对比数据
+      if (!this.listQuery.compare) {
+        maxValue = Math.max.apply(Math, data.map(function(item) { return item.colCount }))
+      } else { // 对比数据
+        const maxValue1 = Math.max.apply(Math, data.map(function(item) { return item.colCount1 }))
+        const maxValue2 = Math.max.apply(Math, data.map(function(item) { return item.colCount2 }))
+        maxValue = maxValue1 > maxValue2 ? maxValue1 : maxValue2
+      }
+      if (maxValue < 10) {
+        this.extend.yAxis = { max: 10 }
+      } else {
+        this.extend.yAxis = {}
+      }
+    }
+  }
+}
+</script>
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .app-container{
+    padding: 15px 10px 10px 10px;
+    .chart-container{
+      padding:0px;
+      border: 1px solid #d3dce6;
+      .chart-tools{
+        background-color: #f2f2f2;
+        line-height: 35px;
+        padding-left: 10px;
+        padding-right: 5px;
+        .chart-tool-button{
+          padding: 5px;
+          line-height: 16px;
+          margin-top:5px;
+          font-size:13px;
+        }
+        .form-item{
+          width:200px;
+          float:left;
+          margin-right: 10px;
+          margin-top:10px;
+          margin-bottom:10px;
+        }
+        .chart-tool-button:hover{
+          background-color: #8cc5ff;
+          cursor: pointer;
+          color:white
+        }
+        .chart-tool-button:active{
+          background-color: #8cc5ff;
+          color:white
+        }
+        .editor--datetimerange.el-input__inner{
+          width: 300px;
+        }
+      }
+      .chart-title{
+        text-align: center;
+        font-size:19px;
+        font-weight:600;
+        margin-top: 20px
+      }
+      .chart-btns{
+        padding-right:50px;
+        text-align: right;
+      }
+      .chart-body{
+        padding:15px 50px;
+        height:400px;
+      }
+    }
+    .statistic-table-div{
+      padding:30px 70px 60px;
+    }
+    .introduce{
+      color:dimgrey;
+      margin: 0px 20px;
+      .el-image{
+        margin: 30px 10px;
+      }
+    }
+  }
+</style>
+
diff --git a/src/views/monitor/components/callStatics.vue b/src/views/monitor/components/callStatics.vue
new file mode 100644
index 0000000..ce57072
--- /dev/null
+++ b/src/views/monitor/components/callStatics.vue
@@ -0,0 +1,116 @@
+<!--呼入呼出统计-->
+<template>
+  <div>
+    <div class="statistic-div box" title="实时呼入/呼出统计">
+      <div>
+        <el-table v-loading="listLoading" :data="data" :size="size" class="table" row-class-name="statistic-class" header-row-class-name="head-class" border @selection-change="handleSelectionChange">
+          <el-table-column label="呼入统计" align="center">
+            <el-table-column
+              v-for="column in inColumns"
+              :key="column.text"
+              :prop="column.value"
+              :label="column.text"
+              align="center"/>
+          </el-table-column>
+          <el-table-column label="呼出统计" align="center">
+            <el-table-column
+              v-for="column in outColumns"
+              :key="column.text"
+              :prop="column.value"
+              :label="column.text"
+              align="center"/>
+          </el-table-column>
+          <el-table-column
+            class-name="darker-head"
+            v-for="column in allColumns"
+            :key="column.text"
+            :prop="column.value"
+            :label="column.text"
+            align="center"/>
+        </el-table>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'CallStatics',
+  data: function() {
+    return {
+      inColumns: [
+        { text: '呼入成功', value: 'insuccess' },
+        { text: '客户放弃', value: 'giveup' },
+        { text: '坐席忙碌', value: 'busy' },
+        { text: '坐席未接', value: 'zxwj' },
+        { text: '呼损率', value: 'hsl' },
+        { text: '平均通话时长', value: 'pjthsc' },
+        { text: '呼入接通率', value: 'hrjtl' }
+      ],
+      outColumns: [
+        { text: '呼出成功', value: 'outsuccess' },
+        { text: '呼出失败', value: 'outfail' },
+        { text: '平均通话时长', value: 'outtime' },
+        { text: '呼出接通率', value: 'outjtl' }
+      ],
+      allColumns: [
+        { text: '转移通话', value: 'transfer' },
+        { text: '总体接通率', value: 'alljtl' }
+      ],
+      data:[
+        {
+          insuccess: '0',
+          giveup: '0',
+          busy: '0',
+          zxwj: '0',
+          hsl: '0',
+          pjthsc: '0',
+          hrjtl: '0',
+          outsuccess: '0',
+          outfail: '0',
+          outtime: '0',
+          outjtl: '0',
+          transfer: '0',
+          alljtl: '0'
+        }
+      ]
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  $themeColor: aliceblue;
+  .statistic-div{
+    width:100%
+  }
+  .box{
+    position:relative;
+    margin-top: 20px;
+    border:2px solid $themeColor;
+    padding: 0 10px;
+    .table{
+      margin: 20px 0px;
+      box-sizing: border-box;
+      border-color: #C3DFF4 !important;
+    }
+  }
+  .box::before{
+    content:attr(title);
+    position:absolute;
+    left:20px;
+    color: #15428b;
+    font-weight: bold;
+    transform:translateY(-50%);
+    -webkit-transform:translate(0,-50%);
+    padding:0 10px;
+    background-color:#fff;
+    font-size:14px;
+  }
+  .head-class{
+    th{
+      background-color: #66b1ff;
+    }
+  }
+</style>
+

diff --git a/src/views/monitor/components/callLine.vue b/src/views/monitor/components/callLine.vue
new file mode 100644
index 0000000..08eb5a0
--- /dev/null
+++ b/src/views/monitor/components/callLine.vue
@@ -0,0 +1,212 @@
+<!--通话统计曲线-->
+<template>
+  <div class="app-container">
+    <div v-show="chartShow" class="chart-container">
+      <div class="chart-body">
+        <ve-line ref="linechart" :loading="loading" :title="title" :data="chartData" :settings="chartSettings" :extend="extend"/>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+// import { collectStatics, collectStaticsContrast, exportCollectStatics, exportCollectStaticsContrast } from '@/api/statistics'
+
+export default {
+  name: 'CollectStatics',
+  data() {
+    return {
+      listQuery: {
+        analysisType: 'other', // 统计方式（yesterday\today\week\month\other）
+        collReason: '', // 采集原因
+        stId: '', // 采集站点
+        startDate: '', // 开始时间
+        endDate: '', // 结束时间
+        compare: false, // 是否进行对比
+        startDate2: '', // 比较开始时间
+        endDate2: '', // 比较结束时间
+        analysisDate: 'hour' // 统计方式
+      },
+      chartShow: true,
+      personTypeList: [],
+      timeRange1: [],
+      timeRange2: [],
+      startDateDisabled: {
+        disabledDate: ''
+      }, // 限制可选范围
+      endDateDisabled: {
+        disabledDate: ''
+      }, // 限制可选范围
+      chartData: {
+        columns: ['colDate', 'colCount'],
+        rows: []
+      }, // 表格数据
+      chartSettings: {
+        labelMap: {
+          'colCount': '总话务量',
+          'colAlarmCount': '成功接通话务量',
+          'colDate': '时间'
+        },
+        metrics: ['colCount', 'colAlarmCount'],
+        dimension: ['colDate']
+      },
+      extend: {
+        series: {
+          smooth: false
+        },
+        yAxis: {
+          minInterval: 1
+        }
+      },
+      title: {
+        text: '',
+        show: false
+      },
+      rerenderFlag: false, // 需要重绘的标志
+      loading: true
+    }
+  },
+  computed: {
+    labels() {
+      const labels = {
+        colCount1: this.listQuery.startDate + ' ~ ' + this.listQuery.endDate + ' 采集总量',
+        colAlarmCount1: this.listQuery.startDate + ' ~ ' + this.listQuery.endDate + ' 采集报警量',
+        colCount2: this.listQuery.startDate2 + ' ~ ' + this.listQuery.endDate2 + ' 采集总量',
+        colAlarmCount2: this.listQuery.startDate2 + ' ~ ' + this.listQuery.endDate2 + ' 采集报警量'
+      }
+      return labels
+    }
+  },
+  watch: {
+    'listQuery.compare'(val) {
+      if (val === true) {
+        this.timeRange2 = []
+      } else {
+        this.fetchData()
+      }
+    }
+  },
+  created() {
+    this.fetchData()
+  },
+  methods: {
+    // 获取数据
+    fetchData() {
+      // 刷新日期
+      this.refreshDate()
+      // 不需要对比
+      const params = {
+        analysisType: this.listQuery.analysisType,
+        startDate: this.listQuery.startDate,
+        endDate: this.listQuery.endDate,
+        collReason: this.listQuery.collReason, // 采集原因
+        analysisDate: this.listQuery.analysisDate,
+        stId: this.listQuery.stId // 采集站点
+      }
+      this.loading = true
+      this.chartData.rows = [
+        { colCount: 0, colAlarmCount: 0, colDate: '00:00:00' },
+        { colCount: 10, colAlarmCount: 8, colDate: '01:00:00' },
+        { colCount: 20, colAlarmCount: 13, colDate: '02:00:00' },
+        { colCount: 0, colAlarmCount: 0, colDate: '03:00:00' },
+        { colCount: 0, colAlarmCount: 0, colDate: '04:00:00' },
+        { colCount: 0, colAlarmCount: 0, colDate: '05:00:00' }
+      ]
+      // collectStatics(params).then(response => {
+      //   if (response.code === 200) {
+      //     this.chartData.rows = response.data
+      //     this.judgeMaxValue(response.data)
+      //     if (this.rerenderFlag) {
+      //       this.$refs['linechart'].echarts.resize()
+      //     }
+      //     console.log('refreshChart')
+      //     this.loading = false
+      //   }
+      // })
+    },
+    // 判断曲线的最大值
+    judgeMaxValue(data) {
+      let maxValue = -1
+      // 非对比数据
+      if (!this.listQuery.compare) {
+        maxValue = Math.max.apply(Math, data.map(function(item) { return item.colCount }))
+      } else { // 对比数据
+        const maxValue1 = Math.max.apply(Math, data.map(function(item) { return item.colCount1 }))
+        const maxValue2 = Math.max.apply(Math, data.map(function(item) { return item.colCount2 }))
+        maxValue = maxValue1 > maxValue2 ? maxValue1 : maxValue2
+      }
+      if (maxValue < 10) {
+        this.extend.yAxis = { max: 10 }
+      } else {
+        this.extend.yAxis = {}
+      }
+    }
+  }
+}
+</script>
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .app-container{
+    padding: 15px 10px 10px 10px;
+    .chart-container{
+      padding:0px;
+      border: 1px solid #d3dce6;
+      .chart-tools{
+        background-color: #f2f2f2;
+        line-height: 35px;
+        padding-left: 10px;
+        padding-right: 5px;
+        .chart-tool-button{
+          padding: 5px;
+          line-height: 16px;
+          margin-top:5px;
+          font-size:13px;
+        }
+        .form-item{
+          width:200px;
+          float:left;
+          margin-right: 10px;
+          margin-top:10px;
+          margin-bottom:10px;
+        }
+        .chart-tool-button:hover{
+          background-color: #8cc5ff;
+          cursor: pointer;
+          color:white
+        }
+        .chart-tool-button:active{
+          background-color: #8cc5ff;
+          color:white
+        }
+        .editor--datetimerange.el-input__inner{
+          width: 300px;
+        }
+      }
+      .chart-title{
+        text-align: center;
+        font-size:19px;
+        font-weight:600;
+        margin-top: 20px
+      }
+      .chart-btns{
+        padding-right:50px;
+        text-align: right;
+      }
+      .chart-body{
+        padding:15px 50px;
+        height:400px;
+      }
+    }
+    .statistic-table-div{
+      padding:30px 70px 60px;
+    }
+    .introduce{
+      color:dimgrey;
+      margin: 0px 20px;
+      .el-image{
+        margin: 30px 10px;
+      }
+    }
+  }
+</style>
+
diff --git a/src/views/monitor/components/callStatics.vue b/src/views/monitor/components/callStatics.vue
new file mode 100644
index 0000000..ce57072
--- /dev/null
+++ b/src/views/monitor/components/callStatics.vue
@@ -0,0 +1,116 @@
+<!--呼入呼出统计-->
+<template>
+  <div>
+    <div class="statistic-div box" title="实时呼入/呼出统计">
+      <div>
+        <el-table v-loading="listLoading" :data="data" :size="size" class="table" row-class-name="statistic-class" header-row-class-name="head-class" border @selection-change="handleSelectionChange">
+          <el-table-column label="呼入统计" align="center">
+            <el-table-column
+              v-for="column in inColumns"
+              :key="column.text"
+              :prop="column.value"
+              :label="column.text"
+              align="center"/>
+          </el-table-column>
+          <el-table-column label="呼出统计" align="center">
+            <el-table-column
+              v-for="column in outColumns"
+              :key="column.text"
+              :prop="column.value"
+              :label="column.text"
+              align="center"/>
+          </el-table-column>
+          <el-table-column
+            class-name="darker-head"
+            v-for="column in allColumns"
+            :key="column.text"
+            :prop="column.value"
+            :label="column.text"
+            align="center"/>
+        </el-table>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'CallStatics',
+  data: function() {
+    return {
+      inColumns: [
+        { text: '呼入成功', value: 'insuccess' },
+        { text: '客户放弃', value: 'giveup' },
+        { text: '坐席忙碌', value: 'busy' },
+        { text: '坐席未接', value: 'zxwj' },
+        { text: '呼损率', value: 'hsl' },
+        { text: '平均通话时长', value: 'pjthsc' },
+        { text: '呼入接通率', value: 'hrjtl' }
+      ],
+      outColumns: [
+        { text: '呼出成功', value: 'outsuccess' },
+        { text: '呼出失败', value: 'outfail' },
+        { text: '平均通话时长', value: 'outtime' },
+        { text: '呼出接通率', value: 'outjtl' }
+      ],
+      allColumns: [
+        { text: '转移通话', value: 'transfer' },
+        { text: '总体接通率', value: 'alljtl' }
+      ],
+      data:[
+        {
+          insuccess: '0',
+          giveup: '0',
+          busy: '0',
+          zxwj: '0',
+          hsl: '0',
+          pjthsc: '0',
+          hrjtl: '0',
+          outsuccess: '0',
+          outfail: '0',
+          outtime: '0',
+          outjtl: '0',
+          transfer: '0',
+          alljtl: '0'
+        }
+      ]
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  $themeColor: aliceblue;
+  .statistic-div{
+    width:100%
+  }
+  .box{
+    position:relative;
+    margin-top: 20px;
+    border:2px solid $themeColor;
+    padding: 0 10px;
+    .table{
+      margin: 20px 0px;
+      box-sizing: border-box;
+      border-color: #C3DFF4 !important;
+    }
+  }
+  .box::before{
+    content:attr(title);
+    position:absolute;
+    left:20px;
+    color: #15428b;
+    font-weight: bold;
+    transform:translateY(-50%);
+    -webkit-transform:translate(0,-50%);
+    padding:0 10px;
+    background-color:#fff;
+    font-size:14px;
+  }
+  .head-class{
+    th{
+      background-color: #66b1ff;
+    }
+  }
+</style>
+
diff --git a/src/views/monitor/components/satisfiedStatics.vue b/src/views/monitor/components/satisfiedStatics.vue
new file mode 100644
index 0000000..10c1c2d
--- /dev/null
+++ b/src/views/monitor/components/satisfiedStatics.vue
@@ -0,0 +1,142 @@
+<!--呼入呼出统计-->
+<template>
+  <div>
+    <div class="statistic-div box" title="实时满意度评价统计">
+      <div>
+        <el-table v-loading="listLoading" :data="data" :size="size" class="table" row-class-name="statistic-class" header-row-class-name="head-class" border @selection-change="handleSelectionChange">
+          <el-table-column label="非常满意" align="center">
+            <el-table-column
+              v-for="column in five"
+              :key="column.text"
+              :prop="column.value"
+              :label="column.text"
+              align="center"/>
+          </el-table-column>
+          <el-table-column label="满意" align="center">
+            <el-table-column
+              v-for="column in five"
+              :key="column.text"
+              :prop="column.value"
+              :label="column.text"
+              align="center"/>
+          </el-table-column>
+          <el-table-column label="不满意" align="center">
+            <el-table-column
+              v-for="column in five"
+              :key="column.text"
+              :prop="column.value"
+              :label="column.text"
+              align="center"/>
+          </el-table-column>
+          <el-table-column label="放弃评价" align="center">
+            <el-table-column
+              v-for="column in five"
+              :key="column.text"
+              :prop="column.value"
+              :label="column.text"
+              align="center"/>
+          </el-table-column>
+
+        </el-table>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SatisfiedStatics',
+  data: function() {
+    return {
+      five: [
+        { text: '通话量', value: 'fivethl' },
+        { text: '百分比', value: 'fivebfb' }
+      ],
+      four: [
+        { text: '通话量', value: 'fourthl' },
+        { text: '百分比', value: 'fourbfb' }
+      ],
+      three: [
+        { text: '通话量', value: 'threethl' },
+        { text: '百分比', value: 'threebfb' }
+      ],
+      two: [
+        { text: '通话量', value: 'twothl' },
+        { text: '百分比', value: 'twobfb' }
+      ],
+      data:[
+        {
+          fivethl: '0',
+          fivebfb: '100%',
+          fourthl: '0',
+          fourbfb: '100%',
+          threethl: '0',
+          threebfb: '100%',
+          twothl: '0',
+          twobfb: '100%'
+        }
+      ]
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  $themeColor: aliceblue;
+  .statistic-div{
+    width:100%
+  }
+  .box{
+    position:relative;
+    margin-top: 20px;
+    border:2px solid $themeColor;
+    padding: 0 10px;
+    .table{
+      margin: 20px 0px;
+      box-sizing: border-box;
+      border-color: #C3DFF4 !important;
+    }
+  }
+  .box::before{
+    content:attr(title);
+    position:absolute;
+    left:20px;
+    color: #15428b;
+    font-weight: bold;
+    transform:translateY(-50%);
+    -webkit-transform:translate(0,-50%);
+    padding:0 10px;
+    background-color:#fff;
+    font-size:14px;
+  }
+  .head-class{
+    th{
+      background-color: #66b1ff;
+    }
+  }
+</style>
+<style rel="stylesheet/scss" lang="scss">
+  $themeColor: #96C7ED;
+  $boderColor: #c3dff4;
+  $leafColor: #dcecf9;
+  .head-class{
+    color: #000000;
+    font-weight: normal !important;
+    th{
+      background-color: $themeColor !important;
+      font-weight: normal !important;
+      border-color: $boderColor !important;
+    }
+    th.is-leaf{
+      background-color: $leafColor !important;
+    }
+    th.darker-head{
+      background-color: $themeColor !important;
+    }
+  }
+  .statistic-class{
+    td{
+      border-color: $boderColor !important;
+    }
+  }
+</style>

diff --git a/src/views/monitor/components/callLine.vue b/src/views/monitor/components/callLine.vue
new file mode 100644
index 0000000..08eb5a0
--- /dev/null
+++ b/src/views/monitor/components/callLine.vue
@@ -0,0 +1,212 @@
+<!--通话统计曲线-->
+<template>
+  <div class="app-container">
+    <div v-show="chartShow" class="chart-container">
+      <div class="chart-body">
+        <ve-line ref="linechart" :loading="loading" :title="title" :data="chartData" :settings="chartSettings" :extend="extend"/>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+// import { collectStatics, collectStaticsContrast, exportCollectStatics, exportCollectStaticsContrast } from '@/api/statistics'
+
+export default {
+  name: 'CollectStatics',
+  data() {
+    return {
+      listQuery: {
+        analysisType: 'other', // 统计方式（yesterday\today\week\month\other）
+        collReason: '', // 采集原因
+        stId: '', // 采集站点
+        startDate: '', // 开始时间
+        endDate: '', // 结束时间
+        compare: false, // 是否进行对比
+        startDate2: '', // 比较开始时间
+        endDate2: '', // 比较结束时间
+        analysisDate: 'hour' // 统计方式
+      },
+      chartShow: true,
+      personTypeList: [],
+      timeRange1: [],
+      timeRange2: [],
+      startDateDisabled: {
+        disabledDate: ''
+      }, // 限制可选范围
+      endDateDisabled: {
+        disabledDate: ''
+      }, // 限制可选范围
+      chartData: {
+        columns: ['colDate', 'colCount'],
+        rows: []
+      }, // 表格数据
+      chartSettings: {
+        labelMap: {
+          'colCount': '总话务量',
+          'colAlarmCount': '成功接通话务量',
+          'colDate': '时间'
+        },
+        metrics: ['colCount', 'colAlarmCount'],
+        dimension: ['colDate']
+      },
+      extend: {
+        series: {
+          smooth: false
+        },
+        yAxis: {
+          minInterval: 1
+        }
+      },
+      title: {
+        text: '',
+        show: false
+      },
+      rerenderFlag: false, // 需要重绘的标志
+      loading: true
+    }
+  },
+  computed: {
+    labels() {
+      const labels = {
+        colCount1: this.listQuery.startDate + ' ~ ' + this.listQuery.endDate + ' 采集总量',
+        colAlarmCount1: this.listQuery.startDate + ' ~ ' + this.listQuery.endDate + ' 采集报警量',
+        colCount2: this.listQuery.startDate2 + ' ~ ' + this.listQuery.endDate2 + ' 采集总量',
+        colAlarmCount2: this.listQuery.startDate2 + ' ~ ' + this.listQuery.endDate2 + ' 采集报警量'
+      }
+      return labels
+    }
+  },
+  watch: {
+    'listQuery.compare'(val) {
+      if (val === true) {
+        this.timeRange2 = []
+      } else {
+        this.fetchData()
+      }
+    }
+  },
+  created() {
+    this.fetchData()
+  },
+  methods: {
+    // 获取数据
+    fetchData() {
+      // 刷新日期
+      this.refreshDate()
+      // 不需要对比
+      const params = {
+        analysisType: this.listQuery.analysisType,
+        startDate: this.listQuery.startDate,
+        endDate: this.listQuery.endDate,
+        collReason: this.listQuery.collReason, // 采集原因
+        analysisDate: this.listQuery.analysisDate,
+        stId: this.listQuery.stId // 采集站点
+      }
+      this.loading = true
+      this.chartData.rows = [
+        { colCount: 0, colAlarmCount: 0, colDate: '00:00:00' },
+        { colCount: 10, colAlarmCount: 8, colDate: '01:00:00' },
+        { colCount: 20, colAlarmCount: 13, colDate: '02:00:00' },
+        { colCount: 0, colAlarmCount: 0, colDate: '03:00:00' },
+        { colCount: 0, colAlarmCount: 0, colDate: '04:00:00' },
+        { colCount: 0, colAlarmCount: 0, colDate: '05:00:00' }
+      ]
+      // collectStatics(params).then(response => {
+      //   if (response.code === 200) {
+      //     this.chartData.rows = response.data
+      //     this.judgeMaxValue(response.data)
+      //     if (this.rerenderFlag) {
+      //       this.$refs['linechart'].echarts.resize()
+      //     }
+      //     console.log('refreshChart')
+      //     this.loading = false
+      //   }
+      // })
+    },
+    // 判断曲线的最大值
+    judgeMaxValue(data) {
+      let maxValue = -1
+      // 非对比数据
+      if (!this.listQuery.compare) {
+        maxValue = Math.max.apply(Math, data.map(function(item) { return item.colCount }))
+      } else { // 对比数据
+        const maxValue1 = Math.max.apply(Math, data.map(function(item) { return item.colCount1 }))
+        const maxValue2 = Math.max.apply(Math, data.map(function(item) { return item.colCount2 }))
+        maxValue = maxValue1 > maxValue2 ? maxValue1 : maxValue2
+      }
+      if (maxValue < 10) {
+        this.extend.yAxis = { max: 10 }
+      } else {
+        this.extend.yAxis = {}
+      }
+    }
+  }
+}
+</script>
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .app-container{
+    padding: 15px 10px 10px 10px;
+    .chart-container{
+      padding:0px;
+      border: 1px solid #d3dce6;
+      .chart-tools{
+        background-color: #f2f2f2;
+        line-height: 35px;
+        padding-left: 10px;
+        padding-right: 5px;
+        .chart-tool-button{
+          padding: 5px;
+          line-height: 16px;
+          margin-top:5px;
+          font-size:13px;
+        }
+        .form-item{
+          width:200px;
+          float:left;
+          margin-right: 10px;
+          margin-top:10px;
+          margin-bottom:10px;
+        }
+        .chart-tool-button:hover{
+          background-color: #8cc5ff;
+          cursor: pointer;
+          color:white
+        }
+        .chart-tool-button:active{
+          background-color: #8cc5ff;
+          color:white
+        }
+        .editor--datetimerange.el-input__inner{
+          width: 300px;
+        }
+      }
+      .chart-title{
+        text-align: center;
+        font-size:19px;
+        font-weight:600;
+        margin-top: 20px
+      }
+      .chart-btns{
+        padding-right:50px;
+        text-align: right;
+      }
+      .chart-body{
+        padding:15px 50px;
+        height:400px;
+      }
+    }
+    .statistic-table-div{
+      padding:30px 70px 60px;
+    }
+    .introduce{
+      color:dimgrey;
+      margin: 0px 20px;
+      .el-image{
+        margin: 30px 10px;
+      }
+    }
+  }
+</style>
+
diff --git a/src/views/monitor/components/callStatics.vue b/src/views/monitor/components/callStatics.vue
new file mode 100644
index 0000000..ce57072
--- /dev/null
+++ b/src/views/monitor/components/callStatics.vue
@@ -0,0 +1,116 @@
+<!--呼入呼出统计-->
+<template>
+  <div>
+    <div class="statistic-div box" title="实时呼入/呼出统计">
+      <div>
+        <el-table v-loading="listLoading" :data="data" :size="size" class="table" row-class-name="statistic-class" header-row-class-name="head-class" border @selection-change="handleSelectionChange">
+          <el-table-column label="呼入统计" align="center">
+            <el-table-column
+              v-for="column in inColumns"
+              :key="column.text"
+              :prop="column.value"
+              :label="column.text"
+              align="center"/>
+          </el-table-column>
+          <el-table-column label="呼出统计" align="center">
+            <el-table-column
+              v-for="column in outColumns"
+              :key="column.text"
+              :prop="column.value"
+              :label="column.text"
+              align="center"/>
+          </el-table-column>
+          <el-table-column
+            class-name="darker-head"
+            v-for="column in allColumns"
+            :key="column.text"
+            :prop="column.value"
+            :label="column.text"
+            align="center"/>
+        </el-table>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'CallStatics',
+  data: function() {
+    return {
+      inColumns: [
+        { text: '呼入成功', value: 'insuccess' },
+        { text: '客户放弃', value: 'giveup' },
+        { text: '坐席忙碌', value: 'busy' },
+        { text: '坐席未接', value: 'zxwj' },
+        { text: '呼损率', value: 'hsl' },
+        { text: '平均通话时长', value: 'pjthsc' },
+        { text: '呼入接通率', value: 'hrjtl' }
+      ],
+      outColumns: [
+        { text: '呼出成功', value: 'outsuccess' },
+        { text: '呼出失败', value: 'outfail' },
+        { text: '平均通话时长', value: 'outtime' },
+        { text: '呼出接通率', value: 'outjtl' }
+      ],
+      allColumns: [
+        { text: '转移通话', value: 'transfer' },
+        { text: '总体接通率', value: 'alljtl' }
+      ],
+      data:[
+        {
+          insuccess: '0',
+          giveup: '0',
+          busy: '0',
+          zxwj: '0',
+          hsl: '0',
+          pjthsc: '0',
+          hrjtl: '0',
+          outsuccess: '0',
+          outfail: '0',
+          outtime: '0',
+          outjtl: '0',
+          transfer: '0',
+          alljtl: '0'
+        }
+      ]
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  $themeColor: aliceblue;
+  .statistic-div{
+    width:100%
+  }
+  .box{
+    position:relative;
+    margin-top: 20px;
+    border:2px solid $themeColor;
+    padding: 0 10px;
+    .table{
+      margin: 20px 0px;
+      box-sizing: border-box;
+      border-color: #C3DFF4 !important;
+    }
+  }
+  .box::before{
+    content:attr(title);
+    position:absolute;
+    left:20px;
+    color: #15428b;
+    font-weight: bold;
+    transform:translateY(-50%);
+    -webkit-transform:translate(0,-50%);
+    padding:0 10px;
+    background-color:#fff;
+    font-size:14px;
+  }
+  .head-class{
+    th{
+      background-color: #66b1ff;
+    }
+  }
+</style>
+
diff --git a/src/views/monitor/components/satisfiedStatics.vue b/src/views/monitor/components/satisfiedStatics.vue
new file mode 100644
index 0000000..10c1c2d
--- /dev/null
+++ b/src/views/monitor/components/satisfiedStatics.vue
@@ -0,0 +1,142 @@
+<!--呼入呼出统计-->
+<template>
+  <div>
+    <div class="statistic-div box" title="实时满意度评价统计">
+      <div>
+        <el-table v-loading="listLoading" :data="data" :size="size" class="table" row-class-name="statistic-class" header-row-class-name="head-class" border @selection-change="handleSelectionChange">
+          <el-table-column label="非常满意" align="center">
+            <el-table-column
+              v-for="column in five"
+              :key="column.text"
+              :prop="column.value"
+              :label="column.text"
+              align="center"/>
+          </el-table-column>
+          <el-table-column label="满意" align="center">
+            <el-table-column
+              v-for="column in five"
+              :key="column.text"
+              :prop="column.value"
+              :label="column.text"
+              align="center"/>
+          </el-table-column>
+          <el-table-column label="不满意" align="center">
+            <el-table-column
+              v-for="column in five"
+              :key="column.text"
+              :prop="column.value"
+              :label="column.text"
+              align="center"/>
+          </el-table-column>
+          <el-table-column label="放弃评价" align="center">
+            <el-table-column
+              v-for="column in five"
+              :key="column.text"
+              :prop="column.value"
+              :label="column.text"
+              align="center"/>
+          </el-table-column>
+
+        </el-table>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SatisfiedStatics',
+  data: function() {
+    return {
+      five: [
+        { text: '通话量', value: 'fivethl' },
+        { text: '百分比', value: 'fivebfb' }
+      ],
+      four: [
+        { text: '通话量', value: 'fourthl' },
+        { text: '百分比', value: 'fourbfb' }
+      ],
+      three: [
+        { text: '通话量', value: 'threethl' },
+        { text: '百分比', value: 'threebfb' }
+      ],
+      two: [
+        { text: '通话量', value: 'twothl' },
+        { text: '百分比', value: 'twobfb' }
+      ],
+      data:[
+        {
+          fivethl: '0',
+          fivebfb: '100%',
+          fourthl: '0',
+          fourbfb: '100%',
+          threethl: '0',
+          threebfb: '100%',
+          twothl: '0',
+          twobfb: '100%'
+        }
+      ]
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  $themeColor: aliceblue;
+  .statistic-div{
+    width:100%
+  }
+  .box{
+    position:relative;
+    margin-top: 20px;
+    border:2px solid $themeColor;
+    padding: 0 10px;
+    .table{
+      margin: 20px 0px;
+      box-sizing: border-box;
+      border-color: #C3DFF4 !important;
+    }
+  }
+  .box::before{
+    content:attr(title);
+    position:absolute;
+    left:20px;
+    color: #15428b;
+    font-weight: bold;
+    transform:translateY(-50%);
+    -webkit-transform:translate(0,-50%);
+    padding:0 10px;
+    background-color:#fff;
+    font-size:14px;
+  }
+  .head-class{
+    th{
+      background-color: #66b1ff;
+    }
+  }
+</style>
+<style rel="stylesheet/scss" lang="scss">
+  $themeColor: #96C7ED;
+  $boderColor: #c3dff4;
+  $leafColor: #dcecf9;
+  .head-class{
+    color: #000000;
+    font-weight: normal !important;
+    th{
+      background-color: $themeColor !important;
+      font-weight: normal !important;
+      border-color: $boderColor !important;
+    }
+    th.is-leaf{
+      background-color: $leafColor !important;
+    }
+    th.darker-head{
+      background-color: $themeColor !important;
+    }
+  }
+  .statistic-class{
+    td{
+      border-color: $boderColor !important;
+    }
+  }
+</style>
diff --git a/src/views/monitor/components/waitStatics.vue b/src/views/monitor/components/waitStatics.vue
new file mode 100644
index 0000000..32879cc
--- /dev/null
+++ b/src/views/monitor/components/waitStatics.vue
@@ -0,0 +1,117 @@
+<!--呼入呼出统计-->
+<template>
+  <div>
+    <div class="statistic-div box" title="实时满意度评价统计">
+      <div>
+        <el-table v-loading="listLoading" :data="data" :size="size" class="table" row-class-name="statistic-class" header-row-class-name="head-class" border @selection-change="handleSelectionChange">
+          <el-table-column label="10秒接通" align="center">
+            <el-table-column
+              v-for="column in five"
+              :key="column.text"
+              :prop="column.value"
+              :label="column.text"
+              align="center"/>
+          </el-table-column>
+          <el-table-column label="20秒接通" align="center">
+            <el-table-column
+              v-for="column in five"
+              :key="column.text"
+              :prop="column.value"
+              :label="column.text"
+              align="center"/>
+          </el-table-column>
+          <el-table-column label="30秒接通" align="center">
+            <el-table-column
+              v-for="column in five"
+              :key="column.text"
+              :prop="column.value"
+              :label="column.text"
+              align="center"/>
+          </el-table-column>
+          <el-table-column label="30秒以上接通" align="center">
+            <el-table-column
+              v-for="column in five"
+              :key="column.text"
+              :prop="column.value"
+              :label="column.text"
+              align="center"/>
+          </el-table-column>
+
+        </el-table>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'WaitStatics',
+  data: function() {
+    return {
+      five: [
+        { text: '数量', value: 'fivethl' },
+        { text: '百分比', value: 'fivebfb' }
+      ],
+      four: [
+        { text: '数量', value: 'fourthl' },
+        { text: '百分比', value: 'fourbfb' }
+      ],
+      three: [
+        { text: '数量', value: 'threethl' },
+        { text: '百分比', value: 'threebfb' }
+      ],
+      two: [
+        { text: '数量', value: 'twothl' },
+        { text: '百分比', value: 'twobfb' }
+      ],
+      data:[
+        {
+          fivethl: '0',
+          fivebfb: '100%',
+          fourthl: '0',
+          fourbfb: '100%',
+          threethl: '0',
+          threebfb: '100%',
+          twothl: '0',
+          twobfb: '100%'
+        }
+      ]
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  $themeColor: aliceblue;
+  .statistic-div{
+    width:100%
+  }
+  .box{
+    position:relative;
+    margin-top: 20px;
+    border:2px solid $themeColor;
+    padding: 0 10px;
+    .table{
+      margin: 20px 0px;
+      box-sizing: border-box;
+      border-color: #C3DFF4 !important;
+    }
+  }
+  .box::before{
+    content:attr(title);
+    position:absolute;
+    left:20px;
+    color: #15428b;
+    font-weight: bold;
+    transform:translateY(-50%);
+    -webkit-transform:translate(0,-50%);
+    padding:0 10px;
+    background-color:#fff;
+    font-size:14px;
+  }
+  .head-class{
+    th{
+      background-color: #66b1ff;
+    }
+  }
+</style>

diff --git a/src/views/monitor/components/callLine.vue b/src/views/monitor/components/callLine.vue
new file mode 100644
index 0000000..08eb5a0
--- /dev/null
+++ b/src/views/monitor/components/callLine.vue
@@ -0,0 +1,212 @@
+<!--通话统计曲线-->
+<template>
+  <div class="app-container">
+    <div v-show="chartShow" class="chart-container">
+      <div class="chart-body">
+        <ve-line ref="linechart" :loading="loading" :title="title" :data="chartData" :settings="chartSettings" :extend="extend"/>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+// import { collectStatics, collectStaticsContrast, exportCollectStatics, exportCollectStaticsContrast } from '@/api/statistics'
+
+export default {
+  name: 'CollectStatics',
+  data() {
+    return {
+      listQuery: {
+        analysisType: 'other', // 统计方式（yesterday\today\week\month\other）
+        collReason: '', // 采集原因
+        stId: '', // 采集站点
+        startDate: '', // 开始时间
+        endDate: '', // 结束时间
+        compare: false, // 是否进行对比
+        startDate2: '', // 比较开始时间
+        endDate2: '', // 比较结束时间
+        analysisDate: 'hour' // 统计方式
+      },
+      chartShow: true,
+      personTypeList: [],
+      timeRange1: [],
+      timeRange2: [],
+      startDateDisabled: {
+        disabledDate: ''
+      }, // 限制可选范围
+      endDateDisabled: {
+        disabledDate: ''
+      }, // 限制可选范围
+      chartData: {
+        columns: ['colDate', 'colCount'],
+        rows: []
+      }, // 表格数据
+      chartSettings: {
+        labelMap: {
+          'colCount': '总话务量',
+          'colAlarmCount': '成功接通话务量',
+          'colDate': '时间'
+        },
+        metrics: ['colCount', 'colAlarmCount'],
+        dimension: ['colDate']
+      },
+      extend: {
+        series: {
+          smooth: false
+        },
+        yAxis: {
+          minInterval: 1
+        }
+      },
+      title: {
+        text: '',
+        show: false
+      },
+      rerenderFlag: false, // 需要重绘的标志
+      loading: true
+    }
+  },
+  computed: {
+    labels() {
+      const labels = {
+        colCount1: this.listQuery.startDate + ' ~ ' + this.listQuery.endDate + ' 采集总量',
+        colAlarmCount1: this.listQuery.startDate + ' ~ ' + this.listQuery.endDate + ' 采集报警量',
+        colCount2: this.listQuery.startDate2 + ' ~ ' + this.listQuery.endDate2 + ' 采集总量',
+        colAlarmCount2: this.listQuery.startDate2 + ' ~ ' + this.listQuery.endDate2 + ' 采集报警量'
+      }
+      return labels
+    }
+  },
+  watch: {
+    'listQuery.compare'(val) {
+      if (val === true) {
+        this.timeRange2 = []
+      } else {
+        this.fetchData()
+      }
+    }
+  },
+  created() {
+    this.fetchData()
+  },
+  methods: {
+    // 获取数据
+    fetchData() {
+      // 刷新日期
+      this.refreshDate()
+      // 不需要对比
+      const params = {
+        analysisType: this.listQuery.analysisType,
+        startDate: this.listQuery.startDate,
+        endDate: this.listQuery.endDate,
+        collReason: this.listQuery.collReason, // 采集原因
+        analysisDate: this.listQuery.analysisDate,
+        stId: this.listQuery.stId // 采集站点
+      }
+      this.loading = true
+      this.chartData.rows = [
+        { colCount: 0, colAlarmCount: 0, colDate: '00:00:00' },
+        { colCount: 10, colAlarmCount: 8, colDate: '01:00:00' },
+        { colCount: 20, colAlarmCount: 13, colDate: '02:00:00' },
+        { colCount: 0, colAlarmCount: 0, colDate: '03:00:00' },
+        { colCount: 0, colAlarmCount: 0, colDate: '04:00:00' },
+        { colCount: 0, colAlarmCount: 0, colDate: '05:00:00' }
+      ]
+      // collectStatics(params).then(response => {
+      //   if (response.code === 200) {
+      //     this.chartData.rows = response.data
+      //     this.judgeMaxValue(response.data)
+      //     if (this.rerenderFlag) {
+      //       this.$refs['linechart'].echarts.resize()
+      //     }
+      //     console.log('refreshChart')
+      //     this.loading = false
+      //   }
+      // })
+    },
+    // 判断曲线的最大值
+    judgeMaxValue(data) {
+      let maxValue = -1
+      // 非对比数据
+      if (!this.listQuery.compare) {
+        maxValue = Math.max.apply(Math, data.map(function(item) { return item.colCount }))
+      } else { // 对比数据
+        const maxValue1 = Math.max.apply(Math, data.map(function(item) { return item.colCount1 }))
+        const maxValue2 = Math.max.apply(Math, data.map(function(item) { return item.colCount2 }))
+        maxValue = maxValue1 > maxValue2 ? maxValue1 : maxValue2
+      }
+      if (maxValue < 10) {
+        this.extend.yAxis = { max: 10 }
+      } else {
+        this.extend.yAxis = {}
+      }
+    }
+  }
+}
+</script>
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .app-container{
+    padding: 15px 10px 10px 10px;
+    .chart-container{
+      padding:0px;
+      border: 1px solid #d3dce6;
+      .chart-tools{
+        background-color: #f2f2f2;
+        line-height: 35px;
+        padding-left: 10px;
+        padding-right: 5px;
+        .chart-tool-button{
+          padding: 5px;
+          line-height: 16px;
+          margin-top:5px;
+          font-size:13px;
+        }
+        .form-item{
+          width:200px;
+          float:left;
+          margin-right: 10px;
+          margin-top:10px;
+          margin-bottom:10px;
+        }
+        .chart-tool-button:hover{
+          background-color: #8cc5ff;
+          cursor: pointer;
+          color:white
+        }
+        .chart-tool-button:active{
+          background-color: #8cc5ff;
+          color:white
+        }
+        .editor--datetimerange.el-input__inner{
+          width: 300px;
+        }
+      }
+      .chart-title{
+        text-align: center;
+        font-size:19px;
+        font-weight:600;
+        margin-top: 20px
+      }
+      .chart-btns{
+        padding-right:50px;
+        text-align: right;
+      }
+      .chart-body{
+        padding:15px 50px;
+        height:400px;
+      }
+    }
+    .statistic-table-div{
+      padding:30px 70px 60px;
+    }
+    .introduce{
+      color:dimgrey;
+      margin: 0px 20px;
+      .el-image{
+        margin: 30px 10px;
+      }
+    }
+  }
+</style>
+
diff --git a/src/views/monitor/components/callStatics.vue b/src/views/monitor/components/callStatics.vue
new file mode 100644
index 0000000..ce57072
--- /dev/null
+++ b/src/views/monitor/components/callStatics.vue
@@ -0,0 +1,116 @@
+<!--呼入呼出统计-->
+<template>
+  <div>
+    <div class="statistic-div box" title="实时呼入/呼出统计">
+      <div>
+        <el-table v-loading="listLoading" :data="data" :size="size" class="table" row-class-name="statistic-class" header-row-class-name="head-class" border @selection-change="handleSelectionChange">
+          <el-table-column label="呼入统计" align="center">
+            <el-table-column
+              v-for="column in inColumns"
+              :key="column.text"
+              :prop="column.value"
+              :label="column.text"
+              align="center"/>
+          </el-table-column>
+          <el-table-column label="呼出统计" align="center">
+            <el-table-column
+              v-for="column in outColumns"
+              :key="column.text"
+              :prop="column.value"
+              :label="column.text"
+              align="center"/>
+          </el-table-column>
+          <el-table-column
+            class-name="darker-head"
+            v-for="column in allColumns"
+            :key="column.text"
+            :prop="column.value"
+            :label="column.text"
+            align="center"/>
+        </el-table>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'CallStatics',
+  data: function() {
+    return {
+      inColumns: [
+        { text: '呼入成功', value: 'insuccess' },
+        { text: '客户放弃', value: 'giveup' },
+        { text: '坐席忙碌', value: 'busy' },
+        { text: '坐席未接', value: 'zxwj' },
+        { text: '呼损率', value: 'hsl' },
+        { text: '平均通话时长', value: 'pjthsc' },
+        { text: '呼入接通率', value: 'hrjtl' }
+      ],
+      outColumns: [
+        { text: '呼出成功', value: 'outsuccess' },
+        { text: '呼出失败', value: 'outfail' },
+        { text: '平均通话时长', value: 'outtime' },
+        { text: '呼出接通率', value: 'outjtl' }
+      ],
+      allColumns: [
+        { text: '转移通话', value: 'transfer' },
+        { text: '总体接通率', value: 'alljtl' }
+      ],
+      data:[
+        {
+          insuccess: '0',
+          giveup: '0',
+          busy: '0',
+          zxwj: '0',
+          hsl: '0',
+          pjthsc: '0',
+          hrjtl: '0',
+          outsuccess: '0',
+          outfail: '0',
+          outtime: '0',
+          outjtl: '0',
+          transfer: '0',
+          alljtl: '0'
+        }
+      ]
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  $themeColor: aliceblue;
+  .statistic-div{
+    width:100%
+  }
+  .box{
+    position:relative;
+    margin-top: 20px;
+    border:2px solid $themeColor;
+    padding: 0 10px;
+    .table{
+      margin: 20px 0px;
+      box-sizing: border-box;
+      border-color: #C3DFF4 !important;
+    }
+  }
+  .box::before{
+    content:attr(title);
+    position:absolute;
+    left:20px;
+    color: #15428b;
+    font-weight: bold;
+    transform:translateY(-50%);
+    -webkit-transform:translate(0,-50%);
+    padding:0 10px;
+    background-color:#fff;
+    font-size:14px;
+  }
+  .head-class{
+    th{
+      background-color: #66b1ff;
+    }
+  }
+</style>
+
diff --git a/src/views/monitor/components/satisfiedStatics.vue b/src/views/monitor/components/satisfiedStatics.vue
new file mode 100644
index 0000000..10c1c2d
--- /dev/null
+++ b/src/views/monitor/components/satisfiedStatics.vue
@@ -0,0 +1,142 @@
+<!--呼入呼出统计-->
+<template>
+  <div>
+    <div class="statistic-div box" title="实时满意度评价统计">
+      <div>
+        <el-table v-loading="listLoading" :data="data" :size="size" class="table" row-class-name="statistic-class" header-row-class-name="head-class" border @selection-change="handleSelectionChange">
+          <el-table-column label="非常满意" align="center">
+            <el-table-column
+              v-for="column in five"
+              :key="column.text"
+              :prop="column.value"
+              :label="column.text"
+              align="center"/>
+          </el-table-column>
+          <el-table-column label="满意" align="center">
+            <el-table-column
+              v-for="column in five"
+              :key="column.text"
+              :prop="column.value"
+              :label="column.text"
+              align="center"/>
+          </el-table-column>
+          <el-table-column label="不满意" align="center">
+            <el-table-column
+              v-for="column in five"
+              :key="column.text"
+              :prop="column.value"
+              :label="column.text"
+              align="center"/>
+          </el-table-column>
+          <el-table-column label="放弃评价" align="center">
+            <el-table-column
+              v-for="column in five"
+              :key="column.text"
+              :prop="column.value"
+              :label="column.text"
+              align="center"/>
+          </el-table-column>
+
+        </el-table>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SatisfiedStatics',
+  data: function() {
+    return {
+      five: [
+        { text: '通话量', value: 'fivethl' },
+        { text: '百分比', value: 'fivebfb' }
+      ],
+      four: [
+        { text: '通话量', value: 'fourthl' },
+        { text: '百分比', value: 'fourbfb' }
+      ],
+      three: [
+        { text: '通话量', value: 'threethl' },
+        { text: '百分比', value: 'threebfb' }
+      ],
+      two: [
+        { text: '通话量', value: 'twothl' },
+        { text: '百分比', value: 'twobfb' }
+      ],
+      data:[
+        {
+          fivethl: '0',
+          fivebfb: '100%',
+          fourthl: '0',
+          fourbfb: '100%',
+          threethl: '0',
+          threebfb: '100%',
+          twothl: '0',
+          twobfb: '100%'
+        }
+      ]
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  $themeColor: aliceblue;
+  .statistic-div{
+    width:100%
+  }
+  .box{
+    position:relative;
+    margin-top: 20px;
+    border:2px solid $themeColor;
+    padding: 0 10px;
+    .table{
+      margin: 20px 0px;
+      box-sizing: border-box;
+      border-color: #C3DFF4 !important;
+    }
+  }
+  .box::before{
+    content:attr(title);
+    position:absolute;
+    left:20px;
+    color: #15428b;
+    font-weight: bold;
+    transform:translateY(-50%);
+    -webkit-transform:translate(0,-50%);
+    padding:0 10px;
+    background-color:#fff;
+    font-size:14px;
+  }
+  .head-class{
+    th{
+      background-color: #66b1ff;
+    }
+  }
+</style>
+<style rel="stylesheet/scss" lang="scss">
+  $themeColor: #96C7ED;
+  $boderColor: #c3dff4;
+  $leafColor: #dcecf9;
+  .head-class{
+    color: #000000;
+    font-weight: normal !important;
+    th{
+      background-color: $themeColor !important;
+      font-weight: normal !important;
+      border-color: $boderColor !important;
+    }
+    th.is-leaf{
+      background-color: $leafColor !important;
+    }
+    th.darker-head{
+      background-color: $themeColor !important;
+    }
+  }
+  .statistic-class{
+    td{
+      border-color: $boderColor !important;
+    }
+  }
+</style>
diff --git a/src/views/monitor/components/waitStatics.vue b/src/views/monitor/components/waitStatics.vue
new file mode 100644
index 0000000..32879cc
--- /dev/null
+++ b/src/views/monitor/components/waitStatics.vue
@@ -0,0 +1,117 @@
+<!--呼入呼出统计-->
+<template>
+  <div>
+    <div class="statistic-div box" title="实时满意度评价统计">
+      <div>
+        <el-table v-loading="listLoading" :data="data" :size="size" class="table" row-class-name="statistic-class" header-row-class-name="head-class" border @selection-change="handleSelectionChange">
+          <el-table-column label="10秒接通" align="center">
+            <el-table-column
+              v-for="column in five"
+              :key="column.text"
+              :prop="column.value"
+              :label="column.text"
+              align="center"/>
+          </el-table-column>
+          <el-table-column label="20秒接通" align="center">
+            <el-table-column
+              v-for="column in five"
+              :key="column.text"
+              :prop="column.value"
+              :label="column.text"
+              align="center"/>
+          </el-table-column>
+          <el-table-column label="30秒接通" align="center">
+            <el-table-column
+              v-for="column in five"
+              :key="column.text"
+              :prop="column.value"
+              :label="column.text"
+              align="center"/>
+          </el-table-column>
+          <el-table-column label="30秒以上接通" align="center">
+            <el-table-column
+              v-for="column in five"
+              :key="column.text"
+              :prop="column.value"
+              :label="column.text"
+              align="center"/>
+          </el-table-column>
+
+        </el-table>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'WaitStatics',
+  data: function() {
+    return {
+      five: [
+        { text: '数量', value: 'fivethl' },
+        { text: '百分比', value: 'fivebfb' }
+      ],
+      four: [
+        { text: '数量', value: 'fourthl' },
+        { text: '百分比', value: 'fourbfb' }
+      ],
+      three: [
+        { text: '数量', value: 'threethl' },
+        { text: '百分比', value: 'threebfb' }
+      ],
+      two: [
+        { text: '数量', value: 'twothl' },
+        { text: '百分比', value: 'twobfb' }
+      ],
+      data:[
+        {
+          fivethl: '0',
+          fivebfb: '100%',
+          fourthl: '0',
+          fourbfb: '100%',
+          threethl: '0',
+          threebfb: '100%',
+          twothl: '0',
+          twobfb: '100%'
+        }
+      ]
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  $themeColor: aliceblue;
+  .statistic-div{
+    width:100%
+  }
+  .box{
+    position:relative;
+    margin-top: 20px;
+    border:2px solid $themeColor;
+    padding: 0 10px;
+    .table{
+      margin: 20px 0px;
+      box-sizing: border-box;
+      border-color: #C3DFF4 !important;
+    }
+  }
+  .box::before{
+    content:attr(title);
+    position:absolute;
+    left:20px;
+    color: #15428b;
+    font-weight: bold;
+    transform:translateY(-50%);
+    -webkit-transform:translate(0,-50%);
+    padding:0 10px;
+    background-color:#fff;
+    font-size:14px;
+  }
+  .head-class{
+    th{
+      background-color: #66b1ff;
+    }
+  }
+</style>
diff --git a/src/views/monitor/realtimeMonitor.vue b/src/views/monitor/realtimeMonitor.vue
new file mode 100644
index 0000000..80cab27
--- /dev/null
+++ b/src/views/monitor/realtimeMonitor.vue
@@ -0,0 +1,38 @@
+<!--实时监控-->
+<template>
+  <app-container>
+    <div class="monitor-title">实时监控</div>
+    <call-statics/>
+    <el-row>
+      <el-col span="12">
+        <satisfied-statics/>
+      </el-col>
+      <el-col span="12">
+        <wait-statics/>
+      </el-col>
+    </el-row>
+  </app-container>
+</template>
+
+<script>
+import CallStatics from './components/callStatics'
+import AppContainer from '../../components/layout/AppContainer'
+import SatisfiedStatics from './components/satisfiedStatics'
+import WaitStatics from './components/waitStatics'
+export default {
+  name: 'RealtimeMonitor',
+  components: { WaitStatics, SatisfiedStatics, AppContainer, CallStatics }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.monitor-title{
+  line-height: 2;
+  font-size: 18px;
+  font-weight: 700;
+  padding: 5px;
+  text-align: center;
+  background-color: #9accf3;
+}
+
+</style>