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
#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 = 'https://testsearch.ctc.ac.cn/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 = 'http://47.95.0.242:9101/api'

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

@ -1,170 +1,171 @@
<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" @click="clicknub">
<video :id="tcPlayerId" width="1000" height="500" class="tencent-player" preload="auto" playsinline webkit-playsinline></video>
</div>
<div style="margin-top: 40px;">
<el-row :gutter="20">
<el-col >
<div style="margin-bottom: 6px">
<span class="term">视频名称：</span>
<span class="desc"> {{ video.name }}</span>
</div>
<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;">
{{ video.name }}
</el-col>
</el-row>
</el-header>
<el-main style="margin-top: 70px;">
<div style="margin:20px 12%;">
<div class="content" @click="clicknub">
<video
:id="tcPlayerId"
width="1000"
height="500"
class="tencent-player"
preload="auto"
playsinline
webkit-playsinline
>
</video>
<span id="userName">用户：{{userName}}</span>
</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-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>
<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>
<div style="font-size: 15px">
<span>视频描述：{{ video.description }}</span>
</div>
</div>
</div>
</el-main>
</el-container>
</template>
<script>
import {getVideo,getMyView} 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 {
import {getVideo, getMyView, getVideoPlayCode} from "@/api/video";
export default {
name: 'TencentPlayer',
props: {
options: {
type: Object,
default() {
return {};
}
options: {
type: Object,
default() {
return {};
}
}
},
data() {
return {
tcPlayerId : 'tcPlayer' + Date.now(),
player: null,
video:{id: 0},
description:'',
name:'',
};
return {
tcPlayerId: 'tcPlayer' + Date.now(),
player: null,
videoFileId: '',
videoAppId: '1253484223',
videoPsign: '',
video: {id: 0},
description: '',
name: '',
videoFileid:false,
userName:""
};
},
watch: {
options: {
handler(newV, oldV) {
this.$nextTick(() => {
this.loadJS();
});
},
immediate: true,
deep: true,
mounted(){
//debugger;
this.userName = this.$store.state.user.name;
if(this.player!==null){
this.player.null;
}
if(this.$route.params.id){
this.id = this.$route.params.id;
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: {
getVideo(){
getVideo(this.id).then((response) => {
if (response.data) {
this.video= response.data;
}
this.listLoading = false;
});
},
//视频观看次数
clicknub()
{
getMyView(this.id).then((response) => {
});
},
loadJS() {
if (window.TCPlayer) {
this.initVideo();
} else {
loadTcScript(() => {
this.initVideo();
});
getVideo() {
getVideo(this.id).then((response) => {
if (response.data) {
this.video = response.data;
}
this.listLoading = false;
});
},
getPlayCode(id){
let that = this;
getVideoPlayCode(id).then(res=>{
if(res.data){
//debugger;
console.log(res.data);
that.videoFileid = true;
that.videoPsign = res.data.psign;
that.initVideo();
}
})
},
//视频观看次数
clicknub() {
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,
appID: '1253484223',
plugins:{
ContinuePlay: { // 开启续播功能
// auto: true, //[可选] 是否在视频播放后自动续播
// text:'上次播放至 ', //[可选] 提示文案
// btnText: '恢复播放' //[可选] 按钮文案
},}
};
setTimeout(() => {
if (!this.player) {
this.player = TCPlayer(this.tcPlayerId, playerParm);
} else {
this.player.loadVideoByID(playerParm);
}
});
}
};
/*
* plugins: {
ContinuePlay: { // 开启续播功能
// auto: true, //[可选] 是否在视频播放后自动续播
// text:'上次播放至 ', //[可选] 提示文案
// btnText: '恢复播放' //[可选] 按钮文案
},
}
* */
//debugger;
if (!that.player) {
that.player = window.TCPlayer(that.tcPlayerId, playerParm);
that.player.on('play', function(error) {
// 做一些处理
getMyView(that.id).then((response) => {});
});
} else {
that.player.loadVideoByID(playerParm);
}
,
},
},
};
beforeDestroy () {
this.player.dispose()
}
};
</script>
<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;
text-align: center;
line-height: 40px;
@ -172,10 +173,51 @@ export default {
width: 100%;
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;
height: 72px;
}
}
.content{
position: relative;
}
</style>
#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>

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

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

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

@ -1,142 +1,192 @@
<template>
<el-container>
<el-header style="height: 80px;padding: 0;top:-0px">
<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="max-height: 700px;">
<el-row style="background-color: #f5f7fa;
position: fixed;width: 83%;z-index:1000;margin-top: -58px;
">
<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: 19%;" v-for="o in videoList" :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: 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>
<el-container>
<el-header style="height: 80px;padding: 0;">
<el-row class="biaotou">
<el-col :span="20" class="redBgTitle">
培训视频
</el-col>
</el-row>
</el-header>
<el-main style="padding:20px 0;">
<el-row class="typesButtons">
<div style="width: fit-content;">
<el-col class="typeItemWrap" style="width:100px;margin-top: 6px;">
<el-link :underline="false" @click="getList">
<span class="mune">全部</span>
</el-link>
</el-col>
<el-col
class="typeItemWrap"
style=""
v-for="o in typeOptions"
:key="o.id">
<el-link :underline="false" @click="getListtype(o)">
<span class="mune">{{o.name}}</span>
</el-link>
</el-col>
</div>
<div class="bottom clearfix">
<el-row>
<el-col :span="12">
<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>
</el-row>
<el-row id="videoListWrap" style="margin-top:50px;" :gutter="10">
<el-col :xs="12" :sm="8" :lg="6" :xl="4" v-for="o in videoList" :key="o.id" style="margin-bottom: 10px">
<el-card :body-style="{ padding: '0px' }" shadow="always" class="cardDiv">
<a @click="clickImg(o)">
<el-image :src="o.coverurl" style="width:100%;height: 200px;"></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 class="bottom clearfix">
<el-row>
<el-col :span="6">
<el-button type="warning" style="border: none;float: left;padding: 2px; color:#dcae07;background-color: white;" icon="el-icon-view">{{o.views}}
</el-button>
</el-col>
<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>
<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: {
<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 {
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() {
this.listLoading = true;
getVideoList({pageoff:true}).then((response) => {
if (response.data) {
this.videoList = response.data;
}
this.listLoading = false;
});
},
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);
});
},
getList() {
this.type = null;
this.listLoading = true;
getVideoList({pageoff: true}).then((response) => {
if (response.data) {
this.videoList = response.data;
}
this.listLoading = false;
});
},
//跳转播放视频界面
clickImg(a){
this.$router.push({name: "Index", params: { fileid: a.fileid,id:a.id} })
}
},
};
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.$router.push({name: "Index", params: {fileid: a.fileid, id: a.id}})
}
},
};
</script>
<style lang="scss" scoped>
.navbar{
display: none;
position: fixed;
<style lang="scss" scoped>
.typeItemWrap{
margin-top: 6px;
width:fit-content;
min-width:100px;
}
.el-col-offset-0{
.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 {
margin-left: 50px;
}
.bottom {
margin-top: 13px;
line-height: 12px;
@ -151,22 +201,24 @@ export default {
width: 100%;
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;
height: 72px;
}
height: 70px;
}
.clearfix:before,
.clearfix:after {
display: table;
content: "";
display: table;
content: "";
}
.clearfix:after {
clear: both
clear: both
}
.el-header, .el-footer {
color: #333;
text-align: center;
line-height: 40px;
@ -174,34 +226,57 @@ export default {
width: 100%;
z-index: 1010;
}
.redBgTitle {
text-align: center;
color: seashell;
font-size: 32px;
line-height: 70px;
}
.el-aside {
background-color: #D3DCE6;
color: #333;
text-align: center;
line-height: 200px;
}
.el-main {
background-color: #ffffff;
color: #333;
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;
opacity: 0;
.typesButtons {
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 {
margin-bottom: 40px;
}
.mune{
font-family: PingFang SC,DFPKingGothicGB-Medium,sans-serif;
.mune {
font-family: PingFang SC, DFPKingGothicGB-Medium, sans-serif;
font-size: 16px;
font-weight: 500;
line-height: 24px;
@ -210,10 +285,11 @@ export default {
text-overflow: ellipsis;
white-space: nowrap;
}
.el-link.el-link--default {
color: seashell;
background: #fff;
border: 1px solid rgba(0,0,0,.1);
border: 1px solid rgba(0, 0, 0, .1);
border-radius: 100px;
color: rgba(131, 24, 24, 0.9);
cursor: pointer;
@ -224,6 +300,6 @@ export default {
margin-bottom: 12px;
margin-right: 16px;
}
}
</style>
</style>