fix

src/page-gym/detail/index.tsx

@@ -28,11 +28,11 @@ import GuidePage from "../custom-plugins/guide-page";
 import { handleSetCustomRender, setCustomGradual, setCustomNoteRealValue } from "../custom-plugins/custom-gradual";
 import { getStorageSpeed, setGlobalData } from "/src/utils";
 import { getInstrumentsClassfiy } from "/src/constant/instrumentsClassfiy";
-import MoveMusicScore from "../custom-plugins/move-music-score";
+import MoveMusicScore from "/src/view/plugins/move-music-score";
 
 export const detailData_gym = reactive({
-	extStyleConfigJson: null as any
-})
+	extStyleConfigJson: null as any,
+});
 //特殊教材分类id
 const classIds = [1, 30, 97]; // [大雅金唐, 竖笛教程, 声部训练]
 const classKey = "sysMusicScoreCategoriesList";
@@ -104,7 +104,7 @@ export default defineComponent({
 		const getVoiceSubjectId = () => {
 			const { partListNames, partIndex } = state;
 			const subjectId = getInstrumentsClassfiy(partListNames[partIndex]);
-			return isNaN(Number(subjectId)) ? 0 : Number(subjectId)
+			return isNaN(Number(subjectId)) ? 0 : Number(subjectId);
 		};
 		/** 获取分类数据 */
 		const getCategory = (res: any) => {
@@ -168,7 +168,7 @@ export default defineComponent({
 
 			// 检测是否原音和伴奏都有
 			if (!state.music || !state.accompany) {
-				state.playSource = state.music ? "music" : "background"
+				state.playSource = state.music ? "music" : "background";
 			}
 		};
 
@@ -306,10 +306,6 @@ export default defineComponent({
 							</div>
 						)}
 					</Transition>
-					
-
-					{/* 移动模块 */}
-					{/* {query.isMove == '1' && <MoveMusicScore />} */}
 				</div>
 
 				{/* 插件模块 */}
@@ -331,6 +327,8 @@ export default defineComponent({
 							{storeData.platformType === "STUDENT" && (query.workRecord || query.evaluatingRecord) && <VipModel />}
 							{/* 引导 */}
 							<GuidePage />
+							{/* 移动模块 */}
+							{/* {query.isMove == "1" && <MoveMusicScore />} */}
 						</>
 					)}
 				</div>

src/page-gym/custom-plugins/move-music-score/index.tsx → src/view/plugins/move-music-score/index.tsx

@@ -1,7 +1,7 @@
 import { showToast } from "vant";
 import { defineComponent, onMounted, reactive } from "vue";
 import state from "/src/state";
-import { detailData_gym } from "../../detail";
+import { detailData_gym } from "../../../page-gym/detail";
 import request from "/src/utils/request";
 import { getQuery } from "/src/utils/queryString";
 
@@ -20,10 +20,12 @@ export const moveData = reactive({
 
 function initSvgId() {
 	const svg = document.querySelector("#osmdSvgPage1");
+	console.log("🚀 ~ svg:", svg);
 	if (!svg) return;
 	const vfstavetempo: HTMLElement[] = Array.from(svg.querySelectorAll(".vf-stavetempo"));
 	const vftext: HTMLElement[] = Array.from(svg.querySelectorAll(".vf-text"));
-	const vfstaveSection: HTMLElement[] = Array.from(svg.querySelectorAll(".vf-StaveSection"));
+	console.log("🚀 ~ vftext:", vftext);
+	const vfstaveSection: HTMLElement[] = []//Array.from(svg.querySelectorAll(".vf-StaveSection"));
 	const vfRepetition: HTMLElement[] = Array.from(svg.querySelectorAll(".vf-Repetition"));
 	const vflineGroup: HTMLElement[] = Array.from(svg.querySelectorAll(".vf-lineGroup"));
 	let tempIndex = 1;
@@ -51,7 +53,6 @@ function initSvgId() {
 		setEleId(ele, "line" + lineIndex);
 		lineIndex++;
 	});
-	readerModelBox();
 	// if (moveData.isWeb) {
 	// 	readerModelBox();
 	// }
@@ -106,16 +107,26 @@ function formateZoom(n: number) {
 }
 
 function createModelBox(ele: SVGAElement) {
-	const { left, top, width, height } = getBox(ele);
+	const musicContainer = document.getElementById("musicAndSelection")?.getBoundingClientRect() || { x: 0, y: 0 };
+	const parentLeft = musicContainer.x || 0;
+	const parentTop = musicContainer.y || 0;
+	const noteBbox = ele.getBoundingClientRect();
+	const bbox = {
+		left: noteBbox.x - parentLeft - noteBbox.width / 4 + "px",
+		top: noteBbox.y - parentTop + "px",
+		width: noteBbox.width * 1.5 + "px",
+		height: noteBbox.height + "px",
+	};
 	const type = ele.getAttribute("class");
 	moveData.modelList.push({
 		id: ele.getAttribute("id"),
+		bbox,
 		type,
 		isMove: false,
-		left,
-		top,
-		width,
-		height,
+		left: noteBbox.left,
+		top: noteBbox.top,
+		width: noteBbox.width,
+		height: noteBbox.height,
 		x: 0,
 		y: 0,
 		zoom,
@@ -125,24 +136,6 @@ function createModelBox(ele: SVGAElement) {
 	});
 }
 
-function readerModelBox() {
-	const container = document.querySelector(".moveModelWrap");
-	if (!container) return;
-	// console.log("🚀 ~ moveData.modelList", moveData.modelList);
-	for (let i = 0; i < moveData.modelList.length; i++) {
-		const item = moveData.modelList[i];
-		const div = document.createElement("div");
-		div.classList.add("moveModel");
-		div.style.left = item.left + "px";
-		div.style.top = item.top + "px";
-		div.style.width = item.width + "px";
-		div.style.height = item.height + "px";
-		div.dataset.id = item.id;
-		dragmove(div);
-		container.appendChild(div);
-	}
-}
-
 function getBox(ele: SVGAElement) {
 	if (!ele) return {};
 	const box = ele.getBBox();
@@ -421,6 +414,7 @@ export default defineComponent({
 	setup() {
 		const query = getQuery();
 		const isOpen = query.isMove === "1" ? true : false;
+		console.log("🚀 ~ isOpen:", isOpen);
 		onMounted(() => {
 			if (isOpen) {
 				initSvgId();
@@ -428,6 +422,6 @@ export default defineComponent({
 			if (detailData_gym.extStyleConfigJson) {
 			}
 		});
-		return () => <div style={{ display: "none" }}></div>;
+		return () => <div></div>;
 	},
 });

src/view/selection/index.module.less

@@ -14,6 +14,9 @@
 .note {
     // background-color: rgba(0, 0, 0, .3);
 }
+.noteMove{
+    background-color: rgba(0, 0, 0, .3);
+}
 
 .staveBox {
     background-color: var(--active-stave-box) !important;

src/view/selection/index.tsx

@@ -5,6 +5,7 @@ import { metronomeData } from "/src/helpers/metronome";
 import { evaluatingData } from "../evaluating";
 import { leveByScoreMeasureIcons } from "../evaluating/evaluatResult";
 import { Icon } from "vant";
+import { moveData } from "../plugins/move-music-score";
 
 const selectData = reactive({
 	notes: [] as any[],
@@ -216,6 +217,10 @@ export default defineComponent({
 						</div>
 					);
 				})}
+
+				{moveData.modelList.map((item: any) => {
+					return <div class={[styles.position, styles.noteMove]} style={item.bbox}></div>;
+				})}
 			</div>
 		);
 	},