总控平台支持 乐器切换

src/views/music-library/api.ts

@@ -354,3 +354,13 @@ export const musicSheetApplicationExtendDel = (applicationExtendId?: any) => {
     method: 'post'
   } as any)
 }
+
+/**
+ * 获取 曲目详情
+ */
+export const api_getCbsDetail = (id:string): Promise<any> => {
+  return request({
+    url: '/cbs-app/musicSheet/cbsDetail/' + id,
+    method: 'get'
+  })
+}

src/views/music-library/music-sheet/component/music-list.module.less

@@ -14,4 +14,18 @@
   width: 1000px;
   height: 80vh;
   border: none;
+}
+
+.musicPreviewModal{
+  width: 1030px !important;
+  height: 701px !important;
+  max-width: 90vw !important;
+  max-height: 90vh !important;
+  overflow: hidden;
+  border-radius: 18px !important;
+  :global{
+      .n-card__content{
+          padding: 0 !important;
+      }
+  }
 }

src/views/music-library/music-sheet/component/music-list.tsx

@@ -32,7 +32,7 @@ import {
 } from '../../api'
 import MusicOperation from '../modal/music-operationV2'
 import { subjectPage } from '@/views/system-manage/api'
-import MusicPreView from '../modal/musicPreView'
+import MusicPreView from '../modal/musicPreViewCbs'
 import UseProject from '@views/music-library/music-sheet/modal/use-project'
 import { getMapValueByKey } from '@/utils/filters'
 import { appKey, musicSheetSourceType } from '@/utils/constant'
@@ -921,14 +921,13 @@ export default defineComponent({
         <NModal
           blockScroll={true}
           v-model:show={state.musicPreview}
-          preset="dialog"
+          preset="card"
           showIcon={false}
           title={'曲目预览'}
-          style={{ width: 'auto' }}
+          class={styles.musicPreviewModal}
         >
           <MusicPreView
             item={state.musicScore}
-            isMove={1}
             scoreType={state.musicPreviewScoreType}
           />
         </NModal>

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

@@ -35,4 +35,46 @@
   width: 1000px;
   height: 80vh;
   border: none;
-}
+}
+
+.musicPreView {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  .musicList {
+    position: absolute;
+    top: 14px;
+    left: 30px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 118px;
+    height: 30px;
+    border-radius: 20px;
+    background-color: rgba(255, 255, 255, 0.2);
+    cursor: pointer;
+    &:active {
+      opacity: 0.8;
+    }
+    .musicImg {
+      width: 18px;
+      height: 18px;
+    }
+    .tipImg {
+      width: 9px;
+      height: 5px;
+    }
+    & > div {
+      font-weight: 600;
+      font-size: 14px;
+      color: #fff;
+      margin: 0 5px;
+      line-height: 1;
+    }
+  }
+}
+:global {
+  .musicalInstrumentsListPop {
+    width: 118px;
+  }
+}

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

@@ -0,0 +1,103 @@
+import { defineComponent, ref, computed } from 'vue'
+import { useUserStore } from '@/store/modules/user'
+import styles from './index.module.less'
+import { api_getCbsDetail } from '../../api'
+import musicImg from './img/music.png'
+import tipImg from './img/tip.png'
+import { NPopselect } from 'naive-ui'
+
+export default defineComponent({
+  name: 'musicPreView',
+  props: {
+    item: {
+      type: Object,
+      default: () => {}
+    },
+    scoreType: {
+      type: String,
+      default: 'staff'
+    }
+  },
+  setup(props, { emit }) {
+    const userStore = useUserStore()
+    const token = userStore.getToken
+    const src = ref('')
+    // 获取乐器列表
+    const musicalInstrumentsList = ref<any[]>([])
+    const muicInstrumentId = ref<undefined | string>(undefined)
+    api_getCbsDetail(props.item.id).then((res) => {
+      if (res.code === 200) {
+        // 当不是节奏练习(isAllSubject),并且是独奏SINGLE，且有演奏文件的时候PLAY 才加载乐器列表字段;当乐器列表大于1个的时候才显示，默认展示第一个乐器
+        const { isAllSubject, musicSheetType, audioPlayTypes, musicalInstruments } = res.data
+        if (!isAllSubject && musicSheetType === 'SINGLE' && ['PLAY'].includes(audioPlayTypes)) {
+          musicalInstrumentsList.value = (musicalInstruments || []).map((item: any) => {
+            return {
+              value: item.id,
+              label: item.name
+            }
+          })
+        }
+        if (musicalInstrumentsList.value.length) {
+          muicInstrumentId.value = musicalInstrumentsList.value[0].value
+          setSrc(muicInstrumentId.value)
+        } else {
+          setSrc()
+        }
+      }
+    })
+    const musicName = computed(() => {
+      return musicalInstrumentsList.value.find((item) => {
+        return item.value === muicInstrumentId.value
+      })?.label
+    })
+
+    const apiUrls = {
+      dev: 'https://dev.kt.colexiu.com',
+      test: 'https://test.lexiaoya.cn',
+      online: 'https://mec.colexiu.com'
+    }
+    const environment = location.origin.includes('//dev')
+      ? 'dev'
+      : location.origin.includes('//test')
+      ? 'test'
+      : location.origin.includes('//mec.colexiu')
+      ? 'online'
+      : 'dev'
+    const apiUrl = apiUrls[environment]
+    const prefix = /(localhost|192)/.test(location.host) ? 'https://test.kt.colexiu.com/' : apiUrl
+    function setSrc(instrumentId?: string) {
+      let url =
+        prefix +
+        `/instrument/?_t=${Date.now()}&id=${
+          props.item.id
+        }&modelType=practise&modeType=json&Authorization=${token}&isCbs=true&isMove=1`
+      url += '&musicRenderType=' + props.scoreType
+      instrumentId && (url += `&instrumentId=${instrumentId}`)
+      src.value = url
+    }
+    return () => (
+      <div class={styles.musicPreView}>
+        {musicalInstrumentsList.value.length > 1 && (
+          <NPopselect
+            v-model:value={muicInstrumentId.value}
+            options={musicalInstrumentsList.value}
+            scrollable
+            size={'large'}
+            trigger={'click'}
+            class="musicalInstrumentsListPop"
+            onUpdate:value={setSrc}
+          >
+            <div class={styles.musicList}>
+              <img class={styles.musicImg} src={musicImg} />
+              <div>{musicName.value}</div>
+              <img class={styles.tipImg} src={tipImg} />
+            </div>
+          </NPopselect>
+        )}
+        {src.value && (
+          <iframe width={'100%'} height={'100%'} frameborder="0" src={src.value}></iframe>
+        )}
+      </div>
+    )
+  }
+})