语音矩阵增加

1. 末列高亮 2. 按行、列选择 3. 每行设为标题 4. 选中行、列与单个选中单元格互斥

src/components/Adult/inputModules/VoiceMatrix.vue

@@ -25,7 +25,11 @@
       分配lrc
     </el-button>
 
-    <el-button type="primary" size="small" @click="analyzeVoiceFile">根据语音和文本进行打点标记</el-button>
+    <el-button
+      type="primary"
+      size="small"
+      @click="analyzeVoiceFile"
+    >根据语音和文本进行打点标记</el-button>
 
     <div class="voice-matrix-input">
       <el-input
@@ -50,6 +54,15 @@
           <el-checkbox v-model="curQue.voiceMatrix.firstLineHighlight">
             首行高亮
           </el-checkbox>
+          <el-checkbox v-model="curQue.voiceMatrix.lastColumnHighlight">
+            末列高亮
+          </el-checkbox>
+          <el-checkbox v-model="curQue.voiceMatrix.rowSelection">
+            按行选择
+          </el-checkbox>
+          <el-checkbox v-model="curQue.voiceMatrix.columnSelection">
+            按列选择
+          </el-checkbox>
           <el-checkbox v-model="curQue.voiceMatrix.isAudioNumber">
             音频控制器序号
           </el-checkbox>
@@ -66,7 +79,15 @@
             :key="i"
             class="row"
           >
-            <div class="row-number">第 {{ i + 1 }} 行</div>
+            <div class="row-number">
+              <span :style="{ 'margin-right': '12px' }">第 {{ i + 1 }} 行</span>
+              <el-checkbox
+                v-model="row[0].isTitle"
+                @click.native="setIsTitle(i, row[0].isTitle, $event)"
+              >
+                设为标题
+              </el-checkbox>
+            </div>
             <div v-for="(column, j) in row" :key="j" class="column">
               <div class="column-condition">
                 <el-select v-model="column.type" size="small">
@@ -82,9 +103,9 @@
                   v-if="Object.keys(column.lrc_data).length > 0"
                   class="lrc"
                 >
-                  <el-input v-model="column.lrc_data.begin_time" />
+                  <el-input v-model="column.lrc_data.begin_time" size="small" />
                   <span> ~ </span>
-                  <el-input v-model="column.lrc_data.end_time" />
+                  <el-input v-model="column.lrc_data.end_time" size="small" />
                   {{ column.lrc_data.text }}
                 </span>
               </div>
@@ -150,6 +171,9 @@ export default {
         voiceMatrix: {
           isAudioNumber: false,
           audioSerialNumber: 1,
+          lastColumnHighlight: false,
+          rowSelection: false,
+          columnSelection: false,
           firstLineHighlight: false,
           matrix: []
         },
@@ -179,6 +203,9 @@ export default {
         isAudioNumber: false,
         audioSerialNumber: 1,
         firstLineHighlight: false,
+        lastColumnHighlight: false,
+        rowSelection: false,
+        columnSelection: false,
         matrix: this.matrix()
       };
       this.isShowMatrix = true;
@@ -192,6 +219,7 @@ export default {
           matrix[i][j] = {
             type: "text",
             text: "",
+            isTitle: false,
             lrc_data: {},
             sentence_data: {
               type: "sentence_segword_chs",
@@ -208,6 +236,13 @@ export default {
       return matrix;
     },
 
+    setIsTitle(index, isTitle, e) {
+      if (e.target.className !== "el-checkbox__original") return;
+      this.curQue.voiceMatrix.matrix[index].forEach(item => {
+        item.isTitle = !isTitle;
+      });
+    },
+
     analyzeVoiceFile() {
       let mp3_list = this.curQue.mp3_list;
       if (mp3_list.length === 0) {
@@ -220,32 +255,34 @@ export default {
             row[i].lrc_data = {};
             return;
           }
-          if (type === 'text') {
+          if (type === "text") {
             text_list.push(text);
             return;
           }
-          if (type === 'SentenceSegwordChs') {
+          if (type === "SentenceSegwordChs") {
             text_list.push(sentence_data.sentence);
           }
         });
       });
-      let loading = this.$loading({ text: '正在分析，请等待' });
+      let loading = this.$loading({ text: "正在分析，请等待" });
       getContentFile("tool-AnalyzeVoiceFile", {
         file_id: mp3_list[0].file_id,
         text_list
-      }).then(({ lrc_list }) => {
-        loading.close();
-        this.curQue.lrc_arr = lrc_list;
-        this.distribution();
-      }).catch(() => {
-        loading.close();
-      });
+      })
+        .then(({ lrc_list }) => {
+          loading.close();
+          this.curQue.lrc_arr = lrc_list;
+          this.distribution();
+        })
+        .catch(() => {
+          loading.close();
+        });
     },
 
     parseLrcFile() {
       let lrcList = this.curQue.lrc_list;
       if (lrcList.length === 0) {
-        return this.$message.warning('请先上传lrc文件');
+        return this.$message.warning("请先上传lrc文件");
       }
       getContentFile("tool-ParseLRCFile", {
         content_type: "FILE",

src/components/Adult/preview/VoiceMatrix.vue

@@ -50,7 +50,7 @@
             @mouseenter="checkboxMouseenter(selectColumn === i, 'column')"
           >
             <span
-              v-if="row.type !== 'connection'"
+              v-if="row.type !== 'connection' && curQue.voiceMatrix.columnSelection"
               v-show="
                 selectColumn === i ||
                   (selectedLine.type === 'column' && selectedLine.index === i)
@@ -80,6 +80,7 @@
             @mouseenter="checkboxMouseenter(selectRow === i, 'row')"
           >
             <span
+              v-if="curQue.voiceMatrix.rowSelection"
               v-show="
                 selectRow === i ||
                   (selectedLine.type === 'row' && selectedLine.index === i)
@@ -105,7 +106,7 @@
                   (selectedLine.type === 'row' && selectedLine.index === i)
                   ? 'read'
                   : '',
-                i === 0 && curQue.voiceMatrix.firstLineHighlight
+                (i === 0 && curQue.voiceMatrix.firstLineHighlight) || (j === row.length - 1 && curQue.voiceMatrix.lastColumnHighlight)
                   ? `highlight-${themeColor}`
                   : ''
               ]"
@@ -127,7 +128,8 @@
                     (curTime < column.lrc_data.end_time / 1000 ||
                       column.lrc_data.end_time === -1)
                     ? 'playing'
-                    : ''
+                    : '',
+                  column.isTitle ? 'title' : ''
                 ]"
                 @click="matrixCellClick(i, j)"
               >
@@ -160,7 +162,8 @@
                     (curTime < column.lrc_data.end_time / 1000 ||
                       column.lrc_data.end_time === -1)
                     ? 'playing'
-                    : ''
+                    : '',
+                  column.isTitle ? 'title' : ''
                 ]"
                 :style="{
                   'grid-template-columns': `repeat(${column.sentence_data.wordsList.length}, auto)`
@@ -320,10 +323,12 @@ export default {
     },
 
     matrixCellClick(row, column) {
+      if (this.playing) this.handleParentPlay();
       if (row === this.selectCell.row && column === this.selectCell.column) {
         this.selectCell = { row: -1, column: -1 };
         return;
       }
+      this.selectedLine = { type: "", index: -1 };
       this.selectCell = { row, column };
       // 设置录音文件名
       let { type, text, sentence_data } = this.curQue.voiceMatrix.matrix[row][
@@ -345,6 +350,7 @@ export default {
     selectRowOrColumn(index, type) {
       this.handleParentPlay();
       this.lrcArray = [];
+      this.selectCell = { row: -1, column: -1 };
       if (this.unWatch) this.unWatch();
       if (
         this.selectedLine.type === type &&
@@ -687,6 +693,11 @@ $select-color-brown-active: #a37557;
           &.playing {
             background-color: #fee;
           }
+
+          &.title {
+            background-color: transparent;
+            border-color: transparent;
+          }
         }
 
         %column-red,