修改显示

public/osmd/index.html

@@ -138,16 +138,8 @@
         };
       }
 
-      // osmd.EngravingRules.DYMusicScoreType =
-      //     state.musicRenderType === EnumMusicRenderType.staff ? "staff" : "jianpu";
-      //   // 如果为固定调,需要加入全局
-      //   if (state.musicRenderType === EnumMusicRenderType.fixedTone) {
-      //     window.sett = {
-      //       keySignature: true,
-      //     };
-      //   }
-      console.log(str, window.sett, '212')
       osmd.EngravingRules.DYMusicScoreType = str
+      // console.log(type, xmlUrl)
       osmd
         .load(xmlUrl)
         .then(

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

@@ -61,6 +61,7 @@ import { getInstrumentName } from '@/constant/instruments'
 import { getUploadSign, onOnlyFileUpload } from '@/helpers/oss-file-upload'
 import { svgtopng } from './formatSvgToImg'
 import { shareCall } from '@/teacher/share-page/share'
+import deepClone from '@/helpers/deep-clone'
 
 export default defineComponent({
   name: 'new-index',
@@ -83,6 +84,13 @@ export default defineComponent({
     const firstList = ref<Array<any>>([])
     const fixedList = ref<Array<any>>([])
     const staffList = ref<Array<any>>([])
+
+    const uploadImgs = ref<boolean>(false)
+    const defaultImgs = ref({
+      first: false,
+      fixed: false,
+      staff: false
+    })
     const accompanyUrl = ref<string>('')
     const downloadStatus = ref<boolean>(false)
     const staff = reactive({
@@ -109,17 +117,14 @@ export default defineComponent({
     const onChangeStaff = (type: string) => {
       staff.radio = type
       staff.status = false
-
-      if (type == 'first' && firstList.value.length <= 0) {
-        // showImg.value = firstList.value
+      if (type == 'first' && !defaultImgs.value.first) {
         loading.value = false
         resetRenderPage('first', staffData.musicXml)
-      } else if (type == 'fixed' && fixedList.value.length <= 0) {
+      } else if (type == 'fixed' && !defaultImgs.value.fixed) {
         loading.value = false
-        // showImg.value = fixedList.value
         resetRenderPage('fixed', staffData.musicXml)
       } else {
-        if (staffList.value.length <= 0) {
+        if (!defaultImgs.value.staff) {
           loading.value = false
           resetRenderPage('staff', staffData.musicXml)
         }
@@ -129,11 +134,11 @@ export default defineComponent({
       () => staff.radio,
       (val: string) => {
         if (val == 'first') {
-          showImg.value = firstList.value
+          showImg.value = deepClone(firstList.value)
         } else if (val == 'fixed') {
-          showImg.value = fixedList.value
+          showImg.value = deepClone(fixedList.value)
         } else {
-          showImg.value = staffList.value
+          showImg.value = deepClone(staffList.value)
         }
       }
     )
@@ -164,6 +169,17 @@ export default defineComponent({
           ? res.data.fixedTone.split(',')
           : []
         staffList.value = res.data.musicImg ? res.data.musicImg.split(',') : []
+
+        // 初始化默认数据是否有值
+        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()
         })
@@ -313,6 +329,33 @@ export default defineComponent({
         const osmdImg = e.data.osmdImg
         showImg.value = []
         const imgs: any = []
+
+        // 独奏并且的图片则不用生成
+        if (
+          musicDetail.value?.musicSheetType === 'SINGLE' &&
+          musicDetail.value?.notation
+        ) {
+          if (
+            (staff.radio === 'first' && firstList.value.length > 0) ||
+            (staff.radio === 'fixed' && fixedList.value.length > 0) ||
+            (staff.radio === 'staff' && staffList.value.length > 0)
+          ) {
+            if (staff.radio === 'first') {
+              showImg.value = firstList.value
+            } else if (staff.radio === 'fixed') {
+              showImg.value = fixedList.value
+            }
+            if (staff.radio === 'staff') {
+              showImg.value = staffList.value
+            }
+
+            loading.value = e.data.loading
+            return
+          }
+        }
+
+        uploadImgs.value = true
+
         for (let i = 0; i < osmdImg.length; i++) {
           const img = await svgtopng(
             osmdImg[i].img,
@@ -347,8 +390,23 @@ export default defineComponent({
           })
           imgs.push(imgurl)
         }
-        showImg.value = imgs
-        console.log(showImg.value, 'showImg.value')
+        uploadImgs.value = false
+        // 判断是否为独奏
+        if (
+          musicDetail.value?.musicSheetType === 'SINGLE' &&
+          musicDetail.value?.notation
+        ) {
+          if (staff.radio === 'first') {
+            firstList.value = imgs
+          } else if (staff.radio === 'fixed') {
+            fixedList.value = imgs
+          } else if (staff.radio === 'staff') {
+            staffList.value = imgs
+          }
+          showImg.value = imgs
+        } else {
+          showImg.value = imgs
+        }
         loading.value = e.data.loading
       }
     }
@@ -669,6 +727,7 @@ export default defineComponent({
     const resetRenderPage = (type: string, xmlUrl: string) => {
       const iframeRef: any = document.getElementById('staffIframeRef')
       if (iframeRef && iframeRef.contentWindow.renderXml) {
+        console.log('resetRenderPage')
         iframeRef.contentWindow.resetRenderPage(type, xmlUrl)
       }
     }
@@ -836,9 +895,11 @@ export default defineComponent({
               class={styles.iconTransfer}
               style={{
                 display:
-                  musicDetail.value?.musicSheetType === 'SINGLE' ? '' : 'none'
+                  musicDetail.value?.musicSheetType === 'SINGLE' ? '' : 'none',
+                opacity: uploadImgs.value ? 0.6 : 1
               }}
               onClick={() => {
+                if (uploadImgs.value) return
                 staff.status = true
               }}
             >
@@ -865,7 +926,7 @@ export default defineComponent({
               (staffData.instrumentName ? `(${staffData.instrumentName})` : '')}
           </p>
           {musicDetail.value?.musicSheetType === 'CONCERT' ||
-          showImg.value.length <= 0 ? (
+          !defaultImgs.value[staff.radio] ? (
             <>
               {loading.value && (
                 <div>