index.tsx 25 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632
  1. import { Transition, defineComponent, onMounted, reactive, watch, defineAsyncComponent, computed, onUnmounted } from "vue";
  2. import { connectWebsocket, evaluatingData, handleEndBegin, handleStartBegin, handleStartEvaluat, handleViewReport, startCheckDelay, checkUseEarphone, handleCancelEvaluat, checkMinInterval, handleEndEvaluat } from "/src/view/evaluating";
  3. import Earphone from "./earphone";
  4. import styles from "./index.module.less";
  5. import SoundEffect from "./sound-effect";
  6. import state, { handleRessetState, resetPlaybackToStart, musicalInstrumentCodeInfo, clearSelection, initSetPlayRate, resetBaseRate } from "/src/state";
  7. import { storeData } from "/src/store";
  8. import { browser } from "/src/utils";
  9. import { getNoteByMeasuresSlursStart } from "/src/helpers/formateMusic";
  10. import { Icon, Popup, showToast, closeToast, showLoadingToast } from "vant";
  11. import EvaluatResult from "./evaluat-result";
  12. import EvaluatAudio from "./evaluat-audio";
  13. import { api_getDeviceDelay, api_openAdjustRecording, api_proxyServiceMessage, api_videoUpdate, getEarphone, api_back, api_startDelayCheck, api_cancelDelayCheck, api_remove_cancelDelayCheck, api_closeDelayCheck, api_finishDelayCheck, api_retryEvaluating, api_remove_finishDelayCheck } from "/src/helpers/communication";
  14. import EvaluatShare from "./evaluat-share";
  15. import { Vue3Lottie } from "vue3-lottie";
  16. import startData from "./data/start.json";
  17. import startingData from "./data/starting.json";
  18. import iconTastBg from "./icons/task-bg.svg";
  19. import iconEvaluat from "./icons/evaluating.json";
  20. import { headImg } from "/src/page-instrument/header-top/image";
  21. import { api_musicPracticeRecordVideoUpload } from "../api";
  22. import { headTopData } from "../header-top/index";
  23. import { getQuery } from "/src/utils/queryString";
  24. import Countdown from "./countdown";
  25. import { IPostMessage } from "/src/utils/native-message";
  26. import tipErjiBg from "./icons/tip_erji.png"
  27. import tipErjiBtn from "./icons/tip_btn.png"
  28. // const DelayCheck = defineAsyncComponent(() =>
  29. // import('./delay-check')
  30. // )
  31. // frequency 频率, amplitude 振幅, decibels 分贝
  32. type TCriteria = "frequency" | "amplitude" | "decibels";
  33. /**
  34. * 节拍器时长
  35. * 评测模式时,应该传节拍器时长
  36. * 阶段评测时,判断是否从第一小节开始,并且曲子本身含有节拍器,需要传节拍器时长,否则传0
  37. */
  38. let actualBeatLength = 0;
  39. let calculateInfo: any = {};
  40. let checkErjiTimer: any = null
  41. export const reCheckDelay = () => {
  42. evaluatingData.onceErjiPopShow = false;
  43. evaluatingData.needCheckErjiStatus = true;
  44. headTopData.settingMode = false
  45. state.setting.soundEffect = false
  46. api_startDelayCheck({});
  47. }
  48. export default defineComponent({
  49. name: "evaluat-model",
  50. setup() {
  51. const query = getQuery();
  52. const evaluatModel = reactive({
  53. tips: true,
  54. evaluatUpdateAudio: false,
  55. isSaveVideo: state.setting.camera && state.setting.saveToAlbum,
  56. shareMode: false,
  57. });
  58. /**
  59. * 检测返回
  60. */
  61. const handleDelayBack = () => {
  62. if (query.workRecord) {
  63. evaluatingData.soundEffectMode = false;
  64. api_back();
  65. } else {
  66. evaluatingData.soundEffectMode = false;
  67. // handleRessetState();
  68. // headTopData.modeType = "init";
  69. }
  70. };
  71. /**
  72. * 执行检测
  73. */
  74. const handlePerformDetection = async () => {
  75. console.log(evaluatingData.checkStep, evaluatingData, "检测123");
  76. // 检测完成不检测了
  77. if (evaluatingData.checkEnd) return;
  78. // 延迟检测
  79. if (evaluatingData.checkStep === 0) {
  80. evaluatingData.checkStep = 10;
  81. // 没有设备延迟数据 或 开启了效音 显示检测组件,并持续检测耳机状态
  82. if (state.setting.soundEffect) {
  83. evaluatingData.soundEffectMode = true;
  84. return;
  85. }
  86. // 判断只有开始了设备检测之后才去调用api
  87. if (state.setting.soundEffect) {
  88. const delayData = await api_getDeviceDelay();
  89. // console.log("🚀 ~ delayTime:", delayData);
  90. if (delayData && delayData.content?.value < 0) {
  91. evaluatingData.soundEffectMode = true;
  92. return;
  93. }
  94. }
  95. handlePerformDetection();
  96. return;
  97. }
  98. // 效验完成
  99. if (evaluatingData.checkStep === 10) {
  100. const erji = await checkUseEarphone();
  101. if (!erji) {
  102. evaluatingData.earphoneMode = true;
  103. }
  104. evaluatingData.checkEnd = true;
  105. console.log("检测结束,生成数据");
  106. handleConnect();
  107. }
  108. };
  109. const browserInfo = browser();
  110. /** 是否是节奏练习 */
  111. const isRhythmicExercises = () => {
  112. const examSongName = state.examSongName || "";
  113. return examSongName.indexOf("节奏练习") > -1;
  114. };
  115. /** 获取评测标准 */
  116. const getEvaluationCriteria = () => {
  117. let criteria: TCriteria = "frequency";
  118. // 声部打击乐
  119. if ([23, 113, 121].includes(state.subjectId)) {
  120. criteria = "amplitude";
  121. } else if (isRhythmicExercises()) {
  122. // 分类为节奏练习
  123. criteria = "decibels";
  124. }
  125. return criteria;
  126. };
  127. /** 校验耳机状态 */
  128. const checkEarphoneStatus = async (type?: string) => {
  129. clearTimeout(checkErjiTimer);
  130. checkErjiTimer = null;
  131. if (type !== "start") {
  132. // const erji = await checkUseEarphone();
  133. const res = await getEarphone();
  134. const erji = res?.content?.checkIsWired || false;
  135. // 是否已经提示过耳机弹窗,重新进入评测页面,重置该状态为false,手动关掉耳机弹窗,改变该状态为true,本次评测都不在提示耳机状态弹窗
  136. if (!evaluatingData.onceErjiPopShow) {
  137. evaluatingData.earphoneMode = true;
  138. } else {
  139. clearTimeout(checkErjiTimer);
  140. checkErjiTimer = null;
  141. return;
  142. }
  143. evaluatingData.earPhoneType = res?.content?.type || "";
  144. if (evaluatingData.earPhoneType === "有线耳机") {
  145. clearTimeout(checkErjiTimer);
  146. checkErjiTimer = null;
  147. setTimeout(() => {
  148. evaluatingData.earphoneMode = false;
  149. }, 3000);
  150. } else {
  151. // 如果没有佩戴有限耳机,需要持续检测耳机状态
  152. checkErjiTimer = setTimeout(() => {
  153. checkEarphoneStatus();
  154. }, 1000);
  155. }
  156. }
  157. console.log("检测结束,生成数据", evaluatingData.websocketState, evaluatingData.startBegin, evaluatingData.checkEnd);
  158. handleConnect();
  159. };
  160. /** 生成评测曲谱数据 */
  161. const formatTimes = () => {
  162. console.log('评测111')
  163. let starTime = 0;
  164. let ListenMode = false;
  165. let dontEvaluatingMode = false;
  166. let skip = false;
  167. const datas = [];
  168. let selectTimes = state.times;
  169. let unitTestIdx = 0;
  170. let preTime = 0;
  171. let preTimes = [];
  172. // 系统节拍器时长
  173. actualBeatLength = Math.round((state.times[0].fixtime * 1000) / 1);
  174. // 如果是阶段评测,选取该阶段的times
  175. if (state.isSelectMeasureMode && state.section.length) {
  176. const startIndex = state.times.findIndex((n: any) => n.noteId == state.section[0].noteId);
  177. let endIndex = state.times.findIndex((n: any) => n.noteId == state.section[1].noteId);
  178. endIndex = endIndex < state.section[1].i ? state.section[1].i : endIndex;
  179. if (startIndex > 1) {
  180. // firstNoteTime应该取预备小节的第一个音符的开始播放的时间
  181. const idx = startIndex - 1 - state.times[startIndex - 1].si;
  182. preTime = state.times[idx] ? state.times[idx].time * 1000 : 0;
  183. }
  184. actualBeatLength = startIndex == 0 && state.isOpenMetronome ? actualBeatLength : 0;
  185. selectTimes = state.times.filter((n: any, index: number) => {
  186. return index >= startIndex && index <= endIndex;
  187. });
  188. preTimes = state.times.filter((n: any, index: number) => {
  189. return index < startIndex;
  190. });
  191. unitTestIdx = startIndex;
  192. starTime = selectTimes[0].sourceRelativeTime || selectTimes[0].relativeTime;
  193. }
  194. // 阶段评测beatLength需要加上预备小节的持续时长
  195. actualBeatLength = preTimes.length ? actualBeatLength + preTimes[preTimes.length - 1].relaMeasureLength * 1000 : actualBeatLength;
  196. // 如果是弱起,并且预备小节是第一节
  197. if (state.section.length && state.sectionFirst && state.sectionFirst.measureListIndex == 0) {
  198. actualBeatLength = actualBeatLength < Math.round((state.times[0].fixtime * 1000) / 1) ? Math.round((state.times[0].fixtime * 1000) / 1) : actualBeatLength;
  199. }
  200. let firstNoteTime = unitTestIdx > 1 ? preTime : 0;
  201. let measureIndex = -1;
  202. let recordMeasure = -1;
  203. for (let index = 0; index < selectTimes.length; index++) {
  204. const item = selectTimes[index];
  205. const note = getNoteByMeasuresSlursStart(item);
  206. // #8701 bug: 评测模式,是以曲谱本身的速度进行评测,所以rate取1,不需要转换
  207. // const rate = state.speed / state.originSpeed;
  208. const rate = state.basePlayRate * state.originAudioPlayRate; // 播放倍率
  209. // const difftime = item.difftime;
  210. const difftime = 0;
  211. const start = difftime + (item.sourceRelativeTime || item.relativeTime) - starTime;
  212. const end = difftime + (item.sourceRelaEndtime || item.relaEndtime) - starTime;
  213. const isStaccato = note.noteElement.voiceEntry.isStaccato();
  214. const noteRate = isStaccato ? 0.5 : 1;
  215. if (note.formatLyricsEntries.contains("Play") || note.formatLyricsEntries.contains("Play...")) {
  216. ListenMode = false;
  217. }
  218. if (note.formatLyricsEntries.contains("Listen")) {
  219. ListenMode = true;
  220. }
  221. if (note.formatLyricsEntries.contains("纯律结束")) {
  222. dontEvaluatingMode = false;
  223. }
  224. if (note.formatLyricsEntries.contains("纯律")) {
  225. dontEvaluatingMode = true;
  226. }
  227. const nextNote = selectTimes[index + 1];
  228. // console.log("noteinfo", note.noteElement.isRestFlag && !!note.stave && !!nextNote)
  229. if (skip && (note.stave || !item.noteElement.isRestFlag || (nextNote && !nextNote.noteElement.isRestFlag))) {
  230. skip = false;
  231. }
  232. if (note.noteElement.isRestFlag && !!note.stave && !!nextNote && nextNote.noteElement.isRestFlag) {
  233. skip = true;
  234. }
  235. // console.log(note.measureOpenIndex, item.measureOpenIndex, note);
  236. // console.log("skip", skip)
  237. // console.log(end,start,rate,noteRate, '评测')
  238. if (note.measureOpenIndex != recordMeasure) {
  239. measureIndex++;
  240. recordMeasure = note.measureOpenIndex;
  241. }
  242. // 是否是需要延续、不停顿演奏的音符
  243. let isTenutoSound = false;
  244. if (item?.noteElement?.tie && item.noteElement.tie?.StartNote) {
  245. const startId = item.noteElement.tie?.StartNote?.NoteToGraphicalNoteObjectId
  246. isTenutoSound = item.NoteToGraphicalNoteObjectId === startId ? false : true
  247. }
  248. // 音符是否不需要评测
  249. let noteNeedEvaluat = item.hasGraceNote || ListenMode || dontEvaluatingMode || !!item?.voiceEntry?.ornamentContainer || !!item.noteElement?.speedInfo?.startWord?.includes('rit.') || item.skipMode
  250. noteNeedEvaluat = noteNeedEvaluat == true ? true : false;
  251. const data = {
  252. timeStamp: (start * 1000) / rate,
  253. duration: ((end * 1000) / rate - (start * 1000) / rate) * noteRate,
  254. frequency: item.frequency,
  255. nextFrequency: item.nextFrequency,
  256. prevFrequency: item.prevFrequency,
  257. // 重复的情况index会自然累加,render的index是谱面渲染的index
  258. measureIndex: measureIndex,
  259. measureRenderIndex: item.measureListIndex,
  260. // item.MeasureNumberXML >= 1 ? item.MeasureNumberXML - 1 : note.noteElement.sourceMeasure.measureListIndex,
  261. dontEvaluating: noteNeedEvaluat,
  262. musicalNotesIndex: index,
  263. denominator: note.noteElement?.Length.denominator,
  264. // isOrnament: !!note?.voiceEntry?.ornamentContainer,
  265. isTenutoSound,
  266. isStaccato: item?.voiceEntry?.isStaccato ? true : false, // 是否是重音
  267. };
  268. datas.push(data);
  269. }
  270. return {
  271. datas,
  272. firstNoteTime,
  273. };
  274. };
  275. /** 连接websocket */
  276. const handleConnect = async () => {
  277. const behaviorId = localStorage.getItem("behaviorId") || localStorage.getItem("BEHAVIORID") || undefined;
  278. // let rate = state.speed / state.originSpeed;
  279. const rate = state.basePlayRate * state.originAudioPlayRate; // 播放倍率
  280. // rate = parseFloat(rate.toFixed(2));
  281. console.log("速度比例", rate, "速度", state.speed);
  282. calculateInfo = formatTimes();
  283. // 评测的速度,如果是选段,则选选段开头小节的速度
  284. const evaluatSpeed = state.sectionStatus && state.section.length === 2 && state.section[0].measureSpeed ? state.section[0].measureSpeed * state.basePlayRate : state.speed;
  285. evaluatingData.evaluatSpeed = evaluatSpeed;
  286. const content = {
  287. musicXmlInfos: calculateInfo.datas,
  288. subjectId: state.musicalCode,
  289. detailId: state.detailId,
  290. examSongId: state.examSongId,
  291. xmlUrl: state.xmlUrl,
  292. partIndex: state.partIndex,
  293. behaviorId,
  294. platform: browserInfo.ios ? "IOS" : browserInfo.android ? "ANDROID" : "WEB",
  295. clientId: storeData.platformType === "STUDENT" ? "student" : storeData.platformType === "TEACHER" ? "teacher" : "education",
  296. hertz: state.setting.frequency,
  297. reactionTimeMs: state.setting.reactionTimeMs ? Number(state.setting.reactionTimeMs) : 0,
  298. speed: evaluatSpeed,
  299. heardLevel: state.setting.evaluationDifficulty,
  300. // beatLength: Math.round((state.fixtime * 1000) / rate),
  301. beatLength: actualBeatLength / rate,
  302. evaluationCriteria: state.evaluationStandard,
  303. speedRate: parseFloat(rate.toFixed(2)), // 播放倍率
  304. };
  305. await connectWebsocket(content);
  306. // state.playSource = "music";
  307. };
  308. /** 评测结果按钮处理 */
  309. const handleEvaluatResult = (type: "practise" | "tryagain" | "look" | "share" | "update" | "selfCancel") => {
  310. if (type === "update") {
  311. if (state.isAppPlay) {
  312. evaluatModel.evaluatUpdateAudio = true;
  313. resetPlaybackToStart();
  314. return;
  315. } else if (evaluatingData.resultData?.recordIdStr || evaluatingData.resultData?.recordId) {
  316. const rate = state.basePlayRate * state.originAudioPlayRate; // 播放倍率
  317. // 上传云端
  318. // evaluatModel.evaluatUpdateAudio = true;
  319. api_openAdjustRecording({
  320. recordId: evaluatingData.resultData?.recordIdStr || evaluatingData.resultData?.recordId,
  321. title: state.examSongName || "曲谱演奏",
  322. coverImg: state.coverImg,
  323. speedRate: parseFloat(rate.toFixed(2)), // 播放倍率
  324. musicRenderType: state.musicRenderType,
  325. musicSheetId: state.examSongId,
  326. 'part-index': state.partIndex
  327. });
  328. return;
  329. }
  330. } else if (type === "share") {
  331. // 分享
  332. evaluatModel.shareMode = true;
  333. return;
  334. } else if (type === "look") {
  335. // 跳转
  336. handleViewReport("recordId", "instrument");
  337. return;
  338. } else if (type === "practise") {
  339. // 去练习
  340. handleStartEvaluat();
  341. } else if (type === "tryagain") {
  342. startBtnHandle();
  343. } else if (type === "selfCancel") {
  344. // 再来一次,需要手动取消评测,不生成评测记录,不显示评测结果弹窗
  345. evaluatingData.oneselfCancleEvaluating = true;
  346. // handleCancelEvaluat();
  347. handleEndEvaluat(true, 'selfCancel');
  348. // evaluatingData.isBeginMask = true;
  349. evaluatingData.evaluatings = {};
  350. state.playState = "paused";
  351. }
  352. resetPlaybackToStart();
  353. evaluatingData.resulstMode = false;
  354. };
  355. /** 上传音视频 */
  356. const hanldeUpdateVideoAndAudio = async (update = false) => {
  357. if (!update) {
  358. evaluatModel.evaluatUpdateAudio = false;
  359. return;
  360. }
  361. if (state.setting.camera && state.setting.saveToAlbum) {
  362. evaluatModel.evaluatUpdateAudio = false;
  363. api_videoUpdate((res: any) => {
  364. if (res) {
  365. if (res?.content?.type === "success") {
  366. handleSaveResult({
  367. id: evaluatingData.resultData?.recordId,
  368. videoFilePath: res?.content?.filePath,
  369. });
  370. } else if (res?.content?.type === "error") {
  371. showToast({
  372. message: res.content?.message || "上传失败",
  373. });
  374. }
  375. }
  376. });
  377. return;
  378. }
  379. evaluatModel.evaluatUpdateAudio = false;
  380. showToast("上传成功");
  381. };
  382. const handleSaveResult = async (_body: any) => {
  383. await api_musicPracticeRecordVideoUpload(_body);
  384. showToast("上传成功");
  385. };
  386. const startBtnHandle = async () => {
  387. // 如果打开了延迟检测开关,需要先发送开始检测的消息
  388. const delayData = await api_getDeviceDelay();
  389. console.log('设备的延迟值',delayData.content?.value)
  390. if (delayData && delayData.content?.value <= 0) {
  391. await api_startDelayCheck({});
  392. return;
  393. }
  394. evaluatingData.needReplayEvaluat = false;
  395. // 选段未完成时,清除选段状态
  396. if (state.sectionStatus && state.section.length < 2) {
  397. clearSelection();
  398. }
  399. // 如果是异常状态,先等待500ms再执行后续流程
  400. if (evaluatingData.isErrorState && !state.setting.soundEffect) {
  401. // console.log('异常流程1')
  402. showLoadingToast({
  403. message: "处理中",
  404. duration: 1000,
  405. overlay: true,
  406. overlayClass: styles.scoreMode,
  407. });
  408. await new Promise<void>((resolve) => {
  409. setTimeout(() => {
  410. closeToast();
  411. evaluatingData.isErrorState = false;
  412. // console.log('异常流程2')
  413. resolve();
  414. }, 1000);
  415. });
  416. }
  417. // console.log('异常流程3')
  418. // 非选段状态,从头开始评测,重置速度
  419. if (!state.sectionStatus && state.section.length === 0) {
  420. state.activeNoteIndex = 0;
  421. state.speed = state.times[0].measureSpeed * state.basePlayRate
  422. }
  423. initSetPlayRate();
  424. // 检测APP端socket状态
  425. const res: any = await startCheckDelay();
  426. if (res?.checked) {
  427. handleConnect();
  428. handleStartBegin(calculateInfo.firstNoteTime);
  429. if (evaluatingData.isErrorState) {
  430. evaluatingData.isErrorState = false;
  431. evaluatingData.resulstMode = false;
  432. }
  433. }
  434. };
  435. // 监听到APP取消延迟检测
  436. const handleCancelDelayCheck = async (res?: IPostMessage) => {
  437. console.log("监听取消延迟检测", res);
  438. if (res?.content) {
  439. // 关闭延迟检测页面,并返回到模式选择页面
  440. // await api_closeDelayCheck({});
  441. handleDelayBack();
  442. }
  443. };
  444. // 监听APP延迟成功的回调
  445. const handleFinishDelayCheck = async (res?: IPostMessage) => {
  446. console.log("监听延迟检测成功", res);
  447. evaluatingData.socketErrorPop = false;
  448. if (res?.content) {
  449. evaluatingData.checkEnd = true;
  450. state.setting.soundEffect = false;
  451. evaluatingData.tipErjiShow = true;
  452. }
  453. };
  454. // 监听重复评测消息
  455. const handRetryEvaluating = () => {
  456. handleEvaluatResult("tryagain");
  457. };
  458. const earPhonePopShow = computed(() => {
  459. return evaluatingData.earphoneMode && !state.isLoading && !state.hasDriverPop;
  460. });
  461. const tipErjiPopShow = computed(() => {
  462. return evaluatingData.tipErjiShow && !state.isLoading && !state.hasDriverPop;
  463. });
  464. // watch(
  465. // () => state.setting.soundEffect,
  466. // (val) => {
  467. // if (val) {
  468. // headTopData.settingMode = false
  469. // api_startDelayCheck({});
  470. // state.setting.soundEffect = false
  471. // }
  472. // }
  473. // );
  474. // 手动取消评测,需要自动再次评测
  475. // watch(
  476. // () => evaluatingData.needReplayEvaluat,
  477. // (val) => {
  478. // if (val && evaluatingData.oneselfCancleEvaluating) {
  479. // setTimeout(() => {
  480. // startBtnHandle();
  481. // }, 500);
  482. // }
  483. // }
  484. // );
  485. onMounted(async () => {
  486. // 如果打开了延迟检测开关,需要先发送开始检测的消息
  487. const delayData = await api_getDeviceDelay();
  488. console.log('设备的延迟值',delayData.content?.value)
  489. if (delayData && delayData.content?.value <= 0) {
  490. await api_startDelayCheck({});
  491. } else {
  492. evaluatingData.checkEnd = true;
  493. // 点击评测模式进入评测模块的需要检测耳机状态,通过返回按钮进入评测模块的,不检测耳机状态
  494. if (evaluatingData.needCheckErjiStatus) {
  495. checkEarphoneStatus();
  496. }
  497. }
  498. evaluatingData.isDisabledPlayMusic = true;
  499. // handlePerformDetection();
  500. api_cancelDelayCheck(handleCancelDelayCheck);
  501. api_finishDelayCheck(handleFinishDelayCheck);
  502. api_retryEvaluating(handRetryEvaluating);
  503. });
  504. onUnmounted(() => {
  505. api_remove_finishDelayCheck(handleFinishDelayCheck);
  506. api_remove_cancelDelayCheck(handleCancelDelayCheck);
  507. clearTimeout(checkErjiTimer);
  508. checkErjiTimer = null;
  509. });
  510. return () => (
  511. <div>
  512. <div class={styles.operatingBtn}>
  513. {!evaluatingData.startBegin && (
  514. <img
  515. class={[styles.iconBtn, "evaluting-1"]}
  516. src={headImg("icon_play.png")}
  517. onClick={() => {
  518. startBtnHandle();
  519. }}
  520. />
  521. )}
  522. {evaluatingData.startBegin && (
  523. <>
  524. <img class={styles.iconBtn} src={headImg("icon_reset.png")} onClick={() => {
  525. // 校验评测最小间隔时间
  526. const currentTime = +new Date();
  527. // 开始评测和结束评测的间隔时间小于800毫秒,则不处理
  528. if (currentTime - evaluatingData.recordingTime < 800) {
  529. return;
  530. }
  531. handleEvaluatResult("selfCancel")
  532. }} />
  533. <img class={styles.iconBtn} src={headImg("submit.png")} onClick={() => {
  534. // 校验评测最小间隔时间
  535. const currentTime = +new Date();
  536. // 开始评测和结束评测的间隔时间小于800毫秒,则不处理
  537. if (currentTime - evaluatingData.recordingTime < 800) {
  538. return;
  539. }
  540. handleEndBegin()
  541. }} />
  542. </>
  543. )}
  544. </div>
  545. {/* {evaluatingData.soundEffectMode && (
  546. <DelayCheck
  547. onClose={() => {
  548. evaluatingData.soundEffectMode = false;
  549. handlePerformDetection();
  550. }}
  551. onBack={() => handleDelayBack()}
  552. />
  553. )} */}
  554. {/* 倒计时 */}
  555. <Countdown />
  556. {/* 遮罩 */}
  557. {
  558. evaluatingData.isBeginMask && <div class={styles.beginMask}></div>
  559. }
  560. <Popup teleport="body" closeOnClickOverlay={false} class={["popup-custom", "van-scale"]} transition="van-scale" v-model:show={tipErjiPopShow.value}>
  561. <div class={styles.earphoneBox}>
  562. <img class={styles.earphoneBg} src={tipErjiBg} />
  563. <img class={styles.earphoneBtn} src={tipErjiBtn} onClick={() => {
  564. evaluatingData.tipErjiShow = false;
  565. checkEarphoneStatus();
  566. }} />
  567. </div>
  568. </Popup>
  569. <Popup teleport="body" closeOnClickOverlay={false} class={["popup-custom", "van-scale"]} transition="van-scale" v-model:show={earPhonePopShow.value}>
  570. <Earphone
  571. earphoneType={evaluatingData.earPhoneType}
  572. onClose={() => {
  573. evaluatingData.onceErjiPopShow = true;
  574. clearTimeout(checkErjiTimer);
  575. checkErjiTimer = null;
  576. // #11035,可能刚好关闭耳机弹窗的时候,第二次又出现了弹窗
  577. setTimeout(() => {
  578. evaluatingData.earphoneMode = false;
  579. }, 300);
  580. // handlePerformDetection();
  581. checkEarphoneStatus("start");
  582. }}
  583. />
  584. </Popup>
  585. {/* 评测作业,非完整评测不显示评测结果弹窗 */}
  586. {evaluatingData.hideResultModal ? (
  587. <EvaluatResult onClose={handleEvaluatResult} />
  588. ) : (
  589. <Popup teleport="body" closeOnClickOverlay={false} class={["popup-custom", "van-scale"]} transition="van-scale" v-model:show={evaluatingData.resulstMode}>
  590. <EvaluatResult onClose={handleEvaluatResult} />
  591. </Popup>
  592. )}
  593. <Popup teleport="body" closeOnClickOverlay={false} class={["popup-custom", "van-scale"]} transition="van-scale" v-model:show={evaluatModel.evaluatUpdateAudio}>
  594. <EvaluatAudio onClose={hanldeUpdateVideoAndAudio} />
  595. </Popup>
  596. <Popup teleport="body" class={["popup-custom", "van-scale"]} transition="van-scale" v-model:show={evaluatModel.shareMode}>
  597. <EvaluatShare onClose={() => (evaluatModel.shareMode = false)} />
  598. </Popup>
  599. </div>
  600. );
  601. },
  602. });