Skip to content

A
admin-fdc
提交 ae80b525 authored 作者: pengxiaohui's avatar pengxiaohui
浏览文件
操作

视频播放

上级 85ed2857
隐藏空白字符变更
内嵌 并排
正在显示 包含 113 行增加 和 25 行删除
index.html
浏览文件 @ ae80b525
...@@ -5,6 +5,9 @@ ...@@ -5,6 +5,9 @@
<link rel="icon" href="https://zws-imgs-pub.ezijing.com/pc/base/favicon.ico" /> <link rel="icon" href="https://zws-imgs-pub.ezijing.com/pc/base/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>金融数据合规管理系统-紫荆教育</title> <title>金融数据合规管理系统-紫荆教育</title>
<link href="https://unpkg.com/video.js/dist/video-js.min.css" rel="stylesheet">
<script src="https://unpkg.com/video.js/dist/video.min.js"></script>
<!-- <script src="https://unpkg.com/videojs-contrib-hls/dist/videojs-contrib-hls.js"></script> -->
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>
......
package.json
浏览文件 @ ae80b525
...@@ -15,6 +15,7 @@ ...@@ -15,6 +15,7 @@
"query-string": "^7.0.1", "query-string": "^7.0.1",
"vue": "^2.6.14", "vue": "^2.6.14",
"vue-router": "^3.5.2", "vue-router": "^3.5.2",
"vue-video-player": "^5.0.2",
"vuex": "^3.6.2" "vuex": "^3.6.2"
}, },
"devDependencies": { "devDependencies": {
......
src/api/base.js
浏览文件 @ ae80b525
...@@ -28,8 +28,14 @@ export function uploadFile(data) { ...@@ -28,8 +28,14 @@ export function uploadFile(data) {
}) })
} }
// 获取所有权限 // 获取所有权限
export function getPermissions() { // export function getPermissions() {
return httpRequest.get('/api/lms-financial/school/permission/get-permissions') // return httpRequest.get('/api/lms-financial/school/permission/get-permissions')
// }
/**
* 获取权限列表
*/
export function getPermissions(params) {
return httpRequest.get('/api/permissions/api/v1/user/permissions', { params })
} }
/** /**
* 获取课程列表 * 获取课程列表
......
src/modules/dashboard/screen/api.js
浏览文件 @ ae80b525
...@@ -12,3 +12,14 @@ export function getDashboardList(params) { ...@@ -12,3 +12,14 @@ export function getDashboardList(params) {
export function getStudentList(params) { export function getStudentList(params) {
return httpRequest.get('/api/lms-financial/school/student/list', { params }) return httpRequest.get('/api/lms-financial/school/student/list', { params })
} }
/**
* 导出学员列表
* @params.key 课程ID、课程名称
*/
export function exportStudentList() {
return httpRequest({
url: '/api/lms-financial/school/student/download',
method: 'get',
responseType: 'blob'
})
}
src/modules/dashboard/screen/views/Details.vue
浏览文件 @ ae80b525
...@@ -12,10 +12,7 @@ ...@@ -12,10 +12,7 @@
</div> </div>
</template> </template>
<script> <script>
import AppStudentSelect from '@/components/base/AppStudentSelect.vue'
import AppClassSelect from '@/components/base/AppClassSelect.vue'
export default { export default {
components: { AppStudentSelect, AppClassSelect },
data() { data() {
return { return {
} }
...@@ -48,4 +45,4 @@ export default { ...@@ -48,4 +45,4 @@ export default {
} }
} }
} }
</style> </style>
\ No newline at end of file
src/modules/dashboard/screen/views/List.vue
浏览文件 @ ae80b525
...@@ -18,6 +18,12 @@ ...@@ -18,6 +18,12 @@
</app-card> </app-card>
<app-card title="数据汇总"> <app-card title="数据汇总">
<app-list v-bind="tableOptions" ref="list"> <app-list v-bind="tableOptions" ref="list">
<template>
<div style="border-top:1px solid #f3f3f3;padding:15px 0;">
<el-button type="primary" icon="el-icon-plus" @click="exportAll">导出Excel</el-button>
<span style="color:#666;font-size:14px;margin-left:15px;">导出当前搜索结果</span>
</div>
</template>
<template v-slot:filter-progress_min="{ params }"> <template v-slot:filter-progress_min="{ params }">
<el-input v-model="params.progress_min" style="width:69px;" onkeyup="this.value = this.value.replace(/[^\d.]/g,'');" />%<p style="display:inline-block;width:10px;"></p>- <el-input v-model="params.progress_min" style="width:69px;" onkeyup="this.value = this.value.replace(/[^\d.]/g,'');" />%<p style="display:inline-block;width:10px;"></p>-
</template> </template>
...@@ -45,19 +51,14 @@ ...@@ -45,19 +51,14 @@
</template> </template>
<script> <script>
import AppStudentSelect from '@/components/base/AppStudentSelect.vue' import { getDashboardList, getStudentList, exportStudentList } from '../api'
import AppClassSelect from '@/components/base/AppClassSelect.vue' import { funDownload } from '@/utils/util'
import { getDashboardList, getStudentList } from '../api'
export default { export default {
data() { data() {
return { return {
classList: [] classList: []
} }
}, },
components: {
AppStudentSelect,
AppClassSelect
},
computed: { computed: {
// 列表配置 // 列表配置
tableOptions() { tableOptions() {
...@@ -102,8 +103,13 @@ export default { ...@@ -102,8 +103,13 @@ export default {
this.fetchList() this.fetchList()
}, },
methods: { methods: {
keyupNumber() { exportAll() {
exportStudentList().then(res => {
if (res) {
const url = URL.createObjectURL(res)
funDownload(url, `${Date.now()}.xlsx`)
}
})
}, },
fetchList() { fetchList() {
getDashboardList().then(res => { getDashboardList().then(res => {
......
src/modules/school/course/api.js
浏览文件 @ ae80b525
...@@ -11,4 +11,10 @@ export function getCourseList(params) { ...@@ -11,4 +11,10 @@ export function getCourseList(params) {
*/ */
export function getCourseDetails(params) { export function getCourseDetails(params) {
return httpRequest.get('/api/lms-financial/school/course/view', { params }) return httpRequest.get('/api/lms-financial/school/course/view', { params })
} }
\ No newline at end of file /**
* 获取视频地址
*/
export function getVideoUrl(data) {
return httpRequest.post('/api/lms-financial/school/course/aliyun-video-streaming', data)
}
src/modules/school/course/components/VideoPlayer.vue
浏览文件 @ ae80b525
<template> <template>
<el-dialog :title="info.title" v-bind="$attrs" v-on="$listeners" width="800px" top="20vh"> <el-dialog :title="info.title" v-bind="$attrs" v-on="$listeners" width="800px" top="20vh">
<video :src="info.url" controls="controls" autoplay="autoplay"></video> <!-- <video :src="info.url" controls="controls" autoplay="autoplay"></video> -->
<!-- <video-player class="video-player-box"
ref="videoPlayer"
:options="playerOptions"
:playsinline="true"
customEventName="customstatechangedeventname">
</video-player> -->
<video id="videoPlayer" class="video-js" muted></video>
</el-dialog> </el-dialog>
</template> </template>
<script> <script>
// import Videojs from "video.js"
export default { export default {
// components: {
// videoPlayer
// },
props: { props: {
info: { info: {
type: Object, type: Object,
...@@ -14,7 +25,31 @@ export default { ...@@ -14,7 +25,31 @@ export default {
} }
}, },
data() { data() {
return {} return {
playerOptions: {
// videojs options
muted: true,
language: 'en',
playbackRates: [0.7, 1.0, 1.5, 2.0],
sources: [{
type: "video/mp4",
src: "https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm"
}],
poster: "https://img1.ezijing.com/curriculum/courses/bf3b399810-houzi.jpg",
}
}
},
mounted() {
console.log(this.info)
const url = this.info.url
setTimeout(() => {
const player = window.videojs('videoPlayer');
player.src({
src: url,
type: 'application/x-mpegURL',
withCredentials: true
})
}, 1000)
} }
} }
</script> </script>
......
src/modules/school/course/views/Details.vue
浏览文件 @ ae80b525
...@@ -16,7 +16,7 @@ ...@@ -16,7 +16,7 @@
<div class="course-title">{{item.name}}</div> <div class="course-title">{{item.name}}</div>
</template> </template>
<div class="item" v-for="(it, idx) in item.children" :key="idx"> <div class="item" v-for="(it, idx) in item.children" :key="idx">
<i v-if="it.type === 2" class="el-icon-video-play" @click="onPlay(it)"></i> <i v-if="it.type === 2" class="el-icon-video-play" @click="fetchVideoUrl(it)"></i>
<p>{{it.name}}</p> <p>{{it.name}}</p>
<div class="time" v-if="it.type === 2"> <div class="time" v-if="it.type === 2">
<span class="text">时长</span> <span class="text">时长</span>
...@@ -31,7 +31,7 @@ ...@@ -31,7 +31,7 @@
</template> </template>
<script> <script>
import VideoPlayer from '../components/VideoPlayer.vue' import VideoPlayer from '../components/VideoPlayer.vue'
import { getCourseDetails } from '../api' import { getCourseDetails, getVideoUrl } from '../api'
export default { export default {
components: { VideoPlayer }, components: { VideoPlayer },
data() { data() {
...@@ -83,6 +83,19 @@ export default { ...@@ -83,6 +83,19 @@ export default {
this.isShowDialog = true this.isShowDialog = true
this.videoInfo = val this.videoInfo = val
}, },
fetchVideoUrl(val) {
getVideoUrl({ vid: val.resource_id }).then(res => {
if (res.video) {
const url = res.video.HD || res.video.fD || res.video.SD || res.video.LD
this.videoInfo = {
url: url,
title: val.name,
vid: val.resource_id
}
this.isShowDialog = true
}
})
},
fetchCourseList() { fetchCourseList() {
const params = { const params = {
id: this.$route.query.id || '' id: this.$route.query.id || ''
......
src/modules/school/course/views/List.vue
浏览文件 @ ae80b525
...@@ -8,7 +8,10 @@ ...@@ -8,7 +8,10 @@
<img v-if="row.curriculum" :src="row.curriculum.course_picture" width="120" height="70"> <img v-if="row.curriculum" :src="row.curriculum.course_picture" width="120" height="70">
</template> </template>
<template v-slot:table-desc="{ row }"> <template v-slot:table-desc="{ row }">
<div v-html="row.course_introducation"></div> <el-popover placement="top-start" width="500" trigger="hover">
<div v-html="row.course_introducation"></div>
<div slot="reference" class="table-desc" v-html="row.course_introducation"></div>
</el-popover>
</template> </template>
<template v-slot:table-x="{ row }"> <template v-slot:table-x="{ row }">
<router-link :to="{ path: '/school/course/details', query: { id: row.id } }"> <router-link :to="{ path: '/school/course/details', query: { id: row.id } }">
...@@ -81,5 +84,7 @@ export default { ...@@ -81,5 +84,7 @@ export default {
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.table-desc{
max-height:70px;
}
</style> </style>
src/utils/axios.js
浏览文件 @ ae80b525
...@@ -36,11 +36,18 @@ httpRequest.interceptors.request.use( ...@@ -36,11 +36,18 @@ httpRequest.interceptors.request.use(
httpRequest.interceptors.response.use( httpRequest.interceptors.response.use(
function (response) { function (response) {
const { data } = response const { data } = response
// console.log(data)
// 正常返回 // 正常返回
if (data.code === 0) { if (data.code === 0) {
return data return data
} }
// 下载excel流
if (data.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet') {
return data
}
// 获取阿里视频地址
if (data.video) {
return data
}
Message({ message: data.message || data.msg, type: 'error' }) Message({ message: data.message || data.msg, type: 'error' })
return Promise.reject(data) return Promise.reject(data)
}, },
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论