| | |
| | | <template> |
| | | <div class="app-container" style="width: 100%; height: 800px;"> |
| | | <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-form :model="queryParams1"> |
| | | <el-row> |
| | | <el-form-item label="" prop="people"> |
| | | <el-input v-model="queryParams1.people" placeholder="请输入搜索内容" clearable style="width: 300px; |
| | | height: 35px; |
| | | text-align: left; |
| | | border-radius: 16px 16px 16px 16px; |
| | | opacity: 0.5;" @keyup.enter.native="handleQuery"> |
| | | <i slot="prefix" class="el-input__icon el-icon-search"></i> |
| | | </el-input> |
| | | </el-form-item> |
| | | </el-row> |
| | | <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-form :model="vList"> --> |
| | | <el-row :gutter="25"> |
| | | <el-col :span="8" :style="margin"> |
| | | |
| | | <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">中秋家庭会议</span> |
| | | <span class="span2">2010-8-26 12:00</span> |
| | | <el-button class="huifang" type="primary" plain @click="show">回放</el-button> |
| | | <div class="tubiao"><i class="el-icon-view">10000</i></div> |
| | | <p class="author">发起者</p> |
| | | </div> |
| | | </el-col> |
| | | <el-col :span="8"> |
| | | <div class="module"> |
| | | <span class="span1">中秋家庭会议</span> |
| | | <span class="span2">2010-8-26 12:00</span> |
| | | <el-button class="huifang" type="primary" plain @click="show">回放</el-button> |
| | | <div class="tubiao"><i class="el-icon-view">10000</i></div> |
| | | <p class="author">发起者</p> |
| | | </div> |
| | | </el-col> |
| | | <el-col :span="8"> |
| | | <div class="module"> |
| | | <span class="span1">中秋家庭会议</span> |
| | | <span class="span2">2010-8-26 12:00</span> |
| | | <el-button class="huifang" type="primary" plain @click="show">回放</el-button> |
| | | <div class="tubiao"><i class="el-icon-view">10000</i></div> |
| | | <p class="author">发起者</p> |
| | | </div> |
| | | </el-col> |
| | | <el-col :span="8"> |
| | | <div class="module"> |
| | | <span class="span1">中秋家庭会议</span> |
| | | <span class="span2">2010-8-26 12:00</span> |
| | | <el-button class="huifang" type="primary" plain @click="show">回放</el-button> |
| | | <div class="tubiao"><i class="el-icon-view">10000</i></div> |
| | | <p class="author">发起者</p> |
| | | <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> |
| | | <!-- </el-form> --> |
| | | |
| | | <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 |
| | |
| | | :before-close="handleClose" |
| | | > |
| | | |
| | | <h4>中秋家庭会议</h4> |
| | | <h4>{{ formData.title }}</h4> |
| | | <el-divider /> |
| | | <video id="video" class="video" controls width="100%%" height="480" > |
| | | <source src="../../assets/images/测试.mp4" type="video/mp4"> |
| | |
| | | </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 { |
| | | queryParams1: [], |
| | | vList: [], |
| | | dialogVisible: false, |
| | | 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: { |
| | | show(){ |
| | | this.dialogVisible = true |
| | | }, |
| | | handleClose(){ |
| | | this.dialogVisible = false; |
| | | const video = document.getElementById("video") |
| | | video.pause() |
| | | } |
| | | 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> |
| | |
| | | } |
| | | |
| | | .module { |
| | | width: 100%; |
| | | |
| | | width: 400px; |
| | | height: 160px; |
| | | background-color: rgb(255, 255, 255); |
| | | border-color: red; |
| | |
| | | } |
| | | |
| | | .span1 { |
| | | float: left; |
| | | /* float: left; */ |
| | | font-size: 20px; |
| | | margin-top: 5%; |
| | | margin-left: 3%; |
| | | } |
| | | |
| | | .span2 { |
| | | float: right; |
| | | /* float: right; */ |
| | | position: absolute; |
| | | right:68px; |
| | | top:40px; |
| | | font-size: 20px; |
| | | margin-top: 5%; |
| | | margin-right: 3%; |
| | |
| | | .huifang{ |
| | | position: absolute ; |
| | | bottom: 20px; |
| | | right: 10px; |
| | | right: 68px; |
| | | font-size: 18px; |
| | | } |
| | | |
| | |
| | | .video{ |
| | | object-fit: cover; |
| | | } |
| | | .spanStyle { |
| | | white-space: normal; |
| | | position: absolute; |
| | | |
| | | height: 30px; |
| | | width: 385px; |
| | | overflow: hidden; /*超出的文本隐藏*/ |
| | | text-overflow: ellipsis; /* 溢出用省略号*/ |
| | | |
| | | } |
| | | </style> |