diff --git a/src/api/sound.js b/src/api/sound.js
index f2017c1..804c496 100644
--- a/src/api/sound.js
+++ b/src/api/sound.js
@@ -20,3 +20,13 @@
     params
   })
 }
+
+export function getSoundName(callId) {
+  return request({
+    url: '/sound/getName',
+    method: 'get',
+    params: {
+      callId: callId
+    }
+  })
+}

diff --git a/src/api/sound.js b/src/api/sound.js
index f2017c1..804c496 100644
--- a/src/api/sound.js
+++ b/src/api/sound.js
@@ -20,3 +20,13 @@
     params
   })
 }
+
+export function getSoundName(callId) {
+  return request({
+    url: '/sound/getName',
+    method: 'get',
+    params: {
+      callId: callId
+    }
+  })
+}
diff --git a/src/views/caseManage/caseCommon/caseFormProcess.vue b/src/views/caseManage/caseCommon/caseFormProcess.vue
new file mode 100644
index 0000000..4921267
--- /dev/null
+++ b/src/views/caseManage/caseCommon/caseFormProcess.vue
@@ -0,0 +1,191 @@
+<template>
+  <div class="app-container">
+    <el-form ref="form" :model="caseForm" label-width="auto">
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <el-form-item label="事件编号">
+            <el-input :value="caseForm.caseId" size="small"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="来电时间">
+            <el-input :value="caseForm.callTime" size="small"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="联系人">
+            <el-input :value="caseForm.reporterName" size="small"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="联系电话">
+            <el-input :value="caseForm.reporterPhone" size="small"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <el-form-item label="事件来源">
+            <el-input :value="caseForm.sourceName" size="small"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="事件分类">
+            <el-input :value="caseForm.eorcName + '/' + caseForm.caseTypeName + '/' + caseForm.caseDetailTypeName" size="small"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="紧急程度">
+            <el-input :value="caseForm.caseLevelName" size="small"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="限办日期">
+            <el-input :value="caseForm.limitedTime" size="small"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <el-form-item label="事件地址">
+            <el-input :value="caseForm.areaName + '-' + caseForm.streetName + '-' + caseForm.communityName + '-' + caseForm.fieldintro" size="small"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="事件辖区">
+            <el-input :value="caseForm.areaName" size="small"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="典型案例">
+            <el-input :value="caseForm.isTypical === '1' ? '是' : '否'" size="small"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="是否要情">
+            <el-input :value="caseForm.isImportant === '1' ? '是' : '否'" size="small"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <el-form-item label="当前事件状态">
+            <el-input :value="caseForm.stateName" size="small"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="当前处理方式">
+            <el-input :value="caseForm.caseStateName" size="small"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="受理录音">
+            <el-input :value="caseForm.sound" size="small"/>
+          </el-form-item>
+        </el-col>
+        <el-button type="text" @click="playSound(caseForm.sound)">播放录音</el-button>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="回访录音">
+            <el-input :value="caseForm.satisfactionSound" size="small"/>
+          </el-form-item>
+        </el-col>
+        <el-button type="text" @click="playSound(caseForm.satisfactionSound)">播放录音</el-button>
+        <el-button v-if="caseForm.caseState === 5" type="text" @click="revisit">回访拨号</el-button>
+      </el-row>
+      <el-row>
+        <el-col :span="24">
+          <el-form-item label="事件标题">
+            <el-input :value="caseForm.title" size="small"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">
+          <el-form-item label="事件内容">
+            <el-input :value="caseForm.description" size="small"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">
+          <el-form-item label="备注信息">
+            <el-input :value="caseForm.remarks" size="small"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <!--播放音频弹窗-->
+    <el-dialog
+      :visible.sync="soundShow"
+      title="播放录音"
+      width="600px"
+      append-to-body
+      custom-class="sound-dialog"
+      @close="closeSound">
+      <audio-player ref="adplayer" :the-url="sound.url" :the-control-ist="sound.controlList"/>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+// import { caseDetail } from '@/api/callCase'
+import { getSoundName } from '@/api/sound'
+import AudioPlayer from '@/components/AudioPlayer/AudioPlayer'
+
+export default {
+  name: 'CaseFormProcess',
+  components: { AudioPlayer },
+  props: {
+    id: {
+      type: String,
+      default: ''
+    }, // 事件id（主键id）
+    caseForm: {
+      type: Object,
+      default() {
+        return {}
+      }
+    }
+  },
+  data() {
+    return {
+      sound: {
+        url: '',
+        controlList: 'noDownload noSpeed onlyOnePlaying'
+      },
+      soundShow: false // 显示音频弹窗
+    }
+  },
+  methods: {
+    // 播放录音
+    playSound(sound) {
+      if (sound) {
+        getSoundName(sound).then(res => {
+          const recordName = res.data
+          if (recordName) {
+            this.sound.url = recordName
+            this.soundShow = true
+          } else {
+            this.$message.warning('无录音')
+          }
+        })
+      } else {
+        this.$message.warning('无录音')
+      }
+    },
+    // 关闭播放弹窗
+    closeSound() {
+      this.$refs.adplayer.pausePlay()
+    },
+    // 拨打回访电话
+    revisit() {
+      const tel = this.caseForm.reporterPhone
+      this.$store.dispatch('dial', tel)
+    }
+  }
+}
+</script>

diff --git a/src/api/sound.js b/src/api/sound.js
index f2017c1..804c496 100644
--- a/src/api/sound.js
+++ b/src/api/sound.js
@@ -20,3 +20,13 @@
     params
   })
 }
+
+export function getSoundName(callId) {
+  return request({
+    url: '/sound/getName',
+    method: 'get',
+    params: {
+      callId: callId
+    }
+  })
+}
diff --git a/src/views/caseManage/caseCommon/caseFormProcess.vue b/src/views/caseManage/caseCommon/caseFormProcess.vue
new file mode 100644
index 0000000..4921267
--- /dev/null
+++ b/src/views/caseManage/caseCommon/caseFormProcess.vue
@@ -0,0 +1,191 @@
+<template>
+  <div class="app-container">
+    <el-form ref="form" :model="caseForm" label-width="auto">
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <el-form-item label="事件编号">
+            <el-input :value="caseForm.caseId" size="small"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="来电时间">
+            <el-input :value="caseForm.callTime" size="small"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="联系人">
+            <el-input :value="caseForm.reporterName" size="small"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="联系电话">
+            <el-input :value="caseForm.reporterPhone" size="small"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <el-form-item label="事件来源">
+            <el-input :value="caseForm.sourceName" size="small"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="事件分类">
+            <el-input :value="caseForm.eorcName + '/' + caseForm.caseTypeName + '/' + caseForm.caseDetailTypeName" size="small"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="紧急程度">
+            <el-input :value="caseForm.caseLevelName" size="small"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="限办日期">
+            <el-input :value="caseForm.limitedTime" size="small"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <el-form-item label="事件地址">
+            <el-input :value="caseForm.areaName + '-' + caseForm.streetName + '-' + caseForm.communityName + '-' + caseForm.fieldintro" size="small"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="事件辖区">
+            <el-input :value="caseForm.areaName" size="small"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="典型案例">
+            <el-input :value="caseForm.isTypical === '1' ? '是' : '否'" size="small"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="是否要情">
+            <el-input :value="caseForm.isImportant === '1' ? '是' : '否'" size="small"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <el-form-item label="当前事件状态">
+            <el-input :value="caseForm.stateName" size="small"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="当前处理方式">
+            <el-input :value="caseForm.caseStateName" size="small"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="受理录音">
+            <el-input :value="caseForm.sound" size="small"/>
+          </el-form-item>
+        </el-col>
+        <el-button type="text" @click="playSound(caseForm.sound)">播放录音</el-button>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="回访录音">
+            <el-input :value="caseForm.satisfactionSound" size="small"/>
+          </el-form-item>
+        </el-col>
+        <el-button type="text" @click="playSound(caseForm.satisfactionSound)">播放录音</el-button>
+        <el-button v-if="caseForm.caseState === 5" type="text" @click="revisit">回访拨号</el-button>
+      </el-row>
+      <el-row>
+        <el-col :span="24">
+          <el-form-item label="事件标题">
+            <el-input :value="caseForm.title" size="small"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">
+          <el-form-item label="事件内容">
+            <el-input :value="caseForm.description" size="small"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">
+          <el-form-item label="备注信息">
+            <el-input :value="caseForm.remarks" size="small"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <!--播放音频弹窗-->
+    <el-dialog
+      :visible.sync="soundShow"
+      title="播放录音"
+      width="600px"
+      append-to-body
+      custom-class="sound-dialog"
+      @close="closeSound">
+      <audio-player ref="adplayer" :the-url="sound.url" :the-control-ist="sound.controlList"/>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+// import { caseDetail } from '@/api/callCase'
+import { getSoundName } from '@/api/sound'
+import AudioPlayer from '@/components/AudioPlayer/AudioPlayer'
+
+export default {
+  name: 'CaseFormProcess',
+  components: { AudioPlayer },
+  props: {
+    id: {
+      type: String,
+      default: ''
+    }, // 事件id（主键id）
+    caseForm: {
+      type: Object,
+      default() {
+        return {}
+      }
+    }
+  },
+  data() {
+    return {
+      sound: {
+        url: '',
+        controlList: 'noDownload noSpeed onlyOnePlaying'
+      },
+      soundShow: false // 显示音频弹窗
+    }
+  },
+  methods: {
+    // 播放录音
+    playSound(sound) {
+      if (sound) {
+        getSoundName(sound).then(res => {
+          const recordName = res.data
+          if (recordName) {
+            this.sound.url = recordName
+            this.soundShow = true
+          } else {
+            this.$message.warning('无录音')
+          }
+        })
+      } else {
+        this.$message.warning('无录音')
+      }
+    },
+    // 关闭播放弹窗
+    closeSound() {
+      this.$refs.adplayer.pausePlay()
+    },
+    // 拨打回访电话
+    revisit() {
+      const tel = this.caseForm.reporterPhone
+      this.$store.dispatch('dial', tel)
+    }
+  }
+}
+</script>
diff --git a/src/views/caseManage/caseCommon/caseFormRead.vue b/src/views/caseManage/caseCommon/caseFormRead.vue
index ca7b572..d9d4add 100644
--- a/src/views/caseManage/caseCommon/caseFormRead.vue
+++ b/src/views/caseManage/caseCommon/caseFormRead.vue
@@ -57,13 +57,13 @@
           </el-form-item>
         </el-col>
         <el-col :span="6">
-          <el-form-item label="事件受理录音">
-            <el-input :value="caseForm.sound" size="small"/>
+          <el-form-item label="典型案例">
+            <el-input :value="caseForm.isTypical === '1' ? '是' : '否'" size="small"/>
           </el-form-item>
         </el-col>
         <el-col :span="6">
-          <el-form-item label="事件回访录音">
-            <el-input :value="caseForm.satisfactionSound" size="small"/>
+          <el-form-item label="是否要情">
+            <el-input :value="caseForm.isImportant === '1' ? '是' : '否'" size="small"/>
           </el-form-item>
         </el-col>
       </el-row>
@@ -78,16 +78,22 @@
             <el-input :value="caseForm.caseStateName" size="small"/>
           </el-form-item>
         </el-col>
-        <el-col :span="6">
-          <el-form-item label="典型案例">
-            <el-input :value="caseForm.isTypical === '1' ? '是' : '否'" size="small"/>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="受理录音">
+            <el-input :value="caseForm.sound" size="small"/>
           </el-form-item>
         </el-col>
-        <el-col :span="6">
-          <el-form-item label="是否要情">
-            <el-input :value="caseForm.isImportant === '1' ? '是' : '否'" size="small"/>
+        <el-button type="text" @click="playSound(caseForm.sound)">播放录音</el-button>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="回访录音">
+            <el-input :value="caseForm.satisfactionSound" size="small"/>
           </el-form-item>
         </el-col>
+        <el-button type="text" @click="playSound(caseForm.satisfactionSound)">播放录音</el-button>
       </el-row>
       <el-row>
         <el-col :span="24">
@@ -111,13 +117,27 @@
         </el-col>
       </el-row>
     </el-form>
+    <!--播放音频弹窗-->
+    <el-dialog
+      :visible.sync="soundShow"
+      title="播放录音"
+      width="600px"
+      append-to-body
+      custom-class="sound-dialog"
+      @close="closeSound">
+      <audio-player ref="adplayer" :the-url="sound.url" :the-control-ist="sound.controlList"/>
+    </el-dialog>
   </div>
 </template>
 
 <script>
 // import { caseDetail } from '@/api/callCase'
+import { getSoundName } from '@/api/sound'
+import AudioPlayer from '@/components/AudioPlayer/AudioPlayer'
+
 export default {
   name: 'CaseFormRead',
+  components: { AudioPlayer },
   props: {
     id: {
       type: String,
@@ -132,19 +152,34 @@
   },
   data() {
     return {
+      sound: {
+        url: '',
+        controlList: 'noDownload noSpeed onlyOnePlaying'
+      },
+      soundShow: false // 显示音频弹窗
     }
   },
   methods: {
-    /**
-     * 获取事件详情
-     */
-    // fetchDetail() {
-    //   if (this.id) {
-    //     caseDetail(this.id).then(response => {
-    //       this.caseForm = response.data
-    //     })
-    //   }
-    // }
+    // 播放录音
+    playSound(sound) {
+      if (sound) {
+        getSoundName(sound).then(res => {
+          const recordName = res.data
+          if (recordName) {
+            this.sound.url = recordName
+            this.soundShow = true
+          } else {
+            this.$message.warning('无录音')
+          }
+        })
+      } else {
+        this.$message.warning('无录音')
+      }
+    },
+    // 关闭播放弹窗
+    closeSound() {
+      this.$refs.adplayer.pausePlay()
+    }
   }
 }
 </script>

diff --git a/src/api/sound.js b/src/api/sound.js
index f2017c1..804c496 100644
--- a/src/api/sound.js
+++ b/src/api/sound.js
@@ -20,3 +20,13 @@
     params
   })
 }
+
+export function getSoundName(callId) {
+  return request({
+    url: '/sound/getName',
+    method: 'get',
+    params: {
+      callId: callId
+    }
+  })
+}
diff --git a/src/views/caseManage/caseCommon/caseFormProcess.vue b/src/views/caseManage/caseCommon/caseFormProcess.vue
new file mode 100644
index 0000000..4921267
--- /dev/null
+++ b/src/views/caseManage/caseCommon/caseFormProcess.vue
@@ -0,0 +1,191 @@
+<template>
+  <div class="app-container">
+    <el-form ref="form" :model="caseForm" label-width="auto">
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <el-form-item label="事件编号">
+            <el-input :value="caseForm.caseId" size="small"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="来电时间">
+            <el-input :value="caseForm.callTime" size="small"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="联系人">
+            <el-input :value="caseForm.reporterName" size="small"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="联系电话">
+            <el-input :value="caseForm.reporterPhone" size="small"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <el-form-item label="事件来源">
+            <el-input :value="caseForm.sourceName" size="small"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="事件分类">
+            <el-input :value="caseForm.eorcName + '/' + caseForm.caseTypeName + '/' + caseForm.caseDetailTypeName" size="small"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="紧急程度">
+            <el-input :value="caseForm.caseLevelName" size="small"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="限办日期">
+            <el-input :value="caseForm.limitedTime" size="small"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <el-form-item label="事件地址">
+            <el-input :value="caseForm.areaName + '-' + caseForm.streetName + '-' + caseForm.communityName + '-' + caseForm.fieldintro" size="small"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="事件辖区">
+            <el-input :value="caseForm.areaName" size="small"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="典型案例">
+            <el-input :value="caseForm.isTypical === '1' ? '是' : '否'" size="small"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="是否要情">
+            <el-input :value="caseForm.isImportant === '1' ? '是' : '否'" size="small"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <el-form-item label="当前事件状态">
+            <el-input :value="caseForm.stateName" size="small"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="当前处理方式">
+            <el-input :value="caseForm.caseStateName" size="small"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="受理录音">
+            <el-input :value="caseForm.sound" size="small"/>
+          </el-form-item>
+        </el-col>
+        <el-button type="text" @click="playSound(caseForm.sound)">播放录音</el-button>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="回访录音">
+            <el-input :value="caseForm.satisfactionSound" size="small"/>
+          </el-form-item>
+        </el-col>
+        <el-button type="text" @click="playSound(caseForm.satisfactionSound)">播放录音</el-button>
+        <el-button v-if="caseForm.caseState === 5" type="text" @click="revisit">回访拨号</el-button>
+      </el-row>
+      <el-row>
+        <el-col :span="24">
+          <el-form-item label="事件标题">
+            <el-input :value="caseForm.title" size="small"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">
+          <el-form-item label="事件内容">
+            <el-input :value="caseForm.description" size="small"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">
+          <el-form-item label="备注信息">
+            <el-input :value="caseForm.remarks" size="small"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <!--播放音频弹窗-->
+    <el-dialog
+      :visible.sync="soundShow"
+      title="播放录音"
+      width="600px"
+      append-to-body
+      custom-class="sound-dialog"
+      @close="closeSound">
+      <audio-player ref="adplayer" :the-url="sound.url" :the-control-ist="sound.controlList"/>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+// import { caseDetail } from '@/api/callCase'
+import { getSoundName } from '@/api/sound'
+import AudioPlayer from '@/components/AudioPlayer/AudioPlayer'
+
+export default {
+  name: 'CaseFormProcess',
+  components: { AudioPlayer },
+  props: {
+    id: {
+      type: String,
+      default: ''
+    }, // 事件id（主键id）
+    caseForm: {
+      type: Object,
+      default() {
+        return {}
+      }
+    }
+  },
+  data() {
+    return {
+      sound: {
+        url: '',
+        controlList: 'noDownload noSpeed onlyOnePlaying'
+      },
+      soundShow: false // 显示音频弹窗
+    }
+  },
+  methods: {
+    // 播放录音
+    playSound(sound) {
+      if (sound) {
+        getSoundName(sound).then(res => {
+          const recordName = res.data
+          if (recordName) {
+            this.sound.url = recordName
+            this.soundShow = true
+          } else {
+            this.$message.warning('无录音')
+          }
+        })
+      } else {
+        this.$message.warning('无录音')
+      }
+    },
+    // 关闭播放弹窗
+    closeSound() {
+      this.$refs.adplayer.pausePlay()
+    },
+    // 拨打回访电话
+    revisit() {
+      const tel = this.caseForm.reporterPhone
+      this.$store.dispatch('dial', tel)
+    }
+  }
+}
+</script>
diff --git a/src/views/caseManage/caseCommon/caseFormRead.vue b/src/views/caseManage/caseCommon/caseFormRead.vue
index ca7b572..d9d4add 100644
--- a/src/views/caseManage/caseCommon/caseFormRead.vue
+++ b/src/views/caseManage/caseCommon/caseFormRead.vue
@@ -57,13 +57,13 @@
           </el-form-item>
         </el-col>
         <el-col :span="6">
-          <el-form-item label="事件受理录音">
-            <el-input :value="caseForm.sound" size="small"/>
+          <el-form-item label="典型案例">
+            <el-input :value="caseForm.isTypical === '1' ? '是' : '否'" size="small"/>
           </el-form-item>
         </el-col>
         <el-col :span="6">
-          <el-form-item label="事件回访录音">
-            <el-input :value="caseForm.satisfactionSound" size="small"/>
+          <el-form-item label="是否要情">
+            <el-input :value="caseForm.isImportant === '1' ? '是' : '否'" size="small"/>
           </el-form-item>
         </el-col>
       </el-row>
@@ -78,16 +78,22 @@
             <el-input :value="caseForm.caseStateName" size="small"/>
           </el-form-item>
         </el-col>
-        <el-col :span="6">
-          <el-form-item label="典型案例">
-            <el-input :value="caseForm.isTypical === '1' ? '是' : '否'" size="small"/>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="受理录音">
+            <el-input :value="caseForm.sound" size="small"/>
           </el-form-item>
         </el-col>
-        <el-col :span="6">
-          <el-form-item label="是否要情">
-            <el-input :value="caseForm.isImportant === '1' ? '是' : '否'" size="small"/>
+        <el-button type="text" @click="playSound(caseForm.sound)">播放录音</el-button>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="回访录音">
+            <el-input :value="caseForm.satisfactionSound" size="small"/>
           </el-form-item>
         </el-col>
+        <el-button type="text" @click="playSound(caseForm.satisfactionSound)">播放录音</el-button>
       </el-row>
       <el-row>
         <el-col :span="24">
@@ -111,13 +117,27 @@
         </el-col>
       </el-row>
     </el-form>
+    <!--播放音频弹窗-->
+    <el-dialog
+      :visible.sync="soundShow"
+      title="播放录音"
+      width="600px"
+      append-to-body
+      custom-class="sound-dialog"
+      @close="closeSound">
+      <audio-player ref="adplayer" :the-url="sound.url" :the-control-ist="sound.controlList"/>
+    </el-dialog>
   </div>
 </template>
 
 <script>
 // import { caseDetail } from '@/api/callCase'
+import { getSoundName } from '@/api/sound'
+import AudioPlayer from '@/components/AudioPlayer/AudioPlayer'
+
 export default {
   name: 'CaseFormRead',
+  components: { AudioPlayer },
   props: {
     id: {
       type: String,
@@ -132,19 +152,34 @@
   },
   data() {
     return {
+      sound: {
+        url: '',
+        controlList: 'noDownload noSpeed onlyOnePlaying'
+      },
+      soundShow: false // 显示音频弹窗
     }
   },
   methods: {
-    /**
-     * 获取事件详情
-     */
-    // fetchDetail() {
-    //   if (this.id) {
-    //     caseDetail(this.id).then(response => {
-    //       this.caseForm = response.data
-    //     })
-    //   }
-    // }
+    // 播放录音
+    playSound(sound) {
+      if (sound) {
+        getSoundName(sound).then(res => {
+          const recordName = res.data
+          if (recordName) {
+            this.sound.url = recordName
+            this.soundShow = true
+          } else {
+            this.$message.warning('无录音')
+          }
+        })
+      } else {
+        this.$message.warning('无录音')
+      }
+    },
+    // 关闭播放弹窗
+    closeSound() {
+      this.$refs.adplayer.pausePlay()
+    }
   }
 }
 </script>
diff --git a/src/views/caseManage/caseDetail.vue b/src/views/caseManage/caseDetail.vue
index b8ed029..1303700 100644
--- a/src/views/caseManage/caseDetail.vue
+++ b/src/views/caseManage/caseDetail.vue
@@ -6,7 +6,8 @@
       <el-row class="table-title">
         <el-col :span="6"><div class="title-header"><i class="el-icon-tickets"/>事件基础信息</div></el-col>
       </el-row>
-      <case-form-read ref="caseFormRead" :case-form="caseDetail"/>
+      <case-form-process v-if="showProcess" ref="caseFormProcess" :case-form="caseDetail"/>
+      <case-form-read v-else ref="caseFormRead" :case-form="caseDetail"/>
     </div>
     <!-- 事件流程处理 -->
     <div v-if="showProcess&&caseDetail.id">
@@ -35,13 +36,14 @@
 
 <script>
 import CaseFormRead from './caseCommon/caseFormRead'
+import CaseFormProcess from './caseCommon/caseFormProcess'
 import CaseProcess from './caseCommon/caseProcess'
 import CaseRecord from './caseCommon/caseRecord'
 import { caseDetail } from '@/api/callCase'
 
 export default {
   name: 'CaseDetail',
-  components: { CaseFormRead, CaseProcess, CaseRecord },
+  components: { CaseFormRead, CaseProcess, CaseRecord, CaseFormProcess },
   data() {
     return {
       id: '',