|
@@ -5,11 +5,7 @@ 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 { 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 { api_musicPracticeRecordDetail, sysMusicScoreAccompanimentQueryPage } from "../api";
|
|
@@ -17,202 +13,185 @@ import ShareTop from "./component/share-top";
|
|
|
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,
|
|
|
+ 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 = reactive({
|
|
|
- videoFilePath: "", // 回放视频路径
|
|
|
- cadence: 0,
|
|
|
- integrity: 0,
|
|
|
- intonation: 0,
|
|
|
- score: 0,
|
|
|
- heardLevel: "",
|
|
|
- });
|
|
|
+ name: "music-list",
|
|
|
+ setup() {
|
|
|
+ const query: any = getQuery();
|
|
|
+ const scoreData = 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) {
|
|
|
- const { isSpecialShapedScreen, notchHeight } = screenData.content;
|
|
|
- if (isSpecialShapedScreen) {
|
|
|
- detailData.paddingLeft = 25 + "px";
|
|
|
- }
|
|
|
- }
|
|
|
- // 普通webview 没有获取异性屏的方法
|
|
|
- detailData.paddingLeft = 20 + "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 detailData = reactive({
|
|
|
+ isLoading: true,
|
|
|
+ paddingLeft: "",
|
|
|
+ headerHide: false,
|
|
|
+ musicalNotesPlayStats: [] as any[],
|
|
|
+ userMeasureScore: {} as any,
|
|
|
+ });
|
|
|
+ const getAPPData = async () => {
|
|
|
+ const screenData = await isSpecialShapedScreen();
|
|
|
+ if (screenData?.content) {
|
|
|
+ const { isSpecialShapedScreen, notchHeight } = screenData.content;
|
|
|
+ if (isSpecialShapedScreen) {
|
|
|
+ detailData.paddingLeft = 25 + "px";
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 普通webview 没有获取异性屏的方法
|
|
|
+ detailData.paddingLeft = 20 + "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;
|
|
|
+ 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();
|
|
|
+ // 映射声部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
|
|
|
- };
|
|
|
+ // 设置指法
|
|
|
+ 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);
|
|
|
- }
|
|
|
- };
|
|
|
+ const setCustom = () => {
|
|
|
+ if (state.extConfigJson.multitrack) {
|
|
|
+ setGlobalData("multitrack", state.extConfigJson.multitrack);
|
|
|
+ }
|
|
|
+ };
|
|
|
|
|
|
- onMounted(async () => {
|
|
|
- const res = await api_musicPracticeRecordDetail(query.id);
|
|
|
- state.partIndex = Number(res?.data?.partIndex);
|
|
|
- let resultData = {} as any;
|
|
|
- try {
|
|
|
- resultData = JSON.parse(res?.data?.scoreData);
|
|
|
- } catch (error) {
|
|
|
- console.error("解析评测结果:", error);
|
|
|
- }
|
|
|
- // console.log("🚀 ~ resultData:", resultData);
|
|
|
- detailData.musicalNotesPlayStats = resultData.musicalNotesPlayStats?.notesData || [];
|
|
|
- detailData.userMeasureScore = resultData.userMeasureScore || {};
|
|
|
+ onMounted(async () => {
|
|
|
+ const res = await api_musicPracticeRecordDetail(query.id);
|
|
|
+ state.partIndex = Number(res?.data?.partIndex);
|
|
|
+ let resultData = {} as any;
|
|
|
+ try {
|
|
|
+ resultData = JSON.parse(res?.data?.scoreData);
|
|
|
+ } catch (error) {
|
|
|
+ console.error("解析评测结果:", error);
|
|
|
+ }
|
|
|
+ // console.log("🚀 ~ resultData:", resultData);
|
|
|
+ detailData.musicalNotesPlayStats = resultData.musicalNotesPlayStats?.notesData || [];
|
|
|
+ detailData.userMeasureScore = resultData.userMeasureScore || {};
|
|
|
|
|
|
- scoreData.heardLevel = res.data?.heardLevel;
|
|
|
- scoreData.cadence = res.data?.cadence;
|
|
|
- scoreData.integrity = res.data?.integrity;
|
|
|
- scoreData.intonation = res.data?.intonation;
|
|
|
- scoreData.score = res.data?.score;
|
|
|
- scoreData.videoFilePath = res.data?.videoFilePath || res.data?.recordFilePath;
|
|
|
- Promise.all([
|
|
|
- sysMusicScoreAccompanimentQueryPage(resultData.musicalNotesPlayStats?.examSongId),
|
|
|
- ]).then((values) => {
|
|
|
- getMusicInfo(values[0]);
|
|
|
- });
|
|
|
- });
|
|
|
+ scoreData.heardLevel = res.data?.heardLevel;
|
|
|
+ scoreData.cadence = res.data?.cadence;
|
|
|
+ scoreData.integrity = res.data?.integrity;
|
|
|
+ scoreData.intonation = res.data?.intonation;
|
|
|
+ scoreData.score = res.data?.score;
|
|
|
+ scoreData.videoFilePath = res.data?.videoFilePath || res.data?.recordFilePath;
|
|
|
+ Promise.all([sysMusicScoreAccompanimentQueryPage(resultData.musicalNotesPlayStats?.examSongId)]).then((values) => {
|
|
|
+ getMusicInfo(values[0]);
|
|
|
+ });
|
|
|
+ });
|
|
|
|
|
|
- const setPathColor = () => {
|
|
|
- for (const note of detailData.musicalNotesPlayStats) {
|
|
|
- const active = state.times[note.musicalNotesIndex];
|
|
|
- const svgEl = active?.id ? document.getElementById("vf-" + active?.id) : null;
|
|
|
- svgEl?.classList.add(colorsClass[note.musicalErrorType]);
|
|
|
- }
|
|
|
- };
|
|
|
- const setMearureColor = () => {
|
|
|
- for (let key in detailData.userMeasureScore) {
|
|
|
- addMeasureScore(detailData.userMeasureScore[key], false);
|
|
|
- }
|
|
|
- };
|
|
|
+ const setPathColor = () => {
|
|
|
+ for (const note of detailData.musicalNotesPlayStats) {
|
|
|
+ const active = state.times[note.musicalNotesIndex];
|
|
|
+ const svgEl = active?.id ? document.getElementById("vf-" + active?.id) : null;
|
|
|
+ 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);
|
|
|
- });
|
|
|
+ /** 渲染完成 */
|
|
|
+ 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.detail, state.setting.eyeProtection && "eyeProtection", styles.shareBox]}
|
|
|
- style={{ paddingLeft: detailData.paddingLeft }}
|
|
|
- >
|
|
|
- <Transition name="van-fade">
|
|
|
- {!state.musicRendered && (
|
|
|
- <div class={styles.skeleton}>
|
|
|
- <Skeleton class={styles.skeleton} row={8} />
|
|
|
- </div>
|
|
|
- )}
|
|
|
- </Transition>
|
|
|
- <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.musicName}>{state.examSongName}</div>
|
|
|
- {/* 曲谱渲染 */}
|
|
|
- {!detailData.isLoading && <MusicScore onRendered={handleRendered} />}
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- );
|
|
|
- },
|
|
|
+ return () => (
|
|
|
+ <div class={[styles.detail, state.setting.eyeProtection && "eyeProtection", styles.shareBox]} style={{ paddingLeft: detailData.paddingLeft }}>
|
|
|
+ <Transition name="van-fade">
|
|
|
+ {!state.musicRendered && (
|
|
|
+ <div class={styles.skeleton}>
|
|
|
+ <Skeleton class={styles.skeleton} row={8} />
|
|
|
+ </div>
|
|
|
+ )}
|
|
|
+ </Transition>
|
|
|
+ <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.musicName}>{state.examSongName}</div>
|
|
|
+ {/* 曲谱渲染 */}
|
|
|
+ {!detailData.isLoading && <MusicScore onRendered={handleRendered} />}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ );
|
|
|
+ },
|
|
|
});
|