修改语音矩阵问题

src/components/Adult/preview/AudioLine.vue

@@ -13,14 +13,11 @@
           :format-tooltip="formatProcessToolTip"
           @change="changeCurrentTime"
         />
-        <span
-          ><template v-if="audio.playing">-</template
-          >{{
-            audio.maxTime
-              ? realFormatSecond(audio.maxTime - audio.currentTime)
-              : ""
-          }}</span
-        >
+        <span><template v-if="audio.playing">-</template>{{
+          audio.maxTime
+            ? realFormatSecond(audio.maxTime - audio.currentTime)
+            : ""
+        }}</span>
       </template>
       <audio
         ref="audio"
@@ -83,6 +80,7 @@ export default {
     "audio.playing": {
       handler(val) {
         this.$emit("playChange", val);
+        if (val) this.$emit("handleChangeStopAudio");
       },
     },
   },
@@ -219,7 +217,7 @@ export default {
           result = "0" + result;
         }
       } else {
-        //result = "00:" + result;
+        // result = "00:" + result;
       }
       return result;
     },

src/components/Adult/preview/VoiceMatrix.vue

@@ -42,15 +42,18 @@
             :key="`top-${i}`"
             :class="[
               'matrix-top',
-              curQue.voiceMatrix.columnSelection && (selectColumn === i ||
-                (selectedLine.type === 'column' && selectedLine.index === i))
+              curQue.voiceMatrix.columnSelection &&
+                (selectColumn === i ||
+                  (selectedLine.type === 'column' && selectedLine.index === i))
                 ? 'read'
                 : ''
             ]"
             @mouseenter="checkboxMouseenter(selectColumn === i, 'column')"
           >
             <span
-              v-if="row.type !== 'connection' && curQue.voiceMatrix.columnSelection"
+              v-if="
+                row.type !== 'connection' && curQue.voiceMatrix.columnSelection
+              "
               v-show="
                 selectColumn === i ||
                   (selectedLine.type === 'column' && selectedLine.index === i)
@@ -72,8 +75,9 @@
             :key="`start-${i}`"
             :class="[
               'column-wrapper',
-              curQue.voiceMatrix.rowSelection && (selectRow === i ||
-                (selectedLine.type === 'row' && selectedLine.index === i))
+              curQue.voiceMatrix.rowSelection &&
+                (selectRow === i ||
+                  (selectedLine.type === 'row' && selectedLine.index === i))
                 ? 'read'
                 : ''
             ]"
@@ -102,11 +106,16 @@
                 'column-wrapper',
                 (curQue.voiceMatrix.rowSelection && selectRow === i) ||
                   (curQue.voiceMatrix.columnSelection && selectColumn === j) ||
-                  (curQue.voiceMatrix.columnSelection && selectedLine.type === 'column' && selectedLine.index === j) ||
-                  (curQue.voiceMatrix.rowSelection && selectedLine.type === 'row' && selectedLine.index === i)
+                  (curQue.voiceMatrix.columnSelection &&
+                    selectedLine.type === 'column' &&
+                    selectedLine.index === j) ||
+                  (curQue.voiceMatrix.rowSelection &&
+                    selectedLine.type === 'row' &&
+                    selectedLine.index === i)
                   ? 'read'
                   : '',
-                (i === 0 && curQue.voiceMatrix.firstLineHighlight) || (j === row.length - 1 && curQue.voiceMatrix.lastColumnHighlight)
+                (i === 0 && curQue.voiceMatrix.firstLineHighlight) ||
+                  (j === row.length - 1 && curQue.voiceMatrix.lastColumnHighlight)
                   ? `highlight-${themeColor}`
                   : ''
               ]"
@@ -131,7 +140,8 @@
                     : '',
                   column.isTitle ? 'title' : ''
                 ]"
-                @click="matrixCellClick(i, j)"
+                @click="cellClickTimeout(i, j)"
+                @dblclick="matrixCelDblClick(i, j)"
               >
                 <span>{{ column.text }}</span>
               </div>
@@ -168,7 +178,8 @@
                 :style="{
                   'grid-template-columns': `repeat(${column.sentence_data.wordsList.length}, auto)`
                 }"
-                @click="matrixCellClick(i, j)"
+                @click="cellClickTimeout(i, j)"
+                @dblclick="matrixCelDblClick(i, j)"
               >
                 <template v-for="(word, w) in column.sentence_data.wordsList">
                   <span
@@ -201,8 +212,9 @@
           <div
             :key="`end-${i}`"
             :class="[
-              curQue.voiceMatrix.rowSelection && (selectRow === i ||
-                (selectedLine.type === 'row' && selectedLine.index === i))
+              curQue.voiceMatrix.rowSelection &&
+                (selectRow === i ||
+                  (selectedLine.type === 'row' && selectedLine.index === i))
                 ? 'read'
                 : ''
             ]"
@@ -216,8 +228,9 @@
             :key="`bottom-${i}`"
             :class="[
               'matrix-bottom',
-              curQue.voiceMatrix.columnSelection && (selectColumn === i ||
-                (selectedLine.type === 'column' && selectedLine.index === i))
+              curQue.voiceMatrix.columnSelection &&
+                (selectColumn === i ||
+                  (selectedLine.type === 'column' && selectedLine.index === i))
                 ? 'read'
                 : ''
             ]"
@@ -238,6 +251,7 @@
 </template>
 
 <script>
+import Bus from './components/Bus.js';
 import AudioLine from "./AudioLine.vue";
 import Soundrecord from "./Soundrecord.vue";
 
@@ -254,8 +268,7 @@ export default {
       stopAudio: true,
       unWatch: null,
       lrcArray: [],
-      // voicePauseSrc: require("../../../assets/common/icon-voice-red.png"),
-      // voicePlaySrc: require("../../../assets/common/icon-voice-red-play.png"),
+      cellTimer: null,
       fileName: "",
       // 底色行、列
       selectRow: -1,
@@ -305,6 +318,11 @@ export default {
       this.handleParentPlay();
     }
   },
+  created() {
+    Bus.$on('audioPause', () => {
+      this.handleParentPlay();
+    });
+  },
   methods: {
     // 鼠标移入移出
     matrixCellMouseenter(i, j, type) {
@@ -322,8 +340,15 @@ export default {
       this.selectColumn = -1;
     },
 
+    cellClickTimeout(row, column) {
+      clearTimeout(this.cellTimer);
+      this.cellTimer = setTimeout(() => { this.matrixCellClick(row, column); }, 200);
+    },
+
     matrixCellClick(row, column) {
       if (this.playing) this.handleParentPlay();
+      if (this.unWatch) this.unWatch();
+      this.lrcArray = [];
       if (row === this.selectCell.row && column === this.selectCell.column) {
         this.selectCell = { row: -1, column: -1 };
         return;
@@ -340,6 +365,22 @@ export default {
       if (!this.hasSelectedCell) this.handleParentPlay();
     },
 
+    matrixCelDblClick(row, column) {
+      clearTimeout(this.cellTimer);
+      this.selectedLine = { type: "", index: -1 };
+      this.selectCell = { row, column };
+      this.handleChangeTime(
+        this.curQue.voiceMatrix.matrix[row][column].lrc_data
+      );
+      // 设置录音文件名
+      let { type, text, sentence_data } = this.curQue.voiceMatrix.matrix[row][
+        column
+      ];
+      this.fileName = `${type === "text" ? text : ""}${
+        type === "SentenceSegwordChs" ? sentence_data.sentence : ""
+      }`;
+    },
+
     checkboxMouseenter(isSelected, type) {
       if (!isSelected) return this.clearSelectCell();
       if (type === "row") this.selectColumn = -1;
@@ -430,6 +471,8 @@ export default {
 
     playChange(playing) {
       this.playing = playing;
+      // 子组件通信，同时只能播放一个音频
+      if (playing) Bus.$emit('audioPause');
     },
 
     // 暂停音频播放
@@ -672,7 +715,6 @@ $select-color-brown-active: #a37557;
         %column {
           width: 100%;
           height: 100%;
-          padding: 7px 16px;
           min-height: 32px;
           background-color: #fff;
           border: 1px solid $border-color;
@@ -697,6 +739,11 @@ $select-color-brown-active: #a37557;
             background-color: transparent;
             border-color: transparent;
           }
+
+          > span {
+            display: inline-block;
+            padding: 7px 16px;
+          }
         }
 
         %column-red,
@@ -747,6 +794,7 @@ $select-color-brown-active: #a37557;
           @extend %column;
 
           display: inline-grid;
+          padding: 7px 16px;
           column-gap: 8px;
           justify-items: center;
           justify-content: start;
@@ -836,8 +884,8 @@ $select-color-brown-active: #a37557;
 </style>
 
 <style lang="scss" scoped>
-.NNPE-tableList-tr-last{
-  .voice-matrix{
+.NNPE-tableList-tr-last {
+  .voice-matrix {
     padding-bottom: 0;
   }
 }
@@ -854,5 +902,11 @@ $select-color-brown-active: #a37557;
       width: 100% !important;
     }
   }
+
+  .luyin-box {
+    .el-select .el-input {
+      width: 136px;
+    }
+  }
 }
 </style>

src/components/Adult/preview/components/Bus.js

@@ -0,0 +1,2 @@
+import Vue from 'vue';
+export default new Vue();