yundianbo
This commit is contained in:
parent
6535ad167d
commit
268d3e4815
|
|
@ -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'
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,78 +1,43 @@
|
||||||
<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-header>
|
||||||
<el-main style="margin-top: 70px;">
|
<el-main style="margin-top: 70px;">
|
||||||
<div style="margin:1% 12.5%;">
|
<div style="margin:20px 12%;">
|
||||||
<div class="content" @click="clicknub">
|
<div class="content" @click="clicknub">
|
||||||
<video :id="tcPlayerId" width="1000" height="500" class="tencent-player" preload="auto" playsinline webkit-playsinline></video>
|
<video
|
||||||
|
:id="tcPlayerId"
|
||||||
</div>
|
width="1000"
|
||||||
<div style="margin-top: 40px;">
|
height="500"
|
||||||
<el-row :gutter="20">
|
class="tencent-player"
|
||||||
<el-col >
|
preload="auto"
|
||||||
<div style="margin-bottom: 6px">
|
playsinline
|
||||||
<span class="term">视频名称：</span>
|
webkit-playsinline
|
||||||
<span class="desc"> {{ video.name }}</span>
|
>
|
||||||
|
</video>
|
||||||
|
<span id="userName">用户：{{userName}}</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">
|
|
||||||
<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>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</el-main>
|
</el-main>
|
||||||
</el-container>
|
</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: {
|
||||||
|
|
@ -84,86 +49,122 @@ export default {
|
||||||
},
|
},
|
||||||
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;
|
||||||
});
|
|
||||||
},
|
|
||||||
immediate: true,
|
|
||||||
deep: true,
|
|
||||||
}
|
}
|
||||||
},
|
if(this.$route.params.id){
|
||||||
created() {
|
|
||||||
this.id = this.$route.params.id;
|
this.id = this.$route.params.id;
|
||||||
this.fileid = this.$route.params.fileid;
|
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();
|
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){
|
||||||
clicknub()
|
let that = this;
|
||||||
{
|
getVideoPlayCode(id).then(res=>{
|
||||||
getMyView(this.id).then((response) => {
|
if(res.data){
|
||||||
|
//debugger;
|
||||||
});
|
console.log(res.data);
|
||||||
},
|
that.videoFileid = true;
|
||||||
loadJS() {
|
that.videoPsign = res.data.psign;
|
||||||
if (window.TCPlayer) {
|
that.initVideo();
|
||||||
this.initVideo();
|
|
||||||
} else {
|
|
||||||
loadTcScript(() => {
|
|
||||||
this.initVideo();
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
//视频观看次数
|
||||||
|
clicknub() {
|
||||||
|
debugger;
|
||||||
|
getMyView(this.id).then((response) => {});
|
||||||
},
|
},
|
||||||
initVideo() {
|
initVideo() {
|
||||||
|
//debugger;
|
||||||
|
console.log(this.userName);
|
||||||
|
let that = this;
|
||||||
|
let text = "用户："+that.userName;
|
||||||
const playerParm = {
|
const playerParm = {
|
||||||
fileID: this.fileid,
|
fileID: that.videoFileId,
|
||||||
appID: '1253484223',
|
appID: that.videoAppId,
|
||||||
|
psign: that.videoPsign,
|
||||||
plugins:{
|
plugins:{
|
||||||
|
DynamicWatermark: {
|
||||||
|
speed: 0.1,
|
||||||
|
content: text
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
/*
|
||||||
|
* plugins: {
|
||||||
ContinuePlay: { // 开启续播功能
|
ContinuePlay: { // 开启续播功能
|
||||||
// auto: true, //[可选] 是否在视频播放后自动续播
|
// auto: true, //[可选] 是否在视频播放后自动续播
|
||||||
// text:'上次播放至 ', //[可选] 提示文案
|
// text:'上次播放至 ', //[可选] 提示文案
|
||||||
// btnText: '恢复播放' //[可选] 按钮文案
|
// btnText: '恢复播放' //[可选] 按钮文案
|
||||||
},}
|
|
||||||
|
|
||||||
};
|
|
||||||
setTimeout(() => {
|
|
||||||
if (!this.player) {
|
|
||||||
this.player = TCPlayer(this.tcPlayerId, playerParm);
|
|
||||||
} else {
|
|
||||||
this.player.loadVideoByID(playerParm);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
,
|
|
||||||
|
|
||||||
},
|
},
|
||||||
};
|
}
|
||||||
|
* */
|
||||||
|
//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>
|
</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>
|
||||||
|
|
@ -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>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -1,33 +1,37 @@
|
||||||
<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-header>
|
||||||
<el-main style="max-height: 700px;">
|
<el-main style="padding:20px 0;">
|
||||||
|
<el-row class="typesButtons">
|
||||||
<el-row style="background-color: #f5f7fa;
|
<div style="width: fit-content;">
|
||||||
position: fixed;width: 83%;z-index:1000;margin-top: -58px;
|
<el-col class="typeItemWrap" style="width:100px;margin-top: 6px;">
|
||||||
">
|
<el-link :underline="false" @click="getList">
|
||||||
<el-col style="width:120px;margin-top: 12px;">
|
<span class="mune">全部</span>
|
||||||
<el-link :underline="false" @click="getList"><el-span class="mune">全部</el-span></el-link>
|
</el-link>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col style="width:120px;margin-top: 12px;" v-for="o in typeOptions" :key="o">
|
<el-col
|
||||||
<el-link :underline="false" @click="getListtype(o)"><el-span class="mune">{{o.name}}</el-span></el-link>
|
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>
|
</el-col>
|
||||||
</el-row>
|
</div>
|
||||||
<el-row style="margin-top:50px;">
|
</el-row>
|
||||||
<el-col style="margin:0.5%;width: 19%;" v-for="o in videoList" :key="o">
|
<el-row id="videoListWrap" style="margin-top:50px;" :gutter="10">
|
||||||
<el-card :body-style="{ padding: '0px' }" shadow="always" class="cardDiv" >
|
<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)">
|
<a @click="clickImg(o)">
|
||||||
<el-image :src="o.coverurl" style="width:100%;height: 250px;" ></el-image>
|
<el-image :src="o.coverurl" style="width:100%;height: 200px;"></el-image>
|
||||||
<div class="des"> <span>{{o.description}}</span></div>
|
<div class="des"><span>{{o.description}}</span></div>
|
||||||
</a>
|
</a>
|
||||||
<div style="padding: 14px;">
|
<div style="padding: 14px;">
|
||||||
<div style="height:50px">
|
<div style="height:50px">
|
||||||
|
|
@ -35,71 +39,93 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="bottom clearfix">
|
<div class="bottom clearfix">
|
||||||
<el-row>
|
<el-row>
|
||||||
<el-col :span="12">
|
<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;
|
<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>
|
background-color: white;" icon="el-icon-s-custom">{{o.viewsp}}
|
||||||
|
</el-button>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="12">
|
<el-col :span="12">
|
||||||
<el-button type="warning" style="border: none;float: right;padding: 2px; color:#dcae07;
|
<el-button type="warning" style="border: none;float: right;padding: 2px; color:#dcae07;
|
||||||
background-color: white;">{{ o.create_time.substring(0,10) }}</el-button>
|
background-color: white;">{{ o.create_time.substring(0,10) }}
|
||||||
|
</el-button>
|
||||||
</el-col>
|
</el-col>
|
||||||
</el-row>
|
</el-row>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</el-card>
|
</el-card>
|
||||||
</el-col>
|
</el-col>
|
||||||
</el-row>
|
</el-row>
|
||||||
</el-main>
|
</el-main>
|
||||||
</el-container>
|
</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: { },
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
import {genTree} from "@/utils";
|
||||||
|
export default {
|
||||||
|
components: {},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
type:null,
|
||||||
videoList:"",
|
videoList: "",
|
||||||
typeOptions:[],
|
typeOptions: [],
|
||||||
|
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
computed: {},
|
computed: {},
|
||||||
|
|
||||||
created() {
|
created() {
|
||||||
|
/*this.getList();
|
||||||
|
this.getTypeAll();*/
|
||||||
|
},
|
||||||
|
mounted(){
|
||||||
|
let type = sessionStorage.getItem('videoType');
|
||||||
|
if(type){
|
||||||
|
this.type = type;
|
||||||
|
this.getTypeData();
|
||||||
|
this.getTypeAll();
|
||||||
|
}else{
|
||||||
this.getList();
|
this.getList();
|
||||||
this.getTypeAll();
|
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: {
|
methods: {
|
||||||
|
|
||||||
|
|
||||||
//列表加载
|
//列表加载
|
||||||
getList() {
|
getList() {
|
||||||
|
this.type = null;
|
||||||
this.listLoading = true;
|
this.listLoading = true;
|
||||||
getVideoList({pageoff:true}).then((response) => {
|
getVideoList({pageoff: true}).then((response) => {
|
||||||
if (response.data) {
|
if (response.data) {
|
||||||
this.videoList = response.data;
|
this.videoList = response.data;
|
||||||
}
|
}
|
||||||
this.listLoading = false;
|
this.listLoading = false;
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
getListtype(a){
|
|
||||||
getVideoList({category:a.id,pageoff:true}).then((response) => {
|
|
||||||
|
|
||||||
|
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) {
|
if (response.data) {
|
||||||
this.videoList = response.data;
|
this.videoList = response.data;
|
||||||
}
|
}
|
||||||
|
|
@ -107,36 +133,60 @@ export default {
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
//视频类型
|
//视频类型
|
||||||
|
|
||||||
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);
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
||||||
//跳转播放视频界面
|
//跳转播放视频界面
|
||||||
clickImg(a){
|
clickImg(a) {
|
||||||
this.$router.push({name: "Index", params: { fileid: a.fileid,id:a.id} })
|
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>
|
</script>
|
||||||
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.navbar{
|
.typeItemWrap{
|
||||||
|
margin-top: 6px;
|
||||||
|
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;
|
display: none;
|
||||||
position: fixed;
|
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,11 +201,13 @@ 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;
|
||||||
|
|
@ -165,8 +217,8 @@ export default {
|
||||||
.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 {
|
||||||
|
position: fixed;
|
||||||
|
/*width: 83%;*/
|
||||||
|
z-index: 1000;
|
||||||
|
margin-top: -80px;
|
||||||
|
background-color: rgb(245, 247, 250);
|
||||||
|
}
|
||||||
|
|
||||||
|
.des {
|
||||||
|
height: 100px;
|
||||||
|
margin-top: -100px;
|
||||||
|
z-index: 9999;
|
||||||
|
position: relative;
|
||||||
|
background-color: rgba(220, 38, 38, 0.2);
|
||||||
|
color: #f5f4f4;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
.cardDiv:hover .des{
|
|
||||||
|
.cardDiv:hover .des {
|
||||||
opacity: 1;
|
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>
|
||||||
Loading…
Reference in New Issue