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

src/helpers/formateMusic.ts

@@ -1224,7 +1224,7 @@ export const formateTimes = (osmd: OpenSheetMusicDisplay) => {
 				nodeDetail.endtime = nodeDetail.endtime + currentWaitTime;
 				usetime = usetime + currentWaitTime;
 				relativeTime = relativeTime + currentWaitTime;
-			}			
+			}		
 			nodeDetail.realKey = formatRealKey(note.halfTone - fixedKey * 12, nodeDetail);
 			nodeDetail.duration = nodeDetail.endtime - nodeDetail.time;
 			let tickables = activeVerticalMeasureList[0]?.vfVoices["1"]?.tickables || [];

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

@@ -3,7 +3,7 @@ import styles from "./index.module.less"
 import { headImg } from "../image";
 import { headTopData } from "../index"
 import { Switch, showToast, Field, Popup } from "vant";
-import state from "/src/state"
+import state, { refreshMusicSvg } from "/src/state"
 import { smoothAnimationState} from "/src/page-instrument/view-detail/smoothAnimation"
 import Recommendation from "../../custom-plugins/helper-model/recommendation";
 import { resetRenderMusicScore } from "/src/view/music-score";
@@ -75,7 +75,10 @@ export default defineComponent({
                                     [{name:'单行谱',value:true},{name:'多行谱',value:false}].map(item=>{
                                         return <div class={ state.isSingleLine===item.value && styles.active } onClick={ ()=>{ 
                                             state.isSingleLine = item.value 
-                                            resetRenderMusicScore(state.musicRenderType)
+                                            // resetRenderMusicScore(state.musicRenderType)
+                                            headTopData.settingMode = false
+                                            refreshMusicSvg();
+                                            // musicScoreRef.value?.refreshMusicScore()
                                         } }>{item.name}</div>
                                     })
                                 }
@@ -88,7 +91,9 @@ export default defineComponent({
                                     [{name:'五线谱',value:'staff'},{name:'首调',value:'firstTone'},{name:'固定谱',value:'fixedTone'}].map(item=>{
                                         return <div class={ state.musicRenderType===item.value && styles.active } onClick={ ()=>{ 
                                             state.musicRenderType = item.value as any
-                                            resetRenderMusicScore(state.musicRenderType)
+                                            // resetRenderMusicScore(state.musicRenderType)
+                                            headTopData.settingMode = false
+                                            refreshMusicSvg();
                                         } }>{item.name}</div>
                                     })
                                 }

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

@@ -1,5 +1,5 @@
 import { Popup, Skeleton } from "vant";
-import { computed, defineComponent, nextTick, onBeforeMount, onBeforeUnmount, onMounted, reactive, Transition, watch, watchEffect, defineAsyncComponent } from "vue";
+import { computed, defineComponent, nextTick, onBeforeMount, onBeforeUnmount, onMounted, reactive, Transition, watch, watchEffect, defineAsyncComponent, ref } from "vue";
 import { formateTimes } from "../../helpers/formateMusic";
 import Metronome, { metronomeData } from "../../helpers/metronome";
 import state, { EnumMusicRenderType, evaluatCreateMusicPlayer, handleSetSpeed, IAudioState, IPlatform, isRhythmicExercises, resetPlaybackToStart, togglePlay, getMusicDetail, addNoteBBox } from "/src/state";
@@ -78,6 +78,8 @@ const setNoteHalfTone = (list: any[]) => {
   return list;
 };
 
+export const musicScoreRef = ref();
+
 export default defineComponent({
   name: "music-list",
   setup() {
@@ -456,6 +458,7 @@ export default defineComponent({
           {/* 曲谱渲染 */}
           {!detailData.isLoading && 
             <MusicScore 
+              ref={musicScoreRef}
               musicColor={'#FFFFFF'}
               showPartNames={state.isCombineRender}
               onRendered={handleRendered} 

src/state.ts

@@ -15,9 +15,10 @@ import { getMusicSheetDetail } from "./utils/baseApi"
 import { getQuery } from "/src/utils/queryString";
 import { followData } from "/src/view/follow-practice/index"
 import { changeSongSourceByBate } from "/src/view/audio-list"
-import { moveSmoothAnimation, smoothAnimationState, moveSmoothAnimationByPlayTime, moveTranslateXNum} from "/src/page-instrument/view-detail/smoothAnimation"
+import { moveSmoothAnimation, smoothAnimationState, moveSmoothAnimationByPlayTime, moveTranslateXNum, destroySmoothAnimation} from "/src/page-instrument/view-detail/smoothAnimation"
 import { storeData } from "/src/store";
 import { downloadXmlStr } from "./view/music-score"
+import { musicScoreRef } from "/src/page-instrument/view-detail/index"
 
 const query: any = getQuery();
 
@@ -499,6 +500,8 @@ const state = reactive({
   musicComposer: '',
   /** 作词家 */
   musicLyricist: '',
+  /** 加载中的文案 */
+  loadingText: '音频资源加载中，请稍后…',
 });
 const browserInfo = browser();
 let offset_duration = 0;
@@ -1693,3 +1696,13 @@ watch(
     }
   }
 )
+
+/** 刷新谱面 */
+export const refreshMusicSvg = () => {
+  state.loadingText = '正在加载中，请稍等…'
+  if(state.isSingleLine){
+    // 销毁旋律线
+    destroySmoothAnimation()
+  }
+  musicScoreRef.value?.refreshMusicScore()
+}

src/view/audio-list/index.module.less

@@ -65,4 +65,25 @@
             background-size: 100% 100%;
         }
     }
+}
+
+.loadingPop {
+    position: fixed;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    width: 100vw;
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    z-index: 10000;
+    background: rgba(0, 0, 0, .6);
+    .loadingTip {
+        font-size: 14px;
+        color: #fff;
+        margin-top: 14px;
+    }
 }

src/view/audio-list/index.tsx

@@ -363,7 +363,7 @@ export default defineComponent({
 		// console.log(state.playMode, state.midiUrl);
 		return () => (
 			<>
-				<Loading/>
+				<Loading tipText={state.loadingText} />
 				<div class={styles.audioList}>
 					{state.playMode === "MIDI" && state.speed != 0 && (
 						<iframe

src/view/audio-list/loading.tsx

@@ -1,12 +1,21 @@
-import { defineComponent, ref } from "vue"
+import { defineComponent, ref, watch } from "vue"
 import icon_loading_img from "./img/icon_loading_img.png"
 import { Progress } from "vant"
 import styles from "./index.module.less"
 import state from "/src/state"
+import { Vue3Lottie } from "vue3-lottie";
+import animBg from "./img/refresh_anim.json";
 
 export default defineComponent({
    name: "loading",
-   setup() {
+   props: {
+		/** 提示文案 */
+		tipText: {
+			type: String,
+			default: '',
+		},
+	},
+   setup(props) {
       function fakeLoadingProgress(duration = 2000, callback: (num: number) => void) {
          let startTime = Date.now()
          let progress = 0
@@ -25,14 +34,19 @@ export default defineComponent({
       fakeLoadingProgress(2000, num => {
          loadingProress.value = num
       })
+      watch(
+         () => state.audioDone,
+         () => {
+           if (!state.audioDone) {
+            loadingProress.value = 0
+           }
+         }
+       );
       return () =>
          !state.audioDone && (
-            <div class={styles.loading}>
-               <div class={styles.loadingWrap}>
-                  <img class={styles.loadingIcon} src={icon_loading_img} />
-                  <Progress percentage={loadingProress.value} />
-                  <div class={styles.loadingTip}>音频资源加载中，请稍后</div>
-               </div>
+            <div class={styles.loadingPop}>
+               <Vue3Lottie animationData={animBg}></Vue3Lottie>
+               <div class={styles.loadingTip}>{props.tipText}</div>
             </div>
          )
    }

src/view/music-score/index.tsx

@@ -9,6 +9,7 @@ import queryString from "query-string";
 import { getGradualLengthByXml } from "/src/helpers/calcSpeed";
 import { resetFormate, resetGivenFormate, setGlobalMusicSheet } from "/src/helpers/customMusicScore"
 import { setGlobalData } from "/src/utils";
+import Loading from "/src/view/audio-list/loading"
 
 export const musicRenderTypeKey = "musicRenderType";
 let osmd: any = null;
@@ -17,6 +18,7 @@ const musicData = reactive({
 	isRenderLoading: true,
 	score: "",
 	containerWidth: 0,
+	isRefreshLoading: false,
 });
 
 /** 重新渲染曲谱 */
@@ -57,7 +59,7 @@ export default defineComponent({
 			default: false,
 		},
 	},
-	setup(props, { emit, slots }) {
+	setup(props, { emit, slots, expose }) {
 		/** 设置 曲谱模式,五线谱还是简谱 */
 		const setRenderType = () => {
 			const musicRenderType: any = sessionStorage.getItem(props.renderTypeKey || musicRenderTypeKey);
@@ -162,6 +164,34 @@ export default defineComponent({
 			}
 			return result;
 		});
+
+		/** 刷新曲谱 */
+		const refreshMusicScore = async () => {
+			console.log('刷新谱面123')
+			const container = document.getElementById('musicAndSelection'), svgDom = document.getElementById('osmdCanvasPage1'), selectionBox = document.getElementById('selectionBox');
+			if (container && svgDom) {
+				container?.removeChild(svgDom)
+				container?.removeChild(selectionBox)
+			}
+			state.vfmeasures = [];
+			musicData.showSelection = false;
+			state.osmd.clear();
+			musicData.isRenderLoading = true;
+			musicData.isRefreshLoading = true;
+			state.audioDone = false;
+			getContainerWidth();
+			setRenderType();
+			await getXML();
+			await init();
+			musicData.isRenderLoading = false;
+			musicData.isRefreshLoading = false;
+			state.audioDone = true;
+			musicData.showSelection = true;
+		}
+		expose({
+			refreshMusicScore,
+		})
+
 		return () => (
 			<div
 				id="musicAndSelection"

src/view/selection/index.tsx

@@ -203,6 +203,8 @@ export default defineComponent({
 			return []
 		})
 		onMounted(() => {
+			selectData.notes = [];
+			selectData.staves = [];
 			calcNoteData();
 			// 初始化谱面可移动的元素位置
 			try {