diff --git a/src/router/modules/control.js b/src/router/modules/control.js
index c39b1cd..f99b84e 100644
--- a/src/router/modules/control.js
+++ b/src/router/modules/control.js
@@ -1,5 +1,5 @@
 /* Layout */
-import Layout from '../../views/layout/Layout'
+import SupLayout from '../../views/layout/SupLayout'
 export const controlRouters = [
   {
     path: '/control',
@@ -14,7 +14,7 @@
   },
   {
     path: '/supControl',
-    component: Layout,
+    component: SupLayout,
     redirect: '/supControlDetail',
     name: 'SupControl',
     alwaysShow: true,

diff --git a/src/router/modules/control.js b/src/router/modules/control.js
index c39b1cd..f99b84e 100644
--- a/src/router/modules/control.js
+++ b/src/router/modules/control.js
@@ -1,5 +1,5 @@
 /* Layout */
-import Layout from '../../views/layout/Layout'
+import SupLayout from '../../views/layout/SupLayout'
 export const controlRouters = [
   {
     path: '/control',
@@ -14,7 +14,7 @@
   },
   {
     path: '/supControl',
-    component: Layout,
+    component: SupLayout,
     redirect: '/supControlDetail',
     name: 'SupControl',
     alwaysShow: true,
diff --git a/src/views/layout/SupLayout.vue b/src/views/layout/SupLayout.vue
new file mode 100644
index 0000000..5ada200
--- /dev/null
+++ b/src/views/layout/SupLayout.vue
@@ -0,0 +1,61 @@
+<template>
+  <div :class="classObj" class="app-wrapper">
+    <app-header class="app-header"/>
+    <div class="app-body">
+      <!--右半部分-->
+      <div>
+        <!--主页-->
+        <el-scrollbar>
+          <app-main/>
+        </el-scrollbar>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { AppHeader, AppMain } from './components'
+import ResizeMixin from './mixin/ResizeHandler'
+
+export default {
+  name: 'SupLayout',
+  components: {
+    AppHeader,
+    AppMain
+  },
+  mixins: [ResizeMixin],
+  computed: {
+    classObj() {
+      return {
+        mobile: this.device === 'mobile'
+      }
+    }
+  },
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  @import "src/styles/mixin.scss";
+  .app-wrapper {
+    @include clearfix;
+    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 - 80px);
+  }
+</style>

diff --git a/src/router/modules/control.js b/src/router/modules/control.js
index c39b1cd..f99b84e 100644
--- a/src/router/modules/control.js
+++ b/src/router/modules/control.js
@@ -1,5 +1,5 @@
 /* Layout */
-import Layout from '../../views/layout/Layout'
+import SupLayout from '../../views/layout/SupLayout'
 export const controlRouters = [
   {
     path: '/control',
@@ -14,7 +14,7 @@
   },
   {
     path: '/supControl',
-    component: Layout,
+    component: SupLayout,
     redirect: '/supControlDetail',
     name: 'SupControl',
     alwaysShow: true,
diff --git a/src/views/layout/SupLayout.vue b/src/views/layout/SupLayout.vue
new file mode 100644
index 0000000..5ada200
--- /dev/null
+++ b/src/views/layout/SupLayout.vue
@@ -0,0 +1,61 @@
+<template>
+  <div :class="classObj" class="app-wrapper">
+    <app-header class="app-header"/>
+    <div class="app-body">
+      <!--右半部分-->
+      <div>
+        <!--主页-->
+        <el-scrollbar>
+          <app-main/>
+        </el-scrollbar>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { AppHeader, AppMain } from './components'
+import ResizeMixin from './mixin/ResizeHandler'
+
+export default {
+  name: 'SupLayout',
+  components: {
+    AppHeader,
+    AppMain
+  },
+  mixins: [ResizeMixin],
+  computed: {
+    classObj() {
+      return {
+        mobile: this.device === 'mobile'
+      }
+    }
+  },
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  @import "src/styles/mixin.scss";
+  .app-wrapper {
+    @include clearfix;
+    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 - 80px);
+  }
+</style>
diff --git a/src/views/otherComment/deptHandle/deptHandleChart4Sup.vue b/src/views/otherComment/deptHandle/deptHandleChart4Sup.vue
index 1b460e4..67c0751 100644
--- a/src/views/otherComment/deptHandle/deptHandleChart4Sup.vue
+++ b/src/views/otherComment/deptHandle/deptHandleChart4Sup.vue
@@ -16,23 +16,6 @@
       }
     }
   },
-  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()
@@ -45,15 +28,14 @@
     initChart() {
       this.chart = echarts.init(this.$refs.chart)
       this.chart.setOption({
-        title: {
-          text: '各单位处置情况'
-        },
-        backgroundColor: '#ccc',
         grid: {
-          left: '30px'
+          left: '60px',
+          top: '10px'
         },
         legend: {
-          left: '60%'
+          type: 'scroll',
+          bottom: 0,
+          backgroundColor: '#ccc'
         },
         tooltip: {
           trigger: 'axis',
@@ -65,17 +47,42 @@
           {
             type: 'category',
             data: this.list[0],
+            axisLine: {
+              lineStyle: {
+                color: '#fff'
+              }
+            },
             axisLabel: {
-              rotate: 90,
-              fontSize: 10
+              // rotate: 90,
+              fontSize: 10,
+              color: '#fff'
             }
           }
         ],
         xAxis: [
           {
-            type: 'value'
+            type: 'value',
+            axisLine: {
+              lineStyle: {
+                color: '#fff'
+              }
+            },
+            axisLabel: {
+              fontSize: 10,
+              color: '#fff'
+            },
+            splitLine: {
+              show: false
+            }
           }
         ],
+        color: [
+          '#19d4ae', '#ffb980', '#5ab1ef',
+          '#fa6e86', '#0067a6', '#c4b4e4',
+          '#d87a80', '#9cbbff', '#d9d0c7',
+          '#87a997', '#d49ea2', '#5b4947',
+          '#7ba3a8'
+        ],
         series: this.list[1]
       })
     }
@@ -88,7 +95,7 @@
   /*text-align: center;*/
 }
 .chart-body{
-  height: 240px;
+  min-height: 240px;
   width: 90%;
   margin-right: auto;
   margin-left: auto;

diff --git a/src/router/modules/control.js b/src/router/modules/control.js
index c39b1cd..f99b84e 100644
--- a/src/router/modules/control.js
+++ b/src/router/modules/control.js
@@ -1,5 +1,5 @@
 /* Layout */
-import Layout from '../../views/layout/Layout'
+import SupLayout from '../../views/layout/SupLayout'
 export const controlRouters = [
   {
     path: '/control',
@@ -14,7 +14,7 @@
   },
   {
     path: '/supControl',
-    component: Layout,
+    component: SupLayout,
     redirect: '/supControlDetail',
     name: 'SupControl',
     alwaysShow: true,
diff --git a/src/views/layout/SupLayout.vue b/src/views/layout/SupLayout.vue
new file mode 100644
index 0000000..5ada200
--- /dev/null
+++ b/src/views/layout/SupLayout.vue
@@ -0,0 +1,61 @@
+<template>
+  <div :class="classObj" class="app-wrapper">
+    <app-header class="app-header"/>
+    <div class="app-body">
+      <!--右半部分-->
+      <div>
+        <!--主页-->
+        <el-scrollbar>
+          <app-main/>
+        </el-scrollbar>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { AppHeader, AppMain } from './components'
+import ResizeMixin from './mixin/ResizeHandler'
+
+export default {
+  name: 'SupLayout',
+  components: {
+    AppHeader,
+    AppMain
+  },
+  mixins: [ResizeMixin],
+  computed: {
+    classObj() {
+      return {
+        mobile: this.device === 'mobile'
+      }
+    }
+  },
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  @import "src/styles/mixin.scss";
+  .app-wrapper {
+    @include clearfix;
+    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 - 80px);
+  }
+</style>
diff --git a/src/views/otherComment/deptHandle/deptHandleChart4Sup.vue b/src/views/otherComment/deptHandle/deptHandleChart4Sup.vue
index 1b460e4..67c0751 100644
--- a/src/views/otherComment/deptHandle/deptHandleChart4Sup.vue
+++ b/src/views/otherComment/deptHandle/deptHandleChart4Sup.vue
@@ -16,23 +16,6 @@
       }
     }
   },
-  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()
@@ -45,15 +28,14 @@
     initChart() {
       this.chart = echarts.init(this.$refs.chart)
       this.chart.setOption({
-        title: {
-          text: '各单位处置情况'
-        },
-        backgroundColor: '#ccc',
         grid: {
-          left: '30px'
+          left: '60px',
+          top: '10px'
         },
         legend: {
-          left: '60%'
+          type: 'scroll',
+          bottom: 0,
+          backgroundColor: '#ccc'
         },
         tooltip: {
           trigger: 'axis',
@@ -65,17 +47,42 @@
           {
             type: 'category',
             data: this.list[0],
+            axisLine: {
+              lineStyle: {
+                color: '#fff'
+              }
+            },
             axisLabel: {
-              rotate: 90,
-              fontSize: 10
+              // rotate: 90,
+              fontSize: 10,
+              color: '#fff'
             }
           }
         ],
         xAxis: [
           {
-            type: 'value'
+            type: 'value',
+            axisLine: {
+              lineStyle: {
+                color: '#fff'
+              }
+            },
+            axisLabel: {
+              fontSize: 10,
+              color: '#fff'
+            },
+            splitLine: {
+              show: false
+            }
           }
         ],
+        color: [
+          '#19d4ae', '#ffb980', '#5ab1ef',
+          '#fa6e86', '#0067a6', '#c4b4e4',
+          '#d87a80', '#9cbbff', '#d9d0c7',
+          '#87a997', '#d49ea2', '#5b4947',
+          '#7ba3a8'
+        ],
         series: this.list[1]
       })
     }
@@ -88,7 +95,7 @@
   /*text-align: center;*/
 }
 .chart-body{
-  height: 240px;
+  min-height: 240px;
   width: 90%;
   margin-right: auto;
   margin-left: auto;
diff --git a/src/views/otherComment/highFreq/highFreqChart.vue b/src/views/otherComment/highFreq/highFreqChart.vue
index 3c62d66..5b146b1 100644
--- a/src/views/otherComment/highFreq/highFreqChart.vue
+++ b/src/views/otherComment/highFreq/highFreqChart.vue
@@ -43,22 +43,22 @@
         tooltip: {
           show: true
         },
-        // toolbox: {
-        //   show: true,
-        //   right: '20',
-        //   feature: {
-        //     saveAsImage: {
-        //       show: true
-        //     }
-        //   }
-        // },
-        // color: [
-        //   '#19d4ae', '#5ab1ef', '#fa6e86',
-        //   '#ffb980', '#0067a6', '#c4b4e4',
-        //   '#d87a80', '#9cbbff', '#d9d0c7',
-        //   '#87a997', '#d49ea2', '#5b4947',
-        //   '#7ba3a8'
-        // ],
+        toolbox: {
+          show: true,
+          right: '20',
+          feature: {
+            saveAsImage: {
+              show: true
+            }
+          }
+        },
+        color: [
+          '#19d4ae', '#5ab1ef', '#fa6e86',
+          '#ffb980', '#0067a6', '#c4b4e4',
+          '#d87a80', '#9cbbff', '#d9d0c7',
+          '#87a997', '#d49ea2', '#5b4947',
+          '#7ba3a8'
+        ],
         legend: {
           orient: 'vertical',
           right: 0,

diff --git a/src/router/modules/control.js b/src/router/modules/control.js
index c39b1cd..f99b84e 100644
--- a/src/router/modules/control.js
+++ b/src/router/modules/control.js
@@ -1,5 +1,5 @@
 /* Layout */
-import Layout from '../../views/layout/Layout'
+import SupLayout from '../../views/layout/SupLayout'
 export const controlRouters = [
   {
     path: '/control',
@@ -14,7 +14,7 @@
   },
   {
     path: '/supControl',
-    component: Layout,
+    component: SupLayout,
     redirect: '/supControlDetail',
     name: 'SupControl',
     alwaysShow: true,
diff --git a/src/views/layout/SupLayout.vue b/src/views/layout/SupLayout.vue
new file mode 100644
index 0000000..5ada200
--- /dev/null
+++ b/src/views/layout/SupLayout.vue
@@ -0,0 +1,61 @@
+<template>
+  <div :class="classObj" class="app-wrapper">
+    <app-header class="app-header"/>
+    <div class="app-body">
+      <!--右半部分-->
+      <div>
+        <!--主页-->
+        <el-scrollbar>
+          <app-main/>
+        </el-scrollbar>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { AppHeader, AppMain } from './components'
+import ResizeMixin from './mixin/ResizeHandler'
+
+export default {
+  name: 'SupLayout',
+  components: {
+    AppHeader,
+    AppMain
+  },
+  mixins: [ResizeMixin],
+  computed: {
+    classObj() {
+      return {
+        mobile: this.device === 'mobile'
+      }
+    }
+  },
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  @import "src/styles/mixin.scss";
+  .app-wrapper {
+    @include clearfix;
+    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 - 80px);
+  }
+</style>
diff --git a/src/views/otherComment/deptHandle/deptHandleChart4Sup.vue b/src/views/otherComment/deptHandle/deptHandleChart4Sup.vue
index 1b460e4..67c0751 100644
--- a/src/views/otherComment/deptHandle/deptHandleChart4Sup.vue
+++ b/src/views/otherComment/deptHandle/deptHandleChart4Sup.vue
@@ -16,23 +16,6 @@
       }
     }
   },
-  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()
@@ -45,15 +28,14 @@
     initChart() {
       this.chart = echarts.init(this.$refs.chart)
       this.chart.setOption({
-        title: {
-          text: '各单位处置情况'
-        },
-        backgroundColor: '#ccc',
         grid: {
-          left: '30px'
+          left: '60px',
+          top: '10px'
         },
         legend: {
-          left: '60%'
+          type: 'scroll',
+          bottom: 0,
+          backgroundColor: '#ccc'
         },
         tooltip: {
           trigger: 'axis',
@@ -65,17 +47,42 @@
           {
             type: 'category',
             data: this.list[0],
+            axisLine: {
+              lineStyle: {
+                color: '#fff'
+              }
+            },
             axisLabel: {
-              rotate: 90,
-              fontSize: 10
+              // rotate: 90,
+              fontSize: 10,
+              color: '#fff'
             }
           }
         ],
         xAxis: [
           {
-            type: 'value'
+            type: 'value',
+            axisLine: {
+              lineStyle: {
+                color: '#fff'
+              }
+            },
+            axisLabel: {
+              fontSize: 10,
+              color: '#fff'
+            },
+            splitLine: {
+              show: false
+            }
           }
         ],
+        color: [
+          '#19d4ae', '#ffb980', '#5ab1ef',
+          '#fa6e86', '#0067a6', '#c4b4e4',
+          '#d87a80', '#9cbbff', '#d9d0c7',
+          '#87a997', '#d49ea2', '#5b4947',
+          '#7ba3a8'
+        ],
         series: this.list[1]
       })
     }
@@ -88,7 +95,7 @@
   /*text-align: center;*/
 }
 .chart-body{
-  height: 240px;
+  min-height: 240px;
   width: 90%;
   margin-right: auto;
   margin-left: auto;
diff --git a/src/views/otherComment/highFreq/highFreqChart.vue b/src/views/otherComment/highFreq/highFreqChart.vue
index 3c62d66..5b146b1 100644
--- a/src/views/otherComment/highFreq/highFreqChart.vue
+++ b/src/views/otherComment/highFreq/highFreqChart.vue
@@ -43,22 +43,22 @@
         tooltip: {
           show: true
         },
-        // toolbox: {
-        //   show: true,
-        //   right: '20',
-        //   feature: {
-        //     saveAsImage: {
-        //       show: true
-        //     }
-        //   }
-        // },
-        // color: [
-        //   '#19d4ae', '#5ab1ef', '#fa6e86',
-        //   '#ffb980', '#0067a6', '#c4b4e4',
-        //   '#d87a80', '#9cbbff', '#d9d0c7',
-        //   '#87a997', '#d49ea2', '#5b4947',
-        //   '#7ba3a8'
-        // ],
+        toolbox: {
+          show: true,
+          right: '20',
+          feature: {
+            saveAsImage: {
+              show: true
+            }
+          }
+        },
+        color: [
+          '#19d4ae', '#5ab1ef', '#fa6e86',
+          '#ffb980', '#0067a6', '#c4b4e4',
+          '#d87a80', '#9cbbff', '#d9d0c7',
+          '#87a997', '#d49ea2', '#5b4947',
+          '#7ba3a8'
+        ],
         legend: {
           orient: 'vertical',
           right: 0,
diff --git a/src/views/otherComment/highFreq/highFreqChart4Sup.vue b/src/views/otherComment/highFreq/highFreqChart4Sup.vue
index 72ff2a5..7d01f82 100644
--- a/src/views/otherComment/highFreq/highFreqChart4Sup.vue
+++ b/src/views/otherComment/highFreq/highFreqChart4Sup.vue
@@ -40,22 +40,34 @@
     initChart() {
       this.chart = echarts.init(this.$refs.chart)
       this.chart.setOption({
-        title: {
-          text: '高发问题统计'
-        },
-        backgroundColor: '#ccc',
+        // backgroundColor: '#ccc',
         tooltip: {
           show: true
         },
+        grid: {
+          bottom: 120
+        },
+        legend: {
+          type: 'scroll',
+          bottom: 0,
+          backgroundColor: '#ccc'
+        },
         toolbox: {
           show: true,
           right: '20',
           feature: {
             dataView: {
-              show: true
+              show: false
             }
           }
         },
+        color: [
+          '#19d4ae', '#5ab1ef', '#fa6e86',
+          '#ffb980', '#0067a6', '#c4b4e4',
+          '#d87a80', '#9cbbff', '#d9d0c7',
+          '#87a997', '#d49ea2', '#5b4947',
+          '#7ba3a8'
+        ],
         series: [{
           name: '高发问题',
           type: 'pie',
@@ -64,7 +76,7 @@
             show: false
           },
           tooltip: {
-            formatter: '{b}<br/>上报数: {d}%'
+            formatter: '{b}<br/>上报数: {c} ({d}%)'
           },
         }]
       })
@@ -75,11 +87,12 @@
 </script>
 
 <style scoped>
-.chart-container{
-  text-align: center;
+.chart-container {
+  /*text-align: center;*/
 }
-.chart-body{
-  height: 240px;
+.chart-body {
+  /*height: 60vh;*/
+  min-height: 240px;
   width: 90%;
   margin-right: auto;
   margin-left: auto;

diff --git a/src/router/modules/control.js b/src/router/modules/control.js
index c39b1cd..f99b84e 100644
--- a/src/router/modules/control.js
+++ b/src/router/modules/control.js
@@ -1,5 +1,5 @@
 /* Layout */
-import Layout from '../../views/layout/Layout'
+import SupLayout from '../../views/layout/SupLayout'
 export const controlRouters = [
   {
     path: '/control',
@@ -14,7 +14,7 @@
   },
   {
     path: '/supControl',
-    component: Layout,
+    component: SupLayout,
     redirect: '/supControlDetail',
     name: 'SupControl',
     alwaysShow: true,
diff --git a/src/views/layout/SupLayout.vue b/src/views/layout/SupLayout.vue
new file mode 100644
index 0000000..5ada200
--- /dev/null
+++ b/src/views/layout/SupLayout.vue
@@ -0,0 +1,61 @@
+<template>
+  <div :class="classObj" class="app-wrapper">
+    <app-header class="app-header"/>
+    <div class="app-body">
+      <!--右半部分-->
+      <div>
+        <!--主页-->
+        <el-scrollbar>
+          <app-main/>
+        </el-scrollbar>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { AppHeader, AppMain } from './components'
+import ResizeMixin from './mixin/ResizeHandler'
+
+export default {
+  name: 'SupLayout',
+  components: {
+    AppHeader,
+    AppMain
+  },
+  mixins: [ResizeMixin],
+  computed: {
+    classObj() {
+      return {
+        mobile: this.device === 'mobile'
+      }
+    }
+  },
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  @import "src/styles/mixin.scss";
+  .app-wrapper {
+    @include clearfix;
+    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 - 80px);
+  }
+</style>
diff --git a/src/views/otherComment/deptHandle/deptHandleChart4Sup.vue b/src/views/otherComment/deptHandle/deptHandleChart4Sup.vue
index 1b460e4..67c0751 100644
--- a/src/views/otherComment/deptHandle/deptHandleChart4Sup.vue
+++ b/src/views/otherComment/deptHandle/deptHandleChart4Sup.vue
@@ -16,23 +16,6 @@
       }
     }
   },
-  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()
@@ -45,15 +28,14 @@
     initChart() {
       this.chart = echarts.init(this.$refs.chart)
       this.chart.setOption({
-        title: {
-          text: '各单位处置情况'
-        },
-        backgroundColor: '#ccc',
         grid: {
-          left: '30px'
+          left: '60px',
+          top: '10px'
         },
         legend: {
-          left: '60%'
+          type: 'scroll',
+          bottom: 0,
+          backgroundColor: '#ccc'
         },
         tooltip: {
           trigger: 'axis',
@@ -65,17 +47,42 @@
           {
             type: 'category',
             data: this.list[0],
+            axisLine: {
+              lineStyle: {
+                color: '#fff'
+              }
+            },
             axisLabel: {
-              rotate: 90,
-              fontSize: 10
+              // rotate: 90,
+              fontSize: 10,
+              color: '#fff'
             }
           }
         ],
         xAxis: [
           {
-            type: 'value'
+            type: 'value',
+            axisLine: {
+              lineStyle: {
+                color: '#fff'
+              }
+            },
+            axisLabel: {
+              fontSize: 10,
+              color: '#fff'
+            },
+            splitLine: {
+              show: false
+            }
           }
         ],
+        color: [
+          '#19d4ae', '#ffb980', '#5ab1ef',
+          '#fa6e86', '#0067a6', '#c4b4e4',
+          '#d87a80', '#9cbbff', '#d9d0c7',
+          '#87a997', '#d49ea2', '#5b4947',
+          '#7ba3a8'
+        ],
         series: this.list[1]
       })
     }
@@ -88,7 +95,7 @@
   /*text-align: center;*/
 }
 .chart-body{
-  height: 240px;
+  min-height: 240px;
   width: 90%;
   margin-right: auto;
   margin-left: auto;
diff --git a/src/views/otherComment/highFreq/highFreqChart.vue b/src/views/otherComment/highFreq/highFreqChart.vue
index 3c62d66..5b146b1 100644
--- a/src/views/otherComment/highFreq/highFreqChart.vue
+++ b/src/views/otherComment/highFreq/highFreqChart.vue
@@ -43,22 +43,22 @@
         tooltip: {
           show: true
         },
-        // toolbox: {
-        //   show: true,
-        //   right: '20',
-        //   feature: {
-        //     saveAsImage: {
-        //       show: true
-        //     }
-        //   }
-        // },
-        // color: [
-        //   '#19d4ae', '#5ab1ef', '#fa6e86',
-        //   '#ffb980', '#0067a6', '#c4b4e4',
-        //   '#d87a80', '#9cbbff', '#d9d0c7',
-        //   '#87a997', '#d49ea2', '#5b4947',
-        //   '#7ba3a8'
-        // ],
+        toolbox: {
+          show: true,
+          right: '20',
+          feature: {
+            saveAsImage: {
+              show: true
+            }
+          }
+        },
+        color: [
+          '#19d4ae', '#5ab1ef', '#fa6e86',
+          '#ffb980', '#0067a6', '#c4b4e4',
+          '#d87a80', '#9cbbff', '#d9d0c7',
+          '#87a997', '#d49ea2', '#5b4947',
+          '#7ba3a8'
+        ],
         legend: {
           orient: 'vertical',
           right: 0,
diff --git a/src/views/otherComment/highFreq/highFreqChart4Sup.vue b/src/views/otherComment/highFreq/highFreqChart4Sup.vue
index 72ff2a5..7d01f82 100644
--- a/src/views/otherComment/highFreq/highFreqChart4Sup.vue
+++ b/src/views/otherComment/highFreq/highFreqChart4Sup.vue
@@ -40,22 +40,34 @@
     initChart() {
       this.chart = echarts.init(this.$refs.chart)
       this.chart.setOption({
-        title: {
-          text: '高发问题统计'
-        },
-        backgroundColor: '#ccc',
+        // backgroundColor: '#ccc',
         tooltip: {
           show: true
         },
+        grid: {
+          bottom: 120
+        },
+        legend: {
+          type: 'scroll',
+          bottom: 0,
+          backgroundColor: '#ccc'
+        },
         toolbox: {
           show: true,
           right: '20',
           feature: {
             dataView: {
-              show: true
+              show: false
             }
           }
         },
+        color: [
+          '#19d4ae', '#5ab1ef', '#fa6e86',
+          '#ffb980', '#0067a6', '#c4b4e4',
+          '#d87a80', '#9cbbff', '#d9d0c7',
+          '#87a997', '#d49ea2', '#5b4947',
+          '#7ba3a8'
+        ],
         series: [{
           name: '高发问题',
           type: 'pie',
@@ -64,7 +76,7 @@
             show: false
           },
           tooltip: {
-            formatter: '{b}<br/>上报数: {d}%'
+            formatter: '{b}<br/>上报数: {c} ({d}%)'
           },
         }]
       })
@@ -75,11 +87,12 @@
 </script>
 
 <style scoped>
-.chart-container{
-  text-align: center;
+.chart-container {
+  /*text-align: center;*/
 }
-.chart-body{
-  height: 240px;
+.chart-body {
+  /*height: 60vh;*/
+  min-height: 240px;
   width: 90%;
   margin-right: auto;
   margin-left: auto;
diff --git a/src/views/otherComment/sourceStatis/sourceStatisChart.vue b/src/views/otherComment/sourceStatis/sourceStatisChart.vue
index 25a7332..f4e564e 100644
--- a/src/views/otherComment/sourceStatis/sourceStatisChart.vue
+++ b/src/views/otherComment/sourceStatis/sourceStatisChart.vue
@@ -45,22 +45,22 @@
         tooltip: {
           show: true
         },
-        // toolbox: {
-        //   show: true,
-        //   right: '20',
-        //   feature: {
-        //     saveAsImage: {
-        //       show: true
-        //     }
-        //   }
-        // },
-        // color: [
-        //   '#19d4ae', '#5ab1ef', '#fa6e86',
-        //   '#ffb980', '#0067a6', '#c4b4e4',
-        //   '#d87a80', '#9cbbff', '#d9d0c7',
-        //   '#87a997', '#d49ea2', '#5b4947',
-        //   '#7ba3a8'
-        // ],
+        toolbox: {
+          show: true,
+          right: '20',
+          feature: {
+            saveAsImage: {
+              show: true
+            }
+          }
+        },
+        color: [
+          '#19d4ae', '#5ab1ef', '#fa6e86',
+          '#ffb980', '#0067a6', '#c4b4e4',
+          '#d87a80', '#9cbbff', '#d9d0c7',
+          '#87a997', '#d49ea2', '#5b4947',
+          '#7ba3a8'
+        ],
         legend: {
           orient: 'vertical',
           right: 0,

diff --git a/src/router/modules/control.js b/src/router/modules/control.js
index c39b1cd..f99b84e 100644
--- a/src/router/modules/control.js
+++ b/src/router/modules/control.js
@@ -1,5 +1,5 @@
 /* Layout */
-import Layout from '../../views/layout/Layout'
+import SupLayout from '../../views/layout/SupLayout'
 export const controlRouters = [
   {
     path: '/control',
@@ -14,7 +14,7 @@
   },
   {
     path: '/supControl',
-    component: Layout,
+    component: SupLayout,
     redirect: '/supControlDetail',
     name: 'SupControl',
     alwaysShow: true,
diff --git a/src/views/layout/SupLayout.vue b/src/views/layout/SupLayout.vue
new file mode 100644
index 0000000..5ada200
--- /dev/null
+++ b/src/views/layout/SupLayout.vue
@@ -0,0 +1,61 @@
+<template>
+  <div :class="classObj" class="app-wrapper">
+    <app-header class="app-header"/>
+    <div class="app-body">
+      <!--右半部分-->
+      <div>
+        <!--主页-->
+        <el-scrollbar>
+          <app-main/>
+        </el-scrollbar>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { AppHeader, AppMain } from './components'
+import ResizeMixin from './mixin/ResizeHandler'
+
+export default {
+  name: 'SupLayout',
+  components: {
+    AppHeader,
+    AppMain
+  },
+  mixins: [ResizeMixin],
+  computed: {
+    classObj() {
+      return {
+        mobile: this.device === 'mobile'
+      }
+    }
+  },
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  @import "src/styles/mixin.scss";
+  .app-wrapper {
+    @include clearfix;
+    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 - 80px);
+  }
+</style>
diff --git a/src/views/otherComment/deptHandle/deptHandleChart4Sup.vue b/src/views/otherComment/deptHandle/deptHandleChart4Sup.vue
index 1b460e4..67c0751 100644
--- a/src/views/otherComment/deptHandle/deptHandleChart4Sup.vue
+++ b/src/views/otherComment/deptHandle/deptHandleChart4Sup.vue
@@ -16,23 +16,6 @@
       }
     }
   },
-  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()
@@ -45,15 +28,14 @@
     initChart() {
       this.chart = echarts.init(this.$refs.chart)
       this.chart.setOption({
-        title: {
-          text: '各单位处置情况'
-        },
-        backgroundColor: '#ccc',
         grid: {
-          left: '30px'
+          left: '60px',
+          top: '10px'
         },
         legend: {
-          left: '60%'
+          type: 'scroll',
+          bottom: 0,
+          backgroundColor: '#ccc'
         },
         tooltip: {
           trigger: 'axis',
@@ -65,17 +47,42 @@
           {
             type: 'category',
             data: this.list[0],
+            axisLine: {
+              lineStyle: {
+                color: '#fff'
+              }
+            },
             axisLabel: {
-              rotate: 90,
-              fontSize: 10
+              // rotate: 90,
+              fontSize: 10,
+              color: '#fff'
             }
           }
         ],
         xAxis: [
           {
-            type: 'value'
+            type: 'value',
+            axisLine: {
+              lineStyle: {
+                color: '#fff'
+              }
+            },
+            axisLabel: {
+              fontSize: 10,
+              color: '#fff'
+            },
+            splitLine: {
+              show: false
+            }
           }
         ],
+        color: [
+          '#19d4ae', '#ffb980', '#5ab1ef',
+          '#fa6e86', '#0067a6', '#c4b4e4',
+          '#d87a80', '#9cbbff', '#d9d0c7',
+          '#87a997', '#d49ea2', '#5b4947',
+          '#7ba3a8'
+        ],
         series: this.list[1]
       })
     }
@@ -88,7 +95,7 @@
   /*text-align: center;*/
 }
 .chart-body{
-  height: 240px;
+  min-height: 240px;
   width: 90%;
   margin-right: auto;
   margin-left: auto;
diff --git a/src/views/otherComment/highFreq/highFreqChart.vue b/src/views/otherComment/highFreq/highFreqChart.vue
index 3c62d66..5b146b1 100644
--- a/src/views/otherComment/highFreq/highFreqChart.vue
+++ b/src/views/otherComment/highFreq/highFreqChart.vue
@@ -43,22 +43,22 @@
         tooltip: {
           show: true
         },
-        // toolbox: {
-        //   show: true,
-        //   right: '20',
-        //   feature: {
-        //     saveAsImage: {
-        //       show: true
-        //     }
-        //   }
-        // },
-        // color: [
-        //   '#19d4ae', '#5ab1ef', '#fa6e86',
-        //   '#ffb980', '#0067a6', '#c4b4e4',
-        //   '#d87a80', '#9cbbff', '#d9d0c7',
-        //   '#87a997', '#d49ea2', '#5b4947',
-        //   '#7ba3a8'
-        // ],
+        toolbox: {
+          show: true,
+          right: '20',
+          feature: {
+            saveAsImage: {
+              show: true
+            }
+          }
+        },
+        color: [
+          '#19d4ae', '#5ab1ef', '#fa6e86',
+          '#ffb980', '#0067a6', '#c4b4e4',
+          '#d87a80', '#9cbbff', '#d9d0c7',
+          '#87a997', '#d49ea2', '#5b4947',
+          '#7ba3a8'
+        ],
         legend: {
           orient: 'vertical',
           right: 0,
diff --git a/src/views/otherComment/highFreq/highFreqChart4Sup.vue b/src/views/otherComment/highFreq/highFreqChart4Sup.vue
index 72ff2a5..7d01f82 100644
--- a/src/views/otherComment/highFreq/highFreqChart4Sup.vue
+++ b/src/views/otherComment/highFreq/highFreqChart4Sup.vue
@@ -40,22 +40,34 @@
     initChart() {
       this.chart = echarts.init(this.$refs.chart)
       this.chart.setOption({
-        title: {
-          text: '高发问题统计'
-        },
-        backgroundColor: '#ccc',
+        // backgroundColor: '#ccc',
         tooltip: {
           show: true
         },
+        grid: {
+          bottom: 120
+        },
+        legend: {
+          type: 'scroll',
+          bottom: 0,
+          backgroundColor: '#ccc'
+        },
         toolbox: {
           show: true,
           right: '20',
           feature: {
             dataView: {
-              show: true
+              show: false
             }
           }
         },
+        color: [
+          '#19d4ae', '#5ab1ef', '#fa6e86',
+          '#ffb980', '#0067a6', '#c4b4e4',
+          '#d87a80', '#9cbbff', '#d9d0c7',
+          '#87a997', '#d49ea2', '#5b4947',
+          '#7ba3a8'
+        ],
         series: [{
           name: '高发问题',
           type: 'pie',
@@ -64,7 +76,7 @@
             show: false
           },
           tooltip: {
-            formatter: '{b}<br/>上报数: {d}%'
+            formatter: '{b}<br/>上报数: {c} ({d}%)'
           },
         }]
       })
@@ -75,11 +87,12 @@
 </script>
 
 <style scoped>
-.chart-container{
-  text-align: center;
+.chart-container {
+  /*text-align: center;*/
 }
-.chart-body{
-  height: 240px;
+.chart-body {
+  /*height: 60vh;*/
+  min-height: 240px;
   width: 90%;
   margin-right: auto;
   margin-left: auto;
diff --git a/src/views/otherComment/sourceStatis/sourceStatisChart.vue b/src/views/otherComment/sourceStatis/sourceStatisChart.vue
index 25a7332..f4e564e 100644
--- a/src/views/otherComment/sourceStatis/sourceStatisChart.vue
+++ b/src/views/otherComment/sourceStatis/sourceStatisChart.vue
@@ -45,22 +45,22 @@
         tooltip: {
           show: true
         },
-        // toolbox: {
-        //   show: true,
-        //   right: '20',
-        //   feature: {
-        //     saveAsImage: {
-        //       show: true
-        //     }
-        //   }
-        // },
-        // color: [
-        //   '#19d4ae', '#5ab1ef', '#fa6e86',
-        //   '#ffb980', '#0067a6', '#c4b4e4',
-        //   '#d87a80', '#9cbbff', '#d9d0c7',
-        //   '#87a997', '#d49ea2', '#5b4947',
-        //   '#7ba3a8'
-        // ],
+        toolbox: {
+          show: true,
+          right: '20',
+          feature: {
+            saveAsImage: {
+              show: true
+            }
+          }
+        },
+        color: [
+          '#19d4ae', '#5ab1ef', '#fa6e86',
+          '#ffb980', '#0067a6', '#c4b4e4',
+          '#d87a80', '#9cbbff', '#d9d0c7',
+          '#87a997', '#d49ea2', '#5b4947',
+          '#7ba3a8'
+        ],
         legend: {
           orient: 'vertical',
           right: 0,
diff --git a/src/views/otherComment/sourceStatis/sourceStatisChart4Sup.vue b/src/views/otherComment/sourceStatis/sourceStatisChart4Sup.vue
index b4643fa..f949dcb 100644
--- a/src/views/otherComment/sourceStatis/sourceStatisChart4Sup.vue
+++ b/src/views/otherComment/sourceStatis/sourceStatisChart4Sup.vue
@@ -40,10 +40,14 @@
     initChart() {
       this.chart = echarts.init(this.$refs.chart)
       this.chart.setOption({
-        title: {
-          text: '问题来源统计'
+        grid: {
+          bottom: 120
         },
-        backgroundColor: '#ccc',
+        legend: {
+          type: 'scroll',
+          bottom: 0,
+          backgroundColor: '#ccc'
+        },
         tooltip: {
           show: true
         },
@@ -52,20 +56,26 @@
           right: '20',
           feature: {
             dataView: {
-              show: true
+              show: false
             }
           }
         },
+        color: [
+          '#19d4ae', '#5ab1ef', '#fa6e86',
+          '#ffb980', '#0067a6', '#c4b4e4',
+          '#d87a80', '#9cbbff', '#d9d0c7',
+          '#87a997', '#d49ea2', '#5b4947',
+          '#7ba3a8'
+        ],
         series: [{
           name: '问题来源',
           type: 'pie',
           data: this.pieData,
           label: {
-            // formatter: '{b} : {d}%'
             show: false
           },
           tooltip: {
-            formatter: '{b}<br/>上报数: {d}%'
+            formatter: '{b}<br/>上报数: {c} ({d}%)'
           }
         }]
       })
@@ -76,10 +86,10 @@
 
 <style scoped>
 .chart-container{
-  text-align: center;
+  /*text-align: center;*/
 }
 .chart-body{
-  height: 240px;
+  min-height: 240px;
   width: 90%;
   margin-right: auto;
   margin-left: auto;

diff --git a/src/router/modules/control.js b/src/router/modules/control.js
index c39b1cd..f99b84e 100644
--- a/src/router/modules/control.js
+++ b/src/router/modules/control.js
@@ -1,5 +1,5 @@
 /* Layout */
-import Layout from '../../views/layout/Layout'
+import SupLayout from '../../views/layout/SupLayout'
 export const controlRouters = [
   {
     path: '/control',
@@ -14,7 +14,7 @@
   },
   {
     path: '/supControl',
-    component: Layout,
+    component: SupLayout,
     redirect: '/supControlDetail',
     name: 'SupControl',
     alwaysShow: true,
diff --git a/src/views/layout/SupLayout.vue b/src/views/layout/SupLayout.vue
new file mode 100644
index 0000000..5ada200
--- /dev/null
+++ b/src/views/layout/SupLayout.vue
@@ -0,0 +1,61 @@
+<template>
+  <div :class="classObj" class="app-wrapper">
+    <app-header class="app-header"/>
+    <div class="app-body">
+      <!--右半部分-->
+      <div>
+        <!--主页-->
+        <el-scrollbar>
+          <app-main/>
+        </el-scrollbar>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { AppHeader, AppMain } from './components'
+import ResizeMixin from './mixin/ResizeHandler'
+
+export default {
+  name: 'SupLayout',
+  components: {
+    AppHeader,
+    AppMain
+  },
+  mixins: [ResizeMixin],
+  computed: {
+    classObj() {
+      return {
+        mobile: this.device === 'mobile'
+      }
+    }
+  },
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  @import "src/styles/mixin.scss";
+  .app-wrapper {
+    @include clearfix;
+    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 - 80px);
+  }
+</style>
diff --git a/src/views/otherComment/deptHandle/deptHandleChart4Sup.vue b/src/views/otherComment/deptHandle/deptHandleChart4Sup.vue
index 1b460e4..67c0751 100644
--- a/src/views/otherComment/deptHandle/deptHandleChart4Sup.vue
+++ b/src/views/otherComment/deptHandle/deptHandleChart4Sup.vue
@@ -16,23 +16,6 @@
       }
     }
   },
-  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()
@@ -45,15 +28,14 @@
     initChart() {
       this.chart = echarts.init(this.$refs.chart)
       this.chart.setOption({
-        title: {
-          text: '各单位处置情况'
-        },
-        backgroundColor: '#ccc',
         grid: {
-          left: '30px'
+          left: '60px',
+          top: '10px'
         },
         legend: {
-          left: '60%'
+          type: 'scroll',
+          bottom: 0,
+          backgroundColor: '#ccc'
         },
         tooltip: {
           trigger: 'axis',
@@ -65,17 +47,42 @@
           {
             type: 'category',
             data: this.list[0],
+            axisLine: {
+              lineStyle: {
+                color: '#fff'
+              }
+            },
             axisLabel: {
-              rotate: 90,
-              fontSize: 10
+              // rotate: 90,
+              fontSize: 10,
+              color: '#fff'
             }
           }
         ],
         xAxis: [
           {
-            type: 'value'
+            type: 'value',
+            axisLine: {
+              lineStyle: {
+                color: '#fff'
+              }
+            },
+            axisLabel: {
+              fontSize: 10,
+              color: '#fff'
+            },
+            splitLine: {
+              show: false
+            }
           }
         ],
+        color: [
+          '#19d4ae', '#ffb980', '#5ab1ef',
+          '#fa6e86', '#0067a6', '#c4b4e4',
+          '#d87a80', '#9cbbff', '#d9d0c7',
+          '#87a997', '#d49ea2', '#5b4947',
+          '#7ba3a8'
+        ],
         series: this.list[1]
       })
     }
@@ -88,7 +95,7 @@
   /*text-align: center;*/
 }
 .chart-body{
-  height: 240px;
+  min-height: 240px;
   width: 90%;
   margin-right: auto;
   margin-left: auto;
diff --git a/src/views/otherComment/highFreq/highFreqChart.vue b/src/views/otherComment/highFreq/highFreqChart.vue
index 3c62d66..5b146b1 100644
--- a/src/views/otherComment/highFreq/highFreqChart.vue
+++ b/src/views/otherComment/highFreq/highFreqChart.vue
@@ -43,22 +43,22 @@
         tooltip: {
           show: true
         },
-        // toolbox: {
-        //   show: true,
-        //   right: '20',
-        //   feature: {
-        //     saveAsImage: {
-        //       show: true
-        //     }
-        //   }
-        // },
-        // color: [
-        //   '#19d4ae', '#5ab1ef', '#fa6e86',
-        //   '#ffb980', '#0067a6', '#c4b4e4',
-        //   '#d87a80', '#9cbbff', '#d9d0c7',
-        //   '#87a997', '#d49ea2', '#5b4947',
-        //   '#7ba3a8'
-        // ],
+        toolbox: {
+          show: true,
+          right: '20',
+          feature: {
+            saveAsImage: {
+              show: true
+            }
+          }
+        },
+        color: [
+          '#19d4ae', '#5ab1ef', '#fa6e86',
+          '#ffb980', '#0067a6', '#c4b4e4',
+          '#d87a80', '#9cbbff', '#d9d0c7',
+          '#87a997', '#d49ea2', '#5b4947',
+          '#7ba3a8'
+        ],
         legend: {
           orient: 'vertical',
           right: 0,
diff --git a/src/views/otherComment/highFreq/highFreqChart4Sup.vue b/src/views/otherComment/highFreq/highFreqChart4Sup.vue
index 72ff2a5..7d01f82 100644
--- a/src/views/otherComment/highFreq/highFreqChart4Sup.vue
+++ b/src/views/otherComment/highFreq/highFreqChart4Sup.vue
@@ -40,22 +40,34 @@
     initChart() {
       this.chart = echarts.init(this.$refs.chart)
       this.chart.setOption({
-        title: {
-          text: '高发问题统计'
-        },
-        backgroundColor: '#ccc',
+        // backgroundColor: '#ccc',
         tooltip: {
           show: true
         },
+        grid: {
+          bottom: 120
+        },
+        legend: {
+          type: 'scroll',
+          bottom: 0,
+          backgroundColor: '#ccc'
+        },
         toolbox: {
           show: true,
           right: '20',
           feature: {
             dataView: {
-              show: true
+              show: false
             }
           }
         },
+        color: [
+          '#19d4ae', '#5ab1ef', '#fa6e86',
+          '#ffb980', '#0067a6', '#c4b4e4',
+          '#d87a80', '#9cbbff', '#d9d0c7',
+          '#87a997', '#d49ea2', '#5b4947',
+          '#7ba3a8'
+        ],
         series: [{
           name: '高发问题',
           type: 'pie',
@@ -64,7 +76,7 @@
             show: false
           },
           tooltip: {
-            formatter: '{b}<br/>上报数: {d}%'
+            formatter: '{b}<br/>上报数: {c} ({d}%)'
           },
         }]
       })
@@ -75,11 +87,12 @@
 </script>
 
 <style scoped>
-.chart-container{
-  text-align: center;
+.chart-container {
+  /*text-align: center;*/
 }
-.chart-body{
-  height: 240px;
+.chart-body {
+  /*height: 60vh;*/
+  min-height: 240px;
   width: 90%;
   margin-right: auto;
   margin-left: auto;
diff --git a/src/views/otherComment/sourceStatis/sourceStatisChart.vue b/src/views/otherComment/sourceStatis/sourceStatisChart.vue
index 25a7332..f4e564e 100644
--- a/src/views/otherComment/sourceStatis/sourceStatisChart.vue
+++ b/src/views/otherComment/sourceStatis/sourceStatisChart.vue
@@ -45,22 +45,22 @@
         tooltip: {
           show: true
         },
-        // toolbox: {
-        //   show: true,
-        //   right: '20',
-        //   feature: {
-        //     saveAsImage: {
-        //       show: true
-        //     }
-        //   }
-        // },
-        // color: [
-        //   '#19d4ae', '#5ab1ef', '#fa6e86',
-        //   '#ffb980', '#0067a6', '#c4b4e4',
-        //   '#d87a80', '#9cbbff', '#d9d0c7',
-        //   '#87a997', '#d49ea2', '#5b4947',
-        //   '#7ba3a8'
-        // ],
+        toolbox: {
+          show: true,
+          right: '20',
+          feature: {
+            saveAsImage: {
+              show: true
+            }
+          }
+        },
+        color: [
+          '#19d4ae', '#5ab1ef', '#fa6e86',
+          '#ffb980', '#0067a6', '#c4b4e4',
+          '#d87a80', '#9cbbff', '#d9d0c7',
+          '#87a997', '#d49ea2', '#5b4947',
+          '#7ba3a8'
+        ],
         legend: {
           orient: 'vertical',
           right: 0,
diff --git a/src/views/otherComment/sourceStatis/sourceStatisChart4Sup.vue b/src/views/otherComment/sourceStatis/sourceStatisChart4Sup.vue
index b4643fa..f949dcb 100644
--- a/src/views/otherComment/sourceStatis/sourceStatisChart4Sup.vue
+++ b/src/views/otherComment/sourceStatis/sourceStatisChart4Sup.vue
@@ -40,10 +40,14 @@
     initChart() {
       this.chart = echarts.init(this.$refs.chart)
       this.chart.setOption({
-        title: {
-          text: '问题来源统计'
+        grid: {
+          bottom: 120
         },
-        backgroundColor: '#ccc',
+        legend: {
+          type: 'scroll',
+          bottom: 0,
+          backgroundColor: '#ccc'
+        },
         tooltip: {
           show: true
         },
@@ -52,20 +56,26 @@
           right: '20',
           feature: {
             dataView: {
-              show: true
+              show: false
             }
           }
         },
+        color: [
+          '#19d4ae', '#5ab1ef', '#fa6e86',
+          '#ffb980', '#0067a6', '#c4b4e4',
+          '#d87a80', '#9cbbff', '#d9d0c7',
+          '#87a997', '#d49ea2', '#5b4947',
+          '#7ba3a8'
+        ],
         series: [{
           name: '问题来源',
           type: 'pie',
           data: this.pieData,
           label: {
-            // formatter: '{b} : {d}%'
             show: false
           },
           tooltip: {
-            formatter: '{b}<br/>上报数: {d}%'
+            formatter: '{b}<br/>上报数: {c} ({d}%)'
           }
         }]
       })
@@ -76,10 +86,10 @@
 
 <style scoped>
 .chart-container{
-  text-align: center;
+  /*text-align: center;*/
 }
 .chart-body{
-  height: 240px;
+  min-height: 240px;
   width: 90%;
   margin-right: auto;
   margin-left: auto;
diff --git a/src/views/supControl/supControl.vue b/src/views/supControl/supControl.vue
index f28d8c1..18ccc34 100644
--- a/src/views/supControl/supControl.vue
+++ b/src/views/supControl/supControl.vue
@@ -16,7 +16,7 @@
           </el-col>
         </el-row>
 
-        <!--<div v-loading="mapLoading" ref="mapDiv" class="baseMap"/>-->
+        <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">
@@ -66,16 +66,25 @@
           <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 v-model="parts.caseStatusCode" placeholder="选择案卷状态" clearable value="" @change="changeCaseScope()">
+                  <el-option value="toHandle" label="处置中"></el-option>
+                  <el-option value="toDistribute" label="新立案"></el-option>
+                  <el-option value="toVerify" label="待核实"></el-option>
+                  <el-option value="toCheck" label="待核查"></el-option>
                 </el-select>
               </el-form-item>
             </el-col>
           </el-row>
+
+          <el-row :gutter="10">
+            <el-col :span="20">
+              <el-radio-group v-model="isOverTime" size="small" @change="changeCaseScope()">
+                <el-radio-button label="">全部</el-radio-button>
+                <el-radio-button label="Ot">超期</el-radio-button>
+                <el-radio-button label="Not">未超期</el-radio-button>
+              </el-radio-group>
+            </el-col>
+          </el-row>
         </el-form>
       </el-col>
     </el-row>
@@ -96,6 +105,17 @@
 // const eventPointLayerId = 'eventPointLayer' // 事件定位点的图层id
 const partsResultLayerId = 'partsResultLayer' // 部件查询结果点集的图层id
 const personResultLayerId = 'personResultLayer' // 人员查询结果点集的图层id
+const graphicLayerIds = [
+  'partsResultLayer', 'personResultLayer',
+  'toVerifyCaseNot', 'toVerifyCaseOt',
+  'toCheckCaseNot', 'toCheckCaseOt',
+  'toHandleCaseNot', 'toHandleCaseOt',
+  'toDistributeCaseNot', 'toDistributeCaseOt'
+]
+
+const caseIcon = [
+  '/static/images/well/0100.png', '/static/images/well/0101.png'
+]
 
 export default {
   name: 'SupControl',
@@ -160,7 +180,6 @@
         label: '处置人员'
       }], // 人员分类下拉框
       caseDetailTypeOpts: [], // 部件小类下拉框
-      caseStatusOpts: [], // 案卷状态下拉框
       caseTypeCodeAuto: '', // 自动生成的案卷大类代码
       caseTypeDetailCodeAuto: '', // 自动生成的案卷小类代码
       mapLoading: false,
@@ -168,10 +187,15 @@
       showPartsSelect: false,
       showPersonSelect: false,
       showCaseSelect: true,
-      toVerifyCaseList: [],
-      toCheckCaseList: [],
-      toHandleCaseList: [],
-      toDistributeCaseList: []
+      isOverTime: '', // 是否区分超时工单
+      toVerifyListOt: [], // 待核实超时
+      toVerifyListNot: [], // 待核实未超时
+      toCheckListOt: [], // 待核查超时
+      toCheckListNot: [], // 待核查
+      toHandleListOt: [], // 处置中超时
+      toHandleListNot: [], // 处置中
+      toDistributeListOt: [], // 新立案超时
+      toDistributeListNot: [] // 新立案
     }
   },
   computed: {
@@ -193,6 +217,8 @@
       this.cascaderCaseDetailType(typeVal)
     },
     caseTypeDetail(typeVal) {
+      this.clearPoint()
+
       var obj = this.caseDetailTypeOpts.find(function(item) {
         return item.typeDetailCode === typeVal
       })
@@ -201,6 +227,8 @@
       }
     },
     casePerson(typeVal) {
+      this.clearPoint()
+
       this.personQuery.roleTips = typeVal
       if (typeVal !== '') {
         this.addPersonPoints()
@@ -209,10 +237,11 @@
   },
   mounted() {
     this.importEsri()
-    this.initCaseStatus()
   },
   methods: {
     switchContent: function() {
+      this.clearPoint() // 清除绘制的点
+
       // 案卷（0）、人员（1）、部件（2），
       if (this.queryEventSwitch === '2') {
         this.showPartsSelect = true
@@ -231,6 +260,22 @@
         this.queryCaseList()
       }
     },
+    // 切换不同案卷状态的显示与否
+    changeCaseScope: function() {
+      // isOverTime: ''--全部，'Ot'--超时，'Not'--未超时
+      // caseStatusCode: 'toHandle'--待处置，'toDistribute'--待派发，'toVerify'--待核实，'toCheck'--待核查
+      const filterStr = this.parts.caseStatusCode + 'Case' + this.isOverTime
+
+      graphicLayerIds.forEach(item => {
+        if (item.indexOf(filterStr) < 0) {
+          // 非案卷类图层全部隐藏
+          this.showGraphicLayer(item, false)
+        } else {
+          this.showGraphicLayer(item, true)
+        }
+      })
+    },
+    // 查询案卷列表
     queryCaseList: function() {
       const that = this
       const onePageParam = {
@@ -245,7 +290,22 @@
         params: onePageParam
       }).then(response => {
         if (response.code === 200) {
-          that.toVerifyCaseList = response.data.rows
+          if (response.data.total > 0) {
+            // 查询有新结果时清除原有的列表
+            this.toVerifyListNot = []
+            this.toVerifyListOt = []
+
+            response.data.rows.forEach(item => {
+              if (item.isOvertime === '1') { // 超时标志位为1，放入超时列表中
+                that.toVerifyListOt.push(item)
+              } else { // 未超时
+                that.toVerifyListNot.push(item)
+              }
+            })
+
+            this.addPictureMarkerOnMap(this.toVerifyListNot, caseIcon[0], graphicLayerIds[2])
+            this.addPictureMarkerOnMap(this.toVerifyListOt, caseIcon[1], graphicLayerIds[3])
+          }
         }
       })
 
@@ -256,7 +316,22 @@
         params: onePageParam
       }).then(response => {
         if (response.code === 200) {
-          that.toCheckCaseList = response.data.rows
+          if (response.data.total > 0) {
+            // 查询有新结果时清除原有的列表
+            this.toCheckListNot = []
+            this.toCheckListOt = []
+
+            response.data.rows.forEach(item => {
+              if (item.isOvertime === '1') { // 超时标志位为1，放入超时列表中
+                that.toCheckListOt.push(item)
+              } else { // 未超时
+                that.toCheckListNot.push(item)
+              }
+            })
+
+            this.addPictureMarkerOnMap(this.toCheckListNot, caseIcon[0], graphicLayerIds[4])
+            this.addPictureMarkerOnMap(this.toCheckListOt, caseIcon[1], graphicLayerIds[5])
+          }
         }
       })
 
@@ -267,7 +342,22 @@
         params: onePageParam
       }).then(response => {
         if (response.code === 200) {
-          that.toHandleCaseList = response.data.rows
+          if (response.data.total > 0) {
+            // 查询有新结果时清除原有的列表
+            this.toHandleListNot = []
+            this.toHandleListOt = []
+
+            response.data.rows.forEach(item => {
+              if (item.isOvertime === '1') { // 超时标志位为1，放入超时列表中
+                that.toHandleListOt.push(item)
+              } else { // 未超时
+                that.toHandleListNot.push(item)
+              }
+            })
+
+            this.addPictureMarkerOnMap(this.toHandleListNot, caseIcon[0], graphicLayerIds[6])
+            this.addPictureMarkerOnMap(this.toHandleListOt, caseIcon[1], graphicLayerIds[7])
+          }
         }
       })
 
@@ -278,11 +368,25 @@
         params: onePageParam
       }).then(response => {
         if (response.code === 200) {
-          that.toDistributeCaseList = response.data.rows
+          if (response.data.total > 0) {
+            // 查询有新结果时清除原有的列表
+            this.toDistributeListNot = []
+            this.toDistributeListOt = []
+
+            response.data.rows.forEach(item => {
+              if (item.isOvertime === '1') { // 超时标志位为1，放入超时列表中
+                that.toDistributeListOt.push(item)
+              } else { // 未超时
+                that.toDistributeListNot.push(item)
+              }
+            })
+
+            this.addPictureMarkerOnMap(this.toDistributeListNot, caseIcon[0], graphicLayerIds[8])
+            this.addPictureMarkerOnMap(this.toDistributeListOt, caseIcon[1], graphicLayerIds[9])
+          }
         }
       })
     },
-
     // 级联查询部件大类
     cascaderCaseType: function(eorc) {
       // 前两行的作用是清除部件大类的当前值和select中的所有选项
@@ -331,21 +435,32 @@
     clearPoint: function() {
       this.map.layers.forEach(layer => {
         if (layer.type === 'graphics') {
-          if (layer.id === partsResultLayerId || layer.id === personResultLayerId) {
-            layer.graphics.removeAll()
-            this.map.layers.remove(layer)
-          }
-          return false
+          layer.graphics.removeAll()
         }
       })
       // 清除弹出框
       this.view.popup.close()
     },
+    addPictureMarkerOnMap: function(points, icon, layerId) {
+      const that = this
+      const gLayer = this.selectGraphicLayerById(layerId)
+      points.forEach(item => {
+        if (item.lng !== '' && item.lat !== '') {
+          const point = new that.esriObj.Point(item.lng, item.lat, item)
+          const marker = new that.esriObj.PictureMarkerSymbol(icon, 20, 20)
+          const graphic = new that.esriObj.Graphic({
+            geometry: point,
+            symbol: marker,
+            attributes: item
+          })
+          gLayer.items[0].add(graphic)
+        }
+      })
+    },
     addPersonPoints: function() {
       const that = this
-      that.clearPoint()
       getUserOnLine(this.personQuery).then(res => {
-        const gLayer = new this.esriObj.GraphicsLayer() // 添加自定义绘制点的图层
+        const gLayer = this.selectGraphicLayerById(personResultLayerId) // 添加自定义绘制点的图层
         res.data.forEach((item, index) => {
           const point = new that.esriObj.Point(116.60769581599995, 28.24919796600002 + index * 0.001) // 创建geometry对象
           let marker
@@ -359,15 +474,12 @@
             symbol: marker,
             attributes: item
           })
-          gLayer.id = personResultLayerId
-          gLayer.add(graphic) // 图层上添加对象
+          gLayer.items[0].add(graphic) // 图层上添加对象
         })
-        that.map.add(gLayer) // 地图上添加图层
         that.layers.personPoint = gLayer
       })
     },
     addPartsPoints: function(typeCode) {
-      this.clearPoint()
       // 部件定位
       const queryDev = this.layers.dxbjPoint.createQuery()
       queryDev.returnGeometry = true
@@ -377,7 +489,7 @@
       this.layers.dxbjPoint.queryFeatures(queryDev).then(function(response) {
         if (response.features.length > 0) {
           const results = response.features
-          const gLayer = new that.esriObj.GraphicsLayer() // 添加自定义绘制点的图层
+          const gLayer = that.selectGraphicLayerById(partsResultLayerId)
           results.forEach((item, index) => {
             const point = new that.esriObj.Point(item.geometry.x, item.geometry.y) // 创建geometry对象
             const marker = new that.esriObj.PictureMarkerSymbol() // 创建marker标识
@@ -390,10 +502,8 @@
               geometry: point,
               symbol: marker
             })
-            gLayer.id = partsResultLayerId
-            gLayer.add(graphic) // 图层上添加对象
+            gLayer.items[0].add(graphic) // 图层上添加对象
           })
-          that.map.add(gLayer) // 地图上添加图层
         } else {
           that.$message({
             message: '查询无该类部件',
@@ -402,23 +512,14 @@
         }
       })
     },
-    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)
+    showGraphicLayer: function(layerId, show) {
+      const gLayer = this.selectGraphicLayerById(layerId)
+      if (gLayer !== null) {
+        gLayer.items[0].visible = show
+      }
+    },
+    showCaseDetail: function(caseId) {
+      console.log(caseId)
     },
     // 初始化ArcGIS API对象
     importEsri: function() {
@@ -510,6 +611,8 @@
       })
 
       this.addBjLayers()
+      this.addGraphicLayers()
+      this.queryCaseList()
       const that = this
       this.view.on('click', function(event) {
         const lon = event.mapPoint.longitude
@@ -594,6 +697,25 @@
               location: event.mapPoint
             })
           })
+        } else if (that.queryEventSwitch === '0') {
+          // 案卷定位
+          that.view.hitTest(event).then(function(response) {
+            const feature = response.results[0].graphic
+            let content = ''
+            content = '案卷状态：' + feature.attributes.caseStateName +
+              '<p>案卷类别：' + feature.attributes.eorcName + '/' + feature.attributes.casetypeCode + '/' + feature.attributes.casetypeDetailCode +
+              '<p>上报时间：' + feature.attributes.reportTime +
+              '<p>案卷地点：' + feature.attributes.fieldintro +
+              '<p>案卷情况：' + feature.attributes.description +
+              '<p><button id="caseDetailBtn" data-case-id="' + feature.attributes.caseid + ')">详情</button>'
+
+            // 2弹出气泡
+            that.view.popup.open({
+              title: feature.attributes.caseid,
+              content: content,
+              location: event.mapPoint
+            })
+          })
         }
       })
     },
@@ -626,14 +748,30 @@
       this.map.add(this.layers.dxbjXqd)
       this.map.add(this.layers.dxbjMph)
       this.map.add(this.layers.dx2wGrid)
+    },
+    // 预先添加绘制的Graphic图层
+    addGraphicLayers: function() {
+      graphicLayerIds.forEach(item => {
+        const gLayer = new this.esriObj.GraphicsLayer()
+        gLayer.id = item
+        this.map.add(gLayer)
+      })
+    },
+    // 从graphic图层中找到指定的图层
+    selectGraphicLayerById: function(layerId) {
+      return this.map.layers.filter(layer => {
+        if (layer.id === layerId) {
+          return layer
+        }
+      })
     }
   }
 }
 </script>
 
 <style scoped>
-  /* @import 'http://192.168.8.205/arcgis_js_api/library/4.12/esri/css/main.css'; */
-  @import 'https://js.arcgis.com/4.13/esri/css/main.css';
+   @import 'http://192.168.8.205/arcgis_js_api/library/4.12/esri/css/main.css';
+  /*@import 'https://js.arcgis.com/4.13/esri/css/main.css';*/
   .baseMap {
     height:80vh;
     width: 100%;
@@ -641,7 +779,7 @@
     border: 1px solid #DCDCDC;
     border-radius: 4px;
   }
-  .form{
+  .form {
     position: fixed;
     z-index: 9999;
     top: 190px;

diff --git a/src/router/modules/control.js b/src/router/modules/control.js
index c39b1cd..f99b84e 100644
--- a/src/router/modules/control.js
+++ b/src/router/modules/control.js
@@ -1,5 +1,5 @@
 /* Layout */
-import Layout from '../../views/layout/Layout'
+import SupLayout from '../../views/layout/SupLayout'
 export const controlRouters = [
   {
     path: '/control',
@@ -14,7 +14,7 @@
   },
   {
     path: '/supControl',
-    component: Layout,
+    component: SupLayout,
     redirect: '/supControlDetail',
     name: 'SupControl',
     alwaysShow: true,
diff --git a/src/views/layout/SupLayout.vue b/src/views/layout/SupLayout.vue
new file mode 100644
index 0000000..5ada200
--- /dev/null
+++ b/src/views/layout/SupLayout.vue
@@ -0,0 +1,61 @@
+<template>
+  <div :class="classObj" class="app-wrapper">
+    <app-header class="app-header"/>
+    <div class="app-body">
+      <!--右半部分-->
+      <div>
+        <!--主页-->
+        <el-scrollbar>
+          <app-main/>
+        </el-scrollbar>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { AppHeader, AppMain } from './components'
+import ResizeMixin from './mixin/ResizeHandler'
+
+export default {
+  name: 'SupLayout',
+  components: {
+    AppHeader,
+    AppMain
+  },
+  mixins: [ResizeMixin],
+  computed: {
+    classObj() {
+      return {
+        mobile: this.device === 'mobile'
+      }
+    }
+  },
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  @import "src/styles/mixin.scss";
+  .app-wrapper {
+    @include clearfix;
+    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 - 80px);
+  }
+</style>
diff --git a/src/views/otherComment/deptHandle/deptHandleChart4Sup.vue b/src/views/otherComment/deptHandle/deptHandleChart4Sup.vue
index 1b460e4..67c0751 100644
--- a/src/views/otherComment/deptHandle/deptHandleChart4Sup.vue
+++ b/src/views/otherComment/deptHandle/deptHandleChart4Sup.vue
@@ -16,23 +16,6 @@
       }
     }
   },
-  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()
@@ -45,15 +28,14 @@
     initChart() {
       this.chart = echarts.init(this.$refs.chart)
       this.chart.setOption({
-        title: {
-          text: '各单位处置情况'
-        },
-        backgroundColor: '#ccc',
         grid: {
-          left: '30px'
+          left: '60px',
+          top: '10px'
         },
         legend: {
-          left: '60%'
+          type: 'scroll',
+          bottom: 0,
+          backgroundColor: '#ccc'
         },
         tooltip: {
           trigger: 'axis',
@@ -65,17 +47,42 @@
           {
             type: 'category',
             data: this.list[0],
+            axisLine: {
+              lineStyle: {
+                color: '#fff'
+              }
+            },
             axisLabel: {
-              rotate: 90,
-              fontSize: 10
+              // rotate: 90,
+              fontSize: 10,
+              color: '#fff'
             }
           }
         ],
         xAxis: [
           {
-            type: 'value'
+            type: 'value',
+            axisLine: {
+              lineStyle: {
+                color: '#fff'
+              }
+            },
+            axisLabel: {
+              fontSize: 10,
+              color: '#fff'
+            },
+            splitLine: {
+              show: false
+            }
           }
         ],
+        color: [
+          '#19d4ae', '#ffb980', '#5ab1ef',
+          '#fa6e86', '#0067a6', '#c4b4e4',
+          '#d87a80', '#9cbbff', '#d9d0c7',
+          '#87a997', '#d49ea2', '#5b4947',
+          '#7ba3a8'
+        ],
         series: this.list[1]
       })
     }
@@ -88,7 +95,7 @@
   /*text-align: center;*/
 }
 .chart-body{
-  height: 240px;
+  min-height: 240px;
   width: 90%;
   margin-right: auto;
   margin-left: auto;
diff --git a/src/views/otherComment/highFreq/highFreqChart.vue b/src/views/otherComment/highFreq/highFreqChart.vue
index 3c62d66..5b146b1 100644
--- a/src/views/otherComment/highFreq/highFreqChart.vue
+++ b/src/views/otherComment/highFreq/highFreqChart.vue
@@ -43,22 +43,22 @@
         tooltip: {
           show: true
         },
-        // toolbox: {
-        //   show: true,
-        //   right: '20',
-        //   feature: {
-        //     saveAsImage: {
-        //       show: true
-        //     }
-        //   }
-        // },
-        // color: [
-        //   '#19d4ae', '#5ab1ef', '#fa6e86',
-        //   '#ffb980', '#0067a6', '#c4b4e4',
-        //   '#d87a80', '#9cbbff', '#d9d0c7',
-        //   '#87a997', '#d49ea2', '#5b4947',
-        //   '#7ba3a8'
-        // ],
+        toolbox: {
+          show: true,
+          right: '20',
+          feature: {
+            saveAsImage: {
+              show: true
+            }
+          }
+        },
+        color: [
+          '#19d4ae', '#5ab1ef', '#fa6e86',
+          '#ffb980', '#0067a6', '#c4b4e4',
+          '#d87a80', '#9cbbff', '#d9d0c7',
+          '#87a997', '#d49ea2', '#5b4947',
+          '#7ba3a8'
+        ],
         legend: {
           orient: 'vertical',
           right: 0,
diff --git a/src/views/otherComment/highFreq/highFreqChart4Sup.vue b/src/views/otherComment/highFreq/highFreqChart4Sup.vue
index 72ff2a5..7d01f82 100644
--- a/src/views/otherComment/highFreq/highFreqChart4Sup.vue
+++ b/src/views/otherComment/highFreq/highFreqChart4Sup.vue
@@ -40,22 +40,34 @@
     initChart() {
       this.chart = echarts.init(this.$refs.chart)
       this.chart.setOption({
-        title: {
-          text: '高发问题统计'
-        },
-        backgroundColor: '#ccc',
+        // backgroundColor: '#ccc',
         tooltip: {
           show: true
         },
+        grid: {
+          bottom: 120
+        },
+        legend: {
+          type: 'scroll',
+          bottom: 0,
+          backgroundColor: '#ccc'
+        },
         toolbox: {
           show: true,
           right: '20',
           feature: {
             dataView: {
-              show: true
+              show: false
             }
           }
         },
+        color: [
+          '#19d4ae', '#5ab1ef', '#fa6e86',
+          '#ffb980', '#0067a6', '#c4b4e4',
+          '#d87a80', '#9cbbff', '#d9d0c7',
+          '#87a997', '#d49ea2', '#5b4947',
+          '#7ba3a8'
+        ],
         series: [{
           name: '高发问题',
           type: 'pie',
@@ -64,7 +76,7 @@
             show: false
           },
           tooltip: {
-            formatter: '{b}<br/>上报数: {d}%'
+            formatter: '{b}<br/>上报数: {c} ({d}%)'
           },
         }]
       })
@@ -75,11 +87,12 @@
 </script>
 
 <style scoped>
-.chart-container{
-  text-align: center;
+.chart-container {
+  /*text-align: center;*/
 }
-.chart-body{
-  height: 240px;
+.chart-body {
+  /*height: 60vh;*/
+  min-height: 240px;
   width: 90%;
   margin-right: auto;
   margin-left: auto;
diff --git a/src/views/otherComment/sourceStatis/sourceStatisChart.vue b/src/views/otherComment/sourceStatis/sourceStatisChart.vue
index 25a7332..f4e564e 100644
--- a/src/views/otherComment/sourceStatis/sourceStatisChart.vue
+++ b/src/views/otherComment/sourceStatis/sourceStatisChart.vue
@@ -45,22 +45,22 @@
         tooltip: {
           show: true
         },
-        // toolbox: {
-        //   show: true,
-        //   right: '20',
-        //   feature: {
-        //     saveAsImage: {
-        //       show: true
-        //     }
-        //   }
-        // },
-        // color: [
-        //   '#19d4ae', '#5ab1ef', '#fa6e86',
-        //   '#ffb980', '#0067a6', '#c4b4e4',
-        //   '#d87a80', '#9cbbff', '#d9d0c7',
-        //   '#87a997', '#d49ea2', '#5b4947',
-        //   '#7ba3a8'
-        // ],
+        toolbox: {
+          show: true,
+          right: '20',
+          feature: {
+            saveAsImage: {
+              show: true
+            }
+          }
+        },
+        color: [
+          '#19d4ae', '#5ab1ef', '#fa6e86',
+          '#ffb980', '#0067a6', '#c4b4e4',
+          '#d87a80', '#9cbbff', '#d9d0c7',
+          '#87a997', '#d49ea2', '#5b4947',
+          '#7ba3a8'
+        ],
         legend: {
           orient: 'vertical',
           right: 0,
diff --git a/src/views/otherComment/sourceStatis/sourceStatisChart4Sup.vue b/src/views/otherComment/sourceStatis/sourceStatisChart4Sup.vue
index b4643fa..f949dcb 100644
--- a/src/views/otherComment/sourceStatis/sourceStatisChart4Sup.vue
+++ b/src/views/otherComment/sourceStatis/sourceStatisChart4Sup.vue
@@ -40,10 +40,14 @@
     initChart() {
       this.chart = echarts.init(this.$refs.chart)
       this.chart.setOption({
-        title: {
-          text: '问题来源统计'
+        grid: {
+          bottom: 120
         },
-        backgroundColor: '#ccc',
+        legend: {
+          type: 'scroll',
+          bottom: 0,
+          backgroundColor: '#ccc'
+        },
         tooltip: {
           show: true
         },
@@ -52,20 +56,26 @@
           right: '20',
           feature: {
             dataView: {
-              show: true
+              show: false
             }
           }
         },
+        color: [
+          '#19d4ae', '#5ab1ef', '#fa6e86',
+          '#ffb980', '#0067a6', '#c4b4e4',
+          '#d87a80', '#9cbbff', '#d9d0c7',
+          '#87a997', '#d49ea2', '#5b4947',
+          '#7ba3a8'
+        ],
         series: [{
           name: '问题来源',
           type: 'pie',
           data: this.pieData,
           label: {
-            // formatter: '{b} : {d}%'
             show: false
           },
           tooltip: {
-            formatter: '{b}<br/>上报数: {d}%'
+            formatter: '{b}<br/>上报数: {c} ({d}%)'
           }
         }]
       })
@@ -76,10 +86,10 @@
 
 <style scoped>
 .chart-container{
-  text-align: center;
+  /*text-align: center;*/
 }
 .chart-body{
-  height: 240px;
+  min-height: 240px;
   width: 90%;
   margin-right: auto;
   margin-left: auto;
diff --git a/src/views/supControl/supControl.vue b/src/views/supControl/supControl.vue
index f28d8c1..18ccc34 100644
--- a/src/views/supControl/supControl.vue
+++ b/src/views/supControl/supControl.vue
@@ -16,7 +16,7 @@
           </el-col>
         </el-row>
 
-        <!--<div v-loading="mapLoading" ref="mapDiv" class="baseMap"/>-->
+        <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">
@@ -66,16 +66,25 @@
           <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 v-model="parts.caseStatusCode" placeholder="选择案卷状态" clearable value="" @change="changeCaseScope()">
+                  <el-option value="toHandle" label="处置中"></el-option>
+                  <el-option value="toDistribute" label="新立案"></el-option>
+                  <el-option value="toVerify" label="待核实"></el-option>
+                  <el-option value="toCheck" label="待核查"></el-option>
                 </el-select>
               </el-form-item>
             </el-col>
           </el-row>
+
+          <el-row :gutter="10">
+            <el-col :span="20">
+              <el-radio-group v-model="isOverTime" size="small" @change="changeCaseScope()">
+                <el-radio-button label="">全部</el-radio-button>
+                <el-radio-button label="Ot">超期</el-radio-button>
+                <el-radio-button label="Not">未超期</el-radio-button>
+              </el-radio-group>
+            </el-col>
+          </el-row>
         </el-form>
       </el-col>
     </el-row>
@@ -96,6 +105,17 @@
 // const eventPointLayerId = 'eventPointLayer' // 事件定位点的图层id
 const partsResultLayerId = 'partsResultLayer' // 部件查询结果点集的图层id
 const personResultLayerId = 'personResultLayer' // 人员查询结果点集的图层id
+const graphicLayerIds = [
+  'partsResultLayer', 'personResultLayer',
+  'toVerifyCaseNot', 'toVerifyCaseOt',
+  'toCheckCaseNot', 'toCheckCaseOt',
+  'toHandleCaseNot', 'toHandleCaseOt',
+  'toDistributeCaseNot', 'toDistributeCaseOt'
+]
+
+const caseIcon = [
+  '/static/images/well/0100.png', '/static/images/well/0101.png'
+]
 
 export default {
   name: 'SupControl',
@@ -160,7 +180,6 @@
         label: '处置人员'
       }], // 人员分类下拉框
       caseDetailTypeOpts: [], // 部件小类下拉框
-      caseStatusOpts: [], // 案卷状态下拉框
       caseTypeCodeAuto: '', // 自动生成的案卷大类代码
       caseTypeDetailCodeAuto: '', // 自动生成的案卷小类代码
       mapLoading: false,
@@ -168,10 +187,15 @@
       showPartsSelect: false,
       showPersonSelect: false,
       showCaseSelect: true,
-      toVerifyCaseList: [],
-      toCheckCaseList: [],
-      toHandleCaseList: [],
-      toDistributeCaseList: []
+      isOverTime: '', // 是否区分超时工单
+      toVerifyListOt: [], // 待核实超时
+      toVerifyListNot: [], // 待核实未超时
+      toCheckListOt: [], // 待核查超时
+      toCheckListNot: [], // 待核查
+      toHandleListOt: [], // 处置中超时
+      toHandleListNot: [], // 处置中
+      toDistributeListOt: [], // 新立案超时
+      toDistributeListNot: [] // 新立案
     }
   },
   computed: {
@@ -193,6 +217,8 @@
       this.cascaderCaseDetailType(typeVal)
     },
     caseTypeDetail(typeVal) {
+      this.clearPoint()
+
       var obj = this.caseDetailTypeOpts.find(function(item) {
         return item.typeDetailCode === typeVal
       })
@@ -201,6 +227,8 @@
       }
     },
     casePerson(typeVal) {
+      this.clearPoint()
+
       this.personQuery.roleTips = typeVal
       if (typeVal !== '') {
         this.addPersonPoints()
@@ -209,10 +237,11 @@
   },
   mounted() {
     this.importEsri()
-    this.initCaseStatus()
   },
   methods: {
     switchContent: function() {
+      this.clearPoint() // 清除绘制的点
+
       // 案卷（0）、人员（1）、部件（2），
       if (this.queryEventSwitch === '2') {
         this.showPartsSelect = true
@@ -231,6 +260,22 @@
         this.queryCaseList()
       }
     },
+    // 切换不同案卷状态的显示与否
+    changeCaseScope: function() {
+      // isOverTime: ''--全部，'Ot'--超时，'Not'--未超时
+      // caseStatusCode: 'toHandle'--待处置，'toDistribute'--待派发，'toVerify'--待核实，'toCheck'--待核查
+      const filterStr = this.parts.caseStatusCode + 'Case' + this.isOverTime
+
+      graphicLayerIds.forEach(item => {
+        if (item.indexOf(filterStr) < 0) {
+          // 非案卷类图层全部隐藏
+          this.showGraphicLayer(item, false)
+        } else {
+          this.showGraphicLayer(item, true)
+        }
+      })
+    },
+    // 查询案卷列表
     queryCaseList: function() {
       const that = this
       const onePageParam = {
@@ -245,7 +290,22 @@
         params: onePageParam
       }).then(response => {
         if (response.code === 200) {
-          that.toVerifyCaseList = response.data.rows
+          if (response.data.total > 0) {
+            // 查询有新结果时清除原有的列表
+            this.toVerifyListNot = []
+            this.toVerifyListOt = []
+
+            response.data.rows.forEach(item => {
+              if (item.isOvertime === '1') { // 超时标志位为1，放入超时列表中
+                that.toVerifyListOt.push(item)
+              } else { // 未超时
+                that.toVerifyListNot.push(item)
+              }
+            })
+
+            this.addPictureMarkerOnMap(this.toVerifyListNot, caseIcon[0], graphicLayerIds[2])
+            this.addPictureMarkerOnMap(this.toVerifyListOt, caseIcon[1], graphicLayerIds[3])
+          }
         }
       })
 
@@ -256,7 +316,22 @@
         params: onePageParam
       }).then(response => {
         if (response.code === 200) {
-          that.toCheckCaseList = response.data.rows
+          if (response.data.total > 0) {
+            // 查询有新结果时清除原有的列表
+            this.toCheckListNot = []
+            this.toCheckListOt = []
+
+            response.data.rows.forEach(item => {
+              if (item.isOvertime === '1') { // 超时标志位为1，放入超时列表中
+                that.toCheckListOt.push(item)
+              } else { // 未超时
+                that.toCheckListNot.push(item)
+              }
+            })
+
+            this.addPictureMarkerOnMap(this.toCheckListNot, caseIcon[0], graphicLayerIds[4])
+            this.addPictureMarkerOnMap(this.toCheckListOt, caseIcon[1], graphicLayerIds[5])
+          }
         }
       })
 
@@ -267,7 +342,22 @@
         params: onePageParam
       }).then(response => {
         if (response.code === 200) {
-          that.toHandleCaseList = response.data.rows
+          if (response.data.total > 0) {
+            // 查询有新结果时清除原有的列表
+            this.toHandleListNot = []
+            this.toHandleListOt = []
+
+            response.data.rows.forEach(item => {
+              if (item.isOvertime === '1') { // 超时标志位为1，放入超时列表中
+                that.toHandleListOt.push(item)
+              } else { // 未超时
+                that.toHandleListNot.push(item)
+              }
+            })
+
+            this.addPictureMarkerOnMap(this.toHandleListNot, caseIcon[0], graphicLayerIds[6])
+            this.addPictureMarkerOnMap(this.toHandleListOt, caseIcon[1], graphicLayerIds[7])
+          }
         }
       })
 
@@ -278,11 +368,25 @@
         params: onePageParam
       }).then(response => {
         if (response.code === 200) {
-          that.toDistributeCaseList = response.data.rows
+          if (response.data.total > 0) {
+            // 查询有新结果时清除原有的列表
+            this.toDistributeListNot = []
+            this.toDistributeListOt = []
+
+            response.data.rows.forEach(item => {
+              if (item.isOvertime === '1') { // 超时标志位为1，放入超时列表中
+                that.toDistributeListOt.push(item)
+              } else { // 未超时
+                that.toDistributeListNot.push(item)
+              }
+            })
+
+            this.addPictureMarkerOnMap(this.toDistributeListNot, caseIcon[0], graphicLayerIds[8])
+            this.addPictureMarkerOnMap(this.toDistributeListOt, caseIcon[1], graphicLayerIds[9])
+          }
         }
       })
     },
-
     // 级联查询部件大类
     cascaderCaseType: function(eorc) {
       // 前两行的作用是清除部件大类的当前值和select中的所有选项
@@ -331,21 +435,32 @@
     clearPoint: function() {
       this.map.layers.forEach(layer => {
         if (layer.type === 'graphics') {
-          if (layer.id === partsResultLayerId || layer.id === personResultLayerId) {
-            layer.graphics.removeAll()
-            this.map.layers.remove(layer)
-          }
-          return false
+          layer.graphics.removeAll()
         }
       })
       // 清除弹出框
       this.view.popup.close()
     },
+    addPictureMarkerOnMap: function(points, icon, layerId) {
+      const that = this
+      const gLayer = this.selectGraphicLayerById(layerId)
+      points.forEach(item => {
+        if (item.lng !== '' && item.lat !== '') {
+          const point = new that.esriObj.Point(item.lng, item.lat, item)
+          const marker = new that.esriObj.PictureMarkerSymbol(icon, 20, 20)
+          const graphic = new that.esriObj.Graphic({
+            geometry: point,
+            symbol: marker,
+            attributes: item
+          })
+          gLayer.items[0].add(graphic)
+        }
+      })
+    },
     addPersonPoints: function() {
       const that = this
-      that.clearPoint()
       getUserOnLine(this.personQuery).then(res => {
-        const gLayer = new this.esriObj.GraphicsLayer() // 添加自定义绘制点的图层
+        const gLayer = this.selectGraphicLayerById(personResultLayerId) // 添加自定义绘制点的图层
         res.data.forEach((item, index) => {
           const point = new that.esriObj.Point(116.60769581599995, 28.24919796600002 + index * 0.001) // 创建geometry对象
           let marker
@@ -359,15 +474,12 @@
             symbol: marker,
             attributes: item
           })
-          gLayer.id = personResultLayerId
-          gLayer.add(graphic) // 图层上添加对象
+          gLayer.items[0].add(graphic) // 图层上添加对象
         })
-        that.map.add(gLayer) // 地图上添加图层
         that.layers.personPoint = gLayer
       })
     },
     addPartsPoints: function(typeCode) {
-      this.clearPoint()
       // 部件定位
       const queryDev = this.layers.dxbjPoint.createQuery()
       queryDev.returnGeometry = true
@@ -377,7 +489,7 @@
       this.layers.dxbjPoint.queryFeatures(queryDev).then(function(response) {
         if (response.features.length > 0) {
           const results = response.features
-          const gLayer = new that.esriObj.GraphicsLayer() // 添加自定义绘制点的图层
+          const gLayer = that.selectGraphicLayerById(partsResultLayerId)
           results.forEach((item, index) => {
             const point = new that.esriObj.Point(item.geometry.x, item.geometry.y) // 创建geometry对象
             const marker = new that.esriObj.PictureMarkerSymbol() // 创建marker标识
@@ -390,10 +502,8 @@
               geometry: point,
               symbol: marker
             })
-            gLayer.id = partsResultLayerId
-            gLayer.add(graphic) // 图层上添加对象
+            gLayer.items[0].add(graphic) // 图层上添加对象
           })
-          that.map.add(gLayer) // 地图上添加图层
         } else {
           that.$message({
             message: '查询无该类部件',
@@ -402,23 +512,14 @@
         }
       })
     },
-    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)
+    showGraphicLayer: function(layerId, show) {
+      const gLayer = this.selectGraphicLayerById(layerId)
+      if (gLayer !== null) {
+        gLayer.items[0].visible = show
+      }
+    },
+    showCaseDetail: function(caseId) {
+      console.log(caseId)
     },
     // 初始化ArcGIS API对象
     importEsri: function() {
@@ -510,6 +611,8 @@
       })
 
       this.addBjLayers()
+      this.addGraphicLayers()
+      this.queryCaseList()
       const that = this
       this.view.on('click', function(event) {
         const lon = event.mapPoint.longitude
@@ -594,6 +697,25 @@
               location: event.mapPoint
             })
           })
+        } else if (that.queryEventSwitch === '0') {
+          // 案卷定位
+          that.view.hitTest(event).then(function(response) {
+            const feature = response.results[0].graphic
+            let content = ''
+            content = '案卷状态：' + feature.attributes.caseStateName +
+              '<p>案卷类别：' + feature.attributes.eorcName + '/' + feature.attributes.casetypeCode + '/' + feature.attributes.casetypeDetailCode +
+              '<p>上报时间：' + feature.attributes.reportTime +
+              '<p>案卷地点：' + feature.attributes.fieldintro +
+              '<p>案卷情况：' + feature.attributes.description +
+              '<p><button id="caseDetailBtn" data-case-id="' + feature.attributes.caseid + ')">详情</button>'
+
+            // 2弹出气泡
+            that.view.popup.open({
+              title: feature.attributes.caseid,
+              content: content,
+              location: event.mapPoint
+            })
+          })
         }
       })
     },
@@ -626,14 +748,30 @@
       this.map.add(this.layers.dxbjXqd)
       this.map.add(this.layers.dxbjMph)
       this.map.add(this.layers.dx2wGrid)
+    },
+    // 预先添加绘制的Graphic图层
+    addGraphicLayers: function() {
+      graphicLayerIds.forEach(item => {
+        const gLayer = new this.esriObj.GraphicsLayer()
+        gLayer.id = item
+        this.map.add(gLayer)
+      })
+    },
+    // 从graphic图层中找到指定的图层
+    selectGraphicLayerById: function(layerId) {
+      return this.map.layers.filter(layer => {
+        if (layer.id === layerId) {
+          return layer
+        }
+      })
     }
   }
 }
 </script>
 
 <style scoped>
-  /* @import 'http://192.168.8.205/arcgis_js_api/library/4.12/esri/css/main.css'; */
-  @import 'https://js.arcgis.com/4.13/esri/css/main.css';
+   @import 'http://192.168.8.205/arcgis_js_api/library/4.12/esri/css/main.css';
+  /*@import 'https://js.arcgis.com/4.13/esri/css/main.css';*/
   .baseMap {
     height:80vh;
     width: 100%;
@@ -641,7 +779,7 @@
     border: 1px solid #DCDCDC;
     border-radius: 4px;
   }
-  .form{
+  .form {
     position: fixed;
     z-index: 9999;
     top: 190px;
diff --git a/src/views/supControl/supStatisPanel.vue b/src/views/supControl/supStatisPanel.vue
index 3456466..f476912 100644
--- a/src/views/supControl/supStatisPanel.vue
+++ b/src/views/supControl/supStatisPanel.vue
@@ -1,69 +1,93 @@
 <template>
   <div>
-    <el-row>
-      <div>案卷情况</div>
-    </el-row>
+    <div class="panelBlock" style="">
+      <el-row>
+        <div class="subTitle">案卷情况</div>
+        <div class="dashedLine"/>
+      </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" />件
+      <el-row>
+        <div style="margin: 15px 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-col>
+      </el-row>
 
-      <el-col :span="12">
-        <div class="caseStatisBlock" style="background-color: #3a8ee6;">
-          本日立案<br>
-          <span v-text="caseCounts.todayRegister" />件
+      <el-row>
+        <el-col :span="12">
+          <div class="caseStatisBlock" style="background-color: rgb(217, 59, 66)">
+            <span v-text="caseCounts.labelText"/>立案<br>
+            <span v-text="caseCounts.register"/>件
+          </div>
+        </el-col>
+
+        <el-col :span="12">
+          <div class="caseStatisBlock" style="background-color: rgb(248, 176, 51)">
+            本日立案<br>
+            <span v-text="caseCounts.todayRegister" />件
+          </div>
+        </el-col>
+      </el-row>
+
+      <el-row>
+        <el-col :span="12">
+          <div class="caseStatisBlock" style="background-color: rgb(217, 59, 66)">
+            <span v-text="caseCounts.labelText" />处理率<br>
+            <span v-text="caseCounts.oughtHandleRate" />%
+          </div>
+        </el-col>
+
+        <el-col :span="12">
+          <div class="caseStatisBlock" style="background-color: rgb(248, 176, 51)">
+            <span v-text="caseCounts.labelText" />未处理<br>
+            <span v-text="caseCounts.notHandled" />件
+          </div>
+        </el-col>
+      </el-row>
+    </div>
+
+    <div class="panelBlock">
+      <el-row>
+        <div class="subTitle">高发问题统计</div>
+        <div class="dashedLine"/>
+      </el-row>
+
+      <el-row>
+        <div>
+          <high-freq-chart4-sup :list="highFreqList"/>
         </div>
-      </el-col>
-    </el-row>
+      </el-row>
+    </div>
 
-    <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 class="panelBlock">
+      <el-row>
+        <div class="subTitle">各单位处置情况</div>
+        <div class="dashedLine"/>
+      </el-row>
+
+      <el-row>
+        <div>
+          <dept-handle-chart4-sup :list="handleCaseList"/>
         </div>
-      </el-col>
+      </el-row>
+    </div>
 
-      <el-col :span="12">
-        <div class="caseStatisBlock" style="background-color: #3a8ee6;">
-          <span v-text="caseCounts.labelText" />未处理<br>
-          <span v-text="caseCounts.notHandled" />件
+    <div class="panelBlock">
+      <el-row>
+        <div class="subTitle">问题来源统计</div>
+        <div class="dashedLine"/>
+      </el-row>
+
+      <el-row>
+        <div>
+          <source-statis-chart4-sup :list="sourceList.slice(0,sourceList.length-1)"/>
         </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>
+      </el-row>
+    </div>
   </div>
 </template>
 
@@ -132,7 +156,6 @@
     },
     fetchHandleListData() {
       departmentAssess(this.query).then(res => {
-        console.log(res)
         if (res.code === 200) {
           const array = [] // 0--部门; 1--seriesData
           const depts = []
@@ -140,12 +163,14 @@
           const seriesToDispatch = {
             name: '派发数',
             type: 'bar',
+            barMaxWidth: 15,
             barGap: 0,
             data: []
           } // 派发数
           const seriesToHandle = {
             name: '处置数',
             type: 'bar',
+            barMaxWidth: 15,
             barGap: 0,
             data: []
           } // 处置数
@@ -163,7 +188,9 @@
               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
+                this.caseCounts.oughtHandleRate = (rate * 100).toFixed(2)
+              } else {
+                this.caseCounts.oughtHandleRate = 0
               }
             }
           })
@@ -212,23 +239,23 @@
       } else if (this.timeTerm === '2') { // 前三个月
         this.caseCounts.labelText = '本期'
 
-        this.query.begTime = getDate(-90, 'yyyy-MM-dd')
+        this.query.begTime = getDate(-3, 'yyyy-MM-dd')
         this.query.endTime = getDate(1, 'yyyy-MM-dd')
-        this.query4Regist.beginDate = getDate(-90, 'yyyy-MM-dd')
+        this.query4Regist.beginDate = getDate(-3, '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.begTime = getDate(-5, 'yyyy-MM-dd')
         this.query.endTime = getDate(1, 'yyyy-MM-dd')
-        this.query4Regist.beginDate = getDate(-180, 'yyyy-MM-dd')
+        this.query4Regist.beginDate = getDate(-5, '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.begTime = getDate(-7, 'yyyy-MM-dd')
         this.query.endTime = getDate(1, 'yyyy-MM-dd')
-        this.query4Regist.beginDate = getDate(-365, 'yyyy-MM-dd')
+        this.query4Regist.beginDate = getDate(-7, 'yyyy-MM-dd')
         this.query4Regist.endDate = getDate(1, 'yyyy-MM-dd')
       }
 
@@ -242,8 +269,31 @@
 </script>
 
 <style scoped>
+  .panelBlock {
+    background-color: rgb(47, 56, 86);
+    margin: 5px;
+    padding-bottom: 20px;
+  }
+
+  .dashedLine {
+    border-bottom: 1px dashed #f0f0f0;
+  }
+
 .caseStatisBlock {
   text-align: center;
-  margin: 5px 15px;
+  margin: 5px;
+  padding: 10px;
+  color: #fff;
+  font-weight: bold;
+  letter-spacing: 1px;
+}
+
+.subTitle {
+  font-weight: bold;
+  font-family: '微软雅黑',serif;
+  color: #fff;
+  font-size: 16px;
+  margin: 15px;
+  margin-bottom: 5px;
 }
 </style>