music-score/src/report-share/orchestra-share/index.tsx

import { Skeleton } from "vant";
import { defineComponent, onBeforeMount, onBeforeUnmount, onMounted, reactive, Transition } from "vue";
import { formateTimes } from "../../helpers/formateMusic";
import state, { isRhythmicExercises } from "../../state";
import { setGlobalData } from "../../utils";
import MusicScore, { resetMusicScore } from "../../view/music-score";
import styles from "./index.module.less";
import { api_cloudLoading, api_setStatusBarVisibility, isSpecialShapedScreen } from "/src/helpers/communication";
import { getQuery } from "/src/utils/queryString";
import { mappingVoicePart, subjectFingering } from "/src/view/fingering/fingering-config";
import { musicPracticeRecordGetLastEvaluationMusicalNotesPlayStats, sysMusicScoreAccompanimentQueryPage } from "./api";
import ShareTop from "./share-top";
import Note from "./note";
import { addMeasureScore } from "/src/view/evaluating";

const colorsClass: any = {
	RIGHT: styles.right,
	WRONG: styles.wrong,
	NOT_PLAY: styles.notPlay,
	CADENCE_WRONG: styles.cadence_wrong,
	INTONATION_WRONG: styles.intonation_wrong,
	INTEGRITY_WRONG: styles.integrity_wrong,
};

export default defineComponent({
	name: "music-list",
	setup() {
		const query: any = getQuery();
		const scoreData: any = reactive({
			videoFilePath: "", // 回放视频路径
			cadence: 0,
			integrity: 0,
			intonation: 0,
			score: 0,
			heardLevel: "",
		});

		const detailData = reactive({
			isLoading: true,
			paddingLeft: "",
			headerHide: false,
			musicalNotesPlayStats: [] as any[],
			userMeasureScore: {} as any,
		});
		const getAPPData = async () => {
			const screenData = await isSpecialShapedScreen();
			if (screenData?.content) {
				// console.log("🚀 ~ screenData:", screenData.content);
				const { isSpecialShapedScreen, notchHeight } = screenData.content;
				if (isSpecialShapedScreen) {
					detailData.paddingLeft = 25 + "px";
				}
			}
		};
		onBeforeMount(() => {
			getAPPData();
			api_setStatusBarVisibility();
		});
		// console.log(route.params, query)
		/** 获取曲谱数据 */
		const getMusicInfo = (res: any) => {
			const index = state.partIndex;
			const musicInfo = {
				...res.data,
				...res.data.background[index],
			};
			// console.log("🚀 ~ musicInfo:", musicInfo);
			setState(musicInfo, index);
			setCustom();
			detailData.isLoading = false;
		};

		const setState = (data: any, index: number) => {
			// console.log("🚀 ~ data:", data)
			state.scrollContainer = "scrollContainer";
			state.detailId = data.id;
			state.xmlUrl = data.xmlFileUrl;
			state.partIndex = index;
			state.subjectId = data.musicSubject;
			state.categoriesId = data.categoriesId;
			state.categoriesName = data.musicTagNames;
			state.enableEvaluation = data.canEvaluate ? true : false;
			state.examSongId = data.id + "";
			state.examSongName = data.musicSheetName;
			// 解析扩展字段
			if (data.extConfigJson) {
				try {
					state.extConfigJson = JSON.parse(data.extConfigJson as string);
				} catch (error) {
					console.error("解析扩展字段错误:", error);
				}
			}
			state.isOpenMetronome = data.mp3Type === "MP3_METRONOME" ? true : false;
			state.needTick = data.isOpenMetronome;
			state.isShowFingering = data.showFingering ? true : false;
			state.music = data.audioFileUrl;
			state.accompany = data.metronomeUrl || data.metronomeUrl;
			state.midiUrl = data.midiUrl;
			state.parentCategoriesId = data.musicTag;
			state.playMode = data.audioType === "MP3" ? "mp3" : "midi";
			state.originSpeed = state.speed = data.speed;
			state.track = data.track;
			state.enableNotation = data.notation ? true : false;

			// 映射声部ID
			state.subjectId = mappingVoicePart(state.subjectId as any, "ORCHESTRA");
			// console.log("🚀 ~ state.subjectId:", state.subjectId);
			// 是否打击乐
			state.isPercussion = state.subjectId == 23 || state.subjectId == 113 || state.subjectId == 121 || isRhythmicExercises();

			// 设置指法
			state.fingeringInfo = subjectFingering(state.subjectId);
			// console.log("🚀 ~ state.fingeringInfo:", state.fingeringInfo, state.subjectId, state.track)
			// state.isOpenPrepare = true
		};

		const setCustom = () => {
			if (state.extConfigJson.multitrack) {
				setGlobalData("multitrack", state.extConfigJson.multitrack);
			}
		};

		onMounted(async () => {
			(window as any).appName = "colexiu";
			const res = await musicPracticeRecordGetLastEvaluationMusicalNotesPlayStats(query.id);
			state.partIndex = Number(res?.data?.partIndex);
			detailData.musicalNotesPlayStats = res?.data?.musicalNotesPlayStats?.notesData || [];
			detailData.userMeasureScore = res?.data?.userMeasureScore || {};
      for(let key in scoreData){
        scoreData[key] = res?.data?.[key];
      }
			Promise.all([sysMusicScoreAccompanimentQueryPage(res?.data?.musicalNotesPlayStats?.examSongId)]).then((values) => {
				getMusicInfo(values[0]);
			});
		});

		const setPathColor = () => {
			for (const note of detailData.musicalNotesPlayStats) {
				const active = state.times[note.musicalNotesIndex];
				const svgEl = document.getElementById("vf-" + active.id);
				svgEl?.classList.add(colorsClass[note.musicalErrorType]);
			}
		};
		const setMearureColor = () => {
			for (let key in detailData.userMeasureScore) {
				addMeasureScore(detailData.userMeasureScore[key], false);
			}
		};

		/** 渲染完成 */
		const handleRendered = (osmd: any) => {
			state.musicRendered = true;
			state.osmd = osmd;
			state.times = formateTimes(osmd);
			console.log("🚀 ~ state.times:", state.times);
			setPathColor();
			setMearureColor();
			api_cloudLoading();
		};
		onMounted(() => {
			window.addEventListener("resize", resetMusicScore);
		});
		onBeforeUnmount(() => {
			window.removeEventListener("resize", resetMusicScore);
		});

		return () => (
			<div class={[styles.shareBox, styles.detail, state.setting.eyeProtection && "eyeProtection"]} style={{ paddingLeft: detailData.paddingLeft }}>
				{!state.musicRendered && (
					<div class={styles.skeleton}>
						<Skeleton class={styles.skeleton} row={8} />
					</div>
				)}
				<div class={[styles.headHeight, detailData.headerHide && styles.headHide]} onClick={(e: Event) => e.stopPropagation()}>
					<Transition name="van-slide-down">{state.musicRendered && <ShareTop scoreData={scoreData} />}</Transition>
				</div>
				<div id="scrollContainer" class={[styles.container, !state.setting.displayCursor && "hideCursor"]}>
					<div class={styles.demos}>
						<div>
							<Note fill="#01C1B5" />
							<span>演奏正确</span>
						</div>
						<div>
							<Note fill="#067DD7" />
							<span>节奏错误</span>
						</div>
						{!state.isPercussion ? (
							<>
								<div>
									<Note fill="#FFAB25" />
									<span>音准错误</span>
								</div>
								<div>
									<Note fill="#CC75FF" />
									<span>完成度不足</span>
								</div>
							</>
						) : null}
						<div>
							<Note fill="#000" />
							<span>未演奏</span>
						</div>
					</div>
					{/* 曲谱渲染 */}
					{!detailData.isLoading && <MusicScore onRendered={handleRendered} />}
				</div>
			</div>
		);
	},
});