Merge branch 'feature-tianyong-newVersion' into ktyq-test-new

src/page-instrument/component/the-music-list/index.module.less

@@ -10,7 +10,7 @@
             height: 100%;
             .van-tabs__wrap{
                 display: flex;
-                justify-content: right;
+                justify-content: flex-end;
                 height: 30px;
                 .van-tabs__nav--line{
                     padding-bottom: 0;
@@ -89,15 +89,15 @@
         height: 34px;
         background: #F8F9FC;
         border-radius: 18px;
-        padding: 0 4px 0 12px;
+        padding: 0 4px 0 10px;
         border: 1px solid transparent;
         &.isFocus{
             border-color: #1CACF1;
         }
         >img{
             flex-shrink: 0;
-            width: 14px;
-            height: 14px;
+            width: 16px;
+            height: 16px;
         }
         :global{
             .van-field{
@@ -135,6 +135,74 @@
                 opacity: 0.8;
             }
         }
+        .dropdownMenu{
+            border-right: 1px solid #DADCE5;
+            margin-right: 8px;
+            :global{
+                .van-dropdown-menu__bar{
+                    height: 20px;
+                    background: transparent;
+                    box-shadow: initial;
+                    .van-dropdown-menu__item{
+                        padding: 0 8px 0 0;
+                    }
+                    .van-dropdown-menu__title{
+                        --van-gray-4: #0CA2EA;
+                        font-weight: 400;
+                        font-size: 14px;
+                        color: #0CA2EA;
+                        padding: 0 12px 0 0;
+                        &::after{
+                            right: 0;
+                            opacity: initial;
+                        }
+                    }
+                }
+                .van-dropdown-item.van-dropdown-item--down{
+                    left: 36px;
+                    width: 148px;
+                    margin-top: 7px;
+                    .van-dropdown-item__content{
+                        margin-left: 10px;
+                        padding: 0 10px;
+                        width: 128px;
+                        box-shadow: 0px 2px 14px 0px rgba(0,0,0,0.12);
+                        border-radius: 8px;
+                        .van-cell{
+                            margin-top: 6px;
+                            padding: 0;
+                            font-weight: 500;
+                            font-size: 14px;
+                            color: #323233;
+                            line-height: 32px;
+                            text-align: center;
+                            &::after{
+                                border: none;
+                            }
+                            &:last-child{
+                                margin-bottom: 6px;
+                            }
+                            &.van-dropdown-item__option--active{
+                                background: #EEF8FF;
+                                border-radius: 4px;
+                                color: #1CACF1;
+                            }
+                            .van-cell__value{
+                                display: none;
+                            }
+                        }
+                    }
+                }
+            }
+            &.currItem{
+                :global{
+                    .van-dropdown-menu__bar  .van-dropdown-menu__title{
+                        color: #1CACF1;
+                        --van-gray-4:#1CACF1;
+                    }
+                }
+            }
+        }
     }
     :global{
         .van-list{
@@ -223,6 +291,23 @@
                 font-size: 13px;
                 color: rgba(0,0,0,0.5);
             }
+            .playType,.singType{
+                margin-left: 5px;
+                width: 26px;
+                height: 17px;
+                background: #FFFFFF;
+                border-radius: 3px;
+                text-align: center;
+                line-height: 17px;
+                border: 1px solid #15B2FD;
+                font-weight: 400;
+                font-size: 10px;
+                color: #15B2FD;
+                &.singType{
+                    color: #CD8613;
+                    border-color: #CD8613;
+                }
+            }
         }
     }
 }

src/page-instrument/component/the-music-list/list.tsx

@@ -2,7 +2,7 @@ import { defineComponent, onMounted, reactive, watch } from "vue";
 import styles from "./index.module.less";
 import { api_musicSheetPage } from "../../api";
 import state, { togglePlay } from "/src/state";
-import { List, Image, Field } from "vant";
+import { List, Image, Field, DropdownMenu, DropdownItem } from "vant";
 import { postMessage } from "/src/utils/native-message";
 import qs from "query-string";
 import searImg from "./imgs/searImg.png"
@@ -25,6 +25,7 @@ export default defineComponent({
       musicSheetCategoriesId: state.bizMusicCategoryId,
       recentFlag: props.recentFlag ? true : null,
       excludeMusicId: props.recentFlag ? null : state.examSongId,
+      audioPlayTypes:""
     });
     const data = reactive({
       isFocus: false,
@@ -33,12 +34,21 @@ export default defineComponent({
       loading: false,
       hasNext: true,
     });
+    const audioPlayTypesOption = [
+      { text: '全部场景', value: "" },
+      { text: '演奏', value: "PLAY" },
+      { text: '演唱', value: "SING" },
+      { text: '演奏+演唱', value: "PLAY,SING" },
+    ]
     const getList = async () => {
       if (!data.hasNext) return;
       data.loading = true;
       try {
         const res = await api_musicSheetPage({
           ...forms,
+          ...{
+            audioPlayTypes: forms.audioPlayTypes ? forms.audioPlayTypes.split(",") : []
+          }
         });
         if (res?.code === 200 && Array.isArray(res.data?.rows)) {
           data.list = [...data.list, ...res.data.rows];
@@ -93,6 +103,9 @@ export default defineComponent({
     return () => (
       <div class={styles.wrap}>
         <div class={[styles.searchBox,data.isFocus && styles.isFocus]}>
+          <DropdownMenu class={[styles.dropdownMenu]} overlay={false}>
+							<DropdownItem onChange={handleQuery} v-model={forms.audioPlayTypes} options={audioPlayTypesOption}/>
+					</DropdownMenu>
           <img src={searImg} />
           <Field placeholder="请输入曲目名称" v-model={forms.name} autocomplete="off" onFocus={()=>{ data.isFocus = true }} onBlur={()=>{ data.isFocus = false }} />
           <div class={styles.searchBtn} onClick={handleQuery}>搜索</div>
@@ -117,6 +130,11 @@ export default defineComponent({
                   <p class={styles.name}>{item.musicSheetName}</p>
                   <div class={styles.detail}>
                     {item.usedNum && <div class={styles.usedNum}><img src={huoimg}/><div>{item.usedNum}</div></div>}
+                    {
+                      item.audioPlayTypes && item.audioPlayTypes.split(",").sort().map((type:"PLAY"|"SING")=>{
+                        return <div class={type==="PLAY"?styles.playType:styles.singType}>{type==="PLAY"?"演奏":"演唱"}</div>
+                      })
+                    }
                     {item.composer && <p class={styles.author}>{item.composer}</p>}
                   </div>
                 </div>

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

@@ -3,7 +3,7 @@ import { connectWebsocket, evaluatingData, handleEndBegin, handleStartBegin, han
 import Earphone from "./earphone";
 import styles from "./index.module.less";
 import SoundEffect from "./sound-effect";
-import state, { handleRessetState, resetPlaybackToStart, musicalInstrumentCodeInfo, clearSelection, initSetPlayRate } from "/src/state";
+import state, { handleRessetState, resetPlaybackToStart, musicalInstrumentCodeInfo, clearSelection, initSetPlayRate, resetBaseRate } from "/src/state";
 import { storeData } from "/src/store";
 import { browser } from "/src/utils";
 import { getNoteByMeasuresSlursStart } from "/src/helpers/formateMusic";
@@ -348,7 +348,8 @@ export default defineComponent({
         evaluatingData.oneselfCancleEvaluating = true;
         // handleCancelEvaluat();
         handleEndEvaluat(true, 'selfCancel');
-        evaluatingData.isBeginMask = true;
+        // evaluatingData.isBeginMask = true;
+        evaluatingData.evaluatings = {};
         state.playState = "paused";
       }
       resetPlaybackToStart();
@@ -483,16 +484,16 @@ export default defineComponent({
     // );
 
     // 手动取消评测，需要自动再次评测
-    watch(
-      () => evaluatingData.needReplayEvaluat,
-      (val) => {
-        if (val && evaluatingData.oneselfCancleEvaluating) {
-          setTimeout(() => {
-            startBtnHandle();
-          }, 500);
-        }
-      }
-    );
+    // watch(
+    //   () => evaluatingData.needReplayEvaluat,
+    //   (val) => {
+    //     if (val && evaluatingData.oneselfCancleEvaluating) {
+    //       setTimeout(() => {
+    //         startBtnHandle();
+    //       }, 500);
+    //     }
+    //   }
+    // );
 
     onMounted(async () => {
       // 如果打开了延迟检测开关，需要先发送开始检测的消息

src/page-instrument/header-top/index.tsx

@@ -53,6 +53,7 @@ export const headTopData = reactive({
     }
     if (value === "practise") {
       // state.playIngSpeed = state.speed
+      smoothAnimationState.isShow.value = state.setting.melodyLine;
     }
     if (value === "evaluating") {
       // 如果延迟检测资源还在加载中，给出提示
@@ -96,6 +97,8 @@ export const headTopData = reactive({
   },
   // 改变模式之前的状态
   oldPlayType: "play",
+  // 记录切换模式前的状态
+  oldModeType: "practise" as "practise" | "follow" | "evaluating"
 });
 
 export const headData = reactive({
@@ -640,52 +643,50 @@ export default defineComponent({
           }}
         >
           {/* 返回和标题 */}
-          {!(state.playState == "play" || followData.start || evaluatingData.startBegin) && (
-            <div id="noticeBarRollDom" class={styles.headTopLeftBox}>
-              <img src={iconBack} class={["headTopBackBtn", styles.img, !headTopData.showBack && styles.hidenBack]} onClick={handleBack} />
-              {smoothAnimationState.isShow.value ? (
-                <div
-                  style={
-                    noticeBarWidth.value
-                      ? {
-                          "--noticeBarWidth": noticeBarWidth.value + "px",
-                        }
-                      : {}
-                  }
-                  class={[styles.title, isMusicList.value && styles.isMusicList, "driver-8"]}
-                  onClick={() => {
-                    isMusicList.value && (musicListShow.value = true);
-                  }}
-                >
-                  <NoticeBar text={state.examSongName} background="none" />
-                </div>
-              ) : (
-                isMusicList.value && (
-                  <img
-                    src={listImg}
-                    class={[styles.img, styles.listImg, "driver-8"]}
-                    onClick={() => {
-                      musicListShow.value = true;
-                    }}
-                  />
-                )
-              )}
-            </div>
-          )}
-
+          {
+            !(state.playState == "play" || followData.start || evaluatingData.startBegin) &&
+              <div id="noticeBarRollDom" class={styles.headTopLeftBox}>
+                <img src={iconBack} class={['headTopBackBtn', styles.img, !headTopData.showBack && styles.hidenBack]} onClick={handleBack} />
+                {
+                  smoothAnimationState.isShow.value ?
+                    <div 
+                      style={
+                        noticeBarWidth.value ? {
+                          "--noticeBarWidth":noticeBarWidth.value + "px"
+                        } : {}
+                      }
+                      class={[styles.title,isMusicList.value && styles.isMusicList, "driver-8"]} 
+                      onClick={()=>{
+                        isMusicList.value && (musicListShow.value = true)
+                      }}>
+                        <NoticeBar
+                          text={state.examSongName}
+                          background="none"
+                        />
+                    </div> :
+                    isMusicList.value &&
+                    <img src={listImg} class={[styles.img, styles.listImg, "driver-8"]} onClick={()=>{
+                      musicListShow.value = true
+                    }} />
+                }
+              </div>
+          }
           {/* 模式切换 */}
-          <div
-            id={state.platform === IPlatform.PC ? "teacherTop-0" : "studnetT-0"}
-            style={{ display: toggleBtn.value.display ? "" : "none" }}
-            class={["driver-9", styles.modeChangeBox, toggleBtn.value.disabled && styles.disabled]}
-            onClick={() => {
-              handleRessetState();
-              headTopData.modeType = "init";
-            }}
-          >
-            <img class={styles.img} src={iconMode} />
-            <div class={styles.title}>{state.modeType === "practise" ? "练习模式" : state.modeType === "follow" ? "跟练模式" : state.modeType === "evaluating" ? "评测模式" : ""}</div>
-          </div>
+          {
+            <div 
+              id={state.platform === IPlatform.PC ? "teacherTop-0" : "studnetT-0"}
+              style={{ display: toggleBtn.value.display ? "" : "none" }}
+              class={["driver-9", styles.modeChangeBox, toggleBtn.value.disabled && styles.disabled]} 
+              onClick={() => {
+                  headTopData.oldModeType = state.modeType
+                  handleRessetState();
+                  headTopData.modeType = "init";
+              }}
+            >
+              <img class={styles.img} src={iconMode} />
+              <div class={styles.title}>{state.modeType==="practise" ? '练习模式' : state.modeType==="follow" ? "跟练模式" : state.modeType==="evaluating" ? "评测模式" : ""}</div>
+            </div>
+          }
 
           {/* 模式提醒 */}
           {

src/page-instrument/header-top/modeView.tsx

@@ -16,6 +16,7 @@ import { Vue3Lottie } from "vue3-lottie";
 import { popImgs, hanldeConfirmPop, hanldeClosePop, evaluatingData } from "/src/view/evaluating"
 import { Popup } from "vant";
 import AbnormalPop from "/src/view/abnormal-pop";
+import { smoothAnimationState } from "../view-detail/smoothAnimation";
 
 export default defineComponent({
   name: "modeView",
@@ -106,6 +107,11 @@ export default defineComponent({
           src={backImg}
           class={styles.back}
           onClick={() => {
+            smoothAnimationState.isShow.value = state.setting.melodyLine;
+            // 返回的时候 跳转到之前记录的模式
+            if(headTopData.oldModeType !== "practise"){
+              headTopData.handleChangeModeType(headTopData.oldModeType)
+            }
             headTopData.modeType = "show";
           }}
         />

src/page-instrument/header-top/settting/index.tsx

@@ -66,7 +66,12 @@ export default defineComponent({
                             state.isSingleLine && state.modeType === "practise" && !state.isCombineRender && !state.isPercussion && 
                                 <div class={styles.cellBox}>
                                 <div class={styles.tit}>旋律线</div>
-                                    <Switch v-model={smoothAnimationState.isShow.value}></Switch>
+                                    <Switch 
+                                        v-model={smoothAnimationState.isShow.value}
+                                        onChange={(value) => {
+                                            state.setting.melodyLine = value
+                                        }}                                        
+                                    ></Switch>
                                 </div>   
                         }                           
                         {

src/page-instrument/view-evaluat-report/component/share-top/index.tsx

@@ -1,4 +1,4 @@
-import { computed, defineComponent, nextTick, reactive, ref, toRefs } from "vue";
+import { computed, defineComponent, nextTick, reactive, ref, toRefs, onUnmounted } from "vue";
 import styles from "./index.module.less";
 
 import { api_back } from "/src/helpers/communication";
@@ -67,7 +67,9 @@ export default defineComponent({
     const handleBack = () => {
       api_back();
     };
-
+    onUnmounted(()=>{
+      shareData._plrl?.destroy()
+    })
     const handleChange = (type: IItemType) => {
       itemType.value = type;
       scoreData.value.itemType = type;

src/state.ts

@@ -424,7 +424,9 @@ const state = reactive({
     /** 反应时间 */
     reactionTimeMs: 0,
     /** 节拍器音量 */
-    beatVolume: 50
+    beatVolume: 50,
+    /** 旋律线开关 */
+    melodyLine: true,
   },
   /** 后台设置的基准评测频率 */
   baseFrequency: 440,
@@ -649,7 +651,7 @@ export const resetBaseRate = (idx?: number) => {
   const index = idx ? idx : 0;
   const currentItem: any = state.times[index];
   const currentSpeed = currentItem?.measureSpeed ? currentItem.measureSpeed : state.originSpeed;
-  // console.log('速度2',currentSpeed)
+  console.log('速度2',currentSpeed)
   state.speed = currentSpeed
   //state.activeNoteIndex = 0
   state.basePlayRate = 1;

src/view/evaluating/index.tsx

@@ -35,7 +35,7 @@ import {
   api_startDelayCheck,
   api_closeDelayCheck,
 } from "/src/helpers/communication";
-import state, { IPlayState, clearSelection, handleStopPlay, onPlay, resetPlaybackToStart, togglePlay, initSetPlayRate } from "/src/state";
+import state, { IPlayState, clearSelection, handleStopPlay, onPlay, resetPlaybackToStart, togglePlay, initSetPlayRate, resetBaseRate } from "/src/state";
 import { IPostMessage } from "/src/utils/native-message";
 import { usePageVisibility } from "@vant/use";
 import { browser } from "/src/utils";
@@ -321,7 +321,7 @@ const handleScoreResult = (res?: IPostMessage) => {
       evaluatingData.soundEffectFrequency = body.frequency;
     }
     // 小节评分返回
-    if (header?.commond === "measureScore") {
+    if (header?.commond === "measureScore" && !evaluatingData.oneselfCancleEvaluating) {
       console.log("🚀 ~ 评测返回:", res);
       addMeasureScore(body);
     }
@@ -527,6 +527,13 @@ export const handleEndEvaluat = (isComplete = false, endType?: string) => {
   }
   setTimeout(() => {
     evaluatingData.startBegin = false;
+    if (endType === 'selfCancel') {
+      // 重置播放倍率
+      const item: any = (state.sectionStatus && state.section.length === 2) ? state.sectionFirst || state.section[0] : state.times[0];
+      state.activeNoteIndex = item.i;
+      state.activeMeasureIndex = item.MeasureNumberXML;
+      resetBaseRate(item.i);
+    }
   }, 500);
   evaluatingData.isComplete = isComplete;
   // 如果开启了摄像头, 结束录制视频

src/view/music-score/index.module.less

@@ -77,6 +77,9 @@
         z-index: 999;
     }
 }
+.notTouch{
+    touch-action: none;
+}
 .inGradualRange{
    :global{
         #cursorImg-0{

src/view/music-score/index.tsx

@@ -225,7 +225,8 @@ export default defineComponent({
 					isInTheGradualRange.value && styles.inGradualRange,
 					state.musicRenderType == EnumMusicRenderType.staff ? "staff" : "jianpuTone",
 					state.isSingleLine && "singleLineMusicBox",
-					(!state.isCreateImg && !state.isPreView && state.musicRenderType === EnumMusicRenderType.staff) ? "blueMusicXml" : ""
+					(!state.isCreateImg && !state.isPreView && state.musicRenderType === EnumMusicRenderType.staff) ? "blueMusicXml" : "",
+					state.isSingleLine && state.playState ==="play" && styles.notTouch
 				]}
 			>
 				{slots.default?.()}