zcjlgcs-ui/src/views/components/xuexi/index.vue

<template>
	<div style="height: calc(100vh - 120px);">
		<el-row style="height: 100%;" :gutter="20">
			<el-col :xl="6" :lg="6" style="height: 100%;border-right: 2px solid #55ffff;overflow-y: auto;"
				class="classTree hidden-md-and-down">
				<el-tree :data="data" node-key="Id" @node-click="handleNodeClick">
					<span class="custom-tree-node" slot-scope="{ node, data }">
						<span>{{ data.VName }}</span>
						<span v-if="data.lookstatus != undefined">
							<span v-if="data.lookstatus != '0'" style="color: #F56C6C;">
								（已完成）
							</span>
						</span>
						<span v-if="data.allNum != undefined && data.allNum > 0" style="color:#409EFF">
							(共计：{{data.allNum}}，已看完：{{data.studyNum}})
						</span>
					</span>
				</el-tree>
			</el-col>
			<el-col :xl="18" :lg="18" :md="24" :sm="24" :xs="24" style="height: 100%;position: relative;">
				<div style="position: absolute;top: 0px;left: 20px;z-index: 99;" class="hidden-lg-and-up" @click="treeSee">
					<i class="el-icon-s-unfold" style="font-size: 20px;" ></i>
				</div>
				<div style="width: 100%;height: 100%;position: relative;" v-if="videoPath == null">
					<img src="../../../assets/images/hysy.jpg"
						style="width: 40%;margin-top: 60px;position: absolute;left: 50%;transform: translateX(-50%);"
						alt="" />
				</div>
				<div style="width: 100%;height: 100%;" v-else>
					<div class="flex-ac-jc" style="height: 60px;font-weight: bold;font-size: 20px;">
						{{classInfo.VName}}
					</div>
					<div style="height: calc(100% - 100px)">
						<play-video ref="video" :path="videoPath"
							:lastTime="classInfo.lookstatus == '0'?Number(classInfo.fenzhong):0" :classInfo="classInfo"
							:isFinish="classInfo.lookstatus == '0'?false : true" @seeOver="seeOver"></play-video>
					</div>
					<div class="flex-ac" style="height: 40px;color: #F56C6C;font-weight: bold;font-size: 16px;">
						注：切换视频将从0开始计时！！
					</div>

				</div>
			</el-col>
		</el-row>
		<el-drawer title="课程讲解" append-to-body :visible.sync="treeShow" :direction="'ltr'">
			<el-tree :data="data" node-key="Id" @node-click="handleNodeClick">
				<span class="custom-tree-node" slot-scope="{ node, data }">
					<span>{{ data.VName }}</span>
					<span v-if="data.lookstatus != undefined">
						<span v-if="data.lookstatus != '0'" style="color: #F56C6C;">
							（已完成）
						</span>
					</span>
					<span v-if="data.allNum != undefined && data.allNum > 0" style="color:#409EFF">
						(共计：{{data.allNum}}，已看完：{{data.studyNum}})
					</span>
				</span>
			</el-tree>
		</el-drawer>
	</div>
</template>

<script>
	import playVideo from "./video.vue"
	import {
		getClassList,
		saveRecord
	} from "@/api/jianliyuan/index"
	export default {
		name: "Xuexi",
		props: {
			classData: {
				type: Object,
				default: null
			}
		},
		components: {
			playVideo
		},
		data() {
			return {
				data: [],
				defaultProps: {
					children: 'children',
					label: 'VName'
				},
				videoPath: null,
				baseUrl: process.env.VUE_APP_BASE_API,
				classInfo: null,
				treeShow: false,
			}
		},
		created() {
			this.getList(this.classData)
		},
		methods: {
			handleNodeClick(data) {
				if (data.VPath != undefined) {
					this.classInfo = null
					this.videoPath = this.baseUrl + data.VPath
					this.classInfo = data
					this.classInfo.personid = this.classData.personid
				}

			},
			//查询已报名继续教育课程列表
			getList(v) {
				getClassList({
					classIdList: v.classIdList,
					personId: v.personid
				}).then(res => {
					for (let i in res.data) {
						let obj = {
							VName: i,
							Id: i,
							allNum: res.data[i].filter(obj => obj.lookstatus != undefined).length,
							studyNum: res.data[i].filter(obj => obj.lookstatus != undefined && obj
								.lookstatus != '0').length,
							children: res.data[i]
						}
						this.data.push(obj)
					}
				})
			},
			//视频观看完成
			seeOver(e) {
				if (e == true) {
					this.data = []
					this.getList(this.classData)
				}

			},
			treeSee(){
				console.log(1)
				this.treeShow = true
			}
		}
	}
</script>

<style scoped lang="scss">

</style>