music-score/src/page-gym/detail/index.tsx

import queryString from "query-string";
import { Skeleton } from "vant";
import { computed, defineComponent, nextTick, onBeforeMount, onMounted, reactive, Transition, watch } from "vue";
import { useRoute } from "vue-router";
import { formateTimes } from "../../helpers/formateMusic";
import Metronome, { metronomeData } from "../../helpers/metronome";
import state, { isRhythmicExercises } from "../../state";
import { storeData } from "../../store";
import { setGlobalData } from "../../utils";
import AudioList from "../../view/audio-list";
import MusicScore, { resetMusicScore } from "../../view/music-score";
import { sysMusicScoreAccompanimentQueryPage, sysMusicScoreCategoriesQueryTree } from "../api";
import EvaluatModel from "../evaluat-model";
import HeaderTop from "../header-top";
import styles from "./index.module.less";
import { api_setStatusBarVisibility, isSpecialShapedScreen } from "/src/helpers/communication";
import { getQuery } from "/src/utils/queryString";
import Evaluating, { evaluatingData } from "/src/view/evaluating";
import MeasureSpeed from "/src/view/plugins/measure-speed";
import Selection from "/src/view/selection";
import { mappingVoicePart, subjectFingering } from "/src/view/fingering/fingering-config";
import Fingering from "/src/view/fingering";

//特殊教材分类id
const classids = [1, 30, 97]; // [大雅金唐, 竖笛教程, 声部训练]
export default defineComponent({
	name: "music-list",
	setup() {
		const route = useRoute();
		const query: any = {
			...getQuery(),
			...route.query,
		};

		const paramsId = route.params.id as string;
		const detailData = reactive({
			isLoading: true,
			paddingLeft: "",
		});
		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();
		});
		// console.log(route.params, query)
		/** 获取曲谱数据 */
		const getMusicInfo = (res: any) => {
			const index = query["part-index"] ? parseInt(query["part-index"] as string) : 0;
			const musicInfo = res.data[index];
			// console.log("🚀 ~ musicInfo:", musicInfo);
			setState(musicInfo, index);
			setCustom();
			detailData.isLoading = false;
		};
		const getCategorId = (arr: any[], key = "sysMusicScoreCategoriesList"): any[] => {
			const list = [];
			if (!Array.isArray(arr)) return [];
			for (let i = 0; i < arr.length; i++) {
				list.push(arr[i].id);
				if (Array.isArray(arr[i][key])) {
					list.push(...getCategorId(arr[i][key]));
				}
			}
			return list;
		};
		const getIds = (arr: any[], key = "sysMusicScoreCategoriesList"): any[] => {
			if (!Array.isArray(arr)) return [];
			const ids = [];
			for (let i = 0; i < arr.length; i++) {
				if (classids.includes(arr[i].id)) {
					ids.push(arr[i].id, ...getCategorId(arr[i][key]));
				} else {
					ids.push(...getIds(arr[i][key]));
				}
			}
			return ids;
		};
		/** 获取分类数据 */
		const getCategory = (res: any) => {
			console.log("特殊曲谱分类ids:");
			console.log(getIds(res.data).toString());
		};

		const setState = (data: any, index: number) => {
			state.detailId = data.id;
			state.xmlUrl = data.xmlUrl;
			state.partIndex = index;
			state.subjectId = data.subjectId;
			state.categoriesId = data.categoriesId;
			state.categoriesName = data.categoriesName;
			state.enableEvaluation = data.enableEvaluation;
			state.examSongId = data.examSongId + "";
			state.examSongName = data.examSongName;
			// 解析扩展字段
			if (data.extConfigJson) {
				try {
					state.extConfigJson = JSON.parse(data.extConfigJson as string);
				} catch (error) {
					console.error("解析扩展字段错误:", error);
				}
			}
			state.isOpenMetronome = !data.isOpenMetronome;
			state.needTick = data.isOpenMetronome;
			state.isShowFingering = data.isShowFingering;
			state.music = data.isOpenMetronome ? data.mp3Url : data.metronomeMp3Url;
			state.accompany = data.isOpenMetronome ? data.url : data.metronomeUrl;
			state.midiUrl = data.midiUrl;
			state.parentCategoriesId = data.parentCategoriesId;
			state.playMode = data.playMode;
			state.originSpeed = state.speed = data.speed;
			state.track = data.track;
			state.isOpenPrepare = true;

			// 映射声部ID
			state.subjectId = mappingVoicePart(state.subjectId, "GYM");
			// 是否打击乐
			state.isPercussion = state.subjectId == 23 || state.subjectId == 113 || state.subjectId == 121 || isRhythmicExercises();

			// 设置指法
			state.fingeringInfo = subjectFingering(state.subjectId);
		};

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

		onBeforeMount(() => {
			api_setStatusBarVisibility();
		});

		onMounted(() => {
			(window as any).appName = "gym";
			Promise.all([sysMusicScoreCategoriesQueryTree(storeData.platformType === "WEB"), sysMusicScoreAccompanimentQueryPage(paramsId)]).then((values) => {
				getCategory(values[0]);
				getMusicInfo(values[1]);
			});
		});

		/** 渲染完成 */
		const handleRendered = (osmd: any) => {
			state.musicRendered = true;
			state.osmd = osmd;
			state.times = formateTimes(osmd);
			console.log("🚀 ~ state.times:", state.times);
			try {
				metronomeData.metro = new Metronome();
				metronomeData.metro.init(state.times);
			} catch (error) {}
		};
		/** 指法配置 */
		const fingerConfig = computed<any>(() => {
			if (state.setting.displayFingering && state.fingeringInfo?.name) {
				if (state.fingeringInfo.direction === "transverse") {
					return {
						container: {
							paddingBottom: state.fingeringInfo.height,
						},
						fingerBox: {
							height: state.fingeringInfo.height,
						},
					};
				} else {
					return {
						container: {
							paddingRight: state.fingeringInfo.width,
						},
						fingerBox: {
							position: "absolute",
							width: state.fingeringInfo.width,
							height: "100%",
							right: 0,
							top: 0,
						},
					};
				}
			}
			return {
				container: {},
				fingerBox: {},
			};
		});

		watch(
			() => state.setting.displayFingering,
			() => {
				if (state.fingeringInfo.direction === "vertical") {
					if (state.setting.displayFingering) {
						document.getElementById("musicAndSelection")?.style.removeProperty("--music-zoom");
					} else {
						nextTick(() => {
							resetMusicScore();
						});
					}
				}
			}
		);
		return () => (
			<div class={[styles.detail, state.setting.camera && styles.opencamera]} style={{ paddingLeft: detailData.paddingLeft }}>
				{!state.musicRendered && (
					<div class={styles.skeleton}>
						<Skeleton class={styles.skeleton} row={8} />
					</div>
				)}
				<div class={styles.headHeight}>
					<Transition name="van-slide-down">{state.musicRendered && <HeaderTop />}</Transition>
				</div>
				<div
					style={{ ...fingerConfig.value.container }}
					class={[styles.container, state.setting.eyeProtection && "eyeProtection", !state.setting.displayCursor && "hideCursor"]}
				>
					{/* 曲谱渲染 */}
					{!detailData.isLoading && <MusicScore onRendered={handleRendered} />}
					{/* 播放 */}
					{!detailData.isLoading && <AudioList />}
					{/* 评测 */}
					{state.modeType === "evaluating" && (
						<>
							<Evaluating />
							{evaluatingData.rendered && <EvaluatModel />}
						</>
					)}
					{/* 指法 */}
					{state.setting.displayFingering && state.fingeringInfo?.name && (
						<div style={{ ...fingerConfig.value.fingerBox }}>
							<Fingering />
						</div>
					)}
				</div>

				{/* 公用的插件 */}
				<div class={styles.plugins}>
					{state.musicRendered && (
						<>
							<MeasureSpeed />
						</>
					)}
				</div>
			</div>
		);
	},
});