修改滚动条样式

src/page-instrument/view-evaluat-report/index.module.less

@@ -1,3 +1,10 @@
+.detail {
+  overflow: auto;
+  margin-right: -17px;
+  /*和滚动条宽度相等*/
+  height: 100vh;
+}
+
 .skeleton {
   position: fixed;
   left: 0;
@@ -52,7 +59,8 @@
         overflow: initial;
         height: initial;
         max-height: initial;
-        & > #osmdCanvasPage1 {
+
+        &>#osmdCanvasPage1 {
           position: relative !important;
         }
       }

src/page-instrument/view-evaluat-report/index.tsx

@@ -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>
+    );
+  },
 });