|
|
@@ -0,0 +1,179 @@
|
|
|
+<template>
|
|
|
+ <div class="studentWroks">
|
|
|
+ <template v-if="listMusic.length > 0">
|
|
|
+ <el-alert title="练习曲目" :closable="false" style="width: 99%;margin-bottom: 8px;"></el-alert>
|
|
|
+ <el-table
|
|
|
+ max-height="300px"
|
|
|
+ :header-cell-style="{ background: '#EDEEF0', color: '#444' }"
|
|
|
+ :data="listMusic"
|
|
|
+ style="margin-bottom: 20px;"
|
|
|
+ >
|
|
|
+ <el-table-column prop="musicScoreName" width="260px" align="left" label="名称">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="subjectName" align="left" label="级别">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <div v-if="scope.row.heardLevel">{{ scope.row.heardLevel | palyLevelFilter }}</div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="finishFlag" align="left" label="分数">
|
|
|
+ <template slot-scope="scope"
|
|
|
+ ><span
|
|
|
+ :class="
|
|
|
+ scope.row.trainingScore >= scope.row.standardScore ? '' : 'red'
|
|
|
+ "
|
|
|
+ >{{ scope.row.trainingScore }}</span
|
|
|
+ >
|
|
|
+ / {{ scope.row.standardScore }} 分</template
|
|
|
+ >
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="finishFlag" align="right" label="操作">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-button v-if="scope.row.fileJson && scope.row.fileJson.length > 0" @click="onDetail(scope.row)" type="text">查看详情</el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <template v-if="listVideo.length > 0">
|
|
|
+ <el-alert title="练习视频" :closable="false" style="width: 99%;margin-bottom: 8px;"></el-alert>
|
|
|
+ <el-table
|
|
|
+ max-height="300px"
|
|
|
+ :header-cell-style="{ background: '#EDEEF0', color: '#444' }"
|
|
|
+ :data="listVideo"
|
|
|
+ >
|
|
|
+ <el-table-column prop="musicScoreName" align="left" label="名称">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="subjectName" align="left" label="级别">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <div v-if="scope.row.heardLevel">{{ scope.row.heardLevel | palyLevelFilter }}</div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="finishFlag" align="left" label="分数">
|
|
|
+ <template slot-scope="scope"
|
|
|
+ ><span
|
|
|
+ :class="
|
|
|
+ scope.row.trainingScore >= scope.row.standardScore ? '' : 'red'
|
|
|
+ "
|
|
|
+ >{{ scope.row.trainingScore }}</span
|
|
|
+ >
|
|
|
+ / {{ scope.row.standardScore }} 分</template
|
|
|
+ >
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="finishFlag" align="right" label="操作">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-button @click="onDetail(scope.row)" type="text">查看详情</el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <template v-if="listTxt.length > 0">
|
|
|
+ <el-alert title="练习" :closable="false" style="width: 99%;margin-bottom: 8px;"></el-alert>
|
|
|
+ <el-table
|
|
|
+ max-height="300px"
|
|
|
+ :header-cell-style="{ background: '#EDEEF0', color: '#444' }"
|
|
|
+ :data="listTxt"
|
|
|
+ >
|
|
|
+ <el-table-column prop="desc" align="left" label="练习内容">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="finishFlag" align="right" label="操作">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-button v-if="scope.row.fileJson && scope.row.fileJson.length > 0" @click="onDetail(scope.row)" type="text">查看详情</el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <el-dialog
|
|
|
+ title="查看"
|
|
|
+ width="680px"
|
|
|
+ append-to-body
|
|
|
+ :visible.sync="videoVisible"
|
|
|
+ v-if="videoVisible"
|
|
|
+ >
|
|
|
+ <div class="activeVideoWrap">
|
|
|
+ <videoTcplayer v-if="selectItem.fileType === 'VIDEO'" class="ql-video" :src="selectItem.filePath" />
|
|
|
+ <audio
|
|
|
+ id="audio"
|
|
|
+ controls
|
|
|
+ v-if="selectItem.fileType === 'SOUND'"
|
|
|
+ style="width: 100%"
|
|
|
+ :src="selectItem.filePath"
|
|
|
+ >
|
|
|
+ 您的浏览器不支持视频播放
|
|
|
+ </audio>
|
|
|
+ <el-image
|
|
|
+ v-if="selectItem.fileType === 'IMG'"
|
|
|
+ fit="contain"
|
|
|
+ style="width: 100%; height: 350px"
|
|
|
+ :src="selectItem.filePath"
|
|
|
+ :preview-src-list="[selectItem.filePath]">
|
|
|
+ </el-image>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+import videoTcplayer from "@/components/video-tcplayer";
|
|
|
+export default {
|
|
|
+ props: ["list", "groupType"],
|
|
|
+ components: { videoTcplayer },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ videoVisible: false,
|
|
|
+ listMusic: [],
|
|
|
+ listVideo: [],
|
|
|
+ listTxt: [],
|
|
|
+ selectItem: {}
|
|
|
+ };
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.__init()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ __init() {
|
|
|
+ const list = this.list || []
|
|
|
+ const tempMusic = []
|
|
|
+ const tempVideo = []
|
|
|
+ const tempTxt = []
|
|
|
+ list.forEach(item => {
|
|
|
+ if(item.homeworkType === "MUSIC_SCORE") {
|
|
|
+ tempMusic.push(item)
|
|
|
+ } else if(item.homeworkType === "VIDEO") {
|
|
|
+ tempVideo.push(item)
|
|
|
+ } else {
|
|
|
+ tempTxt.push(item)
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ this.listMusic = tempMusic
|
|
|
+ this.listVideo = tempVideo
|
|
|
+ this.listTxt = tempTxt
|
|
|
+ console.log(this.listMusic, this.listVideo, this.listTxt, 'text')
|
|
|
+ },
|
|
|
+ onDetail(row) {
|
|
|
+ this.selectItem = row.fileJson && row.fileJson.length > 0 ? row.fileJson[0] : {}
|
|
|
+ console.log(this.selectItem, 'this.selectItem')
|
|
|
+ if(this.selectItem.expireFlag) {
|
|
|
+ this.$message.error('文件已过期')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.videoVisible = true
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.activeVideoWrap {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+/deep/.video-js {
|
|
|
+ height: 360px;
|
|
|
+}
|
|
|
+.red {
|
|
|
+ color: #f44743;
|
|
|
+ }
|
|
|
+</style>
|