修改

src/views/co-ai/index.tsx

@@ -277,7 +277,7 @@ export default defineComponent({
           ...musicForms,
           audioPlayTypes: data.audioPlayTypeItem.value
             ? data.audioPlayTypeItem.value === 'PLAY_SING'
-            ? ['PLAY', 'SING']
+              ? ['PLAY', 'SING']
               : [data.audioPlayTypeItem.value]
             : []
           // musicalInstrumentId: data.subjectItem.value || null
@@ -323,9 +323,9 @@ export default defineComponent({
     const musicIframeLoad = () => {
       const token = storage.get(ACCESS_TOKEN);
       const details = data.musics[data.musicIndex];
-      if(!details?.id){
-        data.iframeSrc = ""
-        return
+      if (!details?.id) {
+        data.iframeSrc = '';
+        return;
       }
       // 如果在配置里面匹配不到，则默认显示五线谱
       const musicRenderType =
@@ -376,18 +376,18 @@ export default defineComponent({
 
     // 判断 值当前有没有图片
     const isMusicImg = computed(() => {
-      const musicsData = data.musics[data.musicIndex]
-      if(data.showMusicImg === 'first' && musicsData?.musicFirstImg){
-        return true
+      const musicsData = data.musics[data.musicIndex];
+      if (data.showMusicImg === 'first' && musicsData?.musicFirstImg) {
+        return true;
       }
-      if(data.showMusicImg === 'fixed' && musicsData?.musicJianImg){
-        return true
+      if (data.showMusicImg === 'fixed' && musicsData?.musicJianImg) {
+        return true;
       }
-      if(musicsData?.musicImg) {
-        return true
+      if (musicsData?.musicImg) {
+        return true;
       }
-      return false
-    })
+      return false;
+    });
 
     // 判断是否可转谱 - 为空也可以转谱
     const checkConverTible = (isConvertibleScore: any, scoreType: string) => {
@@ -445,7 +445,7 @@ export default defineComponent({
     // 解析xml，获取分轨信息
     const analyzeXml = async () => {
       const details = data.musics[data.musicIndex];
-      console.log(details?.musicSheetType, 'details?.musicSheetType')
+      console.log(details?.musicSheetType, 'details?.musicSheetType');
       if (details?.musicSheetType === 'CONCERT') {
         if (details.xmlFileUrl) {
           const res = await fetch(details.xmlFileUrl).then(response =>
@@ -546,7 +546,9 @@ export default defineComponent({
           ?.getElementsByTagName('score-part') || [];
       const partListNames = Array.from(partList).map(
         (item: any) =>
-          item.getElementsByTagName('part-name')?.[0]?.textContent?.trim() || item.getAttribute('id') || ''
+          item.getElementsByTagName('part-name')?.[0]?.textContent?.trim() ||
+          item.getAttribute('id') ||
+          ''
       );
       const parts: any = xmlParse.getElementsByTagName('part');
 
@@ -586,8 +588,8 @@ export default defineComponent({
             track: item
           };
         })
-        .filter((item: any) => item.canselect)
-        //.sort((a: any, b: any) => a.sortId - b.sortId);
+        .filter((item: any) => item.canselect);
+      //.sort((a: any, b: any) => a.sortId - b.sortId);
       data.trackList = arr;
       // 是否显示总谱
       const selectMusic = data.musics[data.musicIndex];
@@ -786,7 +788,7 @@ export default defineComponent({
                     onSearch={async val => {
                       if (!data.loading) {
                         musicForms.keyword = val;
-                        data.musicIndex = 0
+                        data.musicIndex = 0;
                         await handleReset();
                         await analyzeXml();
                         musicIframeLoad();
@@ -934,11 +936,10 @@ export default defineComponent({
                 </div>
               )}
 
-              <div class={styles.ensembleSection} ref={downRef}>
+              <div class={styles.ensembleSection}>
                 <div class={styles['right-musicName']}>
                   {data.musics[data.musicIndex]?.musicSheetName}
                 </div>
-                {/* ensembleDetail */}
                 {data.iframeSrc && (isEnsemble.value || !isMusicImg.value) ? (
                   <div class={styles.iframeSection}>
                     <>
@@ -1020,6 +1021,68 @@ export default defineComponent({
                   </div>
                 )}
               </div>
+
+              <div
+                class={styles.ensembleSection}
+                ref={downRef}
+                style={{
+                  display: 'block',
+                  height: 'auto',
+                }}>
+                <div class={styles['right-musicName']}>
+                  {data.musics[data.musicIndex]?.musicSheetName}
+                </div>
+                <div>
+                  {data.showMusicImg === 'first' ? (
+                    <>
+                      {data.musics[data.musicIndex]?.musicFirstImg
+                        ?.split(',')
+                        .map((item: any, index: number) => {
+                          return (
+                            <img
+                              class={styles.staff}
+                              src={item + '?v=' + Date.now()}
+                              key={item}
+                              crossorigin="anonymous"
+                            />
+                          );
+                        })}
+                    </>
+                  ) : data.showMusicImg === 'fixed' ? (
+                    <>
+                      <TransitionGroup name="van-fade">
+                        {data.musics[data.musicIndex]?.musicJianImg
+                          ?.split(',')
+                          .map((item: any, index: number) => {
+                            return (
+                              <img
+                                class={styles.staff}
+                                src={item + '?v=' + Date.now()}
+                                key={item}
+                                crossorigin="anonymous"
+                              />
+                            );
+                          })}
+                      </TransitionGroup>
+                    </>
+                  ) : (
+                    <>
+                      {data.musics[data.musicIndex]?.musicImg
+                        ?.split(',')
+                        .map((item: any, index: number) => {
+                          return (
+                            <img
+                              class={styles.staff}
+                              src={item + '?v=' + Date.now()}
+                              key={item}
+                              crossorigin="anonymous"
+                            />
+                          );
+                        })}
+                    </>
+                  )}
+                </div>
+              </div>
             </div>
 
             <div class={styles.rightBtns}>
@@ -1043,7 +1106,7 @@ export default defineComponent({
                 </Popover>
               )}
 
-              {(!isEnsemble.value && isMusicImg.value) && (
+              {!isEnsemble.value && isMusicImg.value && (
                 <img id="coai-2" src={icon_down} onClick={handleSave} />
               )}
               {data.musics[data.musicIndex]?.id && (
@@ -1119,7 +1182,7 @@ export default defineComponent({
               onClose={() => (data.showChangeVoice = false)}
               onConfirm={async (index: number) => {
                 data.selectMusicInstrumentIndex = index;
-                console.log(index, 'index-------------------')
+                console.log(index, 'index-------------------');
                 // await analyzeXml();
                 // data.iframeSrc = '';
                 musicIframeLoad();