index.tsx 26 KB

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