diff --git a/src/components/CaseCommon/caseDetailRead.vue b/src/components/CaseCommon/caseDetailRead.vue
new file mode 100644
index 0000000..5a64198
--- /dev/null
+++ b/src/components/CaseCommon/caseDetailRead.vue
@@ -0,0 +1,559 @@
+<!--案卷详情 只读-->
+<template>
+  <div class="app-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 class="edit_btn" size="small">查看地图</el-button> -->
+        <el-button class="edit_btn" size="small" @click="dialogVisible = true">查看地图</el-button>
+
+      </el-col>
+    </el-row>
+    <el-form ref="caseform" class="form" label-width="90px">
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <el-form-item label="案卷编号">
+            <table-cell-read :text="caseDetail.caseid"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="信息来源">
+            <table-cell-read :text="caseDetail.sourceName"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="举报人/电话">
+            <table-cell-read :text="caseDetail.reporterName+'/'+caseDetail.reporterPhone"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="上报人员">
+            <table-cell-read :text="caseDetail.createUserName"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <el-form-item label="案卷类别">
+            <table-cell-read :text="caseDetail.eorcName"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="案卷大类">
+            <table-cell-read :text="caseDetail.casetypeName"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="案卷小类">
+            <table-cell-read :text="caseDetail.casetypeDetailName"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="案卷等级">
+            <table-cell-read :text="caseDetail.caseLevelName"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <el-form-item label="所在区县">
+            <table-cell-read :text="caseDetail.areaName"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="所在街道">
+            <table-cell-read :text="caseDetail.streetName"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="所属社区">
+            <table-cell-read :text="caseDetail.communityName"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="所属网格">
+            <table-cell-read :text="caseDetail.communityCode"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <el-form-item label="登记时间">
+            <table-cell-read :text="caseDetail.createTime"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="处理时限">
+            <table-cell-read :text="caseDetail.bzhours+'小时'+caseDetail.bzminis+'分钟'"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="完成时限">
+            <table-cell-read :text="caseDetail.nodeLimittime"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <el-form-item v-if="caseDetail.shopkeeperName" label="商户名称">
+            <table-cell-read :text="caseDetail.nodeLimittime"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item v-if="caseDetail.shopPhone" label="商户电话">
+            <table-cell-read :text="caseDetail.shopPhone"/>
+          </el-form-item>
+        </el-col>
+        <el-col v-if="showNeedVisit==true" :span="6">
+          <el-form-item label="是否回访">
+            <table-cell-read :text="isNeedVisit"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-form-item label="立案标准">
+          <table-cell-read :text="caseDetail.casetypesTimeName"/>
+        </el-form-item>
+      </el-row>
+      <el-row>
+        <el-form-item label="发生地点">
+          <table-cell-read :text="caseDetail.fieldintro"/>
+        </el-form-item>
+      </el-row>
+      <el-row>
+        <el-form-item label="事件描述">
+          <table-cell-read :text="caseDetail.description"/>
+        </el-form-item>
+      </el-row>
+    </el-form>
+    <el-row v-show="showImage">
+      <div class="title">案卷图片:</div>
+      <!-- 图片展示 -->
+      <div class="image-container">
+        <el-image v-for="img in fileIdVerify" :key="img" :src="img" fit="contain"/>
+        <el-image v-for="img in fileIdProcess" :key="img" :src="img" fit="contain"/>
+        <el-image v-for="img in fileIdCheck" :key="img" :src="img" fit="contain"/>
+      </div>
+    </el-row>
+    <el-row>
+      <div class="title">数据流转:</div>
+      <el-table :data="recordList" :header-cell-style="{background:'#f3f3f3'}" 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"/>
+        <el-table-column prop="time" label="时间" align="center"/>
+        <el-table-column prop="remarks" label="意见" align="center"/>
+      </el-table>
+    </el-row>
+
+    <el-dialog
+      :visible.sync="dialogVisible"
+      :append-to-body="true"
+      title="位置详情"
+    >
+      <arc-gis-map :longitude="caseDetail.lng" :latitude="caseDetail.lat"/>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import _ from 'lodash'
+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 { radioMap } from './radioMap'
+
+export default {
+  name: 'CaseDetail',
+  components: { ArcGisMap },
+  props: {
+    id: {
+      type: String,
+      default: ''
+    },
+    row: {
+      type: Object,
+      default: null
+    },
+    showProcess: {
+      type: Boolean,
+      default: true
+    },
+    showNeedVisit: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      caseDetail: {},
+      operationKey: '', // 案件处理按钮key
+      fileIdVerify: [], // 核实照片id
+      fileIdProcess: [], // 处理照片id
+      fileIdCheck: [], // 核查照片id
+      recordList: [], // 流转记录列表
+      processForm: { // 提交案卷处理表单
+        processId: '', // 流程实例ID
+        bizId: '', // 业务表单ID(caseId)
+        currState: '', // 当前案件状态
+        changeState: '', // 案件流转后状态
+        remarks: '', // 审批意见
+        approvalResult: '' // 审批结果标志
+      },
+      commonLanguage: '', // 常用语
+      commonLanguageList: [], // 常用语列表
+      processRadioList: [], // 案件处理单选按钮
+      processCompShow: '', // 案卷处理组件显示
+      processCompObj: {}, // 案卷处理组件相关对象
+      dialogVisible: false
+    }
+  },
+  computed: {
+    isNeedVisit: function() {
+      return this.caseDetail.isNeedRevisit === 1 ? '需要回访' : '不需要回访'
+    },
+    // 是否显示案卷图片
+    showImage: function() {
+      if (this.fileIdVerify.length === 0 && this.fileIdProcess.length === 0 && this.fileIdCheck.length === 0) {
+        return false
+      } else {
+        return true
+      }
+    }
+  },
+  mounted() {
+    this.initData()
+  },
+  methods: {
+    async initData() {
+      // 查询案件详情接口
+      const resDetail = await getCaseDetail(this.row.id)
+      console.log('detail', resDetail)
+      this.caseDetail = resDetail.data[0]
+
+      // 解析图片id
+      if (this.caseDetail.fileIdVerify) {
+        this.fileIdVerify = this.caseDetail.fileIdVerify.split(',')
+      }
+      if (this.caseDetail.fileIdProcess) {
+        this.fileIdProcess = this.caseDetail.fileIdProcess.split(',')
+      }
+      if (this.caseDetail.fileIdCheck) {
+        this.fileIdCheck = this.caseDetail.fileIdCheck.split(',')
+      }
+
+      // 查询常用语列表
+      const languageRes = await getCommonLanguage()
+      this.commonLanguageList = languageRes.data
+
+      // 查询流转记录接口
+      this.processForm.processId = this.caseDetail.processId
+      const resRecord = await historicalRecords(this.processForm.processId)
+      this.recordList = resRecord.data
+      console.log(this.recordList)
+
+      if (this.showProcess) {
+        this.initProcess()
+      }
+    },
+    // 初始化案件处理单选键组
+    async initProcess() {
+      const res = await nextNodes(this.caseDetail.caseState)
+      this.processRadioList = res.data
+    },
+    /**
+     * 选择常用语，更新审核意见
+     */
+    selectCommonLang(value) {
+      this.processForm.remarks = value
+    },
+    /**
+     * 选择大类，更新小类下拉框
+     */
+    async selectCaseType(value) {
+      const caseTypeDetailRes = await getCaseTypeDetailList(this.caseDetail.eorc, this.processCompObj.caseType) // 小类
+      this.processCompObj.caseTypeDetailList = caseTypeDetailRes.data
+      this.processCompObj.caseTypeDetail = caseTypeDetailRes.data[0].id
+    },
+    /**
+     * 选择小类，更新立案标准下拉框
+     */
+    async selectCaseTypeDetail(value) {
+      const caseTypeTimesRes = await getCaseTypeTimes(this.processCompObj.caseTypeDetail) // 小类
+      this.processCompObj.caseTypeTimeList = caseTypeTimesRes.data
+      this.processCompObj.caseTypeTime = caseTypeTimesRes.data[0].id
+    },
+    /**
+     * 案卷等级和立案标准发生改变时，更新hours和minutes
+     */
+    updateHoursAndMins() {
+      console.log('updateHoursAndMins', this.processCompObj.caseTypeTime)
+      if (!this.processCompObj.caseLevel) {
+        this.$message.error('请选择案卷等级')
+        return
+      }
+      if (!this.processCompObj.caseTypeTime) {
+        this.processCompObj.hours = ''
+        this.processCompObj.minutes = ''
+        return
+      }
+      const caseTypeTimeObj = _.find(this.processCompObj.caseTypeTimeList, ['id', this.processCompObj.caseTypeTime])
+      console.log(this.processCompObj.caseTypeTime, caseTypeTimeObj)
+      const day = parseInt(caseTypeTimeObj.day)
+      let hours = parseInt(caseTypeTimeObj.hours)
+      const minutes = parseInt(caseTypeTimeObj.minutes)
+      if (day) {
+        switch (this.processCompObj.caseLevel) {
+          case '1':
+            hours += day * 7
+            break
+          case '2':
+            hours += day * 24
+            break
+          default:
+            this.$message.error('请选择案卷等级')
+        }
+      }
+      this.processCompObj.hours = hours
+      this.processCompObj.minutes = minutes
+    },
+    setDefaultUserId(radioConfig) { // 注意caseDetail.verifyPersonId和userlist中的id类型要一致
+      switch (radioConfig.passBack) {
+        case 'verifyPersonId': { // 原核实人员
+          this.$set(this.processCompObj, 'taskUserId', this.caseDetail.verifyPersonId)
+          break
+        }
+        case 'processPersonid': { // 原处理人员
+          this.$set(this.processCompObj, 'taskUserId', this.caseDetail.processPersonid)
+          break
+        }
+        default : {
+          this.$set(this.processCompObj, 'taskUserId', '')
+          break
+        }
+      }
+    },
+    // 选择案卷处理操作
+    async selectNextOperation() {
+      console.log(this.operationKey, radioMap[this.operationKey])
+      const radioConfig = radioMap[this.operationKey]
+      if (!radioConfig.showComp) {
+        this.processCompShow = ''
+        return
+      }
+      switch (radioConfig.showComp.split('_')[0]) {
+        case 'selectUser': { // 选择用户
+          this.processCompShow = 'selectUser'
+          const roleTips = radioConfig.showComp.split('_')[1]
+          const userRes = await getUserList(roleTips)
+          this.$set(this.processCompObj, 'userList', userRes.data)
+          // 有默认id的设默认id
+          this.setDefaultUserId(radioConfig)
+          break
+        }
+        case 'selectDept': { // 选择部门
+          this.processCompShow = 'selectDept'
+          const deptRes = await getDeptList()
+          this.$set(this.processCompObj, 'deptList', deptRes.data)
+          this.$set(this.processCompObj, 'dispatchDeptId', '')
+          break
+        }
+        case 'selectCaseTime': { // 大类，小类，选择立案标准，可输入时分(立案)
+          this.processCompShow = 'selectCaseTime'
+          const caseTypeRes = await getCaseTypeList(this.caseDetail.eorc) // 大类
+          this.$set(this.processCompObj, 'caseTypeList', caseTypeRes.data)
+          const defaultCaseType = _.find(this.processCompObj.caseTypeList, ['typeCode', this.caseDetail.casetypeCode])
+          this.$set(this.processCompObj, 'caseType', defaultCaseType.id)
+
+          const caseTypeDetailRes = await getCaseTypeDetailList(this.caseDetail.eorc, this.processCompObj.caseType) // 小类
+          this.$set(this.processCompObj, 'caseTypeDetailList', caseTypeDetailRes.data)
+          const defaultCaseTypeDetail = _.find(this.processCompObj.caseTypeDetailList, ['typeDetailCode', this.caseDetail.casetypeDetailCode])
+          this.$set(this.processCompObj, 'caseTypeDetail', defaultCaseTypeDetail.id)
+
+          const caseTypeTimeRes = await getCaseTypeTimes(this.processCompObj.caseTypeDetail) // 立案标准
+          this.$set(this.processCompObj, 'caseTypeTimeList', caseTypeTimeRes.data)
+          this.$set(this.processCompObj, 'caseTypeTime', this.caseDetail.casetypesTimeId)
+
+          const caseLevelRes = await getCaseLevelList() // 案卷等级
+          this.$set(this.processCompObj, 'caseLevelList', caseLevelRes.data)
+          this.$set(this.processCompObj, 'caseLevel', this.caseDetail.caseLevel.toString())
+
+          this.$set(this.processCompObj, 'hours', '')
+          this.$set(this.processCompObj, 'minutes', '')
+          this.updateHoursAndMins()
+          break
+        }
+        case 'selectFilingType': { // 选择归档类型
+          this.processCompShow = 'selectFilingType'
+          const filingTypeRes = await getFilingTypeList()
+          this.$set(this.processCompObj, 'filingTypeList', filingTypeRes.data)
+          this.$set(this.processCompObj, 'filingType', '')
+          break
+        }
+        case 'inputDelayTime': { // 输入延期时间
+          this.processCompShow = 'inputDelayTime'
+          this.$set(this.processCompObj, 'hours', '')
+          this.$set(this.processCompObj, 'minutes', '')
+          break
+        }
+        default:
+          this.processCompShow = ''
+          break
+      }
+    },
+    // 构建提交表单
+    buildForm() {
+      console.log('buildForm', this.operationKey)
+      // 通用参数
+      // processId,remarks已有
+      this.processForm.bizId = this.row.id
+      this.processForm.currState = this.caseDetail.caseState
+      if (!this.operationKey) {
+        this.$message.error('请选择案卷处理操作类型')
+        return false
+      }
+      const radioObj = _.find(this.processRadioList, ['operationKey', this.operationKey])
+      this.processForm.changeState = radioObj.nextState
+      this.processForm.approvalResult = radioObj.approvalResult
+
+      // 其他参数
+      const radioConfig = radioMap[this.operationKey]
+      console.log(radioConfig)
+      debugger
+      // 1. taskUserId
+      if ((radioConfig.showComp && radioConfig.showComp.indexOf('selectUser') > -1) || radioConfig.passBack === 'verifyPersonId' || radioConfig.passBack === 'processPersonid') {
+        if (!this.processCompObj.taskUserId) {
+          this.$message.error('请选择人员')
+          return false
+        }
+        this.processForm.taskUserId = this.processCompObj.taskUserId
+      }
+      // 2. dispatchDeptId
+      if (radioConfig.showComp === 'selectDept') {
+        if (!this.processCompObj.dispatchDeptId) {
+          this.$message.error('请选择部门')
+          return false
+        }
+        this.processForm.dispatchDeptId = this.processCompObj.dispatchDeptId
+      } else if (radioConfig.passBack === 'onedeptid') {
+        this.processForm.dispatchDeptId = this.caseDetail.onedeptid
+      }
+      // 3. isNeedRevisit
+      if (radioConfig.passBack === 'isNeedRevisit') {
+        this.processForm.isNeedRevisit = this.caseDetail.isNeedRevisit
+      }
+      // 4. hours,minutes
+      if (radioConfig.showComp === 'selectCaseTime' || radioConfig.showComp === 'inputDelayTime') {
+        if (!this.processCompObj.hours || !this.processCompObj.minutes) {
+          this.$message.error('请输入时间')
+          return false
+        }
+        this.processForm.hours = this.processCompObj.hours
+        this.processForm.minutes = this.processCompObj.minutes
+      }
+      // caseLevel,caseTypeTimes,caseType,caseTypeDetail（立案）
+      if (radioConfig.showComp === 'selectCaseTime') {
+        if (!this.processCompObj.caseLevel) {
+          this.$message.error('请选择案卷等级')
+          return false
+        }
+        this.processForm.caseLevel = this.processCompObj.caseLevel
+        if (!this.processCompObj.caseType) {
+          this.$message.error('请选择案卷大类')
+          return false
+        }
+        this.processForm.caseType = this.processCompObj.caseType
+        if (!this.processCompObj.caseTypeDetail) {
+          this.$message.error('请选择案卷小类')
+          return false
+        }
+        this.processForm.caseTypeDetail = this.processCompObj.caseTypeDetail
+        if (!this.processCompObj.caseTypeTimes) {
+          this.$message.error('请选择立案标准')
+          return false
+        }
+        this.processForm.caseTypeTimes = this.processCompObj.caseTypeTimes
+      }
+      // 5. filingType
+      if (radioConfig.showComp === 'selectFilingType') {
+        if (!this.processCompObj.filingType) {
+          this.$message.error('请选择归档类型')
+          return false
+        }
+        this.processForm.filingType = this.processCompObj.filingType
+      }
+      console.log(this.processForm)
+      return true
+    },
+    submit() {
+      console.log('submit')
+      this.$confirm('确定提交案件处理吗?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        // 点击“确定”后的操作
+        const isBuild = this.buildForm()
+        if (!isBuild) {
+          return
+        }
+        completeCaseTask(this.processForm).then(response => {
+          if (response.code === 200) {
+            this.$message.success('提交成功')
+            this.$emit('submitProcess', this.caseDetail.caseid)
+          } else {
+            this.$message.error('提交失败')
+          }
+        })
+      }).catch(() => {
+        // 点击“取消”后的操作
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  $tableTitleHeight:46px;
+  .table-title{
+    background-color:rgba(243, 243, 243, 1);
+    height: 46px;
+    .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
+    }
+  }
+  .app-container{
+    // padding-top: 50px;
+    margin-bottom: 20px;
+  }
+  .form{
+    margin: 20px;
+    // margin-left: 20px;
+    // margin-right: 20px;
+  }
+  .table{
+    margin: 20px;
+    width: 98%;
+  }
+  .title{
+    margin-left: 38px;
+    font-size: 14px;
+    font-weight: bold;
+  }
+  .button{
+    margin-bottom: 30px;
+  }
+</style>

diff --git a/src/components/CaseCommon/caseDetailRead.vue b/src/components/CaseCommon/caseDetailRead.vue
new file mode 100644
index 0000000..5a64198
--- /dev/null
+++ b/src/components/CaseCommon/caseDetailRead.vue
@@ -0,0 +1,559 @@
+<!--案卷详情 只读-->
+<template>
+  <div class="app-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 class="edit_btn" size="small">查看地图</el-button> -->
+        <el-button class="edit_btn" size="small" @click="dialogVisible = true">查看地图</el-button>
+
+      </el-col>
+    </el-row>
+    <el-form ref="caseform" class="form" label-width="90px">
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <el-form-item label="案卷编号">
+            <table-cell-read :text="caseDetail.caseid"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="信息来源">
+            <table-cell-read :text="caseDetail.sourceName"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="举报人/电话">
+            <table-cell-read :text="caseDetail.reporterName+'/'+caseDetail.reporterPhone"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="上报人员">
+            <table-cell-read :text="caseDetail.createUserName"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <el-form-item label="案卷类别">
+            <table-cell-read :text="caseDetail.eorcName"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="案卷大类">
+            <table-cell-read :text="caseDetail.casetypeName"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="案卷小类">
+            <table-cell-read :text="caseDetail.casetypeDetailName"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="案卷等级">
+            <table-cell-read :text="caseDetail.caseLevelName"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <el-form-item label="所在区县">
+            <table-cell-read :text="caseDetail.areaName"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="所在街道">
+            <table-cell-read :text="caseDetail.streetName"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="所属社区">
+            <table-cell-read :text="caseDetail.communityName"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="所属网格">
+            <table-cell-read :text="caseDetail.communityCode"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <el-form-item label="登记时间">
+            <table-cell-read :text="caseDetail.createTime"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="处理时限">
+            <table-cell-read :text="caseDetail.bzhours+'小时'+caseDetail.bzminis+'分钟'"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="完成时限">
+            <table-cell-read :text="caseDetail.nodeLimittime"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <el-form-item v-if="caseDetail.shopkeeperName" label="商户名称">
+            <table-cell-read :text="caseDetail.nodeLimittime"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item v-if="caseDetail.shopPhone" label="商户电话">
+            <table-cell-read :text="caseDetail.shopPhone"/>
+          </el-form-item>
+        </el-col>
+        <el-col v-if="showNeedVisit==true" :span="6">
+          <el-form-item label="是否回访">
+            <table-cell-read :text="isNeedVisit"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-form-item label="立案标准">
+          <table-cell-read :text="caseDetail.casetypesTimeName"/>
+        </el-form-item>
+      </el-row>
+      <el-row>
+        <el-form-item label="发生地点">
+          <table-cell-read :text="caseDetail.fieldintro"/>
+        </el-form-item>
+      </el-row>
+      <el-row>
+        <el-form-item label="事件描述">
+          <table-cell-read :text="caseDetail.description"/>
+        </el-form-item>
+      </el-row>
+    </el-form>
+    <el-row v-show="showImage">
+      <div class="title">案卷图片:</div>
+      <!-- 图片展示 -->
+      <div class="image-container">
+        <el-image v-for="img in fileIdVerify" :key="img" :src="img" fit="contain"/>
+        <el-image v-for="img in fileIdProcess" :key="img" :src="img" fit="contain"/>
+        <el-image v-for="img in fileIdCheck" :key="img" :src="img" fit="contain"/>
+      </div>
+    </el-row>
+    <el-row>
+      <div class="title">数据流转:</div>
+      <el-table :data="recordList" :header-cell-style="{background:'#f3f3f3'}" 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"/>
+        <el-table-column prop="time" label="时间" align="center"/>
+        <el-table-column prop="remarks" label="意见" align="center"/>
+      </el-table>
+    </el-row>
+
+    <el-dialog
+      :visible.sync="dialogVisible"
+      :append-to-body="true"
+      title="位置详情"
+    >
+      <arc-gis-map :longitude="caseDetail.lng" :latitude="caseDetail.lat"/>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import _ from 'lodash'
+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 { radioMap } from './radioMap'
+
+export default {
+  name: 'CaseDetail',
+  components: { ArcGisMap },
+  props: {
+    id: {
+      type: String,
+      default: ''
+    },
+    row: {
+      type: Object,
+      default: null
+    },
+    showProcess: {
+      type: Boolean,
+      default: true
+    },
+    showNeedVisit: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      caseDetail: {},
+      operationKey: '', // 案件处理按钮key
+      fileIdVerify: [], // 核实照片id
+      fileIdProcess: [], // 处理照片id
+      fileIdCheck: [], // 核查照片id
+      recordList: [], // 流转记录列表
+      processForm: { // 提交案卷处理表单
+        processId: '', // 流程实例ID
+        bizId: '', // 业务表单ID(caseId)
+        currState: '', // 当前案件状态
+        changeState: '', // 案件流转后状态
+        remarks: '', // 审批意见
+        approvalResult: '' // 审批结果标志
+      },
+      commonLanguage: '', // 常用语
+      commonLanguageList: [], // 常用语列表
+      processRadioList: [], // 案件处理单选按钮
+      processCompShow: '', // 案卷处理组件显示
+      processCompObj: {}, // 案卷处理组件相关对象
+      dialogVisible: false
+    }
+  },
+  computed: {
+    isNeedVisit: function() {
+      return this.caseDetail.isNeedRevisit === 1 ? '需要回访' : '不需要回访'
+    },
+    // 是否显示案卷图片
+    showImage: function() {
+      if (this.fileIdVerify.length === 0 && this.fileIdProcess.length === 0 && this.fileIdCheck.length === 0) {
+        return false
+      } else {
+        return true
+      }
+    }
+  },
+  mounted() {
+    this.initData()
+  },
+  methods: {
+    async initData() {
+      // 查询案件详情接口
+      const resDetail = await getCaseDetail(this.row.id)
+      console.log('detail', resDetail)
+      this.caseDetail = resDetail.data[0]
+
+      // 解析图片id
+      if (this.caseDetail.fileIdVerify) {
+        this.fileIdVerify = this.caseDetail.fileIdVerify.split(',')
+      }
+      if (this.caseDetail.fileIdProcess) {
+        this.fileIdProcess = this.caseDetail.fileIdProcess.split(',')
+      }
+      if (this.caseDetail.fileIdCheck) {
+        this.fileIdCheck = this.caseDetail.fileIdCheck.split(',')
+      }
+
+      // 查询常用语列表
+      const languageRes = await getCommonLanguage()
+      this.commonLanguageList = languageRes.data
+
+      // 查询流转记录接口
+      this.processForm.processId = this.caseDetail.processId
+      const resRecord = await historicalRecords(this.processForm.processId)
+      this.recordList = resRecord.data
+      console.log(this.recordList)
+
+      if (this.showProcess) {
+        this.initProcess()
+      }
+    },
+    // 初始化案件处理单选键组
+    async initProcess() {
+      const res = await nextNodes(this.caseDetail.caseState)
+      this.processRadioList = res.data
+    },
+    /**
+     * 选择常用语，更新审核意见
+     */
+    selectCommonLang(value) {
+      this.processForm.remarks = value
+    },
+    /**
+     * 选择大类，更新小类下拉框
+     */
+    async selectCaseType(value) {
+      const caseTypeDetailRes = await getCaseTypeDetailList(this.caseDetail.eorc, this.processCompObj.caseType) // 小类
+      this.processCompObj.caseTypeDetailList = caseTypeDetailRes.data
+      this.processCompObj.caseTypeDetail = caseTypeDetailRes.data[0].id
+    },
+    /**
+     * 选择小类，更新立案标准下拉框
+     */
+    async selectCaseTypeDetail(value) {
+      const caseTypeTimesRes = await getCaseTypeTimes(this.processCompObj.caseTypeDetail) // 小类
+      this.processCompObj.caseTypeTimeList = caseTypeTimesRes.data
+      this.processCompObj.caseTypeTime = caseTypeTimesRes.data[0].id
+    },
+    /**
+     * 案卷等级和立案标准发生改变时，更新hours和minutes
+     */
+    updateHoursAndMins() {
+      console.log('updateHoursAndMins', this.processCompObj.caseTypeTime)
+      if (!this.processCompObj.caseLevel) {
+        this.$message.error('请选择案卷等级')
+        return
+      }
+      if (!this.processCompObj.caseTypeTime) {
+        this.processCompObj.hours = ''
+        this.processCompObj.minutes = ''
+        return
+      }
+      const caseTypeTimeObj = _.find(this.processCompObj.caseTypeTimeList, ['id', this.processCompObj.caseTypeTime])
+      console.log(this.processCompObj.caseTypeTime, caseTypeTimeObj)
+      const day = parseInt(caseTypeTimeObj.day)
+      let hours = parseInt(caseTypeTimeObj.hours)
+      const minutes = parseInt(caseTypeTimeObj.minutes)
+      if (day) {
+        switch (this.processCompObj.caseLevel) {
+          case '1':
+            hours += day * 7
+            break
+          case '2':
+            hours += day * 24
+            break
+          default:
+            this.$message.error('请选择案卷等级')
+        }
+      }
+      this.processCompObj.hours = hours
+      this.processCompObj.minutes = minutes
+    },
+    setDefaultUserId(radioConfig) { // 注意caseDetail.verifyPersonId和userlist中的id类型要一致
+      switch (radioConfig.passBack) {
+        case 'verifyPersonId': { // 原核实人员
+          this.$set(this.processCompObj, 'taskUserId', this.caseDetail.verifyPersonId)
+          break
+        }
+        case 'processPersonid': { // 原处理人员
+          this.$set(this.processCompObj, 'taskUserId', this.caseDetail.processPersonid)
+          break
+        }
+        default : {
+          this.$set(this.processCompObj, 'taskUserId', '')
+          break
+        }
+      }
+    },
+    // 选择案卷处理操作
+    async selectNextOperation() {
+      console.log(this.operationKey, radioMap[this.operationKey])
+      const radioConfig = radioMap[this.operationKey]
+      if (!radioConfig.showComp) {
+        this.processCompShow = ''
+        return
+      }
+      switch (radioConfig.showComp.split('_')[0]) {
+        case 'selectUser': { // 选择用户
+          this.processCompShow = 'selectUser'
+          const roleTips = radioConfig.showComp.split('_')[1]
+          const userRes = await getUserList(roleTips)
+          this.$set(this.processCompObj, 'userList', userRes.data)
+          // 有默认id的设默认id
+          this.setDefaultUserId(radioConfig)
+          break
+        }
+        case 'selectDept': { // 选择部门
+          this.processCompShow = 'selectDept'
+          const deptRes = await getDeptList()
+          this.$set(this.processCompObj, 'deptList', deptRes.data)
+          this.$set(this.processCompObj, 'dispatchDeptId', '')
+          break
+        }
+        case 'selectCaseTime': { // 大类，小类，选择立案标准，可输入时分(立案)
+          this.processCompShow = 'selectCaseTime'
+          const caseTypeRes = await getCaseTypeList(this.caseDetail.eorc) // 大类
+          this.$set(this.processCompObj, 'caseTypeList', caseTypeRes.data)
+          const defaultCaseType = _.find(this.processCompObj.caseTypeList, ['typeCode', this.caseDetail.casetypeCode])
+          this.$set(this.processCompObj, 'caseType', defaultCaseType.id)
+
+          const caseTypeDetailRes = await getCaseTypeDetailList(this.caseDetail.eorc, this.processCompObj.caseType) // 小类
+          this.$set(this.processCompObj, 'caseTypeDetailList', caseTypeDetailRes.data)
+          const defaultCaseTypeDetail = _.find(this.processCompObj.caseTypeDetailList, ['typeDetailCode', this.caseDetail.casetypeDetailCode])
+          this.$set(this.processCompObj, 'caseTypeDetail', defaultCaseTypeDetail.id)
+
+          const caseTypeTimeRes = await getCaseTypeTimes(this.processCompObj.caseTypeDetail) // 立案标准
+          this.$set(this.processCompObj, 'caseTypeTimeList', caseTypeTimeRes.data)
+          this.$set(this.processCompObj, 'caseTypeTime', this.caseDetail.casetypesTimeId)
+
+          const caseLevelRes = await getCaseLevelList() // 案卷等级
+          this.$set(this.processCompObj, 'caseLevelList', caseLevelRes.data)
+          this.$set(this.processCompObj, 'caseLevel', this.caseDetail.caseLevel.toString())
+
+          this.$set(this.processCompObj, 'hours', '')
+          this.$set(this.processCompObj, 'minutes', '')
+          this.updateHoursAndMins()
+          break
+        }
+        case 'selectFilingType': { // 选择归档类型
+          this.processCompShow = 'selectFilingType'
+          const filingTypeRes = await getFilingTypeList()
+          this.$set(this.processCompObj, 'filingTypeList', filingTypeRes.data)
+          this.$set(this.processCompObj, 'filingType', '')
+          break
+        }
+        case 'inputDelayTime': { // 输入延期时间
+          this.processCompShow = 'inputDelayTime'
+          this.$set(this.processCompObj, 'hours', '')
+          this.$set(this.processCompObj, 'minutes', '')
+          break
+        }
+        default:
+          this.processCompShow = ''
+          break
+      }
+    },
+    // 构建提交表单
+    buildForm() {
+      console.log('buildForm', this.operationKey)
+      // 通用参数
+      // processId,remarks已有
+      this.processForm.bizId = this.row.id
+      this.processForm.currState = this.caseDetail.caseState
+      if (!this.operationKey) {
+        this.$message.error('请选择案卷处理操作类型')
+        return false
+      }
+      const radioObj = _.find(this.processRadioList, ['operationKey', this.operationKey])
+      this.processForm.changeState = radioObj.nextState
+      this.processForm.approvalResult = radioObj.approvalResult
+
+      // 其他参数
+      const radioConfig = radioMap[this.operationKey]
+      console.log(radioConfig)
+      debugger
+      // 1. taskUserId
+      if ((radioConfig.showComp && radioConfig.showComp.indexOf('selectUser') > -1) || radioConfig.passBack === 'verifyPersonId' || radioConfig.passBack === 'processPersonid') {
+        if (!this.processCompObj.taskUserId) {
+          this.$message.error('请选择人员')
+          return false
+        }
+        this.processForm.taskUserId = this.processCompObj.taskUserId
+      }
+      // 2. dispatchDeptId
+      if (radioConfig.showComp === 'selectDept') {
+        if (!this.processCompObj.dispatchDeptId) {
+          this.$message.error('请选择部门')
+          return false
+        }
+        this.processForm.dispatchDeptId = this.processCompObj.dispatchDeptId
+      } else if (radioConfig.passBack === 'onedeptid') {
+        this.processForm.dispatchDeptId = this.caseDetail.onedeptid
+      }
+      // 3. isNeedRevisit
+      if (radioConfig.passBack === 'isNeedRevisit') {
+        this.processForm.isNeedRevisit = this.caseDetail.isNeedRevisit
+      }
+      // 4. hours,minutes
+      if (radioConfig.showComp === 'selectCaseTime' || radioConfig.showComp === 'inputDelayTime') {
+        if (!this.processCompObj.hours || !this.processCompObj.minutes) {
+          this.$message.error('请输入时间')
+          return false
+        }
+        this.processForm.hours = this.processCompObj.hours
+        this.processForm.minutes = this.processCompObj.minutes
+      }
+      // caseLevel,caseTypeTimes,caseType,caseTypeDetail（立案）
+      if (radioConfig.showComp === 'selectCaseTime') {
+        if (!this.processCompObj.caseLevel) {
+          this.$message.error('请选择案卷等级')
+          return false
+        }
+        this.processForm.caseLevel = this.processCompObj.caseLevel
+        if (!this.processCompObj.caseType) {
+          this.$message.error('请选择案卷大类')
+          return false
+        }
+        this.processForm.caseType = this.processCompObj.caseType
+        if (!this.processCompObj.caseTypeDetail) {
+          this.$message.error('请选择案卷小类')
+          return false
+        }
+        this.processForm.caseTypeDetail = this.processCompObj.caseTypeDetail
+        if (!this.processCompObj.caseTypeTimes) {
+          this.$message.error('请选择立案标准')
+          return false
+        }
+        this.processForm.caseTypeTimes = this.processCompObj.caseTypeTimes
+      }
+      // 5. filingType
+      if (radioConfig.showComp === 'selectFilingType') {
+        if (!this.processCompObj.filingType) {
+          this.$message.error('请选择归档类型')
+          return false
+        }
+        this.processForm.filingType = this.processCompObj.filingType
+      }
+      console.log(this.processForm)
+      return true
+    },
+    submit() {
+      console.log('submit')
+      this.$confirm('确定提交案件处理吗?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        // 点击“确定”后的操作
+        const isBuild = this.buildForm()
+        if (!isBuild) {
+          return
+        }
+        completeCaseTask(this.processForm).then(response => {
+          if (response.code === 200) {
+            this.$message.success('提交成功')
+            this.$emit('submitProcess', this.caseDetail.caseid)
+          } else {
+            this.$message.error('提交失败')
+          }
+        })
+      }).catch(() => {
+        // 点击“取消”后的操作
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  $tableTitleHeight:46px;
+  .table-title{
+    background-color:rgba(243, 243, 243, 1);
+    height: 46px;
+    .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
+    }
+  }
+  .app-container{
+    // padding-top: 50px;
+    margin-bottom: 20px;
+  }
+  .form{
+    margin: 20px;
+    // margin-left: 20px;
+    // margin-right: 20px;
+  }
+  .table{
+    margin: 20px;
+    width: 98%;
+  }
+  .title{
+    margin-left: 38px;
+    font-size: 14px;
+    font-weight: bold;
+  }
+  .button{
+    margin-bottom: 30px;
+  }
+</style>
diff --git a/src/views/seo/seo.vue b/src/views/seo/seo.vue
index 1922d6c..c82ac63 100644
--- a/src/views/seo/seo.vue
+++ b/src/views/seo/seo.vue
@@ -23,7 +23,7 @@
         closable
       >
         <div class="block" style="padding-top:30px"/>
-        <case-detail :id="item.index" :row="props[item.index]" @submitProcess="submitProcess"/>
+        <case-detail-read :id="item.index" :row="props[item.index]" @submitProcess="submitProcess"/>
       </el-tab-pane>
     </el-tabs>
   </div>
@@ -32,13 +32,13 @@
 <script>
 import _ from 'lodash'
 import CaseList from '@/components/CaseCommon/caseList'
-import CaseDetail from '@/components/CaseCommon/caseDetail'
+import CaseDetailRead from '@/components/CaseCommon/caseDetailRead'
 import { seoSearch } from '@/api/seo/seo'
 import SearchDiv from '@/views/seo/components/searchDiv'
 
 export default {
   name: 'Seo',
-  components: { SearchDiv, CaseList, CaseDetail },
+  components: { SearchDiv, CaseList, CaseDetailRead },
   data() {
     return {
       props: [], // 存储列表页传递的row