feige
2025-01-16 0bed59a7c83975e466e31aa2fa14d8ee15473813
ruoyi-ui/src/views/meeting/replay.vue
@@ -1,5 +1,5 @@
<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>
@@ -14,60 +14,45 @@
        <!-- 搜索 -->
        <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
@@ -77,7 +62,7 @@
            :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">
@@ -90,24 +75,129 @@
    </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>
@@ -135,7 +225,8 @@
}
.module {
    width: 100%;
    width: 400px;
    height: 160px;
    background-color: rgb(255, 255, 255);
    border-color: red;
@@ -153,14 +244,17 @@
}
.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%;
@@ -170,7 +264,7 @@
.huifang{
    position: absolute ;
    bottom: 20px;
    right: 10px;
    right: 68px;
    font-size: 18px;
}
@@ -188,4 +282,14 @@
.video{
  object-fit: cover;
}
.spanStyle {
  white-space: normal;
  position: absolute;
  height: 30px;
  width: 385px;
  overflow: hidden; /*超出的文本隐藏*/
  text-overflow: ellipsis; /* 溢出用省略号*/
}
</style>