更新显示pdf的

src/views/xiaoku-music/index.tsx

@@ -91,6 +91,7 @@ export default defineComponent({
       previewUrl: '',
       showCloseBtn: true,
       audioPlayTypeList: [] as any,
+      musicPdfUrl: "",
       iframeSrc: '',
       showMusicImg: 'staff' as 'staff' | 'first' | 'fixed', // 显示哪种曲谱
       trackList: [] as any, // 可筛选的分轨信息
@@ -409,12 +410,51 @@ export default defineComponent({
           : data.showMusicImg === 'staff'
           ? 'staff'
           : 'staff';
-      data.iframeSrc = `${vaildMusicScoreUrl()}/instrument/?id=${
-        details?.id
-      }&modelType=practise&modeType=json&Authorization=${token}&isPreView=true&part-index=${
-        data.musicInstrumentIndex
-      }&musicRenderType=${musicRenderType}`;
 
+      
+          // pdf
+      const musicSheetType = details?.musicSheetType;
+      let musicPdfUrl = ''
+      
+      if(musicSheetType === "SINGLE" || data.musicInstrumentIndex === 999) {
+        if( data.showMusicImg === "first") {
+          musicPdfUrl = details.firstPdfUrl
+        } else if(data.showMusicImg === 'fixed') {
+          musicPdfUrl = details.jianPdfUrl
+        } else {
+          musicPdfUrl = details.musicPdfUrl
+        }
+      } else {
+        const trackList = data.trackList || []
+        const selectTrack = trackList.find((item: any) => item.value === data.musicInstrumentIndex)
+        const background = details.background || []
+        const selectItem = background.find((item: any) => item.track === selectTrack?.track)
+        // console.log({
+        //   selectItem,
+        //   selectTrack,
+        //   background
+        // }, '11111')
+        if(selectItem) {
+          if( data.showMusicImg === "first") {
+            musicPdfUrl = selectItem.firstPdfUrl
+          } else if(data.showMusicImg === 'fixed') {
+            musicPdfUrl = selectItem.jianPdfUrl
+          } else {
+            musicPdfUrl = selectItem.musicPdfUrl
+          }
+        }
+      }
+      data.musicPdfUrl = musicPdfUrl
+      if(musicPdfUrl) {
+        // data.iframeSrc = `http://localhost:9002/pdf/web/viewer.html?file=${encodeURIComponent(data.musicPdfUrl)}&t=${Date.now()}`;
+        data.iframeSrc = `${location.origin}/pdf/web/viewer.html?file=${encodeURIComponent(data.musicPdfUrl)}&t=${Date.now()}`;
+      } else {
+        data.iframeSrc = `${vaildMusicScoreUrl()}/instrument/?id=${
+          details?.id
+        }&modelType=practise&modeType=json&Authorization=${token}&isPreView=true&part-index=${
+          data.musicInstrumentIndex
+        }&musicRenderType=${musicRenderType}`;
+      }
       console.log(data.iframeSrc, 'iframeSrc');
     };
 
@@ -571,7 +611,6 @@ 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) {
@@ -717,84 +756,6 @@ export default defineComponent({
                     {item.label}
                   </NButton>
                 ))}
-
-                {/* <div
-                  {...{
-                    id: 'music-0'
-                  }}>
-                  <NSpace
-                    style={{ width: '100%' }}
-                    size={[24, 12]}
-                    wrapItem={false}>
-                    {data.tags.map(item =>
-                      item.instruments && item.instruments.length > 1 ? (
-                        <NPopselect
-                          options={item.instruments}
-                          trigger="hover"
-                          v-model:value={data.tagIndex}
-                          scrollable
-                          onUpdate:value={() => {
-                            // onSearch();
-                            data.reshing = true;
-                            document
-                              .querySelector('.musicList-container')
-                              ?.scroll(0, 0);
-                            handleGetList();
-                          }}
-                          key={item.value}
-                          class={[styles.popSelect1]}>
-                          <NButton
-                            round
-                            textColor={
-                              selectChildObj(item.instruments).selected
-                                ? '#fff'
-                                : '#000'
-                            }
-                            color={
-                              selectChildObj(item.instruments).selected
-                                ? '#198CFE'
-                                : '#fff'
-                            }
-                            type={
-                              selectChildObj(item.instruments).selected
-                                ? 'primary'
-                                : 'default'
-                            }
-                            class={[
-                              styles.textBtn,
-                              selectChildObj(item.instruments).selected &&
-                                styles.textBtnActive
-                            ]}>
-                            {selectChildObj(item.instruments).name || item.name}
-                            <i class={styles.iconArrow}></i>
-                          </NButton>
-                        </NPopselect>
-                      ) : (
-                        <NButton
-                          round
-                          textColor={
-                            data.tagIndex === item.value ? '#fff' : '#000'
-                          }
-                          color={
-                            data.tagIndex === item.value ? '#198CFE' : '#fff'
-                          }
-                          type={
-                            data.tagIndex === item.value ? 'primary' : 'default'
-                          }
-                          onClick={() => {
-                            data.tagIndex = item.value || 0;
-                            data.reshing = true;
-                            document
-                              .querySelector('.musicList-container')
-                              ?.scroll(0, 0);
-                            handleGetList();
-                          }}>
-                          {item.name}
-                        </NButton>
-                      )
-                    )}
-                  </NSpace>
-                </div> */}
               </NSpace>
             </div>
 
@@ -984,9 +945,10 @@ export default defineComponent({
               </div>
 
               <div class={styles.musicStaff}>
-                <div class={styles.musicName}>
+                {!data.musicPdfUrl && <div class={styles.musicName}>
                   {activeItem.value.musicSheetName}
-                </div>
+                </div>}
+                
 
                 <img
                   id="music-2"
@@ -1096,7 +1058,17 @@ export default defineComponent({
 
                 <div class={styles.staffImgs}>
                   {data.iframeSrc && (isEnsemble.value || musicImg.value.length === 0) ? (
-                    <iframe
+                    data.musicPdfUrl ? <iframe
+                      id="staffIframeRef"
+                      style={{
+                        width: '100%',
+                        height: '100%',
+                        // opacity: loading.value ? 0 : 1
+                      }}
+                      src={data.iframeSrc}
+                      onLoad={() => {
+                        // musicIframeLoad();
+                      }}></iframe> : <iframe
                       id="staffIframeRef"
                       style={{
                         width: '100%',