修改曲谱展示

src/views/music/music-detail/index.tsx

@@ -67,6 +67,11 @@ import { getInstrumentName } from '@/constant/instruments'
 import { getUploadSign, onOnlyFileUpload } from '@/helpers/oss-file-upload'
 import { svgtopng } from '@/tenant/music/music-detail/formatSvgToImg'
 import { useThrottleFn } from '@vueuse/core'
+import {
+  formatXML,
+  getCustomInfo,
+  onlyVisible
+} from '@/tenant/music/music-detail/instrument'
 
 export const getAssetsHomeFile = (fileName: string) => {
   const path = `../component/images/${fileName}`
@@ -93,6 +98,12 @@ export default defineComponent({
     const firstList = ref<Array<any>>([])
     const fixedList = ref<Array<any>>([])
     const staffList = ref<Array<any>>([])
+
+    const defaultImgs = ref({
+      first: false,
+      fixed: false,
+      staff: false
+    })
     const accompanyUrl = ref<string>('')
     const downloadStatus = ref<boolean>(false)
     const staff = reactive({
@@ -119,6 +130,18 @@ export default defineComponent({
     const onChangeStaff = (type: string) => {
       staff.radio = type
       staff.status = false
+      if (type == 'first' && !defaultImgs.value.first) {
+        loading.value = false
+        resetRenderPage('first', staffData.musicXml)
+      } else if (type == 'fixed' && !defaultImgs.value.fixed) {
+        loading.value = false
+        resetRenderPage('fixed', staffData.musicXml)
+      } else {
+        if (!defaultImgs.value.staff) {
+          loading.value = false
+          resetRenderPage('staff', staffData.musicXml)
+        }
+      }
     }
     watch(
       () => staff.radio,
@@ -144,7 +167,7 @@ export default defineComponent({
             state.platformType === 'TEACHER' ? '/api-teacher' : '/api-student'
         })
         musicDetail.value = res.data
-        console.log(musicDetail.value.notation, 'musicDetail')
+        // console.log(musicDetail.value.notation, 'musicDetail')
         // 取原音，如果有多个则默认第一个
         const background = res.data.background
         audioFileUrl.value =
@@ -172,6 +195,17 @@ export default defineComponent({
         //   false
         // )
         // }
+        // 初始化默认数据是否有值
+        if (firstList.value.length > 0) {
+          defaultImgs.value.first = true
+        }
+        if (fixedList.value.length > 0) {
+          defaultImgs.value.fixed = true
+        }
+        if (staffList.value.length > 0) {
+          defaultImgs.value.staff = true
+        }
+
         nextTick(() => {
           renderStaff()
         })
@@ -371,7 +405,7 @@ export default defineComponent({
           imgs.push(imgurl)
         }
         showImg.value = imgs
-        console.log(showImg.value, 'showImg.value')
+        // console.log(showImg.value, 'showImg.value', e.data)
 
         loading.value = e.data.loading
       }
@@ -422,7 +456,7 @@ export default defineComponent({
             userId: state.user.data?.userId
           }
         })
-        console.log(res)
+        // console.log(res)
         setTimeout(() => {
           musicDetail.value.coursewareId = res.data.id || ''
           Toast('添加成功')
@@ -598,10 +632,10 @@ export default defineComponent({
       单簧管: 2,
       中音单簧管: 3,
       低音单簧管: 4,
-      高音萨克斯管: 5,
-      中音萨克斯管: 6,
-      次中音萨克斯管: 7,
-      低音萨克斯管: 8,
+      高音萨克斯风: 5,
+      中音萨克斯风: 6,
+      次中音萨克斯风: 7,
+      低音萨克斯风: 8,
       小号: 9,
       长号: 10,
       圆号: 11,
@@ -624,68 +658,113 @@ export default defineComponent({
           const res = await umiRequest.get(musicDetail.value?.xmlFileUrl, {
             mode: 'cors'
           })
-          const xmlParse = new DOMParser().parseFromString(res, 'text/xml')
-          const parts = xmlParse.getElementsByTagName('score-part')
-
-          const partList: any = []
-          for (let i = 0; i < parts.length; i++) {
-            const childDom = parts[i].children
-            for (let j = 0; j < childDom.length; j++) {
-              if (childDom[j].nodeName === 'part-name') {
-                partList.push({
-                  name: childDom[j].textContent,
-                  value: i
-                })
-              }
+          let partNames: string[] = []
+          const xml: any = new DOMParser().parseFromString(res, 'text/xml')
+          for (const item of xml.getElementsByTagName('part-name')) {
+            if (item.textContent) {
+              partNames.push(item.textContent)
             }
           }
+          partNames = partNames.filter(
+            (item: any) => !item?.toLocaleUpperCase()?.includes('COMMON')
+          )
+          const partList: any = []
+          for (let j = 0; j < partNames.length; j++) {
+            partList.push({
+              name: partNames[j],
+              value: j
+            })
+          }
           staffData.xmlPartList = partList
         }
 
-        // staffData.iframeSrc = `${location.origin}/osmd/index.html`
-        staffData.iframeSrc = `${location.origin}${location.pathname}osmd/index.html`
+        staffData.iframeSrc = `${location.origin}/osmd/index.html`
+        // staffData.iframeSrc = `${location.origin}${location.pathname}osmd/index.html`
         staffData.musicXml = musicDetail.value?.xmlFileUrl || ''
-        staffData.partList = musicDetail.value?.background || []
-        staffData.partList.forEach((part: any) => {
-          const item = staffData.xmlPartList.find(
-            item => item.name === part.track
-          )
+        const tempList = musicDetail.value?.background || []
+        const tempPartList = [] as any
+        staffData.xmlPartList.forEach((part: any) => {
+          const item = tempList.find((item: any) => item.track === part.name)
           if (item) {
-            part.index = item.value
+            tempPartList.push({
+              ...item,
+              index: part.value
+            })
           }
         })
+
+        staffData.partList = tempPartList
+
         staffData.tempPartList = JSON.parse(JSON.stringify(staffData.partList))
         staffData.partList = instrumentSort(staffData.partList)
         staffData.partXmlIndex = staffData.partList[0].index || 0
 
-        staffData.instrumentName = getInstrumentName(
-          staffData.partList[staffData.partIndex]?.track
-        )
+        staffData.instrumentName =
+          musicDetail.value?.musicSheetType === 'CONCERT'
+            ? getInstrumentName(staffData.partList[staffData.partIndex]?.track)
+            : ''
       } catch (error) {
         //
       }
     }
-    const musicIframeLoad = () => {
+    const musicIframeLoad = async () => {
       const iframeRef: any = document.getElementById('staffIframeRef')
       if (iframeRef && iframeRef.contentWindow.renderXml) {
-        iframeRef.contentWindow.renderXml(
-          staffData.musicXml,
-          staffData.partXmlIndex
-        )
+        const res = await umiRequest.get(staffData.musicXml, {
+          mode: 'cors'
+        })
+        const parseXmlInfo = getCustomInfo(res)
+        const xml = formatXML(parseXmlInfo.parsedXML)
+
+        const currentXml = onlyVisible(xml, staffData.partXmlIndex)
+        iframeRef.contentWindow.renderXml(currentXml, 0)
+
+        // iframeRef.contentWindow.renderXml(
+        //   staffData.musicXml,
+        //   staffData.partXmlIndex
+        // )
       }
     }
-    const resetRender = () => {
+    const resetRender = async () => {
       const iframeRef: any = document.getElementById('staffIframeRef')
       if (iframeRef && iframeRef.contentWindow.renderXml) {
-        iframeRef.contentWindow.resetRender(staffData.partXmlIndex)
+        loading.value = true
+        // iframeRef.contentWindow.resetRender(staffData.partXmlIndex)
+        const res = await umiRequest.get(staffData.musicXml, {
+          mode: 'cors'
+        })
+        const parseXmlInfo = getCustomInfo(res)
+        const xml = formatXML(parseXmlInfo.parsedXML)
+
+        const currentXml = onlyVisible(xml, staffData.partXmlIndex)
+        iframeRef.contentWindow.renderXml(currentXml, 0)
+
         staffData.instrumentName = getInstrumentName(
           staffData.partList[staffData.partIndex]?.track
         )
       }
     }
+
+    const resetRenderPage = async (type: string, xmlUrl: string) => {
+      const iframeRef: any = document.getElementById('staffIframeRef')
+      if (iframeRef && iframeRef.contentWindow.renderXml) {
+        loading.value = true
+        const res = await umiRequest.get(staffData.musicXml, {
+          mode: 'cors'
+        })
+        const parseXmlInfo = getCustomInfo(res)
+        const xml = formatXML(parseXmlInfo.parsedXML)
+
+        const currentXml = onlyVisible(xml, staffData.partXmlIndex)
+        iframeRef.contentWindow.resetRenderPage(type, currentXml)
+      }
+    }
     const partColumns = computed(() => {
       return staffData.partList.map((item: any, index: number) => {
-        const instrumentName = getInstrumentName(item.track)
+        const instrumentName =
+          musicDetail.value?.musicSheetType === 'CONCERT'
+            ? getInstrumentName(item.track)
+            : ''
         return {
           text: item.track + (instrumentName ? `(${instrumentName})` : ''),
           value: index,
@@ -697,7 +776,7 @@ export default defineComponent({
     return () => {
       return (
         <div class={styles.detail}>
-          <Sticky position="top">
+          <ColSticky position="top">
             <div ref={headers}>
               <ColHeader
                 background="transparent"
@@ -722,7 +801,7 @@ export default defineComponent({
                 }}
               />
             </div>
-          </Sticky>
+          </ColSticky>
 
           <img class={styles.bgImg} src={musicDetail.value?.titleImg} />
           <div class={styles.bgContent}></div>
@@ -730,7 +809,7 @@ export default defineComponent({
             class={styles.musicContainer}
             style={{
               marginTop: '16px',
-              height: `calc(100vh - ${heightInfo.value + 16 + 'px'})`
+              height: `calc(100vh - var(--header-height) - var(--bottom-height) - 16px)`
             }}
           >
             <Cell
@@ -848,7 +927,8 @@ export default defineComponent({
                     ? `(${staffData.instrumentName})`
                     : '')}
               </p>
-              {musicDetail.value?.musicSheetType === 'CONCERT' ? (
+              {musicDetail.value?.musicSheetType === 'CONCERT' ||
+              !defaultImgs.value[staff.radio] ? (
                 <>
                   {loading.value && (
                     <>
@@ -865,7 +945,13 @@ export default defineComponent({
                       opacity: loading.value ? 0 : 1
                     }}
                     src={staffData.iframeSrc}
-                    onLoad={musicIframeLoad}
+                    onLoad={() => {
+                      if (!defaultImgs.value[staff.radio]) {
+                        onChangeStaff(staff.radio)
+                      } else {
+                        musicIframeLoad()
+                      }
+                    }}
                   ></iframe>
                 </>
               ) : (
@@ -997,7 +1083,11 @@ export default defineComponent({
           </div>
 
           {musicDetail.value?.id && (
-            <ColSticky position="bottom" background="white">
+            <ColSticky
+              position="bottom"
+              background="white"
+              varName="--bottom-height"
+            >
               <div ref={footers}>
                 {/* 判断是否是免费的，或者已经购买过，是否从专辑过来的 */}
                 {buyState.value.play ||
@@ -1014,11 +1104,11 @@ export default defineComponent({
                         const item: any = partColumns.value.find(
                           (c: any) => c.value === staffData.partIndex
                         )
-                        const index = staffData.tempPartList.findIndex(
-                          (i: any) => i.track === item?.track
-                        )
+                        // const index = staffData.tempPartList.findIndex(
+                        //   (i: any) => i.track === item?.track
+                        // )
                         musicBuy(musicDetail.value, () => {}, {
-                          'part-index': index || 0,
+                          'part-index': item?.xmlValue || 0,
                           sett: staff.radio
                         })
                       }, 500)