|
|
@@ -0,0 +1,393 @@
|
|
|
+<!-- eslint-disable vue/no-v-html -->
|
|
|
+<template>
|
|
|
+ <div class="table-preview" :style="getAreaStyle()">
|
|
|
+ <SerialNumberPosition v-if="isEnable(data.property.sn_display_mode)" :property="data.property" />
|
|
|
+
|
|
|
+ <div class="main">
|
|
|
+ <table
|
|
|
+ border
|
|
|
+ :style="{
|
|
|
+ width: data.property.width + 'px',
|
|
|
+ height: data.property.height + 'px',
|
|
|
+ border: '1px solid ' + data.property.border_color,
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ <tr v-for="(row, i) in data.option_list" :key="`tr-${i}`">
|
|
|
+ <template v-for="col in row">
|
|
|
+ <td
|
|
|
+ :key="col.mark"
|
|
|
+ :style="{
|
|
|
+ border: '1px solid ' + data.property.border_color,
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ <div :style="[tdStyle]" class="cell-wrap" v-html="col.content"></div>
|
|
|
+ </td>
|
|
|
+ </template>
|
|
|
+ </tr>
|
|
|
+ </table>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { getTableData } from '@/views/book/courseware/data/table';
|
|
|
+import { getRandomNumber } from '@/utils/index.js';
|
|
|
+
|
|
|
+import PreviewMixin from '../common/PreviewMixin';
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: 'TablePreview',
|
|
|
+ components: {},
|
|
|
+ mixins: [PreviewMixin],
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ data: getTableData(),
|
|
|
+ cid: getRandomNumber(),
|
|
|
+ themeColor: 'red',
|
|
|
+ curTime: 0,
|
|
|
+ playing: false,
|
|
|
+ stopAudio: true,
|
|
|
+ unWatch: null,
|
|
|
+ lrcArray: [],
|
|
|
+ fileName: '',
|
|
|
+ // 底色行、列
|
|
|
+ selectRow: -1,
|
|
|
+ selectColumn: -1,
|
|
|
+ // 行、列选中
|
|
|
+ selectedLine: {
|
|
|
+ type: '',
|
|
|
+ index: 0,
|
|
|
+ },
|
|
|
+ // 点击选中
|
|
|
+ selectCell: {
|
|
|
+ row: -1,
|
|
|
+ column: -1,
|
|
|
+ },
|
|
|
+ isRepeat: false,
|
|
|
+ // 跟读所需属性
|
|
|
+ wavblob: null,
|
|
|
+ isRecord: false,
|
|
|
+ matrixSelectLrc: null,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ tdStyle() {
|
|
|
+ let obj = {};
|
|
|
+ if (this.data.mode === 'short') {
|
|
|
+ let styles = this.data.styles;
|
|
|
+ obj = {
|
|
|
+ fontFamily: styles.fontFamily,
|
|
|
+ fontSize: styles.fontSize,
|
|
|
+ fontColor: styles.fontColor,
|
|
|
+ backgroundColor: styles.bgColor,
|
|
|
+ textDecoration: styles.isUnderline ? 'underline' : styles.isStrikethrough ? 'line-through' : '',
|
|
|
+ fontWeight: styles.isBold ? 'bold' : '',
|
|
|
+ fontStyle: styles.isItalic ? 'italic' : '',
|
|
|
+ textAlign: styles.textAlign,
|
|
|
+ };
|
|
|
+ }
|
|
|
+ return obj;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ watch: {},
|
|
|
+ created() {},
|
|
|
+ mounted() {},
|
|
|
+ beforeDestroy() {},
|
|
|
+ methods: {
|
|
|
+ handleWav(data) {
|
|
|
+ this.data.record_list = data;
|
|
|
+ },
|
|
|
+ // 鼠标移入移出
|
|
|
+ matrixCellMouseenter(i, j, type) {
|
|
|
+ if (type === 'connection') {
|
|
|
+ this.selectRow = -1;
|
|
|
+ this.selectColumn = -1;
|
|
|
+ } else {
|
|
|
+ this.selectRow = i;
|
|
|
+ this.selectColumn = j;
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ clearSelectCell() {
|
|
|
+ this.selectRow = -1;
|
|
|
+ this.selectColumn = -1;
|
|
|
+ },
|
|
|
+
|
|
|
+ // 单击单元格
|
|
|
+ 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;
|
|
|
+ }
|
|
|
+ this.selectedLine = { type: '', index: -1 };
|
|
|
+ this.selectCell = { row, column };
|
|
|
+ this.handleChangeTime(this.data.option_list[row][column].lrc_data);
|
|
|
+ // 设置录音文件名
|
|
|
+ this.setRecordingFileName(row, column);
|
|
|
+ },
|
|
|
+
|
|
|
+ setRecordingFileName(row, column) {
|
|
|
+ return `录音第${column}列第${row}行`;
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 判断 click 点击是否语音矩阵可操作区域
|
|
|
+ * @param {PointerEvent} event
|
|
|
+ */
|
|
|
+ restoreAudioStatus(event) {
|
|
|
+ const whitePath = [
|
|
|
+ 'column-green',
|
|
|
+ 'column-red',
|
|
|
+ 'column-brown',
|
|
|
+ 'matrix-checkbox-column-',
|
|
|
+ 'matrix-checkbox-row-',
|
|
|
+ 'audio-simple-image',
|
|
|
+ 'audio-simple-repeat',
|
|
|
+ 'luyin-box',
|
|
|
+ ];
|
|
|
+ const operable = event.composedPath().some((item) => {
|
|
|
+ const className = item.className;
|
|
|
+ if (!className || typeof className !== 'string') return false;
|
|
|
+ return whitePath.some((path) => className.includes(path));
|
|
|
+ });
|
|
|
+ if (!operable) {
|
|
|
+ this.selectedLine = { type: '', index: -1 };
|
|
|
+ this.selectCell = { row: -1, column: -1 };
|
|
|
+ if (this.playing) this.handleParentPlay();
|
|
|
+ if (this.unWatch) this.unWatch();
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ checkboxMouseenter(isSelected, type) {
|
|
|
+ if (!isSelected) return this.clearSelectCell();
|
|
|
+ if (type === 'row') this.selectColumn = -1;
|
|
|
+ if (type === 'column') this.selectRow = -1;
|
|
|
+ },
|
|
|
+
|
|
|
+ // 选中行、列
|
|
|
+ selectRowOrColumn(index, type) {
|
|
|
+ this.handleParentPlay();
|
|
|
+ this.lrcArray = [];
|
|
|
+ this.selectCell = { row: -1, column: -1 };
|
|
|
+ if (this.unWatch) this.unWatch();
|
|
|
+ if (this.selectedLine.type === type && this.selectedLine.index === index) {
|
|
|
+ this.selectedLine = { type: '', index: -1 };
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.selectedLine = { type, index };
|
|
|
+ let number = index;
|
|
|
+ if (type === 'column') {
|
|
|
+ this.data.option_list[index].forEach((item, i) => {
|
|
|
+ if (i >= index) return;
|
|
|
+ });
|
|
|
+ }
|
|
|
+ this.fileName = `第 ${number + 1} ${type === 'row' ? '行' : '列'}`;
|
|
|
+ },
|
|
|
+
|
|
|
+ playAudio() {
|
|
|
+ if (!this.hasSelectedCell) return;
|
|
|
+ if (this.playing) return this.handleParentPlay();
|
|
|
+ if (this.lrcArray.length > 0) return this.$refs.audioLine.PlayAudio();
|
|
|
+ if (this.unWatch) this.unWatch();
|
|
|
+
|
|
|
+ this.lrcArray = [];
|
|
|
+ const { type, index } = this.selectedLine;
|
|
|
+
|
|
|
+ if (type.length > 0 && index >= 0 && type === 'row') {
|
|
|
+ this.data.option_list[index].forEach((item) => {
|
|
|
+ const data = this.getLrcData(item);
|
|
|
+ if (data) this.lrcArray.push(data);
|
|
|
+ });
|
|
|
+ if (this.lrcArray.length > 0) this.lrcPlay(this.lrcArray[0], 0);
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ if (type.length > 0 && index >= 0 && type === 'column') {
|
|
|
+ this.data.option_list.forEach((item) => {
|
|
|
+ const data = this.getLrcData(item[index]);
|
|
|
+ if (data) this.lrcArray.push(data);
|
|
|
+ });
|
|
|
+ if (this.lrcArray.length > 0) this.lrcPlay(this.lrcArray[0], 0);
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ const { row, column } = this.selectCell;
|
|
|
+ if (row >= 0 && column >= 0) {
|
|
|
+ this.handleChangeTime(this.data.option_list[row][column].lrc_data);
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ lrcPlay({ begin_time, end_time }, index) {
|
|
|
+ this.handleParentPlay();
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.$refs.audioLine.onTimeupdateTime(begin_time / 1000);
|
|
|
+ this.$refs.audioLine.PlayAudio();
|
|
|
+ if (end_time === -1) return;
|
|
|
+ const end = end_time / 1000 - 0.01;
|
|
|
+ this.unWatch = this.$watch('curTime', (val) => {
|
|
|
+ if (val >= end) {
|
|
|
+ if (!this.hasSelectedCell) return this.unWatch();
|
|
|
+ this.handleParentPlay();
|
|
|
+ this.$refs.audioLine.onTimeupdateTime(end);
|
|
|
+ this.unWatch();
|
|
|
+ const i = index + 1;
|
|
|
+ if (i < this.lrcArray.length) {
|
|
|
+ return this.lrcPlay(this.lrcArray[i], i);
|
|
|
+ }
|
|
|
+ if (this.isRepeat) {
|
|
|
+ return this.lrcPlay(this.lrcArray[0], 0);
|
|
|
+ }
|
|
|
+ this.lrcArray = [];
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ playChange(playing) {
|
|
|
+ this.playing = playing;
|
|
|
+ // 子组件通信，同时只能播放一个音频
|
|
|
+ if (playing) Bus.$emit('audioPause', this.cid);
|
|
|
+ },
|
|
|
+
|
|
|
+ pauseOtherAudio() {
|
|
|
+ Bus.$emit('audioPause', this.cid);
|
|
|
+ this.stopAudio = true;
|
|
|
+ },
|
|
|
+
|
|
|
+ // 暂停音频播放
|
|
|
+ handleParentPlay() {
|
|
|
+ this.stopAudio = true;
|
|
|
+ },
|
|
|
+ // 音频播放时改变布尔值
|
|
|
+ handleChangeStopAudio() {
|
|
|
+ this.stopAudio = false;
|
|
|
+ },
|
|
|
+
|
|
|
+ getCurTime(curTime) {
|
|
|
+ this.curTime = curTime;
|
|
|
+ },
|
|
|
+
|
|
|
+ getWavblob(wavblob) {
|
|
|
+ this.wavblob = wavblob;
|
|
|
+ },
|
|
|
+
|
|
|
+ getSelectData({ type, index, row, column }) {
|
|
|
+ if (type === '') return;
|
|
|
+ const arr = [];
|
|
|
+ if (type.length > 0 && index >= 0 && type === 'row') {
|
|
|
+ this.data.option_list[index].forEach((item) => {
|
|
|
+ const data = this.getLrcData(item);
|
|
|
+ if (data) arr.push(data);
|
|
|
+ });
|
|
|
+ this.matrixSelectLrc = arr;
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ if (type.length > 0 && index >= 0 && type === 'column') {
|
|
|
+ this.data.option_list.forEach((item) => {
|
|
|
+ const data = this.getLrcData(item[index]);
|
|
|
+ if (data) arr.push(data);
|
|
|
+ });
|
|
|
+ this.matrixSelectLrc = arr;
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ if (type === 'cell' && row >= 0 && column >= 0) {
|
|
|
+ const lrcData = this.data.option_list[row][column].lrc_data;
|
|
|
+ if (lrcData.end_time === -1) lrcData.end_time = this.mp3Duration;
|
|
|
+ this.matrixSelectLrc = [lrcData];
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ getLrcData({ content, lrc_data }) {
|
|
|
+ if (content.length > 0) {
|
|
|
+ if (lrc_data.end_time === -1) {
|
|
|
+ return {
|
|
|
+ begin_time: lrc_data.begin_time,
|
|
|
+ end_time: this.mp3Duration,
|
|
|
+ text: lrc_data.text,
|
|
|
+ };
|
|
|
+ }
|
|
|
+ return lrc_data;
|
|
|
+ }
|
|
|
+ return false;
|
|
|
+ },
|
|
|
+
|
|
|
+ sentPause(isRecord) {
|
|
|
+ this.isRecord = isRecord;
|
|
|
+ },
|
|
|
+
|
|
|
+ handleChangeTime({ begin_time, end_time }) {
|
|
|
+ if (this.unWatch) this.unWatch();
|
|
|
+ this.handleParentPlay();
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.$refs.audioLine.onTimeupdateTime(begin_time / 1000);
|
|
|
+ this.$refs.audioLine.PlayAudio();
|
|
|
+ // 监听是否已到结束时间，为了选中效果 - 0.01
|
|
|
+ if (end_time === -1) return;
|
|
|
+ const end = end_time / 1000 - 0.01;
|
|
|
+ this.unWatch = this.$watch('curTime', (val) => {
|
|
|
+ if (val >= end) {
|
|
|
+ this.handleParentPlay();
|
|
|
+ this.$refs.audioLine.onTimeupdateTime(end);
|
|
|
+ this.unWatch();
|
|
|
+ this.unWatch = null;
|
|
|
+ if (this.isRepeat) {
|
|
|
+ this.handleChangeTime({ begin_time, end_time });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+@use '@/styles/mixin.scss' as *;
|
|
|
+
|
|
|
+$select-color: #1890ff;
|
|
|
+$border-color: #e6e6e6;
|
|
|
+
|
|
|
+.table-preview {
|
|
|
+ @include preview-base;
|
|
|
+
|
|
|
+ .main {
|
|
|
+ color: #262626;
|
|
|
+
|
|
|
+ table {
|
|
|
+ border-spacing: 3px;
|
|
|
+ border-collapse: separate;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.NNPE-tableList-tr-last {
|
|
|
+ .voice-matrix {
|
|
|
+ padding-bottom: 0;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+.voice-matrix {
|
|
|
+ &-audio {
|
|
|
+ .audioLine {
|
|
|
+ border-radius: 8px 8px 0 0 !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-slider {
|
|
|
+ width: 100% !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .luyin-box {
|
|
|
+ .el-select .el-input {
|
|
|
+ width: 136px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
