修改更新

public/osmd/index.html

@@ -34,25 +34,30 @@
       drawTitle: false,
       drawPartNames: true,
       drawLyricist: false,
-      drawComposer: false
-      // drawingParameters: "compacttight" // don't display title, composer etc., smaller margins
+      drawComposer: false,
     });
+    osmd.setPageFormat('650x884')
     function getSvgPngToSize(osmd) {
       if (osmd) {
-        const imgList = ''
         if (osmd.Drawer.Backends.length > 0) {
-          var backend = osmd.Drawer.Backends[0]
-          var state = backend.ctx.state;
-          var width = backend.ctx.width / state.scale.x;
-          var height = backend.ctx.height / state.scale.y;
-          var cont = new XMLSerializer().serializeToString(
-            backend.ctx.svg
-          )
-          return {
-            img: cont,
-            width: width,
-            height: height
+          var imgList = []
+
+          for (var idx = 0, len = osmd.Drawer.Backends.length; idx < len; idx++) {
+            var backend = osmd.Drawer.Backends[idx]
+            var state = backend.ctx.state;
+            var width = backend.ctx.width / state.scale.x;
+            var height = backend.ctx.height / state.scale.y;
+            var cont = new XMLSerializer().serializeToString(
+              backend.ctx.svg
+            )
+
+            imgList.push({
+              img: cont,
+              width: width,
+              height: height,
+            })
           }
+          return imgList
         }
       } else {
         console.log('没有OSMD')
@@ -60,6 +65,7 @@
     }
     function render() {
       osmd.render();
+      // console.log(getSvgPngToSize(osmd), 'getSvgPngToSize(osmd)')
       window.parent.postMessage({
         api: 'musicStaffRender',
         loading: false,

src/tenant/music/music-detail/new-index.module.less

@@ -220,6 +220,10 @@
       margin-right: 6px;
     }
   }
+
+  .alumCollectItemActive {
+    opacity: 0.5;
+  }
 }
 
 .albumTips {

src/tenant/music/music-detail/new-index.tsx

@@ -77,7 +77,7 @@ export default defineComponent({
     const heightInfo = ref<any>('0')
     const musicDetail = ref<any>(null)
     const audioFileUrl = ref('')
-    let showImg = [] as any
+    const showImg = ref([] as any)
     const firstList = ref<Array<any>>([])
     const fixedList = ref<Array<any>>([])
     const staffList = ref<Array<any>>([])
@@ -112,11 +112,11 @@ export default defineComponent({
       () => staff.radio,
       (val: string) => {
         if (val == 'first') {
-          showImg = firstList.value
+          showImg.value = firstList.value
         } else if (val == 'fixed') {
-          showImg = fixedList.value
+          showImg.value = fixedList.value
         } else {
-          showImg = staffList.value
+          showImg.value = staffList.value
         }
       }
     )
@@ -136,8 +136,7 @@ export default defineComponent({
         const background = res.data.background
         audioFileUrl.value =
           background && background.length > 0 ? background[0].audioFileUrl : ''
-        // const arrImgs = res.data.musicImg ? res.data.musicImg.split(',') : []
-        showImg = res.data.musicImg ? res.data.musicImg.split(',') : []
+        showImg.value = res.data.musicImg ? res.data.musicImg.split(',') : []
         firstList.value = res.data.firstTone
           ? res.data.firstTone.split(',')
           : []
@@ -145,20 +144,6 @@ export default defineComponent({
           ? res.data.fixedTone.split(',')
           : []
         staffList.value = res.data.musicImg ? res.data.musicImg.split(',') : []
-        // if (!showImg.value) {
-        // setAccompanyUrl()
-        // window.addEventListener(
-        //   'message',
-        //   async e => {
-        //     // 给图片设置背景色
-        //     const tempCanvas = await imgToCanvas(e.data)
-        //     const img = convasToImg(tempCanvas)
-        //     //  开始上传图片
-        //     uploadFunction(img)
-        //   },
-        //   false
-        // )
-        // }
         nextTick(() => {
           renderStaff()
         })
@@ -240,7 +225,7 @@ export default defineComponent({
         await request.post(state.platformApi + '/open/music/sheet/img', {
           data: { musicSheetId: musicDetail.value.id, musicImg: imgurl }
         })
-        // showImg.value = imgurl
+        // showImg.value.value = imgurl
       } catch (e) {
         console.log(e)
       }
@@ -302,51 +287,48 @@ export default defineComponent({
       })
     }
 
-    const tenantObj = reactive({
-      policy: '',
-      signature: '',
-      key: '',
-      kssAccessKeyId: '',
-      acl: 'public-read',
-      name: ''
-    })
-
     const showLoading = async (e: any) => {
       // console.log(e, 'showLoading')
       if (e.data?.api === 'musicStaffRender') {
         const osmdImg = e.data.osmdImg
-        showImg = []
-        const img = await svgtopng(osmdImg.img, osmdImg.width, osmdImg.height)
-        const fileName =
-          route.query.id + state.user.data.userId + +new Date() + '.png'
-
-        const obj = {
-          filename: fileName,
-          bucketName: 'cloud-coach',
-          postData: {
+        showImg.value = []
+        const imgs: any = []
+        for (let i = 0; i < osmdImg.length; i++) {
+          const img = await svgtopng(
+            osmdImg[i].img,
+            osmdImg[i].width,
+            osmdImg[i].height
+          )
+          const fileName =
+            route.query.id + state.user.data.userId + +new Date() + '.png'
+          const obj = {
             filename: fileName,
+            bucketName: 'cloud-coach',
+            postData: {
+              filename: fileName,
+              acl: 'public-read',
+              key: fileName
+            }
+          }
+          const { data } = await getUploadSign(obj, true)
+          const dataObj = {
+            policy: data.policy,
+            signature: data.signature,
+            key: fileName,
+            KSSAccessKeyId: data.kssAccessKeyId,
             acl: 'public-read',
-            key: fileName
+            name: fileName
           }
+          const files = base64ToBlob(img)
+          const ossUploadUrl = getOssUploadUrl('cloud-coach')
+          const imgurl = await onOnlyFileUpload(ossUploadUrl, {
+            ...dataObj,
+            file: files
+          })
+          imgs.push(imgurl)
         }
-        const { data } = await getUploadSign(obj, true)
-
-        const dataObj = {
-          policy: data.policy,
-          signature: data.signature,
-          key: fileName,
-          KSSAccessKeyId: data.kssAccessKeyId,
-          acl: 'public-read',
-          name: fileName
-        }
-        const files = base64ToBlob(img)
-        const ossUploadUrl = getOssUploadUrl('cloud-coach')
-        const imgurl = await onOnlyFileUpload(ossUploadUrl, {
-          ...dataObj,
-          file: files
-        })
-        showImg = [imgurl]
-
+        showImg.value = imgs
+        console.log(showImg.value, 'showImg.value')
         loading.value = e.data.loading
       }
     }
@@ -362,25 +344,6 @@ export default defineComponent({
       }
 
       window.addEventListener('message', showLoading)
-
-      // useEventListener(document, 'scroll', evt => {
-      //   const { y } = useWindowScroll()
-      //   if (y.value > 20) {
-      //     background.value = `rgba(255, 255, 255)`
-      //     color.value = 'black'
-      //     postMessage({
-      //       api: 'backIconChange',
-      //       content: { iconStyle: 'black' }
-      //     })
-      //   } else {
-      //     background.value = 'transparent'
-      //     color.value = '#fff'
-      //     postMessage({
-      //       api: 'backIconChange',
-      //       content: { iconStyle: 'white' }
-      //     })
-      //   }
-      // })
     })
     onUnmounted(() => {
       window.removeEventListener('message', showLoading)
@@ -584,32 +547,70 @@ export default defineComponent({
       instrumentName: '',
       iframeRef: null as any,
       partIndex: 0,
-      partList: [] as any[]
+      partXmlIndex: 0,
+      partList: [] as any[],
+      xmlPartList: [] as any[]
     })
-    const osmdPreviewRef = ref()
     /** 渲染五线谱 */
-    const renderStaff = () => {
-      // 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.instrumentName = getInstrumentName(
-        staffData.partList[staffData.partIndex]?.track
-      )
+    const renderStaff = async () => {
+      try {
+        if (musicDetail.value?.xmlFileUrl) {
+          // 获取文件
+          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
+                })
+              }
+            }
+          }
+          staffData.xmlPartList = partList
+        }
+
+        // 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
+          )
+          if (item) {
+            part.index = item.value
+          }
+        })
+        staffData.partXmlIndex = staffData.partList[0].index || 0
+
+        staffData.instrumentName = getInstrumentName(
+          staffData.partList[staffData.partIndex]?.track
+        )
+      } catch (error) {
+        //
+      }
     }
     const musicIframeLoad = () => {
       const iframeRef: any = document.getElementById('staffIframeRef')
       if (iframeRef && iframeRef.contentWindow.renderXml) {
         iframeRef.contentWindow.renderXml(
           staffData.musicXml,
-          staffData.partIndex
+          staffData.partXmlIndex
         )
       }
     }
     const resetRender = () => {
       const iframeRef: any = document.getElementById('staffIframeRef')
       if (iframeRef && iframeRef.contentWindow.renderXml) {
-        iframeRef.contentWindow.resetRender(staffData.partIndex)
+        iframeRef.contentWindow.resetRender(staffData.partXmlIndex)
         staffData.instrumentName = getInstrumentName(
           staffData.partList[staffData.partIndex]?.track
         )
@@ -620,7 +621,8 @@ export default defineComponent({
         const instrumentName = getInstrumentName(item.track)
         return {
           text: item.track + (instrumentName ? `(${instrumentName})` : ''),
-          value: index
+          value: index,
+          xmlValue: item.index
         }
       })
     })
@@ -694,12 +696,13 @@ export default defineComponent({
             </div>
             {/* {musicDetail.value?.musicSheetType !== 'CONCERT' && ( */}
             <div
-              class={styles.alumCollectItem}
+              class={[
+                styles.alumCollectItem,
+                showImg.value.length <= 0 ? styles.alumCollectItemActive : ''
+              ]}
               onClick={() => {
-                if (showImg.length > 0) {
+                if (showImg.value.length > 0) {
                   downloadStatus.value = true
-                } else {
-                  Toast('暂无图片')
                 }
               }}
             >
@@ -801,8 +804,8 @@ export default defineComponent({
             </>
           ) : (
             <>
-              {showImg.length > 0 ? (
-                <img src={showImg[0]} alt="" class={styles.musicImg} />
+              {showImg.value.length > 0 ? (
+                <img src={showImg.value[0]} alt="" class={styles.musicImg} />
               ) : loading.value ? (
                 <>
                   <Vue3Lottie
@@ -942,7 +945,7 @@ export default defineComponent({
         <Popup v-model:show={downloadStatus.value} position="bottom" round>
           {downloadStatus.value && (
             <Download
-              imgList={JSON.parse(JSON.stringify(showImg))}
+              imgList={JSON.parse(JSON.stringify(showImg.value))}
               musicSheetName={musicDetail.value.musicSheetName}
             />
           )}
@@ -1063,6 +1066,8 @@ export default defineComponent({
             onConfirm={value => {
               staffData.open = false
               staffData.partIndex = value.value
+              staffData.partXmlIndex = value.xmlValue
+              showImg.value = []
               nextTick(() => {
                 resetRender()
               })

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

@@ -88,7 +88,7 @@ export default defineComponent({
     const heightInfo = ref<any>('0')
     const musicDetail = ref<any>(null)
     const audioFileUrl = ref('')
-    let showImg = [] as any
+    const showImg = ref([] as any)
     const firstList = ref<Array<any>>([])
     const fixedList = ref<Array<any>>([])
     const staffList = ref<Array<any>>([])
@@ -123,11 +123,11 @@ export default defineComponent({
       () => staff.radio,
       (val: string) => {
         if (val == 'first') {
-          showImg = firstList.value
+          showImg.value = firstList.value
         } else if (val == 'fixed') {
-          showImg = fixedList.value
+          showImg.value = fixedList.value
         } else {
-          showImg = staffList.value
+          showImg.value = staffList.value
         }
       }
     )
@@ -149,7 +149,7 @@ export default defineComponent({
         audioFileUrl.value =
           background && background.length > 0 ? background[0].audioFileUrl : ''
         // const arrImgs = res.data.musicImg ? res.data.musicImg.split(',') : []
-        showImg = res.data.musicImg ? res.data.musicImg.split(',') : []
+        showImg.value = res.data.musicImg ? res.data.musicImg.split(',') : []
         firstList.value = res.data.firstTone
           ? res.data.firstTone.split(',')
           : []
@@ -157,7 +157,7 @@ export default defineComponent({
           ? res.data.fixedTone.split(',')
           : []
         staffList.value = res.data.musicImg ? res.data.musicImg.split(',') : []
-        // if (!showImg.value) {
+        // if (!showImg.value.value) {
         // setAccompanyUrl()
         // window.addEventListener(
         //   'message',
@@ -254,7 +254,7 @@ export default defineComponent({
         await request.post(state.platformApi + '/open/music/sheet/img', {
           data: { musicSheetId: musicDetail.value.id, musicImg: imgurl }
         })
-        // showImg.value = imgurl
+        // showImg.value.value = imgurl
       } catch (e) {
         console.log(e)
       }
@@ -317,39 +317,47 @@ export default defineComponent({
     }
     const showLoading = async (e: any) => {
       if (e.data?.api === 'musicStaffRender') {
-        loading.value = e.data.loading
         const osmdImg = e.data.osmdImg
-        showImg = []
-        const img = await svgtopng(osmdImg.img, osmdImg.width, osmdImg.height)
-        const fileName =
-          route.query.id + state.user.data.userId + +new Date() + '.png'
-
-        const obj = {
-          filename: fileName,
-          bucketName: 'cloud-coach',
-          postData: {
+        showImg.value = []
+        const imgs: any = []
+        for (let i = 0; i < osmdImg.length; i++) {
+          const img = await svgtopng(
+            osmdImg[i].img,
+            osmdImg[i].width,
+            osmdImg[i].height
+          )
+          const fileName =
+            route.query.id + state.user.data.userId + +new Date() + '.png'
+          const obj = {
             filename: fileName,
+            bucketName: 'cloud-coach',
+            postData: {
+              filename: fileName,
+              acl: 'public-read',
+              key: fileName
+            }
+          }
+          const { data } = await getUploadSign(obj, true)
+          const dataObj = {
+            policy: data.policy,
+            signature: data.signature,
+            key: fileName,
+            KSSAccessKeyId: data.kssAccessKeyId,
             acl: 'public-read',
-            key: fileName
+            name: fileName
           }
+          const files = base64ToBlob(img)
+          const ossUploadUrl = getOssUploadUrl('cloud-coach')
+          const imgurl = await onOnlyFileUpload(ossUploadUrl, {
+            ...dataObj,
+            file: files
+          })
+          imgs.push(imgurl)
         }
-        const { data } = await getUploadSign(obj, true)
+        showImg.value = imgs
+        console.log(showImg.value, 'showImg.value')
 
-        const dataObj = {
-          policy: data.policy,
-          signature: data.signature,
-          key: fileName,
-          KSSAccessKeyId: data.kssAccessKeyId,
-          acl: 'public-read',
-          name: fileName
-        }
-        const files = base64ToBlob(img)
-        const ossUploadUrl = getOssUploadUrl('cloud-coach')
-        const imgurl = await onOnlyFileUpload(ossUploadUrl, {
-          ...dataObj,
-          file: files
-        })
-        showImg = [imgurl]
+        loading.value = e.data.loading
       }
     }
     onMounted(async () => {
@@ -562,30 +570,70 @@ export default defineComponent({
       instrumentName: '',
       iframeRef: null as any,
       partIndex: 0,
-      partList: [] as any[]
+      partXmlIndex: 0,
+      partList: [] as any[],
+      xmlPartList: [] as any[]
     })
     /** 渲染五线谱 */
-    const renderStaff = () => {
-      staffData.iframeSrc = `${location.origin}${location.pathname}osmd/index.html`
-      staffData.musicXml = musicDetail.value?.xmlFileUrl || ''
-      staffData.partList = musicDetail.value?.background || []
-      staffData.instrumentName = getInstrumentName(
-        staffData.partList[staffData.partIndex]?.track
-      )
+    const renderStaff = async () => {
+      try {
+        if (musicDetail.value?.xmlFileUrl) {
+          // 获取文件
+          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
+                })
+              }
+            }
+          }
+          staffData.xmlPartList = partList
+        }
+
+        // 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
+          )
+          if (item) {
+            part.index = item.value
+          }
+        })
+        staffData.partXmlIndex = staffData.partList[0].index || 0
+
+        staffData.instrumentName = getInstrumentName(
+          staffData.partList[staffData.partIndex]?.track
+        )
+      } catch (error) {
+        //
+      }
     }
     const musicIframeLoad = () => {
       const iframeRef: any = document.getElementById('staffIframeRef')
       if (iframeRef && iframeRef.contentWindow.renderXml) {
         iframeRef.contentWindow.renderXml(
           staffData.musicXml,
-          staffData.partIndex
+          staffData.partXmlIndex
         )
       }
     }
     const resetRender = () => {
       const iframeRef: any = document.getElementById('staffIframeRef')
       if (iframeRef && iframeRef.contentWindow.renderXml) {
-        iframeRef.contentWindow.resetRender(staffData.partIndex)
+        iframeRef.contentWindow.resetRender(staffData.partXmlIndex)
         staffData.instrumentName = getInstrumentName(
           staffData.partList[staffData.partIndex]?.track
         )
@@ -596,7 +644,8 @@ export default defineComponent({
         const instrumentName = getInstrumentName(item.track)
         return {
           text: item.track + (instrumentName ? `(${instrumentName})` : ''),
-          value: index
+          value: index,
+          xmlValue: item.index
         }
       })
     })
@@ -715,7 +764,7 @@ export default defineComponent({
                     <span
                       class={styles.download}
                       onClick={() => {
-                        if (showImg.length > 0) {
+                        if (showImg.value.length > 0) {
                           downloadStatus.value = true
                         } else {
                           Toast('暂无图片')
@@ -784,8 +833,12 @@ export default defineComponent({
                 </>
               ) : (
                 <>
-                  {showImg.length > 0 ? (
-                    <img src={showImg[0]} alt="" class={styles.musicImg} />
+                  {showImg.value.length > 0 ? (
+                    <img
+                      src={showImg.value[0]}
+                      alt=""
+                      class={styles.musicImg}
+                    />
                   ) : loading.value ? (
                     <>
                       <Vue3Lottie
@@ -1017,7 +1070,7 @@ export default defineComponent({
           <Popup v-model:show={downloadStatus.value} position="bottom" round>
             {downloadStatus.value && (
               <Download
-                imgList={JSON.parse(JSON.stringify(showImg))}
+                imgList={JSON.parse(JSON.stringify(showImg.value))}
                 musicSheetName={musicDetail.value.musicSheetName}
               />
             )}
@@ -1140,6 +1193,8 @@ export default defineComponent({
               onConfirm={value => {
                 staffData.open = false
                 staffData.partIndex = value.value
+                staffData.partXmlIndex = value.xmlValue
+                showImg.value = []
                 nextTick(() => {
                   resetRender()
                 })