管乐迷查看报告

src/components/the-audio/index.tsx

@@ -0,0 +1,31 @@
+import { defineComponent, reactive, ref } from "vue";
+import styles from "./index.module.less";
+import { Icon } from "vant";
+export default defineComponent({
+	name: "the-audio",
+    props:{
+        src: {
+            type: String,
+            default: ''
+        }
+    },
+	setup(props) {
+        const videoRef = ref()
+		const videoData = reactive({
+			play: false,
+		});
+        const toggle = () => {
+            videoData.play = !videoData.play
+            if (videoData.play) {
+                videoRef.value?.play()
+            } else {
+                videoRef.value?.pause()
+            }
+        }
+		return () => (
+			<div class={styles.wrap}>
+				<audio ref={videoRef} preload="auto" controls src={props.src}></audio>
+			</div>
+		);
+	},
+});

src/page-colexiu/evaluat-model/index.tsx

@@ -159,7 +159,7 @@ export default defineComponent({
 				return;
 			} else if (type === "look") {
 				// 跳转
-				handleViewReport();
+				handleViewReport('recordId', 'colexiu');
 				return;
 			} else if (type === "practise") {
 				// 去练习

src/page-gym/evaluat-model/index.tsx

@@ -166,7 +166,7 @@ export default defineComponent({
 				return;
 			} else if (type === "look") {
 				// 跳转
-				handleViewReport();
+				handleViewReport('recordId', 'gym');
 				return;
 			} else if (type === "practise") {
 				// 去练习

src/page-gym/router.ts

@@ -1,6 +1,7 @@
 import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router";
 import Home from "./detail/index";
 import Notfind from "../view/notfind";
+import GymShare from "../report-share/gym-share";
 
 const routes: RouteRecordRaw[] = [
 	{
@@ -8,6 +9,10 @@ const routes: RouteRecordRaw[] = [
 		component: Home,
 	},
 	{
+		path: "/report/:id",
+		component: GymShare
+	},
+	{
 		path: "/:pathMatch(.*)*",
 		component: Notfind,
 		meta: {

src/page-orchestra/evaluat-model/index.tsx

@@ -172,7 +172,7 @@ export default defineComponent({
 				return;
 			} else if (type === "look") {
 				// 跳转
-				handleViewReport("recordIdStr");
+				handleViewReport("recordIdStr", 'orchestra');
 				return;
 			} else if (type === "practise") {
 				// 去练习

src/report-share/gym-share/App.tsx

@@ -0,0 +1,57 @@
+import request from "umi-request";
+import { computed, defineComponent, onBeforeMount, onMounted } from "vue";
+import { RouterView } from "vue-router";
+import { employeeQueryUserInfo, studentQueryUserInfo, teacherQueryUserInfo } from "./api";
+import { getQuery } from "/src/utils/queryString";
+import { setUserInfo, storeData } from "/src/store";
+import { getRandomKey, setBehaviorId, setToken } from "/src/utils";
+import { promisefiyPostMessage } from "/src/utils/native-message";
+import TheError from "/src/components/The-error";
+
+export default defineComponent({
+	name: "App",
+	setup() {
+		const query: any = getQuery();
+		/** 获取用户信息 */
+		const getUserInfo = async () => {
+			// const a = await request.get(`/student/queryUserInfo`)
+			// console.log(a)
+			if (storeData.platformType === "WEB") {
+				return await employeeQueryUserInfo();
+			} else if (storeData.platformType === "TEACHER") {
+				return await teacherQueryUserInfo();
+			}
+			return await studentQueryUserInfo();
+		};
+		const setUser = async () => {
+			const res = await getUserInfo();
+			const student = res?.data || {};
+			setUserInfo(student);
+			// console.log("🚀 ~ res:", student);
+		};
+		onBeforeMount(async () => {
+			if (query.Authorization) {
+				setToken(query.Authorization);
+			} else {
+				// 获取token
+				const res = await promisefiyPostMessage({ api: "getToken" });
+				const content = res?.content;
+				if (content?.accessToken) {
+					setToken(content.tokenType + " " + content.accessToken);
+				}
+				console.log(content.tokenType + " " + content.accessToken);
+			}
+			setUser();
+			setBehaviorId(getRandomKey());
+		});
+		onMounted(() => {
+			const _loading = document.getElementById("loading");
+			_loading && document.body.removeChild(_loading);
+		});
+
+		const inited = computed(() => {
+			return storeData.status === "login";
+		});
+		return () => <>{storeData.status === "error" ? <TheError /> : inited.value ? <RouterView /> : null}</>;
+	},
+});

src/report-share/gym-share/again.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="33px" height="33px" viewBox="0 0 33 33" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>button-normal备份</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="评测报告（节奏）" transform="translate(-741.000000, -13.000000)">
+            <g id="button-normal备份" transform="translate(741.000000, 13.000000)">
+                <rect id="button-normal" fill="#DEFFF9" x="0" y="0" width="33" height="33" rx="16.5"></rect>
+                <g id="编组" transform="translate(17.074156, 16.223239) rotate(-330.000000) translate(-17.074156, -16.223239) translate(9.574156, 7.973239)" fill="#2DC7AA" fill-rule="nonzero">
+                    <path d="M12.4993338,9.16618465 C12.4993338,9.35039905 12.4888969,9.53461345 12.4680233,9.71477918 C12.1904034,12.1581504 10.0717254,14.0569757 7.50008869,14.0569757 C4.73850152,14.0569757 2.5008436,11.8666463 2.5008436,9.16618465 C2.5008436,6.46572301 4.73850152,4.27741788 7.50008869,4.27741788 L7.50008869,6.11146454 L8.01566845,6.11146454 L11.6622994,3.05472011 L8.01566845,0 L7.50008869,0 L7.50008869,1.83404666 C4.46714375,1.83202233 1.73269236,3.61950931 0.572116057,6.36045764 C-0.590547623,9.10140596 0.0523615522,12.2553184 2.19608795,14.3525285 C4.33146487,16.4477143 7.56479709,17.0772822 10.370219,15.9416308 C13.000302,14.8748067 14.7724769,12.4537032 14.9791263,9.70668184 C14.9937379,9.5265161 15,9.34635038 15,9.16416032 L12.4993338,9.16416032 L12.4993338,9.16618465 Z" id="路径"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/report-share/gym-share/api.ts

@@ -0,0 +1,28 @@
+import request from "/src/utils/request";
+
+/** 获取学生信息 */
+export const studentQueryUserInfo = async () => {
+	return await request.get(`/user/getUserInfo`);
+};
+/** 获取老师信息 */
+export const teacherQueryUserInfo = () => {
+	return request.get(`/user/getUserInfo`);
+};
+/** 后台用户信息 */
+export const employeeQueryUserInfo = () => {
+	return request.get(`/user/getUserInfo`);
+};
+
+/** 获取曲谱信息 */
+export const sysMusicScoreAccompanimentQueryPage = (sysMusicScoreId: string) => {
+	return request.get("/sysMusicScoreAccompaniment/queryPage", {
+		params: {
+			clientType: "SMART_PRACTICE",
+			sysMusicScoreId,
+		},
+	});
+};
+/** 获取曲谱信息 */
+export const musicPracticeRecordGetLastEvaluationMusicalNotesPlayStats = (recordId: string) => {
+	return request.get("/sysMusicRecord/getLastEvaluationMusicalNotesPlayStats", { params: { recordId } });
+};

src/report-share/gym-share/button-normal.svg

@@ -0,0 +1,53 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="126px" height="44px" viewBox="0 0 126 44" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>button-normal备份</title>
+    <defs>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
+            <stop stop-color="#55F1CC" offset="0%"></stop>
+            <stop stop-color="#2DC7AA" offset="100%"></stop>
+        </linearGradient>
+        <rect id="path-2" x="0" y="0" width="126" height="41.592233" rx="20.7961165"></rect>
+        <filter x="-0.8%" y="-2.4%" width="101.6%" height="109.6%" filterUnits="objectBoundingBox" id="filter-3">
+            <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feColorMatrix values="0 0 0 0 0.140022123   0 0 0 0 0.741724871   0 0 0 0 0.628417211  0 0 0 1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
+        </filter>
+        <filter x="-1.6%" y="-4.8%" width="103.2%" height="114.4%" filterUnits="objectBoundingBox" id="filter-4">
+            <feGaussianBlur stdDeviation="1.5" in="SourceAlpha" result="shadowBlurInner1"></feGaussianBlur>
+            <feOffset dx="0" dy="1" in="shadowBlurInner1" result="shadowOffsetInner1"></feOffset>
+            <feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
+            <feColorMatrix values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.5 0" type="matrix" in="shadowInnerInner1"></feColorMatrix>
+        </filter>
+        <text id="text-5" font-family="STYuanti-SC-Bold, Yuanti SC" font-size="16" font-weight="bold" letter-spacing="0.914285714" fill="#FFFFFF">
+            <tspan x="39.1714286" y="25.5728155">查看回放</tspan>
+        </text>
+        <filter x="-2.6%" y="-4.5%" width="105.2%" height="118.2%" filterUnits="objectBoundingBox" id="filter-6">
+            <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="0.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0.161975631   0 0 0 0 0.702658833   0 0 0 0 0.594522193  0 0 0 1 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
+        </filter>
+    </defs>
+    <g id="修改" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="评测报告" transform="translate(-343.000000, -282.000000)">
+            <g id="button-normal备份" transform="translate(343.000000, 282.000000)">
+                <g id="button-normal">
+                    <use fill="black" fill-opacity="1" filter="url(#filter-3)" xlink:href="#path-2"></use>
+                    <use fill="url(#linearGradient-1)" fill-rule="evenodd" xlink:href="#path-2"></use>
+                    <use fill="black" fill-opacity="1" filter="url(#filter-4)" xlink:href="#path-2"></use>
+                </g>
+                <path d="M6.7918406,10.2536943 C9.41739329,16.8742088 12.7423351,20.184466 16.7666662,20.184466 C22.6640326,20.184466 99.6033159,20.184466 107.847557,20.184466 C113.343718,20.184466 117.705547,16.6376269 120.933045,9.54394855 C122.638541,16.3640284 123.3389,20.8519096 123.034122,23.0075923 C122.835918,24.4094822 121.398519,27.068378 118.721925,30.9842797 C115.553786,35.6193184 110.30151,38.3912624 104.687181,38.3912624 L20.3588579,38.3912624 C10.6413433,38.3912333 2.76374114,30.5136312 2.76374114,20.7961165 C2.76374114,20.7961165 2.76374114,20.7961165 2.76374114,20.7961165 C2.76374114,16.5579484 4.10644096,13.0438076 6.7918406,10.2536943 Z" id="矩形" fill="#29BD9D" opacity="0.499798729"></path>
+                <g id="编组-6" opacity="0.85" transform="translate(9.427979, 12.591438) rotate(-5.000000) translate(-9.427979, -12.591438) translate(1.807238, 3.717203)" fill="#FFFFFF">
+                    <ellipse id="椭圆形" opacity="0.882866269" transform="translate(9.202471, 6.069205) rotate(44.000000) translate(-9.202471, -6.069205) " cx="9.20247081" cy="6.06920508" rx="3.66990291" ry="4.89320388"></ellipse>
+                    <ellipse id="椭圆形备份-3" opacity="0.882866269" transform="translate(3.884379, 13.848995) rotate(44.000000) translate(-3.884379, -13.848995) " cx="3.8843788" cy="13.8489954" rx="2.44660194" ry="3.05825243"></ellipse>
+                </g>
+                <g id="查看回放" fill="#FFFFFF" fill-opacity="1">
+                    <use filter="url(#filter-6)" xlink:href="#text-5"></use>
+                    <use xlink:href="#text-5"></use>
+                </g>
+                <g id="编组" transform="translate(27.112905, 20.771792) rotate(-330.000000) translate(-27.112905, -20.771792) translate(20.071803, 12.787633)" fill="#FFFFFF" fill-rule="nonzero">
+                    <path d="M11.7312795,8.87082159 C11.7312795,9.04910003 11.721484,9.22737847 11.7018929,9.4017387 C11.4413321,11.7663769 9.45284187,13.6040162 7.03922611,13.6040162 C4.44733189,13.6040162 2.34717272,11.484266 2.34717272,8.87082159 C2.34717272,6.25737725 4.44733189,4.13958614 7.03922611,4.13958614 L7.03922611,5.91453409 L7.52312472,5.91453409 L10.9456789,2.9562875 L7.52312472,1.42108547e-14 L7.03922611,1.42108547e-14 L7.03922611,1.77494795 C4.1926484,1.77298886 1.62622254,3.50287744 0.536960888,6.15550386 C-0.554259878,8.80813028 0.0491440596,11.8604139 2.06114358,13.8900453 C4.06530667,15.9177176 7.09995833,16.5269989 9.7329937,15.4279417 C12.2014644,14.3954941 13.8647434,12.052406 14.0586947,9.39390228 C14.0724084,9.21954205 14.0782857,9.04518183 14.0782857,8.8688625 L11.7312795,8.8688625 L11.7312795,8.87082159 Z" id="路径"></path>
+                    <path d="M12.9067417,10.1697074 C13.555205,10.1697074 14.0822039,9.64270847 14.0822039,8.99424512 C14.0822039,8.34578178 13.555205,7.81878291 12.9067417,7.81878291 C12.2582784,7.81878291 11.7312795,8.3457818 11.7312795,8.99424512 C11.7312795,9.64270845 12.2582784,10.1697074 12.9067417,10.1697074 Z" id="路径"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/report-share/gym-share/explain.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="33px" height="33px" viewBox="0 0 33 33" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>button-normal备份 2</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="评测报告（节奏）" transform="translate(-690.000000, -13.000000)">
+            <g id="button-normal备份-2" transform="translate(690.000000, 13.000000)">
+                <rect id="button-normal" fill="#FFEFE5" x="0" y="0" width="33" height="33" rx="16.5"></rect>
+                <g id="编组" transform="translate(7.000000, 7.000000)" fill="#FF8800" fill-rule="nonzero" stroke="#FF8800">
+                    <path d="M9.5,0 C4.25322823,0 0,4.25324263 0,9.5 C0,14.7467574 4.25324678,19 9.5,19 C14.7467532,19 19,14.7467574 19,9.5 C19,4.25324263 14.7467347,0 9.5,0 Z M9.49999096,17.5000093 C5.08224075,17.5000093 1.50001028,13.9181622 1.50001028,9.50000928 C1.50001028,5.08182021 5.08222266,1.50000928 9.49999096,1.50000928 C13.9185552,1.50000928 17.4999897,5.08182019 17.4999897,9.50000928 C17.4999897,13.9181622 13.9185552,17.5000093 9.49999096,17.5000093 Z" id="形状"></path>
+                    <path d="M9.60242663,4.40820056 C8.69574736,4.40820056 7.97469307,4.6677898 7.4389318,5.18715088 C6.90315395,5.69822914 6.63526502,6.415299 6.63526502,7.33837705 L8.04487302,7.33837705 C8.04487302,6.81089915 8.14788552,6.40699959 8.35389392,6.12666179 C8.58443543,5.78879242 8.97191911,5.61974983 9.51601299,5.61974983 C9.94462863,5.61974983 10.2743981,5.73539395 10.5053048,5.96591863 C10.7358463,6.21324134 10.8512913,6.53471105 10.8512913,6.9303112 C10.8512913,7.24366409 10.739996,7.53608583 10.5173721,7.8081242 L10.3691112,7.9813165 C9.56127805,8.69838636 9.0790813,9.22189715 8.9224877,9.55148369 C8.75761128,9.87295341 8.67534734,10.2768696 8.67534736,10.763033 L8.67534736,10.9362087 L10.0970393,10.9362087 L10.0970393,10.763033 C10.0970393,10.4745617 10.1589364,10.2066731 10.2826809,9.95935037 C10.3977774,9.72050967 10.5626538,9.51431889 10.7769782,9.34134239 C11.3538881,8.83856355 11.7085558,8.51294411 11.8402179,8.36446749 C12.1450891,7.96075053 12.2978816,7.45383858 12.2978816,6.84373165 C12.2978816,6.08551327 12.050791,5.49202176 11.5561285,5.06338994 C11.0697654,4.62665788 10.4185259,4.40820056 9.60242663,4.40820056 Z M8.69988046,12.8015559 C8.51877034,12.9747482 8.42784181,13.1971561 8.42784181,13.4692111 C8.42784181,13.7412494 8.51877034,13.9638565 8.69988046,14.1368496 C8.8979878,14.3183413 9.1243464,14.4088879 9.38018456,14.4088879 C9.6522066,14.4088879 9.87859838,14.3223084 10.0600737,14.1493153 C10.2494998,13.976123 10.3445946,13.7495489 10.3445946,13.4692111 C10.3445946,13.2056547 10.2536329,12.9830477 10.0725228,12.8015559 C9.89104754,12.6285628 9.66015745,12.5419667 9.38018456,12.5419667 C9.11606357,12.5419667 8.88967177,12.6285628 8.69988046,12.8015559 Z" id="形状"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/report-share/gym-share/index.module.less

@@ -0,0 +1,126 @@
+.skeleton {
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100vw;
+  height: 100vh;
+  padding: 20px 30px;
+  background-color: #fff;
+  z-index: 10;
+  --van-skeleton-paragraph-height: .8rem;
+}
+
+.detail {
+  width: 100vw;
+  height: 100vh;
+  overflow: hidden;
+  --header-height: 62px;
+  background: #01c1b5;
+
+  .headHeight {
+    width: 100%;
+    height: var(--header-height);
+    transition: margin .3s;
+    z-index: 10;
+
+    &.headHide {
+      margin-top: calc(0Px - var(--header-height));
+    }
+  }
+
+  .container {
+    position: relative;
+    height: calc(100vh - var(--header-height) - 15px);
+    border-radius: 10px;
+    margin: 0 15px;
+    overflow-x: hidden;
+    overflow-y: auto;
+    background-color: #fff;
+
+    &::-webkit-scrollbar {
+      width: 0;
+      display: none;
+    }
+
+    :global {
+      #musicAndSelection {
+        overflow: auto;
+        border-radius: 12px;
+      }
+    }
+  }
+}
+
+.shareBox {
+
+  :global {
+
+    #cursorImg-0 {
+      display: none !important;
+    }
+
+    #selectionBox {
+      pointer-events: none;
+    }
+  }
+}
+
+.demos {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  padding: 6px 10px;
+  z-index: 1;
+  color: #2c3e50;
+  &>div {
+    display: flex;
+    align-items: center;
+    margin-right: 6px;
+
+    &>span {
+      margin-left: 4px;
+    }
+  }
+}
+
+.right {
+  path {
+    fill: #01C1B5;
+    stroke: #01C1B5;
+  }
+}
+
+.wrong {
+  path {
+    fill: #FF4444;
+    stroke: #FF4444;
+  }
+}
+
+.notPlay {
+  path {
+    fill: #000;
+    stroke: #000;
+  }
+}
+
+.cadence_wrong {
+  path {
+    fill: #067DD7;
+    stroke: #067DD7;
+  }
+}
+
+.intonation_wrong {
+  path {
+    fill: #FFAB25;
+    stroke: #FFAB25;
+  }
+}
+
+.integrity_wrong {
+  path {
+    fill: #CC75FF;
+    stroke: #CC75FF;
+  }
+}

src/report-share/gym-share/index.tsx

@@ -0,0 +1,203 @@
+import { Skeleton } from "vant";
+import { defineComponent, onBeforeMount, onBeforeUnmount, onMounted, reactive, Transition } from "vue";
+import { formateTimes } from "../../helpers/formateMusic";
+import state, { isRhythmicExercises } from "../../state";
+import { setGlobalData } from "../../utils";
+import MusicScore, { resetMusicScore } from "../../view/music-score";
+import styles from "./index.module.less";
+import { api_cloudLoading, api_setStatusBarVisibility, isSpecialShapedScreen } from "/src/helpers/communication";
+import { getQuery } from "/src/utils/queryString";
+import { mappingVoicePart, subjectFingering } from "/src/view/fingering/fingering-config";
+import { musicPracticeRecordGetLastEvaluationMusicalNotesPlayStats, sysMusicScoreAccompanimentQueryPage } from "./api";
+import ShareTop from "./share-top";
+import Note from "./note";
+import { addMeasureScore } from "/src/view/evaluating";
+
+const colorsClass: any = {
+	RIGHT: styles.right,
+	WRONG: styles.wrong,
+	NOT_PLAY: styles.notPlay,
+	CADENCE_WRONG: styles.cadence_wrong,
+	INTONATION_WRONG: styles.intonation_wrong,
+	INTEGRITY_WRONG: styles.integrity_wrong,
+};
+
+export default defineComponent({
+	name: "music-list",
+	setup() {
+		const query: any = getQuery();
+		const scoreData: any = reactive({
+			videoFilePath: "", // 回放视频路径
+			cadence: 0,
+			integrity: 0,
+			intonation: 0,
+			score: 0,
+			heardLevel: "",
+		});
+
+		const detailData = reactive({
+			isLoading: true,
+			paddingLeft: "",
+			headerHide: false,
+			musicalNotesPlayStats: [] as any[],
+			userMeasureScore: {} as any,
+		});
+		const getAPPData = async () => {
+			const screenData = await isSpecialShapedScreen();
+			if (screenData?.content) {
+				// console.log("🚀 ~ screenData:", screenData.content);
+				const { isSpecialShapedScreen, notchHeight } = screenData.content;
+				if (isSpecialShapedScreen) {
+					detailData.paddingLeft = 25 + "px";
+				}
+			}
+		};
+		onBeforeMount(() => {
+			getAPPData();
+			api_setStatusBarVisibility();
+		});
+		// console.log(route.params, query)
+		/** 获取曲谱数据 */
+		const getMusicInfo = (res: any) => {
+			const index = state.partIndex;
+			const musicInfo = res.data[index];
+			// console.log("🚀 ~ musicInfo:", musicInfo);
+			setState(musicInfo, index);
+			setCustom();
+			detailData.isLoading = false;
+		};
+
+		const setState = (data: any, index: number) => {
+			state.detailId = data.id;
+			state.xmlUrl = data.xmlUrl;
+			state.partIndex = index;
+			state.subjectId = data.subjectId;
+			state.categoriesId = data.categoriesId;
+			state.categoriesName = data.categoriesName;
+			state.enableEvaluation = data.enableEvaluation;
+			state.examSongId = data.examSongId + "";
+			state.examSongName = data.examSongName;
+			// 解析扩展字段
+			if (data.extConfigJson) {
+				try {
+					state.extConfigJson = JSON.parse(data.extConfigJson as string);
+				} catch (error) {
+					console.error("解析扩展字段错误:", error);
+				}
+			}
+			state.isOpenMetronome = !data.isOpenMetronome;
+			state.needTick = data.isOpenMetronome;
+			state.isShowFingering = data.isShowFingering;
+			state.music = data.isOpenMetronome ? data.mp3Url : data.metronomeMp3Url;
+			state.accompany = data.isOpenMetronome ? data.url : data.metronomeUrl;
+			state.midiUrl = data.midiUrl;
+			state.parentCategoriesId = data.parentCategoriesId;
+			state.playMode = data.playMode;
+			state.originSpeed = state.speed = data.speed;
+			state.track = data.track;
+			state.isOpenPrepare = true;
+
+			// 映射声部ID
+			state.subjectId = mappingVoicePart(state.subjectId, "GYM");
+			// 是否打击乐
+			state.isPercussion = state.subjectId == 23 || state.subjectId == 113 || state.subjectId == 121 || isRhythmicExercises();
+
+			// 设置指法
+			state.fingeringInfo = subjectFingering(state.subjectId);
+			state.isReport = true
+		};
+
+		const setCustom = () => {
+			if (state.extConfigJson.multitrack) {
+				setGlobalData("multitrack", state.extConfigJson.multitrack);
+			}
+		};
+
+		onMounted(async () => {
+			(window as any).appName = "colexiu";
+			const res = await musicPracticeRecordGetLastEvaluationMusicalNotesPlayStats(query.id);
+			state.partIndex = Number(res?.data?.partIndex);
+			detailData.musicalNotesPlayStats = res?.data?.musicalNotesPlayStats?.notesData || [];
+			detailData.userMeasureScore = res?.data?.userMeasureScore || {};
+			for (let key in scoreData) {
+				scoreData[key] = res?.data?.[key];
+			}
+			Promise.all([sysMusicScoreAccompanimentQueryPage(res?.data?.musicalNotesPlayStats?.examSongId)]).then((values) => {
+				getMusicInfo(values[0]);
+			});
+		});
+
+		const setPathColor = () => {
+			for (const note of detailData.musicalNotesPlayStats) {
+				const active = state.times[note.musicalNotesIndex];
+				const svgEl = document.getElementById("vf-" + active.id);
+				svgEl?.classList.add(colorsClass[note.musicalErrorType]);
+			}
+		};
+		const setMearureColor = () => {
+			for (let key in detailData.userMeasureScore) {
+				addMeasureScore(detailData.userMeasureScore[key], false);
+			}
+		};
+
+		/** 渲染完成 */
+		const handleRendered = (osmd: any) => {
+			state.musicRendered = true;
+			state.osmd = osmd;
+			state.times = formateTimes(osmd);
+			console.log("🚀 ~ state.times:", state.times);
+			setPathColor();
+			setMearureColor();
+			api_cloudLoading();
+		};
+		onMounted(() => {
+			window.addEventListener("resize", resetMusicScore);
+		});
+		onBeforeUnmount(() => {
+			window.removeEventListener("resize", resetMusicScore);
+		});
+
+		return () => (
+			<div class={[styles.shareBox, styles.detail, state.setting.eyeProtection && "eyeProtection"]} style={{ paddingLeft: detailData.paddingLeft }}>
+				{!state.musicRendered && (
+					<div class={styles.skeleton}>
+						<Skeleton class={styles.skeleton} row={8} />
+					</div>
+				)}
+				<div class={[styles.headHeight, detailData.headerHide && styles.headHide]} onClick={(e: Event) => e.stopPropagation()}>
+					<Transition name="van-slide-down">{state.musicRendered && <ShareTop scoreData={scoreData} />}</Transition>
+				</div>
+				<div id="scrollContainer" class={[styles.container, !state.setting.displayCursor && "hideCursor"]}>
+					<div class={styles.demos}>
+						<div>
+							<Note fill="#01C1B5" />
+							<span>演奏正确</span>
+						</div>
+						<div>
+							<Note fill="#067DD7" />
+							<span>节奏错误</span>
+						</div>
+						{!state.isPercussion ? (
+							<>
+								<div>
+									<Note fill="#FFAB25" />
+									<span>音准错误</span>
+								</div>
+								<div>
+									<Note fill="#CC75FF" />
+									<span>完成度不足</span>
+								</div>
+							</>
+						) : null}
+						<div>
+							<Note fill="#000" />
+							<span>未演奏</span>
+						</div>
+					</div>
+					{/* 曲谱渲染 */}
+					{!detailData.isLoading && <MusicScore onRendered={handleRendered} />}
+				</div>
+			</div>
+		);
+	},
+});

src/report-share/gym-share/main.ts

@@ -0,0 +1,23 @@
+import "vant/lib/index.css";
+import "@varlet/ui/es/popup/style/index";
+import "@varlet/ui/es/snackbar/style/index";
+import "@varlet/ui/es/cell/style/index";
+import "@varlet/ui/es/switch/style/index";
+import { createApp } from "vue";
+import "/src/style.css";
+import App from "./App";
+import router from "./router";
+import "./theme.css";
+import { setStoreData } from "/src/store";
+
+(function () {
+	const u = navigator.userAgent;
+	setStoreData({
+		isApp: u.includes("ORCHESTRAAPPI") || u.includes("ORCHESTRAAPPA"),
+		platformApi: u.includes("ORCHESTRATEACHER") ? "/api-teacher" : u.includes("ORCHESTRASTUDENT") ? "/api-student" : "/api-backend",
+		platformType: "STUDENT", // u.includes("ORCHESTRATEACHER") ? "TEACHER" : u.includes("ORCHESTRASTUDENT") ? "STUDENT" : "WEB",
+		proxy: import.meta.env.DEV ? "/orchestra" : "",
+	});
+})();
+
+createApp(App).use(router).mount("#app");

src/report-share/gym-share/note.tsx

@@ -0,0 +1,21 @@
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'NoteSvg',
+  props: {
+    fill: String
+  },
+  render() {
+    return (
+      <svg width="7px" height="23px" viewBox="0 0 7 23" version="1.1" xmlns="http://www.w3.org/2000/svg" >
+          <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+              <g transform="translate(-55.000000, -24.000000)">
+                  <g transform="translate(55.000000, 24.000000)" fill={this.fill}>
+                      <path d="M1.95251677,0.68258909 C3.68583115,-0.400505943 5.78379192,-0.169765229 6.63844331,1.1979629 C7.4930947,2.56569103 6.78079761,4.55247575 5.04748323,5.63557079 C3.85503595,6.38069455 2.49000663,6.50399819 1.47594704,6.06306368 L1.47635248,22.0768926 L0.0162402201,22.0768926 L0.0154715991,4.11169688 C-0.117424115,2.8976469 0.612367024,1.52000759 1.95251677,0.68258909 Z" id="形状结合" transform="translate(3.500000, 11.038446) scale(-1, -1) translate(-3.500000, -11.038446) "></path>
+                  </g>
+              </g>
+          </g>
+      </svg>
+    )
+  }
+})

src/report-share/gym-share/replay.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="33px" height="33px" viewBox="0 0 33 33" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>button-normal备份 3</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="评测报告（节奏）" transform="translate(-639.000000, -13.000000)">
+            <g id="button-normal备份-3" transform="translate(639.000000, 13.000000)">
+                <rect id="button-normal" fill="#EFF9FF" x="0" y="0" width="33" height="33" rx="16.5"></rect>
+                <g id="编组" transform="translate(8.000000, 8.000000)">
+                    <path d="M6,11.2838533 L6,5.70732273 C6,5.16019142 6.56518082,4.82349524 7.0294365,5.09706089 L11.6518082,7.87480443 C12.1160639,8.14837008 12.1160639,8.84280597 11.6518082,9.11637162 L7.0294365,11.8941152 C6.56518082,12.1887243 6,11.8309846 6,11.2838533 Z" id="形状" fill="#2AAAE9" fill-rule="nonzero"></path>
+                    <path d="M8.5,17 C13.1944204,17 17,13.1944204 17,8.5 C17,3.80557963 13.1944204,0 8.5,0 C6.7502475,0 5.12397972,0.528700969 3.77223303,1.43506655 C2.5629265,2.24592396 1.57333404,3.35904678 0.911600214,4.66629045 C0.328527255,5.81814095 0,7.12070465 0,8.5" id="椭圆形" stroke="#2AAAE9" stroke-width="2.5" stroke-linecap="round"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/report-share/gym-share/router.ts

@@ -0,0 +1,24 @@
+import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router";
+import Home from "./index";
+import Notfind from "../../view/notfind";
+
+const routes: RouteRecordRaw[] = [
+	{
+		path: "/",
+		component: Home,
+	},
+	{
+		path: "/:pathMatch(.*)*",
+		component: Notfind,
+		meta: {
+			title: "404 Not Fund",
+		},
+	},
+];
+
+const router = createRouter({
+	history: createWebHashHistory(),
+	routes,
+});
+
+export default router;

src/report-share/gym-share/share-top/image/icon-back.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g id="云教练2版" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="画板" transform="translate(-27.000000, -123.000000)">
+            <g id="返回箭头备份" transform="translate(43.000000, 139.000000) scale(-1, 1) translate(-43.000000, -139.000000) translate(27.000000, 123.000000)">
+                <circle id="椭圆形" fill="#FFFFFF" cx="16" cy="16" r="16"></circle>
+                <path d="M17.3783645,23.2991468 L23.9125501,16.7649612 C24.157653,16.5199302 24.2953565,16.1875536 24.2953565,15.8409766 C24.2953565,15.4943995 24.157653,15.162023 23.9125501,14.916992 L17.3783645,8.38280634 C17.1333334,8.13770343 16.8009569,8 16.4543799,8 C16.1078028,8 15.7754263,8.13770343 15.5303953,8.38280634 C15.0201983,8.89302883 15.0201983,9.72023586 15.5303953,10.2304583 L19.8337592,14.5344566 L7.30683717,14.5344566 C6.96021662,14.5343725 6.62776858,14.6720297 6.38267084,14.9171274 C6.13757309,15.1622252 6,15.4946732 6,15.8412938 C6,16.1879143 6.13757308,16.5203624 6.38267083,16.7654601 C6.62776858,17.0105579 6.96021662,17.1482151 7.30683717,17.1481309 L19.8337592,17.1481309 L15.5303953,21.4514948 C15.2002874,21.7816027 15.0713656,22.2627455 15.1921934,22.7136812 C15.3130213,23.164617 15.6652423,23.516838 16.116178,23.6376658 C16.5671138,23.7584937 17.0482566,23.6295719 17.3783645,23.299464 L17.3783645,23.2991468 Z" id="路径" fill="#2DC7AA" fill-rule="nonzero"></path>
+            </g>
+        </g>
+    </g>
+</svg>

src/report-share/gym-share/share-top/index.module.less

@@ -0,0 +1,107 @@
+.headerTop {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    flex-shrink: 0;
+    padding: 8px 10px;
+    padding-bottom: 0;
+
+}
+
+.back {
+    display: flex;
+    align-items: center;
+    height: 100%;
+    padding: 0 11px 0 6px;
+
+    img {
+        display: block;
+        width: 26px;
+        height: 26px;
+    }
+}
+
+.left {
+    display: flex;
+    align-items: center;
+}
+
+.center {
+    margin-left: auto;
+    display: flex;
+    align-items: center;
+
+    .cItem {
+        text-align: center;
+        padding: 0 12px;
+        white-space: nowrap;
+
+        &>div:first-child {
+            font-size: 12px;
+            color: #fff;
+            line-height: 14px;
+            margin-bottom: 6px;
+            font-weight: bold;
+        }
+
+        &>div:last-child {
+            font-size: 12px;
+            color: #fff;
+            line-height: 12px;
+            padding: 4px 8px;
+            border-radius: 14px;
+        }
+    }
+
+    .cItem:not(:last-child) {
+        border-right: 1px solid #EBDABF;
+    }
+
+    .active {
+        &>div:first-child {
+            color: rgb(162, 255, 236) !important;
+        }
+    }
+}
+
+.replaybtn {
+    position: fixed;
+    left: 50%;
+    bottom: 30px;
+    transform: translateX(-50%);
+    display: flex;
+    justify-content: space-evenly;
+    align-items: center;
+    width: 90px;
+    font-size: 12px;
+    line-height: 16px;
+    font-weight: 400;
+    padding: 8px 0;
+    color: #fff;
+    z-index: 10;
+    background-color: var(--van-primary-color);
+    border-radius: 20px;
+    .iconBtn {
+        font-size: 14px;
+    }
+
+    span {
+        white-space: nowrap;
+    }
+}
+
+.popup {
+    :global {
+        .van-popup__close-icon {
+            top: 0;
+            right: -30px;
+            background-color: #fff;
+            border-radius: 50%;
+            padding: 4px;
+            font-size: 16px;
+            color: var(--van-primary-color);
+        }
+    }
+}

src/report-share/gym-share/share-top/index.tsx

@@ -0,0 +1,94 @@
+import { computed, defineComponent, onBeforeUnmount, onMounted, reactive, ref, toRefs } from "vue";
+import styles from "./index.module.less";
+
+import Title from "./title";
+import { api_back } from "/src/helpers/communication";
+import state from "/src/state";
+import iconBack from "./image/icon-back.svg";
+import { Icon, Popup } from "vant";
+import TheVideo from "/src/components/the-video";
+import TheAudio from "/src/components/the-audio";
+
+type IItemType = "intonation" | "cadence" | "integrity";
+
+export default defineComponent({
+	name: "header-top",
+	props: {
+		scoreData: {
+			type: Object,
+			default: () => ({}),
+		},
+	},
+	setup(props) {
+		const { scoreData } = toRefs(props);
+		const level: any = {
+			BEGINNER: "入门级",
+			ADVANCED: "进阶级",
+			PERFORMER: "大师级",
+		};
+		// console.log("🚀 ~ scoreData:", scoreData.value)
+		const itemType = ref<IItemType>("intonation");
+		const showVideo = ref(false);
+		/** 返回 */
+		const handleBack = () => {
+			api_back();
+		};
+
+		const handleChange = (type: IItemType) => {
+			// itemType.value = type;
+		};
+
+		// 资源类型
+		const mediaType = computed((): "audio" | "video" => {
+			const subfix = (scoreData.value.videoFilePath || "").split(".").pop();
+			if (subfix === "wav" || subfix === "mp3") {
+				return "audio";
+			}
+			return "video";
+		});
+
+		return () => (
+			<div class={styles.headerTop}>
+				<div class={styles.left}>
+					<div class={styles.back} onClick={handleBack}>
+						<img src={iconBack} />
+					</div>
+					<Title text={state.examSongName} />
+				</div>
+				<div class={styles.center}>
+					<div class={styles.cItem}>
+						<div>{level[scoreData.value.heardLevel]}</div>
+						<div>难度</div>
+					</div>
+					<div class={styles.cItem}>
+						<div>{scoreData.value.score}分</div>
+						<div>评测分数</div>
+					</div>
+					{state.isPercussion ? null : (
+						<>
+							<div onClick={() => handleChange("intonation")} class={[styles.cItem, itemType.value === "intonation" && styles.active]}>
+								<div>{scoreData.value.intonation}分</div>
+								<div>音准</div>
+							</div>
+							<div onClick={() => handleChange("cadence")} class={[styles.cItem, itemType.value === "cadence" && styles.active]}>
+								<div style={{ color: "rgb(255, 200, 101)" }}>{scoreData.value.cadence}分</div>
+								<div>节奏</div>
+							</div>
+							<div onClick={() => handleChange("integrity")} class={[styles.cItem, itemType.value === "integrity" && styles.active]}>
+								<div style={{ color: "rgb(255, 241, 184)" }}>{scoreData.value.integrity}分</div>
+								<div>完成度</div>
+							</div>
+						</>
+					)}
+				</div>
+				<div style={{ display: scoreData.value.videoFilePath ? "" : "none" }} class={styles.replaybtn} onClick={() => (showVideo.value = true)}>
+					<Icon class={styles.iconBtn} name="replay" />
+					<span>查看回放</span>
+				</div>
+				<Popup class={["popup-custom", "van-scale", styles.popup]} transition="van-scale" v-model:show={showVideo.value} closeable>
+					{mediaType.value === 'video' ? <TheVideo src={showVideo.value ? scoreData.value.videoFilePath : ""} /> : <TheAudio src={showVideo.value ? scoreData.value.videoFilePath : ""} />}
+				</Popup>
+			</div>
+		);
+	},
+});

src/report-share/gym-share/share-top/title/index.module.less

@@ -0,0 +1,25 @@
+.container {
+  width: 20vw;
+  height: 31px;
+  background: #fff;
+  display: flex;
+  align-items: center;
+  border-radius: 18px;
+  padding: 6px;
+
+  .noticeBar {
+    flex: 1;
+    padding: 0 6px;
+  }
+}
+
+.icon {
+  width: 26px;
+  height: 26px;
+  flex-shrink: 0;
+}
+
+.status {
+  margin-left: auto;
+  flex-shrink: 0;
+}

src/report-share/gym-share/share-top/title/index.tsx

@@ -0,0 +1,33 @@
+import { defineComponent } from "vue";
+import { NoticeBar } from "vant";
+import styles from "./index.module.less";
+
+import ArrowIcon from "../image/arrow.svg";
+import iconMusic from "../image/music.png";
+
+export default defineComponent({
+	name: "detail-title",
+	props: {
+		text: {
+			type: String,
+			default: "",
+		},
+		rightView: {
+			type: Boolean,
+			default: true,
+		},
+		onClick: {
+			type: Function,
+		} as any,
+	},
+	render() {
+		return (
+			<div class={styles.container}>
+				<img class={styles.icon} src={iconMusic} />
+				<NoticeBar text={this.text} color="#000" class={styles.noticeBar} background="none" />
+
+				{this.rightView ? <img class={styles.status} src={ArrowIcon} /> : null}
+			</div>
+		);
+	},
+});

src/report-share/gym-share/theme.css

@@ -0,0 +1,9 @@
+:root {
+    --van-primary-color: #ff8057;
+    --color-primary    : #ff8057;
+    --active-stave-box    : rgba(255, 159, 88, .19);
+}
+
+.vf-StaveSection {
+    display: none;
+}

src/state.ts

@@ -146,6 +146,8 @@ const state = reactive({
 	zoom: 0.8,
 	/** 练习,评测是否是选段模式 */
 	isSelectMeasureMode: false,
+	/** 是否是评分显示 */
+	isReport: false
 });
 /** 音频加载完成 */
 export const onLoadedmetadata = (evt: Event) => {

src/view/evaluating/index.tsx

@@ -177,7 +177,7 @@ const handleScoreResult = (res?: IPostMessage) => {
 
 /** 开始评测 */
 export const handleStartBegin = async () => {
-	evaluatingData.isComplete = false
+	evaluatingData.isComplete = false;
 	evaluatingData.startBegin = true;
 	evaluatingData.evaluatings = {};
 	evaluatingData.resultData = {};
@@ -206,7 +206,7 @@ export const handleStartBegin = async () => {
 /**
  * 结束评测
  * @param isComplete 是否完整评测
- * @returns 
+ * @returns
  */
 export const handleEndEvaluat = (isComplete = false) => {
 	console.log("触发结束");
@@ -224,7 +224,7 @@ export const handleEndEvaluat = (isComplete = false) => {
 		duration: 0,
 		forbidClick: true,
 	});
-	evaluatingData.isComplete = isComplete
+	evaluatingData.isComplete = isComplete;
 };
 
 /**
@@ -258,9 +258,22 @@ export const handleCancelEvaluat = () => {
 };
 
 /** 查看报告 */
-export const handleViewReport = (key = 'recordId') => {
+export const handleViewReport = (key: "recordId" | "recordIdStr", type: "gym" | "colexiu" | "orchestra") => {
+	const id = evaluatingData.resultData?.[key] || "";
+	let url = "";
+	switch (type) {
+		case "gym":
+			url = location.origin + location.pathname + "report/" + id;
+			break;
+		case "orchestra":
+			url = location.origin + location.pathname + "report-share.html?id=" + id;
+			break;
+		default:
+			url = location.origin + location.pathname + "report-share.html?id=" + id;
+			break;
+	}
 	api_openWebView({
-		url: location.origin + location.pathname + "report-share.html?id=" + evaluatingData.resultData?.[key] || "",
+		url,
 		orientation: 0,
 		isHideTitle: true, // 此处兼容安卓，意思为隐藏全部头部
 		statusBarTextColor: false,

src/view/selection/index.tsx

@@ -116,7 +116,7 @@ export default defineComponent({
 						}
 					}
 				} else {
-					if (state.activeMeasureIndex == item.MeasureNumberXML) {
+					if (state.activeMeasureIndex == item.MeasureNumberXML && !state.isReport) {
 						return styles.staveBox;
 					}
 				}
@@ -137,10 +137,10 @@ export default defineComponent({
 									style={item.staveBox}
 									onClick={() => handleSelection(item)}
 								>
-									{!item.isRestFlag && metronomeData.lineShow && item.MeasureNumberXML === metronomeData.activeMetro?.measureNumberXML && (
+									{!state.isReport && !item.isRestFlag && metronomeData.lineShow && item.MeasureNumberXML === metronomeData.activeMetro?.measureNumberXML && (
 										<div class={styles.line} style={{ left: metronomeData.activeMetro.left }}></div>
 									)}
-									{!!item.multipleRestMeasures && state.activeMeasureIndex == item.MeasureNumberXML && (
+									{!state.isReport && !!item.multipleRestMeasures && state.activeMeasureIndex == item.MeasureNumberXML && (
 										<div class={styles.dotWrap}>{item.multipleRestMeasures}</div>
 									)}
 									<Transition

vite.config.ts

@@ -52,8 +52,8 @@ export default defineConfig({
 		port: 3000,
 		proxy: {
 			"^/gym/.*": {
-				// target: "https://mstutest.dayaedu.com",
-				target: "https://online.dayaedu.com",
+				target: "https://mstutest.dayaedu.com",
+				// target: "https://online.dayaedu.com",
 				changeOrigin: true,
 				rewrite: (path) => path.replace(/^\/gym/, ""),
 			},