pbl-student-table/src/components/pptEasyClass/index.vue

<template>
  <div class="pptEasyClass">
    <div class="pec_main" v-loading="pageLoading">
      <!-- 录音转文字 -->
      <iframe
        allow="camera *; microphone *;display-capture;midi;encrypted-media;"
        src="https://beta.cloud.cocorobo.cn/browser/public/index.html"
        ref="iiframe"
        v-show="false"
      ></iframe>
      <div class="pec_header">
        <div class="pec_h_left">
          <div @click.stop="back" class="backBtn" v-if="screenType != 2 || tType == 1">
            <img src="../../assets/icon/newIcon/return.svg" alt="" />
          </div>
          <div v-if="tcid" class="class-info-group">
            <span class="class-label">班级</span>
            <span class="class-value">{{ className }}</span>
          </div>
          <div v-if="tcid" class="class-info-group">
            <span class="class-label" v-if="inviteCode">识别码</span>
            <span class="class-value" v-if="inviteCode">{{ inviteCode }}</span>
          </div>
        </div>
        <div class="pec_h_center">
          <el-tooltip effect="dark" :content="courseDetail.title" placement="bottom">
            <div class="pec_h_l_title">
              <span>{{ courseDetail.title }}</span>
            </div>
          </el-tooltip>
          <div class="free-browse-switch" v-if="courseDetail.userid == userid">
            <el-switch
              v-model="freeBrowse"
              :active-value="false"
              :inactive-value="true"
              class="custom-switch"
              active-color="#03ae2b"
              inactive-color="#d8d8d8"
              @change="onFreeBrowseChange"
            ></el-switch>
            <span class="switch-label" :class="{ active: freeBrowse }">{{ freeBrowse ? '自由浏览' : '跟随模式' }}</span>
          </div>
          <div class="free-browse-switch" v-if="tType == 2">
            <span class="switch-label" :class="{ active: freeBrowse }">{{ freeBrowse ? '自由浏览' : '跟随模式' }}</span>
          </div>
          <el-tooltip effect="dark" content="刷新" placement="bottom">
            <div class="refresh_icon" @click="refreshCourse">
                <img src="../../assets/icon/course/refresh-2.svg" />
            </div>
          </el-tooltip>
        </div>
        <div class="pec_h_right">
          <div class="pec_h_r_btnArea">
            <div class="pec_h_r_btn_refresh" :class="{ 'recording': recordedForm.status == 1 }" @click="toggleRecording" v-show="(jArray.includes(oid) || jArray.includes(org)) && courseDetail.userid == userid">
              <span>{{ recordedForm.status == 1 ? '结束录音' : '开始录音' }}</span>
            </div>
            <div class="pec_h_r_btn_afterClass" @click="afterClass" v-if="courseDetail.userid == userid">
              <img src="../../assets/icon/newIcon/afterClass.svg" alt="" />
              <span>下课</span>
            </div>
            <div class="name_box" v-if="tType == 2">
              {{ userJson.username }}
            </div>
          </div>
        </div>
      </div>

      <div class="pec_content">
        <iframe allow="camera *; microphone *;display-capture;midi;encrypted-media;clipboard-write;clipboard-read"
          webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" frameborder="no" border="0" :src="iframeSrc"
          v-if="showIframe" style="width: 100%; height: 100%; border: none" ref="ppt"></iframe>
      </div>
    </div>
  </div>
</template>

<script>
import { myMixin } from '../../mixins/mixin';

export default {
  mixins: [myMixin],
  data() {
    return {
      id: this.$route.query.courseId,
      userid: this.$route.query.userid,
      classId: this.$route.query.cid,
      role: this.$route.query.role,
      oid: this.$route.query.oid,
      org: this.$route.query.org,
      tType: this.$route.query.tType,
      courseType: this.$route.query.type,
      screenType: this.$route.query.screenType,
      tcid2: this.$route.query.tcid,
      tcid: "",
      className: "",
      showIframe: false,
      iframeSrc: "",
      courseDetail: {},
      pageLoading: false,
      inviteCode: "",
      startTime: "",
      freeBrowse: true, // 默认自由浏览
      opertimer: null, // 定时器
      jArray: [],
      // 录音相关变量
      languageRadio: 2, // 语言选择
      recordedForm: {
        status: 0, // 0: 未开始, 1: 录音中, 2: 暂停, 3: 结束
        startTime: 0,
        endTime: 0,
        timeDuration: 0,
        textList: [],
        audioBlob: []
      },
      controlsStatus: 0, // 控制状态
      showIndexPage: true, // 显示索引页
      pageStatus: 1, // 页面状态
      editorBarData: {
        type: "0",
        content: ""
      },
      uploadFileLoading: false, // 上传文件加载状态
      transcriptionData: {
        content: ""
      },
      showGetTextLoading: false, // 显示获取文本加载状态
    };
  },
  methods: {
    goTo(path) {
      this.$router.push(path);
    },
    refreshCourse() {
      this.getCourseDetail();
    },
    audioStart(){
      this.onStartRecordWithMicrosoft();
    },
    toggleRecording() {
      if (this.recordedForm.status == 1) {
        this.onFinishRecordWithMicrosoft();
      } else {
        this.onStartRecordWithMicrosoft();
      }
    },
    // ============ start 微软录音转译
    onStartRecordWithMicrosoft() {
      let iiframe = this.$refs["iiframe"];
      iiframe.contentWindow.window.document.getElementById(
        "languageOptions"
      ).selectedIndex = this.languageRadio;

      // 录音开始
      let flag = true;
      console.log("开始录音", iiframe);
      this.recordedForm.status = 1;
      iiframe.contentWindow.window.onRecognizedResult = e => {
        console.log("onRecognizedResult", e);
        this.recordedForm.endTime = this.recordedForm.timeDuration;
        if (flag) {
          this.controlsStatus = 1;
          this.showIndexPage = false;
          this.pageStatus = 2;
          this.editorBarData.type = "0";
          flag = false;
          this.uploadFileLoading = false;
          this.transcriptionData.content = "";
          this.editorBarData.content = "";
          this.recordedForm.textList = [];
        }
        this.showGetTextLoading = true;
        let privText = e.privText;
        let privSpeakerId = e.privSpeakerId;
        let _copyPrivSpeakerId = privSpeakerId;
        console.log("👇转译对象👇");
        console.log(e);
        console.log("👇转译结果👇");
        console.log(privText);
        if (!privText || !privSpeakerId || privSpeakerId == "Unknown") {
          return;
        }

        const newItem = {
          value: privText,
          role: "",
          startTime: this.updateRecordedTime({
            duration: this.recordedForm.startTime
          }),
          endTime: this.updateRecordedTime({
            duration: this.recordedForm.endTime
          }),
          time: this.updateRecordedTime({
            duration: this.recordedForm.endTime - this.recordedForm.startTime
          })
        };
        this.recordedForm.textList.push(newItem);
        this.recordedForm.startTime = this.recordedForm.timeDuration + 1;
        this.transcriptionData.content +=
          _copyPrivSpeakerId + "：" + privText + "\n";
        this.onRecordAddLine(newItem);
      };

      iiframe.contentWindow.ConversationTranscriber();
    },
    onFinishRecordWithMicrosoft() {
      if (this.recordedForm.status == 1) {
        //正在录音时
        let iiframe = this.$refs["iiframe"];
        iiframe.contentWindow.window.document
          .getElementById("scenarioStopButton")
          .click();
        // 录音借宿
        iiframe.contentWindow.onSessionStopped = (s, e) => {
          this.recordedForm.status = 0;
          this.controlsStatus = 2;
          this.showGetTextLoading = false;
          this.$message.success("已结束录音");
          console.log("结束录音👇");
          console.log("结束录音", e);
          this.recordedForm.audioBlob.push(e.preaudio);
          let blob = new Blob(this.recordedForm.audioBlob, {
            type: "audio/wav"
          });
          let file = new File([blob], "recordedFile.wav", {
            type: "audio/wav"
          });
          // 存储文件和文本到全局对象
          this.storeRecordingData(file);
          iiframe.contentWindow.onSessionStopped = null;
          iiframe.contentWindow.window.onRecognizedResult = null;
        };
      } else if (this.recordedForm.status == 2) {
        //暂停录音时
        this.recordedForm.status = 0;
        this.controlsStatus = 2;
        this.showGetTextLoading = false;
        let blob = new Blob(this.recordedForm.audioBlob, {
          type: "audio/wav"
        });
        let file = new File([blob], "recordedFile.wav", { type: "audio/wav" });
        // 存储文件和文本到全局对象
        this.storeRecordingData(file);
      }
    },
    storeRecordingData(file) {
      // 配置全局 window 对象存储录音数据
      if (!window.recordingData) {
        window.recordingData = {};
      }
      window.recordingData.file = file;
      window.recordingData.text = this.transcriptionData.content;
      window.recordingData.textList = this.recordedForm.textList;
      console.log("录音数据已存储到全局对象:", window.recordingData);
    },
    updateRecordedTime({ duration }) {
      // 格式化录音时间
      const minutes = Math.floor(duration / 60);
      const seconds = Math.floor(duration % 60);
      return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
    },
    onRecordAddLine(item) {
      // 添加录音文本行
      console.log("添加录音文本行:", item);
      // 这里可以根据需要添加更多处理逻辑
    },
    getCourseDetail() {
      this.pageLoading = true;
      let params = {
        courseId: this.id
      };

      this.ajax
        .get(this.$store.state.api + "selectCourseDetail3", params)
        .then(res => {
          console.log("getCourseDetail", res);
          this.courseDetail = res.data[0][0];
          this.courseDetail.chapters = JSON.parse(this.courseDetail.chapters);
          this.tcid = this.arrayToArray(
            this.courseDetail.juri ? this.courseDetail.juri.split(",") : [],
            this.tcid2 ? this.tcid2.split(",") : []
          )[0] || "";
          if (this.tcid && res.data[1].length) {
            let _inviteA = [];
            for (var ik = 0; ik < res.data[1].length; ik++) {
              _inviteA.push({
                cid: res.data[1][ik].classid,
                ic: res.data[1][ik].code,
              });
            }
            for (var ik = 0; ik < _inviteA.length; ik++) {
              if (
                this.arrayToArray(
                  _inviteA[ik].cid.split(","),
                  this.tcid.split(",")
                ).length
              ) {
                this.inviteCode = _inviteA[ik].ic;
                break;
              }
            }
          }
          this.setPptIframe()
          this.pageLoading = false;
        })
        .catch(err => {
          console.log(err);
          this.$message.error("获取课程数据失败");
          this.pageLoading = false;
        });
    },
    setPptIframe() {
      this.showIframe = false;

      this.$nextTick(() => {
        let api = 'https://beta.ppt.cocorobo.cn'
        if (this.$region == 'beta') {
          api = 'https://beta.ppt.cocorobo.cn'
        } else if (this.$region == 'hk') {
          api = 'https://ppt.cocorobo.hk'
        } else if (this.$region == 'com') {
          api = 'https://ppt.cocorobo.com'
        } else {
          api = 'https://ppt.cocorobo.cn'
        }
        let _url = api + `/?mode=student&courseid=${this.id}&userid=${this.userid}&oid=${this.oid}&org=${this.org}&cid=${this.tcid}&type=${this.tType}`;

        this.iframeSrc = _url;

        this.showIframe = true;
      });
    },
    arrayToArray(arrayo, arrayt) {
      let array1 = arrayo;
      let array2 = arrayt;

      let commonElements = [];

      for (let i = 0; i < array1.length; i++) {
        for (let j = 0; j < array2.length; j++) {
          if (array1[i] === array2[j]) {
            commonElements.push(array1[i]);
          }
        }
      }
      return commonElements;
    },
    async getClassName() {
      let courseGrade = await this.ajax.get(this.$store.state.api + "getClassById", { id: this.tcid2 });
      this.className = courseGrade.data[0][0].grade;
    },
    back() {
      if (this.tType != 2) {
        this.goTo(
          '/courseDetail?userid=' +
          this.userid +
          '&oid=' +
          this.oid +
          '&org=' +
          this.org +
          '&cid=' +
          this.classId +
          '&courseId=' +
          this.id +
          '&tType=' +
          this.tType +
          '&screenType=' +
          this.screenType
        )
      } else {
        this.goTo(
          '/index?userid=' +
          this.userid +
          '&oid=' +
          this.oid +
          '&org=' +
          this.org +
          '&cid=' +
          this.classId +
          '&tType=' +
          this.tType +
          '&screenType=' +
          this.screenType
        )
      }
    },
    afterClass() {
      this.$confirm('此操作将使当前课程内所有学生退出登录，是否继续？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$refs.ppt.contentWindow.PPTistStudent.forceLogout();
      }).catch(() => {});
    },
    onFreeBrowseChange(value) {
      this.freeBrowse = value;
      console.log('自由浏览模式已切换为1：', this.freeBrowse);
      this.$refs.ppt.contentWindow.PPTistStudent.toggleFollowMode()
    },
    setOperationTime() {
      let _this = this;
      if (_this.opertimer) {
        clearInterval(_this.opertimer);
        _this.opertimer = null;
      }
      _this.opertimer = setInterval(() => {
        _this.setoTime("600");
      }, 600000);
    },
    setoTime(time) {
      let params = [
        {
          uid: this.userid,
          cid: this.id,
          type: "2",
          time: time,
        },
      ];
      this.ajax
        .post(this.$store.state.api + "addOperationTimeT2", params)
        .then((res) => {})
        .catch((err) => {
          console.error(err);
        });
    },
    getAIJ(){
			this.ajax.get(this.$store.state.api+"getAIJ","").then(res=>{
				let a = res.data[4];
        console.log(a)
				let Array = [];
				a.forEach(i=>Array.push(i.oid))
				this.jArray = Array;
			})
		},
  },
  destroyed() {
    clearInterval(this.opertimer);
    this.opertimer = null;
    if (this.courseDetail.userid == this.userid && this.org == '16ace517-b5c7-4168-a9bb-a9e0035df840') {
      let endTime = new Date().toLocaleString("zh-CN", {
        hour12: false,
        timeZone: "Asia/Shanghai"
      }).replace(/\//g, "-")
      let courseTime = Math.floor((new Date(endTime) - new Date(this.startTime)) / (1000 * 60))
      this.syncClassData({
        courseId: this.id,
        title: this.courseDetail.title,
        courseGrade: this.tcid2 ? this.tcid2 : '',
        courseTime: courseTime,
        startTime: this.startTime,
        endTime: endTime,
      })
      console.log('同步数据')
    }
  },
  async mounted() {
    this.setoTime("1");
    this.startTime = new Date().toLocaleString("zh-CN", {
      hour12: false,
      timeZone: "Asia/Shanghai"
    }).replace(/\//g, "-")
    this.getClassName()
    this.getAIJ();
    this.getCourseDetail();
    this.setOperationTime();
    window.onFreeBrowseChange = (value) => {
      this.freeBrowse = value;
      console.log('自由浏览模式已切换为：', this.freeBrowse);
    }
    if(!this.userJson || !this.userJson.accountNumber){
      let res = await this.ajax.get(this.$store.state.api + "selectUser", {
        userid: this.$route.query.userid
        });
        this.userJson = res.data[0][0]
    }
  }
};
</script>

<style scoped>
.pptEasyClass {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-sizing: border-box;
  background-color: #f2f2f2;
  min-height: unset;
}

.pec_main {
  width: 100%;
  height: 100%;
  background-color: #fff;
}

.pec_header {
  width: 100%;
  height: 60px;
  background: #FCCF00;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  box-shadow: 0px 4px 12px 0px #3648601F;
  padding: 0 10px;
  box-sizing: border-box;
}

.pec_h_left {
  width: auto;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 25px;
  /* 保持左侧靠左 */
}

.pec_h_center {
  position: absolute;
  left: 50%;
  top: 0;
  height: 100%;
  display: flex;
  align-items: center;
  transform: translateX(-50%);
  z-index: 1;
}

.pec_h_l_title {
  font-weight: bold;
  font-size: 20px;
  color: #0e1e33;
  overflow: hidden;
  white-space: nowrap;
  max-width: 500px;
  text-overflow: ellipsis;
}

.pec_h_right {
  width: auto;
  height: 100%;
  display: flex;
  align-items: center;
}

.pec_h_r_btnArea {
  display: flex;
  align-items: center;
  justify-content: center;
}

.pec_h_r_btnArea>div {
  width: auto;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  background-color: #f0f4fa;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 400;
  color: #000;
  border: 1px solid #cad1dc;
}

.pec_h_r_btnArea> div + div {
  margin-left: 10px;
}

.pec_h_r_btnArea>div>img {
  width: 15px;
  height: 15px;
  margin-right: 5px;
}

.pec_h_r_btnArea>.pec_h_r_btn_refresh {
  color: #fff;
  background-color: #0061ff;
  border-color: #0061ff;
}

.pec_h_r_btnArea>.pec_h_r_btn_refresh.recording {
  background-color: #F53F3F;
  border-color: #F53F3F;
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(245, 63, 63, 0.4);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(245, 63, 63, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(245, 63, 63, 0);
  }
}

.pec_h_r_btnArea>.pec_h_r_btn_afterClass {
  border-color: #F0E1DD;
  background-color: #FFF7F5;
  color: #F53F3F;
}

.backBtn {
  width: 15px;
  height: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.backBtn img {
  width: 100%;
  height: 100%;
}

.class-info-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.class-label {
  font-size: 18px;
  font-weight: bold;
  color: #222;
  margin-right: 5px;
}

.class-value {
  font-size: 16px;
  color: #222;
  background: #FFFFFF3D;
  border: 1px solid #00000080;
  border-radius: 5px;
  padding: 5px 18px;
  min-width: 60px;
  text-align: center;
  display: inline-block;
  box-sizing: border-box;
}

.pec_content {
  width: 100%;
  height: calc(100% - 60px);
  border-radius: 0 0 12px 12px;
  background-color: #fff;
}

.free-browse-switch {
  display: flex;
  align-items: center;
  padding: 9px 10px;
  background: #FFF7F5;
  border-radius: 26px;
  margin-left: 15px;
  gap: 5px;
}

.switch-label {
  /* background: linear-gradient(to right, #F53F3F, #FCCF00); */
  /* -webkit-background-clip: text; */
  color: #000;
}

.refresh_icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff7f5;
  border-radius: 45%;
  cursor: pointer;
  margin-left: 15px;
  padding: 0 3px;
}

.refresh_icon img {
  width: 20px;
  height: 20px;
}

.name_box {
  background: unset !important;
  border: none !important;
  cursor: unset !important;
}
</style>