<template>
|
<div class="app-container" style="width: 100%; height: 1000px;">
|
<!-- 回到顶部 -->
|
<el-backtop :bottom="150" :right="30">
|
<el-button type="primary" circle class="el-icon-top"></el-button>
|
</el-backtop>
|
|
<!-- 标题 -->
|
<h1 style="font-size:21px;padding-top:30px;display: flex;">
|
<span>直播回放</span>
|
</h1>
|
|
<hr>
|
|
<!-- 搜索 -->
|
|
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
|
<el-form-item label="回放标题" prop="title">
|
<el-input v-model="queryParams.title" placeholder="请输入回放标题" clearable style="width: 200px;
|
height: 35px;
|
border-radius: 16px 16px 16px 16px;
|
opacity: 0.5;" @keyup.enter.native="handleQuery" />
|
</el-form-item>
|
|
<el-form-item>
|
<el-button size="mini" @click="handleQuery" style=" width: 65px; height: 32px;background: #FFDDE3;
|
border-radius: 6px 6px 6px 6px;opacity:1;">搜索</el-button>
|
<el-button size="mini" @click="resetQuery" style=" width: 65px;height: 32px; background: #FFDDE3;
|
border-radius: 6px 6px 6px 6px;
|
opacity: 1;">重置</el-button>
|
</el-form-item>
|
</el-form>
|
|
|
<el-row :gutter="25" min-width="1800" v-loading="loading">
|
<el-col :span="6" :xs=24 :sm=12 :lg=8 :xl=6 v-for="(item,i) in replayList" :style="margin">
|
<div class="module">
|
<span class="span1 spanStyle">{{ item.title }}</span>
|
<span class="span2">{{ item.startTime }}</span>
|
<el-button class="huifang" type="primary" plain @click="show(item.id)">回放</el-button>
|
<!-- <div class="tubiao"><i class="el-icon-view">10000</i></div> -->
|
<p class="author">{{ item.applyPerson }}</p>
|
</div>
|
</el-col>
|
</el-row>
|
|
<pagination
|
v-show="total>0"
|
:total="total"
|
:page-sizes="pageSizes"
|
:page.sync="queryParams.pageNum"
|
:limit.sync="queryParams.pageSize"
|
@pagination="getList"
|
style="background: #FEF7FC;"
|
/>
|
|
<!-- 回访视频弹窗 -->
|
<el-dialog
|
:visible.sync="dialogVisible"
|
width="50%"
|
height="100%"
|
:before-close="handleClose"
|
>
|
|
<h4>{{ formData.title }}</h4>
|
<el-divider />
|
<video id="video" class="video" controls width="100%%" height="480" >
|
<source src="../../assets/images/测试.mp4" type="video/mp4">
|
</video>
|
<!-- <span slot="footer" class="dialog-footer">
|
<el-button @click="dialogVisible = false">取 消</el-button>
|
</span> -->
|
</el-dialog>
|
|
</div>
|
</template>
|
<script>
|
import {
|
listRole,
|
getRole,
|
delRole,
|
addRole,
|
updateRole,
|
dataScope,
|
changeRoleStatus,
|
deptTreeSelect
|
} from "@/api/system/role";
|
import {
|
treeselect as menuTreeselect,
|
roleMenuTreeselect
|
} from "@/api/system/menu";
|
import {
|
Notification,
|
MessageBox,
|
Message,
|
Loading
|
} from 'element-ui'
|
|
//导入接口函数 --接好了
|
import {
|
listReplay,
|
getReplayInfo
|
} from "@/api/meeting/index";
|
export default {
|
created() {
|
this.getList();
|
},
|
data() {
|
return {
|
id:undefined,
|
pageSizes: [8, 12],
|
showSearch: true,
|
loading:false,
|
queryParams1: [],
|
dialogVisible: false,
|
dateRange: [],
|
replayList:[],
|
queryParams: {
|
pageNum: 1,
|
pageSize: 9,
|
title: undefined,
|
applyPerson: undefined,
|
contactPerson: undefined,
|
happenStartTime: undefined,
|
happenEndTime: undefined
|
},
|
formData:{
|
id: undefined,
|
startTime: undefined,
|
endTime: undefined,
|
title: undefined,
|
applyPerson: undefined,
|
contactPerson: undefined,
|
contactPhone: undefined,
|
createTime: undefined,
|
happenStartTime: undefined,
|
happenEndTime: undefined,
|
},
|
// 总条数
|
total: 0,
|
|
}
|
},
|
methods: {
|
getInfoList() {
|
const id = this.$route.params && this.$route.params.id;
|
let _this = this
|
if (id) {
|
this.loading = true;
|
getReplayInfo(id).then((response) => {
|
console.log(response.data,'123123123')
|
this.formData = response.data;
|
this.loading = false;
|
});
|
}
|
},
|
getList() {
|
this.loading = true;
|
// console.log(this.queryParams)
|
// listProperty(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
|
this.queryParams.happenStartTime = this.dateRange.length > 0 && this.dateRange[0]
|
this.queryParams.happenEndTime = this.dateRange.length > 0 && this.dateRange[1]
|
listReplay(this.queryParams).then(response => {
|
this.replayList = response.data.data;
|
// console.log(response,'replayListreplayListreplayList')
|
this.total = response.data.total;
|
this.loading = false;
|
}
|
|
);
|
},
|
show(id){
|
this.dialogVisible = true
|
if (id) {
|
this.loading = true;
|
getReplayInfo(id).then((response) => {
|
console.log(response.data,'123123123')
|
this.formData = response.data;
|
this.loading = false;
|
});
|
}
|
},
|
handleClose(){
|
this.dialogVisible = false;
|
const video = document.getElementById("video")
|
video.pause()
|
},
|
/** 搜索按钮操作 */
|
handleQuery() {
|
this.queryParams.pageNum = 1;
|
this.getList();
|
},
|
/** 重置按钮操作 */
|
resetQuery() {
|
this.dateRange = [];
|
this.resetForm("queryForm");
|
this.handleQuery();
|
},
|
|
|
}
|
}
|
</script>
|
<style scoped="">
|
.app-container {
|
background-color: #FEF7FC;
|
/* width: 2000px;
|
height: 1500px; */
|
}
|
|
.button-container {
|
text-align: right;
|
display: flex;
|
justify-content: flex-end;
|
align-items: center;
|
flex-grow: 1;
|
}
|
|
.el-table {
|
border-radius: 14px 14px 14px 14px;
|
}
|
|
.el-col {
|
border-radius: 4px;
|
}
|
|
.module {
|
|
width: 400px;
|
height: 160px;
|
background-color: rgb(255, 255, 255);
|
border-color: red;
|
border-radius: 6%;
|
margin-top: 20px;
|
margin-bottom: 20px;
|
margin-left: 5px;
|
margin-right: 5px;
|
position: relative;
|
}
|
|
.grid-content {
|
border-radius: 4px;
|
min-height: 36px;
|
}
|
|
.span1 {
|
/* float: left; */
|
font-size: 20px;
|
margin-top: 5%;
|
margin-left: 3%;
|
}
|
|
.span2 {
|
/* float: right; */
|
position: absolute;
|
right:2px;
|
top:40px;
|
font-size: 20px;
|
margin-top: 5%;
|
margin-right: 3%;
|
margin-bottom: 50px;
|
}
|
|
.huifang{
|
position: absolute ;
|
bottom: 20px;
|
right: 10px;
|
font-size: 18px;
|
}
|
|
.tubiao{
|
position: absolute;
|
bottom: 20px;
|
right: 100px;
|
}
|
|
.author{
|
position: absolute;
|
bottom: 5px;
|
left: 100px;
|
}
|
.video{
|
object-fit: cover;
|
}
|
.spanStyle {
|
white-space: normal;
|
position: absolute;
|
|
height: 30px;
|
width: 385px;
|
overflow: hidden; /*超出的文本隐藏*/
|
text-overflow: ellipsis; /* 溢出用省略号*/
|
|
}
|
</style>
|
