|
|
@@ -7,7 +7,7 @@ import iconBg from './images/music-img-default.png'
|
|
|
import iconDownload from './images/icon-download.png'
|
|
|
import iconChange from './images/icon-change.png'
|
|
|
import iconMusic from './images/icon-music.png'
|
|
|
-import { postMessage } from '@/helpers/native-message'
|
|
|
+import { postMessage, promisefiyPostMessage } from '@/helpers/native-message'
|
|
|
import request from '@/helpers/request'
|
|
|
import { state } from '@/state'
|
|
|
import { useRoute } from 'vue-router'
|
|
|
@@ -30,6 +30,7 @@ export default defineComponent({
|
|
|
const partColumns = ref<any>([])
|
|
|
const staffData = reactive({
|
|
|
details: {} as any,
|
|
|
+ musicPdfUrl: '',
|
|
|
status: false,
|
|
|
open: false,
|
|
|
audioReady: false,
|
|
|
@@ -114,8 +115,17 @@ export default defineComponent({
|
|
|
|
|
|
const renderStaff = async () => {
|
|
|
try {
|
|
|
- // staffData.iframeSrc = `https://mantest.dayaedu.com/accompany/osmd/index.html`
|
|
|
- staffData.iframeSrc = `${location.origin}${location.pathname}osmd/index.html`
|
|
|
+ if (staffData.musicPdfUrl) {
|
|
|
+
|
|
|
+ const iframeRef = document.querySelector("#staffIframeRef") as any
|
|
|
+ iframeRef.contentWindow.location.replace( `${location.origin}${
|
|
|
+ location.pathname
|
|
|
+ }pdf/web/viewer.html?file=${encodeURIComponent(staffData.musicPdfUrl)}&t=${Date.now()}`);
|
|
|
+ } else {
|
|
|
+ const iframeRef = document.querySelector("#staffIframeRef") as any
|
|
|
+ iframeRef.contentWindow.location.replace(`${location.origin}${location.pathname}osmd/index.html`);
|
|
|
+
|
|
|
+ }
|
|
|
} catch (error) {
|
|
|
//
|
|
|
}
|
|
|
@@ -136,11 +146,29 @@ export default defineComponent({
|
|
|
return partNames.filter((text: string) => text.toLocaleUpperCase() !== 'COMMON') || []
|
|
|
}
|
|
|
|
|
|
+ /** 获取分轨信息 */
|
|
|
+ const getInstrumentItem = (instruments: any, name = '') => {
|
|
|
+ name = name.toLocaleLowerCase().replace(/ /g, '') //.replace(/\d*/gi, '')
|
|
|
+ if (!name) return ''
|
|
|
+ for (let key in instruments) {
|
|
|
+ const item = instruments[key]
|
|
|
+ const _key = item.track?.toLocaleLowerCase().replace(/ /g, '') //.replace(/\d*/gi, '')
|
|
|
+ console.log(_key)
|
|
|
+ if (_key === name) {
|
|
|
+ return item
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return ''
|
|
|
+ }
|
|
|
+
|
|
|
const toDetail = async (row: any) => {
|
|
|
if (row.musicSheetType === 'SINGLE') {
|
|
|
loading.value = false
|
|
|
+ staffData.musicPdfUrl = row.musicPdfUrl
|
|
|
return
|
|
|
}
|
|
|
+
|
|
|
+
|
|
|
staffData.partNames = await getPartNames(row.xmlFileUrl)
|
|
|
let partList = row.background || []
|
|
|
partList = partList.filter(
|
|
|
@@ -152,6 +180,7 @@ export default defineComponent({
|
|
|
return {
|
|
|
text: item.track + (instrumentName ? `(${instrumentName})` : ''),
|
|
|
instrumentName: instrumentName,
|
|
|
+ track: item.track,
|
|
|
xmlIndex,
|
|
|
value: index
|
|
|
}
|
|
|
@@ -160,6 +189,22 @@ export default defineComponent({
|
|
|
const defaultShowStaff = partColumns.value[staffData.selectedPartIndex]
|
|
|
staffData.selectedPartName = defaultShowStaff.instrumentName
|
|
|
staffData.partXmlIndex = defaultShowStaff.xmlIndex
|
|
|
+
|
|
|
+ // 是否为并
|
|
|
+ if(staffData.isComberRender) {
|
|
|
+ staffData.musicPdfUrl = row.musicPdfUrl
|
|
|
+ } else {
|
|
|
+ const item = getInstrumentItem(
|
|
|
+ staffData.details?.background || [],
|
|
|
+ partColumns.value[staffData.selectedPartIndex]?.track
|
|
|
+ )
|
|
|
+ console.log(item, 'item', staffData.details?.background, partColumns.value[staffData.selectedPartIndex]?.track)
|
|
|
+ if (item) {
|
|
|
+ staffData.musicPdfUrl = item.musicPdfUrl
|
|
|
+ } else {
|
|
|
+ staffData.musicPdfUrl = ''
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
const getMusicDetail = async () => {
|
|
|
@@ -285,7 +330,7 @@ export default defineComponent({
|
|
|
<div class={styles.musicImg}>
|
|
|
<Image src={iconBg} />
|
|
|
</div>
|
|
|
- <div class={styles.info}>
|
|
|
+ {staffData.details.id && !staffData.musicPdfUrl && <div class={styles.info}>
|
|
|
<p class={styles.names}>
|
|
|
{staffData.details.musicSheetName}
|
|
|
{staffData.details.musicSheetType === 'CONCERT' && staffData.selectedPartName
|
|
|
@@ -293,10 +338,11 @@ export default defineComponent({
|
|
|
: ''}
|
|
|
</p>
|
|
|
<p class={styles.author}>{staffData.details.composer}</p>
|
|
|
- </div>
|
|
|
+ </div>}
|
|
|
+
|
|
|
</div>
|
|
|
|
|
|
- <div class={styles.showImgContainer}>
|
|
|
+ <div class={[styles.showImgContainer, staffData.musicPdfUrl && styles.pdfContainer]}>
|
|
|
{/* {staffData.details?.musicSheetType === 'CONCERT' ? (
|
|
|
<> */}
|
|
|
{loading.value && (
|
|
|
@@ -304,7 +350,36 @@ export default defineComponent({
|
|
|
<Skeleton title row={7} />
|
|
|
</>
|
|
|
)}
|
|
|
- <iframe
|
|
|
+
|
|
|
+ {staffData.details.id ? staffData.musicPdfUrl ? (
|
|
|
+ <iframe
|
|
|
+ style={{
|
|
|
+ opacity: loading.value ? 0 : 1,
|
|
|
+ width: '100%',
|
|
|
+ height: '100%'
|
|
|
+ }}
|
|
|
+ id="staffIframeRef"
|
|
|
+ // src={staffData.iframeSrc}
|
|
|
+ onLoad={() => {
|
|
|
+ // 判断是用哪个渲染的
|
|
|
+ loading.value = false
|
|
|
+ }}
|
|
|
+ ></iframe>
|
|
|
+ ) : (
|
|
|
+ <iframe
|
|
|
+ id="staffIframeRef"
|
|
|
+ style={{
|
|
|
+ opacity: loading.value ? 0 : 1,
|
|
|
+ width: '100%',
|
|
|
+ height: '100%'
|
|
|
+ }}
|
|
|
+ // src={staffData.iframeSrc}
|
|
|
+ onLoad={() => {
|
|
|
+ musicIframeLoad()
|
|
|
+ }}
|
|
|
+ ></iframe>
|
|
|
+ ) : ''}
|
|
|
+ {/* <iframe
|
|
|
id="staffIframeRef"
|
|
|
style={{
|
|
|
opacity: loading.value ? 0 : 1,
|
|
|
@@ -313,7 +388,7 @@ export default defineComponent({
|
|
|
}}
|
|
|
src={staffData.iframeSrc}
|
|
|
onLoad={musicIframeLoad}
|
|
|
- ></iframe>
|
|
|
+ ></iframe> */}
|
|
|
{/* </> */}
|
|
|
{/* // ) : (
|
|
|
// <>
|
|
|
@@ -347,7 +422,24 @@ export default defineComponent({
|
|
|
class={styles.icon}
|
|
|
onClick={() => {
|
|
|
if (loading.value) return
|
|
|
- downloadStatus.value = true
|
|
|
+ if (staffData.musicPdfUrl) {
|
|
|
+ const songName =
|
|
|
+ staffData.details?.musicSheetName +
|
|
|
+ (staffData.details.musicSheetType === 'CONCERT' && staffData.selectedPartName
|
|
|
+ ? `(${
|
|
|
+ staffData.selectedPartName
|
|
|
+ })`
|
|
|
+ : "");
|
|
|
+ promisefiyPostMessage({
|
|
|
+ api: "downloadFile",
|
|
|
+ content: {
|
|
|
+ downloadUrl: staffData.musicPdfUrl,
|
|
|
+ fileName: songName,
|
|
|
+ },
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ downloadStatus.value = true
|
|
|
+ }
|
|
|
}}
|
|
|
>
|
|
|
<img src={iconDownload} />
|
|
|
@@ -442,8 +534,32 @@ export default defineComponent({
|
|
|
staffData.partXmlIndex = value.selectedOptions[0].xmlIndex
|
|
|
// openView({ id: staffData.instrumentName })
|
|
|
nextTick(() => {
|
|
|
- resetRender()
|
|
|
- })
|
|
|
+ const item = getInstrumentItem(staffData.details.background || [], value.selectedOptions[0].track);
|
|
|
+ console.log(item, 'nextTick', staffData.details)
|
|
|
+ let tempPdf = ""
|
|
|
+ if (staffData?.isComberRender) {
|
|
|
+ if (staffData?.musicPdfUrl) {
|
|
|
+ tempPdf = staffData?.musicPdfUrl
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ tempPdf = item?.musicPdfUrl
|
|
|
+ }
|
|
|
+ if (tempPdf) {
|
|
|
+ staffData.musicPdfUrl = tempPdf
|
|
|
+ // staffLoading.value = true
|
|
|
+ renderStaff()
|
|
|
+ } else {
|
|
|
+ staffData.musicPdfUrl = ""
|
|
|
+ loading.value = true
|
|
|
+ // 为了处理，之前是使用pdf渲染，现在又用osmd，iframe没有重新加载
|
|
|
+ if (staffData.iframeSrc.indexOf("pdf/web") !== -1) {
|
|
|
+ renderStaff()
|
|
|
+ } else {
|
|
|
+ resetRender()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // console.log(value, "value", item);
|
|
|
+ });
|
|
|
}}
|
|
|
onCancel={() => (staffData.open = false)}
|
|
|
/>
|
