添加曲目乐器编码

src/helpers/utils.ts

@@ -275,214 +275,214 @@ export const dateFormat = (
   return dayjs(value).format(format);
 };
 
-const instruments: any = {
-  'Acoustic Grand Piano': '大钢琴',
-  'Bright Acoustic Piano': '明亮的钢琴',
-  'Electric Grand Piano': '电钢琴',
-  'Rhodes Piano': '柔和的电钢琴',
-  'Chorused Piano': '加合唱效果的电钢琴',
-  Harpsichord: '羽管键琴',
-  Clavichord: '科拉维科特琴',
-  Celesta: '钢片琴',
-  Glockenspiel: '钢片琴',
-  'Music box': '八音盒',
-  Vibraphone: '颤音琴',
-  Marimba: '马林巴',
-  Xylophone: '木琴',
-  'Tubular Bells': '管钟',
-  Dulcimer: '大扬琴',
-  'Hammond Organ': '击杆风琴',
-  'Percussive Organ': '打击式风琴',
-  'Rock Organ': '摇滚风琴',
-  'Church Organ': '教堂风琴',
-  'Reed Organ': '簧管风琴',
-  Accordian: '手风琴',
-  Harmonica: '口琴',
-  'Tango Accordian': '探戈手风琴',
-  'Acoustic Guitar': '钢弦吉他',
-  'Electric Guitar': '闷音电吉他',
-  'Overdriven Guitar': '加驱动效果的电吉他',
-  'Distortion Guitar': '加失真效果的电吉他',
-  'Guitar Harmonics': '吉他和音',
-  'Acoustic Bass': '大贝司',
-  'Electric Bass': '电贝司',
-  'Fretless Bass': '无品贝司',
-  'Slap Bass': '掌击',
-  'Synth Bass': '电子合成',
-  Violin: '小提琴',
-  Viola: '中提琴',
-  Cello: '大提琴',
-  Contrabass: '低音大提琴',
-  'Tremolo Strings': '弦乐群颤音音色',
-  'Pizzicato Strings': '弦乐群拨弦音色',
-  'Orchestral Harp': '竖琴',
-  Timpani: '定音鼓',
-  'String Ensemble': '弦乐合奏音色',
-  'Synth Strings': '合成弦乐合奏音色',
-  'Choir Aahs': '人声合唱',
-  'Voice Oohs': '人声',
-  'Synth Voice': '合成人声',
-  'Orchestra Hit': '管弦乐敲击齐奏',
-  Trumpet: '小号',
-  Trombone: '长号',
-  Tuba: '大号',
-  'Muted Trumpet': '加弱音器小号',
-  'French Horn': '法国号',
-  'Brass Section': '铜管组',
-  'Synth Brass': '合成铜管音色',
-  'Soprano Sax': '高音萨克斯管',
-  'Alto Sax': '中音萨克斯管',
-  'Tenor Sax': '次中音萨克斯管',
-  'Baritone Sax': '低音萨克斯管',
-  Oboe: '双簧管',
-  'English Horn': '英国管',
-  Bassoon: '巴松',
-  'Soprano Saxophone': '高音萨克斯管',
-  'Alto Saxophone': '中音萨克斯管',
-  'Tenor Saxophone': '次中音萨克斯管',
-  'Baritone Saxophone': '低音萨克斯管',
-  Piccolo: '短笛',
-  Flute: '长笛',
-  Recorder: '竖笛',
-  'Soprano Recorder': '高音竖笛',
-  'Pan Flute': '排箫',
-  'Bottle Blow': '瓶木管',
-  Whistle: '口哨声',
-  Ocarina: '陶笛',
-  Lead: '合成主音',
-  'Lead lead': '合成主音',
-  'Pad age': '合成音色',
-  Pad: '合成音色',
-  FX: '合成效果  科幻',
-  Sitar: '西塔尔',
-  Banjo: '班卓琴',
-  Shamisen: '三昧线',
-  Koto: '十三弦筝',
-  Kalimba: '卡林巴',
-  Bagpipe: '风笛',
-  Fiddle: '民族提琴',
-  Shanai: '山奈',
-  'Tinkle Bell': '叮当铃',
-  Agogos: '阿戈戈铃',
-  'Steel Drums': '钢鼓',
-  'Taiko Drum': '太鼓',
-  'Melodic Toms': '嗵嗵鼓',
-  'Synth Drums': '合成鼓',
-  'Reverse Cymbals': '反向镲',
-  'Agogo Bells': '阿戈戈铃',
-  'Taiko Drums': '太鼓',
-  Bongos: '邦戈鼓',
-  'Bongo Bell': '邦戈铃',
-  Congas: '康加鼓',
-  Guiro: '刮壶',
-  'Guitar Fret Noise': '吉他换把杂音',
-  'Breath Noise': '呼吸声',
-  Seashore: '海浪声',
-  'Bird Tweet': '鸟鸣',
-  'Telephone Ring': '电话铃',
-  Helicopter: '直升机',
-  Applause: '鼓掌声',
-  Gunshot: '枪声',
-  'Acoustic Bass Drum': '大鼓',
-  'Bass Drum': '大鼓',
-  'Side Drum': '小鼓鼓边',
-  'Acoustic Snare': '小鼓',
-  'Hand Claps': '拍手',
-  'Electric Snare': '小鼓',
-  'Low Floor Tom': '低音嗵鼓',
-  'Closed Hi-Hat': '闭合踩镲',
-  'High Floor Tom': '高音落地嗵鼓',
-  'Pedal Hi-Hat': '脚踏踩镲',
-  'Low Tom': '低音嗵鼓',
-  'Open Hi-Hat': '开音踩镲',
-  'Low-Mid Tom': '中低音嗵鼓',
-  'Hi Mid Tom': '高音鼓',
-  'Crash Cymbals': '对镲',
-  'High Tom': '高音嗵鼓',
-  'Ride Cymbals': '叮叮镲',
-  'Chinese Cymbals': '中国镲',
-  'Ride Bell': '圆铃',
-  Tambourine: '铃鼓',
-  'Splash Cymbal': '溅音镲',
-  Cowbell: '牛铃',
-  'Crash Cymbal': '强音钹',
-  'Vibra-Slap': '颤音器',
-  'Ride Cymbal': '打点钹',
-  'Hi Bongo': '高音邦戈鼓',
-  'Low Bongo': '低音邦戈鼓',
-  'Mute Hi Conga': '弱音高音康加鼓',
-  'Open Hi Conga': '强音高音康加鼓',
-  'Low Conga': '低音康加鼓',
-  'High Timbale': '高音天巴鼓',
-  'Low Timbale': '低音天巴鼓',
-  'High Agogo': '高音阿戈戈铃',
-  'Low Agogo': '低音阿戈戈铃',
-  Cabasa: '卡巴萨',
-  Maracas: '沙锤',
-  'Short Whistle': '短口哨',
-  'Long Whistle': '长口哨',
-  'Short Guiro': '短刮壶',
-  'Long Guiro': '长刮壶',
-  Claves: '响棒',
-  'Hi Wood Block': '高音木鱼',
-  'Low Wood Block': '低音木鱼',
-  'Mute Triangle': '弱音三角铁',
-  'Open Triangle': '强音三角铁',
-  'Drum Set': '架子鼓',
-  'Hulusi flute': '葫芦丝',
-  Melodica: '口风琴',
-  'Snare Drum': '小军鼓',
-  'Horn in F': '圆号',
-  Triangle: '三角铁',
-  Vibrato: '颤音琴',
-  'Suspend Cymbals': '吊镲',
-  'Suspended Cymbals': '吊镲',
-  'Tom-Toms': '嗵嗵鼓',
-  Bell: '铃铛',
-  Bells: '铃铛',
-  'Alto Clarinet': '中音单簧管',
-  'Bass Clarinet': '低音单簧管',
-  Clarinet: '单簧管',
-  Cornet: '短号',
-  Euphonium: '上低音号',
-  'crash cymbals': '对镲',
-  Castanets: '响板',
-  Shaker: '沙锤',
-  'Mark tree': '音树',
-  Chimes: '管钟',
-  'Mark Tree': '音树',
-  'Tom-toms': '嗵嗵鼓',
-  'Hi-Hat': '踩镲',
-  'Sleigh Bells': '雪橇铃',
-  Flexatone: '弹音器',
-  'Brake drum': '闸鼓',
-  Gong: '锣',
-  'concert tom': '音乐会嗵嗵鼓',
-  'brake drum': '车轮鼓',
-  'finger cymbal': '指钹',
-  'ride cymbal': '叮叮镲',
-  'Concert Toms': '音乐会嗵嗵鼓',
-  Vibraslap: '弹音器',
-  'Wood Blocks': '木鱼',
-  'Temple Blocks': '木鱼',
-  'Wood Block': '木鱼',
-  'Field Drum': '军鼓',
-  'Quad-Toms': '筒鼓',
-  Quads: '筒鼓',
-  'Drums set': '架子鼓',
-  'High Bongo': '邦戈',
-  Timbales: '天巴鼓',
-  'rain stick': '雨棒',
-  'String Bass': '弦乐低音',
-  'Floor Tom': '侧嗵鼓',
-  'Brake Drum': '闸鼓',
-  'Tam-tam': '大锣',
-  Cymbal: '镲',
-  Cymbals: '镲'
-};
+// const instruments: any = {
+//   'Acoustic Grand Piano': '大钢琴',
+//   'Bright Acoustic Piano': '明亮的钢琴',
+//   'Electric Grand Piano': '电钢琴',
+//   'Rhodes Piano': '柔和的电钢琴',
+//   'Chorused Piano': '加合唱效果的电钢琴',
+//   Harpsichord: '羽管键琴',
+//   Clavichord: '科拉维科特琴',
+//   Celesta: '钢片琴',
+//   Glockenspiel: '钢片琴',
+//   'Music box': '八音盒',
+//   Vibraphone: '颤音琴',
+//   Marimba: '马林巴',
+//   Xylophone: '木琴',
+//   'Tubular Bells': '管钟',
+//   Dulcimer: '大扬琴',
+//   'Hammond Organ': '击杆风琴',
+//   'Percussive Organ': '打击式风琴',
+//   'Rock Organ': '摇滚风琴',
+//   'Church Organ': '教堂风琴',
+//   'Reed Organ': '簧管风琴',
+//   Accordian: '手风琴',
+//   Harmonica: '口琴',
+//   'Tango Accordian': '探戈手风琴',
+//   'Acoustic Guitar': '钢弦吉他',
+//   'Electric Guitar': '闷音电吉他',
+//   'Overdriven Guitar': '加驱动效果的电吉他',
+//   'Distortion Guitar': '加失真效果的电吉他',
+//   'Guitar Harmonics': '吉他和音',
+//   'Acoustic Bass': '大贝司',
+//   'Electric Bass': '电贝司',
+//   'Fretless Bass': '无品贝司',
+//   'Slap Bass': '掌击',
+//   'Synth Bass': '电子合成',
+//   Violin: '小提琴',
+//   Viola: '中提琴',
+//   Cello: '大提琴',
+//   Contrabass: '低音大提琴',
+//   'Tremolo Strings': '弦乐群颤音音色',
+//   'Pizzicato Strings': '弦乐群拨弦音色',
+//   'Orchestral Harp': '竖琴',
+//   Timpani: '定音鼓',
+//   'String Ensemble': '弦乐合奏音色',
+//   'Synth Strings': '合成弦乐合奏音色',
+//   'Choir Aahs': '人声合唱',
+//   'Voice Oohs': '人声',
+//   'Synth Voice': '合成人声',
+//   'Orchestra Hit': '管弦乐敲击齐奏',
+//   Trumpet: '小号',
+//   Trombone: '长号',
+//   Tuba: '大号',
+//   'Muted Trumpet': '加弱音器小号',
+//   'French Horn': '法国号',
+//   'Brass Section': '铜管组',
+//   'Synth Brass': '合成铜管音色',
+//   'Soprano Sax': '高音萨克斯管',
+//   'Alto Sax': '中音萨克斯管',
+//   'Tenor Sax': '次中音萨克斯管',
+//   'Baritone Sax': '低音萨克斯管',
+//   Oboe: '双簧管',
+//   'English Horn': '英国管',
+//   Bassoon: '巴松',
+//   'Soprano Saxophone': '高音萨克斯管',
+//   'Alto Saxophone': '中音萨克斯管',
+//   'Tenor Saxophone': '次中音萨克斯管',
+//   'Baritone Saxophone': '低音萨克斯管',
+//   Piccolo: '短笛',
+//   Flute: '长笛',
+//   Recorder: '竖笛',
+//   'Soprano Recorder': '高音竖笛',
+//   'Pan Flute': '排箫',
+//   'Bottle Blow': '瓶木管',
+//   Whistle: '口哨声',
+//   Ocarina: '陶笛',
+//   Lead: '合成主音',
+//   'Lead lead': '合成主音',
+//   'Pad age': '合成音色',
+//   Pad: '合成音色',
+//   FX: '合成效果  科幻',
+//   Sitar: '西塔尔',
+//   Banjo: '班卓琴',
+//   Shamisen: '三昧线',
+//   Koto: '十三弦筝',
+//   Kalimba: '卡林巴',
+//   Bagpipe: '风笛',
+//   Fiddle: '民族提琴',
+//   Shanai: '山奈',
+//   'Tinkle Bell': '叮当铃',
+//   Agogos: '阿戈戈铃',
+//   'Steel Drums': '钢鼓',
+//   'Taiko Drum': '太鼓',
+//   'Melodic Toms': '嗵嗵鼓',
+//   'Synth Drums': '合成鼓',
+//   'Reverse Cymbals': '反向镲',
+//   'Agogo Bells': '阿戈戈铃',
+//   'Taiko Drums': '太鼓',
+//   Bongos: '邦戈鼓',
+//   'Bongo Bell': '邦戈铃',
+//   Congas: '康加鼓',
+//   Guiro: '刮壶',
+//   'Guitar Fret Noise': '吉他换把杂音',
+//   'Breath Noise': '呼吸声',
+//   Seashore: '海浪声',
+//   'Bird Tweet': '鸟鸣',
+//   'Telephone Ring': '电话铃',
+//   Helicopter: '直升机',
+//   Applause: '鼓掌声',
+//   Gunshot: '枪声',
+//   'Acoustic Bass Drum': '大鼓',
+//   'Bass Drum': '大鼓',
+//   'Side Drum': '小鼓鼓边',
+//   'Acoustic Snare': '小鼓',
+//   'Hand Claps': '拍手',
+//   'Electric Snare': '小鼓',
+//   'Low Floor Tom': '低音嗵鼓',
+//   'Closed Hi-Hat': '闭合踩镲',
+//   'High Floor Tom': '高音落地嗵鼓',
+//   'Pedal Hi-Hat': '脚踏踩镲',
+//   'Low Tom': '低音嗵鼓',
+//   'Open Hi-Hat': '开音踩镲',
+//   'Low-Mid Tom': '中低音嗵鼓',
+//   'Hi Mid Tom': '高音鼓',
+//   'Crash Cymbals': '对镲',
+//   'High Tom': '高音嗵鼓',
+//   'Ride Cymbals': '叮叮镲',
+//   'Chinese Cymbals': '中国镲',
+//   'Ride Bell': '圆铃',
+//   Tambourine: '铃鼓',
+//   'Splash Cymbal': '溅音镲',
+//   Cowbell: '牛铃',
+//   'Crash Cymbal': '强音钹',
+//   'Vibra-Slap': '颤音器',
+//   'Ride Cymbal': '打点钹',
+//   'Hi Bongo': '高音邦戈鼓',
+//   'Low Bongo': '低音邦戈鼓',
+//   'Mute Hi Conga': '弱音高音康加鼓',
+//   'Open Hi Conga': '强音高音康加鼓',
+//   'Low Conga': '低音康加鼓',
+//   'High Timbale': '高音天巴鼓',
+//   'Low Timbale': '低音天巴鼓',
+//   'High Agogo': '高音阿戈戈铃',
+//   'Low Agogo': '低音阿戈戈铃',
+//   Cabasa: '卡巴萨',
+//   Maracas: '沙锤',
+//   'Short Whistle': '短口哨',
+//   'Long Whistle': '长口哨',
+//   'Short Guiro': '短刮壶',
+//   'Long Guiro': '长刮壶',
+//   Claves: '响棒',
+//   'Hi Wood Block': '高音木鱼',
+//   'Low Wood Block': '低音木鱼',
+//   'Mute Triangle': '弱音三角铁',
+//   'Open Triangle': '强音三角铁',
+//   'Drum Set': '架子鼓',
+//   'Hulusi flute': '葫芦丝',
+//   Melodica: '口风琴',
+//   'Snare Drum': '小军鼓',
+//   'Horn in F': '圆号',
+//   Triangle: '三角铁',
+//   Vibrato: '颤音琴',
+//   'Suspend Cymbals': '吊镲',
+//   'Suspended Cymbals': '吊镲',
+//   'Tom-Toms': '嗵嗵鼓',
+//   Bell: '铃铛',
+//   Bells: '铃铛',
+//   'Alto Clarinet': '中音单簧管',
+//   'Bass Clarinet': '低音单簧管',
+//   Clarinet: '单簧管',
+//   Cornet: '短号',
+//   Euphonium: '上低音号',
+//   'crash cymbals': '对镲',
+//   Castanets: '响板',
+//   Shaker: '沙锤',
+//   'Mark tree': '音树',
+//   Chimes: '管钟',
+//   'Mark Tree': '音树',
+//   'Tom-toms': '嗵嗵鼓',
+//   'Hi-Hat': '踩镲',
+//   'Sleigh Bells': '雪橇铃',
+//   Flexatone: '弹音器',
+//   'Brake drum': '闸鼓',
+//   Gong: '锣',
+//   'concert tom': '音乐会嗵嗵鼓',
+//   'brake drum': '车轮鼓',
+//   'finger cymbal': '指钹',
+//   'ride cymbal': '叮叮镲',
+//   'Concert Toms': '音乐会嗵嗵鼓',
+//   Vibraslap: '弹音器',
+//   'Wood Blocks': '木鱼',
+//   'Temple Blocks': '木鱼',
+//   'Wood Block': '木鱼',
+//   'Field Drum': '军鼓',
+//   'Quad-Toms': '筒鼓',
+//   Quads: '筒鼓',
+//   'Drums set': '架子鼓',
+//   'High Bongo': '邦戈',
+//   Timbales: '天巴鼓',
+//   'rain stick': '雨棒',
+//   'String Bass': '弦乐低音',
+//   'Floor Tom': '侧嗵鼓',
+//   'Brake Drum': '闸鼓',
+//   'Tam-tam': '大锣',
+//   Cymbal: '镲',
+//   Cymbals: '镲'
+// };
 
 /** 获取分轨名称 */
-export const getInstrumentName = (name = '') => {
+export const getInstrumentName = (instruments: any, name = '') => {
   name = name.toLocaleLowerCase().replace(/ /g, '');
   if (!name) return '';
   for (let key in instruments) {

src/views/hot-music-more/index.tsx

@@ -151,7 +151,9 @@ export default defineComponent({
       },
       recommendSearch: {
         name: ''
-      }
+      },
+      // 乐器编码列表
+      instruments: {} as any
     });
     const tabsRef = ref();
 
@@ -414,6 +416,25 @@ export default defineComponent({
       }
     };
 
+    const getInstrumentCode = async () => {
+      const res = await request.get('/edu-app/musicSheet/instrumentCode', {
+        requestType: 'form',
+        hideLoading: true
+      });
+      if (res?.code === 200) {
+        const result = res.data || [];
+        // 初始化乐器列表
+        const instruments: any = {};
+        result.forEach((item: any) => {
+          const codes = item.code.split(',');
+          codes.forEach((code: any) => {
+            instruments[code] = item.name;
+          });
+        });
+        state.instruments = instruments;
+      }
+    };
+
     const tabResize = () => {
       tabsRef.value?.resize();
     };
@@ -440,6 +461,8 @@ export default defineComponent({
       await getMusicTagTree();
       getMusicList();
 
+      getInstrumentCode();
+
       window.addEventListener('resize', tabResize);
       // useEventListener(document, 'scroll', () => {
       //   if (state.isFocus) {
@@ -491,7 +514,7 @@ export default defineComponent({
                     class={styles.tabSection}
                     v-model:active={state.tabActive}
                     shrink
-                    onClickTab={(val) => {
+                    onClickTab={val => {
                       if (state.tabActive === '') {
                         if (state.isAllStatus) {
                           state.searchPopup = !state.searchPopup;
@@ -677,8 +700,6 @@ export default defineComponent({
           </List>
         </div>
 
-
-
         <Teleport to={'body'}>
           <div class={[styles.searchBodySection]}>
             <Popup position="top" round v-model:show={state.searchPopup}>
@@ -820,7 +841,11 @@ export default defineComponent({
           closeable
           round
           v-model:show={state.musicDetailPopup}>
-          <MusicDetail item={state.item} onHandleGoto={handleGoto} />
+          <MusicDetail
+            item={state.item}
+            instruments={state.instruments}
+            onHandleGoto={handleGoto}
+          />
         </Popup>
 
         <Popup

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

@@ -12,12 +12,12 @@ import styles from './index.module.less';
 import iconChange from '../images/icon-change.png';
 import iconDownload from '../images/icon-download.png';
 import iconStaff from '../images/icon-staff.png';
-import staff from '../images/staff/staff.png'
-import staffActive from '../images/staff/staff-active.png'
-import first from '../images/staff/first.png'
-import firstActive from '../images/staff/first-active.png'
-import fixed from '../images/staff/fixed.png'
-import fixedActive from '../images/staff/fixed-active.png'
+import staff from '../images/staff/staff.png';
+import staffActive from '../images/staff/staff-active.png';
+import first from '../images/staff/first.png';
+import firstActive from '../images/staff/first-active.png';
+import fixed from '../images/staff/fixed.png';
+import fixedActive from '../images/staff/fixed-active.png';
 import { Button, NoticeBar, Popover, showLoadingToast, showToast } from 'vant';
 import { state } from '@/state';
 import {
@@ -39,13 +39,17 @@ export default defineComponent({
     item: {
       type: Object,
       default: () => ({})
+    },
+    instruments: {
+      type: Array,
+      default: () => []
     }
   },
   emits: ['handleGoto'],
   setup(props, { emit }) {
     const item = toRef(props.item);
-    const noticeBarDom = ref()
-    const isScroll = ref(false)
+    const noticeBarDom = ref();
+    const isScroll = ref(false);
     const data = reactive({
       musicPdfUrl: '',
       iframeSrc: '',
@@ -63,8 +67,8 @@ export default defineComponent({
       () => props.item,
       () => {
         item.value = props.item;
-        data.musicPdfUrl = ''
-        data.iframeSrc = ''
+        data.musicPdfUrl = '';
+        data.iframeSrc = '';
         __init();
       }
     );
@@ -99,16 +103,16 @@ export default defineComponent({
         });
       }
       action.forEach((item: any) => {
-        if(item.value === data.showMusicImg) {
-          if(item.value === 'first') {
-            item.icon = firstActive
-          } else if(item.value == 'fixed') {
-            item.icon = fixedActive
-          } else if(item.value === 'staff') {
-            item.icon = staffActive
+        if (item.value === data.showMusicImg) {
+          if (item.value === 'first') {
+            item.icon = firstActive;
+          } else if (item.value == 'fixed') {
+            item.icon = fixedActive;
+          } else if (item.value === 'staff') {
+            item.icon = staffActive;
           }
         }
-      })
+      });
 
       return action.map((item, index) => {
         return {
@@ -125,11 +129,14 @@ export default defineComponent({
         return {
           ...item,
           color:
-            data.selectMusicInstrumentIndex === item.value ? 'var(--van-primary-color)' : '',
-          className: data.selectMusicInstrumentIndex === item.value ? 'fontBlod' : ''
+            data.selectMusicInstrumentIndex === item.value
+              ? 'var(--van-primary-color)'
+              : '',
+          className:
+            data.selectMusicInstrumentIndex === item.value ? 'fontBlod' : ''
         };
       });
-    })
+    });
 
     /** 保存图片 */
     const handleSave = async () => {
@@ -156,7 +163,7 @@ export default defineComponent({
             const waterCanvasImg = await addWatermark(canvas);
             // canvas转图片
             const dataURL = await convasToImg(waterCanvasImg);
-            console.log(dataURL, 'dataUrl')
+            console.log(dataURL, 'dataUrl');
             setTimeout(() => {
               showToast('已保存到相册');
             }, 500);
@@ -351,7 +358,7 @@ export default defineComponent({
               ? true
               : false;
 
-          const instrumentName = getInstrumentName(item);
+          const instrumentName = getInstrumentName(props.instruments, item);
           const instrumentId = instrumentCodeToInstrumentId(
             musicalInstruments,
             item
@@ -489,17 +496,23 @@ export default defineComponent({
       musicIframeLoad();
 
       nextTick(() => {
-        const noticeBarEl = noticeBarDom.value.$el
-        if(noticeBarEl){
-           isScroll.value = noticeBarEl.querySelector(".van-notice-bar__wrap")?.offsetWidth < noticeBarEl.querySelector(".van-notice-bar__content")?.offsetWidth
+        const noticeBarEl = noticeBarDom.value.$el;
+        if (noticeBarEl) {
+          isScroll.value =
+            noticeBarEl.querySelector('.van-notice-bar__wrap')?.offsetWidth <
+            noticeBarEl.querySelector('.van-notice-bar__content')?.offsetWidth;
         }
-      })
+      });
     };
 
-
     /** 去云练习 */
     const handleGoto = () => {
-      emit('handleGoto', item.value, data.showMusicImg, data.selectMusicInstrumentIndex)
+      emit(
+        'handleGoto',
+        item.value,
+        data.showMusicImg,
+        data.selectMusicInstrumentIndex
+      );
     };
 
     onMounted(() => {
@@ -510,17 +523,20 @@ export default defineComponent({
         <div class={styles.musicContainer}>
           <div class={styles.container}>
             <div
-              class={[styles['right-musicName'], isScroll.value && styles.isScroll]}
+              class={[
+                styles['right-musicName'],
+                isScroll.value && styles.isScroll
+              ]}
               style={{
                 opacity: !data.musicPdfUrl ? '1' : '0',
                 height: !data.musicPdfUrl ? 'auto' : '0'
               }}>
-                <NoticeBar
-                    ref={noticeBarDom}
-                    text={item.value?.musicSheetName}
-                    class={styles.noticeBar}
-                    background="none"
-                  />
+              <NoticeBar
+                ref={noticeBarDom}
+                text={item.value?.musicSheetName}
+                class={styles.noticeBar}
+                background="none"
+              />
             </div>
             {data.iframeSrc &&
             (isEnsemble.value || data.musicPdfUrl || !isMusicImg.value) ? (
@@ -604,20 +620,35 @@ export default defineComponent({
             )}
           </div>
 
-
-          <div class={[styles.container, styles.downContainer]}  ref={downRef}>
+          <div class={[styles.container, styles.downContainer]} ref={downRef}>
             <div
               class={[styles['right-musicName'], styles.downloadMusicName]}
               style={{
                 opacity: !data.musicPdfUrl ? '1' : '0',
                 height: !data.musicPdfUrl ? 'auto' : '0'
               }}>
-                  <div class={styles.name}>{item.value?.musicSheetName}</div>
-              </div>
-              <div>
-                {data.showMusicImg === 'first' ? (
-                  <>
-                    {item.value?.musicFirstImg
+              <div class={styles.name}>{item.value?.musicSheetName}</div>
+            </div>
+            <div>
+              {data.showMusicImg === 'first' ? (
+                <>
+                  {item.value?.musicFirstImg
+                    ?.split(',')
+                    .map((item: any, index: number) => {
+                      return (
+                        <img
+                          class={styles.staff}
+                          src={item}
+                          key={item}
+                          crossorigin="anonymous"
+                        />
+                      );
+                    })}
+                </>
+              ) : data.showMusicImg === 'fixed' ? (
+                <>
+                  <TransitionGroup name="van-fade">
+                    {item.value?.musicJianImg
                       ?.split(',')
                       .map((item: any, index: number) => {
                         return (
@@ -629,45 +660,28 @@ export default defineComponent({
                           />
                         );
                       })}
-                  </>
-                ) : data.showMusicImg === 'fixed' ? (
-                  <>
-                    <TransitionGroup name="van-fade">
-                      {item.value?.musicJianImg
-                        ?.split(',')
-                        .map((item: any, index: number) => {
-                          return (
-                            <img
-                              class={styles.staff}
-                              src={item}
-                              key={item}
-                              crossorigin="anonymous"
-                            />
-                          );
-                        })}
-                    </TransitionGroup>
-                  </>
-                ) : (
-                  <>
-                    {item.value?.musicImg
-                      ?.split(',')
-                      .map((item: any, index: number) => {
-                        return (
-                          <img
-                            class={styles.staff}
-                            src={item + '?v=' + Date.now()}
-                            key={item}
-                            crossorigin="anonymous"
-                          />
-                        );
-                      })}
-                  </>
-                )}
-              </div>
+                  </TransitionGroup>
+                </>
+              ) : (
+                <>
+                  {item.value?.musicImg
+                    ?.split(',')
+                    .map((item: any, index: number) => {
+                      return (
+                        <img
+                          class={styles.staff}
+                          src={item + '?v=' + Date.now()}
+                          key={item}
+                          crossorigin="anonymous"
+                        />
+                      );
+                    })}
+                </>
+              )}
+            </div>
           </div>
         </div>
 
-
         <div class={styles.btnGroup}>
           <div class={styles.operation}>
             {isEnsemble.value && (
@@ -679,7 +693,7 @@ export default defineComponent({
                 placement="top-start"
                 onSelect={(item: any) => {
                   // console.log(item, 'item')
-                  data.selectMusicInstrumentIndex = item.value
+                  data.selectMusicInstrumentIndex = item.value;
                   data.showChangeVoice = false;
                   musicIframeLoad();
                 }}>