juesechacun
This commit is contained in:
parent
3168a1e913
commit
74f8b80204
|
|
@ -23,6 +23,7 @@
|
||||||
"normalize.css": "7.0.0",
|
"normalize.css": "7.0.0",
|
||||||
"nprogress": "0.2.0",
|
"nprogress": "0.2.0",
|
||||||
"path-to-regexp": "2.4.0",
|
"path-to-regexp": "2.4.0",
|
||||||
|
"vod-js-sdk-v6": "^1.4.12",
|
||||||
"vue": "2.6.10",
|
"vue": "2.6.10",
|
||||||
"vue-router": "3.0.6",
|
"vue-router": "3.0.6",
|
||||||
"vuex": "3.1.0",
|
"vuex": "3.1.0",
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,44 @@
|
||||||
|
import request from '@/utils/request'
|
||||||
|
|
||||||
|
|
||||||
|
export function getVideoList(query) {
|
||||||
|
return request({
|
||||||
|
url: '/vod/video/',
|
||||||
|
method: 'get',
|
||||||
|
params: query
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getsignature() {
|
||||||
|
return request({
|
||||||
|
url: '/vod/signature/',
|
||||||
|
method: 'get'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
export function createVideo(data) {
|
||||||
|
return request({
|
||||||
|
url: '/vod/video/',
|
||||||
|
method: 'post',
|
||||||
|
data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
export function deletevideo(id, data) {
|
||||||
|
return request({
|
||||||
|
url: `/vod/video/${id}/`,
|
||||||
|
method: 'delete',
|
||||||
|
data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
export function updatevideo(id, data) {
|
||||||
|
return request({
|
||||||
|
url: `/vod/video/${id}/`,
|
||||||
|
method: 'put',
|
||||||
|
data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
export function getVideo(id) {
|
||||||
|
return request({
|
||||||
|
url: `/vod/video/${id}/`,
|
||||||
|
method: 'get'
|
||||||
|
})
|
||||||
|
}
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 73 KiB |
|
|
@ -7,7 +7,6 @@ import 'element-ui/lib/theme-chalk/index.css'
|
||||||
// import locale from 'element-ui/lib/locale/lang/en' // lang i18n
|
// import locale from 'element-ui/lib/locale/lang/en' // lang i18n
|
||||||
|
|
||||||
import '@/styles/index.scss' // global css
|
import '@/styles/index.scss' // global css
|
||||||
|
|
||||||
import App from './App'
|
import App from './App'
|
||||||
import store from './store'
|
import store from './store'
|
||||||
import router from './router'
|
import router from './router'
|
||||||
|
|
|
||||||
|
|
@ -202,6 +202,35 @@ export const asyncRoutes = [
|
||||||
},
|
},
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: '/test',
|
||||||
|
component: Layout,
|
||||||
|
redirect: '/test/',
|
||||||
|
name: 'TestVideo',
|
||||||
|
meta: { title: '视频培训', icon: 'guide', perms: ['testvideo'] },
|
||||||
|
alwaysShow: true,
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
path: 'videolist',
|
||||||
|
name: 'videolist',
|
||||||
|
component: () => import('@/views/testvideo/videolist.vue'),
|
||||||
|
meta: { title: '视频列表', perms: ['videolist'] }
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: 'upload',
|
||||||
|
name: 'upload',
|
||||||
|
component: () => import('@/views/testvideo/upload.vue'),
|
||||||
|
meta: { title: '上传视频', perms: ['uploadvideo'] }
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: 'index/:id',
|
||||||
|
name: 'Index',
|
||||||
|
component: () => import('@/views/testvideo/index.vue'),
|
||||||
|
meta: { title: '视频播放', perms: ['uploadvideo'] },
|
||||||
|
hidden: true
|
||||||
|
},
|
||||||
|
]
|
||||||
|
},
|
||||||
{
|
{
|
||||||
path: '/pt',
|
path: '/pt',
|
||||||
component: Layout,
|
component: Layout,
|
||||||
|
|
|
||||||
|
|
@ -136,7 +136,6 @@ export default {
|
||||||
upUrl: upUrl(),
|
upUrl: upUrl(),
|
||||||
fileList:[],
|
fileList:[],
|
||||||
Content: defaultContent,
|
Content: defaultContent,
|
||||||
|
|
||||||
typeOptions: [],
|
typeOptions: [],
|
||||||
listLoading: true,
|
listLoading: true,
|
||||||
dialogVisible: false,
|
dialogVisible: false,
|
||||||
|
|
|
||||||
|
|
@ -41,6 +41,21 @@
|
||||||
:label="item.display_name"
|
:label="item.display_name"
|
||||||
:value="item.key"
|
:value="item.key"
|
||||||
/>
|
/>
|
||||||
|
</el-select>
|
||||||
|
<el-select
|
||||||
|
v-model="listQuery.roles"
|
||||||
|
placeholder="角色"
|
||||||
|
clearable
|
||||||
|
style="width: 90px"
|
||||||
|
class="filter-item"
|
||||||
|
@change="handleFilter"
|
||||||
|
>
|
||||||
|
<el-option
|
||||||
|
v-for="item in roles"
|
||||||
|
:key="item.value"
|
||||||
|
:label="item.label"
|
||||||
|
:value="item.value"
|
||||||
|
/>
|
||||||
</el-select>
|
</el-select>
|
||||||
<el-input
|
<el-input
|
||||||
v-model="listQuery.search"
|
v-model="listQuery.search"
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,160 @@
|
||||||
|
<template>
|
||||||
|
<el-container>
|
||||||
|
<el-header style="height: 80px;padding: 0">
|
||||||
|
<el-row class="biaotou">
|
||||||
|
<el-col :span="20" style="text-align:center;color:seashell;font-size:32px;line-height: 70px;" >
|
||||||
|
检验管理部培训视频
|
||||||
|
</el-col>
|
||||||
|
|
||||||
|
</el-row>
|
||||||
|
|
||||||
|
|
||||||
|
</el-header>
|
||||||
|
<el-main style="margin-top: 70px;">
|
||||||
|
<div style="margin:1% 12.5%;">
|
||||||
|
<div class="content" >
|
||||||
|
<video :id="tcPlayerId" width="1000" height="500" class="tencent-player" preload="auto" playsinline webkit-playsinline></video>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div style="margin-top: 70px;">
|
||||||
|
<el-row :gutter="20">
|
||||||
|
<el-col >
|
||||||
|
<div style="margin-bottom: 6px">
|
||||||
|
<span class="term">视频名称：</span>
|
||||||
|
<span class="desc"> {{ video.name }}</span>
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
<el-row :gutter="20">
|
||||||
|
<el-col >
|
||||||
|
<div style="margin-bottom: 6px">
|
||||||
|
<span class="term">视频描述：</span>
|
||||||
|
<span class="desc"> {{ video.description }}</span>
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</el-main>
|
||||||
|
</el-container>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import {getVideo} from "@/api/video";
|
||||||
|
function loadTcScript(cb) {
|
||||||
|
loadScript(cb, {
|
||||||
|
id: 'tcPlayerScriptId',
|
||||||
|
url: 'https://imgcache.qq.com/open/qcloud/video/tcplayer/tcplayer.min.js',
|
||||||
|
});
|
||||||
|
}
|
||||||
|
function loadScript(cb, obj) {
|
||||||
|
if (document.getElementById(obj.id)) {
|
||||||
|
cb();
|
||||||
|
} else {
|
||||||
|
const script = document.createElement('script');
|
||||||
|
script.async = true;
|
||||||
|
script.src = obj.url;
|
||||||
|
script.id = obj.id;
|
||||||
|
script.onload = () => {
|
||||||
|
cb();
|
||||||
|
};
|
||||||
|
document.body.appendChild(script);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'TencentPlayer',
|
||||||
|
props: {
|
||||||
|
options: {
|
||||||
|
type: Object,
|
||||||
|
default() {
|
||||||
|
return {};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
tcPlayerId : 'tcPlayer' + Date.now(),
|
||||||
|
player: null,
|
||||||
|
video:{id: 0},
|
||||||
|
description:'',
|
||||||
|
name:'',
|
||||||
|
};
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
options: {
|
||||||
|
handler(newV, oldV) {
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.loadJS();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
immediate: true,
|
||||||
|
deep: true,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.id = this.$route.params.id;
|
||||||
|
this.fileid = this.$route.params.fileid;
|
||||||
|
this.getVideo();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
getVideo(){
|
||||||
|
getVideo(this.id).then((response) => {
|
||||||
|
|
||||||
|
if (response.data) {
|
||||||
|
|
||||||
|
this.video= response.data;
|
||||||
|
}
|
||||||
|
this.listLoading = false;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
loadJS() {
|
||||||
|
if (window.TCPlayer) {
|
||||||
|
this.initVideo();
|
||||||
|
} else {
|
||||||
|
loadTcScript(() => {
|
||||||
|
this.initVideo();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
initVideo() {
|
||||||
|
const playerParm = {
|
||||||
|
fileID: this.fileid,
|
||||||
|
appID: '1253484223',
|
||||||
|
|
||||||
|
};
|
||||||
|
setTimeout(() => {
|
||||||
|
if (!this.player) {
|
||||||
|
this.player = TCPlayer(this.tcPlayerId, playerParm);
|
||||||
|
} else {
|
||||||
|
this.player.loadVideoByID(playerParm);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
,
|
||||||
|
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
|
||||||
|
@import url("https://imgcache.qq.com/open/qcloud/video/tcplayer/tcplayer.css");
|
||||||
|
|
||||||
|
.el-header, .el-footer {
|
||||||
|
|
||||||
|
color: #333;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 40px;
|
||||||
|
position: fixed;
|
||||||
|
width: 100%;
|
||||||
|
z-index: 1010;
|
||||||
|
}
|
||||||
|
.biaotou{
|
||||||
|
background: url(../../assets/year-100-bg.png) no-repeat 50%,linear-gradient(90deg,#e95353 50%,#bf2221 0);
|
||||||
|
box-shadow: none;
|
||||||
|
height: 72px;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,453 @@
|
||||||
|
<template>
|
||||||
|
<div class="app-container">
|
||||||
|
<el-card>
|
||||||
|
<el-button type="primary" icon="el-icon-plus" @click="handleAddVideo"
|
||||||
|
>新增</el-button
|
||||||
|
>
|
||||||
|
</el-card>
|
||||||
|
<el-card style="margin-top: 10px">
|
||||||
|
<el-table
|
||||||
|
v-loading="listLoading"
|
||||||
|
:data="videoList.results.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase())|| data.category_name.toLowerCase().includes(search.toLowerCase()))"
|
||||||
|
border
|
||||||
|
fit
|
||||||
|
stripe
|
||||||
|
highlight-current-row
|
||||||
|
max-height="800"
|
||||||
|
>
|
||||||
|
<el-table-column type="index" width="50" />
|
||||||
|
<el-table-column label="名称">
|
||||||
|
<template slot-scope="scope">{{ scope.row.name }}</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="描述">
|
||||||
|
<template slot-scope="scope">{{ scope.row.description }}</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="视频类别">
|
||||||
|
<template slot-scope="scope">{{ scope.row.category_name }}</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="创建时间">
|
||||||
|
<template slot-scope="scope">{{ scope.row.create_time }}</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="视频地址">
|
||||||
|
<template slot-scope="scope">{{ scope.row.mediaurl }}</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="封面地址">
|
||||||
|
<template slot-scope="scope">{{ scope.row.coverurl }}</template>
|
||||||
|
</el-table-column>
|
||||||
|
|
||||||
|
|
||||||
|
<el-table-column
|
||||||
|
align="center"
|
||||||
|
label="操作"
|
||||||
|
width="200px"
|
||||||
|
fixed="right"
|
||||||
|
>
|
||||||
|
<template slot="header" slot-scope="scope">
|
||||||
|
<el-input
|
||||||
|
v-model="search"
|
||||||
|
size="mini"
|
||||||
|
placeholder="输入关键字搜索"/>
|
||||||
|
</template>
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<el-button
|
||||||
|
type="primary"
|
||||||
|
size="small"
|
||||||
|
icon="el-icon-edit"
|
||||||
|
@click="handleEdit(scope)"
|
||||||
|
/>
|
||||||
|
<el-button
|
||||||
|
type="danger"
|
||||||
|
size="small"
|
||||||
|
icon="el-icon-delete"
|
||||||
|
@click="handleDelete(scope)"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
<pagination
|
||||||
|
v-show="videoList.count > 0"
|
||||||
|
:total="videoList.count"
|
||||||
|
:page.sync="listQuery.page"
|
||||||
|
:limit.sync="listQuery.page_size"
|
||||||
|
@pagination="getVideoList"
|
||||||
|
/>
|
||||||
|
</el-card>
|
||||||
|
<el-dialog
|
||||||
|
:visible.sync="dialogVisible"
|
||||||
|
:title="dialogType === 'edit' ? '编辑视频信息' : '新增视频信息'"
|
||||||
|
|
||||||
|
>
|
||||||
|
<el-form
|
||||||
|
ref="Forms"
|
||||||
|
:model="VideoContent"
|
||||||
|
label-width="80px"
|
||||||
|
label-position="right"
|
||||||
|
:rules="rule1"
|
||||||
|
>
|
||||||
|
<el-form-item label="视频名称" prop="name">
|
||||||
|
<el-input v-model="VideoContent.name" placeholder="名称" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="视频描述" prop="description">
|
||||||
|
<el-input v-model="VideoContent.description" placeholder="名称" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="视频类型" prop="category">
|
||||||
|
<el-cascader
|
||||||
|
v-model="VideoContent.category"
|
||||||
|
:options="typeOptions"
|
||||||
|
:props="{ emitPath: false }"
|
||||||
|
clearable
|
||||||
|
style="width: 100%"
|
||||||
|
></el-cascader>
|
||||||
|
</el-form-item>
|
||||||
|
<form ref="vcExample">
|
||||||
|
<input type="file" style="display:none;" ref="vcExampleVideo" @change="setVcExampleVideoName()" />
|
||||||
|
<input type="file" style="display:none;" ref="vcExampleCover" @change="setVcExampleCoverName()" />
|
||||||
|
</form>
|
||||||
|
<div class="row" style="padding:10px;">
|
||||||
|
|
||||||
|
<el-button type="primary" @click="vcExampleAddVideo">{{vcExampleVideoName || '添加视频'}}</el-button>
|
||||||
|
<el-button type="primary" @click="vcExampleAddCover">{{vcExampleCoverName || '添加封面'}}</el-button>
|
||||||
|
<el-button type="success" @click="vcExampleAddUpload">上传视频和封面</el-button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="row" id="resultBox">
|
||||||
|
<!-- 上传信息组件 -->
|
||||||
|
<div class="uploaderMsgBox" v-for="uploaderInfo in uploaderInfos">
|
||||||
|
|
||||||
|
<div v-if="uploaderInfo.videoInfo" >
|
||||||
|
视频名称：{{uploaderInfo.videoInfo.name + '.' + uploaderInfo.videoInfo.type}}；
|
||||||
|
上传进度：
|
||||||
|
<el-progress :text-inside="true" :stroke-width="24" :percentage="Math.floor(uploaderInfo.progress * 100)" status="success">
|
||||||
|
</el-progress>
|
||||||
|
上传结果：{{uploaderInfo.isVideoUploadCancel ? '已取消' : uploaderInfo.isVideoUploadSuccess ? '上传成功' : '上传中'}}；
|
||||||
|
<br>
|
||||||
|
地址：{{uploaderInfo.videoUrl}}；
|
||||||
|
<a href="javascript:void(0);" class="cancel-upload" v-if="!uploaderInfo.isVideoUploadSuccess && !uploaderInfo.isVideoUploadCancel" @click="uploaderInfo.cancel()">取消上传</a><br>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div v-if="uploaderInfo.coverInfo">
|
||||||
|
封面名称：{{uploaderInfo.coverInfo.name}}；
|
||||||
|
上传进度：
|
||||||
|
<el-progress :text-inside="true" :stroke-width="24" :percentage="Math.floor(uploaderInfo.coverProgress * 100)" status="success">
|
||||||
|
</el-progress>
|
||||||
|
上传结果：{{uploaderInfo.isCoverUploadSuccess ? '上传成功' : '上传中'}}；
|
||||||
|
<br>
|
||||||
|
地址：{{uploaderInfo.coverUrl}}；
|
||||||
|
<br>
|
||||||
|
|
||||||
|
<video :src="uploaderInfo.videoUrl" style="width:400px;height:300px" id="video" autoplay></video>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</el-form>
|
||||||
|
<div style="text-align: right">
|
||||||
|
<el-button type="danger" @click="dialogVisible = false">取消</el-button>
|
||||||
|
<el-button type="primary" @click="confirm('Forms')">创建信息</el-button>
|
||||||
|
</div>
|
||||||
|
</el-dialog>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script src="https://cdn-go.cn/cdn/vod-js-sdk-v6/latest/vod-js-sdk-v6.js"></script>
|
||||||
|
|
||||||
|
<script type="text/javascript">
|
||||||
|
import { updatevideo,getsignature,createVideo,getVideoList,deletevideo} from "@/api/video";
|
||||||
|
|
||||||
|
import Pagination from "@/components/Pagination"; // secondary package based on el-pagination
|
||||||
|
import { getDictList, getDictTypeList } from "@/api/dict";
|
||||||
|
import TcVod from "vod-js-sdk-v6";
|
||||||
|
|
||||||
|
import { genTree } from "@/utils";
|
||||||
|
const defaultVideo = {
|
||||||
|
name:"",
|
||||||
|
description:"",
|
||||||
|
category:"",
|
||||||
|
mediaurl:'',
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {Pagination },
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
dialogVisible:false,
|
||||||
|
signature: "",
|
||||||
|
treeLoding: false,
|
||||||
|
videoList:"",
|
||||||
|
typeOptions:[],
|
||||||
|
listQuery: {
|
||||||
|
page: 1,
|
||||||
|
page_size: 20,
|
||||||
|
},
|
||||||
|
search: '',
|
||||||
|
VideoContent:defaultVideo,
|
||||||
|
uploaderInfos: [],
|
||||||
|
vcExampleVideoName: '',
|
||||||
|
listLoading:false,
|
||||||
|
vcExampleCoverName: '',
|
||||||
|
rule1: {
|
||||||
|
name: [{ required: true, message: "请输入名称", trigger: "blur" }],
|
||||||
|
category: [{ required: true, message: "请选择视频分类", trigger: 'change' }],
|
||||||
|
},
|
||||||
|
};
|
||||||
|
},
|
||||||
|
computed: {},
|
||||||
|
|
||||||
|
created() {
|
||||||
|
|
||||||
|
this.getList();
|
||||||
|
this.getTypeAll();
|
||||||
|
|
||||||
|
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
|
||||||
|
|
||||||
|
//列表加载
|
||||||
|
getList() {
|
||||||
|
this.listLoading = true;
|
||||||
|
getVideoList().then((response) => {
|
||||||
|
if (response.data) {
|
||||||
|
this.videoList = response.data;
|
||||||
|
}
|
||||||
|
this.listLoading = false;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
//视频类型
|
||||||
|
|
||||||
|
getTypeAll() {
|
||||||
|
getDictList({ type__code: "data_video" }).then((res) => {
|
||||||
|
this.typeOptions = genTree(res.data);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
/*弹出弹窗 */
|
||||||
|
handleAddVideo() {
|
||||||
|
this.VideoContent = Object.assign({},defaultVideo);
|
||||||
|
this.dialogType = "new";
|
||||||
|
this.dialogVisible = true;
|
||||||
|
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.$refs["Forms"].clearValidate();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
//删除视频
|
||||||
|
handleDelete(scope) {
|
||||||
|
this.$confirm("确认删除?", "警告", {
|
||||||
|
confirmButtonText: "确认",
|
||||||
|
cancelButtonText: "取消",
|
||||||
|
type: "error",
|
||||||
|
})
|
||||||
|
.then(async () => {
|
||||||
|
await deletevideo(scope.row.id);
|
||||||
|
this.getList();
|
||||||
|
this.$message.success("成功");
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
console.error(err);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
//编辑视频
|
||||||
|
handleEdit(scope) {
|
||||||
|
this.VideoContent = Object.assign({}, scope.row); // copy obj
|
||||||
|
this.dialogType = "edit";
|
||||||
|
this.dialogVisible = true;
|
||||||
|
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.$refs["Forms"].clearValidate();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
setVcExampleVideoName: function () {
|
||||||
|
this.vcExampleVideoName = this.$refs.vcExampleVideo.files[0].name;
|
||||||
|
},
|
||||||
|
setVcExampleCoverName: function () {
|
||||||
|
this.vcExampleCoverName = this.$refs.vcExampleCover.files[0].name;
|
||||||
|
},
|
||||||
|
/*
|
||||||
|
vcExample添加视频
|
||||||
|
*/
|
||||||
|
vcExampleAddVideo: function () {
|
||||||
|
this.$refs.vcExampleVideo.click()
|
||||||
|
},
|
||||||
|
/*
|
||||||
|
vcExample添加封面
|
||||||
|
*/
|
||||||
|
vcExampleAddCover: function () {
|
||||||
|
this.$refs.vcExampleCover.click()
|
||||||
|
},
|
||||||
|
/*
|
||||||
|
vcExample上传过程
|
||||||
|
*/
|
||||||
|
vcExampleAddUpload: function () {
|
||||||
|
var self = this;
|
||||||
|
|
||||||
|
var mediaFile = this.$refs.vcExampleVideo.files[0];
|
||||||
|
var coverFile = this.$refs.vcExampleCover.files[0];
|
||||||
|
|
||||||
|
// 获取签名 （这里必须定义为函数，tcVod才可识别）
|
||||||
|
const getSignature = async function() {
|
||||||
|
const { data } = await getsignature()
|
||||||
|
return data
|
||||||
|
}
|
||||||
|
// 前文中所述的获取上传签名的函数
|
||||||
|
const tcVod = new TcVod({ getSignature })
|
||||||
|
var uploader = tcVod.upload({
|
||||||
|
mediaFile: mediaFile,
|
||||||
|
coverFile: coverFile,
|
||||||
|
})
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
uploader.on('media_progress', function(info) {
|
||||||
|
uploaderInfo.progress = info.percent;
|
||||||
|
})
|
||||||
|
uploader.on('media_upload', function(info) {
|
||||||
|
uploaderInfo.isVideoUploadSuccess = true;
|
||||||
|
})
|
||||||
|
uploader.on('cover_progress', function(info) {
|
||||||
|
uploaderInfo.coverProgress = info.percent;
|
||||||
|
})
|
||||||
|
uploader.on('cover_upload', function(info) {
|
||||||
|
uploaderInfo.isCoverUploadSuccess = true;
|
||||||
|
})
|
||||||
|
|
||||||
|
|
||||||
|
var uploaderInfo = {
|
||||||
|
videoInfo: uploader.videoInfo,
|
||||||
|
coverInfo: uploader.coverInfo,
|
||||||
|
isVideoUploadSuccess: false,
|
||||||
|
isVideoUploadCancel: false,
|
||||||
|
isCoverUploadSuccess: false,
|
||||||
|
progress: 0,
|
||||||
|
coverProgress: 0,
|
||||||
|
fileId: '',
|
||||||
|
videoUrl: '',
|
||||||
|
coverUrl: '',
|
||||||
|
cancel: function () {
|
||||||
|
uploaderInfo.isVideoUploadCancel = true;
|
||||||
|
uploader.cancel()
|
||||||
|
},
|
||||||
|
}
|
||||||
|
|
||||||
|
this.uploaderInfos.push(uploaderInfo)
|
||||||
|
// console.log('uploaderInfos',this.uploaderInfos);
|
||||||
|
|
||||||
|
uploader.done().then(function (doneResult) {
|
||||||
|
// console.log('doneResult', doneResult)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
uploaderInfo.fileId = doneResult.fileId;
|
||||||
|
|
||||||
|
uploaderInfo.coverUrl = doneResult.cover.url;
|
||||||
|
uploaderInfo.videoUrl = doneResult.video.url;
|
||||||
|
|
||||||
|
|
||||||
|
self.$refs.vcExample.reset();
|
||||||
|
self.vcExampleVideoName = ''
|
||||||
|
self.vcExampleCoverName = ''
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
async confirm(form) {
|
||||||
|
this.$refs[form].validate((valid) => {
|
||||||
|
if (valid) {
|
||||||
|
const isEdit = this.dialogType === "edit";
|
||||||
|
if (isEdit) {
|
||||||
|
for (var i = 0; i < this.uploaderInfos.length; i++) {
|
||||||
|
|
||||||
|
this.VideoContent.fileid= this.uploaderInfos[i].fileId ;
|
||||||
|
|
||||||
|
this.VideoContent.coverurl= this.uploaderInfos[i].coverUrl ;
|
||||||
|
this.VideoContent.mediaurl= this.uploaderInfos[i].videoUrl;
|
||||||
|
|
||||||
|
}
|
||||||
|
// console.log(this.VideoContent)
|
||||||
|
updatevideo(this.VideoContent.id, this.VideoContent).then((res) => {
|
||||||
|
if (res.code >= 200) {
|
||||||
|
this.getList();
|
||||||
|
this.dialogVisible = false;
|
||||||
|
this.$message.success("成功");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
|
||||||
|
for (var i = 0; i < this.uploaderInfos.length; i++) {
|
||||||
|
|
||||||
|
this.VideoContent.fileid= this.uploaderInfos[i].fileId ;
|
||||||
|
|
||||||
|
this.VideoContent.coverurl= this.uploaderInfos[i].coverUrl ;
|
||||||
|
this.VideoContent.mediaurl= this.uploaderInfos[i].videoUrl;
|
||||||
|
|
||||||
|
}
|
||||||
|
createVideo(this.VideoContent).then((res) => {
|
||||||
|
if (res.code >= 200) {
|
||||||
|
this.getList();
|
||||||
|
this.dialogVisible = false;
|
||||||
|
this.$message.success("成功");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
<style type="text/css">
|
||||||
|
.text-danger {
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
|
||||||
|
.control-label {
|
||||||
|
text-align: left !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
#resultBox {
|
||||||
|
width: 100%;
|
||||||
|
height: 300px;
|
||||||
|
border: 1px solid #888;
|
||||||
|
padding: 5px;
|
||||||
|
overflow: auto;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uploaderMsgBox {
|
||||||
|
|
||||||
|
border-bottom: 1px solid #888;
|
||||||
|
background: #1a7ce0;
|
||||||
|
color: white;
|
||||||
|
font-size: medium;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cancel-upload {
|
||||||
|
text-decoration: none;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -0,0 +1,225 @@
|
||||||
|
<template>
|
||||||
|
<el-container>
|
||||||
|
<el-header style="height: 80px;padding: 0">
|
||||||
|
<el-row class="biaotou">
|
||||||
|
<el-col :span="20" style="text-align:center;color:seashell;font-size:32px;line-height: 70px;" >
|
||||||
|
检验管理部培训视频
|
||||||
|
</el-col>
|
||||||
|
|
||||||
|
</el-row>
|
||||||
|
|
||||||
|
|
||||||
|
</el-header>
|
||||||
|
<el-main>
|
||||||
|
|
||||||
|
<el-row style="background-color: #f5f7fa;
|
||||||
|
position: fixed;width: 83%;z-index:1000;margin-top: -8px;
|
||||||
|
">
|
||||||
|
<el-col style="width:120px;margin-top: 12px;">
|
||||||
|
<el-link :underline="false" @click="getList"><el-span class="mune">全部</el-span></el-link>
|
||||||
|
</el-col>
|
||||||
|
<el-col style="width:120px;margin-top: 12px;" v-for="o in typeOptions" :key="o">
|
||||||
|
<el-link :underline="false" @click="getListtype(o)"><el-span class="mune">{{o.name}}</el-span></el-link>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
<el-row style="margin-top: 50px;">
|
||||||
|
<el-col style="margin:0.5%;width: 24%;" v-for="o in videoList.results" :key="o">
|
||||||
|
<el-card :body-style="{ padding: '0px' }" shadow="always" class="cardDiv" >
|
||||||
|
<a @click="clickImg(o)">
|
||||||
|
<el-image :src="o.coverurl" style="width:100%;height: 300px;" ></el-image>
|
||||||
|
<div class="des"> <span>{{o.description}}</span></div>
|
||||||
|
<div style="padding: 14px;">
|
||||||
|
<span style="font-family: 'Helvetica Neue'">{{o.name}}</span>
|
||||||
|
<div class="bottom clearfix">
|
||||||
|
|
||||||
|
<time class="time">{{ o.create_time.substring(0,10) }}</time>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</el-card>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</el-main>
|
||||||
|
</el-container>
|
||||||
|
</template>
|
||||||
|
<script type="text/javascript">
|
||||||
|
import { getsignature,createVideo,getVideoList} from "@/api/video";
|
||||||
|
import { getDictList, getDictTypeList } from "@/api/dict";
|
||||||
|
|
||||||
|
|
||||||
|
import { genTree } from "@/utils";
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: { },
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
|
||||||
|
videoList:"",
|
||||||
|
typeOptions:[],
|
||||||
|
|
||||||
|
};
|
||||||
|
},
|
||||||
|
computed: {},
|
||||||
|
|
||||||
|
created() {
|
||||||
|
|
||||||
|
this.getList();
|
||||||
|
this.getTypeAll();
|
||||||
|
|
||||||
|
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
|
||||||
|
|
||||||
|
//列表加载
|
||||||
|
getList() {
|
||||||
|
this.listLoading = true;
|
||||||
|
getVideoList().then((response) => {
|
||||||
|
if (response.data) {
|
||||||
|
this.videoList = response.data;
|
||||||
|
}
|
||||||
|
this.listLoading = false;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
getListtype(a){
|
||||||
|
getVideoList({category:a.id}).then((response) => {
|
||||||
|
|
||||||
|
if (response.data) {
|
||||||
|
this.videoList = response.data;
|
||||||
|
}
|
||||||
|
this.listLoading = false;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
//视频类型
|
||||||
|
|
||||||
|
getTypeAll() {
|
||||||
|
getDictList({ type__code: "data_video" }).then((res) => {
|
||||||
|
this.typeOptions = genTree(res.data);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
//跳转播放视频界面
|
||||||
|
clickImg(a){
|
||||||
|
this.$router.push({name: "Index", params: { fileid: a.fileid,id:a.id} })
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
<style type="text/css">
|
||||||
|
.time {
|
||||||
|
font-size: 13px;
|
||||||
|
color: #999;
|
||||||
|
float:right;
|
||||||
|
}
|
||||||
|
.el-col-offset-0{
|
||||||
|
margin-left: 50px;
|
||||||
|
}
|
||||||
|
.bottom {
|
||||||
|
margin-top: 13px;
|
||||||
|
line-height: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button {
|
||||||
|
padding: 0;
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.image {
|
||||||
|
width: 100%;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.biaotou{
|
||||||
|
background: url(../../assets/year-100-bg.png) no-repeat 50%,linear-gradient(90deg,#e95353 50%,#bf2221 0);
|
||||||
|
box-shadow: none;
|
||||||
|
height: 72px;
|
||||||
|
}
|
||||||
|
.clearfix:before,
|
||||||
|
.clearfix:after {
|
||||||
|
display: table;
|
||||||
|
content: "";
|
||||||
|
}
|
||||||
|
|
||||||
|
.clearfix:after {
|
||||||
|
clear: both
|
||||||
|
}
|
||||||
|
.el-header, .el-footer {
|
||||||
|
|
||||||
|
color: #333;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 40px;
|
||||||
|
position: fixed;
|
||||||
|
width: 100%;
|
||||||
|
z-index: 1010;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-aside {
|
||||||
|
background-color: #D3DCE6;
|
||||||
|
color: #333;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 200px;
|
||||||
|
}
|
||||||
|
.navbar[data-v-d16d6306]{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.el-main {
|
||||||
|
background-color: #ffffff;
|
||||||
|
color: #333;
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 60px;
|
||||||
|
|
||||||
|
}
|
||||||
|
.des{
|
||||||
|
height: 100px; margin-top: -100px;z-index:9999;position: relative;background-color:rgba(220,38,38,0.2);color: #f5f4f4;
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
.cardDiv:hover .des{
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
body > .el-container {
|
||||||
|
margin-bottom: 40px;
|
||||||
|
}
|
||||||
|
.el-link{
|
||||||
|
font-size: 20px;
|
||||||
|
font-family: auto;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
.mune{
|
||||||
|
font-family: PingFang SC,DFPKingGothicGB-Medium,sans-serif;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 500;
|
||||||
|
line-height: 24px;
|
||||||
|
max-width: 112px;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
.el-link.el-link--default {
|
||||||
|
color: seashell;
|
||||||
|
background: #fff;
|
||||||
|
border: 1px solid rgba(0,0,0,.1);
|
||||||
|
border-radius: 100px;
|
||||||
|
color: rgba(47,48,53,.9);
|
||||||
|
cursor: pointer;
|
||||||
|
display: flex;
|
||||||
|
border: 1px solid rgba(0,0,0,.1);
|
||||||
|
justify-content: center;
|
||||||
|
min-width: 72px;
|
||||||
|
padding: 5px 16px;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
margin-right: 16px;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue