fix:修改效音

src/page-instrument/evaluat-model/sound-effect/data.ts

@@ -1,54 +1,13 @@
-import iconSound_12_4 from "./icons/icon-sound_12_4.svg";
-import iconsound_5_6 from "./icons/icon-sound_5_6.svg";
-import iconsound_13 from "./icons/icon-sound_13.svg";
-import iconsound_14_15 from "./icons/icon-sound_14_15.svg";
-import iconsound_120 from "./icons/icon-sound_120.svg";
 import iconsound_default from "./icons/icon-sound_default.svg";
 export const getScoreData = (subjectId: number) => {
-	// 小号、单簧管
-	if (subjectId == 12 || subjectId == 4) {
-		return {
-			src: iconSound_12_4,
-			text: "",
-			frequency: 525.6295448312027,
-		};
-	}
-	// 萨克斯
-	if (subjectId == 5 || subjectId == 6) {
-		return {
-			src: iconsound_5_6,
-			text: "C",
-			frequency: 525.6295448312027,
-		};
-	}
-	// 圆号
-	if (subjectId == 13) {
-		return {
-			src: iconsound_13,
-			text: "F",
-			frequency: 350.8156324849721,
-		};
-	}
-	// 长号 上低音号
-	if (subjectId == 14 || subjectId == 15) {
-		return {
-			src: iconsound_14_15,
-			text: "S",
-			frequency: 117.07067192670213,
-		};
-	}
-	// 长号 上低音号
-	if (subjectId == 120) {
-		return {
-			src: iconsound_120,
-			text: "A",
-			frequency: 884,
-		};
-	}
-	// 剩余声部
 	return {
 		src: iconsound_default,
-		text: "Bb",
-		frequency: 468.28268770680853,
+		text: "A",
+		name: "La",
+		frequency: 442,
+		nextFrequency: 468.28268770680853,
+		prevFrequency: 417.19244620530856,
+		min: 442 - (442 - 417.19244620530856) * 0.5,
+		max: 442 + (468.28268770680853 - 442) * 0.5,
 	};
 };

src/page-instrument/evaluat-model/sound-effect/index.module.less

@@ -31,6 +31,7 @@
 
 .skibtns {
   z-index: 9999 !important;
+
   :global {
     --van-popover-action-width: 100px;
     --van-popover-action-font-size: 14px;
@@ -43,9 +44,11 @@
   padding: 6px 16px;
   background-color: #fff;
   border-radius: 20px;
-  &:active{
+
+  &:active {
     opacity: .8;
   }
+
   .tran {
     margin-left: 2px;
     transform: rotate(90deg);
@@ -82,22 +85,35 @@
   left: -6%;
   width: 26vw;
 }
-.scoreContent{
+
+.scoreContent {
+  text-align: center;
+}
+
+.des {
+
+  font-size: 14px;
+  color: #fff;
+  line-height: 22px;
   text-align: center;
+  font-weight: 400;
 }
-.tips{
+
+.tips {
   text-align: center;
   color: #fff;
   font-size: 13px;
   padding: 4px 0;
 }
-.steps{
+
+.steps {
   margin: 0 auto;
   padding: 10px 0;
   width: 40%;
   display: flex;
   justify-content: space-evenly;
-  & > img {
+
+  &>img {
     width: 20px;
     height: 20px;
   }

src/page-instrument/evaluat-model/sound-effect/index.tsx

@@ -20,26 +20,30 @@ export default defineComponent({
 			step: -1,
 			tips: ["左边红灯表示吹奏的音过低", "吹奏时请保持中间绿灯亮起", "右边红灯表示吹奏的音过高"],
 			time: 1,
+			isFinsh: false,
 		});
 		watch(
 			() => evaluatingData.soundEffectFrequency,
 			() => {
 				// console.log('吹奏',evaluatingData.soundEffectFrequency , scoreData.frequency)
 				const trend =
-					Math.abs(evaluatingData.soundEffectFrequency - scoreData.frequency) <= 10
+					scoreData.min <= evaluatingData.soundEffectFrequency &&
+					evaluatingData.soundEffectFrequency <= scoreData.max
 						? 1
 						: evaluatingData.soundEffectFrequency > scoreData.frequency
 						? 2
 						: 0;
 				soundEffectData.step = trend;
-				
-				// console.log("🚀 ~ trend:", trend)
+
 				if (trend !== 1) {
 					soundEffectData.time = Date.now();
 				}
 				// 持续时间达到3秒钟,效音成功
 				if (Date.now() - soundEffectData.time > 2000) {
-					emit("close");
+					soundEffectData.isFinsh = true;
+					setTimeout(() => {
+						emit("close");
+					}, 1000);
 				}
 			}
 		);
@@ -80,12 +84,27 @@ export default defineComponent({
 						<div class={styles.scoreContent}>
 							<img src={scoreData.src} />
 						</div>
-						<div class={styles.tips}>{soundEffectData.tips[soundEffectData.step]}</div>
-						<div class={styles.steps}>
-							<img src={soundEffectData.step === 0 ? DotErrorIcon : DotIcon} />
-							<img src={soundEffectData.step === 1 ? DotActiveIcon : DotIcon} />
-							<img src={soundEffectData.step === 2 ? DotErrorIcon : DotIcon} />
+						<div class={styles.des}>
+							请演奏{" "}
+							<span style={{ color: "var(--van-primary-color)" }}>
+								{scoreData.text}【 {scoreData.name} 】
+							</span>
+							直到绿灯全部亮起
 						</div>
+						<div class={styles.tips}>{soundEffectData.tips[soundEffectData.step]}</div>
+						{soundEffectData.isFinsh ? (
+							<div class={styles.steps}>
+								<img src={DotActiveIcon} />
+								<img src={DotActiveIcon} />
+								<img src={DotActiveIcon} />
+							</div>
+						) : (
+							<div class={styles.steps}>
+								<img src={soundEffectData.step === 0 ? DotErrorIcon : DotIcon} />
+								<img src={soundEffectData.step === 1 ? DotActiveIcon : DotIcon} />
+								<img src={soundEffectData.step === 2 ? DotErrorIcon : DotIcon} />
+							</div>
+						)}
 					</div>
 				</div>
 			</div>