增加录音播放按钮

src/views/incidentList.vue

@@ -96,7 +96,10 @@
                     >{{ item.place.area.area }} {{ item.place.place }}
                     {{ item.houseNumber }}</span
                   >
-                  <span>{{ item.acceptDate | timeFormat("MM-dd HH:mm") }}</span>
+                  <span>
+                    <i v-if="item.callID" @click.stop="showAudio(item.callID)" class="dash dash-dianbohuifang"></i>
+                    {{ item.acceptDate | timeFormat("MM-dd HH:mm") }}
+                  </span>
                 </div>
                 <div class="btns">
                   <cube-form-group
@@ -178,6 +181,11 @@
       :operate="models1.operate"
       textName="textarea"
     ></showModel>
+    <div class="mask" v-if="audioMask" @click="hideAudio()">
+      <audio controls autoplay="autoplay" id="bgMusic">
+        <source :src="audioSrc" type="audio/mpeg">
+      </audio>
+    </div>
   </div>
 </template>
 <script>
@@ -192,6 +200,8 @@ import LoadIng from "./../views/loading.vue";
 export default {
   data() {
     return {
+      audioSrc:'',//音频路径
+      audioMask:false,//音频
       modelsData: null, //点击弹窗的那一项数据
       modelsData1: null, //点击弹窗的那一项数据
       // 弹窗model
@@ -278,6 +288,30 @@ export default {
     }
   },
   methods: {
+    // 播放音频
+    showAudio(callID){
+      const toast = this.$createToast({
+        txt: "Loading...",
+        mask: true
+      });
+      toast.show();
+      this.$http
+        .post("service/bpm/data/fetchDataList/callrecord", {idx: 0, sum: 1, callrecord: {callAccept: callID}})
+        .then(res => {
+          toast.hide();
+          if (res.data.status == 200) {
+            res.data.list = res.data.list || [];
+            if(res.data.list.length){
+                this.audioMask = true;
+                this.audioSrc = this.$host+res.data.list[0].recordingFileName;
+            }
+          }
+        });
+    },
+    // 隐藏音频组件
+    hideAudio(){
+      this.audioMask=false;
+    },
     //确定
     ok(selectUserId) {
       console.log(selectUserId);
@@ -630,6 +664,17 @@ export default {
 };
 </script>
 <style lang="stylus" rel="stylesheet/stylus" scoped>
+.mask{
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  top: 0;
+  background: rgba(0,0,0,.5);
+  z-index: 999;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
 .btns{
   display: flex;
   justify-content: space-between

static/css/fontnew/demo_index.html

@@ -55,6 +55,12 @@
           <ul class="icon_lists dib-box">
           
             <li class="dib">
+              <span class="icon dash">&#xe601;</span>
+                <div class="name">点播回放</div>
+                <div class="code-name">&amp;#xe601;</div>
+              </li>
+          
+            <li class="dib">
               <span class="icon dash">&#xe600;</span>
                 <div class="name">加</div>
                 <div class="code-name">&amp;#xe600;</div>
@@ -114,9 +120,9 @@
 <pre><code class="language-css"
 >@font-face {
   font-family: 'dash';
-  src: url('iconfont.woff2?t=1672887795273') format('woff2'),
-       url('iconfont.woff?t=1672887795273') format('woff'),
-       url('iconfont.ttf?t=1672887795273') format('truetype');
+  src: url('iconfont.woff2?t=1681130959360') format('woff2'),
+       url('iconfont.woff?t=1681130959360') format('woff'),
+       url('iconfont.ttf?t=1681130959360') format('truetype');
 }
 </code></pre>
           <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
@@ -143,6 +149,15 @@
         <ul class="icon_lists dib-box">
           
           <li class="dib">
+            <span class="icon dash dash-dianbohuifang"></span>
+            <div class="name">
+              点播回放
+            </div>
+            <div class="code-name">.dash-dianbohuifang
+            </div>
+          </li>
+          
+          <li class="dib">
             <span class="icon dash dash-jia"></span>
             <div class="name">
               加
@@ -234,6 +249,14 @@
           
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#dash-dianbohuifang"></use>
+                </svg>
+                <div class="name">点播回放</div>
+                <div class="code-name">#dash-dianbohuifang</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
                   <use xlink:href="#dash-jia"></use>
                 </svg>
                 <div class="name">加</div>

static/css/fontnew/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "dash"; /* Project id 2879659 */
-  src: url('iconfont.woff2?t=1672887795273') format('woff2'),
-       url('iconfont.woff?t=1672887795273') format('woff'),
-       url('iconfont.ttf?t=1672887795273') format('truetype');
+  src: url('iconfont.woff2?t=1681130959360') format('woff2'),
+       url('iconfont.woff?t=1681130959360') format('woff'),
+       url('iconfont.ttf?t=1681130959360') format('truetype');
 }
 
 .dash {
@@ -13,6 +13,10 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.dash-dianbohuifang:before {
+  content: "\e601";
+}
+
 .dash-jia:before {
   content: "\e600";
 }

static/css/fontnew/iconfont.json

@@ -6,6 +6,13 @@
   "description": "引入一个新的字体图标",
   "glyphs": [
     {
+      "icon_id": "13159546",
+      "name": "点播回放",
+      "font_class": "dianbohuifang",
+      "unicode": "e601",
+      "unicode_decimal": 58881
+    },
+    {
       "icon_id": "1302",
       "name": "加",
       "font_class": "jia",