diff --git a/src/views/layout/SupLayout.vue b/src/views/layout/SupLayout.vue
index 731ac0c..2a93596 100644
--- a/src/views/layout/SupLayout.vue
+++ b/src/views/layout/SupLayout.vue
@@ -5,7 +5,7 @@
       <!--右半部分-->
       <div>
         <!--主页-->
-        <el-scrollbar>
+        <el-scrollbar wrap-style="overflow-x:hidden;">
           <app-main/>
         </el-scrollbar>
       </div>
@@ -55,7 +55,8 @@
     position: absolute;
     z-index: 999;
   }
-  .el-scrollbar{
-    height: calc(100vh - 80px);
+
+  .el-scrollbar {
+    height: calc(100vh - 60px);
   }
 </style>

diff --git a/src/views/layout/SupLayout.vue b/src/views/layout/SupLayout.vue
index 731ac0c..2a93596 100644
--- a/src/views/layout/SupLayout.vue
+++ b/src/views/layout/SupLayout.vue
@@ -5,7 +5,7 @@
       <!--右半部分-->
       <div>
         <!--主页-->
-        <el-scrollbar>
+        <el-scrollbar wrap-style="overflow-x:hidden;">
           <app-main/>
         </el-scrollbar>
       </div>
@@ -55,7 +55,8 @@
     position: absolute;
     z-index: 999;
   }
-  .el-scrollbar{
-    height: calc(100vh - 80px);
+
+  .el-scrollbar {
+    height: calc(100vh - 60px);
   }
 </style>
diff --git a/src/views/supControl/supControl.vue b/src/views/supControl/supControl.vue
index c067d89..f389738 100644
--- a/src/views/supControl/supControl.vue
+++ b/src/views/supControl/supControl.vue
@@ -6,24 +6,57 @@
       </el-col>
 
       <el-col :span="18" class="mapPanel">
-        <div style="margin: 5px;">
+        <el-row>
+          <el-col :span="6">
+            <div id="today-visitor" class="caseStatisBlock">
+              <span v-text="caseCounts.labelText"/>立案
+              <span class="bigNumber" v-text="caseCounts.register"/>件
+            </div>
+          </el-col>
+
+          <el-col :span="6">
+            <div id="total-alarm" class="caseStatisBlock">
+              本日立案
+              <span class="bigNumber" v-text="caseCounts.todayRegister" />件
+            </div>
+          </el-col>
+
+          <el-col :span="6">
+            <div id="online-device" class="caseStatisBlock">
+              <span v-text="caseCounts.labelText" />处理率
+              <span class="bigNumber" v-text="caseCounts.oughtHandleRate" />%
+            </div>
+          </el-col>
+
+          <el-col :span="6">
+            <div id="total-device" class="caseStatisBlock">
+              <span v-text="caseCounts.labelText" />未处理
+              <span class="bigNumber" v-text="caseCounts.notHandled" />件
+            </div>
+          </el-col>
+        </el-row>
+
+        <el-row :gutter="20">
+          <el-col :span="24" style="padding: 0px 20px">
+            <div v-loading="mapLoading" ref="mapDiv" class="baseMap"/>
+          </el-col>
+        </el-row>
+
+        <!-- 浮层 -->
+        <div class="mapOverLayer">
           <el-row :gutter="20">
-            <el-col :span="6" style="text-align: left;">
+            <el-col :span="6" style="margin-top: 10px; padding-left: 25px; line-height: 40px;">
               <el-radio-group v-model="queryEventSwitch" size="medium" @change="switchContent">
                 <el-radio-button label="0">案卷</el-radio-button>
-<!--                <el-radio-button label="1">人员</el-radio-button>-->
-<!--                <el-radio-button label="2">部件</el-radio-button>-->
+                <el-radio-button label="1">人员</el-radio-button>
+                <el-radio-button label="2">部件</el-radio-button>
               </el-radio-group>
             </el-col>
-          </el-row>
 
-          <div v-loading="mapLoading" ref="mapDiv" class="baseMap"/>
-
-          <el-form v-if="showCaseSelect" ref="dataForm" :model="parts" :label-position="labelPosition" label-width="120px" class="form">
-            <el-row :gutter="20" class="rowSelect">
-              <el-col :span="20">
+            <el-col :span="18" style="margin-top: 10px;">
+              <el-form v-if="showCaseSelect" :label-position="labelPosition" label-width="120px">
                 <el-form-item label="案卷状态" class="item">
-                  <el-select v-model="parts.caseStatusCode" placeholder="选择案卷状态" clearable value="" class="notLastSelect" @change="changeCaseScope()">
+                  <el-select v-model="parts.caseStatusCode" size="medium" placeholder="选择案卷状态" clearable value="" class="notLastSelect" @change="changeCaseScope()">
                     <el-option value="toHandle" label="处置中"/>
                     <el-option value="toDistribute" label="新立案"/>
                     <el-option value="toVerify" label="待核实"/>
@@ -31,53 +64,53 @@
                   </el-select>
 
                   <label class="customLabel">是否超期</label>
-                  <el-radio-group v-model="isOverTime" @change="changeCaseScope()">
+                  <el-radio-group v-model="isOverTime" size="medium" @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-form-item>
-              </el-col>
-            </el-row>
-          </el-form>
+              </el-form>
 
-          <el-form v-if="showPersonSelect" ref="dataForm" :model="parts" :label-position="labelPosition" label-width="120px" class="form" >
-            <el-row :gutter="10" class="rowSelect">
-              <el-col :span="20">
-                <el-form-item label="人员分类" prop="casepersonCode" class="item">
-                  <el-radio-group v-model="casepersonCode" @change="casePerson()">
-                    <el-radio-button label="supervisor">监督员</el-radio-button>
-                    <el-radio-button label="process">处置员</el-radio-button>
-                  </el-radio-group>
-                </el-form-item>
-              </el-col>
-            </el-row>
-          </el-form>
+              <el-form v-if="showPersonSelect" :label-position="labelPosition" label-width="120px">
+                <el-row :gutter="10" class="rowSelect">
+                  <el-col :span="20">
+                    <el-form-item label="人员分类" prop="casepersonCode" class="item">
+                      <el-radio-group v-model="casepersonCode" size="medium" @change="casePerson()">
+                        <el-radio-button label="supervisor">监督员</el-radio-button>
+                        <el-radio-button label="process">处置员</el-radio-button>
+                      </el-radio-group>
+                    </el-form-item>
+                  </el-col>
+                </el-row>
+              </el-form>
 
-          <el-form v-if="showPartsSelect" ref="dataForm" :model="parts" :label-position="labelPosition" label-width="120px" class="form">
-            <el-row :gutter="10" class="rowSelect">
-              <el-col :span="20">
-                <el-form-item label="部件大类" prop="casetypeCode" class="item">
-                  <el-select v-model="parts.casetypeCode" placeholder="选择部件大类" clearable value="" class="notLastSelect">
-                    <el-option
-                      v-for="item in caseTypeOpts"
-                      :key="item.id"
-                      :label="item.typeName"
-                      :value="item.typeCode"/>
-                  </el-select>
+              <el-form v-if="showPartsSelect" :label-position="labelPosition" label-width="120px">
+                <el-row :gutter="10" class="rowSelect">
+                  <el-col :span="20">
+                    <el-form-item label="部件大类" prop="casetypeCode" class="item">
+                      <el-select v-model="parts.casetypeCode" size="medium" placeholder="选择部件大类" clearable class="notLastSelect">
+                        <el-option
+                          v-for="item in caseTypeOpts"
+                          :key="item.id"
+                          :label="item.typeName"
+                          :value="item.typeCode"/>
+                      </el-select>
 
-                  <label class="customLabel">部件小类</label>
-                  <el-select v-model="parts.casetypeDetailCode" placeholder="选择部件小类" clearable value="">
-                    <el-option
-                      v-for="item in caseDetailTypeOpts"
-                      :key="item.id"
-                      :label="item.typeDetailName"
-                      :value="item.typeDetailCode"/>
-                  </el-select>
-                </el-form-item>
-              </el-col>
-            </el-row>
-          </el-form>
+                      <label class="customLabel">部件小类</label>
+                      <el-select v-model="parts.casetypeDetailCode" size="medium" placeholder="选择部件小类" clearable>
+                        <el-option
+                          v-for="item in caseDetailTypeOpts"
+                          :key="item.id"
+                          :label="item.typeDetailName"
+                          :value="item.typeDetailCode"/>
+                      </el-select>
+                    </el-form-item>
+                  </el-col>
+                </el-row>
+              </el-form>
+            </el-col>
+          </el-row>
         </div>
       </el-col>
     </el-row>
@@ -87,16 +120,14 @@
 <script>
 import request from '@/utils/request'
 import SupStatisPanel from '@/views/supControl/SupStatisPanel'
+import { getToday, getDate } from '@/utils/dateutils'
 import { getCaseType, getCaseDetailType } from '@/api/callCase/callCase'
-import L from 'leaflet'
+import Leaflet from 'leaflet'
 import markerIcon from 'leaflet/dist/images/marker-icon.png'
 import markerIcon2x from 'leaflet/dist/images/marker-icon-2x.png'
 import markerShadow from 'leaflet/dist/images/marker-shadow.png'
 
-const videoIcon = L.icon({
-  iconUrl: require('../../assets/global_images/video.png'),
-  iconSize: [40, 40]
-})
+const esri = require('esri-leaflet')
 
 export default {
   name: 'SupControl',
@@ -115,19 +146,25 @@
     return {
       map: '',
       baselayer: [],
-      videoList: [
-        { name: '胜利路中国电信', lng: 116.05584218667022, lat: 27.75863633337256, url: 'ezopen://open.ys7.com/C86485758/1.hd.live' },
-        { name: '宝水中央', lng: 116.06984798429087, lat: 27.75743630778776, url: 'ezopen://open.ys7.com/F22226658/1.hd.live' }
-      ],
       parts: {
         eorc: '2', // 类别
         casetypeCode: '', // 部件大类编码,
         casetypeDetailCode: '', // 部件小类编码
         caseStatusCode: ''
       },
+      timeTerm: '1',
       personQuery: {
         roleTips: ''
       },
+      caseCounts: {
+        labelText: '本月',
+        register: 0, // 本期立案数
+        todayRegister: 0, // 当日立案数
+        totalCheckNum: 0, // 本期总应处置数
+        checkedNum: 0, // 本期处置数
+        oughtHandleRate: 0, // 本期应处置率
+        notHandled: 0 // 本期未处置数
+      },
       casepersonCode: 'supervisor',
       labelPosition: 'right',
       caseTypeOpts: [], // 部件大类下拉框
@@ -175,7 +212,7 @@
     caseTypeDetail(typeVal) {
       this.clearPoint()
 
-      var obj = this.caseDetailTypeOpts.find(function(item) {
+      const obj = this.caseDetailTypeOpts.find(function(item) {
         return item.typeDetailCode === typeVal
       })
       if (obj) {
@@ -186,7 +223,6 @@
   mounted() {
     this.initMap()
     this.switchContent()
-    this.initVideoPoint()
   },
   methods: {
     switchContent: function() {
@@ -423,11 +459,11 @@
         popupStr += '</div>'
       }
 
-      const popup = L.popup().setContent(popupStr)
+      const popup = Leaflet.popup().setContent(popupStr)
 
       if (caseDetail.lng > 0 && caseDetail.lat > 0) {
         // 添加marker
-        const DefaultIcon = L.icon({
+        const DefaultIcon = Leaflet.icon({
           iconUrl: markerIcon,
           iconRetinaUrl: markerIcon2x,
           shadowUrl: markerShadow,
@@ -437,94 +473,155 @@
           tooltipAnchor: [16, -28],
           shadowSize: [41, 41]
         })
-        L.Marker.prototype.options.icon = DefaultIcon
-        L.marker([caseDetail.lat, caseDetail.lng]).addTo(this.map).bindPopup(popup)
+        Leaflet.Marker.prototype.options.icon = DefaultIcon
+        Leaflet.marker([caseDetail.lat, caseDetail.lng]).addTo(this.map).bindPopup(popup)
       }
     },
+    changeTimeTerm() {
+      if (this.timeTerm === '1') {
+        this.caseCounts.labelText = '本月'
+
+        // 本月
+        const thisMon = getToday('yyyy-MM')
+
+        this.query.begTime = thisMon + '-01'
+        this.query.endTime = getDate(1, 'yyyy-MM-dd')
+        this.query4Regist.beginDate = thisMon + '-01'
+        this.query4Regist.endDate = getDate(1, 'yyyy-MM-dd')
+      } else if (this.timeTerm === '2') { // 前三个月
+        this.caseCounts.labelText = '本期'
+
+        this.query.begTime = getDate(-90, 'yyyy-MM-dd')
+        this.query.endTime = getDate(1, 'yyyy-MM-dd')
+        this.query4Regist.beginDate = getDate(-90, 'yyyy-MM-dd')
+        this.query4Regist.endDate = getDate(1, 'yyyy-MM-dd')
+      } else if (this.timeTerm === '3') { // 前半年
+        this.caseCounts.labelText = '本期'
+
+        this.query.begTime = getDate(-180, 'yyyy-MM-dd')
+        this.query.endTime = getDate(1, 'yyyy-MM-dd')
+        this.query4Regist.beginDate = getDate(-180, 'yyyy-MM-dd')
+        this.query4Regist.endDate = getDate(1, 'yyyy-MM-dd')
+      } else if (this.timeTerm === '4') { // 前一年
+        this.caseCounts.labelText = '本期'
+
+        this.query.begTime = getDate(-365, 'yyyy-MM-dd')
+        this.query.endTime = getDate(1, 'yyyy-MM-dd')
+        this.query4Regist.beginDate = getDate(-365, 'yyyy-MM-dd')
+        this.query4Regist.endDate = getDate(1, 'yyyy-MM-dd')
+      }
+
+      this.getCaseCountStatis()
+      this.fetchHighFreqData()
+      this.fetchHandleListData()
+      this.fetchSourceListData()
+    },
     // 初始化地图
     initMap: function() {
-      const map = L.map(this.$refs.mapDiv, {
+      const map = Leaflet.map(this.$refs.mapDiv, {
         minZoom: 3,
         maxZoom: 18,
         center: [27.75962, 116.06021],
         zoom: 15,
         zoomControl: false,
         attributionControl: false,
-        crs: L.CRS.EPSG3857
+        crs: Leaflet.CRS.EPSG3857
       })
       this.map = map // data上需要挂载
       window.map = map
 
-      this.baselayer.push(L.tileLayer(
+      /*
+      this.baselayer.push(Leaflet.tileLayer(
         'https://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
         { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }
       ).addTo(map))
-      this.baselayer.push(L.tileLayer(
+      this.baselayer.push(Leaflet.tileLayer(
         'https://t0.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
         { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }
       ).addTo(map))
-    },
-    // 初始化
-    initVideoPoint: function() {
-      this.videoList.forEach(video => {
-        const vMarker = L.marker([video.lat, video.lng], {
-          icon: videoIcon,
-          target: video
-        }).addTo(this.map)
-
-        vMarker.on('click', function(e) {
-          const videoPlayUrl = e.target.options.target.url
-          const features = 'height=401, width=600, top=100, left=100, toolbar=no, menubar=no, scrollbars=no,resizable=no, location=no, status=no'
-          window.open('/dcms/static/ezPlay/demo/monitor.html?url=' + videoPlayUrl, '视频预览', features)
-        })
-      })
-    },
-    handleCloseEZFrame: function() {
-      this.$refs.ezFrame.stopPlay()
-      const that = this
-      setTimeout(function() {
-        that.videoDialogVisible = false
-      }, 500)
+      */
+      esri.dynamicMapLayer({
+        url: 'http://111.198.10.15:13002/arcgis/rest/services/cr/MapServer'
+      }).addTo(map)
     }
   }
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 
-.staticPanel {
-  height: calc(100vh - 80px);
-  overflow-y: auto;
-}
-.mapPanel {
-  height: calc(100vh - 80px);
-}
-.baseMap {
-  height: calc(100vh - 120px);
-  width: 100%;
-  margin-top: 0;
-  border: 1px solid #DCDCDC;
-  border-radius: 4px;
-}
-.form {
-  background-color: rgba(240, 240, 240, 0.9);
-  position: absolute;
-  top: 42px;
-  width: 100%;
-}
-.rowSelect {
-  margin-bottom: 10px;
-}
-.customLabel {
-  padding: 0 12px 0 0;
-  color: #606266;
-  font-size: 14px;
-}
-.item {
-  margin-bottom: 10px;
-}
-.item .notLastSelect {
-  margin-right: 30px;
-}
+  .staticPanel {
+    height: calc(100vh - 56px);
+    overflow-y: auto;
+  }
+
+  .mapPanel {
+    height: calc(100vh - 56px);
+  }
+
+  .baseMap {
+    height: calc(100vh - 136px);
+    width: 100%;
+    border: 1px solid #DCDCDC;
+    border-radius: 4px;
+  }
+
+  .mapOverLayer {
+    background-color: rgba(240, 240, 240, 0.9);
+    position: absolute;
+    top: 76px;
+    width: calc(75vw - 20px); /* 浮层所占的宽度 */
+    height: 60px;
+    margin-left: 10px;
+    z-index: 999;
+  }
+
+  .form {
+    background-color: rgba(240, 240, 240, 0.9);
+    position: absolute;
+    top: 42px;
+    width: 100%;
+  }
+  .rowSelect {
+    margin-bottom: 10px;
+  }
+  .customLabel {
+    padding: 0 12px 0 0;
+    color: #606266;
+    font-size: 14px;
+  }
+  .item {
+    margin-bottom: 10px;
+  }
+  .item .notLastSelect {
+    margin-right: 30px;
+  }
+
+  .caseStatisBlock {
+    text-align: center;
+    margin: 10px;
+    color: #fff;
+    font-weight: bold;
+    letter-spacing: 1px;
+    border-radius: 4px;
+    padding: 15px 5px 5px;
+
+    .bigNumber {
+      font-size: 2rem;
+    }
+  }
+
+  #today-visitor {
+    background-image: linear-gradient(to right, #ff8fdf, #ff01b4);
+  }
+  #total-alarm {
+    background-image: linear-gradient(to right, #7fbbff, #0078ff);
+  }
+  #online-device {
+    background-image: linear-gradient(to right, #72ff7e, #01a411);
+  }
+  #total-device {
+    background-image: linear-gradient(to right, #ffa800, #ce7e00);
+  }
 </style>
 

diff --git a/src/views/layout/SupLayout.vue b/src/views/layout/SupLayout.vue
index 731ac0c..2a93596 100644
--- a/src/views/layout/SupLayout.vue
+++ b/src/views/layout/SupLayout.vue
@@ -5,7 +5,7 @@
       <!--右半部分-->
       <div>
         <!--主页-->
-        <el-scrollbar>
+        <el-scrollbar wrap-style="overflow-x:hidden;">
           <app-main/>
         </el-scrollbar>
       </div>
@@ -55,7 +55,8 @@
     position: absolute;
     z-index: 999;
   }
-  .el-scrollbar{
-    height: calc(100vh - 80px);
+
+  .el-scrollbar {
+    height: calc(100vh - 60px);
   }
 </style>
diff --git a/src/views/supControl/supControl.vue b/src/views/supControl/supControl.vue
index c067d89..f389738 100644
--- a/src/views/supControl/supControl.vue
+++ b/src/views/supControl/supControl.vue
@@ -6,24 +6,57 @@
       </el-col>
 
       <el-col :span="18" class="mapPanel">
-        <div style="margin: 5px;">
+        <el-row>
+          <el-col :span="6">
+            <div id="today-visitor" class="caseStatisBlock">
+              <span v-text="caseCounts.labelText"/>立案
+              <span class="bigNumber" v-text="caseCounts.register"/>件
+            </div>
+          </el-col>
+
+          <el-col :span="6">
+            <div id="total-alarm" class="caseStatisBlock">
+              本日立案
+              <span class="bigNumber" v-text="caseCounts.todayRegister" />件
+            </div>
+          </el-col>
+
+          <el-col :span="6">
+            <div id="online-device" class="caseStatisBlock">
+              <span v-text="caseCounts.labelText" />处理率
+              <span class="bigNumber" v-text="caseCounts.oughtHandleRate" />%
+            </div>
+          </el-col>
+
+          <el-col :span="6">
+            <div id="total-device" class="caseStatisBlock">
+              <span v-text="caseCounts.labelText" />未处理
+              <span class="bigNumber" v-text="caseCounts.notHandled" />件
+            </div>
+          </el-col>
+        </el-row>
+
+        <el-row :gutter="20">
+          <el-col :span="24" style="padding: 0px 20px">
+            <div v-loading="mapLoading" ref="mapDiv" class="baseMap"/>
+          </el-col>
+        </el-row>
+
+        <!-- 浮层 -->
+        <div class="mapOverLayer">
           <el-row :gutter="20">
-            <el-col :span="6" style="text-align: left;">
+            <el-col :span="6" style="margin-top: 10px; padding-left: 25px; line-height: 40px;">
               <el-radio-group v-model="queryEventSwitch" size="medium" @change="switchContent">
                 <el-radio-button label="0">案卷</el-radio-button>
-<!--                <el-radio-button label="1">人员</el-radio-button>-->
-<!--                <el-radio-button label="2">部件</el-radio-button>-->
+                <el-radio-button label="1">人员</el-radio-button>
+                <el-radio-button label="2">部件</el-radio-button>
               </el-radio-group>
             </el-col>
-          </el-row>
 
-          <div v-loading="mapLoading" ref="mapDiv" class="baseMap"/>
-
-          <el-form v-if="showCaseSelect" ref="dataForm" :model="parts" :label-position="labelPosition" label-width="120px" class="form">
-            <el-row :gutter="20" class="rowSelect">
-              <el-col :span="20">
+            <el-col :span="18" style="margin-top: 10px;">
+              <el-form v-if="showCaseSelect" :label-position="labelPosition" label-width="120px">
                 <el-form-item label="案卷状态" class="item">
-                  <el-select v-model="parts.caseStatusCode" placeholder="选择案卷状态" clearable value="" class="notLastSelect" @change="changeCaseScope()">
+                  <el-select v-model="parts.caseStatusCode" size="medium" placeholder="选择案卷状态" clearable value="" class="notLastSelect" @change="changeCaseScope()">
                     <el-option value="toHandle" label="处置中"/>
                     <el-option value="toDistribute" label="新立案"/>
                     <el-option value="toVerify" label="待核实"/>
@@ -31,53 +64,53 @@
                   </el-select>
 
                   <label class="customLabel">是否超期</label>
-                  <el-radio-group v-model="isOverTime" @change="changeCaseScope()">
+                  <el-radio-group v-model="isOverTime" size="medium" @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-form-item>
-              </el-col>
-            </el-row>
-          </el-form>
+              </el-form>
 
-          <el-form v-if="showPersonSelect" ref="dataForm" :model="parts" :label-position="labelPosition" label-width="120px" class="form" >
-            <el-row :gutter="10" class="rowSelect">
-              <el-col :span="20">
-                <el-form-item label="人员分类" prop="casepersonCode" class="item">
-                  <el-radio-group v-model="casepersonCode" @change="casePerson()">
-                    <el-radio-button label="supervisor">监督员</el-radio-button>
-                    <el-radio-button label="process">处置员</el-radio-button>
-                  </el-radio-group>
-                </el-form-item>
-              </el-col>
-            </el-row>
-          </el-form>
+              <el-form v-if="showPersonSelect" :label-position="labelPosition" label-width="120px">
+                <el-row :gutter="10" class="rowSelect">
+                  <el-col :span="20">
+                    <el-form-item label="人员分类" prop="casepersonCode" class="item">
+                      <el-radio-group v-model="casepersonCode" size="medium" @change="casePerson()">
+                        <el-radio-button label="supervisor">监督员</el-radio-button>
+                        <el-radio-button label="process">处置员</el-radio-button>
+                      </el-radio-group>
+                    </el-form-item>
+                  </el-col>
+                </el-row>
+              </el-form>
 
-          <el-form v-if="showPartsSelect" ref="dataForm" :model="parts" :label-position="labelPosition" label-width="120px" class="form">
-            <el-row :gutter="10" class="rowSelect">
-              <el-col :span="20">
-                <el-form-item label="部件大类" prop="casetypeCode" class="item">
-                  <el-select v-model="parts.casetypeCode" placeholder="选择部件大类" clearable value="" class="notLastSelect">
-                    <el-option
-                      v-for="item in caseTypeOpts"
-                      :key="item.id"
-                      :label="item.typeName"
-                      :value="item.typeCode"/>
-                  </el-select>
+              <el-form v-if="showPartsSelect" :label-position="labelPosition" label-width="120px">
+                <el-row :gutter="10" class="rowSelect">
+                  <el-col :span="20">
+                    <el-form-item label="部件大类" prop="casetypeCode" class="item">
+                      <el-select v-model="parts.casetypeCode" size="medium" placeholder="选择部件大类" clearable class="notLastSelect">
+                        <el-option
+                          v-for="item in caseTypeOpts"
+                          :key="item.id"
+                          :label="item.typeName"
+                          :value="item.typeCode"/>
+                      </el-select>
 
-                  <label class="customLabel">部件小类</label>
-                  <el-select v-model="parts.casetypeDetailCode" placeholder="选择部件小类" clearable value="">
-                    <el-option
-                      v-for="item in caseDetailTypeOpts"
-                      :key="item.id"
-                      :label="item.typeDetailName"
-                      :value="item.typeDetailCode"/>
-                  </el-select>
-                </el-form-item>
-              </el-col>
-            </el-row>
-          </el-form>
+                      <label class="customLabel">部件小类</label>
+                      <el-select v-model="parts.casetypeDetailCode" size="medium" placeholder="选择部件小类" clearable>
+                        <el-option
+                          v-for="item in caseDetailTypeOpts"
+                          :key="item.id"
+                          :label="item.typeDetailName"
+                          :value="item.typeDetailCode"/>
+                      </el-select>
+                    </el-form-item>
+                  </el-col>
+                </el-row>
+              </el-form>
+            </el-col>
+          </el-row>
         </div>
       </el-col>
     </el-row>
@@ -87,16 +120,14 @@
 <script>
 import request from '@/utils/request'
 import SupStatisPanel from '@/views/supControl/SupStatisPanel'
+import { getToday, getDate } from '@/utils/dateutils'
 import { getCaseType, getCaseDetailType } from '@/api/callCase/callCase'
-import L from 'leaflet'
+import Leaflet from 'leaflet'
 import markerIcon from 'leaflet/dist/images/marker-icon.png'
 import markerIcon2x from 'leaflet/dist/images/marker-icon-2x.png'
 import markerShadow from 'leaflet/dist/images/marker-shadow.png'
 
-const videoIcon = L.icon({
-  iconUrl: require('../../assets/global_images/video.png'),
-  iconSize: [40, 40]
-})
+const esri = require('esri-leaflet')
 
 export default {
   name: 'SupControl',
@@ -115,19 +146,25 @@
     return {
       map: '',
       baselayer: [],
-      videoList: [
-        { name: '胜利路中国电信', lng: 116.05584218667022, lat: 27.75863633337256, url: 'ezopen://open.ys7.com/C86485758/1.hd.live' },
-        { name: '宝水中央', lng: 116.06984798429087, lat: 27.75743630778776, url: 'ezopen://open.ys7.com/F22226658/1.hd.live' }
-      ],
       parts: {
         eorc: '2', // 类别
         casetypeCode: '', // 部件大类编码,
         casetypeDetailCode: '', // 部件小类编码
         caseStatusCode: ''
       },
+      timeTerm: '1',
       personQuery: {
         roleTips: ''
       },
+      caseCounts: {
+        labelText: '本月',
+        register: 0, // 本期立案数
+        todayRegister: 0, // 当日立案数
+        totalCheckNum: 0, // 本期总应处置数
+        checkedNum: 0, // 本期处置数
+        oughtHandleRate: 0, // 本期应处置率
+        notHandled: 0 // 本期未处置数
+      },
       casepersonCode: 'supervisor',
       labelPosition: 'right',
       caseTypeOpts: [], // 部件大类下拉框
@@ -175,7 +212,7 @@
     caseTypeDetail(typeVal) {
       this.clearPoint()
 
-      var obj = this.caseDetailTypeOpts.find(function(item) {
+      const obj = this.caseDetailTypeOpts.find(function(item) {
         return item.typeDetailCode === typeVal
       })
       if (obj) {
@@ -186,7 +223,6 @@
   mounted() {
     this.initMap()
     this.switchContent()
-    this.initVideoPoint()
   },
   methods: {
     switchContent: function() {
@@ -423,11 +459,11 @@
         popupStr += '</div>'
       }
 
-      const popup = L.popup().setContent(popupStr)
+      const popup = Leaflet.popup().setContent(popupStr)
 
       if (caseDetail.lng > 0 && caseDetail.lat > 0) {
         // 添加marker
-        const DefaultIcon = L.icon({
+        const DefaultIcon = Leaflet.icon({
           iconUrl: markerIcon,
           iconRetinaUrl: markerIcon2x,
           shadowUrl: markerShadow,
@@ -437,94 +473,155 @@
           tooltipAnchor: [16, -28],
           shadowSize: [41, 41]
         })
-        L.Marker.prototype.options.icon = DefaultIcon
-        L.marker([caseDetail.lat, caseDetail.lng]).addTo(this.map).bindPopup(popup)
+        Leaflet.Marker.prototype.options.icon = DefaultIcon
+        Leaflet.marker([caseDetail.lat, caseDetail.lng]).addTo(this.map).bindPopup(popup)
       }
     },
+    changeTimeTerm() {
+      if (this.timeTerm === '1') {
+        this.caseCounts.labelText = '本月'
+
+        // 本月
+        const thisMon = getToday('yyyy-MM')
+
+        this.query.begTime = thisMon + '-01'
+        this.query.endTime = getDate(1, 'yyyy-MM-dd')
+        this.query4Regist.beginDate = thisMon + '-01'
+        this.query4Regist.endDate = getDate(1, 'yyyy-MM-dd')
+      } else if (this.timeTerm === '2') { // 前三个月
+        this.caseCounts.labelText = '本期'
+
+        this.query.begTime = getDate(-90, 'yyyy-MM-dd')
+        this.query.endTime = getDate(1, 'yyyy-MM-dd')
+        this.query4Regist.beginDate = getDate(-90, 'yyyy-MM-dd')
+        this.query4Regist.endDate = getDate(1, 'yyyy-MM-dd')
+      } else if (this.timeTerm === '3') { // 前半年
+        this.caseCounts.labelText = '本期'
+
+        this.query.begTime = getDate(-180, 'yyyy-MM-dd')
+        this.query.endTime = getDate(1, 'yyyy-MM-dd')
+        this.query4Regist.beginDate = getDate(-180, 'yyyy-MM-dd')
+        this.query4Regist.endDate = getDate(1, 'yyyy-MM-dd')
+      } else if (this.timeTerm === '4') { // 前一年
+        this.caseCounts.labelText = '本期'
+
+        this.query.begTime = getDate(-365, 'yyyy-MM-dd')
+        this.query.endTime = getDate(1, 'yyyy-MM-dd')
+        this.query4Regist.beginDate = getDate(-365, 'yyyy-MM-dd')
+        this.query4Regist.endDate = getDate(1, 'yyyy-MM-dd')
+      }
+
+      this.getCaseCountStatis()
+      this.fetchHighFreqData()
+      this.fetchHandleListData()
+      this.fetchSourceListData()
+    },
     // 初始化地图
     initMap: function() {
-      const map = L.map(this.$refs.mapDiv, {
+      const map = Leaflet.map(this.$refs.mapDiv, {
         minZoom: 3,
         maxZoom: 18,
         center: [27.75962, 116.06021],
         zoom: 15,
         zoomControl: false,
         attributionControl: false,
-        crs: L.CRS.EPSG3857
+        crs: Leaflet.CRS.EPSG3857
       })
       this.map = map // data上需要挂载
       window.map = map
 
-      this.baselayer.push(L.tileLayer(
+      /*
+      this.baselayer.push(Leaflet.tileLayer(
         'https://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
         { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }
       ).addTo(map))
-      this.baselayer.push(L.tileLayer(
+      this.baselayer.push(Leaflet.tileLayer(
         'https://t0.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
         { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }
       ).addTo(map))
-    },
-    // 初始化
-    initVideoPoint: function() {
-      this.videoList.forEach(video => {
-        const vMarker = L.marker([video.lat, video.lng], {
-          icon: videoIcon,
-          target: video
-        }).addTo(this.map)
-
-        vMarker.on('click', function(e) {
-          const videoPlayUrl = e.target.options.target.url
-          const features = 'height=401, width=600, top=100, left=100, toolbar=no, menubar=no, scrollbars=no,resizable=no, location=no, status=no'
-          window.open('/dcms/static/ezPlay/demo/monitor.html?url=' + videoPlayUrl, '视频预览', features)
-        })
-      })
-    },
-    handleCloseEZFrame: function() {
-      this.$refs.ezFrame.stopPlay()
-      const that = this
-      setTimeout(function() {
-        that.videoDialogVisible = false
-      }, 500)
+      */
+      esri.dynamicMapLayer({
+        url: 'http://111.198.10.15:13002/arcgis/rest/services/cr/MapServer'
+      }).addTo(map)
     }
   }
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 
-.staticPanel {
-  height: calc(100vh - 80px);
-  overflow-y: auto;
-}
-.mapPanel {
-  height: calc(100vh - 80px);
-}
-.baseMap {
-  height: calc(100vh - 120px);
-  width: 100%;
-  margin-top: 0;
-  border: 1px solid #DCDCDC;
-  border-radius: 4px;
-}
-.form {
-  background-color: rgba(240, 240, 240, 0.9);
-  position: absolute;
-  top: 42px;
-  width: 100%;
-}
-.rowSelect {
-  margin-bottom: 10px;
-}
-.customLabel {
-  padding: 0 12px 0 0;
-  color: #606266;
-  font-size: 14px;
-}
-.item {
-  margin-bottom: 10px;
-}
-.item .notLastSelect {
-  margin-right: 30px;
-}
+  .staticPanel {
+    height: calc(100vh - 56px);
+    overflow-y: auto;
+  }
+
+  .mapPanel {
+    height: calc(100vh - 56px);
+  }
+
+  .baseMap {
+    height: calc(100vh - 136px);
+    width: 100%;
+    border: 1px solid #DCDCDC;
+    border-radius: 4px;
+  }
+
+  .mapOverLayer {
+    background-color: rgba(240, 240, 240, 0.9);
+    position: absolute;
+    top: 76px;
+    width: calc(75vw - 20px); /* 浮层所占的宽度 */
+    height: 60px;
+    margin-left: 10px;
+    z-index: 999;
+  }
+
+  .form {
+    background-color: rgba(240, 240, 240, 0.9);
+    position: absolute;
+    top: 42px;
+    width: 100%;
+  }
+  .rowSelect {
+    margin-bottom: 10px;
+  }
+  .customLabel {
+    padding: 0 12px 0 0;
+    color: #606266;
+    font-size: 14px;
+  }
+  .item {
+    margin-bottom: 10px;
+  }
+  .item .notLastSelect {
+    margin-right: 30px;
+  }
+
+  .caseStatisBlock {
+    text-align: center;
+    margin: 10px;
+    color: #fff;
+    font-weight: bold;
+    letter-spacing: 1px;
+    border-radius: 4px;
+    padding: 15px 5px 5px;
+
+    .bigNumber {
+      font-size: 2rem;
+    }
+  }
+
+  #today-visitor {
+    background-image: linear-gradient(to right, #ff8fdf, #ff01b4);
+  }
+  #total-alarm {
+    background-image: linear-gradient(to right, #7fbbff, #0078ff);
+  }
+  #online-device {
+    background-image: linear-gradient(to right, #72ff7e, #01a411);
+  }
+  #total-device {
+    background-image: linear-gradient(to right, #ffa800, #ce7e00);
+  }
 </style>
 
diff --git a/src/views/supControl/supStatisPanel.vue b/src/views/supControl/supStatisPanel.vue
index 7259ba0..bf5b7a1 100644
--- a/src/views/supControl/supStatisPanel.vue
+++ b/src/views/supControl/supStatisPanel.vue
@@ -1,54 +1,15 @@
 <template>
-  <div>
-    <div class="panelBlock" style="">
-      <el-row>
-        <div class="subTitle">案卷情况</div>
-        <div class="dashedLine"/>
-      </el-row>
-
-      <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" disabled="true">前三月</el-radio-button>
-            <el-radio-button label="3" disabled="true">前半年</el-radio-button>
-            <el-radio-button label="4" disabled="true">前一年</el-radio-button>
-          </el-radio-group>
-        </div>
-      </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.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>
+  <el-scrollbar class="page-scroll">
+    <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-row>
 
     <div class="panelBlock">
       <el-row>
@@ -88,7 +49,47 @@
         </div>
       </el-row>
     </div>
-  </div>
+  </el-scrollbar>
+<!--  <div>-->
+<!--    <div class="panelBlock" style="">-->
+<!--      <el-row>-->
+<!--        <div class="subTitle">案卷情况</div>-->
+<!--        <div class="dashedLine"/>-->
+<!--      </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.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>-->
 </template>
 
 <script>
@@ -110,12 +111,12 @@
       timeTerm: '1',
       caseCounts: {
         labelText: '本月',
-        register: 320, // 本期立案数
-        todayRegister: 81, // 当日立案数
+        register: 0, // 本期立案数
+        todayRegister: 0, // 当日立案数
         totalCheckNum: 0, // 本期总应处置数
         checkedNum: 0, // 本期处置数
-        oughtHandleRate: 83.1, // 本期应处置率本期未处置数
-        notHandled: 54 //
+        oughtHandleRate: 0, // 本期应处置率
+        notHandled: 0 // 本期未处置数
       },
       query: {
         begTime: getToday('yyyy-MM') + '-01',
@@ -185,13 +186,13 @@
               this.caseCounts.totalCheckNum = dept.totalCheckNum
 
               // 计算
-              // this.caseCounts.notHandled = this.caseCounts.totalCheckNum - this.caseCounts.checkedNum
-              // if (this.caseCounts.totalCheckNum !== '0') {
-              // const rate = this.caseCounts.checkedNum / this.caseCounts.totalCheckNum
-              // this.caseCounts.oughtHandleRate = (rate * 100).toFixed(2)
-              // } else {
-              //   this.caseCounts.oughtHandleRate = 0
-              // }
+              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 * 100).toFixed(2)
+              } else {
+                this.caseCounts.oughtHandleRate = 0
+              }
             }
           })
           series.push(seriesToDispatch)
@@ -210,7 +211,7 @@
         params: this.query4Regist
       }).then(response => {
         if (response.code === 200) {
-          // this.caseCounts.register = response.data.register
+          this.caseCounts.register = response.data.register
         }
       })
     },
@@ -221,7 +222,7 @@
         params: this.query4Today
       }).then(response => {
         if (response.code === 200) {
-          // this.caseCounts.todayRegister = response.data.register
+          this.caseCounts.todayRegister = response.data.register
         }
       })
     },
@@ -269,6 +270,14 @@
 </script>
 
 <style scoped>
+  .page-scroll {
+    height: 100%;
+  }
+
+  .page-scroll >>> .el-scrollbar__wrap {
+    overflow-x: hidden;
+  }
+
   .panelBlock {
     background-color: rgb(47, 56, 86);
     margin: 2px;