diff --git a/src/api/assess/assessDept.js b/src/api/assess/assessDept.js
index 26c8862..408742d 100644
--- a/src/api/assess/assessDept.js
+++ b/src/api/assess/assessDept.js
@@ -51,6 +51,15 @@
   })
 }
 
+// 高发问题按大类统计
+export function highCaseEventList(params) {
+  return request({
+    url: '/departmentAssess/highCaseEventList',
+    method: 'get',
+    params
+  })
+}
+
 // 高发问题文件导出
 export function exportAssessHighEvent(params) {
   return request({

diff --git a/src/api/assess/assessDept.js b/src/api/assess/assessDept.js
index 26c8862..408742d 100644
--- a/src/api/assess/assessDept.js
+++ b/src/api/assess/assessDept.js
@@ -51,6 +51,15 @@
   })
 }
 
+// 高发问题按大类统计
+export function highCaseEventList(params) {
+  return request({
+    url: '/departmentAssess/highCaseEventList',
+    method: 'get',
+    params
+  })
+}
+
 // 高发问题文件导出
 export function exportAssessHighEvent(params) {
   return request({
diff --git a/src/router/index.js b/src/router/index.js
index b700dc8..c6c8081 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -95,5 +95,6 @@
   ...suphandleRouters,
   ...systemRouters,
   ...commenetRouters,
+  ...controlRouters,
   { path: '*', redirect: '/404', hidden: true, meta: {}}
 ]

diff --git a/src/api/assess/assessDept.js b/src/api/assess/assessDept.js
index 26c8862..408742d 100644
--- a/src/api/assess/assessDept.js
+++ b/src/api/assess/assessDept.js
@@ -51,6 +51,15 @@
   })
 }
 
+// 高发问题按大类统计
+export function highCaseEventList(params) {
+  return request({
+    url: '/departmentAssess/highCaseEventList',
+    method: 'get',
+    params
+  })
+}
+
 // 高发问题文件导出
 export function exportAssessHighEvent(params) {
   return request({
diff --git a/src/router/index.js b/src/router/index.js
index b700dc8..c6c8081 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -95,5 +95,6 @@
   ...suphandleRouters,
   ...systemRouters,
   ...commenetRouters,
+  ...controlRouters,
   { path: '*', redirect: '/404', hidden: true, meta: {}}
 ]
diff --git a/src/utils/dateutils.js b/src/utils/dateutils.js
index 868111a..d8b6266 100644
--- a/src/utils/dateutils.js
+++ b/src/utils/dateutils.js
@@ -26,6 +26,12 @@
   return ct_month
 }
 
+export function getDate(delta, fmt) { // 显示与当前时间相差del
+  let now = new Date().valueOf()
+  now = now + 3600 * 1000 * 24 * delta
+  return new Date(now).Format(fmt)
+}
+
 // 对Date的扩展，将 Date 转化为指定格式的String
 // 月(M)、日(d)、小时(h)、分(m)、秒(s)、季度(q) 可以用 1-2 个占位符，
 // 年(y)可以用 1-4 个占位符，毫秒(S)只能用 1 个占位符(是 1-3 位的数字)

diff --git a/src/api/assess/assessDept.js b/src/api/assess/assessDept.js
index 26c8862..408742d 100644
--- a/src/api/assess/assessDept.js
+++ b/src/api/assess/assessDept.js
@@ -51,6 +51,15 @@
   })
 }
 
+// 高发问题按大类统计
+export function highCaseEventList(params) {
+  return request({
+    url: '/departmentAssess/highCaseEventList',
+    method: 'get',
+    params
+  })
+}
+
 // 高发问题文件导出
 export function exportAssessHighEvent(params) {
   return request({
diff --git a/src/router/index.js b/src/router/index.js
index b700dc8..c6c8081 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -95,5 +95,6 @@
   ...suphandleRouters,
   ...systemRouters,
   ...commenetRouters,
+  ...controlRouters,
   { path: '*', redirect: '/404', hidden: true, meta: {}}
 ]
diff --git a/src/utils/dateutils.js b/src/utils/dateutils.js
index 868111a..d8b6266 100644
--- a/src/utils/dateutils.js
+++ b/src/utils/dateutils.js
@@ -26,6 +26,12 @@
   return ct_month
 }
 
+export function getDate(delta, fmt) { // 显示与当前时间相差del
+  let now = new Date().valueOf()
+  now = now + 3600 * 1000 * 24 * delta
+  return new Date(now).Format(fmt)
+}
+
 // 对Date的扩展，将 Date 转化为指定格式的String
 // 月(M)、日(d)、小时(h)、分(m)、秒(s)、季度(q) 可以用 1-2 个占位符，
 // 年(y)可以用 1-4 个占位符，毫秒(S)只能用 1 个占位符(是 1-3 位的数字)
diff --git a/src/views/otherComment/deptHandle/deptHandleChart4Sup.vue b/src/views/otherComment/deptHandle/deptHandleChart4Sup.vue
new file mode 100644
index 0000000..1b460e4
--- /dev/null
+++ b/src/views/otherComment/deptHandle/deptHandleChart4Sup.vue
@@ -0,0 +1,96 @@
+<template>
+  <div class="chart-container">
+    <div ref="chart" class="chart-body" />
+  </div>
+</template>
+
+<script>
+import echarts from 'echarts'
+export default {
+  name: 'DeptHandleChart4Sup',
+  props: {
+    list: {
+      type: Array,
+      default() {
+        return []
+      }
+    }
+  },
+  computed: {
+    columnData() {
+      const tmp = []
+      this.list.forEach(item => {
+        if (item.depId !== '') {
+          const obj = {}
+          obj.name = item.departName
+          obj.type = 'bar'
+          obj.data = []
+          obj.data.push(item.currentCheckNum)
+          obj.data.push(item.checkedNum)
+          tmp.push(obj)
+        }
+      })
+      return tmp
+    }
+  },
+  watch: {
+    list() {
+      this.initChart()
+    }
+  },
+  activated() {
+    this.initChart()
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(this.$refs.chart)
+      this.chart.setOption({
+        title: {
+          text: '各单位处置情况'
+        },
+        backgroundColor: '#ccc',
+        grid: {
+          left: '30px'
+        },
+        legend: {
+          left: '60%'
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        yAxis: [
+          {
+            type: 'category',
+            data: this.list[0],
+            axisLabel: {
+              rotate: 90,
+              fontSize: 10
+            }
+          }
+        ],
+        xAxis: [
+          {
+            type: 'value'
+          }
+        ],
+        series: this.list[1]
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.chart-container{
+  /*text-align: center;*/
+}
+.chart-body{
+  height: 240px;
+  width: 90%;
+  margin-right: auto;
+  margin-left: auto;
+}
+</style>

diff --git a/src/api/assess/assessDept.js b/src/api/assess/assessDept.js
index 26c8862..408742d 100644
--- a/src/api/assess/assessDept.js
+++ b/src/api/assess/assessDept.js
@@ -51,6 +51,15 @@
   })
 }
 
+// 高发问题按大类统计
+export function highCaseEventList(params) {
+  return request({
+    url: '/departmentAssess/highCaseEventList',
+    method: 'get',
+    params
+  })
+}
+
 // 高发问题文件导出
 export function exportAssessHighEvent(params) {
   return request({
diff --git a/src/router/index.js b/src/router/index.js
index b700dc8..c6c8081 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -95,5 +95,6 @@
   ...suphandleRouters,
   ...systemRouters,
   ...commenetRouters,
+  ...controlRouters,
   { path: '*', redirect: '/404', hidden: true, meta: {}}
 ]
diff --git a/src/utils/dateutils.js b/src/utils/dateutils.js
index 868111a..d8b6266 100644
--- a/src/utils/dateutils.js
+++ b/src/utils/dateutils.js
@@ -26,6 +26,12 @@
   return ct_month
 }
 
+export function getDate(delta, fmt) { // 显示与当前时间相差del
+  let now = new Date().valueOf()
+  now = now + 3600 * 1000 * 24 * delta
+  return new Date(now).Format(fmt)
+}
+
 // 对Date的扩展，将 Date 转化为指定格式的String
 // 月(M)、日(d)、小时(h)、分(m)、秒(s)、季度(q) 可以用 1-2 个占位符，
 // 年(y)可以用 1-4 个占位符，毫秒(S)只能用 1 个占位符(是 1-3 位的数字)
diff --git a/src/views/otherComment/deptHandle/deptHandleChart4Sup.vue b/src/views/otherComment/deptHandle/deptHandleChart4Sup.vue
new file mode 100644
index 0000000..1b460e4
--- /dev/null
+++ b/src/views/otherComment/deptHandle/deptHandleChart4Sup.vue
@@ -0,0 +1,96 @@
+<template>
+  <div class="chart-container">
+    <div ref="chart" class="chart-body" />
+  </div>
+</template>
+
+<script>
+import echarts from 'echarts'
+export default {
+  name: 'DeptHandleChart4Sup',
+  props: {
+    list: {
+      type: Array,
+      default() {
+        return []
+      }
+    }
+  },
+  computed: {
+    columnData() {
+      const tmp = []
+      this.list.forEach(item => {
+        if (item.depId !== '') {
+          const obj = {}
+          obj.name = item.departName
+          obj.type = 'bar'
+          obj.data = []
+          obj.data.push(item.currentCheckNum)
+          obj.data.push(item.checkedNum)
+          tmp.push(obj)
+        }
+      })
+      return tmp
+    }
+  },
+  watch: {
+    list() {
+      this.initChart()
+    }
+  },
+  activated() {
+    this.initChart()
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(this.$refs.chart)
+      this.chart.setOption({
+        title: {
+          text: '各单位处置情况'
+        },
+        backgroundColor: '#ccc',
+        grid: {
+          left: '30px'
+        },
+        legend: {
+          left: '60%'
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        yAxis: [
+          {
+            type: 'category',
+            data: this.list[0],
+            axisLabel: {
+              rotate: 90,
+              fontSize: 10
+            }
+          }
+        ],
+        xAxis: [
+          {
+            type: 'value'
+          }
+        ],
+        series: this.list[1]
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.chart-container{
+  /*text-align: center;*/
+}
+.chart-body{
+  height: 240px;
+  width: 90%;
+  margin-right: auto;
+  margin-left: auto;
+}
+</style>
diff --git a/src/views/otherComment/highFreq/highFreqChart4Sup.vue b/src/views/otherComment/highFreq/highFreqChart4Sup.vue
new file mode 100644
index 0000000..72ff2a5
--- /dev/null
+++ b/src/views/otherComment/highFreq/highFreqChart4Sup.vue
@@ -0,0 +1,87 @@
+<template>
+  <div class="chart-container">
+    <div ref="chart" class="chart-body" />
+  </div>
+</template>
+
+<script>
+import echarts from 'echarts'
+export default {
+  name: 'HighFreqChart4Sup',
+  props: {
+    list: {
+      type: Array,
+      default() {
+        return []
+      }
+    }
+  },
+  computed: {
+    pieData() {
+      const tmp = []
+      this.list.forEach((item, index) => {
+        const obj = {}
+        obj.name = item.caseMajorType
+        obj.value = item.caseNum
+        tmp.push(obj)
+      })
+      return tmp
+    }
+  },
+  watch: {
+    list() {
+      this.initChart()
+    }
+  },
+  activated() {
+    this.initChart()
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(this.$refs.chart)
+      this.chart.setOption({
+        title: {
+          text: '高发问题统计'
+        },
+        backgroundColor: '#ccc',
+        tooltip: {
+          show: true
+        },
+        toolbox: {
+          show: true,
+          right: '20',
+          feature: {
+            dataView: {
+              show: true
+            }
+          }
+        },
+        series: [{
+          name: '高发问题',
+          type: 'pie',
+          data: this.pieData,
+          label: {
+            show: false
+          },
+          tooltip: {
+            formatter: '{b}<br/>上报数: {d}%'
+          },
+        }]
+      })
+      this.chart.resize()
+    }
+  }
+}
+</script>
+
+<style scoped>
+.chart-container{
+  text-align: center;
+}
+.chart-body{
+  height: 240px;
+  width: 90%;
+  margin-right: auto;
+  margin-left: auto;
+}
+</style>

diff --git a/src/api/assess/assessDept.js b/src/api/assess/assessDept.js
index 26c8862..408742d 100644
--- a/src/api/assess/assessDept.js
+++ b/src/api/assess/assessDept.js
@@ -51,6 +51,15 @@
   })
 }
 
+// 高发问题按大类统计
+export function highCaseEventList(params) {
+  return request({
+    url: '/departmentAssess/highCaseEventList',
+    method: 'get',
+    params
+  })
+}
+
 // 高发问题文件导出
 export function exportAssessHighEvent(params) {
   return request({
diff --git a/src/router/index.js b/src/router/index.js
index b700dc8..c6c8081 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -95,5 +95,6 @@
   ...suphandleRouters,
   ...systemRouters,
   ...commenetRouters,
+  ...controlRouters,
   { path: '*', redirect: '/404', hidden: true, meta: {}}
 ]
diff --git a/src/utils/dateutils.js b/src/utils/dateutils.js
index 868111a..d8b6266 100644
--- a/src/utils/dateutils.js
+++ b/src/utils/dateutils.js
@@ -26,6 +26,12 @@
   return ct_month
 }
 
+export function getDate(delta, fmt) { // 显示与当前时间相差del
+  let now = new Date().valueOf()
+  now = now + 3600 * 1000 * 24 * delta
+  return new Date(now).Format(fmt)
+}
+
 // 对Date的扩展，将 Date 转化为指定格式的String
 // 月(M)、日(d)、小时(h)、分(m)、秒(s)、季度(q) 可以用 1-2 个占位符，
 // 年(y)可以用 1-4 个占位符，毫秒(S)只能用 1 个占位符(是 1-3 位的数字)
diff --git a/src/views/otherComment/deptHandle/deptHandleChart4Sup.vue b/src/views/otherComment/deptHandle/deptHandleChart4Sup.vue
new file mode 100644
index 0000000..1b460e4
--- /dev/null
+++ b/src/views/otherComment/deptHandle/deptHandleChart4Sup.vue
@@ -0,0 +1,96 @@
+<template>
+  <div class="chart-container">
+    <div ref="chart" class="chart-body" />
+  </div>
+</template>
+
+<script>
+import echarts from 'echarts'
+export default {
+  name: 'DeptHandleChart4Sup',
+  props: {
+    list: {
+      type: Array,
+      default() {
+        return []
+      }
+    }
+  },
+  computed: {
+    columnData() {
+      const tmp = []
+      this.list.forEach(item => {
+        if (item.depId !== '') {
+          const obj = {}
+          obj.name = item.departName
+          obj.type = 'bar'
+          obj.data = []
+          obj.data.push(item.currentCheckNum)
+          obj.data.push(item.checkedNum)
+          tmp.push(obj)
+        }
+      })
+      return tmp
+    }
+  },
+  watch: {
+    list() {
+      this.initChart()
+    }
+  },
+  activated() {
+    this.initChart()
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(this.$refs.chart)
+      this.chart.setOption({
+        title: {
+          text: '各单位处置情况'
+        },
+        backgroundColor: '#ccc',
+        grid: {
+          left: '30px'
+        },
+        legend: {
+          left: '60%'
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        yAxis: [
+          {
+            type: 'category',
+            data: this.list[0],
+            axisLabel: {
+              rotate: 90,
+              fontSize: 10
+            }
+          }
+        ],
+        xAxis: [
+          {
+            type: 'value'
+          }
+        ],
+        series: this.list[1]
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.chart-container{
+  /*text-align: center;*/
+}
+.chart-body{
+  height: 240px;
+  width: 90%;
+  margin-right: auto;
+  margin-left: auto;
+}
+</style>
diff --git a/src/views/otherComment/highFreq/highFreqChart4Sup.vue b/src/views/otherComment/highFreq/highFreqChart4Sup.vue
new file mode 100644
index 0000000..72ff2a5
--- /dev/null
+++ b/src/views/otherComment/highFreq/highFreqChart4Sup.vue
@@ -0,0 +1,87 @@
+<template>
+  <div class="chart-container">
+    <div ref="chart" class="chart-body" />
+  </div>
+</template>
+
+<script>
+import echarts from 'echarts'
+export default {
+  name: 'HighFreqChart4Sup',
+  props: {
+    list: {
+      type: Array,
+      default() {
+        return []
+      }
+    }
+  },
+  computed: {
+    pieData() {
+      const tmp = []
+      this.list.forEach((item, index) => {
+        const obj = {}
+        obj.name = item.caseMajorType
+        obj.value = item.caseNum
+        tmp.push(obj)
+      })
+      return tmp
+    }
+  },
+  watch: {
+    list() {
+      this.initChart()
+    }
+  },
+  activated() {
+    this.initChart()
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(this.$refs.chart)
+      this.chart.setOption({
+        title: {
+          text: '高发问题统计'
+        },
+        backgroundColor: '#ccc',
+        tooltip: {
+          show: true
+        },
+        toolbox: {
+          show: true,
+          right: '20',
+          feature: {
+            dataView: {
+              show: true
+            }
+          }
+        },
+        series: [{
+          name: '高发问题',
+          type: 'pie',
+          data: this.pieData,
+          label: {
+            show: false
+          },
+          tooltip: {
+            formatter: '{b}<br/>上报数: {d}%'
+          },
+        }]
+      })
+      this.chart.resize()
+    }
+  }
+}
+</script>
+
+<style scoped>
+.chart-container{
+  text-align: center;
+}
+.chart-body{
+  height: 240px;
+  width: 90%;
+  margin-right: auto;
+  margin-left: auto;
+}
+</style>
diff --git a/src/views/otherComment/sourceStatis/sourceStatisChart4Sup.vue b/src/views/otherComment/sourceStatis/sourceStatisChart4Sup.vue
new file mode 100644
index 0000000..b4643fa
--- /dev/null
+++ b/src/views/otherComment/sourceStatis/sourceStatisChart4Sup.vue
@@ -0,0 +1,87 @@
+<template>
+  <div class="chart-container">
+    <div ref="chart" class="chart-body" />
+  </div>
+</template>
+
+<script>
+import echarts from 'echarts'
+export default {
+  name: 'SourceStatisChart4Sup',
+  props: {
+    list: {
+      type: Array,
+      default() {
+        return []
+      }
+    }
+  },
+  computed: {
+    pieData() {
+      const tmp = []
+      this.list.forEach(item => {
+        const obj = {}
+        obj.name = item.caseSource
+        obj.value = item.caseNum
+        tmp.push(obj)
+      })
+      return tmp
+    }
+  },
+  watch: {
+    list() {
+      this.initChart()
+    }
+  },
+  activated() {
+    this.initChart()
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(this.$refs.chart)
+      this.chart.setOption({
+        title: {
+          text: '问题来源统计'
+        },
+        backgroundColor: '#ccc',
+        tooltip: {
+          show: true
+        },
+        toolbox: {
+          show: true,
+          right: '20',
+          feature: {
+            dataView: {
+              show: true
+            }
+          }
+        },
+        series: [{
+          name: '问题来源',
+          type: 'pie',
+          data: this.pieData,
+          label: {
+            // formatter: '{b} : {d}%'
+            show: false
+          },
+          tooltip: {
+            formatter: '{b}<br/>上报数: {d}%'
+          }
+        }]
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.chart-container{
+  text-align: center;
+}
+.chart-body{
+  height: 240px;
+  width: 90%;
+  margin-right: auto;
+  margin-left: auto;
+}
+</style>

diff --git a/src/api/assess/assessDept.js b/src/api/assess/assessDept.js
index 26c8862..408742d 100644
--- a/src/api/assess/assessDept.js
+++ b/src/api/assess/assessDept.js
@@ -51,6 +51,15 @@
   })
 }
 
+// 高发问题按大类统计
+export function highCaseEventList(params) {
+  return request({
+    url: '/departmentAssess/highCaseEventList',
+    method: 'get',
+    params
+  })
+}
+
 // 高发问题文件导出
 export function exportAssessHighEvent(params) {
   return request({
diff --git a/src/router/index.js b/src/router/index.js
index b700dc8..c6c8081 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -95,5 +95,6 @@
   ...suphandleRouters,
   ...systemRouters,
   ...commenetRouters,
+  ...controlRouters,
   { path: '*', redirect: '/404', hidden: true, meta: {}}
 ]
diff --git a/src/utils/dateutils.js b/src/utils/dateutils.js
index 868111a..d8b6266 100644
--- a/src/utils/dateutils.js
+++ b/src/utils/dateutils.js
@@ -26,6 +26,12 @@
   return ct_month
 }
 
+export function getDate(delta, fmt) { // 显示与当前时间相差del
+  let now = new Date().valueOf()
+  now = now + 3600 * 1000 * 24 * delta
+  return new Date(now).Format(fmt)
+}
+
 // 对Date的扩展，将 Date 转化为指定格式的String
 // 月(M)、日(d)、小时(h)、分(m)、秒(s)、季度(q) 可以用 1-2 个占位符，
 // 年(y)可以用 1-4 个占位符，毫秒(S)只能用 1 个占位符(是 1-3 位的数字)
diff --git a/src/views/otherComment/deptHandle/deptHandleChart4Sup.vue b/src/views/otherComment/deptHandle/deptHandleChart4Sup.vue
new file mode 100644
index 0000000..1b460e4
--- /dev/null
+++ b/src/views/otherComment/deptHandle/deptHandleChart4Sup.vue
@@ -0,0 +1,96 @@
+<template>
+  <div class="chart-container">
+    <div ref="chart" class="chart-body" />
+  </div>
+</template>
+
+<script>
+import echarts from 'echarts'
+export default {
+  name: 'DeptHandleChart4Sup',
+  props: {
+    list: {
+      type: Array,
+      default() {
+        return []
+      }
+    }
+  },
+  computed: {
+    columnData() {
+      const tmp = []
+      this.list.forEach(item => {
+        if (item.depId !== '') {
+          const obj = {}
+          obj.name = item.departName
+          obj.type = 'bar'
+          obj.data = []
+          obj.data.push(item.currentCheckNum)
+          obj.data.push(item.checkedNum)
+          tmp.push(obj)
+        }
+      })
+      return tmp
+    }
+  },
+  watch: {
+    list() {
+      this.initChart()
+    }
+  },
+  activated() {
+    this.initChart()
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(this.$refs.chart)
+      this.chart.setOption({
+        title: {
+          text: '各单位处置情况'
+        },
+        backgroundColor: '#ccc',
+        grid: {
+          left: '30px'
+        },
+        legend: {
+          left: '60%'
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        yAxis: [
+          {
+            type: 'category',
+            data: this.list[0],
+            axisLabel: {
+              rotate: 90,
+              fontSize: 10
+            }
+          }
+        ],
+        xAxis: [
+          {
+            type: 'value'
+          }
+        ],
+        series: this.list[1]
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.chart-container{
+  /*text-align: center;*/
+}
+.chart-body{
+  height: 240px;
+  width: 90%;
+  margin-right: auto;
+  margin-left: auto;
+}
+</style>
diff --git a/src/views/otherComment/highFreq/highFreqChart4Sup.vue b/src/views/otherComment/highFreq/highFreqChart4Sup.vue
new file mode 100644
index 0000000..72ff2a5
--- /dev/null
+++ b/src/views/otherComment/highFreq/highFreqChart4Sup.vue
@@ -0,0 +1,87 @@
+<template>
+  <div class="chart-container">
+    <div ref="chart" class="chart-body" />
+  </div>
+</template>
+
+<script>
+import echarts from 'echarts'
+export default {
+  name: 'HighFreqChart4Sup',
+  props: {
+    list: {
+      type: Array,
+      default() {
+        return []
+      }
+    }
+  },
+  computed: {
+    pieData() {
+      const tmp = []
+      this.list.forEach((item, index) => {
+        const obj = {}
+        obj.name = item.caseMajorType
+        obj.value = item.caseNum
+        tmp.push(obj)
+      })
+      return tmp
+    }
+  },
+  watch: {
+    list() {
+      this.initChart()
+    }
+  },
+  activated() {
+    this.initChart()
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(this.$refs.chart)
+      this.chart.setOption({
+        title: {
+          text: '高发问题统计'
+        },
+        backgroundColor: '#ccc',
+        tooltip: {
+          show: true
+        },
+        toolbox: {
+          show: true,
+          right: '20',
+          feature: {
+            dataView: {
+              show: true
+            }
+          }
+        },
+        series: [{
+          name: '高发问题',
+          type: 'pie',
+          data: this.pieData,
+          label: {
+            show: false
+          },
+          tooltip: {
+            formatter: '{b}<br/>上报数: {d}%'
+          },
+        }]
+      })
+      this.chart.resize()
+    }
+  }
+}
+</script>
+
+<style scoped>
+.chart-container{
+  text-align: center;
+}
+.chart-body{
+  height: 240px;
+  width: 90%;
+  margin-right: auto;
+  margin-left: auto;
+}
+</style>
diff --git a/src/views/otherComment/sourceStatis/sourceStatisChart4Sup.vue b/src/views/otherComment/sourceStatis/sourceStatisChart4Sup.vue
new file mode 100644
index 0000000..b4643fa
--- /dev/null
+++ b/src/views/otherComment/sourceStatis/sourceStatisChart4Sup.vue
@@ -0,0 +1,87 @@
+<template>
+  <div class="chart-container">
+    <div ref="chart" class="chart-body" />
+  </div>
+</template>
+
+<script>
+import echarts from 'echarts'
+export default {
+  name: 'SourceStatisChart4Sup',
+  props: {
+    list: {
+      type: Array,
+      default() {
+        return []
+      }
+    }
+  },
+  computed: {
+    pieData() {
+      const tmp = []
+      this.list.forEach(item => {
+        const obj = {}
+        obj.name = item.caseSource
+        obj.value = item.caseNum
+        tmp.push(obj)
+      })
+      return tmp
+    }
+  },
+  watch: {
+    list() {
+      this.initChart()
+    }
+  },
+  activated() {
+    this.initChart()
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(this.$refs.chart)
+      this.chart.setOption({
+        title: {
+          text: '问题来源统计'
+        },
+        backgroundColor: '#ccc',
+        tooltip: {
+          show: true
+        },
+        toolbox: {
+          show: true,
+          right: '20',
+          feature: {
+            dataView: {
+              show: true
+            }
+          }
+        },
+        series: [{
+          name: '问题来源',
+          type: 'pie',
+          data: this.pieData,
+          label: {
+            // formatter: '{b} : {d}%'
+            show: false
+          },
+          tooltip: {
+            formatter: '{b}<br/>上报数: {d}%'
+          }
+        }]
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.chart-container{
+  text-align: center;
+}
+.chart-body{
+  height: 240px;
+  width: 90%;
+  margin-right: auto;
+  margin-left: auto;
+}
+</style>
diff --git a/src/views/supControl/supControl.vue b/src/views/supControl/supControl.vue
index e8c3a09..3ae068c 100644
--- a/src/views/supControl/supControl.vue
+++ b/src/views/supControl/supControl.vue
@@ -1,63 +1,91 @@
 <template>
   <div>
-    <el-row :gutter="20">
-      <el-col :span="6" style="text-align: center;">
-        <el-radio-group v-model="queryEventSwitch" size="medium" @change="switchContent">
-          <el-radio-button label="0">案卷</el-radio-button>
-          <el-radio-button label="1">人员</el-radio-button>
-          <el-radio-button label="2">部件</el-radio-button>
-        </el-radio-group>
+    <el-row>
+      <el-col :span="6">
+        <sup-statis-panel />
+      </el-col>
+
+      <el-col :span="18">
+        <el-row :gutter="20">
+          <el-col :span="6" style="text-align: center;">
+            <el-radio-group v-model="queryEventSwitch" size="medium" @change="switchContent">
+              <el-radio-button label="0">案卷</el-radio-button>
+              <el-radio-button label="1">人员</el-radio-button>
+              <el-radio-button label="2">部件</el-radio-button>
+            </el-radio-group>
+          </el-col>
+        </el-row>
+
+        <!--<div v-loading="mapLoading" ref="mapDiv" class="baseMap"/>-->
+
+        <el-form v-if="showPartsSelect" ref="dataForm" :model="parts" :label-position="labelPosition" label-width="120px" class="form" >
+          <el-row :gutter="10">
+            <el-col :span="20">
+              <el-form-item label="部件大类" prop="casetypeCode">
+                <el-select v-model="parts.casetypeCode" placeholder="选择部件大类" clearable value="">
+                  <el-option
+                    v-for="item in caseTypeOpts"
+                    :key="item.id"
+                    :label="item.typeName"
+                    :value="item.typeCode"/>
+                </el-select>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row :gutter="10">
+            <el-col :span="20">
+              <el-form-item label="部件小类" prop="casetypeDetailCode">
+                <el-select v-model="parts.casetypeDetailCode" placeholder="选择部件小类" clearable value="">
+                  <el-option
+                    v-for="item in caseDetailTypeOpts"
+                    :key="item.id"
+                    :label="item.typeDetailName"
+                    :value="item.typeDetailCode"/>
+                </el-select>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form>
+        <el-form v-if="showPersonSelect" ref="dataForm" :model="parts" :label-position="labelPosition" label-width="120px" class="form" >
+          <el-row :gutter="10">
+            <el-col :span="20">
+              <el-form-item label="人员分类" prop="casepersonCode">
+                <el-select v-model="casepersonCode" placeholder="选择人员分类" clearable value="">
+                  <el-option
+                    v-for="item in casePersonOpts"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value"/>
+                </el-select>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form>
+
+        <el-form v-if="showCaseSelect" ref="dataForm" :model="parts" :label-position="labelPosition" label-width="120px" class="form" >
+          <el-row :gutter="10">
+            <el-col :span="20">
+              <el-form-item label="案卷状态" prop="caseStatus">
+                <el-select v-model="parts.caseStatusCode" placeholder="选择案卷状态" clearable value="">
+                  <el-option
+                    v-for="item in caseStatusOpts"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value"/>
+                </el-select>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form>
       </el-col>
     </el-row>
-    <div v-loading="mapLoading" ref="mapDiv" class="baseMap"/>
-    <el-form v-if="showPartsSelect" ref="dataForm" :model="parts" :label-position="labelPosition" label-width="120px" class="form" >
-      <el-row :gutter="10">
-        <el-col :span="20">
-          <el-form-item label="部件大类" prop="casetypeCode">
-            <el-select v-model="parts.casetypeCode" placeholder="选择部件大类" clearable value="">
-              <el-option
-                v-for="item in caseTypeOpts"
-                :key="item.id"
-                :label="item.typeName"
-                :value="item.typeCode"/>
-            </el-select>
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row :gutter="10">
-        <el-col :span="20">
-          <el-form-item label="部件小类" prop="casetypeDetailCode">
-            <el-select v-model="parts.casetypeDetailCode" placeholder="选择部件小类" clearable value="">
-              <el-option
-                v-for="item in caseDetailTypeOpts"
-                :key="item.id"
-                :label="item.typeDetailName"
-                :value="item.typeDetailCode"/>
-            </el-select>
-          </el-form-item>
-        </el-col>
-      </el-row>
-    </el-form>
-    <el-form v-if="showPersonSelect" ref="dataForm" :model="parts" :label-position="labelPosition" label-width="120px" class="form" >
-      <el-row :gutter="10">
-        <el-col :span="20">
-          <el-form-item label="人员分类" prop="casepersonCode">
-            <el-select v-model="casepersonCode" placeholder="选择人员分类" clearable value="">
-              <el-option
-                v-for="item in casePersonOpts"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"/>
-            </el-select>
-          </el-form-item>
-        </el-col>
-      </el-row>
-    </el-form>
   </div>
 </template>
 
 <script>
+import request from '@/utils/request'
 import { loadModules } from 'esri-loader'
+import SupStatisPanel from '@/views/supControl/SupStatisPanel'
 import { getCaseType, getCaseDetailType } from '@/api/callCase/callCase'
 import { mapConfig, serverConfig } from '@/components/Map/ArcGISConfig'
 
@@ -71,6 +99,7 @@
 
 export default {
   name: 'SupControl',
+  components: { SupStatisPanel },
   props: {
     longitude: {
       type: Number,
@@ -113,7 +142,8 @@
       parts: {
         eorc: '2', // 类别
         casetypeCode: '', // 部件大类编码,
-        casetypeDetailCode: '' // 部件小类编码
+        casetypeDetailCode: '', // 部件小类编码
+        caseStatusCode: ''
       },
       casepersonCode: '',
       labelPosition: 'right',
@@ -126,12 +156,18 @@
         label: '处置人员'
       }], // 人员分类下拉框
       caseDetailTypeOpts: [], // 部件小类下拉框
+      caseStatusOpts: [], // 案卷状态下拉框
       caseTypeCodeAuto: '', // 自动生成的案卷大类代码
       caseTypeDetailCodeAuto: '', // 自动生成的案卷小类代码
       mapLoading: false,
       queryEventSwitch: '0', // 0==查询案件；1==查询人员；2==查询部件
       showPartsSelect: false,
-      showPersonSelect: false
+      showPersonSelect: false,
+      showCaseSelect: true,
+      toVerifyCaseList: [],
+      toCheckCaseList: [],
+      toHandleCaseList: [],
+      toDistributeCaseList: []
     }
   },
   computed: {
@@ -163,6 +199,7 @@
   },
   mounted() {
     this.importEsri()
+    this.initCaseStatus()
   },
   methods: {
     switchContent: function() {
@@ -170,12 +207,72 @@
       if (this.queryEventSwitch === '2') {
         this.showPartsSelect = true
         this.showPersonSelect = false
+        this.showCaseSelect = false
         this.cascaderCaseType('2')
       } else if (this.queryEventSwitch === '1') {
         this.showPersonSelect = true
         this.showPartsSelect = false
+        this.showCaseSelect = false
+      } else if (this.queryEventSwitch === '0') {
+        this.showCaseSelect = true
+        this.showPartsSelect = false
+        this.showPersonSelect = false
+        // 查询四个状态的案卷列表
+        this.queryCaseList()
       }
     },
+    queryCaseList: function() {
+      const that = this
+      const onePageParam = {
+        limit: 1000,
+        offset: 1
+      }
+
+      // 查询待核实案卷
+      request({
+        url: 'case/toVerifyListPage',
+        method: 'get',
+        params: onePageParam
+      }).then(response => {
+        if (response.code === 200) {
+          that.toVerifyCaseList = response.data.rows
+        }
+      })
+
+      // 查询待核查案卷
+      request({
+        url: 'case/toCheckListPage',
+        method: 'get',
+        params: onePageParam
+      }).then(response => {
+        if (response.code === 200) {
+          that.toCheckCaseList = response.data.rows
+        }
+      })
+
+      // 查询处理中案卷
+      request({
+        url: 'case/toHandleListPage',
+        method: 'get',
+        params: onePageParam
+      }).then(response => {
+        if (response.code === 200) {
+          that.toHandleCaseList = response.data.rows
+        }
+      })
+
+      // 查询新立案案卷
+      request({
+        url: 'case/toDistributeListPage',
+        method: 'get',
+        params: onePageParam
+      }).then(response => {
+        if (response.code === 200) {
+          that.toDistributeCaseList = response.data.rows
+        }
+      })
+    },
+
     // 级联查询部件大类
     cascaderCaseType: function(eorc) {
       // 前两行的作用是清除部件大类的当前值和select中的所有选项
@@ -272,6 +369,24 @@
         }
       })
     },
+    initCaseStatus: function() {
+      const opt = {}
+      opt.label = '待核实'
+      opt.value = '0'
+      this.caseStatusOpts.push(opt)
+      const opt2 = {}
+      opt2.label = '新立案'
+      opt2.value = '1'
+      this.caseStatusOpts.push(opt2)
+      const opt3 = {}
+      opt3.label = '待核查'
+      opt3.value = '2'
+      this.caseStatusOpts.push(opt3)
+      const opt4 = {}
+      opt4.label = '待结案'
+      opt4.value = '3'
+      this.caseStatusOpts.push(opt4)
+    },
     // 初始化ArcGIS API对象
     importEsri: function() {
       this.mapLoading = true

diff --git a/src/api/assess/assessDept.js b/src/api/assess/assessDept.js
index 26c8862..408742d 100644
--- a/src/api/assess/assessDept.js
+++ b/src/api/assess/assessDept.js
@@ -51,6 +51,15 @@
   })
 }
 
+// 高发问题按大类统计
+export function highCaseEventList(params) {
+  return request({
+    url: '/departmentAssess/highCaseEventList',
+    method: 'get',
+    params
+  })
+}
+
 // 高发问题文件导出
 export function exportAssessHighEvent(params) {
   return request({
diff --git a/src/router/index.js b/src/router/index.js
index b700dc8..c6c8081 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -95,5 +95,6 @@
   ...suphandleRouters,
   ...systemRouters,
   ...commenetRouters,
+  ...controlRouters,
   { path: '*', redirect: '/404', hidden: true, meta: {}}
 ]
diff --git a/src/utils/dateutils.js b/src/utils/dateutils.js
index 868111a..d8b6266 100644
--- a/src/utils/dateutils.js
+++ b/src/utils/dateutils.js
@@ -26,6 +26,12 @@
   return ct_month
 }
 
+export function getDate(delta, fmt) { // 显示与当前时间相差del
+  let now = new Date().valueOf()
+  now = now + 3600 * 1000 * 24 * delta
+  return new Date(now).Format(fmt)
+}
+
 // 对Date的扩展，将 Date 转化为指定格式的String
 // 月(M)、日(d)、小时(h)、分(m)、秒(s)、季度(q) 可以用 1-2 个占位符，
 // 年(y)可以用 1-4 个占位符，毫秒(S)只能用 1 个占位符(是 1-3 位的数字)
diff --git a/src/views/otherComment/deptHandle/deptHandleChart4Sup.vue b/src/views/otherComment/deptHandle/deptHandleChart4Sup.vue
new file mode 100644
index 0000000..1b460e4
--- /dev/null
+++ b/src/views/otherComment/deptHandle/deptHandleChart4Sup.vue
@@ -0,0 +1,96 @@
+<template>
+  <div class="chart-container">
+    <div ref="chart" class="chart-body" />
+  </div>
+</template>
+
+<script>
+import echarts from 'echarts'
+export default {
+  name: 'DeptHandleChart4Sup',
+  props: {
+    list: {
+      type: Array,
+      default() {
+        return []
+      }
+    }
+  },
+  computed: {
+    columnData() {
+      const tmp = []
+      this.list.forEach(item => {
+        if (item.depId !== '') {
+          const obj = {}
+          obj.name = item.departName
+          obj.type = 'bar'
+          obj.data = []
+          obj.data.push(item.currentCheckNum)
+          obj.data.push(item.checkedNum)
+          tmp.push(obj)
+        }
+      })
+      return tmp
+    }
+  },
+  watch: {
+    list() {
+      this.initChart()
+    }
+  },
+  activated() {
+    this.initChart()
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(this.$refs.chart)
+      this.chart.setOption({
+        title: {
+          text: '各单位处置情况'
+        },
+        backgroundColor: '#ccc',
+        grid: {
+          left: '30px'
+        },
+        legend: {
+          left: '60%'
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        yAxis: [
+          {
+            type: 'category',
+            data: this.list[0],
+            axisLabel: {
+              rotate: 90,
+              fontSize: 10
+            }
+          }
+        ],
+        xAxis: [
+          {
+            type: 'value'
+          }
+        ],
+        series: this.list[1]
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.chart-container{
+  /*text-align: center;*/
+}
+.chart-body{
+  height: 240px;
+  width: 90%;
+  margin-right: auto;
+  margin-left: auto;
+}
+</style>
diff --git a/src/views/otherComment/highFreq/highFreqChart4Sup.vue b/src/views/otherComment/highFreq/highFreqChart4Sup.vue
new file mode 100644
index 0000000..72ff2a5
--- /dev/null
+++ b/src/views/otherComment/highFreq/highFreqChart4Sup.vue
@@ -0,0 +1,87 @@
+<template>
+  <div class="chart-container">
+    <div ref="chart" class="chart-body" />
+  </div>
+</template>
+
+<script>
+import echarts from 'echarts'
+export default {
+  name: 'HighFreqChart4Sup',
+  props: {
+    list: {
+      type: Array,
+      default() {
+        return []
+      }
+    }
+  },
+  computed: {
+    pieData() {
+      const tmp = []
+      this.list.forEach((item, index) => {
+        const obj = {}
+        obj.name = item.caseMajorType
+        obj.value = item.caseNum
+        tmp.push(obj)
+      })
+      return tmp
+    }
+  },
+  watch: {
+    list() {
+      this.initChart()
+    }
+  },
+  activated() {
+    this.initChart()
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(this.$refs.chart)
+      this.chart.setOption({
+        title: {
+          text: '高发问题统计'
+        },
+        backgroundColor: '#ccc',
+        tooltip: {
+          show: true
+        },
+        toolbox: {
+          show: true,
+          right: '20',
+          feature: {
+            dataView: {
+              show: true
+            }
+          }
+        },
+        series: [{
+          name: '高发问题',
+          type: 'pie',
+          data: this.pieData,
+          label: {
+            show: false
+          },
+          tooltip: {
+            formatter: '{b}<br/>上报数: {d}%'
+          },
+        }]
+      })
+      this.chart.resize()
+    }
+  }
+}
+</script>
+
+<style scoped>
+.chart-container{
+  text-align: center;
+}
+.chart-body{
+  height: 240px;
+  width: 90%;
+  margin-right: auto;
+  margin-left: auto;
+}
+</style>
diff --git a/src/views/otherComment/sourceStatis/sourceStatisChart4Sup.vue b/src/views/otherComment/sourceStatis/sourceStatisChart4Sup.vue
new file mode 100644
index 0000000..b4643fa
--- /dev/null
+++ b/src/views/otherComment/sourceStatis/sourceStatisChart4Sup.vue
@@ -0,0 +1,87 @@
+<template>
+  <div class="chart-container">
+    <div ref="chart" class="chart-body" />
+  </div>
+</template>
+
+<script>
+import echarts from 'echarts'
+export default {
+  name: 'SourceStatisChart4Sup',
+  props: {
+    list: {
+      type: Array,
+      default() {
+        return []
+      }
+    }
+  },
+  computed: {
+    pieData() {
+      const tmp = []
+      this.list.forEach(item => {
+        const obj = {}
+        obj.name = item.caseSource
+        obj.value = item.caseNum
+        tmp.push(obj)
+      })
+      return tmp
+    }
+  },
+  watch: {
+    list() {
+      this.initChart()
+    }
+  },
+  activated() {
+    this.initChart()
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(this.$refs.chart)
+      this.chart.setOption({
+        title: {
+          text: '问题来源统计'
+        },
+        backgroundColor: '#ccc',
+        tooltip: {
+          show: true
+        },
+        toolbox: {
+          show: true,
+          right: '20',
+          feature: {
+            dataView: {
+              show: true
+            }
+          }
+        },
+        series: [{
+          name: '问题来源',
+          type: 'pie',
+          data: this.pieData,
+          label: {
+            // formatter: '{b} : {d}%'
+            show: false
+          },
+          tooltip: {
+            formatter: '{b}<br/>上报数: {d}%'
+          }
+        }]
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.chart-container{
+  text-align: center;
+}
+.chart-body{
+  height: 240px;
+  width: 90%;
+  margin-right: auto;
+  margin-left: auto;
+}
+</style>
diff --git a/src/views/supControl/supControl.vue b/src/views/supControl/supControl.vue
index e8c3a09..3ae068c 100644
--- a/src/views/supControl/supControl.vue
+++ b/src/views/supControl/supControl.vue
@@ -1,63 +1,91 @@
 <template>
   <div>
-    <el-row :gutter="20">
-      <el-col :span="6" style="text-align: center;">
-        <el-radio-group v-model="queryEventSwitch" size="medium" @change="switchContent">
-          <el-radio-button label="0">案卷</el-radio-button>
-          <el-radio-button label="1">人员</el-radio-button>
-          <el-radio-button label="2">部件</el-radio-button>
-        </el-radio-group>
+    <el-row>
+      <el-col :span="6">
+        <sup-statis-panel />
+      </el-col>
+
+      <el-col :span="18">
+        <el-row :gutter="20">
+          <el-col :span="6" style="text-align: center;">
+            <el-radio-group v-model="queryEventSwitch" size="medium" @change="switchContent">
+              <el-radio-button label="0">案卷</el-radio-button>
+              <el-radio-button label="1">人员</el-radio-button>
+              <el-radio-button label="2">部件</el-radio-button>
+            </el-radio-group>
+          </el-col>
+        </el-row>
+
+        <!--<div v-loading="mapLoading" ref="mapDiv" class="baseMap"/>-->
+
+        <el-form v-if="showPartsSelect" ref="dataForm" :model="parts" :label-position="labelPosition" label-width="120px" class="form" >
+          <el-row :gutter="10">
+            <el-col :span="20">
+              <el-form-item label="部件大类" prop="casetypeCode">
+                <el-select v-model="parts.casetypeCode" placeholder="选择部件大类" clearable value="">
+                  <el-option
+                    v-for="item in caseTypeOpts"
+                    :key="item.id"
+                    :label="item.typeName"
+                    :value="item.typeCode"/>
+                </el-select>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row :gutter="10">
+            <el-col :span="20">
+              <el-form-item label="部件小类" prop="casetypeDetailCode">
+                <el-select v-model="parts.casetypeDetailCode" placeholder="选择部件小类" clearable value="">
+                  <el-option
+                    v-for="item in caseDetailTypeOpts"
+                    :key="item.id"
+                    :label="item.typeDetailName"
+                    :value="item.typeDetailCode"/>
+                </el-select>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form>
+        <el-form v-if="showPersonSelect" ref="dataForm" :model="parts" :label-position="labelPosition" label-width="120px" class="form" >
+          <el-row :gutter="10">
+            <el-col :span="20">
+              <el-form-item label="人员分类" prop="casepersonCode">
+                <el-select v-model="casepersonCode" placeholder="选择人员分类" clearable value="">
+                  <el-option
+                    v-for="item in casePersonOpts"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value"/>
+                </el-select>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form>
+
+        <el-form v-if="showCaseSelect" ref="dataForm" :model="parts" :label-position="labelPosition" label-width="120px" class="form" >
+          <el-row :gutter="10">
+            <el-col :span="20">
+              <el-form-item label="案卷状态" prop="caseStatus">
+                <el-select v-model="parts.caseStatusCode" placeholder="选择案卷状态" clearable value="">
+                  <el-option
+                    v-for="item in caseStatusOpts"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value"/>
+                </el-select>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form>
       </el-col>
     </el-row>
-    <div v-loading="mapLoading" ref="mapDiv" class="baseMap"/>
-    <el-form v-if="showPartsSelect" ref="dataForm" :model="parts" :label-position="labelPosition" label-width="120px" class="form" >
-      <el-row :gutter="10">
-        <el-col :span="20">
-          <el-form-item label="部件大类" prop="casetypeCode">
-            <el-select v-model="parts.casetypeCode" placeholder="选择部件大类" clearable value="">
-              <el-option
-                v-for="item in caseTypeOpts"
-                :key="item.id"
-                :label="item.typeName"
-                :value="item.typeCode"/>
-            </el-select>
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row :gutter="10">
-        <el-col :span="20">
-          <el-form-item label="部件小类" prop="casetypeDetailCode">
-            <el-select v-model="parts.casetypeDetailCode" placeholder="选择部件小类" clearable value="">
-              <el-option
-                v-for="item in caseDetailTypeOpts"
-                :key="item.id"
-                :label="item.typeDetailName"
-                :value="item.typeDetailCode"/>
-            </el-select>
-          </el-form-item>
-        </el-col>
-      </el-row>
-    </el-form>
-    <el-form v-if="showPersonSelect" ref="dataForm" :model="parts" :label-position="labelPosition" label-width="120px" class="form" >
-      <el-row :gutter="10">
-        <el-col :span="20">
-          <el-form-item label="人员分类" prop="casepersonCode">
-            <el-select v-model="casepersonCode" placeholder="选择人员分类" clearable value="">
-              <el-option
-                v-for="item in casePersonOpts"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"/>
-            </el-select>
-          </el-form-item>
-        </el-col>
-      </el-row>
-    </el-form>
   </div>
 </template>
 
 <script>
+import request from '@/utils/request'
 import { loadModules } from 'esri-loader'
+import SupStatisPanel from '@/views/supControl/SupStatisPanel'
 import { getCaseType, getCaseDetailType } from '@/api/callCase/callCase'
 import { mapConfig, serverConfig } from '@/components/Map/ArcGISConfig'
 
@@ -71,6 +99,7 @@
 
 export default {
   name: 'SupControl',
+  components: { SupStatisPanel },
   props: {
     longitude: {
       type: Number,
@@ -113,7 +142,8 @@
       parts: {
         eorc: '2', // 类别
         casetypeCode: '', // 部件大类编码,
-        casetypeDetailCode: '' // 部件小类编码
+        casetypeDetailCode: '', // 部件小类编码
+        caseStatusCode: ''
       },
       casepersonCode: '',
       labelPosition: 'right',
@@ -126,12 +156,18 @@
         label: '处置人员'
       }], // 人员分类下拉框
       caseDetailTypeOpts: [], // 部件小类下拉框
+      caseStatusOpts: [], // 案卷状态下拉框
       caseTypeCodeAuto: '', // 自动生成的案卷大类代码
       caseTypeDetailCodeAuto: '', // 自动生成的案卷小类代码
       mapLoading: false,
       queryEventSwitch: '0', // 0==查询案件；1==查询人员；2==查询部件
       showPartsSelect: false,
-      showPersonSelect: false
+      showPersonSelect: false,
+      showCaseSelect: true,
+      toVerifyCaseList: [],
+      toCheckCaseList: [],
+      toHandleCaseList: [],
+      toDistributeCaseList: []
     }
   },
   computed: {
@@ -163,6 +199,7 @@
   },
   mounted() {
     this.importEsri()
+    this.initCaseStatus()
   },
   methods: {
     switchContent: function() {
@@ -170,12 +207,72 @@
       if (this.queryEventSwitch === '2') {
         this.showPartsSelect = true
         this.showPersonSelect = false
+        this.showCaseSelect = false
         this.cascaderCaseType('2')
       } else if (this.queryEventSwitch === '1') {
         this.showPersonSelect = true
         this.showPartsSelect = false
+        this.showCaseSelect = false
+      } else if (this.queryEventSwitch === '0') {
+        this.showCaseSelect = true
+        this.showPartsSelect = false
+        this.showPersonSelect = false
+        // 查询四个状态的案卷列表
+        this.queryCaseList()
       }
     },
+    queryCaseList: function() {
+      const that = this
+      const onePageParam = {
+        limit: 1000,
+        offset: 1
+      }
+
+      // 查询待核实案卷
+      request({
+        url: 'case/toVerifyListPage',
+        method: 'get',
+        params: onePageParam
+      }).then(response => {
+        if (response.code === 200) {
+          that.toVerifyCaseList = response.data.rows
+        }
+      })
+
+      // 查询待核查案卷
+      request({
+        url: 'case/toCheckListPage',
+        method: 'get',
+        params: onePageParam
+      }).then(response => {
+        if (response.code === 200) {
+          that.toCheckCaseList = response.data.rows
+        }
+      })
+
+      // 查询处理中案卷
+      request({
+        url: 'case/toHandleListPage',
+        method: 'get',
+        params: onePageParam
+      }).then(response => {
+        if (response.code === 200) {
+          that.toHandleCaseList = response.data.rows
+        }
+      })
+
+      // 查询新立案案卷
+      request({
+        url: 'case/toDistributeListPage',
+        method: 'get',
+        params: onePageParam
+      }).then(response => {
+        if (response.code === 200) {
+          that.toDistributeCaseList = response.data.rows
+        }
+      })
+    },
+
     // 级联查询部件大类
     cascaderCaseType: function(eorc) {
       // 前两行的作用是清除部件大类的当前值和select中的所有选项
@@ -272,6 +369,24 @@
         }
       })
     },
+    initCaseStatus: function() {
+      const opt = {}
+      opt.label = '待核实'
+      opt.value = '0'
+      this.caseStatusOpts.push(opt)
+      const opt2 = {}
+      opt2.label = '新立案'
+      opt2.value = '1'
+      this.caseStatusOpts.push(opt2)
+      const opt3 = {}
+      opt3.label = '待核查'
+      opt3.value = '2'
+      this.caseStatusOpts.push(opt3)
+      const opt4 = {}
+      opt4.label = '待结案'
+      opt4.value = '3'
+      this.caseStatusOpts.push(opt4)
+    },
     // 初始化ArcGIS API对象
     importEsri: function() {
       this.mapLoading = true
diff --git a/src/views/supControl/supStatisPanel.vue b/src/views/supControl/supStatisPanel.vue
new file mode 100644
index 0000000..3456466
--- /dev/null
+++ b/src/views/supControl/supStatisPanel.vue
@@ -0,0 +1,249 @@
+<template>
+  <div>
+    <el-row>
+      <div>案卷情况</div>
+    </el-row>
+
+    <el-row>
+      <div style="margin: 20px 0px; text-align: center">
+        <el-radio-group v-model="timeTerm" size="small" @change="changeTimeTerm()">
+          <el-radio-button label="1">本月</el-radio-button>
+          <el-radio-button label="2">前三月</el-radio-button>
+          <el-radio-button label="3">前半年</el-radio-button>
+          <el-radio-button label="4">前一年</el-radio-button>
+        </el-radio-group>
+      </div>
+    </el-row>
+
+    <el-row>
+      <el-col :span="12">
+        <div class="caseStatisBlock">
+          <span v-text="caseCounts.labelText" />立案<br>
+          <span v-text="caseCounts.register" />件
+        </div>
+      </el-col>
+
+      <el-col :span="12">
+        <div class="caseStatisBlock" style="background-color: #3a8ee6;">
+          本日立案<br>
+          <span v-text="caseCounts.todayRegister" />件
+        </div>
+      </el-col>
+    </el-row>
+
+    <el-row>
+      <el-col :span="12">
+        <div class="caseStatisBlock" style="background-color: #3a8ee6;">
+          <span v-text="caseCounts.labelText" />处理率<br>
+          <span v-text="caseCounts.oughtHandleRate" />%
+        </div>
+      </el-col>
+
+      <el-col :span="12">
+        <div class="caseStatisBlock" style="background-color: #3a8ee6;">
+          <span v-text="caseCounts.labelText" />未处理<br>
+          <span v-text="caseCounts.notHandled" />件
+        </div>
+      </el-col>
+    </el-row>
+
+    <el-row>
+      <div style="height: 300px">
+        <high-freq-chart4-sup :list="highFreqList"/>
+      </div>
+    </el-row>
+
+    <el-row>
+      <div style="height: 300px">
+        <dept-handle-chart4-sup :list="handleCaseList"/>
+      </div>
+    </el-row>
+
+    <el-row>
+      <div style="height: 300px">
+        <source-statis-chart4-sup :list="sourceList.slice(0,sourceList.length-1)"/>
+      </div>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import request from '@/utils/request'
+import { getToday, getDate } from '@/utils/dateutils'
+import highFreqChart4Sup from '@/views/otherComment/highFreq/highFreqChart4Sup'
+import SourceStatisChart4Sup from '@/views/otherComment/sourceStatis/SourceStatisChart4Sup'
+import DeptHandleChart4Sup from '@/views/otherComment/deptHandle/DeptHandleChart4Sup'
+import { highCaseEventList, sourceList, departmentAssess } from '@/api/assess/assessDept'
+
+export default {
+  name: 'SupStatisPanel',
+  components: { DeptHandleChart4Sup, highFreqChart4Sup, SourceStatisChart4Sup },
+  data() {
+    return {
+      highFreqList: [],
+      sourceList: [],
+      handleCaseList: [],
+      timeTerm: '1',
+      caseCounts: {
+        labelText: '本月',
+        register: 0, // 本期立案数
+        todayRegister: 0, // 当日立案数
+        totalCheckNum: 0, // 本期总应处置数
+        checkedNum: 0, // 本期处置数
+        oughtHandleRate: 0, // 本期应处置率
+        notHandled: 0 // 本期未处置数
+      },
+      query: {
+        begTime: getToday('yyyy-MM') + '-01',
+        endTime: getDate(1, 'yyyy-MM-dd')
+      },
+      query4Regist: {
+        beginDate: getToday('yyyy-MM') + '-01',
+        endDate: getDate(1, 'yyyy-MM-dd')
+      },
+      query4Today: {
+        beginDate: getToday('yyyy-MM-dd'),
+        endDate: getDate(1, 'yyyy-MM-dd')
+      }
+    }
+  },
+  mounted() {
+    this.fetchHighFreqData()
+    this.fetchSourceListData()
+    this.fetchHandleListData()
+
+    this.getCaseCountStatis()
+    this.getTodayCaseCountStatis()
+  },
+  methods: {
+    fetchHighFreqData() {
+      highCaseEventList(this.query).then(res => {
+        if (res.code === 200) {
+          this.highFreqList = res.data
+        }
+      })
+    },
+    fetchSourceListData() {
+      sourceList(this.query).then(res => {
+        if (res.code === 200) {
+          this.sourceList = res.data
+        }
+      })
+    },
+    fetchHandleListData() {
+      departmentAssess(this.query).then(res => {
+        console.log(res)
+        if (res.code === 200) {
+          const array = [] // 0--部门; 1--seriesData
+          const depts = []
+          const series = []
+          const seriesToDispatch = {
+            name: '派发数',
+            type: 'bar',
+            barGap: 0,
+            data: []
+          } // 派发数
+          const seriesToHandle = {
+            name: '处置数',
+            type: 'bar',
+            barGap: 0,
+            data: []
+          } // 处置数
+          res.data.forEach(dept => {
+            if (dept.depId !== '') {
+              depts.push(dept.departName)
+              seriesToDispatch.data.push(dept.currentCheckNum)
+              seriesToHandle.data.push(dept.checkedNum)
+            } else {
+              // 取出合计数
+              this.caseCounts.checkedNum = dept.checkedNum
+              this.caseCounts.totalCheckNum = dept.totalCheckNum
+
+              // 计算
+              this.caseCounts.notHandled = this.caseCounts.totalCheckNum - this.caseCounts.checkedNum
+              if (this.caseCounts.totalCheckNum !== '0') {
+                const rate = this.caseCounts.checkedNum / this.caseCounts.totalCheckNum
+                this.caseCounts.oughtHandleRate = rate.toFixed(4) * 100
+              }
+            }
+          })
+          series.push(seriesToDispatch)
+          series.push(seriesToHandle)
+          array.push(depts)
+          array.push(series)
+
+          this.handleCaseList = array
+        }
+      })
+    },
+    getCaseCountStatis() {
+      request({
+        url: 'assess/overview',
+        method: 'get',
+        params: this.query4Regist
+      }).then(response => {
+        if (response.code === 200) {
+          this.caseCounts.register = response.data.register
+        }
+      })
+    },
+    getTodayCaseCountStatis() {
+      request({
+        url: 'assess/overview',
+        method: 'get',
+        params: this.query4Today
+      }).then(response => {
+        if (response.code === 200) {
+          this.caseCounts.todayRegister = response.data.register
+        }
+      })
+    },
+    changeTimeTerm() {
+      if (this.timeTerm === '1') {
+        this.caseCounts.labelText = '本月'
+
+        // 本月
+        const thisMon = getToday('yyyy-MM')
+
+        this.query.begTime = thisMon + '-01'
+        this.query.endTime = getDate(1, 'yyyy-MM-dd')
+        this.query4Regist.beginDate = thisMon + '-01'
+        this.query4Regist.endDate = getDate(1, 'yyyy-MM-dd')
+      } else if (this.timeTerm === '2') { // 前三个月
+        this.caseCounts.labelText = '本期'
+
+        this.query.begTime = getDate(-90, 'yyyy-MM-dd')
+        this.query.endTime = getDate(1, 'yyyy-MM-dd')
+        this.query4Regist.beginDate = getDate(-90, 'yyyy-MM-dd')
+        this.query4Regist.endDate = getDate(1, 'yyyy-MM-dd')
+      } else if (this.timeTerm === '3') { // 前半年
+        this.caseCounts.labelText = '本期'
+
+        this.query.begTime = getDate(-180, 'yyyy-MM-dd')
+        this.query.endTime = getDate(1, 'yyyy-MM-dd')
+        this.query4Regist.beginDate = getDate(-180, 'yyyy-MM-dd')
+        this.query4Regist.endDate = getDate(1, 'yyyy-MM-dd')
+      } else if (this.timeTerm === '4') { // 前一年
+        this.caseCounts.labelText = '本期'
+
+        this.query.begTime = getDate(-365, 'yyyy-MM-dd')
+        this.query.endTime = getDate(1, 'yyyy-MM-dd')
+        this.query4Regist.beginDate = getDate(-365, 'yyyy-MM-dd')
+        this.query4Regist.endDate = getDate(1, 'yyyy-MM-dd')
+      }
+
+      this.getCaseCountStatis()
+      this.fetchHighFreqData()
+      this.fetchHandleListData()
+      this.fetchSourceListData()
+    }
+  }
+}
+</script>
+
+<style scoped>
+.caseStatisBlock {
+  text-align: center;
+  margin: 5px 15px;
+}
+</style>