指法

src/page-gym/detail/index.tsx

@@ -18,16 +18,18 @@ 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 route = useRoute();
 		const query: any = {
 			...getQuery(),
-			...route.query
+			...route.query,
 		};
 
 		const paramsId = route.params.id as string;
@@ -119,8 +121,12 @@ export default defineComponent({
 			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 = () => {
@@ -159,22 +165,33 @@ export default defineComponent({
 				<div class={styles.headHeight}>
 					<Transition name="van-slide-down">{detailData.svgRendered && <HeaderTop />}</Transition>
 				</div>
-				<div class={[styles.container, state.setting.eyeProtection && 'eyeProtection', !state.setting.displayCursor && 'hideCursor']} id="mainContainer">
+				<div class={[styles.container, state.setting.eyeProtection && "eyeProtection", !state.setting.displayCursor && "hideCursor"]} id="mainContainer">
+					{/* 曲谱渲染和点击层 */}
 					{!detailData.isLoading && (
 						<div id="musicAndSelection">
 							<MusicScore onRendered={handleRendered} />
 							{detailData.showSelection && <Selection />}
 						</div>
 					)}
+					{/* 播放 */}
 					{!detailData.isLoading && <AudioList />}
+					{/* 评测 */}
 					{state.modeType === "evaluating" && (
 						<>
 							<Evaluating />
 							{evaluatingData.rendered && <EvaluatModel />}
 						</>
 					)}
+					{/* 指法 */}
+					{/* {state.setting.displayFingering && <Fingering />} */}
 				</div>
-				<div class={styles.plugins}>{detailData.svgRendered && <MeasureSpeed />}</div>
+
+				{/* 公用的插件 */}
+				{detailData.svgRendered && (
+					<div class={styles.plugins}>
+						<MeasureSpeed />
+					</div>
+				)}
 			</div>
 		);
 	},

src/state.ts

@@ -111,6 +111,10 @@ const state = reactive({
 	},
 	/** 节拍器的时间 */
 	fixtime: 0,
+	/** 指法信息 */
+	fingeringInfo: {
+
+	},
 
 	repeatedBeats: 0,
 

src/view/fingering/fingering-config.ts

@@ -0,0 +1,176 @@
+import { CSSProperties } from "vue";
+import relationships from "./fingering-relationships";
+
+export type Fingering = {
+	json: any;
+	relationship: Object;
+	height?: number | string;
+	width?: number | string;
+	maxWidth?: number;
+	styles?: CSSProperties;
+} | null;
+export type ITypeContentItem = {
+	name: IVocals;
+	direction: "vertical" | "transverse";
+	width?: string;
+	paddingLeft?: string;
+	paddingRight?: string;
+};
+
+type ITypeContent = {
+	[key: string | number]: ITypeContentItem;
+};
+
+export type IVocals = "flute" | "clarinet" | "saxophone" | "trumpet" | "horn" | "trombone" | "up-bass-horn" | "small-drum" | "tuba" | "piccolo";
+
+/** 映射声部ID */
+export const mappingVoicePart = (id: number, soruce: 'GYM' | 'COLEXIU' | 'ORCHESTRA') : number => {
+  if (soruce === 'GYM') {
+    return id
+  } else if (soruce === 'COLEXIU'){
+    const subject: {[_key: string | number]: number} = {
+      2: 32
+    }
+    return subject[id]
+  }
+  return 0
+}
+
+/** 声部的指法配置信息 */
+export const subjectFingering: ITypeContent = {
+	2: {
+		name: "flute",
+		direction: "transverse",
+	}, // 长笛
+	4: {
+		name: "clarinet",
+		direction: "vertical",
+		width: "1rem",
+		paddingLeft: "0rem",
+		paddingRight: "1rem",
+	}, // 单簧管
+	5: {
+		name: "saxophone",
+		direction: "vertical",
+		width: "3rem",
+	}, // 萨克斯
+	6: {
+		name: "saxophone",
+		direction: "vertical",
+		width: "3rem",
+	}, // 中音萨克斯
+	12: {
+		name: "trumpet",
+		direction: "transverse",
+	}, // 小号
+	13: {
+		name: "horn",
+		direction: "vertical",
+		width: "3.5rem",
+	}, // 圆号
+	14: {
+		name: "trombone",
+		direction: "transverse",
+	}, // 长号
+	15: {
+		name: "up-bass-horn",
+		direction: "vertical",
+		width: "3rem",
+	}, // 上低音号
+	17: {
+		name: "tuba",
+		direction: "vertical",
+		width: "3.4rem",
+	}, // 大号
+	// 23: {
+	//   name: 'small-drum',
+	//   direction: 'vertical'
+	// }, // 打击乐
+	120: {
+		name: "piccolo",
+		direction: "vertical",
+		width: "1rem",
+		paddingRight: "0.8rem",
+	}, // 短笛
+};
+
+export const getFingeringConfig = async (type: IVocals): Promise<Fingering> => {
+	switch (type) {
+		case "flute":
+			const flute = await import(`./fingering-img/flute/index.json`);
+			return {
+				json: flute.default,
+				relationship: relationships.flute,
+				height: "60px",
+				styles: {},
+			};
+		case "clarinet":
+			const clarinet = await import(`./fingering-img/clarinet/index.json`);
+			return {
+				json: clarinet.default,
+				relationship: relationships.clarinet,
+				styles: {
+					marginLeft: ".4rem",
+					marginRight: ".7rem",
+				},
+			};
+		case "trumpet":
+			const trumpet = await import(`./fingering-img/trumpet/index.json`);
+			return {
+				json: trumpet.default,
+				relationship: relationships.trumpet,
+				// maxWidth: 150,
+			};
+		case "horn":
+			const horn = await import(`./fingering-img/horn/index.json`);
+			return {
+				json: horn.default,
+				relationship: relationships.horn,
+				height: "212px",
+				width: "252px",
+			};
+		case "tuba":
+			const tuba = await import(`./fingering-img/tuba/index.json`);
+			return {
+				json: tuba.default,
+				relationship: relationships.tuba,
+			};
+		case "piccolo":
+			const piccolo = await import(`./fingering-img/piccolo/index.json`);
+			return {
+				json: piccolo.default,
+				relationship: relationships.piccolo,
+			};
+		case "up-bass-horn":
+			const upBassHorn = await import(`./fingering-img/up-bass-horn/index.json`);
+			return {
+				json: upBassHorn.default,
+				relationship: relationships.upBassHorn,
+			};
+		case "trombone":
+			const trombone = await import(`./fingering-img/trombone/index.json`);
+			return {
+				json: trombone.default,
+				relationship: relationships.trombone,
+			};
+		case "saxophone":
+			const saxophone = await import(`./fingering-img/saxophone/index.json`);
+			return {
+				json: saxophone.default,
+				relationship: relationships.saxophone,
+				styles: {
+					marginLeft: ".2rem",
+					marginRight: ".3rem",
+				},
+			};
+		case "small-drum":
+			const smallDrum = await import(`./fingering-img/small-drum/index.json`);
+			return {
+				json: smallDrum.default,
+				relationship: relationships.smallDrum,
+				width: "180px",
+			};
+		default:
+			return null;
+	}
+};