|
|
@@ -0,0 +1,1223 @@
|
|
|
+<template>
|
|
|
+ <div class="pptEasyClass">
|
|
|
+ <div class="pec_main" v-loading="pageLoading">
|
|
|
+ <!-- 录音转文字 -->
|
|
|
+ <iframe allow="camera *; microphone *;display-capture;midi;encrypted-media;" :src="iframeSrcop" ref="iiframe"
|
|
|
+ v-show="false"></iframe>
|
|
|
+ <div class="pec_header">
|
|
|
+ <div class="pec_h_left">
|
|
|
+ <!-- || tType == 1 -->
|
|
|
+ <div @click.stop="back" class="backBtn" v-if="screenType != 2">
|
|
|
+ <img src="../../assets/icon/newIcon/return.svg" alt="" />
|
|
|
+ </div>
|
|
|
+ <div v-if="tcid" class="class-info-group">
|
|
|
+ <span class="class-label">{{ lang.ssClass }}</span>
|
|
|
+ <span class="class-value class-value2" @click="openSelectClass">
|
|
|
+ {{ className }}
|
|
|
+ <svg t="1776672009773" class="xia-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
|
|
|
+ p-id="4735" xmlns:xlink="http://www.w3.org/1999/xlink" width="12" height="12">
|
|
|
+ <path
|
|
|
+ d="M562.5 771c-14.3 14.3-33.7 27.5-52 23.5-18.4 3.1-35.7-11.2-50-23.5L18.8 327.3c-22.4-22.4-22.4-59.2 0-81.6s59.2-22.4 81.6 0L511.5 668l412.1-422.3c22.4-22.4 59.2-22.4 81.6 0s22.4 59.2 0 81.6L562.5 771z"
|
|
|
+ p-id="4736" fill="currentColor"></path>
|
|
|
+ </svg>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <div v-if="tcid" class="class-info-group">
|
|
|
+ <span class="class-label" v-if="inviteCode">{{ lang.ssInviteCode }}</span>
|
|
|
+ <span class="class-value" v-if="inviteCode">{{ inviteCode }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="pec_h_center">
|
|
|
+ <el-tooltip effect="dark" :content="lang.ssRefresh" placement="bottom">
|
|
|
+ <div class="refresh_icon" @click="refreshCourse">
|
|
|
+ <img src="../../assets/icon/course/refresh-2.svg" />
|
|
|
+ </div>
|
|
|
+ </el-tooltip>
|
|
|
+ <el-tooltip class="item" effect="dark"
|
|
|
+ :content="recordedForm.status == 1 ? lang.ssFinishClassRecording : lang.ssBeginClassRecording"
|
|
|
+ placement="bottom"
|
|
|
+ v-show="(jArray.includes(oid) || jArray.includes(org)) && courseDetail.userid == userid && tcid">
|
|
|
+ <div class="pec_h_r_btn_refresh" :class="{ 'recording': recordedForm.status == 1 }"
|
|
|
+ @click="toggleRecording">
|
|
|
+ <svg t="1772588344140" viewBox="0 0 1024 1024" p-id="1693" width="200" height="200">
|
|
|
+ <path
|
|
|
+ d="M512 1024a512.568889 512.568889 0 0 1-512-512 512.625778 512.625778 0 0 1 512-512 512.568889 512.568889 0 0 1 512 512 512.568889 512.568889 0 0 1-512 512zM512 73.329778c-241.948444 0-438.670222 196.835556-438.670222 438.670222S270.051556 950.670222 512 950.670222s438.670222-196.835556 438.670222-438.670222S753.948444 73.329778 512 73.329778z m0 686.592a245.191111 245.191111 0 1 1 0-490.382222 245.191111 245.191111 0 0 1 0 490.382222z"
|
|
|
+ p-id="1694"></path>
|
|
|
+ </svg>
|
|
|
+ <span>{{ recordedForm.status == 1 ? lang.ssStopRecording2 : lang.ssRecord }}</span>
|
|
|
+ </div>
|
|
|
+ </el-tooltip>
|
|
|
+
|
|
|
+ <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 ? lang.ssFreeBrowse :
|
|
|
+ lang.ssFollowMode }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="free-browse-switch" v-if="tType == 2">
|
|
|
+ <span class="switch-label" :class="{ active: freeBrowse }">{{ freeBrowse ? lang.ssFreeBrowse :
|
|
|
+ lang.ssFollowMode }}</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <div class="pec_h_right">
|
|
|
+ <div class="pec_h_r_btnArea">
|
|
|
+ <!-- openObserveDialog -->
|
|
|
+ <!-- toggleRecording -->
|
|
|
+
|
|
|
+ <div class="pec_h_r_btn_uploadVoiceBtn" @click="uploadVoiceBtn" v-if="courseDetail.userid == userid"
|
|
|
+ v-show="false">
|
|
|
+ <span>{{ lang.ssUploadRecordingFile }}</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>{{ lang.ssEndClass }}</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>
|
|
|
+
|
|
|
+ <!-- 课堂观察弹窗 -->
|
|
|
+ <el-dialog :visible.sync="showObserveDialog" :close-on-click-modal="false" :close-on-press-escape="false"
|
|
|
+ :show-close="true" width="90%" top="5vh" class="observe-dialog">
|
|
|
+ <iframe v-if="showObserveDialog" :src="observeDialogUrl" frameborder="0"
|
|
|
+ style="width: 100%; height: 85vh; border: none;"></iframe>
|
|
|
+ </el-dialog>
|
|
|
+ <selectTeachingClassDialog :courseDetail="courseDetail" :userId="userid" ref="selectTeachingClassDialogRef" @success="selectClassSuccess" @changeClassList="changeClassList"/>
|
|
|
+
|
|
|
+
|
|
|
+ <!-- 消息提示组件 -->
|
|
|
+ <messageInstruction ref="messageInstructionRef"></messageInstruction>
|
|
|
+ <!-- 确认提示组件 -->
|
|
|
+ <confirmInstruction ref="confirmInstructionRef"></confirmInstruction>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { myMixin } from '../../mixins/mixin';
|
|
|
+import selectTeachingClassDialog from "../dialog/selectTeachingClassDialog2.vue";
|
|
|
+
|
|
|
+import messageInstruction from '../components/messageInstruction.vue';
|
|
|
+import confirmInstruction from '../components/confirmInstruction.vue';
|
|
|
+export default {
|
|
|
+ mixins: [myMixin],
|
|
|
+ components: {
|
|
|
+ messageInstruction,
|
|
|
+ confirmInstruction,
|
|
|
+ selectTeachingClassDialog
|
|
|
+ },
|
|
|
+ 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,
|
|
|
+ classList: [],
|
|
|
+ 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, // 显示获取文本加载状态
|
|
|
+ // 弹窗相关
|
|
|
+ showObserveDialog: false, // 显示课堂观察弹窗
|
|
|
+ observeDialogUrl: "", // 课堂观察链接
|
|
|
+ // 录音时间记录
|
|
|
+ recordingStartTime: "", // 开始录音时间
|
|
|
+ recordingEndTime: "", // 结束录音时间
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ iframeSrcop() {
|
|
|
+ if (this.$region == 'hk') {
|
|
|
+ return `https://cloud.cocorobo.hk/browser/public/index.html`;
|
|
|
+ } else if (this.$region == 'com') {
|
|
|
+ return `https://cloud.cocorobo.com/browser/public/index.html`;
|
|
|
+ } else {
|
|
|
+ return `https://beta.cloud.cocorobo.cn/browser/public/index.html`;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ openSelectClass(){
|
|
|
+ this.$refs.selectTeachingClassDialogRef.open({classList:this.classList}, this.tcid2)
|
|
|
+ },
|
|
|
+ addInviteCodeOne(cid) {
|
|
|
+ return new Promise((resolve)=>{
|
|
|
+ let params = [
|
|
|
+ {
|
|
|
+ courseId: this.id,
|
|
|
+ inviteCode: cid,
|
|
|
+ },
|
|
|
+ ];
|
|
|
+ this.ajax
|
|
|
+ .post(this.$store.state.api + "add_courseInviteCode2", params)
|
|
|
+ .then((res) => {
|
|
|
+ console.log(res.data)
|
|
|
+ resolve(res.data)
|
|
|
+ })
|
|
|
+ .catch((err) => {
|
|
|
+ resolve(err.messages)
|
|
|
+ console.error(err);
|
|
|
+ });
|
|
|
+ })
|
|
|
+ },
|
|
|
+ async selectClassSuccess(classId){
|
|
|
+ if(classId){
|
|
|
+ let data = await this.addInviteCodeOne(classId)
|
|
|
+ console.log("addInviteCodeOne",data)
|
|
|
+ this.tcid2 = classId
|
|
|
+ this.getClassName()
|
|
|
+ this.getCourseDetail();
|
|
|
+ }else if(this.tcid2){
|
|
|
+ this.ticd2 = ''
|
|
|
+ this.getCourseDetail();
|
|
|
+ }
|
|
|
+ // this.gotoCourse(classId);
|
|
|
+ this.$refs.selectTeachingClassDialogRef.close();
|
|
|
+ },
|
|
|
+ async changeClassList(data){
|
|
|
+ this.classList = JSON.parse(JSON.stringify(data))
|
|
|
+ let params = [{
|
|
|
+ cid:this.id,
|
|
|
+ juri:this.classList.map(i=>i.id).join(',')
|
|
|
+ }]
|
|
|
+ this.ajax.post(this.$store.state.api+"update_CourseJuriById",params).then(res=>{
|
|
|
+ if(res.data==1){
|
|
|
+ console.log(this.lang.ssModifySuccess)
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ //this.inviteCodeFn();
|
|
|
+ },
|
|
|
+ goTo(path) {
|
|
|
+ this.$router.push(path);
|
|
|
+ },
|
|
|
+ refreshCourse() {
|
|
|
+ this.getCourseDetail();
|
|
|
+ },
|
|
|
+ audioStart() {
|
|
|
+ this.onStartRecordWithMicrosoft();
|
|
|
+ },
|
|
|
+ toggleRecording() {
|
|
|
+ return new Promise(resolve => {
|
|
|
+ if (this.recordedForm.status == 1) {
|
|
|
+ // 检查录音时间是否至少为5秒
|
|
|
+ const now = new Date();
|
|
|
+ const duration = (now - new Date(this.recordingStartTime)) / 1000;
|
|
|
+ if (duration < 5) {
|
|
|
+ this.$message.warning(this.lang.ssRecordingTimeAtLeast5Seconds);
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ this.$refs.confirmInstructionRef.open({
|
|
|
+ title: this.lang.ssStopRecordingConfirm,
|
|
|
+ message: this.lang.ssStopRecordingNotice,
|
|
|
+ cancelText: this.lang.ssCancel,
|
|
|
+ submitText: this.lang.ssConfirm,
|
|
|
+ submitCallback: () => {
|
|
|
+ console.log("确定")
|
|
|
+ this.onFinishRecordWithMicrosoft().then(() => {
|
|
|
+ resolve(true)
|
|
|
+ });
|
|
|
+ },
|
|
|
+ cancelCallback: () => {
|
|
|
+ console.log("取消")
|
|
|
+ resolve(false)
|
|
|
+ },
|
|
|
+ })
|
|
|
+
|
|
|
+ // this.$confirm(this.lang.ssStopRecordingNotice, this.lang.ssStopRecordingConfirm, {
|
|
|
+ // confirmButtonText: this.lang.ssConfirm,
|
|
|
+ // cancelButtonText: this.lang.ssCancel,
|
|
|
+ // confirmButtonClass: "pptEasyClassConfirmButtonText",
|
|
|
+ // cancelButtonClass: "pptEasyClassCancelButtonText"
|
|
|
+ // }).then(() => {
|
|
|
+ // console.log("确定")
|
|
|
+ // // this.$message({
|
|
|
+ // // dangerouslyUseHTMLString: true,
|
|
|
+ // // customClass:"pptEasyClassMessage",
|
|
|
+ // // message: '已停止录制 <p style="color:#3AB855;text-decoration: underline;cursor: pointer;float:right;margin-left:10px" target="_blank">查看结果</p>'
|
|
|
+ // // });
|
|
|
+ // this.onFinishRecordWithMicrosoft().then(() => {
|
|
|
+ // resolve(true)
|
|
|
+ // });
|
|
|
+ // }).catch(() => {
|
|
|
+ // console.log("取消")
|
|
|
+ // resolve(false)
|
|
|
+ // });
|
|
|
+
|
|
|
+ } else {
|
|
|
+ const now = new Date();
|
|
|
+ const duration = (now - new Date(this.recordingEndTime)) / 1000;
|
|
|
+ if (duration < 5) {
|
|
|
+ this.$message.warning('录音时间至少间距5秒');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.onStartRecordWithMicrosoft();
|
|
|
+ resolve(true)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ // })
|
|
|
+ },
|
|
|
+ // ============ 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;
|
|
|
+ // 记录开始录音时间
|
|
|
+ this.recordingStartTime = new Date().toLocaleString("zh-CN", {
|
|
|
+ hour12: false,
|
|
|
+ timeZone: "Asia/Shanghai"
|
|
|
+ }).replace(/\//g, "-");
|
|
|
+ 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();
|
|
|
+ setTimeout(() => {
|
|
|
+ navigator.permissions && navigator.permissions.query({ name: 'microphone' }).then(permissionStatus => {
|
|
|
+ if (permissionStatus.state !== "granted") {
|
|
|
+ // 没有开启录音权限,直接确定停止录音
|
|
|
+ this.recordedForm.status = "0";
|
|
|
+ let iframe = this.$refs["iiframe"];
|
|
|
+ iframe.contentWindow.onSessionStopped = null;
|
|
|
+ iframe.contentWindow.window.onRecognizedResult = null;
|
|
|
+ this.$message.success(this.lang.ssNoPermStop);
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }, 10000)
|
|
|
+
|
|
|
+ },
|
|
|
+ async onFinishRecordWithMicrosoft() {
|
|
|
+ return new Promise(resolve => {
|
|
|
+ navigator.permissions && navigator.permissions.query({ name: 'microphone' }).then(async permissionStatus => {
|
|
|
+ if (permissionStatus.state !== "granted") {
|
|
|
+ // 没有开启录音权限,直接确定停止录音
|
|
|
+ this.recordedForm.status = "0";
|
|
|
+ let iframe = this.$refs["iiframe"];
|
|
|
+ iframe.contentWindow.onSessionStopped = null;
|
|
|
+ iframe.contentWindow.window.onRecognizedResult = null;
|
|
|
+ this.$message.success(this.lang.ssNoPermStop);
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (this.recordedForm.status == 1) {
|
|
|
+ //正在录音时
|
|
|
+ let iiframe = this.$refs["iiframe"];
|
|
|
+ iiframe.contentWindow.window.document
|
|
|
+ .getElementById("scenarioStopButton")
|
|
|
+ .click();
|
|
|
+ // 录音借宿
|
|
|
+ iiframe.contentWindow.onSessionStopped = async (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"
|
|
|
+ });
|
|
|
+ // 存储文件和文本到全局对象
|
|
|
+ await this.storeRecordingData(file);
|
|
|
+ // 记录结束录音时间
|
|
|
+ this.recordingEndTime = new Date().toLocaleString("zh-CN", {
|
|
|
+ hour12: false,
|
|
|
+ timeZone: "Asia/Shanghai"
|
|
|
+ }).replace(/\//g, "-");
|
|
|
+ // 调用 addPPTClass 接口
|
|
|
+ this.addPPTClass(file);
|
|
|
+ iiframe.contentWindow.onSessionStopped = null;
|
|
|
+ iiframe.contentWindow.window.onRecognizedResult = null;
|
|
|
+ resolve(true)
|
|
|
+ };
|
|
|
+ } 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" });
|
|
|
+ // 存储文件和文本到全局对象
|
|
|
+ await this.storeRecordingData(file);
|
|
|
+ // 记录结束录音时间
|
|
|
+ this.recordingEndTime = new Date().toLocaleString("zh-CN", {
|
|
|
+ hour12: false,
|
|
|
+ timeZone: "Asia/Shanghai"
|
|
|
+ }).replace(/\//g, "-");
|
|
|
+ // 调用 addPPTClass 接口
|
|
|
+ this.addPPTClass(file);
|
|
|
+ resolve(true)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ storeRecordingData(file) {
|
|
|
+ // 配置全局 window 对象存储录音数据
|
|
|
+ return new Promise((resolve) => {
|
|
|
+ if (!window.recordingData) {
|
|
|
+ window.recordingData = {};
|
|
|
+ }
|
|
|
+ window.recordingData.file = file;
|
|
|
+ window.recordingData.text = this.transcriptionData.content;
|
|
|
+ window.recordingData.textList = this.recordedForm.textList;
|
|
|
+ // 将录音文件转为base64并存入localStorage
|
|
|
+ // const reader = new FileReader();
|
|
|
+ // reader.onload = function(e) {
|
|
|
+ // const base64data = e.target.result;
|
|
|
+ // try {
|
|
|
+ // localStorage.setItem("recordedFileBase64", base64data);
|
|
|
+ // localStorage.setItem('recordedFileName', file.name);
|
|
|
+ // localStorage.setItem('recordedFileType', file.type);
|
|
|
+ resolve(true)
|
|
|
+ // console.log("录音数据已存储到全局对象:", window.recordingData);
|
|
|
+ // } catch (err) {
|
|
|
+ // resolve(false)
|
|
|
+ // console.error("localStorage存储base64文件失败:", err);
|
|
|
+ // }
|
|
|
+ // };
|
|
|
+ // reader.readAsDataURL(file);
|
|
|
+ })
|
|
|
+ },
|
|
|
+ openObserveDialog(pptid, file) {
|
|
|
+ // this.observeDialogUrl = `https://observe.cocorobo.cn/#/newClassroom?userid=${this.userid}&oid=${this.oid}&org=${this.org}&pptid=${pptid}`;
|
|
|
+ // this.showObserveDialog = true;
|
|
|
+
|
|
|
+ const url = `https://observe.cocorobo.cn/#/newClassroom?userid=${this.userid}&oid=${this.oid}&org=${this.org}&pptid=${pptid}`;
|
|
|
+
|
|
|
+ const _pageWindow = window.open(url, '_blank');
|
|
|
+
|
|
|
+ // if(!_pageWindow){
|
|
|
+ // alert('浏览器弹窗被拦截,请允许弹窗后重试');
|
|
|
+ // return;
|
|
|
+ // }
|
|
|
+ const sendData = {
|
|
|
+ type: 'fileData',
|
|
|
+ file,
|
|
|
+ }
|
|
|
+ const sendMessageToVue3 = () => {
|
|
|
+ _pageWindow.postMessage(
|
|
|
+ sendData,
|
|
|
+ '*' // targetOrigin:必须是Vue3的实际域名,不要用*(安全)
|
|
|
+ );
|
|
|
+ };
|
|
|
+
|
|
|
+ const handleVue3Ready = (e) => {
|
|
|
+ // 校验消息来源(安全:只处理Vue3域名的消息)
|
|
|
+
|
|
|
+ // 校验消息类型(确认是Vue3的就绪通知)
|
|
|
+ if (e.data.type === 'READY') {
|
|
|
+ console.log('已就绪,开始发送数据');
|
|
|
+ sendMessageToVue3();
|
|
|
+ }
|
|
|
+
|
|
|
+ // 校验Vue3的"接收成功"确认(可选,进一步确保送达)
|
|
|
+ if (e.data.type === 'DATA_RECEIVED') {
|
|
|
+ console.log('数据已被接收');
|
|
|
+ // 收到确认后移除监听,避免内存泄漏
|
|
|
+ window.removeEventListener('message', handleVue3Ready);
|
|
|
+ }
|
|
|
+ };
|
|
|
+ window.addEventListener('message', handleVue3Ready);
|
|
|
+ const timeoutTimer = setTimeout(() => {
|
|
|
+ console.log('未收到就绪通知,主动发送数据');
|
|
|
+ sendMessageToVue3();
|
|
|
+ // 移除监听(兜底后清理)
|
|
|
+ window.removeEventListener('message', handleVue3Ready);
|
|
|
+ }, 5000);
|
|
|
+
|
|
|
+ const checkWinClosed = setInterval(() => {
|
|
|
+ if (_pageWindow.closed) {
|
|
|
+ clearTimeout(timeoutTimer);
|
|
|
+ clearInterval(checkWinClosed);
|
|
|
+ window.removeEventListener('message', handleVue3Ready);
|
|
|
+ }
|
|
|
+ }, 1000);
|
|
|
+ // 优化:仅通过轮询方式检查窗口是否加载完成并发送消息,被打开页面无需做任何处理
|
|
|
+ // const sendFileData = () => {
|
|
|
+ // if (_pageWindow && !_pageWindow.closed) {
|
|
|
+ // _pageWindow.postMessage(
|
|
|
+ // {
|
|
|
+ // type: 'fileData',
|
|
|
+ // file,
|
|
|
+ // },
|
|
|
+ // '*'
|
|
|
+ // );
|
|
|
+ // }
|
|
|
+ // };
|
|
|
+
|
|
|
+ // let checkCount = 0;
|
|
|
+ // const checkLoadedInterval = setInterval(() => {
|
|
|
+ // if (!_pageWindow || _pageWindow.closed) {
|
|
|
+ // clearInterval(checkLoadedInterval);
|
|
|
+ // return;
|
|
|
+ // }
|
|
|
+ // try {
|
|
|
+ // if (_pageWindow.document && _pageWindow.document.readyState === 'complete') {
|
|
|
+ // clearInterval(checkLoadedInterval);
|
|
|
+ // sendFileData();
|
|
|
+ // }
|
|
|
+ // } catch (err) {
|
|
|
+ // // 跨域下直接尝试发送
|
|
|
+ // clearInterval(checkLoadedInterval);
|
|
|
+ // sendFileData();
|
|
|
+ // }
|
|
|
+ // if (++checkCount > 20) {
|
|
|
+ // // 最多检测2秒(20次)
|
|
|
+ // clearInterval(checkLoadedInterval);
|
|
|
+ // sendFileData();
|
|
|
+ // }
|
|
|
+ // }, 100);
|
|
|
+
|
|
|
+ setTimeout(() => {
|
|
|
+ window.focus()
|
|
|
+ }, 100)
|
|
|
+
|
|
|
+ function openPageWindow() {
|
|
|
+ _pageWindow.focus()
|
|
|
+ }
|
|
|
+
|
|
|
+ this.$refs.messageInstructionRef.pptMessage(`${this.lang.ssStoppedRecording} <p style="color:#3AB855;text-decoration: underline;cursor: pointer;float:right;margin-left:10px" target="_blank" onClick="(${openPageWindow.toString()})()">${this.lang.ssViewRecordingResult}</p>`)
|
|
|
+
|
|
|
+ },
|
|
|
+ addPPTClass(file) {
|
|
|
+ let params = {
|
|
|
+ pptid: this.id,
|
|
|
+ cid: this.tcid,
|
|
|
+ st: this.recordingStartTime,
|
|
|
+ et: this.recordingEndTime
|
|
|
+ };
|
|
|
+ this.ajax
|
|
|
+ .post(this.$store.state.api + "addPPTClass", [params])
|
|
|
+ .then(res => {
|
|
|
+ console.log("addPPTClass", res);
|
|
|
+ let id = res.data[0][0].id;
|
|
|
+ this.openObserveDialog(id, file);
|
|
|
+ })
|
|
|
+ .catch(err => {
|
|
|
+ console.error(err);
|
|
|
+ this.$message.error("保存录音信息失败");
|
|
|
+ });
|
|
|
+ },
|
|
|
+ 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] || "";
|
|
|
+ console.log('tcid', this.tcid)
|
|
|
+ console.log('tcid2', this.tcid2)
|
|
|
+ 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.classList = res.data[2]
|
|
|
+ if(!this.tcid2 && this.tType == '1'){
|
|
|
+ this.$refs.selectTeachingClassDialogRef.open({classList:this.classList})
|
|
|
+ }
|
|
|
+ this.pageLoading = false;
|
|
|
+ })
|
|
|
+ .catch(err => {
|
|
|
+ console.log(err);
|
|
|
+ this.$message.error(this.lang.ssGetCourseDataFail);
|
|
|
+ this.pageLoading = false;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ setPptIframe() {
|
|
|
+ this.showIframe = false;
|
|
|
+
|
|
|
+ this.$nextTick(() => {
|
|
|
+ let api = 'https://psyy.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() {
|
|
|
+ if (this.recordedForm.status == 1) {
|
|
|
+ this.toggleRecording().then((flag) => {
|
|
|
+ if (flag) {
|
|
|
+
|
|
|
+ this.$refs.confirmInstructionRef.open({
|
|
|
+ title: this.lang.ssPrompt,
|
|
|
+ message: this.lang.ssEndClassConfirm,
|
|
|
+ cancelText: this.lang.ssCancel,
|
|
|
+ submitText: this.lang.ssConfirm,
|
|
|
+ submitCallback: () => {
|
|
|
+ this.$refs.ppt.contentWindow.PPTistStudent.forceLogout();
|
|
|
+ this.$refs.messageInstructionRef.pptMessage(this.lang.ssStudentLoggedOut)
|
|
|
+ setTimeout(() => {
|
|
|
+ this.tcid2 = ""
|
|
|
+ this.refreshCourse()
|
|
|
+ }, 1000)
|
|
|
+ },
|
|
|
+ cancelCallback: () => {
|
|
|
+ console.log("取消")
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+
|
|
|
+ // this.$confirm(this.lang.ssEndClassConfirm, this.lang.ssPrompt, {
|
|
|
+ // confirmButtonText: this.lang.ssConfirm,
|
|
|
+ // cancelButtonText: this.lang.ssCancel,
|
|
|
+ // type: 'warning'
|
|
|
+ // }).then(() => {
|
|
|
+ // this.$refs.ppt.contentWindow.PPTistStudent.forceLogout();
|
|
|
+ // this.$refs.messageInstructionRef.pptMessage(this.lang.ssStudentLoggedOut)
|
|
|
+ // setTimeout(() => {
|
|
|
+ // this.tcid2 = ""
|
|
|
+ // this.refreshCourse()
|
|
|
+ // }, 1000)
|
|
|
+ // }).catch(() => { });
|
|
|
+
|
|
|
+ }
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ // this.$confirm(this.lang.ssEndClassConfirm, this.lang.ssPrompt, {
|
|
|
+ // confirmButtonText: this.lang.ssConfirm,
|
|
|
+ // cancelButtonText: this.lang.ssCancel,
|
|
|
+ // type: 'warning'
|
|
|
+ // }).then(() => {
|
|
|
+ // this.$refs.ppt.contentWindow.PPTistStudent.forceLogout();
|
|
|
+ // this.$refs.messageInstructionRef.pptMessage(this.lang.ssStudentLoggedOut)
|
|
|
+ // setTimeout(() => {
|
|
|
+ // this.tcid2 = ""
|
|
|
+ // this.refreshCourse()
|
|
|
+ // }, 1000)
|
|
|
+ // }).catch(() => { });
|
|
|
+ this.$refs.confirmInstructionRef.open({
|
|
|
+ title: this.lang.ssPrompt,
|
|
|
+ message: this.lang.ssEndClassConfirm,
|
|
|
+ cancelText: this.lang.ssCancel,
|
|
|
+ submitText: this.lang.ssConfirm,
|
|
|
+ submitCallback: () => {
|
|
|
+ this.$refs.ppt.contentWindow.PPTistStudent.forceLogout();
|
|
|
+ this.$refs.messageInstructionRef.pptMessage(this.lang.ssStudentLoggedOut)
|
|
|
+ setTimeout(() => {
|
|
|
+ this.tcid2 = ""
|
|
|
+ this.refreshCourse()
|
|
|
+ }, 1000)
|
|
|
+ },
|
|
|
+ cancelCallback: () => {
|
|
|
+ console.log("取消")
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+ 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) {
|
|
|
+ this.doSyncClassData();
|
|
|
+ let params = [
|
|
|
+ {
|
|
|
+ uid: this.userid,
|
|
|
+ cid: this.id + (this.tcid2 || ''),
|
|
|
+ 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;
|
|
|
+ })
|
|
|
+ },
|
|
|
+ doSyncClassData() {
|
|
|
+ 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('同步数据')
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 直接上传录制音频/视频
|
|
|
+ uploadVoiceBtn() {
|
|
|
+ const input = document.createElement('input');
|
|
|
+ input.type = 'file';
|
|
|
+ input.accept = '.m4a,.mp4,.mov,.mp3,.wav';
|
|
|
+ input.click();
|
|
|
+ input.onchange = (e) => {
|
|
|
+ const fileList = e.target.files;
|
|
|
+ const file = fileList[0]
|
|
|
+ this.recordingStartTime = new Date(window.recordingStartTime ? window.recordingStartTime : new Date()).toLocaleString("zh-CN", {
|
|
|
+ hour12: false,
|
|
|
+ timeZone: "Asia/Shanghai"
|
|
|
+ }).replace(/\//g, "-");
|
|
|
+ this.recordingEndTime = new Date(window.recordingEndTime ? window.recordingEndTime : new Date()).toLocaleString("zh-CN", {
|
|
|
+ hour12: false,
|
|
|
+ timeZone: "Asia/Shanghai"
|
|
|
+ }).replace(/\//g, "-");
|
|
|
+ this.addPPTClass(file)
|
|
|
+ // 判断文件类型并获取音频或视频时长
|
|
|
+ // if (file && (file.type.startsWith('audio/') || file.type.startsWith('video/'))) {
|
|
|
+ // const url = URL.createObjectURL(file);
|
|
|
+ // let media;
|
|
|
+ // if (file.type.startsWith('audio/')) {
|
|
|
+ // media = new Audio();
|
|
|
+ // } else {
|
|
|
+ // media = document.createElement('video');
|
|
|
+ // }
|
|
|
+ // media.preload = 'metadata';
|
|
|
+ // media.src = url;
|
|
|
+ // media.onloadedmetadata = () => {
|
|
|
+ // const duration = media.duration;
|
|
|
+ // console.log('文件时长(秒):', duration);
|
|
|
+ // // 这里可以赋值或者进一步处理时长 duration
|
|
|
+ // URL.revokeObjectURL(url);
|
|
|
+ // };
|
|
|
+ // media.onerror = () => {
|
|
|
+ // console.error('无法读取文件时长');
|
|
|
+ // URL.revokeObjectURL(url);
|
|
|
+ // };
|
|
|
+ // }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ destroyed() {
|
|
|
+ clearInterval(this.opertimer);
|
|
|
+ this.opertimer = null;
|
|
|
+ this.doSyncClassData();
|
|
|
+ },
|
|
|
+ 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]
|
|
|
+ }
|
|
|
+ setTimeout(() => {
|
|
|
+ this.doSyncClassData();
|
|
|
+ }, 1000);
|
|
|
+ }
|
|
|
+};
|
|
|
+</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_center>.pec_h_r_btn_refresh {
|
|
|
+ color: #fff;
|
|
|
+ /* background-color: #0061ff;
|
|
|
+ border-color: #0061ff; */
|
|
|
+ padding: 9px 10px;
|
|
|
+ margin-right: 15px;
|
|
|
+ border-radius: 26px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ gap: 5px;
|
|
|
+ background: #FFF7F5;
|
|
|
+ color: #000000;
|
|
|
+ font-weight: 400;
|
|
|
+ cursor: pointer;
|
|
|
+ fill: #666666;
|
|
|
+}
|
|
|
+
|
|
|
+.pec_h_center>.pec_h_r_btn_refresh>svg {
|
|
|
+
|
|
|
+ width: 1rem;
|
|
|
+ height: 1rem;
|
|
|
+}
|
|
|
+
|
|
|
+.pec_h_center>.pec_h_r_btn_refresh.recording {
|
|
|
+ /* background-color: #F53F3F;
|
|
|
+ border-color: #F53F3F; */
|
|
|
+ background: #FFF7E8;
|
|
|
+ fill: #FF9300;
|
|
|
+ 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;
|
|
|
+}
|
|
|
+
|
|
|
+.pec_h_r_btn_uploadVoiceBtn {
|
|
|
+ border-color: #F0E1DD;
|
|
|
+ background-color: #FFF7F5;
|
|
|
+ color: #000;
|
|
|
+}
|
|
|
+
|
|
|
+.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;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+.class-value2 {
|
|
|
+ cursor: pointer;
|
|
|
+ background: #fff;
|
|
|
+}
|
|
|
+
|
|
|
+.class-value > svg{
|
|
|
+ width: 13px;
|
|
|
+ height: 13px;
|
|
|
+ margin-left: 8px;
|
|
|
+}
|
|
|
+
|
|
|
+.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: 35px;
|
|
|
+ height: 35px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ background-color: #fff7f5;
|
|
|
+ border-radius: 45%;
|
|
|
+ cursor: pointer;
|
|
|
+ margin-right: 15px;
|
|
|
+ padding: 0 3px;
|
|
|
+}
|
|
|
+
|
|
|
+.refresh_icon img {
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+}
|
|
|
+
|
|
|
+.name_box {
|
|
|
+ background: unset !important;
|
|
|
+ border: none !important;
|
|
|
+ cursor: unset !important;
|
|
|
+}
|
|
|
+
|
|
|
+.observe-dialog>>>.el-dialog__header {
|
|
|
+ padding: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.observe-dialog>>>.el-dialog__body {
|
|
|
+ padding: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.observe-dialog>>>.el-dialog__headerbtn {
|
|
|
+ top: 22px;
|
|
|
+ right: 20px;
|
|
|
+ z-index: 100;
|
|
|
+}
|
|
|
+</style>
|