party-admin/inspur-ui/src/views/party_work/meeting/info.vue

<template>
  <div class="appNew-container">
    <el-card shadow="never" class="" style="">
      <div style="overflow: hidden">
        <div style="font-weight: bolder;float: left">
          {{ form.title }}
        </div>
        <div style="float: right">
          请选择会议设备：
          <el-select v-model="deviceId" placeholder="请选择会议设备" style="">
            <el-option v-for="device in deviceList" :key="device.id" :label="device.deviceName"
                       :value="device.id" />
          </el-select>
        </div>
      </div>
    </el-card>
    <el-card shadow="never" class="" style="">
      <el-tabs type="border-card" style="height: calc(100vh - 150px)">
        <el-tab-pane label="会议文件">
          <div style="display: flex;justify-content: center">
            <div style="width: 30%;">
              <el-table v-loading="loading" :data="fileList" height="calc(100vh - 220px)" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55" align="center" />
                <el-table-column prop="fileName" label="文件名" :show-overflow-tooltip="true"/>
              </el-table>
            </div>
            <div style="width: 70%;border-left: 1px solid #e6e6e6;">
              <div v-if="null == pageSrc" style="height: calc(100vh - 300px);">
                <el-empty description=""></el-empty>
              </div>
              <div v-else style="height: calc(100vh - 300px);display: flex;justify-content: center;align-items: center;" >
                <el-image :src="pageSrc.fileUrl" style="height: 100%"/>
              </div>
              <div style="height: 10%;display: flex;justify-content: center;align-items: center;">
                <el-button type="primary" :disabled="single" @click="showFile">立即播放</el-button>
                <el-button type="primary" @click="lastPage">上一页</el-button>
                <el-button type="primary" @click="nextPage">下一页</el-button>
                <el-button type="warning" :disabled="single" @click="endShowFile">结束播放</el-button>
              </div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="资料链接">
          <div style="display: flex;justify-content: center">
            <div style="width: 30%;height: calc(100vh - 220px)">
              <div v-for="(item,index) in materialOptions">
                <div style="display: flex;flex-direction: column;justify-content: center;">
                  <span>
                    <span style="font-weight: bolder;margin: 10px;">链接地址：</span>
                    <span>{{ item }}</span>
                  </span>
                  <span style="margin: 10px;">
                    <el-button type="primary" @click="showUrl(item)">开始播放</el-button>
                    <el-button type="warning" @click="endShowUrl(item)">结束播放</el-button>
                  </span>
                </div>
              </div>
            </div>
            <div v-if="material == null" style="width: 70%;border-left: 1px solid #e6e6e6;">
              <el-empty description=""></el-empty>
            </div>
            <div v-else style="width: 70%;border-left: 1px solid #e6e6e6;">
              <iframe :src="material" style="width: 100%;height: calc(100vh - 220px);border: 0;"></iframe>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="图片抓拍">
          <div style="height: calc(100vh - 260px);display: flex;flex-wrap: wrap;overflow: auto">
            <div v-for="(item, index) in this.photoList" :key="index" class="imageDiv">
<!--              <el-card shadow="never" class="centerCard">
                <el-image style="width: 320px;height: 180px;margin: 10px" :src="item"/>
              </el-card>-->
              <div>
                <el-image style="width: 320px;height: 180px;margin: 5px" :src="item"/>
              </div>
              <div style="margin: 5px;display: flex;justify-content: center;align-items: center;">
                <el-button type="warning" @click="deletePhoto(index)">删除图片</el-button>
              </div>
            </div>
          </div>
          <div style="margin-top: 5px;display: flex;justify-content: center;align-items: center;">
            <el-button @click="refreshPhoto" type="primary" >刷新</el-button>
            <el-button @click="takePhoto" type="primary" >拍照</el-button>
            <el-button @click="savePhoto" type="primary" >保存</el-button>
          </div>
        </el-tab-pane>
        <el-tab-pane label="会议纪要">
          <div style="display: flex;justify-content: center">
            <!-- 计时区域 -->
            <div style="width: 30%;height: calc(100vh - 220px)">
              <div style="font-size: medium;margin-bottom: 10px">会议录音</div>
              <div style="height: 85%;">
                <el-table v-loading="loading" :data="audioList" height="100%" row-key="id" @row-click="showAudioTxt" @selection-change="handleSelectionChange">
                  <el-table-column label="序号" align="center" prop="sort" width="50" />
                  <el-table-column label="文件名称" align="left" prop="fileName" :show-overflow-tooltip="true" />
                  <el-table-column label="文本准换" align="center" prop="isTranslate" width="80" >
                    <template slot-scope="scope">
                      <dict-tag :options="dict.type.sys_asr_status" :value="scope.row.isTranslate"/>
                    </template>
                  </el-table-column>
                  <el-table-column label="创建时间" align="left" prop="createTime" width="150" />
                </el-table>
              </div>
              <div style="height: 5%;display: flex;justify-content: center;align-items: center;font-weight: bolder;font-size: large">
                {{ formatTime }}
              </div>
<!--              <el-divider></el-divider>-->
              <div style="margin-top: 5px;display: flex;justify-content: center;align-items: center;">
                <el-button @click="startTimer" type="primary" :disabled="timerRunning">开始录音</el-button>
                <el-button @click="pauseTimer" type="warning" :disabled="!timerRunning">暂停录音</el-button>
                <el-button @click="refreshAudio" type="primary" >刷新列表</el-button>
                <el-button @click="summaryGenerate" type="primary" >一键生成</el-button>
              </div>
            </div>
            <!-- 录音文件区域 -->
            <div v-if="audioTxt == null" style="width: 70%;border-left: 1px solid #e6e6e6;">
              <div style="font-size: medium;margin-bottom: 10px;margin-left: 20px">录音内容</div>
              <el-empty description=""></el-empty>
            </div>
            <div v-else style="width: 70%;border-left: 1px solid #e6e6e6;">
              <div style="font-size: medium;margin-bottom: 10px;margin-left: 20px">录音内容</div>
              <el-input resize="none" v-model="audioTxt" style="margin-left: 10px" type="textarea" :readonly="audioReadOnly" :rows = "29" placeholder="请输入内容" />
              <div style="margin-top: 35px;display: flex;justify-content: center;align-items: center;">
<!--                <el-button  type="primary" @click="copyWord">文本复制</el-button>-->
                <el-button  type="primary" @click="audioTxtEdit">文本编辑</el-button>
                <el-button  type="primary" @click="audioTxtSave">文本保存</el-button>
              </div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="AI问答">
          <div style="display: flex;flex-direction: column; height: calc(100vh - 150px)">
            <el-input v-model="sourceWord" resize="none" type="textarea" :rows = "12" placeholder="请输入内容" />
            <div style="margin-top: 20px;display: flex;justify-content: center;align-items: center;">
              <el-button  type="primary" @click="rsWord">提交问题</el-button>
              <el-button  type="waring" @click="resetWord">文本重置</el-button>
            </div>
            <el-divider style="margin-top: 10px;margin-bottom: 10px"></el-divider>
            <el-input id="targetWord" resize="none" v-model="targetWord"  type="textarea" :readonly="true" :rows = "14" placeholder="请输入内容" />
            <div style="margin-top: 20px;display: flex;flex-direction: column;justify-content: center;align-items: center;">
              <el-button  type="primary" @click="copyWord">文本复制</el-button>
            </div>
          </div>
        </el-tab-pane>

      </el-tabs>
    </el-card>
  </div>
</template>
<script>
import {getMeeting, getMeetingFileImage, updateMeeting} from "@/api/partywork/meeting";
import {endAudio, endFilePlay, filePlay, startAudio, takePhoto, urlControl} from "@/api/partywork/remoteControl";
import {getToken} from "@/utils/auth";
import {getAudio, listAudio, summaryMeeting, updateAudioTxt} from "@/api/partywork/meeting_audio";
import {listDevice} from "@/api/pc/device";

export default {
  dicts: ['sys_asr_status'],
  data() {
    return {
      meetingId: null,
      form: {},
      fileList: [],
      imageList: [],
      // 遮罩层
      loading: true,
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      totalPage: null,
      currentPage: 1,
      pageSrc: null,
      // 学习资料网站
      materialOptions: [],
      sourceWord: null,
      targetWord: null,
      websocket: null,
      material: null,
      timer: null,           // 记录经过的时间秒数
      intervalId: null,   // 定时器的ID
      timerRunning: false, // 状态标示，是否正在计时
      elapsed: 0, // 经过时间（毫秒）
      audioList: [],
      audioTxt: null,
      photoList:[],
      deviceList: [],
      deviceId: null,
      audioReadOnly: true,
      audioId: null,
    }
  },
  computed: {
    formatTime() {
      let remaining = this.elapsed;
      let milliseconds = remaining % 1000;
      remaining = Math.floor(remaining / 1000);
      let seconds = remaining % 60;
      remaining = Math.floor(remaining / 60);
      let minutes = remaining % 60;
      let hours = Math.floor(remaining / 60);
      return `${hours.toString().padStart(2, '0')}:${minutes
        .toString()
        .padStart(2, '0')}:${seconds.toString().padStart(2, '0')}.${milliseconds.toString().padStart(3, '0')}`;
    }
  },
  created() {
    this.getRouterParam();
    this.getMeetingInfo();
    this.socketConnect();
    this.refreshAudio();
    this.getDeviceList();
  },
  destroyed() {
    this.websocket.close();
    if (this.timerRunning) {
      this.pauseTimer();
      clearInterval(this.timer);
    }
  },
  methods: {
    audioTxtEdit() {
      this.audioReadOnly = false;
      this.$message({
        message: '您现在可以对录音内容进行编辑',
        type: 'success'
      });
    },
    validDeviceId() {
      if (this.deviceId == null || this.deviceId === '') {
        this.$message({
          message: '请先选择会议设备',
          type: 'error'
        });
        return false;
      }
      return true;
    },
    getDeviceList() {
      let param = {
        pageSize: 100
      }
      listDevice(param).then(response => {
        this.deviceList = response.rows;
      })
    },
    summaryGenerate() {
      if (this.timerRunning) {
        this.$message({
          message: '请先暂停录音',
          type: 'warning'
        });
      }else {
        summaryMeeting(this.meetingId).then(response => {
          this.$message({
            message: response.msg,
            type: 'success'
          });
        });
        /*this.$modal.confirm('确认通过AI一键生成会议纪要？').then(function() {
          return summaryMeeting(this.meetingId);
        }).then(() => {
          this.$modal.msgSuccess("任务提交成功，请稍后刷新列表！");
        }).catch(() => {});*/
      }
    },
    savePhoto() {
      this.form.picsPath = this.photoList.join(",");
      updateMeeting(this.form).then(response => {
        this.$message({
          message: '保存成功',
          type: 'success'
        });
      });
    },
    refreshPhoto() {
      const id = this.meetingId;
      getMeeting(id).then(response => {
        // 会议照片集合
        if (response.data.picsPath != null && response.data.picsPath !== '')  {
          this.photoList = response.data.pics_path;
          console.log(this.photoList)
        }
      });
    },
    deletePhoto(index) {
      this.photoList.splice(index, 1);
    },
    takePhoto() {
      if (!this.validDeviceId()) {
        return;
      }
      let id = this.meetingId;
      takePhoto(id,this.deviceId).then(response => {
        this.$message({
          message: '发送拍照指令成功',
          type: 'success'
        });
      });
    },
    showAudioTxt(row) {
      if (row.isTranslate == 0 || row.isTranslate == 2 || row.isTranslate == 3) {
        this.$message({
          message: '当前无文本内容可供查看，请稍后！',
          type: 'warning'
        });
        return;
      }
      let id = row.id;
      this.audioId = id;
      getAudio(id).then(response => {
        this.audioTxt = response.data.audioTxt;
      });
    },
    audioTxtSave() {
      this.audioReadOnly = true;
      let id = this.audioId;
      let audioTxt = this.audioTxt;
      let param = {
        id: id,
        audioTxt: audioTxt
      }
      updateAudioTxt(param).then(response => {
        this.$message({
          message: '文本内容保存成功！',
          type: 'success'
        });
        this.showAudioTxt(param);
      });
    },
    refreshAudio() {
      let queryParam = {
        meetingId: this.meetingId,
        pageNum: 1,
        pageSize: 100
      };
      this.loading = true;
      listAudio(queryParam).then(response => {
        this.audioList = response.rows;
        this.loading = false;
      });
    },

    // 开始计时
    startTimer() {
      if (!this.validDeviceId()) {
        return;
      }
      if (!this.timer) {
        this.timerRunning = true;
        this.timer = setInterval(() => {
          this.elapsed += 10; // 我们每10毫秒更新一次时钟
        }, 10);
        startAudio(this.meetingId,this.deviceId).then(response => {
          this.$message({
            message: '开始录制成功',
            type: 'success'
          });
        });
      }
    },
    // 暂停计时
    pauseTimer() {
      if (!this.validDeviceId()) {
        return;
      }
      this.timerRunning = false;
      clearInterval(this.timer);
      this.timer = null;
      endAudio(this.meetingId,this.deviceId).then(response => {
        this.$message({
          message: '暂停录制成功',
          type: 'success'
        });
      });
    },
    showUrl(url) {
      if (!this.validDeviceId()) {
        return;
      }
      this.material = url;
      let param = {
        material : url,
        type : 1,
        deviceId: this.deviceId,
        meetingId: this.meetingId
      };
      urlControl(param).then(response => {
        this.$message({
          message: '播放成功',
          type: 'success'
        });
      });
    },
    endShowUrl(url) {
      if (!this.validDeviceId()) {
        return;
      }
      this.material = null;
      let param = {
        material : url,
        type : 2,
        deviceId: this.deviceId
      };
      urlControl(param).then(response => {
        this.$message({
          message: '结束成功',
          type: 'success'
        });
      });
    },

    copyWord() {
      let textToCopy = document.getElementById("targetWord").value;
      navigator.clipboard.writeText(textToCopy).then(function() {

      }, function(err) {
        console.error('无法复制文本：', err);
      });
      this.$message({
        message: '文本复制成功',
        type: 'success'
      });
    },
    resetWord() {
      this.sourceWord = "";
      let inputElement = document.getElementById("targetWord");
      inputElement.value = "";
    },
    getRouterParam() {
      this.meetingId = this.$route.query.meetingId;
      console.log(this.meetingId);
    },
    getMeetingInfo() {
      const id = this.meetingId;
      this.loading = true;
      getMeeting(id).then(response => {
        this.form = response.data;
        this.fileList = this.form.followList;
        this.materialOptions = this.form.materialOptions;
        // console.log(this.form);
        this.loading = false;
        // 会议照片集合
        if (this.form.picsPath != null && this.form.picsPath !== "") {
          this.photoList = this.form.picsPath.split(",");
        }
      });
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    // 开始播放会议文件
    showFile() {
      if (!this.validDeviceId()) {
        return;
      }
      const id = this.ids[0];
      console.log(id);
      this.currentPage = 1;
      getMeetingFileImage(id).then(response => {
        this.imageList = response.data;
        this.totalPage = this.imageList.length;
        this.getPageSrc();
      });
      this.controlFilePlay();
    },
    getPageSrc () {
      this.imageList.forEach((item, index) => {
        if (index === this.currentPage - 1) {
          this.pageSrc = item;
        }
      })
    },
    // 上一页
    lastPage() {
      if (!this.validDeviceId()) {
        return;
      }
      if (this.currentPage === 1) {
        this.$message({
          message: '已经是第一页',
          type: 'warning'
        });
      } else {
        this.currentPage--;
        this.getPageSrc();
        this.controlFilePlay();
      }
    },
    controlFilePlay() {
      const id = this.ids[0];
      filePlay(id,this.currentPage,this.deviceId).then(response => {
        this.$message({
          message: response.msg,
          type: 'success'
        });
      });
    },
    endFilePlay() {
      const id = this.ids[0];
      endFilePlay(id,this.deviceId).then(response => {
        this.$message({
          message: response.msg,
          type: 'success'
        });
      });
    },
    // 下一页
    nextPage() {
      if (!this.validDeviceId()) {
        return;
      }
      if (this.totalPage == null) {
        this.$message({
          message: '请先选择文件开始文件播放',
          type: 'warning'
        });
        return;
      }
      if (this.currentPage === this.totalPage) {
        this.$message({
          message: '已经是最后一页',
          type: 'warning'
        });
      } else {
        this.currentPage++;
        this.getPageSrc();
        this.controlFilePlay();
      }
    },
    // 结束播放
    endShowFile() {
      if (!this.validDeviceId()) {
        return;
      }
      this.endFilePlay();
      this.currentPage = null;
      this.pageSrc = null;
      this.imageList = [];
      // this.fileList = [];
      this.totalPage = null;
      this.currentPage = 1;
    },
    rsWord() {
      if (this.sourceWord === null || this.sourceWord === '') {
        this.$message({
          message: '文本内容不能为空',
          type: 'warning'
        });
      }else {
        // 调用接口
        /*let word = {
          message : this.sourceWord
        };
        rsWord(word).then(response => {
          this.targetWord = response.data.result;
        });*/
        let inputElement = document.getElementById("targetWord");
        inputElement.value = "";
        this.socketSend()
      }
    },
    socketSend() {
      let message = this.sourceWord;
      this.websocket.send(message);
    },
    socketConnect() {
      let socketUrl = "ws://localhost:8080/ws/server/" + getToken();
      this.websocket = new WebSocket(socketUrl);
      this.websocket.onopen = function (event) {
        console.log("连接成功");
      };
      this.websocket.onmessage = function (event) {
        let message = event.data;
        let decodedMessage = decodeURIComponent(message); // 将消息转换为UTF-8编码
        let inputElement = document.getElementById("targetWord");
        inputElement.value = inputElement.value + decodedMessage;
      };

      this.websocket.onclose = function (event) {
        console.log("连接关闭");
      };

      this.websocket.onerror = function (event) {
        console.log("链接错误");
      };
    },

  }
}
</script>
<style>
  .imageDiv{
    border: 1px solid #e6e6e6;
    height: 250px;
    margin-left: 40px;
    margin-right: 30px;
    margin-bottom: 10px;
  }

</style>