zcdsj
/
cma_search
mirror of https://e.coding.net/ctcdevteam/cma_search.git
5
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

yundianbo

This commit is contained in:
shijing 2022-04-20 09:04:10 +08:00
parent 6535ad167d
commit 268d3e4815
4 changed files with 439 additions and 322 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
client/.env.development
View File

@ -3,8 +3,8 @@ ENV = 'development'
# base api # base api
#VUE_APP_BASE_API = 'http://10.0.11.127:8000/api' #VUE_APP_BASE_API = 'http://10.0.11.127:8000/api'
VUE_APP_BASE_API = 'http://127.0.0.1:8000/api' #VUE_APP_BASE_API = 'http://127.0.0.1:8000/api'
#VUE_APP_BASE_API = 'https://testsearch.ctc.ac.cn/api' VUE_APP_BASE_API = 'https://testsearch.ctc.ac.cn/api'
#VUE_APP_BASE_API = 'http://47.95.0.242:9101/api' #VUE_APP_BASE_API = 'http://47.95.0.242:9101/api'

340
client/src/views/testvideo/index.vue
View File

@ -1,169 +1,170 @@
<template> <template>
<el-container> <el-container>
<el-header style="height: 80px;padding: 0"> <el-header style="height: 80px;padding: 0">
<el-row class="biaotou"> <el-row class="biaotou">
<el-col :span="20" style="text-align:center;color:seashell;font-size:32px;line-height: 70px;" > <el-col :span="20" style="text-align:center;color:seashell;font-size:32px;line-height: 70px;">
检验管理部培训视频 {{ video.name }}
</el-col> </el-col>
</el-row>
</el-row> </el-header>
<el-main style="margin-top: 70px;">
<div style="margin:20px 12%;">
</el-header> <div class="content" @click="clicknub">
<el-main style="margin-top: 70px;"> <video
<div style="margin:1% 12.5%;"> :id="tcPlayerId"
<div class="content" @click="clicknub"> width="1000"
<video :id="tcPlayerId" width="1000" height="500" class="tencent-player" preload="auto" playsinline webkit-playsinline></video> height="500"
class="tencent-player"
</div> preload="auto"
<div style="margin-top: 40px;"> playsinline
<el-row :gutter="20"> webkit-playsinline
<el-col > >
<div style="margin-bottom: 6px"> </video>
<span class="term">视频名称：</span> <span id="userName">用户：{{userName}}</span>
<span class="desc"> {{ video.name }}</span> </div>
</div> <div class="videoDetailWrap">
<el-col class="firstLineDetail">
<div class="firstLineText">{{ video.name }}</div>
<el-button class="firstLineBtn" type="error" icon="el-icon-view">{{video.viewsp}}</el-button>
</el-col> </el-col>
</el-row> <div style="font-size: 15px">
<el-row :gutter="20"> <span>视频描述：{{ video.description }}</span>
<el-col > </div>
<div style="margin-bottom: 6px"> </div>
<span class="term">视频描述：</span> </div>
<span class="desc"> {{ video.description }}</span> </el-main>
</div> </el-container>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col >
<div style="margin-bottom: 6px">
<span class="term">视频总播放量：</span>
<span class="desc"> {{ video.views }}</span>
</div>
</el-col>
</el-row>
</div>
</div>
</el-main>
</el-container>
</template> </template>
<script> <script>
import {getVideo,getMyView} from "@/api/video"; import {getVideo, getMyView, getVideoPlayCode} from "@/api/video";
function loadTcScript(cb) { export default {
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', name: 'TencentPlayer',
props: { props: {
options: { options: {
type: Object, type: Object,
default() { default() {
return {}; return {};
}
} }
}
}, },
data() { data() {
return { return {
tcPlayerId : 'tcPlayer' + Date.now(), tcPlayerId: 'tcPlayer' + Date.now(),
player: null, player: null,
video:{id: 0}, videoFileId: '',
description:'', videoAppId: '1253484223',
name:'', videoPsign: '',
}; video: {id: 0},
description: '',
name: '',
videoFileid:false,
userName:""
};
}, },
watch: { mounted(){
options: { //debugger;
handler(newV, oldV) { this.userName = this.$store.state.user.name;
this.$nextTick(() => { if(this.player!==null){
this.loadJS(); this.player.null;
}); }
}, if(this.$route.params.id){
immediate: true, this.id = this.$route.params.id;
deep: true, this.videoFileId = this.$route.params.fileid;
let videoId = sessionStorage.getItem('videoId');
let videoFileId = sessionStorage.getItem('videoFileId');
if(videoId){
sessionStorage.removeItem('videoId');
sessionStorage.setItem('videoId',this.$route.params.id);
}else{
sessionStorage.setItem('videoId',this.$route.params.id);
} }
if(videoFileId){
sessionStorage.removeItem('videoFileId');
sessionStorage.setItem('videoFileId',this.$route.params.fileid);
}else{
sessionStorage.setItem('videoFileId',this.$route.params.fileid);
}
}else{
this.id = sessionStorage.getItem('videoId');
this.videoFileId = sessionStorage.getItem('videoFileId');
}
this.getPlayCode(this.videoFileId);
this.getVideo();
}, },
created() {
this.id = this.$route.params.id;
this.fileid = this.$route.params.fileid;
this.getVideo();
},
methods: { methods: {
getVideo(){ getVideo() {
getVideo(this.id).then((response) => { getVideo(this.id).then((response) => {
if (response.data) {
if (response.data) { this.video = response.data;
}
this.video= response.data; this.listLoading = false;
} });
this.listLoading = false; },
}); getPlayCode(id){
}, let that = this;
//视频观看次数 getVideoPlayCode(id).then(res=>{
clicknub() if(res.data){
{ //debugger;
getMyView(this.id).then((response) => { console.log(res.data);
that.videoFileid = true;
}); that.videoPsign = res.data.psign;
}, that.initVideo();
loadJS() { }
if (window.TCPlayer) { })
this.initVideo(); },
} else { //视频观看次数
loadTcScript(() => { clicknub() {
this.initVideo(); debugger;
}); getMyView(this.id).then((response) => {});
},
initVideo() {
//debugger;
console.log(this.userName);
let that = this;
let text = "用户："+that.userName;
const playerParm = {
fileID: that.videoFileId,
appID: that.videoAppId,
psign: that.videoPsign,
plugins:{
DynamicWatermark: {
speed: 0.1,
content: text
} }
}, }
initVideo() { };
const playerParm = { /*
fileID: this.fileid, * plugins: {
appID: '1253484223', ContinuePlay: { // 开启续播功能
plugins:{ // auto: true, //[可选] 是否在视频播放后自动续播
ContinuePlay: { // 开启续播功能 // text:'上次播放至 ', //[可选] 提示文案
// auto: true, //[可选] 是否在视频播放后自动续播 // btnText: '恢复播放' //[可选] 按钮文案
// text:'上次播放至 ', //[可选] 提示文案 },
// btnText: '恢复播放' //[可选] 按钮文案 }
},} * */
//debugger;
}; if (!that.player) {
setTimeout(() => { that.player = window.TCPlayer(that.tcPlayerId, playerParm);
if (!this.player) { that.player.on('play', function(error) {
this.player = TCPlayer(this.tcPlayerId, playerParm); // 做一些处理
} else { getMyView(that.id).then((response) => {});
this.player.loadVideoByID(playerParm); });
} } else {
}); that.player.loadVideoByID(playerParm);
} }
, },
}, },
}; beforeDestroy () {
this.player.dispose()
}
};
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import url("https://imgcache.qq.com/open/qcloud/video/tcplayer/tcplayer.css"); @import url("https://imgcache.qq.com/open/qcloud/video/tcplayer/tcplayer.css");
.el-header, .el-footer { .el-header, .el-footer {
color: #333; color: #333;
text-align: center; text-align: center;
@ -172,10 +173,51 @@ export default {
width: 100%; width: 100%;
z-index: 1010; z-index: 1010;
} }
.biaotou{
background: url(../../assets/year-100-bg.png) no-repeat 50%,linear-gradient(90deg,#e95353 50%,#bf2221 0); .biaotou {
background: url(../../assets/year-100-bg.png) no-repeat 50%, linear-gradient(90deg, #e95353 50%, #bf2221 0);
box-shadow: none; box-shadow: none;
height: 72px; height: 72px;
} }
.content{
position: relative;
}
#userName {
display: inline-block;
position: absolute;
top: 9px;
left: 70px;
font-size: 14px;
z-index: 10000;
color: #ffffff;
padding: 5px 12px;
background: rgba(0,0,0,.3);
border-radius: 15px;
box-shadow: 0 0 5px 1px #aba8a3;
}
.tencent-player{
width: 100%;
}
.videoDetailWrap{
margin-top: 20px;
font-family:'Microsoft Yahei'
}
.firstLineDetail{
margin-bottom: 6px;
display: flex;
justify-content: space-between
}
.firstLineText{
font-size: 16px;
font-weight: bold;
}
.firstLineBtn{
background:none;
font-size: 14px;
padding: 5px 10px;
color:#e74e4e;
border: 1px solid #e74e4e;
border-radius: 15px;
}
</style> </style>

37
client/src/views/testvideo/upload.vue
View File

@ -23,25 +23,13 @@
max-height="600" max-height="600"
> >
<el-table-column type="index" width="50" /> <el-table-column type="index" width="50" />
<el-table-column label="名称"> <el-table-column label="名称" prop="name"></el-table-column>
<template slot-scope="scope">{{ scope.row.name }}</template> <el-table-column label="描述" prop="description"></el-table-column>
</el-table-column>
<el-table-column label="描述">
<template slot-scope="scope">{{ scope.row.description }}</template>
</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 }}</template>
</el-table-column> </el-table-column>
<el-table-column label="创建时间"> <el-table-column label="创建时间" prop="create_time"></el-table-column>
<template slot-scope="scope">{{ scope.row.create_time }}</template> <el-table-column label="封面地址" prop="coverurl"></el-table-column>
</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 <el-table-column
align="center" align="center"
label="操作" label="操作"
@ -256,6 +244,10 @@ export default {
{ required: true, message: "请选择视频分类", trigger: "change" }, { required: true, message: "请选择视频分类", trigger: "change" },
], ],
}, },
typeList:{48:'政 策',61:'技术方法',49:'质 控',
50:'内 审', 51:'管 评',52:'人 员', 53:'设 备',
54:'方法的验证和确认',55:'测量不确定度',
56:'抽 样',57:'安全&风险',58:'管理体系'},
}; };
}, },
computed: {}, computed: {},
@ -276,14 +268,22 @@ export default {
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);
}); });
}, },
//筛选
filterTag(value, row) {
debugger;
console.log(value)
console.log(row)
return row.category === value;
},
/*弹出弹窗 */ /*弹出弹窗 */
handleAddVideo() { handleAddVideo() {
this.VideoContent = Object.assign({}, defaultVideo); this.VideoContent = Object.assign({}, defaultVideo);
@ -483,4 +483,3 @@ export default {
</style> </style>

358
client/src/views/testvideo/videolist.vue
View File

@ -1,142 +1,192 @@
<template> <template>
<el-container> <el-container>
<el-header style="height: 80px;padding: 0;top:-0px"> <el-header style="height: 80px;padding: 0;">
<el-row class="biaotou"> <el-row class="biaotou">
<el-col :span="20" style="text-align:center;color:seashell;font-size:32px;line-height: 70px;" > <el-col :span="20" class="redBgTitle">
培训视频 培训视频
</el-col> </el-col>
</el-row>
</el-row> </el-header>
<el-main style="padding:20px 0;">
<el-row class="typesButtons">
</el-header> <div style="width: fit-content;">
<el-main style="max-height: 700px;"> <el-col class="typeItemWrap" style="width:100px;margin-top: 6px;">
<el-link :underline="false" @click="getList">
<el-row style="background-color: #f5f7fa; <span class="mune">全部</span>
position: fixed;width: 83%;z-index:1000;margin-top: -58px; </el-link>
"> </el-col>
<el-col style="width:120px;margin-top: 12px;"> <el-col
<el-link :underline="false" @click="getList"><el-span class="mune">全部</el-span></el-link> class="typeItemWrap"
</el-col> style=""
<el-col style="width:120px;margin-top: 12px;" v-for="o in typeOptions" :key="o"> v-for="o in typeOptions"
<el-link :underline="false" @click="getListtype(o)"><el-span class="mune">{{o.name}}</el-span></el-link> :key="o.id">
</el-col> <el-link :underline="false" @click="getListtype(o)">
</el-row> <span class="mune">{{o.name}}</span>
<el-row style="margin-top:50px;"> </el-link>
<el-col style="margin:0.5%;width: 19%;" v-for="o in videoList" :key="o"> </el-col>
<el-card :body-style="{ padding: '0px' }" shadow="always" class="cardDiv" >
<a @click="clickImg(o)">
<el-image :src="o.coverurl" style="width:100%;height: 250px;" ></el-image>
<div class="des"> <span>{{o.description}}</span></div>
</a>
<div style="padding: 14px;">
<div style="height:50px">
<span style="font-family: 'Helvetica Neue';color:#af4545;">{{o.name}}</span>
</div> </div>
<div class="bottom clearfix"> </el-row>
<el-row> <el-row id="videoListWrap" style="margin-top:50px;" :gutter="10">
<el-col :span="12"> <el-col :xs="12" :sm="8" :lg="6" :xl="4" v-for="o in videoList" :key="o.id" style="margin-bottom: 10px">
<el-button type="warning" style="border: none;float: left;padding: 2px; color:#dcae07; <el-card :body-style="{ padding: '0px' }" shadow="always" class="cardDiv">
background-color: white;" icon="el-icon-s-custom">{{o.viewsp}}</el-button> <a @click="clickImg(o)">
</el-col> <el-image :src="o.coverurl" style="width:100%;height: 200px;"></el-image>
<el-col :span="12"> <div class="des"><span>{{o.description}}</span></div>
<el-button type="warning" style="border: none;float: right;padding: 2px; color:#dcae07; </a>
background-color: white;">{{ o.create_time.substring(0,10) }}</el-button> <div style="padding: 14px;">
</el-col> <div style="height:50px">
</el-row> <span style="font-family: 'Helvetica Neue';color:#af4545;">{{o.name}}</span>
</div> </div>
</div> <div class="bottom clearfix">
<el-row>
</el-card> <el-col :span="6">
</el-col> <el-button type="warning" style="border: none;float: left;padding: 2px; color:#dcae07;background-color: white;" icon="el-icon-view">{{o.views}}
</el-row> </el-button>
</el-main> </el-col>
</el-container> <el-col :span="6">
<el-button type="warning" style="border: none;float: left;padding: 2px; color:#dcae07;
background-color: white;" icon="el-icon-s-custom">{{o.viewsp}}
</el-button>
</el-col>
<el-col :span="12">
<el-button type="warning" style="border: none;float: right;padding: 2px; color:#dcae07;
background-color: white;">{{ o.create_time.substring(0,10) }}
</el-button>
</el-col>
</el-row>
</div>
</div>
</el-card>
</el-col>
</el-row>
</el-main>
</el-container>
</template> </template>
<script type="text/javascript"> <script type="text/javascript">
import { getsignature,createVideo,getVideoList} from "@/api/video"; import {getsignature, createVideo, getVideoList} from "@/api/video";
import { getDictList, getDictTypeList } from "@/api/dict"; import {getDictList, getDictTypeList} from "@/api/dict";
import { genTree } from "@/utils";
export default {
components: { },
data() {
return {
videoList:"",
typeOptions:[],
};
},
computed: {},
created() {
this.getList();
this.getTypeAll();
},
methods: {
import {genTree} from "@/utils";
export default {
components: {},
data() {
return {
type:null,
videoList: "",
typeOptions: [],
};
},
computed: {},
created() {
/*this.getList();
this.getTypeAll();*/
},
mounted(){
let type = sessionStorage.getItem('videoType');
if(type){
this.type = type;
this.getTypeData();
this.getTypeAll();
}else{
this.getList();
this.getTypeAll();
}
let bigHeight = document.getElementsByClassName('app-main')[0].clientHeight;
let topHeight = document.getElementsByClassName('typesButtons')[0].clientHeight;
debugger;
console.log(topHeight)
debugger;
let domHeight = bigHeight-170-topHeight;
document.getElementById('videoListWrap').style.height = domHeight + 'px';
// document.getElementById('videoListWrap').style.paddingTop = topHeight + 'px';
},
methods: {
//列表加载 //列表加载
getList() { getList() {
this.listLoading = true; this.type = null;
getVideoList({pageoff:true}).then((response) => { this.listLoading = true;
if (response.data) { getVideoList({pageoff: true}).then((response) => {
this.videoList = response.data; if (response.data) {
this.videoList = response.data;
}
this.listLoading = false;
});
},
getListtype(a) {
this.type = a.id;
getVideoList({category: a.id, pageoff: true}).then((response) => {
if (response.data) {
this.videoList = response.data;
}
this.listLoading = false;
});
},
getTypeData(){
getVideoList({category: this.type, pageoff: true}).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) {
debugger;
if(this.type!==null){
let type = sessionStorage.getItem('videoType');
if(type){
sessionStorage.removeItem('videoType');
sessionStorage.setItem('videoType',this.type);
}else{
sessionStorage.setItem('videoType',this.type);
}
}else{
sessionStorage.removeItem('videoType');
} }
this.listLoading = false; this.$router.push({name: "Index", params: {fileid: a.fileid, id: a.id}})
}); }
}, },
getListtype(a){ };
getVideoList({category:a.id,pageoff:true}).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> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.navbar{ .typeItemWrap{
display: none; margin-top: 6px;
position: fixed; width:fit-content;
min-width:100px;
}
.el-link.el-link--default{
margin-right: 10px!important;
margin-bottom: 0!important;
}
.typeItemWrap:last-child .el-link.el-link--default{
margin-bottom: 10px!important;
}
#videoListWrap{
overflow-y: scroll;
}
.navbar {
display: none;
position: fixed;
} }
.el-col-offset-0{ .el-col-offset-0 {
margin-left: 50px; margin-left: 50px;
} }
.bottom { .bottom {
margin-top: 13px; margin-top: 13px;
line-height: 12px; line-height: 12px;
@ -151,22 +201,24 @@ export default {
width: 100%; width: 100%;
display: block; display: block;
} }
.biaotou{
background: url(../../assets/year-100-bg.png) no-repeat 50%,linear-gradient(90deg,#e95353 50%,#bf2221 0); .biaotou {
background: url(../../assets/year-100-bg.png) no-repeat 50%, linear-gradient(90deg, #e95353 50%, #bf2221 0);
box-shadow: none; box-shadow: none;
height: 72px; height: 70px;
} }
.clearfix:before, .clearfix:before,
.clearfix:after { .clearfix:after {
display: table; display: table;
content: ""; content: "";
} }
.clearfix:after { .clearfix:after {
clear: both clear: both
} }
.el-header, .el-footer {
.el-header, .el-footer {
color: #333; color: #333;
text-align: center; text-align: center;
line-height: 40px; line-height: 40px;
@ -175,6 +227,13 @@ export default {
z-index: 1010; z-index: 1010;
} }
.redBgTitle {
text-align: center;
color: seashell;
font-size: 32px;
line-height: 70px;
}
.el-aside { .el-aside {
background-color: #D3DCE6; background-color: #D3DCE6;
color: #333; color: #333;
@ -186,22 +245,38 @@ export default {
background-color: #ffffff; background-color: #ffffff;
color: #333; color: #333;
text-align: center; text-align: center;
margin-top: 60px; margin-top: 130px;
} }
.des{
height: 100px; margin-top: -100px;z-index:9999;position: relative;background-color:rgba(220,38,38,0.2);color: #f5f4f4; .typesButtons {
opacity: 0; position: fixed;
/*width: 83%;*/
z-index: 1000;
margin-top: -80px;
background-color: rgb(245, 247, 250);
} }
.cardDiv:hover .des{
opacity: 1; .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 { body > .el-container {
margin-bottom: 40px; margin-bottom: 40px;
} }
.mune{ .mune {
font-family: PingFang SC,DFPKingGothicGB-Medium,sans-serif; font-family: PingFang SC, DFPKingGothicGB-Medium, sans-serif;
font-size: 16px; font-size: 16px;
font-weight: 500; font-weight: 500;
line-height: 24px; line-height: 24px;
@ -210,10 +285,11 @@ export default {
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
} }
.el-link.el-link--default { .el-link.el-link--default {
color: seashell; color: seashell;
background: #fff; background: #fff;
border: 1px solid rgba(0,0,0,.1); border: 1px solid rgba(0, 0, 0, .1);
border-radius: 100px; border-radius: 100px;
color: rgba(131, 24, 24, 0.9); color: rgba(131, 24, 24, 0.9);
cursor: pointer; cursor: pointer;
@ -224,6 +300,6 @@ export default {
margin-bottom: 12px; margin-bottom: 12px;
margin-right: 16px; margin-right: 16px;
} }
</style> </style>