diff --git a/src/icons/svg/monitor.svg b/src/icons/svg/monitor.svg
new file mode 100644
index 0000000..9caea16
--- /dev/null
+++ b/src/icons/svg/monitor.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="1587370659475" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1236" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M64 64V640H896V64H64zM0 0h960v704H0V0z" p-id="1237"></path><path d="M192 896H768v64H192zM448 640H512v256h-64z" p-id="1238"></path><path d="M479.232 561.604267l309.9904-348.330667-47.803733-42.5472-259.566934 291.669333L303.957333 240.008533 163.208533 438.6048l52.224 37.009067 91.6224-129.28z" p-id="1239"></path></svg>
\ No newline at end of file

diff --git a/src/icons/svg/monitor.svg b/src/icons/svg/monitor.svg
new file mode 100644
index 0000000..9caea16
--- /dev/null
+++ b/src/icons/svg/monitor.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="1587370659475" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1236" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M64 64V640H896V64H64zM0 0h960v704H0V0z" p-id="1237"></path><path d="M192 896H768v64H192zM448 640H512v256h-64z" p-id="1238"></path><path d="M479.232 561.604267l309.9904-348.330667-47.803733-42.5472-259.566934 291.669333L303.957333 240.008533 163.208533 438.6048l52.224 37.009067 91.6224-129.28z" p-id="1239"></path></svg>
\ No newline at end of file
diff --git a/src/router/modules/statistic.js b/src/router/modules/statistic.js
index 02cbd00..01d20bf 100644
--- a/src/router/modules/statistic.js
+++ b/src/router/modules/statistic.js
@@ -8,14 +8,15 @@
   alwaysShow: true,
   meta: {
     title: '监控管理',
-    icon: 'icon-config' // 图标
+    icon: 'icon-config', // 图标
+    permission: '/monitorManage'
   },
   children: [
     {
       path: '/realtimeMonitor',
       name: 'RealtimeMonitor',
-      component: () => import('@/views/monitor/realtimeMonitor'),
-      meta: { title: '实时监控', icon: '' }
+      component: () => import('@/views/monitor/realtimeMonitor/realtimeMonitor'),
+      meta: { title: '实时监控', icon: '', permission: '/monitor/reatime' }
     }
   ]
 }

diff --git a/src/icons/svg/monitor.svg b/src/icons/svg/monitor.svg
new file mode 100644
index 0000000..9caea16
--- /dev/null
+++ b/src/icons/svg/monitor.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="1587370659475" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1236" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M64 64V640H896V64H64zM0 0h960v704H0V0z" p-id="1237"></path><path d="M192 896H768v64H192zM448 640H512v256h-64z" p-id="1238"></path><path d="M479.232 561.604267l309.9904-348.330667-47.803733-42.5472-259.566934 291.669333L303.957333 240.008533 163.208533 438.6048l52.224 37.009067 91.6224-129.28z" p-id="1239"></path></svg>
\ No newline at end of file
diff --git a/src/router/modules/statistic.js b/src/router/modules/statistic.js
index 02cbd00..01d20bf 100644
--- a/src/router/modules/statistic.js
+++ b/src/router/modules/statistic.js
@@ -8,14 +8,15 @@
   alwaysShow: true,
   meta: {
     title: '监控管理',
-    icon: 'icon-config' // 图标
+    icon: 'icon-config', // 图标
+    permission: '/monitorManage'
   },
   children: [
     {
       path: '/realtimeMonitor',
       name: 'RealtimeMonitor',
-      component: () => import('@/views/monitor/realtimeMonitor'),
-      meta: { title: '实时监控', icon: '' }
+      component: () => import('@/views/monitor/realtimeMonitor/realtimeMonitor'),
+      meta: { title: '实时监控', icon: '', permission: '/monitor/reatime' }
     }
   ]
 }
diff --git a/src/views/monitor/components/callLine.vue b/src/views/monitor/components/callLine.vue
deleted file mode 100644
index 08eb5a0..0000000
--- a/src/views/monitor/components/callLine.vue
+++ /dev/null
@@ -1,212 +0,0 @@
-<!--通话统计曲线-->
-<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/icons/svg/monitor.svg b/src/icons/svg/monitor.svg
new file mode 100644
index 0000000..9caea16
--- /dev/null
+++ b/src/icons/svg/monitor.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="1587370659475" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1236" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M64 64V640H896V64H64zM0 0h960v704H0V0z" p-id="1237"></path><path d="M192 896H768v64H192zM448 640H512v256h-64z" p-id="1238"></path><path d="M479.232 561.604267l309.9904-348.330667-47.803733-42.5472-259.566934 291.669333L303.957333 240.008533 163.208533 438.6048l52.224 37.009067 91.6224-129.28z" p-id="1239"></path></svg>
\ No newline at end of file
diff --git a/src/router/modules/statistic.js b/src/router/modules/statistic.js
index 02cbd00..01d20bf 100644
--- a/src/router/modules/statistic.js
+++ b/src/router/modules/statistic.js
@@ -8,14 +8,15 @@
   alwaysShow: true,
   meta: {
     title: '监控管理',
-    icon: 'icon-config' // 图标
+    icon: 'icon-config', // 图标
+    permission: '/monitorManage'
   },
   children: [
     {
       path: '/realtimeMonitor',
       name: 'RealtimeMonitor',
-      component: () => import('@/views/monitor/realtimeMonitor'),
-      meta: { title: '实时监控', icon: '' }
+      component: () => import('@/views/monitor/realtimeMonitor/realtimeMonitor'),
+      meta: { title: '实时监控', icon: '', permission: '/monitor/reatime' }
     }
   ]
 }
diff --git a/src/views/monitor/components/callLine.vue b/src/views/monitor/components/callLine.vue
deleted file mode 100644
index 08eb5a0..0000000
--- a/src/views/monitor/components/callLine.vue
+++ /dev/null
@@ -1,212 +0,0 @@
-<!--通话统计曲线-->
-<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
deleted file mode 100644
index ce57072..0000000
--- a/src/views/monitor/components/callStatics.vue
+++ /dev/null
@@ -1,116 +0,0 @@
-<!--呼入呼出统计-->
-<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/icons/svg/monitor.svg b/src/icons/svg/monitor.svg
new file mode 100644
index 0000000..9caea16
--- /dev/null
+++ b/src/icons/svg/monitor.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="1587370659475" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1236" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M64 64V640H896V64H64zM0 0h960v704H0V0z" p-id="1237"></path><path d="M192 896H768v64H192zM448 640H512v256h-64z" p-id="1238"></path><path d="M479.232 561.604267l309.9904-348.330667-47.803733-42.5472-259.566934 291.669333L303.957333 240.008533 163.208533 438.6048l52.224 37.009067 91.6224-129.28z" p-id="1239"></path></svg>
\ No newline at end of file
diff --git a/src/router/modules/statistic.js b/src/router/modules/statistic.js
index 02cbd00..01d20bf 100644
--- a/src/router/modules/statistic.js
+++ b/src/router/modules/statistic.js
@@ -8,14 +8,15 @@
   alwaysShow: true,
   meta: {
     title: '监控管理',
-    icon: 'icon-config' // 图标
+    icon: 'icon-config', // 图标
+    permission: '/monitorManage'
   },
   children: [
     {
       path: '/realtimeMonitor',
       name: 'RealtimeMonitor',
-      component: () => import('@/views/monitor/realtimeMonitor'),
-      meta: { title: '实时监控', icon: '' }
+      component: () => import('@/views/monitor/realtimeMonitor/realtimeMonitor'),
+      meta: { title: '实时监控', icon: '', permission: '/monitor/reatime' }
     }
   ]
 }
diff --git a/src/views/monitor/components/callLine.vue b/src/views/monitor/components/callLine.vue
deleted file mode 100644
index 08eb5a0..0000000
--- a/src/views/monitor/components/callLine.vue
+++ /dev/null
@@ -1,212 +0,0 @@
-<!--通话统计曲线-->
-<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
deleted file mode 100644
index ce57072..0000000
--- a/src/views/monitor/components/callStatics.vue
+++ /dev/null
@@ -1,116 +0,0 @@
-<!--呼入呼出统计-->
-<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
deleted file mode 100644
index 10c1c2d..0000000
--- a/src/views/monitor/components/satisfiedStatics.vue
+++ /dev/null
@@ -1,142 +0,0 @@
-<!--呼入呼出统计-->
-<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/icons/svg/monitor.svg b/src/icons/svg/monitor.svg
new file mode 100644
index 0000000..9caea16
--- /dev/null
+++ b/src/icons/svg/monitor.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="1587370659475" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1236" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M64 64V640H896V64H64zM0 0h960v704H0V0z" p-id="1237"></path><path d="M192 896H768v64H192zM448 640H512v256h-64z" p-id="1238"></path><path d="M479.232 561.604267l309.9904-348.330667-47.803733-42.5472-259.566934 291.669333L303.957333 240.008533 163.208533 438.6048l52.224 37.009067 91.6224-129.28z" p-id="1239"></path></svg>
\ No newline at end of file
diff --git a/src/router/modules/statistic.js b/src/router/modules/statistic.js
index 02cbd00..01d20bf 100644
--- a/src/router/modules/statistic.js
+++ b/src/router/modules/statistic.js
@@ -8,14 +8,15 @@
   alwaysShow: true,
   meta: {
     title: '监控管理',
-    icon: 'icon-config' // 图标
+    icon: 'icon-config', // 图标
+    permission: '/monitorManage'
   },
   children: [
     {
       path: '/realtimeMonitor',
       name: 'RealtimeMonitor',
-      component: () => import('@/views/monitor/realtimeMonitor'),
-      meta: { title: '实时监控', icon: '' }
+      component: () => import('@/views/monitor/realtimeMonitor/realtimeMonitor'),
+      meta: { title: '实时监控', icon: '', permission: '/monitor/reatime' }
     }
   ]
 }
diff --git a/src/views/monitor/components/callLine.vue b/src/views/monitor/components/callLine.vue
deleted file mode 100644
index 08eb5a0..0000000
--- a/src/views/monitor/components/callLine.vue
+++ /dev/null
@@ -1,212 +0,0 @@
-<!--通话统计曲线-->
-<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
deleted file mode 100644
index ce57072..0000000
--- a/src/views/monitor/components/callStatics.vue
+++ /dev/null
@@ -1,116 +0,0 @@
-<!--呼入呼出统计-->
-<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
deleted file mode 100644
index 10c1c2d..0000000
--- a/src/views/monitor/components/satisfiedStatics.vue
+++ /dev/null
@@ -1,142 +0,0 @@
-<!--呼入呼出统计-->
-<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
deleted file mode 100644
index 32879cc..0000000
--- a/src/views/monitor/components/waitStatics.vue
+++ /dev/null
@@ -1,117 +0,0 @@
-<!--呼入呼出统计-->
-<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/icons/svg/monitor.svg b/src/icons/svg/monitor.svg
new file mode 100644
index 0000000..9caea16
--- /dev/null
+++ b/src/icons/svg/monitor.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="1587370659475" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1236" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M64 64V640H896V64H64zM0 0h960v704H0V0z" p-id="1237"></path><path d="M192 896H768v64H192zM448 640H512v256h-64z" p-id="1238"></path><path d="M479.232 561.604267l309.9904-348.330667-47.803733-42.5472-259.566934 291.669333L303.957333 240.008533 163.208533 438.6048l52.224 37.009067 91.6224-129.28z" p-id="1239"></path></svg>
\ No newline at end of file
diff --git a/src/router/modules/statistic.js b/src/router/modules/statistic.js
index 02cbd00..01d20bf 100644
--- a/src/router/modules/statistic.js
+++ b/src/router/modules/statistic.js
@@ -8,14 +8,15 @@
   alwaysShow: true,
   meta: {
     title: '监控管理',
-    icon: 'icon-config' // 图标
+    icon: 'icon-config', // 图标
+    permission: '/monitorManage'
   },
   children: [
     {
       path: '/realtimeMonitor',
       name: 'RealtimeMonitor',
-      component: () => import('@/views/monitor/realtimeMonitor'),
-      meta: { title: '实时监控', icon: '' }
+      component: () => import('@/views/monitor/realtimeMonitor/realtimeMonitor'),
+      meta: { title: '实时监控', icon: '', permission: '/monitor/reatime' }
     }
   ]
 }
diff --git a/src/views/monitor/components/callLine.vue b/src/views/monitor/components/callLine.vue
deleted file mode 100644
index 08eb5a0..0000000
--- a/src/views/monitor/components/callLine.vue
+++ /dev/null
@@ -1,212 +0,0 @@
-<!--通话统计曲线-->
-<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
deleted file mode 100644
index ce57072..0000000
--- a/src/views/monitor/components/callStatics.vue
+++ /dev/null
@@ -1,116 +0,0 @@
-<!--呼入呼出统计-->
-<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
deleted file mode 100644
index 10c1c2d..0000000
--- a/src/views/monitor/components/satisfiedStatics.vue
+++ /dev/null
@@ -1,142 +0,0 @@
-<!--呼入呼出统计-->
-<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
deleted file mode 100644
index 32879cc..0000000
--- a/src/views/monitor/components/waitStatics.vue
+++ /dev/null
@@ -1,117 +0,0 @@
-<!--呼入呼出统计-->
-<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
deleted file mode 100644
index 80cab27..0000000
--- a/src/views/monitor/realtimeMonitor.vue
+++ /dev/null
@@ -1,38 +0,0 @@
-<!--实时监控-->
-<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>

diff --git a/src/icons/svg/monitor.svg b/src/icons/svg/monitor.svg
new file mode 100644
index 0000000..9caea16
--- /dev/null
+++ b/src/icons/svg/monitor.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="1587370659475" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1236" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M64 64V640H896V64H64zM0 0h960v704H0V0z" p-id="1237"></path><path d="M192 896H768v64H192zM448 640H512v256h-64z" p-id="1238"></path><path d="M479.232 561.604267l309.9904-348.330667-47.803733-42.5472-259.566934 291.669333L303.957333 240.008533 163.208533 438.6048l52.224 37.009067 91.6224-129.28z" p-id="1239"></path></svg>
\ No newline at end of file
diff --git a/src/router/modules/statistic.js b/src/router/modules/statistic.js
index 02cbd00..01d20bf 100644
--- a/src/router/modules/statistic.js
+++ b/src/router/modules/statistic.js
@@ -8,14 +8,15 @@
   alwaysShow: true,
   meta: {
     title: '监控管理',
-    icon: 'icon-config' // 图标
+    icon: 'icon-config', // 图标
+    permission: '/monitorManage'
   },
   children: [
     {
       path: '/realtimeMonitor',
       name: 'RealtimeMonitor',
-      component: () => import('@/views/monitor/realtimeMonitor'),
-      meta: { title: '实时监控', icon: '' }
+      component: () => import('@/views/monitor/realtimeMonitor/realtimeMonitor'),
+      meta: { title: '实时监控', icon: '', permission: '/monitor/reatime' }
     }
   ]
 }
diff --git a/src/views/monitor/components/callLine.vue b/src/views/monitor/components/callLine.vue
deleted file mode 100644
index 08eb5a0..0000000
--- a/src/views/monitor/components/callLine.vue
+++ /dev/null
@@ -1,212 +0,0 @@
-<!--通话统计曲线-->
-<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
deleted file mode 100644
index ce57072..0000000
--- a/src/views/monitor/components/callStatics.vue
+++ /dev/null
@@ -1,116 +0,0 @@
-<!--呼入呼出统计-->
-<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
deleted file mode 100644
index 10c1c2d..0000000
--- a/src/views/monitor/components/satisfiedStatics.vue
+++ /dev/null
@@ -1,142 +0,0 @@
-<!--呼入呼出统计-->
-<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
deleted file mode 100644
index 32879cc..0000000
--- a/src/views/monitor/components/waitStatics.vue
+++ /dev/null
@@ -1,117 +0,0 @@
-<!--呼入呼出统计-->
-<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
deleted file mode 100644
index 80cab27..0000000
--- a/src/views/monitor/realtimeMonitor.vue
+++ /dev/null
@@ -1,38 +0,0 @@
-<!--实时监控-->
-<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>
diff --git a/src/views/monitor/realtimeMonitor/components/callLine.vue b/src/views/monitor/realtimeMonitor/components/callLine.vue
new file mode 100644
index 0000000..f006096
--- /dev/null
+++ b/src/views/monitor/realtimeMonitor/components/callLine.vue
@@ -0,0 +1,221 @@
+<!--通话统计曲线-->
+<template>
+  <div class="statistic-div box" title="按小时话务量统计">
+    <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: 'CallLine',
+  data() {
+    return {
+      listQuery: {
+        analysisType: 'other', // 统计方式（yesterday\today\week\month\other）
+        collReason: '', // 采集原因
+        stId: '', // 采集站点
+        startDate: '', // 开始时间
+        endDate: '', // 结束时间
+        compare: false, // 是否进行对比
+        startDate2: '', // 比较开始时间
+        endDate2: '', // 比较结束时间
+        analysisDate: 'hour' // 统计方式
+      },
+      chartShow: true,
+      personTypeList: [],
+      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
+    }
+  },
+  watch: {
+    'listQuery.compare'(val) {
+      if (val === true) {
+        this.timeRange2 = []
+      } else {
+        this.fetchData()
+      }
+    }
+  },
+  created() {
+    this.fetchData()
+  },
+  methods: {
+    // 获取数据
+    fetchData() {
+      // 不需要对比
+      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>
+  $themeColor: aliceblue;
+  .statistic-div{
+    width:100%;
+    .chart-container{
+    padding-top:10px;
+    /*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;
+      }
+    }
+  }
+  .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;
+  }
+</style>
+

diff --git a/src/icons/svg/monitor.svg b/src/icons/svg/monitor.svg
new file mode 100644
index 0000000..9caea16
--- /dev/null
+++ b/src/icons/svg/monitor.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="1587370659475" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1236" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M64 64V640H896V64H64zM0 0h960v704H0V0z" p-id="1237"></path><path d="M192 896H768v64H192zM448 640H512v256h-64z" p-id="1238"></path><path d="M479.232 561.604267l309.9904-348.330667-47.803733-42.5472-259.566934 291.669333L303.957333 240.008533 163.208533 438.6048l52.224 37.009067 91.6224-129.28z" p-id="1239"></path></svg>
\ No newline at end of file
diff --git a/src/router/modules/statistic.js b/src/router/modules/statistic.js
index 02cbd00..01d20bf 100644
--- a/src/router/modules/statistic.js
+++ b/src/router/modules/statistic.js
@@ -8,14 +8,15 @@
   alwaysShow: true,
   meta: {
     title: '监控管理',
-    icon: 'icon-config' // 图标
+    icon: 'icon-config', // 图标
+    permission: '/monitorManage'
   },
   children: [
     {
       path: '/realtimeMonitor',
       name: 'RealtimeMonitor',
-      component: () => import('@/views/monitor/realtimeMonitor'),
-      meta: { title: '实时监控', icon: '' }
+      component: () => import('@/views/monitor/realtimeMonitor/realtimeMonitor'),
+      meta: { title: '实时监控', icon: '', permission: '/monitor/reatime' }
     }
   ]
 }
diff --git a/src/views/monitor/components/callLine.vue b/src/views/monitor/components/callLine.vue
deleted file mode 100644
index 08eb5a0..0000000
--- a/src/views/monitor/components/callLine.vue
+++ /dev/null
@@ -1,212 +0,0 @@
-<!--通话统计曲线-->
-<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
deleted file mode 100644
index ce57072..0000000
--- a/src/views/monitor/components/callStatics.vue
+++ /dev/null
@@ -1,116 +0,0 @@
-<!--呼入呼出统计-->
-<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
deleted file mode 100644
index 10c1c2d..0000000
--- a/src/views/monitor/components/satisfiedStatics.vue
+++ /dev/null
@@ -1,142 +0,0 @@
-<!--呼入呼出统计-->
-<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
deleted file mode 100644
index 32879cc..0000000
--- a/src/views/monitor/components/waitStatics.vue
+++ /dev/null
@@ -1,117 +0,0 @@
-<!--呼入呼出统计-->
-<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
deleted file mode 100644
index 80cab27..0000000
--- a/src/views/monitor/realtimeMonitor.vue
+++ /dev/null
@@ -1,38 +0,0 @@
-<!--实时监控-->
-<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>
diff --git a/src/views/monitor/realtimeMonitor/components/callLine.vue b/src/views/monitor/realtimeMonitor/components/callLine.vue
new file mode 100644
index 0000000..f006096
--- /dev/null
+++ b/src/views/monitor/realtimeMonitor/components/callLine.vue
@@ -0,0 +1,221 @@
+<!--通话统计曲线-->
+<template>
+  <div class="statistic-div box" title="按小时话务量统计">
+    <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: 'CallLine',
+  data() {
+    return {
+      listQuery: {
+        analysisType: 'other', // 统计方式（yesterday\today\week\month\other）
+        collReason: '', // 采集原因
+        stId: '', // 采集站点
+        startDate: '', // 开始时间
+        endDate: '', // 结束时间
+        compare: false, // 是否进行对比
+        startDate2: '', // 比较开始时间
+        endDate2: '', // 比较结束时间
+        analysisDate: 'hour' // 统计方式
+      },
+      chartShow: true,
+      personTypeList: [],
+      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
+    }
+  },
+  watch: {
+    'listQuery.compare'(val) {
+      if (val === true) {
+        this.timeRange2 = []
+      } else {
+        this.fetchData()
+      }
+    }
+  },
+  created() {
+    this.fetchData()
+  },
+  methods: {
+    // 获取数据
+    fetchData() {
+      // 不需要对比
+      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>
+  $themeColor: aliceblue;
+  .statistic-div{
+    width:100%;
+    .chart-container{
+    padding-top:10px;
+    /*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;
+      }
+    }
+  }
+  .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;
+  }
+</style>
+
diff --git a/src/views/monitor/realtimeMonitor/components/callStatics.vue b/src/views/monitor/realtimeMonitor/components/callStatics.vue
new file mode 100644
index 0000000..ce57072
--- /dev/null
+++ b/src/views/monitor/realtimeMonitor/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/icons/svg/monitor.svg b/src/icons/svg/monitor.svg
new file mode 100644
index 0000000..9caea16
--- /dev/null
+++ b/src/icons/svg/monitor.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="1587370659475" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1236" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M64 64V640H896V64H64zM0 0h960v704H0V0z" p-id="1237"></path><path d="M192 896H768v64H192zM448 640H512v256h-64z" p-id="1238"></path><path d="M479.232 561.604267l309.9904-348.330667-47.803733-42.5472-259.566934 291.669333L303.957333 240.008533 163.208533 438.6048l52.224 37.009067 91.6224-129.28z" p-id="1239"></path></svg>
\ No newline at end of file
diff --git a/src/router/modules/statistic.js b/src/router/modules/statistic.js
index 02cbd00..01d20bf 100644
--- a/src/router/modules/statistic.js
+++ b/src/router/modules/statistic.js
@@ -8,14 +8,15 @@
   alwaysShow: true,
   meta: {
     title: '监控管理',
-    icon: 'icon-config' // 图标
+    icon: 'icon-config', // 图标
+    permission: '/monitorManage'
   },
   children: [
     {
       path: '/realtimeMonitor',
       name: 'RealtimeMonitor',
-      component: () => import('@/views/monitor/realtimeMonitor'),
-      meta: { title: '实时监控', icon: '' }
+      component: () => import('@/views/monitor/realtimeMonitor/realtimeMonitor'),
+      meta: { title: '实时监控', icon: '', permission: '/monitor/reatime' }
     }
   ]
 }
diff --git a/src/views/monitor/components/callLine.vue b/src/views/monitor/components/callLine.vue
deleted file mode 100644
index 08eb5a0..0000000
--- a/src/views/monitor/components/callLine.vue
+++ /dev/null
@@ -1,212 +0,0 @@
-<!--通话统计曲线-->
-<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
deleted file mode 100644
index ce57072..0000000
--- a/src/views/monitor/components/callStatics.vue
+++ /dev/null
@@ -1,116 +0,0 @@
-<!--呼入呼出统计-->
-<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
deleted file mode 100644
index 10c1c2d..0000000
--- a/src/views/monitor/components/satisfiedStatics.vue
+++ /dev/null
@@ -1,142 +0,0 @@
-<!--呼入呼出统计-->
-<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
deleted file mode 100644
index 32879cc..0000000
--- a/src/views/monitor/components/waitStatics.vue
+++ /dev/null
@@ -1,117 +0,0 @@
-<!--呼入呼出统计-->
-<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
deleted file mode 100644
index 80cab27..0000000
--- a/src/views/monitor/realtimeMonitor.vue
+++ /dev/null
@@ -1,38 +0,0 @@
-<!--实时监控-->
-<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>
diff --git a/src/views/monitor/realtimeMonitor/components/callLine.vue b/src/views/monitor/realtimeMonitor/components/callLine.vue
new file mode 100644
index 0000000..f006096
--- /dev/null
+++ b/src/views/monitor/realtimeMonitor/components/callLine.vue
@@ -0,0 +1,221 @@
+<!--通话统计曲线-->
+<template>
+  <div class="statistic-div box" title="按小时话务量统计">
+    <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: 'CallLine',
+  data() {
+    return {
+      listQuery: {
+        analysisType: 'other', // 统计方式（yesterday\today\week\month\other）
+        collReason: '', // 采集原因
+        stId: '', // 采集站点
+        startDate: '', // 开始时间
+        endDate: '', // 结束时间
+        compare: false, // 是否进行对比
+        startDate2: '', // 比较开始时间
+        endDate2: '', // 比较结束时间
+        analysisDate: 'hour' // 统计方式
+      },
+      chartShow: true,
+      personTypeList: [],
+      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
+    }
+  },
+  watch: {
+    'listQuery.compare'(val) {
+      if (val === true) {
+        this.timeRange2 = []
+      } else {
+        this.fetchData()
+      }
+    }
+  },
+  created() {
+    this.fetchData()
+  },
+  methods: {
+    // 获取数据
+    fetchData() {
+      // 不需要对比
+      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>
+  $themeColor: aliceblue;
+  .statistic-div{
+    width:100%;
+    .chart-container{
+    padding-top:10px;
+    /*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;
+      }
+    }
+  }
+  .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;
+  }
+</style>
+
diff --git a/src/views/monitor/realtimeMonitor/components/callStatics.vue b/src/views/monitor/realtimeMonitor/components/callStatics.vue
new file mode 100644
index 0000000..ce57072
--- /dev/null
+++ b/src/views/monitor/realtimeMonitor/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/realtimeMonitor/components/satisfiedStatics.vue b/src/views/monitor/realtimeMonitor/components/satisfiedStatics.vue
new file mode 100644
index 0000000..10c1c2d
--- /dev/null
+++ b/src/views/monitor/realtimeMonitor/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/icons/svg/monitor.svg b/src/icons/svg/monitor.svg
new file mode 100644
index 0000000..9caea16
--- /dev/null
+++ b/src/icons/svg/monitor.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="1587370659475" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1236" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M64 64V640H896V64H64zM0 0h960v704H0V0z" p-id="1237"></path><path d="M192 896H768v64H192zM448 640H512v256h-64z" p-id="1238"></path><path d="M479.232 561.604267l309.9904-348.330667-47.803733-42.5472-259.566934 291.669333L303.957333 240.008533 163.208533 438.6048l52.224 37.009067 91.6224-129.28z" p-id="1239"></path></svg>
\ No newline at end of file
diff --git a/src/router/modules/statistic.js b/src/router/modules/statistic.js
index 02cbd00..01d20bf 100644
--- a/src/router/modules/statistic.js
+++ b/src/router/modules/statistic.js
@@ -8,14 +8,15 @@
   alwaysShow: true,
   meta: {
     title: '监控管理',
-    icon: 'icon-config' // 图标
+    icon: 'icon-config', // 图标
+    permission: '/monitorManage'
   },
   children: [
     {
       path: '/realtimeMonitor',
       name: 'RealtimeMonitor',
-      component: () => import('@/views/monitor/realtimeMonitor'),
-      meta: { title: '实时监控', icon: '' }
+      component: () => import('@/views/monitor/realtimeMonitor/realtimeMonitor'),
+      meta: { title: '实时监控', icon: '', permission: '/monitor/reatime' }
     }
   ]
 }
diff --git a/src/views/monitor/components/callLine.vue b/src/views/monitor/components/callLine.vue
deleted file mode 100644
index 08eb5a0..0000000
--- a/src/views/monitor/components/callLine.vue
+++ /dev/null
@@ -1,212 +0,0 @@
-<!--通话统计曲线-->
-<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
deleted file mode 100644
index ce57072..0000000
--- a/src/views/monitor/components/callStatics.vue
+++ /dev/null
@@ -1,116 +0,0 @@
-<!--呼入呼出统计-->
-<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
deleted file mode 100644
index 10c1c2d..0000000
--- a/src/views/monitor/components/satisfiedStatics.vue
+++ /dev/null
@@ -1,142 +0,0 @@
-<!--呼入呼出统计-->
-<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
deleted file mode 100644
index 32879cc..0000000
--- a/src/views/monitor/components/waitStatics.vue
+++ /dev/null
@@ -1,117 +0,0 @@
-<!--呼入呼出统计-->
-<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
deleted file mode 100644
index 80cab27..0000000
--- a/src/views/monitor/realtimeMonitor.vue
+++ /dev/null
@@ -1,38 +0,0 @@
-<!--实时监控-->
-<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>
diff --git a/src/views/monitor/realtimeMonitor/components/callLine.vue b/src/views/monitor/realtimeMonitor/components/callLine.vue
new file mode 100644
index 0000000..f006096
--- /dev/null
+++ b/src/views/monitor/realtimeMonitor/components/callLine.vue
@@ -0,0 +1,221 @@
+<!--通话统计曲线-->
+<template>
+  <div class="statistic-div box" title="按小时话务量统计">
+    <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: 'CallLine',
+  data() {
+    return {
+      listQuery: {
+        analysisType: 'other', // 统计方式（yesterday\today\week\month\other）
+        collReason: '', // 采集原因
+        stId: '', // 采集站点
+        startDate: '', // 开始时间
+        endDate: '', // 结束时间
+        compare: false, // 是否进行对比
+        startDate2: '', // 比较开始时间
+        endDate2: '', // 比较结束时间
+        analysisDate: 'hour' // 统计方式
+      },
+      chartShow: true,
+      personTypeList: [],
+      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
+    }
+  },
+  watch: {
+    'listQuery.compare'(val) {
+      if (val === true) {
+        this.timeRange2 = []
+      } else {
+        this.fetchData()
+      }
+    }
+  },
+  created() {
+    this.fetchData()
+  },
+  methods: {
+    // 获取数据
+    fetchData() {
+      // 不需要对比
+      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>
+  $themeColor: aliceblue;
+  .statistic-div{
+    width:100%;
+    .chart-container{
+    padding-top:10px;
+    /*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;
+      }
+    }
+  }
+  .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;
+  }
+</style>
+
diff --git a/src/views/monitor/realtimeMonitor/components/callStatics.vue b/src/views/monitor/realtimeMonitor/components/callStatics.vue
new file mode 100644
index 0000000..ce57072
--- /dev/null
+++ b/src/views/monitor/realtimeMonitor/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/realtimeMonitor/components/satisfiedStatics.vue b/src/views/monitor/realtimeMonitor/components/satisfiedStatics.vue
new file mode 100644
index 0000000..10c1c2d
--- /dev/null
+++ b/src/views/monitor/realtimeMonitor/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/realtimeMonitor/components/waitStatics.vue b/src/views/monitor/realtimeMonitor/components/waitStatics.vue
new file mode 100644
index 0000000..32879cc
--- /dev/null
+++ b/src/views/monitor/realtimeMonitor/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/icons/svg/monitor.svg b/src/icons/svg/monitor.svg
new file mode 100644
index 0000000..9caea16
--- /dev/null
+++ b/src/icons/svg/monitor.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="1587370659475" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1236" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M64 64V640H896V64H64zM0 0h960v704H0V0z" p-id="1237"></path><path d="M192 896H768v64H192zM448 640H512v256h-64z" p-id="1238"></path><path d="M479.232 561.604267l309.9904-348.330667-47.803733-42.5472-259.566934 291.669333L303.957333 240.008533 163.208533 438.6048l52.224 37.009067 91.6224-129.28z" p-id="1239"></path></svg>
\ No newline at end of file
diff --git a/src/router/modules/statistic.js b/src/router/modules/statistic.js
index 02cbd00..01d20bf 100644
--- a/src/router/modules/statistic.js
+++ b/src/router/modules/statistic.js
@@ -8,14 +8,15 @@
   alwaysShow: true,
   meta: {
     title: '监控管理',
-    icon: 'icon-config' // 图标
+    icon: 'icon-config', // 图标
+    permission: '/monitorManage'
   },
   children: [
     {
       path: '/realtimeMonitor',
       name: 'RealtimeMonitor',
-      component: () => import('@/views/monitor/realtimeMonitor'),
-      meta: { title: '实时监控', icon: '' }
+      component: () => import('@/views/monitor/realtimeMonitor/realtimeMonitor'),
+      meta: { title: '实时监控', icon: '', permission: '/monitor/reatime' }
     }
   ]
 }
diff --git a/src/views/monitor/components/callLine.vue b/src/views/monitor/components/callLine.vue
deleted file mode 100644
index 08eb5a0..0000000
--- a/src/views/monitor/components/callLine.vue
+++ /dev/null
@@ -1,212 +0,0 @@
-<!--通话统计曲线-->
-<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
deleted file mode 100644
index ce57072..0000000
--- a/src/views/monitor/components/callStatics.vue
+++ /dev/null
@@ -1,116 +0,0 @@
-<!--呼入呼出统计-->
-<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
deleted file mode 100644
index 10c1c2d..0000000
--- a/src/views/monitor/components/satisfiedStatics.vue
+++ /dev/null
@@ -1,142 +0,0 @@
-<!--呼入呼出统计-->
-<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
deleted file mode 100644
index 32879cc..0000000
--- a/src/views/monitor/components/waitStatics.vue
+++ /dev/null
@@ -1,117 +0,0 @@
-<!--呼入呼出统计-->
-<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
deleted file mode 100644
index 80cab27..0000000
--- a/src/views/monitor/realtimeMonitor.vue
+++ /dev/null
@@ -1,38 +0,0 @@
-<!--实时监控-->
-<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>
diff --git a/src/views/monitor/realtimeMonitor/components/callLine.vue b/src/views/monitor/realtimeMonitor/components/callLine.vue
new file mode 100644
index 0000000..f006096
--- /dev/null
+++ b/src/views/monitor/realtimeMonitor/components/callLine.vue
@@ -0,0 +1,221 @@
+<!--通话统计曲线-->
+<template>
+  <div class="statistic-div box" title="按小时话务量统计">
+    <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: 'CallLine',
+  data() {
+    return {
+      listQuery: {
+        analysisType: 'other', // 统计方式（yesterday\today\week\month\other）
+        collReason: '', // 采集原因
+        stId: '', // 采集站点
+        startDate: '', // 开始时间
+        endDate: '', // 结束时间
+        compare: false, // 是否进行对比
+        startDate2: '', // 比较开始时间
+        endDate2: '', // 比较结束时间
+        analysisDate: 'hour' // 统计方式
+      },
+      chartShow: true,
+      personTypeList: [],
+      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
+    }
+  },
+  watch: {
+    'listQuery.compare'(val) {
+      if (val === true) {
+        this.timeRange2 = []
+      } else {
+        this.fetchData()
+      }
+    }
+  },
+  created() {
+    this.fetchData()
+  },
+  methods: {
+    // 获取数据
+    fetchData() {
+      // 不需要对比
+      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>
+  $themeColor: aliceblue;
+  .statistic-div{
+    width:100%;
+    .chart-container{
+    padding-top:10px;
+    /*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;
+      }
+    }
+  }
+  .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;
+  }
+</style>
+
diff --git a/src/views/monitor/realtimeMonitor/components/callStatics.vue b/src/views/monitor/realtimeMonitor/components/callStatics.vue
new file mode 100644
index 0000000..ce57072
--- /dev/null
+++ b/src/views/monitor/realtimeMonitor/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/realtimeMonitor/components/satisfiedStatics.vue b/src/views/monitor/realtimeMonitor/components/satisfiedStatics.vue
new file mode 100644
index 0000000..10c1c2d
--- /dev/null
+++ b/src/views/monitor/realtimeMonitor/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/realtimeMonitor/components/waitStatics.vue b/src/views/monitor/realtimeMonitor/components/waitStatics.vue
new file mode 100644
index 0000000..32879cc
--- /dev/null
+++ b/src/views/monitor/realtimeMonitor/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/realtimeMonitor.vue b/src/views/monitor/realtimeMonitor/realtimeMonitor.vue
new file mode 100644
index 0000000..08273ef
--- /dev/null
+++ b/src/views/monitor/realtimeMonitor/realtimeMonitor.vue
@@ -0,0 +1,44 @@
+<!--实时监控-->
+<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>
+    <el-row>
+      <el-col :span="24">
+        <call-line/>
+      </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'
+import CallLine from './components/callLine'
+export default {
+  name: 'RealtimeMonitor',
+  components: { CallLine, 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>