diff --git a/src/views/supControl/supControl.vue b/src/views/supControl/supControl.vue
index 18ccc34..9f41313 100644
--- a/src/views/supControl/supControl.vue
+++ b/src/views/supControl/supControl.vue
@@ -1,91 +1,84 @@
 <template>
   <div>
     <el-row>
-      <el-col :span="6">
+      <el-col :span="6" class="staticPanel">
         <sup-statis-panel />
       </el-col>
 
       <el-col :span="18">
-        <el-row :gutter="20">
-          <el-col :span="6" style="text-align: center;">
-            <el-radio-group v-model="queryEventSwitch" size="medium" @change="switchContent">
-              <el-radio-button label="0">案卷</el-radio-button>
-              <el-radio-button label="1">人员</el-radio-button>
-              <el-radio-button label="2">部件</el-radio-button>
-            </el-radio-group>
-          </el-col>
-        </el-row>
-
-        <div v-loading="mapLoading" ref="mapDiv" class="baseMap"/>
-
-        <el-form v-if="showPartsSelect" ref="dataForm" :model="parts" :label-position="labelPosition" label-width="120px" class="form" >
-          <el-row :gutter="10">
-            <el-col :span="20">
-              <el-form-item label="部件大类" prop="casetypeCode">
-                <el-select v-model="parts.casetypeCode" placeholder="选择部件大类" clearable value="">
-                  <el-option
-                    v-for="item in caseTypeOpts"
-                    :key="item.id"
-                    :label="item.typeName"
-                    :value="item.typeCode"/>
-                </el-select>
-              </el-form-item>
-            </el-col>
-          </el-row>
-          <el-row :gutter="10">
-            <el-col :span="20">
-              <el-form-item label="部件小类" prop="casetypeDetailCode">
-                <el-select v-model="parts.casetypeDetailCode" placeholder="选择部件小类" clearable value="">
-                  <el-option
-                    v-for="item in caseDetailTypeOpts"
-                    :key="item.id"
-                    :label="item.typeDetailName"
-                    :value="item.typeDetailCode"/>
-                </el-select>
-              </el-form-item>
-            </el-col>
-          </el-row>
-        </el-form>
-        <el-form v-if="showPersonSelect" ref="dataForm" :model="parts" :label-position="labelPosition" label-width="120px" class="form" >
-          <el-row :gutter="10">
-            <el-col :span="20">
-              <el-form-item label="人员分类" prop="casepersonCode">
-                <el-select v-model="casepersonCode" placeholder="选择人员分类" clearable value="">
-                  <el-option
-                    v-for="item in casePersonOpts"
-                    :key="item.value"
-                    :label="item.label"
-                    :value="item.value"/>
-                </el-select>
-              </el-form-item>
-            </el-col>
-          </el-row>
-        </el-form>
-
-        <el-form v-if="showCaseSelect" ref="dataForm" :model="parts" :label-position="labelPosition" label-width="120px" class="form" >
-          <el-row :gutter="10">
-            <el-col :span="20">
-              <el-form-item label="案卷状态" prop="caseStatus">
-                <el-select v-model="parts.caseStatusCode" placeholder="选择案卷状态" clearable value="" @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>
+        <div style="margin: 5px;">
+          <el-row :gutter="20">
+            <el-col :span="6" style="text-align: left;">
+              <el-radio-group v-model="queryEventSwitch" size="medium" @change="switchContent">
+                <el-radio-button label="0">案卷</el-radio-button>
+                <el-radio-button label="1">人员</el-radio-button>
+                <el-radio-button label="2">部件</el-radio-button>
               </el-radio-group>
             </el-col>
           </el-row>
-        </el-form>
+
+          <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-form-item label="案卷状态" class="item">
+                  <el-select v-model="parts.caseStatusCode" placeholder="选择案卷状态" clearable value="" class="notLastSelect" @change="changeCaseScope()">
+                    <el-option value="toHandle" label="处置中"/>
+                    <el-option value="toDistribute" label="新立案"/>
+                    <el-option value="toVerify" label="待核实"/>
+                    <el-option value="toCheck" label="待核查"/>
+                  </el-select>
+
+                  <label class="customLabel">是否超期</label>
+                  <el-radio-group v-model="isOverTime" @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 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="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>
+
+                  <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>
+        </div>
       </el-col>
     </el-row>
   </div>
@@ -114,7 +107,7 @@
 ]
 
 const caseIcon = [
-  '/static/images/well/0100.png', '/static/images/well/0101.png'
+  '/static/images/case/status_dealing.png', '/static/images/case/status_done.png'
 ]
 
 export default {
@@ -169,7 +162,7 @@
       personQuery: {
         roleTips: ''
       },
-      casepersonCode: '',
+      casepersonCode: 'supervisor',
       labelPosition: 'right',
       caseTypeOpts: [], // 部件大类下拉框
       casePersonOpts: [{
@@ -207,9 +200,6 @@
     },
     caseTypeDetail() {
       return this.parts.casetypeDetailCode
-    },
-    casePerson() {
-      return this.casepersonCode
     }
   },
   watch: {
@@ -225,14 +215,6 @@
       if (obj) {
         this.addPartsPoints(obj.typeDetailName)
       }
-    },
-    casePerson(typeVal) {
-      this.clearPoint()
-
-      this.personQuery.roleTips = typeVal
-      if (typeVal !== '') {
-        this.addPersonPoints()
-      }
     }
   },
   mounted() {
@@ -252,6 +234,7 @@
         this.showPersonSelect = true
         this.showPartsSelect = false
         this.showCaseSelect = false
+        this.casePerson()
       } else if (this.queryEventSwitch === '0') {
         this.showCaseSelect = true
         this.showPartsSelect = false
@@ -387,6 +370,15 @@
         }
       })
     },
+    // 查询人员
+    casePerson() {
+      this.clearPoint()
+
+      this.personQuery.roleTips = this.casepersonCode
+      if (this.casepersonCode !== '') {
+        this.addPersonPoints()
+      }
+    },
     // 级联查询部件大类
     cascaderCaseType: function(eorc) {
       // 前两行的作用是清除部件大类的当前值和select中的所有选项
@@ -447,7 +439,7 @@
       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 marker = new that.esriObj.PictureMarkerSymbol(icon, 10, 15)
           const graphic = new that.esriObj.Graphic({
             geometry: point,
             symbol: marker,
@@ -609,6 +601,7 @@
         center: [116.597, 28.24], // 初始显示的地图中心点，经纬度
         zoom: 3 // 当前地图缩放等级
       })
+      this.view.ui._removeComponents(['zoom'])
 
       this.addBjLayers()
       this.addGraphicLayers()
@@ -701,19 +694,53 @@
           // 案卷定位
           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
+            const imgUrl = process.env.BASE_API + '/static/'
+
+            // 向后台再查询一次
+            const id = feature.attributes.id
+            request({
+              url: 'case/detail/' + id,
+              method: 'get'
+            }).then(response => {
+              if (response.code === 200) {
+                const caseDetail = response.data[0]
+
+                let detailTableHtml = '<table>'
+                detailTableHtml += '<tr><td colspan="2" width="370px">' + '案卷状态：' + caseDetail.caseStateName + '</td></tr>'
+                detailTableHtml += '<tr><td colspan="2">' + '案卷类别：' + caseDetail.eorcName + '/' + caseDetail.casetypeName + '/' + caseDetail.casetypeDetailName + '</td></tr>'
+                detailTableHtml += '<tr><td colspan="2">' + '上报时间：' + caseDetail.createTime + '</td></tr>'
+                detailTableHtml += '<tr><td colspan="2">' + '案卷地点：' + caseDetail.fieldintro + '</td></tr>'
+                detailTableHtml += '<tr><td colspan="2">' + '案卷情况：' + caseDetail.description + '</td></tr>'
+                if (caseDetail.fileIdVerify !== '') {
+                  const verify = caseDetail.fileIdVerify.split(',')
+                  detailTableHtml += '<tr><td colspan="2">上报图片</td></tr>'
+                  detailTableHtml += '<tr><td width="180px"><img width="180px" height="200px" src="' + imgUrl + verify[0] + '"></td>'
+                  if (verify[1] !== '') {
+                    detailTableHtml += '<td><img width="180px" height="200px" src="' + imgUrl + verify[1] + '"></td></tr>'
+                  } else {
+                    detailTableHtml += '<td></td></tr>'
+                  }
+                }
+                if (caseDetail.fileIdProcess !== '') {
+                  const process = caseDetail.fileIdProcess.split(',')
+                  detailTableHtml += '<tr><td colspan="2">处置图片</td></tr>'
+                  detailTableHtml += '<tr><td width="180px"><img width="180px" height="200px" src="' + imgUrl + process[0] + '"></td>'
+                  if (process[1] !== '') {
+                    detailTableHtml += '<td><img width="180px" height="200px" src="' + imgUrl + process[1] + '"></td></tr>'
+                  } else {
+                    detailTableHtml += '<td></td></tr>'
+                  }
+                }
+                detailTableHtml += '</table>'
+
+                // 2弹出气泡
+                that.view.popup.open({
+                  title: caseDetail.caseid,
+                  content: detailTableHtml,
+                  location: event.mapPoint
+                })
+              }
             })
           })
         }
@@ -772,17 +799,39 @@
 <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';*/
-  .baseMap {
-    height:80vh;
+
+   .staticPanel {
+     height: 85vh;
+     overflow-y: auto;
+   }
+   .baseMap {
+    height:85vh;
     width: 100%;
     margin-top: 0px;
     border: 1px solid #DCDCDC;
     border-radius: 4px;
   }
   .form {
-    position: fixed;
-    z-index: 9999;
-    top: 190px;
+    background-color: rgba(240, 240, 240, 0.9);
+    position: absolute;
+    /*margin-left: 80px;*/
+    /*z-index: 9999;*/
+    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;
   }
 </style>
 

diff --git a/src/views/supControl/supControl.vue b/src/views/supControl/supControl.vue
index 18ccc34..9f41313 100644
--- a/src/views/supControl/supControl.vue
+++ b/src/views/supControl/supControl.vue
@@ -1,91 +1,84 @@
 <template>
   <div>
     <el-row>
-      <el-col :span="6">
+      <el-col :span="6" class="staticPanel">
         <sup-statis-panel />
       </el-col>
 
       <el-col :span="18">
-        <el-row :gutter="20">
-          <el-col :span="6" style="text-align: center;">
-            <el-radio-group v-model="queryEventSwitch" size="medium" @change="switchContent">
-              <el-radio-button label="0">案卷</el-radio-button>
-              <el-radio-button label="1">人员</el-radio-button>
-              <el-radio-button label="2">部件</el-radio-button>
-            </el-radio-group>
-          </el-col>
-        </el-row>
-
-        <div v-loading="mapLoading" ref="mapDiv" class="baseMap"/>
-
-        <el-form v-if="showPartsSelect" ref="dataForm" :model="parts" :label-position="labelPosition" label-width="120px" class="form" >
-          <el-row :gutter="10">
-            <el-col :span="20">
-              <el-form-item label="部件大类" prop="casetypeCode">
-                <el-select v-model="parts.casetypeCode" placeholder="选择部件大类" clearable value="">
-                  <el-option
-                    v-for="item in caseTypeOpts"
-                    :key="item.id"
-                    :label="item.typeName"
-                    :value="item.typeCode"/>
-                </el-select>
-              </el-form-item>
-            </el-col>
-          </el-row>
-          <el-row :gutter="10">
-            <el-col :span="20">
-              <el-form-item label="部件小类" prop="casetypeDetailCode">
-                <el-select v-model="parts.casetypeDetailCode" placeholder="选择部件小类" clearable value="">
-                  <el-option
-                    v-for="item in caseDetailTypeOpts"
-                    :key="item.id"
-                    :label="item.typeDetailName"
-                    :value="item.typeDetailCode"/>
-                </el-select>
-              </el-form-item>
-            </el-col>
-          </el-row>
-        </el-form>
-        <el-form v-if="showPersonSelect" ref="dataForm" :model="parts" :label-position="labelPosition" label-width="120px" class="form" >
-          <el-row :gutter="10">
-            <el-col :span="20">
-              <el-form-item label="人员分类" prop="casepersonCode">
-                <el-select v-model="casepersonCode" placeholder="选择人员分类" clearable value="">
-                  <el-option
-                    v-for="item in casePersonOpts"
-                    :key="item.value"
-                    :label="item.label"
-                    :value="item.value"/>
-                </el-select>
-              </el-form-item>
-            </el-col>
-          </el-row>
-        </el-form>
-
-        <el-form v-if="showCaseSelect" ref="dataForm" :model="parts" :label-position="labelPosition" label-width="120px" class="form" >
-          <el-row :gutter="10">
-            <el-col :span="20">
-              <el-form-item label="案卷状态" prop="caseStatus">
-                <el-select v-model="parts.caseStatusCode" placeholder="选择案卷状态" clearable value="" @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>
+        <div style="margin: 5px;">
+          <el-row :gutter="20">
+            <el-col :span="6" style="text-align: left;">
+              <el-radio-group v-model="queryEventSwitch" size="medium" @change="switchContent">
+                <el-radio-button label="0">案卷</el-radio-button>
+                <el-radio-button label="1">人员</el-radio-button>
+                <el-radio-button label="2">部件</el-radio-button>
               </el-radio-group>
             </el-col>
           </el-row>
-        </el-form>
+
+          <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-form-item label="案卷状态" class="item">
+                  <el-select v-model="parts.caseStatusCode" placeholder="选择案卷状态" clearable value="" class="notLastSelect" @change="changeCaseScope()">
+                    <el-option value="toHandle" label="处置中"/>
+                    <el-option value="toDistribute" label="新立案"/>
+                    <el-option value="toVerify" label="待核实"/>
+                    <el-option value="toCheck" label="待核查"/>
+                  </el-select>
+
+                  <label class="customLabel">是否超期</label>
+                  <el-radio-group v-model="isOverTime" @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 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="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>
+
+                  <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>
+        </div>
       </el-col>
     </el-row>
   </div>
@@ -114,7 +107,7 @@
 ]
 
 const caseIcon = [
-  '/static/images/well/0100.png', '/static/images/well/0101.png'
+  '/static/images/case/status_dealing.png', '/static/images/case/status_done.png'
 ]
 
 export default {
@@ -169,7 +162,7 @@
       personQuery: {
         roleTips: ''
       },
-      casepersonCode: '',
+      casepersonCode: 'supervisor',
       labelPosition: 'right',
       caseTypeOpts: [], // 部件大类下拉框
       casePersonOpts: [{
@@ -207,9 +200,6 @@
     },
     caseTypeDetail() {
       return this.parts.casetypeDetailCode
-    },
-    casePerson() {
-      return this.casepersonCode
     }
   },
   watch: {
@@ -225,14 +215,6 @@
       if (obj) {
         this.addPartsPoints(obj.typeDetailName)
       }
-    },
-    casePerson(typeVal) {
-      this.clearPoint()
-
-      this.personQuery.roleTips = typeVal
-      if (typeVal !== '') {
-        this.addPersonPoints()
-      }
     }
   },
   mounted() {
@@ -252,6 +234,7 @@
         this.showPersonSelect = true
         this.showPartsSelect = false
         this.showCaseSelect = false
+        this.casePerson()
       } else if (this.queryEventSwitch === '0') {
         this.showCaseSelect = true
         this.showPartsSelect = false
@@ -387,6 +370,15 @@
         }
       })
     },
+    // 查询人员
+    casePerson() {
+      this.clearPoint()
+
+      this.personQuery.roleTips = this.casepersonCode
+      if (this.casepersonCode !== '') {
+        this.addPersonPoints()
+      }
+    },
     // 级联查询部件大类
     cascaderCaseType: function(eorc) {
       // 前两行的作用是清除部件大类的当前值和select中的所有选项
@@ -447,7 +439,7 @@
       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 marker = new that.esriObj.PictureMarkerSymbol(icon, 10, 15)
           const graphic = new that.esriObj.Graphic({
             geometry: point,
             symbol: marker,
@@ -609,6 +601,7 @@
         center: [116.597, 28.24], // 初始显示的地图中心点，经纬度
         zoom: 3 // 当前地图缩放等级
       })
+      this.view.ui._removeComponents(['zoom'])
 
       this.addBjLayers()
       this.addGraphicLayers()
@@ -701,19 +694,53 @@
           // 案卷定位
           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
+            const imgUrl = process.env.BASE_API + '/static/'
+
+            // 向后台再查询一次
+            const id = feature.attributes.id
+            request({
+              url: 'case/detail/' + id,
+              method: 'get'
+            }).then(response => {
+              if (response.code === 200) {
+                const caseDetail = response.data[0]
+
+                let detailTableHtml = '<table>'
+                detailTableHtml += '<tr><td colspan="2" width="370px">' + '案卷状态：' + caseDetail.caseStateName + '</td></tr>'
+                detailTableHtml += '<tr><td colspan="2">' + '案卷类别：' + caseDetail.eorcName + '/' + caseDetail.casetypeName + '/' + caseDetail.casetypeDetailName + '</td></tr>'
+                detailTableHtml += '<tr><td colspan="2">' + '上报时间：' + caseDetail.createTime + '</td></tr>'
+                detailTableHtml += '<tr><td colspan="2">' + '案卷地点：' + caseDetail.fieldintro + '</td></tr>'
+                detailTableHtml += '<tr><td colspan="2">' + '案卷情况：' + caseDetail.description + '</td></tr>'
+                if (caseDetail.fileIdVerify !== '') {
+                  const verify = caseDetail.fileIdVerify.split(',')
+                  detailTableHtml += '<tr><td colspan="2">上报图片</td></tr>'
+                  detailTableHtml += '<tr><td width="180px"><img width="180px" height="200px" src="' + imgUrl + verify[0] + '"></td>'
+                  if (verify[1] !== '') {
+                    detailTableHtml += '<td><img width="180px" height="200px" src="' + imgUrl + verify[1] + '"></td></tr>'
+                  } else {
+                    detailTableHtml += '<td></td></tr>'
+                  }
+                }
+                if (caseDetail.fileIdProcess !== '') {
+                  const process = caseDetail.fileIdProcess.split(',')
+                  detailTableHtml += '<tr><td colspan="2">处置图片</td></tr>'
+                  detailTableHtml += '<tr><td width="180px"><img width="180px" height="200px" src="' + imgUrl + process[0] + '"></td>'
+                  if (process[1] !== '') {
+                    detailTableHtml += '<td><img width="180px" height="200px" src="' + imgUrl + process[1] + '"></td></tr>'
+                  } else {
+                    detailTableHtml += '<td></td></tr>'
+                  }
+                }
+                detailTableHtml += '</table>'
+
+                // 2弹出气泡
+                that.view.popup.open({
+                  title: caseDetail.caseid,
+                  content: detailTableHtml,
+                  location: event.mapPoint
+                })
+              }
             })
           })
         }
@@ -772,17 +799,39 @@
 <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';*/
-  .baseMap {
-    height:80vh;
+
+   .staticPanel {
+     height: 85vh;
+     overflow-y: auto;
+   }
+   .baseMap {
+    height:85vh;
     width: 100%;
     margin-top: 0px;
     border: 1px solid #DCDCDC;
     border-radius: 4px;
   }
   .form {
-    position: fixed;
-    z-index: 9999;
-    top: 190px;
+    background-color: rgba(240, 240, 240, 0.9);
+    position: absolute;
+    /*margin-left: 80px;*/
+    /*z-index: 9999;*/
+    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;
   }
 </style>
 
diff --git a/src/views/supControl/supStatisPanel.vue b/src/views/supControl/supStatisPanel.vue
index f476912..85934ef 100644
--- a/src/views/supControl/supStatisPanel.vue
+++ b/src/views/supControl/supStatisPanel.vue
@@ -271,8 +271,8 @@
 <style scoped>
   .panelBlock {
     background-color: rgb(47, 56, 86);
-    margin: 5px;
-    padding-bottom: 20px;
+    margin: 2px;
+    padding-bottom: 15px;
   }
 
   .dashedLine {

diff --git a/src/views/supControl/supControl.vue b/src/views/supControl/supControl.vue
index 18ccc34..9f41313 100644
--- a/src/views/supControl/supControl.vue
+++ b/src/views/supControl/supControl.vue
@@ -1,91 +1,84 @@
 <template>
   <div>
     <el-row>
-      <el-col :span="6">
+      <el-col :span="6" class="staticPanel">
         <sup-statis-panel />
       </el-col>
 
       <el-col :span="18">
-        <el-row :gutter="20">
-          <el-col :span="6" style="text-align: center;">
-            <el-radio-group v-model="queryEventSwitch" size="medium" @change="switchContent">
-              <el-radio-button label="0">案卷</el-radio-button>
-              <el-radio-button label="1">人员</el-radio-button>
-              <el-radio-button label="2">部件</el-radio-button>
-            </el-radio-group>
-          </el-col>
-        </el-row>
-
-        <div v-loading="mapLoading" ref="mapDiv" class="baseMap"/>
-
-        <el-form v-if="showPartsSelect" ref="dataForm" :model="parts" :label-position="labelPosition" label-width="120px" class="form" >
-          <el-row :gutter="10">
-            <el-col :span="20">
-              <el-form-item label="部件大类" prop="casetypeCode">
-                <el-select v-model="parts.casetypeCode" placeholder="选择部件大类" clearable value="">
-                  <el-option
-                    v-for="item in caseTypeOpts"
-                    :key="item.id"
-                    :label="item.typeName"
-                    :value="item.typeCode"/>
-                </el-select>
-              </el-form-item>
-            </el-col>
-          </el-row>
-          <el-row :gutter="10">
-            <el-col :span="20">
-              <el-form-item label="部件小类" prop="casetypeDetailCode">
-                <el-select v-model="parts.casetypeDetailCode" placeholder="选择部件小类" clearable value="">
-                  <el-option
-                    v-for="item in caseDetailTypeOpts"
-                    :key="item.id"
-                    :label="item.typeDetailName"
-                    :value="item.typeDetailCode"/>
-                </el-select>
-              </el-form-item>
-            </el-col>
-          </el-row>
-        </el-form>
-        <el-form v-if="showPersonSelect" ref="dataForm" :model="parts" :label-position="labelPosition" label-width="120px" class="form" >
-          <el-row :gutter="10">
-            <el-col :span="20">
-              <el-form-item label="人员分类" prop="casepersonCode">
-                <el-select v-model="casepersonCode" placeholder="选择人员分类" clearable value="">
-                  <el-option
-                    v-for="item in casePersonOpts"
-                    :key="item.value"
-                    :label="item.label"
-                    :value="item.value"/>
-                </el-select>
-              </el-form-item>
-            </el-col>
-          </el-row>
-        </el-form>
-
-        <el-form v-if="showCaseSelect" ref="dataForm" :model="parts" :label-position="labelPosition" label-width="120px" class="form" >
-          <el-row :gutter="10">
-            <el-col :span="20">
-              <el-form-item label="案卷状态" prop="caseStatus">
-                <el-select v-model="parts.caseStatusCode" placeholder="选择案卷状态" clearable value="" @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>
+        <div style="margin: 5px;">
+          <el-row :gutter="20">
+            <el-col :span="6" style="text-align: left;">
+              <el-radio-group v-model="queryEventSwitch" size="medium" @change="switchContent">
+                <el-radio-button label="0">案卷</el-radio-button>
+                <el-radio-button label="1">人员</el-radio-button>
+                <el-radio-button label="2">部件</el-radio-button>
               </el-radio-group>
             </el-col>
           </el-row>
-        </el-form>
+
+          <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-form-item label="案卷状态" class="item">
+                  <el-select v-model="parts.caseStatusCode" placeholder="选择案卷状态" clearable value="" class="notLastSelect" @change="changeCaseScope()">
+                    <el-option value="toHandle" label="处置中"/>
+                    <el-option value="toDistribute" label="新立案"/>
+                    <el-option value="toVerify" label="待核实"/>
+                    <el-option value="toCheck" label="待核查"/>
+                  </el-select>
+
+                  <label class="customLabel">是否超期</label>
+                  <el-radio-group v-model="isOverTime" @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 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="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>
+
+                  <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>
+        </div>
       </el-col>
     </el-row>
   </div>
@@ -114,7 +107,7 @@
 ]
 
 const caseIcon = [
-  '/static/images/well/0100.png', '/static/images/well/0101.png'
+  '/static/images/case/status_dealing.png', '/static/images/case/status_done.png'
 ]
 
 export default {
@@ -169,7 +162,7 @@
       personQuery: {
         roleTips: ''
       },
-      casepersonCode: '',
+      casepersonCode: 'supervisor',
       labelPosition: 'right',
       caseTypeOpts: [], // 部件大类下拉框
       casePersonOpts: [{
@@ -207,9 +200,6 @@
     },
     caseTypeDetail() {
       return this.parts.casetypeDetailCode
-    },
-    casePerson() {
-      return this.casepersonCode
     }
   },
   watch: {
@@ -225,14 +215,6 @@
       if (obj) {
         this.addPartsPoints(obj.typeDetailName)
       }
-    },
-    casePerson(typeVal) {
-      this.clearPoint()
-
-      this.personQuery.roleTips = typeVal
-      if (typeVal !== '') {
-        this.addPersonPoints()
-      }
     }
   },
   mounted() {
@@ -252,6 +234,7 @@
         this.showPersonSelect = true
         this.showPartsSelect = false
         this.showCaseSelect = false
+        this.casePerson()
       } else if (this.queryEventSwitch === '0') {
         this.showCaseSelect = true
         this.showPartsSelect = false
@@ -387,6 +370,15 @@
         }
       })
     },
+    // 查询人员
+    casePerson() {
+      this.clearPoint()
+
+      this.personQuery.roleTips = this.casepersonCode
+      if (this.casepersonCode !== '') {
+        this.addPersonPoints()
+      }
+    },
     // 级联查询部件大类
     cascaderCaseType: function(eorc) {
       // 前两行的作用是清除部件大类的当前值和select中的所有选项
@@ -447,7 +439,7 @@
       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 marker = new that.esriObj.PictureMarkerSymbol(icon, 10, 15)
           const graphic = new that.esriObj.Graphic({
             geometry: point,
             symbol: marker,
@@ -609,6 +601,7 @@
         center: [116.597, 28.24], // 初始显示的地图中心点，经纬度
         zoom: 3 // 当前地图缩放等级
       })
+      this.view.ui._removeComponents(['zoom'])
 
       this.addBjLayers()
       this.addGraphicLayers()
@@ -701,19 +694,53 @@
           // 案卷定位
           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
+            const imgUrl = process.env.BASE_API + '/static/'
+
+            // 向后台再查询一次
+            const id = feature.attributes.id
+            request({
+              url: 'case/detail/' + id,
+              method: 'get'
+            }).then(response => {
+              if (response.code === 200) {
+                const caseDetail = response.data[0]
+
+                let detailTableHtml = '<table>'
+                detailTableHtml += '<tr><td colspan="2" width="370px">' + '案卷状态：' + caseDetail.caseStateName + '</td></tr>'
+                detailTableHtml += '<tr><td colspan="2">' + '案卷类别：' + caseDetail.eorcName + '/' + caseDetail.casetypeName + '/' + caseDetail.casetypeDetailName + '</td></tr>'
+                detailTableHtml += '<tr><td colspan="2">' + '上报时间：' + caseDetail.createTime + '</td></tr>'
+                detailTableHtml += '<tr><td colspan="2">' + '案卷地点：' + caseDetail.fieldintro + '</td></tr>'
+                detailTableHtml += '<tr><td colspan="2">' + '案卷情况：' + caseDetail.description + '</td></tr>'
+                if (caseDetail.fileIdVerify !== '') {
+                  const verify = caseDetail.fileIdVerify.split(',')
+                  detailTableHtml += '<tr><td colspan="2">上报图片</td></tr>'
+                  detailTableHtml += '<tr><td width="180px"><img width="180px" height="200px" src="' + imgUrl + verify[0] + '"></td>'
+                  if (verify[1] !== '') {
+                    detailTableHtml += '<td><img width="180px" height="200px" src="' + imgUrl + verify[1] + '"></td></tr>'
+                  } else {
+                    detailTableHtml += '<td></td></tr>'
+                  }
+                }
+                if (caseDetail.fileIdProcess !== '') {
+                  const process = caseDetail.fileIdProcess.split(',')
+                  detailTableHtml += '<tr><td colspan="2">处置图片</td></tr>'
+                  detailTableHtml += '<tr><td width="180px"><img width="180px" height="200px" src="' + imgUrl + process[0] + '"></td>'
+                  if (process[1] !== '') {
+                    detailTableHtml += '<td><img width="180px" height="200px" src="' + imgUrl + process[1] + '"></td></tr>'
+                  } else {
+                    detailTableHtml += '<td></td></tr>'
+                  }
+                }
+                detailTableHtml += '</table>'
+
+                // 2弹出气泡
+                that.view.popup.open({
+                  title: caseDetail.caseid,
+                  content: detailTableHtml,
+                  location: event.mapPoint
+                })
+              }
             })
           })
         }
@@ -772,17 +799,39 @@
 <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';*/
-  .baseMap {
-    height:80vh;
+
+   .staticPanel {
+     height: 85vh;
+     overflow-y: auto;
+   }
+   .baseMap {
+    height:85vh;
     width: 100%;
     margin-top: 0px;
     border: 1px solid #DCDCDC;
     border-radius: 4px;
   }
   .form {
-    position: fixed;
-    z-index: 9999;
-    top: 190px;
+    background-color: rgba(240, 240, 240, 0.9);
+    position: absolute;
+    /*margin-left: 80px;*/
+    /*z-index: 9999;*/
+    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;
   }
 </style>
 
diff --git a/src/views/supControl/supStatisPanel.vue b/src/views/supControl/supStatisPanel.vue
index f476912..85934ef 100644
--- a/src/views/supControl/supStatisPanel.vue
+++ b/src/views/supControl/supStatisPanel.vue
@@ -271,8 +271,8 @@
 <style scoped>
   .panelBlock {
     background-color: rgb(47, 56, 86);
-    margin: 5px;
-    padding-bottom: 20px;
+    margin: 2px;
+    padding-bottom: 15px;
   }
 
   .dashedLine {
diff --git a/static/images/case/status_dealing.png b/static/images/case/status_dealing.png
new file mode 100644
index 0000000..f553650
--- /dev/null
+++ b/static/images/case/status_dealing.png
Binary files differ

diff --git a/src/views/supControl/supControl.vue b/src/views/supControl/supControl.vue
index 18ccc34..9f41313 100644
--- a/src/views/supControl/supControl.vue
+++ b/src/views/supControl/supControl.vue
@@ -1,91 +1,84 @@
 <template>
   <div>
     <el-row>
-      <el-col :span="6">
+      <el-col :span="6" class="staticPanel">
         <sup-statis-panel />
       </el-col>
 
       <el-col :span="18">
-        <el-row :gutter="20">
-          <el-col :span="6" style="text-align: center;">
-            <el-radio-group v-model="queryEventSwitch" size="medium" @change="switchContent">
-              <el-radio-button label="0">案卷</el-radio-button>
-              <el-radio-button label="1">人员</el-radio-button>
-              <el-radio-button label="2">部件</el-radio-button>
-            </el-radio-group>
-          </el-col>
-        </el-row>
-
-        <div v-loading="mapLoading" ref="mapDiv" class="baseMap"/>
-
-        <el-form v-if="showPartsSelect" ref="dataForm" :model="parts" :label-position="labelPosition" label-width="120px" class="form" >
-          <el-row :gutter="10">
-            <el-col :span="20">
-              <el-form-item label="部件大类" prop="casetypeCode">
-                <el-select v-model="parts.casetypeCode" placeholder="选择部件大类" clearable value="">
-                  <el-option
-                    v-for="item in caseTypeOpts"
-                    :key="item.id"
-                    :label="item.typeName"
-                    :value="item.typeCode"/>
-                </el-select>
-              </el-form-item>
-            </el-col>
-          </el-row>
-          <el-row :gutter="10">
-            <el-col :span="20">
-              <el-form-item label="部件小类" prop="casetypeDetailCode">
-                <el-select v-model="parts.casetypeDetailCode" placeholder="选择部件小类" clearable value="">
-                  <el-option
-                    v-for="item in caseDetailTypeOpts"
-                    :key="item.id"
-                    :label="item.typeDetailName"
-                    :value="item.typeDetailCode"/>
-                </el-select>
-              </el-form-item>
-            </el-col>
-          </el-row>
-        </el-form>
-        <el-form v-if="showPersonSelect" ref="dataForm" :model="parts" :label-position="labelPosition" label-width="120px" class="form" >
-          <el-row :gutter="10">
-            <el-col :span="20">
-              <el-form-item label="人员分类" prop="casepersonCode">
-                <el-select v-model="casepersonCode" placeholder="选择人员分类" clearable value="">
-                  <el-option
-                    v-for="item in casePersonOpts"
-                    :key="item.value"
-                    :label="item.label"
-                    :value="item.value"/>
-                </el-select>
-              </el-form-item>
-            </el-col>
-          </el-row>
-        </el-form>
-
-        <el-form v-if="showCaseSelect" ref="dataForm" :model="parts" :label-position="labelPosition" label-width="120px" class="form" >
-          <el-row :gutter="10">
-            <el-col :span="20">
-              <el-form-item label="案卷状态" prop="caseStatus">
-                <el-select v-model="parts.caseStatusCode" placeholder="选择案卷状态" clearable value="" @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>
+        <div style="margin: 5px;">
+          <el-row :gutter="20">
+            <el-col :span="6" style="text-align: left;">
+              <el-radio-group v-model="queryEventSwitch" size="medium" @change="switchContent">
+                <el-radio-button label="0">案卷</el-radio-button>
+                <el-radio-button label="1">人员</el-radio-button>
+                <el-radio-button label="2">部件</el-radio-button>
               </el-radio-group>
             </el-col>
           </el-row>
-        </el-form>
+
+          <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-form-item label="案卷状态" class="item">
+                  <el-select v-model="parts.caseStatusCode" placeholder="选择案卷状态" clearable value="" class="notLastSelect" @change="changeCaseScope()">
+                    <el-option value="toHandle" label="处置中"/>
+                    <el-option value="toDistribute" label="新立案"/>
+                    <el-option value="toVerify" label="待核实"/>
+                    <el-option value="toCheck" label="待核查"/>
+                  </el-select>
+
+                  <label class="customLabel">是否超期</label>
+                  <el-radio-group v-model="isOverTime" @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 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="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>
+
+                  <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>
+        </div>
       </el-col>
     </el-row>
   </div>
@@ -114,7 +107,7 @@
 ]
 
 const caseIcon = [
-  '/static/images/well/0100.png', '/static/images/well/0101.png'
+  '/static/images/case/status_dealing.png', '/static/images/case/status_done.png'
 ]
 
 export default {
@@ -169,7 +162,7 @@
       personQuery: {
         roleTips: ''
       },
-      casepersonCode: '',
+      casepersonCode: 'supervisor',
       labelPosition: 'right',
       caseTypeOpts: [], // 部件大类下拉框
       casePersonOpts: [{
@@ -207,9 +200,6 @@
     },
     caseTypeDetail() {
       return this.parts.casetypeDetailCode
-    },
-    casePerson() {
-      return this.casepersonCode
     }
   },
   watch: {
@@ -225,14 +215,6 @@
       if (obj) {
         this.addPartsPoints(obj.typeDetailName)
       }
-    },
-    casePerson(typeVal) {
-      this.clearPoint()
-
-      this.personQuery.roleTips = typeVal
-      if (typeVal !== '') {
-        this.addPersonPoints()
-      }
     }
   },
   mounted() {
@@ -252,6 +234,7 @@
         this.showPersonSelect = true
         this.showPartsSelect = false
         this.showCaseSelect = false
+        this.casePerson()
       } else if (this.queryEventSwitch === '0') {
         this.showCaseSelect = true
         this.showPartsSelect = false
@@ -387,6 +370,15 @@
         }
       })
     },
+    // 查询人员
+    casePerson() {
+      this.clearPoint()
+
+      this.personQuery.roleTips = this.casepersonCode
+      if (this.casepersonCode !== '') {
+        this.addPersonPoints()
+      }
+    },
     // 级联查询部件大类
     cascaderCaseType: function(eorc) {
       // 前两行的作用是清除部件大类的当前值和select中的所有选项
@@ -447,7 +439,7 @@
       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 marker = new that.esriObj.PictureMarkerSymbol(icon, 10, 15)
           const graphic = new that.esriObj.Graphic({
             geometry: point,
             symbol: marker,
@@ -609,6 +601,7 @@
         center: [116.597, 28.24], // 初始显示的地图中心点，经纬度
         zoom: 3 // 当前地图缩放等级
       })
+      this.view.ui._removeComponents(['zoom'])
 
       this.addBjLayers()
       this.addGraphicLayers()
@@ -701,19 +694,53 @@
           // 案卷定位
           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
+            const imgUrl = process.env.BASE_API + '/static/'
+
+            // 向后台再查询一次
+            const id = feature.attributes.id
+            request({
+              url: 'case/detail/' + id,
+              method: 'get'
+            }).then(response => {
+              if (response.code === 200) {
+                const caseDetail = response.data[0]
+
+                let detailTableHtml = '<table>'
+                detailTableHtml += '<tr><td colspan="2" width="370px">' + '案卷状态：' + caseDetail.caseStateName + '</td></tr>'
+                detailTableHtml += '<tr><td colspan="2">' + '案卷类别：' + caseDetail.eorcName + '/' + caseDetail.casetypeName + '/' + caseDetail.casetypeDetailName + '</td></tr>'
+                detailTableHtml += '<tr><td colspan="2">' + '上报时间：' + caseDetail.createTime + '</td></tr>'
+                detailTableHtml += '<tr><td colspan="2">' + '案卷地点：' + caseDetail.fieldintro + '</td></tr>'
+                detailTableHtml += '<tr><td colspan="2">' + '案卷情况：' + caseDetail.description + '</td></tr>'
+                if (caseDetail.fileIdVerify !== '') {
+                  const verify = caseDetail.fileIdVerify.split(',')
+                  detailTableHtml += '<tr><td colspan="2">上报图片</td></tr>'
+                  detailTableHtml += '<tr><td width="180px"><img width="180px" height="200px" src="' + imgUrl + verify[0] + '"></td>'
+                  if (verify[1] !== '') {
+                    detailTableHtml += '<td><img width="180px" height="200px" src="' + imgUrl + verify[1] + '"></td></tr>'
+                  } else {
+                    detailTableHtml += '<td></td></tr>'
+                  }
+                }
+                if (caseDetail.fileIdProcess !== '') {
+                  const process = caseDetail.fileIdProcess.split(',')
+                  detailTableHtml += '<tr><td colspan="2">处置图片</td></tr>'
+                  detailTableHtml += '<tr><td width="180px"><img width="180px" height="200px" src="' + imgUrl + process[0] + '"></td>'
+                  if (process[1] !== '') {
+                    detailTableHtml += '<td><img width="180px" height="200px" src="' + imgUrl + process[1] + '"></td></tr>'
+                  } else {
+                    detailTableHtml += '<td></td></tr>'
+                  }
+                }
+                detailTableHtml += '</table>'
+
+                // 2弹出气泡
+                that.view.popup.open({
+                  title: caseDetail.caseid,
+                  content: detailTableHtml,
+                  location: event.mapPoint
+                })
+              }
             })
           })
         }
@@ -772,17 +799,39 @@
 <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';*/
-  .baseMap {
-    height:80vh;
+
+   .staticPanel {
+     height: 85vh;
+     overflow-y: auto;
+   }
+   .baseMap {
+    height:85vh;
     width: 100%;
     margin-top: 0px;
     border: 1px solid #DCDCDC;
     border-radius: 4px;
   }
   .form {
-    position: fixed;
-    z-index: 9999;
-    top: 190px;
+    background-color: rgba(240, 240, 240, 0.9);
+    position: absolute;
+    /*margin-left: 80px;*/
+    /*z-index: 9999;*/
+    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;
   }
 </style>
 
diff --git a/src/views/supControl/supStatisPanel.vue b/src/views/supControl/supStatisPanel.vue
index f476912..85934ef 100644
--- a/src/views/supControl/supStatisPanel.vue
+++ b/src/views/supControl/supStatisPanel.vue
@@ -271,8 +271,8 @@
 <style scoped>
   .panelBlock {
     background-color: rgb(47, 56, 86);
-    margin: 5px;
-    padding-bottom: 20px;
+    margin: 2px;
+    padding-bottom: 15px;
   }
 
   .dashedLine {
diff --git a/static/images/case/status_dealing.png b/static/images/case/status_dealing.png
new file mode 100644
index 0000000..f553650
--- /dev/null
+++ b/static/images/case/status_dealing.png
Binary files differ
diff --git a/static/images/case/status_done.png b/static/images/case/status_done.png
new file mode 100644
index 0000000..9b3ecb8
--- /dev/null
+++ b/static/images/case/status_done.png
Binary files differ