后台增加节拍速度字段

src/views/music-library/music-sheet/modal/config.ts

@@ -0,0 +1,41 @@
+export function formatBeatUnit(beatUnit: string, isDot: boolean) {
+  let multiple = '1/4'
+  switch (beatUnit) {
+    case '1024th':
+      multiple = "1/1024"
+      break
+    case '512th':
+      multiple = "1/512"
+      break
+    case '256th':
+      multiple = "1/256"
+      break
+    case '128th':
+      multiple = "1/128"
+      break
+    case '64th':
+      multiple = "1/64"
+      break
+    case '32nd':
+      multiple = "1/32"
+      break
+    case '16th':
+      multiple = '1/16'
+      break
+    case 'eighth':
+      multiple = '1/8'
+      break
+    case 'quarter':
+      multiple = '1/4'
+      break
+    case 'half':
+      multiple = '1/2'
+      break
+    case 'whole':
+      multiple = '1/1'
+    default:
+      break
+  }
+  isDot && (multiple += '.')
+  return multiple
+}

src/views/music-library/music-sheet/modal/index.module.less

@@ -78,3 +78,138 @@
     width: 118px;
   }
 }
+
+.beatSymbolSel{
+  margin-right: 10px;
+  width: 100px;
+  :global{
+    .n-base-selection-input{
+      padding: 0 !important;
+    }
+    .n-base-selection-input__content {
+      display: flex;
+      justify-content: center;
+      .beatSymbolImg {
+        width: 28px;
+        height: 28px;
+        &.beatSymbolImg1 {
+          background: url('./img/beat/a1.png') no-repeat;
+          background-size: 100% 100%;
+        }
+        &.beatSymbolImg2 {
+          background: url('./img/beat/a2.png') no-repeat;
+          background-size: 100% 100%;
+        }
+        &.beatSymbolImg3 {
+          background: url('./img/beat/a3.png') no-repeat;
+          background-size: 100% 100%;
+        }
+        &.beatSymbolImg4 {
+          background: url('./img/beat/a4.png') no-repeat;
+          background-size: 100% 100%;
+        }
+        &.beatSymbolImg5 {
+          background: url('./img/beat/a5.png') no-repeat;
+          background-size: 100% 100%;
+        }
+        &.beatSymbolImg6 {
+          background: url('./img/beat/a6.png') no-repeat;
+          background-size: 100% 100%;
+        }
+        &.beatSymbolImg7 {
+          background: url('./img/beat/a7.png') no-repeat;
+          background-size: 100% 100%;
+        }        
+        &.beatSymbolImg8 {
+          background: url('./img/beat/a8.png') no-repeat;
+          background-size: 100% 100%;
+        }
+      }
+    }
+  }
+}
+:global{
+  .n-base-select-menu.n-select-menu {
+    .beatSymbolOptItem {
+      display: flex;
+      justify-content: center;
+      &.n-base-select-option::before {
+        transition: initial;
+      }
+      &.n-base-select-option--selected {
+        .n-base-select-option__content {
+          .beatSymbolImg {
+            &.beatSymbolImg1 {
+              background: url('./img/beat/b1.png') no-repeat;
+              background-size: 100% 100%;
+            }
+            &.beatSymbolImg2 {
+              background: url('./img/beat/b2.png') no-repeat;
+              background-size: 100% 100%;
+            }
+            &.beatSymbolImg3 {
+              background: url('./img/beat/b3.png') no-repeat;
+              background-size: 100% 100%;
+            }
+            &.beatSymbolImg4 {
+              background: url('./img/beat/b4.png') no-repeat;
+              background-size: 100% 100%;
+            }
+            &.beatSymbolImg5 {
+              background: url('./img/beat/b5.png') no-repeat;
+              background-size: 100% 100%;
+            }
+            &.beatSymbolImg6 {
+              background: url('./img/beat/b6.png') no-repeat;
+              background-size: 100% 100%;
+            }
+            &.beatSymbolImg7 {
+              background: url('./img/beat/b7.png') no-repeat;
+              background-size: 100% 100%;
+            }            
+            &.beatSymbolImg8 {
+              background: url('./img/beat/b8.png') no-repeat;
+              background-size: 100% 100%;
+            }
+          }
+        }
+      }
+      .beatSymbolImg {
+        width: 28px;
+        height: 28px;
+        &.beatSymbolImg1 {
+          background: url('./img/beat/a1.png') no-repeat;
+          background-size: 100% 100%;
+        }
+        &.beatSymbolImg2 {
+          background: url('./img/beat/a2.png') no-repeat;
+          background-size: 100% 100%;
+        }
+        &.beatSymbolImg3 {
+          background: url('./img/beat/a3.png') no-repeat;
+          background-size: 100% 100%;
+        }
+        &.beatSymbolImg4 {
+          background: url('./img/beat/a4.png') no-repeat;
+          background-size: 100% 100%;
+        }
+        &.beatSymbolImg5 {
+          background: url('./img/beat/a5.png') no-repeat;
+          background-size: 100% 100%;
+        }
+        &.beatSymbolImg6 {
+          background: url('./img/beat/a6.png') no-repeat;
+          background-size: 100% 100%;
+        }
+        &.beatSymbolImg7 {
+          background: url('./img/beat/a7.png') no-repeat;
+          background-size: 100% 100%;
+        }        
+        &.beatSymbolImg8 {
+          background: url('./img/beat/a8.png') no-repeat;
+          background-size: 100% 100%;
+        }
+      }
+    }
+  }
+}

src/views/music-library/music-sheet/modal/music-operationV2.tsx

@@ -24,7 +24,7 @@ import {
   useDialog,
   useMessage
 } from 'naive-ui'
-import { defineComponent, onMounted, PropType, reactive, ref, watch } from 'vue'
+import { defineComponent, onMounted, PropType, reactive, ref, watch, h } from 'vue'
 import { musicSheetCategoriesQueryTree, musicSheetDetail, musicSheetSave } from '../../api'
 import UploadFile from '@/components/upload-file'
 import styles from './index.module.less'
@@ -40,6 +40,7 @@ import { filterPointCategory } from '@views/teaching-manage/unit-test'
 import MusicCreateImg from './music-create-img'
 import MusiceBeatTime from './musiceBeatTime'
 import MusicPlatform from './music-platform'
+import { formatBeatUnit } from "./config"
 
 /**
  * 获取指定元素下一个Note元素
@@ -330,6 +331,7 @@ export default defineComponent({
       // musicTag: [] as any, // 曲目标签
       composer: null as any, // 音乐人
       playSpeed: null as any, // 曲谱速度
+      speedBeatUnit: null as any, // 曲谱速度节拍
       // showFingering: null as any, // 是否显示指法
       // canEvaluate: null as any, // 是否评测
       // notation: null as any, // 能否转和简谱
@@ -647,6 +649,7 @@ export default defineComponent({
             isPlayBeat: forms.isPlayBeat,
             multiTracksSelection: forms.multiTracksSelection.join(','),
             playSpeed: forms.playSpeed,
+            speedBeatUnit: forms.speedBeatUnit || "1/4",
             playMode: forms.playMode,
             xmlFileUrl: forms.xmlFileUrl,
             isMixBeat: forms.isMixBeat,
@@ -1054,8 +1057,8 @@ export default defineComponent({
       // if (partListNames.length > 0) {
       //   forms.musicSheetSoundList = forms.musicSheetSoundList.slice(0, partListNames.length)
       // }
-
-      state.xmlFirstSpeed = xmlParse.getElementsByTagName('per-minute')?.[0]?.textContent || ''
+      const metronomeXml = xmlParse.getElementsByTagName('metronome')?.[0]
+      state.xmlFirstSpeed = metronomeXml?.getElementsByTagName('per-minute')?.[0]?.textContent || ''
       if (!forms.playSpeed) {
         if (state.xmlFirstSpeed) {
           forms.playSpeed = Number.parseFloat(state.xmlFirstSpeed)
@@ -1064,10 +1067,14 @@ export default defineComponent({
           forms.playSpeed = 100
         }
       }
+      if(!forms.speedBeatUnit){
+        const beatUnit = metronomeXml?.getElementsByTagName('beat-unit')?.[0]?.textContent || ''
+        const beatUnitDot = metronomeXml?.getElementsByTagName('beat-unit-dot')?.[0]
+        forms.speedBeatUnit = formatBeatUnit(beatUnit, !!beatUnitDot)
+      }
       // console.log('xml声轨',partListNames,state.xmlFirstSpeed)
       return partListNames
     }
-
     // 判断选择的音轨是否在选中
     const initPartsListStatus = (track: string): any => {
       // const _names = state.partListNames.filter(
@@ -1343,6 +1350,7 @@ export default defineComponent({
           // forms.musicTag = data.musicTag?.split(',')
           forms.composer = data.composer
           forms.playSpeed = data.playSpeed ? Number.parseFloat(data.playSpeed) : 100
+          forms.speedBeatUnit = data.speedBeatUnit
           // forms.showFingering = Number(data.showFingering)
           // forms.canEvaluate = Number(data.canEvaluate)
           // forms.notation = Number(data.notation)
@@ -1577,6 +1585,56 @@ export default defineComponent({
       state.loading = false
     })
 
+    const beatSymbolOpt = [
+      {
+        label: '',
+        labelHide: '1',
+        value: '1/1',
+        class: 'beatSymbolOptItem'
+      },
+      {
+        label: '',
+        labelHide: '2',
+        value: '1/2',
+        class: 'beatSymbolOptItem'
+      },
+      {
+        label: '',
+        labelHide: '3',
+        value: '1/4',
+        class: 'beatSymbolOptItem'
+      },
+      {
+        label: '',
+        labelHide: '4',
+        value: '1/8',
+        class: 'beatSymbolOptItem'
+      },
+      {
+        label: '',
+        labelHide: '5',
+        value: '1/16',
+        class: 'beatSymbolOptItem'
+      },
+      {
+        label: '',
+        labelHide: '6',
+        value: '1/2.',
+        class: 'beatSymbolOptItem'
+      },
+      {
+        label: '',
+        labelHide: '7',
+        value: '1/4.',
+        class: 'beatSymbolOptItem'
+      }, 
+      {
+        label: '',
+        labelHide: '8',
+        value: '1/8.',
+        class: 'beatSymbolOptItem'
+      }
+    ];
     return () => (
       <div style="background: #fff; padding-top: 12px">
         <NSpin show={state.loading}>
@@ -2005,6 +2063,24 @@ export default defineComponent({
                   }
                 ]}
               >
+                <NSelect
+                  class={styles.beatSymbolSel}
+                  v-model:value={forms.speedBeatUnit}
+                  options={beatSymbolOpt}
+                  show-checkmark={false}
+                  show-arrow={false}
+                  placement={'top'}
+                  render-tag={
+                    ({ option }:any) => {
+                      return h('div', { class: `beatSymbolImg${option.labelHide} beatSymbolImg` });
+                    }
+                  }
+                  render-label={
+                    (option:any) => {
+                      return h('div', { class: `beatSymbolImg${option.labelHide} beatSymbolImg` });
+                    }
+                  }
+                ></NSelect>
                 <NInputNumber
                   placeholder="请输入速度"
                   v-model:value={forms.playSpeed}