diff --git a/src/api/statistics.js b/src/api/statistics.js
index e20b4c0..741fbb2 100644
--- a/src/api/statistics.js
+++ b/src/api/statistics.js
@@ -55,3 +55,62 @@
     params
   })
 }
+
+// 综合控制室数量统计
+export function getStatisticsData() {
+  return request({
+    url: '/overview/statistics',
+    method: 'get'
+  })
+}
+
+// 今日进出营情况占比
+export function inOutToday() {
+  return request({
+    url: '/overview/todayPassPercentage',
+    method: 'get'
+  })
+}
+
+// 各类型设备安装数量
+export function devCount() {
+  return request({
+    url: '/overview/devicePercentage',
+    method: 'get'
+  })
+}
+
+// 进出营数量统计
+export function inOutCount(params) {
+  return request({
+    url: '/overview/passCountByType',
+    method: 'get',
+    params
+  })
+}
+
+// 各重点区域出入情况
+export function inOutKeyCount() {
+  return request({
+    url: '/overview/keyareaPassPercentage',
+    method: 'get'
+  })
+}
+
+// 各类型报警数量统计
+export function devAlarmCount(params) {
+  return request({
+    url: '/overview/alarmCountByType',
+    method: 'get',
+    params
+  })
+}
+
+// 各营门出入营量统计
+export function inOutDoorCount(params) {
+  return request({
+    url: '/overview/passCountByArea',
+    method: 'get',
+    params
+  })
+}

diff --git a/src/api/statistics.js b/src/api/statistics.js
index e20b4c0..741fbb2 100644
--- a/src/api/statistics.js
+++ b/src/api/statistics.js
@@ -55,3 +55,62 @@
     params
   })
 }
+
+// 综合控制室数量统计
+export function getStatisticsData() {
+  return request({
+    url: '/overview/statistics',
+    method: 'get'
+  })
+}
+
+// 今日进出营情况占比
+export function inOutToday() {
+  return request({
+    url: '/overview/todayPassPercentage',
+    method: 'get'
+  })
+}
+
+// 各类型设备安装数量
+export function devCount() {
+  return request({
+    url: '/overview/devicePercentage',
+    method: 'get'
+  })
+}
+
+// 进出营数量统计
+export function inOutCount(params) {
+  return request({
+    url: '/overview/passCountByType',
+    method: 'get',
+    params
+  })
+}
+
+// 各重点区域出入情况
+export function inOutKeyCount() {
+  return request({
+    url: '/overview/keyareaPassPercentage',
+    method: 'get'
+  })
+}
+
+// 各类型报警数量统计
+export function devAlarmCount(params) {
+  return request({
+    url: '/overview/alarmCountByType',
+    method: 'get',
+    params
+  })
+}
+
+// 各营门出入营量统计
+export function inOutDoorCount(params) {
+  return request({
+    url: '/overview/passCountByArea',
+    method: 'get',
+    params
+  })
+}
diff --git a/src/router/index.js b/src/router/index.js
index 9435997..823269b 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -10,6 +10,7 @@
 import Layout from '../views/layout/Layout'
 import { systemRouters } from './modules/system'
 import { doorSysRouters } from './modules/doorSys'
+import { ctrlSysRouters } from './modules/ctrlSys'
 
 /**
 * hidden: true                   if `hidden:true` will not show in the sidebar(default is false)
@@ -88,5 +89,6 @@
 export const asyncRouterMap = [
   ...systemRouters,
   ...doorSysRouters,
+  ...ctrlSysRouters,
   { path: '*', redirect: '/404', hidden: true, meta: {}}
 ]

diff --git a/src/api/statistics.js b/src/api/statistics.js
index e20b4c0..741fbb2 100644
--- a/src/api/statistics.js
+++ b/src/api/statistics.js
@@ -55,3 +55,62 @@
     params
   })
 }
+
+// 综合控制室数量统计
+export function getStatisticsData() {
+  return request({
+    url: '/overview/statistics',
+    method: 'get'
+  })
+}
+
+// 今日进出营情况占比
+export function inOutToday() {
+  return request({
+    url: '/overview/todayPassPercentage',
+    method: 'get'
+  })
+}
+
+// 各类型设备安装数量
+export function devCount() {
+  return request({
+    url: '/overview/devicePercentage',
+    method: 'get'
+  })
+}
+
+// 进出营数量统计
+export function inOutCount(params) {
+  return request({
+    url: '/overview/passCountByType',
+    method: 'get',
+    params
+  })
+}
+
+// 各重点区域出入情况
+export function inOutKeyCount() {
+  return request({
+    url: '/overview/keyareaPassPercentage',
+    method: 'get'
+  })
+}
+
+// 各类型报警数量统计
+export function devAlarmCount(params) {
+  return request({
+    url: '/overview/alarmCountByType',
+    method: 'get',
+    params
+  })
+}
+
+// 各营门出入营量统计
+export function inOutDoorCount(params) {
+  return request({
+    url: '/overview/passCountByArea',
+    method: 'get',
+    params
+  })
+}
diff --git a/src/router/index.js b/src/router/index.js
index 9435997..823269b 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -10,6 +10,7 @@
 import Layout from '../views/layout/Layout'
 import { systemRouters } from './modules/system'
 import { doorSysRouters } from './modules/doorSys'
+import { ctrlSysRouters } from './modules/ctrlSys'
 
 /**
 * hidden: true                   if `hidden:true` will not show in the sidebar(default is false)
@@ -88,5 +89,6 @@
 export const asyncRouterMap = [
   ...systemRouters,
   ...doorSysRouters,
+  ...ctrlSysRouters,
   { path: '*', redirect: '/404', hidden: true, meta: {}}
 ]
diff --git a/src/router/modules/ctrlSys.js b/src/router/modules/ctrlSys.js
new file mode 100644
index 0000000..0dce4da
--- /dev/null
+++ b/src/router/modules/ctrlSys.js
@@ -0,0 +1,35 @@
+/* Layout */
+import SinglePageLayout from '@/views/layout/SinglePageLayout'
+export const ctrlSysRouters = [
+  {
+    path: '/ctrl',
+    name: 'ctrl',
+    redirect: '/ctrl',
+    hidden: true,
+    meta: {
+      title: '综合控制室子系统',
+      permission: ['/ctrl'],
+      isSys: true
+    }
+  },
+  {
+    path: '/ctrl/index1',
+    component: SinglePageLayout,
+    name: 'Ctrl1',
+    alwaysShow: false,
+    meta: {
+      title: '',
+      icon: '', // 图标
+      permission: ['/ctrl'], // 权限名称
+      sys: '/ctrl'
+    },
+    children: [
+      {
+        path: '/ctrl/index',
+        name: 'CtrlIndex',
+        component: () => import('@/views/ctrl/index'),
+        meta: { title: '综合控制室首页', icon: '', permission: ['/ctrl/index'], keepAlive: true }
+      }
+    ]
+  }
+]

diff --git a/src/api/statistics.js b/src/api/statistics.js
index e20b4c0..741fbb2 100644
--- a/src/api/statistics.js
+++ b/src/api/statistics.js
@@ -55,3 +55,62 @@
     params
   })
 }
+
+// 综合控制室数量统计
+export function getStatisticsData() {
+  return request({
+    url: '/overview/statistics',
+    method: 'get'
+  })
+}
+
+// 今日进出营情况占比
+export function inOutToday() {
+  return request({
+    url: '/overview/todayPassPercentage',
+    method: 'get'
+  })
+}
+
+// 各类型设备安装数量
+export function devCount() {
+  return request({
+    url: '/overview/devicePercentage',
+    method: 'get'
+  })
+}
+
+// 进出营数量统计
+export function inOutCount(params) {
+  return request({
+    url: '/overview/passCountByType',
+    method: 'get',
+    params
+  })
+}
+
+// 各重点区域出入情况
+export function inOutKeyCount() {
+  return request({
+    url: '/overview/keyareaPassPercentage',
+    method: 'get'
+  })
+}
+
+// 各类型报警数量统计
+export function devAlarmCount(params) {
+  return request({
+    url: '/overview/alarmCountByType',
+    method: 'get',
+    params
+  })
+}
+
+// 各营门出入营量统计
+export function inOutDoorCount(params) {
+  return request({
+    url: '/overview/passCountByArea',
+    method: 'get',
+    params
+  })
+}
diff --git a/src/router/index.js b/src/router/index.js
index 9435997..823269b 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -10,6 +10,7 @@
 import Layout from '../views/layout/Layout'
 import { systemRouters } from './modules/system'
 import { doorSysRouters } from './modules/doorSys'
+import { ctrlSysRouters } from './modules/ctrlSys'
 
 /**
 * hidden: true                   if `hidden:true` will not show in the sidebar(default is false)
@@ -88,5 +89,6 @@
 export const asyncRouterMap = [
   ...systemRouters,
   ...doorSysRouters,
+  ...ctrlSysRouters,
   { path: '*', redirect: '/404', hidden: true, meta: {}}
 ]
diff --git a/src/router/modules/ctrlSys.js b/src/router/modules/ctrlSys.js
new file mode 100644
index 0000000..0dce4da
--- /dev/null
+++ b/src/router/modules/ctrlSys.js
@@ -0,0 +1,35 @@
+/* Layout */
+import SinglePageLayout from '@/views/layout/SinglePageLayout'
+export const ctrlSysRouters = [
+  {
+    path: '/ctrl',
+    name: 'ctrl',
+    redirect: '/ctrl',
+    hidden: true,
+    meta: {
+      title: '综合控制室子系统',
+      permission: ['/ctrl'],
+      isSys: true
+    }
+  },
+  {
+    path: '/ctrl/index1',
+    component: SinglePageLayout,
+    name: 'Ctrl1',
+    alwaysShow: false,
+    meta: {
+      title: '',
+      icon: '', // 图标
+      permission: ['/ctrl'], // 权限名称
+      sys: '/ctrl'
+    },
+    children: [
+      {
+        path: '/ctrl/index',
+        name: 'CtrlIndex',
+        component: () => import('@/views/ctrl/index'),
+        meta: { title: '综合控制室首页', icon: '', permission: ['/ctrl/index'], keepAlive: true }
+      }
+    ]
+  }
+]
diff --git a/src/views/ctrl/index.vue b/src/views/ctrl/index.vue
new file mode 100644
index 0000000..93efb6f
--- /dev/null
+++ b/src/views/ctrl/index.vue
@@ -0,0 +1,193 @@
+<template>
+  <div class="app-wrapper">
+    <el-row :gutter="20">
+      <el-col id="today-visitor" class="sub-data-block" style="margin-left: 20px;">
+        <div class="sub-title">今日访客</div>
+        <div class="statis-block">
+          <span class="big-size" v-text="statistics.todayVisitorPerson"/><span>人</span>
+        </div>
+      </el-col>
+
+      <el-col id="total-visitor" class="sub-data-block">
+        <div class="sub-title">累计访客</div>
+        <div class="statis-block">
+          <span class="big-size" v-text="statistics.totalVisitorPerson"/><span>人</span>
+        </div>
+      </el-col>
+
+      <el-col id="current-alarm" class="sub-data-block">
+        <div class="sub-title">当前报警</div>
+        <div class="statis-block">
+          <span class="big-size" v-text="statistics.currentAlarm"/><span>台</span>
+        </div>
+      </el-col>
+
+      <el-col id="total-alarm" class="sub-data-block">
+        <div class="sub-title">累计报警</div>
+        <div class="statis-block">
+          <span class="big-size" v-text="statistics.totalAlarm"/><span>次</span>
+        </div>
+      </el-col>
+
+      <el-col id="online-device" class="sub-data-block">
+        <div class="sub-title">在线设备</div>
+        <div class="statis-block">
+          <span class="big-size" v-text="statistics.onlineDevice"/><span>台</span>
+        </div>
+      </el-col>
+
+      <el-col id="total-device" class="sub-data-block">
+        <div class="sub-title">设备总量</div>
+        <div class="statis-block">
+          <span class="big-size" v-text="statistics.totalDevice"/><span>台</span>
+        </div>
+      </el-col>
+    </el-row>
+
+    <el-row :gutter="20">
+      <el-col :span="7" class="chart-block">
+        <div class="chart-title">今日进出营情况</div>
+        <in-out-today />
+      </el-col>
+
+      <el-col :span="7" class="chart-block">
+        <div class="chart-title">各类型设备安装数量</div>
+        <dev-count />
+      </el-col>
+
+      <el-col id="pass-count" :span="10" class="chart-block">
+        <div class="chart-title">进出营数量统计</div>
+        <in-out-count />
+      </el-col>
+    </el-row>
+
+    <el-row :gutter="20" style="margin-bottom: 40px;">
+      <el-col :span="7" class="chart-block">
+        <div class="chart-title">各重点区域出入情况</div>
+        <in-out-key-count />
+      </el-col>
+
+      <el-col id="dev-alarm-count" :span="10" class="chart-block">
+        <div class="chart-title">设备报警数量统计</div>
+        <dev-alarm-count />
+      </el-col>
+
+      <el-col :span="7" class="chart-block">
+        <div class="chart-title">各营门出入营量统计</div>
+        <in-out-door-count />
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { getStatisticsData } from '@/api/statistics'
+import InOutToday from '@/views/ctrl/statCharts/inOutToday'
+import InOutCount from '@/views/ctrl/statCharts/inOutCount'
+import DevCount from '@/views/ctrl/statCharts/devCount'
+import InOutKeyCount from '@/views/ctrl/statCharts/inOutKeyCount'
+import DevAlarmCount from '@/views/ctrl/statCharts/devAlarmCount'
+import InOutDoorCount from '@/views/ctrl/statCharts/inOutDoorCount'
+export default {
+  name: 'CtrlIndex',
+  components: { InOutToday, DevCount, InOutCount, InOutKeyCount, DevAlarmCount, InOutDoorCount },
+  data() {
+    return {
+      statistics: {
+        todayVisitorPerson: 0,
+        totalVisitorPerson: 0,
+        currentAlarm: 0,
+        totalAlarm: 0,
+        onlineDevice: 0,
+        totalDevice: 0
+      }
+    }
+  },
+  created() {
+    this.fetchStatisticsData()
+  },
+  methods: {
+    fetchStatisticsData() {
+      getStatisticsData().then(response => {
+        if (response.code === 200) {
+          this.statistics = response.data
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .app-wrapper {
+    background-color: #e9e9e9;
+    padding-bottom: 20px;
+  }
+
+  .sub-data-block {
+    width: calc((100vw - 120px) / 6);
+    border-radius: 16px;
+    float: left;
+    margin: 10px;
+    box-shadow: 2px 2px 8px #666666;
+  }
+  .sub-title {
+    font-weight: bold;
+    text-align: center;
+    font-family: 'Microsoft YaHei';
+    color: #fff;
+    font-size: 24px;
+    padding: 10px;
+  }
+  .statis-block {
+    text-align: center;
+    margin: 20px 10px 0px 10px;
+    padding: 10px;
+    color: #fff;
+    font-weight: bold;
+    letter-spacing: 1px;
+    font-size: 24px;
+  }
+  .big-size {
+    font-size: 64px;
+  }
+
+  .chart-title {
+    font-family: 'Microsoft YaHei';
+    color: #000000;
+    font-weight: bold;
+    font-size: 20px;
+    text-align: center;
+    padding: 10px;
+  }
+  .chart-block {
+    margin-left: 20px;
+    margin-top: 20px;
+    border-radius: 16px;
+    background-color: #FFFFFF;
+    box-shadow: 2px 2px 8px #666666;
+  }
+
+  #today-visitor {
+    background-image: linear-gradient(to right, #ff8fdf, #ff01b4);
+  }
+  #total-visitor {
+    background-image: linear-gradient(to right, #9280ff, #2400ff);
+  }
+  #current-alarm {
+    background-image: linear-gradient(to right, #ff696a, #ff0101);
+  }
+  #total-alarm {
+    background-image: linear-gradient(to right, #7fbbff, #0078ff);
+  }
+  #online-device {
+    background-image: linear-gradient(to right, #72ff7e, #01a411);
+  }
+  #total-device {
+    background-image: linear-gradient(to right, #ffa800, #ce7e00);
+  }
+
+  #pass-count, #dev-alarm-count {
+    width: calc(250vw / 6 - 70px);
+  }
+</style>

diff --git a/src/api/statistics.js b/src/api/statistics.js
index e20b4c0..741fbb2 100644
--- a/src/api/statistics.js
+++ b/src/api/statistics.js
@@ -55,3 +55,62 @@
     params
   })
 }
+
+// 综合控制室数量统计
+export function getStatisticsData() {
+  return request({
+    url: '/overview/statistics',
+    method: 'get'
+  })
+}
+
+// 今日进出营情况占比
+export function inOutToday() {
+  return request({
+    url: '/overview/todayPassPercentage',
+    method: 'get'
+  })
+}
+
+// 各类型设备安装数量
+export function devCount() {
+  return request({
+    url: '/overview/devicePercentage',
+    method: 'get'
+  })
+}
+
+// 进出营数量统计
+export function inOutCount(params) {
+  return request({
+    url: '/overview/passCountByType',
+    method: 'get',
+    params
+  })
+}
+
+// 各重点区域出入情况
+export function inOutKeyCount() {
+  return request({
+    url: '/overview/keyareaPassPercentage',
+    method: 'get'
+  })
+}
+
+// 各类型报警数量统计
+export function devAlarmCount(params) {
+  return request({
+    url: '/overview/alarmCountByType',
+    method: 'get',
+    params
+  })
+}
+
+// 各营门出入营量统计
+export function inOutDoorCount(params) {
+  return request({
+    url: '/overview/passCountByArea',
+    method: 'get',
+    params
+  })
+}
diff --git a/src/router/index.js b/src/router/index.js
index 9435997..823269b 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -10,6 +10,7 @@
 import Layout from '../views/layout/Layout'
 import { systemRouters } from './modules/system'
 import { doorSysRouters } from './modules/doorSys'
+import { ctrlSysRouters } from './modules/ctrlSys'
 
 /**
 * hidden: true                   if `hidden:true` will not show in the sidebar(default is false)
@@ -88,5 +89,6 @@
 export const asyncRouterMap = [
   ...systemRouters,
   ...doorSysRouters,
+  ...ctrlSysRouters,
   { path: '*', redirect: '/404', hidden: true, meta: {}}
 ]
diff --git a/src/router/modules/ctrlSys.js b/src/router/modules/ctrlSys.js
new file mode 100644
index 0000000..0dce4da
--- /dev/null
+++ b/src/router/modules/ctrlSys.js
@@ -0,0 +1,35 @@
+/* Layout */
+import SinglePageLayout from '@/views/layout/SinglePageLayout'
+export const ctrlSysRouters = [
+  {
+    path: '/ctrl',
+    name: 'ctrl',
+    redirect: '/ctrl',
+    hidden: true,
+    meta: {
+      title: '综合控制室子系统',
+      permission: ['/ctrl'],
+      isSys: true
+    }
+  },
+  {
+    path: '/ctrl/index1',
+    component: SinglePageLayout,
+    name: 'Ctrl1',
+    alwaysShow: false,
+    meta: {
+      title: '',
+      icon: '', // 图标
+      permission: ['/ctrl'], // 权限名称
+      sys: '/ctrl'
+    },
+    children: [
+      {
+        path: '/ctrl/index',
+        name: 'CtrlIndex',
+        component: () => import('@/views/ctrl/index'),
+        meta: { title: '综合控制室首页', icon: '', permission: ['/ctrl/index'], keepAlive: true }
+      }
+    ]
+  }
+]
diff --git a/src/views/ctrl/index.vue b/src/views/ctrl/index.vue
new file mode 100644
index 0000000..93efb6f
--- /dev/null
+++ b/src/views/ctrl/index.vue
@@ -0,0 +1,193 @@
+<template>
+  <div class="app-wrapper">
+    <el-row :gutter="20">
+      <el-col id="today-visitor" class="sub-data-block" style="margin-left: 20px;">
+        <div class="sub-title">今日访客</div>
+        <div class="statis-block">
+          <span class="big-size" v-text="statistics.todayVisitorPerson"/><span>人</span>
+        </div>
+      </el-col>
+
+      <el-col id="total-visitor" class="sub-data-block">
+        <div class="sub-title">累计访客</div>
+        <div class="statis-block">
+          <span class="big-size" v-text="statistics.totalVisitorPerson"/><span>人</span>
+        </div>
+      </el-col>
+
+      <el-col id="current-alarm" class="sub-data-block">
+        <div class="sub-title">当前报警</div>
+        <div class="statis-block">
+          <span class="big-size" v-text="statistics.currentAlarm"/><span>台</span>
+        </div>
+      </el-col>
+
+      <el-col id="total-alarm" class="sub-data-block">
+        <div class="sub-title">累计报警</div>
+        <div class="statis-block">
+          <span class="big-size" v-text="statistics.totalAlarm"/><span>次</span>
+        </div>
+      </el-col>
+
+      <el-col id="online-device" class="sub-data-block">
+        <div class="sub-title">在线设备</div>
+        <div class="statis-block">
+          <span class="big-size" v-text="statistics.onlineDevice"/><span>台</span>
+        </div>
+      </el-col>
+
+      <el-col id="total-device" class="sub-data-block">
+        <div class="sub-title">设备总量</div>
+        <div class="statis-block">
+          <span class="big-size" v-text="statistics.totalDevice"/><span>台</span>
+        </div>
+      </el-col>
+    </el-row>
+
+    <el-row :gutter="20">
+      <el-col :span="7" class="chart-block">
+        <div class="chart-title">今日进出营情况</div>
+        <in-out-today />
+      </el-col>
+
+      <el-col :span="7" class="chart-block">
+        <div class="chart-title">各类型设备安装数量</div>
+        <dev-count />
+      </el-col>
+
+      <el-col id="pass-count" :span="10" class="chart-block">
+        <div class="chart-title">进出营数量统计</div>
+        <in-out-count />
+      </el-col>
+    </el-row>
+
+    <el-row :gutter="20" style="margin-bottom: 40px;">
+      <el-col :span="7" class="chart-block">
+        <div class="chart-title">各重点区域出入情况</div>
+        <in-out-key-count />
+      </el-col>
+
+      <el-col id="dev-alarm-count" :span="10" class="chart-block">
+        <div class="chart-title">设备报警数量统计</div>
+        <dev-alarm-count />
+      </el-col>
+
+      <el-col :span="7" class="chart-block">
+        <div class="chart-title">各营门出入营量统计</div>
+        <in-out-door-count />
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { getStatisticsData } from '@/api/statistics'
+import InOutToday from '@/views/ctrl/statCharts/inOutToday'
+import InOutCount from '@/views/ctrl/statCharts/inOutCount'
+import DevCount from '@/views/ctrl/statCharts/devCount'
+import InOutKeyCount from '@/views/ctrl/statCharts/inOutKeyCount'
+import DevAlarmCount from '@/views/ctrl/statCharts/devAlarmCount'
+import InOutDoorCount from '@/views/ctrl/statCharts/inOutDoorCount'
+export default {
+  name: 'CtrlIndex',
+  components: { InOutToday, DevCount, InOutCount, InOutKeyCount, DevAlarmCount, InOutDoorCount },
+  data() {
+    return {
+      statistics: {
+        todayVisitorPerson: 0,
+        totalVisitorPerson: 0,
+        currentAlarm: 0,
+        totalAlarm: 0,
+        onlineDevice: 0,
+        totalDevice: 0
+      }
+    }
+  },
+  created() {
+    this.fetchStatisticsData()
+  },
+  methods: {
+    fetchStatisticsData() {
+      getStatisticsData().then(response => {
+        if (response.code === 200) {
+          this.statistics = response.data
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .app-wrapper {
+    background-color: #e9e9e9;
+    padding-bottom: 20px;
+  }
+
+  .sub-data-block {
+    width: calc((100vw - 120px) / 6);
+    border-radius: 16px;
+    float: left;
+    margin: 10px;
+    box-shadow: 2px 2px 8px #666666;
+  }
+  .sub-title {
+    font-weight: bold;
+    text-align: center;
+    font-family: 'Microsoft YaHei';
+    color: #fff;
+    font-size: 24px;
+    padding: 10px;
+  }
+  .statis-block {
+    text-align: center;
+    margin: 20px 10px 0px 10px;
+    padding: 10px;
+    color: #fff;
+    font-weight: bold;
+    letter-spacing: 1px;
+    font-size: 24px;
+  }
+  .big-size {
+    font-size: 64px;
+  }
+
+  .chart-title {
+    font-family: 'Microsoft YaHei';
+    color: #000000;
+    font-weight: bold;
+    font-size: 20px;
+    text-align: center;
+    padding: 10px;
+  }
+  .chart-block {
+    margin-left: 20px;
+    margin-top: 20px;
+    border-radius: 16px;
+    background-color: #FFFFFF;
+    box-shadow: 2px 2px 8px #666666;
+  }
+
+  #today-visitor {
+    background-image: linear-gradient(to right, #ff8fdf, #ff01b4);
+  }
+  #total-visitor {
+    background-image: linear-gradient(to right, #9280ff, #2400ff);
+  }
+  #current-alarm {
+    background-image: linear-gradient(to right, #ff696a, #ff0101);
+  }
+  #total-alarm {
+    background-image: linear-gradient(to right, #7fbbff, #0078ff);
+  }
+  #online-device {
+    background-image: linear-gradient(to right, #72ff7e, #01a411);
+  }
+  #total-device {
+    background-image: linear-gradient(to right, #ffa800, #ce7e00);
+  }
+
+  #pass-count, #dev-alarm-count {
+    width: calc(250vw / 6 - 70px);
+  }
+</style>
diff --git a/src/views/ctrl/statCharts/devAlarmCount.vue b/src/views/ctrl/statCharts/devAlarmCount.vue
new file mode 100644
index 0000000..ff2e6c4
--- /dev/null
+++ b/src/views/ctrl/statCharts/devAlarmCount.vue
@@ -0,0 +1,111 @@
+<template>
+  <div>
+    <el-date-picker
+      v-model="timeRange"
+      :picker-options="pickerOptions"
+      type="daterange"
+      range-separator="至"
+      start-placeholder="开始日期"
+      end-placeholder="结束日期"
+      style="margin-bottom: 10px;" />
+    <ve-histogram :data="chartData" :settings="settings" height="350px" />
+  </div>
+</template>
+
+<script>
+import { formatToString, getDate, oneDayTime } from '@/utils/calendarUtil'
+import { devAlarmCount } from '@/api/statistics'
+
+const now = new Date()
+
+export default {
+  name: 'DevAlarmCount',
+  data() {
+    return {
+      params: {
+        beginDate: '',
+        endDate: ''
+      },
+      chartData: {
+        columns: ['name', 'count'],
+        rows: []
+      },
+      settings: {
+        labelMap: {
+          'name': '设备类型',
+          'count': '报警数量'
+        },
+        max: [4]
+      },
+      timeRange: [],
+      pickerOptions: {
+        shortcuts: [{
+          text: '最近七日',
+          onClick(picker) {
+            const end = now
+            const start = new Date()
+            start.setTime(start.getTime() - oneDayTime * 7)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近十日',
+          onClick(picker) {
+            const end = now
+            const start = new Date()
+            start.setTime(start.getTime() - oneDayTime * 10)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近三十日',
+          onClick(picker) {
+            const end = now
+            const start = new Date()
+            start.setTime(start.getTime() - oneDayTime * 30)
+            picker.$emit('pick', [start, end])
+          }
+        }],
+        disabledDate(time) {
+          const oneMonthLater = new Date(now.getTime() - (oneDayTime * 31))
+          return time.getTime() < oneMonthLater
+        }
+      }
+    }
+  },
+  watch: {
+    timeRange: function(newV) {
+      if (newV) {
+        this.params.beginDate = formatToString(newV[0], 'DATE')
+        this.params.endDate = formatToString(newV[1], 'DATE')
+      } else {
+        this.initTime()
+      }
+      this.fetchData()
+    }
+  },
+  created() {
+    this.initTime()
+  },
+  activated() {
+    this.fetchData()
+  },
+  methods: {
+    initTime() {
+      this.params.beginDate = getDate(-7, 'DATE')
+      this.params.endDate = getDate(1, 'DATE')
+
+      this.timeRange = [this.params.beginDate, this.params.endDate]
+    },
+    fetchData() {
+      devAlarmCount(this.params).then(response => {
+        if (response.code === 200) {
+          this.chartData.rows = response.data
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

diff --git a/src/api/statistics.js b/src/api/statistics.js
index e20b4c0..741fbb2 100644
--- a/src/api/statistics.js
+++ b/src/api/statistics.js
@@ -55,3 +55,62 @@
     params
   })
 }
+
+// 综合控制室数量统计
+export function getStatisticsData() {
+  return request({
+    url: '/overview/statistics',
+    method: 'get'
+  })
+}
+
+// 今日进出营情况占比
+export function inOutToday() {
+  return request({
+    url: '/overview/todayPassPercentage',
+    method: 'get'
+  })
+}
+
+// 各类型设备安装数量
+export function devCount() {
+  return request({
+    url: '/overview/devicePercentage',
+    method: 'get'
+  })
+}
+
+// 进出营数量统计
+export function inOutCount(params) {
+  return request({
+    url: '/overview/passCountByType',
+    method: 'get',
+    params
+  })
+}
+
+// 各重点区域出入情况
+export function inOutKeyCount() {
+  return request({
+    url: '/overview/keyareaPassPercentage',
+    method: 'get'
+  })
+}
+
+// 各类型报警数量统计
+export function devAlarmCount(params) {
+  return request({
+    url: '/overview/alarmCountByType',
+    method: 'get',
+    params
+  })
+}
+
+// 各营门出入营量统计
+export function inOutDoorCount(params) {
+  return request({
+    url: '/overview/passCountByArea',
+    method: 'get',
+    params
+  })
+}
diff --git a/src/router/index.js b/src/router/index.js
index 9435997..823269b 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -10,6 +10,7 @@
 import Layout from '../views/layout/Layout'
 import { systemRouters } from './modules/system'
 import { doorSysRouters } from './modules/doorSys'
+import { ctrlSysRouters } from './modules/ctrlSys'
 
 /**
 * hidden: true                   if `hidden:true` will not show in the sidebar(default is false)
@@ -88,5 +89,6 @@
 export const asyncRouterMap = [
   ...systemRouters,
   ...doorSysRouters,
+  ...ctrlSysRouters,
   { path: '*', redirect: '/404', hidden: true, meta: {}}
 ]
diff --git a/src/router/modules/ctrlSys.js b/src/router/modules/ctrlSys.js
new file mode 100644
index 0000000..0dce4da
--- /dev/null
+++ b/src/router/modules/ctrlSys.js
@@ -0,0 +1,35 @@
+/* Layout */
+import SinglePageLayout from '@/views/layout/SinglePageLayout'
+export const ctrlSysRouters = [
+  {
+    path: '/ctrl',
+    name: 'ctrl',
+    redirect: '/ctrl',
+    hidden: true,
+    meta: {
+      title: '综合控制室子系统',
+      permission: ['/ctrl'],
+      isSys: true
+    }
+  },
+  {
+    path: '/ctrl/index1',
+    component: SinglePageLayout,
+    name: 'Ctrl1',
+    alwaysShow: false,
+    meta: {
+      title: '',
+      icon: '', // 图标
+      permission: ['/ctrl'], // 权限名称
+      sys: '/ctrl'
+    },
+    children: [
+      {
+        path: '/ctrl/index',
+        name: 'CtrlIndex',
+        component: () => import('@/views/ctrl/index'),
+        meta: { title: '综合控制室首页', icon: '', permission: ['/ctrl/index'], keepAlive: true }
+      }
+    ]
+  }
+]
diff --git a/src/views/ctrl/index.vue b/src/views/ctrl/index.vue
new file mode 100644
index 0000000..93efb6f
--- /dev/null
+++ b/src/views/ctrl/index.vue
@@ -0,0 +1,193 @@
+<template>
+  <div class="app-wrapper">
+    <el-row :gutter="20">
+      <el-col id="today-visitor" class="sub-data-block" style="margin-left: 20px;">
+        <div class="sub-title">今日访客</div>
+        <div class="statis-block">
+          <span class="big-size" v-text="statistics.todayVisitorPerson"/><span>人</span>
+        </div>
+      </el-col>
+
+      <el-col id="total-visitor" class="sub-data-block">
+        <div class="sub-title">累计访客</div>
+        <div class="statis-block">
+          <span class="big-size" v-text="statistics.totalVisitorPerson"/><span>人</span>
+        </div>
+      </el-col>
+
+      <el-col id="current-alarm" class="sub-data-block">
+        <div class="sub-title">当前报警</div>
+        <div class="statis-block">
+          <span class="big-size" v-text="statistics.currentAlarm"/><span>台</span>
+        </div>
+      </el-col>
+
+      <el-col id="total-alarm" class="sub-data-block">
+        <div class="sub-title">累计报警</div>
+        <div class="statis-block">
+          <span class="big-size" v-text="statistics.totalAlarm"/><span>次</span>
+        </div>
+      </el-col>
+
+      <el-col id="online-device" class="sub-data-block">
+        <div class="sub-title">在线设备</div>
+        <div class="statis-block">
+          <span class="big-size" v-text="statistics.onlineDevice"/><span>台</span>
+        </div>
+      </el-col>
+
+      <el-col id="total-device" class="sub-data-block">
+        <div class="sub-title">设备总量</div>
+        <div class="statis-block">
+          <span class="big-size" v-text="statistics.totalDevice"/><span>台</span>
+        </div>
+      </el-col>
+    </el-row>
+
+    <el-row :gutter="20">
+      <el-col :span="7" class="chart-block">
+        <div class="chart-title">今日进出营情况</div>
+        <in-out-today />
+      </el-col>
+
+      <el-col :span="7" class="chart-block">
+        <div class="chart-title">各类型设备安装数量</div>
+        <dev-count />
+      </el-col>
+
+      <el-col id="pass-count" :span="10" class="chart-block">
+        <div class="chart-title">进出营数量统计</div>
+        <in-out-count />
+      </el-col>
+    </el-row>
+
+    <el-row :gutter="20" style="margin-bottom: 40px;">
+      <el-col :span="7" class="chart-block">
+        <div class="chart-title">各重点区域出入情况</div>
+        <in-out-key-count />
+      </el-col>
+
+      <el-col id="dev-alarm-count" :span="10" class="chart-block">
+        <div class="chart-title">设备报警数量统计</div>
+        <dev-alarm-count />
+      </el-col>
+
+      <el-col :span="7" class="chart-block">
+        <div class="chart-title">各营门出入营量统计</div>
+        <in-out-door-count />
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { getStatisticsData } from '@/api/statistics'
+import InOutToday from '@/views/ctrl/statCharts/inOutToday'
+import InOutCount from '@/views/ctrl/statCharts/inOutCount'
+import DevCount from '@/views/ctrl/statCharts/devCount'
+import InOutKeyCount from '@/views/ctrl/statCharts/inOutKeyCount'
+import DevAlarmCount from '@/views/ctrl/statCharts/devAlarmCount'
+import InOutDoorCount from '@/views/ctrl/statCharts/inOutDoorCount'
+export default {
+  name: 'CtrlIndex',
+  components: { InOutToday, DevCount, InOutCount, InOutKeyCount, DevAlarmCount, InOutDoorCount },
+  data() {
+    return {
+      statistics: {
+        todayVisitorPerson: 0,
+        totalVisitorPerson: 0,
+        currentAlarm: 0,
+        totalAlarm: 0,
+        onlineDevice: 0,
+        totalDevice: 0
+      }
+    }
+  },
+  created() {
+    this.fetchStatisticsData()
+  },
+  methods: {
+    fetchStatisticsData() {
+      getStatisticsData().then(response => {
+        if (response.code === 200) {
+          this.statistics = response.data
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .app-wrapper {
+    background-color: #e9e9e9;
+    padding-bottom: 20px;
+  }
+
+  .sub-data-block {
+    width: calc((100vw - 120px) / 6);
+    border-radius: 16px;
+    float: left;
+    margin: 10px;
+    box-shadow: 2px 2px 8px #666666;
+  }
+  .sub-title {
+    font-weight: bold;
+    text-align: center;
+    font-family: 'Microsoft YaHei';
+    color: #fff;
+    font-size: 24px;
+    padding: 10px;
+  }
+  .statis-block {
+    text-align: center;
+    margin: 20px 10px 0px 10px;
+    padding: 10px;
+    color: #fff;
+    font-weight: bold;
+    letter-spacing: 1px;
+    font-size: 24px;
+  }
+  .big-size {
+    font-size: 64px;
+  }
+
+  .chart-title {
+    font-family: 'Microsoft YaHei';
+    color: #000000;
+    font-weight: bold;
+    font-size: 20px;
+    text-align: center;
+    padding: 10px;
+  }
+  .chart-block {
+    margin-left: 20px;
+    margin-top: 20px;
+    border-radius: 16px;
+    background-color: #FFFFFF;
+    box-shadow: 2px 2px 8px #666666;
+  }
+
+  #today-visitor {
+    background-image: linear-gradient(to right, #ff8fdf, #ff01b4);
+  }
+  #total-visitor {
+    background-image: linear-gradient(to right, #9280ff, #2400ff);
+  }
+  #current-alarm {
+    background-image: linear-gradient(to right, #ff696a, #ff0101);
+  }
+  #total-alarm {
+    background-image: linear-gradient(to right, #7fbbff, #0078ff);
+  }
+  #online-device {
+    background-image: linear-gradient(to right, #72ff7e, #01a411);
+  }
+  #total-device {
+    background-image: linear-gradient(to right, #ffa800, #ce7e00);
+  }
+
+  #pass-count, #dev-alarm-count {
+    width: calc(250vw / 6 - 70px);
+  }
+</style>
diff --git a/src/views/ctrl/statCharts/devAlarmCount.vue b/src/views/ctrl/statCharts/devAlarmCount.vue
new file mode 100644
index 0000000..ff2e6c4
--- /dev/null
+++ b/src/views/ctrl/statCharts/devAlarmCount.vue
@@ -0,0 +1,111 @@
+<template>
+  <div>
+    <el-date-picker
+      v-model="timeRange"
+      :picker-options="pickerOptions"
+      type="daterange"
+      range-separator="至"
+      start-placeholder="开始日期"
+      end-placeholder="结束日期"
+      style="margin-bottom: 10px;" />
+    <ve-histogram :data="chartData" :settings="settings" height="350px" />
+  </div>
+</template>
+
+<script>
+import { formatToString, getDate, oneDayTime } from '@/utils/calendarUtil'
+import { devAlarmCount } from '@/api/statistics'
+
+const now = new Date()
+
+export default {
+  name: 'DevAlarmCount',
+  data() {
+    return {
+      params: {
+        beginDate: '',
+        endDate: ''
+      },
+      chartData: {
+        columns: ['name', 'count'],
+        rows: []
+      },
+      settings: {
+        labelMap: {
+          'name': '设备类型',
+          'count': '报警数量'
+        },
+        max: [4]
+      },
+      timeRange: [],
+      pickerOptions: {
+        shortcuts: [{
+          text: '最近七日',
+          onClick(picker) {
+            const end = now
+            const start = new Date()
+            start.setTime(start.getTime() - oneDayTime * 7)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近十日',
+          onClick(picker) {
+            const end = now
+            const start = new Date()
+            start.setTime(start.getTime() - oneDayTime * 10)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近三十日',
+          onClick(picker) {
+            const end = now
+            const start = new Date()
+            start.setTime(start.getTime() - oneDayTime * 30)
+            picker.$emit('pick', [start, end])
+          }
+        }],
+        disabledDate(time) {
+          const oneMonthLater = new Date(now.getTime() - (oneDayTime * 31))
+          return time.getTime() < oneMonthLater
+        }
+      }
+    }
+  },
+  watch: {
+    timeRange: function(newV) {
+      if (newV) {
+        this.params.beginDate = formatToString(newV[0], 'DATE')
+        this.params.endDate = formatToString(newV[1], 'DATE')
+      } else {
+        this.initTime()
+      }
+      this.fetchData()
+    }
+  },
+  created() {
+    this.initTime()
+  },
+  activated() {
+    this.fetchData()
+  },
+  methods: {
+    initTime() {
+      this.params.beginDate = getDate(-7, 'DATE')
+      this.params.endDate = getDate(1, 'DATE')
+
+      this.timeRange = [this.params.beginDate, this.params.endDate]
+    },
+    fetchData() {
+      devAlarmCount(this.params).then(response => {
+        if (response.code === 200) {
+          this.chartData.rows = response.data
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/ctrl/statCharts/devCount.vue b/src/views/ctrl/statCharts/devCount.vue
new file mode 100644
index 0000000..d3e2902
--- /dev/null
+++ b/src/views/ctrl/statCharts/devCount.vue
@@ -0,0 +1,39 @@
+<template>
+  <ve-ring :data="chartData" :settings="settings" />
+</template>
+
+<script>
+import { devCount } from '@/api/statistics'
+
+export default {
+  name: 'DevCount',
+  data() {
+    return {
+      chartData: {
+        columns: ['name', 'count'],
+        rows: []
+      },
+      settings: {
+        // legendLimit: 4
+        radius: [60, 100]
+      }
+    }
+  },
+  activated() {
+    this.fetchData()
+  },
+  methods: {
+    fetchData() {
+      devCount().then(response => {
+        if (response.code === 200) {
+          this.chartData.rows = response.data
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

diff --git a/src/api/statistics.js b/src/api/statistics.js
index e20b4c0..741fbb2 100644
--- a/src/api/statistics.js
+++ b/src/api/statistics.js
@@ -55,3 +55,62 @@
     params
   })
 }
+
+// 综合控制室数量统计
+export function getStatisticsData() {
+  return request({
+    url: '/overview/statistics',
+    method: 'get'
+  })
+}
+
+// 今日进出营情况占比
+export function inOutToday() {
+  return request({
+    url: '/overview/todayPassPercentage',
+    method: 'get'
+  })
+}
+
+// 各类型设备安装数量
+export function devCount() {
+  return request({
+    url: '/overview/devicePercentage',
+    method: 'get'
+  })
+}
+
+// 进出营数量统计
+export function inOutCount(params) {
+  return request({
+    url: '/overview/passCountByType',
+    method: 'get',
+    params
+  })
+}
+
+// 各重点区域出入情况
+export function inOutKeyCount() {
+  return request({
+    url: '/overview/keyareaPassPercentage',
+    method: 'get'
+  })
+}
+
+// 各类型报警数量统计
+export function devAlarmCount(params) {
+  return request({
+    url: '/overview/alarmCountByType',
+    method: 'get',
+    params
+  })
+}
+
+// 各营门出入营量统计
+export function inOutDoorCount(params) {
+  return request({
+    url: '/overview/passCountByArea',
+    method: 'get',
+    params
+  })
+}
diff --git a/src/router/index.js b/src/router/index.js
index 9435997..823269b 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -10,6 +10,7 @@
 import Layout from '../views/layout/Layout'
 import { systemRouters } from './modules/system'
 import { doorSysRouters } from './modules/doorSys'
+import { ctrlSysRouters } from './modules/ctrlSys'
 
 /**
 * hidden: true                   if `hidden:true` will not show in the sidebar(default is false)
@@ -88,5 +89,6 @@
 export const asyncRouterMap = [
   ...systemRouters,
   ...doorSysRouters,
+  ...ctrlSysRouters,
   { path: '*', redirect: '/404', hidden: true, meta: {}}
 ]
diff --git a/src/router/modules/ctrlSys.js b/src/router/modules/ctrlSys.js
new file mode 100644
index 0000000..0dce4da
--- /dev/null
+++ b/src/router/modules/ctrlSys.js
@@ -0,0 +1,35 @@
+/* Layout */
+import SinglePageLayout from '@/views/layout/SinglePageLayout'
+export const ctrlSysRouters = [
+  {
+    path: '/ctrl',
+    name: 'ctrl',
+    redirect: '/ctrl',
+    hidden: true,
+    meta: {
+      title: '综合控制室子系统',
+      permission: ['/ctrl'],
+      isSys: true
+    }
+  },
+  {
+    path: '/ctrl/index1',
+    component: SinglePageLayout,
+    name: 'Ctrl1',
+    alwaysShow: false,
+    meta: {
+      title: '',
+      icon: '', // 图标
+      permission: ['/ctrl'], // 权限名称
+      sys: '/ctrl'
+    },
+    children: [
+      {
+        path: '/ctrl/index',
+        name: 'CtrlIndex',
+        component: () => import('@/views/ctrl/index'),
+        meta: { title: '综合控制室首页', icon: '', permission: ['/ctrl/index'], keepAlive: true }
+      }
+    ]
+  }
+]
diff --git a/src/views/ctrl/index.vue b/src/views/ctrl/index.vue
new file mode 100644
index 0000000..93efb6f
--- /dev/null
+++ b/src/views/ctrl/index.vue
@@ -0,0 +1,193 @@
+<template>
+  <div class="app-wrapper">
+    <el-row :gutter="20">
+      <el-col id="today-visitor" class="sub-data-block" style="margin-left: 20px;">
+        <div class="sub-title">今日访客</div>
+        <div class="statis-block">
+          <span class="big-size" v-text="statistics.todayVisitorPerson"/><span>人</span>
+        </div>
+      </el-col>
+
+      <el-col id="total-visitor" class="sub-data-block">
+        <div class="sub-title">累计访客</div>
+        <div class="statis-block">
+          <span class="big-size" v-text="statistics.totalVisitorPerson"/><span>人</span>
+        </div>
+      </el-col>
+
+      <el-col id="current-alarm" class="sub-data-block">
+        <div class="sub-title">当前报警</div>
+        <div class="statis-block">
+          <span class="big-size" v-text="statistics.currentAlarm"/><span>台</span>
+        </div>
+      </el-col>
+
+      <el-col id="total-alarm" class="sub-data-block">
+        <div class="sub-title">累计报警</div>
+        <div class="statis-block">
+          <span class="big-size" v-text="statistics.totalAlarm"/><span>次</span>
+        </div>
+      </el-col>
+
+      <el-col id="online-device" class="sub-data-block">
+        <div class="sub-title">在线设备</div>
+        <div class="statis-block">
+          <span class="big-size" v-text="statistics.onlineDevice"/><span>台</span>
+        </div>
+      </el-col>
+
+      <el-col id="total-device" class="sub-data-block">
+        <div class="sub-title">设备总量</div>
+        <div class="statis-block">
+          <span class="big-size" v-text="statistics.totalDevice"/><span>台</span>
+        </div>
+      </el-col>
+    </el-row>
+
+    <el-row :gutter="20">
+      <el-col :span="7" class="chart-block">
+        <div class="chart-title">今日进出营情况</div>
+        <in-out-today />
+      </el-col>
+
+      <el-col :span="7" class="chart-block">
+        <div class="chart-title">各类型设备安装数量</div>
+        <dev-count />
+      </el-col>
+
+      <el-col id="pass-count" :span="10" class="chart-block">
+        <div class="chart-title">进出营数量统计</div>
+        <in-out-count />
+      </el-col>
+    </el-row>
+
+    <el-row :gutter="20" style="margin-bottom: 40px;">
+      <el-col :span="7" class="chart-block">
+        <div class="chart-title">各重点区域出入情况</div>
+        <in-out-key-count />
+      </el-col>
+
+      <el-col id="dev-alarm-count" :span="10" class="chart-block">
+        <div class="chart-title">设备报警数量统计</div>
+        <dev-alarm-count />
+      </el-col>
+
+      <el-col :span="7" class="chart-block">
+        <div class="chart-title">各营门出入营量统计</div>
+        <in-out-door-count />
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { getStatisticsData } from '@/api/statistics'
+import InOutToday from '@/views/ctrl/statCharts/inOutToday'
+import InOutCount from '@/views/ctrl/statCharts/inOutCount'
+import DevCount from '@/views/ctrl/statCharts/devCount'
+import InOutKeyCount from '@/views/ctrl/statCharts/inOutKeyCount'
+import DevAlarmCount from '@/views/ctrl/statCharts/devAlarmCount'
+import InOutDoorCount from '@/views/ctrl/statCharts/inOutDoorCount'
+export default {
+  name: 'CtrlIndex',
+  components: { InOutToday, DevCount, InOutCount, InOutKeyCount, DevAlarmCount, InOutDoorCount },
+  data() {
+    return {
+      statistics: {
+        todayVisitorPerson: 0,
+        totalVisitorPerson: 0,
+        currentAlarm: 0,
+        totalAlarm: 0,
+        onlineDevice: 0,
+        totalDevice: 0
+      }
+    }
+  },
+  created() {
+    this.fetchStatisticsData()
+  },
+  methods: {
+    fetchStatisticsData() {
+      getStatisticsData().then(response => {
+        if (response.code === 200) {
+          this.statistics = response.data
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .app-wrapper {
+    background-color: #e9e9e9;
+    padding-bottom: 20px;
+  }
+
+  .sub-data-block {
+    width: calc((100vw - 120px) / 6);
+    border-radius: 16px;
+    float: left;
+    margin: 10px;
+    box-shadow: 2px 2px 8px #666666;
+  }
+  .sub-title {
+    font-weight: bold;
+    text-align: center;
+    font-family: 'Microsoft YaHei';
+    color: #fff;
+    font-size: 24px;
+    padding: 10px;
+  }
+  .statis-block {
+    text-align: center;
+    margin: 20px 10px 0px 10px;
+    padding: 10px;
+    color: #fff;
+    font-weight: bold;
+    letter-spacing: 1px;
+    font-size: 24px;
+  }
+  .big-size {
+    font-size: 64px;
+  }
+
+  .chart-title {
+    font-family: 'Microsoft YaHei';
+    color: #000000;
+    font-weight: bold;
+    font-size: 20px;
+    text-align: center;
+    padding: 10px;
+  }
+  .chart-block {
+    margin-left: 20px;
+    margin-top: 20px;
+    border-radius: 16px;
+    background-color: #FFFFFF;
+    box-shadow: 2px 2px 8px #666666;
+  }
+
+  #today-visitor {
+    background-image: linear-gradient(to right, #ff8fdf, #ff01b4);
+  }
+  #total-visitor {
+    background-image: linear-gradient(to right, #9280ff, #2400ff);
+  }
+  #current-alarm {
+    background-image: linear-gradient(to right, #ff696a, #ff0101);
+  }
+  #total-alarm {
+    background-image: linear-gradient(to right, #7fbbff, #0078ff);
+  }
+  #online-device {
+    background-image: linear-gradient(to right, #72ff7e, #01a411);
+  }
+  #total-device {
+    background-image: linear-gradient(to right, #ffa800, #ce7e00);
+  }
+
+  #pass-count, #dev-alarm-count {
+    width: calc(250vw / 6 - 70px);
+  }
+</style>
diff --git a/src/views/ctrl/statCharts/devAlarmCount.vue b/src/views/ctrl/statCharts/devAlarmCount.vue
new file mode 100644
index 0000000..ff2e6c4
--- /dev/null
+++ b/src/views/ctrl/statCharts/devAlarmCount.vue
@@ -0,0 +1,111 @@
+<template>
+  <div>
+    <el-date-picker
+      v-model="timeRange"
+      :picker-options="pickerOptions"
+      type="daterange"
+      range-separator="至"
+      start-placeholder="开始日期"
+      end-placeholder="结束日期"
+      style="margin-bottom: 10px;" />
+    <ve-histogram :data="chartData" :settings="settings" height="350px" />
+  </div>
+</template>
+
+<script>
+import { formatToString, getDate, oneDayTime } from '@/utils/calendarUtil'
+import { devAlarmCount } from '@/api/statistics'
+
+const now = new Date()
+
+export default {
+  name: 'DevAlarmCount',
+  data() {
+    return {
+      params: {
+        beginDate: '',
+        endDate: ''
+      },
+      chartData: {
+        columns: ['name', 'count'],
+        rows: []
+      },
+      settings: {
+        labelMap: {
+          'name': '设备类型',
+          'count': '报警数量'
+        },
+        max: [4]
+      },
+      timeRange: [],
+      pickerOptions: {
+        shortcuts: [{
+          text: '最近七日',
+          onClick(picker) {
+            const end = now
+            const start = new Date()
+            start.setTime(start.getTime() - oneDayTime * 7)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近十日',
+          onClick(picker) {
+            const end = now
+            const start = new Date()
+            start.setTime(start.getTime() - oneDayTime * 10)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近三十日',
+          onClick(picker) {
+            const end = now
+            const start = new Date()
+            start.setTime(start.getTime() - oneDayTime * 30)
+            picker.$emit('pick', [start, end])
+          }
+        }],
+        disabledDate(time) {
+          const oneMonthLater = new Date(now.getTime() - (oneDayTime * 31))
+          return time.getTime() < oneMonthLater
+        }
+      }
+    }
+  },
+  watch: {
+    timeRange: function(newV) {
+      if (newV) {
+        this.params.beginDate = formatToString(newV[0], 'DATE')
+        this.params.endDate = formatToString(newV[1], 'DATE')
+      } else {
+        this.initTime()
+      }
+      this.fetchData()
+    }
+  },
+  created() {
+    this.initTime()
+  },
+  activated() {
+    this.fetchData()
+  },
+  methods: {
+    initTime() {
+      this.params.beginDate = getDate(-7, 'DATE')
+      this.params.endDate = getDate(1, 'DATE')
+
+      this.timeRange = [this.params.beginDate, this.params.endDate]
+    },
+    fetchData() {
+      devAlarmCount(this.params).then(response => {
+        if (response.code === 200) {
+          this.chartData.rows = response.data
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/ctrl/statCharts/devCount.vue b/src/views/ctrl/statCharts/devCount.vue
new file mode 100644
index 0000000..d3e2902
--- /dev/null
+++ b/src/views/ctrl/statCharts/devCount.vue
@@ -0,0 +1,39 @@
+<template>
+  <ve-ring :data="chartData" :settings="settings" />
+</template>
+
+<script>
+import { devCount } from '@/api/statistics'
+
+export default {
+  name: 'DevCount',
+  data() {
+    return {
+      chartData: {
+        columns: ['name', 'count'],
+        rows: []
+      },
+      settings: {
+        // legendLimit: 4
+        radius: [60, 100]
+      }
+    }
+  },
+  activated() {
+    this.fetchData()
+  },
+  methods: {
+    fetchData() {
+      devCount().then(response => {
+        if (response.code === 200) {
+          this.chartData.rows = response.data
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/ctrl/statCharts/inOutCount.vue b/src/views/ctrl/statCharts/inOutCount.vue
new file mode 100644
index 0000000..1956305
--- /dev/null
+++ b/src/views/ctrl/statCharts/inOutCount.vue
@@ -0,0 +1,193 @@
+<template>
+  <div>
+    <el-date-picker
+      v-model="timeRange"
+      :picker-options="pickerOptions"
+      type="daterange"
+      range-separator="至"
+      start-placeholder="开始日期"
+      end-placeholder="结束日期"
+      style="margin-bottom: 10px"/>
+    <ve-line :data="chartData" :settings="settings" height="350px" />
+  </div>
+</template>
+
+<script>
+import { formatToString, parseToDate, getDate, oneDayTime } from '@/utils/calendarUtil'
+import { inOutCount } from '@/api/statistics'
+
+const now = new Date()
+
+export default {
+  name: 'InOutCount',
+  data() {
+    return {
+      params: {
+        beginDate: '',
+        endDate: ''
+      },
+      chartData: {
+        columns: ['date', 'staff', 'visitor', 'car', 'visitorCar'],
+        rows: []
+      },
+      settings: {
+        labelMap: {
+          'staff': '内部人员',
+          'visitor': '来访人员',
+          'car': '内部车辆',
+          'visitorCar': '来访车辆'
+        },
+        xAxisType: 'time',
+        max: [4],
+        area: true,
+        metrics: ['staff', 'visitor', 'car', 'visitorCar'],
+        dimension: ['date']
+      },
+      timeRange: [],
+      pickerOptions: {
+        shortcuts: [{
+          text: '最近七日',
+          onClick(picker) {
+            const end = now
+            const start = new Date()
+            start.setTime(start.getTime() - oneDayTime * 7)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近十日',
+          onClick(picker) {
+            const end = now
+            const start = new Date()
+            start.setTime(start.getTime() - oneDayTime * 10)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近三十日',
+          onClick(picker) {
+            const end = now
+            const start = new Date()
+            start.setTime(start.getTime() - oneDayTime * 30)
+            picker.$emit('pick', [start, end])
+          }
+        }],
+        disabledDate(time) {
+          const oneMonthLater = new Date(now.getTime() - (oneDayTime * 31))
+          return time.getTime() < oneMonthLater
+        }
+      }
+    }
+  },
+  watch: {
+    timeRange: function(newV) {
+      if (newV) {
+        this.params.beginDate = formatToString(newV[0], 'DATE')
+        this.params.endDate = formatToString(newV[1], 'DATE')
+      } else {
+        this.initTime()
+      }
+      this.fetchData()
+    }
+  },
+  created() {
+    this.initTime()
+  },
+  activated() {
+    this.fetchData()
+  },
+  methods: {
+    initTime() {
+      this.params.beginDate = getDate(-7, 'DATE')
+      this.params.endDate = getDate(1, 'DATE')
+
+      this.timeRange = [this.params.beginDate, this.params.endDate]
+    },
+    fetchData() {
+      inOutCount(this.params).then(response => {
+        if (response.code === 200) {
+          const data = this.parseStatisticsData(response.data)
+          this.chartData.rows = data.rowDatas
+          this.chartData.max = [data.maxCount]
+        }
+      })
+    },
+    parseStatisticsData(obj) {
+      const staffList = obj.person
+      const visitorList = obj.visitorPerson
+      const carList = obj.car
+      const visitorCarList = obj.visitorCar
+
+      const rowDatas = [] // 返回的数据
+      let maxCount = 4 // 返回的最大的计数值
+
+      let start = parseToDate(this.params.beginDate, 'DATE').valueOf() // 开始日期的Date对象
+      const end = parseToDate(this.params.endDate, 'DATE').valueOf() // 结束日期的Date对象
+
+      let indexS = 0 // 内部人员索引
+      let indexV = 0 // 访客索引
+      let indexC = 0 // 内部车辆索引
+      let indexVc = 0 // 访客车辆索引
+
+      // 遍历时间
+      while (start < end) {
+        const staff = staffList[indexS]
+        const visitor = visitorList[indexV]
+        const car = carList[indexC]
+        const visitorCar = visitorCarList[indexVc]
+
+        let staffCount = 0
+        let visitorCount = 0
+        let carCount = 0
+        let visitorCarCount = 0
+
+        const date = formatToString(start, 'DATE')
+
+        if (typeof staff !== 'undefined') {
+          if (staff.date === date) {
+            staffCount = staff.count
+            indexS++
+          }
+        }
+
+        if (typeof visitor !== 'undefined') {
+          if (visitor.date === date) {
+            visitorCount = visitor.count
+            indexV++
+          }
+        }
+
+        if (typeof car !== 'undefined') {
+          if (car.date === date) {
+            carCount = car.count
+            indexC++
+          }
+        }
+
+        if (typeof visitorCar !== 'undefined') {
+          if (visitorCar.date === date) {
+            visitorCarCount = car.count
+            indexVc++
+          }
+        }
+
+        if (staffCount + visitorCount + carCount + visitorCarCount > 0) {
+          rowDatas.push({ date: date, staff: staffCount, visitor: visitorCount, car: carCount, visitorCar: visitorCarCount })
+        }
+        start += oneDayTime
+      }
+
+      // 设置最大值用以不显示小数
+      maxCount = Math.ceil(maxCount * 1.1)
+
+      // 返回生成好的图表数据
+      return {
+        rowDatas: rowDatas,
+        maxCount: maxCount
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

diff --git a/src/api/statistics.js b/src/api/statistics.js
index e20b4c0..741fbb2 100644
--- a/src/api/statistics.js
+++ b/src/api/statistics.js
@@ -55,3 +55,62 @@
     params
   })
 }
+
+// 综合控制室数量统计
+export function getStatisticsData() {
+  return request({
+    url: '/overview/statistics',
+    method: 'get'
+  })
+}
+
+// 今日进出营情况占比
+export function inOutToday() {
+  return request({
+    url: '/overview/todayPassPercentage',
+    method: 'get'
+  })
+}
+
+// 各类型设备安装数量
+export function devCount() {
+  return request({
+    url: '/overview/devicePercentage',
+    method: 'get'
+  })
+}
+
+// 进出营数量统计
+export function inOutCount(params) {
+  return request({
+    url: '/overview/passCountByType',
+    method: 'get',
+    params
+  })
+}
+
+// 各重点区域出入情况
+export function inOutKeyCount() {
+  return request({
+    url: '/overview/keyareaPassPercentage',
+    method: 'get'
+  })
+}
+
+// 各类型报警数量统计
+export function devAlarmCount(params) {
+  return request({
+    url: '/overview/alarmCountByType',
+    method: 'get',
+    params
+  })
+}
+
+// 各营门出入营量统计
+export function inOutDoorCount(params) {
+  return request({
+    url: '/overview/passCountByArea',
+    method: 'get',
+    params
+  })
+}
diff --git a/src/router/index.js b/src/router/index.js
index 9435997..823269b 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -10,6 +10,7 @@
 import Layout from '../views/layout/Layout'
 import { systemRouters } from './modules/system'
 import { doorSysRouters } from './modules/doorSys'
+import { ctrlSysRouters } from './modules/ctrlSys'
 
 /**
 * hidden: true                   if `hidden:true` will not show in the sidebar(default is false)
@@ -88,5 +89,6 @@
 export const asyncRouterMap = [
   ...systemRouters,
   ...doorSysRouters,
+  ...ctrlSysRouters,
   { path: '*', redirect: '/404', hidden: true, meta: {}}
 ]
diff --git a/src/router/modules/ctrlSys.js b/src/router/modules/ctrlSys.js
new file mode 100644
index 0000000..0dce4da
--- /dev/null
+++ b/src/router/modules/ctrlSys.js
@@ -0,0 +1,35 @@
+/* Layout */
+import SinglePageLayout from '@/views/layout/SinglePageLayout'
+export const ctrlSysRouters = [
+  {
+    path: '/ctrl',
+    name: 'ctrl',
+    redirect: '/ctrl',
+    hidden: true,
+    meta: {
+      title: '综合控制室子系统',
+      permission: ['/ctrl'],
+      isSys: true
+    }
+  },
+  {
+    path: '/ctrl/index1',
+    component: SinglePageLayout,
+    name: 'Ctrl1',
+    alwaysShow: false,
+    meta: {
+      title: '',
+      icon: '', // 图标
+      permission: ['/ctrl'], // 权限名称
+      sys: '/ctrl'
+    },
+    children: [
+      {
+        path: '/ctrl/index',
+        name: 'CtrlIndex',
+        component: () => import('@/views/ctrl/index'),
+        meta: { title: '综合控制室首页', icon: '', permission: ['/ctrl/index'], keepAlive: true }
+      }
+    ]
+  }
+]
diff --git a/src/views/ctrl/index.vue b/src/views/ctrl/index.vue
new file mode 100644
index 0000000..93efb6f
--- /dev/null
+++ b/src/views/ctrl/index.vue
@@ -0,0 +1,193 @@
+<template>
+  <div class="app-wrapper">
+    <el-row :gutter="20">
+      <el-col id="today-visitor" class="sub-data-block" style="margin-left: 20px;">
+        <div class="sub-title">今日访客</div>
+        <div class="statis-block">
+          <span class="big-size" v-text="statistics.todayVisitorPerson"/><span>人</span>
+        </div>
+      </el-col>
+
+      <el-col id="total-visitor" class="sub-data-block">
+        <div class="sub-title">累计访客</div>
+        <div class="statis-block">
+          <span class="big-size" v-text="statistics.totalVisitorPerson"/><span>人</span>
+        </div>
+      </el-col>
+
+      <el-col id="current-alarm" class="sub-data-block">
+        <div class="sub-title">当前报警</div>
+        <div class="statis-block">
+          <span class="big-size" v-text="statistics.currentAlarm"/><span>台</span>
+        </div>
+      </el-col>
+
+      <el-col id="total-alarm" class="sub-data-block">
+        <div class="sub-title">累计报警</div>
+        <div class="statis-block">
+          <span class="big-size" v-text="statistics.totalAlarm"/><span>次</span>
+        </div>
+      </el-col>
+
+      <el-col id="online-device" class="sub-data-block">
+        <div class="sub-title">在线设备</div>
+        <div class="statis-block">
+          <span class="big-size" v-text="statistics.onlineDevice"/><span>台</span>
+        </div>
+      </el-col>
+
+      <el-col id="total-device" class="sub-data-block">
+        <div class="sub-title">设备总量</div>
+        <div class="statis-block">
+          <span class="big-size" v-text="statistics.totalDevice"/><span>台</span>
+        </div>
+      </el-col>
+    </el-row>
+
+    <el-row :gutter="20">
+      <el-col :span="7" class="chart-block">
+        <div class="chart-title">今日进出营情况</div>
+        <in-out-today />
+      </el-col>
+
+      <el-col :span="7" class="chart-block">
+        <div class="chart-title">各类型设备安装数量</div>
+        <dev-count />
+      </el-col>
+
+      <el-col id="pass-count" :span="10" class="chart-block">
+        <div class="chart-title">进出营数量统计</div>
+        <in-out-count />
+      </el-col>
+    </el-row>
+
+    <el-row :gutter="20" style="margin-bottom: 40px;">
+      <el-col :span="7" class="chart-block">
+        <div class="chart-title">各重点区域出入情况</div>
+        <in-out-key-count />
+      </el-col>
+
+      <el-col id="dev-alarm-count" :span="10" class="chart-block">
+        <div class="chart-title">设备报警数量统计</div>
+        <dev-alarm-count />
+      </el-col>
+
+      <el-col :span="7" class="chart-block">
+        <div class="chart-title">各营门出入营量统计</div>
+        <in-out-door-count />
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { getStatisticsData } from '@/api/statistics'
+import InOutToday from '@/views/ctrl/statCharts/inOutToday'
+import InOutCount from '@/views/ctrl/statCharts/inOutCount'
+import DevCount from '@/views/ctrl/statCharts/devCount'
+import InOutKeyCount from '@/views/ctrl/statCharts/inOutKeyCount'
+import DevAlarmCount from '@/views/ctrl/statCharts/devAlarmCount'
+import InOutDoorCount from '@/views/ctrl/statCharts/inOutDoorCount'
+export default {
+  name: 'CtrlIndex',
+  components: { InOutToday, DevCount, InOutCount, InOutKeyCount, DevAlarmCount, InOutDoorCount },
+  data() {
+    return {
+      statistics: {
+        todayVisitorPerson: 0,
+        totalVisitorPerson: 0,
+        currentAlarm: 0,
+        totalAlarm: 0,
+        onlineDevice: 0,
+        totalDevice: 0
+      }
+    }
+  },
+  created() {
+    this.fetchStatisticsData()
+  },
+  methods: {
+    fetchStatisticsData() {
+      getStatisticsData().then(response => {
+        if (response.code === 200) {
+          this.statistics = response.data
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .app-wrapper {
+    background-color: #e9e9e9;
+    padding-bottom: 20px;
+  }
+
+  .sub-data-block {
+    width: calc((100vw - 120px) / 6);
+    border-radius: 16px;
+    float: left;
+    margin: 10px;
+    box-shadow: 2px 2px 8px #666666;
+  }
+  .sub-title {
+    font-weight: bold;
+    text-align: center;
+    font-family: 'Microsoft YaHei';
+    color: #fff;
+    font-size: 24px;
+    padding: 10px;
+  }
+  .statis-block {
+    text-align: center;
+    margin: 20px 10px 0px 10px;
+    padding: 10px;
+    color: #fff;
+    font-weight: bold;
+    letter-spacing: 1px;
+    font-size: 24px;
+  }
+  .big-size {
+    font-size: 64px;
+  }
+
+  .chart-title {
+    font-family: 'Microsoft YaHei';
+    color: #000000;
+    font-weight: bold;
+    font-size: 20px;
+    text-align: center;
+    padding: 10px;
+  }
+  .chart-block {
+    margin-left: 20px;
+    margin-top: 20px;
+    border-radius: 16px;
+    background-color: #FFFFFF;
+    box-shadow: 2px 2px 8px #666666;
+  }
+
+  #today-visitor {
+    background-image: linear-gradient(to right, #ff8fdf, #ff01b4);
+  }
+  #total-visitor {
+    background-image: linear-gradient(to right, #9280ff, #2400ff);
+  }
+  #current-alarm {
+    background-image: linear-gradient(to right, #ff696a, #ff0101);
+  }
+  #total-alarm {
+    background-image: linear-gradient(to right, #7fbbff, #0078ff);
+  }
+  #online-device {
+    background-image: linear-gradient(to right, #72ff7e, #01a411);
+  }
+  #total-device {
+    background-image: linear-gradient(to right, #ffa800, #ce7e00);
+  }
+
+  #pass-count, #dev-alarm-count {
+    width: calc(250vw / 6 - 70px);
+  }
+</style>
diff --git a/src/views/ctrl/statCharts/devAlarmCount.vue b/src/views/ctrl/statCharts/devAlarmCount.vue
new file mode 100644
index 0000000..ff2e6c4
--- /dev/null
+++ b/src/views/ctrl/statCharts/devAlarmCount.vue
@@ -0,0 +1,111 @@
+<template>
+  <div>
+    <el-date-picker
+      v-model="timeRange"
+      :picker-options="pickerOptions"
+      type="daterange"
+      range-separator="至"
+      start-placeholder="开始日期"
+      end-placeholder="结束日期"
+      style="margin-bottom: 10px;" />
+    <ve-histogram :data="chartData" :settings="settings" height="350px" />
+  </div>
+</template>
+
+<script>
+import { formatToString, getDate, oneDayTime } from '@/utils/calendarUtil'
+import { devAlarmCount } from '@/api/statistics'
+
+const now = new Date()
+
+export default {
+  name: 'DevAlarmCount',
+  data() {
+    return {
+      params: {
+        beginDate: '',
+        endDate: ''
+      },
+      chartData: {
+        columns: ['name', 'count'],
+        rows: []
+      },
+      settings: {
+        labelMap: {
+          'name': '设备类型',
+          'count': '报警数量'
+        },
+        max: [4]
+      },
+      timeRange: [],
+      pickerOptions: {
+        shortcuts: [{
+          text: '最近七日',
+          onClick(picker) {
+            const end = now
+            const start = new Date()
+            start.setTime(start.getTime() - oneDayTime * 7)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近十日',
+          onClick(picker) {
+            const end = now
+            const start = new Date()
+            start.setTime(start.getTime() - oneDayTime * 10)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近三十日',
+          onClick(picker) {
+            const end = now
+            const start = new Date()
+            start.setTime(start.getTime() - oneDayTime * 30)
+            picker.$emit('pick', [start, end])
+          }
+        }],
+        disabledDate(time) {
+          const oneMonthLater = new Date(now.getTime() - (oneDayTime * 31))
+          return time.getTime() < oneMonthLater
+        }
+      }
+    }
+  },
+  watch: {
+    timeRange: function(newV) {
+      if (newV) {
+        this.params.beginDate = formatToString(newV[0], 'DATE')
+        this.params.endDate = formatToString(newV[1], 'DATE')
+      } else {
+        this.initTime()
+      }
+      this.fetchData()
+    }
+  },
+  created() {
+    this.initTime()
+  },
+  activated() {
+    this.fetchData()
+  },
+  methods: {
+    initTime() {
+      this.params.beginDate = getDate(-7, 'DATE')
+      this.params.endDate = getDate(1, 'DATE')
+
+      this.timeRange = [this.params.beginDate, this.params.endDate]
+    },
+    fetchData() {
+      devAlarmCount(this.params).then(response => {
+        if (response.code === 200) {
+          this.chartData.rows = response.data
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/ctrl/statCharts/devCount.vue b/src/views/ctrl/statCharts/devCount.vue
new file mode 100644
index 0000000..d3e2902
--- /dev/null
+++ b/src/views/ctrl/statCharts/devCount.vue
@@ -0,0 +1,39 @@
+<template>
+  <ve-ring :data="chartData" :settings="settings" />
+</template>
+
+<script>
+import { devCount } from '@/api/statistics'
+
+export default {
+  name: 'DevCount',
+  data() {
+    return {
+      chartData: {
+        columns: ['name', 'count'],
+        rows: []
+      },
+      settings: {
+        // legendLimit: 4
+        radius: [60, 100]
+      }
+    }
+  },
+  activated() {
+    this.fetchData()
+  },
+  methods: {
+    fetchData() {
+      devCount().then(response => {
+        if (response.code === 200) {
+          this.chartData.rows = response.data
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/ctrl/statCharts/inOutCount.vue b/src/views/ctrl/statCharts/inOutCount.vue
new file mode 100644
index 0000000..1956305
--- /dev/null
+++ b/src/views/ctrl/statCharts/inOutCount.vue
@@ -0,0 +1,193 @@
+<template>
+  <div>
+    <el-date-picker
+      v-model="timeRange"
+      :picker-options="pickerOptions"
+      type="daterange"
+      range-separator="至"
+      start-placeholder="开始日期"
+      end-placeholder="结束日期"
+      style="margin-bottom: 10px"/>
+    <ve-line :data="chartData" :settings="settings" height="350px" />
+  </div>
+</template>
+
+<script>
+import { formatToString, parseToDate, getDate, oneDayTime } from '@/utils/calendarUtil'
+import { inOutCount } from '@/api/statistics'
+
+const now = new Date()
+
+export default {
+  name: 'InOutCount',
+  data() {
+    return {
+      params: {
+        beginDate: '',
+        endDate: ''
+      },
+      chartData: {
+        columns: ['date', 'staff', 'visitor', 'car', 'visitorCar'],
+        rows: []
+      },
+      settings: {
+        labelMap: {
+          'staff': '内部人员',
+          'visitor': '来访人员',
+          'car': '内部车辆',
+          'visitorCar': '来访车辆'
+        },
+        xAxisType: 'time',
+        max: [4],
+        area: true,
+        metrics: ['staff', 'visitor', 'car', 'visitorCar'],
+        dimension: ['date']
+      },
+      timeRange: [],
+      pickerOptions: {
+        shortcuts: [{
+          text: '最近七日',
+          onClick(picker) {
+            const end = now
+            const start = new Date()
+            start.setTime(start.getTime() - oneDayTime * 7)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近十日',
+          onClick(picker) {
+            const end = now
+            const start = new Date()
+            start.setTime(start.getTime() - oneDayTime * 10)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近三十日',
+          onClick(picker) {
+            const end = now
+            const start = new Date()
+            start.setTime(start.getTime() - oneDayTime * 30)
+            picker.$emit('pick', [start, end])
+          }
+        }],
+        disabledDate(time) {
+          const oneMonthLater = new Date(now.getTime() - (oneDayTime * 31))
+          return time.getTime() < oneMonthLater
+        }
+      }
+    }
+  },
+  watch: {
+    timeRange: function(newV) {
+      if (newV) {
+        this.params.beginDate = formatToString(newV[0], 'DATE')
+        this.params.endDate = formatToString(newV[1], 'DATE')
+      } else {
+        this.initTime()
+      }
+      this.fetchData()
+    }
+  },
+  created() {
+    this.initTime()
+  },
+  activated() {
+    this.fetchData()
+  },
+  methods: {
+    initTime() {
+      this.params.beginDate = getDate(-7, 'DATE')
+      this.params.endDate = getDate(1, 'DATE')
+
+      this.timeRange = [this.params.beginDate, this.params.endDate]
+    },
+    fetchData() {
+      inOutCount(this.params).then(response => {
+        if (response.code === 200) {
+          const data = this.parseStatisticsData(response.data)
+          this.chartData.rows = data.rowDatas
+          this.chartData.max = [data.maxCount]
+        }
+      })
+    },
+    parseStatisticsData(obj) {
+      const staffList = obj.person
+      const visitorList = obj.visitorPerson
+      const carList = obj.car
+      const visitorCarList = obj.visitorCar
+
+      const rowDatas = [] // 返回的数据
+      let maxCount = 4 // 返回的最大的计数值
+
+      let start = parseToDate(this.params.beginDate, 'DATE').valueOf() // 开始日期的Date对象
+      const end = parseToDate(this.params.endDate, 'DATE').valueOf() // 结束日期的Date对象
+
+      let indexS = 0 // 内部人员索引
+      let indexV = 0 // 访客索引
+      let indexC = 0 // 内部车辆索引
+      let indexVc = 0 // 访客车辆索引
+
+      // 遍历时间
+      while (start < end) {
+        const staff = staffList[indexS]
+        const visitor = visitorList[indexV]
+        const car = carList[indexC]
+        const visitorCar = visitorCarList[indexVc]
+
+        let staffCount = 0
+        let visitorCount = 0
+        let carCount = 0
+        let visitorCarCount = 0
+
+        const date = formatToString(start, 'DATE')
+
+        if (typeof staff !== 'undefined') {
+          if (staff.date === date) {
+            staffCount = staff.count
+            indexS++
+          }
+        }
+
+        if (typeof visitor !== 'undefined') {
+          if (visitor.date === date) {
+            visitorCount = visitor.count
+            indexV++
+          }
+        }
+
+        if (typeof car !== 'undefined') {
+          if (car.date === date) {
+            carCount = car.count
+            indexC++
+          }
+        }
+
+        if (typeof visitorCar !== 'undefined') {
+          if (visitorCar.date === date) {
+            visitorCarCount = car.count
+            indexVc++
+          }
+        }
+
+        if (staffCount + visitorCount + carCount + visitorCarCount > 0) {
+          rowDatas.push({ date: date, staff: staffCount, visitor: visitorCount, car: carCount, visitorCar: visitorCarCount })
+        }
+        start += oneDayTime
+      }
+
+      // 设置最大值用以不显示小数
+      maxCount = Math.ceil(maxCount * 1.1)
+
+      // 返回生成好的图表数据
+      return {
+        rowDatas: rowDatas,
+        maxCount: maxCount
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/ctrl/statCharts/inOutDoorCount.vue b/src/views/ctrl/statCharts/inOutDoorCount.vue
new file mode 100644
index 0000000..1d73651
--- /dev/null
+++ b/src/views/ctrl/statCharts/inOutDoorCount.vue
@@ -0,0 +1,187 @@
+<template>
+  <div>
+    <el-date-picker
+      v-model="timeRange"
+      :picker-options="pickerOptions"
+      type="daterange"
+      range-separator="至"
+      start-placeholder="开始日期"
+      end-placeholder="结束日期"
+      style="margin-bottom: 10px;" />
+    <ve-histogram :data="chartData" :settings="settings" height="350px" />
+  </div>
+</template>
+
+<script>
+import { formatToString, getDate, oneDayTime } from '@/utils/calendarUtil'
+import { inOutDoorCount } from '@/api/statistics'
+
+const now = new Date()
+
+export default {
+  name: 'InOutDoorCount',
+  data() {
+    return {
+      params: {
+        beginDate: '',
+        endDate: ''
+      },
+      chartData: {
+        columns: ['name', 'person', 'car'],
+        rows: []
+      },
+      settings: {
+        labelMap: {
+          'person': '人员',
+          'car': '车辆'
+        },
+        max: [4],
+        metrics: ['person', 'car'],
+        dimension: ['name']
+      },
+      timeRange: [],
+      pickerOptions: {
+        shortcuts: [{
+          text: '最近七日',
+          onClick(picker) {
+            const end = now
+            const start = new Date()
+            start.setTime(start.getTime() - oneDayTime * 7)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近十日',
+          onClick(picker) {
+            const end = now
+            const start = new Date()
+            start.setTime(start.getTime() - oneDayTime * 10)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近三十日',
+          onClick(picker) {
+            const end = now
+            const start = new Date()
+            start.setTime(start.getTime() - oneDayTime * 30)
+            picker.$emit('pick', [start, end])
+          }
+        }],
+        disabledDate(time) {
+          const oneMonthLater = new Date(now.getTime() - (oneDayTime * 31))
+          return time.getTime() < oneMonthLater
+        }
+      }
+    }
+  },
+  watch: {
+    timeRange: function(newV) {
+      if (newV) {
+        this.params.beginDate = formatToString(newV[0], 'DATE')
+        this.params.endDate = formatToString(newV[1], 'DATE')
+      } else {
+        this.initTime()
+      }
+      this.fetchData()
+    }
+  },
+  created() {
+    this.initTime()
+  },
+  activated() {
+    this.fetchData()
+  },
+  methods: {
+    initTime() {
+      this.params.beginDate = getDate(-7, 'DATE')
+      this.params.endDate = getDate(1, 'DATE')
+
+      this.timeRange = [this.params.beginDate, this.params.endDate]
+    },
+    fetchData() {
+      inOutDoorCount(this.params).then(response => {
+        if (response.code === 200) {
+          const data = this.parseStatisticsData(response.data)
+          this.chartData.rows = data.rowDatas
+          this.chartData.max = [data.maxCount]
+        }
+      })
+    },
+    parseStatisticsData(obj) {
+      const personList = obj.person
+      const carList = obj.car
+
+      const rowDatas = [] // 返回的数据
+      let maxCount = 4 // 返回的最大的计数值
+      let indexS = 0
+      let indexV = 0
+      // 遍历内部人员（车辆）和来访人员（车辆），生成图表所需要的数据格式
+      while (indexS < personList.length || indexV < carList.length) {
+        let person = {}
+        let car = {}
+
+        // 获取内部人员（车辆）对象
+        if (indexS < personList.length) {
+          person = personList[indexS]
+        } else {
+          person = {}
+        }
+
+        // 获取来访人员（车辆）对象
+        if (indexV < carList.length) {
+          car = carList[indexV]
+        } else {
+          car = {}
+        }
+
+        // 如果内部人员（车辆）的队列已经取完则直接添加来访人员（车辆）
+        if (typeof person.name === 'undefined') {
+          rowDatas.push({ name: person.name, car: car.count })
+          indexV++
+          maxCount = Math.max(maxCount, car.count)
+          continue
+        }
+
+        // 如果来访人员（车辆）的队列已经取完则直接添加内部人员（车辆）
+        if (typeof person.name === 'undefined') {
+          rowDatas.push({ name: person.name, person: person.count })
+          indexS++
+          maxCount = Math.max(maxCount, person.count)
+          continue
+        }
+
+        // 队列都还没有处理完成则比较日期的大小
+        const carVal = car.name
+        const personVal = person.name
+        if (personVal < carVal) {
+          // 人员列表的日期比较小
+          rowDatas.push({ name: person.name, person: person.count })
+          indexS++
+          maxCount = Math.max(maxCount, person.count)
+        } else if (personVal > carVal) {
+          // 访客列表的日期比较小
+          rowDatas.push({ name: car.name, car: car.count })
+          indexV++
+          maxCount = Math.max(maxCount, car.count)
+        } else {
+          rowDatas.push({ name: person.name, person: person.count, car: car.count })
+          indexS++
+          indexV++
+          maxCount = Math.max(maxCount, person.count, car.count)
+        }
+      }
+      // 设置最大值用以不显示小数
+      maxCount = Math.ceil(maxCount * 1.1)
+
+      // 返回生成好的图表数据
+      return {
+        rowDatas: rowDatas,
+        maxCount: maxCount
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

diff --git a/src/api/statistics.js b/src/api/statistics.js
index e20b4c0..741fbb2 100644
--- a/src/api/statistics.js
+++ b/src/api/statistics.js
@@ -55,3 +55,62 @@
     params
   })
 }
+
+// 综合控制室数量统计
+export function getStatisticsData() {
+  return request({
+    url: '/overview/statistics',
+    method: 'get'
+  })
+}
+
+// 今日进出营情况占比
+export function inOutToday() {
+  return request({
+    url: '/overview/todayPassPercentage',
+    method: 'get'
+  })
+}
+
+// 各类型设备安装数量
+export function devCount() {
+  return request({
+    url: '/overview/devicePercentage',
+    method: 'get'
+  })
+}
+
+// 进出营数量统计
+export function inOutCount(params) {
+  return request({
+    url: '/overview/passCountByType',
+    method: 'get',
+    params
+  })
+}
+
+// 各重点区域出入情况
+export function inOutKeyCount() {
+  return request({
+    url: '/overview/keyareaPassPercentage',
+    method: 'get'
+  })
+}
+
+// 各类型报警数量统计
+export function devAlarmCount(params) {
+  return request({
+    url: '/overview/alarmCountByType',
+    method: 'get',
+    params
+  })
+}
+
+// 各营门出入营量统计
+export function inOutDoorCount(params) {
+  return request({
+    url: '/overview/passCountByArea',
+    method: 'get',
+    params
+  })
+}
diff --git a/src/router/index.js b/src/router/index.js
index 9435997..823269b 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -10,6 +10,7 @@
 import Layout from '../views/layout/Layout'
 import { systemRouters } from './modules/system'
 import { doorSysRouters } from './modules/doorSys'
+import { ctrlSysRouters } from './modules/ctrlSys'
 
 /**
 * hidden: true                   if `hidden:true` will not show in the sidebar(default is false)
@@ -88,5 +89,6 @@
 export const asyncRouterMap = [
   ...systemRouters,
   ...doorSysRouters,
+  ...ctrlSysRouters,
   { path: '*', redirect: '/404', hidden: true, meta: {}}
 ]
diff --git a/src/router/modules/ctrlSys.js b/src/router/modules/ctrlSys.js
new file mode 100644
index 0000000..0dce4da
--- /dev/null
+++ b/src/router/modules/ctrlSys.js
@@ -0,0 +1,35 @@
+/* Layout */
+import SinglePageLayout from '@/views/layout/SinglePageLayout'
+export const ctrlSysRouters = [
+  {
+    path: '/ctrl',
+    name: 'ctrl',
+    redirect: '/ctrl',
+    hidden: true,
+    meta: {
+      title: '综合控制室子系统',
+      permission: ['/ctrl'],
+      isSys: true
+    }
+  },
+  {
+    path: '/ctrl/index1',
+    component: SinglePageLayout,
+    name: 'Ctrl1',
+    alwaysShow: false,
+    meta: {
+      title: '',
+      icon: '', // 图标
+      permission: ['/ctrl'], // 权限名称
+      sys: '/ctrl'
+    },
+    children: [
+      {
+        path: '/ctrl/index',
+        name: 'CtrlIndex',
+        component: () => import('@/views/ctrl/index'),
+        meta: { title: '综合控制室首页', icon: '', permission: ['/ctrl/index'], keepAlive: true }
+      }
+    ]
+  }
+]
diff --git a/src/views/ctrl/index.vue b/src/views/ctrl/index.vue
new file mode 100644
index 0000000..93efb6f
--- /dev/null
+++ b/src/views/ctrl/index.vue
@@ -0,0 +1,193 @@
+<template>
+  <div class="app-wrapper">
+    <el-row :gutter="20">
+      <el-col id="today-visitor" class="sub-data-block" style="margin-left: 20px;">
+        <div class="sub-title">今日访客</div>
+        <div class="statis-block">
+          <span class="big-size" v-text="statistics.todayVisitorPerson"/><span>人</span>
+        </div>
+      </el-col>
+
+      <el-col id="total-visitor" class="sub-data-block">
+        <div class="sub-title">累计访客</div>
+        <div class="statis-block">
+          <span class="big-size" v-text="statistics.totalVisitorPerson"/><span>人</span>
+        </div>
+      </el-col>
+
+      <el-col id="current-alarm" class="sub-data-block">
+        <div class="sub-title">当前报警</div>
+        <div class="statis-block">
+          <span class="big-size" v-text="statistics.currentAlarm"/><span>台</span>
+        </div>
+      </el-col>
+
+      <el-col id="total-alarm" class="sub-data-block">
+        <div class="sub-title">累计报警</div>
+        <div class="statis-block">
+          <span class="big-size" v-text="statistics.totalAlarm"/><span>次</span>
+        </div>
+      </el-col>
+
+      <el-col id="online-device" class="sub-data-block">
+        <div class="sub-title">在线设备</div>
+        <div class="statis-block">
+          <span class="big-size" v-text="statistics.onlineDevice"/><span>台</span>
+        </div>
+      </el-col>
+
+      <el-col id="total-device" class="sub-data-block">
+        <div class="sub-title">设备总量</div>
+        <div class="statis-block">
+          <span class="big-size" v-text="statistics.totalDevice"/><span>台</span>
+        </div>
+      </el-col>
+    </el-row>
+
+    <el-row :gutter="20">
+      <el-col :span="7" class="chart-block">
+        <div class="chart-title">今日进出营情况</div>
+        <in-out-today />
+      </el-col>
+
+      <el-col :span="7" class="chart-block">
+        <div class="chart-title">各类型设备安装数量</div>
+        <dev-count />
+      </el-col>
+
+      <el-col id="pass-count" :span="10" class="chart-block">
+        <div class="chart-title">进出营数量统计</div>
+        <in-out-count />
+      </el-col>
+    </el-row>
+
+    <el-row :gutter="20" style="margin-bottom: 40px;">
+      <el-col :span="7" class="chart-block">
+        <div class="chart-title">各重点区域出入情况</div>
+        <in-out-key-count />
+      </el-col>
+
+      <el-col id="dev-alarm-count" :span="10" class="chart-block">
+        <div class="chart-title">设备报警数量统计</div>
+        <dev-alarm-count />
+      </el-col>
+
+      <el-col :span="7" class="chart-block">
+        <div class="chart-title">各营门出入营量统计</div>
+        <in-out-door-count />
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { getStatisticsData } from '@/api/statistics'
+import InOutToday from '@/views/ctrl/statCharts/inOutToday'
+import InOutCount from '@/views/ctrl/statCharts/inOutCount'
+import DevCount from '@/views/ctrl/statCharts/devCount'
+import InOutKeyCount from '@/views/ctrl/statCharts/inOutKeyCount'
+import DevAlarmCount from '@/views/ctrl/statCharts/devAlarmCount'
+import InOutDoorCount from '@/views/ctrl/statCharts/inOutDoorCount'
+export default {
+  name: 'CtrlIndex',
+  components: { InOutToday, DevCount, InOutCount, InOutKeyCount, DevAlarmCount, InOutDoorCount },
+  data() {
+    return {
+      statistics: {
+        todayVisitorPerson: 0,
+        totalVisitorPerson: 0,
+        currentAlarm: 0,
+        totalAlarm: 0,
+        onlineDevice: 0,
+        totalDevice: 0
+      }
+    }
+  },
+  created() {
+    this.fetchStatisticsData()
+  },
+  methods: {
+    fetchStatisticsData() {
+      getStatisticsData().then(response => {
+        if (response.code === 200) {
+          this.statistics = response.data
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .app-wrapper {
+    background-color: #e9e9e9;
+    padding-bottom: 20px;
+  }
+
+  .sub-data-block {
+    width: calc((100vw - 120px) / 6);
+    border-radius: 16px;
+    float: left;
+    margin: 10px;
+    box-shadow: 2px 2px 8px #666666;
+  }
+  .sub-title {
+    font-weight: bold;
+    text-align: center;
+    font-family: 'Microsoft YaHei';
+    color: #fff;
+    font-size: 24px;
+    padding: 10px;
+  }
+  .statis-block {
+    text-align: center;
+    margin: 20px 10px 0px 10px;
+    padding: 10px;
+    color: #fff;
+    font-weight: bold;
+    letter-spacing: 1px;
+    font-size: 24px;
+  }
+  .big-size {
+    font-size: 64px;
+  }
+
+  .chart-title {
+    font-family: 'Microsoft YaHei';
+    color: #000000;
+    font-weight: bold;
+    font-size: 20px;
+    text-align: center;
+    padding: 10px;
+  }
+  .chart-block {
+    margin-left: 20px;
+    margin-top: 20px;
+    border-radius: 16px;
+    background-color: #FFFFFF;
+    box-shadow: 2px 2px 8px #666666;
+  }
+
+  #today-visitor {
+    background-image: linear-gradient(to right, #ff8fdf, #ff01b4);
+  }
+  #total-visitor {
+    background-image: linear-gradient(to right, #9280ff, #2400ff);
+  }
+  #current-alarm {
+    background-image: linear-gradient(to right, #ff696a, #ff0101);
+  }
+  #total-alarm {
+    background-image: linear-gradient(to right, #7fbbff, #0078ff);
+  }
+  #online-device {
+    background-image: linear-gradient(to right, #72ff7e, #01a411);
+  }
+  #total-device {
+    background-image: linear-gradient(to right, #ffa800, #ce7e00);
+  }
+
+  #pass-count, #dev-alarm-count {
+    width: calc(250vw / 6 - 70px);
+  }
+</style>
diff --git a/src/views/ctrl/statCharts/devAlarmCount.vue b/src/views/ctrl/statCharts/devAlarmCount.vue
new file mode 100644
index 0000000..ff2e6c4
--- /dev/null
+++ b/src/views/ctrl/statCharts/devAlarmCount.vue
@@ -0,0 +1,111 @@
+<template>
+  <div>
+    <el-date-picker
+      v-model="timeRange"
+      :picker-options="pickerOptions"
+      type="daterange"
+      range-separator="至"
+      start-placeholder="开始日期"
+      end-placeholder="结束日期"
+      style="margin-bottom: 10px;" />
+    <ve-histogram :data="chartData" :settings="settings" height="350px" />
+  </div>
+</template>
+
+<script>
+import { formatToString, getDate, oneDayTime } from '@/utils/calendarUtil'
+import { devAlarmCount } from '@/api/statistics'
+
+const now = new Date()
+
+export default {
+  name: 'DevAlarmCount',
+  data() {
+    return {
+      params: {
+        beginDate: '',
+        endDate: ''
+      },
+      chartData: {
+        columns: ['name', 'count'],
+        rows: []
+      },
+      settings: {
+        labelMap: {
+          'name': '设备类型',
+          'count': '报警数量'
+        },
+        max: [4]
+      },
+      timeRange: [],
+      pickerOptions: {
+        shortcuts: [{
+          text: '最近七日',
+          onClick(picker) {
+            const end = now
+            const start = new Date()
+            start.setTime(start.getTime() - oneDayTime * 7)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近十日',
+          onClick(picker) {
+            const end = now
+            const start = new Date()
+            start.setTime(start.getTime() - oneDayTime * 10)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近三十日',
+          onClick(picker) {
+            const end = now
+            const start = new Date()
+            start.setTime(start.getTime() - oneDayTime * 30)
+            picker.$emit('pick', [start, end])
+          }
+        }],
+        disabledDate(time) {
+          const oneMonthLater = new Date(now.getTime() - (oneDayTime * 31))
+          return time.getTime() < oneMonthLater
+        }
+      }
+    }
+  },
+  watch: {
+    timeRange: function(newV) {
+      if (newV) {
+        this.params.beginDate = formatToString(newV[0], 'DATE')
+        this.params.endDate = formatToString(newV[1], 'DATE')
+      } else {
+        this.initTime()
+      }
+      this.fetchData()
+    }
+  },
+  created() {
+    this.initTime()
+  },
+  activated() {
+    this.fetchData()
+  },
+  methods: {
+    initTime() {
+      this.params.beginDate = getDate(-7, 'DATE')
+      this.params.endDate = getDate(1, 'DATE')
+
+      this.timeRange = [this.params.beginDate, this.params.endDate]
+    },
+    fetchData() {
+      devAlarmCount(this.params).then(response => {
+        if (response.code === 200) {
+          this.chartData.rows = response.data
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/ctrl/statCharts/devCount.vue b/src/views/ctrl/statCharts/devCount.vue
new file mode 100644
index 0000000..d3e2902
--- /dev/null
+++ b/src/views/ctrl/statCharts/devCount.vue
@@ -0,0 +1,39 @@
+<template>
+  <ve-ring :data="chartData" :settings="settings" />
+</template>
+
+<script>
+import { devCount } from '@/api/statistics'
+
+export default {
+  name: 'DevCount',
+  data() {
+    return {
+      chartData: {
+        columns: ['name', 'count'],
+        rows: []
+      },
+      settings: {
+        // legendLimit: 4
+        radius: [60, 100]
+      }
+    }
+  },
+  activated() {
+    this.fetchData()
+  },
+  methods: {
+    fetchData() {
+      devCount().then(response => {
+        if (response.code === 200) {
+          this.chartData.rows = response.data
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/ctrl/statCharts/inOutCount.vue b/src/views/ctrl/statCharts/inOutCount.vue
new file mode 100644
index 0000000..1956305
--- /dev/null
+++ b/src/views/ctrl/statCharts/inOutCount.vue
@@ -0,0 +1,193 @@
+<template>
+  <div>
+    <el-date-picker
+      v-model="timeRange"
+      :picker-options="pickerOptions"
+      type="daterange"
+      range-separator="至"
+      start-placeholder="开始日期"
+      end-placeholder="结束日期"
+      style="margin-bottom: 10px"/>
+    <ve-line :data="chartData" :settings="settings" height="350px" />
+  </div>
+</template>
+
+<script>
+import { formatToString, parseToDate, getDate, oneDayTime } from '@/utils/calendarUtil'
+import { inOutCount } from '@/api/statistics'
+
+const now = new Date()
+
+export default {
+  name: 'InOutCount',
+  data() {
+    return {
+      params: {
+        beginDate: '',
+        endDate: ''
+      },
+      chartData: {
+        columns: ['date', 'staff', 'visitor', 'car', 'visitorCar'],
+        rows: []
+      },
+      settings: {
+        labelMap: {
+          'staff': '内部人员',
+          'visitor': '来访人员',
+          'car': '内部车辆',
+          'visitorCar': '来访车辆'
+        },
+        xAxisType: 'time',
+        max: [4],
+        area: true,
+        metrics: ['staff', 'visitor', 'car', 'visitorCar'],
+        dimension: ['date']
+      },
+      timeRange: [],
+      pickerOptions: {
+        shortcuts: [{
+          text: '最近七日',
+          onClick(picker) {
+            const end = now
+            const start = new Date()
+            start.setTime(start.getTime() - oneDayTime * 7)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近十日',
+          onClick(picker) {
+            const end = now
+            const start = new Date()
+            start.setTime(start.getTime() - oneDayTime * 10)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近三十日',
+          onClick(picker) {
+            const end = now
+            const start = new Date()
+            start.setTime(start.getTime() - oneDayTime * 30)
+            picker.$emit('pick', [start, end])
+          }
+        }],
+        disabledDate(time) {
+          const oneMonthLater = new Date(now.getTime() - (oneDayTime * 31))
+          return time.getTime() < oneMonthLater
+        }
+      }
+    }
+  },
+  watch: {
+    timeRange: function(newV) {
+      if (newV) {
+        this.params.beginDate = formatToString(newV[0], 'DATE')
+        this.params.endDate = formatToString(newV[1], 'DATE')
+      } else {
+        this.initTime()
+      }
+      this.fetchData()
+    }
+  },
+  created() {
+    this.initTime()
+  },
+  activated() {
+    this.fetchData()
+  },
+  methods: {
+    initTime() {
+      this.params.beginDate = getDate(-7, 'DATE')
+      this.params.endDate = getDate(1, 'DATE')
+
+      this.timeRange = [this.params.beginDate, this.params.endDate]
+    },
+    fetchData() {
+      inOutCount(this.params).then(response => {
+        if (response.code === 200) {
+          const data = this.parseStatisticsData(response.data)
+          this.chartData.rows = data.rowDatas
+          this.chartData.max = [data.maxCount]
+        }
+      })
+    },
+    parseStatisticsData(obj) {
+      const staffList = obj.person
+      const visitorList = obj.visitorPerson
+      const carList = obj.car
+      const visitorCarList = obj.visitorCar
+
+      const rowDatas = [] // 返回的数据
+      let maxCount = 4 // 返回的最大的计数值
+
+      let start = parseToDate(this.params.beginDate, 'DATE').valueOf() // 开始日期的Date对象
+      const end = parseToDate(this.params.endDate, 'DATE').valueOf() // 结束日期的Date对象
+
+      let indexS = 0 // 内部人员索引
+      let indexV = 0 // 访客索引
+      let indexC = 0 // 内部车辆索引
+      let indexVc = 0 // 访客车辆索引
+
+      // 遍历时间
+      while (start < end) {
+        const staff = staffList[indexS]
+        const visitor = visitorList[indexV]
+        const car = carList[indexC]
+        const visitorCar = visitorCarList[indexVc]
+
+        let staffCount = 0
+        let visitorCount = 0
+        let carCount = 0
+        let visitorCarCount = 0
+
+        const date = formatToString(start, 'DATE')
+
+        if (typeof staff !== 'undefined') {
+          if (staff.date === date) {
+            staffCount = staff.count
+            indexS++
+          }
+        }
+
+        if (typeof visitor !== 'undefined') {
+          if (visitor.date === date) {
+            visitorCount = visitor.count
+            indexV++
+          }
+        }
+
+        if (typeof car !== 'undefined') {
+          if (car.date === date) {
+            carCount = car.count
+            indexC++
+          }
+        }
+
+        if (typeof visitorCar !== 'undefined') {
+          if (visitorCar.date === date) {
+            visitorCarCount = car.count
+            indexVc++
+          }
+        }
+
+        if (staffCount + visitorCount + carCount + visitorCarCount > 0) {
+          rowDatas.push({ date: date, staff: staffCount, visitor: visitorCount, car: carCount, visitorCar: visitorCarCount })
+        }
+        start += oneDayTime
+      }
+
+      // 设置最大值用以不显示小数
+      maxCount = Math.ceil(maxCount * 1.1)
+
+      // 返回生成好的图表数据
+      return {
+        rowDatas: rowDatas,
+        maxCount: maxCount
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/ctrl/statCharts/inOutDoorCount.vue b/src/views/ctrl/statCharts/inOutDoorCount.vue
new file mode 100644
index 0000000..1d73651
--- /dev/null
+++ b/src/views/ctrl/statCharts/inOutDoorCount.vue
@@ -0,0 +1,187 @@
+<template>
+  <div>
+    <el-date-picker
+      v-model="timeRange"
+      :picker-options="pickerOptions"
+      type="daterange"
+      range-separator="至"
+      start-placeholder="开始日期"
+      end-placeholder="结束日期"
+      style="margin-bottom: 10px;" />
+    <ve-histogram :data="chartData" :settings="settings" height="350px" />
+  </div>
+</template>
+
+<script>
+import { formatToString, getDate, oneDayTime } from '@/utils/calendarUtil'
+import { inOutDoorCount } from '@/api/statistics'
+
+const now = new Date()
+
+export default {
+  name: 'InOutDoorCount',
+  data() {
+    return {
+      params: {
+        beginDate: '',
+        endDate: ''
+      },
+      chartData: {
+        columns: ['name', 'person', 'car'],
+        rows: []
+      },
+      settings: {
+        labelMap: {
+          'person': '人员',
+          'car': '车辆'
+        },
+        max: [4],
+        metrics: ['person', 'car'],
+        dimension: ['name']
+      },
+      timeRange: [],
+      pickerOptions: {
+        shortcuts: [{
+          text: '最近七日',
+          onClick(picker) {
+            const end = now
+            const start = new Date()
+            start.setTime(start.getTime() - oneDayTime * 7)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近十日',
+          onClick(picker) {
+            const end = now
+            const start = new Date()
+            start.setTime(start.getTime() - oneDayTime * 10)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近三十日',
+          onClick(picker) {
+            const end = now
+            const start = new Date()
+            start.setTime(start.getTime() - oneDayTime * 30)
+            picker.$emit('pick', [start, end])
+          }
+        }],
+        disabledDate(time) {
+          const oneMonthLater = new Date(now.getTime() - (oneDayTime * 31))
+          return time.getTime() < oneMonthLater
+        }
+      }
+    }
+  },
+  watch: {
+    timeRange: function(newV) {
+      if (newV) {
+        this.params.beginDate = formatToString(newV[0], 'DATE')
+        this.params.endDate = formatToString(newV[1], 'DATE')
+      } else {
+        this.initTime()
+      }
+      this.fetchData()
+    }
+  },
+  created() {
+    this.initTime()
+  },
+  activated() {
+    this.fetchData()
+  },
+  methods: {
+    initTime() {
+      this.params.beginDate = getDate(-7, 'DATE')
+      this.params.endDate = getDate(1, 'DATE')
+
+      this.timeRange = [this.params.beginDate, this.params.endDate]
+    },
+    fetchData() {
+      inOutDoorCount(this.params).then(response => {
+        if (response.code === 200) {
+          const data = this.parseStatisticsData(response.data)
+          this.chartData.rows = data.rowDatas
+          this.chartData.max = [data.maxCount]
+        }
+      })
+    },
+    parseStatisticsData(obj) {
+      const personList = obj.person
+      const carList = obj.car
+
+      const rowDatas = [] // 返回的数据
+      let maxCount = 4 // 返回的最大的计数值
+      let indexS = 0
+      let indexV = 0
+      // 遍历内部人员（车辆）和来访人员（车辆），生成图表所需要的数据格式
+      while (indexS < personList.length || indexV < carList.length) {
+        let person = {}
+        let car = {}
+
+        // 获取内部人员（车辆）对象
+        if (indexS < personList.length) {
+          person = personList[indexS]
+        } else {
+          person = {}
+        }
+
+        // 获取来访人员（车辆）对象
+        if (indexV < carList.length) {
+          car = carList[indexV]
+        } else {
+          car = {}
+        }
+
+        // 如果内部人员（车辆）的队列已经取完则直接添加来访人员（车辆）
+        if (typeof person.name === 'undefined') {
+          rowDatas.push({ name: person.name, car: car.count })
+          indexV++
+          maxCount = Math.max(maxCount, car.count)
+          continue
+        }
+
+        // 如果来访人员（车辆）的队列已经取完则直接添加内部人员（车辆）
+        if (typeof person.name === 'undefined') {
+          rowDatas.push({ name: person.name, person: person.count })
+          indexS++
+          maxCount = Math.max(maxCount, person.count)
+          continue
+        }
+
+        // 队列都还没有处理完成则比较日期的大小
+        const carVal = car.name
+        const personVal = person.name
+        if (personVal < carVal) {
+          // 人员列表的日期比较小
+          rowDatas.push({ name: person.name, person: person.count })
+          indexS++
+          maxCount = Math.max(maxCount, person.count)
+        } else if (personVal > carVal) {
+          // 访客列表的日期比较小
+          rowDatas.push({ name: car.name, car: car.count })
+          indexV++
+          maxCount = Math.max(maxCount, car.count)
+        } else {
+          rowDatas.push({ name: person.name, person: person.count, car: car.count })
+          indexS++
+          indexV++
+          maxCount = Math.max(maxCount, person.count, car.count)
+        }
+      }
+      // 设置最大值用以不显示小数
+      maxCount = Math.ceil(maxCount * 1.1)
+
+      // 返回生成好的图表数据
+      return {
+        rowDatas: rowDatas,
+        maxCount: maxCount
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/ctrl/statCharts/inOutKeyCount.vue b/src/views/ctrl/statCharts/inOutKeyCount.vue
new file mode 100644
index 0000000..fa9a0b7
--- /dev/null
+++ b/src/views/ctrl/statCharts/inOutKeyCount.vue
@@ -0,0 +1,38 @@
+<template>
+  <ve-ring :data="chartData" :settings="settings" />
+</template>
+
+<script>
+import { inOutKeyCount } from '@/api/statistics'
+
+export default {
+  name: 'InOutKeyCount',
+  data() {
+    return {
+      chartData: {
+        columns: ['name', 'count'],
+        rows: []
+      },
+      settings: {
+        radius: [60, 100]
+      }
+    }
+  },
+  activated() {
+    this.fetchData()
+  },
+  methods: {
+    fetchData() {
+      inOutKeyCount().then(response => {
+        if (response.code === 200) {
+          this.chartData.rows = response.data
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

diff --git a/src/api/statistics.js b/src/api/statistics.js
index e20b4c0..741fbb2 100644
--- a/src/api/statistics.js
+++ b/src/api/statistics.js
@@ -55,3 +55,62 @@
     params
   })
 }
+
+// 综合控制室数量统计
+export function getStatisticsData() {
+  return request({
+    url: '/overview/statistics',
+    method: 'get'
+  })
+}
+
+// 今日进出营情况占比
+export function inOutToday() {
+  return request({
+    url: '/overview/todayPassPercentage',
+    method: 'get'
+  })
+}
+
+// 各类型设备安装数量
+export function devCount() {
+  return request({
+    url: '/overview/devicePercentage',
+    method: 'get'
+  })
+}
+
+// 进出营数量统计
+export function inOutCount(params) {
+  return request({
+    url: '/overview/passCountByType',
+    method: 'get',
+    params
+  })
+}
+
+// 各重点区域出入情况
+export function inOutKeyCount() {
+  return request({
+    url: '/overview/keyareaPassPercentage',
+    method: 'get'
+  })
+}
+
+// 各类型报警数量统计
+export function devAlarmCount(params) {
+  return request({
+    url: '/overview/alarmCountByType',
+    method: 'get',
+    params
+  })
+}
+
+// 各营门出入营量统计
+export function inOutDoorCount(params) {
+  return request({
+    url: '/overview/passCountByArea',
+    method: 'get',
+    params
+  })
+}
diff --git a/src/router/index.js b/src/router/index.js
index 9435997..823269b 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -10,6 +10,7 @@
 import Layout from '../views/layout/Layout'
 import { systemRouters } from './modules/system'
 import { doorSysRouters } from './modules/doorSys'
+import { ctrlSysRouters } from './modules/ctrlSys'
 
 /**
 * hidden: true                   if `hidden:true` will not show in the sidebar(default is false)
@@ -88,5 +89,6 @@
 export const asyncRouterMap = [
   ...systemRouters,
   ...doorSysRouters,
+  ...ctrlSysRouters,
   { path: '*', redirect: '/404', hidden: true, meta: {}}
 ]
diff --git a/src/router/modules/ctrlSys.js b/src/router/modules/ctrlSys.js
new file mode 100644
index 0000000..0dce4da
--- /dev/null
+++ b/src/router/modules/ctrlSys.js
@@ -0,0 +1,35 @@
+/* Layout */
+import SinglePageLayout from '@/views/layout/SinglePageLayout'
+export const ctrlSysRouters = [
+  {
+    path: '/ctrl',
+    name: 'ctrl',
+    redirect: '/ctrl',
+    hidden: true,
+    meta: {
+      title: '综合控制室子系统',
+      permission: ['/ctrl'],
+      isSys: true
+    }
+  },
+  {
+    path: '/ctrl/index1',
+    component: SinglePageLayout,
+    name: 'Ctrl1',
+    alwaysShow: false,
+    meta: {
+      title: '',
+      icon: '', // 图标
+      permission: ['/ctrl'], // 权限名称
+      sys: '/ctrl'
+    },
+    children: [
+      {
+        path: '/ctrl/index',
+        name: 'CtrlIndex',
+        component: () => import('@/views/ctrl/index'),
+        meta: { title: '综合控制室首页', icon: '', permission: ['/ctrl/index'], keepAlive: true }
+      }
+    ]
+  }
+]
diff --git a/src/views/ctrl/index.vue b/src/views/ctrl/index.vue
new file mode 100644
index 0000000..93efb6f
--- /dev/null
+++ b/src/views/ctrl/index.vue
@@ -0,0 +1,193 @@
+<template>
+  <div class="app-wrapper">
+    <el-row :gutter="20">
+      <el-col id="today-visitor" class="sub-data-block" style="margin-left: 20px;">
+        <div class="sub-title">今日访客</div>
+        <div class="statis-block">
+          <span class="big-size" v-text="statistics.todayVisitorPerson"/><span>人</span>
+        </div>
+      </el-col>
+
+      <el-col id="total-visitor" class="sub-data-block">
+        <div class="sub-title">累计访客</div>
+        <div class="statis-block">
+          <span class="big-size" v-text="statistics.totalVisitorPerson"/><span>人</span>
+        </div>
+      </el-col>
+
+      <el-col id="current-alarm" class="sub-data-block">
+        <div class="sub-title">当前报警</div>
+        <div class="statis-block">
+          <span class="big-size" v-text="statistics.currentAlarm"/><span>台</span>
+        </div>
+      </el-col>
+
+      <el-col id="total-alarm" class="sub-data-block">
+        <div class="sub-title">累计报警</div>
+        <div class="statis-block">
+          <span class="big-size" v-text="statistics.totalAlarm"/><span>次</span>
+        </div>
+      </el-col>
+
+      <el-col id="online-device" class="sub-data-block">
+        <div class="sub-title">在线设备</div>
+        <div class="statis-block">
+          <span class="big-size" v-text="statistics.onlineDevice"/><span>台</span>
+        </div>
+      </el-col>
+
+      <el-col id="total-device" class="sub-data-block">
+        <div class="sub-title">设备总量</div>
+        <div class="statis-block">
+          <span class="big-size" v-text="statistics.totalDevice"/><span>台</span>
+        </div>
+      </el-col>
+    </el-row>
+
+    <el-row :gutter="20">
+      <el-col :span="7" class="chart-block">
+        <div class="chart-title">今日进出营情况</div>
+        <in-out-today />
+      </el-col>
+
+      <el-col :span="7" class="chart-block">
+        <div class="chart-title">各类型设备安装数量</div>
+        <dev-count />
+      </el-col>
+
+      <el-col id="pass-count" :span="10" class="chart-block">
+        <div class="chart-title">进出营数量统计</div>
+        <in-out-count />
+      </el-col>
+    </el-row>
+
+    <el-row :gutter="20" style="margin-bottom: 40px;">
+      <el-col :span="7" class="chart-block">
+        <div class="chart-title">各重点区域出入情况</div>
+        <in-out-key-count />
+      </el-col>
+
+      <el-col id="dev-alarm-count" :span="10" class="chart-block">
+        <div class="chart-title">设备报警数量统计</div>
+        <dev-alarm-count />
+      </el-col>
+
+      <el-col :span="7" class="chart-block">
+        <div class="chart-title">各营门出入营量统计</div>
+        <in-out-door-count />
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { getStatisticsData } from '@/api/statistics'
+import InOutToday from '@/views/ctrl/statCharts/inOutToday'
+import InOutCount from '@/views/ctrl/statCharts/inOutCount'
+import DevCount from '@/views/ctrl/statCharts/devCount'
+import InOutKeyCount from '@/views/ctrl/statCharts/inOutKeyCount'
+import DevAlarmCount from '@/views/ctrl/statCharts/devAlarmCount'
+import InOutDoorCount from '@/views/ctrl/statCharts/inOutDoorCount'
+export default {
+  name: 'CtrlIndex',
+  components: { InOutToday, DevCount, InOutCount, InOutKeyCount, DevAlarmCount, InOutDoorCount },
+  data() {
+    return {
+      statistics: {
+        todayVisitorPerson: 0,
+        totalVisitorPerson: 0,
+        currentAlarm: 0,
+        totalAlarm: 0,
+        onlineDevice: 0,
+        totalDevice: 0
+      }
+    }
+  },
+  created() {
+    this.fetchStatisticsData()
+  },
+  methods: {
+    fetchStatisticsData() {
+      getStatisticsData().then(response => {
+        if (response.code === 200) {
+          this.statistics = response.data
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .app-wrapper {
+    background-color: #e9e9e9;
+    padding-bottom: 20px;
+  }
+
+  .sub-data-block {
+    width: calc((100vw - 120px) / 6);
+    border-radius: 16px;
+    float: left;
+    margin: 10px;
+    box-shadow: 2px 2px 8px #666666;
+  }
+  .sub-title {
+    font-weight: bold;
+    text-align: center;
+    font-family: 'Microsoft YaHei';
+    color: #fff;
+    font-size: 24px;
+    padding: 10px;
+  }
+  .statis-block {
+    text-align: center;
+    margin: 20px 10px 0px 10px;
+    padding: 10px;
+    color: #fff;
+    font-weight: bold;
+    letter-spacing: 1px;
+    font-size: 24px;
+  }
+  .big-size {
+    font-size: 64px;
+  }
+
+  .chart-title {
+    font-family: 'Microsoft YaHei';
+    color: #000000;
+    font-weight: bold;
+    font-size: 20px;
+    text-align: center;
+    padding: 10px;
+  }
+  .chart-block {
+    margin-left: 20px;
+    margin-top: 20px;
+    border-radius: 16px;
+    background-color: #FFFFFF;
+    box-shadow: 2px 2px 8px #666666;
+  }
+
+  #today-visitor {
+    background-image: linear-gradient(to right, #ff8fdf, #ff01b4);
+  }
+  #total-visitor {
+    background-image: linear-gradient(to right, #9280ff, #2400ff);
+  }
+  #current-alarm {
+    background-image: linear-gradient(to right, #ff696a, #ff0101);
+  }
+  #total-alarm {
+    background-image: linear-gradient(to right, #7fbbff, #0078ff);
+  }
+  #online-device {
+    background-image: linear-gradient(to right, #72ff7e, #01a411);
+  }
+  #total-device {
+    background-image: linear-gradient(to right, #ffa800, #ce7e00);
+  }
+
+  #pass-count, #dev-alarm-count {
+    width: calc(250vw / 6 - 70px);
+  }
+</style>
diff --git a/src/views/ctrl/statCharts/devAlarmCount.vue b/src/views/ctrl/statCharts/devAlarmCount.vue
new file mode 100644
index 0000000..ff2e6c4
--- /dev/null
+++ b/src/views/ctrl/statCharts/devAlarmCount.vue
@@ -0,0 +1,111 @@
+<template>
+  <div>
+    <el-date-picker
+      v-model="timeRange"
+      :picker-options="pickerOptions"
+      type="daterange"
+      range-separator="至"
+      start-placeholder="开始日期"
+      end-placeholder="结束日期"
+      style="margin-bottom: 10px;" />
+    <ve-histogram :data="chartData" :settings="settings" height="350px" />
+  </div>
+</template>
+
+<script>
+import { formatToString, getDate, oneDayTime } from '@/utils/calendarUtil'
+import { devAlarmCount } from '@/api/statistics'
+
+const now = new Date()
+
+export default {
+  name: 'DevAlarmCount',
+  data() {
+    return {
+      params: {
+        beginDate: '',
+        endDate: ''
+      },
+      chartData: {
+        columns: ['name', 'count'],
+        rows: []
+      },
+      settings: {
+        labelMap: {
+          'name': '设备类型',
+          'count': '报警数量'
+        },
+        max: [4]
+      },
+      timeRange: [],
+      pickerOptions: {
+        shortcuts: [{
+          text: '最近七日',
+          onClick(picker) {
+            const end = now
+            const start = new Date()
+            start.setTime(start.getTime() - oneDayTime * 7)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近十日',
+          onClick(picker) {
+            const end = now
+            const start = new Date()
+            start.setTime(start.getTime() - oneDayTime * 10)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近三十日',
+          onClick(picker) {
+            const end = now
+            const start = new Date()
+            start.setTime(start.getTime() - oneDayTime * 30)
+            picker.$emit('pick', [start, end])
+          }
+        }],
+        disabledDate(time) {
+          const oneMonthLater = new Date(now.getTime() - (oneDayTime * 31))
+          return time.getTime() < oneMonthLater
+        }
+      }
+    }
+  },
+  watch: {
+    timeRange: function(newV) {
+      if (newV) {
+        this.params.beginDate = formatToString(newV[0], 'DATE')
+        this.params.endDate = formatToString(newV[1], 'DATE')
+      } else {
+        this.initTime()
+      }
+      this.fetchData()
+    }
+  },
+  created() {
+    this.initTime()
+  },
+  activated() {
+    this.fetchData()
+  },
+  methods: {
+    initTime() {
+      this.params.beginDate = getDate(-7, 'DATE')
+      this.params.endDate = getDate(1, 'DATE')
+
+      this.timeRange = [this.params.beginDate, this.params.endDate]
+    },
+    fetchData() {
+      devAlarmCount(this.params).then(response => {
+        if (response.code === 200) {
+          this.chartData.rows = response.data
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/ctrl/statCharts/devCount.vue b/src/views/ctrl/statCharts/devCount.vue
new file mode 100644
index 0000000..d3e2902
--- /dev/null
+++ b/src/views/ctrl/statCharts/devCount.vue
@@ -0,0 +1,39 @@
+<template>
+  <ve-ring :data="chartData" :settings="settings" />
+</template>
+
+<script>
+import { devCount } from '@/api/statistics'
+
+export default {
+  name: 'DevCount',
+  data() {
+    return {
+      chartData: {
+        columns: ['name', 'count'],
+        rows: []
+      },
+      settings: {
+        // legendLimit: 4
+        radius: [60, 100]
+      }
+    }
+  },
+  activated() {
+    this.fetchData()
+  },
+  methods: {
+    fetchData() {
+      devCount().then(response => {
+        if (response.code === 200) {
+          this.chartData.rows = response.data
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/ctrl/statCharts/inOutCount.vue b/src/views/ctrl/statCharts/inOutCount.vue
new file mode 100644
index 0000000..1956305
--- /dev/null
+++ b/src/views/ctrl/statCharts/inOutCount.vue
@@ -0,0 +1,193 @@
+<template>
+  <div>
+    <el-date-picker
+      v-model="timeRange"
+      :picker-options="pickerOptions"
+      type="daterange"
+      range-separator="至"
+      start-placeholder="开始日期"
+      end-placeholder="结束日期"
+      style="margin-bottom: 10px"/>
+    <ve-line :data="chartData" :settings="settings" height="350px" />
+  </div>
+</template>
+
+<script>
+import { formatToString, parseToDate, getDate, oneDayTime } from '@/utils/calendarUtil'
+import { inOutCount } from '@/api/statistics'
+
+const now = new Date()
+
+export default {
+  name: 'InOutCount',
+  data() {
+    return {
+      params: {
+        beginDate: '',
+        endDate: ''
+      },
+      chartData: {
+        columns: ['date', 'staff', 'visitor', 'car', 'visitorCar'],
+        rows: []
+      },
+      settings: {
+        labelMap: {
+          'staff': '内部人员',
+          'visitor': '来访人员',
+          'car': '内部车辆',
+          'visitorCar': '来访车辆'
+        },
+        xAxisType: 'time',
+        max: [4],
+        area: true,
+        metrics: ['staff', 'visitor', 'car', 'visitorCar'],
+        dimension: ['date']
+      },
+      timeRange: [],
+      pickerOptions: {
+        shortcuts: [{
+          text: '最近七日',
+          onClick(picker) {
+            const end = now
+            const start = new Date()
+            start.setTime(start.getTime() - oneDayTime * 7)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近十日',
+          onClick(picker) {
+            const end = now
+            const start = new Date()
+            start.setTime(start.getTime() - oneDayTime * 10)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近三十日',
+          onClick(picker) {
+            const end = now
+            const start = new Date()
+            start.setTime(start.getTime() - oneDayTime * 30)
+            picker.$emit('pick', [start, end])
+          }
+        }],
+        disabledDate(time) {
+          const oneMonthLater = new Date(now.getTime() - (oneDayTime * 31))
+          return time.getTime() < oneMonthLater
+        }
+      }
+    }
+  },
+  watch: {
+    timeRange: function(newV) {
+      if (newV) {
+        this.params.beginDate = formatToString(newV[0], 'DATE')
+        this.params.endDate = formatToString(newV[1], 'DATE')
+      } else {
+        this.initTime()
+      }
+      this.fetchData()
+    }
+  },
+  created() {
+    this.initTime()
+  },
+  activated() {
+    this.fetchData()
+  },
+  methods: {
+    initTime() {
+      this.params.beginDate = getDate(-7, 'DATE')
+      this.params.endDate = getDate(1, 'DATE')
+
+      this.timeRange = [this.params.beginDate, this.params.endDate]
+    },
+    fetchData() {
+      inOutCount(this.params).then(response => {
+        if (response.code === 200) {
+          const data = this.parseStatisticsData(response.data)
+          this.chartData.rows = data.rowDatas
+          this.chartData.max = [data.maxCount]
+        }
+      })
+    },
+    parseStatisticsData(obj) {
+      const staffList = obj.person
+      const visitorList = obj.visitorPerson
+      const carList = obj.car
+      const visitorCarList = obj.visitorCar
+
+      const rowDatas = [] // 返回的数据
+      let maxCount = 4 // 返回的最大的计数值
+
+      let start = parseToDate(this.params.beginDate, 'DATE').valueOf() // 开始日期的Date对象
+      const end = parseToDate(this.params.endDate, 'DATE').valueOf() // 结束日期的Date对象
+
+      let indexS = 0 // 内部人员索引
+      let indexV = 0 // 访客索引
+      let indexC = 0 // 内部车辆索引
+      let indexVc = 0 // 访客车辆索引
+
+      // 遍历时间
+      while (start < end) {
+        const staff = staffList[indexS]
+        const visitor = visitorList[indexV]
+        const car = carList[indexC]
+        const visitorCar = visitorCarList[indexVc]
+
+        let staffCount = 0
+        let visitorCount = 0
+        let carCount = 0
+        let visitorCarCount = 0
+
+        const date = formatToString(start, 'DATE')
+
+        if (typeof staff !== 'undefined') {
+          if (staff.date === date) {
+            staffCount = staff.count
+            indexS++
+          }
+        }
+
+        if (typeof visitor !== 'undefined') {
+          if (visitor.date === date) {
+            visitorCount = visitor.count
+            indexV++
+          }
+        }
+
+        if (typeof car !== 'undefined') {
+          if (car.date === date) {
+            carCount = car.count
+            indexC++
+          }
+        }
+
+        if (typeof visitorCar !== 'undefined') {
+          if (visitorCar.date === date) {
+            visitorCarCount = car.count
+            indexVc++
+          }
+        }
+
+        if (staffCount + visitorCount + carCount + visitorCarCount > 0) {
+          rowDatas.push({ date: date, staff: staffCount, visitor: visitorCount, car: carCount, visitorCar: visitorCarCount })
+        }
+        start += oneDayTime
+      }
+
+      // 设置最大值用以不显示小数
+      maxCount = Math.ceil(maxCount * 1.1)
+
+      // 返回生成好的图表数据
+      return {
+        rowDatas: rowDatas,
+        maxCount: maxCount
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/ctrl/statCharts/inOutDoorCount.vue b/src/views/ctrl/statCharts/inOutDoorCount.vue
new file mode 100644
index 0000000..1d73651
--- /dev/null
+++ b/src/views/ctrl/statCharts/inOutDoorCount.vue
@@ -0,0 +1,187 @@
+<template>
+  <div>
+    <el-date-picker
+      v-model="timeRange"
+      :picker-options="pickerOptions"
+      type="daterange"
+      range-separator="至"
+      start-placeholder="开始日期"
+      end-placeholder="结束日期"
+      style="margin-bottom: 10px;" />
+    <ve-histogram :data="chartData" :settings="settings" height="350px" />
+  </div>
+</template>
+
+<script>
+import { formatToString, getDate, oneDayTime } from '@/utils/calendarUtil'
+import { inOutDoorCount } from '@/api/statistics'
+
+const now = new Date()
+
+export default {
+  name: 'InOutDoorCount',
+  data() {
+    return {
+      params: {
+        beginDate: '',
+        endDate: ''
+      },
+      chartData: {
+        columns: ['name', 'person', 'car'],
+        rows: []
+      },
+      settings: {
+        labelMap: {
+          'person': '人员',
+          'car': '车辆'
+        },
+        max: [4],
+        metrics: ['person', 'car'],
+        dimension: ['name']
+      },
+      timeRange: [],
+      pickerOptions: {
+        shortcuts: [{
+          text: '最近七日',
+          onClick(picker) {
+            const end = now
+            const start = new Date()
+            start.setTime(start.getTime() - oneDayTime * 7)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近十日',
+          onClick(picker) {
+            const end = now
+            const start = new Date()
+            start.setTime(start.getTime() - oneDayTime * 10)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近三十日',
+          onClick(picker) {
+            const end = now
+            const start = new Date()
+            start.setTime(start.getTime() - oneDayTime * 30)
+            picker.$emit('pick', [start, end])
+          }
+        }],
+        disabledDate(time) {
+          const oneMonthLater = new Date(now.getTime() - (oneDayTime * 31))
+          return time.getTime() < oneMonthLater
+        }
+      }
+    }
+  },
+  watch: {
+    timeRange: function(newV) {
+      if (newV) {
+        this.params.beginDate = formatToString(newV[0], 'DATE')
+        this.params.endDate = formatToString(newV[1], 'DATE')
+      } else {
+        this.initTime()
+      }
+      this.fetchData()
+    }
+  },
+  created() {
+    this.initTime()
+  },
+  activated() {
+    this.fetchData()
+  },
+  methods: {
+    initTime() {
+      this.params.beginDate = getDate(-7, 'DATE')
+      this.params.endDate = getDate(1, 'DATE')
+
+      this.timeRange = [this.params.beginDate, this.params.endDate]
+    },
+    fetchData() {
+      inOutDoorCount(this.params).then(response => {
+        if (response.code === 200) {
+          const data = this.parseStatisticsData(response.data)
+          this.chartData.rows = data.rowDatas
+          this.chartData.max = [data.maxCount]
+        }
+      })
+    },
+    parseStatisticsData(obj) {
+      const personList = obj.person
+      const carList = obj.car
+
+      const rowDatas = [] // 返回的数据
+      let maxCount = 4 // 返回的最大的计数值
+      let indexS = 0
+      let indexV = 0
+      // 遍历内部人员（车辆）和来访人员（车辆），生成图表所需要的数据格式
+      while (indexS < personList.length || indexV < carList.length) {
+        let person = {}
+        let car = {}
+
+        // 获取内部人员（车辆）对象
+        if (indexS < personList.length) {
+          person = personList[indexS]
+        } else {
+          person = {}
+        }
+
+        // 获取来访人员（车辆）对象
+        if (indexV < carList.length) {
+          car = carList[indexV]
+        } else {
+          car = {}
+        }
+
+        // 如果内部人员（车辆）的队列已经取完则直接添加来访人员（车辆）
+        if (typeof person.name === 'undefined') {
+          rowDatas.push({ name: person.name, car: car.count })
+          indexV++
+          maxCount = Math.max(maxCount, car.count)
+          continue
+        }
+
+        // 如果来访人员（车辆）的队列已经取完则直接添加内部人员（车辆）
+        if (typeof person.name === 'undefined') {
+          rowDatas.push({ name: person.name, person: person.count })
+          indexS++
+          maxCount = Math.max(maxCount, person.count)
+          continue
+        }
+
+        // 队列都还没有处理完成则比较日期的大小
+        const carVal = car.name
+        const personVal = person.name
+        if (personVal < carVal) {
+          // 人员列表的日期比较小
+          rowDatas.push({ name: person.name, person: person.count })
+          indexS++
+          maxCount = Math.max(maxCount, person.count)
+        } else if (personVal > carVal) {
+          // 访客列表的日期比较小
+          rowDatas.push({ name: car.name, car: car.count })
+          indexV++
+          maxCount = Math.max(maxCount, car.count)
+        } else {
+          rowDatas.push({ name: person.name, person: person.count, car: car.count })
+          indexS++
+          indexV++
+          maxCount = Math.max(maxCount, person.count, car.count)
+        }
+      }
+      // 设置最大值用以不显示小数
+      maxCount = Math.ceil(maxCount * 1.1)
+
+      // 返回生成好的图表数据
+      return {
+        rowDatas: rowDatas,
+        maxCount: maxCount
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/ctrl/statCharts/inOutKeyCount.vue b/src/views/ctrl/statCharts/inOutKeyCount.vue
new file mode 100644
index 0000000..fa9a0b7
--- /dev/null
+++ b/src/views/ctrl/statCharts/inOutKeyCount.vue
@@ -0,0 +1,38 @@
+<template>
+  <ve-ring :data="chartData" :settings="settings" />
+</template>
+
+<script>
+import { inOutKeyCount } from '@/api/statistics'
+
+export default {
+  name: 'InOutKeyCount',
+  data() {
+    return {
+      chartData: {
+        columns: ['name', 'count'],
+        rows: []
+      },
+      settings: {
+        radius: [60, 100]
+      }
+    }
+  },
+  activated() {
+    this.fetchData()
+  },
+  methods: {
+    fetchData() {
+      inOutKeyCount().then(response => {
+        if (response.code === 200) {
+          this.chartData.rows = response.data
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/ctrl/statCharts/inOutToday.vue b/src/views/ctrl/statCharts/inOutToday.vue
new file mode 100644
index 0000000..c37fa7b
--- /dev/null
+++ b/src/views/ctrl/statCharts/inOutToday.vue
@@ -0,0 +1,45 @@
+<template>
+  <ve-ring :data="chartData" :settings="settings" />
+</template>
+
+<script>
+import { inOutToday } from '@/api/statistics'
+
+export default {
+  name: 'InOutToday',
+  data() {
+    return {
+      chartData: {
+        columns: ['name', 'count'],
+        rows: [
+          { count: 4, name: '内部人员' },
+          { count: 1, name: '来访人员' },
+          { count: 2, name: '内部车辆' },
+          { count: 1, name: '来访车辆' }
+        ]
+      },
+      settings: {
+        radius: [60, 100]
+      }
+    }
+  },
+  activated() {
+    this.fetchData()
+  },
+  methods: {
+    fetchData() {
+      inOutToday().then(response => {
+        if (response.code === 200) {
+          if (response.data.length > 0) {
+            this.chartData.rows = response.data
+          }
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

diff --git a/src/api/statistics.js b/src/api/statistics.js
index e20b4c0..741fbb2 100644
--- a/src/api/statistics.js
+++ b/src/api/statistics.js
@@ -55,3 +55,62 @@
     params
   })
 }
+
+// 综合控制室数量统计
+export function getStatisticsData() {
+  return request({
+    url: '/overview/statistics',
+    method: 'get'
+  })
+}
+
+// 今日进出营情况占比
+export function inOutToday() {
+  return request({
+    url: '/overview/todayPassPercentage',
+    method: 'get'
+  })
+}
+
+// 各类型设备安装数量
+export function devCount() {
+  return request({
+    url: '/overview/devicePercentage',
+    method: 'get'
+  })
+}
+
+// 进出营数量统计
+export function inOutCount(params) {
+  return request({
+    url: '/overview/passCountByType',
+    method: 'get',
+    params
+  })
+}
+
+// 各重点区域出入情况
+export function inOutKeyCount() {
+  return request({
+    url: '/overview/keyareaPassPercentage',
+    method: 'get'
+  })
+}
+
+// 各类型报警数量统计
+export function devAlarmCount(params) {
+  return request({
+    url: '/overview/alarmCountByType',
+    method: 'get',
+    params
+  })
+}
+
+// 各营门出入营量统计
+export function inOutDoorCount(params) {
+  return request({
+    url: '/overview/passCountByArea',
+    method: 'get',
+    params
+  })
+}
diff --git a/src/router/index.js b/src/router/index.js
index 9435997..823269b 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -10,6 +10,7 @@
 import Layout from '../views/layout/Layout'
 import { systemRouters } from './modules/system'
 import { doorSysRouters } from './modules/doorSys'
+import { ctrlSysRouters } from './modules/ctrlSys'
 
 /**
 * hidden: true                   if `hidden:true` will not show in the sidebar(default is false)
@@ -88,5 +89,6 @@
 export const asyncRouterMap = [
   ...systemRouters,
   ...doorSysRouters,
+  ...ctrlSysRouters,
   { path: '*', redirect: '/404', hidden: true, meta: {}}
 ]
diff --git a/src/router/modules/ctrlSys.js b/src/router/modules/ctrlSys.js
new file mode 100644
index 0000000..0dce4da
--- /dev/null
+++ b/src/router/modules/ctrlSys.js
@@ -0,0 +1,35 @@
+/* Layout */
+import SinglePageLayout from '@/views/layout/SinglePageLayout'
+export const ctrlSysRouters = [
+  {
+    path: '/ctrl',
+    name: 'ctrl',
+    redirect: '/ctrl',
+    hidden: true,
+    meta: {
+      title: '综合控制室子系统',
+      permission: ['/ctrl'],
+      isSys: true
+    }
+  },
+  {
+    path: '/ctrl/index1',
+    component: SinglePageLayout,
+    name: 'Ctrl1',
+    alwaysShow: false,
+    meta: {
+      title: '',
+      icon: '', // 图标
+      permission: ['/ctrl'], // 权限名称
+      sys: '/ctrl'
+    },
+    children: [
+      {
+        path: '/ctrl/index',
+        name: 'CtrlIndex',
+        component: () => import('@/views/ctrl/index'),
+        meta: { title: '综合控制室首页', icon: '', permission: ['/ctrl/index'], keepAlive: true }
+      }
+    ]
+  }
+]
diff --git a/src/views/ctrl/index.vue b/src/views/ctrl/index.vue
new file mode 100644
index 0000000..93efb6f
--- /dev/null
+++ b/src/views/ctrl/index.vue
@@ -0,0 +1,193 @@
+<template>
+  <div class="app-wrapper">
+    <el-row :gutter="20">
+      <el-col id="today-visitor" class="sub-data-block" style="margin-left: 20px;">
+        <div class="sub-title">今日访客</div>
+        <div class="statis-block">
+          <span class="big-size" v-text="statistics.todayVisitorPerson"/><span>人</span>
+        </div>
+      </el-col>
+
+      <el-col id="total-visitor" class="sub-data-block">
+        <div class="sub-title">累计访客</div>
+        <div class="statis-block">
+          <span class="big-size" v-text="statistics.totalVisitorPerson"/><span>人</span>
+        </div>
+      </el-col>
+
+      <el-col id="current-alarm" class="sub-data-block">
+        <div class="sub-title">当前报警</div>
+        <div class="statis-block">
+          <span class="big-size" v-text="statistics.currentAlarm"/><span>台</span>
+        </div>
+      </el-col>
+
+      <el-col id="total-alarm" class="sub-data-block">
+        <div class="sub-title">累计报警</div>
+        <div class="statis-block">
+          <span class="big-size" v-text="statistics.totalAlarm"/><span>次</span>
+        </div>
+      </el-col>
+
+      <el-col id="online-device" class="sub-data-block">
+        <div class="sub-title">在线设备</div>
+        <div class="statis-block">
+          <span class="big-size" v-text="statistics.onlineDevice"/><span>台</span>
+        </div>
+      </el-col>
+
+      <el-col id="total-device" class="sub-data-block">
+        <div class="sub-title">设备总量</div>
+        <div class="statis-block">
+          <span class="big-size" v-text="statistics.totalDevice"/><span>台</span>
+        </div>
+      </el-col>
+    </el-row>
+
+    <el-row :gutter="20">
+      <el-col :span="7" class="chart-block">
+        <div class="chart-title">今日进出营情况</div>
+        <in-out-today />
+      </el-col>
+
+      <el-col :span="7" class="chart-block">
+        <div class="chart-title">各类型设备安装数量</div>
+        <dev-count />
+      </el-col>
+
+      <el-col id="pass-count" :span="10" class="chart-block">
+        <div class="chart-title">进出营数量统计</div>
+        <in-out-count />
+      </el-col>
+    </el-row>
+
+    <el-row :gutter="20" style="margin-bottom: 40px;">
+      <el-col :span="7" class="chart-block">
+        <div class="chart-title">各重点区域出入情况</div>
+        <in-out-key-count />
+      </el-col>
+
+      <el-col id="dev-alarm-count" :span="10" class="chart-block">
+        <div class="chart-title">设备报警数量统计</div>
+        <dev-alarm-count />
+      </el-col>
+
+      <el-col :span="7" class="chart-block">
+        <div class="chart-title">各营门出入营量统计</div>
+        <in-out-door-count />
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { getStatisticsData } from '@/api/statistics'
+import InOutToday from '@/views/ctrl/statCharts/inOutToday'
+import InOutCount from '@/views/ctrl/statCharts/inOutCount'
+import DevCount from '@/views/ctrl/statCharts/devCount'
+import InOutKeyCount from '@/views/ctrl/statCharts/inOutKeyCount'
+import DevAlarmCount from '@/views/ctrl/statCharts/devAlarmCount'
+import InOutDoorCount from '@/views/ctrl/statCharts/inOutDoorCount'
+export default {
+  name: 'CtrlIndex',
+  components: { InOutToday, DevCount, InOutCount, InOutKeyCount, DevAlarmCount, InOutDoorCount },
+  data() {
+    return {
+      statistics: {
+        todayVisitorPerson: 0,
+        totalVisitorPerson: 0,
+        currentAlarm: 0,
+        totalAlarm: 0,
+        onlineDevice: 0,
+        totalDevice: 0
+      }
+    }
+  },
+  created() {
+    this.fetchStatisticsData()
+  },
+  methods: {
+    fetchStatisticsData() {
+      getStatisticsData().then(response => {
+        if (response.code === 200) {
+          this.statistics = response.data
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .app-wrapper {
+    background-color: #e9e9e9;
+    padding-bottom: 20px;
+  }
+
+  .sub-data-block {
+    width: calc((100vw - 120px) / 6);
+    border-radius: 16px;
+    float: left;
+    margin: 10px;
+    box-shadow: 2px 2px 8px #666666;
+  }
+  .sub-title {
+    font-weight: bold;
+    text-align: center;
+    font-family: 'Microsoft YaHei';
+    color: #fff;
+    font-size: 24px;
+    padding: 10px;
+  }
+  .statis-block {
+    text-align: center;
+    margin: 20px 10px 0px 10px;
+    padding: 10px;
+    color: #fff;
+    font-weight: bold;
+    letter-spacing: 1px;
+    font-size: 24px;
+  }
+  .big-size {
+    font-size: 64px;
+  }
+
+  .chart-title {
+    font-family: 'Microsoft YaHei';
+    color: #000000;
+    font-weight: bold;
+    font-size: 20px;
+    text-align: center;
+    padding: 10px;
+  }
+  .chart-block {
+    margin-left: 20px;
+    margin-top: 20px;
+    border-radius: 16px;
+    background-color: #FFFFFF;
+    box-shadow: 2px 2px 8px #666666;
+  }
+
+  #today-visitor {
+    background-image: linear-gradient(to right, #ff8fdf, #ff01b4);
+  }
+  #total-visitor {
+    background-image: linear-gradient(to right, #9280ff, #2400ff);
+  }
+  #current-alarm {
+    background-image: linear-gradient(to right, #ff696a, #ff0101);
+  }
+  #total-alarm {
+    background-image: linear-gradient(to right, #7fbbff, #0078ff);
+  }
+  #online-device {
+    background-image: linear-gradient(to right, #72ff7e, #01a411);
+  }
+  #total-device {
+    background-image: linear-gradient(to right, #ffa800, #ce7e00);
+  }
+
+  #pass-count, #dev-alarm-count {
+    width: calc(250vw / 6 - 70px);
+  }
+</style>
diff --git a/src/views/ctrl/statCharts/devAlarmCount.vue b/src/views/ctrl/statCharts/devAlarmCount.vue
new file mode 100644
index 0000000..ff2e6c4
--- /dev/null
+++ b/src/views/ctrl/statCharts/devAlarmCount.vue
@@ -0,0 +1,111 @@
+<template>
+  <div>
+    <el-date-picker
+      v-model="timeRange"
+      :picker-options="pickerOptions"
+      type="daterange"
+      range-separator="至"
+      start-placeholder="开始日期"
+      end-placeholder="结束日期"
+      style="margin-bottom: 10px;" />
+    <ve-histogram :data="chartData" :settings="settings" height="350px" />
+  </div>
+</template>
+
+<script>
+import { formatToString, getDate, oneDayTime } from '@/utils/calendarUtil'
+import { devAlarmCount } from '@/api/statistics'
+
+const now = new Date()
+
+export default {
+  name: 'DevAlarmCount',
+  data() {
+    return {
+      params: {
+        beginDate: '',
+        endDate: ''
+      },
+      chartData: {
+        columns: ['name', 'count'],
+        rows: []
+      },
+      settings: {
+        labelMap: {
+          'name': '设备类型',
+          'count': '报警数量'
+        },
+        max: [4]
+      },
+      timeRange: [],
+      pickerOptions: {
+        shortcuts: [{
+          text: '最近七日',
+          onClick(picker) {
+            const end = now
+            const start = new Date()
+            start.setTime(start.getTime() - oneDayTime * 7)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近十日',
+          onClick(picker) {
+            const end = now
+            const start = new Date()
+            start.setTime(start.getTime() - oneDayTime * 10)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近三十日',
+          onClick(picker) {
+            const end = now
+            const start = new Date()
+            start.setTime(start.getTime() - oneDayTime * 30)
+            picker.$emit('pick', [start, end])
+          }
+        }],
+        disabledDate(time) {
+          const oneMonthLater = new Date(now.getTime() - (oneDayTime * 31))
+          return time.getTime() < oneMonthLater
+        }
+      }
+    }
+  },
+  watch: {
+    timeRange: function(newV) {
+      if (newV) {
+        this.params.beginDate = formatToString(newV[0], 'DATE')
+        this.params.endDate = formatToString(newV[1], 'DATE')
+      } else {
+        this.initTime()
+      }
+      this.fetchData()
+    }
+  },
+  created() {
+    this.initTime()
+  },
+  activated() {
+    this.fetchData()
+  },
+  methods: {
+    initTime() {
+      this.params.beginDate = getDate(-7, 'DATE')
+      this.params.endDate = getDate(1, 'DATE')
+
+      this.timeRange = [this.params.beginDate, this.params.endDate]
+    },
+    fetchData() {
+      devAlarmCount(this.params).then(response => {
+        if (response.code === 200) {
+          this.chartData.rows = response.data
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/ctrl/statCharts/devCount.vue b/src/views/ctrl/statCharts/devCount.vue
new file mode 100644
index 0000000..d3e2902
--- /dev/null
+++ b/src/views/ctrl/statCharts/devCount.vue
@@ -0,0 +1,39 @@
+<template>
+  <ve-ring :data="chartData" :settings="settings" />
+</template>
+
+<script>
+import { devCount } from '@/api/statistics'
+
+export default {
+  name: 'DevCount',
+  data() {
+    return {
+      chartData: {
+        columns: ['name', 'count'],
+        rows: []
+      },
+      settings: {
+        // legendLimit: 4
+        radius: [60, 100]
+      }
+    }
+  },
+  activated() {
+    this.fetchData()
+  },
+  methods: {
+    fetchData() {
+      devCount().then(response => {
+        if (response.code === 200) {
+          this.chartData.rows = response.data
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/ctrl/statCharts/inOutCount.vue b/src/views/ctrl/statCharts/inOutCount.vue
new file mode 100644
index 0000000..1956305
--- /dev/null
+++ b/src/views/ctrl/statCharts/inOutCount.vue
@@ -0,0 +1,193 @@
+<template>
+  <div>
+    <el-date-picker
+      v-model="timeRange"
+      :picker-options="pickerOptions"
+      type="daterange"
+      range-separator="至"
+      start-placeholder="开始日期"
+      end-placeholder="结束日期"
+      style="margin-bottom: 10px"/>
+    <ve-line :data="chartData" :settings="settings" height="350px" />
+  </div>
+</template>
+
+<script>
+import { formatToString, parseToDate, getDate, oneDayTime } from '@/utils/calendarUtil'
+import { inOutCount } from '@/api/statistics'
+
+const now = new Date()
+
+export default {
+  name: 'InOutCount',
+  data() {
+    return {
+      params: {
+        beginDate: '',
+        endDate: ''
+      },
+      chartData: {
+        columns: ['date', 'staff', 'visitor', 'car', 'visitorCar'],
+        rows: []
+      },
+      settings: {
+        labelMap: {
+          'staff': '内部人员',
+          'visitor': '来访人员',
+          'car': '内部车辆',
+          'visitorCar': '来访车辆'
+        },
+        xAxisType: 'time',
+        max: [4],
+        area: true,
+        metrics: ['staff', 'visitor', 'car', 'visitorCar'],
+        dimension: ['date']
+      },
+      timeRange: [],
+      pickerOptions: {
+        shortcuts: [{
+          text: '最近七日',
+          onClick(picker) {
+            const end = now
+            const start = new Date()
+            start.setTime(start.getTime() - oneDayTime * 7)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近十日',
+          onClick(picker) {
+            const end = now
+            const start = new Date()
+            start.setTime(start.getTime() - oneDayTime * 10)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近三十日',
+          onClick(picker) {
+            const end = now
+            const start = new Date()
+            start.setTime(start.getTime() - oneDayTime * 30)
+            picker.$emit('pick', [start, end])
+          }
+        }],
+        disabledDate(time) {
+          const oneMonthLater = new Date(now.getTime() - (oneDayTime * 31))
+          return time.getTime() < oneMonthLater
+        }
+      }
+    }
+  },
+  watch: {
+    timeRange: function(newV) {
+      if (newV) {
+        this.params.beginDate = formatToString(newV[0], 'DATE')
+        this.params.endDate = formatToString(newV[1], 'DATE')
+      } else {
+        this.initTime()
+      }
+      this.fetchData()
+    }
+  },
+  created() {
+    this.initTime()
+  },
+  activated() {
+    this.fetchData()
+  },
+  methods: {
+    initTime() {
+      this.params.beginDate = getDate(-7, 'DATE')
+      this.params.endDate = getDate(1, 'DATE')
+
+      this.timeRange = [this.params.beginDate, this.params.endDate]
+    },
+    fetchData() {
+      inOutCount(this.params).then(response => {
+        if (response.code === 200) {
+          const data = this.parseStatisticsData(response.data)
+          this.chartData.rows = data.rowDatas
+          this.chartData.max = [data.maxCount]
+        }
+      })
+    },
+    parseStatisticsData(obj) {
+      const staffList = obj.person
+      const visitorList = obj.visitorPerson
+      const carList = obj.car
+      const visitorCarList = obj.visitorCar
+
+      const rowDatas = [] // 返回的数据
+      let maxCount = 4 // 返回的最大的计数值
+
+      let start = parseToDate(this.params.beginDate, 'DATE').valueOf() // 开始日期的Date对象
+      const end = parseToDate(this.params.endDate, 'DATE').valueOf() // 结束日期的Date对象
+
+      let indexS = 0 // 内部人员索引
+      let indexV = 0 // 访客索引
+      let indexC = 0 // 内部车辆索引
+      let indexVc = 0 // 访客车辆索引
+
+      // 遍历时间
+      while (start < end) {
+        const staff = staffList[indexS]
+        const visitor = visitorList[indexV]
+        const car = carList[indexC]
+        const visitorCar = visitorCarList[indexVc]
+
+        let staffCount = 0
+        let visitorCount = 0
+        let carCount = 0
+        let visitorCarCount = 0
+
+        const date = formatToString(start, 'DATE')
+
+        if (typeof staff !== 'undefined') {
+          if (staff.date === date) {
+            staffCount = staff.count
+            indexS++
+          }
+        }
+
+        if (typeof visitor !== 'undefined') {
+          if (visitor.date === date) {
+            visitorCount = visitor.count
+            indexV++
+          }
+        }
+
+        if (typeof car !== 'undefined') {
+          if (car.date === date) {
+            carCount = car.count
+            indexC++
+          }
+        }
+
+        if (typeof visitorCar !== 'undefined') {
+          if (visitorCar.date === date) {
+            visitorCarCount = car.count
+            indexVc++
+          }
+        }
+
+        if (staffCount + visitorCount + carCount + visitorCarCount > 0) {
+          rowDatas.push({ date: date, staff: staffCount, visitor: visitorCount, car: carCount, visitorCar: visitorCarCount })
+        }
+        start += oneDayTime
+      }
+
+      // 设置最大值用以不显示小数
+      maxCount = Math.ceil(maxCount * 1.1)
+
+      // 返回生成好的图表数据
+      return {
+        rowDatas: rowDatas,
+        maxCount: maxCount
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/ctrl/statCharts/inOutDoorCount.vue b/src/views/ctrl/statCharts/inOutDoorCount.vue
new file mode 100644
index 0000000..1d73651
--- /dev/null
+++ b/src/views/ctrl/statCharts/inOutDoorCount.vue
@@ -0,0 +1,187 @@
+<template>
+  <div>
+    <el-date-picker
+      v-model="timeRange"
+      :picker-options="pickerOptions"
+      type="daterange"
+      range-separator="至"
+      start-placeholder="开始日期"
+      end-placeholder="结束日期"
+      style="margin-bottom: 10px;" />
+    <ve-histogram :data="chartData" :settings="settings" height="350px" />
+  </div>
+</template>
+
+<script>
+import { formatToString, getDate, oneDayTime } from '@/utils/calendarUtil'
+import { inOutDoorCount } from '@/api/statistics'
+
+const now = new Date()
+
+export default {
+  name: 'InOutDoorCount',
+  data() {
+    return {
+      params: {
+        beginDate: '',
+        endDate: ''
+      },
+      chartData: {
+        columns: ['name', 'person', 'car'],
+        rows: []
+      },
+      settings: {
+        labelMap: {
+          'person': '人员',
+          'car': '车辆'
+        },
+        max: [4],
+        metrics: ['person', 'car'],
+        dimension: ['name']
+      },
+      timeRange: [],
+      pickerOptions: {
+        shortcuts: [{
+          text: '最近七日',
+          onClick(picker) {
+            const end = now
+            const start = new Date()
+            start.setTime(start.getTime() - oneDayTime * 7)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近十日',
+          onClick(picker) {
+            const end = now
+            const start = new Date()
+            start.setTime(start.getTime() - oneDayTime * 10)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近三十日',
+          onClick(picker) {
+            const end = now
+            const start = new Date()
+            start.setTime(start.getTime() - oneDayTime * 30)
+            picker.$emit('pick', [start, end])
+          }
+        }],
+        disabledDate(time) {
+          const oneMonthLater = new Date(now.getTime() - (oneDayTime * 31))
+          return time.getTime() < oneMonthLater
+        }
+      }
+    }
+  },
+  watch: {
+    timeRange: function(newV) {
+      if (newV) {
+        this.params.beginDate = formatToString(newV[0], 'DATE')
+        this.params.endDate = formatToString(newV[1], 'DATE')
+      } else {
+        this.initTime()
+      }
+      this.fetchData()
+    }
+  },
+  created() {
+    this.initTime()
+  },
+  activated() {
+    this.fetchData()
+  },
+  methods: {
+    initTime() {
+      this.params.beginDate = getDate(-7, 'DATE')
+      this.params.endDate = getDate(1, 'DATE')
+
+      this.timeRange = [this.params.beginDate, this.params.endDate]
+    },
+    fetchData() {
+      inOutDoorCount(this.params).then(response => {
+        if (response.code === 200) {
+          const data = this.parseStatisticsData(response.data)
+          this.chartData.rows = data.rowDatas
+          this.chartData.max = [data.maxCount]
+        }
+      })
+    },
+    parseStatisticsData(obj) {
+      const personList = obj.person
+      const carList = obj.car
+
+      const rowDatas = [] // 返回的数据
+      let maxCount = 4 // 返回的最大的计数值
+      let indexS = 0
+      let indexV = 0
+      // 遍历内部人员（车辆）和来访人员（车辆），生成图表所需要的数据格式
+      while (indexS < personList.length || indexV < carList.length) {
+        let person = {}
+        let car = {}
+
+        // 获取内部人员（车辆）对象
+        if (indexS < personList.length) {
+          person = personList[indexS]
+        } else {
+          person = {}
+        }
+
+        // 获取来访人员（车辆）对象
+        if (indexV < carList.length) {
+          car = carList[indexV]
+        } else {
+          car = {}
+        }
+
+        // 如果内部人员（车辆）的队列已经取完则直接添加来访人员（车辆）
+        if (typeof person.name === 'undefined') {
+          rowDatas.push({ name: person.name, car: car.count })
+          indexV++
+          maxCount = Math.max(maxCount, car.count)
+          continue
+        }
+
+        // 如果来访人员（车辆）的队列已经取完则直接添加内部人员（车辆）
+        if (typeof person.name === 'undefined') {
+          rowDatas.push({ name: person.name, person: person.count })
+          indexS++
+          maxCount = Math.max(maxCount, person.count)
+          continue
+        }
+
+        // 队列都还没有处理完成则比较日期的大小
+        const carVal = car.name
+        const personVal = person.name
+        if (personVal < carVal) {
+          // 人员列表的日期比较小
+          rowDatas.push({ name: person.name, person: person.count })
+          indexS++
+          maxCount = Math.max(maxCount, person.count)
+        } else if (personVal > carVal) {
+          // 访客列表的日期比较小
+          rowDatas.push({ name: car.name, car: car.count })
+          indexV++
+          maxCount = Math.max(maxCount, car.count)
+        } else {
+          rowDatas.push({ name: person.name, person: person.count, car: car.count })
+          indexS++
+          indexV++
+          maxCount = Math.max(maxCount, person.count, car.count)
+        }
+      }
+      // 设置最大值用以不显示小数
+      maxCount = Math.ceil(maxCount * 1.1)
+
+      // 返回生成好的图表数据
+      return {
+        rowDatas: rowDatas,
+        maxCount: maxCount
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/ctrl/statCharts/inOutKeyCount.vue b/src/views/ctrl/statCharts/inOutKeyCount.vue
new file mode 100644
index 0000000..fa9a0b7
--- /dev/null
+++ b/src/views/ctrl/statCharts/inOutKeyCount.vue
@@ -0,0 +1,38 @@
+<template>
+  <ve-ring :data="chartData" :settings="settings" />
+</template>
+
+<script>
+import { inOutKeyCount } from '@/api/statistics'
+
+export default {
+  name: 'InOutKeyCount',
+  data() {
+    return {
+      chartData: {
+        columns: ['name', 'count'],
+        rows: []
+      },
+      settings: {
+        radius: [60, 100]
+      }
+    }
+  },
+  activated() {
+    this.fetchData()
+  },
+  methods: {
+    fetchData() {
+      inOutKeyCount().then(response => {
+        if (response.code === 200) {
+          this.chartData.rows = response.data
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/ctrl/statCharts/inOutToday.vue b/src/views/ctrl/statCharts/inOutToday.vue
new file mode 100644
index 0000000..c37fa7b
--- /dev/null
+++ b/src/views/ctrl/statCharts/inOutToday.vue
@@ -0,0 +1,45 @@
+<template>
+  <ve-ring :data="chartData" :settings="settings" />
+</template>
+
+<script>
+import { inOutToday } from '@/api/statistics'
+
+export default {
+  name: 'InOutToday',
+  data() {
+    return {
+      chartData: {
+        columns: ['name', 'count'],
+        rows: [
+          { count: 4, name: '内部人员' },
+          { count: 1, name: '来访人员' },
+          { count: 2, name: '内部车辆' },
+          { count: 1, name: '来访车辆' }
+        ]
+      },
+      settings: {
+        radius: [60, 100]
+      }
+    }
+  },
+  activated() {
+    this.fetchData()
+  },
+  methods: {
+    fetchData() {
+      inOutToday().then(response => {
+        if (response.code === 200) {
+          if (response.data.length > 0) {
+            this.chartData.rows = response.data
+          }
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/dashboard/portal.vue b/src/views/dashboard/portal.vue
index 4365c4b..8ff66c7 100644
--- a/src/views/dashboard/portal.vue
+++ b/src/views/dashboard/portal.vue
@@ -3,14 +3,14 @@
     <el-row>
       <el-col class="sub-system control-system">
         <div class="icon-subsystem">
-          <img src="/static/images/dashboard/icon-control.png">
-          <div><a>综合控制室</a></div>
+          <img src="/static/images/dashboard/icon-control.png" @click="changeSubSystem('ctrl')">
+          <div><a @click="changeSubSystem('ctrl')">综合控制室</a></div>
         </div>
       </el-col>
       <el-col class="sub-system door-system">
         <div class="icon-subsystem">
-          <img src="/static/images/dashboard/icon-door.png">
-          <div><a @click="doorSubSystem">营门管理</a></div>
+          <img src="/static/images/dashboard/icon-door.png" @click="changeSubSystem('door')">
+          <div><a @click="changeSubSystem('door')">营门管理</a></div>
         </div>
       </el-col>
       <el-col class="sub-system defence-system">
@@ -46,7 +46,7 @@
     </div>
 
     <div class="welcome">
-      <img src="/static/images/dashboard/setting-logo.png" height="40px" style="margin-right: 20px;" @click="settingSystem">
+      <img src="/static/images/dashboard/setting-logo.png" height="40px" style="margin-right: 20px;" @click="changeSubSystem('sys')">
       <img src="/static/images/dashboard/exit-logo.png" height="40px" @click="logout">
     </div>
   </div>
@@ -81,12 +81,17 @@
         console.log('获取子系统成功')
       })
     },
-    changeSubSystem(subSys) {
-      this.$store.commit('SET_CHANGEFLAG', '1')
-      this.$store.commit('SET_SYSTEM', subSys)
-      this.$store.dispatch('tagsView/delAllViews', true).then(({ visitedViews }) => {
-        this.$router.replace(subSys.url)
+    changeSubSystem(code) {
+      const system = this.systems.filter(subsys => {
+        return subsys.code === code
       })
+      if (typeof system !== 'undefined' && system.length > 0) {
+        this.$store.commit('SET_CHANGEFLAG', '1')
+        this.$store.commit('SET_SYSTEM', system[0])
+        this.$store.dispatch('tagsView/delAllViews', true).then(({ visitedViews }) => {
+          this.$router.replace(system[0].url)
+        })
+      }
     },
     settingSystem() {
       const setting = this.systems.filter(subsys => {

diff --git a/src/api/statistics.js b/src/api/statistics.js
index e20b4c0..741fbb2 100644
--- a/src/api/statistics.js
+++ b/src/api/statistics.js
@@ -55,3 +55,62 @@
     params
   })
 }
+
+// 综合控制室数量统计
+export function getStatisticsData() {
+  return request({
+    url: '/overview/statistics',
+    method: 'get'
+  })
+}
+
+// 今日进出营情况占比
+export function inOutToday() {
+  return request({
+    url: '/overview/todayPassPercentage',
+    method: 'get'
+  })
+}
+
+// 各类型设备安装数量
+export function devCount() {
+  return request({
+    url: '/overview/devicePercentage',
+    method: 'get'
+  })
+}
+
+// 进出营数量统计
+export function inOutCount(params) {
+  return request({
+    url: '/overview/passCountByType',
+    method: 'get',
+    params
+  })
+}
+
+// 各重点区域出入情况
+export function inOutKeyCount() {
+  return request({
+    url: '/overview/keyareaPassPercentage',
+    method: 'get'
+  })
+}
+
+// 各类型报警数量统计
+export function devAlarmCount(params) {
+  return request({
+    url: '/overview/alarmCountByType',
+    method: 'get',
+    params
+  })
+}
+
+// 各营门出入营量统计
+export function inOutDoorCount(params) {
+  return request({
+    url: '/overview/passCountByArea',
+    method: 'get',
+    params
+  })
+}
diff --git a/src/router/index.js b/src/router/index.js
index 9435997..823269b 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -10,6 +10,7 @@
 import Layout from '../views/layout/Layout'
 import { systemRouters } from './modules/system'
 import { doorSysRouters } from './modules/doorSys'
+import { ctrlSysRouters } from './modules/ctrlSys'
 
 /**
 * hidden: true                   if `hidden:true` will not show in the sidebar(default is false)
@@ -88,5 +89,6 @@
 export const asyncRouterMap = [
   ...systemRouters,
   ...doorSysRouters,
+  ...ctrlSysRouters,
   { path: '*', redirect: '/404', hidden: true, meta: {}}
 ]
diff --git a/src/router/modules/ctrlSys.js b/src/router/modules/ctrlSys.js
new file mode 100644
index 0000000..0dce4da
--- /dev/null
+++ b/src/router/modules/ctrlSys.js
@@ -0,0 +1,35 @@
+/* Layout */
+import SinglePageLayout from '@/views/layout/SinglePageLayout'
+export const ctrlSysRouters = [
+  {
+    path: '/ctrl',
+    name: 'ctrl',
+    redirect: '/ctrl',
+    hidden: true,
+    meta: {
+      title: '综合控制室子系统',
+      permission: ['/ctrl'],
+      isSys: true
+    }
+  },
+  {
+    path: '/ctrl/index1',
+    component: SinglePageLayout,
+    name: 'Ctrl1',
+    alwaysShow: false,
+    meta: {
+      title: '',
+      icon: '', // 图标
+      permission: ['/ctrl'], // 权限名称
+      sys: '/ctrl'
+    },
+    children: [
+      {
+        path: '/ctrl/index',
+        name: 'CtrlIndex',
+        component: () => import('@/views/ctrl/index'),
+        meta: { title: '综合控制室首页', icon: '', permission: ['/ctrl/index'], keepAlive: true }
+      }
+    ]
+  }
+]
diff --git a/src/views/ctrl/index.vue b/src/views/ctrl/index.vue
new file mode 100644
index 0000000..93efb6f
--- /dev/null
+++ b/src/views/ctrl/index.vue
@@ -0,0 +1,193 @@
+<template>
+  <div class="app-wrapper">
+    <el-row :gutter="20">
+      <el-col id="today-visitor" class="sub-data-block" style="margin-left: 20px;">
+        <div class="sub-title">今日访客</div>
+        <div class="statis-block">
+          <span class="big-size" v-text="statistics.todayVisitorPerson"/><span>人</span>
+        </div>
+      </el-col>
+
+      <el-col id="total-visitor" class="sub-data-block">
+        <div class="sub-title">累计访客</div>
+        <div class="statis-block">
+          <span class="big-size" v-text="statistics.totalVisitorPerson"/><span>人</span>
+        </div>
+      </el-col>
+
+      <el-col id="current-alarm" class="sub-data-block">
+        <div class="sub-title">当前报警</div>
+        <div class="statis-block">
+          <span class="big-size" v-text="statistics.currentAlarm"/><span>台</span>
+        </div>
+      </el-col>
+
+      <el-col id="total-alarm" class="sub-data-block">
+        <div class="sub-title">累计报警</div>
+        <div class="statis-block">
+          <span class="big-size" v-text="statistics.totalAlarm"/><span>次</span>
+        </div>
+      </el-col>
+
+      <el-col id="online-device" class="sub-data-block">
+        <div class="sub-title">在线设备</div>
+        <div class="statis-block">
+          <span class="big-size" v-text="statistics.onlineDevice"/><span>台</span>
+        </div>
+      </el-col>
+
+      <el-col id="total-device" class="sub-data-block">
+        <div class="sub-title">设备总量</div>
+        <div class="statis-block">
+          <span class="big-size" v-text="statistics.totalDevice"/><span>台</span>
+        </div>
+      </el-col>
+    </el-row>
+
+    <el-row :gutter="20">
+      <el-col :span="7" class="chart-block">
+        <div class="chart-title">今日进出营情况</div>
+        <in-out-today />
+      </el-col>
+
+      <el-col :span="7" class="chart-block">
+        <div class="chart-title">各类型设备安装数量</div>
+        <dev-count />
+      </el-col>
+
+      <el-col id="pass-count" :span="10" class="chart-block">
+        <div class="chart-title">进出营数量统计</div>
+        <in-out-count />
+      </el-col>
+    </el-row>
+
+    <el-row :gutter="20" style="margin-bottom: 40px;">
+      <el-col :span="7" class="chart-block">
+        <div class="chart-title">各重点区域出入情况</div>
+        <in-out-key-count />
+      </el-col>
+
+      <el-col id="dev-alarm-count" :span="10" class="chart-block">
+        <div class="chart-title">设备报警数量统计</div>
+        <dev-alarm-count />
+      </el-col>
+
+      <el-col :span="7" class="chart-block">
+        <div class="chart-title">各营门出入营量统计</div>
+        <in-out-door-count />
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { getStatisticsData } from '@/api/statistics'
+import InOutToday from '@/views/ctrl/statCharts/inOutToday'
+import InOutCount from '@/views/ctrl/statCharts/inOutCount'
+import DevCount from '@/views/ctrl/statCharts/devCount'
+import InOutKeyCount from '@/views/ctrl/statCharts/inOutKeyCount'
+import DevAlarmCount from '@/views/ctrl/statCharts/devAlarmCount'
+import InOutDoorCount from '@/views/ctrl/statCharts/inOutDoorCount'
+export default {
+  name: 'CtrlIndex',
+  components: { InOutToday, DevCount, InOutCount, InOutKeyCount, DevAlarmCount, InOutDoorCount },
+  data() {
+    return {
+      statistics: {
+        todayVisitorPerson: 0,
+        totalVisitorPerson: 0,
+        currentAlarm: 0,
+        totalAlarm: 0,
+        onlineDevice: 0,
+        totalDevice: 0
+      }
+    }
+  },
+  created() {
+    this.fetchStatisticsData()
+  },
+  methods: {
+    fetchStatisticsData() {
+      getStatisticsData().then(response => {
+        if (response.code === 200) {
+          this.statistics = response.data
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .app-wrapper {
+    background-color: #e9e9e9;
+    padding-bottom: 20px;
+  }
+
+  .sub-data-block {
+    width: calc((100vw - 120px) / 6);
+    border-radius: 16px;
+    float: left;
+    margin: 10px;
+    box-shadow: 2px 2px 8px #666666;
+  }
+  .sub-title {
+    font-weight: bold;
+    text-align: center;
+    font-family: 'Microsoft YaHei';
+    color: #fff;
+    font-size: 24px;
+    padding: 10px;
+  }
+  .statis-block {
+    text-align: center;
+    margin: 20px 10px 0px 10px;
+    padding: 10px;
+    color: #fff;
+    font-weight: bold;
+    letter-spacing: 1px;
+    font-size: 24px;
+  }
+  .big-size {
+    font-size: 64px;
+  }
+
+  .chart-title {
+    font-family: 'Microsoft YaHei';
+    color: #000000;
+    font-weight: bold;
+    font-size: 20px;
+    text-align: center;
+    padding: 10px;
+  }
+  .chart-block {
+    margin-left: 20px;
+    margin-top: 20px;
+    border-radius: 16px;
+    background-color: #FFFFFF;
+    box-shadow: 2px 2px 8px #666666;
+  }
+
+  #today-visitor {
+    background-image: linear-gradient(to right, #ff8fdf, #ff01b4);
+  }
+  #total-visitor {
+    background-image: linear-gradient(to right, #9280ff, #2400ff);
+  }
+  #current-alarm {
+    background-image: linear-gradient(to right, #ff696a, #ff0101);
+  }
+  #total-alarm {
+    background-image: linear-gradient(to right, #7fbbff, #0078ff);
+  }
+  #online-device {
+    background-image: linear-gradient(to right, #72ff7e, #01a411);
+  }
+  #total-device {
+    background-image: linear-gradient(to right, #ffa800, #ce7e00);
+  }
+
+  #pass-count, #dev-alarm-count {
+    width: calc(250vw / 6 - 70px);
+  }
+</style>
diff --git a/src/views/ctrl/statCharts/devAlarmCount.vue b/src/views/ctrl/statCharts/devAlarmCount.vue
new file mode 100644
index 0000000..ff2e6c4
--- /dev/null
+++ b/src/views/ctrl/statCharts/devAlarmCount.vue
@@ -0,0 +1,111 @@
+<template>
+  <div>
+    <el-date-picker
+      v-model="timeRange"
+      :picker-options="pickerOptions"
+      type="daterange"
+      range-separator="至"
+      start-placeholder="开始日期"
+      end-placeholder="结束日期"
+      style="margin-bottom: 10px;" />
+    <ve-histogram :data="chartData" :settings="settings" height="350px" />
+  </div>
+</template>
+
+<script>
+import { formatToString, getDate, oneDayTime } from '@/utils/calendarUtil'
+import { devAlarmCount } from '@/api/statistics'
+
+const now = new Date()
+
+export default {
+  name: 'DevAlarmCount',
+  data() {
+    return {
+      params: {
+        beginDate: '',
+        endDate: ''
+      },
+      chartData: {
+        columns: ['name', 'count'],
+        rows: []
+      },
+      settings: {
+        labelMap: {
+          'name': '设备类型',
+          'count': '报警数量'
+        },
+        max: [4]
+      },
+      timeRange: [],
+      pickerOptions: {
+        shortcuts: [{
+          text: '最近七日',
+          onClick(picker) {
+            const end = now
+            const start = new Date()
+            start.setTime(start.getTime() - oneDayTime * 7)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近十日',
+          onClick(picker) {
+            const end = now
+            const start = new Date()
+            start.setTime(start.getTime() - oneDayTime * 10)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近三十日',
+          onClick(picker) {
+            const end = now
+            const start = new Date()
+            start.setTime(start.getTime() - oneDayTime * 30)
+            picker.$emit('pick', [start, end])
+          }
+        }],
+        disabledDate(time) {
+          const oneMonthLater = new Date(now.getTime() - (oneDayTime * 31))
+          return time.getTime() < oneMonthLater
+        }
+      }
+    }
+  },
+  watch: {
+    timeRange: function(newV) {
+      if (newV) {
+        this.params.beginDate = formatToString(newV[0], 'DATE')
+        this.params.endDate = formatToString(newV[1], 'DATE')
+      } else {
+        this.initTime()
+      }
+      this.fetchData()
+    }
+  },
+  created() {
+    this.initTime()
+  },
+  activated() {
+    this.fetchData()
+  },
+  methods: {
+    initTime() {
+      this.params.beginDate = getDate(-7, 'DATE')
+      this.params.endDate = getDate(1, 'DATE')
+
+      this.timeRange = [this.params.beginDate, this.params.endDate]
+    },
+    fetchData() {
+      devAlarmCount(this.params).then(response => {
+        if (response.code === 200) {
+          this.chartData.rows = response.data
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/ctrl/statCharts/devCount.vue b/src/views/ctrl/statCharts/devCount.vue
new file mode 100644
index 0000000..d3e2902
--- /dev/null
+++ b/src/views/ctrl/statCharts/devCount.vue
@@ -0,0 +1,39 @@
+<template>
+  <ve-ring :data="chartData" :settings="settings" />
+</template>
+
+<script>
+import { devCount } from '@/api/statistics'
+
+export default {
+  name: 'DevCount',
+  data() {
+    return {
+      chartData: {
+        columns: ['name', 'count'],
+        rows: []
+      },
+      settings: {
+        // legendLimit: 4
+        radius: [60, 100]
+      }
+    }
+  },
+  activated() {
+    this.fetchData()
+  },
+  methods: {
+    fetchData() {
+      devCount().then(response => {
+        if (response.code === 200) {
+          this.chartData.rows = response.data
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/ctrl/statCharts/inOutCount.vue b/src/views/ctrl/statCharts/inOutCount.vue
new file mode 100644
index 0000000..1956305
--- /dev/null
+++ b/src/views/ctrl/statCharts/inOutCount.vue
@@ -0,0 +1,193 @@
+<template>
+  <div>
+    <el-date-picker
+      v-model="timeRange"
+      :picker-options="pickerOptions"
+      type="daterange"
+      range-separator="至"
+      start-placeholder="开始日期"
+      end-placeholder="结束日期"
+      style="margin-bottom: 10px"/>
+    <ve-line :data="chartData" :settings="settings" height="350px" />
+  </div>
+</template>
+
+<script>
+import { formatToString, parseToDate, getDate, oneDayTime } from '@/utils/calendarUtil'
+import { inOutCount } from '@/api/statistics'
+
+const now = new Date()
+
+export default {
+  name: 'InOutCount',
+  data() {
+    return {
+      params: {
+        beginDate: '',
+        endDate: ''
+      },
+      chartData: {
+        columns: ['date', 'staff', 'visitor', 'car', 'visitorCar'],
+        rows: []
+      },
+      settings: {
+        labelMap: {
+          'staff': '内部人员',
+          'visitor': '来访人员',
+          'car': '内部车辆',
+          'visitorCar': '来访车辆'
+        },
+        xAxisType: 'time',
+        max: [4],
+        area: true,
+        metrics: ['staff', 'visitor', 'car', 'visitorCar'],
+        dimension: ['date']
+      },
+      timeRange: [],
+      pickerOptions: {
+        shortcuts: [{
+          text: '最近七日',
+          onClick(picker) {
+            const end = now
+            const start = new Date()
+            start.setTime(start.getTime() - oneDayTime * 7)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近十日',
+          onClick(picker) {
+            const end = now
+            const start = new Date()
+            start.setTime(start.getTime() - oneDayTime * 10)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近三十日',
+          onClick(picker) {
+            const end = now
+            const start = new Date()
+            start.setTime(start.getTime() - oneDayTime * 30)
+            picker.$emit('pick', [start, end])
+          }
+        }],
+        disabledDate(time) {
+          const oneMonthLater = new Date(now.getTime() - (oneDayTime * 31))
+          return time.getTime() < oneMonthLater
+        }
+      }
+    }
+  },
+  watch: {
+    timeRange: function(newV) {
+      if (newV) {
+        this.params.beginDate = formatToString(newV[0], 'DATE')
+        this.params.endDate = formatToString(newV[1], 'DATE')
+      } else {
+        this.initTime()
+      }
+      this.fetchData()
+    }
+  },
+  created() {
+    this.initTime()
+  },
+  activated() {
+    this.fetchData()
+  },
+  methods: {
+    initTime() {
+      this.params.beginDate = getDate(-7, 'DATE')
+      this.params.endDate = getDate(1, 'DATE')
+
+      this.timeRange = [this.params.beginDate, this.params.endDate]
+    },
+    fetchData() {
+      inOutCount(this.params).then(response => {
+        if (response.code === 200) {
+          const data = this.parseStatisticsData(response.data)
+          this.chartData.rows = data.rowDatas
+          this.chartData.max = [data.maxCount]
+        }
+      })
+    },
+    parseStatisticsData(obj) {
+      const staffList = obj.person
+      const visitorList = obj.visitorPerson
+      const carList = obj.car
+      const visitorCarList = obj.visitorCar
+
+      const rowDatas = [] // 返回的数据
+      let maxCount = 4 // 返回的最大的计数值
+
+      let start = parseToDate(this.params.beginDate, 'DATE').valueOf() // 开始日期的Date对象
+      const end = parseToDate(this.params.endDate, 'DATE').valueOf() // 结束日期的Date对象
+
+      let indexS = 0 // 内部人员索引
+      let indexV = 0 // 访客索引
+      let indexC = 0 // 内部车辆索引
+      let indexVc = 0 // 访客车辆索引
+
+      // 遍历时间
+      while (start < end) {
+        const staff = staffList[indexS]
+        const visitor = visitorList[indexV]
+        const car = carList[indexC]
+        const visitorCar = visitorCarList[indexVc]
+
+        let staffCount = 0
+        let visitorCount = 0
+        let carCount = 0
+        let visitorCarCount = 0
+
+        const date = formatToString(start, 'DATE')
+
+        if (typeof staff !== 'undefined') {
+          if (staff.date === date) {
+            staffCount = staff.count
+            indexS++
+          }
+        }
+
+        if (typeof visitor !== 'undefined') {
+          if (visitor.date === date) {
+            visitorCount = visitor.count
+            indexV++
+          }
+        }
+
+        if (typeof car !== 'undefined') {
+          if (car.date === date) {
+            carCount = car.count
+            indexC++
+          }
+        }
+
+        if (typeof visitorCar !== 'undefined') {
+          if (visitorCar.date === date) {
+            visitorCarCount = car.count
+            indexVc++
+          }
+        }
+
+        if (staffCount + visitorCount + carCount + visitorCarCount > 0) {
+          rowDatas.push({ date: date, staff: staffCount, visitor: visitorCount, car: carCount, visitorCar: visitorCarCount })
+        }
+        start += oneDayTime
+      }
+
+      // 设置最大值用以不显示小数
+      maxCount = Math.ceil(maxCount * 1.1)
+
+      // 返回生成好的图表数据
+      return {
+        rowDatas: rowDatas,
+        maxCount: maxCount
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/ctrl/statCharts/inOutDoorCount.vue b/src/views/ctrl/statCharts/inOutDoorCount.vue
new file mode 100644
index 0000000..1d73651
--- /dev/null
+++ b/src/views/ctrl/statCharts/inOutDoorCount.vue
@@ -0,0 +1,187 @@
+<template>
+  <div>
+    <el-date-picker
+      v-model="timeRange"
+      :picker-options="pickerOptions"
+      type="daterange"
+      range-separator="至"
+      start-placeholder="开始日期"
+      end-placeholder="结束日期"
+      style="margin-bottom: 10px;" />
+    <ve-histogram :data="chartData" :settings="settings" height="350px" />
+  </div>
+</template>
+
+<script>
+import { formatToString, getDate, oneDayTime } from '@/utils/calendarUtil'
+import { inOutDoorCount } from '@/api/statistics'
+
+const now = new Date()
+
+export default {
+  name: 'InOutDoorCount',
+  data() {
+    return {
+      params: {
+        beginDate: '',
+        endDate: ''
+      },
+      chartData: {
+        columns: ['name', 'person', 'car'],
+        rows: []
+      },
+      settings: {
+        labelMap: {
+          'person': '人员',
+          'car': '车辆'
+        },
+        max: [4],
+        metrics: ['person', 'car'],
+        dimension: ['name']
+      },
+      timeRange: [],
+      pickerOptions: {
+        shortcuts: [{
+          text: '最近七日',
+          onClick(picker) {
+            const end = now
+            const start = new Date()
+            start.setTime(start.getTime() - oneDayTime * 7)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近十日',
+          onClick(picker) {
+            const end = now
+            const start = new Date()
+            start.setTime(start.getTime() - oneDayTime * 10)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近三十日',
+          onClick(picker) {
+            const end = now
+            const start = new Date()
+            start.setTime(start.getTime() - oneDayTime * 30)
+            picker.$emit('pick', [start, end])
+          }
+        }],
+        disabledDate(time) {
+          const oneMonthLater = new Date(now.getTime() - (oneDayTime * 31))
+          return time.getTime() < oneMonthLater
+        }
+      }
+    }
+  },
+  watch: {
+    timeRange: function(newV) {
+      if (newV) {
+        this.params.beginDate = formatToString(newV[0], 'DATE')
+        this.params.endDate = formatToString(newV[1], 'DATE')
+      } else {
+        this.initTime()
+      }
+      this.fetchData()
+    }
+  },
+  created() {
+    this.initTime()
+  },
+  activated() {
+    this.fetchData()
+  },
+  methods: {
+    initTime() {
+      this.params.beginDate = getDate(-7, 'DATE')
+      this.params.endDate = getDate(1, 'DATE')
+
+      this.timeRange = [this.params.beginDate, this.params.endDate]
+    },
+    fetchData() {
+      inOutDoorCount(this.params).then(response => {
+        if (response.code === 200) {
+          const data = this.parseStatisticsData(response.data)
+          this.chartData.rows = data.rowDatas
+          this.chartData.max = [data.maxCount]
+        }
+      })
+    },
+    parseStatisticsData(obj) {
+      const personList = obj.person
+      const carList = obj.car
+
+      const rowDatas = [] // 返回的数据
+      let maxCount = 4 // 返回的最大的计数值
+      let indexS = 0
+      let indexV = 0
+      // 遍历内部人员（车辆）和来访人员（车辆），生成图表所需要的数据格式
+      while (indexS < personList.length || indexV < carList.length) {
+        let person = {}
+        let car = {}
+
+        // 获取内部人员（车辆）对象
+        if (indexS < personList.length) {
+          person = personList[indexS]
+        } else {
+          person = {}
+        }
+
+        // 获取来访人员（车辆）对象
+        if (indexV < carList.length) {
+          car = carList[indexV]
+        } else {
+          car = {}
+        }
+
+        // 如果内部人员（车辆）的队列已经取完则直接添加来访人员（车辆）
+        if (typeof person.name === 'undefined') {
+          rowDatas.push({ name: person.name, car: car.count })
+          indexV++
+          maxCount = Math.max(maxCount, car.count)
+          continue
+        }
+
+        // 如果来访人员（车辆）的队列已经取完则直接添加内部人员（车辆）
+        if (typeof person.name === 'undefined') {
+          rowDatas.push({ name: person.name, person: person.count })
+          indexS++
+          maxCount = Math.max(maxCount, person.count)
+          continue
+        }
+
+        // 队列都还没有处理完成则比较日期的大小
+        const carVal = car.name
+        const personVal = person.name
+        if (personVal < carVal) {
+          // 人员列表的日期比较小
+          rowDatas.push({ name: person.name, person: person.count })
+          indexS++
+          maxCount = Math.max(maxCount, person.count)
+        } else if (personVal > carVal) {
+          // 访客列表的日期比较小
+          rowDatas.push({ name: car.name, car: car.count })
+          indexV++
+          maxCount = Math.max(maxCount, car.count)
+        } else {
+          rowDatas.push({ name: person.name, person: person.count, car: car.count })
+          indexS++
+          indexV++
+          maxCount = Math.max(maxCount, person.count, car.count)
+        }
+      }
+      // 设置最大值用以不显示小数
+      maxCount = Math.ceil(maxCount * 1.1)
+
+      // 返回生成好的图表数据
+      return {
+        rowDatas: rowDatas,
+        maxCount: maxCount
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/ctrl/statCharts/inOutKeyCount.vue b/src/views/ctrl/statCharts/inOutKeyCount.vue
new file mode 100644
index 0000000..fa9a0b7
--- /dev/null
+++ b/src/views/ctrl/statCharts/inOutKeyCount.vue
@@ -0,0 +1,38 @@
+<template>
+  <ve-ring :data="chartData" :settings="settings" />
+</template>
+
+<script>
+import { inOutKeyCount } from '@/api/statistics'
+
+export default {
+  name: 'InOutKeyCount',
+  data() {
+    return {
+      chartData: {
+        columns: ['name', 'count'],
+        rows: []
+      },
+      settings: {
+        radius: [60, 100]
+      }
+    }
+  },
+  activated() {
+    this.fetchData()
+  },
+  methods: {
+    fetchData() {
+      inOutKeyCount().then(response => {
+        if (response.code === 200) {
+          this.chartData.rows = response.data
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/ctrl/statCharts/inOutToday.vue b/src/views/ctrl/statCharts/inOutToday.vue
new file mode 100644
index 0000000..c37fa7b
--- /dev/null
+++ b/src/views/ctrl/statCharts/inOutToday.vue
@@ -0,0 +1,45 @@
+<template>
+  <ve-ring :data="chartData" :settings="settings" />
+</template>
+
+<script>
+import { inOutToday } from '@/api/statistics'
+
+export default {
+  name: 'InOutToday',
+  data() {
+    return {
+      chartData: {
+        columns: ['name', 'count'],
+        rows: [
+          { count: 4, name: '内部人员' },
+          { count: 1, name: '来访人员' },
+          { count: 2, name: '内部车辆' },
+          { count: 1, name: '来访车辆' }
+        ]
+      },
+      settings: {
+        radius: [60, 100]
+      }
+    }
+  },
+  activated() {
+    this.fetchData()
+  },
+  methods: {
+    fetchData() {
+      inOutToday().then(response => {
+        if (response.code === 200) {
+          if (response.data.length > 0) {
+            this.chartData.rows = response.data
+          }
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/dashboard/portal.vue b/src/views/dashboard/portal.vue
index 4365c4b..8ff66c7 100644
--- a/src/views/dashboard/portal.vue
+++ b/src/views/dashboard/portal.vue
@@ -3,14 +3,14 @@
     <el-row>
       <el-col class="sub-system control-system">
         <div class="icon-subsystem">
-          <img src="/static/images/dashboard/icon-control.png">
-          <div><a>综合控制室</a></div>
+          <img src="/static/images/dashboard/icon-control.png" @click="changeSubSystem('ctrl')">
+          <div><a @click="changeSubSystem('ctrl')">综合控制室</a></div>
         </div>
       </el-col>
       <el-col class="sub-system door-system">
         <div class="icon-subsystem">
-          <img src="/static/images/dashboard/icon-door.png">
-          <div><a @click="doorSubSystem">营门管理</a></div>
+          <img src="/static/images/dashboard/icon-door.png" @click="changeSubSystem('door')">
+          <div><a @click="changeSubSystem('door')">营门管理</a></div>
         </div>
       </el-col>
       <el-col class="sub-system defence-system">
@@ -46,7 +46,7 @@
     </div>
 
     <div class="welcome">
-      <img src="/static/images/dashboard/setting-logo.png" height="40px" style="margin-right: 20px;" @click="settingSystem">
+      <img src="/static/images/dashboard/setting-logo.png" height="40px" style="margin-right: 20px;" @click="changeSubSystem('sys')">
       <img src="/static/images/dashboard/exit-logo.png" height="40px" @click="logout">
     </div>
   </div>
@@ -81,12 +81,17 @@
         console.log('获取子系统成功')
       })
     },
-    changeSubSystem(subSys) {
-      this.$store.commit('SET_CHANGEFLAG', '1')
-      this.$store.commit('SET_SYSTEM', subSys)
-      this.$store.dispatch('tagsView/delAllViews', true).then(({ visitedViews }) => {
-        this.$router.replace(subSys.url)
+    changeSubSystem(code) {
+      const system = this.systems.filter(subsys => {
+        return subsys.code === code
       })
+      if (typeof system !== 'undefined' && system.length > 0) {
+        this.$store.commit('SET_CHANGEFLAG', '1')
+        this.$store.commit('SET_SYSTEM', system[0])
+        this.$store.dispatch('tagsView/delAllViews', true).then(({ visitedViews }) => {
+          this.$router.replace(system[0].url)
+        })
+      }
     },
     settingSystem() {
       const setting = this.systems.filter(subsys => {
diff --git a/src/views/layout/SinglePageLayout.vue b/src/views/layout/SinglePageLayout.vue
new file mode 100644
index 0000000..7d352fe
--- /dev/null
+++ b/src/views/layout/SinglePageLayout.vue
@@ -0,0 +1,59 @@
+<template>
+  <div :class="classObj" class="app-wrapper">
+    <app-header class="app-header"/>
+    <div class="app-body">
+      <!--主页-->
+      <el-scrollbar>
+        <app-main/>
+      </el-scrollbar>
+    </div>
+  </div>
+</template>
+
+<script>
+import { AppHeader, AppMain } from './components'
+
+export default {
+  name: 'SinglePageLayout',
+  components: { AppMain, AppHeader },
+  computed: {
+    classObj() {
+      return {
+        mobile: this.device === 'mobile'
+      }
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .app-wrapper {
+    position: relative;
+    height: 100%;
+    width: 100%;
+    &.mobile.openSidebar{
+      position: fixed;
+      top: 0;
+    }
+  }
+  .drawer-bg {
+    background: #000;
+    opacity: 0.3;
+    width: 100%;
+    top: 0;
+    height: 100%;
+    position: absolute;
+    z-index: 999;
+  }
+  .el-scrollbar{
+    /*height: calc(100vh + 17px);*/
+    height: 100vh;
+  }
+</style>
+
+<style>
+<!-- 隐藏横向的滚动条 -->
+  .el-scrollbar__wrap {
+    overflow-x: hidden !important;
+  }
+</style>

diff --git a/src/api/statistics.js b/src/api/statistics.js
index e20b4c0..741fbb2 100644
--- a/src/api/statistics.js
+++ b/src/api/statistics.js
@@ -55,3 +55,62 @@
     params
   })
 }
+
+// 综合控制室数量统计
+export function getStatisticsData() {
+  return request({
+    url: '/overview/statistics',
+    method: 'get'
+  })
+}
+
+// 今日进出营情况占比
+export function inOutToday() {
+  return request({
+    url: '/overview/todayPassPercentage',
+    method: 'get'
+  })
+}
+
+// 各类型设备安装数量
+export function devCount() {
+  return request({
+    url: '/overview/devicePercentage',
+    method: 'get'
+  })
+}
+
+// 进出营数量统计
+export function inOutCount(params) {
+  return request({
+    url: '/overview/passCountByType',
+    method: 'get',
+    params
+  })
+}
+
+// 各重点区域出入情况
+export function inOutKeyCount() {
+  return request({
+    url: '/overview/keyareaPassPercentage',
+    method: 'get'
+  })
+}
+
+// 各类型报警数量统计
+export function devAlarmCount(params) {
+  return request({
+    url: '/overview/alarmCountByType',
+    method: 'get',
+    params
+  })
+}
+
+// 各营门出入营量统计
+export function inOutDoorCount(params) {
+  return request({
+    url: '/overview/passCountByArea',
+    method: 'get',
+    params
+  })
+}
diff --git a/src/router/index.js b/src/router/index.js
index 9435997..823269b 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -10,6 +10,7 @@
 import Layout from '../views/layout/Layout'
 import { systemRouters } from './modules/system'
 import { doorSysRouters } from './modules/doorSys'
+import { ctrlSysRouters } from './modules/ctrlSys'
 
 /**
 * hidden: true                   if `hidden:true` will not show in the sidebar(default is false)
@@ -88,5 +89,6 @@
 export const asyncRouterMap = [
   ...systemRouters,
   ...doorSysRouters,
+  ...ctrlSysRouters,
   { path: '*', redirect: '/404', hidden: true, meta: {}}
 ]
diff --git a/src/router/modules/ctrlSys.js b/src/router/modules/ctrlSys.js
new file mode 100644
index 0000000..0dce4da
--- /dev/null
+++ b/src/router/modules/ctrlSys.js
@@ -0,0 +1,35 @@
+/* Layout */
+import SinglePageLayout from '@/views/layout/SinglePageLayout'
+export const ctrlSysRouters = [
+  {
+    path: '/ctrl',
+    name: 'ctrl',
+    redirect: '/ctrl',
+    hidden: true,
+    meta: {
+      title: '综合控制室子系统',
+      permission: ['/ctrl'],
+      isSys: true
+    }
+  },
+  {
+    path: '/ctrl/index1',
+    component: SinglePageLayout,
+    name: 'Ctrl1',
+    alwaysShow: false,
+    meta: {
+      title: '',
+      icon: '', // 图标
+      permission: ['/ctrl'], // 权限名称
+      sys: '/ctrl'
+    },
+    children: [
+      {
+        path: '/ctrl/index',
+        name: 'CtrlIndex',
+        component: () => import('@/views/ctrl/index'),
+        meta: { title: '综合控制室首页', icon: '', permission: ['/ctrl/index'], keepAlive: true }
+      }
+    ]
+  }
+]
diff --git a/src/views/ctrl/index.vue b/src/views/ctrl/index.vue
new file mode 100644
index 0000000..93efb6f
--- /dev/null
+++ b/src/views/ctrl/index.vue
@@ -0,0 +1,193 @@
+<template>
+  <div class="app-wrapper">
+    <el-row :gutter="20">
+      <el-col id="today-visitor" class="sub-data-block" style="margin-left: 20px;">
+        <div class="sub-title">今日访客</div>
+        <div class="statis-block">
+          <span class="big-size" v-text="statistics.todayVisitorPerson"/><span>人</span>
+        </div>
+      </el-col>
+
+      <el-col id="total-visitor" class="sub-data-block">
+        <div class="sub-title">累计访客</div>
+        <div class="statis-block">
+          <span class="big-size" v-text="statistics.totalVisitorPerson"/><span>人</span>
+        </div>
+      </el-col>
+
+      <el-col id="current-alarm" class="sub-data-block">
+        <div class="sub-title">当前报警</div>
+        <div class="statis-block">
+          <span class="big-size" v-text="statistics.currentAlarm"/><span>台</span>
+        </div>
+      </el-col>
+
+      <el-col id="total-alarm" class="sub-data-block">
+        <div class="sub-title">累计报警</div>
+        <div class="statis-block">
+          <span class="big-size" v-text="statistics.totalAlarm"/><span>次</span>
+        </div>
+      </el-col>
+
+      <el-col id="online-device" class="sub-data-block">
+        <div class="sub-title">在线设备</div>
+        <div class="statis-block">
+          <span class="big-size" v-text="statistics.onlineDevice"/><span>台</span>
+        </div>
+      </el-col>
+
+      <el-col id="total-device" class="sub-data-block">
+        <div class="sub-title">设备总量</div>
+        <div class="statis-block">
+          <span class="big-size" v-text="statistics.totalDevice"/><span>台</span>
+        </div>
+      </el-col>
+    </el-row>
+
+    <el-row :gutter="20">
+      <el-col :span="7" class="chart-block">
+        <div class="chart-title">今日进出营情况</div>
+        <in-out-today />
+      </el-col>
+
+      <el-col :span="7" class="chart-block">
+        <div class="chart-title">各类型设备安装数量</div>
+        <dev-count />
+      </el-col>
+
+      <el-col id="pass-count" :span="10" class="chart-block">
+        <div class="chart-title">进出营数量统计</div>
+        <in-out-count />
+      </el-col>
+    </el-row>
+
+    <el-row :gutter="20" style="margin-bottom: 40px;">
+      <el-col :span="7" class="chart-block">
+        <div class="chart-title">各重点区域出入情况</div>
+        <in-out-key-count />
+      </el-col>
+
+      <el-col id="dev-alarm-count" :span="10" class="chart-block">
+        <div class="chart-title">设备报警数量统计</div>
+        <dev-alarm-count />
+      </el-col>
+
+      <el-col :span="7" class="chart-block">
+        <div class="chart-title">各营门出入营量统计</div>
+        <in-out-door-count />
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { getStatisticsData } from '@/api/statistics'
+import InOutToday from '@/views/ctrl/statCharts/inOutToday'
+import InOutCount from '@/views/ctrl/statCharts/inOutCount'
+import DevCount from '@/views/ctrl/statCharts/devCount'
+import InOutKeyCount from '@/views/ctrl/statCharts/inOutKeyCount'
+import DevAlarmCount from '@/views/ctrl/statCharts/devAlarmCount'
+import InOutDoorCount from '@/views/ctrl/statCharts/inOutDoorCount'
+export default {
+  name: 'CtrlIndex',
+  components: { InOutToday, DevCount, InOutCount, InOutKeyCount, DevAlarmCount, InOutDoorCount },
+  data() {
+    return {
+      statistics: {
+        todayVisitorPerson: 0,
+        totalVisitorPerson: 0,
+        currentAlarm: 0,
+        totalAlarm: 0,
+        onlineDevice: 0,
+        totalDevice: 0
+      }
+    }
+  },
+  created() {
+    this.fetchStatisticsData()
+  },
+  methods: {
+    fetchStatisticsData() {
+      getStatisticsData().then(response => {
+        if (response.code === 200) {
+          this.statistics = response.data
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .app-wrapper {
+    background-color: #e9e9e9;
+    padding-bottom: 20px;
+  }
+
+  .sub-data-block {
+    width: calc((100vw - 120px) / 6);
+    border-radius: 16px;
+    float: left;
+    margin: 10px;
+    box-shadow: 2px 2px 8px #666666;
+  }
+  .sub-title {
+    font-weight: bold;
+    text-align: center;
+    font-family: 'Microsoft YaHei';
+    color: #fff;
+    font-size: 24px;
+    padding: 10px;
+  }
+  .statis-block {
+    text-align: center;
+    margin: 20px 10px 0px 10px;
+    padding: 10px;
+    color: #fff;
+    font-weight: bold;
+    letter-spacing: 1px;
+    font-size: 24px;
+  }
+  .big-size {
+    font-size: 64px;
+  }
+
+  .chart-title {
+    font-family: 'Microsoft YaHei';
+    color: #000000;
+    font-weight: bold;
+    font-size: 20px;
+    text-align: center;
+    padding: 10px;
+  }
+  .chart-block {
+    margin-left: 20px;
+    margin-top: 20px;
+    border-radius: 16px;
+    background-color: #FFFFFF;
+    box-shadow: 2px 2px 8px #666666;
+  }
+
+  #today-visitor {
+    background-image: linear-gradient(to right, #ff8fdf, #ff01b4);
+  }
+  #total-visitor {
+    background-image: linear-gradient(to right, #9280ff, #2400ff);
+  }
+  #current-alarm {
+    background-image: linear-gradient(to right, #ff696a, #ff0101);
+  }
+  #total-alarm {
+    background-image: linear-gradient(to right, #7fbbff, #0078ff);
+  }
+  #online-device {
+    background-image: linear-gradient(to right, #72ff7e, #01a411);
+  }
+  #total-device {
+    background-image: linear-gradient(to right, #ffa800, #ce7e00);
+  }
+
+  #pass-count, #dev-alarm-count {
+    width: calc(250vw / 6 - 70px);
+  }
+</style>
diff --git a/src/views/ctrl/statCharts/devAlarmCount.vue b/src/views/ctrl/statCharts/devAlarmCount.vue
new file mode 100644
index 0000000..ff2e6c4
--- /dev/null
+++ b/src/views/ctrl/statCharts/devAlarmCount.vue
@@ -0,0 +1,111 @@
+<template>
+  <div>
+    <el-date-picker
+      v-model="timeRange"
+      :picker-options="pickerOptions"
+      type="daterange"
+      range-separator="至"
+      start-placeholder="开始日期"
+      end-placeholder="结束日期"
+      style="margin-bottom: 10px;" />
+    <ve-histogram :data="chartData" :settings="settings" height="350px" />
+  </div>
+</template>
+
+<script>
+import { formatToString, getDate, oneDayTime } from '@/utils/calendarUtil'
+import { devAlarmCount } from '@/api/statistics'
+
+const now = new Date()
+
+export default {
+  name: 'DevAlarmCount',
+  data() {
+    return {
+      params: {
+        beginDate: '',
+        endDate: ''
+      },
+      chartData: {
+        columns: ['name', 'count'],
+        rows: []
+      },
+      settings: {
+        labelMap: {
+          'name': '设备类型',
+          'count': '报警数量'
+        },
+        max: [4]
+      },
+      timeRange: [],
+      pickerOptions: {
+        shortcuts: [{
+          text: '最近七日',
+          onClick(picker) {
+            const end = now
+            const start = new Date()
+            start.setTime(start.getTime() - oneDayTime * 7)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近十日',
+          onClick(picker) {
+            const end = now
+            const start = new Date()
+            start.setTime(start.getTime() - oneDayTime * 10)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近三十日',
+          onClick(picker) {
+            const end = now
+            const start = new Date()
+            start.setTime(start.getTime() - oneDayTime * 30)
+            picker.$emit('pick', [start, end])
+          }
+        }],
+        disabledDate(time) {
+          const oneMonthLater = new Date(now.getTime() - (oneDayTime * 31))
+          return time.getTime() < oneMonthLater
+        }
+      }
+    }
+  },
+  watch: {
+    timeRange: function(newV) {
+      if (newV) {
+        this.params.beginDate = formatToString(newV[0], 'DATE')
+        this.params.endDate = formatToString(newV[1], 'DATE')
+      } else {
+        this.initTime()
+      }
+      this.fetchData()
+    }
+  },
+  created() {
+    this.initTime()
+  },
+  activated() {
+    this.fetchData()
+  },
+  methods: {
+    initTime() {
+      this.params.beginDate = getDate(-7, 'DATE')
+      this.params.endDate = getDate(1, 'DATE')
+
+      this.timeRange = [this.params.beginDate, this.params.endDate]
+    },
+    fetchData() {
+      devAlarmCount(this.params).then(response => {
+        if (response.code === 200) {
+          this.chartData.rows = response.data
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/ctrl/statCharts/devCount.vue b/src/views/ctrl/statCharts/devCount.vue
new file mode 100644
index 0000000..d3e2902
--- /dev/null
+++ b/src/views/ctrl/statCharts/devCount.vue
@@ -0,0 +1,39 @@
+<template>
+  <ve-ring :data="chartData" :settings="settings" />
+</template>
+
+<script>
+import { devCount } from '@/api/statistics'
+
+export default {
+  name: 'DevCount',
+  data() {
+    return {
+      chartData: {
+        columns: ['name', 'count'],
+        rows: []
+      },
+      settings: {
+        // legendLimit: 4
+        radius: [60, 100]
+      }
+    }
+  },
+  activated() {
+    this.fetchData()
+  },
+  methods: {
+    fetchData() {
+      devCount().then(response => {
+        if (response.code === 200) {
+          this.chartData.rows = response.data
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/ctrl/statCharts/inOutCount.vue b/src/views/ctrl/statCharts/inOutCount.vue
new file mode 100644
index 0000000..1956305
--- /dev/null
+++ b/src/views/ctrl/statCharts/inOutCount.vue
@@ -0,0 +1,193 @@
+<template>
+  <div>
+    <el-date-picker
+      v-model="timeRange"
+      :picker-options="pickerOptions"
+      type="daterange"
+      range-separator="至"
+      start-placeholder="开始日期"
+      end-placeholder="结束日期"
+      style="margin-bottom: 10px"/>
+    <ve-line :data="chartData" :settings="settings" height="350px" />
+  </div>
+</template>
+
+<script>
+import { formatToString, parseToDate, getDate, oneDayTime } from '@/utils/calendarUtil'
+import { inOutCount } from '@/api/statistics'
+
+const now = new Date()
+
+export default {
+  name: 'InOutCount',
+  data() {
+    return {
+      params: {
+        beginDate: '',
+        endDate: ''
+      },
+      chartData: {
+        columns: ['date', 'staff', 'visitor', 'car', 'visitorCar'],
+        rows: []
+      },
+      settings: {
+        labelMap: {
+          'staff': '内部人员',
+          'visitor': '来访人员',
+          'car': '内部车辆',
+          'visitorCar': '来访车辆'
+        },
+        xAxisType: 'time',
+        max: [4],
+        area: true,
+        metrics: ['staff', 'visitor', 'car', 'visitorCar'],
+        dimension: ['date']
+      },
+      timeRange: [],
+      pickerOptions: {
+        shortcuts: [{
+          text: '最近七日',
+          onClick(picker) {
+            const end = now
+            const start = new Date()
+            start.setTime(start.getTime() - oneDayTime * 7)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近十日',
+          onClick(picker) {
+            const end = now
+            const start = new Date()
+            start.setTime(start.getTime() - oneDayTime * 10)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近三十日',
+          onClick(picker) {
+            const end = now
+            const start = new Date()
+            start.setTime(start.getTime() - oneDayTime * 30)
+            picker.$emit('pick', [start, end])
+          }
+        }],
+        disabledDate(time) {
+          const oneMonthLater = new Date(now.getTime() - (oneDayTime * 31))
+          return time.getTime() < oneMonthLater
+        }
+      }
+    }
+  },
+  watch: {
+    timeRange: function(newV) {
+      if (newV) {
+        this.params.beginDate = formatToString(newV[0], 'DATE')
+        this.params.endDate = formatToString(newV[1], 'DATE')
+      } else {
+        this.initTime()
+      }
+      this.fetchData()
+    }
+  },
+  created() {
+    this.initTime()
+  },
+  activated() {
+    this.fetchData()
+  },
+  methods: {
+    initTime() {
+      this.params.beginDate = getDate(-7, 'DATE')
+      this.params.endDate = getDate(1, 'DATE')
+
+      this.timeRange = [this.params.beginDate, this.params.endDate]
+    },
+    fetchData() {
+      inOutCount(this.params).then(response => {
+        if (response.code === 200) {
+          const data = this.parseStatisticsData(response.data)
+          this.chartData.rows = data.rowDatas
+          this.chartData.max = [data.maxCount]
+        }
+      })
+    },
+    parseStatisticsData(obj) {
+      const staffList = obj.person
+      const visitorList = obj.visitorPerson
+      const carList = obj.car
+      const visitorCarList = obj.visitorCar
+
+      const rowDatas = [] // 返回的数据
+      let maxCount = 4 // 返回的最大的计数值
+
+      let start = parseToDate(this.params.beginDate, 'DATE').valueOf() // 开始日期的Date对象
+      const end = parseToDate(this.params.endDate, 'DATE').valueOf() // 结束日期的Date对象
+
+      let indexS = 0 // 内部人员索引
+      let indexV = 0 // 访客索引
+      let indexC = 0 // 内部车辆索引
+      let indexVc = 0 // 访客车辆索引
+
+      // 遍历时间
+      while (start < end) {
+        const staff = staffList[indexS]
+        const visitor = visitorList[indexV]
+        const car = carList[indexC]
+        const visitorCar = visitorCarList[indexVc]
+
+        let staffCount = 0
+        let visitorCount = 0
+        let carCount = 0
+        let visitorCarCount = 0
+
+        const date = formatToString(start, 'DATE')
+
+        if (typeof staff !== 'undefined') {
+          if (staff.date === date) {
+            staffCount = staff.count
+            indexS++
+          }
+        }
+
+        if (typeof visitor !== 'undefined') {
+          if (visitor.date === date) {
+            visitorCount = visitor.count
+            indexV++
+          }
+        }
+
+        if (typeof car !== 'undefined') {
+          if (car.date === date) {
+            carCount = car.count
+            indexC++
+          }
+        }
+
+        if (typeof visitorCar !== 'undefined') {
+          if (visitorCar.date === date) {
+            visitorCarCount = car.count
+            indexVc++
+          }
+        }
+
+        if (staffCount + visitorCount + carCount + visitorCarCount > 0) {
+          rowDatas.push({ date: date, staff: staffCount, visitor: visitorCount, car: carCount, visitorCar: visitorCarCount })
+        }
+        start += oneDayTime
+      }
+
+      // 设置最大值用以不显示小数
+      maxCount = Math.ceil(maxCount * 1.1)
+
+      // 返回生成好的图表数据
+      return {
+        rowDatas: rowDatas,
+        maxCount: maxCount
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/ctrl/statCharts/inOutDoorCount.vue b/src/views/ctrl/statCharts/inOutDoorCount.vue
new file mode 100644
index 0000000..1d73651
--- /dev/null
+++ b/src/views/ctrl/statCharts/inOutDoorCount.vue
@@ -0,0 +1,187 @@
+<template>
+  <div>
+    <el-date-picker
+      v-model="timeRange"
+      :picker-options="pickerOptions"
+      type="daterange"
+      range-separator="至"
+      start-placeholder="开始日期"
+      end-placeholder="结束日期"
+      style="margin-bottom: 10px;" />
+    <ve-histogram :data="chartData" :settings="settings" height="350px" />
+  </div>
+</template>
+
+<script>
+import { formatToString, getDate, oneDayTime } from '@/utils/calendarUtil'
+import { inOutDoorCount } from '@/api/statistics'
+
+const now = new Date()
+
+export default {
+  name: 'InOutDoorCount',
+  data() {
+    return {
+      params: {
+        beginDate: '',
+        endDate: ''
+      },
+      chartData: {
+        columns: ['name', 'person', 'car'],
+        rows: []
+      },
+      settings: {
+        labelMap: {
+          'person': '人员',
+          'car': '车辆'
+        },
+        max: [4],
+        metrics: ['person', 'car'],
+        dimension: ['name']
+      },
+      timeRange: [],
+      pickerOptions: {
+        shortcuts: [{
+          text: '最近七日',
+          onClick(picker) {
+            const end = now
+            const start = new Date()
+            start.setTime(start.getTime() - oneDayTime * 7)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近十日',
+          onClick(picker) {
+            const end = now
+            const start = new Date()
+            start.setTime(start.getTime() - oneDayTime * 10)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近三十日',
+          onClick(picker) {
+            const end = now
+            const start = new Date()
+            start.setTime(start.getTime() - oneDayTime * 30)
+            picker.$emit('pick', [start, end])
+          }
+        }],
+        disabledDate(time) {
+          const oneMonthLater = new Date(now.getTime() - (oneDayTime * 31))
+          return time.getTime() < oneMonthLater
+        }
+      }
+    }
+  },
+  watch: {
+    timeRange: function(newV) {
+      if (newV) {
+        this.params.beginDate = formatToString(newV[0], 'DATE')
+        this.params.endDate = formatToString(newV[1], 'DATE')
+      } else {
+        this.initTime()
+      }
+      this.fetchData()
+    }
+  },
+  created() {
+    this.initTime()
+  },
+  activated() {
+    this.fetchData()
+  },
+  methods: {
+    initTime() {
+      this.params.beginDate = getDate(-7, 'DATE')
+      this.params.endDate = getDate(1, 'DATE')
+
+      this.timeRange = [this.params.beginDate, this.params.endDate]
+    },
+    fetchData() {
+      inOutDoorCount(this.params).then(response => {
+        if (response.code === 200) {
+          const data = this.parseStatisticsData(response.data)
+          this.chartData.rows = data.rowDatas
+          this.chartData.max = [data.maxCount]
+        }
+      })
+    },
+    parseStatisticsData(obj) {
+      const personList = obj.person
+      const carList = obj.car
+
+      const rowDatas = [] // 返回的数据
+      let maxCount = 4 // 返回的最大的计数值
+      let indexS = 0
+      let indexV = 0
+      // 遍历内部人员（车辆）和来访人员（车辆），生成图表所需要的数据格式
+      while (indexS < personList.length || indexV < carList.length) {
+        let person = {}
+        let car = {}
+
+        // 获取内部人员（车辆）对象
+        if (indexS < personList.length) {
+          person = personList[indexS]
+        } else {
+          person = {}
+        }
+
+        // 获取来访人员（车辆）对象
+        if (indexV < carList.length) {
+          car = carList[indexV]
+        } else {
+          car = {}
+        }
+
+        // 如果内部人员（车辆）的队列已经取完则直接添加来访人员（车辆）
+        if (typeof person.name === 'undefined') {
+          rowDatas.push({ name: person.name, car: car.count })
+          indexV++
+          maxCount = Math.max(maxCount, car.count)
+          continue
+        }
+
+        // 如果来访人员（车辆）的队列已经取完则直接添加内部人员（车辆）
+        if (typeof person.name === 'undefined') {
+          rowDatas.push({ name: person.name, person: person.count })
+          indexS++
+          maxCount = Math.max(maxCount, person.count)
+          continue
+        }
+
+        // 队列都还没有处理完成则比较日期的大小
+        const carVal = car.name
+        const personVal = person.name
+        if (personVal < carVal) {
+          // 人员列表的日期比较小
+          rowDatas.push({ name: person.name, person: person.count })
+          indexS++
+          maxCount = Math.max(maxCount, person.count)
+        } else if (personVal > carVal) {
+          // 访客列表的日期比较小
+          rowDatas.push({ name: car.name, car: car.count })
+          indexV++
+          maxCount = Math.max(maxCount, car.count)
+        } else {
+          rowDatas.push({ name: person.name, person: person.count, car: car.count })
+          indexS++
+          indexV++
+          maxCount = Math.max(maxCount, person.count, car.count)
+        }
+      }
+      // 设置最大值用以不显示小数
+      maxCount = Math.ceil(maxCount * 1.1)
+
+      // 返回生成好的图表数据
+      return {
+        rowDatas: rowDatas,
+        maxCount: maxCount
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/ctrl/statCharts/inOutKeyCount.vue b/src/views/ctrl/statCharts/inOutKeyCount.vue
new file mode 100644
index 0000000..fa9a0b7
--- /dev/null
+++ b/src/views/ctrl/statCharts/inOutKeyCount.vue
@@ -0,0 +1,38 @@
+<template>
+  <ve-ring :data="chartData" :settings="settings" />
+</template>
+
+<script>
+import { inOutKeyCount } from '@/api/statistics'
+
+export default {
+  name: 'InOutKeyCount',
+  data() {
+    return {
+      chartData: {
+        columns: ['name', 'count'],
+        rows: []
+      },
+      settings: {
+        radius: [60, 100]
+      }
+    }
+  },
+  activated() {
+    this.fetchData()
+  },
+  methods: {
+    fetchData() {
+      inOutKeyCount().then(response => {
+        if (response.code === 200) {
+          this.chartData.rows = response.data
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/ctrl/statCharts/inOutToday.vue b/src/views/ctrl/statCharts/inOutToday.vue
new file mode 100644
index 0000000..c37fa7b
--- /dev/null
+++ b/src/views/ctrl/statCharts/inOutToday.vue
@@ -0,0 +1,45 @@
+<template>
+  <ve-ring :data="chartData" :settings="settings" />
+</template>
+
+<script>
+import { inOutToday } from '@/api/statistics'
+
+export default {
+  name: 'InOutToday',
+  data() {
+    return {
+      chartData: {
+        columns: ['name', 'count'],
+        rows: [
+          { count: 4, name: '内部人员' },
+          { count: 1, name: '来访人员' },
+          { count: 2, name: '内部车辆' },
+          { count: 1, name: '来访车辆' }
+        ]
+      },
+      settings: {
+        radius: [60, 100]
+      }
+    }
+  },
+  activated() {
+    this.fetchData()
+  },
+  methods: {
+    fetchData() {
+      inOutToday().then(response => {
+        if (response.code === 200) {
+          if (response.data.length > 0) {
+            this.chartData.rows = response.data
+          }
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/dashboard/portal.vue b/src/views/dashboard/portal.vue
index 4365c4b..8ff66c7 100644
--- a/src/views/dashboard/portal.vue
+++ b/src/views/dashboard/portal.vue
@@ -3,14 +3,14 @@
     <el-row>
       <el-col class="sub-system control-system">
         <div class="icon-subsystem">
-          <img src="/static/images/dashboard/icon-control.png">
-          <div><a>综合控制室</a></div>
+          <img src="/static/images/dashboard/icon-control.png" @click="changeSubSystem('ctrl')">
+          <div><a @click="changeSubSystem('ctrl')">综合控制室</a></div>
         </div>
       </el-col>
       <el-col class="sub-system door-system">
         <div class="icon-subsystem">
-          <img src="/static/images/dashboard/icon-door.png">
-          <div><a @click="doorSubSystem">营门管理</a></div>
+          <img src="/static/images/dashboard/icon-door.png" @click="changeSubSystem('door')">
+          <div><a @click="changeSubSystem('door')">营门管理</a></div>
         </div>
       </el-col>
       <el-col class="sub-system defence-system">
@@ -46,7 +46,7 @@
     </div>
 
     <div class="welcome">
-      <img src="/static/images/dashboard/setting-logo.png" height="40px" style="margin-right: 20px;" @click="settingSystem">
+      <img src="/static/images/dashboard/setting-logo.png" height="40px" style="margin-right: 20px;" @click="changeSubSystem('sys')">
       <img src="/static/images/dashboard/exit-logo.png" height="40px" @click="logout">
     </div>
   </div>
@@ -81,12 +81,17 @@
         console.log('获取子系统成功')
       })
     },
-    changeSubSystem(subSys) {
-      this.$store.commit('SET_CHANGEFLAG', '1')
-      this.$store.commit('SET_SYSTEM', subSys)
-      this.$store.dispatch('tagsView/delAllViews', true).then(({ visitedViews }) => {
-        this.$router.replace(subSys.url)
+    changeSubSystem(code) {
+      const system = this.systems.filter(subsys => {
+        return subsys.code === code
       })
+      if (typeof system !== 'undefined' && system.length > 0) {
+        this.$store.commit('SET_CHANGEFLAG', '1')
+        this.$store.commit('SET_SYSTEM', system[0])
+        this.$store.dispatch('tagsView/delAllViews', true).then(({ visitedViews }) => {
+          this.$router.replace(system[0].url)
+        })
+      }
     },
     settingSystem() {
       const setting = this.systems.filter(subsys => {
diff --git a/src/views/layout/SinglePageLayout.vue b/src/views/layout/SinglePageLayout.vue
new file mode 100644
index 0000000..7d352fe
--- /dev/null
+++ b/src/views/layout/SinglePageLayout.vue
@@ -0,0 +1,59 @@
+<template>
+  <div :class="classObj" class="app-wrapper">
+    <app-header class="app-header"/>
+    <div class="app-body">
+      <!--主页-->
+      <el-scrollbar>
+        <app-main/>
+      </el-scrollbar>
+    </div>
+  </div>
+</template>
+
+<script>
+import { AppHeader, AppMain } from './components'
+
+export default {
+  name: 'SinglePageLayout',
+  components: { AppMain, AppHeader },
+  computed: {
+    classObj() {
+      return {
+        mobile: this.device === 'mobile'
+      }
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .app-wrapper {
+    position: relative;
+    height: 100%;
+    width: 100%;
+    &.mobile.openSidebar{
+      position: fixed;
+      top: 0;
+    }
+  }
+  .drawer-bg {
+    background: #000;
+    opacity: 0.3;
+    width: 100%;
+    top: 0;
+    height: 100%;
+    position: absolute;
+    z-index: 999;
+  }
+  .el-scrollbar{
+    /*height: calc(100vh + 17px);*/
+    height: 100vh;
+  }
+</style>
+
+<style>
+<!-- 隐藏横向的滚动条 -->
+  .el-scrollbar__wrap {
+    overflow-x: hidden !important;
+  }
+</style>
diff --git a/src/views/layout/components/AppHeader.vue b/src/views/layout/components/AppHeader.vue
index d187aac..8b71400 100644
--- a/src/views/layout/components/AppHeader.vue
+++ b/src/views/layout/components/AppHeader.vue
@@ -43,6 +43,7 @@
       name: this.$store.getters.name,
       title: getProject().title,
       systems: [
+        { code: 'key', ismenu: '0', levels: 1, name: '综合控制室子系统', resourceType: '02', url: '/ctrl' },
         { code: 'door', ismenu: '0', levels: 1, name: '营门管理子系统', resourceType: '02', url: '/door' },
         { code: 'fence', ismenu: '0', levels: 1, name: '周界防卫子系统', resourceType: '02', url: '/fence' },
         { code: 'region', ismenu: '0', levels: 1, name: '全域监控子系统', resourceType: '02', url: '/region' },
@@ -154,6 +155,7 @@
     /*left: 220px;*/
     color:#d3dce6;
     line-height: 50px;
+    cursor: pointer;
   }
 
 </style>

diff --git a/src/api/statistics.js b/src/api/statistics.js
index e20b4c0..741fbb2 100644
--- a/src/api/statistics.js
+++ b/src/api/statistics.js
@@ -55,3 +55,62 @@
     params
   })
 }
+
+// 综合控制室数量统计
+export function getStatisticsData() {
+  return request({
+    url: '/overview/statistics',
+    method: 'get'
+  })
+}
+
+// 今日进出营情况占比
+export function inOutToday() {
+  return request({
+    url: '/overview/todayPassPercentage',
+    method: 'get'
+  })
+}
+
+// 各类型设备安装数量
+export function devCount() {
+  return request({
+    url: '/overview/devicePercentage',
+    method: 'get'
+  })
+}
+
+// 进出营数量统计
+export function inOutCount(params) {
+  return request({
+    url: '/overview/passCountByType',
+    method: 'get',
+    params
+  })
+}
+
+// 各重点区域出入情况
+export function inOutKeyCount() {
+  return request({
+    url: '/overview/keyareaPassPercentage',
+    method: 'get'
+  })
+}
+
+// 各类型报警数量统计
+export function devAlarmCount(params) {
+  return request({
+    url: '/overview/alarmCountByType',
+    method: 'get',
+    params
+  })
+}
+
+// 各营门出入营量统计
+export function inOutDoorCount(params) {
+  return request({
+    url: '/overview/passCountByArea',
+    method: 'get',
+    params
+  })
+}
diff --git a/src/router/index.js b/src/router/index.js
index 9435997..823269b 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -10,6 +10,7 @@
 import Layout from '../views/layout/Layout'
 import { systemRouters } from './modules/system'
 import { doorSysRouters } from './modules/doorSys'
+import { ctrlSysRouters } from './modules/ctrlSys'
 
 /**
 * hidden: true                   if `hidden:true` will not show in the sidebar(default is false)
@@ -88,5 +89,6 @@
 export const asyncRouterMap = [
   ...systemRouters,
   ...doorSysRouters,
+  ...ctrlSysRouters,
   { path: '*', redirect: '/404', hidden: true, meta: {}}
 ]
diff --git a/src/router/modules/ctrlSys.js b/src/router/modules/ctrlSys.js
new file mode 100644
index 0000000..0dce4da
--- /dev/null
+++ b/src/router/modules/ctrlSys.js
@@ -0,0 +1,35 @@
+/* Layout */
+import SinglePageLayout from '@/views/layout/SinglePageLayout'
+export const ctrlSysRouters = [
+  {
+    path: '/ctrl',
+    name: 'ctrl',
+    redirect: '/ctrl',
+    hidden: true,
+    meta: {
+      title: '综合控制室子系统',
+      permission: ['/ctrl'],
+      isSys: true
+    }
+  },
+  {
+    path: '/ctrl/index1',
+    component: SinglePageLayout,
+    name: 'Ctrl1',
+    alwaysShow: false,
+    meta: {
+      title: '',
+      icon: '', // 图标
+      permission: ['/ctrl'], // 权限名称
+      sys: '/ctrl'
+    },
+    children: [
+      {
+        path: '/ctrl/index',
+        name: 'CtrlIndex',
+        component: () => import('@/views/ctrl/index'),
+        meta: { title: '综合控制室首页', icon: '', permission: ['/ctrl/index'], keepAlive: true }
+      }
+    ]
+  }
+]
diff --git a/src/views/ctrl/index.vue b/src/views/ctrl/index.vue
new file mode 100644
index 0000000..93efb6f
--- /dev/null
+++ b/src/views/ctrl/index.vue
@@ -0,0 +1,193 @@
+<template>
+  <div class="app-wrapper">
+    <el-row :gutter="20">
+      <el-col id="today-visitor" class="sub-data-block" style="margin-left: 20px;">
+        <div class="sub-title">今日访客</div>
+        <div class="statis-block">
+          <span class="big-size" v-text="statistics.todayVisitorPerson"/><span>人</span>
+        </div>
+      </el-col>
+
+      <el-col id="total-visitor" class="sub-data-block">
+        <div class="sub-title">累计访客</div>
+        <div class="statis-block">
+          <span class="big-size" v-text="statistics.totalVisitorPerson"/><span>人</span>
+        </div>
+      </el-col>
+
+      <el-col id="current-alarm" class="sub-data-block">
+        <div class="sub-title">当前报警</div>
+        <div class="statis-block">
+          <span class="big-size" v-text="statistics.currentAlarm"/><span>台</span>
+        </div>
+      </el-col>
+
+      <el-col id="total-alarm" class="sub-data-block">
+        <div class="sub-title">累计报警</div>
+        <div class="statis-block">
+          <span class="big-size" v-text="statistics.totalAlarm"/><span>次</span>
+        </div>
+      </el-col>
+
+      <el-col id="online-device" class="sub-data-block">
+        <div class="sub-title">在线设备</div>
+        <div class="statis-block">
+          <span class="big-size" v-text="statistics.onlineDevice"/><span>台</span>
+        </div>
+      </el-col>
+
+      <el-col id="total-device" class="sub-data-block">
+        <div class="sub-title">设备总量</div>
+        <div class="statis-block">
+          <span class="big-size" v-text="statistics.totalDevice"/><span>台</span>
+        </div>
+      </el-col>
+    </el-row>
+
+    <el-row :gutter="20">
+      <el-col :span="7" class="chart-block">
+        <div class="chart-title">今日进出营情况</div>
+        <in-out-today />
+      </el-col>
+
+      <el-col :span="7" class="chart-block">
+        <div class="chart-title">各类型设备安装数量</div>
+        <dev-count />
+      </el-col>
+
+      <el-col id="pass-count" :span="10" class="chart-block">
+        <div class="chart-title">进出营数量统计</div>
+        <in-out-count />
+      </el-col>
+    </el-row>
+
+    <el-row :gutter="20" style="margin-bottom: 40px;">
+      <el-col :span="7" class="chart-block">
+        <div class="chart-title">各重点区域出入情况</div>
+        <in-out-key-count />
+      </el-col>
+
+      <el-col id="dev-alarm-count" :span="10" class="chart-block">
+        <div class="chart-title">设备报警数量统计</div>
+        <dev-alarm-count />
+      </el-col>
+
+      <el-col :span="7" class="chart-block">
+        <div class="chart-title">各营门出入营量统计</div>
+        <in-out-door-count />
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { getStatisticsData } from '@/api/statistics'
+import InOutToday from '@/views/ctrl/statCharts/inOutToday'
+import InOutCount from '@/views/ctrl/statCharts/inOutCount'
+import DevCount from '@/views/ctrl/statCharts/devCount'
+import InOutKeyCount from '@/views/ctrl/statCharts/inOutKeyCount'
+import DevAlarmCount from '@/views/ctrl/statCharts/devAlarmCount'
+import InOutDoorCount from '@/views/ctrl/statCharts/inOutDoorCount'
+export default {
+  name: 'CtrlIndex',
+  components: { InOutToday, DevCount, InOutCount, InOutKeyCount, DevAlarmCount, InOutDoorCount },
+  data() {
+    return {
+      statistics: {
+        todayVisitorPerson: 0,
+        totalVisitorPerson: 0,
+        currentAlarm: 0,
+        totalAlarm: 0,
+        onlineDevice: 0,
+        totalDevice: 0
+      }
+    }
+  },
+  created() {
+    this.fetchStatisticsData()
+  },
+  methods: {
+    fetchStatisticsData() {
+      getStatisticsData().then(response => {
+        if (response.code === 200) {
+          this.statistics = response.data
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .app-wrapper {
+    background-color: #e9e9e9;
+    padding-bottom: 20px;
+  }
+
+  .sub-data-block {
+    width: calc((100vw - 120px) / 6);
+    border-radius: 16px;
+    float: left;
+    margin: 10px;
+    box-shadow: 2px 2px 8px #666666;
+  }
+  .sub-title {
+    font-weight: bold;
+    text-align: center;
+    font-family: 'Microsoft YaHei';
+    color: #fff;
+    font-size: 24px;
+    padding: 10px;
+  }
+  .statis-block {
+    text-align: center;
+    margin: 20px 10px 0px 10px;
+    padding: 10px;
+    color: #fff;
+    font-weight: bold;
+    letter-spacing: 1px;
+    font-size: 24px;
+  }
+  .big-size {
+    font-size: 64px;
+  }
+
+  .chart-title {
+    font-family: 'Microsoft YaHei';
+    color: #000000;
+    font-weight: bold;
+    font-size: 20px;
+    text-align: center;
+    padding: 10px;
+  }
+  .chart-block {
+    margin-left: 20px;
+    margin-top: 20px;
+    border-radius: 16px;
+    background-color: #FFFFFF;
+    box-shadow: 2px 2px 8px #666666;
+  }
+
+  #today-visitor {
+    background-image: linear-gradient(to right, #ff8fdf, #ff01b4);
+  }
+  #total-visitor {
+    background-image: linear-gradient(to right, #9280ff, #2400ff);
+  }
+  #current-alarm {
+    background-image: linear-gradient(to right, #ff696a, #ff0101);
+  }
+  #total-alarm {
+    background-image: linear-gradient(to right, #7fbbff, #0078ff);
+  }
+  #online-device {
+    background-image: linear-gradient(to right, #72ff7e, #01a411);
+  }
+  #total-device {
+    background-image: linear-gradient(to right, #ffa800, #ce7e00);
+  }
+
+  #pass-count, #dev-alarm-count {
+    width: calc(250vw / 6 - 70px);
+  }
+</style>
diff --git a/src/views/ctrl/statCharts/devAlarmCount.vue b/src/views/ctrl/statCharts/devAlarmCount.vue
new file mode 100644
index 0000000..ff2e6c4
--- /dev/null
+++ b/src/views/ctrl/statCharts/devAlarmCount.vue
@@ -0,0 +1,111 @@
+<template>
+  <div>
+    <el-date-picker
+      v-model="timeRange"
+      :picker-options="pickerOptions"
+      type="daterange"
+      range-separator="至"
+      start-placeholder="开始日期"
+      end-placeholder="结束日期"
+      style="margin-bottom: 10px;" />
+    <ve-histogram :data="chartData" :settings="settings" height="350px" />
+  </div>
+</template>
+
+<script>
+import { formatToString, getDate, oneDayTime } from '@/utils/calendarUtil'
+import { devAlarmCount } from '@/api/statistics'
+
+const now = new Date()
+
+export default {
+  name: 'DevAlarmCount',
+  data() {
+    return {
+      params: {
+        beginDate: '',
+        endDate: ''
+      },
+      chartData: {
+        columns: ['name', 'count'],
+        rows: []
+      },
+      settings: {
+        labelMap: {
+          'name': '设备类型',
+          'count': '报警数量'
+        },
+        max: [4]
+      },
+      timeRange: [],
+      pickerOptions: {
+        shortcuts: [{
+          text: '最近七日',
+          onClick(picker) {
+            const end = now
+            const start = new Date()
+            start.setTime(start.getTime() - oneDayTime * 7)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近十日',
+          onClick(picker) {
+            const end = now
+            const start = new Date()
+            start.setTime(start.getTime() - oneDayTime * 10)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近三十日',
+          onClick(picker) {
+            const end = now
+            const start = new Date()
+            start.setTime(start.getTime() - oneDayTime * 30)
+            picker.$emit('pick', [start, end])
+          }
+        }],
+        disabledDate(time) {
+          const oneMonthLater = new Date(now.getTime() - (oneDayTime * 31))
+          return time.getTime() < oneMonthLater
+        }
+      }
+    }
+  },
+  watch: {
+    timeRange: function(newV) {
+      if (newV) {
+        this.params.beginDate = formatToString(newV[0], 'DATE')
+        this.params.endDate = formatToString(newV[1], 'DATE')
+      } else {
+        this.initTime()
+      }
+      this.fetchData()
+    }
+  },
+  created() {
+    this.initTime()
+  },
+  activated() {
+    this.fetchData()
+  },
+  methods: {
+    initTime() {
+      this.params.beginDate = getDate(-7, 'DATE')
+      this.params.endDate = getDate(1, 'DATE')
+
+      this.timeRange = [this.params.beginDate, this.params.endDate]
+    },
+    fetchData() {
+      devAlarmCount(this.params).then(response => {
+        if (response.code === 200) {
+          this.chartData.rows = response.data
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/ctrl/statCharts/devCount.vue b/src/views/ctrl/statCharts/devCount.vue
new file mode 100644
index 0000000..d3e2902
--- /dev/null
+++ b/src/views/ctrl/statCharts/devCount.vue
@@ -0,0 +1,39 @@
+<template>
+  <ve-ring :data="chartData" :settings="settings" />
+</template>
+
+<script>
+import { devCount } from '@/api/statistics'
+
+export default {
+  name: 'DevCount',
+  data() {
+    return {
+      chartData: {
+        columns: ['name', 'count'],
+        rows: []
+      },
+      settings: {
+        // legendLimit: 4
+        radius: [60, 100]
+      }
+    }
+  },
+  activated() {
+    this.fetchData()
+  },
+  methods: {
+    fetchData() {
+      devCount().then(response => {
+        if (response.code === 200) {
+          this.chartData.rows = response.data
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/ctrl/statCharts/inOutCount.vue b/src/views/ctrl/statCharts/inOutCount.vue
new file mode 100644
index 0000000..1956305
--- /dev/null
+++ b/src/views/ctrl/statCharts/inOutCount.vue
@@ -0,0 +1,193 @@
+<template>
+  <div>
+    <el-date-picker
+      v-model="timeRange"
+      :picker-options="pickerOptions"
+      type="daterange"
+      range-separator="至"
+      start-placeholder="开始日期"
+      end-placeholder="结束日期"
+      style="margin-bottom: 10px"/>
+    <ve-line :data="chartData" :settings="settings" height="350px" />
+  </div>
+</template>
+
+<script>
+import { formatToString, parseToDate, getDate, oneDayTime } from '@/utils/calendarUtil'
+import { inOutCount } from '@/api/statistics'
+
+const now = new Date()
+
+export default {
+  name: 'InOutCount',
+  data() {
+    return {
+      params: {
+        beginDate: '',
+        endDate: ''
+      },
+      chartData: {
+        columns: ['date', 'staff', 'visitor', 'car', 'visitorCar'],
+        rows: []
+      },
+      settings: {
+        labelMap: {
+          'staff': '内部人员',
+          'visitor': '来访人员',
+          'car': '内部车辆',
+          'visitorCar': '来访车辆'
+        },
+        xAxisType: 'time',
+        max: [4],
+        area: true,
+        metrics: ['staff', 'visitor', 'car', 'visitorCar'],
+        dimension: ['date']
+      },
+      timeRange: [],
+      pickerOptions: {
+        shortcuts: [{
+          text: '最近七日',
+          onClick(picker) {
+            const end = now
+            const start = new Date()
+            start.setTime(start.getTime() - oneDayTime * 7)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近十日',
+          onClick(picker) {
+            const end = now
+            const start = new Date()
+            start.setTime(start.getTime() - oneDayTime * 10)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近三十日',
+          onClick(picker) {
+            const end = now
+            const start = new Date()
+            start.setTime(start.getTime() - oneDayTime * 30)
+            picker.$emit('pick', [start, end])
+          }
+        }],
+        disabledDate(time) {
+          const oneMonthLater = new Date(now.getTime() - (oneDayTime * 31))
+          return time.getTime() < oneMonthLater
+        }
+      }
+    }
+  },
+  watch: {
+    timeRange: function(newV) {
+      if (newV) {
+        this.params.beginDate = formatToString(newV[0], 'DATE')
+        this.params.endDate = formatToString(newV[1], 'DATE')
+      } else {
+        this.initTime()
+      }
+      this.fetchData()
+    }
+  },
+  created() {
+    this.initTime()
+  },
+  activated() {
+    this.fetchData()
+  },
+  methods: {
+    initTime() {
+      this.params.beginDate = getDate(-7, 'DATE')
+      this.params.endDate = getDate(1, 'DATE')
+
+      this.timeRange = [this.params.beginDate, this.params.endDate]
+    },
+    fetchData() {
+      inOutCount(this.params).then(response => {
+        if (response.code === 200) {
+          const data = this.parseStatisticsData(response.data)
+          this.chartData.rows = data.rowDatas
+          this.chartData.max = [data.maxCount]
+        }
+      })
+    },
+    parseStatisticsData(obj) {
+      const staffList = obj.person
+      const visitorList = obj.visitorPerson
+      const carList = obj.car
+      const visitorCarList = obj.visitorCar
+
+      const rowDatas = [] // 返回的数据
+      let maxCount = 4 // 返回的最大的计数值
+
+      let start = parseToDate(this.params.beginDate, 'DATE').valueOf() // 开始日期的Date对象
+      const end = parseToDate(this.params.endDate, 'DATE').valueOf() // 结束日期的Date对象
+
+      let indexS = 0 // 内部人员索引
+      let indexV = 0 // 访客索引
+      let indexC = 0 // 内部车辆索引
+      let indexVc = 0 // 访客车辆索引
+
+      // 遍历时间
+      while (start < end) {
+        const staff = staffList[indexS]
+        const visitor = visitorList[indexV]
+        const car = carList[indexC]
+        const visitorCar = visitorCarList[indexVc]
+
+        let staffCount = 0
+        let visitorCount = 0
+        let carCount = 0
+        let visitorCarCount = 0
+
+        const date = formatToString(start, 'DATE')
+
+        if (typeof staff !== 'undefined') {
+          if (staff.date === date) {
+            staffCount = staff.count
+            indexS++
+          }
+        }
+
+        if (typeof visitor !== 'undefined') {
+          if (visitor.date === date) {
+            visitorCount = visitor.count
+            indexV++
+          }
+        }
+
+        if (typeof car !== 'undefined') {
+          if (car.date === date) {
+            carCount = car.count
+            indexC++
+          }
+        }
+
+        if (typeof visitorCar !== 'undefined') {
+          if (visitorCar.date === date) {
+            visitorCarCount = car.count
+            indexVc++
+          }
+        }
+
+        if (staffCount + visitorCount + carCount + visitorCarCount > 0) {
+          rowDatas.push({ date: date, staff: staffCount, visitor: visitorCount, car: carCount, visitorCar: visitorCarCount })
+        }
+        start += oneDayTime
+      }
+
+      // 设置最大值用以不显示小数
+      maxCount = Math.ceil(maxCount * 1.1)
+
+      // 返回生成好的图表数据
+      return {
+        rowDatas: rowDatas,
+        maxCount: maxCount
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/ctrl/statCharts/inOutDoorCount.vue b/src/views/ctrl/statCharts/inOutDoorCount.vue
new file mode 100644
index 0000000..1d73651
--- /dev/null
+++ b/src/views/ctrl/statCharts/inOutDoorCount.vue
@@ -0,0 +1,187 @@
+<template>
+  <div>
+    <el-date-picker
+      v-model="timeRange"
+      :picker-options="pickerOptions"
+      type="daterange"
+      range-separator="至"
+      start-placeholder="开始日期"
+      end-placeholder="结束日期"
+      style="margin-bottom: 10px;" />
+    <ve-histogram :data="chartData" :settings="settings" height="350px" />
+  </div>
+</template>
+
+<script>
+import { formatToString, getDate, oneDayTime } from '@/utils/calendarUtil'
+import { inOutDoorCount } from '@/api/statistics'
+
+const now = new Date()
+
+export default {
+  name: 'InOutDoorCount',
+  data() {
+    return {
+      params: {
+        beginDate: '',
+        endDate: ''
+      },
+      chartData: {
+        columns: ['name', 'person', 'car'],
+        rows: []
+      },
+      settings: {
+        labelMap: {
+          'person': '人员',
+          'car': '车辆'
+        },
+        max: [4],
+        metrics: ['person', 'car'],
+        dimension: ['name']
+      },
+      timeRange: [],
+      pickerOptions: {
+        shortcuts: [{
+          text: '最近七日',
+          onClick(picker) {
+            const end = now
+            const start = new Date()
+            start.setTime(start.getTime() - oneDayTime * 7)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近十日',
+          onClick(picker) {
+            const end = now
+            const start = new Date()
+            start.setTime(start.getTime() - oneDayTime * 10)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近三十日',
+          onClick(picker) {
+            const end = now
+            const start = new Date()
+            start.setTime(start.getTime() - oneDayTime * 30)
+            picker.$emit('pick', [start, end])
+          }
+        }],
+        disabledDate(time) {
+          const oneMonthLater = new Date(now.getTime() - (oneDayTime * 31))
+          return time.getTime() < oneMonthLater
+        }
+      }
+    }
+  },
+  watch: {
+    timeRange: function(newV) {
+      if (newV) {
+        this.params.beginDate = formatToString(newV[0], 'DATE')
+        this.params.endDate = formatToString(newV[1], 'DATE')
+      } else {
+        this.initTime()
+      }
+      this.fetchData()
+    }
+  },
+  created() {
+    this.initTime()
+  },
+  activated() {
+    this.fetchData()
+  },
+  methods: {
+    initTime() {
+      this.params.beginDate = getDate(-7, 'DATE')
+      this.params.endDate = getDate(1, 'DATE')
+
+      this.timeRange = [this.params.beginDate, this.params.endDate]
+    },
+    fetchData() {
+      inOutDoorCount(this.params).then(response => {
+        if (response.code === 200) {
+          const data = this.parseStatisticsData(response.data)
+          this.chartData.rows = data.rowDatas
+          this.chartData.max = [data.maxCount]
+        }
+      })
+    },
+    parseStatisticsData(obj) {
+      const personList = obj.person
+      const carList = obj.car
+
+      const rowDatas = [] // 返回的数据
+      let maxCount = 4 // 返回的最大的计数值
+      let indexS = 0
+      let indexV = 0
+      // 遍历内部人员（车辆）和来访人员（车辆），生成图表所需要的数据格式
+      while (indexS < personList.length || indexV < carList.length) {
+        let person = {}
+        let car = {}
+
+        // 获取内部人员（车辆）对象
+        if (indexS < personList.length) {
+          person = personList[indexS]
+        } else {
+          person = {}
+        }
+
+        // 获取来访人员（车辆）对象
+        if (indexV < carList.length) {
+          car = carList[indexV]
+        } else {
+          car = {}
+        }
+
+        // 如果内部人员（车辆）的队列已经取完则直接添加来访人员（车辆）
+        if (typeof person.name === 'undefined') {
+          rowDatas.push({ name: person.name, car: car.count })
+          indexV++
+          maxCount = Math.max(maxCount, car.count)
+          continue
+        }
+
+        // 如果来访人员（车辆）的队列已经取完则直接添加内部人员（车辆）
+        if (typeof person.name === 'undefined') {
+          rowDatas.push({ name: person.name, person: person.count })
+          indexS++
+          maxCount = Math.max(maxCount, person.count)
+          continue
+        }
+
+        // 队列都还没有处理完成则比较日期的大小
+        const carVal = car.name
+        const personVal = person.name
+        if (personVal < carVal) {
+          // 人员列表的日期比较小
+          rowDatas.push({ name: person.name, person: person.count })
+          indexS++
+          maxCount = Math.max(maxCount, person.count)
+        } else if (personVal > carVal) {
+          // 访客列表的日期比较小
+          rowDatas.push({ name: car.name, car: car.count })
+          indexV++
+          maxCount = Math.max(maxCount, car.count)
+        } else {
+          rowDatas.push({ name: person.name, person: person.count, car: car.count })
+          indexS++
+          indexV++
+          maxCount = Math.max(maxCount, person.count, car.count)
+        }
+      }
+      // 设置最大值用以不显示小数
+      maxCount = Math.ceil(maxCount * 1.1)
+
+      // 返回生成好的图表数据
+      return {
+        rowDatas: rowDatas,
+        maxCount: maxCount
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/ctrl/statCharts/inOutKeyCount.vue b/src/views/ctrl/statCharts/inOutKeyCount.vue
new file mode 100644
index 0000000..fa9a0b7
--- /dev/null
+++ b/src/views/ctrl/statCharts/inOutKeyCount.vue
@@ -0,0 +1,38 @@
+<template>
+  <ve-ring :data="chartData" :settings="settings" />
+</template>
+
+<script>
+import { inOutKeyCount } from '@/api/statistics'
+
+export default {
+  name: 'InOutKeyCount',
+  data() {
+    return {
+      chartData: {
+        columns: ['name', 'count'],
+        rows: []
+      },
+      settings: {
+        radius: [60, 100]
+      }
+    }
+  },
+  activated() {
+    this.fetchData()
+  },
+  methods: {
+    fetchData() {
+      inOutKeyCount().then(response => {
+        if (response.code === 200) {
+          this.chartData.rows = response.data
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/ctrl/statCharts/inOutToday.vue b/src/views/ctrl/statCharts/inOutToday.vue
new file mode 100644
index 0000000..c37fa7b
--- /dev/null
+++ b/src/views/ctrl/statCharts/inOutToday.vue
@@ -0,0 +1,45 @@
+<template>
+  <ve-ring :data="chartData" :settings="settings" />
+</template>
+
+<script>
+import { inOutToday } from '@/api/statistics'
+
+export default {
+  name: 'InOutToday',
+  data() {
+    return {
+      chartData: {
+        columns: ['name', 'count'],
+        rows: [
+          { count: 4, name: '内部人员' },
+          { count: 1, name: '来访人员' },
+          { count: 2, name: '内部车辆' },
+          { count: 1, name: '来访车辆' }
+        ]
+      },
+      settings: {
+        radius: [60, 100]
+      }
+    }
+  },
+  activated() {
+    this.fetchData()
+  },
+  methods: {
+    fetchData() {
+      inOutToday().then(response => {
+        if (response.code === 200) {
+          if (response.data.length > 0) {
+            this.chartData.rows = response.data
+          }
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/dashboard/portal.vue b/src/views/dashboard/portal.vue
index 4365c4b..8ff66c7 100644
--- a/src/views/dashboard/portal.vue
+++ b/src/views/dashboard/portal.vue
@@ -3,14 +3,14 @@
     <el-row>
       <el-col class="sub-system control-system">
         <div class="icon-subsystem">
-          <img src="/static/images/dashboard/icon-control.png">
-          <div><a>综合控制室</a></div>
+          <img src="/static/images/dashboard/icon-control.png" @click="changeSubSystem('ctrl')">
+          <div><a @click="changeSubSystem('ctrl')">综合控制室</a></div>
         </div>
       </el-col>
       <el-col class="sub-system door-system">
         <div class="icon-subsystem">
-          <img src="/static/images/dashboard/icon-door.png">
-          <div><a @click="doorSubSystem">营门管理</a></div>
+          <img src="/static/images/dashboard/icon-door.png" @click="changeSubSystem('door')">
+          <div><a @click="changeSubSystem('door')">营门管理</a></div>
         </div>
       </el-col>
       <el-col class="sub-system defence-system">
@@ -46,7 +46,7 @@
     </div>
 
     <div class="welcome">
-      <img src="/static/images/dashboard/setting-logo.png" height="40px" style="margin-right: 20px;" @click="settingSystem">
+      <img src="/static/images/dashboard/setting-logo.png" height="40px" style="margin-right: 20px;" @click="changeSubSystem('sys')">
       <img src="/static/images/dashboard/exit-logo.png" height="40px" @click="logout">
     </div>
   </div>
@@ -81,12 +81,17 @@
         console.log('获取子系统成功')
       })
     },
-    changeSubSystem(subSys) {
-      this.$store.commit('SET_CHANGEFLAG', '1')
-      this.$store.commit('SET_SYSTEM', subSys)
-      this.$store.dispatch('tagsView/delAllViews', true).then(({ visitedViews }) => {
-        this.$router.replace(subSys.url)
+    changeSubSystem(code) {
+      const system = this.systems.filter(subsys => {
+        return subsys.code === code
       })
+      if (typeof system !== 'undefined' && system.length > 0) {
+        this.$store.commit('SET_CHANGEFLAG', '1')
+        this.$store.commit('SET_SYSTEM', system[0])
+        this.$store.dispatch('tagsView/delAllViews', true).then(({ visitedViews }) => {
+          this.$router.replace(system[0].url)
+        })
+      }
     },
     settingSystem() {
       const setting = this.systems.filter(subsys => {
diff --git a/src/views/layout/SinglePageLayout.vue b/src/views/layout/SinglePageLayout.vue
new file mode 100644
index 0000000..7d352fe
--- /dev/null
+++ b/src/views/layout/SinglePageLayout.vue
@@ -0,0 +1,59 @@
+<template>
+  <div :class="classObj" class="app-wrapper">
+    <app-header class="app-header"/>
+    <div class="app-body">
+      <!--主页-->
+      <el-scrollbar>
+        <app-main/>
+      </el-scrollbar>
+    </div>
+  </div>
+</template>
+
+<script>
+import { AppHeader, AppMain } from './components'
+
+export default {
+  name: 'SinglePageLayout',
+  components: { AppMain, AppHeader },
+  computed: {
+    classObj() {
+      return {
+        mobile: this.device === 'mobile'
+      }
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .app-wrapper {
+    position: relative;
+    height: 100%;
+    width: 100%;
+    &.mobile.openSidebar{
+      position: fixed;
+      top: 0;
+    }
+  }
+  .drawer-bg {
+    background: #000;
+    opacity: 0.3;
+    width: 100%;
+    top: 0;
+    height: 100%;
+    position: absolute;
+    z-index: 999;
+  }
+  .el-scrollbar{
+    /*height: calc(100vh + 17px);*/
+    height: 100vh;
+  }
+</style>
+
+<style>
+<!-- 隐藏横向的滚动条 -->
+  .el-scrollbar__wrap {
+    overflow-x: hidden !important;
+  }
+</style>
diff --git a/src/views/layout/components/AppHeader.vue b/src/views/layout/components/AppHeader.vue
index d187aac..8b71400 100644
--- a/src/views/layout/components/AppHeader.vue
+++ b/src/views/layout/components/AppHeader.vue
@@ -43,6 +43,7 @@
       name: this.$store.getters.name,
       title: getProject().title,
       systems: [
+        { code: 'key', ismenu: '0', levels: 1, name: '综合控制室子系统', resourceType: '02', url: '/ctrl' },
         { code: 'door', ismenu: '0', levels: 1, name: '营门管理子系统', resourceType: '02', url: '/door' },
         { code: 'fence', ismenu: '0', levels: 1, name: '周界防卫子系统', resourceType: '02', url: '/fence' },
         { code: 'region', ismenu: '0', levels: 1, name: '全域监控子系统', resourceType: '02', url: '/region' },
@@ -154,6 +155,7 @@
     /*left: 220px;*/
     color:#d3dce6;
     line-height: 50px;
+    cursor: pointer;
   }
 
 </style>
diff --git a/src/views/staff/staffAdd.vue b/src/views/staff/staffAdd.vue
index 2480ed2..cf4fac4 100644
--- a/src/views/staff/staffAdd.vue
+++ b/src/views/staff/staffAdd.vue
@@ -308,7 +308,7 @@
           that.personForm.sex = parseInt(data.Sex)
           var birth = data.Birthday
           that.personForm.birthday = birth.substring(0, 3) + '-' + birth.substring(4, 5) + '-' + birth.substring(6, 7)
-          that.photo = data.Photo
+          that.photo = data.Photo.replace('bmp', 'png')
           that.personForm.address = data.Address
         } else {
           that.$message.warning('读卡失败')

diff --git a/src/api/statistics.js b/src/api/statistics.js
index e20b4c0..741fbb2 100644
--- a/src/api/statistics.js
+++ b/src/api/statistics.js
@@ -55,3 +55,62 @@
     params
   })
 }
+
+// 综合控制室数量统计
+export function getStatisticsData() {
+  return request({
+    url: '/overview/statistics',
+    method: 'get'
+  })
+}
+
+// 今日进出营情况占比
+export function inOutToday() {
+  return request({
+    url: '/overview/todayPassPercentage',
+    method: 'get'
+  })
+}
+
+// 各类型设备安装数量
+export function devCount() {
+  return request({
+    url: '/overview/devicePercentage',
+    method: 'get'
+  })
+}
+
+// 进出营数量统计
+export function inOutCount(params) {
+  return request({
+    url: '/overview/passCountByType',
+    method: 'get',
+    params
+  })
+}
+
+// 各重点区域出入情况
+export function inOutKeyCount() {
+  return request({
+    url: '/overview/keyareaPassPercentage',
+    method: 'get'
+  })
+}
+
+// 各类型报警数量统计
+export function devAlarmCount(params) {
+  return request({
+    url: '/overview/alarmCountByType',
+    method: 'get',
+    params
+  })
+}
+
+// 各营门出入营量统计
+export function inOutDoorCount(params) {
+  return request({
+    url: '/overview/passCountByArea',
+    method: 'get',
+    params
+  })
+}
diff --git a/src/router/index.js b/src/router/index.js
index 9435997..823269b 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -10,6 +10,7 @@
 import Layout from '../views/layout/Layout'
 import { systemRouters } from './modules/system'
 import { doorSysRouters } from './modules/doorSys'
+import { ctrlSysRouters } from './modules/ctrlSys'
 
 /**
 * hidden: true                   if `hidden:true` will not show in the sidebar(default is false)
@@ -88,5 +89,6 @@
 export const asyncRouterMap = [
   ...systemRouters,
   ...doorSysRouters,
+  ...ctrlSysRouters,
   { path: '*', redirect: '/404', hidden: true, meta: {}}
 ]
diff --git a/src/router/modules/ctrlSys.js b/src/router/modules/ctrlSys.js
new file mode 100644
index 0000000..0dce4da
--- /dev/null
+++ b/src/router/modules/ctrlSys.js
@@ -0,0 +1,35 @@
+/* Layout */
+import SinglePageLayout from '@/views/layout/SinglePageLayout'
+export const ctrlSysRouters = [
+  {
+    path: '/ctrl',
+    name: 'ctrl',
+    redirect: '/ctrl',
+    hidden: true,
+    meta: {
+      title: '综合控制室子系统',
+      permission: ['/ctrl'],
+      isSys: true
+    }
+  },
+  {
+    path: '/ctrl/index1',
+    component: SinglePageLayout,
+    name: 'Ctrl1',
+    alwaysShow: false,
+    meta: {
+      title: '',
+      icon: '', // 图标
+      permission: ['/ctrl'], // 权限名称
+      sys: '/ctrl'
+    },
+    children: [
+      {
+        path: '/ctrl/index',
+        name: 'CtrlIndex',
+        component: () => import('@/views/ctrl/index'),
+        meta: { title: '综合控制室首页', icon: '', permission: ['/ctrl/index'], keepAlive: true }
+      }
+    ]
+  }
+]
diff --git a/src/views/ctrl/index.vue b/src/views/ctrl/index.vue
new file mode 100644
index 0000000..93efb6f
--- /dev/null
+++ b/src/views/ctrl/index.vue
@@ -0,0 +1,193 @@
+<template>
+  <div class="app-wrapper">
+    <el-row :gutter="20">
+      <el-col id="today-visitor" class="sub-data-block" style="margin-left: 20px;">
+        <div class="sub-title">今日访客</div>
+        <div class="statis-block">
+          <span class="big-size" v-text="statistics.todayVisitorPerson"/><span>人</span>
+        </div>
+      </el-col>
+
+      <el-col id="total-visitor" class="sub-data-block">
+        <div class="sub-title">累计访客</div>
+        <div class="statis-block">
+          <span class="big-size" v-text="statistics.totalVisitorPerson"/><span>人</span>
+        </div>
+      </el-col>
+
+      <el-col id="current-alarm" class="sub-data-block">
+        <div class="sub-title">当前报警</div>
+        <div class="statis-block">
+          <span class="big-size" v-text="statistics.currentAlarm"/><span>台</span>
+        </div>
+      </el-col>
+
+      <el-col id="total-alarm" class="sub-data-block">
+        <div class="sub-title">累计报警</div>
+        <div class="statis-block">
+          <span class="big-size" v-text="statistics.totalAlarm"/><span>次</span>
+        </div>
+      </el-col>
+
+      <el-col id="online-device" class="sub-data-block">
+        <div class="sub-title">在线设备</div>
+        <div class="statis-block">
+          <span class="big-size" v-text="statistics.onlineDevice"/><span>台</span>
+        </div>
+      </el-col>
+
+      <el-col id="total-device" class="sub-data-block">
+        <div class="sub-title">设备总量</div>
+        <div class="statis-block">
+          <span class="big-size" v-text="statistics.totalDevice"/><span>台</span>
+        </div>
+      </el-col>
+    </el-row>
+
+    <el-row :gutter="20">
+      <el-col :span="7" class="chart-block">
+        <div class="chart-title">今日进出营情况</div>
+        <in-out-today />
+      </el-col>
+
+      <el-col :span="7" class="chart-block">
+        <div class="chart-title">各类型设备安装数量</div>
+        <dev-count />
+      </el-col>
+
+      <el-col id="pass-count" :span="10" class="chart-block">
+        <div class="chart-title">进出营数量统计</div>
+        <in-out-count />
+      </el-col>
+    </el-row>
+
+    <el-row :gutter="20" style="margin-bottom: 40px;">
+      <el-col :span="7" class="chart-block">
+        <div class="chart-title">各重点区域出入情况</div>
+        <in-out-key-count />
+      </el-col>
+
+      <el-col id="dev-alarm-count" :span="10" class="chart-block">
+        <div class="chart-title">设备报警数量统计</div>
+        <dev-alarm-count />
+      </el-col>
+
+      <el-col :span="7" class="chart-block">
+        <div class="chart-title">各营门出入营量统计</div>
+        <in-out-door-count />
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { getStatisticsData } from '@/api/statistics'
+import InOutToday from '@/views/ctrl/statCharts/inOutToday'
+import InOutCount from '@/views/ctrl/statCharts/inOutCount'
+import DevCount from '@/views/ctrl/statCharts/devCount'
+import InOutKeyCount from '@/views/ctrl/statCharts/inOutKeyCount'
+import DevAlarmCount from '@/views/ctrl/statCharts/devAlarmCount'
+import InOutDoorCount from '@/views/ctrl/statCharts/inOutDoorCount'
+export default {
+  name: 'CtrlIndex',
+  components: { InOutToday, DevCount, InOutCount, InOutKeyCount, DevAlarmCount, InOutDoorCount },
+  data() {
+    return {
+      statistics: {
+        todayVisitorPerson: 0,
+        totalVisitorPerson: 0,
+        currentAlarm: 0,
+        totalAlarm: 0,
+        onlineDevice: 0,
+        totalDevice: 0
+      }
+    }
+  },
+  created() {
+    this.fetchStatisticsData()
+  },
+  methods: {
+    fetchStatisticsData() {
+      getStatisticsData().then(response => {
+        if (response.code === 200) {
+          this.statistics = response.data
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .app-wrapper {
+    background-color: #e9e9e9;
+    padding-bottom: 20px;
+  }
+
+  .sub-data-block {
+    width: calc((100vw - 120px) / 6);
+    border-radius: 16px;
+    float: left;
+    margin: 10px;
+    box-shadow: 2px 2px 8px #666666;
+  }
+  .sub-title {
+    font-weight: bold;
+    text-align: center;
+    font-family: 'Microsoft YaHei';
+    color: #fff;
+    font-size: 24px;
+    padding: 10px;
+  }
+  .statis-block {
+    text-align: center;
+    margin: 20px 10px 0px 10px;
+    padding: 10px;
+    color: #fff;
+    font-weight: bold;
+    letter-spacing: 1px;
+    font-size: 24px;
+  }
+  .big-size {
+    font-size: 64px;
+  }
+
+  .chart-title {
+    font-family: 'Microsoft YaHei';
+    color: #000000;
+    font-weight: bold;
+    font-size: 20px;
+    text-align: center;
+    padding: 10px;
+  }
+  .chart-block {
+    margin-left: 20px;
+    margin-top: 20px;
+    border-radius: 16px;
+    background-color: #FFFFFF;
+    box-shadow: 2px 2px 8px #666666;
+  }
+
+  #today-visitor {
+    background-image: linear-gradient(to right, #ff8fdf, #ff01b4);
+  }
+  #total-visitor {
+    background-image: linear-gradient(to right, #9280ff, #2400ff);
+  }
+  #current-alarm {
+    background-image: linear-gradient(to right, #ff696a, #ff0101);
+  }
+  #total-alarm {
+    background-image: linear-gradient(to right, #7fbbff, #0078ff);
+  }
+  #online-device {
+    background-image: linear-gradient(to right, #72ff7e, #01a411);
+  }
+  #total-device {
+    background-image: linear-gradient(to right, #ffa800, #ce7e00);
+  }
+
+  #pass-count, #dev-alarm-count {
+    width: calc(250vw / 6 - 70px);
+  }
+</style>
diff --git a/src/views/ctrl/statCharts/devAlarmCount.vue b/src/views/ctrl/statCharts/devAlarmCount.vue
new file mode 100644
index 0000000..ff2e6c4
--- /dev/null
+++ b/src/views/ctrl/statCharts/devAlarmCount.vue
@@ -0,0 +1,111 @@
+<template>
+  <div>
+    <el-date-picker
+      v-model="timeRange"
+      :picker-options="pickerOptions"
+      type="daterange"
+      range-separator="至"
+      start-placeholder="开始日期"
+      end-placeholder="结束日期"
+      style="margin-bottom: 10px;" />
+    <ve-histogram :data="chartData" :settings="settings" height="350px" />
+  </div>
+</template>
+
+<script>
+import { formatToString, getDate, oneDayTime } from '@/utils/calendarUtil'
+import { devAlarmCount } from '@/api/statistics'
+
+const now = new Date()
+
+export default {
+  name: 'DevAlarmCount',
+  data() {
+    return {
+      params: {
+        beginDate: '',
+        endDate: ''
+      },
+      chartData: {
+        columns: ['name', 'count'],
+        rows: []
+      },
+      settings: {
+        labelMap: {
+          'name': '设备类型',
+          'count': '报警数量'
+        },
+        max: [4]
+      },
+      timeRange: [],
+      pickerOptions: {
+        shortcuts: [{
+          text: '最近七日',
+          onClick(picker) {
+            const end = now
+            const start = new Date()
+            start.setTime(start.getTime() - oneDayTime * 7)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近十日',
+          onClick(picker) {
+            const end = now
+            const start = new Date()
+            start.setTime(start.getTime() - oneDayTime * 10)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近三十日',
+          onClick(picker) {
+            const end = now
+            const start = new Date()
+            start.setTime(start.getTime() - oneDayTime * 30)
+            picker.$emit('pick', [start, end])
+          }
+        }],
+        disabledDate(time) {
+          const oneMonthLater = new Date(now.getTime() - (oneDayTime * 31))
+          return time.getTime() < oneMonthLater
+        }
+      }
+    }
+  },
+  watch: {
+    timeRange: function(newV) {
+      if (newV) {
+        this.params.beginDate = formatToString(newV[0], 'DATE')
+        this.params.endDate = formatToString(newV[1], 'DATE')
+      } else {
+        this.initTime()
+      }
+      this.fetchData()
+    }
+  },
+  created() {
+    this.initTime()
+  },
+  activated() {
+    this.fetchData()
+  },
+  methods: {
+    initTime() {
+      this.params.beginDate = getDate(-7, 'DATE')
+      this.params.endDate = getDate(1, 'DATE')
+
+      this.timeRange = [this.params.beginDate, this.params.endDate]
+    },
+    fetchData() {
+      devAlarmCount(this.params).then(response => {
+        if (response.code === 200) {
+          this.chartData.rows = response.data
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/ctrl/statCharts/devCount.vue b/src/views/ctrl/statCharts/devCount.vue
new file mode 100644
index 0000000..d3e2902
--- /dev/null
+++ b/src/views/ctrl/statCharts/devCount.vue
@@ -0,0 +1,39 @@
+<template>
+  <ve-ring :data="chartData" :settings="settings" />
+</template>
+
+<script>
+import { devCount } from '@/api/statistics'
+
+export default {
+  name: 'DevCount',
+  data() {
+    return {
+      chartData: {
+        columns: ['name', 'count'],
+        rows: []
+      },
+      settings: {
+        // legendLimit: 4
+        radius: [60, 100]
+      }
+    }
+  },
+  activated() {
+    this.fetchData()
+  },
+  methods: {
+    fetchData() {
+      devCount().then(response => {
+        if (response.code === 200) {
+          this.chartData.rows = response.data
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/ctrl/statCharts/inOutCount.vue b/src/views/ctrl/statCharts/inOutCount.vue
new file mode 100644
index 0000000..1956305
--- /dev/null
+++ b/src/views/ctrl/statCharts/inOutCount.vue
@@ -0,0 +1,193 @@
+<template>
+  <div>
+    <el-date-picker
+      v-model="timeRange"
+      :picker-options="pickerOptions"
+      type="daterange"
+      range-separator="至"
+      start-placeholder="开始日期"
+      end-placeholder="结束日期"
+      style="margin-bottom: 10px"/>
+    <ve-line :data="chartData" :settings="settings" height="350px" />
+  </div>
+</template>
+
+<script>
+import { formatToString, parseToDate, getDate, oneDayTime } from '@/utils/calendarUtil'
+import { inOutCount } from '@/api/statistics'
+
+const now = new Date()
+
+export default {
+  name: 'InOutCount',
+  data() {
+    return {
+      params: {
+        beginDate: '',
+        endDate: ''
+      },
+      chartData: {
+        columns: ['date', 'staff', 'visitor', 'car', 'visitorCar'],
+        rows: []
+      },
+      settings: {
+        labelMap: {
+          'staff': '内部人员',
+          'visitor': '来访人员',
+          'car': '内部车辆',
+          'visitorCar': '来访车辆'
+        },
+        xAxisType: 'time',
+        max: [4],
+        area: true,
+        metrics: ['staff', 'visitor', 'car', 'visitorCar'],
+        dimension: ['date']
+      },
+      timeRange: [],
+      pickerOptions: {
+        shortcuts: [{
+          text: '最近七日',
+          onClick(picker) {
+            const end = now
+            const start = new Date()
+            start.setTime(start.getTime() - oneDayTime * 7)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近十日',
+          onClick(picker) {
+            const end = now
+            const start = new Date()
+            start.setTime(start.getTime() - oneDayTime * 10)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近三十日',
+          onClick(picker) {
+            const end = now
+            const start = new Date()
+            start.setTime(start.getTime() - oneDayTime * 30)
+            picker.$emit('pick', [start, end])
+          }
+        }],
+        disabledDate(time) {
+          const oneMonthLater = new Date(now.getTime() - (oneDayTime * 31))
+          return time.getTime() < oneMonthLater
+        }
+      }
+    }
+  },
+  watch: {
+    timeRange: function(newV) {
+      if (newV) {
+        this.params.beginDate = formatToString(newV[0], 'DATE')
+        this.params.endDate = formatToString(newV[1], 'DATE')
+      } else {
+        this.initTime()
+      }
+      this.fetchData()
+    }
+  },
+  created() {
+    this.initTime()
+  },
+  activated() {
+    this.fetchData()
+  },
+  methods: {
+    initTime() {
+      this.params.beginDate = getDate(-7, 'DATE')
+      this.params.endDate = getDate(1, 'DATE')
+
+      this.timeRange = [this.params.beginDate, this.params.endDate]
+    },
+    fetchData() {
+      inOutCount(this.params).then(response => {
+        if (response.code === 200) {
+          const data = this.parseStatisticsData(response.data)
+          this.chartData.rows = data.rowDatas
+          this.chartData.max = [data.maxCount]
+        }
+      })
+    },
+    parseStatisticsData(obj) {
+      const staffList = obj.person
+      const visitorList = obj.visitorPerson
+      const carList = obj.car
+      const visitorCarList = obj.visitorCar
+
+      const rowDatas = [] // 返回的数据
+      let maxCount = 4 // 返回的最大的计数值
+
+      let start = parseToDate(this.params.beginDate, 'DATE').valueOf() // 开始日期的Date对象
+      const end = parseToDate(this.params.endDate, 'DATE').valueOf() // 结束日期的Date对象
+
+      let indexS = 0 // 内部人员索引
+      let indexV = 0 // 访客索引
+      let indexC = 0 // 内部车辆索引
+      let indexVc = 0 // 访客车辆索引
+
+      // 遍历时间
+      while (start < end) {
+        const staff = staffList[indexS]
+        const visitor = visitorList[indexV]
+        const car = carList[indexC]
+        const visitorCar = visitorCarList[indexVc]
+
+        let staffCount = 0
+        let visitorCount = 0
+        let carCount = 0
+        let visitorCarCount = 0
+
+        const date = formatToString(start, 'DATE')
+
+        if (typeof staff !== 'undefined') {
+          if (staff.date === date) {
+            staffCount = staff.count
+            indexS++
+          }
+        }
+
+        if (typeof visitor !== 'undefined') {
+          if (visitor.date === date) {
+            visitorCount = visitor.count
+            indexV++
+          }
+        }
+
+        if (typeof car !== 'undefined') {
+          if (car.date === date) {
+            carCount = car.count
+            indexC++
+          }
+        }
+
+        if (typeof visitorCar !== 'undefined') {
+          if (visitorCar.date === date) {
+            visitorCarCount = car.count
+            indexVc++
+          }
+        }
+
+        if (staffCount + visitorCount + carCount + visitorCarCount > 0) {
+          rowDatas.push({ date: date, staff: staffCount, visitor: visitorCount, car: carCount, visitorCar: visitorCarCount })
+        }
+        start += oneDayTime
+      }
+
+      // 设置最大值用以不显示小数
+      maxCount = Math.ceil(maxCount * 1.1)
+
+      // 返回生成好的图表数据
+      return {
+        rowDatas: rowDatas,
+        maxCount: maxCount
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/ctrl/statCharts/inOutDoorCount.vue b/src/views/ctrl/statCharts/inOutDoorCount.vue
new file mode 100644
index 0000000..1d73651
--- /dev/null
+++ b/src/views/ctrl/statCharts/inOutDoorCount.vue
@@ -0,0 +1,187 @@
+<template>
+  <div>
+    <el-date-picker
+      v-model="timeRange"
+      :picker-options="pickerOptions"
+      type="daterange"
+      range-separator="至"
+      start-placeholder="开始日期"
+      end-placeholder="结束日期"
+      style="margin-bottom: 10px;" />
+    <ve-histogram :data="chartData" :settings="settings" height="350px" />
+  </div>
+</template>
+
+<script>
+import { formatToString, getDate, oneDayTime } from '@/utils/calendarUtil'
+import { inOutDoorCount } from '@/api/statistics'
+
+const now = new Date()
+
+export default {
+  name: 'InOutDoorCount',
+  data() {
+    return {
+      params: {
+        beginDate: '',
+        endDate: ''
+      },
+      chartData: {
+        columns: ['name', 'person', 'car'],
+        rows: []
+      },
+      settings: {
+        labelMap: {
+          'person': '人员',
+          'car': '车辆'
+        },
+        max: [4],
+        metrics: ['person', 'car'],
+        dimension: ['name']
+      },
+      timeRange: [],
+      pickerOptions: {
+        shortcuts: [{
+          text: '最近七日',
+          onClick(picker) {
+            const end = now
+            const start = new Date()
+            start.setTime(start.getTime() - oneDayTime * 7)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近十日',
+          onClick(picker) {
+            const end = now
+            const start = new Date()
+            start.setTime(start.getTime() - oneDayTime * 10)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近三十日',
+          onClick(picker) {
+            const end = now
+            const start = new Date()
+            start.setTime(start.getTime() - oneDayTime * 30)
+            picker.$emit('pick', [start, end])
+          }
+        }],
+        disabledDate(time) {
+          const oneMonthLater = new Date(now.getTime() - (oneDayTime * 31))
+          return time.getTime() < oneMonthLater
+        }
+      }
+    }
+  },
+  watch: {
+    timeRange: function(newV) {
+      if (newV) {
+        this.params.beginDate = formatToString(newV[0], 'DATE')
+        this.params.endDate = formatToString(newV[1], 'DATE')
+      } else {
+        this.initTime()
+      }
+      this.fetchData()
+    }
+  },
+  created() {
+    this.initTime()
+  },
+  activated() {
+    this.fetchData()
+  },
+  methods: {
+    initTime() {
+      this.params.beginDate = getDate(-7, 'DATE')
+      this.params.endDate = getDate(1, 'DATE')
+
+      this.timeRange = [this.params.beginDate, this.params.endDate]
+    },
+    fetchData() {
+      inOutDoorCount(this.params).then(response => {
+        if (response.code === 200) {
+          const data = this.parseStatisticsData(response.data)
+          this.chartData.rows = data.rowDatas
+          this.chartData.max = [data.maxCount]
+        }
+      })
+    },
+    parseStatisticsData(obj) {
+      const personList = obj.person
+      const carList = obj.car
+
+      const rowDatas = [] // 返回的数据
+      let maxCount = 4 // 返回的最大的计数值
+      let indexS = 0
+      let indexV = 0
+      // 遍历内部人员（车辆）和来访人员（车辆），生成图表所需要的数据格式
+      while (indexS < personList.length || indexV < carList.length) {
+        let person = {}
+        let car = {}
+
+        // 获取内部人员（车辆）对象
+        if (indexS < personList.length) {
+          person = personList[indexS]
+        } else {
+          person = {}
+        }
+
+        // 获取来访人员（车辆）对象
+        if (indexV < carList.length) {
+          car = carList[indexV]
+        } else {
+          car = {}
+        }
+
+        // 如果内部人员（车辆）的队列已经取完则直接添加来访人员（车辆）
+        if (typeof person.name === 'undefined') {
+          rowDatas.push({ name: person.name, car: car.count })
+          indexV++
+          maxCount = Math.max(maxCount, car.count)
+          continue
+        }
+
+        // 如果来访人员（车辆）的队列已经取完则直接添加内部人员（车辆）
+        if (typeof person.name === 'undefined') {
+          rowDatas.push({ name: person.name, person: person.count })
+          indexS++
+          maxCount = Math.max(maxCount, person.count)
+          continue
+        }
+
+        // 队列都还没有处理完成则比较日期的大小
+        const carVal = car.name
+        const personVal = person.name
+        if (personVal < carVal) {
+          // 人员列表的日期比较小
+          rowDatas.push({ name: person.name, person: person.count })
+          indexS++
+          maxCount = Math.max(maxCount, person.count)
+        } else if (personVal > carVal) {
+          // 访客列表的日期比较小
+          rowDatas.push({ name: car.name, car: car.count })
+          indexV++
+          maxCount = Math.max(maxCount, car.count)
+        } else {
+          rowDatas.push({ name: person.name, person: person.count, car: car.count })
+          indexS++
+          indexV++
+          maxCount = Math.max(maxCount, person.count, car.count)
+        }
+      }
+      // 设置最大值用以不显示小数
+      maxCount = Math.ceil(maxCount * 1.1)
+
+      // 返回生成好的图表数据
+      return {
+        rowDatas: rowDatas,
+        maxCount: maxCount
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/ctrl/statCharts/inOutKeyCount.vue b/src/views/ctrl/statCharts/inOutKeyCount.vue
new file mode 100644
index 0000000..fa9a0b7
--- /dev/null
+++ b/src/views/ctrl/statCharts/inOutKeyCount.vue
@@ -0,0 +1,38 @@
+<template>
+  <ve-ring :data="chartData" :settings="settings" />
+</template>
+
+<script>
+import { inOutKeyCount } from '@/api/statistics'
+
+export default {
+  name: 'InOutKeyCount',
+  data() {
+    return {
+      chartData: {
+        columns: ['name', 'count'],
+        rows: []
+      },
+      settings: {
+        radius: [60, 100]
+      }
+    }
+  },
+  activated() {
+    this.fetchData()
+  },
+  methods: {
+    fetchData() {
+      inOutKeyCount().then(response => {
+        if (response.code === 200) {
+          this.chartData.rows = response.data
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/ctrl/statCharts/inOutToday.vue b/src/views/ctrl/statCharts/inOutToday.vue
new file mode 100644
index 0000000..c37fa7b
--- /dev/null
+++ b/src/views/ctrl/statCharts/inOutToday.vue
@@ -0,0 +1,45 @@
+<template>
+  <ve-ring :data="chartData" :settings="settings" />
+</template>
+
+<script>
+import { inOutToday } from '@/api/statistics'
+
+export default {
+  name: 'InOutToday',
+  data() {
+    return {
+      chartData: {
+        columns: ['name', 'count'],
+        rows: [
+          { count: 4, name: '内部人员' },
+          { count: 1, name: '来访人员' },
+          { count: 2, name: '内部车辆' },
+          { count: 1, name: '来访车辆' }
+        ]
+      },
+      settings: {
+        radius: [60, 100]
+      }
+    }
+  },
+  activated() {
+    this.fetchData()
+  },
+  methods: {
+    fetchData() {
+      inOutToday().then(response => {
+        if (response.code === 200) {
+          if (response.data.length > 0) {
+            this.chartData.rows = response.data
+          }
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/dashboard/portal.vue b/src/views/dashboard/portal.vue
index 4365c4b..8ff66c7 100644
--- a/src/views/dashboard/portal.vue
+++ b/src/views/dashboard/portal.vue
@@ -3,14 +3,14 @@
     <el-row>
       <el-col class="sub-system control-system">
         <div class="icon-subsystem">
-          <img src="/static/images/dashboard/icon-control.png">
-          <div><a>综合控制室</a></div>
+          <img src="/static/images/dashboard/icon-control.png" @click="changeSubSystem('ctrl')">
+          <div><a @click="changeSubSystem('ctrl')">综合控制室</a></div>
         </div>
       </el-col>
       <el-col class="sub-system door-system">
         <div class="icon-subsystem">
-          <img src="/static/images/dashboard/icon-door.png">
-          <div><a @click="doorSubSystem">营门管理</a></div>
+          <img src="/static/images/dashboard/icon-door.png" @click="changeSubSystem('door')">
+          <div><a @click="changeSubSystem('door')">营门管理</a></div>
         </div>
       </el-col>
       <el-col class="sub-system defence-system">
@@ -46,7 +46,7 @@
     </div>
 
     <div class="welcome">
-      <img src="/static/images/dashboard/setting-logo.png" height="40px" style="margin-right: 20px;" @click="settingSystem">
+      <img src="/static/images/dashboard/setting-logo.png" height="40px" style="margin-right: 20px;" @click="changeSubSystem('sys')">
       <img src="/static/images/dashboard/exit-logo.png" height="40px" @click="logout">
     </div>
   </div>
@@ -81,12 +81,17 @@
         console.log('获取子系统成功')
       })
     },
-    changeSubSystem(subSys) {
-      this.$store.commit('SET_CHANGEFLAG', '1')
-      this.$store.commit('SET_SYSTEM', subSys)
-      this.$store.dispatch('tagsView/delAllViews', true).then(({ visitedViews }) => {
-        this.$router.replace(subSys.url)
+    changeSubSystem(code) {
+      const system = this.systems.filter(subsys => {
+        return subsys.code === code
       })
+      if (typeof system !== 'undefined' && system.length > 0) {
+        this.$store.commit('SET_CHANGEFLAG', '1')
+        this.$store.commit('SET_SYSTEM', system[0])
+        this.$store.dispatch('tagsView/delAllViews', true).then(({ visitedViews }) => {
+          this.$router.replace(system[0].url)
+        })
+      }
     },
     settingSystem() {
       const setting = this.systems.filter(subsys => {
diff --git a/src/views/layout/SinglePageLayout.vue b/src/views/layout/SinglePageLayout.vue
new file mode 100644
index 0000000..7d352fe
--- /dev/null
+++ b/src/views/layout/SinglePageLayout.vue
@@ -0,0 +1,59 @@
+<template>
+  <div :class="classObj" class="app-wrapper">
+    <app-header class="app-header"/>
+    <div class="app-body">
+      <!--主页-->
+      <el-scrollbar>
+        <app-main/>
+      </el-scrollbar>
+    </div>
+  </div>
+</template>
+
+<script>
+import { AppHeader, AppMain } from './components'
+
+export default {
+  name: 'SinglePageLayout',
+  components: { AppMain, AppHeader },
+  computed: {
+    classObj() {
+      return {
+        mobile: this.device === 'mobile'
+      }
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .app-wrapper {
+    position: relative;
+    height: 100%;
+    width: 100%;
+    &.mobile.openSidebar{
+      position: fixed;
+      top: 0;
+    }
+  }
+  .drawer-bg {
+    background: #000;
+    opacity: 0.3;
+    width: 100%;
+    top: 0;
+    height: 100%;
+    position: absolute;
+    z-index: 999;
+  }
+  .el-scrollbar{
+    /*height: calc(100vh + 17px);*/
+    height: 100vh;
+  }
+</style>
+
+<style>
+<!-- 隐藏横向的滚动条 -->
+  .el-scrollbar__wrap {
+    overflow-x: hidden !important;
+  }
+</style>
diff --git a/src/views/layout/components/AppHeader.vue b/src/views/layout/components/AppHeader.vue
index d187aac..8b71400 100644
--- a/src/views/layout/components/AppHeader.vue
+++ b/src/views/layout/components/AppHeader.vue
@@ -43,6 +43,7 @@
       name: this.$store.getters.name,
       title: getProject().title,
       systems: [
+        { code: 'key', ismenu: '0', levels: 1, name: '综合控制室子系统', resourceType: '02', url: '/ctrl' },
         { code: 'door', ismenu: '0', levels: 1, name: '营门管理子系统', resourceType: '02', url: '/door' },
         { code: 'fence', ismenu: '0', levels: 1, name: '周界防卫子系统', resourceType: '02', url: '/fence' },
         { code: 'region', ismenu: '0', levels: 1, name: '全域监控子系统', resourceType: '02', url: '/region' },
@@ -154,6 +155,7 @@
     /*left: 220px;*/
     color:#d3dce6;
     line-height: 50px;
+    cursor: pointer;
   }
 
 </style>
diff --git a/src/views/staff/staffAdd.vue b/src/views/staff/staffAdd.vue
index 2480ed2..cf4fac4 100644
--- a/src/views/staff/staffAdd.vue
+++ b/src/views/staff/staffAdd.vue
@@ -308,7 +308,7 @@
           that.personForm.sex = parseInt(data.Sex)
           var birth = data.Birthday
           that.personForm.birthday = birth.substring(0, 3) + '-' + birth.substring(4, 5) + '-' + birth.substring(6, 7)
-          that.photo = data.Photo
+          that.photo = data.Photo.replace('bmp', 'png')
           that.personForm.address = data.Address
         } else {
           that.$message.warning('读卡失败')
diff --git a/src/views/staff/staffEdit.vue b/src/views/staff/staffEdit.vue
index 1509501..7f0aaab 100644
--- a/src/views/staff/staffEdit.vue
+++ b/src/views/staff/staffEdit.vue
@@ -267,7 +267,7 @@
             this.areas = personForm.areaIds.split(',')
           }
 
-          // 如果有虹膜数据则显示虹膜信息，可以重新采集
+          // 如果有重点区域授权，则显示虹膜区域的数据
           if (personForm.irisData !== '') {
             this.isKey = true
             this.personForm.irisData = {
@@ -313,7 +313,7 @@
           that.personForm.sex = parseInt(data.Sex)
           var birth = data.Birthday
           that.personForm.birthday = birth.substring(0, 3) + '-' + birth.substring(4, 5) + '-' + birth.substring(6, 7)
-          that.photo = data.Photo
+          that.photo = data.Photo.replace('bmp', 'png')
           that.personForm.address = data.Address
         } else {
           that.$message.warning('读卡失败')
@@ -367,6 +367,12 @@
       if (this.reCaptureIris === '0') {
         this.personForm.irisData = ''
       }
+
+      // 如果重点区域为空，则将irisData置空
+      if (this.areas.length === 0) {
+        this.personForm.irisData = ''
+      }
+
       this.$refs['dataForm'].validate((valid) => {
         if (valid) {
           if (this.isEditMode === true) {

diff --git a/src/api/statistics.js b/src/api/statistics.js
index e20b4c0..741fbb2 100644
--- a/src/api/statistics.js
+++ b/src/api/statistics.js
@@ -55,3 +55,62 @@
     params
   })
 }
+
+// 综合控制室数量统计
+export function getStatisticsData() {
+  return request({
+    url: '/overview/statistics',
+    method: 'get'
+  })
+}
+
+// 今日进出营情况占比
+export function inOutToday() {
+  return request({
+    url: '/overview/todayPassPercentage',
+    method: 'get'
+  })
+}
+
+// 各类型设备安装数量
+export function devCount() {
+  return request({
+    url: '/overview/devicePercentage',
+    method: 'get'
+  })
+}
+
+// 进出营数量统计
+export function inOutCount(params) {
+  return request({
+    url: '/overview/passCountByType',
+    method: 'get',
+    params
+  })
+}
+
+// 各重点区域出入情况
+export function inOutKeyCount() {
+  return request({
+    url: '/overview/keyareaPassPercentage',
+    method: 'get'
+  })
+}
+
+// 各类型报警数量统计
+export function devAlarmCount(params) {
+  return request({
+    url: '/overview/alarmCountByType',
+    method: 'get',
+    params
+  })
+}
+
+// 各营门出入营量统计
+export function inOutDoorCount(params) {
+  return request({
+    url: '/overview/passCountByArea',
+    method: 'get',
+    params
+  })
+}
diff --git a/src/router/index.js b/src/router/index.js
index 9435997..823269b 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -10,6 +10,7 @@
 import Layout from '../views/layout/Layout'
 import { systemRouters } from './modules/system'
 import { doorSysRouters } from './modules/doorSys'
+import { ctrlSysRouters } from './modules/ctrlSys'
 
 /**
 * hidden: true                   if `hidden:true` will not show in the sidebar(default is false)
@@ -88,5 +89,6 @@
 export const asyncRouterMap = [
   ...systemRouters,
   ...doorSysRouters,
+  ...ctrlSysRouters,
   { path: '*', redirect: '/404', hidden: true, meta: {}}
 ]
diff --git a/src/router/modules/ctrlSys.js b/src/router/modules/ctrlSys.js
new file mode 100644
index 0000000..0dce4da
--- /dev/null
+++ b/src/router/modules/ctrlSys.js
@@ -0,0 +1,35 @@
+/* Layout */
+import SinglePageLayout from '@/views/layout/SinglePageLayout'
+export const ctrlSysRouters = [
+  {
+    path: '/ctrl',
+    name: 'ctrl',
+    redirect: '/ctrl',
+    hidden: true,
+    meta: {
+      title: '综合控制室子系统',
+      permission: ['/ctrl'],
+      isSys: true
+    }
+  },
+  {
+    path: '/ctrl/index1',
+    component: SinglePageLayout,
+    name: 'Ctrl1',
+    alwaysShow: false,
+    meta: {
+      title: '',
+      icon: '', // 图标
+      permission: ['/ctrl'], // 权限名称
+      sys: '/ctrl'
+    },
+    children: [
+      {
+        path: '/ctrl/index',
+        name: 'CtrlIndex',
+        component: () => import('@/views/ctrl/index'),
+        meta: { title: '综合控制室首页', icon: '', permission: ['/ctrl/index'], keepAlive: true }
+      }
+    ]
+  }
+]
diff --git a/src/views/ctrl/index.vue b/src/views/ctrl/index.vue
new file mode 100644
index 0000000..93efb6f
--- /dev/null
+++ b/src/views/ctrl/index.vue
@@ -0,0 +1,193 @@
+<template>
+  <div class="app-wrapper">
+    <el-row :gutter="20">
+      <el-col id="today-visitor" class="sub-data-block" style="margin-left: 20px;">
+        <div class="sub-title">今日访客</div>
+        <div class="statis-block">
+          <span class="big-size" v-text="statistics.todayVisitorPerson"/><span>人</span>
+        </div>
+      </el-col>
+
+      <el-col id="total-visitor" class="sub-data-block">
+        <div class="sub-title">累计访客</div>
+        <div class="statis-block">
+          <span class="big-size" v-text="statistics.totalVisitorPerson"/><span>人</span>
+        </div>
+      </el-col>
+
+      <el-col id="current-alarm" class="sub-data-block">
+        <div class="sub-title">当前报警</div>
+        <div class="statis-block">
+          <span class="big-size" v-text="statistics.currentAlarm"/><span>台</span>
+        </div>
+      </el-col>
+
+      <el-col id="total-alarm" class="sub-data-block">
+        <div class="sub-title">累计报警</div>
+        <div class="statis-block">
+          <span class="big-size" v-text="statistics.totalAlarm"/><span>次</span>
+        </div>
+      </el-col>
+
+      <el-col id="online-device" class="sub-data-block">
+        <div class="sub-title">在线设备</div>
+        <div class="statis-block">
+          <span class="big-size" v-text="statistics.onlineDevice"/><span>台</span>
+        </div>
+      </el-col>
+
+      <el-col id="total-device" class="sub-data-block">
+        <div class="sub-title">设备总量</div>
+        <div class="statis-block">
+          <span class="big-size" v-text="statistics.totalDevice"/><span>台</span>
+        </div>
+      </el-col>
+    </el-row>
+
+    <el-row :gutter="20">
+      <el-col :span="7" class="chart-block">
+        <div class="chart-title">今日进出营情况</div>
+        <in-out-today />
+      </el-col>
+
+      <el-col :span="7" class="chart-block">
+        <div class="chart-title">各类型设备安装数量</div>
+        <dev-count />
+      </el-col>
+
+      <el-col id="pass-count" :span="10" class="chart-block">
+        <div class="chart-title">进出营数量统计</div>
+        <in-out-count />
+      </el-col>
+    </el-row>
+
+    <el-row :gutter="20" style="margin-bottom: 40px;">
+      <el-col :span="7" class="chart-block">
+        <div class="chart-title">各重点区域出入情况</div>
+        <in-out-key-count />
+      </el-col>
+
+      <el-col id="dev-alarm-count" :span="10" class="chart-block">
+        <div class="chart-title">设备报警数量统计</div>
+        <dev-alarm-count />
+      </el-col>
+
+      <el-col :span="7" class="chart-block">
+        <div class="chart-title">各营门出入营量统计</div>
+        <in-out-door-count />
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { getStatisticsData } from '@/api/statistics'
+import InOutToday from '@/views/ctrl/statCharts/inOutToday'
+import InOutCount from '@/views/ctrl/statCharts/inOutCount'
+import DevCount from '@/views/ctrl/statCharts/devCount'
+import InOutKeyCount from '@/views/ctrl/statCharts/inOutKeyCount'
+import DevAlarmCount from '@/views/ctrl/statCharts/devAlarmCount'
+import InOutDoorCount from '@/views/ctrl/statCharts/inOutDoorCount'
+export default {
+  name: 'CtrlIndex',
+  components: { InOutToday, DevCount, InOutCount, InOutKeyCount, DevAlarmCount, InOutDoorCount },
+  data() {
+    return {
+      statistics: {
+        todayVisitorPerson: 0,
+        totalVisitorPerson: 0,
+        currentAlarm: 0,
+        totalAlarm: 0,
+        onlineDevice: 0,
+        totalDevice: 0
+      }
+    }
+  },
+  created() {
+    this.fetchStatisticsData()
+  },
+  methods: {
+    fetchStatisticsData() {
+      getStatisticsData().then(response => {
+        if (response.code === 200) {
+          this.statistics = response.data
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .app-wrapper {
+    background-color: #e9e9e9;
+    padding-bottom: 20px;
+  }
+
+  .sub-data-block {
+    width: calc((100vw - 120px) / 6);
+    border-radius: 16px;
+    float: left;
+    margin: 10px;
+    box-shadow: 2px 2px 8px #666666;
+  }
+  .sub-title {
+    font-weight: bold;
+    text-align: center;
+    font-family: 'Microsoft YaHei';
+    color: #fff;
+    font-size: 24px;
+    padding: 10px;
+  }
+  .statis-block {
+    text-align: center;
+    margin: 20px 10px 0px 10px;
+    padding: 10px;
+    color: #fff;
+    font-weight: bold;
+    letter-spacing: 1px;
+    font-size: 24px;
+  }
+  .big-size {
+    font-size: 64px;
+  }
+
+  .chart-title {
+    font-family: 'Microsoft YaHei';
+    color: #000000;
+    font-weight: bold;
+    font-size: 20px;
+    text-align: center;
+    padding: 10px;
+  }
+  .chart-block {
+    margin-left: 20px;
+    margin-top: 20px;
+    border-radius: 16px;
+    background-color: #FFFFFF;
+    box-shadow: 2px 2px 8px #666666;
+  }
+
+  #today-visitor {
+    background-image: linear-gradient(to right, #ff8fdf, #ff01b4);
+  }
+  #total-visitor {
+    background-image: linear-gradient(to right, #9280ff, #2400ff);
+  }
+  #current-alarm {
+    background-image: linear-gradient(to right, #ff696a, #ff0101);
+  }
+  #total-alarm {
+    background-image: linear-gradient(to right, #7fbbff, #0078ff);
+  }
+  #online-device {
+    background-image: linear-gradient(to right, #72ff7e, #01a411);
+  }
+  #total-device {
+    background-image: linear-gradient(to right, #ffa800, #ce7e00);
+  }
+
+  #pass-count, #dev-alarm-count {
+    width: calc(250vw / 6 - 70px);
+  }
+</style>
diff --git a/src/views/ctrl/statCharts/devAlarmCount.vue b/src/views/ctrl/statCharts/devAlarmCount.vue
new file mode 100644
index 0000000..ff2e6c4
--- /dev/null
+++ b/src/views/ctrl/statCharts/devAlarmCount.vue
@@ -0,0 +1,111 @@
+<template>
+  <div>
+    <el-date-picker
+      v-model="timeRange"
+      :picker-options="pickerOptions"
+      type="daterange"
+      range-separator="至"
+      start-placeholder="开始日期"
+      end-placeholder="结束日期"
+      style="margin-bottom: 10px;" />
+    <ve-histogram :data="chartData" :settings="settings" height="350px" />
+  </div>
+</template>
+
+<script>
+import { formatToString, getDate, oneDayTime } from '@/utils/calendarUtil'
+import { devAlarmCount } from '@/api/statistics'
+
+const now = new Date()
+
+export default {
+  name: 'DevAlarmCount',
+  data() {
+    return {
+      params: {
+        beginDate: '',
+        endDate: ''
+      },
+      chartData: {
+        columns: ['name', 'count'],
+        rows: []
+      },
+      settings: {
+        labelMap: {
+          'name': '设备类型',
+          'count': '报警数量'
+        },
+        max: [4]
+      },
+      timeRange: [],
+      pickerOptions: {
+        shortcuts: [{
+          text: '最近七日',
+          onClick(picker) {
+            const end = now
+            const start = new Date()
+            start.setTime(start.getTime() - oneDayTime * 7)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近十日',
+          onClick(picker) {
+            const end = now
+            const start = new Date()
+            start.setTime(start.getTime() - oneDayTime * 10)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近三十日',
+          onClick(picker) {
+            const end = now
+            const start = new Date()
+            start.setTime(start.getTime() - oneDayTime * 30)
+            picker.$emit('pick', [start, end])
+          }
+        }],
+        disabledDate(time) {
+          const oneMonthLater = new Date(now.getTime() - (oneDayTime * 31))
+          return time.getTime() < oneMonthLater
+        }
+      }
+    }
+  },
+  watch: {
+    timeRange: function(newV) {
+      if (newV) {
+        this.params.beginDate = formatToString(newV[0], 'DATE')
+        this.params.endDate = formatToString(newV[1], 'DATE')
+      } else {
+        this.initTime()
+      }
+      this.fetchData()
+    }
+  },
+  created() {
+    this.initTime()
+  },
+  activated() {
+    this.fetchData()
+  },
+  methods: {
+    initTime() {
+      this.params.beginDate = getDate(-7, 'DATE')
+      this.params.endDate = getDate(1, 'DATE')
+
+      this.timeRange = [this.params.beginDate, this.params.endDate]
+    },
+    fetchData() {
+      devAlarmCount(this.params).then(response => {
+        if (response.code === 200) {
+          this.chartData.rows = response.data
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/ctrl/statCharts/devCount.vue b/src/views/ctrl/statCharts/devCount.vue
new file mode 100644
index 0000000..d3e2902
--- /dev/null
+++ b/src/views/ctrl/statCharts/devCount.vue
@@ -0,0 +1,39 @@
+<template>
+  <ve-ring :data="chartData" :settings="settings" />
+</template>
+
+<script>
+import { devCount } from '@/api/statistics'
+
+export default {
+  name: 'DevCount',
+  data() {
+    return {
+      chartData: {
+        columns: ['name', 'count'],
+        rows: []
+      },
+      settings: {
+        // legendLimit: 4
+        radius: [60, 100]
+      }
+    }
+  },
+  activated() {
+    this.fetchData()
+  },
+  methods: {
+    fetchData() {
+      devCount().then(response => {
+        if (response.code === 200) {
+          this.chartData.rows = response.data
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/ctrl/statCharts/inOutCount.vue b/src/views/ctrl/statCharts/inOutCount.vue
new file mode 100644
index 0000000..1956305
--- /dev/null
+++ b/src/views/ctrl/statCharts/inOutCount.vue
@@ -0,0 +1,193 @@
+<template>
+  <div>
+    <el-date-picker
+      v-model="timeRange"
+      :picker-options="pickerOptions"
+      type="daterange"
+      range-separator="至"
+      start-placeholder="开始日期"
+      end-placeholder="结束日期"
+      style="margin-bottom: 10px"/>
+    <ve-line :data="chartData" :settings="settings" height="350px" />
+  </div>
+</template>
+
+<script>
+import { formatToString, parseToDate, getDate, oneDayTime } from '@/utils/calendarUtil'
+import { inOutCount } from '@/api/statistics'
+
+const now = new Date()
+
+export default {
+  name: 'InOutCount',
+  data() {
+    return {
+      params: {
+        beginDate: '',
+        endDate: ''
+      },
+      chartData: {
+        columns: ['date', 'staff', 'visitor', 'car', 'visitorCar'],
+        rows: []
+      },
+      settings: {
+        labelMap: {
+          'staff': '内部人员',
+          'visitor': '来访人员',
+          'car': '内部车辆',
+          'visitorCar': '来访车辆'
+        },
+        xAxisType: 'time',
+        max: [4],
+        area: true,
+        metrics: ['staff', 'visitor', 'car', 'visitorCar'],
+        dimension: ['date']
+      },
+      timeRange: [],
+      pickerOptions: {
+        shortcuts: [{
+          text: '最近七日',
+          onClick(picker) {
+            const end = now
+            const start = new Date()
+            start.setTime(start.getTime() - oneDayTime * 7)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近十日',
+          onClick(picker) {
+            const end = now
+            const start = new Date()
+            start.setTime(start.getTime() - oneDayTime * 10)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近三十日',
+          onClick(picker) {
+            const end = now
+            const start = new Date()
+            start.setTime(start.getTime() - oneDayTime * 30)
+            picker.$emit('pick', [start, end])
+          }
+        }],
+        disabledDate(time) {
+          const oneMonthLater = new Date(now.getTime() - (oneDayTime * 31))
+          return time.getTime() < oneMonthLater
+        }
+      }
+    }
+  },
+  watch: {
+    timeRange: function(newV) {
+      if (newV) {
+        this.params.beginDate = formatToString(newV[0], 'DATE')
+        this.params.endDate = formatToString(newV[1], 'DATE')
+      } else {
+        this.initTime()
+      }
+      this.fetchData()
+    }
+  },
+  created() {
+    this.initTime()
+  },
+  activated() {
+    this.fetchData()
+  },
+  methods: {
+    initTime() {
+      this.params.beginDate = getDate(-7, 'DATE')
+      this.params.endDate = getDate(1, 'DATE')
+
+      this.timeRange = [this.params.beginDate, this.params.endDate]
+    },
+    fetchData() {
+      inOutCount(this.params).then(response => {
+        if (response.code === 200) {
+          const data = this.parseStatisticsData(response.data)
+          this.chartData.rows = data.rowDatas
+          this.chartData.max = [data.maxCount]
+        }
+      })
+    },
+    parseStatisticsData(obj) {
+      const staffList = obj.person
+      const visitorList = obj.visitorPerson
+      const carList = obj.car
+      const visitorCarList = obj.visitorCar
+
+      const rowDatas = [] // 返回的数据
+      let maxCount = 4 // 返回的最大的计数值
+
+      let start = parseToDate(this.params.beginDate, 'DATE').valueOf() // 开始日期的Date对象
+      const end = parseToDate(this.params.endDate, 'DATE').valueOf() // 结束日期的Date对象
+
+      let indexS = 0 // 内部人员索引
+      let indexV = 0 // 访客索引
+      let indexC = 0 // 内部车辆索引
+      let indexVc = 0 // 访客车辆索引
+
+      // 遍历时间
+      while (start < end) {
+        const staff = staffList[indexS]
+        const visitor = visitorList[indexV]
+        const car = carList[indexC]
+        const visitorCar = visitorCarList[indexVc]
+
+        let staffCount = 0
+        let visitorCount = 0
+        let carCount = 0
+        let visitorCarCount = 0
+
+        const date = formatToString(start, 'DATE')
+
+        if (typeof staff !== 'undefined') {
+          if (staff.date === date) {
+            staffCount = staff.count
+            indexS++
+          }
+        }
+
+        if (typeof visitor !== 'undefined') {
+          if (visitor.date === date) {
+            visitorCount = visitor.count
+            indexV++
+          }
+        }
+
+        if (typeof car !== 'undefined') {
+          if (car.date === date) {
+            carCount = car.count
+            indexC++
+          }
+        }
+
+        if (typeof visitorCar !== 'undefined') {
+          if (visitorCar.date === date) {
+            visitorCarCount = car.count
+            indexVc++
+          }
+        }
+
+        if (staffCount + visitorCount + carCount + visitorCarCount > 0) {
+          rowDatas.push({ date: date, staff: staffCount, visitor: visitorCount, car: carCount, visitorCar: visitorCarCount })
+        }
+        start += oneDayTime
+      }
+
+      // 设置最大值用以不显示小数
+      maxCount = Math.ceil(maxCount * 1.1)
+
+      // 返回生成好的图表数据
+      return {
+        rowDatas: rowDatas,
+        maxCount: maxCount
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/ctrl/statCharts/inOutDoorCount.vue b/src/views/ctrl/statCharts/inOutDoorCount.vue
new file mode 100644
index 0000000..1d73651
--- /dev/null
+++ b/src/views/ctrl/statCharts/inOutDoorCount.vue
@@ -0,0 +1,187 @@
+<template>
+  <div>
+    <el-date-picker
+      v-model="timeRange"
+      :picker-options="pickerOptions"
+      type="daterange"
+      range-separator="至"
+      start-placeholder="开始日期"
+      end-placeholder="结束日期"
+      style="margin-bottom: 10px;" />
+    <ve-histogram :data="chartData" :settings="settings" height="350px" />
+  </div>
+</template>
+
+<script>
+import { formatToString, getDate, oneDayTime } from '@/utils/calendarUtil'
+import { inOutDoorCount } from '@/api/statistics'
+
+const now = new Date()
+
+export default {
+  name: 'InOutDoorCount',
+  data() {
+    return {
+      params: {
+        beginDate: '',
+        endDate: ''
+      },
+      chartData: {
+        columns: ['name', 'person', 'car'],
+        rows: []
+      },
+      settings: {
+        labelMap: {
+          'person': '人员',
+          'car': '车辆'
+        },
+        max: [4],
+        metrics: ['person', 'car'],
+        dimension: ['name']
+      },
+      timeRange: [],
+      pickerOptions: {
+        shortcuts: [{
+          text: '最近七日',
+          onClick(picker) {
+            const end = now
+            const start = new Date()
+            start.setTime(start.getTime() - oneDayTime * 7)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近十日',
+          onClick(picker) {
+            const end = now
+            const start = new Date()
+            start.setTime(start.getTime() - oneDayTime * 10)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近三十日',
+          onClick(picker) {
+            const end = now
+            const start = new Date()
+            start.setTime(start.getTime() - oneDayTime * 30)
+            picker.$emit('pick', [start, end])
+          }
+        }],
+        disabledDate(time) {
+          const oneMonthLater = new Date(now.getTime() - (oneDayTime * 31))
+          return time.getTime() < oneMonthLater
+        }
+      }
+    }
+  },
+  watch: {
+    timeRange: function(newV) {
+      if (newV) {
+        this.params.beginDate = formatToString(newV[0], 'DATE')
+        this.params.endDate = formatToString(newV[1], 'DATE')
+      } else {
+        this.initTime()
+      }
+      this.fetchData()
+    }
+  },
+  created() {
+    this.initTime()
+  },
+  activated() {
+    this.fetchData()
+  },
+  methods: {
+    initTime() {
+      this.params.beginDate = getDate(-7, 'DATE')
+      this.params.endDate = getDate(1, 'DATE')
+
+      this.timeRange = [this.params.beginDate, this.params.endDate]
+    },
+    fetchData() {
+      inOutDoorCount(this.params).then(response => {
+        if (response.code === 200) {
+          const data = this.parseStatisticsData(response.data)
+          this.chartData.rows = data.rowDatas
+          this.chartData.max = [data.maxCount]
+        }
+      })
+    },
+    parseStatisticsData(obj) {
+      const personList = obj.person
+      const carList = obj.car
+
+      const rowDatas = [] // 返回的数据
+      let maxCount = 4 // 返回的最大的计数值
+      let indexS = 0
+      let indexV = 0
+      // 遍历内部人员（车辆）和来访人员（车辆），生成图表所需要的数据格式
+      while (indexS < personList.length || indexV < carList.length) {
+        let person = {}
+        let car = {}
+
+        // 获取内部人员（车辆）对象
+        if (indexS < personList.length) {
+          person = personList[indexS]
+        } else {
+          person = {}
+        }
+
+        // 获取来访人员（车辆）对象
+        if (indexV < carList.length) {
+          car = carList[indexV]
+        } else {
+          car = {}
+        }
+
+        // 如果内部人员（车辆）的队列已经取完则直接添加来访人员（车辆）
+        if (typeof person.name === 'undefined') {
+          rowDatas.push({ name: person.name, car: car.count })
+          indexV++
+          maxCount = Math.max(maxCount, car.count)
+          continue
+        }
+
+        // 如果来访人员（车辆）的队列已经取完则直接添加内部人员（车辆）
+        if (typeof person.name === 'undefined') {
+          rowDatas.push({ name: person.name, person: person.count })
+          indexS++
+          maxCount = Math.max(maxCount, person.count)
+          continue
+        }
+
+        // 队列都还没有处理完成则比较日期的大小
+        const carVal = car.name
+        const personVal = person.name
+        if (personVal < carVal) {
+          // 人员列表的日期比较小
+          rowDatas.push({ name: person.name, person: person.count })
+          indexS++
+          maxCount = Math.max(maxCount, person.count)
+        } else if (personVal > carVal) {
+          // 访客列表的日期比较小
+          rowDatas.push({ name: car.name, car: car.count })
+          indexV++
+          maxCount = Math.max(maxCount, car.count)
+        } else {
+          rowDatas.push({ name: person.name, person: person.count, car: car.count })
+          indexS++
+          indexV++
+          maxCount = Math.max(maxCount, person.count, car.count)
+        }
+      }
+      // 设置最大值用以不显示小数
+      maxCount = Math.ceil(maxCount * 1.1)
+
+      // 返回生成好的图表数据
+      return {
+        rowDatas: rowDatas,
+        maxCount: maxCount
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/ctrl/statCharts/inOutKeyCount.vue b/src/views/ctrl/statCharts/inOutKeyCount.vue
new file mode 100644
index 0000000..fa9a0b7
--- /dev/null
+++ b/src/views/ctrl/statCharts/inOutKeyCount.vue
@@ -0,0 +1,38 @@
+<template>
+  <ve-ring :data="chartData" :settings="settings" />
+</template>
+
+<script>
+import { inOutKeyCount } from '@/api/statistics'
+
+export default {
+  name: 'InOutKeyCount',
+  data() {
+    return {
+      chartData: {
+        columns: ['name', 'count'],
+        rows: []
+      },
+      settings: {
+        radius: [60, 100]
+      }
+    }
+  },
+  activated() {
+    this.fetchData()
+  },
+  methods: {
+    fetchData() {
+      inOutKeyCount().then(response => {
+        if (response.code === 200) {
+          this.chartData.rows = response.data
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/ctrl/statCharts/inOutToday.vue b/src/views/ctrl/statCharts/inOutToday.vue
new file mode 100644
index 0000000..c37fa7b
--- /dev/null
+++ b/src/views/ctrl/statCharts/inOutToday.vue
@@ -0,0 +1,45 @@
+<template>
+  <ve-ring :data="chartData" :settings="settings" />
+</template>
+
+<script>
+import { inOutToday } from '@/api/statistics'
+
+export default {
+  name: 'InOutToday',
+  data() {
+    return {
+      chartData: {
+        columns: ['name', 'count'],
+        rows: [
+          { count: 4, name: '内部人员' },
+          { count: 1, name: '来访人员' },
+          { count: 2, name: '内部车辆' },
+          { count: 1, name: '来访车辆' }
+        ]
+      },
+      settings: {
+        radius: [60, 100]
+      }
+    }
+  },
+  activated() {
+    this.fetchData()
+  },
+  methods: {
+    fetchData() {
+      inOutToday().then(response => {
+        if (response.code === 200) {
+          if (response.data.length > 0) {
+            this.chartData.rows = response.data
+          }
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/dashboard/portal.vue b/src/views/dashboard/portal.vue
index 4365c4b..8ff66c7 100644
--- a/src/views/dashboard/portal.vue
+++ b/src/views/dashboard/portal.vue
@@ -3,14 +3,14 @@
     <el-row>
       <el-col class="sub-system control-system">
         <div class="icon-subsystem">
-          <img src="/static/images/dashboard/icon-control.png">
-          <div><a>综合控制室</a></div>
+          <img src="/static/images/dashboard/icon-control.png" @click="changeSubSystem('ctrl')">
+          <div><a @click="changeSubSystem('ctrl')">综合控制室</a></div>
         </div>
       </el-col>
       <el-col class="sub-system door-system">
         <div class="icon-subsystem">
-          <img src="/static/images/dashboard/icon-door.png">
-          <div><a @click="doorSubSystem">营门管理</a></div>
+          <img src="/static/images/dashboard/icon-door.png" @click="changeSubSystem('door')">
+          <div><a @click="changeSubSystem('door')">营门管理</a></div>
         </div>
       </el-col>
       <el-col class="sub-system defence-system">
@@ -46,7 +46,7 @@
     </div>
 
     <div class="welcome">
-      <img src="/static/images/dashboard/setting-logo.png" height="40px" style="margin-right: 20px;" @click="settingSystem">
+      <img src="/static/images/dashboard/setting-logo.png" height="40px" style="margin-right: 20px;" @click="changeSubSystem('sys')">
       <img src="/static/images/dashboard/exit-logo.png" height="40px" @click="logout">
     </div>
   </div>
@@ -81,12 +81,17 @@
         console.log('获取子系统成功')
       })
     },
-    changeSubSystem(subSys) {
-      this.$store.commit('SET_CHANGEFLAG', '1')
-      this.$store.commit('SET_SYSTEM', subSys)
-      this.$store.dispatch('tagsView/delAllViews', true).then(({ visitedViews }) => {
-        this.$router.replace(subSys.url)
+    changeSubSystem(code) {
+      const system = this.systems.filter(subsys => {
+        return subsys.code === code
       })
+      if (typeof system !== 'undefined' && system.length > 0) {
+        this.$store.commit('SET_CHANGEFLAG', '1')
+        this.$store.commit('SET_SYSTEM', system[0])
+        this.$store.dispatch('tagsView/delAllViews', true).then(({ visitedViews }) => {
+          this.$router.replace(system[0].url)
+        })
+      }
     },
     settingSystem() {
       const setting = this.systems.filter(subsys => {
diff --git a/src/views/layout/SinglePageLayout.vue b/src/views/layout/SinglePageLayout.vue
new file mode 100644
index 0000000..7d352fe
--- /dev/null
+++ b/src/views/layout/SinglePageLayout.vue
@@ -0,0 +1,59 @@
+<template>
+  <div :class="classObj" class="app-wrapper">
+    <app-header class="app-header"/>
+    <div class="app-body">
+      <!--主页-->
+      <el-scrollbar>
+        <app-main/>
+      </el-scrollbar>
+    </div>
+  </div>
+</template>
+
+<script>
+import { AppHeader, AppMain } from './components'
+
+export default {
+  name: 'SinglePageLayout',
+  components: { AppMain, AppHeader },
+  computed: {
+    classObj() {
+      return {
+        mobile: this.device === 'mobile'
+      }
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .app-wrapper {
+    position: relative;
+    height: 100%;
+    width: 100%;
+    &.mobile.openSidebar{
+      position: fixed;
+      top: 0;
+    }
+  }
+  .drawer-bg {
+    background: #000;
+    opacity: 0.3;
+    width: 100%;
+    top: 0;
+    height: 100%;
+    position: absolute;
+    z-index: 999;
+  }
+  .el-scrollbar{
+    /*height: calc(100vh + 17px);*/
+    height: 100vh;
+  }
+</style>
+
+<style>
+<!-- 隐藏横向的滚动条 -->
+  .el-scrollbar__wrap {
+    overflow-x: hidden !important;
+  }
+</style>
diff --git a/src/views/layout/components/AppHeader.vue b/src/views/layout/components/AppHeader.vue
index d187aac..8b71400 100644
--- a/src/views/layout/components/AppHeader.vue
+++ b/src/views/layout/components/AppHeader.vue
@@ -43,6 +43,7 @@
       name: this.$store.getters.name,
       title: getProject().title,
       systems: [
+        { code: 'key', ismenu: '0', levels: 1, name: '综合控制室子系统', resourceType: '02', url: '/ctrl' },
         { code: 'door', ismenu: '0', levels: 1, name: '营门管理子系统', resourceType: '02', url: '/door' },
         { code: 'fence', ismenu: '0', levels: 1, name: '周界防卫子系统', resourceType: '02', url: '/fence' },
         { code: 'region', ismenu: '0', levels: 1, name: '全域监控子系统', resourceType: '02', url: '/region' },
@@ -154,6 +155,7 @@
     /*left: 220px;*/
     color:#d3dce6;
     line-height: 50px;
+    cursor: pointer;
   }
 
 </style>
diff --git a/src/views/staff/staffAdd.vue b/src/views/staff/staffAdd.vue
index 2480ed2..cf4fac4 100644
--- a/src/views/staff/staffAdd.vue
+++ b/src/views/staff/staffAdd.vue
@@ -308,7 +308,7 @@
           that.personForm.sex = parseInt(data.Sex)
           var birth = data.Birthday
           that.personForm.birthday = birth.substring(0, 3) + '-' + birth.substring(4, 5) + '-' + birth.substring(6, 7)
-          that.photo = data.Photo
+          that.photo = data.Photo.replace('bmp', 'png')
           that.personForm.address = data.Address
         } else {
           that.$message.warning('读卡失败')
diff --git a/src/views/staff/staffEdit.vue b/src/views/staff/staffEdit.vue
index 1509501..7f0aaab 100644
--- a/src/views/staff/staffEdit.vue
+++ b/src/views/staff/staffEdit.vue
@@ -267,7 +267,7 @@
             this.areas = personForm.areaIds.split(',')
           }
 
-          // 如果有虹膜数据则显示虹膜信息，可以重新采集
+          // 如果有重点区域授权，则显示虹膜区域的数据
           if (personForm.irisData !== '') {
             this.isKey = true
             this.personForm.irisData = {
@@ -313,7 +313,7 @@
           that.personForm.sex = parseInt(data.Sex)
           var birth = data.Birthday
           that.personForm.birthday = birth.substring(0, 3) + '-' + birth.substring(4, 5) + '-' + birth.substring(6, 7)
-          that.photo = data.Photo
+          that.photo = data.Photo.replace('bmp', 'png')
           that.personForm.address = data.Address
         } else {
           that.$message.warning('读卡失败')
@@ -367,6 +367,12 @@
       if (this.reCaptureIris === '0') {
         this.personForm.irisData = ''
       }
+
+      // 如果重点区域为空，则将irisData置空
+      if (this.areas.length === 0) {
+        this.personForm.irisData = ''
+      }
+
       this.$refs['dataForm'].validate((valid) => {
         if (valid) {
           if (this.isEditMode === true) {
diff --git a/src/views/visitor/visitorCarCheckIn.vue b/src/views/visitor/visitorCarCheckIn.vue
index faabda9..c8ca1ee 100644
--- a/src/views/visitor/visitorCarCheckIn.vue
+++ b/src/views/visitor/visitorCarCheckIn.vue
@@ -218,8 +218,8 @@
         if (data !== '' && data.message !== 'fail') {
           that.dataForm.idCard = data.IdCardNo
           that.dataForm.name = data.Name
-          that.photo = data.Photo
-          that.dataForm.photo = data.Photo
+          that.photo = data.Photo.replace('bmp', 'png')
+          that.dataForm.photo = data.Photo.replace('bmp', 'png')
           that.dataForm.address = data.Address
           that.dataForm.sexStr = data.Sex
 

diff --git a/src/api/statistics.js b/src/api/statistics.js
index e20b4c0..741fbb2 100644
--- a/src/api/statistics.js
+++ b/src/api/statistics.js
@@ -55,3 +55,62 @@
     params
   })
 }
+
+// 综合控制室数量统计
+export function getStatisticsData() {
+  return request({
+    url: '/overview/statistics',
+    method: 'get'
+  })
+}
+
+// 今日进出营情况占比
+export function inOutToday() {
+  return request({
+    url: '/overview/todayPassPercentage',
+    method: 'get'
+  })
+}
+
+// 各类型设备安装数量
+export function devCount() {
+  return request({
+    url: '/overview/devicePercentage',
+    method: 'get'
+  })
+}
+
+// 进出营数量统计
+export function inOutCount(params) {
+  return request({
+    url: '/overview/passCountByType',
+    method: 'get',
+    params
+  })
+}
+
+// 各重点区域出入情况
+export function inOutKeyCount() {
+  return request({
+    url: '/overview/keyareaPassPercentage',
+    method: 'get'
+  })
+}
+
+// 各类型报警数量统计
+export function devAlarmCount(params) {
+  return request({
+    url: '/overview/alarmCountByType',
+    method: 'get',
+    params
+  })
+}
+
+// 各营门出入营量统计
+export function inOutDoorCount(params) {
+  return request({
+    url: '/overview/passCountByArea',
+    method: 'get',
+    params
+  })
+}
diff --git a/src/router/index.js b/src/router/index.js
index 9435997..823269b 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -10,6 +10,7 @@
 import Layout from '../views/layout/Layout'
 import { systemRouters } from './modules/system'
 import { doorSysRouters } from './modules/doorSys'
+import { ctrlSysRouters } from './modules/ctrlSys'
 
 /**
 * hidden: true                   if `hidden:true` will not show in the sidebar(default is false)
@@ -88,5 +89,6 @@
 export const asyncRouterMap = [
   ...systemRouters,
   ...doorSysRouters,
+  ...ctrlSysRouters,
   { path: '*', redirect: '/404', hidden: true, meta: {}}
 ]
diff --git a/src/router/modules/ctrlSys.js b/src/router/modules/ctrlSys.js
new file mode 100644
index 0000000..0dce4da
--- /dev/null
+++ b/src/router/modules/ctrlSys.js
@@ -0,0 +1,35 @@
+/* Layout */
+import SinglePageLayout from '@/views/layout/SinglePageLayout'
+export const ctrlSysRouters = [
+  {
+    path: '/ctrl',
+    name: 'ctrl',
+    redirect: '/ctrl',
+    hidden: true,
+    meta: {
+      title: '综合控制室子系统',
+      permission: ['/ctrl'],
+      isSys: true
+    }
+  },
+  {
+    path: '/ctrl/index1',
+    component: SinglePageLayout,
+    name: 'Ctrl1',
+    alwaysShow: false,
+    meta: {
+      title: '',
+      icon: '', // 图标
+      permission: ['/ctrl'], // 权限名称
+      sys: '/ctrl'
+    },
+    children: [
+      {
+        path: '/ctrl/index',
+        name: 'CtrlIndex',
+        component: () => import('@/views/ctrl/index'),
+        meta: { title: '综合控制室首页', icon: '', permission: ['/ctrl/index'], keepAlive: true }
+      }
+    ]
+  }
+]
diff --git a/src/views/ctrl/index.vue b/src/views/ctrl/index.vue
new file mode 100644
index 0000000..93efb6f
--- /dev/null
+++ b/src/views/ctrl/index.vue
@@ -0,0 +1,193 @@
+<template>
+  <div class="app-wrapper">
+    <el-row :gutter="20">
+      <el-col id="today-visitor" class="sub-data-block" style="margin-left: 20px;">
+        <div class="sub-title">今日访客</div>
+        <div class="statis-block">
+          <span class="big-size" v-text="statistics.todayVisitorPerson"/><span>人</span>
+        </div>
+      </el-col>
+
+      <el-col id="total-visitor" class="sub-data-block">
+        <div class="sub-title">累计访客</div>
+        <div class="statis-block">
+          <span class="big-size" v-text="statistics.totalVisitorPerson"/><span>人</span>
+        </div>
+      </el-col>
+
+      <el-col id="current-alarm" class="sub-data-block">
+        <div class="sub-title">当前报警</div>
+        <div class="statis-block">
+          <span class="big-size" v-text="statistics.currentAlarm"/><span>台</span>
+        </div>
+      </el-col>
+
+      <el-col id="total-alarm" class="sub-data-block">
+        <div class="sub-title">累计报警</div>
+        <div class="statis-block">
+          <span class="big-size" v-text="statistics.totalAlarm"/><span>次</span>
+        </div>
+      </el-col>
+
+      <el-col id="online-device" class="sub-data-block">
+        <div class="sub-title">在线设备</div>
+        <div class="statis-block">
+          <span class="big-size" v-text="statistics.onlineDevice"/><span>台</span>
+        </div>
+      </el-col>
+
+      <el-col id="total-device" class="sub-data-block">
+        <div class="sub-title">设备总量</div>
+        <div class="statis-block">
+          <span class="big-size" v-text="statistics.totalDevice"/><span>台</span>
+        </div>
+      </el-col>
+    </el-row>
+
+    <el-row :gutter="20">
+      <el-col :span="7" class="chart-block">
+        <div class="chart-title">今日进出营情况</div>
+        <in-out-today />
+      </el-col>
+
+      <el-col :span="7" class="chart-block">
+        <div class="chart-title">各类型设备安装数量</div>
+        <dev-count />
+      </el-col>
+
+      <el-col id="pass-count" :span="10" class="chart-block">
+        <div class="chart-title">进出营数量统计</div>
+        <in-out-count />
+      </el-col>
+    </el-row>
+
+    <el-row :gutter="20" style="margin-bottom: 40px;">
+      <el-col :span="7" class="chart-block">
+        <div class="chart-title">各重点区域出入情况</div>
+        <in-out-key-count />
+      </el-col>
+
+      <el-col id="dev-alarm-count" :span="10" class="chart-block">
+        <div class="chart-title">设备报警数量统计</div>
+        <dev-alarm-count />
+      </el-col>
+
+      <el-col :span="7" class="chart-block">
+        <div class="chart-title">各营门出入营量统计</div>
+        <in-out-door-count />
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { getStatisticsData } from '@/api/statistics'
+import InOutToday from '@/views/ctrl/statCharts/inOutToday'
+import InOutCount from '@/views/ctrl/statCharts/inOutCount'
+import DevCount from '@/views/ctrl/statCharts/devCount'
+import InOutKeyCount from '@/views/ctrl/statCharts/inOutKeyCount'
+import DevAlarmCount from '@/views/ctrl/statCharts/devAlarmCount'
+import InOutDoorCount from '@/views/ctrl/statCharts/inOutDoorCount'
+export default {
+  name: 'CtrlIndex',
+  components: { InOutToday, DevCount, InOutCount, InOutKeyCount, DevAlarmCount, InOutDoorCount },
+  data() {
+    return {
+      statistics: {
+        todayVisitorPerson: 0,
+        totalVisitorPerson: 0,
+        currentAlarm: 0,
+        totalAlarm: 0,
+        onlineDevice: 0,
+        totalDevice: 0
+      }
+    }
+  },
+  created() {
+    this.fetchStatisticsData()
+  },
+  methods: {
+    fetchStatisticsData() {
+      getStatisticsData().then(response => {
+        if (response.code === 200) {
+          this.statistics = response.data
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .app-wrapper {
+    background-color: #e9e9e9;
+    padding-bottom: 20px;
+  }
+
+  .sub-data-block {
+    width: calc((100vw - 120px) / 6);
+    border-radius: 16px;
+    float: left;
+    margin: 10px;
+    box-shadow: 2px 2px 8px #666666;
+  }
+  .sub-title {
+    font-weight: bold;
+    text-align: center;
+    font-family: 'Microsoft YaHei';
+    color: #fff;
+    font-size: 24px;
+    padding: 10px;
+  }
+  .statis-block {
+    text-align: center;
+    margin: 20px 10px 0px 10px;
+    padding: 10px;
+    color: #fff;
+    font-weight: bold;
+    letter-spacing: 1px;
+    font-size: 24px;
+  }
+  .big-size {
+    font-size: 64px;
+  }
+
+  .chart-title {
+    font-family: 'Microsoft YaHei';
+    color: #000000;
+    font-weight: bold;
+    font-size: 20px;
+    text-align: center;
+    padding: 10px;
+  }
+  .chart-block {
+    margin-left: 20px;
+    margin-top: 20px;
+    border-radius: 16px;
+    background-color: #FFFFFF;
+    box-shadow: 2px 2px 8px #666666;
+  }
+
+  #today-visitor {
+    background-image: linear-gradient(to right, #ff8fdf, #ff01b4);
+  }
+  #total-visitor {
+    background-image: linear-gradient(to right, #9280ff, #2400ff);
+  }
+  #current-alarm {
+    background-image: linear-gradient(to right, #ff696a, #ff0101);
+  }
+  #total-alarm {
+    background-image: linear-gradient(to right, #7fbbff, #0078ff);
+  }
+  #online-device {
+    background-image: linear-gradient(to right, #72ff7e, #01a411);
+  }
+  #total-device {
+    background-image: linear-gradient(to right, #ffa800, #ce7e00);
+  }
+
+  #pass-count, #dev-alarm-count {
+    width: calc(250vw / 6 - 70px);
+  }
+</style>
diff --git a/src/views/ctrl/statCharts/devAlarmCount.vue b/src/views/ctrl/statCharts/devAlarmCount.vue
new file mode 100644
index 0000000..ff2e6c4
--- /dev/null
+++ b/src/views/ctrl/statCharts/devAlarmCount.vue
@@ -0,0 +1,111 @@
+<template>
+  <div>
+    <el-date-picker
+      v-model="timeRange"
+      :picker-options="pickerOptions"
+      type="daterange"
+      range-separator="至"
+      start-placeholder="开始日期"
+      end-placeholder="结束日期"
+      style="margin-bottom: 10px;" />
+    <ve-histogram :data="chartData" :settings="settings" height="350px" />
+  </div>
+</template>
+
+<script>
+import { formatToString, getDate, oneDayTime } from '@/utils/calendarUtil'
+import { devAlarmCount } from '@/api/statistics'
+
+const now = new Date()
+
+export default {
+  name: 'DevAlarmCount',
+  data() {
+    return {
+      params: {
+        beginDate: '',
+        endDate: ''
+      },
+      chartData: {
+        columns: ['name', 'count'],
+        rows: []
+      },
+      settings: {
+        labelMap: {
+          'name': '设备类型',
+          'count': '报警数量'
+        },
+        max: [4]
+      },
+      timeRange: [],
+      pickerOptions: {
+        shortcuts: [{
+          text: '最近七日',
+          onClick(picker) {
+            const end = now
+            const start = new Date()
+            start.setTime(start.getTime() - oneDayTime * 7)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近十日',
+          onClick(picker) {
+            const end = now
+            const start = new Date()
+            start.setTime(start.getTime() - oneDayTime * 10)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近三十日',
+          onClick(picker) {
+            const end = now
+            const start = new Date()
+            start.setTime(start.getTime() - oneDayTime * 30)
+            picker.$emit('pick', [start, end])
+          }
+        }],
+        disabledDate(time) {
+          const oneMonthLater = new Date(now.getTime() - (oneDayTime * 31))
+          return time.getTime() < oneMonthLater
+        }
+      }
+    }
+  },
+  watch: {
+    timeRange: function(newV) {
+      if (newV) {
+        this.params.beginDate = formatToString(newV[0], 'DATE')
+        this.params.endDate = formatToString(newV[1], 'DATE')
+      } else {
+        this.initTime()
+      }
+      this.fetchData()
+    }
+  },
+  created() {
+    this.initTime()
+  },
+  activated() {
+    this.fetchData()
+  },
+  methods: {
+    initTime() {
+      this.params.beginDate = getDate(-7, 'DATE')
+      this.params.endDate = getDate(1, 'DATE')
+
+      this.timeRange = [this.params.beginDate, this.params.endDate]
+    },
+    fetchData() {
+      devAlarmCount(this.params).then(response => {
+        if (response.code === 200) {
+          this.chartData.rows = response.data
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/ctrl/statCharts/devCount.vue b/src/views/ctrl/statCharts/devCount.vue
new file mode 100644
index 0000000..d3e2902
--- /dev/null
+++ b/src/views/ctrl/statCharts/devCount.vue
@@ -0,0 +1,39 @@
+<template>
+  <ve-ring :data="chartData" :settings="settings" />
+</template>
+
+<script>
+import { devCount } from '@/api/statistics'
+
+export default {
+  name: 'DevCount',
+  data() {
+    return {
+      chartData: {
+        columns: ['name', 'count'],
+        rows: []
+      },
+      settings: {
+        // legendLimit: 4
+        radius: [60, 100]
+      }
+    }
+  },
+  activated() {
+    this.fetchData()
+  },
+  methods: {
+    fetchData() {
+      devCount().then(response => {
+        if (response.code === 200) {
+          this.chartData.rows = response.data
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/ctrl/statCharts/inOutCount.vue b/src/views/ctrl/statCharts/inOutCount.vue
new file mode 100644
index 0000000..1956305
--- /dev/null
+++ b/src/views/ctrl/statCharts/inOutCount.vue
@@ -0,0 +1,193 @@
+<template>
+  <div>
+    <el-date-picker
+      v-model="timeRange"
+      :picker-options="pickerOptions"
+      type="daterange"
+      range-separator="至"
+      start-placeholder="开始日期"
+      end-placeholder="结束日期"
+      style="margin-bottom: 10px"/>
+    <ve-line :data="chartData" :settings="settings" height="350px" />
+  </div>
+</template>
+
+<script>
+import { formatToString, parseToDate, getDate, oneDayTime } from '@/utils/calendarUtil'
+import { inOutCount } from '@/api/statistics'
+
+const now = new Date()
+
+export default {
+  name: 'InOutCount',
+  data() {
+    return {
+      params: {
+        beginDate: '',
+        endDate: ''
+      },
+      chartData: {
+        columns: ['date', 'staff', 'visitor', 'car', 'visitorCar'],
+        rows: []
+      },
+      settings: {
+        labelMap: {
+          'staff': '内部人员',
+          'visitor': '来访人员',
+          'car': '内部车辆',
+          'visitorCar': '来访车辆'
+        },
+        xAxisType: 'time',
+        max: [4],
+        area: true,
+        metrics: ['staff', 'visitor', 'car', 'visitorCar'],
+        dimension: ['date']
+      },
+      timeRange: [],
+      pickerOptions: {
+        shortcuts: [{
+          text: '最近七日',
+          onClick(picker) {
+            const end = now
+            const start = new Date()
+            start.setTime(start.getTime() - oneDayTime * 7)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近十日',
+          onClick(picker) {
+            const end = now
+            const start = new Date()
+            start.setTime(start.getTime() - oneDayTime * 10)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近三十日',
+          onClick(picker) {
+            const end = now
+            const start = new Date()
+            start.setTime(start.getTime() - oneDayTime * 30)
+            picker.$emit('pick', [start, end])
+          }
+        }],
+        disabledDate(time) {
+          const oneMonthLater = new Date(now.getTime() - (oneDayTime * 31))
+          return time.getTime() < oneMonthLater
+        }
+      }
+    }
+  },
+  watch: {
+    timeRange: function(newV) {
+      if (newV) {
+        this.params.beginDate = formatToString(newV[0], 'DATE')
+        this.params.endDate = formatToString(newV[1], 'DATE')
+      } else {
+        this.initTime()
+      }
+      this.fetchData()
+    }
+  },
+  created() {
+    this.initTime()
+  },
+  activated() {
+    this.fetchData()
+  },
+  methods: {
+    initTime() {
+      this.params.beginDate = getDate(-7, 'DATE')
+      this.params.endDate = getDate(1, 'DATE')
+
+      this.timeRange = [this.params.beginDate, this.params.endDate]
+    },
+    fetchData() {
+      inOutCount(this.params).then(response => {
+        if (response.code === 200) {
+          const data = this.parseStatisticsData(response.data)
+          this.chartData.rows = data.rowDatas
+          this.chartData.max = [data.maxCount]
+        }
+      })
+    },
+    parseStatisticsData(obj) {
+      const staffList = obj.person
+      const visitorList = obj.visitorPerson
+      const carList = obj.car
+      const visitorCarList = obj.visitorCar
+
+      const rowDatas = [] // 返回的数据
+      let maxCount = 4 // 返回的最大的计数值
+
+      let start = parseToDate(this.params.beginDate, 'DATE').valueOf() // 开始日期的Date对象
+      const end = parseToDate(this.params.endDate, 'DATE').valueOf() // 结束日期的Date对象
+
+      let indexS = 0 // 内部人员索引
+      let indexV = 0 // 访客索引
+      let indexC = 0 // 内部车辆索引
+      let indexVc = 0 // 访客车辆索引
+
+      // 遍历时间
+      while (start < end) {
+        const staff = staffList[indexS]
+        const visitor = visitorList[indexV]
+        const car = carList[indexC]
+        const visitorCar = visitorCarList[indexVc]
+
+        let staffCount = 0
+        let visitorCount = 0
+        let carCount = 0
+        let visitorCarCount = 0
+
+        const date = formatToString(start, 'DATE')
+
+        if (typeof staff !== 'undefined') {
+          if (staff.date === date) {
+            staffCount = staff.count
+            indexS++
+          }
+        }
+
+        if (typeof visitor !== 'undefined') {
+          if (visitor.date === date) {
+            visitorCount = visitor.count
+            indexV++
+          }
+        }
+
+        if (typeof car !== 'undefined') {
+          if (car.date === date) {
+            carCount = car.count
+            indexC++
+          }
+        }
+
+        if (typeof visitorCar !== 'undefined') {
+          if (visitorCar.date === date) {
+            visitorCarCount = car.count
+            indexVc++
+          }
+        }
+
+        if (staffCount + visitorCount + carCount + visitorCarCount > 0) {
+          rowDatas.push({ date: date, staff: staffCount, visitor: visitorCount, car: carCount, visitorCar: visitorCarCount })
+        }
+        start += oneDayTime
+      }
+
+      // 设置最大值用以不显示小数
+      maxCount = Math.ceil(maxCount * 1.1)
+
+      // 返回生成好的图表数据
+      return {
+        rowDatas: rowDatas,
+        maxCount: maxCount
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/ctrl/statCharts/inOutDoorCount.vue b/src/views/ctrl/statCharts/inOutDoorCount.vue
new file mode 100644
index 0000000..1d73651
--- /dev/null
+++ b/src/views/ctrl/statCharts/inOutDoorCount.vue
@@ -0,0 +1,187 @@
+<template>
+  <div>
+    <el-date-picker
+      v-model="timeRange"
+      :picker-options="pickerOptions"
+      type="daterange"
+      range-separator="至"
+      start-placeholder="开始日期"
+      end-placeholder="结束日期"
+      style="margin-bottom: 10px;" />
+    <ve-histogram :data="chartData" :settings="settings" height="350px" />
+  </div>
+</template>
+
+<script>
+import { formatToString, getDate, oneDayTime } from '@/utils/calendarUtil'
+import { inOutDoorCount } from '@/api/statistics'
+
+const now = new Date()
+
+export default {
+  name: 'InOutDoorCount',
+  data() {
+    return {
+      params: {
+        beginDate: '',
+        endDate: ''
+      },
+      chartData: {
+        columns: ['name', 'person', 'car'],
+        rows: []
+      },
+      settings: {
+        labelMap: {
+          'person': '人员',
+          'car': '车辆'
+        },
+        max: [4],
+        metrics: ['person', 'car'],
+        dimension: ['name']
+      },
+      timeRange: [],
+      pickerOptions: {
+        shortcuts: [{
+          text: '最近七日',
+          onClick(picker) {
+            const end = now
+            const start = new Date()
+            start.setTime(start.getTime() - oneDayTime * 7)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近十日',
+          onClick(picker) {
+            const end = now
+            const start = new Date()
+            start.setTime(start.getTime() - oneDayTime * 10)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近三十日',
+          onClick(picker) {
+            const end = now
+            const start = new Date()
+            start.setTime(start.getTime() - oneDayTime * 30)
+            picker.$emit('pick', [start, end])
+          }
+        }],
+        disabledDate(time) {
+          const oneMonthLater = new Date(now.getTime() - (oneDayTime * 31))
+          return time.getTime() < oneMonthLater
+        }
+      }
+    }
+  },
+  watch: {
+    timeRange: function(newV) {
+      if (newV) {
+        this.params.beginDate = formatToString(newV[0], 'DATE')
+        this.params.endDate = formatToString(newV[1], 'DATE')
+      } else {
+        this.initTime()
+      }
+      this.fetchData()
+    }
+  },
+  created() {
+    this.initTime()
+  },
+  activated() {
+    this.fetchData()
+  },
+  methods: {
+    initTime() {
+      this.params.beginDate = getDate(-7, 'DATE')
+      this.params.endDate = getDate(1, 'DATE')
+
+      this.timeRange = [this.params.beginDate, this.params.endDate]
+    },
+    fetchData() {
+      inOutDoorCount(this.params).then(response => {
+        if (response.code === 200) {
+          const data = this.parseStatisticsData(response.data)
+          this.chartData.rows = data.rowDatas
+          this.chartData.max = [data.maxCount]
+        }
+      })
+    },
+    parseStatisticsData(obj) {
+      const personList = obj.person
+      const carList = obj.car
+
+      const rowDatas = [] // 返回的数据
+      let maxCount = 4 // 返回的最大的计数值
+      let indexS = 0
+      let indexV = 0
+      // 遍历内部人员（车辆）和来访人员（车辆），生成图表所需要的数据格式
+      while (indexS < personList.length || indexV < carList.length) {
+        let person = {}
+        let car = {}
+
+        // 获取内部人员（车辆）对象
+        if (indexS < personList.length) {
+          person = personList[indexS]
+        } else {
+          person = {}
+        }
+
+        // 获取来访人员（车辆）对象
+        if (indexV < carList.length) {
+          car = carList[indexV]
+        } else {
+          car = {}
+        }
+
+        // 如果内部人员（车辆）的队列已经取完则直接添加来访人员（车辆）
+        if (typeof person.name === 'undefined') {
+          rowDatas.push({ name: person.name, car: car.count })
+          indexV++
+          maxCount = Math.max(maxCount, car.count)
+          continue
+        }
+
+        // 如果来访人员（车辆）的队列已经取完则直接添加内部人员（车辆）
+        if (typeof person.name === 'undefined') {
+          rowDatas.push({ name: person.name, person: person.count })
+          indexS++
+          maxCount = Math.max(maxCount, person.count)
+          continue
+        }
+
+        // 队列都还没有处理完成则比较日期的大小
+        const carVal = car.name
+        const personVal = person.name
+        if (personVal < carVal) {
+          // 人员列表的日期比较小
+          rowDatas.push({ name: person.name, person: person.count })
+          indexS++
+          maxCount = Math.max(maxCount, person.count)
+        } else if (personVal > carVal) {
+          // 访客列表的日期比较小
+          rowDatas.push({ name: car.name, car: car.count })
+          indexV++
+          maxCount = Math.max(maxCount, car.count)
+        } else {
+          rowDatas.push({ name: person.name, person: person.count, car: car.count })
+          indexS++
+          indexV++
+          maxCount = Math.max(maxCount, person.count, car.count)
+        }
+      }
+      // 设置最大值用以不显示小数
+      maxCount = Math.ceil(maxCount * 1.1)
+
+      // 返回生成好的图表数据
+      return {
+        rowDatas: rowDatas,
+        maxCount: maxCount
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/ctrl/statCharts/inOutKeyCount.vue b/src/views/ctrl/statCharts/inOutKeyCount.vue
new file mode 100644
index 0000000..fa9a0b7
--- /dev/null
+++ b/src/views/ctrl/statCharts/inOutKeyCount.vue
@@ -0,0 +1,38 @@
+<template>
+  <ve-ring :data="chartData" :settings="settings" />
+</template>
+
+<script>
+import { inOutKeyCount } from '@/api/statistics'
+
+export default {
+  name: 'InOutKeyCount',
+  data() {
+    return {
+      chartData: {
+        columns: ['name', 'count'],
+        rows: []
+      },
+      settings: {
+        radius: [60, 100]
+      }
+    }
+  },
+  activated() {
+    this.fetchData()
+  },
+  methods: {
+    fetchData() {
+      inOutKeyCount().then(response => {
+        if (response.code === 200) {
+          this.chartData.rows = response.data
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/ctrl/statCharts/inOutToday.vue b/src/views/ctrl/statCharts/inOutToday.vue
new file mode 100644
index 0000000..c37fa7b
--- /dev/null
+++ b/src/views/ctrl/statCharts/inOutToday.vue
@@ -0,0 +1,45 @@
+<template>
+  <ve-ring :data="chartData" :settings="settings" />
+</template>
+
+<script>
+import { inOutToday } from '@/api/statistics'
+
+export default {
+  name: 'InOutToday',
+  data() {
+    return {
+      chartData: {
+        columns: ['name', 'count'],
+        rows: [
+          { count: 4, name: '内部人员' },
+          { count: 1, name: '来访人员' },
+          { count: 2, name: '内部车辆' },
+          { count: 1, name: '来访车辆' }
+        ]
+      },
+      settings: {
+        radius: [60, 100]
+      }
+    }
+  },
+  activated() {
+    this.fetchData()
+  },
+  methods: {
+    fetchData() {
+      inOutToday().then(response => {
+        if (response.code === 200) {
+          if (response.data.length > 0) {
+            this.chartData.rows = response.data
+          }
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/dashboard/portal.vue b/src/views/dashboard/portal.vue
index 4365c4b..8ff66c7 100644
--- a/src/views/dashboard/portal.vue
+++ b/src/views/dashboard/portal.vue
@@ -3,14 +3,14 @@
     <el-row>
       <el-col class="sub-system control-system">
         <div class="icon-subsystem">
-          <img src="/static/images/dashboard/icon-control.png">
-          <div><a>综合控制室</a></div>
+          <img src="/static/images/dashboard/icon-control.png" @click="changeSubSystem('ctrl')">
+          <div><a @click="changeSubSystem('ctrl')">综合控制室</a></div>
         </div>
       </el-col>
       <el-col class="sub-system door-system">
         <div class="icon-subsystem">
-          <img src="/static/images/dashboard/icon-door.png">
-          <div><a @click="doorSubSystem">营门管理</a></div>
+          <img src="/static/images/dashboard/icon-door.png" @click="changeSubSystem('door')">
+          <div><a @click="changeSubSystem('door')">营门管理</a></div>
         </div>
       </el-col>
       <el-col class="sub-system defence-system">
@@ -46,7 +46,7 @@
     </div>
 
     <div class="welcome">
-      <img src="/static/images/dashboard/setting-logo.png" height="40px" style="margin-right: 20px;" @click="settingSystem">
+      <img src="/static/images/dashboard/setting-logo.png" height="40px" style="margin-right: 20px;" @click="changeSubSystem('sys')">
       <img src="/static/images/dashboard/exit-logo.png" height="40px" @click="logout">
     </div>
   </div>
@@ -81,12 +81,17 @@
         console.log('获取子系统成功')
       })
     },
-    changeSubSystem(subSys) {
-      this.$store.commit('SET_CHANGEFLAG', '1')
-      this.$store.commit('SET_SYSTEM', subSys)
-      this.$store.dispatch('tagsView/delAllViews', true).then(({ visitedViews }) => {
-        this.$router.replace(subSys.url)
+    changeSubSystem(code) {
+      const system = this.systems.filter(subsys => {
+        return subsys.code === code
       })
+      if (typeof system !== 'undefined' && system.length > 0) {
+        this.$store.commit('SET_CHANGEFLAG', '1')
+        this.$store.commit('SET_SYSTEM', system[0])
+        this.$store.dispatch('tagsView/delAllViews', true).then(({ visitedViews }) => {
+          this.$router.replace(system[0].url)
+        })
+      }
     },
     settingSystem() {
       const setting = this.systems.filter(subsys => {
diff --git a/src/views/layout/SinglePageLayout.vue b/src/views/layout/SinglePageLayout.vue
new file mode 100644
index 0000000..7d352fe
--- /dev/null
+++ b/src/views/layout/SinglePageLayout.vue
@@ -0,0 +1,59 @@
+<template>
+  <div :class="classObj" class="app-wrapper">
+    <app-header class="app-header"/>
+    <div class="app-body">
+      <!--主页-->
+      <el-scrollbar>
+        <app-main/>
+      </el-scrollbar>
+    </div>
+  </div>
+</template>
+
+<script>
+import { AppHeader, AppMain } from './components'
+
+export default {
+  name: 'SinglePageLayout',
+  components: { AppMain, AppHeader },
+  computed: {
+    classObj() {
+      return {
+        mobile: this.device === 'mobile'
+      }
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .app-wrapper {
+    position: relative;
+    height: 100%;
+    width: 100%;
+    &.mobile.openSidebar{
+      position: fixed;
+      top: 0;
+    }
+  }
+  .drawer-bg {
+    background: #000;
+    opacity: 0.3;
+    width: 100%;
+    top: 0;
+    height: 100%;
+    position: absolute;
+    z-index: 999;
+  }
+  .el-scrollbar{
+    /*height: calc(100vh + 17px);*/
+    height: 100vh;
+  }
+</style>
+
+<style>
+<!-- 隐藏横向的滚动条 -->
+  .el-scrollbar__wrap {
+    overflow-x: hidden !important;
+  }
+</style>
diff --git a/src/views/layout/components/AppHeader.vue b/src/views/layout/components/AppHeader.vue
index d187aac..8b71400 100644
--- a/src/views/layout/components/AppHeader.vue
+++ b/src/views/layout/components/AppHeader.vue
@@ -43,6 +43,7 @@
       name: this.$store.getters.name,
       title: getProject().title,
       systems: [
+        { code: 'key', ismenu: '0', levels: 1, name: '综合控制室子系统', resourceType: '02', url: '/ctrl' },
         { code: 'door', ismenu: '0', levels: 1, name: '营门管理子系统', resourceType: '02', url: '/door' },
         { code: 'fence', ismenu: '0', levels: 1, name: '周界防卫子系统', resourceType: '02', url: '/fence' },
         { code: 'region', ismenu: '0', levels: 1, name: '全域监控子系统', resourceType: '02', url: '/region' },
@@ -154,6 +155,7 @@
     /*left: 220px;*/
     color:#d3dce6;
     line-height: 50px;
+    cursor: pointer;
   }
 
 </style>
diff --git a/src/views/staff/staffAdd.vue b/src/views/staff/staffAdd.vue
index 2480ed2..cf4fac4 100644
--- a/src/views/staff/staffAdd.vue
+++ b/src/views/staff/staffAdd.vue
@@ -308,7 +308,7 @@
           that.personForm.sex = parseInt(data.Sex)
           var birth = data.Birthday
           that.personForm.birthday = birth.substring(0, 3) + '-' + birth.substring(4, 5) + '-' + birth.substring(6, 7)
-          that.photo = data.Photo
+          that.photo = data.Photo.replace('bmp', 'png')
           that.personForm.address = data.Address
         } else {
           that.$message.warning('读卡失败')
diff --git a/src/views/staff/staffEdit.vue b/src/views/staff/staffEdit.vue
index 1509501..7f0aaab 100644
--- a/src/views/staff/staffEdit.vue
+++ b/src/views/staff/staffEdit.vue
@@ -267,7 +267,7 @@
             this.areas = personForm.areaIds.split(',')
           }
 
-          // 如果有虹膜数据则显示虹膜信息，可以重新采集
+          // 如果有重点区域授权，则显示虹膜区域的数据
           if (personForm.irisData !== '') {
             this.isKey = true
             this.personForm.irisData = {
@@ -313,7 +313,7 @@
           that.personForm.sex = parseInt(data.Sex)
           var birth = data.Birthday
           that.personForm.birthday = birth.substring(0, 3) + '-' + birth.substring(4, 5) + '-' + birth.substring(6, 7)
-          that.photo = data.Photo
+          that.photo = data.Photo.replace('bmp', 'png')
           that.personForm.address = data.Address
         } else {
           that.$message.warning('读卡失败')
@@ -367,6 +367,12 @@
       if (this.reCaptureIris === '0') {
         this.personForm.irisData = ''
       }
+
+      // 如果重点区域为空，则将irisData置空
+      if (this.areas.length === 0) {
+        this.personForm.irisData = ''
+      }
+
       this.$refs['dataForm'].validate((valid) => {
         if (valid) {
           if (this.isEditMode === true) {
diff --git a/src/views/visitor/visitorCarCheckIn.vue b/src/views/visitor/visitorCarCheckIn.vue
index faabda9..c8ca1ee 100644
--- a/src/views/visitor/visitorCarCheckIn.vue
+++ b/src/views/visitor/visitorCarCheckIn.vue
@@ -218,8 +218,8 @@
         if (data !== '' && data.message !== 'fail') {
           that.dataForm.idCard = data.IdCardNo
           that.dataForm.name = data.Name
-          that.photo = data.Photo
-          that.dataForm.photo = data.Photo
+          that.photo = data.Photo.replace('bmp', 'png')
+          that.dataForm.photo = data.Photo.replace('bmp', 'png')
           that.dataForm.address = data.Address
           that.dataForm.sexStr = data.Sex
 
diff --git a/src/views/visitor/visitorCheckIn.vue b/src/views/visitor/visitorCheckIn.vue
index 7c536cb..4d2a9a0 100644
--- a/src/views/visitor/visitorCheckIn.vue
+++ b/src/views/visitor/visitorCheckIn.vue
@@ -215,8 +215,8 @@
         if (data !== '' && data.message !== 'fail') {
           that.dataForm.idCard = data.IdCardNo
           that.dataForm.name = data.Name
-          that.photo = data.Photo
-          that.dataForm.photo = data.Photo
+          that.photo = data.Photo.replace('bmp', 'png')
+          that.dataForm.photo = data.Photo.replace('bmp', 'png')
           that.dataForm.address = data.Address
           that.dataForm.sexStr = data.Sex