|
|
@@ -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,36 @@ 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) {
|
|
|
+ // staffData.iframeSrc =
|
|
|
+ // "/pdf/web/viewer.html?file=" +
|
|
|
+ // encodeURIComponent(staffData.musicPdfUrl) + "&t=" + Date.now();
|
|
|
+ // https://cdn.oss.dayaedu.com/daya202409/UOFW4q5.pdf
|
|
|
+ // https://cdn.oss.dayaedu.com/daya202409/UOFVK2A.pdf
|
|
|
+ // https://cdn.oss.dayaedu.com/daya202409/UODQffO.pdf
|
|
|
+
|
|
|
+ // staffData.iframeSrc = `${location.origin}${
|
|
|
+ // location.pathname
|
|
|
+ // }pdf/web/viewer.html?file=${encodeURIComponent(staffData.musicPdfUrl)}&t=${Date.now()}`
|
|
|
+
|
|
|
+ // const iframeRef = document.querySelector("#staffIframeRef") as any
|
|
|
+ // iframeRef.contentWindow.location.replace("/pdf/web/viewer.html?file=" +
|
|
|
+ // encodeURIComponent(staffData.musicPdfUrl) + "&t=" + Date.now());
|
|
|
+
|
|
|
+ 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 {
|
|
|
+ // staffData.iframeSrc = `/osmd/index.html`;
|
|
|
+ // staffData.iframeSrc = `${location.origin}${location.pathname}osmd/index.html`
|
|
|
+ // const iframeRef = document.querySelector("#staffIframeRef") as any
|
|
|
+ // iframeRef.contentWindow.location.replace(`/osmd/index.html`);
|
|
|
+
|
|
|
+ const iframeRef = document.querySelector("#staffIframeRef") as any
|
|
|
+ iframeRef.contentWindow.location.replace(`${location.origin}${location.pathname}osmd/index.html`);
|
|
|
+
|
|
|
+ }
|
|
|
} catch (error) {
|
|
|
//
|
|
|
}
|
|
|
@@ -136,9 +165,31 @@ 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
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // for (let key of instruments) {
|
|
|
+ // const _key = key.toLocaleLowerCase().replace(/ /g, '')
|
|
|
+ // if (name.includes(_key)) {
|
|
|
+ // return key
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ return ''
|
|
|
+ }
|
|
|
+
|
|
|
const toDetail = async (row: any) => {
|
|
|
if (row.musicSheetType === 'SINGLE') {
|
|
|
loading.value = false
|
|
|
+ staffData.musicPdfUrl = row.musicPdfUrl
|
|
|
return
|
|
|
}
|
|
|
staffData.partNames = await getPartNames(row.xmlFileUrl)
|
|
|
@@ -152,6 +203,7 @@ export default defineComponent({
|
|
|
return {
|
|
|
text: item.track + (instrumentName ? `(${instrumentName})` : ''),
|
|
|
instrumentName: instrumentName,
|
|
|
+ track: item.track,
|
|
|
xmlIndex,
|
|
|
value: index
|
|
|
}
|
|
|
@@ -160,6 +212,25 @@ export default defineComponent({
|
|
|
const defaultShowStaff = partColumns.value[staffData.selectedPartIndex]
|
|
|
staffData.selectedPartName = defaultShowStaff.instrumentName
|
|
|
staffData.partXmlIndex = defaultShowStaff.xmlIndex
|
|
|
+
|
|
|
+ if (row.musicSheetType === 'SINGLE') {
|
|
|
+ staffData.musicPdfUrl = row.musicPdfUrl
|
|
|
+ } else {
|
|
|
+ // 是否为并
|
|
|
+ if(staffData.isComberRender) {
|
|
|
+ staffData.musicPdfUrl = row.musicPdfUrl
|
|
|
+ } else {
|
|
|
+ const item = getInstrumentItem(
|
|
|
+ staffData.details?.background || [],
|
|
|
+ partColumns.value[staffData.selectedPartIndex]?.track
|
|
|
+ )
|
|
|
+ if (item) {
|
|
|
+ staffData.musicPdfUrl = item.musicPdfUrl
|
|
|
+ } else {
|
|
|
+ staffData.musicPdfUrl = ''
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
const getMusicDetail = async () => {
|
|
|
@@ -304,7 +375,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 +413,7 @@ export default defineComponent({
|
|
|
}}
|
|
|
src={staffData.iframeSrc}
|
|
|
onLoad={musicIframeLoad}
|
|
|
- ></iframe>
|
|
|
+ ></iframe> */}
|
|
|
{/* </> */}
|
|
|
{/* // ) : (
|
|
|
// <>
|
|
|
@@ -442,8 +542,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)}
|
|
|
/>
|
