diff --git a/src/components/AudioPlayer/AudioPlayer.vue b/src/components/AudioPlayer/AudioPlayer.vue
new file mode 100644
index 0000000..4636b14
--- /dev/null
+++ b/src/components/AudioPlayer/AudioPlayer.vue
@@ -0,0 +1,235 @@
+<template>
+  <div class="di main-wrap">
+    <!-- 这里设置了ref属性后，在vue组件中，就可以用this.$refs.audio来访问该dom元素 -->
+    <audio
+      ref="audio"
+      :src="url"
+      :preload="audio.preload"
+      class="dn"
+      @play="onPlay"
+      @error="onError"
+      @waiting="onWaiting"
+      @pause="onPause"
+      @timeupdate="onTimeupdate"
+      @loadedmetadata="onLoadedmetadata"
+    />
+    <div>
+      <div v-if="name">{{ name }}</div>
+      <el-button type="primary" size="small" @click="startPlayOrPause">{{ audio.playing | transPlayPause }}</el-button>
+      <el-button v-show="!controlList.noSpeed" type="text" @click="changeSpeed">{{ audio.speed | transSpeed }}</el-button>
+
+      <el-tag type="info">{{ audio.currentTime | formatSecond }}</el-tag>
+
+      <el-slider v-show="!controlList.noProcess" v-model="sliderTime" :format-tooltip="formatProcessToolTip" class="slider" @change="changeCurrentTime"/>
+
+      <el-tag type="info">{{ audio.maxTime | formatSecond }}</el-tag>
+
+      <el-button v-show="!controlList.noMuted" type="text" @click="startMutedOrNot">{{ audio.muted | transMutedOrNot }}</el-button>
+
+      <div v-show="!controlList.noVolume">
+        <el-slider v-show="!controlList.noVolume" v-model="volume" :format-tooltip="formatVolumeToolTip" class="slider" style="width: 120px" @change="changeVolume"/>
+      </div>
+      <a v-show="!controlList.noDownload" :href="url" target="_blank" class="download" download>下载</a>
+    </div>
+  </div>
+</template>
+
+<script>
+import { realFormatSecond } from '@/utils/stringutils'
+// import { getProject } from '@/utils/baseConfig'
+export default {
+  name: 'AudioPlayer',
+  filters: {
+    formatSecond(second = 0) {
+      return realFormatSecond(second)
+    },
+    transPlayPause(value) {
+      return value ? '暂停' : '播放'
+    },
+    transMutedOrNot(value) {
+      return value ? '放音' : '静音'
+    },
+    transSpeed(value) {
+      return '快进: x' + value
+    }
+  },
+  props: {
+    name: {
+      type: String,
+      default: ''
+    },
+    url: {
+      type: String,
+      required: true
+    },
+    theSpeeds: {
+      type: Array,
+      default() {
+        return [1, 1.5, 2]
+      }
+    },
+    theControlList: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      // url: 'http://' + getProject().ws_ip + ':81/' + this.theUrl,
+      audio: {
+        currentTime: 0,
+        maxTime: 0,
+        playing: false,
+        muted: false,
+        speed: 1,
+        waiting: true,
+        preload: 'auto'
+      },
+      sliderTime: 0,
+      volume: 100,
+      speeds: this.theSpeeds,
+      controlList: {
+        // 不显示下载
+        noDownload: false,
+        // 不显示静音
+        noMuted: false,
+        // 不显示音量条
+        noVolume: false,
+        // 不显示进度条
+        noProcess: false,
+        // 只能播放一个
+        onlyOnePlaying: false,
+        // 不要快进按钮
+        noSpeed: false
+      }
+    }
+  },
+  watch: {
+    // theUrl: function(val) {
+    //   if (val) {
+    //     this.url = 'http://' + getProject().ws_ip + ':81/' + this.theUrl
+    //     this.audio.currentTime = 0
+    //   }
+    // }
+  },
+  created() {
+    this.setControlList()
+  },
+  methods: {
+    setControlList() {
+      const controlList = this.theControlList.split(' ')
+      controlList.forEach((item) => {
+        if (this.controlList[item] !== undefined) {
+          this.controlList[item] = true
+        }
+      })
+    },
+    changeSpeed() {
+      const index = this.speeds.indexOf(this.audio.speed) + 1
+      this.audio.speed = this.speeds[index % this.speeds.length]
+      this.$refs.audio.playbackRate = this.audio.speed
+    },
+    startMutedOrNot() {
+      this.$refs.audio.muted = !this.$refs.audio.muted
+      this.audio.muted = this.$refs.audio.muted
+    },
+    // 音量条toolTip
+    formatVolumeToolTip(index) {
+      return '音量条: ' + index
+    },
+    // 进度条toolTip
+    formatProcessToolTip(index = 0) {
+      index = parseInt(this.audio.maxTime / 100 * index)
+      return '进度条: ' + realFormatSecond(index)
+    },
+    // 音量改变
+    changeVolume(index = 0) {
+      this.$refs.audio.volume = index / 100
+      this.volume = index
+    },
+    // 播放跳转
+    changeCurrentTime(index) {
+      this.$refs.audio.currentTime = parseInt(index / 100 * this.audio.maxTime)
+    },
+    startPlayOrPause() {
+      return this.audio.playing ? this.pausePlay() : this.startPlay()
+    },
+    // 开始播放
+    startPlay() {
+      this.$refs.audio.play()
+    },
+    // 暂停
+    pausePlay() {
+      this.$refs.audio.pause()
+    },
+    // 当音频暂停
+    onPause() {
+      this.audio.playing = false
+    },
+    // 当发生错误, 就出现loading状态
+    onError() {
+      this.audio.waiting = true
+    },
+    // 当音频开始等待
+    onWaiting(res) {
+      console.log(res)
+    },
+    // 当音频开始播放
+    onPlay(res) {
+      console.log(res)
+      this.audio.playing = true
+      this.audio.loading = false
+      if (!this.controlList.onlyOnePlaying) {
+        return
+      }
+      const target = res.target
+      const audios = document.getElementsByTagName('audio');
+      [...audios].forEach((item) => {
+        if (item !== target) {
+          item.pause()
+        }
+      })
+    },
+    // 当timeupdate事件大概每秒一次，用来更新音频流的当前播放时间
+    onTimeupdate(res) {
+      // console.log('timeupdate')
+      // console.log(res)
+      this.audio.currentTime = res.target.currentTime
+      this.sliderTime = parseInt(this.audio.currentTime / this.audio.maxTime * 100)
+    },
+    // 当加载语音流元数据完成后，会触发该事件的回调函数
+    // 语音元数据主要是语音的长度之类的数据
+    onLoadedmetadata(res) {
+      console.log('loadedmetadata')
+      console.log(res)
+      this.audio.waiting = false
+      this.audio.maxTime = parseInt(res.target.duration)
+    }
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+  .main-wrap{
+    padding: 10px 15px;
+  }
+  .slider {
+    display: inline-block;
+    width: 240px;
+    position: relative;
+    top: 14px;
+    margin-left: 15px;
+    margin-right: 15px;
+  }
+  .di {
+    display: inline-block;
+  }
+  .download {
+    color: #409EFF;
+    margin-left: 15px;
+  }
+  .dn{
+    display: none;
+  }
+</style>

diff --git a/src/components/AudioPlayer/AudioPlayer.vue b/src/components/AudioPlayer/AudioPlayer.vue
new file mode 100644
index 0000000..4636b14
--- /dev/null
+++ b/src/components/AudioPlayer/AudioPlayer.vue
@@ -0,0 +1,235 @@
+<template>
+  <div class="di main-wrap">
+    <!-- 这里设置了ref属性后，在vue组件中，就可以用this.$refs.audio来访问该dom元素 -->
+    <audio
+      ref="audio"
+      :src="url"
+      :preload="audio.preload"
+      class="dn"
+      @play="onPlay"
+      @error="onError"
+      @waiting="onWaiting"
+      @pause="onPause"
+      @timeupdate="onTimeupdate"
+      @loadedmetadata="onLoadedmetadata"
+    />
+    <div>
+      <div v-if="name">{{ name }}</div>
+      <el-button type="primary" size="small" @click="startPlayOrPause">{{ audio.playing | transPlayPause }}</el-button>
+      <el-button v-show="!controlList.noSpeed" type="text" @click="changeSpeed">{{ audio.speed | transSpeed }}</el-button>
+
+      <el-tag type="info">{{ audio.currentTime | formatSecond }}</el-tag>
+
+      <el-slider v-show="!controlList.noProcess" v-model="sliderTime" :format-tooltip="formatProcessToolTip" class="slider" @change="changeCurrentTime"/>
+
+      <el-tag type="info">{{ audio.maxTime | formatSecond }}</el-tag>
+
+      <el-button v-show="!controlList.noMuted" type="text" @click="startMutedOrNot">{{ audio.muted | transMutedOrNot }}</el-button>
+
+      <div v-show="!controlList.noVolume">
+        <el-slider v-show="!controlList.noVolume" v-model="volume" :format-tooltip="formatVolumeToolTip" class="slider" style="width: 120px" @change="changeVolume"/>
+      </div>
+      <a v-show="!controlList.noDownload" :href="url" target="_blank" class="download" download>下载</a>
+    </div>
+  </div>
+</template>
+
+<script>
+import { realFormatSecond } from '@/utils/stringutils'
+// import { getProject } from '@/utils/baseConfig'
+export default {
+  name: 'AudioPlayer',
+  filters: {
+    formatSecond(second = 0) {
+      return realFormatSecond(second)
+    },
+    transPlayPause(value) {
+      return value ? '暂停' : '播放'
+    },
+    transMutedOrNot(value) {
+      return value ? '放音' : '静音'
+    },
+    transSpeed(value) {
+      return '快进: x' + value
+    }
+  },
+  props: {
+    name: {
+      type: String,
+      default: ''
+    },
+    url: {
+      type: String,
+      required: true
+    },
+    theSpeeds: {
+      type: Array,
+      default() {
+        return [1, 1.5, 2]
+      }
+    },
+    theControlList: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      // url: 'http://' + getProject().ws_ip + ':81/' + this.theUrl,
+      audio: {
+        currentTime: 0,
+        maxTime: 0,
+        playing: false,
+        muted: false,
+        speed: 1,
+        waiting: true,
+        preload: 'auto'
+      },
+      sliderTime: 0,
+      volume: 100,
+      speeds: this.theSpeeds,
+      controlList: {
+        // 不显示下载
+        noDownload: false,
+        // 不显示静音
+        noMuted: false,
+        // 不显示音量条
+        noVolume: false,
+        // 不显示进度条
+        noProcess: false,
+        // 只能播放一个
+        onlyOnePlaying: false,
+        // 不要快进按钮
+        noSpeed: false
+      }
+    }
+  },
+  watch: {
+    // theUrl: function(val) {
+    //   if (val) {
+    //     this.url = 'http://' + getProject().ws_ip + ':81/' + this.theUrl
+    //     this.audio.currentTime = 0
+    //   }
+    // }
+  },
+  created() {
+    this.setControlList()
+  },
+  methods: {
+    setControlList() {
+      const controlList = this.theControlList.split(' ')
+      controlList.forEach((item) => {
+        if (this.controlList[item] !== undefined) {
+          this.controlList[item] = true
+        }
+      })
+    },
+    changeSpeed() {
+      const index = this.speeds.indexOf(this.audio.speed) + 1
+      this.audio.speed = this.speeds[index % this.speeds.length]
+      this.$refs.audio.playbackRate = this.audio.speed
+    },
+    startMutedOrNot() {
+      this.$refs.audio.muted = !this.$refs.audio.muted
+      this.audio.muted = this.$refs.audio.muted
+    },
+    // 音量条toolTip
+    formatVolumeToolTip(index) {
+      return '音量条: ' + index
+    },
+    // 进度条toolTip
+    formatProcessToolTip(index = 0) {
+      index = parseInt(this.audio.maxTime / 100 * index)
+      return '进度条: ' + realFormatSecond(index)
+    },
+    // 音量改变
+    changeVolume(index = 0) {
+      this.$refs.audio.volume = index / 100
+      this.volume = index
+    },
+    // 播放跳转
+    changeCurrentTime(index) {
+      this.$refs.audio.currentTime = parseInt(index / 100 * this.audio.maxTime)
+    },
+    startPlayOrPause() {
+      return this.audio.playing ? this.pausePlay() : this.startPlay()
+    },
+    // 开始播放
+    startPlay() {
+      this.$refs.audio.play()
+    },
+    // 暂停
+    pausePlay() {
+      this.$refs.audio.pause()
+    },
+    // 当音频暂停
+    onPause() {
+      this.audio.playing = false
+    },
+    // 当发生错误, 就出现loading状态
+    onError() {
+      this.audio.waiting = true
+    },
+    // 当音频开始等待
+    onWaiting(res) {
+      console.log(res)
+    },
+    // 当音频开始播放
+    onPlay(res) {
+      console.log(res)
+      this.audio.playing = true
+      this.audio.loading = false
+      if (!this.controlList.onlyOnePlaying) {
+        return
+      }
+      const target = res.target
+      const audios = document.getElementsByTagName('audio');
+      [...audios].forEach((item) => {
+        if (item !== target) {
+          item.pause()
+        }
+      })
+    },
+    // 当timeupdate事件大概每秒一次，用来更新音频流的当前播放时间
+    onTimeupdate(res) {
+      // console.log('timeupdate')
+      // console.log(res)
+      this.audio.currentTime = res.target.currentTime
+      this.sliderTime = parseInt(this.audio.currentTime / this.audio.maxTime * 100)
+    },
+    // 当加载语音流元数据完成后，会触发该事件的回调函数
+    // 语音元数据主要是语音的长度之类的数据
+    onLoadedmetadata(res) {
+      console.log('loadedmetadata')
+      console.log(res)
+      this.audio.waiting = false
+      this.audio.maxTime = parseInt(res.target.duration)
+    }
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+  .main-wrap{
+    padding: 10px 15px;
+  }
+  .slider {
+    display: inline-block;
+    width: 240px;
+    position: relative;
+    top: 14px;
+    margin-left: 15px;
+    margin-right: 15px;
+  }
+  .di {
+    display: inline-block;
+  }
+  .download {
+    color: #409EFF;
+    margin-left: 15px;
+  }
+  .dn{
+    display: none;
+  }
+</style>
diff --git a/src/utils/stringutils.js b/src/utils/stringutils.js
new file mode 100644
index 0000000..4ff753d
--- /dev/null
+++ b/src/utils/stringutils.js
@@ -0,0 +1,13 @@
+export function realFormatSecond(second) {
+  var secondType = typeof second
+  if (secondType === 'number' || secondType === 'string') {
+    second = parseInt(second)
+    var hours = Math.floor(second / 3600)
+    second = second - hours * 3600
+    var mimute = Math.floor(second / 60)
+    second = second - mimute * 60
+    return hours + ':' + ('0' + mimute).slice(-2) + ':' + ('0' + second).slice(-2)
+  } else {
+    return '0:00:00'
+  }
+}

diff --git a/src/components/AudioPlayer/AudioPlayer.vue b/src/components/AudioPlayer/AudioPlayer.vue
new file mode 100644
index 0000000..4636b14
--- /dev/null
+++ b/src/components/AudioPlayer/AudioPlayer.vue
@@ -0,0 +1,235 @@
+<template>
+  <div class="di main-wrap">
+    <!-- 这里设置了ref属性后，在vue组件中，就可以用this.$refs.audio来访问该dom元素 -->
+    <audio
+      ref="audio"
+      :src="url"
+      :preload="audio.preload"
+      class="dn"
+      @play="onPlay"
+      @error="onError"
+      @waiting="onWaiting"
+      @pause="onPause"
+      @timeupdate="onTimeupdate"
+      @loadedmetadata="onLoadedmetadata"
+    />
+    <div>
+      <div v-if="name">{{ name }}</div>
+      <el-button type="primary" size="small" @click="startPlayOrPause">{{ audio.playing | transPlayPause }}</el-button>
+      <el-button v-show="!controlList.noSpeed" type="text" @click="changeSpeed">{{ audio.speed | transSpeed }}</el-button>
+
+      <el-tag type="info">{{ audio.currentTime | formatSecond }}</el-tag>
+
+      <el-slider v-show="!controlList.noProcess" v-model="sliderTime" :format-tooltip="formatProcessToolTip" class="slider" @change="changeCurrentTime"/>
+
+      <el-tag type="info">{{ audio.maxTime | formatSecond }}</el-tag>
+
+      <el-button v-show="!controlList.noMuted" type="text" @click="startMutedOrNot">{{ audio.muted | transMutedOrNot }}</el-button>
+
+      <div v-show="!controlList.noVolume">
+        <el-slider v-show="!controlList.noVolume" v-model="volume" :format-tooltip="formatVolumeToolTip" class="slider" style="width: 120px" @change="changeVolume"/>
+      </div>
+      <a v-show="!controlList.noDownload" :href="url" target="_blank" class="download" download>下载</a>
+    </div>
+  </div>
+</template>
+
+<script>
+import { realFormatSecond } from '@/utils/stringutils'
+// import { getProject } from '@/utils/baseConfig'
+export default {
+  name: 'AudioPlayer',
+  filters: {
+    formatSecond(second = 0) {
+      return realFormatSecond(second)
+    },
+    transPlayPause(value) {
+      return value ? '暂停' : '播放'
+    },
+    transMutedOrNot(value) {
+      return value ? '放音' : '静音'
+    },
+    transSpeed(value) {
+      return '快进: x' + value
+    }
+  },
+  props: {
+    name: {
+      type: String,
+      default: ''
+    },
+    url: {
+      type: String,
+      required: true
+    },
+    theSpeeds: {
+      type: Array,
+      default() {
+        return [1, 1.5, 2]
+      }
+    },
+    theControlList: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      // url: 'http://' + getProject().ws_ip + ':81/' + this.theUrl,
+      audio: {
+        currentTime: 0,
+        maxTime: 0,
+        playing: false,
+        muted: false,
+        speed: 1,
+        waiting: true,
+        preload: 'auto'
+      },
+      sliderTime: 0,
+      volume: 100,
+      speeds: this.theSpeeds,
+      controlList: {
+        // 不显示下载
+        noDownload: false,
+        // 不显示静音
+        noMuted: false,
+        // 不显示音量条
+        noVolume: false,
+        // 不显示进度条
+        noProcess: false,
+        // 只能播放一个
+        onlyOnePlaying: false,
+        // 不要快进按钮
+        noSpeed: false
+      }
+    }
+  },
+  watch: {
+    // theUrl: function(val) {
+    //   if (val) {
+    //     this.url = 'http://' + getProject().ws_ip + ':81/' + this.theUrl
+    //     this.audio.currentTime = 0
+    //   }
+    // }
+  },
+  created() {
+    this.setControlList()
+  },
+  methods: {
+    setControlList() {
+      const controlList = this.theControlList.split(' ')
+      controlList.forEach((item) => {
+        if (this.controlList[item] !== undefined) {
+          this.controlList[item] = true
+        }
+      })
+    },
+    changeSpeed() {
+      const index = this.speeds.indexOf(this.audio.speed) + 1
+      this.audio.speed = this.speeds[index % this.speeds.length]
+      this.$refs.audio.playbackRate = this.audio.speed
+    },
+    startMutedOrNot() {
+      this.$refs.audio.muted = !this.$refs.audio.muted
+      this.audio.muted = this.$refs.audio.muted
+    },
+    // 音量条toolTip
+    formatVolumeToolTip(index) {
+      return '音量条: ' + index
+    },
+    // 进度条toolTip
+    formatProcessToolTip(index = 0) {
+      index = parseInt(this.audio.maxTime / 100 * index)
+      return '进度条: ' + realFormatSecond(index)
+    },
+    // 音量改变
+    changeVolume(index = 0) {
+      this.$refs.audio.volume = index / 100
+      this.volume = index
+    },
+    // 播放跳转
+    changeCurrentTime(index) {
+      this.$refs.audio.currentTime = parseInt(index / 100 * this.audio.maxTime)
+    },
+    startPlayOrPause() {
+      return this.audio.playing ? this.pausePlay() : this.startPlay()
+    },
+    // 开始播放
+    startPlay() {
+      this.$refs.audio.play()
+    },
+    // 暂停
+    pausePlay() {
+      this.$refs.audio.pause()
+    },
+    // 当音频暂停
+    onPause() {
+      this.audio.playing = false
+    },
+    // 当发生错误, 就出现loading状态
+    onError() {
+      this.audio.waiting = true
+    },
+    // 当音频开始等待
+    onWaiting(res) {
+      console.log(res)
+    },
+    // 当音频开始播放
+    onPlay(res) {
+      console.log(res)
+      this.audio.playing = true
+      this.audio.loading = false
+      if (!this.controlList.onlyOnePlaying) {
+        return
+      }
+      const target = res.target
+      const audios = document.getElementsByTagName('audio');
+      [...audios].forEach((item) => {
+        if (item !== target) {
+          item.pause()
+        }
+      })
+    },
+    // 当timeupdate事件大概每秒一次，用来更新音频流的当前播放时间
+    onTimeupdate(res) {
+      // console.log('timeupdate')
+      // console.log(res)
+      this.audio.currentTime = res.target.currentTime
+      this.sliderTime = parseInt(this.audio.currentTime / this.audio.maxTime * 100)
+    },
+    // 当加载语音流元数据完成后，会触发该事件的回调函数
+    // 语音元数据主要是语音的长度之类的数据
+    onLoadedmetadata(res) {
+      console.log('loadedmetadata')
+      console.log(res)
+      this.audio.waiting = false
+      this.audio.maxTime = parseInt(res.target.duration)
+    }
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+  .main-wrap{
+    padding: 10px 15px;
+  }
+  .slider {
+    display: inline-block;
+    width: 240px;
+    position: relative;
+    top: 14px;
+    margin-left: 15px;
+    margin-right: 15px;
+  }
+  .di {
+    display: inline-block;
+  }
+  .download {
+    color: #409EFF;
+    margin-left: 15px;
+  }
+  .dn{
+    display: none;
+  }
+</style>
diff --git a/src/utils/stringutils.js b/src/utils/stringutils.js
new file mode 100644
index 0000000..4ff753d
--- /dev/null
+++ b/src/utils/stringutils.js
@@ -0,0 +1,13 @@
+export function realFormatSecond(second) {
+  var secondType = typeof second
+  if (secondType === 'number' || secondType === 'string') {
+    second = parseInt(second)
+    var hours = Math.floor(second / 3600)
+    second = second - hours * 3600
+    var mimute = Math.floor(second / 60)
+    second = second - mimute * 60
+    return hours + ':' + ('0' + mimute).slice(-2) + ':' + ('0' + second).slice(-2)
+  } else {
+    return '0:00:00'
+  }
+}
diff --git a/src/views/callCase/callCase.vue b/src/views/callCase/callCase.vue
index 5aa10b7..5941e6c 100644
--- a/src/views/callCase/callCase.vue
+++ b/src/views/callCase/callCase.vue
@@ -36,7 +36,7 @@
                 </el-select>
               </el-form-item>
             </div>
-            <div class="form-item" style="padding-left: 10px; display: block;">
+            <div class="form-item" style="padding-left: 10px;display: flex;height: fit-content;;">
               <el-button type="primary" size="small" @click="showHistoryList">历史记录</el-button>
               <el-button type="primary" size="small" @click="openMapQueryDialog">地图查询</el-button>
             </div>
@@ -146,8 +146,8 @@
             </div>
             <div class="form-item" style="width: 40%;display: block;padding-right: 19px;">
               <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-input-number v-model="caseForm.bzhours" :min="0" style="width:100px;margin-right: 5px" />小时
+                <el-input-number v-model="caseForm.bzminis" :min="0" :max="59" style="width:100px;margin-left: 20px; margin-right: 5px" />分钟
               </el-form-item>
             </div>
             <div class="form-item">
@@ -174,7 +174,14 @@
         </div>
 
         <div class="sub-block">
-          <el-form-item label="图片信息" prop="images">
+          <el-form-item label="附件类型">
+            <el-radio-group v-model="fileType" size="small" class="file-radio">
+              <el-radio-button label="img">图片</el-radio-button>
+              <el-radio-button label="audio">音频</el-radio-button>
+              <el-radio-button label="video">视频</el-radio-button>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item v-show="fileType==='img'" label="上传图片" prop="images">
             <el-upload
               ref="upload"
               :before-upload="handleBeforeUpload"
@@ -191,6 +198,18 @@
               <i class="el-icon-plus"/>
             </el-upload>
           </el-form-item>
+          <el-form-item v-show="fileType==='video'" label="上传视频" prop="video">
+            <video-upload
+              :action="uploadPath"
+              :token="token"
+              @submitVideo="submitVideo"/>
+          </el-form-item>
+          <el-form-item v-show="fileType==='audio'" label="上传音频" prop="aduio">
+            <audio-upload
+              :action="uploadPath"
+              :token="token"
+              @submitAudio="submitAudio"/>
+          </el-form-item>
           <el-row :gutter="20">
             <el-col :span="24" style="margin-bottom: 40px; text-align: center;">
               <el-button type="primary" size="medium" icon="el-icon-check" style="width: 200px;" @click="saveData"> 提交 </el-button>
@@ -231,12 +250,16 @@
 import { Uploadimg } from '@/api/common'
 import TianDiTuMap from '@/components/Map/tiandiMap'
 import ArcgisMapComp from '@/components/Map/arcGISMap'
+import VideoUpload from './components/videoUpload'
+import AudioUpload from './components/audioUpload'
 
 export default {
   name: 'CallCase',
   components: {// 注册组件
     TianDiTuMap: TianDiTuMap,
-    ArcgisMapComp: ArcgisMapComp
+    ArcgisMapComp: ArcgisMapComp,
+    VideoUpload: VideoUpload,
+    AudioUpload: AudioUpload
   },
   data() {
     const phoneValidator = (rule, value, callback) => {
@@ -299,7 +322,8 @@
       }, // 表单验证
       hideUpload: false,
       fileList: [],
-      uploadPath: process.env.BASE_API + 'imageUpload', // 图片上传路径
+      uploadPath: this.baseConfig.baseUrl + '/file/upload', // 图片上传路径
+      token: '',
       dialogImageUrl: '',
       dialogVisible: false,
       mapDialogVisible: false, // 地图对话框
@@ -315,7 +339,8 @@
       showVerifyPerson: true,
       showCaseTypesTime: false,
       caseTypeCodeAuto: '', // 自动生成的案卷大类代码
-      caseTypeDetailCodeAuto: '' // 自动生成的案卷小类代码
+      caseTypeDetailCodeAuto: '', // 自动生成的案卷小类代码
+      fileType: ''
     }
   },
   computed: {
@@ -359,8 +384,17 @@
     this.initCaseEorC()
     this.initDept()
     this.initVerifyPerson()
+
+    this.token = this.$store.getters.token
   },
   methods: {
+    // todo 视频列表
+    submitVideo(videoList) {
+      console.log('videoList', videoList)
+    },
+    submitAudio(audioList) {
+      console.log('audioList', audioList)
+    },
     initDept() {
       getDeptList().then(response => {
         this.deptOpts = response.data
@@ -739,6 +773,12 @@
     border-top: 12px solid #ebebeb;
     padding: 20px;
   }
+  .file-radio {
+    //margin: 10px;
+  }
+  .el-radio-group {
+    display: flex;
+  }
 
   /deep/ .el-input__count-inner, .el-input__count{
     line-height: initial !important

diff --git a/src/components/AudioPlayer/AudioPlayer.vue b/src/components/AudioPlayer/AudioPlayer.vue
new file mode 100644
index 0000000..4636b14
--- /dev/null
+++ b/src/components/AudioPlayer/AudioPlayer.vue
@@ -0,0 +1,235 @@
+<template>
+  <div class="di main-wrap">
+    <!-- 这里设置了ref属性后，在vue组件中，就可以用this.$refs.audio来访问该dom元素 -->
+    <audio
+      ref="audio"
+      :src="url"
+      :preload="audio.preload"
+      class="dn"
+      @play="onPlay"
+      @error="onError"
+      @waiting="onWaiting"
+      @pause="onPause"
+      @timeupdate="onTimeupdate"
+      @loadedmetadata="onLoadedmetadata"
+    />
+    <div>
+      <div v-if="name">{{ name }}</div>
+      <el-button type="primary" size="small" @click="startPlayOrPause">{{ audio.playing | transPlayPause }}</el-button>
+      <el-button v-show="!controlList.noSpeed" type="text" @click="changeSpeed">{{ audio.speed | transSpeed }}</el-button>
+
+      <el-tag type="info">{{ audio.currentTime | formatSecond }}</el-tag>
+
+      <el-slider v-show="!controlList.noProcess" v-model="sliderTime" :format-tooltip="formatProcessToolTip" class="slider" @change="changeCurrentTime"/>
+
+      <el-tag type="info">{{ audio.maxTime | formatSecond }}</el-tag>
+
+      <el-button v-show="!controlList.noMuted" type="text" @click="startMutedOrNot">{{ audio.muted | transMutedOrNot }}</el-button>
+
+      <div v-show="!controlList.noVolume">
+        <el-slider v-show="!controlList.noVolume" v-model="volume" :format-tooltip="formatVolumeToolTip" class="slider" style="width: 120px" @change="changeVolume"/>
+      </div>
+      <a v-show="!controlList.noDownload" :href="url" target="_blank" class="download" download>下载</a>
+    </div>
+  </div>
+</template>
+
+<script>
+import { realFormatSecond } from '@/utils/stringutils'
+// import { getProject } from '@/utils/baseConfig'
+export default {
+  name: 'AudioPlayer',
+  filters: {
+    formatSecond(second = 0) {
+      return realFormatSecond(second)
+    },
+    transPlayPause(value) {
+      return value ? '暂停' : '播放'
+    },
+    transMutedOrNot(value) {
+      return value ? '放音' : '静音'
+    },
+    transSpeed(value) {
+      return '快进: x' + value
+    }
+  },
+  props: {
+    name: {
+      type: String,
+      default: ''
+    },
+    url: {
+      type: String,
+      required: true
+    },
+    theSpeeds: {
+      type: Array,
+      default() {
+        return [1, 1.5, 2]
+      }
+    },
+    theControlList: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      // url: 'http://' + getProject().ws_ip + ':81/' + this.theUrl,
+      audio: {
+        currentTime: 0,
+        maxTime: 0,
+        playing: false,
+        muted: false,
+        speed: 1,
+        waiting: true,
+        preload: 'auto'
+      },
+      sliderTime: 0,
+      volume: 100,
+      speeds: this.theSpeeds,
+      controlList: {
+        // 不显示下载
+        noDownload: false,
+        // 不显示静音
+        noMuted: false,
+        // 不显示音量条
+        noVolume: false,
+        // 不显示进度条
+        noProcess: false,
+        // 只能播放一个
+        onlyOnePlaying: false,
+        // 不要快进按钮
+        noSpeed: false
+      }
+    }
+  },
+  watch: {
+    // theUrl: function(val) {
+    //   if (val) {
+    //     this.url = 'http://' + getProject().ws_ip + ':81/' + this.theUrl
+    //     this.audio.currentTime = 0
+    //   }
+    // }
+  },
+  created() {
+    this.setControlList()
+  },
+  methods: {
+    setControlList() {
+      const controlList = this.theControlList.split(' ')
+      controlList.forEach((item) => {
+        if (this.controlList[item] !== undefined) {
+          this.controlList[item] = true
+        }
+      })
+    },
+    changeSpeed() {
+      const index = this.speeds.indexOf(this.audio.speed) + 1
+      this.audio.speed = this.speeds[index % this.speeds.length]
+      this.$refs.audio.playbackRate = this.audio.speed
+    },
+    startMutedOrNot() {
+      this.$refs.audio.muted = !this.$refs.audio.muted
+      this.audio.muted = this.$refs.audio.muted
+    },
+    // 音量条toolTip
+    formatVolumeToolTip(index) {
+      return '音量条: ' + index
+    },
+    // 进度条toolTip
+    formatProcessToolTip(index = 0) {
+      index = parseInt(this.audio.maxTime / 100 * index)
+      return '进度条: ' + realFormatSecond(index)
+    },
+    // 音量改变
+    changeVolume(index = 0) {
+      this.$refs.audio.volume = index / 100
+      this.volume = index
+    },
+    // 播放跳转
+    changeCurrentTime(index) {
+      this.$refs.audio.currentTime = parseInt(index / 100 * this.audio.maxTime)
+    },
+    startPlayOrPause() {
+      return this.audio.playing ? this.pausePlay() : this.startPlay()
+    },
+    // 开始播放
+    startPlay() {
+      this.$refs.audio.play()
+    },
+    // 暂停
+    pausePlay() {
+      this.$refs.audio.pause()
+    },
+    // 当音频暂停
+    onPause() {
+      this.audio.playing = false
+    },
+    // 当发生错误, 就出现loading状态
+    onError() {
+      this.audio.waiting = true
+    },
+    // 当音频开始等待
+    onWaiting(res) {
+      console.log(res)
+    },
+    // 当音频开始播放
+    onPlay(res) {
+      console.log(res)
+      this.audio.playing = true
+      this.audio.loading = false
+      if (!this.controlList.onlyOnePlaying) {
+        return
+      }
+      const target = res.target
+      const audios = document.getElementsByTagName('audio');
+      [...audios].forEach((item) => {
+        if (item !== target) {
+          item.pause()
+        }
+      })
+    },
+    // 当timeupdate事件大概每秒一次，用来更新音频流的当前播放时间
+    onTimeupdate(res) {
+      // console.log('timeupdate')
+      // console.log(res)
+      this.audio.currentTime = res.target.currentTime
+      this.sliderTime = parseInt(this.audio.currentTime / this.audio.maxTime * 100)
+    },
+    // 当加载语音流元数据完成后，会触发该事件的回调函数
+    // 语音元数据主要是语音的长度之类的数据
+    onLoadedmetadata(res) {
+      console.log('loadedmetadata')
+      console.log(res)
+      this.audio.waiting = false
+      this.audio.maxTime = parseInt(res.target.duration)
+    }
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+  .main-wrap{
+    padding: 10px 15px;
+  }
+  .slider {
+    display: inline-block;
+    width: 240px;
+    position: relative;
+    top: 14px;
+    margin-left: 15px;
+    margin-right: 15px;
+  }
+  .di {
+    display: inline-block;
+  }
+  .download {
+    color: #409EFF;
+    margin-left: 15px;
+  }
+  .dn{
+    display: none;
+  }
+</style>
diff --git a/src/utils/stringutils.js b/src/utils/stringutils.js
new file mode 100644
index 0000000..4ff753d
--- /dev/null
+++ b/src/utils/stringutils.js
@@ -0,0 +1,13 @@
+export function realFormatSecond(second) {
+  var secondType = typeof second
+  if (secondType === 'number' || secondType === 'string') {
+    second = parseInt(second)
+    var hours = Math.floor(second / 3600)
+    second = second - hours * 3600
+    var mimute = Math.floor(second / 60)
+    second = second - mimute * 60
+    return hours + ':' + ('0' + mimute).slice(-2) + ':' + ('0' + second).slice(-2)
+  } else {
+    return '0:00:00'
+  }
+}
diff --git a/src/views/callCase/callCase.vue b/src/views/callCase/callCase.vue
index 5aa10b7..5941e6c 100644
--- a/src/views/callCase/callCase.vue
+++ b/src/views/callCase/callCase.vue
@@ -36,7 +36,7 @@
                 </el-select>
               </el-form-item>
             </div>
-            <div class="form-item" style="padding-left: 10px; display: block;">
+            <div class="form-item" style="padding-left: 10px;display: flex;height: fit-content;;">
               <el-button type="primary" size="small" @click="showHistoryList">历史记录</el-button>
               <el-button type="primary" size="small" @click="openMapQueryDialog">地图查询</el-button>
             </div>
@@ -146,8 +146,8 @@
             </div>
             <div class="form-item" style="width: 40%;display: block;padding-right: 19px;">
               <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-input-number v-model="caseForm.bzhours" :min="0" style="width:100px;margin-right: 5px" />小时
+                <el-input-number v-model="caseForm.bzminis" :min="0" :max="59" style="width:100px;margin-left: 20px; margin-right: 5px" />分钟
               </el-form-item>
             </div>
             <div class="form-item">
@@ -174,7 +174,14 @@
         </div>
 
         <div class="sub-block">
-          <el-form-item label="图片信息" prop="images">
+          <el-form-item label="附件类型">
+            <el-radio-group v-model="fileType" size="small" class="file-radio">
+              <el-radio-button label="img">图片</el-radio-button>
+              <el-radio-button label="audio">音频</el-radio-button>
+              <el-radio-button label="video">视频</el-radio-button>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item v-show="fileType==='img'" label="上传图片" prop="images">
             <el-upload
               ref="upload"
               :before-upload="handleBeforeUpload"
@@ -191,6 +198,18 @@
               <i class="el-icon-plus"/>
             </el-upload>
           </el-form-item>
+          <el-form-item v-show="fileType==='video'" label="上传视频" prop="video">
+            <video-upload
+              :action="uploadPath"
+              :token="token"
+              @submitVideo="submitVideo"/>
+          </el-form-item>
+          <el-form-item v-show="fileType==='audio'" label="上传音频" prop="aduio">
+            <audio-upload
+              :action="uploadPath"
+              :token="token"
+              @submitAudio="submitAudio"/>
+          </el-form-item>
           <el-row :gutter="20">
             <el-col :span="24" style="margin-bottom: 40px; text-align: center;">
               <el-button type="primary" size="medium" icon="el-icon-check" style="width: 200px;" @click="saveData"> 提交 </el-button>
@@ -231,12 +250,16 @@
 import { Uploadimg } from '@/api/common'
 import TianDiTuMap from '@/components/Map/tiandiMap'
 import ArcgisMapComp from '@/components/Map/arcGISMap'
+import VideoUpload from './components/videoUpload'
+import AudioUpload from './components/audioUpload'
 
 export default {
   name: 'CallCase',
   components: {// 注册组件
     TianDiTuMap: TianDiTuMap,
-    ArcgisMapComp: ArcgisMapComp
+    ArcgisMapComp: ArcgisMapComp,
+    VideoUpload: VideoUpload,
+    AudioUpload: AudioUpload
   },
   data() {
     const phoneValidator = (rule, value, callback) => {
@@ -299,7 +322,8 @@
       }, // 表单验证
       hideUpload: false,
       fileList: [],
-      uploadPath: process.env.BASE_API + 'imageUpload', // 图片上传路径
+      uploadPath: this.baseConfig.baseUrl + '/file/upload', // 图片上传路径
+      token: '',
       dialogImageUrl: '',
       dialogVisible: false,
       mapDialogVisible: false, // 地图对话框
@@ -315,7 +339,8 @@
       showVerifyPerson: true,
       showCaseTypesTime: false,
       caseTypeCodeAuto: '', // 自动生成的案卷大类代码
-      caseTypeDetailCodeAuto: '' // 自动生成的案卷小类代码
+      caseTypeDetailCodeAuto: '', // 自动生成的案卷小类代码
+      fileType: ''
     }
   },
   computed: {
@@ -359,8 +384,17 @@
     this.initCaseEorC()
     this.initDept()
     this.initVerifyPerson()
+
+    this.token = this.$store.getters.token
   },
   methods: {
+    // todo 视频列表
+    submitVideo(videoList) {
+      console.log('videoList', videoList)
+    },
+    submitAudio(audioList) {
+      console.log('audioList', audioList)
+    },
     initDept() {
       getDeptList().then(response => {
         this.deptOpts = response.data
@@ -739,6 +773,12 @@
     border-top: 12px solid #ebebeb;
     padding: 20px;
   }
+  .file-radio {
+    //margin: 10px;
+  }
+  .el-radio-group {
+    display: flex;
+  }
 
   /deep/ .el-input__count-inner, .el-input__count{
     line-height: initial !important
diff --git a/src/views/callCase/components/audioUpload.vue b/src/views/callCase/components/audioUpload.vue
new file mode 100644
index 0000000..bb9252a
--- /dev/null
+++ b/src/views/callCase/components/audioUpload.vue
@@ -0,0 +1,134 @@
+<template>
+  <div>
+    <el-upload
+      ref="audioUpload"
+      :action="action"
+      :headers="{token:token}"
+      :limit="limit"
+      :on-preview="handlePreview"
+      :on-remove="handleRemove"
+      :on-success="handleSuccess"
+      :on-exceed="handleExceed"
+      :before-upload="beforeUpload"
+      multiple
+      class="upload-demo">
+      <el-button slot="trigger" :disabled="fileList.length >= limit" size="small" type="primary">选取文件</el-button>
+      <div slot="tip" class="el-upload__tip">最多上传{{ limit }}段音频，每段大小不超过5M</div>
+    </el-upload>
+
+    <el-dialog :visible.sync="dialogVisible" :close-on-click-modal="false" append-to-body width="600px" title="音频预览" class="audio-dialog" @close="closeSound">
+      <audio-player ref="audio" :url="playUrl" :name="playName" :the-control-list="controlList" />
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import AudioPlayer from '@/components/AudioPlayer/AudioPlayer'
+export default {
+  name: 'AudioUpload',
+  components: { AudioPlayer },
+  props: {
+    limit: {
+      type: Number,
+      default: 2
+    },
+    action: {
+      type: String,
+      default: '#'
+    },
+    token: {
+      type: String,
+      default: ''
+    },
+    fileList: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    }
+  },
+  data() {
+    return {
+      dialogVisible: false,
+      playUrl: '',
+      playName: '',
+      controlList: 'noDownload onlyOnePlaying noMuted noVolume'
+    }
+  },
+  methods: {
+    // 将图片文件传回给父组件
+    submitFile() {
+      this.$emit('submitAudio', this.fileList)
+    },
+    // 上传完成
+    handleSuccess(response, file, fileList) {
+      console.log('handleSuccess', fileList)
+      if (response.code !== 200) {
+        fileList.splice(fileList.length - 1, 1)
+        this.fileList.splice(this.fileList.length - 1, 1)
+        this.$message.error('上传失败')
+      } else {
+        this.$message.success('上传成功')
+        console.log('file', file)
+        console.log('response', response)
+        const obj = {
+          name: file.name,
+          status: 'success',
+          uid: file.uid,
+          url: this.baseConfig.baseUrl + '/static/' + response.data
+        }
+        this.fileList.push(obj)
+        this.submitFile()
+      }
+    },
+    // 移除
+    handleRemove(file, fileList) {
+      for (const i in this.fileList) {
+        if (this.fileList[i].uid === file.uid) {
+          this.fileList.splice(i, 1)
+        }
+      }
+      this.submitFile()
+    },
+    // 预览
+    handlePreview(file) {
+      console.log('preview', file)
+      this.playUrl = this.baseConfig.baseUrl + '/static/' + file.response.data
+      this.playName = file.name
+      this.dialogVisible = true
+    },
+    // 上传前检查音频格式和大小
+    beforeUpload(file) {
+      const isLt5M = file.size / 1024 / 1024 < 5
+      if (['audio/mpeg', 'audio/ogg', 'audio/mp3'].indexOf(file.type) === -1) {
+        this.$message.error('请上传正确的音频格式')
+        return false
+      }
+      if (!isLt5M) {
+        this.$message.error('上传视频大小不能超过5MB!')
+        return false
+      }
+    },
+    // 限制提示
+    handleExceed(files, fileList) {
+      console.log('handleExceed', this.limit)
+      const limit = this.limit
+      this.$message.warning(`限制选择` + limit + `段音频，本次选择了 ${files.length} 段音频，共选择了 ${files.length + fileList.length} 段音频`)
+    },
+    // 关闭播放弹窗
+    closeSound() {
+      console.log('close')
+      this.$refs.audio.pausePlay()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.upload-demo{
+  width: fit-content;
+}
+/deep/ .el-dialog__body{
+    padding-top: 10px;
+}
+</style>

diff --git a/src/components/AudioPlayer/AudioPlayer.vue b/src/components/AudioPlayer/AudioPlayer.vue
new file mode 100644
index 0000000..4636b14
--- /dev/null
+++ b/src/components/AudioPlayer/AudioPlayer.vue
@@ -0,0 +1,235 @@
+<template>
+  <div class="di main-wrap">
+    <!-- 这里设置了ref属性后，在vue组件中，就可以用this.$refs.audio来访问该dom元素 -->
+    <audio
+      ref="audio"
+      :src="url"
+      :preload="audio.preload"
+      class="dn"
+      @play="onPlay"
+      @error="onError"
+      @waiting="onWaiting"
+      @pause="onPause"
+      @timeupdate="onTimeupdate"
+      @loadedmetadata="onLoadedmetadata"
+    />
+    <div>
+      <div v-if="name">{{ name }}</div>
+      <el-button type="primary" size="small" @click="startPlayOrPause">{{ audio.playing | transPlayPause }}</el-button>
+      <el-button v-show="!controlList.noSpeed" type="text" @click="changeSpeed">{{ audio.speed | transSpeed }}</el-button>
+
+      <el-tag type="info">{{ audio.currentTime | formatSecond }}</el-tag>
+
+      <el-slider v-show="!controlList.noProcess" v-model="sliderTime" :format-tooltip="formatProcessToolTip" class="slider" @change="changeCurrentTime"/>
+
+      <el-tag type="info">{{ audio.maxTime | formatSecond }}</el-tag>
+
+      <el-button v-show="!controlList.noMuted" type="text" @click="startMutedOrNot">{{ audio.muted | transMutedOrNot }}</el-button>
+
+      <div v-show="!controlList.noVolume">
+        <el-slider v-show="!controlList.noVolume" v-model="volume" :format-tooltip="formatVolumeToolTip" class="slider" style="width: 120px" @change="changeVolume"/>
+      </div>
+      <a v-show="!controlList.noDownload" :href="url" target="_blank" class="download" download>下载</a>
+    </div>
+  </div>
+</template>
+
+<script>
+import { realFormatSecond } from '@/utils/stringutils'
+// import { getProject } from '@/utils/baseConfig'
+export default {
+  name: 'AudioPlayer',
+  filters: {
+    formatSecond(second = 0) {
+      return realFormatSecond(second)
+    },
+    transPlayPause(value) {
+      return value ? '暂停' : '播放'
+    },
+    transMutedOrNot(value) {
+      return value ? '放音' : '静音'
+    },
+    transSpeed(value) {
+      return '快进: x' + value
+    }
+  },
+  props: {
+    name: {
+      type: String,
+      default: ''
+    },
+    url: {
+      type: String,
+      required: true
+    },
+    theSpeeds: {
+      type: Array,
+      default() {
+        return [1, 1.5, 2]
+      }
+    },
+    theControlList: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      // url: 'http://' + getProject().ws_ip + ':81/' + this.theUrl,
+      audio: {
+        currentTime: 0,
+        maxTime: 0,
+        playing: false,
+        muted: false,
+        speed: 1,
+        waiting: true,
+        preload: 'auto'
+      },
+      sliderTime: 0,
+      volume: 100,
+      speeds: this.theSpeeds,
+      controlList: {
+        // 不显示下载
+        noDownload: false,
+        // 不显示静音
+        noMuted: false,
+        // 不显示音量条
+        noVolume: false,
+        // 不显示进度条
+        noProcess: false,
+        // 只能播放一个
+        onlyOnePlaying: false,
+        // 不要快进按钮
+        noSpeed: false
+      }
+    }
+  },
+  watch: {
+    // theUrl: function(val) {
+    //   if (val) {
+    //     this.url = 'http://' + getProject().ws_ip + ':81/' + this.theUrl
+    //     this.audio.currentTime = 0
+    //   }
+    // }
+  },
+  created() {
+    this.setControlList()
+  },
+  methods: {
+    setControlList() {
+      const controlList = this.theControlList.split(' ')
+      controlList.forEach((item) => {
+        if (this.controlList[item] !== undefined) {
+          this.controlList[item] = true
+        }
+      })
+    },
+    changeSpeed() {
+      const index = this.speeds.indexOf(this.audio.speed) + 1
+      this.audio.speed = this.speeds[index % this.speeds.length]
+      this.$refs.audio.playbackRate = this.audio.speed
+    },
+    startMutedOrNot() {
+      this.$refs.audio.muted = !this.$refs.audio.muted
+      this.audio.muted = this.$refs.audio.muted
+    },
+    // 音量条toolTip
+    formatVolumeToolTip(index) {
+      return '音量条: ' + index
+    },
+    // 进度条toolTip
+    formatProcessToolTip(index = 0) {
+      index = parseInt(this.audio.maxTime / 100 * index)
+      return '进度条: ' + realFormatSecond(index)
+    },
+    // 音量改变
+    changeVolume(index = 0) {
+      this.$refs.audio.volume = index / 100
+      this.volume = index
+    },
+    // 播放跳转
+    changeCurrentTime(index) {
+      this.$refs.audio.currentTime = parseInt(index / 100 * this.audio.maxTime)
+    },
+    startPlayOrPause() {
+      return this.audio.playing ? this.pausePlay() : this.startPlay()
+    },
+    // 开始播放
+    startPlay() {
+      this.$refs.audio.play()
+    },
+    // 暂停
+    pausePlay() {
+      this.$refs.audio.pause()
+    },
+    // 当音频暂停
+    onPause() {
+      this.audio.playing = false
+    },
+    // 当发生错误, 就出现loading状态
+    onError() {
+      this.audio.waiting = true
+    },
+    // 当音频开始等待
+    onWaiting(res) {
+      console.log(res)
+    },
+    // 当音频开始播放
+    onPlay(res) {
+      console.log(res)
+      this.audio.playing = true
+      this.audio.loading = false
+      if (!this.controlList.onlyOnePlaying) {
+        return
+      }
+      const target = res.target
+      const audios = document.getElementsByTagName('audio');
+      [...audios].forEach((item) => {
+        if (item !== target) {
+          item.pause()
+        }
+      })
+    },
+    // 当timeupdate事件大概每秒一次，用来更新音频流的当前播放时间
+    onTimeupdate(res) {
+      // console.log('timeupdate')
+      // console.log(res)
+      this.audio.currentTime = res.target.currentTime
+      this.sliderTime = parseInt(this.audio.currentTime / this.audio.maxTime * 100)
+    },
+    // 当加载语音流元数据完成后，会触发该事件的回调函数
+    // 语音元数据主要是语音的长度之类的数据
+    onLoadedmetadata(res) {
+      console.log('loadedmetadata')
+      console.log(res)
+      this.audio.waiting = false
+      this.audio.maxTime = parseInt(res.target.duration)
+    }
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+  .main-wrap{
+    padding: 10px 15px;
+  }
+  .slider {
+    display: inline-block;
+    width: 240px;
+    position: relative;
+    top: 14px;
+    margin-left: 15px;
+    margin-right: 15px;
+  }
+  .di {
+    display: inline-block;
+  }
+  .download {
+    color: #409EFF;
+    margin-left: 15px;
+  }
+  .dn{
+    display: none;
+  }
+</style>
diff --git a/src/utils/stringutils.js b/src/utils/stringutils.js
new file mode 100644
index 0000000..4ff753d
--- /dev/null
+++ b/src/utils/stringutils.js
@@ -0,0 +1,13 @@
+export function realFormatSecond(second) {
+  var secondType = typeof second
+  if (secondType === 'number' || secondType === 'string') {
+    second = parseInt(second)
+    var hours = Math.floor(second / 3600)
+    second = second - hours * 3600
+    var mimute = Math.floor(second / 60)
+    second = second - mimute * 60
+    return hours + ':' + ('0' + mimute).slice(-2) + ':' + ('0' + second).slice(-2)
+  } else {
+    return '0:00:00'
+  }
+}
diff --git a/src/views/callCase/callCase.vue b/src/views/callCase/callCase.vue
index 5aa10b7..5941e6c 100644
--- a/src/views/callCase/callCase.vue
+++ b/src/views/callCase/callCase.vue
@@ -36,7 +36,7 @@
                 </el-select>
               </el-form-item>
             </div>
-            <div class="form-item" style="padding-left: 10px; display: block;">
+            <div class="form-item" style="padding-left: 10px;display: flex;height: fit-content;;">
               <el-button type="primary" size="small" @click="showHistoryList">历史记录</el-button>
               <el-button type="primary" size="small" @click="openMapQueryDialog">地图查询</el-button>
             </div>
@@ -146,8 +146,8 @@
             </div>
             <div class="form-item" style="width: 40%;display: block;padding-right: 19px;">
               <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-input-number v-model="caseForm.bzhours" :min="0" style="width:100px;margin-right: 5px" />小时
+                <el-input-number v-model="caseForm.bzminis" :min="0" :max="59" style="width:100px;margin-left: 20px; margin-right: 5px" />分钟
               </el-form-item>
             </div>
             <div class="form-item">
@@ -174,7 +174,14 @@
         </div>
 
         <div class="sub-block">
-          <el-form-item label="图片信息" prop="images">
+          <el-form-item label="附件类型">
+            <el-radio-group v-model="fileType" size="small" class="file-radio">
+              <el-radio-button label="img">图片</el-radio-button>
+              <el-radio-button label="audio">音频</el-radio-button>
+              <el-radio-button label="video">视频</el-radio-button>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item v-show="fileType==='img'" label="上传图片" prop="images">
             <el-upload
               ref="upload"
               :before-upload="handleBeforeUpload"
@@ -191,6 +198,18 @@
               <i class="el-icon-plus"/>
             </el-upload>
           </el-form-item>
+          <el-form-item v-show="fileType==='video'" label="上传视频" prop="video">
+            <video-upload
+              :action="uploadPath"
+              :token="token"
+              @submitVideo="submitVideo"/>
+          </el-form-item>
+          <el-form-item v-show="fileType==='audio'" label="上传音频" prop="aduio">
+            <audio-upload
+              :action="uploadPath"
+              :token="token"
+              @submitAudio="submitAudio"/>
+          </el-form-item>
           <el-row :gutter="20">
             <el-col :span="24" style="margin-bottom: 40px; text-align: center;">
               <el-button type="primary" size="medium" icon="el-icon-check" style="width: 200px;" @click="saveData"> 提交 </el-button>
@@ -231,12 +250,16 @@
 import { Uploadimg } from '@/api/common'
 import TianDiTuMap from '@/components/Map/tiandiMap'
 import ArcgisMapComp from '@/components/Map/arcGISMap'
+import VideoUpload from './components/videoUpload'
+import AudioUpload from './components/audioUpload'
 
 export default {
   name: 'CallCase',
   components: {// 注册组件
     TianDiTuMap: TianDiTuMap,
-    ArcgisMapComp: ArcgisMapComp
+    ArcgisMapComp: ArcgisMapComp,
+    VideoUpload: VideoUpload,
+    AudioUpload: AudioUpload
   },
   data() {
     const phoneValidator = (rule, value, callback) => {
@@ -299,7 +322,8 @@
       }, // 表单验证
       hideUpload: false,
       fileList: [],
-      uploadPath: process.env.BASE_API + 'imageUpload', // 图片上传路径
+      uploadPath: this.baseConfig.baseUrl + '/file/upload', // 图片上传路径
+      token: '',
       dialogImageUrl: '',
       dialogVisible: false,
       mapDialogVisible: false, // 地图对话框
@@ -315,7 +339,8 @@
       showVerifyPerson: true,
       showCaseTypesTime: false,
       caseTypeCodeAuto: '', // 自动生成的案卷大类代码
-      caseTypeDetailCodeAuto: '' // 自动生成的案卷小类代码
+      caseTypeDetailCodeAuto: '', // 自动生成的案卷小类代码
+      fileType: ''
     }
   },
   computed: {
@@ -359,8 +384,17 @@
     this.initCaseEorC()
     this.initDept()
     this.initVerifyPerson()
+
+    this.token = this.$store.getters.token
   },
   methods: {
+    // todo 视频列表
+    submitVideo(videoList) {
+      console.log('videoList', videoList)
+    },
+    submitAudio(audioList) {
+      console.log('audioList', audioList)
+    },
     initDept() {
       getDeptList().then(response => {
         this.deptOpts = response.data
@@ -739,6 +773,12 @@
     border-top: 12px solid #ebebeb;
     padding: 20px;
   }
+  .file-radio {
+    //margin: 10px;
+  }
+  .el-radio-group {
+    display: flex;
+  }
 
   /deep/ .el-input__count-inner, .el-input__count{
     line-height: initial !important
diff --git a/src/views/callCase/components/audioUpload.vue b/src/views/callCase/components/audioUpload.vue
new file mode 100644
index 0000000..bb9252a
--- /dev/null
+++ b/src/views/callCase/components/audioUpload.vue
@@ -0,0 +1,134 @@
+<template>
+  <div>
+    <el-upload
+      ref="audioUpload"
+      :action="action"
+      :headers="{token:token}"
+      :limit="limit"
+      :on-preview="handlePreview"
+      :on-remove="handleRemove"
+      :on-success="handleSuccess"
+      :on-exceed="handleExceed"
+      :before-upload="beforeUpload"
+      multiple
+      class="upload-demo">
+      <el-button slot="trigger" :disabled="fileList.length >= limit" size="small" type="primary">选取文件</el-button>
+      <div slot="tip" class="el-upload__tip">最多上传{{ limit }}段音频，每段大小不超过5M</div>
+    </el-upload>
+
+    <el-dialog :visible.sync="dialogVisible" :close-on-click-modal="false" append-to-body width="600px" title="音频预览" class="audio-dialog" @close="closeSound">
+      <audio-player ref="audio" :url="playUrl" :name="playName" :the-control-list="controlList" />
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import AudioPlayer from '@/components/AudioPlayer/AudioPlayer'
+export default {
+  name: 'AudioUpload',
+  components: { AudioPlayer },
+  props: {
+    limit: {
+      type: Number,
+      default: 2
+    },
+    action: {
+      type: String,
+      default: '#'
+    },
+    token: {
+      type: String,
+      default: ''
+    },
+    fileList: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    }
+  },
+  data() {
+    return {
+      dialogVisible: false,
+      playUrl: '',
+      playName: '',
+      controlList: 'noDownload onlyOnePlaying noMuted noVolume'
+    }
+  },
+  methods: {
+    // 将图片文件传回给父组件
+    submitFile() {
+      this.$emit('submitAudio', this.fileList)
+    },
+    // 上传完成
+    handleSuccess(response, file, fileList) {
+      console.log('handleSuccess', fileList)
+      if (response.code !== 200) {
+        fileList.splice(fileList.length - 1, 1)
+        this.fileList.splice(this.fileList.length - 1, 1)
+        this.$message.error('上传失败')
+      } else {
+        this.$message.success('上传成功')
+        console.log('file', file)
+        console.log('response', response)
+        const obj = {
+          name: file.name,
+          status: 'success',
+          uid: file.uid,
+          url: this.baseConfig.baseUrl + '/static/' + response.data
+        }
+        this.fileList.push(obj)
+        this.submitFile()
+      }
+    },
+    // 移除
+    handleRemove(file, fileList) {
+      for (const i in this.fileList) {
+        if (this.fileList[i].uid === file.uid) {
+          this.fileList.splice(i, 1)
+        }
+      }
+      this.submitFile()
+    },
+    // 预览
+    handlePreview(file) {
+      console.log('preview', file)
+      this.playUrl = this.baseConfig.baseUrl + '/static/' + file.response.data
+      this.playName = file.name
+      this.dialogVisible = true
+    },
+    // 上传前检查音频格式和大小
+    beforeUpload(file) {
+      const isLt5M = file.size / 1024 / 1024 < 5
+      if (['audio/mpeg', 'audio/ogg', 'audio/mp3'].indexOf(file.type) === -1) {
+        this.$message.error('请上传正确的音频格式')
+        return false
+      }
+      if (!isLt5M) {
+        this.$message.error('上传视频大小不能超过5MB!')
+        return false
+      }
+    },
+    // 限制提示
+    handleExceed(files, fileList) {
+      console.log('handleExceed', this.limit)
+      const limit = this.limit
+      this.$message.warning(`限制选择` + limit + `段音频，本次选择了 ${files.length} 段音频，共选择了 ${files.length + fileList.length} 段音频`)
+    },
+    // 关闭播放弹窗
+    closeSound() {
+      console.log('close')
+      this.$refs.audio.pausePlay()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.upload-demo{
+  width: fit-content;
+}
+/deep/ .el-dialog__body{
+    padding-top: 10px;
+}
+</style>
diff --git a/src/views/callCase/components/videoUpload.vue b/src/views/callCase/components/videoUpload.vue
new file mode 100644
index 0000000..375ff38
--- /dev/null
+++ b/src/views/callCase/components/videoUpload.vue
@@ -0,0 +1,210 @@
+<template>
+  <div>
+    <el-upload
+      :action="action"
+      :on-success="handleSuccess"
+      :on-progress="handleProgress"
+      :on-exceed="handleExceed"
+      :before-upload="beforeUploadVideo"
+      :headers="{token:token}"
+      :disabled="fileLists.length >= limit || uploadBtn"
+      :limit="limit"
+      multiple
+      list-type="picture-card"
+      class="video-upload"
+      accept="video/mp4, video/ogg, video/flv,video/avi,video/wmv,video/rmvb">
+      <i slot="default" class="el-icon-plus"/>
+      <div slot="tip" class="el-upload__tip">最多上传{{ limit }}段视频，每段大小不超过10M</div>
+      <div slot="file" slot-scope="{file}">
+        <video :src="file.url" class="el-upload-list__item-thumbnail" alt=""/>
+        <span class="el-upload-list__item-actions">
+          <span class="el-upload-list__item-preview" @click="handleShowVideo(file)">
+            <i class="el-icon-video-play"/>
+          </span>
+          <!--<span class="el-upload-list__item-edit" @click="handleEditVideo(file)">-->
+          <!--<i class="el-icon-edit"/>-->
+          <!--</span>-->
+          <span class="el-upload-list__item-delete" @click="handleRemove(file)">
+            <i class="el-icon-delete"/>
+          </span>
+        </span>
+        <el-progress v-if="showProgress && file.url == uploadUrl" :color="colors" :percentage="Number(uploadPercentage)" type="circle" class="progressModule"/>
+      </div>
+    </el-upload>
+
+    <el-dialog :visible.sync="dialogVisible" :close-on-click-modal="false" append-to-body width="40%" title="视频预览" class="video-dialog">
+      <video :src="dialogImageUrl" alt="" autoplay class="video" controls="controls"/>
+    </el-dialog>
+    <el-dialog :visible.sync="editView" width="40%" append-to-body>
+      <el-input :rows="4" v-model="editForm.url" type="textarea" @input="editVideo"/>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'VideoUpload',
+  props: {
+    limit: {
+      type: Number,
+      default: 2
+    },
+    action: {
+      type: String,
+      default: '#'
+    },
+    token: {
+      type: String,
+      default: ''
+    },
+    fileList: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    }
+  },
+  data() {
+    return {
+      dialogImageUrl: '',
+      dialogVisible: false,
+      fileLists: this.fileList,
+      editForm: {
+        url: '',
+        uid: null
+      },
+      editView: false,
+      uploadPercentage: 0,
+      showProgress: false,
+      uploadUrl: '',
+      colors: [
+        { color: '#ADD8E6', percentage: 20 },
+        { color: '#87CEEB', percentage: 40 },
+        { color: '#87CEFA', percentage: 60 },
+        { color: '#00BFFF', percentage: 80 },
+        { color: '#278df9', percentage: 100 }
+      ],
+      uploadBtn: false
+    }
+  },
+  mounted() {
+  },
+  methods: {
+    // 移除视频
+    handleRemove(file) {
+      for (const i in this.fileLists) {
+        if (this.fileLists[i].uid === file.uid) {
+          this.fileLists.splice(i, 1)
+        }
+      }
+      this.submitFile()
+    },
+    beforeUploadVideo(file) {
+      const isLt10M = file.size / 1024 / 1024 < 10
+      if (['video/mp4', 'video/ogg', 'video/flv', 'video/avi', 'video/wmv', 'video/rmvb'].indexOf(file.type) === -1) {
+        this.$message.error('请上传正确的视频格式')
+        return false
+      }
+      if (!isLt10M) {
+        this.$message.error('上传视频大小不能超过10MB!')
+        return false
+      }
+    },
+    handleShowVideo(file) {
+      console.log(file)
+      this.dialogImageUrl = this.baseConfig.baseUrl + '/static/' + file.response.data
+      this.dialogVisible = true
+    },
+    // 上传完成
+    handleSuccess(response, file, fileList) {
+      this.showProgress = false
+      this.uploadBtn = false
+      if (response.code !== 200) {
+        fileList.splice(fileList.length - 1, 1)
+        this.fileLists.splice(this.fileLists.length - 1, 1)
+        this.$message.error('上传失败')
+      } else {
+        this.$message.success('上传成功')
+        const obj = {
+          name: response.data,
+          status: 'success',
+          uid: file.uid,
+          url: this.baseConfig.baseUrl + '/static/' + response.data
+        }
+        this.fileLists.push(obj)
+        this.submitFile()
+      }
+    },
+    // 将图片文件传回给父组件
+    submitFile() {
+      this.$emit('submitVideo', this.fileLists)
+    },
+    // 上传进度
+    handleProgress(event, file, fileList) {
+      this.uploadBtn = true
+      this.uploadUrl = file.url
+      this.showProgress = true
+      // this.uploadPercentage = file.percentage.toFixed(0)
+      this.uploadPercentage = Math.floor(event.percent)
+    },
+    // 限制提示
+    handleExceed(files, fileList) {
+      console.log('handleExceed', this.limit)
+      const limit = this.limit
+      this.$message.warning(`限制选择` + limit + `段视频，本次选择了 ${files.length} 段视频，共选择了 ${files.length + fileList.length} 段视频`)
+    },
+    // 编辑视频
+    handleEditVideo(file) {
+      this.editForm.url = file.url
+      this.editForm.uid = file.uid
+      this.editView = true
+    },
+    // 编辑视频
+    editVideo() {
+      for (const i in this.fileLists) {
+        if (this.fileLists[i].uid === this.editForm.uid) {
+          this.fileLists[i].url = this.editForm.url
+        }
+      }
+      this.submitFile()
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .el-icon-plus{
+    font-size: 30px!important;
+  }
+  .el-icon-edit{
+    font-size: 18px !important;
+  }
+  .el-icon-video-play{
+    font-size: 18px !important;
+
+  }
+  .el-icon-delete{
+    font-size: 18px !important;
+    /*color:rgb(243, 143, 130);*/
+  }
+  .video-dialog >>> .el-dialog__body {
+    text-align: center !important;
+  }
+  .el-input>>> .el-textarea__inner{
+    font-size:18px!important;
+  }
+  .video{
+    min-height: 200px;
+    max-height: 600px;
+    min-width: 200px;
+    max-width: 100%;
+  }
+  .progressModule >>> .el-progress__text{
+    color:#278df9;
+    font-size: 15px!important;
+  }
+  .video-upload >>> .el-upload-list__item div:first-child{
+    display: contents !important;
+  }
+
+</style>