Merge branch 'feature-tianyong-newVersion' of http://git.dayaedu.com/liushengqiang/music-score into ktyq-test-new

src/helpers/formateMusic.ts

@@ -971,17 +971,17 @@ export const formateTimes = (osmd: OpenSheetMusicDisplay) => {
 			// }
 			
 			activeVerticalMeasureList = [note.sourceMeasure?.verticalMeasureList?.[0]] || [];
-
+			const currenrtVfVoices = activeVerticalMeasureList[0]?.vfVoices['1'] ? activeVerticalMeasureList[0]?.vfVoices['1'] : activeVerticalMeasureList[0]?.vfVoices['2'] ? activeVerticalMeasureList[0]?.vfVoices['2'] : null;
 			/**
 			 * TODO:多分轨合并的小节，音符可能没有id，此时就去其它分轨找
 			 */
 			const vmLength = note.sourceMeasure?.verticalMeasureList?.length
 			let currentVmIndex = 0;
-			let hasSvgElement = activeVerticalMeasureList[0]?.vfVoices['1']?.tickables[staveNoteIndex];
+			let hasSvgElement = currenrtVfVoices?.tickables[staveNoteIndex];
 			while (!hasSvgElement && vmLength > 1 && currentVmIndex <= vmLength - 1) {
 				currentVmIndex += 1;
 				activeVerticalMeasureList = [note.sourceMeasure?.verticalMeasureList?.[currentVmIndex]] || [];
-				hasSvgElement = activeVerticalMeasureList[0]?.vfVoices['1']?.tickables[staveNoteIndex];
+				hasSvgElement = currenrtVfVoices?.tickables[staveNoteIndex];
 			}
 
 			const { realValue } = iterator.currentTimeStamp;
@@ -1130,7 +1130,7 @@ export const formateTimes = (osmd: OpenSheetMusicDisplay) => {
 			// console.log('relaEndtime',noteLength, relativeTime)
 			const fixedKey = note.fixedKey || 0;
 			// const svgElement = activeVerticalMeasureList[0]?.vfVoices["1"]?.tickables[si];
-			const svgElement = activeVerticalMeasureList[0]?.vfVoices['1']?.tickables[staveNoteIndex];
+			const svgElement = currenrtVfVoices?.tickables[staveNoteIndex];
 
 			// console.log('si',si,i)
 			// console.log(note.sourceMeasure.MeasureNumberXML,note,svgElement, NoteRealValue, measureLength)
@@ -1287,7 +1287,7 @@ export const formateTimes = (osmd: OpenSheetMusicDisplay) => {
 			}		
 			nodeDetail.realKey = formatRealKey(note.halfTone - fixedKey * 12, nodeDetail);
 			nodeDetail.duration = nodeDetail.endtime - nodeDetail.time;
-			let tickables = activeVerticalMeasureList[0]?.vfVoices["1"]?.tickables || [];
+			let tickables = currenrtVfVoices?.tickables || [];
 			if ([121].includes(state.subjectId)) {
 				tickables = note.sourceMeasure.verticalSourceStaffEntryContainers;
 			}

src/page-instrument/header-top/index.module.less

@@ -34,6 +34,7 @@
         height: 18px;
     }
     &.modeWarnRight {
+        left: "inherit";
         right: 30px;
     }
 }

src/page-instrument/header-top/index.tsx

@@ -248,7 +248,7 @@ export default defineComponent({
     // 是否显示引导
     const showGuide = ref(false);
     const showStudentGuide = ref(false);
-
+    let  displayFingeringCache = false // 指法缓存
     /** 设置按钮 */
     const settingBtn = computed(() => {
       // 音频播放中 禁用
@@ -697,10 +697,25 @@ export default defineComponent({
                   state.playType = "play";
                   state.playSource = state.music ? "music" : "background";
                 }
-                // 有歌词的时候，切换播放模式，需要重新渲染谱面
-                if (state.xmlHasLyric) {
+                // 有指法并且显示指法的时候 切换到演唱模式 需要影藏指法
+                let isRefresh = false
+                if(state.isShowFingering && state.fingeringInfo.name && (state.setting.displayFingering || displayFingeringCache)){
+                  if(state.playType === "sing"){
+                    state.setting.displayFingering = false
+                    displayFingeringCache = true
+                  } else {
+                    state.setting.displayFingering = displayFingeringCache
+                    displayFingeringCache = false
+                  }
+                  // 如果是竖屏指法和一行谱的时候 改变指法值的时候state 会调用刷新 refreshMusicSvg 所以下面不调用
+                  if (state.fingeringInfo.direction === "vertical" && !state.isSingleLine) {
+                    isRefresh = true
+                  }
+                }
+                // 有歌词的时候，切换播放模式，需要重新渲染谱面  指法不刷新谱面的时候
+                if (state.xmlHasLyric && !isRefresh) {
                   refreshMusicSvg();
-                } else {
+                } else if(!isRefresh) {
                   handlerModeChange(oldPlayType, oldPlaySource, true);
                 }
                 showToast({

src/page-instrument/header-top/settting/index.tsx

@@ -48,7 +48,7 @@ export default defineComponent({
                 <div class={styles.content}>
                     <div class={styles.conBox}>
                         {
-                            state.isShowFingering && state.fingeringInfo.name && ["practise", "follow"].includes(state.modeType) &&
+                            state.isShowFingering && state.fingeringInfo.name && ["practise", "follow"].includes(state.modeType) && state.playType === "play" &&
                                 <div class={styles.cellBox}>
                                 <div class={styles.tit}>指法</div>
                                     <Switch v-model={state.setting.displayFingering}></Switch>

src/page-instrument/simple-detail/index.module.less

@@ -17,7 +17,13 @@
     --header-height: 62px;
     // background: var(--container-background);
     background: transparent;
-
+    position: relative;
+    .mask{
+        position: absolute;
+        z-index: 6;
+        width: 100%;
+        height: 100%;
+    }
     .container {
         margin: 0;
         border-radius: 10px;

src/page-instrument/simple-detail/index.tsx

@@ -170,6 +170,7 @@ export default defineComponent({
 
 		return () => (
 			<div class={styles.detail}>
+				<div class={styles.mask}></div>
 				<div id="scrollContainer" class={[styles.container, "hideCursor"]}>
 					{/* 曲谱渲染 */}
 					{!detailData.isLoading && 

src/page-instrument/view-detail/index.module.less

@@ -17,19 +17,26 @@
     overflow: hidden;
     --header-height: 80px;
     --pc-header-height: 72px;
-    &.practise{
-        background: url("./images/bg1.png") no-repeat;
-        background-size: 100% 100%;
-    }    
-    &.follow{
-        background: url("./images/bg3.png") no-repeat;
-        background-size: 100% 100%;
-    }    
-    &.evaluating{
-        background: url("./images/bg2.png") no-repeat;
-        background-size: 100% 100%;
+    // &.practise{
+    //     background: url("./images/bg1.png") no-repeat;
+    //     background-size: 100% 100%;
+    // }    
+    // &.follow{
+    //     background: url("./images/bg3.png") no-repeat;
+    //     background-size: 100% 100%;
+    // }    
+    // &.evaluating{
+    //     background: rgba(255, 255, 255, 0.2) url("./images/bg2.png") no-repeat;
+    //     background-size: 100% 100%;
+    // }
+    .pageBg {
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        object-fit: cover; /* 保持宽高比 */
     }
-
     .headHeight {
         position: absolute;
         bottom: 0;

src/page-instrument/view-detail/index.tsx

@@ -38,6 +38,7 @@ import { initSmoothAnimation } from "./smoothAnimation"
 import EmptyMusic, { isEmptyMusicShow } from "./emptyMusic"
 import { position } from "html2canvas/dist/types/css/property-descriptors/position";
 import Loading from "./loading"
+import bgJson from "./images/index.json";
 
 // const DelayCheck = defineAsyncComponent(() =>
 //   import('/src/page-instrument/evaluat-model/delay-check')
@@ -143,7 +144,8 @@ export default defineComponent({
       if (state.isPreView) {
         state.zoom = 0.65
       }
-      state.isSingleLine = query.isSingleLine === "true" ? true : false; // 一行谱模式
+      // 只有总控平台和预览 默认是多行谱
+      (state.isPreView || query.isCbs) && (state.isSingleLine = false)
       // Promise.all([sysMusicScoreAccompanimentQueryPage(id)]).then((values) => {
       //   getMusicInfo(values[0]);
       // });
@@ -251,24 +253,8 @@ export default defineComponent({
         );
         throw new Error("webApi_beatTimes 完成");
       }
-      // 根据当前文件有没有 设置当前的播放模式
-      if(!state.music){
-        if(state.accompany){
-          state.playSource = "background"
-        }else{
-          if(state.fanSong){
-            state.playType = "sing"
-            state.playSource = "music"
-          }else if(state.banSong){
-            state.playType = "sing"
-            state.playSource = "background"
-          }else if(state.mingSong){
-            state.playType = "sing"
-            state.playSource = "mingSong"
-          }
-          handlerModeChange("play", "music")
-        }
-      }
+      // 刷新时值
+      handlerModeChange("play", "music")
       /**
        * 2024.1.25
        * 设置节拍器，跟练需要播放系统节拍器，所以不需要判断needTick状态
@@ -467,6 +453,11 @@ export default defineComponent({
           background: state.setting.camera ? `rgba(${state.setting.eyeProtection ? "253,244,229" : "255,255,255"} ,${state.setting.cameraOpacity / 100}) !important` : "",
         }}
       >
+        <img 
+          style={{opacity: state.setting.camera && state.modeType === 'evaluating' ? state.setting.cameraOpacity / 100 : 1}} 
+          class={styles.pageBg} 
+          src={state.modeType === 'practise' ? bgJson[1] : state.modeType === 'evaluating' ? bgJson[2] : state.modeType === 'follow' ? bgJson[3] : ''} 
+        />
         {/* 骨架屏 */}
         {/* <Transition name="van-fade">
           {detailData.skeletonLoading && (

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

@@ -420,7 +420,7 @@
 }
 
 .shiyiPopup {
-    background: #7AAEE0;
+    background: #B0D8FF;
     border-radius: 20px;
     width: 80vw;
     max-width: 460px;

src/page-instrument/view-evaluat-report/component/share-top/index.tsx

@@ -466,7 +466,7 @@ export default defineComponent({
                   </div>
                   <div class={styles.item}>
                     <Note fill="#4BED98" />
-                    <span>绿色音符：演奏/时值正确</span>
+                    <span>绿色音符：演奏正确</span>
                   </div>
                   <div class={styles.item}>
                     <Note fill="#FFB900" />
@@ -504,7 +504,7 @@ export default defineComponent({
                   </div>
                   <div class={styles.itemTone}>
                     <i style={{ background: bgColors.right }}></i>
-                    <span>绿色音符：演奏/时值正确</span>
+                    <span>绿色音符：演奏正确</span>
                   </div>
                   <div class={styles.itemTone}>
                     <i style={{ background: bgColors.low }}></i>

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

@@ -64,6 +64,7 @@ export default defineComponent({
   setup() {
     const query: any = getQuery();
     const useedid = ref<string[]>([]);
+    const allNote = ref<any[]>([]);
     const scoreData = reactive({
       videoFilePath: "", // 回放视频路径
       cadence: 0,
@@ -259,7 +260,7 @@ export default defineComponent({
       const notes = filterNotes();
       // console.log(1111,notes)
       for (const note of notes) {
-        const active = state.times[note.index];
+        const active = allNote.value[note.musicalNotesIndex];
         setTimeout(() => {
           if (useedid.value.includes(active.id)) {
             return;
@@ -362,7 +363,7 @@ export default defineComponent({
     const setPathColor = () => {
       console.log(11111, detailData.musicalNotesPlayStats, scoreData.itemType);
       for (const note of detailData.musicalNotesPlayStats) {
-        const active = state.times[note.index];
+        const active = allNote.value[note.index];
         const svgEl = active?.id ? document.getElementById("vf-" + active?.id) : null;
         switch (scoreData.itemType) {
           case "intonation":
@@ -389,8 +390,11 @@ export default defineComponent({
     const handleRendered = (osmd: any) => {
       state.musicRendered = true;
       state.osmd = osmd;
-      state.times = formateTimes(osmd);
-      console.log("🚀 ~ state.times:", state.times);
+      allNote.value = formateTimes(osmd);
+      console.log("🚀 ~ state.times:", allNote.value);
+      // @ts-ignore
+      const startMeasureNum = detailData.musicalNotesPlayStats?.[0].measureRenderIndex, endMeasureNum = detailData.musicalNotesPlayStats?.last()?.measureRenderIndex;
+      allNote.value = allNote.value.filter((item: any) => (item.MeasureNumberXML >= startMeasureNum+1 && item.MeasureNumberXML <= endMeasureNum+1))
       // @ts-ignore
       const beams = Array.from(new Set(document.getElementsByClassName("vf-beam")));
       beams.forEach((item: any) => {

src/state.ts

@@ -503,7 +503,7 @@ const state = reactive({
   /** 音频文件是否加载完成 */
   audioDone: false,
   /** 是否为单行谱渲染模式 */
-  isSingleLine: false,
+  isSingleLine: true,
   /** 是否是evxml */
   isEvxml: false,
   noTimes: [] as any,
@@ -1387,6 +1387,23 @@ function initMusicSource(data: any, track?: string) {
   return musicObj
 }
 const setState = (data: any, index: number) => {
+  // 根据当前文件有没有 设置当前的播放模式
+  if(!state.music){
+    if(state.accompany){
+      state.playSource = "background"
+    }else{
+      if(state.fanSong){
+        state.playType = "sing"
+        state.playSource = "music"
+      }else if(state.banSong){
+        state.playType = "sing"
+        state.playSource = "background"
+      }else if(state.mingSong){
+        state.playType = "sing"
+        state.playSource = "mingSong"
+      }
+    }
+  }
   state.appName = "COLEXIU";
   state.detailId = data.bizId;
   state.xmlUrl = data.xmlFileUrl;
@@ -1401,7 +1418,7 @@ const setState = (data: any, index: number) => {
   /**
    * 单曲，指法根据用户当前的乐器来显示，如果没有则取musicSheetSoundList第一个track
    */
-  let musicalCode = !storeData.user?.instrumentId ? data.musicSheetSoundList?.[0]?.track || '' : data.musicSheetSoundList?.find((item: any) => item?.musicalInstrumentId == storeData.user?.instrumentId)?.track || '';
+  let musicalCode = !storeData.user?.instrumentId ? data.musicSheetSoundList.find((item:any)=>{ return item.audioPlayType === "PLAY" })?.track || '' : data.musicSheetSoundList?.find((item: any) => item?.musicalInstrumentId == storeData.user?.instrumentId && item.audioPlayType === "PLAY")?.track || '';
   const pitchSubject = musicalInstrumentCodeInfo.find((n) => n.code.toLocaleLowerCase() === subjectCode.toLocaleLowerCase())
   const pitchMusical = musicalInstrumentCodeInfo.find((n) => n.code.toLocaleLowerCase() === musicalCode.toLocaleLowerCase())
   state.subjectCodeId = pitchSubject ? pitchSubject.id : 0
@@ -1852,11 +1869,14 @@ export const refreshMusicSvg = () => {
 watch(
   () => state.setting.displayFingering,
   () => {
-    nextTick(() => {
-      if (smoothAnimationState.osdmScrollDom) {
-        smoothAnimationState.osdmScrollDomWith = smoothAnimationState.osdmScrollDom.offsetWidth | 0
-      }
-    })
+    // 有字符 并且是竖向指法 并且是一行谱
+    if(state.fingeringInfo?.name && state.fingeringInfo.direction === "vertical" && state.isSingleLine){
+      nextTick(() => {
+        if (smoothAnimationState.osdmScrollDom) {
+          smoothAnimationState.osdmScrollDomWith = smoothAnimationState.osdmScrollDom.offsetWidth | 0
+        }
+      })
+    }
     // 如果有指法，并且是竖向指法时，切换指法时，谱面宽度变化，需要重新渲染谱面
     if (state.fingeringInfo?.name && state.fingeringInfo.direction === "vertical" && !state.isSingleLine) {
       headTopData.settingMode = false;

src/view/audio-list/index.tsx

@@ -206,7 +206,10 @@ export default defineComponent({
 			}
 		);
 
-		const createAudio = (src: string): Promise<HTMLAudioElement | null> => {
+		const createAudio = (src?: string): Promise<HTMLAudioElement | null> => {
+			if(!src){
+				return Promise.resolve(null)
+			}
 			return new Promise((resolve) => {
 				const a = new Audio(src + '?v=' + Date.now());
 				a.load();

src/view/music-score/index.tsx

@@ -96,7 +96,7 @@ export default defineComponent({
 				renderSingleHorizontalStaffline: state.isSingleLine ? true : false,
 				// autoGenerateMultipleRestMeasuresFromRestMeasures: state.isSingleLine ? false : true, // 连续休止小节是否合并显示
 				autoGenerateMultipleRestMeasuresFromRestMeasures: true,
-				drawLyrics: (state.playType === 'sing' && !state.isSimplePage) ? true : false, // 演唱模式才渲染歌词，simple页面不显示歌词
+				drawLyrics: ( ((!state.accompany && !state.music ) || state.playType === 'sing') && !state.isSimplePage) ? true : false, // 演唱模式才渲染歌词，simple页面不显示歌词
 				// darkMode: true, // 暗黑模式
 				// pageFormat: 'A4_P',
 				// autoBeam: true,
@@ -115,14 +115,14 @@ export default defineComponent({
 			// }
 			//osmd.EngravingRules.PageBottomMargin = state.platform === IPlatform.PC ? 1 : 2;
 			if (state.isSimplePage) {
-				osmd.EngravingRules.PageTopMargin = 0;
+				osmd.EngravingRules.PageTopMargin = state.musicRenderType === 'staff' ? 0 : 3;
 				osmd.EngravingRules.PageTopMarginNarrow = 0;
 				osmd.EngravingRules.PageLeftMargin = 0;
 				osmd.EngravingRules.PageRightMargin = 0;
 				osmd.EngravingRules.BreathMarkDistance = 0.1; 
 				osmd.EngravingRules.PageBottomMargin = 0;
 			} else {
-				osmd.EngravingRules.PageTopMargin = 2; // 老师端顶部间距
+				osmd.EngravingRules.PageTopMargin = 3; // 顶部间距
 				osmd.EngravingRules.PageTopMarginNarrow = 3;
 				osmd.EngravingRules.PageLeftMargin = 2;
 				osmd.EngravingRules.PageRightMargin = 2;

src/view/tick/index.tsx

@@ -36,27 +36,34 @@ export function closeTick(){
 		tickData.show = false
 	}
 }
+const tickPlayCb = (i: any, resolve: any, source: any) => {
+	if (tickData.tickEnd) {
+		resolve(i)
+		return
+	};
+	tickData.index++;
+	// 当系统节拍器才播放声音
+	if (source && isUseSystemBeat.value) {
+		const beatVolume = state.setting.beatVolume / 100
+		source.volume = beatVolume;
+		if (source.volume <= 0) {
+			source.muted = true
+		} else {
+			source.muted = false
+		}
+		source.play();
+	}
+	resolve(i);
+}
 const handlePlay = (i: number, source: any | null) => {
 	return new Promise((resolve) => {
-		_time=setTimeout(() => {
-			if (tickData.tickEnd) {
-				resolve(i)
-				return
-			};
-			tickData.index++;
-			// 当系统节拍器才播放声音
-			if (source && isUseSystemBeat.value) {
-				const beatVolume = state.setting.beatVolume / 100
-				source.volume = beatVolume;
-				if (source.volume <= 0) {
-					source.muted = true
-				} else {
-					source.muted = false
-				}
-				source.play();
-			}
-			resolve(i);
-		}, tickData.beatLengthInMilliseconds);
+		if (i === 0 ) {
+			tickPlayCb(i, resolve, source);
+		} else {
+			_time=setTimeout(() => {
+				tickPlayCb(i, resolve, source);
+			}, tickData.beatLengthInMilliseconds);
+		}
 	});
 };