|
|
@@ -5,15 +5,11 @@ import state, { isRhythmicExercises, getMusicDetail, EnumMusicRenderType } from
|
|
|
import { setGlobalData } from "../../utils";
|
|
|
import MusicScore 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";
|
|
|
-import { getMusicSheetDetail } from "/src/utils/baseApi"
|
|
|
+import { getMusicSheetDetail } from "/src/utils/baseApi";
|
|
|
import ShareTop from "./component/share-top";
|
|
|
import { addMeasureScore } from "/src/view/evaluating";
|
|
|
import TopArrow from "./component/note/topArrow";
|
|
|
@@ -22,16 +18,15 @@ import LeftArrow from "./component/note/leftArrow";
|
|
|
import RightArrow from "./component/note/rightArrow";
|
|
|
|
|
|
const colorsClass: any = {
|
|
|
- RIGHT: styles.right, // 正确
|
|
|
- WRONG: styles.wrong, // 错误
|
|
|
- NOT_PLAYED: styles.notPlay, // 未演奏
|
|
|
- EARLY: styles.cadence_fast, // 节奏快
|
|
|
- LATE: styles.cadence_slow, // 节奏慢
|
|
|
- HIGH: styles.intonation_high, // 音准高
|
|
|
- LOW: styles.intonation_low, // 音准低
|
|
|
- DURATION_INSUFFICIENT: styles.integrity_wrong // 完整性（时值）不足
|
|
|
-}
|
|
|
-
|
|
|
+ RIGHT: styles.right, // 正确
|
|
|
+ WRONG: styles.wrong, // 错误
|
|
|
+ NOT_PLAYED: styles.notPlay, // 未演奏
|
|
|
+ EARLY: styles.cadence_fast, // 节奏快
|
|
|
+ LATE: styles.cadence_slow, // 节奏慢
|
|
|
+ HIGH: styles.intonation_high, // 音准高
|
|
|
+ LOW: styles.intonation_low, // 音准低
|
|
|
+ DURATION_INSUFFICIENT: styles.integrity_wrong, // 完整性（时值）不足
|
|
|
+};
|
|
|
|
|
|
// const colorsClass: any = {
|
|
|
// /** 音准 */
|
|
|
@@ -65,393 +60,378 @@ const colorsClass: any = {
|
|
|
// }
|
|
|
|
|
|
export default defineComponent({
|
|
|
- name: "music-list",
|
|
|
- setup() {
|
|
|
- const query: any = getQuery();
|
|
|
- const useedid = ref<string[]>([])
|
|
|
- const scoreData = reactive({
|
|
|
- videoFilePath: "", // 回放视频路径
|
|
|
- cadence: 0,
|
|
|
- integrity: 0,
|
|
|
- intonation: 0,
|
|
|
- score: 0,
|
|
|
- heardLevel: "",
|
|
|
- itemType: "intonation",
|
|
|
- musicType: 'staff',
|
|
|
- });
|
|
|
+ name: "music-list",
|
|
|
+ setup() {
|
|
|
+ const query: any = getQuery();
|
|
|
+ const useedid = ref<string[]>([]);
|
|
|
+ const scoreData = reactive({
|
|
|
+ videoFilePath: "", // 回放视频路径
|
|
|
+ cadence: 0,
|
|
|
+ integrity: 0,
|
|
|
+ intonation: 0,
|
|
|
+ score: 0,
|
|
|
+ heardLevel: "",
|
|
|
+ itemType: "intonation",
|
|
|
+ musicType: "staff",
|
|
|
+ });
|
|
|
+
|
|
|
+ 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;
|
|
|
+
|
|
|
+ // 映射声部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);
|
|
|
+ }
|
|
|
+ };
|
|
|
|
|
|
- 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;
|
|
|
- };
|
|
|
+ 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);
|
|
|
+ // @ts-ignore
|
|
|
+ // resultData.musicalNotesPlayStats?.notesData.forEach((item) => item.rhythmicAssessment.result = 'EARLY')
|
|
|
+ detailData.musicalNotesPlayStats = resultData.musicalNotesPlayStats?.notesData || [];
|
|
|
+ detailData.userMeasureScore = resultData.userMeasureScore || {};
|
|
|
|
|
|
- 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;
|
|
|
+ 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;
|
|
|
+ state.isEvaluatReport = true;
|
|
|
+ await getMusicDetail(resultData.musicalNotesPlayStats?.examSongId);
|
|
|
+ // 从练习记录进入评测报告，默认显示五线谱
|
|
|
+ // if (!query.musicRenderType) {
|
|
|
+ // state.musicRenderType = EnumMusicRenderType.staff
|
|
|
+ // }
|
|
|
+ // 评测报告展示什么类型的谱面
|
|
|
+ scoreData.musicType = query.musicRenderType ? query.musicRenderType : resultData.musicType ? resultData.musicType : state.musicRenderType;
|
|
|
+ detailData.isLoading = false;
|
|
|
+ // Promise.all([
|
|
|
+ // getMusicSheetDetail(resultData.musicalNotesPlayStats?.examSongId),
|
|
|
+ // ]).then((values) => {
|
|
|
+ // getMusicInfo(values[0]);
|
|
|
+ // });
|
|
|
+ });
|
|
|
|
|
|
- // 映射声部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();
|
|
|
+ const getOffsetPosition = (type: keyof typeof colorsClass): string => {
|
|
|
+ // 五线谱
|
|
|
+ if (scoreData.musicType === "staff") {
|
|
|
+ switch (type) {
|
|
|
+ case "EARLY":
|
|
|
+ return "translateX(-3px)";
|
|
|
+ case "LATE":
|
|
|
+ return "translateX(3px)";
|
|
|
+ case "HIGH":
|
|
|
+ return "translateY(-2px)";
|
|
|
+ case "LOW":
|
|
|
+ return "translateY(2px)";
|
|
|
+ default:
|
|
|
+ return "";
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ switch (type) {
|
|
|
+ case "EARLY":
|
|
|
+ return "translateX(-3px)";
|
|
|
+ case "LATE":
|
|
|
+ return "translateX(3px)";
|
|
|
+ case "HIGH":
|
|
|
+ return "translateY(-2px)";
|
|
|
+ case "LOW":
|
|
|
+ return "translateY(-10px)";
|
|
|
+ default:
|
|
|
+ return "";
|
|
|
+ }
|
|
|
+ }
|
|
|
+ };
|
|
|
|
|
|
- // 设置指法
|
|
|
- state.fingeringInfo = subjectFingering(state.subjectId);
|
|
|
- // console.log("🚀 ~ state.fingeringInfo:", state.fingeringInfo, state.subjectId, state.track)
|
|
|
- // state.isOpenPrepare = true
|
|
|
- };
|
|
|
+ const filterNotes = () => {
|
|
|
+ let include = ["RIGHT", "WRONG", "NOT_PLAYED"];
|
|
|
+ if (scoreData.itemType === "intonation") {
|
|
|
+ // 音准
|
|
|
+ include.push(...["HIGH", "LOW", "DURATION_INSUFFICIENT"]);
|
|
|
+ } else if (scoreData.itemType === "cadence") {
|
|
|
+ // 节奏
|
|
|
+ include.push(...["EARLY", "LATE"]);
|
|
|
+ } else if (scoreData.itemType === "integrity") {
|
|
|
+ // 完整性
|
|
|
+ include = ["DURATION_INSUFFICIENT", "RIGHT", "NOT_PLAYED"];
|
|
|
+ }
|
|
|
+ if (scoreData.itemType === "cadence") {
|
|
|
+ return detailData.musicalNotesPlayStats.filter((item: any) => include.includes(item.rhythmicAssessment.result));
|
|
|
+ } else {
|
|
|
+ return detailData.musicalNotesPlayStats.filter((item: any) => {
|
|
|
+ let result = item.pitchAssessment.result;
|
|
|
+ if (scoreData.itemType === "integrity") {
|
|
|
+ result = result === "HIGH" || result === "LOW" || result === "WRONG" ? "RIGHT" : result;
|
|
|
+ }
|
|
|
+ return include.includes(result);
|
|
|
+ });
|
|
|
+ }
|
|
|
+ };
|
|
|
|
|
|
- const setCustom = () => {
|
|
|
- if (state.extConfigJson.multitrack) {
|
|
|
- setGlobalData("multitrack", state.extConfigJson.multitrack);
|
|
|
- }
|
|
|
- };
|
|
|
+ const setViewColor = () => {
|
|
|
+ clearViewColor();
|
|
|
+ const notes = filterNotes();
|
|
|
+ // console.log(1111,notes)
|
|
|
+ for (const note of notes) {
|
|
|
+ const active = state.times[note.index];
|
|
|
+ setTimeout(() => {
|
|
|
+ if (useedid.value.includes(active.id)) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ useedid.value.push(active.id);
|
|
|
+ const svgEl = document.getElementById("vf-" + active.id);
|
|
|
+ const stemEl = document.getElementById("vf-" + active.id + "-stem");
|
|
|
+ let errType = scoreData.itemType === "cadence" ? note.rhythmicAssessment.result : note.pitchAssessment.result;
|
|
|
+ // console.log(1111222,errType)
|
|
|
+ const isNeedCopyElement = scoreData.itemType === "integrity" ? false : ["HIGH", "LOW", "EARLY", "LATE"].includes(errType);
|
|
|
+ if (scoreData.itemType === "integrity") {
|
|
|
+ errType = errType = note.pitchAssessment.result === "HIGH" || note.pitchAssessment.result === "LOW" || note.pitchAssessment.result === "WRONG" ? "RIGHT" : errType;
|
|
|
+ }
|
|
|
+ stemEl?.classList.add(colorsClass[errType]);
|
|
|
+ svgEl?.classList.add(colorsClass[errType]);
|
|
|
+ // console.log(123456,'添加颜色',errType)
|
|
|
+ // 评测过的音符，需要给小节添加背景色
|
|
|
+ if (errType !== "NOT_PLAYED") {
|
|
|
+ const staveNote = svgEl?.parentNode?.parentNode?.querySelector(".vf-stave");
|
|
|
+ if (staveNote) {
|
|
|
+ staveNote.querySelector(".vf-custom-bg")?.setAttribute("fill", "#132D4C");
|
|
|
+ staveNote.querySelector(".vf-custom-bot")?.setAttribute("fill", "#040D1E");
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (svgEl && isNeedCopyElement) {
|
|
|
+ stemEl?.classList.remove(colorsClass[errType]);
|
|
|
+ svgEl?.classList.remove(colorsClass[errType]);
|
|
|
+ let copySvg: any = null;
|
|
|
+ // 五线谱
|
|
|
+ if (scoreData.musicType === "staff") {
|
|
|
+ stemEl?.classList.add(colorsClass.RIGHT);
|
|
|
+ svgEl?.classList.add(colorsClass.RIGHT);
|
|
|
+ copySvg = svgEl.querySelector(".vf-notehead")!.cloneNode(true) as SVGSVGElement;
|
|
|
+ } else {
|
|
|
+ //copySvg = svgEl.querySelector('.vf-numbered-note-head')!.cloneNode(true) as SVGSVGElement
|
|
|
|
|
|
- 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);
|
|
|
- // @ts-ignore
|
|
|
- // resultData.musicalNotesPlayStats?.notesData.forEach((item) => item.rhythmicAssessment.result = 'EARLY')
|
|
|
- detailData.musicalNotesPlayStats = resultData.musicalNotesPlayStats?.notesData || [];
|
|
|
- detailData.userMeasureScore = resultData.userMeasureScore || {};
|
|
|
+ if (isNeedCopyElement) {
|
|
|
+ svgEl?.classList.add(styles.inaccuracy);
|
|
|
+ const targetId = errType === "HIGH" ? "topSvg" : errType === "LOW" ? "bottomSvg" : errType === "EARLY" ? "leftSvg" : errType === "LATE" ? "rightSvg" : "";
|
|
|
+ copySvg = document.getElementById(targetId)!.cloneNode(true) as SVGSVGElement;
|
|
|
+ const { width, height } = svgEl.getBoundingClientRect() || {};
|
|
|
+ // @ts-ignore
|
|
|
+ let { x, y } = svgEl?.getBBox() || {};
|
|
|
+ x = errType === "HIGH" ? x + (width - 15) / 2 + 2 : errType === "LOW" ? x + (width - 15) / 2 + 2 : errType === "EARLY" ? x - Math.abs((width - 15) / 2) - 12 : errType === "LATE" ? x + width + 6 : x;
|
|
|
+ y = errType === "HIGH" ? y - Math.abs((height - 10) / 2) - 10 : errType === "LOW" ? y + height + 8 : errType === "EARLY" ? y + (height - 10) / 2 : errType === "LATE" ? y + (height - 10) / 2 : y;
|
|
|
+ copySvg.setAttribute("x", x);
|
|
|
+ copySvg.setAttribute("y", y);
|
|
|
+ }
|
|
|
|
|
|
- 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;
|
|
|
- state.isEvaluatReport = true;
|
|
|
- await getMusicDetail(resultData.musicalNotesPlayStats?.examSongId);
|
|
|
- // 从练习记录进入评测报告，默认显示五线谱
|
|
|
- // if (!query.musicRenderType) {
|
|
|
- // state.musicRenderType = EnumMusicRenderType.staff
|
|
|
- // }
|
|
|
- // 评测报告展示什么类型的谱面
|
|
|
- scoreData.musicType = query.musicRenderType ? query.musicRenderType : resultData.musicType ? resultData.musicType : state.musicRenderType;
|
|
|
- detailData.isLoading = false;
|
|
|
- // Promise.all([
|
|
|
- // getMusicSheetDetail(resultData.musicalNotesPlayStats?.examSongId),
|
|
|
- // ]).then((values) => {
|
|
|
- // getMusicInfo(values[0]);
|
|
|
- // });
|
|
|
- });
|
|
|
+ // console.log(x,y,copySvg.getBoundingClientRect())
|
|
|
+ // const rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
|
|
|
+ // rect.setAttribute("x", 0 +'px');
|
|
|
+ // rect.setAttribute("y", 0+'px');
|
|
|
+ // rect.setAttribute("width", `50`);
|
|
|
+ // rect.setAttribute("height", `50`);
|
|
|
+ // rect.setAttribute("fill", "#FF4444");
|
|
|
+ // svgEl.prepend(rect);
|
|
|
+ }
|
|
|
+ if (scoreData.musicType === "staff") {
|
|
|
+ copySvg.style.transform = getOffsetPosition(errType);
|
|
|
+ //svgEl.style.opacity = '.7'
|
|
|
+ if (stemEl) {
|
|
|
+ //stemEl.style.opacity = '.7'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ copySvg.id = "vf-" + active.id + "-copy";
|
|
|
+ copySvg?.classList.add(colorsClass[errType]);
|
|
|
+ // stemEl?.classList.add(colorsClass.RIGHT)
|
|
|
+ // @ts-ignore
|
|
|
+ state.osmd?.container.querySelector("svg")!.insertAdjacentElement("afterbegin", copySvg);
|
|
|
+ // svgEl?.parentElement?.appendChild(copySvg)
|
|
|
+ }
|
|
|
+ }, 300);
|
|
|
+ }
|
|
|
+ };
|
|
|
|
|
|
+ const removeClass = (el?: HTMLElement | null) => {
|
|
|
+ if (!el) return;
|
|
|
+ const classList = el.classList.values();
|
|
|
+ for (const val of classList) {
|
|
|
+ if (val?.indexOf("vf-") !== 0) {
|
|
|
+ el.classList.remove(val);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ };
|
|
|
|
|
|
- const getOffsetPosition = (type: keyof typeof colorsClass): string => {
|
|
|
- // 五线谱
|
|
|
- if (scoreData.musicType === 'staff') {
|
|
|
- switch (type) {
|
|
|
- case 'EARLY':
|
|
|
- return 'translateX(-3px)'
|
|
|
- case 'LATE':
|
|
|
- return 'translateX(3px)'
|
|
|
- case 'HIGH':
|
|
|
- return 'translateY(-2px)'
|
|
|
- case 'LOW':
|
|
|
- return 'translateY(2px)'
|
|
|
- default:
|
|
|
- return ''
|
|
|
- }
|
|
|
- } else {
|
|
|
- switch (type) {
|
|
|
- case 'EARLY':
|
|
|
- return 'translateX(-3px)'
|
|
|
- case 'LATE':
|
|
|
- return 'translateX(3px)'
|
|
|
- case 'HIGH':
|
|
|
- return 'translateY(-2px)'
|
|
|
- case 'LOW':
|
|
|
- return 'translateY(-10px)'
|
|
|
- default:
|
|
|
- return ''
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- const filterNotes = () => {
|
|
|
- let include = ['RIGHT', 'WRONG', 'NOT_PLAYED']
|
|
|
- if (scoreData.itemType === 'intonation') { // 音准
|
|
|
- include.push(...['HIGH', 'LOW', 'DURATION_INSUFFICIENT'])
|
|
|
- } else if (scoreData.itemType === 'cadence') { // 节奏
|
|
|
- include.push(...['EARLY', 'LATE'])
|
|
|
- } else if (scoreData.itemType === 'integrity') { // 完整性
|
|
|
- include = ['DURATION_INSUFFICIENT', 'RIGHT', 'NOT_PLAYED']
|
|
|
- }
|
|
|
- if (scoreData.itemType === 'cadence') {
|
|
|
- return detailData.musicalNotesPlayStats.filter((item: any) => include.includes(item.rhythmicAssessment.result))
|
|
|
- } else {
|
|
|
- return detailData.musicalNotesPlayStats.filter((item: any) => {
|
|
|
- let result = item.pitchAssessment.result
|
|
|
- if (scoreData.itemType === 'integrity') {
|
|
|
- result = (result === 'HIGH' || result === 'LOW' || result === 'WRONG') ? 'RIGHT' : result
|
|
|
- }
|
|
|
- return include.includes(result)
|
|
|
- })
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- const setViewColor = () => {
|
|
|
- clearViewColor()
|
|
|
- const notes = filterNotes()
|
|
|
- // console.log(1111,notes)
|
|
|
- for (const note of notes) {
|
|
|
- const active = state.times[note.index]
|
|
|
- setTimeout(() => {
|
|
|
- if (useedid.value.includes(active.id)) {
|
|
|
- return
|
|
|
- }
|
|
|
- useedid.value.push(active.id)
|
|
|
- const svgEl = document.getElementById('vf-' + active.id)
|
|
|
- const stemEl = document.getElementById('vf-' + active.id + '-stem')
|
|
|
- let errType = scoreData.itemType === 'cadence' ? note.rhythmicAssessment.result : note.pitchAssessment.result
|
|
|
- // console.log(1111222,errType)
|
|
|
- const isNeedCopyElement = scoreData.itemType === 'integrity' ? false : ['HIGH', 'LOW', 'EARLY', 'LATE'].includes(
|
|
|
- errType
|
|
|
- )
|
|
|
- if (scoreData.itemType === 'integrity') {
|
|
|
- errType = errType = (note.pitchAssessment.result === 'HIGH' || note.pitchAssessment.result === 'LOW' || note.pitchAssessment.result === 'WRONG') ? 'RIGHT' : errType
|
|
|
- }
|
|
|
- stemEl?.classList.add(colorsClass[errType])
|
|
|
- svgEl?.classList.add(colorsClass[errType])
|
|
|
- // console.log(123456,'添加颜色',errType)
|
|
|
- // 评测过的音符，需要给小节添加背景色
|
|
|
- if (errType !== 'NOT_PLAYED') {
|
|
|
- const staveNote = svgEl?.parentNode?.parentNode?.querySelector('.vf-stave')
|
|
|
- if (staveNote) {
|
|
|
- staveNote.querySelector('.vf-custom-bg')?.setAttribute("fill", "#132D4C")
|
|
|
- staveNote.querySelector('.vf-custom-bot')?.setAttribute("fill", "#040D1E")
|
|
|
- }
|
|
|
- }
|
|
|
- if (svgEl && isNeedCopyElement) {
|
|
|
- stemEl?.classList.remove(colorsClass[errType])
|
|
|
- svgEl?.classList.remove(colorsClass[errType])
|
|
|
- let copySvg: any = null;
|
|
|
- // 五线谱
|
|
|
- if (scoreData.musicType === 'staff') {
|
|
|
- stemEl?.classList.add(colorsClass.RIGHT)
|
|
|
- svgEl?.classList.add(colorsClass.RIGHT)
|
|
|
- copySvg = svgEl.querySelector('.vf-notehead')!.cloneNode(true) as SVGSVGElement
|
|
|
- } else {
|
|
|
- //copySvg = svgEl.querySelector('.vf-numbered-note-head')!.cloneNode(true) as SVGSVGElement
|
|
|
-
|
|
|
- if (isNeedCopyElement) {
|
|
|
- svgEl?.classList.add(styles.inaccuracy)
|
|
|
- const targetId = errType === 'HIGH' ? 'topSvg' : errType === 'LOW' ? 'bottomSvg' : errType === 'EARLY' ? 'leftSvg' : errType === 'LATE' ? 'rightSvg' : ''
|
|
|
- copySvg = document.getElementById(targetId)!.cloneNode(true) as SVGSVGElement
|
|
|
- const { width, height } = svgEl.getBoundingClientRect() || {}
|
|
|
- // @ts-ignore
|
|
|
- let { x, y } = svgEl?.getBBox() || {}
|
|
|
- x = errType === 'HIGH' ? x + (width - 15)/2 + 2 : errType === 'LOW' ? x + (width - 15)/2 + 2 : errType === 'EARLY' ? x - Math.abs((width - 15)/2) - 12 : errType === 'LATE' ? x + width + 6 : x
|
|
|
- y = errType === 'HIGH' ? y - Math.abs((height-10)/2) - 10 : errType === 'LOW' ? y + height + 8 : errType === 'EARLY' ? y + (height - 10)/2 : errType === 'LATE' ? y + (height - 10)/2 : y
|
|
|
- copySvg.setAttribute("x", x)
|
|
|
- copySvg.setAttribute("y", y)
|
|
|
- }
|
|
|
+ const clearViewColor = () => {
|
|
|
+ for (const id of useedid.value) {
|
|
|
+ removeClass(document.getElementById("vf-" + id));
|
|
|
+ removeClass(document.getElementById("vf-" + id + "-stem"));
|
|
|
+ const qid = "vf-" + id + "-copy";
|
|
|
+ const copyEl = document.getElementById(qid);
|
|
|
+ if (copyEl) {
|
|
|
+ copyEl.remove();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ useedid.value = [];
|
|
|
+ };
|
|
|
|
|
|
- // console.log(x,y,copySvg.getBoundingClientRect())
|
|
|
- // const rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
|
|
|
- // rect.setAttribute("x", 0 +'px');
|
|
|
- // rect.setAttribute("y", 0+'px');
|
|
|
- // rect.setAttribute("width", `50`);
|
|
|
- // rect.setAttribute("height", `50`);
|
|
|
- // rect.setAttribute("fill", "#FF4444");
|
|
|
- // svgEl.prepend(rect);
|
|
|
- }
|
|
|
- if (scoreData.musicType === 'staff') {
|
|
|
- copySvg.style.transform = getOffsetPosition(errType)
|
|
|
- //svgEl.style.opacity = '.7'
|
|
|
- if (stemEl) {
|
|
|
- //stemEl.style.opacity = '.7'
|
|
|
- }
|
|
|
- }
|
|
|
- copySvg.id = 'vf-' + active.id + '-copy'
|
|
|
- copySvg?.classList.add(colorsClass[errType])
|
|
|
- // stemEl?.classList.add(colorsClass.RIGHT)
|
|
|
- // @ts-ignore
|
|
|
- state.osmd?.container.querySelector('svg')!.insertAdjacentElement('afterbegin', copySvg)
|
|
|
- // svgEl?.parentElement?.appendChild(copySvg)
|
|
|
- }
|
|
|
- }, 300)
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- const removeClass = (el?: HTMLElement | null) => {
|
|
|
- if (!el) return
|
|
|
- const classList = el.classList.values()
|
|
|
- for (const val of classList) {
|
|
|
- if (val?.indexOf('vf-') !== 0) {
|
|
|
- el.classList.remove(val)
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- const clearViewColor = () => {
|
|
|
- for (const id of useedid.value) {
|
|
|
- removeClass(document.getElementById('vf-' + id))
|
|
|
- removeClass(document.getElementById('vf-' + id + '-stem'))
|
|
|
- const qid = 'vf-' + id + '-copy'
|
|
|
- const copyEl = document.getElementById(qid)
|
|
|
- if (copyEl) {
|
|
|
- copyEl.remove()
|
|
|
- }
|
|
|
- }
|
|
|
- useedid.value = []
|
|
|
- }
|
|
|
-
|
|
|
- const setPathColor = () => {
|
|
|
- console.log(11111,detailData.musicalNotesPlayStats,scoreData.itemType)
|
|
|
- for (const note of detailData.musicalNotesPlayStats) {
|
|
|
- const active = state.times[note.index];
|
|
|
- const svgEl = active?.id ? document.getElementById("vf-" + active?.id) : null;
|
|
|
- switch (scoreData.itemType) {
|
|
|
- case "intonation":
|
|
|
- svgEl?.classList.add(colorsClass.pitch[note.pitchAssessment.result]);
|
|
|
- break;
|
|
|
- case "cadence":
|
|
|
- svgEl?.classList.add(colorsClass.rhythmic[note.rhythmicAssessment.result]);
|
|
|
- break;
|
|
|
- case "integrity":
|
|
|
- svgEl?.classList.add(colorsClass.pitch[note.pitchAssessment.result]);
|
|
|
- break;
|
|
|
- default:
|
|
|
- break;
|
|
|
- }
|
|
|
- }
|
|
|
- };
|
|
|
- const setMearureColor = () => {
|
|
|
- for (let key in detailData.userMeasureScore) {
|
|
|
- addMeasureScore(detailData.userMeasureScore[key], false);
|
|
|
- }
|
|
|
- };
|
|
|
+ const setPathColor = () => {
|
|
|
+ console.log(11111, detailData.musicalNotesPlayStats, scoreData.itemType);
|
|
|
+ for (const note of detailData.musicalNotesPlayStats) {
|
|
|
+ const active = state.times[note.index];
|
|
|
+ const svgEl = active?.id ? document.getElementById("vf-" + active?.id) : null;
|
|
|
+ switch (scoreData.itemType) {
|
|
|
+ case "intonation":
|
|
|
+ svgEl?.classList.add(colorsClass.pitch[note.pitchAssessment.result]);
|
|
|
+ break;
|
|
|
+ case "cadence":
|
|
|
+ svgEl?.classList.add(colorsClass.rhythmic[note.rhythmicAssessment.result]);
|
|
|
+ break;
|
|
|
+ case "integrity":
|
|
|
+ svgEl?.classList.add(colorsClass.pitch[note.pitchAssessment.result]);
|
|
|
+ break;
|
|
|
+ default:
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ };
|
|
|
+ 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);
|
|
|
- // @ts-ignore
|
|
|
- const beams = Array.from(new Set(document.getElementsByClassName('vf-beam')))
|
|
|
- beams.forEach((item: any) => {
|
|
|
- item.classList.add(styles.beam)
|
|
|
- })
|
|
|
- //setPathColor();
|
|
|
- setViewColor();
|
|
|
- // setMearureColor();
|
|
|
- api_cloudLoading();
|
|
|
- };
|
|
|
- watch(
|
|
|
- () => scoreData.itemType,
|
|
|
- () => {
|
|
|
- setViewColor();
|
|
|
- }
|
|
|
- );
|
|
|
- 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"]}
|
|
|
- >
|
|
|
- {/* 曲谱渲染 */}
|
|
|
- {!detailData.isLoading && <MusicScore musicColor={'#FFFFFF'} onRendered={handleRendered} />}
|
|
|
- {
|
|
|
- <div class={styles.arrowSvg}>
|
|
|
- <TopArrow />
|
|
|
- <BottomArrow />
|
|
|
- <LeftArrow />
|
|
|
- <RightArrow />
|
|
|
- </div>
|
|
|
- }
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- );
|
|
|
- },
|
|
|
-});
|
|
|
+ /** 渲染完成 */
|
|
|
+ const handleRendered = (osmd: any) => {
|
|
|
+ state.musicRendered = true;
|
|
|
+ state.osmd = osmd;
|
|
|
+ state.times = formateTimes(osmd);
|
|
|
+ console.log("🚀 ~ state.times:", state.times);
|
|
|
+ // @ts-ignore
|
|
|
+ const beams = Array.from(new Set(document.getElementsByClassName("vf-beam")));
|
|
|
+ beams.forEach((item: any) => {
|
|
|
+ item.classList.add(styles.beam);
|
|
|
+ });
|
|
|
+ //setPathColor();
|
|
|
+ setViewColor();
|
|
|
+ // setMearureColor();
|
|
|
+ api_cloudLoading();
|
|
|
+ };
|
|
|
+ watch(
|
|
|
+ () => scoreData.itemType,
|
|
|
+ () => {
|
|
|
+ setViewColor();
|
|
|
+ }
|
|
|
+ );
|
|
|
+ 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"]}>
|
|
|
+ {/* 曲谱渲染 */}
|
|
|
+ {!detailData.isLoading && <MusicScore musicColor={"#FFFFFF"} onRendered={handleRendered} />}
|
|
|
+ {
|
|
|
+ <div class={styles.arrowSvg}>
|
|
|
+ <TopArrow />
|
|
|
+ <BottomArrow />
|
|
|
+ <LeftArrow />
|
|
|
+ <RightArrow />
|
|
|
+ </div>
|
|
|
+ }
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ );
|
|
|
+ },
|
|
|
+});
|
