diff --git a/src/api/busAdmin/areaPersonliable.js b/src/api/busAdmin/areaPersonliable.js
new file mode 100644
index 0000000..58737bb
--- /dev/null
+++ b/src/api/busAdmin/areaPersonliable.js
@@ -0,0 +1,45 @@
+import request from '@/utils/request'
+
+export function getAreaPersonliableList(params) {
+  return request({
+    url: '/areaPersonliable/listPage',
+    method: 'get',
+    params
+  })
+}
+
+export function addAreaPersonliable(params) {
+  return request({
+    url: '/areaPersonliable/add',
+    method: 'post',
+    params
+  })
+}
+
+export function updateAreaPersonliable(params) {
+  return request({
+    url: '/areaPersonliable/update',
+    method: 'post',
+    params
+  })
+}
+
+export function deleteAreaPersonliable(id) {
+  return request({
+    url: '/areaPersonliable/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+export function getSupervisorList() {
+  return request({
+    url: '/mgr/simplelist',
+    method: 'post',
+    params: {
+      roleTips: 'supervisor'
+    }
+  })
+}

diff --git a/src/api/busAdmin/areaPersonliable.js b/src/api/busAdmin/areaPersonliable.js
new file mode 100644
index 0000000..58737bb
--- /dev/null
+++ b/src/api/busAdmin/areaPersonliable.js
@@ -0,0 +1,45 @@
+import request from '@/utils/request'
+
+export function getAreaPersonliableList(params) {
+  return request({
+    url: '/areaPersonliable/listPage',
+    method: 'get',
+    params
+  })
+}
+
+export function addAreaPersonliable(params) {
+  return request({
+    url: '/areaPersonliable/add',
+    method: 'post',
+    params
+  })
+}
+
+export function updateAreaPersonliable(params) {
+  return request({
+    url: '/areaPersonliable/update',
+    method: 'post',
+    params
+  })
+}
+
+export function deleteAreaPersonliable(id) {
+  return request({
+    url: '/areaPersonliable/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+export function getSupervisorList() {
+  return request({
+    url: '/mgr/simplelist',
+    method: 'post',
+    params: {
+      roleTips: 'supervisor'
+    }
+  })
+}
diff --git a/src/api/callCase/callCase.js b/src/api/callCase/callCase.js
new file mode 100644
index 0000000..7500fc7
--- /dev/null
+++ b/src/api/callCase/callCase.js
@@ -0,0 +1,87 @@
+/**
+ * 新建案卷的接口
+ */
+import request from '@/utils/request'
+
+// 获取案卷信息来源
+export function getCaseSource(params) {
+  return request({
+    url: 'dict/code/caseSource',
+    method: 'get',
+    params
+  })
+}
+
+// 获取案卷等级
+export function getCaseLevel(params) {
+  return request({
+    url: 'dict/code/caseLevel',
+    method: 'get',
+    params
+  })
+}
+
+// 获取案卷类别
+export function getCaseEorC(params) {
+  return request({
+    url: 'dict/code/eorc',
+    method: 'get',
+    params
+  })
+}
+
+// 根据案卷类别获取案卷大类
+export function getCaseType(eorc) {
+  return request({
+    url: 'case/type/list',
+    method: 'get',
+    params: {
+      eorc: eorc
+    }
+  })
+}
+
+// 根据案卷大类获取案卷小类
+export function getCaseDetailType(caseTypeId) {
+  return request({
+    url: 'case/typeDetail/list',
+    method: 'get',
+    params: {
+      typeId: caseTypeId
+    }
+  })
+}
+
+// 根据案卷小类获取结案标准
+export function getCaseTypesTime(caseTypeDetailId) {
+  return request({
+    url: 'case/typesTime/list',
+    method: 'get',
+    params: {
+      detailId: caseTypeDetailId
+    }
+  })
+}
+
+// 获取监督员列表
+export function getVerifyPerson(params) {
+  return request({
+    url: 'mgr/simplelist',
+    method: 'post',
+    params: {
+      roleTips: 'supervisor'
+    }
+  })
+}
+
+// 新增案卷
+export function addCase(params) {
+  return request({
+    url: 'case/add',
+    method: 'post',
+    headers: {
+      'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
+    },
+    params
+  })
+}

diff --git a/src/api/busAdmin/areaPersonliable.js b/src/api/busAdmin/areaPersonliable.js
new file mode 100644
index 0000000..58737bb
--- /dev/null
+++ b/src/api/busAdmin/areaPersonliable.js
@@ -0,0 +1,45 @@
+import request from '@/utils/request'
+
+export function getAreaPersonliableList(params) {
+  return request({
+    url: '/areaPersonliable/listPage',
+    method: 'get',
+    params
+  })
+}
+
+export function addAreaPersonliable(params) {
+  return request({
+    url: '/areaPersonliable/add',
+    method: 'post',
+    params
+  })
+}
+
+export function updateAreaPersonliable(params) {
+  return request({
+    url: '/areaPersonliable/update',
+    method: 'post',
+    params
+  })
+}
+
+export function deleteAreaPersonliable(id) {
+  return request({
+    url: '/areaPersonliable/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+export function getSupervisorList() {
+  return request({
+    url: '/mgr/simplelist',
+    method: 'post',
+    params: {
+      roleTips: 'supervisor'
+    }
+  })
+}
diff --git a/src/api/callCase/callCase.js b/src/api/callCase/callCase.js
new file mode 100644
index 0000000..7500fc7
--- /dev/null
+++ b/src/api/callCase/callCase.js
@@ -0,0 +1,87 @@
+/**
+ * 新建案卷的接口
+ */
+import request from '@/utils/request'
+
+// 获取案卷信息来源
+export function getCaseSource(params) {
+  return request({
+    url: 'dict/code/caseSource',
+    method: 'get',
+    params
+  })
+}
+
+// 获取案卷等级
+export function getCaseLevel(params) {
+  return request({
+    url: 'dict/code/caseLevel',
+    method: 'get',
+    params
+  })
+}
+
+// 获取案卷类别
+export function getCaseEorC(params) {
+  return request({
+    url: 'dict/code/eorc',
+    method: 'get',
+    params
+  })
+}
+
+// 根据案卷类别获取案卷大类
+export function getCaseType(eorc) {
+  return request({
+    url: 'case/type/list',
+    method: 'get',
+    params: {
+      eorc: eorc
+    }
+  })
+}
+
+// 根据案卷大类获取案卷小类
+export function getCaseDetailType(caseTypeId) {
+  return request({
+    url: 'case/typeDetail/list',
+    method: 'get',
+    params: {
+      typeId: caseTypeId
+    }
+  })
+}
+
+// 根据案卷小类获取结案标准
+export function getCaseTypesTime(caseTypeDetailId) {
+  return request({
+    url: 'case/typesTime/list',
+    method: 'get',
+    params: {
+      detailId: caseTypeDetailId
+    }
+  })
+}
+
+// 获取监督员列表
+export function getVerifyPerson(params) {
+  return request({
+    url: 'mgr/simplelist',
+    method: 'post',
+    params: {
+      roleTips: 'supervisor'
+    }
+  })
+}
+
+// 新增案卷
+export function addCase(params) {
+  return request({
+    url: 'case/add',
+    method: 'post',
+    headers: {
+      'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
+    },
+    params
+  })
+}
diff --git a/src/api/coorBusiness/case.js b/src/api/coorBusiness/case.js
index ec5a88a..08c3a13 100644
--- a/src/api/coorBusiness/case.js
+++ b/src/api/coorBusiness/case.js
@@ -110,9 +110,10 @@
   })
 }
 
+// 待处理
 export function toHandleListPage(params) {
   return request({
-    url: 'case/toHandleListPage/',
+    url: 'case/toProcessListPage/',
     method: 'get',
     params
   })
@@ -158,9 +159,10 @@
   })
 }
 
+// 待核查
 export function toCheckListPage(params) {
   return request({
-    url: 'case/toCheckListPage/',
+    url: 'case/toDisCheckListPage/',
     method: 'get',
     params
   })

diff --git a/src/api/busAdmin/areaPersonliable.js b/src/api/busAdmin/areaPersonliable.js
new file mode 100644
index 0000000..58737bb
--- /dev/null
+++ b/src/api/busAdmin/areaPersonliable.js
@@ -0,0 +1,45 @@
+import request from '@/utils/request'
+
+export function getAreaPersonliableList(params) {
+  return request({
+    url: '/areaPersonliable/listPage',
+    method: 'get',
+    params
+  })
+}
+
+export function addAreaPersonliable(params) {
+  return request({
+    url: '/areaPersonliable/add',
+    method: 'post',
+    params
+  })
+}
+
+export function updateAreaPersonliable(params) {
+  return request({
+    url: '/areaPersonliable/update',
+    method: 'post',
+    params
+  })
+}
+
+export function deleteAreaPersonliable(id) {
+  return request({
+    url: '/areaPersonliable/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+export function getSupervisorList() {
+  return request({
+    url: '/mgr/simplelist',
+    method: 'post',
+    params: {
+      roleTips: 'supervisor'
+    }
+  })
+}
diff --git a/src/api/callCase/callCase.js b/src/api/callCase/callCase.js
new file mode 100644
index 0000000..7500fc7
--- /dev/null
+++ b/src/api/callCase/callCase.js
@@ -0,0 +1,87 @@
+/**
+ * 新建案卷的接口
+ */
+import request from '@/utils/request'
+
+// 获取案卷信息来源
+export function getCaseSource(params) {
+  return request({
+    url: 'dict/code/caseSource',
+    method: 'get',
+    params
+  })
+}
+
+// 获取案卷等级
+export function getCaseLevel(params) {
+  return request({
+    url: 'dict/code/caseLevel',
+    method: 'get',
+    params
+  })
+}
+
+// 获取案卷类别
+export function getCaseEorC(params) {
+  return request({
+    url: 'dict/code/eorc',
+    method: 'get',
+    params
+  })
+}
+
+// 根据案卷类别获取案卷大类
+export function getCaseType(eorc) {
+  return request({
+    url: 'case/type/list',
+    method: 'get',
+    params: {
+      eorc: eorc
+    }
+  })
+}
+
+// 根据案卷大类获取案卷小类
+export function getCaseDetailType(caseTypeId) {
+  return request({
+    url: 'case/typeDetail/list',
+    method: 'get',
+    params: {
+      typeId: caseTypeId
+    }
+  })
+}
+
+// 根据案卷小类获取结案标准
+export function getCaseTypesTime(caseTypeDetailId) {
+  return request({
+    url: 'case/typesTime/list',
+    method: 'get',
+    params: {
+      detailId: caseTypeDetailId
+    }
+  })
+}
+
+// 获取监督员列表
+export function getVerifyPerson(params) {
+  return request({
+    url: 'mgr/simplelist',
+    method: 'post',
+    params: {
+      roleTips: 'supervisor'
+    }
+  })
+}
+
+// 新增案卷
+export function addCase(params) {
+  return request({
+    url: 'case/add',
+    method: 'post',
+    headers: {
+      'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
+    },
+    params
+  })
+}
diff --git a/src/api/coorBusiness/case.js b/src/api/coorBusiness/case.js
index ec5a88a..08c3a13 100644
--- a/src/api/coorBusiness/case.js
+++ b/src/api/coorBusiness/case.js
@@ -110,9 +110,10 @@
   })
 }
 
+// 待处理
 export function toHandleListPage(params) {
   return request({
-    url: 'case/toHandleListPage/',
+    url: 'case/toProcessListPage/',
     method: 'get',
     params
   })
@@ -158,9 +159,10 @@
   })
 }
 
+// 待核查
 export function toCheckListPage(params) {
   return request({
-    url: 'case/toCheckListPage/',
+    url: 'case/toDisCheckListPage/',
     method: 'get',
     params
   })
diff --git a/src/components/CaseCommon/caseDetail.vue b/src/components/CaseCommon/caseDetail.vue
index f6c23ab..fdadcba 100644
--- a/src/components/CaseCommon/caseDetail.vue
+++ b/src/components/CaseCommon/caseDetail.vue
@@ -276,7 +276,7 @@
     </el-row>
     <el-row>
       <div class="title">数据流转:</div>
-      <el-table :data="recordList" :header-cell-style="{background:'#f3f3f3'}" class="table" border>
+      <el-table :data="recordList" :header-cell-style="{background:'#f3f3f3'}" max-height="400" class="table" border>
         <el-table-column prop="operationTypeName" label="操作" align="center"/>
         <el-table-column prop="deptName" label="单位" align="center"/>
         <el-table-column prop="userName" label="人员" align="center"/>
@@ -293,7 +293,7 @@
       :append-to-body="true"
       title="位置详情"
     >
-      <arc-gis-map :longitude="Number(caseDetail.lng)" :latitude="Number(caseDetail.lat)"/>
+      <arc-gis-map-read :longitude="Number(caseDetail.lng)" :latitude="Number(caseDetail.lat)"/>
     </el-dialog>
   </div>
 </template>
@@ -303,12 +303,12 @@
 import { getCaseDetail, getUserList, getDeptList, getCaseTypeList, getCaseTypeDetailList, getCaseTypeTimes } from '@/api/coorBusiness/case'
 import { getCommonLanguage, getFilingTypeList, getCaseLevelList } from '@/api/coorBusiness/dict'
 import { historicalRecords, nextNodes, completeCaseTask } from '@/api/coorBusiness/process'
-import ArcGisMap from '@/components/Map/arcgisMap'
+import ArcGisMapRead from '@/components/Map/arcgisMapRead'
 import { radioMap } from './radioMap'
 
 export default {
   name: 'CaseDetail',
-  components: { ArcGisMap },
+  components: { ArcGisMapRead },
   // props: {
   //   id: {
   //     type: String,
@@ -334,7 +334,6 @@
       showNeedVisit: false,
       caseDetail: {},
       operationKey: '', // 案件处理按钮key
-      imgurl: 'http:\\\\192.168.8.201:8083\\static\\',
       fileIdVerify: [], // 核实照片id
       fileIdProcess: [], // 处理照片id
       fileIdCheck: [], // 核查照片id
@@ -358,10 +357,12 @@
   computed: {
     isNeedVisit: function() {
       return this.caseDetail.isNeedRevisit === 1 ? '需要回访' : '不需要回访'
+    },
+    imgurl() {
+      return process.env.BASE_API + '/static/'
     }
   },
-  mounted() {
-    console.log('case dtial')
+  created() {
     this.id = this.$route.query.id
     this.showProcess = (this.$route.query.showProcess || this.$route.query.showProcess === false) ? this.$route.query.showProcess : true
     this.showNeedVisit = this.$route.query.showNeedVisit ? this.$route.query.showNeedVisit : false
@@ -371,7 +372,6 @@
     async initData() {
       // 查询案件详情接口
       const resDetail = await getCaseDetail(this.id)
-      console.log('detail', resDetail)
       this.caseDetail = resDetail.data[0]
 
       // 解析图片id
@@ -391,9 +391,11 @@
 
       // 查询流转记录接口
       this.processForm.processId = this.caseDetail.processId
-      const resRecord = await historicalRecords(this.processForm.processId)
-      this.recordList = resRecord.data
-      console.log(this.recordList)
+      // const resRecord = historicalRecords(this.processForm.processId)
+      // this.recordList = resRecord.data
+      historicalRecords(this.processForm.processId).then(res => {
+        this.recordList = res.data
+      })
 
       if (this.showProcess) {
         this.initProcess()
@@ -701,6 +703,7 @@
   .table{
     margin: 20px;
     width: 98%;
+    // max-height: 250px;
   }
   .title{
     margin-left: 38px;

diff --git a/src/api/busAdmin/areaPersonliable.js b/src/api/busAdmin/areaPersonliable.js
new file mode 100644
index 0000000..58737bb
--- /dev/null
+++ b/src/api/busAdmin/areaPersonliable.js
@@ -0,0 +1,45 @@
+import request from '@/utils/request'
+
+export function getAreaPersonliableList(params) {
+  return request({
+    url: '/areaPersonliable/listPage',
+    method: 'get',
+    params
+  })
+}
+
+export function addAreaPersonliable(params) {
+  return request({
+    url: '/areaPersonliable/add',
+    method: 'post',
+    params
+  })
+}
+
+export function updateAreaPersonliable(params) {
+  return request({
+    url: '/areaPersonliable/update',
+    method: 'post',
+    params
+  })
+}
+
+export function deleteAreaPersonliable(id) {
+  return request({
+    url: '/areaPersonliable/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+export function getSupervisorList() {
+  return request({
+    url: '/mgr/simplelist',
+    method: 'post',
+    params: {
+      roleTips: 'supervisor'
+    }
+  })
+}
diff --git a/src/api/callCase/callCase.js b/src/api/callCase/callCase.js
new file mode 100644
index 0000000..7500fc7
--- /dev/null
+++ b/src/api/callCase/callCase.js
@@ -0,0 +1,87 @@
+/**
+ * 新建案卷的接口
+ */
+import request from '@/utils/request'
+
+// 获取案卷信息来源
+export function getCaseSource(params) {
+  return request({
+    url: 'dict/code/caseSource',
+    method: 'get',
+    params
+  })
+}
+
+// 获取案卷等级
+export function getCaseLevel(params) {
+  return request({
+    url: 'dict/code/caseLevel',
+    method: 'get',
+    params
+  })
+}
+
+// 获取案卷类别
+export function getCaseEorC(params) {
+  return request({
+    url: 'dict/code/eorc',
+    method: 'get',
+    params
+  })
+}
+
+// 根据案卷类别获取案卷大类
+export function getCaseType(eorc) {
+  return request({
+    url: 'case/type/list',
+    method: 'get',
+    params: {
+      eorc: eorc
+    }
+  })
+}
+
+// 根据案卷大类获取案卷小类
+export function getCaseDetailType(caseTypeId) {
+  return request({
+    url: 'case/typeDetail/list',
+    method: 'get',
+    params: {
+      typeId: caseTypeId
+    }
+  })
+}
+
+// 根据案卷小类获取结案标准
+export function getCaseTypesTime(caseTypeDetailId) {
+  return request({
+    url: 'case/typesTime/list',
+    method: 'get',
+    params: {
+      detailId: caseTypeDetailId
+    }
+  })
+}
+
+// 获取监督员列表
+export function getVerifyPerson(params) {
+  return request({
+    url: 'mgr/simplelist',
+    method: 'post',
+    params: {
+      roleTips: 'supervisor'
+    }
+  })
+}
+
+// 新增案卷
+export function addCase(params) {
+  return request({
+    url: 'case/add',
+    method: 'post',
+    headers: {
+      'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
+    },
+    params
+  })
+}
diff --git a/src/api/coorBusiness/case.js b/src/api/coorBusiness/case.js
index ec5a88a..08c3a13 100644
--- a/src/api/coorBusiness/case.js
+++ b/src/api/coorBusiness/case.js
@@ -110,9 +110,10 @@
   })
 }
 
+// 待处理
 export function toHandleListPage(params) {
   return request({
-    url: 'case/toHandleListPage/',
+    url: 'case/toProcessListPage/',
     method: 'get',
     params
   })
@@ -158,9 +159,10 @@
   })
 }
 
+// 待核查
 export function toCheckListPage(params) {
   return request({
-    url: 'case/toCheckListPage/',
+    url: 'case/toDisCheckListPage/',
     method: 'get',
     params
   })
diff --git a/src/components/CaseCommon/caseDetail.vue b/src/components/CaseCommon/caseDetail.vue
index f6c23ab..fdadcba 100644
--- a/src/components/CaseCommon/caseDetail.vue
+++ b/src/components/CaseCommon/caseDetail.vue
@@ -276,7 +276,7 @@
     </el-row>
     <el-row>
       <div class="title">数据流转:</div>
-      <el-table :data="recordList" :header-cell-style="{background:'#f3f3f3'}" class="table" border>
+      <el-table :data="recordList" :header-cell-style="{background:'#f3f3f3'}" max-height="400" class="table" border>
         <el-table-column prop="operationTypeName" label="操作" align="center"/>
         <el-table-column prop="deptName" label="单位" align="center"/>
         <el-table-column prop="userName" label="人员" align="center"/>
@@ -293,7 +293,7 @@
       :append-to-body="true"
       title="位置详情"
     >
-      <arc-gis-map :longitude="Number(caseDetail.lng)" :latitude="Number(caseDetail.lat)"/>
+      <arc-gis-map-read :longitude="Number(caseDetail.lng)" :latitude="Number(caseDetail.lat)"/>
     </el-dialog>
   </div>
 </template>
@@ -303,12 +303,12 @@
 import { getCaseDetail, getUserList, getDeptList, getCaseTypeList, getCaseTypeDetailList, getCaseTypeTimes } from '@/api/coorBusiness/case'
 import { getCommonLanguage, getFilingTypeList, getCaseLevelList } from '@/api/coorBusiness/dict'
 import { historicalRecords, nextNodes, completeCaseTask } from '@/api/coorBusiness/process'
-import ArcGisMap from '@/components/Map/arcgisMap'
+import ArcGisMapRead from '@/components/Map/arcgisMapRead'
 import { radioMap } from './radioMap'
 
 export default {
   name: 'CaseDetail',
-  components: { ArcGisMap },
+  components: { ArcGisMapRead },
   // props: {
   //   id: {
   //     type: String,
@@ -334,7 +334,6 @@
       showNeedVisit: false,
       caseDetail: {},
       operationKey: '', // 案件处理按钮key
-      imgurl: 'http:\\\\192.168.8.201:8083\\static\\',
       fileIdVerify: [], // 核实照片id
       fileIdProcess: [], // 处理照片id
       fileIdCheck: [], // 核查照片id
@@ -358,10 +357,12 @@
   computed: {
     isNeedVisit: function() {
       return this.caseDetail.isNeedRevisit === 1 ? '需要回访' : '不需要回访'
+    },
+    imgurl() {
+      return process.env.BASE_API + '/static/'
     }
   },
-  mounted() {
-    console.log('case dtial')
+  created() {
     this.id = this.$route.query.id
     this.showProcess = (this.$route.query.showProcess || this.$route.query.showProcess === false) ? this.$route.query.showProcess : true
     this.showNeedVisit = this.$route.query.showNeedVisit ? this.$route.query.showNeedVisit : false
@@ -371,7 +372,6 @@
     async initData() {
       // 查询案件详情接口
       const resDetail = await getCaseDetail(this.id)
-      console.log('detail', resDetail)
       this.caseDetail = resDetail.data[0]
 
       // 解析图片id
@@ -391,9 +391,11 @@
 
       // 查询流转记录接口
       this.processForm.processId = this.caseDetail.processId
-      const resRecord = await historicalRecords(this.processForm.processId)
-      this.recordList = resRecord.data
-      console.log(this.recordList)
+      // const resRecord = historicalRecords(this.processForm.processId)
+      // this.recordList = resRecord.data
+      historicalRecords(this.processForm.processId).then(res => {
+        this.recordList = res.data
+      })
 
       if (this.showProcess) {
         this.initProcess()
@@ -701,6 +703,7 @@
   .table{
     margin: 20px;
     width: 98%;
+    // max-height: 250px;
   }
   .title{
     margin-left: 38px;
diff --git a/src/components/CaseCommon/caseDetailRead.vue b/src/components/CaseCommon/caseDetailRead.vue
index 82066db..a4e87b0 100644
--- a/src/components/CaseCommon/caseDetailRead.vue
+++ b/src/components/CaseCommon/caseDetailRead.vue
@@ -158,11 +158,11 @@
 
 <script>
 import { getCaseDetail } from '@/api/coorBusiness/case'
-import ArcGisMap from '@/components/Map/arcgisMap'
+import ArcGisMapRead from '@/components/Map/arcgisMapRead'
 
 export default {
   name: 'CaseDetail',
-  components: { ArcGisMap },
+  components: { ArcGisMapRead },
   props: {
     id: {
       type: String,

diff --git a/src/api/busAdmin/areaPersonliable.js b/src/api/busAdmin/areaPersonliable.js
new file mode 100644
index 0000000..58737bb
--- /dev/null
+++ b/src/api/busAdmin/areaPersonliable.js
@@ -0,0 +1,45 @@
+import request from '@/utils/request'
+
+export function getAreaPersonliableList(params) {
+  return request({
+    url: '/areaPersonliable/listPage',
+    method: 'get',
+    params
+  })
+}
+
+export function addAreaPersonliable(params) {
+  return request({
+    url: '/areaPersonliable/add',
+    method: 'post',
+    params
+  })
+}
+
+export function updateAreaPersonliable(params) {
+  return request({
+    url: '/areaPersonliable/update',
+    method: 'post',
+    params
+  })
+}
+
+export function deleteAreaPersonliable(id) {
+  return request({
+    url: '/areaPersonliable/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+export function getSupervisorList() {
+  return request({
+    url: '/mgr/simplelist',
+    method: 'post',
+    params: {
+      roleTips: 'supervisor'
+    }
+  })
+}
diff --git a/src/api/callCase/callCase.js b/src/api/callCase/callCase.js
new file mode 100644
index 0000000..7500fc7
--- /dev/null
+++ b/src/api/callCase/callCase.js
@@ -0,0 +1,87 @@
+/**
+ * 新建案卷的接口
+ */
+import request from '@/utils/request'
+
+// 获取案卷信息来源
+export function getCaseSource(params) {
+  return request({
+    url: 'dict/code/caseSource',
+    method: 'get',
+    params
+  })
+}
+
+// 获取案卷等级
+export function getCaseLevel(params) {
+  return request({
+    url: 'dict/code/caseLevel',
+    method: 'get',
+    params
+  })
+}
+
+// 获取案卷类别
+export function getCaseEorC(params) {
+  return request({
+    url: 'dict/code/eorc',
+    method: 'get',
+    params
+  })
+}
+
+// 根据案卷类别获取案卷大类
+export function getCaseType(eorc) {
+  return request({
+    url: 'case/type/list',
+    method: 'get',
+    params: {
+      eorc: eorc
+    }
+  })
+}
+
+// 根据案卷大类获取案卷小类
+export function getCaseDetailType(caseTypeId) {
+  return request({
+    url: 'case/typeDetail/list',
+    method: 'get',
+    params: {
+      typeId: caseTypeId
+    }
+  })
+}
+
+// 根据案卷小类获取结案标准
+export function getCaseTypesTime(caseTypeDetailId) {
+  return request({
+    url: 'case/typesTime/list',
+    method: 'get',
+    params: {
+      detailId: caseTypeDetailId
+    }
+  })
+}
+
+// 获取监督员列表
+export function getVerifyPerson(params) {
+  return request({
+    url: 'mgr/simplelist',
+    method: 'post',
+    params: {
+      roleTips: 'supervisor'
+    }
+  })
+}
+
+// 新增案卷
+export function addCase(params) {
+  return request({
+    url: 'case/add',
+    method: 'post',
+    headers: {
+      'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
+    },
+    params
+  })
+}
diff --git a/src/api/coorBusiness/case.js b/src/api/coorBusiness/case.js
index ec5a88a..08c3a13 100644
--- a/src/api/coorBusiness/case.js
+++ b/src/api/coorBusiness/case.js
@@ -110,9 +110,10 @@
   })
 }
 
+// 待处理
 export function toHandleListPage(params) {
   return request({
-    url: 'case/toHandleListPage/',
+    url: 'case/toProcessListPage/',
     method: 'get',
     params
   })
@@ -158,9 +159,10 @@
   })
 }
 
+// 待核查
 export function toCheckListPage(params) {
   return request({
-    url: 'case/toCheckListPage/',
+    url: 'case/toDisCheckListPage/',
     method: 'get',
     params
   })
diff --git a/src/components/CaseCommon/caseDetail.vue b/src/components/CaseCommon/caseDetail.vue
index f6c23ab..fdadcba 100644
--- a/src/components/CaseCommon/caseDetail.vue
+++ b/src/components/CaseCommon/caseDetail.vue
@@ -276,7 +276,7 @@
     </el-row>
     <el-row>
       <div class="title">数据流转:</div>
-      <el-table :data="recordList" :header-cell-style="{background:'#f3f3f3'}" class="table" border>
+      <el-table :data="recordList" :header-cell-style="{background:'#f3f3f3'}" max-height="400" class="table" border>
         <el-table-column prop="operationTypeName" label="操作" align="center"/>
         <el-table-column prop="deptName" label="单位" align="center"/>
         <el-table-column prop="userName" label="人员" align="center"/>
@@ -293,7 +293,7 @@
       :append-to-body="true"
       title="位置详情"
     >
-      <arc-gis-map :longitude="Number(caseDetail.lng)" :latitude="Number(caseDetail.lat)"/>
+      <arc-gis-map-read :longitude="Number(caseDetail.lng)" :latitude="Number(caseDetail.lat)"/>
     </el-dialog>
   </div>
 </template>
@@ -303,12 +303,12 @@
 import { getCaseDetail, getUserList, getDeptList, getCaseTypeList, getCaseTypeDetailList, getCaseTypeTimes } from '@/api/coorBusiness/case'
 import { getCommonLanguage, getFilingTypeList, getCaseLevelList } from '@/api/coorBusiness/dict'
 import { historicalRecords, nextNodes, completeCaseTask } from '@/api/coorBusiness/process'
-import ArcGisMap from '@/components/Map/arcgisMap'
+import ArcGisMapRead from '@/components/Map/arcgisMapRead'
 import { radioMap } from './radioMap'
 
 export default {
   name: 'CaseDetail',
-  components: { ArcGisMap },
+  components: { ArcGisMapRead },
   // props: {
   //   id: {
   //     type: String,
@@ -334,7 +334,6 @@
       showNeedVisit: false,
       caseDetail: {},
       operationKey: '', // 案件处理按钮key
-      imgurl: 'http:\\\\192.168.8.201:8083\\static\\',
       fileIdVerify: [], // 核实照片id
       fileIdProcess: [], // 处理照片id
       fileIdCheck: [], // 核查照片id
@@ -358,10 +357,12 @@
   computed: {
     isNeedVisit: function() {
       return this.caseDetail.isNeedRevisit === 1 ? '需要回访' : '不需要回访'
+    },
+    imgurl() {
+      return process.env.BASE_API + '/static/'
     }
   },
-  mounted() {
-    console.log('case dtial')
+  created() {
     this.id = this.$route.query.id
     this.showProcess = (this.$route.query.showProcess || this.$route.query.showProcess === false) ? this.$route.query.showProcess : true
     this.showNeedVisit = this.$route.query.showNeedVisit ? this.$route.query.showNeedVisit : false
@@ -371,7 +372,6 @@
     async initData() {
       // 查询案件详情接口
       const resDetail = await getCaseDetail(this.id)
-      console.log('detail', resDetail)
       this.caseDetail = resDetail.data[0]
 
       // 解析图片id
@@ -391,9 +391,11 @@
 
       // 查询流转记录接口
       this.processForm.processId = this.caseDetail.processId
-      const resRecord = await historicalRecords(this.processForm.processId)
-      this.recordList = resRecord.data
-      console.log(this.recordList)
+      // const resRecord = historicalRecords(this.processForm.processId)
+      // this.recordList = resRecord.data
+      historicalRecords(this.processForm.processId).then(res => {
+        this.recordList = res.data
+      })
 
       if (this.showProcess) {
         this.initProcess()
@@ -701,6 +703,7 @@
   .table{
     margin: 20px;
     width: 98%;
+    // max-height: 250px;
   }
   .title{
     margin-left: 38px;
diff --git a/src/components/CaseCommon/caseDetailRead.vue b/src/components/CaseCommon/caseDetailRead.vue
index 82066db..a4e87b0 100644
--- a/src/components/CaseCommon/caseDetailRead.vue
+++ b/src/components/CaseCommon/caseDetailRead.vue
@@ -158,11 +158,11 @@
 
 <script>
 import { getCaseDetail } from '@/api/coorBusiness/case'
-import ArcGisMap from '@/components/Map/arcgisMap'
+import ArcGisMapRead from '@/components/Map/arcgisMapRead'
 
 export default {
   name: 'CaseDetail',
-  components: { ArcGisMap },
+  components: { ArcGisMapRead },
   props: {
     id: {
       type: String,
diff --git a/src/components/Map/ArcGISConfig.js b/src/components/Map/ArcGISConfig.js
index d325da9..50cea3b 100644
--- a/src/components/Map/ArcGISConfig.js
+++ b/src/components/Map/ArcGISConfig.js
@@ -1,14 +1,16 @@
 export const mapConfig = {
-  apiUrl: 'https://js.arcgis.com/4.13/', // 暂时使用管网提供的api，实际部署时建议离线部署一套
+  apiUrl: 'http://192.168.8.205/arcgis_js_api/library/4.12/init.js', // 暂时使用管网提供的api，实际部署时建议离线部署一套
+  // apiUrl: 'https://js.arcgis.com/4.13/',
   mapIp: '223.84.218.107', // 服务ip
   mapPort: '6080', // 服务端口
-  serverBase: 'http://223.84.218.107:6080/arcgis/rest/services/', // 服务地址前缀
+  serverBase: 'http://192.168.8.205:6080/arcgis/rest/services/', // 服务地址前缀
+  // serverBase: 'http://223.84.218.107:6080/arcgis/rest/services/dx/',
   mapCenter: '[116.597,28.24]' // 地图中心点
 }
 
 export const serverConfig = {
-  mapUrlBase: mapConfig.serverBase + 'dx/2w/MapServer', // 底图服务地址
-  mapUrlBj: mapConfig.serverBase + 'dx/dxbj/MapServer', // 部件服务地址
-  mapUrlBjfc: mapConfig.serverBase + 'dx/bjfc/MapServer', // 部件分层服务地址
-  mapUrlBjEdit: mapConfig.serverBase + 'dx/dxbj/FeatureServer' // 可编辑的部件图层
+  mapUrlBase: mapConfig.serverBase + '2w/MapServer', // 底图服务地址
+  mapUrlBj: mapConfig.serverBase + 'dxbj/MapServer', // 部件服务地址
+  mapUrlBjfc: mapConfig.serverBase + 'bjfc/MapServer', // 部件分层服务地址
+  mapUrlBjEdit: mapConfig.serverBase + 'dxbj/FeatureServer' // 可编辑的部件图层
 }

diff --git a/src/api/busAdmin/areaPersonliable.js b/src/api/busAdmin/areaPersonliable.js
new file mode 100644
index 0000000..58737bb
--- /dev/null
+++ b/src/api/busAdmin/areaPersonliable.js
@@ -0,0 +1,45 @@
+import request from '@/utils/request'
+
+export function getAreaPersonliableList(params) {
+  return request({
+    url: '/areaPersonliable/listPage',
+    method: 'get',
+    params
+  })
+}
+
+export function addAreaPersonliable(params) {
+  return request({
+    url: '/areaPersonliable/add',
+    method: 'post',
+    params
+  })
+}
+
+export function updateAreaPersonliable(params) {
+  return request({
+    url: '/areaPersonliable/update',
+    method: 'post',
+    params
+  })
+}
+
+export function deleteAreaPersonliable(id) {
+  return request({
+    url: '/areaPersonliable/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+export function getSupervisorList() {
+  return request({
+    url: '/mgr/simplelist',
+    method: 'post',
+    params: {
+      roleTips: 'supervisor'
+    }
+  })
+}
diff --git a/src/api/callCase/callCase.js b/src/api/callCase/callCase.js
new file mode 100644
index 0000000..7500fc7
--- /dev/null
+++ b/src/api/callCase/callCase.js
@@ -0,0 +1,87 @@
+/**
+ * 新建案卷的接口
+ */
+import request from '@/utils/request'
+
+// 获取案卷信息来源
+export function getCaseSource(params) {
+  return request({
+    url: 'dict/code/caseSource',
+    method: 'get',
+    params
+  })
+}
+
+// 获取案卷等级
+export function getCaseLevel(params) {
+  return request({
+    url: 'dict/code/caseLevel',
+    method: 'get',
+    params
+  })
+}
+
+// 获取案卷类别
+export function getCaseEorC(params) {
+  return request({
+    url: 'dict/code/eorc',
+    method: 'get',
+    params
+  })
+}
+
+// 根据案卷类别获取案卷大类
+export function getCaseType(eorc) {
+  return request({
+    url: 'case/type/list',
+    method: 'get',
+    params: {
+      eorc: eorc
+    }
+  })
+}
+
+// 根据案卷大类获取案卷小类
+export function getCaseDetailType(caseTypeId) {
+  return request({
+    url: 'case/typeDetail/list',
+    method: 'get',
+    params: {
+      typeId: caseTypeId
+    }
+  })
+}
+
+// 根据案卷小类获取结案标准
+export function getCaseTypesTime(caseTypeDetailId) {
+  return request({
+    url: 'case/typesTime/list',
+    method: 'get',
+    params: {
+      detailId: caseTypeDetailId
+    }
+  })
+}
+
+// 获取监督员列表
+export function getVerifyPerson(params) {
+  return request({
+    url: 'mgr/simplelist',
+    method: 'post',
+    params: {
+      roleTips: 'supervisor'
+    }
+  })
+}
+
+// 新增案卷
+export function addCase(params) {
+  return request({
+    url: 'case/add',
+    method: 'post',
+    headers: {
+      'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
+    },
+    params
+  })
+}
diff --git a/src/api/coorBusiness/case.js b/src/api/coorBusiness/case.js
index ec5a88a..08c3a13 100644
--- a/src/api/coorBusiness/case.js
+++ b/src/api/coorBusiness/case.js
@@ -110,9 +110,10 @@
   })
 }
 
+// 待处理
 export function toHandleListPage(params) {
   return request({
-    url: 'case/toHandleListPage/',
+    url: 'case/toProcessListPage/',
     method: 'get',
     params
   })
@@ -158,9 +159,10 @@
   })
 }
 
+// 待核查
 export function toCheckListPage(params) {
   return request({
-    url: 'case/toCheckListPage/',
+    url: 'case/toDisCheckListPage/',
     method: 'get',
     params
   })
diff --git a/src/components/CaseCommon/caseDetail.vue b/src/components/CaseCommon/caseDetail.vue
index f6c23ab..fdadcba 100644
--- a/src/components/CaseCommon/caseDetail.vue
+++ b/src/components/CaseCommon/caseDetail.vue
@@ -276,7 +276,7 @@
     </el-row>
     <el-row>
       <div class="title">数据流转:</div>
-      <el-table :data="recordList" :header-cell-style="{background:'#f3f3f3'}" class="table" border>
+      <el-table :data="recordList" :header-cell-style="{background:'#f3f3f3'}" max-height="400" class="table" border>
         <el-table-column prop="operationTypeName" label="操作" align="center"/>
         <el-table-column prop="deptName" label="单位" align="center"/>
         <el-table-column prop="userName" label="人员" align="center"/>
@@ -293,7 +293,7 @@
       :append-to-body="true"
       title="位置详情"
     >
-      <arc-gis-map :longitude="Number(caseDetail.lng)" :latitude="Number(caseDetail.lat)"/>
+      <arc-gis-map-read :longitude="Number(caseDetail.lng)" :latitude="Number(caseDetail.lat)"/>
     </el-dialog>
   </div>
 </template>
@@ -303,12 +303,12 @@
 import { getCaseDetail, getUserList, getDeptList, getCaseTypeList, getCaseTypeDetailList, getCaseTypeTimes } from '@/api/coorBusiness/case'
 import { getCommonLanguage, getFilingTypeList, getCaseLevelList } from '@/api/coorBusiness/dict'
 import { historicalRecords, nextNodes, completeCaseTask } from '@/api/coorBusiness/process'
-import ArcGisMap from '@/components/Map/arcgisMap'
+import ArcGisMapRead from '@/components/Map/arcgisMapRead'
 import { radioMap } from './radioMap'
 
 export default {
   name: 'CaseDetail',
-  components: { ArcGisMap },
+  components: { ArcGisMapRead },
   // props: {
   //   id: {
   //     type: String,
@@ -334,7 +334,6 @@
       showNeedVisit: false,
       caseDetail: {},
       operationKey: '', // 案件处理按钮key
-      imgurl: 'http:\\\\192.168.8.201:8083\\static\\',
       fileIdVerify: [], // 核实照片id
       fileIdProcess: [], // 处理照片id
       fileIdCheck: [], // 核查照片id
@@ -358,10 +357,12 @@
   computed: {
     isNeedVisit: function() {
       return this.caseDetail.isNeedRevisit === 1 ? '需要回访' : '不需要回访'
+    },
+    imgurl() {
+      return process.env.BASE_API + '/static/'
     }
   },
-  mounted() {
-    console.log('case dtial')
+  created() {
     this.id = this.$route.query.id
     this.showProcess = (this.$route.query.showProcess || this.$route.query.showProcess === false) ? this.$route.query.showProcess : true
     this.showNeedVisit = this.$route.query.showNeedVisit ? this.$route.query.showNeedVisit : false
@@ -371,7 +372,6 @@
     async initData() {
       // 查询案件详情接口
       const resDetail = await getCaseDetail(this.id)
-      console.log('detail', resDetail)
       this.caseDetail = resDetail.data[0]
 
       // 解析图片id
@@ -391,9 +391,11 @@
 
       // 查询流转记录接口
       this.processForm.processId = this.caseDetail.processId
-      const resRecord = await historicalRecords(this.processForm.processId)
-      this.recordList = resRecord.data
-      console.log(this.recordList)
+      // const resRecord = historicalRecords(this.processForm.processId)
+      // this.recordList = resRecord.data
+      historicalRecords(this.processForm.processId).then(res => {
+        this.recordList = res.data
+      })
 
       if (this.showProcess) {
         this.initProcess()
@@ -701,6 +703,7 @@
   .table{
     margin: 20px;
     width: 98%;
+    // max-height: 250px;
   }
   .title{
     margin-left: 38px;
diff --git a/src/components/CaseCommon/caseDetailRead.vue b/src/components/CaseCommon/caseDetailRead.vue
index 82066db..a4e87b0 100644
--- a/src/components/CaseCommon/caseDetailRead.vue
+++ b/src/components/CaseCommon/caseDetailRead.vue
@@ -158,11 +158,11 @@
 
 <script>
 import { getCaseDetail } from '@/api/coorBusiness/case'
-import ArcGisMap from '@/components/Map/arcgisMap'
+import ArcGisMapRead from '@/components/Map/arcgisMapRead'
 
 export default {
   name: 'CaseDetail',
-  components: { ArcGisMap },
+  components: { ArcGisMapRead },
   props: {
     id: {
       type: String,
diff --git a/src/components/Map/ArcGISConfig.js b/src/components/Map/ArcGISConfig.js
index d325da9..50cea3b 100644
--- a/src/components/Map/ArcGISConfig.js
+++ b/src/components/Map/ArcGISConfig.js
@@ -1,14 +1,16 @@
 export const mapConfig = {
-  apiUrl: 'https://js.arcgis.com/4.13/', // 暂时使用管网提供的api，实际部署时建议离线部署一套
+  apiUrl: 'http://192.168.8.205/arcgis_js_api/library/4.12/init.js', // 暂时使用管网提供的api，实际部署时建议离线部署一套
+  // apiUrl: 'https://js.arcgis.com/4.13/',
   mapIp: '223.84.218.107', // 服务ip
   mapPort: '6080', // 服务端口
-  serverBase: 'http://223.84.218.107:6080/arcgis/rest/services/', // 服务地址前缀
+  serverBase: 'http://192.168.8.205:6080/arcgis/rest/services/', // 服务地址前缀
+  // serverBase: 'http://223.84.218.107:6080/arcgis/rest/services/dx/',
   mapCenter: '[116.597,28.24]' // 地图中心点
 }
 
 export const serverConfig = {
-  mapUrlBase: mapConfig.serverBase + 'dx/2w/MapServer', // 底图服务地址
-  mapUrlBj: mapConfig.serverBase + 'dx/dxbj/MapServer', // 部件服务地址
-  mapUrlBjfc: mapConfig.serverBase + 'dx/bjfc/MapServer', // 部件分层服务地址
-  mapUrlBjEdit: mapConfig.serverBase + 'dx/dxbj/FeatureServer' // 可编辑的部件图层
+  mapUrlBase: mapConfig.serverBase + '2w/MapServer', // 底图服务地址
+  mapUrlBj: mapConfig.serverBase + 'dxbj/MapServer', // 部件服务地址
+  mapUrlBjfc: mapConfig.serverBase + 'bjfc/MapServer', // 部件分层服务地址
+  mapUrlBjEdit: mapConfig.serverBase + 'dxbj/FeatureServer' // 可编辑的部件图层
 }
diff --git a/src/components/Map/arcgisMap.vue b/src/components/Map/arcgisMap.vue
index 53776f1..5c15383 100644
--- a/src/components/Map/arcgisMap.vue
+++ b/src/components/Map/arcgisMap.vue
@@ -1,6 +1,6 @@
 <template>
-  <div style="margin-top:-30px">
-    <!-- <el-row :gutter="20">
+  <div>
+    <el-row :gutter="20">
       <el-col :span="4">
         <el-input v-model="keywords" size="small" type="text" placeholder="兴趣点关键字" clearable />
       </el-col>
@@ -31,9 +31,9 @@
       <el-col v-if="queryEventSwitch === '1'" :span="8" style="text-align: right;">
         <el-button type="primary" size="small" @click="checkEventPoint"> 事件提交 </el-button>
       </el-col>
-    </el-row> -->
+    </el-row>
 
-    <div v-loading="mapLoading" ref="mapDiv" class="baseMap" />
+    <div ref="mapDiv" class="baseMap" />
   </div>
 </template>
 
@@ -45,22 +45,12 @@
   url: mapConfig.apiUrl
 }
 
-// const eventPointLayerId = 'eventPointLayer' // 事件定位点的图层id
-// const queryResultLayerId = 'queryResultLayer' // 兴趣点查询结果点集的图层id
+const eventPointLayerId = 'eventPointLayer' // 事件定位点的图层id
+const queryResultLayerId = 'queryResultLayer' // 兴趣点查询结果点集的图层id
 const caseLayerId = 'addedGeometryLayerId' // 案卷点图层
 
 export default {
-  name: 'ArcGisMap',
-  props: {
-    longitude: {
-      type: Number,
-      default: 116.5937
-    },
-    latitude: {
-      type: Number,
-      default: 28.249
-    }
-  },
+  name: 'ArcGISMap',
   data() {
     return {
       map: '',
@@ -89,19 +79,18 @@
         IdentifyParameters: '',
         MapView: ''
       },
-      mapLoading: false
-      // keywords: '', // 查询关键字
-      // showEventPointPopup: true, // 是否显示事部件的popup
-      // queryEventSwitch: '1', // 1==查询事件；0==查询部件
-      // compListOpts: [], // 部件选择下拉框option
+      keywords: '', // 查询关键字
+      showEventPointPopup: true, // 是否显示事部件的popup
+      queryEventSwitch: '1', // 1==查询事件；0==查询部件
+      compListOpts: [], // 部件选择下拉框option
       // 主页面返回值
-      // longitude: '', // 定位点经度
-      // latitude: '' // 定位点纬度
-      // communityId: '', // 社区ID
-      // communityName: '', // 社区名称
-      // gridId: '', // 单元网格ID
-      // componentId: '', // 部件ID
-      // componentName: '' // 部件名称/=
+      longitude: '', // 定位点经度
+      latitude: '', // 定位点纬度
+      communityId: '', // 社区ID
+      communityName: '', // 社区名称
+      gridId: '', // 单元网格ID
+      componentId: '', // 部件ID
+      componentName: '' // 部件名称
     }
   },
   mounted() {
@@ -110,7 +99,6 @@
   methods: {
     // 初始化ArcGIS API对象
     importEsri: function() {
-      this.mapLoading = true
       loadModules([
         'esri/Map',
         'esri/Basemap',
@@ -164,10 +152,8 @@
 
           // 初始化地图
           this.initMap()
-          this.mapLoading = false
         }).catch(err => {
           console.log(err)
-          this.mapLoading = false
         })
     },
     // 初始化地图
@@ -194,139 +180,139 @@
         zoom: 3 // 当前地图缩放等级
       })
 
-      // const that = this
-      // this.view.on('click', function(event) {
-      //   // 清除地图上已有的事件/部件查询点
-      //   that.clearEOrCPoint()
+      const that = this
+      this.view.on('click', function(event) {
+        // 清除地图上已有的事件/部件查询点
+        that.clearEOrCPoint()
 
-      //   const lon = event.mapPoint.longitude
-      //   const lat = event.mapPoint.latitude
+        const lon = event.mapPoint.longitude
+        const lat = event.mapPoint.latitude
 
-      //   if (that.showEventPointPopup) {
-      //     // 添加点
-      //     const gLayer = new that.esriObj.GraphicsLayer()
-      //     const marker = new that.esriObj.SimpleMarkerSymbol()
-      //     marker.color = '#35A0E7'
-      //     marker.style = 'square'
-      //     marker.outline = {
-      //       color: [128, 128, 128, 0.5],
-      //       width: '2px'
-      //     }
-      //     const graphic = new that.esriObj.Graphic({
-      //       geometry: event.mapPoint,
-      //       symbol: marker
-      //     })
+        if (that.showEventPointPopup) {
+          // 添加点
+          const gLayer = new that.esriObj.GraphicsLayer()
+          const marker = new that.esriObj.SimpleMarkerSymbol()
+          marker.color = '#35A0E7'
+          marker.style = 'square'
+          marker.outline = {
+            color: [128, 128, 128, 0.5],
+            width: '2px'
+          }
+          const graphic = new that.esriObj.Graphic({
+            geometry: event.mapPoint,
+            symbol: marker
+          })
 
-      //     gLayer.id = eventPointLayerId
-      //     gLayer.add(graphic)
-      //     that.map.add(gLayer)
+          gLayer.id = eventPointLayerId
+          gLayer.add(graphic)
+          that.map.add(gLayer)
 
-      //     // 查询事件或者部件
-      //     if (that.queryEventSwitch === '1') {
-      //       // 事件定位
-      //       // 1查询底图得到所在网格与所在社区
-      //       const query = that.layers.dx2wGrid.createQuery()
-      //       query.geometry = that.view.toMap(event)
-      //       query.distance = 10
-      //       query.units = 'meters'
-      //       query.returnGeometry = true
-      //       query.outFields = ['BGID', 'COMMUID', 'COMMUNAME']
-      //       that.layers.dx2wGrid.queryFeatures(query)
-      //         .then(function(response) {
-      //           const result = response.features[0].attributes
+          // 查询事件或者部件
+          if (that.queryEventSwitch === '1') {
+            // 事件定位
+            // 1查询底图得到所在网格与所在社区
+            const query = that.layers.dx2wGrid.createQuery()
+            query.geometry = that.view.toMap(event)
+            query.distance = 10
+            query.units = 'meters'
+            query.returnGeometry = true
+            query.outFields = ['BGID', 'COMMUID', 'COMMUNAME']
+            that.layers.dx2wGrid.queryFeatures(query)
+              .then(function(response) {
+                const result = response.features[0].attributes
 
-      //           // 赋值
-      //           that.longitude = lon
-      //           that.latitude = lat
-      //           that.gridId = result.BGID
-      //           that.communityId = result.COMMUID
-      //           that.communityName = result.COMMUNAME
+                // 赋值
+                that.longitude = lon
+                that.latitude = lat
+                that.gridId = result.BGID
+                that.communityId = result.COMMUID
+                that.communityName = result.COMMUNAME
 
-      //           // 2弹出气泡
-      //           that.view.popup.open({
-      //             title: '事件定位',
-      //             content: '坐标：[' + lon.toFixed(4) + ', ' + lat.toFixed(4) + ']' + '<p>' + '所在社区：' + result.COMMUNAME,
-      //             location: event.mapPoint
-      //           })
-      //         })
-      //     } else if (that.queryEventSwitch === '0') {
-      //       // 部件定位
-      //       const queryDev = that.layers.dxbjPoint.createQuery()
-      //       // 定义查询的圆形范围，半径5米
-      //       const circle = new that.esriObj.Circle({
-      //         center: event.mapPoint,
-      //         radius: 5,
-      //         radiusUnit: 'meters'
-      //       })
-      //       queryDev.geometry = circle
-      //       queryDev.returnGeometry = true
-      //       queryDev.outFields = ['BGID', 'OBJID', 'OBJNAME', 'OBJPOS']
-      //       that.layers.dxbjPoint.queryFeatures(queryDev)
-      //         .then(function(response) {
-      //           if (response.features.length > 0) {
-      //             const results = response.features
+                // 2弹出气泡
+                that.view.popup.open({
+                  title: '事件定位',
+                  content: '坐标：[' + lon.toFixed(4) + ', ' + lat.toFixed(4) + ']' + '<p>' + '所在社区：' + result.COMMUNAME,
+                  location: event.mapPoint
+                })
+              })
+          } else if (that.queryEventSwitch === '0') {
+            // 部件定位
+            const queryDev = that.layers.dxbjPoint.createQuery()
+            // 定义查询的圆形范围，半径5米
+            const circle = new that.esriObj.Circle({
+              center: event.mapPoint,
+              radius: 5,
+              radiusUnit: 'meters'
+            })
+            queryDev.geometry = circle
+            queryDev.returnGeometry = true
+            queryDev.outFields = ['BGID', 'OBJID', 'OBJNAME', 'OBJPOS']
+            that.layers.dxbjPoint.queryFeatures(queryDev)
+              .then(function(response) {
+                if (response.features.length > 0) {
+                  const results = response.features
 
-      //             that.compListOpts = []
+                  that.compListOpts = []
 
-      //             let content = ''
-      //             results.forEach((item, index) => {
-      //               content += '<p>部件' + (index + 1) + '：' + item.attributes.OBJNAME + '，' + item.attributes.OBJPOS
-      //               const comp = {}
-      //               comp.name = '部件' + (index + 1) + '：' + item.attributes.OBJNAME
-      //               comp.value = item.attributes.OBJID
-      //               that.compListOpts.push(comp)
-      //             })
+                  let content = ''
+                  results.forEach((item, index) => {
+                    content += '<p>部件' + (index + 1) + '：' + item.attributes.OBJNAME + '，' + item.attributes.OBJPOS
+                    const comp = {}
+                    comp.name = '部件' + (index + 1) + '：' + item.attributes.OBJNAME
+                    comp.value = item.attributes.OBJID
+                    that.compListOpts.push(comp)
+                  })
 
-      //             // 2弹出气泡
-      //             that.view.popup.open({
-      //               title: '部件定位',
-      //               content: '坐标：[' + lon.toFixed(4) + ', ' + lat.toFixed(4) + ']，附近5米的部件有：' + content,
-      //               location: event.mapPoint
-      //             })
+                  // 2弹出气泡
+                  that.view.popup.open({
+                    title: '部件定位',
+                    content: '坐标：[' + lon.toFixed(4) + ', ' + lat.toFixed(4) + ']，附近5米的部件有：' + content,
+                    location: event.mapPoint
+                  })
 
-      //             // 查询所在社区和单元网格
-      //             const queryPos = that.layers.dx2wGrid.createQuery()
-      //             queryPos.geometry = that.view.toMap(event)
-      //             queryPos.returnGeometry = true
-      //             queryPos.outFields = ['BGID', 'COMMUID', 'COMMUNAME']
-      //             that.layers.dx2wGrid.queryFeatures(queryPos)
-      //               .then(function(response) {
-      //                 const result = response.features[0].attributes
+                  // 查询所在社区和单元网格
+                  const queryPos = that.layers.dx2wGrid.createQuery()
+                  queryPos.geometry = that.view.toMap(event)
+                  queryPos.returnGeometry = true
+                  queryPos.outFields = ['BGID', 'COMMUID', 'COMMUNAME']
+                  that.layers.dx2wGrid.queryFeatures(queryPos)
+                    .then(function(response) {
+                      const result = response.features[0].attributes
 
-      //                 // 赋值
-      //                 that.longitude = lon
-      //                 that.latitude = lat
-      //                 that.gridId = result.BGID
-      //                 that.communityId = result.COMMUID
-      //                 that.communityName = result.COMMUNAME
-      //               })
-      //           } else {
-      //             that.$message({
-      //               message: '没有查询到部件，请重新定位',
-      //               type: 'warning'
-      //             })
-      //           }
-      //         })
-      //     }
-      //   } else {
-      //     that.view.hitTest(event).then(function(response) {
-      //       if (response.results.length) {
-      //         const graphic = response.results[0].graphic
-      //         const name = graphic.attributes.KEYWORD
-      //         const address = graphic.attributes.OBJPOS
+                      // 赋值
+                      that.longitude = lon
+                      that.latitude = lat
+                      that.gridId = result.BGID
+                      that.communityId = result.COMMUID
+                      that.communityName = result.COMMUNAME
+                    })
+                } else {
+                  that.$message({
+                    message: '没有查询到部件，请重新定位',
+                    type: 'warning'
+                  })
+                }
+              })
+          }
+        } else {
+          that.view.hitTest(event).then(function(response) {
+            if (response.results.length) {
+              const graphic = response.results[0].graphic
+              const name = graphic.attributes.KEYWORD
+              const address = graphic.attributes.OBJPOS
 
-      //         that.view.popup.open({
-      //           title: name,
-      //           content: address,
-      //           location: event.mapPoint
-      //         })
-      //       }
-      //     })
-      //   }
-      // })
+              that.view.popup.open({
+                title: name,
+                content: address,
+                location: event.mapPoint
+              })
+            }
+          })
+        }
+      })
 
       this.addBjLayers()
-      this.addCasePointOnMap(this.longitude, this.latitude)
+      // this.addCasePointOnMap(116.5937, 28.249)
     },
     // 加载部件服务的各图层
     addBjLayers: function() {
@@ -347,160 +333,159 @@
         url: serverConfig.mapUrlBj + '/3',
         id: 'dxbjMph'
       })
-      // this.layers.dx2wGrid = new this.esriObj.FeatureLayer({
-      //   url: serverConfig.mapUrlBase + '/6',
-      //   id: 'gridLayer'
-      // })
+      this.layers.dx2wGrid = new this.esriObj.FeatureLayer({
+        url: serverConfig.mapUrlBase + '/1',
+        id: 'gridLayer'
+      })
 
       // 加载各图层
       this.map.add(this.layers.dxbjPoint)
       this.map.add(this.layers.dxbjLine)
       this.map.add(this.layers.dxbjXqd)
       this.map.add(this.layers.dxbjMph)
-      // this.map.add(this.layers.dx2wGrid)
+      this.map.add(this.layers.dx2wGrid)
     },
     // 在兴趣点图层查询关键字
-    // queryOnMap: function() {
-    //   const points = [] // 查询结果点集
+    queryOnMap: function() {
+      const points = [] // 查询结果点集
 
-    //   this.clearQueryResults()
-    //   this.clearEOrCPoint()
-    //   this.showEventPointPopup = false
-    //   this.queryEventSwitch = '2'
+      this.clearQueryResults()
+      this.clearEOrCPoint()
+      this.showEventPointPopup = false
+      this.queryEventSwitch = '2'
 
-    //   // 查询条件
-    //   const query = new this.esriObj.Query()
-    //   query.returnGeometry = true
-    //   query.outFields = ['*']
-    //   query.where = 'NAME like ' + "'%" + this.keywords + "%'"
-    //   const that = this
+      // 查询条件
+      const query = new this.esriObj.Query()
+      query.returnGeometry = true
+      query.outFields = ['*']
+      query.where = 'NAME like ' + "'%" + this.keywords + "%'"
+      const that = this
 
-    //   this.layers.dxbjXqd.queryFeatures(query).then(function(results) {
-    //     results.features.forEach(item => {
-    //       const point = {}
-    //       point.x = item.geometry.longitude
-    //       point.y = item.geometry.latitude
-    //       point.attr = item.attributes
-    //       points.push(point)
-    //     })
+      this.layers.dxbjXqd.queryFeatures(query).then(function(results) {
+        results.features.forEach(item => {
+          const point = {}
+          point.x = item.geometry.longitude
+          point.y = item.geometry.latitude
+          point.attr = item.attributes
+          points.push(point)
+        })
 
-    //     // 提示查询结果
-    //     if (points.length > 0) {
-    //       that.$message({
-    //         message: '成功查询到' + points.length + '条记录',
-    //         type: 'success'
-    //       })
+        // 提示查询结果
+        if (points.length > 0) {
+          that.$message({
+            message: '成功查询到' + points.length + '条记录',
+            type: 'success'
+          })
 
-    //       // 绘制点
-    //       that.addSimpleMarkerOnMap(points)
-    //     } else {
-    //       that.$message({
-    //         message: '没有查询到结果，请重新输入关键字',
-    //         type: 'warning'
-    //       })
-    //     }
-    //   })
-    // },
+          // 绘制点
+          that.addSimpleMarkerOnMap(points)
+        } else {
+          that.$message({
+            message: '没有查询到结果，请重新输入关键字',
+            type: 'warning'
+          })
+        }
+      })
+    },
     // 清除图层上的查询结果
-    // clearQueryResults: function() {
-    //   this.map.layers.forEach(layer => {
-    //     if (layer.type === 'graphics' && layer.id === queryResultLayerId) {
-    //       layer.graphics.removeAll()
-    //       return false
-    //     }
-    //   })
-    // },
-    // // 清除图层上的查询结果
-    // clearMap: function() {
-    //   // 清除地图上绘制的graphic图层
-    //   this.map.layers.forEach(layer => {
-    //     if (layer.type === 'graphics') {
-    //       layer.graphics.removeAll()
-    //       return false
-    //     }
-    //   })
+    clearQueryResults: function() {
+      this.map.layers.forEach(layer => {
+        if (layer.type === 'graphics' && layer.id === queryResultLayerId) {
+          layer.graphics.removeAll()
+          return false
+        }
+      })
+    },
+    // 清除图层上的查询结果
+    clearMap: function() {
+      // 清除地图上绘制的graphic图层
+      this.map.layers.forEach(layer => {
+        if (layer.type === 'graphics') {
+          layer.graphics.removeAll()
+          return false
+        }
+      })
 
-    //   // 清除弹出框
-    //   this.view.popup.close()
+      // 清除弹出框
+      this.view.popup.close()
 
-    //   // 清除data属性值
-    //   this.keywords = ''
-    //   this.showEventPointPopup = true // 是否显示事部件的popup
-    //   this.queryEventSwitch = '1' // 1==查询事件；0==查询部件
-    //   this.compListOpts = [] // 部件选择下拉框option
-    //   this.longitude = '' // 定位点经度
-    //   this.latitude = '' // 定位点纬度
-    //   this.communityId = '' // 社区ID
-    //   this.communityName = '' // 社区名称
-    //   this.gridId = '' // 单元网格ID
-    //   this.componentId = '' // 部件ID
-    //   this.componentName = '' // 部件名称
-    // },
+      // 清除data属性值
+      this.keywords = ''
+      this.showEventPointPopup = true // 是否显示事部件的popup
+      this.queryEventSwitch = '1' // 1==查询事件；0==查询部件
+      this.compListOpts = [] // 部件选择下拉框option
+      this.longitude = '' // 定位点经度
+      this.latitude = '' // 定位点纬度
+      this.communityId = '' // 社区ID
+      this.communityName = '' // 社区名称
+      this.gridId = '' // 单元网格ID
+      this.componentId = '' // 部件ID
+      this.componentName = '' // 部件名称
+    },
     // 清除图层上的事件定位点
-    // clearEOrCPoint: function() {
-    //   this.map.layers.forEach(layer => {
-    //     if (layer.type === 'graphics' && layer.id === eventPointLayerId) {
-    //       layer.graphics.removeAll()
-    //       return false
-    //     }
-    //   })
-    //   // 清除弹出框
-    //   this.view.popup.close()
-    // },
+    clearEOrCPoint: function() {
+      this.map.layers.forEach(layer => {
+        if (layer.type === 'graphics' && layer.id === eventPointLayerId) {
+          layer.graphics.removeAll()
+          return false
+        }
+      })
+      // 清除弹出框
+      this.view.popup.close()
+    },
     // 切换
-    // switchEventOrComponent: function() {
-    //   // 如果选中的是事件定位（1）或部件定位（0），点击地图时弹出事件或者部件的popup；否则（2以上）显示兴趣点结果的属性popup
-    //   this.showEventPointPopup = this.queryEventSwitch < 2
-    // },
+    switchEventOrComponent: function() {
+      // 如果选中的是事件定位（1）或部件定位（0），点击地图时弹出事件或者部件的popup；否则（2以上）显示兴趣点结果的属性popup
+      this.showEventPointPopup = this.queryEventSwitch < 2
+    },
     // 将查询结果点集合绘制在地图上
-    // addSimpleMarkerOnMap: function(points) {
-    //   const gLayer = new this.esriObj.GraphicsLayer()
-    //   points.forEach(item => {
-    //     const point = new this.esriObj.Point(item.x, item.y, item.attr)
-    //     const marker = new this.esriObj.SimpleMarkerSymbol()
-    //     marker.color = '#F9690E'
-    //     marker.outline = {
-    //       color: [128, 128, 128, 0.5],
-    //       width: '2px'
-    //     }
-    //     const graphic = new this.esriObj.Graphic({
-    //       geometry: point,
-    //       symbol: marker,
-    //       attributes: item.attr
-    //     })
-    //     gLayer.id = queryResultLayerId
-    //     gLayer.add(graphic)
-    //   })
-    //   this.map.add(gLayer)
-    // },
+    addSimpleMarkerOnMap: function(points) {
+      const gLayer = new this.esriObj.GraphicsLayer()
+      points.forEach(item => {
+        const point = new this.esriObj.Point(item.x, item.y, item.attr)
+        const marker = new this.esriObj.SimpleMarkerSymbol()
+        marker.color = '#F9690E'
+        marker.outline = {
+          color: [128, 128, 128, 0.5],
+          width: '2px'
+        }
+        const graphic = new this.esriObj.Graphic({
+          geometry: point,
+          symbol: marker,
+          attributes: item.attr
+        })
+        gLayer.id = queryResultLayerId
+        gLayer.add(graphic)
+      })
+      this.map.add(gLayer)
+    },
     // 返回事件定位的结果
-    // checkEventPoint: function() {
-    //   this.$emit(
-    //     'closeMapQueryDialogByEvent',
-    //     this.longitude,
-    //     this.latitude,
-    //     this.communityId,
-    //     this.communityName,
-    //     this.gridId)
+    checkEventPoint: function() {
+      this.$emit(
+        'closeMapQueryDialogByEvent',
+        this.longitude,
+        this.latitude,
+        this.communityId,
+        this.communityName,
+        this.gridId)
 
-    //   this.clearMap()
-    // },
-    // // 返回部件定位的结果
-    // checkComponentPoint: function() {
-    //   this.$emit(
-    //     'closeMapQueryDialogByComp',
-    //     this.longitude,
-    //     this.latitude,
-    //     this.communityId,
-    //     this.communityName,
-    //     this.gridId,
-    //     this.componentId)
+      this.clearMap()
+    },
+    // 返回部件定位的结果
+    checkComponentPoint: function() {
+      this.$emit(
+        'closeMapQueryDialogByComp',
+        this.longitude,
+        this.latitude,
+        this.communityId,
+        this.communityName,
+        this.gridId,
+        this.componentId)
 
-    //   this.clearMap()
-    // },
+      this.clearMap()
+    },
     // 在地图上添加指定坐标的点
     addCasePointOnMap: function(lng, lat) {
-      console.log('addCasePointOnMap', lng, lat)
       const gLayer = new this.esriObj.GraphicsLayer() // 添加自定义绘制点的图层
       const point = new this.esriObj.Point(lng, lat) // 创建geometry对象
       const marker = new this.esriObj.SimpleMarkerSymbol() // 创建marker标识
@@ -521,14 +506,14 @@
 
       // 重新设置地图中心点并移动
       this.view.center = point
-      this.view.goTo(point)
+      this.view.goTo()
     }
   }
 }
 </script>
 
 <style scoped>
-  @import 'https://js.arcgis.com/4.13/esri/css/main.css';
+  @import 'http://192.168.8.205/arcgis_js_api/library/4.12/esri/css/main.css';
   .baseMap {
     height:60vh;
     width: 100%;

diff --git a/src/api/busAdmin/areaPersonliable.js b/src/api/busAdmin/areaPersonliable.js
new file mode 100644
index 0000000..58737bb
--- /dev/null
+++ b/src/api/busAdmin/areaPersonliable.js
@@ -0,0 +1,45 @@
+import request from '@/utils/request'
+
+export function getAreaPersonliableList(params) {
+  return request({
+    url: '/areaPersonliable/listPage',
+    method: 'get',
+    params
+  })
+}
+
+export function addAreaPersonliable(params) {
+  return request({
+    url: '/areaPersonliable/add',
+    method: 'post',
+    params
+  })
+}
+
+export function updateAreaPersonliable(params) {
+  return request({
+    url: '/areaPersonliable/update',
+    method: 'post',
+    params
+  })
+}
+
+export function deleteAreaPersonliable(id) {
+  return request({
+    url: '/areaPersonliable/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+export function getSupervisorList() {
+  return request({
+    url: '/mgr/simplelist',
+    method: 'post',
+    params: {
+      roleTips: 'supervisor'
+    }
+  })
+}
diff --git a/src/api/callCase/callCase.js b/src/api/callCase/callCase.js
new file mode 100644
index 0000000..7500fc7
--- /dev/null
+++ b/src/api/callCase/callCase.js
@@ -0,0 +1,87 @@
+/**
+ * 新建案卷的接口
+ */
+import request from '@/utils/request'
+
+// 获取案卷信息来源
+export function getCaseSource(params) {
+  return request({
+    url: 'dict/code/caseSource',
+    method: 'get',
+    params
+  })
+}
+
+// 获取案卷等级
+export function getCaseLevel(params) {
+  return request({
+    url: 'dict/code/caseLevel',
+    method: 'get',
+    params
+  })
+}
+
+// 获取案卷类别
+export function getCaseEorC(params) {
+  return request({
+    url: 'dict/code/eorc',
+    method: 'get',
+    params
+  })
+}
+
+// 根据案卷类别获取案卷大类
+export function getCaseType(eorc) {
+  return request({
+    url: 'case/type/list',
+    method: 'get',
+    params: {
+      eorc: eorc
+    }
+  })
+}
+
+// 根据案卷大类获取案卷小类
+export function getCaseDetailType(caseTypeId) {
+  return request({
+    url: 'case/typeDetail/list',
+    method: 'get',
+    params: {
+      typeId: caseTypeId
+    }
+  })
+}
+
+// 根据案卷小类获取结案标准
+export function getCaseTypesTime(caseTypeDetailId) {
+  return request({
+    url: 'case/typesTime/list',
+    method: 'get',
+    params: {
+      detailId: caseTypeDetailId
+    }
+  })
+}
+
+// 获取监督员列表
+export function getVerifyPerson(params) {
+  return request({
+    url: 'mgr/simplelist',
+    method: 'post',
+    params: {
+      roleTips: 'supervisor'
+    }
+  })
+}
+
+// 新增案卷
+export function addCase(params) {
+  return request({
+    url: 'case/add',
+    method: 'post',
+    headers: {
+      'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
+    },
+    params
+  })
+}
diff --git a/src/api/coorBusiness/case.js b/src/api/coorBusiness/case.js
index ec5a88a..08c3a13 100644
--- a/src/api/coorBusiness/case.js
+++ b/src/api/coorBusiness/case.js
@@ -110,9 +110,10 @@
   })
 }
 
+// 待处理
 export function toHandleListPage(params) {
   return request({
-    url: 'case/toHandleListPage/',
+    url: 'case/toProcessListPage/',
     method: 'get',
     params
   })
@@ -158,9 +159,10 @@
   })
 }
 
+// 待核查
 export function toCheckListPage(params) {
   return request({
-    url: 'case/toCheckListPage/',
+    url: 'case/toDisCheckListPage/',
     method: 'get',
     params
   })
diff --git a/src/components/CaseCommon/caseDetail.vue b/src/components/CaseCommon/caseDetail.vue
index f6c23ab..fdadcba 100644
--- a/src/components/CaseCommon/caseDetail.vue
+++ b/src/components/CaseCommon/caseDetail.vue
@@ -276,7 +276,7 @@
     </el-row>
     <el-row>
       <div class="title">数据流转:</div>
-      <el-table :data="recordList" :header-cell-style="{background:'#f3f3f3'}" class="table" border>
+      <el-table :data="recordList" :header-cell-style="{background:'#f3f3f3'}" max-height="400" class="table" border>
         <el-table-column prop="operationTypeName" label="操作" align="center"/>
         <el-table-column prop="deptName" label="单位" align="center"/>
         <el-table-column prop="userName" label="人员" align="center"/>
@@ -293,7 +293,7 @@
       :append-to-body="true"
       title="位置详情"
     >
-      <arc-gis-map :longitude="Number(caseDetail.lng)" :latitude="Number(caseDetail.lat)"/>
+      <arc-gis-map-read :longitude="Number(caseDetail.lng)" :latitude="Number(caseDetail.lat)"/>
     </el-dialog>
   </div>
 </template>
@@ -303,12 +303,12 @@
 import { getCaseDetail, getUserList, getDeptList, getCaseTypeList, getCaseTypeDetailList, getCaseTypeTimes } from '@/api/coorBusiness/case'
 import { getCommonLanguage, getFilingTypeList, getCaseLevelList } from '@/api/coorBusiness/dict'
 import { historicalRecords, nextNodes, completeCaseTask } from '@/api/coorBusiness/process'
-import ArcGisMap from '@/components/Map/arcgisMap'
+import ArcGisMapRead from '@/components/Map/arcgisMapRead'
 import { radioMap } from './radioMap'
 
 export default {
   name: 'CaseDetail',
-  components: { ArcGisMap },
+  components: { ArcGisMapRead },
   // props: {
   //   id: {
   //     type: String,
@@ -334,7 +334,6 @@
       showNeedVisit: false,
       caseDetail: {},
       operationKey: '', // 案件处理按钮key
-      imgurl: 'http:\\\\192.168.8.201:8083\\static\\',
       fileIdVerify: [], // 核实照片id
       fileIdProcess: [], // 处理照片id
       fileIdCheck: [], // 核查照片id
@@ -358,10 +357,12 @@
   computed: {
     isNeedVisit: function() {
       return this.caseDetail.isNeedRevisit === 1 ? '需要回访' : '不需要回访'
+    },
+    imgurl() {
+      return process.env.BASE_API + '/static/'
     }
   },
-  mounted() {
-    console.log('case dtial')
+  created() {
     this.id = this.$route.query.id
     this.showProcess = (this.$route.query.showProcess || this.$route.query.showProcess === false) ? this.$route.query.showProcess : true
     this.showNeedVisit = this.$route.query.showNeedVisit ? this.$route.query.showNeedVisit : false
@@ -371,7 +372,6 @@
     async initData() {
       // 查询案件详情接口
       const resDetail = await getCaseDetail(this.id)
-      console.log('detail', resDetail)
       this.caseDetail = resDetail.data[0]
 
       // 解析图片id
@@ -391,9 +391,11 @@
 
       // 查询流转记录接口
       this.processForm.processId = this.caseDetail.processId
-      const resRecord = await historicalRecords(this.processForm.processId)
-      this.recordList = resRecord.data
-      console.log(this.recordList)
+      // const resRecord = historicalRecords(this.processForm.processId)
+      // this.recordList = resRecord.data
+      historicalRecords(this.processForm.processId).then(res => {
+        this.recordList = res.data
+      })
 
       if (this.showProcess) {
         this.initProcess()
@@ -701,6 +703,7 @@
   .table{
     margin: 20px;
     width: 98%;
+    // max-height: 250px;
   }
   .title{
     margin-left: 38px;
diff --git a/src/components/CaseCommon/caseDetailRead.vue b/src/components/CaseCommon/caseDetailRead.vue
index 82066db..a4e87b0 100644
--- a/src/components/CaseCommon/caseDetailRead.vue
+++ b/src/components/CaseCommon/caseDetailRead.vue
@@ -158,11 +158,11 @@
 
 <script>
 import { getCaseDetail } from '@/api/coorBusiness/case'
-import ArcGisMap from '@/components/Map/arcgisMap'
+import ArcGisMapRead from '@/components/Map/arcgisMapRead'
 
 export default {
   name: 'CaseDetail',
-  components: { ArcGisMap },
+  components: { ArcGisMapRead },
   props: {
     id: {
       type: String,
diff --git a/src/components/Map/ArcGISConfig.js b/src/components/Map/ArcGISConfig.js
index d325da9..50cea3b 100644
--- a/src/components/Map/ArcGISConfig.js
+++ b/src/components/Map/ArcGISConfig.js
@@ -1,14 +1,16 @@
 export const mapConfig = {
-  apiUrl: 'https://js.arcgis.com/4.13/', // 暂时使用管网提供的api，实际部署时建议离线部署一套
+  apiUrl: 'http://192.168.8.205/arcgis_js_api/library/4.12/init.js', // 暂时使用管网提供的api，实际部署时建议离线部署一套
+  // apiUrl: 'https://js.arcgis.com/4.13/',
   mapIp: '223.84.218.107', // 服务ip
   mapPort: '6080', // 服务端口
-  serverBase: 'http://223.84.218.107:6080/arcgis/rest/services/', // 服务地址前缀
+  serverBase: 'http://192.168.8.205:6080/arcgis/rest/services/', // 服务地址前缀
+  // serverBase: 'http://223.84.218.107:6080/arcgis/rest/services/dx/',
   mapCenter: '[116.597,28.24]' // 地图中心点
 }
 
 export const serverConfig = {
-  mapUrlBase: mapConfig.serverBase + 'dx/2w/MapServer', // 底图服务地址
-  mapUrlBj: mapConfig.serverBase + 'dx/dxbj/MapServer', // 部件服务地址
-  mapUrlBjfc: mapConfig.serverBase + 'dx/bjfc/MapServer', // 部件分层服务地址
-  mapUrlBjEdit: mapConfig.serverBase + 'dx/dxbj/FeatureServer' // 可编辑的部件图层
+  mapUrlBase: mapConfig.serverBase + '2w/MapServer', // 底图服务地址
+  mapUrlBj: mapConfig.serverBase + 'dxbj/MapServer', // 部件服务地址
+  mapUrlBjfc: mapConfig.serverBase + 'bjfc/MapServer', // 部件分层服务地址
+  mapUrlBjEdit: mapConfig.serverBase + 'dxbj/FeatureServer' // 可编辑的部件图层
 }
diff --git a/src/components/Map/arcgisMap.vue b/src/components/Map/arcgisMap.vue
index 53776f1..5c15383 100644
--- a/src/components/Map/arcgisMap.vue
+++ b/src/components/Map/arcgisMap.vue
@@ -1,6 +1,6 @@
 <template>
-  <div style="margin-top:-30px">
-    <!-- <el-row :gutter="20">
+  <div>
+    <el-row :gutter="20">
       <el-col :span="4">
         <el-input v-model="keywords" size="small" type="text" placeholder="兴趣点关键字" clearable />
       </el-col>
@@ -31,9 +31,9 @@
       <el-col v-if="queryEventSwitch === '1'" :span="8" style="text-align: right;">
         <el-button type="primary" size="small" @click="checkEventPoint"> 事件提交 </el-button>
       </el-col>
-    </el-row> -->
+    </el-row>
 
-    <div v-loading="mapLoading" ref="mapDiv" class="baseMap" />
+    <div ref="mapDiv" class="baseMap" />
   </div>
 </template>
 
@@ -45,22 +45,12 @@
   url: mapConfig.apiUrl
 }
 
-// const eventPointLayerId = 'eventPointLayer' // 事件定位点的图层id
-// const queryResultLayerId = 'queryResultLayer' // 兴趣点查询结果点集的图层id
+const eventPointLayerId = 'eventPointLayer' // 事件定位点的图层id
+const queryResultLayerId = 'queryResultLayer' // 兴趣点查询结果点集的图层id
 const caseLayerId = 'addedGeometryLayerId' // 案卷点图层
 
 export default {
-  name: 'ArcGisMap',
-  props: {
-    longitude: {
-      type: Number,
-      default: 116.5937
-    },
-    latitude: {
-      type: Number,
-      default: 28.249
-    }
-  },
+  name: 'ArcGISMap',
   data() {
     return {
       map: '',
@@ -89,19 +79,18 @@
         IdentifyParameters: '',
         MapView: ''
       },
-      mapLoading: false
-      // keywords: '', // 查询关键字
-      // showEventPointPopup: true, // 是否显示事部件的popup
-      // queryEventSwitch: '1', // 1==查询事件；0==查询部件
-      // compListOpts: [], // 部件选择下拉框option
+      keywords: '', // 查询关键字
+      showEventPointPopup: true, // 是否显示事部件的popup
+      queryEventSwitch: '1', // 1==查询事件；0==查询部件
+      compListOpts: [], // 部件选择下拉框option
       // 主页面返回值
-      // longitude: '', // 定位点经度
-      // latitude: '' // 定位点纬度
-      // communityId: '', // 社区ID
-      // communityName: '', // 社区名称
-      // gridId: '', // 单元网格ID
-      // componentId: '', // 部件ID
-      // componentName: '' // 部件名称/=
+      longitude: '', // 定位点经度
+      latitude: '', // 定位点纬度
+      communityId: '', // 社区ID
+      communityName: '', // 社区名称
+      gridId: '', // 单元网格ID
+      componentId: '', // 部件ID
+      componentName: '' // 部件名称
     }
   },
   mounted() {
@@ -110,7 +99,6 @@
   methods: {
     // 初始化ArcGIS API对象
     importEsri: function() {
-      this.mapLoading = true
       loadModules([
         'esri/Map',
         'esri/Basemap',
@@ -164,10 +152,8 @@
 
           // 初始化地图
           this.initMap()
-          this.mapLoading = false
         }).catch(err => {
           console.log(err)
-          this.mapLoading = false
         })
     },
     // 初始化地图
@@ -194,139 +180,139 @@
         zoom: 3 // 当前地图缩放等级
       })
 
-      // const that = this
-      // this.view.on('click', function(event) {
-      //   // 清除地图上已有的事件/部件查询点
-      //   that.clearEOrCPoint()
+      const that = this
+      this.view.on('click', function(event) {
+        // 清除地图上已有的事件/部件查询点
+        that.clearEOrCPoint()
 
-      //   const lon = event.mapPoint.longitude
-      //   const lat = event.mapPoint.latitude
+        const lon = event.mapPoint.longitude
+        const lat = event.mapPoint.latitude
 
-      //   if (that.showEventPointPopup) {
-      //     // 添加点
-      //     const gLayer = new that.esriObj.GraphicsLayer()
-      //     const marker = new that.esriObj.SimpleMarkerSymbol()
-      //     marker.color = '#35A0E7'
-      //     marker.style = 'square'
-      //     marker.outline = {
-      //       color: [128, 128, 128, 0.5],
-      //       width: '2px'
-      //     }
-      //     const graphic = new that.esriObj.Graphic({
-      //       geometry: event.mapPoint,
-      //       symbol: marker
-      //     })
+        if (that.showEventPointPopup) {
+          // 添加点
+          const gLayer = new that.esriObj.GraphicsLayer()
+          const marker = new that.esriObj.SimpleMarkerSymbol()
+          marker.color = '#35A0E7'
+          marker.style = 'square'
+          marker.outline = {
+            color: [128, 128, 128, 0.5],
+            width: '2px'
+          }
+          const graphic = new that.esriObj.Graphic({
+            geometry: event.mapPoint,
+            symbol: marker
+          })
 
-      //     gLayer.id = eventPointLayerId
-      //     gLayer.add(graphic)
-      //     that.map.add(gLayer)
+          gLayer.id = eventPointLayerId
+          gLayer.add(graphic)
+          that.map.add(gLayer)
 
-      //     // 查询事件或者部件
-      //     if (that.queryEventSwitch === '1') {
-      //       // 事件定位
-      //       // 1查询底图得到所在网格与所在社区
-      //       const query = that.layers.dx2wGrid.createQuery()
-      //       query.geometry = that.view.toMap(event)
-      //       query.distance = 10
-      //       query.units = 'meters'
-      //       query.returnGeometry = true
-      //       query.outFields = ['BGID', 'COMMUID', 'COMMUNAME']
-      //       that.layers.dx2wGrid.queryFeatures(query)
-      //         .then(function(response) {
-      //           const result = response.features[0].attributes
+          // 查询事件或者部件
+          if (that.queryEventSwitch === '1') {
+            // 事件定位
+            // 1查询底图得到所在网格与所在社区
+            const query = that.layers.dx2wGrid.createQuery()
+            query.geometry = that.view.toMap(event)
+            query.distance = 10
+            query.units = 'meters'
+            query.returnGeometry = true
+            query.outFields = ['BGID', 'COMMUID', 'COMMUNAME']
+            that.layers.dx2wGrid.queryFeatures(query)
+              .then(function(response) {
+                const result = response.features[0].attributes
 
-      //           // 赋值
-      //           that.longitude = lon
-      //           that.latitude = lat
-      //           that.gridId = result.BGID
-      //           that.communityId = result.COMMUID
-      //           that.communityName = result.COMMUNAME
+                // 赋值
+                that.longitude = lon
+                that.latitude = lat
+                that.gridId = result.BGID
+                that.communityId = result.COMMUID
+                that.communityName = result.COMMUNAME
 
-      //           // 2弹出气泡
-      //           that.view.popup.open({
-      //             title: '事件定位',
-      //             content: '坐标：[' + lon.toFixed(4) + ', ' + lat.toFixed(4) + ']' + '<p>' + '所在社区：' + result.COMMUNAME,
-      //             location: event.mapPoint
-      //           })
-      //         })
-      //     } else if (that.queryEventSwitch === '0') {
-      //       // 部件定位
-      //       const queryDev = that.layers.dxbjPoint.createQuery()
-      //       // 定义查询的圆形范围，半径5米
-      //       const circle = new that.esriObj.Circle({
-      //         center: event.mapPoint,
-      //         radius: 5,
-      //         radiusUnit: 'meters'
-      //       })
-      //       queryDev.geometry = circle
-      //       queryDev.returnGeometry = true
-      //       queryDev.outFields = ['BGID', 'OBJID', 'OBJNAME', 'OBJPOS']
-      //       that.layers.dxbjPoint.queryFeatures(queryDev)
-      //         .then(function(response) {
-      //           if (response.features.length > 0) {
-      //             const results = response.features
+                // 2弹出气泡
+                that.view.popup.open({
+                  title: '事件定位',
+                  content: '坐标：[' + lon.toFixed(4) + ', ' + lat.toFixed(4) + ']' + '<p>' + '所在社区：' + result.COMMUNAME,
+                  location: event.mapPoint
+                })
+              })
+          } else if (that.queryEventSwitch === '0') {
+            // 部件定位
+            const queryDev = that.layers.dxbjPoint.createQuery()
+            // 定义查询的圆形范围，半径5米
+            const circle = new that.esriObj.Circle({
+              center: event.mapPoint,
+              radius: 5,
+              radiusUnit: 'meters'
+            })
+            queryDev.geometry = circle
+            queryDev.returnGeometry = true
+            queryDev.outFields = ['BGID', 'OBJID', 'OBJNAME', 'OBJPOS']
+            that.layers.dxbjPoint.queryFeatures(queryDev)
+              .then(function(response) {
+                if (response.features.length > 0) {
+                  const results = response.features
 
-      //             that.compListOpts = []
+                  that.compListOpts = []
 
-      //             let content = ''
-      //             results.forEach((item, index) => {
-      //               content += '<p>部件' + (index + 1) + '：' + item.attributes.OBJNAME + '，' + item.attributes.OBJPOS
-      //               const comp = {}
-      //               comp.name = '部件' + (index + 1) + '：' + item.attributes.OBJNAME
-      //               comp.value = item.attributes.OBJID
-      //               that.compListOpts.push(comp)
-      //             })
+                  let content = ''
+                  results.forEach((item, index) => {
+                    content += '<p>部件' + (index + 1) + '：' + item.attributes.OBJNAME + '，' + item.attributes.OBJPOS
+                    const comp = {}
+                    comp.name = '部件' + (index + 1) + '：' + item.attributes.OBJNAME
+                    comp.value = item.attributes.OBJID
+                    that.compListOpts.push(comp)
+                  })
 
-      //             // 2弹出气泡
-      //             that.view.popup.open({
-      //               title: '部件定位',
-      //               content: '坐标：[' + lon.toFixed(4) + ', ' + lat.toFixed(4) + ']，附近5米的部件有：' + content,
-      //               location: event.mapPoint
-      //             })
+                  // 2弹出气泡
+                  that.view.popup.open({
+                    title: '部件定位',
+                    content: '坐标：[' + lon.toFixed(4) + ', ' + lat.toFixed(4) + ']，附近5米的部件有：' + content,
+                    location: event.mapPoint
+                  })
 
-      //             // 查询所在社区和单元网格
-      //             const queryPos = that.layers.dx2wGrid.createQuery()
-      //             queryPos.geometry = that.view.toMap(event)
-      //             queryPos.returnGeometry = true
-      //             queryPos.outFields = ['BGID', 'COMMUID', 'COMMUNAME']
-      //             that.layers.dx2wGrid.queryFeatures(queryPos)
-      //               .then(function(response) {
-      //                 const result = response.features[0].attributes
+                  // 查询所在社区和单元网格
+                  const queryPos = that.layers.dx2wGrid.createQuery()
+                  queryPos.geometry = that.view.toMap(event)
+                  queryPos.returnGeometry = true
+                  queryPos.outFields = ['BGID', 'COMMUID', 'COMMUNAME']
+                  that.layers.dx2wGrid.queryFeatures(queryPos)
+                    .then(function(response) {
+                      const result = response.features[0].attributes
 
-      //                 // 赋值
-      //                 that.longitude = lon
-      //                 that.latitude = lat
-      //                 that.gridId = result.BGID
-      //                 that.communityId = result.COMMUID
-      //                 that.communityName = result.COMMUNAME
-      //               })
-      //           } else {
-      //             that.$message({
-      //               message: '没有查询到部件，请重新定位',
-      //               type: 'warning'
-      //             })
-      //           }
-      //         })
-      //     }
-      //   } else {
-      //     that.view.hitTest(event).then(function(response) {
-      //       if (response.results.length) {
-      //         const graphic = response.results[0].graphic
-      //         const name = graphic.attributes.KEYWORD
-      //         const address = graphic.attributes.OBJPOS
+                      // 赋值
+                      that.longitude = lon
+                      that.latitude = lat
+                      that.gridId = result.BGID
+                      that.communityId = result.COMMUID
+                      that.communityName = result.COMMUNAME
+                    })
+                } else {
+                  that.$message({
+                    message: '没有查询到部件，请重新定位',
+                    type: 'warning'
+                  })
+                }
+              })
+          }
+        } else {
+          that.view.hitTest(event).then(function(response) {
+            if (response.results.length) {
+              const graphic = response.results[0].graphic
+              const name = graphic.attributes.KEYWORD
+              const address = graphic.attributes.OBJPOS
 
-      //         that.view.popup.open({
-      //           title: name,
-      //           content: address,
-      //           location: event.mapPoint
-      //         })
-      //       }
-      //     })
-      //   }
-      // })
+              that.view.popup.open({
+                title: name,
+                content: address,
+                location: event.mapPoint
+              })
+            }
+          })
+        }
+      })
 
       this.addBjLayers()
-      this.addCasePointOnMap(this.longitude, this.latitude)
+      // this.addCasePointOnMap(116.5937, 28.249)
     },
     // 加载部件服务的各图层
     addBjLayers: function() {
@@ -347,160 +333,159 @@
         url: serverConfig.mapUrlBj + '/3',
         id: 'dxbjMph'
       })
-      // this.layers.dx2wGrid = new this.esriObj.FeatureLayer({
-      //   url: serverConfig.mapUrlBase + '/6',
-      //   id: 'gridLayer'
-      // })
+      this.layers.dx2wGrid = new this.esriObj.FeatureLayer({
+        url: serverConfig.mapUrlBase + '/1',
+        id: 'gridLayer'
+      })
 
       // 加载各图层
       this.map.add(this.layers.dxbjPoint)
       this.map.add(this.layers.dxbjLine)
       this.map.add(this.layers.dxbjXqd)
       this.map.add(this.layers.dxbjMph)
-      // this.map.add(this.layers.dx2wGrid)
+      this.map.add(this.layers.dx2wGrid)
     },
     // 在兴趣点图层查询关键字
-    // queryOnMap: function() {
-    //   const points = [] // 查询结果点集
+    queryOnMap: function() {
+      const points = [] // 查询结果点集
 
-    //   this.clearQueryResults()
-    //   this.clearEOrCPoint()
-    //   this.showEventPointPopup = false
-    //   this.queryEventSwitch = '2'
+      this.clearQueryResults()
+      this.clearEOrCPoint()
+      this.showEventPointPopup = false
+      this.queryEventSwitch = '2'
 
-    //   // 查询条件
-    //   const query = new this.esriObj.Query()
-    //   query.returnGeometry = true
-    //   query.outFields = ['*']
-    //   query.where = 'NAME like ' + "'%" + this.keywords + "%'"
-    //   const that = this
+      // 查询条件
+      const query = new this.esriObj.Query()
+      query.returnGeometry = true
+      query.outFields = ['*']
+      query.where = 'NAME like ' + "'%" + this.keywords + "%'"
+      const that = this
 
-    //   this.layers.dxbjXqd.queryFeatures(query).then(function(results) {
-    //     results.features.forEach(item => {
-    //       const point = {}
-    //       point.x = item.geometry.longitude
-    //       point.y = item.geometry.latitude
-    //       point.attr = item.attributes
-    //       points.push(point)
-    //     })
+      this.layers.dxbjXqd.queryFeatures(query).then(function(results) {
+        results.features.forEach(item => {
+          const point = {}
+          point.x = item.geometry.longitude
+          point.y = item.geometry.latitude
+          point.attr = item.attributes
+          points.push(point)
+        })
 
-    //     // 提示查询结果
-    //     if (points.length > 0) {
-    //       that.$message({
-    //         message: '成功查询到' + points.length + '条记录',
-    //         type: 'success'
-    //       })
+        // 提示查询结果
+        if (points.length > 0) {
+          that.$message({
+            message: '成功查询到' + points.length + '条记录',
+            type: 'success'
+          })
 
-    //       // 绘制点
-    //       that.addSimpleMarkerOnMap(points)
-    //     } else {
-    //       that.$message({
-    //         message: '没有查询到结果，请重新输入关键字',
-    //         type: 'warning'
-    //       })
-    //     }
-    //   })
-    // },
+          // 绘制点
+          that.addSimpleMarkerOnMap(points)
+        } else {
+          that.$message({
+            message: '没有查询到结果，请重新输入关键字',
+            type: 'warning'
+          })
+        }
+      })
+    },
     // 清除图层上的查询结果
-    // clearQueryResults: function() {
-    //   this.map.layers.forEach(layer => {
-    //     if (layer.type === 'graphics' && layer.id === queryResultLayerId) {
-    //       layer.graphics.removeAll()
-    //       return false
-    //     }
-    //   })
-    // },
-    // // 清除图层上的查询结果
-    // clearMap: function() {
-    //   // 清除地图上绘制的graphic图层
-    //   this.map.layers.forEach(layer => {
-    //     if (layer.type === 'graphics') {
-    //       layer.graphics.removeAll()
-    //       return false
-    //     }
-    //   })
+    clearQueryResults: function() {
+      this.map.layers.forEach(layer => {
+        if (layer.type === 'graphics' && layer.id === queryResultLayerId) {
+          layer.graphics.removeAll()
+          return false
+        }
+      })
+    },
+    // 清除图层上的查询结果
+    clearMap: function() {
+      // 清除地图上绘制的graphic图层
+      this.map.layers.forEach(layer => {
+        if (layer.type === 'graphics') {
+          layer.graphics.removeAll()
+          return false
+        }
+      })
 
-    //   // 清除弹出框
-    //   this.view.popup.close()
+      // 清除弹出框
+      this.view.popup.close()
 
-    //   // 清除data属性值
-    //   this.keywords = ''
-    //   this.showEventPointPopup = true // 是否显示事部件的popup
-    //   this.queryEventSwitch = '1' // 1==查询事件；0==查询部件
-    //   this.compListOpts = [] // 部件选择下拉框option
-    //   this.longitude = '' // 定位点经度
-    //   this.latitude = '' // 定位点纬度
-    //   this.communityId = '' // 社区ID
-    //   this.communityName = '' // 社区名称
-    //   this.gridId = '' // 单元网格ID
-    //   this.componentId = '' // 部件ID
-    //   this.componentName = '' // 部件名称
-    // },
+      // 清除data属性值
+      this.keywords = ''
+      this.showEventPointPopup = true // 是否显示事部件的popup
+      this.queryEventSwitch = '1' // 1==查询事件；0==查询部件
+      this.compListOpts = [] // 部件选择下拉框option
+      this.longitude = '' // 定位点经度
+      this.latitude = '' // 定位点纬度
+      this.communityId = '' // 社区ID
+      this.communityName = '' // 社区名称
+      this.gridId = '' // 单元网格ID
+      this.componentId = '' // 部件ID
+      this.componentName = '' // 部件名称
+    },
     // 清除图层上的事件定位点
-    // clearEOrCPoint: function() {
-    //   this.map.layers.forEach(layer => {
-    //     if (layer.type === 'graphics' && layer.id === eventPointLayerId) {
-    //       layer.graphics.removeAll()
-    //       return false
-    //     }
-    //   })
-    //   // 清除弹出框
-    //   this.view.popup.close()
-    // },
+    clearEOrCPoint: function() {
+      this.map.layers.forEach(layer => {
+        if (layer.type === 'graphics' && layer.id === eventPointLayerId) {
+          layer.graphics.removeAll()
+          return false
+        }
+      })
+      // 清除弹出框
+      this.view.popup.close()
+    },
     // 切换
-    // switchEventOrComponent: function() {
-    //   // 如果选中的是事件定位（1）或部件定位（0），点击地图时弹出事件或者部件的popup；否则（2以上）显示兴趣点结果的属性popup
-    //   this.showEventPointPopup = this.queryEventSwitch < 2
-    // },
+    switchEventOrComponent: function() {
+      // 如果选中的是事件定位（1）或部件定位（0），点击地图时弹出事件或者部件的popup；否则（2以上）显示兴趣点结果的属性popup
+      this.showEventPointPopup = this.queryEventSwitch < 2
+    },
     // 将查询结果点集合绘制在地图上
-    // addSimpleMarkerOnMap: function(points) {
-    //   const gLayer = new this.esriObj.GraphicsLayer()
-    //   points.forEach(item => {
-    //     const point = new this.esriObj.Point(item.x, item.y, item.attr)
-    //     const marker = new this.esriObj.SimpleMarkerSymbol()
-    //     marker.color = '#F9690E'
-    //     marker.outline = {
-    //       color: [128, 128, 128, 0.5],
-    //       width: '2px'
-    //     }
-    //     const graphic = new this.esriObj.Graphic({
-    //       geometry: point,
-    //       symbol: marker,
-    //       attributes: item.attr
-    //     })
-    //     gLayer.id = queryResultLayerId
-    //     gLayer.add(graphic)
-    //   })
-    //   this.map.add(gLayer)
-    // },
+    addSimpleMarkerOnMap: function(points) {
+      const gLayer = new this.esriObj.GraphicsLayer()
+      points.forEach(item => {
+        const point = new this.esriObj.Point(item.x, item.y, item.attr)
+        const marker = new this.esriObj.SimpleMarkerSymbol()
+        marker.color = '#F9690E'
+        marker.outline = {
+          color: [128, 128, 128, 0.5],
+          width: '2px'
+        }
+        const graphic = new this.esriObj.Graphic({
+          geometry: point,
+          symbol: marker,
+          attributes: item.attr
+        })
+        gLayer.id = queryResultLayerId
+        gLayer.add(graphic)
+      })
+      this.map.add(gLayer)
+    },
     // 返回事件定位的结果
-    // checkEventPoint: function() {
-    //   this.$emit(
-    //     'closeMapQueryDialogByEvent',
-    //     this.longitude,
-    //     this.latitude,
-    //     this.communityId,
-    //     this.communityName,
-    //     this.gridId)
+    checkEventPoint: function() {
+      this.$emit(
+        'closeMapQueryDialogByEvent',
+        this.longitude,
+        this.latitude,
+        this.communityId,
+        this.communityName,
+        this.gridId)
 
-    //   this.clearMap()
-    // },
-    // // 返回部件定位的结果
-    // checkComponentPoint: function() {
-    //   this.$emit(
-    //     'closeMapQueryDialogByComp',
-    //     this.longitude,
-    //     this.latitude,
-    //     this.communityId,
-    //     this.communityName,
-    //     this.gridId,
-    //     this.componentId)
+      this.clearMap()
+    },
+    // 返回部件定位的结果
+    checkComponentPoint: function() {
+      this.$emit(
+        'closeMapQueryDialogByComp',
+        this.longitude,
+        this.latitude,
+        this.communityId,
+        this.communityName,
+        this.gridId,
+        this.componentId)
 
-    //   this.clearMap()
-    // },
+      this.clearMap()
+    },
     // 在地图上添加指定坐标的点
     addCasePointOnMap: function(lng, lat) {
-      console.log('addCasePointOnMap', lng, lat)
       const gLayer = new this.esriObj.GraphicsLayer() // 添加自定义绘制点的图层
       const point = new this.esriObj.Point(lng, lat) // 创建geometry对象
       const marker = new this.esriObj.SimpleMarkerSymbol() // 创建marker标识
@@ -521,14 +506,14 @@
 
       // 重新设置地图中心点并移动
       this.view.center = point
-      this.view.goTo(point)
+      this.view.goTo()
     }
   }
 }
 </script>
 
 <style scoped>
-  @import 'https://js.arcgis.com/4.13/esri/css/main.css';
+  @import 'http://192.168.8.205/arcgis_js_api/library/4.12/esri/css/main.css';
   .baseMap {
     height:60vh;
     width: 100%;
diff --git a/src/components/Map/arcgisMapRead.vue b/src/components/Map/arcgisMapRead.vue
new file mode 100644
index 0000000..ae2058b
--- /dev/null
+++ b/src/components/Map/arcgisMapRead.vue
@@ -0,0 +1,539 @@
+<template>
+  <div style="margin-top:-30px">
+    <!-- <el-row :gutter="20">
+      <el-col :span="4">
+        <el-input v-model="keywords" size="small" type="text" placeholder="兴趣点关键字" clearable />
+      </el-col>
+      <el-col :span="4">
+        <el-button type="primary" size="small" @click="queryOnMap">查询</el-button>
+        <el-button type="info" size="small" @click="clearMap"> 清除地图 </el-button>
+      </el-col>
+
+      <el-col :span="8" style="text-align: center;">
+        <el-radio-group v-model="queryEventSwitch" size="small" @change="switchEventOrComponent">
+          <el-radio-button label="1">事件定位</el-radio-button>
+          <el-radio-button label="0">部件定位</el-radio-button>
+          <el-radio-button label="2">兴趣点属性</el-radio-button>
+        </el-radio-group>
+      </el-col>
+
+      <el-col v-if="queryEventSwitch === '0'" :span="8" style="text-align: right;">
+        <el-select v-model="componentId" placeholder="选择部件" clearable value="" size="small">
+          <el-option
+            v-for="item in compListOpts"
+            :key="item.value"
+            :label="item.name"
+            :value="item.value"/>
+        </el-select>
+        <el-button type="primary" size="small" @click="checkComponentPoint"> 部件提交 </el-button>
+      </el-col>
+
+      <el-col v-if="queryEventSwitch === '1'" :span="8" style="text-align: right;">
+        <el-button type="primary" size="small" @click="checkEventPoint"> 事件提交 </el-button>
+      </el-col>
+    </el-row> -->
+
+    <div v-loading="mapLoading" ref="mapDiv" class="baseMap" />
+  </div>
+</template>
+
+<script>
+import { loadModules } from 'esri-loader'
+import { mapConfig, serverConfig } from './ArcGISConfig'
+
+const option = {
+  url: mapConfig.apiUrl
+}
+
+// const eventPointLayerId = 'eventPointLayer' // 事件定位点的图层id
+// const queryResultLayerId = 'queryResultLayer' // 兴趣点查询结果点集的图层id
+const caseLayerId = 'addedGeometryLayerId' // 案卷点图层
+
+export default {
+  name: 'ArcGisMapRead',
+  props: {
+    longitude: {
+      type: Number,
+      default: 116.5937
+    },
+    latitude: {
+      type: Number,
+      default: 28.249
+    }
+  },
+  data() {
+    return {
+      map: '',
+      view: '',
+      layers: {
+        dxbjPoint: '', // 部件点图层
+        dxbjLine: '', // 部件线图层
+        dxbjXqd: '', // 兴趣点图层
+        dxbjMph: '', // 门牌好图层
+        dx2wGrid: '' // 单元网格图层
+      },
+      esriObj: {
+        Map: '',
+        BaseMap: '',
+        Graphic: '',
+        PopupTemplate: '',
+        Circle: '',
+        Point: '',
+        FeatureLayer: '',
+        GraphicsLayer: '',
+        TileLayer: '',
+        SimpleMarkerSymbol: '',
+        Query: '',
+        QueryTask: '',
+        IdentifyTask: '',
+        IdentifyParameters: '',
+        MapView: ''
+      },
+      mapLoading: false
+      // keywords: '', // 查询关键字
+      // showEventPointPopup: true, // 是否显示事部件的popup
+      // queryEventSwitch: '1', // 1==查询事件；0==查询部件
+      // compListOpts: [], // 部件选择下拉框option
+      // 主页面返回值
+      // longitude: '', // 定位点经度
+      // latitude: '' // 定位点纬度
+      // communityId: '', // 社区ID
+      // communityName: '', // 社区名称
+      // gridId: '', // 单元网格ID
+      // componentId: '', // 部件ID
+      // componentName: '' // 部件名称/=
+    }
+  },
+  mounted() {
+    this.importEsri()
+  },
+  methods: {
+    // 初始化ArcGIS API对象
+    importEsri: function() {
+      this.mapLoading = true
+      loadModules([
+        'esri/Map',
+        'esri/Basemap',
+        'esri/Graphic',
+        'esri/PopupTemplate',
+        'esri/geometry/Circle',
+        'esri/geometry/Point',
+        'esri/layers/FeatureLayer',
+        'esri/layers/GraphicsLayer',
+        'esri/layers/TileLayer',
+        'esri/symbols/SimpleMarkerSymbol',
+        'esri/tasks/support/Query',
+        'esri/tasks/QueryTask',
+        'esri/tasks/IdentifyTask',
+        'esri/tasks/support/IdentifyParameters',
+        'esri/views/MapView',
+        'dojo/domReady!'
+      ], option)
+        .then(([
+          Map,
+          BaseMap,
+          Graphic,
+          PopupTemplate,
+          Circle,
+          Point,
+          FeatureLayer,
+          GraphicsLayer,
+          TileLayer,
+          SimpleMarkerSymbol,
+          Query,
+          QueryTask,
+          IdentifyTask,
+          IdentifyParameters,
+          MapView
+        ]) => {
+          this.esriObj.Map = Map
+          this.esriObj.BaseMap = BaseMap
+          this.esriObj.Graphic = Graphic
+          this.esriObj.PopupTemplate = PopupTemplate
+          this.esriObj.Circle = Circle
+          this.esriObj.Point = Point
+          this.esriObj.FeatureLayer = FeatureLayer
+          this.esriObj.GraphicsLayer = GraphicsLayer
+          this.esriObj.TileLayer = TileLayer
+          this.esriObj.SimpleMarkerSymbol = SimpleMarkerSymbol
+          this.esriObj.Query = Query
+          this.esriObj.QueryTask = QueryTask
+          this.esriObj.IdentifyTask = IdentifyTask
+          this.esriObj.IdentifyParameters = IdentifyParameters
+          this.esriObj.MapView = MapView
+
+          // 初始化地图
+          this.initMap()
+          this.mapLoading = false
+        }).catch(err => {
+          console.log(err)
+          this.mapLoading = false
+        })
+    },
+    // 初始化地图
+    initMap: function() {
+      const base = new this.esriObj.BaseMap({
+        baseLayers: [
+          new this.esriObj.TileLayer({ // 可配置属性，见TileLayer类
+            id: '2w',
+            url: serverConfig.mapUrlBase
+          })
+        ],
+        title: 'dx2w',
+        id: 'dx2w'
+      })
+
+      this.map = new this.esriObj.Map({
+        basemap: base // 底图类型，详见BaseMap类
+      })
+
+      this.view = new this.esriObj.MapView({
+        container: this.$refs.mapDiv, // 视图的容器
+        map: this.map, // Map的实例放入视图中
+        center: [116.597, 28.24], // 初始显示的地图中心点，经纬度
+        zoom: 3 // 当前地图缩放等级
+      })
+
+      // const that = this
+      // this.view.on('click', function(event) {
+      //   // 清除地图上已有的事件/部件查询点
+      //   that.clearEOrCPoint()
+
+      //   const lon = event.mapPoint.longitude
+      //   const lat = event.mapPoint.latitude
+
+      //   if (that.showEventPointPopup) {
+      //     // 添加点
+      //     const gLayer = new that.esriObj.GraphicsLayer()
+      //     const marker = new that.esriObj.SimpleMarkerSymbol()
+      //     marker.color = '#35A0E7'
+      //     marker.style = 'square'
+      //     marker.outline = {
+      //       color: [128, 128, 128, 0.5],
+      //       width: '2px'
+      //     }
+      //     const graphic = new that.esriObj.Graphic({
+      //       geometry: event.mapPoint,
+      //       symbol: marker
+      //     })
+
+      //     gLayer.id = eventPointLayerId
+      //     gLayer.add(graphic)
+      //     that.map.add(gLayer)
+
+      //     // 查询事件或者部件
+      //     if (that.queryEventSwitch === '1') {
+      //       // 事件定位
+      //       // 1查询底图得到所在网格与所在社区
+      //       const query = that.layers.dx2wGrid.createQuery()
+      //       query.geometry = that.view.toMap(event)
+      //       query.distance = 10
+      //       query.units = 'meters'
+      //       query.returnGeometry = true
+      //       query.outFields = ['BGID', 'COMMUID', 'COMMUNAME']
+      //       that.layers.dx2wGrid.queryFeatures(query)
+      //         .then(function(response) {
+      //           const result = response.features[0].attributes
+
+      //           // 赋值
+      //           that.longitude = lon
+      //           that.latitude = lat
+      //           that.gridId = result.BGID
+      //           that.communityId = result.COMMUID
+      //           that.communityName = result.COMMUNAME
+
+      //           // 2弹出气泡
+      //           that.view.popup.open({
+      //             title: '事件定位',
+      //             content: '坐标：[' + lon.toFixed(4) + ', ' + lat.toFixed(4) + ']' + '<p>' + '所在社区：' + result.COMMUNAME,
+      //             location: event.mapPoint
+      //           })
+      //         })
+      //     } else if (that.queryEventSwitch === '0') {
+      //       // 部件定位
+      //       const queryDev = that.layers.dxbjPoint.createQuery()
+      //       // 定义查询的圆形范围，半径5米
+      //       const circle = new that.esriObj.Circle({
+      //         center: event.mapPoint,
+      //         radius: 5,
+      //         radiusUnit: 'meters'
+      //       })
+      //       queryDev.geometry = circle
+      //       queryDev.returnGeometry = true
+      //       queryDev.outFields = ['BGID', 'OBJID', 'OBJNAME', 'OBJPOS']
+      //       that.layers.dxbjPoint.queryFeatures(queryDev)
+      //         .then(function(response) {
+      //           if (response.features.length > 0) {
+      //             const results = response.features
+
+      //             that.compListOpts = []
+
+      //             let content = ''
+      //             results.forEach((item, index) => {
+      //               content += '<p>部件' + (index + 1) + '：' + item.attributes.OBJNAME + '，' + item.attributes.OBJPOS
+      //               const comp = {}
+      //               comp.name = '部件' + (index + 1) + '：' + item.attributes.OBJNAME
+      //               comp.value = item.attributes.OBJID
+      //               that.compListOpts.push(comp)
+      //             })
+
+      //             // 2弹出气泡
+      //             that.view.popup.open({
+      //               title: '部件定位',
+      //               content: '坐标：[' + lon.toFixed(4) + ', ' + lat.toFixed(4) + ']，附近5米的部件有：' + content,
+      //               location: event.mapPoint
+      //             })
+
+      //             // 查询所在社区和单元网格
+      //             const queryPos = that.layers.dx2wGrid.createQuery()
+      //             queryPos.geometry = that.view.toMap(event)
+      //             queryPos.returnGeometry = true
+      //             queryPos.outFields = ['BGID', 'COMMUID', 'COMMUNAME']
+      //             that.layers.dx2wGrid.queryFeatures(queryPos)
+      //               .then(function(response) {
+      //                 const result = response.features[0].attributes
+
+      //                 // 赋值
+      //                 that.longitude = lon
+      //                 that.latitude = lat
+      //                 that.gridId = result.BGID
+      //                 that.communityId = result.COMMUID
+      //                 that.communityName = result.COMMUNAME
+      //               })
+      //           } else {
+      //             that.$message({
+      //               message: '没有查询到部件，请重新定位',
+      //               type: 'warning'
+      //             })
+      //           }
+      //         })
+      //     }
+      //   } else {
+      //     that.view.hitTest(event).then(function(response) {
+      //       if (response.results.length) {
+      //         const graphic = response.results[0].graphic
+      //         const name = graphic.attributes.KEYWORD
+      //         const address = graphic.attributes.OBJPOS
+
+      //         that.view.popup.open({
+      //           title: name,
+      //           content: address,
+      //           location: event.mapPoint
+      //         })
+      //       }
+      //     })
+      //   }
+      // })
+
+      this.addBjLayers()
+      this.addCasePointOnMap(this.longitude, this.latitude)
+    },
+    // 加载部件服务的各图层
+    addBjLayers: function() {
+      // 此处可以优化
+      this.layers.dxbjPoint = new this.esriObj.FeatureLayer({ // 可配置属性，见TileLayer类
+        url: serverConfig.mapUrlBj + '/0',
+        id: 'dxbjPoint'
+      })
+      this.layers.dxbjLine = new this.esriObj.FeatureLayer({ // 可配置属性，见TileLayer类
+        url: serverConfig.mapUrlBj + '/1',
+        id: 'dxbjLine'
+      })
+      this.layers.dxbjXqd = new this.esriObj.FeatureLayer({ // 可配置属性，见TileLayer类
+        url: serverConfig.mapUrlBj + '/2',
+        id: 'dxbjXqd'
+      })
+      this.layers.dxbjMph = new this.esriObj.FeatureLayer({ // 可配置属性，见TileLayer类
+        url: serverConfig.mapUrlBj + '/3',
+        id: 'dxbjMph'
+      })
+      // this.layers.dx2wGrid = new this.esriObj.FeatureLayer({
+      //   url: serverConfig.mapUrlBase + '/6',
+      //   id: 'gridLayer'
+      // })
+
+      // 加载各图层
+      this.map.add(this.layers.dxbjPoint)
+      this.map.add(this.layers.dxbjLine)
+      this.map.add(this.layers.dxbjXqd)
+      this.map.add(this.layers.dxbjMph)
+      // this.map.add(this.layers.dx2wGrid)
+    },
+    // 在兴趣点图层查询关键字
+    // queryOnMap: function() {
+    //   const points = [] // 查询结果点集
+
+    //   this.clearQueryResults()
+    //   this.clearEOrCPoint()
+    //   this.showEventPointPopup = false
+    //   this.queryEventSwitch = '2'
+
+    //   // 查询条件
+    //   const query = new this.esriObj.Query()
+    //   query.returnGeometry = true
+    //   query.outFields = ['*']
+    //   query.where = 'NAME like ' + "'%" + this.keywords + "%'"
+    //   const that = this
+
+    //   this.layers.dxbjXqd.queryFeatures(query).then(function(results) {
+    //     results.features.forEach(item => {
+    //       const point = {}
+    //       point.x = item.geometry.longitude
+    //       point.y = item.geometry.latitude
+    //       point.attr = item.attributes
+    //       points.push(point)
+    //     })
+
+    //     // 提示查询结果
+    //     if (points.length > 0) {
+    //       that.$message({
+    //         message: '成功查询到' + points.length + '条记录',
+    //         type: 'success'
+    //       })
+
+    //       // 绘制点
+    //       that.addSimpleMarkerOnMap(points)
+    //     } else {
+    //       that.$message({
+    //         message: '没有查询到结果，请重新输入关键字',
+    //         type: 'warning'
+    //       })
+    //     }
+    //   })
+    // },
+    // 清除图层上的查询结果
+    // clearQueryResults: function() {
+    //   this.map.layers.forEach(layer => {
+    //     if (layer.type === 'graphics' && layer.id === queryResultLayerId) {
+    //       layer.graphics.removeAll()
+    //       return false
+    //     }
+    //   })
+    // },
+    // // 清除图层上的查询结果
+    // clearMap: function() {
+    //   // 清除地图上绘制的graphic图层
+    //   this.map.layers.forEach(layer => {
+    //     if (layer.type === 'graphics') {
+    //       layer.graphics.removeAll()
+    //       return false
+    //     }
+    //   })
+
+    //   // 清除弹出框
+    //   this.view.popup.close()
+
+    //   // 清除data属性值
+    //   this.keywords = ''
+    //   this.showEventPointPopup = true // 是否显示事部件的popup
+    //   this.queryEventSwitch = '1' // 1==查询事件；0==查询部件
+    //   this.compListOpts = [] // 部件选择下拉框option
+    //   this.longitude = '' // 定位点经度
+    //   this.latitude = '' // 定位点纬度
+    //   this.communityId = '' // 社区ID
+    //   this.communityName = '' // 社区名称
+    //   this.gridId = '' // 单元网格ID
+    //   this.componentId = '' // 部件ID
+    //   this.componentName = '' // 部件名称
+    // },
+    // 清除图层上的事件定位点
+    // clearEOrCPoint: function() {
+    //   this.map.layers.forEach(layer => {
+    //     if (layer.type === 'graphics' && layer.id === eventPointLayerId) {
+    //       layer.graphics.removeAll()
+    //       return false
+    //     }
+    //   })
+    //   // 清除弹出框
+    //   this.view.popup.close()
+    // },
+    // 切换
+    // switchEventOrComponent: function() {
+    //   // 如果选中的是事件定位（1）或部件定位（0），点击地图时弹出事件或者部件的popup；否则（2以上）显示兴趣点结果的属性popup
+    //   this.showEventPointPopup = this.queryEventSwitch < 2
+    // },
+    // 将查询结果点集合绘制在地图上
+    // addSimpleMarkerOnMap: function(points) {
+    //   const gLayer = new this.esriObj.GraphicsLayer()
+    //   points.forEach(item => {
+    //     const point = new this.esriObj.Point(item.x, item.y, item.attr)
+    //     const marker = new this.esriObj.SimpleMarkerSymbol()
+    //     marker.color = '#F9690E'
+    //     marker.outline = {
+    //       color: [128, 128, 128, 0.5],
+    //       width: '2px'
+    //     }
+    //     const graphic = new this.esriObj.Graphic({
+    //       geometry: point,
+    //       symbol: marker,
+    //       attributes: item.attr
+    //     })
+    //     gLayer.id = queryResultLayerId
+    //     gLayer.add(graphic)
+    //   })
+    //   this.map.add(gLayer)
+    // },
+    // 返回事件定位的结果
+    // checkEventPoint: function() {
+    //   this.$emit(
+    //     'closeMapQueryDialogByEvent',
+    //     this.longitude,
+    //     this.latitude,
+    //     this.communityId,
+    //     this.communityName,
+    //     this.gridId)
+
+    //   this.clearMap()
+    // },
+    // // 返回部件定位的结果
+    // checkComponentPoint: function() {
+    //   this.$emit(
+    //     'closeMapQueryDialogByComp',
+    //     this.longitude,
+    //     this.latitude,
+    //     this.communityId,
+    //     this.communityName,
+    //     this.gridId,
+    //     this.componentId)
+
+    //   this.clearMap()
+    // },
+    // 在地图上添加指定坐标的点
+    addCasePointOnMap: function(lng, lat) {
+      console.log('addCasePointOnMap', lng, lat)
+      const gLayer = new this.esriObj.GraphicsLayer() // 添加自定义绘制点的图层
+      const point = new this.esriObj.Point(lng, lat) // 创建geometry对象
+      const marker = new this.esriObj.SimpleMarkerSymbol() // 创建marker标识
+      // marker属性
+      marker.color = '#F9690E'
+      marker.outline = {
+        color: [128, 128, 128, 0.5],
+        width: '2px'
+      }
+      // 创建graphic对象
+      const graphic = new this.esriObj.Graphic({
+        geometry: point,
+        symbol: marker
+      })
+      gLayer.id = caseLayerId // 标识案卷图层
+      gLayer.add(graphic) // 图层上添加对象
+      this.map.add(gLayer) // 地图上添加图层
+
+      // 重新设置地图中心点并移动
+      this.view.center = point
+      this.view.goTo(point)
+    }
+  }
+}
+</script>
+
+<style scoped>
+  @import 'https://js.arcgis.com/4.13/esri/css/main.css';
+  .baseMap {
+    height:60vh;
+    width: 100%;
+    margin-top: 25px;
+    border: 1px solid #DCDCDC;
+    border-radius: 4px;
+  }
+</style>

diff --git a/src/api/busAdmin/areaPersonliable.js b/src/api/busAdmin/areaPersonliable.js
new file mode 100644
index 0000000..58737bb
--- /dev/null
+++ b/src/api/busAdmin/areaPersonliable.js
@@ -0,0 +1,45 @@
+import request from '@/utils/request'
+
+export function getAreaPersonliableList(params) {
+  return request({
+    url: '/areaPersonliable/listPage',
+    method: 'get',
+    params
+  })
+}
+
+export function addAreaPersonliable(params) {
+  return request({
+    url: '/areaPersonliable/add',
+    method: 'post',
+    params
+  })
+}
+
+export function updateAreaPersonliable(params) {
+  return request({
+    url: '/areaPersonliable/update',
+    method: 'post',
+    params
+  })
+}
+
+export function deleteAreaPersonliable(id) {
+  return request({
+    url: '/areaPersonliable/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+export function getSupervisorList() {
+  return request({
+    url: '/mgr/simplelist',
+    method: 'post',
+    params: {
+      roleTips: 'supervisor'
+    }
+  })
+}
diff --git a/src/api/callCase/callCase.js b/src/api/callCase/callCase.js
new file mode 100644
index 0000000..7500fc7
--- /dev/null
+++ b/src/api/callCase/callCase.js
@@ -0,0 +1,87 @@
+/**
+ * 新建案卷的接口
+ */
+import request from '@/utils/request'
+
+// 获取案卷信息来源
+export function getCaseSource(params) {
+  return request({
+    url: 'dict/code/caseSource',
+    method: 'get',
+    params
+  })
+}
+
+// 获取案卷等级
+export function getCaseLevel(params) {
+  return request({
+    url: 'dict/code/caseLevel',
+    method: 'get',
+    params
+  })
+}
+
+// 获取案卷类别
+export function getCaseEorC(params) {
+  return request({
+    url: 'dict/code/eorc',
+    method: 'get',
+    params
+  })
+}
+
+// 根据案卷类别获取案卷大类
+export function getCaseType(eorc) {
+  return request({
+    url: 'case/type/list',
+    method: 'get',
+    params: {
+      eorc: eorc
+    }
+  })
+}
+
+// 根据案卷大类获取案卷小类
+export function getCaseDetailType(caseTypeId) {
+  return request({
+    url: 'case/typeDetail/list',
+    method: 'get',
+    params: {
+      typeId: caseTypeId
+    }
+  })
+}
+
+// 根据案卷小类获取结案标准
+export function getCaseTypesTime(caseTypeDetailId) {
+  return request({
+    url: 'case/typesTime/list',
+    method: 'get',
+    params: {
+      detailId: caseTypeDetailId
+    }
+  })
+}
+
+// 获取监督员列表
+export function getVerifyPerson(params) {
+  return request({
+    url: 'mgr/simplelist',
+    method: 'post',
+    params: {
+      roleTips: 'supervisor'
+    }
+  })
+}
+
+// 新增案卷
+export function addCase(params) {
+  return request({
+    url: 'case/add',
+    method: 'post',
+    headers: {
+      'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
+    },
+    params
+  })
+}
diff --git a/src/api/coorBusiness/case.js b/src/api/coorBusiness/case.js
index ec5a88a..08c3a13 100644
--- a/src/api/coorBusiness/case.js
+++ b/src/api/coorBusiness/case.js
@@ -110,9 +110,10 @@
   })
 }
 
+// 待处理
 export function toHandleListPage(params) {
   return request({
-    url: 'case/toHandleListPage/',
+    url: 'case/toProcessListPage/',
     method: 'get',
     params
   })
@@ -158,9 +159,10 @@
   })
 }
 
+// 待核查
 export function toCheckListPage(params) {
   return request({
-    url: 'case/toCheckListPage/',
+    url: 'case/toDisCheckListPage/',
     method: 'get',
     params
   })
diff --git a/src/components/CaseCommon/caseDetail.vue b/src/components/CaseCommon/caseDetail.vue
index f6c23ab..fdadcba 100644
--- a/src/components/CaseCommon/caseDetail.vue
+++ b/src/components/CaseCommon/caseDetail.vue
@@ -276,7 +276,7 @@
     </el-row>
     <el-row>
       <div class="title">数据流转:</div>
-      <el-table :data="recordList" :header-cell-style="{background:'#f3f3f3'}" class="table" border>
+      <el-table :data="recordList" :header-cell-style="{background:'#f3f3f3'}" max-height="400" class="table" border>
         <el-table-column prop="operationTypeName" label="操作" align="center"/>
         <el-table-column prop="deptName" label="单位" align="center"/>
         <el-table-column prop="userName" label="人员" align="center"/>
@@ -293,7 +293,7 @@
       :append-to-body="true"
       title="位置详情"
     >
-      <arc-gis-map :longitude="Number(caseDetail.lng)" :latitude="Number(caseDetail.lat)"/>
+      <arc-gis-map-read :longitude="Number(caseDetail.lng)" :latitude="Number(caseDetail.lat)"/>
     </el-dialog>
   </div>
 </template>
@@ -303,12 +303,12 @@
 import { getCaseDetail, getUserList, getDeptList, getCaseTypeList, getCaseTypeDetailList, getCaseTypeTimes } from '@/api/coorBusiness/case'
 import { getCommonLanguage, getFilingTypeList, getCaseLevelList } from '@/api/coorBusiness/dict'
 import { historicalRecords, nextNodes, completeCaseTask } from '@/api/coorBusiness/process'
-import ArcGisMap from '@/components/Map/arcgisMap'
+import ArcGisMapRead from '@/components/Map/arcgisMapRead'
 import { radioMap } from './radioMap'
 
 export default {
   name: 'CaseDetail',
-  components: { ArcGisMap },
+  components: { ArcGisMapRead },
   // props: {
   //   id: {
   //     type: String,
@@ -334,7 +334,6 @@
       showNeedVisit: false,
       caseDetail: {},
       operationKey: '', // 案件处理按钮key
-      imgurl: 'http:\\\\192.168.8.201:8083\\static\\',
       fileIdVerify: [], // 核实照片id
       fileIdProcess: [], // 处理照片id
       fileIdCheck: [], // 核查照片id
@@ -358,10 +357,12 @@
   computed: {
     isNeedVisit: function() {
       return this.caseDetail.isNeedRevisit === 1 ? '需要回访' : '不需要回访'
+    },
+    imgurl() {
+      return process.env.BASE_API + '/static/'
     }
   },
-  mounted() {
-    console.log('case dtial')
+  created() {
     this.id = this.$route.query.id
     this.showProcess = (this.$route.query.showProcess || this.$route.query.showProcess === false) ? this.$route.query.showProcess : true
     this.showNeedVisit = this.$route.query.showNeedVisit ? this.$route.query.showNeedVisit : false
@@ -371,7 +372,6 @@
     async initData() {
       // 查询案件详情接口
       const resDetail = await getCaseDetail(this.id)
-      console.log('detail', resDetail)
       this.caseDetail = resDetail.data[0]
 
       // 解析图片id
@@ -391,9 +391,11 @@
 
       // 查询流转记录接口
       this.processForm.processId = this.caseDetail.processId
-      const resRecord = await historicalRecords(this.processForm.processId)
-      this.recordList = resRecord.data
-      console.log(this.recordList)
+      // const resRecord = historicalRecords(this.processForm.processId)
+      // this.recordList = resRecord.data
+      historicalRecords(this.processForm.processId).then(res => {
+        this.recordList = res.data
+      })
 
       if (this.showProcess) {
         this.initProcess()
@@ -701,6 +703,7 @@
   .table{
     margin: 20px;
     width: 98%;
+    // max-height: 250px;
   }
   .title{
     margin-left: 38px;
diff --git a/src/components/CaseCommon/caseDetailRead.vue b/src/components/CaseCommon/caseDetailRead.vue
index 82066db..a4e87b0 100644
--- a/src/components/CaseCommon/caseDetailRead.vue
+++ b/src/components/CaseCommon/caseDetailRead.vue
@@ -158,11 +158,11 @@
 
 <script>
 import { getCaseDetail } from '@/api/coorBusiness/case'
-import ArcGisMap from '@/components/Map/arcgisMap'
+import ArcGisMapRead from '@/components/Map/arcgisMapRead'
 
 export default {
   name: 'CaseDetail',
-  components: { ArcGisMap },
+  components: { ArcGisMapRead },
   props: {
     id: {
       type: String,
diff --git a/src/components/Map/ArcGISConfig.js b/src/components/Map/ArcGISConfig.js
index d325da9..50cea3b 100644
--- a/src/components/Map/ArcGISConfig.js
+++ b/src/components/Map/ArcGISConfig.js
@@ -1,14 +1,16 @@
 export const mapConfig = {
-  apiUrl: 'https://js.arcgis.com/4.13/', // 暂时使用管网提供的api，实际部署时建议离线部署一套
+  apiUrl: 'http://192.168.8.205/arcgis_js_api/library/4.12/init.js', // 暂时使用管网提供的api，实际部署时建议离线部署一套
+  // apiUrl: 'https://js.arcgis.com/4.13/',
   mapIp: '223.84.218.107', // 服务ip
   mapPort: '6080', // 服务端口
-  serverBase: 'http://223.84.218.107:6080/arcgis/rest/services/', // 服务地址前缀
+  serverBase: 'http://192.168.8.205:6080/arcgis/rest/services/', // 服务地址前缀
+  // serverBase: 'http://223.84.218.107:6080/arcgis/rest/services/dx/',
   mapCenter: '[116.597,28.24]' // 地图中心点
 }
 
 export const serverConfig = {
-  mapUrlBase: mapConfig.serverBase + 'dx/2w/MapServer', // 底图服务地址
-  mapUrlBj: mapConfig.serverBase + 'dx/dxbj/MapServer', // 部件服务地址
-  mapUrlBjfc: mapConfig.serverBase + 'dx/bjfc/MapServer', // 部件分层服务地址
-  mapUrlBjEdit: mapConfig.serverBase + 'dx/dxbj/FeatureServer' // 可编辑的部件图层
+  mapUrlBase: mapConfig.serverBase + '2w/MapServer', // 底图服务地址
+  mapUrlBj: mapConfig.serverBase + 'dxbj/MapServer', // 部件服务地址
+  mapUrlBjfc: mapConfig.serverBase + 'bjfc/MapServer', // 部件分层服务地址
+  mapUrlBjEdit: mapConfig.serverBase + 'dxbj/FeatureServer' // 可编辑的部件图层
 }
diff --git a/src/components/Map/arcgisMap.vue b/src/components/Map/arcgisMap.vue
index 53776f1..5c15383 100644
--- a/src/components/Map/arcgisMap.vue
+++ b/src/components/Map/arcgisMap.vue
@@ -1,6 +1,6 @@
 <template>
-  <div style="margin-top:-30px">
-    <!-- <el-row :gutter="20">
+  <div>
+    <el-row :gutter="20">
       <el-col :span="4">
         <el-input v-model="keywords" size="small" type="text" placeholder="兴趣点关键字" clearable />
       </el-col>
@@ -31,9 +31,9 @@
       <el-col v-if="queryEventSwitch === '1'" :span="8" style="text-align: right;">
         <el-button type="primary" size="small" @click="checkEventPoint"> 事件提交 </el-button>
       </el-col>
-    </el-row> -->
+    </el-row>
 
-    <div v-loading="mapLoading" ref="mapDiv" class="baseMap" />
+    <div ref="mapDiv" class="baseMap" />
   </div>
 </template>
 
@@ -45,22 +45,12 @@
   url: mapConfig.apiUrl
 }
 
-// const eventPointLayerId = 'eventPointLayer' // 事件定位点的图层id
-// const queryResultLayerId = 'queryResultLayer' // 兴趣点查询结果点集的图层id
+const eventPointLayerId = 'eventPointLayer' // 事件定位点的图层id
+const queryResultLayerId = 'queryResultLayer' // 兴趣点查询结果点集的图层id
 const caseLayerId = 'addedGeometryLayerId' // 案卷点图层
 
 export default {
-  name: 'ArcGisMap',
-  props: {
-    longitude: {
-      type: Number,
-      default: 116.5937
-    },
-    latitude: {
-      type: Number,
-      default: 28.249
-    }
-  },
+  name: 'ArcGISMap',
   data() {
     return {
       map: '',
@@ -89,19 +79,18 @@
         IdentifyParameters: '',
         MapView: ''
       },
-      mapLoading: false
-      // keywords: '', // 查询关键字
-      // showEventPointPopup: true, // 是否显示事部件的popup
-      // queryEventSwitch: '1', // 1==查询事件；0==查询部件
-      // compListOpts: [], // 部件选择下拉框option
+      keywords: '', // 查询关键字
+      showEventPointPopup: true, // 是否显示事部件的popup
+      queryEventSwitch: '1', // 1==查询事件；0==查询部件
+      compListOpts: [], // 部件选择下拉框option
       // 主页面返回值
-      // longitude: '', // 定位点经度
-      // latitude: '' // 定位点纬度
-      // communityId: '', // 社区ID
-      // communityName: '', // 社区名称
-      // gridId: '', // 单元网格ID
-      // componentId: '', // 部件ID
-      // componentName: '' // 部件名称/=
+      longitude: '', // 定位点经度
+      latitude: '', // 定位点纬度
+      communityId: '', // 社区ID
+      communityName: '', // 社区名称
+      gridId: '', // 单元网格ID
+      componentId: '', // 部件ID
+      componentName: '' // 部件名称
     }
   },
   mounted() {
@@ -110,7 +99,6 @@
   methods: {
     // 初始化ArcGIS API对象
     importEsri: function() {
-      this.mapLoading = true
       loadModules([
         'esri/Map',
         'esri/Basemap',
@@ -164,10 +152,8 @@
 
           // 初始化地图
           this.initMap()
-          this.mapLoading = false
         }).catch(err => {
           console.log(err)
-          this.mapLoading = false
         })
     },
     // 初始化地图
@@ -194,139 +180,139 @@
         zoom: 3 // 当前地图缩放等级
       })
 
-      // const that = this
-      // this.view.on('click', function(event) {
-      //   // 清除地图上已有的事件/部件查询点
-      //   that.clearEOrCPoint()
+      const that = this
+      this.view.on('click', function(event) {
+        // 清除地图上已有的事件/部件查询点
+        that.clearEOrCPoint()
 
-      //   const lon = event.mapPoint.longitude
-      //   const lat = event.mapPoint.latitude
+        const lon = event.mapPoint.longitude
+        const lat = event.mapPoint.latitude
 
-      //   if (that.showEventPointPopup) {
-      //     // 添加点
-      //     const gLayer = new that.esriObj.GraphicsLayer()
-      //     const marker = new that.esriObj.SimpleMarkerSymbol()
-      //     marker.color = '#35A0E7'
-      //     marker.style = 'square'
-      //     marker.outline = {
-      //       color: [128, 128, 128, 0.5],
-      //       width: '2px'
-      //     }
-      //     const graphic = new that.esriObj.Graphic({
-      //       geometry: event.mapPoint,
-      //       symbol: marker
-      //     })
+        if (that.showEventPointPopup) {
+          // 添加点
+          const gLayer = new that.esriObj.GraphicsLayer()
+          const marker = new that.esriObj.SimpleMarkerSymbol()
+          marker.color = '#35A0E7'
+          marker.style = 'square'
+          marker.outline = {
+            color: [128, 128, 128, 0.5],
+            width: '2px'
+          }
+          const graphic = new that.esriObj.Graphic({
+            geometry: event.mapPoint,
+            symbol: marker
+          })
 
-      //     gLayer.id = eventPointLayerId
-      //     gLayer.add(graphic)
-      //     that.map.add(gLayer)
+          gLayer.id = eventPointLayerId
+          gLayer.add(graphic)
+          that.map.add(gLayer)
 
-      //     // 查询事件或者部件
-      //     if (that.queryEventSwitch === '1') {
-      //       // 事件定位
-      //       // 1查询底图得到所在网格与所在社区
-      //       const query = that.layers.dx2wGrid.createQuery()
-      //       query.geometry = that.view.toMap(event)
-      //       query.distance = 10
-      //       query.units = 'meters'
-      //       query.returnGeometry = true
-      //       query.outFields = ['BGID', 'COMMUID', 'COMMUNAME']
-      //       that.layers.dx2wGrid.queryFeatures(query)
-      //         .then(function(response) {
-      //           const result = response.features[0].attributes
+          // 查询事件或者部件
+          if (that.queryEventSwitch === '1') {
+            // 事件定位
+            // 1查询底图得到所在网格与所在社区
+            const query = that.layers.dx2wGrid.createQuery()
+            query.geometry = that.view.toMap(event)
+            query.distance = 10
+            query.units = 'meters'
+            query.returnGeometry = true
+            query.outFields = ['BGID', 'COMMUID', 'COMMUNAME']
+            that.layers.dx2wGrid.queryFeatures(query)
+              .then(function(response) {
+                const result = response.features[0].attributes
 
-      //           // 赋值
-      //           that.longitude = lon
-      //           that.latitude = lat
-      //           that.gridId = result.BGID
-      //           that.communityId = result.COMMUID
-      //           that.communityName = result.COMMUNAME
+                // 赋值
+                that.longitude = lon
+                that.latitude = lat
+                that.gridId = result.BGID
+                that.communityId = result.COMMUID
+                that.communityName = result.COMMUNAME
 
-      //           // 2弹出气泡
-      //           that.view.popup.open({
-      //             title: '事件定位',
-      //             content: '坐标：[' + lon.toFixed(4) + ', ' + lat.toFixed(4) + ']' + '<p>' + '所在社区：' + result.COMMUNAME,
-      //             location: event.mapPoint
-      //           })
-      //         })
-      //     } else if (that.queryEventSwitch === '0') {
-      //       // 部件定位
-      //       const queryDev = that.layers.dxbjPoint.createQuery()
-      //       // 定义查询的圆形范围，半径5米
-      //       const circle = new that.esriObj.Circle({
-      //         center: event.mapPoint,
-      //         radius: 5,
-      //         radiusUnit: 'meters'
-      //       })
-      //       queryDev.geometry = circle
-      //       queryDev.returnGeometry = true
-      //       queryDev.outFields = ['BGID', 'OBJID', 'OBJNAME', 'OBJPOS']
-      //       that.layers.dxbjPoint.queryFeatures(queryDev)
-      //         .then(function(response) {
-      //           if (response.features.length > 0) {
-      //             const results = response.features
+                // 2弹出气泡
+                that.view.popup.open({
+                  title: '事件定位',
+                  content: '坐标：[' + lon.toFixed(4) + ', ' + lat.toFixed(4) + ']' + '<p>' + '所在社区：' + result.COMMUNAME,
+                  location: event.mapPoint
+                })
+              })
+          } else if (that.queryEventSwitch === '0') {
+            // 部件定位
+            const queryDev = that.layers.dxbjPoint.createQuery()
+            // 定义查询的圆形范围，半径5米
+            const circle = new that.esriObj.Circle({
+              center: event.mapPoint,
+              radius: 5,
+              radiusUnit: 'meters'
+            })
+            queryDev.geometry = circle
+            queryDev.returnGeometry = true
+            queryDev.outFields = ['BGID', 'OBJID', 'OBJNAME', 'OBJPOS']
+            that.layers.dxbjPoint.queryFeatures(queryDev)
+              .then(function(response) {
+                if (response.features.length > 0) {
+                  const results = response.features
 
-      //             that.compListOpts = []
+                  that.compListOpts = []
 
-      //             let content = ''
-      //             results.forEach((item, index) => {
-      //               content += '<p>部件' + (index + 1) + '：' + item.attributes.OBJNAME + '，' + item.attributes.OBJPOS
-      //               const comp = {}
-      //               comp.name = '部件' + (index + 1) + '：' + item.attributes.OBJNAME
-      //               comp.value = item.attributes.OBJID
-      //               that.compListOpts.push(comp)
-      //             })
+                  let content = ''
+                  results.forEach((item, index) => {
+                    content += '<p>部件' + (index + 1) + '：' + item.attributes.OBJNAME + '，' + item.attributes.OBJPOS
+                    const comp = {}
+                    comp.name = '部件' + (index + 1) + '：' + item.attributes.OBJNAME
+                    comp.value = item.attributes.OBJID
+                    that.compListOpts.push(comp)
+                  })
 
-      //             // 2弹出气泡
-      //             that.view.popup.open({
-      //               title: '部件定位',
-      //               content: '坐标：[' + lon.toFixed(4) + ', ' + lat.toFixed(4) + ']，附近5米的部件有：' + content,
-      //               location: event.mapPoint
-      //             })
+                  // 2弹出气泡
+                  that.view.popup.open({
+                    title: '部件定位',
+                    content: '坐标：[' + lon.toFixed(4) + ', ' + lat.toFixed(4) + ']，附近5米的部件有：' + content,
+                    location: event.mapPoint
+                  })
 
-      //             // 查询所在社区和单元网格
-      //             const queryPos = that.layers.dx2wGrid.createQuery()
-      //             queryPos.geometry = that.view.toMap(event)
-      //             queryPos.returnGeometry = true
-      //             queryPos.outFields = ['BGID', 'COMMUID', 'COMMUNAME']
-      //             that.layers.dx2wGrid.queryFeatures(queryPos)
-      //               .then(function(response) {
-      //                 const result = response.features[0].attributes
+                  // 查询所在社区和单元网格
+                  const queryPos = that.layers.dx2wGrid.createQuery()
+                  queryPos.geometry = that.view.toMap(event)
+                  queryPos.returnGeometry = true
+                  queryPos.outFields = ['BGID', 'COMMUID', 'COMMUNAME']
+                  that.layers.dx2wGrid.queryFeatures(queryPos)
+                    .then(function(response) {
+                      const result = response.features[0].attributes
 
-      //                 // 赋值
-      //                 that.longitude = lon
-      //                 that.latitude = lat
-      //                 that.gridId = result.BGID
-      //                 that.communityId = result.COMMUID
-      //                 that.communityName = result.COMMUNAME
-      //               })
-      //           } else {
-      //             that.$message({
-      //               message: '没有查询到部件，请重新定位',
-      //               type: 'warning'
-      //             })
-      //           }
-      //         })
-      //     }
-      //   } else {
-      //     that.view.hitTest(event).then(function(response) {
-      //       if (response.results.length) {
-      //         const graphic = response.results[0].graphic
-      //         const name = graphic.attributes.KEYWORD
-      //         const address = graphic.attributes.OBJPOS
+                      // 赋值
+                      that.longitude = lon
+                      that.latitude = lat
+                      that.gridId = result.BGID
+                      that.communityId = result.COMMUID
+                      that.communityName = result.COMMUNAME
+                    })
+                } else {
+                  that.$message({
+                    message: '没有查询到部件，请重新定位',
+                    type: 'warning'
+                  })
+                }
+              })
+          }
+        } else {
+          that.view.hitTest(event).then(function(response) {
+            if (response.results.length) {
+              const graphic = response.results[0].graphic
+              const name = graphic.attributes.KEYWORD
+              const address = graphic.attributes.OBJPOS
 
-      //         that.view.popup.open({
-      //           title: name,
-      //           content: address,
-      //           location: event.mapPoint
-      //         })
-      //       }
-      //     })
-      //   }
-      // })
+              that.view.popup.open({
+                title: name,
+                content: address,
+                location: event.mapPoint
+              })
+            }
+          })
+        }
+      })
 
       this.addBjLayers()
-      this.addCasePointOnMap(this.longitude, this.latitude)
+      // this.addCasePointOnMap(116.5937, 28.249)
     },
     // 加载部件服务的各图层
     addBjLayers: function() {
@@ -347,160 +333,159 @@
         url: serverConfig.mapUrlBj + '/3',
         id: 'dxbjMph'
       })
-      // this.layers.dx2wGrid = new this.esriObj.FeatureLayer({
-      //   url: serverConfig.mapUrlBase + '/6',
-      //   id: 'gridLayer'
-      // })
+      this.layers.dx2wGrid = new this.esriObj.FeatureLayer({
+        url: serverConfig.mapUrlBase + '/1',
+        id: 'gridLayer'
+      })
 
       // 加载各图层
       this.map.add(this.layers.dxbjPoint)
       this.map.add(this.layers.dxbjLine)
       this.map.add(this.layers.dxbjXqd)
       this.map.add(this.layers.dxbjMph)
-      // this.map.add(this.layers.dx2wGrid)
+      this.map.add(this.layers.dx2wGrid)
     },
     // 在兴趣点图层查询关键字
-    // queryOnMap: function() {
-    //   const points = [] // 查询结果点集
+    queryOnMap: function() {
+      const points = [] // 查询结果点集
 
-    //   this.clearQueryResults()
-    //   this.clearEOrCPoint()
-    //   this.showEventPointPopup = false
-    //   this.queryEventSwitch = '2'
+      this.clearQueryResults()
+      this.clearEOrCPoint()
+      this.showEventPointPopup = false
+      this.queryEventSwitch = '2'
 
-    //   // 查询条件
-    //   const query = new this.esriObj.Query()
-    //   query.returnGeometry = true
-    //   query.outFields = ['*']
-    //   query.where = 'NAME like ' + "'%" + this.keywords + "%'"
-    //   const that = this
+      // 查询条件
+      const query = new this.esriObj.Query()
+      query.returnGeometry = true
+      query.outFields = ['*']
+      query.where = 'NAME like ' + "'%" + this.keywords + "%'"
+      const that = this
 
-    //   this.layers.dxbjXqd.queryFeatures(query).then(function(results) {
-    //     results.features.forEach(item => {
-    //       const point = {}
-    //       point.x = item.geometry.longitude
-    //       point.y = item.geometry.latitude
-    //       point.attr = item.attributes
-    //       points.push(point)
-    //     })
+      this.layers.dxbjXqd.queryFeatures(query).then(function(results) {
+        results.features.forEach(item => {
+          const point = {}
+          point.x = item.geometry.longitude
+          point.y = item.geometry.latitude
+          point.attr = item.attributes
+          points.push(point)
+        })
 
-    //     // 提示查询结果
-    //     if (points.length > 0) {
-    //       that.$message({
-    //         message: '成功查询到' + points.length + '条记录',
-    //         type: 'success'
-    //       })
+        // 提示查询结果
+        if (points.length > 0) {
+          that.$message({
+            message: '成功查询到' + points.length + '条记录',
+            type: 'success'
+          })
 
-    //       // 绘制点
-    //       that.addSimpleMarkerOnMap(points)
-    //     } else {
-    //       that.$message({
-    //         message: '没有查询到结果，请重新输入关键字',
-    //         type: 'warning'
-    //       })
-    //     }
-    //   })
-    // },
+          // 绘制点
+          that.addSimpleMarkerOnMap(points)
+        } else {
+          that.$message({
+            message: '没有查询到结果，请重新输入关键字',
+            type: 'warning'
+          })
+        }
+      })
+    },
     // 清除图层上的查询结果
-    // clearQueryResults: function() {
-    //   this.map.layers.forEach(layer => {
-    //     if (layer.type === 'graphics' && layer.id === queryResultLayerId) {
-    //       layer.graphics.removeAll()
-    //       return false
-    //     }
-    //   })
-    // },
-    // // 清除图层上的查询结果
-    // clearMap: function() {
-    //   // 清除地图上绘制的graphic图层
-    //   this.map.layers.forEach(layer => {
-    //     if (layer.type === 'graphics') {
-    //       layer.graphics.removeAll()
-    //       return false
-    //     }
-    //   })
+    clearQueryResults: function() {
+      this.map.layers.forEach(layer => {
+        if (layer.type === 'graphics' && layer.id === queryResultLayerId) {
+          layer.graphics.removeAll()
+          return false
+        }
+      })
+    },
+    // 清除图层上的查询结果
+    clearMap: function() {
+      // 清除地图上绘制的graphic图层
+      this.map.layers.forEach(layer => {
+        if (layer.type === 'graphics') {
+          layer.graphics.removeAll()
+          return false
+        }
+      })
 
-    //   // 清除弹出框
-    //   this.view.popup.close()
+      // 清除弹出框
+      this.view.popup.close()
 
-    //   // 清除data属性值
-    //   this.keywords = ''
-    //   this.showEventPointPopup = true // 是否显示事部件的popup
-    //   this.queryEventSwitch = '1' // 1==查询事件；0==查询部件
-    //   this.compListOpts = [] // 部件选择下拉框option
-    //   this.longitude = '' // 定位点经度
-    //   this.latitude = '' // 定位点纬度
-    //   this.communityId = '' // 社区ID
-    //   this.communityName = '' // 社区名称
-    //   this.gridId = '' // 单元网格ID
-    //   this.componentId = '' // 部件ID
-    //   this.componentName = '' // 部件名称
-    // },
+      // 清除data属性值
+      this.keywords = ''
+      this.showEventPointPopup = true // 是否显示事部件的popup
+      this.queryEventSwitch = '1' // 1==查询事件；0==查询部件
+      this.compListOpts = [] // 部件选择下拉框option
+      this.longitude = '' // 定位点经度
+      this.latitude = '' // 定位点纬度
+      this.communityId = '' // 社区ID
+      this.communityName = '' // 社区名称
+      this.gridId = '' // 单元网格ID
+      this.componentId = '' // 部件ID
+      this.componentName = '' // 部件名称
+    },
     // 清除图层上的事件定位点
-    // clearEOrCPoint: function() {
-    //   this.map.layers.forEach(layer => {
-    //     if (layer.type === 'graphics' && layer.id === eventPointLayerId) {
-    //       layer.graphics.removeAll()
-    //       return false
-    //     }
-    //   })
-    //   // 清除弹出框
-    //   this.view.popup.close()
-    // },
+    clearEOrCPoint: function() {
+      this.map.layers.forEach(layer => {
+        if (layer.type === 'graphics' && layer.id === eventPointLayerId) {
+          layer.graphics.removeAll()
+          return false
+        }
+      })
+      // 清除弹出框
+      this.view.popup.close()
+    },
     // 切换
-    // switchEventOrComponent: function() {
-    //   // 如果选中的是事件定位（1）或部件定位（0），点击地图时弹出事件或者部件的popup；否则（2以上）显示兴趣点结果的属性popup
-    //   this.showEventPointPopup = this.queryEventSwitch < 2
-    // },
+    switchEventOrComponent: function() {
+      // 如果选中的是事件定位（1）或部件定位（0），点击地图时弹出事件或者部件的popup；否则（2以上）显示兴趣点结果的属性popup
+      this.showEventPointPopup = this.queryEventSwitch < 2
+    },
     // 将查询结果点集合绘制在地图上
-    // addSimpleMarkerOnMap: function(points) {
-    //   const gLayer = new this.esriObj.GraphicsLayer()
-    //   points.forEach(item => {
-    //     const point = new this.esriObj.Point(item.x, item.y, item.attr)
-    //     const marker = new this.esriObj.SimpleMarkerSymbol()
-    //     marker.color = '#F9690E'
-    //     marker.outline = {
-    //       color: [128, 128, 128, 0.5],
-    //       width: '2px'
-    //     }
-    //     const graphic = new this.esriObj.Graphic({
-    //       geometry: point,
-    //       symbol: marker,
-    //       attributes: item.attr
-    //     })
-    //     gLayer.id = queryResultLayerId
-    //     gLayer.add(graphic)
-    //   })
-    //   this.map.add(gLayer)
-    // },
+    addSimpleMarkerOnMap: function(points) {
+      const gLayer = new this.esriObj.GraphicsLayer()
+      points.forEach(item => {
+        const point = new this.esriObj.Point(item.x, item.y, item.attr)
+        const marker = new this.esriObj.SimpleMarkerSymbol()
+        marker.color = '#F9690E'
+        marker.outline = {
+          color: [128, 128, 128, 0.5],
+          width: '2px'
+        }
+        const graphic = new this.esriObj.Graphic({
+          geometry: point,
+          symbol: marker,
+          attributes: item.attr
+        })
+        gLayer.id = queryResultLayerId
+        gLayer.add(graphic)
+      })
+      this.map.add(gLayer)
+    },
     // 返回事件定位的结果
-    // checkEventPoint: function() {
-    //   this.$emit(
-    //     'closeMapQueryDialogByEvent',
-    //     this.longitude,
-    //     this.latitude,
-    //     this.communityId,
-    //     this.communityName,
-    //     this.gridId)
+    checkEventPoint: function() {
+      this.$emit(
+        'closeMapQueryDialogByEvent',
+        this.longitude,
+        this.latitude,
+        this.communityId,
+        this.communityName,
+        this.gridId)
 
-    //   this.clearMap()
-    // },
-    // // 返回部件定位的结果
-    // checkComponentPoint: function() {
-    //   this.$emit(
-    //     'closeMapQueryDialogByComp',
-    //     this.longitude,
-    //     this.latitude,
-    //     this.communityId,
-    //     this.communityName,
-    //     this.gridId,
-    //     this.componentId)
+      this.clearMap()
+    },
+    // 返回部件定位的结果
+    checkComponentPoint: function() {
+      this.$emit(
+        'closeMapQueryDialogByComp',
+        this.longitude,
+        this.latitude,
+        this.communityId,
+        this.communityName,
+        this.gridId,
+        this.componentId)
 
-    //   this.clearMap()
-    // },
+      this.clearMap()
+    },
     // 在地图上添加指定坐标的点
     addCasePointOnMap: function(lng, lat) {
-      console.log('addCasePointOnMap', lng, lat)
       const gLayer = new this.esriObj.GraphicsLayer() // 添加自定义绘制点的图层
       const point = new this.esriObj.Point(lng, lat) // 创建geometry对象
       const marker = new this.esriObj.SimpleMarkerSymbol() // 创建marker标识
@@ -521,14 +506,14 @@
 
       // 重新设置地图中心点并移动
       this.view.center = point
-      this.view.goTo(point)
+      this.view.goTo()
     }
   }
 }
 </script>
 
 <style scoped>
-  @import 'https://js.arcgis.com/4.13/esri/css/main.css';
+  @import 'http://192.168.8.205/arcgis_js_api/library/4.12/esri/css/main.css';
   .baseMap {
     height:60vh;
     width: 100%;
diff --git a/src/components/Map/arcgisMapRead.vue b/src/components/Map/arcgisMapRead.vue
new file mode 100644
index 0000000..ae2058b
--- /dev/null
+++ b/src/components/Map/arcgisMapRead.vue
@@ -0,0 +1,539 @@
+<template>
+  <div style="margin-top:-30px">
+    <!-- <el-row :gutter="20">
+      <el-col :span="4">
+        <el-input v-model="keywords" size="small" type="text" placeholder="兴趣点关键字" clearable />
+      </el-col>
+      <el-col :span="4">
+        <el-button type="primary" size="small" @click="queryOnMap">查询</el-button>
+        <el-button type="info" size="small" @click="clearMap"> 清除地图 </el-button>
+      </el-col>
+
+      <el-col :span="8" style="text-align: center;">
+        <el-radio-group v-model="queryEventSwitch" size="small" @change="switchEventOrComponent">
+          <el-radio-button label="1">事件定位</el-radio-button>
+          <el-radio-button label="0">部件定位</el-radio-button>
+          <el-radio-button label="2">兴趣点属性</el-radio-button>
+        </el-radio-group>
+      </el-col>
+
+      <el-col v-if="queryEventSwitch === '0'" :span="8" style="text-align: right;">
+        <el-select v-model="componentId" placeholder="选择部件" clearable value="" size="small">
+          <el-option
+            v-for="item in compListOpts"
+            :key="item.value"
+            :label="item.name"
+            :value="item.value"/>
+        </el-select>
+        <el-button type="primary" size="small" @click="checkComponentPoint"> 部件提交 </el-button>
+      </el-col>
+
+      <el-col v-if="queryEventSwitch === '1'" :span="8" style="text-align: right;">
+        <el-button type="primary" size="small" @click="checkEventPoint"> 事件提交 </el-button>
+      </el-col>
+    </el-row> -->
+
+    <div v-loading="mapLoading" ref="mapDiv" class="baseMap" />
+  </div>
+</template>
+
+<script>
+import { loadModules } from 'esri-loader'
+import { mapConfig, serverConfig } from './ArcGISConfig'
+
+const option = {
+  url: mapConfig.apiUrl
+}
+
+// const eventPointLayerId = 'eventPointLayer' // 事件定位点的图层id
+// const queryResultLayerId = 'queryResultLayer' // 兴趣点查询结果点集的图层id
+const caseLayerId = 'addedGeometryLayerId' // 案卷点图层
+
+export default {
+  name: 'ArcGisMapRead',
+  props: {
+    longitude: {
+      type: Number,
+      default: 116.5937
+    },
+    latitude: {
+      type: Number,
+      default: 28.249
+    }
+  },
+  data() {
+    return {
+      map: '',
+      view: '',
+      layers: {
+        dxbjPoint: '', // 部件点图层
+        dxbjLine: '', // 部件线图层
+        dxbjXqd: '', // 兴趣点图层
+        dxbjMph: '', // 门牌好图层
+        dx2wGrid: '' // 单元网格图层
+      },
+      esriObj: {
+        Map: '',
+        BaseMap: '',
+        Graphic: '',
+        PopupTemplate: '',
+        Circle: '',
+        Point: '',
+        FeatureLayer: '',
+        GraphicsLayer: '',
+        TileLayer: '',
+        SimpleMarkerSymbol: '',
+        Query: '',
+        QueryTask: '',
+        IdentifyTask: '',
+        IdentifyParameters: '',
+        MapView: ''
+      },
+      mapLoading: false
+      // keywords: '', // 查询关键字
+      // showEventPointPopup: true, // 是否显示事部件的popup
+      // queryEventSwitch: '1', // 1==查询事件；0==查询部件
+      // compListOpts: [], // 部件选择下拉框option
+      // 主页面返回值
+      // longitude: '', // 定位点经度
+      // latitude: '' // 定位点纬度
+      // communityId: '', // 社区ID
+      // communityName: '', // 社区名称
+      // gridId: '', // 单元网格ID
+      // componentId: '', // 部件ID
+      // componentName: '' // 部件名称/=
+    }
+  },
+  mounted() {
+    this.importEsri()
+  },
+  methods: {
+    // 初始化ArcGIS API对象
+    importEsri: function() {
+      this.mapLoading = true
+      loadModules([
+        'esri/Map',
+        'esri/Basemap',
+        'esri/Graphic',
+        'esri/PopupTemplate',
+        'esri/geometry/Circle',
+        'esri/geometry/Point',
+        'esri/layers/FeatureLayer',
+        'esri/layers/GraphicsLayer',
+        'esri/layers/TileLayer',
+        'esri/symbols/SimpleMarkerSymbol',
+        'esri/tasks/support/Query',
+        'esri/tasks/QueryTask',
+        'esri/tasks/IdentifyTask',
+        'esri/tasks/support/IdentifyParameters',
+        'esri/views/MapView',
+        'dojo/domReady!'
+      ], option)
+        .then(([
+          Map,
+          BaseMap,
+          Graphic,
+          PopupTemplate,
+          Circle,
+          Point,
+          FeatureLayer,
+          GraphicsLayer,
+          TileLayer,
+          SimpleMarkerSymbol,
+          Query,
+          QueryTask,
+          IdentifyTask,
+          IdentifyParameters,
+          MapView
+        ]) => {
+          this.esriObj.Map = Map
+          this.esriObj.BaseMap = BaseMap
+          this.esriObj.Graphic = Graphic
+          this.esriObj.PopupTemplate = PopupTemplate
+          this.esriObj.Circle = Circle
+          this.esriObj.Point = Point
+          this.esriObj.FeatureLayer = FeatureLayer
+          this.esriObj.GraphicsLayer = GraphicsLayer
+          this.esriObj.TileLayer = TileLayer
+          this.esriObj.SimpleMarkerSymbol = SimpleMarkerSymbol
+          this.esriObj.Query = Query
+          this.esriObj.QueryTask = QueryTask
+          this.esriObj.IdentifyTask = IdentifyTask
+          this.esriObj.IdentifyParameters = IdentifyParameters
+          this.esriObj.MapView = MapView
+
+          // 初始化地图
+          this.initMap()
+          this.mapLoading = false
+        }).catch(err => {
+          console.log(err)
+          this.mapLoading = false
+        })
+    },
+    // 初始化地图
+    initMap: function() {
+      const base = new this.esriObj.BaseMap({
+        baseLayers: [
+          new this.esriObj.TileLayer({ // 可配置属性，见TileLayer类
+            id: '2w',
+            url: serverConfig.mapUrlBase
+          })
+        ],
+        title: 'dx2w',
+        id: 'dx2w'
+      })
+
+      this.map = new this.esriObj.Map({
+        basemap: base // 底图类型，详见BaseMap类
+      })
+
+      this.view = new this.esriObj.MapView({
+        container: this.$refs.mapDiv, // 视图的容器
+        map: this.map, // Map的实例放入视图中
+        center: [116.597, 28.24], // 初始显示的地图中心点，经纬度
+        zoom: 3 // 当前地图缩放等级
+      })
+
+      // const that = this
+      // this.view.on('click', function(event) {
+      //   // 清除地图上已有的事件/部件查询点
+      //   that.clearEOrCPoint()
+
+      //   const lon = event.mapPoint.longitude
+      //   const lat = event.mapPoint.latitude
+
+      //   if (that.showEventPointPopup) {
+      //     // 添加点
+      //     const gLayer = new that.esriObj.GraphicsLayer()
+      //     const marker = new that.esriObj.SimpleMarkerSymbol()
+      //     marker.color = '#35A0E7'
+      //     marker.style = 'square'
+      //     marker.outline = {
+      //       color: [128, 128, 128, 0.5],
+      //       width: '2px'
+      //     }
+      //     const graphic = new that.esriObj.Graphic({
+      //       geometry: event.mapPoint,
+      //       symbol: marker
+      //     })
+
+      //     gLayer.id = eventPointLayerId
+      //     gLayer.add(graphic)
+      //     that.map.add(gLayer)
+
+      //     // 查询事件或者部件
+      //     if (that.queryEventSwitch === '1') {
+      //       // 事件定位
+      //       // 1查询底图得到所在网格与所在社区
+      //       const query = that.layers.dx2wGrid.createQuery()
+      //       query.geometry = that.view.toMap(event)
+      //       query.distance = 10
+      //       query.units = 'meters'
+      //       query.returnGeometry = true
+      //       query.outFields = ['BGID', 'COMMUID', 'COMMUNAME']
+      //       that.layers.dx2wGrid.queryFeatures(query)
+      //         .then(function(response) {
+      //           const result = response.features[0].attributes
+
+      //           // 赋值
+      //           that.longitude = lon
+      //           that.latitude = lat
+      //           that.gridId = result.BGID
+      //           that.communityId = result.COMMUID
+      //           that.communityName = result.COMMUNAME
+
+      //           // 2弹出气泡
+      //           that.view.popup.open({
+      //             title: '事件定位',
+      //             content: '坐标：[' + lon.toFixed(4) + ', ' + lat.toFixed(4) + ']' + '<p>' + '所在社区：' + result.COMMUNAME,
+      //             location: event.mapPoint
+      //           })
+      //         })
+      //     } else if (that.queryEventSwitch === '0') {
+      //       // 部件定位
+      //       const queryDev = that.layers.dxbjPoint.createQuery()
+      //       // 定义查询的圆形范围，半径5米
+      //       const circle = new that.esriObj.Circle({
+      //         center: event.mapPoint,
+      //         radius: 5,
+      //         radiusUnit: 'meters'
+      //       })
+      //       queryDev.geometry = circle
+      //       queryDev.returnGeometry = true
+      //       queryDev.outFields = ['BGID', 'OBJID', 'OBJNAME', 'OBJPOS']
+      //       that.layers.dxbjPoint.queryFeatures(queryDev)
+      //         .then(function(response) {
+      //           if (response.features.length > 0) {
+      //             const results = response.features
+
+      //             that.compListOpts = []
+
+      //             let content = ''
+      //             results.forEach((item, index) => {
+      //               content += '<p>部件' + (index + 1) + '：' + item.attributes.OBJNAME + '，' + item.attributes.OBJPOS
+      //               const comp = {}
+      //               comp.name = '部件' + (index + 1) + '：' + item.attributes.OBJNAME
+      //               comp.value = item.attributes.OBJID
+      //               that.compListOpts.push(comp)
+      //             })
+
+      //             // 2弹出气泡
+      //             that.view.popup.open({
+      //               title: '部件定位',
+      //               content: '坐标：[' + lon.toFixed(4) + ', ' + lat.toFixed(4) + ']，附近5米的部件有：' + content,
+      //               location: event.mapPoint
+      //             })
+
+      //             // 查询所在社区和单元网格
+      //             const queryPos = that.layers.dx2wGrid.createQuery()
+      //             queryPos.geometry = that.view.toMap(event)
+      //             queryPos.returnGeometry = true
+      //             queryPos.outFields = ['BGID', 'COMMUID', 'COMMUNAME']
+      //             that.layers.dx2wGrid.queryFeatures(queryPos)
+      //               .then(function(response) {
+      //                 const result = response.features[0].attributes
+
+      //                 // 赋值
+      //                 that.longitude = lon
+      //                 that.latitude = lat
+      //                 that.gridId = result.BGID
+      //                 that.communityId = result.COMMUID
+      //                 that.communityName = result.COMMUNAME
+      //               })
+      //           } else {
+      //             that.$message({
+      //               message: '没有查询到部件，请重新定位',
+      //               type: 'warning'
+      //             })
+      //           }
+      //         })
+      //     }
+      //   } else {
+      //     that.view.hitTest(event).then(function(response) {
+      //       if (response.results.length) {
+      //         const graphic = response.results[0].graphic
+      //         const name = graphic.attributes.KEYWORD
+      //         const address = graphic.attributes.OBJPOS
+
+      //         that.view.popup.open({
+      //           title: name,
+      //           content: address,
+      //           location: event.mapPoint
+      //         })
+      //       }
+      //     })
+      //   }
+      // })
+
+      this.addBjLayers()
+      this.addCasePointOnMap(this.longitude, this.latitude)
+    },
+    // 加载部件服务的各图层
+    addBjLayers: function() {
+      // 此处可以优化
+      this.layers.dxbjPoint = new this.esriObj.FeatureLayer({ // 可配置属性，见TileLayer类
+        url: serverConfig.mapUrlBj + '/0',
+        id: 'dxbjPoint'
+      })
+      this.layers.dxbjLine = new this.esriObj.FeatureLayer({ // 可配置属性，见TileLayer类
+        url: serverConfig.mapUrlBj + '/1',
+        id: 'dxbjLine'
+      })
+      this.layers.dxbjXqd = new this.esriObj.FeatureLayer({ // 可配置属性，见TileLayer类
+        url: serverConfig.mapUrlBj + '/2',
+        id: 'dxbjXqd'
+      })
+      this.layers.dxbjMph = new this.esriObj.FeatureLayer({ // 可配置属性，见TileLayer类
+        url: serverConfig.mapUrlBj + '/3',
+        id: 'dxbjMph'
+      })
+      // this.layers.dx2wGrid = new this.esriObj.FeatureLayer({
+      //   url: serverConfig.mapUrlBase + '/6',
+      //   id: 'gridLayer'
+      // })
+
+      // 加载各图层
+      this.map.add(this.layers.dxbjPoint)
+      this.map.add(this.layers.dxbjLine)
+      this.map.add(this.layers.dxbjXqd)
+      this.map.add(this.layers.dxbjMph)
+      // this.map.add(this.layers.dx2wGrid)
+    },
+    // 在兴趣点图层查询关键字
+    // queryOnMap: function() {
+    //   const points = [] // 查询结果点集
+
+    //   this.clearQueryResults()
+    //   this.clearEOrCPoint()
+    //   this.showEventPointPopup = false
+    //   this.queryEventSwitch = '2'
+
+    //   // 查询条件
+    //   const query = new this.esriObj.Query()
+    //   query.returnGeometry = true
+    //   query.outFields = ['*']
+    //   query.where = 'NAME like ' + "'%" + this.keywords + "%'"
+    //   const that = this
+
+    //   this.layers.dxbjXqd.queryFeatures(query).then(function(results) {
+    //     results.features.forEach(item => {
+    //       const point = {}
+    //       point.x = item.geometry.longitude
+    //       point.y = item.geometry.latitude
+    //       point.attr = item.attributes
+    //       points.push(point)
+    //     })
+
+    //     // 提示查询结果
+    //     if (points.length > 0) {
+    //       that.$message({
+    //         message: '成功查询到' + points.length + '条记录',
+    //         type: 'success'
+    //       })
+
+    //       // 绘制点
+    //       that.addSimpleMarkerOnMap(points)
+    //     } else {
+    //       that.$message({
+    //         message: '没有查询到结果，请重新输入关键字',
+    //         type: 'warning'
+    //       })
+    //     }
+    //   })
+    // },
+    // 清除图层上的查询结果
+    // clearQueryResults: function() {
+    //   this.map.layers.forEach(layer => {
+    //     if (layer.type === 'graphics' && layer.id === queryResultLayerId) {
+    //       layer.graphics.removeAll()
+    //       return false
+    //     }
+    //   })
+    // },
+    // // 清除图层上的查询结果
+    // clearMap: function() {
+    //   // 清除地图上绘制的graphic图层
+    //   this.map.layers.forEach(layer => {
+    //     if (layer.type === 'graphics') {
+    //       layer.graphics.removeAll()
+    //       return false
+    //     }
+    //   })
+
+    //   // 清除弹出框
+    //   this.view.popup.close()
+
+    //   // 清除data属性值
+    //   this.keywords = ''
+    //   this.showEventPointPopup = true // 是否显示事部件的popup
+    //   this.queryEventSwitch = '1' // 1==查询事件；0==查询部件
+    //   this.compListOpts = [] // 部件选择下拉框option
+    //   this.longitude = '' // 定位点经度
+    //   this.latitude = '' // 定位点纬度
+    //   this.communityId = '' // 社区ID
+    //   this.communityName = '' // 社区名称
+    //   this.gridId = '' // 单元网格ID
+    //   this.componentId = '' // 部件ID
+    //   this.componentName = '' // 部件名称
+    // },
+    // 清除图层上的事件定位点
+    // clearEOrCPoint: function() {
+    //   this.map.layers.forEach(layer => {
+    //     if (layer.type === 'graphics' && layer.id === eventPointLayerId) {
+    //       layer.graphics.removeAll()
+    //       return false
+    //     }
+    //   })
+    //   // 清除弹出框
+    //   this.view.popup.close()
+    // },
+    // 切换
+    // switchEventOrComponent: function() {
+    //   // 如果选中的是事件定位（1）或部件定位（0），点击地图时弹出事件或者部件的popup；否则（2以上）显示兴趣点结果的属性popup
+    //   this.showEventPointPopup = this.queryEventSwitch < 2
+    // },
+    // 将查询结果点集合绘制在地图上
+    // addSimpleMarkerOnMap: function(points) {
+    //   const gLayer = new this.esriObj.GraphicsLayer()
+    //   points.forEach(item => {
+    //     const point = new this.esriObj.Point(item.x, item.y, item.attr)
+    //     const marker = new this.esriObj.SimpleMarkerSymbol()
+    //     marker.color = '#F9690E'
+    //     marker.outline = {
+    //       color: [128, 128, 128, 0.5],
+    //       width: '2px'
+    //     }
+    //     const graphic = new this.esriObj.Graphic({
+    //       geometry: point,
+    //       symbol: marker,
+    //       attributes: item.attr
+    //     })
+    //     gLayer.id = queryResultLayerId
+    //     gLayer.add(graphic)
+    //   })
+    //   this.map.add(gLayer)
+    // },
+    // 返回事件定位的结果
+    // checkEventPoint: function() {
+    //   this.$emit(
+    //     'closeMapQueryDialogByEvent',
+    //     this.longitude,
+    //     this.latitude,
+    //     this.communityId,
+    //     this.communityName,
+    //     this.gridId)
+
+    //   this.clearMap()
+    // },
+    // // 返回部件定位的结果
+    // checkComponentPoint: function() {
+    //   this.$emit(
+    //     'closeMapQueryDialogByComp',
+    //     this.longitude,
+    //     this.latitude,
+    //     this.communityId,
+    //     this.communityName,
+    //     this.gridId,
+    //     this.componentId)
+
+    //   this.clearMap()
+    // },
+    // 在地图上添加指定坐标的点
+    addCasePointOnMap: function(lng, lat) {
+      console.log('addCasePointOnMap', lng, lat)
+      const gLayer = new this.esriObj.GraphicsLayer() // 添加自定义绘制点的图层
+      const point = new this.esriObj.Point(lng, lat) // 创建geometry对象
+      const marker = new this.esriObj.SimpleMarkerSymbol() // 创建marker标识
+      // marker属性
+      marker.color = '#F9690E'
+      marker.outline = {
+        color: [128, 128, 128, 0.5],
+        width: '2px'
+      }
+      // 创建graphic对象
+      const graphic = new this.esriObj.Graphic({
+        geometry: point,
+        symbol: marker
+      })
+      gLayer.id = caseLayerId // 标识案卷图层
+      gLayer.add(graphic) // 图层上添加对象
+      this.map.add(gLayer) // 地图上添加图层
+
+      // 重新设置地图中心点并移动
+      this.view.center = point
+      this.view.goTo(point)
+    }
+  }
+}
+</script>
+
+<style scoped>
+  @import 'https://js.arcgis.com/4.13/esri/css/main.css';
+  .baseMap {
+    height:60vh;
+    width: 100%;
+    margin-top: 25px;
+    border: 1px solid #DCDCDC;
+    border-radius: 4px;
+  }
+</style>
diff --git a/src/router/index.js b/src/router/index.js
index b265a48..1c80473 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -11,6 +11,7 @@
 import { systemRouters } from './modules/system'
 import { cooRouters } from './modules/coo'
 import { commenetRouters } from './modules/comment'
+import { suphandleRouters } from './modules/suphandle'
 import { commonRouters } from './modules/common'
 
 /**
@@ -90,6 +91,7 @@
 export const asyncRouterMap = [
   ...commonRouters,
   ...cooRouters,
+  ...suphandleRouters,
   ...systemRouters,
   ...commenetRouters,
   { path: '*', redirect: '/404', hidden: true, meta: {}}

diff --git a/src/api/busAdmin/areaPersonliable.js b/src/api/busAdmin/areaPersonliable.js
new file mode 100644
index 0000000..58737bb
--- /dev/null
+++ b/src/api/busAdmin/areaPersonliable.js
@@ -0,0 +1,45 @@
+import request from '@/utils/request'
+
+export function getAreaPersonliableList(params) {
+  return request({
+    url: '/areaPersonliable/listPage',
+    method: 'get',
+    params
+  })
+}
+
+export function addAreaPersonliable(params) {
+  return request({
+    url: '/areaPersonliable/add',
+    method: 'post',
+    params
+  })
+}
+
+export function updateAreaPersonliable(params) {
+  return request({
+    url: '/areaPersonliable/update',
+    method: 'post',
+    params
+  })
+}
+
+export function deleteAreaPersonliable(id) {
+  return request({
+    url: '/areaPersonliable/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+export function getSupervisorList() {
+  return request({
+    url: '/mgr/simplelist',
+    method: 'post',
+    params: {
+      roleTips: 'supervisor'
+    }
+  })
+}
diff --git a/src/api/callCase/callCase.js b/src/api/callCase/callCase.js
new file mode 100644
index 0000000..7500fc7
--- /dev/null
+++ b/src/api/callCase/callCase.js
@@ -0,0 +1,87 @@
+/**
+ * 新建案卷的接口
+ */
+import request from '@/utils/request'
+
+// 获取案卷信息来源
+export function getCaseSource(params) {
+  return request({
+    url: 'dict/code/caseSource',
+    method: 'get',
+    params
+  })
+}
+
+// 获取案卷等级
+export function getCaseLevel(params) {
+  return request({
+    url: 'dict/code/caseLevel',
+    method: 'get',
+    params
+  })
+}
+
+// 获取案卷类别
+export function getCaseEorC(params) {
+  return request({
+    url: 'dict/code/eorc',
+    method: 'get',
+    params
+  })
+}
+
+// 根据案卷类别获取案卷大类
+export function getCaseType(eorc) {
+  return request({
+    url: 'case/type/list',
+    method: 'get',
+    params: {
+      eorc: eorc
+    }
+  })
+}
+
+// 根据案卷大类获取案卷小类
+export function getCaseDetailType(caseTypeId) {
+  return request({
+    url: 'case/typeDetail/list',
+    method: 'get',
+    params: {
+      typeId: caseTypeId
+    }
+  })
+}
+
+// 根据案卷小类获取结案标准
+export function getCaseTypesTime(caseTypeDetailId) {
+  return request({
+    url: 'case/typesTime/list',
+    method: 'get',
+    params: {
+      detailId: caseTypeDetailId
+    }
+  })
+}
+
+// 获取监督员列表
+export function getVerifyPerson(params) {
+  return request({
+    url: 'mgr/simplelist',
+    method: 'post',
+    params: {
+      roleTips: 'supervisor'
+    }
+  })
+}
+
+// 新增案卷
+export function addCase(params) {
+  return request({
+    url: 'case/add',
+    method: 'post',
+    headers: {
+      'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
+    },
+    params
+  })
+}
diff --git a/src/api/coorBusiness/case.js b/src/api/coorBusiness/case.js
index ec5a88a..08c3a13 100644
--- a/src/api/coorBusiness/case.js
+++ b/src/api/coorBusiness/case.js
@@ -110,9 +110,10 @@
   })
 }
 
+// 待处理
 export function toHandleListPage(params) {
   return request({
-    url: 'case/toHandleListPage/',
+    url: 'case/toProcessListPage/',
     method: 'get',
     params
   })
@@ -158,9 +159,10 @@
   })
 }
 
+// 待核查
 export function toCheckListPage(params) {
   return request({
-    url: 'case/toCheckListPage/',
+    url: 'case/toDisCheckListPage/',
     method: 'get',
     params
   })
diff --git a/src/components/CaseCommon/caseDetail.vue b/src/components/CaseCommon/caseDetail.vue
index f6c23ab..fdadcba 100644
--- a/src/components/CaseCommon/caseDetail.vue
+++ b/src/components/CaseCommon/caseDetail.vue
@@ -276,7 +276,7 @@
     </el-row>
     <el-row>
       <div class="title">数据流转:</div>
-      <el-table :data="recordList" :header-cell-style="{background:'#f3f3f3'}" class="table" border>
+      <el-table :data="recordList" :header-cell-style="{background:'#f3f3f3'}" max-height="400" class="table" border>
         <el-table-column prop="operationTypeName" label="操作" align="center"/>
         <el-table-column prop="deptName" label="单位" align="center"/>
         <el-table-column prop="userName" label="人员" align="center"/>
@@ -293,7 +293,7 @@
       :append-to-body="true"
       title="位置详情"
     >
-      <arc-gis-map :longitude="Number(caseDetail.lng)" :latitude="Number(caseDetail.lat)"/>
+      <arc-gis-map-read :longitude="Number(caseDetail.lng)" :latitude="Number(caseDetail.lat)"/>
     </el-dialog>
   </div>
 </template>
@@ -303,12 +303,12 @@
 import { getCaseDetail, getUserList, getDeptList, getCaseTypeList, getCaseTypeDetailList, getCaseTypeTimes } from '@/api/coorBusiness/case'
 import { getCommonLanguage, getFilingTypeList, getCaseLevelList } from '@/api/coorBusiness/dict'
 import { historicalRecords, nextNodes, completeCaseTask } from '@/api/coorBusiness/process'
-import ArcGisMap from '@/components/Map/arcgisMap'
+import ArcGisMapRead from '@/components/Map/arcgisMapRead'
 import { radioMap } from './radioMap'
 
 export default {
   name: 'CaseDetail',
-  components: { ArcGisMap },
+  components: { ArcGisMapRead },
   // props: {
   //   id: {
   //     type: String,
@@ -334,7 +334,6 @@
       showNeedVisit: false,
       caseDetail: {},
       operationKey: '', // 案件处理按钮key
-      imgurl: 'http:\\\\192.168.8.201:8083\\static\\',
       fileIdVerify: [], // 核实照片id
       fileIdProcess: [], // 处理照片id
       fileIdCheck: [], // 核查照片id
@@ -358,10 +357,12 @@
   computed: {
     isNeedVisit: function() {
       return this.caseDetail.isNeedRevisit === 1 ? '需要回访' : '不需要回访'
+    },
+    imgurl() {
+      return process.env.BASE_API + '/static/'
     }
   },
-  mounted() {
-    console.log('case dtial')
+  created() {
     this.id = this.$route.query.id
     this.showProcess = (this.$route.query.showProcess || this.$route.query.showProcess === false) ? this.$route.query.showProcess : true
     this.showNeedVisit = this.$route.query.showNeedVisit ? this.$route.query.showNeedVisit : false
@@ -371,7 +372,6 @@
     async initData() {
       // 查询案件详情接口
       const resDetail = await getCaseDetail(this.id)
-      console.log('detail', resDetail)
       this.caseDetail = resDetail.data[0]
 
       // 解析图片id
@@ -391,9 +391,11 @@
 
       // 查询流转记录接口
       this.processForm.processId = this.caseDetail.processId
-      const resRecord = await historicalRecords(this.processForm.processId)
-      this.recordList = resRecord.data
-      console.log(this.recordList)
+      // const resRecord = historicalRecords(this.processForm.processId)
+      // this.recordList = resRecord.data
+      historicalRecords(this.processForm.processId).then(res => {
+        this.recordList = res.data
+      })
 
       if (this.showProcess) {
         this.initProcess()
@@ -701,6 +703,7 @@
   .table{
     margin: 20px;
     width: 98%;
+    // max-height: 250px;
   }
   .title{
     margin-left: 38px;
diff --git a/src/components/CaseCommon/caseDetailRead.vue b/src/components/CaseCommon/caseDetailRead.vue
index 82066db..a4e87b0 100644
--- a/src/components/CaseCommon/caseDetailRead.vue
+++ b/src/components/CaseCommon/caseDetailRead.vue
@@ -158,11 +158,11 @@
 
 <script>
 import { getCaseDetail } from '@/api/coorBusiness/case'
-import ArcGisMap from '@/components/Map/arcgisMap'
+import ArcGisMapRead from '@/components/Map/arcgisMapRead'
 
 export default {
   name: 'CaseDetail',
-  components: { ArcGisMap },
+  components: { ArcGisMapRead },
   props: {
     id: {
       type: String,
diff --git a/src/components/Map/ArcGISConfig.js b/src/components/Map/ArcGISConfig.js
index d325da9..50cea3b 100644
--- a/src/components/Map/ArcGISConfig.js
+++ b/src/components/Map/ArcGISConfig.js
@@ -1,14 +1,16 @@
 export const mapConfig = {
-  apiUrl: 'https://js.arcgis.com/4.13/', // 暂时使用管网提供的api，实际部署时建议离线部署一套
+  apiUrl: 'http://192.168.8.205/arcgis_js_api/library/4.12/init.js', // 暂时使用管网提供的api，实际部署时建议离线部署一套
+  // apiUrl: 'https://js.arcgis.com/4.13/',
   mapIp: '223.84.218.107', // 服务ip
   mapPort: '6080', // 服务端口
-  serverBase: 'http://223.84.218.107:6080/arcgis/rest/services/', // 服务地址前缀
+  serverBase: 'http://192.168.8.205:6080/arcgis/rest/services/', // 服务地址前缀
+  // serverBase: 'http://223.84.218.107:6080/arcgis/rest/services/dx/',
   mapCenter: '[116.597,28.24]' // 地图中心点
 }
 
 export const serverConfig = {
-  mapUrlBase: mapConfig.serverBase + 'dx/2w/MapServer', // 底图服务地址
-  mapUrlBj: mapConfig.serverBase + 'dx/dxbj/MapServer', // 部件服务地址
-  mapUrlBjfc: mapConfig.serverBase + 'dx/bjfc/MapServer', // 部件分层服务地址
-  mapUrlBjEdit: mapConfig.serverBase + 'dx/dxbj/FeatureServer' // 可编辑的部件图层
+  mapUrlBase: mapConfig.serverBase + '2w/MapServer', // 底图服务地址
+  mapUrlBj: mapConfig.serverBase + 'dxbj/MapServer', // 部件服务地址
+  mapUrlBjfc: mapConfig.serverBase + 'bjfc/MapServer', // 部件分层服务地址
+  mapUrlBjEdit: mapConfig.serverBase + 'dxbj/FeatureServer' // 可编辑的部件图层
 }
diff --git a/src/components/Map/arcgisMap.vue b/src/components/Map/arcgisMap.vue
index 53776f1..5c15383 100644
--- a/src/components/Map/arcgisMap.vue
+++ b/src/components/Map/arcgisMap.vue
@@ -1,6 +1,6 @@
 <template>
-  <div style="margin-top:-30px">
-    <!-- <el-row :gutter="20">
+  <div>
+    <el-row :gutter="20">
       <el-col :span="4">
         <el-input v-model="keywords" size="small" type="text" placeholder="兴趣点关键字" clearable />
       </el-col>
@@ -31,9 +31,9 @@
       <el-col v-if="queryEventSwitch === '1'" :span="8" style="text-align: right;">
         <el-button type="primary" size="small" @click="checkEventPoint"> 事件提交 </el-button>
       </el-col>
-    </el-row> -->
+    </el-row>
 
-    <div v-loading="mapLoading" ref="mapDiv" class="baseMap" />
+    <div ref="mapDiv" class="baseMap" />
   </div>
 </template>
 
@@ -45,22 +45,12 @@
   url: mapConfig.apiUrl
 }
 
-// const eventPointLayerId = 'eventPointLayer' // 事件定位点的图层id
-// const queryResultLayerId = 'queryResultLayer' // 兴趣点查询结果点集的图层id
+const eventPointLayerId = 'eventPointLayer' // 事件定位点的图层id
+const queryResultLayerId = 'queryResultLayer' // 兴趣点查询结果点集的图层id
 const caseLayerId = 'addedGeometryLayerId' // 案卷点图层
 
 export default {
-  name: 'ArcGisMap',
-  props: {
-    longitude: {
-      type: Number,
-      default: 116.5937
-    },
-    latitude: {
-      type: Number,
-      default: 28.249
-    }
-  },
+  name: 'ArcGISMap',
   data() {
     return {
       map: '',
@@ -89,19 +79,18 @@
         IdentifyParameters: '',
         MapView: ''
       },
-      mapLoading: false
-      // keywords: '', // 查询关键字
-      // showEventPointPopup: true, // 是否显示事部件的popup
-      // queryEventSwitch: '1', // 1==查询事件；0==查询部件
-      // compListOpts: [], // 部件选择下拉框option
+      keywords: '', // 查询关键字
+      showEventPointPopup: true, // 是否显示事部件的popup
+      queryEventSwitch: '1', // 1==查询事件；0==查询部件
+      compListOpts: [], // 部件选择下拉框option
       // 主页面返回值
-      // longitude: '', // 定位点经度
-      // latitude: '' // 定位点纬度
-      // communityId: '', // 社区ID
-      // communityName: '', // 社区名称
-      // gridId: '', // 单元网格ID
-      // componentId: '', // 部件ID
-      // componentName: '' // 部件名称/=
+      longitude: '', // 定位点经度
+      latitude: '', // 定位点纬度
+      communityId: '', // 社区ID
+      communityName: '', // 社区名称
+      gridId: '', // 单元网格ID
+      componentId: '', // 部件ID
+      componentName: '' // 部件名称
     }
   },
   mounted() {
@@ -110,7 +99,6 @@
   methods: {
     // 初始化ArcGIS API对象
     importEsri: function() {
-      this.mapLoading = true
       loadModules([
         'esri/Map',
         'esri/Basemap',
@@ -164,10 +152,8 @@
 
           // 初始化地图
           this.initMap()
-          this.mapLoading = false
         }).catch(err => {
           console.log(err)
-          this.mapLoading = false
         })
     },
     // 初始化地图
@@ -194,139 +180,139 @@
         zoom: 3 // 当前地图缩放等级
       })
 
-      // const that = this
-      // this.view.on('click', function(event) {
-      //   // 清除地图上已有的事件/部件查询点
-      //   that.clearEOrCPoint()
+      const that = this
+      this.view.on('click', function(event) {
+        // 清除地图上已有的事件/部件查询点
+        that.clearEOrCPoint()
 
-      //   const lon = event.mapPoint.longitude
-      //   const lat = event.mapPoint.latitude
+        const lon = event.mapPoint.longitude
+        const lat = event.mapPoint.latitude
 
-      //   if (that.showEventPointPopup) {
-      //     // 添加点
-      //     const gLayer = new that.esriObj.GraphicsLayer()
-      //     const marker = new that.esriObj.SimpleMarkerSymbol()
-      //     marker.color = '#35A0E7'
-      //     marker.style = 'square'
-      //     marker.outline = {
-      //       color: [128, 128, 128, 0.5],
-      //       width: '2px'
-      //     }
-      //     const graphic = new that.esriObj.Graphic({
-      //       geometry: event.mapPoint,
-      //       symbol: marker
-      //     })
+        if (that.showEventPointPopup) {
+          // 添加点
+          const gLayer = new that.esriObj.GraphicsLayer()
+          const marker = new that.esriObj.SimpleMarkerSymbol()
+          marker.color = '#35A0E7'
+          marker.style = 'square'
+          marker.outline = {
+            color: [128, 128, 128, 0.5],
+            width: '2px'
+          }
+          const graphic = new that.esriObj.Graphic({
+            geometry: event.mapPoint,
+            symbol: marker
+          })
 
-      //     gLayer.id = eventPointLayerId
-      //     gLayer.add(graphic)
-      //     that.map.add(gLayer)
+          gLayer.id = eventPointLayerId
+          gLayer.add(graphic)
+          that.map.add(gLayer)
 
-      //     // 查询事件或者部件
-      //     if (that.queryEventSwitch === '1') {
-      //       // 事件定位
-      //       // 1查询底图得到所在网格与所在社区
-      //       const query = that.layers.dx2wGrid.createQuery()
-      //       query.geometry = that.view.toMap(event)
-      //       query.distance = 10
-      //       query.units = 'meters'
-      //       query.returnGeometry = true
-      //       query.outFields = ['BGID', 'COMMUID', 'COMMUNAME']
-      //       that.layers.dx2wGrid.queryFeatures(query)
-      //         .then(function(response) {
-      //           const result = response.features[0].attributes
+          // 查询事件或者部件
+          if (that.queryEventSwitch === '1') {
+            // 事件定位
+            // 1查询底图得到所在网格与所在社区
+            const query = that.layers.dx2wGrid.createQuery()
+            query.geometry = that.view.toMap(event)
+            query.distance = 10
+            query.units = 'meters'
+            query.returnGeometry = true
+            query.outFields = ['BGID', 'COMMUID', 'COMMUNAME']
+            that.layers.dx2wGrid.queryFeatures(query)
+              .then(function(response) {
+                const result = response.features[0].attributes
 
-      //           // 赋值
-      //           that.longitude = lon
-      //           that.latitude = lat
-      //           that.gridId = result.BGID
-      //           that.communityId = result.COMMUID
-      //           that.communityName = result.COMMUNAME
+                // 赋值
+                that.longitude = lon
+                that.latitude = lat
+                that.gridId = result.BGID
+                that.communityId = result.COMMUID
+                that.communityName = result.COMMUNAME
 
-      //           // 2弹出气泡
-      //           that.view.popup.open({
-      //             title: '事件定位',
-      //             content: '坐标：[' + lon.toFixed(4) + ', ' + lat.toFixed(4) + ']' + '<p>' + '所在社区：' + result.COMMUNAME,
-      //             location: event.mapPoint
-      //           })
-      //         })
-      //     } else if (that.queryEventSwitch === '0') {
-      //       // 部件定位
-      //       const queryDev = that.layers.dxbjPoint.createQuery()
-      //       // 定义查询的圆形范围，半径5米
-      //       const circle = new that.esriObj.Circle({
-      //         center: event.mapPoint,
-      //         radius: 5,
-      //         radiusUnit: 'meters'
-      //       })
-      //       queryDev.geometry = circle
-      //       queryDev.returnGeometry = true
-      //       queryDev.outFields = ['BGID', 'OBJID', 'OBJNAME', 'OBJPOS']
-      //       that.layers.dxbjPoint.queryFeatures(queryDev)
-      //         .then(function(response) {
-      //           if (response.features.length > 0) {
-      //             const results = response.features
+                // 2弹出气泡
+                that.view.popup.open({
+                  title: '事件定位',
+                  content: '坐标：[' + lon.toFixed(4) + ', ' + lat.toFixed(4) + ']' + '<p>' + '所在社区：' + result.COMMUNAME,
+                  location: event.mapPoint
+                })
+              })
+          } else if (that.queryEventSwitch === '0') {
+            // 部件定位
+            const queryDev = that.layers.dxbjPoint.createQuery()
+            // 定义查询的圆形范围，半径5米
+            const circle = new that.esriObj.Circle({
+              center: event.mapPoint,
+              radius: 5,
+              radiusUnit: 'meters'
+            })
+            queryDev.geometry = circle
+            queryDev.returnGeometry = true
+            queryDev.outFields = ['BGID', 'OBJID', 'OBJNAME', 'OBJPOS']
+            that.layers.dxbjPoint.queryFeatures(queryDev)
+              .then(function(response) {
+                if (response.features.length > 0) {
+                  const results = response.features
 
-      //             that.compListOpts = []
+                  that.compListOpts = []
 
-      //             let content = ''
-      //             results.forEach((item, index) => {
-      //               content += '<p>部件' + (index + 1) + '：' + item.attributes.OBJNAME + '，' + item.attributes.OBJPOS
-      //               const comp = {}
-      //               comp.name = '部件' + (index + 1) + '：' + item.attributes.OBJNAME
-      //               comp.value = item.attributes.OBJID
-      //               that.compListOpts.push(comp)
-      //             })
+                  let content = ''
+                  results.forEach((item, index) => {
+                    content += '<p>部件' + (index + 1) + '：' + item.attributes.OBJNAME + '，' + item.attributes.OBJPOS
+                    const comp = {}
+                    comp.name = '部件' + (index + 1) + '：' + item.attributes.OBJNAME
+                    comp.value = item.attributes.OBJID
+                    that.compListOpts.push(comp)
+                  })
 
-      //             // 2弹出气泡
-      //             that.view.popup.open({
-      //               title: '部件定位',
-      //               content: '坐标：[' + lon.toFixed(4) + ', ' + lat.toFixed(4) + ']，附近5米的部件有：' + content,
-      //               location: event.mapPoint
-      //             })
+                  // 2弹出气泡
+                  that.view.popup.open({
+                    title: '部件定位',
+                    content: '坐标：[' + lon.toFixed(4) + ', ' + lat.toFixed(4) + ']，附近5米的部件有：' + content,
+                    location: event.mapPoint
+                  })
 
-      //             // 查询所在社区和单元网格
-      //             const queryPos = that.layers.dx2wGrid.createQuery()
-      //             queryPos.geometry = that.view.toMap(event)
-      //             queryPos.returnGeometry = true
-      //             queryPos.outFields = ['BGID', 'COMMUID', 'COMMUNAME']
-      //             that.layers.dx2wGrid.queryFeatures(queryPos)
-      //               .then(function(response) {
-      //                 const result = response.features[0].attributes
+                  // 查询所在社区和单元网格
+                  const queryPos = that.layers.dx2wGrid.createQuery()
+                  queryPos.geometry = that.view.toMap(event)
+                  queryPos.returnGeometry = true
+                  queryPos.outFields = ['BGID', 'COMMUID', 'COMMUNAME']
+                  that.layers.dx2wGrid.queryFeatures(queryPos)
+                    .then(function(response) {
+                      const result = response.features[0].attributes
 
-      //                 // 赋值
-      //                 that.longitude = lon
-      //                 that.latitude = lat
-      //                 that.gridId = result.BGID
-      //                 that.communityId = result.COMMUID
-      //                 that.communityName = result.COMMUNAME
-      //               })
-      //           } else {
-      //             that.$message({
-      //               message: '没有查询到部件，请重新定位',
-      //               type: 'warning'
-      //             })
-      //           }
-      //         })
-      //     }
-      //   } else {
-      //     that.view.hitTest(event).then(function(response) {
-      //       if (response.results.length) {
-      //         const graphic = response.results[0].graphic
-      //         const name = graphic.attributes.KEYWORD
-      //         const address = graphic.attributes.OBJPOS
+                      // 赋值
+                      that.longitude = lon
+                      that.latitude = lat
+                      that.gridId = result.BGID
+                      that.communityId = result.COMMUID
+                      that.communityName = result.COMMUNAME
+                    })
+                } else {
+                  that.$message({
+                    message: '没有查询到部件，请重新定位',
+                    type: 'warning'
+                  })
+                }
+              })
+          }
+        } else {
+          that.view.hitTest(event).then(function(response) {
+            if (response.results.length) {
+              const graphic = response.results[0].graphic
+              const name = graphic.attributes.KEYWORD
+              const address = graphic.attributes.OBJPOS
 
-      //         that.view.popup.open({
-      //           title: name,
-      //           content: address,
-      //           location: event.mapPoint
-      //         })
-      //       }
-      //     })
-      //   }
-      // })
+              that.view.popup.open({
+                title: name,
+                content: address,
+                location: event.mapPoint
+              })
+            }
+          })
+        }
+      })
 
       this.addBjLayers()
-      this.addCasePointOnMap(this.longitude, this.latitude)
+      // this.addCasePointOnMap(116.5937, 28.249)
     },
     // 加载部件服务的各图层
     addBjLayers: function() {
@@ -347,160 +333,159 @@
         url: serverConfig.mapUrlBj + '/3',
         id: 'dxbjMph'
       })
-      // this.layers.dx2wGrid = new this.esriObj.FeatureLayer({
-      //   url: serverConfig.mapUrlBase + '/6',
-      //   id: 'gridLayer'
-      // })
+      this.layers.dx2wGrid = new this.esriObj.FeatureLayer({
+        url: serverConfig.mapUrlBase + '/1',
+        id: 'gridLayer'
+      })
 
       // 加载各图层
       this.map.add(this.layers.dxbjPoint)
       this.map.add(this.layers.dxbjLine)
       this.map.add(this.layers.dxbjXqd)
       this.map.add(this.layers.dxbjMph)
-      // this.map.add(this.layers.dx2wGrid)
+      this.map.add(this.layers.dx2wGrid)
     },
     // 在兴趣点图层查询关键字
-    // queryOnMap: function() {
-    //   const points = [] // 查询结果点集
+    queryOnMap: function() {
+      const points = [] // 查询结果点集
 
-    //   this.clearQueryResults()
-    //   this.clearEOrCPoint()
-    //   this.showEventPointPopup = false
-    //   this.queryEventSwitch = '2'
+      this.clearQueryResults()
+      this.clearEOrCPoint()
+      this.showEventPointPopup = false
+      this.queryEventSwitch = '2'
 
-    //   // 查询条件
-    //   const query = new this.esriObj.Query()
-    //   query.returnGeometry = true
-    //   query.outFields = ['*']
-    //   query.where = 'NAME like ' + "'%" + this.keywords + "%'"
-    //   const that = this
+      // 查询条件
+      const query = new this.esriObj.Query()
+      query.returnGeometry = true
+      query.outFields = ['*']
+      query.where = 'NAME like ' + "'%" + this.keywords + "%'"
+      const that = this
 
-    //   this.layers.dxbjXqd.queryFeatures(query).then(function(results) {
-    //     results.features.forEach(item => {
-    //       const point = {}
-    //       point.x = item.geometry.longitude
-    //       point.y = item.geometry.latitude
-    //       point.attr = item.attributes
-    //       points.push(point)
-    //     })
+      this.layers.dxbjXqd.queryFeatures(query).then(function(results) {
+        results.features.forEach(item => {
+          const point = {}
+          point.x = item.geometry.longitude
+          point.y = item.geometry.latitude
+          point.attr = item.attributes
+          points.push(point)
+        })
 
-    //     // 提示查询结果
-    //     if (points.length > 0) {
-    //       that.$message({
-    //         message: '成功查询到' + points.length + '条记录',
-    //         type: 'success'
-    //       })
+        // 提示查询结果
+        if (points.length > 0) {
+          that.$message({
+            message: '成功查询到' + points.length + '条记录',
+            type: 'success'
+          })
 
-    //       // 绘制点
-    //       that.addSimpleMarkerOnMap(points)
-    //     } else {
-    //       that.$message({
-    //         message: '没有查询到结果，请重新输入关键字',
-    //         type: 'warning'
-    //       })
-    //     }
-    //   })
-    // },
+          // 绘制点
+          that.addSimpleMarkerOnMap(points)
+        } else {
+          that.$message({
+            message: '没有查询到结果，请重新输入关键字',
+            type: 'warning'
+          })
+        }
+      })
+    },
     // 清除图层上的查询结果
-    // clearQueryResults: function() {
-    //   this.map.layers.forEach(layer => {
-    //     if (layer.type === 'graphics' && layer.id === queryResultLayerId) {
-    //       layer.graphics.removeAll()
-    //       return false
-    //     }
-    //   })
-    // },
-    // // 清除图层上的查询结果
-    // clearMap: function() {
-    //   // 清除地图上绘制的graphic图层
-    //   this.map.layers.forEach(layer => {
-    //     if (layer.type === 'graphics') {
-    //       layer.graphics.removeAll()
-    //       return false
-    //     }
-    //   })
+    clearQueryResults: function() {
+      this.map.layers.forEach(layer => {
+        if (layer.type === 'graphics' && layer.id === queryResultLayerId) {
+          layer.graphics.removeAll()
+          return false
+        }
+      })
+    },
+    // 清除图层上的查询结果
+    clearMap: function() {
+      // 清除地图上绘制的graphic图层
+      this.map.layers.forEach(layer => {
+        if (layer.type === 'graphics') {
+          layer.graphics.removeAll()
+          return false
+        }
+      })
 
-    //   // 清除弹出框
-    //   this.view.popup.close()
+      // 清除弹出框
+      this.view.popup.close()
 
-    //   // 清除data属性值
-    //   this.keywords = ''
-    //   this.showEventPointPopup = true // 是否显示事部件的popup
-    //   this.queryEventSwitch = '1' // 1==查询事件；0==查询部件
-    //   this.compListOpts = [] // 部件选择下拉框option
-    //   this.longitude = '' // 定位点经度
-    //   this.latitude = '' // 定位点纬度
-    //   this.communityId = '' // 社区ID
-    //   this.communityName = '' // 社区名称
-    //   this.gridId = '' // 单元网格ID
-    //   this.componentId = '' // 部件ID
-    //   this.componentName = '' // 部件名称
-    // },
+      // 清除data属性值
+      this.keywords = ''
+      this.showEventPointPopup = true // 是否显示事部件的popup
+      this.queryEventSwitch = '1' // 1==查询事件；0==查询部件
+      this.compListOpts = [] // 部件选择下拉框option
+      this.longitude = '' // 定位点经度
+      this.latitude = '' // 定位点纬度
+      this.communityId = '' // 社区ID
+      this.communityName = '' // 社区名称
+      this.gridId = '' // 单元网格ID
+      this.componentId = '' // 部件ID
+      this.componentName = '' // 部件名称
+    },
     // 清除图层上的事件定位点
-    // clearEOrCPoint: function() {
-    //   this.map.layers.forEach(layer => {
-    //     if (layer.type === 'graphics' && layer.id === eventPointLayerId) {
-    //       layer.graphics.removeAll()
-    //       return false
-    //     }
-    //   })
-    //   // 清除弹出框
-    //   this.view.popup.close()
-    // },
+    clearEOrCPoint: function() {
+      this.map.layers.forEach(layer => {
+        if (layer.type === 'graphics' && layer.id === eventPointLayerId) {
+          layer.graphics.removeAll()
+          return false
+        }
+      })
+      // 清除弹出框
+      this.view.popup.close()
+    },
     // 切换
-    // switchEventOrComponent: function() {
-    //   // 如果选中的是事件定位（1）或部件定位（0），点击地图时弹出事件或者部件的popup；否则（2以上）显示兴趣点结果的属性popup
-    //   this.showEventPointPopup = this.queryEventSwitch < 2
-    // },
+    switchEventOrComponent: function() {
+      // 如果选中的是事件定位（1）或部件定位（0），点击地图时弹出事件或者部件的popup；否则（2以上）显示兴趣点结果的属性popup
+      this.showEventPointPopup = this.queryEventSwitch < 2
+    },
     // 将查询结果点集合绘制在地图上
-    // addSimpleMarkerOnMap: function(points) {
-    //   const gLayer = new this.esriObj.GraphicsLayer()
-    //   points.forEach(item => {
-    //     const point = new this.esriObj.Point(item.x, item.y, item.attr)
-    //     const marker = new this.esriObj.SimpleMarkerSymbol()
-    //     marker.color = '#F9690E'
-    //     marker.outline = {
-    //       color: [128, 128, 128, 0.5],
-    //       width: '2px'
-    //     }
-    //     const graphic = new this.esriObj.Graphic({
-    //       geometry: point,
-    //       symbol: marker,
-    //       attributes: item.attr
-    //     })
-    //     gLayer.id = queryResultLayerId
-    //     gLayer.add(graphic)
-    //   })
-    //   this.map.add(gLayer)
-    // },
+    addSimpleMarkerOnMap: function(points) {
+      const gLayer = new this.esriObj.GraphicsLayer()
+      points.forEach(item => {
+        const point = new this.esriObj.Point(item.x, item.y, item.attr)
+        const marker = new this.esriObj.SimpleMarkerSymbol()
+        marker.color = '#F9690E'
+        marker.outline = {
+          color: [128, 128, 128, 0.5],
+          width: '2px'
+        }
+        const graphic = new this.esriObj.Graphic({
+          geometry: point,
+          symbol: marker,
+          attributes: item.attr
+        })
+        gLayer.id = queryResultLayerId
+        gLayer.add(graphic)
+      })
+      this.map.add(gLayer)
+    },
     // 返回事件定位的结果
-    // checkEventPoint: function() {
-    //   this.$emit(
-    //     'closeMapQueryDialogByEvent',
-    //     this.longitude,
-    //     this.latitude,
-    //     this.communityId,
-    //     this.communityName,
-    //     this.gridId)
+    checkEventPoint: function() {
+      this.$emit(
+        'closeMapQueryDialogByEvent',
+        this.longitude,
+        this.latitude,
+        this.communityId,
+        this.communityName,
+        this.gridId)
 
-    //   this.clearMap()
-    // },
-    // // 返回部件定位的结果
-    // checkComponentPoint: function() {
-    //   this.$emit(
-    //     'closeMapQueryDialogByComp',
-    //     this.longitude,
-    //     this.latitude,
-    //     this.communityId,
-    //     this.communityName,
-    //     this.gridId,
-    //     this.componentId)
+      this.clearMap()
+    },
+    // 返回部件定位的结果
+    checkComponentPoint: function() {
+      this.$emit(
+        'closeMapQueryDialogByComp',
+        this.longitude,
+        this.latitude,
+        this.communityId,
+        this.communityName,
+        this.gridId,
+        this.componentId)
 
-    //   this.clearMap()
-    // },
+      this.clearMap()
+    },
     // 在地图上添加指定坐标的点
     addCasePointOnMap: function(lng, lat) {
-      console.log('addCasePointOnMap', lng, lat)
       const gLayer = new this.esriObj.GraphicsLayer() // 添加自定义绘制点的图层
       const point = new this.esriObj.Point(lng, lat) // 创建geometry对象
       const marker = new this.esriObj.SimpleMarkerSymbol() // 创建marker标识
@@ -521,14 +506,14 @@
 
       // 重新设置地图中心点并移动
       this.view.center = point
-      this.view.goTo(point)
+      this.view.goTo()
     }
   }
 }
 </script>
 
 <style scoped>
-  @import 'https://js.arcgis.com/4.13/esri/css/main.css';
+  @import 'http://192.168.8.205/arcgis_js_api/library/4.12/esri/css/main.css';
   .baseMap {
     height:60vh;
     width: 100%;
diff --git a/src/components/Map/arcgisMapRead.vue b/src/components/Map/arcgisMapRead.vue
new file mode 100644
index 0000000..ae2058b
--- /dev/null
+++ b/src/components/Map/arcgisMapRead.vue
@@ -0,0 +1,539 @@
+<template>
+  <div style="margin-top:-30px">
+    <!-- <el-row :gutter="20">
+      <el-col :span="4">
+        <el-input v-model="keywords" size="small" type="text" placeholder="兴趣点关键字" clearable />
+      </el-col>
+      <el-col :span="4">
+        <el-button type="primary" size="small" @click="queryOnMap">查询</el-button>
+        <el-button type="info" size="small" @click="clearMap"> 清除地图 </el-button>
+      </el-col>
+
+      <el-col :span="8" style="text-align: center;">
+        <el-radio-group v-model="queryEventSwitch" size="small" @change="switchEventOrComponent">
+          <el-radio-button label="1">事件定位</el-radio-button>
+          <el-radio-button label="0">部件定位</el-radio-button>
+          <el-radio-button label="2">兴趣点属性</el-radio-button>
+        </el-radio-group>
+      </el-col>
+
+      <el-col v-if="queryEventSwitch === '0'" :span="8" style="text-align: right;">
+        <el-select v-model="componentId" placeholder="选择部件" clearable value="" size="small">
+          <el-option
+            v-for="item in compListOpts"
+            :key="item.value"
+            :label="item.name"
+            :value="item.value"/>
+        </el-select>
+        <el-button type="primary" size="small" @click="checkComponentPoint"> 部件提交 </el-button>
+      </el-col>
+
+      <el-col v-if="queryEventSwitch === '1'" :span="8" style="text-align: right;">
+        <el-button type="primary" size="small" @click="checkEventPoint"> 事件提交 </el-button>
+      </el-col>
+    </el-row> -->
+
+    <div v-loading="mapLoading" ref="mapDiv" class="baseMap" />
+  </div>
+</template>
+
+<script>
+import { loadModules } from 'esri-loader'
+import { mapConfig, serverConfig } from './ArcGISConfig'
+
+const option = {
+  url: mapConfig.apiUrl
+}
+
+// const eventPointLayerId = 'eventPointLayer' // 事件定位点的图层id
+// const queryResultLayerId = 'queryResultLayer' // 兴趣点查询结果点集的图层id
+const caseLayerId = 'addedGeometryLayerId' // 案卷点图层
+
+export default {
+  name: 'ArcGisMapRead',
+  props: {
+    longitude: {
+      type: Number,
+      default: 116.5937
+    },
+    latitude: {
+      type: Number,
+      default: 28.249
+    }
+  },
+  data() {
+    return {
+      map: '',
+      view: '',
+      layers: {
+        dxbjPoint: '', // 部件点图层
+        dxbjLine: '', // 部件线图层
+        dxbjXqd: '', // 兴趣点图层
+        dxbjMph: '', // 门牌好图层
+        dx2wGrid: '' // 单元网格图层
+      },
+      esriObj: {
+        Map: '',
+        BaseMap: '',
+        Graphic: '',
+        PopupTemplate: '',
+        Circle: '',
+        Point: '',
+        FeatureLayer: '',
+        GraphicsLayer: '',
+        TileLayer: '',
+        SimpleMarkerSymbol: '',
+        Query: '',
+        QueryTask: '',
+        IdentifyTask: '',
+        IdentifyParameters: '',
+        MapView: ''
+      },
+      mapLoading: false
+      // keywords: '', // 查询关键字
+      // showEventPointPopup: true, // 是否显示事部件的popup
+      // queryEventSwitch: '1', // 1==查询事件；0==查询部件
+      // compListOpts: [], // 部件选择下拉框option
+      // 主页面返回值
+      // longitude: '', // 定位点经度
+      // latitude: '' // 定位点纬度
+      // communityId: '', // 社区ID
+      // communityName: '', // 社区名称
+      // gridId: '', // 单元网格ID
+      // componentId: '', // 部件ID
+      // componentName: '' // 部件名称/=
+    }
+  },
+  mounted() {
+    this.importEsri()
+  },
+  methods: {
+    // 初始化ArcGIS API对象
+    importEsri: function() {
+      this.mapLoading = true
+      loadModules([
+        'esri/Map',
+        'esri/Basemap',
+        'esri/Graphic',
+        'esri/PopupTemplate',
+        'esri/geometry/Circle',
+        'esri/geometry/Point',
+        'esri/layers/FeatureLayer',
+        'esri/layers/GraphicsLayer',
+        'esri/layers/TileLayer',
+        'esri/symbols/SimpleMarkerSymbol',
+        'esri/tasks/support/Query',
+        'esri/tasks/QueryTask',
+        'esri/tasks/IdentifyTask',
+        'esri/tasks/support/IdentifyParameters',
+        'esri/views/MapView',
+        'dojo/domReady!'
+      ], option)
+        .then(([
+          Map,
+          BaseMap,
+          Graphic,
+          PopupTemplate,
+          Circle,
+          Point,
+          FeatureLayer,
+          GraphicsLayer,
+          TileLayer,
+          SimpleMarkerSymbol,
+          Query,
+          QueryTask,
+          IdentifyTask,
+          IdentifyParameters,
+          MapView
+        ]) => {
+          this.esriObj.Map = Map
+          this.esriObj.BaseMap = BaseMap
+          this.esriObj.Graphic = Graphic
+          this.esriObj.PopupTemplate = PopupTemplate
+          this.esriObj.Circle = Circle
+          this.esriObj.Point = Point
+          this.esriObj.FeatureLayer = FeatureLayer
+          this.esriObj.GraphicsLayer = GraphicsLayer
+          this.esriObj.TileLayer = TileLayer
+          this.esriObj.SimpleMarkerSymbol = SimpleMarkerSymbol
+          this.esriObj.Query = Query
+          this.esriObj.QueryTask = QueryTask
+          this.esriObj.IdentifyTask = IdentifyTask
+          this.esriObj.IdentifyParameters = IdentifyParameters
+          this.esriObj.MapView = MapView
+
+          // 初始化地图
+          this.initMap()
+          this.mapLoading = false
+        }).catch(err => {
+          console.log(err)
+          this.mapLoading = false
+        })
+    },
+    // 初始化地图
+    initMap: function() {
+      const base = new this.esriObj.BaseMap({
+        baseLayers: [
+          new this.esriObj.TileLayer({ // 可配置属性，见TileLayer类
+            id: '2w',
+            url: serverConfig.mapUrlBase
+          })
+        ],
+        title: 'dx2w',
+        id: 'dx2w'
+      })
+
+      this.map = new this.esriObj.Map({
+        basemap: base // 底图类型，详见BaseMap类
+      })
+
+      this.view = new this.esriObj.MapView({
+        container: this.$refs.mapDiv, // 视图的容器
+        map: this.map, // Map的实例放入视图中
+        center: [116.597, 28.24], // 初始显示的地图中心点，经纬度
+        zoom: 3 // 当前地图缩放等级
+      })
+
+      // const that = this
+      // this.view.on('click', function(event) {
+      //   // 清除地图上已有的事件/部件查询点
+      //   that.clearEOrCPoint()
+
+      //   const lon = event.mapPoint.longitude
+      //   const lat = event.mapPoint.latitude
+
+      //   if (that.showEventPointPopup) {
+      //     // 添加点
+      //     const gLayer = new that.esriObj.GraphicsLayer()
+      //     const marker = new that.esriObj.SimpleMarkerSymbol()
+      //     marker.color = '#35A0E7'
+      //     marker.style = 'square'
+      //     marker.outline = {
+      //       color: [128, 128, 128, 0.5],
+      //       width: '2px'
+      //     }
+      //     const graphic = new that.esriObj.Graphic({
+      //       geometry: event.mapPoint,
+      //       symbol: marker
+      //     })
+
+      //     gLayer.id = eventPointLayerId
+      //     gLayer.add(graphic)
+      //     that.map.add(gLayer)
+
+      //     // 查询事件或者部件
+      //     if (that.queryEventSwitch === '1') {
+      //       // 事件定位
+      //       // 1查询底图得到所在网格与所在社区
+      //       const query = that.layers.dx2wGrid.createQuery()
+      //       query.geometry = that.view.toMap(event)
+      //       query.distance = 10
+      //       query.units = 'meters'
+      //       query.returnGeometry = true
+      //       query.outFields = ['BGID', 'COMMUID', 'COMMUNAME']
+      //       that.layers.dx2wGrid.queryFeatures(query)
+      //         .then(function(response) {
+      //           const result = response.features[0].attributes
+
+      //           // 赋值
+      //           that.longitude = lon
+      //           that.latitude = lat
+      //           that.gridId = result.BGID
+      //           that.communityId = result.COMMUID
+      //           that.communityName = result.COMMUNAME
+
+      //           // 2弹出气泡
+      //           that.view.popup.open({
+      //             title: '事件定位',
+      //             content: '坐标：[' + lon.toFixed(4) + ', ' + lat.toFixed(4) + ']' + '<p>' + '所在社区：' + result.COMMUNAME,
+      //             location: event.mapPoint
+      //           })
+      //         })
+      //     } else if (that.queryEventSwitch === '0') {
+      //       // 部件定位
+      //       const queryDev = that.layers.dxbjPoint.createQuery()
+      //       // 定义查询的圆形范围，半径5米
+      //       const circle = new that.esriObj.Circle({
+      //         center: event.mapPoint,
+      //         radius: 5,
+      //         radiusUnit: 'meters'
+      //       })
+      //       queryDev.geometry = circle
+      //       queryDev.returnGeometry = true
+      //       queryDev.outFields = ['BGID', 'OBJID', 'OBJNAME', 'OBJPOS']
+      //       that.layers.dxbjPoint.queryFeatures(queryDev)
+      //         .then(function(response) {
+      //           if (response.features.length > 0) {
+      //             const results = response.features
+
+      //             that.compListOpts = []
+
+      //             let content = ''
+      //             results.forEach((item, index) => {
+      //               content += '<p>部件' + (index + 1) + '：' + item.attributes.OBJNAME + '，' + item.attributes.OBJPOS
+      //               const comp = {}
+      //               comp.name = '部件' + (index + 1) + '：' + item.attributes.OBJNAME
+      //               comp.value = item.attributes.OBJID
+      //               that.compListOpts.push(comp)
+      //             })
+
+      //             // 2弹出气泡
+      //             that.view.popup.open({
+      //               title: '部件定位',
+      //               content: '坐标：[' + lon.toFixed(4) + ', ' + lat.toFixed(4) + ']，附近5米的部件有：' + content,
+      //               location: event.mapPoint
+      //             })
+
+      //             // 查询所在社区和单元网格
+      //             const queryPos = that.layers.dx2wGrid.createQuery()
+      //             queryPos.geometry = that.view.toMap(event)
+      //             queryPos.returnGeometry = true
+      //             queryPos.outFields = ['BGID', 'COMMUID', 'COMMUNAME']
+      //             that.layers.dx2wGrid.queryFeatures(queryPos)
+      //               .then(function(response) {
+      //                 const result = response.features[0].attributes
+
+      //                 // 赋值
+      //                 that.longitude = lon
+      //                 that.latitude = lat
+      //                 that.gridId = result.BGID
+      //                 that.communityId = result.COMMUID
+      //                 that.communityName = result.COMMUNAME
+      //               })
+      //           } else {
+      //             that.$message({
+      //               message: '没有查询到部件，请重新定位',
+      //               type: 'warning'
+      //             })
+      //           }
+      //         })
+      //     }
+      //   } else {
+      //     that.view.hitTest(event).then(function(response) {
+      //       if (response.results.length) {
+      //         const graphic = response.results[0].graphic
+      //         const name = graphic.attributes.KEYWORD
+      //         const address = graphic.attributes.OBJPOS
+
+      //         that.view.popup.open({
+      //           title: name,
+      //           content: address,
+      //           location: event.mapPoint
+      //         })
+      //       }
+      //     })
+      //   }
+      // })
+
+      this.addBjLayers()
+      this.addCasePointOnMap(this.longitude, this.latitude)
+    },
+    // 加载部件服务的各图层
+    addBjLayers: function() {
+      // 此处可以优化
+      this.layers.dxbjPoint = new this.esriObj.FeatureLayer({ // 可配置属性，见TileLayer类
+        url: serverConfig.mapUrlBj + '/0',
+        id: 'dxbjPoint'
+      })
+      this.layers.dxbjLine = new this.esriObj.FeatureLayer({ // 可配置属性，见TileLayer类
+        url: serverConfig.mapUrlBj + '/1',
+        id: 'dxbjLine'
+      })
+      this.layers.dxbjXqd = new this.esriObj.FeatureLayer({ // 可配置属性，见TileLayer类
+        url: serverConfig.mapUrlBj + '/2',
+        id: 'dxbjXqd'
+      })
+      this.layers.dxbjMph = new this.esriObj.FeatureLayer({ // 可配置属性，见TileLayer类
+        url: serverConfig.mapUrlBj + '/3',
+        id: 'dxbjMph'
+      })
+      // this.layers.dx2wGrid = new this.esriObj.FeatureLayer({
+      //   url: serverConfig.mapUrlBase + '/6',
+      //   id: 'gridLayer'
+      // })
+
+      // 加载各图层
+      this.map.add(this.layers.dxbjPoint)
+      this.map.add(this.layers.dxbjLine)
+      this.map.add(this.layers.dxbjXqd)
+      this.map.add(this.layers.dxbjMph)
+      // this.map.add(this.layers.dx2wGrid)
+    },
+    // 在兴趣点图层查询关键字
+    // queryOnMap: function() {
+    //   const points = [] // 查询结果点集
+
+    //   this.clearQueryResults()
+    //   this.clearEOrCPoint()
+    //   this.showEventPointPopup = false
+    //   this.queryEventSwitch = '2'
+
+    //   // 查询条件
+    //   const query = new this.esriObj.Query()
+    //   query.returnGeometry = true
+    //   query.outFields = ['*']
+    //   query.where = 'NAME like ' + "'%" + this.keywords + "%'"
+    //   const that = this
+
+    //   this.layers.dxbjXqd.queryFeatures(query).then(function(results) {
+    //     results.features.forEach(item => {
+    //       const point = {}
+    //       point.x = item.geometry.longitude
+    //       point.y = item.geometry.latitude
+    //       point.attr = item.attributes
+    //       points.push(point)
+    //     })
+
+    //     // 提示查询结果
+    //     if (points.length > 0) {
+    //       that.$message({
+    //         message: '成功查询到' + points.length + '条记录',
+    //         type: 'success'
+    //       })
+
+    //       // 绘制点
+    //       that.addSimpleMarkerOnMap(points)
+    //     } else {
+    //       that.$message({
+    //         message: '没有查询到结果，请重新输入关键字',
+    //         type: 'warning'
+    //       })
+    //     }
+    //   })
+    // },
+    // 清除图层上的查询结果
+    // clearQueryResults: function() {
+    //   this.map.layers.forEach(layer => {
+    //     if (layer.type === 'graphics' && layer.id === queryResultLayerId) {
+    //       layer.graphics.removeAll()
+    //       return false
+    //     }
+    //   })
+    // },
+    // // 清除图层上的查询结果
+    // clearMap: function() {
+    //   // 清除地图上绘制的graphic图层
+    //   this.map.layers.forEach(layer => {
+    //     if (layer.type === 'graphics') {
+    //       layer.graphics.removeAll()
+    //       return false
+    //     }
+    //   })
+
+    //   // 清除弹出框
+    //   this.view.popup.close()
+
+    //   // 清除data属性值
+    //   this.keywords = ''
+    //   this.showEventPointPopup = true // 是否显示事部件的popup
+    //   this.queryEventSwitch = '1' // 1==查询事件；0==查询部件
+    //   this.compListOpts = [] // 部件选择下拉框option
+    //   this.longitude = '' // 定位点经度
+    //   this.latitude = '' // 定位点纬度
+    //   this.communityId = '' // 社区ID
+    //   this.communityName = '' // 社区名称
+    //   this.gridId = '' // 单元网格ID
+    //   this.componentId = '' // 部件ID
+    //   this.componentName = '' // 部件名称
+    // },
+    // 清除图层上的事件定位点
+    // clearEOrCPoint: function() {
+    //   this.map.layers.forEach(layer => {
+    //     if (layer.type === 'graphics' && layer.id === eventPointLayerId) {
+    //       layer.graphics.removeAll()
+    //       return false
+    //     }
+    //   })
+    //   // 清除弹出框
+    //   this.view.popup.close()
+    // },
+    // 切换
+    // switchEventOrComponent: function() {
+    //   // 如果选中的是事件定位（1）或部件定位（0），点击地图时弹出事件或者部件的popup；否则（2以上）显示兴趣点结果的属性popup
+    //   this.showEventPointPopup = this.queryEventSwitch < 2
+    // },
+    // 将查询结果点集合绘制在地图上
+    // addSimpleMarkerOnMap: function(points) {
+    //   const gLayer = new this.esriObj.GraphicsLayer()
+    //   points.forEach(item => {
+    //     const point = new this.esriObj.Point(item.x, item.y, item.attr)
+    //     const marker = new this.esriObj.SimpleMarkerSymbol()
+    //     marker.color = '#F9690E'
+    //     marker.outline = {
+    //       color: [128, 128, 128, 0.5],
+    //       width: '2px'
+    //     }
+    //     const graphic = new this.esriObj.Graphic({
+    //       geometry: point,
+    //       symbol: marker,
+    //       attributes: item.attr
+    //     })
+    //     gLayer.id = queryResultLayerId
+    //     gLayer.add(graphic)
+    //   })
+    //   this.map.add(gLayer)
+    // },
+    // 返回事件定位的结果
+    // checkEventPoint: function() {
+    //   this.$emit(
+    //     'closeMapQueryDialogByEvent',
+    //     this.longitude,
+    //     this.latitude,
+    //     this.communityId,
+    //     this.communityName,
+    //     this.gridId)
+
+    //   this.clearMap()
+    // },
+    // // 返回部件定位的结果
+    // checkComponentPoint: function() {
+    //   this.$emit(
+    //     'closeMapQueryDialogByComp',
+    //     this.longitude,
+    //     this.latitude,
+    //     this.communityId,
+    //     this.communityName,
+    //     this.gridId,
+    //     this.componentId)
+
+    //   this.clearMap()
+    // },
+    // 在地图上添加指定坐标的点
+    addCasePointOnMap: function(lng, lat) {
+      console.log('addCasePointOnMap', lng, lat)
+      const gLayer = new this.esriObj.GraphicsLayer() // 添加自定义绘制点的图层
+      const point = new this.esriObj.Point(lng, lat) // 创建geometry对象
+      const marker = new this.esriObj.SimpleMarkerSymbol() // 创建marker标识
+      // marker属性
+      marker.color = '#F9690E'
+      marker.outline = {
+        color: [128, 128, 128, 0.5],
+        width: '2px'
+      }
+      // 创建graphic对象
+      const graphic = new this.esriObj.Graphic({
+        geometry: point,
+        symbol: marker
+      })
+      gLayer.id = caseLayerId // 标识案卷图层
+      gLayer.add(graphic) // 图层上添加对象
+      this.map.add(gLayer) // 地图上添加图层
+
+      // 重新设置地图中心点并移动
+      this.view.center = point
+      this.view.goTo(point)
+    }
+  }
+}
+</script>
+
+<style scoped>
+  @import 'https://js.arcgis.com/4.13/esri/css/main.css';
+  .baseMap {
+    height:60vh;
+    width: 100%;
+    margin-top: 25px;
+    border: 1px solid #DCDCDC;
+    border-radius: 4px;
+  }
+</style>
diff --git a/src/router/index.js b/src/router/index.js
index b265a48..1c80473 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -11,6 +11,7 @@
 import { systemRouters } from './modules/system'
 import { cooRouters } from './modules/coo'
 import { commenetRouters } from './modules/comment'
+import { suphandleRouters } from './modules/suphandle'
 import { commonRouters } from './modules/common'
 
 /**
@@ -90,6 +91,7 @@
 export const asyncRouterMap = [
   ...commonRouters,
   ...cooRouters,
+  ...suphandleRouters,
   ...systemRouters,
   ...commenetRouters,
   { path: '*', redirect: '/404', hidden: true, meta: {}}
diff --git a/src/router/modules/suphandle.js b/src/router/modules/suphandle.js
new file mode 100644
index 0000000..7026a7b
--- /dev/null
+++ b/src/router/modules/suphandle.js
@@ -0,0 +1,35 @@
+/* Layout */
+import Layout from '../../views/layout/Layout'
+export const suphandleRouters = [
+  {
+    path: '/suphandle',
+    name: 'suphandle',
+    redirect: '/accessDept',
+    hidden: true,
+    meta: {
+      title: '监督受理子系统',
+      permission: ['/suphandle'],
+      isSys: true
+    }
+  },
+  {
+    path: '/callBus',
+    component: Layout,
+    redirect: '/callBus',
+    name: 'CallBus',
+    alwaysShow: true,
+    meta: {
+      title: '呼叫业务',
+      permission: ['/callBus'],
+      sys: '/suphandle'
+    },
+    children: [
+      {
+        path: '/callCase',
+        component: () => import('@/views/callCase/callCase'),
+        name: 'CallCase',
+        meta: { title: '建立案卷', icon: '', belongSys: '', permission: '/callCase' }
+      }
+    ]
+  }
+]

diff --git a/src/api/busAdmin/areaPersonliable.js b/src/api/busAdmin/areaPersonliable.js
new file mode 100644
index 0000000..58737bb
--- /dev/null
+++ b/src/api/busAdmin/areaPersonliable.js
@@ -0,0 +1,45 @@
+import request from '@/utils/request'
+
+export function getAreaPersonliableList(params) {
+  return request({
+    url: '/areaPersonliable/listPage',
+    method: 'get',
+    params
+  })
+}
+
+export function addAreaPersonliable(params) {
+  return request({
+    url: '/areaPersonliable/add',
+    method: 'post',
+    params
+  })
+}
+
+export function updateAreaPersonliable(params) {
+  return request({
+    url: '/areaPersonliable/update',
+    method: 'post',
+    params
+  })
+}
+
+export function deleteAreaPersonliable(id) {
+  return request({
+    url: '/areaPersonliable/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+export function getSupervisorList() {
+  return request({
+    url: '/mgr/simplelist',
+    method: 'post',
+    params: {
+      roleTips: 'supervisor'
+    }
+  })
+}
diff --git a/src/api/callCase/callCase.js b/src/api/callCase/callCase.js
new file mode 100644
index 0000000..7500fc7
--- /dev/null
+++ b/src/api/callCase/callCase.js
@@ -0,0 +1,87 @@
+/**
+ * 新建案卷的接口
+ */
+import request from '@/utils/request'
+
+// 获取案卷信息来源
+export function getCaseSource(params) {
+  return request({
+    url: 'dict/code/caseSource',
+    method: 'get',
+    params
+  })
+}
+
+// 获取案卷等级
+export function getCaseLevel(params) {
+  return request({
+    url: 'dict/code/caseLevel',
+    method: 'get',
+    params
+  })
+}
+
+// 获取案卷类别
+export function getCaseEorC(params) {
+  return request({
+    url: 'dict/code/eorc',
+    method: 'get',
+    params
+  })
+}
+
+// 根据案卷类别获取案卷大类
+export function getCaseType(eorc) {
+  return request({
+    url: 'case/type/list',
+    method: 'get',
+    params: {
+      eorc: eorc
+    }
+  })
+}
+
+// 根据案卷大类获取案卷小类
+export function getCaseDetailType(caseTypeId) {
+  return request({
+    url: 'case/typeDetail/list',
+    method: 'get',
+    params: {
+      typeId: caseTypeId
+    }
+  })
+}
+
+// 根据案卷小类获取结案标准
+export function getCaseTypesTime(caseTypeDetailId) {
+  return request({
+    url: 'case/typesTime/list',
+    method: 'get',
+    params: {
+      detailId: caseTypeDetailId
+    }
+  })
+}
+
+// 获取监督员列表
+export function getVerifyPerson(params) {
+  return request({
+    url: 'mgr/simplelist',
+    method: 'post',
+    params: {
+      roleTips: 'supervisor'
+    }
+  })
+}
+
+// 新增案卷
+export function addCase(params) {
+  return request({
+    url: 'case/add',
+    method: 'post',
+    headers: {
+      'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
+    },
+    params
+  })
+}
diff --git a/src/api/coorBusiness/case.js b/src/api/coorBusiness/case.js
index ec5a88a..08c3a13 100644
--- a/src/api/coorBusiness/case.js
+++ b/src/api/coorBusiness/case.js
@@ -110,9 +110,10 @@
   })
 }
 
+// 待处理
 export function toHandleListPage(params) {
   return request({
-    url: 'case/toHandleListPage/',
+    url: 'case/toProcessListPage/',
     method: 'get',
     params
   })
@@ -158,9 +159,10 @@
   })
 }
 
+// 待核查
 export function toCheckListPage(params) {
   return request({
-    url: 'case/toCheckListPage/',
+    url: 'case/toDisCheckListPage/',
     method: 'get',
     params
   })
diff --git a/src/components/CaseCommon/caseDetail.vue b/src/components/CaseCommon/caseDetail.vue
index f6c23ab..fdadcba 100644
--- a/src/components/CaseCommon/caseDetail.vue
+++ b/src/components/CaseCommon/caseDetail.vue
@@ -276,7 +276,7 @@
     </el-row>
     <el-row>
       <div class="title">数据流转:</div>
-      <el-table :data="recordList" :header-cell-style="{background:'#f3f3f3'}" class="table" border>
+      <el-table :data="recordList" :header-cell-style="{background:'#f3f3f3'}" max-height="400" class="table" border>
         <el-table-column prop="operationTypeName" label="操作" align="center"/>
         <el-table-column prop="deptName" label="单位" align="center"/>
         <el-table-column prop="userName" label="人员" align="center"/>
@@ -293,7 +293,7 @@
       :append-to-body="true"
       title="位置详情"
     >
-      <arc-gis-map :longitude="Number(caseDetail.lng)" :latitude="Number(caseDetail.lat)"/>
+      <arc-gis-map-read :longitude="Number(caseDetail.lng)" :latitude="Number(caseDetail.lat)"/>
     </el-dialog>
   </div>
 </template>
@@ -303,12 +303,12 @@
 import { getCaseDetail, getUserList, getDeptList, getCaseTypeList, getCaseTypeDetailList, getCaseTypeTimes } from '@/api/coorBusiness/case'
 import { getCommonLanguage, getFilingTypeList, getCaseLevelList } from '@/api/coorBusiness/dict'
 import { historicalRecords, nextNodes, completeCaseTask } from '@/api/coorBusiness/process'
-import ArcGisMap from '@/components/Map/arcgisMap'
+import ArcGisMapRead from '@/components/Map/arcgisMapRead'
 import { radioMap } from './radioMap'
 
 export default {
   name: 'CaseDetail',
-  components: { ArcGisMap },
+  components: { ArcGisMapRead },
   // props: {
   //   id: {
   //     type: String,
@@ -334,7 +334,6 @@
       showNeedVisit: false,
       caseDetail: {},
       operationKey: '', // 案件处理按钮key
-      imgurl: 'http:\\\\192.168.8.201:8083\\static\\',
       fileIdVerify: [], // 核实照片id
       fileIdProcess: [], // 处理照片id
       fileIdCheck: [], // 核查照片id
@@ -358,10 +357,12 @@
   computed: {
     isNeedVisit: function() {
       return this.caseDetail.isNeedRevisit === 1 ? '需要回访' : '不需要回访'
+    },
+    imgurl() {
+      return process.env.BASE_API + '/static/'
     }
   },
-  mounted() {
-    console.log('case dtial')
+  created() {
     this.id = this.$route.query.id
     this.showProcess = (this.$route.query.showProcess || this.$route.query.showProcess === false) ? this.$route.query.showProcess : true
     this.showNeedVisit = this.$route.query.showNeedVisit ? this.$route.query.showNeedVisit : false
@@ -371,7 +372,6 @@
     async initData() {
       // 查询案件详情接口
       const resDetail = await getCaseDetail(this.id)
-      console.log('detail', resDetail)
       this.caseDetail = resDetail.data[0]
 
       // 解析图片id
@@ -391,9 +391,11 @@
 
       // 查询流转记录接口
       this.processForm.processId = this.caseDetail.processId
-      const resRecord = await historicalRecords(this.processForm.processId)
-      this.recordList = resRecord.data
-      console.log(this.recordList)
+      // const resRecord = historicalRecords(this.processForm.processId)
+      // this.recordList = resRecord.data
+      historicalRecords(this.processForm.processId).then(res => {
+        this.recordList = res.data
+      })
 
       if (this.showProcess) {
         this.initProcess()
@@ -701,6 +703,7 @@
   .table{
     margin: 20px;
     width: 98%;
+    // max-height: 250px;
   }
   .title{
     margin-left: 38px;
diff --git a/src/components/CaseCommon/caseDetailRead.vue b/src/components/CaseCommon/caseDetailRead.vue
index 82066db..a4e87b0 100644
--- a/src/components/CaseCommon/caseDetailRead.vue
+++ b/src/components/CaseCommon/caseDetailRead.vue
@@ -158,11 +158,11 @@
 
 <script>
 import { getCaseDetail } from '@/api/coorBusiness/case'
-import ArcGisMap from '@/components/Map/arcgisMap'
+import ArcGisMapRead from '@/components/Map/arcgisMapRead'
 
 export default {
   name: 'CaseDetail',
-  components: { ArcGisMap },
+  components: { ArcGisMapRead },
   props: {
     id: {
       type: String,
diff --git a/src/components/Map/ArcGISConfig.js b/src/components/Map/ArcGISConfig.js
index d325da9..50cea3b 100644
--- a/src/components/Map/ArcGISConfig.js
+++ b/src/components/Map/ArcGISConfig.js
@@ -1,14 +1,16 @@
 export const mapConfig = {
-  apiUrl: 'https://js.arcgis.com/4.13/', // 暂时使用管网提供的api，实际部署时建议离线部署一套
+  apiUrl: 'http://192.168.8.205/arcgis_js_api/library/4.12/init.js', // 暂时使用管网提供的api，实际部署时建议离线部署一套
+  // apiUrl: 'https://js.arcgis.com/4.13/',
   mapIp: '223.84.218.107', // 服务ip
   mapPort: '6080', // 服务端口
-  serverBase: 'http://223.84.218.107:6080/arcgis/rest/services/', // 服务地址前缀
+  serverBase: 'http://192.168.8.205:6080/arcgis/rest/services/', // 服务地址前缀
+  // serverBase: 'http://223.84.218.107:6080/arcgis/rest/services/dx/',
   mapCenter: '[116.597,28.24]' // 地图中心点
 }
 
 export const serverConfig = {
-  mapUrlBase: mapConfig.serverBase + 'dx/2w/MapServer', // 底图服务地址
-  mapUrlBj: mapConfig.serverBase + 'dx/dxbj/MapServer', // 部件服务地址
-  mapUrlBjfc: mapConfig.serverBase + 'dx/bjfc/MapServer', // 部件分层服务地址
-  mapUrlBjEdit: mapConfig.serverBase + 'dx/dxbj/FeatureServer' // 可编辑的部件图层
+  mapUrlBase: mapConfig.serverBase + '2w/MapServer', // 底图服务地址
+  mapUrlBj: mapConfig.serverBase + 'dxbj/MapServer', // 部件服务地址
+  mapUrlBjfc: mapConfig.serverBase + 'bjfc/MapServer', // 部件分层服务地址
+  mapUrlBjEdit: mapConfig.serverBase + 'dxbj/FeatureServer' // 可编辑的部件图层
 }
diff --git a/src/components/Map/arcgisMap.vue b/src/components/Map/arcgisMap.vue
index 53776f1..5c15383 100644
--- a/src/components/Map/arcgisMap.vue
+++ b/src/components/Map/arcgisMap.vue
@@ -1,6 +1,6 @@
 <template>
-  <div style="margin-top:-30px">
-    <!-- <el-row :gutter="20">
+  <div>
+    <el-row :gutter="20">
       <el-col :span="4">
         <el-input v-model="keywords" size="small" type="text" placeholder="兴趣点关键字" clearable />
       </el-col>
@@ -31,9 +31,9 @@
       <el-col v-if="queryEventSwitch === '1'" :span="8" style="text-align: right;">
         <el-button type="primary" size="small" @click="checkEventPoint"> 事件提交 </el-button>
       </el-col>
-    </el-row> -->
+    </el-row>
 
-    <div v-loading="mapLoading" ref="mapDiv" class="baseMap" />
+    <div ref="mapDiv" class="baseMap" />
   </div>
 </template>
 
@@ -45,22 +45,12 @@
   url: mapConfig.apiUrl
 }
 
-// const eventPointLayerId = 'eventPointLayer' // 事件定位点的图层id
-// const queryResultLayerId = 'queryResultLayer' // 兴趣点查询结果点集的图层id
+const eventPointLayerId = 'eventPointLayer' // 事件定位点的图层id
+const queryResultLayerId = 'queryResultLayer' // 兴趣点查询结果点集的图层id
 const caseLayerId = 'addedGeometryLayerId' // 案卷点图层
 
 export default {
-  name: 'ArcGisMap',
-  props: {
-    longitude: {
-      type: Number,
-      default: 116.5937
-    },
-    latitude: {
-      type: Number,
-      default: 28.249
-    }
-  },
+  name: 'ArcGISMap',
   data() {
     return {
       map: '',
@@ -89,19 +79,18 @@
         IdentifyParameters: '',
         MapView: ''
       },
-      mapLoading: false
-      // keywords: '', // 查询关键字
-      // showEventPointPopup: true, // 是否显示事部件的popup
-      // queryEventSwitch: '1', // 1==查询事件；0==查询部件
-      // compListOpts: [], // 部件选择下拉框option
+      keywords: '', // 查询关键字
+      showEventPointPopup: true, // 是否显示事部件的popup
+      queryEventSwitch: '1', // 1==查询事件；0==查询部件
+      compListOpts: [], // 部件选择下拉框option
       // 主页面返回值
-      // longitude: '', // 定位点经度
-      // latitude: '' // 定位点纬度
-      // communityId: '', // 社区ID
-      // communityName: '', // 社区名称
-      // gridId: '', // 单元网格ID
-      // componentId: '', // 部件ID
-      // componentName: '' // 部件名称/=
+      longitude: '', // 定位点经度
+      latitude: '', // 定位点纬度
+      communityId: '', // 社区ID
+      communityName: '', // 社区名称
+      gridId: '', // 单元网格ID
+      componentId: '', // 部件ID
+      componentName: '' // 部件名称
     }
   },
   mounted() {
@@ -110,7 +99,6 @@
   methods: {
     // 初始化ArcGIS API对象
     importEsri: function() {
-      this.mapLoading = true
       loadModules([
         'esri/Map',
         'esri/Basemap',
@@ -164,10 +152,8 @@
 
           // 初始化地图
           this.initMap()
-          this.mapLoading = false
         }).catch(err => {
           console.log(err)
-          this.mapLoading = false
         })
     },
     // 初始化地图
@@ -194,139 +180,139 @@
         zoom: 3 // 当前地图缩放等级
       })
 
-      // const that = this
-      // this.view.on('click', function(event) {
-      //   // 清除地图上已有的事件/部件查询点
-      //   that.clearEOrCPoint()
+      const that = this
+      this.view.on('click', function(event) {
+        // 清除地图上已有的事件/部件查询点
+        that.clearEOrCPoint()
 
-      //   const lon = event.mapPoint.longitude
-      //   const lat = event.mapPoint.latitude
+        const lon = event.mapPoint.longitude
+        const lat = event.mapPoint.latitude
 
-      //   if (that.showEventPointPopup) {
-      //     // 添加点
-      //     const gLayer = new that.esriObj.GraphicsLayer()
-      //     const marker = new that.esriObj.SimpleMarkerSymbol()
-      //     marker.color = '#35A0E7'
-      //     marker.style = 'square'
-      //     marker.outline = {
-      //       color: [128, 128, 128, 0.5],
-      //       width: '2px'
-      //     }
-      //     const graphic = new that.esriObj.Graphic({
-      //       geometry: event.mapPoint,
-      //       symbol: marker
-      //     })
+        if (that.showEventPointPopup) {
+          // 添加点
+          const gLayer = new that.esriObj.GraphicsLayer()
+          const marker = new that.esriObj.SimpleMarkerSymbol()
+          marker.color = '#35A0E7'
+          marker.style = 'square'
+          marker.outline = {
+            color: [128, 128, 128, 0.5],
+            width: '2px'
+          }
+          const graphic = new that.esriObj.Graphic({
+            geometry: event.mapPoint,
+            symbol: marker
+          })
 
-      //     gLayer.id = eventPointLayerId
-      //     gLayer.add(graphic)
-      //     that.map.add(gLayer)
+          gLayer.id = eventPointLayerId
+          gLayer.add(graphic)
+          that.map.add(gLayer)
 
-      //     // 查询事件或者部件
-      //     if (that.queryEventSwitch === '1') {
-      //       // 事件定位
-      //       // 1查询底图得到所在网格与所在社区
-      //       const query = that.layers.dx2wGrid.createQuery()
-      //       query.geometry = that.view.toMap(event)
-      //       query.distance = 10
-      //       query.units = 'meters'
-      //       query.returnGeometry = true
-      //       query.outFields = ['BGID', 'COMMUID', 'COMMUNAME']
-      //       that.layers.dx2wGrid.queryFeatures(query)
-      //         .then(function(response) {
-      //           const result = response.features[0].attributes
+          // 查询事件或者部件
+          if (that.queryEventSwitch === '1') {
+            // 事件定位
+            // 1查询底图得到所在网格与所在社区
+            const query = that.layers.dx2wGrid.createQuery()
+            query.geometry = that.view.toMap(event)
+            query.distance = 10
+            query.units = 'meters'
+            query.returnGeometry = true
+            query.outFields = ['BGID', 'COMMUID', 'COMMUNAME']
+            that.layers.dx2wGrid.queryFeatures(query)
+              .then(function(response) {
+                const result = response.features[0].attributes
 
-      //           // 赋值
-      //           that.longitude = lon
-      //           that.latitude = lat
-      //           that.gridId = result.BGID
-      //           that.communityId = result.COMMUID
-      //           that.communityName = result.COMMUNAME
+                // 赋值
+                that.longitude = lon
+                that.latitude = lat
+                that.gridId = result.BGID
+                that.communityId = result.COMMUID
+                that.communityName = result.COMMUNAME
 
-      //           // 2弹出气泡
-      //           that.view.popup.open({
-      //             title: '事件定位',
-      //             content: '坐标：[' + lon.toFixed(4) + ', ' + lat.toFixed(4) + ']' + '<p>' + '所在社区：' + result.COMMUNAME,
-      //             location: event.mapPoint
-      //           })
-      //         })
-      //     } else if (that.queryEventSwitch === '0') {
-      //       // 部件定位
-      //       const queryDev = that.layers.dxbjPoint.createQuery()
-      //       // 定义查询的圆形范围，半径5米
-      //       const circle = new that.esriObj.Circle({
-      //         center: event.mapPoint,
-      //         radius: 5,
-      //         radiusUnit: 'meters'
-      //       })
-      //       queryDev.geometry = circle
-      //       queryDev.returnGeometry = true
-      //       queryDev.outFields = ['BGID', 'OBJID', 'OBJNAME', 'OBJPOS']
-      //       that.layers.dxbjPoint.queryFeatures(queryDev)
-      //         .then(function(response) {
-      //           if (response.features.length > 0) {
-      //             const results = response.features
+                // 2弹出气泡
+                that.view.popup.open({
+                  title: '事件定位',
+                  content: '坐标：[' + lon.toFixed(4) + ', ' + lat.toFixed(4) + ']' + '<p>' + '所在社区：' + result.COMMUNAME,
+                  location: event.mapPoint
+                })
+              })
+          } else if (that.queryEventSwitch === '0') {
+            // 部件定位
+            const queryDev = that.layers.dxbjPoint.createQuery()
+            // 定义查询的圆形范围，半径5米
+            const circle = new that.esriObj.Circle({
+              center: event.mapPoint,
+              radius: 5,
+              radiusUnit: 'meters'
+            })
+            queryDev.geometry = circle
+            queryDev.returnGeometry = true
+            queryDev.outFields = ['BGID', 'OBJID', 'OBJNAME', 'OBJPOS']
+            that.layers.dxbjPoint.queryFeatures(queryDev)
+              .then(function(response) {
+                if (response.features.length > 0) {
+                  const results = response.features
 
-      //             that.compListOpts = []
+                  that.compListOpts = []
 
-      //             let content = ''
-      //             results.forEach((item, index) => {
-      //               content += '<p>部件' + (index + 1) + '：' + item.attributes.OBJNAME + '，' + item.attributes.OBJPOS
-      //               const comp = {}
-      //               comp.name = '部件' + (index + 1) + '：' + item.attributes.OBJNAME
-      //               comp.value = item.attributes.OBJID
-      //               that.compListOpts.push(comp)
-      //             })
+                  let content = ''
+                  results.forEach((item, index) => {
+                    content += '<p>部件' + (index + 1) + '：' + item.attributes.OBJNAME + '，' + item.attributes.OBJPOS
+                    const comp = {}
+                    comp.name = '部件' + (index + 1) + '：' + item.attributes.OBJNAME
+                    comp.value = item.attributes.OBJID
+                    that.compListOpts.push(comp)
+                  })
 
-      //             // 2弹出气泡
-      //             that.view.popup.open({
-      //               title: '部件定位',
-      //               content: '坐标：[' + lon.toFixed(4) + ', ' + lat.toFixed(4) + ']，附近5米的部件有：' + content,
-      //               location: event.mapPoint
-      //             })
+                  // 2弹出气泡
+                  that.view.popup.open({
+                    title: '部件定位',
+                    content: '坐标：[' + lon.toFixed(4) + ', ' + lat.toFixed(4) + ']，附近5米的部件有：' + content,
+                    location: event.mapPoint
+                  })
 
-      //             // 查询所在社区和单元网格
-      //             const queryPos = that.layers.dx2wGrid.createQuery()
-      //             queryPos.geometry = that.view.toMap(event)
-      //             queryPos.returnGeometry = true
-      //             queryPos.outFields = ['BGID', 'COMMUID', 'COMMUNAME']
-      //             that.layers.dx2wGrid.queryFeatures(queryPos)
-      //               .then(function(response) {
-      //                 const result = response.features[0].attributes
+                  // 查询所在社区和单元网格
+                  const queryPos = that.layers.dx2wGrid.createQuery()
+                  queryPos.geometry = that.view.toMap(event)
+                  queryPos.returnGeometry = true
+                  queryPos.outFields = ['BGID', 'COMMUID', 'COMMUNAME']
+                  that.layers.dx2wGrid.queryFeatures(queryPos)
+                    .then(function(response) {
+                      const result = response.features[0].attributes
 
-      //                 // 赋值
-      //                 that.longitude = lon
-      //                 that.latitude = lat
-      //                 that.gridId = result.BGID
-      //                 that.communityId = result.COMMUID
-      //                 that.communityName = result.COMMUNAME
-      //               })
-      //           } else {
-      //             that.$message({
-      //               message: '没有查询到部件，请重新定位',
-      //               type: 'warning'
-      //             })
-      //           }
-      //         })
-      //     }
-      //   } else {
-      //     that.view.hitTest(event).then(function(response) {
-      //       if (response.results.length) {
-      //         const graphic = response.results[0].graphic
-      //         const name = graphic.attributes.KEYWORD
-      //         const address = graphic.attributes.OBJPOS
+                      // 赋值
+                      that.longitude = lon
+                      that.latitude = lat
+                      that.gridId = result.BGID
+                      that.communityId = result.COMMUID
+                      that.communityName = result.COMMUNAME
+                    })
+                } else {
+                  that.$message({
+                    message: '没有查询到部件，请重新定位',
+                    type: 'warning'
+                  })
+                }
+              })
+          }
+        } else {
+          that.view.hitTest(event).then(function(response) {
+            if (response.results.length) {
+              const graphic = response.results[0].graphic
+              const name = graphic.attributes.KEYWORD
+              const address = graphic.attributes.OBJPOS
 
-      //         that.view.popup.open({
-      //           title: name,
-      //           content: address,
-      //           location: event.mapPoint
-      //         })
-      //       }
-      //     })
-      //   }
-      // })
+              that.view.popup.open({
+                title: name,
+                content: address,
+                location: event.mapPoint
+              })
+            }
+          })
+        }
+      })
 
       this.addBjLayers()
-      this.addCasePointOnMap(this.longitude, this.latitude)
+      // this.addCasePointOnMap(116.5937, 28.249)
     },
     // 加载部件服务的各图层
     addBjLayers: function() {
@@ -347,160 +333,159 @@
         url: serverConfig.mapUrlBj + '/3',
         id: 'dxbjMph'
       })
-      // this.layers.dx2wGrid = new this.esriObj.FeatureLayer({
-      //   url: serverConfig.mapUrlBase + '/6',
-      //   id: 'gridLayer'
-      // })
+      this.layers.dx2wGrid = new this.esriObj.FeatureLayer({
+        url: serverConfig.mapUrlBase + '/1',
+        id: 'gridLayer'
+      })
 
       // 加载各图层
       this.map.add(this.layers.dxbjPoint)
       this.map.add(this.layers.dxbjLine)
       this.map.add(this.layers.dxbjXqd)
       this.map.add(this.layers.dxbjMph)
-      // this.map.add(this.layers.dx2wGrid)
+      this.map.add(this.layers.dx2wGrid)
     },
     // 在兴趣点图层查询关键字
-    // queryOnMap: function() {
-    //   const points = [] // 查询结果点集
+    queryOnMap: function() {
+      const points = [] // 查询结果点集
 
-    //   this.clearQueryResults()
-    //   this.clearEOrCPoint()
-    //   this.showEventPointPopup = false
-    //   this.queryEventSwitch = '2'
+      this.clearQueryResults()
+      this.clearEOrCPoint()
+      this.showEventPointPopup = false
+      this.queryEventSwitch = '2'
 
-    //   // 查询条件
-    //   const query = new this.esriObj.Query()
-    //   query.returnGeometry = true
-    //   query.outFields = ['*']
-    //   query.where = 'NAME like ' + "'%" + this.keywords + "%'"
-    //   const that = this
+      // 查询条件
+      const query = new this.esriObj.Query()
+      query.returnGeometry = true
+      query.outFields = ['*']
+      query.where = 'NAME like ' + "'%" + this.keywords + "%'"
+      const that = this
 
-    //   this.layers.dxbjXqd.queryFeatures(query).then(function(results) {
-    //     results.features.forEach(item => {
-    //       const point = {}
-    //       point.x = item.geometry.longitude
-    //       point.y = item.geometry.latitude
-    //       point.attr = item.attributes
-    //       points.push(point)
-    //     })
+      this.layers.dxbjXqd.queryFeatures(query).then(function(results) {
+        results.features.forEach(item => {
+          const point = {}
+          point.x = item.geometry.longitude
+          point.y = item.geometry.latitude
+          point.attr = item.attributes
+          points.push(point)
+        })
 
-    //     // 提示查询结果
-    //     if (points.length > 0) {
-    //       that.$message({
-    //         message: '成功查询到' + points.length + '条记录',
-    //         type: 'success'
-    //       })
+        // 提示查询结果
+        if (points.length > 0) {
+          that.$message({
+            message: '成功查询到' + points.length + '条记录',
+            type: 'success'
+          })
 
-    //       // 绘制点
-    //       that.addSimpleMarkerOnMap(points)
-    //     } else {
-    //       that.$message({
-    //         message: '没有查询到结果，请重新输入关键字',
-    //         type: 'warning'
-    //       })
-    //     }
-    //   })
-    // },
+          // 绘制点
+          that.addSimpleMarkerOnMap(points)
+        } else {
+          that.$message({
+            message: '没有查询到结果，请重新输入关键字',
+            type: 'warning'
+          })
+        }
+      })
+    },
     // 清除图层上的查询结果
-    // clearQueryResults: function() {
-    //   this.map.layers.forEach(layer => {
-    //     if (layer.type === 'graphics' && layer.id === queryResultLayerId) {
-    //       layer.graphics.removeAll()
-    //       return false
-    //     }
-    //   })
-    // },
-    // // 清除图层上的查询结果
-    // clearMap: function() {
-    //   // 清除地图上绘制的graphic图层
-    //   this.map.layers.forEach(layer => {
-    //     if (layer.type === 'graphics') {
-    //       layer.graphics.removeAll()
-    //       return false
-    //     }
-    //   })
+    clearQueryResults: function() {
+      this.map.layers.forEach(layer => {
+        if (layer.type === 'graphics' && layer.id === queryResultLayerId) {
+          layer.graphics.removeAll()
+          return false
+        }
+      })
+    },
+    // 清除图层上的查询结果
+    clearMap: function() {
+      // 清除地图上绘制的graphic图层
+      this.map.layers.forEach(layer => {
+        if (layer.type === 'graphics') {
+          layer.graphics.removeAll()
+          return false
+        }
+      })
 
-    //   // 清除弹出框
-    //   this.view.popup.close()
+      // 清除弹出框
+      this.view.popup.close()
 
-    //   // 清除data属性值
-    //   this.keywords = ''
-    //   this.showEventPointPopup = true // 是否显示事部件的popup
-    //   this.queryEventSwitch = '1' // 1==查询事件；0==查询部件
-    //   this.compListOpts = [] // 部件选择下拉框option
-    //   this.longitude = '' // 定位点经度
-    //   this.latitude = '' // 定位点纬度
-    //   this.communityId = '' // 社区ID
-    //   this.communityName = '' // 社区名称
-    //   this.gridId = '' // 单元网格ID
-    //   this.componentId = '' // 部件ID
-    //   this.componentName = '' // 部件名称
-    // },
+      // 清除data属性值
+      this.keywords = ''
+      this.showEventPointPopup = true // 是否显示事部件的popup
+      this.queryEventSwitch = '1' // 1==查询事件；0==查询部件
+      this.compListOpts = [] // 部件选择下拉框option
+      this.longitude = '' // 定位点经度
+      this.latitude = '' // 定位点纬度
+      this.communityId = '' // 社区ID
+      this.communityName = '' // 社区名称
+      this.gridId = '' // 单元网格ID
+      this.componentId = '' // 部件ID
+      this.componentName = '' // 部件名称
+    },
     // 清除图层上的事件定位点
-    // clearEOrCPoint: function() {
-    //   this.map.layers.forEach(layer => {
-    //     if (layer.type === 'graphics' && layer.id === eventPointLayerId) {
-    //       layer.graphics.removeAll()
-    //       return false
-    //     }
-    //   })
-    //   // 清除弹出框
-    //   this.view.popup.close()
-    // },
+    clearEOrCPoint: function() {
+      this.map.layers.forEach(layer => {
+        if (layer.type === 'graphics' && layer.id === eventPointLayerId) {
+          layer.graphics.removeAll()
+          return false
+        }
+      })
+      // 清除弹出框
+      this.view.popup.close()
+    },
     // 切换
-    // switchEventOrComponent: function() {
-    //   // 如果选中的是事件定位（1）或部件定位（0），点击地图时弹出事件或者部件的popup；否则（2以上）显示兴趣点结果的属性popup
-    //   this.showEventPointPopup = this.queryEventSwitch < 2
-    // },
+    switchEventOrComponent: function() {
+      // 如果选中的是事件定位（1）或部件定位（0），点击地图时弹出事件或者部件的popup；否则（2以上）显示兴趣点结果的属性popup
+      this.showEventPointPopup = this.queryEventSwitch < 2
+    },
     // 将查询结果点集合绘制在地图上
-    // addSimpleMarkerOnMap: function(points) {
-    //   const gLayer = new this.esriObj.GraphicsLayer()
-    //   points.forEach(item => {
-    //     const point = new this.esriObj.Point(item.x, item.y, item.attr)
-    //     const marker = new this.esriObj.SimpleMarkerSymbol()
-    //     marker.color = '#F9690E'
-    //     marker.outline = {
-    //       color: [128, 128, 128, 0.5],
-    //       width: '2px'
-    //     }
-    //     const graphic = new this.esriObj.Graphic({
-    //       geometry: point,
-    //       symbol: marker,
-    //       attributes: item.attr
-    //     })
-    //     gLayer.id = queryResultLayerId
-    //     gLayer.add(graphic)
-    //   })
-    //   this.map.add(gLayer)
-    // },
+    addSimpleMarkerOnMap: function(points) {
+      const gLayer = new this.esriObj.GraphicsLayer()
+      points.forEach(item => {
+        const point = new this.esriObj.Point(item.x, item.y, item.attr)
+        const marker = new this.esriObj.SimpleMarkerSymbol()
+        marker.color = '#F9690E'
+        marker.outline = {
+          color: [128, 128, 128, 0.5],
+          width: '2px'
+        }
+        const graphic = new this.esriObj.Graphic({
+          geometry: point,
+          symbol: marker,
+          attributes: item.attr
+        })
+        gLayer.id = queryResultLayerId
+        gLayer.add(graphic)
+      })
+      this.map.add(gLayer)
+    },
     // 返回事件定位的结果
-    // checkEventPoint: function() {
-    //   this.$emit(
-    //     'closeMapQueryDialogByEvent',
-    //     this.longitude,
-    //     this.latitude,
-    //     this.communityId,
-    //     this.communityName,
-    //     this.gridId)
+    checkEventPoint: function() {
+      this.$emit(
+        'closeMapQueryDialogByEvent',
+        this.longitude,
+        this.latitude,
+        this.communityId,
+        this.communityName,
+        this.gridId)
 
-    //   this.clearMap()
-    // },
-    // // 返回部件定位的结果
-    // checkComponentPoint: function() {
-    //   this.$emit(
-    //     'closeMapQueryDialogByComp',
-    //     this.longitude,
-    //     this.latitude,
-    //     this.communityId,
-    //     this.communityName,
-    //     this.gridId,
-    //     this.componentId)
+      this.clearMap()
+    },
+    // 返回部件定位的结果
+    checkComponentPoint: function() {
+      this.$emit(
+        'closeMapQueryDialogByComp',
+        this.longitude,
+        this.latitude,
+        this.communityId,
+        this.communityName,
+        this.gridId,
+        this.componentId)
 
-    //   this.clearMap()
-    // },
+      this.clearMap()
+    },
     // 在地图上添加指定坐标的点
     addCasePointOnMap: function(lng, lat) {
-      console.log('addCasePointOnMap', lng, lat)
       const gLayer = new this.esriObj.GraphicsLayer() // 添加自定义绘制点的图层
       const point = new this.esriObj.Point(lng, lat) // 创建geometry对象
       const marker = new this.esriObj.SimpleMarkerSymbol() // 创建marker标识
@@ -521,14 +506,14 @@
 
       // 重新设置地图中心点并移动
       this.view.center = point
-      this.view.goTo(point)
+      this.view.goTo()
     }
   }
 }
 </script>
 
 <style scoped>
-  @import 'https://js.arcgis.com/4.13/esri/css/main.css';
+  @import 'http://192.168.8.205/arcgis_js_api/library/4.12/esri/css/main.css';
   .baseMap {
     height:60vh;
     width: 100%;
diff --git a/src/components/Map/arcgisMapRead.vue b/src/components/Map/arcgisMapRead.vue
new file mode 100644
index 0000000..ae2058b
--- /dev/null
+++ b/src/components/Map/arcgisMapRead.vue
@@ -0,0 +1,539 @@
+<template>
+  <div style="margin-top:-30px">
+    <!-- <el-row :gutter="20">
+      <el-col :span="4">
+        <el-input v-model="keywords" size="small" type="text" placeholder="兴趣点关键字" clearable />
+      </el-col>
+      <el-col :span="4">
+        <el-button type="primary" size="small" @click="queryOnMap">查询</el-button>
+        <el-button type="info" size="small" @click="clearMap"> 清除地图 </el-button>
+      </el-col>
+
+      <el-col :span="8" style="text-align: center;">
+        <el-radio-group v-model="queryEventSwitch" size="small" @change="switchEventOrComponent">
+          <el-radio-button label="1">事件定位</el-radio-button>
+          <el-radio-button label="0">部件定位</el-radio-button>
+          <el-radio-button label="2">兴趣点属性</el-radio-button>
+        </el-radio-group>
+      </el-col>
+
+      <el-col v-if="queryEventSwitch === '0'" :span="8" style="text-align: right;">
+        <el-select v-model="componentId" placeholder="选择部件" clearable value="" size="small">
+          <el-option
+            v-for="item in compListOpts"
+            :key="item.value"
+            :label="item.name"
+            :value="item.value"/>
+        </el-select>
+        <el-button type="primary" size="small" @click="checkComponentPoint"> 部件提交 </el-button>
+      </el-col>
+
+      <el-col v-if="queryEventSwitch === '1'" :span="8" style="text-align: right;">
+        <el-button type="primary" size="small" @click="checkEventPoint"> 事件提交 </el-button>
+      </el-col>
+    </el-row> -->
+
+    <div v-loading="mapLoading" ref="mapDiv" class="baseMap" />
+  </div>
+</template>
+
+<script>
+import { loadModules } from 'esri-loader'
+import { mapConfig, serverConfig } from './ArcGISConfig'
+
+const option = {
+  url: mapConfig.apiUrl
+}
+
+// const eventPointLayerId = 'eventPointLayer' // 事件定位点的图层id
+// const queryResultLayerId = 'queryResultLayer' // 兴趣点查询结果点集的图层id
+const caseLayerId = 'addedGeometryLayerId' // 案卷点图层
+
+export default {
+  name: 'ArcGisMapRead',
+  props: {
+    longitude: {
+      type: Number,
+      default: 116.5937
+    },
+    latitude: {
+      type: Number,
+      default: 28.249
+    }
+  },
+  data() {
+    return {
+      map: '',
+      view: '',
+      layers: {
+        dxbjPoint: '', // 部件点图层
+        dxbjLine: '', // 部件线图层
+        dxbjXqd: '', // 兴趣点图层
+        dxbjMph: '', // 门牌好图层
+        dx2wGrid: '' // 单元网格图层
+      },
+      esriObj: {
+        Map: '',
+        BaseMap: '',
+        Graphic: '',
+        PopupTemplate: '',
+        Circle: '',
+        Point: '',
+        FeatureLayer: '',
+        GraphicsLayer: '',
+        TileLayer: '',
+        SimpleMarkerSymbol: '',
+        Query: '',
+        QueryTask: '',
+        IdentifyTask: '',
+        IdentifyParameters: '',
+        MapView: ''
+      },
+      mapLoading: false
+      // keywords: '', // 查询关键字
+      // showEventPointPopup: true, // 是否显示事部件的popup
+      // queryEventSwitch: '1', // 1==查询事件；0==查询部件
+      // compListOpts: [], // 部件选择下拉框option
+      // 主页面返回值
+      // longitude: '', // 定位点经度
+      // latitude: '' // 定位点纬度
+      // communityId: '', // 社区ID
+      // communityName: '', // 社区名称
+      // gridId: '', // 单元网格ID
+      // componentId: '', // 部件ID
+      // componentName: '' // 部件名称/=
+    }
+  },
+  mounted() {
+    this.importEsri()
+  },
+  methods: {
+    // 初始化ArcGIS API对象
+    importEsri: function() {
+      this.mapLoading = true
+      loadModules([
+        'esri/Map',
+        'esri/Basemap',
+        'esri/Graphic',
+        'esri/PopupTemplate',
+        'esri/geometry/Circle',
+        'esri/geometry/Point',
+        'esri/layers/FeatureLayer',
+        'esri/layers/GraphicsLayer',
+        'esri/layers/TileLayer',
+        'esri/symbols/SimpleMarkerSymbol',
+        'esri/tasks/support/Query',
+        'esri/tasks/QueryTask',
+        'esri/tasks/IdentifyTask',
+        'esri/tasks/support/IdentifyParameters',
+        'esri/views/MapView',
+        'dojo/domReady!'
+      ], option)
+        .then(([
+          Map,
+          BaseMap,
+          Graphic,
+          PopupTemplate,
+          Circle,
+          Point,
+          FeatureLayer,
+          GraphicsLayer,
+          TileLayer,
+          SimpleMarkerSymbol,
+          Query,
+          QueryTask,
+          IdentifyTask,
+          IdentifyParameters,
+          MapView
+        ]) => {
+          this.esriObj.Map = Map
+          this.esriObj.BaseMap = BaseMap
+          this.esriObj.Graphic = Graphic
+          this.esriObj.PopupTemplate = PopupTemplate
+          this.esriObj.Circle = Circle
+          this.esriObj.Point = Point
+          this.esriObj.FeatureLayer = FeatureLayer
+          this.esriObj.GraphicsLayer = GraphicsLayer
+          this.esriObj.TileLayer = TileLayer
+          this.esriObj.SimpleMarkerSymbol = SimpleMarkerSymbol
+          this.esriObj.Query = Query
+          this.esriObj.QueryTask = QueryTask
+          this.esriObj.IdentifyTask = IdentifyTask
+          this.esriObj.IdentifyParameters = IdentifyParameters
+          this.esriObj.MapView = MapView
+
+          // 初始化地图
+          this.initMap()
+          this.mapLoading = false
+        }).catch(err => {
+          console.log(err)
+          this.mapLoading = false
+        })
+    },
+    // 初始化地图
+    initMap: function() {
+      const base = new this.esriObj.BaseMap({
+        baseLayers: [
+          new this.esriObj.TileLayer({ // 可配置属性，见TileLayer类
+            id: '2w',
+            url: serverConfig.mapUrlBase
+          })
+        ],
+        title: 'dx2w',
+        id: 'dx2w'
+      })
+
+      this.map = new this.esriObj.Map({
+        basemap: base // 底图类型，详见BaseMap类
+      })
+
+      this.view = new this.esriObj.MapView({
+        container: this.$refs.mapDiv, // 视图的容器
+        map: this.map, // Map的实例放入视图中
+        center: [116.597, 28.24], // 初始显示的地图中心点，经纬度
+        zoom: 3 // 当前地图缩放等级
+      })
+
+      // const that = this
+      // this.view.on('click', function(event) {
+      //   // 清除地图上已有的事件/部件查询点
+      //   that.clearEOrCPoint()
+
+      //   const lon = event.mapPoint.longitude
+      //   const lat = event.mapPoint.latitude
+
+      //   if (that.showEventPointPopup) {
+      //     // 添加点
+      //     const gLayer = new that.esriObj.GraphicsLayer()
+      //     const marker = new that.esriObj.SimpleMarkerSymbol()
+      //     marker.color = '#35A0E7'
+      //     marker.style = 'square'
+      //     marker.outline = {
+      //       color: [128, 128, 128, 0.5],
+      //       width: '2px'
+      //     }
+      //     const graphic = new that.esriObj.Graphic({
+      //       geometry: event.mapPoint,
+      //       symbol: marker
+      //     })
+
+      //     gLayer.id = eventPointLayerId
+      //     gLayer.add(graphic)
+      //     that.map.add(gLayer)
+
+      //     // 查询事件或者部件
+      //     if (that.queryEventSwitch === '1') {
+      //       // 事件定位
+      //       // 1查询底图得到所在网格与所在社区
+      //       const query = that.layers.dx2wGrid.createQuery()
+      //       query.geometry = that.view.toMap(event)
+      //       query.distance = 10
+      //       query.units = 'meters'
+      //       query.returnGeometry = true
+      //       query.outFields = ['BGID', 'COMMUID', 'COMMUNAME']
+      //       that.layers.dx2wGrid.queryFeatures(query)
+      //         .then(function(response) {
+      //           const result = response.features[0].attributes
+
+      //           // 赋值
+      //           that.longitude = lon
+      //           that.latitude = lat
+      //           that.gridId = result.BGID
+      //           that.communityId = result.COMMUID
+      //           that.communityName = result.COMMUNAME
+
+      //           // 2弹出气泡
+      //           that.view.popup.open({
+      //             title: '事件定位',
+      //             content: '坐标：[' + lon.toFixed(4) + ', ' + lat.toFixed(4) + ']' + '<p>' + '所在社区：' + result.COMMUNAME,
+      //             location: event.mapPoint
+      //           })
+      //         })
+      //     } else if (that.queryEventSwitch === '0') {
+      //       // 部件定位
+      //       const queryDev = that.layers.dxbjPoint.createQuery()
+      //       // 定义查询的圆形范围，半径5米
+      //       const circle = new that.esriObj.Circle({
+      //         center: event.mapPoint,
+      //         radius: 5,
+      //         radiusUnit: 'meters'
+      //       })
+      //       queryDev.geometry = circle
+      //       queryDev.returnGeometry = true
+      //       queryDev.outFields = ['BGID', 'OBJID', 'OBJNAME', 'OBJPOS']
+      //       that.layers.dxbjPoint.queryFeatures(queryDev)
+      //         .then(function(response) {
+      //           if (response.features.length > 0) {
+      //             const results = response.features
+
+      //             that.compListOpts = []
+
+      //             let content = ''
+      //             results.forEach((item, index) => {
+      //               content += '<p>部件' + (index + 1) + '：' + item.attributes.OBJNAME + '，' + item.attributes.OBJPOS
+      //               const comp = {}
+      //               comp.name = '部件' + (index + 1) + '：' + item.attributes.OBJNAME
+      //               comp.value = item.attributes.OBJID
+      //               that.compListOpts.push(comp)
+      //             })
+
+      //             // 2弹出气泡
+      //             that.view.popup.open({
+      //               title: '部件定位',
+      //               content: '坐标：[' + lon.toFixed(4) + ', ' + lat.toFixed(4) + ']，附近5米的部件有：' + content,
+      //               location: event.mapPoint
+      //             })
+
+      //             // 查询所在社区和单元网格
+      //             const queryPos = that.layers.dx2wGrid.createQuery()
+      //             queryPos.geometry = that.view.toMap(event)
+      //             queryPos.returnGeometry = true
+      //             queryPos.outFields = ['BGID', 'COMMUID', 'COMMUNAME']
+      //             that.layers.dx2wGrid.queryFeatures(queryPos)
+      //               .then(function(response) {
+      //                 const result = response.features[0].attributes
+
+      //                 // 赋值
+      //                 that.longitude = lon
+      //                 that.latitude = lat
+      //                 that.gridId = result.BGID
+      //                 that.communityId = result.COMMUID
+      //                 that.communityName = result.COMMUNAME
+      //               })
+      //           } else {
+      //             that.$message({
+      //               message: '没有查询到部件，请重新定位',
+      //               type: 'warning'
+      //             })
+      //           }
+      //         })
+      //     }
+      //   } else {
+      //     that.view.hitTest(event).then(function(response) {
+      //       if (response.results.length) {
+      //         const graphic = response.results[0].graphic
+      //         const name = graphic.attributes.KEYWORD
+      //         const address = graphic.attributes.OBJPOS
+
+      //         that.view.popup.open({
+      //           title: name,
+      //           content: address,
+      //           location: event.mapPoint
+      //         })
+      //       }
+      //     })
+      //   }
+      // })
+
+      this.addBjLayers()
+      this.addCasePointOnMap(this.longitude, this.latitude)
+    },
+    // 加载部件服务的各图层
+    addBjLayers: function() {
+      // 此处可以优化
+      this.layers.dxbjPoint = new this.esriObj.FeatureLayer({ // 可配置属性，见TileLayer类
+        url: serverConfig.mapUrlBj + '/0',
+        id: 'dxbjPoint'
+      })
+      this.layers.dxbjLine = new this.esriObj.FeatureLayer({ // 可配置属性，见TileLayer类
+        url: serverConfig.mapUrlBj + '/1',
+        id: 'dxbjLine'
+      })
+      this.layers.dxbjXqd = new this.esriObj.FeatureLayer({ // 可配置属性，见TileLayer类
+        url: serverConfig.mapUrlBj + '/2',
+        id: 'dxbjXqd'
+      })
+      this.layers.dxbjMph = new this.esriObj.FeatureLayer({ // 可配置属性，见TileLayer类
+        url: serverConfig.mapUrlBj + '/3',
+        id: 'dxbjMph'
+      })
+      // this.layers.dx2wGrid = new this.esriObj.FeatureLayer({
+      //   url: serverConfig.mapUrlBase + '/6',
+      //   id: 'gridLayer'
+      // })
+
+      // 加载各图层
+      this.map.add(this.layers.dxbjPoint)
+      this.map.add(this.layers.dxbjLine)
+      this.map.add(this.layers.dxbjXqd)
+      this.map.add(this.layers.dxbjMph)
+      // this.map.add(this.layers.dx2wGrid)
+    },
+    // 在兴趣点图层查询关键字
+    // queryOnMap: function() {
+    //   const points = [] // 查询结果点集
+
+    //   this.clearQueryResults()
+    //   this.clearEOrCPoint()
+    //   this.showEventPointPopup = false
+    //   this.queryEventSwitch = '2'
+
+    //   // 查询条件
+    //   const query = new this.esriObj.Query()
+    //   query.returnGeometry = true
+    //   query.outFields = ['*']
+    //   query.where = 'NAME like ' + "'%" + this.keywords + "%'"
+    //   const that = this
+
+    //   this.layers.dxbjXqd.queryFeatures(query).then(function(results) {
+    //     results.features.forEach(item => {
+    //       const point = {}
+    //       point.x = item.geometry.longitude
+    //       point.y = item.geometry.latitude
+    //       point.attr = item.attributes
+    //       points.push(point)
+    //     })
+
+    //     // 提示查询结果
+    //     if (points.length > 0) {
+    //       that.$message({
+    //         message: '成功查询到' + points.length + '条记录',
+    //         type: 'success'
+    //       })
+
+    //       // 绘制点
+    //       that.addSimpleMarkerOnMap(points)
+    //     } else {
+    //       that.$message({
+    //         message: '没有查询到结果，请重新输入关键字',
+    //         type: 'warning'
+    //       })
+    //     }
+    //   })
+    // },
+    // 清除图层上的查询结果
+    // clearQueryResults: function() {
+    //   this.map.layers.forEach(layer => {
+    //     if (layer.type === 'graphics' && layer.id === queryResultLayerId) {
+    //       layer.graphics.removeAll()
+    //       return false
+    //     }
+    //   })
+    // },
+    // // 清除图层上的查询结果
+    // clearMap: function() {
+    //   // 清除地图上绘制的graphic图层
+    //   this.map.layers.forEach(layer => {
+    //     if (layer.type === 'graphics') {
+    //       layer.graphics.removeAll()
+    //       return false
+    //     }
+    //   })
+
+    //   // 清除弹出框
+    //   this.view.popup.close()
+
+    //   // 清除data属性值
+    //   this.keywords = ''
+    //   this.showEventPointPopup = true // 是否显示事部件的popup
+    //   this.queryEventSwitch = '1' // 1==查询事件；0==查询部件
+    //   this.compListOpts = [] // 部件选择下拉框option
+    //   this.longitude = '' // 定位点经度
+    //   this.latitude = '' // 定位点纬度
+    //   this.communityId = '' // 社区ID
+    //   this.communityName = '' // 社区名称
+    //   this.gridId = '' // 单元网格ID
+    //   this.componentId = '' // 部件ID
+    //   this.componentName = '' // 部件名称
+    // },
+    // 清除图层上的事件定位点
+    // clearEOrCPoint: function() {
+    //   this.map.layers.forEach(layer => {
+    //     if (layer.type === 'graphics' && layer.id === eventPointLayerId) {
+    //       layer.graphics.removeAll()
+    //       return false
+    //     }
+    //   })
+    //   // 清除弹出框
+    //   this.view.popup.close()
+    // },
+    // 切换
+    // switchEventOrComponent: function() {
+    //   // 如果选中的是事件定位（1）或部件定位（0），点击地图时弹出事件或者部件的popup；否则（2以上）显示兴趣点结果的属性popup
+    //   this.showEventPointPopup = this.queryEventSwitch < 2
+    // },
+    // 将查询结果点集合绘制在地图上
+    // addSimpleMarkerOnMap: function(points) {
+    //   const gLayer = new this.esriObj.GraphicsLayer()
+    //   points.forEach(item => {
+    //     const point = new this.esriObj.Point(item.x, item.y, item.attr)
+    //     const marker = new this.esriObj.SimpleMarkerSymbol()
+    //     marker.color = '#F9690E'
+    //     marker.outline = {
+    //       color: [128, 128, 128, 0.5],
+    //       width: '2px'
+    //     }
+    //     const graphic = new this.esriObj.Graphic({
+    //       geometry: point,
+    //       symbol: marker,
+    //       attributes: item.attr
+    //     })
+    //     gLayer.id = queryResultLayerId
+    //     gLayer.add(graphic)
+    //   })
+    //   this.map.add(gLayer)
+    // },
+    // 返回事件定位的结果
+    // checkEventPoint: function() {
+    //   this.$emit(
+    //     'closeMapQueryDialogByEvent',
+    //     this.longitude,
+    //     this.latitude,
+    //     this.communityId,
+    //     this.communityName,
+    //     this.gridId)
+
+    //   this.clearMap()
+    // },
+    // // 返回部件定位的结果
+    // checkComponentPoint: function() {
+    //   this.$emit(
+    //     'closeMapQueryDialogByComp',
+    //     this.longitude,
+    //     this.latitude,
+    //     this.communityId,
+    //     this.communityName,
+    //     this.gridId,
+    //     this.componentId)
+
+    //   this.clearMap()
+    // },
+    // 在地图上添加指定坐标的点
+    addCasePointOnMap: function(lng, lat) {
+      console.log('addCasePointOnMap', lng, lat)
+      const gLayer = new this.esriObj.GraphicsLayer() // 添加自定义绘制点的图层
+      const point = new this.esriObj.Point(lng, lat) // 创建geometry对象
+      const marker = new this.esriObj.SimpleMarkerSymbol() // 创建marker标识
+      // marker属性
+      marker.color = '#F9690E'
+      marker.outline = {
+        color: [128, 128, 128, 0.5],
+        width: '2px'
+      }
+      // 创建graphic对象
+      const graphic = new this.esriObj.Graphic({
+        geometry: point,
+        symbol: marker
+      })
+      gLayer.id = caseLayerId // 标识案卷图层
+      gLayer.add(graphic) // 图层上添加对象
+      this.map.add(gLayer) // 地图上添加图层
+
+      // 重新设置地图中心点并移动
+      this.view.center = point
+      this.view.goTo(point)
+    }
+  }
+}
+</script>
+
+<style scoped>
+  @import 'https://js.arcgis.com/4.13/esri/css/main.css';
+  .baseMap {
+    height:60vh;
+    width: 100%;
+    margin-top: 25px;
+    border: 1px solid #DCDCDC;
+    border-radius: 4px;
+  }
+</style>
diff --git a/src/router/index.js b/src/router/index.js
index b265a48..1c80473 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -11,6 +11,7 @@
 import { systemRouters } from './modules/system'
 import { cooRouters } from './modules/coo'
 import { commenetRouters } from './modules/comment'
+import { suphandleRouters } from './modules/suphandle'
 import { commonRouters } from './modules/common'
 
 /**
@@ -90,6 +91,7 @@
 export const asyncRouterMap = [
   ...commonRouters,
   ...cooRouters,
+  ...suphandleRouters,
   ...systemRouters,
   ...commenetRouters,
   { path: '*', redirect: '/404', hidden: true, meta: {}}
diff --git a/src/router/modules/suphandle.js b/src/router/modules/suphandle.js
new file mode 100644
index 0000000..7026a7b
--- /dev/null
+++ b/src/router/modules/suphandle.js
@@ -0,0 +1,35 @@
+/* Layout */
+import Layout from '../../views/layout/Layout'
+export const suphandleRouters = [
+  {
+    path: '/suphandle',
+    name: 'suphandle',
+    redirect: '/accessDept',
+    hidden: true,
+    meta: {
+      title: '监督受理子系统',
+      permission: ['/suphandle'],
+      isSys: true
+    }
+  },
+  {
+    path: '/callBus',
+    component: Layout,
+    redirect: '/callBus',
+    name: 'CallBus',
+    alwaysShow: true,
+    meta: {
+      title: '呼叫业务',
+      permission: ['/callBus'],
+      sys: '/suphandle'
+    },
+    children: [
+      {
+        path: '/callCase',
+        component: () => import('@/views/callCase/callCase'),
+        name: 'CallCase',
+        meta: { title: '建立案卷', icon: '', belongSys: '', permission: '/callCase' }
+      }
+    ]
+  }
+]
diff --git a/src/router/modules/system.js b/src/router/modules/system.js
index 10bff2e..c80b732 100644
--- a/src/router/modules/system.js
+++ b/src/router/modules/system.js
@@ -48,6 +48,12 @@
         component: () => import('@/views/busAdmin/userDevice/userDevice'),
         name: 'UserDevice',
         meta: { title: '终端设备管理', icon: '', permission: ['/userDevice'] }
+      },
+      {
+        path: '/areaPersonliable',
+        component: () => import('@/views/busAdmin/areaPersonliable/areaPersonliable'),
+        name: 'AreaPersonliable',
+        meta: { title: '网格责任人管理', icon: '', permission: ['/areaPersonliable'] }
       }
     ]
   },

diff --git a/src/api/busAdmin/areaPersonliable.js b/src/api/busAdmin/areaPersonliable.js
new file mode 100644
index 0000000..58737bb
--- /dev/null
+++ b/src/api/busAdmin/areaPersonliable.js
@@ -0,0 +1,45 @@
+import request from '@/utils/request'
+
+export function getAreaPersonliableList(params) {
+  return request({
+    url: '/areaPersonliable/listPage',
+    method: 'get',
+    params
+  })
+}
+
+export function addAreaPersonliable(params) {
+  return request({
+    url: '/areaPersonliable/add',
+    method: 'post',
+    params
+  })
+}
+
+export function updateAreaPersonliable(params) {
+  return request({
+    url: '/areaPersonliable/update',
+    method: 'post',
+    params
+  })
+}
+
+export function deleteAreaPersonliable(id) {
+  return request({
+    url: '/areaPersonliable/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+export function getSupervisorList() {
+  return request({
+    url: '/mgr/simplelist',
+    method: 'post',
+    params: {
+      roleTips: 'supervisor'
+    }
+  })
+}
diff --git a/src/api/callCase/callCase.js b/src/api/callCase/callCase.js
new file mode 100644
index 0000000..7500fc7
--- /dev/null
+++ b/src/api/callCase/callCase.js
@@ -0,0 +1,87 @@
+/**
+ * 新建案卷的接口
+ */
+import request from '@/utils/request'
+
+// 获取案卷信息来源
+export function getCaseSource(params) {
+  return request({
+    url: 'dict/code/caseSource',
+    method: 'get',
+    params
+  })
+}
+
+// 获取案卷等级
+export function getCaseLevel(params) {
+  return request({
+    url: 'dict/code/caseLevel',
+    method: 'get',
+    params
+  })
+}
+
+// 获取案卷类别
+export function getCaseEorC(params) {
+  return request({
+    url: 'dict/code/eorc',
+    method: 'get',
+    params
+  })
+}
+
+// 根据案卷类别获取案卷大类
+export function getCaseType(eorc) {
+  return request({
+    url: 'case/type/list',
+    method: 'get',
+    params: {
+      eorc: eorc
+    }
+  })
+}
+
+// 根据案卷大类获取案卷小类
+export function getCaseDetailType(caseTypeId) {
+  return request({
+    url: 'case/typeDetail/list',
+    method: 'get',
+    params: {
+      typeId: caseTypeId
+    }
+  })
+}
+
+// 根据案卷小类获取结案标准
+export function getCaseTypesTime(caseTypeDetailId) {
+  return request({
+    url: 'case/typesTime/list',
+    method: 'get',
+    params: {
+      detailId: caseTypeDetailId
+    }
+  })
+}
+
+// 获取监督员列表
+export function getVerifyPerson(params) {
+  return request({
+    url: 'mgr/simplelist',
+    method: 'post',
+    params: {
+      roleTips: 'supervisor'
+    }
+  })
+}
+
+// 新增案卷
+export function addCase(params) {
+  return request({
+    url: 'case/add',
+    method: 'post',
+    headers: {
+      'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
+    },
+    params
+  })
+}
diff --git a/src/api/coorBusiness/case.js b/src/api/coorBusiness/case.js
index ec5a88a..08c3a13 100644
--- a/src/api/coorBusiness/case.js
+++ b/src/api/coorBusiness/case.js
@@ -110,9 +110,10 @@
   })
 }
 
+// 待处理
 export function toHandleListPage(params) {
   return request({
-    url: 'case/toHandleListPage/',
+    url: 'case/toProcessListPage/',
     method: 'get',
     params
   })
@@ -158,9 +159,10 @@
   })
 }
 
+// 待核查
 export function toCheckListPage(params) {
   return request({
-    url: 'case/toCheckListPage/',
+    url: 'case/toDisCheckListPage/',
     method: 'get',
     params
   })
diff --git a/src/components/CaseCommon/caseDetail.vue b/src/components/CaseCommon/caseDetail.vue
index f6c23ab..fdadcba 100644
--- a/src/components/CaseCommon/caseDetail.vue
+++ b/src/components/CaseCommon/caseDetail.vue
@@ -276,7 +276,7 @@
     </el-row>
     <el-row>
       <div class="title">数据流转:</div>
-      <el-table :data="recordList" :header-cell-style="{background:'#f3f3f3'}" class="table" border>
+      <el-table :data="recordList" :header-cell-style="{background:'#f3f3f3'}" max-height="400" class="table" border>
         <el-table-column prop="operationTypeName" label="操作" align="center"/>
         <el-table-column prop="deptName" label="单位" align="center"/>
         <el-table-column prop="userName" label="人员" align="center"/>
@@ -293,7 +293,7 @@
       :append-to-body="true"
       title="位置详情"
     >
-      <arc-gis-map :longitude="Number(caseDetail.lng)" :latitude="Number(caseDetail.lat)"/>
+      <arc-gis-map-read :longitude="Number(caseDetail.lng)" :latitude="Number(caseDetail.lat)"/>
     </el-dialog>
   </div>
 </template>
@@ -303,12 +303,12 @@
 import { getCaseDetail, getUserList, getDeptList, getCaseTypeList, getCaseTypeDetailList, getCaseTypeTimes } from '@/api/coorBusiness/case'
 import { getCommonLanguage, getFilingTypeList, getCaseLevelList } from '@/api/coorBusiness/dict'
 import { historicalRecords, nextNodes, completeCaseTask } from '@/api/coorBusiness/process'
-import ArcGisMap from '@/components/Map/arcgisMap'
+import ArcGisMapRead from '@/components/Map/arcgisMapRead'
 import { radioMap } from './radioMap'
 
 export default {
   name: 'CaseDetail',
-  components: { ArcGisMap },
+  components: { ArcGisMapRead },
   // props: {
   //   id: {
   //     type: String,
@@ -334,7 +334,6 @@
       showNeedVisit: false,
       caseDetail: {},
       operationKey: '', // 案件处理按钮key
-      imgurl: 'http:\\\\192.168.8.201:8083\\static\\',
       fileIdVerify: [], // 核实照片id
       fileIdProcess: [], // 处理照片id
       fileIdCheck: [], // 核查照片id
@@ -358,10 +357,12 @@
   computed: {
     isNeedVisit: function() {
       return this.caseDetail.isNeedRevisit === 1 ? '需要回访' : '不需要回访'
+    },
+    imgurl() {
+      return process.env.BASE_API + '/static/'
     }
   },
-  mounted() {
-    console.log('case dtial')
+  created() {
     this.id = this.$route.query.id
     this.showProcess = (this.$route.query.showProcess || this.$route.query.showProcess === false) ? this.$route.query.showProcess : true
     this.showNeedVisit = this.$route.query.showNeedVisit ? this.$route.query.showNeedVisit : false
@@ -371,7 +372,6 @@
     async initData() {
       // 查询案件详情接口
       const resDetail = await getCaseDetail(this.id)
-      console.log('detail', resDetail)
       this.caseDetail = resDetail.data[0]
 
       // 解析图片id
@@ -391,9 +391,11 @@
 
       // 查询流转记录接口
       this.processForm.processId = this.caseDetail.processId
-      const resRecord = await historicalRecords(this.processForm.processId)
-      this.recordList = resRecord.data
-      console.log(this.recordList)
+      // const resRecord = historicalRecords(this.processForm.processId)
+      // this.recordList = resRecord.data
+      historicalRecords(this.processForm.processId).then(res => {
+        this.recordList = res.data
+      })
 
       if (this.showProcess) {
         this.initProcess()
@@ -701,6 +703,7 @@
   .table{
     margin: 20px;
     width: 98%;
+    // max-height: 250px;
   }
   .title{
     margin-left: 38px;
diff --git a/src/components/CaseCommon/caseDetailRead.vue b/src/components/CaseCommon/caseDetailRead.vue
index 82066db..a4e87b0 100644
--- a/src/components/CaseCommon/caseDetailRead.vue
+++ b/src/components/CaseCommon/caseDetailRead.vue
@@ -158,11 +158,11 @@
 
 <script>
 import { getCaseDetail } from '@/api/coorBusiness/case'
-import ArcGisMap from '@/components/Map/arcgisMap'
+import ArcGisMapRead from '@/components/Map/arcgisMapRead'
 
 export default {
   name: 'CaseDetail',
-  components: { ArcGisMap },
+  components: { ArcGisMapRead },
   props: {
     id: {
       type: String,
diff --git a/src/components/Map/ArcGISConfig.js b/src/components/Map/ArcGISConfig.js
index d325da9..50cea3b 100644
--- a/src/components/Map/ArcGISConfig.js
+++ b/src/components/Map/ArcGISConfig.js
@@ -1,14 +1,16 @@
 export const mapConfig = {
-  apiUrl: 'https://js.arcgis.com/4.13/', // 暂时使用管网提供的api，实际部署时建议离线部署一套
+  apiUrl: 'http://192.168.8.205/arcgis_js_api/library/4.12/init.js', // 暂时使用管网提供的api，实际部署时建议离线部署一套
+  // apiUrl: 'https://js.arcgis.com/4.13/',
   mapIp: '223.84.218.107', // 服务ip
   mapPort: '6080', // 服务端口
-  serverBase: 'http://223.84.218.107:6080/arcgis/rest/services/', // 服务地址前缀
+  serverBase: 'http://192.168.8.205:6080/arcgis/rest/services/', // 服务地址前缀
+  // serverBase: 'http://223.84.218.107:6080/arcgis/rest/services/dx/',
   mapCenter: '[116.597,28.24]' // 地图中心点
 }
 
 export const serverConfig = {
-  mapUrlBase: mapConfig.serverBase + 'dx/2w/MapServer', // 底图服务地址
-  mapUrlBj: mapConfig.serverBase + 'dx/dxbj/MapServer', // 部件服务地址
-  mapUrlBjfc: mapConfig.serverBase + 'dx/bjfc/MapServer', // 部件分层服务地址
-  mapUrlBjEdit: mapConfig.serverBase + 'dx/dxbj/FeatureServer' // 可编辑的部件图层
+  mapUrlBase: mapConfig.serverBase + '2w/MapServer', // 底图服务地址
+  mapUrlBj: mapConfig.serverBase + 'dxbj/MapServer', // 部件服务地址
+  mapUrlBjfc: mapConfig.serverBase + 'bjfc/MapServer', // 部件分层服务地址
+  mapUrlBjEdit: mapConfig.serverBase + 'dxbj/FeatureServer' // 可编辑的部件图层
 }
diff --git a/src/components/Map/arcgisMap.vue b/src/components/Map/arcgisMap.vue
index 53776f1..5c15383 100644
--- a/src/components/Map/arcgisMap.vue
+++ b/src/components/Map/arcgisMap.vue
@@ -1,6 +1,6 @@
 <template>
-  <div style="margin-top:-30px">
-    <!-- <el-row :gutter="20">
+  <div>
+    <el-row :gutter="20">
       <el-col :span="4">
         <el-input v-model="keywords" size="small" type="text" placeholder="兴趣点关键字" clearable />
       </el-col>
@@ -31,9 +31,9 @@
       <el-col v-if="queryEventSwitch === '1'" :span="8" style="text-align: right;">
         <el-button type="primary" size="small" @click="checkEventPoint"> 事件提交 </el-button>
       </el-col>
-    </el-row> -->
+    </el-row>
 
-    <div v-loading="mapLoading" ref="mapDiv" class="baseMap" />
+    <div ref="mapDiv" class="baseMap" />
   </div>
 </template>
 
@@ -45,22 +45,12 @@
   url: mapConfig.apiUrl
 }
 
-// const eventPointLayerId = 'eventPointLayer' // 事件定位点的图层id
-// const queryResultLayerId = 'queryResultLayer' // 兴趣点查询结果点集的图层id
+const eventPointLayerId = 'eventPointLayer' // 事件定位点的图层id
+const queryResultLayerId = 'queryResultLayer' // 兴趣点查询结果点集的图层id
 const caseLayerId = 'addedGeometryLayerId' // 案卷点图层
 
 export default {
-  name: 'ArcGisMap',
-  props: {
-    longitude: {
-      type: Number,
-      default: 116.5937
-    },
-    latitude: {
-      type: Number,
-      default: 28.249
-    }
-  },
+  name: 'ArcGISMap',
   data() {
     return {
       map: '',
@@ -89,19 +79,18 @@
         IdentifyParameters: '',
         MapView: ''
       },
-      mapLoading: false
-      // keywords: '', // 查询关键字
-      // showEventPointPopup: true, // 是否显示事部件的popup
-      // queryEventSwitch: '1', // 1==查询事件；0==查询部件
-      // compListOpts: [], // 部件选择下拉框option
+      keywords: '', // 查询关键字
+      showEventPointPopup: true, // 是否显示事部件的popup
+      queryEventSwitch: '1', // 1==查询事件；0==查询部件
+      compListOpts: [], // 部件选择下拉框option
       // 主页面返回值
-      // longitude: '', // 定位点经度
-      // latitude: '' // 定位点纬度
-      // communityId: '', // 社区ID
-      // communityName: '', // 社区名称
-      // gridId: '', // 单元网格ID
-      // componentId: '', // 部件ID
-      // componentName: '' // 部件名称/=
+      longitude: '', // 定位点经度
+      latitude: '', // 定位点纬度
+      communityId: '', // 社区ID
+      communityName: '', // 社区名称
+      gridId: '', // 单元网格ID
+      componentId: '', // 部件ID
+      componentName: '' // 部件名称
     }
   },
   mounted() {
@@ -110,7 +99,6 @@
   methods: {
     // 初始化ArcGIS API对象
     importEsri: function() {
-      this.mapLoading = true
       loadModules([
         'esri/Map',
         'esri/Basemap',
@@ -164,10 +152,8 @@
 
           // 初始化地图
           this.initMap()
-          this.mapLoading = false
         }).catch(err => {
           console.log(err)
-          this.mapLoading = false
         })
     },
     // 初始化地图
@@ -194,139 +180,139 @@
         zoom: 3 // 当前地图缩放等级
       })
 
-      // const that = this
-      // this.view.on('click', function(event) {
-      //   // 清除地图上已有的事件/部件查询点
-      //   that.clearEOrCPoint()
+      const that = this
+      this.view.on('click', function(event) {
+        // 清除地图上已有的事件/部件查询点
+        that.clearEOrCPoint()
 
-      //   const lon = event.mapPoint.longitude
-      //   const lat = event.mapPoint.latitude
+        const lon = event.mapPoint.longitude
+        const lat = event.mapPoint.latitude
 
-      //   if (that.showEventPointPopup) {
-      //     // 添加点
-      //     const gLayer = new that.esriObj.GraphicsLayer()
-      //     const marker = new that.esriObj.SimpleMarkerSymbol()
-      //     marker.color = '#35A0E7'
-      //     marker.style = 'square'
-      //     marker.outline = {
-      //       color: [128, 128, 128, 0.5],
-      //       width: '2px'
-      //     }
-      //     const graphic = new that.esriObj.Graphic({
-      //       geometry: event.mapPoint,
-      //       symbol: marker
-      //     })
+        if (that.showEventPointPopup) {
+          // 添加点
+          const gLayer = new that.esriObj.GraphicsLayer()
+          const marker = new that.esriObj.SimpleMarkerSymbol()
+          marker.color = '#35A0E7'
+          marker.style = 'square'
+          marker.outline = {
+            color: [128, 128, 128, 0.5],
+            width: '2px'
+          }
+          const graphic = new that.esriObj.Graphic({
+            geometry: event.mapPoint,
+            symbol: marker
+          })
 
-      //     gLayer.id = eventPointLayerId
-      //     gLayer.add(graphic)
-      //     that.map.add(gLayer)
+          gLayer.id = eventPointLayerId
+          gLayer.add(graphic)
+          that.map.add(gLayer)
 
-      //     // 查询事件或者部件
-      //     if (that.queryEventSwitch === '1') {
-      //       // 事件定位
-      //       // 1查询底图得到所在网格与所在社区
-      //       const query = that.layers.dx2wGrid.createQuery()
-      //       query.geometry = that.view.toMap(event)
-      //       query.distance = 10
-      //       query.units = 'meters'
-      //       query.returnGeometry = true
-      //       query.outFields = ['BGID', 'COMMUID', 'COMMUNAME']
-      //       that.layers.dx2wGrid.queryFeatures(query)
-      //         .then(function(response) {
-      //           const result = response.features[0].attributes
+          // 查询事件或者部件
+          if (that.queryEventSwitch === '1') {
+            // 事件定位
+            // 1查询底图得到所在网格与所在社区
+            const query = that.layers.dx2wGrid.createQuery()
+            query.geometry = that.view.toMap(event)
+            query.distance = 10
+            query.units = 'meters'
+            query.returnGeometry = true
+            query.outFields = ['BGID', 'COMMUID', 'COMMUNAME']
+            that.layers.dx2wGrid.queryFeatures(query)
+              .then(function(response) {
+                const result = response.features[0].attributes
 
-      //           // 赋值
-      //           that.longitude = lon
-      //           that.latitude = lat
-      //           that.gridId = result.BGID
-      //           that.communityId = result.COMMUID
-      //           that.communityName = result.COMMUNAME
+                // 赋值
+                that.longitude = lon
+                that.latitude = lat
+                that.gridId = result.BGID
+                that.communityId = result.COMMUID
+                that.communityName = result.COMMUNAME
 
-      //           // 2弹出气泡
-      //           that.view.popup.open({
-      //             title: '事件定位',
-      //             content: '坐标：[' + lon.toFixed(4) + ', ' + lat.toFixed(4) + ']' + '<p>' + '所在社区：' + result.COMMUNAME,
-      //             location: event.mapPoint
-      //           })
-      //         })
-      //     } else if (that.queryEventSwitch === '0') {
-      //       // 部件定位
-      //       const queryDev = that.layers.dxbjPoint.createQuery()
-      //       // 定义查询的圆形范围，半径5米
-      //       const circle = new that.esriObj.Circle({
-      //         center: event.mapPoint,
-      //         radius: 5,
-      //         radiusUnit: 'meters'
-      //       })
-      //       queryDev.geometry = circle
-      //       queryDev.returnGeometry = true
-      //       queryDev.outFields = ['BGID', 'OBJID', 'OBJNAME', 'OBJPOS']
-      //       that.layers.dxbjPoint.queryFeatures(queryDev)
-      //         .then(function(response) {
-      //           if (response.features.length > 0) {
-      //             const results = response.features
+                // 2弹出气泡
+                that.view.popup.open({
+                  title: '事件定位',
+                  content: '坐标：[' + lon.toFixed(4) + ', ' + lat.toFixed(4) + ']' + '<p>' + '所在社区：' + result.COMMUNAME,
+                  location: event.mapPoint
+                })
+              })
+          } else if (that.queryEventSwitch === '0') {
+            // 部件定位
+            const queryDev = that.layers.dxbjPoint.createQuery()
+            // 定义查询的圆形范围，半径5米
+            const circle = new that.esriObj.Circle({
+              center: event.mapPoint,
+              radius: 5,
+              radiusUnit: 'meters'
+            })
+            queryDev.geometry = circle
+            queryDev.returnGeometry = true
+            queryDev.outFields = ['BGID', 'OBJID', 'OBJNAME', 'OBJPOS']
+            that.layers.dxbjPoint.queryFeatures(queryDev)
+              .then(function(response) {
+                if (response.features.length > 0) {
+                  const results = response.features
 
-      //             that.compListOpts = []
+                  that.compListOpts = []
 
-      //             let content = ''
-      //             results.forEach((item, index) => {
-      //               content += '<p>部件' + (index + 1) + '：' + item.attributes.OBJNAME + '，' + item.attributes.OBJPOS
-      //               const comp = {}
-      //               comp.name = '部件' + (index + 1) + '：' + item.attributes.OBJNAME
-      //               comp.value = item.attributes.OBJID
-      //               that.compListOpts.push(comp)
-      //             })
+                  let content = ''
+                  results.forEach((item, index) => {
+                    content += '<p>部件' + (index + 1) + '：' + item.attributes.OBJNAME + '，' + item.attributes.OBJPOS
+                    const comp = {}
+                    comp.name = '部件' + (index + 1) + '：' + item.attributes.OBJNAME
+                    comp.value = item.attributes.OBJID
+                    that.compListOpts.push(comp)
+                  })
 
-      //             // 2弹出气泡
-      //             that.view.popup.open({
-      //               title: '部件定位',
-      //               content: '坐标：[' + lon.toFixed(4) + ', ' + lat.toFixed(4) + ']，附近5米的部件有：' + content,
-      //               location: event.mapPoint
-      //             })
+                  // 2弹出气泡
+                  that.view.popup.open({
+                    title: '部件定位',
+                    content: '坐标：[' + lon.toFixed(4) + ', ' + lat.toFixed(4) + ']，附近5米的部件有：' + content,
+                    location: event.mapPoint
+                  })
 
-      //             // 查询所在社区和单元网格
-      //             const queryPos = that.layers.dx2wGrid.createQuery()
-      //             queryPos.geometry = that.view.toMap(event)
-      //             queryPos.returnGeometry = true
-      //             queryPos.outFields = ['BGID', 'COMMUID', 'COMMUNAME']
-      //             that.layers.dx2wGrid.queryFeatures(queryPos)
-      //               .then(function(response) {
-      //                 const result = response.features[0].attributes
+                  // 查询所在社区和单元网格
+                  const queryPos = that.layers.dx2wGrid.createQuery()
+                  queryPos.geometry = that.view.toMap(event)
+                  queryPos.returnGeometry = true
+                  queryPos.outFields = ['BGID', 'COMMUID', 'COMMUNAME']
+                  that.layers.dx2wGrid.queryFeatures(queryPos)
+                    .then(function(response) {
+                      const result = response.features[0].attributes
 
-      //                 // 赋值
-      //                 that.longitude = lon
-      //                 that.latitude = lat
-      //                 that.gridId = result.BGID
-      //                 that.communityId = result.COMMUID
-      //                 that.communityName = result.COMMUNAME
-      //               })
-      //           } else {
-      //             that.$message({
-      //               message: '没有查询到部件，请重新定位',
-      //               type: 'warning'
-      //             })
-      //           }
-      //         })
-      //     }
-      //   } else {
-      //     that.view.hitTest(event).then(function(response) {
-      //       if (response.results.length) {
-      //         const graphic = response.results[0].graphic
-      //         const name = graphic.attributes.KEYWORD
-      //         const address = graphic.attributes.OBJPOS
+                      // 赋值
+                      that.longitude = lon
+                      that.latitude = lat
+                      that.gridId = result.BGID
+                      that.communityId = result.COMMUID
+                      that.communityName = result.COMMUNAME
+                    })
+                } else {
+                  that.$message({
+                    message: '没有查询到部件，请重新定位',
+                    type: 'warning'
+                  })
+                }
+              })
+          }
+        } else {
+          that.view.hitTest(event).then(function(response) {
+            if (response.results.length) {
+              const graphic = response.results[0].graphic
+              const name = graphic.attributes.KEYWORD
+              const address = graphic.attributes.OBJPOS
 
-      //         that.view.popup.open({
-      //           title: name,
-      //           content: address,
-      //           location: event.mapPoint
-      //         })
-      //       }
-      //     })
-      //   }
-      // })
+              that.view.popup.open({
+                title: name,
+                content: address,
+                location: event.mapPoint
+              })
+            }
+          })
+        }
+      })
 
       this.addBjLayers()
-      this.addCasePointOnMap(this.longitude, this.latitude)
+      // this.addCasePointOnMap(116.5937, 28.249)
     },
     // 加载部件服务的各图层
     addBjLayers: function() {
@@ -347,160 +333,159 @@
         url: serverConfig.mapUrlBj + '/3',
         id: 'dxbjMph'
       })
-      // this.layers.dx2wGrid = new this.esriObj.FeatureLayer({
-      //   url: serverConfig.mapUrlBase + '/6',
-      //   id: 'gridLayer'
-      // })
+      this.layers.dx2wGrid = new this.esriObj.FeatureLayer({
+        url: serverConfig.mapUrlBase + '/1',
+        id: 'gridLayer'
+      })
 
       // 加载各图层
       this.map.add(this.layers.dxbjPoint)
       this.map.add(this.layers.dxbjLine)
       this.map.add(this.layers.dxbjXqd)
       this.map.add(this.layers.dxbjMph)
-      // this.map.add(this.layers.dx2wGrid)
+      this.map.add(this.layers.dx2wGrid)
     },
     // 在兴趣点图层查询关键字
-    // queryOnMap: function() {
-    //   const points = [] // 查询结果点集
+    queryOnMap: function() {
+      const points = [] // 查询结果点集
 
-    //   this.clearQueryResults()
-    //   this.clearEOrCPoint()
-    //   this.showEventPointPopup = false
-    //   this.queryEventSwitch = '2'
+      this.clearQueryResults()
+      this.clearEOrCPoint()
+      this.showEventPointPopup = false
+      this.queryEventSwitch = '2'
 
-    //   // 查询条件
-    //   const query = new this.esriObj.Query()
-    //   query.returnGeometry = true
-    //   query.outFields = ['*']
-    //   query.where = 'NAME like ' + "'%" + this.keywords + "%'"
-    //   const that = this
+      // 查询条件
+      const query = new this.esriObj.Query()
+      query.returnGeometry = true
+      query.outFields = ['*']
+      query.where = 'NAME like ' + "'%" + this.keywords + "%'"
+      const that = this
 
-    //   this.layers.dxbjXqd.queryFeatures(query).then(function(results) {
-    //     results.features.forEach(item => {
-    //       const point = {}
-    //       point.x = item.geometry.longitude
-    //       point.y = item.geometry.latitude
-    //       point.attr = item.attributes
-    //       points.push(point)
-    //     })
+      this.layers.dxbjXqd.queryFeatures(query).then(function(results) {
+        results.features.forEach(item => {
+          const point = {}
+          point.x = item.geometry.longitude
+          point.y = item.geometry.latitude
+          point.attr = item.attributes
+          points.push(point)
+        })
 
-    //     // 提示查询结果
-    //     if (points.length > 0) {
-    //       that.$message({
-    //         message: '成功查询到' + points.length + '条记录',
-    //         type: 'success'
-    //       })
+        // 提示查询结果
+        if (points.length > 0) {
+          that.$message({
+            message: '成功查询到' + points.length + '条记录',
+            type: 'success'
+          })
 
-    //       // 绘制点
-    //       that.addSimpleMarkerOnMap(points)
-    //     } else {
-    //       that.$message({
-    //         message: '没有查询到结果，请重新输入关键字',
-    //         type: 'warning'
-    //       })
-    //     }
-    //   })
-    // },
+          // 绘制点
+          that.addSimpleMarkerOnMap(points)
+        } else {
+          that.$message({
+            message: '没有查询到结果，请重新输入关键字',
+            type: 'warning'
+          })
+        }
+      })
+    },
     // 清除图层上的查询结果
-    // clearQueryResults: function() {
-    //   this.map.layers.forEach(layer => {
-    //     if (layer.type === 'graphics' && layer.id === queryResultLayerId) {
-    //       layer.graphics.removeAll()
-    //       return false
-    //     }
-    //   })
-    // },
-    // // 清除图层上的查询结果
-    // clearMap: function() {
-    //   // 清除地图上绘制的graphic图层
-    //   this.map.layers.forEach(layer => {
-    //     if (layer.type === 'graphics') {
-    //       layer.graphics.removeAll()
-    //       return false
-    //     }
-    //   })
+    clearQueryResults: function() {
+      this.map.layers.forEach(layer => {
+        if (layer.type === 'graphics' && layer.id === queryResultLayerId) {
+          layer.graphics.removeAll()
+          return false
+        }
+      })
+    },
+    // 清除图层上的查询结果
+    clearMap: function() {
+      // 清除地图上绘制的graphic图层
+      this.map.layers.forEach(layer => {
+        if (layer.type === 'graphics') {
+          layer.graphics.removeAll()
+          return false
+        }
+      })
 
-    //   // 清除弹出框
-    //   this.view.popup.close()
+      // 清除弹出框
+      this.view.popup.close()
 
-    //   // 清除data属性值
-    //   this.keywords = ''
-    //   this.showEventPointPopup = true // 是否显示事部件的popup
-    //   this.queryEventSwitch = '1' // 1==查询事件；0==查询部件
-    //   this.compListOpts = [] // 部件选择下拉框option
-    //   this.longitude = '' // 定位点经度
-    //   this.latitude = '' // 定位点纬度
-    //   this.communityId = '' // 社区ID
-    //   this.communityName = '' // 社区名称
-    //   this.gridId = '' // 单元网格ID
-    //   this.componentId = '' // 部件ID
-    //   this.componentName = '' // 部件名称
-    // },
+      // 清除data属性值
+      this.keywords = ''
+      this.showEventPointPopup = true // 是否显示事部件的popup
+      this.queryEventSwitch = '1' // 1==查询事件；0==查询部件
+      this.compListOpts = [] // 部件选择下拉框option
+      this.longitude = '' // 定位点经度
+      this.latitude = '' // 定位点纬度
+      this.communityId = '' // 社区ID
+      this.communityName = '' // 社区名称
+      this.gridId = '' // 单元网格ID
+      this.componentId = '' // 部件ID
+      this.componentName = '' // 部件名称
+    },
     // 清除图层上的事件定位点
-    // clearEOrCPoint: function() {
-    //   this.map.layers.forEach(layer => {
-    //     if (layer.type === 'graphics' && layer.id === eventPointLayerId) {
-    //       layer.graphics.removeAll()
-    //       return false
-    //     }
-    //   })
-    //   // 清除弹出框
-    //   this.view.popup.close()
-    // },
+    clearEOrCPoint: function() {
+      this.map.layers.forEach(layer => {
+        if (layer.type === 'graphics' && layer.id === eventPointLayerId) {
+          layer.graphics.removeAll()
+          return false
+        }
+      })
+      // 清除弹出框
+      this.view.popup.close()
+    },
     // 切换
-    // switchEventOrComponent: function() {
-    //   // 如果选中的是事件定位（1）或部件定位（0），点击地图时弹出事件或者部件的popup；否则（2以上）显示兴趣点结果的属性popup
-    //   this.showEventPointPopup = this.queryEventSwitch < 2
-    // },
+    switchEventOrComponent: function() {
+      // 如果选中的是事件定位（1）或部件定位（0），点击地图时弹出事件或者部件的popup；否则（2以上）显示兴趣点结果的属性popup
+      this.showEventPointPopup = this.queryEventSwitch < 2
+    },
     // 将查询结果点集合绘制在地图上
-    // addSimpleMarkerOnMap: function(points) {
-    //   const gLayer = new this.esriObj.GraphicsLayer()
-    //   points.forEach(item => {
-    //     const point = new this.esriObj.Point(item.x, item.y, item.attr)
-    //     const marker = new this.esriObj.SimpleMarkerSymbol()
-    //     marker.color = '#F9690E'
-    //     marker.outline = {
-    //       color: [128, 128, 128, 0.5],
-    //       width: '2px'
-    //     }
-    //     const graphic = new this.esriObj.Graphic({
-    //       geometry: point,
-    //       symbol: marker,
-    //       attributes: item.attr
-    //     })
-    //     gLayer.id = queryResultLayerId
-    //     gLayer.add(graphic)
-    //   })
-    //   this.map.add(gLayer)
-    // },
+    addSimpleMarkerOnMap: function(points) {
+      const gLayer = new this.esriObj.GraphicsLayer()
+      points.forEach(item => {
+        const point = new this.esriObj.Point(item.x, item.y, item.attr)
+        const marker = new this.esriObj.SimpleMarkerSymbol()
+        marker.color = '#F9690E'
+        marker.outline = {
+          color: [128, 128, 128, 0.5],
+          width: '2px'
+        }
+        const graphic = new this.esriObj.Graphic({
+          geometry: point,
+          symbol: marker,
+          attributes: item.attr
+        })
+        gLayer.id = queryResultLayerId
+        gLayer.add(graphic)
+      })
+      this.map.add(gLayer)
+    },
     // 返回事件定位的结果
-    // checkEventPoint: function() {
-    //   this.$emit(
-    //     'closeMapQueryDialogByEvent',
-    //     this.longitude,
-    //     this.latitude,
-    //     this.communityId,
-    //     this.communityName,
-    //     this.gridId)
+    checkEventPoint: function() {
+      this.$emit(
+        'closeMapQueryDialogByEvent',
+        this.longitude,
+        this.latitude,
+        this.communityId,
+        this.communityName,
+        this.gridId)
 
-    //   this.clearMap()
-    // },
-    // // 返回部件定位的结果
-    // checkComponentPoint: function() {
-    //   this.$emit(
-    //     'closeMapQueryDialogByComp',
-    //     this.longitude,
-    //     this.latitude,
-    //     this.communityId,
-    //     this.communityName,
-    //     this.gridId,
-    //     this.componentId)
+      this.clearMap()
+    },
+    // 返回部件定位的结果
+    checkComponentPoint: function() {
+      this.$emit(
+        'closeMapQueryDialogByComp',
+        this.longitude,
+        this.latitude,
+        this.communityId,
+        this.communityName,
+        this.gridId,
+        this.componentId)
 
-    //   this.clearMap()
-    // },
+      this.clearMap()
+    },
     // 在地图上添加指定坐标的点
     addCasePointOnMap: function(lng, lat) {
-      console.log('addCasePointOnMap', lng, lat)
       const gLayer = new this.esriObj.GraphicsLayer() // 添加自定义绘制点的图层
       const point = new this.esriObj.Point(lng, lat) // 创建geometry对象
       const marker = new this.esriObj.SimpleMarkerSymbol() // 创建marker标识
@@ -521,14 +506,14 @@
 
       // 重新设置地图中心点并移动
       this.view.center = point
-      this.view.goTo(point)
+      this.view.goTo()
     }
   }
 }
 </script>
 
 <style scoped>
-  @import 'https://js.arcgis.com/4.13/esri/css/main.css';
+  @import 'http://192.168.8.205/arcgis_js_api/library/4.12/esri/css/main.css';
   .baseMap {
     height:60vh;
     width: 100%;
diff --git a/src/components/Map/arcgisMapRead.vue b/src/components/Map/arcgisMapRead.vue
new file mode 100644
index 0000000..ae2058b
--- /dev/null
+++ b/src/components/Map/arcgisMapRead.vue
@@ -0,0 +1,539 @@
+<template>
+  <div style="margin-top:-30px">
+    <!-- <el-row :gutter="20">
+      <el-col :span="4">
+        <el-input v-model="keywords" size="small" type="text" placeholder="兴趣点关键字" clearable />
+      </el-col>
+      <el-col :span="4">
+        <el-button type="primary" size="small" @click="queryOnMap">查询</el-button>
+        <el-button type="info" size="small" @click="clearMap"> 清除地图 </el-button>
+      </el-col>
+
+      <el-col :span="8" style="text-align: center;">
+        <el-radio-group v-model="queryEventSwitch" size="small" @change="switchEventOrComponent">
+          <el-radio-button label="1">事件定位</el-radio-button>
+          <el-radio-button label="0">部件定位</el-radio-button>
+          <el-radio-button label="2">兴趣点属性</el-radio-button>
+        </el-radio-group>
+      </el-col>
+
+      <el-col v-if="queryEventSwitch === '0'" :span="8" style="text-align: right;">
+        <el-select v-model="componentId" placeholder="选择部件" clearable value="" size="small">
+          <el-option
+            v-for="item in compListOpts"
+            :key="item.value"
+            :label="item.name"
+            :value="item.value"/>
+        </el-select>
+        <el-button type="primary" size="small" @click="checkComponentPoint"> 部件提交 </el-button>
+      </el-col>
+
+      <el-col v-if="queryEventSwitch === '1'" :span="8" style="text-align: right;">
+        <el-button type="primary" size="small" @click="checkEventPoint"> 事件提交 </el-button>
+      </el-col>
+    </el-row> -->
+
+    <div v-loading="mapLoading" ref="mapDiv" class="baseMap" />
+  </div>
+</template>
+
+<script>
+import { loadModules } from 'esri-loader'
+import { mapConfig, serverConfig } from './ArcGISConfig'
+
+const option = {
+  url: mapConfig.apiUrl
+}
+
+// const eventPointLayerId = 'eventPointLayer' // 事件定位点的图层id
+// const queryResultLayerId = 'queryResultLayer' // 兴趣点查询结果点集的图层id
+const caseLayerId = 'addedGeometryLayerId' // 案卷点图层
+
+export default {
+  name: 'ArcGisMapRead',
+  props: {
+    longitude: {
+      type: Number,
+      default: 116.5937
+    },
+    latitude: {
+      type: Number,
+      default: 28.249
+    }
+  },
+  data() {
+    return {
+      map: '',
+      view: '',
+      layers: {
+        dxbjPoint: '', // 部件点图层
+        dxbjLine: '', // 部件线图层
+        dxbjXqd: '', // 兴趣点图层
+        dxbjMph: '', // 门牌好图层
+        dx2wGrid: '' // 单元网格图层
+      },
+      esriObj: {
+        Map: '',
+        BaseMap: '',
+        Graphic: '',
+        PopupTemplate: '',
+        Circle: '',
+        Point: '',
+        FeatureLayer: '',
+        GraphicsLayer: '',
+        TileLayer: '',
+        SimpleMarkerSymbol: '',
+        Query: '',
+        QueryTask: '',
+        IdentifyTask: '',
+        IdentifyParameters: '',
+        MapView: ''
+      },
+      mapLoading: false
+      // keywords: '', // 查询关键字
+      // showEventPointPopup: true, // 是否显示事部件的popup
+      // queryEventSwitch: '1', // 1==查询事件；0==查询部件
+      // compListOpts: [], // 部件选择下拉框option
+      // 主页面返回值
+      // longitude: '', // 定位点经度
+      // latitude: '' // 定位点纬度
+      // communityId: '', // 社区ID
+      // communityName: '', // 社区名称
+      // gridId: '', // 单元网格ID
+      // componentId: '', // 部件ID
+      // componentName: '' // 部件名称/=
+    }
+  },
+  mounted() {
+    this.importEsri()
+  },
+  methods: {
+    // 初始化ArcGIS API对象
+    importEsri: function() {
+      this.mapLoading = true
+      loadModules([
+        'esri/Map',
+        'esri/Basemap',
+        'esri/Graphic',
+        'esri/PopupTemplate',
+        'esri/geometry/Circle',
+        'esri/geometry/Point',
+        'esri/layers/FeatureLayer',
+        'esri/layers/GraphicsLayer',
+        'esri/layers/TileLayer',
+        'esri/symbols/SimpleMarkerSymbol',
+        'esri/tasks/support/Query',
+        'esri/tasks/QueryTask',
+        'esri/tasks/IdentifyTask',
+        'esri/tasks/support/IdentifyParameters',
+        'esri/views/MapView',
+        'dojo/domReady!'
+      ], option)
+        .then(([
+          Map,
+          BaseMap,
+          Graphic,
+          PopupTemplate,
+          Circle,
+          Point,
+          FeatureLayer,
+          GraphicsLayer,
+          TileLayer,
+          SimpleMarkerSymbol,
+          Query,
+          QueryTask,
+          IdentifyTask,
+          IdentifyParameters,
+          MapView
+        ]) => {
+          this.esriObj.Map = Map
+          this.esriObj.BaseMap = BaseMap
+          this.esriObj.Graphic = Graphic
+          this.esriObj.PopupTemplate = PopupTemplate
+          this.esriObj.Circle = Circle
+          this.esriObj.Point = Point
+          this.esriObj.FeatureLayer = FeatureLayer
+          this.esriObj.GraphicsLayer = GraphicsLayer
+          this.esriObj.TileLayer = TileLayer
+          this.esriObj.SimpleMarkerSymbol = SimpleMarkerSymbol
+          this.esriObj.Query = Query
+          this.esriObj.QueryTask = QueryTask
+          this.esriObj.IdentifyTask = IdentifyTask
+          this.esriObj.IdentifyParameters = IdentifyParameters
+          this.esriObj.MapView = MapView
+
+          // 初始化地图
+          this.initMap()
+          this.mapLoading = false
+        }).catch(err => {
+          console.log(err)
+          this.mapLoading = false
+        })
+    },
+    // 初始化地图
+    initMap: function() {
+      const base = new this.esriObj.BaseMap({
+        baseLayers: [
+          new this.esriObj.TileLayer({ // 可配置属性，见TileLayer类
+            id: '2w',
+            url: serverConfig.mapUrlBase
+          })
+        ],
+        title: 'dx2w',
+        id: 'dx2w'
+      })
+
+      this.map = new this.esriObj.Map({
+        basemap: base // 底图类型，详见BaseMap类
+      })
+
+      this.view = new this.esriObj.MapView({
+        container: this.$refs.mapDiv, // 视图的容器
+        map: this.map, // Map的实例放入视图中
+        center: [116.597, 28.24], // 初始显示的地图中心点，经纬度
+        zoom: 3 // 当前地图缩放等级
+      })
+
+      // const that = this
+      // this.view.on('click', function(event) {
+      //   // 清除地图上已有的事件/部件查询点
+      //   that.clearEOrCPoint()
+
+      //   const lon = event.mapPoint.longitude
+      //   const lat = event.mapPoint.latitude
+
+      //   if (that.showEventPointPopup) {
+      //     // 添加点
+      //     const gLayer = new that.esriObj.GraphicsLayer()
+      //     const marker = new that.esriObj.SimpleMarkerSymbol()
+      //     marker.color = '#35A0E7'
+      //     marker.style = 'square'
+      //     marker.outline = {
+      //       color: [128, 128, 128, 0.5],
+      //       width: '2px'
+      //     }
+      //     const graphic = new that.esriObj.Graphic({
+      //       geometry: event.mapPoint,
+      //       symbol: marker
+      //     })
+
+      //     gLayer.id = eventPointLayerId
+      //     gLayer.add(graphic)
+      //     that.map.add(gLayer)
+
+      //     // 查询事件或者部件
+      //     if (that.queryEventSwitch === '1') {
+      //       // 事件定位
+      //       // 1查询底图得到所在网格与所在社区
+      //       const query = that.layers.dx2wGrid.createQuery()
+      //       query.geometry = that.view.toMap(event)
+      //       query.distance = 10
+      //       query.units = 'meters'
+      //       query.returnGeometry = true
+      //       query.outFields = ['BGID', 'COMMUID', 'COMMUNAME']
+      //       that.layers.dx2wGrid.queryFeatures(query)
+      //         .then(function(response) {
+      //           const result = response.features[0].attributes
+
+      //           // 赋值
+      //           that.longitude = lon
+      //           that.latitude = lat
+      //           that.gridId = result.BGID
+      //           that.communityId = result.COMMUID
+      //           that.communityName = result.COMMUNAME
+
+      //           // 2弹出气泡
+      //           that.view.popup.open({
+      //             title: '事件定位',
+      //             content: '坐标：[' + lon.toFixed(4) + ', ' + lat.toFixed(4) + ']' + '<p>' + '所在社区：' + result.COMMUNAME,
+      //             location: event.mapPoint
+      //           })
+      //         })
+      //     } else if (that.queryEventSwitch === '0') {
+      //       // 部件定位
+      //       const queryDev = that.layers.dxbjPoint.createQuery()
+      //       // 定义查询的圆形范围，半径5米
+      //       const circle = new that.esriObj.Circle({
+      //         center: event.mapPoint,
+      //         radius: 5,
+      //         radiusUnit: 'meters'
+      //       })
+      //       queryDev.geometry = circle
+      //       queryDev.returnGeometry = true
+      //       queryDev.outFields = ['BGID', 'OBJID', 'OBJNAME', 'OBJPOS']
+      //       that.layers.dxbjPoint.queryFeatures(queryDev)
+      //         .then(function(response) {
+      //           if (response.features.length > 0) {
+      //             const results = response.features
+
+      //             that.compListOpts = []
+
+      //             let content = ''
+      //             results.forEach((item, index) => {
+      //               content += '<p>部件' + (index + 1) + '：' + item.attributes.OBJNAME + '，' + item.attributes.OBJPOS
+      //               const comp = {}
+      //               comp.name = '部件' + (index + 1) + '：' + item.attributes.OBJNAME
+      //               comp.value = item.attributes.OBJID
+      //               that.compListOpts.push(comp)
+      //             })
+
+      //             // 2弹出气泡
+      //             that.view.popup.open({
+      //               title: '部件定位',
+      //               content: '坐标：[' + lon.toFixed(4) + ', ' + lat.toFixed(4) + ']，附近5米的部件有：' + content,
+      //               location: event.mapPoint
+      //             })
+
+      //             // 查询所在社区和单元网格
+      //             const queryPos = that.layers.dx2wGrid.createQuery()
+      //             queryPos.geometry = that.view.toMap(event)
+      //             queryPos.returnGeometry = true
+      //             queryPos.outFields = ['BGID', 'COMMUID', 'COMMUNAME']
+      //             that.layers.dx2wGrid.queryFeatures(queryPos)
+      //               .then(function(response) {
+      //                 const result = response.features[0].attributes
+
+      //                 // 赋值
+      //                 that.longitude = lon
+      //                 that.latitude = lat
+      //                 that.gridId = result.BGID
+      //                 that.communityId = result.COMMUID
+      //                 that.communityName = result.COMMUNAME
+      //               })
+      //           } else {
+      //             that.$message({
+      //               message: '没有查询到部件，请重新定位',
+      //               type: 'warning'
+      //             })
+      //           }
+      //         })
+      //     }
+      //   } else {
+      //     that.view.hitTest(event).then(function(response) {
+      //       if (response.results.length) {
+      //         const graphic = response.results[0].graphic
+      //         const name = graphic.attributes.KEYWORD
+      //         const address = graphic.attributes.OBJPOS
+
+      //         that.view.popup.open({
+      //           title: name,
+      //           content: address,
+      //           location: event.mapPoint
+      //         })
+      //       }
+      //     })
+      //   }
+      // })
+
+      this.addBjLayers()
+      this.addCasePointOnMap(this.longitude, this.latitude)
+    },
+    // 加载部件服务的各图层
+    addBjLayers: function() {
+      // 此处可以优化
+      this.layers.dxbjPoint = new this.esriObj.FeatureLayer({ // 可配置属性，见TileLayer类
+        url: serverConfig.mapUrlBj + '/0',
+        id: 'dxbjPoint'
+      })
+      this.layers.dxbjLine = new this.esriObj.FeatureLayer({ // 可配置属性，见TileLayer类
+        url: serverConfig.mapUrlBj + '/1',
+        id: 'dxbjLine'
+      })
+      this.layers.dxbjXqd = new this.esriObj.FeatureLayer({ // 可配置属性，见TileLayer类
+        url: serverConfig.mapUrlBj + '/2',
+        id: 'dxbjXqd'
+      })
+      this.layers.dxbjMph = new this.esriObj.FeatureLayer({ // 可配置属性，见TileLayer类
+        url: serverConfig.mapUrlBj + '/3',
+        id: 'dxbjMph'
+      })
+      // this.layers.dx2wGrid = new this.esriObj.FeatureLayer({
+      //   url: serverConfig.mapUrlBase + '/6',
+      //   id: 'gridLayer'
+      // })
+
+      // 加载各图层
+      this.map.add(this.layers.dxbjPoint)
+      this.map.add(this.layers.dxbjLine)
+      this.map.add(this.layers.dxbjXqd)
+      this.map.add(this.layers.dxbjMph)
+      // this.map.add(this.layers.dx2wGrid)
+    },
+    // 在兴趣点图层查询关键字
+    // queryOnMap: function() {
+    //   const points = [] // 查询结果点集
+
+    //   this.clearQueryResults()
+    //   this.clearEOrCPoint()
+    //   this.showEventPointPopup = false
+    //   this.queryEventSwitch = '2'
+
+    //   // 查询条件
+    //   const query = new this.esriObj.Query()
+    //   query.returnGeometry = true
+    //   query.outFields = ['*']
+    //   query.where = 'NAME like ' + "'%" + this.keywords + "%'"
+    //   const that = this
+
+    //   this.layers.dxbjXqd.queryFeatures(query).then(function(results) {
+    //     results.features.forEach(item => {
+    //       const point = {}
+    //       point.x = item.geometry.longitude
+    //       point.y = item.geometry.latitude
+    //       point.attr = item.attributes
+    //       points.push(point)
+    //     })
+
+    //     // 提示查询结果
+    //     if (points.length > 0) {
+    //       that.$message({
+    //         message: '成功查询到' + points.length + '条记录',
+    //         type: 'success'
+    //       })
+
+    //       // 绘制点
+    //       that.addSimpleMarkerOnMap(points)
+    //     } else {
+    //       that.$message({
+    //         message: '没有查询到结果，请重新输入关键字',
+    //         type: 'warning'
+    //       })
+    //     }
+    //   })
+    // },
+    // 清除图层上的查询结果
+    // clearQueryResults: function() {
+    //   this.map.layers.forEach(layer => {
+    //     if (layer.type === 'graphics' && layer.id === queryResultLayerId) {
+    //       layer.graphics.removeAll()
+    //       return false
+    //     }
+    //   })
+    // },
+    // // 清除图层上的查询结果
+    // clearMap: function() {
+    //   // 清除地图上绘制的graphic图层
+    //   this.map.layers.forEach(layer => {
+    //     if (layer.type === 'graphics') {
+    //       layer.graphics.removeAll()
+    //       return false
+    //     }
+    //   })
+
+    //   // 清除弹出框
+    //   this.view.popup.close()
+
+    //   // 清除data属性值
+    //   this.keywords = ''
+    //   this.showEventPointPopup = true // 是否显示事部件的popup
+    //   this.queryEventSwitch = '1' // 1==查询事件；0==查询部件
+    //   this.compListOpts = [] // 部件选择下拉框option
+    //   this.longitude = '' // 定位点经度
+    //   this.latitude = '' // 定位点纬度
+    //   this.communityId = '' // 社区ID
+    //   this.communityName = '' // 社区名称
+    //   this.gridId = '' // 单元网格ID
+    //   this.componentId = '' // 部件ID
+    //   this.componentName = '' // 部件名称
+    // },
+    // 清除图层上的事件定位点
+    // clearEOrCPoint: function() {
+    //   this.map.layers.forEach(layer => {
+    //     if (layer.type === 'graphics' && layer.id === eventPointLayerId) {
+    //       layer.graphics.removeAll()
+    //       return false
+    //     }
+    //   })
+    //   // 清除弹出框
+    //   this.view.popup.close()
+    // },
+    // 切换
+    // switchEventOrComponent: function() {
+    //   // 如果选中的是事件定位（1）或部件定位（0），点击地图时弹出事件或者部件的popup；否则（2以上）显示兴趣点结果的属性popup
+    //   this.showEventPointPopup = this.queryEventSwitch < 2
+    // },
+    // 将查询结果点集合绘制在地图上
+    // addSimpleMarkerOnMap: function(points) {
+    //   const gLayer = new this.esriObj.GraphicsLayer()
+    //   points.forEach(item => {
+    //     const point = new this.esriObj.Point(item.x, item.y, item.attr)
+    //     const marker = new this.esriObj.SimpleMarkerSymbol()
+    //     marker.color = '#F9690E'
+    //     marker.outline = {
+    //       color: [128, 128, 128, 0.5],
+    //       width: '2px'
+    //     }
+    //     const graphic = new this.esriObj.Graphic({
+    //       geometry: point,
+    //       symbol: marker,
+    //       attributes: item.attr
+    //     })
+    //     gLayer.id = queryResultLayerId
+    //     gLayer.add(graphic)
+    //   })
+    //   this.map.add(gLayer)
+    // },
+    // 返回事件定位的结果
+    // checkEventPoint: function() {
+    //   this.$emit(
+    //     'closeMapQueryDialogByEvent',
+    //     this.longitude,
+    //     this.latitude,
+    //     this.communityId,
+    //     this.communityName,
+    //     this.gridId)
+
+    //   this.clearMap()
+    // },
+    // // 返回部件定位的结果
+    // checkComponentPoint: function() {
+    //   this.$emit(
+    //     'closeMapQueryDialogByComp',
+    //     this.longitude,
+    //     this.latitude,
+    //     this.communityId,
+    //     this.communityName,
+    //     this.gridId,
+    //     this.componentId)
+
+    //   this.clearMap()
+    // },
+    // 在地图上添加指定坐标的点
+    addCasePointOnMap: function(lng, lat) {
+      console.log('addCasePointOnMap', lng, lat)
+      const gLayer = new this.esriObj.GraphicsLayer() // 添加自定义绘制点的图层
+      const point = new this.esriObj.Point(lng, lat) // 创建geometry对象
+      const marker = new this.esriObj.SimpleMarkerSymbol() // 创建marker标识
+      // marker属性
+      marker.color = '#F9690E'
+      marker.outline = {
+        color: [128, 128, 128, 0.5],
+        width: '2px'
+      }
+      // 创建graphic对象
+      const graphic = new this.esriObj.Graphic({
+        geometry: point,
+        symbol: marker
+      })
+      gLayer.id = caseLayerId // 标识案卷图层
+      gLayer.add(graphic) // 图层上添加对象
+      this.map.add(gLayer) // 地图上添加图层
+
+      // 重新设置地图中心点并移动
+      this.view.center = point
+      this.view.goTo(point)
+    }
+  }
+}
+</script>
+
+<style scoped>
+  @import 'https://js.arcgis.com/4.13/esri/css/main.css';
+  .baseMap {
+    height:60vh;
+    width: 100%;
+    margin-top: 25px;
+    border: 1px solid #DCDCDC;
+    border-radius: 4px;
+  }
+</style>
diff --git a/src/router/index.js b/src/router/index.js
index b265a48..1c80473 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -11,6 +11,7 @@
 import { systemRouters } from './modules/system'
 import { cooRouters } from './modules/coo'
 import { commenetRouters } from './modules/comment'
+import { suphandleRouters } from './modules/suphandle'
 import { commonRouters } from './modules/common'
 
 /**
@@ -90,6 +91,7 @@
 export const asyncRouterMap = [
   ...commonRouters,
   ...cooRouters,
+  ...suphandleRouters,
   ...systemRouters,
   ...commenetRouters,
   { path: '*', redirect: '/404', hidden: true, meta: {}}
diff --git a/src/router/modules/suphandle.js b/src/router/modules/suphandle.js
new file mode 100644
index 0000000..7026a7b
--- /dev/null
+++ b/src/router/modules/suphandle.js
@@ -0,0 +1,35 @@
+/* Layout */
+import Layout from '../../views/layout/Layout'
+export const suphandleRouters = [
+  {
+    path: '/suphandle',
+    name: 'suphandle',
+    redirect: '/accessDept',
+    hidden: true,
+    meta: {
+      title: '监督受理子系统',
+      permission: ['/suphandle'],
+      isSys: true
+    }
+  },
+  {
+    path: '/callBus',
+    component: Layout,
+    redirect: '/callBus',
+    name: 'CallBus',
+    alwaysShow: true,
+    meta: {
+      title: '呼叫业务',
+      permission: ['/callBus'],
+      sys: '/suphandle'
+    },
+    children: [
+      {
+        path: '/callCase',
+        component: () => import('@/views/callCase/callCase'),
+        name: 'CallCase',
+        meta: { title: '建立案卷', icon: '', belongSys: '', permission: '/callCase' }
+      }
+    ]
+  }
+]
diff --git a/src/router/modules/system.js b/src/router/modules/system.js
index 10bff2e..c80b732 100644
--- a/src/router/modules/system.js
+++ b/src/router/modules/system.js
@@ -48,6 +48,12 @@
         component: () => import('@/views/busAdmin/userDevice/userDevice'),
         name: 'UserDevice',
         meta: { title: '终端设备管理', icon: '', permission: ['/userDevice'] }
+      },
+      {
+        path: '/areaPersonliable',
+        component: () => import('@/views/busAdmin/areaPersonliable/areaPersonliable'),
+        name: 'AreaPersonliable',
+        meta: { title: '网格责任人管理', icon: '', permission: ['/areaPersonliable'] }
       }
     ]
   },
diff --git a/src/views/busAdmin/areaPersonliable/areaPersonliable.vue b/src/views/busAdmin/areaPersonliable/areaPersonliable.vue
new file mode 100644
index 0000000..23a26de
--- /dev/null
+++ b/src/views/busAdmin/areaPersonliable/areaPersonliable.vue
@@ -0,0 +1,156 @@
+<template>
+  <div class="table-container">
+    <el-row class="table-title">
+      <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
+      <el-col :span="12" :offset="6" class="edit_btns">
+        <el-button v-if="hasPerm('/areaPersonliable/add')" class="edit_btn" size="small" @click="add">新增</el-button>
+      </el-col>
+    </el-row>
+    <el-table v-loading="listLoading" ref="table" :data="list" class="table" border>
+      <el-table-column :index="indexMethod" align="center" type="index" />
+      <el-table-column v-for="column in tableColumns" :key="column.value" :label="column.text" align="center">
+        <template slot-scope="scope">
+          <span>{{ scope.row[column.value] }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column v-if="hasPerm('/areaPersonliable/update')||hasPerm('/areaPersonliable/delete')" label="操作" align="center" width="200">
+        <template slot-scope="scope">
+          <el-button v-if="hasPerm('/areaPersonliable/update')" class="table-button" type="text" @click="edit(scope.row)">编辑</el-button>
+          <el-button v-if="hasPerm('/areaPersonliable/delete')" class="table-button" type="text" @click="del(scope.row)">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <div class="pagination-container">
+      <el-pagination
+        :current-page="listQuery.offset"
+        :page-sizes="[10,20,30,50]"
+        :page-size="listQuery.limit"
+        :total="total"
+        align="center"
+        layout="total, sizes, prev, pager, next"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"/>
+    </div>
+
+    <edit-area-personliable ref="editAreaPersonliable" @watchChild="fetchData"/>
+  </div>
+</template>
+
+<script>
+import { getAreaPersonliableList, deleteAreaPersonliable } from '@/api/busAdmin/areaPersonliable'
+import EditAreaPersonliable from './editAreaPersonliable'
+
+export default {
+  name: 'AreaPersonliable',
+  components: { EditAreaPersonliable },
+  data() {
+    return {
+      list: [],
+      total: 0,
+      listLoading: false,
+      listQuery: {
+        limit: 10,
+        offset: 1,
+        sort: 'id',
+        order: 'asc'
+      },
+      tableColumns: [
+        {
+          text: '网格名称',
+          value: 'areaName'
+        },
+        {
+          text: '责任人姓名',
+          value: 'userName'
+        },
+        {
+          text: '所属区域',
+          value: 'pAreaName'
+        }
+      ]
+    }
+  },
+  activated() {
+    this.fetchData()
+  },
+  methods: {
+    async fetchData() {
+      this.listLoading = true
+      const res = await getAreaPersonliableList(this.listQuery)
+      this.list = res.data.rows
+      this.total = parseInt(res.data.total)
+      this.listLoading = false
+    },
+    indexMethod(index) {
+      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
+    },
+    // 改变页容量
+    handleSizeChange(val) {
+      this.listQuery.limit = val
+      this.fetchData()
+    },
+    // 改变当前页
+    handleCurrentChange(val) {
+      this.listQuery.offset = val
+      this.fetchData()
+    },
+    add() {
+      this.$refs.editAreaPersonliable.initDialog(true, 'create')
+    },
+    edit(row) {
+      this.$refs.editAreaPersonliable.initDialog(true, 'update', row)
+    },
+    del(row) {
+      this.$confirm(
+        '确定要删除吗？',
+        '确认操作',
+        {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }
+      ).then(() => {
+        deleteAreaPersonliable(row.id).then(response => {
+          if (response.code === 200) {
+            this.$message.success('删除成功')
+            this.fetchData()
+          }
+        })
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  $tableTitleHeight:46px;
+  .table{
+    margin-bottom: 20px;
+  }
+  .table-container{
+    margin: 20px;
+  }
+  .table-title{
+    background-color:rgba(243, 243, 243, 1);
+    height: $tableTitleHeight;
+    .title-header{
+      line-height:$tableTitleHeight;
+      color: #606266;
+      font-size: 15px;
+      i{
+        margin-left: 5px;
+        margin-right: 5px;
+      }
+    }
+  }
+  .edit_btns{
+    .edit_btn{
+      float:right;
+      margin:7px 3px;//为了需要居中显示margin-top和bottom要用$tableTitleHeight减去按钮原高度除以2
+    }
+  }
+  .table-button{
+    padding: 10px;
+    height: 23px;
+  }
+</style>

diff --git a/src/api/busAdmin/areaPersonliable.js b/src/api/busAdmin/areaPersonliable.js
new file mode 100644
index 0000000..58737bb
--- /dev/null
+++ b/src/api/busAdmin/areaPersonliable.js
@@ -0,0 +1,45 @@
+import request from '@/utils/request'
+
+export function getAreaPersonliableList(params) {
+  return request({
+    url: '/areaPersonliable/listPage',
+    method: 'get',
+    params
+  })
+}
+
+export function addAreaPersonliable(params) {
+  return request({
+    url: '/areaPersonliable/add',
+    method: 'post',
+    params
+  })
+}
+
+export function updateAreaPersonliable(params) {
+  return request({
+    url: '/areaPersonliable/update',
+    method: 'post',
+    params
+  })
+}
+
+export function deleteAreaPersonliable(id) {
+  return request({
+    url: '/areaPersonliable/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+export function getSupervisorList() {
+  return request({
+    url: '/mgr/simplelist',
+    method: 'post',
+    params: {
+      roleTips: 'supervisor'
+    }
+  })
+}
diff --git a/src/api/callCase/callCase.js b/src/api/callCase/callCase.js
new file mode 100644
index 0000000..7500fc7
--- /dev/null
+++ b/src/api/callCase/callCase.js
@@ -0,0 +1,87 @@
+/**
+ * 新建案卷的接口
+ */
+import request from '@/utils/request'
+
+// 获取案卷信息来源
+export function getCaseSource(params) {
+  return request({
+    url: 'dict/code/caseSource',
+    method: 'get',
+    params
+  })
+}
+
+// 获取案卷等级
+export function getCaseLevel(params) {
+  return request({
+    url: 'dict/code/caseLevel',
+    method: 'get',
+    params
+  })
+}
+
+// 获取案卷类别
+export function getCaseEorC(params) {
+  return request({
+    url: 'dict/code/eorc',
+    method: 'get',
+    params
+  })
+}
+
+// 根据案卷类别获取案卷大类
+export function getCaseType(eorc) {
+  return request({
+    url: 'case/type/list',
+    method: 'get',
+    params: {
+      eorc: eorc
+    }
+  })
+}
+
+// 根据案卷大类获取案卷小类
+export function getCaseDetailType(caseTypeId) {
+  return request({
+    url: 'case/typeDetail/list',
+    method: 'get',
+    params: {
+      typeId: caseTypeId
+    }
+  })
+}
+
+// 根据案卷小类获取结案标准
+export function getCaseTypesTime(caseTypeDetailId) {
+  return request({
+    url: 'case/typesTime/list',
+    method: 'get',
+    params: {
+      detailId: caseTypeDetailId
+    }
+  })
+}
+
+// 获取监督员列表
+export function getVerifyPerson(params) {
+  return request({
+    url: 'mgr/simplelist',
+    method: 'post',
+    params: {
+      roleTips: 'supervisor'
+    }
+  })
+}
+
+// 新增案卷
+export function addCase(params) {
+  return request({
+    url: 'case/add',
+    method: 'post',
+    headers: {
+      'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
+    },
+    params
+  })
+}
diff --git a/src/api/coorBusiness/case.js b/src/api/coorBusiness/case.js
index ec5a88a..08c3a13 100644
--- a/src/api/coorBusiness/case.js
+++ b/src/api/coorBusiness/case.js
@@ -110,9 +110,10 @@
   })
 }
 
+// 待处理
 export function toHandleListPage(params) {
   return request({
-    url: 'case/toHandleListPage/',
+    url: 'case/toProcessListPage/',
     method: 'get',
     params
   })
@@ -158,9 +159,10 @@
   })
 }
 
+// 待核查
 export function toCheckListPage(params) {
   return request({
-    url: 'case/toCheckListPage/',
+    url: 'case/toDisCheckListPage/',
     method: 'get',
     params
   })
diff --git a/src/components/CaseCommon/caseDetail.vue b/src/components/CaseCommon/caseDetail.vue
index f6c23ab..fdadcba 100644
--- a/src/components/CaseCommon/caseDetail.vue
+++ b/src/components/CaseCommon/caseDetail.vue
@@ -276,7 +276,7 @@
     </el-row>
     <el-row>
       <div class="title">数据流转:</div>
-      <el-table :data="recordList" :header-cell-style="{background:'#f3f3f3'}" class="table" border>
+      <el-table :data="recordList" :header-cell-style="{background:'#f3f3f3'}" max-height="400" class="table" border>
         <el-table-column prop="operationTypeName" label="操作" align="center"/>
         <el-table-column prop="deptName" label="单位" align="center"/>
         <el-table-column prop="userName" label="人员" align="center"/>
@@ -293,7 +293,7 @@
       :append-to-body="true"
       title="位置详情"
     >
-      <arc-gis-map :longitude="Number(caseDetail.lng)" :latitude="Number(caseDetail.lat)"/>
+      <arc-gis-map-read :longitude="Number(caseDetail.lng)" :latitude="Number(caseDetail.lat)"/>
     </el-dialog>
   </div>
 </template>
@@ -303,12 +303,12 @@
 import { getCaseDetail, getUserList, getDeptList, getCaseTypeList, getCaseTypeDetailList, getCaseTypeTimes } from '@/api/coorBusiness/case'
 import { getCommonLanguage, getFilingTypeList, getCaseLevelList } from '@/api/coorBusiness/dict'
 import { historicalRecords, nextNodes, completeCaseTask } from '@/api/coorBusiness/process'
-import ArcGisMap from '@/components/Map/arcgisMap'
+import ArcGisMapRead from '@/components/Map/arcgisMapRead'
 import { radioMap } from './radioMap'
 
 export default {
   name: 'CaseDetail',
-  components: { ArcGisMap },
+  components: { ArcGisMapRead },
   // props: {
   //   id: {
   //     type: String,
@@ -334,7 +334,6 @@
       showNeedVisit: false,
       caseDetail: {},
       operationKey: '', // 案件处理按钮key
-      imgurl: 'http:\\\\192.168.8.201:8083\\static\\',
       fileIdVerify: [], // 核实照片id
       fileIdProcess: [], // 处理照片id
       fileIdCheck: [], // 核查照片id
@@ -358,10 +357,12 @@
   computed: {
     isNeedVisit: function() {
       return this.caseDetail.isNeedRevisit === 1 ? '需要回访' : '不需要回访'
+    },
+    imgurl() {
+      return process.env.BASE_API + '/static/'
     }
   },
-  mounted() {
-    console.log('case dtial')
+  created() {
     this.id = this.$route.query.id
     this.showProcess = (this.$route.query.showProcess || this.$route.query.showProcess === false) ? this.$route.query.showProcess : true
     this.showNeedVisit = this.$route.query.showNeedVisit ? this.$route.query.showNeedVisit : false
@@ -371,7 +372,6 @@
     async initData() {
       // 查询案件详情接口
       const resDetail = await getCaseDetail(this.id)
-      console.log('detail', resDetail)
       this.caseDetail = resDetail.data[0]
 
       // 解析图片id
@@ -391,9 +391,11 @@
 
       // 查询流转记录接口
       this.processForm.processId = this.caseDetail.processId
-      const resRecord = await historicalRecords(this.processForm.processId)
-      this.recordList = resRecord.data
-      console.log(this.recordList)
+      // const resRecord = historicalRecords(this.processForm.processId)
+      // this.recordList = resRecord.data
+      historicalRecords(this.processForm.processId).then(res => {
+        this.recordList = res.data
+      })
 
       if (this.showProcess) {
         this.initProcess()
@@ -701,6 +703,7 @@
   .table{
     margin: 20px;
     width: 98%;
+    // max-height: 250px;
   }
   .title{
     margin-left: 38px;
diff --git a/src/components/CaseCommon/caseDetailRead.vue b/src/components/CaseCommon/caseDetailRead.vue
index 82066db..a4e87b0 100644
--- a/src/components/CaseCommon/caseDetailRead.vue
+++ b/src/components/CaseCommon/caseDetailRead.vue
@@ -158,11 +158,11 @@
 
 <script>
 import { getCaseDetail } from '@/api/coorBusiness/case'
-import ArcGisMap from '@/components/Map/arcgisMap'
+import ArcGisMapRead from '@/components/Map/arcgisMapRead'
 
 export default {
   name: 'CaseDetail',
-  components: { ArcGisMap },
+  components: { ArcGisMapRead },
   props: {
     id: {
       type: String,
diff --git a/src/components/Map/ArcGISConfig.js b/src/components/Map/ArcGISConfig.js
index d325da9..50cea3b 100644
--- a/src/components/Map/ArcGISConfig.js
+++ b/src/components/Map/ArcGISConfig.js
@@ -1,14 +1,16 @@
 export const mapConfig = {
-  apiUrl: 'https://js.arcgis.com/4.13/', // 暂时使用管网提供的api，实际部署时建议离线部署一套
+  apiUrl: 'http://192.168.8.205/arcgis_js_api/library/4.12/init.js', // 暂时使用管网提供的api，实际部署时建议离线部署一套
+  // apiUrl: 'https://js.arcgis.com/4.13/',
   mapIp: '223.84.218.107', // 服务ip
   mapPort: '6080', // 服务端口
-  serverBase: 'http://223.84.218.107:6080/arcgis/rest/services/', // 服务地址前缀
+  serverBase: 'http://192.168.8.205:6080/arcgis/rest/services/', // 服务地址前缀
+  // serverBase: 'http://223.84.218.107:6080/arcgis/rest/services/dx/',
   mapCenter: '[116.597,28.24]' // 地图中心点
 }
 
 export const serverConfig = {
-  mapUrlBase: mapConfig.serverBase + 'dx/2w/MapServer', // 底图服务地址
-  mapUrlBj: mapConfig.serverBase + 'dx/dxbj/MapServer', // 部件服务地址
-  mapUrlBjfc: mapConfig.serverBase + 'dx/bjfc/MapServer', // 部件分层服务地址
-  mapUrlBjEdit: mapConfig.serverBase + 'dx/dxbj/FeatureServer' // 可编辑的部件图层
+  mapUrlBase: mapConfig.serverBase + '2w/MapServer', // 底图服务地址
+  mapUrlBj: mapConfig.serverBase + 'dxbj/MapServer', // 部件服务地址
+  mapUrlBjfc: mapConfig.serverBase + 'bjfc/MapServer', // 部件分层服务地址
+  mapUrlBjEdit: mapConfig.serverBase + 'dxbj/FeatureServer' // 可编辑的部件图层
 }
diff --git a/src/components/Map/arcgisMap.vue b/src/components/Map/arcgisMap.vue
index 53776f1..5c15383 100644
--- a/src/components/Map/arcgisMap.vue
+++ b/src/components/Map/arcgisMap.vue
@@ -1,6 +1,6 @@
 <template>
-  <div style="margin-top:-30px">
-    <!-- <el-row :gutter="20">
+  <div>
+    <el-row :gutter="20">
       <el-col :span="4">
         <el-input v-model="keywords" size="small" type="text" placeholder="兴趣点关键字" clearable />
       </el-col>
@@ -31,9 +31,9 @@
       <el-col v-if="queryEventSwitch === '1'" :span="8" style="text-align: right;">
         <el-button type="primary" size="small" @click="checkEventPoint"> 事件提交 </el-button>
       </el-col>
-    </el-row> -->
+    </el-row>
 
-    <div v-loading="mapLoading" ref="mapDiv" class="baseMap" />
+    <div ref="mapDiv" class="baseMap" />
   </div>
 </template>
 
@@ -45,22 +45,12 @@
   url: mapConfig.apiUrl
 }
 
-// const eventPointLayerId = 'eventPointLayer' // 事件定位点的图层id
-// const queryResultLayerId = 'queryResultLayer' // 兴趣点查询结果点集的图层id
+const eventPointLayerId = 'eventPointLayer' // 事件定位点的图层id
+const queryResultLayerId = 'queryResultLayer' // 兴趣点查询结果点集的图层id
 const caseLayerId = 'addedGeometryLayerId' // 案卷点图层
 
 export default {
-  name: 'ArcGisMap',
-  props: {
-    longitude: {
-      type: Number,
-      default: 116.5937
-    },
-    latitude: {
-      type: Number,
-      default: 28.249
-    }
-  },
+  name: 'ArcGISMap',
   data() {
     return {
       map: '',
@@ -89,19 +79,18 @@
         IdentifyParameters: '',
         MapView: ''
       },
-      mapLoading: false
-      // keywords: '', // 查询关键字
-      // showEventPointPopup: true, // 是否显示事部件的popup
-      // queryEventSwitch: '1', // 1==查询事件；0==查询部件
-      // compListOpts: [], // 部件选择下拉框option
+      keywords: '', // 查询关键字
+      showEventPointPopup: true, // 是否显示事部件的popup
+      queryEventSwitch: '1', // 1==查询事件；0==查询部件
+      compListOpts: [], // 部件选择下拉框option
       // 主页面返回值
-      // longitude: '', // 定位点经度
-      // latitude: '' // 定位点纬度
-      // communityId: '', // 社区ID
-      // communityName: '', // 社区名称
-      // gridId: '', // 单元网格ID
-      // componentId: '', // 部件ID
-      // componentName: '' // 部件名称/=
+      longitude: '', // 定位点经度
+      latitude: '', // 定位点纬度
+      communityId: '', // 社区ID
+      communityName: '', // 社区名称
+      gridId: '', // 单元网格ID
+      componentId: '', // 部件ID
+      componentName: '' // 部件名称
     }
   },
   mounted() {
@@ -110,7 +99,6 @@
   methods: {
     // 初始化ArcGIS API对象
     importEsri: function() {
-      this.mapLoading = true
       loadModules([
         'esri/Map',
         'esri/Basemap',
@@ -164,10 +152,8 @@
 
           // 初始化地图
           this.initMap()
-          this.mapLoading = false
         }).catch(err => {
           console.log(err)
-          this.mapLoading = false
         })
     },
     // 初始化地图
@@ -194,139 +180,139 @@
         zoom: 3 // 当前地图缩放等级
       })
 
-      // const that = this
-      // this.view.on('click', function(event) {
-      //   // 清除地图上已有的事件/部件查询点
-      //   that.clearEOrCPoint()
+      const that = this
+      this.view.on('click', function(event) {
+        // 清除地图上已有的事件/部件查询点
+        that.clearEOrCPoint()
 
-      //   const lon = event.mapPoint.longitude
-      //   const lat = event.mapPoint.latitude
+        const lon = event.mapPoint.longitude
+        const lat = event.mapPoint.latitude
 
-      //   if (that.showEventPointPopup) {
-      //     // 添加点
-      //     const gLayer = new that.esriObj.GraphicsLayer()
-      //     const marker = new that.esriObj.SimpleMarkerSymbol()
-      //     marker.color = '#35A0E7'
-      //     marker.style = 'square'
-      //     marker.outline = {
-      //       color: [128, 128, 128, 0.5],
-      //       width: '2px'
-      //     }
-      //     const graphic = new that.esriObj.Graphic({
-      //       geometry: event.mapPoint,
-      //       symbol: marker
-      //     })
+        if (that.showEventPointPopup) {
+          // 添加点
+          const gLayer = new that.esriObj.GraphicsLayer()
+          const marker = new that.esriObj.SimpleMarkerSymbol()
+          marker.color = '#35A0E7'
+          marker.style = 'square'
+          marker.outline = {
+            color: [128, 128, 128, 0.5],
+            width: '2px'
+          }
+          const graphic = new that.esriObj.Graphic({
+            geometry: event.mapPoint,
+            symbol: marker
+          })
 
-      //     gLayer.id = eventPointLayerId
-      //     gLayer.add(graphic)
-      //     that.map.add(gLayer)
+          gLayer.id = eventPointLayerId
+          gLayer.add(graphic)
+          that.map.add(gLayer)
 
-      //     // 查询事件或者部件
-      //     if (that.queryEventSwitch === '1') {
-      //       // 事件定位
-      //       // 1查询底图得到所在网格与所在社区
-      //       const query = that.layers.dx2wGrid.createQuery()
-      //       query.geometry = that.view.toMap(event)
-      //       query.distance = 10
-      //       query.units = 'meters'
-      //       query.returnGeometry = true
-      //       query.outFields = ['BGID', 'COMMUID', 'COMMUNAME']
-      //       that.layers.dx2wGrid.queryFeatures(query)
-      //         .then(function(response) {
-      //           const result = response.features[0].attributes
+          // 查询事件或者部件
+          if (that.queryEventSwitch === '1') {
+            // 事件定位
+            // 1查询底图得到所在网格与所在社区
+            const query = that.layers.dx2wGrid.createQuery()
+            query.geometry = that.view.toMap(event)
+            query.distance = 10
+            query.units = 'meters'
+            query.returnGeometry = true
+            query.outFields = ['BGID', 'COMMUID', 'COMMUNAME']
+            that.layers.dx2wGrid.queryFeatures(query)
+              .then(function(response) {
+                const result = response.features[0].attributes
 
-      //           // 赋值
-      //           that.longitude = lon
-      //           that.latitude = lat
-      //           that.gridId = result.BGID
-      //           that.communityId = result.COMMUID
-      //           that.communityName = result.COMMUNAME
+                // 赋值
+                that.longitude = lon
+                that.latitude = lat
+                that.gridId = result.BGID
+                that.communityId = result.COMMUID
+                that.communityName = result.COMMUNAME
 
-      //           // 2弹出气泡
-      //           that.view.popup.open({
-      //             title: '事件定位',
-      //             content: '坐标：[' + lon.toFixed(4) + ', ' + lat.toFixed(4) + ']' + '<p>' + '所在社区：' + result.COMMUNAME,
-      //             location: event.mapPoint
-      //           })
-      //         })
-      //     } else if (that.queryEventSwitch === '0') {
-      //       // 部件定位
-      //       const queryDev = that.layers.dxbjPoint.createQuery()
-      //       // 定义查询的圆形范围，半径5米
-      //       const circle = new that.esriObj.Circle({
-      //         center: event.mapPoint,
-      //         radius: 5,
-      //         radiusUnit: 'meters'
-      //       })
-      //       queryDev.geometry = circle
-      //       queryDev.returnGeometry = true
-      //       queryDev.outFields = ['BGID', 'OBJID', 'OBJNAME', 'OBJPOS']
-      //       that.layers.dxbjPoint.queryFeatures(queryDev)
-      //         .then(function(response) {
-      //           if (response.features.length > 0) {
-      //             const results = response.features
+                // 2弹出气泡
+                that.view.popup.open({
+                  title: '事件定位',
+                  content: '坐标：[' + lon.toFixed(4) + ', ' + lat.toFixed(4) + ']' + '<p>' + '所在社区：' + result.COMMUNAME,
+                  location: event.mapPoint
+                })
+              })
+          } else if (that.queryEventSwitch === '0') {
+            // 部件定位
+            const queryDev = that.layers.dxbjPoint.createQuery()
+            // 定义查询的圆形范围，半径5米
+            const circle = new that.esriObj.Circle({
+              center: event.mapPoint,
+              radius: 5,
+              radiusUnit: 'meters'
+            })
+            queryDev.geometry = circle
+            queryDev.returnGeometry = true
+            queryDev.outFields = ['BGID', 'OBJID', 'OBJNAME', 'OBJPOS']
+            that.layers.dxbjPoint.queryFeatures(queryDev)
+              .then(function(response) {
+                if (response.features.length > 0) {
+                  const results = response.features
 
-      //             that.compListOpts = []
+                  that.compListOpts = []
 
-      //             let content = ''
-      //             results.forEach((item, index) => {
-      //               content += '<p>部件' + (index + 1) + '：' + item.attributes.OBJNAME + '，' + item.attributes.OBJPOS
-      //               const comp = {}
-      //               comp.name = '部件' + (index + 1) + '：' + item.attributes.OBJNAME
-      //               comp.value = item.attributes.OBJID
-      //               that.compListOpts.push(comp)
-      //             })
+                  let content = ''
+                  results.forEach((item, index) => {
+                    content += '<p>部件' + (index + 1) + '：' + item.attributes.OBJNAME + '，' + item.attributes.OBJPOS
+                    const comp = {}
+                    comp.name = '部件' + (index + 1) + '：' + item.attributes.OBJNAME
+                    comp.value = item.attributes.OBJID
+                    that.compListOpts.push(comp)
+                  })
 
-      //             // 2弹出气泡
-      //             that.view.popup.open({
-      //               title: '部件定位',
-      //               content: '坐标：[' + lon.toFixed(4) + ', ' + lat.toFixed(4) + ']，附近5米的部件有：' + content,
-      //               location: event.mapPoint
-      //             })
+                  // 2弹出气泡
+                  that.view.popup.open({
+                    title: '部件定位',
+                    content: '坐标：[' + lon.toFixed(4) + ', ' + lat.toFixed(4) + ']，附近5米的部件有：' + content,
+                    location: event.mapPoint
+                  })
 
-      //             // 查询所在社区和单元网格
-      //             const queryPos = that.layers.dx2wGrid.createQuery()
-      //             queryPos.geometry = that.view.toMap(event)
-      //             queryPos.returnGeometry = true
-      //             queryPos.outFields = ['BGID', 'COMMUID', 'COMMUNAME']
-      //             that.layers.dx2wGrid.queryFeatures(queryPos)
-      //               .then(function(response) {
-      //                 const result = response.features[0].attributes
+                  // 查询所在社区和单元网格
+                  const queryPos = that.layers.dx2wGrid.createQuery()
+                  queryPos.geometry = that.view.toMap(event)
+                  queryPos.returnGeometry = true
+                  queryPos.outFields = ['BGID', 'COMMUID', 'COMMUNAME']
+                  that.layers.dx2wGrid.queryFeatures(queryPos)
+                    .then(function(response) {
+                      const result = response.features[0].attributes
 
-      //                 // 赋值
-      //                 that.longitude = lon
-      //                 that.latitude = lat
-      //                 that.gridId = result.BGID
-      //                 that.communityId = result.COMMUID
-      //                 that.communityName = result.COMMUNAME
-      //               })
-      //           } else {
-      //             that.$message({
-      //               message: '没有查询到部件，请重新定位',
-      //               type: 'warning'
-      //             })
-      //           }
-      //         })
-      //     }
-      //   } else {
-      //     that.view.hitTest(event).then(function(response) {
-      //       if (response.results.length) {
-      //         const graphic = response.results[0].graphic
-      //         const name = graphic.attributes.KEYWORD
-      //         const address = graphic.attributes.OBJPOS
+                      // 赋值
+                      that.longitude = lon
+                      that.latitude = lat
+                      that.gridId = result.BGID
+                      that.communityId = result.COMMUID
+                      that.communityName = result.COMMUNAME
+                    })
+                } else {
+                  that.$message({
+                    message: '没有查询到部件，请重新定位',
+                    type: 'warning'
+                  })
+                }
+              })
+          }
+        } else {
+          that.view.hitTest(event).then(function(response) {
+            if (response.results.length) {
+              const graphic = response.results[0].graphic
+              const name = graphic.attributes.KEYWORD
+              const address = graphic.attributes.OBJPOS
 
-      //         that.view.popup.open({
-      //           title: name,
-      //           content: address,
-      //           location: event.mapPoint
-      //         })
-      //       }
-      //     })
-      //   }
-      // })
+              that.view.popup.open({
+                title: name,
+                content: address,
+                location: event.mapPoint
+              })
+            }
+          })
+        }
+      })
 
       this.addBjLayers()
-      this.addCasePointOnMap(this.longitude, this.latitude)
+      // this.addCasePointOnMap(116.5937, 28.249)
     },
     // 加载部件服务的各图层
     addBjLayers: function() {
@@ -347,160 +333,159 @@
         url: serverConfig.mapUrlBj + '/3',
         id: 'dxbjMph'
       })
-      // this.layers.dx2wGrid = new this.esriObj.FeatureLayer({
-      //   url: serverConfig.mapUrlBase + '/6',
-      //   id: 'gridLayer'
-      // })
+      this.layers.dx2wGrid = new this.esriObj.FeatureLayer({
+        url: serverConfig.mapUrlBase + '/1',
+        id: 'gridLayer'
+      })
 
       // 加载各图层
       this.map.add(this.layers.dxbjPoint)
       this.map.add(this.layers.dxbjLine)
       this.map.add(this.layers.dxbjXqd)
       this.map.add(this.layers.dxbjMph)
-      // this.map.add(this.layers.dx2wGrid)
+      this.map.add(this.layers.dx2wGrid)
     },
     // 在兴趣点图层查询关键字
-    // queryOnMap: function() {
-    //   const points = [] // 查询结果点集
+    queryOnMap: function() {
+      const points = [] // 查询结果点集
 
-    //   this.clearQueryResults()
-    //   this.clearEOrCPoint()
-    //   this.showEventPointPopup = false
-    //   this.queryEventSwitch = '2'
+      this.clearQueryResults()
+      this.clearEOrCPoint()
+      this.showEventPointPopup = false
+      this.queryEventSwitch = '2'
 
-    //   // 查询条件
-    //   const query = new this.esriObj.Query()
-    //   query.returnGeometry = true
-    //   query.outFields = ['*']
-    //   query.where = 'NAME like ' + "'%" + this.keywords + "%'"
-    //   const that = this
+      // 查询条件
+      const query = new this.esriObj.Query()
+      query.returnGeometry = true
+      query.outFields = ['*']
+      query.where = 'NAME like ' + "'%" + this.keywords + "%'"
+      const that = this
 
-    //   this.layers.dxbjXqd.queryFeatures(query).then(function(results) {
-    //     results.features.forEach(item => {
-    //       const point = {}
-    //       point.x = item.geometry.longitude
-    //       point.y = item.geometry.latitude
-    //       point.attr = item.attributes
-    //       points.push(point)
-    //     })
+      this.layers.dxbjXqd.queryFeatures(query).then(function(results) {
+        results.features.forEach(item => {
+          const point = {}
+          point.x = item.geometry.longitude
+          point.y = item.geometry.latitude
+          point.attr = item.attributes
+          points.push(point)
+        })
 
-    //     // 提示查询结果
-    //     if (points.length > 0) {
-    //       that.$message({
-    //         message: '成功查询到' + points.length + '条记录',
-    //         type: 'success'
-    //       })
+        // 提示查询结果
+        if (points.length > 0) {
+          that.$message({
+            message: '成功查询到' + points.length + '条记录',
+            type: 'success'
+          })
 
-    //       // 绘制点
-    //       that.addSimpleMarkerOnMap(points)
-    //     } else {
-    //       that.$message({
-    //         message: '没有查询到结果，请重新输入关键字',
-    //         type: 'warning'
-    //       })
-    //     }
-    //   })
-    // },
+          // 绘制点
+          that.addSimpleMarkerOnMap(points)
+        } else {
+          that.$message({
+            message: '没有查询到结果，请重新输入关键字',
+            type: 'warning'
+          })
+        }
+      })
+    },
     // 清除图层上的查询结果
-    // clearQueryResults: function() {
-    //   this.map.layers.forEach(layer => {
-    //     if (layer.type === 'graphics' && layer.id === queryResultLayerId) {
-    //       layer.graphics.removeAll()
-    //       return false
-    //     }
-    //   })
-    // },
-    // // 清除图层上的查询结果
-    // clearMap: function() {
-    //   // 清除地图上绘制的graphic图层
-    //   this.map.layers.forEach(layer => {
-    //     if (layer.type === 'graphics') {
-    //       layer.graphics.removeAll()
-    //       return false
-    //     }
-    //   })
+    clearQueryResults: function() {
+      this.map.layers.forEach(layer => {
+        if (layer.type === 'graphics' && layer.id === queryResultLayerId) {
+          layer.graphics.removeAll()
+          return false
+        }
+      })
+    },
+    // 清除图层上的查询结果
+    clearMap: function() {
+      // 清除地图上绘制的graphic图层
+      this.map.layers.forEach(layer => {
+        if (layer.type === 'graphics') {
+          layer.graphics.removeAll()
+          return false
+        }
+      })
 
-    //   // 清除弹出框
-    //   this.view.popup.close()
+      // 清除弹出框
+      this.view.popup.close()
 
-    //   // 清除data属性值
-    //   this.keywords = ''
-    //   this.showEventPointPopup = true // 是否显示事部件的popup
-    //   this.queryEventSwitch = '1' // 1==查询事件；0==查询部件
-    //   this.compListOpts = [] // 部件选择下拉框option
-    //   this.longitude = '' // 定位点经度
-    //   this.latitude = '' // 定位点纬度
-    //   this.communityId = '' // 社区ID
-    //   this.communityName = '' // 社区名称
-    //   this.gridId = '' // 单元网格ID
-    //   this.componentId = '' // 部件ID
-    //   this.componentName = '' // 部件名称
-    // },
+      // 清除data属性值
+      this.keywords = ''
+      this.showEventPointPopup = true // 是否显示事部件的popup
+      this.queryEventSwitch = '1' // 1==查询事件；0==查询部件
+      this.compListOpts = [] // 部件选择下拉框option
+      this.longitude = '' // 定位点经度
+      this.latitude = '' // 定位点纬度
+      this.communityId = '' // 社区ID
+      this.communityName = '' // 社区名称
+      this.gridId = '' // 单元网格ID
+      this.componentId = '' // 部件ID
+      this.componentName = '' // 部件名称
+    },
     // 清除图层上的事件定位点
-    // clearEOrCPoint: function() {
-    //   this.map.layers.forEach(layer => {
-    //     if (layer.type === 'graphics' && layer.id === eventPointLayerId) {
-    //       layer.graphics.removeAll()
-    //       return false
-    //     }
-    //   })
-    //   // 清除弹出框
-    //   this.view.popup.close()
-    // },
+    clearEOrCPoint: function() {
+      this.map.layers.forEach(layer => {
+        if (layer.type === 'graphics' && layer.id === eventPointLayerId) {
+          layer.graphics.removeAll()
+          return false
+        }
+      })
+      // 清除弹出框
+      this.view.popup.close()
+    },
     // 切换
-    // switchEventOrComponent: function() {
-    //   // 如果选中的是事件定位（1）或部件定位（0），点击地图时弹出事件或者部件的popup；否则（2以上）显示兴趣点结果的属性popup
-    //   this.showEventPointPopup = this.queryEventSwitch < 2
-    // },
+    switchEventOrComponent: function() {
+      // 如果选中的是事件定位（1）或部件定位（0），点击地图时弹出事件或者部件的popup；否则（2以上）显示兴趣点结果的属性popup
+      this.showEventPointPopup = this.queryEventSwitch < 2
+    },
     // 将查询结果点集合绘制在地图上
-    // addSimpleMarkerOnMap: function(points) {
-    //   const gLayer = new this.esriObj.GraphicsLayer()
-    //   points.forEach(item => {
-    //     const point = new this.esriObj.Point(item.x, item.y, item.attr)
-    //     const marker = new this.esriObj.SimpleMarkerSymbol()
-    //     marker.color = '#F9690E'
-    //     marker.outline = {
-    //       color: [128, 128, 128, 0.5],
-    //       width: '2px'
-    //     }
-    //     const graphic = new this.esriObj.Graphic({
-    //       geometry: point,
-    //       symbol: marker,
-    //       attributes: item.attr
-    //     })
-    //     gLayer.id = queryResultLayerId
-    //     gLayer.add(graphic)
-    //   })
-    //   this.map.add(gLayer)
-    // },
+    addSimpleMarkerOnMap: function(points) {
+      const gLayer = new this.esriObj.GraphicsLayer()
+      points.forEach(item => {
+        const point = new this.esriObj.Point(item.x, item.y, item.attr)
+        const marker = new this.esriObj.SimpleMarkerSymbol()
+        marker.color = '#F9690E'
+        marker.outline = {
+          color: [128, 128, 128, 0.5],
+          width: '2px'
+        }
+        const graphic = new this.esriObj.Graphic({
+          geometry: point,
+          symbol: marker,
+          attributes: item.attr
+        })
+        gLayer.id = queryResultLayerId
+        gLayer.add(graphic)
+      })
+      this.map.add(gLayer)
+    },
     // 返回事件定位的结果
-    // checkEventPoint: function() {
-    //   this.$emit(
-    //     'closeMapQueryDialogByEvent',
-    //     this.longitude,
-    //     this.latitude,
-    //     this.communityId,
-    //     this.communityName,
-    //     this.gridId)
+    checkEventPoint: function() {
+      this.$emit(
+        'closeMapQueryDialogByEvent',
+        this.longitude,
+        this.latitude,
+        this.communityId,
+        this.communityName,
+        this.gridId)
 
-    //   this.clearMap()
-    // },
-    // // 返回部件定位的结果
-    // checkComponentPoint: function() {
-    //   this.$emit(
-    //     'closeMapQueryDialogByComp',
-    //     this.longitude,
-    //     this.latitude,
-    //     this.communityId,
-    //     this.communityName,
-    //     this.gridId,
-    //     this.componentId)
+      this.clearMap()
+    },
+    // 返回部件定位的结果
+    checkComponentPoint: function() {
+      this.$emit(
+        'closeMapQueryDialogByComp',
+        this.longitude,
+        this.latitude,
+        this.communityId,
+        this.communityName,
+        this.gridId,
+        this.componentId)
 
-    //   this.clearMap()
-    // },
+      this.clearMap()
+    },
     // 在地图上添加指定坐标的点
     addCasePointOnMap: function(lng, lat) {
-      console.log('addCasePointOnMap', lng, lat)
       const gLayer = new this.esriObj.GraphicsLayer() // 添加自定义绘制点的图层
       const point = new this.esriObj.Point(lng, lat) // 创建geometry对象
       const marker = new this.esriObj.SimpleMarkerSymbol() // 创建marker标识
@@ -521,14 +506,14 @@
 
       // 重新设置地图中心点并移动
       this.view.center = point
-      this.view.goTo(point)
+      this.view.goTo()
     }
   }
 }
 </script>
 
 <style scoped>
-  @import 'https://js.arcgis.com/4.13/esri/css/main.css';
+  @import 'http://192.168.8.205/arcgis_js_api/library/4.12/esri/css/main.css';
   .baseMap {
     height:60vh;
     width: 100%;
diff --git a/src/components/Map/arcgisMapRead.vue b/src/components/Map/arcgisMapRead.vue
new file mode 100644
index 0000000..ae2058b
--- /dev/null
+++ b/src/components/Map/arcgisMapRead.vue
@@ -0,0 +1,539 @@
+<template>
+  <div style="margin-top:-30px">
+    <!-- <el-row :gutter="20">
+      <el-col :span="4">
+        <el-input v-model="keywords" size="small" type="text" placeholder="兴趣点关键字" clearable />
+      </el-col>
+      <el-col :span="4">
+        <el-button type="primary" size="small" @click="queryOnMap">查询</el-button>
+        <el-button type="info" size="small" @click="clearMap"> 清除地图 </el-button>
+      </el-col>
+
+      <el-col :span="8" style="text-align: center;">
+        <el-radio-group v-model="queryEventSwitch" size="small" @change="switchEventOrComponent">
+          <el-radio-button label="1">事件定位</el-radio-button>
+          <el-radio-button label="0">部件定位</el-radio-button>
+          <el-radio-button label="2">兴趣点属性</el-radio-button>
+        </el-radio-group>
+      </el-col>
+
+      <el-col v-if="queryEventSwitch === '0'" :span="8" style="text-align: right;">
+        <el-select v-model="componentId" placeholder="选择部件" clearable value="" size="small">
+          <el-option
+            v-for="item in compListOpts"
+            :key="item.value"
+            :label="item.name"
+            :value="item.value"/>
+        </el-select>
+        <el-button type="primary" size="small" @click="checkComponentPoint"> 部件提交 </el-button>
+      </el-col>
+
+      <el-col v-if="queryEventSwitch === '1'" :span="8" style="text-align: right;">
+        <el-button type="primary" size="small" @click="checkEventPoint"> 事件提交 </el-button>
+      </el-col>
+    </el-row> -->
+
+    <div v-loading="mapLoading" ref="mapDiv" class="baseMap" />
+  </div>
+</template>
+
+<script>
+import { loadModules } from 'esri-loader'
+import { mapConfig, serverConfig } from './ArcGISConfig'
+
+const option = {
+  url: mapConfig.apiUrl
+}
+
+// const eventPointLayerId = 'eventPointLayer' // 事件定位点的图层id
+// const queryResultLayerId = 'queryResultLayer' // 兴趣点查询结果点集的图层id
+const caseLayerId = 'addedGeometryLayerId' // 案卷点图层
+
+export default {
+  name: 'ArcGisMapRead',
+  props: {
+    longitude: {
+      type: Number,
+      default: 116.5937
+    },
+    latitude: {
+      type: Number,
+      default: 28.249
+    }
+  },
+  data() {
+    return {
+      map: '',
+      view: '',
+      layers: {
+        dxbjPoint: '', // 部件点图层
+        dxbjLine: '', // 部件线图层
+        dxbjXqd: '', // 兴趣点图层
+        dxbjMph: '', // 门牌好图层
+        dx2wGrid: '' // 单元网格图层
+      },
+      esriObj: {
+        Map: '',
+        BaseMap: '',
+        Graphic: '',
+        PopupTemplate: '',
+        Circle: '',
+        Point: '',
+        FeatureLayer: '',
+        GraphicsLayer: '',
+        TileLayer: '',
+        SimpleMarkerSymbol: '',
+        Query: '',
+        QueryTask: '',
+        IdentifyTask: '',
+        IdentifyParameters: '',
+        MapView: ''
+      },
+      mapLoading: false
+      // keywords: '', // 查询关键字
+      // showEventPointPopup: true, // 是否显示事部件的popup
+      // queryEventSwitch: '1', // 1==查询事件；0==查询部件
+      // compListOpts: [], // 部件选择下拉框option
+      // 主页面返回值
+      // longitude: '', // 定位点经度
+      // latitude: '' // 定位点纬度
+      // communityId: '', // 社区ID
+      // communityName: '', // 社区名称
+      // gridId: '', // 单元网格ID
+      // componentId: '', // 部件ID
+      // componentName: '' // 部件名称/=
+    }
+  },
+  mounted() {
+    this.importEsri()
+  },
+  methods: {
+    // 初始化ArcGIS API对象
+    importEsri: function() {
+      this.mapLoading = true
+      loadModules([
+        'esri/Map',
+        'esri/Basemap',
+        'esri/Graphic',
+        'esri/PopupTemplate',
+        'esri/geometry/Circle',
+        'esri/geometry/Point',
+        'esri/layers/FeatureLayer',
+        'esri/layers/GraphicsLayer',
+        'esri/layers/TileLayer',
+        'esri/symbols/SimpleMarkerSymbol',
+        'esri/tasks/support/Query',
+        'esri/tasks/QueryTask',
+        'esri/tasks/IdentifyTask',
+        'esri/tasks/support/IdentifyParameters',
+        'esri/views/MapView',
+        'dojo/domReady!'
+      ], option)
+        .then(([
+          Map,
+          BaseMap,
+          Graphic,
+          PopupTemplate,
+          Circle,
+          Point,
+          FeatureLayer,
+          GraphicsLayer,
+          TileLayer,
+          SimpleMarkerSymbol,
+          Query,
+          QueryTask,
+          IdentifyTask,
+          IdentifyParameters,
+          MapView
+        ]) => {
+          this.esriObj.Map = Map
+          this.esriObj.BaseMap = BaseMap
+          this.esriObj.Graphic = Graphic
+          this.esriObj.PopupTemplate = PopupTemplate
+          this.esriObj.Circle = Circle
+          this.esriObj.Point = Point
+          this.esriObj.FeatureLayer = FeatureLayer
+          this.esriObj.GraphicsLayer = GraphicsLayer
+          this.esriObj.TileLayer = TileLayer
+          this.esriObj.SimpleMarkerSymbol = SimpleMarkerSymbol
+          this.esriObj.Query = Query
+          this.esriObj.QueryTask = QueryTask
+          this.esriObj.IdentifyTask = IdentifyTask
+          this.esriObj.IdentifyParameters = IdentifyParameters
+          this.esriObj.MapView = MapView
+
+          // 初始化地图
+          this.initMap()
+          this.mapLoading = false
+        }).catch(err => {
+          console.log(err)
+          this.mapLoading = false
+        })
+    },
+    // 初始化地图
+    initMap: function() {
+      const base = new this.esriObj.BaseMap({
+        baseLayers: [
+          new this.esriObj.TileLayer({ // 可配置属性，见TileLayer类
+            id: '2w',
+            url: serverConfig.mapUrlBase
+          })
+        ],
+        title: 'dx2w',
+        id: 'dx2w'
+      })
+
+      this.map = new this.esriObj.Map({
+        basemap: base // 底图类型，详见BaseMap类
+      })
+
+      this.view = new this.esriObj.MapView({
+        container: this.$refs.mapDiv, // 视图的容器
+        map: this.map, // Map的实例放入视图中
+        center: [116.597, 28.24], // 初始显示的地图中心点，经纬度
+        zoom: 3 // 当前地图缩放等级
+      })
+
+      // const that = this
+      // this.view.on('click', function(event) {
+      //   // 清除地图上已有的事件/部件查询点
+      //   that.clearEOrCPoint()
+
+      //   const lon = event.mapPoint.longitude
+      //   const lat = event.mapPoint.latitude
+
+      //   if (that.showEventPointPopup) {
+      //     // 添加点
+      //     const gLayer = new that.esriObj.GraphicsLayer()
+      //     const marker = new that.esriObj.SimpleMarkerSymbol()
+      //     marker.color = '#35A0E7'
+      //     marker.style = 'square'
+      //     marker.outline = {
+      //       color: [128, 128, 128, 0.5],
+      //       width: '2px'
+      //     }
+      //     const graphic = new that.esriObj.Graphic({
+      //       geometry: event.mapPoint,
+      //       symbol: marker
+      //     })
+
+      //     gLayer.id = eventPointLayerId
+      //     gLayer.add(graphic)
+      //     that.map.add(gLayer)
+
+      //     // 查询事件或者部件
+      //     if (that.queryEventSwitch === '1') {
+      //       // 事件定位
+      //       // 1查询底图得到所在网格与所在社区
+      //       const query = that.layers.dx2wGrid.createQuery()
+      //       query.geometry = that.view.toMap(event)
+      //       query.distance = 10
+      //       query.units = 'meters'
+      //       query.returnGeometry = true
+      //       query.outFields = ['BGID', 'COMMUID', 'COMMUNAME']
+      //       that.layers.dx2wGrid.queryFeatures(query)
+      //         .then(function(response) {
+      //           const result = response.features[0].attributes
+
+      //           // 赋值
+      //           that.longitude = lon
+      //           that.latitude = lat
+      //           that.gridId = result.BGID
+      //           that.communityId = result.COMMUID
+      //           that.communityName = result.COMMUNAME
+
+      //           // 2弹出气泡
+      //           that.view.popup.open({
+      //             title: '事件定位',
+      //             content: '坐标：[' + lon.toFixed(4) + ', ' + lat.toFixed(4) + ']' + '<p>' + '所在社区：' + result.COMMUNAME,
+      //             location: event.mapPoint
+      //           })
+      //         })
+      //     } else if (that.queryEventSwitch === '0') {
+      //       // 部件定位
+      //       const queryDev = that.layers.dxbjPoint.createQuery()
+      //       // 定义查询的圆形范围，半径5米
+      //       const circle = new that.esriObj.Circle({
+      //         center: event.mapPoint,
+      //         radius: 5,
+      //         radiusUnit: 'meters'
+      //       })
+      //       queryDev.geometry = circle
+      //       queryDev.returnGeometry = true
+      //       queryDev.outFields = ['BGID', 'OBJID', 'OBJNAME', 'OBJPOS']
+      //       that.layers.dxbjPoint.queryFeatures(queryDev)
+      //         .then(function(response) {
+      //           if (response.features.length > 0) {
+      //             const results = response.features
+
+      //             that.compListOpts = []
+
+      //             let content = ''
+      //             results.forEach((item, index) => {
+      //               content += '<p>部件' + (index + 1) + '：' + item.attributes.OBJNAME + '，' + item.attributes.OBJPOS
+      //               const comp = {}
+      //               comp.name = '部件' + (index + 1) + '：' + item.attributes.OBJNAME
+      //               comp.value = item.attributes.OBJID
+      //               that.compListOpts.push(comp)
+      //             })
+
+      //             // 2弹出气泡
+      //             that.view.popup.open({
+      //               title: '部件定位',
+      //               content: '坐标：[' + lon.toFixed(4) + ', ' + lat.toFixed(4) + ']，附近5米的部件有：' + content,
+      //               location: event.mapPoint
+      //             })
+
+      //             // 查询所在社区和单元网格
+      //             const queryPos = that.layers.dx2wGrid.createQuery()
+      //             queryPos.geometry = that.view.toMap(event)
+      //             queryPos.returnGeometry = true
+      //             queryPos.outFields = ['BGID', 'COMMUID', 'COMMUNAME']
+      //             that.layers.dx2wGrid.queryFeatures(queryPos)
+      //               .then(function(response) {
+      //                 const result = response.features[0].attributes
+
+      //                 // 赋值
+      //                 that.longitude = lon
+      //                 that.latitude = lat
+      //                 that.gridId = result.BGID
+      //                 that.communityId = result.COMMUID
+      //                 that.communityName = result.COMMUNAME
+      //               })
+      //           } else {
+      //             that.$message({
+      //               message: '没有查询到部件，请重新定位',
+      //               type: 'warning'
+      //             })
+      //           }
+      //         })
+      //     }
+      //   } else {
+      //     that.view.hitTest(event).then(function(response) {
+      //       if (response.results.length) {
+      //         const graphic = response.results[0].graphic
+      //         const name = graphic.attributes.KEYWORD
+      //         const address = graphic.attributes.OBJPOS
+
+      //         that.view.popup.open({
+      //           title: name,
+      //           content: address,
+      //           location: event.mapPoint
+      //         })
+      //       }
+      //     })
+      //   }
+      // })
+
+      this.addBjLayers()
+      this.addCasePointOnMap(this.longitude, this.latitude)
+    },
+    // 加载部件服务的各图层
+    addBjLayers: function() {
+      // 此处可以优化
+      this.layers.dxbjPoint = new this.esriObj.FeatureLayer({ // 可配置属性，见TileLayer类
+        url: serverConfig.mapUrlBj + '/0',
+        id: 'dxbjPoint'
+      })
+      this.layers.dxbjLine = new this.esriObj.FeatureLayer({ // 可配置属性，见TileLayer类
+        url: serverConfig.mapUrlBj + '/1',
+        id: 'dxbjLine'
+      })
+      this.layers.dxbjXqd = new this.esriObj.FeatureLayer({ // 可配置属性，见TileLayer类
+        url: serverConfig.mapUrlBj + '/2',
+        id: 'dxbjXqd'
+      })
+      this.layers.dxbjMph = new this.esriObj.FeatureLayer({ // 可配置属性，见TileLayer类
+        url: serverConfig.mapUrlBj + '/3',
+        id: 'dxbjMph'
+      })
+      // this.layers.dx2wGrid = new this.esriObj.FeatureLayer({
+      //   url: serverConfig.mapUrlBase + '/6',
+      //   id: 'gridLayer'
+      // })
+
+      // 加载各图层
+      this.map.add(this.layers.dxbjPoint)
+      this.map.add(this.layers.dxbjLine)
+      this.map.add(this.layers.dxbjXqd)
+      this.map.add(this.layers.dxbjMph)
+      // this.map.add(this.layers.dx2wGrid)
+    },
+    // 在兴趣点图层查询关键字
+    // queryOnMap: function() {
+    //   const points = [] // 查询结果点集
+
+    //   this.clearQueryResults()
+    //   this.clearEOrCPoint()
+    //   this.showEventPointPopup = false
+    //   this.queryEventSwitch = '2'
+
+    //   // 查询条件
+    //   const query = new this.esriObj.Query()
+    //   query.returnGeometry = true
+    //   query.outFields = ['*']
+    //   query.where = 'NAME like ' + "'%" + this.keywords + "%'"
+    //   const that = this
+
+    //   this.layers.dxbjXqd.queryFeatures(query).then(function(results) {
+    //     results.features.forEach(item => {
+    //       const point = {}
+    //       point.x = item.geometry.longitude
+    //       point.y = item.geometry.latitude
+    //       point.attr = item.attributes
+    //       points.push(point)
+    //     })
+
+    //     // 提示查询结果
+    //     if (points.length > 0) {
+    //       that.$message({
+    //         message: '成功查询到' + points.length + '条记录',
+    //         type: 'success'
+    //       })
+
+    //       // 绘制点
+    //       that.addSimpleMarkerOnMap(points)
+    //     } else {
+    //       that.$message({
+    //         message: '没有查询到结果，请重新输入关键字',
+    //         type: 'warning'
+    //       })
+    //     }
+    //   })
+    // },
+    // 清除图层上的查询结果
+    // clearQueryResults: function() {
+    //   this.map.layers.forEach(layer => {
+    //     if (layer.type === 'graphics' && layer.id === queryResultLayerId) {
+    //       layer.graphics.removeAll()
+    //       return false
+    //     }
+    //   })
+    // },
+    // // 清除图层上的查询结果
+    // clearMap: function() {
+    //   // 清除地图上绘制的graphic图层
+    //   this.map.layers.forEach(layer => {
+    //     if (layer.type === 'graphics') {
+    //       layer.graphics.removeAll()
+    //       return false
+    //     }
+    //   })
+
+    //   // 清除弹出框
+    //   this.view.popup.close()
+
+    //   // 清除data属性值
+    //   this.keywords = ''
+    //   this.showEventPointPopup = true // 是否显示事部件的popup
+    //   this.queryEventSwitch = '1' // 1==查询事件；0==查询部件
+    //   this.compListOpts = [] // 部件选择下拉框option
+    //   this.longitude = '' // 定位点经度
+    //   this.latitude = '' // 定位点纬度
+    //   this.communityId = '' // 社区ID
+    //   this.communityName = '' // 社区名称
+    //   this.gridId = '' // 单元网格ID
+    //   this.componentId = '' // 部件ID
+    //   this.componentName = '' // 部件名称
+    // },
+    // 清除图层上的事件定位点
+    // clearEOrCPoint: function() {
+    //   this.map.layers.forEach(layer => {
+    //     if (layer.type === 'graphics' && layer.id === eventPointLayerId) {
+    //       layer.graphics.removeAll()
+    //       return false
+    //     }
+    //   })
+    //   // 清除弹出框
+    //   this.view.popup.close()
+    // },
+    // 切换
+    // switchEventOrComponent: function() {
+    //   // 如果选中的是事件定位（1）或部件定位（0），点击地图时弹出事件或者部件的popup；否则（2以上）显示兴趣点结果的属性popup
+    //   this.showEventPointPopup = this.queryEventSwitch < 2
+    // },
+    // 将查询结果点集合绘制在地图上
+    // addSimpleMarkerOnMap: function(points) {
+    //   const gLayer = new this.esriObj.GraphicsLayer()
+    //   points.forEach(item => {
+    //     const point = new this.esriObj.Point(item.x, item.y, item.attr)
+    //     const marker = new this.esriObj.SimpleMarkerSymbol()
+    //     marker.color = '#F9690E'
+    //     marker.outline = {
+    //       color: [128, 128, 128, 0.5],
+    //       width: '2px'
+    //     }
+    //     const graphic = new this.esriObj.Graphic({
+    //       geometry: point,
+    //       symbol: marker,
+    //       attributes: item.attr
+    //     })
+    //     gLayer.id = queryResultLayerId
+    //     gLayer.add(graphic)
+    //   })
+    //   this.map.add(gLayer)
+    // },
+    // 返回事件定位的结果
+    // checkEventPoint: function() {
+    //   this.$emit(
+    //     'closeMapQueryDialogByEvent',
+    //     this.longitude,
+    //     this.latitude,
+    //     this.communityId,
+    //     this.communityName,
+    //     this.gridId)
+
+    //   this.clearMap()
+    // },
+    // // 返回部件定位的结果
+    // checkComponentPoint: function() {
+    //   this.$emit(
+    //     'closeMapQueryDialogByComp',
+    //     this.longitude,
+    //     this.latitude,
+    //     this.communityId,
+    //     this.communityName,
+    //     this.gridId,
+    //     this.componentId)
+
+    //   this.clearMap()
+    // },
+    // 在地图上添加指定坐标的点
+    addCasePointOnMap: function(lng, lat) {
+      console.log('addCasePointOnMap', lng, lat)
+      const gLayer = new this.esriObj.GraphicsLayer() // 添加自定义绘制点的图层
+      const point = new this.esriObj.Point(lng, lat) // 创建geometry对象
+      const marker = new this.esriObj.SimpleMarkerSymbol() // 创建marker标识
+      // marker属性
+      marker.color = '#F9690E'
+      marker.outline = {
+        color: [128, 128, 128, 0.5],
+        width: '2px'
+      }
+      // 创建graphic对象
+      const graphic = new this.esriObj.Graphic({
+        geometry: point,
+        symbol: marker
+      })
+      gLayer.id = caseLayerId // 标识案卷图层
+      gLayer.add(graphic) // 图层上添加对象
+      this.map.add(gLayer) // 地图上添加图层
+
+      // 重新设置地图中心点并移动
+      this.view.center = point
+      this.view.goTo(point)
+    }
+  }
+}
+</script>
+
+<style scoped>
+  @import 'https://js.arcgis.com/4.13/esri/css/main.css';
+  .baseMap {
+    height:60vh;
+    width: 100%;
+    margin-top: 25px;
+    border: 1px solid #DCDCDC;
+    border-radius: 4px;
+  }
+</style>
diff --git a/src/router/index.js b/src/router/index.js
index b265a48..1c80473 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -11,6 +11,7 @@
 import { systemRouters } from './modules/system'
 import { cooRouters } from './modules/coo'
 import { commenetRouters } from './modules/comment'
+import { suphandleRouters } from './modules/suphandle'
 import { commonRouters } from './modules/common'
 
 /**
@@ -90,6 +91,7 @@
 export const asyncRouterMap = [
   ...commonRouters,
   ...cooRouters,
+  ...suphandleRouters,
   ...systemRouters,
   ...commenetRouters,
   { path: '*', redirect: '/404', hidden: true, meta: {}}
diff --git a/src/router/modules/suphandle.js b/src/router/modules/suphandle.js
new file mode 100644
index 0000000..7026a7b
--- /dev/null
+++ b/src/router/modules/suphandle.js
@@ -0,0 +1,35 @@
+/* Layout */
+import Layout from '../../views/layout/Layout'
+export const suphandleRouters = [
+  {
+    path: '/suphandle',
+    name: 'suphandle',
+    redirect: '/accessDept',
+    hidden: true,
+    meta: {
+      title: '监督受理子系统',
+      permission: ['/suphandle'],
+      isSys: true
+    }
+  },
+  {
+    path: '/callBus',
+    component: Layout,
+    redirect: '/callBus',
+    name: 'CallBus',
+    alwaysShow: true,
+    meta: {
+      title: '呼叫业务',
+      permission: ['/callBus'],
+      sys: '/suphandle'
+    },
+    children: [
+      {
+        path: '/callCase',
+        component: () => import('@/views/callCase/callCase'),
+        name: 'CallCase',
+        meta: { title: '建立案卷', icon: '', belongSys: '', permission: '/callCase' }
+      }
+    ]
+  }
+]
diff --git a/src/router/modules/system.js b/src/router/modules/system.js
index 10bff2e..c80b732 100644
--- a/src/router/modules/system.js
+++ b/src/router/modules/system.js
@@ -48,6 +48,12 @@
         component: () => import('@/views/busAdmin/userDevice/userDevice'),
         name: 'UserDevice',
         meta: { title: '终端设备管理', icon: '', permission: ['/userDevice'] }
+      },
+      {
+        path: '/areaPersonliable',
+        component: () => import('@/views/busAdmin/areaPersonliable/areaPersonliable'),
+        name: 'AreaPersonliable',
+        meta: { title: '网格责任人管理', icon: '', permission: ['/areaPersonliable'] }
       }
     ]
   },
diff --git a/src/views/busAdmin/areaPersonliable/areaPersonliable.vue b/src/views/busAdmin/areaPersonliable/areaPersonliable.vue
new file mode 100644
index 0000000..23a26de
--- /dev/null
+++ b/src/views/busAdmin/areaPersonliable/areaPersonliable.vue
@@ -0,0 +1,156 @@
+<template>
+  <div class="table-container">
+    <el-row class="table-title">
+      <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
+      <el-col :span="12" :offset="6" class="edit_btns">
+        <el-button v-if="hasPerm('/areaPersonliable/add')" class="edit_btn" size="small" @click="add">新增</el-button>
+      </el-col>
+    </el-row>
+    <el-table v-loading="listLoading" ref="table" :data="list" class="table" border>
+      <el-table-column :index="indexMethod" align="center" type="index" />
+      <el-table-column v-for="column in tableColumns" :key="column.value" :label="column.text" align="center">
+        <template slot-scope="scope">
+          <span>{{ scope.row[column.value] }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column v-if="hasPerm('/areaPersonliable/update')||hasPerm('/areaPersonliable/delete')" label="操作" align="center" width="200">
+        <template slot-scope="scope">
+          <el-button v-if="hasPerm('/areaPersonliable/update')" class="table-button" type="text" @click="edit(scope.row)">编辑</el-button>
+          <el-button v-if="hasPerm('/areaPersonliable/delete')" class="table-button" type="text" @click="del(scope.row)">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <div class="pagination-container">
+      <el-pagination
+        :current-page="listQuery.offset"
+        :page-sizes="[10,20,30,50]"
+        :page-size="listQuery.limit"
+        :total="total"
+        align="center"
+        layout="total, sizes, prev, pager, next"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"/>
+    </div>
+
+    <edit-area-personliable ref="editAreaPersonliable" @watchChild="fetchData"/>
+  </div>
+</template>
+
+<script>
+import { getAreaPersonliableList, deleteAreaPersonliable } from '@/api/busAdmin/areaPersonliable'
+import EditAreaPersonliable from './editAreaPersonliable'
+
+export default {
+  name: 'AreaPersonliable',
+  components: { EditAreaPersonliable },
+  data() {
+    return {
+      list: [],
+      total: 0,
+      listLoading: false,
+      listQuery: {
+        limit: 10,
+        offset: 1,
+        sort: 'id',
+        order: 'asc'
+      },
+      tableColumns: [
+        {
+          text: '网格名称',
+          value: 'areaName'
+        },
+        {
+          text: '责任人姓名',
+          value: 'userName'
+        },
+        {
+          text: '所属区域',
+          value: 'pAreaName'
+        }
+      ]
+    }
+  },
+  activated() {
+    this.fetchData()
+  },
+  methods: {
+    async fetchData() {
+      this.listLoading = true
+      const res = await getAreaPersonliableList(this.listQuery)
+      this.list = res.data.rows
+      this.total = parseInt(res.data.total)
+      this.listLoading = false
+    },
+    indexMethod(index) {
+      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
+    },
+    // 改变页容量
+    handleSizeChange(val) {
+      this.listQuery.limit = val
+      this.fetchData()
+    },
+    // 改变当前页
+    handleCurrentChange(val) {
+      this.listQuery.offset = val
+      this.fetchData()
+    },
+    add() {
+      this.$refs.editAreaPersonliable.initDialog(true, 'create')
+    },
+    edit(row) {
+      this.$refs.editAreaPersonliable.initDialog(true, 'update', row)
+    },
+    del(row) {
+      this.$confirm(
+        '确定要删除吗？',
+        '确认操作',
+        {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }
+      ).then(() => {
+        deleteAreaPersonliable(row.id).then(response => {
+          if (response.code === 200) {
+            this.$message.success('删除成功')
+            this.fetchData()
+          }
+        })
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  $tableTitleHeight:46px;
+  .table{
+    margin-bottom: 20px;
+  }
+  .table-container{
+    margin: 20px;
+  }
+  .table-title{
+    background-color:rgba(243, 243, 243, 1);
+    height: $tableTitleHeight;
+    .title-header{
+      line-height:$tableTitleHeight;
+      color: #606266;
+      font-size: 15px;
+      i{
+        margin-left: 5px;
+        margin-right: 5px;
+      }
+    }
+  }
+  .edit_btns{
+    .edit_btn{
+      float:right;
+      margin:7px 3px;//为了需要居中显示margin-top和bottom要用$tableTitleHeight减去按钮原高度除以2
+    }
+  }
+  .table-button{
+    padding: 10px;
+    height: 23px;
+  }
+</style>
diff --git a/src/views/busAdmin/areaPersonliable/areaSelectTree.vue b/src/views/busAdmin/areaPersonliable/areaSelectTree.vue
new file mode 100644
index 0000000..d0ba37f
--- /dev/null
+++ b/src/views/busAdmin/areaPersonliable/areaSelectTree.vue
@@ -0,0 +1,80 @@
+<template>
+  <el-dialog :visible.sync="dialogFormVisible" append-to-body custom-class="area-select-dialog" title="选择责任网格">
+    <el-scrollbar style="height: 400px">
+      <el-tree
+        ref="tree"
+        :expand-on-click-node="false"
+        :props="defaultProps"
+        :load="loadNode"
+        node-key="id"
+        lazy
+      />
+    </el-scrollbar>
+    <div slot="footer" class="dialog-footer">
+      <el-button type="primary" @click="confirmSelect">确定</el-button>
+      <el-button @click="cancel">取消</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { getAreaTree } from '@/api/area'
+export default {
+  name: 'AreaSelectTree',
+  data() {
+    return {
+      dialogFormVisible: true,
+      defaultProps: {
+        label: 'name',
+        children: 'children',
+        isLeaf: 'leaf'
+      },
+      listQuery: {
+        pid: ''
+      }
+    }
+  },
+  methods: {
+    // 获取数据
+    // fetchData() {
+    //   return new Promise(function(resolve, reject) {
+    //     getAreaTree(this.roleId)
+    //   })
+    // },
+    initDialog() {
+      this.dialogFormVisible = true
+    },
+    loadNode(node, resolve) {
+      if (node.data && node.data.id) {
+        this.listQuery.pid = node.data.id
+      }
+      getAreaTree(this.listQuery).then(response => {
+        const data = response.data
+        resolve(data)
+      })
+    },
+    // 选择后的操作
+    confirmSelect() {
+      const node = this.$refs.tree.getCurrentNode()
+      this.dialogFormVisible = false
+      this.$emit('selectDone', node)
+    },
+    cancel() {
+      this.dialogFormVisible = false
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
+
+<style lang="scss" scope>
+  .area-select-dialog{
+    width: 400px;
+    .el-scrollbar__wrap{
+      overflow-x: hidden !important;
+    }
+  }
+</style>

diff --git a/src/api/busAdmin/areaPersonliable.js b/src/api/busAdmin/areaPersonliable.js
new file mode 100644
index 0000000..58737bb
--- /dev/null
+++ b/src/api/busAdmin/areaPersonliable.js
@@ -0,0 +1,45 @@
+import request from '@/utils/request'
+
+export function getAreaPersonliableList(params) {
+  return request({
+    url: '/areaPersonliable/listPage',
+    method: 'get',
+    params
+  })
+}
+
+export function addAreaPersonliable(params) {
+  return request({
+    url: '/areaPersonliable/add',
+    method: 'post',
+    params
+  })
+}
+
+export function updateAreaPersonliable(params) {
+  return request({
+    url: '/areaPersonliable/update',
+    method: 'post',
+    params
+  })
+}
+
+export function deleteAreaPersonliable(id) {
+  return request({
+    url: '/areaPersonliable/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+export function getSupervisorList() {
+  return request({
+    url: '/mgr/simplelist',
+    method: 'post',
+    params: {
+      roleTips: 'supervisor'
+    }
+  })
+}
diff --git a/src/api/callCase/callCase.js b/src/api/callCase/callCase.js
new file mode 100644
index 0000000..7500fc7
--- /dev/null
+++ b/src/api/callCase/callCase.js
@@ -0,0 +1,87 @@
+/**
+ * 新建案卷的接口
+ */
+import request from '@/utils/request'
+
+// 获取案卷信息来源
+export function getCaseSource(params) {
+  return request({
+    url: 'dict/code/caseSource',
+    method: 'get',
+    params
+  })
+}
+
+// 获取案卷等级
+export function getCaseLevel(params) {
+  return request({
+    url: 'dict/code/caseLevel',
+    method: 'get',
+    params
+  })
+}
+
+// 获取案卷类别
+export function getCaseEorC(params) {
+  return request({
+    url: 'dict/code/eorc',
+    method: 'get',
+    params
+  })
+}
+
+// 根据案卷类别获取案卷大类
+export function getCaseType(eorc) {
+  return request({
+    url: 'case/type/list',
+    method: 'get',
+    params: {
+      eorc: eorc
+    }
+  })
+}
+
+// 根据案卷大类获取案卷小类
+export function getCaseDetailType(caseTypeId) {
+  return request({
+    url: 'case/typeDetail/list',
+    method: 'get',
+    params: {
+      typeId: caseTypeId
+    }
+  })
+}
+
+// 根据案卷小类获取结案标准
+export function getCaseTypesTime(caseTypeDetailId) {
+  return request({
+    url: 'case/typesTime/list',
+    method: 'get',
+    params: {
+      detailId: caseTypeDetailId
+    }
+  })
+}
+
+// 获取监督员列表
+export function getVerifyPerson(params) {
+  return request({
+    url: 'mgr/simplelist',
+    method: 'post',
+    params: {
+      roleTips: 'supervisor'
+    }
+  })
+}
+
+// 新增案卷
+export function addCase(params) {
+  return request({
+    url: 'case/add',
+    method: 'post',
+    headers: {
+      'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
+    },
+    params
+  })
+}
diff --git a/src/api/coorBusiness/case.js b/src/api/coorBusiness/case.js
index ec5a88a..08c3a13 100644
--- a/src/api/coorBusiness/case.js
+++ b/src/api/coorBusiness/case.js
@@ -110,9 +110,10 @@
   })
 }
 
+// 待处理
 export function toHandleListPage(params) {
   return request({
-    url: 'case/toHandleListPage/',
+    url: 'case/toProcessListPage/',
     method: 'get',
     params
   })
@@ -158,9 +159,10 @@
   })
 }
 
+// 待核查
 export function toCheckListPage(params) {
   return request({
-    url: 'case/toCheckListPage/',
+    url: 'case/toDisCheckListPage/',
     method: 'get',
     params
   })
diff --git a/src/components/CaseCommon/caseDetail.vue b/src/components/CaseCommon/caseDetail.vue
index f6c23ab..fdadcba 100644
--- a/src/components/CaseCommon/caseDetail.vue
+++ b/src/components/CaseCommon/caseDetail.vue
@@ -276,7 +276,7 @@
     </el-row>
     <el-row>
       <div class="title">数据流转:</div>
-      <el-table :data="recordList" :header-cell-style="{background:'#f3f3f3'}" class="table" border>
+      <el-table :data="recordList" :header-cell-style="{background:'#f3f3f3'}" max-height="400" class="table" border>
         <el-table-column prop="operationTypeName" label="操作" align="center"/>
         <el-table-column prop="deptName" label="单位" align="center"/>
         <el-table-column prop="userName" label="人员" align="center"/>
@@ -293,7 +293,7 @@
       :append-to-body="true"
       title="位置详情"
     >
-      <arc-gis-map :longitude="Number(caseDetail.lng)" :latitude="Number(caseDetail.lat)"/>
+      <arc-gis-map-read :longitude="Number(caseDetail.lng)" :latitude="Number(caseDetail.lat)"/>
     </el-dialog>
   </div>
 </template>
@@ -303,12 +303,12 @@
 import { getCaseDetail, getUserList, getDeptList, getCaseTypeList, getCaseTypeDetailList, getCaseTypeTimes } from '@/api/coorBusiness/case'
 import { getCommonLanguage, getFilingTypeList, getCaseLevelList } from '@/api/coorBusiness/dict'
 import { historicalRecords, nextNodes, completeCaseTask } from '@/api/coorBusiness/process'
-import ArcGisMap from '@/components/Map/arcgisMap'
+import ArcGisMapRead from '@/components/Map/arcgisMapRead'
 import { radioMap } from './radioMap'
 
 export default {
   name: 'CaseDetail',
-  components: { ArcGisMap },
+  components: { ArcGisMapRead },
   // props: {
   //   id: {
   //     type: String,
@@ -334,7 +334,6 @@
       showNeedVisit: false,
       caseDetail: {},
       operationKey: '', // 案件处理按钮key
-      imgurl: 'http:\\\\192.168.8.201:8083\\static\\',
       fileIdVerify: [], // 核实照片id
       fileIdProcess: [], // 处理照片id
       fileIdCheck: [], // 核查照片id
@@ -358,10 +357,12 @@
   computed: {
     isNeedVisit: function() {
       return this.caseDetail.isNeedRevisit === 1 ? '需要回访' : '不需要回访'
+    },
+    imgurl() {
+      return process.env.BASE_API + '/static/'
     }
   },
-  mounted() {
-    console.log('case dtial')
+  created() {
     this.id = this.$route.query.id
     this.showProcess = (this.$route.query.showProcess || this.$route.query.showProcess === false) ? this.$route.query.showProcess : true
     this.showNeedVisit = this.$route.query.showNeedVisit ? this.$route.query.showNeedVisit : false
@@ -371,7 +372,6 @@
     async initData() {
       // 查询案件详情接口
       const resDetail = await getCaseDetail(this.id)
-      console.log('detail', resDetail)
       this.caseDetail = resDetail.data[0]
 
       // 解析图片id
@@ -391,9 +391,11 @@
 
       // 查询流转记录接口
       this.processForm.processId = this.caseDetail.processId
-      const resRecord = await historicalRecords(this.processForm.processId)
-      this.recordList = resRecord.data
-      console.log(this.recordList)
+      // const resRecord = historicalRecords(this.processForm.processId)
+      // this.recordList = resRecord.data
+      historicalRecords(this.processForm.processId).then(res => {
+        this.recordList = res.data
+      })
 
       if (this.showProcess) {
         this.initProcess()
@@ -701,6 +703,7 @@
   .table{
     margin: 20px;
     width: 98%;
+    // max-height: 250px;
   }
   .title{
     margin-left: 38px;
diff --git a/src/components/CaseCommon/caseDetailRead.vue b/src/components/CaseCommon/caseDetailRead.vue
index 82066db..a4e87b0 100644
--- a/src/components/CaseCommon/caseDetailRead.vue
+++ b/src/components/CaseCommon/caseDetailRead.vue
@@ -158,11 +158,11 @@
 
 <script>
 import { getCaseDetail } from '@/api/coorBusiness/case'
-import ArcGisMap from '@/components/Map/arcgisMap'
+import ArcGisMapRead from '@/components/Map/arcgisMapRead'
 
 export default {
   name: 'CaseDetail',
-  components: { ArcGisMap },
+  components: { ArcGisMapRead },
   props: {
     id: {
       type: String,
diff --git a/src/components/Map/ArcGISConfig.js b/src/components/Map/ArcGISConfig.js
index d325da9..50cea3b 100644
--- a/src/components/Map/ArcGISConfig.js
+++ b/src/components/Map/ArcGISConfig.js
@@ -1,14 +1,16 @@
 export const mapConfig = {
-  apiUrl: 'https://js.arcgis.com/4.13/', // 暂时使用管网提供的api，实际部署时建议离线部署一套
+  apiUrl: 'http://192.168.8.205/arcgis_js_api/library/4.12/init.js', // 暂时使用管网提供的api，实际部署时建议离线部署一套
+  // apiUrl: 'https://js.arcgis.com/4.13/',
   mapIp: '223.84.218.107', // 服务ip
   mapPort: '6080', // 服务端口
-  serverBase: 'http://223.84.218.107:6080/arcgis/rest/services/', // 服务地址前缀
+  serverBase: 'http://192.168.8.205:6080/arcgis/rest/services/', // 服务地址前缀
+  // serverBase: 'http://223.84.218.107:6080/arcgis/rest/services/dx/',
   mapCenter: '[116.597,28.24]' // 地图中心点
 }
 
 export const serverConfig = {
-  mapUrlBase: mapConfig.serverBase + 'dx/2w/MapServer', // 底图服务地址
-  mapUrlBj: mapConfig.serverBase + 'dx/dxbj/MapServer', // 部件服务地址
-  mapUrlBjfc: mapConfig.serverBase + 'dx/bjfc/MapServer', // 部件分层服务地址
-  mapUrlBjEdit: mapConfig.serverBase + 'dx/dxbj/FeatureServer' // 可编辑的部件图层
+  mapUrlBase: mapConfig.serverBase + '2w/MapServer', // 底图服务地址
+  mapUrlBj: mapConfig.serverBase + 'dxbj/MapServer', // 部件服务地址
+  mapUrlBjfc: mapConfig.serverBase + 'bjfc/MapServer', // 部件分层服务地址
+  mapUrlBjEdit: mapConfig.serverBase + 'dxbj/FeatureServer' // 可编辑的部件图层
 }
diff --git a/src/components/Map/arcgisMap.vue b/src/components/Map/arcgisMap.vue
index 53776f1..5c15383 100644
--- a/src/components/Map/arcgisMap.vue
+++ b/src/components/Map/arcgisMap.vue
@@ -1,6 +1,6 @@
 <template>
-  <div style="margin-top:-30px">
-    <!-- <el-row :gutter="20">
+  <div>
+    <el-row :gutter="20">
       <el-col :span="4">
         <el-input v-model="keywords" size="small" type="text" placeholder="兴趣点关键字" clearable />
       </el-col>
@@ -31,9 +31,9 @@
       <el-col v-if="queryEventSwitch === '1'" :span="8" style="text-align: right;">
         <el-button type="primary" size="small" @click="checkEventPoint"> 事件提交 </el-button>
       </el-col>
-    </el-row> -->
+    </el-row>
 
-    <div v-loading="mapLoading" ref="mapDiv" class="baseMap" />
+    <div ref="mapDiv" class="baseMap" />
   </div>
 </template>
 
@@ -45,22 +45,12 @@
   url: mapConfig.apiUrl
 }
 
-// const eventPointLayerId = 'eventPointLayer' // 事件定位点的图层id
-// const queryResultLayerId = 'queryResultLayer' // 兴趣点查询结果点集的图层id
+const eventPointLayerId = 'eventPointLayer' // 事件定位点的图层id
+const queryResultLayerId = 'queryResultLayer' // 兴趣点查询结果点集的图层id
 const caseLayerId = 'addedGeometryLayerId' // 案卷点图层
 
 export default {
-  name: 'ArcGisMap',
-  props: {
-    longitude: {
-      type: Number,
-      default: 116.5937
-    },
-    latitude: {
-      type: Number,
-      default: 28.249
-    }
-  },
+  name: 'ArcGISMap',
   data() {
     return {
       map: '',
@@ -89,19 +79,18 @@
         IdentifyParameters: '',
         MapView: ''
       },
-      mapLoading: false
-      // keywords: '', // 查询关键字
-      // showEventPointPopup: true, // 是否显示事部件的popup
-      // queryEventSwitch: '1', // 1==查询事件；0==查询部件
-      // compListOpts: [], // 部件选择下拉框option
+      keywords: '', // 查询关键字
+      showEventPointPopup: true, // 是否显示事部件的popup
+      queryEventSwitch: '1', // 1==查询事件；0==查询部件
+      compListOpts: [], // 部件选择下拉框option
       // 主页面返回值
-      // longitude: '', // 定位点经度
-      // latitude: '' // 定位点纬度
-      // communityId: '', // 社区ID
-      // communityName: '', // 社区名称
-      // gridId: '', // 单元网格ID
-      // componentId: '', // 部件ID
-      // componentName: '' // 部件名称/=
+      longitude: '', // 定位点经度
+      latitude: '', // 定位点纬度
+      communityId: '', // 社区ID
+      communityName: '', // 社区名称
+      gridId: '', // 单元网格ID
+      componentId: '', // 部件ID
+      componentName: '' // 部件名称
     }
   },
   mounted() {
@@ -110,7 +99,6 @@
   methods: {
     // 初始化ArcGIS API对象
     importEsri: function() {
-      this.mapLoading = true
       loadModules([
         'esri/Map',
         'esri/Basemap',
@@ -164,10 +152,8 @@
 
           // 初始化地图
           this.initMap()
-          this.mapLoading = false
         }).catch(err => {
           console.log(err)
-          this.mapLoading = false
         })
     },
     // 初始化地图
@@ -194,139 +180,139 @@
         zoom: 3 // 当前地图缩放等级
       })
 
-      // const that = this
-      // this.view.on('click', function(event) {
-      //   // 清除地图上已有的事件/部件查询点
-      //   that.clearEOrCPoint()
+      const that = this
+      this.view.on('click', function(event) {
+        // 清除地图上已有的事件/部件查询点
+        that.clearEOrCPoint()
 
-      //   const lon = event.mapPoint.longitude
-      //   const lat = event.mapPoint.latitude
+        const lon = event.mapPoint.longitude
+        const lat = event.mapPoint.latitude
 
-      //   if (that.showEventPointPopup) {
-      //     // 添加点
-      //     const gLayer = new that.esriObj.GraphicsLayer()
-      //     const marker = new that.esriObj.SimpleMarkerSymbol()
-      //     marker.color = '#35A0E7'
-      //     marker.style = 'square'
-      //     marker.outline = {
-      //       color: [128, 128, 128, 0.5],
-      //       width: '2px'
-      //     }
-      //     const graphic = new that.esriObj.Graphic({
-      //       geometry: event.mapPoint,
-      //       symbol: marker
-      //     })
+        if (that.showEventPointPopup) {
+          // 添加点
+          const gLayer = new that.esriObj.GraphicsLayer()
+          const marker = new that.esriObj.SimpleMarkerSymbol()
+          marker.color = '#35A0E7'
+          marker.style = 'square'
+          marker.outline = {
+            color: [128, 128, 128, 0.5],
+            width: '2px'
+          }
+          const graphic = new that.esriObj.Graphic({
+            geometry: event.mapPoint,
+            symbol: marker
+          })
 
-      //     gLayer.id = eventPointLayerId
-      //     gLayer.add(graphic)
-      //     that.map.add(gLayer)
+          gLayer.id = eventPointLayerId
+          gLayer.add(graphic)
+          that.map.add(gLayer)
 
-      //     // 查询事件或者部件
-      //     if (that.queryEventSwitch === '1') {
-      //       // 事件定位
-      //       // 1查询底图得到所在网格与所在社区
-      //       const query = that.layers.dx2wGrid.createQuery()
-      //       query.geometry = that.view.toMap(event)
-      //       query.distance = 10
-      //       query.units = 'meters'
-      //       query.returnGeometry = true
-      //       query.outFields = ['BGID', 'COMMUID', 'COMMUNAME']
-      //       that.layers.dx2wGrid.queryFeatures(query)
-      //         .then(function(response) {
-      //           const result = response.features[0].attributes
+          // 查询事件或者部件
+          if (that.queryEventSwitch === '1') {
+            // 事件定位
+            // 1查询底图得到所在网格与所在社区
+            const query = that.layers.dx2wGrid.createQuery()
+            query.geometry = that.view.toMap(event)
+            query.distance = 10
+            query.units = 'meters'
+            query.returnGeometry = true
+            query.outFields = ['BGID', 'COMMUID', 'COMMUNAME']
+            that.layers.dx2wGrid.queryFeatures(query)
+              .then(function(response) {
+                const result = response.features[0].attributes
 
-      //           // 赋值
-      //           that.longitude = lon
-      //           that.latitude = lat
-      //           that.gridId = result.BGID
-      //           that.communityId = result.COMMUID
-      //           that.communityName = result.COMMUNAME
+                // 赋值
+                that.longitude = lon
+                that.latitude = lat
+                that.gridId = result.BGID
+                that.communityId = result.COMMUID
+                that.communityName = result.COMMUNAME
 
-      //           // 2弹出气泡
-      //           that.view.popup.open({
-      //             title: '事件定位',
-      //             content: '坐标：[' + lon.toFixed(4) + ', ' + lat.toFixed(4) + ']' + '<p>' + '所在社区：' + result.COMMUNAME,
-      //             location: event.mapPoint
-      //           })
-      //         })
-      //     } else if (that.queryEventSwitch === '0') {
-      //       // 部件定位
-      //       const queryDev = that.layers.dxbjPoint.createQuery()
-      //       // 定义查询的圆形范围，半径5米
-      //       const circle = new that.esriObj.Circle({
-      //         center: event.mapPoint,
-      //         radius: 5,
-      //         radiusUnit: 'meters'
-      //       })
-      //       queryDev.geometry = circle
-      //       queryDev.returnGeometry = true
-      //       queryDev.outFields = ['BGID', 'OBJID', 'OBJNAME', 'OBJPOS']
-      //       that.layers.dxbjPoint.queryFeatures(queryDev)
-      //         .then(function(response) {
-      //           if (response.features.length > 0) {
-      //             const results = response.features
+                // 2弹出气泡
+                that.view.popup.open({
+                  title: '事件定位',
+                  content: '坐标：[' + lon.toFixed(4) + ', ' + lat.toFixed(4) + ']' + '<p>' + '所在社区：' + result.COMMUNAME,
+                  location: event.mapPoint
+                })
+              })
+          } else if (that.queryEventSwitch === '0') {
+            // 部件定位
+            const queryDev = that.layers.dxbjPoint.createQuery()
+            // 定义查询的圆形范围，半径5米
+            const circle = new that.esriObj.Circle({
+              center: event.mapPoint,
+              radius: 5,
+              radiusUnit: 'meters'
+            })
+            queryDev.geometry = circle
+            queryDev.returnGeometry = true
+            queryDev.outFields = ['BGID', 'OBJID', 'OBJNAME', 'OBJPOS']
+            that.layers.dxbjPoint.queryFeatures(queryDev)
+              .then(function(response) {
+                if (response.features.length > 0) {
+                  const results = response.features
 
-      //             that.compListOpts = []
+                  that.compListOpts = []
 
-      //             let content = ''
-      //             results.forEach((item, index) => {
-      //               content += '<p>部件' + (index + 1) + '：' + item.attributes.OBJNAME + '，' + item.attributes.OBJPOS
-      //               const comp = {}
-      //               comp.name = '部件' + (index + 1) + '：' + item.attributes.OBJNAME
-      //               comp.value = item.attributes.OBJID
-      //               that.compListOpts.push(comp)
-      //             })
+                  let content = ''
+                  results.forEach((item, index) => {
+                    content += '<p>部件' + (index + 1) + '：' + item.attributes.OBJNAME + '，' + item.attributes.OBJPOS
+                    const comp = {}
+                    comp.name = '部件' + (index + 1) + '：' + item.attributes.OBJNAME
+                    comp.value = item.attributes.OBJID
+                    that.compListOpts.push(comp)
+                  })
 
-      //             // 2弹出气泡
-      //             that.view.popup.open({
-      //               title: '部件定位',
-      //               content: '坐标：[' + lon.toFixed(4) + ', ' + lat.toFixed(4) + ']，附近5米的部件有：' + content,
-      //               location: event.mapPoint
-      //             })
+                  // 2弹出气泡
+                  that.view.popup.open({
+                    title: '部件定位',
+                    content: '坐标：[' + lon.toFixed(4) + ', ' + lat.toFixed(4) + ']，附近5米的部件有：' + content,
+                    location: event.mapPoint
+                  })
 
-      //             // 查询所在社区和单元网格
-      //             const queryPos = that.layers.dx2wGrid.createQuery()
-      //             queryPos.geometry = that.view.toMap(event)
-      //             queryPos.returnGeometry = true
-      //             queryPos.outFields = ['BGID', 'COMMUID', 'COMMUNAME']
-      //             that.layers.dx2wGrid.queryFeatures(queryPos)
-      //               .then(function(response) {
-      //                 const result = response.features[0].attributes
+                  // 查询所在社区和单元网格
+                  const queryPos = that.layers.dx2wGrid.createQuery()
+                  queryPos.geometry = that.view.toMap(event)
+                  queryPos.returnGeometry = true
+                  queryPos.outFields = ['BGID', 'COMMUID', 'COMMUNAME']
+                  that.layers.dx2wGrid.queryFeatures(queryPos)
+                    .then(function(response) {
+                      const result = response.features[0].attributes
 
-      //                 // 赋值
-      //                 that.longitude = lon
-      //                 that.latitude = lat
-      //                 that.gridId = result.BGID
-      //                 that.communityId = result.COMMUID
-      //                 that.communityName = result.COMMUNAME
-      //               })
-      //           } else {
-      //             that.$message({
-      //               message: '没有查询到部件，请重新定位',
-      //               type: 'warning'
-      //             })
-      //           }
-      //         })
-      //     }
-      //   } else {
-      //     that.view.hitTest(event).then(function(response) {
-      //       if (response.results.length) {
-      //         const graphic = response.results[0].graphic
-      //         const name = graphic.attributes.KEYWORD
-      //         const address = graphic.attributes.OBJPOS
+                      // 赋值
+                      that.longitude = lon
+                      that.latitude = lat
+                      that.gridId = result.BGID
+                      that.communityId = result.COMMUID
+                      that.communityName = result.COMMUNAME
+                    })
+                } else {
+                  that.$message({
+                    message: '没有查询到部件，请重新定位',
+                    type: 'warning'
+                  })
+                }
+              })
+          }
+        } else {
+          that.view.hitTest(event).then(function(response) {
+            if (response.results.length) {
+              const graphic = response.results[0].graphic
+              const name = graphic.attributes.KEYWORD
+              const address = graphic.attributes.OBJPOS
 
-      //         that.view.popup.open({
-      //           title: name,
-      //           content: address,
-      //           location: event.mapPoint
-      //         })
-      //       }
-      //     })
-      //   }
-      // })
+              that.view.popup.open({
+                title: name,
+                content: address,
+                location: event.mapPoint
+              })
+            }
+          })
+        }
+      })
 
       this.addBjLayers()
-      this.addCasePointOnMap(this.longitude, this.latitude)
+      // this.addCasePointOnMap(116.5937, 28.249)
     },
     // 加载部件服务的各图层
     addBjLayers: function() {
@@ -347,160 +333,159 @@
         url: serverConfig.mapUrlBj + '/3',
         id: 'dxbjMph'
       })
-      // this.layers.dx2wGrid = new this.esriObj.FeatureLayer({
-      //   url: serverConfig.mapUrlBase + '/6',
-      //   id: 'gridLayer'
-      // })
+      this.layers.dx2wGrid = new this.esriObj.FeatureLayer({
+        url: serverConfig.mapUrlBase + '/1',
+        id: 'gridLayer'
+      })
 
       // 加载各图层
       this.map.add(this.layers.dxbjPoint)
       this.map.add(this.layers.dxbjLine)
       this.map.add(this.layers.dxbjXqd)
       this.map.add(this.layers.dxbjMph)
-      // this.map.add(this.layers.dx2wGrid)
+      this.map.add(this.layers.dx2wGrid)
     },
     // 在兴趣点图层查询关键字
-    // queryOnMap: function() {
-    //   const points = [] // 查询结果点集
+    queryOnMap: function() {
+      const points = [] // 查询结果点集
 
-    //   this.clearQueryResults()
-    //   this.clearEOrCPoint()
-    //   this.showEventPointPopup = false
-    //   this.queryEventSwitch = '2'
+      this.clearQueryResults()
+      this.clearEOrCPoint()
+      this.showEventPointPopup = false
+      this.queryEventSwitch = '2'
 
-    //   // 查询条件
-    //   const query = new this.esriObj.Query()
-    //   query.returnGeometry = true
-    //   query.outFields = ['*']
-    //   query.where = 'NAME like ' + "'%" + this.keywords + "%'"
-    //   const that = this
+      // 查询条件
+      const query = new this.esriObj.Query()
+      query.returnGeometry = true
+      query.outFields = ['*']
+      query.where = 'NAME like ' + "'%" + this.keywords + "%'"
+      const that = this
 
-    //   this.layers.dxbjXqd.queryFeatures(query).then(function(results) {
-    //     results.features.forEach(item => {
-    //       const point = {}
-    //       point.x = item.geometry.longitude
-    //       point.y = item.geometry.latitude
-    //       point.attr = item.attributes
-    //       points.push(point)
-    //     })
+      this.layers.dxbjXqd.queryFeatures(query).then(function(results) {
+        results.features.forEach(item => {
+          const point = {}
+          point.x = item.geometry.longitude
+          point.y = item.geometry.latitude
+          point.attr = item.attributes
+          points.push(point)
+        })
 
-    //     // 提示查询结果
-    //     if (points.length > 0) {
-    //       that.$message({
-    //         message: '成功查询到' + points.length + '条记录',
-    //         type: 'success'
-    //       })
+        // 提示查询结果
+        if (points.length > 0) {
+          that.$message({
+            message: '成功查询到' + points.length + '条记录',
+            type: 'success'
+          })
 
-    //       // 绘制点
-    //       that.addSimpleMarkerOnMap(points)
-    //     } else {
-    //       that.$message({
-    //         message: '没有查询到结果，请重新输入关键字',
-    //         type: 'warning'
-    //       })
-    //     }
-    //   })
-    // },
+          // 绘制点
+          that.addSimpleMarkerOnMap(points)
+        } else {
+          that.$message({
+            message: '没有查询到结果，请重新输入关键字',
+            type: 'warning'
+          })
+        }
+      })
+    },
     // 清除图层上的查询结果
-    // clearQueryResults: function() {
-    //   this.map.layers.forEach(layer => {
-    //     if (layer.type === 'graphics' && layer.id === queryResultLayerId) {
-    //       layer.graphics.removeAll()
-    //       return false
-    //     }
-    //   })
-    // },
-    // // 清除图层上的查询结果
-    // clearMap: function() {
-    //   // 清除地图上绘制的graphic图层
-    //   this.map.layers.forEach(layer => {
-    //     if (layer.type === 'graphics') {
-    //       layer.graphics.removeAll()
-    //       return false
-    //     }
-    //   })
+    clearQueryResults: function() {
+      this.map.layers.forEach(layer => {
+        if (layer.type === 'graphics' && layer.id === queryResultLayerId) {
+          layer.graphics.removeAll()
+          return false
+        }
+      })
+    },
+    // 清除图层上的查询结果
+    clearMap: function() {
+      // 清除地图上绘制的graphic图层
+      this.map.layers.forEach(layer => {
+        if (layer.type === 'graphics') {
+          layer.graphics.removeAll()
+          return false
+        }
+      })
 
-    //   // 清除弹出框
-    //   this.view.popup.close()
+      // 清除弹出框
+      this.view.popup.close()
 
-    //   // 清除data属性值
-    //   this.keywords = ''
-    //   this.showEventPointPopup = true // 是否显示事部件的popup
-    //   this.queryEventSwitch = '1' // 1==查询事件；0==查询部件
-    //   this.compListOpts = [] // 部件选择下拉框option
-    //   this.longitude = '' // 定位点经度
-    //   this.latitude = '' // 定位点纬度
-    //   this.communityId = '' // 社区ID
-    //   this.communityName = '' // 社区名称
-    //   this.gridId = '' // 单元网格ID
-    //   this.componentId = '' // 部件ID
-    //   this.componentName = '' // 部件名称
-    // },
+      // 清除data属性值
+      this.keywords = ''
+      this.showEventPointPopup = true // 是否显示事部件的popup
+      this.queryEventSwitch = '1' // 1==查询事件；0==查询部件
+      this.compListOpts = [] // 部件选择下拉框option
+      this.longitude = '' // 定位点经度
+      this.latitude = '' // 定位点纬度
+      this.communityId = '' // 社区ID
+      this.communityName = '' // 社区名称
+      this.gridId = '' // 单元网格ID
+      this.componentId = '' // 部件ID
+      this.componentName = '' // 部件名称
+    },
     // 清除图层上的事件定位点
-    // clearEOrCPoint: function() {
-    //   this.map.layers.forEach(layer => {
-    //     if (layer.type === 'graphics' && layer.id === eventPointLayerId) {
-    //       layer.graphics.removeAll()
-    //       return false
-    //     }
-    //   })
-    //   // 清除弹出框
-    //   this.view.popup.close()
-    // },
+    clearEOrCPoint: function() {
+      this.map.layers.forEach(layer => {
+        if (layer.type === 'graphics' && layer.id === eventPointLayerId) {
+          layer.graphics.removeAll()
+          return false
+        }
+      })
+      // 清除弹出框
+      this.view.popup.close()
+    },
     // 切换
-    // switchEventOrComponent: function() {
-    //   // 如果选中的是事件定位（1）或部件定位（0），点击地图时弹出事件或者部件的popup；否则（2以上）显示兴趣点结果的属性popup
-    //   this.showEventPointPopup = this.queryEventSwitch < 2
-    // },
+    switchEventOrComponent: function() {
+      // 如果选中的是事件定位（1）或部件定位（0），点击地图时弹出事件或者部件的popup；否则（2以上）显示兴趣点结果的属性popup
+      this.showEventPointPopup = this.queryEventSwitch < 2
+    },
     // 将查询结果点集合绘制在地图上
-    // addSimpleMarkerOnMap: function(points) {
-    //   const gLayer = new this.esriObj.GraphicsLayer()
-    //   points.forEach(item => {
-    //     const point = new this.esriObj.Point(item.x, item.y, item.attr)
-    //     const marker = new this.esriObj.SimpleMarkerSymbol()
-    //     marker.color = '#F9690E'
-    //     marker.outline = {
-    //       color: [128, 128, 128, 0.5],
-    //       width: '2px'
-    //     }
-    //     const graphic = new this.esriObj.Graphic({
-    //       geometry: point,
-    //       symbol: marker,
-    //       attributes: item.attr
-    //     })
-    //     gLayer.id = queryResultLayerId
-    //     gLayer.add(graphic)
-    //   })
-    //   this.map.add(gLayer)
-    // },
+    addSimpleMarkerOnMap: function(points) {
+      const gLayer = new this.esriObj.GraphicsLayer()
+      points.forEach(item => {
+        const point = new this.esriObj.Point(item.x, item.y, item.attr)
+        const marker = new this.esriObj.SimpleMarkerSymbol()
+        marker.color = '#F9690E'
+        marker.outline = {
+          color: [128, 128, 128, 0.5],
+          width: '2px'
+        }
+        const graphic = new this.esriObj.Graphic({
+          geometry: point,
+          symbol: marker,
+          attributes: item.attr
+        })
+        gLayer.id = queryResultLayerId
+        gLayer.add(graphic)
+      })
+      this.map.add(gLayer)
+    },
     // 返回事件定位的结果
-    // checkEventPoint: function() {
-    //   this.$emit(
-    //     'closeMapQueryDialogByEvent',
-    //     this.longitude,
-    //     this.latitude,
-    //     this.communityId,
-    //     this.communityName,
-    //     this.gridId)
+    checkEventPoint: function() {
+      this.$emit(
+        'closeMapQueryDialogByEvent',
+        this.longitude,
+        this.latitude,
+        this.communityId,
+        this.communityName,
+        this.gridId)
 
-    //   this.clearMap()
-    // },
-    // // 返回部件定位的结果
-    // checkComponentPoint: function() {
-    //   this.$emit(
-    //     'closeMapQueryDialogByComp',
-    //     this.longitude,
-    //     this.latitude,
-    //     this.communityId,
-    //     this.communityName,
-    //     this.gridId,
-    //     this.componentId)
+      this.clearMap()
+    },
+    // 返回部件定位的结果
+    checkComponentPoint: function() {
+      this.$emit(
+        'closeMapQueryDialogByComp',
+        this.longitude,
+        this.latitude,
+        this.communityId,
+        this.communityName,
+        this.gridId,
+        this.componentId)
 
-    //   this.clearMap()
-    // },
+      this.clearMap()
+    },
     // 在地图上添加指定坐标的点
     addCasePointOnMap: function(lng, lat) {
-      console.log('addCasePointOnMap', lng, lat)
       const gLayer = new this.esriObj.GraphicsLayer() // 添加自定义绘制点的图层
       const point = new this.esriObj.Point(lng, lat) // 创建geometry对象
       const marker = new this.esriObj.SimpleMarkerSymbol() // 创建marker标识
@@ -521,14 +506,14 @@
 
       // 重新设置地图中心点并移动
       this.view.center = point
-      this.view.goTo(point)
+      this.view.goTo()
     }
   }
 }
 </script>
 
 <style scoped>
-  @import 'https://js.arcgis.com/4.13/esri/css/main.css';
+  @import 'http://192.168.8.205/arcgis_js_api/library/4.12/esri/css/main.css';
   .baseMap {
     height:60vh;
     width: 100%;
diff --git a/src/components/Map/arcgisMapRead.vue b/src/components/Map/arcgisMapRead.vue
new file mode 100644
index 0000000..ae2058b
--- /dev/null
+++ b/src/components/Map/arcgisMapRead.vue
@@ -0,0 +1,539 @@
+<template>
+  <div style="margin-top:-30px">
+    <!-- <el-row :gutter="20">
+      <el-col :span="4">
+        <el-input v-model="keywords" size="small" type="text" placeholder="兴趣点关键字" clearable />
+      </el-col>
+      <el-col :span="4">
+        <el-button type="primary" size="small" @click="queryOnMap">查询</el-button>
+        <el-button type="info" size="small" @click="clearMap"> 清除地图 </el-button>
+      </el-col>
+
+      <el-col :span="8" style="text-align: center;">
+        <el-radio-group v-model="queryEventSwitch" size="small" @change="switchEventOrComponent">
+          <el-radio-button label="1">事件定位</el-radio-button>
+          <el-radio-button label="0">部件定位</el-radio-button>
+          <el-radio-button label="2">兴趣点属性</el-radio-button>
+        </el-radio-group>
+      </el-col>
+
+      <el-col v-if="queryEventSwitch === '0'" :span="8" style="text-align: right;">
+        <el-select v-model="componentId" placeholder="选择部件" clearable value="" size="small">
+          <el-option
+            v-for="item in compListOpts"
+            :key="item.value"
+            :label="item.name"
+            :value="item.value"/>
+        </el-select>
+        <el-button type="primary" size="small" @click="checkComponentPoint"> 部件提交 </el-button>
+      </el-col>
+
+      <el-col v-if="queryEventSwitch === '1'" :span="8" style="text-align: right;">
+        <el-button type="primary" size="small" @click="checkEventPoint"> 事件提交 </el-button>
+      </el-col>
+    </el-row> -->
+
+    <div v-loading="mapLoading" ref="mapDiv" class="baseMap" />
+  </div>
+</template>
+
+<script>
+import { loadModules } from 'esri-loader'
+import { mapConfig, serverConfig } from './ArcGISConfig'
+
+const option = {
+  url: mapConfig.apiUrl
+}
+
+// const eventPointLayerId = 'eventPointLayer' // 事件定位点的图层id
+// const queryResultLayerId = 'queryResultLayer' // 兴趣点查询结果点集的图层id
+const caseLayerId = 'addedGeometryLayerId' // 案卷点图层
+
+export default {
+  name: 'ArcGisMapRead',
+  props: {
+    longitude: {
+      type: Number,
+      default: 116.5937
+    },
+    latitude: {
+      type: Number,
+      default: 28.249
+    }
+  },
+  data() {
+    return {
+      map: '',
+      view: '',
+      layers: {
+        dxbjPoint: '', // 部件点图层
+        dxbjLine: '', // 部件线图层
+        dxbjXqd: '', // 兴趣点图层
+        dxbjMph: '', // 门牌好图层
+        dx2wGrid: '' // 单元网格图层
+      },
+      esriObj: {
+        Map: '',
+        BaseMap: '',
+        Graphic: '',
+        PopupTemplate: '',
+        Circle: '',
+        Point: '',
+        FeatureLayer: '',
+        GraphicsLayer: '',
+        TileLayer: '',
+        SimpleMarkerSymbol: '',
+        Query: '',
+        QueryTask: '',
+        IdentifyTask: '',
+        IdentifyParameters: '',
+        MapView: ''
+      },
+      mapLoading: false
+      // keywords: '', // 查询关键字
+      // showEventPointPopup: true, // 是否显示事部件的popup
+      // queryEventSwitch: '1', // 1==查询事件；0==查询部件
+      // compListOpts: [], // 部件选择下拉框option
+      // 主页面返回值
+      // longitude: '', // 定位点经度
+      // latitude: '' // 定位点纬度
+      // communityId: '', // 社区ID
+      // communityName: '', // 社区名称
+      // gridId: '', // 单元网格ID
+      // componentId: '', // 部件ID
+      // componentName: '' // 部件名称/=
+    }
+  },
+  mounted() {
+    this.importEsri()
+  },
+  methods: {
+    // 初始化ArcGIS API对象
+    importEsri: function() {
+      this.mapLoading = true
+      loadModules([
+        'esri/Map',
+        'esri/Basemap',
+        'esri/Graphic',
+        'esri/PopupTemplate',
+        'esri/geometry/Circle',
+        'esri/geometry/Point',
+        'esri/layers/FeatureLayer',
+        'esri/layers/GraphicsLayer',
+        'esri/layers/TileLayer',
+        'esri/symbols/SimpleMarkerSymbol',
+        'esri/tasks/support/Query',
+        'esri/tasks/QueryTask',
+        'esri/tasks/IdentifyTask',
+        'esri/tasks/support/IdentifyParameters',
+        'esri/views/MapView',
+        'dojo/domReady!'
+      ], option)
+        .then(([
+          Map,
+          BaseMap,
+          Graphic,
+          PopupTemplate,
+          Circle,
+          Point,
+          FeatureLayer,
+          GraphicsLayer,
+          TileLayer,
+          SimpleMarkerSymbol,
+          Query,
+          QueryTask,
+          IdentifyTask,
+          IdentifyParameters,
+          MapView
+        ]) => {
+          this.esriObj.Map = Map
+          this.esriObj.BaseMap = BaseMap
+          this.esriObj.Graphic = Graphic
+          this.esriObj.PopupTemplate = PopupTemplate
+          this.esriObj.Circle = Circle
+          this.esriObj.Point = Point
+          this.esriObj.FeatureLayer = FeatureLayer
+          this.esriObj.GraphicsLayer = GraphicsLayer
+          this.esriObj.TileLayer = TileLayer
+          this.esriObj.SimpleMarkerSymbol = SimpleMarkerSymbol
+          this.esriObj.Query = Query
+          this.esriObj.QueryTask = QueryTask
+          this.esriObj.IdentifyTask = IdentifyTask
+          this.esriObj.IdentifyParameters = IdentifyParameters
+          this.esriObj.MapView = MapView
+
+          // 初始化地图
+          this.initMap()
+          this.mapLoading = false
+        }).catch(err => {
+          console.log(err)
+          this.mapLoading = false
+        })
+    },
+    // 初始化地图
+    initMap: function() {
+      const base = new this.esriObj.BaseMap({
+        baseLayers: [
+          new this.esriObj.TileLayer({ // 可配置属性，见TileLayer类
+            id: '2w',
+            url: serverConfig.mapUrlBase
+          })
+        ],
+        title: 'dx2w',
+        id: 'dx2w'
+      })
+
+      this.map = new this.esriObj.Map({
+        basemap: base // 底图类型，详见BaseMap类
+      })
+
+      this.view = new this.esriObj.MapView({
+        container: this.$refs.mapDiv, // 视图的容器
+        map: this.map, // Map的实例放入视图中
+        center: [116.597, 28.24], // 初始显示的地图中心点，经纬度
+        zoom: 3 // 当前地图缩放等级
+      })
+
+      // const that = this
+      // this.view.on('click', function(event) {
+      //   // 清除地图上已有的事件/部件查询点
+      //   that.clearEOrCPoint()
+
+      //   const lon = event.mapPoint.longitude
+      //   const lat = event.mapPoint.latitude
+
+      //   if (that.showEventPointPopup) {
+      //     // 添加点
+      //     const gLayer = new that.esriObj.GraphicsLayer()
+      //     const marker = new that.esriObj.SimpleMarkerSymbol()
+      //     marker.color = '#35A0E7'
+      //     marker.style = 'square'
+      //     marker.outline = {
+      //       color: [128, 128, 128, 0.5],
+      //       width: '2px'
+      //     }
+      //     const graphic = new that.esriObj.Graphic({
+      //       geometry: event.mapPoint,
+      //       symbol: marker
+      //     })
+
+      //     gLayer.id = eventPointLayerId
+      //     gLayer.add(graphic)
+      //     that.map.add(gLayer)
+
+      //     // 查询事件或者部件
+      //     if (that.queryEventSwitch === '1') {
+      //       // 事件定位
+      //       // 1查询底图得到所在网格与所在社区
+      //       const query = that.layers.dx2wGrid.createQuery()
+      //       query.geometry = that.view.toMap(event)
+      //       query.distance = 10
+      //       query.units = 'meters'
+      //       query.returnGeometry = true
+      //       query.outFields = ['BGID', 'COMMUID', 'COMMUNAME']
+      //       that.layers.dx2wGrid.queryFeatures(query)
+      //         .then(function(response) {
+      //           const result = response.features[0].attributes
+
+      //           // 赋值
+      //           that.longitude = lon
+      //           that.latitude = lat
+      //           that.gridId = result.BGID
+      //           that.communityId = result.COMMUID
+      //           that.communityName = result.COMMUNAME
+
+      //           // 2弹出气泡
+      //           that.view.popup.open({
+      //             title: '事件定位',
+      //             content: '坐标：[' + lon.toFixed(4) + ', ' + lat.toFixed(4) + ']' + '<p>' + '所在社区：' + result.COMMUNAME,
+      //             location: event.mapPoint
+      //           })
+      //         })
+      //     } else if (that.queryEventSwitch === '0') {
+      //       // 部件定位
+      //       const queryDev = that.layers.dxbjPoint.createQuery()
+      //       // 定义查询的圆形范围，半径5米
+      //       const circle = new that.esriObj.Circle({
+      //         center: event.mapPoint,
+      //         radius: 5,
+      //         radiusUnit: 'meters'
+      //       })
+      //       queryDev.geometry = circle
+      //       queryDev.returnGeometry = true
+      //       queryDev.outFields = ['BGID', 'OBJID', 'OBJNAME', 'OBJPOS']
+      //       that.layers.dxbjPoint.queryFeatures(queryDev)
+      //         .then(function(response) {
+      //           if (response.features.length > 0) {
+      //             const results = response.features
+
+      //             that.compListOpts = []
+
+      //             let content = ''
+      //             results.forEach((item, index) => {
+      //               content += '<p>部件' + (index + 1) + '：' + item.attributes.OBJNAME + '，' + item.attributes.OBJPOS
+      //               const comp = {}
+      //               comp.name = '部件' + (index + 1) + '：' + item.attributes.OBJNAME
+      //               comp.value = item.attributes.OBJID
+      //               that.compListOpts.push(comp)
+      //             })
+
+      //             // 2弹出气泡
+      //             that.view.popup.open({
+      //               title: '部件定位',
+      //               content: '坐标：[' + lon.toFixed(4) + ', ' + lat.toFixed(4) + ']，附近5米的部件有：' + content,
+      //               location: event.mapPoint
+      //             })
+
+      //             // 查询所在社区和单元网格
+      //             const queryPos = that.layers.dx2wGrid.createQuery()
+      //             queryPos.geometry = that.view.toMap(event)
+      //             queryPos.returnGeometry = true
+      //             queryPos.outFields = ['BGID', 'COMMUID', 'COMMUNAME']
+      //             that.layers.dx2wGrid.queryFeatures(queryPos)
+      //               .then(function(response) {
+      //                 const result = response.features[0].attributes
+
+      //                 // 赋值
+      //                 that.longitude = lon
+      //                 that.latitude = lat
+      //                 that.gridId = result.BGID
+      //                 that.communityId = result.COMMUID
+      //                 that.communityName = result.COMMUNAME
+      //               })
+      //           } else {
+      //             that.$message({
+      //               message: '没有查询到部件，请重新定位',
+      //               type: 'warning'
+      //             })
+      //           }
+      //         })
+      //     }
+      //   } else {
+      //     that.view.hitTest(event).then(function(response) {
+      //       if (response.results.length) {
+      //         const graphic = response.results[0].graphic
+      //         const name = graphic.attributes.KEYWORD
+      //         const address = graphic.attributes.OBJPOS
+
+      //         that.view.popup.open({
+      //           title: name,
+      //           content: address,
+      //           location: event.mapPoint
+      //         })
+      //       }
+      //     })
+      //   }
+      // })
+
+      this.addBjLayers()
+      this.addCasePointOnMap(this.longitude, this.latitude)
+    },
+    // 加载部件服务的各图层
+    addBjLayers: function() {
+      // 此处可以优化
+      this.layers.dxbjPoint = new this.esriObj.FeatureLayer({ // 可配置属性，见TileLayer类
+        url: serverConfig.mapUrlBj + '/0',
+        id: 'dxbjPoint'
+      })
+      this.layers.dxbjLine = new this.esriObj.FeatureLayer({ // 可配置属性，见TileLayer类
+        url: serverConfig.mapUrlBj + '/1',
+        id: 'dxbjLine'
+      })
+      this.layers.dxbjXqd = new this.esriObj.FeatureLayer({ // 可配置属性，见TileLayer类
+        url: serverConfig.mapUrlBj + '/2',
+        id: 'dxbjXqd'
+      })
+      this.layers.dxbjMph = new this.esriObj.FeatureLayer({ // 可配置属性，见TileLayer类
+        url: serverConfig.mapUrlBj + '/3',
+        id: 'dxbjMph'
+      })
+      // this.layers.dx2wGrid = new this.esriObj.FeatureLayer({
+      //   url: serverConfig.mapUrlBase + '/6',
+      //   id: 'gridLayer'
+      // })
+
+      // 加载各图层
+      this.map.add(this.layers.dxbjPoint)
+      this.map.add(this.layers.dxbjLine)
+      this.map.add(this.layers.dxbjXqd)
+      this.map.add(this.layers.dxbjMph)
+      // this.map.add(this.layers.dx2wGrid)
+    },
+    // 在兴趣点图层查询关键字
+    // queryOnMap: function() {
+    //   const points = [] // 查询结果点集
+
+    //   this.clearQueryResults()
+    //   this.clearEOrCPoint()
+    //   this.showEventPointPopup = false
+    //   this.queryEventSwitch = '2'
+
+    //   // 查询条件
+    //   const query = new this.esriObj.Query()
+    //   query.returnGeometry = true
+    //   query.outFields = ['*']
+    //   query.where = 'NAME like ' + "'%" + this.keywords + "%'"
+    //   const that = this
+
+    //   this.layers.dxbjXqd.queryFeatures(query).then(function(results) {
+    //     results.features.forEach(item => {
+    //       const point = {}
+    //       point.x = item.geometry.longitude
+    //       point.y = item.geometry.latitude
+    //       point.attr = item.attributes
+    //       points.push(point)
+    //     })
+
+    //     // 提示查询结果
+    //     if (points.length > 0) {
+    //       that.$message({
+    //         message: '成功查询到' + points.length + '条记录',
+    //         type: 'success'
+    //       })
+
+    //       // 绘制点
+    //       that.addSimpleMarkerOnMap(points)
+    //     } else {
+    //       that.$message({
+    //         message: '没有查询到结果，请重新输入关键字',
+    //         type: 'warning'
+    //       })
+    //     }
+    //   })
+    // },
+    // 清除图层上的查询结果
+    // clearQueryResults: function() {
+    //   this.map.layers.forEach(layer => {
+    //     if (layer.type === 'graphics' && layer.id === queryResultLayerId) {
+    //       layer.graphics.removeAll()
+    //       return false
+    //     }
+    //   })
+    // },
+    // // 清除图层上的查询结果
+    // clearMap: function() {
+    //   // 清除地图上绘制的graphic图层
+    //   this.map.layers.forEach(layer => {
+    //     if (layer.type === 'graphics') {
+    //       layer.graphics.removeAll()
+    //       return false
+    //     }
+    //   })
+
+    //   // 清除弹出框
+    //   this.view.popup.close()
+
+    //   // 清除data属性值
+    //   this.keywords = ''
+    //   this.showEventPointPopup = true // 是否显示事部件的popup
+    //   this.queryEventSwitch = '1' // 1==查询事件；0==查询部件
+    //   this.compListOpts = [] // 部件选择下拉框option
+    //   this.longitude = '' // 定位点经度
+    //   this.latitude = '' // 定位点纬度
+    //   this.communityId = '' // 社区ID
+    //   this.communityName = '' // 社区名称
+    //   this.gridId = '' // 单元网格ID
+    //   this.componentId = '' // 部件ID
+    //   this.componentName = '' // 部件名称
+    // },
+    // 清除图层上的事件定位点
+    // clearEOrCPoint: function() {
+    //   this.map.layers.forEach(layer => {
+    //     if (layer.type === 'graphics' && layer.id === eventPointLayerId) {
+    //       layer.graphics.removeAll()
+    //       return false
+    //     }
+    //   })
+    //   // 清除弹出框
+    //   this.view.popup.close()
+    // },
+    // 切换
+    // switchEventOrComponent: function() {
+    //   // 如果选中的是事件定位（1）或部件定位（0），点击地图时弹出事件或者部件的popup；否则（2以上）显示兴趣点结果的属性popup
+    //   this.showEventPointPopup = this.queryEventSwitch < 2
+    // },
+    // 将查询结果点集合绘制在地图上
+    // addSimpleMarkerOnMap: function(points) {
+    //   const gLayer = new this.esriObj.GraphicsLayer()
+    //   points.forEach(item => {
+    //     const point = new this.esriObj.Point(item.x, item.y, item.attr)
+    //     const marker = new this.esriObj.SimpleMarkerSymbol()
+    //     marker.color = '#F9690E'
+    //     marker.outline = {
+    //       color: [128, 128, 128, 0.5],
+    //       width: '2px'
+    //     }
+    //     const graphic = new this.esriObj.Graphic({
+    //       geometry: point,
+    //       symbol: marker,
+    //       attributes: item.attr
+    //     })
+    //     gLayer.id = queryResultLayerId
+    //     gLayer.add(graphic)
+    //   })
+    //   this.map.add(gLayer)
+    // },
+    // 返回事件定位的结果
+    // checkEventPoint: function() {
+    //   this.$emit(
+    //     'closeMapQueryDialogByEvent',
+    //     this.longitude,
+    //     this.latitude,
+    //     this.communityId,
+    //     this.communityName,
+    //     this.gridId)
+
+    //   this.clearMap()
+    // },
+    // // 返回部件定位的结果
+    // checkComponentPoint: function() {
+    //   this.$emit(
+    //     'closeMapQueryDialogByComp',
+    //     this.longitude,
+    //     this.latitude,
+    //     this.communityId,
+    //     this.communityName,
+    //     this.gridId,
+    //     this.componentId)
+
+    //   this.clearMap()
+    // },
+    // 在地图上添加指定坐标的点
+    addCasePointOnMap: function(lng, lat) {
+      console.log('addCasePointOnMap', lng, lat)
+      const gLayer = new this.esriObj.GraphicsLayer() // 添加自定义绘制点的图层
+      const point = new this.esriObj.Point(lng, lat) // 创建geometry对象
+      const marker = new this.esriObj.SimpleMarkerSymbol() // 创建marker标识
+      // marker属性
+      marker.color = '#F9690E'
+      marker.outline = {
+        color: [128, 128, 128, 0.5],
+        width: '2px'
+      }
+      // 创建graphic对象
+      const graphic = new this.esriObj.Graphic({
+        geometry: point,
+        symbol: marker
+      })
+      gLayer.id = caseLayerId // 标识案卷图层
+      gLayer.add(graphic) // 图层上添加对象
+      this.map.add(gLayer) // 地图上添加图层
+
+      // 重新设置地图中心点并移动
+      this.view.center = point
+      this.view.goTo(point)
+    }
+  }
+}
+</script>
+
+<style scoped>
+  @import 'https://js.arcgis.com/4.13/esri/css/main.css';
+  .baseMap {
+    height:60vh;
+    width: 100%;
+    margin-top: 25px;
+    border: 1px solid #DCDCDC;
+    border-radius: 4px;
+  }
+</style>
diff --git a/src/router/index.js b/src/router/index.js
index b265a48..1c80473 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -11,6 +11,7 @@
 import { systemRouters } from './modules/system'
 import { cooRouters } from './modules/coo'
 import { commenetRouters } from './modules/comment'
+import { suphandleRouters } from './modules/suphandle'
 import { commonRouters } from './modules/common'
 
 /**
@@ -90,6 +91,7 @@
 export const asyncRouterMap = [
   ...commonRouters,
   ...cooRouters,
+  ...suphandleRouters,
   ...systemRouters,
   ...commenetRouters,
   { path: '*', redirect: '/404', hidden: true, meta: {}}
diff --git a/src/router/modules/suphandle.js b/src/router/modules/suphandle.js
new file mode 100644
index 0000000..7026a7b
--- /dev/null
+++ b/src/router/modules/suphandle.js
@@ -0,0 +1,35 @@
+/* Layout */
+import Layout from '../../views/layout/Layout'
+export const suphandleRouters = [
+  {
+    path: '/suphandle',
+    name: 'suphandle',
+    redirect: '/accessDept',
+    hidden: true,
+    meta: {
+      title: '监督受理子系统',
+      permission: ['/suphandle'],
+      isSys: true
+    }
+  },
+  {
+    path: '/callBus',
+    component: Layout,
+    redirect: '/callBus',
+    name: 'CallBus',
+    alwaysShow: true,
+    meta: {
+      title: '呼叫业务',
+      permission: ['/callBus'],
+      sys: '/suphandle'
+    },
+    children: [
+      {
+        path: '/callCase',
+        component: () => import('@/views/callCase/callCase'),
+        name: 'CallCase',
+        meta: { title: '建立案卷', icon: '', belongSys: '', permission: '/callCase' }
+      }
+    ]
+  }
+]
diff --git a/src/router/modules/system.js b/src/router/modules/system.js
index 10bff2e..c80b732 100644
--- a/src/router/modules/system.js
+++ b/src/router/modules/system.js
@@ -48,6 +48,12 @@
         component: () => import('@/views/busAdmin/userDevice/userDevice'),
         name: 'UserDevice',
         meta: { title: '终端设备管理', icon: '', permission: ['/userDevice'] }
+      },
+      {
+        path: '/areaPersonliable',
+        component: () => import('@/views/busAdmin/areaPersonliable/areaPersonliable'),
+        name: 'AreaPersonliable',
+        meta: { title: '网格责任人管理', icon: '', permission: ['/areaPersonliable'] }
       }
     ]
   },
diff --git a/src/views/busAdmin/areaPersonliable/areaPersonliable.vue b/src/views/busAdmin/areaPersonliable/areaPersonliable.vue
new file mode 100644
index 0000000..23a26de
--- /dev/null
+++ b/src/views/busAdmin/areaPersonliable/areaPersonliable.vue
@@ -0,0 +1,156 @@
+<template>
+  <div class="table-container">
+    <el-row class="table-title">
+      <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
+      <el-col :span="12" :offset="6" class="edit_btns">
+        <el-button v-if="hasPerm('/areaPersonliable/add')" class="edit_btn" size="small" @click="add">新增</el-button>
+      </el-col>
+    </el-row>
+    <el-table v-loading="listLoading" ref="table" :data="list" class="table" border>
+      <el-table-column :index="indexMethod" align="center" type="index" />
+      <el-table-column v-for="column in tableColumns" :key="column.value" :label="column.text" align="center">
+        <template slot-scope="scope">
+          <span>{{ scope.row[column.value] }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column v-if="hasPerm('/areaPersonliable/update')||hasPerm('/areaPersonliable/delete')" label="操作" align="center" width="200">
+        <template slot-scope="scope">
+          <el-button v-if="hasPerm('/areaPersonliable/update')" class="table-button" type="text" @click="edit(scope.row)">编辑</el-button>
+          <el-button v-if="hasPerm('/areaPersonliable/delete')" class="table-button" type="text" @click="del(scope.row)">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <div class="pagination-container">
+      <el-pagination
+        :current-page="listQuery.offset"
+        :page-sizes="[10,20,30,50]"
+        :page-size="listQuery.limit"
+        :total="total"
+        align="center"
+        layout="total, sizes, prev, pager, next"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"/>
+    </div>
+
+    <edit-area-personliable ref="editAreaPersonliable" @watchChild="fetchData"/>
+  </div>
+</template>
+
+<script>
+import { getAreaPersonliableList, deleteAreaPersonliable } from '@/api/busAdmin/areaPersonliable'
+import EditAreaPersonliable from './editAreaPersonliable'
+
+export default {
+  name: 'AreaPersonliable',
+  components: { EditAreaPersonliable },
+  data() {
+    return {
+      list: [],
+      total: 0,
+      listLoading: false,
+      listQuery: {
+        limit: 10,
+        offset: 1,
+        sort: 'id',
+        order: 'asc'
+      },
+      tableColumns: [
+        {
+          text: '网格名称',
+          value: 'areaName'
+        },
+        {
+          text: '责任人姓名',
+          value: 'userName'
+        },
+        {
+          text: '所属区域',
+          value: 'pAreaName'
+        }
+      ]
+    }
+  },
+  activated() {
+    this.fetchData()
+  },
+  methods: {
+    async fetchData() {
+      this.listLoading = true
+      const res = await getAreaPersonliableList(this.listQuery)
+      this.list = res.data.rows
+      this.total = parseInt(res.data.total)
+      this.listLoading = false
+    },
+    indexMethod(index) {
+      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
+    },
+    // 改变页容量
+    handleSizeChange(val) {
+      this.listQuery.limit = val
+      this.fetchData()
+    },
+    // 改变当前页
+    handleCurrentChange(val) {
+      this.listQuery.offset = val
+      this.fetchData()
+    },
+    add() {
+      this.$refs.editAreaPersonliable.initDialog(true, 'create')
+    },
+    edit(row) {
+      this.$refs.editAreaPersonliable.initDialog(true, 'update', row)
+    },
+    del(row) {
+      this.$confirm(
+        '确定要删除吗？',
+        '确认操作',
+        {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }
+      ).then(() => {
+        deleteAreaPersonliable(row.id).then(response => {
+          if (response.code === 200) {
+            this.$message.success('删除成功')
+            this.fetchData()
+          }
+        })
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  $tableTitleHeight:46px;
+  .table{
+    margin-bottom: 20px;
+  }
+  .table-container{
+    margin: 20px;
+  }
+  .table-title{
+    background-color:rgba(243, 243, 243, 1);
+    height: $tableTitleHeight;
+    .title-header{
+      line-height:$tableTitleHeight;
+      color: #606266;
+      font-size: 15px;
+      i{
+        margin-left: 5px;
+        margin-right: 5px;
+      }
+    }
+  }
+  .edit_btns{
+    .edit_btn{
+      float:right;
+      margin:7px 3px;//为了需要居中显示margin-top和bottom要用$tableTitleHeight减去按钮原高度除以2
+    }
+  }
+  .table-button{
+    padding: 10px;
+    height: 23px;
+  }
+</style>
diff --git a/src/views/busAdmin/areaPersonliable/areaSelectTree.vue b/src/views/busAdmin/areaPersonliable/areaSelectTree.vue
new file mode 100644
index 0000000..d0ba37f
--- /dev/null
+++ b/src/views/busAdmin/areaPersonliable/areaSelectTree.vue
@@ -0,0 +1,80 @@
+<template>
+  <el-dialog :visible.sync="dialogFormVisible" append-to-body custom-class="area-select-dialog" title="选择责任网格">
+    <el-scrollbar style="height: 400px">
+      <el-tree
+        ref="tree"
+        :expand-on-click-node="false"
+        :props="defaultProps"
+        :load="loadNode"
+        node-key="id"
+        lazy
+      />
+    </el-scrollbar>
+    <div slot="footer" class="dialog-footer">
+      <el-button type="primary" @click="confirmSelect">确定</el-button>
+      <el-button @click="cancel">取消</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { getAreaTree } from '@/api/area'
+export default {
+  name: 'AreaSelectTree',
+  data() {
+    return {
+      dialogFormVisible: true,
+      defaultProps: {
+        label: 'name',
+        children: 'children',
+        isLeaf: 'leaf'
+      },
+      listQuery: {
+        pid: ''
+      }
+    }
+  },
+  methods: {
+    // 获取数据
+    // fetchData() {
+    //   return new Promise(function(resolve, reject) {
+    //     getAreaTree(this.roleId)
+    //   })
+    // },
+    initDialog() {
+      this.dialogFormVisible = true
+    },
+    loadNode(node, resolve) {
+      if (node.data && node.data.id) {
+        this.listQuery.pid = node.data.id
+      }
+      getAreaTree(this.listQuery).then(response => {
+        const data = response.data
+        resolve(data)
+      })
+    },
+    // 选择后的操作
+    confirmSelect() {
+      const node = this.$refs.tree.getCurrentNode()
+      this.dialogFormVisible = false
+      this.$emit('selectDone', node)
+    },
+    cancel() {
+      this.dialogFormVisible = false
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
+
+<style lang="scss" scope>
+  .area-select-dialog{
+    width: 400px;
+    .el-scrollbar__wrap{
+      overflow-x: hidden !important;
+    }
+  }
+</style>
diff --git a/src/views/busAdmin/areaPersonliable/editAreaPersonliable.vue b/src/views/busAdmin/areaPersonliable/editAreaPersonliable.vue
new file mode 100644
index 0000000..60e99e7
--- /dev/null
+++ b/src/views/busAdmin/areaPersonliable/editAreaPersonliable.vue
@@ -0,0 +1,156 @@
+<template>
+  <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" append-to-body width="35%">
+    <el-form ref="dataForm" :model="AreaPersonliableForm" :rules="rules" label-width="100px">
+      <el-form-item label="网格名称" prop="areaName">
+        <el-input
+          v-model="AreaPersonliableForm.areaName"
+          :disabled="dialogStatus === 'update'"
+          placeholder="请选择责任网格"
+          @focus="openAreaSelect"/>
+      </el-form-item>
+      <el-form-item label="责任人姓名" prop="userId">
+        <el-select v-model="AreaPersonliableForm.userId" filterable clearable style="width:100%" placeholder="请选择责任人">
+          <el-option v-for="user in userList" :key="user.id" :label="user.name" :value="user.id"/>
+        </el-select>
+      </el-form-item>
+    </el-form>
+    <div slot="footer" class="dialog-footer">
+      <el-button type="primary" @click="saveData">保存</el-button>
+      <el-button @click="cancel">取消</el-button>
+    </div>
+    <area-select-tree v-if="areaSelectShow" ref="areaSelect" @selectDone="selectArea"/>
+  </el-dialog>
+</template>
+
+<script>
+import AreaSelectTree from './areaSelectTree'
+import { getSupervisorList, addAreaPersonliable, updateAreaPersonliable } from '@/api/busAdmin/areaPersonliable'
+
+export default {
+  name: 'EditAreaPersonliable',
+  components: { AreaSelectTree },
+  data() {
+    return {
+      dialogFormVisible: false,
+      dialogStatus: '',
+      textMap: {
+        update: '编辑',
+        create: '新增'
+      },
+      AreaPersonliableForm: {
+        id: '',
+        areaId: '',
+        areaName: '',
+        userId: ''
+      },
+      userList: [],
+      rules: {
+        areaName: [{ required: true, message: '区域不能为空', trigger: ['change'] }],
+        userId: [{ required: true, message: '用户不能为空', trigger: ['blur', 'change'] }]
+      },
+      areaSelectShow: false
+    }
+  },
+  mounted() {
+    this.fetchUserList()
+  },
+  methods: {
+    initDialog(dialogFormVisible, dialogStatus, row = null) {
+      this.dialogFormVisible = dialogFormVisible
+      this.dialogStatus = dialogStatus
+      if (this.dialogStatus === 'create') {
+      // 新增时，清空表格和校验
+        this.resetForm()
+        this.$nextTick(() => {
+          this.$refs['dataForm'].clearValidate()
+        })
+      } else if (this.dialogStatus === 'update') {
+      // 更新时，填充数据
+        console.log(row)
+        this.AreaPersonliableForm.id = row.id
+        this.AreaPersonliableForm.areaId = row.areaId
+        this.AreaPersonliableForm.areaName = row.areaName
+        this.AreaPersonliableForm.userId = row.userId
+      }
+    },
+    resetForm() {
+      this.AreaPersonliableForm = {
+        id: '',
+        areaId: '',
+        areaName: '',
+        userId: ''
+      }
+    },
+    fetchUserList() {
+      getSupervisorList().then(response => {
+        this.userList = response.data
+      })
+    },
+    openAreaSelect() {
+      this.areaSelectShow = true
+      setTimeout(this.$refs.areaSelect.initDialog(), 200)
+    },
+    selectArea(node) {
+      this.AreaPersonliableForm.areaId = node.id
+      this.AreaPersonliableForm.areaName = node.name
+    },
+    cancel() {
+      this.dialogFormVisible = false
+    },
+    saveData() {
+      if (this.dialogStatus === 'create') {
+        this.createData()
+      } else if (this.dialogStatus === 'update') {
+        this.updateData()
+      }
+    },
+    createData() {
+      this.$refs['dataForm'].validate(valid => {
+        if (valid) {
+          console.log('create valid success')
+          console.log(this.AreaPersonliableForm)
+          addAreaPersonliable(this.AreaPersonliableForm).then(response => {
+            if (response.code === 200) {
+              this.$message.success('添加成功')
+              this.$emit('watchChild')
+              this.dialogFormVisible = false
+            } else {
+              this.$message.error(response.message)
+            }
+          })
+        } else {
+          console.log('create valid error')
+        }
+      })
+    },
+    updateData() {
+      console.log('update data')
+      this.$refs['dataForm'].validate(valid => {
+        if (valid) {
+          console.log('update valid success')
+          console.log(this.AreaPersonliableForm)
+          updateAreaPersonliable(this.AreaPersonliableForm).then(response => {
+            if (response.code === 200) {
+              this.$message.success('修改成功')
+              this.$emit('watchChild')
+              this.dialogFormVisible = false
+            } else {
+              this.$message.error('修改失败')
+            }
+          })
+        } else {
+          console.log('update valid error')
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.el-form-item {
+  margin-bottom: 22px;
+  margin-left: 20px;
+  margin-right: 50px;
+}
+</style>

diff --git a/src/api/busAdmin/areaPersonliable.js b/src/api/busAdmin/areaPersonliable.js
new file mode 100644
index 0000000..58737bb
--- /dev/null
+++ b/src/api/busAdmin/areaPersonliable.js
@@ -0,0 +1,45 @@
+import request from '@/utils/request'
+
+export function getAreaPersonliableList(params) {
+  return request({
+    url: '/areaPersonliable/listPage',
+    method: 'get',
+    params
+  })
+}
+
+export function addAreaPersonliable(params) {
+  return request({
+    url: '/areaPersonliable/add',
+    method: 'post',
+    params
+  })
+}
+
+export function updateAreaPersonliable(params) {
+  return request({
+    url: '/areaPersonliable/update',
+    method: 'post',
+    params
+  })
+}
+
+export function deleteAreaPersonliable(id) {
+  return request({
+    url: '/areaPersonliable/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+export function getSupervisorList() {
+  return request({
+    url: '/mgr/simplelist',
+    method: 'post',
+    params: {
+      roleTips: 'supervisor'
+    }
+  })
+}
diff --git a/src/api/callCase/callCase.js b/src/api/callCase/callCase.js
new file mode 100644
index 0000000..7500fc7
--- /dev/null
+++ b/src/api/callCase/callCase.js
@@ -0,0 +1,87 @@
+/**
+ * 新建案卷的接口
+ */
+import request from '@/utils/request'
+
+// 获取案卷信息来源
+export function getCaseSource(params) {
+  return request({
+    url: 'dict/code/caseSource',
+    method: 'get',
+    params
+  })
+}
+
+// 获取案卷等级
+export function getCaseLevel(params) {
+  return request({
+    url: 'dict/code/caseLevel',
+    method: 'get',
+    params
+  })
+}
+
+// 获取案卷类别
+export function getCaseEorC(params) {
+  return request({
+    url: 'dict/code/eorc',
+    method: 'get',
+    params
+  })
+}
+
+// 根据案卷类别获取案卷大类
+export function getCaseType(eorc) {
+  return request({
+    url: 'case/type/list',
+    method: 'get',
+    params: {
+      eorc: eorc
+    }
+  })
+}
+
+// 根据案卷大类获取案卷小类
+export function getCaseDetailType(caseTypeId) {
+  return request({
+    url: 'case/typeDetail/list',
+    method: 'get',
+    params: {
+      typeId: caseTypeId
+    }
+  })
+}
+
+// 根据案卷小类获取结案标准
+export function getCaseTypesTime(caseTypeDetailId) {
+  return request({
+    url: 'case/typesTime/list',
+    method: 'get',
+    params: {
+      detailId: caseTypeDetailId
+    }
+  })
+}
+
+// 获取监督员列表
+export function getVerifyPerson(params) {
+  return request({
+    url: 'mgr/simplelist',
+    method: 'post',
+    params: {
+      roleTips: 'supervisor'
+    }
+  })
+}
+
+// 新增案卷
+export function addCase(params) {
+  return request({
+    url: 'case/add',
+    method: 'post',
+    headers: {
+      'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
+    },
+    params
+  })
+}
diff --git a/src/api/coorBusiness/case.js b/src/api/coorBusiness/case.js
index ec5a88a..08c3a13 100644
--- a/src/api/coorBusiness/case.js
+++ b/src/api/coorBusiness/case.js
@@ -110,9 +110,10 @@
   })
 }
 
+// 待处理
 export function toHandleListPage(params) {
   return request({
-    url: 'case/toHandleListPage/',
+    url: 'case/toProcessListPage/',
     method: 'get',
     params
   })
@@ -158,9 +159,10 @@
   })
 }
 
+// 待核查
 export function toCheckListPage(params) {
   return request({
-    url: 'case/toCheckListPage/',
+    url: 'case/toDisCheckListPage/',
     method: 'get',
     params
   })
diff --git a/src/components/CaseCommon/caseDetail.vue b/src/components/CaseCommon/caseDetail.vue
index f6c23ab..fdadcba 100644
--- a/src/components/CaseCommon/caseDetail.vue
+++ b/src/components/CaseCommon/caseDetail.vue
@@ -276,7 +276,7 @@
     </el-row>
     <el-row>
       <div class="title">数据流转:</div>
-      <el-table :data="recordList" :header-cell-style="{background:'#f3f3f3'}" class="table" border>
+      <el-table :data="recordList" :header-cell-style="{background:'#f3f3f3'}" max-height="400" class="table" border>
         <el-table-column prop="operationTypeName" label="操作" align="center"/>
         <el-table-column prop="deptName" label="单位" align="center"/>
         <el-table-column prop="userName" label="人员" align="center"/>
@@ -293,7 +293,7 @@
       :append-to-body="true"
       title="位置详情"
     >
-      <arc-gis-map :longitude="Number(caseDetail.lng)" :latitude="Number(caseDetail.lat)"/>
+      <arc-gis-map-read :longitude="Number(caseDetail.lng)" :latitude="Number(caseDetail.lat)"/>
     </el-dialog>
   </div>
 </template>
@@ -303,12 +303,12 @@
 import { getCaseDetail, getUserList, getDeptList, getCaseTypeList, getCaseTypeDetailList, getCaseTypeTimes } from '@/api/coorBusiness/case'
 import { getCommonLanguage, getFilingTypeList, getCaseLevelList } from '@/api/coorBusiness/dict'
 import { historicalRecords, nextNodes, completeCaseTask } from '@/api/coorBusiness/process'
-import ArcGisMap from '@/components/Map/arcgisMap'
+import ArcGisMapRead from '@/components/Map/arcgisMapRead'
 import { radioMap } from './radioMap'
 
 export default {
   name: 'CaseDetail',
-  components: { ArcGisMap },
+  components: { ArcGisMapRead },
   // props: {
   //   id: {
   //     type: String,
@@ -334,7 +334,6 @@
       showNeedVisit: false,
       caseDetail: {},
       operationKey: '', // 案件处理按钮key
-      imgurl: 'http:\\\\192.168.8.201:8083\\static\\',
       fileIdVerify: [], // 核实照片id
       fileIdProcess: [], // 处理照片id
       fileIdCheck: [], // 核查照片id
@@ -358,10 +357,12 @@
   computed: {
     isNeedVisit: function() {
       return this.caseDetail.isNeedRevisit === 1 ? '需要回访' : '不需要回访'
+    },
+    imgurl() {
+      return process.env.BASE_API + '/static/'
     }
   },
-  mounted() {
-    console.log('case dtial')
+  created() {
     this.id = this.$route.query.id
     this.showProcess = (this.$route.query.showProcess || this.$route.query.showProcess === false) ? this.$route.query.showProcess : true
     this.showNeedVisit = this.$route.query.showNeedVisit ? this.$route.query.showNeedVisit : false
@@ -371,7 +372,6 @@
     async initData() {
       // 查询案件详情接口
       const resDetail = await getCaseDetail(this.id)
-      console.log('detail', resDetail)
       this.caseDetail = resDetail.data[0]
 
       // 解析图片id
@@ -391,9 +391,11 @@
 
       // 查询流转记录接口
       this.processForm.processId = this.caseDetail.processId
-      const resRecord = await historicalRecords(this.processForm.processId)
-      this.recordList = resRecord.data
-      console.log(this.recordList)
+      // const resRecord = historicalRecords(this.processForm.processId)
+      // this.recordList = resRecord.data
+      historicalRecords(this.processForm.processId).then(res => {
+        this.recordList = res.data
+      })
 
       if (this.showProcess) {
         this.initProcess()
@@ -701,6 +703,7 @@
   .table{
     margin: 20px;
     width: 98%;
+    // max-height: 250px;
   }
   .title{
     margin-left: 38px;
diff --git a/src/components/CaseCommon/caseDetailRead.vue b/src/components/CaseCommon/caseDetailRead.vue
index 82066db..a4e87b0 100644
--- a/src/components/CaseCommon/caseDetailRead.vue
+++ b/src/components/CaseCommon/caseDetailRead.vue
@@ -158,11 +158,11 @@
 
 <script>
 import { getCaseDetail } from '@/api/coorBusiness/case'
-import ArcGisMap from '@/components/Map/arcgisMap'
+import ArcGisMapRead from '@/components/Map/arcgisMapRead'
 
 export default {
   name: 'CaseDetail',
-  components: { ArcGisMap },
+  components: { ArcGisMapRead },
   props: {
     id: {
       type: String,
diff --git a/src/components/Map/ArcGISConfig.js b/src/components/Map/ArcGISConfig.js
index d325da9..50cea3b 100644
--- a/src/components/Map/ArcGISConfig.js
+++ b/src/components/Map/ArcGISConfig.js
@@ -1,14 +1,16 @@
 export const mapConfig = {
-  apiUrl: 'https://js.arcgis.com/4.13/', // 暂时使用管网提供的api，实际部署时建议离线部署一套
+  apiUrl: 'http://192.168.8.205/arcgis_js_api/library/4.12/init.js', // 暂时使用管网提供的api，实际部署时建议离线部署一套
+  // apiUrl: 'https://js.arcgis.com/4.13/',
   mapIp: '223.84.218.107', // 服务ip
   mapPort: '6080', // 服务端口
-  serverBase: 'http://223.84.218.107:6080/arcgis/rest/services/', // 服务地址前缀
+  serverBase: 'http://192.168.8.205:6080/arcgis/rest/services/', // 服务地址前缀
+  // serverBase: 'http://223.84.218.107:6080/arcgis/rest/services/dx/',
   mapCenter: '[116.597,28.24]' // 地图中心点
 }
 
 export const serverConfig = {
-  mapUrlBase: mapConfig.serverBase + 'dx/2w/MapServer', // 底图服务地址
-  mapUrlBj: mapConfig.serverBase + 'dx/dxbj/MapServer', // 部件服务地址
-  mapUrlBjfc: mapConfig.serverBase + 'dx/bjfc/MapServer', // 部件分层服务地址
-  mapUrlBjEdit: mapConfig.serverBase + 'dx/dxbj/FeatureServer' // 可编辑的部件图层
+  mapUrlBase: mapConfig.serverBase + '2w/MapServer', // 底图服务地址
+  mapUrlBj: mapConfig.serverBase + 'dxbj/MapServer', // 部件服务地址
+  mapUrlBjfc: mapConfig.serverBase + 'bjfc/MapServer', // 部件分层服务地址
+  mapUrlBjEdit: mapConfig.serverBase + 'dxbj/FeatureServer' // 可编辑的部件图层
 }
diff --git a/src/components/Map/arcgisMap.vue b/src/components/Map/arcgisMap.vue
index 53776f1..5c15383 100644
--- a/src/components/Map/arcgisMap.vue
+++ b/src/components/Map/arcgisMap.vue
@@ -1,6 +1,6 @@
 <template>
-  <div style="margin-top:-30px">
-    <!-- <el-row :gutter="20">
+  <div>
+    <el-row :gutter="20">
       <el-col :span="4">
         <el-input v-model="keywords" size="small" type="text" placeholder="兴趣点关键字" clearable />
       </el-col>
@@ -31,9 +31,9 @@
       <el-col v-if="queryEventSwitch === '1'" :span="8" style="text-align: right;">
         <el-button type="primary" size="small" @click="checkEventPoint"> 事件提交 </el-button>
       </el-col>
-    </el-row> -->
+    </el-row>
 
-    <div v-loading="mapLoading" ref="mapDiv" class="baseMap" />
+    <div ref="mapDiv" class="baseMap" />
   </div>
 </template>
 
@@ -45,22 +45,12 @@
   url: mapConfig.apiUrl
 }
 
-// const eventPointLayerId = 'eventPointLayer' // 事件定位点的图层id
-// const queryResultLayerId = 'queryResultLayer' // 兴趣点查询结果点集的图层id
+const eventPointLayerId = 'eventPointLayer' // 事件定位点的图层id
+const queryResultLayerId = 'queryResultLayer' // 兴趣点查询结果点集的图层id
 const caseLayerId = 'addedGeometryLayerId' // 案卷点图层
 
 export default {
-  name: 'ArcGisMap',
-  props: {
-    longitude: {
-      type: Number,
-      default: 116.5937
-    },
-    latitude: {
-      type: Number,
-      default: 28.249
-    }
-  },
+  name: 'ArcGISMap',
   data() {
     return {
       map: '',
@@ -89,19 +79,18 @@
         IdentifyParameters: '',
         MapView: ''
       },
-      mapLoading: false
-      // keywords: '', // 查询关键字
-      // showEventPointPopup: true, // 是否显示事部件的popup
-      // queryEventSwitch: '1', // 1==查询事件；0==查询部件
-      // compListOpts: [], // 部件选择下拉框option
+      keywords: '', // 查询关键字
+      showEventPointPopup: true, // 是否显示事部件的popup
+      queryEventSwitch: '1', // 1==查询事件；0==查询部件
+      compListOpts: [], // 部件选择下拉框option
       // 主页面返回值
-      // longitude: '', // 定位点经度
-      // latitude: '' // 定位点纬度
-      // communityId: '', // 社区ID
-      // communityName: '', // 社区名称
-      // gridId: '', // 单元网格ID
-      // componentId: '', // 部件ID
-      // componentName: '' // 部件名称/=
+      longitude: '', // 定位点经度
+      latitude: '', // 定位点纬度
+      communityId: '', // 社区ID
+      communityName: '', // 社区名称
+      gridId: '', // 单元网格ID
+      componentId: '', // 部件ID
+      componentName: '' // 部件名称
     }
   },
   mounted() {
@@ -110,7 +99,6 @@
   methods: {
     // 初始化ArcGIS API对象
     importEsri: function() {
-      this.mapLoading = true
       loadModules([
         'esri/Map',
         'esri/Basemap',
@@ -164,10 +152,8 @@
 
           // 初始化地图
           this.initMap()
-          this.mapLoading = false
         }).catch(err => {
           console.log(err)
-          this.mapLoading = false
         })
     },
     // 初始化地图
@@ -194,139 +180,139 @@
         zoom: 3 // 当前地图缩放等级
       })
 
-      // const that = this
-      // this.view.on('click', function(event) {
-      //   // 清除地图上已有的事件/部件查询点
-      //   that.clearEOrCPoint()
+      const that = this
+      this.view.on('click', function(event) {
+        // 清除地图上已有的事件/部件查询点
+        that.clearEOrCPoint()
 
-      //   const lon = event.mapPoint.longitude
-      //   const lat = event.mapPoint.latitude
+        const lon = event.mapPoint.longitude
+        const lat = event.mapPoint.latitude
 
-      //   if (that.showEventPointPopup) {
-      //     // 添加点
-      //     const gLayer = new that.esriObj.GraphicsLayer()
-      //     const marker = new that.esriObj.SimpleMarkerSymbol()
-      //     marker.color = '#35A0E7'
-      //     marker.style = 'square'
-      //     marker.outline = {
-      //       color: [128, 128, 128, 0.5],
-      //       width: '2px'
-      //     }
-      //     const graphic = new that.esriObj.Graphic({
-      //       geometry: event.mapPoint,
-      //       symbol: marker
-      //     })
+        if (that.showEventPointPopup) {
+          // 添加点
+          const gLayer = new that.esriObj.GraphicsLayer()
+          const marker = new that.esriObj.SimpleMarkerSymbol()
+          marker.color = '#35A0E7'
+          marker.style = 'square'
+          marker.outline = {
+            color: [128, 128, 128, 0.5],
+            width: '2px'
+          }
+          const graphic = new that.esriObj.Graphic({
+            geometry: event.mapPoint,
+            symbol: marker
+          })
 
-      //     gLayer.id = eventPointLayerId
-      //     gLayer.add(graphic)
-      //     that.map.add(gLayer)
+          gLayer.id = eventPointLayerId
+          gLayer.add(graphic)
+          that.map.add(gLayer)
 
-      //     // 查询事件或者部件
-      //     if (that.queryEventSwitch === '1') {
-      //       // 事件定位
-      //       // 1查询底图得到所在网格与所在社区
-      //       const query = that.layers.dx2wGrid.createQuery()
-      //       query.geometry = that.view.toMap(event)
-      //       query.distance = 10
-      //       query.units = 'meters'
-      //       query.returnGeometry = true
-      //       query.outFields = ['BGID', 'COMMUID', 'COMMUNAME']
-      //       that.layers.dx2wGrid.queryFeatures(query)
-      //         .then(function(response) {
-      //           const result = response.features[0].attributes
+          // 查询事件或者部件
+          if (that.queryEventSwitch === '1') {
+            // 事件定位
+            // 1查询底图得到所在网格与所在社区
+            const query = that.layers.dx2wGrid.createQuery()
+            query.geometry = that.view.toMap(event)
+            query.distance = 10
+            query.units = 'meters'
+            query.returnGeometry = true
+            query.outFields = ['BGID', 'COMMUID', 'COMMUNAME']
+            that.layers.dx2wGrid.queryFeatures(query)
+              .then(function(response) {
+                const result = response.features[0].attributes
 
-      //           // 赋值
-      //           that.longitude = lon
-      //           that.latitude = lat
-      //           that.gridId = result.BGID
-      //           that.communityId = result.COMMUID
-      //           that.communityName = result.COMMUNAME
+                // 赋值
+                that.longitude = lon
+                that.latitude = lat
+                that.gridId = result.BGID
+                that.communityId = result.COMMUID
+                that.communityName = result.COMMUNAME
 
-      //           // 2弹出气泡
-      //           that.view.popup.open({
-      //             title: '事件定位',
-      //             content: '坐标：[' + lon.toFixed(4) + ', ' + lat.toFixed(4) + ']' + '<p>' + '所在社区：' + result.COMMUNAME,
-      //             location: event.mapPoint
-      //           })
-      //         })
-      //     } else if (that.queryEventSwitch === '0') {
-      //       // 部件定位
-      //       const queryDev = that.layers.dxbjPoint.createQuery()
-      //       // 定义查询的圆形范围，半径5米
-      //       const circle = new that.esriObj.Circle({
-      //         center: event.mapPoint,
-      //         radius: 5,
-      //         radiusUnit: 'meters'
-      //       })
-      //       queryDev.geometry = circle
-      //       queryDev.returnGeometry = true
-      //       queryDev.outFields = ['BGID', 'OBJID', 'OBJNAME', 'OBJPOS']
-      //       that.layers.dxbjPoint.queryFeatures(queryDev)
-      //         .then(function(response) {
-      //           if (response.features.length > 0) {
-      //             const results = response.features
+                // 2弹出气泡
+                that.view.popup.open({
+                  title: '事件定位',
+                  content: '坐标：[' + lon.toFixed(4) + ', ' + lat.toFixed(4) + ']' + '<p>' + '所在社区：' + result.COMMUNAME,
+                  location: event.mapPoint
+                })
+              })
+          } else if (that.queryEventSwitch === '0') {
+            // 部件定位
+            const queryDev = that.layers.dxbjPoint.createQuery()
+            // 定义查询的圆形范围，半径5米
+            const circle = new that.esriObj.Circle({
+              center: event.mapPoint,
+              radius: 5,
+              radiusUnit: 'meters'
+            })
+            queryDev.geometry = circle
+            queryDev.returnGeometry = true
+            queryDev.outFields = ['BGID', 'OBJID', 'OBJNAME', 'OBJPOS']
+            that.layers.dxbjPoint.queryFeatures(queryDev)
+              .then(function(response) {
+                if (response.features.length > 0) {
+                  const results = response.features
 
-      //             that.compListOpts = []
+                  that.compListOpts = []
 
-      //             let content = ''
-      //             results.forEach((item, index) => {
-      //               content += '<p>部件' + (index + 1) + '：' + item.attributes.OBJNAME + '，' + item.attributes.OBJPOS
-      //               const comp = {}
-      //               comp.name = '部件' + (index + 1) + '：' + item.attributes.OBJNAME
-      //               comp.value = item.attributes.OBJID
-      //               that.compListOpts.push(comp)
-      //             })
+                  let content = ''
+                  results.forEach((item, index) => {
+                    content += '<p>部件' + (index + 1) + '：' + item.attributes.OBJNAME + '，' + item.attributes.OBJPOS
+                    const comp = {}
+                    comp.name = '部件' + (index + 1) + '：' + item.attributes.OBJNAME
+                    comp.value = item.attributes.OBJID
+                    that.compListOpts.push(comp)
+                  })
 
-      //             // 2弹出气泡
-      //             that.view.popup.open({
-      //               title: '部件定位',
-      //               content: '坐标：[' + lon.toFixed(4) + ', ' + lat.toFixed(4) + ']，附近5米的部件有：' + content,
-      //               location: event.mapPoint
-      //             })
+                  // 2弹出气泡
+                  that.view.popup.open({
+                    title: '部件定位',
+                    content: '坐标：[' + lon.toFixed(4) + ', ' + lat.toFixed(4) + ']，附近5米的部件有：' + content,
+                    location: event.mapPoint
+                  })
 
-      //             // 查询所在社区和单元网格
-      //             const queryPos = that.layers.dx2wGrid.createQuery()
-      //             queryPos.geometry = that.view.toMap(event)
-      //             queryPos.returnGeometry = true
-      //             queryPos.outFields = ['BGID', 'COMMUID', 'COMMUNAME']
-      //             that.layers.dx2wGrid.queryFeatures(queryPos)
-      //               .then(function(response) {
-      //                 const result = response.features[0].attributes
+                  // 查询所在社区和单元网格
+                  const queryPos = that.layers.dx2wGrid.createQuery()
+                  queryPos.geometry = that.view.toMap(event)
+                  queryPos.returnGeometry = true
+                  queryPos.outFields = ['BGID', 'COMMUID', 'COMMUNAME']
+                  that.layers.dx2wGrid.queryFeatures(queryPos)
+                    .then(function(response) {
+                      const result = response.features[0].attributes
 
-      //                 // 赋值
-      //                 that.longitude = lon
-      //                 that.latitude = lat
-      //                 that.gridId = result.BGID
-      //                 that.communityId = result.COMMUID
-      //                 that.communityName = result.COMMUNAME
-      //               })
-      //           } else {
-      //             that.$message({
-      //               message: '没有查询到部件，请重新定位',
-      //               type: 'warning'
-      //             })
-      //           }
-      //         })
-      //     }
-      //   } else {
-      //     that.view.hitTest(event).then(function(response) {
-      //       if (response.results.length) {
-      //         const graphic = response.results[0].graphic
-      //         const name = graphic.attributes.KEYWORD
-      //         const address = graphic.attributes.OBJPOS
+                      // 赋值
+                      that.longitude = lon
+                      that.latitude = lat
+                      that.gridId = result.BGID
+                      that.communityId = result.COMMUID
+                      that.communityName = result.COMMUNAME
+                    })
+                } else {
+                  that.$message({
+                    message: '没有查询到部件，请重新定位',
+                    type: 'warning'
+                  })
+                }
+              })
+          }
+        } else {
+          that.view.hitTest(event).then(function(response) {
+            if (response.results.length) {
+              const graphic = response.results[0].graphic
+              const name = graphic.attributes.KEYWORD
+              const address = graphic.attributes.OBJPOS
 
-      //         that.view.popup.open({
-      //           title: name,
-      //           content: address,
-      //           location: event.mapPoint
-      //         })
-      //       }
-      //     })
-      //   }
-      // })
+              that.view.popup.open({
+                title: name,
+                content: address,
+                location: event.mapPoint
+              })
+            }
+          })
+        }
+      })
 
       this.addBjLayers()
-      this.addCasePointOnMap(this.longitude, this.latitude)
+      // this.addCasePointOnMap(116.5937, 28.249)
     },
     // 加载部件服务的各图层
     addBjLayers: function() {
@@ -347,160 +333,159 @@
         url: serverConfig.mapUrlBj + '/3',
         id: 'dxbjMph'
       })
-      // this.layers.dx2wGrid = new this.esriObj.FeatureLayer({
-      //   url: serverConfig.mapUrlBase + '/6',
-      //   id: 'gridLayer'
-      // })
+      this.layers.dx2wGrid = new this.esriObj.FeatureLayer({
+        url: serverConfig.mapUrlBase + '/1',
+        id: 'gridLayer'
+      })
 
       // 加载各图层
       this.map.add(this.layers.dxbjPoint)
       this.map.add(this.layers.dxbjLine)
       this.map.add(this.layers.dxbjXqd)
       this.map.add(this.layers.dxbjMph)
-      // this.map.add(this.layers.dx2wGrid)
+      this.map.add(this.layers.dx2wGrid)
     },
     // 在兴趣点图层查询关键字
-    // queryOnMap: function() {
-    //   const points = [] // 查询结果点集
+    queryOnMap: function() {
+      const points = [] // 查询结果点集
 
-    //   this.clearQueryResults()
-    //   this.clearEOrCPoint()
-    //   this.showEventPointPopup = false
-    //   this.queryEventSwitch = '2'
+      this.clearQueryResults()
+      this.clearEOrCPoint()
+      this.showEventPointPopup = false
+      this.queryEventSwitch = '2'
 
-    //   // 查询条件
-    //   const query = new this.esriObj.Query()
-    //   query.returnGeometry = true
-    //   query.outFields = ['*']
-    //   query.where = 'NAME like ' + "'%" + this.keywords + "%'"
-    //   const that = this
+      // 查询条件
+      const query = new this.esriObj.Query()
+      query.returnGeometry = true
+      query.outFields = ['*']
+      query.where = 'NAME like ' + "'%" + this.keywords + "%'"
+      const that = this
 
-    //   this.layers.dxbjXqd.queryFeatures(query).then(function(results) {
-    //     results.features.forEach(item => {
-    //       const point = {}
-    //       point.x = item.geometry.longitude
-    //       point.y = item.geometry.latitude
-    //       point.attr = item.attributes
-    //       points.push(point)
-    //     })
+      this.layers.dxbjXqd.queryFeatures(query).then(function(results) {
+        results.features.forEach(item => {
+          const point = {}
+          point.x = item.geometry.longitude
+          point.y = item.geometry.latitude
+          point.attr = item.attributes
+          points.push(point)
+        })
 
-    //     // 提示查询结果
-    //     if (points.length > 0) {
-    //       that.$message({
-    //         message: '成功查询到' + points.length + '条记录',
-    //         type: 'success'
-    //       })
+        // 提示查询结果
+        if (points.length > 0) {
+          that.$message({
+            message: '成功查询到' + points.length + '条记录',
+            type: 'success'
+          })
 
-    //       // 绘制点
-    //       that.addSimpleMarkerOnMap(points)
-    //     } else {
-    //       that.$message({
-    //         message: '没有查询到结果，请重新输入关键字',
-    //         type: 'warning'
-    //       })
-    //     }
-    //   })
-    // },
+          // 绘制点
+          that.addSimpleMarkerOnMap(points)
+        } else {
+          that.$message({
+            message: '没有查询到结果，请重新输入关键字',
+            type: 'warning'
+          })
+        }
+      })
+    },
     // 清除图层上的查询结果
-    // clearQueryResults: function() {
-    //   this.map.layers.forEach(layer => {
-    //     if (layer.type === 'graphics' && layer.id === queryResultLayerId) {
-    //       layer.graphics.removeAll()
-    //       return false
-    //     }
-    //   })
-    // },
-    // // 清除图层上的查询结果
-    // clearMap: function() {
-    //   // 清除地图上绘制的graphic图层
-    //   this.map.layers.forEach(layer => {
-    //     if (layer.type === 'graphics') {
-    //       layer.graphics.removeAll()
-    //       return false
-    //     }
-    //   })
+    clearQueryResults: function() {
+      this.map.layers.forEach(layer => {
+        if (layer.type === 'graphics' && layer.id === queryResultLayerId) {
+          layer.graphics.removeAll()
+          return false
+        }
+      })
+    },
+    // 清除图层上的查询结果
+    clearMap: function() {
+      // 清除地图上绘制的graphic图层
+      this.map.layers.forEach(layer => {
+        if (layer.type === 'graphics') {
+          layer.graphics.removeAll()
+          return false
+        }
+      })
 
-    //   // 清除弹出框
-    //   this.view.popup.close()
+      // 清除弹出框
+      this.view.popup.close()
 
-    //   // 清除data属性值
-    //   this.keywords = ''
-    //   this.showEventPointPopup = true // 是否显示事部件的popup
-    //   this.queryEventSwitch = '1' // 1==查询事件；0==查询部件
-    //   this.compListOpts = [] // 部件选择下拉框option
-    //   this.longitude = '' // 定位点经度
-    //   this.latitude = '' // 定位点纬度
-    //   this.communityId = '' // 社区ID
-    //   this.communityName = '' // 社区名称
-    //   this.gridId = '' // 单元网格ID
-    //   this.componentId = '' // 部件ID
-    //   this.componentName = '' // 部件名称
-    // },
+      // 清除data属性值
+      this.keywords = ''
+      this.showEventPointPopup = true // 是否显示事部件的popup
+      this.queryEventSwitch = '1' // 1==查询事件；0==查询部件
+      this.compListOpts = [] // 部件选择下拉框option
+      this.longitude = '' // 定位点经度
+      this.latitude = '' // 定位点纬度
+      this.communityId = '' // 社区ID
+      this.communityName = '' // 社区名称
+      this.gridId = '' // 单元网格ID
+      this.componentId = '' // 部件ID
+      this.componentName = '' // 部件名称
+    },
     // 清除图层上的事件定位点
-    // clearEOrCPoint: function() {
-    //   this.map.layers.forEach(layer => {
-    //     if (layer.type === 'graphics' && layer.id === eventPointLayerId) {
-    //       layer.graphics.removeAll()
-    //       return false
-    //     }
-    //   })
-    //   // 清除弹出框
-    //   this.view.popup.close()
-    // },
+    clearEOrCPoint: function() {
+      this.map.layers.forEach(layer => {
+        if (layer.type === 'graphics' && layer.id === eventPointLayerId) {
+          layer.graphics.removeAll()
+          return false
+        }
+      })
+      // 清除弹出框
+      this.view.popup.close()
+    },
     // 切换
-    // switchEventOrComponent: function() {
-    //   // 如果选中的是事件定位（1）或部件定位（0），点击地图时弹出事件或者部件的popup；否则（2以上）显示兴趣点结果的属性popup
-    //   this.showEventPointPopup = this.queryEventSwitch < 2
-    // },
+    switchEventOrComponent: function() {
+      // 如果选中的是事件定位（1）或部件定位（0），点击地图时弹出事件或者部件的popup；否则（2以上）显示兴趣点结果的属性popup
+      this.showEventPointPopup = this.queryEventSwitch < 2
+    },
     // 将查询结果点集合绘制在地图上
-    // addSimpleMarkerOnMap: function(points) {
-    //   const gLayer = new this.esriObj.GraphicsLayer()
-    //   points.forEach(item => {
-    //     const point = new this.esriObj.Point(item.x, item.y, item.attr)
-    //     const marker = new this.esriObj.SimpleMarkerSymbol()
-    //     marker.color = '#F9690E'
-    //     marker.outline = {
-    //       color: [128, 128, 128, 0.5],
-    //       width: '2px'
-    //     }
-    //     const graphic = new this.esriObj.Graphic({
-    //       geometry: point,
-    //       symbol: marker,
-    //       attributes: item.attr
-    //     })
-    //     gLayer.id = queryResultLayerId
-    //     gLayer.add(graphic)
-    //   })
-    //   this.map.add(gLayer)
-    // },
+    addSimpleMarkerOnMap: function(points) {
+      const gLayer = new this.esriObj.GraphicsLayer()
+      points.forEach(item => {
+        const point = new this.esriObj.Point(item.x, item.y, item.attr)
+        const marker = new this.esriObj.SimpleMarkerSymbol()
+        marker.color = '#F9690E'
+        marker.outline = {
+          color: [128, 128, 128, 0.5],
+          width: '2px'
+        }
+        const graphic = new this.esriObj.Graphic({
+          geometry: point,
+          symbol: marker,
+          attributes: item.attr
+        })
+        gLayer.id = queryResultLayerId
+        gLayer.add(graphic)
+      })
+      this.map.add(gLayer)
+    },
     // 返回事件定位的结果
-    // checkEventPoint: function() {
-    //   this.$emit(
-    //     'closeMapQueryDialogByEvent',
-    //     this.longitude,
-    //     this.latitude,
-    //     this.communityId,
-    //     this.communityName,
-    //     this.gridId)
+    checkEventPoint: function() {
+      this.$emit(
+        'closeMapQueryDialogByEvent',
+        this.longitude,
+        this.latitude,
+        this.communityId,
+        this.communityName,
+        this.gridId)
 
-    //   this.clearMap()
-    // },
-    // // 返回部件定位的结果
-    // checkComponentPoint: function() {
-    //   this.$emit(
-    //     'closeMapQueryDialogByComp',
-    //     this.longitude,
-    //     this.latitude,
-    //     this.communityId,
-    //     this.communityName,
-    //     this.gridId,
-    //     this.componentId)
+      this.clearMap()
+    },
+    // 返回部件定位的结果
+    checkComponentPoint: function() {
+      this.$emit(
+        'closeMapQueryDialogByComp',
+        this.longitude,
+        this.latitude,
+        this.communityId,
+        this.communityName,
+        this.gridId,
+        this.componentId)
 
-    //   this.clearMap()
-    // },
+      this.clearMap()
+    },
     // 在地图上添加指定坐标的点
     addCasePointOnMap: function(lng, lat) {
-      console.log('addCasePointOnMap', lng, lat)
       const gLayer = new this.esriObj.GraphicsLayer() // 添加自定义绘制点的图层
       const point = new this.esriObj.Point(lng, lat) // 创建geometry对象
       const marker = new this.esriObj.SimpleMarkerSymbol() // 创建marker标识
@@ -521,14 +506,14 @@
 
       // 重新设置地图中心点并移动
       this.view.center = point
-      this.view.goTo(point)
+      this.view.goTo()
     }
   }
 }
 </script>
 
 <style scoped>
-  @import 'https://js.arcgis.com/4.13/esri/css/main.css';
+  @import 'http://192.168.8.205/arcgis_js_api/library/4.12/esri/css/main.css';
   .baseMap {
     height:60vh;
     width: 100%;
diff --git a/src/components/Map/arcgisMapRead.vue b/src/components/Map/arcgisMapRead.vue
new file mode 100644
index 0000000..ae2058b
--- /dev/null
+++ b/src/components/Map/arcgisMapRead.vue
@@ -0,0 +1,539 @@
+<template>
+  <div style="margin-top:-30px">
+    <!-- <el-row :gutter="20">
+      <el-col :span="4">
+        <el-input v-model="keywords" size="small" type="text" placeholder="兴趣点关键字" clearable />
+      </el-col>
+      <el-col :span="4">
+        <el-button type="primary" size="small" @click="queryOnMap">查询</el-button>
+        <el-button type="info" size="small" @click="clearMap"> 清除地图 </el-button>
+      </el-col>
+
+      <el-col :span="8" style="text-align: center;">
+        <el-radio-group v-model="queryEventSwitch" size="small" @change="switchEventOrComponent">
+          <el-radio-button label="1">事件定位</el-radio-button>
+          <el-radio-button label="0">部件定位</el-radio-button>
+          <el-radio-button label="2">兴趣点属性</el-radio-button>
+        </el-radio-group>
+      </el-col>
+
+      <el-col v-if="queryEventSwitch === '0'" :span="8" style="text-align: right;">
+        <el-select v-model="componentId" placeholder="选择部件" clearable value="" size="small">
+          <el-option
+            v-for="item in compListOpts"
+            :key="item.value"
+            :label="item.name"
+            :value="item.value"/>
+        </el-select>
+        <el-button type="primary" size="small" @click="checkComponentPoint"> 部件提交 </el-button>
+      </el-col>
+
+      <el-col v-if="queryEventSwitch === '1'" :span="8" style="text-align: right;">
+        <el-button type="primary" size="small" @click="checkEventPoint"> 事件提交 </el-button>
+      </el-col>
+    </el-row> -->
+
+    <div v-loading="mapLoading" ref="mapDiv" class="baseMap" />
+  </div>
+</template>
+
+<script>
+import { loadModules } from 'esri-loader'
+import { mapConfig, serverConfig } from './ArcGISConfig'
+
+const option = {
+  url: mapConfig.apiUrl
+}
+
+// const eventPointLayerId = 'eventPointLayer' // 事件定位点的图层id
+// const queryResultLayerId = 'queryResultLayer' // 兴趣点查询结果点集的图层id
+const caseLayerId = 'addedGeometryLayerId' // 案卷点图层
+
+export default {
+  name: 'ArcGisMapRead',
+  props: {
+    longitude: {
+      type: Number,
+      default: 116.5937
+    },
+    latitude: {
+      type: Number,
+      default: 28.249
+    }
+  },
+  data() {
+    return {
+      map: '',
+      view: '',
+      layers: {
+        dxbjPoint: '', // 部件点图层
+        dxbjLine: '', // 部件线图层
+        dxbjXqd: '', // 兴趣点图层
+        dxbjMph: '', // 门牌好图层
+        dx2wGrid: '' // 单元网格图层
+      },
+      esriObj: {
+        Map: '',
+        BaseMap: '',
+        Graphic: '',
+        PopupTemplate: '',
+        Circle: '',
+        Point: '',
+        FeatureLayer: '',
+        GraphicsLayer: '',
+        TileLayer: '',
+        SimpleMarkerSymbol: '',
+        Query: '',
+        QueryTask: '',
+        IdentifyTask: '',
+        IdentifyParameters: '',
+        MapView: ''
+      },
+      mapLoading: false
+      // keywords: '', // 查询关键字
+      // showEventPointPopup: true, // 是否显示事部件的popup
+      // queryEventSwitch: '1', // 1==查询事件；0==查询部件
+      // compListOpts: [], // 部件选择下拉框option
+      // 主页面返回值
+      // longitude: '', // 定位点经度
+      // latitude: '' // 定位点纬度
+      // communityId: '', // 社区ID
+      // communityName: '', // 社区名称
+      // gridId: '', // 单元网格ID
+      // componentId: '', // 部件ID
+      // componentName: '' // 部件名称/=
+    }
+  },
+  mounted() {
+    this.importEsri()
+  },
+  methods: {
+    // 初始化ArcGIS API对象
+    importEsri: function() {
+      this.mapLoading = true
+      loadModules([
+        'esri/Map',
+        'esri/Basemap',
+        'esri/Graphic',
+        'esri/PopupTemplate',
+        'esri/geometry/Circle',
+        'esri/geometry/Point',
+        'esri/layers/FeatureLayer',
+        'esri/layers/GraphicsLayer',
+        'esri/layers/TileLayer',
+        'esri/symbols/SimpleMarkerSymbol',
+        'esri/tasks/support/Query',
+        'esri/tasks/QueryTask',
+        'esri/tasks/IdentifyTask',
+        'esri/tasks/support/IdentifyParameters',
+        'esri/views/MapView',
+        'dojo/domReady!'
+      ], option)
+        .then(([
+          Map,
+          BaseMap,
+          Graphic,
+          PopupTemplate,
+          Circle,
+          Point,
+          FeatureLayer,
+          GraphicsLayer,
+          TileLayer,
+          SimpleMarkerSymbol,
+          Query,
+          QueryTask,
+          IdentifyTask,
+          IdentifyParameters,
+          MapView
+        ]) => {
+          this.esriObj.Map = Map
+          this.esriObj.BaseMap = BaseMap
+          this.esriObj.Graphic = Graphic
+          this.esriObj.PopupTemplate = PopupTemplate
+          this.esriObj.Circle = Circle
+          this.esriObj.Point = Point
+          this.esriObj.FeatureLayer = FeatureLayer
+          this.esriObj.GraphicsLayer = GraphicsLayer
+          this.esriObj.TileLayer = TileLayer
+          this.esriObj.SimpleMarkerSymbol = SimpleMarkerSymbol
+          this.esriObj.Query = Query
+          this.esriObj.QueryTask = QueryTask
+          this.esriObj.IdentifyTask = IdentifyTask
+          this.esriObj.IdentifyParameters = IdentifyParameters
+          this.esriObj.MapView = MapView
+
+          // 初始化地图
+          this.initMap()
+          this.mapLoading = false
+        }).catch(err => {
+          console.log(err)
+          this.mapLoading = false
+        })
+    },
+    // 初始化地图
+    initMap: function() {
+      const base = new this.esriObj.BaseMap({
+        baseLayers: [
+          new this.esriObj.TileLayer({ // 可配置属性，见TileLayer类
+            id: '2w',
+            url: serverConfig.mapUrlBase
+          })
+        ],
+        title: 'dx2w',
+        id: 'dx2w'
+      })
+
+      this.map = new this.esriObj.Map({
+        basemap: base // 底图类型，详见BaseMap类
+      })
+
+      this.view = new this.esriObj.MapView({
+        container: this.$refs.mapDiv, // 视图的容器
+        map: this.map, // Map的实例放入视图中
+        center: [116.597, 28.24], // 初始显示的地图中心点，经纬度
+        zoom: 3 // 当前地图缩放等级
+      })
+
+      // const that = this
+      // this.view.on('click', function(event) {
+      //   // 清除地图上已有的事件/部件查询点
+      //   that.clearEOrCPoint()
+
+      //   const lon = event.mapPoint.longitude
+      //   const lat = event.mapPoint.latitude
+
+      //   if (that.showEventPointPopup) {
+      //     // 添加点
+      //     const gLayer = new that.esriObj.GraphicsLayer()
+      //     const marker = new that.esriObj.SimpleMarkerSymbol()
+      //     marker.color = '#35A0E7'
+      //     marker.style = 'square'
+      //     marker.outline = {
+      //       color: [128, 128, 128, 0.5],
+      //       width: '2px'
+      //     }
+      //     const graphic = new that.esriObj.Graphic({
+      //       geometry: event.mapPoint,
+      //       symbol: marker
+      //     })
+
+      //     gLayer.id = eventPointLayerId
+      //     gLayer.add(graphic)
+      //     that.map.add(gLayer)
+
+      //     // 查询事件或者部件
+      //     if (that.queryEventSwitch === '1') {
+      //       // 事件定位
+      //       // 1查询底图得到所在网格与所在社区
+      //       const query = that.layers.dx2wGrid.createQuery()
+      //       query.geometry = that.view.toMap(event)
+      //       query.distance = 10
+      //       query.units = 'meters'
+      //       query.returnGeometry = true
+      //       query.outFields = ['BGID', 'COMMUID', 'COMMUNAME']
+      //       that.layers.dx2wGrid.queryFeatures(query)
+      //         .then(function(response) {
+      //           const result = response.features[0].attributes
+
+      //           // 赋值
+      //           that.longitude = lon
+      //           that.latitude = lat
+      //           that.gridId = result.BGID
+      //           that.communityId = result.COMMUID
+      //           that.communityName = result.COMMUNAME
+
+      //           // 2弹出气泡
+      //           that.view.popup.open({
+      //             title: '事件定位',
+      //             content: '坐标：[' + lon.toFixed(4) + ', ' + lat.toFixed(4) + ']' + '<p>' + '所在社区：' + result.COMMUNAME,
+      //             location: event.mapPoint
+      //           })
+      //         })
+      //     } else if (that.queryEventSwitch === '0') {
+      //       // 部件定位
+      //       const queryDev = that.layers.dxbjPoint.createQuery()
+      //       // 定义查询的圆形范围，半径5米
+      //       const circle = new that.esriObj.Circle({
+      //         center: event.mapPoint,
+      //         radius: 5,
+      //         radiusUnit: 'meters'
+      //       })
+      //       queryDev.geometry = circle
+      //       queryDev.returnGeometry = true
+      //       queryDev.outFields = ['BGID', 'OBJID', 'OBJNAME', 'OBJPOS']
+      //       that.layers.dxbjPoint.queryFeatures(queryDev)
+      //         .then(function(response) {
+      //           if (response.features.length > 0) {
+      //             const results = response.features
+
+      //             that.compListOpts = []
+
+      //             let content = ''
+      //             results.forEach((item, index) => {
+      //               content += '<p>部件' + (index + 1) + '：' + item.attributes.OBJNAME + '，' + item.attributes.OBJPOS
+      //               const comp = {}
+      //               comp.name = '部件' + (index + 1) + '：' + item.attributes.OBJNAME
+      //               comp.value = item.attributes.OBJID
+      //               that.compListOpts.push(comp)
+      //             })
+
+      //             // 2弹出气泡
+      //             that.view.popup.open({
+      //               title: '部件定位',
+      //               content: '坐标：[' + lon.toFixed(4) + ', ' + lat.toFixed(4) + ']，附近5米的部件有：' + content,
+      //               location: event.mapPoint
+      //             })
+
+      //             // 查询所在社区和单元网格
+      //             const queryPos = that.layers.dx2wGrid.createQuery()
+      //             queryPos.geometry = that.view.toMap(event)
+      //             queryPos.returnGeometry = true
+      //             queryPos.outFields = ['BGID', 'COMMUID', 'COMMUNAME']
+      //             that.layers.dx2wGrid.queryFeatures(queryPos)
+      //               .then(function(response) {
+      //                 const result = response.features[0].attributes
+
+      //                 // 赋值
+      //                 that.longitude = lon
+      //                 that.latitude = lat
+      //                 that.gridId = result.BGID
+      //                 that.communityId = result.COMMUID
+      //                 that.communityName = result.COMMUNAME
+      //               })
+      //           } else {
+      //             that.$message({
+      //               message: '没有查询到部件，请重新定位',
+      //               type: 'warning'
+      //             })
+      //           }
+      //         })
+      //     }
+      //   } else {
+      //     that.view.hitTest(event).then(function(response) {
+      //       if (response.results.length) {
+      //         const graphic = response.results[0].graphic
+      //         const name = graphic.attributes.KEYWORD
+      //         const address = graphic.attributes.OBJPOS
+
+      //         that.view.popup.open({
+      //           title: name,
+      //           content: address,
+      //           location: event.mapPoint
+      //         })
+      //       }
+      //     })
+      //   }
+      // })
+
+      this.addBjLayers()
+      this.addCasePointOnMap(this.longitude, this.latitude)
+    },
+    // 加载部件服务的各图层
+    addBjLayers: function() {
+      // 此处可以优化
+      this.layers.dxbjPoint = new this.esriObj.FeatureLayer({ // 可配置属性，见TileLayer类
+        url: serverConfig.mapUrlBj + '/0',
+        id: 'dxbjPoint'
+      })
+      this.layers.dxbjLine = new this.esriObj.FeatureLayer({ // 可配置属性，见TileLayer类
+        url: serverConfig.mapUrlBj + '/1',
+        id: 'dxbjLine'
+      })
+      this.layers.dxbjXqd = new this.esriObj.FeatureLayer({ // 可配置属性，见TileLayer类
+        url: serverConfig.mapUrlBj + '/2',
+        id: 'dxbjXqd'
+      })
+      this.layers.dxbjMph = new this.esriObj.FeatureLayer({ // 可配置属性，见TileLayer类
+        url: serverConfig.mapUrlBj + '/3',
+        id: 'dxbjMph'
+      })
+      // this.layers.dx2wGrid = new this.esriObj.FeatureLayer({
+      //   url: serverConfig.mapUrlBase + '/6',
+      //   id: 'gridLayer'
+      // })
+
+      // 加载各图层
+      this.map.add(this.layers.dxbjPoint)
+      this.map.add(this.layers.dxbjLine)
+      this.map.add(this.layers.dxbjXqd)
+      this.map.add(this.layers.dxbjMph)
+      // this.map.add(this.layers.dx2wGrid)
+    },
+    // 在兴趣点图层查询关键字
+    // queryOnMap: function() {
+    //   const points = [] // 查询结果点集
+
+    //   this.clearQueryResults()
+    //   this.clearEOrCPoint()
+    //   this.showEventPointPopup = false
+    //   this.queryEventSwitch = '2'
+
+    //   // 查询条件
+    //   const query = new this.esriObj.Query()
+    //   query.returnGeometry = true
+    //   query.outFields = ['*']
+    //   query.where = 'NAME like ' + "'%" + this.keywords + "%'"
+    //   const that = this
+
+    //   this.layers.dxbjXqd.queryFeatures(query).then(function(results) {
+    //     results.features.forEach(item => {
+    //       const point = {}
+    //       point.x = item.geometry.longitude
+    //       point.y = item.geometry.latitude
+    //       point.attr = item.attributes
+    //       points.push(point)
+    //     })
+
+    //     // 提示查询结果
+    //     if (points.length > 0) {
+    //       that.$message({
+    //         message: '成功查询到' + points.length + '条记录',
+    //         type: 'success'
+    //       })
+
+    //       // 绘制点
+    //       that.addSimpleMarkerOnMap(points)
+    //     } else {
+    //       that.$message({
+    //         message: '没有查询到结果，请重新输入关键字',
+    //         type: 'warning'
+    //       })
+    //     }
+    //   })
+    // },
+    // 清除图层上的查询结果
+    // clearQueryResults: function() {
+    //   this.map.layers.forEach(layer => {
+    //     if (layer.type === 'graphics' && layer.id === queryResultLayerId) {
+    //       layer.graphics.removeAll()
+    //       return false
+    //     }
+    //   })
+    // },
+    // // 清除图层上的查询结果
+    // clearMap: function() {
+    //   // 清除地图上绘制的graphic图层
+    //   this.map.layers.forEach(layer => {
+    //     if (layer.type === 'graphics') {
+    //       layer.graphics.removeAll()
+    //       return false
+    //     }
+    //   })
+
+    //   // 清除弹出框
+    //   this.view.popup.close()
+
+    //   // 清除data属性值
+    //   this.keywords = ''
+    //   this.showEventPointPopup = true // 是否显示事部件的popup
+    //   this.queryEventSwitch = '1' // 1==查询事件；0==查询部件
+    //   this.compListOpts = [] // 部件选择下拉框option
+    //   this.longitude = '' // 定位点经度
+    //   this.latitude = '' // 定位点纬度
+    //   this.communityId = '' // 社区ID
+    //   this.communityName = '' // 社区名称
+    //   this.gridId = '' // 单元网格ID
+    //   this.componentId = '' // 部件ID
+    //   this.componentName = '' // 部件名称
+    // },
+    // 清除图层上的事件定位点
+    // clearEOrCPoint: function() {
+    //   this.map.layers.forEach(layer => {
+    //     if (layer.type === 'graphics' && layer.id === eventPointLayerId) {
+    //       layer.graphics.removeAll()
+    //       return false
+    //     }
+    //   })
+    //   // 清除弹出框
+    //   this.view.popup.close()
+    // },
+    // 切换
+    // switchEventOrComponent: function() {
+    //   // 如果选中的是事件定位（1）或部件定位（0），点击地图时弹出事件或者部件的popup；否则（2以上）显示兴趣点结果的属性popup
+    //   this.showEventPointPopup = this.queryEventSwitch < 2
+    // },
+    // 将查询结果点集合绘制在地图上
+    // addSimpleMarkerOnMap: function(points) {
+    //   const gLayer = new this.esriObj.GraphicsLayer()
+    //   points.forEach(item => {
+    //     const point = new this.esriObj.Point(item.x, item.y, item.attr)
+    //     const marker = new this.esriObj.SimpleMarkerSymbol()
+    //     marker.color = '#F9690E'
+    //     marker.outline = {
+    //       color: [128, 128, 128, 0.5],
+    //       width: '2px'
+    //     }
+    //     const graphic = new this.esriObj.Graphic({
+    //       geometry: point,
+    //       symbol: marker,
+    //       attributes: item.attr
+    //     })
+    //     gLayer.id = queryResultLayerId
+    //     gLayer.add(graphic)
+    //   })
+    //   this.map.add(gLayer)
+    // },
+    // 返回事件定位的结果
+    // checkEventPoint: function() {
+    //   this.$emit(
+    //     'closeMapQueryDialogByEvent',
+    //     this.longitude,
+    //     this.latitude,
+    //     this.communityId,
+    //     this.communityName,
+    //     this.gridId)
+
+    //   this.clearMap()
+    // },
+    // // 返回部件定位的结果
+    // checkComponentPoint: function() {
+    //   this.$emit(
+    //     'closeMapQueryDialogByComp',
+    //     this.longitude,
+    //     this.latitude,
+    //     this.communityId,
+    //     this.communityName,
+    //     this.gridId,
+    //     this.componentId)
+
+    //   this.clearMap()
+    // },
+    // 在地图上添加指定坐标的点
+    addCasePointOnMap: function(lng, lat) {
+      console.log('addCasePointOnMap', lng, lat)
+      const gLayer = new this.esriObj.GraphicsLayer() // 添加自定义绘制点的图层
+      const point = new this.esriObj.Point(lng, lat) // 创建geometry对象
+      const marker = new this.esriObj.SimpleMarkerSymbol() // 创建marker标识
+      // marker属性
+      marker.color = '#F9690E'
+      marker.outline = {
+        color: [128, 128, 128, 0.5],
+        width: '2px'
+      }
+      // 创建graphic对象
+      const graphic = new this.esriObj.Graphic({
+        geometry: point,
+        symbol: marker
+      })
+      gLayer.id = caseLayerId // 标识案卷图层
+      gLayer.add(graphic) // 图层上添加对象
+      this.map.add(gLayer) // 地图上添加图层
+
+      // 重新设置地图中心点并移动
+      this.view.center = point
+      this.view.goTo(point)
+    }
+  }
+}
+</script>
+
+<style scoped>
+  @import 'https://js.arcgis.com/4.13/esri/css/main.css';
+  .baseMap {
+    height:60vh;
+    width: 100%;
+    margin-top: 25px;
+    border: 1px solid #DCDCDC;
+    border-radius: 4px;
+  }
+</style>
diff --git a/src/router/index.js b/src/router/index.js
index b265a48..1c80473 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -11,6 +11,7 @@
 import { systemRouters } from './modules/system'
 import { cooRouters } from './modules/coo'
 import { commenetRouters } from './modules/comment'
+import { suphandleRouters } from './modules/suphandle'
 import { commonRouters } from './modules/common'
 
 /**
@@ -90,6 +91,7 @@
 export const asyncRouterMap = [
   ...commonRouters,
   ...cooRouters,
+  ...suphandleRouters,
   ...systemRouters,
   ...commenetRouters,
   { path: '*', redirect: '/404', hidden: true, meta: {}}
diff --git a/src/router/modules/suphandle.js b/src/router/modules/suphandle.js
new file mode 100644
index 0000000..7026a7b
--- /dev/null
+++ b/src/router/modules/suphandle.js
@@ -0,0 +1,35 @@
+/* Layout */
+import Layout from '../../views/layout/Layout'
+export const suphandleRouters = [
+  {
+    path: '/suphandle',
+    name: 'suphandle',
+    redirect: '/accessDept',
+    hidden: true,
+    meta: {
+      title: '监督受理子系统',
+      permission: ['/suphandle'],
+      isSys: true
+    }
+  },
+  {
+    path: '/callBus',
+    component: Layout,
+    redirect: '/callBus',
+    name: 'CallBus',
+    alwaysShow: true,
+    meta: {
+      title: '呼叫业务',
+      permission: ['/callBus'],
+      sys: '/suphandle'
+    },
+    children: [
+      {
+        path: '/callCase',
+        component: () => import('@/views/callCase/callCase'),
+        name: 'CallCase',
+        meta: { title: '建立案卷', icon: '', belongSys: '', permission: '/callCase' }
+      }
+    ]
+  }
+]
diff --git a/src/router/modules/system.js b/src/router/modules/system.js
index 10bff2e..c80b732 100644
--- a/src/router/modules/system.js
+++ b/src/router/modules/system.js
@@ -48,6 +48,12 @@
         component: () => import('@/views/busAdmin/userDevice/userDevice'),
         name: 'UserDevice',
         meta: { title: '终端设备管理', icon: '', permission: ['/userDevice'] }
+      },
+      {
+        path: '/areaPersonliable',
+        component: () => import('@/views/busAdmin/areaPersonliable/areaPersonliable'),
+        name: 'AreaPersonliable',
+        meta: { title: '网格责任人管理', icon: '', permission: ['/areaPersonliable'] }
       }
     ]
   },
diff --git a/src/views/busAdmin/areaPersonliable/areaPersonliable.vue b/src/views/busAdmin/areaPersonliable/areaPersonliable.vue
new file mode 100644
index 0000000..23a26de
--- /dev/null
+++ b/src/views/busAdmin/areaPersonliable/areaPersonliable.vue
@@ -0,0 +1,156 @@
+<template>
+  <div class="table-container">
+    <el-row class="table-title">
+      <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
+      <el-col :span="12" :offset="6" class="edit_btns">
+        <el-button v-if="hasPerm('/areaPersonliable/add')" class="edit_btn" size="small" @click="add">新增</el-button>
+      </el-col>
+    </el-row>
+    <el-table v-loading="listLoading" ref="table" :data="list" class="table" border>
+      <el-table-column :index="indexMethod" align="center" type="index" />
+      <el-table-column v-for="column in tableColumns" :key="column.value" :label="column.text" align="center">
+        <template slot-scope="scope">
+          <span>{{ scope.row[column.value] }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column v-if="hasPerm('/areaPersonliable/update')||hasPerm('/areaPersonliable/delete')" label="操作" align="center" width="200">
+        <template slot-scope="scope">
+          <el-button v-if="hasPerm('/areaPersonliable/update')" class="table-button" type="text" @click="edit(scope.row)">编辑</el-button>
+          <el-button v-if="hasPerm('/areaPersonliable/delete')" class="table-button" type="text" @click="del(scope.row)">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <div class="pagination-container">
+      <el-pagination
+        :current-page="listQuery.offset"
+        :page-sizes="[10,20,30,50]"
+        :page-size="listQuery.limit"
+        :total="total"
+        align="center"
+        layout="total, sizes, prev, pager, next"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"/>
+    </div>
+
+    <edit-area-personliable ref="editAreaPersonliable" @watchChild="fetchData"/>
+  </div>
+</template>
+
+<script>
+import { getAreaPersonliableList, deleteAreaPersonliable } from '@/api/busAdmin/areaPersonliable'
+import EditAreaPersonliable from './editAreaPersonliable'
+
+export default {
+  name: 'AreaPersonliable',
+  components: { EditAreaPersonliable },
+  data() {
+    return {
+      list: [],
+      total: 0,
+      listLoading: false,
+      listQuery: {
+        limit: 10,
+        offset: 1,
+        sort: 'id',
+        order: 'asc'
+      },
+      tableColumns: [
+        {
+          text: '网格名称',
+          value: 'areaName'
+        },
+        {
+          text: '责任人姓名',
+          value: 'userName'
+        },
+        {
+          text: '所属区域',
+          value: 'pAreaName'
+        }
+      ]
+    }
+  },
+  activated() {
+    this.fetchData()
+  },
+  methods: {
+    async fetchData() {
+      this.listLoading = true
+      const res = await getAreaPersonliableList(this.listQuery)
+      this.list = res.data.rows
+      this.total = parseInt(res.data.total)
+      this.listLoading = false
+    },
+    indexMethod(index) {
+      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
+    },
+    // 改变页容量
+    handleSizeChange(val) {
+      this.listQuery.limit = val
+      this.fetchData()
+    },
+    // 改变当前页
+    handleCurrentChange(val) {
+      this.listQuery.offset = val
+      this.fetchData()
+    },
+    add() {
+      this.$refs.editAreaPersonliable.initDialog(true, 'create')
+    },
+    edit(row) {
+      this.$refs.editAreaPersonliable.initDialog(true, 'update', row)
+    },
+    del(row) {
+      this.$confirm(
+        '确定要删除吗？',
+        '确认操作',
+        {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }
+      ).then(() => {
+        deleteAreaPersonliable(row.id).then(response => {
+          if (response.code === 200) {
+            this.$message.success('删除成功')
+            this.fetchData()
+          }
+        })
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  $tableTitleHeight:46px;
+  .table{
+    margin-bottom: 20px;
+  }
+  .table-container{
+    margin: 20px;
+  }
+  .table-title{
+    background-color:rgba(243, 243, 243, 1);
+    height: $tableTitleHeight;
+    .title-header{
+      line-height:$tableTitleHeight;
+      color: #606266;
+      font-size: 15px;
+      i{
+        margin-left: 5px;
+        margin-right: 5px;
+      }
+    }
+  }
+  .edit_btns{
+    .edit_btn{
+      float:right;
+      margin:7px 3px;//为了需要居中显示margin-top和bottom要用$tableTitleHeight减去按钮原高度除以2
+    }
+  }
+  .table-button{
+    padding: 10px;
+    height: 23px;
+  }
+</style>
diff --git a/src/views/busAdmin/areaPersonliable/areaSelectTree.vue b/src/views/busAdmin/areaPersonliable/areaSelectTree.vue
new file mode 100644
index 0000000..d0ba37f
--- /dev/null
+++ b/src/views/busAdmin/areaPersonliable/areaSelectTree.vue
@@ -0,0 +1,80 @@
+<template>
+  <el-dialog :visible.sync="dialogFormVisible" append-to-body custom-class="area-select-dialog" title="选择责任网格">
+    <el-scrollbar style="height: 400px">
+      <el-tree
+        ref="tree"
+        :expand-on-click-node="false"
+        :props="defaultProps"
+        :load="loadNode"
+        node-key="id"
+        lazy
+      />
+    </el-scrollbar>
+    <div slot="footer" class="dialog-footer">
+      <el-button type="primary" @click="confirmSelect">确定</el-button>
+      <el-button @click="cancel">取消</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { getAreaTree } from '@/api/area'
+export default {
+  name: 'AreaSelectTree',
+  data() {
+    return {
+      dialogFormVisible: true,
+      defaultProps: {
+        label: 'name',
+        children: 'children',
+        isLeaf: 'leaf'
+      },
+      listQuery: {
+        pid: ''
+      }
+    }
+  },
+  methods: {
+    // 获取数据
+    // fetchData() {
+    //   return new Promise(function(resolve, reject) {
+    //     getAreaTree(this.roleId)
+    //   })
+    // },
+    initDialog() {
+      this.dialogFormVisible = true
+    },
+    loadNode(node, resolve) {
+      if (node.data && node.data.id) {
+        this.listQuery.pid = node.data.id
+      }
+      getAreaTree(this.listQuery).then(response => {
+        const data = response.data
+        resolve(data)
+      })
+    },
+    // 选择后的操作
+    confirmSelect() {
+      const node = this.$refs.tree.getCurrentNode()
+      this.dialogFormVisible = false
+      this.$emit('selectDone', node)
+    },
+    cancel() {
+      this.dialogFormVisible = false
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
+
+<style lang="scss" scope>
+  .area-select-dialog{
+    width: 400px;
+    .el-scrollbar__wrap{
+      overflow-x: hidden !important;
+    }
+  }
+</style>
diff --git a/src/views/busAdmin/areaPersonliable/editAreaPersonliable.vue b/src/views/busAdmin/areaPersonliable/editAreaPersonliable.vue
new file mode 100644
index 0000000..60e99e7
--- /dev/null
+++ b/src/views/busAdmin/areaPersonliable/editAreaPersonliable.vue
@@ -0,0 +1,156 @@
+<template>
+  <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" append-to-body width="35%">
+    <el-form ref="dataForm" :model="AreaPersonliableForm" :rules="rules" label-width="100px">
+      <el-form-item label="网格名称" prop="areaName">
+        <el-input
+          v-model="AreaPersonliableForm.areaName"
+          :disabled="dialogStatus === 'update'"
+          placeholder="请选择责任网格"
+          @focus="openAreaSelect"/>
+      </el-form-item>
+      <el-form-item label="责任人姓名" prop="userId">
+        <el-select v-model="AreaPersonliableForm.userId" filterable clearable style="width:100%" placeholder="请选择责任人">
+          <el-option v-for="user in userList" :key="user.id" :label="user.name" :value="user.id"/>
+        </el-select>
+      </el-form-item>
+    </el-form>
+    <div slot="footer" class="dialog-footer">
+      <el-button type="primary" @click="saveData">保存</el-button>
+      <el-button @click="cancel">取消</el-button>
+    </div>
+    <area-select-tree v-if="areaSelectShow" ref="areaSelect" @selectDone="selectArea"/>
+  </el-dialog>
+</template>
+
+<script>
+import AreaSelectTree from './areaSelectTree'
+import { getSupervisorList, addAreaPersonliable, updateAreaPersonliable } from '@/api/busAdmin/areaPersonliable'
+
+export default {
+  name: 'EditAreaPersonliable',
+  components: { AreaSelectTree },
+  data() {
+    return {
+      dialogFormVisible: false,
+      dialogStatus: '',
+      textMap: {
+        update: '编辑',
+        create: '新增'
+      },
+      AreaPersonliableForm: {
+        id: '',
+        areaId: '',
+        areaName: '',
+        userId: ''
+      },
+      userList: [],
+      rules: {
+        areaName: [{ required: true, message: '区域不能为空', trigger: ['change'] }],
+        userId: [{ required: true, message: '用户不能为空', trigger: ['blur', 'change'] }]
+      },
+      areaSelectShow: false
+    }
+  },
+  mounted() {
+    this.fetchUserList()
+  },
+  methods: {
+    initDialog(dialogFormVisible, dialogStatus, row = null) {
+      this.dialogFormVisible = dialogFormVisible
+      this.dialogStatus = dialogStatus
+      if (this.dialogStatus === 'create') {
+      // 新增时，清空表格和校验
+        this.resetForm()
+        this.$nextTick(() => {
+          this.$refs['dataForm'].clearValidate()
+        })
+      } else if (this.dialogStatus === 'update') {
+      // 更新时，填充数据
+        console.log(row)
+        this.AreaPersonliableForm.id = row.id
+        this.AreaPersonliableForm.areaId = row.areaId
+        this.AreaPersonliableForm.areaName = row.areaName
+        this.AreaPersonliableForm.userId = row.userId
+      }
+    },
+    resetForm() {
+      this.AreaPersonliableForm = {
+        id: '',
+        areaId: '',
+        areaName: '',
+        userId: ''
+      }
+    },
+    fetchUserList() {
+      getSupervisorList().then(response => {
+        this.userList = response.data
+      })
+    },
+    openAreaSelect() {
+      this.areaSelectShow = true
+      setTimeout(this.$refs.areaSelect.initDialog(), 200)
+    },
+    selectArea(node) {
+      this.AreaPersonliableForm.areaId = node.id
+      this.AreaPersonliableForm.areaName = node.name
+    },
+    cancel() {
+      this.dialogFormVisible = false
+    },
+    saveData() {
+      if (this.dialogStatus === 'create') {
+        this.createData()
+      } else if (this.dialogStatus === 'update') {
+        this.updateData()
+      }
+    },
+    createData() {
+      this.$refs['dataForm'].validate(valid => {
+        if (valid) {
+          console.log('create valid success')
+          console.log(this.AreaPersonliableForm)
+          addAreaPersonliable(this.AreaPersonliableForm).then(response => {
+            if (response.code === 200) {
+              this.$message.success('添加成功')
+              this.$emit('watchChild')
+              this.dialogFormVisible = false
+            } else {
+              this.$message.error(response.message)
+            }
+          })
+        } else {
+          console.log('create valid error')
+        }
+      })
+    },
+    updateData() {
+      console.log('update data')
+      this.$refs['dataForm'].validate(valid => {
+        if (valid) {
+          console.log('update valid success')
+          console.log(this.AreaPersonliableForm)
+          updateAreaPersonliable(this.AreaPersonliableForm).then(response => {
+            if (response.code === 200) {
+              this.$message.success('修改成功')
+              this.$emit('watchChild')
+              this.dialogFormVisible = false
+            } else {
+              this.$message.error('修改失败')
+            }
+          })
+        } else {
+          console.log('update valid error')
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.el-form-item {
+  margin-bottom: 22px;
+  margin-left: 20px;
+  margin-right: 50px;
+}
+</style>
diff --git a/src/views/callCase/callCase.vue b/src/views/callCase/callCase.vue
new file mode 100644
index 0000000..513b6b3
--- /dev/null
+++ b/src/views/callCase/callCase.vue
@@ -0,0 +1,651 @@
+<template>
+  <div class="main-form">
+    <el-form ref="dataForm" :model="caseForm" :label-position="labelPosition" :rules="rules" label-width="120px">
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <el-form-item label="举报人" prop="reporterName">
+            <el-input v-model.trim="caseForm.reporterName" type="text" placeholder="必填" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="联系电话" prop="reporterPhone">
+            <el-input v-model.trim="caseForm.reporterPhone" type="text" placeholder="必填" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-button type="primary">历史记录</el-button>
+          <el-button type="primary" @click="openMapQueryDialog">地图查询</el-button>
+        </el-col>
+      </el-row>
+
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <el-form-item label="信息来源" prop="source">
+            <el-select v-model="caseForm.source" placeholder="选择信息来源" clearable value="">
+              <el-option
+                v-for="item in caseSourceOpts"
+                :key="item.value"
+                :label="item.name"
+                :value="item.value"/>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="案卷等级" prop="caseLevel">
+            <el-select v-model="caseForm.caseLevel" placeholder="选择案卷等级" value="">
+              <el-option
+                v-for="item in caseLevelOpts"
+                :key="item.value"
+                :label="item.name"
+                :value="item.value"/>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="是否核实">
+            <div>
+              <el-radio-group v-model="caseForm.isNeedVerify" @change="changeNeedVerify()">
+                <el-radio-button label="1">需要</el-radio-button>
+                <el-radio-button label="0">不需要</el-radio-button>
+              </el-radio-group>
+            </div>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="是否回访">
+            <div>
+              <el-radio-group v-model="caseForm.isNeedRevisit">
+                <el-radio-button label="1">需要</el-radio-button>
+                <el-radio-button label="0">不需要</el-radio-button>
+              </el-radio-group>
+            </div>
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <el-row :gutter="20">
+
+        <el-col :span="6">
+          <el-form-item label="所在区县" prop="areaCode">
+            <el-select v-model="caseForm.areaCode" placeholder="选择所在区县" value="">
+              <el-option key="361029" label="东乡区" value="361029"/>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="所在街道" prop="streetCode">
+            <el-select v-model="caseForm.streetCode" placeholder="选择所在街道" value="">
+              <el-option key="361029001" label="孝岗镇" value="361029001"/>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="所在社区" prop="communityName">
+            <el-input v-model="caseForm.communityName" type="text" placeholder="必填" readonly />
+          </el-form-item>
+        </el-col>
+        <el-col v-if="caseForm.componentId !== ''" :span="6">
+          <el-form-item label="部件编码">
+            <el-input v-model="caseForm.componentId" type="text" placeholder="必填" readonly />
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <el-row :gutter="20">
+        <el-col v-if="showVerifyPerson" :span="6">
+          <el-form-item label="监督员" prop="verifyPersonId">
+            <el-select v-model="caseForm.verifyPersonId" type="text" placeholder="选择监督员" filterable clearable value="">
+              <el-option
+                v-for="item in verifyPersonOpts"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id">
+                <span style="float: left">{{ item.name }}</span>
+                <span style="float: right; color: #999999; font-size: 13px">{{ item.id }}</span>
+              </el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="案卷类别" prop="eorc">
+            <el-select v-model="caseForm.eorc" placeholder="选择案卷类别" value="">
+              <el-option
+                v-for="item in caseEorCOpts"
+                :key="item.value"
+                :label="item.name"
+                :value="item.value"/>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="案卷大类" prop="caseType">
+            <el-select v-model="caseForm.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-col :span="6">
+          <el-form-item label="案卷小类" prop="caseDetailType">
+            <el-select v-model="caseForm.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-row v-if="showCaseTypesTime" :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="立案标准" prop="casetypesTimeId">
+            <el-select v-model="caseForm.casetypesTimeId" placeholder="选择立案标准" clearable value="" style="width: 100%">
+              <el-option
+                v-for="item in caseTypeTimeOpts"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id"/>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="处理时限" prop="bzhours">
+            <el-input-number v-model="caseForm.bzhours" :min="0" style="margin-right: 5px" />小时
+            <el-input-number v-model="caseForm.bzminis" :min="0" :max="59" style="margin-left: 20px; margin-right: 5px" />分钟
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <el-row :gutter="20">
+        <el-col :span="18">
+          <el-form-item label="案卷描述" prop="description">
+            <el-input v-model.trim="caseForm.description" type="textarea" placeholder="必填" clearable />
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <el-row :gutter="20">
+        <el-col :span="18">
+          <el-form-item label="位置描述" prop="fieldintro">
+            <el-input v-model.trim="caseForm.fieldintro" type="text" placeholder="必填" clearable />
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <el-row :gutter="20">
+        <el-col :span="24">
+          <el-form-item label="图片信息" prop="images">
+            <el-upload
+              ref="upload"
+              :before-upload="handleBeforeUpload"
+              :on-preview="handlePictureCardPreview"
+              :on-remove="handleRemove"
+              :on-exceed="handleExceed"
+              :on-success="handleSuccess"
+              :limit="2"
+              :http-request="uploadFile"
+              action="string"
+              multiple
+              accept=".jpg,.jpeg,.png "
+              list-type="picture-card">
+              <i class="el-icon-plus"/>
+            </el-upload>
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <el-row :gutter="20">
+        <el-col :span="18" style="margin-left: 120px; margin-bottom: 40px; text-align: center;">
+          <el-button type="primary" size="medium" icon="el-icon-check" style="width: 200px;" @click="saveData"> 提交 </el-button>
+        </el-col>
+      </el-row>
+
+    </el-form>
+
+    <el-dialog :visible.sync="dialogVisible" title="图片预览" append-to-body>
+      <div class="imgBox">
+        <img :src="dialogImageUrl" max-height="400px;" alt="" style="margin: 0 auto;">
+      </div>
+    </el-dialog>
+
+    <el-dialog
+      :visible.sync="mapDialogVisible"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+      title="地图查询"
+      width="80%"
+      append-to-body>
+
+      <arcgis-map-comp
+        ref="mapComp"
+        @closeMapQueryDialogByEvent="closeMapQueryDialogByEvent"
+        @closeMapQueryDialogByComp="closeMapQueryDialogByComp"/>
+
+    </el-dialog>
+
+  </div>
+</template>
+
+<script>
+import { getCaseSource, getCaseLevel, getCaseEorC, getCaseType, getCaseDetailType, getCaseTypesTime, getVerifyPerson, addCase } from '@/api/callCase/callCase'
+import { Uploadimg } from '@/api/common'
+import ArcgisMapComp from '@/components/Map/ArcGISMap'
+
+export default {
+  name: 'CallCase',
+  components: {// 注册组件
+    ArcgisMapComp: ArcgisMapComp
+  },
+  data() {
+    const phoneValidator = (rule, value, callback) => {
+      if (value !== '') {
+        if ((/^[1][3,5,6,7,8,9][0-9]{9}$/).test(value) === false) {
+          callback(new Error('举报人电话格式不正确'))
+        } else {
+          callback()
+        }
+      } else {
+        callback(new Error('举报人电话不能为空'))
+      }
+    }
+    return {
+      caseForm: {
+        reporterName: '', // 举报人姓名
+        reporterPhone: '', // 举报人电话
+        isNeedVerify: '1', // 是否需要核实
+        isNeedRevisit: '1', // 是否需要回访
+        lng: '', // 经度，
+        lat: '', // 纬度
+        source: '', // 案卷信息来源
+        caseLevel: '', // 案卷等级
+        eorc: '', // 案卷类别
+        casetypeCode: '', // 案卷大类编码,
+        casetypeDetailCode: '', // 案卷小类编码
+        areaCode: '361029', // 所属区县ID
+        streetCode: '361029001', // 所属街道ID
+        communityCode: '', // 所属社区编码
+        communityName: '', // 所属社区NAME
+        gridId: '', // 万米网格ID（单元网格）
+        componentId: '', // 部件ID
+        casetypesTimeId: '', // 立案标准ID
+        bzhours: 0, // 限制完成总时限（小时）
+        bzminis: 0, // 限制完成总时限（分钟）
+        description: '', // 案件描述
+        fieldintro: '', // 位置描述
+        verifyPersonId: '', // 核实人员id
+        photos: '' // 图片存储的地址
+      }, // 表单
+      rules: {
+        reporterName: [{ required: true, message: '举报人姓名不能为空', trigger: ['blur'] }],
+        reporterPhone: [{ required: true, trigger: ['blur'], validator: phoneValidator }],
+        source: [{ required: true, message: '信息来源不能为空', trigger: ['change'] }],
+        caseLevel: [{ required: true, message: '案卷等级不能为空', trigger: ['change'] }],
+        eorc: [{ required: true, message: '案卷类别不能为空', trigger: ['change'] }],
+        description: [{ required: true, message: '案卷描述不能为空', trigger: ['blur'] }],
+        fieldintro: [{ required: true, message: '位置描述不能为空', trigger: ['blur'] }]
+      }, // 表单验证
+      hideUpload: false,
+      fileList: [],
+      imageList: [],
+      uploadPath: process.env.BASE_API + 'imageUpload', // 图片上传路径
+      dialogImageUrl: '',
+      dialogVisible: false,
+      mapDialogVisible: false, // 地图对话框
+      labelPosition: 'right',
+      caseSourceOpts: [], // 案卷来源下拉框
+      caseLevelOpts: [], // 案卷等级下拉框
+      caseEorCOpts: [], // 案卷类别下拉框
+      caseTypeOpts: [], // 案卷大类下拉框
+      caseDetailTypeOpts: [], // 案卷小类下拉框
+      caseTypeTimeOpts: [], // 立案标准下拉框
+      verifyPersonOpts: [], // 监督员下拉框
+      showVerifyPerson: true,
+      showCaseTypesTime: false,
+      caseTypeCodeAuto: '', // 自动生成的案卷大类代码
+      caseTypeDetailCodeAuto: '' // 自动生成的案卷小类代码
+    }
+  },
+  computed: {
+    caseLevel() {
+      return this.caseForm.caseLevel
+    },
+    eorc() {
+      return this.caseForm.eorc
+    },
+    caseType() {
+      return this.caseForm.casetypeCode
+    },
+    caseTypeDetail() {
+      return this.caseForm.casetypeDetailCode
+    },
+    caseTypeDetailTime() {
+      return this.caseForm.casetypesTimeId
+    }
+  },
+  watch: {
+    caseLevel(level) {
+      this.calculateTime(this.caseForm.casetypesTimeId)
+    },
+    eorc(eorcVal) {
+      this.cascaderCaseType(eorcVal)
+    },
+    caseType(typeVal) {
+      this.cascaderCaseDetailType(typeVal)
+    },
+    caseTypeDetail(detailVal) {
+      this.cascaderCaseDetailTypeTime(detailVal)
+    },
+    caseTypeDetailTime(timeVal) {
+      this.calculateTime(timeVal)
+    }
+  },
+  mounted: function() {
+    this.initCaseSource()
+    this.initCaseLevel()
+    this.initCaseEorC()
+    this.initVerifyPerson()
+  },
+  methods: {
+    initCaseSource: function() {
+      getCaseSource().then(response => {
+        this.caseSourceOpts = []
+        for (const opt of response.data) {
+          this.caseSourceOpts.push(opt)
+          if (opt.name.indexOf('电话') >= 0) {
+            this.caseForm.source = opt.value
+          }
+        }
+      })
+    },
+    initCaseLevel: function() {
+      getCaseLevel().then(response => {
+        this.caseLevelOpts = []
+        for (const opt of response.data) {
+          this.caseLevelOpts.push(opt)
+          if (opt.name.indexOf('一般') >= 0) {
+            this.caseForm.caseLevel = opt.value
+          }
+        }
+      })
+    },
+    initCaseEorC: function() {
+      getCaseEorC().then(response => {
+        this.caseEorCOpts = []
+        for (const opt of response.data) {
+          this.caseEorCOpts.push(opt)
+        }
+      })
+    },
+    initVerifyPerson: function() {
+      getVerifyPerson().then(response => {
+        this.verifyPersonOpts = []
+        console.log(response)
+        for (const opt of response.data) {
+          this.verifyPersonOpts.push(opt)
+        }
+      })
+    },
+    // 级联查询案卷大类
+    cascaderCaseType: function(eorc) {
+      // 前两行的作用是清除案卷大类的当前值和select中的所有选项
+      this.caseTypeOpts = []
+      this.caseForm.casetypeCode = ''
+      // 以下两行的作用是清除案卷小类的当前值和select中的所有选项
+      this.caseDetailTypeOpts = []
+      this.caseForm.casetypeDetailCode = ''
+      // 以下两行是清除案卷时限（小时和分钟）
+      this.caseTypeTimeOpts = []
+      this.caseForm.casetypesTimeId = ''
+      this.caseForm.bzhours = 0
+      this.caseForm.bzminis = 0
+
+      // 若事部件选择的值不为空，则查询相应的案卷大类
+      if (eorc !== null && eorc.length > 0) {
+        getCaseType(eorc).then(response => {
+          for (const opt of response.data) {
+            this.caseTypeOpts.push(opt)
+
+            if (opt.typeCode === this.caseTypeCodeAuto) {
+              this.caseForm.casetypeCode = opt.typeCode
+            }
+          }
+        })
+      }
+    },
+    cascaderCaseDetailType: function(typeCode) {
+      // 以下两行的作用是清除案卷小类的当前值和select中的所有选项
+      this.caseDetailTypeOpts = []
+      this.caseForm.casetypeDetailCode = ''
+      // 以下两行是清除案卷时限（小时和分钟）
+      this.caseTypeTimeOpts = []
+      this.caseForm.casetypesTimeId = ''
+      this.caseForm.bzhours = 0
+      this.caseForm.bzminis = 0
+
+      // 根据code获取ID，进行级联查询
+      let typeId = 0
+      this.caseTypeOpts.forEach(item => {
+        if (item.typeCode === typeCode) {
+          typeId = item.id
+        }
+      })
+
+      if (typeId > 0) {
+        getCaseDetailType(typeId).then(response => {
+          for (const opt of response.data) {
+            this.caseDetailTypeOpts.push(opt)
+
+            if (opt.typeDetailCode === this.caseTypeDetailCodeAuto) {
+              this.caseForm.casetypeDetailCode = opt.typeDetailCode
+            }
+          }
+        })
+      }
+    },
+    // 查询立案标准
+    cascaderCaseDetailTypeTime: function(detailCode) {
+      // 以下两行是清除案卷时限（小时和分钟）
+      this.caseTypeTimeOpts = []
+      this.caseForm.casetypesTimeId = ''
+      this.caseForm.bzhours = 0
+      this.caseForm.bzminis = 0
+
+      // 根据code获取ID，进行级联查询
+      let typeDetailId = 0
+      this.caseDetailTypeOpts.forEach(item => {
+        if (item.typeDetailCode === detailCode) {
+          typeDetailId = item.id
+        }
+      })
+
+      if (typeDetailId > 0) {
+        getCaseTypesTime(typeDetailId).then(response => {
+          console.log(response)
+          for (const opt of response.data) {
+            this.caseTypeTimeOpts.push(opt)
+          }
+        })
+      }
+    },
+    calculateTime: function(timeVal) {
+      const hoursPerDay = this.caseForm.caseLevel === '1' ? 8 : 24
+      let day = 0
+      let hours = 0
+      this.caseTypeTimeOpts.forEach(item => {
+        if (item.id === timeVal) {
+          day = item.day
+          hours = item.hours
+        }
+      })
+
+      this.caseForm.bzhours = hoursPerDay * parseInt(day) + parseInt(hours)
+    },
+    // 打开地图查询对话框显示地图
+    openMapQueryDialog: function() {
+      this.mapDialogVisible = true
+    },
+    // 关闭地图查询对话框
+    closeMapQueryDialogByEvent: function(longitude, latitude, communityId, communityName, gridId) {
+      this.mapDialogVisible = false
+
+      // 赋值
+      this.caseForm.eorc = '1' // 事件点返回时案卷类别自动选择为事件
+      this.caseForm.communityCode = communityId
+      this.caseForm.communityName = communityName
+      this.caseForm.gridId = gridId
+      this.caseForm.lng = longitude
+      this.caseForm.lat = latitude
+
+      this.caseForm.areaCode = communityId.substring(0, 6) // 区县代码
+      this.caseForm.streetCode = communityId.substring(0, 9) // 街道代码
+    },
+    // 关闭地图查询对话框
+    closeMapQueryDialogByComp: function(longitude, latitude, communityId, communityName, gridId, componentId, componentName) {
+      this.mapDialogVisible = false
+
+      // 赋值
+      this.caseForm.eorc = '2' // 部件点返回时案卷类别自动选择为部件
+      this.caseForm.communityCode = communityId
+      this.caseForm.communityName = communityName
+      this.caseForm.gridId = gridId
+      this.caseForm.lng = longitude
+      this.caseForm.lat = latitude
+      this.caseForm.componentId = componentId
+      this.caseForm.componentName = componentName
+
+      this.caseForm.areaCode = communityId.substring(0, 6) // 区县代码
+      this.caseForm.streetCode = communityId.substring(0, 9) // 街道代码
+      this.caseTypeCodeAuto = componentId.substring(6, 8) // 自动赋值部件大类
+      this.caseTypeDetailCodeAuto = componentId.substring(8, 10) // 自动赋值部件小类
+    },
+    // 修改是否需要核实
+    changeNeedVerify: function() {
+      if (this.caseForm.isNeedVerify === '0') {
+        // 不需要核实，显示立案标准、处理时限
+        this.showVerifyPerson = false
+        this.showCaseTypesTime = true
+      } else {
+        this.showVerifyPerson = true
+        this.showCaseTypesTime = false
+      }
+    },
+    // 保存数据
+    saveData: function() {
+      const that = this
+      if (this.fileList.length > 0) {
+        let photos = ''
+        this.fileList.forEach(photo => {
+          photos += photo.url + ','
+        })
+        this.caseForm.photos = photos.substring(0, photos.length - 1)
+      }
+
+      this.$refs['dataForm'].validate((valid) => {
+        console.log(valid)
+        if (valid) {
+          addCase(this.caseForm).then(function(response) {
+            if (response.code === 200) {
+              that.$message({
+                message: '添加案卷成功',
+                type: 'success'
+              })
+
+              that.$router.push({ path: '/dashboard' })
+            } else {
+              that.$message({
+                message: '添加案卷失败',
+                type: 'error'
+              })
+            }
+          })
+        }
+      })
+    },
+    // 图片上传
+    uploadFile(file) {
+      console.log('uploadFile:' + file.file.name)
+      // const base_url = process.env.BASE_API + '/static/'
+      Uploadimg(file).then(res => {
+        console.log(res)
+        if (res.code === 200) {
+          this.fileList.push({ name: file.file.name, url: res.data })
+        }
+      })
+    },
+    // 上传前判断文件格式及大小
+    handleBeforeUpload(file) {
+      const isJPG = (file.type === 'image/jpeg') || (file.type === 'image/png')
+      let res = true
+      const isLt2M = file.size / 1024 / 1024 < 2
+      if (!isJPG) {
+        this.$message.error('上传图片只能是 JPG 或 PNG 格式!')
+        res = false
+      }
+      if (!isLt2M) {
+        this.$message.error('上传图片大小不能超过 2MB!')
+        res = false
+      }
+      for (const i in this.fileList) {
+        if (this.fileList[i].name === file.name) {
+          this.$message.error('该图片已上传过，请选择其他图片')
+          res = false
+        }
+      }
+      return res
+    },
+    // 文件列表移除文件时的钩子
+    handleRemove(file, fileList) {
+      console.log('handleRemove')
+      for (const i in this.fileList) {
+        if (this.fileList[i].name === file.name) {
+          this.fileList.splice(i, 1)
+          this.hideUpload = this.fileList.length >= 2
+          return
+        }
+      }
+      this.handleChange()
+    },
+    // 限制提示
+    handleExceed(files, fileList) {
+      console.log('handleExceed')
+      this.$message.warning(`限制选择 2 张图片，本次选择了 ${files.length} 张图片，共选择了 ${files.length + fileList.length} 张图片`)
+    },
+    // 点击文件列表中已上传的文件时的钩子
+    handlePictureCardPreview(file) {
+      console.log('handlePictureCardPreview')
+      this.dialogImageUrl = file.url
+      this.dialogVisible = true
+    },
+    handleChange(file, fileList) {
+      console.log('handleChange')
+      if (fileList) {
+        this.hideUpload = fileList.length >= 2
+      } else {
+        this.hideUpload = false
+      }
+    },
+    handleSuccess(response, file, fileList) {
+      console.log('handleSuccess')
+      console.log(response)
+      const base_url = process.env.BASE_API + '/static/'
+      if (response.code === 200) {
+        this.fileList.push({ name: file.file.name, url: base_url + response.data })
+        this.handleChange()
+      } else {
+        this.$message.warning(response.message)
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .main-form{
+    margin: 20px;
+  }
+</style>

diff --git a/src/api/busAdmin/areaPersonliable.js b/src/api/busAdmin/areaPersonliable.js
new file mode 100644
index 0000000..58737bb
--- /dev/null
+++ b/src/api/busAdmin/areaPersonliable.js
@@ -0,0 +1,45 @@
+import request from '@/utils/request'
+
+export function getAreaPersonliableList(params) {
+  return request({
+    url: '/areaPersonliable/listPage',
+    method: 'get',
+    params
+  })
+}
+
+export function addAreaPersonliable(params) {
+  return request({
+    url: '/areaPersonliable/add',
+    method: 'post',
+    params
+  })
+}
+
+export function updateAreaPersonliable(params) {
+  return request({
+    url: '/areaPersonliable/update',
+    method: 'post',
+    params
+  })
+}
+
+export function deleteAreaPersonliable(id) {
+  return request({
+    url: '/areaPersonliable/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+export function getSupervisorList() {
+  return request({
+    url: '/mgr/simplelist',
+    method: 'post',
+    params: {
+      roleTips: 'supervisor'
+    }
+  })
+}
diff --git a/src/api/callCase/callCase.js b/src/api/callCase/callCase.js
new file mode 100644
index 0000000..7500fc7
--- /dev/null
+++ b/src/api/callCase/callCase.js
@@ -0,0 +1,87 @@
+/**
+ * 新建案卷的接口
+ */
+import request from '@/utils/request'
+
+// 获取案卷信息来源
+export function getCaseSource(params) {
+  return request({
+    url: 'dict/code/caseSource',
+    method: 'get',
+    params
+  })
+}
+
+// 获取案卷等级
+export function getCaseLevel(params) {
+  return request({
+    url: 'dict/code/caseLevel',
+    method: 'get',
+    params
+  })
+}
+
+// 获取案卷类别
+export function getCaseEorC(params) {
+  return request({
+    url: 'dict/code/eorc',
+    method: 'get',
+    params
+  })
+}
+
+// 根据案卷类别获取案卷大类
+export function getCaseType(eorc) {
+  return request({
+    url: 'case/type/list',
+    method: 'get',
+    params: {
+      eorc: eorc
+    }
+  })
+}
+
+// 根据案卷大类获取案卷小类
+export function getCaseDetailType(caseTypeId) {
+  return request({
+    url: 'case/typeDetail/list',
+    method: 'get',
+    params: {
+      typeId: caseTypeId
+    }
+  })
+}
+
+// 根据案卷小类获取结案标准
+export function getCaseTypesTime(caseTypeDetailId) {
+  return request({
+    url: 'case/typesTime/list',
+    method: 'get',
+    params: {
+      detailId: caseTypeDetailId
+    }
+  })
+}
+
+// 获取监督员列表
+export function getVerifyPerson(params) {
+  return request({
+    url: 'mgr/simplelist',
+    method: 'post',
+    params: {
+      roleTips: 'supervisor'
+    }
+  })
+}
+
+// 新增案卷
+export function addCase(params) {
+  return request({
+    url: 'case/add',
+    method: 'post',
+    headers: {
+      'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
+    },
+    params
+  })
+}
diff --git a/src/api/coorBusiness/case.js b/src/api/coorBusiness/case.js
index ec5a88a..08c3a13 100644
--- a/src/api/coorBusiness/case.js
+++ b/src/api/coorBusiness/case.js
@@ -110,9 +110,10 @@
   })
 }
 
+// 待处理
 export function toHandleListPage(params) {
   return request({
-    url: 'case/toHandleListPage/',
+    url: 'case/toProcessListPage/',
     method: 'get',
     params
   })
@@ -158,9 +159,10 @@
   })
 }
 
+// 待核查
 export function toCheckListPage(params) {
   return request({
-    url: 'case/toCheckListPage/',
+    url: 'case/toDisCheckListPage/',
     method: 'get',
     params
   })
diff --git a/src/components/CaseCommon/caseDetail.vue b/src/components/CaseCommon/caseDetail.vue
index f6c23ab..fdadcba 100644
--- a/src/components/CaseCommon/caseDetail.vue
+++ b/src/components/CaseCommon/caseDetail.vue
@@ -276,7 +276,7 @@
     </el-row>
     <el-row>
       <div class="title">数据流转:</div>
-      <el-table :data="recordList" :header-cell-style="{background:'#f3f3f3'}" class="table" border>
+      <el-table :data="recordList" :header-cell-style="{background:'#f3f3f3'}" max-height="400" class="table" border>
         <el-table-column prop="operationTypeName" label="操作" align="center"/>
         <el-table-column prop="deptName" label="单位" align="center"/>
         <el-table-column prop="userName" label="人员" align="center"/>
@@ -293,7 +293,7 @@
       :append-to-body="true"
       title="位置详情"
     >
-      <arc-gis-map :longitude="Number(caseDetail.lng)" :latitude="Number(caseDetail.lat)"/>
+      <arc-gis-map-read :longitude="Number(caseDetail.lng)" :latitude="Number(caseDetail.lat)"/>
     </el-dialog>
   </div>
 </template>
@@ -303,12 +303,12 @@
 import { getCaseDetail, getUserList, getDeptList, getCaseTypeList, getCaseTypeDetailList, getCaseTypeTimes } from '@/api/coorBusiness/case'
 import { getCommonLanguage, getFilingTypeList, getCaseLevelList } from '@/api/coorBusiness/dict'
 import { historicalRecords, nextNodes, completeCaseTask } from '@/api/coorBusiness/process'
-import ArcGisMap from '@/components/Map/arcgisMap'
+import ArcGisMapRead from '@/components/Map/arcgisMapRead'
 import { radioMap } from './radioMap'
 
 export default {
   name: 'CaseDetail',
-  components: { ArcGisMap },
+  components: { ArcGisMapRead },
   // props: {
   //   id: {
   //     type: String,
@@ -334,7 +334,6 @@
       showNeedVisit: false,
       caseDetail: {},
       operationKey: '', // 案件处理按钮key
-      imgurl: 'http:\\\\192.168.8.201:8083\\static\\',
       fileIdVerify: [], // 核实照片id
       fileIdProcess: [], // 处理照片id
       fileIdCheck: [], // 核查照片id
@@ -358,10 +357,12 @@
   computed: {
     isNeedVisit: function() {
       return this.caseDetail.isNeedRevisit === 1 ? '需要回访' : '不需要回访'
+    },
+    imgurl() {
+      return process.env.BASE_API + '/static/'
     }
   },
-  mounted() {
-    console.log('case dtial')
+  created() {
     this.id = this.$route.query.id
     this.showProcess = (this.$route.query.showProcess || this.$route.query.showProcess === false) ? this.$route.query.showProcess : true
     this.showNeedVisit = this.$route.query.showNeedVisit ? this.$route.query.showNeedVisit : false
@@ -371,7 +372,6 @@
     async initData() {
       // 查询案件详情接口
       const resDetail = await getCaseDetail(this.id)
-      console.log('detail', resDetail)
       this.caseDetail = resDetail.data[0]
 
       // 解析图片id
@@ -391,9 +391,11 @@
 
       // 查询流转记录接口
       this.processForm.processId = this.caseDetail.processId
-      const resRecord = await historicalRecords(this.processForm.processId)
-      this.recordList = resRecord.data
-      console.log(this.recordList)
+      // const resRecord = historicalRecords(this.processForm.processId)
+      // this.recordList = resRecord.data
+      historicalRecords(this.processForm.processId).then(res => {
+        this.recordList = res.data
+      })
 
       if (this.showProcess) {
         this.initProcess()
@@ -701,6 +703,7 @@
   .table{
     margin: 20px;
     width: 98%;
+    // max-height: 250px;
   }
   .title{
     margin-left: 38px;
diff --git a/src/components/CaseCommon/caseDetailRead.vue b/src/components/CaseCommon/caseDetailRead.vue
index 82066db..a4e87b0 100644
--- a/src/components/CaseCommon/caseDetailRead.vue
+++ b/src/components/CaseCommon/caseDetailRead.vue
@@ -158,11 +158,11 @@
 
 <script>
 import { getCaseDetail } from '@/api/coorBusiness/case'
-import ArcGisMap from '@/components/Map/arcgisMap'
+import ArcGisMapRead from '@/components/Map/arcgisMapRead'
 
 export default {
   name: 'CaseDetail',
-  components: { ArcGisMap },
+  components: { ArcGisMapRead },
   props: {
     id: {
       type: String,
diff --git a/src/components/Map/ArcGISConfig.js b/src/components/Map/ArcGISConfig.js
index d325da9..50cea3b 100644
--- a/src/components/Map/ArcGISConfig.js
+++ b/src/components/Map/ArcGISConfig.js
@@ -1,14 +1,16 @@
 export const mapConfig = {
-  apiUrl: 'https://js.arcgis.com/4.13/', // 暂时使用管网提供的api，实际部署时建议离线部署一套
+  apiUrl: 'http://192.168.8.205/arcgis_js_api/library/4.12/init.js', // 暂时使用管网提供的api，实际部署时建议离线部署一套
+  // apiUrl: 'https://js.arcgis.com/4.13/',
   mapIp: '223.84.218.107', // 服务ip
   mapPort: '6080', // 服务端口
-  serverBase: 'http://223.84.218.107:6080/arcgis/rest/services/', // 服务地址前缀
+  serverBase: 'http://192.168.8.205:6080/arcgis/rest/services/', // 服务地址前缀
+  // serverBase: 'http://223.84.218.107:6080/arcgis/rest/services/dx/',
   mapCenter: '[116.597,28.24]' // 地图中心点
 }
 
 export const serverConfig = {
-  mapUrlBase: mapConfig.serverBase + 'dx/2w/MapServer', // 底图服务地址
-  mapUrlBj: mapConfig.serverBase + 'dx/dxbj/MapServer', // 部件服务地址
-  mapUrlBjfc: mapConfig.serverBase + 'dx/bjfc/MapServer', // 部件分层服务地址
-  mapUrlBjEdit: mapConfig.serverBase + 'dx/dxbj/FeatureServer' // 可编辑的部件图层
+  mapUrlBase: mapConfig.serverBase + '2w/MapServer', // 底图服务地址
+  mapUrlBj: mapConfig.serverBase + 'dxbj/MapServer', // 部件服务地址
+  mapUrlBjfc: mapConfig.serverBase + 'bjfc/MapServer', // 部件分层服务地址
+  mapUrlBjEdit: mapConfig.serverBase + 'dxbj/FeatureServer' // 可编辑的部件图层
 }
diff --git a/src/components/Map/arcgisMap.vue b/src/components/Map/arcgisMap.vue
index 53776f1..5c15383 100644
--- a/src/components/Map/arcgisMap.vue
+++ b/src/components/Map/arcgisMap.vue
@@ -1,6 +1,6 @@
 <template>
-  <div style="margin-top:-30px">
-    <!-- <el-row :gutter="20">
+  <div>
+    <el-row :gutter="20">
       <el-col :span="4">
         <el-input v-model="keywords" size="small" type="text" placeholder="兴趣点关键字" clearable />
       </el-col>
@@ -31,9 +31,9 @@
       <el-col v-if="queryEventSwitch === '1'" :span="8" style="text-align: right;">
         <el-button type="primary" size="small" @click="checkEventPoint"> 事件提交 </el-button>
       </el-col>
-    </el-row> -->
+    </el-row>
 
-    <div v-loading="mapLoading" ref="mapDiv" class="baseMap" />
+    <div ref="mapDiv" class="baseMap" />
   </div>
 </template>
 
@@ -45,22 +45,12 @@
   url: mapConfig.apiUrl
 }
 
-// const eventPointLayerId = 'eventPointLayer' // 事件定位点的图层id
-// const queryResultLayerId = 'queryResultLayer' // 兴趣点查询结果点集的图层id
+const eventPointLayerId = 'eventPointLayer' // 事件定位点的图层id
+const queryResultLayerId = 'queryResultLayer' // 兴趣点查询结果点集的图层id
 const caseLayerId = 'addedGeometryLayerId' // 案卷点图层
 
 export default {
-  name: 'ArcGisMap',
-  props: {
-    longitude: {
-      type: Number,
-      default: 116.5937
-    },
-    latitude: {
-      type: Number,
-      default: 28.249
-    }
-  },
+  name: 'ArcGISMap',
   data() {
     return {
       map: '',
@@ -89,19 +79,18 @@
         IdentifyParameters: '',
         MapView: ''
       },
-      mapLoading: false
-      // keywords: '', // 查询关键字
-      // showEventPointPopup: true, // 是否显示事部件的popup
-      // queryEventSwitch: '1', // 1==查询事件；0==查询部件
-      // compListOpts: [], // 部件选择下拉框option
+      keywords: '', // 查询关键字
+      showEventPointPopup: true, // 是否显示事部件的popup
+      queryEventSwitch: '1', // 1==查询事件；0==查询部件
+      compListOpts: [], // 部件选择下拉框option
       // 主页面返回值
-      // longitude: '', // 定位点经度
-      // latitude: '' // 定位点纬度
-      // communityId: '', // 社区ID
-      // communityName: '', // 社区名称
-      // gridId: '', // 单元网格ID
-      // componentId: '', // 部件ID
-      // componentName: '' // 部件名称/=
+      longitude: '', // 定位点经度
+      latitude: '', // 定位点纬度
+      communityId: '', // 社区ID
+      communityName: '', // 社区名称
+      gridId: '', // 单元网格ID
+      componentId: '', // 部件ID
+      componentName: '' // 部件名称
     }
   },
   mounted() {
@@ -110,7 +99,6 @@
   methods: {
     // 初始化ArcGIS API对象
     importEsri: function() {
-      this.mapLoading = true
       loadModules([
         'esri/Map',
         'esri/Basemap',
@@ -164,10 +152,8 @@
 
           // 初始化地图
           this.initMap()
-          this.mapLoading = false
         }).catch(err => {
           console.log(err)
-          this.mapLoading = false
         })
     },
     // 初始化地图
@@ -194,139 +180,139 @@
         zoom: 3 // 当前地图缩放等级
       })
 
-      // const that = this
-      // this.view.on('click', function(event) {
-      //   // 清除地图上已有的事件/部件查询点
-      //   that.clearEOrCPoint()
+      const that = this
+      this.view.on('click', function(event) {
+        // 清除地图上已有的事件/部件查询点
+        that.clearEOrCPoint()
 
-      //   const lon = event.mapPoint.longitude
-      //   const lat = event.mapPoint.latitude
+        const lon = event.mapPoint.longitude
+        const lat = event.mapPoint.latitude
 
-      //   if (that.showEventPointPopup) {
-      //     // 添加点
-      //     const gLayer = new that.esriObj.GraphicsLayer()
-      //     const marker = new that.esriObj.SimpleMarkerSymbol()
-      //     marker.color = '#35A0E7'
-      //     marker.style = 'square'
-      //     marker.outline = {
-      //       color: [128, 128, 128, 0.5],
-      //       width: '2px'
-      //     }
-      //     const graphic = new that.esriObj.Graphic({
-      //       geometry: event.mapPoint,
-      //       symbol: marker
-      //     })
+        if (that.showEventPointPopup) {
+          // 添加点
+          const gLayer = new that.esriObj.GraphicsLayer()
+          const marker = new that.esriObj.SimpleMarkerSymbol()
+          marker.color = '#35A0E7'
+          marker.style = 'square'
+          marker.outline = {
+            color: [128, 128, 128, 0.5],
+            width: '2px'
+          }
+          const graphic = new that.esriObj.Graphic({
+            geometry: event.mapPoint,
+            symbol: marker
+          })
 
-      //     gLayer.id = eventPointLayerId
-      //     gLayer.add(graphic)
-      //     that.map.add(gLayer)
+          gLayer.id = eventPointLayerId
+          gLayer.add(graphic)
+          that.map.add(gLayer)
 
-      //     // 查询事件或者部件
-      //     if (that.queryEventSwitch === '1') {
-      //       // 事件定位
-      //       // 1查询底图得到所在网格与所在社区
-      //       const query = that.layers.dx2wGrid.createQuery()
-      //       query.geometry = that.view.toMap(event)
-      //       query.distance = 10
-      //       query.units = 'meters'
-      //       query.returnGeometry = true
-      //       query.outFields = ['BGID', 'COMMUID', 'COMMUNAME']
-      //       that.layers.dx2wGrid.queryFeatures(query)
-      //         .then(function(response) {
-      //           const result = response.features[0].attributes
+          // 查询事件或者部件
+          if (that.queryEventSwitch === '1') {
+            // 事件定位
+            // 1查询底图得到所在网格与所在社区
+            const query = that.layers.dx2wGrid.createQuery()
+            query.geometry = that.view.toMap(event)
+            query.distance = 10
+            query.units = 'meters'
+            query.returnGeometry = true
+            query.outFields = ['BGID', 'COMMUID', 'COMMUNAME']
+            that.layers.dx2wGrid.queryFeatures(query)
+              .then(function(response) {
+                const result = response.features[0].attributes
 
-      //           // 赋值
-      //           that.longitude = lon
-      //           that.latitude = lat
-      //           that.gridId = result.BGID
-      //           that.communityId = result.COMMUID
-      //           that.communityName = result.COMMUNAME
+                // 赋值
+                that.longitude = lon
+                that.latitude = lat
+                that.gridId = result.BGID
+                that.communityId = result.COMMUID
+                that.communityName = result.COMMUNAME
 
-      //           // 2弹出气泡
-      //           that.view.popup.open({
-      //             title: '事件定位',
-      //             content: '坐标：[' + lon.toFixed(4) + ', ' + lat.toFixed(4) + ']' + '<p>' + '所在社区：' + result.COMMUNAME,
-      //             location: event.mapPoint
-      //           })
-      //         })
-      //     } else if (that.queryEventSwitch === '0') {
-      //       // 部件定位
-      //       const queryDev = that.layers.dxbjPoint.createQuery()
-      //       // 定义查询的圆形范围，半径5米
-      //       const circle = new that.esriObj.Circle({
-      //         center: event.mapPoint,
-      //         radius: 5,
-      //         radiusUnit: 'meters'
-      //       })
-      //       queryDev.geometry = circle
-      //       queryDev.returnGeometry = true
-      //       queryDev.outFields = ['BGID', 'OBJID', 'OBJNAME', 'OBJPOS']
-      //       that.layers.dxbjPoint.queryFeatures(queryDev)
-      //         .then(function(response) {
-      //           if (response.features.length > 0) {
-      //             const results = response.features
+                // 2弹出气泡
+                that.view.popup.open({
+                  title: '事件定位',
+                  content: '坐标：[' + lon.toFixed(4) + ', ' + lat.toFixed(4) + ']' + '<p>' + '所在社区：' + result.COMMUNAME,
+                  location: event.mapPoint
+                })
+              })
+          } else if (that.queryEventSwitch === '0') {
+            // 部件定位
+            const queryDev = that.layers.dxbjPoint.createQuery()
+            // 定义查询的圆形范围，半径5米
+            const circle = new that.esriObj.Circle({
+              center: event.mapPoint,
+              radius: 5,
+              radiusUnit: 'meters'
+            })
+            queryDev.geometry = circle
+            queryDev.returnGeometry = true
+            queryDev.outFields = ['BGID', 'OBJID', 'OBJNAME', 'OBJPOS']
+            that.layers.dxbjPoint.queryFeatures(queryDev)
+              .then(function(response) {
+                if (response.features.length > 0) {
+                  const results = response.features
 
-      //             that.compListOpts = []
+                  that.compListOpts = []
 
-      //             let content = ''
-      //             results.forEach((item, index) => {
-      //               content += '<p>部件' + (index + 1) + '：' + item.attributes.OBJNAME + '，' + item.attributes.OBJPOS
-      //               const comp = {}
-      //               comp.name = '部件' + (index + 1) + '：' + item.attributes.OBJNAME
-      //               comp.value = item.attributes.OBJID
-      //               that.compListOpts.push(comp)
-      //             })
+                  let content = ''
+                  results.forEach((item, index) => {
+                    content += '<p>部件' + (index + 1) + '：' + item.attributes.OBJNAME + '，' + item.attributes.OBJPOS
+                    const comp = {}
+                    comp.name = '部件' + (index + 1) + '：' + item.attributes.OBJNAME
+                    comp.value = item.attributes.OBJID
+                    that.compListOpts.push(comp)
+                  })
 
-      //             // 2弹出气泡
-      //             that.view.popup.open({
-      //               title: '部件定位',
-      //               content: '坐标：[' + lon.toFixed(4) + ', ' + lat.toFixed(4) + ']，附近5米的部件有：' + content,
-      //               location: event.mapPoint
-      //             })
+                  // 2弹出气泡
+                  that.view.popup.open({
+                    title: '部件定位',
+                    content: '坐标：[' + lon.toFixed(4) + ', ' + lat.toFixed(4) + ']，附近5米的部件有：' + content,
+                    location: event.mapPoint
+                  })
 
-      //             // 查询所在社区和单元网格
-      //             const queryPos = that.layers.dx2wGrid.createQuery()
-      //             queryPos.geometry = that.view.toMap(event)
-      //             queryPos.returnGeometry = true
-      //             queryPos.outFields = ['BGID', 'COMMUID', 'COMMUNAME']
-      //             that.layers.dx2wGrid.queryFeatures(queryPos)
-      //               .then(function(response) {
-      //                 const result = response.features[0].attributes
+                  // 查询所在社区和单元网格
+                  const queryPos = that.layers.dx2wGrid.createQuery()
+                  queryPos.geometry = that.view.toMap(event)
+                  queryPos.returnGeometry = true
+                  queryPos.outFields = ['BGID', 'COMMUID', 'COMMUNAME']
+                  that.layers.dx2wGrid.queryFeatures(queryPos)
+                    .then(function(response) {
+                      const result = response.features[0].attributes
 
-      //                 // 赋值
-      //                 that.longitude = lon
-      //                 that.latitude = lat
-      //                 that.gridId = result.BGID
-      //                 that.communityId = result.COMMUID
-      //                 that.communityName = result.COMMUNAME
-      //               })
-      //           } else {
-      //             that.$message({
-      //               message: '没有查询到部件，请重新定位',
-      //               type: 'warning'
-      //             })
-      //           }
-      //         })
-      //     }
-      //   } else {
-      //     that.view.hitTest(event).then(function(response) {
-      //       if (response.results.length) {
-      //         const graphic = response.results[0].graphic
-      //         const name = graphic.attributes.KEYWORD
-      //         const address = graphic.attributes.OBJPOS
+                      // 赋值
+                      that.longitude = lon
+                      that.latitude = lat
+                      that.gridId = result.BGID
+                      that.communityId = result.COMMUID
+                      that.communityName = result.COMMUNAME
+                    })
+                } else {
+                  that.$message({
+                    message: '没有查询到部件，请重新定位',
+                    type: 'warning'
+                  })
+                }
+              })
+          }
+        } else {
+          that.view.hitTest(event).then(function(response) {
+            if (response.results.length) {
+              const graphic = response.results[0].graphic
+              const name = graphic.attributes.KEYWORD
+              const address = graphic.attributes.OBJPOS
 
-      //         that.view.popup.open({
-      //           title: name,
-      //           content: address,
-      //           location: event.mapPoint
-      //         })
-      //       }
-      //     })
-      //   }
-      // })
+              that.view.popup.open({
+                title: name,
+                content: address,
+                location: event.mapPoint
+              })
+            }
+          })
+        }
+      })
 
       this.addBjLayers()
-      this.addCasePointOnMap(this.longitude, this.latitude)
+      // this.addCasePointOnMap(116.5937, 28.249)
     },
     // 加载部件服务的各图层
     addBjLayers: function() {
@@ -347,160 +333,159 @@
         url: serverConfig.mapUrlBj + '/3',
         id: 'dxbjMph'
       })
-      // this.layers.dx2wGrid = new this.esriObj.FeatureLayer({
-      //   url: serverConfig.mapUrlBase + '/6',
-      //   id: 'gridLayer'
-      // })
+      this.layers.dx2wGrid = new this.esriObj.FeatureLayer({
+        url: serverConfig.mapUrlBase + '/1',
+        id: 'gridLayer'
+      })
 
       // 加载各图层
       this.map.add(this.layers.dxbjPoint)
       this.map.add(this.layers.dxbjLine)
       this.map.add(this.layers.dxbjXqd)
       this.map.add(this.layers.dxbjMph)
-      // this.map.add(this.layers.dx2wGrid)
+      this.map.add(this.layers.dx2wGrid)
     },
     // 在兴趣点图层查询关键字
-    // queryOnMap: function() {
-    //   const points = [] // 查询结果点集
+    queryOnMap: function() {
+      const points = [] // 查询结果点集
 
-    //   this.clearQueryResults()
-    //   this.clearEOrCPoint()
-    //   this.showEventPointPopup = false
-    //   this.queryEventSwitch = '2'
+      this.clearQueryResults()
+      this.clearEOrCPoint()
+      this.showEventPointPopup = false
+      this.queryEventSwitch = '2'
 
-    //   // 查询条件
-    //   const query = new this.esriObj.Query()
-    //   query.returnGeometry = true
-    //   query.outFields = ['*']
-    //   query.where = 'NAME like ' + "'%" + this.keywords + "%'"
-    //   const that = this
+      // 查询条件
+      const query = new this.esriObj.Query()
+      query.returnGeometry = true
+      query.outFields = ['*']
+      query.where = 'NAME like ' + "'%" + this.keywords + "%'"
+      const that = this
 
-    //   this.layers.dxbjXqd.queryFeatures(query).then(function(results) {
-    //     results.features.forEach(item => {
-    //       const point = {}
-    //       point.x = item.geometry.longitude
-    //       point.y = item.geometry.latitude
-    //       point.attr = item.attributes
-    //       points.push(point)
-    //     })
+      this.layers.dxbjXqd.queryFeatures(query).then(function(results) {
+        results.features.forEach(item => {
+          const point = {}
+          point.x = item.geometry.longitude
+          point.y = item.geometry.latitude
+          point.attr = item.attributes
+          points.push(point)
+        })
 
-    //     // 提示查询结果
-    //     if (points.length > 0) {
-    //       that.$message({
-    //         message: '成功查询到' + points.length + '条记录',
-    //         type: 'success'
-    //       })
+        // 提示查询结果
+        if (points.length > 0) {
+          that.$message({
+            message: '成功查询到' + points.length + '条记录',
+            type: 'success'
+          })
 
-    //       // 绘制点
-    //       that.addSimpleMarkerOnMap(points)
-    //     } else {
-    //       that.$message({
-    //         message: '没有查询到结果，请重新输入关键字',
-    //         type: 'warning'
-    //       })
-    //     }
-    //   })
-    // },
+          // 绘制点
+          that.addSimpleMarkerOnMap(points)
+        } else {
+          that.$message({
+            message: '没有查询到结果，请重新输入关键字',
+            type: 'warning'
+          })
+        }
+      })
+    },
     // 清除图层上的查询结果
-    // clearQueryResults: function() {
-    //   this.map.layers.forEach(layer => {
-    //     if (layer.type === 'graphics' && layer.id === queryResultLayerId) {
-    //       layer.graphics.removeAll()
-    //       return false
-    //     }
-    //   })
-    // },
-    // // 清除图层上的查询结果
-    // clearMap: function() {
-    //   // 清除地图上绘制的graphic图层
-    //   this.map.layers.forEach(layer => {
-    //     if (layer.type === 'graphics') {
-    //       layer.graphics.removeAll()
-    //       return false
-    //     }
-    //   })
+    clearQueryResults: function() {
+      this.map.layers.forEach(layer => {
+        if (layer.type === 'graphics' && layer.id === queryResultLayerId) {
+          layer.graphics.removeAll()
+          return false
+        }
+      })
+    },
+    // 清除图层上的查询结果
+    clearMap: function() {
+      // 清除地图上绘制的graphic图层
+      this.map.layers.forEach(layer => {
+        if (layer.type === 'graphics') {
+          layer.graphics.removeAll()
+          return false
+        }
+      })
 
-    //   // 清除弹出框
-    //   this.view.popup.close()
+      // 清除弹出框
+      this.view.popup.close()
 
-    //   // 清除data属性值
-    //   this.keywords = ''
-    //   this.showEventPointPopup = true // 是否显示事部件的popup
-    //   this.queryEventSwitch = '1' // 1==查询事件；0==查询部件
-    //   this.compListOpts = [] // 部件选择下拉框option
-    //   this.longitude = '' // 定位点经度
-    //   this.latitude = '' // 定位点纬度
-    //   this.communityId = '' // 社区ID
-    //   this.communityName = '' // 社区名称
-    //   this.gridId = '' // 单元网格ID
-    //   this.componentId = '' // 部件ID
-    //   this.componentName = '' // 部件名称
-    // },
+      // 清除data属性值
+      this.keywords = ''
+      this.showEventPointPopup = true // 是否显示事部件的popup
+      this.queryEventSwitch = '1' // 1==查询事件；0==查询部件
+      this.compListOpts = [] // 部件选择下拉框option
+      this.longitude = '' // 定位点经度
+      this.latitude = '' // 定位点纬度
+      this.communityId = '' // 社区ID
+      this.communityName = '' // 社区名称
+      this.gridId = '' // 单元网格ID
+      this.componentId = '' // 部件ID
+      this.componentName = '' // 部件名称
+    },
     // 清除图层上的事件定位点
-    // clearEOrCPoint: function() {
-    //   this.map.layers.forEach(layer => {
-    //     if (layer.type === 'graphics' && layer.id === eventPointLayerId) {
-    //       layer.graphics.removeAll()
-    //       return false
-    //     }
-    //   })
-    //   // 清除弹出框
-    //   this.view.popup.close()
-    // },
+    clearEOrCPoint: function() {
+      this.map.layers.forEach(layer => {
+        if (layer.type === 'graphics' && layer.id === eventPointLayerId) {
+          layer.graphics.removeAll()
+          return false
+        }
+      })
+      // 清除弹出框
+      this.view.popup.close()
+    },
     // 切换
-    // switchEventOrComponent: function() {
-    //   // 如果选中的是事件定位（1）或部件定位（0），点击地图时弹出事件或者部件的popup；否则（2以上）显示兴趣点结果的属性popup
-    //   this.showEventPointPopup = this.queryEventSwitch < 2
-    // },
+    switchEventOrComponent: function() {
+      // 如果选中的是事件定位（1）或部件定位（0），点击地图时弹出事件或者部件的popup；否则（2以上）显示兴趣点结果的属性popup
+      this.showEventPointPopup = this.queryEventSwitch < 2
+    },
     // 将查询结果点集合绘制在地图上
-    // addSimpleMarkerOnMap: function(points) {
-    //   const gLayer = new this.esriObj.GraphicsLayer()
-    //   points.forEach(item => {
-    //     const point = new this.esriObj.Point(item.x, item.y, item.attr)
-    //     const marker = new this.esriObj.SimpleMarkerSymbol()
-    //     marker.color = '#F9690E'
-    //     marker.outline = {
-    //       color: [128, 128, 128, 0.5],
-    //       width: '2px'
-    //     }
-    //     const graphic = new this.esriObj.Graphic({
-    //       geometry: point,
-    //       symbol: marker,
-    //       attributes: item.attr
-    //     })
-    //     gLayer.id = queryResultLayerId
-    //     gLayer.add(graphic)
-    //   })
-    //   this.map.add(gLayer)
-    // },
+    addSimpleMarkerOnMap: function(points) {
+      const gLayer = new this.esriObj.GraphicsLayer()
+      points.forEach(item => {
+        const point = new this.esriObj.Point(item.x, item.y, item.attr)
+        const marker = new this.esriObj.SimpleMarkerSymbol()
+        marker.color = '#F9690E'
+        marker.outline = {
+          color: [128, 128, 128, 0.5],
+          width: '2px'
+        }
+        const graphic = new this.esriObj.Graphic({
+          geometry: point,
+          symbol: marker,
+          attributes: item.attr
+        })
+        gLayer.id = queryResultLayerId
+        gLayer.add(graphic)
+      })
+      this.map.add(gLayer)
+    },
     // 返回事件定位的结果
-    // checkEventPoint: function() {
-    //   this.$emit(
-    //     'closeMapQueryDialogByEvent',
-    //     this.longitude,
-    //     this.latitude,
-    //     this.communityId,
-    //     this.communityName,
-    //     this.gridId)
+    checkEventPoint: function() {
+      this.$emit(
+        'closeMapQueryDialogByEvent',
+        this.longitude,
+        this.latitude,
+        this.communityId,
+        this.communityName,
+        this.gridId)
 
-    //   this.clearMap()
-    // },
-    // // 返回部件定位的结果
-    // checkComponentPoint: function() {
-    //   this.$emit(
-    //     'closeMapQueryDialogByComp',
-    //     this.longitude,
-    //     this.latitude,
-    //     this.communityId,
-    //     this.communityName,
-    //     this.gridId,
-    //     this.componentId)
+      this.clearMap()
+    },
+    // 返回部件定位的结果
+    checkComponentPoint: function() {
+      this.$emit(
+        'closeMapQueryDialogByComp',
+        this.longitude,
+        this.latitude,
+        this.communityId,
+        this.communityName,
+        this.gridId,
+        this.componentId)
 
-    //   this.clearMap()
-    // },
+      this.clearMap()
+    },
     // 在地图上添加指定坐标的点
     addCasePointOnMap: function(lng, lat) {
-      console.log('addCasePointOnMap', lng, lat)
       const gLayer = new this.esriObj.GraphicsLayer() // 添加自定义绘制点的图层
       const point = new this.esriObj.Point(lng, lat) // 创建geometry对象
       const marker = new this.esriObj.SimpleMarkerSymbol() // 创建marker标识
@@ -521,14 +506,14 @@
 
       // 重新设置地图中心点并移动
       this.view.center = point
-      this.view.goTo(point)
+      this.view.goTo()
     }
   }
 }
 </script>
 
 <style scoped>
-  @import 'https://js.arcgis.com/4.13/esri/css/main.css';
+  @import 'http://192.168.8.205/arcgis_js_api/library/4.12/esri/css/main.css';
   .baseMap {
     height:60vh;
     width: 100%;
diff --git a/src/components/Map/arcgisMapRead.vue b/src/components/Map/arcgisMapRead.vue
new file mode 100644
index 0000000..ae2058b
--- /dev/null
+++ b/src/components/Map/arcgisMapRead.vue
@@ -0,0 +1,539 @@
+<template>
+  <div style="margin-top:-30px">
+    <!-- <el-row :gutter="20">
+      <el-col :span="4">
+        <el-input v-model="keywords" size="small" type="text" placeholder="兴趣点关键字" clearable />
+      </el-col>
+      <el-col :span="4">
+        <el-button type="primary" size="small" @click="queryOnMap">查询</el-button>
+        <el-button type="info" size="small" @click="clearMap"> 清除地图 </el-button>
+      </el-col>
+
+      <el-col :span="8" style="text-align: center;">
+        <el-radio-group v-model="queryEventSwitch" size="small" @change="switchEventOrComponent">
+          <el-radio-button label="1">事件定位</el-radio-button>
+          <el-radio-button label="0">部件定位</el-radio-button>
+          <el-radio-button label="2">兴趣点属性</el-radio-button>
+        </el-radio-group>
+      </el-col>
+
+      <el-col v-if="queryEventSwitch === '0'" :span="8" style="text-align: right;">
+        <el-select v-model="componentId" placeholder="选择部件" clearable value="" size="small">
+          <el-option
+            v-for="item in compListOpts"
+            :key="item.value"
+            :label="item.name"
+            :value="item.value"/>
+        </el-select>
+        <el-button type="primary" size="small" @click="checkComponentPoint"> 部件提交 </el-button>
+      </el-col>
+
+      <el-col v-if="queryEventSwitch === '1'" :span="8" style="text-align: right;">
+        <el-button type="primary" size="small" @click="checkEventPoint"> 事件提交 </el-button>
+      </el-col>
+    </el-row> -->
+
+    <div v-loading="mapLoading" ref="mapDiv" class="baseMap" />
+  </div>
+</template>
+
+<script>
+import { loadModules } from 'esri-loader'
+import { mapConfig, serverConfig } from './ArcGISConfig'
+
+const option = {
+  url: mapConfig.apiUrl
+}
+
+// const eventPointLayerId = 'eventPointLayer' // 事件定位点的图层id
+// const queryResultLayerId = 'queryResultLayer' // 兴趣点查询结果点集的图层id
+const caseLayerId = 'addedGeometryLayerId' // 案卷点图层
+
+export default {
+  name: 'ArcGisMapRead',
+  props: {
+    longitude: {
+      type: Number,
+      default: 116.5937
+    },
+    latitude: {
+      type: Number,
+      default: 28.249
+    }
+  },
+  data() {
+    return {
+      map: '',
+      view: '',
+      layers: {
+        dxbjPoint: '', // 部件点图层
+        dxbjLine: '', // 部件线图层
+        dxbjXqd: '', // 兴趣点图层
+        dxbjMph: '', // 门牌好图层
+        dx2wGrid: '' // 单元网格图层
+      },
+      esriObj: {
+        Map: '',
+        BaseMap: '',
+        Graphic: '',
+        PopupTemplate: '',
+        Circle: '',
+        Point: '',
+        FeatureLayer: '',
+        GraphicsLayer: '',
+        TileLayer: '',
+        SimpleMarkerSymbol: '',
+        Query: '',
+        QueryTask: '',
+        IdentifyTask: '',
+        IdentifyParameters: '',
+        MapView: ''
+      },
+      mapLoading: false
+      // keywords: '', // 查询关键字
+      // showEventPointPopup: true, // 是否显示事部件的popup
+      // queryEventSwitch: '1', // 1==查询事件；0==查询部件
+      // compListOpts: [], // 部件选择下拉框option
+      // 主页面返回值
+      // longitude: '', // 定位点经度
+      // latitude: '' // 定位点纬度
+      // communityId: '', // 社区ID
+      // communityName: '', // 社区名称
+      // gridId: '', // 单元网格ID
+      // componentId: '', // 部件ID
+      // componentName: '' // 部件名称/=
+    }
+  },
+  mounted() {
+    this.importEsri()
+  },
+  methods: {
+    // 初始化ArcGIS API对象
+    importEsri: function() {
+      this.mapLoading = true
+      loadModules([
+        'esri/Map',
+        'esri/Basemap',
+        'esri/Graphic',
+        'esri/PopupTemplate',
+        'esri/geometry/Circle',
+        'esri/geometry/Point',
+        'esri/layers/FeatureLayer',
+        'esri/layers/GraphicsLayer',
+        'esri/layers/TileLayer',
+        'esri/symbols/SimpleMarkerSymbol',
+        'esri/tasks/support/Query',
+        'esri/tasks/QueryTask',
+        'esri/tasks/IdentifyTask',
+        'esri/tasks/support/IdentifyParameters',
+        'esri/views/MapView',
+        'dojo/domReady!'
+      ], option)
+        .then(([
+          Map,
+          BaseMap,
+          Graphic,
+          PopupTemplate,
+          Circle,
+          Point,
+          FeatureLayer,
+          GraphicsLayer,
+          TileLayer,
+          SimpleMarkerSymbol,
+          Query,
+          QueryTask,
+          IdentifyTask,
+          IdentifyParameters,
+          MapView
+        ]) => {
+          this.esriObj.Map = Map
+          this.esriObj.BaseMap = BaseMap
+          this.esriObj.Graphic = Graphic
+          this.esriObj.PopupTemplate = PopupTemplate
+          this.esriObj.Circle = Circle
+          this.esriObj.Point = Point
+          this.esriObj.FeatureLayer = FeatureLayer
+          this.esriObj.GraphicsLayer = GraphicsLayer
+          this.esriObj.TileLayer = TileLayer
+          this.esriObj.SimpleMarkerSymbol = SimpleMarkerSymbol
+          this.esriObj.Query = Query
+          this.esriObj.QueryTask = QueryTask
+          this.esriObj.IdentifyTask = IdentifyTask
+          this.esriObj.IdentifyParameters = IdentifyParameters
+          this.esriObj.MapView = MapView
+
+          // 初始化地图
+          this.initMap()
+          this.mapLoading = false
+        }).catch(err => {
+          console.log(err)
+          this.mapLoading = false
+        })
+    },
+    // 初始化地图
+    initMap: function() {
+      const base = new this.esriObj.BaseMap({
+        baseLayers: [
+          new this.esriObj.TileLayer({ // 可配置属性，见TileLayer类
+            id: '2w',
+            url: serverConfig.mapUrlBase
+          })
+        ],
+        title: 'dx2w',
+        id: 'dx2w'
+      })
+
+      this.map = new this.esriObj.Map({
+        basemap: base // 底图类型，详见BaseMap类
+      })
+
+      this.view = new this.esriObj.MapView({
+        container: this.$refs.mapDiv, // 视图的容器
+        map: this.map, // Map的实例放入视图中
+        center: [116.597, 28.24], // 初始显示的地图中心点，经纬度
+        zoom: 3 // 当前地图缩放等级
+      })
+
+      // const that = this
+      // this.view.on('click', function(event) {
+      //   // 清除地图上已有的事件/部件查询点
+      //   that.clearEOrCPoint()
+
+      //   const lon = event.mapPoint.longitude
+      //   const lat = event.mapPoint.latitude
+
+      //   if (that.showEventPointPopup) {
+      //     // 添加点
+      //     const gLayer = new that.esriObj.GraphicsLayer()
+      //     const marker = new that.esriObj.SimpleMarkerSymbol()
+      //     marker.color = '#35A0E7'
+      //     marker.style = 'square'
+      //     marker.outline = {
+      //       color: [128, 128, 128, 0.5],
+      //       width: '2px'
+      //     }
+      //     const graphic = new that.esriObj.Graphic({
+      //       geometry: event.mapPoint,
+      //       symbol: marker
+      //     })
+
+      //     gLayer.id = eventPointLayerId
+      //     gLayer.add(graphic)
+      //     that.map.add(gLayer)
+
+      //     // 查询事件或者部件
+      //     if (that.queryEventSwitch === '1') {
+      //       // 事件定位
+      //       // 1查询底图得到所在网格与所在社区
+      //       const query = that.layers.dx2wGrid.createQuery()
+      //       query.geometry = that.view.toMap(event)
+      //       query.distance = 10
+      //       query.units = 'meters'
+      //       query.returnGeometry = true
+      //       query.outFields = ['BGID', 'COMMUID', 'COMMUNAME']
+      //       that.layers.dx2wGrid.queryFeatures(query)
+      //         .then(function(response) {
+      //           const result = response.features[0].attributes
+
+      //           // 赋值
+      //           that.longitude = lon
+      //           that.latitude = lat
+      //           that.gridId = result.BGID
+      //           that.communityId = result.COMMUID
+      //           that.communityName = result.COMMUNAME
+
+      //           // 2弹出气泡
+      //           that.view.popup.open({
+      //             title: '事件定位',
+      //             content: '坐标：[' + lon.toFixed(4) + ', ' + lat.toFixed(4) + ']' + '<p>' + '所在社区：' + result.COMMUNAME,
+      //             location: event.mapPoint
+      //           })
+      //         })
+      //     } else if (that.queryEventSwitch === '0') {
+      //       // 部件定位
+      //       const queryDev = that.layers.dxbjPoint.createQuery()
+      //       // 定义查询的圆形范围，半径5米
+      //       const circle = new that.esriObj.Circle({
+      //         center: event.mapPoint,
+      //         radius: 5,
+      //         radiusUnit: 'meters'
+      //       })
+      //       queryDev.geometry = circle
+      //       queryDev.returnGeometry = true
+      //       queryDev.outFields = ['BGID', 'OBJID', 'OBJNAME', 'OBJPOS']
+      //       that.layers.dxbjPoint.queryFeatures(queryDev)
+      //         .then(function(response) {
+      //           if (response.features.length > 0) {
+      //             const results = response.features
+
+      //             that.compListOpts = []
+
+      //             let content = ''
+      //             results.forEach((item, index) => {
+      //               content += '<p>部件' + (index + 1) + '：' + item.attributes.OBJNAME + '，' + item.attributes.OBJPOS
+      //               const comp = {}
+      //               comp.name = '部件' + (index + 1) + '：' + item.attributes.OBJNAME
+      //               comp.value = item.attributes.OBJID
+      //               that.compListOpts.push(comp)
+      //             })
+
+      //             // 2弹出气泡
+      //             that.view.popup.open({
+      //               title: '部件定位',
+      //               content: '坐标：[' + lon.toFixed(4) + ', ' + lat.toFixed(4) + ']，附近5米的部件有：' + content,
+      //               location: event.mapPoint
+      //             })
+
+      //             // 查询所在社区和单元网格
+      //             const queryPos = that.layers.dx2wGrid.createQuery()
+      //             queryPos.geometry = that.view.toMap(event)
+      //             queryPos.returnGeometry = true
+      //             queryPos.outFields = ['BGID', 'COMMUID', 'COMMUNAME']
+      //             that.layers.dx2wGrid.queryFeatures(queryPos)
+      //               .then(function(response) {
+      //                 const result = response.features[0].attributes
+
+      //                 // 赋值
+      //                 that.longitude = lon
+      //                 that.latitude = lat
+      //                 that.gridId = result.BGID
+      //                 that.communityId = result.COMMUID
+      //                 that.communityName = result.COMMUNAME
+      //               })
+      //           } else {
+      //             that.$message({
+      //               message: '没有查询到部件，请重新定位',
+      //               type: 'warning'
+      //             })
+      //           }
+      //         })
+      //     }
+      //   } else {
+      //     that.view.hitTest(event).then(function(response) {
+      //       if (response.results.length) {
+      //         const graphic = response.results[0].graphic
+      //         const name = graphic.attributes.KEYWORD
+      //         const address = graphic.attributes.OBJPOS
+
+      //         that.view.popup.open({
+      //           title: name,
+      //           content: address,
+      //           location: event.mapPoint
+      //         })
+      //       }
+      //     })
+      //   }
+      // })
+
+      this.addBjLayers()
+      this.addCasePointOnMap(this.longitude, this.latitude)
+    },
+    // 加载部件服务的各图层
+    addBjLayers: function() {
+      // 此处可以优化
+      this.layers.dxbjPoint = new this.esriObj.FeatureLayer({ // 可配置属性，见TileLayer类
+        url: serverConfig.mapUrlBj + '/0',
+        id: 'dxbjPoint'
+      })
+      this.layers.dxbjLine = new this.esriObj.FeatureLayer({ // 可配置属性，见TileLayer类
+        url: serverConfig.mapUrlBj + '/1',
+        id: 'dxbjLine'
+      })
+      this.layers.dxbjXqd = new this.esriObj.FeatureLayer({ // 可配置属性，见TileLayer类
+        url: serverConfig.mapUrlBj + '/2',
+        id: 'dxbjXqd'
+      })
+      this.layers.dxbjMph = new this.esriObj.FeatureLayer({ // 可配置属性，见TileLayer类
+        url: serverConfig.mapUrlBj + '/3',
+        id: 'dxbjMph'
+      })
+      // this.layers.dx2wGrid = new this.esriObj.FeatureLayer({
+      //   url: serverConfig.mapUrlBase + '/6',
+      //   id: 'gridLayer'
+      // })
+
+      // 加载各图层
+      this.map.add(this.layers.dxbjPoint)
+      this.map.add(this.layers.dxbjLine)
+      this.map.add(this.layers.dxbjXqd)
+      this.map.add(this.layers.dxbjMph)
+      // this.map.add(this.layers.dx2wGrid)
+    },
+    // 在兴趣点图层查询关键字
+    // queryOnMap: function() {
+    //   const points = [] // 查询结果点集
+
+    //   this.clearQueryResults()
+    //   this.clearEOrCPoint()
+    //   this.showEventPointPopup = false
+    //   this.queryEventSwitch = '2'
+
+    //   // 查询条件
+    //   const query = new this.esriObj.Query()
+    //   query.returnGeometry = true
+    //   query.outFields = ['*']
+    //   query.where = 'NAME like ' + "'%" + this.keywords + "%'"
+    //   const that = this
+
+    //   this.layers.dxbjXqd.queryFeatures(query).then(function(results) {
+    //     results.features.forEach(item => {
+    //       const point = {}
+    //       point.x = item.geometry.longitude
+    //       point.y = item.geometry.latitude
+    //       point.attr = item.attributes
+    //       points.push(point)
+    //     })
+
+    //     // 提示查询结果
+    //     if (points.length > 0) {
+    //       that.$message({
+    //         message: '成功查询到' + points.length + '条记录',
+    //         type: 'success'
+    //       })
+
+    //       // 绘制点
+    //       that.addSimpleMarkerOnMap(points)
+    //     } else {
+    //       that.$message({
+    //         message: '没有查询到结果，请重新输入关键字',
+    //         type: 'warning'
+    //       })
+    //     }
+    //   })
+    // },
+    // 清除图层上的查询结果
+    // clearQueryResults: function() {
+    //   this.map.layers.forEach(layer => {
+    //     if (layer.type === 'graphics' && layer.id === queryResultLayerId) {
+    //       layer.graphics.removeAll()
+    //       return false
+    //     }
+    //   })
+    // },
+    // // 清除图层上的查询结果
+    // clearMap: function() {
+    //   // 清除地图上绘制的graphic图层
+    //   this.map.layers.forEach(layer => {
+    //     if (layer.type === 'graphics') {
+    //       layer.graphics.removeAll()
+    //       return false
+    //     }
+    //   })
+
+    //   // 清除弹出框
+    //   this.view.popup.close()
+
+    //   // 清除data属性值
+    //   this.keywords = ''
+    //   this.showEventPointPopup = true // 是否显示事部件的popup
+    //   this.queryEventSwitch = '1' // 1==查询事件；0==查询部件
+    //   this.compListOpts = [] // 部件选择下拉框option
+    //   this.longitude = '' // 定位点经度
+    //   this.latitude = '' // 定位点纬度
+    //   this.communityId = '' // 社区ID
+    //   this.communityName = '' // 社区名称
+    //   this.gridId = '' // 单元网格ID
+    //   this.componentId = '' // 部件ID
+    //   this.componentName = '' // 部件名称
+    // },
+    // 清除图层上的事件定位点
+    // clearEOrCPoint: function() {
+    //   this.map.layers.forEach(layer => {
+    //     if (layer.type === 'graphics' && layer.id === eventPointLayerId) {
+    //       layer.graphics.removeAll()
+    //       return false
+    //     }
+    //   })
+    //   // 清除弹出框
+    //   this.view.popup.close()
+    // },
+    // 切换
+    // switchEventOrComponent: function() {
+    //   // 如果选中的是事件定位（1）或部件定位（0），点击地图时弹出事件或者部件的popup；否则（2以上）显示兴趣点结果的属性popup
+    //   this.showEventPointPopup = this.queryEventSwitch < 2
+    // },
+    // 将查询结果点集合绘制在地图上
+    // addSimpleMarkerOnMap: function(points) {
+    //   const gLayer = new this.esriObj.GraphicsLayer()
+    //   points.forEach(item => {
+    //     const point = new this.esriObj.Point(item.x, item.y, item.attr)
+    //     const marker = new this.esriObj.SimpleMarkerSymbol()
+    //     marker.color = '#F9690E'
+    //     marker.outline = {
+    //       color: [128, 128, 128, 0.5],
+    //       width: '2px'
+    //     }
+    //     const graphic = new this.esriObj.Graphic({
+    //       geometry: point,
+    //       symbol: marker,
+    //       attributes: item.attr
+    //     })
+    //     gLayer.id = queryResultLayerId
+    //     gLayer.add(graphic)
+    //   })
+    //   this.map.add(gLayer)
+    // },
+    // 返回事件定位的结果
+    // checkEventPoint: function() {
+    //   this.$emit(
+    //     'closeMapQueryDialogByEvent',
+    //     this.longitude,
+    //     this.latitude,
+    //     this.communityId,
+    //     this.communityName,
+    //     this.gridId)
+
+    //   this.clearMap()
+    // },
+    // // 返回部件定位的结果
+    // checkComponentPoint: function() {
+    //   this.$emit(
+    //     'closeMapQueryDialogByComp',
+    //     this.longitude,
+    //     this.latitude,
+    //     this.communityId,
+    //     this.communityName,
+    //     this.gridId,
+    //     this.componentId)
+
+    //   this.clearMap()
+    // },
+    // 在地图上添加指定坐标的点
+    addCasePointOnMap: function(lng, lat) {
+      console.log('addCasePointOnMap', lng, lat)
+      const gLayer = new this.esriObj.GraphicsLayer() // 添加自定义绘制点的图层
+      const point = new this.esriObj.Point(lng, lat) // 创建geometry对象
+      const marker = new this.esriObj.SimpleMarkerSymbol() // 创建marker标识
+      // marker属性
+      marker.color = '#F9690E'
+      marker.outline = {
+        color: [128, 128, 128, 0.5],
+        width: '2px'
+      }
+      // 创建graphic对象
+      const graphic = new this.esriObj.Graphic({
+        geometry: point,
+        symbol: marker
+      })
+      gLayer.id = caseLayerId // 标识案卷图层
+      gLayer.add(graphic) // 图层上添加对象
+      this.map.add(gLayer) // 地图上添加图层
+
+      // 重新设置地图中心点并移动
+      this.view.center = point
+      this.view.goTo(point)
+    }
+  }
+}
+</script>
+
+<style scoped>
+  @import 'https://js.arcgis.com/4.13/esri/css/main.css';
+  .baseMap {
+    height:60vh;
+    width: 100%;
+    margin-top: 25px;
+    border: 1px solid #DCDCDC;
+    border-radius: 4px;
+  }
+</style>
diff --git a/src/router/index.js b/src/router/index.js
index b265a48..1c80473 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -11,6 +11,7 @@
 import { systemRouters } from './modules/system'
 import { cooRouters } from './modules/coo'
 import { commenetRouters } from './modules/comment'
+import { suphandleRouters } from './modules/suphandle'
 import { commonRouters } from './modules/common'
 
 /**
@@ -90,6 +91,7 @@
 export const asyncRouterMap = [
   ...commonRouters,
   ...cooRouters,
+  ...suphandleRouters,
   ...systemRouters,
   ...commenetRouters,
   { path: '*', redirect: '/404', hidden: true, meta: {}}
diff --git a/src/router/modules/suphandle.js b/src/router/modules/suphandle.js
new file mode 100644
index 0000000..7026a7b
--- /dev/null
+++ b/src/router/modules/suphandle.js
@@ -0,0 +1,35 @@
+/* Layout */
+import Layout from '../../views/layout/Layout'
+export const suphandleRouters = [
+  {
+    path: '/suphandle',
+    name: 'suphandle',
+    redirect: '/accessDept',
+    hidden: true,
+    meta: {
+      title: '监督受理子系统',
+      permission: ['/suphandle'],
+      isSys: true
+    }
+  },
+  {
+    path: '/callBus',
+    component: Layout,
+    redirect: '/callBus',
+    name: 'CallBus',
+    alwaysShow: true,
+    meta: {
+      title: '呼叫业务',
+      permission: ['/callBus'],
+      sys: '/suphandle'
+    },
+    children: [
+      {
+        path: '/callCase',
+        component: () => import('@/views/callCase/callCase'),
+        name: 'CallCase',
+        meta: { title: '建立案卷', icon: '', belongSys: '', permission: '/callCase' }
+      }
+    ]
+  }
+]
diff --git a/src/router/modules/system.js b/src/router/modules/system.js
index 10bff2e..c80b732 100644
--- a/src/router/modules/system.js
+++ b/src/router/modules/system.js
@@ -48,6 +48,12 @@
         component: () => import('@/views/busAdmin/userDevice/userDevice'),
         name: 'UserDevice',
         meta: { title: '终端设备管理', icon: '', permission: ['/userDevice'] }
+      },
+      {
+        path: '/areaPersonliable',
+        component: () => import('@/views/busAdmin/areaPersonliable/areaPersonliable'),
+        name: 'AreaPersonliable',
+        meta: { title: '网格责任人管理', icon: '', permission: ['/areaPersonliable'] }
       }
     ]
   },
diff --git a/src/views/busAdmin/areaPersonliable/areaPersonliable.vue b/src/views/busAdmin/areaPersonliable/areaPersonliable.vue
new file mode 100644
index 0000000..23a26de
--- /dev/null
+++ b/src/views/busAdmin/areaPersonliable/areaPersonliable.vue
@@ -0,0 +1,156 @@
+<template>
+  <div class="table-container">
+    <el-row class="table-title">
+      <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
+      <el-col :span="12" :offset="6" class="edit_btns">
+        <el-button v-if="hasPerm('/areaPersonliable/add')" class="edit_btn" size="small" @click="add">新增</el-button>
+      </el-col>
+    </el-row>
+    <el-table v-loading="listLoading" ref="table" :data="list" class="table" border>
+      <el-table-column :index="indexMethod" align="center" type="index" />
+      <el-table-column v-for="column in tableColumns" :key="column.value" :label="column.text" align="center">
+        <template slot-scope="scope">
+          <span>{{ scope.row[column.value] }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column v-if="hasPerm('/areaPersonliable/update')||hasPerm('/areaPersonliable/delete')" label="操作" align="center" width="200">
+        <template slot-scope="scope">
+          <el-button v-if="hasPerm('/areaPersonliable/update')" class="table-button" type="text" @click="edit(scope.row)">编辑</el-button>
+          <el-button v-if="hasPerm('/areaPersonliable/delete')" class="table-button" type="text" @click="del(scope.row)">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <div class="pagination-container">
+      <el-pagination
+        :current-page="listQuery.offset"
+        :page-sizes="[10,20,30,50]"
+        :page-size="listQuery.limit"
+        :total="total"
+        align="center"
+        layout="total, sizes, prev, pager, next"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"/>
+    </div>
+
+    <edit-area-personliable ref="editAreaPersonliable" @watchChild="fetchData"/>
+  </div>
+</template>
+
+<script>
+import { getAreaPersonliableList, deleteAreaPersonliable } from '@/api/busAdmin/areaPersonliable'
+import EditAreaPersonliable from './editAreaPersonliable'
+
+export default {
+  name: 'AreaPersonliable',
+  components: { EditAreaPersonliable },
+  data() {
+    return {
+      list: [],
+      total: 0,
+      listLoading: false,
+      listQuery: {
+        limit: 10,
+        offset: 1,
+        sort: 'id',
+        order: 'asc'
+      },
+      tableColumns: [
+        {
+          text: '网格名称',
+          value: 'areaName'
+        },
+        {
+          text: '责任人姓名',
+          value: 'userName'
+        },
+        {
+          text: '所属区域',
+          value: 'pAreaName'
+        }
+      ]
+    }
+  },
+  activated() {
+    this.fetchData()
+  },
+  methods: {
+    async fetchData() {
+      this.listLoading = true
+      const res = await getAreaPersonliableList(this.listQuery)
+      this.list = res.data.rows
+      this.total = parseInt(res.data.total)
+      this.listLoading = false
+    },
+    indexMethod(index) {
+      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
+    },
+    // 改变页容量
+    handleSizeChange(val) {
+      this.listQuery.limit = val
+      this.fetchData()
+    },
+    // 改变当前页
+    handleCurrentChange(val) {
+      this.listQuery.offset = val
+      this.fetchData()
+    },
+    add() {
+      this.$refs.editAreaPersonliable.initDialog(true, 'create')
+    },
+    edit(row) {
+      this.$refs.editAreaPersonliable.initDialog(true, 'update', row)
+    },
+    del(row) {
+      this.$confirm(
+        '确定要删除吗？',
+        '确认操作',
+        {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }
+      ).then(() => {
+        deleteAreaPersonliable(row.id).then(response => {
+          if (response.code === 200) {
+            this.$message.success('删除成功')
+            this.fetchData()
+          }
+        })
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  $tableTitleHeight:46px;
+  .table{
+    margin-bottom: 20px;
+  }
+  .table-container{
+    margin: 20px;
+  }
+  .table-title{
+    background-color:rgba(243, 243, 243, 1);
+    height: $tableTitleHeight;
+    .title-header{
+      line-height:$tableTitleHeight;
+      color: #606266;
+      font-size: 15px;
+      i{
+        margin-left: 5px;
+        margin-right: 5px;
+      }
+    }
+  }
+  .edit_btns{
+    .edit_btn{
+      float:right;
+      margin:7px 3px;//为了需要居中显示margin-top和bottom要用$tableTitleHeight减去按钮原高度除以2
+    }
+  }
+  .table-button{
+    padding: 10px;
+    height: 23px;
+  }
+</style>
diff --git a/src/views/busAdmin/areaPersonliable/areaSelectTree.vue b/src/views/busAdmin/areaPersonliable/areaSelectTree.vue
new file mode 100644
index 0000000..d0ba37f
--- /dev/null
+++ b/src/views/busAdmin/areaPersonliable/areaSelectTree.vue
@@ -0,0 +1,80 @@
+<template>
+  <el-dialog :visible.sync="dialogFormVisible" append-to-body custom-class="area-select-dialog" title="选择责任网格">
+    <el-scrollbar style="height: 400px">
+      <el-tree
+        ref="tree"
+        :expand-on-click-node="false"
+        :props="defaultProps"
+        :load="loadNode"
+        node-key="id"
+        lazy
+      />
+    </el-scrollbar>
+    <div slot="footer" class="dialog-footer">
+      <el-button type="primary" @click="confirmSelect">确定</el-button>
+      <el-button @click="cancel">取消</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { getAreaTree } from '@/api/area'
+export default {
+  name: 'AreaSelectTree',
+  data() {
+    return {
+      dialogFormVisible: true,
+      defaultProps: {
+        label: 'name',
+        children: 'children',
+        isLeaf: 'leaf'
+      },
+      listQuery: {
+        pid: ''
+      }
+    }
+  },
+  methods: {
+    // 获取数据
+    // fetchData() {
+    //   return new Promise(function(resolve, reject) {
+    //     getAreaTree(this.roleId)
+    //   })
+    // },
+    initDialog() {
+      this.dialogFormVisible = true
+    },
+    loadNode(node, resolve) {
+      if (node.data && node.data.id) {
+        this.listQuery.pid = node.data.id
+      }
+      getAreaTree(this.listQuery).then(response => {
+        const data = response.data
+        resolve(data)
+      })
+    },
+    // 选择后的操作
+    confirmSelect() {
+      const node = this.$refs.tree.getCurrentNode()
+      this.dialogFormVisible = false
+      this.$emit('selectDone', node)
+    },
+    cancel() {
+      this.dialogFormVisible = false
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
+
+<style lang="scss" scope>
+  .area-select-dialog{
+    width: 400px;
+    .el-scrollbar__wrap{
+      overflow-x: hidden !important;
+    }
+  }
+</style>
diff --git a/src/views/busAdmin/areaPersonliable/editAreaPersonliable.vue b/src/views/busAdmin/areaPersonliable/editAreaPersonliable.vue
new file mode 100644
index 0000000..60e99e7
--- /dev/null
+++ b/src/views/busAdmin/areaPersonliable/editAreaPersonliable.vue
@@ -0,0 +1,156 @@
+<template>
+  <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" append-to-body width="35%">
+    <el-form ref="dataForm" :model="AreaPersonliableForm" :rules="rules" label-width="100px">
+      <el-form-item label="网格名称" prop="areaName">
+        <el-input
+          v-model="AreaPersonliableForm.areaName"
+          :disabled="dialogStatus === 'update'"
+          placeholder="请选择责任网格"
+          @focus="openAreaSelect"/>
+      </el-form-item>
+      <el-form-item label="责任人姓名" prop="userId">
+        <el-select v-model="AreaPersonliableForm.userId" filterable clearable style="width:100%" placeholder="请选择责任人">
+          <el-option v-for="user in userList" :key="user.id" :label="user.name" :value="user.id"/>
+        </el-select>
+      </el-form-item>
+    </el-form>
+    <div slot="footer" class="dialog-footer">
+      <el-button type="primary" @click="saveData">保存</el-button>
+      <el-button @click="cancel">取消</el-button>
+    </div>
+    <area-select-tree v-if="areaSelectShow" ref="areaSelect" @selectDone="selectArea"/>
+  </el-dialog>
+</template>
+
+<script>
+import AreaSelectTree from './areaSelectTree'
+import { getSupervisorList, addAreaPersonliable, updateAreaPersonliable } from '@/api/busAdmin/areaPersonliable'
+
+export default {
+  name: 'EditAreaPersonliable',
+  components: { AreaSelectTree },
+  data() {
+    return {
+      dialogFormVisible: false,
+      dialogStatus: '',
+      textMap: {
+        update: '编辑',
+        create: '新增'
+      },
+      AreaPersonliableForm: {
+        id: '',
+        areaId: '',
+        areaName: '',
+        userId: ''
+      },
+      userList: [],
+      rules: {
+        areaName: [{ required: true, message: '区域不能为空', trigger: ['change'] }],
+        userId: [{ required: true, message: '用户不能为空', trigger: ['blur', 'change'] }]
+      },
+      areaSelectShow: false
+    }
+  },
+  mounted() {
+    this.fetchUserList()
+  },
+  methods: {
+    initDialog(dialogFormVisible, dialogStatus, row = null) {
+      this.dialogFormVisible = dialogFormVisible
+      this.dialogStatus = dialogStatus
+      if (this.dialogStatus === 'create') {
+      // 新增时，清空表格和校验
+        this.resetForm()
+        this.$nextTick(() => {
+          this.$refs['dataForm'].clearValidate()
+        })
+      } else if (this.dialogStatus === 'update') {
+      // 更新时，填充数据
+        console.log(row)
+        this.AreaPersonliableForm.id = row.id
+        this.AreaPersonliableForm.areaId = row.areaId
+        this.AreaPersonliableForm.areaName = row.areaName
+        this.AreaPersonliableForm.userId = row.userId
+      }
+    },
+    resetForm() {
+      this.AreaPersonliableForm = {
+        id: '',
+        areaId: '',
+        areaName: '',
+        userId: ''
+      }
+    },
+    fetchUserList() {
+      getSupervisorList().then(response => {
+        this.userList = response.data
+      })
+    },
+    openAreaSelect() {
+      this.areaSelectShow = true
+      setTimeout(this.$refs.areaSelect.initDialog(), 200)
+    },
+    selectArea(node) {
+      this.AreaPersonliableForm.areaId = node.id
+      this.AreaPersonliableForm.areaName = node.name
+    },
+    cancel() {
+      this.dialogFormVisible = false
+    },
+    saveData() {
+      if (this.dialogStatus === 'create') {
+        this.createData()
+      } else if (this.dialogStatus === 'update') {
+        this.updateData()
+      }
+    },
+    createData() {
+      this.$refs['dataForm'].validate(valid => {
+        if (valid) {
+          console.log('create valid success')
+          console.log(this.AreaPersonliableForm)
+          addAreaPersonliable(this.AreaPersonliableForm).then(response => {
+            if (response.code === 200) {
+              this.$message.success('添加成功')
+              this.$emit('watchChild')
+              this.dialogFormVisible = false
+            } else {
+              this.$message.error(response.message)
+            }
+          })
+        } else {
+          console.log('create valid error')
+        }
+      })
+    },
+    updateData() {
+      console.log('update data')
+      this.$refs['dataForm'].validate(valid => {
+        if (valid) {
+          console.log('update valid success')
+          console.log(this.AreaPersonliableForm)
+          updateAreaPersonliable(this.AreaPersonliableForm).then(response => {
+            if (response.code === 200) {
+              this.$message.success('修改成功')
+              this.$emit('watchChild')
+              this.dialogFormVisible = false
+            } else {
+              this.$message.error('修改失败')
+            }
+          })
+        } else {
+          console.log('update valid error')
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.el-form-item {
+  margin-bottom: 22px;
+  margin-left: 20px;
+  margin-right: 50px;
+}
+</style>
diff --git a/src/views/callCase/callCase.vue b/src/views/callCase/callCase.vue
new file mode 100644
index 0000000..513b6b3
--- /dev/null
+++ b/src/views/callCase/callCase.vue
@@ -0,0 +1,651 @@
+<template>
+  <div class="main-form">
+    <el-form ref="dataForm" :model="caseForm" :label-position="labelPosition" :rules="rules" label-width="120px">
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <el-form-item label="举报人" prop="reporterName">
+            <el-input v-model.trim="caseForm.reporterName" type="text" placeholder="必填" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="联系电话" prop="reporterPhone">
+            <el-input v-model.trim="caseForm.reporterPhone" type="text" placeholder="必填" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-button type="primary">历史记录</el-button>
+          <el-button type="primary" @click="openMapQueryDialog">地图查询</el-button>
+        </el-col>
+      </el-row>
+
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <el-form-item label="信息来源" prop="source">
+            <el-select v-model="caseForm.source" placeholder="选择信息来源" clearable value="">
+              <el-option
+                v-for="item in caseSourceOpts"
+                :key="item.value"
+                :label="item.name"
+                :value="item.value"/>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="案卷等级" prop="caseLevel">
+            <el-select v-model="caseForm.caseLevel" placeholder="选择案卷等级" value="">
+              <el-option
+                v-for="item in caseLevelOpts"
+                :key="item.value"
+                :label="item.name"
+                :value="item.value"/>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="是否核实">
+            <div>
+              <el-radio-group v-model="caseForm.isNeedVerify" @change="changeNeedVerify()">
+                <el-radio-button label="1">需要</el-radio-button>
+                <el-radio-button label="0">不需要</el-radio-button>
+              </el-radio-group>
+            </div>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="是否回访">
+            <div>
+              <el-radio-group v-model="caseForm.isNeedRevisit">
+                <el-radio-button label="1">需要</el-radio-button>
+                <el-radio-button label="0">不需要</el-radio-button>
+              </el-radio-group>
+            </div>
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <el-row :gutter="20">
+
+        <el-col :span="6">
+          <el-form-item label="所在区县" prop="areaCode">
+            <el-select v-model="caseForm.areaCode" placeholder="选择所在区县" value="">
+              <el-option key="361029" label="东乡区" value="361029"/>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="所在街道" prop="streetCode">
+            <el-select v-model="caseForm.streetCode" placeholder="选择所在街道" value="">
+              <el-option key="361029001" label="孝岗镇" value="361029001"/>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="所在社区" prop="communityName">
+            <el-input v-model="caseForm.communityName" type="text" placeholder="必填" readonly />
+          </el-form-item>
+        </el-col>
+        <el-col v-if="caseForm.componentId !== ''" :span="6">
+          <el-form-item label="部件编码">
+            <el-input v-model="caseForm.componentId" type="text" placeholder="必填" readonly />
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <el-row :gutter="20">
+        <el-col v-if="showVerifyPerson" :span="6">
+          <el-form-item label="监督员" prop="verifyPersonId">
+            <el-select v-model="caseForm.verifyPersonId" type="text" placeholder="选择监督员" filterable clearable value="">
+              <el-option
+                v-for="item in verifyPersonOpts"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id">
+                <span style="float: left">{{ item.name }}</span>
+                <span style="float: right; color: #999999; font-size: 13px">{{ item.id }}</span>
+              </el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="案卷类别" prop="eorc">
+            <el-select v-model="caseForm.eorc" placeholder="选择案卷类别" value="">
+              <el-option
+                v-for="item in caseEorCOpts"
+                :key="item.value"
+                :label="item.name"
+                :value="item.value"/>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="案卷大类" prop="caseType">
+            <el-select v-model="caseForm.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-col :span="6">
+          <el-form-item label="案卷小类" prop="caseDetailType">
+            <el-select v-model="caseForm.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-row v-if="showCaseTypesTime" :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="立案标准" prop="casetypesTimeId">
+            <el-select v-model="caseForm.casetypesTimeId" placeholder="选择立案标准" clearable value="" style="width: 100%">
+              <el-option
+                v-for="item in caseTypeTimeOpts"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id"/>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="处理时限" prop="bzhours">
+            <el-input-number v-model="caseForm.bzhours" :min="0" style="margin-right: 5px" />小时
+            <el-input-number v-model="caseForm.bzminis" :min="0" :max="59" style="margin-left: 20px; margin-right: 5px" />分钟
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <el-row :gutter="20">
+        <el-col :span="18">
+          <el-form-item label="案卷描述" prop="description">
+            <el-input v-model.trim="caseForm.description" type="textarea" placeholder="必填" clearable />
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <el-row :gutter="20">
+        <el-col :span="18">
+          <el-form-item label="位置描述" prop="fieldintro">
+            <el-input v-model.trim="caseForm.fieldintro" type="text" placeholder="必填" clearable />
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <el-row :gutter="20">
+        <el-col :span="24">
+          <el-form-item label="图片信息" prop="images">
+            <el-upload
+              ref="upload"
+              :before-upload="handleBeforeUpload"
+              :on-preview="handlePictureCardPreview"
+              :on-remove="handleRemove"
+              :on-exceed="handleExceed"
+              :on-success="handleSuccess"
+              :limit="2"
+              :http-request="uploadFile"
+              action="string"
+              multiple
+              accept=".jpg,.jpeg,.png "
+              list-type="picture-card">
+              <i class="el-icon-plus"/>
+            </el-upload>
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <el-row :gutter="20">
+        <el-col :span="18" style="margin-left: 120px; margin-bottom: 40px; text-align: center;">
+          <el-button type="primary" size="medium" icon="el-icon-check" style="width: 200px;" @click="saveData"> 提交 </el-button>
+        </el-col>
+      </el-row>
+
+    </el-form>
+
+    <el-dialog :visible.sync="dialogVisible" title="图片预览" append-to-body>
+      <div class="imgBox">
+        <img :src="dialogImageUrl" max-height="400px;" alt="" style="margin: 0 auto;">
+      </div>
+    </el-dialog>
+
+    <el-dialog
+      :visible.sync="mapDialogVisible"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+      title="地图查询"
+      width="80%"
+      append-to-body>
+
+      <arcgis-map-comp
+        ref="mapComp"
+        @closeMapQueryDialogByEvent="closeMapQueryDialogByEvent"
+        @closeMapQueryDialogByComp="closeMapQueryDialogByComp"/>
+
+    </el-dialog>
+
+  </div>
+</template>
+
+<script>
+import { getCaseSource, getCaseLevel, getCaseEorC, getCaseType, getCaseDetailType, getCaseTypesTime, getVerifyPerson, addCase } from '@/api/callCase/callCase'
+import { Uploadimg } from '@/api/common'
+import ArcgisMapComp from '@/components/Map/ArcGISMap'
+
+export default {
+  name: 'CallCase',
+  components: {// 注册组件
+    ArcgisMapComp: ArcgisMapComp
+  },
+  data() {
+    const phoneValidator = (rule, value, callback) => {
+      if (value !== '') {
+        if ((/^[1][3,5,6,7,8,9][0-9]{9}$/).test(value) === false) {
+          callback(new Error('举报人电话格式不正确'))
+        } else {
+          callback()
+        }
+      } else {
+        callback(new Error('举报人电话不能为空'))
+      }
+    }
+    return {
+      caseForm: {
+        reporterName: '', // 举报人姓名
+        reporterPhone: '', // 举报人电话
+        isNeedVerify: '1', // 是否需要核实
+        isNeedRevisit: '1', // 是否需要回访
+        lng: '', // 经度，
+        lat: '', // 纬度
+        source: '', // 案卷信息来源
+        caseLevel: '', // 案卷等级
+        eorc: '', // 案卷类别
+        casetypeCode: '', // 案卷大类编码,
+        casetypeDetailCode: '', // 案卷小类编码
+        areaCode: '361029', // 所属区县ID
+        streetCode: '361029001', // 所属街道ID
+        communityCode: '', // 所属社区编码
+        communityName: '', // 所属社区NAME
+        gridId: '', // 万米网格ID（单元网格）
+        componentId: '', // 部件ID
+        casetypesTimeId: '', // 立案标准ID
+        bzhours: 0, // 限制完成总时限（小时）
+        bzminis: 0, // 限制完成总时限（分钟）
+        description: '', // 案件描述
+        fieldintro: '', // 位置描述
+        verifyPersonId: '', // 核实人员id
+        photos: '' // 图片存储的地址
+      }, // 表单
+      rules: {
+        reporterName: [{ required: true, message: '举报人姓名不能为空', trigger: ['blur'] }],
+        reporterPhone: [{ required: true, trigger: ['blur'], validator: phoneValidator }],
+        source: [{ required: true, message: '信息来源不能为空', trigger: ['change'] }],
+        caseLevel: [{ required: true, message: '案卷等级不能为空', trigger: ['change'] }],
+        eorc: [{ required: true, message: '案卷类别不能为空', trigger: ['change'] }],
+        description: [{ required: true, message: '案卷描述不能为空', trigger: ['blur'] }],
+        fieldintro: [{ required: true, message: '位置描述不能为空', trigger: ['blur'] }]
+      }, // 表单验证
+      hideUpload: false,
+      fileList: [],
+      imageList: [],
+      uploadPath: process.env.BASE_API + 'imageUpload', // 图片上传路径
+      dialogImageUrl: '',
+      dialogVisible: false,
+      mapDialogVisible: false, // 地图对话框
+      labelPosition: 'right',
+      caseSourceOpts: [], // 案卷来源下拉框
+      caseLevelOpts: [], // 案卷等级下拉框
+      caseEorCOpts: [], // 案卷类别下拉框
+      caseTypeOpts: [], // 案卷大类下拉框
+      caseDetailTypeOpts: [], // 案卷小类下拉框
+      caseTypeTimeOpts: [], // 立案标准下拉框
+      verifyPersonOpts: [], // 监督员下拉框
+      showVerifyPerson: true,
+      showCaseTypesTime: false,
+      caseTypeCodeAuto: '', // 自动生成的案卷大类代码
+      caseTypeDetailCodeAuto: '' // 自动生成的案卷小类代码
+    }
+  },
+  computed: {
+    caseLevel() {
+      return this.caseForm.caseLevel
+    },
+    eorc() {
+      return this.caseForm.eorc
+    },
+    caseType() {
+      return this.caseForm.casetypeCode
+    },
+    caseTypeDetail() {
+      return this.caseForm.casetypeDetailCode
+    },
+    caseTypeDetailTime() {
+      return this.caseForm.casetypesTimeId
+    }
+  },
+  watch: {
+    caseLevel(level) {
+      this.calculateTime(this.caseForm.casetypesTimeId)
+    },
+    eorc(eorcVal) {
+      this.cascaderCaseType(eorcVal)
+    },
+    caseType(typeVal) {
+      this.cascaderCaseDetailType(typeVal)
+    },
+    caseTypeDetail(detailVal) {
+      this.cascaderCaseDetailTypeTime(detailVal)
+    },
+    caseTypeDetailTime(timeVal) {
+      this.calculateTime(timeVal)
+    }
+  },
+  mounted: function() {
+    this.initCaseSource()
+    this.initCaseLevel()
+    this.initCaseEorC()
+    this.initVerifyPerson()
+  },
+  methods: {
+    initCaseSource: function() {
+      getCaseSource().then(response => {
+        this.caseSourceOpts = []
+        for (const opt of response.data) {
+          this.caseSourceOpts.push(opt)
+          if (opt.name.indexOf('电话') >= 0) {
+            this.caseForm.source = opt.value
+          }
+        }
+      })
+    },
+    initCaseLevel: function() {
+      getCaseLevel().then(response => {
+        this.caseLevelOpts = []
+        for (const opt of response.data) {
+          this.caseLevelOpts.push(opt)
+          if (opt.name.indexOf('一般') >= 0) {
+            this.caseForm.caseLevel = opt.value
+          }
+        }
+      })
+    },
+    initCaseEorC: function() {
+      getCaseEorC().then(response => {
+        this.caseEorCOpts = []
+        for (const opt of response.data) {
+          this.caseEorCOpts.push(opt)
+        }
+      })
+    },
+    initVerifyPerson: function() {
+      getVerifyPerson().then(response => {
+        this.verifyPersonOpts = []
+        console.log(response)
+        for (const opt of response.data) {
+          this.verifyPersonOpts.push(opt)
+        }
+      })
+    },
+    // 级联查询案卷大类
+    cascaderCaseType: function(eorc) {
+      // 前两行的作用是清除案卷大类的当前值和select中的所有选项
+      this.caseTypeOpts = []
+      this.caseForm.casetypeCode = ''
+      // 以下两行的作用是清除案卷小类的当前值和select中的所有选项
+      this.caseDetailTypeOpts = []
+      this.caseForm.casetypeDetailCode = ''
+      // 以下两行是清除案卷时限（小时和分钟）
+      this.caseTypeTimeOpts = []
+      this.caseForm.casetypesTimeId = ''
+      this.caseForm.bzhours = 0
+      this.caseForm.bzminis = 0
+
+      // 若事部件选择的值不为空，则查询相应的案卷大类
+      if (eorc !== null && eorc.length > 0) {
+        getCaseType(eorc).then(response => {
+          for (const opt of response.data) {
+            this.caseTypeOpts.push(opt)
+
+            if (opt.typeCode === this.caseTypeCodeAuto) {
+              this.caseForm.casetypeCode = opt.typeCode
+            }
+          }
+        })
+      }
+    },
+    cascaderCaseDetailType: function(typeCode) {
+      // 以下两行的作用是清除案卷小类的当前值和select中的所有选项
+      this.caseDetailTypeOpts = []
+      this.caseForm.casetypeDetailCode = ''
+      // 以下两行是清除案卷时限（小时和分钟）
+      this.caseTypeTimeOpts = []
+      this.caseForm.casetypesTimeId = ''
+      this.caseForm.bzhours = 0
+      this.caseForm.bzminis = 0
+
+      // 根据code获取ID，进行级联查询
+      let typeId = 0
+      this.caseTypeOpts.forEach(item => {
+        if (item.typeCode === typeCode) {
+          typeId = item.id
+        }
+      })
+
+      if (typeId > 0) {
+        getCaseDetailType(typeId).then(response => {
+          for (const opt of response.data) {
+            this.caseDetailTypeOpts.push(opt)
+
+            if (opt.typeDetailCode === this.caseTypeDetailCodeAuto) {
+              this.caseForm.casetypeDetailCode = opt.typeDetailCode
+            }
+          }
+        })
+      }
+    },
+    // 查询立案标准
+    cascaderCaseDetailTypeTime: function(detailCode) {
+      // 以下两行是清除案卷时限（小时和分钟）
+      this.caseTypeTimeOpts = []
+      this.caseForm.casetypesTimeId = ''
+      this.caseForm.bzhours = 0
+      this.caseForm.bzminis = 0
+
+      // 根据code获取ID，进行级联查询
+      let typeDetailId = 0
+      this.caseDetailTypeOpts.forEach(item => {
+        if (item.typeDetailCode === detailCode) {
+          typeDetailId = item.id
+        }
+      })
+
+      if (typeDetailId > 0) {
+        getCaseTypesTime(typeDetailId).then(response => {
+          console.log(response)
+          for (const opt of response.data) {
+            this.caseTypeTimeOpts.push(opt)
+          }
+        })
+      }
+    },
+    calculateTime: function(timeVal) {
+      const hoursPerDay = this.caseForm.caseLevel === '1' ? 8 : 24
+      let day = 0
+      let hours = 0
+      this.caseTypeTimeOpts.forEach(item => {
+        if (item.id === timeVal) {
+          day = item.day
+          hours = item.hours
+        }
+      })
+
+      this.caseForm.bzhours = hoursPerDay * parseInt(day) + parseInt(hours)
+    },
+    // 打开地图查询对话框显示地图
+    openMapQueryDialog: function() {
+      this.mapDialogVisible = true
+    },
+    // 关闭地图查询对话框
+    closeMapQueryDialogByEvent: function(longitude, latitude, communityId, communityName, gridId) {
+      this.mapDialogVisible = false
+
+      // 赋值
+      this.caseForm.eorc = '1' // 事件点返回时案卷类别自动选择为事件
+      this.caseForm.communityCode = communityId
+      this.caseForm.communityName = communityName
+      this.caseForm.gridId = gridId
+      this.caseForm.lng = longitude
+      this.caseForm.lat = latitude
+
+      this.caseForm.areaCode = communityId.substring(0, 6) // 区县代码
+      this.caseForm.streetCode = communityId.substring(0, 9) // 街道代码
+    },
+    // 关闭地图查询对话框
+    closeMapQueryDialogByComp: function(longitude, latitude, communityId, communityName, gridId, componentId, componentName) {
+      this.mapDialogVisible = false
+
+      // 赋值
+      this.caseForm.eorc = '2' // 部件点返回时案卷类别自动选择为部件
+      this.caseForm.communityCode = communityId
+      this.caseForm.communityName = communityName
+      this.caseForm.gridId = gridId
+      this.caseForm.lng = longitude
+      this.caseForm.lat = latitude
+      this.caseForm.componentId = componentId
+      this.caseForm.componentName = componentName
+
+      this.caseForm.areaCode = communityId.substring(0, 6) // 区县代码
+      this.caseForm.streetCode = communityId.substring(0, 9) // 街道代码
+      this.caseTypeCodeAuto = componentId.substring(6, 8) // 自动赋值部件大类
+      this.caseTypeDetailCodeAuto = componentId.substring(8, 10) // 自动赋值部件小类
+    },
+    // 修改是否需要核实
+    changeNeedVerify: function() {
+      if (this.caseForm.isNeedVerify === '0') {
+        // 不需要核实，显示立案标准、处理时限
+        this.showVerifyPerson = false
+        this.showCaseTypesTime = true
+      } else {
+        this.showVerifyPerson = true
+        this.showCaseTypesTime = false
+      }
+    },
+    // 保存数据
+    saveData: function() {
+      const that = this
+      if (this.fileList.length > 0) {
+        let photos = ''
+        this.fileList.forEach(photo => {
+          photos += photo.url + ','
+        })
+        this.caseForm.photos = photos.substring(0, photos.length - 1)
+      }
+
+      this.$refs['dataForm'].validate((valid) => {
+        console.log(valid)
+        if (valid) {
+          addCase(this.caseForm).then(function(response) {
+            if (response.code === 200) {
+              that.$message({
+                message: '添加案卷成功',
+                type: 'success'
+              })
+
+              that.$router.push({ path: '/dashboard' })
+            } else {
+              that.$message({
+                message: '添加案卷失败',
+                type: 'error'
+              })
+            }
+          })
+        }
+      })
+    },
+    // 图片上传
+    uploadFile(file) {
+      console.log('uploadFile:' + file.file.name)
+      // const base_url = process.env.BASE_API + '/static/'
+      Uploadimg(file).then(res => {
+        console.log(res)
+        if (res.code === 200) {
+          this.fileList.push({ name: file.file.name, url: res.data })
+        }
+      })
+    },
+    // 上传前判断文件格式及大小
+    handleBeforeUpload(file) {
+      const isJPG = (file.type === 'image/jpeg') || (file.type === 'image/png')
+      let res = true
+      const isLt2M = file.size / 1024 / 1024 < 2
+      if (!isJPG) {
+        this.$message.error('上传图片只能是 JPG 或 PNG 格式!')
+        res = false
+      }
+      if (!isLt2M) {
+        this.$message.error('上传图片大小不能超过 2MB!')
+        res = false
+      }
+      for (const i in this.fileList) {
+        if (this.fileList[i].name === file.name) {
+          this.$message.error('该图片已上传过，请选择其他图片')
+          res = false
+        }
+      }
+      return res
+    },
+    // 文件列表移除文件时的钩子
+    handleRemove(file, fileList) {
+      console.log('handleRemove')
+      for (const i in this.fileList) {
+        if (this.fileList[i].name === file.name) {
+          this.fileList.splice(i, 1)
+          this.hideUpload = this.fileList.length >= 2
+          return
+        }
+      }
+      this.handleChange()
+    },
+    // 限制提示
+    handleExceed(files, fileList) {
+      console.log('handleExceed')
+      this.$message.warning(`限制选择 2 张图片，本次选择了 ${files.length} 张图片，共选择了 ${files.length + fileList.length} 张图片`)
+    },
+    // 点击文件列表中已上传的文件时的钩子
+    handlePictureCardPreview(file) {
+      console.log('handlePictureCardPreview')
+      this.dialogImageUrl = file.url
+      this.dialogVisible = true
+    },
+    handleChange(file, fileList) {
+      console.log('handleChange')
+      if (fileList) {
+        this.hideUpload = fileList.length >= 2
+      } else {
+        this.hideUpload = false
+      }
+    },
+    handleSuccess(response, file, fileList) {
+      console.log('handleSuccess')
+      console.log(response)
+      const base_url = process.env.BASE_API + '/static/'
+      if (response.code === 200) {
+        this.fileList.push({ name: file.file.name, url: base_url + response.data })
+        this.handleChange()
+      } else {
+        this.$message.warning(response.message)
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .main-form{
+    margin: 20px;
+  }
+</style>
diff --git a/src/views/caseCommon/caseDetailRead.vue b/src/views/caseCommon/caseDetailRead.vue
index 33473eb..e4b71cc 100644
--- a/src/views/caseCommon/caseDetailRead.vue
+++ b/src/views/caseCommon/caseDetailRead.vue
@@ -158,11 +158,11 @@
 
 <script>
 import { getCaseDetail } from '@/api/coorBusiness/case'
-import ArcGisMap from '@/components/Map/arcgisMap'
+import ArcGisMapRead from '@/components/Map/arcgisMapRead'
 
 export default {
   name: 'CaseDetail',
-  components: { ArcGisMap },
+  components: { ArcGisMapRead },
   data() {
     return {
       id: '',

diff --git a/src/api/busAdmin/areaPersonliable.js b/src/api/busAdmin/areaPersonliable.js
new file mode 100644
index 0000000..58737bb
--- /dev/null
+++ b/src/api/busAdmin/areaPersonliable.js
@@ -0,0 +1,45 @@
+import request from '@/utils/request'
+
+export function getAreaPersonliableList(params) {
+  return request({
+    url: '/areaPersonliable/listPage',
+    method: 'get',
+    params
+  })
+}
+
+export function addAreaPersonliable(params) {
+  return request({
+    url: '/areaPersonliable/add',
+    method: 'post',
+    params
+  })
+}
+
+export function updateAreaPersonliable(params) {
+  return request({
+    url: '/areaPersonliable/update',
+    method: 'post',
+    params
+  })
+}
+
+export function deleteAreaPersonliable(id) {
+  return request({
+    url: '/areaPersonliable/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+export function getSupervisorList() {
+  return request({
+    url: '/mgr/simplelist',
+    method: 'post',
+    params: {
+      roleTips: 'supervisor'
+    }
+  })
+}
diff --git a/src/api/callCase/callCase.js b/src/api/callCase/callCase.js
new file mode 100644
index 0000000..7500fc7
--- /dev/null
+++ b/src/api/callCase/callCase.js
@@ -0,0 +1,87 @@
+/**
+ * 新建案卷的接口
+ */
+import request from '@/utils/request'
+
+// 获取案卷信息来源
+export function getCaseSource(params) {
+  return request({
+    url: 'dict/code/caseSource',
+    method: 'get',
+    params
+  })
+}
+
+// 获取案卷等级
+export function getCaseLevel(params) {
+  return request({
+    url: 'dict/code/caseLevel',
+    method: 'get',
+    params
+  })
+}
+
+// 获取案卷类别
+export function getCaseEorC(params) {
+  return request({
+    url: 'dict/code/eorc',
+    method: 'get',
+    params
+  })
+}
+
+// 根据案卷类别获取案卷大类
+export function getCaseType(eorc) {
+  return request({
+    url: 'case/type/list',
+    method: 'get',
+    params: {
+      eorc: eorc
+    }
+  })
+}
+
+// 根据案卷大类获取案卷小类
+export function getCaseDetailType(caseTypeId) {
+  return request({
+    url: 'case/typeDetail/list',
+    method: 'get',
+    params: {
+      typeId: caseTypeId
+    }
+  })
+}
+
+// 根据案卷小类获取结案标准
+export function getCaseTypesTime(caseTypeDetailId) {
+  return request({
+    url: 'case/typesTime/list',
+    method: 'get',
+    params: {
+      detailId: caseTypeDetailId
+    }
+  })
+}
+
+// 获取监督员列表
+export function getVerifyPerson(params) {
+  return request({
+    url: 'mgr/simplelist',
+    method: 'post',
+    params: {
+      roleTips: 'supervisor'
+    }
+  })
+}
+
+// 新增案卷
+export function addCase(params) {
+  return request({
+    url: 'case/add',
+    method: 'post',
+    headers: {
+      'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
+    },
+    params
+  })
+}
diff --git a/src/api/coorBusiness/case.js b/src/api/coorBusiness/case.js
index ec5a88a..08c3a13 100644
--- a/src/api/coorBusiness/case.js
+++ b/src/api/coorBusiness/case.js
@@ -110,9 +110,10 @@
   })
 }
 
+// 待处理
 export function toHandleListPage(params) {
   return request({
-    url: 'case/toHandleListPage/',
+    url: 'case/toProcessListPage/',
     method: 'get',
     params
   })
@@ -158,9 +159,10 @@
   })
 }
 
+// 待核查
 export function toCheckListPage(params) {
   return request({
-    url: 'case/toCheckListPage/',
+    url: 'case/toDisCheckListPage/',
     method: 'get',
     params
   })
diff --git a/src/components/CaseCommon/caseDetail.vue b/src/components/CaseCommon/caseDetail.vue
index f6c23ab..fdadcba 100644
--- a/src/components/CaseCommon/caseDetail.vue
+++ b/src/components/CaseCommon/caseDetail.vue
@@ -276,7 +276,7 @@
     </el-row>
     <el-row>
       <div class="title">数据流转:</div>
-      <el-table :data="recordList" :header-cell-style="{background:'#f3f3f3'}" class="table" border>
+      <el-table :data="recordList" :header-cell-style="{background:'#f3f3f3'}" max-height="400" class="table" border>
         <el-table-column prop="operationTypeName" label="操作" align="center"/>
         <el-table-column prop="deptName" label="单位" align="center"/>
         <el-table-column prop="userName" label="人员" align="center"/>
@@ -293,7 +293,7 @@
       :append-to-body="true"
       title="位置详情"
     >
-      <arc-gis-map :longitude="Number(caseDetail.lng)" :latitude="Number(caseDetail.lat)"/>
+      <arc-gis-map-read :longitude="Number(caseDetail.lng)" :latitude="Number(caseDetail.lat)"/>
     </el-dialog>
   </div>
 </template>
@@ -303,12 +303,12 @@
 import { getCaseDetail, getUserList, getDeptList, getCaseTypeList, getCaseTypeDetailList, getCaseTypeTimes } from '@/api/coorBusiness/case'
 import { getCommonLanguage, getFilingTypeList, getCaseLevelList } from '@/api/coorBusiness/dict'
 import { historicalRecords, nextNodes, completeCaseTask } from '@/api/coorBusiness/process'
-import ArcGisMap from '@/components/Map/arcgisMap'
+import ArcGisMapRead from '@/components/Map/arcgisMapRead'
 import { radioMap } from './radioMap'
 
 export default {
   name: 'CaseDetail',
-  components: { ArcGisMap },
+  components: { ArcGisMapRead },
   // props: {
   //   id: {
   //     type: String,
@@ -334,7 +334,6 @@
       showNeedVisit: false,
       caseDetail: {},
       operationKey: '', // 案件处理按钮key
-      imgurl: 'http:\\\\192.168.8.201:8083\\static\\',
       fileIdVerify: [], // 核实照片id
       fileIdProcess: [], // 处理照片id
       fileIdCheck: [], // 核查照片id
@@ -358,10 +357,12 @@
   computed: {
     isNeedVisit: function() {
       return this.caseDetail.isNeedRevisit === 1 ? '需要回访' : '不需要回访'
+    },
+    imgurl() {
+      return process.env.BASE_API + '/static/'
     }
   },
-  mounted() {
-    console.log('case dtial')
+  created() {
     this.id = this.$route.query.id
     this.showProcess = (this.$route.query.showProcess || this.$route.query.showProcess === false) ? this.$route.query.showProcess : true
     this.showNeedVisit = this.$route.query.showNeedVisit ? this.$route.query.showNeedVisit : false
@@ -371,7 +372,6 @@
     async initData() {
       // 查询案件详情接口
       const resDetail = await getCaseDetail(this.id)
-      console.log('detail', resDetail)
       this.caseDetail = resDetail.data[0]
 
       // 解析图片id
@@ -391,9 +391,11 @@
 
       // 查询流转记录接口
       this.processForm.processId = this.caseDetail.processId
-      const resRecord = await historicalRecords(this.processForm.processId)
-      this.recordList = resRecord.data
-      console.log(this.recordList)
+      // const resRecord = historicalRecords(this.processForm.processId)
+      // this.recordList = resRecord.data
+      historicalRecords(this.processForm.processId).then(res => {
+        this.recordList = res.data
+      })
 
       if (this.showProcess) {
         this.initProcess()
@@ -701,6 +703,7 @@
   .table{
     margin: 20px;
     width: 98%;
+    // max-height: 250px;
   }
   .title{
     margin-left: 38px;
diff --git a/src/components/CaseCommon/caseDetailRead.vue b/src/components/CaseCommon/caseDetailRead.vue
index 82066db..a4e87b0 100644
--- a/src/components/CaseCommon/caseDetailRead.vue
+++ b/src/components/CaseCommon/caseDetailRead.vue
@@ -158,11 +158,11 @@
 
 <script>
 import { getCaseDetail } from '@/api/coorBusiness/case'
-import ArcGisMap from '@/components/Map/arcgisMap'
+import ArcGisMapRead from '@/components/Map/arcgisMapRead'
 
 export default {
   name: 'CaseDetail',
-  components: { ArcGisMap },
+  components: { ArcGisMapRead },
   props: {
     id: {
       type: String,
diff --git a/src/components/Map/ArcGISConfig.js b/src/components/Map/ArcGISConfig.js
index d325da9..50cea3b 100644
--- a/src/components/Map/ArcGISConfig.js
+++ b/src/components/Map/ArcGISConfig.js
@@ -1,14 +1,16 @@
 export const mapConfig = {
-  apiUrl: 'https://js.arcgis.com/4.13/', // 暂时使用管网提供的api，实际部署时建议离线部署一套
+  apiUrl: 'http://192.168.8.205/arcgis_js_api/library/4.12/init.js', // 暂时使用管网提供的api，实际部署时建议离线部署一套
+  // apiUrl: 'https://js.arcgis.com/4.13/',
   mapIp: '223.84.218.107', // 服务ip
   mapPort: '6080', // 服务端口
-  serverBase: 'http://223.84.218.107:6080/arcgis/rest/services/', // 服务地址前缀
+  serverBase: 'http://192.168.8.205:6080/arcgis/rest/services/', // 服务地址前缀
+  // serverBase: 'http://223.84.218.107:6080/arcgis/rest/services/dx/',
   mapCenter: '[116.597,28.24]' // 地图中心点
 }
 
 export const serverConfig = {
-  mapUrlBase: mapConfig.serverBase + 'dx/2w/MapServer', // 底图服务地址
-  mapUrlBj: mapConfig.serverBase + 'dx/dxbj/MapServer', // 部件服务地址
-  mapUrlBjfc: mapConfig.serverBase + 'dx/bjfc/MapServer', // 部件分层服务地址
-  mapUrlBjEdit: mapConfig.serverBase + 'dx/dxbj/FeatureServer' // 可编辑的部件图层
+  mapUrlBase: mapConfig.serverBase + '2w/MapServer', // 底图服务地址
+  mapUrlBj: mapConfig.serverBase + 'dxbj/MapServer', // 部件服务地址
+  mapUrlBjfc: mapConfig.serverBase + 'bjfc/MapServer', // 部件分层服务地址
+  mapUrlBjEdit: mapConfig.serverBase + 'dxbj/FeatureServer' // 可编辑的部件图层
 }
diff --git a/src/components/Map/arcgisMap.vue b/src/components/Map/arcgisMap.vue
index 53776f1..5c15383 100644
--- a/src/components/Map/arcgisMap.vue
+++ b/src/components/Map/arcgisMap.vue
@@ -1,6 +1,6 @@
 <template>
-  <div style="margin-top:-30px">
-    <!-- <el-row :gutter="20">
+  <div>
+    <el-row :gutter="20">
       <el-col :span="4">
         <el-input v-model="keywords" size="small" type="text" placeholder="兴趣点关键字" clearable />
       </el-col>
@@ -31,9 +31,9 @@
       <el-col v-if="queryEventSwitch === '1'" :span="8" style="text-align: right;">
         <el-button type="primary" size="small" @click="checkEventPoint"> 事件提交 </el-button>
       </el-col>
-    </el-row> -->
+    </el-row>
 
-    <div v-loading="mapLoading" ref="mapDiv" class="baseMap" />
+    <div ref="mapDiv" class="baseMap" />
   </div>
 </template>
 
@@ -45,22 +45,12 @@
   url: mapConfig.apiUrl
 }
 
-// const eventPointLayerId = 'eventPointLayer' // 事件定位点的图层id
-// const queryResultLayerId = 'queryResultLayer' // 兴趣点查询结果点集的图层id
+const eventPointLayerId = 'eventPointLayer' // 事件定位点的图层id
+const queryResultLayerId = 'queryResultLayer' // 兴趣点查询结果点集的图层id
 const caseLayerId = 'addedGeometryLayerId' // 案卷点图层
 
 export default {
-  name: 'ArcGisMap',
-  props: {
-    longitude: {
-      type: Number,
-      default: 116.5937
-    },
-    latitude: {
-      type: Number,
-      default: 28.249
-    }
-  },
+  name: 'ArcGISMap',
   data() {
     return {
       map: '',
@@ -89,19 +79,18 @@
         IdentifyParameters: '',
         MapView: ''
       },
-      mapLoading: false
-      // keywords: '', // 查询关键字
-      // showEventPointPopup: true, // 是否显示事部件的popup
-      // queryEventSwitch: '1', // 1==查询事件；0==查询部件
-      // compListOpts: [], // 部件选择下拉框option
+      keywords: '', // 查询关键字
+      showEventPointPopup: true, // 是否显示事部件的popup
+      queryEventSwitch: '1', // 1==查询事件；0==查询部件
+      compListOpts: [], // 部件选择下拉框option
       // 主页面返回值
-      // longitude: '', // 定位点经度
-      // latitude: '' // 定位点纬度
-      // communityId: '', // 社区ID
-      // communityName: '', // 社区名称
-      // gridId: '', // 单元网格ID
-      // componentId: '', // 部件ID
-      // componentName: '' // 部件名称/=
+      longitude: '', // 定位点经度
+      latitude: '', // 定位点纬度
+      communityId: '', // 社区ID
+      communityName: '', // 社区名称
+      gridId: '', // 单元网格ID
+      componentId: '', // 部件ID
+      componentName: '' // 部件名称
     }
   },
   mounted() {
@@ -110,7 +99,6 @@
   methods: {
     // 初始化ArcGIS API对象
     importEsri: function() {
-      this.mapLoading = true
       loadModules([
         'esri/Map',
         'esri/Basemap',
@@ -164,10 +152,8 @@
 
           // 初始化地图
           this.initMap()
-          this.mapLoading = false
         }).catch(err => {
           console.log(err)
-          this.mapLoading = false
         })
     },
     // 初始化地图
@@ -194,139 +180,139 @@
         zoom: 3 // 当前地图缩放等级
       })
 
-      // const that = this
-      // this.view.on('click', function(event) {
-      //   // 清除地图上已有的事件/部件查询点
-      //   that.clearEOrCPoint()
+      const that = this
+      this.view.on('click', function(event) {
+        // 清除地图上已有的事件/部件查询点
+        that.clearEOrCPoint()
 
-      //   const lon = event.mapPoint.longitude
-      //   const lat = event.mapPoint.latitude
+        const lon = event.mapPoint.longitude
+        const lat = event.mapPoint.latitude
 
-      //   if (that.showEventPointPopup) {
-      //     // 添加点
-      //     const gLayer = new that.esriObj.GraphicsLayer()
-      //     const marker = new that.esriObj.SimpleMarkerSymbol()
-      //     marker.color = '#35A0E7'
-      //     marker.style = 'square'
-      //     marker.outline = {
-      //       color: [128, 128, 128, 0.5],
-      //       width: '2px'
-      //     }
-      //     const graphic = new that.esriObj.Graphic({
-      //       geometry: event.mapPoint,
-      //       symbol: marker
-      //     })
+        if (that.showEventPointPopup) {
+          // 添加点
+          const gLayer = new that.esriObj.GraphicsLayer()
+          const marker = new that.esriObj.SimpleMarkerSymbol()
+          marker.color = '#35A0E7'
+          marker.style = 'square'
+          marker.outline = {
+            color: [128, 128, 128, 0.5],
+            width: '2px'
+          }
+          const graphic = new that.esriObj.Graphic({
+            geometry: event.mapPoint,
+            symbol: marker
+          })
 
-      //     gLayer.id = eventPointLayerId
-      //     gLayer.add(graphic)
-      //     that.map.add(gLayer)
+          gLayer.id = eventPointLayerId
+          gLayer.add(graphic)
+          that.map.add(gLayer)
 
-      //     // 查询事件或者部件
-      //     if (that.queryEventSwitch === '1') {
-      //       // 事件定位
-      //       // 1查询底图得到所在网格与所在社区
-      //       const query = that.layers.dx2wGrid.createQuery()
-      //       query.geometry = that.view.toMap(event)
-      //       query.distance = 10
-      //       query.units = 'meters'
-      //       query.returnGeometry = true
-      //       query.outFields = ['BGID', 'COMMUID', 'COMMUNAME']
-      //       that.layers.dx2wGrid.queryFeatures(query)
-      //         .then(function(response) {
-      //           const result = response.features[0].attributes
+          // 查询事件或者部件
+          if (that.queryEventSwitch === '1') {
+            // 事件定位
+            // 1查询底图得到所在网格与所在社区
+            const query = that.layers.dx2wGrid.createQuery()
+            query.geometry = that.view.toMap(event)
+            query.distance = 10
+            query.units = 'meters'
+            query.returnGeometry = true
+            query.outFields = ['BGID', 'COMMUID', 'COMMUNAME']
+            that.layers.dx2wGrid.queryFeatures(query)
+              .then(function(response) {
+                const result = response.features[0].attributes
 
-      //           // 赋值
-      //           that.longitude = lon
-      //           that.latitude = lat
-      //           that.gridId = result.BGID
-      //           that.communityId = result.COMMUID
-      //           that.communityName = result.COMMUNAME
+                // 赋值
+                that.longitude = lon
+                that.latitude = lat
+                that.gridId = result.BGID
+                that.communityId = result.COMMUID
+                that.communityName = result.COMMUNAME
 
-      //           // 2弹出气泡
-      //           that.view.popup.open({
-      //             title: '事件定位',
-      //             content: '坐标：[' + lon.toFixed(4) + ', ' + lat.toFixed(4) + ']' + '<p>' + '所在社区：' + result.COMMUNAME,
-      //             location: event.mapPoint
-      //           })
-      //         })
-      //     } else if (that.queryEventSwitch === '0') {
-      //       // 部件定位
-      //       const queryDev = that.layers.dxbjPoint.createQuery()
-      //       // 定义查询的圆形范围，半径5米
-      //       const circle = new that.esriObj.Circle({
-      //         center: event.mapPoint,
-      //         radius: 5,
-      //         radiusUnit: 'meters'
-      //       })
-      //       queryDev.geometry = circle
-      //       queryDev.returnGeometry = true
-      //       queryDev.outFields = ['BGID', 'OBJID', 'OBJNAME', 'OBJPOS']
-      //       that.layers.dxbjPoint.queryFeatures(queryDev)
-      //         .then(function(response) {
-      //           if (response.features.length > 0) {
-      //             const results = response.features
+                // 2弹出气泡
+                that.view.popup.open({
+                  title: '事件定位',
+                  content: '坐标：[' + lon.toFixed(4) + ', ' + lat.toFixed(4) + ']' + '<p>' + '所在社区：' + result.COMMUNAME,
+                  location: event.mapPoint
+                })
+              })
+          } else if (that.queryEventSwitch === '0') {
+            // 部件定位
+            const queryDev = that.layers.dxbjPoint.createQuery()
+            // 定义查询的圆形范围，半径5米
+            const circle = new that.esriObj.Circle({
+              center: event.mapPoint,
+              radius: 5,
+              radiusUnit: 'meters'
+            })
+            queryDev.geometry = circle
+            queryDev.returnGeometry = true
+            queryDev.outFields = ['BGID', 'OBJID', 'OBJNAME', 'OBJPOS']
+            that.layers.dxbjPoint.queryFeatures(queryDev)
+              .then(function(response) {
+                if (response.features.length > 0) {
+                  const results = response.features
 
-      //             that.compListOpts = []
+                  that.compListOpts = []
 
-      //             let content = ''
-      //             results.forEach((item, index) => {
-      //               content += '<p>部件' + (index + 1) + '：' + item.attributes.OBJNAME + '，' + item.attributes.OBJPOS
-      //               const comp = {}
-      //               comp.name = '部件' + (index + 1) + '：' + item.attributes.OBJNAME
-      //               comp.value = item.attributes.OBJID
-      //               that.compListOpts.push(comp)
-      //             })
+                  let content = ''
+                  results.forEach((item, index) => {
+                    content += '<p>部件' + (index + 1) + '：' + item.attributes.OBJNAME + '，' + item.attributes.OBJPOS
+                    const comp = {}
+                    comp.name = '部件' + (index + 1) + '：' + item.attributes.OBJNAME
+                    comp.value = item.attributes.OBJID
+                    that.compListOpts.push(comp)
+                  })
 
-      //             // 2弹出气泡
-      //             that.view.popup.open({
-      //               title: '部件定位',
-      //               content: '坐标：[' + lon.toFixed(4) + ', ' + lat.toFixed(4) + ']，附近5米的部件有：' + content,
-      //               location: event.mapPoint
-      //             })
+                  // 2弹出气泡
+                  that.view.popup.open({
+                    title: '部件定位',
+                    content: '坐标：[' + lon.toFixed(4) + ', ' + lat.toFixed(4) + ']，附近5米的部件有：' + content,
+                    location: event.mapPoint
+                  })
 
-      //             // 查询所在社区和单元网格
-      //             const queryPos = that.layers.dx2wGrid.createQuery()
-      //             queryPos.geometry = that.view.toMap(event)
-      //             queryPos.returnGeometry = true
-      //             queryPos.outFields = ['BGID', 'COMMUID', 'COMMUNAME']
-      //             that.layers.dx2wGrid.queryFeatures(queryPos)
-      //               .then(function(response) {
-      //                 const result = response.features[0].attributes
+                  // 查询所在社区和单元网格
+                  const queryPos = that.layers.dx2wGrid.createQuery()
+                  queryPos.geometry = that.view.toMap(event)
+                  queryPos.returnGeometry = true
+                  queryPos.outFields = ['BGID', 'COMMUID', 'COMMUNAME']
+                  that.layers.dx2wGrid.queryFeatures(queryPos)
+                    .then(function(response) {
+                      const result = response.features[0].attributes
 
-      //                 // 赋值
-      //                 that.longitude = lon
-      //                 that.latitude = lat
-      //                 that.gridId = result.BGID
-      //                 that.communityId = result.COMMUID
-      //                 that.communityName = result.COMMUNAME
-      //               })
-      //           } else {
-      //             that.$message({
-      //               message: '没有查询到部件，请重新定位',
-      //               type: 'warning'
-      //             })
-      //           }
-      //         })
-      //     }
-      //   } else {
-      //     that.view.hitTest(event).then(function(response) {
-      //       if (response.results.length) {
-      //         const graphic = response.results[0].graphic
-      //         const name = graphic.attributes.KEYWORD
-      //         const address = graphic.attributes.OBJPOS
+                      // 赋值
+                      that.longitude = lon
+                      that.latitude = lat
+                      that.gridId = result.BGID
+                      that.communityId = result.COMMUID
+                      that.communityName = result.COMMUNAME
+                    })
+                } else {
+                  that.$message({
+                    message: '没有查询到部件，请重新定位',
+                    type: 'warning'
+                  })
+                }
+              })
+          }
+        } else {
+          that.view.hitTest(event).then(function(response) {
+            if (response.results.length) {
+              const graphic = response.results[0].graphic
+              const name = graphic.attributes.KEYWORD
+              const address = graphic.attributes.OBJPOS
 
-      //         that.view.popup.open({
-      //           title: name,
-      //           content: address,
-      //           location: event.mapPoint
-      //         })
-      //       }
-      //     })
-      //   }
-      // })
+              that.view.popup.open({
+                title: name,
+                content: address,
+                location: event.mapPoint
+              })
+            }
+          })
+        }
+      })
 
       this.addBjLayers()
-      this.addCasePointOnMap(this.longitude, this.latitude)
+      // this.addCasePointOnMap(116.5937, 28.249)
     },
     // 加载部件服务的各图层
     addBjLayers: function() {
@@ -347,160 +333,159 @@
         url: serverConfig.mapUrlBj + '/3',
         id: 'dxbjMph'
       })
-      // this.layers.dx2wGrid = new this.esriObj.FeatureLayer({
-      //   url: serverConfig.mapUrlBase + '/6',
-      //   id: 'gridLayer'
-      // })
+      this.layers.dx2wGrid = new this.esriObj.FeatureLayer({
+        url: serverConfig.mapUrlBase + '/1',
+        id: 'gridLayer'
+      })
 
       // 加载各图层
       this.map.add(this.layers.dxbjPoint)
       this.map.add(this.layers.dxbjLine)
       this.map.add(this.layers.dxbjXqd)
       this.map.add(this.layers.dxbjMph)
-      // this.map.add(this.layers.dx2wGrid)
+      this.map.add(this.layers.dx2wGrid)
     },
     // 在兴趣点图层查询关键字
-    // queryOnMap: function() {
-    //   const points = [] // 查询结果点集
+    queryOnMap: function() {
+      const points = [] // 查询结果点集
 
-    //   this.clearQueryResults()
-    //   this.clearEOrCPoint()
-    //   this.showEventPointPopup = false
-    //   this.queryEventSwitch = '2'
+      this.clearQueryResults()
+      this.clearEOrCPoint()
+      this.showEventPointPopup = false
+      this.queryEventSwitch = '2'
 
-    //   // 查询条件
-    //   const query = new this.esriObj.Query()
-    //   query.returnGeometry = true
-    //   query.outFields = ['*']
-    //   query.where = 'NAME like ' + "'%" + this.keywords + "%'"
-    //   const that = this
+      // 查询条件
+      const query = new this.esriObj.Query()
+      query.returnGeometry = true
+      query.outFields = ['*']
+      query.where = 'NAME like ' + "'%" + this.keywords + "%'"
+      const that = this
 
-    //   this.layers.dxbjXqd.queryFeatures(query).then(function(results) {
-    //     results.features.forEach(item => {
-    //       const point = {}
-    //       point.x = item.geometry.longitude
-    //       point.y = item.geometry.latitude
-    //       point.attr = item.attributes
-    //       points.push(point)
-    //     })
+      this.layers.dxbjXqd.queryFeatures(query).then(function(results) {
+        results.features.forEach(item => {
+          const point = {}
+          point.x = item.geometry.longitude
+          point.y = item.geometry.latitude
+          point.attr = item.attributes
+          points.push(point)
+        })
 
-    //     // 提示查询结果
-    //     if (points.length > 0) {
-    //       that.$message({
-    //         message: '成功查询到' + points.length + '条记录',
-    //         type: 'success'
-    //       })
+        // 提示查询结果
+        if (points.length > 0) {
+          that.$message({
+            message: '成功查询到' + points.length + '条记录',
+            type: 'success'
+          })
 
-    //       // 绘制点
-    //       that.addSimpleMarkerOnMap(points)
-    //     } else {
-    //       that.$message({
-    //         message: '没有查询到结果，请重新输入关键字',
-    //         type: 'warning'
-    //       })
-    //     }
-    //   })
-    // },
+          // 绘制点
+          that.addSimpleMarkerOnMap(points)
+        } else {
+          that.$message({
+            message: '没有查询到结果，请重新输入关键字',
+            type: 'warning'
+          })
+        }
+      })
+    },
     // 清除图层上的查询结果
-    // clearQueryResults: function() {
-    //   this.map.layers.forEach(layer => {
-    //     if (layer.type === 'graphics' && layer.id === queryResultLayerId) {
-    //       layer.graphics.removeAll()
-    //       return false
-    //     }
-    //   })
-    // },
-    // // 清除图层上的查询结果
-    // clearMap: function() {
-    //   // 清除地图上绘制的graphic图层
-    //   this.map.layers.forEach(layer => {
-    //     if (layer.type === 'graphics') {
-    //       layer.graphics.removeAll()
-    //       return false
-    //     }
-    //   })
+    clearQueryResults: function() {
+      this.map.layers.forEach(layer => {
+        if (layer.type === 'graphics' && layer.id === queryResultLayerId) {
+          layer.graphics.removeAll()
+          return false
+        }
+      })
+    },
+    // 清除图层上的查询结果
+    clearMap: function() {
+      // 清除地图上绘制的graphic图层
+      this.map.layers.forEach(layer => {
+        if (layer.type === 'graphics') {
+          layer.graphics.removeAll()
+          return false
+        }
+      })
 
-    //   // 清除弹出框
-    //   this.view.popup.close()
+      // 清除弹出框
+      this.view.popup.close()
 
-    //   // 清除data属性值
-    //   this.keywords = ''
-    //   this.showEventPointPopup = true // 是否显示事部件的popup
-    //   this.queryEventSwitch = '1' // 1==查询事件；0==查询部件
-    //   this.compListOpts = [] // 部件选择下拉框option
-    //   this.longitude = '' // 定位点经度
-    //   this.latitude = '' // 定位点纬度
-    //   this.communityId = '' // 社区ID
-    //   this.communityName = '' // 社区名称
-    //   this.gridId = '' // 单元网格ID
-    //   this.componentId = '' // 部件ID
-    //   this.componentName = '' // 部件名称
-    // },
+      // 清除data属性值
+      this.keywords = ''
+      this.showEventPointPopup = true // 是否显示事部件的popup
+      this.queryEventSwitch = '1' // 1==查询事件；0==查询部件
+      this.compListOpts = [] // 部件选择下拉框option
+      this.longitude = '' // 定位点经度
+      this.latitude = '' // 定位点纬度
+      this.communityId = '' // 社区ID
+      this.communityName = '' // 社区名称
+      this.gridId = '' // 单元网格ID
+      this.componentId = '' // 部件ID
+      this.componentName = '' // 部件名称
+    },
     // 清除图层上的事件定位点
-    // clearEOrCPoint: function() {
-    //   this.map.layers.forEach(layer => {
-    //     if (layer.type === 'graphics' && layer.id === eventPointLayerId) {
-    //       layer.graphics.removeAll()
-    //       return false
-    //     }
-    //   })
-    //   // 清除弹出框
-    //   this.view.popup.close()
-    // },
+    clearEOrCPoint: function() {
+      this.map.layers.forEach(layer => {
+        if (layer.type === 'graphics' && layer.id === eventPointLayerId) {
+          layer.graphics.removeAll()
+          return false
+        }
+      })
+      // 清除弹出框
+      this.view.popup.close()
+    },
     // 切换
-    // switchEventOrComponent: function() {
-    //   // 如果选中的是事件定位（1）或部件定位（0），点击地图时弹出事件或者部件的popup；否则（2以上）显示兴趣点结果的属性popup
-    //   this.showEventPointPopup = this.queryEventSwitch < 2
-    // },
+    switchEventOrComponent: function() {
+      // 如果选中的是事件定位（1）或部件定位（0），点击地图时弹出事件或者部件的popup；否则（2以上）显示兴趣点结果的属性popup
+      this.showEventPointPopup = this.queryEventSwitch < 2
+    },
     // 将查询结果点集合绘制在地图上
-    // addSimpleMarkerOnMap: function(points) {
-    //   const gLayer = new this.esriObj.GraphicsLayer()
-    //   points.forEach(item => {
-    //     const point = new this.esriObj.Point(item.x, item.y, item.attr)
-    //     const marker = new this.esriObj.SimpleMarkerSymbol()
-    //     marker.color = '#F9690E'
-    //     marker.outline = {
-    //       color: [128, 128, 128, 0.5],
-    //       width: '2px'
-    //     }
-    //     const graphic = new this.esriObj.Graphic({
-    //       geometry: point,
-    //       symbol: marker,
-    //       attributes: item.attr
-    //     })
-    //     gLayer.id = queryResultLayerId
-    //     gLayer.add(graphic)
-    //   })
-    //   this.map.add(gLayer)
-    // },
+    addSimpleMarkerOnMap: function(points) {
+      const gLayer = new this.esriObj.GraphicsLayer()
+      points.forEach(item => {
+        const point = new this.esriObj.Point(item.x, item.y, item.attr)
+        const marker = new this.esriObj.SimpleMarkerSymbol()
+        marker.color = '#F9690E'
+        marker.outline = {
+          color: [128, 128, 128, 0.5],
+          width: '2px'
+        }
+        const graphic = new this.esriObj.Graphic({
+          geometry: point,
+          symbol: marker,
+          attributes: item.attr
+        })
+        gLayer.id = queryResultLayerId
+        gLayer.add(graphic)
+      })
+      this.map.add(gLayer)
+    },
     // 返回事件定位的结果
-    // checkEventPoint: function() {
-    //   this.$emit(
-    //     'closeMapQueryDialogByEvent',
-    //     this.longitude,
-    //     this.latitude,
-    //     this.communityId,
-    //     this.communityName,
-    //     this.gridId)
+    checkEventPoint: function() {
+      this.$emit(
+        'closeMapQueryDialogByEvent',
+        this.longitude,
+        this.latitude,
+        this.communityId,
+        this.communityName,
+        this.gridId)
 
-    //   this.clearMap()
-    // },
-    // // 返回部件定位的结果
-    // checkComponentPoint: function() {
-    //   this.$emit(
-    //     'closeMapQueryDialogByComp',
-    //     this.longitude,
-    //     this.latitude,
-    //     this.communityId,
-    //     this.communityName,
-    //     this.gridId,
-    //     this.componentId)
+      this.clearMap()
+    },
+    // 返回部件定位的结果
+    checkComponentPoint: function() {
+      this.$emit(
+        'closeMapQueryDialogByComp',
+        this.longitude,
+        this.latitude,
+        this.communityId,
+        this.communityName,
+        this.gridId,
+        this.componentId)
 
-    //   this.clearMap()
-    // },
+      this.clearMap()
+    },
     // 在地图上添加指定坐标的点
     addCasePointOnMap: function(lng, lat) {
-      console.log('addCasePointOnMap', lng, lat)
       const gLayer = new this.esriObj.GraphicsLayer() // 添加自定义绘制点的图层
       const point = new this.esriObj.Point(lng, lat) // 创建geometry对象
       const marker = new this.esriObj.SimpleMarkerSymbol() // 创建marker标识
@@ -521,14 +506,14 @@
 
       // 重新设置地图中心点并移动
       this.view.center = point
-      this.view.goTo(point)
+      this.view.goTo()
     }
   }
 }
 </script>
 
 <style scoped>
-  @import 'https://js.arcgis.com/4.13/esri/css/main.css';
+  @import 'http://192.168.8.205/arcgis_js_api/library/4.12/esri/css/main.css';
   .baseMap {
     height:60vh;
     width: 100%;
diff --git a/src/components/Map/arcgisMapRead.vue b/src/components/Map/arcgisMapRead.vue
new file mode 100644
index 0000000..ae2058b
--- /dev/null
+++ b/src/components/Map/arcgisMapRead.vue
@@ -0,0 +1,539 @@
+<template>
+  <div style="margin-top:-30px">
+    <!-- <el-row :gutter="20">
+      <el-col :span="4">
+        <el-input v-model="keywords" size="small" type="text" placeholder="兴趣点关键字" clearable />
+      </el-col>
+      <el-col :span="4">
+        <el-button type="primary" size="small" @click="queryOnMap">查询</el-button>
+        <el-button type="info" size="small" @click="clearMap"> 清除地图 </el-button>
+      </el-col>
+
+      <el-col :span="8" style="text-align: center;">
+        <el-radio-group v-model="queryEventSwitch" size="small" @change="switchEventOrComponent">
+          <el-radio-button label="1">事件定位</el-radio-button>
+          <el-radio-button label="0">部件定位</el-radio-button>
+          <el-radio-button label="2">兴趣点属性</el-radio-button>
+        </el-radio-group>
+      </el-col>
+
+      <el-col v-if="queryEventSwitch === '0'" :span="8" style="text-align: right;">
+        <el-select v-model="componentId" placeholder="选择部件" clearable value="" size="small">
+          <el-option
+            v-for="item in compListOpts"
+            :key="item.value"
+            :label="item.name"
+            :value="item.value"/>
+        </el-select>
+        <el-button type="primary" size="small" @click="checkComponentPoint"> 部件提交 </el-button>
+      </el-col>
+
+      <el-col v-if="queryEventSwitch === '1'" :span="8" style="text-align: right;">
+        <el-button type="primary" size="small" @click="checkEventPoint"> 事件提交 </el-button>
+      </el-col>
+    </el-row> -->
+
+    <div v-loading="mapLoading" ref="mapDiv" class="baseMap" />
+  </div>
+</template>
+
+<script>
+import { loadModules } from 'esri-loader'
+import { mapConfig, serverConfig } from './ArcGISConfig'
+
+const option = {
+  url: mapConfig.apiUrl
+}
+
+// const eventPointLayerId = 'eventPointLayer' // 事件定位点的图层id
+// const queryResultLayerId = 'queryResultLayer' // 兴趣点查询结果点集的图层id
+const caseLayerId = 'addedGeometryLayerId' // 案卷点图层
+
+export default {
+  name: 'ArcGisMapRead',
+  props: {
+    longitude: {
+      type: Number,
+      default: 116.5937
+    },
+    latitude: {
+      type: Number,
+      default: 28.249
+    }
+  },
+  data() {
+    return {
+      map: '',
+      view: '',
+      layers: {
+        dxbjPoint: '', // 部件点图层
+        dxbjLine: '', // 部件线图层
+        dxbjXqd: '', // 兴趣点图层
+        dxbjMph: '', // 门牌好图层
+        dx2wGrid: '' // 单元网格图层
+      },
+      esriObj: {
+        Map: '',
+        BaseMap: '',
+        Graphic: '',
+        PopupTemplate: '',
+        Circle: '',
+        Point: '',
+        FeatureLayer: '',
+        GraphicsLayer: '',
+        TileLayer: '',
+        SimpleMarkerSymbol: '',
+        Query: '',
+        QueryTask: '',
+        IdentifyTask: '',
+        IdentifyParameters: '',
+        MapView: ''
+      },
+      mapLoading: false
+      // keywords: '', // 查询关键字
+      // showEventPointPopup: true, // 是否显示事部件的popup
+      // queryEventSwitch: '1', // 1==查询事件；0==查询部件
+      // compListOpts: [], // 部件选择下拉框option
+      // 主页面返回值
+      // longitude: '', // 定位点经度
+      // latitude: '' // 定位点纬度
+      // communityId: '', // 社区ID
+      // communityName: '', // 社区名称
+      // gridId: '', // 单元网格ID
+      // componentId: '', // 部件ID
+      // componentName: '' // 部件名称/=
+    }
+  },
+  mounted() {
+    this.importEsri()
+  },
+  methods: {
+    // 初始化ArcGIS API对象
+    importEsri: function() {
+      this.mapLoading = true
+      loadModules([
+        'esri/Map',
+        'esri/Basemap',
+        'esri/Graphic',
+        'esri/PopupTemplate',
+        'esri/geometry/Circle',
+        'esri/geometry/Point',
+        'esri/layers/FeatureLayer',
+        'esri/layers/GraphicsLayer',
+        'esri/layers/TileLayer',
+        'esri/symbols/SimpleMarkerSymbol',
+        'esri/tasks/support/Query',
+        'esri/tasks/QueryTask',
+        'esri/tasks/IdentifyTask',
+        'esri/tasks/support/IdentifyParameters',
+        'esri/views/MapView',
+        'dojo/domReady!'
+      ], option)
+        .then(([
+          Map,
+          BaseMap,
+          Graphic,
+          PopupTemplate,
+          Circle,
+          Point,
+          FeatureLayer,
+          GraphicsLayer,
+          TileLayer,
+          SimpleMarkerSymbol,
+          Query,
+          QueryTask,
+          IdentifyTask,
+          IdentifyParameters,
+          MapView
+        ]) => {
+          this.esriObj.Map = Map
+          this.esriObj.BaseMap = BaseMap
+          this.esriObj.Graphic = Graphic
+          this.esriObj.PopupTemplate = PopupTemplate
+          this.esriObj.Circle = Circle
+          this.esriObj.Point = Point
+          this.esriObj.FeatureLayer = FeatureLayer
+          this.esriObj.GraphicsLayer = GraphicsLayer
+          this.esriObj.TileLayer = TileLayer
+          this.esriObj.SimpleMarkerSymbol = SimpleMarkerSymbol
+          this.esriObj.Query = Query
+          this.esriObj.QueryTask = QueryTask
+          this.esriObj.IdentifyTask = IdentifyTask
+          this.esriObj.IdentifyParameters = IdentifyParameters
+          this.esriObj.MapView = MapView
+
+          // 初始化地图
+          this.initMap()
+          this.mapLoading = false
+        }).catch(err => {
+          console.log(err)
+          this.mapLoading = false
+        })
+    },
+    // 初始化地图
+    initMap: function() {
+      const base = new this.esriObj.BaseMap({
+        baseLayers: [
+          new this.esriObj.TileLayer({ // 可配置属性，见TileLayer类
+            id: '2w',
+            url: serverConfig.mapUrlBase
+          })
+        ],
+        title: 'dx2w',
+        id: 'dx2w'
+      })
+
+      this.map = new this.esriObj.Map({
+        basemap: base // 底图类型，详见BaseMap类
+      })
+
+      this.view = new this.esriObj.MapView({
+        container: this.$refs.mapDiv, // 视图的容器
+        map: this.map, // Map的实例放入视图中
+        center: [116.597, 28.24], // 初始显示的地图中心点，经纬度
+        zoom: 3 // 当前地图缩放等级
+      })
+
+      // const that = this
+      // this.view.on('click', function(event) {
+      //   // 清除地图上已有的事件/部件查询点
+      //   that.clearEOrCPoint()
+
+      //   const lon = event.mapPoint.longitude
+      //   const lat = event.mapPoint.latitude
+
+      //   if (that.showEventPointPopup) {
+      //     // 添加点
+      //     const gLayer = new that.esriObj.GraphicsLayer()
+      //     const marker = new that.esriObj.SimpleMarkerSymbol()
+      //     marker.color = '#35A0E7'
+      //     marker.style = 'square'
+      //     marker.outline = {
+      //       color: [128, 128, 128, 0.5],
+      //       width: '2px'
+      //     }
+      //     const graphic = new that.esriObj.Graphic({
+      //       geometry: event.mapPoint,
+      //       symbol: marker
+      //     })
+
+      //     gLayer.id = eventPointLayerId
+      //     gLayer.add(graphic)
+      //     that.map.add(gLayer)
+
+      //     // 查询事件或者部件
+      //     if (that.queryEventSwitch === '1') {
+      //       // 事件定位
+      //       // 1查询底图得到所在网格与所在社区
+      //       const query = that.layers.dx2wGrid.createQuery()
+      //       query.geometry = that.view.toMap(event)
+      //       query.distance = 10
+      //       query.units = 'meters'
+      //       query.returnGeometry = true
+      //       query.outFields = ['BGID', 'COMMUID', 'COMMUNAME']
+      //       that.layers.dx2wGrid.queryFeatures(query)
+      //         .then(function(response) {
+      //           const result = response.features[0].attributes
+
+      //           // 赋值
+      //           that.longitude = lon
+      //           that.latitude = lat
+      //           that.gridId = result.BGID
+      //           that.communityId = result.COMMUID
+      //           that.communityName = result.COMMUNAME
+
+      //           // 2弹出气泡
+      //           that.view.popup.open({
+      //             title: '事件定位',
+      //             content: '坐标：[' + lon.toFixed(4) + ', ' + lat.toFixed(4) + ']' + '<p>' + '所在社区：' + result.COMMUNAME,
+      //             location: event.mapPoint
+      //           })
+      //         })
+      //     } else if (that.queryEventSwitch === '0') {
+      //       // 部件定位
+      //       const queryDev = that.layers.dxbjPoint.createQuery()
+      //       // 定义查询的圆形范围，半径5米
+      //       const circle = new that.esriObj.Circle({
+      //         center: event.mapPoint,
+      //         radius: 5,
+      //         radiusUnit: 'meters'
+      //       })
+      //       queryDev.geometry = circle
+      //       queryDev.returnGeometry = true
+      //       queryDev.outFields = ['BGID', 'OBJID', 'OBJNAME', 'OBJPOS']
+      //       that.layers.dxbjPoint.queryFeatures(queryDev)
+      //         .then(function(response) {
+      //           if (response.features.length > 0) {
+      //             const results = response.features
+
+      //             that.compListOpts = []
+
+      //             let content = ''
+      //             results.forEach((item, index) => {
+      //               content += '<p>部件' + (index + 1) + '：' + item.attributes.OBJNAME + '，' + item.attributes.OBJPOS
+      //               const comp = {}
+      //               comp.name = '部件' + (index + 1) + '：' + item.attributes.OBJNAME
+      //               comp.value = item.attributes.OBJID
+      //               that.compListOpts.push(comp)
+      //             })
+
+      //             // 2弹出气泡
+      //             that.view.popup.open({
+      //               title: '部件定位',
+      //               content: '坐标：[' + lon.toFixed(4) + ', ' + lat.toFixed(4) + ']，附近5米的部件有：' + content,
+      //               location: event.mapPoint
+      //             })
+
+      //             // 查询所在社区和单元网格
+      //             const queryPos = that.layers.dx2wGrid.createQuery()
+      //             queryPos.geometry = that.view.toMap(event)
+      //             queryPos.returnGeometry = true
+      //             queryPos.outFields = ['BGID', 'COMMUID', 'COMMUNAME']
+      //             that.layers.dx2wGrid.queryFeatures(queryPos)
+      //               .then(function(response) {
+      //                 const result = response.features[0].attributes
+
+      //                 // 赋值
+      //                 that.longitude = lon
+      //                 that.latitude = lat
+      //                 that.gridId = result.BGID
+      //                 that.communityId = result.COMMUID
+      //                 that.communityName = result.COMMUNAME
+      //               })
+      //           } else {
+      //             that.$message({
+      //               message: '没有查询到部件，请重新定位',
+      //               type: 'warning'
+      //             })
+      //           }
+      //         })
+      //     }
+      //   } else {
+      //     that.view.hitTest(event).then(function(response) {
+      //       if (response.results.length) {
+      //         const graphic = response.results[0].graphic
+      //         const name = graphic.attributes.KEYWORD
+      //         const address = graphic.attributes.OBJPOS
+
+      //         that.view.popup.open({
+      //           title: name,
+      //           content: address,
+      //           location: event.mapPoint
+      //         })
+      //       }
+      //     })
+      //   }
+      // })
+
+      this.addBjLayers()
+      this.addCasePointOnMap(this.longitude, this.latitude)
+    },
+    // 加载部件服务的各图层
+    addBjLayers: function() {
+      // 此处可以优化
+      this.layers.dxbjPoint = new this.esriObj.FeatureLayer({ // 可配置属性，见TileLayer类
+        url: serverConfig.mapUrlBj + '/0',
+        id: 'dxbjPoint'
+      })
+      this.layers.dxbjLine = new this.esriObj.FeatureLayer({ // 可配置属性，见TileLayer类
+        url: serverConfig.mapUrlBj + '/1',
+        id: 'dxbjLine'
+      })
+      this.layers.dxbjXqd = new this.esriObj.FeatureLayer({ // 可配置属性，见TileLayer类
+        url: serverConfig.mapUrlBj + '/2',
+        id: 'dxbjXqd'
+      })
+      this.layers.dxbjMph = new this.esriObj.FeatureLayer({ // 可配置属性，见TileLayer类
+        url: serverConfig.mapUrlBj + '/3',
+        id: 'dxbjMph'
+      })
+      // this.layers.dx2wGrid = new this.esriObj.FeatureLayer({
+      //   url: serverConfig.mapUrlBase + '/6',
+      //   id: 'gridLayer'
+      // })
+
+      // 加载各图层
+      this.map.add(this.layers.dxbjPoint)
+      this.map.add(this.layers.dxbjLine)
+      this.map.add(this.layers.dxbjXqd)
+      this.map.add(this.layers.dxbjMph)
+      // this.map.add(this.layers.dx2wGrid)
+    },
+    // 在兴趣点图层查询关键字
+    // queryOnMap: function() {
+    //   const points = [] // 查询结果点集
+
+    //   this.clearQueryResults()
+    //   this.clearEOrCPoint()
+    //   this.showEventPointPopup = false
+    //   this.queryEventSwitch = '2'
+
+    //   // 查询条件
+    //   const query = new this.esriObj.Query()
+    //   query.returnGeometry = true
+    //   query.outFields = ['*']
+    //   query.where = 'NAME like ' + "'%" + this.keywords + "%'"
+    //   const that = this
+
+    //   this.layers.dxbjXqd.queryFeatures(query).then(function(results) {
+    //     results.features.forEach(item => {
+    //       const point = {}
+    //       point.x = item.geometry.longitude
+    //       point.y = item.geometry.latitude
+    //       point.attr = item.attributes
+    //       points.push(point)
+    //     })
+
+    //     // 提示查询结果
+    //     if (points.length > 0) {
+    //       that.$message({
+    //         message: '成功查询到' + points.length + '条记录',
+    //         type: 'success'
+    //       })
+
+    //       // 绘制点
+    //       that.addSimpleMarkerOnMap(points)
+    //     } else {
+    //       that.$message({
+    //         message: '没有查询到结果，请重新输入关键字',
+    //         type: 'warning'
+    //       })
+    //     }
+    //   })
+    // },
+    // 清除图层上的查询结果
+    // clearQueryResults: function() {
+    //   this.map.layers.forEach(layer => {
+    //     if (layer.type === 'graphics' && layer.id === queryResultLayerId) {
+    //       layer.graphics.removeAll()
+    //       return false
+    //     }
+    //   })
+    // },
+    // // 清除图层上的查询结果
+    // clearMap: function() {
+    //   // 清除地图上绘制的graphic图层
+    //   this.map.layers.forEach(layer => {
+    //     if (layer.type === 'graphics') {
+    //       layer.graphics.removeAll()
+    //       return false
+    //     }
+    //   })
+
+    //   // 清除弹出框
+    //   this.view.popup.close()
+
+    //   // 清除data属性值
+    //   this.keywords = ''
+    //   this.showEventPointPopup = true // 是否显示事部件的popup
+    //   this.queryEventSwitch = '1' // 1==查询事件；0==查询部件
+    //   this.compListOpts = [] // 部件选择下拉框option
+    //   this.longitude = '' // 定位点经度
+    //   this.latitude = '' // 定位点纬度
+    //   this.communityId = '' // 社区ID
+    //   this.communityName = '' // 社区名称
+    //   this.gridId = '' // 单元网格ID
+    //   this.componentId = '' // 部件ID
+    //   this.componentName = '' // 部件名称
+    // },
+    // 清除图层上的事件定位点
+    // clearEOrCPoint: function() {
+    //   this.map.layers.forEach(layer => {
+    //     if (layer.type === 'graphics' && layer.id === eventPointLayerId) {
+    //       layer.graphics.removeAll()
+    //       return false
+    //     }
+    //   })
+    //   // 清除弹出框
+    //   this.view.popup.close()
+    // },
+    // 切换
+    // switchEventOrComponent: function() {
+    //   // 如果选中的是事件定位（1）或部件定位（0），点击地图时弹出事件或者部件的popup；否则（2以上）显示兴趣点结果的属性popup
+    //   this.showEventPointPopup = this.queryEventSwitch < 2
+    // },
+    // 将查询结果点集合绘制在地图上
+    // addSimpleMarkerOnMap: function(points) {
+    //   const gLayer = new this.esriObj.GraphicsLayer()
+    //   points.forEach(item => {
+    //     const point = new this.esriObj.Point(item.x, item.y, item.attr)
+    //     const marker = new this.esriObj.SimpleMarkerSymbol()
+    //     marker.color = '#F9690E'
+    //     marker.outline = {
+    //       color: [128, 128, 128, 0.5],
+    //       width: '2px'
+    //     }
+    //     const graphic = new this.esriObj.Graphic({
+    //       geometry: point,
+    //       symbol: marker,
+    //       attributes: item.attr
+    //     })
+    //     gLayer.id = queryResultLayerId
+    //     gLayer.add(graphic)
+    //   })
+    //   this.map.add(gLayer)
+    // },
+    // 返回事件定位的结果
+    // checkEventPoint: function() {
+    //   this.$emit(
+    //     'closeMapQueryDialogByEvent',
+    //     this.longitude,
+    //     this.latitude,
+    //     this.communityId,
+    //     this.communityName,
+    //     this.gridId)
+
+    //   this.clearMap()
+    // },
+    // // 返回部件定位的结果
+    // checkComponentPoint: function() {
+    //   this.$emit(
+    //     'closeMapQueryDialogByComp',
+    //     this.longitude,
+    //     this.latitude,
+    //     this.communityId,
+    //     this.communityName,
+    //     this.gridId,
+    //     this.componentId)
+
+    //   this.clearMap()
+    // },
+    // 在地图上添加指定坐标的点
+    addCasePointOnMap: function(lng, lat) {
+      console.log('addCasePointOnMap', lng, lat)
+      const gLayer = new this.esriObj.GraphicsLayer() // 添加自定义绘制点的图层
+      const point = new this.esriObj.Point(lng, lat) // 创建geometry对象
+      const marker = new this.esriObj.SimpleMarkerSymbol() // 创建marker标识
+      // marker属性
+      marker.color = '#F9690E'
+      marker.outline = {
+        color: [128, 128, 128, 0.5],
+        width: '2px'
+      }
+      // 创建graphic对象
+      const graphic = new this.esriObj.Graphic({
+        geometry: point,
+        symbol: marker
+      })
+      gLayer.id = caseLayerId // 标识案卷图层
+      gLayer.add(graphic) // 图层上添加对象
+      this.map.add(gLayer) // 地图上添加图层
+
+      // 重新设置地图中心点并移动
+      this.view.center = point
+      this.view.goTo(point)
+    }
+  }
+}
+</script>
+
+<style scoped>
+  @import 'https://js.arcgis.com/4.13/esri/css/main.css';
+  .baseMap {
+    height:60vh;
+    width: 100%;
+    margin-top: 25px;
+    border: 1px solid #DCDCDC;
+    border-radius: 4px;
+  }
+</style>
diff --git a/src/router/index.js b/src/router/index.js
index b265a48..1c80473 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -11,6 +11,7 @@
 import { systemRouters } from './modules/system'
 import { cooRouters } from './modules/coo'
 import { commenetRouters } from './modules/comment'
+import { suphandleRouters } from './modules/suphandle'
 import { commonRouters } from './modules/common'
 
 /**
@@ -90,6 +91,7 @@
 export const asyncRouterMap = [
   ...commonRouters,
   ...cooRouters,
+  ...suphandleRouters,
   ...systemRouters,
   ...commenetRouters,
   { path: '*', redirect: '/404', hidden: true, meta: {}}
diff --git a/src/router/modules/suphandle.js b/src/router/modules/suphandle.js
new file mode 100644
index 0000000..7026a7b
--- /dev/null
+++ b/src/router/modules/suphandle.js
@@ -0,0 +1,35 @@
+/* Layout */
+import Layout from '../../views/layout/Layout'
+export const suphandleRouters = [
+  {
+    path: '/suphandle',
+    name: 'suphandle',
+    redirect: '/accessDept',
+    hidden: true,
+    meta: {
+      title: '监督受理子系统',
+      permission: ['/suphandle'],
+      isSys: true
+    }
+  },
+  {
+    path: '/callBus',
+    component: Layout,
+    redirect: '/callBus',
+    name: 'CallBus',
+    alwaysShow: true,
+    meta: {
+      title: '呼叫业务',
+      permission: ['/callBus'],
+      sys: '/suphandle'
+    },
+    children: [
+      {
+        path: '/callCase',
+        component: () => import('@/views/callCase/callCase'),
+        name: 'CallCase',
+        meta: { title: '建立案卷', icon: '', belongSys: '', permission: '/callCase' }
+      }
+    ]
+  }
+]
diff --git a/src/router/modules/system.js b/src/router/modules/system.js
index 10bff2e..c80b732 100644
--- a/src/router/modules/system.js
+++ b/src/router/modules/system.js
@@ -48,6 +48,12 @@
         component: () => import('@/views/busAdmin/userDevice/userDevice'),
         name: 'UserDevice',
         meta: { title: '终端设备管理', icon: '', permission: ['/userDevice'] }
+      },
+      {
+        path: '/areaPersonliable',
+        component: () => import('@/views/busAdmin/areaPersonliable/areaPersonliable'),
+        name: 'AreaPersonliable',
+        meta: { title: '网格责任人管理', icon: '', permission: ['/areaPersonliable'] }
       }
     ]
   },
diff --git a/src/views/busAdmin/areaPersonliable/areaPersonliable.vue b/src/views/busAdmin/areaPersonliable/areaPersonliable.vue
new file mode 100644
index 0000000..23a26de
--- /dev/null
+++ b/src/views/busAdmin/areaPersonliable/areaPersonliable.vue
@@ -0,0 +1,156 @@
+<template>
+  <div class="table-container">
+    <el-row class="table-title">
+      <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
+      <el-col :span="12" :offset="6" class="edit_btns">
+        <el-button v-if="hasPerm('/areaPersonliable/add')" class="edit_btn" size="small" @click="add">新增</el-button>
+      </el-col>
+    </el-row>
+    <el-table v-loading="listLoading" ref="table" :data="list" class="table" border>
+      <el-table-column :index="indexMethod" align="center" type="index" />
+      <el-table-column v-for="column in tableColumns" :key="column.value" :label="column.text" align="center">
+        <template slot-scope="scope">
+          <span>{{ scope.row[column.value] }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column v-if="hasPerm('/areaPersonliable/update')||hasPerm('/areaPersonliable/delete')" label="操作" align="center" width="200">
+        <template slot-scope="scope">
+          <el-button v-if="hasPerm('/areaPersonliable/update')" class="table-button" type="text" @click="edit(scope.row)">编辑</el-button>
+          <el-button v-if="hasPerm('/areaPersonliable/delete')" class="table-button" type="text" @click="del(scope.row)">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <div class="pagination-container">
+      <el-pagination
+        :current-page="listQuery.offset"
+        :page-sizes="[10,20,30,50]"
+        :page-size="listQuery.limit"
+        :total="total"
+        align="center"
+        layout="total, sizes, prev, pager, next"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"/>
+    </div>
+
+    <edit-area-personliable ref="editAreaPersonliable" @watchChild="fetchData"/>
+  </div>
+</template>
+
+<script>
+import { getAreaPersonliableList, deleteAreaPersonliable } from '@/api/busAdmin/areaPersonliable'
+import EditAreaPersonliable from './editAreaPersonliable'
+
+export default {
+  name: 'AreaPersonliable',
+  components: { EditAreaPersonliable },
+  data() {
+    return {
+      list: [],
+      total: 0,
+      listLoading: false,
+      listQuery: {
+        limit: 10,
+        offset: 1,
+        sort: 'id',
+        order: 'asc'
+      },
+      tableColumns: [
+        {
+          text: '网格名称',
+          value: 'areaName'
+        },
+        {
+          text: '责任人姓名',
+          value: 'userName'
+        },
+        {
+          text: '所属区域',
+          value: 'pAreaName'
+        }
+      ]
+    }
+  },
+  activated() {
+    this.fetchData()
+  },
+  methods: {
+    async fetchData() {
+      this.listLoading = true
+      const res = await getAreaPersonliableList(this.listQuery)
+      this.list = res.data.rows
+      this.total = parseInt(res.data.total)
+      this.listLoading = false
+    },
+    indexMethod(index) {
+      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
+    },
+    // 改变页容量
+    handleSizeChange(val) {
+      this.listQuery.limit = val
+      this.fetchData()
+    },
+    // 改变当前页
+    handleCurrentChange(val) {
+      this.listQuery.offset = val
+      this.fetchData()
+    },
+    add() {
+      this.$refs.editAreaPersonliable.initDialog(true, 'create')
+    },
+    edit(row) {
+      this.$refs.editAreaPersonliable.initDialog(true, 'update', row)
+    },
+    del(row) {
+      this.$confirm(
+        '确定要删除吗？',
+        '确认操作',
+        {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }
+      ).then(() => {
+        deleteAreaPersonliable(row.id).then(response => {
+          if (response.code === 200) {
+            this.$message.success('删除成功')
+            this.fetchData()
+          }
+        })
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  $tableTitleHeight:46px;
+  .table{
+    margin-bottom: 20px;
+  }
+  .table-container{
+    margin: 20px;
+  }
+  .table-title{
+    background-color:rgba(243, 243, 243, 1);
+    height: $tableTitleHeight;
+    .title-header{
+      line-height:$tableTitleHeight;
+      color: #606266;
+      font-size: 15px;
+      i{
+        margin-left: 5px;
+        margin-right: 5px;
+      }
+    }
+  }
+  .edit_btns{
+    .edit_btn{
+      float:right;
+      margin:7px 3px;//为了需要居中显示margin-top和bottom要用$tableTitleHeight减去按钮原高度除以2
+    }
+  }
+  .table-button{
+    padding: 10px;
+    height: 23px;
+  }
+</style>
diff --git a/src/views/busAdmin/areaPersonliable/areaSelectTree.vue b/src/views/busAdmin/areaPersonliable/areaSelectTree.vue
new file mode 100644
index 0000000..d0ba37f
--- /dev/null
+++ b/src/views/busAdmin/areaPersonliable/areaSelectTree.vue
@@ -0,0 +1,80 @@
+<template>
+  <el-dialog :visible.sync="dialogFormVisible" append-to-body custom-class="area-select-dialog" title="选择责任网格">
+    <el-scrollbar style="height: 400px">
+      <el-tree
+        ref="tree"
+        :expand-on-click-node="false"
+        :props="defaultProps"
+        :load="loadNode"
+        node-key="id"
+        lazy
+      />
+    </el-scrollbar>
+    <div slot="footer" class="dialog-footer">
+      <el-button type="primary" @click="confirmSelect">确定</el-button>
+      <el-button @click="cancel">取消</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { getAreaTree } from '@/api/area'
+export default {
+  name: 'AreaSelectTree',
+  data() {
+    return {
+      dialogFormVisible: true,
+      defaultProps: {
+        label: 'name',
+        children: 'children',
+        isLeaf: 'leaf'
+      },
+      listQuery: {
+        pid: ''
+      }
+    }
+  },
+  methods: {
+    // 获取数据
+    // fetchData() {
+    //   return new Promise(function(resolve, reject) {
+    //     getAreaTree(this.roleId)
+    //   })
+    // },
+    initDialog() {
+      this.dialogFormVisible = true
+    },
+    loadNode(node, resolve) {
+      if (node.data && node.data.id) {
+        this.listQuery.pid = node.data.id
+      }
+      getAreaTree(this.listQuery).then(response => {
+        const data = response.data
+        resolve(data)
+      })
+    },
+    // 选择后的操作
+    confirmSelect() {
+      const node = this.$refs.tree.getCurrentNode()
+      this.dialogFormVisible = false
+      this.$emit('selectDone', node)
+    },
+    cancel() {
+      this.dialogFormVisible = false
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
+
+<style lang="scss" scope>
+  .area-select-dialog{
+    width: 400px;
+    .el-scrollbar__wrap{
+      overflow-x: hidden !important;
+    }
+  }
+</style>
diff --git a/src/views/busAdmin/areaPersonliable/editAreaPersonliable.vue b/src/views/busAdmin/areaPersonliable/editAreaPersonliable.vue
new file mode 100644
index 0000000..60e99e7
--- /dev/null
+++ b/src/views/busAdmin/areaPersonliable/editAreaPersonliable.vue
@@ -0,0 +1,156 @@
+<template>
+  <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" append-to-body width="35%">
+    <el-form ref="dataForm" :model="AreaPersonliableForm" :rules="rules" label-width="100px">
+      <el-form-item label="网格名称" prop="areaName">
+        <el-input
+          v-model="AreaPersonliableForm.areaName"
+          :disabled="dialogStatus === 'update'"
+          placeholder="请选择责任网格"
+          @focus="openAreaSelect"/>
+      </el-form-item>
+      <el-form-item label="责任人姓名" prop="userId">
+        <el-select v-model="AreaPersonliableForm.userId" filterable clearable style="width:100%" placeholder="请选择责任人">
+          <el-option v-for="user in userList" :key="user.id" :label="user.name" :value="user.id"/>
+        </el-select>
+      </el-form-item>
+    </el-form>
+    <div slot="footer" class="dialog-footer">
+      <el-button type="primary" @click="saveData">保存</el-button>
+      <el-button @click="cancel">取消</el-button>
+    </div>
+    <area-select-tree v-if="areaSelectShow" ref="areaSelect" @selectDone="selectArea"/>
+  </el-dialog>
+</template>
+
+<script>
+import AreaSelectTree from './areaSelectTree'
+import { getSupervisorList, addAreaPersonliable, updateAreaPersonliable } from '@/api/busAdmin/areaPersonliable'
+
+export default {
+  name: 'EditAreaPersonliable',
+  components: { AreaSelectTree },
+  data() {
+    return {
+      dialogFormVisible: false,
+      dialogStatus: '',
+      textMap: {
+        update: '编辑',
+        create: '新增'
+      },
+      AreaPersonliableForm: {
+        id: '',
+        areaId: '',
+        areaName: '',
+        userId: ''
+      },
+      userList: [],
+      rules: {
+        areaName: [{ required: true, message: '区域不能为空', trigger: ['change'] }],
+        userId: [{ required: true, message: '用户不能为空', trigger: ['blur', 'change'] }]
+      },
+      areaSelectShow: false
+    }
+  },
+  mounted() {
+    this.fetchUserList()
+  },
+  methods: {
+    initDialog(dialogFormVisible, dialogStatus, row = null) {
+      this.dialogFormVisible = dialogFormVisible
+      this.dialogStatus = dialogStatus
+      if (this.dialogStatus === 'create') {
+      // 新增时，清空表格和校验
+        this.resetForm()
+        this.$nextTick(() => {
+          this.$refs['dataForm'].clearValidate()
+        })
+      } else if (this.dialogStatus === 'update') {
+      // 更新时，填充数据
+        console.log(row)
+        this.AreaPersonliableForm.id = row.id
+        this.AreaPersonliableForm.areaId = row.areaId
+        this.AreaPersonliableForm.areaName = row.areaName
+        this.AreaPersonliableForm.userId = row.userId
+      }
+    },
+    resetForm() {
+      this.AreaPersonliableForm = {
+        id: '',
+        areaId: '',
+        areaName: '',
+        userId: ''
+      }
+    },
+    fetchUserList() {
+      getSupervisorList().then(response => {
+        this.userList = response.data
+      })
+    },
+    openAreaSelect() {
+      this.areaSelectShow = true
+      setTimeout(this.$refs.areaSelect.initDialog(), 200)
+    },
+    selectArea(node) {
+      this.AreaPersonliableForm.areaId = node.id
+      this.AreaPersonliableForm.areaName = node.name
+    },
+    cancel() {
+      this.dialogFormVisible = false
+    },
+    saveData() {
+      if (this.dialogStatus === 'create') {
+        this.createData()
+      } else if (this.dialogStatus === 'update') {
+        this.updateData()
+      }
+    },
+    createData() {
+      this.$refs['dataForm'].validate(valid => {
+        if (valid) {
+          console.log('create valid success')
+          console.log(this.AreaPersonliableForm)
+          addAreaPersonliable(this.AreaPersonliableForm).then(response => {
+            if (response.code === 200) {
+              this.$message.success('添加成功')
+              this.$emit('watchChild')
+              this.dialogFormVisible = false
+            } else {
+              this.$message.error(response.message)
+            }
+          })
+        } else {
+          console.log('create valid error')
+        }
+      })
+    },
+    updateData() {
+      console.log('update data')
+      this.$refs['dataForm'].validate(valid => {
+        if (valid) {
+          console.log('update valid success')
+          console.log(this.AreaPersonliableForm)
+          updateAreaPersonliable(this.AreaPersonliableForm).then(response => {
+            if (response.code === 200) {
+              this.$message.success('修改成功')
+              this.$emit('watchChild')
+              this.dialogFormVisible = false
+            } else {
+              this.$message.error('修改失败')
+            }
+          })
+        } else {
+          console.log('update valid error')
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.el-form-item {
+  margin-bottom: 22px;
+  margin-left: 20px;
+  margin-right: 50px;
+}
+</style>
diff --git a/src/views/callCase/callCase.vue b/src/views/callCase/callCase.vue
new file mode 100644
index 0000000..513b6b3
--- /dev/null
+++ b/src/views/callCase/callCase.vue
@@ -0,0 +1,651 @@
+<template>
+  <div class="main-form">
+    <el-form ref="dataForm" :model="caseForm" :label-position="labelPosition" :rules="rules" label-width="120px">
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <el-form-item label="举报人" prop="reporterName">
+            <el-input v-model.trim="caseForm.reporterName" type="text" placeholder="必填" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="联系电话" prop="reporterPhone">
+            <el-input v-model.trim="caseForm.reporterPhone" type="text" placeholder="必填" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-button type="primary">历史记录</el-button>
+          <el-button type="primary" @click="openMapQueryDialog">地图查询</el-button>
+        </el-col>
+      </el-row>
+
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <el-form-item label="信息来源" prop="source">
+            <el-select v-model="caseForm.source" placeholder="选择信息来源" clearable value="">
+              <el-option
+                v-for="item in caseSourceOpts"
+                :key="item.value"
+                :label="item.name"
+                :value="item.value"/>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="案卷等级" prop="caseLevel">
+            <el-select v-model="caseForm.caseLevel" placeholder="选择案卷等级" value="">
+              <el-option
+                v-for="item in caseLevelOpts"
+                :key="item.value"
+                :label="item.name"
+                :value="item.value"/>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="是否核实">
+            <div>
+              <el-radio-group v-model="caseForm.isNeedVerify" @change="changeNeedVerify()">
+                <el-radio-button label="1">需要</el-radio-button>
+                <el-radio-button label="0">不需要</el-radio-button>
+              </el-radio-group>
+            </div>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="是否回访">
+            <div>
+              <el-radio-group v-model="caseForm.isNeedRevisit">
+                <el-radio-button label="1">需要</el-radio-button>
+                <el-radio-button label="0">不需要</el-radio-button>
+              </el-radio-group>
+            </div>
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <el-row :gutter="20">
+
+        <el-col :span="6">
+          <el-form-item label="所在区县" prop="areaCode">
+            <el-select v-model="caseForm.areaCode" placeholder="选择所在区县" value="">
+              <el-option key="361029" label="东乡区" value="361029"/>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="所在街道" prop="streetCode">
+            <el-select v-model="caseForm.streetCode" placeholder="选择所在街道" value="">
+              <el-option key="361029001" label="孝岗镇" value="361029001"/>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="所在社区" prop="communityName">
+            <el-input v-model="caseForm.communityName" type="text" placeholder="必填" readonly />
+          </el-form-item>
+        </el-col>
+        <el-col v-if="caseForm.componentId !== ''" :span="6">
+          <el-form-item label="部件编码">
+            <el-input v-model="caseForm.componentId" type="text" placeholder="必填" readonly />
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <el-row :gutter="20">
+        <el-col v-if="showVerifyPerson" :span="6">
+          <el-form-item label="监督员" prop="verifyPersonId">
+            <el-select v-model="caseForm.verifyPersonId" type="text" placeholder="选择监督员" filterable clearable value="">
+              <el-option
+                v-for="item in verifyPersonOpts"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id">
+                <span style="float: left">{{ item.name }}</span>
+                <span style="float: right; color: #999999; font-size: 13px">{{ item.id }}</span>
+              </el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="案卷类别" prop="eorc">
+            <el-select v-model="caseForm.eorc" placeholder="选择案卷类别" value="">
+              <el-option
+                v-for="item in caseEorCOpts"
+                :key="item.value"
+                :label="item.name"
+                :value="item.value"/>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="案卷大类" prop="caseType">
+            <el-select v-model="caseForm.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-col :span="6">
+          <el-form-item label="案卷小类" prop="caseDetailType">
+            <el-select v-model="caseForm.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-row v-if="showCaseTypesTime" :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="立案标准" prop="casetypesTimeId">
+            <el-select v-model="caseForm.casetypesTimeId" placeholder="选择立案标准" clearable value="" style="width: 100%">
+              <el-option
+                v-for="item in caseTypeTimeOpts"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id"/>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="处理时限" prop="bzhours">
+            <el-input-number v-model="caseForm.bzhours" :min="0" style="margin-right: 5px" />小时
+            <el-input-number v-model="caseForm.bzminis" :min="0" :max="59" style="margin-left: 20px; margin-right: 5px" />分钟
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <el-row :gutter="20">
+        <el-col :span="18">
+          <el-form-item label="案卷描述" prop="description">
+            <el-input v-model.trim="caseForm.description" type="textarea" placeholder="必填" clearable />
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <el-row :gutter="20">
+        <el-col :span="18">
+          <el-form-item label="位置描述" prop="fieldintro">
+            <el-input v-model.trim="caseForm.fieldintro" type="text" placeholder="必填" clearable />
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <el-row :gutter="20">
+        <el-col :span="24">
+          <el-form-item label="图片信息" prop="images">
+            <el-upload
+              ref="upload"
+              :before-upload="handleBeforeUpload"
+              :on-preview="handlePictureCardPreview"
+              :on-remove="handleRemove"
+              :on-exceed="handleExceed"
+              :on-success="handleSuccess"
+              :limit="2"
+              :http-request="uploadFile"
+              action="string"
+              multiple
+              accept=".jpg,.jpeg,.png "
+              list-type="picture-card">
+              <i class="el-icon-plus"/>
+            </el-upload>
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <el-row :gutter="20">
+        <el-col :span="18" style="margin-left: 120px; margin-bottom: 40px; text-align: center;">
+          <el-button type="primary" size="medium" icon="el-icon-check" style="width: 200px;" @click="saveData"> 提交 </el-button>
+        </el-col>
+      </el-row>
+
+    </el-form>
+
+    <el-dialog :visible.sync="dialogVisible" title="图片预览" append-to-body>
+      <div class="imgBox">
+        <img :src="dialogImageUrl" max-height="400px;" alt="" style="margin: 0 auto;">
+      </div>
+    </el-dialog>
+
+    <el-dialog
+      :visible.sync="mapDialogVisible"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+      title="地图查询"
+      width="80%"
+      append-to-body>
+
+      <arcgis-map-comp
+        ref="mapComp"
+        @closeMapQueryDialogByEvent="closeMapQueryDialogByEvent"
+        @closeMapQueryDialogByComp="closeMapQueryDialogByComp"/>
+
+    </el-dialog>
+
+  </div>
+</template>
+
+<script>
+import { getCaseSource, getCaseLevel, getCaseEorC, getCaseType, getCaseDetailType, getCaseTypesTime, getVerifyPerson, addCase } from '@/api/callCase/callCase'
+import { Uploadimg } from '@/api/common'
+import ArcgisMapComp from '@/components/Map/ArcGISMap'
+
+export default {
+  name: 'CallCase',
+  components: {// 注册组件
+    ArcgisMapComp: ArcgisMapComp
+  },
+  data() {
+    const phoneValidator = (rule, value, callback) => {
+      if (value !== '') {
+        if ((/^[1][3,5,6,7,8,9][0-9]{9}$/).test(value) === false) {
+          callback(new Error('举报人电话格式不正确'))
+        } else {
+          callback()
+        }
+      } else {
+        callback(new Error('举报人电话不能为空'))
+      }
+    }
+    return {
+      caseForm: {
+        reporterName: '', // 举报人姓名
+        reporterPhone: '', // 举报人电话
+        isNeedVerify: '1', // 是否需要核实
+        isNeedRevisit: '1', // 是否需要回访
+        lng: '', // 经度，
+        lat: '', // 纬度
+        source: '', // 案卷信息来源
+        caseLevel: '', // 案卷等级
+        eorc: '', // 案卷类别
+        casetypeCode: '', // 案卷大类编码,
+        casetypeDetailCode: '', // 案卷小类编码
+        areaCode: '361029', // 所属区县ID
+        streetCode: '361029001', // 所属街道ID
+        communityCode: '', // 所属社区编码
+        communityName: '', // 所属社区NAME
+        gridId: '', // 万米网格ID（单元网格）
+        componentId: '', // 部件ID
+        casetypesTimeId: '', // 立案标准ID
+        bzhours: 0, // 限制完成总时限（小时）
+        bzminis: 0, // 限制完成总时限（分钟）
+        description: '', // 案件描述
+        fieldintro: '', // 位置描述
+        verifyPersonId: '', // 核实人员id
+        photos: '' // 图片存储的地址
+      }, // 表单
+      rules: {
+        reporterName: [{ required: true, message: '举报人姓名不能为空', trigger: ['blur'] }],
+        reporterPhone: [{ required: true, trigger: ['blur'], validator: phoneValidator }],
+        source: [{ required: true, message: '信息来源不能为空', trigger: ['change'] }],
+        caseLevel: [{ required: true, message: '案卷等级不能为空', trigger: ['change'] }],
+        eorc: [{ required: true, message: '案卷类别不能为空', trigger: ['change'] }],
+        description: [{ required: true, message: '案卷描述不能为空', trigger: ['blur'] }],
+        fieldintro: [{ required: true, message: '位置描述不能为空', trigger: ['blur'] }]
+      }, // 表单验证
+      hideUpload: false,
+      fileList: [],
+      imageList: [],
+      uploadPath: process.env.BASE_API + 'imageUpload', // 图片上传路径
+      dialogImageUrl: '',
+      dialogVisible: false,
+      mapDialogVisible: false, // 地图对话框
+      labelPosition: 'right',
+      caseSourceOpts: [], // 案卷来源下拉框
+      caseLevelOpts: [], // 案卷等级下拉框
+      caseEorCOpts: [], // 案卷类别下拉框
+      caseTypeOpts: [], // 案卷大类下拉框
+      caseDetailTypeOpts: [], // 案卷小类下拉框
+      caseTypeTimeOpts: [], // 立案标准下拉框
+      verifyPersonOpts: [], // 监督员下拉框
+      showVerifyPerson: true,
+      showCaseTypesTime: false,
+      caseTypeCodeAuto: '', // 自动生成的案卷大类代码
+      caseTypeDetailCodeAuto: '' // 自动生成的案卷小类代码
+    }
+  },
+  computed: {
+    caseLevel() {
+      return this.caseForm.caseLevel
+    },
+    eorc() {
+      return this.caseForm.eorc
+    },
+    caseType() {
+      return this.caseForm.casetypeCode
+    },
+    caseTypeDetail() {
+      return this.caseForm.casetypeDetailCode
+    },
+    caseTypeDetailTime() {
+      return this.caseForm.casetypesTimeId
+    }
+  },
+  watch: {
+    caseLevel(level) {
+      this.calculateTime(this.caseForm.casetypesTimeId)
+    },
+    eorc(eorcVal) {
+      this.cascaderCaseType(eorcVal)
+    },
+    caseType(typeVal) {
+      this.cascaderCaseDetailType(typeVal)
+    },
+    caseTypeDetail(detailVal) {
+      this.cascaderCaseDetailTypeTime(detailVal)
+    },
+    caseTypeDetailTime(timeVal) {
+      this.calculateTime(timeVal)
+    }
+  },
+  mounted: function() {
+    this.initCaseSource()
+    this.initCaseLevel()
+    this.initCaseEorC()
+    this.initVerifyPerson()
+  },
+  methods: {
+    initCaseSource: function() {
+      getCaseSource().then(response => {
+        this.caseSourceOpts = []
+        for (const opt of response.data) {
+          this.caseSourceOpts.push(opt)
+          if (opt.name.indexOf('电话') >= 0) {
+            this.caseForm.source = opt.value
+          }
+        }
+      })
+    },
+    initCaseLevel: function() {
+      getCaseLevel().then(response => {
+        this.caseLevelOpts = []
+        for (const opt of response.data) {
+          this.caseLevelOpts.push(opt)
+          if (opt.name.indexOf('一般') >= 0) {
+            this.caseForm.caseLevel = opt.value
+          }
+        }
+      })
+    },
+    initCaseEorC: function() {
+      getCaseEorC().then(response => {
+        this.caseEorCOpts = []
+        for (const opt of response.data) {
+          this.caseEorCOpts.push(opt)
+        }
+      })
+    },
+    initVerifyPerson: function() {
+      getVerifyPerson().then(response => {
+        this.verifyPersonOpts = []
+        console.log(response)
+        for (const opt of response.data) {
+          this.verifyPersonOpts.push(opt)
+        }
+      })
+    },
+    // 级联查询案卷大类
+    cascaderCaseType: function(eorc) {
+      // 前两行的作用是清除案卷大类的当前值和select中的所有选项
+      this.caseTypeOpts = []
+      this.caseForm.casetypeCode = ''
+      // 以下两行的作用是清除案卷小类的当前值和select中的所有选项
+      this.caseDetailTypeOpts = []
+      this.caseForm.casetypeDetailCode = ''
+      // 以下两行是清除案卷时限（小时和分钟）
+      this.caseTypeTimeOpts = []
+      this.caseForm.casetypesTimeId = ''
+      this.caseForm.bzhours = 0
+      this.caseForm.bzminis = 0
+
+      // 若事部件选择的值不为空，则查询相应的案卷大类
+      if (eorc !== null && eorc.length > 0) {
+        getCaseType(eorc).then(response => {
+          for (const opt of response.data) {
+            this.caseTypeOpts.push(opt)
+
+            if (opt.typeCode === this.caseTypeCodeAuto) {
+              this.caseForm.casetypeCode = opt.typeCode
+            }
+          }
+        })
+      }
+    },
+    cascaderCaseDetailType: function(typeCode) {
+      // 以下两行的作用是清除案卷小类的当前值和select中的所有选项
+      this.caseDetailTypeOpts = []
+      this.caseForm.casetypeDetailCode = ''
+      // 以下两行是清除案卷时限（小时和分钟）
+      this.caseTypeTimeOpts = []
+      this.caseForm.casetypesTimeId = ''
+      this.caseForm.bzhours = 0
+      this.caseForm.bzminis = 0
+
+      // 根据code获取ID，进行级联查询
+      let typeId = 0
+      this.caseTypeOpts.forEach(item => {
+        if (item.typeCode === typeCode) {
+          typeId = item.id
+        }
+      })
+
+      if (typeId > 0) {
+        getCaseDetailType(typeId).then(response => {
+          for (const opt of response.data) {
+            this.caseDetailTypeOpts.push(opt)
+
+            if (opt.typeDetailCode === this.caseTypeDetailCodeAuto) {
+              this.caseForm.casetypeDetailCode = opt.typeDetailCode
+            }
+          }
+        })
+      }
+    },
+    // 查询立案标准
+    cascaderCaseDetailTypeTime: function(detailCode) {
+      // 以下两行是清除案卷时限（小时和分钟）
+      this.caseTypeTimeOpts = []
+      this.caseForm.casetypesTimeId = ''
+      this.caseForm.bzhours = 0
+      this.caseForm.bzminis = 0
+
+      // 根据code获取ID，进行级联查询
+      let typeDetailId = 0
+      this.caseDetailTypeOpts.forEach(item => {
+        if (item.typeDetailCode === detailCode) {
+          typeDetailId = item.id
+        }
+      })
+
+      if (typeDetailId > 0) {
+        getCaseTypesTime(typeDetailId).then(response => {
+          console.log(response)
+          for (const opt of response.data) {
+            this.caseTypeTimeOpts.push(opt)
+          }
+        })
+      }
+    },
+    calculateTime: function(timeVal) {
+      const hoursPerDay = this.caseForm.caseLevel === '1' ? 8 : 24
+      let day = 0
+      let hours = 0
+      this.caseTypeTimeOpts.forEach(item => {
+        if (item.id === timeVal) {
+          day = item.day
+          hours = item.hours
+        }
+      })
+
+      this.caseForm.bzhours = hoursPerDay * parseInt(day) + parseInt(hours)
+    },
+    // 打开地图查询对话框显示地图
+    openMapQueryDialog: function() {
+      this.mapDialogVisible = true
+    },
+    // 关闭地图查询对话框
+    closeMapQueryDialogByEvent: function(longitude, latitude, communityId, communityName, gridId) {
+      this.mapDialogVisible = false
+
+      // 赋值
+      this.caseForm.eorc = '1' // 事件点返回时案卷类别自动选择为事件
+      this.caseForm.communityCode = communityId
+      this.caseForm.communityName = communityName
+      this.caseForm.gridId = gridId
+      this.caseForm.lng = longitude
+      this.caseForm.lat = latitude
+
+      this.caseForm.areaCode = communityId.substring(0, 6) // 区县代码
+      this.caseForm.streetCode = communityId.substring(0, 9) // 街道代码
+    },
+    // 关闭地图查询对话框
+    closeMapQueryDialogByComp: function(longitude, latitude, communityId, communityName, gridId, componentId, componentName) {
+      this.mapDialogVisible = false
+
+      // 赋值
+      this.caseForm.eorc = '2' // 部件点返回时案卷类别自动选择为部件
+      this.caseForm.communityCode = communityId
+      this.caseForm.communityName = communityName
+      this.caseForm.gridId = gridId
+      this.caseForm.lng = longitude
+      this.caseForm.lat = latitude
+      this.caseForm.componentId = componentId
+      this.caseForm.componentName = componentName
+
+      this.caseForm.areaCode = communityId.substring(0, 6) // 区县代码
+      this.caseForm.streetCode = communityId.substring(0, 9) // 街道代码
+      this.caseTypeCodeAuto = componentId.substring(6, 8) // 自动赋值部件大类
+      this.caseTypeDetailCodeAuto = componentId.substring(8, 10) // 自动赋值部件小类
+    },
+    // 修改是否需要核实
+    changeNeedVerify: function() {
+      if (this.caseForm.isNeedVerify === '0') {
+        // 不需要核实，显示立案标准、处理时限
+        this.showVerifyPerson = false
+        this.showCaseTypesTime = true
+      } else {
+        this.showVerifyPerson = true
+        this.showCaseTypesTime = false
+      }
+    },
+    // 保存数据
+    saveData: function() {
+      const that = this
+      if (this.fileList.length > 0) {
+        let photos = ''
+        this.fileList.forEach(photo => {
+          photos += photo.url + ','
+        })
+        this.caseForm.photos = photos.substring(0, photos.length - 1)
+      }
+
+      this.$refs['dataForm'].validate((valid) => {
+        console.log(valid)
+        if (valid) {
+          addCase(this.caseForm).then(function(response) {
+            if (response.code === 200) {
+              that.$message({
+                message: '添加案卷成功',
+                type: 'success'
+              })
+
+              that.$router.push({ path: '/dashboard' })
+            } else {
+              that.$message({
+                message: '添加案卷失败',
+                type: 'error'
+              })
+            }
+          })
+        }
+      })
+    },
+    // 图片上传
+    uploadFile(file) {
+      console.log('uploadFile:' + file.file.name)
+      // const base_url = process.env.BASE_API + '/static/'
+      Uploadimg(file).then(res => {
+        console.log(res)
+        if (res.code === 200) {
+          this.fileList.push({ name: file.file.name, url: res.data })
+        }
+      })
+    },
+    // 上传前判断文件格式及大小
+    handleBeforeUpload(file) {
+      const isJPG = (file.type === 'image/jpeg') || (file.type === 'image/png')
+      let res = true
+      const isLt2M = file.size / 1024 / 1024 < 2
+      if (!isJPG) {
+        this.$message.error('上传图片只能是 JPG 或 PNG 格式!')
+        res = false
+      }
+      if (!isLt2M) {
+        this.$message.error('上传图片大小不能超过 2MB!')
+        res = false
+      }
+      for (const i in this.fileList) {
+        if (this.fileList[i].name === file.name) {
+          this.$message.error('该图片已上传过，请选择其他图片')
+          res = false
+        }
+      }
+      return res
+    },
+    // 文件列表移除文件时的钩子
+    handleRemove(file, fileList) {
+      console.log('handleRemove')
+      for (const i in this.fileList) {
+        if (this.fileList[i].name === file.name) {
+          this.fileList.splice(i, 1)
+          this.hideUpload = this.fileList.length >= 2
+          return
+        }
+      }
+      this.handleChange()
+    },
+    // 限制提示
+    handleExceed(files, fileList) {
+      console.log('handleExceed')
+      this.$message.warning(`限制选择 2 张图片，本次选择了 ${files.length} 张图片，共选择了 ${files.length + fileList.length} 张图片`)
+    },
+    // 点击文件列表中已上传的文件时的钩子
+    handlePictureCardPreview(file) {
+      console.log('handlePictureCardPreview')
+      this.dialogImageUrl = file.url
+      this.dialogVisible = true
+    },
+    handleChange(file, fileList) {
+      console.log('handleChange')
+      if (fileList) {
+        this.hideUpload = fileList.length >= 2
+      } else {
+        this.hideUpload = false
+      }
+    },
+    handleSuccess(response, file, fileList) {
+      console.log('handleSuccess')
+      console.log(response)
+      const base_url = process.env.BASE_API + '/static/'
+      if (response.code === 200) {
+        this.fileList.push({ name: file.file.name, url: base_url + response.data })
+        this.handleChange()
+      } else {
+        this.$message.warning(response.message)
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .main-form{
+    margin: 20px;
+  }
+</style>
diff --git a/src/views/caseCommon/caseDetailRead.vue b/src/views/caseCommon/caseDetailRead.vue
index 33473eb..e4b71cc 100644
--- a/src/views/caseCommon/caseDetailRead.vue
+++ b/src/views/caseCommon/caseDetailRead.vue
@@ -158,11 +158,11 @@
 
 <script>
 import { getCaseDetail } from '@/api/coorBusiness/case'
-import ArcGisMap from '@/components/Map/arcgisMap'
+import ArcGisMapRead from '@/components/Map/arcgisMapRead'
 
 export default {
   name: 'CaseDetail',
-  components: { ArcGisMap },
+  components: { ArcGisMapRead },
   data() {
     return {
       id: '',
diff --git a/src/views/caseCommon/caseDetailSupervise.vue b/src/views/caseCommon/caseDetailSupervise.vue
index 0ec1fe4..1175cef 100644
--- a/src/views/caseCommon/caseDetailSupervise.vue
+++ b/src/views/caseCommon/caseDetailSupervise.vue
@@ -195,11 +195,11 @@
 import { getCommonLanguage } from '@/api/coorBusiness/dict'
 import { historicalRecords } from '@/api/coorBusiness/process'
 import { superviseCaseTask } from '@/api/supervise/supervise'
-import ArcGisMap from '@/components/Map/arcgisMap'
+import ArcGisMapRead from '@/components/Map/arcgisMapRead'
 
 export default {
   name: 'CaseDetail',
-  components: { ArcGisMap },
+  components: { ArcGisMapRead },
   data() {
     return {
       id: '',

diff --git a/src/api/busAdmin/areaPersonliable.js b/src/api/busAdmin/areaPersonliable.js
new file mode 100644
index 0000000..58737bb
--- /dev/null
+++ b/src/api/busAdmin/areaPersonliable.js
@@ -0,0 +1,45 @@
+import request from '@/utils/request'
+
+export function getAreaPersonliableList(params) {
+  return request({
+    url: '/areaPersonliable/listPage',
+    method: 'get',
+    params
+  })
+}
+
+export function addAreaPersonliable(params) {
+  return request({
+    url: '/areaPersonliable/add',
+    method: 'post',
+    params
+  })
+}
+
+export function updateAreaPersonliable(params) {
+  return request({
+    url: '/areaPersonliable/update',
+    method: 'post',
+    params
+  })
+}
+
+export function deleteAreaPersonliable(id) {
+  return request({
+    url: '/areaPersonliable/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+export function getSupervisorList() {
+  return request({
+    url: '/mgr/simplelist',
+    method: 'post',
+    params: {
+      roleTips: 'supervisor'
+    }
+  })
+}
diff --git a/src/api/callCase/callCase.js b/src/api/callCase/callCase.js
new file mode 100644
index 0000000..7500fc7
--- /dev/null
+++ b/src/api/callCase/callCase.js
@@ -0,0 +1,87 @@
+/**
+ * 新建案卷的接口
+ */
+import request from '@/utils/request'
+
+// 获取案卷信息来源
+export function getCaseSource(params) {
+  return request({
+    url: 'dict/code/caseSource',
+    method: 'get',
+    params
+  })
+}
+
+// 获取案卷等级
+export function getCaseLevel(params) {
+  return request({
+    url: 'dict/code/caseLevel',
+    method: 'get',
+    params
+  })
+}
+
+// 获取案卷类别
+export function getCaseEorC(params) {
+  return request({
+    url: 'dict/code/eorc',
+    method: 'get',
+    params
+  })
+}
+
+// 根据案卷类别获取案卷大类
+export function getCaseType(eorc) {
+  return request({
+    url: 'case/type/list',
+    method: 'get',
+    params: {
+      eorc: eorc
+    }
+  })
+}
+
+// 根据案卷大类获取案卷小类
+export function getCaseDetailType(caseTypeId) {
+  return request({
+    url: 'case/typeDetail/list',
+    method: 'get',
+    params: {
+      typeId: caseTypeId
+    }
+  })
+}
+
+// 根据案卷小类获取结案标准
+export function getCaseTypesTime(caseTypeDetailId) {
+  return request({
+    url: 'case/typesTime/list',
+    method: 'get',
+    params: {
+      detailId: caseTypeDetailId
+    }
+  })
+}
+
+// 获取监督员列表
+export function getVerifyPerson(params) {
+  return request({
+    url: 'mgr/simplelist',
+    method: 'post',
+    params: {
+      roleTips: 'supervisor'
+    }
+  })
+}
+
+// 新增案卷
+export function addCase(params) {
+  return request({
+    url: 'case/add',
+    method: 'post',
+    headers: {
+      'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
+    },
+    params
+  })
+}
diff --git a/src/api/coorBusiness/case.js b/src/api/coorBusiness/case.js
index ec5a88a..08c3a13 100644
--- a/src/api/coorBusiness/case.js
+++ b/src/api/coorBusiness/case.js
@@ -110,9 +110,10 @@
   })
 }
 
+// 待处理
 export function toHandleListPage(params) {
   return request({
-    url: 'case/toHandleListPage/',
+    url: 'case/toProcessListPage/',
     method: 'get',
     params
   })
@@ -158,9 +159,10 @@
   })
 }
 
+// 待核查
 export function toCheckListPage(params) {
   return request({
-    url: 'case/toCheckListPage/',
+    url: 'case/toDisCheckListPage/',
     method: 'get',
     params
   })
diff --git a/src/components/CaseCommon/caseDetail.vue b/src/components/CaseCommon/caseDetail.vue
index f6c23ab..fdadcba 100644
--- a/src/components/CaseCommon/caseDetail.vue
+++ b/src/components/CaseCommon/caseDetail.vue
@@ -276,7 +276,7 @@
     </el-row>
     <el-row>
       <div class="title">数据流转:</div>
-      <el-table :data="recordList" :header-cell-style="{background:'#f3f3f3'}" class="table" border>
+      <el-table :data="recordList" :header-cell-style="{background:'#f3f3f3'}" max-height="400" class="table" border>
         <el-table-column prop="operationTypeName" label="操作" align="center"/>
         <el-table-column prop="deptName" label="单位" align="center"/>
         <el-table-column prop="userName" label="人员" align="center"/>
@@ -293,7 +293,7 @@
       :append-to-body="true"
       title="位置详情"
     >
-      <arc-gis-map :longitude="Number(caseDetail.lng)" :latitude="Number(caseDetail.lat)"/>
+      <arc-gis-map-read :longitude="Number(caseDetail.lng)" :latitude="Number(caseDetail.lat)"/>
     </el-dialog>
   </div>
 </template>
@@ -303,12 +303,12 @@
 import { getCaseDetail, getUserList, getDeptList, getCaseTypeList, getCaseTypeDetailList, getCaseTypeTimes } from '@/api/coorBusiness/case'
 import { getCommonLanguage, getFilingTypeList, getCaseLevelList } from '@/api/coorBusiness/dict'
 import { historicalRecords, nextNodes, completeCaseTask } from '@/api/coorBusiness/process'
-import ArcGisMap from '@/components/Map/arcgisMap'
+import ArcGisMapRead from '@/components/Map/arcgisMapRead'
 import { radioMap } from './radioMap'
 
 export default {
   name: 'CaseDetail',
-  components: { ArcGisMap },
+  components: { ArcGisMapRead },
   // props: {
   //   id: {
   //     type: String,
@@ -334,7 +334,6 @@
       showNeedVisit: false,
       caseDetail: {},
       operationKey: '', // 案件处理按钮key
-      imgurl: 'http:\\\\192.168.8.201:8083\\static\\',
       fileIdVerify: [], // 核实照片id
       fileIdProcess: [], // 处理照片id
       fileIdCheck: [], // 核查照片id
@@ -358,10 +357,12 @@
   computed: {
     isNeedVisit: function() {
       return this.caseDetail.isNeedRevisit === 1 ? '需要回访' : '不需要回访'
+    },
+    imgurl() {
+      return process.env.BASE_API + '/static/'
     }
   },
-  mounted() {
-    console.log('case dtial')
+  created() {
     this.id = this.$route.query.id
     this.showProcess = (this.$route.query.showProcess || this.$route.query.showProcess === false) ? this.$route.query.showProcess : true
     this.showNeedVisit = this.$route.query.showNeedVisit ? this.$route.query.showNeedVisit : false
@@ -371,7 +372,6 @@
     async initData() {
       // 查询案件详情接口
       const resDetail = await getCaseDetail(this.id)
-      console.log('detail', resDetail)
       this.caseDetail = resDetail.data[0]
 
       // 解析图片id
@@ -391,9 +391,11 @@
 
       // 查询流转记录接口
       this.processForm.processId = this.caseDetail.processId
-      const resRecord = await historicalRecords(this.processForm.processId)
-      this.recordList = resRecord.data
-      console.log(this.recordList)
+      // const resRecord = historicalRecords(this.processForm.processId)
+      // this.recordList = resRecord.data
+      historicalRecords(this.processForm.processId).then(res => {
+        this.recordList = res.data
+      })
 
       if (this.showProcess) {
         this.initProcess()
@@ -701,6 +703,7 @@
   .table{
     margin: 20px;
     width: 98%;
+    // max-height: 250px;
   }
   .title{
     margin-left: 38px;
diff --git a/src/components/CaseCommon/caseDetailRead.vue b/src/components/CaseCommon/caseDetailRead.vue
index 82066db..a4e87b0 100644
--- a/src/components/CaseCommon/caseDetailRead.vue
+++ b/src/components/CaseCommon/caseDetailRead.vue
@@ -158,11 +158,11 @@
 
 <script>
 import { getCaseDetail } from '@/api/coorBusiness/case'
-import ArcGisMap from '@/components/Map/arcgisMap'
+import ArcGisMapRead from '@/components/Map/arcgisMapRead'
 
 export default {
   name: 'CaseDetail',
-  components: { ArcGisMap },
+  components: { ArcGisMapRead },
   props: {
     id: {
       type: String,
diff --git a/src/components/Map/ArcGISConfig.js b/src/components/Map/ArcGISConfig.js
index d325da9..50cea3b 100644
--- a/src/components/Map/ArcGISConfig.js
+++ b/src/components/Map/ArcGISConfig.js
@@ -1,14 +1,16 @@
 export const mapConfig = {
-  apiUrl: 'https://js.arcgis.com/4.13/', // 暂时使用管网提供的api，实际部署时建议离线部署一套
+  apiUrl: 'http://192.168.8.205/arcgis_js_api/library/4.12/init.js', // 暂时使用管网提供的api，实际部署时建议离线部署一套
+  // apiUrl: 'https://js.arcgis.com/4.13/',
   mapIp: '223.84.218.107', // 服务ip
   mapPort: '6080', // 服务端口
-  serverBase: 'http://223.84.218.107:6080/arcgis/rest/services/', // 服务地址前缀
+  serverBase: 'http://192.168.8.205:6080/arcgis/rest/services/', // 服务地址前缀
+  // serverBase: 'http://223.84.218.107:6080/arcgis/rest/services/dx/',
   mapCenter: '[116.597,28.24]' // 地图中心点
 }
 
 export const serverConfig = {
-  mapUrlBase: mapConfig.serverBase + 'dx/2w/MapServer', // 底图服务地址
-  mapUrlBj: mapConfig.serverBase + 'dx/dxbj/MapServer', // 部件服务地址
-  mapUrlBjfc: mapConfig.serverBase + 'dx/bjfc/MapServer', // 部件分层服务地址
-  mapUrlBjEdit: mapConfig.serverBase + 'dx/dxbj/FeatureServer' // 可编辑的部件图层
+  mapUrlBase: mapConfig.serverBase + '2w/MapServer', // 底图服务地址
+  mapUrlBj: mapConfig.serverBase + 'dxbj/MapServer', // 部件服务地址
+  mapUrlBjfc: mapConfig.serverBase + 'bjfc/MapServer', // 部件分层服务地址
+  mapUrlBjEdit: mapConfig.serverBase + 'dxbj/FeatureServer' // 可编辑的部件图层
 }
diff --git a/src/components/Map/arcgisMap.vue b/src/components/Map/arcgisMap.vue
index 53776f1..5c15383 100644
--- a/src/components/Map/arcgisMap.vue
+++ b/src/components/Map/arcgisMap.vue
@@ -1,6 +1,6 @@
 <template>
-  <div style="margin-top:-30px">
-    <!-- <el-row :gutter="20">
+  <div>
+    <el-row :gutter="20">
       <el-col :span="4">
         <el-input v-model="keywords" size="small" type="text" placeholder="兴趣点关键字" clearable />
       </el-col>
@@ -31,9 +31,9 @@
       <el-col v-if="queryEventSwitch === '1'" :span="8" style="text-align: right;">
         <el-button type="primary" size="small" @click="checkEventPoint"> 事件提交 </el-button>
       </el-col>
-    </el-row> -->
+    </el-row>
 
-    <div v-loading="mapLoading" ref="mapDiv" class="baseMap" />
+    <div ref="mapDiv" class="baseMap" />
   </div>
 </template>
 
@@ -45,22 +45,12 @@
   url: mapConfig.apiUrl
 }
 
-// const eventPointLayerId = 'eventPointLayer' // 事件定位点的图层id
-// const queryResultLayerId = 'queryResultLayer' // 兴趣点查询结果点集的图层id
+const eventPointLayerId = 'eventPointLayer' // 事件定位点的图层id
+const queryResultLayerId = 'queryResultLayer' // 兴趣点查询结果点集的图层id
 const caseLayerId = 'addedGeometryLayerId' // 案卷点图层
 
 export default {
-  name: 'ArcGisMap',
-  props: {
-    longitude: {
-      type: Number,
-      default: 116.5937
-    },
-    latitude: {
-      type: Number,
-      default: 28.249
-    }
-  },
+  name: 'ArcGISMap',
   data() {
     return {
       map: '',
@@ -89,19 +79,18 @@
         IdentifyParameters: '',
         MapView: ''
       },
-      mapLoading: false
-      // keywords: '', // 查询关键字
-      // showEventPointPopup: true, // 是否显示事部件的popup
-      // queryEventSwitch: '1', // 1==查询事件；0==查询部件
-      // compListOpts: [], // 部件选择下拉框option
+      keywords: '', // 查询关键字
+      showEventPointPopup: true, // 是否显示事部件的popup
+      queryEventSwitch: '1', // 1==查询事件；0==查询部件
+      compListOpts: [], // 部件选择下拉框option
       // 主页面返回值
-      // longitude: '', // 定位点经度
-      // latitude: '' // 定位点纬度
-      // communityId: '', // 社区ID
-      // communityName: '', // 社区名称
-      // gridId: '', // 单元网格ID
-      // componentId: '', // 部件ID
-      // componentName: '' // 部件名称/=
+      longitude: '', // 定位点经度
+      latitude: '', // 定位点纬度
+      communityId: '', // 社区ID
+      communityName: '', // 社区名称
+      gridId: '', // 单元网格ID
+      componentId: '', // 部件ID
+      componentName: '' // 部件名称
     }
   },
   mounted() {
@@ -110,7 +99,6 @@
   methods: {
     // 初始化ArcGIS API对象
     importEsri: function() {
-      this.mapLoading = true
       loadModules([
         'esri/Map',
         'esri/Basemap',
@@ -164,10 +152,8 @@
 
           // 初始化地图
           this.initMap()
-          this.mapLoading = false
         }).catch(err => {
           console.log(err)
-          this.mapLoading = false
         })
     },
     // 初始化地图
@@ -194,139 +180,139 @@
         zoom: 3 // 当前地图缩放等级
       })
 
-      // const that = this
-      // this.view.on('click', function(event) {
-      //   // 清除地图上已有的事件/部件查询点
-      //   that.clearEOrCPoint()
+      const that = this
+      this.view.on('click', function(event) {
+        // 清除地图上已有的事件/部件查询点
+        that.clearEOrCPoint()
 
-      //   const lon = event.mapPoint.longitude
-      //   const lat = event.mapPoint.latitude
+        const lon = event.mapPoint.longitude
+        const lat = event.mapPoint.latitude
 
-      //   if (that.showEventPointPopup) {
-      //     // 添加点
-      //     const gLayer = new that.esriObj.GraphicsLayer()
-      //     const marker = new that.esriObj.SimpleMarkerSymbol()
-      //     marker.color = '#35A0E7'
-      //     marker.style = 'square'
-      //     marker.outline = {
-      //       color: [128, 128, 128, 0.5],
-      //       width: '2px'
-      //     }
-      //     const graphic = new that.esriObj.Graphic({
-      //       geometry: event.mapPoint,
-      //       symbol: marker
-      //     })
+        if (that.showEventPointPopup) {
+          // 添加点
+          const gLayer = new that.esriObj.GraphicsLayer()
+          const marker = new that.esriObj.SimpleMarkerSymbol()
+          marker.color = '#35A0E7'
+          marker.style = 'square'
+          marker.outline = {
+            color: [128, 128, 128, 0.5],
+            width: '2px'
+          }
+          const graphic = new that.esriObj.Graphic({
+            geometry: event.mapPoint,
+            symbol: marker
+          })
 
-      //     gLayer.id = eventPointLayerId
-      //     gLayer.add(graphic)
-      //     that.map.add(gLayer)
+          gLayer.id = eventPointLayerId
+          gLayer.add(graphic)
+          that.map.add(gLayer)
 
-      //     // 查询事件或者部件
-      //     if (that.queryEventSwitch === '1') {
-      //       // 事件定位
-      //       // 1查询底图得到所在网格与所在社区
-      //       const query = that.layers.dx2wGrid.createQuery()
-      //       query.geometry = that.view.toMap(event)
-      //       query.distance = 10
-      //       query.units = 'meters'
-      //       query.returnGeometry = true
-      //       query.outFields = ['BGID', 'COMMUID', 'COMMUNAME']
-      //       that.layers.dx2wGrid.queryFeatures(query)
-      //         .then(function(response) {
-      //           const result = response.features[0].attributes
+          // 查询事件或者部件
+          if (that.queryEventSwitch === '1') {
+            // 事件定位
+            // 1查询底图得到所在网格与所在社区
+            const query = that.layers.dx2wGrid.createQuery()
+            query.geometry = that.view.toMap(event)
+            query.distance = 10
+            query.units = 'meters'
+            query.returnGeometry = true
+            query.outFields = ['BGID', 'COMMUID', 'COMMUNAME']
+            that.layers.dx2wGrid.queryFeatures(query)
+              .then(function(response) {
+                const result = response.features[0].attributes
 
-      //           // 赋值
-      //           that.longitude = lon
-      //           that.latitude = lat
-      //           that.gridId = result.BGID
-      //           that.communityId = result.COMMUID
-      //           that.communityName = result.COMMUNAME
+                // 赋值
+                that.longitude = lon
+                that.latitude = lat
+                that.gridId = result.BGID
+                that.communityId = result.COMMUID
+                that.communityName = result.COMMUNAME
 
-      //           // 2弹出气泡
-      //           that.view.popup.open({
-      //             title: '事件定位',
-      //             content: '坐标：[' + lon.toFixed(4) + ', ' + lat.toFixed(4) + ']' + '<p>' + '所在社区：' + result.COMMUNAME,
-      //             location: event.mapPoint
-      //           })
-      //         })
-      //     } else if (that.queryEventSwitch === '0') {
-      //       // 部件定位
-      //       const queryDev = that.layers.dxbjPoint.createQuery()
-      //       // 定义查询的圆形范围，半径5米
-      //       const circle = new that.esriObj.Circle({
-      //         center: event.mapPoint,
-      //         radius: 5,
-      //         radiusUnit: 'meters'
-      //       })
-      //       queryDev.geometry = circle
-      //       queryDev.returnGeometry = true
-      //       queryDev.outFields = ['BGID', 'OBJID', 'OBJNAME', 'OBJPOS']
-      //       that.layers.dxbjPoint.queryFeatures(queryDev)
-      //         .then(function(response) {
-      //           if (response.features.length > 0) {
-      //             const results = response.features
+                // 2弹出气泡
+                that.view.popup.open({
+                  title: '事件定位',
+                  content: '坐标：[' + lon.toFixed(4) + ', ' + lat.toFixed(4) + ']' + '<p>' + '所在社区：' + result.COMMUNAME,
+                  location: event.mapPoint
+                })
+              })
+          } else if (that.queryEventSwitch === '0') {
+            // 部件定位
+            const queryDev = that.layers.dxbjPoint.createQuery()
+            // 定义查询的圆形范围，半径5米
+            const circle = new that.esriObj.Circle({
+              center: event.mapPoint,
+              radius: 5,
+              radiusUnit: 'meters'
+            })
+            queryDev.geometry = circle
+            queryDev.returnGeometry = true
+            queryDev.outFields = ['BGID', 'OBJID', 'OBJNAME', 'OBJPOS']
+            that.layers.dxbjPoint.queryFeatures(queryDev)
+              .then(function(response) {
+                if (response.features.length > 0) {
+                  const results = response.features
 
-      //             that.compListOpts = []
+                  that.compListOpts = []
 
-      //             let content = ''
-      //             results.forEach((item, index) => {
-      //               content += '<p>部件' + (index + 1) + '：' + item.attributes.OBJNAME + '，' + item.attributes.OBJPOS
-      //               const comp = {}
-      //               comp.name = '部件' + (index + 1) + '：' + item.attributes.OBJNAME
-      //               comp.value = item.attributes.OBJID
-      //               that.compListOpts.push(comp)
-      //             })
+                  let content = ''
+                  results.forEach((item, index) => {
+                    content += '<p>部件' + (index + 1) + '：' + item.attributes.OBJNAME + '，' + item.attributes.OBJPOS
+                    const comp = {}
+                    comp.name = '部件' + (index + 1) + '：' + item.attributes.OBJNAME
+                    comp.value = item.attributes.OBJID
+                    that.compListOpts.push(comp)
+                  })
 
-      //             // 2弹出气泡
-      //             that.view.popup.open({
-      //               title: '部件定位',
-      //               content: '坐标：[' + lon.toFixed(4) + ', ' + lat.toFixed(4) + ']，附近5米的部件有：' + content,
-      //               location: event.mapPoint
-      //             })
+                  // 2弹出气泡
+                  that.view.popup.open({
+                    title: '部件定位',
+                    content: '坐标：[' + lon.toFixed(4) + ', ' + lat.toFixed(4) + ']，附近5米的部件有：' + content,
+                    location: event.mapPoint
+                  })
 
-      //             // 查询所在社区和单元网格
-      //             const queryPos = that.layers.dx2wGrid.createQuery()
-      //             queryPos.geometry = that.view.toMap(event)
-      //             queryPos.returnGeometry = true
-      //             queryPos.outFields = ['BGID', 'COMMUID', 'COMMUNAME']
-      //             that.layers.dx2wGrid.queryFeatures(queryPos)
-      //               .then(function(response) {
-      //                 const result = response.features[0].attributes
+                  // 查询所在社区和单元网格
+                  const queryPos = that.layers.dx2wGrid.createQuery()
+                  queryPos.geometry = that.view.toMap(event)
+                  queryPos.returnGeometry = true
+                  queryPos.outFields = ['BGID', 'COMMUID', 'COMMUNAME']
+                  that.layers.dx2wGrid.queryFeatures(queryPos)
+                    .then(function(response) {
+                      const result = response.features[0].attributes
 
-      //                 // 赋值
-      //                 that.longitude = lon
-      //                 that.latitude = lat
-      //                 that.gridId = result.BGID
-      //                 that.communityId = result.COMMUID
-      //                 that.communityName = result.COMMUNAME
-      //               })
-      //           } else {
-      //             that.$message({
-      //               message: '没有查询到部件，请重新定位',
-      //               type: 'warning'
-      //             })
-      //           }
-      //         })
-      //     }
-      //   } else {
-      //     that.view.hitTest(event).then(function(response) {
-      //       if (response.results.length) {
-      //         const graphic = response.results[0].graphic
-      //         const name = graphic.attributes.KEYWORD
-      //         const address = graphic.attributes.OBJPOS
+                      // 赋值
+                      that.longitude = lon
+                      that.latitude = lat
+                      that.gridId = result.BGID
+                      that.communityId = result.COMMUID
+                      that.communityName = result.COMMUNAME
+                    })
+                } else {
+                  that.$message({
+                    message: '没有查询到部件，请重新定位',
+                    type: 'warning'
+                  })
+                }
+              })
+          }
+        } else {
+          that.view.hitTest(event).then(function(response) {
+            if (response.results.length) {
+              const graphic = response.results[0].graphic
+              const name = graphic.attributes.KEYWORD
+              const address = graphic.attributes.OBJPOS
 
-      //         that.view.popup.open({
-      //           title: name,
-      //           content: address,
-      //           location: event.mapPoint
-      //         })
-      //       }
-      //     })
-      //   }
-      // })
+              that.view.popup.open({
+                title: name,
+                content: address,
+                location: event.mapPoint
+              })
+            }
+          })
+        }
+      })
 
       this.addBjLayers()
-      this.addCasePointOnMap(this.longitude, this.latitude)
+      // this.addCasePointOnMap(116.5937, 28.249)
     },
     // 加载部件服务的各图层
     addBjLayers: function() {
@@ -347,160 +333,159 @@
         url: serverConfig.mapUrlBj + '/3',
         id: 'dxbjMph'
       })
-      // this.layers.dx2wGrid = new this.esriObj.FeatureLayer({
-      //   url: serverConfig.mapUrlBase + '/6',
-      //   id: 'gridLayer'
-      // })
+      this.layers.dx2wGrid = new this.esriObj.FeatureLayer({
+        url: serverConfig.mapUrlBase + '/1',
+        id: 'gridLayer'
+      })
 
       // 加载各图层
       this.map.add(this.layers.dxbjPoint)
       this.map.add(this.layers.dxbjLine)
       this.map.add(this.layers.dxbjXqd)
       this.map.add(this.layers.dxbjMph)
-      // this.map.add(this.layers.dx2wGrid)
+      this.map.add(this.layers.dx2wGrid)
     },
     // 在兴趣点图层查询关键字
-    // queryOnMap: function() {
-    //   const points = [] // 查询结果点集
+    queryOnMap: function() {
+      const points = [] // 查询结果点集
 
-    //   this.clearQueryResults()
-    //   this.clearEOrCPoint()
-    //   this.showEventPointPopup = false
-    //   this.queryEventSwitch = '2'
+      this.clearQueryResults()
+      this.clearEOrCPoint()
+      this.showEventPointPopup = false
+      this.queryEventSwitch = '2'
 
-    //   // 查询条件
-    //   const query = new this.esriObj.Query()
-    //   query.returnGeometry = true
-    //   query.outFields = ['*']
-    //   query.where = 'NAME like ' + "'%" + this.keywords + "%'"
-    //   const that = this
+      // 查询条件
+      const query = new this.esriObj.Query()
+      query.returnGeometry = true
+      query.outFields = ['*']
+      query.where = 'NAME like ' + "'%" + this.keywords + "%'"
+      const that = this
 
-    //   this.layers.dxbjXqd.queryFeatures(query).then(function(results) {
-    //     results.features.forEach(item => {
-    //       const point = {}
-    //       point.x = item.geometry.longitude
-    //       point.y = item.geometry.latitude
-    //       point.attr = item.attributes
-    //       points.push(point)
-    //     })
+      this.layers.dxbjXqd.queryFeatures(query).then(function(results) {
+        results.features.forEach(item => {
+          const point = {}
+          point.x = item.geometry.longitude
+          point.y = item.geometry.latitude
+          point.attr = item.attributes
+          points.push(point)
+        })
 
-    //     // 提示查询结果
-    //     if (points.length > 0) {
-    //       that.$message({
-    //         message: '成功查询到' + points.length + '条记录',
-    //         type: 'success'
-    //       })
+        // 提示查询结果
+        if (points.length > 0) {
+          that.$message({
+            message: '成功查询到' + points.length + '条记录',
+            type: 'success'
+          })
 
-    //       // 绘制点
-    //       that.addSimpleMarkerOnMap(points)
-    //     } else {
-    //       that.$message({
-    //         message: '没有查询到结果，请重新输入关键字',
-    //         type: 'warning'
-    //       })
-    //     }
-    //   })
-    // },
+          // 绘制点
+          that.addSimpleMarkerOnMap(points)
+        } else {
+          that.$message({
+            message: '没有查询到结果，请重新输入关键字',
+            type: 'warning'
+          })
+        }
+      })
+    },
     // 清除图层上的查询结果
-    // clearQueryResults: function() {
-    //   this.map.layers.forEach(layer => {
-    //     if (layer.type === 'graphics' && layer.id === queryResultLayerId) {
-    //       layer.graphics.removeAll()
-    //       return false
-    //     }
-    //   })
-    // },
-    // // 清除图层上的查询结果
-    // clearMap: function() {
-    //   // 清除地图上绘制的graphic图层
-    //   this.map.layers.forEach(layer => {
-    //     if (layer.type === 'graphics') {
-    //       layer.graphics.removeAll()
-    //       return false
-    //     }
-    //   })
+    clearQueryResults: function() {
+      this.map.layers.forEach(layer => {
+        if (layer.type === 'graphics' && layer.id === queryResultLayerId) {
+          layer.graphics.removeAll()
+          return false
+        }
+      })
+    },
+    // 清除图层上的查询结果
+    clearMap: function() {
+      // 清除地图上绘制的graphic图层
+      this.map.layers.forEach(layer => {
+        if (layer.type === 'graphics') {
+          layer.graphics.removeAll()
+          return false
+        }
+      })
 
-    //   // 清除弹出框
-    //   this.view.popup.close()
+      // 清除弹出框
+      this.view.popup.close()
 
-    //   // 清除data属性值
-    //   this.keywords = ''
-    //   this.showEventPointPopup = true // 是否显示事部件的popup
-    //   this.queryEventSwitch = '1' // 1==查询事件；0==查询部件
-    //   this.compListOpts = [] // 部件选择下拉框option
-    //   this.longitude = '' // 定位点经度
-    //   this.latitude = '' // 定位点纬度
-    //   this.communityId = '' // 社区ID
-    //   this.communityName = '' // 社区名称
-    //   this.gridId = '' // 单元网格ID
-    //   this.componentId = '' // 部件ID
-    //   this.componentName = '' // 部件名称
-    // },
+      // 清除data属性值
+      this.keywords = ''
+      this.showEventPointPopup = true // 是否显示事部件的popup
+      this.queryEventSwitch = '1' // 1==查询事件；0==查询部件
+      this.compListOpts = [] // 部件选择下拉框option
+      this.longitude = '' // 定位点经度
+      this.latitude = '' // 定位点纬度
+      this.communityId = '' // 社区ID
+      this.communityName = '' // 社区名称
+      this.gridId = '' // 单元网格ID
+      this.componentId = '' // 部件ID
+      this.componentName = '' // 部件名称
+    },
     // 清除图层上的事件定位点
-    // clearEOrCPoint: function() {
-    //   this.map.layers.forEach(layer => {
-    //     if (layer.type === 'graphics' && layer.id === eventPointLayerId) {
-    //       layer.graphics.removeAll()
-    //       return false
-    //     }
-    //   })
-    //   // 清除弹出框
-    //   this.view.popup.close()
-    // },
+    clearEOrCPoint: function() {
+      this.map.layers.forEach(layer => {
+        if (layer.type === 'graphics' && layer.id === eventPointLayerId) {
+          layer.graphics.removeAll()
+          return false
+        }
+      })
+      // 清除弹出框
+      this.view.popup.close()
+    },
     // 切换
-    // switchEventOrComponent: function() {
-    //   // 如果选中的是事件定位（1）或部件定位（0），点击地图时弹出事件或者部件的popup；否则（2以上）显示兴趣点结果的属性popup
-    //   this.showEventPointPopup = this.queryEventSwitch < 2
-    // },
+    switchEventOrComponent: function() {
+      // 如果选中的是事件定位（1）或部件定位（0），点击地图时弹出事件或者部件的popup；否则（2以上）显示兴趣点结果的属性popup
+      this.showEventPointPopup = this.queryEventSwitch < 2
+    },
     // 将查询结果点集合绘制在地图上
-    // addSimpleMarkerOnMap: function(points) {
-    //   const gLayer = new this.esriObj.GraphicsLayer()
-    //   points.forEach(item => {
-    //     const point = new this.esriObj.Point(item.x, item.y, item.attr)
-    //     const marker = new this.esriObj.SimpleMarkerSymbol()
-    //     marker.color = '#F9690E'
-    //     marker.outline = {
-    //       color: [128, 128, 128, 0.5],
-    //       width: '2px'
-    //     }
-    //     const graphic = new this.esriObj.Graphic({
-    //       geometry: point,
-    //       symbol: marker,
-    //       attributes: item.attr
-    //     })
-    //     gLayer.id = queryResultLayerId
-    //     gLayer.add(graphic)
-    //   })
-    //   this.map.add(gLayer)
-    // },
+    addSimpleMarkerOnMap: function(points) {
+      const gLayer = new this.esriObj.GraphicsLayer()
+      points.forEach(item => {
+        const point = new this.esriObj.Point(item.x, item.y, item.attr)
+        const marker = new this.esriObj.SimpleMarkerSymbol()
+        marker.color = '#F9690E'
+        marker.outline = {
+          color: [128, 128, 128, 0.5],
+          width: '2px'
+        }
+        const graphic = new this.esriObj.Graphic({
+          geometry: point,
+          symbol: marker,
+          attributes: item.attr
+        })
+        gLayer.id = queryResultLayerId
+        gLayer.add(graphic)
+      })
+      this.map.add(gLayer)
+    },
     // 返回事件定位的结果
-    // checkEventPoint: function() {
-    //   this.$emit(
-    //     'closeMapQueryDialogByEvent',
-    //     this.longitude,
-    //     this.latitude,
-    //     this.communityId,
-    //     this.communityName,
-    //     this.gridId)
+    checkEventPoint: function() {
+      this.$emit(
+        'closeMapQueryDialogByEvent',
+        this.longitude,
+        this.latitude,
+        this.communityId,
+        this.communityName,
+        this.gridId)
 
-    //   this.clearMap()
-    // },
-    // // 返回部件定位的结果
-    // checkComponentPoint: function() {
-    //   this.$emit(
-    //     'closeMapQueryDialogByComp',
-    //     this.longitude,
-    //     this.latitude,
-    //     this.communityId,
-    //     this.communityName,
-    //     this.gridId,
-    //     this.componentId)
+      this.clearMap()
+    },
+    // 返回部件定位的结果
+    checkComponentPoint: function() {
+      this.$emit(
+        'closeMapQueryDialogByComp',
+        this.longitude,
+        this.latitude,
+        this.communityId,
+        this.communityName,
+        this.gridId,
+        this.componentId)
 
-    //   this.clearMap()
-    // },
+      this.clearMap()
+    },
     // 在地图上添加指定坐标的点
     addCasePointOnMap: function(lng, lat) {
-      console.log('addCasePointOnMap', lng, lat)
       const gLayer = new this.esriObj.GraphicsLayer() // 添加自定义绘制点的图层
       const point = new this.esriObj.Point(lng, lat) // 创建geometry对象
       const marker = new this.esriObj.SimpleMarkerSymbol() // 创建marker标识
@@ -521,14 +506,14 @@
 
       // 重新设置地图中心点并移动
       this.view.center = point
-      this.view.goTo(point)
+      this.view.goTo()
     }
   }
 }
 </script>
 
 <style scoped>
-  @import 'https://js.arcgis.com/4.13/esri/css/main.css';
+  @import 'http://192.168.8.205/arcgis_js_api/library/4.12/esri/css/main.css';
   .baseMap {
     height:60vh;
     width: 100%;
diff --git a/src/components/Map/arcgisMapRead.vue b/src/components/Map/arcgisMapRead.vue
new file mode 100644
index 0000000..ae2058b
--- /dev/null
+++ b/src/components/Map/arcgisMapRead.vue
@@ -0,0 +1,539 @@
+<template>
+  <div style="margin-top:-30px">
+    <!-- <el-row :gutter="20">
+      <el-col :span="4">
+        <el-input v-model="keywords" size="small" type="text" placeholder="兴趣点关键字" clearable />
+      </el-col>
+      <el-col :span="4">
+        <el-button type="primary" size="small" @click="queryOnMap">查询</el-button>
+        <el-button type="info" size="small" @click="clearMap"> 清除地图 </el-button>
+      </el-col>
+
+      <el-col :span="8" style="text-align: center;">
+        <el-radio-group v-model="queryEventSwitch" size="small" @change="switchEventOrComponent">
+          <el-radio-button label="1">事件定位</el-radio-button>
+          <el-radio-button label="0">部件定位</el-radio-button>
+          <el-radio-button label="2">兴趣点属性</el-radio-button>
+        </el-radio-group>
+      </el-col>
+
+      <el-col v-if="queryEventSwitch === '0'" :span="8" style="text-align: right;">
+        <el-select v-model="componentId" placeholder="选择部件" clearable value="" size="small">
+          <el-option
+            v-for="item in compListOpts"
+            :key="item.value"
+            :label="item.name"
+            :value="item.value"/>
+        </el-select>
+        <el-button type="primary" size="small" @click="checkComponentPoint"> 部件提交 </el-button>
+      </el-col>
+
+      <el-col v-if="queryEventSwitch === '1'" :span="8" style="text-align: right;">
+        <el-button type="primary" size="small" @click="checkEventPoint"> 事件提交 </el-button>
+      </el-col>
+    </el-row> -->
+
+    <div v-loading="mapLoading" ref="mapDiv" class="baseMap" />
+  </div>
+</template>
+
+<script>
+import { loadModules } from 'esri-loader'
+import { mapConfig, serverConfig } from './ArcGISConfig'
+
+const option = {
+  url: mapConfig.apiUrl
+}
+
+// const eventPointLayerId = 'eventPointLayer' // 事件定位点的图层id
+// const queryResultLayerId = 'queryResultLayer' // 兴趣点查询结果点集的图层id
+const caseLayerId = 'addedGeometryLayerId' // 案卷点图层
+
+export default {
+  name: 'ArcGisMapRead',
+  props: {
+    longitude: {
+      type: Number,
+      default: 116.5937
+    },
+    latitude: {
+      type: Number,
+      default: 28.249
+    }
+  },
+  data() {
+    return {
+      map: '',
+      view: '',
+      layers: {
+        dxbjPoint: '', // 部件点图层
+        dxbjLine: '', // 部件线图层
+        dxbjXqd: '', // 兴趣点图层
+        dxbjMph: '', // 门牌好图层
+        dx2wGrid: '' // 单元网格图层
+      },
+      esriObj: {
+        Map: '',
+        BaseMap: '',
+        Graphic: '',
+        PopupTemplate: '',
+        Circle: '',
+        Point: '',
+        FeatureLayer: '',
+        GraphicsLayer: '',
+        TileLayer: '',
+        SimpleMarkerSymbol: '',
+        Query: '',
+        QueryTask: '',
+        IdentifyTask: '',
+        IdentifyParameters: '',
+        MapView: ''
+      },
+      mapLoading: false
+      // keywords: '', // 查询关键字
+      // showEventPointPopup: true, // 是否显示事部件的popup
+      // queryEventSwitch: '1', // 1==查询事件；0==查询部件
+      // compListOpts: [], // 部件选择下拉框option
+      // 主页面返回值
+      // longitude: '', // 定位点经度
+      // latitude: '' // 定位点纬度
+      // communityId: '', // 社区ID
+      // communityName: '', // 社区名称
+      // gridId: '', // 单元网格ID
+      // componentId: '', // 部件ID
+      // componentName: '' // 部件名称/=
+    }
+  },
+  mounted() {
+    this.importEsri()
+  },
+  methods: {
+    // 初始化ArcGIS API对象
+    importEsri: function() {
+      this.mapLoading = true
+      loadModules([
+        'esri/Map',
+        'esri/Basemap',
+        'esri/Graphic',
+        'esri/PopupTemplate',
+        'esri/geometry/Circle',
+        'esri/geometry/Point',
+        'esri/layers/FeatureLayer',
+        'esri/layers/GraphicsLayer',
+        'esri/layers/TileLayer',
+        'esri/symbols/SimpleMarkerSymbol',
+        'esri/tasks/support/Query',
+        'esri/tasks/QueryTask',
+        'esri/tasks/IdentifyTask',
+        'esri/tasks/support/IdentifyParameters',
+        'esri/views/MapView',
+        'dojo/domReady!'
+      ], option)
+        .then(([
+          Map,
+          BaseMap,
+          Graphic,
+          PopupTemplate,
+          Circle,
+          Point,
+          FeatureLayer,
+          GraphicsLayer,
+          TileLayer,
+          SimpleMarkerSymbol,
+          Query,
+          QueryTask,
+          IdentifyTask,
+          IdentifyParameters,
+          MapView
+        ]) => {
+          this.esriObj.Map = Map
+          this.esriObj.BaseMap = BaseMap
+          this.esriObj.Graphic = Graphic
+          this.esriObj.PopupTemplate = PopupTemplate
+          this.esriObj.Circle = Circle
+          this.esriObj.Point = Point
+          this.esriObj.FeatureLayer = FeatureLayer
+          this.esriObj.GraphicsLayer = GraphicsLayer
+          this.esriObj.TileLayer = TileLayer
+          this.esriObj.SimpleMarkerSymbol = SimpleMarkerSymbol
+          this.esriObj.Query = Query
+          this.esriObj.QueryTask = QueryTask
+          this.esriObj.IdentifyTask = IdentifyTask
+          this.esriObj.IdentifyParameters = IdentifyParameters
+          this.esriObj.MapView = MapView
+
+          // 初始化地图
+          this.initMap()
+          this.mapLoading = false
+        }).catch(err => {
+          console.log(err)
+          this.mapLoading = false
+        })
+    },
+    // 初始化地图
+    initMap: function() {
+      const base = new this.esriObj.BaseMap({
+        baseLayers: [
+          new this.esriObj.TileLayer({ // 可配置属性，见TileLayer类
+            id: '2w',
+            url: serverConfig.mapUrlBase
+          })
+        ],
+        title: 'dx2w',
+        id: 'dx2w'
+      })
+
+      this.map = new this.esriObj.Map({
+        basemap: base // 底图类型，详见BaseMap类
+      })
+
+      this.view = new this.esriObj.MapView({
+        container: this.$refs.mapDiv, // 视图的容器
+        map: this.map, // Map的实例放入视图中
+        center: [116.597, 28.24], // 初始显示的地图中心点，经纬度
+        zoom: 3 // 当前地图缩放等级
+      })
+
+      // const that = this
+      // this.view.on('click', function(event) {
+      //   // 清除地图上已有的事件/部件查询点
+      //   that.clearEOrCPoint()
+
+      //   const lon = event.mapPoint.longitude
+      //   const lat = event.mapPoint.latitude
+
+      //   if (that.showEventPointPopup) {
+      //     // 添加点
+      //     const gLayer = new that.esriObj.GraphicsLayer()
+      //     const marker = new that.esriObj.SimpleMarkerSymbol()
+      //     marker.color = '#35A0E7'
+      //     marker.style = 'square'
+      //     marker.outline = {
+      //       color: [128, 128, 128, 0.5],
+      //       width: '2px'
+      //     }
+      //     const graphic = new that.esriObj.Graphic({
+      //       geometry: event.mapPoint,
+      //       symbol: marker
+      //     })
+
+      //     gLayer.id = eventPointLayerId
+      //     gLayer.add(graphic)
+      //     that.map.add(gLayer)
+
+      //     // 查询事件或者部件
+      //     if (that.queryEventSwitch === '1') {
+      //       // 事件定位
+      //       // 1查询底图得到所在网格与所在社区
+      //       const query = that.layers.dx2wGrid.createQuery()
+      //       query.geometry = that.view.toMap(event)
+      //       query.distance = 10
+      //       query.units = 'meters'
+      //       query.returnGeometry = true
+      //       query.outFields = ['BGID', 'COMMUID', 'COMMUNAME']
+      //       that.layers.dx2wGrid.queryFeatures(query)
+      //         .then(function(response) {
+      //           const result = response.features[0].attributes
+
+      //           // 赋值
+      //           that.longitude = lon
+      //           that.latitude = lat
+      //           that.gridId = result.BGID
+      //           that.communityId = result.COMMUID
+      //           that.communityName = result.COMMUNAME
+
+      //           // 2弹出气泡
+      //           that.view.popup.open({
+      //             title: '事件定位',
+      //             content: '坐标：[' + lon.toFixed(4) + ', ' + lat.toFixed(4) + ']' + '<p>' + '所在社区：' + result.COMMUNAME,
+      //             location: event.mapPoint
+      //           })
+      //         })
+      //     } else if (that.queryEventSwitch === '0') {
+      //       // 部件定位
+      //       const queryDev = that.layers.dxbjPoint.createQuery()
+      //       // 定义查询的圆形范围，半径5米
+      //       const circle = new that.esriObj.Circle({
+      //         center: event.mapPoint,
+      //         radius: 5,
+      //         radiusUnit: 'meters'
+      //       })
+      //       queryDev.geometry = circle
+      //       queryDev.returnGeometry = true
+      //       queryDev.outFields = ['BGID', 'OBJID', 'OBJNAME', 'OBJPOS']
+      //       that.layers.dxbjPoint.queryFeatures(queryDev)
+      //         .then(function(response) {
+      //           if (response.features.length > 0) {
+      //             const results = response.features
+
+      //             that.compListOpts = []
+
+      //             let content = ''
+      //             results.forEach((item, index) => {
+      //               content += '<p>部件' + (index + 1) + '：' + item.attributes.OBJNAME + '，' + item.attributes.OBJPOS
+      //               const comp = {}
+      //               comp.name = '部件' + (index + 1) + '：' + item.attributes.OBJNAME
+      //               comp.value = item.attributes.OBJID
+      //               that.compListOpts.push(comp)
+      //             })
+
+      //             // 2弹出气泡
+      //             that.view.popup.open({
+      //               title: '部件定位',
+      //               content: '坐标：[' + lon.toFixed(4) + ', ' + lat.toFixed(4) + ']，附近5米的部件有：' + content,
+      //               location: event.mapPoint
+      //             })
+
+      //             // 查询所在社区和单元网格
+      //             const queryPos = that.layers.dx2wGrid.createQuery()
+      //             queryPos.geometry = that.view.toMap(event)
+      //             queryPos.returnGeometry = true
+      //             queryPos.outFields = ['BGID', 'COMMUID', 'COMMUNAME']
+      //             that.layers.dx2wGrid.queryFeatures(queryPos)
+      //               .then(function(response) {
+      //                 const result = response.features[0].attributes
+
+      //                 // 赋值
+      //                 that.longitude = lon
+      //                 that.latitude = lat
+      //                 that.gridId = result.BGID
+      //                 that.communityId = result.COMMUID
+      //                 that.communityName = result.COMMUNAME
+      //               })
+      //           } else {
+      //             that.$message({
+      //               message: '没有查询到部件，请重新定位',
+      //               type: 'warning'
+      //             })
+      //           }
+      //         })
+      //     }
+      //   } else {
+      //     that.view.hitTest(event).then(function(response) {
+      //       if (response.results.length) {
+      //         const graphic = response.results[0].graphic
+      //         const name = graphic.attributes.KEYWORD
+      //         const address = graphic.attributes.OBJPOS
+
+      //         that.view.popup.open({
+      //           title: name,
+      //           content: address,
+      //           location: event.mapPoint
+      //         })
+      //       }
+      //     })
+      //   }
+      // })
+
+      this.addBjLayers()
+      this.addCasePointOnMap(this.longitude, this.latitude)
+    },
+    // 加载部件服务的各图层
+    addBjLayers: function() {
+      // 此处可以优化
+      this.layers.dxbjPoint = new this.esriObj.FeatureLayer({ // 可配置属性，见TileLayer类
+        url: serverConfig.mapUrlBj + '/0',
+        id: 'dxbjPoint'
+      })
+      this.layers.dxbjLine = new this.esriObj.FeatureLayer({ // 可配置属性，见TileLayer类
+        url: serverConfig.mapUrlBj + '/1',
+        id: 'dxbjLine'
+      })
+      this.layers.dxbjXqd = new this.esriObj.FeatureLayer({ // 可配置属性，见TileLayer类
+        url: serverConfig.mapUrlBj + '/2',
+        id: 'dxbjXqd'
+      })
+      this.layers.dxbjMph = new this.esriObj.FeatureLayer({ // 可配置属性，见TileLayer类
+        url: serverConfig.mapUrlBj + '/3',
+        id: 'dxbjMph'
+      })
+      // this.layers.dx2wGrid = new this.esriObj.FeatureLayer({
+      //   url: serverConfig.mapUrlBase + '/6',
+      //   id: 'gridLayer'
+      // })
+
+      // 加载各图层
+      this.map.add(this.layers.dxbjPoint)
+      this.map.add(this.layers.dxbjLine)
+      this.map.add(this.layers.dxbjXqd)
+      this.map.add(this.layers.dxbjMph)
+      // this.map.add(this.layers.dx2wGrid)
+    },
+    // 在兴趣点图层查询关键字
+    // queryOnMap: function() {
+    //   const points = [] // 查询结果点集
+
+    //   this.clearQueryResults()
+    //   this.clearEOrCPoint()
+    //   this.showEventPointPopup = false
+    //   this.queryEventSwitch = '2'
+
+    //   // 查询条件
+    //   const query = new this.esriObj.Query()
+    //   query.returnGeometry = true
+    //   query.outFields = ['*']
+    //   query.where = 'NAME like ' + "'%" + this.keywords + "%'"
+    //   const that = this
+
+    //   this.layers.dxbjXqd.queryFeatures(query).then(function(results) {
+    //     results.features.forEach(item => {
+    //       const point = {}
+    //       point.x = item.geometry.longitude
+    //       point.y = item.geometry.latitude
+    //       point.attr = item.attributes
+    //       points.push(point)
+    //     })
+
+    //     // 提示查询结果
+    //     if (points.length > 0) {
+    //       that.$message({
+    //         message: '成功查询到' + points.length + '条记录',
+    //         type: 'success'
+    //       })
+
+    //       // 绘制点
+    //       that.addSimpleMarkerOnMap(points)
+    //     } else {
+    //       that.$message({
+    //         message: '没有查询到结果，请重新输入关键字',
+    //         type: 'warning'
+    //       })
+    //     }
+    //   })
+    // },
+    // 清除图层上的查询结果
+    // clearQueryResults: function() {
+    //   this.map.layers.forEach(layer => {
+    //     if (layer.type === 'graphics' && layer.id === queryResultLayerId) {
+    //       layer.graphics.removeAll()
+    //       return false
+    //     }
+    //   })
+    // },
+    // // 清除图层上的查询结果
+    // clearMap: function() {
+    //   // 清除地图上绘制的graphic图层
+    //   this.map.layers.forEach(layer => {
+    //     if (layer.type === 'graphics') {
+    //       layer.graphics.removeAll()
+    //       return false
+    //     }
+    //   })
+
+    //   // 清除弹出框
+    //   this.view.popup.close()
+
+    //   // 清除data属性值
+    //   this.keywords = ''
+    //   this.showEventPointPopup = true // 是否显示事部件的popup
+    //   this.queryEventSwitch = '1' // 1==查询事件；0==查询部件
+    //   this.compListOpts = [] // 部件选择下拉框option
+    //   this.longitude = '' // 定位点经度
+    //   this.latitude = '' // 定位点纬度
+    //   this.communityId = '' // 社区ID
+    //   this.communityName = '' // 社区名称
+    //   this.gridId = '' // 单元网格ID
+    //   this.componentId = '' // 部件ID
+    //   this.componentName = '' // 部件名称
+    // },
+    // 清除图层上的事件定位点
+    // clearEOrCPoint: function() {
+    //   this.map.layers.forEach(layer => {
+    //     if (layer.type === 'graphics' && layer.id === eventPointLayerId) {
+    //       layer.graphics.removeAll()
+    //       return false
+    //     }
+    //   })
+    //   // 清除弹出框
+    //   this.view.popup.close()
+    // },
+    // 切换
+    // switchEventOrComponent: function() {
+    //   // 如果选中的是事件定位（1）或部件定位（0），点击地图时弹出事件或者部件的popup；否则（2以上）显示兴趣点结果的属性popup
+    //   this.showEventPointPopup = this.queryEventSwitch < 2
+    // },
+    // 将查询结果点集合绘制在地图上
+    // addSimpleMarkerOnMap: function(points) {
+    //   const gLayer = new this.esriObj.GraphicsLayer()
+    //   points.forEach(item => {
+    //     const point = new this.esriObj.Point(item.x, item.y, item.attr)
+    //     const marker = new this.esriObj.SimpleMarkerSymbol()
+    //     marker.color = '#F9690E'
+    //     marker.outline = {
+    //       color: [128, 128, 128, 0.5],
+    //       width: '2px'
+    //     }
+    //     const graphic = new this.esriObj.Graphic({
+    //       geometry: point,
+    //       symbol: marker,
+    //       attributes: item.attr
+    //     })
+    //     gLayer.id = queryResultLayerId
+    //     gLayer.add(graphic)
+    //   })
+    //   this.map.add(gLayer)
+    // },
+    // 返回事件定位的结果
+    // checkEventPoint: function() {
+    //   this.$emit(
+    //     'closeMapQueryDialogByEvent',
+    //     this.longitude,
+    //     this.latitude,
+    //     this.communityId,
+    //     this.communityName,
+    //     this.gridId)
+
+    //   this.clearMap()
+    // },
+    // // 返回部件定位的结果
+    // checkComponentPoint: function() {
+    //   this.$emit(
+    //     'closeMapQueryDialogByComp',
+    //     this.longitude,
+    //     this.latitude,
+    //     this.communityId,
+    //     this.communityName,
+    //     this.gridId,
+    //     this.componentId)
+
+    //   this.clearMap()
+    // },
+    // 在地图上添加指定坐标的点
+    addCasePointOnMap: function(lng, lat) {
+      console.log('addCasePointOnMap', lng, lat)
+      const gLayer = new this.esriObj.GraphicsLayer() // 添加自定义绘制点的图层
+      const point = new this.esriObj.Point(lng, lat) // 创建geometry对象
+      const marker = new this.esriObj.SimpleMarkerSymbol() // 创建marker标识
+      // marker属性
+      marker.color = '#F9690E'
+      marker.outline = {
+        color: [128, 128, 128, 0.5],
+        width: '2px'
+      }
+      // 创建graphic对象
+      const graphic = new this.esriObj.Graphic({
+        geometry: point,
+        symbol: marker
+      })
+      gLayer.id = caseLayerId // 标识案卷图层
+      gLayer.add(graphic) // 图层上添加对象
+      this.map.add(gLayer) // 地图上添加图层
+
+      // 重新设置地图中心点并移动
+      this.view.center = point
+      this.view.goTo(point)
+    }
+  }
+}
+</script>
+
+<style scoped>
+  @import 'https://js.arcgis.com/4.13/esri/css/main.css';
+  .baseMap {
+    height:60vh;
+    width: 100%;
+    margin-top: 25px;
+    border: 1px solid #DCDCDC;
+    border-radius: 4px;
+  }
+</style>
diff --git a/src/router/index.js b/src/router/index.js
index b265a48..1c80473 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -11,6 +11,7 @@
 import { systemRouters } from './modules/system'
 import { cooRouters } from './modules/coo'
 import { commenetRouters } from './modules/comment'
+import { suphandleRouters } from './modules/suphandle'
 import { commonRouters } from './modules/common'
 
 /**
@@ -90,6 +91,7 @@
 export const asyncRouterMap = [
   ...commonRouters,
   ...cooRouters,
+  ...suphandleRouters,
   ...systemRouters,
   ...commenetRouters,
   { path: '*', redirect: '/404', hidden: true, meta: {}}
diff --git a/src/router/modules/suphandle.js b/src/router/modules/suphandle.js
new file mode 100644
index 0000000..7026a7b
--- /dev/null
+++ b/src/router/modules/suphandle.js
@@ -0,0 +1,35 @@
+/* Layout */
+import Layout from '../../views/layout/Layout'
+export const suphandleRouters = [
+  {
+    path: '/suphandle',
+    name: 'suphandle',
+    redirect: '/accessDept',
+    hidden: true,
+    meta: {
+      title: '监督受理子系统',
+      permission: ['/suphandle'],
+      isSys: true
+    }
+  },
+  {
+    path: '/callBus',
+    component: Layout,
+    redirect: '/callBus',
+    name: 'CallBus',
+    alwaysShow: true,
+    meta: {
+      title: '呼叫业务',
+      permission: ['/callBus'],
+      sys: '/suphandle'
+    },
+    children: [
+      {
+        path: '/callCase',
+        component: () => import('@/views/callCase/callCase'),
+        name: 'CallCase',
+        meta: { title: '建立案卷', icon: '', belongSys: '', permission: '/callCase' }
+      }
+    ]
+  }
+]
diff --git a/src/router/modules/system.js b/src/router/modules/system.js
index 10bff2e..c80b732 100644
--- a/src/router/modules/system.js
+++ b/src/router/modules/system.js
@@ -48,6 +48,12 @@
         component: () => import('@/views/busAdmin/userDevice/userDevice'),
         name: 'UserDevice',
         meta: { title: '终端设备管理', icon: '', permission: ['/userDevice'] }
+      },
+      {
+        path: '/areaPersonliable',
+        component: () => import('@/views/busAdmin/areaPersonliable/areaPersonliable'),
+        name: 'AreaPersonliable',
+        meta: { title: '网格责任人管理', icon: '', permission: ['/areaPersonliable'] }
       }
     ]
   },
diff --git a/src/views/busAdmin/areaPersonliable/areaPersonliable.vue b/src/views/busAdmin/areaPersonliable/areaPersonliable.vue
new file mode 100644
index 0000000..23a26de
--- /dev/null
+++ b/src/views/busAdmin/areaPersonliable/areaPersonliable.vue
@@ -0,0 +1,156 @@
+<template>
+  <div class="table-container">
+    <el-row class="table-title">
+      <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
+      <el-col :span="12" :offset="6" class="edit_btns">
+        <el-button v-if="hasPerm('/areaPersonliable/add')" class="edit_btn" size="small" @click="add">新增</el-button>
+      </el-col>
+    </el-row>
+    <el-table v-loading="listLoading" ref="table" :data="list" class="table" border>
+      <el-table-column :index="indexMethod" align="center" type="index" />
+      <el-table-column v-for="column in tableColumns" :key="column.value" :label="column.text" align="center">
+        <template slot-scope="scope">
+          <span>{{ scope.row[column.value] }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column v-if="hasPerm('/areaPersonliable/update')||hasPerm('/areaPersonliable/delete')" label="操作" align="center" width="200">
+        <template slot-scope="scope">
+          <el-button v-if="hasPerm('/areaPersonliable/update')" class="table-button" type="text" @click="edit(scope.row)">编辑</el-button>
+          <el-button v-if="hasPerm('/areaPersonliable/delete')" class="table-button" type="text" @click="del(scope.row)">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <div class="pagination-container">
+      <el-pagination
+        :current-page="listQuery.offset"
+        :page-sizes="[10,20,30,50]"
+        :page-size="listQuery.limit"
+        :total="total"
+        align="center"
+        layout="total, sizes, prev, pager, next"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"/>
+    </div>
+
+    <edit-area-personliable ref="editAreaPersonliable" @watchChild="fetchData"/>
+  </div>
+</template>
+
+<script>
+import { getAreaPersonliableList, deleteAreaPersonliable } from '@/api/busAdmin/areaPersonliable'
+import EditAreaPersonliable from './editAreaPersonliable'
+
+export default {
+  name: 'AreaPersonliable',
+  components: { EditAreaPersonliable },
+  data() {
+    return {
+      list: [],
+      total: 0,
+      listLoading: false,
+      listQuery: {
+        limit: 10,
+        offset: 1,
+        sort: 'id',
+        order: 'asc'
+      },
+      tableColumns: [
+        {
+          text: '网格名称',
+          value: 'areaName'
+        },
+        {
+          text: '责任人姓名',
+          value: 'userName'
+        },
+        {
+          text: '所属区域',
+          value: 'pAreaName'
+        }
+      ]
+    }
+  },
+  activated() {
+    this.fetchData()
+  },
+  methods: {
+    async fetchData() {
+      this.listLoading = true
+      const res = await getAreaPersonliableList(this.listQuery)
+      this.list = res.data.rows
+      this.total = parseInt(res.data.total)
+      this.listLoading = false
+    },
+    indexMethod(index) {
+      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
+    },
+    // 改变页容量
+    handleSizeChange(val) {
+      this.listQuery.limit = val
+      this.fetchData()
+    },
+    // 改变当前页
+    handleCurrentChange(val) {
+      this.listQuery.offset = val
+      this.fetchData()
+    },
+    add() {
+      this.$refs.editAreaPersonliable.initDialog(true, 'create')
+    },
+    edit(row) {
+      this.$refs.editAreaPersonliable.initDialog(true, 'update', row)
+    },
+    del(row) {
+      this.$confirm(
+        '确定要删除吗？',
+        '确认操作',
+        {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }
+      ).then(() => {
+        deleteAreaPersonliable(row.id).then(response => {
+          if (response.code === 200) {
+            this.$message.success('删除成功')
+            this.fetchData()
+          }
+        })
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  $tableTitleHeight:46px;
+  .table{
+    margin-bottom: 20px;
+  }
+  .table-container{
+    margin: 20px;
+  }
+  .table-title{
+    background-color:rgba(243, 243, 243, 1);
+    height: $tableTitleHeight;
+    .title-header{
+      line-height:$tableTitleHeight;
+      color: #606266;
+      font-size: 15px;
+      i{
+        margin-left: 5px;
+        margin-right: 5px;
+      }
+    }
+  }
+  .edit_btns{
+    .edit_btn{
+      float:right;
+      margin:7px 3px;//为了需要居中显示margin-top和bottom要用$tableTitleHeight减去按钮原高度除以2
+    }
+  }
+  .table-button{
+    padding: 10px;
+    height: 23px;
+  }
+</style>
diff --git a/src/views/busAdmin/areaPersonliable/areaSelectTree.vue b/src/views/busAdmin/areaPersonliable/areaSelectTree.vue
new file mode 100644
index 0000000..d0ba37f
--- /dev/null
+++ b/src/views/busAdmin/areaPersonliable/areaSelectTree.vue
@@ -0,0 +1,80 @@
+<template>
+  <el-dialog :visible.sync="dialogFormVisible" append-to-body custom-class="area-select-dialog" title="选择责任网格">
+    <el-scrollbar style="height: 400px">
+      <el-tree
+        ref="tree"
+        :expand-on-click-node="false"
+        :props="defaultProps"
+        :load="loadNode"
+        node-key="id"
+        lazy
+      />
+    </el-scrollbar>
+    <div slot="footer" class="dialog-footer">
+      <el-button type="primary" @click="confirmSelect">确定</el-button>
+      <el-button @click="cancel">取消</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { getAreaTree } from '@/api/area'
+export default {
+  name: 'AreaSelectTree',
+  data() {
+    return {
+      dialogFormVisible: true,
+      defaultProps: {
+        label: 'name',
+        children: 'children',
+        isLeaf: 'leaf'
+      },
+      listQuery: {
+        pid: ''
+      }
+    }
+  },
+  methods: {
+    // 获取数据
+    // fetchData() {
+    //   return new Promise(function(resolve, reject) {
+    //     getAreaTree(this.roleId)
+    //   })
+    // },
+    initDialog() {
+      this.dialogFormVisible = true
+    },
+    loadNode(node, resolve) {
+      if (node.data && node.data.id) {
+        this.listQuery.pid = node.data.id
+      }
+      getAreaTree(this.listQuery).then(response => {
+        const data = response.data
+        resolve(data)
+      })
+    },
+    // 选择后的操作
+    confirmSelect() {
+      const node = this.$refs.tree.getCurrentNode()
+      this.dialogFormVisible = false
+      this.$emit('selectDone', node)
+    },
+    cancel() {
+      this.dialogFormVisible = false
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
+
+<style lang="scss" scope>
+  .area-select-dialog{
+    width: 400px;
+    .el-scrollbar__wrap{
+      overflow-x: hidden !important;
+    }
+  }
+</style>
diff --git a/src/views/busAdmin/areaPersonliable/editAreaPersonliable.vue b/src/views/busAdmin/areaPersonliable/editAreaPersonliable.vue
new file mode 100644
index 0000000..60e99e7
--- /dev/null
+++ b/src/views/busAdmin/areaPersonliable/editAreaPersonliable.vue
@@ -0,0 +1,156 @@
+<template>
+  <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" append-to-body width="35%">
+    <el-form ref="dataForm" :model="AreaPersonliableForm" :rules="rules" label-width="100px">
+      <el-form-item label="网格名称" prop="areaName">
+        <el-input
+          v-model="AreaPersonliableForm.areaName"
+          :disabled="dialogStatus === 'update'"
+          placeholder="请选择责任网格"
+          @focus="openAreaSelect"/>
+      </el-form-item>
+      <el-form-item label="责任人姓名" prop="userId">
+        <el-select v-model="AreaPersonliableForm.userId" filterable clearable style="width:100%" placeholder="请选择责任人">
+          <el-option v-for="user in userList" :key="user.id" :label="user.name" :value="user.id"/>
+        </el-select>
+      </el-form-item>
+    </el-form>
+    <div slot="footer" class="dialog-footer">
+      <el-button type="primary" @click="saveData">保存</el-button>
+      <el-button @click="cancel">取消</el-button>
+    </div>
+    <area-select-tree v-if="areaSelectShow" ref="areaSelect" @selectDone="selectArea"/>
+  </el-dialog>
+</template>
+
+<script>
+import AreaSelectTree from './areaSelectTree'
+import { getSupervisorList, addAreaPersonliable, updateAreaPersonliable } from '@/api/busAdmin/areaPersonliable'
+
+export default {
+  name: 'EditAreaPersonliable',
+  components: { AreaSelectTree },
+  data() {
+    return {
+      dialogFormVisible: false,
+      dialogStatus: '',
+      textMap: {
+        update: '编辑',
+        create: '新增'
+      },
+      AreaPersonliableForm: {
+        id: '',
+        areaId: '',
+        areaName: '',
+        userId: ''
+      },
+      userList: [],
+      rules: {
+        areaName: [{ required: true, message: '区域不能为空', trigger: ['change'] }],
+        userId: [{ required: true, message: '用户不能为空', trigger: ['blur', 'change'] }]
+      },
+      areaSelectShow: false
+    }
+  },
+  mounted() {
+    this.fetchUserList()
+  },
+  methods: {
+    initDialog(dialogFormVisible, dialogStatus, row = null) {
+      this.dialogFormVisible = dialogFormVisible
+      this.dialogStatus = dialogStatus
+      if (this.dialogStatus === 'create') {
+      // 新增时，清空表格和校验
+        this.resetForm()
+        this.$nextTick(() => {
+          this.$refs['dataForm'].clearValidate()
+        })
+      } else if (this.dialogStatus === 'update') {
+      // 更新时，填充数据
+        console.log(row)
+        this.AreaPersonliableForm.id = row.id
+        this.AreaPersonliableForm.areaId = row.areaId
+        this.AreaPersonliableForm.areaName = row.areaName
+        this.AreaPersonliableForm.userId = row.userId
+      }
+    },
+    resetForm() {
+      this.AreaPersonliableForm = {
+        id: '',
+        areaId: '',
+        areaName: '',
+        userId: ''
+      }
+    },
+    fetchUserList() {
+      getSupervisorList().then(response => {
+        this.userList = response.data
+      })
+    },
+    openAreaSelect() {
+      this.areaSelectShow = true
+      setTimeout(this.$refs.areaSelect.initDialog(), 200)
+    },
+    selectArea(node) {
+      this.AreaPersonliableForm.areaId = node.id
+      this.AreaPersonliableForm.areaName = node.name
+    },
+    cancel() {
+      this.dialogFormVisible = false
+    },
+    saveData() {
+      if (this.dialogStatus === 'create') {
+        this.createData()
+      } else if (this.dialogStatus === 'update') {
+        this.updateData()
+      }
+    },
+    createData() {
+      this.$refs['dataForm'].validate(valid => {
+        if (valid) {
+          console.log('create valid success')
+          console.log(this.AreaPersonliableForm)
+          addAreaPersonliable(this.AreaPersonliableForm).then(response => {
+            if (response.code === 200) {
+              this.$message.success('添加成功')
+              this.$emit('watchChild')
+              this.dialogFormVisible = false
+            } else {
+              this.$message.error(response.message)
+            }
+          })
+        } else {
+          console.log('create valid error')
+        }
+      })
+    },
+    updateData() {
+      console.log('update data')
+      this.$refs['dataForm'].validate(valid => {
+        if (valid) {
+          console.log('update valid success')
+          console.log(this.AreaPersonliableForm)
+          updateAreaPersonliable(this.AreaPersonliableForm).then(response => {
+            if (response.code === 200) {
+              this.$message.success('修改成功')
+              this.$emit('watchChild')
+              this.dialogFormVisible = false
+            } else {
+              this.$message.error('修改失败')
+            }
+          })
+        } else {
+          console.log('update valid error')
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.el-form-item {
+  margin-bottom: 22px;
+  margin-left: 20px;
+  margin-right: 50px;
+}
+</style>
diff --git a/src/views/callCase/callCase.vue b/src/views/callCase/callCase.vue
new file mode 100644
index 0000000..513b6b3
--- /dev/null
+++ b/src/views/callCase/callCase.vue
@@ -0,0 +1,651 @@
+<template>
+  <div class="main-form">
+    <el-form ref="dataForm" :model="caseForm" :label-position="labelPosition" :rules="rules" label-width="120px">
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <el-form-item label="举报人" prop="reporterName">
+            <el-input v-model.trim="caseForm.reporterName" type="text" placeholder="必填" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="联系电话" prop="reporterPhone">
+            <el-input v-model.trim="caseForm.reporterPhone" type="text" placeholder="必填" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-button type="primary">历史记录</el-button>
+          <el-button type="primary" @click="openMapQueryDialog">地图查询</el-button>
+        </el-col>
+      </el-row>
+
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <el-form-item label="信息来源" prop="source">
+            <el-select v-model="caseForm.source" placeholder="选择信息来源" clearable value="">
+              <el-option
+                v-for="item in caseSourceOpts"
+                :key="item.value"
+                :label="item.name"
+                :value="item.value"/>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="案卷等级" prop="caseLevel">
+            <el-select v-model="caseForm.caseLevel" placeholder="选择案卷等级" value="">
+              <el-option
+                v-for="item in caseLevelOpts"
+                :key="item.value"
+                :label="item.name"
+                :value="item.value"/>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="是否核实">
+            <div>
+              <el-radio-group v-model="caseForm.isNeedVerify" @change="changeNeedVerify()">
+                <el-radio-button label="1">需要</el-radio-button>
+                <el-radio-button label="0">不需要</el-radio-button>
+              </el-radio-group>
+            </div>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="是否回访">
+            <div>
+              <el-radio-group v-model="caseForm.isNeedRevisit">
+                <el-radio-button label="1">需要</el-radio-button>
+                <el-radio-button label="0">不需要</el-radio-button>
+              </el-radio-group>
+            </div>
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <el-row :gutter="20">
+
+        <el-col :span="6">
+          <el-form-item label="所在区县" prop="areaCode">
+            <el-select v-model="caseForm.areaCode" placeholder="选择所在区县" value="">
+              <el-option key="361029" label="东乡区" value="361029"/>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="所在街道" prop="streetCode">
+            <el-select v-model="caseForm.streetCode" placeholder="选择所在街道" value="">
+              <el-option key="361029001" label="孝岗镇" value="361029001"/>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="所在社区" prop="communityName">
+            <el-input v-model="caseForm.communityName" type="text" placeholder="必填" readonly />
+          </el-form-item>
+        </el-col>
+        <el-col v-if="caseForm.componentId !== ''" :span="6">
+          <el-form-item label="部件编码">
+            <el-input v-model="caseForm.componentId" type="text" placeholder="必填" readonly />
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <el-row :gutter="20">
+        <el-col v-if="showVerifyPerson" :span="6">
+          <el-form-item label="监督员" prop="verifyPersonId">
+            <el-select v-model="caseForm.verifyPersonId" type="text" placeholder="选择监督员" filterable clearable value="">
+              <el-option
+                v-for="item in verifyPersonOpts"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id">
+                <span style="float: left">{{ item.name }}</span>
+                <span style="float: right; color: #999999; font-size: 13px">{{ item.id }}</span>
+              </el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="案卷类别" prop="eorc">
+            <el-select v-model="caseForm.eorc" placeholder="选择案卷类别" value="">
+              <el-option
+                v-for="item in caseEorCOpts"
+                :key="item.value"
+                :label="item.name"
+                :value="item.value"/>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="案卷大类" prop="caseType">
+            <el-select v-model="caseForm.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-col :span="6">
+          <el-form-item label="案卷小类" prop="caseDetailType">
+            <el-select v-model="caseForm.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-row v-if="showCaseTypesTime" :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="立案标准" prop="casetypesTimeId">
+            <el-select v-model="caseForm.casetypesTimeId" placeholder="选择立案标准" clearable value="" style="width: 100%">
+              <el-option
+                v-for="item in caseTypeTimeOpts"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id"/>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="处理时限" prop="bzhours">
+            <el-input-number v-model="caseForm.bzhours" :min="0" style="margin-right: 5px" />小时
+            <el-input-number v-model="caseForm.bzminis" :min="0" :max="59" style="margin-left: 20px; margin-right: 5px" />分钟
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <el-row :gutter="20">
+        <el-col :span="18">
+          <el-form-item label="案卷描述" prop="description">
+            <el-input v-model.trim="caseForm.description" type="textarea" placeholder="必填" clearable />
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <el-row :gutter="20">
+        <el-col :span="18">
+          <el-form-item label="位置描述" prop="fieldintro">
+            <el-input v-model.trim="caseForm.fieldintro" type="text" placeholder="必填" clearable />
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <el-row :gutter="20">
+        <el-col :span="24">
+          <el-form-item label="图片信息" prop="images">
+            <el-upload
+              ref="upload"
+              :before-upload="handleBeforeUpload"
+              :on-preview="handlePictureCardPreview"
+              :on-remove="handleRemove"
+              :on-exceed="handleExceed"
+              :on-success="handleSuccess"
+              :limit="2"
+              :http-request="uploadFile"
+              action="string"
+              multiple
+              accept=".jpg,.jpeg,.png "
+              list-type="picture-card">
+              <i class="el-icon-plus"/>
+            </el-upload>
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <el-row :gutter="20">
+        <el-col :span="18" style="margin-left: 120px; margin-bottom: 40px; text-align: center;">
+          <el-button type="primary" size="medium" icon="el-icon-check" style="width: 200px;" @click="saveData"> 提交 </el-button>
+        </el-col>
+      </el-row>
+
+    </el-form>
+
+    <el-dialog :visible.sync="dialogVisible" title="图片预览" append-to-body>
+      <div class="imgBox">
+        <img :src="dialogImageUrl" max-height="400px;" alt="" style="margin: 0 auto;">
+      </div>
+    </el-dialog>
+
+    <el-dialog
+      :visible.sync="mapDialogVisible"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+      title="地图查询"
+      width="80%"
+      append-to-body>
+
+      <arcgis-map-comp
+        ref="mapComp"
+        @closeMapQueryDialogByEvent="closeMapQueryDialogByEvent"
+        @closeMapQueryDialogByComp="closeMapQueryDialogByComp"/>
+
+    </el-dialog>
+
+  </div>
+</template>
+
+<script>
+import { getCaseSource, getCaseLevel, getCaseEorC, getCaseType, getCaseDetailType, getCaseTypesTime, getVerifyPerson, addCase } from '@/api/callCase/callCase'
+import { Uploadimg } from '@/api/common'
+import ArcgisMapComp from '@/components/Map/ArcGISMap'
+
+export default {
+  name: 'CallCase',
+  components: {// 注册组件
+    ArcgisMapComp: ArcgisMapComp
+  },
+  data() {
+    const phoneValidator = (rule, value, callback) => {
+      if (value !== '') {
+        if ((/^[1][3,5,6,7,8,9][0-9]{9}$/).test(value) === false) {
+          callback(new Error('举报人电话格式不正确'))
+        } else {
+          callback()
+        }
+      } else {
+        callback(new Error('举报人电话不能为空'))
+      }
+    }
+    return {
+      caseForm: {
+        reporterName: '', // 举报人姓名
+        reporterPhone: '', // 举报人电话
+        isNeedVerify: '1', // 是否需要核实
+        isNeedRevisit: '1', // 是否需要回访
+        lng: '', // 经度，
+        lat: '', // 纬度
+        source: '', // 案卷信息来源
+        caseLevel: '', // 案卷等级
+        eorc: '', // 案卷类别
+        casetypeCode: '', // 案卷大类编码,
+        casetypeDetailCode: '', // 案卷小类编码
+        areaCode: '361029', // 所属区县ID
+        streetCode: '361029001', // 所属街道ID
+        communityCode: '', // 所属社区编码
+        communityName: '', // 所属社区NAME
+        gridId: '', // 万米网格ID（单元网格）
+        componentId: '', // 部件ID
+        casetypesTimeId: '', // 立案标准ID
+        bzhours: 0, // 限制完成总时限（小时）
+        bzminis: 0, // 限制完成总时限（分钟）
+        description: '', // 案件描述
+        fieldintro: '', // 位置描述
+        verifyPersonId: '', // 核实人员id
+        photos: '' // 图片存储的地址
+      }, // 表单
+      rules: {
+        reporterName: [{ required: true, message: '举报人姓名不能为空', trigger: ['blur'] }],
+        reporterPhone: [{ required: true, trigger: ['blur'], validator: phoneValidator }],
+        source: [{ required: true, message: '信息来源不能为空', trigger: ['change'] }],
+        caseLevel: [{ required: true, message: '案卷等级不能为空', trigger: ['change'] }],
+        eorc: [{ required: true, message: '案卷类别不能为空', trigger: ['change'] }],
+        description: [{ required: true, message: '案卷描述不能为空', trigger: ['blur'] }],
+        fieldintro: [{ required: true, message: '位置描述不能为空', trigger: ['blur'] }]
+      }, // 表单验证
+      hideUpload: false,
+      fileList: [],
+      imageList: [],
+      uploadPath: process.env.BASE_API + 'imageUpload', // 图片上传路径
+      dialogImageUrl: '',
+      dialogVisible: false,
+      mapDialogVisible: false, // 地图对话框
+      labelPosition: 'right',
+      caseSourceOpts: [], // 案卷来源下拉框
+      caseLevelOpts: [], // 案卷等级下拉框
+      caseEorCOpts: [], // 案卷类别下拉框
+      caseTypeOpts: [], // 案卷大类下拉框
+      caseDetailTypeOpts: [], // 案卷小类下拉框
+      caseTypeTimeOpts: [], // 立案标准下拉框
+      verifyPersonOpts: [], // 监督员下拉框
+      showVerifyPerson: true,
+      showCaseTypesTime: false,
+      caseTypeCodeAuto: '', // 自动生成的案卷大类代码
+      caseTypeDetailCodeAuto: '' // 自动生成的案卷小类代码
+    }
+  },
+  computed: {
+    caseLevel() {
+      return this.caseForm.caseLevel
+    },
+    eorc() {
+      return this.caseForm.eorc
+    },
+    caseType() {
+      return this.caseForm.casetypeCode
+    },
+    caseTypeDetail() {
+      return this.caseForm.casetypeDetailCode
+    },
+    caseTypeDetailTime() {
+      return this.caseForm.casetypesTimeId
+    }
+  },
+  watch: {
+    caseLevel(level) {
+      this.calculateTime(this.caseForm.casetypesTimeId)
+    },
+    eorc(eorcVal) {
+      this.cascaderCaseType(eorcVal)
+    },
+    caseType(typeVal) {
+      this.cascaderCaseDetailType(typeVal)
+    },
+    caseTypeDetail(detailVal) {
+      this.cascaderCaseDetailTypeTime(detailVal)
+    },
+    caseTypeDetailTime(timeVal) {
+      this.calculateTime(timeVal)
+    }
+  },
+  mounted: function() {
+    this.initCaseSource()
+    this.initCaseLevel()
+    this.initCaseEorC()
+    this.initVerifyPerson()
+  },
+  methods: {
+    initCaseSource: function() {
+      getCaseSource().then(response => {
+        this.caseSourceOpts = []
+        for (const opt of response.data) {
+          this.caseSourceOpts.push(opt)
+          if (opt.name.indexOf('电话') >= 0) {
+            this.caseForm.source = opt.value
+          }
+        }
+      })
+    },
+    initCaseLevel: function() {
+      getCaseLevel().then(response => {
+        this.caseLevelOpts = []
+        for (const opt of response.data) {
+          this.caseLevelOpts.push(opt)
+          if (opt.name.indexOf('一般') >= 0) {
+            this.caseForm.caseLevel = opt.value
+          }
+        }
+      })
+    },
+    initCaseEorC: function() {
+      getCaseEorC().then(response => {
+        this.caseEorCOpts = []
+        for (const opt of response.data) {
+          this.caseEorCOpts.push(opt)
+        }
+      })
+    },
+    initVerifyPerson: function() {
+      getVerifyPerson().then(response => {
+        this.verifyPersonOpts = []
+        console.log(response)
+        for (const opt of response.data) {
+          this.verifyPersonOpts.push(opt)
+        }
+      })
+    },
+    // 级联查询案卷大类
+    cascaderCaseType: function(eorc) {
+      // 前两行的作用是清除案卷大类的当前值和select中的所有选项
+      this.caseTypeOpts = []
+      this.caseForm.casetypeCode = ''
+      // 以下两行的作用是清除案卷小类的当前值和select中的所有选项
+      this.caseDetailTypeOpts = []
+      this.caseForm.casetypeDetailCode = ''
+      // 以下两行是清除案卷时限（小时和分钟）
+      this.caseTypeTimeOpts = []
+      this.caseForm.casetypesTimeId = ''
+      this.caseForm.bzhours = 0
+      this.caseForm.bzminis = 0
+
+      // 若事部件选择的值不为空，则查询相应的案卷大类
+      if (eorc !== null && eorc.length > 0) {
+        getCaseType(eorc).then(response => {
+          for (const opt of response.data) {
+            this.caseTypeOpts.push(opt)
+
+            if (opt.typeCode === this.caseTypeCodeAuto) {
+              this.caseForm.casetypeCode = opt.typeCode
+            }
+          }
+        })
+      }
+    },
+    cascaderCaseDetailType: function(typeCode) {
+      // 以下两行的作用是清除案卷小类的当前值和select中的所有选项
+      this.caseDetailTypeOpts = []
+      this.caseForm.casetypeDetailCode = ''
+      // 以下两行是清除案卷时限（小时和分钟）
+      this.caseTypeTimeOpts = []
+      this.caseForm.casetypesTimeId = ''
+      this.caseForm.bzhours = 0
+      this.caseForm.bzminis = 0
+
+      // 根据code获取ID，进行级联查询
+      let typeId = 0
+      this.caseTypeOpts.forEach(item => {
+        if (item.typeCode === typeCode) {
+          typeId = item.id
+        }
+      })
+
+      if (typeId > 0) {
+        getCaseDetailType(typeId).then(response => {
+          for (const opt of response.data) {
+            this.caseDetailTypeOpts.push(opt)
+
+            if (opt.typeDetailCode === this.caseTypeDetailCodeAuto) {
+              this.caseForm.casetypeDetailCode = opt.typeDetailCode
+            }
+          }
+        })
+      }
+    },
+    // 查询立案标准
+    cascaderCaseDetailTypeTime: function(detailCode) {
+      // 以下两行是清除案卷时限（小时和分钟）
+      this.caseTypeTimeOpts = []
+      this.caseForm.casetypesTimeId = ''
+      this.caseForm.bzhours = 0
+      this.caseForm.bzminis = 0
+
+      // 根据code获取ID，进行级联查询
+      let typeDetailId = 0
+      this.caseDetailTypeOpts.forEach(item => {
+        if (item.typeDetailCode === detailCode) {
+          typeDetailId = item.id
+        }
+      })
+
+      if (typeDetailId > 0) {
+        getCaseTypesTime(typeDetailId).then(response => {
+          console.log(response)
+          for (const opt of response.data) {
+            this.caseTypeTimeOpts.push(opt)
+          }
+        })
+      }
+    },
+    calculateTime: function(timeVal) {
+      const hoursPerDay = this.caseForm.caseLevel === '1' ? 8 : 24
+      let day = 0
+      let hours = 0
+      this.caseTypeTimeOpts.forEach(item => {
+        if (item.id === timeVal) {
+          day = item.day
+          hours = item.hours
+        }
+      })
+
+      this.caseForm.bzhours = hoursPerDay * parseInt(day) + parseInt(hours)
+    },
+    // 打开地图查询对话框显示地图
+    openMapQueryDialog: function() {
+      this.mapDialogVisible = true
+    },
+    // 关闭地图查询对话框
+    closeMapQueryDialogByEvent: function(longitude, latitude, communityId, communityName, gridId) {
+      this.mapDialogVisible = false
+
+      // 赋值
+      this.caseForm.eorc = '1' // 事件点返回时案卷类别自动选择为事件
+      this.caseForm.communityCode = communityId
+      this.caseForm.communityName = communityName
+      this.caseForm.gridId = gridId
+      this.caseForm.lng = longitude
+      this.caseForm.lat = latitude
+
+      this.caseForm.areaCode = communityId.substring(0, 6) // 区县代码
+      this.caseForm.streetCode = communityId.substring(0, 9) // 街道代码
+    },
+    // 关闭地图查询对话框
+    closeMapQueryDialogByComp: function(longitude, latitude, communityId, communityName, gridId, componentId, componentName) {
+      this.mapDialogVisible = false
+
+      // 赋值
+      this.caseForm.eorc = '2' // 部件点返回时案卷类别自动选择为部件
+      this.caseForm.communityCode = communityId
+      this.caseForm.communityName = communityName
+      this.caseForm.gridId = gridId
+      this.caseForm.lng = longitude
+      this.caseForm.lat = latitude
+      this.caseForm.componentId = componentId
+      this.caseForm.componentName = componentName
+
+      this.caseForm.areaCode = communityId.substring(0, 6) // 区县代码
+      this.caseForm.streetCode = communityId.substring(0, 9) // 街道代码
+      this.caseTypeCodeAuto = componentId.substring(6, 8) // 自动赋值部件大类
+      this.caseTypeDetailCodeAuto = componentId.substring(8, 10) // 自动赋值部件小类
+    },
+    // 修改是否需要核实
+    changeNeedVerify: function() {
+      if (this.caseForm.isNeedVerify === '0') {
+        // 不需要核实，显示立案标准、处理时限
+        this.showVerifyPerson = false
+        this.showCaseTypesTime = true
+      } else {
+        this.showVerifyPerson = true
+        this.showCaseTypesTime = false
+      }
+    },
+    // 保存数据
+    saveData: function() {
+      const that = this
+      if (this.fileList.length > 0) {
+        let photos = ''
+        this.fileList.forEach(photo => {
+          photos += photo.url + ','
+        })
+        this.caseForm.photos = photos.substring(0, photos.length - 1)
+      }
+
+      this.$refs['dataForm'].validate((valid) => {
+        console.log(valid)
+        if (valid) {
+          addCase(this.caseForm).then(function(response) {
+            if (response.code === 200) {
+              that.$message({
+                message: '添加案卷成功',
+                type: 'success'
+              })
+
+              that.$router.push({ path: '/dashboard' })
+            } else {
+              that.$message({
+                message: '添加案卷失败',
+                type: 'error'
+              })
+            }
+          })
+        }
+      })
+    },
+    // 图片上传
+    uploadFile(file) {
+      console.log('uploadFile:' + file.file.name)
+      // const base_url = process.env.BASE_API + '/static/'
+      Uploadimg(file).then(res => {
+        console.log(res)
+        if (res.code === 200) {
+          this.fileList.push({ name: file.file.name, url: res.data })
+        }
+      })
+    },
+    // 上传前判断文件格式及大小
+    handleBeforeUpload(file) {
+      const isJPG = (file.type === 'image/jpeg') || (file.type === 'image/png')
+      let res = true
+      const isLt2M = file.size / 1024 / 1024 < 2
+      if (!isJPG) {
+        this.$message.error('上传图片只能是 JPG 或 PNG 格式!')
+        res = false
+      }
+      if (!isLt2M) {
+        this.$message.error('上传图片大小不能超过 2MB!')
+        res = false
+      }
+      for (const i in this.fileList) {
+        if (this.fileList[i].name === file.name) {
+          this.$message.error('该图片已上传过，请选择其他图片')
+          res = false
+        }
+      }
+      return res
+    },
+    // 文件列表移除文件时的钩子
+    handleRemove(file, fileList) {
+      console.log('handleRemove')
+      for (const i in this.fileList) {
+        if (this.fileList[i].name === file.name) {
+          this.fileList.splice(i, 1)
+          this.hideUpload = this.fileList.length >= 2
+          return
+        }
+      }
+      this.handleChange()
+    },
+    // 限制提示
+    handleExceed(files, fileList) {
+      console.log('handleExceed')
+      this.$message.warning(`限制选择 2 张图片，本次选择了 ${files.length} 张图片，共选择了 ${files.length + fileList.length} 张图片`)
+    },
+    // 点击文件列表中已上传的文件时的钩子
+    handlePictureCardPreview(file) {
+      console.log('handlePictureCardPreview')
+      this.dialogImageUrl = file.url
+      this.dialogVisible = true
+    },
+    handleChange(file, fileList) {
+      console.log('handleChange')
+      if (fileList) {
+        this.hideUpload = fileList.length >= 2
+      } else {
+        this.hideUpload = false
+      }
+    },
+    handleSuccess(response, file, fileList) {
+      console.log('handleSuccess')
+      console.log(response)
+      const base_url = process.env.BASE_API + '/static/'
+      if (response.code === 200) {
+        this.fileList.push({ name: file.file.name, url: base_url + response.data })
+        this.handleChange()
+      } else {
+        this.$message.warning(response.message)
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .main-form{
+    margin: 20px;
+  }
+</style>
diff --git a/src/views/caseCommon/caseDetailRead.vue b/src/views/caseCommon/caseDetailRead.vue
index 33473eb..e4b71cc 100644
--- a/src/views/caseCommon/caseDetailRead.vue
+++ b/src/views/caseCommon/caseDetailRead.vue
@@ -158,11 +158,11 @@
 
 <script>
 import { getCaseDetail } from '@/api/coorBusiness/case'
-import ArcGisMap from '@/components/Map/arcgisMap'
+import ArcGisMapRead from '@/components/Map/arcgisMapRead'
 
 export default {
   name: 'CaseDetail',
-  components: { ArcGisMap },
+  components: { ArcGisMapRead },
   data() {
     return {
       id: '',
diff --git a/src/views/caseCommon/caseDetailSupervise.vue b/src/views/caseCommon/caseDetailSupervise.vue
index 0ec1fe4..1175cef 100644
--- a/src/views/caseCommon/caseDetailSupervise.vue
+++ b/src/views/caseCommon/caseDetailSupervise.vue
@@ -195,11 +195,11 @@
 import { getCommonLanguage } from '@/api/coorBusiness/dict'
 import { historicalRecords } from '@/api/coorBusiness/process'
 import { superviseCaseTask } from '@/api/supervise/supervise'
-import ArcGisMap from '@/components/Map/arcgisMap'
+import ArcGisMapRead from '@/components/Map/arcgisMapRead'
 
 export default {
   name: 'CaseDetail',
-  components: { ArcGisMap },
+  components: { ArcGisMapRead },
   data() {
     return {
       id: '',
diff --git a/src/views/otherComment/highFreq/highFreqChart.vue b/src/views/otherComment/highFreq/highFreqChart.vue
index 6d81057..1ec175d 100644
--- a/src/views/otherComment/highFreq/highFreqChart.vue
+++ b/src/views/otherComment/highFreq/highFreqChart.vue
@@ -38,6 +38,7 @@
         tooltip: {
           show: true
         },
+        // color: ['red', 'green', 'yellow', 'blueviolet'],
         series: [{
           name: '高发问题',
           type: 'pie',

diff --git a/src/api/busAdmin/areaPersonliable.js b/src/api/busAdmin/areaPersonliable.js
new file mode 100644
index 0000000..58737bb
--- /dev/null
+++ b/src/api/busAdmin/areaPersonliable.js
@@ -0,0 +1,45 @@
+import request from '@/utils/request'
+
+export function getAreaPersonliableList(params) {
+  return request({
+    url: '/areaPersonliable/listPage',
+    method: 'get',
+    params
+  })
+}
+
+export function addAreaPersonliable(params) {
+  return request({
+    url: '/areaPersonliable/add',
+    method: 'post',
+    params
+  })
+}
+
+export function updateAreaPersonliable(params) {
+  return request({
+    url: '/areaPersonliable/update',
+    method: 'post',
+    params
+  })
+}
+
+export function deleteAreaPersonliable(id) {
+  return request({
+    url: '/areaPersonliable/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
+
+export function getSupervisorList() {
+  return request({
+    url: '/mgr/simplelist',
+    method: 'post',
+    params: {
+      roleTips: 'supervisor'
+    }
+  })
+}
diff --git a/src/api/callCase/callCase.js b/src/api/callCase/callCase.js
new file mode 100644
index 0000000..7500fc7
--- /dev/null
+++ b/src/api/callCase/callCase.js
@@ -0,0 +1,87 @@
+/**
+ * 新建案卷的接口
+ */
+import request from '@/utils/request'
+
+// 获取案卷信息来源
+export function getCaseSource(params) {
+  return request({
+    url: 'dict/code/caseSource',
+    method: 'get',
+    params
+  })
+}
+
+// 获取案卷等级
+export function getCaseLevel(params) {
+  return request({
+    url: 'dict/code/caseLevel',
+    method: 'get',
+    params
+  })
+}
+
+// 获取案卷类别
+export function getCaseEorC(params) {
+  return request({
+    url: 'dict/code/eorc',
+    method: 'get',
+    params
+  })
+}
+
+// 根据案卷类别获取案卷大类
+export function getCaseType(eorc) {
+  return request({
+    url: 'case/type/list',
+    method: 'get',
+    params: {
+      eorc: eorc
+    }
+  })
+}
+
+// 根据案卷大类获取案卷小类
+export function getCaseDetailType(caseTypeId) {
+  return request({
+    url: 'case/typeDetail/list',
+    method: 'get',
+    params: {
+      typeId: caseTypeId
+    }
+  })
+}
+
+// 根据案卷小类获取结案标准
+export function getCaseTypesTime(caseTypeDetailId) {
+  return request({
+    url: 'case/typesTime/list',
+    method: 'get',
+    params: {
+      detailId: caseTypeDetailId
+    }
+  })
+}
+
+// 获取监督员列表
+export function getVerifyPerson(params) {
+  return request({
+    url: 'mgr/simplelist',
+    method: 'post',
+    params: {
+      roleTips: 'supervisor'
+    }
+  })
+}
+
+// 新增案卷
+export function addCase(params) {
+  return request({
+    url: 'case/add',
+    method: 'post',
+    headers: {
+      'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
+    },
+    params
+  })
+}
diff --git a/src/api/coorBusiness/case.js b/src/api/coorBusiness/case.js
index ec5a88a..08c3a13 100644
--- a/src/api/coorBusiness/case.js
+++ b/src/api/coorBusiness/case.js
@@ -110,9 +110,10 @@
   })
 }
 
+// 待处理
 export function toHandleListPage(params) {
   return request({
-    url: 'case/toHandleListPage/',
+    url: 'case/toProcessListPage/',
     method: 'get',
     params
   })
@@ -158,9 +159,10 @@
   })
 }
 
+// 待核查
 export function toCheckListPage(params) {
   return request({
-    url: 'case/toCheckListPage/',
+    url: 'case/toDisCheckListPage/',
     method: 'get',
     params
   })
diff --git a/src/components/CaseCommon/caseDetail.vue b/src/components/CaseCommon/caseDetail.vue
index f6c23ab..fdadcba 100644
--- a/src/components/CaseCommon/caseDetail.vue
+++ b/src/components/CaseCommon/caseDetail.vue
@@ -276,7 +276,7 @@
     </el-row>
     <el-row>
       <div class="title">数据流转:</div>
-      <el-table :data="recordList" :header-cell-style="{background:'#f3f3f3'}" class="table" border>
+      <el-table :data="recordList" :header-cell-style="{background:'#f3f3f3'}" max-height="400" class="table" border>
         <el-table-column prop="operationTypeName" label="操作" align="center"/>
         <el-table-column prop="deptName" label="单位" align="center"/>
         <el-table-column prop="userName" label="人员" align="center"/>
@@ -293,7 +293,7 @@
       :append-to-body="true"
       title="位置详情"
     >
-      <arc-gis-map :longitude="Number(caseDetail.lng)" :latitude="Number(caseDetail.lat)"/>
+      <arc-gis-map-read :longitude="Number(caseDetail.lng)" :latitude="Number(caseDetail.lat)"/>
     </el-dialog>
   </div>
 </template>
@@ -303,12 +303,12 @@
 import { getCaseDetail, getUserList, getDeptList, getCaseTypeList, getCaseTypeDetailList, getCaseTypeTimes } from '@/api/coorBusiness/case'
 import { getCommonLanguage, getFilingTypeList, getCaseLevelList } from '@/api/coorBusiness/dict'
 import { historicalRecords, nextNodes, completeCaseTask } from '@/api/coorBusiness/process'
-import ArcGisMap from '@/components/Map/arcgisMap'
+import ArcGisMapRead from '@/components/Map/arcgisMapRead'
 import { radioMap } from './radioMap'
 
 export default {
   name: 'CaseDetail',
-  components: { ArcGisMap },
+  components: { ArcGisMapRead },
   // props: {
   //   id: {
   //     type: String,
@@ -334,7 +334,6 @@
       showNeedVisit: false,
       caseDetail: {},
       operationKey: '', // 案件处理按钮key
-      imgurl: 'http:\\\\192.168.8.201:8083\\static\\',
       fileIdVerify: [], // 核实照片id
       fileIdProcess: [], // 处理照片id
       fileIdCheck: [], // 核查照片id
@@ -358,10 +357,12 @@
   computed: {
     isNeedVisit: function() {
       return this.caseDetail.isNeedRevisit === 1 ? '需要回访' : '不需要回访'
+    },
+    imgurl() {
+      return process.env.BASE_API + '/static/'
     }
   },
-  mounted() {
-    console.log('case dtial')
+  created() {
     this.id = this.$route.query.id
     this.showProcess = (this.$route.query.showProcess || this.$route.query.showProcess === false) ? this.$route.query.showProcess : true
     this.showNeedVisit = this.$route.query.showNeedVisit ? this.$route.query.showNeedVisit : false
@@ -371,7 +372,6 @@
     async initData() {
       // 查询案件详情接口
       const resDetail = await getCaseDetail(this.id)
-      console.log('detail', resDetail)
       this.caseDetail = resDetail.data[0]
 
       // 解析图片id
@@ -391,9 +391,11 @@
 
       // 查询流转记录接口
       this.processForm.processId = this.caseDetail.processId
-      const resRecord = await historicalRecords(this.processForm.processId)
-      this.recordList = resRecord.data
-      console.log(this.recordList)
+      // const resRecord = historicalRecords(this.processForm.processId)
+      // this.recordList = resRecord.data
+      historicalRecords(this.processForm.processId).then(res => {
+        this.recordList = res.data
+      })
 
       if (this.showProcess) {
         this.initProcess()
@@ -701,6 +703,7 @@
   .table{
     margin: 20px;
     width: 98%;
+    // max-height: 250px;
   }
   .title{
     margin-left: 38px;
diff --git a/src/components/CaseCommon/caseDetailRead.vue b/src/components/CaseCommon/caseDetailRead.vue
index 82066db..a4e87b0 100644
--- a/src/components/CaseCommon/caseDetailRead.vue
+++ b/src/components/CaseCommon/caseDetailRead.vue
@@ -158,11 +158,11 @@
 
 <script>
 import { getCaseDetail } from '@/api/coorBusiness/case'
-import ArcGisMap from '@/components/Map/arcgisMap'
+import ArcGisMapRead from '@/components/Map/arcgisMapRead'
 
 export default {
   name: 'CaseDetail',
-  components: { ArcGisMap },
+  components: { ArcGisMapRead },
   props: {
     id: {
       type: String,
diff --git a/src/components/Map/ArcGISConfig.js b/src/components/Map/ArcGISConfig.js
index d325da9..50cea3b 100644
--- a/src/components/Map/ArcGISConfig.js
+++ b/src/components/Map/ArcGISConfig.js
@@ -1,14 +1,16 @@
 export const mapConfig = {
-  apiUrl: 'https://js.arcgis.com/4.13/', // 暂时使用管网提供的api，实际部署时建议离线部署一套
+  apiUrl: 'http://192.168.8.205/arcgis_js_api/library/4.12/init.js', // 暂时使用管网提供的api，实际部署时建议离线部署一套
+  // apiUrl: 'https://js.arcgis.com/4.13/',
   mapIp: '223.84.218.107', // 服务ip
   mapPort: '6080', // 服务端口
-  serverBase: 'http://223.84.218.107:6080/arcgis/rest/services/', // 服务地址前缀
+  serverBase: 'http://192.168.8.205:6080/arcgis/rest/services/', // 服务地址前缀
+  // serverBase: 'http://223.84.218.107:6080/arcgis/rest/services/dx/',
   mapCenter: '[116.597,28.24]' // 地图中心点
 }
 
 export const serverConfig = {
-  mapUrlBase: mapConfig.serverBase + 'dx/2w/MapServer', // 底图服务地址
-  mapUrlBj: mapConfig.serverBase + 'dx/dxbj/MapServer', // 部件服务地址
-  mapUrlBjfc: mapConfig.serverBase + 'dx/bjfc/MapServer', // 部件分层服务地址
-  mapUrlBjEdit: mapConfig.serverBase + 'dx/dxbj/FeatureServer' // 可编辑的部件图层
+  mapUrlBase: mapConfig.serverBase + '2w/MapServer', // 底图服务地址
+  mapUrlBj: mapConfig.serverBase + 'dxbj/MapServer', // 部件服务地址
+  mapUrlBjfc: mapConfig.serverBase + 'bjfc/MapServer', // 部件分层服务地址
+  mapUrlBjEdit: mapConfig.serverBase + 'dxbj/FeatureServer' // 可编辑的部件图层
 }
diff --git a/src/components/Map/arcgisMap.vue b/src/components/Map/arcgisMap.vue
index 53776f1..5c15383 100644
--- a/src/components/Map/arcgisMap.vue
+++ b/src/components/Map/arcgisMap.vue
@@ -1,6 +1,6 @@
 <template>
-  <div style="margin-top:-30px">
-    <!-- <el-row :gutter="20">
+  <div>
+    <el-row :gutter="20">
       <el-col :span="4">
         <el-input v-model="keywords" size="small" type="text" placeholder="兴趣点关键字" clearable />
       </el-col>
@@ -31,9 +31,9 @@
       <el-col v-if="queryEventSwitch === '1'" :span="8" style="text-align: right;">
         <el-button type="primary" size="small" @click="checkEventPoint"> 事件提交 </el-button>
       </el-col>
-    </el-row> -->
+    </el-row>
 
-    <div v-loading="mapLoading" ref="mapDiv" class="baseMap" />
+    <div ref="mapDiv" class="baseMap" />
   </div>
 </template>
 
@@ -45,22 +45,12 @@
   url: mapConfig.apiUrl
 }
 
-// const eventPointLayerId = 'eventPointLayer' // 事件定位点的图层id
-// const queryResultLayerId = 'queryResultLayer' // 兴趣点查询结果点集的图层id
+const eventPointLayerId = 'eventPointLayer' // 事件定位点的图层id
+const queryResultLayerId = 'queryResultLayer' // 兴趣点查询结果点集的图层id
 const caseLayerId = 'addedGeometryLayerId' // 案卷点图层
 
 export default {
-  name: 'ArcGisMap',
-  props: {
-    longitude: {
-      type: Number,
-      default: 116.5937
-    },
-    latitude: {
-      type: Number,
-      default: 28.249
-    }
-  },
+  name: 'ArcGISMap',
   data() {
     return {
       map: '',
@@ -89,19 +79,18 @@
         IdentifyParameters: '',
         MapView: ''
       },
-      mapLoading: false
-      // keywords: '', // 查询关键字
-      // showEventPointPopup: true, // 是否显示事部件的popup
-      // queryEventSwitch: '1', // 1==查询事件；0==查询部件
-      // compListOpts: [], // 部件选择下拉框option
+      keywords: '', // 查询关键字
+      showEventPointPopup: true, // 是否显示事部件的popup
+      queryEventSwitch: '1', // 1==查询事件；0==查询部件
+      compListOpts: [], // 部件选择下拉框option
       // 主页面返回值
-      // longitude: '', // 定位点经度
-      // latitude: '' // 定位点纬度
-      // communityId: '', // 社区ID
-      // communityName: '', // 社区名称
-      // gridId: '', // 单元网格ID
-      // componentId: '', // 部件ID
-      // componentName: '' // 部件名称/=
+      longitude: '', // 定位点经度
+      latitude: '', // 定位点纬度
+      communityId: '', // 社区ID
+      communityName: '', // 社区名称
+      gridId: '', // 单元网格ID
+      componentId: '', // 部件ID
+      componentName: '' // 部件名称
     }
   },
   mounted() {
@@ -110,7 +99,6 @@
   methods: {
     // 初始化ArcGIS API对象
     importEsri: function() {
-      this.mapLoading = true
       loadModules([
         'esri/Map',
         'esri/Basemap',
@@ -164,10 +152,8 @@
 
           // 初始化地图
           this.initMap()
-          this.mapLoading = false
         }).catch(err => {
           console.log(err)
-          this.mapLoading = false
         })
     },
     // 初始化地图
@@ -194,139 +180,139 @@
         zoom: 3 // 当前地图缩放等级
       })
 
-      // const that = this
-      // this.view.on('click', function(event) {
-      //   // 清除地图上已有的事件/部件查询点
-      //   that.clearEOrCPoint()
+      const that = this
+      this.view.on('click', function(event) {
+        // 清除地图上已有的事件/部件查询点
+        that.clearEOrCPoint()
 
-      //   const lon = event.mapPoint.longitude
-      //   const lat = event.mapPoint.latitude
+        const lon = event.mapPoint.longitude
+        const lat = event.mapPoint.latitude
 
-      //   if (that.showEventPointPopup) {
-      //     // 添加点
-      //     const gLayer = new that.esriObj.GraphicsLayer()
-      //     const marker = new that.esriObj.SimpleMarkerSymbol()
-      //     marker.color = '#35A0E7'
-      //     marker.style = 'square'
-      //     marker.outline = {
-      //       color: [128, 128, 128, 0.5],
-      //       width: '2px'
-      //     }
-      //     const graphic = new that.esriObj.Graphic({
-      //       geometry: event.mapPoint,
-      //       symbol: marker
-      //     })
+        if (that.showEventPointPopup) {
+          // 添加点
+          const gLayer = new that.esriObj.GraphicsLayer()
+          const marker = new that.esriObj.SimpleMarkerSymbol()
+          marker.color = '#35A0E7'
+          marker.style = 'square'
+          marker.outline = {
+            color: [128, 128, 128, 0.5],
+            width: '2px'
+          }
+          const graphic = new that.esriObj.Graphic({
+            geometry: event.mapPoint,
+            symbol: marker
+          })
 
-      //     gLayer.id = eventPointLayerId
-      //     gLayer.add(graphic)
-      //     that.map.add(gLayer)
+          gLayer.id = eventPointLayerId
+          gLayer.add(graphic)
+          that.map.add(gLayer)
 
-      //     // 查询事件或者部件
-      //     if (that.queryEventSwitch === '1') {
-      //       // 事件定位
-      //       // 1查询底图得到所在网格与所在社区
-      //       const query = that.layers.dx2wGrid.createQuery()
-      //       query.geometry = that.view.toMap(event)
-      //       query.distance = 10
-      //       query.units = 'meters'
-      //       query.returnGeometry = true
-      //       query.outFields = ['BGID', 'COMMUID', 'COMMUNAME']
-      //       that.layers.dx2wGrid.queryFeatures(query)
-      //         .then(function(response) {
-      //           const result = response.features[0].attributes
+          // 查询事件或者部件
+          if (that.queryEventSwitch === '1') {
+            // 事件定位
+            // 1查询底图得到所在网格与所在社区
+            const query = that.layers.dx2wGrid.createQuery()
+            query.geometry = that.view.toMap(event)
+            query.distance = 10
+            query.units = 'meters'
+            query.returnGeometry = true
+            query.outFields = ['BGID', 'COMMUID', 'COMMUNAME']
+            that.layers.dx2wGrid.queryFeatures(query)
+              .then(function(response) {
+                const result = response.features[0].attributes
 
-      //           // 赋值
-      //           that.longitude = lon
-      //           that.latitude = lat
-      //           that.gridId = result.BGID
-      //           that.communityId = result.COMMUID
-      //           that.communityName = result.COMMUNAME
+                // 赋值
+                that.longitude = lon
+                that.latitude = lat
+                that.gridId = result.BGID
+                that.communityId = result.COMMUID
+                that.communityName = result.COMMUNAME
 
-      //           // 2弹出气泡
-      //           that.view.popup.open({
-      //             title: '事件定位',
-      //             content: '坐标：[' + lon.toFixed(4) + ', ' + lat.toFixed(4) + ']' + '<p>' + '所在社区：' + result.COMMUNAME,
-      //             location: event.mapPoint
-      //           })
-      //         })
-      //     } else if (that.queryEventSwitch === '0') {
-      //       // 部件定位
-      //       const queryDev = that.layers.dxbjPoint.createQuery()
-      //       // 定义查询的圆形范围，半径5米
-      //       const circle = new that.esriObj.Circle({
-      //         center: event.mapPoint,
-      //         radius: 5,
-      //         radiusUnit: 'meters'
-      //       })
-      //       queryDev.geometry = circle
-      //       queryDev.returnGeometry = true
-      //       queryDev.outFields = ['BGID', 'OBJID', 'OBJNAME', 'OBJPOS']
-      //       that.layers.dxbjPoint.queryFeatures(queryDev)
-      //         .then(function(response) {
-      //           if (response.features.length > 0) {
-      //             const results = response.features
+                // 2弹出气泡
+                that.view.popup.open({
+                  title: '事件定位',
+                  content: '坐标：[' + lon.toFixed(4) + ', ' + lat.toFixed(4) + ']' + '<p>' + '所在社区：' + result.COMMUNAME,
+                  location: event.mapPoint
+                })
+              })
+          } else if (that.queryEventSwitch === '0') {
+            // 部件定位
+            const queryDev = that.layers.dxbjPoint.createQuery()
+            // 定义查询的圆形范围，半径5米
+            const circle = new that.esriObj.Circle({
+              center: event.mapPoint,
+              radius: 5,
+              radiusUnit: 'meters'
+            })
+            queryDev.geometry = circle
+            queryDev.returnGeometry = true
+            queryDev.outFields = ['BGID', 'OBJID', 'OBJNAME', 'OBJPOS']
+            that.layers.dxbjPoint.queryFeatures(queryDev)
+              .then(function(response) {
+                if (response.features.length > 0) {
+                  const results = response.features
 
-      //             that.compListOpts = []
+                  that.compListOpts = []
 
-      //             let content = ''
-      //             results.forEach((item, index) => {
-      //               content += '<p>部件' + (index + 1) + '：' + item.attributes.OBJNAME + '，' + item.attributes.OBJPOS
-      //               const comp = {}
-      //               comp.name = '部件' + (index + 1) + '：' + item.attributes.OBJNAME
-      //               comp.value = item.attributes.OBJID
-      //               that.compListOpts.push(comp)
-      //             })
+                  let content = ''
+                  results.forEach((item, index) => {
+                    content += '<p>部件' + (index + 1) + '：' + item.attributes.OBJNAME + '，' + item.attributes.OBJPOS
+                    const comp = {}
+                    comp.name = '部件' + (index + 1) + '：' + item.attributes.OBJNAME
+                    comp.value = item.attributes.OBJID
+                    that.compListOpts.push(comp)
+                  })
 
-      //             // 2弹出气泡
-      //             that.view.popup.open({
-      //               title: '部件定位',
-      //               content: '坐标：[' + lon.toFixed(4) + ', ' + lat.toFixed(4) + ']，附近5米的部件有：' + content,
-      //               location: event.mapPoint
-      //             })
+                  // 2弹出气泡
+                  that.view.popup.open({
+                    title: '部件定位',
+                    content: '坐标：[' + lon.toFixed(4) + ', ' + lat.toFixed(4) + ']，附近5米的部件有：' + content,
+                    location: event.mapPoint
+                  })
 
-      //             // 查询所在社区和单元网格
-      //             const queryPos = that.layers.dx2wGrid.createQuery()
-      //             queryPos.geometry = that.view.toMap(event)
-      //             queryPos.returnGeometry = true
-      //             queryPos.outFields = ['BGID', 'COMMUID', 'COMMUNAME']
-      //             that.layers.dx2wGrid.queryFeatures(queryPos)
-      //               .then(function(response) {
-      //                 const result = response.features[0].attributes
+                  // 查询所在社区和单元网格
+                  const queryPos = that.layers.dx2wGrid.createQuery()
+                  queryPos.geometry = that.view.toMap(event)
+                  queryPos.returnGeometry = true
+                  queryPos.outFields = ['BGID', 'COMMUID', 'COMMUNAME']
+                  that.layers.dx2wGrid.queryFeatures(queryPos)
+                    .then(function(response) {
+                      const result = response.features[0].attributes
 
-      //                 // 赋值
-      //                 that.longitude = lon
-      //                 that.latitude = lat
-      //                 that.gridId = result.BGID
-      //                 that.communityId = result.COMMUID
-      //                 that.communityName = result.COMMUNAME
-      //               })
-      //           } else {
-      //             that.$message({
-      //               message: '没有查询到部件，请重新定位',
-      //               type: 'warning'
-      //             })
-      //           }
-      //         })
-      //     }
-      //   } else {
-      //     that.view.hitTest(event).then(function(response) {
-      //       if (response.results.length) {
-      //         const graphic = response.results[0].graphic
-      //         const name = graphic.attributes.KEYWORD
-      //         const address = graphic.attributes.OBJPOS
+                      // 赋值
+                      that.longitude = lon
+                      that.latitude = lat
+                      that.gridId = result.BGID
+                      that.communityId = result.COMMUID
+                      that.communityName = result.COMMUNAME
+                    })
+                } else {
+                  that.$message({
+                    message: '没有查询到部件，请重新定位',
+                    type: 'warning'
+                  })
+                }
+              })
+          }
+        } else {
+          that.view.hitTest(event).then(function(response) {
+            if (response.results.length) {
+              const graphic = response.results[0].graphic
+              const name = graphic.attributes.KEYWORD
+              const address = graphic.attributes.OBJPOS
 
-      //         that.view.popup.open({
-      //           title: name,
-      //           content: address,
-      //           location: event.mapPoint
-      //         })
-      //       }
-      //     })
-      //   }
-      // })
+              that.view.popup.open({
+                title: name,
+                content: address,
+                location: event.mapPoint
+              })
+            }
+          })
+        }
+      })
 
       this.addBjLayers()
-      this.addCasePointOnMap(this.longitude, this.latitude)
+      // this.addCasePointOnMap(116.5937, 28.249)
     },
     // 加载部件服务的各图层
     addBjLayers: function() {
@@ -347,160 +333,159 @@
         url: serverConfig.mapUrlBj + '/3',
         id: 'dxbjMph'
       })
-      // this.layers.dx2wGrid = new this.esriObj.FeatureLayer({
-      //   url: serverConfig.mapUrlBase + '/6',
-      //   id: 'gridLayer'
-      // })
+      this.layers.dx2wGrid = new this.esriObj.FeatureLayer({
+        url: serverConfig.mapUrlBase + '/1',
+        id: 'gridLayer'
+      })
 
       // 加载各图层
       this.map.add(this.layers.dxbjPoint)
       this.map.add(this.layers.dxbjLine)
       this.map.add(this.layers.dxbjXqd)
       this.map.add(this.layers.dxbjMph)
-      // this.map.add(this.layers.dx2wGrid)
+      this.map.add(this.layers.dx2wGrid)
     },
     // 在兴趣点图层查询关键字
-    // queryOnMap: function() {
-    //   const points = [] // 查询结果点集
+    queryOnMap: function() {
+      const points = [] // 查询结果点集
 
-    //   this.clearQueryResults()
-    //   this.clearEOrCPoint()
-    //   this.showEventPointPopup = false
-    //   this.queryEventSwitch = '2'
+      this.clearQueryResults()
+      this.clearEOrCPoint()
+      this.showEventPointPopup = false
+      this.queryEventSwitch = '2'
 
-    //   // 查询条件
-    //   const query = new this.esriObj.Query()
-    //   query.returnGeometry = true
-    //   query.outFields = ['*']
-    //   query.where = 'NAME like ' + "'%" + this.keywords + "%'"
-    //   const that = this
+      // 查询条件
+      const query = new this.esriObj.Query()
+      query.returnGeometry = true
+      query.outFields = ['*']
+      query.where = 'NAME like ' + "'%" + this.keywords + "%'"
+      const that = this
 
-    //   this.layers.dxbjXqd.queryFeatures(query).then(function(results) {
-    //     results.features.forEach(item => {
-    //       const point = {}
-    //       point.x = item.geometry.longitude
-    //       point.y = item.geometry.latitude
-    //       point.attr = item.attributes
-    //       points.push(point)
-    //     })
+      this.layers.dxbjXqd.queryFeatures(query).then(function(results) {
+        results.features.forEach(item => {
+          const point = {}
+          point.x = item.geometry.longitude
+          point.y = item.geometry.latitude
+          point.attr = item.attributes
+          points.push(point)
+        })
 
-    //     // 提示查询结果
-    //     if (points.length > 0) {
-    //       that.$message({
-    //         message: '成功查询到' + points.length + '条记录',
-    //         type: 'success'
-    //       })
+        // 提示查询结果
+        if (points.length > 0) {
+          that.$message({
+            message: '成功查询到' + points.length + '条记录',
+            type: 'success'
+          })
 
-    //       // 绘制点
-    //       that.addSimpleMarkerOnMap(points)
-    //     } else {
-    //       that.$message({
-    //         message: '没有查询到结果，请重新输入关键字',
-    //         type: 'warning'
-    //       })
-    //     }
-    //   })
-    // },
+          // 绘制点
+          that.addSimpleMarkerOnMap(points)
+        } else {
+          that.$message({
+            message: '没有查询到结果，请重新输入关键字',
+            type: 'warning'
+          })
+        }
+      })
+    },
     // 清除图层上的查询结果
-    // clearQueryResults: function() {
-    //   this.map.layers.forEach(layer => {
-    //     if (layer.type === 'graphics' && layer.id === queryResultLayerId) {
-    //       layer.graphics.removeAll()
-    //       return false
-    //     }
-    //   })
-    // },
-    // // 清除图层上的查询结果
-    // clearMap: function() {
-    //   // 清除地图上绘制的graphic图层
-    //   this.map.layers.forEach(layer => {
-    //     if (layer.type === 'graphics') {
-    //       layer.graphics.removeAll()
-    //       return false
-    //     }
-    //   })
+    clearQueryResults: function() {
+      this.map.layers.forEach(layer => {
+        if (layer.type === 'graphics' && layer.id === queryResultLayerId) {
+          layer.graphics.removeAll()
+          return false
+        }
+      })
+    },
+    // 清除图层上的查询结果
+    clearMap: function() {
+      // 清除地图上绘制的graphic图层
+      this.map.layers.forEach(layer => {
+        if (layer.type === 'graphics') {
+          layer.graphics.removeAll()
+          return false
+        }
+      })
 
-    //   // 清除弹出框
-    //   this.view.popup.close()
+      // 清除弹出框
+      this.view.popup.close()
 
-    //   // 清除data属性值
-    //   this.keywords = ''
-    //   this.showEventPointPopup = true // 是否显示事部件的popup
-    //   this.queryEventSwitch = '1' // 1==查询事件；0==查询部件
-    //   this.compListOpts = [] // 部件选择下拉框option
-    //   this.longitude = '' // 定位点经度
-    //   this.latitude = '' // 定位点纬度
-    //   this.communityId = '' // 社区ID
-    //   this.communityName = '' // 社区名称
-    //   this.gridId = '' // 单元网格ID
-    //   this.componentId = '' // 部件ID
-    //   this.componentName = '' // 部件名称
-    // },
+      // 清除data属性值
+      this.keywords = ''
+      this.showEventPointPopup = true // 是否显示事部件的popup
+      this.queryEventSwitch = '1' // 1==查询事件；0==查询部件
+      this.compListOpts = [] // 部件选择下拉框option
+      this.longitude = '' // 定位点经度
+      this.latitude = '' // 定位点纬度
+      this.communityId = '' // 社区ID
+      this.communityName = '' // 社区名称
+      this.gridId = '' // 单元网格ID
+      this.componentId = '' // 部件ID
+      this.componentName = '' // 部件名称
+    },
     // 清除图层上的事件定位点
-    // clearEOrCPoint: function() {
-    //   this.map.layers.forEach(layer => {
-    //     if (layer.type === 'graphics' && layer.id === eventPointLayerId) {
-    //       layer.graphics.removeAll()
-    //       return false
-    //     }
-    //   })
-    //   // 清除弹出框
-    //   this.view.popup.close()
-    // },
+    clearEOrCPoint: function() {
+      this.map.layers.forEach(layer => {
+        if (layer.type === 'graphics' && layer.id === eventPointLayerId) {
+          layer.graphics.removeAll()
+          return false
+        }
+      })
+      // 清除弹出框
+      this.view.popup.close()
+    },
     // 切换
-    // switchEventOrComponent: function() {
-    //   // 如果选中的是事件定位（1）或部件定位（0），点击地图时弹出事件或者部件的popup；否则（2以上）显示兴趣点结果的属性popup
-    //   this.showEventPointPopup = this.queryEventSwitch < 2
-    // },
+    switchEventOrComponent: function() {
+      // 如果选中的是事件定位（1）或部件定位（0），点击地图时弹出事件或者部件的popup；否则（2以上）显示兴趣点结果的属性popup
+      this.showEventPointPopup = this.queryEventSwitch < 2
+    },
     // 将查询结果点集合绘制在地图上
-    // addSimpleMarkerOnMap: function(points) {
-    //   const gLayer = new this.esriObj.GraphicsLayer()
-    //   points.forEach(item => {
-    //     const point = new this.esriObj.Point(item.x, item.y, item.attr)
-    //     const marker = new this.esriObj.SimpleMarkerSymbol()
-    //     marker.color = '#F9690E'
-    //     marker.outline = {
-    //       color: [128, 128, 128, 0.5],
-    //       width: '2px'
-    //     }
-    //     const graphic = new this.esriObj.Graphic({
-    //       geometry: point,
-    //       symbol: marker,
-    //       attributes: item.attr
-    //     })
-    //     gLayer.id = queryResultLayerId
-    //     gLayer.add(graphic)
-    //   })
-    //   this.map.add(gLayer)
-    // },
+    addSimpleMarkerOnMap: function(points) {
+      const gLayer = new this.esriObj.GraphicsLayer()
+      points.forEach(item => {
+        const point = new this.esriObj.Point(item.x, item.y, item.attr)
+        const marker = new this.esriObj.SimpleMarkerSymbol()
+        marker.color = '#F9690E'
+        marker.outline = {
+          color: [128, 128, 128, 0.5],
+          width: '2px'
+        }
+        const graphic = new this.esriObj.Graphic({
+          geometry: point,
+          symbol: marker,
+          attributes: item.attr
+        })
+        gLayer.id = queryResultLayerId
+        gLayer.add(graphic)
+      })
+      this.map.add(gLayer)
+    },
     // 返回事件定位的结果
-    // checkEventPoint: function() {
-    //   this.$emit(
-    //     'closeMapQueryDialogByEvent',
-    //     this.longitude,
-    //     this.latitude,
-    //     this.communityId,
-    //     this.communityName,
-    //     this.gridId)
+    checkEventPoint: function() {
+      this.$emit(
+        'closeMapQueryDialogByEvent',
+        this.longitude,
+        this.latitude,
+        this.communityId,
+        this.communityName,
+        this.gridId)
 
-    //   this.clearMap()
-    // },
-    // // 返回部件定位的结果
-    // checkComponentPoint: function() {
-    //   this.$emit(
-    //     'closeMapQueryDialogByComp',
-    //     this.longitude,
-    //     this.latitude,
-    //     this.communityId,
-    //     this.communityName,
-    //     this.gridId,
-    //     this.componentId)
+      this.clearMap()
+    },
+    // 返回部件定位的结果
+    checkComponentPoint: function() {
+      this.$emit(
+        'closeMapQueryDialogByComp',
+        this.longitude,
+        this.latitude,
+        this.communityId,
+        this.communityName,
+        this.gridId,
+        this.componentId)
 
-    //   this.clearMap()
-    // },
+      this.clearMap()
+    },
     // 在地图上添加指定坐标的点
     addCasePointOnMap: function(lng, lat) {
-      console.log('addCasePointOnMap', lng, lat)
       const gLayer = new this.esriObj.GraphicsLayer() // 添加自定义绘制点的图层
       const point = new this.esriObj.Point(lng, lat) // 创建geometry对象
       const marker = new this.esriObj.SimpleMarkerSymbol() // 创建marker标识
@@ -521,14 +506,14 @@
 
       // 重新设置地图中心点并移动
       this.view.center = point
-      this.view.goTo(point)
+      this.view.goTo()
     }
   }
 }
 </script>
 
 <style scoped>
-  @import 'https://js.arcgis.com/4.13/esri/css/main.css';
+  @import 'http://192.168.8.205/arcgis_js_api/library/4.12/esri/css/main.css';
   .baseMap {
     height:60vh;
     width: 100%;
diff --git a/src/components/Map/arcgisMapRead.vue b/src/components/Map/arcgisMapRead.vue
new file mode 100644
index 0000000..ae2058b
--- /dev/null
+++ b/src/components/Map/arcgisMapRead.vue
@@ -0,0 +1,539 @@
+<template>
+  <div style="margin-top:-30px">
+    <!-- <el-row :gutter="20">
+      <el-col :span="4">
+        <el-input v-model="keywords" size="small" type="text" placeholder="兴趣点关键字" clearable />
+      </el-col>
+      <el-col :span="4">
+        <el-button type="primary" size="small" @click="queryOnMap">查询</el-button>
+        <el-button type="info" size="small" @click="clearMap"> 清除地图 </el-button>
+      </el-col>
+
+      <el-col :span="8" style="text-align: center;">
+        <el-radio-group v-model="queryEventSwitch" size="small" @change="switchEventOrComponent">
+          <el-radio-button label="1">事件定位</el-radio-button>
+          <el-radio-button label="0">部件定位</el-radio-button>
+          <el-radio-button label="2">兴趣点属性</el-radio-button>
+        </el-radio-group>
+      </el-col>
+
+      <el-col v-if="queryEventSwitch === '0'" :span="8" style="text-align: right;">
+        <el-select v-model="componentId" placeholder="选择部件" clearable value="" size="small">
+          <el-option
+            v-for="item in compListOpts"
+            :key="item.value"
+            :label="item.name"
+            :value="item.value"/>
+        </el-select>
+        <el-button type="primary" size="small" @click="checkComponentPoint"> 部件提交 </el-button>
+      </el-col>
+
+      <el-col v-if="queryEventSwitch === '1'" :span="8" style="text-align: right;">
+        <el-button type="primary" size="small" @click="checkEventPoint"> 事件提交 </el-button>
+      </el-col>
+    </el-row> -->
+
+    <div v-loading="mapLoading" ref="mapDiv" class="baseMap" />
+  </div>
+</template>
+
+<script>
+import { loadModules } from 'esri-loader'
+import { mapConfig, serverConfig } from './ArcGISConfig'
+
+const option = {
+  url: mapConfig.apiUrl
+}
+
+// const eventPointLayerId = 'eventPointLayer' // 事件定位点的图层id
+// const queryResultLayerId = 'queryResultLayer' // 兴趣点查询结果点集的图层id
+const caseLayerId = 'addedGeometryLayerId' // 案卷点图层
+
+export default {
+  name: 'ArcGisMapRead',
+  props: {
+    longitude: {
+      type: Number,
+      default: 116.5937
+    },
+    latitude: {
+      type: Number,
+      default: 28.249
+    }
+  },
+  data() {
+    return {
+      map: '',
+      view: '',
+      layers: {
+        dxbjPoint: '', // 部件点图层
+        dxbjLine: '', // 部件线图层
+        dxbjXqd: '', // 兴趣点图层
+        dxbjMph: '', // 门牌好图层
+        dx2wGrid: '' // 单元网格图层
+      },
+      esriObj: {
+        Map: '',
+        BaseMap: '',
+        Graphic: '',
+        PopupTemplate: '',
+        Circle: '',
+        Point: '',
+        FeatureLayer: '',
+        GraphicsLayer: '',
+        TileLayer: '',
+        SimpleMarkerSymbol: '',
+        Query: '',
+        QueryTask: '',
+        IdentifyTask: '',
+        IdentifyParameters: '',
+        MapView: ''
+      },
+      mapLoading: false
+      // keywords: '', // 查询关键字
+      // showEventPointPopup: true, // 是否显示事部件的popup
+      // queryEventSwitch: '1', // 1==查询事件；0==查询部件
+      // compListOpts: [], // 部件选择下拉框option
+      // 主页面返回值
+      // longitude: '', // 定位点经度
+      // latitude: '' // 定位点纬度
+      // communityId: '', // 社区ID
+      // communityName: '', // 社区名称
+      // gridId: '', // 单元网格ID
+      // componentId: '', // 部件ID
+      // componentName: '' // 部件名称/=
+    }
+  },
+  mounted() {
+    this.importEsri()
+  },
+  methods: {
+    // 初始化ArcGIS API对象
+    importEsri: function() {
+      this.mapLoading = true
+      loadModules([
+        'esri/Map',
+        'esri/Basemap',
+        'esri/Graphic',
+        'esri/PopupTemplate',
+        'esri/geometry/Circle',
+        'esri/geometry/Point',
+        'esri/layers/FeatureLayer',
+        'esri/layers/GraphicsLayer',
+        'esri/layers/TileLayer',
+        'esri/symbols/SimpleMarkerSymbol',
+        'esri/tasks/support/Query',
+        'esri/tasks/QueryTask',
+        'esri/tasks/IdentifyTask',
+        'esri/tasks/support/IdentifyParameters',
+        'esri/views/MapView',
+        'dojo/domReady!'
+      ], option)
+        .then(([
+          Map,
+          BaseMap,
+          Graphic,
+          PopupTemplate,
+          Circle,
+          Point,
+          FeatureLayer,
+          GraphicsLayer,
+          TileLayer,
+          SimpleMarkerSymbol,
+          Query,
+          QueryTask,
+          IdentifyTask,
+          IdentifyParameters,
+          MapView
+        ]) => {
+          this.esriObj.Map = Map
+          this.esriObj.BaseMap = BaseMap
+          this.esriObj.Graphic = Graphic
+          this.esriObj.PopupTemplate = PopupTemplate
+          this.esriObj.Circle = Circle
+          this.esriObj.Point = Point
+          this.esriObj.FeatureLayer = FeatureLayer
+          this.esriObj.GraphicsLayer = GraphicsLayer
+          this.esriObj.TileLayer = TileLayer
+          this.esriObj.SimpleMarkerSymbol = SimpleMarkerSymbol
+          this.esriObj.Query = Query
+          this.esriObj.QueryTask = QueryTask
+          this.esriObj.IdentifyTask = IdentifyTask
+          this.esriObj.IdentifyParameters = IdentifyParameters
+          this.esriObj.MapView = MapView
+
+          // 初始化地图
+          this.initMap()
+          this.mapLoading = false
+        }).catch(err => {
+          console.log(err)
+          this.mapLoading = false
+        })
+    },
+    // 初始化地图
+    initMap: function() {
+      const base = new this.esriObj.BaseMap({
+        baseLayers: [
+          new this.esriObj.TileLayer({ // 可配置属性，见TileLayer类
+            id: '2w',
+            url: serverConfig.mapUrlBase
+          })
+        ],
+        title: 'dx2w',
+        id: 'dx2w'
+      })
+
+      this.map = new this.esriObj.Map({
+        basemap: base // 底图类型，详见BaseMap类
+      })
+
+      this.view = new this.esriObj.MapView({
+        container: this.$refs.mapDiv, // 视图的容器
+        map: this.map, // Map的实例放入视图中
+        center: [116.597, 28.24], // 初始显示的地图中心点，经纬度
+        zoom: 3 // 当前地图缩放等级
+      })
+
+      // const that = this
+      // this.view.on('click', function(event) {
+      //   // 清除地图上已有的事件/部件查询点
+      //   that.clearEOrCPoint()
+
+      //   const lon = event.mapPoint.longitude
+      //   const lat = event.mapPoint.latitude
+
+      //   if (that.showEventPointPopup) {
+      //     // 添加点
+      //     const gLayer = new that.esriObj.GraphicsLayer()
+      //     const marker = new that.esriObj.SimpleMarkerSymbol()
+      //     marker.color = '#35A0E7'
+      //     marker.style = 'square'
+      //     marker.outline = {
+      //       color: [128, 128, 128, 0.5],
+      //       width: '2px'
+      //     }
+      //     const graphic = new that.esriObj.Graphic({
+      //       geometry: event.mapPoint,
+      //       symbol: marker
+      //     })
+
+      //     gLayer.id = eventPointLayerId
+      //     gLayer.add(graphic)
+      //     that.map.add(gLayer)
+
+      //     // 查询事件或者部件
+      //     if (that.queryEventSwitch === '1') {
+      //       // 事件定位
+      //       // 1查询底图得到所在网格与所在社区
+      //       const query = that.layers.dx2wGrid.createQuery()
+      //       query.geometry = that.view.toMap(event)
+      //       query.distance = 10
+      //       query.units = 'meters'
+      //       query.returnGeometry = true
+      //       query.outFields = ['BGID', 'COMMUID', 'COMMUNAME']
+      //       that.layers.dx2wGrid.queryFeatures(query)
+      //         .then(function(response) {
+      //           const result = response.features[0].attributes
+
+      //           // 赋值
+      //           that.longitude = lon
+      //           that.latitude = lat
+      //           that.gridId = result.BGID
+      //           that.communityId = result.COMMUID
+      //           that.communityName = result.COMMUNAME
+
+      //           // 2弹出气泡
+      //           that.view.popup.open({
+      //             title: '事件定位',
+      //             content: '坐标：[' + lon.toFixed(4) + ', ' + lat.toFixed(4) + ']' + '<p>' + '所在社区：' + result.COMMUNAME,
+      //             location: event.mapPoint
+      //           })
+      //         })
+      //     } else if (that.queryEventSwitch === '0') {
+      //       // 部件定位
+      //       const queryDev = that.layers.dxbjPoint.createQuery()
+      //       // 定义查询的圆形范围，半径5米
+      //       const circle = new that.esriObj.Circle({
+      //         center: event.mapPoint,
+      //         radius: 5,
+      //         radiusUnit: 'meters'
+      //       })
+      //       queryDev.geometry = circle
+      //       queryDev.returnGeometry = true
+      //       queryDev.outFields = ['BGID', 'OBJID', 'OBJNAME', 'OBJPOS']
+      //       that.layers.dxbjPoint.queryFeatures(queryDev)
+      //         .then(function(response) {
+      //           if (response.features.length > 0) {
+      //             const results = response.features
+
+      //             that.compListOpts = []
+
+      //             let content = ''
+      //             results.forEach((item, index) => {
+      //               content += '<p>部件' + (index + 1) + '：' + item.attributes.OBJNAME + '，' + item.attributes.OBJPOS
+      //               const comp = {}
+      //               comp.name = '部件' + (index + 1) + '：' + item.attributes.OBJNAME
+      //               comp.value = item.attributes.OBJID
+      //               that.compListOpts.push(comp)
+      //             })
+
+      //             // 2弹出气泡
+      //             that.view.popup.open({
+      //               title: '部件定位',
+      //               content: '坐标：[' + lon.toFixed(4) + ', ' + lat.toFixed(4) + ']，附近5米的部件有：' + content,
+      //               location: event.mapPoint
+      //             })
+
+      //             // 查询所在社区和单元网格
+      //             const queryPos = that.layers.dx2wGrid.createQuery()
+      //             queryPos.geometry = that.view.toMap(event)
+      //             queryPos.returnGeometry = true
+      //             queryPos.outFields = ['BGID', 'COMMUID', 'COMMUNAME']
+      //             that.layers.dx2wGrid.queryFeatures(queryPos)
+      //               .then(function(response) {
+      //                 const result = response.features[0].attributes
+
+      //                 // 赋值
+      //                 that.longitude = lon
+      //                 that.latitude = lat
+      //                 that.gridId = result.BGID
+      //                 that.communityId = result.COMMUID
+      //                 that.communityName = result.COMMUNAME
+      //               })
+      //           } else {
+      //             that.$message({
+      //               message: '没有查询到部件，请重新定位',
+      //               type: 'warning'
+      //             })
+      //           }
+      //         })
+      //     }
+      //   } else {
+      //     that.view.hitTest(event).then(function(response) {
+      //       if (response.results.length) {
+      //         const graphic = response.results[0].graphic
+      //         const name = graphic.attributes.KEYWORD
+      //         const address = graphic.attributes.OBJPOS
+
+      //         that.view.popup.open({
+      //           title: name,
+      //           content: address,
+      //           location: event.mapPoint
+      //         })
+      //       }
+      //     })
+      //   }
+      // })
+
+      this.addBjLayers()
+      this.addCasePointOnMap(this.longitude, this.latitude)
+    },
+    // 加载部件服务的各图层
+    addBjLayers: function() {
+      // 此处可以优化
+      this.layers.dxbjPoint = new this.esriObj.FeatureLayer({ // 可配置属性，见TileLayer类
+        url: serverConfig.mapUrlBj + '/0',
+        id: 'dxbjPoint'
+      })
+      this.layers.dxbjLine = new this.esriObj.FeatureLayer({ // 可配置属性，见TileLayer类
+        url: serverConfig.mapUrlBj + '/1',
+        id: 'dxbjLine'
+      })
+      this.layers.dxbjXqd = new this.esriObj.FeatureLayer({ // 可配置属性，见TileLayer类
+        url: serverConfig.mapUrlBj + '/2',
+        id: 'dxbjXqd'
+      })
+      this.layers.dxbjMph = new this.esriObj.FeatureLayer({ // 可配置属性，见TileLayer类
+        url: serverConfig.mapUrlBj + '/3',
+        id: 'dxbjMph'
+      })
+      // this.layers.dx2wGrid = new this.esriObj.FeatureLayer({
+      //   url: serverConfig.mapUrlBase + '/6',
+      //   id: 'gridLayer'
+      // })
+
+      // 加载各图层
+      this.map.add(this.layers.dxbjPoint)
+      this.map.add(this.layers.dxbjLine)
+      this.map.add(this.layers.dxbjXqd)
+      this.map.add(this.layers.dxbjMph)
+      // this.map.add(this.layers.dx2wGrid)
+    },
+    // 在兴趣点图层查询关键字
+    // queryOnMap: function() {
+    //   const points = [] // 查询结果点集
+
+    //   this.clearQueryResults()
+    //   this.clearEOrCPoint()
+    //   this.showEventPointPopup = false
+    //   this.queryEventSwitch = '2'
+
+    //   // 查询条件
+    //   const query = new this.esriObj.Query()
+    //   query.returnGeometry = true
+    //   query.outFields = ['*']
+    //   query.where = 'NAME like ' + "'%" + this.keywords + "%'"
+    //   const that = this
+
+    //   this.layers.dxbjXqd.queryFeatures(query).then(function(results) {
+    //     results.features.forEach(item => {
+    //       const point = {}
+    //       point.x = item.geometry.longitude
+    //       point.y = item.geometry.latitude
+    //       point.attr = item.attributes
+    //       points.push(point)
+    //     })
+
+    //     // 提示查询结果
+    //     if (points.length > 0) {
+    //       that.$message({
+    //         message: '成功查询到' + points.length + '条记录',
+    //         type: 'success'
+    //       })
+
+    //       // 绘制点
+    //       that.addSimpleMarkerOnMap(points)
+    //     } else {
+    //       that.$message({
+    //         message: '没有查询到结果，请重新输入关键字',
+    //         type: 'warning'
+    //       })
+    //     }
+    //   })
+    // },
+    // 清除图层上的查询结果
+    // clearQueryResults: function() {
+    //   this.map.layers.forEach(layer => {
+    //     if (layer.type === 'graphics' && layer.id === queryResultLayerId) {
+    //       layer.graphics.removeAll()
+    //       return false
+    //     }
+    //   })
+    // },
+    // // 清除图层上的查询结果
+    // clearMap: function() {
+    //   // 清除地图上绘制的graphic图层
+    //   this.map.layers.forEach(layer => {
+    //     if (layer.type === 'graphics') {
+    //       layer.graphics.removeAll()
+    //       return false
+    //     }
+    //   })
+
+    //   // 清除弹出框
+    //   this.view.popup.close()
+
+    //   // 清除data属性值
+    //   this.keywords = ''
+    //   this.showEventPointPopup = true // 是否显示事部件的popup
+    //   this.queryEventSwitch = '1' // 1==查询事件；0==查询部件
+    //   this.compListOpts = [] // 部件选择下拉框option
+    //   this.longitude = '' // 定位点经度
+    //   this.latitude = '' // 定位点纬度
+    //   this.communityId = '' // 社区ID
+    //   this.communityName = '' // 社区名称
+    //   this.gridId = '' // 单元网格ID
+    //   this.componentId = '' // 部件ID
+    //   this.componentName = '' // 部件名称
+    // },
+    // 清除图层上的事件定位点
+    // clearEOrCPoint: function() {
+    //   this.map.layers.forEach(layer => {
+    //     if (layer.type === 'graphics' && layer.id === eventPointLayerId) {
+    //       layer.graphics.removeAll()
+    //       return false
+    //     }
+    //   })
+    //   // 清除弹出框
+    //   this.view.popup.close()
+    // },
+    // 切换
+    // switchEventOrComponent: function() {
+    //   // 如果选中的是事件定位（1）或部件定位（0），点击地图时弹出事件或者部件的popup；否则（2以上）显示兴趣点结果的属性popup
+    //   this.showEventPointPopup = this.queryEventSwitch < 2
+    // },
+    // 将查询结果点集合绘制在地图上
+    // addSimpleMarkerOnMap: function(points) {
+    //   const gLayer = new this.esriObj.GraphicsLayer()
+    //   points.forEach(item => {
+    //     const point = new this.esriObj.Point(item.x, item.y, item.attr)
+    //     const marker = new this.esriObj.SimpleMarkerSymbol()
+    //     marker.color = '#F9690E'
+    //     marker.outline = {
+    //       color: [128, 128, 128, 0.5],
+    //       width: '2px'
+    //     }
+    //     const graphic = new this.esriObj.Graphic({
+    //       geometry: point,
+    //       symbol: marker,
+    //       attributes: item.attr
+    //     })
+    //     gLayer.id = queryResultLayerId
+    //     gLayer.add(graphic)
+    //   })
+    //   this.map.add(gLayer)
+    // },
+    // 返回事件定位的结果
+    // checkEventPoint: function() {
+    //   this.$emit(
+    //     'closeMapQueryDialogByEvent',
+    //     this.longitude,
+    //     this.latitude,
+    //     this.communityId,
+    //     this.communityName,
+    //     this.gridId)
+
+    //   this.clearMap()
+    // },
+    // // 返回部件定位的结果
+    // checkComponentPoint: function() {
+    //   this.$emit(
+    //     'closeMapQueryDialogByComp',
+    //     this.longitude,
+    //     this.latitude,
+    //     this.communityId,
+    //     this.communityName,
+    //     this.gridId,
+    //     this.componentId)
+
+    //   this.clearMap()
+    // },
+    // 在地图上添加指定坐标的点
+    addCasePointOnMap: function(lng, lat) {
+      console.log('addCasePointOnMap', lng, lat)
+      const gLayer = new this.esriObj.GraphicsLayer() // 添加自定义绘制点的图层
+      const point = new this.esriObj.Point(lng, lat) // 创建geometry对象
+      const marker = new this.esriObj.SimpleMarkerSymbol() // 创建marker标识
+      // marker属性
+      marker.color = '#F9690E'
+      marker.outline = {
+        color: [128, 128, 128, 0.5],
+        width: '2px'
+      }
+      // 创建graphic对象
+      const graphic = new this.esriObj.Graphic({
+        geometry: point,
+        symbol: marker
+      })
+      gLayer.id = caseLayerId // 标识案卷图层
+      gLayer.add(graphic) // 图层上添加对象
+      this.map.add(gLayer) // 地图上添加图层
+
+      // 重新设置地图中心点并移动
+      this.view.center = point
+      this.view.goTo(point)
+    }
+  }
+}
+</script>
+
+<style scoped>
+  @import 'https://js.arcgis.com/4.13/esri/css/main.css';
+  .baseMap {
+    height:60vh;
+    width: 100%;
+    margin-top: 25px;
+    border: 1px solid #DCDCDC;
+    border-radius: 4px;
+  }
+</style>
diff --git a/src/router/index.js b/src/router/index.js
index b265a48..1c80473 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -11,6 +11,7 @@
 import { systemRouters } from './modules/system'
 import { cooRouters } from './modules/coo'
 import { commenetRouters } from './modules/comment'
+import { suphandleRouters } from './modules/suphandle'
 import { commonRouters } from './modules/common'
 
 /**
@@ -90,6 +91,7 @@
 export const asyncRouterMap = [
   ...commonRouters,
   ...cooRouters,
+  ...suphandleRouters,
   ...systemRouters,
   ...commenetRouters,
   { path: '*', redirect: '/404', hidden: true, meta: {}}
diff --git a/src/router/modules/suphandle.js b/src/router/modules/suphandle.js
new file mode 100644
index 0000000..7026a7b
--- /dev/null
+++ b/src/router/modules/suphandle.js
@@ -0,0 +1,35 @@
+/* Layout */
+import Layout from '../../views/layout/Layout'
+export const suphandleRouters = [
+  {
+    path: '/suphandle',
+    name: 'suphandle',
+    redirect: '/accessDept',
+    hidden: true,
+    meta: {
+      title: '监督受理子系统',
+      permission: ['/suphandle'],
+      isSys: true
+    }
+  },
+  {
+    path: '/callBus',
+    component: Layout,
+    redirect: '/callBus',
+    name: 'CallBus',
+    alwaysShow: true,
+    meta: {
+      title: '呼叫业务',
+      permission: ['/callBus'],
+      sys: '/suphandle'
+    },
+    children: [
+      {
+        path: '/callCase',
+        component: () => import('@/views/callCase/callCase'),
+        name: 'CallCase',
+        meta: { title: '建立案卷', icon: '', belongSys: '', permission: '/callCase' }
+      }
+    ]
+  }
+]
diff --git a/src/router/modules/system.js b/src/router/modules/system.js
index 10bff2e..c80b732 100644
--- a/src/router/modules/system.js
+++ b/src/router/modules/system.js
@@ -48,6 +48,12 @@
         component: () => import('@/views/busAdmin/userDevice/userDevice'),
         name: 'UserDevice',
         meta: { title: '终端设备管理', icon: '', permission: ['/userDevice'] }
+      },
+      {
+        path: '/areaPersonliable',
+        component: () => import('@/views/busAdmin/areaPersonliable/areaPersonliable'),
+        name: 'AreaPersonliable',
+        meta: { title: '网格责任人管理', icon: '', permission: ['/areaPersonliable'] }
       }
     ]
   },
diff --git a/src/views/busAdmin/areaPersonliable/areaPersonliable.vue b/src/views/busAdmin/areaPersonliable/areaPersonliable.vue
new file mode 100644
index 0000000..23a26de
--- /dev/null
+++ b/src/views/busAdmin/areaPersonliable/areaPersonliable.vue
@@ -0,0 +1,156 @@
+<template>
+  <div class="table-container">
+    <el-row class="table-title">
+      <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
+      <el-col :span="12" :offset="6" class="edit_btns">
+        <el-button v-if="hasPerm('/areaPersonliable/add')" class="edit_btn" size="small" @click="add">新增</el-button>
+      </el-col>
+    </el-row>
+    <el-table v-loading="listLoading" ref="table" :data="list" class="table" border>
+      <el-table-column :index="indexMethod" align="center" type="index" />
+      <el-table-column v-for="column in tableColumns" :key="column.value" :label="column.text" align="center">
+        <template slot-scope="scope">
+          <span>{{ scope.row[column.value] }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column v-if="hasPerm('/areaPersonliable/update')||hasPerm('/areaPersonliable/delete')" label="操作" align="center" width="200">
+        <template slot-scope="scope">
+          <el-button v-if="hasPerm('/areaPersonliable/update')" class="table-button" type="text" @click="edit(scope.row)">编辑</el-button>
+          <el-button v-if="hasPerm('/areaPersonliable/delete')" class="table-button" type="text" @click="del(scope.row)">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <div class="pagination-container">
+      <el-pagination
+        :current-page="listQuery.offset"
+        :page-sizes="[10,20,30,50]"
+        :page-size="listQuery.limit"
+        :total="total"
+        align="center"
+        layout="total, sizes, prev, pager, next"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"/>
+    </div>
+
+    <edit-area-personliable ref="editAreaPersonliable" @watchChild="fetchData"/>
+  </div>
+</template>
+
+<script>
+import { getAreaPersonliableList, deleteAreaPersonliable } from '@/api/busAdmin/areaPersonliable'
+import EditAreaPersonliable from './editAreaPersonliable'
+
+export default {
+  name: 'AreaPersonliable',
+  components: { EditAreaPersonliable },
+  data() {
+    return {
+      list: [],
+      total: 0,
+      listLoading: false,
+      listQuery: {
+        limit: 10,
+        offset: 1,
+        sort: 'id',
+        order: 'asc'
+      },
+      tableColumns: [
+        {
+          text: '网格名称',
+          value: 'areaName'
+        },
+        {
+          text: '责任人姓名',
+          value: 'userName'
+        },
+        {
+          text: '所属区域',
+          value: 'pAreaName'
+        }
+      ]
+    }
+  },
+  activated() {
+    this.fetchData()
+  },
+  methods: {
+    async fetchData() {
+      this.listLoading = true
+      const res = await getAreaPersonliableList(this.listQuery)
+      this.list = res.data.rows
+      this.total = parseInt(res.data.total)
+      this.listLoading = false
+    },
+    indexMethod(index) {
+      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
+    },
+    // 改变页容量
+    handleSizeChange(val) {
+      this.listQuery.limit = val
+      this.fetchData()
+    },
+    // 改变当前页
+    handleCurrentChange(val) {
+      this.listQuery.offset = val
+      this.fetchData()
+    },
+    add() {
+      this.$refs.editAreaPersonliable.initDialog(true, 'create')
+    },
+    edit(row) {
+      this.$refs.editAreaPersonliable.initDialog(true, 'update', row)
+    },
+    del(row) {
+      this.$confirm(
+        '确定要删除吗？',
+        '确认操作',
+        {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }
+      ).then(() => {
+        deleteAreaPersonliable(row.id).then(response => {
+          if (response.code === 200) {
+            this.$message.success('删除成功')
+            this.fetchData()
+          }
+        })
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  $tableTitleHeight:46px;
+  .table{
+    margin-bottom: 20px;
+  }
+  .table-container{
+    margin: 20px;
+  }
+  .table-title{
+    background-color:rgba(243, 243, 243, 1);
+    height: $tableTitleHeight;
+    .title-header{
+      line-height:$tableTitleHeight;
+      color: #606266;
+      font-size: 15px;
+      i{
+        margin-left: 5px;
+        margin-right: 5px;
+      }
+    }
+  }
+  .edit_btns{
+    .edit_btn{
+      float:right;
+      margin:7px 3px;//为了需要居中显示margin-top和bottom要用$tableTitleHeight减去按钮原高度除以2
+    }
+  }
+  .table-button{
+    padding: 10px;
+    height: 23px;
+  }
+</style>
diff --git a/src/views/busAdmin/areaPersonliable/areaSelectTree.vue b/src/views/busAdmin/areaPersonliable/areaSelectTree.vue
new file mode 100644
index 0000000..d0ba37f
--- /dev/null
+++ b/src/views/busAdmin/areaPersonliable/areaSelectTree.vue
@@ -0,0 +1,80 @@
+<template>
+  <el-dialog :visible.sync="dialogFormVisible" append-to-body custom-class="area-select-dialog" title="选择责任网格">
+    <el-scrollbar style="height: 400px">
+      <el-tree
+        ref="tree"
+        :expand-on-click-node="false"
+        :props="defaultProps"
+        :load="loadNode"
+        node-key="id"
+        lazy
+      />
+    </el-scrollbar>
+    <div slot="footer" class="dialog-footer">
+      <el-button type="primary" @click="confirmSelect">确定</el-button>
+      <el-button @click="cancel">取消</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { getAreaTree } from '@/api/area'
+export default {
+  name: 'AreaSelectTree',
+  data() {
+    return {
+      dialogFormVisible: true,
+      defaultProps: {
+        label: 'name',
+        children: 'children',
+        isLeaf: 'leaf'
+      },
+      listQuery: {
+        pid: ''
+      }
+    }
+  },
+  methods: {
+    // 获取数据
+    // fetchData() {
+    //   return new Promise(function(resolve, reject) {
+    //     getAreaTree(this.roleId)
+    //   })
+    // },
+    initDialog() {
+      this.dialogFormVisible = true
+    },
+    loadNode(node, resolve) {
+      if (node.data && node.data.id) {
+        this.listQuery.pid = node.data.id
+      }
+      getAreaTree(this.listQuery).then(response => {
+        const data = response.data
+        resolve(data)
+      })
+    },
+    // 选择后的操作
+    confirmSelect() {
+      const node = this.$refs.tree.getCurrentNode()
+      this.dialogFormVisible = false
+      this.$emit('selectDone', node)
+    },
+    cancel() {
+      this.dialogFormVisible = false
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
+
+<style lang="scss" scope>
+  .area-select-dialog{
+    width: 400px;
+    .el-scrollbar__wrap{
+      overflow-x: hidden !important;
+    }
+  }
+</style>
diff --git a/src/views/busAdmin/areaPersonliable/editAreaPersonliable.vue b/src/views/busAdmin/areaPersonliable/editAreaPersonliable.vue
new file mode 100644
index 0000000..60e99e7
--- /dev/null
+++ b/src/views/busAdmin/areaPersonliable/editAreaPersonliable.vue
@@ -0,0 +1,156 @@
+<template>
+  <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" append-to-body width="35%">
+    <el-form ref="dataForm" :model="AreaPersonliableForm" :rules="rules" label-width="100px">
+      <el-form-item label="网格名称" prop="areaName">
+        <el-input
+          v-model="AreaPersonliableForm.areaName"
+          :disabled="dialogStatus === 'update'"
+          placeholder="请选择责任网格"
+          @focus="openAreaSelect"/>
+      </el-form-item>
+      <el-form-item label="责任人姓名" prop="userId">
+        <el-select v-model="AreaPersonliableForm.userId" filterable clearable style="width:100%" placeholder="请选择责任人">
+          <el-option v-for="user in userList" :key="user.id" :label="user.name" :value="user.id"/>
+        </el-select>
+      </el-form-item>
+    </el-form>
+    <div slot="footer" class="dialog-footer">
+      <el-button type="primary" @click="saveData">保存</el-button>
+      <el-button @click="cancel">取消</el-button>
+    </div>
+    <area-select-tree v-if="areaSelectShow" ref="areaSelect" @selectDone="selectArea"/>
+  </el-dialog>
+</template>
+
+<script>
+import AreaSelectTree from './areaSelectTree'
+import { getSupervisorList, addAreaPersonliable, updateAreaPersonliable } from '@/api/busAdmin/areaPersonliable'
+
+export default {
+  name: 'EditAreaPersonliable',
+  components: { AreaSelectTree },
+  data() {
+    return {
+      dialogFormVisible: false,
+      dialogStatus: '',
+      textMap: {
+        update: '编辑',
+        create: '新增'
+      },
+      AreaPersonliableForm: {
+        id: '',
+        areaId: '',
+        areaName: '',
+        userId: ''
+      },
+      userList: [],
+      rules: {
+        areaName: [{ required: true, message: '区域不能为空', trigger: ['change'] }],
+        userId: [{ required: true, message: '用户不能为空', trigger: ['blur', 'change'] }]
+      },
+      areaSelectShow: false
+    }
+  },
+  mounted() {
+    this.fetchUserList()
+  },
+  methods: {
+    initDialog(dialogFormVisible, dialogStatus, row = null) {
+      this.dialogFormVisible = dialogFormVisible
+      this.dialogStatus = dialogStatus
+      if (this.dialogStatus === 'create') {
+      // 新增时，清空表格和校验
+        this.resetForm()
+        this.$nextTick(() => {
+          this.$refs['dataForm'].clearValidate()
+        })
+      } else if (this.dialogStatus === 'update') {
+      // 更新时，填充数据
+        console.log(row)
+        this.AreaPersonliableForm.id = row.id
+        this.AreaPersonliableForm.areaId = row.areaId
+        this.AreaPersonliableForm.areaName = row.areaName
+        this.AreaPersonliableForm.userId = row.userId
+      }
+    },
+    resetForm() {
+      this.AreaPersonliableForm = {
+        id: '',
+        areaId: '',
+        areaName: '',
+        userId: ''
+      }
+    },
+    fetchUserList() {
+      getSupervisorList().then(response => {
+        this.userList = response.data
+      })
+    },
+    openAreaSelect() {
+      this.areaSelectShow = true
+      setTimeout(this.$refs.areaSelect.initDialog(), 200)
+    },
+    selectArea(node) {
+      this.AreaPersonliableForm.areaId = node.id
+      this.AreaPersonliableForm.areaName = node.name
+    },
+    cancel() {
+      this.dialogFormVisible = false
+    },
+    saveData() {
+      if (this.dialogStatus === 'create') {
+        this.createData()
+      } else if (this.dialogStatus === 'update') {
+        this.updateData()
+      }
+    },
+    createData() {
+      this.$refs['dataForm'].validate(valid => {
+        if (valid) {
+          console.log('create valid success')
+          console.log(this.AreaPersonliableForm)
+          addAreaPersonliable(this.AreaPersonliableForm).then(response => {
+            if (response.code === 200) {
+              this.$message.success('添加成功')
+              this.$emit('watchChild')
+              this.dialogFormVisible = false
+            } else {
+              this.$message.error(response.message)
+            }
+          })
+        } else {
+          console.log('create valid error')
+        }
+      })
+    },
+    updateData() {
+      console.log('update data')
+      this.$refs['dataForm'].validate(valid => {
+        if (valid) {
+          console.log('update valid success')
+          console.log(this.AreaPersonliableForm)
+          updateAreaPersonliable(this.AreaPersonliableForm).then(response => {
+            if (response.code === 200) {
+              this.$message.success('修改成功')
+              this.$emit('watchChild')
+              this.dialogFormVisible = false
+            } else {
+              this.$message.error('修改失败')
+            }
+          })
+        } else {
+          console.log('update valid error')
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.el-form-item {
+  margin-bottom: 22px;
+  margin-left: 20px;
+  margin-right: 50px;
+}
+</style>
diff --git a/src/views/callCase/callCase.vue b/src/views/callCase/callCase.vue
new file mode 100644
index 0000000..513b6b3
--- /dev/null
+++ b/src/views/callCase/callCase.vue
@@ -0,0 +1,651 @@
+<template>
+  <div class="main-form">
+    <el-form ref="dataForm" :model="caseForm" :label-position="labelPosition" :rules="rules" label-width="120px">
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <el-form-item label="举报人" prop="reporterName">
+            <el-input v-model.trim="caseForm.reporterName" type="text" placeholder="必填" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="联系电话" prop="reporterPhone">
+            <el-input v-model.trim="caseForm.reporterPhone" type="text" placeholder="必填" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-button type="primary">历史记录</el-button>
+          <el-button type="primary" @click="openMapQueryDialog">地图查询</el-button>
+        </el-col>
+      </el-row>
+
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <el-form-item label="信息来源" prop="source">
+            <el-select v-model="caseForm.source" placeholder="选择信息来源" clearable value="">
+              <el-option
+                v-for="item in caseSourceOpts"
+                :key="item.value"
+                :label="item.name"
+                :value="item.value"/>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="案卷等级" prop="caseLevel">
+            <el-select v-model="caseForm.caseLevel" placeholder="选择案卷等级" value="">
+              <el-option
+                v-for="item in caseLevelOpts"
+                :key="item.value"
+                :label="item.name"
+                :value="item.value"/>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="是否核实">
+            <div>
+              <el-radio-group v-model="caseForm.isNeedVerify" @change="changeNeedVerify()">
+                <el-radio-button label="1">需要</el-radio-button>
+                <el-radio-button label="0">不需要</el-radio-button>
+              </el-radio-group>
+            </div>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="是否回访">
+            <div>
+              <el-radio-group v-model="caseForm.isNeedRevisit">
+                <el-radio-button label="1">需要</el-radio-button>
+                <el-radio-button label="0">不需要</el-radio-button>
+              </el-radio-group>
+            </div>
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <el-row :gutter="20">
+
+        <el-col :span="6">
+          <el-form-item label="所在区县" prop="areaCode">
+            <el-select v-model="caseForm.areaCode" placeholder="选择所在区县" value="">
+              <el-option key="361029" label="东乡区" value="361029"/>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="所在街道" prop="streetCode">
+            <el-select v-model="caseForm.streetCode" placeholder="选择所在街道" value="">
+              <el-option key="361029001" label="孝岗镇" value="361029001"/>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="所在社区" prop="communityName">
+            <el-input v-model="caseForm.communityName" type="text" placeholder="必填" readonly />
+          </el-form-item>
+        </el-col>
+        <el-col v-if="caseForm.componentId !== ''" :span="6">
+          <el-form-item label="部件编码">
+            <el-input v-model="caseForm.componentId" type="text" placeholder="必填" readonly />
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <el-row :gutter="20">
+        <el-col v-if="showVerifyPerson" :span="6">
+          <el-form-item label="监督员" prop="verifyPersonId">
+            <el-select v-model="caseForm.verifyPersonId" type="text" placeholder="选择监督员" filterable clearable value="">
+              <el-option
+                v-for="item in verifyPersonOpts"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id">
+                <span style="float: left">{{ item.name }}</span>
+                <span style="float: right; color: #999999; font-size: 13px">{{ item.id }}</span>
+              </el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="案卷类别" prop="eorc">
+            <el-select v-model="caseForm.eorc" placeholder="选择案卷类别" value="">
+              <el-option
+                v-for="item in caseEorCOpts"
+                :key="item.value"
+                :label="item.name"
+                :value="item.value"/>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="案卷大类" prop="caseType">
+            <el-select v-model="caseForm.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-col :span="6">
+          <el-form-item label="案卷小类" prop="caseDetailType">
+            <el-select v-model="caseForm.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-row v-if="showCaseTypesTime" :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="立案标准" prop="casetypesTimeId">
+            <el-select v-model="caseForm.casetypesTimeId" placeholder="选择立案标准" clearable value="" style="width: 100%">
+              <el-option
+                v-for="item in caseTypeTimeOpts"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id"/>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="处理时限" prop="bzhours">
+            <el-input-number v-model="caseForm.bzhours" :min="0" style="margin-right: 5px" />小时
+            <el-input-number v-model="caseForm.bzminis" :min="0" :max="59" style="margin-left: 20px; margin-right: 5px" />分钟
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <el-row :gutter="20">
+        <el-col :span="18">
+          <el-form-item label="案卷描述" prop="description">
+            <el-input v-model.trim="caseForm.description" type="textarea" placeholder="必填" clearable />
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <el-row :gutter="20">
+        <el-col :span="18">
+          <el-form-item label="位置描述" prop="fieldintro">
+            <el-input v-model.trim="caseForm.fieldintro" type="text" placeholder="必填" clearable />
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <el-row :gutter="20">
+        <el-col :span="24">
+          <el-form-item label="图片信息" prop="images">
+            <el-upload
+              ref="upload"
+              :before-upload="handleBeforeUpload"
+              :on-preview="handlePictureCardPreview"
+              :on-remove="handleRemove"
+              :on-exceed="handleExceed"
+              :on-success="handleSuccess"
+              :limit="2"
+              :http-request="uploadFile"
+              action="string"
+              multiple
+              accept=".jpg,.jpeg,.png "
+              list-type="picture-card">
+              <i class="el-icon-plus"/>
+            </el-upload>
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <el-row :gutter="20">
+        <el-col :span="18" style="margin-left: 120px; margin-bottom: 40px; text-align: center;">
+          <el-button type="primary" size="medium" icon="el-icon-check" style="width: 200px;" @click="saveData"> 提交 </el-button>
+        </el-col>
+      </el-row>
+
+    </el-form>
+
+    <el-dialog :visible.sync="dialogVisible" title="图片预览" append-to-body>
+      <div class="imgBox">
+        <img :src="dialogImageUrl" max-height="400px;" alt="" style="margin: 0 auto;">
+      </div>
+    </el-dialog>
+
+    <el-dialog
+      :visible.sync="mapDialogVisible"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+      title="地图查询"
+      width="80%"
+      append-to-body>
+
+      <arcgis-map-comp
+        ref="mapComp"
+        @closeMapQueryDialogByEvent="closeMapQueryDialogByEvent"
+        @closeMapQueryDialogByComp="closeMapQueryDialogByComp"/>
+
+    </el-dialog>
+
+  </div>
+</template>
+
+<script>
+import { getCaseSource, getCaseLevel, getCaseEorC, getCaseType, getCaseDetailType, getCaseTypesTime, getVerifyPerson, addCase } from '@/api/callCase/callCase'
+import { Uploadimg } from '@/api/common'
+import ArcgisMapComp from '@/components/Map/ArcGISMap'
+
+export default {
+  name: 'CallCase',
+  components: {// 注册组件
+    ArcgisMapComp: ArcgisMapComp
+  },
+  data() {
+    const phoneValidator = (rule, value, callback) => {
+      if (value !== '') {
+        if ((/^[1][3,5,6,7,8,9][0-9]{9}$/).test(value) === false) {
+          callback(new Error('举报人电话格式不正确'))
+        } else {
+          callback()
+        }
+      } else {
+        callback(new Error('举报人电话不能为空'))
+      }
+    }
+    return {
+      caseForm: {
+        reporterName: '', // 举报人姓名
+        reporterPhone: '', // 举报人电话
+        isNeedVerify: '1', // 是否需要核实
+        isNeedRevisit: '1', // 是否需要回访
+        lng: '', // 经度，
+        lat: '', // 纬度
+        source: '', // 案卷信息来源
+        caseLevel: '', // 案卷等级
+        eorc: '', // 案卷类别
+        casetypeCode: '', // 案卷大类编码,
+        casetypeDetailCode: '', // 案卷小类编码
+        areaCode: '361029', // 所属区县ID
+        streetCode: '361029001', // 所属街道ID
+        communityCode: '', // 所属社区编码
+        communityName: '', // 所属社区NAME
+        gridId: '', // 万米网格ID（单元网格）
+        componentId: '', // 部件ID
+        casetypesTimeId: '', // 立案标准ID
+        bzhours: 0, // 限制完成总时限（小时）
+        bzminis: 0, // 限制完成总时限（分钟）
+        description: '', // 案件描述
+        fieldintro: '', // 位置描述
+        verifyPersonId: '', // 核实人员id
+        photos: '' // 图片存储的地址
+      }, // 表单
+      rules: {
+        reporterName: [{ required: true, message: '举报人姓名不能为空', trigger: ['blur'] }],
+        reporterPhone: [{ required: true, trigger: ['blur'], validator: phoneValidator }],
+        source: [{ required: true, message: '信息来源不能为空', trigger: ['change'] }],
+        caseLevel: [{ required: true, message: '案卷等级不能为空', trigger: ['change'] }],
+        eorc: [{ required: true, message: '案卷类别不能为空', trigger: ['change'] }],
+        description: [{ required: true, message: '案卷描述不能为空', trigger: ['blur'] }],
+        fieldintro: [{ required: true, message: '位置描述不能为空', trigger: ['blur'] }]
+      }, // 表单验证
+      hideUpload: false,
+      fileList: [],
+      imageList: [],
+      uploadPath: process.env.BASE_API + 'imageUpload', // 图片上传路径
+      dialogImageUrl: '',
+      dialogVisible: false,
+      mapDialogVisible: false, // 地图对话框
+      labelPosition: 'right',
+      caseSourceOpts: [], // 案卷来源下拉框
+      caseLevelOpts: [], // 案卷等级下拉框
+      caseEorCOpts: [], // 案卷类别下拉框
+      caseTypeOpts: [], // 案卷大类下拉框
+      caseDetailTypeOpts: [], // 案卷小类下拉框
+      caseTypeTimeOpts: [], // 立案标准下拉框
+      verifyPersonOpts: [], // 监督员下拉框
+      showVerifyPerson: true,
+      showCaseTypesTime: false,
+      caseTypeCodeAuto: '', // 自动生成的案卷大类代码
+      caseTypeDetailCodeAuto: '' // 自动生成的案卷小类代码
+    }
+  },
+  computed: {
+    caseLevel() {
+      return this.caseForm.caseLevel
+    },
+    eorc() {
+      return this.caseForm.eorc
+    },
+    caseType() {
+      return this.caseForm.casetypeCode
+    },
+    caseTypeDetail() {
+      return this.caseForm.casetypeDetailCode
+    },
+    caseTypeDetailTime() {
+      return this.caseForm.casetypesTimeId
+    }
+  },
+  watch: {
+    caseLevel(level) {
+      this.calculateTime(this.caseForm.casetypesTimeId)
+    },
+    eorc(eorcVal) {
+      this.cascaderCaseType(eorcVal)
+    },
+    caseType(typeVal) {
+      this.cascaderCaseDetailType(typeVal)
+    },
+    caseTypeDetail(detailVal) {
+      this.cascaderCaseDetailTypeTime(detailVal)
+    },
+    caseTypeDetailTime(timeVal) {
+      this.calculateTime(timeVal)
+    }
+  },
+  mounted: function() {
+    this.initCaseSource()
+    this.initCaseLevel()
+    this.initCaseEorC()
+    this.initVerifyPerson()
+  },
+  methods: {
+    initCaseSource: function() {
+      getCaseSource().then(response => {
+        this.caseSourceOpts = []
+        for (const opt of response.data) {
+          this.caseSourceOpts.push(opt)
+          if (opt.name.indexOf('电话') >= 0) {
+            this.caseForm.source = opt.value
+          }
+        }
+      })
+    },
+    initCaseLevel: function() {
+      getCaseLevel().then(response => {
+        this.caseLevelOpts = []
+        for (const opt of response.data) {
+          this.caseLevelOpts.push(opt)
+          if (opt.name.indexOf('一般') >= 0) {
+            this.caseForm.caseLevel = opt.value
+          }
+        }
+      })
+    },
+    initCaseEorC: function() {
+      getCaseEorC().then(response => {
+        this.caseEorCOpts = []
+        for (const opt of response.data) {
+          this.caseEorCOpts.push(opt)
+        }
+      })
+    },
+    initVerifyPerson: function() {
+      getVerifyPerson().then(response => {
+        this.verifyPersonOpts = []
+        console.log(response)
+        for (const opt of response.data) {
+          this.verifyPersonOpts.push(opt)
+        }
+      })
+    },
+    // 级联查询案卷大类
+    cascaderCaseType: function(eorc) {
+      // 前两行的作用是清除案卷大类的当前值和select中的所有选项
+      this.caseTypeOpts = []
+      this.caseForm.casetypeCode = ''
+      // 以下两行的作用是清除案卷小类的当前值和select中的所有选项
+      this.caseDetailTypeOpts = []
+      this.caseForm.casetypeDetailCode = ''
+      // 以下两行是清除案卷时限（小时和分钟）
+      this.caseTypeTimeOpts = []
+      this.caseForm.casetypesTimeId = ''
+      this.caseForm.bzhours = 0
+      this.caseForm.bzminis = 0
+
+      // 若事部件选择的值不为空，则查询相应的案卷大类
+      if (eorc !== null && eorc.length > 0) {
+        getCaseType(eorc).then(response => {
+          for (const opt of response.data) {
+            this.caseTypeOpts.push(opt)
+
+            if (opt.typeCode === this.caseTypeCodeAuto) {
+              this.caseForm.casetypeCode = opt.typeCode
+            }
+          }
+        })
+      }
+    },
+    cascaderCaseDetailType: function(typeCode) {
+      // 以下两行的作用是清除案卷小类的当前值和select中的所有选项
+      this.caseDetailTypeOpts = []
+      this.caseForm.casetypeDetailCode = ''
+      // 以下两行是清除案卷时限（小时和分钟）
+      this.caseTypeTimeOpts = []
+      this.caseForm.casetypesTimeId = ''
+      this.caseForm.bzhours = 0
+      this.caseForm.bzminis = 0
+
+      // 根据code获取ID，进行级联查询
+      let typeId = 0
+      this.caseTypeOpts.forEach(item => {
+        if (item.typeCode === typeCode) {
+          typeId = item.id
+        }
+      })
+
+      if (typeId > 0) {
+        getCaseDetailType(typeId).then(response => {
+          for (const opt of response.data) {
+            this.caseDetailTypeOpts.push(opt)
+
+            if (opt.typeDetailCode === this.caseTypeDetailCodeAuto) {
+              this.caseForm.casetypeDetailCode = opt.typeDetailCode
+            }
+          }
+        })
+      }
+    },
+    // 查询立案标准
+    cascaderCaseDetailTypeTime: function(detailCode) {
+      // 以下两行是清除案卷时限（小时和分钟）
+      this.caseTypeTimeOpts = []
+      this.caseForm.casetypesTimeId = ''
+      this.caseForm.bzhours = 0
+      this.caseForm.bzminis = 0
+
+      // 根据code获取ID，进行级联查询
+      let typeDetailId = 0
+      this.caseDetailTypeOpts.forEach(item => {
+        if (item.typeDetailCode === detailCode) {
+          typeDetailId = item.id
+        }
+      })
+
+      if (typeDetailId > 0) {
+        getCaseTypesTime(typeDetailId).then(response => {
+          console.log(response)
+          for (const opt of response.data) {
+            this.caseTypeTimeOpts.push(opt)
+          }
+        })
+      }
+    },
+    calculateTime: function(timeVal) {
+      const hoursPerDay = this.caseForm.caseLevel === '1' ? 8 : 24
+      let day = 0
+      let hours = 0
+      this.caseTypeTimeOpts.forEach(item => {
+        if (item.id === timeVal) {
+          day = item.day
+          hours = item.hours
+        }
+      })
+
+      this.caseForm.bzhours = hoursPerDay * parseInt(day) + parseInt(hours)
+    },
+    // 打开地图查询对话框显示地图
+    openMapQueryDialog: function() {
+      this.mapDialogVisible = true
+    },
+    // 关闭地图查询对话框
+    closeMapQueryDialogByEvent: function(longitude, latitude, communityId, communityName, gridId) {
+      this.mapDialogVisible = false
+
+      // 赋值
+      this.caseForm.eorc = '1' // 事件点返回时案卷类别自动选择为事件
+      this.caseForm.communityCode = communityId
+      this.caseForm.communityName = communityName
+      this.caseForm.gridId = gridId
+      this.caseForm.lng = longitude
+      this.caseForm.lat = latitude
+
+      this.caseForm.areaCode = communityId.substring(0, 6) // 区县代码
+      this.caseForm.streetCode = communityId.substring(0, 9) // 街道代码
+    },
+    // 关闭地图查询对话框
+    closeMapQueryDialogByComp: function(longitude, latitude, communityId, communityName, gridId, componentId, componentName) {
+      this.mapDialogVisible = false
+
+      // 赋值
+      this.caseForm.eorc = '2' // 部件点返回时案卷类别自动选择为部件
+      this.caseForm.communityCode = communityId
+      this.caseForm.communityName = communityName
+      this.caseForm.gridId = gridId
+      this.caseForm.lng = longitude
+      this.caseForm.lat = latitude
+      this.caseForm.componentId = componentId
+      this.caseForm.componentName = componentName
+
+      this.caseForm.areaCode = communityId.substring(0, 6) // 区县代码
+      this.caseForm.streetCode = communityId.substring(0, 9) // 街道代码
+      this.caseTypeCodeAuto = componentId.substring(6, 8) // 自动赋值部件大类
+      this.caseTypeDetailCodeAuto = componentId.substring(8, 10) // 自动赋值部件小类
+    },
+    // 修改是否需要核实
+    changeNeedVerify: function() {
+      if (this.caseForm.isNeedVerify === '0') {
+        // 不需要核实，显示立案标准、处理时限
+        this.showVerifyPerson = false
+        this.showCaseTypesTime = true
+      } else {
+        this.showVerifyPerson = true
+        this.showCaseTypesTime = false
+      }
+    },
+    // 保存数据
+    saveData: function() {
+      const that = this
+      if (this.fileList.length > 0) {
+        let photos = ''
+        this.fileList.forEach(photo => {
+          photos += photo.url + ','
+        })
+        this.caseForm.photos = photos.substring(0, photos.length - 1)
+      }
+
+      this.$refs['dataForm'].validate((valid) => {
+        console.log(valid)
+        if (valid) {
+          addCase(this.caseForm).then(function(response) {
+            if (response.code === 200) {
+              that.$message({
+                message: '添加案卷成功',
+                type: 'success'
+              })
+
+              that.$router.push({ path: '/dashboard' })
+            } else {
+              that.$message({
+                message: '添加案卷失败',
+                type: 'error'
+              })
+            }
+          })
+        }
+      })
+    },
+    // 图片上传
+    uploadFile(file) {
+      console.log('uploadFile:' + file.file.name)
+      // const base_url = process.env.BASE_API + '/static/'
+      Uploadimg(file).then(res => {
+        console.log(res)
+        if (res.code === 200) {
+          this.fileList.push({ name: file.file.name, url: res.data })
+        }
+      })
+    },
+    // 上传前判断文件格式及大小
+    handleBeforeUpload(file) {
+      const isJPG = (file.type === 'image/jpeg') || (file.type === 'image/png')
+      let res = true
+      const isLt2M = file.size / 1024 / 1024 < 2
+      if (!isJPG) {
+        this.$message.error('上传图片只能是 JPG 或 PNG 格式!')
+        res = false
+      }
+      if (!isLt2M) {
+        this.$message.error('上传图片大小不能超过 2MB!')
+        res = false
+      }
+      for (const i in this.fileList) {
+        if (this.fileList[i].name === file.name) {
+          this.$message.error('该图片已上传过，请选择其他图片')
+          res = false
+        }
+      }
+      return res
+    },
+    // 文件列表移除文件时的钩子
+    handleRemove(file, fileList) {
+      console.log('handleRemove')
+      for (const i in this.fileList) {
+        if (this.fileList[i].name === file.name) {
+          this.fileList.splice(i, 1)
+          this.hideUpload = this.fileList.length >= 2
+          return
+        }
+      }
+      this.handleChange()
+    },
+    // 限制提示
+    handleExceed(files, fileList) {
+      console.log('handleExceed')
+      this.$message.warning(`限制选择 2 张图片，本次选择了 ${files.length} 张图片，共选择了 ${files.length + fileList.length} 张图片`)
+    },
+    // 点击文件列表中已上传的文件时的钩子
+    handlePictureCardPreview(file) {
+      console.log('handlePictureCardPreview')
+      this.dialogImageUrl = file.url
+      this.dialogVisible = true
+    },
+    handleChange(file, fileList) {
+      console.log('handleChange')
+      if (fileList) {
+        this.hideUpload = fileList.length >= 2
+      } else {
+        this.hideUpload = false
+      }
+    },
+    handleSuccess(response, file, fileList) {
+      console.log('handleSuccess')
+      console.log(response)
+      const base_url = process.env.BASE_API + '/static/'
+      if (response.code === 200) {
+        this.fileList.push({ name: file.file.name, url: base_url + response.data })
+        this.handleChange()
+      } else {
+        this.$message.warning(response.message)
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .main-form{
+    margin: 20px;
+  }
+</style>
diff --git a/src/views/caseCommon/caseDetailRead.vue b/src/views/caseCommon/caseDetailRead.vue
index 33473eb..e4b71cc 100644
--- a/src/views/caseCommon/caseDetailRead.vue
+++ b/src/views/caseCommon/caseDetailRead.vue
@@ -158,11 +158,11 @@
 
 <script>
 import { getCaseDetail } from '@/api/coorBusiness/case'
-import ArcGisMap from '@/components/Map/arcgisMap'
+import ArcGisMapRead from '@/components/Map/arcgisMapRead'
 
 export default {
   name: 'CaseDetail',
-  components: { ArcGisMap },
+  components: { ArcGisMapRead },
   data() {
     return {
       id: '',
diff --git a/src/views/caseCommon/caseDetailSupervise.vue b/src/views/caseCommon/caseDetailSupervise.vue
index 0ec1fe4..1175cef 100644
--- a/src/views/caseCommon/caseDetailSupervise.vue
+++ b/src/views/caseCommon/caseDetailSupervise.vue
@@ -195,11 +195,11 @@
 import { getCommonLanguage } from '@/api/coorBusiness/dict'
 import { historicalRecords } from '@/api/coorBusiness/process'
 import { superviseCaseTask } from '@/api/supervise/supervise'
-import ArcGisMap from '@/components/Map/arcgisMap'
+import ArcGisMapRead from '@/components/Map/arcgisMapRead'
 
 export default {
   name: 'CaseDetail',
-  components: { ArcGisMap },
+  components: { ArcGisMapRead },
   data() {
     return {
       id: '',
diff --git a/src/views/otherComment/highFreq/highFreqChart.vue b/src/views/otherComment/highFreq/highFreqChart.vue
index 6d81057..1ec175d 100644
--- a/src/views/otherComment/highFreq/highFreqChart.vue
+++ b/src/views/otherComment/highFreq/highFreqChart.vue
@@ -38,6 +38,7 @@
         tooltip: {
           show: true
         },
+        // color: ['red', 'green', 'yellow', 'blueviolet'],
         series: [{
           name: '高发问题',
           type: 'pie',
diff --git a/src/views/supervise/components/caseDetailSupervise.vue b/src/views/supervise/components/caseDetailSupervise.vue
index a4f805f..b3f14a5 100644
--- a/src/views/supervise/components/caseDetailSupervise.vue
+++ b/src/views/supervise/components/caseDetailSupervise.vue
@@ -195,11 +195,11 @@
 import { getCommonLanguage } from '@/api/coorBusiness/dict'
 import { historicalRecords } from '@/api/coorBusiness/process'
 import { superviseCaseTask } from '@/api/supervise/supervise'
-import ArcGisMap from '@/components/Map/arcgisMap'
+import ArcGisMapRead from '@/components/Map/arcgisMapRead'
 
 export default {
   name: 'CaseDetail',
-  components: { ArcGisMap },
+  components: { ArcGisMapRead },
   props: {
     id: {
       type: String,