|
@@ -13,23 +13,32 @@
|
|
|
</style>
|
|
|
<template>
|
|
|
<a-row :gutter="10">
|
|
|
- <a-col :sm="8" style="margin-bottom: 20px;z-index: 10">
|
|
|
+ <a-col :sm="6" style="margin-bottom: 20px;z-index: 10">
|
|
|
<a-card class="search-box" style="min-height:500px">
|
|
|
- <a-directory-tree defaultExpandAll @select="onSelect" @expand="onExpand">
|
|
|
- <a-tree-node title="parent 0" key="1">
|
|
|
- <a-tree-node title="leaf 0-0" key="11" isLeaf />
|
|
|
- <a-tree-node title="leaf 0-1" key="12" isLeaf />
|
|
|
- </a-tree-node>
|
|
|
- <a-tree-node title="parent 1" key="2">
|
|
|
- <a-tree-node title="leaf 1-0" key="21" isLeaf />
|
|
|
- <a-tree-node title="leaf 1-1" key="22" isLeaf />
|
|
|
- </a-tree-node>
|
|
|
+ <a-directory-tree
|
|
|
+ defaultExpandAll
|
|
|
+ @select="onSelect"
|
|
|
+ @expand="onExpand"
|
|
|
+ :loadData="onLoadData"
|
|
|
+ :treeData="treeData"
|
|
|
+ >
|
|
|
</a-directory-tree>
|
|
|
</a-card>
|
|
|
</a-col>
|
|
|
- <a-col :sm="16" style="margin-bottom: 20px;z-index: 10">
|
|
|
+ <a-col :sm="18" style="margin-bottom: 20px;z-index: 10">
|
|
|
<a-card class="search-box">
|
|
|
<!-- <div @click="openFile">打开文件</div> -->
|
|
|
+ <div v-if="course">
|
|
|
+ <a-breadcrumb>
|
|
|
+ <a-breadcrumb-item>{{ course.media }}</a-breadcrumb-item>
|
|
|
+ <a-breadcrumb-item>{{ course.title }}</a-breadcrumb-item>
|
|
|
+ <a-breadcrumb-item>{{ course.topic }}</a-breadcrumb-item>
|
|
|
+ </a-breadcrumb>
|
|
|
+ <h3 style="text-align:center">{{ course.name }}</h3>
|
|
|
+ <p style="text-align:center" v-if="course.creator">作者:{{ course.creator }}</p>
|
|
|
+ <br />
|
|
|
+ <p>{{ course.intro }}</p>
|
|
|
+ </div>
|
|
|
<div id="iframeData" v-show="startList" style="height:800px"></div>
|
|
|
<div id="videoPlay" style="height:800px" v-show="!startList"></div>
|
|
|
</a-card>
|
|
@@ -42,7 +51,7 @@ import { getAction } from '@/api/manage'
|
|
|
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
|
|
|
import moment from 'moment'
|
|
|
import $ from 'jquery'
|
|
|
-
|
|
|
+import qs from 'qs'
|
|
|
// document.write(textDes('https://ctop-media.oss-cn-beijing.aliyuncs.com/video/2020-03-20/20网服-1584693978588.mp4'))
|
|
|
// document.write('<br>' + desDecrypt('s4HMPbmUfZ0=', 'ckplayerDesKey'))
|
|
|
function textDes(str) {
|
|
@@ -88,6 +97,11 @@ export default {
|
|
|
{ label: '分类7', value: 7, show: true },
|
|
|
{ label: '分类8', value: 8, show: true }
|
|
|
],
|
|
|
+ treeData: [
|
|
|
+ { title: '巨量引擎', key: '巨量引擎' },
|
|
|
+ { title: '快手大学', key: '快手大学' },
|
|
|
+ { title: '系统操作', key: '系统操作' }
|
|
|
+ ],
|
|
|
videoObject: {
|
|
|
width: '20%', // 宽度,也可以支持百分比(不过父元素宽度要有)
|
|
|
height: 180, // 高度,也可以支持百分比
|
|
@@ -120,40 +134,141 @@ export default {
|
|
|
list: '/ctop/materialInfo/list'
|
|
|
},
|
|
|
startList: true,
|
|
|
- simpleMode: false
|
|
|
+ simpleMode: false,
|
|
|
+ course: null
|
|
|
}
|
|
|
},
|
|
|
components: {},
|
|
|
methods: {
|
|
|
- onSelect(keys, event) {
|
|
|
- console.log(event.node.isLeaf)
|
|
|
- console.log('Trigger Select', keys, event)
|
|
|
- if (event.node.isLeaf) {
|
|
|
- if (keys[0] == '11') {
|
|
|
- this.startList = false
|
|
|
- this.videoObject.video = textDes(
|
|
|
- 'https://ctop-media.oss-cn-beijing.aliyuncs.com/video/2020-03-25/0324%E6%96%97%E5%9C%B0%E4%B8%BB%20%E6%9B%B9%E7%90%B33-1585130744273.mp4'
|
|
|
- )
|
|
|
- } else {
|
|
|
- this.startList = true
|
|
|
- getAction('http://www.ljserver.cn:8088/v1/api/file/getViewUrlWebPath', {
|
|
|
- fileUrl: 'https://ctop-media.oss-cn-beijing.aliyuncs.com/zixingche.docx'
|
|
|
+ onLoadData(treeNode) {
|
|
|
+ console.log(treeNode)
|
|
|
+ return new Promise(resolve => {
|
|
|
+ if (treeNode.eventKey == '巨量引擎') {
|
|
|
+ getAction('/ctop/edu/ocean/lesson').then(res => {
|
|
|
+ if (res.success) {
|
|
|
+ treeNode.dataRef.children = res.result.map(item => {
|
|
|
+ if (item) {
|
|
|
+ return { title: item, key: item + '@juliang' }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ resolve()
|
|
|
+ this.treeData = [...this.treeData]
|
|
|
+ }
|
|
|
+ })
|
|
|
+ } else if (treeNode.eventKey == '快手大学') {
|
|
|
+ getAction('/ctop/edu/kuaishou/lesson').then(res => {
|
|
|
+ if (res.success) {
|
|
|
+ treeNode.dataRef.children = res.result.map(item => {
|
|
|
+ if (item) {
|
|
|
+ return { title: item, key: item + '@kuaishou' }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ resolve()
|
|
|
+ this.treeData = [...this.treeData]
|
|
|
+ }
|
|
|
+ })
|
|
|
+ } else if (treeNode.eventKey == '系统操作') {
|
|
|
+ } else if (treeNode.eventKey.split('@').length == 2) {
|
|
|
+ var data = treeNode.eventKey.split('@')
|
|
|
+ if (data[1] == 'juliang') {
|
|
|
+ getAction('/ctop/edu/ocean/topic', { title: data[0] }).then(res => {
|
|
|
+ if (res.success) {
|
|
|
+ treeNode.dataRef.children = res.result.map(item => {
|
|
|
+ return { title: item, key: item + '@juliang@' + data[0] }
|
|
|
+ })
|
|
|
+ resolve()
|
|
|
+ this.treeData = [...this.treeData]
|
|
|
+ }
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ getAction('/ctop/edu/kuaishou/topic', { title: data[0] }).then(res => {
|
|
|
+ if (res.success) {
|
|
|
+ treeNode.dataRef.children = res.result.map(item => {
|
|
|
+ return { title: item, key: item + '@kuaishou@' + data[0] }
|
|
|
+ })
|
|
|
+ resolve()
|
|
|
+ this.treeData = [...this.treeData]
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ } else if (treeNode.eventKey.split('@').length == 3) {
|
|
|
+ var data = treeNode.eventKey.split('@')
|
|
|
+ getAction('/ctop/edu/lesson/list', {
|
|
|
+ media: data[1] == 'juliang' ? '巨量引擎' : '快手大学',
|
|
|
+ title: data[2],
|
|
|
+ topic: data[0]
|
|
|
}).then(res => {
|
|
|
console.log(res)
|
|
|
- let r = res.data
|
|
|
- sessionStorage.wpsUrl = r.wpsUrl
|
|
|
- sessionStorage.token = r.token
|
|
|
- this.openWps(r.wpsUrl, r.token)
|
|
|
+ if (res.success) {
|
|
|
+ treeNode.dataRef.children = res.result.map(item => {
|
|
|
+ return { title: item.name, key: item.id, isLeaf: true }
|
|
|
+ })
|
|
|
+ resolve()
|
|
|
+ this.treeData = [...this.treeData]
|
|
|
+ }
|
|
|
})
|
|
|
}
|
|
|
+ })
|
|
|
+ },
|
|
|
+ onSelect(keys, event) {
|
|
|
+ console.log(keys)
|
|
|
+ if (event.node.isLeaf) {
|
|
|
+ getAction('/ctop/edu/detail', { id: keys[0] }).then(res => {
|
|
|
+ console.log(res)
|
|
|
+ if (res.success) {
|
|
|
+ this.course = res.result
|
|
|
+ if (res.result.fileType == 1) {
|
|
|
+ this.startList = false
|
|
|
+
|
|
|
+ if (res.result.fileId) {
|
|
|
+ this.videoObject.video = textDes(
|
|
|
+ 'https://aweme.snssdk.com/aweme/v1/playwm/?video_id=' + res.result.fileId + '&line=0'
|
|
|
+ )
|
|
|
+ } else {
|
|
|
+ this.videoObject.video = textDes(res.result.fileUrl)
|
|
|
+ }
|
|
|
+ let player = new ckplayer(this.videoObject)
|
|
|
+ } else {
|
|
|
+ this.startList = true
|
|
|
+ getAction('http://www.ljserver.cn:8088/v1/api/file/getViewUrlWebPath', {
|
|
|
+ fileUrl: decodeURI(res.result.ossFileUrl)
|
|
|
+ }).then(resF => {
|
|
|
+ console.log(resF)
|
|
|
+ let r = resF.data
|
|
|
+ sessionStorage.wpsUrl = r.wpsUrl
|
|
|
+ sessionStorage.token = r.token
|
|
|
+ this.openWps(r.wpsUrl, r.token, res.result.fileType)
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ // if (keys[0] == '11') {
|
|
|
+ // this.startList = false
|
|
|
+ // this.videoObject.video = textDes(
|
|
|
+ // 'https://ctop-media.oss-cn-beijing.aliyuncs.com/video/2020-03-25/0324%E6%96%97%E5%9C%B0%E4%B8%BB%20%E6%9B%B9%E7%90%B33-1585130744273.mp4'
|
|
|
+ // )
|
|
|
+ // } else {
|
|
|
+ // this.startList = true
|
|
|
+ // getAction('http://www.ljserver.cn:8088/v1/api/file/getViewUrlWebPath', {
|
|
|
+ // fileUrl: 'https://ctop-media.oss-cn-beijing.aliyuncs.com/zixingche.docx'
|
|
|
+ // }).then(res => {
|
|
|
+ // console.log(res)
|
|
|
+ // let r = res.data
|
|
|
+ // sessionStorage.wpsUrl = r.wpsUrl
|
|
|
+ // sessionStorage.token = r.token
|
|
|
+ // this.openWps(r.wpsUrl, r.token)
|
|
|
+ // })
|
|
|
+ // }
|
|
|
|
|
|
- let player = new ckplayer(this.videoObject)
|
|
|
+ // let player = new ckplayer(this.videoObject)
|
|
|
} else {
|
|
|
return
|
|
|
}
|
|
|
},
|
|
|
- openWps(url, token) {
|
|
|
+ openWps(url, token, type) {
|
|
|
let _this = this
|
|
|
+ console.log(url)
|
|
|
const wps = WebOfficeSDK.config({
|
|
|
mode: _this.simpleMode ? 'simple' : 'normal',
|
|
|
mount: document.querySelector('#iframeData'),
|
|
@@ -162,8 +277,17 @@ export default {
|
|
|
isShowTopArea: false // 隐藏顶部区域(头部和工具栏)
|
|
|
}
|
|
|
})
|
|
|
+ // 2:pdf
|
|
|
+ // 3:ppt
|
|
|
wps.setToken({ token: token })
|
|
|
- wps.Application
|
|
|
+ if (type == 2) {
|
|
|
+ wps.PPTApplication
|
|
|
+ } else if (type == 3) {
|
|
|
+ wps.PDFApplication
|
|
|
+ } else {
|
|
|
+ wps.Application
|
|
|
+ }
|
|
|
+
|
|
|
wps.iframe.height = '800px'
|
|
|
},
|
|
|
onExpand() {
|
|
@@ -204,20 +328,31 @@ export default {
|
|
|
console.log(res.data.wpsUrl)
|
|
|
window.open(res.data.wpsUrl, '_blank')
|
|
|
})
|
|
|
+ },
|
|
|
+ getDirectory() {
|
|
|
+ getAction('/ctop/edu/kuaishou/lesson').then(res => {
|
|
|
+ console.log(res)
|
|
|
+ })
|
|
|
+ getAction('/ctop/edu/kuaishou/topic', { title: '新代理入门培训' }).then(res => {
|
|
|
+ console.log(res)
|
|
|
+ })
|
|
|
+ getAction('/ctop/edu/ocean/lesson').then(res => {
|
|
|
+ console.log(res)
|
|
|
+ })
|
|
|
+ getAction('/ctop/edu/ocean/topic', { title: '初级认证I类课程' }).then(res => {
|
|
|
+ console.log(res)
|
|
|
+ })
|
|
|
+
|
|
|
+ getAction('/ctop/edu/lesson/list', { media: '快手大学', title: '新代理入门培训', topic: '入门培训' }).then(
|
|
|
+ res => {
|
|
|
+ console.log(res)
|
|
|
+ }
|
|
|
+ )
|
|
|
}
|
|
|
},
|
|
|
mounted() {
|
|
|
this.$nextTick(() => {
|
|
|
- // var demo = WebOfficeSDK.config({
|
|
|
- // url: 'https://ctop-media.oss-cn-beijing.aliyuncs.com/zixingche.docx', // 如果需要通过js-sdk传递token方式鉴权,则需要包含w_tokentype=1参数
|
|
|
- // })
|
|
|
- // demo.ready()
|
|
|
- // // 如果需要对iframe进行特殊的处理,可以通过以下方式拿到iframe的dom对象
|
|
|
- // // console.log(demo.iframe)
|
|
|
- // // 打开文档结果
|
|
|
- // demo.on('fileOpen', function(data) {
|
|
|
- // console.log(data.result)
|
|
|
- // })
|
|
|
+ // this.getDirectory()
|
|
|
})
|
|
|
},
|
|
|
created() {
|