Merge branch 'iteration-20240808-music-score' into jenkins

src/views/attend-class/component/musicScore.tsx

@@ -1,144 +1,144 @@
-import { defineComponent, onMounted, onUnmounted, ref, watch } from 'vue';
-import { NSkeleton } from 'naive-ui';
-import styles from './musicScore.module.less';
-import { usePageVisibility } from '@vant/use';
-import { useUserStore } from '/src/store/modules/users';
-import { vaildMusicScoreUrl } from '/src/utils/urlUtils';
-import { iframeDislableKeyboard } from '/src/utils';
-
-export default defineComponent({
-  name: 'musicScore',
-  props: {
-    music: {
-      type: Object,
-      default: () => ({})
-    },
-    activeModel: {
-      type: Boolean
-    },
-    /** 当前是否为选中状态 */
-    activeStatus: {
-      type: Boolean
-    },
-    imagePos: {
-      type: String,
-      default: 'left'
-    }
-  },
-  emits: ['setIframe'],
-  setup(props, { emit }) {
-    const userStore = useUserStore();
-    const isLoading = ref(false);
-    const pageVisibility = usePageVisibility();
-    /** 页面显示和隐藏 */
-    watch(pageVisibility, value => {
-      console.log('🚀 ~ value:', value);
-      if (value == 'hidden') {
-        isLoading.value = false;
-      }
-    });
-    const iframeRef = ref();
-    const isLoaded = ref(false);
-    const renderError = ref(false);
-    const renderSuccess = ref(false);
-    // const origin = /(localhost|192)/.test(location.host)
-    //   ? 'https://test.lexiaoya.cn/instrument'
-    //   : // 'http://localhost:3000/instrument.html'
-    //     location.origin + '/instrument';
-    const src = `${vaildMusicScoreUrl()}/instrument/?v=${+new Date()}&showGuide=true&platform=pc&zoom=1.2&modelType=practise&id=${
-      props.music.content
-    }&Authorization=${userStore.getToken}&imagePos=${props.imagePos}`;
-    const checkView = () => {
-      fetch(src)
-        .then(() => {
-          renderSuccess.value = true;
-          renderError.value = false;
-        })
-        .catch(() => {
-          renderError.value = true;
-        });
-    };
-    watch(
-      () => props.music,
-      () => {
-        if (renderSuccess.value) return;
-        renderError.value = false;
-        if (props.music.display) {
-          checkView();
-        }
-      }
-    );
-
-    // 去云教练完整版
-    // const gotoAccomany = () => {
-    //   if (isLoading.value) return;
-    //   if (!browserInfo.ios) {
-    //     isLoading.value = true;
-    //   }
-    //   // const parmas = qs.stringify({
-    //   //   id: props.music.content
-    //   // });
-    //   // let src = `${location.origin}/orchestra-music-score/?` + parmas
-    //   const src = `https://test.lexiaoya.cn/orchestra-music-score/?_t=1687590480955&id=11707&modelType=practice&modeType=json&Authorization=bearer eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJhdWQiOlsib2F1dGgyLXJlc291cmNlIl0sImNsaWVudFR5cGUiOiJCQUNLRU5EIiwidXNlcl9uYW1lIjoiMTgxNjI4NTU4MDAiLCJzY29wZSI6WyJhbGwiXSwidXNlcklkIjoiMTAwMDE0OSIsImF1dGhvcml0aWVzIjpbIjE4MTYyODU1ODAwIl0sImp0aSI6IjY0MzA2NjllLTE5NGItNDk3Yy1hMDQ5LWM4YWUxMGU0NDNiOCIsImNsaWVudF9pZCI6ImptZWR1LWJhY2tlbmQifQ.aeJ0o-lSfx1Ok-YptZuC-AUY6M7k3LK9rr0Bmx7sj81pPt2HDiDqeT2PuriYdJacxWnxboyhdG_lwU0QK-W-vON97c45NQpSEFLVpZ0m1xdIqwllwf20xhyj5YJwdOFUzxf1TNEfGsHZg66J7wEJQBSzlmQwcxmEE5lqLVD8o_3f2SBqnWCj9RqE4air7FUemllMnZiu8HsS-TKtLDaGa_XW8Yb_Zjzzz6r5UcYNI-C1uKPXg18o1dhHBJ8O-Pl0U8WivPRub_opvO2NSn5L9YtPt7Dd50UeSwaIOdMeCGdii1bg__h77Stek1_5IaZLYkoo2gvmUA-xk09TwCQBpA`;
-    //   postMessage(
-    //     {
-    //       api: 'openAccompanyWebView',
-    //       content: {
-    //         url: src,
-    //         orientation: 0,
-    //         isHideTitle: true,
-    //         statusBarTextColor: false,
-    //         isOpenLight: true
-    //       }
-    //     },
-    //     () => {
-    //       if (browserInfo.ios) {
-    //         isLoading.value = true;
-    //       }
-    //     }
-    //   );
-    // };
-
-    watch(
-      () => props.activeModel,
-      () => {
-        if (iframeRef.value.contentWindow && props.activeStatus) {
-          // console.log(
-          //   iframeRef.value.contentWindow,
-          //   props.activeModel,
-          //   'iframeRef'
-          // );
-          iframeRef.value.contentWindow.postMessage(
-            {
-              api: 'attendClassBarStatus',
-              hideMenu: !props.activeModel
-            },
-            '*'
-          );
-        }
-      }
-    );
-
-    return () => (
-      <div class={styles.musicScore}>
-        <iframe
-          ref={iframeRef}
-          onLoad={(val: any) => {
-            emit('setIframe', iframeRef.value);
-            isLoaded.value = true;
-            iframeDislableKeyboard(val.target);
-          }}
-          class={[styles.container, 'musicIframe']}
-          frameborder="0"
-          src={src}></iframe>
-        {isLoaded.value && (
-          <div class={styles.skeletonWrap}>
-            <div>
-              <NSkeleton text repeat={8} />
-            </div>
-          </div>
-        )}
-      </div>
-    );
-  }
-});
+import { defineComponent, onMounted, onUnmounted, ref, watch } from 'vue';
+import { NSkeleton } from 'naive-ui';
+import styles from './musicScore.module.less';
+import { usePageVisibility } from '@vant/use';
+import { useUserStore } from '/src/store/modules/users';
+import { vaildMusicScoreUrl } from '/src/utils/urlUtils';
+import { iframeDislableKeyboard } from '/src/utils';
+
+export default defineComponent({
+  name: 'musicScore',
+  props: {
+    music: {
+      type: Object,
+      default: () => ({})
+    },
+    activeModel: {
+      type: Boolean
+    },
+    /** 当前是否为选中状态 */
+    activeStatus: {
+      type: Boolean
+    },
+    imagePos: {
+      type: String,
+      default: 'left'
+    }
+  },
+  emits: ['setIframe'],
+  setup(props, { emit }) {
+    const userStore = useUserStore();
+    const isLoading = ref(false);
+    const pageVisibility = usePageVisibility();
+    /** 页面显示和隐藏 */
+    watch(pageVisibility, value => {
+      console.log('🚀 ~ value:', value);
+      if (value == 'hidden') {
+        isLoading.value = false;
+      }
+    });
+    const iframeRef = ref();
+    const isLoaded = ref(false);
+    const renderError = ref(false);
+    const renderSuccess = ref(false);
+    // const origin = /(localhost|192)/.test(location.host)
+    //   ? 'https://test.lexiaoya.cn/instrument'
+    //   : // 'http://localhost:3000/instrument.html'
+    //     location.origin + '/instrument';
+    const src = `${vaildMusicScoreUrl()}/instrument/?v=${+new Date()}&showGuide=true&showWebGuide=false&platform=pc&zoom=1.2&modelType=practise&id=${
+      props.music.content
+    }&Authorization=${userStore.getToken}&imagePos=${props.imagePos}`;
+    const checkView = () => {
+      fetch(src)
+        .then(() => {
+          renderSuccess.value = true;
+          renderError.value = false;
+        })
+        .catch(() => {
+          renderError.value = true;
+        });
+    };
+    watch(
+      () => props.music,
+      () => {
+        if (renderSuccess.value) return;
+        renderError.value = false;
+        if (props.music.display) {
+          checkView();
+        }
+      }
+    );
+
+    // 去云教练完整版
+    // const gotoAccomany = () => {
+    //   if (isLoading.value) return;
+    //   if (!browserInfo.ios) {
+    //     isLoading.value = true;
+    //   }
+    //   // const parmas = qs.stringify({
+    //   //   id: props.music.content
+    //   // });
+    //   // let src = `${location.origin}/orchestra-music-score/?` + parmas
+    //   const src = `https://test.lexiaoya.cn/orchestra-music-score/?_t=1687590480955&id=11707&modelType=practice&modeType=json&Authorization=bearer eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJhdWQiOlsib2F1dGgyLXJlc291cmNlIl0sImNsaWVudFR5cGUiOiJCQUNLRU5EIiwidXNlcl9uYW1lIjoiMTgxNjI4NTU4MDAiLCJzY29wZSI6WyJhbGwiXSwidXNlcklkIjoiMTAwMDE0OSIsImF1dGhvcml0aWVzIjpbIjE4MTYyODU1ODAwIl0sImp0aSI6IjY0MzA2NjllLTE5NGItNDk3Yy1hMDQ5LWM4YWUxMGU0NDNiOCIsImNsaWVudF9pZCI6ImptZWR1LWJhY2tlbmQifQ.aeJ0o-lSfx1Ok-YptZuC-AUY6M7k3LK9rr0Bmx7sj81pPt2HDiDqeT2PuriYdJacxWnxboyhdG_lwU0QK-W-vON97c45NQpSEFLVpZ0m1xdIqwllwf20xhyj5YJwdOFUzxf1TNEfGsHZg66J7wEJQBSzlmQwcxmEE5lqLVD8o_3f2SBqnWCj9RqE4air7FUemllMnZiu8HsS-TKtLDaGa_XW8Yb_Zjzzz6r5UcYNI-C1uKPXg18o1dhHBJ8O-Pl0U8WivPRub_opvO2NSn5L9YtPt7Dd50UeSwaIOdMeCGdii1bg__h77Stek1_5IaZLYkoo2gvmUA-xk09TwCQBpA`;
+    //   postMessage(
+    //     {
+    //       api: 'openAccompanyWebView',
+    //       content: {
+    //         url: src,
+    //         orientation: 0,
+    //         isHideTitle: true,
+    //         statusBarTextColor: false,
+    //         isOpenLight: true
+    //       }
+    //     },
+    //     () => {
+    //       if (browserInfo.ios) {
+    //         isLoading.value = true;
+    //       }
+    //     }
+    //   );
+    // };
+
+    watch(
+      () => props.activeModel,
+      () => {
+        if (iframeRef.value.contentWindow && props.activeStatus) {
+          // console.log(
+          //   iframeRef.value.contentWindow,
+          //   props.activeModel,
+          //   'iframeRef'
+          // );
+          iframeRef.value.contentWindow.postMessage(
+            {
+              api: 'attendClassBarStatus',
+              hideMenu: !props.activeModel
+            },
+            '*'
+          );
+        }
+      }
+    );
+
+    return () => (
+      <div class={styles.musicScore}>
+        <iframe
+          ref={iframeRef}
+          onLoad={(val: any) => {
+            emit('setIframe', iframeRef.value);
+            isLoaded.value = true;
+            iframeDislableKeyboard(val.target);
+          }}
+          class={[styles.container, 'musicIframe']}
+          frameborder="0"
+          src={src}></iframe>
+        {isLoaded.value && (
+          <div class={styles.skeletonWrap}>
+            <div>
+              <NSkeleton text repeat={8} />
+            </div>
+          </div>
+        )}
+      </div>
+    );
+  }
+});

src/views/xiaoku-music/index.tsx

@@ -94,7 +94,7 @@ export default defineComponent({
       showMusicImg: 'staff' as 'staff' | 'first' | 'fixed', // 显示哪种曲谱
       trackList: [] as any, // 可筛选的分轨信息
       showTransBtn: true, // 是否显示转谱按钮
-      trackName: '切换声轨' as any // 分轨名字
+      trackName: '切换声部' as any // 分轨名字
     });
     const subjects = ref('');
     const showGuide = ref(false);
@@ -176,6 +176,12 @@ export default defineComponent({
         });
         data.list = [...data.list, ...res.data.rows];
         data.finshed = res.data.rows.length < forms.rows;
+
+        // 是否显示总谱
+        const selectMusic = data.list[data.listActive];
+        if (selectMusic && selectMusic.isScoreRender && data.listActive === 0) {
+          data.musicInstrumentIndex = 999;
+        }
       } else {
         data.finshed = true;
       }
@@ -245,6 +251,8 @@ export default defineComponent({
       });
       obv.observe(spinRef.value);
       analyzeXml();
+
+      musicIframeLoad();
       window.addEventListener('message', iframeHandle);
     });
     onUnmounted(() => {
@@ -338,7 +346,7 @@ export default defineComponent({
       return temp;
     });
 
-    // 根据musicSheetType返回的值，判断是否显示切换声轨按钮
+    // 根据musicSheetType返回的值，判断是否显示切换声部按钮
     const isEnsemble = computed(() => {
       // const details: any = data.list[data.listActive];
       // const musics: any = details?.musicalInstruments;
@@ -398,6 +406,8 @@ export default defineComponent({
       }&modelType=practise&modeType=json&Authorization=${token}&isPreView=true&part-index=${
         data.musicInstrumentIndex
       }&musicRenderType=${musicRenderType}`;
+
+      console.log(data.iframeSrc, 'iframeSrc');
     };
 
     /** 音频控制 */
@@ -553,6 +563,20 @@ export default defineComponent({
         .filter((item: any) => item.canselect)
         .sort((a: any, b: any) => a.sortId - b.sortId);
       data.trackList = arr;
+
+      // 是否显示总谱
+      const selectMusic = data.list[data.listActive];
+      if (selectMusic) {
+        selectMusic.isScoreRender &&
+          data.trackList.unshift({
+            label: '总谱',
+            value: 999,
+            sortId: 0,
+            canselect: true,
+            track: 999
+          });
+      }
+
       // let track = arr.find(
       //   (item: any) => item.value === data.musicInstrumentIndex
       // )?.track;
@@ -599,25 +623,25 @@ export default defineComponent({
         analyzeXml();
       }
     );
-    watch(
-      () => data.musicInstrumentIndex,
-      async () => {
-        data.trackName =
-          data.trackList.find(
-            (item: any) => item.value === data.musicInstrumentIndex
-          )?.label || '切换声轨';
-        musicIframeLoad();
-      }
-    );
+    // watch(
+    //   () => data.musicInstrumentIndex,
+    //   async () => {
+    //     data.trackName =
+    //       data.trackList.find(
+    //         (item: any) => item.value === data.musicInstrumentIndex
+    //       )?.label || '切换声部';
+    //     musicIframeLoad();
+    //   }
+    // );
     // 合奏曲谱转换时，更新曲谱信息
-    watch(
-      () => data.showMusicImg,
-      () => {
-        if (isEnsemble.value) {
-          musicIframeLoad();
-        }
-      }
-    );
+    // watch(
+    //   () => data.showMusicImg,
+    //   () => {
+    //     if (isEnsemble.value) {
+    //       musicIframeLoad();
+    //     }
+    //   }
+    // );
 
     const musicImg = computed(() => {
       let imgs: any = [];
@@ -808,8 +832,17 @@ export default defineComponent({
                             styles.item,
                             data.listActive === index && styles.active
                           ]}
-                          onClick={() => {
+                          onClick={async () => {
                             handleChange(item);
+                            await analyzeXml();
+                            // 是否显示总谱
+                            const selectMusic = data.list[data.listActive];
+                            console.log(selectMusic, 'selected music');
+                            if (selectMusic && selectMusic.isScoreRender) {
+                              data.musicInstrumentIndex = 999;
+                            } else {
+                              data.musicInstrumentIndex = 0;
+                            }
                             musicIframeLoad();
                           }}>
                           <div class={styles.img}>
@@ -961,11 +994,11 @@ export default defineComponent({
                     } else if (data.showMusicImg === 'staff') {
                       lineType = 'staff';
                     }
-                    let src = `${vaildMusicScoreUrl()}/instrument?v=${+new Date()}&platform=pc&showGuide=true&id=${
+                    let src = `${vaildMusicScoreUrl()}/instrument?v=${+new Date()}&platform=pc&id=${
                       activeItem.value.id
                     }&Authorization=${
                       user.getToken
-                    }&musicRenderType=${lineType}&showGuide=true&part-index=${
+                    }&musicRenderType=${lineType}&showGuide=true&showWebGuide=false&part-index=${
                       data.musicInstrumentIndex
                     }`;
 
@@ -997,6 +1030,13 @@ export default defineComponent({
                       onUpdate:value={async (val: any) => {
                         await analyzeXml();
                         //
+
+                        data.trackName =
+                          data.trackList.find(
+                            (item: any) =>
+                              item.value === data.musicInstrumentIndex
+                          )?.label || '切换声部';
+                        musicIframeLoad();
                       }}
                       // key={item.id}
                       class={[styles.popSelect]}>
@@ -1015,6 +1055,9 @@ export default defineComponent({
                       onUpdate:value={async (val: any) => {
                         data.showMusicImg = val;
                         // musicIframeLoad();
+                        if (isEnsemble.value) {
+                          musicIframeLoad();
+                        }
                       }}
                       // key={item.id}
                       class={[styles.popTrans]}>
@@ -1043,7 +1086,9 @@ export default defineComponent({
                         // opacity: loading.value ? 0 : 1
                       }}
                       src={data.iframeSrc}
-                      onLoad={musicIframeLoad}></iframe>
+                      onLoad={() => {
+                        // musicIframeLoad();
+                      }}></iframe>
                   ) : (
                     <>
                       {/* <TransitionGroup name="van-fade"> */}

src/views/xiaoku-music/type.ts

@@ -21,6 +21,7 @@ export interface IMusicItem {
   musicJianImg: string;
   musicSheetType: string;
   xmlFileUrl?: string;
+  isScoreRender?: boolean;
   multiTracksSelection?: string;
   musicalInstruments?: any[];
   audioPlayTypeArray?: any[];