修改bug

This commit is contained in:
caoqianming 2022-04-14 08:32:40 +08:00
parent 531a44daa1
commit fd2af58c8e
4 changed files with 270 additions and 245 deletions

View File

@ -2,7 +2,7 @@
<div class="login"> <div class="login">
<div class="topTitleWrap"> <div class="topTitleWrap">
<div class="topTitle1">国家新材料测试评价平台</div> <div class="topTitle1">国家新材料测试评价平台</div>
<div class="topTitle2">先进无非金属材料行业中心</div> <div class="topTitle2">先进无非金属材料行业中心</div>
</div> </div>
<div class="login-form"> <div class="login-form">
<img class="logo" src="../../assets/logo.png" /> <img class="logo" src="../../assets/logo.png" />

View File

@ -1,14 +1,21 @@
<template> <template>
<div class="app-container"> <div class="app-container">
<el-card> <el-card>
<el-button type="primary" icon="el-icon-plus" @click="handleAddVideo" <el-button type="primary" icon="el-icon-plus" @click="handleAddVideo"
>新增</el-button >新增</el-button
> >
</el-card> </el-card>
<el-card style="margin-top: 10px"> <el-card style="margin-top: 10px">
<el-table <el-table
v-loading="listLoading" v-loading="listLoading"
:data="videoList.results.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase())|| data.category_name.toLowerCase().includes(search.toLowerCase()))" :data="
videoList.results.filter(
(data) =>
!search ||
data.name.toLowerCase().includes(search.toLowerCase()) ||
data.category_name.toLowerCase().includes(search.toLowerCase())
)
"
border border
fit fit
stripe stripe
@ -22,42 +29,42 @@
<el-table-column label="描述"> <el-table-column label="描述">
<template slot-scope="scope">{{ scope.row.description }}</template> <template slot-scope="scope">{{ scope.row.description }}</template>
</el-table-column> </el-table-column>
<el-table-column label="视频类别"> <el-table-column label="视频类别">
<template slot-scope="scope">{{ scope.row.category_name }}</template> <template slot-scope="scope">{{ scope.row.category_name }}</template>
</el-table-column> </el-table-column>
<el-table-column label="创建时间"> <el-table-column label="创建时间">
<template slot-scope="scope">{{ scope.row.create_time }}</template> <template slot-scope="scope">{{ scope.row.create_time }}</template>
</el-table-column> </el-table-column>
<el-table-column label="视频地址"> <el-table-column label="视频地址">
<template slot-scope="scope">{{ scope.row.mediaurl }}</template> <template slot-scope="scope">{{ scope.row.mediaurl }}</template>
</el-table-column> </el-table-column>
<el-table-column label="封面地址"> <el-table-column label="封面地址">
<template slot-scope="scope">{{ scope.row.coverurl }}</template> <template slot-scope="scope">{{ scope.row.coverurl }}</template>
</el-table-column> </el-table-column>
<el-table-column <el-table-column
align="center" align="center"
label="操作" label="操作"
width="200px" width="200px"
fixed="right" fixed="right"
> >
<template slot="header" slot-scope="scope"> <template slot="header" slot-scope="scope">
<el-input <el-input
v-model="search" v-model="search"
size="mini" size="mini"
placeholder="输入关键字搜索"/> placeholder="输入关键字搜索"
</template> />
</template>
<template slot-scope="scope"> <template slot-scope="scope">
<el-button <el-button
:disabled="!checkPermission(['video_update'])" :disabled="!checkPermission(['video_update'])"
type="primary" type="primary"
size="small" size="small"
icon="el-icon-edit" icon="el-icon-edit"
@click="handleEdit(scope)" @click="handleEdit(scope)"
/> />
<el-button <el-button
:disabled="!checkPermission(['video_delete'])" :disabled="!checkPermission(['video_delete'])"
type="danger" type="danger"
size="small" size="small"
icon="el-icon-delete" icon="el-icon-delete"
@ -77,22 +84,21 @@
<el-dialog <el-dialog
:visible.sync="dialogVisible" :visible.sync="dialogVisible"
:title="dialogType === 'edit' ? '编辑视频信息' : '新增视频信息'" :title="dialogType === 'edit' ? '编辑视频信息' : '新增视频信息'"
> >
<el-form <el-form
ref="Forms" ref="Forms"
:model="VideoContent" :model="VideoContent"
label-width="80px" label-width="80px"
label-position="right" label-position="right"
:rules="rule1" :rules="rule1"
> >
<el-form-item label="视频名称" prop="name"> <el-form-item label="视频名称" prop="name">
<el-input v-model="VideoContent.name" placeholder="名称" /> <el-input v-model="VideoContent.name" placeholder="名称" />
</el-form-item> </el-form-item>
<el-form-item label="视频描述" prop="description"> <el-form-item label="视频描述" prop="description">
<el-input v-model="VideoContent.description" placeholder="名称" /> <el-input v-model="VideoContent.description" placeholder="名称" />
</el-form-item> </el-form-item>
<el-form-item label="视频类型" prop="category"> <el-form-item label="视频类型" prop="category">
<el-cascader <el-cascader
v-model="VideoContent.category" v-model="VideoContent.category"
:options="typeOptions" :options="typeOptions"
@ -101,54 +107,92 @@
style="width: 100%" style="width: 100%"
></el-cascader> ></el-cascader>
</el-form-item> </el-form-item>
<form ref="vcExample"> <form ref="vcExample">
<input type="file" style="display:none;" ref="vcExampleVideo" @change="setVcExampleVideoName()" /> <input
<input type="file" style="display:none;" ref="vcExampleCover" @change="setVcExampleCoverName()" /> type="file"
</form> style="display: none"
<div class="row" style="padding:10px;"> ref="vcExampleVideo"
@change="setVcExampleVideoName()"
<el-button type="primary" @click="vcExampleAddVideo">{{vcExampleVideoName || '添加视频'}}</el-button> />
<el-button type="primary" @click="vcExampleAddCover">{{vcExampleCoverName || '添加封面'}}</el-button> <input
<el-button type="success" @click="vcExampleAddUpload">上传视频和封面</el-button> type="file"
</div> style="display: none"
ref="vcExampleCover"
@change="setVcExampleCoverName()"
<div class="row" id="resultBox"> />
<!-- 上传信息组件 --> </form>
<div class="uploaderMsgBox" v-for="uploaderInfo in uploaderInfos"> <div class="row" style="padding: 10px">
<el-button type="primary" @click="vcExampleAddVideo">{{
<div v-if="uploaderInfo.videoInfo" > vcExampleVideoName || "添加视频"
视频名称{{uploaderInfo.videoInfo.name + '.' + uploaderInfo.videoInfo.type}} }}</el-button>
上传进度 <el-button type="primary" @click="vcExampleAddCover">{{
<el-progress :text-inside="true" :stroke-width="24" :percentage="Math.floor(uploaderInfo.progress * 100)" status="success"> vcExampleCoverName || "添加封面"
</el-progress> }}</el-button>
上传结果{{uploaderInfo.isVideoUploadCancel ? '已取消' : uploaderInfo.isVideoUploadSuccess ? '上传成功' : '上传中'}} <el-button type="success" @click="vcExampleAddUpload"
<br> >上传视频和封面</el-button
地址{{uploaderInfo.videoUrl}} >
<a href="javascript:void(0);" class="cancel-upload" v-if="!uploaderInfo.isVideoUploadSuccess && !uploaderInfo.isVideoUploadCancel" @click="uploaderInfo.cancel()">取消上传</a><br>
</div> </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"> <div v-if="uploaderInfo.coverInfo">
封面名称{{uploaderInfo.coverInfo.name}} 封面名称{{ uploaderInfo.coverInfo.name }} 上传进度
上传进度 <el-progress
<el-progress :text-inside="true" :stroke-width="24" :percentage="Math.floor(uploaderInfo.coverProgress * 100)" status="success"> :text-inside="true"
</el-progress> :stroke-width="24"
上传结果{{uploaderInfo.isCoverUploadSuccess ? '上传成功' : '上传中'}} :percentage="Math.floor(uploaderInfo.coverProgress * 100)"
<br> status="success"
地址{{uploaderInfo.coverUrl}} >
<br> </el-progress>
上传结果{{
<video :src="uploaderInfo.videoUrl" style="width:400px;height:300px" id="video" autoplay></video> uploaderInfo.isCoverUploadSuccess ? "上传成功" : "上传中"
}}
<br />
地址{{ uploaderInfo.coverUrl }}
<br />
<video
:src="uploaderInfo.videoUrl"
style="width: 400px; height: 300px"
id="video"
autoplay
></video>
</div>
</div>
</div> </div>
</div>
</div>
</el-form> </el-form>
<div style="text-align: right"> <div style="text-align: right">
<el-button type="danger" @click="dialogVisible = false">取消</el-button> <el-button type="danger" @click="dialogVisible = false">取消</el-button>
@ -156,76 +200,74 @@
</div> </div>
</el-dialog> </el-dialog>
</div> </div>
</template> </template>
<script src="https://cdn-go.cn/cdn/vod-js-sdk-v6/latest/vod-js-sdk-v6.js"></script> <script src="https://cdn-go.cn/cdn/vod-js-sdk-v6/latest/vod-js-sdk-v6.js"></script>
<script type="text/javascript"> <script type="text/javascript">
import { updatevideo,getsignature,createVideo,getVideoList,deletevideo} from "@/api/video"; import {
updatevideo,
getsignature,
createVideo,
getVideoList,
deletevideo,
} from "@/api/video";
import Pagination from "@/components/Pagination"; // secondary package based on el-pagination import Pagination from "@/components/Pagination"; // secondary package based on el-pagination
import { getDictList, getDictTypeList } from "@/api/dict"; import { getDictList, getDictTypeList } from "@/api/dict";
import TcVod from "vod-js-sdk-v6"; import TcVod from "vod-js-sdk-v6";
import checkPermission from '@/utils/permission' import checkPermission from "@/utils/permission";
import { genTree } from "@/utils"; import { genTree } from "@/utils";
const defaultVideo = { const defaultVideo = {
name:"", name: "",
description:"", description: "",
category:"", category: "",
mediaurl:'', mediaurl: "",
} };
export default { export default {
components: {Pagination }, components: { Pagination },
data() { data() {
return { return {
dialogVisible:false, dialogVisible: false,
signature: "", signature: "",
treeLoding: false, treeLoding: false,
videoList: { videoList: {
count: 0, count: 0,
}, },
typeOptions:[], typeOptions: [],
dialogType:'', dialogType: "",
listQuery: { listQuery: {
page: 1, page: 1,
page_size: 20, page_size: 20,
}, },
search: '', search: "",
VideoContent:defaultVideo, VideoContent: defaultVideo,
uploaderInfos: [], uploaderInfos: [],
vcExampleVideoName: '', vcExampleVideoName: "",
listLoading:false, listLoading: false,
vcExampleCoverName: '', vcExampleCoverName: "",
rule1: { rule1: {
name: [{ required: true, message: "请输入名称", trigger: "blur" }], name: [{ required: true, message: "请输入名称", trigger: "blur" }],
category: [{ required: true, message: "请选择视频分类", trigger: 'change' }], category: [
{ required: true, message: "请选择视频分类", trigger: "change" },
],
}, },
}; };
}, },
computed: {}, computed: {},
created() { created() {
this.getList(); this.getList();
this.getTypeAll(); this.getTypeAll();
}, },
methods: { methods: {
checkPermission,
checkPermission, //列表加载
//列表加载 getList() {
getList() {
this.listLoading = true; this.listLoading = true;
getVideoList(this.listQuery).then((response) => { getVideoList(this.listQuery).then((response) => {
if (response.data) { if (response.data) {
@ -234,17 +276,17 @@ checkPermission,
this.listLoading = false; this.listLoading = false;
}); });
}, },
//视频类型 //视频类型
getTypeAll() { getTypeAll() {
getDictList({ type__code: "data_video" }).then((res) => { getDictList({ type__code: "data_video" }).then((res) => {
this.typeOptions = genTree(res.data); this.typeOptions = genTree(res.data);
}); });
}, },
/*弹出弹窗 */ /*弹出弹窗 */
handleAddVideo() { handleAddVideo() {
this.VideoContent = Object.assign({},defaultVideo); this.VideoContent = Object.assign({}, defaultVideo);
this.dialogType = "new"; this.dialogType = "new";
this.dialogVisible = true; this.dialogVisible = true;
@ -253,8 +295,8 @@ checkPermission,
}); });
}, },
//删除视频 //删除视频
handleDelete(scope) { handleDelete(scope) {
this.$confirm("确认删除?", "警告", { this.$confirm("确认删除?", "警告", {
confirmButtonText: "确认", confirmButtonText: "确认",
cancelButtonText: "取消", cancelButtonText: "取消",
@ -269,8 +311,8 @@ checkPermission,
console.error(err); console.error(err);
}); });
}, },
//编辑视频 //编辑视频
handleEdit(scope) { handleEdit(scope) {
this.VideoContent = Object.assign({}, scope.row); // copy obj this.VideoContent = Object.assign({}, scope.row); // copy obj
this.dialogType = "edit"; this.dialogType = "edit";
this.dialogVisible = true; this.dialogVisible = true;
@ -279,114 +321,104 @@ checkPermission,
this.$refs["Forms"].clearValidate(); this.$refs["Forms"].clearValidate();
}); });
}, },
setVcExampleVideoName: function () { setVcExampleVideoName: function () {
this.vcExampleVideoName = this.$refs.vcExampleVideo.files[0].name; this.vcExampleVideoName = this.$refs.vcExampleVideo.files[0].name;
}, },
setVcExampleCoverName: function () { setVcExampleCoverName: function () {
this.vcExampleCoverName = this.$refs.vcExampleCover.files[0].name; this.vcExampleCoverName = this.$refs.vcExampleCover.files[0].name;
}, },
/* /*
vcExample添加视频 vcExample添加视频
*/ */
vcExampleAddVideo: function () { vcExampleAddVideo: function () {
this.$refs.vcExampleVideo.click() this.$refs.vcExampleVideo.click();
}, },
/* /*
vcExample添加封面 vcExample添加封面
*/ */
vcExampleAddCover: function () { vcExampleAddCover: function () {
this.$refs.vcExampleCover.click() this.$refs.vcExampleCover.click();
}, },
/* /*
vcExample上传过程 vcExample上传过程
*/ */
vcExampleAddUpload: function () { vcExampleAddUpload: function () {
var self = this; var self = this;
var mediaFile = this.$refs.vcExampleVideo.files[0]; var mediaFile = this.$refs.vcExampleVideo.files[0];
var coverFile = this.$refs.vcExampleCover.files[0]; var coverFile = this.$refs.vcExampleCover.files[0];
// 获取签名 这里必须定义为函数tcVod才可识别 // 获取签名 这里必须定义为函数tcVod才可识别
const getSignature = async function() { const getSignature = async function () {
const { data } = await getsignature() const { data } = await getsignature();
return data return data;
} };
// 前文中所述的获取上传签名的函数 // 前文中所述的获取上传签名的函数
const tcVod = new TcVod({ getSignature }) const tcVod = new TcVod({ getSignature });
var uploader = tcVod.upload({ var uploader = tcVod.upload({
mediaFile: mediaFile, mediaFile: mediaFile,
coverFile: coverFile, 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();
},
};
uploader.on('media_progress', function(info) { this.uploaderInfos.push(uploaderInfo);
uploaderInfo.progress = info.percent; // console.log('uploaderInfos',this.uploaderInfos);
})
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;
})
uploader.done().then(function (doneResult) {
console.log("doneResult", doneResult);
var uploaderInfo = { uploaderInfo.fileId = doneResult.fileId;
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) uploaderInfo.coverUrl = doneResult.cover.url;
// console.log('uploaderInfos',this.uploaderInfos); uploaderInfo.videoUrl = doneResult.video.url;
uploader.done().then(function (doneResult) { self.$refs.vcExample.reset();
console.log('doneResult', doneResult) self.vcExampleVideoName = "";
self.vcExampleCoverName = "";
});
},
async confirm(form) {
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) => { this.$refs[form].validate((valid) => {
if (valid) { if (valid) {
const isEdit = this.dialogType === "edit"; const isEdit = this.dialogType === "edit";
if (isEdit) { if (isEdit) {
for (var i = 0; i < this.uploaderInfos.length; i++) { for (var i = 0; i < this.uploaderInfos.length; i++) {
this.VideoContent.fileid = this.uploaderInfos[i].fileId;
this.VideoContent.fileid= this.uploaderInfos[i].fileId ; this.VideoContent.coverurl = this.uploaderInfos[i].coverUrl;
this.VideoContent.mediaurl = this.uploaderInfos[i].videoUrl;
this.VideoContent.coverurl= this.uploaderInfos[i].coverUrl ; }
this.VideoContent.mediaurl= this.uploaderInfos[i].videoUrl; // console.log(this.VideoContent)
}
// console.log(this.VideoContent)
updatevideo(this.VideoContent.id, this.VideoContent).then((res) => { updatevideo(this.VideoContent.id, this.VideoContent).then((res) => {
if (res.code >= 200) { if (res.code >= 200) {
this.getList(); this.getList();
@ -395,18 +427,15 @@ async confirm(form) {
} }
}); });
} else { } else {
for (var i = 0; i < this.uploaderInfos.length; i++) {
this.VideoContent.fileid = this.uploaderInfos[i].fileId;
for (var i = 0; i < this.uploaderInfos.length; i++) { this.VideoContent.coverurl = this.uploaderInfos[i].coverUrl;
this.VideoContent.mediaurl = this.uploaderInfos[i].videoUrl;
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) => { createVideo(this.VideoContent).then((res) => {
if (res.code >= 200) { if (res.code >= 200) {
this.getList(); this.getList();
this.dialogVisible = false; this.dialogVisible = false;
this.$message.success("成功"); this.$message.success("成功");
} }
@ -419,42 +448,39 @@ async confirm(form) {
}, },
}, },
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.text-danger { .text-danger {
color: red; color: red;
} }
.control-label { .control-label {
text-align: left !important; text-align: left !important;
} }
#resultBox { #resultBox {
width: 100%; width: 100%;
height: 300px; height: 300px;
border: 1px solid #888; border: 1px solid #888;
padding: 5px; padding: 5px;
overflow: auto; overflow: auto;
margin-bottom: 20px; margin-bottom: 20px;
} }
.uploaderMsgBox { .uploaderMsgBox {
border-bottom: 1px solid #888;
background: #1a7ce0;
color: white;
font-size: medium;
}
border-bottom: 1px solid #888; .cancel-upload {
background: #1a7ce0; text-decoration: none;
color: white; cursor: pointer;
font-size: medium; }
} </style>
.cancel-upload {
text-decoration: none;
cursor: pointer;
}
</style>

BIN
client_mp/static.zip Normal file

Binary file not shown.

View File

@ -1,5 +1,4 @@
import base64 import base64
from dataclasses import field
import hashlib import hashlib
import hmac import hmac
import json import json